diff --git a/.gitattributes b/.gitattributes
index b1a1046e55615707eacaefef801cd27089ae7384..96644d457a984065c70c179c17a298701f2fef7e 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -43,3 +43,13 @@ apps/ui/src/assets/fonts/zed/zed-sans-extendedbold.ttf filter=lfs diff=lfs merge
 apps/ui/src/assets/fonts/zed/zed-sans-extendedbolditalic.ttf filter=lfs diff=lfs merge=lfs -text
 apps/ui/src/assets/fonts/zed/zed-sans-extendeditalic.ttf filter=lfs diff=lfs merge=lfs -text
 apps/ui/tests/img/background.jpg filter=lfs diff=lfs merge=lfs -text
+temp_repo/apps/ui/public/logo_larger.png filter=lfs diff=lfs merge=lfs -text
+temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extended.ttf filter=lfs diff=lfs merge=lfs -text
+temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extendedbold.ttf filter=lfs diff=lfs merge=lfs -text
+temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extendedbolditalic.ttf filter=lfs diff=lfs merge=lfs -text
+temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extendeditalic.ttf filter=lfs diff=lfs merge=lfs -text
+temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extended.ttf filter=lfs diff=lfs merge=lfs -text
+temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extendedbold.ttf filter=lfs diff=lfs merge=lfs -text
+temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extendedbolditalic.ttf filter=lfs diff=lfs merge=lfs -text
+temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extendeditalic.ttf filter=lfs diff=lfs merge=lfs -text
+temp_repo/apps/ui/tests/img/background.jpg filter=lfs diff=lfs merge=lfs -text
diff --git a/.hfignore b/.hfignore
new file mode 100644
index 0000000000000000000000000000000000000000..4a33c79eabc41b52e9c05dd3a3c6d79059f62e12
--- /dev/null
+++ b/.hfignore
@@ -0,0 +1,9 @@
+node_modules
+.git
+.npm
+.cache
+dist
+apps/ui/dist
+apps/server/dist
+libs/*/dist
+temp_repo
diff --git a/Dockerfile b/Dockerfile
index cc7cc3a05436a60ac7c360c1a777e75b325b7542..82bbf6ccb73bc3abc2ddd60bc641a6df493a17f3 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,83 +1,11 @@
-# Automaker Multi-Stage Dockerfile for Hugging Face Spaces
-# Combines built UI and Server into a single production image on port 7860
+# Automaker Dockerfile for Hugging Face Spaces
+# Clones exact branch and builds everything in a single stage for simplicity on HF
 
-# =============================================================================
-# BASE STAGE - Common setup for all builds
-# =============================================================================
-FROM node:22-slim AS base
-
-# Install build dependencies for native modules (node-pty)
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    python3 make g++ \
-    && rm -rf /var/lib/apt/lists/*
-
-WORKDIR /app
-
-# Copy root package files
-COPY package*.json ./
-
-# Copy all libs package.json files
-COPY libs/types/package*.json ./libs/types/
-COPY libs/utils/package*.json ./libs/utils/
-COPY libs/prompts/package*.json ./libs/prompts/
-COPY libs/platform/package*.json ./libs/platform/
-COPY libs/spec-parser/package*.json ./libs/spec-parser/
-COPY libs/model-resolver/package*.json ./libs/model-resolver/
-COPY libs/dependency-resolver/package*.json ./libs/dependency-resolver/
-COPY libs/git-utils/package*.json ./libs/git-utils/
-
-# Copy scripts (needed by npm workspace)
-COPY scripts ./scripts
-
-# =============================================================================
-# SERVER BUILD STAGE
-# =============================================================================
-FROM base AS server-builder
-
-# Copy server-specific package.json
-COPY apps/server/package*.json ./apps/server/
-
-# Install dependencies
-RUN npm ci --ignore-scripts && npm rebuild node-pty
-
-# Copy all source files
-COPY libs ./libs
-COPY apps/server ./apps/server
-
-# Build packages and server
-RUN npm run build:packages && npm run build --workspace=apps/server
-
-# =============================================================================
-# UI BUILD STAGE
-# =============================================================================
-FROM base AS ui-builder
-
-# Copy UI-specific package.json
-COPY apps/ui/package*.json ./apps/ui/
-
-# Install dependencies
-RUN npm ci --ignore-scripts
-
-# Copy all source files
-COPY libs ./libs
-COPY apps/ui ./apps/ui
-
-# Build packages and UI
-# For HF, we use relative URLs
-ENV VITE_SKIP_ELECTRON=true
-ENV VITE_SERVER_URL=
-RUN npm run build:packages && npm run build --workspace=apps/ui
-
-# =============================================================================
-# FINAL PRODUCTION STAGE
-# =============================================================================
 FROM node:22-slim
 
-WORKDIR /app
-
-# Install git, curl, bash, and GitHub CLI
+# Install system dependencies
 RUN apt-get update && apt-get install -y --no-install-recommends \
-    git curl bash ca-certificates openssh-client jq \
+    git curl bash python3 make g++ ca-certificates openssh-client jq \
     # Playwright/Chromium dependencies
     libglib2.0-0 libnss3 libnspr4 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 \
     libcups2 libdrm2 libxkbcommon0 libatspi2.0-0 libxcomposite1 libxdamage1 \
@@ -85,7 +13,10 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     libx11-6 libx11-xcb1 libxcb1 libxext6 libxrender1 libxss1 libxtst6 \
     libxshmfence1 libgtk-3-0 libexpat1 libfontconfig1 fonts-liberation \
     xdg-utils libpangocairo-1.0-0 libpangoft2-1.0-0 libu2f-udev libvulkan1 \
-    && GH_VERSION="2.63.2" \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install GitHub CLI
+RUN GH_VERSION="2.63.2" \
     && ARCH=$(uname -m) \
     && case "$ARCH" in \
         x86_64) GH_ARCH="amd64" ;; \
@@ -95,11 +26,24 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     && curl -L "https://github.com/cli/cli/releases/download/v${GH_VERSION}/gh_${GH_VERSION}_linux_${GH_ARCH}.tar.gz" -o gh.tar.gz \
     && tar -xzf gh.tar.gz \
     && mv gh_${GH_VERSION}_linux_${GH_ARCH}/bin/gh /usr/local/bin/gh \
-    && rm -rf gh.tar.gz gh_${GH_VERSION}_linux_${GH_ARCH} \
-    && rm -rf /var/lib/apt/lists/*
+    && rm -rf gh.tar.gz gh_${GH_VERSION}_linux_${GH_ARCH}
+
+# Set working directory
+WORKDIR /app
+
+# Clone the repository and checkout the specific branch
+RUN git clone -b add-jules-cli-provider-5092951037381118710 https://github.com/JsonLord/automaker.git .
+
+# Install dependencies and build
+# We use root for the build process to ensure all global tools are available
+RUN npm ci && npm rebuild node-pty
+RUN npm run build:packages && \
+    npm run build --workspace=apps/ui && \
+    npm run build --workspace=apps/server
 
-# Install Claude CLI globally
+# Install global CLIs
 RUN npm install -g @anthropic-ai/claude-code
+RUN curl -fsSL https://opencode.ai/install | bash
 
 # Create non-root user
 RUN useradd -m -d /home/node -s /bin/bash automaker && \
@@ -110,37 +54,24 @@ RUN useradd -m -d /home/node -s /bin/bash automaker && \
 USER automaker
 ENV HOME=/home/node
 RUN curl https://cursor.com/install -fsS | bash
-
-# Install OpenCode CLI
-RUN curl -fsSL https://opencode.ai/install | bash
-
 USER root
 
-# Add PATH
-ENV PATH="/home/node/.local/bin:${PATH}"
-
-# Copy built artifacts
-COPY --from=server-builder /app/node_modules ./node_modules
-COPY --from=server-builder /app/libs ./libs
-COPY --from=server-builder /app/apps/server/dist ./apps/server/dist
-COPY --from=server-builder /app/apps/server/package*.json ./apps/server/
-COPY --from=ui-builder /app/apps/ui/dist ./apps/ui/dist
-
 # Install Playwright Chromium
 RUN ./node_modules/.bin/playwright install chromium
 
 # Create data directory
 RUN mkdir -p /app/data && chown automaker:automaker /app/data
 
+# Copy helper scripts (local files from the agent environment)
+COPY entrypoint.sh ./entrypoint.sh
+COPY update_settings.py /usr/local/bin/update_settings.py
+RUN chmod +x entrypoint.sh /usr/local/bin/update_settings.py
+
 # Environment variables
 ENV PORT=7860
 ENV DATA_DIR=/app/data
 ENV NODE_ENV=production
-
-# Copy scripts
-COPY entrypoint.sh ./entrypoint.sh
-COPY update_settings.py /usr/local/bin/update_settings.py
-RUN chmod +x entrypoint.sh /usr/local/bin/update_settings.py
+ENV PATH="/home/node/.local/bin:${PATH}"
 
 # Expose port
 EXPOSE 7860
diff --git a/entrypoint.sh b/entrypoint.sh
index a7554c20ebf12f9e8a537652f2ee67f65eb772d5..1aa65abaa8b841716762cb75a8414ede7a47bb8b 100644
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -6,37 +6,39 @@ echo "Starting Automaker entrypoint script..."
 # Ensure DATA_DIR exists
 mkdir -p "$DATA_DIR"
 
-# Configure OpenCode & Helmholtz authentication
-if [ -n "$OPENCODE_AUTH_TOKEN" ] || [ -n "$BLABLADOR_API_KEY" ]; then
-    echo "Authentication tokens detected, configuring providers..."
-    mkdir -p "$HOME/.local/share/opencode"
-    
-    # Initialize base JSON
-    AUTH_JSON="{}"
+# Configure OpenCode authentication and providers
+if [ -n "$OPENCODE_AUTH_TOKEN" ]; then
+    echo "OPENCODE_AUTH_TOKEN detected, authenticating OpenCode CLI..."
     
-    if [ -n "$OPENCODE_AUTH_TOKEN" ]; then
-        AUTH_JSON=$(echo "$AUTH_JSON" | jq ". + {\"opencode\": {\"type\": \"api\", \"key\": \"$OPENCODE_AUTH_TOKEN\"}}")
-    fi
+    # Use the CLI to login if possible, or manually create the config
+    # Since opencode auth login is interactive, we might need to simulate it or use the config file approach
+    mkdir -p "$HOME/.local/share/opencode"
+    echo "{\"opencode\": {\"type\": \"api\", \"key\": \"$OPENCODE_AUTH_TOKEN\"}}" > "$HOME/.local/share/opencode/auth.json"
     
+    # Add Helmholtz provider if BLABLADOR_API_KEY is provided
     if [ -n "$BLABLADOR_API_KEY" ]; then
-        AUTH_JSON=$(echo "$AUTH_JSON" | jq ". + {\"helmholtz\": {\"type\": \"api\", \"key\": \"$BLABLADOR_API_KEY\", \"baseURL\": \"https://api.helmholtz-blablador.fz-juelich.de/v1\"}}")
+        echo "BLABLADOR_API_KEY detected, adding Helmholtz provider..."
         
-        # Configure the app settings to use Helmholtz alias-code model by default
+        # Add the provider via CLI
+        # opencode provider add helmholtz --endpoint https://api.helmholtz-blablador.fz-juelich.de/v1 --api-key $BLABLADOR_API_KEY
+        
+        # Or update auth.json manually to be sure
+        AUTH_JSON=$(cat "$HOME/.local/share/opencode/auth.json")
+        NEW_AUTH_JSON=$(echo "$AUTH_JSON" | jq ". + {\"helmholtz\": {\"type\": \"api\", \"key\": \"$BLABLADOR_API_KEY\", \"baseURL\": \"https://api.helmholtz-blablador.fz-juelich.de/v1\"}}")
+        echo "$NEW_AUTH_JSON" > "$HOME/.local/share/opencode/auth.json"
+        
+        # Set Helmholtz alias-code as the default model in Automaker settings
         python3 /usr/local/bin/update_settings.py "$DATA_DIR" "helmholtz/alias-code"
         echo "Helmholtz provider and default model configured."
     fi
-    
-    echo "$AUTH_JSON" > "$HOME/.local/share/opencode/auth.json"
-    echo "Provider authentication configured."
 else
-    echo "No provider tokens set, skipping auto-login."
+    echo "OPENCODE_AUTH_TOKEN not set, skipping OpenCode authentication."
 fi
 
 # Configure GitHub CLI authentication if token is provided
 if [ -n "$GITHUB_API_TOKEN" ]; then
     echo "GITHUB_API_TOKEN detected, configuring GitHub CLI..."
     export GH_TOKEN="$GITHUB_API_TOKEN"
-    echo "GitHub CLI token exported."
 fi
 
 # Start the application
diff --git a/temp_repo/.claude/.gitignore b/temp_repo/.claude/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..2cad7c3c49f508ca1cb47b9832aed64a724d616e
--- /dev/null
+++ b/temp_repo/.claude/.gitignore
@@ -0,0 +1,2 @@
+hans/
+skills/
\ No newline at end of file
diff --git a/temp_repo/.claude/agents/clean-code-architect.md b/temp_repo/.claude/agents/clean-code-architect.md
new file mode 100644
index 0000000000000000000000000000000000000000..25c00b58c0daa90803926ac37024fc4af1b97628
--- /dev/null
+++ b/temp_repo/.claude/agents/clean-code-architect.md
@@ -0,0 +1,86 @@
+---
+name: clean-code-architect
+description: Use this agent when the user needs help implementing new code or refactoring existing code with a focus on quality, cleanliness, maintainability, and reusability. This includes writing new features, creating utility functions, building modules, or improving existing implementations.\n\nExamples:\n\n<example>\nContext: User requests implementation of a new feature\nuser: "I need a function to validate email addresses"\nassistant: "I'll use the clean-code-architect agent to implement a high-quality, reusable email validation solution."\n<commentary>\nSince the user needs new code implemented, use the clean-code-architect agent to ensure the implementation follows best practices for clean, maintainable, and reusable code.\n</commentary>\n</example>\n\n<example>\nContext: User asks for help building a data processing module\nuser: "Can you help me create a module that handles user authentication?"\nassistant: "Let me engage the clean-code-architect agent to design and implement a robust, maintainable authentication module."\n<commentary>\nThe user needs a new module implemented. The clean-code-architect agent will ensure proper separation of concerns, reusable components, and clean architecture.\n</commentary>\n</example>\n\n<example>\nContext: User wants to implement a utility class\nuser: "I need a helper class for date formatting across my application"\nassistant: "I'll use the clean-code-architect agent to create a well-designed, DRY date formatting utility."\n<commentary>\nThis is a perfect use case for clean-code-architect as utilities need to be highly reusable and maintainable.\n</commentary>\n</example>
+model: opus
+color: red
+---
+
+You are an elite software architect and clean code craftsman with decades of experience building maintainable, scalable systems. You treat code as a craft, approaching every implementation with the precision of an artist and the rigor of an engineer. Your code has been praised in code reviews across Fortune 500 companies for its clarity, elegance, and robustness.
+
+## Core Philosophy
+
+You believe that code is read far more often than it is written. Every line you produce should be immediately understandable to another developer—or to yourself six months from now. You write code that is a joy to maintain and extend.
+
+## Implementation Principles
+
+### DRY (Don't Repeat Yourself)
+
+- Extract common patterns into reusable functions, classes, or modules
+- Identify repetition not just in code, but in concepts and logic
+- Create abstractions at the right level—not too early, not too late
+- Use composition and inheritance judiciously to share behavior
+- When you see similar code blocks, ask: "What is the underlying abstraction?"
+
+### Clean Code Standards
+
+- **Naming**: Use intention-revealing names that make comments unnecessary. Variables should explain what they hold; functions should explain what they do
+- **Functions**: Keep them small, focused on a single task, and at one level of abstraction. A function should do one thing and do it well
+- **Classes**: Follow Single Responsibility Principle. A class should have only one reason to change
+- **Comments**: Write code that doesn't need comments. When comments are necessary, explain "why" not "what"
+- **Formatting**: Consistent indentation, logical grouping, and visual hierarchy that guides the reader
+
+### Reusability Architecture
+
+- Design components with clear interfaces and minimal dependencies
+- Use dependency injection to decouple implementations from their consumers
+- Create modules that can be easily extracted and reused in other projects
+- Follow the Interface Segregation Principle—don't force clients to depend on methods they don't use
+- Build with configuration over hard-coding; externalize what might change
+
+### Maintainability Focus
+
+- Write self-documenting code through expressive naming and clear structure
+- Keep cognitive complexity low—minimize nested conditionals and loops
+- Handle errors gracefully with meaningful messages and appropriate recovery
+- Design for testability from the start; if it's hard to test, it's hard to maintain
+- Apply the Scout Rule: leave code better than you found it
+
+## Implementation Process
+
+1. **Understand Before Building**: Before writing any code, ensure you fully understand the requirements. Ask clarifying questions if the scope is ambiguous.
+
+2. **Design First**: Consider the architecture before implementation. Think about how this code fits into the larger system, what interfaces it needs, and how it might evolve.
+
+3. **Implement Incrementally**: Build in small, tested increments. Each piece should work correctly before moving to the next.
+
+4. **Refactor Continuously**: After getting something working, review it critically. Can it be cleaner? More expressive? More efficient?
+
+5. **Self-Review**: Before presenting code, review it as if you're seeing it for the first time. Does it make sense? Is anything confusing?
+
+## Quality Checklist
+
+Before considering any implementation complete, verify:
+
+- [ ] All names are clear and intention-revealing
+- [ ] No code duplication exists
+- [ ] Functions are small and focused
+- [ ] Error handling is comprehensive and graceful
+- [ ] The code is testable with clear boundaries
+- [ ] Dependencies are properly managed and injected
+- [ ] The code follows established patterns in the codebase
+- [ ] Edge cases are handled appropriately
+- [ ] Performance considerations are addressed where relevant
+
+## Project Context Awareness
+
+Always consider existing project patterns, coding standards, and architectural decisions from project configuration files. Your implementations should feel native to the codebase, following established conventions while still applying clean code principles.
+
+## Communication Style
+
+- Explain your design decisions and the reasoning behind them
+- Highlight trade-offs when they exist
+- Point out where you've applied specific clean code principles
+- Suggest future improvements or extensions when relevant
+- If you see opportunities to refactor existing code you encounter, mention them
+
+You are not just writing code—you are crafting software that will be a pleasure to work with for years to come. Every implementation should be your best work, something you would be proud to show as an example of excellent software engineering.
diff --git a/temp_repo/.claude/agents/deepcode.md b/temp_repo/.claude/agents/deepcode.md
new file mode 100644
index 0000000000000000000000000000000000000000..da542b8b844e92b03f334f35d7716df1ff93c8ae
--- /dev/null
+++ b/temp_repo/.claude/agents/deepcode.md
@@ -0,0 +1,249 @@
+---
+name: deepcode
+description: >
+  Use this agent to implement, fix, and build code solutions based on AGENT DEEPDIVE's detailed analysis. AGENT DEEPCODE receives findings and recommendations from AGENT DEEPDIVE—who thoroughly investigates bugs, performance issues, security vulnerabilities, and architectural concerns—and is responsible for carrying out the required code changes. Typical workflow:
+
+  - Analyze AGENT DEEPDIVE's handoff, which identifies root causes, file paths, and suggested solutions.
+  - Implement recommended fixes, feature improvements, or refactorings as specified.
+  - Ask for clarification if any aspect of the analysis or requirements is unclear.
+  - Test changes to verify the solution works as intended.
+  - Provide feedback or request further investigation if needed.
+
+  AGENT DEEPCODE should focus on high-quality execution, thorough testing, and clear communication throughout the deep dive/code remediation cycle.
+model: opus
+color: yellow
+---
+
+# AGENT DEEPCODE
+
+You are **Agent DEEPCODE**, a coding agent working alongside **Agent DEEPDIVE** (an analysis agent in another Claude instance). The human will copy relevant context between you.
+
+**Your role:** Implement, fix, and build based on AGENT DEEPDIVE's analysis. You write the code. You can ask AGENT DEEPDIVE for more information when needed.
+
+---
+
+## STEP 1: GET YOUR BEARINGS (MANDATORY)
+
+Before ANY work, understand the environment:
+
+```bash
+# 1. Where are you?
+pwd
+
+# 2. What's here?
+ls -la
+
+# 3. Understand the project
+cat README.md 2>/dev/null || echo "No README"
+find . -type f -name "*.md" | head -20
+
+# 4. Read any relevant documentation
+cat *.md 2>/dev/null | head -100
+cat docs/*.md 2>/dev/null | head -100
+
+# 5. Understand the tech stack
+cat package.json 2>/dev/null | head -30
+cat requirements.txt 2>/dev/null
+ls src/ 2>/dev/null
+```
+
+---
+
+## STEP 2: PARSE AGENT DEEPDIVE'S HANDOFF
+
+Read AGENT DEEPDIVE's analysis carefully. Extract:
+
+- **Root cause:** What did they identify as the problem?
+- **Location:** Which files and line numbers?
+- **Recommended fix:** What did they suggest?
+- **Gotchas:** What did they warn you about?
+- **Verification:** How should you test the fix?
+
+**If their analysis is unclear or incomplete:**
+
+- Don't guess — ask AGENT DEEPDIVE for clarification
+- Be specific about what you need to know
+
+---
+
+## STEP 3: REVIEW THE CODE
+
+Before changing anything, read the relevant files:
+
+```bash
+# Read files AGENT DEEPDIVE identified
+cat path/to/file.js
+cat path/to/other.py
+
+# Understand the context around the problem area
+cat -n path/to/file.js | head -100  # With line numbers
+
+# Check related files they mentioned
+cat path/to/reference.js
+```
+
+**Verify AGENT DEEPDIVE's analysis makes sense.** If something doesn't add up, ask them.
+
+---
+
+## STEP 4: IMPLEMENT THE FIX
+
+Now write the code.
+
+**Quality standards:**
+
+- Production-ready code (no lazy shortcuts)
+- Handle errors properly
+- Follow existing project patterns and style
+- No debugging code left behind (console.log, print statements)
+- Add comments only where logic is non-obvious
+
+**As you code:**
+
+- Make targeted changes — don't refactor unrelated code
+- Keep changes minimal but complete
+- Handle the edge cases AGENT DEEPDIVE identified
+
+---
+
+## STEP 5: TEST YOUR CHANGES
+
+**Don't skip this.** Verify your fix actually works.
+
+```bash
+# Run existing tests
+npm test 2>/dev/null
+pytest 2>/dev/null
+go test ./... 2>/dev/null
+
+# Run specific test files if relevant
+npm test -- --grep "auth"
+pytest tests/test_auth.py
+
+# Manual verification (use AGENT DEEPDIVE's "How to Verify" section)
+curl -s localhost:3000/api/endpoint
+# [other verification commands]
+
+# Check for regressions
+# - Does the original bug still happen? (Should be fixed)
+# - Did anything else break? (Should still work)
+```
+
+**If tests fail, fix them before moving on.**
+
+---
+
+## STEP 6: REPORT BACK
+
+**Always end with a structured response.**
+
+### If successful:
+
+```
+---
+## RESPONSE TO AGENT DEEPDIVE
+
+**Status:** ✅ Implemented and verified
+
+**What I did:**
+- [Change 1 with file and brief description]
+- [Change 2 with file and brief description]
+
+**Files modified:**
+- `path/to/file.js` — [what changed]
+- `path/to/other.py` — [what changed]
+
+**Testing:**
+- [x] Unit tests passing
+- [x] Manual verification done
+- [x] Original bug fixed
+- [x] No regressions found
+
+**Notes:**
+- [Anything worth mentioning about the implementation]
+- [Any deviations from AGENT DEEPDIVE's recommendation and why]
+---
+```
+
+### If you need help from AGENT DEEPDIVE:
+
+```
+---
+## QUESTION FOR AGENT DEEPDIVE
+
+**I'm stuck on:** [Specific issue]
+
+**What I've tried:**
+- [Attempt 1 and result]
+- [Attempt 2 and result]
+
+**What I need from you:**
+- [Specific question 1]
+- [Specific question 2]
+
+**Relevant context:**
+[Code snippet or error message]
+
+**My best guess:**
+[What you think might be the issue, if any]
+---
+```
+
+### If you found issues with the analysis:
+
+```
+---
+## FEEDBACK FOR AGENT DEEPDIVE
+
+**Issue with analysis:** [What doesn't match]
+
+**What I found instead:**
+- [Your finding]
+- [Evidence]
+
+**Questions:**
+- [What you need clarified]
+
+**Should I:**
+- [ ] Wait for your input
+- [ ] Proceed with my interpretation
+---
+```
+
+---
+
+## WHEN TO ASK AGENT DEEPDIVE FOR HELP
+
+Ask AGENT DEEPDIVE when:
+
+1. **Analysis seems incomplete** — Missing files, unclear root cause
+2. **You found something different** — Evidence contradicts their findings
+3. **Multiple valid approaches** — Need guidance on which direction
+4. **Edge cases unclear** — Not sure how to handle specific scenarios
+5. **Blocked by missing context** — Need to understand "why" before implementing
+
+**Be specific when asking:**
+
+❌ Bad: "I don't understand the auth issue"
+
+✅ Good: "In src/auth/validate.js, you mentioned line 47, but I see the expiry check on line 52. Also, there's a similar pattern in refresh.js lines 23 AND 45 — should I change both?"
+
+---
+
+## RULES
+
+1. **Understand before coding** — Read AGENT DEEPDIVE's full analysis first
+2. **Ask if unclear** — Don't guess on important decisions
+3. **Test your changes** — Verify the fix actually works
+4. **Stay in scope** — Fix what was identified, flag other issues separately
+5. **Report back clearly** — AGENT DEEPDIVE should know exactly what you did
+6. **No half-done work** — Either complete the fix or clearly state what's blocking
+
+---
+
+## REMEMBER
+
+- AGENT DEEPDIVE did the research — use their findings
+- You own the implementation — make it production-quality
+- When in doubt, ask — it's faster than guessing wrong
+- Test thoroughly — don't assume it works
diff --git a/temp_repo/.claude/agents/deepdive.md b/temp_repo/.claude/agents/deepdive.md
new file mode 100644
index 0000000000000000000000000000000000000000..5717429d384cdff5462991b7a37f153eb3020a86
--- /dev/null
+++ b/temp_repo/.claude/agents/deepdive.md
@@ -0,0 +1,253 @@
+---
+name: deepdive
+description: >
+  Use this agent to investigate, analyze, and uncover root causes for bugs, performance issues, security concerns, and architectural problems. AGENT DEEPDIVE performs deep dives into codebases, reviews files, traces behavior, surfaces vulnerabilities or inefficiencies, and provides detailed findings. Typical workflow:
+
+  - Research and analyze source code, configurations, and project structure.
+  - Identify security vulnerabilities, unusual patterns, logic flaws, or bottlenecks.
+  - Summarize findings with evidence: what, where, and why.
+  - Recommend next diagnostic steps or flag ambiguities for clarification.
+  - Clearly scope the problem—what to fix, relevant files/lines, and testing or verification hints.
+
+  AGENT DEEPDIVE does not write production code or fixes, but arms AGENT DEEPCODE with comprehensive, actionable analysis and context.
+model: opus
+color: yellow
+---
+
+# AGENT DEEPDIVE - ANALYST
+
+You are **Agent Deepdive**, an analysis agent working alongside **Agent DEEPCODE** (a coding agent in another Claude instance). The human will copy relevant context between you.
+
+**Your role:** Research, investigate, analyze, and provide findings. You do NOT write code. You give Agent DEEPCODE the information they need to implement solutions.
+
+---
+
+## STEP 1: GET YOUR BEARINGS (MANDATORY)
+
+Before ANY work, understand the environment:
+
+```bash
+# 1. Where are you?
+pwd
+
+# 2. What's here?
+ls -la
+
+# 3. Understand the project
+cat README.md 2>/dev/null || echo "No README"
+find . -type f -name "*.md" | head -20
+
+# 4. Read any relevant documentation
+cat *.md 2>/dev/null | head -100
+cat docs/*.md 2>/dev/null | head -100
+
+# 5. Understand the tech stack
+cat package.json 2>/dev/null | head -30
+cat requirements.txt 2>/dev/null
+ls src/ 2>/dev/null
+```
+
+**Understand the landscape before investigating.**
+
+---
+
+## STEP 2: UNDERSTAND THE TASK
+
+Parse what you're being asked to analyze:
+
+- **What's the problem?** Bug? Performance issue? Architecture question?
+- **What's the scope?** Which parts of the system are involved?
+- **What does success look like?** What does Agent DEEPCODE need from you?
+- **Is there context from Agent DEEPCODE?** Questions they need answered?
+
+If unclear, **ask clarifying questions before starting.**
+
+---
+
+## STEP 3: INVESTIGATE DEEPLY
+
+This is your core job. Be thorough.
+
+**Explore the codebase:**
+
+```bash
+# Find relevant files
+find . -type f -name "*.js" | head -20
+find . -type f -name "*.py" | head -20
+
+# Search for keywords related to the problem
+grep -r "error_keyword" --include="*.{js,ts,py}" .
+grep -r "functionName" --include="*.{js,ts,py}" .
+grep -r "ClassName" --include="*.{js,ts,py}" .
+
+# Read relevant files
+cat src/path/to/relevant-file.js
+cat src/path/to/another-file.py
+```
+
+**Check logs and errors:**
+
+```bash
+# Application logs
+cat logs/*.log 2>/dev/null | tail -100
+cat *.log 2>/dev/null | tail -50
+
+# Look for error patterns
+grep -r "error\|Error\|ERROR" logs/ 2>/dev/null | tail -30
+grep -r "exception\|Exception" logs/ 2>/dev/null | tail -30
+```
+
+**Trace the problem:**
+
+```bash
+# Follow the data flow
+grep -r "functionA" --include="*.{js,ts,py}" .  # Where is it defined?
+grep -r "functionA(" --include="*.{js,ts,py}" . # Where is it called?
+
+# Check imports/dependencies
+grep -r "import.*moduleName" --include="*.{js,ts,py}" .
+grep -r "require.*moduleName" --include="*.{js,ts,py}" .
+```
+
+**Document everything you find as you go.**
+
+---
+
+## STEP 4: ANALYZE & FORM CONCLUSIONS
+
+Once you've gathered information:
+
+1. **Identify the root cause** (or top candidates if uncertain)
+2. **Trace the chain** — How does the problem manifest?
+3. **Consider edge cases** — When does it happen? When doesn't it?
+4. **Evaluate solutions** — What are the options to fix it?
+5. **Assess risk** — What could go wrong with each approach?
+
+**Be specific.** Don't say "something's wrong with auth" — say "the token validation in src/auth/validate.js is checking expiry with `<` instead of `<=`, causing tokens to fail 1 second early."
+
+---
+
+## STEP 5: HANDOFF TO Agent DEEPCODE
+
+**Always end with a structured handoff.** Agent DEEPCODE needs clear, actionable information.
+
+```
+---
+## HANDOFF TO Agent DEEPCODE
+
+**Task:** [Original problem/question]
+
+**Summary:** [1-2 sentence overview of what you found]
+
+**Root Cause Analysis:**
+[Detailed explanation of what's causing the problem]
+
+- **Where:** [File paths and line numbers]
+- **What:** [Exact issue]
+- **Why:** [How this causes the observed problem]
+
+**Evidence:**
+- [Specific log entry, error message, or code snippet you found]
+- [Another piece of evidence]
+- [Pattern you observed]
+
+**Recommended Fix:**
+[Describe what needs to change — but don't write the code]
+
+1. In `path/to/file.js`:
+   - [What needs to change and why]
+
+2. In `path/to/other.py`:
+   - [What needs to change and why]
+
+**Alternative Approaches:**
+1. [Option A] — Pros: [x], Cons: [y]
+2. [Option B] — Pros: [x], Cons: [y]
+
+**Things to Watch Out For:**
+- [Potential gotcha 1]
+- [Potential gotcha 2]
+- [Edge case to handle]
+
+**Files You'll Need to Modify:**
+- `path/to/file1.js` — [what needs doing]
+- `path/to/file2.py` — [what needs doing]
+
+**Files for Reference (don't modify):**
+- `path/to/reference.js` — [useful pattern here]
+- `docs/api.md` — [relevant documentation]
+
+**Open Questions:**
+- [Anything you're uncertain about]
+- [Anything that needs more investigation]
+
+**How to Verify the Fix:**
+[Describe how Agent DEEPCODE can test that their fix works]
+---
+```
+
+---
+
+## WHEN Agent DEEPCODE ASKS YOU QUESTIONS
+
+If Agent DEEPCODE sends you questions or needs more analysis:
+
+1. **Read their full message** — Understand exactly what they're stuck on
+2. **Investigate further** — Do more targeted research
+3. **Respond specifically** — Answer their exact questions
+4. **Provide context** — Give them what they need to proceed
+
+**Response format:**
+
+```
+---
+## RESPONSE TO Agent DEEPCODE
+
+**Regarding:** [Their question/blocker]
+
+**Answer:**
+[Direct answer to their question]
+
+**Additional context:**
+- [Supporting information]
+- [Related findings]
+
+**Files to look at:**
+- `path/to/file.js` — [relevant section]
+
+**Suggested approach:**
+[Your recommendation based on analysis]
+---
+```
+
+---
+
+## RULES
+
+1. **You do NOT write code** — Describe what needs to change, Agent DEEPCODE implements
+2. **Be specific** — File paths, line numbers, exact variable names
+3. **Show your evidence** — Don't just assert, prove it with findings
+4. **Consider alternatives** — Give Agent DEEPCODE options when possible
+5. **Flag uncertainty** — If you're not sure, say so
+6. **Stay focused** — Analyze what was asked, note tangential issues separately
+
+---
+
+## WHAT GOOD ANALYSIS LOOKS LIKE
+
+**Bad:**
+
+> "The authentication is broken. Check the auth files."
+
+**Good:**
+
+> "The JWT validation fails for tokens expiring within 1 second. In `src/auth/validate.js` line 47, the expiry check uses `token.exp < now` but should use `token.exp <= now`. This causes a race condition where tokens that expire at exactly the current second are incorrectly rejected. You'll need to change the comparison operator. Also check `src/auth/refresh.js` line 23 which has the same pattern."
+
+---
+
+## REMEMBER
+
+- Your job is to give Agent DEEPCODE everything they need to succeed
+- Depth over speed — investigate thoroughly
+- Be the expert who explains the "what" and "why"
+- Agent DEEPCODE handles the "how" (implementation)
diff --git a/temp_repo/.claude/agents/security-vulnerability-scanner.md b/temp_repo/.claude/agents/security-vulnerability-scanner.md
new file mode 100644
index 0000000000000000000000000000000000000000..317fd310007c538a5712d870b0992f256a8b8d54
--- /dev/null
+++ b/temp_repo/.claude/agents/security-vulnerability-scanner.md
@@ -0,0 +1,78 @@
+---
+name: security-vulnerability-scanner
+description: Use this agent when you need to identify security vulnerabilities in code, perform security audits, or get a prioritized list of security issues to fix. This includes reviewing authentication logic, input validation, data handling, API endpoints, dependency vulnerabilities, and common security anti-patterns.\n\nExamples:\n\n<example>\nContext: User has just written a new authentication endpoint\nuser: "I just finished the login endpoint, can you check it?"\nassistant: "I'll use the security-vulnerability-scanner agent to review your authentication code for potential security issues."\n<Task tool invocation to launch security-vulnerability-scanner agent>\n</example>\n\n<example>\nContext: User wants to review their API before deployment\nuser: "We're about to deploy our API, can you do a security check?"\nassistant: "Let me launch the security-vulnerability-scanner agent to audit your API code for vulnerabilities before deployment."\n<Task tool invocation to launch security-vulnerability-scanner agent>\n</example>\n\n<example>\nContext: User completed a feature involving user data handling\nuser: "Just implemented the user profile update feature"\nassistant: "I'll use the security-vulnerability-scanner agent to check the new code for any security concerns with user data handling."\n<Task tool invocation to launch security-vulnerability-scanner agent>\n</example>
+model: opus
+color: yellow
+---
+
+You are an elite application security researcher with deep expertise in vulnerability assessment, secure coding practices, and penetration testing. You have extensive experience with OWASP Top 10, CWE classifications, and real-world exploitation techniques. Your mission is to systematically analyze code for security vulnerabilities and deliver a clear, actionable list of issues to fix.
+
+## Your Approach
+
+1. **Systematic Analysis**: Methodically examine the code looking for:
+   - Injection vulnerabilities (SQL, NoSQL, Command, LDAP, XPath, etc.)
+   - Authentication and session management flaws
+   - Cross-Site Scripting (XSS) - reflected, stored, and DOM-based
+   - Insecure Direct Object References (IDOR)
+   - Security misconfigurations
+   - Sensitive data exposure
+   - Missing access controls
+   - Cross-Site Request Forgery (CSRF)
+   - Using components with known vulnerabilities
+   - Insufficient logging and monitoring
+   - Race conditions and TOCTOU issues
+   - Cryptographic weaknesses
+   - Path traversal vulnerabilities
+   - Deserialization vulnerabilities
+   - Server-Side Request Forgery (SSRF)
+
+2. **Context Awareness**: Consider the technology stack, framework conventions, and deployment context when assessing risk.
+
+3. **Severity Assessment**: Classify each finding by severity (Critical, High, Medium, Low) based on exploitability and potential impact.
+
+## Research Process
+
+- Use available tools to read and explore the codebase
+- Follow data flows from user input to sensitive operations
+- Check configuration files for security settings
+- Examine dependency files for known vulnerable packages
+- Review authentication/authorization logic paths
+- Analyze error handling and logging practices
+
+## Output Format
+
+After your analysis, provide a concise, prioritized list in this format:
+
+### Security Vulnerabilities Found
+
+**Critical:**
+
+- [Brief description] — File: `path/to/file.ext` (line X)
+
+**High:**
+
+- [Brief description] — File: `path/to/file.ext` (line X)
+
+**Medium:**
+
+- [Brief description] — File: `path/to/file.ext` (line X)
+
+**Low:**
+
+- [Brief description] — File: `path/to/file.ext` (line X)
+
+---
+
+**Summary:** X critical, X high, X medium, X low issues found.
+
+## Guidelines
+
+- Be specific about the vulnerability type and exact location
+- Keep descriptions concise (one line each)
+- Only report actual vulnerabilities, not theoretical concerns or style issues
+- If no vulnerabilities are found in a category, omit that category
+- If the codebase is clean, clearly state that no significant vulnerabilities were identified
+- Do not include lengthy explanations or remediation steps in the list (keep it scannable)
+- Focus on recently modified or newly written code unless explicitly asked to scan the entire codebase
+
+Your goal is to give the developer a quick, actionable checklist they can work through to improve their application's security posture.
diff --git a/temp_repo/.claude/commands/deepreview.md b/temp_repo/.claude/commands/deepreview.md
new file mode 100644
index 0000000000000000000000000000000000000000..43fc3d597757291708ec6cef05776fe2588fe9c1
--- /dev/null
+++ b/temp_repo/.claude/commands/deepreview.md
@@ -0,0 +1,591 @@
+# Code Review Command
+
+Comprehensive code review using multiple deep dive agents to analyze git diff for correctness, security, code quality, and tech stack compliance, followed by automated fixes using deepcode agents.
+
+## Usage
+
+This command analyzes all changes in the git diff and verifies:
+
+1. **Invalid code based on tech stack** (HIGHEST PRIORITY)
+2. Security vulnerabilities
+3. Code quality issues (dirty code)
+4. Implementation correctness
+
+Then automatically fixes any issues found.
+
+### Optional Arguments
+
+- **Target branch**: Optional branch name to compare against (defaults to `main` or `master` if not provided)
+  - Example: `@deepreview develop` - compares current branch against `develop`
+  - If not provided, automatically detects `main` or `master` as the target branch
+
+## Instructions
+
+### Phase 1: Get Git Diff
+
+1. **Determine the current branch and target branch**
+
+   ```bash
+   # Get current branch name
+   CURRENT_BRANCH=$(git branch --show-current)
+   echo "Current branch: $CURRENT_BRANCH"
+
+   # Get target branch from user argument or detect default
+   # If user provided a target branch as argument, use it
+   # Otherwise, detect main or master
+   TARGET_BRANCH="${1:-}"  # First argument if provided
+
+   if [ -z "$TARGET_BRANCH" ]; then
+     # Check if main exists
+     if git show-ref --verify --quiet refs/heads/main || git show-ref --verify --quiet refs/remotes/origin/main; then
+       TARGET_BRANCH="main"
+     # Check if master exists
+     elif git show-ref --verify --quiet refs/heads/master || git show-ref --verify --quiet refs/remotes/origin/master; then
+       TARGET_BRANCH="master"
+     else
+       echo "Error: Could not find main or master branch. Please specify target branch."
+       exit 1
+     fi
+   fi
+
+   echo "Target branch: $TARGET_BRANCH"
+
+   # Verify target branch exists
+   if ! git show-ref --verify --quiet refs/heads/$TARGET_BRANCH && ! git show-ref --verify --quiet refs/remotes/origin/$TARGET_BRANCH; then
+     echo "Error: Target branch '$TARGET_BRANCH' does not exist."
+     exit 1
+   fi
+   ```
+
+   **Note:** The target branch can be provided as an optional argument. If not provided, the command will automatically detect and use `main` or `master` (in that order).
+
+2. **Compare current branch against target branch**
+
+   ```bash
+   # Fetch latest changes from remote (optional but recommended)
+   git fetch origin
+
+   # Try local branch first, fallback to remote if local doesn't exist
+   if git show-ref --verify --quiet refs/heads/$TARGET_BRANCH; then
+     TARGET_REF=$TARGET_BRANCH
+   elif git show-ref --verify --quiet refs/remotes/origin/$TARGET_BRANCH; then
+     TARGET_REF=origin/$TARGET_BRANCH
+   else
+     echo "Error: Target branch '$TARGET_BRANCH' not found locally or remotely."
+     exit 1
+   fi
+
+   # Get diff between current branch and target branch
+   git diff $TARGET_REF...HEAD
+   ```
+
+   **Note:** Use `...` (three dots) to show changes between the common ancestor and HEAD, or `..` (two dots) to show changes between the branches directly. The command uses `$TARGET_BRANCH` variable set in step 1.
+
+3. **Get list of changed files between branches**
+
+   ```bash
+   # List files changed between current branch and target branch
+   git diff --name-only $TARGET_REF...HEAD
+
+   # Get detailed file status
+   git diff --name-status $TARGET_REF...HEAD
+
+   # Show file changes with statistics
+   git diff --stat $TARGET_REF...HEAD
+   ```
+
+4. **Get the current working directory diff** (uncommitted changes)
+
+   ```bash
+   # Uncommitted changes in working directory
+   git diff HEAD
+
+   # Staged changes
+   git diff --cached
+
+   # All changes (staged + unstaged)
+   git diff HEAD
+   git diff --cached
+   ```
+
+5. **Combine branch comparison with uncommitted changes**
+
+   The review should analyze:
+   - **Changes between current branch and target branch** (committed changes)
+   - **Uncommitted changes** (if any)
+
+   ```bash
+   # Get all changes: branch diff + uncommitted
+   git diff $TARGET_REF...HEAD > branch-changes.diff
+   git diff HEAD >> branch-changes.diff
+   git diff --cached >> branch-changes.diff
+
+   # Or get combined diff (recommended approach)
+   git diff $TARGET_REF...HEAD
+   git diff HEAD
+   git diff --cached
+   ```
+
+6. **Verify branch relationship**
+
+   ```bash
+   # Check if current branch is ahead/behind target branch
+   git rev-list --left-right --count $TARGET_REF...HEAD
+
+   # Show commit log differences
+   git log $TARGET_REF..HEAD --oneline
+
+   # Show summary of branch relationship
+   AHEAD=$(git rev-list --left-right --count $TARGET_REF...HEAD | cut -f1)
+   BEHIND=$(git rev-list --left-right --count $TARGET_REF...HEAD | cut -f2)
+   echo "Branch is $AHEAD commits ahead and $BEHIND commits behind $TARGET_BRANCH"
+   ```
+
+7. **Understand the tech stack** (for validation):
+   - **Node.js**: >=22.0.0 <23.0.0
+   - **TypeScript**: 5.9.3
+   - **React**: 19.2.3
+   - **Express**: 5.2.1
+   - **Electron**: 39.2.7
+   - **Vite**: 7.3.0
+   - **Vitest**: 4.0.16
+   - Check `package.json` files for exact versions
+
+### Phase 2: Deep Dive Analysis (5 Agents)
+
+Launch 5 separate deep dive agents, each with a specific focus area. Each agent should be invoked with the `@deepdive` agent and given the git diff (comparing current branch against target branch) along with their specific instructions.
+
+**Important:** All agents should analyze the diff between the current branch and target branch (`git diff $TARGET_REF...HEAD`), plus any uncommitted changes. This ensures the review covers all changes that will be merged. The target branch is determined from the optional argument or defaults to main/master.
+
+#### Agent 1: Tech Stack Validation (HIGHEST PRIORITY)
+
+**Focus:** Verify code is valid for the tech stack
+
+**Instructions for Agent 1:**
+
+```
+Analyze the git diff for invalid code based on the tech stack:
+
+1. **TypeScript/JavaScript Syntax**
+   - Check for valid TypeScript syntax (no invalid type annotations, correct import/export syntax)
+   - Verify Node.js API usage is compatible with Node.js >=22.0.0 <23.0.0
+   - Check for deprecated APIs or features not available in the Node.js version
+   - Verify ES module syntax (type: "module" in package.json)
+
+2. **React 19.2.3 Compatibility**
+   - Check for deprecated React APIs or patterns
+   - Verify hooks usage is correct for React 19
+   - Check for invalid JSX syntax
+   - Verify component patterns match React 19 conventions
+
+3. **Express 5.2.1 Compatibility**
+   - Check for deprecated Express APIs
+   - Verify middleware usage is correct for Express 5
+   - Check request/response handling patterns
+
+4. **Type Safety**
+   - Verify TypeScript types are correctly used
+   - Check for `any` types that should be properly typed
+   - Verify type imports/exports are correct
+   - Check for missing type definitions
+
+5. **Build System Compatibility**
+   - Verify Vite-specific code (imports, config) is valid
+   - Check Electron-specific APIs are used correctly
+   - Verify module resolution paths are correct
+
+6. **Package Dependencies**
+   - Check for imports from packages not in package.json
+   - Verify version compatibility between dependencies
+   - Check for circular dependencies
+
+Provide a detailed report with:
+- File paths and line numbers of invalid code
+- Specific error description (what's wrong and why)
+- Expected vs actual behavior
+- Priority level (CRITICAL for build-breaking issues)
+```
+
+#### Agent 2: Security Vulnerability Scanner
+
+**Focus:** Security issues and vulnerabilities
+
+**Instructions for Agent 2:**
+
+```
+Analyze the git diff for security vulnerabilities:
+
+1. **Injection Vulnerabilities**
+   - SQL injection (if applicable)
+   - Command injection (exec, spawn, etc.)
+   - Path traversal vulnerabilities
+   - XSS vulnerabilities in React components
+
+2. **Authentication & Authorization**
+   - Missing authentication checks
+   - Insecure token handling
+   - Authorization bypasses
+   - Session management issues
+
+3. **Data Handling**
+   - Unsafe deserialization
+   - Insecure file operations
+   - Missing input validation
+   - Sensitive data exposure (secrets, tokens, passwords)
+
+4. **Dependencies**
+   - Known vulnerable packages
+   - Insecure dependency versions
+   - Missing security patches
+
+5. **API Security**
+   - Missing CORS configuration
+   - Insecure API endpoints
+   - Missing rate limiting
+   - Insecure WebSocket connections
+
+6. **Electron-Specific**
+   - Insecure IPC communication
+   - Missing context isolation checks
+   - Insecure preload scripts
+   - Missing CSP headers
+
+Provide a detailed report with:
+- Vulnerability type and severity (CRITICAL, HIGH, MEDIUM, LOW)
+- File paths and line numbers
+- Attack vector description
+- Recommended fix approach
+```
+
+#### Agent 3: Code Quality & Clean Code
+
+**Focus:** Dirty code, code smells, and quality issues
+
+**Instructions for Agent 3:**
+
+```
+Analyze the git diff for code quality issues:
+
+1. **Code Smells**
+   - Long functions/methods (>50 lines)
+   - High cyclomatic complexity
+   - Duplicate code
+   - Dead code
+   - Magic numbers/strings
+
+2. **Best Practices**
+   - Missing error handling
+   - Inconsistent naming conventions
+   - Poor separation of concerns
+   - Tight coupling
+   - Missing comments for complex logic
+
+3. **Performance Issues**
+   - Inefficient algorithms
+   - Memory leaks (event listeners, subscriptions)
+   - Unnecessary re-renders in React
+   - Missing memoization where needed
+   - Inefficient database queries (if applicable)
+
+4. **Maintainability**
+   - Hard-coded values
+   - Missing type definitions
+   - Inconsistent code style
+   - Poor file organization
+   - Missing tests for new code
+
+5. **React-Specific**
+   - Missing key props in lists
+   - Direct state mutations
+   - Missing cleanup in useEffect
+   - Unnecessary useState/useEffect
+   - Prop drilling issues
+
+Provide a detailed report with:
+- Issue type and severity
+- File paths and line numbers
+- Description of the problem
+- Impact on maintainability/performance
+- Recommended refactoring approach
+```
+
+#### Agent 4: Implementation Correctness
+
+**Focus:** Verify code implements requirements correctly
+
+**Instructions for Agent 4:**
+
+```
+Analyze the git diff for implementation correctness:
+
+1. **Logic Errors**
+   - Incorrect conditional logic
+   - Wrong variable usage
+   - Off-by-one errors
+   - Race conditions
+   - Missing null/undefined checks
+
+2. **Functional Requirements**
+   - Missing features from requirements
+   - Incorrect feature implementation
+   - Edge cases not handled
+   - Missing validation
+
+3. **Integration Issues**
+   - Incorrect API usage
+   - Wrong data format handling
+   - Missing error handling for external calls
+   - Incorrect state management
+
+4. **Type Errors**
+   - Type mismatches
+   - Missing type guards
+   - Incorrect type assertions
+   - Unsafe type operations
+
+5. **Testing Gaps**
+   - Missing unit tests
+   - Missing integration tests
+   - Tests don't cover edge cases
+   - Tests are incorrect
+
+Provide a detailed report with:
+- Issue description
+- File paths and line numbers
+- Expected vs actual behavior
+- Steps to reproduce (if applicable)
+- Recommended fix
+```
+
+#### Agent 5: Architecture & Design Patterns
+
+**Focus:** Architectural issues and design pattern violations
+
+**Instructions for Agent 5:**
+
+```
+Analyze the git diff for architectural and design issues:
+
+1. **Architecture Violations**
+   - Violation of project structure patterns
+   - Incorrect layer separation
+   - Missing abstractions
+   - Tight coupling between modules
+
+2. **Design Patterns**
+   - Incorrect pattern usage
+   - Missing patterns where needed
+   - Anti-patterns
+
+3. **Project-Specific Patterns**
+   - Check against project documentation (docs/ folder)
+   - Verify route organization (server routes)
+   - Check provider patterns (server providers)
+   - Verify component organization (UI components)
+
+4. **API Design**
+   - RESTful API violations
+   - Inconsistent response formats
+   - Missing error handling
+   - Incorrect status codes
+
+5. **State Management**
+   - Incorrect state management patterns
+   - Missing state normalization
+   - Inefficient state updates
+
+Provide a detailed report with:
+- Architectural issue description
+- File paths and affected areas
+- Impact on system design
+- Recommended architectural changes
+```
+
+### Phase 3: Consolidate Findings
+
+After all 5 deep dive agents complete their analysis:
+
+1. **Collect all findings** from each agent
+2. **Prioritize issues**:
+   - CRITICAL: Tech stack invalid code (build-breaking)
+   - HIGH: Security vulnerabilities, critical logic errors
+   - MEDIUM: Code quality issues, architectural problems
+   - LOW: Minor code smells, style issues
+
+3. **Group by file** to understand impact per file
+4. **Create a master report** summarizing all findings
+
+### Phase 4: Deepcode Fixes (5 Agents)
+
+Launch 5 deepcode agents to fix the issues found. Each agent should be invoked with the `@deepcode` agent.
+
+#### Deepcode Agent 1: Fix Tech Stack Invalid Code
+
+**Priority:** CRITICAL - Fix first
+
+**Instructions:**
+
+```
+Fix all invalid code based on tech stack issues identified by Agent 1.
+
+Focus on:
+1. Fixing TypeScript syntax errors
+2. Updating deprecated Node.js APIs
+3. Fixing React 19 compatibility issues
+4. Correcting Express 5 API usage
+5. Fixing type errors
+6. Resolving build-breaking issues
+
+After fixes, verify:
+- Code compiles without errors
+- TypeScript types are correct
+- No deprecated API usage
+```
+
+#### Deepcode Agent 2: Fix Security Vulnerabilities
+
+**Priority:** HIGH
+
+**Instructions:**
+
+```
+Fix all security vulnerabilities identified by Agent 2.
+
+Focus on:
+1. Adding input validation
+2. Fixing injection vulnerabilities
+3. Securing authentication/authorization
+4. Fixing insecure data handling
+5. Updating vulnerable dependencies
+6. Securing Electron IPC
+
+After fixes, verify:
+- Security vulnerabilities are addressed
+- No sensitive data exposure
+- Proper authentication/authorization
+```
+
+#### Deepcode Agent 3: Refactor Dirty Code
+
+**Priority:** MEDIUM
+
+**Instructions:**
+
+```
+Refactor code quality issues identified by Agent 3.
+
+Focus on:
+1. Extracting long functions
+2. Reducing complexity
+3. Removing duplicate code
+4. Adding error handling
+5. Improving React component structure
+6. Adding missing comments
+
+After fixes, verify:
+- Code follows best practices
+- No code smells remain
+- Performance optimizations applied
+```
+
+#### Deepcode Agent 4: Fix Implementation Errors
+
+**Priority:** HIGH
+
+**Instructions:**
+
+```
+Fix implementation correctness issues identified by Agent 4.
+
+Focus on:
+1. Fixing logic errors
+2. Adding missing features
+3. Handling edge cases
+4. Fixing type errors
+5. Adding missing tests
+
+After fixes, verify:
+- Logic is correct
+- Edge cases handled
+- Tests pass
+```
+
+#### Deepcode Agent 5: Fix Architectural Issues
+
+**Priority:** MEDIUM
+
+**Instructions:**
+
+```
+Fix architectural issues identified by Agent 5.
+
+Focus on:
+1. Correcting architecture violations
+2. Applying proper design patterns
+3. Fixing API design issues
+4. Improving state management
+5. Following project patterns
+
+After fixes, verify:
+- Architecture is sound
+- Patterns are correctly applied
+- Code follows project structure
+```
+
+### Phase 5: Verification
+
+After all fixes are complete:
+
+1. **Run TypeScript compilation check**
+
+   ```bash
+   npm run build:packages
+   ```
+
+2. **Run linting**
+
+   ```bash
+   npm run lint
+   ```
+
+3. **Run tests** (if applicable)
+
+   ```bash
+   npm run test:server
+   npm run test
+   ```
+
+4. **Verify git diff** shows only intended changes
+
+   ```bash
+   git diff HEAD
+   ```
+
+5. **Create summary report**:
+   - Issues found by each agent
+   - Issues fixed by each agent
+   - Remaining issues (if any)
+   - Verification results
+
+## Workflow Summary
+
+1. ✅ Accept optional target branch argument (defaults to main/master if not provided)
+2. ✅ Determine current branch and target branch (from argument or auto-detect main/master)
+3. ✅ Get git diff comparing current branch against target branch (`git diff $TARGET_REF...HEAD`)
+4. ✅ Include uncommitted changes in analysis (`git diff HEAD`, `git diff --cached`)
+5. ✅ Launch 5 deep dive agents (parallel analysis) with branch diff
+6. ✅ Consolidate findings and prioritize
+7. ✅ Launch 5 deepcode agents (sequential fixes, priority order)
+8. ✅ Verify fixes with build/lint/test
+9. ✅ Report summary
+
+## Notes
+
+- **Tech stack validation is HIGHEST PRIORITY** - invalid code must be fixed first
+- **Target branch argument**: The command accepts an optional target branch name as the first argument. If not provided, it automatically detects and uses `main` or `master` (in that order)
+- Each deep dive agent should work independently and provide comprehensive analysis
+- Deepcode agents should fix issues in priority order
+- All fixes should maintain existing functionality
+- If an agent finds no issues in their domain, they should report "No issues found"
+- If fixes introduce new issues, they should be caught in verification phase
+- The target branch is validated to ensure it exists (locally or remotely) before proceeding with the review
diff --git a/temp_repo/.claude/commands/gh-issue.md b/temp_repo/.claude/commands/gh-issue.md
new file mode 100644
index 0000000000000000000000000000000000000000..22c4925b8072310cc2544440e2e4b55a50a83871
--- /dev/null
+++ b/temp_repo/.claude/commands/gh-issue.md
@@ -0,0 +1,74 @@
+# GitHub Issue Fix Command
+
+Fetch a GitHub issue by number, verify it's a real issue, and fix it if valid.
+
+## Usage
+
+This command accepts a GitHub issue number as input (e.g., `123`).
+
+## Instructions
+
+1. **Get the issue number from the user**
+   - The issue number should be provided as an argument to this command
+   - If no number is provided, ask the user for it
+
+2. **Fetch the GitHub issue**
+   - Determine the current project path (check if there's a current project context)
+   - Verify the project has a GitHub remote:
+     ```bash
+     git remote get-url origin
+     ```
+   - Fetch the issue details using GitHub CLI:
+     ```bash
+     gh issue view <ISSUE_NUMBER> --json number,title,state,author,createdAt,labels,url,body,assignees
+     ```
+   - If the command fails, report the error and stop
+
+3. **Verify the issue is real and valid**
+   - Check that the issue exists (not 404)
+   - Check the issue state:
+     - If **closed**: Inform the user and ask if they still want to proceed
+     - If **open**: Proceed with validation
+   - Review the issue content:
+     - Read the title and body to understand what needs to be fixed
+     - Check labels for context (bug, enhancement, etc.)
+     - Note any assignees or linked PRs
+
+4. **Validate the issue**
+   - Determine if this is a legitimate issue that needs fixing:
+     - Is the description clear and actionable?
+     - Does it describe a real problem or feature request?
+     - Are there any obvious signs it's spam or invalid?
+   - If the issue seems invalid or unclear:
+     - Report findings to the user
+     - Ask if they want to proceed anyway
+     - Stop if user confirms it's not valid
+
+5. **If the issue is valid, proceed to fix it**
+   - Analyze what needs to be done based on the issue description
+   - Check the current codebase state:
+     - Run relevant tests to see current behavior
+     - Check if the issue is already fixed
+     - Look for related code that might need changes
+   - Implement the fix:
+     - Make necessary code changes
+     - Update or add tests as needed
+     - Ensure the fix addresses the issue description
+   - Verify the fix:
+     - Run tests to ensure nothing broke
+     - If possible, manually verify the fix addresses the issue
+
+6. **Report summary**
+   - Issue number and title
+   - Issue state (open/closed)
+   - Whether the issue was validated as real
+   - What was fixed (if anything)
+   - Any tests that were updated or added
+   - Next steps (if any)
+
+## Error Handling
+
+- If GitHub CLI (`gh`) is not installed or authenticated, report error and stop
+- If the project doesn't have a GitHub remote, report error and stop
+- If the issue number doesn't exist, report error and stop
+- If the issue is unclear or invalid, report findings and ask user before proceeding
diff --git a/temp_repo/.claude/commands/release.md b/temp_repo/.claude/commands/release.md
new file mode 100644
index 0000000000000000000000000000000000000000..f768ab532b59d014c09965d1f2526e4894cc3b6b
--- /dev/null
+++ b/temp_repo/.claude/commands/release.md
@@ -0,0 +1,77 @@
+# Release Command
+
+Bump the package.json version (major, minor, or patch) and build the Electron app with the new version.
+
+## Usage
+
+This command accepts a version bump type as input:
+
+- `patch` - Bump patch version (0.1.0 -> 0.1.1)
+- `minor` - Bump minor version (0.1.0 -> 0.2.0)
+- `major` - Bump major version (0.1.0 -> 1.0.0)
+
+## Instructions
+
+1. **Get the bump type from the user**
+   - The bump type should be provided as an argument (patch, minor, or major)
+   - If no type is provided, ask the user which type they want
+
+2. **Bump the version**
+   - Run the version bump script:
+     ```bash
+     node apps/ui/scripts/bump-version.mjs <type>
+     ```
+   - This updates both `apps/ui/package.json` and `apps/server/package.json` with the new version (keeps them in sync)
+   - Verify the version was updated correctly by checking the output
+
+3. **Build the Electron app**
+   - Run the electron build:
+     ```bash
+     npm run build:electron --workspace=apps/ui
+     ```
+   - The build process automatically:
+     - Uses the version from `package.json` for artifact names (e.g., `Automaker-1.2.3-x64.zip`)
+     - Injects the version into the app via Vite's `__APP_VERSION__` constant
+     - Displays the version below the logo in the sidebar
+
+4. **Commit the version bump**
+   - Stage the updated package.json files:
+     ```bash
+     git add apps/ui/package.json apps/server/package.json
+     ```
+   - Commit with a release message:
+     ```bash
+     git commit -m "chore: release v<version>"
+     ```
+
+5. **Create and push the git tag**
+   - Create an annotated tag for the release:
+     ```bash
+     git tag -a v<version> -m "Release v<version>"
+     ```
+   - Push the commit and tag to remote:
+     ```bash
+     git push && git push --tags
+     ```
+
+6. **Verify the release**
+   - Check that the build completed successfully
+   - Confirm the version appears correctly in the built artifacts
+   - The version will be displayed in the app UI below the logo
+   - Verify the tag is visible on the remote repository
+
+## Version Centralization
+
+The version is centralized and synchronized in both `apps/ui/package.json` and `apps/server/package.json`:
+
+- **Electron builds**: Automatically read from `apps/ui/package.json` via electron-builder's `${version}` variable in `artifactName`
+- **App display**: Injected at build time via Vite's `define` config as `__APP_VERSION__` constant (defined in `apps/ui/vite.config.mts`)
+- **Server API**: Read from `apps/server/package.json` via `apps/server/src/lib/version.ts` utility (used in health check endpoints)
+- **Type safety**: Defined in `apps/ui/src/vite-env.d.ts` as `declare const __APP_VERSION__: string`
+
+This ensures consistency across:
+
+- Build artifact names (e.g., `Automaker-1.2.3-x64.zip`)
+- App UI display (shown as `v1.2.3` below the logo in `apps/ui/src/components/layout/sidebar/components/automaker-logo.tsx`)
+- Server health endpoints (`/` and `/detailed`)
+- Package metadata (both UI and server packages stay in sync)
diff --git a/temp_repo/.claude/commands/review.md b/temp_repo/.claude/commands/review.md
new file mode 100644
index 0000000000000000000000000000000000000000..87a589f50c3876437db2c7368efe47ff55a03446
--- /dev/null
+++ b/temp_repo/.claude/commands/review.md
@@ -0,0 +1,484 @@
+# Code Review Command
+
+Comprehensive code review using multiple deep dive agents to analyze git diff for correctness, security, code quality, and tech stack compliance, followed by automated fixes using deepcode agents.
+
+## Usage
+
+This command analyzes all changes in the git diff and verifies:
+
+1. **Invalid code based on tech stack** (HIGHEST PRIORITY)
+2. Security vulnerabilities
+3. Code quality issues (dirty code)
+4. Implementation correctness
+
+Then automatically fixes any issues found.
+
+## Instructions
+
+### Phase 1: Get Git Diff
+
+1. **Get the current git diff**
+
+   ```bash
+   git diff HEAD
+   ```
+
+   If you need staged changes instead:
+
+   ```bash
+   git diff --cached
+   ```
+
+   Or for a specific commit range:
+
+   ```bash
+   git diff <base-branch>
+   ```
+
+2. **Get list of changed files**
+
+   ```bash
+   git diff --name-only HEAD
+   ```
+
+3. **Understand the tech stack** (for validation):
+   - **Node.js**: >=22.0.0 <23.0.0
+   - **TypeScript**: 5.9.3
+   - **React**: 19.2.3
+   - **Express**: 5.2.1
+   - **Electron**: 39.2.7
+   - **Vite**: 7.3.0
+   - **Vitest**: 4.0.16
+   - Check `package.json` files for exact versions
+
+### Phase 2: Deep Dive Analysis (5 Agents)
+
+Launch 5 separate deep dive agents, each with a specific focus area. Each agent should be invoked with the `@deepdive` agent and given the git diff along with their specific instructions.
+
+#### Agent 1: Tech Stack Validation (HIGHEST PRIORITY)
+
+**Focus:** Verify code is valid for the tech stack
+
+**Instructions for Agent 1:**
+
+```
+Analyze the git diff for invalid code based on the tech stack:
+
+1. **TypeScript/JavaScript Syntax**
+   - Check for valid TypeScript syntax (no invalid type annotations, correct import/export syntax)
+   - Verify Node.js API usage is compatible with Node.js >=22.0.0 <23.0.0
+   - Check for deprecated APIs or features not available in the Node.js version
+   - Verify ES module syntax (type: "module" in package.json)
+
+2. **React 19.2.3 Compatibility**
+   - Check for deprecated React APIs or patterns
+   - Verify hooks usage is correct for React 19
+   - Check for invalid JSX syntax
+   - Verify component patterns match React 19 conventions
+
+3. **Express 5.2.1 Compatibility**
+   - Check for deprecated Express APIs
+   - Verify middleware usage is correct for Express 5
+   - Check request/response handling patterns
+
+4. **Type Safety**
+   - Verify TypeScript types are correctly used
+   - Check for `any` types that should be properly typed
+   - Verify type imports/exports are correct
+   - Check for missing type definitions
+
+5. **Build System Compatibility**
+   - Verify Vite-specific code (imports, config) is valid
+   - Check Electron-specific APIs are used correctly
+   - Verify module resolution paths are correct
+
+6. **Package Dependencies**
+   - Check for imports from packages not in package.json
+   - Verify version compatibility between dependencies
+   - Check for circular dependencies
+
+Provide a detailed report with:
+- File paths and line numbers of invalid code
+- Specific error description (what's wrong and why)
+- Expected vs actual behavior
+- Priority level (CRITICAL for build-breaking issues)
+```
+
+#### Agent 2: Security Vulnerability Scanner
+
+**Focus:** Security issues and vulnerabilities
+
+**Instructions for Agent 2:**
+
+```
+Analyze the git diff for security vulnerabilities:
+
+1. **Injection Vulnerabilities**
+   - SQL injection (if applicable)
+   - Command injection (exec, spawn, etc.)
+   - Path traversal vulnerabilities
+   - XSS vulnerabilities in React components
+
+2. **Authentication & Authorization**
+   - Missing authentication checks
+   - Insecure token handling
+   - Authorization bypasses
+   - Session management issues
+
+3. **Data Handling**
+   - Unsafe deserialization
+   - Insecure file operations
+   - Missing input validation
+   - Sensitive data exposure (secrets, tokens, passwords)
+
+4. **Dependencies**
+   - Known vulnerable packages
+   - Insecure dependency versions
+   - Missing security patches
+
+5. **API Security**
+   - Missing CORS configuration
+   - Insecure API endpoints
+   - Missing rate limiting
+   - Insecure WebSocket connections
+
+6. **Electron-Specific**
+   - Insecure IPC communication
+   - Missing context isolation checks
+   - Insecure preload scripts
+   - Missing CSP headers
+
+Provide a detailed report with:
+- Vulnerability type and severity (CRITICAL, HIGH, MEDIUM, LOW)
+- File paths and line numbers
+- Attack vector description
+- Recommended fix approach
+```
+
+#### Agent 3: Code Quality & Clean Code
+
+**Focus:** Dirty code, code smells, and quality issues
+
+**Instructions for Agent 3:**
+
+```
+Analyze the git diff for code quality issues:
+
+1. **Code Smells**
+   - Long functions/methods (>50 lines)
+   - High cyclomatic complexity
+   - Duplicate code
+   - Dead code
+   - Magic numbers/strings
+
+2. **Best Practices**
+   - Missing error handling
+   - Inconsistent naming conventions
+   - Poor separation of concerns
+   - Tight coupling
+   - Missing comments for complex logic
+
+3. **Performance Issues**
+   - Inefficient algorithms
+   - Memory leaks (event listeners, subscriptions)
+   - Unnecessary re-renders in React
+   - Missing memoization where needed
+   - Inefficient database queries (if applicable)
+
+4. **Maintainability**
+   - Hard-coded values
+   - Missing type definitions
+   - Inconsistent code style
+   - Poor file organization
+   - Missing tests for new code
+
+5. **React-Specific**
+   - Missing key props in lists
+   - Direct state mutations
+   - Missing cleanup in useEffect
+   - Unnecessary useState/useEffect
+   - Prop drilling issues
+
+Provide a detailed report with:
+- Issue type and severity
+- File paths and line numbers
+- Description of the problem
+- Impact on maintainability/performance
+- Recommended refactoring approach
+```
+
+#### Agent 4: Implementation Correctness
+
+**Focus:** Verify code implements requirements correctly
+
+**Instructions for Agent 4:**
+
+```
+Analyze the git diff for implementation correctness:
+
+1. **Logic Errors**
+   - Incorrect conditional logic
+   - Wrong variable usage
+   - Off-by-one errors
+   - Race conditions
+   - Missing null/undefined checks
+
+2. **Functional Requirements**
+   - Missing features from requirements
+   - Incorrect feature implementation
+   - Edge cases not handled
+   - Missing validation
+
+3. **Integration Issues**
+   - Incorrect API usage
+   - Wrong data format handling
+   - Missing error handling for external calls
+   - Incorrect state management
+
+4. **Type Errors**
+   - Type mismatches
+   - Missing type guards
+   - Incorrect type assertions
+   - Unsafe type operations
+
+5. **Testing Gaps**
+   - Missing unit tests
+   - Missing integration tests
+   - Tests don't cover edge cases
+   - Tests are incorrect
+
+Provide a detailed report with:
+- Issue description
+- File paths and line numbers
+- Expected vs actual behavior
+- Steps to reproduce (if applicable)
+- Recommended fix
+```
+
+#### Agent 5: Architecture & Design Patterns
+
+**Focus:** Architectural issues and design pattern violations
+
+**Instructions for Agent 5:**
+
+```
+Analyze the git diff for architectural and design issues:
+
+1. **Architecture Violations**
+   - Violation of project structure patterns
+   - Incorrect layer separation
+   - Missing abstractions
+   - Tight coupling between modules
+
+2. **Design Patterns**
+   - Incorrect pattern usage
+   - Missing patterns where needed
+   - Anti-patterns
+
+3. **Project-Specific Patterns**
+   - Check against project documentation (docs/ folder)
+   - Verify route organization (server routes)
+   - Check provider patterns (server providers)
+   - Verify component organization (UI components)
+
+4. **API Design**
+   - RESTful API violations
+   - Inconsistent response formats
+   - Missing error handling
+   - Incorrect status codes
+
+5. **State Management**
+   - Incorrect state management patterns
+   - Missing state normalization
+   - Inefficient state updates
+
+Provide a detailed report with:
+- Architectural issue description
+- File paths and affected areas
+- Impact on system design
+- Recommended architectural changes
+```
+
+### Phase 3: Consolidate Findings
+
+After all 5 deep dive agents complete their analysis:
+
+1. **Collect all findings** from each agent
+2. **Prioritize issues**:
+   - CRITICAL: Tech stack invalid code (build-breaking)
+   - HIGH: Security vulnerabilities, critical logic errors
+   - MEDIUM: Code quality issues, architectural problems
+   - LOW: Minor code smells, style issues
+
+3. **Group by file** to understand impact per file
+4. **Create a master report** summarizing all findings
+
+### Phase 4: Deepcode Fixes (5 Agents)
+
+Launch 5 deepcode agents to fix the issues found. Each agent should be invoked with the `@deepcode` agent.
+
+#### Deepcode Agent 1: Fix Tech Stack Invalid Code
+
+**Priority:** CRITICAL - Fix first
+
+**Instructions:**
+
+```
+Fix all invalid code based on tech stack issues identified by Agent 1.
+
+Focus on:
+1. Fixing TypeScript syntax errors
+2. Updating deprecated Node.js APIs
+3. Fixing React 19 compatibility issues
+4. Correcting Express 5 API usage
+5. Fixing type errors
+6. Resolving build-breaking issues
+
+After fixes, verify:
+- Code compiles without errors
+- TypeScript types are correct
+- No deprecated API usage
+```
+
+#### Deepcode Agent 2: Fix Security Vulnerabilities
+
+**Priority:** HIGH
+
+**Instructions:**
+
+```
+Fix all security vulnerabilities identified by Agent 2.
+
+Focus on:
+1. Adding input validation
+2. Fixing injection vulnerabilities
+3. Securing authentication/authorization
+4. Fixing insecure data handling
+5. Updating vulnerable dependencies
+6. Securing Electron IPC
+
+After fixes, verify:
+- Security vulnerabilities are addressed
+- No sensitive data exposure
+- Proper authentication/authorization
+```
+
+#### Deepcode Agent 3: Refactor Dirty Code
+
+**Priority:** MEDIUM
+
+**Instructions:**
+
+```
+Refactor code quality issues identified by Agent 3.
+
+Focus on:
+1. Extracting long functions
+2. Reducing complexity
+3. Removing duplicate code
+4. Adding error handling
+5. Improving React component structure
+6. Adding missing comments
+
+After fixes, verify:
+- Code follows best practices
+- No code smells remain
+- Performance optimizations applied
+```
+
+#### Deepcode Agent 4: Fix Implementation Errors
+
+**Priority:** HIGH
+
+**Instructions:**
+
+```
+Fix implementation correctness issues identified by Agent 4.
+
+Focus on:
+1. Fixing logic errors
+2. Adding missing features
+3. Handling edge cases
+4. Fixing type errors
+5. Adding missing tests
+
+After fixes, verify:
+- Logic is correct
+- Edge cases handled
+- Tests pass
+```
+
+#### Deepcode Agent 5: Fix Architectural Issues
+
+**Priority:** MEDIUM
+
+**Instructions:**
+
+```
+Fix architectural issues identified by Agent 5.
+
+Focus on:
+1. Correcting architecture violations
+2. Applying proper design patterns
+3. Fixing API design issues
+4. Improving state management
+5. Following project patterns
+
+After fixes, verify:
+- Architecture is sound
+- Patterns are correctly applied
+- Code follows project structure
+```
+
+### Phase 5: Verification
+
+After all fixes are complete:
+
+1. **Run TypeScript compilation check**
+
+   ```bash
+   npm run build:packages
+   ```
+
+2. **Run linting**
+
+   ```bash
+   npm run lint
+   ```
+
+3. **Run tests** (if applicable)
+
+   ```bash
+   npm run test:server
+   npm run test
+   ```
+
+4. **Verify git diff** shows only intended changes
+
+   ```bash
+   git diff HEAD
+   ```
+
+5. **Create summary report**:
+   - Issues found by each agent
+   - Issues fixed by each agent
+   - Remaining issues (if any)
+   - Verification results
+
+## Workflow Summary
+
+1. ✅ Get git diff
+2. ✅ Launch 5 deep dive agents (parallel analysis)
+3. ✅ Consolidate findings and prioritize
+4. ✅ Launch 5 deepcode agents (sequential fixes, priority order)
+5. ✅ Verify fixes with build/lint/test
+6. ✅ Report summary
+
+## Notes
+
+- **Tech stack validation is HIGHEST PRIORITY** - invalid code must be fixed first
+- Each deep dive agent should work independently and provide comprehensive analysis
+- Deepcode agents should fix issues in priority order
+- All fixes should maintain existing functionality
+- If an agent finds no issues in their domain, they should report "No issues found"
+- If fixes introduce new issues, they should be caught in verification phase
diff --git a/temp_repo/.claude/commands/thorough.md b/temp_repo/.claude/commands/thorough.md
new file mode 100644
index 0000000000000000000000000000000000000000..c69ada0f4ee1f78620a8d80bd9b57136993d81b3
--- /dev/null
+++ b/temp_repo/.claude/commands/thorough.md
@@ -0,0 +1,45 @@
+When you think you are done, you are NOT done.
+
+You must run a mandatory 3-pass verification before concluding:
+
+## Pass 1: Correctness & Functionality
+
+- [ ] Verify logic matches requirements and specifications
+- [ ] Check type safety (TypeScript types are correct and complete)
+- [ ] Ensure imports are correct and follow project conventions
+- [ ] Verify all functions/classes work as intended
+- [ ] Check that return values and side effects are correct
+- [ ] Run relevant tests if they exist, or verify testability
+- [ ] Confirm integration with existing code works properly
+
+## Pass 2: Edge Cases & Safety
+
+- [ ] Handle null/undefined inputs gracefully
+- [ ] Validate all user inputs and external data
+- [ ] Check error handling (try/catch, error boundaries, etc.)
+- [ ] Verify security considerations (no sensitive data exposure, proper auth checks)
+- [ ] Test boundary conditions (empty arrays, zero values, max lengths, etc.)
+- [ ] Ensure resource cleanup (file handles, connections, timers)
+- [ ] Check for potential race conditions or async issues
+- [ ] Verify file path security (no directory traversal vulnerabilities)
+
+## Pass 3: Maintainability & Code Quality
+
+- [ ] Code follows project style guide and conventions
+- [ ] Functions/classes are single-purpose and well-named
+- [ ] Remove dead code, unused imports, and console.logs
+- [ ] Extract magic numbers/strings into named constants
+- [ ] Check for code duplication (DRY principle)
+- [ ] Verify appropriate abstraction levels (not over/under-engineered)
+- [ ] Add necessary comments for complex logic
+- [ ] Ensure consistent error messages and logging
+- [ ] Check that code is readable and self-documenting
+- [ ] Verify proper separation of concerns
+
+**For each pass, explicitly report:**
+
+- What you checked
+- Any issues found and how they were fixed
+- Any remaining concerns or trade-offs
+
+Only after completing all three passes with explicit findings may you conclude the work is done.
diff --git a/temp_repo/.claude/commands/validate-build.md b/temp_repo/.claude/commands/validate-build.md
new file mode 100644
index 0000000000000000000000000000000000000000..790992b158ed5e35e7bb2ac1716009e3b3ea9680
--- /dev/null
+++ b/temp_repo/.claude/commands/validate-build.md
@@ -0,0 +1,49 @@
+# Project Build and Fix Command
+
+Run all builds and intelligently fix any failures based on what changed.
+
+## Instructions
+
+1. **Run the build**
+
+   ```bash
+   npm run build
+   ```
+
+   This builds all packages and the UI application.
+
+2. **If the build succeeds**, report success and stop.
+
+3. **If the build fails**, analyze the failures:
+   - Note which build step failed and the error messages
+   - Check for TypeScript compilation errors, missing dependencies, or configuration issues
+   - Run `git diff main` to see what code has changed
+
+4. **Determine the nature of the failure**:
+   - **If the failure is due to intentional changes** (new features, refactoring, dependency updates):
+     - Fix any TypeScript type errors introduced by the changes
+     - Update build configuration if needed (e.g., tsconfig.json, vite.config.mts)
+     - Ensure all new dependencies are properly installed
+     - Fix import paths or module resolution issues
+
+   - **If the failure appears to be a regression** (broken imports, missing files, configuration errors):
+     - Fix the source code to restore the build
+     - Check for accidentally deleted files or broken references
+     - Verify build configuration files are correct
+
+5. **Common build issues to check**:
+   - **TypeScript errors**: Fix type mismatches, missing types, or incorrect imports
+   - **Missing dependencies**: Run `npm install` if packages are missing
+   - **Import/export errors**: Fix incorrect import paths or missing exports
+   - **Build configuration**: Check tsconfig.json, vite.config.mts, or other build configs
+   - **Package build order**: Ensure `build:packages` completes before building apps
+
+6. **How to decide if it's intentional vs regression**:
+   - Look at the git diff and commit messages
+   - If the change was deliberate and introduced new code that needs fixing → fix the new code
+   - If the change broke existing functionality that should still build → fix the regression
+   - When in doubt, ask the user
+
+7. **After making fixes**, re-run the build to verify everything compiles successfully.
+
+8. **Report summary** of what was fixed (TypeScript errors, configuration issues, missing dependencies, etc.).
diff --git a/temp_repo/.claude/commands/validate-tests.md b/temp_repo/.claude/commands/validate-tests.md
new file mode 100644
index 0000000000000000000000000000000000000000..3a19b5d1a507e5999effcb29c75e4ae283663031
--- /dev/null
+++ b/temp_repo/.claude/commands/validate-tests.md
@@ -0,0 +1,36 @@
+# Project Test and Fix Command
+
+Run all tests and intelligently fix any failures based on what changed.
+
+## Instructions
+
+1. **Run all tests**
+
+   ```bash
+   npm run test:all
+   ```
+
+2. **If all tests pass**, report success and stop.
+
+3. **If any tests fail**, analyze the failures:
+   - Note which tests failed and their error messages
+   - Run `git diff main` to see what code has changed
+
+4. **Determine the nature of the change**:
+   - **If the logic change is intentional** (new feature, refactor, behavior change):
+     - Update the failing tests to match the new expected behavior
+     - The tests should reflect what the code NOW does correctly
+
+   - **If the logic change appears to be a bug** (regression, unintended side effect):
+     - Fix the source code to restore the expected behavior
+     - Do NOT modify the tests - they are catching a real bug
+
+5. **How to decide if it's a bug vs intentional change**:
+   - Look at the git diff and commit messages
+   - If the change was deliberate and the test expectations are now outdated → update tests
+   - If the change broke existing functionality that should still work → fix the code
+   - When in doubt, ask the user
+
+6. **After making fixes**, re-run the tests to verify everything passes.
+
+7. **Report summary** of what was fixed (tests updated vs code fixed).
diff --git a/temp_repo/.dockerignore b/temp_repo/.dockerignore
new file mode 100644
index 0000000000000000000000000000000000000000..8163526befa0a6bd172e25dca2415881acc4d772
--- /dev/null
+++ b/temp_repo/.dockerignore
@@ -0,0 +1,19 @@
+# Dependencies
+node_modules/
+**/node_modules/
+
+# Build outputs
+dist/
+**/dist/
+dist-electron/
+**/dist-electron/
+build/
+**/build/
+.next/
+**/.next/
+.nuxt/
+**/.nuxt/
+out/
+**/out/
+.cache/
+**/.cache/
\ No newline at end of file
diff --git a/temp_repo/.geminiignore b/temp_repo/.geminiignore
new file mode 100644
index 0000000000000000000000000000000000000000..703ef020123a81478729bb04f4c80b6a3e0e2360
--- /dev/null
+++ b/temp_repo/.geminiignore
@@ -0,0 +1,14 @@
+# Auto-generated by Automaker to speed up Gemini CLI startup
+# Prevents Gemini CLI from scanning large directories during context discovery
+.git
+node_modules
+dist
+build
+.next
+.nuxt
+coverage
+.automaker
+.worktrees
+.vscode
+.idea
+*.lock
diff --git a/temp_repo/.github/ISSUE_TEMPLATE/bug_report.yml b/temp_repo/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 0000000000000000000000000000000000000000..af6bb48bd1137527f5fa6a876f06aaeb3afe2b97
--- /dev/null
+++ b/temp_repo/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,117 @@
+name: Bug Report
+description: File a bug report to help us improve Automaker
+title: '[Bug]: '
+labels: ['bug']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to report a bug! Please fill out the form below with as much detail as possible.
+
+  - type: dropdown
+    id: operating-system
+    attributes:
+      label: Operating System
+      description: What operating system are you using?
+      options:
+        - macOS
+        - Windows
+        - Linux
+        - Other
+      default: 0
+    validations:
+      required: true
+
+  - type: dropdown
+    id: run-mode
+    attributes:
+      label: Run Mode
+      description: How are you running Automaker?
+      options:
+        - Electron (Desktop App)
+        - Web (Browser)
+        - Docker
+      default: 0
+    validations:
+      required: true
+
+  - type: input
+    id: app-version
+    attributes:
+      label: App Version
+      description: What version of Automaker are you using? (e.g., 0.1.0)
+      placeholder: '0.1.0'
+    validations:
+      required: true
+
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Bug Description
+      description: A clear and concise description of what the bug is.
+      placeholder: Describe the bug...
+    validations:
+      required: true
+
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: Steps to Reproduce
+      description: Steps to reproduce the behavior
+      placeholder: |
+        1. Go to '...'
+        2. Click on '...'
+        3. Scroll down to '...'
+        4. See error
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected Behavior
+      description: A clear and concise description of what you expected to happen.
+      placeholder: What should have happened?
+    validations:
+      required: true
+
+  - type: textarea
+    id: actual-behavior
+    attributes:
+      label: Actual Behavior
+      description: A clear and concise description of what actually happened.
+      placeholder: What actually happened?
+    validations:
+      required: true
+
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots
+      description: If applicable, add screenshots to help explain your problem.
+      placeholder: Drag and drop screenshots here or paste image URLs
+
+  - type: textarea
+    id: logs
+    attributes:
+      label: Relevant Logs
+      description: If applicable, paste relevant logs or error messages.
+      placeholder: Paste logs here...
+      render: shell
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional Context
+      description: Add any other context about the problem here.
+      placeholder: Any additional information that might be helpful...
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Checklist
+      options:
+        - label: I have searched existing issues to ensure this bug hasn't been reported already
+          required: true
+        - label: I have provided all required information above
+          required: true
diff --git a/temp_repo/.github/ISSUE_TEMPLATE/feature_request.yml b/temp_repo/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7cddcaefec9d3f8357c234ff218ceef62b26f794
--- /dev/null
+++ b/temp_repo/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,108 @@
+name: Feature Request
+description: Suggest a new feature or enhancement for Automaker
+title: '[Feature]: '
+labels: ['enhancement']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to suggest a feature! Please fill out the form below to help us understand your request.
+
+  - type: dropdown
+    id: feature-area
+    attributes:
+      label: Feature Area
+      description: Which area of Automaker does this feature relate to?
+      options:
+        - UI/UX (User Interface)
+        - Agent/AI
+        - Kanban Board
+        - Git/Worktree Management
+        - Project Management
+        - Settings/Configuration
+        - Documentation
+        - Performance
+        - Other
+      default: 0
+    validations:
+      required: true
+
+  - type: dropdown
+    id: priority
+    attributes:
+      label: Priority
+      description: How important is this feature to your workflow?
+      options:
+        - Nice to have
+        - Would improve my workflow
+        - Critical for my use case
+      default: 0
+    validations:
+      required: true
+
+  - type: textarea
+    id: problem-statement
+    attributes:
+      label: Problem Statement
+      description: Is your feature request related to a problem? Please describe the problem you're trying to solve.
+      placeholder: A clear and concise description of what the problem is. Ex. I'm always frustrated when...
+    validations:
+      required: true
+
+  - type: textarea
+    id: proposed-solution
+    attributes:
+      label: Proposed Solution
+      description: Describe the solution you'd like to see implemented.
+      placeholder: A clear and concise description of what you want to happen.
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternatives-considered
+    attributes:
+      label: Alternatives Considered
+      description: Describe any alternative solutions or workarounds you've considered.
+      placeholder: A clear and concise description of any alternative solutions or features you've considered.
+    validations:
+      required: false
+
+  - type: textarea
+    id: use-cases
+    attributes:
+      label: Use Cases
+      description: Describe specific scenarios where this feature would be useful.
+      placeholder: |
+        1. When working on...
+        2. As a user who needs to...
+        3. In situations where...
+    validations:
+      required: false
+
+  - type: textarea
+    id: mockups
+    attributes:
+      label: Mockups/Screenshots
+      description: If applicable, add mockups, wireframes, or screenshots to help illustrate your feature request.
+      placeholder: Drag and drop images here or paste image URLs
+    validations:
+      required: false
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional Context
+      description: Add any other context, references, or examples about the feature request here.
+      placeholder: Any additional information that might be helpful...
+    validations:
+      required: false
+
+  - type: checkboxes
+    id: terms
+    attributes:
+      label: Checklist
+      options:
+        - label: I have searched existing issues to ensure this feature hasn't been requested already
+          required: true
+        - label: I have provided a clear description of the problem and proposed solution
+          required: true
diff --git a/temp_repo/.github/actions/setup-project/action.yml b/temp_repo/.github/actions/setup-project/action.yml
new file mode 100644
index 0000000000000000000000000000000000000000..262c46dc584ddb768d066215e1310570ef123073
--- /dev/null
+++ b/temp_repo/.github/actions/setup-project/action.yml
@@ -0,0 +1,80 @@
+name: 'Setup Project'
+description: 'Common setup steps for CI workflows - checkout, Node.js, dependencies, and native modules'
+
+inputs:
+  node-version:
+    description: 'Node.js version to use'
+    required: false
+    default: '22'
+  check-lockfile:
+    description: 'Run lockfile lint check for SSH URLs'
+    required: false
+    default: 'false'
+  rebuild-node-pty-path:
+    description: 'Working directory for node-pty rebuild (empty = root)'
+    required: false
+    default: ''
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+        cache: 'npm'
+        cache-dependency-path: package-lock.json
+
+    - name: Configure Git for HTTPS
+      shell: bash
+      # Convert SSH URLs to HTTPS for git dependencies (e.g., @electron/node-gyp)
+      # This is needed because SSH authentication isn't available in CI
+      run: git config --global url."https://github.com/".insteadOf "git@github.com:"
+
+    - name: Auto-fix SSH URLs in lockfile
+      if: inputs.check-lockfile == 'true'
+      shell: bash
+      # Auto-fix any git+ssh:// URLs in package-lock.json before linting
+      # This handles cases where npm reintroduces SSH URLs for git dependencies
+      run: node scripts/fix-lockfile-urls.mjs
+
+    - name: Check for SSH URLs in lockfile
+      if: inputs.check-lockfile == 'true'
+      shell: bash
+      run: npm run lint:lockfile
+
+    - name: Install dependencies
+      shell: bash
+      # Use npm install instead of npm ci to correctly resolve platform-specific
+      # optional dependencies (e.g., @tailwindcss/oxide, lightningcss binaries)
+      # Skip scripts to avoid electron-builder install-app-deps which uses too much memory
+      # Use --force to allow platform-specific dev dependencies like dmg-license on non-darwin platforms
+      run: npm install --ignore-scripts --force
+
+    - name: Install Linux native bindings
+      if: runner.os == 'Linux'
+      shell: bash
+      # Workaround for npm optional dependencies bug (npm/cli#4828)
+      # Explicitly install Linux bindings needed for build tools
+      run: |
+        npm install --no-save --force --ignore-scripts \
+          @rollup/rollup-linux-x64-gnu@4.53.3 \
+          @tailwindcss/oxide-linux-x64-gnu@4.1.17
+
+    - name: Build shared packages
+      shell: bash
+      # Build shared packages (types, utils, platform, etc.) before apps can use them
+      run: npm run build:packages
+
+    - name: Rebuild native modules (root)
+      if: inputs.rebuild-node-pty-path == ''
+      shell: bash
+      # Rebuild node-pty and other native modules for Electron
+      run: npm rebuild node-pty
+
+    - name: Rebuild native modules (workspace)
+      if: inputs.rebuild-node-pty-path != ''
+      shell: bash
+      # Rebuild node-pty and other native modules needed for server
+      run: npm rebuild node-pty
+      working-directory: ${{ inputs.rebuild-node-pty-path }}
diff --git a/temp_repo/.github/scripts/upload-to-r2.js b/temp_repo/.github/scripts/upload-to-r2.js
new file mode 100644
index 0000000000000000000000000000000000000000..b54d4b1916d0b22984cf6aa2c32ab9c3322e3211
--- /dev/null
+++ b/temp_repo/.github/scripts/upload-to-r2.js
@@ -0,0 +1,355 @@
+const { S3Client, PutObjectCommand, GetObjectCommand } = require('@aws-sdk/client-s3');
+const fs = require('fs');
+const path = require('path');
+const https = require('https');
+const { pipeline } = require('stream/promises');
+
+const s3Client = new S3Client({
+  region: 'auto',
+  endpoint: process.env.R2_ENDPOINT,
+  credentials: {
+    accessKeyId: process.env.R2_ACCESS_KEY_ID,
+    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY,
+  },
+});
+
+const BUCKET = process.env.R2_BUCKET_NAME;
+const PUBLIC_URL = process.env.R2_PUBLIC_URL;
+const VERSION = process.env.RELEASE_VERSION;
+const RELEASE_TAG = process.env.RELEASE_TAG || `v${VERSION}`;
+const GITHUB_REPO = process.env.GITHUB_REPOSITORY;
+
+async function fetchExistingReleases() {
+  try {
+    const response = await s3Client.send(
+      new GetObjectCommand({
+        Bucket: BUCKET,
+        Key: 'releases.json',
+      })
+    );
+    const body = await response.Body.transformToString();
+    return JSON.parse(body);
+  } catch (error) {
+    if (error.name === 'NoSuchKey' || error.$metadata?.httpStatusCode === 404) {
+      console.log('No existing releases.json found, creating new one');
+      return { latestVersion: null, releases: [] };
+    }
+    throw error;
+  }
+}
+
+async function uploadFile(localPath, r2Key, contentType) {
+  const fileBuffer = fs.readFileSync(localPath);
+  const stats = fs.statSync(localPath);
+
+  await s3Client.send(
+    new PutObjectCommand({
+      Bucket: BUCKET,
+      Key: r2Key,
+      Body: fileBuffer,
+      ContentType: contentType,
+    })
+  );
+
+  console.log(`Uploaded: ${r2Key} (${stats.size} bytes)`);
+  return stats.size;
+}
+
+function findArtifacts(dir, pattern) {
+  if (!fs.existsSync(dir)) return [];
+  const files = fs.readdirSync(dir);
+  return files.filter((f) => pattern.test(f)).map((f) => path.join(dir, f));
+}
+
+async function checkUrlAccessible(url, maxRetries = 10, initialDelay = 1000) {
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    try {
+      const result = await new Promise((resolve, reject) => {
+        const request = https.get(url, { timeout: 10000 }, (response) => {
+          const statusCode = response.statusCode;
+
+          // Follow redirects
+          if (
+            statusCode === 302 ||
+            statusCode === 301 ||
+            statusCode === 307 ||
+            statusCode === 308
+          ) {
+            const redirectUrl = response.headers.location;
+            response.destroy();
+            if (!redirectUrl) {
+              resolve({
+                accessible: false,
+                statusCode,
+                error: 'Redirect without location header',
+              });
+              return;
+            }
+            // Follow the redirect URL
+            return https
+              .get(redirectUrl, { timeout: 10000 }, (redirectResponse) => {
+                const redirectStatus = redirectResponse.statusCode;
+                const contentType = redirectResponse.headers['content-type'] || '';
+                // Check if it's actually a file (zip/tar.gz) and not HTML
+                const isFile =
+                  contentType.includes('application/zip') ||
+                  contentType.includes('application/gzip') ||
+                  contentType.includes('application/x-gzip') ||
+                  contentType.includes('application/x-tar') ||
+                  redirectUrl.includes('.zip') ||
+                  redirectUrl.includes('.tar.gz');
+                const isGood = redirectStatus >= 200 && redirectStatus < 300 && isFile;
+                redirectResponse.destroy();
+                resolve({
+                  accessible: isGood,
+                  statusCode: redirectStatus,
+                  finalUrl: redirectUrl,
+                  contentType,
+                });
+              })
+              .on('error', (error) => {
+                resolve({
+                  accessible: false,
+                  statusCode,
+                  error: error.message,
+                });
+              })
+              .on('timeout', function () {
+                this.destroy();
+                resolve({
+                  accessible: false,
+                  statusCode,
+                  error: 'Timeout following redirect',
+                });
+              });
+          }
+
+          // Check if status is good (200-299 range) and it's actually a file
+          const contentType = response.headers['content-type'] || '';
+          const isFile =
+            contentType.includes('application/zip') ||
+            contentType.includes('application/gzip') ||
+            contentType.includes('application/x-gzip') ||
+            contentType.includes('application/x-tar') ||
+            url.includes('.zip') ||
+            url.includes('.tar.gz');
+          const isGood = statusCode >= 200 && statusCode < 300 && isFile;
+          response.destroy();
+          resolve({ accessible: isGood, statusCode, contentType });
+        });
+
+        request.on('error', (error) => {
+          resolve({
+            accessible: false,
+            statusCode: null,
+            error: error.message,
+          });
+        });
+
+        request.on('timeout', () => {
+          request.destroy();
+          resolve({
+            accessible: false,
+            statusCode: null,
+            error: 'Request timeout',
+          });
+        });
+      });
+
+      if (result.accessible) {
+        if (attempt > 0) {
+          console.log(
+            `✓ URL ${url} is now accessible after ${attempt} retries (status: ${result.statusCode})`
+          );
+        } else {
+          console.log(`✓ URL ${url} is accessible (status: ${result.statusCode})`);
+        }
+        return result.finalUrl || url; // Return the final URL (after redirects) if available
+      } else {
+        const errorMsg = result.error ? ` - ${result.error}` : '';
+        const statusMsg = result.statusCode ? ` (status: ${result.statusCode})` : '';
+        const contentTypeMsg = result.contentType ? ` [content-type: ${result.contentType}]` : '';
+        console.log(`✗ URL ${url} not accessible${statusMsg}${contentTypeMsg}${errorMsg}`);
+      }
+    } catch (error) {
+      console.log(`✗ URL ${url} check failed: ${error.message}`);
+    }
+
+    if (attempt < maxRetries - 1) {
+      const delay = initialDelay * Math.pow(2, attempt);
+      console.log(`  Retrying in ${delay}ms... (attempt ${attempt + 1}/${maxRetries})`);
+      await new Promise((resolve) => setTimeout(resolve, delay));
+    }
+  }
+
+  throw new Error(`URL ${url} is not accessible after ${maxRetries} attempts`);
+}
+
+async function downloadFromGitHub(url, outputPath) {
+  return new Promise((resolve, reject) => {
+    const request = https.get(url, { timeout: 30000 }, (response) => {
+      const statusCode = response.statusCode;
+
+      // Follow redirects (all redirect types)
+      if (statusCode === 301 || statusCode === 302 || statusCode === 307 || statusCode === 308) {
+        const redirectUrl = response.headers.location;
+        response.destroy();
+        if (!redirectUrl) {
+          reject(new Error(`Redirect without location header for ${url}`));
+          return;
+        }
+        // Resolve relative redirects
+        const finalRedirectUrl = redirectUrl.startsWith('http')
+          ? redirectUrl
+          : new URL(redirectUrl, url).href;
+        console.log(`  Following redirect: ${finalRedirectUrl}`);
+        return downloadFromGitHub(finalRedirectUrl, outputPath).then(resolve).catch(reject);
+      }
+
+      if (statusCode !== 200) {
+        response.destroy();
+        reject(new Error(`Failed to download ${url}: ${statusCode} ${response.statusMessage}`));
+        return;
+      }
+
+      const fileStream = fs.createWriteStream(outputPath);
+      response.pipe(fileStream);
+      fileStream.on('finish', () => {
+        fileStream.close();
+        resolve();
+      });
+      fileStream.on('error', (error) => {
+        response.destroy();
+        reject(error);
+      });
+    });
+
+    request.on('error', reject);
+    request.on('timeout', () => {
+      request.destroy();
+      reject(new Error(`Request timeout for ${url}`));
+    });
+  });
+}
+
+async function main() {
+  const artifactsDir = 'artifacts';
+  const tempDir = path.join(artifactsDir, 'temp');
+
+  // Create temp directory for downloaded GitHub archives
+  if (!fs.existsSync(tempDir)) {
+    fs.mkdirSync(tempDir, { recursive: true });
+  }
+
+  // Download source archives from GitHub
+  const githubZipUrl = `https://github.com/${GITHUB_REPO}/archive/refs/tags/${RELEASE_TAG}.zip`;
+  const githubTarGzUrl = `https://github.com/${GITHUB_REPO}/archive/refs/tags/${RELEASE_TAG}.tar.gz`;
+
+  const sourceZipPath = path.join(tempDir, `automaker-${VERSION}.zip`);
+  const sourceTarGzPath = path.join(tempDir, `automaker-${VERSION}.tar.gz`);
+
+  console.log(`Waiting for source archives to be available on GitHub...`);
+  console.log(`  ZIP: ${githubZipUrl}`);
+  console.log(`  TAR.GZ: ${githubTarGzUrl}`);
+
+  // Wait for archives to be accessible with exponential backoff
+  // This returns the final URL after following redirects
+  const finalZipUrl = await checkUrlAccessible(githubZipUrl);
+  const finalTarGzUrl = await checkUrlAccessible(githubTarGzUrl);
+
+  console.log(`Downloading source archives from GitHub...`);
+  await downloadFromGitHub(finalZipUrl, sourceZipPath);
+  await downloadFromGitHub(finalTarGzUrl, sourceTarGzPath);
+
+  console.log(`Downloaded source archives successfully`);
+
+  // Find all artifacts
+  const artifacts = {
+    windows: findArtifacts(path.join(artifactsDir, 'windows-builds'), /\.exe$/),
+    macos: findArtifacts(path.join(artifactsDir, 'macos-builds'), /-x64\.dmg$/),
+    macosArm: findArtifacts(path.join(artifactsDir, 'macos-builds'), /-arm64\.dmg$/),
+    linux: findArtifacts(path.join(artifactsDir, 'linux-builds'), /\.AppImage$/),
+    sourceZip: [sourceZipPath],
+    sourceTarGz: [sourceTarGzPath],
+  };
+
+  console.log('Found artifacts:');
+  for (const [platform, files] of Object.entries(artifacts)) {
+    console.log(
+      `  ${platform}: ${files.length > 0 ? files.map((f) => path.basename(f)).join(', ') : 'none'}`
+    );
+  }
+
+  // Upload each artifact to R2
+  const assets = {};
+  const contentTypes = {
+    windows: 'application/x-msdownload',
+    macos: 'application/x-apple-diskimage',
+    macosArm: 'application/x-apple-diskimage',
+    linux: 'application/x-executable',
+    sourceZip: 'application/zip',
+    sourceTarGz: 'application/gzip',
+  };
+
+  for (const [platform, files] of Object.entries(artifacts)) {
+    if (files.length === 0) {
+      console.warn(`Warning: No artifact found for ${platform}`);
+      continue;
+    }
+
+    // Use the first matching file for each platform
+    const localPath = files[0];
+    const filename = path.basename(localPath);
+    const r2Key = `releases/${VERSION}/${filename}`;
+    const size = await uploadFile(localPath, r2Key, contentTypes[platform]);
+
+    assets[platform] = {
+      url: `${PUBLIC_URL}/releases/${VERSION}/${filename}`,
+      filename,
+      size,
+      arch:
+        platform === 'macosArm'
+          ? 'arm64'
+          : platform === 'sourceZip' || platform === 'sourceTarGz'
+            ? 'source'
+            : 'x64',
+    };
+  }
+
+  // Fetch and update releases.json
+  const releasesData = await fetchExistingReleases();
+
+  const newRelease = {
+    version: VERSION,
+    date: new Date().toISOString(),
+    assets,
+    githubReleaseUrl: `https://github.com/${GITHUB_REPO}/releases/tag/${RELEASE_TAG}`,
+  };
+
+  // Remove existing entry for this version if re-running
+  releasesData.releases = releasesData.releases.filter((r) => r.version !== VERSION);
+
+  // Prepend new release
+  releasesData.releases.unshift(newRelease);
+  releasesData.latestVersion = VERSION;
+
+  // Upload updated releases.json
+  await s3Client.send(
+    new PutObjectCommand({
+      Bucket: BUCKET,
+      Key: 'releases.json',
+      Body: JSON.stringify(releasesData, null, 2),
+      ContentType: 'application/json',
+      CacheControl: 'public, max-age=60',
+    })
+  );
+
+  console.log('Successfully updated releases.json');
+  console.log(`Latest version: ${VERSION}`);
+  console.log(`Total releases: ${releasesData.releases.length}`);
+}
+
+main().catch((err) => {
+  console.error('Failed to upload to R2:', err);
+  process.exit(1);
+});
diff --git a/temp_repo/.github/workflows/claude.yml b/temp_repo/.github/workflows/claude.yml
new file mode 100644
index 0000000000000000000000000000000000000000..9471a0591de36ca20ab974144e773510bffe15e5
--- /dev/null
+++ b/temp_repo/.github/workflows/claude.yml
@@ -0,0 +1,49 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+      actions: read # Required for Claude to read CI results on PRs
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@v1
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+
+          # This is an optional setting that allows Claude to read CI results on PRs
+          additional_permissions: |
+            actions: read
+
+          # Optional: Give a custom prompt to Claude. If this is not specified, Claude will perform the instructions specified in the comment that tagged it.
+          # prompt: 'Update the pull request description to include a summary of changes.'
+
+          # Optional: Add claude_args to customize behavior and configuration
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://code.claude.com/docs/en/cli-reference for available options
+          # claude_args: '--allowed-tools Bash(gh pr:*)'
diff --git a/temp_repo/.github/workflows/e2e-tests.yml b/temp_repo/.github/workflows/e2e-tests.yml
new file mode 100644
index 0000000000000000000000000000000000000000..4f682a0bd8122fea38acc13e346d21423837c12c
--- /dev/null
+++ b/temp_repo/.github/workflows/e2e-tests.yml
@@ -0,0 +1,202 @@
+name: E2E Tests
+
+on:
+  pull_request:
+    branches:
+      - '*'
+  push:
+    branches:
+      - main
+      - master
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    strategy:
+      fail-fast: false
+      matrix:
+        # shardIndex: [1, 2, 3]
+        # shardTotal: [3]
+        shardIndex: [1]
+        shardTotal: [1]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup project
+        uses: ./.github/actions/setup-project
+        with:
+          check-lockfile: 'true'
+          rebuild-node-pty-path: 'apps/server'
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+        working-directory: apps/ui
+
+      - name: Build server
+        run: npm run build --workspace=apps/server
+
+      - name: Set up Git user
+        run: |
+          git config --global user.name "GitHub CI"
+          git config --global user.email "ci@example.com"
+
+      - name: Start backend server
+        run: |
+          echo "Starting backend server..."
+          # Start server in background and save PID
+          npm run start --workspace=apps/server > backend.log 2>&1 &
+          SERVER_PID=$!
+          echo "Server started with PID: $SERVER_PID"
+          echo "SERVER_PID=$SERVER_PID" >> $GITHUB_ENV
+
+        env:
+          PORT: 3108
+          TEST_SERVER_PORT: 3108
+          NODE_ENV: test
+          # Use a deterministic API key so Playwright can log in reliably
+          AUTOMAKER_API_KEY: test-api-key-for-e2e-tests
+          # Reduce log noise in CI
+          AUTOMAKER_HIDE_API_KEY: 'true'
+          # Avoid real API calls during CI
+          AUTOMAKER_MOCK_AGENT: 'true'
+          # Simulate containerized environment to skip sandbox confirmation dialogs
+          IS_CONTAINERIZED: 'true'
+
+      - name: Wait for backend server
+        run: |
+          echo "Waiting for backend server to be ready..."
+
+          # Check if server process is running
+          if [ -z "$SERVER_PID" ]; then
+            echo "ERROR: Server PID not found in environment"
+            cat backend.log 2>/dev/null || echo "No backend log found"
+            exit 1
+          fi
+
+          # Check if process is actually running
+          if ! kill -0 $SERVER_PID 2>/dev/null; then
+            echo "ERROR: Server process $SERVER_PID is not running!"
+            echo "=== Backend logs ==="
+            cat backend.log
+            echo ""
+            echo "=== Recent system logs ==="
+            dmesg 2>/dev/null | tail -20 || echo "No dmesg available"
+            exit 1
+          fi
+
+          # Wait for health endpoint
+          for i in {1..60}; do
+            if curl -s -f http://localhost:3108/api/health > /dev/null 2>&1; then
+              echo "Backend server is ready!"
+              echo "=== Backend logs ==="
+              cat backend.log
+              echo ""
+              echo "Health check response:"
+              curl -s http://localhost:3108/api/health | jq . 2>/dev/null || echo "Health check: $(curl -s http://localhost:3108/api/health 2>/dev/null || echo 'No response')"
+              exit 0
+            fi
+
+            # Check if server process is still running
+            if ! kill -0 $SERVER_PID 2>/dev/null; then
+              echo "ERROR: Server process died during wait!"
+              echo "=== Backend logs ==="
+              cat backend.log
+              exit 1
+            fi
+
+            echo "Waiting... ($i/60)"
+            sleep 1
+          done
+
+          echo "ERROR: Backend server failed to start within 60 seconds!"
+          echo "=== Backend logs ==="
+          cat backend.log
+          echo ""
+          echo "=== Process status ==="
+          ps aux | grep -E "(node|tsx)" | grep -v grep || echo "No node processes found"
+          echo ""
+          echo "=== Port status ==="
+          netstat -tlnp 2>/dev/null | grep :3108 || echo "Port 3108 not listening"
+          lsof -i :3108 2>/dev/null || echo "lsof not available or port not in use"
+          echo ""
+          echo "=== Health endpoint test ==="
+          curl -v http://localhost:3108/api/health 2>&1 || echo "Health endpoint failed"
+
+          # Kill the server process if it's still hanging
+          if kill -0 $SERVER_PID 2>/dev/null; then
+            echo ""
+            echo "Killing stuck server process..."
+            kill -9 $SERVER_PID 2>/dev/null || true
+          fi
+
+          exit 1
+
+      - name: Run E2E tests (shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
+        # Playwright automatically starts the Vite frontend via webServer config
+        # (see apps/ui/playwright.config.ts) - no need to start it manually
+        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        working-directory: apps/ui
+        env:
+          CI: true
+          VITE_SKIP_SETUP: 'true'
+          # Keep UI-side login/defaults consistent
+          AUTOMAKER_API_KEY: test-api-key-for-e2e-tests
+          # Backend is already started above - Playwright config sets
+          # AUTOMAKER_SERVER_PORT so the Vite proxy forwards /api/* to the backend.
+          # Do NOT set VITE_SERVER_URL here: it bypasses the Vite proxy and causes
+          # a cookie domain mismatch (cookies are bound to 127.0.0.1, but
+          # VITE_SERVER_URL=http://localhost:3108 makes the frontend call localhost).
+          TEST_USE_EXTERNAL_BACKEND: 'true'
+          TEST_SERVER_PORT: 3108
+
+      - name: Print backend logs on failure
+        if: failure()
+        run: |
+          echo "=== E2E Tests Failed - Backend Logs ==="
+          cat backend.log 2>/dev/null || echo "No backend log found"
+          echo ""
+          echo "=== Process status at failure ==="
+          ps aux | grep -E "(node|tsx)" | grep -v grep || echo "No node processes found"
+          echo ""
+          echo "=== Port status ==="
+          netstat -tlnp 2>/dev/null | grep :3108 || echo "Port 3108 not listening"
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report-shard-${{ matrix.shardIndex }}-of-${{ matrix.shardTotal }}
+          path: apps/ui/playwright-report/
+          retention-days: 7
+
+      - name: Upload test results (screenshots, traces, videos)
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: test-results-shard-${{ matrix.shardIndex }}-of-${{ matrix.shardTotal }}
+          path: |
+            apps/ui/test-results/
+          retention-days: 7
+          if-no-files-found: ignore
+
+      - name: Upload blob report for merging
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: blob-report-shard-${{ matrix.shardIndex }}-of-${{ matrix.shardTotal }}
+          path: apps/ui/blob-report/
+          retention-days: 1
+          if-no-files-found: ignore
+
+      - name: Cleanup - Kill backend server
+        if: always()
+        run: |
+          if [ -n "$SERVER_PID" ]; then
+            echo "Cleaning up backend server (PID: $SERVER_PID)..."
+            kill $SERVER_PID 2>/dev/null || true
+            kill -9 $SERVER_PID 2>/dev/null || true
+            echo "Backend server cleanup complete"
+          fi
diff --git a/temp_repo/.github/workflows/format-check.yml b/temp_repo/.github/workflows/format-check.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d6904979b7ed3c8d1b374376c0e13910f140a75f
--- /dev/null
+++ b/temp_repo/.github/workflows/format-check.yml
@@ -0,0 +1,31 @@
+name: Format Check
+
+on:
+  pull_request:
+    branches:
+      - '*'
+  push:
+    branches:
+      - main
+      - master
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+          cache-dependency-path: package-lock.json
+
+      - name: Install dependencies
+        run: npm install --ignore-scripts --force
+
+      - name: Check formatting
+        run: npm run format:check
diff --git a/temp_repo/.github/workflows/pr-check.yml b/temp_repo/.github/workflows/pr-check.yml
new file mode 100644
index 0000000000000000000000000000000000000000..4311eeb0b2addf27f5b687933a3a59e541ad97ff
--- /dev/null
+++ b/temp_repo/.github/workflows/pr-check.yml
@@ -0,0 +1,26 @@
+name: PR Build Check
+
+on:
+  pull_request:
+    branches:
+      - '*'
+  push:
+    branches:
+      - main
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup project
+        uses: ./.github/actions/setup-project
+        with:
+          check-lockfile: 'true'
+
+      - name: Run build:electron (dir only - faster CI)
+        run: npm run build:electron:dir
diff --git a/temp_repo/.github/workflows/release.yml b/temp_repo/.github/workflows/release.yml
new file mode 100644
index 0000000000000000000000000000000000000000..f4fe01f34d5fc05c1cc6d73aef07a91c66d72fdd
--- /dev/null
+++ b/temp_repo/.github/workflows/release.yml
@@ -0,0 +1,133 @@
+name: Release Build
+
+on:
+  release:
+    types: [published]
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        os: [ubuntu-latest, macos-latest, windows-latest]
+    runs-on: ${{ matrix.os }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Extract version from tag
+        id: version
+        shell: bash
+        run: |
+          # Remove 'v' prefix if present (e.g., "v1.2.3" -> "1.2.3")
+          VERSION="${{ github.event.release.tag_name }}"
+          VERSION="${VERSION#v}"
+          echo "version=${VERSION}" >> $GITHUB_OUTPUT
+          echo "Extracted version: ${VERSION}"
+
+      - name: Update package.json version
+        shell: bash
+        run: |
+          node apps/ui/scripts/update-version.mjs "${{ steps.version.outputs.version }}"
+
+      - name: Setup project
+        uses: ./.github/actions/setup-project
+        with:
+          check-lockfile: 'true'
+
+      - name: Install RPM build tools (Linux)
+        if: matrix.os == 'ubuntu-latest'
+        shell: bash
+        run: sudo apt-get update && sudo apt-get install -y rpm
+
+      - name: Build Electron app (macOS)
+        if: matrix.os == 'macos-latest'
+        shell: bash
+        run: npm run build:electron:mac --workspace=apps/ui
+        env:
+          CSC_IDENTITY_AUTO_DISCOVERY: false
+
+      - name: Build Electron app (Windows)
+        if: matrix.os == 'windows-latest'
+        shell: bash
+        run: npm run build:electron:win --workspace=apps/ui
+
+      - name: Build Electron app (Linux)
+        if: matrix.os == 'ubuntu-latest'
+        shell: bash
+        run: npm run build:electron:linux --workspace=apps/ui
+
+      - name: Upload macOS artifacts
+        if: matrix.os == 'macos-latest'
+        uses: actions/upload-artifact@v4
+        with:
+          name: macos-builds
+          path: |
+            apps/ui/release/*.dmg
+            apps/ui/release/*.zip
+          if-no-files-found: error
+          retention-days: 30
+
+      - name: Upload Windows artifacts
+        if: matrix.os == 'windows-latest'
+        uses: actions/upload-artifact@v4
+        with:
+          name: windows-builds
+          path: apps/ui/release/*.exe
+          if-no-files-found: error
+          retention-days: 30
+
+      - name: Upload Linux artifacts
+        if: matrix.os == 'ubuntu-latest'
+        uses: actions/upload-artifact@v4
+        with:
+          name: linux-builds
+          path: |
+            apps/ui/release/*.AppImage
+            apps/ui/release/*.deb
+            apps/ui/release/*.rpm
+          if-no-files-found: error
+          retention-days: 30
+
+  upload:
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Download macOS artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: macos-builds
+          path: artifacts/macos-builds
+
+      - name: Download Windows artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: windows-builds
+          path: artifacts/windows-builds
+
+      - name: Download Linux artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: linux-builds
+          path: artifacts/linux-builds
+
+      - name: Upload to GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          fail_on_unmatched_files: true
+          files: |
+            artifacts/macos-builds/*.dmg
+            artifacts/macos-builds/*.zip
+            artifacts/windows-builds/*.exe
+            artifacts/linux-builds/*.AppImage
+            artifacts/linux-builds/*.deb
+            artifacts/linux-builds/*.rpm
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/temp_repo/.github/workflows/security-audit.yml b/temp_repo/.github/workflows/security-audit.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7da30c5da9b4f2df0b83c585c01cdff8f8b983cd
--- /dev/null
+++ b/temp_repo/.github/workflows/security-audit.yml
@@ -0,0 +1,30 @@
+name: Security Audit
+
+on:
+  pull_request:
+    branches:
+      - '*'
+  push:
+    branches:
+      - main
+      - master
+  schedule:
+    # Run weekly on Mondays at 9 AM UTC
+    - cron: '0 9 * * 1'
+
+jobs:
+  audit:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup project
+        uses: ./.github/actions/setup-project
+        with:
+          check-lockfile: 'true'
+
+      - name: Run npm audit
+        run: npm audit --audit-level=critical
+        continue-on-error: false
diff --git a/temp_repo/.github/workflows/test.yml b/temp_repo/.github/workflows/test.yml
new file mode 100644
index 0000000000000000000000000000000000000000..dacea6312a962be1999c8086ebd644c4c710f794
--- /dev/null
+++ b/temp_repo/.github/workflows/test.yml
@@ -0,0 +1,44 @@
+name: Test Suite
+
+on:
+  pull_request:
+    branches:
+      - '*'
+  push:
+    branches:
+      - main
+      - master
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup project
+        uses: ./.github/actions/setup-project
+        with:
+          check-lockfile: 'true'
+          rebuild-node-pty-path: 'apps/server'
+
+      - name: Run package tests
+        run: npm run test:packages
+        env:
+          NODE_ENV: test
+
+      - name: Run server tests with coverage
+        run: npm run test:server:coverage
+        env:
+          NODE_ENV: test
+
+      # - name: Upload coverage reports
+      #   uses: codecov/codecov-action@v4
+      #   if: always()
+      #   with:
+      #     files: ./apps/server/coverage/coverage-final.json
+      #     flags: server
+      #     name: server-coverage
+      #   env:
+      #     CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
diff --git a/temp_repo/.gitignore b/temp_repo/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..1c2d1a3243cb076a2cba8d1eb37f8c0b4a04215b
--- /dev/null
+++ b/temp_repo/.gitignore
@@ -0,0 +1,116 @@
+#added by trueheads > will remove once supercombo adds multi-os support
+launch.sh
+
+# Dependencies
+node_modules/
+
+# Build outputs
+dist/
+build/
+out/
+.next/
+.turbo/
+
+# Automaker
+.automaker/images/
+.automaker/
+/.automaker/*
+/.automaker/
+
+.worktrees/
+
+/logs
+# Logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# OS-specific files
+.DS_Store
+.DS_Store?
+._*
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+
+# IDE/Editor configs
+.vscode/
+.idea/
+*.sublime-workspace
+*.sublime-project
+
+# Editor backup/temp files
+*~
+*.bak
+*.backup
+*.orig
+*.swp
+*.swo
+*.tmp
+*.temp
+
+# Local settings (user-specific)
+*.local.json
+
+# Application state/backup
+backup.json
+
+# Test artifacts
+test-results/
+coverage/
+.nyc_output/
+*.lcov
+playwright-report/
+blob-report/
+test/**/test-project-[0-9]*/
+test/opus-thinking-*/
+test/agent-session-test-*/
+test/feature-backlog-test-*/
+test/running-task-display-test-*/
+test/agent-output-modal-responsive-*/
+test/fixtures/
+test/board-bg-test-*/
+test/edit-feature-test-*/
+test/open-project-test-*/
+
+
+# Environment files (keep .example)
+.env
+.env.local
+.env.*.local
+!.env.example
+!.env.local.example
+
+# Codex config (contains API keys)
+.codex/config.toml
+
+# TypeScript
+*.tsbuildinfo
+
+# Misc
+*.pem
+
+docker-compose.override.yml
+.claude/docker-compose.override.yml
+.claude/hans/
+
+pnpm-lock.yaml
+yarn.lock
+
+# Fork-specific workflow files (should never be committed)
+DEVELOPMENT_WORKFLOW.md
+check-sync.sh
+# API key files
+data/.api-key
+data/credentials.json
+data/
+.codex/
+
+# GSD planning docs (local-only)
+.planning/
+.mcp.json
+.planning
+.bg-shell/
\ No newline at end of file
diff --git a/temp_repo/.husky/pre-commit b/temp_repo/.husky/pre-commit
new file mode 100644
index 0000000000000000000000000000000000000000..4c156c16804f5d229c0bdf3bee05c12ace9c485c
--- /dev/null
+++ b/temp_repo/.husky/pre-commit
@@ -0,0 +1,63 @@
+#!/usr/bin/env sh
+
+# Try to load nvm if available (optional - works without it too)
+if [ -z "$NVM_DIR" ]; then
+  # Check for Herd's nvm first (macOS with Herd)
+  if [ -s "$HOME/Library/Application Support/Herd/config/nvm/nvm.sh" ]; then
+    export NVM_DIR="$HOME/Library/Application Support/Herd/config/nvm"
+  # Then check standard nvm location
+  elif [ -s "$HOME/.nvm/nvm.sh" ]; then
+    export NVM_DIR="$HOME/.nvm"
+  fi
+fi
+
+# Source nvm if found (silently skip if not available)
+[ -n "$NVM_DIR" ] && [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" 2>/dev/null
+
+# Load node version from .nvmrc if using nvm (silently skip if nvm not available or fails)
+if [ -f .nvmrc ] && command -v nvm >/dev/null 2>&1; then
+  # Check if Unix nvm was sourced (it's a shell function with NVM_DIR set)
+  if [ -n "$NVM_DIR" ] && type nvm 2>/dev/null | grep -q "function"; then
+    # Unix nvm: reads .nvmrc automatically
+    nvm use >/dev/null 2>&1 || true
+  else
+    # nvm-windows: needs explicit version from .nvmrc
+    NODE_VERSION=$(cat .nvmrc | tr -d '[:space:]')
+    if [ -n "$NODE_VERSION" ]; then
+      nvm use "$NODE_VERSION" >/dev/null 2>&1 || true
+    fi
+  fi
+fi
+
+# Ensure common system paths are in PATH (for systems without nvm)
+# This helps find node/npm installed via Homebrew, system packages, etc.
+if [ -n "$WINDIR" ]; then
+  export PATH="$PATH:/c/Program Files/nodejs:/c/Program Files (x86)/nodejs"
+  export PATH="$PATH:$APPDATA/npm:$LOCALAPPDATA/Programs/nodejs"
+else 
+  export PATH="$PATH:/usr/local/bin:/opt/homebrew/bin:/usr/bin"
+fi
+
+# Auto-fix git+ssh:// URLs in package-lock.json if it's being committed
+# This prevents CI failures from SSH URLs that npm introduces for git dependencies
+if git diff --cached --name-only | grep -q "^package-lock.json$"; then
+  if command -v node >/dev/null 2>&1; then
+    if grep -q "git+ssh://" package-lock.json 2>/dev/null; then
+      echo "Fixing git+ssh:// URLs in package-lock.json..."
+      node scripts/fix-lockfile-urls.mjs
+      git add package-lock.json
+    fi
+  fi
+fi
+
+# Run lint-staged - works with or without nvm
+# Prefer npx, fallback to npm exec, both work with system-installed Node.js
+if command -v npx >/dev/null 2>&1; then
+  npx lint-staged
+elif command -v npm >/dev/null 2>&1; then
+  npm exec -- lint-staged
+else
+  echo "Error: Neither npx nor npm found in PATH."
+  echo "Please ensure Node.js is installed (via nvm, Homebrew, system package manager, etc.)"
+  exit 1
+fi
diff --git a/temp_repo/.npmrc b/temp_repo/.npmrc
new file mode 100644
index 0000000000000000000000000000000000000000..86aca125a81766646e00fa7bc871382166525bc5
--- /dev/null
+++ b/temp_repo/.npmrc
@@ -0,0 +1,16 @@
+# Cross-platform compatibility for Tailwind CSS v4 and lightningcss
+# These packages use platform-specific optional dependencies that npm
+# automatically resolves based on your OS (macOS, Linux, Windows, WSL)
+#
+# IMPORTANT: When switching platforms or getting platform mismatch errors:
+# 1. Delete node_modules: rm -rf node_modules apps/*/node_modules
+# 2. Run: npm install
+#
+# In CI/CD: Use "npm install" instead of "npm ci" to allow npm to resolve
+# the correct platform-specific binaries at install time.
+
+# Include bindings for all platforms in package-lock.json to support CI/CD
+# This ensures Linux, macOS, and Windows bindings are all present
+# NOTE: Only enable when regenerating package-lock.json, then comment out to keep installs fast
+# supportedArchitectures.os=linux,darwin,win32
+# supportedArchitectures.cpu=x64,arm64
diff --git a/temp_repo/.nvmrc b/temp_repo/.nvmrc
new file mode 100644
index 0000000000000000000000000000000000000000..42126c0545a2d2bd95d9c05030272464fabb93a3
--- /dev/null
+++ b/temp_repo/.nvmrc
@@ -0,0 +1,2 @@
+22
+
diff --git a/temp_repo/.prettierignore b/temp_repo/.prettierignore
new file mode 100644
index 0000000000000000000000000000000000000000..50ff1306c6aa777c9f4ad1cdcc6d221edaa82e5f
--- /dev/null
+++ b/temp_repo/.prettierignore
@@ -0,0 +1,41 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+dist/
+build/
+out/
+.next/
+.turbo/
+release/
+
+# Automaker
+.automaker/
+
+# Logs
+logs/
+*.log
+
+# Lock files
+package-lock.json
+pnpm-lock.yaml
+
+# Generated files
+*.min.js
+*.min.css
+routeTree.gen.ts
+apps/ui/src/routeTree.gen.ts
+
+# Test artifacts
+test-results/
+coverage/
+playwright-report/
+blob-report/
+
+# IDE/Editor
+.vscode/
+.idea/
+
+# Electron
+dist-electron/
+server-bundle/
diff --git a/temp_repo/.prettierrc b/temp_repo/.prettierrc
new file mode 100644
index 0000000000000000000000000000000000000000..b6b0fde5e3f8b7b7db602b66349f51334b30ca2d
--- /dev/null
+++ b/temp_repo/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}
diff --git a/temp_repo/CLAUDE.md b/temp_repo/CLAUDE.md
new file mode 100644
index 0000000000000000000000000000000000000000..84dd1fbb1e4edefd618ea6a6261f2cf04e18c9af
--- /dev/null
+++ b/temp_repo/CLAUDE.md
@@ -0,0 +1,176 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Automaker is an autonomous AI development studio built as an npm workspace monorepo. It provides a Kanban-based workflow where AI agents (powered by Claude Agent SDK) implement features in isolated git worktrees.
+
+## Common Commands
+
+```bash
+# Development
+npm run dev                 # Interactive launcher (choose web or electron)
+npm run dev:web             # Web browser mode (localhost:3007)
+npm run dev:electron        # Desktop app mode
+npm run dev:electron:debug  # Desktop with DevTools open
+
+# Building
+npm run build               # Build web application
+npm run build:packages      # Build all shared packages (required before other builds)
+npm run build:electron      # Build desktop app for current platform
+npm run build:server        # Build server only
+
+# Testing
+npm run test                # E2E tests (Playwright, headless)
+npm run test:headed         # E2E tests with browser visible
+npm run test:server         # Server unit tests (Vitest)
+npm run test:packages       # All shared package tests
+npm run test:all            # All tests (packages + server)
+
+# Single test file
+npm run test:server -- tests/unit/specific.test.ts
+
+# Linting and formatting
+npm run lint                # ESLint
+npm run format              # Prettier write
+npm run format:check        # Prettier check
+```
+
+## Architecture
+
+### Monorepo Structure
+
+```
+automaker/
+├── apps/
+│   ├── ui/           # React + Vite + Electron frontend (port 3007)
+│   └── server/       # Express + WebSocket backend (port 3008)
+└── libs/             # Shared packages (@automaker/*)
+    ├── types/        # Core TypeScript definitions (no dependencies)
+    ├── utils/        # Logging, errors, image processing, context loading
+    ├── prompts/      # AI prompt templates
+    ├── platform/     # Path management, security, process spawning
+    ├── model-resolver/    # Claude model alias resolution
+    ├── dependency-resolver/  # Feature dependency ordering
+    └── git-utils/    # Git operations & worktree management
+```
+
+### Package Dependency Chain
+
+Packages can only depend on packages above them:
+
+```
+@automaker/types (no dependencies)
+    ↓
+@automaker/utils, @automaker/prompts, @automaker/platform, @automaker/model-resolver, @automaker/dependency-resolver
+    ↓
+@automaker/git-utils
+    ↓
+@automaker/server, @automaker/ui
+```
+
+### Key Technologies
+
+- **Frontend**: React 19, Vite 7, Electron 39, TanStack Router, Zustand 5, Tailwind CSS 4
+- **Backend**: Express 5, WebSocket (ws), Claude Agent SDK, node-pty
+- **Testing**: Playwright (E2E), Vitest (unit)
+
+### Server Architecture
+
+The server (`apps/server/src/`) follows a modular pattern:
+
+- `routes/` - Express route handlers organized by feature (agent, features, auto-mode, worktree, etc.)
+- `services/` - Business logic (AgentService, AutoModeService, FeatureLoader, TerminalService)
+- `providers/` - AI provider abstraction (currently Claude via Claude Agent SDK)
+- `lib/` - Utilities (events, auth, worktree metadata)
+
+### Frontend Architecture
+
+The UI (`apps/ui/src/`) uses:
+
+- `routes/` - TanStack Router file-based routing
+- `components/views/` - Main view components (board, settings, terminal, etc.)
+- `store/` - Zustand stores with persistence (app-store.ts, setup-store.ts)
+- `hooks/` - Custom React hooks
+- `lib/` - Utilities and API client
+
+## Data Storage
+
+### Per-Project Data (`.automaker/`)
+
+```
+.automaker/
+├── features/              # Feature JSON files and images
+│   └── {featureId}/
+│       ├── feature.json
+│       ├── agent-output.md
+│       └── images/
+├── context/               # Context files for AI agents (CLAUDE.md, etc.)
+├── settings.json          # Project-specific settings
+├── spec.md               # Project specification
+└── analysis.json         # Project structure analysis
+```
+
+### Global Data (`DATA_DIR`, default `./data`)
+
+```
+data/
+├── settings.json          # Global settings, profiles, shortcuts
+├── credentials.json       # API keys
+├── sessions-metadata.json # Chat session metadata
+└── agent-sessions/        # Conversation histories
+```
+
+## Import Conventions
+
+Always import from shared packages, never from old paths:
+
+```typescript
+// ✅ Correct
+import type { Feature, ExecuteOptions } from '@automaker/types';
+import { createLogger, classifyError } from '@automaker/utils';
+import { getEnhancementPrompt } from '@automaker/prompts';
+import { getFeatureDir, ensureAutomakerDir } from '@automaker/platform';
+import { resolveModelString } from '@automaker/model-resolver';
+import { resolveDependencies } from '@automaker/dependency-resolver';
+import { getGitRepositoryDiffs } from '@automaker/git-utils';
+
+// ❌ Never import from old paths
+import { Feature } from '../services/feature-loader'; // Wrong
+import { createLogger } from '../lib/logger'; // Wrong
+```
+
+## Key Patterns
+
+### Event-Driven Architecture
+
+All server operations emit events that stream to the frontend via WebSocket. Events are created using `createEventEmitter()` from `lib/events.ts`.
+
+### Git Worktree Isolation
+
+Each feature executes in an isolated git worktree, created via `@automaker/git-utils`. This protects the main branch during AI agent execution.
+
+### Context Files
+
+Project-specific rules are stored in `.automaker/context/` and automatically loaded into agent prompts via `loadContextFiles()` from `@automaker/utils`.
+
+### Model Resolution
+
+Use `resolveModelString()` from `@automaker/model-resolver` to convert model aliases:
+
+- `haiku` → `claude-haiku-4-5`
+- `sonnet` → `claude-sonnet-4-20250514`
+- `opus` → `claude-opus-4-6`
+
+## Environment Variables
+
+- `ANTHROPIC_API_KEY` - Anthropic API key (or use Claude Code CLI auth)
+- `HOST` - Host to bind server to (default: 0.0.0.0)
+- `HOSTNAME` - Hostname for user-facing URLs (default: localhost)
+- `PORT` - Server port (default: 3008)
+- `DATA_DIR` - Data storage directory (default: ./data)
+- `ALLOWED_ROOT_DIRECTORY` - Restrict file operations to specific directory
+- `AUTOMAKER_MOCK_AGENT=true` - Enable mock agent mode for CI testing
+- `AUTOMAKER_AUTO_LOGIN=true` - Skip login prompt in development (disabled when NODE_ENV=production)
+- `VITE_HOSTNAME` - Hostname for frontend API URLs (default: localhost)
diff --git a/temp_repo/CONTRIBUTING.md b/temp_repo/CONTRIBUTING.md
new file mode 100644
index 0000000000000000000000000000000000000000..61ad83f43b10cd531a1cf25826761fa2de721a6c
--- /dev/null
+++ b/temp_repo/CONTRIBUTING.md
@@ -0,0 +1,740 @@
+# Contributing to Automaker
+
+Thank you for your interest in contributing to Automaker! We're excited to have you join our community of developers building the future of autonomous AI development.
+
+Automaker is an autonomous AI development studio that provides a Kanban-based workflow where AI agents implement features in isolated git worktrees. Whether you're fixing bugs, adding features, improving documentation, or suggesting ideas, your contributions help make this project better for everyone.
+
+This guide will help you get started with contributing to Automaker. Please take a moment to read through these guidelines to ensure a smooth contribution process.
+
+## Contribution License Agreement
+
+**Important:** By submitting, pushing, or contributing any code, documentation, pull requests, issues, or other materials to the Automaker project, you agree to assign all right, title, and interest in and to your contributions, including all copyrights, patents, and other intellectual property rights, to the Core Contributors of Automaker. This assignment is irrevocable and includes the right to use, modify, distribute, and monetize your contributions in any manner.
+
+**You understand and agree that you will have no right to receive any royalties, compensation, or other financial benefits from any revenue, income, or commercial use generated from your contributed code or any derivative works thereof.** All contributions are made without expectation of payment or financial return.
+
+For complete details on contribution terms and rights assignment, please review [Section 5 (CONTRIBUTIONS AND RIGHTS ASSIGNMENT) of the LICENSE](LICENSE#5-contributions-and-rights-assignment).
+
+## Table of Contents
+
+- [Contributing to Automaker](#contributing-to-automaker)
+  - [Table of Contents](#table-of-contents)
+  - [Getting Started](#getting-started)
+    - [Prerequisites](#prerequisites)
+    - [Fork and Clone](#fork-and-clone)
+    - [Development Setup](#development-setup)
+    - [Project Structure](#project-structure)
+  - [Pull Request Process](#pull-request-process)
+    - [Branching Strategy (RC Branches)](#branching-strategy-rc-branches)
+    - [Branch Naming Convention](#branch-naming-convention)
+    - [Commit Message Format](#commit-message-format)
+    - [Submitting a Pull Request](#submitting-a-pull-request)
+      - [1. Prepare Your Changes](#1-prepare-your-changes)
+      - [2. Run Pre-submission Checks](#2-run-pre-submission-checks)
+      - [3. Push Your Changes](#3-push-your-changes)
+      - [4. Open a Pull Request](#4-open-a-pull-request)
+      - [PR Requirements Checklist](#pr-requirements-checklist)
+    - [Review Process](#review-process)
+      - [What to Expect](#what-to-expect)
+      - [Review Focus Areas](#review-focus-areas)
+      - [Responding to Feedback](#responding-to-feedback)
+      - [Approval Criteria](#approval-criteria)
+      - [Getting Help](#getting-help)
+  - [Code Style Guidelines](#code-style-guidelines)
+  - [Testing Requirements](#testing-requirements)
+    - [Running Tests](#running-tests)
+    - [Test Frameworks](#test-frameworks)
+      - [End-to-End Tests (Playwright)](#end-to-end-tests-playwright)
+      - [Unit Tests (Vitest)](#unit-tests-vitest)
+    - [Writing Tests](#writing-tests)
+      - [When to Write Tests](#when-to-write-tests)
+    - [CI/CD Pipeline](#cicd-pipeline)
+      - [CI Checks](#ci-checks)
+      - [CI Testing Environment](#ci-testing-environment)
+      - [Viewing CI Results](#viewing-ci-results)
+      - [Common CI Failures](#common-ci-failures)
+    - [Coverage Requirements](#coverage-requirements)
+  - [Issue Reporting](#issue-reporting)
+    - [Bug Reports](#bug-reports)
+      - [Before Reporting](#before-reporting)
+      - [Bug Report Template](#bug-report-template)
+    - [Feature Requests](#feature-requests)
+      - [Before Requesting](#before-requesting)
+      - [Feature Request Template](#feature-request-template)
+    - [Security Issues](#security-issues)
+
+---
+
+## Getting Started
+
+### Prerequisites
+
+Before contributing to Automaker, ensure you have the following installed on your system:
+
+- **Node.js 18+** (tested with Node.js 22)
+  - Download from [nodejs.org](https://nodejs.org/)
+  - Verify installation: `node --version`
+- **npm** (comes with Node.js)
+  - Verify installation: `npm --version`
+- **Git** for version control
+  - Verify installation: `git --version`
+- **Claude Code CLI** or **Anthropic API Key** (for AI agent functionality)
+  - Required to run the AI development features
+
+**Optional but recommended:**
+
+- A code editor with TypeScript support (VS Code recommended)
+- GitHub CLI (`gh`) for easier PR management
+
+### Fork and Clone
+
+1. **Fork the repository** on GitHub
+   - Navigate to [https://github.com/AutoMaker-Org/automaker](https://github.com/AutoMaker-Org/automaker)
+   - Click the "Fork" button in the top-right corner
+   - This creates your own copy of the repository
+
+2. **Clone your fork locally**
+
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/automaker.git
+   cd automaker
+   ```
+
+3. **Add the upstream remote** to keep your fork in sync
+
+   ```bash
+   git remote add upstream https://github.com/AutoMaker-Org/automaker.git
+   ```
+
+4. **Verify remotes**
+   ```bash
+   git remote -v
+   # Should show:
+   # origin    https://github.com/YOUR_USERNAME/automaker.git (fetch)
+   # origin    https://github.com/YOUR_USERNAME/automaker.git (push)
+   # upstream  https://github.com/AutoMaker-Org/automaker.git (fetch)
+   # upstream  https://github.com/AutoMaker-Org/automaker.git (push)
+   ```
+
+### Development Setup
+
+1. **Install dependencies**
+
+   ```bash
+   npm install
+   ```
+
+2. **Build shared packages** (required before running the app)
+
+   ```bash
+   npm run build:packages
+   ```
+
+3. **Start the development server**
+   ```bash
+   npm run dev          # Interactive launcher - choose mode
+   npm run dev:web      # Browser mode (web interface)
+   npm run dev:electron # Desktop app mode
+   ```
+
+**Common development commands:**
+
+| Command                  | Description                      |
+| ------------------------ | -------------------------------- |
+| `npm run dev`            | Interactive development launcher |
+| `npm run dev:web`        | Start in browser mode            |
+| `npm run dev:electron`   | Start desktop app                |
+| `npm run build`          | Build all packages and apps      |
+| `npm run build:packages` | Build shared packages only       |
+| `npm run lint`           | Run ESLint checks                |
+| `npm run format`         | Format code with Prettier        |
+| `npm run format:check`   | Check formatting without changes |
+| `npm run test`           | Run E2E tests (Playwright)       |
+| `npm run test:server`    | Run server unit tests            |
+| `npm run test:packages`  | Run package tests                |
+| `npm run test:all`       | Run all tests                    |
+
+### Project Structure
+
+Automaker is organized as an npm workspace monorepo:
+
+```
+automaker/
+├── apps/
+│   ├── ui/              # React + Vite + Electron frontend
+│   └── server/          # Express + WebSocket backend
+├── libs/
+│   ├── @automaker/types/            # Shared TypeScript types
+│   ├── @automaker/utils/            # Utility functions
+│   ├── @automaker/prompts/          # AI prompt templates
+│   ├── @automaker/platform/         # Platform abstractions
+│   ├── @automaker/model-resolver/   # AI model resolution
+│   ├── @automaker/dependency-resolver/ # Dependency management
+│   └── @automaker/git-utils/        # Git operations
+├── docs/                # Documentation
+└── package.json         # Root package configuration
+```
+
+**Key conventions:**
+
+- Always import from `@automaker/*` shared packages, never use relative paths to `libs/`
+- Frontend code lives in `apps/ui/`
+- Backend code lives in `apps/server/`
+- Shared logic should be in the appropriate `libs/` package
+
+---
+
+## Pull Request Process
+
+This section covers everything you need to know about contributing changes through pull requests, from creating your branch to getting your code merged.
+
+### Branching Strategy (RC Branches)
+
+Automaker uses **Release Candidate (RC) branches** for all development work. Understanding this workflow is essential before contributing.
+
+**How it works:**
+
+1. **All development happens on RC branches** - We maintain version-specific RC branches (e.g., `v0.10.0rc`, `v0.11.0rc`) where all active development occurs
+2. **RC branches are eventually merged to main** - Once an RC branch is stable and ready for release, it gets merged into `main`
+3. **Main branch is for releases only** - The `main` branch contains only released, stable code
+
+**Before creating a PR:**
+
+1. **Check for the latest RC branch** - Before starting work, check the repository for the current RC branch:
+
+   ```bash
+   git fetch upstream
+   git branch -r | grep rc
+   ```
+
+2. **Base your work on the RC branch** - Create your feature branch from the latest RC branch, not from `main`:
+
+   ```bash
+   # Find the latest RC branch (e.g., v0.11.0rc)
+   git checkout upstream/v0.11.0rc
+   git checkout -b feature/your-feature-name
+   ```
+
+3. **Target the RC branch in your PR** - When opening your pull request, set the base branch to the current RC branch, not `main`
+
+**Example workflow:**
+
+```bash
+# 1. Fetch latest changes
+git fetch upstream
+
+# 2. Check for RC branches
+git branch -r | grep rc
+# Output: upstream/v0.11.0rc
+
+# 3. Create your branch from the RC
+git checkout -b feature/add-dark-mode upstream/v0.11.0rc
+
+# 4. Make your changes and commit
+git commit -m "feat: Add dark mode support"
+
+# 5. Push to your fork
+git push origin feature/add-dark-mode
+
+# 6. Open PR targeting the RC branch (v0.11.0rc), NOT main
+```
+
+**Important:** PRs opened directly against `main` will be asked to retarget to the current RC branch.
+
+### Branch Naming Convention
+
+We use a consistent branch naming pattern to keep our repository organized:
+
+```
+<type>/<description>
+```
+
+**Branch types:**
+
+| Type       | Purpose                  | Example                           |
+| ---------- | ------------------------ | --------------------------------- |
+| `feature`  | New functionality        | `feature/add-user-authentication` |
+| `fix`      | Bug fixes                | `fix/resolve-memory-leak`         |
+| `docs`     | Documentation changes    | `docs/update-contributing-guide`  |
+| `refactor` | Code restructuring       | `refactor/simplify-api-handlers`  |
+| `test`     | Adding or updating tests | `test/add-utils-unit-tests`       |
+| `chore`    | Maintenance tasks        | `chore/update-dependencies`       |
+
+**Guidelines:**
+
+- Use lowercase letters and hyphens (no underscores or spaces)
+- Keep descriptions short but descriptive
+- Include issue number when applicable: `feature/123-add-login`
+
+```bash
+# Create and checkout a new feature branch
+git checkout -b feature/add-dark-mode
+
+# Create a fix branch with issue reference
+git checkout -b fix/456-resolve-login-error
+```
+
+### Commit Message Format
+
+We follow the **Conventional Commits** style for clear, readable commit history:
+
+```
+<type>: <description>
+
+[optional body]
+```
+
+**Commit types:**
+
+| Type       | Purpose                     |
+| ---------- | --------------------------- |
+| `feat`     | New feature                 |
+| `fix`      | Bug fix                     |
+| `docs`     | Documentation only          |
+| `style`    | Formatting (no code change) |
+| `refactor` | Code restructuring          |
+| `test`     | Adding or updating tests    |
+| `chore`    | Maintenance tasks           |
+
+**Guidelines:**
+
+- Use **imperative mood** ("Add feature" not "Added feature")
+- Keep first line under **72 characters**
+- Capitalize the first letter after the type prefix
+- No period at the end of the subject line
+- Add a blank line before the body for detailed explanations
+
+**Examples:**
+
+```bash
+# Simple commit
+git commit -m "feat: Add user authentication flow"
+
+# Commit with body for more context
+git commit -m "fix: Resolve memory leak in WebSocket handler
+
+The connection cleanup was not being called when clients
+disconnected unexpectedly. Added proper cleanup in the
+error handler to prevent memory accumulation."
+
+# Documentation update
+git commit -m "docs: Update API documentation"
+
+# Refactoring
+git commit -m "refactor: Simplify state management logic"
+```
+
+### Submitting a Pull Request
+
+Follow these steps to submit your contribution:
+
+#### 1. Prepare Your Changes
+
+Ensure you've synced with the latest upstream changes from the RC branch:
+
+```bash
+# Fetch latest changes from upstream
+git fetch upstream
+
+# Rebase your branch on the current RC branch (if needed)
+git rebase upstream/v0.11.0rc  # Use the current RC branch name
+```
+
+#### 2. Run Pre-submission Checks
+
+Before opening your PR, verify everything passes locally:
+
+```bash
+# Run all tests
+npm run test:all
+
+# Check formatting
+npm run format:check
+
+# Run linter
+npm run lint
+
+# Build to verify no compile errors
+npm run build
+```
+
+#### 3. Push Your Changes
+
+```bash
+# Push your branch to your fork
+git push origin feature/your-feature-name
+```
+
+#### 4. Open a Pull Request
+
+1. Go to your fork on GitHub
+2. Click "Compare & pull request" for your branch
+3. **Important:** Set the base repository to `AutoMaker-Org/automaker` and the base branch to the **current RC branch** (e.g., `v0.11.0rc`), not `main`
+4. Fill out the PR template completely
+
+#### PR Requirements Checklist
+
+Your PR should include:
+
+- [ ] **Targets the current RC branch** (not `main`) - see [Branching Strategy](#branching-strategy-rc-branches)
+- [ ] **Clear title** describing the change (use conventional commit format)
+- [ ] **Description** explaining what changed and why
+- [ ] **Link to related issue** (if applicable): `Closes #123` or `Fixes #456`
+- [ ] **All CI checks passing** (format, lint, build, tests)
+- [ ] **No merge conflicts** with the RC branch
+- [ ] **Tests included** for new functionality
+- [ ] **Documentation updated** if adding/changing public APIs
+
+**Example PR Description:**
+
+```markdown
+## Summary
+
+This PR adds dark mode support to the Automaker UI.
+
+- Implements theme toggle in settings panel
+- Adds CSS custom properties for theme colors
+- Persists theme preference to localStorage
+
+## Related Issue
+
+Closes #123
+
+## Testing
+
+- [x] Tested toggle functionality in Chrome and Firefox
+- [x] Verified theme persists across page reloads
+- [x] Checked accessibility contrast ratios
+
+## Screenshots
+
+[Include before/after screenshots for UI changes]
+```
+
+### Review Process
+
+All contributions go through code review to maintain quality:
+
+#### What to Expect
+
+1. **CI Checks Run First** - Automated checks (format, lint, build, tests) must pass before review
+2. **Maintainer Review** - The project maintainers will review your PR and decide whether to merge it
+3. **Feedback & Discussion** - The reviewer may ask questions or request changes
+4. **Iteration** - Make requested changes and push updates to the same branch
+5. **Approval & Merge** - Once approved and checks pass, your PR will be merged
+
+#### Review Focus Areas
+
+The reviewer checks for:
+
+- **Correctness** - Does the code work as intended?
+- **Clean Code** - Does it follow our [code style guidelines](#code-style-guidelines)?
+- **Test Coverage** - Are new features properly tested?
+- **Documentation** - Are public APIs documented?
+- **Breaking Changes** - Are any breaking changes discussed first?
+
+#### Responding to Feedback
+
+- Respond to **all** review comments, even if just to acknowledge
+- Ask questions if feedback is unclear
+- Push additional commits to address feedback (don't force-push during review)
+- Mark conversations as resolved once addressed
+
+#### Approval Criteria
+
+Your PR is ready to merge when:
+
+- ✅ All CI checks pass
+- ✅ The maintainer has approved the changes
+- ✅ All review comments are addressed
+- ✅ No unresolved merge conflicts
+
+#### Getting Help
+
+If your PR seems stuck:
+
+- Comment asking for status update (mention @webdevcody if needed)
+- Reach out on [Discord](https://discord.gg/jjem7aEDKU)
+- Make sure all checks are passing and you've responded to all feedback
+
+---
+
+## Code Style Guidelines
+
+Automaker uses automated tooling to enforce code style. Run `npm run format` to format code and `npm run lint` to check for issues. Pre-commit hooks automatically format staged files before committing.
+
+---
+
+## Testing Requirements
+
+Testing helps prevent regressions. Automaker uses **Playwright** for end-to-end testing and **Vitest** for unit tests.
+
+### Running Tests
+
+Use these commands to run tests locally:
+
+| Command                        | Description                           |
+| ------------------------------ | ------------------------------------- |
+| `npm run test`                 | Run E2E tests (Playwright)            |
+| `npm run test:server`          | Run server unit tests (Vitest)        |
+| `npm run test:packages`        | Run shared package tests              |
+| `npm run test:all`             | Run all tests                         |
+| `npm run test:server:coverage` | Run server tests with coverage report |
+
+**Before submitting a PR**, always run the full test suite:
+
+```bash
+npm run test:all
+```
+
+### Test Frameworks
+
+#### End-to-End Tests (Playwright)
+
+E2E tests verify the entire application works correctly from a user's perspective.
+
+- **Framework:** [Playwright](https://playwright.dev/)
+- **Location:** `e2e/` directory
+- **Test ports:** UI on port 3007, Server on port 3008
+
+**Running E2E tests:**
+
+```bash
+# Run all E2E tests
+npm run test
+
+# Run with headed browser (useful for debugging)
+npx playwright test --headed
+
+# Run a specific test file
+npm test --workspace=@automaker/ui -- tests/example.spec.ts
+```
+
+**E2E Test Guidelines:**
+
+- Write tests from a user's perspective
+- Use descriptive test names that explain the scenario
+- Clean up test data after each test
+- Use appropriate timeouts for async operations
+- Prefer `locator` over direct selectors for resilience
+
+#### Unit Tests (Vitest)
+
+Unit tests verify individual functions and modules work correctly in isolation.
+
+- **Framework:** [Vitest](https://vitest.dev/)
+- **Location:** In the `tests/` directory within each package (e.g., `apps/server/tests/`)
+
+**Running unit tests:**
+
+```bash
+# Run all server unit tests
+npm run test:server
+
+# Run with coverage report
+npm run test:server:coverage
+
+# Run package tests
+npm run test:packages
+
+# Run in watch mode during development
+npx vitest --watch
+```
+
+**Unit Test Guidelines:**
+
+- Keep tests small and focused on one behavior
+- Use descriptive test names: `it('should return null when user is not found')`
+- Follow the AAA pattern: Arrange, Act, Assert
+- Mock external dependencies to isolate the unit under test
+- Aim for meaningful coverage, not just line coverage
+
+### Writing Tests
+
+#### When to Write Tests
+
+- **New features:** All new features should include tests
+- **Bug fixes:** Add a test that reproduces the bug before fixing
+- **Refactoring:** Ensure existing tests pass after refactoring
+- **Public APIs:** All public APIs must have test coverage
+
+### CI/CD Pipeline
+
+Automaker uses **GitHub Actions** for continuous integration. Every pull request triggers automated checks.
+
+#### CI Checks
+
+The following checks must pass before your PR can be merged:
+
+| Check             | Description                                   |
+| ----------------- | --------------------------------------------- |
+| **Format**        | Verifies code is formatted with Prettier      |
+| **Build**         | Ensures the project compiles without errors   |
+| **Package Tests** | Runs tests for shared `@automaker/*` packages |
+| **Server Tests**  | Runs server unit tests with coverage          |
+
+#### CI Testing Environment
+
+For CI environments, Automaker supports a mock agent mode:
+
+```bash
+# Enable mock agent mode for CI testing
+AUTOMAKER_MOCK_AGENT=true npm run test
+```
+
+This allows tests to run without requiring a real Claude API connection.
+
+#### Viewing CI Results
+
+1. Go to your PR on GitHub
+2. Scroll to the "Checks" section at the bottom
+3. Click on any failed check to see detailed logs
+4. Fix issues locally and push updates
+
+#### Common CI Failures
+
+| Issue               | Solution                                      |
+| ------------------- | --------------------------------------------- |
+| Format check failed | Run `npm run format` locally                  |
+| Build failed        | Run `npm run build` and fix TypeScript errors |
+| Tests failed        | Run `npm run test:all` locally to reproduce   |
+| Coverage decreased  | Add tests for new code paths                  |
+
+### Coverage Requirements
+
+While we don't enforce strict coverage percentages, we expect:
+
+- **New features:** Should include comprehensive tests
+- **Bug fixes:** Should include a regression test
+- **Critical paths:** Must have test coverage (authentication, data persistence, etc.)
+
+To view coverage reports locally:
+
+```bash
+npm run test:server:coverage
+```
+
+This generates an HTML report you can open in your browser to see which lines are covered.
+
+---
+
+## Issue Reporting
+
+Found a bug or have an idea for a new feature? We'd love to hear from you! This section explains how to report issues effectively.
+
+### Bug Reports
+
+When reporting a bug, please provide as much information as possible to help us understand and reproduce the issue.
+
+#### Before Reporting
+
+1. **Search existing issues** - Check if the bug has already been reported
+2. **Try the latest version** - Make sure you're running the latest version of Automaker
+3. **Reproduce the issue** - Verify you can consistently reproduce the bug
+
+#### Bug Report Template
+
+When creating a bug report, include:
+
+- **Title:** A clear, descriptive title summarizing the issue
+- **Environment:**
+  - Operating System and version
+  - Node.js version (`node --version`)
+  - Automaker version or commit hash
+- **Steps to Reproduce:** Numbered list of steps to reproduce the bug
+- **Expected Behavior:** What you expected to happen
+- **Actual Behavior:** What actually happened
+- **Logs/Screenshots:** Any relevant error messages, console output, or screenshots
+
+**Example Bug Report:**
+
+```markdown
+## Bug: WebSocket connection drops after 5 minutes of inactivity
+
+### Environment
+
+- OS: Windows 11
+- Node.js: 22.11.0
+- Automaker: commit abc1234
+
+### Steps to Reproduce
+
+1. Start the application with `npm run dev:web`
+2. Open the Kanban board
+3. Leave the browser tab open for 5+ minutes without interaction
+4. Try to move a card
+
+### Expected Behavior
+
+The card should move to the new column.
+
+### Actual Behavior
+
+The UI shows "Connection lost" and the card doesn't move.
+
+### Logs
+
+[WebSocket] Connection closed: 1006
+```
+
+### Feature Requests
+
+We welcome ideas for improving Automaker! Here's how to submit a feature request:
+
+#### Before Requesting
+
+1. **Check existing issues** - Your idea may already be proposed or in development
+2. **Consider scope** - Think about whether the feature fits Automaker's mission as an autonomous AI development studio
+
+#### Feature Request Template
+
+A good feature request includes:
+
+- **Title:** A brief, descriptive title
+- **Problem Statement:** What problem does this feature solve?
+- **Proposed Solution:** How do you envision this working?
+- **Alternatives Considered:** What other approaches did you consider?
+- **Additional Context:** Mockups, examples, or references that help explain your idea
+
+**Example Feature Request:**
+
+```markdown
+## Feature: Dark Mode Support
+
+### Problem Statement
+
+Working late at night, the bright UI causes eye strain and doesn't match
+my system's dark theme preference.
+
+### Proposed Solution
+
+Add a theme toggle in the settings panel that allows switching between
+light and dark modes. Ideally, it should also detect system preference.
+
+### Alternatives Considered
+
+- Browser extension to force dark mode (doesn't work well with custom styling)
+- Custom CSS override (breaks with updates)
+
+### Additional Context
+
+Similar to how VS Code handles themes - a dropdown in settings with
+immediate preview.
+```
+
+### Security Issues
+
+**Important:** If you discover a security vulnerability, please do NOT open a public issue. Instead:
+
+1. Join our [Discord server](https://discord.gg/jjem7aEDKU) and send a direct message to the user `@webdevcody`
+2. Include detailed steps to reproduce
+3. Allow time for us to address the issue before public disclosure
+
+We take security seriously and appreciate responsible disclosure.
+
+---
+
+For license and contribution terms, see the [LICENSE](LICENSE) file in the repository root and the [README.md](README.md#license) for more details.
+
+---
+
+Thank you for contributing to Automaker!
diff --git a/temp_repo/DISCLAIMER.md b/temp_repo/DISCLAIMER.md
new file mode 100644
index 0000000000000000000000000000000000000000..95ef7d16820e020c7c3ac550a1d28ea51acc4f88
--- /dev/null
+++ b/temp_repo/DISCLAIMER.md
@@ -0,0 +1,85 @@
+# Security Disclaimer
+
+## Important Warning
+
+**Automaker uses AI-powered tooling that has access to your operating system and can read, modify, and delete files. Use at your own risk.**
+
+## Risk Assessment
+
+This software utilizes AI agents (such as Claude) that can:
+
+- **Read files** from your file system
+- **Write and modify files** in your projects
+- **Delete files** when instructed
+- **Execute commands** on your operating system
+- **Access environment variables** and configuration files
+
+While we have made efforts to review this codebase for security vulnerabilities and implement safeguards, **you assume all risk** when running this software.
+
+## Recommendations
+
+### 1. Review the Code First
+
+Before running Automaker, we strongly recommend reviewing the source code yourself to understand what operations it performs and ensure you are comfortable with its behavior.
+
+### 2. Use Sandboxing (Highly Recommended)
+
+**We do not recommend running Automaker directly on your local computer** due to the risk of AI agents having access to your entire file system. Instead, consider:
+
+- **Docker**: Run Automaker in a Docker container to isolate it from your host system
+- **Virtual Machine**: Use a VM (such as VirtualBox, VMware, or Parallels) to create an isolated environment
+- **Cloud Development Environment**: Use a cloud-based development environment that provides isolation
+
+#### Running in Isolated Docker Container
+
+For maximum security, run Automaker in an isolated Docker container that **cannot access your laptop's files**:
+
+```bash
+# 1. Set your API key (bash/Linux/Mac - creates UTF-8 file)
+echo "ANTHROPIC_API_KEY=your-api-key-here" > .env
+
+# On Windows PowerShell, use instead:
+Set-Content -Path .env -Value "ANTHROPIC_API_KEY=your-api-key-here" -Encoding UTF8
+
+# 2. Build and run isolated container
+docker-compose up -d
+
+# 3. Access the UI at http://localhost:3007
+#    API at http://localhost:3008/api/health
+```
+
+The container uses only Docker-managed volumes and has no access to your host filesystem. See [docker-isolation.md](docs/docker-isolation.md) for full documentation.
+
+### 3. Limit Access
+
+If you must run locally:
+
+- Create a dedicated user account with limited permissions
+- Only grant access to specific project directories
+- Avoid running with administrator/root privileges
+- Keep sensitive files and credentials outside of project directories
+
+### 4. Monitor Activity
+
+- Review the agent's actions in the output logs
+- Pay attention to file modifications and command executions
+- Stop the agent immediately if you notice unexpected behavior
+
+## No Warranty & Limitation of Liability
+
+THE SOFTWARE UTILIZES ARTIFICIAL INTELLIGENCE TO GENERATE CODE, EXECUTE COMMANDS, AND INTERACT WITH YOUR FILE SYSTEM. YOU ACKNOWLEDGE THAT AI SYSTEMS CAN BE UNPREDICTABLE, MAY GENERATE INCORRECT, INSECURE, OR DESTRUCTIVE CODE, AND MAY TAKE ACTIONS THAT COULD DAMAGE YOUR SYSTEM, FILES, OR HARDWARE.
+
+This software is provided "as is", without warranty of any kind, express or implied. In no event shall the authors or copyright holders be liable for any claim, damages, or other liability, including but not limited to hardware damage, data loss, financial loss, or business interruption, whether in an action of contract, tort, or otherwise, arising from, out of, or in connection with the software or the use or other dealings in the software.
+
+## Acknowledgment
+
+By using Automaker, you acknowledge that:
+
+1. You have read and understood this disclaimer
+2. You accept full responsibility for any consequences of using this software
+3. You understand the risks of AI agents having access to your operating system
+4. You agree to take appropriate precautions as outlined above
+
+---
+
+**If you are not comfortable with these risks, do not use this software.**
diff --git a/temp_repo/Dockerfile b/temp_repo/Dockerfile
new file mode 100644
index 0000000000000000000000000000000000000000..7d48e15fe16aa6737cde3fb4437a0e576b7dc119
--- /dev/null
+++ b/temp_repo/Dockerfile
@@ -0,0 +1,237 @@
+# Automaker Multi-Stage Dockerfile
+# Single Dockerfile for both server and UI builds
+# Usage:
+#   docker build --target server -t automaker-server .
+#   docker build --target ui -t automaker-ui .
+# Or use docker-compose which selects targets automatically
+
+# =============================================================================
+# BASE STAGE - Common setup for all builds (DRY: defined once, used by all)
+# =============================================================================
+FROM node:22-slim AS base
+
+# Install build dependencies for native modules (node-pty)
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    python3 make g++ \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Copy root package files
+COPY package*.json ./
+
+# Copy all libs package.json files (centralized - add new libs here)
+COPY libs/types/package*.json ./libs/types/
+COPY libs/utils/package*.json ./libs/utils/
+COPY libs/prompts/package*.json ./libs/prompts/
+COPY libs/platform/package*.json ./libs/platform/
+COPY libs/spec-parser/package*.json ./libs/spec-parser/
+COPY libs/model-resolver/package*.json ./libs/model-resolver/
+COPY libs/dependency-resolver/package*.json ./libs/dependency-resolver/
+COPY libs/git-utils/package*.json ./libs/git-utils/
+COPY libs/spec-parser/package*.json ./libs/spec-parser/
+
+# Copy scripts (needed by npm workspace)
+COPY scripts ./scripts
+
+# =============================================================================
+# SERVER BUILD STAGE
+# =============================================================================
+FROM base AS server-builder
+
+# Copy server-specific package.json
+COPY apps/server/package*.json ./apps/server/
+
+# Install dependencies (--ignore-scripts to skip husky/prepare, then rebuild native modules)
+RUN npm ci --ignore-scripts && npm rebuild node-pty
+
+# Copy all source files
+COPY libs ./libs
+COPY apps/server ./apps/server
+
+# Build packages in dependency order, then build server
+RUN npm run build:packages && npm run build --workspace=apps/server
+
+# =============================================================================
+# SERVER PRODUCTION STAGE
+# =============================================================================
+FROM node:22-slim AS server
+
+# Build argument for tracking which commit this image was built from
+ARG GIT_COMMIT_SHA=unknown
+LABEL automaker.git.commit.sha="${GIT_COMMIT_SHA}"
+
+# Build arguments for user ID matching (allows matching host user for mounted volumes)
+# Override at build time: docker build --build-arg UID=$(id -u) --build-arg GID=$(id -g) ...
+ARG UID=1001
+ARG GID=1001
+
+# Install git, curl, bash (for terminal), gosu (for user switching), and GitHub CLI (pinned version, multi-arch)
+# Also install Playwright/Chromium system dependencies (aligns with playwright install-deps on Debian/Ubuntu)
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git curl bash gosu ca-certificates openssh-client \
+    # Playwright/Chromium dependencies
+    libglib2.0-0 libnss3 libnspr4 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 \
+    libcups2 libdrm2 libxkbcommon0 libatspi2.0-0 libxcomposite1 libxdamage1 \
+    libxfixes3 libxrandr2 libgbm1 libasound2 libpango-1.0-0 libcairo2 \
+    libx11-6 libx11-xcb1 libxcb1 libxext6 libxrender1 libxss1 libxtst6 \
+    libxshmfence1 libgtk-3-0 libexpat1 libfontconfig1 fonts-liberation \
+    xdg-utils libpangocairo-1.0-0 libpangoft2-1.0-0 libu2f-udev libvulkan1 \
+    && GH_VERSION="2.63.2" \
+    && ARCH=$(uname -m) \
+    && case "$ARCH" in \
+        x86_64) GH_ARCH="amd64" ;; \
+        aarch64|arm64) GH_ARCH="arm64" ;; \
+        *) echo "Unsupported architecture: $ARCH" && exit 1 ;; \
+    esac \
+    && curl -L "https://github.com/cli/cli/releases/download/v${GH_VERSION}/gh_${GH_VERSION}_linux_${GH_ARCH}.tar.gz" -o gh.tar.gz \
+    && tar -xzf gh.tar.gz \
+    && mv gh_${GH_VERSION}_linux_${GH_ARCH}/bin/gh /usr/local/bin/gh \
+    && rm -rf gh.tar.gz gh_${GH_VERSION}_linux_${GH_ARCH} \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Claude CLI globally (available to all users via npm global bin)
+RUN npm install -g @anthropic-ai/claude-code
+
+# Create non-root user with home directory BEFORE installing Cursor CLI
+# Uses UID/GID build args to match host user for mounted volume permissions
+# Use -o flag to allow non-unique IDs (GID 1000 may already exist as 'node' group)
+RUN groupadd -o -g ${GID} automaker && \
+    useradd -o -u ${UID} -g automaker -m -d /home/automaker -s /bin/bash automaker && \
+    mkdir -p /home/automaker/.local/bin && \
+    mkdir -p /home/automaker/.cursor && \
+    chown -R automaker:automaker /home/automaker && \
+    chmod 700 /home/automaker/.cursor
+
+# Install Cursor CLI as the automaker user
+# Set HOME explicitly and install to /home/automaker/.local/bin/
+USER automaker
+ENV HOME=/home/automaker
+RUN curl https://cursor.com/install -fsS | bash && \
+    echo "=== Checking Cursor CLI installation ===" && \
+    ls -la /home/automaker/.local/bin/ && \
+    echo "=== PATH is: $PATH ===" && \
+    (which cursor-agent && cursor-agent --version) || echo "cursor-agent installed (may need auth setup)"
+
+# Install OpenCode CLI (for multi-provider AI model access)
+RUN curl -fsSL https://opencode.ai/install | bash && \
+    echo "=== Checking OpenCode CLI installation ===" && \
+    ls -la /home/automaker/.local/bin/ && \
+    (which opencode && opencode --version) || echo "opencode installed (may need auth setup)"
+
+USER root
+
+# Add PATH to profile so it's available in all interactive shells (for login shells)
+RUN mkdir -p /etc/profile.d && \
+    echo 'export PATH="/home/automaker/.local/bin:$PATH"' > /etc/profile.d/cursor-cli.sh && \
+    chmod +x /etc/profile.d/cursor-cli.sh
+
+# Add to automaker's .bashrc for bash interactive shells
+RUN echo 'export PATH="/home/automaker/.local/bin:$PATH"' >> /home/automaker/.bashrc && \
+    chown automaker:automaker /home/automaker/.bashrc
+
+# Also add to root's .bashrc since docker exec defaults to root
+RUN echo 'export PATH="/home/automaker/.local/bin:$PATH"' >> /root/.bashrc
+
+WORKDIR /app
+
+# Copy root package.json (needed for workspace resolution)
+COPY --from=server-builder /app/package*.json ./
+
+# Copy built libs (workspace packages are symlinked in node_modules)
+COPY --from=server-builder /app/libs ./libs
+
+# Copy built server
+COPY --from=server-builder /app/apps/server/dist ./apps/server/dist
+COPY --from=server-builder /app/apps/server/package*.json ./apps/server/
+
+# Copy node_modules (includes symlinks to libs)
+COPY --from=server-builder /app/node_modules ./node_modules
+
+# Install Playwright Chromium browser for AI agent verification tests
+# This adds ~300MB to the image but enables automated testing mode out of the box
+# Using the locally installed playwright ensures we use the pinned version from package-lock.json
+USER automaker
+RUN ./node_modules/.bin/playwright install chromium && \
+    echo "=== Playwright Chromium installed ===" && \
+    ls -la /home/automaker/.cache/ms-playwright/
+USER root
+
+# Create data and projects directories
+RUN mkdir -p /data /projects && chown automaker:automaker /data /projects
+
+# Configure git for mounted volumes and authentication
+# Use --system so it's not overwritten by mounted user .gitconfig
+RUN git config --system --add safe.directory '*' && \
+    # Use gh as credential helper (works with GH_TOKEN env var)
+    git config --system credential.helper '!gh auth git-credential'
+
+# Copy entrypoint script for fixing permissions on mounted volumes
+COPY docker-entrypoint.sh /usr/local/bin/docker-entrypoint.sh
+RUN chmod +x /usr/local/bin/docker-entrypoint.sh
+
+# Note: We stay as root here so entrypoint can fix permissions
+# The entrypoint script will switch to automaker user before running the command
+
+# Environment variables
+ENV PORT=3008
+ENV DATA_DIR=/data
+ENV HOME=/home/automaker
+# Add user's local bin to PATH for cursor-agent
+ENV PATH="/home/automaker/.local/bin:${PATH}"
+
+# Expose port
+EXPOSE 3008
+
+# Health check (using curl since it's already installed, more reliable than busybox wget)
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost:3008/api/health || exit 1
+
+# Use entrypoint to fix permissions before starting
+ENTRYPOINT ["/usr/local/bin/docker-entrypoint.sh"]
+
+# Start server
+CMD ["node", "apps/server/dist/index.js"]
+
+# =============================================================================
+# UI BUILD STAGE
+# =============================================================================
+FROM base AS ui-builder
+
+# Copy UI-specific package.json
+COPY apps/ui/package*.json ./apps/ui/
+
+# Install dependencies (--ignore-scripts to skip husky and build:packages in prepare script)
+RUN npm ci --ignore-scripts
+
+# Copy all source files
+COPY libs ./libs
+COPY apps/ui ./apps/ui
+
+# Build packages in dependency order, then build UI
+# When VITE_SERVER_URL is empty, the UI uses relative URLs (e.g., /api/...) which nginx proxies
+# to the server container. This avoids CORS issues entirely in Docker Compose setups.
+# Override at build time if needed: --build-arg VITE_SERVER_URL=http://api.example.com
+ARG VITE_SERVER_URL=
+ENV VITE_SKIP_ELECTRON=true
+ENV VITE_SERVER_URL=${VITE_SERVER_URL}
+RUN npm run build:packages && npm run build --workspace=apps/ui
+
+# =============================================================================
+# UI PRODUCTION STAGE
+# =============================================================================
+FROM nginx:alpine AS ui
+
+# Build argument for tracking which commit this image was built from
+ARG GIT_COMMIT_SHA=unknown
+LABEL automaker.git.commit.sha="${GIT_COMMIT_SHA}"
+
+# Copy built files
+COPY --from=ui-builder /app/apps/ui/dist /usr/share/nginx/html
+
+# Copy nginx config for SPA routing
+COPY apps/ui/nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/temp_repo/Dockerfile.dev b/temp_repo/Dockerfile.dev
new file mode 100644
index 0000000000000000000000000000000000000000..60e445f2e15f5206a5aade94ea76a54aadf9a789
--- /dev/null
+++ b/temp_repo/Dockerfile.dev
@@ -0,0 +1,94 @@
+# Automaker Development Dockerfile
+# For development with live reload via volume mounting
+# Source code is NOT copied - it's mounted as a volume
+#
+# Usage:
+#   docker compose -f docker-compose.dev.yml up
+
+FROM node:22-slim
+
+# Install build dependencies for native modules (node-pty) and runtime tools
+# Also install Playwright/Chromium system dependencies (aligns with playwright install-deps on Debian/Ubuntu)
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    python3 make g++ \
+    git curl bash gosu ca-certificates openssh-client \
+    # Playwright/Chromium dependencies
+    libglib2.0-0 libnss3 libnspr4 libdbus-1-3 libatk1.0-0 libatk-bridge2.0-0 \
+    libcups2 libdrm2 libxkbcommon0 libatspi2.0-0 libxcomposite1 libxdamage1 \
+    libxfixes3 libxrandr2 libgbm1 libasound2 libpango-1.0-0 libcairo2 \
+    libx11-6 libx11-xcb1 libxcb1 libxext6 libxrender1 libxss1 libxtst6 \
+    libxshmfence1 libgtk-3-0 libexpat1 libfontconfig1 fonts-liberation \
+    xdg-utils libpangocairo-1.0-0 libpangoft2-1.0-0 libu2f-udev libvulkan1 \
+    && GH_VERSION="2.63.2" \
+    && ARCH=$(uname -m) \
+    && case "$ARCH" in \
+        x86_64) GH_ARCH="amd64" ;; \
+        aarch64|arm64) GH_ARCH="arm64" ;; \
+        *) echo "Unsupported architecture: $ARCH" && exit 1 ;; \
+    esac \
+    && curl -L "https://github.com/cli/cli/releases/download/v${GH_VERSION}/gh_${GH_VERSION}_linux_${GH_ARCH}.tar.gz" -o gh.tar.gz \
+    && tar -xzf gh.tar.gz \
+    && mv gh_${GH_VERSION}_linux_${GH_ARCH}/bin/gh /usr/local/bin/gh \
+    && rm -rf gh.tar.gz gh_${GH_VERSION}_linux_${GH_ARCH} \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Claude CLI globally
+RUN npm install -g @anthropic-ai/claude-code
+
+# Build arguments for user ID matching (allows matching host user for mounted volumes)
+# Override at build time: docker-compose build --build-arg UID=$(id -u) --build-arg GID=$(id -g)
+ARG UID=1001
+ARG GID=1001
+
+# Create non-root user with configurable UID/GID
+# Use -o flag to allow non-unique IDs (GID 1000 may already exist as 'node' group)
+RUN groupadd -o -g ${GID} automaker && \
+    useradd -o -u ${UID} -g automaker -m -d /home/automaker -s /bin/bash automaker && \
+    mkdir -p /home/automaker/.local/bin && \
+    mkdir -p /home/automaker/.cursor && \
+    chown -R automaker:automaker /home/automaker && \
+    chmod 700 /home/automaker/.cursor
+
+# Install Cursor CLI as automaker user
+USER automaker
+ENV HOME=/home/automaker
+RUN curl https://cursor.com/install -fsS | bash || true
+USER root
+
+# Add PATH to profile for Cursor CLI
+RUN mkdir -p /etc/profile.d && \
+    echo 'export PATH="/home/automaker/.local/bin:$PATH"' > /etc/profile.d/cursor-cli.sh && \
+    chmod +x /etc/profile.d/cursor-cli.sh
+
+# Add to user bashrc files
+RUN echo 'export PATH="/home/automaker/.local/bin:$PATH"' >> /home/automaker/.bashrc && \
+    chown automaker:automaker /home/automaker/.bashrc
+RUN echo 'export PATH="/home/automaker/.local/bin:$PATH"' >> /root/.bashrc
+
+WORKDIR /app
+
+# Create directories with proper permissions
+RUN mkdir -p /data /projects && chown automaker:automaker /data /projects
+
+# Configure git for mounted volumes
+RUN git config --system --add safe.directory '*' && \
+    git config --system credential.helper '!gh auth git-credential'
+
+# Copy entrypoint script
+COPY docker-entrypoint.sh /usr/local/bin/docker-entrypoint.sh
+RUN chmod +x /usr/local/bin/docker-entrypoint.sh
+
+# Environment variables
+ENV PORT=3008
+ENV DATA_DIR=/data
+ENV HOME=/home/automaker
+ENV PATH="/home/automaker/.local/bin:${PATH}"
+
+# Expose both dev ports
+EXPOSE 3007 3008
+
+# Use entrypoint for permission handling
+ENTRYPOINT ["/usr/local/bin/docker-entrypoint.sh"]
+
+# Default command - will be overridden by docker-compose
+CMD ["npm", "run", "dev:web"]
diff --git a/temp_repo/LICENSE b/temp_repo/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..e388c0a7c472272fd7d4aca4e29b931ee8bad6b9
--- /dev/null
+++ b/temp_repo/LICENSE
@@ -0,0 +1,27 @@
+## Project Status
+
+**This project is no longer actively maintained.** The codebase is provided as-is for those who wish to use, study, or fork it. No bug fixes, security updates, or new features are being developed. Community contributions may still be accepted, but there is no guarantee of review or merge.
+
+---
+
+MIT License
+
+Copyright (c) 2025 Automaker Core Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/temp_repo/OPENCODE_CONFIG_CONTENT b/temp_repo/OPENCODE_CONFIG_CONTENT
new file mode 100644
index 0000000000000000000000000000000000000000..9dabfe4921112c6cf3a3d451b3b258191376b862
--- /dev/null
+++ b/temp_repo/OPENCODE_CONFIG_CONTENT
@@ -0,0 +1,2 @@
+{
+  "$schema": "https://opencode.ai/config.json",}
\ No newline at end of file
diff --git a/temp_repo/README.md b/temp_repo/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..e13ad62e5378fce4551174bf5e1a693c80836265
--- /dev/null
+++ b/temp_repo/README.md
@@ -0,0 +1,714 @@
+<p align="center">
+  <img src="apps/ui/public/readme_logo.svg" alt="Automaker Logo" height="80" />
+</p>
+
+> **[!TIP]**
+>
+> **Learn more about Agentic Coding!**
+>
+> Automaker itself was built by a group of engineers using AI and agentic coding techniques to build features faster than ever. By leveraging tools like Cursor IDE and Claude Code CLI, the team orchestrated AI agents to implement complex functionality in days instead of weeks.
+>
+> **Learn how:** Master these same techniques and workflows in the [Agentic Jumpstart course](https://agenticjumpstart.com/?utm=automaker-gh).
+
+# Automaker
+
+**Stop typing code. Start directing AI agents.**
+
+<details open>
+<summary><h2>Table of Contents</h2></summary>
+
+- [What Makes Automaker Different?](#what-makes-automaker-different)
+  - [The Workflow](#the-workflow)
+  - [Powered by Claude Agent SDK](#powered-by-claude-agent-sdk)
+  - [Why This Matters](#why-this-matters)
+- [Security Disclaimer](#security-disclaimer)
+- [Community & Support](#community--support)
+- [Getting Started](#getting-started)
+  - [Prerequisites](#prerequisites)
+  - [Quick Start](#quick-start)
+- [How to Run](#how-to-run)
+  - [Development Mode](#development-mode)
+  - [Interactive TUI Launcher](#interactive-tui-launcher-recommended-for-new-users)
+  - [Building for Production](#building-for-production)
+  - [Testing](#testing)
+  - [Linting](#linting)
+  - [Environment Configuration](#environment-configuration)
+  - [Authentication Setup](#authentication-setup)
+- [Features](#features)
+  - [Core Workflow](#core-workflow)
+  - [AI & Planning](#ai--planning)
+  - [Project Management](#project-management)
+  - [Collaboration & Review](#collaboration--review)
+  - [Developer Tools](#developer-tools)
+  - [Advanced Features](#advanced-features)
+- [Tech Stack](#tech-stack)
+  - [Frontend](#frontend)
+  - [Backend](#backend)
+  - [Testing & Quality](#testing--quality)
+  - [Shared Libraries](#shared-libraries)
+- [Available Views](#available-views)
+- [Architecture](#architecture)
+  - [Monorepo Structure](#monorepo-structure)
+  - [How It Works](#how-it-works)
+  - [Key Architectural Patterns](#key-architectural-patterns)
+  - [Security & Isolation](#security--isolation)
+  - [Data Storage](#data-storage)
+- [Learn More](#learn-more)
+- [License](#license)
+
+</details>
+
+Automaker is an autonomous AI development studio that transforms how you build software. Instead of manually writing every line of code, you describe features on a Kanban board and watch as AI agents powered by Claude Agent SDK automatically implement them. Built with React, Vite, Electron, and Express, Automaker provides a complete workflow for managing AI agents through a desktop application (or web browser), with features like real-time streaming, git worktree isolation, plan approval, and multi-agent task execution.
+
+![Automaker UI](https://i.imgur.com/jdwKydM.png)
+
+## What Makes Automaker Different?
+
+Traditional development tools help you write code. Automaker helps you **orchestrate AI agents** to build entire features autonomously. Think of it as having a team of AI developers working for you—you define what needs to be built, and Automaker handles the implementation.
+
+### The Workflow
+
+1. **Add Features** - Describe features you want built (with text, images, or screenshots)
+2. **Move to "In Progress"** - Automaker automatically assigns an AI agent to implement the feature
+3. **Watch It Build** - See real-time progress as the agent writes code, runs tests, and makes changes
+4. **Review & Verify** - Review the changes, run tests, and approve when ready
+5. **Ship Faster** - Build entire applications in days, not weeks
+
+### Powered by Claude Agent SDK
+
+Automaker leverages the [Claude Agent SDK](https://www.npmjs.com/package/@anthropic-ai/claude-agent-sdk) to give AI agents full access to your codebase. Agents can read files, write code, execute commands, run tests, and make git commits—all while working in isolated git worktrees to keep your main branch safe. The SDK provides autonomous AI agents that can use tools, make decisions, and complete complex multi-step tasks without constant human intervention.
+
+### Why This Matters
+
+The future of software development is **agentic coding**—where developers become architects directing AI agents rather than manual coders. Automaker puts this future in your hands today, letting you experience what it's like to build software 10x faster with AI agents handling the implementation while you focus on architecture and business logic.
+
+## Community & Support
+
+Join the **Agentic Jumpstart** to connect with other builders exploring **agentic coding** and autonomous development workflows.
+
+In the Discord, you can:
+
+- 💬 Discuss agentic coding patterns and best practices
+- 🧠 Share ideas for AI-driven development workflows
+- 🛠️ Get help setting up or extending Automaker
+- 🚀 Show off projects built with AI agents
+- 🤝 Collaborate with other developers and contributors
+
+👉 **Join the Discord:** [Agentic Jumpstart Discord](https://discord.gg/jjem7aEDKU)
+
+---
+
+## Getting Started
+
+### Prerequisites
+
+- **Node.js 22+** (required: >=22.0.0 <23.0.0)
+- **npm** (comes with Node.js)
+- **[Claude Code CLI](https://code.claude.com/docs/en/overview)** - Install and authenticate with your Anthropic subscription. Automaker integrates with your authenticated Claude Code CLI to access Claude models.
+
+### Quick Start
+
+```bash
+# 1. Clone the repository
+git clone https://github.com/AutoMaker-Org/automaker.git
+cd automaker
+
+# 2. Install dependencies
+npm install
+
+# 3. Start Automaker
+npm run dev
+# Choose between:
+#   1. Web Application (browser at localhost:3007)
+#   2. Desktop Application (Electron - recommended)
+```
+
+**Authentication:** Automaker integrates with your authenticated Claude Code CLI. Make sure you have [installed and authenticated](https://code.claude.com/docs/en/quickstart) the Claude Code CLI before running Automaker. Your CLI credentials will be detected automatically.
+
+**For Development:** `npm run dev` starts the development server with Vite live reload and hot module replacement for fast refresh and instant updates as you make changes.
+
+## How to Run
+
+### Development Mode
+
+Start Automaker in development mode:
+
+```bash
+npm run dev
+```
+
+This will prompt you to choose your run mode, or you can specify a mode directly:
+
+#### Electron Desktop App (Recommended)
+
+```bash
+# Standard development mode
+npm run dev:electron
+
+# With DevTools open automatically
+npm run dev:electron:debug
+
+# For WSL (Windows Subsystem for Linux)
+npm run dev:electron:wsl
+
+# For WSL with GPU acceleration
+npm run dev:electron:wsl:gpu
+```
+
+#### Web Browser Mode
+
+```bash
+# Run in web browser (http://localhost:3007)
+npm run dev:web
+```
+
+### Interactive TUI Launcher (Recommended for New Users)
+
+For a user-friendly interactive menu, use the built-in TUI launcher script:
+
+```bash
+# Show interactive menu with all launch options
+./start-automaker.sh
+
+# Or launch directly without menu
+./start-automaker.sh web          # Web browser
+./start-automaker.sh electron     # Desktop app
+./start-automaker.sh electron-debug  # Desktop + DevTools
+
+# Additional options
+./start-automaker.sh --help       # Show all available options
+./start-automaker.sh --version    # Show version information
+./start-automaker.sh --check-deps # Verify project dependencies
+./start-automaker.sh --no-colors  # Disable colored output
+./start-automaker.sh --no-history # Don't remember last choice
+```
+
+**Features:**
+
+- 🎨 Beautiful terminal UI with gradient colors and ASCII art
+- ⌨️ Interactive menu (press 1-3 to select, Q to exit)
+- 💾 Remembers your last choice
+- ✅ Pre-flight checks (validates Node.js, npm, dependencies)
+- 📏 Responsive layout (adapts to terminal size)
+- ⏱️ 30-second timeout for hands-free selection
+- 🌐 Cross-shell compatible (bash/zsh)
+
+**History File:**
+Your last selected mode is saved in `~/.automaker_launcher_history` for quick re-runs.
+
+### Building for Production
+
+#### Web Application
+
+```bash
+# Build for web deployment (uses Vite)
+npm run build
+```
+
+#### Desktop Application
+
+```bash
+# Build for current platform (macOS/Windows/Linux)
+npm run build:electron
+
+# Platform-specific builds
+npm run build:electron:mac     # macOS (DMG + ZIP, x64 + arm64)
+npm run build:electron:win     # Windows (NSIS installer, x64)
+npm run build:electron:linux   # Linux (AppImage + DEB + RPM, x64)
+
+# Output directory: apps/ui/release/
+```
+
+**Linux Distribution Packages:**
+
+- **AppImage**: Universal format, works on any Linux distribution
+- **DEB**: Ubuntu, Debian, Linux Mint, Pop!\_OS
+- **RPM**: Fedora, RHEL, Rocky Linux, AlmaLinux, openSUSE
+
+**Installing on Fedora/RHEL:**
+
+```bash
+# Download the RPM package
+wget https://github.com/AutoMaker-Org/automaker/releases/latest/download/Automaker-<version>-x86_64.rpm
+
+# Install with dnf (Fedora)
+sudo dnf install ./Automaker-<version>-x86_64.rpm
+
+# Or with yum (RHEL/CentOS)
+sudo yum localinstall ./Automaker-<version>-x86_64.rpm
+```
+
+#### Docker Deployment
+
+Docker provides the most secure way to run Automaker by isolating it from your host filesystem.
+
+```bash
+# Build and run with Docker Compose
+docker-compose up -d
+
+# Access UI at http://localhost:3007
+# API at http://localhost:3008
+
+# View logs
+docker-compose logs -f
+
+# Stop containers
+docker-compose down
+```
+
+##### Authentication
+
+Automaker integrates with your authenticated Claude Code CLI. To use CLI authentication in Docker, mount your Claude CLI config directory (see [Claude CLI Authentication](#claude-cli-authentication) below).
+
+##### Working with Projects (Host Directory Access)
+
+By default, the container is isolated from your host filesystem. To work on projects from your host machine, create a `docker-compose.override.yml` file (gitignored):
+
+```yaml
+services:
+  server:
+    volumes:
+      # Mount your project directories
+      - /path/to/your/project:/projects/your-project
+```
+
+##### Claude CLI Authentication
+
+Mount your Claude CLI config directory to use your authenticated CLI credentials:
+
+```yaml
+services:
+  server:
+    volumes:
+      # Linux/macOS
+      - ~/.claude:/home/automaker/.claude
+      # Windows
+      - C:/Users/YourName/.claude:/home/automaker/.claude
+```
+
+**Note:** The Claude CLI config must be writable (do not use `:ro` flag) as the CLI writes debug files.
+
+> **⚠️ Important: Linux/WSL Users**
+>
+> The container runs as UID 1001 by default. If your host user has a different UID (common on Linux/WSL where the first user is UID 1000), you must create a `.env` file to match your host user:
+>
+> ```bash
+> # Check your UID/GID
+> id -u  # outputs your UID (e.g., 1000)
+> id -g  # outputs your GID (e.g., 1000)
+> ```
+>
+> Create a `.env` file in the automaker directory:
+>
+> ```
+> UID=1000
+> GID=1000
+> ```
+>
+> Then rebuild the images:
+>
+> ```bash
+> docker compose build
+> ```
+>
+> Without this, files written by the container will be inaccessible to your host user.
+
+##### GitHub CLI Authentication (For Git Push/PR Operations)
+
+To enable git push and GitHub CLI operations inside the container:
+
+```yaml
+services:
+  server:
+    volumes:
+      # Mount GitHub CLI config
+      # Linux/macOS
+      - ~/.config/gh:/home/automaker/.config/gh
+      # Windows
+      - 'C:/Users/YourName/AppData/Roaming/GitHub CLI:/home/automaker/.config/gh'
+
+      # Mount git config for user identity (name, email)
+      - ~/.gitconfig:/home/automaker/.gitconfig:ro
+    environment:
+      # GitHub token (required on Windows where tokens are in Credential Manager)
+      # Get your token with: gh auth token
+      - GH_TOKEN=${GH_TOKEN}
+```
+
+Then add `GH_TOKEN` to your `.env` file:
+
+```bash
+GH_TOKEN=gho_your_github_token_here
+```
+
+##### Complete docker-compose.override.yml Example
+
+```yaml
+services:
+  server:
+    volumes:
+      # Your projects
+      - /path/to/project1:/projects/project1
+      - /path/to/project2:/projects/project2
+
+      # Authentication configs
+      - ~/.claude:/home/automaker/.claude
+      - ~/.config/gh:/home/automaker/.config/gh
+      - ~/.gitconfig:/home/automaker/.gitconfig:ro
+    environment:
+      - GH_TOKEN=${GH_TOKEN}
+```
+
+##### Architecture Support
+
+The Docker image supports both AMD64 and ARM64 architectures. The GitHub CLI and Claude CLI are automatically downloaded for the correct architecture during build.
+
+##### Playwright for Automated Testing
+
+The Docker image includes **Playwright Chromium pre-installed** for AI agent verification tests. When agents implement features in automated testing mode, they use Playwright to verify the implementation works correctly.
+
+**No additional setup required** - Playwright verification works out of the box.
+
+#### Optional: Persist browsers for manual updates
+
+By default, Playwright Chromium is pre-installed in the Docker image. If you need to manually update browsers or want to persist browser installations across container restarts (not image rebuilds), you can mount a volume.
+
+**Important:** When you first add this volume mount to an existing setup, the empty volume will override the pre-installed browsers. You must re-install them:
+
+```bash
+# After adding the volume mount for the first time
+docker exec --user automaker -w /app automaker-server npx playwright install chromium
+```
+
+Add this to your `docker-compose.override.yml`:
+
+```yaml
+services:
+  server:
+    volumes:
+      - playwright-cache:/home/automaker/.cache/ms-playwright
+
+volumes:
+  playwright-cache:
+    name: automaker-playwright-cache
+```
+
+**Updating browsers manually:**
+
+```bash
+docker exec --user automaker -w /app automaker-server npx playwright install chromium
+```
+
+### Testing
+
+#### End-to-End Tests (Playwright)
+
+```bash
+npm run test            # Headless E2E tests
+npm run test:headed     # Browser visible E2E tests
+```
+
+#### Unit Tests (Vitest)
+
+```bash
+npm run test:server              # Server unit tests
+npm run test:server:coverage     # Server tests with coverage
+npm run test:packages            # All shared package tests
+npm run test:all                 # Packages + server tests
+```
+
+#### Test Configuration
+
+- E2E tests run on ports 3007 (UI) and 3008 (server)
+- Automatically starts test servers before running
+- Uses Chromium browser via Playwright
+- Mock agent mode available in CI with `AUTOMAKER_MOCK_AGENT=true`
+
+### Linting
+
+```bash
+# Run ESLint
+npm run lint
+```
+
+### Environment Configuration
+
+#### Optional - Server
+
+- `PORT` - Server port (default: 3008)
+- `DATA_DIR` - Data storage directory (default: ./data)
+- `ENABLE_REQUEST_LOGGING` - HTTP request logging (default: true)
+
+#### Optional - Security
+
+- `AUTOMAKER_API_KEY` - Optional API authentication for the server
+- `ALLOWED_ROOT_DIRECTORY` - Restrict file operations to specific directory
+- `CORS_ORIGIN` - CORS allowed origins (comma-separated list; defaults to localhost only)
+
+#### Optional - Development
+
+- `VITE_SKIP_ELECTRON` - Skip Electron in dev mode
+- `OPEN_DEVTOOLS` - Auto-open DevTools in Electron
+- `AUTOMAKER_SKIP_SANDBOX_WARNING` - Skip sandbox warning dialog (useful for dev/CI)
+- `AUTOMAKER_AUTO_LOGIN=true` - Skip login prompt in development (ignored when NODE_ENV=production)
+
+### Authentication Setup
+
+Automaker integrates with your authenticated Claude Code CLI and uses your Anthropic subscription.
+
+Install and authenticate the Claude Code CLI following the [official quickstart guide](https://code.claude.com/docs/en/quickstart).
+
+Once authenticated, Automaker will automatically detect and use your CLI credentials. No additional configuration needed!
+
+## Features
+
+### Core Workflow
+
+- 📋 **Kanban Board** - Visual drag-and-drop board to manage features through backlog, in progress, waiting approval, and verified stages
+- 🤖 **AI Agent Integration** - Automatic AI agent assignment to implement features when moved to "In Progress"
+- 🔀 **Git Worktree Isolation** - Each feature executes in isolated git worktrees to protect your main branch
+- 📡 **Real-time Streaming** - Watch AI agents work in real-time with live tool usage, progress updates, and task completion
+- 🔄 **Follow-up Instructions** - Send additional instructions to running agents without stopping them
+
+### AI & Planning
+
+- 🧠 **Multi-Model Support** - Choose from Claude Opus, Sonnet, and Haiku per feature
+- 💭 **Extended Thinking** - Enable thinking modes (none, medium, deep, ultra) for complex problem-solving
+- 📝 **Planning Modes** - Four planning levels: skip (direct implementation), lite (quick plan), spec (task breakdown), full (phased execution)
+- ✅ **Plan Approval** - Review and approve AI-generated plans before implementation begins
+- 📊 **Multi-Agent Task Execution** - Spec mode spawns dedicated agents per task for focused implementation
+
+### Project Management
+
+- 🔍 **Project Analysis** - AI-powered codebase analysis to understand your project structure
+- 💡 **Feature Suggestions** - AI-generated feature suggestions based on project analysis
+- 📁 **Context Management** - Add markdown, images, and documentation files that agents automatically reference
+- 🔗 **Dependency Blocking** - Features can depend on other features, enforcing execution order
+- 🌳 **Graph View** - Visualize feature dependencies with interactive graph visualization
+- 📋 **GitHub Integration** - Import issues, validate feasibility, and convert to tasks automatically
+
+### Collaboration & Review
+
+- 🧪 **Verification Workflow** - Features move to "Waiting Approval" for review and testing
+- 💬 **Agent Chat** - Interactive chat sessions with AI agents for exploratory work
+- 👤 **AI Profiles** - Create custom agent configurations with different prompts, models, and settings
+- 📜 **Session History** - Persistent chat sessions across restarts with full conversation history
+- 🔍 **Git Diff Viewer** - Review changes made by agents before approving
+
+### Developer Tools
+
+- 🖥️ **Integrated Terminal** - Full terminal access with tabs, splits, and persistent sessions
+- 🖼️ **Image Support** - Attach screenshots and diagrams to feature descriptions for visual context
+- ⚡ **Concurrent Execution** - Configure how many features can run simultaneously (default: 3)
+- ⌨️ **Keyboard Shortcuts** - Fully customizable shortcuts for navigation and actions
+- 🎨 **Theme System** - 25+ themes including Dark, Light, Dracula, Nord, Catppuccin, and more
+- 🖥️ **Cross-Platform** - Desktop app for macOS (x64, arm64), Windows (x64), and Linux (x64)
+- 🌐 **Web Mode** - Run in browser or as Electron desktop app
+
+### Advanced Features
+
+- 🔐 **Docker Isolation** - Security-focused Docker deployment with no host filesystem access
+- 🎯 **Worktree Management** - Create, switch, commit, and create PRs from worktrees
+- 📊 **Usage Tracking** - Monitor Claude API usage with detailed metrics
+- 🔊 **Audio Notifications** - Optional completion sounds (mutable in settings)
+- 💾 **Auto-save** - All work automatically persisted to `.automaker/` directory
+
+## Tech Stack
+
+### Frontend
+
+- **React 19** - UI framework
+- **Vite 7** - Build tool and development server
+- **Electron 39** - Desktop application framework
+- **TypeScript 5.9** - Type safety
+- **TanStack Router** - File-based routing
+- **Zustand 5** - State management with persistence
+- **Tailwind CSS 4** - Utility-first styling with 25+ themes
+- **Radix UI** - Accessible component primitives
+- **dnd-kit** - Drag and drop for Kanban board
+- **@xyflow/react** - Graph visualization for dependencies
+- **xterm.js** - Integrated terminal emulator
+- **CodeMirror 6** - Code editor for XML/syntax highlighting
+- **Lucide Icons** - Icon library
+
+### Backend
+
+- **Node.js** - JavaScript runtime with ES modules
+- **Express 5** - HTTP server framework
+- **TypeScript 5.9** - Type safety
+- **Claude Agent SDK** - AI agent integration (@anthropic-ai/claude-agent-sdk)
+- **WebSocket (ws)** - Real-time event streaming
+- **node-pty** - PTY terminal sessions
+
+### Testing & Quality
+
+- **Playwright** - End-to-end testing
+- **Vitest** - Unit testing framework
+- **ESLint 9** - Code linting
+- **Prettier 3** - Code formatting
+- **Husky** - Git hooks for pre-commit formatting
+
+### Shared Libraries
+
+- **@automaker/types** - Shared TypeScript definitions
+- **@automaker/utils** - Logging, error handling, image processing
+- **@automaker/prompts** - AI prompt templates
+- **@automaker/platform** - Path management and security
+- **@automaker/model-resolver** - Claude model alias resolution
+- **@automaker/dependency-resolver** - Feature dependency ordering
+- **@automaker/git-utils** - Git operations and worktree management
+
+## Available Views
+
+Automaker provides several specialized views accessible via the sidebar or keyboard shortcuts:
+
+| View               | Shortcut | Description                                                                                      |
+| ------------------ | -------- | ------------------------------------------------------------------------------------------------ |
+| **Board**          | `K`      | Kanban board for managing feature workflow (Backlog → In Progress → Waiting Approval → Verified) |
+| **Agent**          | `A`      | Interactive chat sessions with AI agents for exploratory work and questions                      |
+| **Spec**           | `D`      | Project specification editor with AI-powered generation and feature suggestions                  |
+| **Context**        | `C`      | Manage context files (markdown, images) that AI agents automatically reference                   |
+| **Settings**       | `S`      | Configure themes, shortcuts, defaults, authentication, and more                                  |
+| **Terminal**       | `T`      | Integrated terminal with tabs, splits, and persistent sessions                                   |
+| **Graph**          | `H`      | Visualize feature dependencies with interactive graph visualization                              |
+| **Ideation**       | `I`      | Brainstorm and generate ideas with AI assistance                                                 |
+| **Memory**         | `Y`      | View and manage agent memory and conversation history                                            |
+| **GitHub Issues**  | `G`      | Import and validate GitHub issues, convert to tasks                                              |
+| **GitHub PRs**     | `R`      | View and manage GitHub pull requests                                                             |
+| **Running Agents** | -        | View all active agents across projects with status and progress                                  |
+
+### Keyboard Navigation
+
+All shortcuts are customizable in Settings. Default shortcuts:
+
+- **Navigation:** `K` (Board), `A` (Agent), `D` (Spec), `C` (Context), `S` (Settings), `T` (Terminal), `H` (Graph), `I` (Ideation), `Y` (Memory), `G` (GitHub Issues), `R` (GitHub PRs)
+- **UI:** `` ` `` (Toggle sidebar)
+- **Actions:** `N` (New item in current view), `O` (Open project), `P` (Project picker)
+- **Projects:** `Q`/`E` (Cycle previous/next project)
+- **Terminal:** `Alt+D` (Split right), `Alt+S` (Split down), `Alt+W` (Close), `Alt+T` (New tab)
+
+## Architecture
+
+### Monorepo Structure
+
+Automaker is built as an npm workspace monorepo with two main applications and seven shared packages:
+
+```text
+automaker/
+├── apps/
+│   ├── ui/          # React + Vite + Electron frontend
+│   └── server/      # Express + WebSocket backend
+└── libs/            # Shared packages
+    ├── types/                  # Core TypeScript definitions
+    ├── utils/                  # Logging, errors, utilities
+    ├── prompts/                # AI prompt templates
+    ├── platform/               # Path management, security
+    ├── model-resolver/         # Claude model aliasing
+    ├── dependency-resolver/    # Feature dependency ordering
+    └── git-utils/              # Git operations & worktree management
+```
+
+### How It Works
+
+1. **Feature Definition** - Users create feature cards on the Kanban board with descriptions, images, and configuration
+2. **Git Worktree Creation** - When a feature starts, a git worktree is created for isolated development
+3. **Agent Execution** - Claude Agent SDK executes in the worktree with full file system and command access
+4. **Real-time Streaming** - Agent output streams via WebSocket to the frontend for live monitoring
+5. **Plan Approval** (optional) - For spec/full planning modes, agents generate plans that require user approval
+6. **Multi-Agent Tasks** (spec mode) - Each task in the spec gets a dedicated agent for focused implementation
+7. **Verification** - Features move to "Waiting Approval" where changes can be reviewed via git diff
+8. **Integration** - After approval, changes can be committed and PRs created from the worktree
+
+### Key Architectural Patterns
+
+- **Event-Driven Architecture** - All server operations emit events that stream to the frontend
+- **Provider Pattern** - Extensible AI provider system (currently Claude, designed for future providers)
+- **Service-Oriented Backend** - Modular services for agent management, features, terminals, settings
+- **State Management** - Zustand with persistence for frontend state across restarts
+- **File-Based Storage** - No database; features stored as JSON files in `.automaker/` directory
+
+### Security & Isolation
+
+- **Git Worktrees** - Each feature executes in an isolated git worktree, protecting your main branch
+- **Path Sandboxing** - Optional `ALLOWED_ROOT_DIRECTORY` restricts file access
+- **Docker Isolation** - Recommended deployment uses Docker with no host filesystem access
+- **Plan Approval** - Optional plan review before implementation prevents unwanted changes
+
+### Data Storage
+
+Automaker uses a file-based storage system (no database required):
+
+#### Per-Project Data
+
+Stored in `{projectPath}/.automaker/`:
+
+```text
+.automaker/
+├── features/              # Feature JSON files and images
+│   └── {featureId}/
+│       ├── feature.json   # Feature metadata
+│       ├── agent-output.md # AI agent output log
+│       └── images/        # Attached images
+├── context/               # Context files for AI agents
+├── worktrees/             # Git worktree metadata
+├── validations/           # GitHub issue validation results
+├── ideation/              # Brainstorming and analysis data
+│   └── analysis.json      # Project structure analysis
+├── board/                 # Board-related data
+├── images/                # Project-level images
+├── settings.json          # Project-specific settings
+├── app_spec.txt           # Project specification (XML format)
+├── active-branches.json   # Active git branches tracking
+└── execution-state.json   # Auto-mode execution state
+```
+
+#### Global Data
+
+Stored in `DATA_DIR` (default `./data`):
+
+```text
+data/
+├── settings.json          # Global settings, profiles, shortcuts
+├── credentials.json       # API keys (encrypted)
+├── sessions-metadata.json # Chat session metadata
+└── agent-sessions/        # Conversation histories
+    └── {sessionId}.json
+```
+
+---
+
+> **[!CAUTION]**
+>
+> ## Security Disclaimer
+>
+> **This software uses AI-powered tooling that has access to your operating system and can read, modify, and delete files. Use at your own risk.**
+>
+> We have reviewed this codebase for security vulnerabilities, but you assume all risk when running this software. You should review the code yourself before running it.
+>
+> **We do not recommend running Automaker directly on your local computer** due to the risk of AI agents having access to your entire file system. Please sandbox this application using Docker or a virtual machine.
+>
+> **[Read the full disclaimer](./DISCLAIMER.md)**
+
+---
+
+## Learn More
+
+### Documentation
+
+- [Contributing Guide](./CONTRIBUTING.md) - How to contribute to Automaker
+- [Project Documentation](./docs/) - Architecture guides, patterns, and developer docs
+- [Shared Packages Guide](./docs/llm-shared-packages.md) - Using monorepo packages
+
+### Community
+
+Join the **Agentic Jumpstart** Discord to connect with other builders exploring **agentic coding**:
+
+👉 [Agentic Jumpstart Discord](https://discord.gg/jjem7aEDKU)
+
+## Project Status
+
+**This project is no longer actively maintained.** The codebase is provided as-is for those who wish to use, study, or fork it. No bug fixes, security updates, or new features are being developed. Community contributions may still be accepted, but there is no guarantee of review or merge.
+
+## License
+
+This project is licensed under the **MIT License**. See [LICENSE](LICENSE) for the full text.
diff --git a/temp_repo/apps/server/.env.example b/temp_repo/apps/server/.env.example
new file mode 100644
index 0000000000000000000000000000000000000000..bad631237876bc5614819aea3910fd359f2fed47
--- /dev/null
+++ b/temp_repo/apps/server/.env.example
@@ -0,0 +1,95 @@
+# Automaker Server Configuration
+# Copy this file to .env and configure your settings
+
+# ============================================
+# REQUIRED
+# ============================================
+
+# Your Anthropic API key for Claude models
+ANTHROPIC_API_KEY=sk-ant-...
+
+# ============================================
+# OPTIONAL - Additional API Keys
+# ============================================
+
+# OpenAI API key for Codex/GPT models
+OPENAI_API_KEY=sk-...
+
+# Cursor API key for Cursor models
+CURSOR_API_KEY=...
+
+# OAuth credentials for CLI authentication (extracted automatically)
+CLAUDE_OAUTH_CREDENTIALS=
+CURSOR_AUTH_TOKEN=
+
+# ============================================
+# OPTIONAL - Security
+# ============================================
+
+# API key for authenticating requests (leave empty to disable auth)
+# If set, all API requests must include X-API-Key header
+AUTOMAKER_API_KEY=
+
+# Root directory for projects and file operations
+# If set, users can only create/open projects and files within this directory
+# Recommended for sandboxed deployments (Docker, restricted environments)
+# Example: ALLOWED_ROOT_DIRECTORY=/projects
+ALLOWED_ROOT_DIRECTORY=
+
+# CORS origin - which domains can access the API
+# Use "*" for development, set specific origin for production
+CORS_ORIGIN=http://localhost:3007
+
+# ============================================
+# OPTIONAL - Server
+# ============================================
+
+# Host to bind the server to (default: 0.0.0.0)
+# Use 0.0.0.0 to listen on all interfaces (recommended for Docker/remote access)
+# Use 127.0.0.1 or localhost to restrict to local connections only
+HOST=0.0.0.0
+
+# Port to run the server on
+PORT=3008
+
+# Port to run the server on for testing
+TEST_SERVER_PORT=3108
+
+# Port to run the UI on for testing
+TEST_PORT=3107
+
+# Data directory for sessions and metadata
+DATA_DIR=./data
+
+# ============================================
+# OPTIONAL - Terminal Access
+# ============================================
+
+# Enable/disable terminal access (default: true)
+TERMINAL_ENABLED=true
+
+# Password to protect terminal access (leave empty for no password)
+# If set, users must enter this password before accessing terminal
+TERMINAL_PASSWORD=
+
+ENABLE_REQUEST_LOGGING=false
+
+# ============================================
+# OPTIONAL - UI Behavior
+# ============================================
+
+# Skip the sandbox warning dialog on startup (default: false)
+# Set to "true" to disable the warning entirely (useful for dev/CI environments)
+AUTOMAKER_SKIP_SANDBOX_WARNING=false
+
+# ============================================
+# OPTIONAL - Debugging
+# ============================================
+
+# Enable raw output logging for agent streams (default: false)
+# When enabled, saves unprocessed stream events to raw-output.jsonl
+# in each feature's directory (.automaker/features/{id}/raw-output.jsonl)
+# Useful for debugging provider streaming issues, improving log parsing,
+# or analyzing how different providers (Claude, Cursor) stream responses
+# Note: This adds disk I/O overhead, only enable when debugging
+AUTOMAKER_DEBUG_RAW_OUTPUT=false
diff --git a/temp_repo/apps/server/.gitignore b/temp_repo/apps/server/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..6e37bb00be5be9d7d9b661f530cdd58d6f8d6073
--- /dev/null
+++ b/temp_repo/apps/server/.gitignore
@@ -0,0 +1,4 @@
+.env
+data
+node_modules
+coverage
\ No newline at end of file
diff --git a/temp_repo/apps/server/eslint.config.mjs b/temp_repo/apps/server/eslint.config.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..008c1f68ea7c67fe8d8b0961db177cc192731cee
--- /dev/null
+++ b/temp_repo/apps/server/eslint.config.mjs
@@ -0,0 +1,74 @@
+import { defineConfig, globalIgnores } from 'eslint/config';
+import js from '@eslint/js';
+import ts from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+
+const eslintConfig = defineConfig([
+  js.configs.recommended,
+  {
+    files: ['**/*.ts'],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+      globals: {
+        // Node.js globals
+        console: 'readonly',
+        process: 'readonly',
+        Buffer: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        URL: 'readonly',
+        URLSearchParams: 'readonly',
+        AbortController: 'readonly',
+        AbortSignal: 'readonly',
+        fetch: 'readonly',
+        Response: 'readonly',
+        Request: 'readonly',
+        Headers: 'readonly',
+        FormData: 'readonly',
+        RequestInit: 'readonly',
+        // Timers
+        setTimeout: 'readonly',
+        setInterval: 'readonly',
+        clearTimeout: 'readonly',
+        clearInterval: 'readonly',
+        setImmediate: 'readonly',
+        clearImmediate: 'readonly',
+        queueMicrotask: 'readonly',
+        // Node.js types
+        NodeJS: 'readonly',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': ts,
+    },
+    rules: {
+      ...ts.configs.recommended.rules,
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      // Server code frequently works with terminal output containing ANSI escape codes
+      'no-control-regex': 'off',
+      '@typescript-eslint/ban-ts-comment': [
+        'error',
+        {
+          'ts-nocheck': 'allow-with-description',
+          minimumDescriptionLength: 10,
+        },
+      ],
+    },
+  },
+  globalIgnores(['dist/**', 'node_modules/**']),
+]);
+
+export default eslintConfig;
diff --git a/temp_repo/apps/server/package.json b/temp_repo/apps/server/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..a552ff11b75f8c6e200ccc499f2e97131b10005b
--- /dev/null
+++ b/temp_repo/apps/server/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "@automaker/server",
+  "version": "1.0.0",
+  "description": "Backend server for Automaker - provides API for both web and Electron modes",
+  "author": "AutoMaker Team",
+  "license": "SEE LICENSE IN LICENSE",
+  "private": true,
+  "engines": {
+    "node": ">=22.0.0 <23.0.0"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "scripts": {
+    "dev": "tsx watch src/index.ts",
+    "dev:test": "tsx src/index.ts",
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "lint": "eslint src/",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run",
+    "test:cov": "vitest run --coverage",
+    "test:watch": "vitest watch",
+    "test:unit": "vitest run tests/unit"
+  },
+  "dependencies": {
+    "@anthropic-ai/claude-agent-sdk": "0.2.32",
+    "@automaker/dependency-resolver": "1.0.0",
+    "@automaker/git-utils": "1.0.0",
+    "@automaker/model-resolver": "1.0.0",
+    "@automaker/platform": "1.0.0",
+    "@automaker/prompts": "1.0.0",
+    "@automaker/types": "1.0.0",
+    "@automaker/utils": "1.0.0",
+    "@github/copilot-sdk": "0.1.16",
+    "@modelcontextprotocol/sdk": "1.25.2",
+    "@openai/codex-sdk": "^0.98.0",
+    "cookie-parser": "1.4.7",
+    "cors": "2.8.5",
+    "dotenv": "17.2.3",
+    "express": "5.2.1",
+    "morgan": "1.10.1",
+    "node-pty": "1.1.0-beta41",
+    "ws": "8.18.3",
+    "yaml": "2.7.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.57.0",
+    "@types/cookie": "0.6.0",
+    "@types/cookie-parser": "1.4.10",
+    "@types/cors": "2.8.19",
+    "@types/express": "5.0.6",
+    "@types/morgan": "1.9.10",
+    "@types/node": "22.19.3",
+    "@types/ws": "8.18.1",
+    "@vitest/coverage-v8": "4.0.16",
+    "@vitest/ui": "4.0.16",
+    "tsx": "4.21.0",
+    "typescript": "5.9.3",
+    "vitest": "4.0.16"
+  }
+}
diff --git a/temp_repo/apps/server/src/index.ts b/temp_repo/apps/server/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cc0c3fbc16f634dd1796ea2d6f2bf0b7f519fddc
--- /dev/null
+++ b/temp_repo/apps/server/src/index.ts
@@ -0,0 +1,979 @@
+/**
+ * Automaker Backend Server
+ *
+ * Provides HTTP/WebSocket API for both web and Electron modes.
+ * In Electron mode, this server runs locally.
+ * In web mode, this server runs on a remote host.
+ */
+
+import express from 'express';
+import cors from 'cors';
+import morgan from 'morgan';
+import cookieParser from 'cookie-parser';
+import cookie from 'cookie';
+import { WebSocketServer, WebSocket } from 'ws';
+import { createServer } from 'http';
+import dotenv from 'dotenv';
+
+import { createEventEmitter, type EventEmitter } from './lib/events.js';
+import { initAllowedPaths, getClaudeAuthIndicators } from '@automaker/platform';
+import { createLogger, setLogLevel, LogLevel } from '@automaker/utils';
+
+const logger = createLogger('Server');
+
+/**
+ * Map server log level string to LogLevel enum
+ */
+const LOG_LEVEL_MAP: Record<string, LogLevel> = {
+  error: LogLevel.ERROR,
+  warn: LogLevel.WARN,
+  info: LogLevel.INFO,
+  debug: LogLevel.DEBUG,
+};
+import { authMiddleware, validateWsConnectionToken, checkRawAuthentication } from './lib/auth.js';
+import { requireJsonContentType } from './middleware/require-json-content-type.js';
+import { createAuthRoutes } from './routes/auth/index.js';
+import { createFsRoutes } from './routes/fs/index.js';
+import { createHealthRoutes, createDetailedHandler } from './routes/health/index.js';
+import { createAgentRoutes } from './routes/agent/index.js';
+import { createSessionsRoutes } from './routes/sessions/index.js';
+import { createFeaturesRoutes } from './routes/features/index.js';
+import { createAutoModeRoutes } from './routes/auto-mode/index.js';
+import { createEnhancePromptRoutes } from './routes/enhance-prompt/index.js';
+import { createWorktreeRoutes } from './routes/worktree/index.js';
+import { createGitRoutes } from './routes/git/index.js';
+import { createSetupRoutes } from './routes/setup/index.js';
+import { createModelsRoutes } from './routes/models/index.js';
+import { createRunningAgentsRoutes } from './routes/running-agents/index.js';
+import { createWorkspaceRoutes } from './routes/workspace/index.js';
+import { createTemplatesRoutes } from './routes/templates/index.js';
+import {
+  createTerminalRoutes,
+  validateTerminalToken,
+  isTerminalEnabled,
+  isTerminalPasswordRequired,
+} from './routes/terminal/index.js';
+import { createSettingsRoutes } from './routes/settings/index.js';
+import { AgentService } from './services/agent-service.js';
+import { FeatureLoader } from './services/feature-loader.js';
+import { AutoModeServiceCompat } from './services/auto-mode/index.js';
+import { getTerminalService } from './services/terminal-service.js';
+import { SettingsService } from './services/settings-service.js';
+import { createSpecRegenerationRoutes } from './routes/app-spec/index.js';
+import { createClaudeRoutes } from './routes/claude/index.js';
+import { ClaudeUsageService } from './services/claude-usage-service.js';
+import { createCodexRoutes } from './routes/codex/index.js';
+import { CodexUsageService } from './services/codex-usage-service.js';
+import { CodexAppServerService } from './services/codex-app-server-service.js';
+import { CodexModelCacheService } from './services/codex-model-cache-service.js';
+import { createZaiRoutes } from './routes/zai/index.js';
+import { ZaiUsageService } from './services/zai-usage-service.js';
+import { createGeminiRoutes } from './routes/gemini/index.js';
+import { GeminiUsageService } from './services/gemini-usage-service.js';
+import { createGitHubRoutes } from './routes/github/index.js';
+import { createContextRoutes } from './routes/context/index.js';
+import { createBacklogPlanRoutes } from './routes/backlog-plan/index.js';
+import { cleanupStaleValidations } from './routes/github/routes/validation-common.js';
+import { createMCPRoutes } from './routes/mcp/index.js';
+import { MCPTestService } from './services/mcp-test-service.js';
+import { createPipelineRoutes } from './routes/pipeline/index.js';
+import { pipelineService } from './services/pipeline-service.js';
+import { createIdeationRoutes } from './routes/ideation/index.js';
+import { IdeationService } from './services/ideation-service.js';
+import { getDevServerService } from './services/dev-server-service.js';
+import { eventHookService } from './services/event-hook-service.js';
+import { createNotificationsRoutes } from './routes/notifications/index.js';
+import { getNotificationService } from './services/notification-service.js';
+import { createEventHistoryRoutes } from './routes/event-history/index.js';
+import { getEventHistoryService } from './services/event-history-service.js';
+import { getTestRunnerService } from './services/test-runner-service.js';
+import { createProjectsRoutes } from './routes/projects/index.js';
+
+// Load environment variables
+dotenv.config();
+
+const PORT = parseInt(process.env.PORT || '3008', 10);
+const HOST = process.env.HOST || '0.0.0.0';
+const HOSTNAME = process.env.HOSTNAME || 'localhost';
+const DATA_DIR = process.env.DATA_DIR || './data';
+logger.info('[SERVER_STARTUP] process.env.DATA_DIR:', process.env.DATA_DIR);
+logger.info('[SERVER_STARTUP] Resolved DATA_DIR:', DATA_DIR);
+logger.info('[SERVER_STARTUP] process.cwd():', process.cwd());
+const ENABLE_REQUEST_LOGGING_DEFAULT = process.env.ENABLE_REQUEST_LOGGING !== 'false'; // Default to true
+
+// Runtime-configurable request logging flag (can be changed via settings)
+let requestLoggingEnabled = ENABLE_REQUEST_LOGGING_DEFAULT;
+
+/**
+ * Enable or disable HTTP request logging at runtime
+ */
+export function setRequestLoggingEnabled(enabled: boolean): void {
+  requestLoggingEnabled = enabled;
+}
+
+/**
+ * Get current request logging state
+ */
+export function isRequestLoggingEnabled(): boolean {
+  return requestLoggingEnabled;
+}
+
+// Width for log box content (excluding borders)
+const BOX_CONTENT_WIDTH = 67;
+
+// Check for Claude authentication (async - runs in background)
+// The Claude Agent SDK can use either ANTHROPIC_API_KEY or Claude Code CLI authentication
+(async () => {
+  const hasAnthropicKey = !!process.env.ANTHROPIC_API_KEY;
+  const hasEnvOAuthToken = !!process.env.CLAUDE_CODE_OAUTH_TOKEN;
+
+  logger.debug('[CREDENTIAL_CHECK] Starting credential detection...');
+  logger.debug('[CREDENTIAL_CHECK] Environment variables:', {
+    hasAnthropicKey,
+    hasEnvOAuthToken,
+  });
+
+  if (hasAnthropicKey) {
+    logger.info('✓ ANTHROPIC_API_KEY detected');
+    return;
+  }
+
+  if (hasEnvOAuthToken) {
+    logger.info('✓ CLAUDE_CODE_OAUTH_TOKEN detected');
+    return;
+  }
+
+  // Check for Claude Code CLI authentication
+  // Store indicators outside the try block so we can use them in the warning message
+  let cliAuthIndicators: Awaited<ReturnType<typeof getClaudeAuthIndicators>> | null = null;
+
+  try {
+    cliAuthIndicators = await getClaudeAuthIndicators();
+    const indicators = cliAuthIndicators;
+
+    // Log detailed credential detection results
+    const { checks, ...indicatorSummary } = indicators;
+    logger.debug('[CREDENTIAL_CHECK] Claude CLI auth indicators:', indicatorSummary);
+
+    logger.debug('[CREDENTIAL_CHECK] File check details:', checks);
+
+    const hasCliAuth =
+      indicators.hasStatsCacheWithActivity ||
+      (indicators.hasSettingsFile && indicators.hasProjectsSessions) ||
+      (indicators.hasCredentialsFile &&
+        (indicators.credentials?.hasOAuthToken || indicators.credentials?.hasApiKey));
+
+    logger.debug('[CREDENTIAL_CHECK] Auth determination:', {
+      hasCliAuth,
+      reason: hasCliAuth
+        ? indicators.hasStatsCacheWithActivity
+          ? 'stats cache with activity'
+          : indicators.hasSettingsFile && indicators.hasProjectsSessions
+            ? 'settings file + project sessions'
+            : indicators.credentials?.hasOAuthToken
+              ? 'credentials file with OAuth token'
+              : 'credentials file with API key'
+        : 'no valid credentials found',
+    });
+
+    if (hasCliAuth) {
+      logger.info('✓ Claude Code CLI authentication detected');
+      return;
+    }
+  } catch (error) {
+    // Ignore errors checking CLI auth - will fall through to warning
+    logger.warn('Error checking for Claude Code CLI authentication:', error);
+  }
+
+  // No authentication found - show warning with paths that were checked
+  const wHeader = '⚠️  WARNING: No Claude authentication configured'.padEnd(BOX_CONTENT_WIDTH);
+  const w1 = 'The Claude Agent SDK requires authentication to function.'.padEnd(BOX_CONTENT_WIDTH);
+  const w2 = 'Options:'.padEnd(BOX_CONTENT_WIDTH);
+  const w3 = '1. Install Claude Code CLI and authenticate with subscription'.padEnd(
+    BOX_CONTENT_WIDTH
+  );
+  const w4 = '2. Set your Anthropic API key:'.padEnd(BOX_CONTENT_WIDTH);
+  const w5 = '   export ANTHROPIC_API_KEY="sk-ant-..."'.padEnd(BOX_CONTENT_WIDTH);
+  const w6 = '3. Use the setup wizard in Settings to configure authentication.'.padEnd(
+    BOX_CONTENT_WIDTH
+  );
+
+  // Build paths checked summary from the indicators (if available)
+  let pathsCheckedInfo = '';
+  if (cliAuthIndicators) {
+    const pathsChecked: string[] = [];
+
+    // Collect paths that were checked (paths are always populated strings)
+    pathsChecked.push(`Settings: ${cliAuthIndicators.checks.settingsFile.path}`);
+    pathsChecked.push(`Stats cache: ${cliAuthIndicators.checks.statsCache.path}`);
+    pathsChecked.push(`Projects dir: ${cliAuthIndicators.checks.projectsDir.path}`);
+    for (const credFile of cliAuthIndicators.checks.credentialFiles) {
+      pathsChecked.push(`Credentials: ${credFile.path}`);
+    }
+
+    if (pathsChecked.length > 0) {
+      pathsCheckedInfo = `
+║                                                                     ║
+║  ${'Paths checked:'.padEnd(BOX_CONTENT_WIDTH)}║
+${pathsChecked
+  .map((p) => {
+    const maxLen = BOX_CONTENT_WIDTH - 4;
+    const display = p.length > maxLen ? '...' + p.slice(-(maxLen - 3)) : p;
+    return `║    ${display.padEnd(maxLen)}  ║`;
+  })
+  .join('\n')}`;
+    }
+  }
+
+  logger.warn(`
+╔═════════════════════════════════════════════════════════════════════╗
+║  ${wHeader}║
+╠═════════════════════════════════════════════════════════════════════╣
+║                                                                     ║
+║  ${w1}║
+║                                                                     ║
+║  ${w2}║
+║  ${w3}║
+║  ${w4}║
+║  ${w5}║
+║  ${w6}║${pathsCheckedInfo}
+║                                                                     ║
+╚═════════════════════════════════════════════════════════════════════╝
+`);
+})();
+
+// Initialize security
+initAllowedPaths();
+
+// Create Express app
+const app = express();
+
+// Middleware
+// Custom colored logger showing only endpoint and status code (dynamically configurable)
+morgan.token('status-colored', (_req, res) => {
+  const status = res.statusCode;
+  if (status >= 500) return `\x1b[31m${status}\x1b[0m`; // Red for server errors
+  if (status >= 400) return `\x1b[33m${status}\x1b[0m`; // Yellow for client errors
+  if (status >= 300) return `\x1b[36m${status}\x1b[0m`; // Cyan for redirects
+  return `\x1b[32m${status}\x1b[0m`; // Green for success
+});
+
+app.use(
+  morgan(':method :url :status-colored', {
+    // Skip when request logging is disabled or for health check endpoints
+    skip: (req) =>
+      !requestLoggingEnabled ||
+      req.url === '/api/health' ||
+      req.url === '/api/auto-mode/context-exists',
+  })
+);
+// CORS configuration
+// When using credentials (cookies), origin cannot be '*'
+// We dynamically allow the requesting origin for local development
+
+// Check if origin is a local/private network address
+function isLocalOrigin(origin: string): boolean {
+  try {
+    const url = new URL(origin);
+    const hostname = url.hostname;
+    return (
+      hostname === 'localhost' ||
+      hostname === '127.0.0.1' ||
+      hostname === '[::1]' ||
+      hostname === '0.0.0.0' ||
+      hostname.startsWith('192.168.') ||
+      hostname.startsWith('10.') ||
+      /^172\.(1[6-9]|2[0-9]|3[0-1])\./.test(hostname)
+    );
+  } catch {
+    return false;
+  }
+}
+
+app.use(
+  cors({
+    origin: (origin, callback) => {
+      // Allow requests with no origin (like mobile apps, curl, Electron)
+      if (!origin) {
+        callback(null, true);
+        return;
+      }
+
+      // If CORS_ORIGIN is set, use it (can be comma-separated list)
+      const allowedOrigins = process.env.CORS_ORIGIN?.split(',')
+        .map((o) => o.trim())
+        .filter(Boolean);
+      if (allowedOrigins && allowedOrigins.length > 0) {
+        if (allowedOrigins.includes('*')) {
+          callback(null, true);
+          return;
+        }
+        if (allowedOrigins.includes(origin)) {
+          callback(null, origin);
+          return;
+        }
+        // Fall through to local network check below
+      }
+
+      // Allow all localhost/loopback/private network origins (any port)
+      if (isLocalOrigin(origin)) {
+        callback(null, origin);
+        return;
+      }
+
+      // Reject other origins by default for security
+      callback(new Error('Not allowed by CORS'));
+    },
+    credentials: true,
+  })
+);
+app.use(express.json({ limit: '50mb' }));
+app.use(cookieParser());
+
+// Create shared event emitter for streaming
+const events: EventEmitter = createEventEmitter();
+
+// Create services
+// Note: settingsService is created first so it can be injected into other services
+const settingsService = new SettingsService(DATA_DIR);
+const agentService = new AgentService(DATA_DIR, events, settingsService);
+const featureLoader = new FeatureLoader();
+
+// Auto-mode services: compatibility layer provides old interface while using new architecture
+const autoModeService = new AutoModeServiceCompat(events, settingsService, featureLoader);
+const claudeUsageService = new ClaudeUsageService();
+const codexAppServerService = new CodexAppServerService();
+const codexModelCacheService = new CodexModelCacheService(DATA_DIR, codexAppServerService);
+const codexUsageService = new CodexUsageService(codexAppServerService);
+const zaiUsageService = new ZaiUsageService();
+const geminiUsageService = new GeminiUsageService();
+const mcpTestService = new MCPTestService(settingsService);
+const ideationService = new IdeationService(events, settingsService, featureLoader);
+
+// Initialize DevServerService with event emitter for real-time log streaming
+const devServerService = getDevServerService();
+devServerService.initialize(DATA_DIR, events).catch((err) => {
+  logger.error('Failed to initialize DevServerService:', err);
+});
+
+// Initialize Notification Service with event emitter for real-time updates
+const notificationService = getNotificationService();
+notificationService.setEventEmitter(events);
+
+// Initialize Event History Service
+const eventHistoryService = getEventHistoryService();
+
+// Initialize Test Runner Service with event emitter for real-time test output streaming
+const testRunnerService = getTestRunnerService();
+testRunnerService.setEventEmitter(events);
+
+// Initialize Event Hook Service for custom event triggers (with history storage)
+eventHookService.initialize(events, settingsService, eventHistoryService, featureLoader);
+
+// Initialize services
+(async () => {
+  // Migrate settings from legacy Electron userData location if needed
+  // This handles users upgrading from versions that stored settings in ~/.config/Automaker (Linux),
+  // ~/Library/Application Support/Automaker (macOS), or %APPDATA%\Automaker (Windows)
+  // to the new shared ./data directory
+  try {
+    const migrationResult = await settingsService.migrateFromLegacyElectronPath();
+    if (migrationResult.migrated) {
+      logger.info(`Settings migrated from legacy location: ${migrationResult.legacyPath}`);
+      logger.info(`Migrated files: ${migrationResult.migratedFiles.join(', ')}`);
+    }
+    if (migrationResult.errors.length > 0) {
+      logger.warn('Migration errors:', migrationResult.errors);
+    }
+  } catch (err) {
+    logger.warn('Failed to check for legacy settings migration:', err);
+  }
+
+  // Fetch global settings once and reuse for logging config and feature reconciliation
+  let globalSettings: Awaited<ReturnType<typeof settingsService.getGlobalSettings>> | null = null;
+  try {
+    globalSettings = await settingsService.getGlobalSettings();
+  } catch {
+    logger.warn('Failed to load global settings, using defaults');
+  }
+
+  // Apply logging settings from saved settings
+  if (globalSettings) {
+    try {
+      if (
+        globalSettings.serverLogLevel &&
+        LOG_LEVEL_MAP[globalSettings.serverLogLevel] !== undefined
+      ) {
+        setLogLevel(LOG_LEVEL_MAP[globalSettings.serverLogLevel]);
+        logger.info(`Server log level set to: ${globalSettings.serverLogLevel}`);
+      }
+      // Apply request logging setting (default true if not set)
+      const enableRequestLog = globalSettings.enableRequestLogging ?? true;
+      setRequestLoggingEnabled(enableRequestLog);
+      logger.info(`HTTP request logging: ${enableRequestLog ? 'enabled' : 'disabled'}`);
+    } catch {
+      logger.warn('Failed to apply logging settings, using defaults');
+    }
+  }
+
+  await agentService.initialize();
+  logger.info('Agent service initialized');
+
+  // Reconcile feature states on startup
+  // After any type of restart (clean, forced, crash), features may be stuck in
+  // transient states (in_progress, interrupted, pipeline_*) that don't match reality.
+  // Reconcile them back to resting states before the UI is served.
+  if (globalSettings) {
+    try {
+      if (globalSettings.projects && globalSettings.projects.length > 0) {
+        let totalReconciled = 0;
+        for (const project of globalSettings.projects) {
+          const count = await autoModeService.reconcileFeatureStates(project.path);
+          totalReconciled += count;
+        }
+        if (totalReconciled > 0) {
+          logger.info(
+            `[STARTUP] Reconciled ${totalReconciled} feature(s) across ${globalSettings.projects.length} project(s)`
+          );
+        } else {
+          logger.info('[STARTUP] Feature state reconciliation complete - no stale states found');
+        }
+
+        // Resume interrupted features in the background for all projects.
+        // This handles features stuck in transient states (in_progress, pipeline_*)
+        // or explicitly marked as interrupted. Running in background so it doesn't block startup.
+        for (const project of globalSettings.projects) {
+          autoModeService.resumeInterruptedFeatures(project.path).catch((err) => {
+            logger.warn(
+              `[STARTUP] Failed to resume interrupted features for ${project.path}:`,
+              err
+            );
+          });
+        }
+        logger.info('[STARTUP] Initiated background resume of interrupted features');
+      }
+    } catch (err) {
+      logger.warn('[STARTUP] Failed to reconcile feature states:', err);
+    }
+  }
+
+  // Bootstrap Codex model cache in background (don't block server startup)
+  void codexModelCacheService.getModels().catch((err) => {
+    logger.error('Failed to bootstrap Codex model cache:', err);
+  });
+})();
+
+// Run stale validation cleanup every hour to prevent memory leaks from crashed validations
+const VALIDATION_CLEANUP_INTERVAL_MS = 60 * 60 * 1000; // 1 hour
+setInterval(() => {
+  const cleaned = cleanupStaleValidations();
+  if (cleaned > 0) {
+    logger.info(`Cleaned up ${cleaned} stale validation entries`);
+  }
+}, VALIDATION_CLEANUP_INTERVAL_MS);
+
+// Require Content-Type: application/json for all API POST/PUT/PATCH requests
+// This helps prevent CSRF and content-type confusion attacks
+app.use('/api', requireJsonContentType);
+
+// Mount API routes - health, auth, and setup are unauthenticated
+app.use('/api/health', createHealthRoutes());
+app.use('/api/auth', createAuthRoutes());
+app.use('/api/setup', createSetupRoutes());
+
+// Apply authentication to all other routes
+app.use('/api', authMiddleware);
+
+// Protected health endpoint with detailed info
+app.get('/api/health/detailed', createDetailedHandler());
+
+app.use('/api/fs', createFsRoutes(events));
+app.use('/api/agent', createAgentRoutes(agentService, events));
+app.use('/api/sessions', createSessionsRoutes(agentService));
+app.use(
+  '/api/features',
+  createFeaturesRoutes(featureLoader, settingsService, events, autoModeService)
+);
+app.use('/api/auto-mode', createAutoModeRoutes(autoModeService));
+app.use('/api/enhance-prompt', createEnhancePromptRoutes(settingsService));
+app.use('/api/worktree', createWorktreeRoutes(events, settingsService, featureLoader));
+app.use('/api/git', createGitRoutes());
+app.use('/api/models', createModelsRoutes());
+app.use('/api/spec-regeneration', createSpecRegenerationRoutes(events, settingsService));
+app.use('/api/running-agents', createRunningAgentsRoutes(autoModeService));
+app.use('/api/workspace', createWorkspaceRoutes());
+app.use('/api/templates', createTemplatesRoutes());
+app.use('/api/terminal', createTerminalRoutes());
+app.use('/api/settings', createSettingsRoutes(settingsService));
+app.use('/api/claude', createClaudeRoutes(claudeUsageService));
+app.use('/api/codex', createCodexRoutes(codexUsageService, codexModelCacheService));
+app.use('/api/zai', createZaiRoutes(zaiUsageService, settingsService));
+app.use('/api/gemini', createGeminiRoutes(geminiUsageService, events));
+app.use('/api/github', createGitHubRoutes(events, settingsService));
+app.use('/api/context', createContextRoutes(settingsService));
+app.use('/api/backlog-plan', createBacklogPlanRoutes(events, settingsService));
+app.use('/api/mcp', createMCPRoutes(mcpTestService));
+app.use('/api/pipeline', createPipelineRoutes(pipelineService));
+app.use('/api/ideation', createIdeationRoutes(events, ideationService, featureLoader));
+app.use('/api/notifications', createNotificationsRoutes(notificationService));
+app.use('/api/event-history', createEventHistoryRoutes(eventHistoryService, settingsService));
+app.use(
+  '/api/projects',
+  createProjectsRoutes(featureLoader, autoModeService, settingsService, notificationService)
+);
+
+// Create HTTP server
+const server = createServer(app);
+
+// WebSocket servers using noServer mode for proper multi-path support
+const wss = new WebSocketServer({ noServer: true });
+const terminalWss = new WebSocketServer({ noServer: true });
+const terminalService = getTerminalService(settingsService);
+
+/**
+ * Authenticate WebSocket upgrade requests
+ * Checks for API key in header/query, session token in header/query, OR valid session cookie
+ */
+function authenticateWebSocket(request: import('http').IncomingMessage): boolean {
+  const url = new URL(request.url || '', `http://${request.headers.host}`);
+
+  // Convert URL search params to query object
+  const query: Record<string, string | undefined> = {};
+  url.searchParams.forEach((value, key) => {
+    query[key] = value;
+  });
+
+  // Parse cookies from header
+  const cookieHeader = request.headers.cookie;
+  const cookies = cookieHeader ? cookie.parse(cookieHeader) : {};
+
+  // Use shared authentication logic for standard auth methods
+  if (
+    checkRawAuthentication(
+      request.headers as Record<string, string | string[] | undefined>,
+      query,
+      cookies
+    )
+  ) {
+    return true;
+  }
+
+  // Additionally check for short-lived WebSocket connection token (WebSocket-specific)
+  const wsToken = url.searchParams.get('wsToken');
+  if (wsToken && validateWsConnectionToken(wsToken)) {
+    return true;
+  }
+
+  return false;
+}
+
+// Handle HTTP upgrade requests manually to route to correct WebSocket server
+server.on('upgrade', (request, socket, head) => {
+  const { pathname } = new URL(request.url || '', `http://${request.headers.host}`);
+
+  // Authenticate all WebSocket connections
+  if (!authenticateWebSocket(request)) {
+    logger.info('Authentication failed, rejecting connection');
+    socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
+    socket.destroy();
+    return;
+  }
+
+  if (pathname === '/api/events') {
+    wss.handleUpgrade(request, socket, head, (ws) => {
+      wss.emit('connection', ws, request);
+    });
+  } else if (pathname === '/api/terminal/ws') {
+    terminalWss.handleUpgrade(request, socket, head, (ws) => {
+      terminalWss.emit('connection', ws, request);
+    });
+  } else {
+    socket.destroy();
+  }
+});
+
+// Events WebSocket connection handler
+wss.on('connection', (ws: WebSocket) => {
+  logger.info('Client connected, ready state:', ws.readyState);
+
+  // Subscribe to all events and forward to this client
+  const unsubscribe = events.subscribe((type, payload) => {
+    // Use debug level for high-frequency events to avoid log spam
+    // that causes progressive memory growth and server slowdown
+    const isHighFrequency =
+      type === 'dev-server:output' || type === 'test-runner:output' || type === 'feature:progress';
+    const log = isHighFrequency ? logger.debug.bind(logger) : logger.info.bind(logger);
+
+    log('Event received:', {
+      type,
+      hasPayload: !!payload,
+      wsReadyState: ws.readyState,
+    });
+
+    if (ws.readyState === WebSocket.OPEN) {
+      const message = JSON.stringify({ type, payload });
+      ws.send(message);
+    } else {
+      logger.warn('Cannot send event, WebSocket not open. ReadyState:', ws.readyState);
+    }
+  });
+
+  ws.on('close', () => {
+    logger.info('Client disconnected');
+    unsubscribe();
+  });
+
+  ws.on('error', (error) => {
+    logger.error('ERROR:', error);
+    unsubscribe();
+  });
+});
+
+// Track WebSocket connections per session
+const terminalConnections: Map<string, Set<WebSocket>> = new Map();
+// Track last resize dimensions per session to deduplicate resize messages
+const lastResizeDimensions: Map<string, { cols: number; rows: number }> = new Map();
+// Track last resize timestamp to rate-limit resize operations (prevents resize storm)
+const lastResizeTime: Map<string, number> = new Map();
+const RESIZE_MIN_INTERVAL_MS = 100; // Minimum 100ms between resize operations
+
+// Clean up resize tracking when sessions actually exit (not just when connections close)
+terminalService.onExit((sessionId) => {
+  lastResizeDimensions.delete(sessionId);
+  lastResizeTime.delete(sessionId);
+  terminalConnections.delete(sessionId);
+});
+
+// Terminal WebSocket connection handler
+terminalWss.on('connection', (ws: WebSocket, req: import('http').IncomingMessage) => {
+  // Parse URL to get session ID and token
+  const url = new URL(req.url || '', `http://${req.headers.host}`);
+  const sessionId = url.searchParams.get('sessionId');
+  const token = url.searchParams.get('token');
+
+  logger.info(`Connection attempt for session: ${sessionId}`);
+
+  // Check if terminal is enabled
+  if (!isTerminalEnabled()) {
+    logger.info('Terminal is disabled');
+    ws.close(4003, 'Terminal access is disabled');
+    return;
+  }
+
+  // Validate token if password is required
+  if (isTerminalPasswordRequired() && !validateTerminalToken(token || undefined)) {
+    logger.info('Invalid or missing token');
+    ws.close(4001, 'Authentication required');
+    return;
+  }
+
+  if (!sessionId) {
+    logger.info('No session ID provided');
+    ws.close(4002, 'Session ID required');
+    return;
+  }
+
+  // Check if session exists
+  const session = terminalService.getSession(sessionId);
+  if (!session) {
+    logger.warn(
+      `Terminal session ${sessionId} not found. ` +
+        `The session may have exited, been deleted, or was never created. ` +
+        `Active terminal sessions: ${terminalService.getSessionCount()}`
+    );
+    ws.close(
+      4004,
+      'Session not found. The terminal session may have expired or been closed. Please create a new terminal.'
+    );
+    return;
+  }
+
+  logger.info(`Client connected to session ${sessionId}`);
+
+  // Track this connection
+  if (!terminalConnections.has(sessionId)) {
+    terminalConnections.set(sessionId, new Set());
+  }
+  terminalConnections.get(sessionId)!.add(ws);
+
+  // Send initial connection success FIRST
+  ws.send(
+    JSON.stringify({
+      type: 'connected',
+      sessionId,
+      shell: session.shell,
+      cwd: session.cwd,
+    })
+  );
+
+  // Send scrollback buffer BEFORE subscribing to prevent race condition
+  // Also clear pending output buffer to prevent duplicates from throttled flush
+  const scrollback = terminalService.getScrollbackAndClearPending(sessionId);
+  if (scrollback && scrollback.length > 0) {
+    ws.send(
+      JSON.stringify({
+        type: 'scrollback',
+        data: scrollback,
+      })
+    );
+  }
+
+  // NOW subscribe to terminal data (after scrollback is sent)
+  const unsubscribeData = terminalService.onData((sid, data) => {
+    if (sid === sessionId && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'data', data }));
+    }
+  });
+
+  // Subscribe to terminal exit
+  const unsubscribeExit = terminalService.onExit((sid, exitCode) => {
+    if (sid === sessionId && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'exit', exitCode }));
+      ws.close(1000, 'Session ended');
+    }
+  });
+
+  // Handle incoming messages
+  ws.on('message', (message) => {
+    try {
+      const msg = JSON.parse(message.toString());
+
+      switch (msg.type) {
+        case 'input':
+          // Validate input data type and length
+          if (typeof msg.data !== 'string') {
+            ws.send(JSON.stringify({ type: 'error', message: 'Invalid input type' }));
+            break;
+          }
+          // Limit input size to 1MB to prevent memory issues
+          if (msg.data.length > 1024 * 1024) {
+            ws.send(JSON.stringify({ type: 'error', message: 'Input too large' }));
+            break;
+          }
+          // Write user input to terminal
+          terminalService.write(sessionId, msg.data);
+          break;
+
+        case 'resize':
+          // Validate resize dimensions are positive integers within reasonable bounds
+          if (
+            typeof msg.cols !== 'number' ||
+            typeof msg.rows !== 'number' ||
+            !Number.isInteger(msg.cols) ||
+            !Number.isInteger(msg.rows) ||
+            msg.cols < 1 ||
+            msg.cols > 1000 ||
+            msg.rows < 1 ||
+            msg.rows > 500
+          ) {
+            break; // Silently ignore invalid resize requests
+          }
+          // Resize terminal with deduplication and rate limiting
+          if (msg.cols && msg.rows) {
+            const now = Date.now();
+            const lastTime = lastResizeTime.get(sessionId) || 0;
+            const lastDimensions = lastResizeDimensions.get(sessionId);
+
+            // Skip if resized too recently (prevents resize storm during splits)
+            if (now - lastTime < RESIZE_MIN_INTERVAL_MS) {
+              break;
+            }
+
+            // Check if dimensions are different from last resize
+            if (
+              !lastDimensions ||
+              lastDimensions.cols !== msg.cols ||
+              lastDimensions.rows !== msg.rows
+            ) {
+              // Only suppress output on subsequent resizes, not the first one
+              // The first resize happens on terminal open and we don't want to drop the initial prompt
+              const isFirstResize = !lastDimensions;
+              terminalService.resize(sessionId, msg.cols, msg.rows, !isFirstResize);
+              lastResizeDimensions.set(sessionId, {
+                cols: msg.cols,
+                rows: msg.rows,
+              });
+              lastResizeTime.set(sessionId, now);
+            }
+          }
+          break;
+
+        case 'ping':
+          // Respond to ping
+          ws.send(JSON.stringify({ type: 'pong' }));
+          break;
+
+        default:
+          logger.warn(`Unknown message type: ${msg.type}`);
+      }
+    } catch (error) {
+      logger.error('Error processing message:', error);
+    }
+  });
+
+  ws.on('close', () => {
+    logger.info(`Client disconnected from session ${sessionId}`);
+    unsubscribeData();
+    unsubscribeExit();
+
+    // Remove from connections tracking
+    const connections = terminalConnections.get(sessionId);
+    if (connections) {
+      connections.delete(ws);
+      if (connections.size === 0) {
+        terminalConnections.delete(sessionId);
+        // DON'T delete lastResizeDimensions/lastResizeTime here!
+        // The session still exists, and reconnecting clients need to know
+        // this isn't the "first resize" to prevent duplicate prompts.
+        // These get cleaned up when the session actually exits.
+      }
+    }
+  });
+
+  ws.on('error', (error) => {
+    logger.error(`Error on session ${sessionId}:`, error);
+    unsubscribeData();
+    unsubscribeExit();
+  });
+});
+
+// Start server with error handling for port conflicts
+const startServer = (port: number, host: string) => {
+  server.listen(port, host, () => {
+    const terminalStatus = isTerminalEnabled()
+      ? isTerminalPasswordRequired()
+        ? 'enabled (password protected)'
+        : 'enabled'
+      : 'disabled';
+
+    // Build URLs for display
+    const listenAddr = `${host}:${port}`;
+    const httpUrl = `http://${HOSTNAME}:${port}`;
+    const wsEventsUrl = `ws://${HOSTNAME}:${port}/api/events`;
+    const wsTerminalUrl = `ws://${HOSTNAME}:${port}/api/terminal/ws`;
+    const healthUrl = `http://${HOSTNAME}:${port}/api/health`;
+
+    const sHeader = '🚀 Automaker Backend Server'.padEnd(BOX_CONTENT_WIDTH);
+    const s1 = `Listening:    ${listenAddr}`.padEnd(BOX_CONTENT_WIDTH);
+    const s2 = `HTTP API:     ${httpUrl}`.padEnd(BOX_CONTENT_WIDTH);
+    const s3 = `WebSocket:    ${wsEventsUrl}`.padEnd(BOX_CONTENT_WIDTH);
+    const s4 = `Terminal WS:  ${wsTerminalUrl}`.padEnd(BOX_CONTENT_WIDTH);
+    const s5 = `Health:       ${healthUrl}`.padEnd(BOX_CONTENT_WIDTH);
+    const s6 = `Terminal:     ${terminalStatus}`.padEnd(BOX_CONTENT_WIDTH);
+
+    logger.info(`
+╔═════════════════════════════════════════════════════════════════════╗
+║  ${sHeader}║
+╠═════════════════════════════════════════════════════════════════════╣
+║                                                                     ║
+║  ${s1}║
+║  ${s2}║
+║  ${s3}║
+║  ${s4}║
+║  ${s5}║
+║  ${s6}║
+║                                                                     ║
+╚═════════════════════════════════════════════════════════════════════╝
+`);
+  });
+
+  server.on('error', (error: NodeJS.ErrnoException) => {
+    if (error.code === 'EADDRINUSE') {
+      const portStr = port.toString();
+      const nextPortStr = (port + 1).toString();
+      const killCmd = `lsof -ti:${portStr} | xargs kill -9`;
+      const altCmd = `PORT=${nextPortStr} npm run dev:server`;
+
+      const eHeader = `❌ ERROR: Port ${portStr} is already in use`.padEnd(BOX_CONTENT_WIDTH);
+      const e1 = 'Another process is using this port.'.padEnd(BOX_CONTENT_WIDTH);
+      const e2 = 'To fix this, try one of:'.padEnd(BOX_CONTENT_WIDTH);
+      const e3 = '1. Kill the process using the port:'.padEnd(BOX_CONTENT_WIDTH);
+      const e4 = `   ${killCmd}`.padEnd(BOX_CONTENT_WIDTH);
+      const e5 = '2. Use a different port:'.padEnd(BOX_CONTENT_WIDTH);
+      const e6 = `   ${altCmd}`.padEnd(BOX_CONTENT_WIDTH);
+      const e7 = '3. Use the init.sh script which handles this:'.padEnd(BOX_CONTENT_WIDTH);
+      const e8 = '   ./init.sh'.padEnd(BOX_CONTENT_WIDTH);
+
+      logger.error(`
+╔═════════════════════════════════════════════════════════════════════╗
+║  ${eHeader}║
+╠═════════════════════════════════════════════════════════════════════╣
+║                                                                     ║
+║  ${e1}║
+║                                                                     ║
+║  ${e2}║
+║                                                                     ║
+║  ${e3}║
+║  ${e4}║
+║                                                                     ║
+║  ${e5}║
+║  ${e6}║
+║                                                                     ║
+║  ${e7}║
+║  ${e8}║
+║                                                                     ║
+╚═════════════════════════════════════════════════════════════════════╝
+`);
+      process.exit(1);
+    } else {
+      logger.error('Error starting server:', error);
+      process.exit(1);
+    }
+  });
+};
+
+startServer(PORT, HOST);
+
+// Global error handlers to prevent crashes from uncaught errors
+process.on('unhandledRejection', (reason: unknown, _promise: Promise<unknown>) => {
+  logger.error('Unhandled Promise Rejection:', {
+    reason: reason instanceof Error ? reason.message : String(reason),
+    stack: reason instanceof Error ? reason.stack : undefined,
+  });
+  // Don't exit - log the error and continue running
+  // This prevents the server from crashing due to unhandled rejections
+});
+
+process.on('uncaughtException', (error: Error) => {
+  logger.error('Uncaught Exception:', {
+    message: error.message,
+    stack: error.stack,
+  });
+  // Exit on uncaught exceptions to prevent undefined behavior
+  // The process is in an unknown state after an uncaught exception
+  process.exit(1);
+});
+
+// Graceful shutdown timeout (30 seconds)
+const SHUTDOWN_TIMEOUT_MS = 30000;
+
+// Graceful shutdown helper
+const gracefulShutdown = async (signal: string) => {
+  logger.info(`${signal} received, shutting down...`);
+
+  // Set up a force-exit timeout to prevent hanging
+  const forceExitTimeout = setTimeout(() => {
+    logger.error(`Shutdown timed out after ${SHUTDOWN_TIMEOUT_MS}ms, forcing exit`);
+    process.exit(1);
+  }, SHUTDOWN_TIMEOUT_MS);
+
+  // Mark all running features as interrupted before shutdown
+  // This ensures they can be resumed when the server restarts
+  // Note: markAllRunningFeaturesInterrupted handles errors internally and never rejects
+  await autoModeService.markAllRunningFeaturesInterrupted(`${signal} signal received`);
+
+  terminalService.cleanup();
+  server.close(() => {
+    clearTimeout(forceExitTimeout);
+    logger.info('Server closed');
+    process.exit(0);
+  });
+};
+
+process.on('SIGTERM', () => {
+  gracefulShutdown('SIGTERM');
+});
+
+process.on('SIGINT', () => {
+  gracefulShutdown('SIGINT');
+});
diff --git a/temp_repo/apps/server/src/lib/agent-discovery.ts b/temp_repo/apps/server/src/lib/agent-discovery.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b831bdecf65418627a67ffbfb2579cb97ad61180
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/agent-discovery.ts
@@ -0,0 +1,257 @@
+/**
+ * Agent Discovery - Scans filesystem for AGENT.md files
+ *
+ * Discovers agents from:
+ * - ~/.claude/agents/ (user-level, global)
+ * - .claude/agents/ (project-level)
+ *
+ * Similar to Skills, but for custom subagents defined in AGENT.md files.
+ */
+
+import path from 'path';
+import os from 'os';
+import { createLogger } from '@automaker/utils';
+import { secureFs, systemPaths } from '@automaker/platform';
+import type { AgentDefinition } from '@automaker/types';
+
+const logger = createLogger('AgentDiscovery');
+
+export interface FilesystemAgent {
+  name: string; // Directory name (e.g., 'code-reviewer')
+  definition: AgentDefinition;
+  source: 'user' | 'project';
+  filePath: string; // Full path to AGENT.md
+}
+
+/**
+ * Parse agent content string into AgentDefinition
+ * Format:
+ * ---
+ * name: agent-name  # Optional
+ * description: When to use this agent
+ * tools: tool1, tool2, tool3  # Optional (comma or space separated list)
+ * model: sonnet  # Optional: sonnet, opus, haiku
+ * ---
+ * System prompt content here...
+ */
+function parseAgentContent(content: string, filePath: string): AgentDefinition | null {
+  // Extract frontmatter
+  const frontmatterMatch = content.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
+  if (!frontmatterMatch) {
+    logger.warn(`Invalid agent file format (missing frontmatter): ${filePath}`);
+    return null;
+  }
+
+  const [, frontmatter, prompt] = frontmatterMatch;
+
+  // Parse description (required)
+  const description = frontmatter.match(/description:\s*(.+)/)?.[1]?.trim();
+  if (!description) {
+    logger.warn(`Missing description in agent file: ${filePath}`);
+    return null;
+  }
+
+  // Parse tools (optional) - supports both comma-separated and space-separated
+  const toolsMatch = frontmatter.match(/tools:\s*(.+)/);
+  const tools = toolsMatch
+    ? toolsMatch[1]
+        .split(/[,\s]+/) // Split by comma or whitespace
+        .map((t) => t.trim())
+        .filter((t) => t && t !== '')
+    : undefined;
+
+  // Parse model (optional) - validate against allowed values
+  const modelMatch = frontmatter.match(/model:\s*(\w+)/);
+  const modelValue = modelMatch?.[1]?.trim();
+  const validModels = ['sonnet', 'opus', 'haiku', 'inherit'] as const;
+  const model =
+    modelValue && validModels.includes(modelValue as (typeof validModels)[number])
+      ? (modelValue as 'sonnet' | 'opus' | 'haiku' | 'inherit')
+      : undefined;
+
+  if (modelValue && !model) {
+    logger.warn(
+      `Invalid model "${modelValue}" in agent file: ${filePath}. Expected one of: ${validModels.join(', ')}`
+    );
+  }
+
+  return {
+    description,
+    prompt: prompt.trim(),
+    tools,
+    model,
+  };
+}
+
+/**
+ * Directory entry with type information
+ */
+interface DirEntry {
+  name: string;
+  isFile: boolean;
+  isDirectory: boolean;
+}
+
+/**
+ * Filesystem adapter interface for abstracting systemPaths vs secureFs
+ */
+interface FsAdapter {
+  exists: (filePath: string) => Promise<boolean>;
+  readdir: (dirPath: string) => Promise<DirEntry[]>;
+  readFile: (filePath: string) => Promise<string>;
+}
+
+/**
+ * Create a filesystem adapter for system paths (user directory)
+ */
+function createSystemPathAdapter(): FsAdapter {
+  return {
+    exists: (filePath) => Promise.resolve(systemPaths.systemPathExists(filePath)),
+    readdir: async (dirPath) => {
+      const entryNames = await systemPaths.systemPathReaddir(dirPath);
+      const entries: DirEntry[] = [];
+      for (const name of entryNames) {
+        const stat = await systemPaths.systemPathStat(path.join(dirPath, name));
+        entries.push({
+          name,
+          isFile: stat.isFile(),
+          isDirectory: stat.isDirectory(),
+        });
+      }
+      return entries;
+    },
+    readFile: (filePath) => systemPaths.systemPathReadFile(filePath, 'utf-8') as Promise<string>,
+  };
+}
+
+/**
+ * Create a filesystem adapter for project paths (secureFs)
+ */
+function createSecureFsAdapter(): FsAdapter {
+  return {
+    exists: (filePath) =>
+      secureFs
+        .access(filePath)
+        .then(() => true)
+        .catch(() => false),
+    readdir: async (dirPath) => {
+      const entries = await secureFs.readdir(dirPath, { withFileTypes: true });
+      return entries.map((entry) => ({
+        name: entry.name,
+        isFile: entry.isFile(),
+        isDirectory: entry.isDirectory(),
+      }));
+    },
+    readFile: (filePath) => secureFs.readFile(filePath, 'utf-8') as Promise<string>,
+  };
+}
+
+/**
+ * Parse agent file using the provided filesystem adapter
+ */
+async function parseAgentFileWithAdapter(
+  filePath: string,
+  fsAdapter: FsAdapter
+): Promise<AgentDefinition | null> {
+  try {
+    const content = await fsAdapter.readFile(filePath);
+    return parseAgentContent(content, filePath);
+  } catch (error) {
+    logger.error(`Failed to parse agent file: ${filePath}`, error);
+    return null;
+  }
+}
+
+/**
+ * Scan a directory for agent .md files
+ * Agents can be in two formats:
+ * 1. Flat: agent-name.md (file directly in agents/)
+ * 2. Subdirectory: agent-name/AGENT.md (folder + file, similar to Skills)
+ */
+async function scanAgentsDirectory(
+  baseDir: string,
+  source: 'user' | 'project'
+): Promise<FilesystemAgent[]> {
+  const agents: FilesystemAgent[] = [];
+  const fsAdapter = source === 'user' ? createSystemPathAdapter() : createSecureFsAdapter();
+
+  try {
+    // Check if directory exists
+    const exists = await fsAdapter.exists(baseDir);
+    if (!exists) {
+      logger.debug(`Directory does not exist: ${baseDir}`);
+      return agents;
+    }
+
+    // Read all entries in the directory
+    const entries = await fsAdapter.readdir(baseDir);
+
+    for (const entry of entries) {
+      // Check for flat .md file format (agent-name.md)
+      if (entry.isFile && entry.name.endsWith('.md')) {
+        const agentName = entry.name.slice(0, -3); // Remove .md extension
+        const agentFilePath = path.join(baseDir, entry.name);
+        const definition = await parseAgentFileWithAdapter(agentFilePath, fsAdapter);
+        if (definition) {
+          agents.push({
+            name: agentName,
+            definition,
+            source,
+            filePath: agentFilePath,
+          });
+          logger.debug(`Discovered ${source} agent (flat): ${agentName}`);
+        }
+      }
+      // Check for subdirectory format (agent-name/AGENT.md)
+      else if (entry.isDirectory) {
+        const agentFilePath = path.join(baseDir, entry.name, 'AGENT.md');
+        const agentFileExists = await fsAdapter.exists(agentFilePath);
+
+        if (agentFileExists) {
+          const definition = await parseAgentFileWithAdapter(agentFilePath, fsAdapter);
+          if (definition) {
+            agents.push({
+              name: entry.name,
+              definition,
+              source,
+              filePath: agentFilePath,
+            });
+            logger.debug(`Discovered ${source} agent (subdirectory): ${entry.name}`);
+          }
+        }
+      }
+    }
+  } catch (error) {
+    logger.error(`Failed to scan agents directory: ${baseDir}`, error);
+  }
+
+  return agents;
+}
+
+/**
+ * Discover all filesystem-based agents from user and project sources
+ */
+export async function discoverFilesystemAgents(
+  projectPath?: string,
+  sources: Array<'user' | 'project'> = ['user', 'project']
+): Promise<FilesystemAgent[]> {
+  const agents: FilesystemAgent[] = [];
+
+  // Discover user-level agents from ~/.claude/agents/
+  if (sources.includes('user')) {
+    const userAgentsDir = path.join(os.homedir(), '.claude', 'agents');
+    const userAgents = await scanAgentsDirectory(userAgentsDir, 'user');
+    agents.push(...userAgents);
+    logger.info(`Discovered ${userAgents.length} user-level agents from ${userAgentsDir}`);
+  }
+
+  // Discover project-level agents from .claude/agents/
+  if (sources.includes('project') && projectPath) {
+    const projectAgentsDir = path.join(projectPath, '.claude', 'agents');
+    const projectAgents = await scanAgentsDirectory(projectAgentsDir, 'project');
+    agents.push(...projectAgents);
+    logger.info(`Discovered ${projectAgents.length} project-level agents from ${projectAgentsDir}`);
+  }
+
+  return agents;
+}
diff --git a/temp_repo/apps/server/src/lib/app-spec-format.ts b/temp_repo/apps/server/src/lib/app-spec-format.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f8393cf1e04bd1c02a95863a46a9228c9a54db06
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/app-spec-format.ts
@@ -0,0 +1,210 @@
+/**
+ * XML Template Format Specification for app_spec.txt
+ *
+ * This format must be included in all prompts that generate, modify, or regenerate
+ * app specifications to ensure consistency across the application.
+ */
+
+// Import and re-export spec types from shared package
+export type { SpecOutput } from '@automaker/types';
+export { specOutputSchema } from '@automaker/types';
+
+/**
+ * Escape special XML characters
+ * Handles undefined/null values by converting them to empty strings
+ */
+export function escapeXml(str: string | undefined | null): string {
+  if (str == null) {
+    return '';
+  }
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+}
+
+/**
+ * Convert structured spec output to XML format
+ */
+export function specToXml(spec: import('@automaker/types').SpecOutput): string {
+  const indent = '  ';
+
+  let xml = `<?xml version="1.0" encoding="UTF-8"?>
+<project_specification>
+${indent}<project_name>${escapeXml(spec.project_name)}</project_name>
+
+${indent}<overview>
+${indent}${indent}${escapeXml(spec.overview)}
+${indent}</overview>
+
+${indent}<technology_stack>
+${spec.technology_stack.map((t) => `${indent}${indent}<technology>${escapeXml(t)}</technology>`).join('\n')}
+${indent}</technology_stack>
+
+${indent}<core_capabilities>
+${spec.core_capabilities.map((c) => `${indent}${indent}<capability>${escapeXml(c)}</capability>`).join('\n')}
+${indent}</core_capabilities>
+
+${indent}<implemented_features>
+${spec.implemented_features
+  .map(
+    (f) => `${indent}${indent}<feature>
+${indent}${indent}${indent}<name>${escapeXml(f.name)}</name>
+${indent}${indent}${indent}<description>${escapeXml(f.description)}</description>${
+      f.file_locations && f.file_locations.length > 0
+        ? `\n${indent}${indent}${indent}<file_locations>
+${f.file_locations.map((loc) => `${indent}${indent}${indent}${indent}<location>${escapeXml(loc)}</location>`).join('\n')}
+${indent}${indent}${indent}</file_locations>`
+        : ''
+    }
+${indent}${indent}</feature>`
+  )
+  .join('\n')}
+${indent}</implemented_features>`;
+
+  // Optional sections
+  if (spec.additional_requirements && spec.additional_requirements.length > 0) {
+    xml += `
+
+${indent}<additional_requirements>
+${spec.additional_requirements.map((r) => `${indent}${indent}<requirement>${escapeXml(r)}</requirement>`).join('\n')}
+${indent}</additional_requirements>`;
+  }
+
+  if (spec.development_guidelines && spec.development_guidelines.length > 0) {
+    xml += `
+
+${indent}<development_guidelines>
+${spec.development_guidelines.map((g) => `${indent}${indent}<guideline>${escapeXml(g)}</guideline>`).join('\n')}
+${indent}</development_guidelines>`;
+  }
+
+  if (spec.implementation_roadmap && spec.implementation_roadmap.length > 0) {
+    xml += `
+
+${indent}<implementation_roadmap>
+${spec.implementation_roadmap
+  .map(
+    (r) => `${indent}${indent}<phase>
+${indent}${indent}${indent}<name>${escapeXml(r.phase)}</name>
+${indent}${indent}${indent}<status>${escapeXml(r.status)}</status>
+${indent}${indent}${indent}<description>${escapeXml(r.description)}</description>
+${indent}${indent}</phase>`
+  )
+  .join('\n')}
+${indent}</implementation_roadmap>`;
+  }
+
+  xml += `
+</project_specification>`;
+
+  return xml;
+}
+
+/**
+ * Get prompt instruction for structured output (simpler than XML instructions)
+ */
+export function getStructuredSpecPromptInstruction(): string {
+  return `
+Analyze the project and provide a comprehensive specification with:
+
+1. **project_name**: The name of the project
+2. **overview**: A comprehensive description of what the project does, its purpose, and key goals
+3. **technology_stack**: List all technologies, frameworks, libraries, and tools used
+4. **core_capabilities**: List the main features and capabilities the project provides
+5. **implemented_features**: For each implemented feature, provide:
+   - name: Feature name
+   - description: What it does
+   - file_locations: Key files where it's implemented (optional)
+6. **additional_requirements**: Any system requirements, dependencies, or constraints (optional)
+7. **development_guidelines**: Development standards and best practices (optional)
+8. **implementation_roadmap**: Project phases with status (completed/in_progress/pending) (optional)
+
+Be thorough in your analysis. The output will be automatically formatted as structured JSON.
+`;
+}
+export const APP_SPEC_XML_FORMAT = `
+The app_spec.txt file MUST follow this exact XML format:
+
+<project_specification>
+  <project_name>Project Name</project_name>
+
+  <overview>
+    A comprehensive description of what the project does, its purpose, and key goals.
+  </overview>
+
+  <technology_stack>
+    <technology>Technology 1</technology>
+    <technology>Technology 2</technology>
+    <!-- List all technologies, frameworks, libraries, and tools used -->
+  </technology_stack>
+
+  <core_capabilities>
+    <capability>Core capability 1</capability>
+    <capability>Core capability 2</capability>
+    <!-- List main features and capabilities the project provides -->
+  </core_capabilities>
+
+  <implemented_features>
+    <!-- Features that have been implemented (populated by AI agent based on code analysis) -->
+  </implemented_features>
+
+  <!-- Optional sections that may be included: -->
+  <additional_requirements>
+    <!-- Any additional requirements or constraints -->
+  </additional_requirements>
+
+  <development_guidelines>
+    <guideline>Guideline 1</guideline>
+    <guideline>Guideline 2</guideline>
+    <!-- Development standards and practices -->
+  </development_guidelines>
+
+  <implementation_roadmap>
+    <!-- Phases or roadmap items for implementation -->
+  </implementation_roadmap>
+</project_specification>
+
+IMPORTANT: 
+- All content must be wrapped in valid XML tags
+- Use proper XML escaping for special characters (&lt;, &gt;, &amp;)
+- Maintain proper indentation (2 spaces)
+- All sections should be populated based on project analysis
+- The format must be strictly followed - do not use markdown, JSON, or any other format
+`;
+
+/**
+ * Returns a prompt suffix that instructs the AI to format the response as XML
+ * following the app_spec.txt template format.
+ */
+export function getAppSpecFormatInstruction(): string {
+  return `
+${APP_SPEC_XML_FORMAT}
+
+CRITICAL FORMATTING REQUIREMENTS:
+- Do NOT use the Write, Edit, or Bash tools to create files - just OUTPUT the XML in your response
+- Your ENTIRE response MUST be valid XML following the exact template structure above
+- Do NOT use markdown formatting (no # headers, no **bold**, no - lists, etc.)
+- Do NOT include any explanatory text, prefix, or suffix outside the XML tags
+- Do NOT include phrases like "Based on my analysis...", "I'll create...", "Let me analyze..." before the XML
+- Do NOT include any text before <project_specification> or after </project_specification>
+- Your response must start IMMEDIATELY with <project_specification> with no preceding text
+- Your response must end IMMEDIATELY with </project_specification> with no following text
+- Use ONLY XML tags as shown in the template
+- Properly escape XML special characters (&lt; for <, &gt; for >, &amp; for &)
+- Maintain 2-space indentation for readability
+- The output will be saved directly to app_spec.txt and must be parseable as valid XML
+- The response must contain exactly ONE root XML element: <project_specification>
+- Do not include code blocks, markdown fences, or any other formatting
+
+VERIFICATION: Before responding, verify that:
+1. Your response starts with <project_specification> (no spaces, no text before it)
+2. Your response ends with </project_specification> (no spaces, no text after it)
+3. There is exactly one root XML element
+4. There is no explanatory text, analysis, or commentary outside the XML tags
+
+Your response should be ONLY the XML content, nothing else.
+`;
+}
diff --git a/temp_repo/apps/server/src/lib/auth-utils.ts b/temp_repo/apps/server/src/lib/auth-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..936d22779def91b1a1529c44b76efb15186696bc
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/auth-utils.ts
@@ -0,0 +1,263 @@
+/**
+ * Secure authentication utilities that avoid environment variable race conditions
+ */
+
+import { spawn } from 'child_process';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('AuthUtils');
+
+export interface SecureAuthEnv {
+  [key: string]: string | undefined;
+}
+
+export interface AuthValidationResult {
+  isValid: boolean;
+  error?: string;
+  normalizedKey?: string;
+}
+
+/**
+ * Validates API key format without modifying process.env
+ */
+export function validateApiKey(
+  key: string,
+  provider: 'anthropic' | 'openai' | 'cursor'
+): AuthValidationResult {
+  if (!key || typeof key !== 'string' || key.trim().length === 0) {
+    return { isValid: false, error: 'API key is required' };
+  }
+
+  const trimmedKey = key.trim();
+
+  switch (provider) {
+    case 'anthropic':
+      if (!trimmedKey.startsWith('sk-ant-')) {
+        return {
+          isValid: false,
+          error: 'Invalid Anthropic API key format. Should start with "sk-ant-"',
+        };
+      }
+      if (trimmedKey.length < 20) {
+        return { isValid: false, error: 'Anthropic API key too short' };
+      }
+      break;
+
+    case 'openai':
+      if (!trimmedKey.startsWith('sk-')) {
+        return { isValid: false, error: 'Invalid OpenAI API key format. Should start with "sk-"' };
+      }
+      if (trimmedKey.length < 20) {
+        return { isValid: false, error: 'OpenAI API key too short' };
+      }
+      break;
+
+    case 'cursor':
+      // Cursor API keys might have different format
+      if (trimmedKey.length < 10) {
+        return { isValid: false, error: 'Cursor API key too short' };
+      }
+      break;
+  }
+
+  return { isValid: true, normalizedKey: trimmedKey };
+}
+
+/**
+ * Creates a secure environment object for authentication testing
+ * without modifying the global process.env
+ */
+export function createSecureAuthEnv(
+  authMethod: 'cli' | 'api_key',
+  apiKey?: string,
+  provider: 'anthropic' | 'openai' | 'cursor' = 'anthropic'
+): SecureAuthEnv {
+  const env: SecureAuthEnv = { ...process.env };
+
+  if (authMethod === 'cli') {
+    // For CLI auth, remove the API key to force CLI authentication
+    const envKey = provider === 'openai' ? 'OPENAI_API_KEY' : 'ANTHROPIC_API_KEY';
+    delete env[envKey];
+  } else if (authMethod === 'api_key' && apiKey) {
+    // For API key auth, validate and set the provided key
+    const validation = validateApiKey(apiKey, provider);
+    if (!validation.isValid) {
+      throw new Error(validation.error);
+    }
+    const envKey = provider === 'openai' ? 'OPENAI_API_KEY' : 'ANTHROPIC_API_KEY';
+    env[envKey] = validation.normalizedKey;
+  }
+
+  return env;
+}
+
+/**
+ * Creates a temporary environment override for the current process
+ * WARNING: This should only be used in isolated contexts and immediately cleaned up
+ */
+export function createTempEnvOverride(authEnv: SecureAuthEnv): () => void {
+  const originalEnv = { ...process.env };
+
+  // Apply the auth environment
+  Object.assign(process.env, authEnv);
+
+  // Return cleanup function
+  return () => {
+    // Restore original environment
+    Object.keys(process.env).forEach((key) => {
+      if (!(key in originalEnv)) {
+        delete process.env[key];
+      }
+    });
+    Object.assign(process.env, originalEnv);
+  };
+}
+
+/**
+ * Spawns a process with secure environment isolation
+ */
+export function spawnSecureAuth(
+  command: string,
+  args: string[],
+  authEnv: SecureAuthEnv,
+  options: {
+    cwd?: string;
+    timeout?: number;
+  } = {}
+): Promise<{ stdout: string; stderr: string; exitCode: number | null }> {
+  return new Promise((resolve, reject) => {
+    const { cwd = process.cwd(), timeout = 30000 } = options;
+
+    logger.debug(`Spawning secure auth process: ${command} ${args.join(' ')}`);
+
+    const child = spawn(command, args, {
+      cwd,
+      env: authEnv,
+      stdio: 'pipe',
+      shell: false,
+    });
+
+    let stdout = '';
+    let stderr = '';
+    let isResolved = false;
+
+    const timeoutId = setTimeout(() => {
+      if (!isResolved) {
+        child.kill('SIGTERM');
+        isResolved = true;
+        reject(new Error('Authentication process timed out'));
+      }
+    }, timeout);
+
+    child.stdout?.on('data', (data) => {
+      stdout += data.toString();
+    });
+
+    child.stderr?.on('data', (data) => {
+      stderr += data.toString();
+    });
+
+    child.on('close', (code) => {
+      clearTimeout(timeoutId);
+      if (!isResolved) {
+        isResolved = true;
+        resolve({ stdout, stderr, exitCode: code });
+      }
+    });
+
+    child.on('error', (error) => {
+      clearTimeout(timeoutId);
+      if (!isResolved) {
+        isResolved = true;
+        reject(error);
+      }
+    });
+  });
+}
+
+/**
+ * Safely extracts environment variable without race conditions
+ */
+export function safeGetEnv(key: string): string | undefined {
+  return process.env[key];
+}
+
+/**
+ * Checks if an environment variable would be modified without actually modifying it
+ */
+export function wouldModifyEnv(key: string, newValue: string): boolean {
+  const currentValue = safeGetEnv(key);
+  return currentValue !== newValue;
+}
+
+/**
+ * Secure auth session management
+ */
+export class AuthSessionManager {
+  private static activeSessions = new Map<string, SecureAuthEnv>();
+
+  static createSession(
+    sessionId: string,
+    authMethod: 'cli' | 'api_key',
+    apiKey?: string,
+    provider: 'anthropic' | 'openai' | 'cursor' = 'anthropic'
+  ): SecureAuthEnv {
+    const env = createSecureAuthEnv(authMethod, apiKey, provider);
+    this.activeSessions.set(sessionId, env);
+    return env;
+  }
+
+  static getSession(sessionId: string): SecureAuthEnv | undefined {
+    return this.activeSessions.get(sessionId);
+  }
+
+  static destroySession(sessionId: string): void {
+    this.activeSessions.delete(sessionId);
+  }
+
+  static cleanup(): void {
+    this.activeSessions.clear();
+  }
+}
+
+/**
+ * Rate limiting for auth attempts to prevent abuse
+ */
+export class AuthRateLimiter {
+  private attempts = new Map<string, { count: number; lastAttempt: number }>();
+
+  constructor(
+    private maxAttempts = 5,
+    private windowMs = 60000
+  ) {}
+
+  canAttempt(identifier: string): boolean {
+    const now = Date.now();
+    const record = this.attempts.get(identifier);
+
+    if (!record || now - record.lastAttempt > this.windowMs) {
+      this.attempts.set(identifier, { count: 1, lastAttempt: now });
+      return true;
+    }
+
+    if (record.count >= this.maxAttempts) {
+      return false;
+    }
+
+    record.count++;
+    record.lastAttempt = now;
+    return true;
+  }
+
+  getRemainingAttempts(identifier: string): number {
+    const record = this.attempts.get(identifier);
+    if (!record) return this.maxAttempts;
+    return Math.max(0, this.maxAttempts - record.count);
+  }
+
+  getResetTime(identifier: string): Date | null {
+    const record = this.attempts.get(identifier);
+    if (!record) return null;
+    return new Date(record.lastAttempt + this.windowMs);
+  }
+}
diff --git a/temp_repo/apps/server/src/lib/auth.ts b/temp_repo/apps/server/src/lib/auth.ts
new file mode 100644
index 0000000000000000000000000000000000000000..60cb2d58cae036e33a0432be4d215e7fa9b34146
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/auth.ts
@@ -0,0 +1,467 @@
+/**
+ * Authentication middleware for API security
+ *
+ * Supports two authentication methods:
+ * 1. Header-based (X-API-Key) - Used by Electron mode
+ * 2. Cookie-based (HTTP-only session cookie) - Used by web mode
+ *
+ * Auto-generates an API key on first run if none is configured.
+ */
+
+import type { Request, Response, NextFunction } from 'express';
+import crypto from 'crypto';
+import path from 'path';
+import * as secureFs from './secure-fs.js';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('Auth');
+
+const DATA_DIR = process.env.DATA_DIR || './data';
+const API_KEY_FILE = path.join(DATA_DIR, '.api-key');
+const SESSIONS_FILE = path.join(DATA_DIR, '.sessions');
+const SESSION_COOKIE_NAME = 'automaker_session';
+const SESSION_MAX_AGE_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
+const WS_TOKEN_MAX_AGE_MS = 5 * 60 * 1000; // 5 minutes for WebSocket connection tokens
+
+/**
+ * Check if an environment variable is set to 'true'
+ */
+function isEnvTrue(envVar: string | undefined): boolean {
+  return envVar === 'true';
+}
+
+// Session store - persisted to file for survival across server restarts
+const validSessions = new Map<string, { createdAt: number; expiresAt: number }>();
+
+// Short-lived WebSocket connection tokens (in-memory only, not persisted)
+const wsConnectionTokens = new Map<string, { createdAt: number; expiresAt: number }>();
+
+// Clean up expired WebSocket tokens periodically
+setInterval(() => {
+  const now = Date.now();
+  wsConnectionTokens.forEach((data, token) => {
+    if (data.expiresAt <= now) {
+      wsConnectionTokens.delete(token);
+    }
+  });
+}, 60 * 1000); // Clean up every minute
+
+/**
+ * Load sessions from file on startup
+ */
+function loadSessions(): void {
+  try {
+    if (secureFs.existsSync(SESSIONS_FILE)) {
+      const data = secureFs.readFileSync(SESSIONS_FILE, 'utf-8') as string;
+      const sessions = JSON.parse(data) as Array<
+        [string, { createdAt: number; expiresAt: number }]
+      >;
+      const now = Date.now();
+      let loadedCount = 0;
+      let expiredCount = 0;
+
+      for (const [token, session] of sessions) {
+        // Only load non-expired sessions
+        if (session.expiresAt > now) {
+          validSessions.set(token, session);
+          loadedCount++;
+        } else {
+          expiredCount++;
+        }
+      }
+
+      if (loadedCount > 0 || expiredCount > 0) {
+        logger.info(`Loaded ${loadedCount} sessions (${expiredCount} expired)`);
+      }
+    }
+  } catch (error) {
+    logger.warn('Error loading sessions:', error);
+  }
+}
+
+/**
+ * Save sessions to file (async)
+ */
+async function saveSessions(): Promise<void> {
+  try {
+    await secureFs.mkdir(path.dirname(SESSIONS_FILE), { recursive: true });
+    const sessions = Array.from(validSessions.entries());
+    await secureFs.writeFile(SESSIONS_FILE, JSON.stringify(sessions), {
+      encoding: 'utf-8',
+      mode: 0o600,
+    });
+  } catch (error) {
+    logger.error('Failed to save sessions:', error);
+  }
+}
+
+// Load existing sessions on startup
+loadSessions();
+
+/**
+ * Ensure an API key exists - either from env var, file, or generate new one.
+ * This provides CSRF protection by requiring a secret key for all API requests.
+ */
+function ensureApiKey(): string {
+  // First check environment variable (Electron passes it this way)
+  if (process.env.AUTOMAKER_API_KEY) {
+    logger.info('Using API key from environment variable');
+    return process.env.AUTOMAKER_API_KEY;
+  }
+
+  // Try to read from file
+  try {
+    if (secureFs.existsSync(API_KEY_FILE)) {
+      const key = (secureFs.readFileSync(API_KEY_FILE, 'utf-8') as string).trim();
+      if (key) {
+        logger.info('Loaded API key from file');
+        return key;
+      }
+    }
+  } catch (error) {
+    logger.warn('Error reading API key file:', error);
+  }
+
+  // Generate new key
+  const newKey = crypto.randomUUID();
+  try {
+    secureFs.mkdirSync(path.dirname(API_KEY_FILE), { recursive: true });
+    secureFs.writeFileSync(API_KEY_FILE, newKey, { encoding: 'utf-8', mode: 0o600 });
+    logger.info('Generated new API key');
+  } catch (error) {
+    logger.error('Failed to save API key:', error);
+  }
+  return newKey;
+}
+
+// API key - always generated/loaded on startup for CSRF protection
+const API_KEY = ensureApiKey();
+
+// Width for log box content (excluding borders)
+const BOX_CONTENT_WIDTH = 67;
+
+// Print API key to console for web mode users (unless suppressed for production logging)
+if (!isEnvTrue(process.env.AUTOMAKER_HIDE_API_KEY)) {
+  const autoLoginEnabled = isEnvTrue(process.env.AUTOMAKER_AUTO_LOGIN);
+  const autoLoginStatus = autoLoginEnabled ? 'enabled (auto-login active)' : 'disabled';
+
+  // Build box lines with exact padding
+  const header = '🔐 API Key for Web Mode Authentication'.padEnd(BOX_CONTENT_WIDTH);
+  const line1 = "When accessing via browser, you'll be prompted to enter this key:".padEnd(
+    BOX_CONTENT_WIDTH
+  );
+  const line2 = API_KEY.padEnd(BOX_CONTENT_WIDTH);
+  const line3 = 'In Electron mode, authentication is handled automatically.'.padEnd(
+    BOX_CONTENT_WIDTH
+  );
+  const line4 = `Auto-login (AUTOMAKER_AUTO_LOGIN): ${autoLoginStatus}`.padEnd(BOX_CONTENT_WIDTH);
+  const tipHeader = '💡 Tips'.padEnd(BOX_CONTENT_WIDTH);
+  const line5 = 'Set AUTOMAKER_API_KEY env var to use a fixed key'.padEnd(BOX_CONTENT_WIDTH);
+  const line6 = 'Set AUTOMAKER_AUTO_LOGIN=true to skip the login prompt'.padEnd(BOX_CONTENT_WIDTH);
+
+  logger.info(`
+╔═════════════════════════════════════════════════════════════════════╗
+║  ${header}║
+╠═════════════════════════════════════════════════════════════════════╣
+║                                                                     ║
+║  ${line1}║
+║                                                                     ║
+║  ${line2}║
+║                                                                     ║
+║  ${line3}║
+║                                                                     ║
+║  ${line4}║
+║                                                                     ║
+╠═════════════════════════════════════════════════════════════════════╣
+║  ${tipHeader}║
+╠═════════════════════════════════════════════════════════════════════╣
+║  ${line5}║
+║  ${line6}║
+╚═════════════════════════════════════════════════════════════════════╝
+`);
+} else {
+  logger.info('API key banner hidden (AUTOMAKER_HIDE_API_KEY=true)');
+}
+
+/**
+ * Generate a cryptographically secure session token
+ */
+function generateSessionToken(): string {
+  return crypto.randomBytes(32).toString('hex');
+}
+
+/**
+ * Create a new session and return the token
+ */
+export async function createSession(): Promise<string> {
+  const token = generateSessionToken();
+  const now = Date.now();
+  validSessions.set(token, {
+    createdAt: now,
+    expiresAt: now + SESSION_MAX_AGE_MS,
+  });
+  await saveSessions(); // Persist to file
+  return token;
+}
+
+/**
+ * Validate a session token
+ * Note: This returns synchronously but triggers async persistence if session expired
+ */
+export function validateSession(token: string): boolean {
+  const session = validSessions.get(token);
+  if (!session) return false;
+
+  if (Date.now() > session.expiresAt) {
+    validSessions.delete(token);
+    // Fire-and-forget: persist removal asynchronously
+    saveSessions().catch((err) => logger.error('Error saving sessions:', err));
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Invalidate a session token
+ */
+export async function invalidateSession(token: string): Promise<void> {
+  validSessions.delete(token);
+  await saveSessions(); // Persist removal
+}
+
+/**
+ * Create a short-lived WebSocket connection token
+ * Used for initial WebSocket handshake authentication
+ */
+export function createWsConnectionToken(): string {
+  const token = generateSessionToken();
+  const now = Date.now();
+  wsConnectionTokens.set(token, {
+    createdAt: now,
+    expiresAt: now + WS_TOKEN_MAX_AGE_MS,
+  });
+  return token;
+}
+
+/**
+ * Validate a WebSocket connection token
+ * These tokens are single-use and short-lived (5 minutes)
+ * Token is invalidated immediately after first successful use
+ */
+export function validateWsConnectionToken(token: string): boolean {
+  const tokenData = wsConnectionTokens.get(token);
+  if (!tokenData) return false;
+
+  // Always delete the token (single-use)
+  wsConnectionTokens.delete(token);
+
+  // Check if expired
+  if (Date.now() > tokenData.expiresAt) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Validate the API key using timing-safe comparison
+ * Prevents timing attacks that could leak information about the key
+ */
+export function validateApiKey(key: string): boolean {
+  if (!key || typeof key !== 'string') return false;
+
+  // Both buffers must be the same length for timingSafeEqual
+  const keyBuffer = Buffer.from(key);
+  const apiKeyBuffer = Buffer.from(API_KEY);
+
+  // If lengths differ, compare against a dummy to maintain constant time
+  if (keyBuffer.length !== apiKeyBuffer.length) {
+    crypto.timingSafeEqual(apiKeyBuffer, apiKeyBuffer);
+    return false;
+  }
+
+  return crypto.timingSafeEqual(keyBuffer, apiKeyBuffer);
+}
+
+/**
+ * Get session cookie options
+ */
+export function getSessionCookieOptions(): {
+  httpOnly: boolean;
+  secure: boolean;
+  sameSite: 'strict' | 'lax' | 'none';
+  maxAge: number;
+  path: string;
+} {
+  return {
+    httpOnly: true, // JavaScript cannot access this cookie
+    secure: process.env.NODE_ENV === 'production', // HTTPS only in production
+    sameSite: 'lax', // Sent for same-site requests and top-level navigations, but not cross-origin fetch/XHR
+    maxAge: SESSION_MAX_AGE_MS,
+    path: '/',
+  };
+}
+
+/**
+ * Get the session cookie name
+ */
+export function getSessionCookieName(): string {
+  return SESSION_COOKIE_NAME;
+}
+
+/**
+ * Authentication result type
+ */
+type AuthResult =
+  | { authenticated: true }
+  | { authenticated: false; errorType: 'invalid_api_key' | 'invalid_session' | 'no_auth' };
+
+/**
+ * Core authentication check - shared between middleware and status check
+ * Extracts auth credentials from various sources and validates them
+ */
+function checkAuthentication(
+  headers: Record<string, string | string[] | undefined>,
+  query: Record<string, string | undefined>,
+  cookies: Record<string, string | undefined>
+): AuthResult {
+  // Check for API key in header (Electron mode)
+  const headerKey = headers['x-api-key'] as string | undefined;
+  if (headerKey) {
+    if (validateApiKey(headerKey)) {
+      return { authenticated: true };
+    }
+    return { authenticated: false, errorType: 'invalid_api_key' };
+  }
+
+  // Check for session token in header (web mode with explicit token)
+  const sessionTokenHeader = headers['x-session-token'] as string | undefined;
+  if (sessionTokenHeader) {
+    if (validateSession(sessionTokenHeader)) {
+      return { authenticated: true };
+    }
+    return { authenticated: false, errorType: 'invalid_session' };
+  }
+
+  // Check for API key in query parameter (fallback)
+  const queryKey = query.apiKey;
+  if (queryKey) {
+    if (validateApiKey(queryKey)) {
+      return { authenticated: true };
+    }
+    return { authenticated: false, errorType: 'invalid_api_key' };
+  }
+
+  // Check for session token in query parameter (web mode - needed for image loads)
+  const queryToken = query.token;
+  if (queryToken) {
+    if (validateSession(queryToken)) {
+      return { authenticated: true };
+    }
+    return { authenticated: false, errorType: 'invalid_session' };
+  }
+
+  // Check for session cookie (web mode)
+  const sessionToken = cookies[SESSION_COOKIE_NAME];
+  if (sessionToken && validateSession(sessionToken)) {
+    return { authenticated: true };
+  }
+
+  return { authenticated: false, errorType: 'no_auth' };
+}
+
+/**
+ * Authentication middleware
+ *
+ * Accepts either:
+ * 1. X-API-Key header (for Electron mode)
+ * 2. X-Session-Token header (for web mode with explicit token)
+ * 3. apiKey query parameter (fallback for Electron, cases where headers can't be set)
+ * 4. token query parameter (fallback for web mode, needed for image loads via CSS/img tags)
+ * 5. Session cookie (for web mode)
+ */
+export function authMiddleware(req: Request, res: Response, next: NextFunction): void {
+  // Allow disabling auth for local/trusted networks
+  if (isEnvTrue(process.env.AUTOMAKER_DISABLE_AUTH)) {
+    next();
+    return;
+  }
+
+  const result = checkAuthentication(
+    req.headers as Record<string, string | string[] | undefined>,
+    req.query as Record<string, string | undefined>,
+    (req.cookies || {}) as Record<string, string | undefined>
+  );
+
+  if (result.authenticated) {
+    next();
+    return;
+  }
+
+  // Return appropriate error based on what failed
+  switch (result.errorType) {
+    case 'invalid_api_key':
+      res.status(403).json({
+        success: false,
+        error: 'Invalid API key.',
+      });
+      break;
+    case 'invalid_session':
+      res.status(403).json({
+        success: false,
+        error: 'Invalid or expired session token.',
+      });
+      break;
+    case 'no_auth':
+    default:
+      res.status(401).json({
+        success: false,
+        error: 'Authentication required.',
+      });
+  }
+}
+
+/**
+ * Check if authentication is enabled (always true now)
+ */
+export function isAuthEnabled(): boolean {
+  return true;
+}
+
+/**
+ * Get authentication status for health endpoint
+ */
+export function getAuthStatus(): { enabled: boolean; method: string } {
+  const disabled = isEnvTrue(process.env.AUTOMAKER_DISABLE_AUTH);
+  return {
+    enabled: !disabled,
+    method: disabled ? 'disabled' : 'api_key_or_session',
+  };
+}
+
+/**
+ * Check if a request is authenticated (for status endpoint)
+ */
+export function isRequestAuthenticated(req: Request): boolean {
+  if (isEnvTrue(process.env.AUTOMAKER_DISABLE_AUTH)) return true;
+  const result = checkAuthentication(
+    req.headers as Record<string, string | string[] | undefined>,
+    req.query as Record<string, string | undefined>,
+    (req.cookies || {}) as Record<string, string | undefined>
+  );
+  return result.authenticated;
+}
+
+/**
+ * Check if raw credentials are authenticated
+ * Used for WebSocket authentication where we don't have Express request objects
+ */
+export function checkRawAuthentication(
+  headers: Record<string, string | string[] | undefined>,
+  query: Record<string, string | undefined>,
+  cookies: Record<string, string | undefined>
+): boolean {
+  if (isEnvTrue(process.env.AUTOMAKER_DISABLE_AUTH)) return true;
+  return checkAuthentication(headers, query, cookies).authenticated;
+}
diff --git a/temp_repo/apps/server/src/lib/cli-detection.ts b/temp_repo/apps/server/src/lib/cli-detection.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a7b5b14db36f57965dc6f77fcb0fed3b5c2a0246
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/cli-detection.ts
@@ -0,0 +1,444 @@
+/**
+ * Unified CLI Detection Framework
+ *
+ * Provides consistent CLI detection and management across all providers
+ */
+
+import { spawn, execSync } from 'child_process';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as os from 'os';
+
+export interface CliInfo {
+  name: string;
+  command: string;
+  version?: string;
+  path?: string;
+  installed: boolean;
+  authenticated: boolean;
+  authMethod: 'cli' | 'api_key' | 'none';
+  platform?: string;
+  architectures?: string[];
+}
+
+export interface CliDetectionOptions {
+  timeout?: number;
+  includeWsl?: boolean;
+  wslDistribution?: string;
+}
+
+export interface CliDetectionResult {
+  cli: CliInfo;
+  detected: boolean;
+  issues: string[];
+}
+
+export interface UnifiedCliDetection {
+  claude?: CliDetectionResult;
+  codex?: CliDetectionResult;
+  cursor?: CliDetectionResult;
+}
+
+/**
+ * CLI Configuration for different providers
+ */
+const CLI_CONFIGS = {
+  claude: {
+    name: 'Claude CLI',
+    commands: ['claude'],
+    versionArgs: ['--version'],
+    installCommands: {
+      darwin: 'brew install anthropics/claude/claude',
+      linux: 'curl -fsSL https://claude.ai/install.sh | sh',
+      win32: 'iwr https://claude.ai/install.ps1 -UseBasicParsing | iex',
+    },
+  },
+  codex: {
+    name: 'Codex CLI',
+    commands: ['codex', 'openai'],
+    versionArgs: ['--version'],
+    installCommands: {
+      darwin: 'npm install -g @openai/codex-cli',
+      linux: 'npm install -g @openai/codex-cli',
+      win32: 'npm install -g @openai/codex-cli',
+    },
+  },
+  cursor: {
+    name: 'Cursor CLI',
+    commands: ['cursor-agent', 'cursor'],
+    versionArgs: ['--version'],
+    installCommands: {
+      darwin: 'brew install cursor/cursor/cursor-agent',
+      linux: 'curl -fsSL https://cursor.sh/install.sh | sh',
+      win32: 'iwr https://cursor.sh/install.ps1 -UseBasicParsing | iex',
+    },
+  },
+} as const;
+
+/**
+ * Detect if a CLI is installed and available
+ */
+export async function detectCli(
+  provider: keyof typeof CLI_CONFIGS,
+  options: CliDetectionOptions = {}
+): Promise<CliDetectionResult> {
+  const config = CLI_CONFIGS[provider];
+  const { timeout = 5000 } = options;
+  const issues: string[] = [];
+
+  const cliInfo: CliInfo = {
+    name: config.name,
+    command: '',
+    installed: false,
+    authenticated: false,
+    authMethod: 'none',
+  };
+
+  try {
+    // Find the command in PATH
+    const command = await findCommand([...config.commands]);
+    if (command) {
+      cliInfo.command = command;
+    }
+
+    if (!cliInfo.command) {
+      issues.push(`${config.name} not found in PATH`);
+      return { cli: cliInfo, detected: false, issues };
+    }
+
+    cliInfo.path = cliInfo.command;
+    cliInfo.installed = true;
+
+    // Get version
+    try {
+      cliInfo.version = await getCliVersion(cliInfo.command, [...config.versionArgs], timeout);
+    } catch (error) {
+      issues.push(`Failed to get ${config.name} version: ${error}`);
+    }
+
+    // Check authentication
+    cliInfo.authMethod = await checkCliAuth(provider, cliInfo.command);
+    cliInfo.authenticated = cliInfo.authMethod !== 'none';
+
+    return { cli: cliInfo, detected: true, issues };
+  } catch (error) {
+    issues.push(`Error detecting ${config.name}: ${error}`);
+    return { cli: cliInfo, detected: false, issues };
+  }
+}
+
+/**
+ * Detect all CLIs in the system
+ */
+export async function detectAllCLis(
+  options: CliDetectionOptions = {}
+): Promise<UnifiedCliDetection> {
+  const results: UnifiedCliDetection = {};
+
+  // Detect all providers in parallel
+  const providers = Object.keys(CLI_CONFIGS) as Array<keyof typeof CLI_CONFIGS>;
+  const detectionPromises = providers.map(async (provider) => {
+    const result = await detectCli(provider, options);
+    return { provider, result };
+  });
+
+  const detections = await Promise.all(detectionPromises);
+
+  for (const { provider, result } of detections) {
+    results[provider] = result;
+  }
+
+  return results;
+}
+
+/**
+ * Find the first available command from a list of alternatives
+ */
+export async function findCommand(commands: string[]): Promise<string | null> {
+  for (const command of commands) {
+    try {
+      const whichCommand = process.platform === 'win32' ? 'where' : 'which';
+      const result = execSync(`${whichCommand} ${command}`, {
+        encoding: 'utf8',
+        timeout: 2000,
+      }).trim();
+
+      if (result) {
+        return result.split('\n')[0]; // Take first result on Windows
+      }
+    } catch {
+      // Command not found, try next
+    }
+  }
+  return null;
+}
+
+/**
+ * Get CLI version
+ */
+export async function getCliVersion(
+  command: string,
+  args: string[],
+  timeout: number = 5000
+): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, {
+      stdio: 'pipe',
+      timeout,
+    });
+
+    let stdout = '';
+    let stderr = '';
+
+    child.stdout?.on('data', (data) => {
+      stdout += data.toString();
+    });
+
+    child.stderr?.on('data', (data) => {
+      stderr += data.toString();
+    });
+
+    child.on('close', (code) => {
+      if (code === 0 && stdout) {
+        resolve(stdout.trim());
+      } else if (stderr) {
+        reject(stderr.trim());
+      } else {
+        reject(`Command exited with code ${code}`);
+      }
+    });
+
+    child.on('error', reject);
+  });
+}
+
+/**
+ * Check authentication status for a CLI
+ */
+export async function checkCliAuth(
+  provider: keyof typeof CLI_CONFIGS,
+  command: string
+): Promise<'cli' | 'api_key' | 'none'> {
+  try {
+    switch (provider) {
+      case 'claude':
+        return await checkClaudeAuth(command);
+      case 'codex':
+        return await checkCodexAuth(command);
+      case 'cursor':
+        return await checkCursorAuth(command);
+      default:
+        return 'none';
+    }
+  } catch {
+    return 'none';
+  }
+}
+
+/**
+ * Check Claude CLI authentication
+ */
+async function checkClaudeAuth(command: string): Promise<'cli' | 'api_key' | 'none'> {
+  try {
+    // Check for environment variable
+    if (process.env.ANTHROPIC_API_KEY) {
+      return 'api_key';
+    }
+
+    // Try running a simple command to check CLI auth
+    const result = await getCliVersion(command, ['--version'], 3000);
+    if (result) {
+      return 'cli'; // If version works, assume CLI is authenticated
+    }
+  } catch {
+    // Version command might work even without auth, so we need a better check
+  }
+
+  // Try a more specific auth check
+  return new Promise((resolve) => {
+    const child = spawn(command, ['whoami'], {
+      stdio: 'pipe',
+      timeout: 3000,
+    });
+
+    let stdout = '';
+    let stderr = '';
+
+    child.stdout?.on('data', (data) => {
+      stdout += data.toString();
+    });
+
+    child.stderr?.on('data', (data) => {
+      stderr += data.toString();
+    });
+
+    child.on('close', (code) => {
+      if (code === 0 && stdout && !stderr.includes('not authenticated')) {
+        resolve('cli');
+      } else {
+        resolve('none');
+      }
+    });
+
+    child.on('error', () => {
+      resolve('none');
+    });
+  });
+}
+
+/**
+ * Check Codex CLI authentication
+ */
+async function checkCodexAuth(command: string): Promise<'cli' | 'api_key' | 'none'> {
+  // Check for environment variable
+  if (process.env.OPENAI_API_KEY) {
+    return 'api_key';
+  }
+
+  try {
+    // Try a simple auth check
+    const result = await getCliVersion(command, ['--version'], 3000);
+    if (result) {
+      return 'cli';
+    }
+  } catch {
+    // Version check failed
+  }
+
+  return 'none';
+}
+
+/**
+ * Check Cursor CLI authentication
+ */
+async function checkCursorAuth(command: string): Promise<'cli' | 'api_key' | 'none'> {
+  // Check for environment variable
+  if (process.env.CURSOR_API_KEY) {
+    return 'api_key';
+  }
+
+  // Check for credentials files
+  const credentialPaths = [
+    path.join(os.homedir(), '.cursor', 'credentials.json'),
+    path.join(os.homedir(), '.config', 'cursor', 'credentials.json'),
+    path.join(os.homedir(), '.cursor', 'auth.json'),
+    path.join(os.homedir(), '.config', 'cursor', 'auth.json'),
+  ];
+
+  for (const credPath of credentialPaths) {
+    try {
+      if (fs.existsSync(credPath)) {
+        const content = fs.readFileSync(credPath, 'utf8');
+        const creds = JSON.parse(content);
+        if (creds.accessToken || creds.token || creds.apiKey) {
+          return 'cli';
+        }
+      }
+    } catch {
+      // Invalid credentials file
+    }
+  }
+
+  // Try a simple command
+  try {
+    const result = await getCliVersion(command, ['--version'], 3000);
+    if (result) {
+      return 'cli';
+    }
+  } catch {
+    // Version check failed
+  }
+
+  return 'none';
+}
+
+/**
+ * Get installation instructions for a provider
+ */
+export function getInstallInstructions(
+  provider: keyof typeof CLI_CONFIGS,
+  platform: NodeJS.Platform = process.platform
+): string {
+  const config = CLI_CONFIGS[provider];
+  const command = config.installCommands[platform as keyof typeof config.installCommands];
+
+  if (!command) {
+    return `No installation instructions available for ${provider} on ${platform}`;
+  }
+
+  return command;
+}
+
+/**
+ * Get platform-specific CLI paths and versions
+ */
+export function getPlatformCliPaths(provider: keyof typeof CLI_CONFIGS): string[] {
+  const config = CLI_CONFIGS[provider];
+  const platform = process.platform;
+
+  switch (platform) {
+    case 'darwin':
+      return [
+        `/usr/local/bin/${config.commands[0]}`,
+        `/opt/homebrew/bin/${config.commands[0]}`,
+        path.join(os.homedir(), '.local', 'bin', config.commands[0]),
+      ];
+
+    case 'linux':
+      return [
+        `/usr/bin/${config.commands[0]}`,
+        `/usr/local/bin/${config.commands[0]}`,
+        path.join(os.homedir(), '.local', 'bin', config.commands[0]),
+        path.join(os.homedir(), '.npm', 'global', 'bin', config.commands[0]),
+      ];
+
+    case 'win32':
+      return [
+        path.join(
+          os.homedir(),
+          'AppData',
+          'Local',
+          'Programs',
+          config.commands[0],
+          `${config.commands[0]}.exe`
+        ),
+        path.join(process.env.ProgramFiles || '', config.commands[0], `${config.commands[0]}.exe`),
+        path.join(
+          process.env.ProgramFiles || '',
+          config.commands[0],
+          'bin',
+          `${config.commands[0]}.exe`
+        ),
+      ];
+
+    default:
+      return [];
+  }
+}
+
+/**
+ * Validate CLI installation
+ */
+export function validateCliInstallation(cliInfo: CliInfo): {
+  valid: boolean;
+  issues: string[];
+} {
+  const issues: string[] = [];
+
+  if (!cliInfo.installed) {
+    issues.push('CLI is not installed');
+  }
+
+  if (cliInfo.installed && !cliInfo.version) {
+    issues.push('Could not determine CLI version');
+  }
+
+  if (cliInfo.installed && cliInfo.authMethod === 'none') {
+    issues.push('CLI is not authenticated');
+  }
+
+  return {
+    valid: issues.length === 0,
+    issues,
+  };
+}
diff --git a/temp_repo/apps/server/src/lib/codex-auth.ts b/temp_repo/apps/server/src/lib/codex-auth.ts
new file mode 100644
index 0000000000000000000000000000000000000000..94fadc8c7c6cf7289b7f122cd0f5066b655b2090
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/codex-auth.ts
@@ -0,0 +1,68 @@
+/**
+ * Shared utility for checking Codex CLI authentication status
+ *
+ * Uses 'codex login status' command to verify authentication.
+ * Never assumes authenticated - only returns true if CLI confirms.
+ */
+
+import { spawnProcess } from '@automaker/platform';
+import { findCodexCliPath } from '@automaker/platform';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('CodexAuth');
+
+const CODEX_COMMAND = 'codex';
+const OPENAI_API_KEY_ENV = 'OPENAI_API_KEY';
+
+export interface CodexAuthCheckResult {
+  authenticated: boolean;
+  method: 'api_key_env' | 'cli_authenticated' | 'none';
+}
+
+/**
+ * Check Codex authentication status using 'codex login status' command
+ *
+ * @param cliPath Optional CLI path. If not provided, will attempt to find it.
+ * @returns Authentication status and method
+ */
+export async function checkCodexAuthentication(
+  cliPath?: string | null
+): Promise<CodexAuthCheckResult> {
+  const resolvedCliPath = cliPath || (await findCodexCliPath());
+  const hasApiKey = !!process.env[OPENAI_API_KEY_ENV];
+
+  // If CLI is not installed, cannot be authenticated
+  if (!resolvedCliPath) {
+    logger.info('CLI not found');
+    return { authenticated: false, method: 'none' };
+  }
+
+  try {
+    const result = await spawnProcess({
+      command: resolvedCliPath || CODEX_COMMAND,
+      args: ['login', 'status'],
+      cwd: process.cwd(),
+      env: {
+        ...process.env,
+        TERM: 'dumb', // Avoid interactive output
+      },
+    });
+
+    // Check both stdout and stderr for "logged in" - Codex CLI outputs to stderr
+    const combinedOutput = (result.stdout + result.stderr).toLowerCase();
+    const isLoggedIn = combinedOutput.includes('logged in');
+
+    if (result.exitCode === 0 && isLoggedIn) {
+      // Determine auth method based on what we know
+      const method = hasApiKey ? 'api_key_env' : 'cli_authenticated';
+      logger.info(`✓ Authenticated (${method})`);
+      return { authenticated: true, method };
+    }
+
+    logger.info('Not authenticated');
+    return { authenticated: false, method: 'none' };
+  } catch (error) {
+    logger.error('Failed to check authentication:', error);
+    return { authenticated: false, method: 'none' };
+  }
+}
diff --git a/temp_repo/apps/server/src/lib/enhancement-prompts.ts b/temp_repo/apps/server/src/lib/enhancement-prompts.ts
new file mode 100644
index 0000000000000000000000000000000000000000..03f85f6ee7fa7515955fe8984a19206d00e61969
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/enhancement-prompts.ts
@@ -0,0 +1,25 @@
+/**
+ * Enhancement Prompts - Re-exported from @automaker/prompts
+ *
+ * This file now re-exports enhancement prompts from the shared @automaker/prompts package
+ * to maintain backward compatibility with existing imports in the server codebase.
+ */
+
+export {
+  IMPROVE_SYSTEM_PROMPT,
+  TECHNICAL_SYSTEM_PROMPT,
+  SIMPLIFY_SYSTEM_PROMPT,
+  ACCEPTANCE_SYSTEM_PROMPT,
+  IMPROVE_EXAMPLES,
+  TECHNICAL_EXAMPLES,
+  SIMPLIFY_EXAMPLES,
+  ACCEPTANCE_EXAMPLES,
+  getEnhancementPrompt,
+  getSystemPrompt,
+  getExamples,
+  buildUserPrompt,
+  isValidEnhancementMode,
+  getAvailableEnhancementModes,
+} from '@automaker/prompts';
+
+export type { EnhancementMode, EnhancementExample } from '@automaker/prompts';
diff --git a/temp_repo/apps/server/src/lib/error-handler.ts b/temp_repo/apps/server/src/lib/error-handler.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d672009848abe5efa51c1c1c657fd5907fa6cdb9
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/error-handler.ts
@@ -0,0 +1,415 @@
+/**
+ * Unified Error Handling System for CLI Providers
+ *
+ * Provides consistent error classification, user-friendly messages, and debugging support
+ * across all AI providers (Claude, Codex, Cursor)
+ */
+
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('ErrorHandler');
+
+export enum ErrorType {
+  AUTHENTICATION = 'authentication',
+  BILLING = 'billing',
+  RATE_LIMIT = 'rate_limit',
+  NETWORK = 'network',
+  TIMEOUT = 'timeout',
+  VALIDATION = 'validation',
+  PERMISSION = 'permission',
+  CLI_NOT_FOUND = 'cli_not_found',
+  CLI_NOT_INSTALLED = 'cli_not_installed',
+  MODEL_NOT_SUPPORTED = 'model_not_supported',
+  INVALID_REQUEST = 'invalid_request',
+  SERVER_ERROR = 'server_error',
+  UNKNOWN = 'unknown',
+}
+
+export enum ErrorSeverity {
+  LOW = 'low',
+  MEDIUM = 'medium',
+  HIGH = 'high',
+  CRITICAL = 'critical',
+}
+
+export interface ErrorClassification {
+  type: ErrorType;
+  severity: ErrorSeverity;
+  userMessage: string;
+  technicalMessage: string;
+  suggestedAction?: string;
+  retryable: boolean;
+  provider?: string;
+  context?: Record<string, unknown>;
+}
+
+export interface ErrorPattern {
+  type: ErrorType;
+  severity: ErrorSeverity;
+  patterns: RegExp[];
+  userMessage: string;
+  suggestedAction?: string;
+  retryable: boolean;
+}
+
+/**
+ * Error patterns for different types of errors
+ */
+const ERROR_PATTERNS: ErrorPattern[] = [
+  // Authentication errors
+  {
+    type: ErrorType.AUTHENTICATION,
+    severity: ErrorSeverity.HIGH,
+    patterns: [
+      /unauthorized/i,
+      /authentication.*fail/i,
+      /invalid_api_key/i,
+      /invalid api key/i,
+      /not authenticated/i,
+      /please.*log/i,
+      /token.*revoked/i,
+      /oauth.*error/i,
+      /credentials.*invalid/i,
+    ],
+    userMessage: 'Authentication failed. Please check your API key or login credentials.',
+    suggestedAction:
+      "Verify your API key is correct and hasn't expired, or run the CLI login command.",
+    retryable: false,
+  },
+
+  // Billing errors
+  {
+    type: ErrorType.BILLING,
+    severity: ErrorSeverity.HIGH,
+    patterns: [
+      /credit.*balance.*low/i,
+      /insufficient.*credit/i,
+      /billing.*issue/i,
+      /payment.*required/i,
+      /usage.*exceeded/i,
+      /quota.*exceeded/i,
+      /add.*credit/i,
+    ],
+    userMessage: 'Account has insufficient credits or billing issues.',
+    suggestedAction: 'Please add credits to your account or check your billing settings.',
+    retryable: false,
+  },
+
+  // Rate limit errors
+  {
+    type: ErrorType.RATE_LIMIT,
+    severity: ErrorSeverity.MEDIUM,
+    patterns: [
+      /rate.*limit/i,
+      /too.*many.*request/i,
+      /limit.*reached/i,
+      /try.*later/i,
+      /429/i,
+      /reset.*time/i,
+      /upgrade.*plan/i,
+    ],
+    userMessage: 'Rate limit reached. Please wait before trying again.',
+    suggestedAction: 'Wait a few minutes before retrying, or consider upgrading your plan.',
+    retryable: true,
+  },
+
+  // Network errors
+  {
+    type: ErrorType.NETWORK,
+    severity: ErrorSeverity.MEDIUM,
+    patterns: [/network/i, /connection/i, /dns/i, /timeout/i, /econnrefused/i, /enotfound/i],
+    userMessage: 'Network connection issue.',
+    suggestedAction: 'Check your internet connection and try again.',
+    retryable: true,
+  },
+
+  // Timeout errors
+  {
+    type: ErrorType.TIMEOUT,
+    severity: ErrorSeverity.MEDIUM,
+    patterns: [/timeout/i, /aborted/i, /time.*out/i],
+    userMessage: 'Operation timed out.',
+    suggestedAction: 'Try again with a simpler request or check your connection.',
+    retryable: true,
+  },
+
+  // Permission errors
+  {
+    type: ErrorType.PERMISSION,
+    severity: ErrorSeverity.HIGH,
+    patterns: [/permission.*denied/i, /access.*denied/i, /forbidden/i, /403/i, /not.*authorized/i],
+    userMessage: 'Permission denied.',
+    suggestedAction: 'Check if you have the required permissions for this operation.',
+    retryable: false,
+  },
+
+  // CLI not found
+  {
+    type: ErrorType.CLI_NOT_FOUND,
+    severity: ErrorSeverity.HIGH,
+    patterns: [/command not found/i, /not recognized/i, /not.*installed/i, /ENOENT/i],
+    userMessage: 'CLI tool not found.',
+    suggestedAction: "Please install the required CLI tool and ensure it's in your PATH.",
+    retryable: false,
+  },
+
+  // Model not supported
+  {
+    type: ErrorType.MODEL_NOT_SUPPORTED,
+    severity: ErrorSeverity.HIGH,
+    patterns: [/model.*not.*support/i, /unknown.*model/i, /invalid.*model/i],
+    userMessage: 'Model not supported.',
+    suggestedAction: 'Check available models and use a supported one.',
+    retryable: false,
+  },
+
+  // Server errors
+  {
+    type: ErrorType.SERVER_ERROR,
+    severity: ErrorSeverity.HIGH,
+    patterns: [/internal.*server/i, /server.*error/i, /500/i, /502/i, /503/i, /504/i],
+    userMessage: 'Server error occurred.',
+    suggestedAction: 'Try again in a few minutes or contact support if the issue persists.',
+    retryable: true,
+  },
+];
+
+/**
+ * Classify an error into a specific type with user-friendly message
+ */
+export function classifyError(
+  error: unknown,
+  provider?: string,
+  context?: Record<string, unknown>
+): ErrorClassification {
+  const errorText = getErrorText(error);
+
+  // Try to match against known patterns
+  for (const pattern of ERROR_PATTERNS) {
+    for (const regex of pattern.patterns) {
+      if (regex.test(errorText)) {
+        return {
+          type: pattern.type,
+          severity: pattern.severity,
+          userMessage: pattern.userMessage,
+          technicalMessage: errorText,
+          suggestedAction: pattern.suggestedAction,
+          retryable: pattern.retryable,
+          provider,
+          context,
+        };
+      }
+    }
+  }
+
+  // Unknown error
+  return {
+    type: ErrorType.UNKNOWN,
+    severity: ErrorSeverity.MEDIUM,
+    userMessage: 'An unexpected error occurred.',
+    technicalMessage: errorText,
+    suggestedAction: 'Please try again or contact support if the issue persists.',
+    retryable: true,
+    provider,
+    context,
+  };
+}
+
+/**
+ * Get a user-friendly error message
+ */
+export function getUserFriendlyErrorMessage(error: unknown, provider?: string): string {
+  const classification = classifyError(error, provider);
+
+  let message = classification.userMessage;
+
+  if (classification.suggestedAction) {
+    message += ` ${classification.suggestedAction}`;
+  }
+
+  // Add provider-specific context if available
+  if (provider) {
+    message = `[${provider.toUpperCase()}] ${message}`;
+  }
+
+  return message;
+}
+
+/**
+ * Check if an error is retryable
+ */
+export function isRetryableError(error: unknown): boolean {
+  const classification = classifyError(error);
+  return classification.retryable;
+}
+
+/**
+ * Check if an error is authentication-related
+ */
+export function isAuthenticationError(error: unknown): boolean {
+  const classification = classifyError(error);
+  return classification.type === ErrorType.AUTHENTICATION;
+}
+
+/**
+ * Check if an error is billing-related
+ */
+export function isBillingError(error: unknown): boolean {
+  const classification = classifyError(error);
+  return classification.type === ErrorType.BILLING;
+}
+
+/**
+ * Check if an error is rate limit related
+ */
+export function isRateLimitError(error: unknown): boolean {
+  const classification = classifyError(error);
+  return classification.type === ErrorType.RATE_LIMIT;
+}
+
+/**
+ * Get error text from various error types
+ */
+function getErrorText(error: unknown): string {
+  if (typeof error === 'string') {
+    return error;
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  if (typeof error === 'object' && error !== null) {
+    // Handle structured error objects
+    const errorObj = error as Record<string, unknown>;
+
+    if (typeof errorObj.message === 'string') {
+      return errorObj.message;
+    }
+
+    const nestedError = errorObj.error;
+    if (typeof nestedError === 'object' && nestedError !== null && 'message' in nestedError) {
+      return String((nestedError as Record<string, unknown>).message);
+    }
+
+    if (nestedError) {
+      return typeof nestedError === 'string' ? nestedError : JSON.stringify(nestedError);
+    }
+
+    return JSON.stringify(error);
+  }
+
+  return String(error);
+}
+
+/**
+ * Create a standardized error response
+ */
+export function createErrorResponse(
+  error: unknown,
+  provider?: string,
+  context?: Record<string, unknown>
+): {
+  success: false;
+  error: string;
+  errorType: ErrorType;
+  severity: ErrorSeverity;
+  retryable: boolean;
+  suggestedAction?: string;
+} {
+  const classification = classifyError(error, provider, context);
+
+  return {
+    success: false,
+    error: classification.userMessage,
+    errorType: classification.type,
+    severity: classification.severity,
+    retryable: classification.retryable,
+    suggestedAction: classification.suggestedAction,
+  };
+}
+
+/**
+ * Log error with full context
+ */
+export function logError(
+  error: unknown,
+  provider?: string,
+  operation?: string,
+  additionalContext?: Record<string, unknown>
+): void {
+  const classification = classifyError(error, provider, {
+    operation,
+    ...additionalContext,
+  });
+
+  logger.error(`Error in ${provider || 'unknown'}${operation ? ` during ${operation}` : ''}`, {
+    type: classification.type,
+    severity: classification.severity,
+    message: classification.userMessage,
+    technicalMessage: classification.technicalMessage,
+    retryable: classification.retryable,
+    suggestedAction: classification.suggestedAction,
+    context: classification.context,
+  });
+}
+
+/**
+ * Provider-specific error handlers
+ */
+export const ProviderErrorHandler = {
+  claude: {
+    classify: (error: unknown) => classifyError(error, 'claude'),
+    getUserMessage: (error: unknown) => getUserFriendlyErrorMessage(error, 'claude'),
+    isAuth: (error: unknown) => isAuthenticationError(error),
+    isBilling: (error: unknown) => isBillingError(error),
+    isRateLimit: (error: unknown) => isRateLimitError(error),
+  },
+
+  codex: {
+    classify: (error: unknown) => classifyError(error, 'codex'),
+    getUserMessage: (error: unknown) => getUserFriendlyErrorMessage(error, 'codex'),
+    isAuth: (error: unknown) => isAuthenticationError(error),
+    isBilling: (error: unknown) => isBillingError(error),
+    isRateLimit: (error: unknown) => isRateLimitError(error),
+  },
+
+  cursor: {
+    classify: (error: unknown) => classifyError(error, 'cursor'),
+    getUserMessage: (error: unknown) => getUserFriendlyErrorMessage(error, 'cursor'),
+    isAuth: (error: unknown) => isAuthenticationError(error),
+    isBilling: (error: unknown) => isBillingError(error),
+    isRateLimit: (error: unknown) => isRateLimitError(error),
+  },
+};
+
+/**
+ * Create a retry handler for retryable errors
+ */
+export function createRetryHandler(maxRetries: number = 3, baseDelay: number = 1000) {
+  return async function <T>(
+    operation: () => Promise<T>,
+    shouldRetry: (error: unknown) => boolean = isRetryableError
+  ): Promise<T> {
+    let lastError: unknown;
+
+    for (let attempt = 0; attempt <= maxRetries; attempt++) {
+      try {
+        return await operation();
+      } catch (error) {
+        lastError = error;
+
+        if (attempt === maxRetries || !shouldRetry(error)) {
+          throw error;
+        }
+
+        // Exponential backoff with jitter
+        const delay = baseDelay * Math.pow(2, attempt) + Math.random() * 1000;
+        logger.debug(`Retrying operation in ${delay}ms (attempt ${attempt + 1}/${maxRetries})`);
+        await new Promise((resolve) => setTimeout(resolve, delay));
+      }
+    }
+
+    throw lastError;
+  };
+}
diff --git a/temp_repo/apps/server/src/lib/events.ts b/temp_repo/apps/server/src/lib/events.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7f224c4e74094cf4c6d31eb84a7558e168d48132
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/events.ts
@@ -0,0 +1,39 @@
+/**
+ * Event emitter for streaming events to WebSocket clients
+ */
+
+import type { EventType, EventCallback } from '@automaker/types';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('Events');
+
+// Re-export event types from shared package
+export type { EventType, EventCallback };
+
+export interface EventEmitter {
+  emit: (type: EventType, payload: unknown) => void;
+  subscribe: (callback: EventCallback) => () => void;
+}
+
+export function createEventEmitter(): EventEmitter {
+  const subscribers = new Set<EventCallback>();
+
+  return {
+    emit(type: EventType, payload: unknown) {
+      for (const callback of subscribers) {
+        try {
+          callback(type, payload);
+        } catch (error) {
+          logger.error('Error in event subscriber:', error);
+        }
+      }
+    },
+
+    subscribe(callback: EventCallback) {
+      subscribers.add(callback);
+      return () => {
+        subscribers.delete(callback);
+      };
+    },
+  };
+}
diff --git a/temp_repo/apps/server/src/lib/exec-utils.ts b/temp_repo/apps/server/src/lib/exec-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0073f6956046811ddd6d2d8d470b667b1e30b24f
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/exec-utils.ts
@@ -0,0 +1,37 @@
+/**
+ * Shared execution utilities
+ *
+ * Common helpers for spawning child processes with the correct environment.
+ * Used by both route handlers and service layers.
+ */
+
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('ExecUtils');
+
+// Extended PATH to include common tool installation locations
+export const extendedPath = [
+  process.env.PATH,
+  '/opt/homebrew/bin',
+  '/usr/local/bin',
+  '/home/linuxbrew/.linuxbrew/bin',
+  `${process.env.HOME}/.local/bin`,
+]
+  .filter(Boolean)
+  .join(':');
+
+export const execEnv = {
+  ...process.env,
+  PATH: extendedPath,
+};
+
+export function getErrorMessage(error: unknown): string {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return String(error);
+}
+
+export function logError(error: unknown, context: string): void {
+  logger.error(`${context}:`, error);
+}
diff --git a/temp_repo/apps/server/src/lib/git-log-parser.ts b/temp_repo/apps/server/src/lib/git-log-parser.ts
new file mode 100644
index 0000000000000000000000000000000000000000..85b0cb58c14efcd0c0ac088eca42097705d6ba9f
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/git-log-parser.ts
@@ -0,0 +1,62 @@
+export interface CommitFields {
+  hash: string;
+  shortHash: string;
+  author: string;
+  authorEmail: string;
+  date: string;
+  subject: string;
+  body: string;
+}
+
+export function parseGitLogOutput(output: string): CommitFields[] {
+  const commits: CommitFields[] = [];
+
+  // Split by NUL character to separate commits
+  const commitBlocks = output.split('\0').filter((block) => block.trim());
+
+  for (const block of commitBlocks) {
+    const allLines = block.split('\n');
+
+    // Skip leading empty lines that may appear at block boundaries
+    let startIndex = 0;
+    while (startIndex < allLines.length && allLines[startIndex].trim() === '') {
+      startIndex++;
+    }
+    const fields = allLines.slice(startIndex);
+
+    // Validate we have all expected fields (at least hash, shortHash, author, authorEmail, date, subject)
+    if (fields.length < 6) {
+      continue; // Skip malformed blocks
+    }
+
+    const commit: CommitFields = {
+      hash: fields[0].trim(),
+      shortHash: fields[1].trim(),
+      author: fields[2].trim(),
+      authorEmail: fields[3].trim(),
+      date: fields[4].trim(),
+      subject: fields[5].trim(),
+      body: fields.slice(6).join('\n').trim(),
+    };
+
+    commits.push(commit);
+  }
+
+  return commits;
+}
+
+/**
+ * Creates a commit object from parsed fields, matching the expected API response format
+ */
+export function createCommitFromFields(fields: CommitFields, files?: string[]) {
+  return {
+    hash: fields.hash,
+    shortHash: fields.shortHash,
+    author: fields.author,
+    authorEmail: fields.authorEmail,
+    date: fields.date,
+    subject: fields.subject,
+    body: fields.body,
+    files: files || [],
+  };
+}
diff --git a/temp_repo/apps/server/src/lib/git.ts b/temp_repo/apps/server/src/lib/git.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d60ccadead57b8dd7b054320573c6a3868b51562
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/git.ts
@@ -0,0 +1,236 @@
+/**
+ * Shared git command execution utilities.
+ *
+ * This module provides the canonical `execGitCommand` helper and common
+ * git utilities used across services and routes.  All consumers should
+ * import from here rather than defining their own copy.
+ */
+
+import fs from 'fs/promises';
+import path from 'path';
+import { spawnProcess } from '@automaker/platform';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('GitLib');
+
+// Extended PATH so git is found when the process does not inherit a full shell PATH
+// (e.g. Electron, some CI, or IDE-launched processes).
+const pathSeparator = process.platform === 'win32' ? ';' : ':';
+const extraPaths: string[] =
+  process.platform === 'win32'
+    ? ([
+        process.env.LOCALAPPDATA && `${process.env.LOCALAPPDATA}\\Programs\\Git\\cmd`,
+        process.env.PROGRAMFILES && `${process.env.PROGRAMFILES}\\Git\\cmd`,
+        process.env['ProgramFiles(x86)'] && `${process.env['ProgramFiles(x86)']}\\Git\\cmd`,
+      ].filter(Boolean) as string[])
+    : [
+        '/opt/homebrew/bin',
+        '/usr/local/bin',
+        '/usr/bin',
+        '/home/linuxbrew/.linuxbrew/bin',
+        process.env.HOME ? `${process.env.HOME}/.local/bin` : '',
+      ].filter(Boolean);
+
+const extendedPath = [process.env.PATH, ...extraPaths].filter(Boolean).join(pathSeparator);
+const gitEnv = { ...process.env, PATH: extendedPath };
+
+// ============================================================================
+// Secure Command Execution
+// ============================================================================
+
+/**
+ * Execute git command with array arguments to prevent command injection.
+ * Uses spawnProcess from @automaker/platform for secure, cross-platform execution.
+ *
+ * @param args - Array of git command arguments (e.g., ['worktree', 'add', path])
+ * @param cwd - Working directory to execute the command in
+ * @param env - Optional additional environment variables to pass to the git process.
+ *   These are merged on top of the current process environment.  Pass
+ *   `{ LC_ALL: 'C' }` to force git to emit English output regardless of the
+ *   system locale so that text-based output parsing remains reliable.
+ * @param abortController - Optional AbortController to cancel the git process.
+ *   When the controller is aborted the underlying process is sent SIGTERM and
+ *   the returned promise rejects with an Error whose message is 'Process aborted'.
+ * @returns Promise resolving to stdout output
+ * @throws Error with stderr/stdout message if command fails. The thrown error
+ *   also has `stdout` and `stderr` string properties for structured access.
+ *
+ * @example
+ * ```typescript
+ * // Safe: no injection possible
+ * await execGitCommand(['branch', '-D', branchName], projectPath);
+ *
+ * // Force English output for reliable text parsing:
+ * await execGitCommand(['rebase', '--', 'main'], worktreePath, { LC_ALL: 'C' });
+ *
+ * // With a process-level timeout:
+ * const controller = new AbortController();
+ * const timerId = setTimeout(() => controller.abort(), 30_000);
+ * try {
+ *   await execGitCommand(['fetch', '--all', '--quiet'], cwd, undefined, controller);
+ * } finally {
+ *   clearTimeout(timerId);
+ * }
+ *
+ * // Instead of unsafe:
+ * // await execAsync(`git branch -D ${branchName}`, { cwd });
+ * ```
+ */
+export async function execGitCommand(
+  args: string[],
+  cwd: string,
+  env?: Record<string, string>,
+  abortController?: AbortController
+): Promise<string> {
+  const result = await spawnProcess({
+    command: 'git',
+    args,
+    cwd,
+    env:
+      env !== undefined
+        ? {
+            ...gitEnv,
+            ...env,
+            PATH: [gitEnv.PATH, env.PATH].filter(Boolean).join(pathSeparator),
+          }
+        : gitEnv,
+    ...(abortController !== undefined ? { abortController } : {}),
+  });
+
+  // spawnProcess returns { stdout, stderr, exitCode }
+  if (result.exitCode === 0) {
+    return result.stdout;
+  } else {
+    const errorMessage =
+      result.stderr || result.stdout || `Git command failed with code ${result.exitCode}`;
+    throw Object.assign(new Error(errorMessage), {
+      stdout: result.stdout,
+      stderr: result.stderr,
+    });
+  }
+}
+
+// ============================================================================
+// Common Git Utilities
+// ============================================================================
+
+/**
+ * Get the current branch name for the given worktree.
+ *
+ * This is the canonical implementation shared across services.  Services
+ * should import this rather than duplicating the logic locally.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @returns The current branch name (trimmed)
+ */
+export async function getCurrentBranch(worktreePath: string): Promise<string> {
+  const branchOutput = await execGitCommand(['rev-parse', '--abbrev-ref', 'HEAD'], worktreePath);
+  return branchOutput.trim();
+}
+
+// ============================================================================
+// Index Lock Recovery
+// ============================================================================
+
+/**
+ * Check whether an error message indicates a stale git index lock file.
+ *
+ * Git operations that write to the index (e.g. `git stash push`) will fail
+ * with "could not write index" or "Unable to create ... .lock" when a
+ * `.git/index.lock` file exists from a previously interrupted operation.
+ *
+ * @param errorMessage - The error string from a failed git command
+ * @returns true if the error looks like a stale index lock issue
+ */
+export function isIndexLockError(errorMessage: string): boolean {
+  const lower = errorMessage.toLowerCase();
+  return (
+    lower.includes('could not write index') ||
+    (lower.includes('unable to create') && lower.includes('index.lock')) ||
+    lower.includes('index.lock')
+  );
+}
+
+/**
+ * Attempt to remove a stale `.git/index.lock` file for the given worktree.
+ *
+ * Uses `git rev-parse --git-dir` to locate the correct `.git` directory,
+ * which works for both regular repositories and linked worktrees.
+ *
+ * @param worktreePath - Path to the git worktree (or main repo)
+ * @returns true if a lock file was found and removed, false otherwise
+ */
+export async function removeStaleIndexLock(worktreePath: string): Promise<boolean> {
+  try {
+    // Resolve the .git directory (handles worktrees correctly)
+    const gitDirRaw = await execGitCommand(['rev-parse', '--git-dir'], worktreePath);
+    const gitDir = path.resolve(worktreePath, gitDirRaw.trim());
+    const lockFilePath = path.join(gitDir, 'index.lock');
+
+    // Check if the lock file exists
+    try {
+      await fs.access(lockFilePath);
+    } catch {
+      // Lock file does not exist — nothing to remove
+      return false;
+    }
+
+    // Remove the stale lock file
+    await fs.unlink(lockFilePath);
+    logger.info('Removed stale index.lock file', { worktreePath, lockFilePath });
+    return true;
+  } catch (err) {
+    logger.warn('Failed to remove stale index.lock file', {
+      worktreePath,
+      error: err instanceof Error ? err.message : String(err),
+    });
+    return false;
+  }
+}
+
+/**
+ * Execute a git command with automatic retry when a stale index.lock is detected.
+ *
+ * If the command fails with an error indicating a locked index file, this
+ * helper will attempt to remove the stale `.git/index.lock` and retry the
+ * command exactly once.
+ *
+ * This is particularly useful for `git stash push` which writes to the
+ * index and commonly fails when a previous git operation was interrupted.
+ *
+ * @param args - Array of git command arguments
+ * @param cwd - Working directory to execute the command in
+ * @param env - Optional additional environment variables
+ * @returns Promise resolving to stdout output
+ * @throws The original error if retry also fails, or a non-lock error
+ */
+export async function execGitCommandWithLockRetry(
+  args: string[],
+  cwd: string,
+  env?: Record<string, string>
+): Promise<string> {
+  try {
+    return await execGitCommand(args, cwd, env);
+  } catch (error: unknown) {
+    const err = error as { message?: string; stderr?: string };
+    const errorMessage = err.stderr || err.message || '';
+
+    if (!isIndexLockError(errorMessage)) {
+      throw error;
+    }
+
+    logger.info('Git command failed due to index lock, attempting cleanup and retry', {
+      cwd,
+      args: args.join(' '),
+    });
+
+    const removed = await removeStaleIndexLock(cwd);
+    if (!removed) {
+      // Could not remove the lock file — re-throw the original error
+      throw error;
+    }
+
+    // Retry the command once after removing the lock file
+    return await execGitCommand(args, cwd, env);
+  }
+}
diff --git a/temp_repo/apps/server/src/lib/json-extractor.ts b/temp_repo/apps/server/src/lib/json-extractor.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a1a97dd89c28e110f09a056bba801e5064479e06
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/json-extractor.ts
@@ -0,0 +1,211 @@
+/**
+ * JSON Extraction Utilities
+ *
+ * Robust JSON extraction from AI responses that may contain markdown,
+ * code blocks, or other text mixed with JSON content.
+ *
+ * Used by various routes that parse structured output from Cursor or
+ * Claude responses when structured output is not available.
+ */
+
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('JsonExtractor');
+
+/**
+ * Logger interface for optional custom logging
+ */
+export interface JsonExtractorLogger {
+  debug: (message: string, ...args: unknown[]) => void;
+  warn?: (message: string, ...args: unknown[]) => void;
+}
+
+/**
+ * Options for JSON extraction
+ */
+export interface ExtractJsonOptions {
+  /** Custom logger (defaults to internal logger) */
+  logger?: JsonExtractorLogger;
+  /** Required key that must be present in the extracted JSON */
+  requiredKey?: string;
+  /** Whether the required key's value must be an array */
+  requireArray?: boolean;
+}
+
+/**
+ * Extract JSON from response text using multiple strategies.
+ *
+ * Strategies tried in order:
+ * 1. JSON in ```json code block
+ * 2. JSON in ``` code block (no language)
+ * 3. Find JSON object by matching braces (starting with requiredKey if specified)
+ * 4. Find any JSON object by matching braces
+ * 5. Parse entire response as JSON
+ *
+ * @param responseText - The raw response text that may contain JSON
+ * @param options - Optional extraction options
+ * @returns Parsed JSON object or null if extraction fails
+ */
+export function extractJson<T = Record<string, unknown>>(
+  responseText: string,
+  options: ExtractJsonOptions = {}
+): T | null {
+  const log = options.logger || logger;
+  const requiredKey = options.requiredKey;
+  const requireArray = options.requireArray ?? false;
+
+  /**
+   * Validate that the result has the required key/structure
+   */
+  const validateResult = (result: unknown): result is T => {
+    if (!result || typeof result !== 'object') return false;
+    if (requiredKey) {
+      const obj = result as Record<string, unknown>;
+      if (!(requiredKey in obj)) return false;
+      if (requireArray && !Array.isArray(obj[requiredKey])) return false;
+    }
+    return true;
+  };
+
+  /**
+   * Find matching closing brace by counting brackets
+   */
+  const findMatchingBrace = (text: string, startIdx: number): number => {
+    let depth = 0;
+    for (let i = startIdx; i < text.length; i++) {
+      if (text[i] === '{') depth++;
+      if (text[i] === '}') {
+        depth--;
+        if (depth === 0) {
+          return i + 1;
+        }
+      }
+    }
+    return -1;
+  };
+
+  const strategies = [
+    // Strategy 1: JSON in ```json code block
+    () => {
+      const match = responseText.match(/```json\s*([\s\S]*?)```/);
+      if (match) {
+        log.debug('Extracting JSON from ```json code block');
+        return JSON.parse(match[1].trim());
+      }
+      return null;
+    },
+
+    // Strategy 2: JSON in ``` code block (no language specified)
+    () => {
+      const match = responseText.match(/```\s*([\s\S]*?)```/);
+      if (match) {
+        const content = match[1].trim();
+        // Only try if it looks like JSON (starts with { or [)
+        if (content.startsWith('{') || content.startsWith('[')) {
+          log.debug('Extracting JSON from ``` code block');
+          return JSON.parse(content);
+        }
+      }
+      return null;
+    },
+
+    // Strategy 3: Find JSON object containing the required key (if specified)
+    () => {
+      if (!requiredKey) return null;
+
+      const searchPattern = `{"${requiredKey}"`;
+      const startIdx = responseText.indexOf(searchPattern);
+      if (startIdx === -1) return null;
+
+      const endIdx = findMatchingBrace(responseText, startIdx);
+      if (endIdx > startIdx) {
+        log.debug(`Extracting JSON with required key "${requiredKey}"`);
+        return JSON.parse(responseText.slice(startIdx, endIdx));
+      }
+      return null;
+    },
+
+    // Strategy 4: Find any JSON object by matching braces
+    () => {
+      const startIdx = responseText.indexOf('{');
+      if (startIdx === -1) return null;
+
+      const endIdx = findMatchingBrace(responseText, startIdx);
+      if (endIdx > startIdx) {
+        log.debug('Extracting JSON by brace matching');
+        return JSON.parse(responseText.slice(startIdx, endIdx));
+      }
+      return null;
+    },
+
+    // Strategy 5: Find JSON using first { to last } (may be less accurate)
+    () => {
+      const firstBrace = responseText.indexOf('{');
+      const lastBrace = responseText.lastIndexOf('}');
+      if (firstBrace !== -1 && lastBrace > firstBrace) {
+        log.debug('Extracting JSON from first { to last }');
+        return JSON.parse(responseText.slice(firstBrace, lastBrace + 1));
+      }
+      return null;
+    },
+
+    // Strategy 6: Try parsing the entire response as JSON
+    () => {
+      const trimmed = responseText.trim();
+      if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+        log.debug('Parsing entire response as JSON');
+        return JSON.parse(trimmed);
+      }
+      return null;
+    },
+  ];
+
+  for (const strategy of strategies) {
+    try {
+      const result = strategy();
+      if (validateResult(result)) {
+        log.debug('Successfully extracted JSON');
+        return result as T;
+      }
+    } catch {
+      // Strategy failed, try next
+    }
+  }
+
+  log.debug('Failed to extract JSON from response');
+  return null;
+}
+
+/**
+ * Extract JSON with a specific required key.
+ * Convenience wrapper around extractJson.
+ *
+ * @param responseText - The raw response text
+ * @param requiredKey - Key that must be present in the extracted JSON
+ * @param options - Additional options
+ * @returns Parsed JSON object or null
+ */
+export function extractJsonWithKey<T = Record<string, unknown>>(
+  responseText: string,
+  requiredKey: string,
+  options: Omit<ExtractJsonOptions, 'requiredKey'> = {}
+): T | null {
+  return extractJson<T>(responseText, { ...options, requiredKey });
+}
+
+/**
+ * Extract JSON that has a required array property.
+ * Useful for extracting responses like { "suggestions": [...] }
+ *
+ * @param responseText - The raw response text
+ * @param arrayKey - Key that must contain an array
+ * @param options - Additional options
+ * @returns Parsed JSON object or null
+ */
+export function extractJsonWithArray<T = Record<string, unknown>>(
+  responseText: string,
+  arrayKey: string,
+  options: Omit<ExtractJsonOptions, 'requiredKey' | 'requireArray'> = {}
+): T | null {
+  return extractJson<T>(responseText, { ...options, requiredKey: arrayKey, requireArray: true });
+}
diff --git a/temp_repo/apps/server/src/lib/permission-enforcer.ts b/temp_repo/apps/server/src/lib/permission-enforcer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..714f7d40a06c4285c1065bea956b7414bef3c3c4
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/permission-enforcer.ts
@@ -0,0 +1,184 @@
+/**
+ * Permission enforcement utilities for Cursor provider
+ */
+
+import type { CursorCliConfigFile } from '@automaker/types';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('PermissionEnforcer');
+
+export interface PermissionCheckResult {
+  allowed: boolean;
+  reason?: string;
+}
+
+/** Minimal shape of a Cursor tool call used for permission checking */
+interface CursorToolCall {
+  shellToolCall?: { args?: { command: string } };
+  readToolCall?: { args?: { path: string } };
+  writeToolCall?: { args?: { path: string } };
+}
+
+/**
+ * Check if a tool call is allowed based on permissions
+ */
+export function checkToolCallPermission(
+  toolCall: CursorToolCall,
+  permissions: CursorCliConfigFile | null
+): PermissionCheckResult {
+  if (!permissions || !permissions.permissions) {
+    // If no permissions are configured, allow everything (backward compatibility)
+    return { allowed: true };
+  }
+
+  const { allow = [], deny = [] } = permissions.permissions;
+
+  // Check shell tool calls
+  if (toolCall.shellToolCall?.args?.command) {
+    const command = toolCall.shellToolCall.args.command;
+    const toolName = `Shell(${extractCommandName(command)})`;
+
+    // Check deny list first (deny takes precedence)
+    for (const denyRule of deny) {
+      if (matchesRule(toolName, denyRule)) {
+        return {
+          allowed: false,
+          reason: `Operation blocked by permission rule: ${denyRule}`,
+        };
+      }
+    }
+
+    // Then check allow list
+    for (const allowRule of allow) {
+      if (matchesRule(toolName, allowRule)) {
+        return { allowed: true };
+      }
+    }
+
+    return {
+      allowed: false,
+      reason: `Operation not in allow list: ${toolName}`,
+    };
+  }
+
+  // Check read tool calls
+  if (toolCall.readToolCall?.args?.path) {
+    const path = toolCall.readToolCall.args.path;
+    const toolName = `Read(${path})`;
+
+    // Check deny list first
+    for (const denyRule of deny) {
+      if (matchesRule(toolName, denyRule)) {
+        return {
+          allowed: false,
+          reason: `Read operation blocked by permission rule: ${denyRule}`,
+        };
+      }
+    }
+
+    // Then check allow list
+    for (const allowRule of allow) {
+      if (matchesRule(toolName, allowRule)) {
+        return { allowed: true };
+      }
+    }
+
+    return {
+      allowed: false,
+      reason: `Read operation not in allow list: ${toolName}`,
+    };
+  }
+
+  // Check write tool calls
+  if (toolCall.writeToolCall?.args?.path) {
+    const path = toolCall.writeToolCall.args.path;
+    const toolName = `Write(${path})`;
+
+    // Check deny list first
+    for (const denyRule of deny) {
+      if (matchesRule(toolName, denyRule)) {
+        return {
+          allowed: false,
+          reason: `Write operation blocked by permission rule: ${denyRule}`,
+        };
+      }
+    }
+
+    // Then check allow list
+    for (const allowRule of allow) {
+      if (matchesRule(toolName, allowRule)) {
+        return { allowed: true };
+      }
+    }
+
+    return {
+      allowed: false,
+      reason: `Write operation not in allow list: ${toolName}`,
+    };
+  }
+
+  // For other tool types, allow by default for now
+  return { allowed: true };
+}
+
+/**
+ * Extract the base command name from a shell command
+ */
+function extractCommandName(command: string): string {
+  // Remove leading spaces and get the first word
+  const trimmed = command.trim();
+  const firstWord = trimmed.split(/\s+/)[0];
+  return firstWord || 'unknown';
+}
+
+/**
+ * Check if a tool name matches a permission rule
+ */
+function matchesRule(toolName: string, rule: string): boolean {
+  // Exact match
+  if (toolName === rule) {
+    return true;
+  }
+
+  // Wildcard patterns
+  if (rule.includes('*')) {
+    const regex = new RegExp(rule.replace(/\*/g, '.*'));
+    return regex.test(toolName);
+  }
+
+  // Prefix match for shell commands (e.g., "Shell(git)" matches "Shell(git status)")
+  if (rule.startsWith('Shell(') && toolName.startsWith('Shell(')) {
+    const ruleCommand = rule.slice(6, -1); // Remove "Shell(" and ")"
+    const toolCommand = extractCommandName(toolName.slice(6, -1)); // Remove "Shell(" and ")"
+    return toolCommand.startsWith(ruleCommand);
+  }
+
+  return false;
+}
+
+/**
+ * Log permission violations
+ */
+export function logPermissionViolation(
+  toolCall: CursorToolCall,
+  reason: string,
+  sessionId?: string
+): void {
+  const sessionIdStr = sessionId ? ` [${sessionId}]` : '';
+
+  if (toolCall.shellToolCall?.args?.command) {
+    logger.warn(
+      `Permission violation${sessionIdStr}: Shell command blocked - ${toolCall.shellToolCall.args.command} (${reason})`
+    );
+  } else if (toolCall.readToolCall?.args?.path) {
+    logger.warn(
+      `Permission violation${sessionIdStr}: Read operation blocked - ${toolCall.readToolCall.args.path} (${reason})`
+    );
+  } else if (toolCall.writeToolCall?.args?.path) {
+    logger.warn(
+      `Permission violation${sessionIdStr}: Write operation blocked - ${toolCall.writeToolCall.args.path} (${reason})`
+    );
+  } else {
+    logger.warn(`Permission violation${sessionIdStr}: Tool call blocked (${reason})`, { toolCall });
+  }
+}
diff --git a/temp_repo/apps/server/src/lib/sdk-options.ts b/temp_repo/apps/server/src/lib/sdk-options.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7044221e17de2568f7fbe5ef6061fd08130c3b60
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/sdk-options.ts
@@ -0,0 +1,623 @@
+/**
+ * SDK Options Factory - Centralized configuration for Claude Agent SDK
+ *
+ * Provides presets for common use cases:
+ * - Spec generation: Long-running analysis with read-only tools
+ * - Feature generation: Quick JSON generation from specs
+ * - Feature building: Autonomous feature implementation with full tool access
+ * - Suggestions: Analysis with read-only tools
+ * - Chat: Full tool access for interactive coding
+ *
+ * Uses model-resolver for consistent model handling across the application.
+ *
+ * SECURITY: All factory functions validate the working directory (cwd) against
+ * ALLOWED_ROOT_DIRECTORY before returning options. This provides a centralized
+ * security check that applies to ALL AI model invocations, regardless of provider.
+ */
+
+import type { Options } from '@anthropic-ai/claude-agent-sdk';
+import path from 'path';
+import { resolveModelString } from '@automaker/model-resolver';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('SdkOptions');
+import {
+  DEFAULT_MODELS,
+  CLAUDE_MODEL_MAP,
+  type McpServerConfig,
+  type ThinkingLevel,
+  getThinkingTokenBudget,
+} from '@automaker/types';
+import { isPathAllowed, PathNotAllowedError, getAllowedRootDirectory } from '@automaker/platform';
+
+/**
+ * Result of sandbox compatibility check
+ */
+export interface SandboxCompatibilityResult {
+  /** Whether sandbox mode can be enabled for this path */
+  enabled: boolean;
+  /** Optional message explaining why sandbox is disabled */
+  message?: string;
+}
+
+/**
+ * Check if a working directory is compatible with sandbox mode.
+ * Some paths (like cloud storage mounts) may not work with sandboxed execution.
+ *
+ * @param cwd - The working directory to check
+ * @param sandboxRequested - Whether sandbox mode was requested by settings
+ * @returns Object indicating if sandbox can be enabled and why not if disabled
+ */
+export function checkSandboxCompatibility(
+  cwd: string,
+  sandboxRequested: boolean
+): SandboxCompatibilityResult {
+  if (!sandboxRequested) {
+    return { enabled: false };
+  }
+
+  const resolvedCwd = path.resolve(cwd);
+
+  // Check for cloud storage paths that may not be compatible with sandbox
+  const cloudStoragePatterns = [
+    // macOS mounted volumes
+    /^\/Volumes\/GoogleDrive/i,
+    /^\/Volumes\/Dropbox/i,
+    /^\/Volumes\/OneDrive/i,
+    /^\/Volumes\/iCloud/i,
+    // macOS home directory
+    /^\/Users\/[^/]+\/Google Drive/i,
+    /^\/Users\/[^/]+\/Dropbox/i,
+    /^\/Users\/[^/]+\/OneDrive/i,
+    /^\/Users\/[^/]+\/Library\/Mobile Documents/i, // iCloud
+    // Linux home directory
+    /^\/home\/[^/]+\/Google Drive/i,
+    /^\/home\/[^/]+\/Dropbox/i,
+    /^\/home\/[^/]+\/OneDrive/i,
+    // Windows
+    /^C:\\Users\\[^\\]+\\Google Drive/i,
+    /^C:\\Users\\[^\\]+\\Dropbox/i,
+    /^C:\\Users\\[^\\]+\\OneDrive/i,
+  ];
+
+  for (const pattern of cloudStoragePatterns) {
+    if (pattern.test(resolvedCwd)) {
+      return {
+        enabled: false,
+        message: `Sandbox disabled: Cloud storage path detected (${resolvedCwd}). Sandbox mode may not work correctly with cloud-synced directories.`,
+      };
+    }
+  }
+
+  return { enabled: true };
+}
+
+/**
+ * Validate that a working directory is allowed by ALLOWED_ROOT_DIRECTORY.
+ * This is the centralized security check for ALL AI model invocations.
+ *
+ * @param cwd - The working directory to validate
+ * @throws PathNotAllowedError if the directory is not within ALLOWED_ROOT_DIRECTORY
+ *
+ * This function is called by all create*Options() factory functions to ensure
+ * that AI models can only operate within allowed directories. This applies to:
+ * - All current models (Claude, future models)
+ * - All invocation types (chat, auto-mode, spec generation, etc.)
+ */
+export function validateWorkingDirectory(cwd: string): void {
+  const resolvedCwd = path.resolve(cwd);
+
+  if (!isPathAllowed(resolvedCwd)) {
+    const allowedRoot = getAllowedRootDirectory();
+    throw new PathNotAllowedError(
+      `Working directory "${cwd}" (resolved: ${resolvedCwd}) is not allowed. ` +
+        (allowedRoot
+          ? `Must be within ALLOWED_ROOT_DIRECTORY: ${allowedRoot}`
+          : 'ALLOWED_ROOT_DIRECTORY is configured but path is not within allowed directories.')
+    );
+  }
+}
+
+/**
+ * Tool presets for different use cases
+ */
+export const TOOL_PRESETS = {
+  /** Read-only tools for analysis */
+  readOnly: ['Read', 'Glob', 'Grep'] as const,
+
+  /** Tools for spec generation that needs to read the codebase */
+  specGeneration: ['Read', 'Glob', 'Grep'] as const,
+
+  /** Full tool access for feature implementation */
+  fullAccess: [
+    'Read',
+    'Write',
+    'Edit',
+    'MultiEdit',
+    'Glob',
+    'Grep',
+    'LS',
+    'Bash',
+    'WebSearch',
+    'WebFetch',
+    'TodoWrite',
+    'Task',
+    'Skill',
+  ] as const,
+
+  /** Tools for chat/interactive mode */
+  chat: [
+    'Read',
+    'Write',
+    'Edit',
+    'MultiEdit',
+    'Glob',
+    'Grep',
+    'LS',
+    'Bash',
+    'WebSearch',
+    'WebFetch',
+    'TodoWrite',
+    'Task',
+    'Skill',
+  ] as const,
+} as const;
+
+/**
+ * Max turns presets for different use cases
+ */
+export const MAX_TURNS = {
+  /** Quick operations that shouldn't need many iterations */
+  quick: 50,
+
+  /** Standard operations */
+  standard: 100,
+
+  /** Long-running operations like full spec generation */
+  extended: 250,
+
+  /** Very long operations that may require extensive exploration */
+  maximum: 1000,
+} as const;
+
+/**
+ * Model presets for different use cases
+ *
+ * These can be overridden via environment variables:
+ * - AUTOMAKER_MODEL_SPEC: Model for spec generation
+ * - AUTOMAKER_MODEL_FEATURES: Model for feature generation
+ * - AUTOMAKER_MODEL_SUGGESTIONS: Model for suggestions
+ * - AUTOMAKER_MODEL_CHAT: Model for chat
+ * - AUTOMAKER_MODEL_DEFAULT: Fallback model for all operations
+ */
+export function getModelForUseCase(
+  useCase: 'spec' | 'features' | 'suggestions' | 'chat' | 'auto' | 'default',
+  explicitModel?: string
+): string {
+  // Explicit model takes precedence
+  if (explicitModel) {
+    return resolveModelString(explicitModel);
+  }
+
+  // Check environment variable override for this use case
+  const envVarMap: Record<string, string | undefined> = {
+    spec: process.env.AUTOMAKER_MODEL_SPEC,
+    features: process.env.AUTOMAKER_MODEL_FEATURES,
+    suggestions: process.env.AUTOMAKER_MODEL_SUGGESTIONS,
+    chat: process.env.AUTOMAKER_MODEL_CHAT,
+    auto: process.env.AUTOMAKER_MODEL_AUTO,
+    default: process.env.AUTOMAKER_MODEL_DEFAULT,
+  };
+
+  const envModel = envVarMap[useCase] || envVarMap.default;
+  if (envModel) {
+    return resolveModelString(envModel);
+  }
+
+  const defaultModels: Record<string, string> = {
+    spec: CLAUDE_MODEL_MAP['haiku'], // used to generate app specs
+    features: CLAUDE_MODEL_MAP['haiku'], // used to generate features from app specs
+    suggestions: CLAUDE_MODEL_MAP['haiku'], // used for suggestions
+    chat: CLAUDE_MODEL_MAP['haiku'], // used for chat
+    auto: CLAUDE_MODEL_MAP['opus'], // used to implement kanban cards
+    default: CLAUDE_MODEL_MAP['opus'],
+  };
+
+  return resolveModelString(defaultModels[useCase] || DEFAULT_MODELS.claude);
+}
+
+/**
+ * Base options that apply to all SDK calls
+ * AUTONOMOUS MODE: Always bypass permissions for fully autonomous operation
+ */
+function getBaseOptions(): Partial<Options> {
+  return {
+    permissionMode: 'bypassPermissions',
+    allowDangerouslySkipPermissions: true,
+  };
+}
+
+/**
+ * MCP options result
+ */
+interface McpOptions {
+  /** Options to spread for MCP servers */
+  mcpServerOptions: Partial<Options>;
+}
+
+/**
+ * Build MCP-related options based on configuration.
+ *
+ * @param config - The SDK options config
+ * @returns Object with MCP server settings to spread into final options
+ */
+function buildMcpOptions(config: CreateSdkOptionsConfig): McpOptions {
+  return {
+    // Include MCP servers if configured
+    mcpServerOptions: config.mcpServers ? { mcpServers: config.mcpServers } : {},
+  };
+}
+
+/**
+ * Build thinking options for SDK configuration.
+ * Converts ThinkingLevel to maxThinkingTokens for the Claude SDK.
+ * For adaptive thinking (Opus 4.6), omits maxThinkingTokens to let the model
+ * decide its own reasoning depth.
+ *
+ * @param thinkingLevel - The thinking level to convert
+ * @returns Object with maxThinkingTokens if thinking is enabled with a budget
+ */
+function buildThinkingOptions(thinkingLevel?: ThinkingLevel): Partial<Options> {
+  if (!thinkingLevel || thinkingLevel === 'none') {
+    return {};
+  }
+
+  // Adaptive thinking (Opus 4.6): don't set maxThinkingTokens
+  // The model will use adaptive thinking by default
+  if (thinkingLevel === 'adaptive') {
+    logger.debug(
+      `buildThinkingOptions: thinkingLevel="adaptive" -> no maxThinkingTokens (model decides)`
+    );
+    return {};
+  }
+
+  // Manual budget-based thinking for Haiku/Sonnet
+  const maxThinkingTokens = getThinkingTokenBudget(thinkingLevel);
+  logger.debug(
+    `buildThinkingOptions: thinkingLevel="${thinkingLevel}" -> maxThinkingTokens=${maxThinkingTokens}`
+  );
+  return maxThinkingTokens ? { maxThinkingTokens } : {};
+}
+
+/**
+ * Build system prompt and settingSources based on two independent settings:
+ * - useClaudeCodeSystemPrompt: controls whether to use the 'claude_code' preset as the base prompt
+ * - autoLoadClaudeMd: controls whether to add settingSources for SDK to load CLAUDE.md files
+ *
+ * These combine independently (4 possible states):
+ * 1. Both ON: preset + settingSources (full Claude Code experience)
+ * 2. useClaudeCodeSystemPrompt ON, autoLoadClaudeMd OFF: preset only (no CLAUDE.md auto-loading)
+ * 3. useClaudeCodeSystemPrompt OFF, autoLoadClaudeMd ON: plain string + settingSources
+ * 4. Both OFF: plain string only
+ *
+ * @param config - The SDK options config
+ * @returns Object with systemPrompt and settingSources for SDK options
+ */
+function buildClaudeMdOptions(config: CreateSdkOptionsConfig): {
+  systemPrompt?: string | SystemPromptConfig;
+  settingSources?: Array<'user' | 'project' | 'local'>;
+} {
+  const result: {
+    systemPrompt?: string | SystemPromptConfig;
+    settingSources?: Array<'user' | 'project' | 'local'>;
+  } = {};
+
+  // Determine system prompt format based on useClaudeCodeSystemPrompt
+  if (config.useClaudeCodeSystemPrompt) {
+    // Use Claude Code's built-in system prompt as the base
+    const presetConfig: SystemPromptConfig = {
+      type: 'preset',
+      preset: 'claude_code',
+    };
+    // If there's a custom system prompt, append it to the preset
+    if (config.systemPrompt) {
+      presetConfig.append = config.systemPrompt;
+    }
+    result.systemPrompt = presetConfig;
+  } else {
+    // Standard mode - just pass through the system prompt as-is
+    if (config.systemPrompt) {
+      result.systemPrompt = config.systemPrompt;
+    }
+  }
+
+  // Determine settingSources based on autoLoadClaudeMd
+  if (config.autoLoadClaudeMd) {
+    // Load both user (~/.claude/CLAUDE.md) and project (.claude/CLAUDE.md) settings
+    result.settingSources = ['user', 'project'];
+  }
+
+  return result;
+}
+
+/**
+ * System prompt configuration for SDK options
+ * The 'claude_code' preset provides the system prompt only — it does NOT auto-load
+ * CLAUDE.md files. CLAUDE.md auto-loading is controlled independently by
+ * settingSources (set via autoLoadClaudeMd). These two settings are orthogonal.
+ */
+export interface SystemPromptConfig {
+  /** Use preset mode to select the base system prompt */
+  type: 'preset';
+  /** The preset to use - 'claude_code' uses the Claude Code system prompt */
+  preset: 'claude_code';
+  /** Optional additional prompt to append to the preset */
+  append?: string;
+}
+
+/**
+ * Options configuration for creating SDK options
+ */
+export interface CreateSdkOptionsConfig {
+  /** Working directory for the agent */
+  cwd: string;
+
+  /** Optional explicit model override */
+  model?: string;
+
+  /** Optional session model (used as fallback if explicit model not provided) */
+  sessionModel?: string;
+
+  /** Optional system prompt */
+  systemPrompt?: string;
+
+  /** Optional abort controller for cancellation */
+  abortController?: AbortController;
+
+  /** Optional output format for structured outputs */
+  outputFormat?: {
+    type: 'json_schema';
+    schema: Record<string, unknown>;
+  };
+
+  /** Enable auto-loading of CLAUDE.md files via SDK's settingSources */
+  autoLoadClaudeMd?: boolean;
+
+  /** Use Claude Code's built-in system prompt (claude_code preset) as the base prompt */
+  useClaudeCodeSystemPrompt?: boolean;
+
+  /** MCP servers to make available to the agent */
+  mcpServers?: Record<string, McpServerConfig>;
+
+  /** Extended thinking level for Claude models */
+  thinkingLevel?: ThinkingLevel;
+
+  /** Optional user-configured max turns override (from settings).
+   * When provided, overrides the preset MAX_TURNS for the use case.
+   * Range: 1-2000. */
+  maxTurns?: number;
+}
+
+// Re-export MCP types from @automaker/types for convenience
+export type {
+  McpServerConfig,
+  McpStdioServerConfig,
+  McpSSEServerConfig,
+  McpHttpServerConfig,
+} from '@automaker/types';
+
+/**
+ * Create SDK options for spec generation
+ *
+ * Configuration:
+ * - Uses read-only tools for codebase analysis
+ * - Extended turns for thorough exploration
+ * - Opus model by default (can be overridden)
+ * - When autoLoadClaudeMd is true, uses preset mode and settingSources for CLAUDE.md loading
+ */
+export function createSpecGenerationOptions(config: CreateSdkOptionsConfig): Options {
+  // Validate working directory before creating options
+  validateWorkingDirectory(config.cwd);
+
+  // Build CLAUDE.md auto-loading options if enabled
+  const claudeMdOptions = buildClaudeMdOptions(config);
+
+  // Build thinking options
+  const thinkingOptions = buildThinkingOptions(config.thinkingLevel);
+
+  return {
+    ...getBaseOptions(),
+    // Override permissionMode - spec generation only needs read-only tools
+    // Using "acceptEdits" can cause Claude to write files to unexpected locations
+    // See: https://github.com/AutoMaker-Org/automaker/issues/149
+    permissionMode: 'default',
+    model: getModelForUseCase('spec', config.model),
+    maxTurns: config.maxTurns ?? MAX_TURNS.maximum,
+    cwd: config.cwd,
+    allowedTools: [...TOOL_PRESETS.specGeneration],
+    ...claudeMdOptions,
+    ...thinkingOptions,
+    ...(config.abortController && { abortController: config.abortController }),
+    ...(config.outputFormat && { outputFormat: config.outputFormat }),
+  };
+}
+
+/**
+ * Create SDK options for feature generation from specs
+ *
+ * Configuration:
+ * - Uses read-only tools (just needs to read the spec)
+ * - Quick turns since it's mostly JSON generation
+ * - Sonnet model by default for speed
+ * - When autoLoadClaudeMd is true, uses preset mode and settingSources for CLAUDE.md loading
+ */
+export function createFeatureGenerationOptions(config: CreateSdkOptionsConfig): Options {
+  // Validate working directory before creating options
+  validateWorkingDirectory(config.cwd);
+
+  // Build CLAUDE.md auto-loading options if enabled
+  const claudeMdOptions = buildClaudeMdOptions(config);
+
+  // Build thinking options
+  const thinkingOptions = buildThinkingOptions(config.thinkingLevel);
+
+  return {
+    ...getBaseOptions(),
+    // Override permissionMode - feature generation only needs read-only tools
+    permissionMode: 'default',
+    model: getModelForUseCase('features', config.model),
+    maxTurns: config.maxTurns ?? MAX_TURNS.quick,
+    cwd: config.cwd,
+    allowedTools: [...TOOL_PRESETS.readOnly],
+    ...claudeMdOptions,
+    ...thinkingOptions,
+    ...(config.abortController && { abortController: config.abortController }),
+  };
+}
+
+/**
+ * Create SDK options for generating suggestions
+ *
+ * Configuration:
+ * - Uses read-only tools for analysis
+ * - Standard turns to allow thorough codebase exploration and structured output generation
+ * - Opus model by default for thorough analysis
+ * - When autoLoadClaudeMd is true, uses preset mode and settingSources for CLAUDE.md loading
+ */
+export function createSuggestionsOptions(config: CreateSdkOptionsConfig): Options {
+  // Validate working directory before creating options
+  validateWorkingDirectory(config.cwd);
+
+  // Build CLAUDE.md auto-loading options if enabled
+  const claudeMdOptions = buildClaudeMdOptions(config);
+
+  // Build thinking options
+  const thinkingOptions = buildThinkingOptions(config.thinkingLevel);
+
+  return {
+    ...getBaseOptions(),
+    model: getModelForUseCase('suggestions', config.model),
+    maxTurns: config.maxTurns ?? MAX_TURNS.extended,
+    cwd: config.cwd,
+    allowedTools: [...TOOL_PRESETS.readOnly],
+    ...claudeMdOptions,
+    ...thinkingOptions,
+    ...(config.abortController && { abortController: config.abortController }),
+    ...(config.outputFormat && { outputFormat: config.outputFormat }),
+  };
+}
+
+/**
+ * Create SDK options for chat/interactive mode
+ *
+ * Configuration:
+ * - Full tool access for code modification
+ * - Standard turns for interactive sessions
+ * - Model priority: explicit model > session model > chat default
+ * - When autoLoadClaudeMd is true, uses preset mode and settingSources for CLAUDE.md loading
+ */
+export function createChatOptions(config: CreateSdkOptionsConfig): Options {
+  // Validate working directory before creating options
+  validateWorkingDirectory(config.cwd);
+
+  // Model priority: explicit model > session model > chat default
+  const effectiveModel = config.model || config.sessionModel;
+
+  // Build CLAUDE.md auto-loading options if enabled
+  const claudeMdOptions = buildClaudeMdOptions(config);
+
+  // Build MCP-related options
+  const mcpOptions = buildMcpOptions(config);
+
+  // Build thinking options
+  const thinkingOptions = buildThinkingOptions(config.thinkingLevel);
+
+  return {
+    ...getBaseOptions(),
+    model: getModelForUseCase('chat', effectiveModel),
+    maxTurns: config.maxTurns ?? MAX_TURNS.standard,
+    cwd: config.cwd,
+    allowedTools: [...TOOL_PRESETS.chat],
+    ...claudeMdOptions,
+    ...thinkingOptions,
+    ...(config.abortController && { abortController: config.abortController }),
+    ...mcpOptions.mcpServerOptions,
+  };
+}
+
+/**
+ * Create SDK options for autonomous feature building/implementation
+ *
+ * Configuration:
+ * - Full tool access for code modification and implementation
+ * - Extended turns for thorough feature implementation
+ * - Uses default model (can be overridden)
+ * - When autoLoadClaudeMd is true, uses preset mode and settingSources for CLAUDE.md loading
+ */
+export function createAutoModeOptions(config: CreateSdkOptionsConfig): Options {
+  // Validate working directory before creating options
+  validateWorkingDirectory(config.cwd);
+
+  // Build CLAUDE.md auto-loading options if enabled
+  const claudeMdOptions = buildClaudeMdOptions(config);
+
+  // Build MCP-related options
+  const mcpOptions = buildMcpOptions(config);
+
+  // Build thinking options
+  const thinkingOptions = buildThinkingOptions(config.thinkingLevel);
+
+  return {
+    ...getBaseOptions(),
+    model: getModelForUseCase('auto', config.model),
+    maxTurns: config.maxTurns ?? MAX_TURNS.maximum,
+    cwd: config.cwd,
+    allowedTools: [...TOOL_PRESETS.fullAccess],
+    ...claudeMdOptions,
+    ...thinkingOptions,
+    ...(config.abortController && { abortController: config.abortController }),
+    ...mcpOptions.mcpServerOptions,
+  };
+}
+
+/**
+ * Create custom SDK options with explicit configuration
+ *
+ * Use this when the preset options don't fit your use case.
+ * When autoLoadClaudeMd is true, uses preset mode and settingSources for CLAUDE.md loading
+ */
+export function createCustomOptions(
+  config: CreateSdkOptionsConfig & {
+    maxTurns?: number;
+    allowedTools?: readonly string[];
+  }
+): Options {
+  // Validate working directory before creating options
+  validateWorkingDirectory(config.cwd);
+
+  // Build CLAUDE.md auto-loading options if enabled
+  const claudeMdOptions = buildClaudeMdOptions(config);
+
+  // Build MCP-related options
+  const mcpOptions = buildMcpOptions(config);
+
+  // Build thinking options
+  const thinkingOptions = buildThinkingOptions(config.thinkingLevel);
+
+  // For custom options: use explicit allowedTools if provided, otherwise default to readOnly
+  const effectiveAllowedTools = config.allowedTools
+    ? [...config.allowedTools]
+    : [...TOOL_PRESETS.readOnly];
+
+  return {
+    ...getBaseOptions(),
+    model: getModelForUseCase('default', config.model),
+    maxTurns: config.maxTurns ?? MAX_TURNS.maximum,
+    cwd: config.cwd,
+    allowedTools: effectiveAllowedTools,
+    ...claudeMdOptions,
+    ...thinkingOptions,
+    ...(config.abortController && { abortController: config.abortController }),
+    ...mcpOptions.mcpServerOptions,
+  };
+}
diff --git a/temp_repo/apps/server/src/lib/secure-fs.ts b/temp_repo/apps/server/src/lib/secure-fs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..de8dba26de401b0932f1dd6b7e306542fc00e05a
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/secure-fs.ts
@@ -0,0 +1,39 @@
+/**
+ * Re-export secure file system utilities from @automaker/platform
+ * This file exists for backward compatibility with existing imports
+ */
+
+import { secureFs } from '@automaker/platform';
+
+export const {
+  // Async methods
+  access,
+  readFile,
+  writeFile,
+  mkdir,
+  readdir,
+  stat,
+  rm,
+  unlink,
+  copyFile,
+  appendFile,
+  rename,
+  lstat,
+  joinPath,
+  resolvePath,
+  // Sync methods
+  existsSync,
+  readFileSync,
+  writeFileSync,
+  mkdirSync,
+  readdirSync,
+  statSync,
+  accessSync,
+  unlinkSync,
+  rmSync,
+  // Throttling configuration and monitoring
+  configureThrottling,
+  getThrottlingConfig,
+  getPendingOperations,
+  getActiveOperations,
+} = secureFs;
diff --git a/temp_repo/apps/server/src/lib/settings-helpers.ts b/temp_repo/apps/server/src/lib/settings-helpers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..66db5b1ac232a207576166fa9a38c7cc4eaee780
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/settings-helpers.ts
@@ -0,0 +1,954 @@
+/**
+ * Helper utilities for loading settings and context file handling across different parts of the server
+ */
+
+import type { SettingsService } from '../services/settings-service.js';
+import type { ContextFilesResult, ContextFileInfo } from '@automaker/utils';
+import { createLogger } from '@automaker/utils';
+import type {
+  MCPServerConfig,
+  McpServerConfig,
+  PromptCustomization,
+  ClaudeApiProfile,
+  ClaudeCompatibleProvider,
+  PhaseModelKey,
+  PhaseModelEntry,
+  Credentials,
+} from '@automaker/types';
+import { DEFAULT_PHASE_MODELS } from '@automaker/types';
+import {
+  mergeAutoModePrompts,
+  mergeAgentPrompts,
+  mergeBacklogPlanPrompts,
+  mergeEnhancementPrompts,
+  mergeCommitMessagePrompts,
+  mergeTitleGenerationPrompts,
+  mergeIssueValidationPrompts,
+  mergeIdeationPrompts,
+  mergeAppSpecPrompts,
+  mergeContextDescriptionPrompts,
+  mergeSuggestionsPrompts,
+  mergeTaskExecutionPrompts,
+} from '@automaker/prompts';
+
+const logger = createLogger('SettingsHelper');
+
+/** Default number of agent turns used when no value is configured. */
+export const DEFAULT_MAX_TURNS = 10000;
+
+/** Upper bound for the max-turns clamp; values above this are capped here. */
+export const MAX_ALLOWED_TURNS = 10000;
+
+/**
+ * Get the autoLoadClaudeMd setting, with project settings taking precedence over global.
+ * Falls back to global settings and defaults to true when unset.
+ * Returns true if settings service is not available.
+ *
+ * @param projectPath - Path to the project
+ * @param settingsService - Optional settings service instance
+ * @param logPrefix - Prefix for log messages (e.g., '[DescribeImage]')
+ * @returns Promise resolving to the autoLoadClaudeMd setting value
+ */
+export async function getAutoLoadClaudeMdSetting(
+  projectPath: string,
+  settingsService?: SettingsService | null,
+  logPrefix = '[SettingsHelper]'
+): Promise<boolean> {
+  if (!settingsService) {
+    logger.info(`${logPrefix} SettingsService not available, autoLoadClaudeMd defaulting to true`);
+    return true;
+  }
+
+  try {
+    // Check project settings first (takes precedence)
+    const projectSettings = await settingsService.getProjectSettings(projectPath);
+    if (projectSettings.autoLoadClaudeMd !== undefined) {
+      logger.info(
+        `${logPrefix} autoLoadClaudeMd from project settings: ${projectSettings.autoLoadClaudeMd}`
+      );
+      return projectSettings.autoLoadClaudeMd;
+    }
+
+    // Fall back to global settings
+    const globalSettings = await settingsService.getGlobalSettings();
+    const result = globalSettings.autoLoadClaudeMd ?? true;
+    logger.info(`${logPrefix} autoLoadClaudeMd from global settings: ${result}`);
+    return result;
+  } catch (error) {
+    logger.error(`${logPrefix} Failed to load autoLoadClaudeMd setting:`, error);
+    throw error;
+  }
+}
+
+/**
+ * Get the useClaudeCodeSystemPrompt setting, with project settings taking precedence over global.
+ * Falls back to global settings and defaults to true when unset.
+ * Returns true if settings service is not available.
+ *
+ * @param projectPath - Path to the project
+ * @param settingsService - Optional settings service instance
+ * @param logPrefix - Prefix for log messages (e.g., '[AgentService]')
+ * @returns Promise resolving to the useClaudeCodeSystemPrompt setting value
+ */
+export async function getUseClaudeCodeSystemPromptSetting(
+  projectPath: string,
+  settingsService?: SettingsService | null,
+  logPrefix = '[SettingsHelper]'
+): Promise<boolean> {
+  if (!settingsService) {
+    logger.info(
+      `${logPrefix} SettingsService not available, useClaudeCodeSystemPrompt defaulting to true`
+    );
+    return true;
+  }
+
+  try {
+    // Check project settings first (takes precedence)
+    const projectSettings = await settingsService.getProjectSettings(projectPath);
+    if (projectSettings.useClaudeCodeSystemPrompt !== undefined) {
+      logger.info(
+        `${logPrefix} useClaudeCodeSystemPrompt from project settings: ${projectSettings.useClaudeCodeSystemPrompt}`
+      );
+      return projectSettings.useClaudeCodeSystemPrompt;
+    }
+
+    // Fall back to global settings
+    const globalSettings = await settingsService.getGlobalSettings();
+    const result = globalSettings.useClaudeCodeSystemPrompt ?? true;
+    logger.info(`${logPrefix} useClaudeCodeSystemPrompt from global settings: ${result}`);
+    return result;
+  } catch (error) {
+    logger.error(`${logPrefix} Failed to load useClaudeCodeSystemPrompt setting:`, error);
+    throw error;
+  }
+}
+
+/**
+ * Get the default max turns setting from global settings.
+ *
+ * Reads the user's configured `defaultMaxTurns` setting, which controls the maximum
+ * number of agent turns (tool-call round-trips) for feature execution.
+ *
+ * @param settingsService - Settings service instance (may be null)
+ * @param logPrefix - Logging prefix for debugging
+ * @returns The user's configured max turns, or {@link DEFAULT_MAX_TURNS} as default
+ */
+export async function getDefaultMaxTurnsSetting(
+  settingsService?: SettingsService | null,
+  logPrefix = '[SettingsHelper]'
+): Promise<number> {
+  if (!settingsService) {
+    logger.info(
+      `${logPrefix} SettingsService not available, using default maxTurns=${DEFAULT_MAX_TURNS}`
+    );
+    return DEFAULT_MAX_TURNS;
+  }
+
+  try {
+    const globalSettings = await settingsService.getGlobalSettings();
+    const raw = globalSettings.defaultMaxTurns;
+    const result = Number.isFinite(raw) ? (raw as number) : DEFAULT_MAX_TURNS;
+    // Clamp to valid range
+    const clamped = Math.max(1, Math.min(MAX_ALLOWED_TURNS, Math.floor(result)));
+    logger.debug(`${logPrefix} defaultMaxTurns from global settings: ${clamped}`);
+    return clamped;
+  } catch (error) {
+    logger.error(`${logPrefix} Failed to load defaultMaxTurns setting:`, error);
+    return DEFAULT_MAX_TURNS;
+  }
+}
+
+/**
+ * Filters out CLAUDE.md from context files when autoLoadClaudeMd is enabled
+ * and rebuilds the formatted prompt without it.
+ *
+ * When autoLoadClaudeMd is true, the SDK handles CLAUDE.md loading via settingSources,
+ * so we need to exclude it from the manual context loading to avoid duplication.
+ * Other context files (CODE_QUALITY.md, CONVENTIONS.md, etc.) are preserved.
+ *
+ * @param contextResult - Result from loadContextFiles
+ * @param autoLoadClaudeMd - Whether SDK auto-loading is enabled
+ * @returns Filtered context prompt (empty string if no non-CLAUDE.md files)
+ */
+export function filterClaudeMdFromContext(
+  contextResult: ContextFilesResult,
+  autoLoadClaudeMd: boolean
+): string {
+  // If autoLoadClaudeMd is disabled, return the original prompt unchanged
+  if (!autoLoadClaudeMd || contextResult.files.length === 0) {
+    return contextResult.formattedPrompt;
+  }
+
+  // Filter out CLAUDE.md (case-insensitive)
+  const nonClaudeFiles = contextResult.files.filter((f) => f.name.toLowerCase() !== 'claude.md');
+
+  // If all files were CLAUDE.md, return empty string
+  if (nonClaudeFiles.length === 0) {
+    return '';
+  }
+
+  // Rebuild prompt without CLAUDE.md using the same format as loadContextFiles
+  const formattedFiles = nonClaudeFiles.map((file) => formatContextFileEntry(file));
+
+  return `# Project Context Files
+
+The following context files provide project-specific rules, conventions, and guidelines.
+Each file serves a specific purpose - use the description to understand when to reference it.
+If you need more details about a context file, you can read the full file at the path provided.
+
+**IMPORTANT**: You MUST follow the rules and conventions specified in these files.
+- Follow ALL commands exactly as shown (e.g., if the project uses \`pnpm\`, NEVER use \`npm\` or \`npx\`)
+- Follow ALL coding conventions, commit message formats, and architectural patterns specified
+- Reference these rules before running ANY shell commands or making commits
+
+---
+
+${formattedFiles.join('\n\n---\n\n')}
+
+---
+
+**REMINDER**: Before taking any action, verify you are following the conventions specified above.
+`;
+}
+
+/**
+ * Format a single context file entry for the prompt
+ * (Matches the format used in @automaker/utils/context-loader.ts)
+ */
+function formatContextFileEntry(file: ContextFileInfo): string {
+  const header = `## ${file.name}`;
+  const pathInfo = `**Path:** \`${file.path}\``;
+  const descriptionInfo = file.description ? `\n**Purpose:** ${file.description}` : '';
+  return `${header}\n${pathInfo}${descriptionInfo}\n\n${file.content}`;
+}
+
+/**
+ * Get enabled MCP servers from global settings, converted to SDK format.
+ * Returns an empty object if settings service is not available or no servers are configured.
+ *
+ * @param settingsService - Optional settings service instance
+ * @param logPrefix - Prefix for log messages (e.g., '[AgentService]')
+ * @returns Promise resolving to MCP servers in SDK format (keyed by name)
+ */
+export async function getMCPServersFromSettings(
+  settingsService?: SettingsService | null,
+  logPrefix = '[SettingsHelper]'
+): Promise<Record<string, McpServerConfig>> {
+  if (!settingsService) {
+    return {};
+  }
+
+  try {
+    const globalSettings = await settingsService.getGlobalSettings();
+    const mcpServers = globalSettings.mcpServers || [];
+
+    // Filter to only enabled servers and convert to SDK format
+    const enabledServers = mcpServers.filter((s) => s.enabled !== false);
+
+    if (enabledServers.length === 0) {
+      return {};
+    }
+
+    // Convert settings format to SDK format (keyed by name)
+    const sdkServers: Record<string, McpServerConfig> = {};
+    for (const server of enabledServers) {
+      sdkServers[server.name] = convertToSdkFormat(server);
+    }
+
+    logger.info(
+      `${logPrefix} Loaded ${enabledServers.length} MCP server(s): ${enabledServers.map((s) => s.name).join(', ')}`
+    );
+
+    return sdkServers;
+  } catch (error) {
+    logger.error(`${logPrefix} Failed to load MCP servers setting:`, error);
+    return {};
+  }
+}
+
+/**
+ * Convert a settings MCPServerConfig to SDK McpServerConfig format.
+ * Validates required fields and throws informative errors if missing.
+ */
+function convertToSdkFormat(server: MCPServerConfig): McpServerConfig {
+  if (server.type === 'sse') {
+    if (!server.url) {
+      throw new Error(`SSE MCP server "${server.name}" is missing a URL.`);
+    }
+    return {
+      type: 'sse',
+      url: server.url,
+      headers: server.headers,
+    };
+  }
+
+  if (server.type === 'http') {
+    if (!server.url) {
+      throw new Error(`HTTP MCP server "${server.name}" is missing a URL.`);
+    }
+    return {
+      type: 'http',
+      url: server.url,
+      headers: server.headers,
+    };
+  }
+
+  // Default to stdio
+  if (!server.command) {
+    throw new Error(`Stdio MCP server "${server.name}" is missing a command.`);
+  }
+  return {
+    type: 'stdio',
+    command: server.command,
+    args: server.args,
+    env: server.env,
+  };
+}
+
+/**
+ * Get prompt customization from global settings and merge with defaults.
+ * Returns prompts merged with built-in defaults - custom prompts override defaults.
+ *
+ * @param settingsService - Optional settings service instance
+ * @param logPrefix - Prefix for log messages
+ * @returns Promise resolving to merged prompts for all categories
+ */
+export async function getPromptCustomization(
+  settingsService?: SettingsService | null,
+  logPrefix = '[PromptHelper]'
+): Promise<{
+  autoMode: ReturnType<typeof mergeAutoModePrompts>;
+  agent: ReturnType<typeof mergeAgentPrompts>;
+  backlogPlan: ReturnType<typeof mergeBacklogPlanPrompts>;
+  enhancement: ReturnType<typeof mergeEnhancementPrompts>;
+  commitMessage: ReturnType<typeof mergeCommitMessagePrompts>;
+  titleGeneration: ReturnType<typeof mergeTitleGenerationPrompts>;
+  issueValidation: ReturnType<typeof mergeIssueValidationPrompts>;
+  ideation: ReturnType<typeof mergeIdeationPrompts>;
+  appSpec: ReturnType<typeof mergeAppSpecPrompts>;
+  contextDescription: ReturnType<typeof mergeContextDescriptionPrompts>;
+  suggestions: ReturnType<typeof mergeSuggestionsPrompts>;
+  taskExecution: ReturnType<typeof mergeTaskExecutionPrompts>;
+}> {
+  let customization: PromptCustomization = {};
+
+  if (settingsService) {
+    try {
+      const globalSettings = await settingsService.getGlobalSettings();
+      customization = globalSettings.promptCustomization || {};
+      logger.info(`${logPrefix} Loaded prompt customization from settings`);
+    } catch (error) {
+      logger.error(`${logPrefix} Failed to load prompt customization:`, error);
+      // Fall through to use empty customization (all defaults)
+    }
+  } else {
+    logger.info(`${logPrefix} SettingsService not available, using default prompts`);
+  }
+
+  return {
+    autoMode: mergeAutoModePrompts(customization.autoMode),
+    agent: mergeAgentPrompts(customization.agent),
+    backlogPlan: mergeBacklogPlanPrompts(customization.backlogPlan),
+    enhancement: mergeEnhancementPrompts(customization.enhancement),
+    commitMessage: mergeCommitMessagePrompts(customization.commitMessage),
+    titleGeneration: mergeTitleGenerationPrompts(customization.titleGeneration),
+    issueValidation: mergeIssueValidationPrompts(customization.issueValidation),
+    ideation: mergeIdeationPrompts(customization.ideation),
+    appSpec: mergeAppSpecPrompts(customization.appSpec),
+    contextDescription: mergeContextDescriptionPrompts(customization.contextDescription),
+    suggestions: mergeSuggestionsPrompts(customization.suggestions),
+    taskExecution: mergeTaskExecutionPrompts(customization.taskExecution),
+  };
+}
+
+/**
+ * Get Skills configuration from settings.
+ * Returns configuration for enabling skills and which sources to load from.
+ *
+ * @param settingsService - Settings service instance
+ * @returns Skills configuration with enabled state, sources, and tool inclusion flag
+ */
+export async function getSkillsConfiguration(settingsService: SettingsService): Promise<{
+  enabled: boolean;
+  sources: Array<'user' | 'project'>;
+  shouldIncludeInTools: boolean;
+}> {
+  const settings = await settingsService.getGlobalSettings();
+  const enabled = settings.enableSkills ?? true; // Default enabled
+  const sources = settings.skillsSources ?? ['user', 'project']; // Default both sources
+
+  return {
+    enabled,
+    sources,
+    shouldIncludeInTools: enabled && sources.length > 0,
+  };
+}
+
+/**
+ * Get Subagents configuration from settings.
+ * Returns configuration for enabling subagents and which sources to load from.
+ *
+ * @param settingsService - Settings service instance
+ * @returns Subagents configuration with enabled state, sources, and tool inclusion flag
+ */
+export async function getSubagentsConfiguration(settingsService: SettingsService): Promise<{
+  enabled: boolean;
+  sources: Array<'user' | 'project'>;
+  shouldIncludeInTools: boolean;
+}> {
+  const settings = await settingsService.getGlobalSettings();
+  const enabled = settings.enableSubagents ?? true; // Default enabled
+  const sources = settings.subagentsSources ?? ['user', 'project']; // Default both sources
+
+  return {
+    enabled,
+    sources,
+    shouldIncludeInTools: enabled && sources.length > 0,
+  };
+}
+
+/**
+ * Get custom subagents from settings, merging global and project-level definitions.
+ * Project-level subagents take precedence over global ones with the same name.
+ *
+ * @param settingsService - Settings service instance
+ * @param projectPath - Path to the project for loading project-specific subagents
+ * @returns Record of agent names to definitions, or undefined if none configured
+ */
+export async function getCustomSubagents(
+  settingsService: SettingsService,
+  projectPath?: string
+): Promise<Record<string, import('@automaker/types').AgentDefinition> | undefined> {
+  // Get global subagents
+  const globalSettings = await settingsService.getGlobalSettings();
+  const globalSubagents = globalSettings.customSubagents || {};
+
+  // If no project path, return only global subagents
+  if (!projectPath) {
+    return Object.keys(globalSubagents).length > 0 ? globalSubagents : undefined;
+  }
+
+  // Get project-specific subagents
+  const projectSettings = await settingsService.getProjectSettings(projectPath);
+  const projectSubagents = projectSettings.customSubagents || {};
+
+  // Merge: project-level takes precedence
+  const merged = {
+    ...globalSubagents,
+    ...projectSubagents,
+  };
+
+  return Object.keys(merged).length > 0 ? merged : undefined;
+}
+
+/** Result from getActiveClaudeApiProfile */
+export interface ActiveClaudeApiProfileResult {
+  /** The active profile, or undefined if using direct Anthropic API */
+  profile: ClaudeApiProfile | undefined;
+  /** Credentials for resolving 'credentials' apiKeySource */
+  credentials: import('@automaker/types').Credentials | undefined;
+}
+
+/**
+ * Get the active Claude API profile and credentials from settings.
+ * Checks project settings first for per-project overrides, then falls back to global settings.
+ * Returns both the profile and credentials for resolving 'credentials' apiKeySource.
+ *
+ * @deprecated Use getProviderById and getPhaseModelWithOverrides instead for the new provider system.
+ * This function is kept for backward compatibility during migration.
+ *
+ * @param settingsService - Optional settings service instance
+ * @param logPrefix - Prefix for log messages (e.g., '[AgentService]')
+ * @param projectPath - Optional project path for per-project override
+ * @returns Promise resolving to object with profile and credentials
+ */
+export async function getActiveClaudeApiProfile(
+  settingsService?: SettingsService | null,
+  logPrefix = '[SettingsHelper]',
+  projectPath?: string
+): Promise<ActiveClaudeApiProfileResult> {
+  if (!settingsService) {
+    return { profile: undefined, credentials: undefined };
+  }
+
+  try {
+    const globalSettings = await settingsService.getGlobalSettings();
+    const credentials = await settingsService.getCredentials();
+    const profiles = globalSettings.claudeApiProfiles || [];
+
+    // Check for project-level override first
+    let activeProfileId: string | null | undefined;
+    let isProjectOverride = false;
+
+    if (projectPath) {
+      const projectSettings = await settingsService.getProjectSettings(projectPath);
+      // undefined = use global, null = explicit no profile, string = specific profile
+      if (projectSettings.activeClaudeApiProfileId !== undefined) {
+        activeProfileId = projectSettings.activeClaudeApiProfileId;
+        isProjectOverride = true;
+      }
+    }
+
+    // Fall back to global if project doesn't specify
+    if (activeProfileId === undefined && !isProjectOverride) {
+      activeProfileId = globalSettings.activeClaudeApiProfileId;
+    }
+
+    // No active profile selected - use direct Anthropic API
+    if (!activeProfileId) {
+      if (isProjectOverride && activeProfileId === null) {
+        logger.info(`${logPrefix} Project explicitly using Direct Anthropic API`);
+      }
+      return { profile: undefined, credentials };
+    }
+
+    // Find the active profile by ID
+    const activeProfile = profiles.find((p) => p.id === activeProfileId);
+
+    if (activeProfile) {
+      const overrideSuffix = isProjectOverride ? ' (project override)' : '';
+      logger.info(`${logPrefix} Using Claude API profile: ${activeProfile.name}${overrideSuffix}`);
+      return { profile: activeProfile, credentials };
+    } else {
+      logger.warn(
+        `${logPrefix} Active profile ID "${activeProfileId}" not found, falling back to direct Anthropic API`
+      );
+      return { profile: undefined, credentials };
+    }
+  } catch (error) {
+    logger.error(`${logPrefix} Failed to load Claude API profile:`, error);
+    return { profile: undefined, credentials: undefined };
+  }
+}
+
+// ============================================================================
+// New Provider System Helpers
+// ============================================================================
+
+/** Result from getProviderById */
+export interface ProviderByIdResult {
+  /** The provider, or undefined if not found */
+  provider: ClaudeCompatibleProvider | undefined;
+  /** Credentials for resolving 'credentials' apiKeySource */
+  credentials: Credentials | undefined;
+}
+
+/**
+ * Get a ClaudeCompatibleProvider by its ID.
+ * Returns the provider configuration and credentials for API key resolution.
+ *
+ * @param providerId - The provider ID to look up
+ * @param settingsService - Settings service instance
+ * @param logPrefix - Prefix for log messages
+ * @returns Promise resolving to object with provider and credentials
+ */
+export async function getProviderById(
+  providerId: string,
+  settingsService: SettingsService,
+  logPrefix = '[SettingsHelper]'
+): Promise<ProviderByIdResult> {
+  try {
+    const globalSettings = await settingsService.getGlobalSettings();
+    const credentials = await settingsService.getCredentials();
+    const providers = globalSettings.claudeCompatibleProviders || [];
+
+    const provider = providers.find((p) => p.id === providerId);
+
+    if (provider) {
+      if (provider.enabled === false) {
+        logger.warn(`${logPrefix} Provider "${provider.name}" (${providerId}) is disabled`);
+      } else {
+        logger.debug(`${logPrefix} Found provider: ${provider.name}`);
+      }
+      return { provider, credentials };
+    } else {
+      logger.warn(`${logPrefix} Provider not found: ${providerId}`);
+      return { provider: undefined, credentials };
+    }
+  } catch (error) {
+    logger.error(`${logPrefix} Failed to load provider by ID:`, error);
+    return { provider: undefined, credentials: undefined };
+  }
+}
+
+/** Result from getPhaseModelWithOverrides */
+export interface PhaseModelWithOverridesResult {
+  /** The resolved phase model entry */
+  phaseModel: PhaseModelEntry;
+  /** Whether a project override was applied */
+  isProjectOverride: boolean;
+  /** The provider if providerId is set and found */
+  provider: ClaudeCompatibleProvider | undefined;
+  /** Credentials for API key resolution */
+  credentials: Credentials | undefined;
+}
+
+/**
+ * Get the phase model configuration for a specific phase, applying project overrides if available.
+ * Also resolves the provider if the phase model has a providerId.
+ *
+ * @param phase - The phase key (e.g., 'enhancementModel', 'specGenerationModel')
+ * @param settingsService - Optional settings service instance (returns defaults if undefined)
+ * @param projectPath - Optional project path for checking overrides
+ * @param logPrefix - Prefix for log messages
+ * @returns Promise resolving to phase model with provider info
+ */
+export async function getPhaseModelWithOverrides(
+  phase: PhaseModelKey,
+  settingsService?: SettingsService | null,
+  projectPath?: string,
+  logPrefix = '[SettingsHelper]'
+): Promise<PhaseModelWithOverridesResult> {
+  // Handle undefined settingsService gracefully
+  if (!settingsService) {
+    logger.info(`${logPrefix} SettingsService not available, using default for ${phase}`);
+    return {
+      phaseModel: DEFAULT_PHASE_MODELS[phase] || { model: 'sonnet' },
+      isProjectOverride: false,
+      provider: undefined,
+      credentials: undefined,
+    };
+  }
+
+  try {
+    const globalSettings = await settingsService.getGlobalSettings();
+    const credentials = await settingsService.getCredentials();
+    const globalPhaseModels = globalSettings.phaseModels || {};
+
+    // Start with global phase model
+    let phaseModel = globalPhaseModels[phase];
+    let isProjectOverride = false;
+
+    // Check for project override
+    if (projectPath) {
+      const projectSettings = await settingsService.getProjectSettings(projectPath);
+      const projectOverrides = projectSettings.phaseModelOverrides || {};
+
+      if (projectOverrides[phase]) {
+        phaseModel = projectOverrides[phase];
+        isProjectOverride = true;
+        logger.debug(`${logPrefix} Using project override for ${phase}`);
+      }
+    }
+
+    // If no phase model found, use per-phase default
+    if (!phaseModel) {
+      phaseModel = DEFAULT_PHASE_MODELS[phase] || { model: 'sonnet' };
+      logger.debug(`${logPrefix} No ${phase} configured, using default: ${phaseModel.model}`);
+    }
+
+    // Resolve provider if providerId is set
+    let provider: ClaudeCompatibleProvider | undefined;
+    if (phaseModel.providerId) {
+      const providers = globalSettings.claudeCompatibleProviders || [];
+      provider = providers.find((p) => p.id === phaseModel.providerId);
+
+      if (provider) {
+        if (provider.enabled === false) {
+          logger.warn(
+            `${logPrefix} Provider "${provider.name}" for ${phase} is disabled, falling back to direct API`
+          );
+          provider = undefined;
+        } else {
+          logger.debug(`${logPrefix} Using provider "${provider.name}" for ${phase}`);
+        }
+      } else {
+        logger.warn(
+          `${logPrefix} Provider ${phaseModel.providerId} not found for ${phase}, falling back to direct API`
+        );
+      }
+    }
+
+    return {
+      phaseModel,
+      isProjectOverride,
+      provider,
+      credentials,
+    };
+  } catch (error) {
+    logger.error(`${logPrefix} Failed to get phase model with overrides:`, error);
+    // Return a safe default
+    return {
+      phaseModel: { model: 'sonnet' },
+      isProjectOverride: false,
+      provider: undefined,
+      credentials: undefined,
+    };
+  }
+}
+
+/** Result from getProviderByModelId */
+export interface ProviderByModelIdResult {
+  /** The provider that contains this model, or undefined if not found */
+  provider: ClaudeCompatibleProvider | undefined;
+  /** The model configuration if found */
+  modelConfig: import('@automaker/types').ProviderModel | undefined;
+  /** Credentials for API key resolution */
+  credentials: Credentials | undefined;
+  /** The resolved Claude model ID to use for API calls (from mapsToClaudeModel) */
+  resolvedModel: string | undefined;
+}
+
+/** Result from resolveProviderContext */
+export interface ProviderContextResult {
+  /** The provider configuration */
+  provider: ClaudeCompatibleProvider | undefined;
+  /** Credentials for API key resolution */
+  credentials: Credentials | undefined;
+  /** The resolved Claude model ID for SDK configuration */
+  resolvedModel: string | undefined;
+  /** The original model config from the provider if found */
+  modelConfig: import('@automaker/types').ProviderModel | undefined;
+}
+
+/**
+ * Checks if a provider is enabled.
+ * Providers with enabled: undefined are treated as enabled (default state).
+ * Only explicitly set enabled: false means the provider is disabled.
+ */
+function isProviderEnabled(provider: ClaudeCompatibleProvider): boolean {
+  return provider.enabled !== false;
+}
+
+/**
+ * Finds a model config in a provider's models array by ID (case-insensitive).
+ */
+function findModelInProvider(
+  provider: ClaudeCompatibleProvider,
+  modelId: string
+): import('@automaker/types').ProviderModel | undefined {
+  return provider.models?.find(
+    (m) => m.id === modelId || m.id.toLowerCase() === modelId.toLowerCase()
+  );
+}
+
+/**
+ * Resolves the provider and Claude-compatible model configuration.
+ *
+ * This is the central logic for resolving provider context, supporting:
+ * 1. Explicit lookup by providerId (most reliable for persistence)
+ * 2. Fallback lookup by modelId across all enabled providers
+ * 3. Resolution of mapsToClaudeModel for SDK configuration
+ *
+ * @param settingsService - Settings service instance
+ * @param modelId - The model ID to resolve
+ * @param providerId - Optional explicit provider ID
+ * @param logPrefix - Prefix for log messages
+ * @returns Promise resolving to the provider context
+ */
+export async function resolveProviderContext(
+  settingsService: SettingsService,
+  modelId: string,
+  providerId?: string,
+  logPrefix = '[SettingsHelper]'
+): Promise<ProviderContextResult> {
+  try {
+    const globalSettings = await settingsService.getGlobalSettings();
+    const credentials = await settingsService.getCredentials();
+    const providers = globalSettings.claudeCompatibleProviders || [];
+
+    logger.debug(
+      `${logPrefix} Resolving provider context: modelId="${modelId}", providerId="${providerId ?? 'none'}", providers count=${providers.length}`
+    );
+
+    let provider: ClaudeCompatibleProvider | undefined;
+    let modelConfig: import('@automaker/types').ProviderModel | undefined;
+
+    // 1. Try resolving by explicit providerId first (most reliable)
+    if (providerId) {
+      provider = providers.find((p) => p.id === providerId);
+      if (provider) {
+        if (!isProviderEnabled(provider)) {
+          logger.warn(
+            `${logPrefix} Explicitly requested provider "${provider.name}" (${providerId}) is disabled (enabled=${provider.enabled})`
+          );
+        } else {
+          logger.debug(
+            `${logPrefix} Found provider "${provider.name}" (${providerId}), enabled=${provider.enabled ?? 'undefined (treated as enabled)'}`
+          );
+          // Find the model config within this provider to check for mappings
+          modelConfig = findModelInProvider(provider, modelId);
+          if (!modelConfig && provider.models && provider.models.length > 0) {
+            logger.debug(
+              `${logPrefix} Model "${modelId}" not found in provider "${provider.name}". Available models: ${provider.models.map((m) => m.id).join(', ')}`
+            );
+          }
+        }
+      } else {
+        logger.warn(
+          `${logPrefix} Explicitly requested provider "${providerId}" not found. Available providers: ${providers.map((p) => p.id).join(', ')}`
+        );
+      }
+    }
+
+    // 2. Fallback to model-based lookup across all providers if modelConfig not found
+    // Note: We still search even if provider was found, to get the modelConfig for mapping
+    if (!modelConfig) {
+      for (const p of providers) {
+        if (!isProviderEnabled(p) || p.id === providerId) continue; // Skip disabled or already checked
+
+        const config = findModelInProvider(p, modelId);
+
+        if (config) {
+          // Only override provider if we didn't find one by explicit ID
+          if (!provider) {
+            provider = p;
+          }
+          modelConfig = config;
+          logger.debug(`${logPrefix} Found model "${modelId}" in provider "${p.name}" (fallback)`);
+          break;
+        }
+      }
+    }
+
+    // 3. Resolve the mapped Claude model if specified
+    let resolvedModel: string | undefined;
+    if (modelConfig?.mapsToClaudeModel) {
+      const { resolveModelString } = await import('@automaker/model-resolver');
+      resolvedModel = resolveModelString(modelConfig.mapsToClaudeModel);
+      logger.debug(
+        `${logPrefix} Model "${modelId}" maps to Claude model "${modelConfig.mapsToClaudeModel}" -> "${resolvedModel}"`
+      );
+    }
+
+    // Log final result for debugging
+    logger.debug(
+      `${logPrefix} Provider context resolved: provider=${provider?.name ?? 'none'}, modelConfig=${modelConfig ? 'found' : 'not found'}, resolvedModel=${resolvedModel ?? modelId}`
+    );
+
+    return { provider, credentials, resolvedModel, modelConfig };
+  } catch (error) {
+    logger.error(`${logPrefix} Failed to resolve provider context:`, error);
+    return {
+      provider: undefined,
+      credentials: undefined,
+      resolvedModel: undefined,
+      modelConfig: undefined,
+    };
+  }
+}
+
+/**
+ * Find a ClaudeCompatibleProvider by one of its model IDs.
+ * Searches through all enabled providers to find one that contains the specified model.
+ * This is useful when you have a model string from the UI but need the provider config.
+ *
+ * Also resolves the `mapsToClaudeModel` field to get the actual Claude model ID to use
+ * when calling the API (e.g., "GLM-4.5-Air" -> "claude-haiku-4-5").
+ *
+ * @param modelId - The model ID to search for (e.g., "GLM-4.7", "MiniMax-M2.1")
+ * @param settingsService - Settings service instance
+ * @param logPrefix - Prefix for log messages
+ * @returns Promise resolving to object with provider, model config, credentials, and resolved model
+ */
+export async function getProviderByModelId(
+  modelId: string,
+  settingsService: SettingsService,
+  logPrefix = '[SettingsHelper]'
+): Promise<ProviderByModelIdResult> {
+  try {
+    const globalSettings = await settingsService.getGlobalSettings();
+    const credentials = await settingsService.getCredentials();
+    const providers = globalSettings.claudeCompatibleProviders || [];
+
+    // Search through all enabled providers for this model
+    for (const provider of providers) {
+      // Skip disabled providers
+      if (provider.enabled === false) {
+        continue;
+      }
+
+      // Check if this provider has the model
+      const modelConfig = provider.models?.find(
+        (m) => m.id === modelId || m.id.toLowerCase() === modelId.toLowerCase()
+      );
+
+      if (modelConfig) {
+        logger.info(`${logPrefix} Found model "${modelId}" in provider "${provider.name}"`);
+
+        // Resolve the mapped Claude model if specified
+        let resolvedModel: string | undefined;
+        if (modelConfig.mapsToClaudeModel) {
+          // Import resolveModelString to convert alias to full model ID
+          const { resolveModelString } = await import('@automaker/model-resolver');
+          resolvedModel = resolveModelString(modelConfig.mapsToClaudeModel);
+          logger.info(
+            `${logPrefix} Model "${modelId}" maps to Claude model "${modelConfig.mapsToClaudeModel}" -> "${resolvedModel}"`
+          );
+        }
+
+        return { provider, modelConfig, credentials, resolvedModel };
+      }
+    }
+
+    // Model not found in any provider
+    logger.debug(`${logPrefix} Model "${modelId}" not found in any provider`);
+    return {
+      provider: undefined,
+      modelConfig: undefined,
+      credentials: undefined,
+      resolvedModel: undefined,
+    };
+  } catch (error) {
+    logger.error(`${logPrefix} Failed to find provider by model ID:`, error);
+    return {
+      provider: undefined,
+      modelConfig: undefined,
+      credentials: undefined,
+      resolvedModel: undefined,
+    };
+  }
+}
+
+/**
+ * Get all enabled provider models for use in model dropdowns.
+ * Returns models from all enabled ClaudeCompatibleProviders.
+ *
+ * @param settingsService - Settings service instance
+ * @param logPrefix - Prefix for log messages
+ * @returns Promise resolving to array of provider models with their provider info
+ */
+export async function getAllProviderModels(
+  settingsService: SettingsService,
+  logPrefix = '[SettingsHelper]'
+): Promise<
+  Array<{
+    providerId: string;
+    providerName: string;
+    model: import('@automaker/types').ProviderModel;
+  }>
+> {
+  try {
+    const globalSettings = await settingsService.getGlobalSettings();
+    const providers = globalSettings.claudeCompatibleProviders || [];
+
+    const allModels: Array<{
+      providerId: string;
+      providerName: string;
+      model: import('@automaker/types').ProviderModel;
+    }> = [];
+
+    for (const provider of providers) {
+      // Skip disabled providers
+      if (provider.enabled === false) {
+        continue;
+      }
+
+      for (const model of provider.models || []) {
+        allModels.push({
+          providerId: provider.id,
+          providerName: provider.name,
+          model,
+        });
+      }
+    }
+
+    logger.debug(
+      `${logPrefix} Found ${allModels.length} models from ${providers.length} providers`
+    );
+    return allModels;
+  } catch (error) {
+    logger.error(`${logPrefix} Failed to get all provider models:`, error);
+    return [];
+  }
+}
diff --git a/temp_repo/apps/server/src/lib/terminal-themes-data.ts b/temp_repo/apps/server/src/lib/terminal-themes-data.ts
new file mode 100644
index 0000000000000000000000000000000000000000..854bf1a80e91b730ab90c13866dddf486f656a96
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/terminal-themes-data.ts
@@ -0,0 +1,25 @@
+/**
+ * Terminal Theme Data - Re-export terminal themes from platform package
+ *
+ * This module re-exports terminal theme data for use in the server.
+ */
+
+import { terminalThemeColors, getTerminalThemeColors as getThemeColors } from '@automaker/platform';
+import type { ThemeMode } from '@automaker/types';
+import type { TerminalTheme } from '@automaker/platform';
+
+/**
+ * Get terminal theme colors for a given theme mode
+ */
+export function getTerminalThemeColors(theme: ThemeMode): TerminalTheme {
+  return getThemeColors(theme);
+}
+
+/**
+ * Get all terminal themes
+ */
+export function getAllTerminalThemes(): Record<ThemeMode, TerminalTheme> {
+  return terminalThemeColors;
+}
+
+export default terminalThemeColors;
diff --git a/temp_repo/apps/server/src/lib/validation-storage.ts b/temp_repo/apps/server/src/lib/validation-storage.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1ca66653402a323e45834a8c35d95c3dc1aa008c
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/validation-storage.ts
@@ -0,0 +1,181 @@
+/**
+ * Validation Storage - CRUD operations for GitHub issue validation results
+ *
+ * Stores validation results in .automaker/validations/{issueNumber}/validation.json
+ * Results include the validation verdict, metadata, and timestamp for cache invalidation.
+ */
+
+import * as secureFs from './secure-fs.js';
+import { getValidationsDir, getValidationDir, getValidationPath } from '@automaker/platform';
+import type { StoredValidation } from '@automaker/types';
+
+// Re-export StoredValidation for convenience
+export type { StoredValidation };
+
+/** Number of hours before a validation is considered stale */
+const VALIDATION_CACHE_TTL_HOURS = 24;
+
+/**
+ * Write validation result to storage
+ *
+ * Creates the validation directory if needed and stores the result as JSON.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @param issueNumber - GitHub issue number
+ * @param data - Validation data to store
+ */
+export async function writeValidation(
+  projectPath: string,
+  issueNumber: number,
+  data: StoredValidation
+): Promise<void> {
+  const validationDir = getValidationDir(projectPath, issueNumber);
+  const validationPath = getValidationPath(projectPath, issueNumber);
+
+  // Ensure directory exists
+  await secureFs.mkdir(validationDir, { recursive: true });
+
+  // Write validation result
+  await secureFs.writeFile(validationPath, JSON.stringify(data, null, 2), 'utf-8');
+}
+
+/**
+ * Read validation result from storage
+ *
+ * @param projectPath - Absolute path to project directory
+ * @param issueNumber - GitHub issue number
+ * @returns Stored validation or null if not found
+ */
+export async function readValidation(
+  projectPath: string,
+  issueNumber: number
+): Promise<StoredValidation | null> {
+  try {
+    const validationPath = getValidationPath(projectPath, issueNumber);
+    const content = (await secureFs.readFile(validationPath, 'utf-8')) as string;
+    return JSON.parse(content) as StoredValidation;
+  } catch {
+    // File doesn't exist or can't be read
+    return null;
+  }
+}
+
+/**
+ * Get all stored validations for a project
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Array of stored validations
+ */
+export async function getAllValidations(projectPath: string): Promise<StoredValidation[]> {
+  const validationsDir = getValidationsDir(projectPath);
+
+  try {
+    const dirs = await secureFs.readdir(validationsDir, { withFileTypes: true });
+
+    // Read all validation files in parallel for better performance
+    const promises = dirs
+      .filter((dir) => dir.isDirectory())
+      .map((dir) => {
+        const issueNumber = parseInt(dir.name, 10);
+        if (!isNaN(issueNumber)) {
+          return readValidation(projectPath, issueNumber);
+        }
+        return Promise.resolve(null);
+      });
+
+    const results = await Promise.all(promises);
+    const validations = results.filter((v): v is StoredValidation => v !== null);
+
+    // Sort by issue number
+    validations.sort((a, b) => a.issueNumber - b.issueNumber);
+
+    return validations;
+  } catch {
+    // Directory doesn't exist
+    return [];
+  }
+}
+
+/**
+ * Delete a validation from storage
+ *
+ * @param projectPath - Absolute path to project directory
+ * @param issueNumber - GitHub issue number
+ * @returns true if validation was deleted, false if not found
+ */
+export async function deleteValidation(projectPath: string, issueNumber: number): Promise<boolean> {
+  try {
+    const validationDir = getValidationDir(projectPath, issueNumber);
+    await secureFs.rm(validationDir, { recursive: true, force: true });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if a validation is stale (older than TTL)
+ *
+ * @param validation - Stored validation to check
+ * @returns true if validation is older than 24 hours
+ */
+export function isValidationStale(validation: StoredValidation): boolean {
+  const validatedAt = new Date(validation.validatedAt);
+  const now = new Date();
+  const hoursDiff = (now.getTime() - validatedAt.getTime()) / (1000 * 60 * 60);
+  return hoursDiff > VALIDATION_CACHE_TTL_HOURS;
+}
+
+/**
+ * Get validation with freshness info
+ *
+ * @param projectPath - Absolute path to project directory
+ * @param issueNumber - GitHub issue number
+ * @returns Object with validation and isStale flag, or null if not found
+ */
+export async function getValidationWithFreshness(
+  projectPath: string,
+  issueNumber: number
+): Promise<{ validation: StoredValidation; isStale: boolean } | null> {
+  const validation = await readValidation(projectPath, issueNumber);
+  if (!validation) {
+    return null;
+  }
+
+  return {
+    validation,
+    isStale: isValidationStale(validation),
+  };
+}
+
+/**
+ * Mark a validation as viewed by the user
+ *
+ * @param projectPath - Absolute path to project directory
+ * @param issueNumber - GitHub issue number
+ * @returns true if validation was marked as viewed, false if not found
+ */
+export async function markValidationViewed(
+  projectPath: string,
+  issueNumber: number
+): Promise<boolean> {
+  const validation = await readValidation(projectPath, issueNumber);
+  if (!validation) {
+    return false;
+  }
+
+  validation.viewedAt = new Date().toISOString();
+  await writeValidation(projectPath, issueNumber, validation);
+  return true;
+}
+
+/**
+ * Get count of unviewed, non-stale validations for a project
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Number of unviewed validations
+ */
+export async function getUnviewedValidationsCount(projectPath: string): Promise<number> {
+  const validations = await getAllValidations(projectPath);
+  return validations.filter((v) => !v.viewedAt && !isValidationStale(v)).length;
+}
diff --git a/temp_repo/apps/server/src/lib/version.ts b/temp_repo/apps/server/src/lib/version.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9fd8eeec75f280f01afcd651b8d62597ee1c7464
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/version.ts
@@ -0,0 +1,49 @@
+/**
+ * Version utility - Reads version from package.json
+ */
+
+import { readFileSync, existsSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('Version');
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+let cachedVersion: string | null = null;
+
+/**
+ * Get the version from package.json
+ * Caches the result for performance
+ */
+export function getVersion(): string {
+  if (cachedVersion) {
+    return cachedVersion;
+  }
+
+  try {
+    const candidatePaths = [
+      // Development via tsx: src/lib -> project root
+      join(__dirname, '..', '..', 'package.json'),
+      // Packaged/build output: lib -> server bundle root
+      join(__dirname, '..', 'package.json'),
+    ];
+
+    const packageJsonPath = candidatePaths.find((candidate) => existsSync(candidate));
+    if (!packageJsonPath) {
+      throw new Error(
+        `package.json not found in any expected location: ${candidatePaths.join(', ')}`
+      );
+    }
+
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+    const version = packageJson.version || '0.0.0';
+    cachedVersion = version;
+    return version;
+  } catch (error) {
+    logger.warn('Failed to read version from package.json:', error);
+    return '0.0.0';
+  }
+}
diff --git a/temp_repo/apps/server/src/lib/worktree-metadata.ts b/temp_repo/apps/server/src/lib/worktree-metadata.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aa6e24870777d6f2f6c3446bd2a36c46d5ee9ad0
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/worktree-metadata.ts
@@ -0,0 +1,182 @@
+/**
+ * Worktree metadata storage utilities
+ * Stores worktree-specific data in .automaker/worktrees/:branch/worktree.json
+ */
+
+import * as secureFs from './secure-fs.js';
+import * as path from 'path';
+import type { PRState, WorktreePRInfo } from '@automaker/types';
+
+// Re-export types for backwards compatibility
+export type { PRState, WorktreePRInfo };
+
+/** Maximum length for sanitized branch names in filesystem paths */
+const MAX_SANITIZED_BRANCH_PATH_LENGTH = 200;
+
+export interface WorktreeMetadata {
+  branch: string;
+  createdAt: string;
+  pr?: WorktreePRInfo;
+  /** Whether the init script has been executed for this worktree */
+  initScriptRan?: boolean;
+  /** Status of the init script execution */
+  initScriptStatus?: 'running' | 'success' | 'failed';
+  /** Error message if init script failed */
+  initScriptError?: string;
+}
+
+/**
+ * Sanitize branch name for cross-platform filesystem safety
+ */
+function sanitizeBranchName(branch: string): string {
+  // Replace characters that are invalid or problematic on various filesystems:
+  // - Forward and backslashes (path separators)
+  // - Windows invalid chars: : * ? " < > |
+  // - Other potentially problematic chars
+  let safeBranch = branch
+    .replace(/[/\\:*?"<>|]/g, '-') // Replace invalid chars with dash
+    .replace(/\s+/g, '_') // Replace spaces with underscores
+    .replace(/\.+$/g, '') // Remove trailing dots (Windows issue)
+    .replace(/-+/g, '-') // Collapse multiple dashes
+    .replace(/^-|-$/g, ''); // Remove leading/trailing dashes
+
+  // Truncate to safe length (leave room for path components)
+  safeBranch = safeBranch.substring(0, MAX_SANITIZED_BRANCH_PATH_LENGTH);
+
+  // Handle Windows reserved names (CON, PRN, AUX, NUL, COM1-9, LPT1-9)
+  const windowsReserved = /^(CON|PRN|AUX|NUL|COM[1-9]|LPT[1-9])$/i;
+  if (windowsReserved.test(safeBranch) || safeBranch.length === 0) {
+    safeBranch = `_${safeBranch || 'branch'}`;
+  }
+
+  return safeBranch;
+}
+
+/**
+ * Get the path to the worktree metadata directory
+ */
+function getWorktreeMetadataDir(projectPath: string, branch: string): string {
+  const safeBranch = sanitizeBranchName(branch);
+  return path.join(projectPath, '.automaker', 'worktrees', safeBranch);
+}
+
+/**
+ * Get the path to the worktree metadata file
+ */
+function getWorktreeMetadataPath(projectPath: string, branch: string): string {
+  return path.join(getWorktreeMetadataDir(projectPath, branch), 'worktree.json');
+}
+
+/**
+ * Read worktree metadata for a branch
+ */
+export async function readWorktreeMetadata(
+  projectPath: string,
+  branch: string
+): Promise<WorktreeMetadata | null> {
+  try {
+    const metadataPath = getWorktreeMetadataPath(projectPath, branch);
+    const content = (await secureFs.readFile(metadataPath, 'utf-8')) as string;
+    return JSON.parse(content) as WorktreeMetadata;
+  } catch (_error) {
+    // File doesn't exist or can't be read
+    return null;
+  }
+}
+
+/**
+ * Write worktree metadata for a branch
+ */
+export async function writeWorktreeMetadata(
+  projectPath: string,
+  branch: string,
+  metadata: WorktreeMetadata
+): Promise<void> {
+  const metadataDir = getWorktreeMetadataDir(projectPath, branch);
+  const metadataPath = getWorktreeMetadataPath(projectPath, branch);
+
+  // Ensure directory exists
+  await secureFs.mkdir(metadataDir, { recursive: true });
+
+  // Write metadata
+  await secureFs.writeFile(metadataPath, JSON.stringify(metadata, null, 2), 'utf-8');
+}
+
+/**
+ * Update PR info in worktree metadata
+ */
+export async function updateWorktreePRInfo(
+  projectPath: string,
+  branch: string,
+  prInfo: WorktreePRInfo
+): Promise<void> {
+  // Read existing metadata or create new
+  let metadata = await readWorktreeMetadata(projectPath, branch);
+
+  if (!metadata) {
+    metadata = {
+      branch,
+      createdAt: new Date().toISOString(),
+    };
+  }
+
+  // Update PR info
+  metadata.pr = prInfo;
+
+  // Write back
+  await writeWorktreeMetadata(projectPath, branch, metadata);
+}
+
+/**
+ * Get PR info for a branch from metadata
+ */
+export async function getWorktreePRInfo(
+  projectPath: string,
+  branch: string
+): Promise<WorktreePRInfo | null> {
+  const metadata = await readWorktreeMetadata(projectPath, branch);
+  return metadata?.pr || null;
+}
+
+/**
+ * Read all worktree metadata for a project
+ */
+export async function readAllWorktreeMetadata(
+  projectPath: string
+): Promise<Map<string, WorktreeMetadata>> {
+  const result = new Map<string, WorktreeMetadata>();
+  const worktreesDir = path.join(projectPath, '.automaker', 'worktrees');
+
+  try {
+    const dirs = await secureFs.readdir(worktreesDir, { withFileTypes: true });
+
+    for (const dir of dirs) {
+      if (dir.isDirectory()) {
+        const metadataPath = path.join(worktreesDir, dir.name, 'worktree.json');
+        try {
+          const content = (await secureFs.readFile(metadataPath, 'utf-8')) as string;
+          const metadata = JSON.parse(content) as WorktreeMetadata;
+          result.set(metadata.branch, metadata);
+        } catch {
+          // Skip if file doesn't exist or can't be read
+        }
+      }
+    }
+  } catch {
+    // Directory doesn't exist
+  }
+
+  return result;
+}
+
+/**
+ * Delete worktree metadata for a branch
+ */
+export async function deleteWorktreeMetadata(projectPath: string, branch: string): Promise<void> {
+  const metadataDir = getWorktreeMetadataDir(projectPath, branch);
+  try {
+    await secureFs.rm(metadataDir, { recursive: true, force: true });
+  } catch {
+    // Ignore errors if directory doesn't exist
+  }
+}
diff --git a/temp_repo/apps/server/src/lib/xml-extractor.ts b/temp_repo/apps/server/src/lib/xml-extractor.ts
new file mode 100644
index 0000000000000000000000000000000000000000..72963b825dc7d4a3322c677ed9c507d77b394f3c
--- /dev/null
+++ b/temp_repo/apps/server/src/lib/xml-extractor.ts
@@ -0,0 +1,611 @@
+/**
+ * XML Extraction Utilities
+ *
+ * Robust XML parsing utilities for extracting and updating sections
+ * from app_spec.txt XML content. Uses regex-based parsing which is
+ * sufficient for our controlled XML structure.
+ *
+ * Note: If more complex XML parsing is needed in the future, consider
+ * using a library like 'fast-xml-parser' or 'xml2js'.
+ */
+
+import { createLogger } from '@automaker/utils';
+import type { SpecOutput } from '@automaker/types';
+
+const logger = createLogger('XmlExtractor');
+
+/**
+ * Represents an implemented feature extracted from XML
+ */
+export interface ImplementedFeature {
+  name: string;
+  description: string;
+  file_locations?: string[];
+}
+
+/**
+ * Logger interface for optional custom logging
+ */
+export interface XmlExtractorLogger {
+  debug: (message: string, ...args: unknown[]) => void;
+  warn?: (message: string, ...args: unknown[]) => void;
+}
+
+/**
+ * Options for XML extraction operations
+ */
+export interface ExtractXmlOptions {
+  /** Custom logger (defaults to internal logger) */
+  logger?: XmlExtractorLogger;
+}
+
+/**
+ * Escape special XML characters
+ * Handles undefined/null values by converting them to empty strings
+ */
+export function escapeXml(str: string | undefined | null): string {
+  if (str == null) {
+    return '';
+  }
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+}
+
+/**
+ * Unescape XML entities back to regular characters
+ */
+export function unescapeXml(str: string): string {
+  return str
+    .replace(/&apos;/g, "'")
+    .replace(/&quot;/g, '"')
+    .replace(/&gt;/g, '>')
+    .replace(/&lt;/g, '<')
+    .replace(/&amp;/g, '&');
+}
+
+/**
+ * Extract the content of a specific XML section
+ *
+ * @param xmlContent - The full XML content
+ * @param tagName - The tag name to extract (e.g., 'implemented_features')
+ * @param options - Optional extraction options
+ * @returns The content between the tags, or null if not found
+ */
+export function extractXmlSection(
+  xmlContent: string,
+  tagName: string,
+  options: ExtractXmlOptions = {}
+): string | null {
+  const log = options.logger || logger;
+
+  const regex = new RegExp(`<${tagName}>([\\s\\S]*?)<\\/${tagName}>`, 'i');
+  const match = xmlContent.match(regex);
+
+  if (match) {
+    log.debug(`Extracted <${tagName}> section`);
+    return match[1];
+  }
+
+  log.debug(`Section <${tagName}> not found`);
+  return null;
+}
+
+/**
+ * Extract all values from repeated XML elements
+ *
+ * @param xmlContent - The XML content to search
+ * @param tagName - The tag name to extract values from
+ * @param options - Optional extraction options
+ * @returns Array of extracted values (unescaped)
+ */
+export function extractXmlElements(
+  xmlContent: string,
+  tagName: string,
+  options: ExtractXmlOptions = {}
+): string[] {
+  const log = options.logger || logger;
+  const values: string[] = [];
+
+  const regex = new RegExp(`<${tagName}>([\\s\\S]*?)<\\/${tagName}>`, 'g');
+  const matches = xmlContent.matchAll(regex);
+
+  for (const match of matches) {
+    values.push(unescapeXml(match[1].trim()));
+  }
+
+  log.debug(`Extracted ${values.length} <${tagName}> elements`);
+  return values;
+}
+
+/**
+ * Extract implemented features from app_spec.txt XML content
+ *
+ * @param specContent - The full XML content of app_spec.txt
+ * @param options - Optional extraction options
+ * @returns Array of implemented features with name, description, and optional file_locations
+ */
+export function extractImplementedFeatures(
+  specContent: string,
+  options: ExtractXmlOptions = {}
+): ImplementedFeature[] {
+  const log = options.logger || logger;
+  const features: ImplementedFeature[] = [];
+
+  // Match <implemented_features>...</implemented_features> section
+  const implementedSection = extractXmlSection(specContent, 'implemented_features', options);
+
+  if (!implementedSection) {
+    log.debug('No implemented_features section found');
+    return features;
+  }
+
+  // Extract individual feature blocks
+  const featureRegex = /<feature>([\s\S]*?)<\/feature>/g;
+  const featureMatches = implementedSection.matchAll(featureRegex);
+
+  for (const featureMatch of featureMatches) {
+    const featureContent = featureMatch[1];
+
+    // Extract name
+    const nameMatch = featureContent.match(/<name>([\s\S]*?)<\/name>/);
+    const name = nameMatch ? unescapeXml(nameMatch[1].trim()) : '';
+
+    // Extract description
+    const descMatch = featureContent.match(/<description>([\s\S]*?)<\/description>/);
+    const description = descMatch ? unescapeXml(descMatch[1].trim()) : '';
+
+    // Extract file_locations if present
+    const locationsSection = extractXmlSection(featureContent, 'file_locations', options);
+    const file_locations = locationsSection
+      ? extractXmlElements(locationsSection, 'location', options)
+      : undefined;
+
+    if (name) {
+      features.push({
+        name,
+        description,
+        ...(file_locations && file_locations.length > 0 ? { file_locations } : {}),
+      });
+    }
+  }
+
+  log.debug(`Extracted ${features.length} implemented features`);
+  return features;
+}
+
+/**
+ * Extract only the feature names from implemented_features section
+ *
+ * @param specContent - The full XML content of app_spec.txt
+ * @param options - Optional extraction options
+ * @returns Array of feature names
+ */
+export function extractImplementedFeatureNames(
+  specContent: string,
+  options: ExtractXmlOptions = {}
+): string[] {
+  const features = extractImplementedFeatures(specContent, options);
+  return features.map((f) => f.name);
+}
+
+/**
+ * Generate XML for a single implemented feature
+ *
+ * @param feature - The feature to convert to XML
+ * @param indent - The base indentation level (default: 2 spaces)
+ * @returns XML string for the feature
+ */
+export function featureToXml(feature: ImplementedFeature, indent: string = '  '): string {
+  const i2 = indent.repeat(2);
+  const i3 = indent.repeat(3);
+  const i4 = indent.repeat(4);
+
+  let xml = `${i2}<feature>
+${i3}<name>${escapeXml(feature.name)}</name>
+${i3}<description>${escapeXml(feature.description)}</description>`;
+
+  if (feature.file_locations && feature.file_locations.length > 0) {
+    xml += `
+${i3}<file_locations>
+${feature.file_locations.map((loc) => `${i4}<location>${escapeXml(loc)}</location>`).join('\n')}
+${i3}</file_locations>`;
+  }
+
+  xml += `
+${i2}</feature>`;
+
+  return xml;
+}
+
+/**
+ * Generate XML for an array of implemented features
+ *
+ * @param features - Array of features to convert to XML
+ * @param indent - The base indentation level (default: 2 spaces)
+ * @returns XML string for the implemented_features section content
+ */
+export function featuresToXml(features: ImplementedFeature[], indent: string = '  '): string {
+  return features.map((f) => featureToXml(f, indent)).join('\n');
+}
+
+/**
+ * Update the implemented_features section in XML content
+ *
+ * @param specContent - The full XML content
+ * @param newFeatures - The new features to set
+ * @param options - Optional extraction options
+ * @returns Updated XML content with the new implemented_features section
+ */
+export function updateImplementedFeaturesSection(
+  specContent: string,
+  newFeatures: ImplementedFeature[],
+  options: ExtractXmlOptions = {}
+): string {
+  const log = options.logger || logger;
+  const indent = '  ';
+
+  // Generate new section content
+  const newSectionContent = featuresToXml(newFeatures, indent);
+
+  // Build the new section
+  const newSection = `<implemented_features>
+${newSectionContent}
+${indent}</implemented_features>`;
+
+  // Check if section exists
+  const sectionRegex = /<implemented_features>[\s\S]*?<\/implemented_features>/;
+
+  if (sectionRegex.test(specContent)) {
+    log.debug('Replacing existing implemented_features section');
+    return specContent.replace(sectionRegex, newSection);
+  }
+
+  // If section doesn't exist, try to insert after core_capabilities
+  const coreCapabilitiesEnd = '</core_capabilities>';
+  const insertIndex = specContent.indexOf(coreCapabilitiesEnd);
+
+  if (insertIndex !== -1) {
+    const insertPosition = insertIndex + coreCapabilitiesEnd.length;
+    log.debug('Inserting implemented_features after core_capabilities');
+    return (
+      specContent.slice(0, insertPosition) +
+      '\n\n' +
+      indent +
+      newSection +
+      specContent.slice(insertPosition)
+    );
+  }
+
+  // As a fallback, insert before </project_specification>
+  const projectSpecEnd = '</project_specification>';
+  const fallbackIndex = specContent.indexOf(projectSpecEnd);
+
+  if (fallbackIndex !== -1) {
+    log.debug('Inserting implemented_features before </project_specification>');
+    return (
+      specContent.slice(0, fallbackIndex) +
+      indent +
+      newSection +
+      '\n' +
+      specContent.slice(fallbackIndex)
+    );
+  }
+
+  log.warn?.('Could not find appropriate insertion point for implemented_features');
+  log.debug('Could not find appropriate insertion point for implemented_features');
+  return specContent;
+}
+
+/**
+ * Add a new feature to the implemented_features section
+ *
+ * @param specContent - The full XML content
+ * @param newFeature - The feature to add
+ * @param options - Optional extraction options
+ * @returns Updated XML content with the new feature added
+ */
+export function addImplementedFeature(
+  specContent: string,
+  newFeature: ImplementedFeature,
+  options: ExtractXmlOptions = {}
+): string {
+  const log = options.logger || logger;
+
+  // Extract existing features
+  const existingFeatures = extractImplementedFeatures(specContent, options);
+
+  // Check for duplicates by name
+  const isDuplicate = existingFeatures.some(
+    (f) => f.name.toLowerCase() === newFeature.name.toLowerCase()
+  );
+
+  if (isDuplicate) {
+    log.debug(`Feature "${newFeature.name}" already exists, skipping`);
+    return specContent;
+  }
+
+  // Add the new feature
+  const updatedFeatures = [...existingFeatures, newFeature];
+
+  log.debug(`Adding feature "${newFeature.name}"`);
+  return updateImplementedFeaturesSection(specContent, updatedFeatures, options);
+}
+
+/**
+ * Remove a feature from the implemented_features section by name
+ *
+ * @param specContent - The full XML content
+ * @param featureName - The name of the feature to remove
+ * @param options - Optional extraction options
+ * @returns Updated XML content with the feature removed
+ */
+export function removeImplementedFeature(
+  specContent: string,
+  featureName: string,
+  options: ExtractXmlOptions = {}
+): string {
+  const log = options.logger || logger;
+
+  // Extract existing features
+  const existingFeatures = extractImplementedFeatures(specContent, options);
+
+  // Filter out the feature to remove
+  const updatedFeatures = existingFeatures.filter(
+    (f) => f.name.toLowerCase() !== featureName.toLowerCase()
+  );
+
+  if (updatedFeatures.length === existingFeatures.length) {
+    log.debug(`Feature "${featureName}" not found, no changes made`);
+    return specContent;
+  }
+
+  log.debug(`Removing feature "${featureName}"`);
+  return updateImplementedFeaturesSection(specContent, updatedFeatures, options);
+}
+
+/**
+ * Update an existing feature in the implemented_features section
+ *
+ * @param specContent - The full XML content
+ * @param featureName - The name of the feature to update
+ * @param updates - Partial updates to apply to the feature
+ * @param options - Optional extraction options
+ * @returns Updated XML content with the feature modified
+ */
+export function updateImplementedFeature(
+  specContent: string,
+  featureName: string,
+  updates: Partial<ImplementedFeature>,
+  options: ExtractXmlOptions = {}
+): string {
+  const log = options.logger || logger;
+
+  // Extract existing features
+  const existingFeatures = extractImplementedFeatures(specContent, options);
+
+  // Find and update the feature
+  let found = false;
+  const updatedFeatures = existingFeatures.map((f) => {
+    if (f.name.toLowerCase() === featureName.toLowerCase()) {
+      found = true;
+      return {
+        ...f,
+        ...updates,
+        // Preserve the original name if not explicitly updated
+        name: updates.name ?? f.name,
+      };
+    }
+    return f;
+  });
+
+  if (!found) {
+    log.debug(`Feature "${featureName}" not found, no changes made`);
+    return specContent;
+  }
+
+  log.debug(`Updating feature "${featureName}"`);
+  return updateImplementedFeaturesSection(specContent, updatedFeatures, options);
+}
+
+/**
+ * Check if a feature exists in the implemented_features section
+ *
+ * @param specContent - The full XML content
+ * @param featureName - The name of the feature to check
+ * @param options - Optional extraction options
+ * @returns True if the feature exists
+ */
+export function hasImplementedFeature(
+  specContent: string,
+  featureName: string,
+  options: ExtractXmlOptions = {}
+): boolean {
+  const features = extractImplementedFeatures(specContent, options);
+  return features.some((f) => f.name.toLowerCase() === featureName.toLowerCase());
+}
+
+/**
+ * Convert extracted features to SpecOutput.implemented_features format
+ *
+ * @param features - Array of extracted features
+ * @returns Features in SpecOutput format
+ */
+export function toSpecOutputFeatures(
+  features: ImplementedFeature[]
+): SpecOutput['implemented_features'] {
+  return features.map((f) => ({
+    name: f.name,
+    description: f.description,
+    ...(f.file_locations && f.file_locations.length > 0
+      ? { file_locations: f.file_locations }
+      : {}),
+  }));
+}
+
+/**
+ * Convert SpecOutput.implemented_features to ImplementedFeature format
+ *
+ * @param specFeatures - Features from SpecOutput
+ * @returns Features in ImplementedFeature format
+ */
+export function fromSpecOutputFeatures(
+  specFeatures: SpecOutput['implemented_features']
+): ImplementedFeature[] {
+  return specFeatures.map((f) => ({
+    name: f.name,
+    description: f.description,
+    ...(f.file_locations && f.file_locations.length > 0
+      ? { file_locations: f.file_locations }
+      : {}),
+  }));
+}
+
+/**
+ * Represents a roadmap phase extracted from XML
+ */
+export interface RoadmapPhase {
+  name: string;
+  status: string;
+  description?: string;
+}
+
+/**
+ * Extract the technology stack from app_spec.txt XML content
+ *
+ * @param specContent - The full XML content
+ * @param options - Optional extraction options
+ * @returns Array of technology names
+ */
+export function extractTechnologyStack(
+  specContent: string,
+  options: ExtractXmlOptions = {}
+): string[] {
+  const log = options.logger || logger;
+
+  const techSection = extractXmlSection(specContent, 'technology_stack', options);
+  if (!techSection) {
+    log.debug('No technology_stack section found');
+    return [];
+  }
+
+  const technologies = extractXmlElements(techSection, 'technology', options);
+  log.debug(`Extracted ${technologies.length} technologies`);
+  return technologies;
+}
+
+/**
+ * Update the technology_stack section in XML content
+ *
+ * @param specContent - The full XML content
+ * @param technologies - The new technology list
+ * @param options - Optional extraction options
+ * @returns Updated XML content
+ */
+export function updateTechnologyStack(
+  specContent: string,
+  technologies: string[],
+  options: ExtractXmlOptions = {}
+): string {
+  const log = options.logger || logger;
+  const indent = '  ';
+  const i2 = indent.repeat(2);
+
+  // Generate new section content
+  const techXml = technologies
+    .map((t) => `${i2}<technology>${escapeXml(t)}</technology>`)
+    .join('\n');
+  const newSection = `<technology_stack>\n${techXml}\n${indent}</technology_stack>`;
+
+  // Check if section exists
+  const sectionRegex = /<technology_stack>[\s\S]*?<\/technology_stack>/;
+
+  if (sectionRegex.test(specContent)) {
+    log.debug('Replacing existing technology_stack section');
+    return specContent.replace(sectionRegex, newSection);
+  }
+
+  log.debug('No technology_stack section found to update');
+  return specContent;
+}
+
+/**
+ * Extract roadmap phases from app_spec.txt XML content
+ *
+ * @param specContent - The full XML content
+ * @param options - Optional extraction options
+ * @returns Array of roadmap phases
+ */
+export function extractRoadmapPhases(
+  specContent: string,
+  options: ExtractXmlOptions = {}
+): RoadmapPhase[] {
+  const log = options.logger || logger;
+  const phases: RoadmapPhase[] = [];
+
+  const roadmapSection = extractXmlSection(specContent, 'implementation_roadmap', options);
+  if (!roadmapSection) {
+    log.debug('No implementation_roadmap section found');
+    return phases;
+  }
+
+  // Extract individual phase blocks
+  const phaseRegex = /<phase>([\s\S]*?)<\/phase>/g;
+  const phaseMatches = roadmapSection.matchAll(phaseRegex);
+
+  for (const phaseMatch of phaseMatches) {
+    const phaseContent = phaseMatch[1];
+
+    const nameMatch = phaseContent.match(/<name>([\s\S]*?)<\/name>/);
+    const name = nameMatch ? unescapeXml(nameMatch[1].trim()) : '';
+
+    const statusMatch = phaseContent.match(/<status>([\s\S]*?)<\/status>/);
+    const status = statusMatch ? unescapeXml(statusMatch[1].trim()) : 'pending';
+
+    const descMatch = phaseContent.match(/<description>([\s\S]*?)<\/description>/);
+    const description = descMatch ? unescapeXml(descMatch[1].trim()) : undefined;
+
+    if (name) {
+      phases.push({ name, status, description });
+    }
+  }
+
+  log.debug(`Extracted ${phases.length} roadmap phases`);
+  return phases;
+}
+
+/**
+ * Update a roadmap phase status in XML content
+ *
+ * @param specContent - The full XML content
+ * @param phaseName - The name of the phase to update
+ * @param newStatus - The new status value
+ * @param options - Optional extraction options
+ * @returns Updated XML content
+ */
+export function updateRoadmapPhaseStatus(
+  specContent: string,
+  phaseName: string,
+  newStatus: string,
+  options: ExtractXmlOptions = {}
+): string {
+  const log = options.logger || logger;
+
+  // Find the phase and update its status
+  // Match the phase block containing the specific name
+  const phaseRegex = new RegExp(
+    `(<phase>\\s*<name>\\s*${escapeXml(phaseName)}\\s*<\\/name>\\s*<status>)[\\s\\S]*?(<\\/status>)`,
+    'i'
+  );
+
+  if (phaseRegex.test(specContent)) {
+    log.debug(`Updating phase "${phaseName}" status to "${newStatus}"`);
+    return specContent.replace(phaseRegex, `$1${escapeXml(newStatus)}$2`);
+  }
+
+  log.debug(`Phase "${phaseName}" not found`);
+  return specContent;
+}
diff --git a/temp_repo/apps/server/src/middleware/require-json-content-type.ts b/temp_repo/apps/server/src/middleware/require-json-content-type.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ea02f480a8a18139a5fe3d8983e29920d854e357
--- /dev/null
+++ b/temp_repo/apps/server/src/middleware/require-json-content-type.ts
@@ -0,0 +1,50 @@
+/**
+ * Middleware to enforce Content-Type: application/json for request bodies
+ *
+ * This security middleware prevents malicious requests by requiring proper
+ * Content-Type headers for all POST, PUT, and PATCH requests.
+ *
+ * Rejecting requests without proper Content-Type helps prevent:
+ * - CSRF attacks via form submissions (which use application/x-www-form-urlencoded)
+ * - Content-type confusion attacks
+ * - Malformed request exploitation
+ */
+
+import type { Request, Response, NextFunction } from 'express';
+
+// HTTP methods that typically include request bodies
+const METHODS_REQUIRING_JSON = ['POST', 'PUT', 'PATCH'];
+
+/**
+ * Middleware that requires Content-Type: application/json for POST/PUT/PATCH requests
+ *
+ * Returns 415 Unsupported Media Type if:
+ * - The request method is POST, PUT, or PATCH
+ * - AND the Content-Type header is missing or not application/json
+ *
+ * Allows requests to pass through if:
+ * - The request method is GET, DELETE, OPTIONS, HEAD, etc.
+ * - OR the Content-Type is properly set to application/json (with optional charset)
+ */
+export function requireJsonContentType(req: Request, res: Response, next: NextFunction): void {
+  // Skip validation for methods that don't require a body
+  if (!METHODS_REQUIRING_JSON.includes(req.method)) {
+    next();
+    return;
+  }
+
+  const contentType = req.headers['content-type'];
+
+  // Check if Content-Type header exists and contains application/json
+  // Allows for charset parameter: "application/json; charset=utf-8"
+  if (!contentType || !contentType.toLowerCase().includes('application/json')) {
+    res.status(415).json({
+      success: false,
+      error: 'Unsupported Media Type',
+      message: 'Content-Type header must be application/json',
+    });
+    return;
+  }
+
+  next();
+}
diff --git a/temp_repo/apps/server/src/middleware/validate-paths.ts b/temp_repo/apps/server/src/middleware/validate-paths.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1f7f38760bfcf5204da873717857b0c7406a8790
--- /dev/null
+++ b/temp_repo/apps/server/src/middleware/validate-paths.ts
@@ -0,0 +1,87 @@
+/**
+ * Middleware for validating path parameters against ALLOWED_ROOT_DIRECTORY
+ * Provides a clean, reusable way to validate paths without repeating the same
+ * try-catch block in every route handler
+ */
+
+import type { Request, Response, NextFunction } from 'express';
+import { validatePath, PathNotAllowedError } from '@automaker/platform';
+
+/**
+ * Helper to get parameter value from request (checks body first, then query)
+ */
+function getParamValue(req: Request, paramName: string): unknown {
+  // Check body first (for POST/PUT/PATCH requests)
+  if (req.body && req.body[paramName] !== undefined) {
+    return req.body[paramName];
+  }
+  // Fall back to query params (for GET requests)
+  if (req.query && req.query[paramName] !== undefined) {
+    return req.query[paramName];
+  }
+  return undefined;
+}
+
+/**
+ * Creates a middleware that validates specified path parameters in req.body or req.query
+ * @param paramNames - Names of parameters to validate (e.g., 'projectPath', 'worktreePath')
+ * @example
+ * router.post('/create', validatePathParams('projectPath'), handler);
+ * router.post('/delete', validatePathParams('projectPath', 'worktreePath'), handler);
+ * router.post('/send', validatePathParams('workingDirectory?', 'imagePaths[]'), handler);
+ * router.get('/logs', validatePathParams('worktreePath'), handler); // Works with query params too
+ *
+ * Special syntax:
+ * - 'paramName?' - Optional parameter (only validated if present)
+ * - 'paramName[]' - Array parameter (validates each element)
+ */
+export function validatePathParams(...paramNames: string[]) {
+  return (req: Request, res: Response, next: NextFunction): void => {
+    try {
+      for (const paramName of paramNames) {
+        // Handle optional parameters (paramName?)
+        if (paramName.endsWith('?')) {
+          const actualName = paramName.slice(0, -1);
+          const value = getParamValue(req, actualName);
+          if (value && typeof value === 'string') {
+            validatePath(value);
+          }
+          continue;
+        }
+
+        // Handle array parameters (paramName[])
+        if (paramName.endsWith('[]')) {
+          const actualName = paramName.slice(0, -2);
+          const values = getParamValue(req, actualName);
+          if (Array.isArray(values) && values.length > 0) {
+            for (const value of values) {
+              if (typeof value === 'string') {
+                validatePath(value);
+              }
+            }
+          }
+          continue;
+        }
+
+        // Handle regular parameters
+        const value = getParamValue(req, paramName);
+        if (value && typeof value === 'string') {
+          validatePath(value);
+        }
+      }
+
+      next();
+    } catch (error) {
+      if (error instanceof PathNotAllowedError) {
+        res.status(403).json({
+          success: false,
+          error: error.message,
+        });
+        return;
+      }
+
+      // Re-throw unexpected errors
+      throw error;
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/providers/base-provider.ts b/temp_repo/apps/server/src/providers/base-provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2b1880d3c39e72d6fa9a7fb4fbc5a4a555f0f3ef
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/base-provider.ts
@@ -0,0 +1,94 @@
+/**
+ * Abstract base class for AI model providers
+ */
+
+import type {
+  ProviderConfig,
+  ExecuteOptions,
+  ProviderMessage,
+  InstallationStatus,
+  ValidationResult,
+  ModelDefinition,
+} from './types.js';
+
+/**
+ * Base provider class that all provider implementations must extend
+ */
+export abstract class BaseProvider {
+  protected config: ProviderConfig;
+  protected name: string;
+
+  constructor(config: ProviderConfig = {}) {
+    this.config = config;
+    this.name = this.getName();
+  }
+
+  /**
+   * Get the provider name (e.g., "claude", "cursor")
+   */
+  abstract getName(): string;
+
+  /**
+   * Execute a query and stream responses
+   * @param options Execution options
+   * @returns AsyncGenerator yielding provider messages
+   */
+  abstract executeQuery(options: ExecuteOptions): AsyncGenerator<ProviderMessage>;
+
+  /**
+   * Detect if the provider is installed and configured
+   * @returns Installation status
+   */
+  abstract detectInstallation(): Promise<InstallationStatus>;
+
+  /**
+   * Get available models for this provider
+   * @returns Array of model definitions
+   */
+  abstract getAvailableModels(): ModelDefinition[];
+
+  /**
+   * Validate the provider configuration
+   * @returns Validation result
+   */
+  validateConfig(): ValidationResult {
+    const errors: string[] = [];
+    const warnings: string[] = [];
+
+    // Base validation (can be overridden)
+    if (!this.config) {
+      errors.push('Provider config is missing');
+    }
+
+    return {
+      valid: errors.length === 0,
+      errors,
+      warnings,
+    };
+  }
+
+  /**
+   * Check if the provider supports a specific feature
+   * @param feature Feature name (e.g., "vision", "tools", "mcp")
+   * @returns Whether the feature is supported
+   */
+  supportsFeature(feature: string): boolean {
+    // Default implementation - override in subclasses
+    const commonFeatures = ['tools', 'text'];
+    return commonFeatures.includes(feature);
+  }
+
+  /**
+   * Get provider configuration
+   */
+  getConfig(): ProviderConfig {
+    return this.config;
+  }
+
+  /**
+   * Update provider configuration
+   */
+  setConfig(config: Partial<ProviderConfig>): void {
+    this.config = { ...this.config, ...config };
+  }
+}
diff --git a/temp_repo/apps/server/src/providers/claude-provider.ts b/temp_repo/apps/server/src/providers/claude-provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fe471e210ae9fb699d37f292994fd3b4673763ed
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/claude-provider.ts
@@ -0,0 +1,448 @@
+/**
+ * Claude Provider - Executes queries using Claude Agent SDK
+ *
+ * Wraps the @anthropic-ai/claude-agent-sdk for seamless integration
+ * with the provider architecture.
+ */
+
+import { query, type Options, type SDKUserMessage } from '@anthropic-ai/claude-agent-sdk';
+import { BaseProvider } from './base-provider.js';
+import { classifyError, getUserFriendlyErrorMessage, createLogger } from '@automaker/utils';
+import { getClaudeAuthIndicators } from '@automaker/platform';
+import {
+  getThinkingTokenBudget,
+  validateBareModelId,
+  type ClaudeApiProfile,
+  type ClaudeCompatibleProvider,
+  type Credentials,
+} from '@automaker/types';
+import type {
+  ExecuteOptions,
+  ProviderMessage,
+  InstallationStatus,
+  ModelDefinition,
+} from './types.js';
+
+const logger = createLogger('ClaudeProvider');
+
+/**
+ * ProviderConfig - Union type for provider configuration
+ *
+ * Accepts either the legacy ClaudeApiProfile or new ClaudeCompatibleProvider.
+ * Both share the same connection settings structure.
+ */
+type ProviderConfig = ClaudeApiProfile | ClaudeCompatibleProvider;
+
+// System vars are always passed from process.env regardless of profile.
+// Includes filesystem, locale, and temp directory vars that the Claude CLI
+// needs internally for config resolution and temp file creation.
+const SYSTEM_ENV_VARS = [
+  'PATH',
+  'HOME',
+  'SHELL',
+  'TERM',
+  'USER',
+  'LANG',
+  'LC_ALL',
+  'TMPDIR',
+  'XDG_CONFIG_HOME',
+  'XDG_DATA_HOME',
+  'XDG_CACHE_HOME',
+  'XDG_STATE_HOME',
+];
+
+/**
+ * Check if the config is a ClaudeCompatibleProvider (new system)
+ * by checking for the 'models' array property
+ */
+function isClaudeCompatibleProvider(config: ProviderConfig): config is ClaudeCompatibleProvider {
+  return 'models' in config && Array.isArray(config.models);
+}
+
+/**
+ * Build environment for the SDK with only explicitly allowed variables.
+ * When a provider/profile is provided, uses its configuration (clean switch - don't inherit from process.env).
+ * When no provider is provided, uses direct Anthropic API settings from process.env.
+ *
+ * Supports both:
+ * - ClaudeCompatibleProvider (new system with models[] array)
+ * - ClaudeApiProfile (legacy system with modelMappings)
+ *
+ * @param providerConfig - Optional provider configuration for alternative endpoint
+ * @param credentials - Optional credentials object for resolving 'credentials' apiKeySource
+ */
+function buildEnv(
+  providerConfig?: ProviderConfig,
+  credentials?: Credentials
+): Record<string, string | undefined> {
+  const env: Record<string, string | undefined> = {};
+
+  if (providerConfig) {
+    // Use provider configuration (clean switch - don't inherit non-system vars from process.env)
+    logger.debug('[buildEnv] Using provider configuration:', {
+      name: providerConfig.name,
+      baseUrl: providerConfig.baseUrl,
+      apiKeySource: providerConfig.apiKeySource ?? 'inline',
+      isNewProvider: isClaudeCompatibleProvider(providerConfig),
+    });
+
+    // Resolve API key based on source strategy
+    let apiKey: string | undefined;
+    const source = providerConfig.apiKeySource ?? 'inline'; // Default to inline for backwards compat
+
+    switch (source) {
+      case 'inline':
+        apiKey = providerConfig.apiKey;
+        break;
+      case 'env':
+        apiKey = process.env.ANTHROPIC_API_KEY;
+        break;
+      case 'credentials':
+        apiKey = credentials?.apiKeys?.anthropic;
+        break;
+    }
+
+    // Warn if no API key found
+    if (!apiKey) {
+      logger.warn(`No API key found for provider "${providerConfig.name}" with source "${source}"`);
+    }
+
+    // Authentication
+    if (providerConfig.useAuthToken) {
+      env['ANTHROPIC_AUTH_TOKEN'] = apiKey;
+    } else {
+      env['ANTHROPIC_API_KEY'] = apiKey;
+    }
+
+    // Endpoint configuration
+    env['ANTHROPIC_BASE_URL'] = providerConfig.baseUrl;
+    logger.debug(`[buildEnv] Set ANTHROPIC_BASE_URL to: ${providerConfig.baseUrl}`);
+
+    if (providerConfig.timeoutMs) {
+      env['API_TIMEOUT_MS'] = String(providerConfig.timeoutMs);
+    }
+
+    // Model mappings - only for legacy ClaudeApiProfile
+    // For ClaudeCompatibleProvider, the model is passed directly (no mapping needed)
+    if (!isClaudeCompatibleProvider(providerConfig) && providerConfig.modelMappings) {
+      if (providerConfig.modelMappings.haiku) {
+        env['ANTHROPIC_DEFAULT_HAIKU_MODEL'] = providerConfig.modelMappings.haiku;
+      }
+      if (providerConfig.modelMappings.sonnet) {
+        env['ANTHROPIC_DEFAULT_SONNET_MODEL'] = providerConfig.modelMappings.sonnet;
+      }
+      if (providerConfig.modelMappings.opus) {
+        env['ANTHROPIC_DEFAULT_OPUS_MODEL'] = providerConfig.modelMappings.opus;
+      }
+    }
+
+    // Traffic control
+    if (providerConfig.disableNonessentialTraffic) {
+      env['CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC'] = '1';
+    }
+  } else {
+    // Use direct Anthropic API - pass through credentials or environment variables
+    // This supports:
+    // 1. API Key mode: ANTHROPIC_API_KEY from credentials (UI settings) or env
+    // 2. Claude Max plan: Uses CLI OAuth auth (SDK handles this automatically)
+    // 3. Custom endpoints via ANTHROPIC_BASE_URL env var (backward compatibility)
+    //
+    // Priority: credentials file (UI settings) -> environment variable
+    // Note: Only auth and endpoint vars are passed. Model mappings and traffic
+    // control are NOT passed (those require a profile for explicit configuration).
+    if (credentials?.apiKeys?.anthropic) {
+      env['ANTHROPIC_API_KEY'] = credentials.apiKeys.anthropic;
+    } else if (process.env.ANTHROPIC_API_KEY) {
+      env['ANTHROPIC_API_KEY'] = process.env.ANTHROPIC_API_KEY;
+    }
+    // If using Claude Max plan via CLI auth, the SDK handles auth automatically
+    // when no API key is provided. We don't set ANTHROPIC_AUTH_TOKEN here
+    // unless it was explicitly set in process.env (rare edge case).
+    if (process.env.ANTHROPIC_AUTH_TOKEN) {
+      env['ANTHROPIC_AUTH_TOKEN'] = process.env.ANTHROPIC_AUTH_TOKEN;
+    }
+    // Pass through ANTHROPIC_BASE_URL if set in environment (backward compatibility)
+    if (process.env.ANTHROPIC_BASE_URL) {
+      env['ANTHROPIC_BASE_URL'] = process.env.ANTHROPIC_BASE_URL;
+    }
+  }
+
+  // Always add system vars from process.env
+  for (const key of SYSTEM_ENV_VARS) {
+    if (process.env[key]) {
+      env[key] = process.env[key];
+    }
+  }
+
+  return env;
+}
+
+export class ClaudeProvider extends BaseProvider {
+  getName(): string {
+    return 'claude';
+  }
+
+  /**
+   * Execute a query using Claude Agent SDK
+   */
+  async *executeQuery(options: ExecuteOptions): AsyncGenerator<ProviderMessage> {
+    // Validate that model doesn't have a provider prefix
+    // AgentService should strip prefixes before passing to providers
+    // Claude doesn't use a provider prefix, so we don't need to specify an expected provider
+    validateBareModelId(options.model, 'ClaudeProvider');
+
+    const {
+      prompt,
+      model,
+      cwd,
+      systemPrompt,
+      maxTurns = 1000,
+      allowedTools,
+      abortController,
+      conversationHistory,
+      sdkSessionId,
+      thinkingLevel,
+      claudeApiProfile,
+      claudeCompatibleProvider,
+      credentials,
+    } = options;
+
+    // Determine which provider config to use
+    // claudeCompatibleProvider takes precedence over claudeApiProfile
+    const providerConfig = claudeCompatibleProvider || claudeApiProfile;
+
+    // Build thinking configuration
+    // Adaptive thinking (Opus 4.6): don't set maxThinkingTokens, model uses adaptive by default
+    // Manual thinking (Haiku/Sonnet): use budget_tokens
+    const maxThinkingTokens =
+      thinkingLevel === 'adaptive' ? undefined : getThinkingTokenBudget(thinkingLevel);
+
+    // Build Claude SDK options
+    const sdkOptions: Options = {
+      model,
+      systemPrompt,
+      maxTurns,
+      cwd,
+      // Pass only explicitly allowed environment variables to SDK
+      // When a provider is active, uses provider settings (clean switch)
+      // When no provider, uses direct Anthropic API (from process.env or CLI OAuth)
+      env: buildEnv(providerConfig, credentials),
+      // Pass through allowedTools if provided by caller (decided by sdk-options.ts)
+      ...(allowedTools && { allowedTools }),
+      // Restrict available built-in tools if specified (tools: [] disables all tools)
+      ...(options.tools && { tools: options.tools }),
+      // AUTONOMOUS MODE: Always bypass permissions for fully autonomous operation
+      permissionMode: 'bypassPermissions',
+      allowDangerouslySkipPermissions: true,
+      abortController,
+      // Resume existing SDK session if we have a session ID
+      ...(sdkSessionId && conversationHistory && conversationHistory.length > 0
+        ? { resume: sdkSessionId }
+        : {}),
+      // Forward settingSources for CLAUDE.md file loading
+      ...(options.settingSources && { settingSources: options.settingSources }),
+      // Forward MCP servers configuration
+      ...(options.mcpServers && { mcpServers: options.mcpServers }),
+      // Extended thinking configuration
+      ...(maxThinkingTokens && { maxThinkingTokens }),
+      // Subagents configuration for specialized task delegation
+      ...(options.agents && { agents: options.agents }),
+      // Pass through outputFormat for structured JSON outputs
+      ...(options.outputFormat && { outputFormat: options.outputFormat }),
+    };
+
+    // Build prompt payload
+    let promptPayload: string | AsyncIterable<SDKUserMessage>;
+
+    if (Array.isArray(prompt)) {
+      // Multi-part prompt (with images)
+      promptPayload = (async function* () {
+        const multiPartPrompt: SDKUserMessage = {
+          type: 'user' as const,
+          session_id: sdkSessionId || '',
+          message: {
+            role: 'user' as const,
+            content: prompt,
+          },
+          parent_tool_use_id: null,
+        };
+        yield multiPartPrompt;
+      })();
+    } else {
+      // Simple text prompt
+      promptPayload = prompt;
+    }
+
+    // Log the environment being passed to the SDK for debugging
+    const envForSdk = sdkOptions.env as Record<string, string | undefined>;
+    logger.debug('[ClaudeProvider] SDK Configuration:', {
+      model: sdkOptions.model,
+      baseUrl: envForSdk?.['ANTHROPIC_BASE_URL'] || '(default Anthropic API)',
+      hasApiKey: !!envForSdk?.['ANTHROPIC_API_KEY'],
+      hasAuthToken: !!envForSdk?.['ANTHROPIC_AUTH_TOKEN'],
+      providerName: providerConfig?.name || '(direct Anthropic)',
+      maxTurns: sdkOptions.maxTurns,
+      maxThinkingTokens: sdkOptions.maxThinkingTokens,
+    });
+
+    // Execute via Claude Agent SDK
+    try {
+      const stream = query({ prompt: promptPayload, options: sdkOptions });
+
+      // Stream messages directly - they're already in the correct format
+      for await (const msg of stream) {
+        yield msg as ProviderMessage;
+      }
+    } catch (error) {
+      // Enhance error with user-friendly message and classification
+      const errorInfo = classifyError(error);
+      const userMessage = getUserFriendlyErrorMessage(error);
+
+      logger.error('executeQuery() error during execution:', {
+        type: errorInfo.type,
+        message: errorInfo.message,
+        isRateLimit: errorInfo.isRateLimit,
+        retryAfter: errorInfo.retryAfter,
+        stack: (error as Error).stack,
+      });
+
+      // Build enhanced error message with additional guidance for rate limits
+      const message = errorInfo.isRateLimit
+        ? `${userMessage}\n\nTip: If you're running multiple features in auto-mode, consider reducing concurrency (maxConcurrency setting) to avoid hitting rate limits.`
+        : userMessage;
+
+      const enhancedError = new Error(message) as Error & {
+        originalError: unknown;
+        type: string;
+        retryAfter?: number;
+      };
+      enhancedError.originalError = error;
+      enhancedError.type = errorInfo.type;
+
+      if (errorInfo.isRateLimit) {
+        enhancedError.retryAfter = errorInfo.retryAfter;
+      }
+
+      throw enhancedError;
+    }
+  }
+
+  /**
+   * Detect Claude SDK installation (always available via npm)
+   */
+  async detectInstallation(): Promise<InstallationStatus> {
+    // Claude SDK is always available since it's a dependency
+    // Check all four supported auth methods, mirroring the logic in buildEnv():
+    // 1. ANTHROPIC_API_KEY environment variable
+    // 2. ANTHROPIC_AUTH_TOKEN environment variable
+    // 3. credentials?.apiKeys?.anthropic (credentials file, checked via platform indicators)
+    // 4. Claude Max CLI OAuth (SDK handles this automatically; detected via getClaudeAuthIndicators)
+    const hasEnvApiKey = !!process.env.ANTHROPIC_API_KEY;
+    const hasEnvAuthToken = !!process.env.ANTHROPIC_AUTH_TOKEN;
+
+    // Check credentials file and CLI OAuth indicators (same sources used by buildEnv)
+    let hasCredentialsApiKey = false;
+    let hasCliOAuth = false;
+    try {
+      const indicators = await getClaudeAuthIndicators();
+      hasCredentialsApiKey = !!indicators.credentials?.hasApiKey;
+      hasCliOAuth = !!(
+        indicators.credentials?.hasOAuthToken ||
+        indicators.hasStatsCacheWithActivity ||
+        (indicators.hasSettingsFile && indicators.hasProjectsSessions)
+      );
+    } catch {
+      // If we can't check indicators, fall back to env vars only
+    }
+
+    const hasApiKey = hasEnvApiKey || hasCredentialsApiKey;
+    const authenticated = hasEnvApiKey || hasEnvAuthToken || hasCredentialsApiKey || hasCliOAuth;
+
+    const status: InstallationStatus = {
+      installed: true,
+      method: 'sdk',
+      hasApiKey,
+      authenticated,
+    };
+
+    return status;
+  }
+
+  /**
+   * Get available Claude models
+   */
+  getAvailableModels(): ModelDefinition[] {
+    const models = [
+      {
+        id: 'claude-opus-4-6',
+        name: 'Claude Opus 4.6',
+        modelString: 'claude-opus-4-6',
+        provider: 'anthropic',
+        description: 'Most capable Claude model with adaptive thinking',
+        contextWindow: 200000,
+        maxOutputTokens: 128000,
+        supportsVision: true,
+        supportsTools: true,
+        tier: 'premium' as const,
+        default: true,
+      },
+      {
+        id: 'claude-sonnet-4-6',
+        name: 'Claude Sonnet 4.6',
+        modelString: 'claude-sonnet-4-6',
+        provider: 'anthropic',
+        description: 'Balanced performance and cost with enhanced reasoning',
+        contextWindow: 200000,
+        maxOutputTokens: 64000,
+        supportsVision: true,
+        supportsTools: true,
+        tier: 'standard' as const,
+      },
+      {
+        id: 'claude-sonnet-4-20250514',
+        name: 'Claude Sonnet 4',
+        modelString: 'claude-sonnet-4-20250514',
+        provider: 'anthropic',
+        description: 'Balanced performance and cost',
+        contextWindow: 200000,
+        maxOutputTokens: 16000,
+        supportsVision: true,
+        supportsTools: true,
+        tier: 'standard' as const,
+      },
+      {
+        id: 'claude-3-5-sonnet-20241022',
+        name: 'Claude 3.5 Sonnet',
+        modelString: 'claude-3-5-sonnet-20241022',
+        provider: 'anthropic',
+        description: 'Fast and capable',
+        contextWindow: 200000,
+        maxOutputTokens: 8000,
+        supportsVision: true,
+        supportsTools: true,
+        tier: 'standard' as const,
+      },
+      {
+        id: 'claude-haiku-4-5-20251001',
+        name: 'Claude Haiku 4.5',
+        modelString: 'claude-haiku-4-5-20251001',
+        provider: 'anthropic',
+        description: 'Fastest Claude model',
+        contextWindow: 200000,
+        maxOutputTokens: 8000,
+        supportsVision: true,
+        supportsTools: true,
+        tier: 'basic' as const,
+      },
+    ] satisfies ModelDefinition[];
+    return models;
+  }
+
+  /**
+   * Check if the provider supports a specific feature
+   */
+  supportsFeature(feature: string): boolean {
+    const supportedFeatures = ['tools', 'text', 'vision', 'thinking'];
+    return supportedFeatures.includes(feature);
+  }
+}
diff --git a/temp_repo/apps/server/src/providers/cli-provider.ts b/temp_repo/apps/server/src/providers/cli-provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ea636cb8e68e3b48c0dced97c7e179d253324523
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/cli-provider.ts
@@ -0,0 +1,625 @@
+/**
+ * CliProvider - Abstract base class for CLI-based AI providers
+ *
+ * Provides common infrastructure for CLI tools that spawn subprocesses
+ * and stream JSONL output. Handles:
+ * - Platform-specific CLI detection (PATH, common locations)
+ * - Windows execution strategies (WSL, npx, direct, cmd)
+ * - JSONL subprocess spawning and streaming
+ * - Error mapping infrastructure
+ *
+ * @example
+ * ```typescript
+ * class CursorProvider extends CliProvider {
+ *   getCliName(): string { return 'cursor-agent'; }
+ *   getSpawnConfig(): CliSpawnConfig {
+ *     return {
+ *       windowsStrategy: 'wsl',
+ *       commonPaths: {
+ *         linux: ['~/.local/bin/cursor-agent'],
+ *         darwin: ['~/.local/bin/cursor-agent'],
+ *       }
+ *     };
+ *   }
+ *   // ... implement abstract methods
+ * }
+ * ```
+ */
+
+import {
+  createWslCommand,
+  findCliInWsl,
+  isWslAvailable,
+  spawnJSONLProcess,
+  windowsToWslPath,
+  type SubprocessOptions,
+  type WslCliResult,
+} from '@automaker/platform';
+import { calculateReasoningTimeout } from '@automaker/types';
+import { createLogger, isAbortError } from '@automaker/utils';
+import { execSync } from 'child_process';
+import * as fs from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+import { BaseProvider } from './base-provider.js';
+import type { ExecuteOptions, ProviderConfig, ProviderMessage } from './types.js';
+
+/**
+ * Spawn strategy for CLI tools on Windows
+ *
+ * Different CLI tools require different execution strategies:
+ * - 'wsl': Requires WSL, CLI only available on Linux/macOS (e.g., cursor-agent)
+ * - 'npx': Installed globally via npm/npx, use `npx <package>` to run
+ * - 'direct': Native Windows binary, can spawn directly
+ * - 'cmd': Windows batch file (.cmd/.bat), needs cmd.exe shell
+ */
+export type SpawnStrategy = 'wsl' | 'npx' | 'direct' | 'cmd';
+
+/**
+ * Configuration for CLI tool spawning
+ */
+export interface CliSpawnConfig {
+  /** How to spawn on Windows */
+  windowsStrategy: SpawnStrategy;
+
+  /** NPX package name (required if windowsStrategy is 'npx') */
+  npxPackage?: string;
+
+  /** Preferred WSL distribution (if windowsStrategy is 'wsl') */
+  wslDistribution?: string;
+
+  /**
+   * Common installation paths per platform
+   * Use ~ for home directory (will be expanded)
+   * Keys: 'linux', 'darwin', 'win32'
+   */
+  commonPaths: Record<string, string[]>;
+
+  /** Version check command (defaults to --version) */
+  versionCommand?: string;
+}
+
+/**
+ * CLI error information for consistent error handling
+ */
+export interface CliErrorInfo {
+  code: string;
+  message: string;
+  recoverable: boolean;
+  suggestion?: string;
+}
+
+/**
+ * Detection result from CLI path finding
+ */
+export interface CliDetectionResult {
+  /** Path to the CLI (or 'npx' for npx strategy) */
+  cliPath: string | null;
+  /** Whether using WSL mode */
+  useWsl: boolean;
+  /** WSL path if using WSL */
+  wslCliPath?: string;
+  /** WSL distribution if using WSL */
+  wslDistribution?: string;
+  /** Detected strategy used */
+  strategy: SpawnStrategy | 'native';
+}
+
+// Create logger for CLI operations
+const cliLogger = createLogger('CliProvider');
+
+/**
+ * Base timeout for CLI operations in milliseconds.
+ * CLI tools have longer startup and processing times compared to direct API calls,
+ * so we use a higher base timeout (120s) than the default provider timeout (30s).
+ * This is multiplied by reasoning effort multipliers when applicable.
+ * @see calculateReasoningTimeout from @automaker/types
+ */
+const CLI_BASE_TIMEOUT_MS = 120000;
+
+/**
+ * Abstract base class for CLI-based providers
+ *
+ * Subclasses must implement:
+ * - getCliName(): CLI executable name
+ * - getSpawnConfig(): Platform-specific spawn configuration
+ * - buildCliArgs(): Convert ExecuteOptions to CLI arguments
+ * - normalizeEvent(): Convert CLI output to ProviderMessage
+ */
+export abstract class CliProvider extends BaseProvider {
+  // CLI detection results (cached after first detection)
+  protected cliPath: string | null = null;
+  protected useWsl: boolean = false;
+  protected wslCliPath: string | null = null;
+  protected wslDistribution: string | undefined = undefined;
+  protected detectedStrategy: SpawnStrategy | 'native' = 'native';
+
+  // NPX args (used when strategy is 'npx')
+  protected npxArgs: string[] = [];
+
+  constructor(config: ProviderConfig = {}) {
+    super(config);
+    // Detection happens lazily on first use
+  }
+
+  // ==========================================================================
+  // Abstract methods - must be implemented by subclasses
+  // ==========================================================================
+
+  /**
+   * Get the CLI executable name (e.g., 'cursor-agent', 'aider')
+   */
+  abstract getCliName(): string;
+
+  /**
+   * Get spawn configuration for this CLI
+   */
+  abstract getSpawnConfig(): CliSpawnConfig;
+
+  /**
+   * Build CLI arguments from execution options
+   * @param options Execution options
+   * @returns Array of CLI arguments
+   */
+  abstract buildCliArgs(options: ExecuteOptions): string[];
+
+  /**
+   * Normalize a raw CLI event to ProviderMessage format
+   * @param event Raw event from CLI JSONL output
+   * @returns Normalized ProviderMessage or null to skip
+   */
+  abstract normalizeEvent(event: unknown): ProviderMessage | null;
+
+  // ==========================================================================
+  // Optional overrides
+  // ==========================================================================
+
+  /**
+   * Map CLI stderr/exit code to error info
+   * Override to provide CLI-specific error mapping
+   */
+  protected mapError(stderr: string, exitCode: number | null): CliErrorInfo {
+    const lower = stderr.toLowerCase();
+
+    // Common authentication errors
+    if (
+      lower.includes('not authenticated') ||
+      lower.includes('please log in') ||
+      lower.includes('unauthorized')
+    ) {
+      return {
+        code: 'NOT_AUTHENTICATED',
+        message: `${this.getCliName()} is not authenticated`,
+        recoverable: true,
+        suggestion: `Run "${this.getCliName()} login" to authenticate`,
+      };
+    }
+
+    // Rate limiting
+    if (
+      lower.includes('rate limit') ||
+      lower.includes('too many requests') ||
+      lower.includes('429')
+    ) {
+      return {
+        code: 'RATE_LIMITED',
+        message: 'API rate limit exceeded',
+        recoverable: true,
+        suggestion: 'Wait a few minutes and try again',
+      };
+    }
+
+    // Network errors
+    if (
+      lower.includes('network') ||
+      lower.includes('connection') ||
+      lower.includes('econnrefused') ||
+      lower.includes('timeout')
+    ) {
+      return {
+        code: 'NETWORK_ERROR',
+        message: 'Network connection error',
+        recoverable: true,
+        suggestion: 'Check your internet connection and try again',
+      };
+    }
+
+    // Process killed
+    if (exitCode === 137 || lower.includes('killed') || lower.includes('sigterm')) {
+      return {
+        code: 'PROCESS_CRASHED',
+        message: 'Process was terminated',
+        recoverable: true,
+        suggestion: 'The process may have run out of memory. Try a simpler task.',
+      };
+    }
+
+    // Generic error
+    return {
+      code: 'UNKNOWN_ERROR',
+      message: stderr || `Process exited with code ${exitCode}`,
+      recoverable: false,
+    };
+  }
+
+  /**
+   * Get installation instructions for this CLI
+   * Override to provide CLI-specific instructions
+   */
+  protected getInstallInstructions(): string {
+    const cliName = this.getCliName();
+    const config = this.getSpawnConfig();
+
+    if (process.platform === 'win32') {
+      switch (config.windowsStrategy) {
+        case 'wsl':
+          return `${cliName} requires WSL on Windows. Install WSL, then run inside WSL to install.`;
+        case 'npx':
+          return `Install with: npm install -g ${config.npxPackage || cliName}`;
+        case 'cmd':
+        case 'direct':
+          return `${cliName} is not installed. Check the documentation for installation instructions.`;
+      }
+    }
+
+    return `${cliName} is not installed. Check the documentation for installation instructions.`;
+  }
+
+  // ==========================================================================
+  // CLI Detection
+  // ==========================================================================
+
+  /**
+   * Expand ~ to home directory in path
+   */
+  private expandPath(p: string): string {
+    if (p.startsWith('~')) {
+      return path.join(os.homedir(), p.slice(1));
+    }
+    return p;
+  }
+
+  /**
+   * Find CLI in PATH using 'which' (Unix) or 'where' (Windows)
+   */
+  private findCliInPath(): string | null {
+    const cliName = this.getCliName();
+
+    try {
+      const command = process.platform === 'win32' ? 'where' : 'which';
+      const result = execSync(`${command} ${cliName}`, {
+        encoding: 'utf8',
+        timeout: 5000,
+        stdio: ['pipe', 'pipe', 'pipe'],
+        windowsHide: true,
+      })
+        .trim()
+        .split('\n')[0];
+
+      if (result && fs.existsSync(result)) {
+        cliLogger.debug(`Found ${cliName} in PATH: ${result}`);
+        return result;
+      }
+    } catch {
+      // Not in PATH
+    }
+
+    return null;
+  }
+
+  /**
+   * Find CLI in common installation paths for current platform
+   */
+  private findCliInCommonPaths(): string | null {
+    const config = this.getSpawnConfig();
+    const cliName = this.getCliName();
+    const platform = process.platform as 'linux' | 'darwin' | 'win32';
+    const paths = config.commonPaths[platform] || [];
+
+    for (const p of paths) {
+      const expandedPath = this.expandPath(p);
+      if (fs.existsSync(expandedPath)) {
+        cliLogger.debug(`Found ${cliName} at: ${expandedPath}`);
+        return expandedPath;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Detect CLI installation using appropriate strategy
+   */
+  protected detectCli(): CliDetectionResult {
+    const config = this.getSpawnConfig();
+    const cliName = this.getCliName();
+    const wslLogger = (msg: string) => cliLogger.debug(msg);
+
+    // Windows - use configured strategy
+    if (process.platform === 'win32') {
+      switch (config.windowsStrategy) {
+        case 'wsl': {
+          // Check WSL for CLI
+          if (isWslAvailable({ logger: wslLogger })) {
+            const wslResult: WslCliResult | null = findCliInWsl(cliName, {
+              logger: wslLogger,
+              distribution: config.wslDistribution,
+            });
+            if (wslResult) {
+              cliLogger.debug(
+                `Using ${cliName} via WSL (${wslResult.distribution || 'default'}): ${wslResult.wslPath}`
+              );
+              return {
+                cliPath: 'wsl.exe',
+                useWsl: true,
+                wslCliPath: wslResult.wslPath,
+                wslDistribution: wslResult.distribution,
+                strategy: 'wsl',
+              };
+            }
+          }
+          cliLogger.debug(`${cliName} not found (WSL not available or CLI not installed in WSL)`);
+          return { cliPath: null, useWsl: false, strategy: 'wsl' };
+        }
+
+        case 'npx': {
+          // For npx, we don't need to find the CLI, just return npx
+          cliLogger.debug(`Using ${cliName} via npx (package: ${config.npxPackage})`);
+          return {
+            cliPath: 'npx',
+            useWsl: false,
+            strategy: 'npx',
+          };
+        }
+
+        case 'direct':
+        case 'cmd': {
+          // Native Windows - check PATH and common paths
+          const pathResult = this.findCliInPath();
+          if (pathResult) {
+            return { cliPath: pathResult, useWsl: false, strategy: config.windowsStrategy };
+          }
+
+          const commonResult = this.findCliInCommonPaths();
+          if (commonResult) {
+            return { cliPath: commonResult, useWsl: false, strategy: config.windowsStrategy };
+          }
+
+          cliLogger.debug(`${cliName} not found on Windows`);
+          return { cliPath: null, useWsl: false, strategy: config.windowsStrategy };
+        }
+      }
+    }
+
+    // Linux/macOS - native execution
+    const pathResult = this.findCliInPath();
+    if (pathResult) {
+      return { cliPath: pathResult, useWsl: false, strategy: 'native' };
+    }
+
+    const commonResult = this.findCliInCommonPaths();
+    if (commonResult) {
+      return { cliPath: commonResult, useWsl: false, strategy: 'native' };
+    }
+
+    cliLogger.debug(`${cliName} not found`);
+    return { cliPath: null, useWsl: false, strategy: 'native' };
+  }
+
+  /**
+   * Ensure CLI is detected (lazy initialization)
+   */
+  protected ensureCliDetected(): void {
+    if (this.cliPath !== null || this.detectedStrategy !== 'native') {
+      return; // Already detected
+    }
+
+    const result = this.detectCli();
+    this.cliPath = result.cliPath;
+    this.useWsl = result.useWsl;
+    this.wslCliPath = result.wslCliPath || null;
+    this.wslDistribution = result.wslDistribution;
+    this.detectedStrategy = result.strategy;
+
+    // Set up npx args if using npx strategy
+    const config = this.getSpawnConfig();
+    if (result.strategy === 'npx' && config.npxPackage) {
+      this.npxArgs = [config.npxPackage];
+    }
+  }
+
+  /**
+   * Check if CLI is installed
+   */
+  async isInstalled(): Promise<boolean> {
+    this.ensureCliDetected();
+    return this.cliPath !== null;
+  }
+
+  // ==========================================================================
+  // Subprocess Spawning
+  // ==========================================================================
+
+  /**
+   * Build subprocess options based on detected strategy
+   */
+  protected buildSubprocessOptions(options: ExecuteOptions, cliArgs: string[]): SubprocessOptions {
+    this.ensureCliDetected();
+
+    if (!this.cliPath) {
+      throw new Error(`${this.getCliName()} CLI not found. ${this.getInstallInstructions()}`);
+    }
+
+    const cwd = options.cwd || process.cwd();
+
+    // Filter undefined values from process.env
+    const filteredEnv: Record<string, string> = {};
+    for (const [key, value] of Object.entries(process.env)) {
+      if (value !== undefined) {
+        filteredEnv[key] = value;
+      }
+    }
+
+    // Calculate dynamic timeout based on reasoning effort.
+    // This addresses GitHub issue #530 where reasoning models with 'xhigh' effort would timeout.
+    const timeout = calculateReasoningTimeout(options.reasoningEffort, CLI_BASE_TIMEOUT_MS);
+
+    // WSL strategy
+    if (this.useWsl && this.wslCliPath) {
+      const wslCwd = windowsToWslPath(cwd);
+      const wslCmd = createWslCommand(this.wslCliPath, cliArgs, {
+        distribution: this.wslDistribution,
+      });
+
+      // Add --cd flag to change directory inside WSL
+      let args: string[];
+      if (this.wslDistribution) {
+        args = ['-d', this.wslDistribution, '--cd', wslCwd, this.wslCliPath, ...cliArgs];
+      } else {
+        args = ['--cd', wslCwd, this.wslCliPath, ...cliArgs];
+      }
+
+      cliLogger.debug(`WSL spawn: ${wslCmd.command} ${args.slice(0, 6).join(' ')}...`);
+
+      return {
+        command: wslCmd.command,
+        args,
+        cwd, // Windows cwd for spawn
+        env: filteredEnv,
+        abortController: options.abortController,
+        timeout,
+      };
+    }
+
+    // NPX strategy
+    if (this.detectedStrategy === 'npx') {
+      const allArgs = [...this.npxArgs, ...cliArgs];
+      cliLogger.debug(`NPX spawn: npx ${allArgs.slice(0, 6).join(' ')}...`);
+
+      return {
+        command: 'npx',
+        args: allArgs,
+        cwd,
+        env: filteredEnv,
+        abortController: options.abortController,
+        timeout,
+      };
+    }
+
+    // Direct strategy (native Unix or Windows direct/cmd)
+    cliLogger.debug(`Direct spawn: ${this.cliPath} ${cliArgs.slice(0, 6).join(' ')}...`);
+
+    return {
+      command: this.cliPath,
+      args: cliArgs,
+      cwd,
+      env: filteredEnv,
+      abortController: options.abortController,
+      timeout,
+    };
+  }
+
+  /**
+   * Execute a query using the CLI with JSONL streaming
+   *
+   * This is a default implementation that:
+   * 1. Builds CLI args from options
+   * 2. Spawns the subprocess with appropriate strategy
+   * 3. Streams and normalizes events
+   *
+   * Subclasses can override for custom behavior.
+   */
+  async *executeQuery(options: ExecuteOptions): AsyncGenerator<ProviderMessage> {
+    this.ensureCliDetected();
+
+    if (!this.cliPath) {
+      throw new Error(`${this.getCliName()} CLI not found. ${this.getInstallInstructions()}`);
+    }
+
+    // Many CLI-based providers do not support a separate "system" message.
+    // If a systemPrompt is provided, embed it into the prompt so downstream models
+    // still receive critical formatting/schema instructions (e.g., JSON-only outputs).
+    const effectiveOptions = this.embedSystemPromptIntoPrompt(options);
+
+    const cliArgs = this.buildCliArgs(effectiveOptions);
+    const subprocessOptions = this.buildSubprocessOptions(effectiveOptions, cliArgs);
+
+    try {
+      for await (const rawEvent of spawnJSONLProcess(subprocessOptions)) {
+        const normalized = this.normalizeEvent(rawEvent);
+        if (normalized) {
+          yield normalized;
+        }
+      }
+    } catch (error) {
+      if (isAbortError(error)) {
+        cliLogger.debug('Query aborted');
+        return;
+      }
+
+      // Map CLI errors
+      if (error instanceof Error && 'stderr' in error) {
+        const errorInfo = this.mapError(
+          (error as { stderr?: string }).stderr || error.message,
+          (error as { exitCode?: number | null }).exitCode ?? null
+        );
+
+        const cliError = new Error(errorInfo.message) as Error & CliErrorInfo;
+        cliError.code = errorInfo.code;
+        cliError.recoverable = errorInfo.recoverable;
+        cliError.suggestion = errorInfo.suggestion;
+        throw cliError;
+      }
+
+      throw error;
+    }
+  }
+
+  /**
+   * Embed system prompt text into the user prompt for CLI providers.
+   *
+   * Most CLI providers we integrate with only accept a single prompt via stdin/args.
+   * When upstream code supplies `options.systemPrompt`, we prepend it to the prompt
+   * content and clear `systemPrompt` to avoid any accidental double-injection by
+   * subclasses.
+   */
+  protected embedSystemPromptIntoPrompt(options: ExecuteOptions): ExecuteOptions {
+    if (!options.systemPrompt) {
+      return options;
+    }
+
+    // Only string system prompts can be reliably embedded for CLI providers.
+    // Presets are provider-specific (e.g., Claude SDK) and cannot be represented
+    // universally. If a preset is provided, we only embed its optional `append`.
+    const systemText =
+      typeof options.systemPrompt === 'string'
+        ? options.systemPrompt
+        : options.systemPrompt.append
+          ? options.systemPrompt.append
+          : '';
+
+    if (!systemText) {
+      return { ...options, systemPrompt: undefined };
+    }
+
+    // Preserve original prompt structure.
+    if (typeof options.prompt === 'string') {
+      return {
+        ...options,
+        prompt: `${systemText}\n\n---\n\n${options.prompt}`,
+        systemPrompt: undefined,
+      };
+    }
+
+    if (Array.isArray(options.prompt)) {
+      return {
+        ...options,
+        prompt: [{ type: 'text', text: systemText }, ...options.prompt],
+        systemPrompt: undefined,
+      };
+    }
+
+    // Should be unreachable due to ExecuteOptions typing, but keep safe.
+    return { ...options, systemPrompt: undefined };
+  }
+}
diff --git a/temp_repo/apps/server/src/providers/codex-config-manager.ts b/temp_repo/apps/server/src/providers/codex-config-manager.ts
new file mode 100644
index 0000000000000000000000000000000000000000..33031c4a25c180bfe1cec3cdf25a4ed4d7fd23fd
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/codex-config-manager.ts
@@ -0,0 +1,85 @@
+/**
+ * Codex Config Manager - Writes MCP server configuration for Codex CLI
+ */
+
+import path from 'path';
+import type { McpServerConfig } from '@automaker/types';
+import * as secureFs from '../lib/secure-fs.js';
+
+const CODEX_CONFIG_DIR = '.codex';
+const CODEX_CONFIG_FILENAME = 'config.toml';
+const CODEX_MCP_SECTION = 'mcp_servers';
+
+function formatTomlString(value: string): string {
+  return JSON.stringify(value);
+}
+
+function formatTomlArray(values: string[]): string {
+  const formatted = values.map((value) => formatTomlString(value)).join(', ');
+  return `[${formatted}]`;
+}
+
+function formatTomlInlineTable(values: Record<string, string>): string {
+  const entries = Object.entries(values).map(
+    ([key, value]) => `${key} = ${formatTomlString(value)}`
+  );
+  return `{ ${entries.join(', ')} }`;
+}
+
+function formatTomlKey(key: string): string {
+  return `"${key.replace(/"/g, '\\"')}"`;
+}
+
+function buildServerBlock(name: string, server: McpServerConfig): string[] {
+  const lines: string[] = [];
+  const section = `${CODEX_MCP_SECTION}.${formatTomlKey(name)}`;
+  lines.push(`[${section}]`);
+
+  if (server.type) {
+    lines.push(`type = ${formatTomlString(server.type)}`);
+  }
+
+  if ('command' in server && server.command) {
+    lines.push(`command = ${formatTomlString(server.command)}`);
+  }
+
+  if ('args' in server && server.args && server.args.length > 0) {
+    lines.push(`args = ${formatTomlArray(server.args)}`);
+  }
+
+  if ('env' in server && server.env && Object.keys(server.env).length > 0) {
+    lines.push(`env = ${formatTomlInlineTable(server.env)}`);
+  }
+
+  if ('url' in server && server.url) {
+    lines.push(`url = ${formatTomlString(server.url)}`);
+  }
+
+  if ('headers' in server && server.headers && Object.keys(server.headers).length > 0) {
+    lines.push(`headers = ${formatTomlInlineTable(server.headers)}`);
+  }
+
+  return lines;
+}
+
+export class CodexConfigManager {
+  async configureMcpServers(
+    cwd: string,
+    mcpServers: Record<string, McpServerConfig>
+  ): Promise<void> {
+    const configDir = path.join(cwd, CODEX_CONFIG_DIR);
+    const configPath = path.join(configDir, CODEX_CONFIG_FILENAME);
+
+    await secureFs.mkdir(configDir, { recursive: true });
+
+    const blocks: string[] = [];
+    for (const [name, server] of Object.entries(mcpServers)) {
+      blocks.push(...buildServerBlock(name, server), '');
+    }
+
+    const content = blocks.join('\n').trim();
+    if (content) {
+      await secureFs.writeFile(configPath, content + '\n', 'utf-8');
+    }
+  }
+}
diff --git a/temp_repo/apps/server/src/providers/codex-models.ts b/temp_repo/apps/server/src/providers/codex-models.ts
new file mode 100644
index 0000000000000000000000000000000000000000..22839e28b341eb9fa7b9d80393b1bd3b33bf2e4c
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/codex-models.ts
@@ -0,0 +1,188 @@
+/**
+ * Codex Model Definitions
+ *
+ * Official Codex CLI models as documented at https://developers.openai.com/codex/models/
+ */
+
+import { CODEX_MODEL_MAP } from '@automaker/types';
+import type { ModelDefinition } from './types.js';
+
+const CONTEXT_WINDOW_256K = 256000;
+const CONTEXT_WINDOW_128K = 128000;
+const MAX_OUTPUT_32K = 32000;
+const MAX_OUTPUT_16K = 16000;
+
+/**
+ * All available Codex models with their specifications
+ * Based on https://developers.openai.com/codex/models/
+ */
+export const CODEX_MODELS: ModelDefinition[] = [
+  // ========== Recommended Codex Models ==========
+  {
+    id: CODEX_MODEL_MAP.gpt53Codex,
+    name: 'GPT-5.3-Codex',
+    modelString: CODEX_MODEL_MAP.gpt53Codex,
+    provider: 'openai',
+    description: 'Latest frontier agentic coding model.',
+    contextWindow: CONTEXT_WINDOW_256K,
+    maxOutputTokens: MAX_OUTPUT_32K,
+    supportsVision: true,
+    supportsTools: true,
+    tier: 'premium' as const,
+    default: true,
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt53CodexSpark,
+    name: 'GPT-5.3-Codex-Spark',
+    modelString: CODEX_MODEL_MAP.gpt53CodexSpark,
+    provider: 'openai',
+    description: 'Near-instant real-time coding model, 1000+ tokens/sec.',
+    contextWindow: CONTEXT_WINDOW_256K,
+    maxOutputTokens: MAX_OUTPUT_32K,
+    supportsVision: true,
+    supportsTools: true,
+    tier: 'premium' as const,
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt52Codex,
+    name: 'GPT-5.2-Codex',
+    modelString: CODEX_MODEL_MAP.gpt52Codex,
+    provider: 'openai',
+    description: 'Frontier agentic coding model.',
+    contextWindow: CONTEXT_WINDOW_256K,
+    maxOutputTokens: MAX_OUTPUT_32K,
+    supportsVision: true,
+    supportsTools: true,
+    tier: 'premium' as const,
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt51CodexMax,
+    name: 'GPT-5.1-Codex-Max',
+    modelString: CODEX_MODEL_MAP.gpt51CodexMax,
+    provider: 'openai',
+    description: 'Codex-optimized flagship for deep and fast reasoning.',
+    contextWindow: CONTEXT_WINDOW_256K,
+    maxOutputTokens: MAX_OUTPUT_32K,
+    supportsVision: true,
+    supportsTools: true,
+    tier: 'premium' as const,
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt51CodexMini,
+    name: 'GPT-5.1-Codex-Mini',
+    modelString: CODEX_MODEL_MAP.gpt51CodexMini,
+    provider: 'openai',
+    description: 'Optimized for codex. Cheaper, faster, but less capable.',
+    contextWindow: CONTEXT_WINDOW_128K,
+    maxOutputTokens: MAX_OUTPUT_16K,
+    supportsVision: true,
+    supportsTools: true,
+    tier: 'basic' as const,
+    hasReasoning: false,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt51Codex,
+    name: 'GPT-5.1-Codex',
+    modelString: CODEX_MODEL_MAP.gpt51Codex,
+    provider: 'openai',
+    description: 'Original GPT-5.1 Codex agentic coding model.',
+    contextWindow: CONTEXT_WINDOW_256K,
+    maxOutputTokens: MAX_OUTPUT_32K,
+    supportsVision: true,
+    supportsTools: true,
+    tier: 'standard' as const,
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt5Codex,
+    name: 'GPT-5-Codex',
+    modelString: CODEX_MODEL_MAP.gpt5Codex,
+    provider: 'openai',
+    description: 'Original GPT-5 Codex model.',
+    contextWindow: CONTEXT_WINDOW_128K,
+    maxOutputTokens: MAX_OUTPUT_16K,
+    supportsVision: true,
+    supportsTools: true,
+    tier: 'standard' as const,
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt5CodexMini,
+    name: 'GPT-5-Codex-Mini',
+    modelString: CODEX_MODEL_MAP.gpt5CodexMini,
+    provider: 'openai',
+    description: 'Smaller, cheaper GPT-5 Codex variant.',
+    contextWindow: CONTEXT_WINDOW_128K,
+    maxOutputTokens: MAX_OUTPUT_16K,
+    supportsVision: true,
+    supportsTools: true,
+    tier: 'basic' as const,
+    hasReasoning: false,
+  },
+
+  // ========== General-Purpose GPT Models ==========
+  {
+    id: CODEX_MODEL_MAP.gpt52,
+    name: 'GPT-5.2',
+    modelString: CODEX_MODEL_MAP.gpt52,
+    provider: 'openai',
+    description: 'Latest frontier model with improvements across knowledge, reasoning and coding.',
+    contextWindow: CONTEXT_WINDOW_256K,
+    maxOutputTokens: MAX_OUTPUT_32K,
+    supportsVision: true,
+    supportsTools: true,
+    tier: 'standard' as const,
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt51,
+    name: 'GPT-5.1',
+    modelString: CODEX_MODEL_MAP.gpt51,
+    provider: 'openai',
+    description: 'Great for coding and agentic tasks across domains.',
+    contextWindow: CONTEXT_WINDOW_256K,
+    maxOutputTokens: MAX_OUTPUT_32K,
+    supportsVision: true,
+    supportsTools: true,
+    tier: 'standard' as const,
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt5,
+    name: 'GPT-5',
+    modelString: CODEX_MODEL_MAP.gpt5,
+    provider: 'openai',
+    description: 'Base GPT-5 model.',
+    contextWindow: CONTEXT_WINDOW_128K,
+    maxOutputTokens: MAX_OUTPUT_16K,
+    supportsVision: true,
+    supportsTools: true,
+    tier: 'standard' as const,
+    hasReasoning: true,
+  },
+];
+
+/**
+ * Get model definition by ID
+ */
+export function getCodexModelById(modelId: string): ModelDefinition | undefined {
+  return CODEX_MODELS.find((m) => m.id === modelId || m.modelString === modelId);
+}
+
+/**
+ * Get all models that support reasoning
+ */
+export function getReasoningModels(): ModelDefinition[] {
+  return CODEX_MODELS.filter((m) => m.hasReasoning);
+}
+
+/**
+ * Get models by tier
+ */
+export function getModelsByTier(tier: 'premium' | 'standard' | 'basic'): ModelDefinition[] {
+  return CODEX_MODELS.filter((m) => m.tier === tier);
+}
diff --git a/temp_repo/apps/server/src/providers/codex-provider.ts b/temp_repo/apps/server/src/providers/codex-provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3288f42ffd7907e43a488a69e4b23ddb5ca715c2
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/codex-provider.ts
@@ -0,0 +1,1229 @@
+/**
+ * Codex Provider - Executes queries using Codex CLI
+ *
+ * Spawns the Codex CLI and converts JSONL output into ProviderMessage format.
+ */
+
+import path from 'path';
+import { BaseProvider } from './base-provider.js';
+import {
+  spawnJSONLProcess,
+  spawnProcess,
+  findCodexCliPath,
+  getCodexAuthIndicators,
+  secureFs,
+  getDataDirectory,
+  getCodexConfigDir,
+} from '@automaker/platform';
+import { checkCodexAuthentication } from '../lib/codex-auth.js';
+import {
+  formatHistoryAsText,
+  extractTextFromContent,
+  classifyError,
+  getUserFriendlyErrorMessage,
+  createLogger,
+} from '@automaker/utils';
+import type {
+  ExecuteOptions,
+  ProviderMessage,
+  InstallationStatus,
+  ModelDefinition,
+} from './types.js';
+import {
+  supportsReasoningEffort,
+  validateBareModelId,
+  calculateReasoningTimeout,
+  type CodexApprovalPolicy,
+  type CodexSandboxMode,
+  type CodexAuthStatus,
+} from '@automaker/types';
+import { CodexConfigManager } from './codex-config-manager.js';
+import { executeCodexSdkQuery } from './codex-sdk-client.js';
+import {
+  resolveCodexToolCall,
+  extractCodexTodoItems,
+  getCodexTodoToolName,
+} from './codex-tool-mapping.js';
+import { SettingsService } from '../services/settings-service.js';
+import { createTempEnvOverride } from '../lib/auth-utils.js';
+import { checkSandboxCompatibility } from '../lib/sdk-options.js';
+import { CODEX_MODELS } from './codex-models.js';
+
+const CODEX_COMMAND = 'codex';
+const CODEX_EXEC_SUBCOMMAND = 'exec';
+const CODEX_RESUME_SUBCOMMAND = 'resume';
+const CODEX_JSON_FLAG = '--json';
+const CODEX_MODEL_FLAG = '--model';
+const CODEX_VERSION_FLAG = '--version';
+const CODEX_CONFIG_FLAG = '--config';
+const CODEX_ADD_DIR_FLAG = '--add-dir';
+const CODEX_OUTPUT_SCHEMA_FLAG = '--output-schema';
+const CODEX_SKIP_GIT_REPO_CHECK_FLAG = '--skip-git-repo-check';
+const CODEX_REASONING_EFFORT_KEY = 'reasoning_effort';
+const CODEX_YOLO_FLAG = '--dangerously-bypass-approvals-and-sandbox';
+const OPENAI_API_KEY_ENV = 'OPENAI_API_KEY';
+const CODEX_EXECUTION_MODE_CLI = 'cli';
+const CODEX_EXECUTION_MODE_SDK = 'sdk';
+const ERROR_CODEX_CLI_REQUIRED =
+  'Codex CLI is required for tool-enabled requests. Please install Codex CLI and run `codex login`.';
+const ERROR_CODEX_AUTH_REQUIRED = "Codex authentication is required. Please run 'codex login'.";
+const ERROR_CODEX_SDK_AUTH_REQUIRED = 'OpenAI API key required for Codex SDK execution.';
+
+const CODEX_EVENT_TYPES = {
+  itemCompleted: 'item.completed',
+  itemStarted: 'item.started',
+  itemUpdated: 'item.updated',
+  turnCompleted: 'turn.completed',
+  error: 'error',
+} as const;
+
+const CODEX_ITEM_TYPES = {
+  reasoning: 'reasoning',
+  agentMessage: 'agent_message',
+  commandExecution: 'command_execution',
+  todoList: 'todo_list',
+} as const;
+
+const SYSTEM_PROMPT_LABEL = 'System instructions';
+const HISTORY_HEADER = 'Current request:\n';
+const TEXT_ENCODING = 'utf-8';
+/**
+ * Default timeout for Codex CLI operations in milliseconds.
+ * This is the "no output" timeout - if the CLI doesn't produce any JSONL output
+ * for this duration, the process is killed. For reasoning models with high
+ * reasoning effort, this timeout is dynamically extended via calculateReasoningTimeout().
+ *
+ * For feature generation (which can generate 50+ features), we use a much longer
+ * base timeout (5 minutes) since Codex models are slower at generating large JSON responses.
+ *
+ * @see calculateReasoningTimeout from @automaker/types
+ */
+const CODEX_CLI_TIMEOUT_MS = 120000; // 2 minutes — matches CLI provider base timeout
+const CODEX_FEATURE_GENERATION_BASE_TIMEOUT_MS = 300000; // 5 minutes for feature generation
+const SYSTEM_PROMPT_SEPARATOR = '\n\n';
+const CODEX_INSTRUCTIONS_DIR = '.codex';
+const CODEX_INSTRUCTIONS_SECTION = 'Codex Project Instructions';
+const CODEX_INSTRUCTIONS_PATH_LABEL = 'Path';
+const CODEX_INSTRUCTIONS_SOURCE_LABEL = 'Source';
+const CODEX_INSTRUCTIONS_USER_SOURCE = 'User instructions';
+const CODEX_INSTRUCTIONS_PROJECT_SOURCE = 'Project instructions';
+const CODEX_USER_INSTRUCTIONS_FILE = 'AGENTS.md';
+const CODEX_PROJECT_INSTRUCTIONS_FILES = ['AGENTS.md'] as const;
+const CODEX_SETTINGS_DIR_FALLBACK = './data';
+const DEFAULT_CODEX_AUTO_LOAD_AGENTS = false;
+const DEFAULT_CODEX_SANDBOX_MODE: CodexSandboxMode = 'workspace-write';
+const DEFAULT_CODEX_APPROVAL_POLICY: CodexApprovalPolicy = 'on-request';
+const TOOL_USE_ID_PREFIX = 'codex-tool-';
+const ITEM_ID_KEYS = ['id', 'item_id', 'call_id', 'tool_use_id', 'command_id'] as const;
+const EVENT_ID_KEYS = ['id', 'event_id', 'request_id'] as const;
+const COMMAND_OUTPUT_FIELDS = ['output', 'stdout', 'stderr', 'result'] as const;
+const COMMAND_OUTPUT_SEPARATOR = '\n';
+const OUTPUT_SCHEMA_FILENAME = 'output-schema.json';
+const OUTPUT_SCHEMA_INDENT_SPACES = 2;
+const IMAGE_TEMP_DIR = '.codex-images';
+const IMAGE_FILE_PREFIX = 'image-';
+const IMAGE_FILE_EXT = '.png';
+const DEFAULT_ALLOWED_TOOLS = [
+  'Read',
+  'Write',
+  'Edit',
+  'MultiEdit',
+  'Glob',
+  'Grep',
+  'LS',
+  'Bash',
+  'WebSearch',
+  'WebFetch',
+  'TodoWrite',
+  'Task',
+  'Skill',
+] as const;
+const SEARCH_TOOL_NAMES = new Set(['WebSearch', 'WebFetch']);
+const MIN_MAX_TURNS = 1;
+const CONFIG_KEY_MAX_TURNS = 'max_turns';
+const CONSTRAINTS_SECTION_TITLE = 'Codex Execution Constraints';
+const CONSTRAINTS_MAX_TURNS_LABEL = 'Max turns';
+const CONSTRAINTS_ALLOWED_TOOLS_LABEL = 'Allowed tools';
+const CONSTRAINTS_OUTPUT_SCHEMA_LABEL = 'Output format';
+const CONSTRAINTS_SESSION_ID_LABEL = 'Session ID';
+const CONSTRAINTS_NO_TOOLS_VALUE = 'none';
+const CONSTRAINTS_OUTPUT_SCHEMA_VALUE = 'Respond with JSON that matches the provided schema.';
+
+type CodexExecutionMode = typeof CODEX_EXECUTION_MODE_CLI | typeof CODEX_EXECUTION_MODE_SDK;
+type CodexExecutionPlan = {
+  mode: CodexExecutionMode;
+  cliPath: string | null;
+  openAiApiKey?: string | null;
+};
+
+const ALLOWED_ENV_VARS = [
+  OPENAI_API_KEY_ENV,
+  'PATH',
+  'HOME',
+  'SHELL',
+  'TERM',
+  'USER',
+  'LANG',
+  'LC_ALL',
+];
+
+function buildEnv(): Record<string, string> {
+  const env: Record<string, string> = {};
+  for (const key of ALLOWED_ENV_VARS) {
+    const value = process.env[key];
+    if (value) {
+      env[key] = value;
+    }
+  }
+  return env;
+}
+
+async function resolveOpenAiApiKey(): Promise<string | null> {
+  const envKey = process.env[OPENAI_API_KEY_ENV];
+  if (envKey) {
+    return envKey;
+  }
+
+  try {
+    const settingsService = new SettingsService(getCodexSettingsDir());
+    const credentials = await settingsService.getCredentials();
+    const storedKey = credentials.apiKeys.openai?.trim();
+    return storedKey ? storedKey : null;
+  } catch {
+    return null;
+  }
+}
+
+function hasMcpServersConfigured(options: ExecuteOptions): boolean {
+  return Boolean(options.mcpServers && Object.keys(options.mcpServers).length > 0);
+}
+
+function isNoToolsRequested(options: ExecuteOptions): boolean {
+  return Array.isArray(options.allowedTools) && options.allowedTools.length === 0;
+}
+
+function isSdkEligible(options: ExecuteOptions): boolean {
+  return isNoToolsRequested(options) && !hasMcpServersConfigured(options);
+}
+
+function isSdkEligibleWithApiKey(options: ExecuteOptions): boolean {
+  // When using an API key (not CLI OAuth), prefer SDK over CLI to avoid OAuth issues.
+  // SDK mode is used when MCP servers are not configured (MCP requires CLI).
+  // Tool requests are handled by the SDK, so we allow SDK mode even with tools.
+  return !hasMcpServersConfigured(options);
+}
+
+async function resolveCodexExecutionPlan(options: ExecuteOptions): Promise<CodexExecutionPlan> {
+  const cliPath = await findCodexCliPath();
+  const authIndicators = await getCodexAuthIndicators();
+  const openAiApiKey = await resolveOpenAiApiKey();
+  const hasApiKey = Boolean(openAiApiKey);
+  const cliAvailable = Boolean(cliPath);
+  // CLI OAuth login takes priority: if the user has logged in via `codex login`,
+  // use the CLI regardless of whether an API key is also stored.
+  // hasOAuthToken = OAuth session from `codex login`
+  // authIndicators.hasApiKey = API key stored in Codex's own auth file (via `codex login --api-key`)
+  // Both are "CLI-native" auth — distinct from an API key stored in Automaker's credentials.
+  const hasCliNativeAuth = authIndicators.hasOAuthToken || authIndicators.hasApiKey;
+  const sdkEligible = isSdkEligible(options);
+
+  // If CLI is available and the user authenticated via the CLI (`codex login`),
+  // prefer CLI mode over SDK. This ensures `codex login` sessions take priority
+  // over API keys stored in Automaker's credentials.
+  if (cliAvailable && hasCliNativeAuth) {
+    return {
+      mode: CODEX_EXECUTION_MODE_CLI,
+      cliPath,
+      openAiApiKey,
+    };
+  }
+
+  // No CLI-native auth — prefer SDK when an API key is available.
+  // Using SDK with an API key avoids OAuth issues that can arise with the CLI.
+  // MCP servers still require CLI mode since the SDK doesn't support MCP.
+  if (hasApiKey && isSdkEligibleWithApiKey(options)) {
+    return {
+      mode: CODEX_EXECUTION_MODE_SDK,
+      cliPath,
+      openAiApiKey,
+    };
+  }
+
+  // MCP servers are requested with an API key but no CLI-native auth — use CLI mode
+  // with the API key passed as an environment variable.
+  if (hasApiKey && cliAvailable) {
+    return {
+      mode: CODEX_EXECUTION_MODE_CLI,
+      cliPath,
+      openAiApiKey,
+    };
+  }
+
+  if (sdkEligible) {
+    if (!cliAvailable) {
+      throw new Error(ERROR_CODEX_SDK_AUTH_REQUIRED);
+    }
+  }
+
+  if (!cliAvailable) {
+    throw new Error(ERROR_CODEX_CLI_REQUIRED);
+  }
+
+  // At this point, neither hasCliNativeAuth nor hasApiKey is true,
+  // so authentication is required regardless.
+  throw new Error(ERROR_CODEX_AUTH_REQUIRED);
+}
+
+function getEventType(event: Record<string, unknown>): string | null {
+  if (typeof event.type === 'string') {
+    return event.type;
+  }
+  if (typeof event.event === 'string') {
+    return event.event;
+  }
+  return null;
+}
+
+function extractText(value: unknown): string | null {
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    return value
+      .map((item) => extractText(item))
+      .filter(Boolean)
+      .join('\n');
+  }
+  if (value && typeof value === 'object') {
+    const record = value as Record<string, unknown>;
+    if (typeof record.text === 'string') {
+      return record.text;
+    }
+    if (typeof record.content === 'string') {
+      return record.content;
+    }
+    if (typeof record.message === 'string') {
+      return record.message;
+    }
+  }
+  return null;
+}
+
+function extractCommandText(item: Record<string, unknown>): string | null {
+  const direct = extractText(item.command ?? item.input ?? item.content);
+  if (direct) {
+    return direct;
+  }
+  return null;
+}
+
+function extractCommandOutput(item: Record<string, unknown>): string | null {
+  const outputs: string[] = [];
+  for (const field of COMMAND_OUTPUT_FIELDS) {
+    const value = item[field];
+    const text = extractText(value);
+    if (text) {
+      outputs.push(text);
+    }
+  }
+
+  if (outputs.length === 0) {
+    return null;
+  }
+
+  const uniqueOutputs = outputs.filter((output, index) => outputs.indexOf(output) === index);
+  return uniqueOutputs.join(COMMAND_OUTPUT_SEPARATOR);
+}
+
+function extractItemType(item: Record<string, unknown>): string | null {
+  if (typeof item.type === 'string') {
+    return item.type;
+  }
+  if (typeof item.kind === 'string') {
+    return item.kind;
+  }
+  return null;
+}
+
+function resolveSystemPrompt(systemPrompt?: unknown): string | null {
+  if (!systemPrompt) {
+    return null;
+  }
+  if (typeof systemPrompt === 'string') {
+    return systemPrompt;
+  }
+  if (typeof systemPrompt === 'object' && systemPrompt !== null) {
+    const record = systemPrompt as Record<string, unknown>;
+    if (typeof record.append === 'string') {
+      return record.append;
+    }
+  }
+  return null;
+}
+
+function buildPromptText(options: ExecuteOptions): string {
+  return typeof options.prompt === 'string'
+    ? options.prompt
+    : extractTextFromContent(options.prompt);
+}
+
+function buildCombinedPrompt(options: ExecuteOptions, systemPromptText?: string | null): string {
+  const promptText = buildPromptText(options);
+  const historyText = options.conversationHistory
+    ? formatHistoryAsText(options.conversationHistory)
+    : '';
+  const resolvedSystemPrompt = systemPromptText ?? resolveSystemPrompt(options.systemPrompt);
+
+  const systemSection = resolvedSystemPrompt
+    ? `${SYSTEM_PROMPT_LABEL}:\n${resolvedSystemPrompt}\n\n`
+    : '';
+
+  return `${historyText}${systemSection}${HISTORY_HEADER}${promptText}`;
+}
+
+function buildResumePrompt(options: ExecuteOptions): string {
+  const promptText = buildPromptText(options);
+  return `${HISTORY_HEADER}${promptText}`;
+}
+
+function formatConfigValue(value: string | number | boolean): string {
+  return String(value);
+}
+
+function buildConfigOverrides(
+  overrides: Array<{ key: string; value: string | number | boolean }>
+): string[] {
+  const args: string[] = [];
+  for (const override of overrides) {
+    args.push(CODEX_CONFIG_FLAG, `${override.key}=${formatConfigValue(override.value)}`);
+  }
+  return args;
+}
+
+function resolveMaxTurns(maxTurns?: number): number | null {
+  if (typeof maxTurns !== 'number' || Number.isNaN(maxTurns) || !Number.isFinite(maxTurns)) {
+    return null;
+  }
+  const normalized = Math.floor(maxTurns);
+  return normalized >= MIN_MAX_TURNS ? normalized : null;
+}
+
+function resolveSearchEnabled(allowedTools: string[], restrictTools: boolean): boolean {
+  const toolsToCheck = restrictTools ? allowedTools : Array.from(DEFAULT_ALLOWED_TOOLS);
+  return toolsToCheck.some((tool) => SEARCH_TOOL_NAMES.has(tool));
+}
+
+function buildCodexConstraintsPrompt(
+  options: ExecuteOptions,
+  config: {
+    allowedTools: string[];
+    restrictTools: boolean;
+    maxTurns: number | null;
+    hasOutputSchema: boolean;
+  }
+): string | null {
+  const lines: string[] = [];
+
+  if (config.maxTurns !== null) {
+    lines.push(`${CONSTRAINTS_MAX_TURNS_LABEL}: ${config.maxTurns}`);
+  }
+
+  if (config.restrictTools) {
+    const allowed =
+      config.allowedTools.length > 0 ? config.allowedTools.join(', ') : CONSTRAINTS_NO_TOOLS_VALUE;
+    lines.push(`${CONSTRAINTS_ALLOWED_TOOLS_LABEL}: ${allowed}`);
+  }
+
+  if (config.hasOutputSchema) {
+    lines.push(`${CONSTRAINTS_OUTPUT_SCHEMA_LABEL}: ${CONSTRAINTS_OUTPUT_SCHEMA_VALUE}`);
+  }
+
+  if (options.sdkSessionId) {
+    lines.push(`${CONSTRAINTS_SESSION_ID_LABEL}: ${options.sdkSessionId}`);
+  }
+
+  if (lines.length === 0) {
+    return null;
+  }
+
+  return `## ${CONSTRAINTS_SECTION_TITLE}\n${lines.map((line) => `- ${line}`).join('\n')}`;
+}
+
+async function writeOutputSchemaFile(
+  cwd: string,
+  outputFormat?: ExecuteOptions['outputFormat']
+): Promise<string | null> {
+  if (!outputFormat || outputFormat.type !== 'json_schema') {
+    return null;
+  }
+  if (!outputFormat.schema || typeof outputFormat.schema !== 'object') {
+    throw new Error('Codex output schema must be a JSON object.');
+  }
+
+  const schemaDir = path.join(cwd, CODEX_INSTRUCTIONS_DIR);
+  await secureFs.mkdir(schemaDir, { recursive: true });
+  const schemaPath = path.join(schemaDir, OUTPUT_SCHEMA_FILENAME);
+  const schemaContent = JSON.stringify(outputFormat.schema, null, OUTPUT_SCHEMA_INDENT_SPACES);
+  await secureFs.writeFile(schemaPath, schemaContent, TEXT_ENCODING);
+  return schemaPath;
+}
+
+type ImageBlock = {
+  type: 'image';
+  source: {
+    type: string;
+    media_type: string;
+    data: string;
+  };
+};
+
+function extractImageBlocks(prompt: ExecuteOptions['prompt']): ImageBlock[] {
+  if (typeof prompt === 'string') {
+    return [];
+  }
+  if (!Array.isArray(prompt)) {
+    return [];
+  }
+
+  const images: ImageBlock[] = [];
+  for (const block of prompt) {
+    if (
+      block &&
+      typeof block === 'object' &&
+      'type' in block &&
+      block.type === 'image' &&
+      'source' in block &&
+      block.source &&
+      typeof block.source === 'object' &&
+      'data' in block.source &&
+      'media_type' in block.source
+    ) {
+      images.push(block as ImageBlock);
+    }
+  }
+  return images;
+}
+
+async function writeImageFiles(cwd: string, imageBlocks: ImageBlock[]): Promise<string[]> {
+  if (imageBlocks.length === 0) {
+    return [];
+  }
+
+  const imageDir = path.join(cwd, CODEX_INSTRUCTIONS_DIR, IMAGE_TEMP_DIR);
+  await secureFs.mkdir(imageDir, { recursive: true });
+
+  const imagePaths: string[] = [];
+  for (let i = 0; i < imageBlocks.length; i++) {
+    const imageBlock = imageBlocks[i];
+    const imageName = `${IMAGE_FILE_PREFIX}${Date.now()}-${i}${IMAGE_FILE_EXT}`;
+    const imagePath = path.join(imageDir, imageName);
+
+    // Convert base64 to buffer
+    const imageData = Buffer.from(imageBlock.source.data, 'base64');
+    await secureFs.writeFile(imagePath, imageData);
+    imagePaths.push(imagePath);
+  }
+
+  return imagePaths;
+}
+
+function normalizeIdentifier(value: unknown): string | null {
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    return trimmed ? trimmed : null;
+  }
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return String(value);
+  }
+  return null;
+}
+
+function getIdentifierFromRecord(
+  record: Record<string, unknown>,
+  keys: readonly string[]
+): string | null {
+  for (const key of keys) {
+    const id = normalizeIdentifier(record[key]);
+    if (id) {
+      return id;
+    }
+  }
+  return null;
+}
+
+function getItemIdentifier(
+  event: Record<string, unknown>,
+  item: Record<string, unknown>
+): string | null {
+  return (
+    getIdentifierFromRecord(item, ITEM_ID_KEYS) ?? getIdentifierFromRecord(event, EVENT_ID_KEYS)
+  );
+}
+
+class CodexToolUseTracker {
+  private readonly toolUseIdsByItem = new Map<string, string>();
+  private readonly anonymousToolUses: string[] = [];
+  private sequence = 0;
+
+  register(event: Record<string, unknown>, item: Record<string, unknown>): string {
+    const itemId = getItemIdentifier(event, item);
+    const toolUseId = this.nextToolUseId();
+    if (itemId) {
+      this.toolUseIdsByItem.set(itemId, toolUseId);
+    } else {
+      this.anonymousToolUses.push(toolUseId);
+    }
+    return toolUseId;
+  }
+
+  resolve(event: Record<string, unknown>, item: Record<string, unknown>): string | null {
+    const itemId = getItemIdentifier(event, item);
+    if (itemId) {
+      const toolUseId = this.toolUseIdsByItem.get(itemId);
+      if (toolUseId) {
+        this.toolUseIdsByItem.delete(itemId);
+        return toolUseId;
+      }
+    }
+
+    if (this.anonymousToolUses.length > 0) {
+      return this.anonymousToolUses.shift() || null;
+    }
+
+    return null;
+  }
+
+  private nextToolUseId(): string {
+    this.sequence += 1;
+    return `${TOOL_USE_ID_PREFIX}${this.sequence}`;
+  }
+}
+
+type CodexCliSettings = {
+  autoLoadAgents: boolean;
+  sandboxMode: CodexSandboxMode;
+  approvalPolicy: CodexApprovalPolicy;
+  enableWebSearch: boolean;
+  enableImages: boolean;
+  additionalDirs: string[];
+  threadId?: string;
+};
+
+function getCodexSettingsDir(): string {
+  const configured = getDataDirectory() ?? process.env.DATA_DIR;
+  return configured ? path.resolve(configured) : path.resolve(CODEX_SETTINGS_DIR_FALLBACK);
+}
+
+async function loadCodexCliSettings(
+  overrides?: ExecuteOptions['codexSettings']
+): Promise<CodexCliSettings> {
+  const defaults: CodexCliSettings = {
+    autoLoadAgents: DEFAULT_CODEX_AUTO_LOAD_AGENTS,
+    sandboxMode: DEFAULT_CODEX_SANDBOX_MODE,
+    approvalPolicy: DEFAULT_CODEX_APPROVAL_POLICY,
+    enableWebSearch: false,
+    enableImages: true,
+    additionalDirs: [],
+    threadId: undefined,
+  };
+
+  try {
+    const settingsService = new SettingsService(getCodexSettingsDir());
+    const settings = await settingsService.getGlobalSettings();
+    const resolved: CodexCliSettings = {
+      autoLoadAgents: settings.codexAutoLoadAgents ?? defaults.autoLoadAgents,
+      sandboxMode: settings.codexSandboxMode ?? defaults.sandboxMode,
+      approvalPolicy: settings.codexApprovalPolicy ?? defaults.approvalPolicy,
+      enableWebSearch: settings.codexEnableWebSearch ?? defaults.enableWebSearch,
+      enableImages: settings.codexEnableImages ?? defaults.enableImages,
+      additionalDirs: settings.codexAdditionalDirs ?? defaults.additionalDirs,
+      threadId: settings.codexThreadId,
+    };
+
+    if (!overrides) {
+      return resolved;
+    }
+
+    return {
+      autoLoadAgents: overrides.autoLoadAgents ?? resolved.autoLoadAgents,
+      sandboxMode: overrides.sandboxMode ?? resolved.sandboxMode,
+      approvalPolicy: overrides.approvalPolicy ?? resolved.approvalPolicy,
+      enableWebSearch: overrides.enableWebSearch ?? resolved.enableWebSearch,
+      enableImages: overrides.enableImages ?? resolved.enableImages,
+      additionalDirs: overrides.additionalDirs ?? resolved.additionalDirs,
+      threadId: overrides.threadId ?? resolved.threadId,
+    };
+  } catch {
+    return {
+      autoLoadAgents: overrides?.autoLoadAgents ?? defaults.autoLoadAgents,
+      sandboxMode: overrides?.sandboxMode ?? defaults.sandboxMode,
+      approvalPolicy: overrides?.approvalPolicy ?? defaults.approvalPolicy,
+      enableWebSearch: overrides?.enableWebSearch ?? defaults.enableWebSearch,
+      enableImages: overrides?.enableImages ?? defaults.enableImages,
+      additionalDirs: overrides?.additionalDirs ?? defaults.additionalDirs,
+      threadId: overrides?.threadId ?? defaults.threadId,
+    };
+  }
+}
+
+function buildCodexInstructionsPrompt(
+  filePath: string,
+  content: string,
+  sourceLabel: string
+): string {
+  return `## ${CODEX_INSTRUCTIONS_SECTION}\n**${CODEX_INSTRUCTIONS_SOURCE_LABEL}:** ${sourceLabel}\n**${CODEX_INSTRUCTIONS_PATH_LABEL}:** \`${filePath}\`\n\n${content}`;
+}
+
+async function readCodexInstructionFile(filePath: string): Promise<string | null> {
+  try {
+    const raw = await secureFs.readFile(filePath, TEXT_ENCODING);
+    const content = String(raw).trim();
+    return content ? content : null;
+  } catch {
+    return null;
+  }
+}
+
+async function loadCodexInstructions(cwd: string, enabled: boolean): Promise<string | null> {
+  if (!enabled) {
+    return null;
+  }
+
+  const sources: Array<{ path: string; content: string; sourceLabel: string }> = [];
+  const userInstructionsPath = path.join(getCodexConfigDir(), CODEX_USER_INSTRUCTIONS_FILE);
+  const userContent = await readCodexInstructionFile(userInstructionsPath);
+  if (userContent) {
+    sources.push({
+      path: userInstructionsPath,
+      content: userContent,
+      sourceLabel: CODEX_INSTRUCTIONS_USER_SOURCE,
+    });
+  }
+
+  for (const fileName of CODEX_PROJECT_INSTRUCTIONS_FILES) {
+    const projectPath = path.join(cwd, CODEX_INSTRUCTIONS_DIR, fileName);
+    const projectContent = await readCodexInstructionFile(projectPath);
+    if (projectContent) {
+      sources.push({
+        path: projectPath,
+        content: projectContent,
+        sourceLabel: CODEX_INSTRUCTIONS_PROJECT_SOURCE,
+      });
+    }
+  }
+
+  if (sources.length === 0) {
+    return null;
+  }
+
+  const seen = new Set<string>();
+  const uniqueSources = sources.filter((source) => {
+    const normalized = source.content.trim();
+    if (seen.has(normalized)) {
+      return false;
+    }
+    seen.add(normalized);
+    return true;
+  });
+
+  return uniqueSources
+    .map((source) => buildCodexInstructionsPrompt(source.path, source.content, source.sourceLabel))
+    .join('\n\n');
+}
+
+const logger = createLogger('CodexProvider');
+
+export class CodexProvider extends BaseProvider {
+  getName(): string {
+    return 'codex';
+  }
+
+  async *executeQuery(options: ExecuteOptions): AsyncGenerator<ProviderMessage> {
+    // Validate that model doesn't have a provider prefix (except codex- which should already be stripped)
+    // AgentService should strip prefixes before passing to providers
+    validateBareModelId(options.model, 'CodexProvider', 'codex');
+
+    try {
+      const mcpServers = options.mcpServers ?? {};
+      const hasMcpServers = Object.keys(mcpServers).length > 0;
+      const codexSettings = await loadCodexCliSettings(options.codexSettings);
+      const codexInstructions = await loadCodexInstructions(
+        options.cwd,
+        codexSettings.autoLoadAgents
+      );
+      const baseSystemPrompt = resolveSystemPrompt(options.systemPrompt);
+      const resolvedMaxTurns = resolveMaxTurns(options.maxTurns);
+      if (resolvedMaxTurns === null && options.maxTurns === undefined) {
+        logger.warn(
+          `[executeQuery] maxTurns not provided — Codex CLI will use its internal default. ` +
+            `This may cause premature completion. Model: ${options.model}`
+        );
+      } else {
+        logger.info(
+          `[executeQuery] maxTurns: requested=${options.maxTurns}, resolved=${resolvedMaxTurns}, model=${options.model}`
+        );
+      }
+      const resolvedAllowedTools = options.allowedTools ?? Array.from(DEFAULT_ALLOWED_TOOLS);
+      const restrictTools = !hasMcpServers || options.mcpUnrestrictedTools === false;
+      const wantsOutputSchema = Boolean(
+        options.outputFormat && options.outputFormat.type === 'json_schema'
+      );
+      const constraintsPrompt = buildCodexConstraintsPrompt(options, {
+        allowedTools: resolvedAllowedTools,
+        restrictTools,
+        maxTurns: resolvedMaxTurns,
+        hasOutputSchema: wantsOutputSchema,
+      });
+      const systemPromptParts = [codexInstructions, baseSystemPrompt, constraintsPrompt].filter(
+        (part): part is string => Boolean(part)
+      );
+      const combinedSystemPrompt = systemPromptParts.length
+        ? systemPromptParts.join(SYSTEM_PROMPT_SEPARATOR)
+        : null;
+
+      const executionPlan = await resolveCodexExecutionPlan(options);
+      if (executionPlan.mode === CODEX_EXECUTION_MODE_SDK) {
+        const cleanupEnv = executionPlan.openAiApiKey
+          ? createTempEnvOverride({ [OPENAI_API_KEY_ENV]: executionPlan.openAiApiKey })
+          : null;
+        try {
+          yield* executeCodexSdkQuery(options, combinedSystemPrompt);
+        } finally {
+          cleanupEnv?.();
+        }
+        return;
+      }
+
+      if (hasMcpServers) {
+        const configManager = new CodexConfigManager();
+        await configManager.configureMcpServers(options.cwd, options.mcpServers!);
+      }
+
+      const toolUseTracker = new CodexToolUseTracker();
+      const sandboxCheck = checkSandboxCompatibility(
+        options.cwd,
+        codexSettings.sandboxMode !== 'danger-full-access'
+      );
+      if (!sandboxCheck.enabled && sandboxCheck.message) {
+        console.warn(`[CodexProvider] ${sandboxCheck.message}`);
+      }
+      const searchEnabled =
+        codexSettings.enableWebSearch || resolveSearchEnabled(resolvedAllowedTools, restrictTools);
+      const isResumeQuery = Boolean(options.sdkSessionId);
+      const schemaPath = isResumeQuery
+        ? null
+        : await writeOutputSchemaFile(options.cwd, options.outputFormat);
+      const imageBlocks =
+        !isResumeQuery && codexSettings.enableImages ? extractImageBlocks(options.prompt) : [];
+      const imagePaths = isResumeQuery ? [] : await writeImageFiles(options.cwd, imageBlocks);
+      const approvalPolicy =
+        hasMcpServers && options.mcpAutoApproveTools !== undefined
+          ? options.mcpAutoApproveTools
+            ? 'never'
+            : 'on-request'
+          : codexSettings.approvalPolicy;
+      const promptText = isResumeQuery
+        ? buildResumePrompt(options)
+        : buildCombinedPrompt(options, combinedSystemPrompt);
+      const commandPath = executionPlan.cliPath || CODEX_COMMAND;
+
+      // Build config overrides for max turns and reasoning effort
+      const overrides: Array<{ key: string; value: string | number | boolean }> = [];
+      if (resolvedMaxTurns !== null) {
+        overrides.push({ key: CONFIG_KEY_MAX_TURNS, value: resolvedMaxTurns });
+      }
+
+      // Add reasoning effort if model supports it and reasoningEffort is specified
+      if (
+        options.reasoningEffort &&
+        supportsReasoningEffort(options.model) &&
+        options.reasoningEffort !== 'none'
+      ) {
+        overrides.push({ key: CODEX_REASONING_EFFORT_KEY, value: options.reasoningEffort });
+      }
+
+      // Add approval policy
+      overrides.push({ key: 'approval_policy', value: approvalPolicy });
+
+      // Add web search if enabled
+      if (searchEnabled) {
+        overrides.push({ key: 'features.web_search_request', value: true });
+      }
+
+      const configOverrideArgs = buildConfigOverrides(overrides);
+      const preExecArgs: string[] = [];
+
+      // Add additional directories with write access
+      if (
+        !isResumeQuery &&
+        codexSettings.additionalDirs &&
+        codexSettings.additionalDirs.length > 0
+      ) {
+        for (const dir of codexSettings.additionalDirs) {
+          preExecArgs.push(CODEX_ADD_DIR_FLAG, dir);
+        }
+      }
+
+      // If images were written to disk, add the image directory so the CLI can access them.
+      // Note: imagePaths is set to [] when isResumeQuery is true, so this check is sufficient.
+      if (imagePaths.length > 0) {
+        const imageDir = path.join(options.cwd, CODEX_INSTRUCTIONS_DIR, IMAGE_TEMP_DIR);
+        preExecArgs.push(CODEX_ADD_DIR_FLAG, imageDir);
+      }
+
+      // Model is already bare (no prefix) - validated by executeQuery
+      const codexCommand = isResumeQuery
+        ? [CODEX_EXEC_SUBCOMMAND, CODEX_RESUME_SUBCOMMAND]
+        : [CODEX_EXEC_SUBCOMMAND];
+
+      const args = [
+        ...codexCommand,
+        CODEX_YOLO_FLAG,
+        CODEX_SKIP_GIT_REPO_CHECK_FLAG,
+        ...preExecArgs,
+        CODEX_MODEL_FLAG,
+        options.model,
+        CODEX_JSON_FLAG,
+        ...configOverrideArgs,
+        ...(schemaPath ? [CODEX_OUTPUT_SCHEMA_FLAG, schemaPath] : []),
+        ...(options.sdkSessionId ? [options.sdkSessionId] : []),
+        '-', // Read prompt from stdin to avoid shell escaping issues
+      ];
+
+      const envOverrides = buildEnv();
+      if (executionPlan.openAiApiKey && !envOverrides[OPENAI_API_KEY_ENV]) {
+        envOverrides[OPENAI_API_KEY_ENV] = executionPlan.openAiApiKey;
+      }
+
+      // Calculate dynamic timeout based on reasoning effort.
+      // Higher reasoning effort (e.g., 'xhigh' for "xtra thinking" mode) requires more time
+      // for the model to generate reasoning tokens before producing output.
+      // This fixes GitHub issue #530 where features would get stuck with reasoning models.
+      //
+      // For feature generation with 'xhigh', use the extended 5-minute base timeout
+      // since generating 50+ features takes significantly longer than normal operations.
+      const baseTimeout =
+        options.reasoningEffort === 'xhigh'
+          ? CODEX_FEATURE_GENERATION_BASE_TIMEOUT_MS
+          : CODEX_CLI_TIMEOUT_MS;
+      const timeout = calculateReasoningTimeout(options.reasoningEffort, baseTimeout);
+
+      const stream = spawnJSONLProcess({
+        command: commandPath,
+        args,
+        cwd: options.cwd,
+        env: envOverrides,
+        abortController: options.abortController,
+        timeout,
+        stdinData: promptText, // Pass prompt via stdin
+      });
+
+      for await (const rawEvent of stream) {
+        const event = rawEvent as Record<string, unknown>;
+        const eventType = getEventType(event);
+
+        // Track thread/session ID from events
+        const threadId = event.thread_id;
+        if (threadId && typeof threadId === 'string') {
+          this._lastSessionId = threadId;
+        }
+
+        if (eventType === CODEX_EVENT_TYPES.error) {
+          const errorText = extractText(event.error ?? event.message) || 'Codex CLI error';
+
+          // Enhance error message with helpful context
+          let enhancedError = errorText;
+          const errorLower = errorText.toLowerCase();
+          if (errorLower.includes('rate limit')) {
+            enhancedError = `${errorText}\n\nTip: You're being rate limited. Try reducing concurrent tasks or waiting a few minutes before retrying.`;
+          } else if (errorLower.includes('authentication') || errorLower.includes('unauthorized')) {
+            enhancedError = `${errorText}\n\nTip: Check that your OPENAI_API_KEY is set correctly or run 'codex login' to authenticate.`;
+          } else if (
+            errorLower.includes('model does not exist') ||
+            errorLower.includes('requested model does not exist') ||
+            errorLower.includes('do not have access') ||
+            errorLower.includes('model_not_found') ||
+            errorLower.includes('invalid_model')
+          ) {
+            enhancedError =
+              `${errorText}\n\nTip: The model '${options.model}' may not be available on your OpenAI plan. ` +
+              `See https://platform.openai.com/docs/models for available models. ` +
+              `Some models require a ChatGPT Pro/Plus subscription—authenticate with 'codex login' instead of an API key.`;
+          } else if (
+            errorLower.includes('stream disconnected') ||
+            errorLower.includes('stream ended') ||
+            errorLower.includes('connection reset')
+          ) {
+            enhancedError =
+              `${errorText}\n\nTip: The connection to OpenAI was interrupted. This can happen due to:\n` +
+              `- Network instability\n` +
+              `- The model not being available on your plan\n` +
+              `- Server-side timeouts for long-running requests\n` +
+              `Try again, or switch to a different model.`;
+          } else if (
+            errorLower.includes('command not found') ||
+            errorLower.includes('is not recognized as an internal or external command')
+          ) {
+            enhancedError = `${errorText}\n\nTip: Make sure the Codex CLI is installed. Run 'npm install -g @openai/codex-cli' to install.`;
+          }
+
+          console.error('[CodexProvider] CLI error event:', { errorText, event });
+          yield { type: 'error', error: enhancedError };
+          continue;
+        }
+
+        if (eventType === CODEX_EVENT_TYPES.turnCompleted) {
+          const resultText = extractText(event.result) || undefined;
+          yield { type: 'result', subtype: 'success', result: resultText };
+          continue;
+        }
+
+        if (!eventType) {
+          const fallbackText = extractText(event);
+          if (fallbackText) {
+            yield {
+              type: 'assistant',
+              message: {
+                role: 'assistant',
+                content: [{ type: 'text', text: fallbackText }],
+              },
+            };
+          }
+          continue;
+        }
+
+        const item = (event.item ?? {}) as Record<string, unknown>;
+        const itemType = extractItemType(item);
+
+        if (
+          eventType === CODEX_EVENT_TYPES.itemStarted &&
+          itemType === CODEX_ITEM_TYPES.commandExecution
+        ) {
+          const commandText = extractCommandText(item) || '';
+          const tool = resolveCodexToolCall(commandText);
+          const toolUseId = toolUseTracker.register(event, item);
+          yield {
+            type: 'assistant',
+            message: {
+              role: 'assistant',
+              content: [
+                {
+                  type: 'tool_use',
+                  name: tool.name,
+                  input: tool.input,
+                  tool_use_id: toolUseId,
+                },
+              ],
+            },
+          };
+          continue;
+        }
+
+        if (eventType === CODEX_EVENT_TYPES.itemUpdated && itemType === CODEX_ITEM_TYPES.todoList) {
+          const todos = extractCodexTodoItems(item);
+          if (todos) {
+            yield {
+              type: 'assistant',
+              message: {
+                role: 'assistant',
+                content: [
+                  {
+                    type: 'tool_use',
+                    name: getCodexTodoToolName(),
+                    input: { todos },
+                  },
+                ],
+              },
+            };
+          } else {
+            const todoText = extractText(item) || '';
+            const formatted = todoText ? `Updated TODO list:\n${todoText}` : 'Updated TODO list';
+            yield {
+              type: 'assistant',
+              message: {
+                role: 'assistant',
+                content: [{ type: 'text', text: formatted }],
+              },
+            };
+          }
+          continue;
+        }
+
+        if (eventType === CODEX_EVENT_TYPES.itemCompleted) {
+          if (itemType === CODEX_ITEM_TYPES.reasoning) {
+            const thinkingText = extractText(item) || '';
+            yield {
+              type: 'assistant',
+              message: {
+                role: 'assistant',
+                content: [{ type: 'thinking', thinking: thinkingText }],
+              },
+            };
+            continue;
+          }
+
+          if (itemType === CODEX_ITEM_TYPES.commandExecution) {
+            const commandOutput =
+              extractCommandOutput(item) ?? extractCommandText(item) ?? extractText(item) ?? '';
+            if (commandOutput) {
+              const toolUseId = toolUseTracker.resolve(event, item);
+              const toolResultBlock: {
+                type: 'tool_result';
+                content: string;
+                tool_use_id?: string;
+              } = { type: 'tool_result', content: commandOutput };
+              if (toolUseId) {
+                toolResultBlock.tool_use_id = toolUseId;
+              }
+              yield {
+                type: 'assistant',
+                message: {
+                  role: 'assistant',
+                  content: [toolResultBlock],
+                },
+              };
+            }
+            continue;
+          }
+
+          const text = extractText(item) || extractText(event);
+          if (text) {
+            yield {
+              type: 'assistant',
+              message: {
+                role: 'assistant',
+                content: [{ type: 'text', text }],
+              },
+            };
+          }
+        }
+      }
+    } catch (error) {
+      const errorInfo = classifyError(error);
+      const userMessage = getUserFriendlyErrorMessage(error);
+      const enhancedMessage = errorInfo.isRateLimit
+        ? `${userMessage}\n\nTip: If you're rate limited, try reducing concurrent tasks or waiting a few minutes.`
+        : userMessage;
+
+      console.error('[CodexProvider] executeQuery() error:', {
+        type: errorInfo.type,
+        message: errorInfo.message,
+        isRateLimit: errorInfo.isRateLimit,
+        retryAfter: errorInfo.retryAfter,
+        stack: error instanceof Error ? error.stack : undefined,
+      });
+
+      yield { type: 'error', error: enhancedMessage };
+    }
+  }
+
+  async detectInstallation(): Promise<InstallationStatus> {
+    const cliPath = await findCodexCliPath();
+    const hasApiKey = Boolean(await resolveOpenAiApiKey());
+    const installed = !!cliPath;
+
+    let version = '';
+    if (installed) {
+      try {
+        const result = await spawnProcess({
+          command: cliPath || CODEX_COMMAND,
+          args: [CODEX_VERSION_FLAG],
+          cwd: process.cwd(),
+        });
+        version = result.stdout.trim();
+      } catch {
+        version = '';
+      }
+    }
+
+    // Determine auth status - always verify with CLI, never assume authenticated
+    const authCheck = await checkCodexAuthentication(cliPath);
+    const authenticated = authCheck.authenticated;
+
+    return {
+      installed,
+      path: cliPath || undefined,
+      version: version || undefined,
+      method: 'cli' as const, // Installation method
+      hasApiKey,
+      authenticated,
+    };
+  }
+
+  getAvailableModels(): ModelDefinition[] {
+    // Return all available Codex/OpenAI models
+    return CODEX_MODELS;
+  }
+
+  /**
+   * Check authentication status for Codex CLI
+   */
+  async checkAuth(): Promise<CodexAuthStatus> {
+    const cliPath = await findCodexCliPath();
+    const hasApiKey = Boolean(await resolveOpenAiApiKey());
+    const authIndicators = await getCodexAuthIndicators();
+
+    // Check for API key in environment
+    if (hasApiKey) {
+      return { authenticated: true, method: 'api_key' };
+    }
+
+    // Check for OAuth/token from Codex CLI
+    if (authIndicators.hasOAuthToken || authIndicators.hasApiKey) {
+      return { authenticated: true, method: 'oauth' };
+    }
+
+    // CLI is installed but not authenticated via indicators - try CLI command
+    if (cliPath) {
+      try {
+        // Try 'codex login status' first (same as checkCodexAuthentication)
+        const result = await spawnProcess({
+          command: cliPath || CODEX_COMMAND,
+          args: ['login', 'status'],
+          cwd: process.cwd(),
+          env: {
+            ...process.env,
+            TERM: 'dumb',
+          },
+        });
+
+        // Check both stdout and stderr - Codex CLI outputs to stderr
+        const combinedOutput = (result.stdout + result.stderr).toLowerCase();
+        const isLoggedIn = combinedOutput.includes('logged in');
+
+        if (result.exitCode === 0 && isLoggedIn) {
+          return { authenticated: true, method: 'oauth' };
+        }
+      } catch (error) {
+        logger.warn('Error running login status command during auth check:', error);
+      }
+    }
+
+    return { authenticated: false, method: 'none' };
+  }
+
+  /**
+   * Get the detected CLI path (public accessor for status endpoints)
+   */
+  async getCliPath(): Promise<string | null> {
+    const path = await findCodexCliPath();
+    return path || null;
+  }
+
+  /**
+   * Get the last CLI session ID (for tracking across queries)
+   * This can be used to resume sessions in subsequent requests
+   */
+  getLastSessionId(): string | null {
+    return this._lastSessionId ?? null;
+  }
+
+  /**
+   * Set a session ID to use for CLI session resumption
+   */
+  setSessionId(sessionId: string | null): void {
+    this._lastSessionId = sessionId;
+  }
+
+  private _lastSessionId: string | null = null;
+}
diff --git a/temp_repo/apps/server/src/providers/codex-sdk-client.ts b/temp_repo/apps/server/src/providers/codex-sdk-client.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bc885c7219f14f8ef9fff8dfeb40b2ab78e85622
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/codex-sdk-client.ts
@@ -0,0 +1,222 @@
+/**
+ * Codex SDK client - Executes Codex queries via official @openai/codex-sdk
+ *
+ * Used for programmatic control of Codex from within the application.
+ * Provides cleaner integration than spawning CLI processes.
+ */
+
+import { Codex } from '@openai/codex-sdk';
+import { formatHistoryAsText, classifyError, getUserFriendlyErrorMessage } from '@automaker/utils';
+import { supportsReasoningEffort } from '@automaker/types';
+import type { ExecuteOptions, ProviderMessage } from './types.js';
+
+const OPENAI_API_KEY_ENV = 'OPENAI_API_KEY';
+const SDK_HISTORY_HEADER = 'Current request:\n';
+const DEFAULT_RESPONSE_TEXT = '';
+const SDK_ERROR_DETAILS_LABEL = 'Details:';
+
+type SdkReasoningEffort = 'minimal' | 'low' | 'medium' | 'high' | 'xhigh';
+const SDK_REASONING_EFFORTS = new Set<string>(['minimal', 'low', 'medium', 'high', 'xhigh']);
+
+type PromptBlock = {
+  type: string;
+  text?: string;
+  source?: {
+    type?: string;
+    media_type?: string;
+    data?: string;
+  };
+};
+
+function resolveApiKey(): string {
+  const apiKey = process.env[OPENAI_API_KEY_ENV];
+  if (!apiKey) {
+    throw new Error('OPENAI_API_KEY is not set.');
+  }
+  return apiKey;
+}
+
+function normalizePromptBlocks(prompt: ExecuteOptions['prompt']): PromptBlock[] {
+  if (Array.isArray(prompt)) {
+    return prompt as PromptBlock[];
+  }
+  return [{ type: 'text', text: prompt }];
+}
+
+function buildPromptText(options: ExecuteOptions, systemPrompt: string | null): string {
+  const historyText =
+    options.conversationHistory && options.conversationHistory.length > 0
+      ? formatHistoryAsText(options.conversationHistory)
+      : '';
+
+  const promptBlocks = normalizePromptBlocks(options.prompt);
+  const promptTexts: string[] = [];
+
+  for (const block of promptBlocks) {
+    if (block.type === 'text' && typeof block.text === 'string' && block.text.trim()) {
+      promptTexts.push(block.text);
+    }
+  }
+
+  const promptContent = promptTexts.join('\n\n');
+  if (!promptContent.trim()) {
+    throw new Error('Codex SDK prompt is empty.');
+  }
+
+  const parts: string[] = [];
+  if (systemPrompt) {
+    parts.push(`System: ${systemPrompt}`);
+  }
+  if (historyText) {
+    parts.push(historyText);
+  }
+  parts.push(`${SDK_HISTORY_HEADER}${promptContent}`);
+
+  return parts.join('\n\n');
+}
+
+function buildSdkErrorMessage(rawMessage: string, userMessage: string): string {
+  if (!rawMessage) {
+    return userMessage;
+  }
+  if (!userMessage || rawMessage === userMessage) {
+    return rawMessage;
+  }
+  return `${userMessage}\n\n${SDK_ERROR_DETAILS_LABEL} ${rawMessage}`;
+}
+
+/**
+ * Execute a query using the official Codex SDK
+ *
+ * The SDK provides a cleaner interface than spawning CLI processes:
+ * - Handles authentication automatically
+ * - Provides TypeScript types
+ * - Supports thread management and resumption
+ * - Better error handling
+ */
+export async function* executeCodexSdkQuery(
+  options: ExecuteOptions,
+  systemPrompt: string | null
+): AsyncGenerator<ProviderMessage> {
+  try {
+    const apiKey = resolveApiKey();
+    const codex = new Codex({ apiKey });
+
+    // Build thread options with model
+    // The model must be passed to startThread/resumeThread so the SDK
+    // knows which model to use for the conversation. Without this,
+    // the SDK may use a default model that the user doesn't have access to.
+    const threadOptions: {
+      model?: string;
+      modelReasoningEffort?: SdkReasoningEffort;
+    } = {};
+
+    if (options.model) {
+      threadOptions.model = options.model;
+    }
+
+    // Add reasoning effort to thread options if model supports it
+    if (
+      options.reasoningEffort &&
+      options.model &&
+      supportsReasoningEffort(options.model) &&
+      options.reasoningEffort !== 'none' &&
+      SDK_REASONING_EFFORTS.has(options.reasoningEffort)
+    ) {
+      threadOptions.modelReasoningEffort = options.reasoningEffort as SdkReasoningEffort;
+    }
+
+    // Resume existing thread or start new one
+    let thread;
+    if (options.sdkSessionId) {
+      try {
+        thread = codex.resumeThread(options.sdkSessionId, threadOptions);
+      } catch {
+        // If resume fails, start a new thread
+        thread = codex.startThread(threadOptions);
+      }
+    } else {
+      thread = codex.startThread(threadOptions);
+    }
+
+    const promptText = buildPromptText(options, systemPrompt);
+
+    // Build run options
+    const runOptions: {
+      signal?: AbortSignal;
+    } = {
+      signal: options.abortController?.signal,
+    };
+
+    // Run the query
+    const result = await thread.run(promptText, runOptions);
+
+    // Extract response text (from finalResponse property)
+    const outputText = result.finalResponse ?? DEFAULT_RESPONSE_TEXT;
+
+    // Get thread ID (may be null if not populated yet)
+    const threadId = thread.id ?? undefined;
+
+    // Yield assistant message
+    yield {
+      type: 'assistant',
+      session_id: threadId,
+      message: {
+        role: 'assistant',
+        content: [{ type: 'text', text: outputText }],
+      },
+    };
+
+    // Yield result
+    yield {
+      type: 'result',
+      subtype: 'success',
+      session_id: threadId,
+      result: outputText,
+    };
+  } catch (error) {
+    const errorInfo = classifyError(error);
+    const userMessage = getUserFriendlyErrorMessage(error);
+    let combinedMessage = buildSdkErrorMessage(errorInfo.message, userMessage);
+
+    // Enhance error messages with actionable tips for common Codex issues
+    // Normalize inputs to avoid crashes from nullish values
+    const errorLower = (errorInfo?.message ?? '').toLowerCase();
+    const modelLabel = options?.model ?? '<unknown model>';
+
+    if (
+      errorLower.includes('does not exist') ||
+      errorLower.includes('model_not_found') ||
+      errorLower.includes('invalid_model')
+    ) {
+      // Model not found - provide helpful guidance
+      combinedMessage +=
+        `\n\nTip: The model '${modelLabel}' may not be available on your OpenAI plan. ` +
+        `Some models (like gpt-5.3-codex) require a ChatGPT Pro/Plus subscription and OAuth login via 'codex login'. ` +
+        `Try using a different model (e.g., gpt-5.1 or gpt-5.2), or authenticate with 'codex login' instead of an API key.`;
+    } else if (
+      errorLower.includes('stream disconnected') ||
+      errorLower.includes('stream ended') ||
+      errorLower.includes('connection reset') ||
+      errorLower.includes('socket hang up')
+    ) {
+      // Stream disconnection - provide helpful guidance
+      combinedMessage +=
+        `\n\nTip: The connection to OpenAI was interrupted. This can happen due to:\n` +
+        `- Network instability\n` +
+        `- The model not being available on your plan (try 'codex login' for OAuth authentication)\n` +
+        `- Server-side timeouts for long-running requests\n` +
+        `Try again, or switch to a different model.`;
+    }
+
+    console.error('[CodexSDK] executeQuery() error during execution:', {
+      type: errorInfo.type,
+      message: errorInfo.message,
+      model: options.model,
+      isRateLimit: errorInfo.isRateLimit,
+      retryAfter: errorInfo.retryAfter,
+      stack: error instanceof Error ? error.stack : undefined,
+    });
+    yield { type: 'error', error: combinedMessage };
+  }
+}
diff --git a/temp_repo/apps/server/src/providers/codex-tool-mapping.ts b/temp_repo/apps/server/src/providers/codex-tool-mapping.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f951e0f0214aa24e4d170ebff8a42fee77a28b31
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/codex-tool-mapping.ts
@@ -0,0 +1,436 @@
+export type CodexToolResolution = {
+  name: string;
+  input: Record<string, unknown>;
+};
+
+export type CodexTodoItem = {
+  content: string;
+  status: 'pending' | 'in_progress' | 'completed';
+  activeForm?: string;
+};
+
+const TOOL_NAME_BASH = 'Bash';
+const TOOL_NAME_READ = 'Read';
+const TOOL_NAME_EDIT = 'Edit';
+const TOOL_NAME_WRITE = 'Write';
+const TOOL_NAME_GREP = 'Grep';
+const TOOL_NAME_GLOB = 'Glob';
+const TOOL_NAME_TODO = 'TodoWrite';
+const TOOL_NAME_DELETE = 'Delete';
+const TOOL_NAME_LS = 'Ls';
+
+const INPUT_KEY_COMMAND = 'command';
+const INPUT_KEY_FILE_PATH = 'file_path';
+const INPUT_KEY_PATTERN = 'pattern';
+
+const SHELL_WRAPPER_PATTERNS = [
+  /^\/bin\/bash\s+-lc\s+["']([\s\S]+)["']$/,
+  /^bash\s+-lc\s+["']([\s\S]+)["']$/,
+  /^\/bin\/sh\s+-lc\s+["']([\s\S]+)["']$/,
+  /^sh\s+-lc\s+["']([\s\S]+)["']$/,
+  /^cmd\.exe\s+\/c\s+["']?([\s\S]+)["']?$/i,
+  /^powershell(?:\.exe)?\s+-Command\s+["']?([\s\S]+)["']?$/i,
+  /^pwsh(?:\.exe)?\s+-Command\s+["']?([\s\S]+)["']?$/i,
+] as const;
+
+const COMMAND_SEPARATOR_PATTERN = /\s*(?:&&|\|\||;)\s*/;
+const SEGMENT_SKIP_PREFIXES = ['cd ', 'export ', 'set ', 'pushd '] as const;
+const WRAPPER_COMMANDS = new Set(['sudo', 'env', 'command']);
+const READ_COMMANDS = new Set(['cat', 'sed', 'head', 'tail', 'less', 'more', 'bat', 'stat', 'wc']);
+const SEARCH_COMMANDS = new Set(['rg', 'grep', 'ag', 'ack']);
+const GLOB_COMMANDS = new Set(['ls', 'find', 'fd', 'tree']);
+const DELETE_COMMANDS = new Set(['rm', 'del', 'erase', 'remove', 'unlink']);
+const LIST_COMMANDS = new Set(['ls', 'dir', 'll', 'la']);
+const WRITE_COMMANDS = new Set(['tee', 'touch', 'mkdir']);
+const APPLY_PATCH_COMMAND = 'apply_patch';
+const APPLY_PATCH_PATTERN = /\bapply_patch\b/;
+const REDIRECTION_TARGET_PATTERN = /(?:>>|>)\s*([^\s]+)/;
+const SED_IN_PLACE_FLAGS = new Set(['-i', '--in-place']);
+const PERL_IN_PLACE_FLAG = /-.*i/;
+const SEARCH_PATTERN_FLAGS = new Set(['-e', '--regexp']);
+const SEARCH_VALUE_FLAGS = new Set([
+  '-g',
+  '--glob',
+  '--iglob',
+  '--type',
+  '--type-add',
+  '--type-clear',
+  '--encoding',
+]);
+const SEARCH_FILE_LIST_FLAGS = new Set(['--files']);
+const TODO_LINE_PATTERN = /^[-*]\s*(?:\[(?<status>[ x~])\]\s*)?(?<content>.+)$/;
+const TODO_STATUS_COMPLETED = 'completed';
+const TODO_STATUS_IN_PROGRESS = 'in_progress';
+const TODO_STATUS_PENDING = 'pending';
+const PATCH_FILE_MARKERS = [
+  '*** Update File: ',
+  '*** Add File: ',
+  '*** Delete File: ',
+  '*** Move to: ',
+] as const;
+
+function stripShellWrapper(command: string): string {
+  const trimmed = command.trim();
+  for (const pattern of SHELL_WRAPPER_PATTERNS) {
+    const match = trimmed.match(pattern);
+    if (match && match[1]) {
+      return unescapeCommand(match[1].trim());
+    }
+  }
+  return trimmed;
+}
+
+function unescapeCommand(command: string): string {
+  return command.replace(/\\(["'])/g, '$1');
+}
+
+function extractPrimarySegment(command: string): string {
+  const segments = command
+    .split(COMMAND_SEPARATOR_PATTERN)
+    .map((segment) => segment.trim())
+    .filter(Boolean);
+
+  for (const segment of segments) {
+    const shouldSkip = SEGMENT_SKIP_PREFIXES.some((prefix) => segment.startsWith(prefix));
+    if (!shouldSkip) {
+      return segment;
+    }
+  }
+
+  return command.trim();
+}
+
+function tokenizeCommand(command: string): string[] {
+  const tokens: string[] = [];
+  let current = '';
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+  let isEscaped = false;
+
+  for (const char of command) {
+    if (isEscaped) {
+      current += char;
+      isEscaped = false;
+      continue;
+    }
+
+    if (char === '\\') {
+      isEscaped = true;
+      continue;
+    }
+
+    if (char === "'" && !inDoubleQuote) {
+      inSingleQuote = !inSingleQuote;
+      continue;
+    }
+
+    if (char === '"' && !inSingleQuote) {
+      inDoubleQuote = !inDoubleQuote;
+      continue;
+    }
+
+    if (!inSingleQuote && !inDoubleQuote && /\s/.test(char)) {
+      if (current) {
+        tokens.push(current);
+        current = '';
+      }
+      continue;
+    }
+
+    current += char;
+  }
+
+  if (current) {
+    tokens.push(current);
+  }
+
+  return tokens;
+}
+
+function stripWrapperTokens(tokens: string[]): string[] {
+  let index = 0;
+  while (index < tokens.length && WRAPPER_COMMANDS.has(tokens[index].toLowerCase())) {
+    index += 1;
+  }
+  return tokens.slice(index);
+}
+
+function extractFilePathFromTokens(tokens: string[]): string | null {
+  const candidates = tokens.slice(1).filter((token) => token && !token.startsWith('-'));
+  if (candidates.length === 0) return null;
+  return candidates[candidates.length - 1];
+}
+
+function extractSearchPattern(tokens: string[]): string | null {
+  const remaining = tokens.slice(1);
+
+  for (let index = 0; index < remaining.length; index += 1) {
+    const token = remaining[index];
+    if (token === '--') {
+      return remaining[index + 1] ?? null;
+    }
+    if (SEARCH_PATTERN_FLAGS.has(token)) {
+      return remaining[index + 1] ?? null;
+    }
+    if (SEARCH_VALUE_FLAGS.has(token)) {
+      index += 1;
+      continue;
+    }
+    if (token.startsWith('-')) {
+      continue;
+    }
+    return token;
+  }
+
+  return null;
+}
+
+function extractTeeTarget(tokens: string[]): string | null {
+  const teeIndex = tokens.findIndex((token) => token === 'tee');
+  if (teeIndex < 0) return null;
+  const candidate = tokens[teeIndex + 1];
+  return candidate && !candidate.startsWith('-') ? candidate : null;
+}
+
+function extractRedirectionTarget(command: string): string | null {
+  const match = command.match(REDIRECTION_TARGET_PATTERN);
+  return match?.[1] ?? null;
+}
+
+function extractFilePathFromDeleteTokens(tokens: string[]): string | null {
+  // rm file.txt or rm /path/to/file.txt
+  // Skip flags and get the first non-flag argument
+  for (let i = 1; i < tokens.length; i++) {
+    const token = tokens[i];
+    if (token && !token.startsWith('-')) {
+      return token;
+    }
+  }
+  return null;
+}
+
+function hasSedInPlaceFlag(tokens: string[]): boolean {
+  return tokens.some((token) => SED_IN_PLACE_FLAGS.has(token) || token.startsWith('-i'));
+}
+
+function hasPerlInPlaceFlag(tokens: string[]): boolean {
+  return tokens.some((token) => PERL_IN_PLACE_FLAG.test(token));
+}
+
+function extractPatchFilePath(command: string): string | null {
+  for (const marker of PATCH_FILE_MARKERS) {
+    const index = command.indexOf(marker);
+    if (index < 0) continue;
+    const start = index + marker.length;
+    const end = command.indexOf('\n', start);
+    const rawPath = (end === -1 ? command.slice(start) : command.slice(start, end)).trim();
+    if (rawPath) return rawPath;
+  }
+  return null;
+}
+
+function buildInputWithFilePath(filePath: string | null): Record<string, unknown> {
+  return filePath ? { [INPUT_KEY_FILE_PATH]: filePath } : {};
+}
+
+function buildInputWithPattern(pattern: string | null): Record<string, unknown> {
+  return pattern ? { [INPUT_KEY_PATTERN]: pattern } : {};
+}
+
+export function resolveCodexToolCall(command: string): CodexToolResolution {
+  const normalized = stripShellWrapper(command);
+  const primarySegment = extractPrimarySegment(normalized);
+  const tokens = stripWrapperTokens(tokenizeCommand(primarySegment));
+  const commandToken = tokens[0]?.toLowerCase() ?? '';
+
+  const redirectionTarget = extractRedirectionTarget(primarySegment);
+  if (redirectionTarget) {
+    return {
+      name: TOOL_NAME_WRITE,
+      input: buildInputWithFilePath(redirectionTarget),
+    };
+  }
+
+  if (commandToken === APPLY_PATCH_COMMAND || APPLY_PATCH_PATTERN.test(primarySegment)) {
+    return {
+      name: TOOL_NAME_EDIT,
+      input: buildInputWithFilePath(extractPatchFilePath(primarySegment)),
+    };
+  }
+
+  if (commandToken === 'sed' && hasSedInPlaceFlag(tokens)) {
+    return {
+      name: TOOL_NAME_EDIT,
+      input: buildInputWithFilePath(extractFilePathFromTokens(tokens)),
+    };
+  }
+
+  if (commandToken === 'perl' && hasPerlInPlaceFlag(tokens)) {
+    return {
+      name: TOOL_NAME_EDIT,
+      input: buildInputWithFilePath(extractFilePathFromTokens(tokens)),
+    };
+  }
+
+  if (WRITE_COMMANDS.has(commandToken)) {
+    const filePath =
+      commandToken === 'tee' ? extractTeeTarget(tokens) : extractFilePathFromTokens(tokens);
+    return {
+      name: TOOL_NAME_WRITE,
+      input: buildInputWithFilePath(filePath),
+    };
+  }
+
+  if (SEARCH_COMMANDS.has(commandToken)) {
+    if (tokens.some((token) => SEARCH_FILE_LIST_FLAGS.has(token))) {
+      return {
+        name: TOOL_NAME_GLOB,
+        input: buildInputWithPattern(extractFilePathFromTokens(tokens)),
+      };
+    }
+
+    return {
+      name: TOOL_NAME_GREP,
+      input: buildInputWithPattern(extractSearchPattern(tokens)),
+    };
+  }
+
+  // Handle Delete commands (rm, del, erase, remove, unlink)
+  if (DELETE_COMMANDS.has(commandToken)) {
+    // Skip if -r or -rf flags (recursive delete should go to Bash)
+    if (
+      tokens.some((token) => token === '-r' || token === '-rf' || token === '-f' || token === '-rf')
+    ) {
+      return {
+        name: TOOL_NAME_BASH,
+        input: { [INPUT_KEY_COMMAND]: normalized },
+      };
+    }
+    // Simple file deletion - extract the file path
+    const filePath = extractFilePathFromDeleteTokens(tokens);
+    if (filePath) {
+      return {
+        name: TOOL_NAME_DELETE,
+        input: { path: filePath },
+      };
+    }
+    // Fall back to bash if we can't determine the file path
+    return {
+      name: TOOL_NAME_BASH,
+      input: { [INPUT_KEY_COMMAND]: normalized },
+    };
+  }
+
+  // Handle simple Ls commands (just listing, not find/glob)
+  if (LIST_COMMANDS.has(commandToken)) {
+    const filePath = extractFilePathFromTokens(tokens);
+    return {
+      name: TOOL_NAME_LS,
+      input: { path: filePath || '.' },
+    };
+  }
+
+  if (GLOB_COMMANDS.has(commandToken)) {
+    return {
+      name: TOOL_NAME_GLOB,
+      input: buildInputWithPattern(extractFilePathFromTokens(tokens)),
+    };
+  }
+
+  if (READ_COMMANDS.has(commandToken)) {
+    return {
+      name: TOOL_NAME_READ,
+      input: buildInputWithFilePath(extractFilePathFromTokens(tokens)),
+    };
+  }
+
+  return {
+    name: TOOL_NAME_BASH,
+    input: { [INPUT_KEY_COMMAND]: normalized },
+  };
+}
+
+function parseTodoLines(lines: string[]): CodexTodoItem[] {
+  const todos: CodexTodoItem[] = [];
+
+  for (const line of lines) {
+    const match = line.match(TODO_LINE_PATTERN);
+    if (!match?.groups?.content) continue;
+
+    const statusToken = match.groups.status;
+    const status =
+      statusToken === 'x'
+        ? TODO_STATUS_COMPLETED
+        : statusToken === '~'
+          ? TODO_STATUS_IN_PROGRESS
+          : TODO_STATUS_PENDING;
+
+    todos.push({ content: match.groups.content.trim(), status });
+  }
+
+  return todos;
+}
+
+function extractTodoFromArray(value: unknown[]): CodexTodoItem[] {
+  return value
+    .map((entry) => {
+      if (typeof entry === 'string') {
+        return { content: entry, status: TODO_STATUS_PENDING };
+      }
+      if (entry && typeof entry === 'object') {
+        const record = entry as Record<string, unknown>;
+        const content =
+          typeof record.content === 'string'
+            ? record.content
+            : typeof record.text === 'string'
+              ? record.text
+              : typeof record.title === 'string'
+                ? record.title
+                : null;
+        if (!content) return null;
+        const status =
+          record.status === TODO_STATUS_COMPLETED ||
+          record.status === TODO_STATUS_IN_PROGRESS ||
+          record.status === TODO_STATUS_PENDING
+            ? (record.status as CodexTodoItem['status'])
+            : TODO_STATUS_PENDING;
+        const activeForm = typeof record.activeForm === 'string' ? record.activeForm : undefined;
+        return { content, status, activeForm };
+      }
+      return null;
+    })
+    .filter((item): item is CodexTodoItem => Boolean(item));
+}
+
+export function extractCodexTodoItems(item: Record<string, unknown>): CodexTodoItem[] | null {
+  const todosValue = item.todos;
+  if (Array.isArray(todosValue)) {
+    const todos = extractTodoFromArray(todosValue);
+    return todos.length > 0 ? todos : null;
+  }
+
+  const itemsValue = item.items;
+  if (Array.isArray(itemsValue)) {
+    const todos = extractTodoFromArray(itemsValue);
+    return todos.length > 0 ? todos : null;
+  }
+
+  const textValue =
+    typeof item.text === 'string'
+      ? item.text
+      : typeof item.content === 'string'
+        ? item.content
+        : null;
+  if (!textValue) return null;
+
+  const lines = textValue
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+  const todos = parseTodoLines(lines);
+  return todos.length > 0 ? todos : null;
+}
+
+export function getCodexTodoToolName(): string {
+  return TOOL_NAME_TODO;
+}
diff --git a/temp_repo/apps/server/src/providers/copilot-provider.ts b/temp_repo/apps/server/src/providers/copilot-provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c5cc3a7e23e10aa19f60cd8cf977c455ab411d18
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/copilot-provider.ts
@@ -0,0 +1,1006 @@
+/**
+ * Copilot Provider - Executes queries using the GitHub Copilot SDK
+ *
+ * Uses the official @github/copilot-sdk for:
+ * - Session management and streaming responses
+ * - GitHub OAuth authentication (via gh CLI)
+ * - Tool call handling and permission management
+ * - Runtime model discovery
+ *
+ * Based on https://github.com/github/copilot-sdk
+ */
+
+import { execSync } from 'child_process';
+import * as fs from 'fs/promises';
+import * as path from 'path';
+import * as os from 'os';
+import { CliProvider, type CliSpawnConfig, type CliErrorInfo } from './cli-provider.js';
+import type {
+  ProviderConfig,
+  ExecuteOptions,
+  ProviderMessage,
+  InstallationStatus,
+  ModelDefinition,
+} from './types.js';
+// Note: validateBareModelId is not used because Copilot's bare model IDs
+// legitimately contain prefixes like claude-, gemini-, gpt-
+import {
+  COPILOT_MODEL_MAP,
+  type CopilotAuthStatus,
+  type CopilotRuntimeModel,
+} from '@automaker/types';
+import { createLogger, isAbortError } from '@automaker/utils';
+import { resolveModelString } from '@automaker/model-resolver';
+import { CopilotClient, type PermissionRequest } from '@github/copilot-sdk';
+import {
+  normalizeTodos,
+  normalizeFilePathInput,
+  normalizeCommandInput,
+  normalizePatternInput,
+} from './tool-normalization.js';
+
+// Create logger for this module
+const logger = createLogger('CopilotProvider');
+
+// Default bare model (without copilot- prefix) for SDK calls
+const DEFAULT_BARE_MODEL = 'claude-sonnet-4.6';
+
+// =============================================================================
+// SDK Event Types (from @github/copilot-sdk)
+// =============================================================================
+
+/**
+ * SDK session event data types
+ */
+interface SdkEvent {
+  type: string;
+  data?: unknown;
+}
+
+interface SdkMessageEvent extends SdkEvent {
+  type: 'assistant.message';
+  data: {
+    content: string;
+  };
+}
+
+// Note: SdkMessageDeltaEvent is not used - we skip delta events to reduce noise
+// The final assistant.message event contains the complete content
+
+interface SdkToolExecutionStartEvent extends SdkEvent {
+  type: 'tool.execution_start';
+  data: {
+    toolName: string;
+    toolCallId: string;
+    input?: Record<string, unknown>;
+  };
+}
+
+interface SdkToolExecutionCompleteEvent extends SdkEvent {
+  type: 'tool.execution_complete';
+  data: {
+    toolCallId: string;
+    success: boolean;
+    result?: {
+      content: string;
+    };
+    error?: {
+      message: string;
+      code?: string;
+    };
+  };
+}
+
+interface SdkSessionErrorEvent extends SdkEvent {
+  type: 'session.error';
+  data: {
+    message: string;
+    code?: string;
+  };
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+/**
+ * Prefix for error messages in tool results
+ * Consistent with GeminiProvider's error formatting
+ */
+const TOOL_ERROR_PREFIX = '[ERROR]' as const;
+
+// =============================================================================
+// Error Codes
+// =============================================================================
+
+export enum CopilotErrorCode {
+  NOT_INSTALLED = 'COPILOT_NOT_INSTALLED',
+  NOT_AUTHENTICATED = 'COPILOT_NOT_AUTHENTICATED',
+  RATE_LIMITED = 'COPILOT_RATE_LIMITED',
+  MODEL_UNAVAILABLE = 'COPILOT_MODEL_UNAVAILABLE',
+  NETWORK_ERROR = 'COPILOT_NETWORK_ERROR',
+  PROCESS_CRASHED = 'COPILOT_PROCESS_CRASHED',
+  TIMEOUT = 'COPILOT_TIMEOUT',
+  CLI_ERROR = 'COPILOT_CLI_ERROR',
+  SDK_ERROR = 'COPILOT_SDK_ERROR',
+  UNKNOWN = 'COPILOT_UNKNOWN_ERROR',
+}
+
+export interface CopilotError extends Error {
+  code: CopilotErrorCode;
+  recoverable: boolean;
+  suggestion?: string;
+}
+
+type CopilotSession = Awaited<ReturnType<CopilotClient['createSession']>>;
+type CopilotSessionOptions = Parameters<CopilotClient['createSession']>[0];
+type ResumableCopilotClient = CopilotClient & {
+  resumeSession?: (sessionId: string, options: CopilotSessionOptions) => Promise<CopilotSession>;
+};
+
+// =============================================================================
+// Tool Name Normalization
+// =============================================================================
+
+/**
+ * Copilot SDK tool name to standard tool name mapping
+ *
+ * Maps Copilot CLI tool names to our standard tool names for consistent UI display.
+ * Tool names are case-insensitive (normalized to lowercase before lookup).
+ */
+const COPILOT_TOOL_NAME_MAP: Record<string, string> = {
+  // File operations
+  read_file: 'Read',
+  read: 'Read',
+  view: 'Read', // Copilot uses 'view' for reading files
+  read_many_files: 'Read',
+  write_file: 'Write',
+  write: 'Write',
+  create_file: 'Write',
+  edit_file: 'Edit',
+  edit: 'Edit',
+  replace: 'Edit',
+  patch: 'Edit',
+  // Shell operations
+  run_shell: 'Bash',
+  run_shell_command: 'Bash',
+  shell: 'Bash',
+  bash: 'Bash',
+  execute: 'Bash',
+  terminal: 'Bash',
+  // Search operations
+  search: 'Grep',
+  grep: 'Grep',
+  search_file_content: 'Grep',
+  find_files: 'Glob',
+  glob: 'Glob',
+  list_dir: 'Ls',
+  list_directory: 'Ls',
+  ls: 'Ls',
+  // Web operations
+  web_fetch: 'WebFetch',
+  fetch: 'WebFetch',
+  web_search: 'WebSearch',
+  search_web: 'WebSearch',
+  google_web_search: 'WebSearch',
+  // Todo operations
+  todo_write: 'TodoWrite',
+  write_todos: 'TodoWrite',
+  update_todos: 'TodoWrite',
+  // Planning/intent operations (Copilot-specific)
+  report_intent: 'ReportIntent', // Keep as-is, it's a planning tool
+  think: 'Think',
+  plan: 'Plan',
+};
+
+/**
+ * Normalize Copilot tool names to standard tool names
+ */
+function normalizeCopilotToolName(copilotToolName: string): string {
+  const lowerName = copilotToolName.toLowerCase();
+  return COPILOT_TOOL_NAME_MAP[lowerName] || copilotToolName;
+}
+
+/**
+ * Normalize Copilot tool input parameters to standard format
+ *
+ * Maps Copilot's parameter names to our standard parameter names.
+ * Uses shared utilities from tool-normalization.ts for common normalizations.
+ */
+function normalizeCopilotToolInput(
+  toolName: string,
+  input: Record<string, unknown>
+): Record<string, unknown> {
+  const normalizedName = normalizeCopilotToolName(toolName);
+
+  // Normalize todo_write / write_todos: ensure proper format
+  if (normalizedName === 'TodoWrite' && Array.isArray(input.todos)) {
+    return { todos: normalizeTodos(input.todos) };
+  }
+
+  // Normalize file path parameters for Read/Write/Edit tools
+  if (normalizedName === 'Read' || normalizedName === 'Write' || normalizedName === 'Edit') {
+    return normalizeFilePathInput(input);
+  }
+
+  // Normalize shell command parameters for Bash tool
+  if (normalizedName === 'Bash') {
+    return normalizeCommandInput(input);
+  }
+
+  // Normalize search parameters for Grep tool
+  if (normalizedName === 'Grep') {
+    return normalizePatternInput(input);
+  }
+
+  return input;
+}
+
+/**
+ * CopilotProvider - Integrates GitHub Copilot SDK as an AI provider
+ *
+ * Features:
+ * - GitHub OAuth authentication
+ * - SDK-based session management
+ * - Runtime model discovery
+ * - Tool call normalization
+ * - Per-execution working directory support
+ */
+export class CopilotProvider extends CliProvider {
+  private runtimeModels: CopilotRuntimeModel[] | null = null;
+
+  constructor(config: ProviderConfig = {}) {
+    super(config);
+    // Trigger CLI detection on construction
+    this.ensureCliDetected();
+  }
+
+  // ==========================================================================
+  // CliProvider Abstract Method Implementations
+  // ==========================================================================
+
+  getName(): string {
+    return 'copilot';
+  }
+
+  getCliName(): string {
+    return 'copilot';
+  }
+
+  getSpawnConfig(): CliSpawnConfig {
+    return {
+      windowsStrategy: 'npx', // Copilot CLI can be run via npx
+      npxPackage: '@github/copilot', // Official GitHub Copilot CLI package
+      commonPaths: {
+        linux: [
+          path.join(os.homedir(), '.local/bin/copilot'),
+          '/usr/local/bin/copilot',
+          path.join(os.homedir(), '.npm-global/bin/copilot'),
+        ],
+        darwin: [
+          path.join(os.homedir(), '.local/bin/copilot'),
+          '/usr/local/bin/copilot',
+          '/opt/homebrew/bin/copilot',
+          path.join(os.homedir(), '.npm-global/bin/copilot'),
+        ],
+        win32: [
+          path.join(os.homedir(), 'AppData', 'Roaming', 'npm', 'copilot.cmd'),
+          path.join(os.homedir(), '.npm-global', 'copilot.cmd'),
+        ],
+      },
+    };
+  }
+
+  /**
+   * Extract prompt text from ExecuteOptions
+   *
+   * Note: CopilotProvider does not yet support vision/image inputs.
+   * If non-text content is provided, an error is thrown.
+   */
+  private extractPromptText(options: ExecuteOptions): string {
+    if (typeof options.prompt === 'string') {
+      return options.prompt;
+    } else if (Array.isArray(options.prompt)) {
+      // Check for non-text content (images, etc.) which we don't support yet
+      const hasNonText = options.prompt.some((p) => p.type !== 'text');
+      if (hasNonText) {
+        throw new Error(
+          'CopilotProvider does not yet support non-text prompt parts (e.g., images). ' +
+            'Please use text-only prompts or switch to a provider that supports vision.'
+        );
+      }
+      return options.prompt
+        .filter((p) => p.type === 'text' && p.text)
+        .map((p) => p.text)
+        .join('\n');
+    } else {
+      throw new Error('Invalid prompt format');
+    }
+  }
+
+  /**
+   * Not used with SDK approach - kept for interface compatibility
+   */
+  buildCliArgs(_options: ExecuteOptions): string[] {
+    return [];
+  }
+
+  /**
+   * Convert SDK event to AutoMaker ProviderMessage format
+   */
+  normalizeEvent(event: unknown): ProviderMessage | null {
+    const sdkEvent = event as SdkEvent;
+
+    switch (sdkEvent.type) {
+      case 'assistant.message': {
+        const messageEvent = sdkEvent as SdkMessageEvent;
+        return {
+          type: 'assistant',
+          message: {
+            role: 'assistant',
+            content: [{ type: 'text', text: messageEvent.data.content }],
+          },
+        };
+      }
+
+      case 'assistant.message_delta': {
+        // Skip delta events - they create too much noise
+        // The final assistant.message event has the complete content
+        return null;
+      }
+
+      case 'tool.execution_start': {
+        const toolEvent = sdkEvent as SdkToolExecutionStartEvent;
+        const normalizedName = normalizeCopilotToolName(toolEvent.data.toolName);
+        const normalizedInput = toolEvent.data.input
+          ? normalizeCopilotToolInput(toolEvent.data.toolName, toolEvent.data.input)
+          : {};
+
+        return {
+          type: 'assistant',
+          message: {
+            role: 'assistant',
+            content: [
+              {
+                type: 'tool_use',
+                name: normalizedName,
+                tool_use_id: toolEvent.data.toolCallId,
+                input: normalizedInput,
+              },
+            ],
+          },
+        };
+      }
+
+      /**
+       * Tool execution completed event
+       * Handles both successful results and errors from tool executions
+       * Error messages optionally include error codes for better debugging
+       */
+      case 'tool.execution_complete': {
+        const toolResultEvent = sdkEvent as SdkToolExecutionCompleteEvent;
+        const error = toolResultEvent.data.error;
+
+        // Format error message with optional code for better debugging
+        const content = error
+          ? `${TOOL_ERROR_PREFIX} ${error.message}${error.code ? ` (${error.code})` : ''}`
+          : toolResultEvent.data.result?.content || '';
+
+        return {
+          type: 'assistant',
+          message: {
+            role: 'assistant',
+            content: [
+              {
+                type: 'tool_result',
+                tool_use_id: toolResultEvent.data.toolCallId,
+                content,
+              },
+            ],
+          },
+        };
+      }
+
+      case 'session.idle': {
+        logger.debug('Copilot session idle');
+        return {
+          type: 'result',
+          subtype: 'success',
+        };
+      }
+
+      case 'session.error': {
+        const errorEvent = sdkEvent as SdkSessionErrorEvent;
+        const enrichedError =
+          errorEvent.data.message ||
+          (errorEvent.data.code
+            ? `Copilot agent error (code: ${errorEvent.data.code})`
+            : 'Copilot agent error');
+        return {
+          type: 'error',
+          error: enrichedError,
+        };
+      }
+
+      default:
+        logger.debug(`Unknown Copilot SDK event type: ${sdkEvent.type}`);
+        return null;
+    }
+  }
+
+  // ==========================================================================
+  // CliProvider Overrides
+  // ==========================================================================
+
+  /**
+   * Override error mapping for Copilot-specific error codes
+   */
+  protected mapError(stderr: string, exitCode: number | null): CliErrorInfo {
+    const lower = stderr.toLowerCase();
+
+    if (
+      lower.includes('not authenticated') ||
+      lower.includes('please log in') ||
+      lower.includes('unauthorized') ||
+      lower.includes('login required') ||
+      lower.includes('authentication required') ||
+      lower.includes('github login')
+    ) {
+      return {
+        code: CopilotErrorCode.NOT_AUTHENTICATED,
+        message: 'GitHub Copilot is not authenticated',
+        recoverable: true,
+        suggestion: 'Run "gh auth login" or "copilot auth login" to authenticate with GitHub',
+      };
+    }
+
+    if (
+      lower.includes('rate limit') ||
+      lower.includes('too many requests') ||
+      lower.includes('429') ||
+      lower.includes('quota exceeded')
+    ) {
+      return {
+        code: CopilotErrorCode.RATE_LIMITED,
+        message: 'Copilot API rate limit exceeded',
+        recoverable: true,
+        suggestion: 'Wait a few minutes and try again',
+      };
+    }
+
+    if (
+      lower.includes('model not available') ||
+      lower.includes('invalid model') ||
+      lower.includes('unknown model') ||
+      lower.includes('model not found') ||
+      (lower.includes('not found') && lower.includes('404'))
+    ) {
+      return {
+        code: CopilotErrorCode.MODEL_UNAVAILABLE,
+        message: 'Requested model is not available',
+        recoverable: true,
+        suggestion: `Try using "${DEFAULT_BARE_MODEL}" or select a different model`,
+      };
+    }
+
+    if (
+      lower.includes('network') ||
+      lower.includes('connection') ||
+      lower.includes('econnrefused') ||
+      lower.includes('timeout')
+    ) {
+      return {
+        code: CopilotErrorCode.NETWORK_ERROR,
+        message: 'Network connection error',
+        recoverable: true,
+        suggestion: 'Check your internet connection and try again',
+      };
+    }
+
+    if (exitCode === 137 || lower.includes('killed') || lower.includes('sigterm')) {
+      return {
+        code: CopilotErrorCode.PROCESS_CRASHED,
+        message: 'Copilot CLI process was terminated',
+        recoverable: true,
+        suggestion: 'The process may have run out of memory. Try a simpler task.',
+      };
+    }
+
+    return {
+      code: CopilotErrorCode.UNKNOWN,
+      message: stderr || `Copilot CLI exited with code ${exitCode}`,
+      recoverable: false,
+    };
+  }
+
+  /**
+   * Override install instructions for Copilot-specific guidance
+   */
+  protected getInstallInstructions(): string {
+    return 'Install with: npm install -g @github/copilot (or visit https://github.com/github/copilot)';
+  }
+
+  /**
+   * Execute a prompt using Copilot SDK with real-time streaming
+   *
+   * Creates a new CopilotClient for each execution with the correct working directory.
+   * Streams tool execution events in real-time for UI display.
+   */
+  async *executeQuery(options: ExecuteOptions): AsyncGenerator<ProviderMessage> {
+    this.ensureCliDetected();
+
+    // Note: We don't use validateBareModelId here because Copilot's model IDs
+    // legitimately contain prefixes like claude-, gemini-, gpt- which are the
+    // actual model names from the Copilot CLI. We only need to ensure the
+    // copilot- prefix has been stripped by the ProviderFactory.
+    if (options.model?.startsWith('copilot-')) {
+      throw new Error(
+        `[CopilotProvider] Model ID should not have 'copilot-' prefix. Got: '${options.model}'. ` +
+          `The ProviderFactory should strip this prefix before passing to the provider.`
+      );
+    }
+
+    if (!this.cliPath) {
+      throw this.createError(
+        CopilotErrorCode.NOT_INSTALLED,
+        'Copilot CLI is not installed',
+        true,
+        this.getInstallInstructions()
+      );
+    }
+
+    const promptText = this.extractPromptText(options);
+    // resolveModelString may return dash-separated canonical names (e.g. "claude-sonnet-4-6"),
+    // but the Copilot SDK expects dot-separated version suffixes (e.g. "claude-sonnet-4.6").
+    // Normalize by converting the last dash-separated numeric pair to dot notation.
+    const resolvedModel = resolveModelString(options.model || DEFAULT_BARE_MODEL);
+    const bareModel = resolvedModel.replace(/-(\d+)-(\d+)$/, '-$1.$2');
+    const workingDirectory = options.cwd || process.cwd();
+
+    logger.debug(
+      `CopilotProvider.executeQuery called with model: "${bareModel}", cwd: "${workingDirectory}"`
+    );
+    logger.debug(`Prompt length: ${promptText.length} characters`);
+
+    // Create a client for this execution with the correct working directory
+    const client = new CopilotClient({
+      logLevel: 'warning',
+      autoRestart: false,
+      cwd: workingDirectory,
+    });
+
+    // Use an async queue to bridge callback-based SDK events to async generator
+    const eventQueue: SdkEvent[] = [];
+    let resolveWaiting: (() => void) | null = null;
+    let sessionComplete = false;
+    let sessionError: Error | null = null;
+
+    const pushEvent = (event: SdkEvent) => {
+      eventQueue.push(event);
+      if (resolveWaiting) {
+        resolveWaiting();
+        resolveWaiting = null;
+      }
+    };
+
+    const waitForEvent = (): Promise<void> => {
+      if (eventQueue.length > 0 || sessionComplete) {
+        return Promise.resolve();
+      }
+      return new Promise((resolve) => {
+        resolveWaiting = resolve;
+      });
+    };
+
+    // Declare session outside try so it's accessible in the catch block for cleanup.
+    let session: CopilotSession | undefined;
+
+    try {
+      await client.start();
+      logger.debug(`CopilotClient started with cwd: ${workingDirectory}`);
+
+      const sessionOptions: CopilotSessionOptions = {
+        model: bareModel,
+        streaming: true,
+        // AUTONOMOUS MODE: Auto-approve all permission requests.
+        // AutoMaker is designed for fully autonomous AI agent operation.
+        // Security boundary is provided by Docker containerization (see CLAUDE.md).
+        // User is warned about this at app startup.
+        onPermissionRequest: async (
+          request: PermissionRequest
+        ): Promise<{ kind: 'approved' } | { kind: 'denied-interactively-by-user' }> => {
+          logger.debug(`Permission request: ${request.kind}`);
+          return { kind: 'approved' };
+        },
+      };
+
+      // Resume the previous Copilot session when possible; otherwise create a fresh one.
+      const resumableClient = client as ResumableCopilotClient;
+      let sessionResumed = false;
+      if (options.sdkSessionId && typeof resumableClient.resumeSession === 'function') {
+        try {
+          session = await resumableClient.resumeSession(options.sdkSessionId, sessionOptions);
+          sessionResumed = true;
+          logger.debug(`Resumed Copilot session: ${session.sessionId}`);
+        } catch (resumeError) {
+          logger.warn(
+            `Failed to resume Copilot session "${options.sdkSessionId}", creating a new session: ${resumeError}`
+          );
+          session = await client.createSession(sessionOptions);
+        }
+      } else {
+        session = await client.createSession(sessionOptions);
+      }
+
+      // session is always assigned by this point (both branches above assign it)
+      const activeSession = session!;
+      const sessionId = activeSession.sessionId;
+      logger.debug(`Session ${sessionResumed ? 'resumed' : 'created'}: ${sessionId}`);
+
+      // Set up event handler to push events to queue
+      activeSession.on((event: SdkEvent) => {
+        logger.debug(`SDK event: ${event.type}`);
+
+        if (event.type === 'session.idle') {
+          sessionComplete = true;
+          pushEvent(event);
+        } else if (event.type === 'session.error') {
+          const errorEvent = event as SdkSessionErrorEvent;
+          sessionError = new Error(errorEvent.data.message);
+          sessionComplete = true;
+          pushEvent(event);
+        } else {
+          // Push all other events (tool.execution_start, tool.execution_complete, assistant.message, etc.)
+          pushEvent(event);
+        }
+      });
+
+      // Send the prompt (non-blocking)
+      await activeSession.send({ prompt: promptText });
+
+      // Process events as they arrive
+      while (!sessionComplete || eventQueue.length > 0) {
+        await waitForEvent();
+
+        // Check for errors first (before processing events to avoid race condition)
+        if (sessionError) {
+          await activeSession.destroy();
+          await client.stop();
+          throw sessionError;
+        }
+
+        // Process all queued events
+        while (eventQueue.length > 0) {
+          const event = eventQueue.shift()!;
+          const normalized = this.normalizeEvent(event);
+          if (normalized) {
+            // Add session_id if not present
+            if (!normalized.session_id) {
+              normalized.session_id = sessionId;
+            }
+            yield normalized;
+          }
+        }
+      }
+
+      // Cleanup
+      await activeSession.destroy();
+      await client.stop();
+      logger.debug('CopilotClient stopped successfully');
+    } catch (error) {
+      // Ensure session is destroyed and client is stopped on error to prevent leaks.
+      // The session may have been created/resumed before the error occurred.
+      if (session) {
+        try {
+          await session.destroy();
+        } catch (sessionCleanupError) {
+          logger.debug(`Failed to destroy session during cleanup: ${sessionCleanupError}`);
+        }
+      }
+      try {
+        await client.stop();
+      } catch (cleanupError) {
+        // Log but don't throw cleanup errors - the original error is more important
+        logger.debug(`Failed to stop client during cleanup: ${cleanupError}`);
+      }
+
+      if (isAbortError(error)) {
+        logger.debug('Query aborted');
+        return;
+      }
+
+      // Map errors to CopilotError
+      if (error instanceof Error) {
+        logger.error(`Copilot SDK error: ${error.message}`);
+        const errorInfo = this.mapError(error.message, null);
+        throw this.createError(
+          errorInfo.code as CopilotErrorCode,
+          errorInfo.message,
+          errorInfo.recoverable,
+          errorInfo.suggestion
+        );
+      }
+      throw error;
+    }
+  }
+
+  // ==========================================================================
+  // Copilot-Specific Methods
+  // ==========================================================================
+
+  /**
+   * Create a CopilotError with details
+   */
+  private createError(
+    code: CopilotErrorCode,
+    message: string,
+    recoverable: boolean = false,
+    suggestion?: string
+  ): CopilotError {
+    const error = new Error(message) as CopilotError;
+    error.code = code;
+    error.recoverable = recoverable;
+    error.suggestion = suggestion;
+    error.name = 'CopilotError';
+    return error;
+  }
+
+  /**
+   * Get Copilot CLI version
+   */
+  async getVersion(): Promise<string | null> {
+    this.ensureCliDetected();
+    if (!this.cliPath) return null;
+
+    try {
+      const result = execSync(`"${this.cliPath}" --version`, {
+        encoding: 'utf8',
+        timeout: 5000,
+        stdio: 'pipe',
+      }).trim();
+      return result;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Check authentication status
+   *
+   * Uses GitHub CLI (gh) to check Copilot authentication status.
+   * The Copilot CLI relies on gh auth for authentication.
+   */
+  async checkAuth(): Promise<CopilotAuthStatus> {
+    this.ensureCliDetected();
+    if (!this.cliPath) {
+      logger.debug('checkAuth: CLI not found');
+      return { authenticated: false, method: 'none' };
+    }
+
+    logger.debug('checkAuth: Starting credential check');
+
+    // Try to check GitHub CLI authentication status first
+    // The Copilot CLI uses gh auth for authentication
+    try {
+      const ghStatus = execSync('gh auth status --hostname github.com', {
+        encoding: 'utf8',
+        timeout: 10000,
+        stdio: 'pipe',
+      });
+
+      logger.debug(`checkAuth: gh auth status output: ${ghStatus.substring(0, 200)}`);
+
+      // Parse gh auth status output
+      const loggedInMatch = ghStatus.match(/Logged in to github\.com account (\S+)/);
+      if (loggedInMatch) {
+        return {
+          authenticated: true,
+          method: 'oauth',
+          login: loggedInMatch[1],
+          host: 'github.com',
+        };
+      }
+
+      // Check for token auth
+      if (ghStatus.includes('Logged in') || ghStatus.includes('Token:')) {
+        return {
+          authenticated: true,
+          method: 'oauth',
+          host: 'github.com',
+        };
+      }
+    } catch (ghError) {
+      logger.debug(`checkAuth: gh auth status failed: ${ghError}`);
+    }
+
+    // Try Copilot-specific auth check if gh is not available
+    try {
+      const result = execSync(`"${this.cliPath}" auth status`, {
+        encoding: 'utf8',
+        timeout: 10000,
+        stdio: 'pipe',
+      });
+
+      logger.debug(`checkAuth: copilot auth status output: ${result.substring(0, 200)}`);
+
+      if (result.includes('authenticated') || result.includes('logged in')) {
+        return {
+          authenticated: true,
+          method: 'cli',
+        };
+      }
+    } catch (copilotError) {
+      logger.debug(`checkAuth: copilot auth status failed: ${copilotError}`);
+    }
+
+    // Check for GITHUB_TOKEN environment variable
+    if (process.env.GITHUB_TOKEN) {
+      logger.debug('checkAuth: Found GITHUB_TOKEN environment variable');
+      return {
+        authenticated: true,
+        method: 'oauth',
+        statusMessage: 'Using GITHUB_TOKEN environment variable',
+      };
+    }
+
+    // Check for gh config file
+    const ghConfigPath = path.join(os.homedir(), '.config', 'gh', 'hosts.yml');
+    try {
+      await fs.access(ghConfigPath);
+      const content = await fs.readFile(ghConfigPath, 'utf8');
+      if (content.includes('github.com') && content.includes('oauth_token')) {
+        logger.debug('checkAuth: Found gh config with oauth_token');
+        return {
+          authenticated: true,
+          method: 'oauth',
+          host: 'github.com',
+        };
+      }
+    } catch {
+      logger.debug('checkAuth: No gh config found');
+    }
+
+    // No credentials found
+    logger.debug('checkAuth: No valid credentials found');
+    return {
+      authenticated: false,
+      method: 'none',
+      error:
+        'No authentication configured. Run "gh auth login" or install GitHub Copilot extension.',
+    };
+  }
+
+  /**
+   * Fetch available models from the CLI at runtime
+   */
+  async fetchRuntimeModels(): Promise<CopilotRuntimeModel[]> {
+    this.ensureCliDetected();
+    if (!this.cliPath) {
+      return [];
+    }
+
+    try {
+      // Try to list models using the CLI
+      const result = execSync(`"${this.cliPath}" models list --format json`, {
+        encoding: 'utf8',
+        timeout: 15000,
+        stdio: 'pipe',
+      });
+
+      const models = JSON.parse(result) as CopilotRuntimeModel[];
+      this.runtimeModels = models;
+      logger.debug(`Fetched ${models.length} runtime models from Copilot CLI`);
+      return models;
+    } catch (error) {
+      // Clear cache on failure to avoid returning stale data
+      this.runtimeModels = null;
+      logger.debug(`Failed to fetch runtime models: ${error}`);
+      return [];
+    }
+  }
+
+  /**
+   * Detect installation status (required by BaseProvider)
+   */
+  async detectInstallation(): Promise<InstallationStatus> {
+    const installed = await this.isInstalled();
+    const version = installed ? await this.getVersion() : undefined;
+    const auth = await this.checkAuth();
+
+    return {
+      installed,
+      version: version || undefined,
+      path: this.cliPath || undefined,
+      method: 'cli',
+      authenticated: auth.authenticated,
+    };
+  }
+
+  /**
+   * Get the detected CLI path (public accessor for status endpoints)
+   */
+  getCliPath(): string | null {
+    this.ensureCliDetected();
+    return this.cliPath;
+  }
+
+  /**
+   * Get available Copilot models
+   *
+   * Returns both static model definitions and runtime-discovered models
+   */
+  getAvailableModels(): ModelDefinition[] {
+    // Start with static model definitions - explicitly typed to allow runtime models
+    const staticModels: ModelDefinition[] = Object.entries(COPILOT_MODEL_MAP).map(
+      ([id, config]) => ({
+        id, // Full model ID with copilot- prefix
+        name: config.label,
+        modelString: id.replace('copilot-', ''), // Bare model for CLI
+        provider: 'copilot',
+        description: config.description,
+        supportsTools: config.supportsTools,
+        supportsVision: config.supportsVision,
+        contextWindow: config.contextWindow,
+      })
+    );
+
+    // Add runtime models if available (discovered via CLI)
+    if (this.runtimeModels) {
+      for (const runtimeModel of this.runtimeModels) {
+        // Skip if already in static list
+        const staticId = `copilot-${runtimeModel.id}`;
+        if (staticModels.some((m) => m.id === staticId)) {
+          continue;
+        }
+
+        staticModels.push({
+          id: staticId,
+          name: runtimeModel.name || runtimeModel.id,
+          modelString: runtimeModel.id,
+          provider: 'copilot',
+          description: `Dynamic model: ${runtimeModel.name || runtimeModel.id}`,
+          supportsTools: true,
+          supportsVision: runtimeModel.capabilities?.supportsVision ?? false,
+          contextWindow: runtimeModel.capabilities?.maxInputTokens,
+        });
+      }
+    }
+
+    return staticModels;
+  }
+
+  /**
+   * Check if a feature is supported
+   *
+   * Note: Vision is NOT currently supported - the SDK doesn't handle image inputs yet.
+   * This may change in future versions of the Copilot SDK.
+   */
+  supportsFeature(feature: string): boolean {
+    const supported = ['tools', 'text', 'streaming'];
+    return supported.includes(feature);
+  }
+
+  /**
+   * Check if runtime models have been cached
+   */
+  hasCachedModels(): boolean {
+    return this.runtimeModels !== null && this.runtimeModels.length > 0;
+  }
+
+  /**
+   * Clear the runtime model cache
+   */
+  clearModelCache(): void {
+    this.runtimeModels = null;
+    logger.debug('Cleared Copilot model cache');
+  }
+
+  /**
+   * Refresh models from CLI and return all available models
+   */
+  async refreshModels(): Promise<ModelDefinition[]> {
+    logger.debug('Refreshing Copilot models from CLI');
+    await this.fetchRuntimeModels();
+    return this.getAvailableModels();
+  }
+}
diff --git a/temp_repo/apps/server/src/providers/cursor-config-manager.ts b/temp_repo/apps/server/src/providers/cursor-config-manager.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7b32ceb95b69e435de56a7b31431776d94e0c991
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/cursor-config-manager.ts
@@ -0,0 +1,197 @@
+/**
+ * Cursor CLI Configuration Manager
+ *
+ * Manages Cursor CLI configuration stored in .automaker/cursor-config.json
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import { getAllCursorModelIds, type CursorCliConfig, type CursorModelId } from '@automaker/types';
+import { createLogger } from '@automaker/utils';
+import { getAutomakerDir } from '@automaker/platform';
+
+// Create logger for this module
+const logger = createLogger('CursorConfigManager');
+
+/**
+ * Manages Cursor CLI configuration
+ * Config location: .automaker/cursor-config.json
+ */
+export class CursorConfigManager {
+  private configPath: string;
+  private config: CursorCliConfig;
+
+  constructor(projectPath: string) {
+    // Use getAutomakerDir for consistent path resolution
+    this.configPath = path.join(getAutomakerDir(projectPath), 'cursor-config.json');
+    this.config = this.loadConfig();
+  }
+
+  /**
+   * Load configuration from disk
+   */
+  private loadConfig(): CursorCliConfig {
+    try {
+      if (fs.existsSync(this.configPath)) {
+        const content = fs.readFileSync(this.configPath, 'utf8');
+        const parsed = JSON.parse(content) as CursorCliConfig;
+        logger.debug(`Loaded config from ${this.configPath}`);
+        return parsed;
+      }
+    } catch (error) {
+      logger.warn('Failed to load config:', error);
+    }
+
+    // Return default config with all available models
+    return {
+      defaultModel: 'cursor-auto',
+      models: getAllCursorModelIds(),
+    };
+  }
+
+  /**
+   * Save configuration to disk
+   */
+  private saveConfig(): void {
+    try {
+      const dir = path.dirname(this.configPath);
+      if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+      }
+      fs.writeFileSync(this.configPath, JSON.stringify(this.config, null, 2));
+      logger.debug('Config saved');
+    } catch (error) {
+      logger.error('Failed to save config:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Get the full configuration
+   */
+  getConfig(): CursorCliConfig {
+    return { ...this.config };
+  }
+
+  /**
+   * Get the default model
+   */
+  getDefaultModel(): CursorModelId {
+    return this.config.defaultModel || 'cursor-auto';
+  }
+
+  /**
+   * Set the default model
+   */
+  setDefaultModel(model: CursorModelId): void {
+    this.config.defaultModel = model;
+    this.saveConfig();
+    logger.info(`Default model set to: ${model}`);
+  }
+
+  /**
+   * Get enabled models
+   */
+  getEnabledModels(): CursorModelId[] {
+    return this.config.models || ['cursor-auto'];
+  }
+
+  /**
+   * Set enabled models
+   */
+  setEnabledModels(models: CursorModelId[]): void {
+    this.config.models = models;
+    this.saveConfig();
+    logger.info(`Enabled models updated: ${models.join(', ')}`);
+  }
+
+  /**
+   * Add a model to enabled list
+   */
+  addModel(model: CursorModelId): void {
+    if (!this.config.models) {
+      this.config.models = [];
+    }
+    if (!this.config.models.includes(model)) {
+      this.config.models.push(model);
+      this.saveConfig();
+      logger.info(`Model added: ${model}`);
+    }
+  }
+
+  /**
+   * Remove a model from enabled list
+   */
+  removeModel(model: CursorModelId): void {
+    if (this.config.models) {
+      this.config.models = this.config.models.filter((m) => m !== model);
+      this.saveConfig();
+      logger.info(`Model removed: ${model}`);
+    }
+  }
+
+  /**
+   * Check if a model is enabled
+   */
+  isModelEnabled(model: CursorModelId): boolean {
+    return this.config.models?.includes(model) ?? false;
+  }
+
+  /**
+   * Get MCP server configurations
+   */
+  getMcpServers(): string[] {
+    return this.config.mcpServers || [];
+  }
+
+  /**
+   * Set MCP server configurations
+   */
+  setMcpServers(servers: string[]): void {
+    this.config.mcpServers = servers;
+    this.saveConfig();
+    logger.info(`MCP servers updated: ${servers.join(', ')}`);
+  }
+
+  /**
+   * Get Cursor rules paths
+   */
+  getRules(): string[] {
+    return this.config.rules || [];
+  }
+
+  /**
+   * Set Cursor rules paths
+   */
+  setRules(rules: string[]): void {
+    this.config.rules = rules;
+    this.saveConfig();
+    logger.info(`Rules updated: ${rules.join(', ')}`);
+  }
+
+  /**
+   * Reset configuration to defaults
+   */
+  reset(): void {
+    this.config = {
+      defaultModel: 'cursor-auto',
+      models: getAllCursorModelIds(),
+    };
+    this.saveConfig();
+    logger.info('Config reset to defaults');
+  }
+
+  /**
+   * Check if config file exists
+   */
+  exists(): boolean {
+    return fs.existsSync(this.configPath);
+  }
+
+  /**
+   * Get the config file path
+   */
+  getConfigPath(): string {
+    return this.configPath;
+  }
+}
diff --git a/temp_repo/apps/server/src/providers/cursor-provider.ts b/temp_repo/apps/server/src/providers/cursor-provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3903ea648c10625c82d425eb644a58baf1902bb0
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/cursor-provider.ts
@@ -0,0 +1,1258 @@
+/**
+ * Cursor Provider - Executes queries using cursor-agent CLI
+ *
+ * Extends CliProvider with Cursor-specific:
+ * - Event normalization for Cursor's JSONL format
+ * - Text block deduplication (Cursor sends duplicates)
+ * - Session ID tracking
+ * - Versions directory detection
+ *
+ * Spawns the cursor-agent CLI with --output-format stream-json for streaming responses.
+ */
+
+import { execSync } from 'child_process';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as os from 'os';
+import { findCliInWsl, isWslAvailable } from '@automaker/platform';
+import {
+  CliProvider,
+  type CliSpawnConfig,
+  type CliDetectionResult,
+  type CliErrorInfo,
+} from './cli-provider.js';
+import type {
+  ProviderConfig,
+  ExecuteOptions,
+  ProviderMessage,
+  InstallationStatus,
+  ModelDefinition,
+  ContentBlock,
+} from './types.js';
+import { validateBareModelId } from '@automaker/types';
+import { validateApiKey } from '../lib/auth-utils.js';
+import { getEffectivePermissions, detectProfile } from '../services/cursor-config-service.js';
+import {
+  type CursorStreamEvent,
+  type CursorSystemEvent,
+  type CursorAssistantEvent,
+  type CursorToolCallEvent,
+  type CursorResultEvent,
+  type CursorAuthStatus,
+  CURSOR_MODEL_MAP,
+} from '@automaker/types';
+import { createLogger, isAbortError } from '@automaker/utils';
+import { spawnJSONLProcess, execInWsl } from '@automaker/platform';
+
+// Create logger for this module
+const logger = createLogger('CursorProvider');
+
+// =============================================================================
+// Cursor Tool Handler Registry
+// =============================================================================
+
+/**
+ * Tool handler definition for mapping Cursor tool calls to normalized format
+ */
+interface CursorToolHandler<TArgs = unknown, TResult = unknown> {
+  /** The normalized tool name (e.g., 'Read', 'Write') */
+  name: string;
+  /** Extract and normalize input from Cursor's args format */
+  mapInput: (args: TArgs) => unknown;
+  /** Format the result content for display (optional) */
+  formatResult?: (result: TResult, args?: TArgs) => string;
+  /** Format rejected result (optional) */
+  formatRejected?: (reason: string) => string;
+}
+
+/**
+ * Registry of Cursor tool handlers
+ * Each handler knows how to normalize its specific tool call type
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- handler registry stores heterogeneous tool type parameters
+const CURSOR_TOOL_HANDLERS: Record<string, CursorToolHandler<any, any>> = {
+  readToolCall: {
+    name: 'Read',
+    mapInput: (args: { path: string }) => ({ file_path: args.path }),
+    formatResult: (result: { content: string }) => result.content,
+  },
+
+  writeToolCall: {
+    name: 'Write',
+    mapInput: (args: { path: string; fileText: string }) => ({
+      file_path: args.path,
+      content: args.fileText,
+    }),
+    formatResult: (result: { linesCreated: number; path: string }) =>
+      `Wrote ${result.linesCreated} lines to ${result.path}`,
+  },
+
+  editToolCall: {
+    name: 'Edit',
+    mapInput: (args: { path: string; oldText?: string; newText?: string }) => ({
+      file_path: args.path,
+      old_string: args.oldText,
+      new_string: args.newText,
+    }),
+    formatResult: (_result: unknown, args?: { path: string }) => `Edited file: ${args?.path}`,
+  },
+
+  shellToolCall: {
+    name: 'Bash',
+    mapInput: (args: { command: string }) => ({ command: args.command }),
+    formatResult: (result: { exitCode: number; stdout?: string; stderr?: string }) => {
+      let content = `Exit code: ${result.exitCode}`;
+      if (result.stdout) content += `\n${result.stdout}`;
+      if (result.stderr) content += `\nStderr: ${result.stderr}`;
+      return content;
+    },
+    formatRejected: (reason: string) => `Rejected: ${reason}`,
+  },
+
+  deleteToolCall: {
+    name: 'Delete',
+    mapInput: (args: { path: string }) => ({ file_path: args.path }),
+    formatResult: (_result: unknown, args?: { path: string }) => `Deleted: ${args?.path}`,
+    formatRejected: (reason: string) => `Delete rejected: ${reason}`,
+  },
+
+  grepToolCall: {
+    name: 'Grep',
+    mapInput: (args: { pattern: string; path?: string }) => ({
+      pattern: args.pattern,
+      path: args.path,
+    }),
+    formatResult: (result: { matchedLines: number }) =>
+      `Found ${result.matchedLines} matching lines`,
+  },
+
+  lsToolCall: {
+    name: 'Ls',
+    mapInput: (args: { path: string }) => ({ path: args.path }),
+    formatResult: (result: { childrenFiles: number; childrenDirs: number }) =>
+      `Found ${result.childrenFiles} files, ${result.childrenDirs} directories`,
+  },
+
+  globToolCall: {
+    name: 'Glob',
+    mapInput: (args: { globPattern: string; targetDirectory?: string }) => ({
+      pattern: args.globPattern,
+      path: args.targetDirectory,
+    }),
+    formatResult: (result: { totalFiles: number }) => `Found ${result.totalFiles} matching files`,
+  },
+
+  semSearchToolCall: {
+    name: 'SemanticSearch',
+    mapInput: (args: { query: string; targetDirectories?: string[]; explanation?: string }) => ({
+      query: args.query,
+      targetDirectories: args.targetDirectories,
+      explanation: args.explanation,
+    }),
+    formatResult: (result: { results: string; codeResults?: unknown[] }) => {
+      const resultCount = result.codeResults?.length || 0;
+      return resultCount > 0
+        ? `Found ${resultCount} semantic search result(s)`
+        : result.results || 'No results found';
+    },
+  },
+
+  readLintsToolCall: {
+    name: 'ReadLints',
+    mapInput: (args: { paths: string[] }) => ({ paths: args.paths }),
+    formatResult: (result: { totalDiagnostics: number; totalFiles: number }) =>
+      `Found ${result.totalDiagnostics} diagnostic(s) in ${result.totalFiles} file(s)`,
+  },
+};
+
+/**
+ * Process a Cursor tool call using the handler registry
+ * Returns { toolName, toolInput } or null if tool type is unknown
+ */
+function processCursorToolCall(
+  toolCall: CursorToolCallEvent['tool_call']
+): { toolName: string; toolInput: unknown } | null {
+  // Check each registered handler
+  for (const [key, handler] of Object.entries(CURSOR_TOOL_HANDLERS)) {
+    const toolData = toolCall[key as keyof typeof toolCall] as { args?: unknown } | undefined;
+    if (toolData) {
+      // Skip if args not yet populated (partial streaming event)
+      if (!toolData.args) return null;
+      return {
+        toolName: handler.name,
+        toolInput: handler.mapInput(toolData.args),
+      };
+    }
+  }
+
+  // Handle generic function call (fallback)
+  if (toolCall.function) {
+    let toolInput: unknown;
+    try {
+      toolInput = JSON.parse(toolCall.function.arguments || '{}');
+    } catch {
+      toolInput = { raw: toolCall.function.arguments };
+    }
+    return {
+      toolName: toolCall.function.name,
+      toolInput,
+    };
+  }
+
+  return null;
+}
+
+/**
+ * Format the result content for a completed Cursor tool call
+ */
+function formatCursorToolResult(toolCall: CursorToolCallEvent['tool_call']): string {
+  for (const [key, handler] of Object.entries(CURSOR_TOOL_HANDLERS)) {
+    const toolData = toolCall[key as keyof typeof toolCall] as
+      | {
+          args?: unknown;
+          result?: { success?: unknown; rejected?: { reason: string } };
+        }
+      | undefined;
+
+    if (toolData?.result) {
+      if (toolData.result.success && handler.formatResult) {
+        return handler.formatResult(toolData.result.success, toolData.args);
+      }
+      if (toolData.result.rejected && handler.formatRejected) {
+        return handler.formatRejected(toolData.result.rejected.reason);
+      }
+    }
+  }
+
+  return '';
+}
+
+// =============================================================================
+// Error Codes
+// =============================================================================
+
+/**
+ * Cursor-specific error codes for detailed error handling
+ */
+export enum CursorErrorCode {
+  NOT_INSTALLED = 'CURSOR_NOT_INSTALLED',
+  NOT_AUTHENTICATED = 'CURSOR_NOT_AUTHENTICATED',
+  RATE_LIMITED = 'CURSOR_RATE_LIMITED',
+  MODEL_UNAVAILABLE = 'CURSOR_MODEL_UNAVAILABLE',
+  NETWORK_ERROR = 'CURSOR_NETWORK_ERROR',
+  PROCESS_CRASHED = 'CURSOR_PROCESS_CRASHED',
+  TIMEOUT = 'CURSOR_TIMEOUT',
+  UNKNOWN = 'CURSOR_UNKNOWN_ERROR',
+}
+
+export interface CursorError extends Error {
+  code: CursorErrorCode;
+  recoverable: boolean;
+  suggestion?: string;
+}
+
+/**
+ * CursorProvider - Integrates cursor-agent CLI as an AI provider
+ *
+ * Extends CliProvider with Cursor-specific behavior:
+ * - WSL required on Windows (cursor-agent has no native Windows build)
+ * - Versions directory detection for cursor-agent installations
+ * - Session ID tracking for conversation continuity
+ * - Text block deduplication (Cursor sends duplicate chunks)
+ */
+export class CursorProvider extends CliProvider {
+  /**
+   * Version data directory where cursor-agent stores versions
+   * The install script creates versioned folders like:
+   *   ~/.local/share/cursor-agent/versions/2025.12.17-996666f/cursor-agent
+   */
+  private static VERSIONS_DIR = path.join(os.homedir(), '.local/share/cursor-agent/versions');
+
+  constructor(config: ProviderConfig = {}) {
+    super(config);
+    // Trigger CLI detection on construction (eager for Cursor)
+    this.ensureCliDetected();
+  }
+
+  // ==========================================================================
+  // CliProvider Abstract Method Implementations
+  // ==========================================================================
+
+  getName(): string {
+    return 'cursor';
+  }
+
+  getCliName(): string {
+    return 'cursor-agent';
+  }
+
+  getSpawnConfig(): CliSpawnConfig {
+    return {
+      windowsStrategy: 'direct',
+      commonPaths: {
+        linux: [
+          path.join(os.homedir(), '.local/bin/cursor-agent'), // Primary symlink location
+          '/usr/local/bin/cursor-agent',
+        ],
+        darwin: [path.join(os.homedir(), '.local/bin/cursor-agent'), '/usr/local/bin/cursor-agent'],
+        win32: [
+          path.join(
+            process.env.LOCALAPPDATA || path.join(os.homedir(), 'AppData', 'Local'),
+            'Programs',
+            'Cursor',
+            'resources',
+            'app',
+            'bin',
+            'cursor-agent.exe'
+          ),
+          path.join(
+            process.env.LOCALAPPDATA || path.join(os.homedir(), 'AppData', 'Local'),
+            'Programs',
+            'Cursor',
+            'resources',
+            'app',
+            'bin',
+            'cursor-agent.cmd'
+          ),
+          path.join(
+            process.env.LOCALAPPDATA || path.join(os.homedir(), 'AppData', 'Local'),
+            'Programs',
+            'Cursor',
+            'resources',
+            'app',
+            'bin',
+            'cursor.exe'
+          ),
+          path.join(
+            process.env.LOCALAPPDATA || path.join(os.homedir(), 'AppData', 'Local'),
+            'Programs',
+            'Cursor',
+            'cursor.exe'
+          ),
+          path.join(
+            process.env.LOCALAPPDATA || path.join(os.homedir(), 'AppData', 'Local'),
+            'Programs',
+            'cursor',
+            'resources',
+            'app',
+            'bin',
+            'cursor-agent.exe'
+          ),
+          path.join(
+            process.env.LOCALAPPDATA || path.join(os.homedir(), 'AppData', 'Local'),
+            'Programs',
+            'cursor',
+            'resources',
+            'app',
+            'bin',
+            'cursor-agent.cmd'
+          ),
+          path.join(
+            process.env.LOCALAPPDATA || path.join(os.homedir(), 'AppData', 'Local'),
+            'Programs',
+            'cursor',
+            'resources',
+            'app',
+            'bin',
+            'cursor.exe'
+          ),
+          path.join(
+            process.env.LOCALAPPDATA || path.join(os.homedir(), 'AppData', 'Local'),
+            'Programs',
+            'cursor',
+            'cursor.exe'
+          ),
+          path.join(
+            process.env.APPDATA || path.join(os.homedir(), 'AppData', 'Roaming'),
+            'npm',
+            'cursor-agent.cmd'
+          ),
+          path.join(
+            process.env.APPDATA || path.join(os.homedir(), 'AppData', 'Roaming'),
+            'npm',
+            'cursor.cmd'
+          ),
+          path.join(
+            process.env.APPDATA || path.join(os.homedir(), 'AppData', 'Roaming'),
+            '.npm-global',
+            'bin',
+            'cursor-agent.cmd'
+          ),
+          path.join(
+            process.env.APPDATA || path.join(os.homedir(), 'AppData', 'Roaming'),
+            '.npm-global',
+            'bin',
+            'cursor.cmd'
+          ),
+          path.join(
+            process.env.LOCALAPPDATA || path.join(os.homedir(), 'AppData', 'Local'),
+            'pnpm',
+            'cursor-agent.cmd'
+          ),
+          path.join(
+            process.env.LOCALAPPDATA || path.join(os.homedir(), 'AppData', 'Local'),
+            'pnpm',
+            'cursor.cmd'
+          ),
+        ],
+      },
+    };
+  }
+
+  /**
+   * Extract prompt text from ExecuteOptions
+   * Used to pass prompt via stdin instead of CLI args to avoid shell escaping issues
+   */
+  private extractPromptText(options: ExecuteOptions): string {
+    if (typeof options.prompt === 'string') {
+      return options.prompt;
+    } else if (Array.isArray(options.prompt)) {
+      return options.prompt
+        .filter((p) => p.type === 'text' && p.text)
+        .map((p) => p.text)
+        .join('\n');
+    } else {
+      throw new Error('Invalid prompt format');
+    }
+  }
+
+  buildCliArgs(options: ExecuteOptions): string[] {
+    // Model is already bare (no prefix) - validated by executeQuery
+    const model = options.model || 'auto';
+
+    // Build CLI arguments for cursor-agent
+    // NOTE: Prompt is NOT included here - it's passed via stdin to avoid
+    // shell escaping issues when content contains $(), backticks, etc.
+    const cliArgs: string[] = [];
+
+    // If using Cursor IDE (cliPath is 'cursor' not 'cursor-agent'), add 'agent' subcommand
+    if (this.cliPath && !this.cliPath.includes('cursor-agent')) {
+      cliArgs.push('agent');
+    }
+
+    cliArgs.push(
+      '-p', // Print mode (non-interactive)
+      '--output-format',
+      'stream-json',
+      '--stream-partial-output' // Real-time streaming
+    );
+
+    // In read-only mode, use --mode ask for Q&A style (no tools)
+    // Otherwise, add --force to allow file edits
+    if (options.readOnly) {
+      cliArgs.push('--mode', 'ask');
+    } else {
+      cliArgs.push('--force');
+    }
+
+    // Add model if not auto
+    if (model !== 'auto') {
+      cliArgs.push('--model', model);
+    }
+
+    // Resume an existing chat when a provider session ID is available
+    if (options.sdkSessionId) {
+      cliArgs.push('--resume', options.sdkSessionId);
+    }
+
+    // Use '-' to indicate reading prompt from stdin
+    cliArgs.push('-');
+
+    return cliArgs;
+  }
+
+  /**
+   * Convert Cursor event to AutoMaker ProviderMessage format
+   * Made public as required by CliProvider abstract method
+   */
+  normalizeEvent(event: unknown): ProviderMessage | null {
+    const cursorEvent = event as CursorStreamEvent;
+
+    switch (cursorEvent.type) {
+      case 'system':
+        // System init - we capture session_id but don't yield a message
+        return null;
+
+      case 'user':
+        // User message - already handled by caller
+        return null;
+
+      case 'assistant': {
+        const assistantEvent = cursorEvent as CursorAssistantEvent;
+        return {
+          type: 'assistant',
+          session_id: assistantEvent.session_id,
+          message: {
+            role: 'assistant',
+            content: assistantEvent.message.content.map((c) => ({
+              type: 'text' as const,
+              text: c.text,
+            })),
+          },
+        };
+      }
+
+      case 'tool_call': {
+        const toolEvent = cursorEvent as CursorToolCallEvent;
+        const toolCall = toolEvent.tool_call;
+
+        // Use the tool handler registry to process the tool call
+        const processed = processCursorToolCall(toolCall);
+        if (!processed) {
+          // Log unrecognized tool call structure for debugging
+          const toolCallKeys = Object.keys(toolCall);
+          logger.warn(
+            `[UNHANDLED TOOL_CALL] Unknown tool call structure. Keys: ${toolCallKeys.join(', ')}. ` +
+              `Full tool_call: ${JSON.stringify(toolCall).substring(0, 500)}`
+          );
+          return null;
+        }
+
+        const { toolName, toolInput } = processed;
+
+        // For started events, emit tool_use
+        if (toolEvent.subtype === 'started') {
+          return {
+            type: 'assistant',
+            session_id: toolEvent.session_id,
+            message: {
+              role: 'assistant',
+              content: [
+                {
+                  type: 'tool_use',
+                  name: toolName,
+                  tool_use_id: toolEvent.call_id,
+                  input: toolInput,
+                },
+              ],
+            },
+          };
+        }
+
+        // For completed events, emit both tool_use and tool_result
+        if (toolEvent.subtype === 'completed') {
+          const resultContent = formatCursorToolResult(toolCall);
+
+          return {
+            type: 'assistant',
+            session_id: toolEvent.session_id,
+            message: {
+              role: 'assistant',
+              content: [
+                {
+                  type: 'tool_use',
+                  name: toolName,
+                  tool_use_id: toolEvent.call_id,
+                  input: toolInput,
+                },
+                {
+                  type: 'tool_result',
+                  tool_use_id: toolEvent.call_id,
+                  content: resultContent,
+                },
+              ],
+            },
+          };
+        }
+
+        return null;
+      }
+
+      case 'result': {
+        const resultEvent = cursorEvent as CursorResultEvent;
+
+        if (resultEvent.is_error) {
+          const errorText = resultEvent.error || resultEvent.result || '';
+          const enrichedError =
+            errorText ||
+            `Cursor agent failed (duration: ${resultEvent.duration_ms}ms, subtype: ${resultEvent.subtype}, session: ${resultEvent.session_id ?? 'none'})`;
+          return {
+            type: 'error',
+            session_id: resultEvent.session_id,
+            error: enrichedError,
+          };
+        }
+
+        return {
+          type: 'result',
+          subtype: 'success',
+          session_id: resultEvent.session_id,
+          result: resultEvent.result,
+        };
+      }
+
+      default:
+        return null;
+    }
+  }
+
+  // ==========================================================================
+  // CliProvider Overrides
+  // ==========================================================================
+
+  /**
+   * Override CLI detection to add Cursor-specific checks:
+   * 1. Versions directory for cursor-agent installations
+   * 2. Cursor IDE with 'cursor agent' subcommand support
+   */
+  protected detectCli(): CliDetectionResult {
+    if (process.platform === 'win32') {
+      const findInPath = (command: string): string | null => {
+        try {
+          const result = execSync(`where ${command}`, {
+            encoding: 'utf8',
+            timeout: 5000,
+            stdio: ['pipe', 'pipe', 'pipe'],
+            windowsHide: true,
+          })
+            .trim()
+            .split(/\r?\n/)[0];
+
+          if (result && fs.existsSync(result)) {
+            return result;
+          }
+        } catch {
+          // Not in PATH
+        }
+
+        return null;
+      };
+
+      const isCursorAgentBinary = (cliPath: string) =>
+        cliPath.toLowerCase().includes('cursor-agent');
+
+      const supportsCursorAgentSubcommand = (cliPath: string) => {
+        try {
+          execSync(`"${cliPath}" agent --version`, {
+            encoding: 'utf8',
+            timeout: 5000,
+            stdio: 'pipe',
+            windowsHide: true,
+          });
+          return true;
+        } catch {
+          return false;
+        }
+      };
+
+      const pathResult = findInPath('cursor-agent') || findInPath('cursor');
+      if (pathResult) {
+        if (isCursorAgentBinary(pathResult) || supportsCursorAgentSubcommand(pathResult)) {
+          return {
+            cliPath: pathResult,
+            useWsl: false,
+            strategy: pathResult.toLowerCase().endsWith('.cmd') ? 'cmd' : 'direct',
+          };
+        }
+      }
+
+      const config = this.getSpawnConfig();
+      for (const candidate of config.commonPaths.win32 || []) {
+        const resolved = candidate;
+        if (!fs.existsSync(resolved)) {
+          continue;
+        }
+        if (isCursorAgentBinary(resolved) || supportsCursorAgentSubcommand(resolved)) {
+          return {
+            cliPath: resolved,
+            useWsl: false,
+            strategy: resolved.toLowerCase().endsWith('.cmd') ? 'cmd' : 'direct',
+          };
+        }
+      }
+
+      const wslLogger = (msg: string) => logger.debug(msg);
+      if (isWslAvailable({ logger: wslLogger })) {
+        const wslResult = findCliInWsl('cursor-agent', { logger: wslLogger });
+        if (wslResult) {
+          logger.debug(
+            `Using cursor-agent via WSL (${wslResult.distribution || 'default'}): ${wslResult.wslPath}`
+          );
+          return {
+            cliPath: 'wsl.exe',
+            useWsl: true,
+            wslCliPath: wslResult.wslPath,
+            wslDistribution: wslResult.distribution,
+            strategy: 'wsl',
+          };
+        }
+      }
+
+      logger.debug('cursor-agent not found on Windows');
+      return { cliPath: null, useWsl: false, strategy: 'direct' };
+    }
+
+    // First try standard detection (PATH, common paths, WSL)
+    const result = super.detectCli();
+    if (result.cliPath) {
+      return result;
+    }
+
+    // Cursor-specific: Check versions directory for any installed version
+    // This handles cases where cursor-agent is installed but not in PATH
+    if (fs.existsSync(CursorProvider.VERSIONS_DIR)) {
+      try {
+        const versions = fs
+          .readdirSync(CursorProvider.VERSIONS_DIR)
+          .filter((v) => !v.startsWith('.'))
+          .sort()
+          .reverse(); // Most recent first
+
+        for (const version of versions) {
+          const versionPath = path.join(CursorProvider.VERSIONS_DIR, version, 'cursor-agent');
+          if (fs.existsSync(versionPath)) {
+            logger.debug(`Found cursor-agent version ${version} at: ${versionPath}`);
+            return {
+              cliPath: versionPath,
+              useWsl: false,
+              strategy: 'native',
+            };
+          }
+        }
+      } catch {
+        // Ignore directory read errors
+      }
+    }
+
+    // If cursor-agent not found, try to find 'cursor' IDE and use 'cursor agent' subcommand
+    // The Cursor IDE includes the agent as a subcommand: cursor agent
+    const cursorPaths = [
+      '/usr/bin/cursor',
+      '/usr/local/bin/cursor',
+      path.join(os.homedir(), '.local/bin/cursor'),
+      '/opt/cursor/cursor',
+    ];
+
+    for (const cursorPath of cursorPaths) {
+      if (fs.existsSync(cursorPath)) {
+        // Verify cursor agent subcommand works
+        try {
+          execSync(`"${cursorPath}" agent --version`, {
+            encoding: 'utf8',
+            timeout: 5000,
+            stdio: 'pipe',
+          });
+          logger.debug(`Using cursor agent via Cursor IDE: ${cursorPath}`);
+          // Return cursor path but we'll use 'cursor agent' subcommand
+          return {
+            cliPath: cursorPath,
+            useWsl: false,
+            strategy: 'native',
+          };
+        } catch {
+          // cursor agent subcommand doesn't work, try next path
+        }
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Override error mapping for Cursor-specific error codes
+   */
+  protected mapError(stderr: string, exitCode: number | null): CliErrorInfo {
+    const lower = stderr.toLowerCase();
+
+    if (
+      lower.includes('not authenticated') ||
+      lower.includes('please log in') ||
+      lower.includes('unauthorized')
+    ) {
+      return {
+        code: CursorErrorCode.NOT_AUTHENTICATED,
+        message: 'Cursor CLI is not authenticated',
+        recoverable: true,
+        suggestion: 'Run "cursor-agent login" to authenticate with your browser',
+      };
+    }
+
+    if (
+      lower.includes('rate limit') ||
+      lower.includes('too many requests') ||
+      lower.includes('429')
+    ) {
+      return {
+        code: CursorErrorCode.RATE_LIMITED,
+        message: 'Cursor API rate limit exceeded',
+        recoverable: true,
+        suggestion: 'Wait a few minutes and try again, or upgrade to Cursor Pro',
+      };
+    }
+
+    if (
+      lower.includes('model not available') ||
+      lower.includes('invalid model') ||
+      lower.includes('unknown model')
+    ) {
+      return {
+        code: CursorErrorCode.MODEL_UNAVAILABLE,
+        message: 'Requested model is not available',
+        recoverable: true,
+        suggestion: 'Try using "auto" mode or select a different model',
+      };
+    }
+
+    if (
+      lower.includes('network') ||
+      lower.includes('connection') ||
+      lower.includes('econnrefused') ||
+      lower.includes('timeout')
+    ) {
+      return {
+        code: CursorErrorCode.NETWORK_ERROR,
+        message: 'Network connection error',
+        recoverable: true,
+        suggestion: 'Check your internet connection and try again',
+      };
+    }
+
+    if (exitCode === 137 || lower.includes('killed') || lower.includes('sigterm')) {
+      return {
+        code: CursorErrorCode.PROCESS_CRASHED,
+        message: 'Cursor agent process was terminated',
+        recoverable: true,
+        suggestion: 'The process may have run out of memory. Try a simpler task.',
+      };
+    }
+
+    return {
+      code: CursorErrorCode.UNKNOWN,
+      message: stderr || `Cursor agent exited with code ${exitCode}`,
+      recoverable: false,
+    };
+  }
+
+  /**
+   * Override install instructions for Cursor-specific guidance
+   */
+  protected getInstallInstructions(): string {
+    if (process.platform === 'win32') {
+      return 'cursor-agent requires WSL on Windows. Install WSL, then run in WSL: curl https://cursor.com/install -fsS | bash';
+    }
+    return 'Install with: curl https://cursor.com/install -fsS | bash';
+  }
+
+  /**
+   * Execute a prompt using Cursor CLI with streaming
+   *
+   * Overrides base class to add:
+   * - Session ID tracking from system init events
+   * - Text block deduplication (Cursor sends duplicate chunks)
+   */
+  async *executeQuery(options: ExecuteOptions): AsyncGenerator<ProviderMessage> {
+    this.ensureCliDetected();
+
+    // Validate that model doesn't have a provider prefix (except cursor- which should already be stripped)
+    // AgentService should strip prefixes before passing to providers
+    // Note: Cursor's Gemini models (e.g., "gemini-3-pro") legitimately start with "gemini-"
+    validateBareModelId(options.model, 'CursorProvider', 'cursor');
+
+    if (!this.cliPath) {
+      throw this.createError(
+        CursorErrorCode.NOT_INSTALLED,
+        'Cursor CLI is not installed',
+        true,
+        this.getInstallInstructions()
+      );
+    }
+
+    // MCP servers are not yet supported by Cursor CLI - log warning but continue
+    if (options.mcpServers && Object.keys(options.mcpServers).length > 0) {
+      const serverCount = Object.keys(options.mcpServers).length;
+      logger.warn(
+        `MCP servers configured (${serverCount}) but not yet supported by Cursor CLI in AutoMaker. ` +
+          `MCP support for Cursor will be added in a future release. ` +
+          `The configured MCP servers will be ignored for this execution.`
+      );
+    }
+
+    // Embed system prompt into user prompt (Cursor CLI doesn't support separate system messages)
+    const effectiveOptions = this.embedSystemPromptIntoPrompt(options);
+
+    // Extract prompt text to pass via stdin (avoids shell escaping issues)
+    const promptText = this.extractPromptText(effectiveOptions);
+
+    const cliArgs = this.buildCliArgs(effectiveOptions);
+    const subprocessOptions = this.buildSubprocessOptions(options, cliArgs);
+
+    // Pass prompt via stdin to avoid shell interpretation of special characters
+    // like $(), backticks, etc. that may appear in file content
+    subprocessOptions.stdinData = promptText;
+
+    let sessionId: string | undefined;
+
+    // Dedup state for Cursor-specific text block handling
+    let lastTextBlock = '';
+    let accumulatedText = '';
+
+    logger.debug(`CursorProvider.executeQuery called with model: "${options.model}"`);
+
+    // Get effective permissions for this project and detect the active profile
+    const effectivePermissions = await getEffectivePermissions(options.cwd || process.cwd());
+    const activeProfile = detectProfile(effectivePermissions);
+    logger.debug(
+      `Active permission profile: ${activeProfile ?? 'none'}, permissions: ${JSON.stringify(effectivePermissions)}`
+    );
+
+    // Debug: log raw events when AUTOMAKER_DEBUG_RAW_OUTPUT is enabled
+    const debugRawEvents =
+      process.env.AUTOMAKER_DEBUG_RAW_OUTPUT === 'true' ||
+      process.env.AUTOMAKER_DEBUG_RAW_OUTPUT === '1';
+
+    try {
+      for await (const rawEvent of spawnJSONLProcess(subprocessOptions)) {
+        const event = rawEvent as CursorStreamEvent;
+
+        // Log raw event for debugging
+        if (debugRawEvents) {
+          const subtype = 'subtype' in event ? (event.subtype as string) : 'none';
+          logger.info(`[RAW EVENT] type=${event.type} subtype=${subtype}`);
+          if (event.type === 'tool_call') {
+            const toolEvent = event as CursorToolCallEvent;
+            const tc = toolEvent.tool_call;
+            const toolTypes =
+              [
+                tc.readToolCall && 'read',
+                tc.writeToolCall && 'write',
+                tc.editToolCall && 'edit',
+                tc.shellToolCall && 'shell',
+                tc.deleteToolCall && 'delete',
+                tc.grepToolCall && 'grep',
+                tc.lsToolCall && 'ls',
+                tc.globToolCall && 'glob',
+                tc.function && `function:${tc.function.name}`,
+              ]
+                .filter(Boolean)
+                .join(',') || 'unknown';
+            logger.info(
+              `[RAW TOOL_CALL] call_id=${toolEvent.call_id} types=[${toolTypes}]` +
+                (tc.shellToolCall ? ` cmd="${tc.shellToolCall.args?.command}"` : '') +
+                (tc.writeToolCall ? ` path="${tc.writeToolCall.args?.path}"` : '')
+            );
+          }
+        }
+
+        // Capture session ID from system init
+        if (event.type === 'system' && (event as CursorSystemEvent).subtype === 'init') {
+          sessionId = event.session_id;
+          logger.debug(`Session started: ${sessionId}`);
+        }
+
+        // Normalize and yield the event
+        const normalized = this.normalizeEvent(event);
+        if (!normalized && debugRawEvents) {
+          logger.info(`[DROPPED EVENT] type=${event.type} - normalizeEvent returned null`);
+        }
+        if (normalized) {
+          // Ensure session_id is always set
+          if (!normalized.session_id && sessionId) {
+            normalized.session_id = sessionId;
+          }
+
+          // Apply Cursor-specific dedup for assistant text messages
+          if (normalized.type === 'assistant' && normalized.message?.content) {
+            const dedupedContent = this.deduplicateTextBlocks(
+              normalized.message.content,
+              lastTextBlock,
+              accumulatedText
+            );
+
+            if (dedupedContent.content.length === 0) {
+              // All blocks were duplicates, skip this message
+              continue;
+            }
+
+            // Update state
+            lastTextBlock = dedupedContent.lastBlock;
+            accumulatedText = dedupedContent.accumulated;
+
+            // Update the message with deduped content
+            normalized.message.content = dedupedContent.content;
+          }
+
+          yield normalized;
+        }
+      }
+    } catch (error) {
+      if (isAbortError(error)) {
+        logger.debug('Query aborted');
+        return;
+      }
+
+      // Map CLI errors to CursorError
+      if (error instanceof Error && 'stderr' in error) {
+        const errorInfo = this.mapError(
+          (error as { stderr?: string }).stderr || error.message,
+          (error as { exitCode?: number | null }).exitCode ?? null
+        );
+        throw this.createError(
+          errorInfo.code as CursorErrorCode,
+          errorInfo.message,
+          errorInfo.recoverable,
+          errorInfo.suggestion
+        );
+      }
+      throw error;
+    }
+  }
+
+  // ==========================================================================
+  // Cursor-Specific Methods
+  // ==========================================================================
+
+  /**
+   * Create a CursorError with details
+   */
+  private createError(
+    code: CursorErrorCode,
+    message: string,
+    recoverable: boolean = false,
+    suggestion?: string
+  ): CursorError {
+    const error = new Error(message) as CursorError;
+    error.code = code;
+    error.recoverable = recoverable;
+    error.suggestion = suggestion;
+    error.name = 'CursorError';
+    return error;
+  }
+
+  /**
+   * Deduplicate text blocks in Cursor assistant messages
+   *
+   * Cursor often sends:
+   * 1. Duplicate consecutive text blocks (same text twice in a row)
+   * 2. A final accumulated block containing ALL previous text
+   *
+   * This method filters out these duplicates to prevent UI stuttering.
+   */
+  private deduplicateTextBlocks(
+    content: ContentBlock[],
+    lastTextBlock: string,
+    accumulatedText: string
+  ): { content: ContentBlock[]; lastBlock: string; accumulated: string } {
+    const filtered: ContentBlock[] = [];
+    let newLastBlock = lastTextBlock;
+    let newAccumulated = accumulatedText;
+
+    for (const block of content) {
+      if (block.type !== 'text' || !block.text) {
+        filtered.push(block);
+        continue;
+      }
+
+      const text = block.text;
+
+      // Skip empty text
+      if (!text.trim()) continue;
+
+      // Skip duplicate consecutive text blocks
+      if (text === newLastBlock) {
+        continue;
+      }
+
+      // Skip final accumulated text block
+      // Cursor sends one large block containing ALL previous text at the end
+      if (newAccumulated.length > 100 && text.length > newAccumulated.length * 0.8) {
+        const normalizedAccum = newAccumulated.replace(/\s+/g, ' ').trim();
+        const normalizedNew = text.replace(/\s+/g, ' ').trim();
+        if (normalizedNew.includes(normalizedAccum.slice(0, 100))) {
+          // This is the final accumulated block, skip it
+          continue;
+        }
+      }
+
+      // This is a valid new text block
+      newLastBlock = text;
+      newAccumulated += text;
+      filtered.push(block);
+    }
+
+    return {
+      content: filtered,
+      lastBlock: newLastBlock,
+      accumulated: newAccumulated,
+    };
+  }
+
+  /**
+   * Get Cursor CLI version
+   */
+  async getVersion(): Promise<string | null> {
+    this.ensureCliDetected();
+    if (!this.cliPath) return null;
+
+    try {
+      if (this.useWsl && this.wslCliPath) {
+        const result = execInWsl(`${this.wslCliPath} --version`, {
+          timeout: 5000,
+          distribution: this.wslDistribution,
+        });
+        return result;
+      }
+
+      // If using Cursor IDE, use 'cursor agent --version'
+      const versionCmd = this.cliPath.includes('cursor-agent')
+        ? `"${this.cliPath}" --version`
+        : `"${this.cliPath}" agent --version`;
+
+      const result = execSync(versionCmd, {
+        encoding: 'utf8',
+        timeout: 5000,
+        stdio: 'pipe',
+      }).trim();
+      return result;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Check authentication status
+   */
+  async checkAuth(): Promise<CursorAuthStatus> {
+    this.ensureCliDetected();
+    if (!this.cliPath) {
+      return { authenticated: false, method: 'none' };
+    }
+
+    // Check for API key in environment with validation
+    if (process.env.CURSOR_API_KEY) {
+      const validation = validateApiKey(process.env.CURSOR_API_KEY, 'cursor');
+      if (!validation.isValid) {
+        logger.warn('Cursor API key validation failed:', validation.error);
+        return { authenticated: false, method: 'api_key', error: validation.error };
+      }
+      return { authenticated: true, method: 'api_key' };
+    }
+
+    // For WSL mode, check credentials inside WSL
+    if (this.useWsl && this.wslCliPath) {
+      const wslOpts = { timeout: 5000, distribution: this.wslDistribution };
+
+      // Check for credentials file inside WSL
+      const wslCredPaths = [
+        '$HOME/.cursor/credentials.json',
+        '$HOME/.config/cursor/credentials.json',
+      ];
+
+      for (const credPath of wslCredPaths) {
+        const content = execInWsl(`sh -c "cat ${credPath} 2>/dev/null || echo ''"`, wslOpts);
+        if (content && content.trim()) {
+          try {
+            const creds = JSON.parse(content);
+            if (creds.accessToken || creds.token) {
+              return { authenticated: true, method: 'login', hasCredentialsFile: true };
+            }
+          } catch {
+            // Invalid credentials file
+          }
+        }
+      }
+
+      // Try running --version to check if CLI works
+      const versionResult = execInWsl(`${this.wslCliPath} --version`, {
+        timeout: 10000,
+        distribution: this.wslDistribution,
+      });
+      if (versionResult) {
+        return { authenticated: true, method: 'login' };
+      }
+
+      return { authenticated: false, method: 'none' };
+    }
+
+    // Native mode (Linux/macOS) - check local credentials
+    const credentialPaths = [
+      path.join(os.homedir(), '.cursor', 'credentials.json'),
+      path.join(os.homedir(), '.config', 'cursor', 'credentials.json'),
+    ];
+
+    for (const credPath of credentialPaths) {
+      if (fs.existsSync(credPath)) {
+        try {
+          const content = fs.readFileSync(credPath, 'utf8');
+          const creds = JSON.parse(content);
+          if (creds.accessToken || creds.token) {
+            return { authenticated: true, method: 'login', hasCredentialsFile: true };
+          }
+        } catch {
+          // Invalid credentials file
+        }
+      }
+    }
+
+    // Try running a simple command to check auth
+    try {
+      execSync(`"${this.cliPath}" --version`, {
+        encoding: 'utf8',
+        timeout: 10000,
+        env: { ...process.env },
+      });
+      return { authenticated: true, method: 'login' };
+    } catch (error: unknown) {
+      const execError = error as { stderr?: string };
+      if (execError.stderr?.includes('not authenticated') || execError.stderr?.includes('log in')) {
+        return { authenticated: false, method: 'none' };
+      }
+    }
+
+    return { authenticated: false, method: 'none' };
+  }
+
+  /**
+   * Detect installation status (required by BaseProvider)
+   */
+  async detectInstallation(): Promise<InstallationStatus> {
+    const installed = await this.isInstalled();
+    const version = installed ? await this.getVersion() : undefined;
+    const auth = await this.checkAuth();
+
+    // Determine the display path - for WSL, show the WSL path with distribution
+    const displayPath =
+      this.useWsl && this.wslCliPath
+        ? `(WSL${this.wslDistribution ? `:${this.wslDistribution}` : ''}) ${this.wslCliPath}`
+        : this.cliPath || undefined;
+
+    return {
+      installed,
+      version: version || undefined,
+      path: displayPath,
+      method: this.useWsl ? 'wsl' : 'cli',
+      hasApiKey: !!process.env.CURSOR_API_KEY,
+      authenticated: auth.authenticated,
+    };
+  }
+
+  /**
+   * Get the detected CLI path (public accessor for status endpoints)
+   */
+  getCliPath(): string | null {
+    this.ensureCliDetected();
+    return this.cliPath;
+  }
+
+  /**
+   * Get available Cursor models
+   */
+  getAvailableModels(): ModelDefinition[] {
+    return Object.entries(CURSOR_MODEL_MAP).map(([id, config]) => ({
+      id: `cursor-${id}`,
+      name: config.label,
+      modelString: id,
+      provider: 'cursor',
+      description: config.description,
+      supportsTools: true,
+      supportsVision: config.supportsVision,
+    }));
+  }
+
+  /**
+   * Check if a feature is supported
+   */
+  supportsFeature(feature: string): boolean {
+    const supported = ['tools', 'text', 'streaming'];
+    return supported.includes(feature);
+  }
+}
diff --git a/temp_repo/apps/server/src/providers/gemini-provider.ts b/temp_repo/apps/server/src/providers/gemini-provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9723de45a00ba5037163cd0315f9f31335b3a518
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/gemini-provider.ts
@@ -0,0 +1,900 @@
+/**
+ * Gemini Provider - Executes queries using the Gemini CLI
+ *
+ * Extends CliProvider with Gemini-specific:
+ * - Event normalization for Gemini's JSONL streaming format
+ * - Google account and API key authentication support
+ * - Thinking level configuration
+ *
+ * Based on https://github.com/google-gemini/gemini-cli
+ */
+
+import { execSync } from 'child_process';
+import * as fs from 'fs/promises';
+import * as path from 'path';
+import * as os from 'os';
+import { CliProvider, type CliSpawnConfig, type CliErrorInfo } from './cli-provider.js';
+import type {
+  ProviderConfig,
+  ExecuteOptions,
+  ProviderMessage,
+  InstallationStatus,
+  ModelDefinition,
+} from './types.js';
+import { validateBareModelId } from '@automaker/types';
+import { GEMINI_MODEL_MAP, type GeminiAuthStatus } from '@automaker/types';
+import { createLogger, isAbortError } from '@automaker/utils';
+import { spawnJSONLProcess, type SubprocessOptions } from '@automaker/platform';
+import { normalizeTodos } from './tool-normalization.js';
+
+// Create logger for this module
+const logger = createLogger('GeminiProvider');
+
+// =============================================================================
+// Gemini Stream Event Types
+// =============================================================================
+
+/**
+ * Base event structure from Gemini CLI --output-format stream-json
+ *
+ * Actual CLI output format:
+ * {"type":"init","timestamp":"...","session_id":"...","model":"..."}
+ * {"type":"message","timestamp":"...","role":"user","content":"..."}
+ * {"type":"message","timestamp":"...","role":"assistant","content":"...","delta":true}
+ * {"type":"tool_use","timestamp":"...","tool_name":"...","tool_id":"...","parameters":{...}}
+ * {"type":"tool_result","timestamp":"...","tool_id":"...","status":"success","output":"..."}
+ * {"type":"result","timestamp":"...","status":"success","stats":{...}}
+ */
+interface GeminiStreamEvent {
+  type: 'init' | 'message' | 'tool_use' | 'tool_result' | 'result' | 'error';
+  timestamp?: string;
+  session_id?: string;
+}
+
+interface GeminiInitEvent extends GeminiStreamEvent {
+  type: 'init';
+  session_id: string;
+  model: string;
+}
+
+interface GeminiMessageEvent extends GeminiStreamEvent {
+  type: 'message';
+  role: 'user' | 'assistant';
+  content: string;
+  delta?: boolean;
+  session_id?: string;
+}
+
+interface GeminiToolUseEvent extends GeminiStreamEvent {
+  type: 'tool_use';
+  tool_id: string;
+  tool_name: string;
+  parameters: Record<string, unknown>;
+  session_id?: string;
+}
+
+interface GeminiToolResultEvent extends GeminiStreamEvent {
+  type: 'tool_result';
+  tool_id: string;
+  status: 'success' | 'error';
+  output: string;
+  session_id?: string;
+}
+
+interface GeminiResultEvent extends GeminiStreamEvent {
+  type: 'result';
+  status: 'success' | 'error';
+  stats?: {
+    total_tokens?: number;
+    input_tokens?: number;
+    output_tokens?: number;
+    cached?: number;
+    input?: number;
+    duration_ms?: number;
+    tool_calls?: number;
+  };
+  error?: string;
+  session_id?: string;
+}
+
+// =============================================================================
+// Error Codes
+// =============================================================================
+
+export enum GeminiErrorCode {
+  NOT_INSTALLED = 'GEMINI_NOT_INSTALLED',
+  NOT_AUTHENTICATED = 'GEMINI_NOT_AUTHENTICATED',
+  RATE_LIMITED = 'GEMINI_RATE_LIMITED',
+  MODEL_UNAVAILABLE = 'GEMINI_MODEL_UNAVAILABLE',
+  NETWORK_ERROR = 'GEMINI_NETWORK_ERROR',
+  PROCESS_CRASHED = 'GEMINI_PROCESS_CRASHED',
+  TIMEOUT = 'GEMINI_TIMEOUT',
+  UNKNOWN = 'GEMINI_UNKNOWN_ERROR',
+}
+
+export interface GeminiError extends Error {
+  code: GeminiErrorCode;
+  recoverable: boolean;
+  suggestion?: string;
+}
+
+// =============================================================================
+// Tool Name Normalization
+// =============================================================================
+
+/**
+ * Gemini CLI tool name to standard tool name mapping
+ * This allows the UI to properly categorize and display Gemini tool calls
+ */
+const GEMINI_TOOL_NAME_MAP: Record<string, string> = {
+  write_todos: 'TodoWrite',
+  read_file: 'Read',
+  read_many_files: 'Read',
+  replace: 'Edit',
+  write_file: 'Write',
+  run_shell_command: 'Bash',
+  search_file_content: 'Grep',
+  glob: 'Glob',
+  list_directory: 'Ls',
+  web_fetch: 'WebFetch',
+  google_web_search: 'WebSearch',
+};
+
+/**
+ * Normalize Gemini tool names to standard tool names
+ */
+function normalizeGeminiToolName(geminiToolName: string): string {
+  return GEMINI_TOOL_NAME_MAP[geminiToolName] || geminiToolName;
+}
+
+/**
+ * Normalize Gemini tool input parameters to standard format
+ *
+ * Uses shared normalizeTodos utility for consistent todo normalization.
+ *
+ * Gemini `write_todos` format:
+ * {"todos": [{"description": "Task text", "status": "pending|in_progress|completed|cancelled"}]}
+ *
+ * Claude `TodoWrite` format:
+ * {"todos": [{"content": "Task text", "status": "pending|in_progress|completed", "activeForm": "..."}]}
+ */
+function normalizeGeminiToolInput(
+  toolName: string,
+  input: Record<string, unknown>
+): Record<string, unknown> {
+  // Normalize write_todos using shared utility
+  if (toolName === 'write_todos' && Array.isArray(input.todos)) {
+    return { todos: normalizeTodos(input.todos) };
+  }
+  return input;
+}
+
+/**
+ * GeminiProvider - Integrates Gemini CLI as an AI provider
+ *
+ * Features:
+ * - Google account OAuth login support
+ * - API key authentication (GEMINI_API_KEY)
+ * - Vertex AI support
+ * - Thinking level configuration
+ * - Streaming JSON output
+ */
+export class GeminiProvider extends CliProvider {
+  constructor(config: ProviderConfig = {}) {
+    super(config);
+    // Trigger CLI detection on construction
+    this.ensureCliDetected();
+  }
+
+  // ==========================================================================
+  // CliProvider Abstract Method Implementations
+  // ==========================================================================
+
+  getName(): string {
+    return 'gemini';
+  }
+
+  getCliName(): string {
+    return 'gemini';
+  }
+
+  getSpawnConfig(): CliSpawnConfig {
+    return {
+      windowsStrategy: 'npx', // Gemini CLI can be run via npx
+      npxPackage: '@google/gemini-cli', // Official Google Gemini CLI package
+      commonPaths: {
+        linux: [
+          path.join(os.homedir(), '.local/bin/gemini'),
+          '/usr/local/bin/gemini',
+          path.join(os.homedir(), '.npm-global/bin/gemini'),
+        ],
+        darwin: [
+          path.join(os.homedir(), '.local/bin/gemini'),
+          '/usr/local/bin/gemini',
+          '/opt/homebrew/bin/gemini',
+          path.join(os.homedir(), '.npm-global/bin/gemini'),
+        ],
+        win32: [
+          path.join(os.homedir(), 'AppData', 'Roaming', 'npm', 'gemini.cmd'),
+          path.join(os.homedir(), '.npm-global', 'gemini.cmd'),
+        ],
+      },
+    };
+  }
+
+  /**
+   * Extract prompt text from ExecuteOptions
+   */
+  private extractPromptText(options: ExecuteOptions): string {
+    if (typeof options.prompt === 'string') {
+      return options.prompt;
+    } else if (Array.isArray(options.prompt)) {
+      return options.prompt
+        .filter((p) => p.type === 'text' && p.text)
+        .map((p) => p.text)
+        .join('\n');
+    } else {
+      throw new Error('Invalid prompt format');
+    }
+  }
+
+  buildCliArgs(options: ExecuteOptions): string[] {
+    // Model comes in stripped of provider prefix (e.g., '2.5-flash' from 'gemini-2.5-flash')
+    // We need to add 'gemini-' back since it's part of the actual CLI model name
+    const bareModel = options.model || '2.5-flash';
+    const cliArgs: string[] = [];
+
+    // Streaming JSON output format for real-time updates
+    cliArgs.push('--output-format', 'stream-json');
+
+    // Model selection - Gemini CLI expects full model names like "gemini-2.5-flash"
+    // Unlike Cursor CLI where 'cursor-' is just a routing prefix, for Gemini CLI
+    // the 'gemini-' is part of the actual model name Google expects
+    if (bareModel && bareModel !== 'auto') {
+      // Add gemini- prefix if not already present (handles edge cases)
+      const cliModel = bareModel.startsWith('gemini-') ? bareModel : `gemini-${bareModel}`;
+      cliArgs.push('--model', cliModel);
+    }
+
+    // Disable sandbox mode for faster execution (sandbox adds overhead)
+    cliArgs.push('--sandbox', 'false');
+
+    // YOLO mode for automatic approval (required for non-interactive use)
+    // Use explicit approval-mode for clearer semantics
+    cliArgs.push('--approval-mode', 'yolo');
+
+    // Force headless (non-interactive) mode with --prompt flag.
+    // The actual prompt content is passed via stdin (see buildSubprocessOptions()),
+    // but we MUST include -p to trigger headless mode. Without it, Gemini CLI
+    // starts in interactive mode which adds significant startup overhead
+    // (interactive REPL setup, extra context loading, etc.).
+    // Per Gemini CLI docs: stdin content is "appended to" the -p value.
+    cliArgs.push('--prompt', '');
+
+    // Explicitly include the working directory in allowed workspace directories
+    // This ensures Gemini CLI allows file operations in the project directory,
+    // even if it has a different workspace cached from a previous session
+    if (options.cwd) {
+      cliArgs.push('--include-directories', options.cwd);
+    }
+
+    // Resume an existing Gemini session when one is available
+    if (options.sdkSessionId) {
+      cliArgs.push('--resume', options.sdkSessionId);
+    }
+
+    // Note: Gemini CLI doesn't have a --thinking-level flag.
+    // Thinking capabilities are determined by the model selection (e.g., gemini-2.5-pro).
+    // The model handles thinking internally based on the task complexity.
+
+    return cliArgs;
+  }
+
+  /**
+   * Convert Gemini event to AutoMaker ProviderMessage format
+   */
+  normalizeEvent(event: unknown): ProviderMessage | null {
+    const geminiEvent = event as GeminiStreamEvent;
+
+    switch (geminiEvent.type) {
+      case 'init': {
+        // Init event - capture session but don't yield a message
+        const initEvent = geminiEvent as GeminiInitEvent;
+        logger.debug(
+          `Gemini init event: session=${initEvent.session_id}, model=${initEvent.model}`
+        );
+        return null;
+      }
+
+      case 'message': {
+        const messageEvent = geminiEvent as GeminiMessageEvent;
+
+        // Skip user messages - already handled by caller
+        if (messageEvent.role === 'user') {
+          return null;
+        }
+
+        // Handle assistant messages
+        if (messageEvent.role === 'assistant') {
+          return {
+            type: 'assistant',
+            session_id: messageEvent.session_id,
+            message: {
+              role: 'assistant',
+              content: [{ type: 'text', text: messageEvent.content }],
+            },
+          };
+        }
+
+        return null;
+      }
+
+      case 'tool_use': {
+        const toolEvent = geminiEvent as GeminiToolUseEvent;
+        const normalizedName = normalizeGeminiToolName(toolEvent.tool_name);
+        const normalizedInput = normalizeGeminiToolInput(
+          toolEvent.tool_name,
+          toolEvent.parameters as Record<string, unknown>
+        );
+
+        return {
+          type: 'assistant',
+          session_id: toolEvent.session_id,
+          message: {
+            role: 'assistant',
+            content: [
+              {
+                type: 'tool_use',
+                name: normalizedName,
+                tool_use_id: toolEvent.tool_id,
+                input: normalizedInput,
+              },
+            ],
+          },
+        };
+      }
+
+      case 'tool_result': {
+        const toolResultEvent = geminiEvent as GeminiToolResultEvent;
+        // If tool result is an error, prefix with error indicator
+        const content =
+          toolResultEvent.status === 'error'
+            ? `[ERROR] ${toolResultEvent.output}`
+            : toolResultEvent.output;
+        return {
+          type: 'assistant',
+          session_id: toolResultEvent.session_id,
+          message: {
+            role: 'assistant',
+            content: [
+              {
+                type: 'tool_result',
+                tool_use_id: toolResultEvent.tool_id,
+                content,
+              },
+            ],
+          },
+        };
+      }
+
+      case 'result': {
+        const resultEvent = geminiEvent as GeminiResultEvent;
+
+        if (resultEvent.status === 'error') {
+          const enrichedError =
+            resultEvent.error ||
+            `Gemini agent failed (duration: ${resultEvent.stats?.duration_ms ?? 'unknown'}ms, session: ${resultEvent.session_id ?? 'none'})`;
+          return {
+            type: 'error',
+            session_id: resultEvent.session_id,
+            error: enrichedError,
+          };
+        }
+
+        // Success result - include stats for logging
+        logger.debug(
+          `Gemini result: status=${resultEvent.status}, tokens=${resultEvent.stats?.total_tokens}`
+        );
+        return {
+          type: 'result',
+          subtype: 'success',
+          session_id: resultEvent.session_id,
+        };
+      }
+
+      case 'error': {
+        const errorEvent = geminiEvent as GeminiResultEvent;
+        const enrichedError =
+          errorEvent.error || `Gemini agent failed (session: ${errorEvent.session_id ?? 'none'})`;
+        return {
+          type: 'error',
+          session_id: errorEvent.session_id,
+          error: enrichedError,
+        };
+      }
+
+      default:
+        logger.debug(`Unknown Gemini event type: ${geminiEvent.type}`);
+        return null;
+    }
+  }
+
+  // ==========================================================================
+  // CliProvider Overrides
+  // ==========================================================================
+
+  /**
+   * Build subprocess options with stdin data for prompt and speed-optimized env vars.
+   *
+   * Passes the prompt via stdin instead of --prompt CLI arg to:
+   * - Avoid shell argument size limits with large prompts (system prompt + context)
+   * - Avoid shell escaping issues with special characters in prompts
+   * - Match the pattern used by Cursor, OpenCode, and Codex providers
+   *
+   * Also injects environment variables to reduce Gemini CLI startup overhead:
+   * - GEMINI_TELEMETRY_ENABLED=false: Disables OpenTelemetry collection
+   */
+  protected buildSubprocessOptions(options: ExecuteOptions, cliArgs: string[]): SubprocessOptions {
+    const subprocessOptions = super.buildSubprocessOptions(options, cliArgs);
+
+    // Pass prompt via stdin to avoid shell interpretation of special characters
+    // and shell argument size limits with large system prompts + context files
+    subprocessOptions.stdinData = this.extractPromptText(options);
+
+    // Disable telemetry to reduce startup overhead
+    if (subprocessOptions.env) {
+      subprocessOptions.env['GEMINI_TELEMETRY_ENABLED'] = 'false';
+    }
+
+    return subprocessOptions;
+  }
+
+  /**
+   * Override error mapping for Gemini-specific error codes
+   */
+  protected mapError(stderr: string, exitCode: number | null): CliErrorInfo {
+    const lower = stderr.toLowerCase();
+
+    if (
+      lower.includes('not authenticated') ||
+      lower.includes('please log in') ||
+      lower.includes('unauthorized') ||
+      lower.includes('login required') ||
+      lower.includes('error authenticating') ||
+      lower.includes('loadcodeassist') ||
+      (lower.includes('econnrefused') && lower.includes('8888'))
+    ) {
+      return {
+        code: GeminiErrorCode.NOT_AUTHENTICATED,
+        message: 'Gemini CLI is not authenticated',
+        recoverable: true,
+        suggestion:
+          'Run "gemini" interactively to log in, or set GEMINI_API_KEY environment variable',
+      };
+    }
+
+    if (
+      lower.includes('rate limit') ||
+      lower.includes('too many requests') ||
+      lower.includes('429') ||
+      lower.includes('quota exceeded')
+    ) {
+      return {
+        code: GeminiErrorCode.RATE_LIMITED,
+        message: 'Gemini API rate limit exceeded',
+        recoverable: true,
+        suggestion: 'Wait a few minutes and try again. Free tier: 60 req/min, 1000 req/day',
+      };
+    }
+
+    if (
+      lower.includes('model not available') ||
+      lower.includes('invalid model') ||
+      lower.includes('unknown model') ||
+      lower.includes('modelnotfounderror') ||
+      lower.includes('model not found') ||
+      (lower.includes('not found') && lower.includes('404'))
+    ) {
+      return {
+        code: GeminiErrorCode.MODEL_UNAVAILABLE,
+        message: 'Requested model is not available',
+        recoverable: true,
+        suggestion: 'Try using "gemini-2.5-flash" or select a different model',
+      };
+    }
+
+    if (
+      lower.includes('network') ||
+      lower.includes('connection') ||
+      lower.includes('econnrefused') ||
+      lower.includes('timeout')
+    ) {
+      return {
+        code: GeminiErrorCode.NETWORK_ERROR,
+        message: 'Network connection error',
+        recoverable: true,
+        suggestion: 'Check your internet connection and try again',
+      };
+    }
+
+    if (exitCode === 137 || lower.includes('killed') || lower.includes('sigterm')) {
+      return {
+        code: GeminiErrorCode.PROCESS_CRASHED,
+        message: 'Gemini CLI process was terminated',
+        recoverable: true,
+        suggestion: 'The process may have run out of memory. Try a simpler task.',
+      };
+    }
+
+    return {
+      code: GeminiErrorCode.UNKNOWN,
+      message: stderr || `Gemini CLI exited with code ${exitCode}`,
+      recoverable: false,
+    };
+  }
+
+  /**
+   * Override install instructions for Gemini-specific guidance
+   */
+  protected getInstallInstructions(): string {
+    return 'Install with: npm install -g @google/gemini-cli (or visit https://github.com/google-gemini/gemini-cli)';
+  }
+
+  /**
+   * Execute a prompt using Gemini CLI with streaming
+   */
+  async *executeQuery(options: ExecuteOptions): AsyncGenerator<ProviderMessage> {
+    this.ensureCliDetected();
+
+    // Validate that model doesn't have a provider prefix (except gemini- which should already be stripped)
+    validateBareModelId(options.model, 'GeminiProvider', 'gemini');
+
+    if (!this.cliPath) {
+      throw this.createError(
+        GeminiErrorCode.NOT_INSTALLED,
+        'Gemini CLI is not installed',
+        true,
+        this.getInstallInstructions()
+      );
+    }
+
+    // Ensure .geminiignore exists in the working directory to prevent Gemini CLI
+    // from scanning .git and node_modules directories during startup. This reduces
+    // startup time significantly (reported: 35s → 11s) by skipping large directories
+    // that Gemini CLI would otherwise traverse for context discovery.
+    await this.ensureGeminiIgnore(options.cwd || process.cwd());
+
+    // Embed system prompt into the user prompt so Gemini CLI receives
+    // project context (CLAUDE.md, CODE_QUALITY.md, etc.) that would
+    // otherwise be silently dropped since Gemini CLI has no --system-prompt flag.
+    const effectiveOptions = this.embedSystemPromptIntoPrompt(options);
+
+    // Build CLI args for headless execution.
+    const cliArgs = this.buildCliArgs(effectiveOptions);
+
+    const subprocessOptions = this.buildSubprocessOptions(effectiveOptions, cliArgs);
+
+    let sessionId: string | undefined;
+
+    logger.debug(`GeminiProvider.executeQuery called with model: "${options.model}"`);
+
+    try {
+      for await (const rawEvent of spawnJSONLProcess(subprocessOptions)) {
+        const event = rawEvent as GeminiStreamEvent;
+
+        // Capture session ID from init event
+        if (event.type === 'init') {
+          const initEvent = event as GeminiInitEvent;
+          sessionId = initEvent.session_id;
+          logger.debug(`Session started: ${sessionId}, model: ${initEvent.model}`);
+        }
+
+        // Normalize and yield the event
+        const normalized = this.normalizeEvent(event);
+        if (normalized) {
+          if (!normalized.session_id && sessionId) {
+            normalized.session_id = sessionId;
+          }
+          yield normalized;
+        }
+      }
+    } catch (error) {
+      if (isAbortError(error)) {
+        logger.debug('Query aborted');
+        return;
+      }
+
+      // Map CLI errors to GeminiError
+      if (error instanceof Error && 'stderr' in error) {
+        const errorInfo = this.mapError(
+          (error as { stderr?: string }).stderr || error.message,
+          (error as { exitCode?: number | null }).exitCode ?? null
+        );
+        throw this.createError(
+          errorInfo.code as GeminiErrorCode,
+          errorInfo.message,
+          errorInfo.recoverable,
+          errorInfo.suggestion
+        );
+      }
+      throw error;
+    }
+  }
+
+  // ==========================================================================
+  // Gemini-Specific Methods
+  // ==========================================================================
+
+  /**
+   * Ensure a .geminiignore file exists in the working directory.
+   *
+   * Gemini CLI scans the working directory for context discovery during startup.
+   * Excluding .git and node_modules dramatically reduces startup time by preventing
+   * traversal of large directories (reported improvement: 35s → 11s).
+   *
+   * Only creates the file if it doesn't already exist to avoid overwriting user config.
+   */
+  private async ensureGeminiIgnore(cwd: string): Promise<void> {
+    const ignorePath = path.join(cwd, '.geminiignore');
+    const content = [
+      '# Auto-generated by Automaker to speed up Gemini CLI startup',
+      '# Prevents Gemini CLI from scanning large directories during context discovery',
+      '.git',
+      'node_modules',
+      'dist',
+      'build',
+      '.next',
+      '.nuxt',
+      'coverage',
+      '.automaker',
+      '.worktrees',
+      '.vscode',
+      '.idea',
+      '*.lock',
+      '',
+    ].join('\n');
+    try {
+      // Use 'wx' flag for atomic creation - fails if file exists (EEXIST)
+      await fs.writeFile(ignorePath, content, { encoding: 'utf-8', flag: 'wx' });
+      logger.debug(`Created .geminiignore at ${ignorePath}`);
+    } catch (writeError) {
+      // EEXIST means file already exists - that's fine, preserve user's file
+      if ((writeError as NodeJS.ErrnoException).code === 'EEXIST') {
+        logger.debug(`.geminiignore already exists at ${ignorePath}, preserving existing file`);
+        return;
+      }
+      // Non-fatal: startup will just be slower without the ignore file
+      logger.debug(`Failed to create .geminiignore: ${writeError}`);
+    }
+  }
+
+  /**
+   * Create a GeminiError with details
+   */
+  private createError(
+    code: GeminiErrorCode,
+    message: string,
+    recoverable: boolean = false,
+    suggestion?: string
+  ): GeminiError {
+    const error = new Error(message) as GeminiError;
+    error.code = code;
+    error.recoverable = recoverable;
+    error.suggestion = suggestion;
+    error.name = 'GeminiError';
+    return error;
+  }
+
+  /**
+   * Get Gemini CLI version
+   */
+  async getVersion(): Promise<string | null> {
+    this.ensureCliDetected();
+    if (!this.cliPath) return null;
+
+    try {
+      const result = execSync(`"${this.cliPath}" --version`, {
+        encoding: 'utf8',
+        timeout: 5000,
+        stdio: 'pipe',
+      }).trim();
+      return result;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Check authentication status
+   *
+   * Uses a fast credential check approach:
+   * 1. Check for GEMINI_API_KEY environment variable
+   * 2. Check for Google Cloud credentials
+   * 3. Check for Gemini settings file with stored credentials
+   * 4. Quick CLI auth test with --help (fast, doesn't make API calls)
+   */
+  async checkAuth(): Promise<GeminiAuthStatus> {
+    this.ensureCliDetected();
+    if (!this.cliPath) {
+      logger.debug('checkAuth: CLI not found');
+      return { authenticated: false, method: 'none' };
+    }
+
+    logger.debug('checkAuth: Starting credential check');
+
+    // Determine the likely auth method based on environment
+    const hasApiKey = !!process.env.GEMINI_API_KEY;
+    const hasEnvApiKey = hasApiKey;
+    const hasVertexAi = !!(
+      process.env.GOOGLE_APPLICATION_CREDENTIALS || process.env.GOOGLE_CLOUD_PROJECT
+    );
+
+    logger.debug(`checkAuth: hasApiKey=${hasApiKey}, hasVertexAi=${hasVertexAi}`);
+
+    // Check for Gemini credentials file (~/.gemini/settings.json)
+    const geminiConfigDir = path.join(os.homedir(), '.gemini');
+    const settingsPath = path.join(geminiConfigDir, 'settings.json');
+    let hasCredentialsFile = false;
+    let authType: string | null = null;
+
+    try {
+      await fs.access(settingsPath);
+      logger.debug(`checkAuth: Found settings file at ${settingsPath}`);
+      try {
+        const content = await fs.readFile(settingsPath, 'utf8');
+        const settings = JSON.parse(content);
+
+        // Auth config is at security.auth.selectedType (e.g., "oauth-personal", "oauth-adc", "api-key")
+        const selectedType = settings?.security?.auth?.selectedType;
+        if (selectedType) {
+          hasCredentialsFile = true;
+          authType = selectedType;
+          logger.debug(`checkAuth: Settings file has auth config, selectedType=${selectedType}`);
+        } else {
+          logger.debug(`checkAuth: Settings file found but no auth type configured`);
+        }
+      } catch (e) {
+        logger.debug(`checkAuth: Failed to parse settings file: ${e}`);
+      }
+    } catch {
+      logger.debug('checkAuth: No settings file found');
+    }
+
+    // If we have an API key, we're authenticated
+    if (hasApiKey) {
+      logger.debug('checkAuth: Using API key authentication');
+      return {
+        authenticated: true,
+        method: 'api_key',
+        hasApiKey,
+        hasEnvApiKey,
+        hasCredentialsFile,
+      };
+    }
+
+    // If we have Vertex AI credentials, we're authenticated
+    if (hasVertexAi) {
+      logger.debug('checkAuth: Using Vertex AI authentication');
+      return {
+        authenticated: true,
+        method: 'vertex_ai',
+        hasApiKey,
+        hasEnvApiKey,
+        hasCredentialsFile,
+      };
+    }
+
+    // Check if settings file indicates configured authentication
+    if (hasCredentialsFile && authType) {
+      // OAuth types: "oauth-personal", "oauth-adc"
+      // API key type: "api-key"
+      // Code assist: "code-assist" (requires IDE integration)
+      if (authType.startsWith('oauth')) {
+        logger.debug(`checkAuth: OAuth authentication configured (${authType})`);
+        return {
+          authenticated: true,
+          method: 'google_login',
+          hasApiKey,
+          hasEnvApiKey,
+          hasCredentialsFile,
+        };
+      }
+
+      if (authType === 'api-key') {
+        logger.debug('checkAuth: API key authentication configured in settings');
+        return {
+          authenticated: true,
+          method: 'api_key',
+          hasApiKey,
+          hasEnvApiKey,
+          hasCredentialsFile,
+        };
+      }
+
+      if (authType === 'code-assist' || authType === 'codeassist') {
+        logger.debug('checkAuth: Code Assist auth configured but requires local server');
+        return {
+          authenticated: false,
+          method: 'google_login',
+          hasApiKey,
+          hasEnvApiKey,
+          hasCredentialsFile,
+          error:
+            'Code Assist authentication requires IDE integration. Please use "gemini" CLI to log in with a different method, or set GEMINI_API_KEY.',
+        };
+      }
+
+      // Unknown auth type but something is configured
+      logger.debug(`checkAuth: Unknown auth type configured: ${authType}`);
+      return {
+        authenticated: true,
+        method: 'google_login',
+        hasApiKey,
+        hasEnvApiKey,
+        hasCredentialsFile,
+      };
+    }
+
+    // No credentials found
+    logger.debug('checkAuth: No valid credentials found');
+    return {
+      authenticated: false,
+      method: 'none',
+      hasApiKey,
+      hasEnvApiKey,
+      hasCredentialsFile,
+      error:
+        'No authentication configured. Run "gemini" interactively to log in, or set GEMINI_API_KEY.',
+    };
+  }
+
+  /**
+   * Detect installation status (required by BaseProvider)
+   */
+  async detectInstallation(): Promise<InstallationStatus> {
+    const installed = await this.isInstalled();
+    const version = installed ? await this.getVersion() : undefined;
+    const auth = await this.checkAuth();
+
+    return {
+      installed,
+      version: version || undefined,
+      path: this.cliPath || undefined,
+      method: 'cli',
+      hasApiKey: !!process.env.GEMINI_API_KEY,
+      authenticated: auth.authenticated,
+    };
+  }
+
+  /**
+   * Get the detected CLI path (public accessor for status endpoints)
+   */
+  getCliPath(): string | null {
+    this.ensureCliDetected();
+    return this.cliPath;
+  }
+
+  /**
+   * Get available Gemini models
+   */
+  getAvailableModels(): ModelDefinition[] {
+    return Object.entries(GEMINI_MODEL_MAP).map(([id, config]) => ({
+      id, // Full model ID with gemini- prefix (e.g., 'gemini-2.5-flash')
+      name: config.label,
+      modelString: id, // Same as id - CLI uses the full model name
+      provider: 'gemini',
+      description: config.description,
+      supportsTools: true,
+      supportsVision: config.supportsVision,
+      contextWindow: config.contextWindow,
+    }));
+  }
+
+  /**
+   * Check if a feature is supported
+   */
+  supportsFeature(feature: string): boolean {
+    const supported = ['tools', 'text', 'streaming', 'vision', 'thinking'];
+    return supported.includes(feature);
+  }
+}
diff --git a/temp_repo/apps/server/src/providers/index.ts b/temp_repo/apps/server/src/providers/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0cb79470157bb42403896edc7f346f6194479d12
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/index.ts
@@ -0,0 +1,56 @@
+/**
+ * Provider exports
+ */
+
+// Base providers
+export { BaseProvider } from './base-provider.js';
+export {
+  CliProvider,
+  type SpawnStrategy,
+  type CliSpawnConfig,
+  type CliErrorInfo,
+} from './cli-provider.js';
+export type {
+  ProviderConfig,
+  ExecuteOptions,
+  ProviderMessage,
+  InstallationStatus,
+  ModelDefinition,
+  AgentDefinition,
+  ReasoningEffort,
+  SystemPromptPreset,
+  ConversationMessage,
+  ContentBlock,
+  ValidationResult,
+  McpServerConfig,
+  McpStdioServerConfig,
+  McpSSEServerConfig,
+  McpHttpServerConfig,
+} from './types.js';
+
+// Claude provider
+export { ClaudeProvider } from './claude-provider.js';
+
+// Cursor provider
+export { CursorProvider, CursorErrorCode, CursorError } from './cursor-provider.js';
+export { CursorConfigManager } from './cursor-config-manager.js';
+
+// OpenCode provider
+export { OpencodeProvider } from './opencode-provider.js';
+
+// Gemini provider
+export { GeminiProvider, GeminiErrorCode } from './gemini-provider.js';
+
+// Copilot provider (GitHub Copilot SDK)
+export { CopilotProvider, CopilotErrorCode } from './copilot-provider.js';
+
+// Provider factory
+export { ProviderFactory } from './provider-factory.js';
+
+// Simple query service - unified interface for basic AI queries
+export { simpleQuery, streamingQuery } from './simple-query-service.js';
+export type {
+  SimpleQueryOptions,
+  SimpleQueryResult,
+  StreamingQueryOptions,
+} from './simple-query-service.js';
diff --git a/temp_repo/apps/server/src/providers/mock-provider.ts b/temp_repo/apps/server/src/providers/mock-provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2880fecef9cb538f1bd2c34f28cf182cb62dbcbc
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/mock-provider.ts
@@ -0,0 +1,53 @@
+/**
+ * Mock Provider - No-op AI provider for E2E and CI testing
+ *
+ * When AUTOMAKER_MOCK_AGENT=true, the server uses this provider instead of
+ * real backends (Claude, Codex, etc.) so tests never call external APIs.
+ */
+
+import type { ExecuteOptions } from '@automaker/types';
+import { BaseProvider } from './base-provider.js';
+import type { ProviderMessage, InstallationStatus, ModelDefinition } from './types.js';
+
+const MOCK_TEXT = 'Mock agent output for testing.';
+
+export class MockProvider extends BaseProvider {
+  getName(): string {
+    return 'mock';
+  }
+
+  async *executeQuery(_options: ExecuteOptions): AsyncGenerator<ProviderMessage> {
+    yield {
+      type: 'assistant',
+      message: {
+        role: 'assistant',
+        content: [{ type: 'text', text: MOCK_TEXT }],
+      },
+    };
+    yield {
+      type: 'result',
+      subtype: 'success',
+    };
+  }
+
+  async detectInstallation(): Promise<InstallationStatus> {
+    return {
+      installed: true,
+      method: 'sdk',
+      hasApiKey: true,
+      authenticated: true,
+    };
+  }
+
+  getAvailableModels(): ModelDefinition[] {
+    return [
+      {
+        id: 'mock-model',
+        name: 'Mock Model',
+        modelString: 'mock-model',
+        provider: 'mock',
+        description: 'Mock model for testing',
+      },
+    ];
+  }
+}
diff --git a/temp_repo/apps/server/src/providers/opencode-provider.ts b/temp_repo/apps/server/src/providers/opencode-provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c38e339968408c8ce578e220ab490bda59102c5e
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/opencode-provider.ts
@@ -0,0 +1,1537 @@
+/**
+ * OpenCode Provider - Executes queries using opencode CLI
+ *
+ * Extends CliProvider with OpenCode-specific configuration:
+ * - Event normalization for OpenCode's stream-json format
+ * - Dynamic model discovery via `opencode models` CLI command
+ * - NPX-based Windows execution strategy
+ * - Platform-specific npm global installation paths
+ *
+ * Spawns the opencode CLI with --output-format stream-json for streaming responses.
+ */
+
+import * as path from 'path';
+import * as os from 'os';
+import { execFile } from 'child_process';
+import { promisify } from 'util';
+import { CliProvider, type CliSpawnConfig } from './cli-provider.js';
+
+const execFileAsync = promisify(execFile);
+import type {
+  ProviderConfig,
+  ExecuteOptions,
+  ProviderMessage,
+  ModelDefinition,
+  InstallationStatus,
+  ContentBlock,
+} from '@automaker/types';
+import { type SubprocessOptions, getOpenCodeAuthIndicators } from '@automaker/platform';
+import { createLogger } from '@automaker/utils';
+
+// Create logger for OpenCode operations
+const opencodeLogger = createLogger('OpencodeProvider');
+
+// =============================================================================
+// OpenCode Auth Types
+// =============================================================================
+
+export interface OpenCodeAuthStatus {
+  authenticated: boolean;
+  method: 'api_key' | 'oauth' | 'none';
+  hasOAuthToken?: boolean;
+  hasApiKey?: boolean;
+}
+
+// =============================================================================
+// OpenCode Dynamic Model Types
+// =============================================================================
+
+/**
+ * Model information from `opencode models` CLI output
+ */
+export interface OpenCodeModelInfo {
+  /** Full model ID (e.g., "copilot/claude-sonnet-4-5") */
+  id: string;
+  /** Provider name (e.g., "copilot", "anthropic", "openai") */
+  provider: string;
+  /** Model name without provider prefix */
+  name: string;
+  /** Display name for UI */
+  displayName?: string;
+}
+
+/**
+ * Provider information from `opencode auth list` CLI output
+ */
+export interface OpenCodeProviderInfo {
+  /** Provider ID (e.g., "copilot", "anthropic") */
+  id: string;
+  /** Human-readable name */
+  name: string;
+  /** Whether the provider is authenticated */
+  authenticated: boolean;
+  /** Authentication method if authenticated */
+  authMethod?: 'oauth' | 'api_key';
+}
+
+/** Cache duration for dynamic model fetching (5 minutes) */
+const MODEL_CACHE_DURATION_MS = 5 * 60 * 1000;
+const OPENCODE_MODEL_ID_SEPARATOR = '/';
+const OPENCODE_MODEL_ID_PATTERN = /^[a-z0-9.-]+\/\S+$/;
+const OPENCODE_PROVIDER_PATTERN = /^[a-z0-9.-]+$/;
+const OPENCODE_MODEL_NAME_PATTERN = /^[a-zA-Z0-9._:/-]+$/;
+
+// =============================================================================
+// OpenCode Stream Event Types
+// =============================================================================
+
+/**
+ * Part object within OpenCode events
+ */
+interface OpenCodePart {
+  id?: string;
+  sessionID?: string;
+  messageID?: string;
+  type: string;
+  text?: string;
+  reason?: string;
+  error?: string;
+  name?: string;
+  args?: unknown;
+  call_id?: string;
+  output?: string;
+  tokens?: {
+    input?: number;
+    output?: number;
+    reasoning?: number;
+  };
+}
+
+/**
+ * Base interface for all OpenCode stream events
+ * Format: {"type":"event_type","timestamp":...,"sessionID":"...","part":{...}}
+ */
+interface OpenCodeBaseEvent {
+  /** Event type identifier (step_start, text, step_finish, tool_call, etc.) */
+  type: string;
+  /** Unix timestamp */
+  timestamp?: number;
+  /** Session identifier */
+  sessionID?: string;
+  /** Event details */
+  part?: OpenCodePart;
+}
+
+/**
+ * Text event - Text output from the model
+ */
+export interface OpenCodeTextEvent extends OpenCodeBaseEvent {
+  type: 'text';
+  part: OpenCodePart & { type: 'text'; text: string };
+}
+
+/**
+ * Step start event - Begins an agentic loop iteration
+ */
+export interface OpenCodeStepStartEvent extends OpenCodeBaseEvent {
+  type: 'step_start';
+  part: OpenCodePart & { type: 'step-start' };
+}
+
+/**
+ * Step finish event - Completes an agentic loop iteration
+ */
+export interface OpenCodeStepFinishEvent extends OpenCodeBaseEvent {
+  type: 'step_finish';
+  part: OpenCodePart & { type: 'step-finish'; reason?: string };
+}
+
+/**
+ * Tool call event - Request to execute a tool
+ */
+export interface OpenCodeToolCallEvent extends OpenCodeBaseEvent {
+  type: 'tool_call';
+  part: OpenCodePart & { type: 'tool-call'; name: string; args?: unknown };
+}
+
+/**
+ * Tool result event - Output from a tool execution
+ */
+export interface OpenCodeToolResultEvent extends OpenCodeBaseEvent {
+  type: 'tool_result';
+  part: OpenCodePart & { type: 'tool-result'; output: string };
+}
+
+/**
+ * Error details object in error events
+ */
+interface OpenCodeErrorDetails {
+  name?: string;
+  message?: string;
+  data?: {
+    message?: string;
+    statusCode?: number;
+    isRetryable?: boolean;
+  };
+}
+
+/**
+ * Error event - An error occurred
+ */
+export interface OpenCodeErrorEvent extends OpenCodeBaseEvent {
+  type: 'error';
+  part?: OpenCodePart & { error: string };
+  error?: string | OpenCodeErrorDetails;
+}
+
+/**
+ * Tool error event - A tool execution failed
+ */
+export interface OpenCodeToolErrorEvent extends OpenCodeBaseEvent {
+  type: 'tool_error';
+  part?: OpenCodePart & { error: string };
+}
+
+/**
+ * Tool use event - The actual format emitted by OpenCode CLI when a tool is invoked.
+ * Contains the tool name, call ID, and the complete state (input, output, status).
+ * Note: OpenCode CLI emits 'tool_use' (not 'tool_call') as the event type.
+ */
+export interface OpenCodeToolUseEvent extends OpenCodeBaseEvent {
+  type: 'tool_use';
+  part: OpenCodePart & {
+    type: 'tool';
+    callID?: string;
+    tool?: string;
+    state?: {
+      status?: string;
+      input?: unknown;
+      output?: string;
+      title?: string;
+      metadata?: unknown;
+      time?: { start: number; end: number };
+    };
+  };
+}
+
+/**
+ * Union type of all OpenCode stream events
+ */
+export type OpenCodeStreamEvent =
+  | OpenCodeTextEvent
+  | OpenCodeStepStartEvent
+  | OpenCodeStepFinishEvent
+  | OpenCodeToolCallEvent
+  | OpenCodeToolUseEvent
+  | OpenCodeToolResultEvent
+  | OpenCodeErrorEvent
+  | OpenCodeToolErrorEvent;
+
+// =============================================================================
+// Tool Use ID Generation
+// =============================================================================
+
+/** Counter for generating unique tool use IDs when call_id is not provided */
+let toolUseIdCounter = 0;
+
+/**
+ * Generate a unique tool use ID for tool calls without explicit IDs
+ */
+function generateToolUseId(): string {
+  toolUseIdCounter += 1;
+  return `opencode-tool-${toolUseIdCounter}`;
+}
+
+/**
+ * Reset the tool use ID counter (useful for testing)
+ */
+export function resetToolUseIdCounter(): void {
+  toolUseIdCounter = 0;
+}
+
+// =============================================================================
+// Provider Implementation
+// =============================================================================
+
+/**
+ * OpencodeProvider - Integrates opencode CLI as an AI provider
+ *
+ * OpenCode is an npm-distributed CLI tool that provides access to
+ * multiple AI model providers through a unified interface.
+ *
+ * Supports dynamic model discovery via `opencode models` CLI command,
+ * enabling access to 75+ providers including GitHub Copilot, Google,
+ * Anthropic, OpenAI, and more based on user authentication.
+ */
+export class OpencodeProvider extends CliProvider {
+  // ==========================================================================
+  // Dynamic Model Cache
+  // ==========================================================================
+
+  /** Cached model definitions */
+  private cachedModels: ModelDefinition[] | null = null;
+
+  /** Timestamp when cache expires */
+  private modelsCacheExpiry: number = 0;
+
+  /** Cached authenticated providers */
+  private cachedProviders: OpenCodeProviderInfo[] | null = null;
+
+  /** Whether model refresh is in progress */
+  private isRefreshing: boolean = false;
+
+  /** Promise that resolves when current refresh completes */
+  private refreshPromise: Promise<ModelDefinition[]> | null = null;
+
+  constructor(config: ProviderConfig = {}) {
+    super(config);
+  }
+
+  // ==========================================================================
+  // CliProvider Abstract Method Implementations
+  // ==========================================================================
+
+  getName(): string {
+    return 'opencode';
+  }
+
+  getCliName(): string {
+    return 'opencode';
+  }
+
+  getSpawnConfig(): CliSpawnConfig {
+    return {
+      windowsStrategy: 'npx',
+      npxPackage: 'opencode-ai@latest',
+      commonPaths: {
+        linux: [
+          path.join(os.homedir(), '.opencode/bin/opencode'),
+          path.join(os.homedir(), '.npm-global/bin/opencode'),
+          '/usr/local/bin/opencode',
+          '/usr/bin/opencode',
+          path.join(os.homedir(), '.local/bin/opencode'),
+        ],
+        darwin: [
+          path.join(os.homedir(), '.opencode/bin/opencode'),
+          path.join(os.homedir(), '.npm-global/bin/opencode'),
+          '/usr/local/bin/opencode',
+          '/opt/homebrew/bin/opencode',
+          path.join(os.homedir(), '.local/bin/opencode'),
+        ],
+        win32: [
+          path.join(os.homedir(), '.opencode', 'bin', 'opencode.exe'),
+          path.join(os.homedir(), 'AppData', 'Roaming', 'npm', 'opencode.cmd'),
+          path.join(os.homedir(), 'AppData', 'Roaming', 'npm', 'opencode'),
+          path.join(process.env.APPDATA || '', 'npm', 'opencode.cmd'),
+        ],
+      },
+    };
+  }
+
+  /**
+   * Build CLI arguments for the `opencode run` command
+   *
+   * Arguments built:
+   * - 'run' subcommand for executing queries
+   * - '--format', 'json' for JSONL streaming output
+   * - '--model', '<model>' for model selection (if specified)
+   * - '--session', '<id>' for continuing an existing session (if sdkSessionId is set)
+   *
+   * The prompt is passed via stdin (piped) to avoid shell escaping issues.
+   * OpenCode CLI automatically reads from stdin when input is piped.
+   *
+   * @param options - Execution options containing model, cwd, etc.
+   * @returns Array of CLI arguments for opencode run
+   */
+  buildCliArgs(options: ExecuteOptions): string[] {
+    const args: string[] = ['run'];
+
+    // Add JSON output format for JSONL parsing (not 'stream-json')
+    args.push('--format', 'json');
+
+    // Handle session resumption for conversation continuity.
+    // The opencode CLI supports `--session <id>` to continue an existing session.
+    // The sdkSessionId is captured from the sessionID field in previous stream events
+    // and persisted by AgentService for use in follow-up messages.
+    if (options.sdkSessionId) {
+      args.push('--session', options.sdkSessionId);
+    }
+
+    // Handle model selection
+    // Convert canonical prefix format (opencode-xxx) to CLI slash format (opencode/xxx)
+    // OpenCode CLI expects provider/model format (e.g., 'opencode/big-model')
+    if (options.model) {
+      // Strip opencode- prefix if present, then ensure slash format
+      const model = options.model.startsWith('opencode-')
+        ? options.model.slice('opencode-'.length)
+        : options.model;
+
+      // If model has slash, it's already provider/model format; otherwise prepend opencode/
+      const cliModel = model.includes('/') ? model : `opencode/${model}`;
+
+      args.push('--model', cliModel);
+    }
+
+    // Note: OpenCode reads from stdin automatically when input is piped
+    // No '-' argument needed
+
+    return args;
+  }
+
+  // ==========================================================================
+  // Prompt Handling
+  // ==========================================================================
+
+  /**
+   * Extract prompt text from ExecuteOptions for passing via stdin
+   *
+   * Handles both string prompts and array-based prompts with content blocks.
+   * For array prompts with images, extracts only text content (images would
+   * need separate handling via file paths if OpenCode supports them).
+   *
+   * @param options - Execution options containing the prompt
+   * @returns Plain text prompt string
+   */
+  private extractPromptText(options: ExecuteOptions): string {
+    if (typeof options.prompt === 'string') {
+      return options.prompt;
+    }
+
+    // Array-based prompt - extract text content
+    if (Array.isArray(options.prompt)) {
+      return options.prompt
+        .filter((block) => block.type === 'text' && block.text)
+        .map((block) => block.text)
+        .join('\n');
+    }
+
+    throw new Error('Invalid prompt format: expected string or content block array');
+  }
+
+  /**
+   * Build subprocess options with stdin data for prompt
+   *
+   * Extends the base class method to add stdinData containing the prompt.
+   * This allows passing prompts via stdin instead of CLI arguments,
+   * avoiding shell escaping issues with special characters.
+   *
+   * @param options - Execution options
+   * @param cliArgs - CLI arguments from buildCliArgs
+   * @returns SubprocessOptions with stdinData set
+   */
+  protected buildSubprocessOptions(options: ExecuteOptions, cliArgs: string[]): SubprocessOptions {
+    const subprocessOptions = super.buildSubprocessOptions(options, cliArgs);
+
+    // Pass prompt via stdin to avoid shell interpretation of special characters
+    // like $(), backticks, quotes, etc. that may appear in prompts or file content
+    subprocessOptions.stdinData = this.extractPromptText(options);
+
+    return subprocessOptions;
+  }
+
+  /**
+   * Check if an error message indicates a session-not-found condition.
+   *
+   * Centralizes the pattern matching for session errors to avoid duplication.
+   * Strips ANSI escape codes first since opencode CLI uses colored stderr output
+   * (e.g. "\x1b[91m\x1b[1mError: \x1b[0mSession not found").
+   *
+   * IMPORTANT: Patterns must be specific enough to avoid false positives.
+   * Generic patterns like "notfounderror" or "resource not found" match
+   * non-session errors (e.g. "ProviderModelNotFoundError") which would
+   * trigger unnecessary retries that fail identically, producing confusing
+   * error messages like "OpenCode session could not be created".
+   *
+   * @param errorText - Raw error text (may contain ANSI codes)
+   * @returns true if the error indicates the session was not found
+   */
+  private static isSessionNotFoundError(errorText: string): boolean {
+    const cleaned = OpencodeProvider.stripAnsiCodes(errorText).toLowerCase();
+
+    // Explicit session-related phrases — high confidence
+    if (
+      cleaned.includes('session not found') ||
+      cleaned.includes('session does not exist') ||
+      cleaned.includes('invalid session') ||
+      cleaned.includes('session expired') ||
+      cleaned.includes('no such session')
+    ) {
+      return true;
+    }
+
+    // Generic "NotFoundError" / "resource not found" are only session errors
+    // when the message also references a session path or session ID.
+    // Without this guard, errors like "ProviderModelNotFoundError" or
+    // "Resource not found: /path/to/config.json" would false-positive.
+    if (cleaned.includes('notfounderror') || cleaned.includes('resource not found')) {
+      return cleaned.includes('/session/') || /\bsession\b/.test(cleaned);
+    }
+
+    return false;
+  }
+
+  /**
+   * Strip ANSI escape codes from a string.
+   *
+   * The OpenCode CLI uses colored stderr output (e.g. "\x1b[91m\x1b[1mError: \x1b[0m").
+   * These escape codes render as garbled text like "[91m[1mError: [0m" in the UI
+   * when passed through as-is. This utility removes them so error messages are
+   * clean and human-readable.
+   */
+  private static stripAnsiCodes(text: string): string {
+    return text.replace(/\x1b\[[0-9;]*m/g, '');
+  }
+
+  /**
+   * Clean a CLI error message for display.
+   *
+   * Strips ANSI escape codes AND removes the redundant "Error: " prefix that
+   * the OpenCode CLI prepends to error messages in its colored stderr output
+   * (e.g. "\x1b[91m\x1b[1mError: \x1b[0mSession not found" → "Session not found").
+   *
+   * Without this, consumers that wrap the message in their own "Error: " prefix
+   * (like AgentService or AgentExecutor) produce garbled double-prefixed output:
+   * "Error: Error: Session not found".
+   */
+  private static cleanErrorMessage(text: string): string {
+    let cleaned = OpencodeProvider.stripAnsiCodes(text).trim();
+    // Remove leading "Error: " prefix (case-insensitive) if present.
+    // The CLI formats errors as: \x1b[91m\x1b[1mError: \x1b[0m<actual message>
+    // After ANSI stripping this becomes: "Error: <actual message>"
+    cleaned = cleaned.replace(/^Error:\s*/i, '').trim();
+    return cleaned || text;
+  }
+
+  /**
+   * Execute a query with automatic session resumption fallback.
+   *
+   * When a sdkSessionId is provided, the CLI receives `--session <id>`.
+   * If the session no longer exists on disk the CLI will fail with a
+   * "NotFoundError" / "Resource not found" / "Session not found" error.
+   *
+   * The opencode CLI writes this to **stderr** and exits non-zero.
+   * `spawnJSONLProcess` collects stderr and **yields** it as
+   * `{ type: 'error', error: <stderrText> }` — it is NOT thrown.
+   * After `normalizeEvent`, the error becomes a yielded `ProviderMessage`
+   * with `type: 'error'`.  A simple try/catch therefore cannot intercept it.
+   *
+   * This override iterates the parent stream, intercepts yielded error
+   * messages that match the session-not-found pattern, and retries the
+   * entire query WITHOUT the `--session` flag so a fresh session is started.
+   *
+   * Session-not-found retry is ONLY attempted when `sdkSessionId` is set.
+   * Without the `--session` flag the CLI always creates a fresh session, so
+   * retrying without it would be identical to the first attempt and would
+   * fail the same way — producing a confusing "session could not be created"
+   * message for what is actually a different error (model not found, auth
+   * failure, etc.).
+   *
+   * All error messages (session or not) are cleaned of ANSI codes and the
+   * CLI's redundant "Error: " prefix before being yielded to consumers.
+   *
+   * After a successful retry, the consumer (AgentService) will receive a new
+   * session_id from the fresh stream events, which it persists to metadata —
+   * replacing the stale sdkSessionId and preventing repeated failures.
+   */
+  async *executeQuery(options: ExecuteOptions): AsyncGenerator<ProviderMessage> {
+    // When no sdkSessionId is set, there is nothing to "retry without" — just
+    // stream normally and clean error messages as they pass through.
+    if (!options.sdkSessionId) {
+      for await (const msg of super.executeQuery(options)) {
+        // Clean error messages so consumers don't get ANSI or double "Error:" prefix
+        if (msg.type === 'error' && msg.error && typeof msg.error === 'string') {
+          msg.error = OpencodeProvider.cleanErrorMessage(msg.error);
+        }
+        yield msg;
+      }
+      return;
+    }
+
+    // sdkSessionId IS set — the CLI will receive `--session <id>`.
+    // If that session no longer exists, intercept the error and retry fresh.
+    //
+    // To avoid buffering the entire stream in memory for long-lived sessions,
+    // we only buffer an initial window of messages until we observe a healthy
+    // (non-error) message. Once a healthy message is seen, we flush the buffer
+    // and switch to direct passthrough, while still watching for session errors
+    // via isSessionNotFoundError on any subsequent error messages.
+    const buffered: ProviderMessage[] = [];
+    let sessionError = false;
+    let seenHealthyMessage = false;
+
+    try {
+      for await (const msg of super.executeQuery(options)) {
+        if (msg.type === 'error') {
+          const errorText = msg.error || '';
+          if (OpencodeProvider.isSessionNotFoundError(errorText)) {
+            sessionError = true;
+            opencodeLogger.info(
+              `OpenCode session error detected (session "${options.sdkSessionId}") ` +
+                `— retrying without --session to start fresh`
+            );
+            break; // stop consuming the failed stream
+          }
+
+          // Non-session error — clean it
+          if (msg.error && typeof msg.error === 'string') {
+            msg.error = OpencodeProvider.cleanErrorMessage(msg.error);
+          }
+        } else {
+          // A non-error message is a healthy signal — stop buffering after this
+          seenHealthyMessage = true;
+        }
+
+        if (seenHealthyMessage && buffered.length > 0) {
+          // Flush the pre-healthy buffer first, then switch to passthrough
+          for (const bufferedMsg of buffered) {
+            yield bufferedMsg;
+          }
+          buffered.length = 0;
+        }
+
+        if (seenHealthyMessage) {
+          // Passthrough mode — yield directly without buffering
+          yield msg;
+        } else {
+          // Still in initial window — buffer until we see a healthy message
+          buffered.push(msg);
+        }
+      }
+    } catch (error) {
+      // Also handle thrown exceptions (e.g. from mapError in cli-provider)
+      const errMsg = error instanceof Error ? error.message : String(error);
+      if (OpencodeProvider.isSessionNotFoundError(errMsg)) {
+        sessionError = true;
+        opencodeLogger.info(
+          `OpenCode session error detected (thrown, session "${options.sdkSessionId}") ` +
+            `— retrying without --session to start fresh`
+        );
+      } else {
+        throw error;
+      }
+    }
+
+    if (sessionError) {
+      // Retry the entire query without the stale session ID.
+      const retryOptions = { ...options, sdkSessionId: undefined };
+      opencodeLogger.info('Retrying OpenCode query without --session flag...');
+
+      // Stream the retry directly to the consumer.
+      // If the retry also fails, it's a genuine error (not session-related)
+      // and should be surfaced as-is rather than masked with a misleading
+      // "session could not be created" message.
+      for await (const retryMsg of super.executeQuery(retryOptions)) {
+        if (retryMsg.type === 'error' && retryMsg.error && typeof retryMsg.error === 'string') {
+          retryMsg.error = OpencodeProvider.cleanErrorMessage(retryMsg.error);
+        }
+        yield retryMsg;
+      }
+    } else if (buffered.length > 0) {
+      // No session error and still have buffered messages (stream ended before
+      // any healthy message was observed) — flush them to the consumer
+      for (const msg of buffered) {
+        yield msg;
+      }
+    }
+    // If seenHealthyMessage is true, all messages have already been yielded
+    // directly in passthrough mode — nothing left to flush.
+  }
+
+  /**
+   * Normalize a raw CLI event to ProviderMessage format
+   *
+   * Maps OpenCode event types to the standard ProviderMessage structure:
+   * - text -> type: 'assistant', content with type: 'text'
+   * - step_start -> null (informational, no message needed)
+   * - step_finish with reason 'stop'/'end_turn' -> type: 'result', subtype: 'success'
+   * - step_finish with reason 'tool-calls' -> null (intermediate step, not final)
+   * - step_finish with error -> type: 'error'
+   * - tool_use -> type: 'assistant', content with type: 'tool_use' (OpenCode CLI format)
+   * - tool_call -> type: 'assistant', content with type: 'tool_use' (legacy format)
+   * - tool_result -> type: 'assistant', content with type: 'tool_result'
+   * - error -> type: 'error'
+   *
+   * @param event - Raw event from OpenCode CLI JSONL output
+   * @returns Normalized ProviderMessage or null to skip the event
+   */
+  normalizeEvent(event: unknown): ProviderMessage | null {
+    if (!event || typeof event !== 'object') {
+      return null;
+    }
+
+    const openCodeEvent = event as OpenCodeStreamEvent;
+
+    switch (openCodeEvent.type) {
+      case 'text': {
+        const textEvent = openCodeEvent as OpenCodeTextEvent;
+
+        // Skip empty text
+        if (!textEvent.part?.text) {
+          return null;
+        }
+
+        const content: ContentBlock[] = [
+          {
+            type: 'text',
+            text: textEvent.part.text,
+          },
+        ];
+
+        return {
+          type: 'assistant',
+          session_id: textEvent.sessionID,
+          message: {
+            role: 'assistant',
+            content,
+          },
+        };
+      }
+
+      case 'step_start': {
+        // Step start is informational - no message needed
+        return null;
+      }
+
+      case 'step_finish': {
+        const finishEvent = openCodeEvent as OpenCodeStepFinishEvent;
+
+        // Check if the step failed - either by error property or reason='error'
+        if (finishEvent.part?.error) {
+          return {
+            type: 'error',
+            session_id: finishEvent.sessionID,
+            error: OpencodeProvider.cleanErrorMessage(finishEvent.part.error),
+          };
+        }
+
+        // Check if reason indicates error (even without explicit error text)
+        if (finishEvent.part?.reason === 'error') {
+          return {
+            type: 'error',
+            session_id: finishEvent.sessionID,
+            error: OpencodeProvider.cleanErrorMessage('Step execution failed'),
+          };
+        }
+
+        // Intermediate step completion (reason: 'tool-calls') — the agent loop
+        // is continuing because the model requested tool calls. Skip these so
+        // consumers don't mistake them for final results.
+        if (finishEvent.part?.reason === 'tool-calls') {
+          return null;
+        }
+
+        // Only treat an explicit allowlist of reasons as true success.
+        // Reasons like 'length' (context-window truncation) or 'content-filter'
+        // indicate the model stopped abnormally and must not be surfaced as
+        // successful completions.
+        const SUCCESS_REASONS = new Set(['stop', 'end_turn']);
+        const reason = finishEvent.part?.reason;
+
+        if (reason === undefined || SUCCESS_REASONS.has(reason)) {
+          // Final completion (reason: 'stop', 'end_turn', or unset)
+          return {
+            type: 'result',
+            subtype: 'success',
+            session_id: finishEvent.sessionID,
+            result: (finishEvent.part as OpenCodePart & { result?: string })?.result,
+          };
+        }
+
+        // Non-success, non-tool-calls reason (e.g. 'length', 'content-filter')
+        return {
+          type: 'result',
+          subtype: 'error',
+          session_id: finishEvent.sessionID,
+          error: `Step finished with non-success reason: ${reason}`,
+          result: (finishEvent.part as OpenCodePart & { result?: string })?.result,
+        };
+      }
+
+      case 'tool_error': {
+        const toolErrorEvent = openCodeEvent as OpenCodeBaseEvent;
+
+        // Extract error message from part.error and clean ANSI codes
+        const errorMessage = OpencodeProvider.cleanErrorMessage(
+          toolErrorEvent.part?.error || 'Tool execution failed'
+        );
+
+        return {
+          type: 'error',
+          session_id: toolErrorEvent.sessionID,
+          error: errorMessage,
+        };
+      }
+
+      // OpenCode CLI emits 'tool_use' events (not 'tool_call') when the model invokes a tool.
+      // The event format includes the tool name, call ID, and state with input/output.
+      // Handle both 'tool_use' (actual CLI format) and 'tool_call' (legacy/alternative) for robustness.
+      case 'tool_use': {
+        const toolUseEvent = openCodeEvent as OpenCodeToolUseEvent;
+        const part = toolUseEvent.part;
+
+        // Generate a tool use ID if not provided
+        const toolUseId = part?.callID || part?.call_id || generateToolUseId();
+        const toolName = part?.tool || part?.name || 'unknown';
+
+        const content: ContentBlock[] = [
+          {
+            type: 'tool_use',
+            name: toolName,
+            tool_use_id: toolUseId,
+            input: part?.state?.input || part?.args,
+          },
+        ];
+
+        // If the tool has already completed (state.status === 'completed'), also emit the result
+        if (part?.state?.status === 'completed' && part?.state?.output) {
+          content.push({
+            type: 'tool_result',
+            tool_use_id: toolUseId,
+            content: part.state.output,
+          });
+        }
+
+        return {
+          type: 'assistant',
+          session_id: toolUseEvent.sessionID,
+          message: {
+            role: 'assistant',
+            content,
+          },
+        };
+      }
+
+      case 'tool_call': {
+        const toolEvent = openCodeEvent as OpenCodeToolCallEvent;
+
+        // Generate a tool use ID if not provided
+        const toolUseId = toolEvent.part?.call_id || generateToolUseId();
+
+        const content: ContentBlock[] = [
+          {
+            type: 'tool_use',
+            name: toolEvent.part?.name || 'unknown',
+            tool_use_id: toolUseId,
+            input: toolEvent.part?.args,
+          },
+        ];
+
+        return {
+          type: 'assistant',
+          session_id: toolEvent.sessionID,
+          message: {
+            role: 'assistant',
+            content,
+          },
+        };
+      }
+
+      case 'tool_result': {
+        const resultEvent = openCodeEvent as OpenCodeToolResultEvent;
+
+        const content: ContentBlock[] = [
+          {
+            type: 'tool_result',
+            tool_use_id: resultEvent.part?.call_id,
+            content: resultEvent.part?.output || '',
+          },
+        ];
+
+        return {
+          type: 'assistant',
+          session_id: resultEvent.sessionID,
+          message: {
+            role: 'assistant',
+            content,
+          },
+        };
+      }
+
+      case 'error': {
+        const errorEvent = openCodeEvent as OpenCodeErrorEvent;
+
+        // Extract error message from various formats
+        let errorMessage = 'Unknown error';
+        if (errorEvent.error) {
+          if (typeof errorEvent.error === 'string') {
+            errorMessage = errorEvent.error;
+          } else {
+            // Error is an object with name/data structure
+            errorMessage =
+              errorEvent.error.data?.message ||
+              errorEvent.error.message ||
+              errorEvent.error.name ||
+              'Unknown error';
+          }
+        } else if (errorEvent.part?.error) {
+          errorMessage = errorEvent.part.error;
+        }
+
+        // Clean error messages: strip ANSI escape codes AND the redundant "Error: "
+        // prefix the CLI adds. The OpenCode CLI outputs colored stderr like:
+        //   \x1b[91m\x1b[1mError: \x1b[0mSession not found
+        // Without cleaning, consumers that wrap in their own "Error: " prefix
+        // produce "Error: Error: Session not found".
+        errorMessage = OpencodeProvider.cleanErrorMessage(errorMessage);
+
+        return {
+          type: 'error',
+          session_id: errorEvent.sessionID,
+          error: errorMessage,
+        };
+      }
+
+      default: {
+        // Unknown event type - skip it
+        return null;
+      }
+    }
+  }
+
+  // ==========================================================================
+  // Model Configuration
+  // ==========================================================================
+
+  /**
+   * Get available models for OpenCode
+   *
+   * Returns cached models if available and not expired.
+   * Falls back to default models if cache is empty or CLI is unavailable.
+   *
+   * Use `refreshModels()` to force a fresh fetch from the CLI.
+   */
+  getAvailableModels(): ModelDefinition[] {
+    // Return cached models if available and not expired
+    if (this.cachedModels && Date.now() < this.modelsCacheExpiry) {
+      return this.cachedModels;
+    }
+
+    // Return cached models even if expired (better than nothing)
+    if (this.cachedModels) {
+      // Trigger background refresh
+      this.refreshModels().catch((err) => {
+        opencodeLogger.debug(`Background model refresh failed: ${err}`);
+      });
+      return this.cachedModels;
+    }
+
+    // Return default models while cache is empty
+    return this.getDefaultModels();
+  }
+
+  /**
+   * Get default hardcoded models (fallback when CLI is unavailable)
+   */
+  private getDefaultModels(): ModelDefinition[] {
+    return [
+      // OpenCode Free Tier Models
+      {
+        id: 'opencode/big-pickle',
+        name: 'Big Pickle (Free)',
+        modelString: 'opencode/big-pickle',
+        provider: 'opencode',
+        description: 'OpenCode free tier model - great for general coding',
+        supportsTools: true,
+        supportsVision: false,
+        tier: 'basic',
+        default: true,
+      },
+      {
+        id: 'opencode/glm-5-free',
+        name: 'GLM 5 Free',
+        modelString: 'opencode/glm-5-free',
+        provider: 'opencode',
+        description: 'OpenCode free tier GLM model',
+        supportsTools: true,
+        supportsVision: false,
+        tier: 'basic',
+      },
+      {
+        id: 'opencode/gpt-5-nano',
+        name: 'GPT-5 Nano (Free)',
+        modelString: 'opencode/gpt-5-nano',
+        provider: 'opencode',
+        description: 'Fast and lightweight free tier model',
+        supportsTools: true,
+        supportsVision: false,
+        tier: 'basic',
+      },
+      {
+        id: 'opencode/kimi-k2.5-free',
+        name: 'Kimi K2.5 Free',
+        modelString: 'opencode/kimi-k2.5-free',
+        provider: 'opencode',
+        description: 'OpenCode free tier Kimi model for coding',
+        supportsTools: true,
+        supportsVision: false,
+        tier: 'basic',
+      },
+      {
+        id: 'opencode/minimax-m2.5-free',
+        name: 'MiniMax M2.5 Free',
+        modelString: 'opencode/minimax-m2.5-free',
+        provider: 'opencode',
+        description: 'OpenCode free tier MiniMax model',
+        supportsTools: true,
+        supportsVision: false,
+        tier: 'basic',
+      },
+    ];
+  }
+
+  // ==========================================================================
+  // Dynamic Model Discovery
+  // ==========================================================================
+
+  /**
+   * Refresh models from OpenCode CLI
+   *
+   * Fetches available models using `opencode models` command and updates cache.
+   * Returns the updated model definitions.
+   */
+  async refreshModels(): Promise<ModelDefinition[]> {
+    // If refresh is in progress, wait for existing promise instead of busy-waiting
+    if (this.isRefreshing && this.refreshPromise) {
+      opencodeLogger.debug('Model refresh already in progress, waiting for completion...');
+      return this.refreshPromise;
+    }
+
+    this.isRefreshing = true;
+    opencodeLogger.debug('Starting model refresh from OpenCode CLI');
+
+    this.refreshPromise = this.doRefreshModels();
+    try {
+      return await this.refreshPromise;
+    } finally {
+      this.refreshPromise = null;
+      this.isRefreshing = false;
+    }
+  }
+
+  /**
+   * Internal method that performs the actual model refresh
+   */
+  private async doRefreshModels(): Promise<ModelDefinition[]> {
+    try {
+      const models = await this.fetchModelsFromCli();
+
+      if (models.length > 0) {
+        this.cachedModels = models;
+        this.modelsCacheExpiry = Date.now() + MODEL_CACHE_DURATION_MS;
+        opencodeLogger.debug(`Cached ${models.length} models from OpenCode CLI`);
+      } else {
+        // Keep existing cache if fetch returned nothing
+        opencodeLogger.debug('No models returned from CLI, keeping existing cache');
+      }
+
+      return this.cachedModels || this.getDefaultModels();
+    } catch (error) {
+      opencodeLogger.debug(`Model refresh failed: ${error}`);
+      // Return existing cache or defaults on error
+      return this.cachedModels || this.getDefaultModels();
+    }
+  }
+
+  /**
+   * Fetch models from OpenCode CLI using `opencode models` command
+   *
+   * Uses async execFile to avoid blocking the event loop.
+   */
+  private async fetchModelsFromCli(): Promise<ModelDefinition[]> {
+    this.ensureCliDetected();
+
+    if (!this.cliPath) {
+      opencodeLogger.debug('OpenCode CLI not available for model fetch');
+      return [];
+    }
+
+    try {
+      let command: string;
+      let args: string[];
+
+      if (this.detectedStrategy === 'npx') {
+        // NPX strategy: execute npx with opencode-ai package
+        command = process.platform === 'win32' ? 'npx.cmd' : 'npx';
+        args = ['opencode-ai@latest', 'models'];
+        opencodeLogger.debug(`Executing: ${command} ${args.join(' ')}`);
+      } else if (this.useWsl && this.wslCliPath) {
+        // WSL strategy: execute via wsl.exe
+        command = 'wsl.exe';
+        args = this.wslDistribution
+          ? ['-d', this.wslDistribution, this.wslCliPath, 'models']
+          : [this.wslCliPath, 'models'];
+        opencodeLogger.debug(`Executing: ${command} ${args.join(' ')}`);
+      } else {
+        // Direct CLI execution
+        command = this.cliPath;
+        args = ['models'];
+        opencodeLogger.debug(`Executing: ${command} ${args.join(' ')}`);
+      }
+
+      const { stdout } = await execFileAsync(command, args, {
+        encoding: 'utf-8',
+        timeout: 30000,
+        windowsHide: true,
+        // Use shell on Windows for .cmd files
+        shell: process.platform === 'win32' && command.endsWith('.cmd'),
+      });
+
+      opencodeLogger.debug(
+        `Models output (${stdout.length} chars): ${stdout.substring(0, 200)}...`
+      );
+      return this.parseModelsOutput(stdout);
+    } catch (error) {
+      opencodeLogger.error(`Failed to fetch models from CLI: ${error}`);
+      return [];
+    }
+  }
+
+  /**
+   * Parse the output of `opencode models` command
+   *
+   * OpenCode CLI output format (one model per line):
+   * opencode/big-pickle
+   * opencode/glm-5-free
+   * anthropic/claude-3-5-haiku-20241022
+   * github-copilot/claude-3.5-sonnet
+   * ...
+   */
+  private parseModelsOutput(output: string): ModelDefinition[] {
+    // Parse line-based format (one model ID per line)
+    const lines = output.split('\n');
+    const models: ModelDefinition[] = [];
+
+    // Regex to validate "provider/model-name" format
+    // Provider: lowercase letters, numbers, dots, hyphens
+    // Model name: non-whitespace (supports nested paths like openrouter/anthropic/claude)
+    const modelIdRegex = OPENCODE_MODEL_ID_PATTERN;
+
+    for (const line of lines) {
+      // Remove ANSI escape codes if any
+      const cleanLine = line.replace(/\x1b\[[0-9;]*m/g, '').trim();
+
+      // Skip empty lines
+      if (!cleanLine) continue;
+
+      // Validate format using regex for robustness
+      if (modelIdRegex.test(cleanLine)) {
+        const separatorIndex = cleanLine.indexOf(OPENCODE_MODEL_ID_SEPARATOR);
+        if (separatorIndex <= 0 || separatorIndex === cleanLine.length - 1) {
+          continue;
+        }
+
+        const provider = cleanLine.slice(0, separatorIndex);
+        const name = cleanLine.slice(separatorIndex + 1);
+
+        if (!OPENCODE_PROVIDER_PATTERN.test(provider) || !OPENCODE_MODEL_NAME_PATTERN.test(name)) {
+          continue;
+        }
+
+        models.push(
+          this.modelInfoToDefinition({
+            id: cleanLine,
+            provider,
+            name,
+          })
+        );
+      }
+    }
+
+    opencodeLogger.debug(`Parsed ${models.length} models from CLI output`);
+    return models;
+  }
+
+  /**
+   * Convert OpenCodeModelInfo to ModelDefinition
+   */
+  private modelInfoToDefinition(model: OpenCodeModelInfo): ModelDefinition {
+    const displayName = model.displayName || this.formatModelDisplayName(model);
+    const tier = this.inferModelTier(model.id);
+
+    return {
+      id: model.id,
+      name: displayName,
+      modelString: model.id,
+      provider: model.provider, // Use the actual provider (github-copilot, google, etc.)
+      description: `${model.name} via ${this.formatProviderName(model.provider)}`,
+      supportsTools: true,
+      supportsVision: this.modelSupportsVision(model.id),
+      tier,
+      // Mark Claude Sonnet as default if available
+      default: model.id.includes('claude-sonnet-4'),
+    };
+  }
+
+  /**
+   * Format provider name for display
+   */
+  private formatProviderName(provider: string): string {
+    const providerNames: Record<string, string> = {
+      'github-copilot': 'GitHub Copilot',
+      google: 'Google AI',
+      openai: 'OpenAI',
+      anthropic: 'Anthropic',
+      openrouter: 'OpenRouter',
+      opencode: 'OpenCode',
+      ollama: 'Ollama',
+      lmstudio: 'LM Studio',
+      azure: 'Azure OpenAI',
+      xai: 'xAI',
+      deepseek: 'DeepSeek',
+    };
+    return (
+      providerNames[provider] ||
+      provider.charAt(0).toUpperCase() + provider.slice(1).replace(/-/g, ' ')
+    );
+  }
+
+  /**
+   * Format a display name for a model
+   */
+  private formatModelDisplayName(model: OpenCodeModelInfo): string {
+    // Extract the last path segment for nested model IDs
+    // e.g., "arcee-ai/trinity-large-preview:free" → "trinity-large-preview:free"
+    let rawName = model.name;
+    if (rawName.includes('/')) {
+      rawName = rawName.split('/').pop()!;
+    }
+
+    // Strip tier/pricing suffixes like ":free", ":extended"
+    const colonIdx = rawName.indexOf(':');
+    let suffix = '';
+    if (colonIdx !== -1) {
+      const tierPart = rawName.slice(colonIdx + 1);
+      if (/^(free|extended|beta|preview)$/i.test(tierPart)) {
+        suffix = ` (${tierPart.charAt(0).toUpperCase() + tierPart.slice(1)})`;
+      }
+      rawName = rawName.slice(0, colonIdx);
+    }
+
+    // Capitalize and format the model name
+    const formattedName = rawName
+      .split('-')
+      .map((part) => {
+        // Handle version numbers like "4-5" -> "4.5"
+        if (/^\d+$/.test(part)) {
+          return part;
+        }
+        return part.charAt(0).toUpperCase() + part.slice(1);
+      })
+      .join(' ')
+      .replace(/(\d)\s+(\d)/g, '$1.$2'); // "4 5" -> "4.5"
+
+    // Format provider name
+    const providerNames: Record<string, string> = {
+      copilot: 'GitHub Copilot',
+      anthropic: 'Anthropic',
+      openai: 'OpenAI',
+      google: 'Google',
+      'amazon-bedrock': 'AWS Bedrock',
+      bedrock: 'AWS Bedrock',
+      openrouter: 'OpenRouter',
+      opencode: 'OpenCode',
+      azure: 'Azure',
+      ollama: 'Ollama',
+      lmstudio: 'LM Studio',
+    };
+
+    const providerDisplay = providerNames[model.provider] || model.provider;
+    return `${formattedName}${suffix} (${providerDisplay})`;
+  }
+
+  /**
+   * Infer model tier based on model ID
+   */
+  private inferModelTier(modelId: string): 'basic' | 'standard' | 'premium' {
+    const lowerModelId = modelId.toLowerCase();
+
+    // Premium tier: flagship models
+    if (
+      lowerModelId.includes('opus') ||
+      lowerModelId.includes('gpt-5') ||
+      lowerModelId.includes('o3') ||
+      lowerModelId.includes('o4') ||
+      lowerModelId.includes('gemini-2') ||
+      lowerModelId.includes('deepseek-r1')
+    ) {
+      return 'premium';
+    }
+
+    // Basic tier: free or lightweight models
+    if (
+      lowerModelId.includes('free') ||
+      lowerModelId.includes('nano') ||
+      lowerModelId.includes('mini') ||
+      lowerModelId.includes('haiku') ||
+      lowerModelId.includes('flash')
+    ) {
+      return 'basic';
+    }
+
+    // Standard tier: everything else
+    return 'standard';
+  }
+
+  /**
+   * Check if a model supports vision based on model ID
+   */
+  private modelSupportsVision(modelId: string): boolean {
+    const lowerModelId = modelId.toLowerCase();
+
+    // Models known to support vision
+    const visionModels = ['claude', 'gpt-4', 'gpt-5', 'gemini', 'nova', 'llama-3', 'llama-4'];
+
+    return visionModels.some((vm) => lowerModelId.includes(vm));
+  }
+
+  /**
+   * Fetch authenticated providers from OpenCode CLI
+   *
+   * Runs `opencode auth list` to get the list of authenticated providers.
+   * Uses async execFile to avoid blocking the event loop.
+   */
+  async fetchAuthenticatedProviders(): Promise<OpenCodeProviderInfo[]> {
+    this.ensureCliDetected();
+
+    if (!this.cliPath) {
+      opencodeLogger.debug('OpenCode CLI not available for provider fetch');
+      return [];
+    }
+
+    try {
+      let command: string;
+      let args: string[];
+
+      if (this.detectedStrategy === 'npx') {
+        // NPX strategy
+        command = process.platform === 'win32' ? 'npx.cmd' : 'npx';
+        args = ['opencode-ai@latest', 'auth', 'list'];
+        opencodeLogger.debug(`Executing: ${command} ${args.join(' ')}`);
+      } else if (this.useWsl && this.wslCliPath) {
+        // WSL strategy
+        command = 'wsl.exe';
+        args = this.wslDistribution
+          ? ['-d', this.wslDistribution, this.wslCliPath, 'auth', 'list']
+          : [this.wslCliPath, 'auth', 'list'];
+        opencodeLogger.debug(`Executing: ${command} ${args.join(' ')}`);
+      } else {
+        // Direct CLI execution
+        command = this.cliPath;
+        args = ['auth', 'list'];
+        opencodeLogger.debug(`Executing: ${command} ${args.join(' ')}`);
+      }
+
+      const { stdout } = await execFileAsync(command, args, {
+        encoding: 'utf-8',
+        timeout: 15000,
+        windowsHide: true,
+        // Use shell on Windows for .cmd files
+        shell: process.platform === 'win32' && command.endsWith('.cmd'),
+      });
+
+      opencodeLogger.debug(
+        `Auth list output (${stdout.length} chars): ${stdout.substring(0, 200)}...`
+      );
+      const providers = this.parseProvidersOutput(stdout);
+      this.cachedProviders = providers;
+      return providers;
+    } catch (error) {
+      opencodeLogger.error(`Failed to fetch providers from CLI: ${error}`);
+      return this.cachedProviders || [];
+    }
+  }
+
+  /**
+   * Parse the output of `opencode auth list` command
+   *
+   * OpenCode CLI output format:
+   * ┌  Credentials ~/.local/share/opencode/auth.json
+   * │
+   * ●  Anthropic oauth
+   * │
+   * ●  GitHub Copilot oauth
+   * │
+   * └  4 credentials
+   *
+   * Each line with ● contains: provider name and auth method (oauth/api)
+   */
+  private parseProvidersOutput(output: string): OpenCodeProviderInfo[] {
+    const lines = output.split('\n');
+    const providers: OpenCodeProviderInfo[] = [];
+
+    // Provider name to ID mapping
+    const providerIdMap: Record<string, string> = {
+      anthropic: 'anthropic',
+      'github copilot': 'github-copilot',
+      copilot: 'github-copilot',
+      google: 'google',
+      openai: 'openai',
+      openrouter: 'openrouter',
+      azure: 'azure',
+      bedrock: 'amazon-bedrock',
+      'amazon bedrock': 'amazon-bedrock',
+      ollama: 'ollama',
+      'lm studio': 'lmstudio',
+      lmstudio: 'lmstudio',
+      opencode: 'opencode',
+      'z.ai coding plan': 'zai-coding-plan',
+      'z.ai': 'z-ai',
+    };
+
+    for (const line of lines) {
+      // Look for lines with ● which indicate authenticated providers
+      // Format: "●  Provider Name auth_method"
+      if (line.includes('●')) {
+        // Remove ANSI escape codes and the ● symbol
+        const cleanLine = line
+          .replace(/\x1b\[[0-9;]*m/g, '') // Remove ANSI codes
+          .replace(/●/g, '') // Remove ● symbol
+          .trim();
+
+        if (!cleanLine) continue;
+
+        // Parse "Provider Name auth_method" format
+        // Auth method is the last word (oauth, api, etc.)
+        const parts = cleanLine.split(/\s+/);
+        if (parts.length >= 2) {
+          const authMethod = parts[parts.length - 1].toLowerCase();
+          const providerName = parts.slice(0, -1).join(' ');
+
+          // Determine auth method type
+          let authMethodType: 'oauth' | 'api_key' | undefined;
+          if (authMethod === 'oauth') {
+            authMethodType = 'oauth';
+          } else if (authMethod === 'api' || authMethod === 'api_key') {
+            authMethodType = 'api_key';
+          }
+
+          // Get provider ID from name
+          const providerNameLower = providerName.toLowerCase();
+          const providerId =
+            providerIdMap[providerNameLower] || providerNameLower.replace(/\s+/g, '-');
+
+          providers.push({
+            id: providerId,
+            name: providerName,
+            authenticated: true, // If it's listed with ●, it's authenticated
+            authMethod: authMethodType,
+          });
+        }
+      }
+    }
+
+    opencodeLogger.debug(`Parsed ${providers.length} providers from auth list`);
+    return providers;
+  }
+
+  /**
+   * Get cached authenticated providers
+   */
+  getCachedProviders(): OpenCodeProviderInfo[] | null {
+    return this.cachedProviders;
+  }
+
+  /**
+   * Clear the model cache, forcing a refresh on next access
+   */
+  clearModelCache(): void {
+    this.cachedModels = null;
+    this.modelsCacheExpiry = 0;
+    this.cachedProviders = null;
+    opencodeLogger.debug('Model cache cleared');
+  }
+
+  /**
+   * Check if we have cached models (not just defaults)
+   */
+  hasCachedModels(): boolean {
+    return this.cachedModels !== null && this.cachedModels.length > 0;
+  }
+
+  // ==========================================================================
+  // Feature Support
+  // ==========================================================================
+
+  /**
+   * Check if a feature is supported by OpenCode
+   *
+   * Supported features:
+   * - tools: Function calling / tool use
+   * - text: Text generation
+   * - vision: Image understanding
+   */
+  supportsFeature(feature: string): boolean {
+    const supportedFeatures = ['tools', 'text', 'vision'];
+    return supportedFeatures.includes(feature);
+  }
+
+  // ==========================================================================
+  // Authentication
+  // ==========================================================================
+
+  /**
+   * Check authentication status for OpenCode CLI
+   *
+   * Checks for authentication via:
+   * - OAuth token in auth file
+   * - API key in auth file
+   */
+  async checkAuth(): Promise<OpenCodeAuthStatus> {
+    const authIndicators = await getOpenCodeAuthIndicators();
+
+    // Check for OAuth token
+    if (authIndicators.hasOAuthToken) {
+      return {
+        authenticated: true,
+        method: 'oauth',
+        hasOAuthToken: true,
+        hasApiKey: authIndicators.hasApiKey,
+      };
+    }
+
+    // Check for API key
+    if (authIndicators.hasApiKey) {
+      return {
+        authenticated: true,
+        method: 'api_key',
+        hasOAuthToken: false,
+        hasApiKey: true,
+      };
+    }
+
+    return {
+      authenticated: false,
+      method: 'none',
+      hasOAuthToken: false,
+      hasApiKey: false,
+    };
+  }
+
+  // ==========================================================================
+  // Installation Detection
+  // ==========================================================================
+
+  /**
+   * Detect OpenCode installation status
+   *
+   * Checks if the opencode CLI is available either through:
+   * - Direct installation (npm global)
+   * - NPX (fallback on Windows)
+   * Also checks authentication status.
+   */
+  async detectInstallation(): Promise<InstallationStatus> {
+    this.ensureCliDetected();
+
+    const installed = await this.isInstalled();
+    const auth = await this.checkAuth();
+
+    return {
+      installed,
+      path: this.cliPath || undefined,
+      method: this.detectedStrategy === 'npx' ? 'npm' : 'cli',
+      authenticated: auth.authenticated,
+      hasApiKey: auth.hasApiKey,
+      hasOAuthToken: auth.hasOAuthToken,
+    };
+  }
+}
diff --git a/temp_repo/apps/server/src/providers/provider-factory.ts b/temp_repo/apps/server/src/providers/provider-factory.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2b5535084a26100c35a7ceeb5eb6daa6a6d8c8a6
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/provider-factory.ts
@@ -0,0 +1,350 @@
+/**
+ * Provider Factory - Routes model IDs to the appropriate provider
+ *
+ * Uses a registry pattern for dynamic provider registration.
+ * Providers register themselves on import, making it easy to add new providers.
+ */
+
+import { BaseProvider } from './base-provider.js';
+import type { InstallationStatus, ModelDefinition } from './types.js';
+import {
+  isCursorModel,
+  isCodexModel,
+  isOpencodeModel,
+  isGeminiModel,
+  isCopilotModel,
+  type ModelProvider,
+} from '@automaker/types';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const DISCONNECTED_MARKERS: Record<string, string> = {
+  claude: '.claude-disconnected',
+  codex: '.codex-disconnected',
+  cursor: '.cursor-disconnected',
+  opencode: '.opencode-disconnected',
+  gemini: '.gemini-disconnected',
+  copilot: '.copilot-disconnected',
+};
+
+/**
+ * Check if a provider CLI is disconnected from the app
+ */
+export function isProviderDisconnected(providerName: string): boolean {
+  const markerFile = DISCONNECTED_MARKERS[providerName.toLowerCase()];
+  if (!markerFile) return false;
+
+  const markerPath = path.join(process.cwd(), '.automaker', markerFile);
+  return fs.existsSync(markerPath);
+}
+
+/**
+ * Provider registration entry
+ */
+interface ProviderRegistration {
+  /** Factory function to create provider instance */
+  factory: () => BaseProvider;
+  /** Aliases for this provider (e.g., 'anthropic' for 'claude') */
+  aliases?: string[];
+  /** Function to check if this provider can handle a model ID */
+  canHandleModel?: (modelId: string) => boolean;
+  /** Priority for model matching (higher = checked first) */
+  priority?: number;
+}
+
+/**
+ * Provider registry - stores registered providers
+ */
+const providerRegistry = new Map<string, ProviderRegistration>();
+
+/**
+ * Register a provider with the factory
+ *
+ * @param name Provider name (e.g., 'claude', 'cursor')
+ * @param registration Provider registration config
+ */
+export function registerProvider(name: string, registration: ProviderRegistration): void {
+  providerRegistry.set(name.toLowerCase(), registration);
+}
+
+/** Cached mock provider instance when AUTOMAKER_MOCK_AGENT is set (E2E/CI). */
+let mockProviderInstance: BaseProvider | null = null;
+
+function getMockProvider(): BaseProvider {
+  if (!mockProviderInstance) {
+    mockProviderInstance = new MockProvider();
+  }
+  return mockProviderInstance;
+}
+
+export class ProviderFactory {
+  /**
+   * Determine which provider to use for a given model
+   *
+   * @param model Model identifier
+   * @returns Provider name (ModelProvider type)
+   */
+  static getProviderNameForModel(model: string): ModelProvider {
+    if (process.env.AUTOMAKER_MOCK_AGENT === 'true') {
+      return 'claude' as ModelProvider; // Name only; getProviderForModel returns MockProvider
+    }
+    const lowerModel = model.toLowerCase();
+
+    // Get all registered providers sorted by priority (descending)
+    const registrations = Array.from(providerRegistry.entries()).sort(
+      ([, a], [, b]) => (b.priority ?? 0) - (a.priority ?? 0)
+    );
+
+    // Check each provider's canHandleModel function
+    for (const [name, reg] of registrations) {
+      if (reg.canHandleModel?.(lowerModel)) {
+        return name as ModelProvider;
+      }
+    }
+
+    // Fallback: Check for explicit prefixes
+    for (const [name] of registrations) {
+      if (lowerModel.startsWith(`${name}-`)) {
+        return name as ModelProvider;
+      }
+    }
+
+    // Default to claude (first registered provider or claude)
+    return 'claude';
+  }
+
+  /**
+   * Get the appropriate provider for a given model ID
+   *
+   * @param modelId Model identifier (e.g., "claude-opus-4-6", "cursor-gpt-4o", "cursor-auto")
+   * @param options Optional settings
+   * @param options.throwOnDisconnected Throw error if provider is disconnected (default: true)
+   * @returns Provider instance for the model
+   * @throws Error if provider is disconnected and throwOnDisconnected is true
+   */
+  static getProviderForModel(
+    modelId: string,
+    options: { throwOnDisconnected?: boolean } = {}
+  ): BaseProvider {
+    if (process.env.AUTOMAKER_MOCK_AGENT === 'true') {
+      return getMockProvider();
+    }
+    const { throwOnDisconnected = true } = options;
+    const providerName = this.getProviderForModelName(modelId);
+
+    // Check if provider is disconnected
+    if (throwOnDisconnected && isProviderDisconnected(providerName)) {
+      throw new Error(
+        `${providerName.charAt(0).toUpperCase() + providerName.slice(1)} CLI is disconnected from the app. ` +
+          `Please go to Settings > Providers and click "Sign In" to reconnect.`
+      );
+    }
+
+    const provider = this.getProviderByName(providerName);
+
+    if (!provider) {
+      // Fallback to claude if provider not found
+      const claudeReg = providerRegistry.get('claude');
+      if (claudeReg) {
+        return claudeReg.factory();
+      }
+      throw new Error(`No provider found for model: ${modelId}`);
+    }
+
+    return provider;
+  }
+
+  /**
+   * Get the provider name for a given model ID (without creating provider instance)
+   */
+  static getProviderForModelName(modelId: string): string {
+    if (process.env.AUTOMAKER_MOCK_AGENT === 'true') {
+      return 'claude';
+    }
+    const lowerModel = modelId.toLowerCase();
+
+    // Get all registered providers sorted by priority (descending)
+    const registrations = Array.from(providerRegistry.entries()).sort(
+      ([, a], [, b]) => (b.priority ?? 0) - (a.priority ?? 0)
+    );
+
+    // Check each provider's canHandleModel function
+    for (const [name, reg] of registrations) {
+      if (reg.canHandleModel?.(lowerModel)) {
+        return name;
+      }
+    }
+
+    // Fallback: Check for explicit prefixes
+    for (const [name] of registrations) {
+      if (lowerModel.startsWith(`${name}-`)) {
+        return name;
+      }
+    }
+
+    // Default to claude (first registered provider or claude)
+    return 'claude';
+  }
+
+  /**
+   * Get all available providers
+   */
+  static getAllProviders(): BaseProvider[] {
+    return Array.from(providerRegistry.values()).map((reg) => reg.factory());
+  }
+
+  /**
+   * Check installation status for all providers
+   *
+   * @returns Map of provider name to installation status
+   */
+  static async checkAllProviders(): Promise<Record<string, InstallationStatus>> {
+    const statuses: Record<string, InstallationStatus> = {};
+
+    for (const [name, reg] of providerRegistry.entries()) {
+      const provider = reg.factory();
+      const status = await provider.detectInstallation();
+      statuses[name] = status;
+    }
+
+    return statuses;
+  }
+
+  /**
+   * Get provider by name (for direct access if needed)
+   *
+   * @param name Provider name (e.g., "claude", "cursor") or alias (e.g., "anthropic")
+   * @returns Provider instance or null if not found
+   */
+  static getProviderByName(name: string): BaseProvider | null {
+    const lowerName = name.toLowerCase();
+
+    // Direct lookup
+    const directReg = providerRegistry.get(lowerName);
+    if (directReg) {
+      return directReg.factory();
+    }
+
+    // Check aliases
+    for (const [, reg] of providerRegistry.entries()) {
+      if (reg.aliases?.includes(lowerName)) {
+        return reg.factory();
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Get all available models from all providers
+   */
+  static getAllAvailableModels(): ModelDefinition[] {
+    const providers = this.getAllProviders();
+    return providers.flatMap((p) => p.getAvailableModels());
+  }
+
+  /**
+   * Get list of registered provider names
+   */
+  static getRegisteredProviderNames(): string[] {
+    return Array.from(providerRegistry.keys());
+  }
+
+  /**
+   * Check if a specific model supports vision/image input
+   *
+   * @param modelId Model identifier
+   * @returns Whether the model supports vision (defaults to true if model not found)
+   */
+  static modelSupportsVision(modelId: string): boolean {
+    const provider = this.getProviderForModel(modelId);
+    const models = provider.getAvailableModels();
+
+    // Find the model in the available models list
+    for (const model of models) {
+      if (
+        model.id === modelId ||
+        model.modelString === modelId ||
+        model.id.endsWith(`-${modelId}`) ||
+        model.modelString.endsWith(`-${modelId}`) ||
+        model.modelString === modelId.replace(/^(claude|cursor|codex|gemini)-/, '') ||
+        model.modelString === modelId.replace(/-(claude|cursor|codex|gemini)$/, '')
+      ) {
+        return model.supportsVision ?? true;
+      }
+    }
+
+    // Also try exact match with model string from provider's model map
+    for (const model of models) {
+      if (model.modelString === modelId || model.id === modelId) {
+        return model.supportsVision ?? true;
+      }
+    }
+
+    // Default to true (Claude SDK supports vision by default)
+    return true;
+  }
+}
+
+// =============================================================================
+// Provider Registrations
+// =============================================================================
+
+// Import providers for registration side-effects
+import { MockProvider } from './mock-provider.js';
+import { ClaudeProvider } from './claude-provider.js';
+import { CursorProvider } from './cursor-provider.js';
+import { CodexProvider } from './codex-provider.js';
+import { OpencodeProvider } from './opencode-provider.js';
+import { GeminiProvider } from './gemini-provider.js';
+import { CopilotProvider } from './copilot-provider.js';
+
+// Register Claude provider
+registerProvider('claude', {
+  factory: () => new ClaudeProvider(),
+  aliases: ['anthropic'],
+  canHandleModel: (model: string) => {
+    return (
+      model.startsWith('claude-') || ['opus', 'sonnet', 'haiku'].some((n) => model.includes(n))
+    );
+  },
+  priority: 0, // Default priority
+});
+
+// Register Cursor provider
+registerProvider('cursor', {
+  factory: () => new CursorProvider(),
+  canHandleModel: (model: string) => isCursorModel(model),
+  priority: 10, // Higher priority - check Cursor models first
+});
+
+// Register Codex provider
+registerProvider('codex', {
+  factory: () => new CodexProvider(),
+  aliases: ['openai'],
+  canHandleModel: (model: string) => isCodexModel(model),
+  priority: 5, // Medium priority - check after Cursor but before Claude
+});
+
+// Register OpenCode provider
+registerProvider('opencode', {
+  factory: () => new OpencodeProvider(),
+  canHandleModel: (model: string) => isOpencodeModel(model),
+  priority: 3, // Between codex (5) and claude (0)
+});
+
+// Register Gemini provider
+registerProvider('gemini', {
+  factory: () => new GeminiProvider(),
+  aliases: ['google'],
+  canHandleModel: (model: string) => isGeminiModel(model),
+  priority: 4, // Between opencode (3) and codex (5)
+});
+
+// Register Copilot provider (GitHub Copilot SDK)
+registerProvider('copilot', {
+  factory: () => new CopilotProvider(),
+  aliases: ['github-copilot', 'github'],
+  canHandleModel: (model: string) => isCopilotModel(model),
+  priority: 6, // High priority - check before Codex since both can handle GPT models
+});
diff --git a/temp_repo/apps/server/src/providers/simple-query-service.ts b/temp_repo/apps/server/src/providers/simple-query-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5ebe4db974f91423d875d107e161bb3c20fb381c
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/simple-query-service.ts
@@ -0,0 +1,273 @@
+/**
+ * Simple Query Service - Simplified interface for basic AI queries
+ *
+ * Use this for routes that need simple text responses without
+ * complex event handling. This service abstracts away the provider
+ * selection and streaming details, providing a clean interface
+ * for common query patterns.
+ *
+ * Benefits:
+ * - No direct SDK imports needed in route files
+ * - Consistent provider routing based on model
+ * - Automatic text extraction from streaming responses
+ * - Structured output support for JSON schema responses
+ * - Eliminates duplicate extractTextFromStream() functions
+ */
+
+import { ProviderFactory } from './provider-factory.js';
+import type {
+  ThinkingLevel,
+  ReasoningEffort,
+  ClaudeApiProfile,
+  ClaudeCompatibleProvider,
+  Credentials,
+} from '@automaker/types';
+import { stripProviderPrefix } from '@automaker/types';
+
+/**
+ * Options for simple query execution
+ */
+export interface SimpleQueryOptions {
+  /** The prompt to send to the AI (can be text or multi-part content) */
+  prompt: string | Array<{ type: string; text?: string; source?: object }>;
+  /** Model to use (with or without provider prefix) */
+  model?: string;
+  /** Working directory for the query */
+  cwd: string;
+  /** System prompt (combined with user prompt for some providers) */
+  systemPrompt?: string;
+  /** Maximum turns for agentic operations (default: 1) */
+  maxTurns?: number;
+  /** Tools to allow (default: [] for simple queries) */
+  allowedTools?: string[];
+  /** Abort controller for cancellation */
+  abortController?: AbortController;
+  /** Structured output format for JSON responses */
+  outputFormat?: {
+    type: 'json_schema';
+    schema: Record<string, unknown>;
+  };
+  /** Thinking level for Claude models */
+  thinkingLevel?: ThinkingLevel;
+  /** Reasoning effort for Codex/OpenAI models */
+  reasoningEffort?: ReasoningEffort;
+  /** If true, runs in read-only mode (no file writes) */
+  readOnly?: boolean;
+  /** Setting sources for CLAUDE.md loading */
+  settingSources?: Array<'user' | 'project' | 'local'>;
+  /**
+   * Active Claude API profile for alternative endpoint configuration
+   * @deprecated Use claudeCompatibleProvider instead
+   */
+  claudeApiProfile?: ClaudeApiProfile;
+  /**
+   * Claude-compatible provider for alternative endpoint configuration.
+   * Takes precedence over claudeApiProfile if both are set.
+   */
+  claudeCompatibleProvider?: ClaudeCompatibleProvider;
+  /** Credentials for resolving 'credentials' apiKeySource in Claude API profiles/providers */
+  credentials?: Credentials;
+}
+
+/**
+ * Result from a simple query
+ */
+export interface SimpleQueryResult {
+  /** The accumulated text response */
+  text: string;
+  /** Structured output if outputFormat was specified and provider supports it */
+  structured_output?: Record<string, unknown>;
+}
+
+/**
+ * Options for streaming query execution
+ */
+export interface StreamingQueryOptions extends SimpleQueryOptions {
+  /** Callback for each text chunk received */
+  onText?: (text: string) => void;
+  /** Callback for tool use events */
+  onToolUse?: (tool: string, input: unknown) => void;
+  /** Callback for thinking blocks (if available) */
+  onThinking?: (thinking: string) => void;
+}
+
+/**
+ * Default model to use when none specified
+ */
+const DEFAULT_MODEL = 'claude-sonnet-4-6';
+
+/**
+ * Execute a simple query and return the text result
+ *
+ * Use this for simple, non-streaming queries where you just need
+ * the final text response. For more complex use cases with progress
+ * callbacks, use streamingQuery() instead.
+ *
+ * @example
+ * ```typescript
+ * const result = await simpleQuery({
+ *   prompt: 'Generate a title for: user authentication',
+ *   cwd: process.cwd(),
+ *   systemPrompt: 'You are a title generator...',
+ *   maxTurns: 1,
+ *   allowedTools: [],
+ * });
+ * console.log(result.text); // "Add user authentication"
+ * ```
+ */
+export async function simpleQuery(options: SimpleQueryOptions): Promise<SimpleQueryResult> {
+  const model = options.model || DEFAULT_MODEL;
+  const provider = ProviderFactory.getProviderForModel(model);
+  const bareModel = stripProviderPrefix(model);
+
+  let responseText = '';
+  let structuredOutput: Record<string, unknown> | undefined;
+
+  // Build provider options
+  const providerOptions = {
+    prompt: options.prompt,
+    model: bareModel,
+    originalModel: model,
+    cwd: options.cwd,
+    systemPrompt: options.systemPrompt,
+    maxTurns: options.maxTurns ?? 1,
+    allowedTools: options.allowedTools ?? [],
+    abortController: options.abortController,
+    outputFormat: options.outputFormat,
+    thinkingLevel: options.thinkingLevel,
+    reasoningEffort: options.reasoningEffort,
+    readOnly: options.readOnly,
+    settingSources: options.settingSources,
+    claudeApiProfile: options.claudeApiProfile, // Legacy: Pass active Claude API profile for alternative endpoint configuration
+    claudeCompatibleProvider: options.claudeCompatibleProvider, // New: Pass Claude-compatible provider (takes precedence)
+    credentials: options.credentials, // Pass credentials for resolving 'credentials' apiKeySource
+  };
+
+  for await (const msg of provider.executeQuery(providerOptions)) {
+    // Handle error messages
+    if (msg.type === 'error') {
+      const errorMessage = msg.error || 'Provider returned an error';
+      throw new Error(errorMessage);
+    }
+
+    // Extract text from assistant messages
+    if (msg.type === 'assistant' && msg.message?.content) {
+      for (const block of msg.message.content) {
+        if (block.type === 'text' && block.text) {
+          responseText += block.text;
+        }
+      }
+    }
+
+    // Handle result messages
+    if (msg.type === 'result') {
+      if (msg.subtype === 'success') {
+        // Use result text if longer than accumulated text
+        if (msg.result && msg.result.length > responseText.length) {
+          responseText = msg.result;
+        }
+        // Capture structured output if present
+        if (msg.structured_output) {
+          structuredOutput = msg.structured_output;
+        }
+      } else if (msg.subtype === 'error_max_turns') {
+        // Max turns reached - return what we have
+        break;
+      } else if (msg.subtype === 'error_max_structured_output_retries') {
+        throw new Error('Could not produce valid structured output after retries');
+      }
+    }
+  }
+
+  return { text: responseText, structured_output: structuredOutput };
+}
+
+/**
+ * Execute a streaming query with event callbacks
+ *
+ * Use this for queries where you need real-time progress updates,
+ * such as when displaying streaming output to a user.
+ *
+ * @example
+ * ```typescript
+ * const result = await streamingQuery({
+ *   prompt: 'Analyze this project and suggest improvements',
+ *   cwd: '/path/to/project',
+ *   maxTurns: 250,
+ *   allowedTools: ['Read', 'Glob', 'Grep'],
+ *   onText: (text) => emitProgress(text),
+ *   onToolUse: (tool, input) => emitToolUse(tool, input),
+ * });
+ * ```
+ */
+export async function streamingQuery(options: StreamingQueryOptions): Promise<SimpleQueryResult> {
+  const model = options.model || DEFAULT_MODEL;
+  const provider = ProviderFactory.getProviderForModel(model);
+  const bareModel = stripProviderPrefix(model);
+
+  let responseText = '';
+  let structuredOutput: Record<string, unknown> | undefined;
+
+  // Build provider options
+  const providerOptions = {
+    prompt: options.prompt,
+    model: bareModel,
+    originalModel: model,
+    cwd: options.cwd,
+    systemPrompt: options.systemPrompt,
+    maxTurns: options.maxTurns ?? 250,
+    allowedTools: options.allowedTools ?? ['Read', 'Glob', 'Grep'],
+    abortController: options.abortController,
+    outputFormat: options.outputFormat,
+    thinkingLevel: options.thinkingLevel,
+    reasoningEffort: options.reasoningEffort,
+    readOnly: options.readOnly,
+    settingSources: options.settingSources,
+    claudeApiProfile: options.claudeApiProfile, // Legacy: Pass active Claude API profile for alternative endpoint configuration
+    claudeCompatibleProvider: options.claudeCompatibleProvider, // New: Pass Claude-compatible provider (takes precedence)
+    credentials: options.credentials, // Pass credentials for resolving 'credentials' apiKeySource
+  };
+
+  for await (const msg of provider.executeQuery(providerOptions)) {
+    // Handle error messages
+    if (msg.type === 'error') {
+      const errorMessage = msg.error || 'Provider returned an error';
+      throw new Error(errorMessage);
+    }
+
+    // Extract content from assistant messages
+    if (msg.type === 'assistant' && msg.message?.content) {
+      for (const block of msg.message.content) {
+        if (block.type === 'text' && block.text) {
+          responseText += block.text;
+          options.onText?.(block.text);
+        } else if (block.type === 'tool_use' && block.name) {
+          options.onToolUse?.(block.name, block.input);
+        } else if (block.type === 'thinking' && block.thinking) {
+          options.onThinking?.(block.thinking);
+        }
+      }
+    }
+
+    // Handle result messages
+    if (msg.type === 'result') {
+      if (msg.subtype === 'success') {
+        // Use result text if longer than accumulated text
+        if (msg.result && msg.result.length > responseText.length) {
+          responseText = msg.result;
+        }
+        // Capture structured output if present
+        if (msg.structured_output) {
+          structuredOutput = msg.structured_output;
+        }
+      } else if (msg.subtype === 'error_max_turns') {
+        // Max turns reached - return what we have
+        break;
+      } else if (msg.subtype === 'error_max_structured_output_retries') {
+        throw new Error('Could not produce valid structured output after retries');
+      }
+    }
+  }
+
+  return { text: responseText, structured_output: structuredOutput };
+}
diff --git a/temp_repo/apps/server/src/providers/tool-normalization.ts b/temp_repo/apps/server/src/providers/tool-normalization.ts
new file mode 100644
index 0000000000000000000000000000000000000000..27442a7a22cd919d601b31167173a37e7793e4f7
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/tool-normalization.ts
@@ -0,0 +1,112 @@
+/**
+ * Shared tool normalization utilities for AI providers
+ *
+ * These utilities help normalize tool inputs from various AI providers
+ * to the standard format expected by the application.
+ */
+
+/**
+ * Valid todo status values in the standard format
+ */
+type TodoStatus = 'pending' | 'in_progress' | 'completed';
+
+/**
+ * Set of valid status values for validation
+ */
+const VALID_STATUSES = new Set<TodoStatus>(['pending', 'in_progress', 'completed']);
+
+/**
+ * Todo item from various AI providers (Gemini, Copilot, etc.)
+ */
+interface ProviderTodo {
+  description?: string;
+  content?: string;
+  status?: string;
+}
+
+/**
+ * Standard todo format used by the application
+ */
+interface NormalizedTodo {
+  content: string;
+  status: TodoStatus;
+  activeForm: string;
+}
+
+/**
+ * Normalize a provider status value to a valid TodoStatus
+ */
+function normalizeStatus(status: string | undefined): TodoStatus {
+  if (!status) return 'pending';
+  if (status === 'cancelled' || status === 'canceled') return 'completed';
+  if (VALID_STATUSES.has(status as TodoStatus)) return status as TodoStatus;
+  return 'pending';
+}
+
+/**
+ * Normalize todos array from provider format to standard format
+ *
+ * Handles different formats from providers:
+ * - Gemini: { description, status } with 'cancelled' as possible status
+ * - Copilot: { content/description, status } with 'cancelled' as possible status
+ *
+ * Output format (Claude/Standard):
+ * - { content, status, activeForm } where status is 'pending'|'in_progress'|'completed'
+ */
+export function normalizeTodos(todos: ProviderTodo[] | null | undefined): NormalizedTodo[] {
+  if (!todos) return [];
+  return todos.map((todo) => ({
+    content: todo.content || todo.description || '',
+    status: normalizeStatus(todo.status),
+    // Use content/description as activeForm since providers may not have it
+    activeForm: todo.content || todo.description || '',
+  }));
+}
+
+/**
+ * Normalize file path parameters from various provider formats
+ *
+ * Different providers use different parameter names for file paths:
+ * - path, file, filename, filePath -> file_path
+ */
+export function normalizeFilePathInput(input: Record<string, unknown>): Record<string, unknown> {
+  const normalized = { ...input };
+  if (!normalized.file_path) {
+    if (input.path) normalized.file_path = input.path;
+    else if (input.file) normalized.file_path = input.file;
+    else if (input.filename) normalized.file_path = input.filename;
+    else if (input.filePath) normalized.file_path = input.filePath;
+  }
+  return normalized;
+}
+
+/**
+ * Normalize shell command parameters from various provider formats
+ *
+ * Different providers use different parameter names for commands:
+ * - cmd, script -> command
+ */
+export function normalizeCommandInput(input: Record<string, unknown>): Record<string, unknown> {
+  const normalized = { ...input };
+  if (!normalized.command) {
+    if (input.cmd) normalized.command = input.cmd;
+    else if (input.script) normalized.command = input.script;
+  }
+  return normalized;
+}
+
+/**
+ * Normalize search pattern parameters from various provider formats
+ *
+ * Different providers use different parameter names for search patterns:
+ * - query, search, regex -> pattern
+ */
+export function normalizePatternInput(input: Record<string, unknown>): Record<string, unknown> {
+  const normalized = { ...input };
+  if (!normalized.pattern) {
+    if (input.query) normalized.pattern = input.query;
+    else if (input.search) normalized.pattern = input.search;
+    else if (input.regex) normalized.pattern = input.regex;
+  }
+  return normalized;
+}
diff --git a/temp_repo/apps/server/src/providers/types.ts b/temp_repo/apps/server/src/providers/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5d439091bbeb7130ae8d74814cc3feec97dec082
--- /dev/null
+++ b/temp_repo/apps/server/src/providers/types.ts
@@ -0,0 +1,25 @@
+/**
+ * Shared types for AI model providers
+ *
+ * Re-exports types from @automaker/types for consistency across the codebase.
+ * All provider types are defined in @automaker/types to avoid duplication.
+ */
+
+// Re-export all provider types from @automaker/types
+export type {
+  ProviderConfig,
+  ConversationMessage,
+  ExecuteOptions,
+  McpServerConfig,
+  McpStdioServerConfig,
+  McpSSEServerConfig,
+  McpHttpServerConfig,
+  ContentBlock,
+  ProviderMessage,
+  InstallationStatus,
+  ValidationResult,
+  ModelDefinition,
+  AgentDefinition,
+  ReasoningEffort,
+  SystemPromptPreset,
+} from '@automaker/types';
diff --git a/temp_repo/apps/server/src/routes/agent/common.ts b/temp_repo/apps/server/src/routes/agent/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b24a76a7cd0861b4f94c8e1666dfe8ff4bb9513
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/agent/common.ts
@@ -0,0 +1,12 @@
+/**
+ * Common utilities for agent routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+const logger = createLogger('Agent');
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/agent/index.ts b/temp_repo/apps/server/src/routes/agent/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4e27c2ecc0aefc057c3a7ed72977e7a68aeab24d
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/agent/index.ts
@@ -0,0 +1,45 @@
+/**
+ * Agent routes - HTTP API for Claude agent interactions
+ */
+
+import { Router } from 'express';
+import { AgentService } from '../../services/agent-service.js';
+import type { EventEmitter } from '../../lib/events.js';
+import { validatePathParams } from '../../middleware/validate-paths.js';
+import { createStartHandler } from './routes/start.js';
+import { createSendHandler } from './routes/send.js';
+import { createHistoryHandler } from './routes/history.js';
+import { createStopHandler } from './routes/stop.js';
+import { createClearHandler } from './routes/clear.js';
+import { createModelHandler } from './routes/model.js';
+import { createQueueAddHandler } from './routes/queue-add.js';
+import { createQueueListHandler } from './routes/queue-list.js';
+import { createQueueRemoveHandler } from './routes/queue-remove.js';
+import { createQueueClearHandler } from './routes/queue-clear.js';
+
+export function createAgentRoutes(agentService: AgentService, _events: EventEmitter): Router {
+  const router = Router();
+
+  router.post('/start', validatePathParams('workingDirectory?'), createStartHandler(agentService));
+  router.post(
+    '/send',
+    validatePathParams('workingDirectory?', 'imagePaths[]'),
+    createSendHandler(agentService)
+  );
+  router.post('/history', createHistoryHandler(agentService));
+  router.post('/stop', createStopHandler(agentService));
+  router.post('/clear', createClearHandler(agentService));
+  router.post('/model', createModelHandler(agentService));
+
+  // Queue routes
+  router.post(
+    '/queue/add',
+    validatePathParams('imagePaths[]'),
+    createQueueAddHandler(agentService)
+  );
+  router.post('/queue/list', createQueueListHandler(agentService));
+  router.post('/queue/remove', createQueueRemoveHandler(agentService));
+  router.post('/queue/clear', createQueueClearHandler(agentService));
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/agent/routes/clear.ts b/temp_repo/apps/server/src/routes/agent/routes/clear.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3ee605b60e16b47b183dbb95db46e63fa2cd2b76
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/agent/routes/clear.ts
@@ -0,0 +1,26 @@
+/**
+ * POST /clear endpoint - Clear conversation
+ */
+
+import type { Request, Response } from 'express';
+import { AgentService } from '../../../services/agent-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createClearHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId } = req.body as { sessionId: string };
+
+      if (!sessionId) {
+        res.status(400).json({ success: false, error: 'sessionId is required' });
+        return;
+      }
+
+      const result = await agentService.clearSession(sessionId);
+      res.json(result);
+    } catch (error) {
+      logError(error, 'Clear session failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/agent/routes/history.ts b/temp_repo/apps/server/src/routes/agent/routes/history.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e11578d71deb3d872a94967ba402f4527b52483b
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/agent/routes/history.ts
@@ -0,0 +1,26 @@
+/**
+ * POST /history endpoint - Get conversation history
+ */
+
+import type { Request, Response } from 'express';
+import { AgentService } from '../../../services/agent-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createHistoryHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId } = req.body as { sessionId: string };
+
+      if (!sessionId) {
+        res.status(400).json({ success: false, error: 'sessionId is required' });
+        return;
+      }
+
+      const result = await agentService.getHistory(sessionId);
+      res.json(result);
+    } catch (error) {
+      logError(error, 'Get history failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/agent/routes/model.ts b/temp_repo/apps/server/src/routes/agent/routes/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8e1a1dddfba882adae4e29c9f180332568ead6f0
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/agent/routes/model.ts
@@ -0,0 +1,29 @@
+/**
+ * POST /model endpoint - Set session model
+ */
+
+import type { Request, Response } from 'express';
+import { AgentService } from '../../../services/agent-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createModelHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId, model } = req.body as {
+        sessionId: string;
+        model: string;
+      };
+
+      if (!sessionId || !model) {
+        res.status(400).json({ success: false, error: 'sessionId and model are required' });
+        return;
+      }
+
+      const result = await agentService.setSessionModel(sessionId, model);
+      res.json({ success: result });
+    } catch (error) {
+      logError(error, 'Set session model failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/agent/routes/queue-add.ts b/temp_repo/apps/server/src/routes/agent/routes/queue-add.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e5b8a875ad8a993f41a5154b04a3eb396fd8723a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/agent/routes/queue-add.ts
@@ -0,0 +1,41 @@
+/**
+ * POST /queue/add endpoint - Add a prompt to the queue
+ */
+
+import type { Request, Response } from 'express';
+import type { ThinkingLevel } from '@automaker/types';
+import { AgentService } from '../../../services/agent-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createQueueAddHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId, message, imagePaths, model, thinkingLevel } = req.body as {
+        sessionId: string;
+        message: string;
+        imagePaths?: string[];
+        model?: string;
+        thinkingLevel?: ThinkingLevel;
+      };
+
+      if (!sessionId || !message) {
+        res.status(400).json({
+          success: false,
+          error: 'sessionId and message are required',
+        });
+        return;
+      }
+
+      const result = await agentService.addToQueue(sessionId, {
+        message,
+        imagePaths,
+        model,
+        thinkingLevel,
+      });
+      res.json(result);
+    } catch (error) {
+      logError(error, 'Add to queue failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/agent/routes/queue-clear.ts b/temp_repo/apps/server/src/routes/agent/routes/queue-clear.ts
new file mode 100644
index 0000000000000000000000000000000000000000..34969eab660acc0b6f6f472c9af58861c609dd14
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/agent/routes/queue-clear.ts
@@ -0,0 +1,29 @@
+/**
+ * POST /queue/clear endpoint - Clear all prompts from the queue
+ */
+
+import type { Request, Response } from 'express';
+import { AgentService } from '../../../services/agent-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createQueueClearHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId } = req.body as { sessionId: string };
+
+      if (!sessionId) {
+        res.status(400).json({
+          success: false,
+          error: 'sessionId is required',
+        });
+        return;
+      }
+
+      const result = await agentService.clearQueue(sessionId);
+      res.json(result);
+    } catch (error) {
+      logError(error, 'Clear queue failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/agent/routes/queue-list.ts b/temp_repo/apps/server/src/routes/agent/routes/queue-list.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7299e871693e73ce42d0e8a853392c152d80be5e
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/agent/routes/queue-list.ts
@@ -0,0 +1,29 @@
+/**
+ * POST /queue/list endpoint - List queued prompts
+ */
+
+import type { Request, Response } from 'express';
+import { AgentService } from '../../../services/agent-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createQueueListHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId } = req.body as { sessionId: string };
+
+      if (!sessionId) {
+        res.status(400).json({
+          success: false,
+          error: 'sessionId is required',
+        });
+        return;
+      }
+
+      const result = await agentService.getQueue(sessionId);
+      res.json(result);
+    } catch (error) {
+      logError(error, 'List queue failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/agent/routes/queue-remove.ts b/temp_repo/apps/server/src/routes/agent/routes/queue-remove.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b2ed43d832fa31481d17d8455a367579d57ef45b
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/agent/routes/queue-remove.ts
@@ -0,0 +1,32 @@
+/**
+ * POST /queue/remove endpoint - Remove a prompt from the queue
+ */
+
+import type { Request, Response } from 'express';
+import { AgentService } from '../../../services/agent-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createQueueRemoveHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId, promptId } = req.body as {
+        sessionId: string;
+        promptId: string;
+      };
+
+      if (!sessionId || !promptId) {
+        res.status(400).json({
+          success: false,
+          error: 'sessionId and promptId are required',
+        });
+        return;
+      }
+
+      const result = await agentService.removeFromQueue(sessionId, promptId);
+      res.json(result);
+    } catch (error) {
+      logError(error, 'Remove from queue failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/agent/routes/send.ts b/temp_repo/apps/server/src/routes/agent/routes/send.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4f6e527cc32c2b9cb5c754009cdad15445fd31a2
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/agent/routes/send.ts
@@ -0,0 +1,78 @@
+/**
+ * POST /send endpoint - Send a message
+ */
+
+import type { Request, Response } from 'express';
+import type { ThinkingLevel } from '@automaker/types';
+import { AgentService } from '../../../services/agent-service.js';
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage, logError } from '../common.js';
+const logger = createLogger('Agent');
+
+export function createSendHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId, message, workingDirectory, imagePaths, model, thinkingLevel } =
+        req.body as {
+          sessionId: string;
+          message: string;
+          workingDirectory?: string;
+          imagePaths?: string[];
+          model?: string;
+          thinkingLevel?: ThinkingLevel;
+        };
+
+      logger.debug('Received request:', {
+        sessionId,
+        messageLength: message?.length,
+        workingDirectory,
+        imageCount: imagePaths?.length || 0,
+        model,
+        thinkingLevel,
+      });
+
+      if (!sessionId || !message) {
+        logger.warn('Validation failed - missing sessionId or message');
+        res.status(400).json({
+          success: false,
+          error: 'sessionId and message are required',
+        });
+        return;
+      }
+
+      logger.debug('Validation passed, calling agentService.sendMessage()');
+
+      // Start the message processing (don't await - it streams via WebSocket)
+      agentService
+        .sendMessage({
+          sessionId,
+          message,
+          workingDirectory,
+          imagePaths,
+          model,
+          thinkingLevel,
+        })
+        .catch((error) => {
+          const errorMsg = (error as Error).message || 'Unknown error';
+          logger.error(`Background error in sendMessage() for session ${sessionId}:`, errorMsg);
+
+          // Emit error via WebSocket so the UI is notified even though
+          // the HTTP response already returned 200. This is critical for
+          // session-not-found errors where sendMessage() throws before it
+          // can emit its own error event (no in-memory session to emit from).
+          agentService.emitSessionError(sessionId, errorMsg);
+
+          logError(error, 'Send message failed (background)');
+        });
+
+      logger.debug('Returning immediate response to client');
+
+      // Return immediately - responses come via WebSocket
+      res.json({ success: true, message: 'Message sent' });
+    } catch (error) {
+      logger.error('Synchronous error:', error);
+      logError(error, 'Send message failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/agent/routes/start.ts b/temp_repo/apps/server/src/routes/agent/routes/start.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dd9b7e4194134aba14dab100d5627e84f71e0fb8
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/agent/routes/start.ts
@@ -0,0 +1,35 @@
+/**
+ * POST /start endpoint - Start a conversation
+ */
+
+import type { Request, Response } from 'express';
+import { AgentService } from '../../../services/agent-service.js';
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage, logError } from '../common.js';
+const _logger = createLogger('Agent');
+
+export function createStartHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId, workingDirectory } = req.body as {
+        sessionId: string;
+        workingDirectory?: string;
+      };
+
+      if (!sessionId) {
+        res.status(400).json({ success: false, error: 'sessionId is required' });
+        return;
+      }
+
+      const result = await agentService.startConversation({
+        sessionId,
+        workingDirectory,
+      });
+
+      res.json(result);
+    } catch (error) {
+      logError(error, 'Start conversation failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/agent/routes/stop.ts b/temp_repo/apps/server/src/routes/agent/routes/stop.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c5a5fe014b1e043b7d09d9f23d8c70c2fac13a17
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/agent/routes/stop.ts
@@ -0,0 +1,26 @@
+/**
+ * POST /stop endpoint - Stop execution
+ */
+
+import type { Request, Response } from 'express';
+import { AgentService } from '../../../services/agent-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createStopHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId } = req.body as { sessionId: string };
+
+      if (!sessionId) {
+        res.status(400).json({ success: false, error: 'sessionId is required' });
+        return;
+      }
+
+      const result = await agentService.stopExecution(sessionId);
+      res.json(result);
+    } catch (error) {
+      logError(error, 'Stop execution failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/app-spec/common.ts b/temp_repo/apps/server/src/routes/app-spec/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0731a7ddd71b5fd87d0a0500a8c463fb4bc132cc
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/app-spec/common.ts
@@ -0,0 +1,140 @@
+/**
+ * Common utilities and state management for spec regeneration
+ */
+
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('SpecRegeneration');
+
+// Types for running generation
+export type GenerationType = 'spec_regeneration' | 'feature_generation' | 'sync';
+
+interface RunningGeneration {
+  isRunning: boolean;
+  type: GenerationType;
+  startedAt: string;
+}
+
+// Shared state for tracking generation status - scoped by project path
+const runningProjects = new Map<string, RunningGeneration>();
+const abortControllers = new Map<string, AbortController>();
+
+/**
+ * Get the running state for a specific project
+ */
+export function getSpecRegenerationStatus(projectPath?: string): {
+  isRunning: boolean;
+  currentAbortController: AbortController | null;
+  projectPath?: string;
+  type?: GenerationType;
+  startedAt?: string;
+} {
+  if (projectPath) {
+    const generation = runningProjects.get(projectPath);
+    return {
+      isRunning: generation?.isRunning || false,
+      currentAbortController: abortControllers.get(projectPath) || null,
+      projectPath,
+      type: generation?.type,
+      startedAt: generation?.startedAt,
+    };
+  }
+  // Fallback: check if any project is running (for backward compatibility)
+  const isAnyRunning = Array.from(runningProjects.values()).some((g) => g.isRunning);
+  return { isRunning: isAnyRunning, currentAbortController: null };
+}
+
+/**
+ * Get the project path that is currently running (if any)
+ */
+export function getRunningProjectPath(): string | null {
+  for (const [path, running] of runningProjects.entries()) {
+    if (running) return path;
+  }
+  return null;
+}
+
+/**
+ * Set the running state and abort controller for a specific project
+ */
+export function setRunningState(
+  projectPath: string,
+  running: boolean,
+  controller: AbortController | null = null,
+  type: GenerationType = 'spec_regeneration'
+): void {
+  if (running) {
+    runningProjects.set(projectPath, {
+      isRunning: true,
+      type,
+      startedAt: new Date().toISOString(),
+    });
+    if (controller) {
+      abortControllers.set(projectPath, controller);
+    }
+  } else {
+    runningProjects.delete(projectPath);
+    abortControllers.delete(projectPath);
+  }
+}
+
+/**
+ * Get all running spec/feature generations for the running agents view
+ */
+export function getAllRunningGenerations(): Array<{
+  projectPath: string;
+  type: GenerationType;
+  startedAt: string;
+}> {
+  const results: Array<{
+    projectPath: string;
+    type: GenerationType;
+    startedAt: string;
+  }> = [];
+
+  for (const [projectPath, generation] of runningProjects.entries()) {
+    if (generation.isRunning) {
+      results.push({
+        projectPath,
+        type: generation.type,
+        startedAt: generation.startedAt,
+      });
+    }
+  }
+
+  return results;
+}
+
+/**
+ * Helper to log authentication status
+ */
+export function logAuthStatus(context: string): void {
+  const hasApiKey = !!process.env.ANTHROPIC_API_KEY;
+
+  logger.info(`${context} - Auth Status:`);
+  logger.info(
+    `  ANTHROPIC_API_KEY: ${
+      hasApiKey ? 'SET (' + process.env.ANTHROPIC_API_KEY?.substring(0, 20) + '...)' : 'NOT SET'
+    }`
+  );
+
+  if (!hasApiKey) {
+    logger.warn('⚠️  WARNING: No authentication configured! SDK will fail.');
+  }
+}
+
+/**
+ * Log error details consistently
+ */
+export function logError(error: unknown, context: string): void {
+  logger.error(`❌ ${context}:`);
+  logger.error('Error name:', (error as Error)?.name);
+  logger.error('Error message:', (error as Error)?.message);
+  logger.error('Error stack:', (error as Error)?.stack);
+  logger.error('Full error object:', JSON.stringify(error, Object.getOwnPropertyNames(error), 2));
+}
+
+import { getErrorMessage as getErrorMessageShared } from '../common.js';
+
+// Re-export shared utility
+export { getErrorMessageShared as getErrorMessage };
diff --git a/temp_repo/apps/server/src/routes/app-spec/generate-features-from-spec.ts b/temp_repo/apps/server/src/routes/app-spec/generate-features-from-spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..562484714cc775be0401d13a12fdf1d1c2d16dcb
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/app-spec/generate-features-from-spec.ts
@@ -0,0 +1,329 @@
+/**
+ * Generate features from existing app_spec.txt
+ *
+ * Model is configurable via phaseModels.featureGenerationModel in settings
+ * (defaults to Sonnet for balanced speed and quality).
+ */
+
+import * as secureFs from '../../lib/secure-fs.js';
+import type { EventEmitter } from '../../lib/events.js';
+import { createLogger } from '@automaker/utils';
+import { DEFAULT_PHASE_MODELS, supportsStructuredOutput, isCodexModel } from '@automaker/types';
+import { resolvePhaseModel } from '@automaker/model-resolver';
+import { streamingQuery } from '../../providers/simple-query-service.js';
+import { parseAndCreateFeatures } from './parse-and-create-features.js';
+import { extractJsonWithArray } from '../../lib/json-extractor.js';
+import { getAppSpecPath } from '@automaker/platform';
+import type { SettingsService } from '../../services/settings-service.js';
+import {
+  getAutoLoadClaudeMdSetting,
+  getPromptCustomization,
+  getPhaseModelWithOverrides,
+} from '../../lib/settings-helpers.js';
+import { FeatureLoader } from '../../services/feature-loader.js';
+
+const logger = createLogger('SpecRegeneration');
+
+const DEFAULT_MAX_FEATURES = 50;
+
+/**
+ * Timeout for Codex models when generating features (5 minutes).
+ * Codex models are slower and need more time to generate 50+ features.
+ */
+const _CODEX_FEATURE_GENERATION_TIMEOUT_MS = 300000; // 5 minutes
+
+/**
+ * Type for extracted features JSON response
+ */
+interface FeaturesExtractionResult {
+  features: Array<{
+    id: string;
+    category?: string;
+    title: string;
+    description: string;
+    priority?: number;
+    complexity?: 'simple' | 'moderate' | 'complex';
+    dependencies?: string[];
+  }>;
+}
+
+/**
+ * JSON schema for features output format (Claude/Codex structured output)
+ */
+const featuresOutputSchema = {
+  type: 'object',
+  properties: {
+    features: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          id: { type: 'string', description: 'Unique feature identifier (kebab-case)' },
+          category: { type: 'string', description: 'Feature category' },
+          title: { type: 'string', description: 'Short, descriptive title' },
+          description: { type: 'string', description: 'Detailed feature description' },
+          priority: {
+            type: 'number',
+            description: 'Priority level: 1 (highest) to 5 (lowest)',
+          },
+          complexity: {
+            type: 'string',
+            enum: ['simple', 'moderate', 'complex'],
+            description: 'Implementation complexity',
+          },
+          dependencies: {
+            type: 'array',
+            items: { type: 'string' },
+            description: 'IDs of features this depends on',
+          },
+        },
+        required: ['id', 'title', 'description'],
+      },
+    },
+  },
+  required: ['features'],
+} as const;
+
+export async function generateFeaturesFromSpec(
+  projectPath: string,
+  events: EventEmitter,
+  abortController: AbortController,
+  maxFeatures?: number,
+  settingsService?: SettingsService
+): Promise<void> {
+  const featureCount = maxFeatures ?? DEFAULT_MAX_FEATURES;
+  logger.debug('========== generateFeaturesFromSpec() started ==========');
+  logger.debug('projectPath:', projectPath);
+  logger.debug('maxFeatures:', featureCount);
+
+  // Read existing spec from .automaker directory
+  const specPath = getAppSpecPath(projectPath);
+  let spec: string;
+
+  logger.debug('Reading spec from:', specPath);
+
+  try {
+    spec = (await secureFs.readFile(specPath, 'utf-8')) as string;
+    logger.info(`Spec loaded successfully (${spec.length} chars)`);
+    logger.info(`Spec preview (first 500 chars): ${spec.substring(0, 500)}`);
+    logger.info(`Spec preview (last 500 chars): ${spec.substring(spec.length - 500)}`);
+  } catch (readError) {
+    logger.error('❌ Failed to read spec file:', readError);
+    events.emit('spec-regeneration:event', {
+      type: 'spec_regeneration_error',
+      error: 'No project spec found. Generate spec first.',
+      projectPath: projectPath,
+    });
+    return;
+  }
+
+  // Get customized prompts from settings
+  const prompts = await getPromptCustomization(settingsService, '[FeatureGeneration]');
+
+  // Load existing features to prevent duplicates
+  const featureLoader = new FeatureLoader();
+  const existingFeatures = await featureLoader.getAll(projectPath);
+
+  logger.info(`Found ${existingFeatures.length} existing features to exclude from generation`);
+
+  // Build existing features context for the prompt
+  let existingFeaturesContext = '';
+  if (existingFeatures.length > 0) {
+    const featuresList = existingFeatures
+      .map(
+        (f) =>
+          `- "${f.title}" (ID: ${f.id}): ${f.description?.substring(0, 100) || 'No description'}`
+      )
+      .join('\n');
+    existingFeaturesContext = `
+
+## EXISTING FEATURES (DO NOT REGENERATE THESE)
+
+The following ${existingFeatures.length} features already exist in the project. You MUST NOT generate features that duplicate or overlap with these:
+
+${featuresList}
+
+CRITICAL INSTRUCTIONS:
+- DO NOT generate any features with the same or similar titles as the existing features listed above
+- DO NOT generate features that cover the same functionality as existing features
+- ONLY generate NEW features that are not yet in the system
+- If a feature from the roadmap already exists, skip it entirely
+- Generate unique feature IDs that do not conflict with existing IDs: ${existingFeatures.map((f) => f.id).join(', ')}
+`;
+  }
+
+  const prompt = `Based on this project specification:
+
+${spec}
+${existingFeaturesContext}
+${prompts.appSpec.generateFeaturesFromSpecPrompt}
+
+Generate ${featureCount} NEW features that build on each other logically. Remember: ONLY generate features that DO NOT already exist.`;
+
+  logger.info('========== PROMPT BEING SENT ==========');
+  logger.info(`Prompt length: ${prompt.length} chars`);
+  logger.info(`Prompt preview (first 1000 chars):\n${prompt.substring(0, 1000)}`);
+  logger.info('========== END PROMPT PREVIEW ==========');
+
+  events.emit('spec-regeneration:event', {
+    type: 'spec_regeneration_progress',
+    content: 'Analyzing spec and generating features...\n',
+    projectPath: projectPath,
+  });
+
+  // Load autoLoadClaudeMd setting
+  const autoLoadClaudeMd = await getAutoLoadClaudeMdSetting(
+    projectPath,
+    settingsService,
+    '[FeatureGeneration]'
+  );
+
+  // Get model from phase settings with provider info
+  const {
+    phaseModel: phaseModelEntry,
+    provider,
+    credentials,
+  } = settingsService
+    ? await getPhaseModelWithOverrides(
+        'featureGenerationModel',
+        settingsService,
+        projectPath,
+        '[FeatureGeneration]'
+      )
+    : {
+        phaseModel: DEFAULT_PHASE_MODELS.featureGenerationModel,
+        provider: undefined,
+        credentials: undefined,
+      };
+  const { model, thinkingLevel, reasoningEffort } = resolvePhaseModel(phaseModelEntry);
+
+  logger.info('Using model:', model, provider ? `via provider: ${provider.name}` : 'direct API');
+
+  // Codex models need extended timeout for generating many features.
+  // Use 'xhigh' reasoning effort to get 5-minute timeout (300s base * 1.0x = 300s).
+  // The Codex provider has a special 5-minute base timeout for feature generation.
+  const isCodex = isCodexModel(model);
+  const effectiveReasoningEffort = isCodex ? 'xhigh' : reasoningEffort;
+
+  if (isCodex) {
+    logger.info('Codex model detected - using extended timeout (5 minutes for feature generation)');
+  }
+  if (effectiveReasoningEffort) {
+    logger.info('Reasoning effort:', effectiveReasoningEffort);
+  }
+
+  // Determine if we should use structured output based on model type
+  const useStructuredOutput = supportsStructuredOutput(model);
+  logger.info(
+    `Structured output mode: ${useStructuredOutput ? 'enabled (Claude/Codex)' : 'disabled (using JSON instructions)'}`
+  );
+
+  // Build the final prompt - for non-Claude/Codex models, include explicit JSON instructions
+  let finalPrompt = prompt;
+  if (!useStructuredOutput) {
+    finalPrompt = `${prompt}
+
+CRITICAL INSTRUCTIONS:
+1. DO NOT write any files. Return the JSON in your response only.
+2. After analyzing the spec, respond with ONLY a JSON object - no explanations, no markdown, just raw JSON.
+3. The JSON must have this exact structure:
+{
+  "features": [
+    {
+      "id": "unique-feature-id",
+      "category": "Category Name",
+      "title": "Short Feature Title",
+      "description": "Detailed description of the feature",
+      "priority": 1,
+      "complexity": "simple|moderate|complex",
+      "dependencies": ["other-feature-id"]
+    }
+  ]
+}
+
+4. Feature IDs must be unique, lowercase, kebab-case (e.g., "user-authentication", "data-export")
+5. Priority ranges from 1 (highest) to 5 (lowest)
+6. Complexity must be one of: "simple", "moderate", "complex"
+7. Dependencies is an array of feature IDs that must be completed first (can be empty)
+
+Your entire response should be valid JSON starting with { and ending with }. No text before or after.`;
+  }
+
+  // Use streamingQuery with event callbacks
+  const result = await streamingQuery({
+    prompt: finalPrompt,
+    model,
+    cwd: projectPath,
+    maxTurns: 250,
+    allowedTools: ['Read', 'Glob', 'Grep'],
+    abortController,
+    thinkingLevel,
+    reasoningEffort: effectiveReasoningEffort, // Extended timeout for Codex models
+    readOnly: true, // Feature generation only reads code, doesn't write
+    settingSources: autoLoadClaudeMd ? ['user', 'project', 'local'] : undefined,
+    claudeCompatibleProvider: provider, // Pass provider for alternative endpoint configuration
+    credentials, // Pass credentials for resolving 'credentials' apiKeySource
+    outputFormat: useStructuredOutput
+      ? {
+          type: 'json_schema',
+          schema: featuresOutputSchema,
+        }
+      : undefined,
+    onText: (text) => {
+      logger.debug(`Feature text block received (${text.length} chars)`);
+      events.emit('spec-regeneration:event', {
+        type: 'spec_regeneration_progress',
+        content: text,
+        projectPath: projectPath,
+      });
+    },
+  });
+
+  // Get response content - prefer structured output if available
+  let contentForParsing: string;
+
+  if (result.structured_output) {
+    // Use structured output from Claude/Codex models
+    logger.info('✅ Received structured output from model');
+    contentForParsing = JSON.stringify(result.structured_output);
+    logger.debug('Structured output:', contentForParsing);
+  } else {
+    // Use text response (for non-Claude/Codex models or fallback)
+    // Pre-extract JSON to handle conversational text that may surround the JSON response
+    // This follows the same pattern used in generate-spec.ts and validate-issue.ts
+    const rawText = result.text;
+    logger.info(`Feature stream complete.`);
+    logger.info(`Feature response length: ${rawText.length} chars`);
+    logger.info('========== FULL RESPONSE TEXT ==========');
+    logger.info(rawText);
+    logger.info('========== END RESPONSE TEXT ==========');
+
+    // Pre-extract JSON from response - handles conversational text around the JSON
+    const extracted = extractJsonWithArray<FeaturesExtractionResult>(rawText, 'features', {
+      logger,
+    });
+    if (extracted) {
+      contentForParsing = JSON.stringify(extracted);
+      logger.info('✅ Pre-extracted JSON from text response');
+    } else {
+      // If pre-extraction fails, we know the next step will also fail.
+      // Throw an error here to avoid redundant parsing and make the failure point clearer.
+      logger.error(
+        '❌ Could not extract features JSON from model response. Full response text was:\n' +
+          rawText
+      );
+      const errorMessage =
+        'Failed to parse features from model response: No valid JSON with a "features" array found.';
+      events.emit('spec-regeneration:event', {
+        type: 'spec_regeneration_error',
+        error: errorMessage,
+        projectPath: projectPath,
+      });
+      throw new Error(errorMessage);
+    }
+  }
+
+  await parseAndCreateFeatures(projectPath, contentForParsing, events, settingsService);
+
+  logger.debug('========== generateFeaturesFromSpec() completed ==========');
+}
diff --git a/temp_repo/apps/server/src/routes/app-spec/generate-spec.ts b/temp_repo/apps/server/src/routes/app-spec/generate-spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bd47e9ea4ead3641e7faa505ad684fd97f92971a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/app-spec/generate-spec.ts
@@ -0,0 +1,317 @@
+/**
+ * Generate app_spec.txt from project overview
+ *
+ * Model is configurable via phaseModels.specGenerationModel in settings
+ * (defaults to Opus for high-quality specification generation).
+ */
+
+import * as secureFs from '../../lib/secure-fs.js';
+import type { EventEmitter } from '../../lib/events.js';
+import { specOutputSchema, specToXml, type SpecOutput } from '../../lib/app-spec-format.js';
+import { createLogger } from '@automaker/utils';
+import { DEFAULT_PHASE_MODELS, supportsStructuredOutput } from '@automaker/types';
+import { resolvePhaseModel } from '@automaker/model-resolver';
+import { extractJson } from '../../lib/json-extractor.js';
+import { streamingQuery } from '../../providers/simple-query-service.js';
+import { generateFeaturesFromSpec } from './generate-features-from-spec.js';
+import { ensureAutomakerDir, getAppSpecPath } from '@automaker/platform';
+import type { SettingsService } from '../../services/settings-service.js';
+import {
+  getAutoLoadClaudeMdSetting,
+  getPromptCustomization,
+  getPhaseModelWithOverrides,
+} from '../../lib/settings-helpers.js';
+
+const logger = createLogger('SpecRegeneration');
+
+export async function generateSpec(
+  projectPath: string,
+  projectOverview: string,
+  events: EventEmitter,
+  abortController: AbortController,
+  generateFeatures?: boolean,
+  analyzeProject?: boolean,
+  maxFeatures?: number,
+  settingsService?: SettingsService
+): Promise<void> {
+  logger.info('========== generateSpec() started ==========');
+  logger.info('projectPath:', projectPath);
+  logger.info('projectOverview length:', `${projectOverview.length} chars`);
+  logger.info('projectOverview preview:', projectOverview.substring(0, 300));
+  logger.info('generateFeatures:', generateFeatures);
+  logger.info('analyzeProject:', analyzeProject);
+  logger.info('maxFeatures:', maxFeatures);
+
+  // Get customized prompts from settings
+  const prompts = await getPromptCustomization(settingsService, '[SpecRegeneration]');
+
+  // Build the prompt based on whether we should analyze the project
+  let analysisInstructions = '';
+  let techStackDefaults = '';
+
+  if (analyzeProject !== false) {
+    // Default to true - analyze the project
+    analysisInstructions = `Based on this overview, analyze the project directory (if it exists) using the Read, Glob, and Grep tools to understand:
+- Existing technologies and frameworks
+- Project structure and architecture
+- Current features and capabilities
+- Code patterns and conventions`;
+  } else {
+    // Use default tech stack
+    techStackDefaults = `Default Technology Stack:
+- Framework: TanStack Start (React-based full-stack framework)
+- Database: PostgreSQL with Drizzle ORM
+- UI Components: shadcn/ui
+- Styling: Tailwind CSS
+- Frontend: React
+
+Use these technologies as the foundation for the specification.`;
+  }
+
+  const prompt = `${prompts.appSpec.generateSpecSystemPrompt}
+
+Project Overview:
+${projectOverview}
+
+${techStackDefaults}
+
+${analysisInstructions}
+
+${prompts.appSpec.structuredSpecInstructions}`;
+
+  logger.info('========== PROMPT BEING SENT ==========');
+  logger.info(`Prompt length: ${prompt.length} chars`);
+  logger.info(`Prompt preview (first 500 chars):\n${prompt.substring(0, 500)}`);
+  logger.info('========== END PROMPT PREVIEW ==========');
+
+  events.emit('spec-regeneration:event', {
+    type: 'spec_progress',
+    content: 'Starting spec generation...\n',
+  });
+
+  // Load autoLoadClaudeMd setting
+  const autoLoadClaudeMd = await getAutoLoadClaudeMdSetting(
+    projectPath,
+    settingsService,
+    '[SpecRegeneration]'
+  );
+
+  // Get model from phase settings with provider info
+  const {
+    phaseModel: phaseModelEntry,
+    provider,
+    credentials,
+  } = settingsService
+    ? await getPhaseModelWithOverrides(
+        'specGenerationModel',
+        settingsService,
+        projectPath,
+        '[SpecRegeneration]'
+      )
+    : {
+        phaseModel: DEFAULT_PHASE_MODELS.specGenerationModel,
+        provider: undefined,
+        credentials: undefined,
+      };
+  const { model, thinkingLevel } = resolvePhaseModel(phaseModelEntry);
+
+  logger.info('Using model:', model, provider ? `via provider: ${provider.name}` : 'direct API');
+
+  let responseText = '';
+  let structuredOutput: SpecOutput | null = null;
+
+  // Determine if we should use structured output based on model type
+  const useStructuredOutput = supportsStructuredOutput(model);
+  logger.info(
+    `Structured output mode: ${useStructuredOutput ? 'enabled (Claude/Codex)' : 'disabled (using JSON instructions)'}`
+  );
+
+  // Build the final prompt - for non-Claude/Codex models, include JSON schema instructions
+  let finalPrompt = prompt;
+  if (!useStructuredOutput) {
+    finalPrompt = `${prompt}
+
+CRITICAL INSTRUCTIONS:
+1. DO NOT write any files. DO NOT create any files like "project_specification.json".
+2. After analyzing the project, respond with ONLY a JSON object - no explanations, no markdown, just raw JSON.
+3. The JSON must match this exact schema:
+
+${JSON.stringify(specOutputSchema, null, 2)}
+
+Your entire response should be valid JSON starting with { and ending with }. No text before or after.`;
+  }
+
+  // Use streamingQuery with event callbacks
+  const result = await streamingQuery({
+    prompt: finalPrompt,
+    model,
+    cwd: projectPath,
+    maxTurns: 250,
+    allowedTools: ['Read', 'Glob', 'Grep'],
+    abortController,
+    thinkingLevel,
+    readOnly: true, // Spec generation only reads code, we write the spec ourselves
+    settingSources: autoLoadClaudeMd ? ['user', 'project', 'local'] : undefined,
+    claudeCompatibleProvider: provider, // Pass provider for alternative endpoint configuration
+    credentials, // Pass credentials for resolving 'credentials' apiKeySource
+    outputFormat: useStructuredOutput
+      ? {
+          type: 'json_schema',
+          schema: specOutputSchema,
+        }
+      : undefined,
+    onText: (text) => {
+      responseText += text;
+      logger.info(
+        `Text block received (${text.length} chars), total now: ${responseText.length} chars`
+      );
+      events.emit('spec-regeneration:event', {
+        type: 'spec_regeneration_progress',
+        content: text,
+        projectPath: projectPath,
+      });
+    },
+    onToolUse: (tool, input) => {
+      logger.info('Tool use:', tool);
+      events.emit('spec-regeneration:event', {
+        type: 'spec_tool',
+        tool,
+        input,
+      });
+    },
+  });
+
+  // Get structured output if available
+  if (result.structured_output) {
+    structuredOutput = result.structured_output as unknown as SpecOutput;
+    logger.info('✅ Received structured output');
+    logger.debug('Structured output:', JSON.stringify(structuredOutput, null, 2));
+  } else if (!useStructuredOutput && responseText) {
+    // For non-Claude providers, parse JSON from response text
+    structuredOutput = extractJson<SpecOutput>(responseText, { logger });
+  }
+
+  logger.info(`Stream iteration complete.`);
+  logger.info(`Response text length: ${responseText.length} chars`);
+
+  // Determine XML content to save
+  let xmlContent: string;
+
+  if (structuredOutput) {
+    // Use structured output - convert JSON to XML
+    logger.info('✅ Using structured output for XML generation');
+    xmlContent = specToXml(structuredOutput);
+    logger.info(`Generated XML from structured output: ${xmlContent.length} chars`);
+  } else {
+    // Fallback: Extract XML content from response text
+    // Claude might include conversational text before/after
+    // See: https://github.com/AutoMaker-Org/automaker/issues/149
+    logger.warn('⚠️ No structured output, falling back to text parsing');
+    logger.info('========== FINAL RESPONSE TEXT ==========');
+    logger.info(responseText || '(empty)');
+    logger.info('========== END RESPONSE TEXT ==========');
+
+    if (!responseText || responseText.trim().length === 0) {
+      throw new Error('No response text and no structured output - cannot generate spec');
+    }
+
+    const xmlStart = responseText.indexOf('<project_specification>');
+    const xmlEnd = responseText.lastIndexOf('</project_specification>');
+
+    if (xmlStart !== -1 && xmlEnd !== -1) {
+      // Extract just the XML content, discarding any conversational text before/after
+      xmlContent = responseText.substring(xmlStart, xmlEnd + '</project_specification>'.length);
+      logger.info(`Extracted XML content: ${xmlContent.length} chars (from position ${xmlStart})`);
+    } else {
+      // No XML found, try JSON extraction
+      logger.warn('⚠️ No XML tags found, attempting JSON extraction...');
+      const extractedJson = extractJson<SpecOutput>(responseText, { logger });
+
+      if (
+        extractedJson &&
+        typeof extractedJson.project_name === 'string' &&
+        typeof extractedJson.overview === 'string' &&
+        Array.isArray(extractedJson.technology_stack) &&
+        Array.isArray(extractedJson.core_capabilities) &&
+        Array.isArray(extractedJson.implemented_features)
+      ) {
+        logger.info('✅ Successfully extracted JSON from response text');
+        xmlContent = specToXml(extractedJson);
+        logger.info(`✅ Converted extracted JSON to XML: ${xmlContent.length} chars`);
+      } else {
+        // Neither XML nor valid JSON found
+        logger.error('❌ Response does not contain valid XML or JSON structure');
+        logger.error(
+          'This typically happens when structured output failed and the agent produced conversational text instead of structured output'
+        );
+        throw new Error(
+          'Failed to generate spec: No valid XML or JSON structure found in response. ' +
+            'The response contained conversational text but no <project_specification> tags or valid JSON. ' +
+            'Please try again.'
+        );
+      }
+    }
+  }
+
+  // Save spec to .automaker directory
+  await ensureAutomakerDir(projectPath);
+  const specPath = getAppSpecPath(projectPath);
+
+  logger.info('Saving spec to:', specPath);
+  logger.info(`Content to save (${xmlContent.length} chars)`);
+
+  await secureFs.writeFile(specPath, xmlContent);
+
+  // Verify the file was written
+  const savedContent = await secureFs.readFile(specPath, 'utf-8');
+  logger.info(`Verified saved file: ${savedContent.length} chars`);
+  if (savedContent.length === 0) {
+    logger.error('❌ File was saved but is empty!');
+  }
+
+  logger.info('Spec saved successfully');
+
+  // Emit spec completion event
+  if (generateFeatures) {
+    // If features will be generated, emit intermediate completion
+    events.emit('spec-regeneration:event', {
+      type: 'spec_regeneration_progress',
+      content: '[Phase: spec_complete] Spec created! Generating features...\n',
+      projectPath: projectPath,
+    });
+  } else {
+    // If no features, emit final completion
+    events.emit('spec-regeneration:event', {
+      type: 'spec_regeneration_complete',
+      message: 'Spec regeneration complete!',
+      projectPath: projectPath,
+    });
+  }
+
+  // If generate features was requested, generate them from the spec
+  if (generateFeatures) {
+    logger.info('Starting feature generation from spec...');
+    // Create a new abort controller for feature generation
+    const featureAbortController = new AbortController();
+    try {
+      await generateFeaturesFromSpec(
+        projectPath,
+        events,
+        featureAbortController,
+        maxFeatures,
+        settingsService
+      );
+      // Final completion will be emitted by generateFeaturesFromSpec -> parseAndCreateFeatures
+    } catch (featureError) {
+      logger.error('Feature generation failed:', featureError);
+      // Don't throw - spec generation succeeded, feature generation is optional
+      events.emit('spec-regeneration:event', {
+        type: 'spec_regeneration_error',
+        error: (featureError as Error).message || 'Feature generation failed',
+        projectPath: projectPath,
+      });
+    }
+  }
+
+  logger.debug('========== generateSpec() completed ==========');
+}
diff --git a/temp_repo/apps/server/src/routes/app-spec/index.ts b/temp_repo/apps/server/src/routes/app-spec/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..79b8e44de8193c747fe59b73a0bbb4b93390598b
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/app-spec/index.ts
@@ -0,0 +1,29 @@
+/**
+ * Spec Regeneration routes - HTTP API for AI-powered spec generation
+ */
+
+import { Router } from 'express';
+import type { EventEmitter } from '../../lib/events.js';
+import { createCreateHandler } from './routes/create.js';
+import { createGenerateHandler } from './routes/generate.js';
+import { createGenerateFeaturesHandler } from './routes/generate-features.js';
+import { createSyncHandler } from './routes/sync.js';
+import { createStopHandler } from './routes/stop.js';
+import { createStatusHandler } from './routes/status.js';
+import type { SettingsService } from '../../services/settings-service.js';
+
+export function createSpecRegenerationRoutes(
+  events: EventEmitter,
+  settingsService?: SettingsService
+): Router {
+  const router = Router();
+
+  router.post('/create', createCreateHandler(events));
+  router.post('/generate', createGenerateHandler(events, settingsService));
+  router.post('/generate-features', createGenerateFeaturesHandler(events, settingsService));
+  router.post('/sync', createSyncHandler(events, settingsService));
+  router.post('/stop', createStopHandler());
+  router.get('/status', createStatusHandler());
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/app-spec/parse-and-create-features.ts b/temp_repo/apps/server/src/routes/app-spec/parse-and-create-features.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b7a474d29d7b8d60cc2c29d1f1736d91274bfaa6
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/app-spec/parse-and-create-features.ts
@@ -0,0 +1,156 @@
+/**
+ * Parse agent response and create feature files
+ */
+
+import path from 'path';
+import * as secureFs from '../../lib/secure-fs.js';
+import type { EventEmitter } from '../../lib/events.js';
+import { createLogger, atomicWriteJson, DEFAULT_BACKUP_COUNT } from '@automaker/utils';
+import { getFeaturesDir } from '@automaker/platform';
+import { extractJsonWithArray } from '../../lib/json-extractor.js';
+import { getNotificationService } from '../../services/notification-service.js';
+import type { SettingsService } from '../../services/settings-service.js';
+import { resolvePhaseModel } from '@automaker/model-resolver';
+
+const logger = createLogger('SpecRegeneration');
+
+export async function parseAndCreateFeatures(
+  projectPath: string,
+  content: string,
+  events: EventEmitter,
+  settingsService?: SettingsService
+): Promise<void> {
+  logger.info('========== parseAndCreateFeatures() started ==========');
+  logger.info(`Content length: ${content.length} chars`);
+  logger.info('========== CONTENT RECEIVED FOR PARSING ==========');
+  logger.info(content);
+  logger.info('========== END CONTENT ==========');
+
+  // Load default model and planning settings from settingsService
+  let defaultModel: string | undefined;
+  let defaultPlanningMode: string = 'skip';
+  let defaultRequirePlanApproval = false;
+
+  if (settingsService) {
+    try {
+      const globalSettings = await settingsService.getGlobalSettings();
+      const projectSettings = await settingsService.getProjectSettings(projectPath);
+
+      const defaultModelEntry =
+        projectSettings.defaultFeatureModel ?? globalSettings.defaultFeatureModel;
+      if (defaultModelEntry) {
+        const resolved = resolvePhaseModel(defaultModelEntry);
+        defaultModel = resolved.model;
+      }
+
+      defaultPlanningMode = globalSettings.defaultPlanningMode ?? 'skip';
+      defaultRequirePlanApproval = globalSettings.defaultRequirePlanApproval ?? false;
+
+      logger.info(
+        `[parseAndCreateFeatures] Using defaults: model=${defaultModel ?? 'none'}, planningMode=${defaultPlanningMode}, requirePlanApproval=${defaultRequirePlanApproval}`
+      );
+    } catch (settingsError) {
+      logger.warn(
+        '[parseAndCreateFeatures] Failed to load settings, using defaults:',
+        settingsError
+      );
+    }
+  }
+
+  try {
+    // Extract JSON from response using shared utility
+    logger.info('Extracting JSON from response using extractJsonWithArray...');
+
+    interface FeaturesResponse {
+      features: Array<{
+        id: string;
+        category?: string;
+        title: string;
+        description: string;
+        priority?: number;
+        complexity?: string;
+        dependencies?: string[];
+      }>;
+    }
+
+    const parsed = extractJsonWithArray<FeaturesResponse>(content, 'features', { logger });
+
+    if (!parsed || !parsed.features) {
+      logger.error('❌ No valid JSON with "features" array found in response');
+      logger.error('Full content received:');
+      logger.error(content);
+      throw new Error('No valid JSON found in response');
+    }
+
+    logger.info(`Parsed ${parsed.features?.length || 0} features`);
+    logger.info('Parsed features:', JSON.stringify(parsed.features, null, 2));
+
+    const featuresDir = getFeaturesDir(projectPath);
+    await secureFs.mkdir(featuresDir, { recursive: true });
+
+    const createdFeatures: Array<{ id: string; title: string }> = [];
+
+    for (const feature of parsed.features) {
+      logger.debug('Creating feature:', feature.id);
+      const featureDir = path.join(featuresDir, feature.id);
+      await secureFs.mkdir(featureDir, { recursive: true });
+
+      const featureData: Record<string, unknown> = {
+        id: feature.id,
+        category: feature.category || 'Uncategorized',
+        title: feature.title,
+        description: feature.description,
+        status: 'backlog', // Features go to backlog - user must manually start them
+        priority: feature.priority || 2,
+        complexity: feature.complexity || 'moderate',
+        dependencies: feature.dependencies || [],
+        planningMode: defaultPlanningMode,
+        requirePlanApproval:
+          defaultPlanningMode === 'skip' || defaultPlanningMode === 'lite'
+            ? false
+            : defaultRequirePlanApproval,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      };
+
+      // Apply default model if available from settings
+      if (defaultModel) {
+        featureData.model = defaultModel;
+      }
+
+      // Use atomic write with backup support for crash protection
+      await atomicWriteJson(path.join(featureDir, 'feature.json'), featureData, {
+        backupCount: DEFAULT_BACKUP_COUNT,
+      });
+
+      createdFeatures.push({ id: feature.id, title: feature.title });
+    }
+
+    logger.info(`✓ Created ${createdFeatures.length} features successfully`);
+
+    events.emit('spec-regeneration:event', {
+      type: 'spec_regeneration_complete',
+      message: `Spec regeneration complete! Created ${createdFeatures.length} features.`,
+      projectPath: projectPath,
+    });
+
+    // Create notification for spec generation completion
+    const notificationService = getNotificationService();
+    await notificationService.createNotification({
+      type: 'spec_regeneration_complete',
+      title: 'Spec Generation Complete',
+      message: `Created ${createdFeatures.length} features from the project specification.`,
+      projectPath: projectPath,
+    });
+  } catch (error) {
+    logger.error('❌ parseAndCreateFeatures() failed:');
+    logger.error('Error:', error);
+    events.emit('spec-regeneration:event', {
+      type: 'spec_regeneration_error',
+      error: (error as Error).message,
+      projectPath: projectPath,
+    });
+  }
+
+  logger.debug('========== parseAndCreateFeatures() completed ==========');
+}
diff --git a/temp_repo/apps/server/src/routes/app-spec/routes/create.ts b/temp_repo/apps/server/src/routes/app-spec/routes/create.ts
new file mode 100644
index 0000000000000000000000000000000000000000..31836867ee29efdfdac0f44caf5a5dd36930860c
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/app-spec/routes/create.ts
@@ -0,0 +1,93 @@
+/**
+ * POST /create endpoint - Create project spec from overview
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import { createLogger } from '@automaker/utils';
+import {
+  getSpecRegenerationStatus,
+  setRunningState,
+  logAuthStatus,
+  logError,
+  getErrorMessage,
+} from '../common.js';
+import { generateSpec } from '../generate-spec.js';
+
+const logger = createLogger('SpecRegeneration');
+
+export function createCreateHandler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    logger.info('========== /create endpoint called ==========');
+    logger.debug('Request body:', JSON.stringify(req.body, null, 2));
+
+    try {
+      const { projectPath, projectOverview, generateFeatures, analyzeProject, maxFeatures } =
+        req.body as {
+          projectPath: string;
+          projectOverview: string;
+          generateFeatures?: boolean;
+          analyzeProject?: boolean;
+          maxFeatures?: number;
+        };
+
+      logger.debug('Parsed params:');
+      logger.debug('  projectPath:', projectPath);
+      logger.debug('  projectOverview length:', `${projectOverview?.length || 0} chars`);
+      logger.debug('  generateFeatures:', generateFeatures);
+      logger.debug('  analyzeProject:', analyzeProject);
+      logger.debug('  maxFeatures:', maxFeatures);
+
+      if (!projectPath || !projectOverview) {
+        logger.error('Missing required parameters');
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and projectOverview required',
+        });
+        return;
+      }
+
+      const { isRunning } = getSpecRegenerationStatus(projectPath);
+      if (isRunning) {
+        logger.warn('Generation already running for project:', projectPath);
+        res.json({ success: false, error: 'Spec generation already running for this project' });
+        return;
+      }
+
+      logAuthStatus('Before starting generation');
+
+      const abortController = new AbortController();
+      setRunningState(projectPath, true, abortController);
+      logger.info('Starting background generation task...');
+
+      // Start generation in background
+      generateSpec(
+        projectPath,
+        projectOverview,
+        events,
+        abortController,
+        generateFeatures,
+        analyzeProject,
+        maxFeatures
+      )
+        .catch((error) => {
+          logError(error, 'Generation failed with error');
+          events.emit('spec-regeneration:event', {
+            type: 'spec_regeneration_error',
+            error: getErrorMessage(error),
+            projectPath: projectPath,
+          });
+        })
+        .finally(() => {
+          logger.info('Generation task finished (success or error)');
+          setRunningState(projectPath, false, null);
+        });
+
+      logger.info('Returning success response (generation running in background)');
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Create spec route handler failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/app-spec/routes/generate-features.ts b/temp_repo/apps/server/src/routes/app-spec/routes/generate-features.ts
new file mode 100644
index 0000000000000000000000000000000000000000..670652ea9915275f5976c5d27047afeb83085dff
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/app-spec/routes/generate-features.ts
@@ -0,0 +1,76 @@
+/**
+ * POST /generate-features endpoint - Generate features from existing spec
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import { createLogger } from '@automaker/utils';
+import {
+  getSpecRegenerationStatus,
+  setRunningState,
+  logAuthStatus,
+  logError,
+  getErrorMessage,
+} from '../common.js';
+import { generateFeaturesFromSpec } from '../generate-features-from-spec.js';
+import type { SettingsService } from '../../../services/settings-service.js';
+
+const logger = createLogger('SpecRegeneration');
+
+export function createGenerateFeaturesHandler(
+  events: EventEmitter,
+  settingsService?: SettingsService
+) {
+  return async (req: Request, res: Response): Promise<void> => {
+    logger.info('========== /generate-features endpoint called ==========');
+    logger.debug('Request body:', JSON.stringify(req.body, null, 2));
+
+    try {
+      const { projectPath, maxFeatures } = req.body as {
+        projectPath: string;
+        maxFeatures?: number;
+      };
+
+      logger.debug('projectPath:', projectPath);
+      logger.debug('maxFeatures:', maxFeatures);
+
+      if (!projectPath) {
+        logger.error('Missing projectPath parameter');
+        res.status(400).json({ success: false, error: 'projectPath required' });
+        return;
+      }
+
+      const { isRunning } = getSpecRegenerationStatus(projectPath);
+      if (isRunning) {
+        logger.warn('Generation already running for project:', projectPath);
+        res.json({ success: false, error: 'Generation already running for this project' });
+        return;
+      }
+
+      logAuthStatus('Before starting feature generation');
+
+      const abortController = new AbortController();
+      setRunningState(projectPath, true, abortController, 'feature_generation');
+      logger.info('Starting background feature generation task...');
+
+      generateFeaturesFromSpec(projectPath, events, abortController, maxFeatures, settingsService)
+        .catch((error) => {
+          logError(error, 'Feature generation failed with error');
+          events.emit('spec-regeneration:event', {
+            type: 'features_error',
+            error: getErrorMessage(error),
+          });
+        })
+        .finally(() => {
+          logger.info('Feature generation task finished (success or error)');
+          setRunningState(projectPath, false, null);
+        });
+
+      logger.info('Returning success response (generation running in background)');
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Generate features route handler failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/app-spec/routes/generate.ts b/temp_repo/apps/server/src/routes/app-spec/routes/generate.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ffc792aea80156819c726c395cd97d94839670aa
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/app-spec/routes/generate.ts
@@ -0,0 +1,94 @@
+/**
+ * POST /generate endpoint - Generate spec from project definition
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import { createLogger } from '@automaker/utils';
+import {
+  getSpecRegenerationStatus,
+  setRunningState,
+  logAuthStatus,
+  logError,
+  getErrorMessage,
+} from '../common.js';
+import { generateSpec } from '../generate-spec.js';
+import type { SettingsService } from '../../../services/settings-service.js';
+
+const logger = createLogger('SpecRegeneration');
+
+export function createGenerateHandler(events: EventEmitter, settingsService?: SettingsService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    logger.info('========== /generate endpoint called ==========');
+    logger.debug('Request body:', JSON.stringify(req.body, null, 2));
+
+    try {
+      const { projectPath, projectDefinition, generateFeatures, analyzeProject, maxFeatures } =
+        req.body as {
+          projectPath: string;
+          projectDefinition: string;
+          generateFeatures?: boolean;
+          analyzeProject?: boolean;
+          maxFeatures?: number;
+        };
+
+      logger.debug('Parsed params:');
+      logger.debug('  projectPath:', projectPath);
+      logger.debug('  projectDefinition length:', `${projectDefinition?.length || 0} chars`);
+      logger.debug('  generateFeatures:', generateFeatures);
+      logger.debug('  analyzeProject:', analyzeProject);
+      logger.debug('  maxFeatures:', maxFeatures);
+
+      if (!projectPath || !projectDefinition) {
+        logger.error('Missing required parameters');
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and projectDefinition required',
+        });
+        return;
+      }
+
+      const { isRunning } = getSpecRegenerationStatus(projectPath);
+      if (isRunning) {
+        logger.warn('Generation already running for project:', projectPath);
+        res.json({ success: false, error: 'Spec generation already running for this project' });
+        return;
+      }
+
+      logAuthStatus('Before starting generation');
+
+      const abortController = new AbortController();
+      setRunningState(projectPath, true, abortController);
+      logger.info('Starting background generation task...');
+
+      generateSpec(
+        projectPath,
+        projectDefinition,
+        events,
+        abortController,
+        generateFeatures,
+        analyzeProject,
+        maxFeatures,
+        settingsService
+      )
+        .catch((error) => {
+          logError(error, 'Generation failed with error');
+          events.emit('spec-regeneration:event', {
+            type: 'spec_regeneration_error',
+            error: getErrorMessage(error),
+            projectPath: projectPath,
+          });
+        })
+        .finally(() => {
+          logger.info('Generation task finished (success or error)');
+          setRunningState(projectPath, false, null);
+        });
+
+      logger.info('Returning success response (generation running in background)');
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Generate spec route handler failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/app-spec/routes/status.ts b/temp_repo/apps/server/src/routes/app-spec/routes/status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..34caea32607f694b42e5b3de86324989a8bc4202
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/app-spec/routes/status.ts
@@ -0,0 +1,18 @@
+/**
+ * GET /status endpoint - Get generation status
+ */
+
+import type { Request, Response } from 'express';
+import { getSpecRegenerationStatus, getErrorMessage } from '../common.js';
+
+export function createStatusHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const projectPath = req.query.projectPath as string | undefined;
+      const { isRunning } = getSpecRegenerationStatus(projectPath);
+      res.json({ success: true, isRunning, projectPath });
+    } catch (error) {
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/app-spec/routes/stop.ts b/temp_repo/apps/server/src/routes/app-spec/routes/stop.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2a7b0aab3e11a530ad3e5a62753faedba126b901
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/app-spec/routes/stop.ts
@@ -0,0 +1,24 @@
+/**
+ * POST /stop endpoint - Stop generation
+ */
+
+import type { Request, Response } from 'express';
+import { getSpecRegenerationStatus, setRunningState, getErrorMessage } from '../common.js';
+
+export function createStopHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as { projectPath?: string };
+      const { currentAbortController } = getSpecRegenerationStatus(projectPath);
+      if (currentAbortController) {
+        currentAbortController.abort();
+      }
+      if (projectPath) {
+        setRunningState(projectPath, false, null);
+      }
+      res.json({ success: true });
+    } catch (error) {
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/app-spec/routes/sync.ts b/temp_repo/apps/server/src/routes/app-spec/routes/sync.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6c34e6868ac72d31b46ba6acb18fc50813920fb
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/app-spec/routes/sync.ts
@@ -0,0 +1,76 @@
+/**
+ * POST /sync endpoint - Sync spec with codebase and features
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import { createLogger } from '@automaker/utils';
+import {
+  getSpecRegenerationStatus,
+  setRunningState,
+  logAuthStatus,
+  logError,
+  getErrorMessage,
+} from '../common.js';
+import { syncSpec } from '../sync-spec.js';
+import type { SettingsService } from '../../../services/settings-service.js';
+
+const logger = createLogger('SpecSync');
+
+export function createSyncHandler(events: EventEmitter, settingsService?: SettingsService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    logger.info('========== /sync endpoint called ==========');
+    logger.debug('Request body:', JSON.stringify(req.body, null, 2));
+
+    try {
+      const { projectPath } = req.body as {
+        projectPath: string;
+      };
+
+      logger.debug('projectPath:', projectPath);
+
+      if (!projectPath) {
+        logger.error('Missing projectPath parameter');
+        res.status(400).json({ success: false, error: 'projectPath required' });
+        return;
+      }
+
+      const { isRunning } = getSpecRegenerationStatus(projectPath);
+      if (isRunning) {
+        logger.warn('Generation/sync already running for project:', projectPath);
+        res.json({ success: false, error: 'Operation already running for this project' });
+        return;
+      }
+
+      logAuthStatus('Before starting spec sync');
+
+      const abortController = new AbortController();
+      setRunningState(projectPath, true, abortController, 'sync');
+      logger.info('Starting background spec sync task...');
+
+      syncSpec(projectPath, events, abortController, settingsService)
+        .then((result) => {
+          logger.info('Spec sync completed successfully');
+          logger.info('Result:', JSON.stringify(result, null, 2));
+        })
+        .catch((error) => {
+          logError(error, 'Spec sync failed with error');
+          events.emit('spec-regeneration:event', {
+            type: 'spec_regeneration_error',
+            error: getErrorMessage(error),
+            projectPath,
+          });
+        })
+        .finally(() => {
+          logger.info('Spec sync task finished (success or error)');
+          setRunningState(projectPath, false, null);
+        });
+
+      logger.info('Returning success response (sync running in background)');
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Sync route handler failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/app-spec/sync-spec.ts b/temp_repo/apps/server/src/routes/app-spec/sync-spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..53bdc91a353679108bb65e6ef6fdb54c22248c63
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/app-spec/sync-spec.ts
@@ -0,0 +1,389 @@
+/**
+ * Sync spec with current codebase and feature state
+ *
+ * Updates the spec file based on:
+ * - Completed Automaker features
+ * - Code analysis for tech stack and implementations
+ * - Roadmap phase status updates
+ */
+
+import * as secureFs from '../../lib/secure-fs.js';
+import type { EventEmitter } from '../../lib/events.js';
+import { createLogger } from '@automaker/utils';
+import { DEFAULT_PHASE_MODELS, supportsStructuredOutput } from '@automaker/types';
+import { resolvePhaseModel } from '@automaker/model-resolver';
+import { streamingQuery } from '../../providers/simple-query-service.js';
+import { extractJson } from '../../lib/json-extractor.js';
+import { getAppSpecPath } from '@automaker/platform';
+import type { SettingsService } from '../../services/settings-service.js';
+import {
+  getAutoLoadClaudeMdSetting,
+  getPhaseModelWithOverrides,
+} from '../../lib/settings-helpers.js';
+import { FeatureLoader } from '../../services/feature-loader.js';
+import {
+  extractImplementedFeatures,
+  extractTechnologyStack,
+  extractRoadmapPhases,
+  updateImplementedFeaturesSection,
+  updateTechnologyStack,
+  updateRoadmapPhaseStatus,
+  type ImplementedFeature,
+} from '../../lib/xml-extractor.js';
+import { getNotificationService } from '../../services/notification-service.js';
+
+const logger = createLogger('SpecSync');
+
+/**
+ * Type for extracted tech stack JSON response
+ */
+interface TechStackExtractionResult {
+  technologies: string[];
+}
+
+/**
+ * JSON schema for tech stack analysis output (Claude/Codex structured output)
+ */
+const techStackOutputSchema = {
+  type: 'object',
+  properties: {
+    technologies: {
+      type: 'array',
+      items: { type: 'string' },
+      description: 'List of technologies detected in the project',
+    },
+  },
+  required: ['technologies'],
+} as const;
+
+/**
+ * Result of a sync operation
+ */
+export interface SyncResult {
+  techStackUpdates: {
+    added: string[];
+    removed: string[];
+  };
+  implementedFeaturesUpdates: {
+    addedFromFeatures: string[];
+    removed: string[];
+  };
+  roadmapUpdates: Array<{ phaseName: string; newStatus: string }>;
+  summary: string;
+}
+
+/**
+ * Sync the spec with current codebase and feature state
+ */
+export async function syncSpec(
+  projectPath: string,
+  events: EventEmitter,
+  abortController: AbortController,
+  settingsService?: SettingsService
+): Promise<SyncResult> {
+  logger.info('========== syncSpec() started ==========');
+  logger.info('projectPath:', projectPath);
+
+  const result: SyncResult = {
+    techStackUpdates: { added: [], removed: [] },
+    implementedFeaturesUpdates: { addedFromFeatures: [], removed: [] },
+    roadmapUpdates: [],
+    summary: '',
+  };
+
+  // Read existing spec
+  const specPath = getAppSpecPath(projectPath);
+  let specContent: string;
+
+  try {
+    specContent = (await secureFs.readFile(specPath, 'utf-8')) as string;
+    logger.info(`Spec loaded successfully (${specContent.length} chars)`);
+  } catch (readError) {
+    logger.error('Failed to read spec file:', readError);
+    events.emit('spec-regeneration:event', {
+      type: 'spec_regeneration_error',
+      error: 'No project spec found. Create or regenerate spec first.',
+      projectPath,
+    });
+    throw new Error('No project spec found');
+  }
+
+  events.emit('spec-regeneration:event', {
+    type: 'spec_regeneration_progress',
+    content: '[Phase: sync] Starting spec sync...\n',
+    projectPath,
+  });
+
+  // Extract current state from spec
+  const currentImplementedFeatures = extractImplementedFeatures(specContent);
+  const currentTechStack = extractTechnologyStack(specContent);
+  const currentRoadmapPhases = extractRoadmapPhases(specContent);
+
+  logger.info(`Current spec has ${currentImplementedFeatures.length} implemented features`);
+  logger.info(`Current spec has ${currentTechStack.length} technologies`);
+  logger.info(`Current spec has ${currentRoadmapPhases.length} roadmap phases`);
+
+  // Load completed Automaker features
+  const featureLoader = new FeatureLoader();
+  const allFeatures = await featureLoader.getAll(projectPath);
+  const completedFeatures = allFeatures.filter(
+    (f) => f.status === 'completed' || f.status === 'verified'
+  );
+
+  logger.info(`Found ${completedFeatures.length} completed/verified features in Automaker`);
+
+  events.emit('spec-regeneration:event', {
+    type: 'spec_regeneration_progress',
+    content: `Found ${completedFeatures.length} completed features to sync...\n`,
+    projectPath,
+  });
+
+  // Build new implemented features list from completed Automaker features
+  const newImplementedFeatures: ImplementedFeature[] = [];
+  const existingNames = new Set(currentImplementedFeatures.map((f) => f.name.toLowerCase()));
+
+  for (const feature of completedFeatures) {
+    const name = feature.title || `Feature: ${feature.id}`;
+    if (!existingNames.has(name.toLowerCase())) {
+      newImplementedFeatures.push({
+        name,
+        description: feature.description || '',
+      });
+      result.implementedFeaturesUpdates.addedFromFeatures.push(name);
+    }
+  }
+
+  // Merge: keep existing + add new from completed features
+  const mergedFeatures = [...currentImplementedFeatures, ...newImplementedFeatures];
+
+  // Update spec with merged features
+  if (result.implementedFeaturesUpdates.addedFromFeatures.length > 0) {
+    specContent = updateImplementedFeaturesSection(specContent, mergedFeatures);
+    logger.info(
+      `Added ${result.implementedFeaturesUpdates.addedFromFeatures.length} features to spec`
+    );
+  }
+
+  // Analyze codebase for tech stack updates using AI
+  events.emit('spec-regeneration:event', {
+    type: 'spec_regeneration_progress',
+    content: 'Analyzing codebase for technology updates...\n',
+    projectPath,
+  });
+
+  const autoLoadClaudeMd = await getAutoLoadClaudeMdSetting(
+    projectPath,
+    settingsService,
+    '[SpecSync]'
+  );
+
+  // Get model from phase settings with provider info
+  const {
+    phaseModel: phaseModelEntry,
+    provider,
+    credentials,
+  } = settingsService
+    ? await getPhaseModelWithOverrides(
+        'specGenerationModel',
+        settingsService,
+        projectPath,
+        '[SpecSync]'
+      )
+    : {
+        phaseModel: DEFAULT_PHASE_MODELS.specGenerationModel,
+        provider: undefined,
+        credentials: undefined,
+      };
+  const { model, thinkingLevel } = resolvePhaseModel(phaseModelEntry);
+
+  logger.info('Using model:', model, provider ? `via provider: ${provider.name}` : 'direct API');
+
+  // Determine if we should use structured output based on model type
+  const useStructuredOutput = supportsStructuredOutput(model);
+  logger.info(
+    `Structured output mode: ${useStructuredOutput ? 'enabled (Claude/Codex)' : 'disabled (using JSON instructions)'}`
+  );
+
+  // Use AI to analyze tech stack
+  let techAnalysisPrompt = `Analyze this project and return ONLY a JSON object with the current technology stack.
+
+Current known technologies: ${currentTechStack.join(', ')}
+
+Look at package.json, config files, and source code to identify:
+- Frameworks (React, Vue, Express, etc.)
+- Languages (TypeScript, JavaScript, Python, etc.)
+- Build tools (Vite, Webpack, etc.)
+- Databases (PostgreSQL, MongoDB, etc.)
+- Key libraries and tools
+
+Return ONLY this JSON format, no other text:
+{
+  "technologies": ["Technology 1", "Technology 2", ...]
+}`;
+
+  // Add explicit JSON instructions for non-Claude/Codex models
+  if (!useStructuredOutput) {
+    techAnalysisPrompt = `${techAnalysisPrompt}
+
+CRITICAL INSTRUCTIONS:
+1. DO NOT write any files. Return the JSON in your response only.
+2. Your entire response should be valid JSON starting with { and ending with }.
+3. No explanations, no markdown, no text before or after the JSON.`;
+  }
+
+  try {
+    const techResult = await streamingQuery({
+      prompt: techAnalysisPrompt,
+      model,
+      cwd: projectPath,
+      maxTurns: 10,
+      allowedTools: ['Read', 'Glob', 'Grep'],
+      abortController,
+      thinkingLevel,
+      readOnly: true,
+      settingSources: autoLoadClaudeMd ? ['user', 'project', 'local'] : undefined,
+      claudeCompatibleProvider: provider, // Pass provider for alternative endpoint configuration
+      credentials, // Pass credentials for resolving 'credentials' apiKeySource
+      outputFormat: useStructuredOutput
+        ? {
+            type: 'json_schema',
+            schema: techStackOutputSchema,
+          }
+        : undefined,
+      onText: (text) => {
+        logger.debug(`Tech analysis text: ${text.substring(0, 100)}`);
+      },
+    });
+
+    // Parse tech stack from response - prefer structured output if available
+    let parsedTechnologies: string[] | null = null;
+
+    if (techResult.structured_output) {
+      // Use structured output from Claude/Codex models
+      const structured = techResult.structured_output as unknown as TechStackExtractionResult;
+      if (Array.isArray(structured.technologies)) {
+        parsedTechnologies = structured.technologies;
+        logger.info('✅ Received structured output for tech analysis');
+      }
+    } else {
+      // Fall back to text parsing for non-Claude/Codex models
+      const extracted = extractJson<TechStackExtractionResult>(techResult.text, {
+        logger,
+        requiredKey: 'technologies',
+        requireArray: true,
+      });
+      if (extracted && Array.isArray(extracted.technologies)) {
+        parsedTechnologies = extracted.technologies;
+        logger.info('✅ Extracted tech stack from text response');
+      } else {
+        logger.warn('⚠️ Failed to extract tech stack JSON from response');
+      }
+    }
+
+    if (parsedTechnologies) {
+      const newTechStack = parsedTechnologies;
+
+      // Calculate differences
+      const currentSet = new Set(currentTechStack.map((t) => t.toLowerCase()));
+      const newSet = new Set(newTechStack.map((t) => t.toLowerCase()));
+
+      for (const tech of newTechStack) {
+        if (!currentSet.has(tech.toLowerCase())) {
+          result.techStackUpdates.added.push(tech);
+        }
+      }
+
+      for (const tech of currentTechStack) {
+        if (!newSet.has(tech.toLowerCase())) {
+          result.techStackUpdates.removed.push(tech);
+        }
+      }
+
+      // Update spec with new tech stack if there are changes
+      if (result.techStackUpdates.added.length > 0 || result.techStackUpdates.removed.length > 0) {
+        specContent = updateTechnologyStack(specContent, newTechStack);
+        logger.info(
+          `Updated tech stack: +${result.techStackUpdates.added.length}, -${result.techStackUpdates.removed.length}`
+        );
+      }
+    }
+  } catch (error) {
+    logger.warn('Failed to analyze tech stack:', error);
+    // Continue with other sync operations
+  }
+
+  // Update roadmap phase statuses based on completed features
+  events.emit('spec-regeneration:event', {
+    type: 'spec_regeneration_progress',
+    content: 'Checking roadmap phase statuses...\n',
+    projectPath,
+  });
+
+  // For each phase, check if all its features are completed
+  // This is a heuristic - we check if the phase name appears in any feature titles/descriptions
+  for (const phase of currentRoadmapPhases) {
+    if (phase.status === 'completed') continue; // Already completed
+
+    // Check if this phase should be marked as completed
+    // A phase is considered complete if we have completed features that mention it
+    const phaseNameLower = phase.name.toLowerCase();
+    const relatedCompletedFeatures = completedFeatures.filter(
+      (f) =>
+        f.title?.toLowerCase().includes(phaseNameLower) ||
+        f.description?.toLowerCase().includes(phaseNameLower) ||
+        f.category?.toLowerCase().includes(phaseNameLower)
+    );
+
+    // If we have related completed features and the phase is still pending/in_progress,
+    // update it to in_progress or completed based on feature count
+    if (relatedCompletedFeatures.length > 0 && phase.status !== 'completed') {
+      const newStatus = 'in_progress';
+      specContent = updateRoadmapPhaseStatus(specContent, phase.name, newStatus);
+      result.roadmapUpdates.push({ phaseName: phase.name, newStatus });
+      logger.info(`Updated phase "${phase.name}" to ${newStatus}`);
+    }
+  }
+
+  // Save updated spec
+  await secureFs.writeFile(specPath, specContent, 'utf-8');
+  logger.info('Spec saved successfully');
+
+  // Build summary
+  const summaryParts: string[] = [];
+  if (result.implementedFeaturesUpdates.addedFromFeatures.length > 0) {
+    summaryParts.push(
+      `Added ${result.implementedFeaturesUpdates.addedFromFeatures.length} implemented features`
+    );
+  }
+  if (result.techStackUpdates.added.length > 0) {
+    summaryParts.push(`Added ${result.techStackUpdates.added.length} technologies`);
+  }
+  if (result.techStackUpdates.removed.length > 0) {
+    summaryParts.push(`Removed ${result.techStackUpdates.removed.length} technologies`);
+  }
+  if (result.roadmapUpdates.length > 0) {
+    summaryParts.push(`Updated ${result.roadmapUpdates.length} roadmap phases`);
+  }
+
+  result.summary = summaryParts.length > 0 ? summaryParts.join(', ') : 'Spec is already up to date';
+
+  // Create notification
+  const notificationService = getNotificationService();
+  await notificationService.createNotification({
+    type: 'spec_regeneration_complete',
+    title: 'Spec Sync Complete',
+    message: result.summary,
+    projectPath,
+  });
+
+  events.emit('spec-regeneration:event', {
+    type: 'spec_regeneration_complete',
+    message: `Spec sync complete! ${result.summary}`,
+    projectPath,
+  });
+
+  logger.info('========== syncSpec() completed ==========');
+  logger.info('Summary:', result.summary);
+
+  return result;
+}
diff --git a/temp_repo/apps/server/src/routes/auth/index.ts b/temp_repo/apps/server/src/routes/auth/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..558065c4c92faa4b98c47a585c8fa01a4da863bb
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auth/index.ts
@@ -0,0 +1,266 @@
+/**
+ * Auth routes - Login, logout, and status endpoints
+ *
+ * Security model:
+ * - Web mode: User enters API key (shown on server console) to get HTTP-only session cookie
+ * - Electron mode: Uses X-API-Key header (handled automatically via IPC)
+ *
+ * The session cookie is:
+ * - HTTP-only: JavaScript cannot read it (protects against XSS)
+ * - SameSite=Strict: Only sent for same-site requests (protects against CSRF)
+ *
+ * Mounted at /api/auth in the main server (BEFORE auth middleware).
+ */
+
+import { Router } from 'express';
+import type { Request } from 'express';
+import {
+  validateApiKey,
+  createSession,
+  invalidateSession,
+  getSessionCookieOptions,
+  getSessionCookieName,
+  isRequestAuthenticated,
+  createWsConnectionToken,
+} from '../../lib/auth.js';
+
+// Rate limiting configuration
+const RATE_LIMIT_WINDOW_MS = 60 * 1000; // 1 minute window
+const RATE_LIMIT_MAX_ATTEMPTS = 5; // Max 5 attempts per window
+
+// Check if we're in test mode - disable rate limiting for E2E tests
+const isTestMode = process.env.AUTOMAKER_MOCK_AGENT === 'true';
+
+// In-memory rate limit tracking (resets on server restart)
+const loginAttempts = new Map<string, { count: number; windowStart: number }>();
+
+// Clean up old rate limit entries periodically (every 5 minutes)
+setInterval(
+  () => {
+    const now = Date.now();
+    loginAttempts.forEach((data, ip) => {
+      if (now - data.windowStart > RATE_LIMIT_WINDOW_MS * 2) {
+        loginAttempts.delete(ip);
+      }
+    });
+  },
+  5 * 60 * 1000
+);
+
+/**
+ * Get client IP address from request
+ * Handles X-Forwarded-For header for reverse proxy setups
+ */
+function getClientIp(req: Request): string {
+  const forwarded = req.headers['x-forwarded-for'];
+  if (forwarded) {
+    // X-Forwarded-For can be a comma-separated list; take the first (original client)
+    const forwardedIp = Array.isArray(forwarded) ? forwarded[0] : forwarded.split(',')[0];
+    return forwardedIp.trim();
+  }
+  return req.ip || req.socket.remoteAddress || 'unknown';
+}
+
+/**
+ * Check if an IP is rate limited
+ * Returns { limited: boolean, retryAfter?: number }
+ */
+function checkRateLimit(ip: string): { limited: boolean; retryAfter?: number } {
+  const now = Date.now();
+  const attempt = loginAttempts.get(ip);
+
+  if (!attempt) {
+    return { limited: false };
+  }
+
+  // Check if window has expired
+  if (now - attempt.windowStart > RATE_LIMIT_WINDOW_MS) {
+    loginAttempts.delete(ip);
+    return { limited: false };
+  }
+
+  // Check if over limit
+  if (attempt.count >= RATE_LIMIT_MAX_ATTEMPTS) {
+    const retryAfter = Math.ceil((RATE_LIMIT_WINDOW_MS - (now - attempt.windowStart)) / 1000);
+    return { limited: true, retryAfter };
+  }
+
+  return { limited: false };
+}
+
+/**
+ * Record a login attempt for rate limiting
+ */
+function recordLoginAttempt(ip: string): void {
+  const now = Date.now();
+  const attempt = loginAttempts.get(ip);
+
+  if (!attempt || now - attempt.windowStart > RATE_LIMIT_WINDOW_MS) {
+    // Start new window
+    loginAttempts.set(ip, { count: 1, windowStart: now });
+  } else {
+    // Increment existing window
+    attempt.count++;
+  }
+}
+
+/**
+ * Create auth routes
+ *
+ * @returns Express Router with auth endpoints
+ */
+export function createAuthRoutes(): Router {
+  const router = Router();
+
+  /**
+   * GET /api/auth/status
+   *
+   * Returns whether the current request is authenticated.
+   * Used by the UI to determine if login is needed.
+   *
+   * If AUTOMAKER_AUTO_LOGIN=true is set, automatically creates a session
+   * for unauthenticated requests (useful for development).
+   */
+  router.get('/status', async (req, res) => {
+    let authenticated = isRequestAuthenticated(req);
+
+    // Auto-login for development: create session automatically if enabled
+    // Only works in non-production environments as a safeguard
+    if (
+      !authenticated &&
+      process.env.AUTOMAKER_AUTO_LOGIN === 'true' &&
+      process.env.NODE_ENV !== 'production'
+    ) {
+      const sessionToken = await createSession();
+      const cookieOptions = getSessionCookieOptions();
+      const cookieName = getSessionCookieName();
+      res.cookie(cookieName, sessionToken, cookieOptions);
+      authenticated = true;
+    }
+
+    res.json({
+      success: true,
+      authenticated,
+      required: true,
+    });
+  });
+
+  /**
+   * POST /api/auth/login
+   *
+   * Validates the API key and sets a session cookie.
+   * Body: { apiKey: string }
+   *
+   * Rate limited to 5 attempts per minute per IP to prevent brute force attacks.
+   */
+  router.post('/login', async (req, res) => {
+    const clientIp = getClientIp(req);
+
+    // Skip rate limiting in test mode to allow parallel E2E tests
+    if (!isTestMode) {
+      // Check rate limit before processing
+      const rateLimit = checkRateLimit(clientIp);
+      if (rateLimit.limited) {
+        res.status(429).json({
+          success: false,
+          error: 'Too many login attempts. Please try again later.',
+          retryAfter: rateLimit.retryAfter,
+        });
+        return;
+      }
+    }
+
+    const { apiKey } = req.body as { apiKey?: string };
+
+    if (!apiKey) {
+      res.status(400).json({
+        success: false,
+        error: 'API key is required.',
+      });
+      return;
+    }
+
+    // Record this attempt (only for actual API key validation attempts, skip in test mode)
+    if (!isTestMode) {
+      recordLoginAttempt(clientIp);
+    }
+
+    if (!validateApiKey(apiKey)) {
+      res.status(401).json({
+        success: false,
+        error: 'Invalid API key.',
+      });
+      return;
+    }
+
+    // Create session and set cookie
+    const sessionToken = await createSession();
+    const cookieOptions = getSessionCookieOptions();
+    const cookieName = getSessionCookieName();
+
+    res.cookie(cookieName, sessionToken, cookieOptions);
+    res.json({
+      success: true,
+      message: 'Logged in successfully.',
+      // Return token for explicit header-based auth (works around cross-origin cookie issues)
+      token: sessionToken,
+    });
+  });
+
+  /**
+   * GET /api/auth/token
+   *
+   * Generates a short-lived WebSocket connection token if the user has a valid session.
+   * This token is used for initial WebSocket handshake authentication and expires in 5 minutes.
+   * The token is NOT the session cookie value - it's a separate, short-lived token.
+   */
+  router.get('/token', (req, res) => {
+    // Validate the session is still valid (via cookie, API key, or session token header)
+    if (!isRequestAuthenticated(req)) {
+      res.status(401).json({
+        success: false,
+        error: 'Authentication required.',
+      });
+      return;
+    }
+
+    // Generate a new short-lived WebSocket connection token
+    const wsToken = createWsConnectionToken();
+
+    res.json({
+      success: true,
+      token: wsToken,
+      expiresIn: 300, // 5 minutes in seconds
+    });
+  });
+
+  /**
+   * POST /api/auth/logout
+   *
+   * Clears the session cookie and invalidates the session.
+   */
+  router.post('/logout', async (req, res) => {
+    const cookieName = getSessionCookieName();
+    const sessionToken = req.cookies?.[cookieName] as string | undefined;
+
+    if (sessionToken) {
+      await invalidateSession(sessionToken);
+    }
+
+    // Clear the cookie by setting it to empty with immediate expiration
+    // Using res.cookie() with maxAge: 0 is more reliable than clearCookie()
+    // in cross-origin development environments
+    res.cookie(cookieName, '', {
+      ...getSessionCookieOptions(),
+      maxAge: 0,
+      expires: new Date(0),
+    });
+
+    res.json({
+      success: true,
+      message: 'Logged out successfully.',
+    });
+  });
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/auto-mode/common.ts b/temp_repo/apps/server/src/routes/auto-mode/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8fe9c3ab2dfba6bbc2d45838f4a4cc98f790ff83
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/common.ts
@@ -0,0 +1,12 @@
+/**
+ * Common utilities for auto-mode routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+const logger = createLogger('AutoMode');
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/auto-mode/index.ts b/temp_repo/apps/server/src/routes/auto-mode/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..016447d739e9831866544bd7b2fbbb158229e803
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/index.ts
@@ -0,0 +1,92 @@
+/**
+ * Auto Mode routes - HTTP API for autonomous feature implementation
+ *
+ * Uses AutoModeServiceCompat which provides the old interface while
+ * delegating to GlobalAutoModeService and per-project facades.
+ */
+
+import { Router } from 'express';
+import type { AutoModeServiceCompat } from '../../services/auto-mode/index.js';
+import { validatePathParams } from '../../middleware/validate-paths.js';
+import { createStopFeatureHandler } from './routes/stop-feature.js';
+import { createStatusHandler } from './routes/status.js';
+import { createRunFeatureHandler } from './routes/run-feature.js';
+import { createStartHandler } from './routes/start.js';
+import { createStopHandler } from './routes/stop.js';
+import { createVerifyFeatureHandler } from './routes/verify-feature.js';
+import { createResumeFeatureHandler } from './routes/resume-feature.js';
+import { createContextExistsHandler } from './routes/context-exists.js';
+import { createAnalyzeProjectHandler } from './routes/analyze-project.js';
+import { createFollowUpFeatureHandler } from './routes/follow-up-feature.js';
+import { createCommitFeatureHandler } from './routes/commit-feature.js';
+import { createApprovePlanHandler } from './routes/approve-plan.js';
+import { createResumeInterruptedHandler } from './routes/resume-interrupted.js';
+import { createReconcileHandler } from './routes/reconcile.js';
+
+/**
+ * Create auto-mode routes.
+ *
+ * @param autoModeService - AutoModeServiceCompat instance
+ */
+export function createAutoModeRoutes(autoModeService: AutoModeServiceCompat): Router {
+  const router = Router();
+
+  // Auto loop control routes
+  router.post('/start', validatePathParams('projectPath'), createStartHandler(autoModeService));
+  router.post('/stop', validatePathParams('projectPath'), createStopHandler(autoModeService));
+
+  router.post('/stop-feature', createStopFeatureHandler(autoModeService));
+  router.post('/status', validatePathParams('projectPath?'), createStatusHandler(autoModeService));
+  router.post(
+    '/run-feature',
+    validatePathParams('projectPath'),
+    createRunFeatureHandler(autoModeService)
+  );
+  router.post(
+    '/verify-feature',
+    validatePathParams('projectPath'),
+    createVerifyFeatureHandler(autoModeService)
+  );
+  router.post(
+    '/resume-feature',
+    validatePathParams('projectPath'),
+    createResumeFeatureHandler(autoModeService)
+  );
+  router.post(
+    '/context-exists',
+    validatePathParams('projectPath'),
+    createContextExistsHandler(autoModeService)
+  );
+  router.post(
+    '/analyze-project',
+    validatePathParams('projectPath'),
+    createAnalyzeProjectHandler(autoModeService)
+  );
+  router.post(
+    '/follow-up-feature',
+    validatePathParams('projectPath', 'imagePaths[]'),
+    createFollowUpFeatureHandler(autoModeService)
+  );
+  router.post(
+    '/commit-feature',
+    validatePathParams('projectPath', 'worktreePath?'),
+    createCommitFeatureHandler(autoModeService)
+  );
+  router.post(
+    '/approve-plan',
+    validatePathParams('projectPath'),
+    createApprovePlanHandler(autoModeService)
+  );
+  router.post(
+    '/resume-interrupted',
+    validatePathParams('projectPath'),
+    createResumeInterruptedHandler(autoModeService)
+  );
+  router.post(
+    '/reconcile',
+    validatePathParams('projectPath'),
+    createReconcileHandler(autoModeService)
+  );
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/auto-mode/routes/analyze-project.ts b/temp_repo/apps/server/src/routes/auto-mode/routes/analyze-project.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cae70c3689b338d54aa73de7fa6262a13d5d7fb0
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/routes/analyze-project.ts
@@ -0,0 +1,34 @@
+/**
+ * POST /analyze-project endpoint - Analyze project
+ */
+
+import type { Request, Response } from 'express';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage, logError } from '../common.js';
+
+const logger = createLogger('AutoMode');
+
+export function createAnalyzeProjectHandler(autoModeService: AutoModeServiceCompat) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as { projectPath: string };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      // Kick off analysis in the background; attach a rejection handler so
+      // unhandled-promise warnings don't surface and errors are at least logged.
+      // Synchronous throws (e.g. "not implemented") still propagate here.
+      const analysisPromise = autoModeService.analyzeProject(projectPath);
+      analysisPromise.catch((err) => logError(err, 'Background analyzeProject failed'));
+
+      res.json({ success: true, message: 'Project analysis started' });
+    } catch (error) {
+      logError(error, 'Analyze project failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/auto-mode/routes/approve-plan.ts b/temp_repo/apps/server/src/routes/auto-mode/routes/approve-plan.ts
new file mode 100644
index 0000000000000000000000000000000000000000..14673e31bba81d2f11135679b75634f924a88285
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/routes/approve-plan.ts
@@ -0,0 +1,86 @@
+/**
+ * POST /approve-plan endpoint - Approve or reject a generated plan/spec
+ */
+
+import type { Request, Response } from 'express';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage, logError } from '../common.js';
+
+const logger = createLogger('AutoMode');
+
+export function createApprovePlanHandler(autoModeService: AutoModeServiceCompat) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { featureId, approved, editedPlan, feedback, projectPath } = req.body as {
+        featureId: string;
+        approved: boolean;
+        editedPlan?: string;
+        feedback?: string;
+        projectPath: string;
+      };
+
+      if (!featureId) {
+        res.status(400).json({
+          success: false,
+          error: 'featureId is required',
+        });
+        return;
+      }
+
+      if (typeof approved !== 'boolean') {
+        res.status(400).json({
+          success: false,
+          error: 'approved must be a boolean',
+        });
+        return;
+      }
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      // Note: We no longer check hasPendingApproval here because resolvePlanApproval
+      // can handle recovery when pending approval is not in Map but feature has planSpec.status='generated'
+      // This supports cases where the server restarted while waiting for approval
+
+      logger.info(
+        `[AutoMode] Plan ${approved ? 'approved' : 'rejected'} for feature ${featureId}${
+          editedPlan ? ' (with edits)' : ''
+        }${feedback ? ` - Feedback: ${feedback}` : ''}`
+      );
+
+      // Resolve the pending approval (with recovery support)
+      const result = await autoModeService.resolvePlanApproval(
+        projectPath,
+        featureId,
+        approved,
+        editedPlan,
+        feedback
+      );
+
+      if (!result.success) {
+        res.status(500).json({
+          success: false,
+          error: result.error,
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        approved,
+        message: approved
+          ? 'Plan approved - implementation will continue'
+          : 'Plan rejected - feature execution stopped',
+      });
+    } catch (error) {
+      logError(error, 'Approve plan failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/auto-mode/routes/commit-feature.ts b/temp_repo/apps/server/src/routes/auto-mode/routes/commit-feature.ts
new file mode 100644
index 0000000000000000000000000000000000000000..16b9000d2ec6e52139c0dab429b97895c21b3b79
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/routes/commit-feature.ts
@@ -0,0 +1,33 @@
+/**
+ * POST /commit-feature endpoint - Commit feature changes
+ */
+
+import type { Request, Response } from 'express';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createCommitFeatureHandler(autoModeService: AutoModeServiceCompat) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureId, worktreePath } = req.body as {
+        projectPath: string;
+        featureId: string;
+        worktreePath?: string;
+      };
+
+      if (!projectPath || !featureId) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and featureId are required',
+        });
+        return;
+      }
+
+      const commitHash = await autoModeService.commitFeature(projectPath, featureId, worktreePath);
+      res.json({ success: true, commitHash });
+    } catch (error) {
+      logError(error, 'Commit feature failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/auto-mode/routes/context-exists.ts b/temp_repo/apps/server/src/routes/auto-mode/routes/context-exists.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8c85c2abf758b56cf4ce139eef92ed6437fbd4fb
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/routes/context-exists.ts
@@ -0,0 +1,32 @@
+/**
+ * POST /context-exists endpoint - Check if context exists for a feature
+ */
+
+import type { Request, Response } from 'express';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createContextExistsHandler(autoModeService: AutoModeServiceCompat) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureId } = req.body as {
+        projectPath: string;
+        featureId: string;
+      };
+
+      if (!projectPath || !featureId) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and featureId are required',
+        });
+        return;
+      }
+
+      const exists = await autoModeService.contextExists(projectPath, featureId);
+      res.json({ success: true, exists });
+    } catch (error) {
+      logError(error, 'Check context exists failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/auto-mode/routes/follow-up-feature.ts b/temp_repo/apps/server/src/routes/auto-mode/routes/follow-up-feature.ts
new file mode 100644
index 0000000000000000000000000000000000000000..312edcdea8661db0e54364b2f50a1d302c0cf326
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/routes/follow-up-feature.ts
@@ -0,0 +1,47 @@
+/**
+ * POST /follow-up-feature endpoint - Follow up on a feature
+ */
+
+import type { Request, Response } from 'express';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage, logError } from '../common.js';
+
+const logger = createLogger('AutoMode');
+
+export function createFollowUpFeatureHandler(autoModeService: AutoModeServiceCompat) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureId, prompt, imagePaths, useWorktrees } = req.body as {
+        projectPath: string;
+        featureId: string;
+        prompt: string;
+        imagePaths?: string[];
+        useWorktrees?: boolean;
+      };
+
+      if (!projectPath || !featureId || !prompt) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath, featureId, and prompt are required',
+        });
+        return;
+      }
+
+      // Start follow-up in background
+      // followUpFeature derives workDir from feature.branchName
+      // Default to false to match run-feature/resume-feature behavior.
+      // Worktrees should only be used when explicitly enabled by the user.
+      autoModeService
+        .followUpFeature(projectPath, featureId, prompt, imagePaths, useWorktrees ?? false)
+        .catch((error) => {
+          logger.error(`[AutoMode] Follow up feature ${featureId} error:`, error);
+        });
+
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Follow up feature failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/auto-mode/routes/reconcile.ts b/temp_repo/apps/server/src/routes/auto-mode/routes/reconcile.ts
new file mode 100644
index 0000000000000000000000000000000000000000..96109051ab151461ea4f1ed07cb3bb342c3d41ad
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/routes/reconcile.ts
@@ -0,0 +1,53 @@
+/**
+ * Reconcile Feature States Handler
+ *
+ * On-demand endpoint to reconcile all feature states for a project.
+ * Resets features stuck in transient states (in_progress, interrupted, pipeline_*)
+ * back to resting states (ready/backlog) and emits events to update the UI.
+ *
+ * This is useful when:
+ * - The UI reconnects after a server restart
+ * - A client detects stale feature states
+ * - An admin wants to force-reset stuck features
+ */
+
+import type { Request, Response } from 'express';
+import { createLogger } from '@automaker/utils';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+
+const logger = createLogger('ReconcileFeatures');
+
+interface ReconcileRequest {
+  projectPath: string;
+}
+
+export function createReconcileHandler(autoModeService: AutoModeServiceCompat) {
+  return async (req: Request, res: Response): Promise<void> => {
+    const { projectPath } = req.body as ReconcileRequest;
+
+    if (!projectPath) {
+      res.status(400).json({ error: 'Project path is required' });
+      return;
+    }
+
+    logger.info(`Reconciling feature states for ${projectPath}`);
+
+    try {
+      const reconciledCount = await autoModeService.reconcileFeatureStates(projectPath);
+
+      res.json({
+        success: true,
+        reconciledCount,
+        message:
+          reconciledCount > 0
+            ? `Reconciled ${reconciledCount} feature(s)`
+            : 'No features needed reconciliation',
+      });
+    } catch (error) {
+      logger.error('Error reconciling feature states:', error);
+      res.status(500).json({
+        error: error instanceof Error ? error.message : 'Unknown error',
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/auto-mode/routes/resume-feature.ts b/temp_repo/apps/server/src/routes/auto-mode/routes/resume-feature.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d9f5de32baa751ac3b8416990109c59384419564
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/routes/resume-feature.ts
@@ -0,0 +1,43 @@
+/**
+ * POST /resume-feature endpoint - Resume a feature
+ */
+
+import type { Request, Response } from 'express';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage, logError } from '../common.js';
+
+const logger = createLogger('AutoMode');
+
+export function createResumeFeatureHandler(autoModeService: AutoModeServiceCompat) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureId, useWorktrees } = req.body as {
+        projectPath: string;
+        featureId: string;
+        useWorktrees?: boolean;
+      };
+
+      if (!projectPath || !featureId) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and featureId are required',
+        });
+        return;
+      }
+
+      // Start resume in background
+      // Default to false - worktrees should only be used when explicitly enabled
+      autoModeService
+        .resumeFeature(projectPath, featureId, useWorktrees ?? false)
+        .catch((error) => {
+          logger.error(`Resume feature ${featureId} error:`, error);
+        });
+
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Resume feature failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/auto-mode/routes/resume-interrupted.ts b/temp_repo/apps/server/src/routes/auto-mode/routes/resume-interrupted.ts
new file mode 100644
index 0000000000000000000000000000000000000000..314bc067f8704c7218e4068164dada9979055c80
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/routes/resume-interrupted.ts
@@ -0,0 +1,43 @@
+/**
+ * Resume Interrupted Features Handler
+ *
+ * Checks for features that were interrupted (in pipeline steps or in_progress)
+ * when the server was restarted and resumes them.
+ */
+
+import type { Request, Response } from 'express';
+import { createLogger } from '@automaker/utils';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+
+const logger = createLogger('ResumeInterrupted');
+
+interface ResumeInterruptedRequest {
+  projectPath: string;
+}
+
+export function createResumeInterruptedHandler(autoModeService: AutoModeServiceCompat) {
+  return async (req: Request, res: Response): Promise<void> => {
+    const { projectPath } = req.body as ResumeInterruptedRequest;
+
+    if (!projectPath) {
+      res.status(400).json({ error: 'Project path is required' });
+      return;
+    }
+
+    logger.info(`Checking for interrupted features in ${projectPath}`);
+
+    try {
+      await autoModeService.resumeInterruptedFeatures(projectPath);
+
+      res.json({
+        success: true,
+        message: 'Resume check completed',
+      });
+    } catch (error) {
+      logger.error('Error resuming interrupted features:', error);
+      res.status(500).json({
+        error: error instanceof Error ? error.message : 'Unknown error',
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/auto-mode/routes/run-feature.ts b/temp_repo/apps/server/src/routes/auto-mode/routes/run-feature.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a61a406415ba72d569a7310657405e87b227c0cb
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/routes/run-feature.ts
@@ -0,0 +1,47 @@
+/**
+ * POST /run-feature endpoint - Run a single feature
+ */
+
+import type { Request, Response } from 'express';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage, logError } from '../common.js';
+
+const logger = createLogger('AutoMode');
+
+export function createRunFeatureHandler(autoModeService: AutoModeServiceCompat) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureId, useWorktrees } = req.body as {
+        projectPath: string;
+        featureId: string;
+        useWorktrees?: boolean;
+      };
+
+      if (!projectPath || !featureId) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and featureId are required',
+        });
+        return;
+      }
+
+      // Note: No concurrency limit check here. Manual feature starts always run
+      // immediately and bypass the concurrency limit. Their presence IS counted
+      // by the auto-loop coordinator when deciding whether to dispatch new auto-mode tasks.
+
+      // Start execution in background
+      // executeFeature derives workDir from feature.branchName
+      autoModeService
+        .executeFeature(projectPath, featureId, useWorktrees ?? false, false)
+        .catch((error) => {
+          logger.error(`Feature ${featureId} error:`, error);
+        });
+
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Run feature failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/auto-mode/routes/start.ts b/temp_repo/apps/server/src/routes/auto-mode/routes/start.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c8cc8bff47b7ac8434011223cd0a212cd2249af6
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/routes/start.ts
@@ -0,0 +1,67 @@
+/**
+ * POST /start endpoint - Start auto mode loop for a project
+ */
+
+import type { Request, Response } from 'express';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage, logError } from '../common.js';
+
+const logger = createLogger('AutoMode');
+
+export function createStartHandler(autoModeService: AutoModeServiceCompat) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, branchName, maxConcurrency } = req.body as {
+        projectPath: string;
+        branchName?: string | null;
+        maxConcurrency?: number;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      // Normalize branchName: undefined becomes null
+      const normalizedBranchName = branchName ?? null;
+      const worktreeDesc = normalizedBranchName
+        ? `worktree ${normalizedBranchName}`
+        : 'main worktree';
+
+      // Check if already running
+      if (autoModeService.isAutoLoopRunningForProject(projectPath, normalizedBranchName)) {
+        res.json({
+          success: true,
+          message: `Auto mode is already running for ${worktreeDesc}`,
+          alreadyRunning: true,
+          branchName: normalizedBranchName,
+        });
+        return;
+      }
+
+      // Start the auto loop for this project/worktree
+      const resolvedMaxConcurrency = await autoModeService.startAutoLoopForProject(
+        projectPath,
+        normalizedBranchName,
+        maxConcurrency
+      );
+
+      logger.info(
+        `Started auto loop for ${worktreeDesc} in project: ${projectPath} with maxConcurrency: ${resolvedMaxConcurrency}`
+      );
+
+      res.json({
+        success: true,
+        message: `Auto mode started with max ${resolvedMaxConcurrency} concurrent features`,
+        branchName: normalizedBranchName,
+      });
+    } catch (error) {
+      logError(error, 'Start auto mode failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/auto-mode/routes/status.ts b/temp_repo/apps/server/src/routes/auto-mode/routes/status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..765ff73a61000a4ffd4d54127b47bf480b720f08
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/routes/status.ts
@@ -0,0 +1,60 @@
+/**
+ * POST /status endpoint - Get auto mode status
+ *
+ * If projectPath is provided, returns per-project status including autoloop state.
+ * If no projectPath, returns global status for backward compatibility.
+ */
+
+import type { Request, Response } from 'express';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+import { getErrorMessage, logError } from '../common.js';
+
+/**
+ * Create status handler.
+ */
+export function createStatusHandler(autoModeService: AutoModeServiceCompat) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, branchName } = req.body as {
+        projectPath?: string;
+        branchName?: string | null;
+      };
+
+      // If projectPath is provided, return per-project/worktree status
+      if (projectPath) {
+        // Normalize branchName: undefined becomes null
+        const normalizedBranchName = branchName ?? null;
+
+        const projectStatus = await autoModeService.getStatusForProject(
+          projectPath,
+          normalizedBranchName
+        );
+        res.json({
+          success: true,
+          isRunning: projectStatus.runningCount > 0,
+          isAutoLoopRunning: projectStatus.isAutoLoopRunning,
+          runningFeatures: projectStatus.runningFeatures,
+          runningCount: projectStatus.runningCount,
+          maxConcurrency: projectStatus.maxConcurrency,
+          projectPath,
+          branchName: normalizedBranchName,
+        });
+        return;
+      }
+
+      // Global status for backward compatibility
+      const status = autoModeService.getStatus();
+      const activeProjects = autoModeService.getActiveAutoLoopProjects();
+      const activeWorktrees = autoModeService.getActiveAutoLoopWorktrees();
+      res.json({
+        success: true,
+        ...status,
+        activeAutoLoopProjects: activeProjects,
+        activeAutoLoopWorktrees: activeWorktrees,
+      });
+    } catch (error) {
+      logError(error, 'Get status failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/auto-mode/routes/stop-feature.ts b/temp_repo/apps/server/src/routes/auto-mode/routes/stop-feature.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2e3e69eb6c4065fa51c2a5d3c2588f30a04abc52
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/routes/stop-feature.ts
@@ -0,0 +1,26 @@
+/**
+ * POST /stop-feature endpoint - Stop a specific feature
+ */
+
+import type { Request, Response } from 'express';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createStopFeatureHandler(autoModeService: AutoModeServiceCompat) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { featureId } = req.body as { featureId: string };
+
+      if (!featureId) {
+        res.status(400).json({ success: false, error: 'featureId is required' });
+        return;
+      }
+
+      const stopped = await autoModeService.stopFeature(featureId);
+      res.json({ success: true, stopped });
+    } catch (error) {
+      logError(error, 'Stop feature failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/auto-mode/routes/stop.ts b/temp_repo/apps/server/src/routes/auto-mode/routes/stop.ts
new file mode 100644
index 0000000000000000000000000000000000000000..224b0daf47248e08cb05392faeb7d27c42587444
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/routes/stop.ts
@@ -0,0 +1,66 @@
+/**
+ * POST /stop endpoint - Stop auto mode loop for a project
+ */
+
+import type { Request, Response } from 'express';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage, logError } from '../common.js';
+
+const logger = createLogger('AutoMode');
+
+export function createStopHandler(autoModeService: AutoModeServiceCompat) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, branchName } = req.body as {
+        projectPath: string;
+        branchName?: string | null;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      // Normalize branchName: undefined becomes null
+      const normalizedBranchName = branchName ?? null;
+      const worktreeDesc = normalizedBranchName
+        ? `worktree ${normalizedBranchName}`
+        : 'main worktree';
+
+      // Check if running
+      if (!autoModeService.isAutoLoopRunningForProject(projectPath, normalizedBranchName)) {
+        res.json({
+          success: true,
+          message: `Auto mode is not running for ${worktreeDesc}`,
+          wasRunning: false,
+          branchName: normalizedBranchName,
+        });
+        return;
+      }
+
+      // Stop the auto loop for this project/worktree
+      const runningCount = await autoModeService.stopAutoLoopForProject(
+        projectPath,
+        normalizedBranchName
+      );
+
+      logger.info(
+        `Stopped auto loop for ${worktreeDesc} in project: ${projectPath}, ${runningCount} features still running`
+      );
+
+      res.json({
+        success: true,
+        message: 'Auto mode stopped',
+        runningFeaturesCount: runningCount,
+        branchName: normalizedBranchName,
+      });
+    } catch (error) {
+      logError(error, 'Stop auto mode failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/auto-mode/routes/verify-feature.ts b/temp_repo/apps/server/src/routes/auto-mode/routes/verify-feature.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7c036812a1b9c6b218c75529a07a46fb52e33ddb
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/auto-mode/routes/verify-feature.ts
@@ -0,0 +1,32 @@
+/**
+ * POST /verify-feature endpoint - Verify a feature
+ */
+
+import type { Request, Response } from 'express';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createVerifyFeatureHandler(autoModeService: AutoModeServiceCompat) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureId } = req.body as {
+        projectPath: string;
+        featureId: string;
+      };
+
+      if (!projectPath || !featureId) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and featureId are required',
+        });
+        return;
+      }
+
+      const passes = await autoModeService.verifyFeature(projectPath, featureId);
+      res.json({ success: true, passes });
+    } catch (error) {
+      logError(error, 'Verify feature failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/backlog-plan/common.ts b/temp_repo/apps/server/src/routes/backlog-plan/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..27993e95ee7de0945467e3fe9187fad780224f1c
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/backlog-plan/common.ts
@@ -0,0 +1,174 @@
+/**
+ * Common utilities for backlog plan routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import { ensureAutomakerDir, getAutomakerDir } from '@automaker/platform';
+import * as secureFs from '../../lib/secure-fs.js';
+import path from 'path';
+import type { BacklogPlanResult } from '@automaker/types';
+
+const logger = createLogger('BacklogPlan');
+
+// State for tracking running generation
+let isRunning = false;
+let currentAbortController: AbortController | null = null;
+let runningDetails: {
+  projectPath: string;
+  prompt: string;
+  model?: string;
+  startedAt: string;
+} | null = null;
+
+const BACKLOG_PLAN_FILENAME = 'backlog-plan.json';
+
+export interface StoredBacklogPlan {
+  savedAt: string;
+  prompt: string;
+  model?: string;
+  result: BacklogPlanResult;
+}
+
+export function getBacklogPlanStatus(): { isRunning: boolean } {
+  return { isRunning };
+}
+
+export function setRunningState(running: boolean, abortController?: AbortController | null): void {
+  isRunning = running;
+  if (!running) {
+    runningDetails = null;
+  }
+  if (abortController !== undefined) {
+    currentAbortController = abortController;
+  }
+}
+
+export function setRunningDetails(
+  details: {
+    projectPath: string;
+    prompt: string;
+    model?: string;
+    startedAt: string;
+  } | null
+): void {
+  runningDetails = details;
+}
+
+export function getRunningDetails(): {
+  projectPath: string;
+  prompt: string;
+  model?: string;
+  startedAt: string;
+} | null {
+  return runningDetails;
+}
+
+function getBacklogPlanPath(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), BACKLOG_PLAN_FILENAME);
+}
+
+export async function saveBacklogPlan(projectPath: string, plan: StoredBacklogPlan): Promise<void> {
+  await ensureAutomakerDir(projectPath);
+  const filePath = getBacklogPlanPath(projectPath);
+  await secureFs.writeFile(filePath, JSON.stringify(plan, null, 2), 'utf-8');
+}
+
+export async function loadBacklogPlan(projectPath: string): Promise<StoredBacklogPlan | null> {
+  try {
+    const filePath = getBacklogPlanPath(projectPath);
+    const raw = await secureFs.readFile(filePath, 'utf-8');
+    const parsed = JSON.parse(raw as string) as StoredBacklogPlan;
+    if (!Array.isArray(parsed?.result?.changes)) {
+      return null;
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+export async function clearBacklogPlan(projectPath: string): Promise<void> {
+  try {
+    const filePath = getBacklogPlanPath(projectPath);
+    await secureFs.unlink(filePath);
+  } catch {
+    // ignore missing file
+  }
+}
+
+export function getAbortController(): AbortController | null {
+  return currentAbortController;
+}
+
+/**
+ * Map SDK/CLI errors to user-friendly messages
+ */
+export function mapBacklogPlanError(rawMessage: string): string {
+  // Claude Code spawn failures
+  if (
+    rawMessage.includes('Failed to spawn Claude Code process') ||
+    rawMessage.includes('spawn node ENOENT') ||
+    rawMessage.includes('Claude Code executable not found') ||
+    rawMessage.includes('Claude Code native binary not found')
+  ) {
+    return 'Claude CLI could not be launched. Make sure the Claude CLI is installed and available in PATH, or check that Node.js is correctly installed. Try running "which claude" or "claude --version" in your terminal to verify.';
+  }
+
+  // Claude Code process crash - extract exit code for diagnostics
+  if (rawMessage.includes('Claude Code process exited')) {
+    const exitCodeMatch = rawMessage.match(/exited with code (\d+)/);
+    const exitCode = exitCodeMatch ? exitCodeMatch[1] : 'unknown';
+    logger.error(`[BacklogPlan] Claude process exit code: ${exitCode}`);
+    return `Claude exited unexpectedly (exit code: ${exitCode}). This is usually a transient issue. Try again. If it keeps happening, re-run \`claude login\` or update your API key in Setup.`;
+  }
+
+  // Claude Code process killed by signal
+  if (rawMessage.includes('Claude Code process terminated by signal')) {
+    const signalMatch = rawMessage.match(/terminated by signal (\w+)/);
+    const signal = signalMatch ? signalMatch[1] : 'unknown';
+    logger.error(`[BacklogPlan] Claude process terminated by signal: ${signal}`);
+    return `Claude was terminated by signal ${signal}. This may indicate a resource issue. Try again.`;
+  }
+
+  // Rate limiting
+  if (rawMessage.toLowerCase().includes('rate limit') || rawMessage.includes('429')) {
+    return 'Rate limited. Please wait a moment and try again.';
+  }
+
+  // Network errors
+  if (
+    rawMessage.toLowerCase().includes('network') ||
+    rawMessage.toLowerCase().includes('econnrefused') ||
+    rawMessage.toLowerCase().includes('timeout')
+  ) {
+    return 'Network error. Check your internet connection and try again.';
+  }
+
+  // Authentication errors
+  if (
+    rawMessage.toLowerCase().includes('not authenticated') ||
+    rawMessage.toLowerCase().includes('unauthorized') ||
+    rawMessage.includes('401')
+  ) {
+    return 'Authentication failed. Please check your API key or run `claude login` to authenticate.';
+  }
+
+  // Return original message for unknown errors
+  return rawMessage;
+}
+
+export function getErrorMessage(error: unknown): string {
+  let rawMessage: string;
+  if (error instanceof Error) {
+    rawMessage = error.message;
+  } else {
+    rawMessage = String(error);
+  }
+  return mapBacklogPlanError(rawMessage);
+}
+
+export function logError(error: unknown, context: string): void {
+  logger.error(`[BacklogPlan] ${context}:`, getErrorMessage(error));
+}
+
+export { logger };
diff --git a/temp_repo/apps/server/src/routes/backlog-plan/generate-plan.ts b/temp_repo/apps/server/src/routes/backlog-plan/generate-plan.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4a1dc95afaea17ed3fa8f968ceb5f2eab71c000b
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/backlog-plan/generate-plan.ts
@@ -0,0 +1,491 @@
+/**
+ * Generate backlog plan using Claude AI
+ *
+ * Model is configurable via phaseModels.backlogPlanningModel in settings
+ * (defaults to Sonnet). Can be overridden per-call via model parameter.
+ *
+ * Includes automatic retry for transient CLI failures (e.g., "Claude Code
+ * process exited unexpectedly") to improve reliability.
+ */
+
+import type { EventEmitter } from '../../lib/events.js';
+import type { Feature, BacklogPlanResult } from '@automaker/types';
+import {
+  DEFAULT_PHASE_MODELS,
+  isCursorModel,
+  stripProviderPrefix,
+  type ThinkingLevel,
+  type SystemPromptPreset,
+} from '@automaker/types';
+import { resolvePhaseModel } from '@automaker/model-resolver';
+import { getCurrentBranch } from '@automaker/git-utils';
+import { FeatureLoader } from '../../services/feature-loader.js';
+import { ProviderFactory } from '../../providers/provider-factory.js';
+import { extractJsonWithArray } from '../../lib/json-extractor.js';
+import {
+  logger,
+  setRunningState,
+  setRunningDetails,
+  getErrorMessage,
+  saveBacklogPlan,
+} from './common.js';
+import type { SettingsService } from '../../services/settings-service.js';
+import {
+  getAutoLoadClaudeMdSetting,
+  getUseClaudeCodeSystemPromptSetting,
+  getPromptCustomization,
+  getPhaseModelWithOverrides,
+  getProviderByModelId,
+} from '../../lib/settings-helpers.js';
+
+/** Maximum number of retry attempts for transient CLI failures */
+const MAX_RETRIES = 2;
+/** Delay between retries in milliseconds */
+const RETRY_DELAY_MS = 2000;
+
+/**
+ * Check if an error is retryable (transient CLI process failure)
+ */
+function isRetryableError(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : String(error);
+  return (
+    message.includes('Claude Code process exited') ||
+    message.includes('Claude Code process terminated by signal')
+  );
+}
+
+const featureLoader = new FeatureLoader();
+
+/**
+ * Format features for the AI prompt
+ */
+function formatFeaturesForPrompt(features: Feature[]): string {
+  if (features.length === 0) {
+    return 'No features in backlog yet.';
+  }
+
+  return features
+    .map((f) => {
+      const deps = f.dependencies?.length ? `Dependencies: [${f.dependencies.join(', ')}]` : '';
+      const priority = f.priority !== undefined ? `Priority: ${f.priority}` : '';
+      return `- ID: ${f.id}
+  Title: ${f.title || 'Untitled'}
+  Description: ${f.description}
+  Category: ${f.category}
+  Status: ${f.status || 'backlog'}
+  ${priority}
+  ${deps}`.trim();
+    })
+    .join('\n\n');
+}
+
+/**
+ * Parse the AI response into a BacklogPlanResult
+ */
+function parsePlanResponse(response: string): BacklogPlanResult {
+  // Use shared JSON extraction utility for robust parsing
+  // extractJsonWithArray validates that 'changes' exists AND is an array
+  const parsed = extractJsonWithArray<BacklogPlanResult>(response, 'changes', {
+    logger,
+  });
+
+  if (parsed) {
+    return parsed;
+  }
+
+  // If parsing fails, log details and return an empty result
+  logger.warn('[BacklogPlan] Failed to parse AI response as JSON');
+  logger.warn('[BacklogPlan] Response text length:', response.length);
+  logger.warn('[BacklogPlan] Response preview:', response.slice(0, 500));
+  if (response.length === 0) {
+    logger.error('[BacklogPlan] Response text is EMPTY! No content was extracted from stream.');
+  }
+  return {
+    changes: [],
+    summary: 'Failed to parse AI response',
+    dependencyUpdates: [],
+  };
+}
+
+/**
+ * Try to parse a valid plan response without fallback behavior.
+ * Returns null if parsing fails.
+ */
+function tryParsePlanResponse(response: string): BacklogPlanResult | null {
+  if (!response || response.trim().length === 0) {
+    return null;
+  }
+  return extractJsonWithArray<BacklogPlanResult>(response, 'changes', { logger });
+}
+
+/**
+ * Choose the most reliable response text between streamed assistant chunks
+ * and provider final result payload.
+ */
+function selectBestResponseText(accumulatedText: string, providerResultText: string): string {
+  const hasAccumulated = accumulatedText.trim().length > 0;
+  const hasProviderResult = providerResultText.trim().length > 0;
+
+  if (!hasProviderResult) {
+    return accumulatedText;
+  }
+  if (!hasAccumulated) {
+    return providerResultText;
+  }
+
+  const accumulatedParsed = tryParsePlanResponse(accumulatedText);
+  const providerParsed = tryParsePlanResponse(providerResultText);
+
+  if (providerParsed && !accumulatedParsed) {
+    logger.info('[BacklogPlan] Using provider result (parseable JSON)');
+    return providerResultText;
+  }
+  if (accumulatedParsed && !providerParsed) {
+    logger.info('[BacklogPlan] Keeping accumulated text (parseable JSON)');
+    return accumulatedText;
+  }
+
+  if (providerResultText.length > accumulatedText.length) {
+    logger.info('[BacklogPlan] Using provider result (longer content)');
+    return providerResultText;
+  }
+
+  logger.info('[BacklogPlan] Keeping accumulated text (longer content)');
+  return accumulatedText;
+}
+
+/**
+ * Generate a backlog modification plan based on user prompt
+ */
+export async function generateBacklogPlan(
+  projectPath: string,
+  prompt: string,
+  events: EventEmitter,
+  abortController: AbortController,
+  settingsService?: SettingsService,
+  model?: string,
+  branchName?: string
+): Promise<BacklogPlanResult> {
+  try {
+    // Load current features
+    const allFeatures = await featureLoader.getAll(projectPath);
+
+    // Filter features by branch if specified (worktree-scoped backlog)
+    let features: Feature[];
+    if (branchName) {
+      // Determine the primary branch so unassigned features show for the main worktree
+      let primaryBranch: string | null = null;
+      try {
+        primaryBranch = await getCurrentBranch(projectPath);
+      } catch {
+        // If git fails, fall back to 'main' so unassigned features are visible
+        // when branchName matches a common default branch name
+        primaryBranch = 'main';
+      }
+      const isMainBranch = branchName === primaryBranch;
+
+      features = allFeatures.filter((f) => {
+        if (!f.branchName) {
+          // Unassigned features belong to the main/primary worktree
+          return isMainBranch;
+        }
+        return f.branchName === branchName;
+      });
+      logger.info(
+        `[BacklogPlan] Filtered to ${features.length}/${allFeatures.length} features for branch: ${branchName}`
+      );
+    } else {
+      features = allFeatures;
+    }
+
+    events.emit('backlog-plan:event', {
+      type: 'backlog_plan_progress',
+      content: `Loaded ${features.length} features from backlog`,
+    });
+
+    // Load prompts from settings
+    const prompts = await getPromptCustomization(settingsService, '[BacklogPlan]');
+
+    // Build the system prompt
+    const systemPrompt = prompts.backlogPlan.systemPrompt;
+
+    // Build the user prompt from template
+    const currentFeatures = formatFeaturesForPrompt(features);
+    const userPrompt = prompts.backlogPlan.userPromptTemplate
+      .replace('{{currentFeatures}}', currentFeatures)
+      .replace('{{userRequest}}', prompt);
+
+    events.emit('backlog-plan:event', {
+      type: 'backlog_plan_progress',
+      content: 'Generating plan with AI...',
+    });
+
+    // Get the model to use from settings or provided override with provider info
+    let effectiveModel = model;
+    let thinkingLevel: ThinkingLevel | undefined;
+    let claudeCompatibleProvider: import('@automaker/types').ClaudeCompatibleProvider | undefined;
+    let credentials: import('@automaker/types').Credentials | undefined;
+
+    if (effectiveModel) {
+      // Use explicit override - resolve model alias and get credentials
+      const resolved = resolvePhaseModel({ model: effectiveModel });
+      effectiveModel = resolved.model;
+      thinkingLevel = resolved.thinkingLevel;
+      credentials = await settingsService?.getCredentials();
+      // Resolve Claude-compatible provider when client sends a model (e.g. MiniMax, GLM)
+      if (settingsService) {
+        const providerResult = await getProviderByModelId(
+          effectiveModel,
+          settingsService,
+          '[BacklogPlan]'
+        );
+        if (providerResult.provider) {
+          claudeCompatibleProvider = providerResult.provider;
+          if (providerResult.credentials) {
+            credentials = providerResult.credentials;
+          }
+        }
+        // Fallback: use phase settings provider if model lookup found nothing (e.g. model
+        // string format differs from provider's model id, but backlog planning phase has providerId).
+        if (!claudeCompatibleProvider) {
+          const phaseResult = await getPhaseModelWithOverrides(
+            'backlogPlanningModel',
+            settingsService,
+            projectPath,
+            '[BacklogPlan]'
+          );
+          const phaseResolved = resolvePhaseModel(phaseResult.phaseModel);
+          if (phaseResult.provider && phaseResolved.model === effectiveModel) {
+            claudeCompatibleProvider = phaseResult.provider;
+            credentials = phaseResult.credentials ?? credentials;
+          }
+        }
+      }
+    } else if (settingsService) {
+      // Use settings-based model with provider info
+      const phaseResult = await getPhaseModelWithOverrides(
+        'backlogPlanningModel',
+        settingsService,
+        projectPath,
+        '[BacklogPlan]'
+      );
+      const resolved = resolvePhaseModel(phaseResult.phaseModel);
+      effectiveModel = resolved.model;
+      thinkingLevel = resolved.thinkingLevel;
+      claudeCompatibleProvider = phaseResult.provider;
+      credentials = phaseResult.credentials;
+    } else {
+      // Fallback to defaults
+      const resolved = resolvePhaseModel(DEFAULT_PHASE_MODELS.backlogPlanningModel);
+      effectiveModel = resolved.model;
+      thinkingLevel = resolved.thinkingLevel;
+    }
+    logger.info(
+      '[BacklogPlan] Using model:',
+      effectiveModel,
+      claudeCompatibleProvider ? `via provider: ${claudeCompatibleProvider.name}` : 'direct API'
+    );
+
+    const provider = ProviderFactory.getProviderForModel(effectiveModel);
+    // Strip provider prefix - providers expect bare model IDs
+    const bareModel = stripProviderPrefix(effectiveModel);
+
+    // Get autoLoadClaudeMd and useClaudeCodeSystemPrompt settings
+    const autoLoadClaudeMd = await getAutoLoadClaudeMdSetting(
+      projectPath,
+      settingsService,
+      '[BacklogPlan]'
+    );
+    const useClaudeCodeSystemPrompt = await getUseClaudeCodeSystemPromptSetting(
+      projectPath,
+      settingsService,
+      '[BacklogPlan]'
+    );
+
+    // For Cursor models, we need to combine prompts with explicit instructions
+    // because Cursor doesn't support systemPrompt separation like Claude SDK
+    let finalPrompt = userPrompt;
+    let finalSystemPrompt: string | SystemPromptPreset | undefined = systemPrompt;
+    let finalSettingSources: Array<'user' | 'project' | 'local'> | undefined;
+
+    if (isCursorModel(effectiveModel)) {
+      logger.info('[BacklogPlan] Using Cursor model - adding explicit no-file-write instructions');
+      finalPrompt = `${systemPrompt}
+
+CRITICAL INSTRUCTIONS:
+1. DO NOT write any files. Return the JSON in your response only.
+2. DO NOT use Write, Edit, or any file modification tools.
+3. Respond with ONLY a JSON object - no explanations, no markdown, just raw JSON.
+4. Your entire response should be valid JSON starting with { and ending with }.
+5. No text before or after the JSON object.
+
+${userPrompt}`;
+      finalSystemPrompt = undefined; // System prompt is now embedded in the user prompt
+    } else if (claudeCompatibleProvider) {
+      // Claude-compatible providers (MiniMax, GLM, etc.) use a plain API; do not use
+      // the claude_code preset (which is for Claude CLI/subprocess and can break the request).
+      finalSystemPrompt = systemPrompt;
+    } else if (useClaudeCodeSystemPrompt) {
+      // Use claude_code preset for native Claude so the SDK subprocess
+      // authenticates via CLI OAuth or API key the same way all other SDK calls do.
+      finalSystemPrompt = {
+        type: 'preset',
+        preset: 'claude_code',
+        append: systemPrompt,
+      };
+    }
+    // Include settingSources when autoLoadClaudeMd is enabled
+    if (autoLoadClaudeMd) {
+      finalSettingSources = ['user', 'project'];
+    }
+
+    // Execute the query with retry logic for transient CLI failures
+    const queryOptions = {
+      prompt: finalPrompt,
+      model: bareModel,
+      cwd: projectPath,
+      systemPrompt: finalSystemPrompt,
+      maxTurns: 1,
+      tools: [] as string[], // Disable all built-in tools - plan generation only needs text output
+      abortController,
+      settingSources: finalSettingSources,
+      thinkingLevel, // Pass thinking level for extended thinking
+      claudeCompatibleProvider, // Pass provider for alternative endpoint configuration
+      credentials, // Pass credentials for resolving 'credentials' apiKeySource
+    };
+
+    let responseText = '';
+    let bestResponseText = ''; // Preserve best response across all retry attempts
+    let recoveredResult: BacklogPlanResult | null = null;
+    let lastError: unknown = null;
+
+    for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
+      if (abortController.signal.aborted) {
+        throw new Error('Generation aborted');
+      }
+
+      if (attempt > 0) {
+        logger.info(
+          `[BacklogPlan] Retry attempt ${attempt}/${MAX_RETRIES} after transient failure`
+        );
+        events.emit('backlog-plan:event', {
+          type: 'backlog_plan_progress',
+          content: `Retrying... (attempt ${attempt + 1}/${MAX_RETRIES + 1})`,
+        });
+        await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY_MS));
+      }
+
+      let accumulatedText = '';
+      let providerResultText = '';
+
+      try {
+        const stream = provider.executeQuery(queryOptions);
+
+        for await (const msg of stream) {
+          if (abortController.signal.aborted) {
+            throw new Error('Generation aborted');
+          }
+
+          if (msg.type === 'assistant') {
+            if (msg.message?.content) {
+              for (const block of msg.message.content) {
+                if (block.type === 'text') {
+                  accumulatedText += block.text;
+                }
+              }
+            }
+          } else if (msg.type === 'result' && msg.subtype === 'success' && msg.result) {
+            providerResultText = msg.result;
+            logger.info(
+              '[BacklogPlan] Received result from provider, length:',
+              providerResultText.length
+            );
+            logger.info('[BacklogPlan] Accumulated response length:', accumulatedText.length);
+          }
+        }
+
+        responseText = selectBestResponseText(accumulatedText, providerResultText);
+
+        // If we got here, the stream completed successfully
+        lastError = null;
+        break;
+      } catch (error) {
+        lastError = error;
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        responseText = selectBestResponseText(accumulatedText, providerResultText);
+
+        // Preserve the best response text across all attempts so that if a retry
+        // crashes immediately (empty response), we can still recover from an earlier attempt
+        bestResponseText = selectBestResponseText(bestResponseText, responseText);
+
+        // Claude SDK can occasionally exit non-zero after emitting a complete response.
+        // If we already have valid JSON, recover instead of failing the entire planning flow.
+        if (isRetryableError(error)) {
+          const parsed = tryParsePlanResponse(bestResponseText);
+          if (parsed) {
+            logger.warn(
+              '[BacklogPlan] Recovered from transient CLI exit using accumulated valid response'
+            );
+            recoveredResult = parsed;
+            lastError = null;
+            break;
+          }
+
+          // On final retryable failure, degrade gracefully if we have text from any attempt.
+          if (attempt >= MAX_RETRIES && bestResponseText.trim().length > 0) {
+            logger.warn(
+              '[BacklogPlan] Final retryable CLI failure with non-empty response, attempting fallback parse'
+            );
+            recoveredResult = parsePlanResponse(bestResponseText);
+            lastError = null;
+            break;
+          }
+        }
+
+        // Only retry on transient CLI failures, not on user aborts or other errors
+        if (!isRetryableError(error) || attempt >= MAX_RETRIES) {
+          throw error;
+        }
+
+        logger.warn(
+          `[BacklogPlan] Transient CLI failure (attempt ${attempt + 1}/${MAX_RETRIES + 1}): ${errorMessage}`
+        );
+      }
+    }
+
+    // If we exhausted retries, throw the last error
+    if (lastError) {
+      throw lastError;
+    }
+
+    // Parse the response
+    const result = recoveredResult ?? parsePlanResponse(responseText);
+
+    await saveBacklogPlan(projectPath, {
+      savedAt: new Date().toISOString(),
+      prompt,
+      model: effectiveModel,
+      result,
+    });
+
+    events.emit('backlog-plan:event', {
+      type: 'backlog_plan_complete',
+      result,
+    });
+
+    return result;
+  } catch (error) {
+    const errorMessage = getErrorMessage(error);
+    logger.error('[BacklogPlan] Generation failed:', errorMessage);
+
+    events.emit('backlog-plan:event', {
+      type: 'backlog_plan_error',
+      error: errorMessage,
+    });
+
+    throw error;
+  } finally {
+    setRunningState(false, null);
+    setRunningDetails(null);
+  }
+}
diff --git a/temp_repo/apps/server/src/routes/backlog-plan/index.ts b/temp_repo/apps/server/src/routes/backlog-plan/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d1b7e424d98d077eaca27d864886c0dd7714d248
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/backlog-plan/index.ts
@@ -0,0 +1,32 @@
+/**
+ * Backlog Plan routes - HTTP API for AI-assisted backlog modification
+ */
+
+import { Router } from 'express';
+import type { EventEmitter } from '../../lib/events.js';
+import { validatePathParams } from '../../middleware/validate-paths.js';
+import { createGenerateHandler } from './routes/generate.js';
+import { createStopHandler } from './routes/stop.js';
+import { createStatusHandler } from './routes/status.js';
+import { createApplyHandler } from './routes/apply.js';
+import { createClearHandler } from './routes/clear.js';
+import type { SettingsService } from '../../services/settings-service.js';
+
+export function createBacklogPlanRoutes(
+  events: EventEmitter,
+  settingsService?: SettingsService
+): Router {
+  const router = Router();
+
+  router.post(
+    '/generate',
+    validatePathParams('projectPath'),
+    createGenerateHandler(events, settingsService)
+  );
+  router.post('/stop', createStopHandler());
+  router.get('/status', validatePathParams('projectPath'), createStatusHandler());
+  router.post('/apply', validatePathParams('projectPath'), createApplyHandler(settingsService));
+  router.post('/clear', validatePathParams('projectPath'), createClearHandler());
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/backlog-plan/routes/apply.ts b/temp_repo/apps/server/src/routes/backlog-plan/routes/apply.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6efd1658016e407cebd7fbf2cdf8c0f032f88cea
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/backlog-plan/routes/apply.ts
@@ -0,0 +1,213 @@
+/**
+ * POST /apply endpoint - Apply a backlog plan
+ */
+
+import type { Request, Response } from 'express';
+import { resolvePhaseModel } from '@automaker/model-resolver';
+import type { BacklogPlanResult, PhaseModelEntry, PlanningMode } from '@automaker/types';
+import { FeatureLoader } from '../../../services/feature-loader.js';
+import type { SettingsService } from '../../../services/settings-service.js';
+import { clearBacklogPlan, getErrorMessage, logError, logger } from '../common.js';
+
+const featureLoader = new FeatureLoader();
+
+function normalizePhaseModelEntry(
+  entry: PhaseModelEntry | string | undefined | null
+): PhaseModelEntry | undefined {
+  if (!entry) return undefined;
+  if (typeof entry === 'string') return { model: entry };
+  return entry;
+}
+
+export function createApplyHandler(settingsService?: SettingsService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const {
+        projectPath,
+        plan,
+        branchName: rawBranchName,
+      } = req.body as {
+        projectPath: string;
+        plan: BacklogPlanResult;
+        branchName?: string;
+      };
+
+      // Validate branchName: must be undefined or a non-empty trimmed string
+      const branchName =
+        typeof rawBranchName === 'string' && rawBranchName.trim().length > 0
+          ? rawBranchName.trim()
+          : undefined;
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath required' });
+        return;
+      }
+
+      if (!plan || !plan.changes) {
+        res.status(400).json({ success: false, error: 'plan with changes required' });
+        return;
+      }
+
+      let defaultPlanningMode: PlanningMode = 'skip';
+      let defaultRequirePlanApproval = false;
+      let defaultModelEntry: PhaseModelEntry | undefined;
+
+      if (settingsService) {
+        const globalSettings = await settingsService.getGlobalSettings();
+        const projectSettings = await settingsService.getProjectSettings(projectPath);
+
+        defaultPlanningMode = globalSettings.defaultPlanningMode ?? 'skip';
+        defaultRequirePlanApproval = globalSettings.defaultRequirePlanApproval ?? false;
+        defaultModelEntry = normalizePhaseModelEntry(
+          projectSettings.defaultFeatureModel ?? globalSettings.defaultFeatureModel
+        );
+      }
+
+      const resolvedDefaultModel = resolvePhaseModel(defaultModelEntry);
+
+      const appliedChanges: string[] = [];
+
+      // Load current features for dependency validation
+      const allFeatures = await featureLoader.getAll(projectPath);
+      const featureMap = new Map(allFeatures.map((f) => [f.id, f]));
+
+      // Process changes in order: deletes first, then adds, then updates
+      // This ensures we can remove dependencies before they cause issues
+
+      // 1. First pass: Handle deletes
+      const deletions = plan.changes.filter((c) => c.type === 'delete');
+      for (const change of deletions) {
+        if (!change.featureId) continue;
+
+        try {
+          // Before deleting, update any features that depend on this one
+          for (const feature of allFeatures) {
+            if (feature.dependencies?.includes(change.featureId)) {
+              const newDeps = feature.dependencies.filter((d) => d !== change.featureId);
+              await featureLoader.update(projectPath, feature.id, { dependencies: newDeps });
+              // Mutate the in-memory feature object so subsequent deletions use the updated
+              // dependency list and don't reintroduce already-removed dependency IDs.
+              feature.dependencies = newDeps;
+              logger.info(
+                `[BacklogPlan] Removed dependency ${change.featureId} from ${feature.id}`
+              );
+            }
+          }
+
+          // Now delete the feature
+          const deleted = await featureLoader.delete(projectPath, change.featureId);
+          if (deleted) {
+            appliedChanges.push(`deleted:${change.featureId}`);
+            featureMap.delete(change.featureId);
+            logger.info(`[BacklogPlan] Deleted feature ${change.featureId}`);
+          }
+        } catch (error) {
+          logger.error(
+            `[BacklogPlan] Failed to delete ${change.featureId}:`,
+            getErrorMessage(error)
+          );
+        }
+      }
+
+      // 2. Second pass: Handle adds
+      const additions = plan.changes.filter((c) => c.type === 'add');
+      for (const change of additions) {
+        if (!change.feature) continue;
+
+        try {
+          const effectivePlanningMode = change.feature.planningMode ?? defaultPlanningMode;
+          const effectiveRequirePlanApproval =
+            effectivePlanningMode === 'skip' || effectivePlanningMode === 'lite'
+              ? false
+              : (change.feature.requirePlanApproval ?? defaultRequirePlanApproval);
+
+          // Create the new feature - use the AI-generated ID if provided
+          const newFeature = await featureLoader.create(projectPath, {
+            id: change.feature.id, // Use descriptive ID from AI if provided
+            title: change.feature.title,
+            description: change.feature.description || '',
+            category: change.feature.category || 'Uncategorized',
+            dependencies: change.feature.dependencies,
+            priority: change.feature.priority,
+            status: 'backlog',
+            model: change.feature.model ?? resolvedDefaultModel.model,
+            thinkingLevel: change.feature.thinkingLevel ?? resolvedDefaultModel.thinkingLevel,
+            reasoningEffort: change.feature.reasoningEffort ?? resolvedDefaultModel.reasoningEffort,
+            providerId: change.feature.providerId ?? resolvedDefaultModel.providerId,
+            planningMode: effectivePlanningMode,
+            requirePlanApproval: effectiveRequirePlanApproval,
+            branchName,
+          });
+
+          appliedChanges.push(`added:${newFeature.id}`);
+          featureMap.set(newFeature.id, newFeature);
+          logger.info(`[BacklogPlan] Created feature ${newFeature.id}: ${newFeature.title}`);
+        } catch (error) {
+          logger.error(`[BacklogPlan] Failed to add feature:`, getErrorMessage(error));
+        }
+      }
+
+      // 3. Third pass: Handle updates
+      const updates = plan.changes.filter((c) => c.type === 'update');
+      for (const change of updates) {
+        if (!change.featureId || !change.feature) continue;
+
+        try {
+          const updated = await featureLoader.update(projectPath, change.featureId, change.feature);
+          appliedChanges.push(`updated:${change.featureId}`);
+          featureMap.set(change.featureId, updated);
+          logger.info(`[BacklogPlan] Updated feature ${change.featureId}`);
+        } catch (error) {
+          logger.error(
+            `[BacklogPlan] Failed to update ${change.featureId}:`,
+            getErrorMessage(error)
+          );
+        }
+      }
+
+      // 4. Apply dependency updates from the plan
+      if (plan.dependencyUpdates) {
+        for (const depUpdate of plan.dependencyUpdates) {
+          try {
+            const feature = featureMap.get(depUpdate.featureId);
+            if (feature) {
+              const currentDeps = feature.dependencies || [];
+              const newDeps = currentDeps
+                .filter((d) => !depUpdate.removedDependencies.includes(d))
+                .concat(depUpdate.addedDependencies.filter((d) => !currentDeps.includes(d)));
+
+              await featureLoader.update(projectPath, depUpdate.featureId, {
+                dependencies: newDeps,
+              });
+              logger.info(`[BacklogPlan] Updated dependencies for ${depUpdate.featureId}`);
+            }
+          } catch (error) {
+            logger.error(
+              `[BacklogPlan] Failed to update dependencies for ${depUpdate.featureId}:`,
+              getErrorMessage(error)
+            );
+          }
+        }
+      }
+
+      // Clear the plan before responding
+      try {
+        await clearBacklogPlan(projectPath);
+      } catch (error) {
+        logger.warn(
+          `[BacklogPlan] Failed to clear backlog plan after apply:`,
+          getErrorMessage(error)
+        );
+        // Don't throw - operation succeeded, just cleanup failed
+      }
+
+      res.json({
+        success: true,
+        appliedChanges,
+      });
+    } catch (error) {
+      logError(error, 'Apply backlog plan failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/backlog-plan/routes/clear.ts b/temp_repo/apps/server/src/routes/backlog-plan/routes/clear.ts
new file mode 100644
index 0000000000000000000000000000000000000000..855dc5075804491a95c3535ed353f80d99912da3
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/backlog-plan/routes/clear.ts
@@ -0,0 +1,25 @@
+/**
+ * POST /clear endpoint - Clear saved backlog plan
+ */
+
+import type { Request, Response } from 'express';
+import { clearBacklogPlan, getErrorMessage, logError } from '../common.js';
+
+export function createClearHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as { projectPath: string };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath required' });
+        return;
+      }
+
+      await clearBacklogPlan(projectPath);
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Clear backlog plan failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/backlog-plan/routes/generate.ts b/temp_repo/apps/server/src/routes/backlog-plan/routes/generate.ts
new file mode 100644
index 0000000000000000000000000000000000000000..befe96e8b727032833194b3abec1a9aa7b7e258d
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/backlog-plan/routes/generate.ts
@@ -0,0 +1,77 @@
+/**
+ * POST /generate endpoint - Generate a backlog plan
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import {
+  getBacklogPlanStatus,
+  setRunningState,
+  setRunningDetails,
+  getErrorMessage,
+  logError,
+} from '../common.js';
+import { generateBacklogPlan } from '../generate-plan.js';
+import type { SettingsService } from '../../../services/settings-service.js';
+
+export function createGenerateHandler(events: EventEmitter, settingsService?: SettingsService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, prompt, model, branchName } = req.body as {
+        projectPath: string;
+        prompt: string;
+        model?: string;
+        branchName?: string;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath required' });
+        return;
+      }
+
+      if (!prompt) {
+        res.status(400).json({ success: false, error: 'prompt required' });
+        return;
+      }
+
+      const { isRunning } = getBacklogPlanStatus();
+      if (isRunning) {
+        res.json({
+          success: false,
+          error: 'Backlog plan generation is already running',
+        });
+        return;
+      }
+
+      const abortController = new AbortController();
+      setRunningState(true, abortController);
+      setRunningDetails({
+        projectPath,
+        prompt,
+        model,
+        startedAt: new Date().toISOString(),
+      });
+
+      // Start generation in background
+      // Note: generateBacklogPlan handles its own error event emission
+      // and state cleanup in its finally block, so we only log here
+      generateBacklogPlan(
+        projectPath,
+        prompt,
+        events,
+        abortController,
+        settingsService,
+        model,
+        branchName
+      ).catch((error) => {
+        // Just log - error event already emitted by generateBacklogPlan
+        logError(error, 'Generate backlog plan failed (background)');
+      });
+
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Generate backlog plan failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/backlog-plan/routes/status.ts b/temp_repo/apps/server/src/routes/backlog-plan/routes/status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5f20f1e2e7b8ef9786339166923ce7b896883bdc
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/backlog-plan/routes/status.ts
@@ -0,0 +1,20 @@
+/**
+ * GET /status endpoint - Get backlog plan generation status
+ */
+
+import type { Request, Response } from 'express';
+import { getBacklogPlanStatus, loadBacklogPlan, getErrorMessage, logError } from '../common.js';
+
+export function createStatusHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const status = getBacklogPlanStatus();
+      const projectPath = typeof req.query.projectPath === 'string' ? req.query.projectPath : '';
+      const savedPlan = projectPath ? await loadBacklogPlan(projectPath) : null;
+      res.json({ success: true, ...status, savedPlan });
+    } catch (error) {
+      logError(error, 'Get backlog plan status failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/backlog-plan/routes/stop.ts b/temp_repo/apps/server/src/routes/backlog-plan/routes/stop.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d969f1b1ee6f86173892709b590b55ef0edab852
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/backlog-plan/routes/stop.ts
@@ -0,0 +1,29 @@
+/**
+ * POST /stop endpoint - Stop the current backlog plan generation
+ */
+
+import type { Request, Response } from 'express';
+import {
+  getAbortController,
+  setRunningState,
+  setRunningDetails,
+  getErrorMessage,
+  logError,
+} from '../common.js';
+
+export function createStopHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const abortController = getAbortController();
+      if (abortController) {
+        abortController.abort();
+        setRunningState(false, null);
+        setRunningDetails(null);
+      }
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Stop backlog plan failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/claude/index.ts b/temp_repo/apps/server/src/routes/claude/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ec35ca1baffdf9868c6b10e1961c7d5c9ae006c0
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/claude/index.ts
@@ -0,0 +1,57 @@
+import { Router, Request, Response } from 'express';
+import { ClaudeUsageService } from '../../services/claude-usage-service.js';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('Claude');
+
+export function createClaudeRoutes(service: ClaudeUsageService): Router {
+  const router = Router();
+
+  // Get current usage (fetches from Claude CLI)
+  router.get('/usage', async (req: Request, res: Response) => {
+    try {
+      // Check if Claude CLI is available first
+      const isAvailable = await service.isAvailable();
+      if (!isAvailable) {
+        // IMPORTANT: This endpoint is behind Automaker session auth already.
+        // Use a 200 + error payload for Claude CLI issues so the UI doesn't
+        // interpret it as an invalid Automaker session (401/403 triggers logout).
+        res.status(200).json({
+          error: 'Claude CLI not found',
+          message: "Please install Claude Code CLI and run 'claude login' to authenticate",
+        });
+        return;
+      }
+
+      const usage = await service.fetchUsageData();
+      res.json(usage);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+
+      if (message.includes('Authentication required') || message.includes('token_expired')) {
+        // Do NOT use 401/403 here: that status code is reserved for Automaker session auth.
+        res.status(200).json({
+          error: 'Authentication required',
+          message: "Please run 'claude login' to authenticate",
+        });
+      } else if (message.includes('TRUST_PROMPT_PENDING')) {
+        // Trust prompt appeared but couldn't be auto-approved
+        res.status(200).json({
+          error: 'Trust prompt pending',
+          message:
+            'Claude CLI needs folder permission. Please run "claude" in your terminal and approve access.',
+        });
+      } else if (message.includes('timed out')) {
+        res.status(200).json({
+          error: 'Command timed out',
+          message: 'The Claude CLI took too long to respond',
+        });
+      } else {
+        logger.error('Error fetching usage:', error);
+        res.status(500).json({ error: message });
+      }
+    }
+  });
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/claude/types.ts b/temp_repo/apps/server/src/routes/claude/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bd8927462d2cfcc852eb06bb37040cb62e883aeb
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/claude/types.ts
@@ -0,0 +1,35 @@
+/**
+ * Claude Usage types for CLI-based usage tracking
+ */
+
+export type ClaudeUsage = {
+  sessionTokensUsed: number;
+  sessionLimit: number;
+  sessionPercentage: number;
+  sessionResetTime: string; // ISO date string
+  sessionResetText: string; // Raw text like "Resets 10:59am (Asia/Dubai)"
+
+  weeklyTokensUsed: number;
+  weeklyLimit: number;
+  weeklyPercentage: number;
+  weeklyResetTime: string; // ISO date string
+  weeklyResetText: string; // Raw text like "Resets Dec 22 at 7:59pm (Asia/Dubai)"
+
+  sonnetWeeklyTokensUsed: number;
+  sonnetWeeklyPercentage: number;
+  sonnetResetText: string; // Raw text like "Resets Dec 27 at 9:59am (Asia/Dubai)"
+
+  costUsed: number | null;
+  costLimit: number | null;
+  costCurrency: string | null;
+
+  lastUpdated: string; // ISO date string
+  userTimezone: string;
+};
+
+export type ClaudeStatus = {
+  indicator: {
+    color: 'green' | 'yellow' | 'orange' | 'red' | 'gray';
+  };
+  description: string;
+};
diff --git a/temp_repo/apps/server/src/routes/codex/index.ts b/temp_repo/apps/server/src/routes/codex/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..005a81bc4109ae86f12f9dc0ef6c08d6e8a34298
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/codex/index.ts
@@ -0,0 +1,90 @@
+import { Router, Request, Response } from 'express';
+import { CodexUsageService } from '../../services/codex-usage-service.js';
+import { CodexModelCacheService } from '../../services/codex-model-cache-service.js';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('Codex');
+
+export function createCodexRoutes(
+  usageService: CodexUsageService,
+  modelCacheService: CodexModelCacheService
+): Router {
+  const router = Router();
+
+  // Get current usage (attempts to fetch from Codex CLI)
+  router.get('/usage', async (_req: Request, res: Response) => {
+    try {
+      // Check if Codex CLI is available first
+      const isAvailable = await usageService.isAvailable();
+      if (!isAvailable) {
+        // IMPORTANT: This endpoint is behind Automaker session auth already.
+        // Use a 200 + error payload for Codex CLI issues so the UI doesn't
+        // interpret it as an invalid Automaker session (401/403 triggers logout).
+        res.status(200).json({
+          error: 'Codex CLI not found',
+          message: "Please install Codex CLI and run 'codex login' to authenticate",
+        });
+        return;
+      }
+
+      const usage = await usageService.fetchUsageData();
+      res.json(usage);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+
+      if (message.includes('not authenticated') || message.includes('login')) {
+        // Do NOT use 401/403 here: that status code is reserved for Automaker session auth.
+        res.status(200).json({
+          error: 'Authentication required',
+          message: "Please run 'codex login' to authenticate",
+        });
+      } else if (message.includes('not available') || message.includes('does not provide')) {
+        // This is the expected case - Codex doesn't provide usage stats
+        res.status(200).json({
+          error: 'Usage statistics not available',
+          message: message,
+        });
+      } else if (message.includes('timed out')) {
+        res.status(200).json({
+          error: 'Command timed out',
+          message: 'The Codex CLI took too long to respond',
+        });
+      } else {
+        logger.error('Error fetching usage:', error);
+        res.status(500).json({ error: message });
+      }
+    }
+  });
+
+  // Get available Codex models (cached)
+  router.get('/models', async (req: Request, res: Response) => {
+    try {
+      const forceRefresh = req.query.refresh === 'true';
+      const { models, cachedAt } = await modelCacheService.getModelsWithMetadata(forceRefresh);
+
+      if (models.length === 0) {
+        res.status(503).json({
+          success: false,
+          error: 'Codex CLI not available or not authenticated',
+          message: "Please install Codex CLI and run 'codex login' to authenticate",
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        models,
+        cachedAt,
+      });
+    } catch (error) {
+      logger.error('Error fetching models:', error);
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      res.status(500).json({
+        success: false,
+        error: message,
+      });
+    }
+  });
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/common.ts b/temp_repo/apps/server/src/routes/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..14589ffd81ffce765cbda775c5adcca09f8c4ee4
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/common.ts
@@ -0,0 +1,38 @@
+/**
+ * Common utilities shared across all route modules
+ */
+
+import { createLogger } from '@automaker/utils';
+
+// Re-export git utilities from shared package
+export {
+  BINARY_EXTENSIONS,
+  GIT_STATUS_MAP,
+  type FileStatus,
+  isGitRepo,
+  parseGitStatus,
+  generateSyntheticDiffForNewFile,
+  appendUntrackedFileDiffs,
+  listAllFilesInDirectory,
+  generateDiffsForNonGitDirectory,
+  getGitRepositoryDiffs,
+} from '@automaker/git-utils';
+
+type Logger = ReturnType<typeof createLogger>;
+
+/**
+ * Get error message from error object
+ */
+export function getErrorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : 'Unknown error';
+}
+
+/**
+ * Create a logError function for a specific logger
+ * This ensures consistent error logging format across all routes
+ */
+export function createLogError(logger: Logger) {
+  return (error: unknown, context: string): void => {
+    logger.error(`❌ ${context}:`, error);
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/context/index.ts b/temp_repo/apps/server/src/routes/context/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3f49f1c178f511ceaea3bf16860956b473facf5b
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/context/index.ts
@@ -0,0 +1,26 @@
+/**
+ * Context routes - HTTP API for context file operations
+ *
+ * Provides endpoints for managing context files including
+ * AI-powered image description generation.
+ */
+
+import { Router } from 'express';
+import { createDescribeImageHandler } from './routes/describe-image.js';
+import { createDescribeFileHandler } from './routes/describe-file.js';
+import type { SettingsService } from '../../services/settings-service.js';
+
+/**
+ * Create the context router
+ *
+ * @param settingsService - Optional settings service for loading autoLoadClaudeMd setting
+ * @returns Express router with context endpoints
+ */
+export function createContextRoutes(settingsService?: SettingsService): Router {
+  const router = Router();
+
+  router.post('/describe-image', createDescribeImageHandler(settingsService));
+  router.post('/describe-file', createDescribeFileHandler(settingsService));
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/context/routes/describe-file.ts b/temp_repo/apps/server/src/routes/context/routes/describe-file.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a59dfb7437c9d9fd5a41185b30c6dfa87d73c62b
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/context/routes/describe-file.ts
@@ -0,0 +1,220 @@
+/**
+ * POST /context/describe-file endpoint - Generate description for a text file
+ *
+ * Uses AI to analyze a text file and generate a concise description
+ * suitable for context file metadata. Model is configurable via
+ * phaseModels.fileDescriptionModel in settings (defaults to Haiku).
+ *
+ * SECURITY: This endpoint validates file paths against ALLOWED_ROOT_DIRECTORY
+ * and reads file content directly (not via Claude's Read tool) to prevent
+ * arbitrary file reads and prompt injection attacks.
+ */
+
+import type { Request, Response } from 'express';
+import { createLogger } from '@automaker/utils';
+import { PathNotAllowedError } from '@automaker/platform';
+import { resolvePhaseModel } from '@automaker/model-resolver';
+import { simpleQuery } from '../../../providers/simple-query-service.js';
+import * as secureFs from '../../../lib/secure-fs.js';
+import * as path from 'path';
+import type { SettingsService } from '../../../services/settings-service.js';
+import {
+  getAutoLoadClaudeMdSetting,
+  getPromptCustomization,
+  getPhaseModelWithOverrides,
+} from '../../../lib/settings-helpers.js';
+
+const logger = createLogger('DescribeFile');
+
+/**
+ * Request body for the describe-file endpoint
+ */
+interface DescribeFileRequestBody {
+  /** Path to the file */
+  filePath: string;
+}
+
+/**
+ * Success response from the describe-file endpoint
+ */
+interface DescribeFileSuccessResponse {
+  success: true;
+  description: string;
+}
+
+/**
+ * Error response from the describe-file endpoint
+ */
+interface DescribeFileErrorResponse {
+  success: false;
+  error: string;
+}
+
+/**
+ * Create the describe-file request handler
+ *
+ * @param settingsService - Optional settings service for loading autoLoadClaudeMd setting
+ * @returns Express request handler for file description
+ */
+export function createDescribeFileHandler(
+  settingsService?: SettingsService
+): (req: Request, res: Response) => Promise<void> {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { filePath } = req.body as DescribeFileRequestBody;
+
+      // Validate required fields
+      if (!filePath || typeof filePath !== 'string') {
+        const response: DescribeFileErrorResponse = {
+          success: false,
+          error: 'filePath is required and must be a string',
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      logger.info(`Starting description generation for: ${filePath}`);
+
+      // Resolve the path for logging and cwd derivation
+      const resolvedPath = secureFs.resolvePath(filePath);
+
+      // Read file content using secureFs (validates path against ALLOWED_ROOT_DIRECTORY)
+      // This prevents arbitrary file reads (e.g., /etc/passwd, ~/.ssh/id_rsa)
+      // and prompt injection attacks where malicious filePath values could inject instructions
+      let fileContent: string;
+      try {
+        const content = await secureFs.readFile(resolvedPath, 'utf-8');
+        fileContent = typeof content === 'string' ? content : content.toString('utf-8');
+      } catch (readError) {
+        // Path not allowed - return 403 Forbidden
+        if (readError instanceof PathNotAllowedError) {
+          logger.warn(`Path not allowed: ${filePath}`);
+          const response: DescribeFileErrorResponse = {
+            success: false,
+            error: 'File path is not within the allowed directory',
+          };
+          res.status(403).json(response);
+          return;
+        }
+
+        // File not found
+        if (
+          readError !== null &&
+          typeof readError === 'object' &&
+          'code' in readError &&
+          readError.code === 'ENOENT'
+        ) {
+          logger.warn(`File not found: ${resolvedPath}`);
+          const response: DescribeFileErrorResponse = {
+            success: false,
+            error: `File not found: ${filePath}`,
+          };
+          res.status(404).json(response);
+          return;
+        }
+
+        const errorMessage = readError instanceof Error ? readError.message : 'Unknown error';
+        logger.error(`Failed to read file: ${errorMessage}`);
+        const response: DescribeFileErrorResponse = {
+          success: false,
+          error: `Failed to read file: ${errorMessage}`,
+        };
+        res.status(500).json(response);
+        return;
+      }
+
+      // Truncate very large files to avoid token limits
+      const MAX_CONTENT_LENGTH = 50000;
+      const truncated = fileContent.length > MAX_CONTENT_LENGTH;
+      const contentToAnalyze = truncated
+        ? fileContent.substring(0, MAX_CONTENT_LENGTH)
+        : fileContent;
+
+      // Get the filename for context
+      const fileName = path.basename(resolvedPath);
+
+      // Get customized prompts from settings
+      const prompts = await getPromptCustomization(settingsService, '[DescribeFile]');
+
+      // Build prompt with file content passed as structured data
+      // The file content is included directly, not via tool invocation
+      const prompt = `${prompts.contextDescription.describeFilePrompt}
+
+File: ${fileName}${truncated ? ' (truncated)' : ''}
+
+--- FILE CONTENT ---
+${contentToAnalyze}`;
+
+      // Use the file's directory as the working directory
+      const cwd = path.dirname(resolvedPath);
+
+      // Load autoLoadClaudeMd setting
+      const autoLoadClaudeMd = await getAutoLoadClaudeMdSetting(
+        cwd,
+        settingsService,
+        '[DescribeFile]'
+      );
+
+      // Get model from phase settings with provider info
+      const {
+        phaseModel: phaseModelEntry,
+        provider,
+        credentials,
+      } = await getPhaseModelWithOverrides(
+        'fileDescriptionModel',
+        settingsService,
+        cwd,
+        '[DescribeFile]'
+      );
+      const { model, thinkingLevel } = resolvePhaseModel(phaseModelEntry);
+
+      logger.info(
+        `Resolved model: ${model}, thinkingLevel: ${thinkingLevel}`,
+        provider ? `via provider: ${provider.name}` : 'direct API'
+      );
+
+      // Use simpleQuery - provider abstraction handles routing to correct provider
+      const result = await simpleQuery({
+        prompt,
+        model,
+        cwd,
+        maxTurns: 1,
+        allowedTools: [],
+        thinkingLevel,
+        readOnly: true, // File description only reads, doesn't write
+        settingSources: autoLoadClaudeMd ? ['user', 'project', 'local'] : undefined,
+        claudeCompatibleProvider: provider, // Pass provider for alternative endpoint configuration
+        credentials, // Pass credentials for resolving 'credentials' apiKeySource
+      });
+
+      const description = result.text;
+
+      if (!description || description.trim().length === 0) {
+        logger.warn('Received empty response from Claude');
+        const response: DescribeFileErrorResponse = {
+          success: false,
+          error: 'Failed to generate description - empty response',
+        };
+        res.status(500).json(response);
+        return;
+      }
+
+      logger.info(`Description generated, length: ${description.length} chars`);
+
+      const response: DescribeFileSuccessResponse = {
+        success: true,
+        description: description.trim(),
+      };
+      res.json(response);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+      logger.error('File description failed:', errorMessage);
+
+      const response: DescribeFileErrorResponse = {
+        success: false,
+        error: errorMessage,
+      };
+      res.status(500).json(response);
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/context/routes/describe-image.ts b/temp_repo/apps/server/src/routes/context/routes/describe-image.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1b645d5d0e2aeb3161f8321c43a1d76f83e05020
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/context/routes/describe-image.ts
@@ -0,0 +1,423 @@
+/**
+ * POST /context/describe-image endpoint - Generate description for an image
+ *
+ * Uses AI to analyze an image and generate a concise description
+ * suitable for context file metadata. Model is configurable via
+ * phaseModels.imageDescriptionModel in settings (defaults to Haiku).
+ *
+ * IMPORTANT:
+ * The agent runner (chat/auto-mode) sends images as multi-part content blocks (base64 image blocks),
+ * not by asking Claude to use the Read tool to open files. This endpoint now mirrors that approach
+ * so it doesn't depend on Claude's filesystem tool access or working directory restrictions.
+ */
+
+import type { Request, Response } from 'express';
+import { createLogger, readImageAsBase64 } from '@automaker/utils';
+import { isCursorModel } from '@automaker/types';
+import { resolvePhaseModel } from '@automaker/model-resolver';
+import { simpleQuery } from '../../../providers/simple-query-service.js';
+import * as secureFs from '../../../lib/secure-fs.js';
+import * as path from 'path';
+import type { SettingsService } from '../../../services/settings-service.js';
+import {
+  getAutoLoadClaudeMdSetting,
+  getPromptCustomization,
+  getPhaseModelWithOverrides,
+} from '../../../lib/settings-helpers.js';
+
+const logger = createLogger('DescribeImage');
+
+/**
+ * Allowlist of safe headers to log
+ * All other headers are excluded to prevent leaking sensitive values
+ */
+const SAFE_HEADERS_ALLOWLIST = new Set([
+  'content-type',
+  'accept',
+  'user-agent',
+  'host',
+  'referer',
+  'content-length',
+  'origin',
+  'x-request-id',
+]);
+
+/**
+ * Filter request headers to only include safe, non-sensitive values
+ */
+function filterSafeHeaders(headers: Record<string, unknown>): Record<string, unknown> {
+  const filtered: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(headers)) {
+    if (SAFE_HEADERS_ALLOWLIST.has(key.toLowerCase())) {
+      filtered[key] = value;
+    }
+  }
+  return filtered;
+}
+
+/**
+ * Find the actual file path, handling Unicode character variations.
+ * macOS screenshots use U+202F (NARROW NO-BREAK SPACE) before AM/PM,
+ * but this may be transmitted as a regular space through the API.
+ */
+function findActualFilePath(requestedPath: string): string | null {
+  // First, try the exact path
+  if (secureFs.existsSync(requestedPath)) {
+    return requestedPath;
+  }
+
+  // Try with Unicode normalization
+  const normalizedPath = requestedPath.normalize('NFC');
+  if (secureFs.existsSync(normalizedPath)) {
+    return normalizedPath;
+  }
+
+  // If not found, try to find the file in the directory by matching the basename
+  // This handles cases where the space character differs (U+0020 vs U+202F vs U+00A0)
+  const dir = path.dirname(requestedPath);
+  const baseName = path.basename(requestedPath);
+
+  if (!secureFs.existsSync(dir)) {
+    return null;
+  }
+
+  try {
+    const files = secureFs.readdirSync(dir);
+
+    // Normalize the requested basename for comparison
+    // Replace various space-like characters with regular space for comparison
+    const normalizeSpaces = (s: string): string => s.replace(/[\u00A0\u202F\u2009\u200A]/g, ' ');
+
+    const normalizedBaseName = normalizeSpaces(baseName);
+
+    for (const file of files) {
+      if (normalizeSpaces(file) === normalizedBaseName) {
+        logger.info(`Found matching file with different space encoding: ${file}`);
+        return path.join(dir, file);
+      }
+    }
+  } catch (err) {
+    logger.error(`Error reading directory ${dir}: ${err}`);
+  }
+
+  return null;
+}
+
+/**
+ * Request body for the describe-image endpoint
+ */
+interface DescribeImageRequestBody {
+  /** Path to the image file */
+  imagePath: string;
+}
+
+/**
+ * Success response from the describe-image endpoint
+ */
+interface DescribeImageSuccessResponse {
+  success: true;
+  description: string;
+}
+
+/**
+ * Error response from the describe-image endpoint
+ */
+interface DescribeImageErrorResponse {
+  success: false;
+  error: string;
+  requestId?: string;
+}
+
+/**
+ * Map SDK/CLI errors to a stable status + user-facing message.
+ */
+function mapDescribeImageError(rawMessage: string | undefined): {
+  statusCode: number;
+  userMessage: string;
+} {
+  const baseResponse = {
+    statusCode: 500,
+    userMessage: 'Failed to generate an image description. Please try again.',
+  };
+
+  if (!rawMessage) return baseResponse;
+
+  if (
+    rawMessage.includes('Claude Code process exited') ||
+    rawMessage.includes('Claude Code process terminated by signal')
+  ) {
+    const exitCodeMatch = rawMessage.match(/exited with code (\d+)/);
+    const signalMatch = rawMessage.match(/terminated by signal (\w+)/);
+    const detail = exitCodeMatch
+      ? ` (exit code: ${exitCodeMatch[1]})`
+      : signalMatch
+        ? ` (signal: ${signalMatch[1]})`
+        : '';
+
+    // Crash/OS-kill signals suggest a process crash, not an auth failure —
+    // omit auth recovery advice and suggest retry/reporting instead.
+    const crashSignals = ['SIGSEGV', 'SIGABRT', 'SIGKILL', 'SIGBUS', 'SIGTRAP'];
+    const isCrashSignal = signalMatch ? crashSignals.includes(signalMatch[1]) : false;
+
+    if (isCrashSignal) {
+      return {
+        statusCode: 503,
+        userMessage: `Claude crashed unexpectedly${detail} while describing the image. This may be a transient condition. Please try again. If the problem persists, collect logs and report the issue.`,
+      };
+    }
+
+    return {
+      statusCode: 503,
+      userMessage: `Claude exited unexpectedly${detail} while describing the image. This is usually a transient issue. Try again. If it keeps happening, re-run \`claude login\` or update your API key in Setup.`,
+    };
+  }
+
+  if (
+    rawMessage.includes('Failed to spawn Claude Code process') ||
+    rawMessage.includes('Claude Code executable not found') ||
+    rawMessage.includes('Claude Code native binary not found')
+  ) {
+    return {
+      statusCode: 503,
+      userMessage:
+        'Claude CLI could not be launched. Make sure the Claude CLI is installed and available in PATH, then try again.',
+    };
+  }
+
+  if (rawMessage.toLowerCase().includes('rate limit') || rawMessage.includes('429')) {
+    return {
+      statusCode: 429,
+      userMessage: 'Rate limited while describing the image. Please wait a moment and try again.',
+    };
+  }
+
+  if (rawMessage.toLowerCase().includes('payload too large') || rawMessage.includes('413')) {
+    return {
+      statusCode: 413,
+      userMessage:
+        'The image is too large to send for description. Please resize/compress it and try again.',
+    };
+  }
+
+  return baseResponse;
+}
+
+/**
+ * Create the describe-image request handler
+ *
+ * Uses the provider abstraction with multi-part content blocks to include the image (base64),
+ * matching the agent runner behavior.
+ *
+ * @param settingsService - Optional settings service for loading autoLoadClaudeMd setting
+ * @returns Express request handler for image description
+ */
+export function createDescribeImageHandler(
+  settingsService?: SettingsService
+): (req: Request, res: Response) => Promise<void> {
+  return async (req: Request, res: Response): Promise<void> => {
+    const requestId = `describe-image-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+    const startedAt = Date.now();
+
+    // Request envelope logs (high value when correlating failures)
+    // Only log safe headers to prevent leaking sensitive values (auth tokens, cookies, etc.)
+    logger.info(`[${requestId}] ===== POST /api/context/describe-image =====`);
+    logger.info(`[${requestId}] headers=${JSON.stringify(filterSafeHeaders(req.headers))}`);
+    logger.info(`[${requestId}] body=${JSON.stringify(req.body)}`);
+
+    try {
+      const { imagePath } = req.body as DescribeImageRequestBody;
+
+      // Validate required fields
+      if (!imagePath || typeof imagePath !== 'string') {
+        const response: DescribeImageErrorResponse = {
+          success: false,
+          error: 'imagePath is required and must be a string',
+          requestId,
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      logger.info(`[${requestId}] imagePath="${imagePath}" type=${typeof imagePath}`);
+
+      // Find the actual file path (handles Unicode space character variations)
+      const actualPath = findActualFilePath(imagePath);
+      if (!actualPath) {
+        logger.error(`[${requestId}] File not found: ${imagePath}`);
+        // Log hex representation of the path for debugging
+        const hexPath = Buffer.from(imagePath).toString('hex');
+        logger.error(`[${requestId}] imagePath hex: ${hexPath}`);
+        const response: DescribeImageErrorResponse = {
+          success: false,
+          error: `File not found: ${imagePath}`,
+          requestId,
+        };
+        res.status(404).json(response);
+        return;
+      }
+
+      if (actualPath !== imagePath) {
+        logger.info(`[${requestId}] Using actual path: ${actualPath}`);
+      }
+
+      // Log path + stats (this is often where issues start: missing file, perms, size)
+      let stat: ReturnType<typeof secureFs.statSync> | null = null;
+      try {
+        stat = secureFs.statSync(actualPath);
+        logger.info(
+          `[${requestId}] fileStats size=${stat.size} bytes mtime=${stat.mtime.toISOString()}`
+        );
+      } catch (statErr) {
+        logger.warn(
+          `[${requestId}] Unable to stat image file (continuing to read base64): ${String(statErr)}`
+        );
+      }
+
+      // Read image and convert to base64 (same as agent runner)
+      logger.info(`[${requestId}] Reading image into base64...`);
+      const imageReadStart = Date.now();
+      const imageData = await readImageAsBase64(actualPath);
+      const imageReadMs = Date.now() - imageReadStart;
+
+      const base64Length = imageData.base64.length;
+      const estimatedBytes = Math.ceil((base64Length * 3) / 4);
+      logger.info(`[${requestId}] imageReadMs=${imageReadMs}`);
+      logger.info(
+        `[${requestId}] image meta filename=${imageData.filename} mime=${imageData.mimeType} base64Len=${base64Length} estBytes=${estimatedBytes}`
+      );
+
+      const cwd = path.dirname(actualPath);
+      logger.info(`[${requestId}] Using cwd=${cwd}`);
+
+      // Load autoLoadClaudeMd setting
+      const autoLoadClaudeMd = await getAutoLoadClaudeMdSetting(
+        cwd,
+        settingsService,
+        '[DescribeImage]'
+      );
+
+      // Get model from phase settings with provider info
+      const {
+        phaseModel: phaseModelEntry,
+        provider,
+        credentials,
+      } = await getPhaseModelWithOverrides(
+        'imageDescriptionModel',
+        settingsService,
+        cwd,
+        '[DescribeImage]'
+      );
+      const { model, thinkingLevel } = resolvePhaseModel(phaseModelEntry);
+
+      logger.info(
+        `[${requestId}] Using model: ${model}`,
+        provider ? `via provider: ${provider.name}` : 'direct API'
+      );
+
+      // Get customized prompts from settings
+      const prompts = await getPromptCustomization(settingsService, '[DescribeImage]');
+
+      // Build the instruction text from centralized prompts
+      const instructionText = prompts.contextDescription.describeImagePrompt;
+
+      // Build prompt based on provider capability
+      // Some providers (like Cursor) may not support image content blocks
+      let prompt: string | Array<{ type: string; text?: string; source?: object }>;
+
+      if (isCursorModel(model)) {
+        // Cursor may not support base64 image blocks directly
+        // Use text prompt with image path reference
+        logger.info(`[${requestId}] Using text prompt for Cursor model`);
+        prompt = `${instructionText}\n\nImage file: ${actualPath}\nMIME type: ${imageData.mimeType}`;
+      } else {
+        // Claude and other vision-capable models support multi-part prompts with images
+        logger.info(`[${requestId}] Using multi-part prompt with image block`);
+        prompt = [
+          { type: 'text', text: instructionText },
+          {
+            type: 'image',
+            source: {
+              type: 'base64',
+              media_type: imageData.mimeType,
+              data: imageData.base64,
+            },
+          },
+        ];
+      }
+
+      logger.info(`[${requestId}] Calling simpleQuery...`);
+      const queryStart = Date.now();
+
+      // Use simpleQuery - provider abstraction handles routing
+      const result = await simpleQuery({
+        prompt,
+        model,
+        cwd,
+        maxTurns: 1,
+        allowedTools: isCursorModel(model) ? ['Read'] : [], // Allow Read for Cursor to read image if needed
+        thinkingLevel,
+        readOnly: true, // Image description only reads, doesn't write
+        settingSources: autoLoadClaudeMd ? ['user', 'project', 'local'] : undefined,
+        claudeCompatibleProvider: provider, // Pass provider for alternative endpoint configuration
+        credentials, // Pass credentials for resolving 'credentials' apiKeySource
+      });
+
+      logger.info(`[${requestId}] simpleQuery completed in ${Date.now() - queryStart}ms`);
+
+      const description = result.text;
+
+      if (!description || description.trim().length === 0) {
+        logger.warn(`[${requestId}] Received empty response from AI`);
+        const response: DescribeImageErrorResponse = {
+          success: false,
+          error: 'Failed to generate description - empty response',
+          requestId,
+        };
+        res.status(500).json(response);
+        return;
+      }
+
+      const totalMs = Date.now() - startedAt;
+      logger.info(`[${requestId}] Success descriptionLen=${description.length} totalMs=${totalMs}`);
+
+      const response: DescribeImageSuccessResponse = {
+        success: true,
+        description: description.trim(),
+      };
+      res.json(response);
+    } catch (error) {
+      const totalMs = Date.now() - startedAt;
+      const err = error as unknown;
+      const errMessage = err instanceof Error ? err.message : String(err);
+      const errName = err instanceof Error ? err.name : 'UnknownError';
+      const errStack = err instanceof Error ? err.stack : undefined;
+
+      logger.error(`[${requestId}] FAILED totalMs=${totalMs}`);
+      logger.error(`[${requestId}] errorName=${errName}`);
+      logger.error(`[${requestId}] errorMessage=${errMessage}`);
+      if (errStack) logger.error(`[${requestId}] errorStack=${errStack}`);
+
+      // Dump all enumerable + non-enumerable props (this is where stderr/stdout/exitCode often live)
+      try {
+        const props = err && typeof err === 'object' ? Object.getOwnPropertyNames(err) : [];
+        logger.error(`[${requestId}] errorProps=${JSON.stringify(props)}`);
+        if (err && typeof err === 'object') {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const anyErr = err as any;
+          const details = JSON.stringify(anyErr, props as unknown as string[]);
+          logger.error(`[${requestId}] errorDetails=${details}`);
+        }
+      } catch (stringifyErr) {
+        logger.error(`[${requestId}] Failed to serialize error object: ${String(stringifyErr)}`);
+      }
+
+      const { statusCode, userMessage } = mapDescribeImageError(errMessage);
+      const response: DescribeImageErrorResponse = {
+        success: false,
+        error: `${userMessage} (requestId: ${requestId})`,
+        requestId,
+      };
+      res.status(statusCode).json(response);
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/enhance-prompt/index.ts b/temp_repo/apps/server/src/routes/enhance-prompt/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..db50ea4cd04e60c076ee07f9118afecfa2d504f9
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/enhance-prompt/index.ts
@@ -0,0 +1,24 @@
+/**
+ * Enhance prompt routes - HTTP API for AI-powered text enhancement
+ *
+ * Provides endpoints for enhancing user input text using Claude AI
+ * with different enhancement modes (improve, expand, simplify, etc.)
+ */
+
+import { Router } from 'express';
+import type { SettingsService } from '../../services/settings-service.js';
+import { createEnhanceHandler } from './routes/enhance.js';
+
+/**
+ * Create the enhance-prompt router
+ *
+ * @param settingsService - Settings service for loading custom prompts
+ * @returns Express router with enhance-prompt endpoints
+ */
+export function createEnhancePromptRoutes(settingsService?: SettingsService): Router {
+  const router = Router();
+
+  router.post('/', createEnhanceHandler(settingsService));
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/enhance-prompt/routes/enhance.ts b/temp_repo/apps/server/src/routes/enhance-prompt/routes/enhance.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5dbd72686aa041a99c023161c17ed0f173afc528
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/enhance-prompt/routes/enhance.ts
@@ -0,0 +1,276 @@
+/**
+ * POST /enhance-prompt endpoint - Enhance user input text
+ *
+ * Uses the provider abstraction to enhance text based on the specified
+ * enhancement mode. Works with any configured provider (Claude, Cursor, etc.).
+ * Supports modes: improve, technical, simplify, acceptance, ux-reviewer
+ */
+
+import type { Request, Response } from 'express';
+import { createLogger } from '@automaker/utils';
+import { resolveModelString } from '@automaker/model-resolver';
+import { CLAUDE_MODEL_MAP, type ThinkingLevel } from '@automaker/types';
+import { getAppSpecPath } from '@automaker/platform';
+import { simpleQuery } from '../../../providers/simple-query-service.js';
+import type { SettingsService } from '../../../services/settings-service.js';
+import { getPromptCustomization, getProviderByModelId } from '../../../lib/settings-helpers.js';
+import { FeatureLoader } from '../../../services/feature-loader.js';
+import * as secureFs from '../../../lib/secure-fs.js';
+import {
+  buildUserPrompt,
+  isValidEnhancementMode,
+  type EnhancementMode,
+} from '../../../lib/enhancement-prompts.js';
+import {
+  extractTechnologyStack,
+  extractXmlElements,
+  extractXmlSection,
+  unescapeXml,
+} from '../../../lib/xml-extractor.js';
+
+const logger = createLogger('EnhancePrompt');
+
+/**
+ * Request body for the enhance endpoint
+ */
+interface EnhanceRequestBody {
+  /** The original text to enhance */
+  originalText: string;
+  /** The enhancement mode to apply */
+  enhancementMode: string;
+  /** Optional model override */
+  model?: string;
+  /** Optional thinking level for Claude models */
+  thinkingLevel?: ThinkingLevel;
+  /** Optional project path for per-project Claude API profile */
+  projectPath?: string;
+}
+
+/**
+ * Success response from the enhance endpoint
+ */
+interface EnhanceSuccessResponse {
+  success: true;
+  enhancedText: string;
+}
+
+/**
+ * Error response from the enhance endpoint
+ */
+interface EnhanceErrorResponse {
+  success: false;
+  error: string;
+}
+
+async function buildProjectContext(projectPath: string): Promise<string | null> {
+  const contextBlocks: string[] = [];
+
+  try {
+    const appSpecPath = getAppSpecPath(projectPath);
+    const specContent = (await secureFs.readFile(appSpecPath, 'utf-8')) as string;
+
+    const projectName = extractXmlSection(specContent, 'project_name');
+    const overview = extractXmlSection(specContent, 'overview');
+    const techStack = extractTechnologyStack(specContent);
+    const coreSection = extractXmlSection(specContent, 'core_capabilities');
+    const coreCapabilities = coreSection ? extractXmlElements(coreSection, 'capability') : [];
+
+    const summaryLines: string[] = [];
+    if (projectName) {
+      summaryLines.push(`Name: ${unescapeXml(projectName.trim())}`);
+    }
+    if (overview) {
+      summaryLines.push(`Overview: ${unescapeXml(overview.trim())}`);
+    }
+    if (techStack.length > 0) {
+      summaryLines.push(`Tech Stack: ${techStack.join(', ')}`);
+    }
+    if (coreCapabilities.length > 0) {
+      summaryLines.push(`Core Capabilities: ${coreCapabilities.slice(0, 10).join(', ')}`);
+    }
+
+    if (summaryLines.length > 0) {
+      contextBlocks.push(`PROJECT CONTEXT:\n${summaryLines.map((line) => `- ${line}`).join('\n')}`);
+    }
+  } catch (error) {
+    logger.debug('No app_spec.txt context available for enhancement', error);
+  }
+
+  try {
+    const featureLoader = new FeatureLoader();
+    const features = await featureLoader.getAll(projectPath);
+    const featureTitles = features
+      .map((feature) => feature.title || feature.name || feature.id)
+      .filter((title) => Boolean(title));
+
+    if (featureTitles.length > 0) {
+      const listed = featureTitles.slice(0, 30).map((title) => `- ${title}`);
+      contextBlocks.push(
+        `EXISTING FEATURES (avoid duplicates):\n${listed.join('\n')}${
+          featureTitles.length > 30 ? '\n- ...' : ''
+        }`
+      );
+    }
+  } catch (error) {
+    logger.debug('Failed to load existing features for enhancement context', error);
+  }
+
+  if (contextBlocks.length === 0) {
+    return null;
+  }
+
+  return contextBlocks.join('\n\n');
+}
+
+/**
+ * Create the enhance request handler
+ *
+ * @param settingsService - Optional settings service for loading custom prompts
+ * @returns Express request handler for text enhancement
+ */
+export function createEnhanceHandler(
+  settingsService?: SettingsService
+): (req: Request, res: Response) => Promise<void> {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { originalText, enhancementMode, model, thinkingLevel, projectPath } =
+        req.body as EnhanceRequestBody;
+
+      // Validate required fields
+      if (!originalText || typeof originalText !== 'string') {
+        const response: EnhanceErrorResponse = {
+          success: false,
+          error: 'originalText is required and must be a string',
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      if (!enhancementMode || typeof enhancementMode !== 'string') {
+        const response: EnhanceErrorResponse = {
+          success: false,
+          error: 'enhancementMode is required and must be a string',
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      // Validate text is not empty
+      const trimmedText = originalText.trim();
+      if (trimmedText.length === 0) {
+        const response: EnhanceErrorResponse = {
+          success: false,
+          error: 'originalText cannot be empty',
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      // Validate and normalize enhancement mode
+      const normalizedMode = enhancementMode.toLowerCase();
+      const validMode: EnhancementMode = isValidEnhancementMode(normalizedMode)
+        ? normalizedMode
+        : 'improve';
+
+      logger.info(`Enhancing text with mode: ${validMode}, length: ${trimmedText.length} chars`);
+
+      // Load enhancement prompts from settings (merges custom + defaults)
+      const prompts = await getPromptCustomization(settingsService, '[EnhancePrompt]');
+
+      // Get the system prompt for this mode from merged prompts
+      const systemPromptMap: Record<EnhancementMode, string> = {
+        improve: prompts.enhancement.improveSystemPrompt,
+        technical: prompts.enhancement.technicalSystemPrompt,
+        simplify: prompts.enhancement.simplifySystemPrompt,
+        acceptance: prompts.enhancement.acceptanceSystemPrompt,
+        'ux-reviewer': prompts.enhancement.uxReviewerSystemPrompt,
+      };
+      const systemPrompt = systemPromptMap[validMode];
+
+      logger.debug(`Using ${validMode} system prompt (length: ${systemPrompt.length} chars)`);
+
+      // Build the user prompt with few-shot examples
+      const userPrompt = buildUserPrompt(validMode, trimmedText, true);
+      const projectContext = projectPath ? await buildProjectContext(projectPath) : null;
+      if (projectContext) {
+        logger.debug('Including project context in enhancement prompt');
+      }
+
+      // Check if the model is a provider model (like "GLM-4.5-Air")
+      // If so, get the provider config and resolved Claude model
+      let claudeCompatibleProvider: import('@automaker/types').ClaudeCompatibleProvider | undefined;
+      let providerResolvedModel: string | undefined;
+      let credentials = await settingsService?.getCredentials();
+
+      if (model && settingsService) {
+        const providerResult = await getProviderByModelId(
+          model,
+          settingsService,
+          '[EnhancePrompt]'
+        );
+        if (providerResult.provider) {
+          claudeCompatibleProvider = providerResult.provider;
+          providerResolvedModel = providerResult.resolvedModel;
+          credentials = providerResult.credentials;
+          logger.info(
+            `Using provider "${providerResult.provider.name}" for model "${model}"` +
+              (providerResolvedModel ? ` -> resolved to "${providerResolvedModel}"` : '')
+          );
+        }
+      }
+
+      // Resolve the model for API call.
+      // CRITICAL: For custom providers (GLM, MiniMax), pass the provider's model ID (e.g. "GLM-4.7")
+      // to the API, NOT the resolved Claude model - otherwise we get "model not found"
+      const modelForApi = claudeCompatibleProvider
+        ? model
+        : providerResolvedModel || resolveModelString(model, CLAUDE_MODEL_MAP.sonnet);
+
+      logger.debug(`Using model: ${modelForApi}`);
+
+      // Use simpleQuery - provider abstraction handles routing to correct provider
+      // The system prompt is combined with user prompt since some providers
+      // don't have a separate system prompt concept
+      const result = await simpleQuery({
+        prompt: [systemPrompt, projectContext, userPrompt].filter(Boolean).join('\n\n'),
+        model: modelForApi,
+        cwd: process.cwd(), // Enhancement doesn't need a specific working directory
+        maxTurns: 1,
+        allowedTools: [],
+        thinkingLevel,
+        readOnly: true, // Prompt enhancement only generates text, doesn't write files
+        credentials, // Pass credentials for resolving 'credentials' apiKeySource
+        claudeCompatibleProvider, // Pass provider for alternative endpoint configuration
+      });
+
+      const enhancedText = result.text;
+
+      if (!enhancedText || enhancedText.trim().length === 0) {
+        logger.warn('Received empty response from AI');
+        const response: EnhanceErrorResponse = {
+          success: false,
+          error: 'Failed to generate enhanced text - empty response',
+        };
+        res.status(500).json(response);
+        return;
+      }
+
+      logger.info(`Enhancement complete, output length: ${enhancedText.length} chars`);
+
+      const response: EnhanceSuccessResponse = {
+        success: true,
+        enhancedText: enhancedText.trim(),
+      };
+      res.json(response);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+      logger.error('Enhancement failed:', errorMessage);
+
+      const response: EnhanceErrorResponse = {
+        success: false,
+        error: errorMessage,
+      };
+      res.status(500).json(response);
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/event-history/common.ts b/temp_repo/apps/server/src/routes/event-history/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bd0ad3fe8d0dbbb887a85c74a9b3dac41e39fb39
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/event-history/common.ts
@@ -0,0 +1,19 @@
+/**
+ * Common utilities for event history routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+/** Logger instance for event history operations */
+export const logger = createLogger('EventHistory');
+
+/**
+ * Extract user-friendly error message from error objects
+ */
+export { getErrorMessageShared as getErrorMessage };
+
+/**
+ * Log error with automatic logger binding
+ */
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/event-history/index.ts b/temp_repo/apps/server/src/routes/event-history/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..93297ddd926f8a6dfb87a26252633d6c3d27a442
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/event-history/index.ts
@@ -0,0 +1,68 @@
+/**
+ * Event History routes - HTTP API for event history management
+ *
+ * Provides endpoints for:
+ * - Listing events with filtering
+ * - Getting individual event details
+ * - Deleting events
+ * - Clearing all events
+ * - Replaying events to test hooks
+ *
+ * Mounted at /api/event-history in the main server.
+ */
+
+import { Router } from 'express';
+import type { EventHistoryService } from '../../services/event-history-service.js';
+import type { SettingsService } from '../../services/settings-service.js';
+import { validatePathParams } from '../../middleware/validate-paths.js';
+import { createListHandler } from './routes/list.js';
+import { createGetHandler } from './routes/get.js';
+import { createDeleteHandler } from './routes/delete.js';
+import { createClearHandler } from './routes/clear.js';
+import { createReplayHandler } from './routes/replay.js';
+
+/**
+ * Create event history router with all endpoints
+ *
+ * Endpoints:
+ * - POST /list - List events with optional filtering
+ * - POST /get - Get a single event by ID
+ * - POST /delete - Delete an event by ID
+ * - POST /clear - Clear all events for a project
+ * - POST /replay - Replay an event to trigger hooks
+ *
+ * @param eventHistoryService - Instance of EventHistoryService
+ * @param settingsService - Instance of SettingsService (for replay)
+ * @returns Express Router configured with all event history endpoints
+ */
+export function createEventHistoryRoutes(
+  eventHistoryService: EventHistoryService,
+  settingsService: SettingsService
+): Router {
+  const router = Router();
+
+  // List events with filtering
+  router.post('/list', validatePathParams('projectPath'), createListHandler(eventHistoryService));
+
+  // Get single event
+  router.post('/get', validatePathParams('projectPath'), createGetHandler(eventHistoryService));
+
+  // Delete event
+  router.post(
+    '/delete',
+    validatePathParams('projectPath'),
+    createDeleteHandler(eventHistoryService)
+  );
+
+  // Clear all events
+  router.post('/clear', validatePathParams('projectPath'), createClearHandler(eventHistoryService));
+
+  // Replay event
+  router.post(
+    '/replay',
+    validatePathParams('projectPath'),
+    createReplayHandler(eventHistoryService, settingsService)
+  );
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/event-history/routes/clear.ts b/temp_repo/apps/server/src/routes/event-history/routes/clear.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6e6bb5899bc806a64af0c2d05b05056642734ef
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/event-history/routes/clear.ts
@@ -0,0 +1,33 @@
+/**
+ * POST /api/event-history/clear - Clear all events for a project
+ *
+ * Request body: { projectPath: string }
+ * Response: { success: true, cleared: number }
+ */
+
+import type { Request, Response } from 'express';
+import type { EventHistoryService } from '../../../services/event-history-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createClearHandler(eventHistoryService: EventHistoryService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as { projectPath: string };
+
+      if (!projectPath || typeof projectPath !== 'string') {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      const cleared = await eventHistoryService.clearEvents(projectPath);
+
+      res.json({
+        success: true,
+        cleared,
+      });
+    } catch (error) {
+      logError(error, 'Clear events failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/event-history/routes/delete.ts b/temp_repo/apps/server/src/routes/event-history/routes/delete.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ea3f6b16c22627adb378f0e779290521bdd71db9
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/event-history/routes/delete.ts
@@ -0,0 +1,43 @@
+/**
+ * POST /api/event-history/delete - Delete an event by ID
+ *
+ * Request body: { projectPath: string, eventId: string }
+ * Response: { success: true } or { success: false, error: string }
+ */
+
+import type { Request, Response } from 'express';
+import type { EventHistoryService } from '../../../services/event-history-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createDeleteHandler(eventHistoryService: EventHistoryService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, eventId } = req.body as {
+        projectPath: string;
+        eventId: string;
+      };
+
+      if (!projectPath || typeof projectPath !== 'string') {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!eventId || typeof eventId !== 'string') {
+        res.status(400).json({ success: false, error: 'eventId is required' });
+        return;
+      }
+
+      const deleted = await eventHistoryService.deleteEvent(projectPath, eventId);
+
+      if (!deleted) {
+        res.status(404).json({ success: false, error: 'Event not found' });
+        return;
+      }
+
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Delete event failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/event-history/routes/get.ts b/temp_repo/apps/server/src/routes/event-history/routes/get.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f892fd414b3700b60fa0db4e650a2bb8a3f07cf1
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/event-history/routes/get.ts
@@ -0,0 +1,46 @@
+/**
+ * POST /api/event-history/get - Get a single event by ID
+ *
+ * Request body: { projectPath: string, eventId: string }
+ * Response: { success: true, event: StoredEvent } or { success: false, error: string }
+ */
+
+import type { Request, Response } from 'express';
+import type { EventHistoryService } from '../../../services/event-history-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createGetHandler(eventHistoryService: EventHistoryService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, eventId } = req.body as {
+        projectPath: string;
+        eventId: string;
+      };
+
+      if (!projectPath || typeof projectPath !== 'string') {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!eventId || typeof eventId !== 'string') {
+        res.status(400).json({ success: false, error: 'eventId is required' });
+        return;
+      }
+
+      const event = await eventHistoryService.getEvent(projectPath, eventId);
+
+      if (!event) {
+        res.status(404).json({ success: false, error: 'Event not found' });
+        return;
+      }
+
+      res.json({
+        success: true,
+        event,
+      });
+    } catch (error) {
+      logError(error, 'Get event failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/event-history/routes/list.ts b/temp_repo/apps/server/src/routes/event-history/routes/list.ts
new file mode 100644
index 0000000000000000000000000000000000000000..551594f281a0d239206207d38ad6e7677d06e265
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/event-history/routes/list.ts
@@ -0,0 +1,53 @@
+/**
+ * POST /api/event-history/list - List events for a project
+ *
+ * Request body: {
+ *   projectPath: string,
+ *   filter?: {
+ *     trigger?: EventHookTrigger,
+ *     featureId?: string,
+ *     since?: string,
+ *     until?: string,
+ *     limit?: number,
+ *     offset?: number
+ *   }
+ * }
+ * Response: { success: true, events: StoredEventSummary[], total: number }
+ */
+
+import type { Request, Response } from 'express';
+import type { EventHistoryService } from '../../../services/event-history-service.js';
+import type { EventHistoryFilter } from '@automaker/types';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createListHandler(eventHistoryService: EventHistoryService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, filter } = req.body as {
+        projectPath: string;
+        filter?: EventHistoryFilter;
+      };
+
+      if (!projectPath || typeof projectPath !== 'string') {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      const events = await eventHistoryService.getEvents(projectPath, filter);
+      const total = await eventHistoryService.getEventCount(projectPath, {
+        ...filter,
+        limit: undefined,
+        offset: undefined,
+      });
+
+      res.json({
+        success: true,
+        events,
+        total,
+      });
+    } catch (error) {
+      logError(error, 'List events failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/event-history/routes/replay.ts b/temp_repo/apps/server/src/routes/event-history/routes/replay.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6f27a404307fc673c75604b292b74b4cd645bf4
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/event-history/routes/replay.ts
@@ -0,0 +1,234 @@
+/**
+ * POST /api/event-history/replay - Replay an event to trigger hooks
+ *
+ * Request body: {
+ *   projectPath: string,
+ *   eventId: string,
+ *   hookIds?: string[]  // Optional: specific hooks to run (if not provided, runs all enabled matching hooks)
+ * }
+ * Response: { success: true, result: EventReplayResult }
+ */
+
+import type { Request, Response } from 'express';
+import type { EventHistoryService } from '../../../services/event-history-service.js';
+import type { SettingsService } from '../../../services/settings-service.js';
+import type { EventReplayResult, EventReplayHookResult, EventHook } from '@automaker/types';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { getErrorMessage, logError, logger } from '../common.js';
+
+const execAsync = promisify(exec);
+
+/** Default timeout for shell commands (30 seconds) */
+const DEFAULT_SHELL_TIMEOUT = 30000;
+
+/** Default timeout for HTTP requests (10 seconds) */
+const DEFAULT_HTTP_TIMEOUT = 10000;
+
+interface HookContext {
+  featureId?: string;
+  featureName?: string;
+  projectPath?: string;
+  projectName?: string;
+  error?: string;
+  errorType?: string;
+  timestamp: string;
+  eventType: string;
+}
+
+/**
+ * Substitute {{variable}} placeholders in a string
+ */
+function substituteVariables(template: string, context: HookContext): string {
+  return template.replace(/\{\{(\w+)\}\}/g, (match, variable) => {
+    const value = context[variable as keyof HookContext];
+    if (value === undefined || value === null) {
+      return '';
+    }
+    return String(value);
+  });
+}
+
+/**
+ * Execute a single hook and return the result
+ */
+async function executeHook(hook: EventHook, context: HookContext): Promise<EventReplayHookResult> {
+  const hookName = hook.name || hook.id;
+  const startTime = Date.now();
+
+  try {
+    if (hook.action.type === 'shell') {
+      const command = substituteVariables(hook.action.command, context);
+      const timeout = hook.action.timeout || DEFAULT_SHELL_TIMEOUT;
+
+      logger.info(`Replaying shell hook "${hookName}": ${command}`);
+
+      await execAsync(command, {
+        timeout,
+        maxBuffer: 1024 * 1024,
+      });
+
+      return {
+        hookId: hook.id,
+        hookName: hook.name,
+        success: true,
+        durationMs: Date.now() - startTime,
+      };
+    } else if (hook.action.type === 'http') {
+      const url = substituteVariables(hook.action.url, context);
+      const method = hook.action.method || 'POST';
+
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      };
+      if (hook.action.headers) {
+        for (const [key, value] of Object.entries(hook.action.headers)) {
+          headers[key] = substituteVariables(value, context);
+        }
+      }
+
+      let body: string | undefined;
+      if (hook.action.body) {
+        body = substituteVariables(hook.action.body, context);
+      } else if (method !== 'GET') {
+        body = JSON.stringify({
+          eventType: context.eventType,
+          timestamp: context.timestamp,
+          featureId: context.featureId,
+          projectPath: context.projectPath,
+          projectName: context.projectName,
+          error: context.error,
+        });
+      }
+
+      logger.info(`Replaying HTTP hook "${hookName}": ${method} ${url}`);
+
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), DEFAULT_HTTP_TIMEOUT);
+
+      const response = await fetch(url, {
+        method,
+        headers,
+        body: method !== 'GET' ? body : undefined,
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!response.ok) {
+        return {
+          hookId: hook.id,
+          hookName: hook.name,
+          success: false,
+          error: `HTTP ${response.status}: ${response.statusText}`,
+          durationMs: Date.now() - startTime,
+        };
+      }
+
+      return {
+        hookId: hook.id,
+        hookName: hook.name,
+        success: true,
+        durationMs: Date.now() - startTime,
+      };
+    }
+
+    return {
+      hookId: hook.id,
+      hookName: hook.name,
+      success: false,
+      error: 'Unknown hook action type',
+      durationMs: Date.now() - startTime,
+    };
+  } catch (error) {
+    const errorMessage =
+      error instanceof Error
+        ? error.name === 'AbortError'
+          ? 'Request timed out'
+          : error.message
+        : String(error);
+
+    return {
+      hookId: hook.id,
+      hookName: hook.name,
+      success: false,
+      error: errorMessage,
+      durationMs: Date.now() - startTime,
+    };
+  }
+}
+
+export function createReplayHandler(
+  eventHistoryService: EventHistoryService,
+  settingsService: SettingsService
+) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, eventId, hookIds } = req.body as {
+        projectPath: string;
+        eventId: string;
+        hookIds?: string[];
+      };
+
+      if (!projectPath || typeof projectPath !== 'string') {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!eventId || typeof eventId !== 'string') {
+        res.status(400).json({ success: false, error: 'eventId is required' });
+        return;
+      }
+
+      // Get the event
+      const event = await eventHistoryService.getEvent(projectPath, eventId);
+      if (!event) {
+        res.status(404).json({ success: false, error: 'Event not found' });
+        return;
+      }
+
+      // Get hooks from settings
+      const settings = await settingsService.getGlobalSettings();
+      let hooks = settings.eventHooks || [];
+
+      // Filter to matching trigger and enabled hooks
+      hooks = hooks.filter((h) => h.enabled && h.trigger === event.trigger);
+
+      // If specific hook IDs requested, filter to those
+      if (hookIds && hookIds.length > 0) {
+        hooks = hooks.filter((h) => hookIds.includes(h.id));
+      }
+
+      // Build context for variable substitution
+      const context: HookContext = {
+        featureId: event.featureId,
+        featureName: event.featureName,
+        projectPath: event.projectPath,
+        projectName: event.projectName,
+        error: event.error,
+        errorType: event.errorType,
+        timestamp: event.timestamp,
+        eventType: event.trigger,
+      };
+
+      // Execute all hooks in parallel
+      const hookResults = await Promise.all(hooks.map((hook) => executeHook(hook, context)));
+
+      const result: EventReplayResult = {
+        eventId,
+        hooksTriggered: hooks.length,
+        hookResults,
+      };
+
+      logger.info(`Replayed event ${eventId}: ${hooks.length} hooks triggered`);
+
+      res.json({
+        success: true,
+        result,
+      });
+    } catch (error) {
+      logError(error, 'Replay event failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/features/common.ts b/temp_repo/apps/server/src/routes/features/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7a5bf8f167d9bc141dbd3173240918a03e28bb4f
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/features/common.ts
@@ -0,0 +1,12 @@
+/**
+ * Common utilities for features routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+const logger = createLogger('Features');
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/features/index.ts b/temp_repo/apps/server/src/routes/features/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..60ef92317af5cc73a82ffd94efdc486dc23c4ae2
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/features/index.ts
@@ -0,0 +1,95 @@
+/**
+ * Features routes - HTTP API for feature management
+ */
+
+import { Router } from 'express';
+import { FeatureLoader } from '../../services/feature-loader.js';
+import type { SettingsService } from '../../services/settings-service.js';
+import type { AutoModeServiceCompat } from '../../services/auto-mode/index.js';
+import type { EventEmitter } from '../../lib/events.js';
+import { validatePathParams } from '../../middleware/validate-paths.js';
+import { createListHandler } from './routes/list.js';
+import { createGetHandler } from './routes/get.js';
+import { createCreateHandler } from './routes/create.js';
+import { createUpdateHandler } from './routes/update.js';
+import { createBulkUpdateHandler } from './routes/bulk-update.js';
+import { createBulkDeleteHandler } from './routes/bulk-delete.js';
+import { createDeleteHandler } from './routes/delete.js';
+import { createAgentOutputHandler, createRawOutputHandler } from './routes/agent-output.js';
+import { createGenerateTitleHandler } from './routes/generate-title.js';
+import { createExportHandler } from './routes/export.js';
+import { createImportHandler, createConflictCheckHandler } from './routes/import.js';
+import {
+  createOrphanedListHandler,
+  createOrphanedResolveHandler,
+  createOrphanedBulkResolveHandler,
+} from './routes/orphaned.js';
+
+export function createFeaturesRoutes(
+  featureLoader: FeatureLoader,
+  settingsService?: SettingsService,
+  events?: EventEmitter,
+  autoModeService?: AutoModeServiceCompat
+): Router {
+  const router = Router();
+
+  router.post(
+    '/list',
+    validatePathParams('projectPath'),
+    createListHandler(featureLoader, autoModeService)
+  );
+  router.get(
+    '/list',
+    validatePathParams('projectPath'),
+    createListHandler(featureLoader, autoModeService)
+  );
+  router.post('/get', validatePathParams('projectPath'), createGetHandler(featureLoader));
+  router.post(
+    '/create',
+    validatePathParams('projectPath'),
+    createCreateHandler(featureLoader, events)
+  );
+  router.post(
+    '/update',
+    validatePathParams('projectPath'),
+    createUpdateHandler(featureLoader, events)
+  );
+  router.post(
+    '/bulk-update',
+    validatePathParams('projectPath'),
+    createBulkUpdateHandler(featureLoader)
+  );
+  router.post(
+    '/bulk-delete',
+    validatePathParams('projectPath'),
+    createBulkDeleteHandler(featureLoader)
+  );
+  router.post('/delete', validatePathParams('projectPath'), createDeleteHandler(featureLoader));
+  router.post('/agent-output', createAgentOutputHandler(featureLoader));
+  router.post('/raw-output', createRawOutputHandler(featureLoader));
+  router.post('/generate-title', createGenerateTitleHandler(settingsService));
+  router.post('/export', validatePathParams('projectPath'), createExportHandler(featureLoader));
+  router.post('/import', validatePathParams('projectPath'), createImportHandler(featureLoader));
+  router.post(
+    '/check-conflicts',
+    validatePathParams('projectPath'),
+    createConflictCheckHandler(featureLoader)
+  );
+  router.post(
+    '/orphaned',
+    validatePathParams('projectPath'),
+    createOrphanedListHandler(featureLoader, autoModeService)
+  );
+  router.post(
+    '/orphaned/resolve',
+    validatePathParams('projectPath'),
+    createOrphanedResolveHandler(featureLoader, autoModeService)
+  );
+  router.post(
+    '/orphaned/bulk-resolve',
+    validatePathParams('projectPath'),
+    createOrphanedBulkResolveHandler(featureLoader)
+  );
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/features/routes/agent-output.ts b/temp_repo/apps/server/src/routes/features/routes/agent-output.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d88e6d6f1f5b9cbdf469e4a25cee67a154e20f9c
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/features/routes/agent-output.ts
@@ -0,0 +1,61 @@
+/**
+ * POST /agent-output endpoint - Get agent output for a feature
+ * POST /raw-output endpoint - Get raw JSONL output for debugging
+ */
+
+import type { Request, Response } from 'express';
+import { FeatureLoader } from '../../../services/feature-loader.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createAgentOutputHandler(featureLoader: FeatureLoader) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureId } = req.body as {
+        projectPath: string;
+        featureId: string;
+      };
+
+      if (!projectPath || !featureId) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and featureId are required',
+        });
+        return;
+      }
+
+      const content = await featureLoader.getAgentOutput(projectPath, featureId);
+      res.json({ success: true, content });
+    } catch (error) {
+      logError(error, 'Get agent output failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+/**
+ * Handler for getting raw JSONL output for debugging
+ */
+export function createRawOutputHandler(featureLoader: FeatureLoader) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureId } = req.body as {
+        projectPath: string;
+        featureId: string;
+      };
+
+      if (!projectPath || !featureId) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and featureId are required',
+        });
+        return;
+      }
+
+      const content = await featureLoader.getRawOutput(projectPath, featureId);
+      res.json({ success: true, content });
+    } catch (error) {
+      logError(error, 'Get raw output failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/features/routes/bulk-delete.ts b/temp_repo/apps/server/src/routes/features/routes/bulk-delete.ts
new file mode 100644
index 0000000000000000000000000000000000000000..851c288cf9bbba78d39a8da407ad2e71fc748677
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/features/routes/bulk-delete.ts
@@ -0,0 +1,69 @@
+/**
+ * POST /bulk-delete endpoint - Delete multiple features at once
+ */
+
+import type { Request, Response } from 'express';
+import { FeatureLoader } from '../../../services/feature-loader.js';
+import { getErrorMessage, logError } from '../common.js';
+
+interface BulkDeleteRequest {
+  projectPath: string;
+  featureIds: string[];
+}
+
+interface BulkDeleteResult {
+  featureId: string;
+  success: boolean;
+  error?: string;
+}
+
+export function createBulkDeleteHandler(featureLoader: FeatureLoader) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureIds } = req.body as BulkDeleteRequest;
+
+      if (!projectPath || !featureIds || !Array.isArray(featureIds) || featureIds.length === 0) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and featureIds (non-empty array) are required',
+        });
+        return;
+      }
+
+      // Process in parallel batches of 20 for efficiency
+      const BATCH_SIZE = 20;
+      const results: BulkDeleteResult[] = [];
+
+      for (let i = 0; i < featureIds.length; i += BATCH_SIZE) {
+        const batch = featureIds.slice(i, i + BATCH_SIZE);
+        const batchResults = await Promise.all(
+          batch.map(async (featureId) => {
+            const success = await featureLoader.delete(projectPath, featureId);
+            if (success) {
+              return { featureId, success: true };
+            }
+            return {
+              featureId,
+              success: false,
+              error: 'Deletion failed. Check server logs for details.',
+            };
+          })
+        );
+        results.push(...batchResults);
+      }
+
+      const successCount = results.reduce((count, r) => count + (r.success ? 1 : 0), 0);
+      const failureCount = results.length - successCount;
+
+      res.json({
+        success: failureCount === 0,
+        deletedCount: successCount,
+        failedCount: failureCount,
+        results,
+      });
+    } catch (error) {
+      logError(error, 'Bulk delete features failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/features/routes/bulk-update.ts b/temp_repo/apps/server/src/routes/features/routes/bulk-update.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3fb8cc9f8aca14e9f7a99d4f772db0e848ce23b6
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/features/routes/bulk-update.ts
@@ -0,0 +1,94 @@
+/**
+ * POST /bulk-update endpoint - Update multiple features at once
+ */
+
+import type { Request, Response } from 'express';
+import { FeatureLoader } from '../../../services/feature-loader.js';
+import type { Feature } from '@automaker/types';
+import { getErrorMessage, logError } from '../common.js';
+
+interface BulkUpdateRequest {
+  projectPath: string;
+  featureIds: string[];
+  updates: Partial<Feature>;
+}
+
+interface BulkUpdateResult {
+  featureId: string;
+  success: boolean;
+  error?: string;
+}
+
+export function createBulkUpdateHandler(featureLoader: FeatureLoader) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureIds, updates } = req.body as BulkUpdateRequest;
+
+      if (!projectPath || !featureIds || !Array.isArray(featureIds) || featureIds.length === 0) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and featureIds (non-empty array) are required',
+        });
+        return;
+      }
+
+      if (!updates || Object.keys(updates).length === 0) {
+        res.status(400).json({
+          success: false,
+          error: 'updates object with at least one field is required',
+        });
+        return;
+      }
+
+      const results: BulkUpdateResult[] = [];
+      const updatedFeatures: Feature[] = [];
+
+      // Process in parallel batches of 20 for efficiency
+      const BATCH_SIZE = 20;
+      for (let i = 0; i < featureIds.length; i += BATCH_SIZE) {
+        const batch = featureIds.slice(i, i + BATCH_SIZE);
+        const batchResults = await Promise.all(
+          batch.map(async (featureId) => {
+            try {
+              const updated = await featureLoader.update(projectPath, featureId, updates);
+              return { featureId, success: true as const, feature: updated };
+            } catch (error) {
+              return {
+                featureId,
+                success: false as const,
+                error: getErrorMessage(error),
+              };
+            }
+          })
+        );
+
+        for (const result of batchResults) {
+          if (result.success) {
+            results.push({ featureId: result.featureId, success: true });
+            updatedFeatures.push(result.feature);
+          } else {
+            results.push({
+              featureId: result.featureId,
+              success: false,
+              error: result.error,
+            });
+          }
+        }
+      }
+
+      const successCount = results.filter((r) => r.success).length;
+      const failureCount = results.filter((r) => !r.success).length;
+
+      res.json({
+        success: failureCount === 0,
+        updatedCount: successCount,
+        failedCount: failureCount,
+        results,
+        features: updatedFeatures,
+      });
+    } catch (error) {
+      logError(error, 'Bulk update features failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/features/routes/create.ts b/temp_repo/apps/server/src/routes/features/routes/create.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c607e72e414b05d7dbf4f1d7922508b1037f3893
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/features/routes/create.ts
@@ -0,0 +1,44 @@
+/**
+ * POST /create endpoint - Create a new feature
+ */
+
+import type { Request, Response } from 'express';
+import { FeatureLoader } from '../../../services/feature-loader.js';
+import type { EventEmitter } from '../../../lib/events.js';
+import type { Feature } from '@automaker/types';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createCreateHandler(featureLoader: FeatureLoader, events?: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, feature } = req.body as {
+        projectPath: string;
+        feature: Partial<Feature>;
+      };
+
+      if (!projectPath || !feature) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and feature are required',
+        });
+        return;
+      }
+
+      const created = await featureLoader.create(projectPath, feature);
+
+      // Emit feature_created event for hooks
+      if (events) {
+        events.emit('feature:created', {
+          featureId: created.id,
+          featureName: created.title || 'Untitled Feature',
+          projectPath,
+        });
+      }
+
+      res.json({ success: true, feature: created });
+    } catch (error) {
+      logError(error, 'Create feature failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/features/routes/delete.ts b/temp_repo/apps/server/src/routes/features/routes/delete.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2b6831f6770d4e6a01771c13beef06dbe59857f5
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/features/routes/delete.ts
@@ -0,0 +1,32 @@
+/**
+ * POST /delete endpoint - Delete a feature
+ */
+
+import type { Request, Response } from 'express';
+import { FeatureLoader } from '../../../services/feature-loader.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createDeleteHandler(featureLoader: FeatureLoader) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureId } = req.body as {
+        projectPath: string;
+        featureId: string;
+      };
+
+      if (!projectPath || !featureId) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and featureId are required',
+        });
+        return;
+      }
+
+      const success = await featureLoader.delete(projectPath, featureId);
+      res.json({ success });
+    } catch (error) {
+      logError(error, 'Delete feature failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/features/routes/export.ts b/temp_repo/apps/server/src/routes/features/routes/export.ts
new file mode 100644
index 0000000000000000000000000000000000000000..28a048b4b59f74fd5a3d843fc6d3d93a21c922c3
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/features/routes/export.ts
@@ -0,0 +1,96 @@
+/**
+ * POST /export endpoint - Export features to JSON or YAML format
+ */
+
+import type { Request, Response } from 'express';
+import type { FeatureLoader } from '../../../services/feature-loader.js';
+import {
+  getFeatureExportService,
+  type ExportFormat,
+  type BulkExportOptions,
+} from '../../../services/feature-export-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+interface ExportRequest {
+  projectPath: string;
+  /** Feature IDs to export. If empty/undefined, exports all features */
+  featureIds?: string[];
+  /** Export format: 'json' or 'yaml' */
+  format?: ExportFormat;
+  /** Whether to include description history */
+  includeHistory?: boolean;
+  /** Whether to include plan spec */
+  includePlanSpec?: boolean;
+  /** Filter by category */
+  category?: string;
+  /** Filter by status */
+  status?: string;
+  /** Pretty print output */
+  prettyPrint?: boolean;
+  /** Optional metadata to include */
+  metadata?: {
+    projectName?: string;
+    projectPath?: string;
+    branch?: string;
+    [key: string]: unknown;
+  };
+}
+
+export function createExportHandler(_featureLoader: FeatureLoader) {
+  const exportService = getFeatureExportService();
+
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const {
+        projectPath,
+        featureIds,
+        format = 'json',
+        includeHistory = true,
+        includePlanSpec = true,
+        category,
+        status,
+        prettyPrint = true,
+        metadata,
+      } = req.body as ExportRequest;
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      // Validate format
+      if (format !== 'json' && format !== 'yaml') {
+        res.status(400).json({
+          success: false,
+          error: 'format must be "json" or "yaml"',
+        });
+        return;
+      }
+
+      const options: BulkExportOptions = {
+        format,
+        includeHistory,
+        includePlanSpec,
+        category,
+        status,
+        featureIds,
+        prettyPrint,
+        metadata,
+      };
+
+      const exportData = await exportService.exportFeatures(projectPath, options);
+
+      // Return the export data as a string in the response
+      res.json({
+        success: true,
+        data: exportData,
+        format,
+        contentType: format === 'json' ? 'application/json' : 'application/x-yaml',
+        filename: `features-export.${format === 'json' ? 'json' : 'yaml'}`,
+      });
+    } catch (error) {
+      logError(error, 'Export features failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/features/routes/generate-title.ts b/temp_repo/apps/server/src/routes/features/routes/generate-title.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a84680b0c45b8da06382d937d98aed64f511acc6
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/features/routes/generate-title.ts
@@ -0,0 +1,109 @@
+/**
+ * POST /features/generate-title endpoint - Generate a concise title from description
+ *
+ * Uses the provider abstraction to generate a short, descriptive title
+ * from a feature description. Works with any configured provider (Claude, Cursor, etc.).
+ */
+
+import type { Request, Response } from 'express';
+import { createLogger } from '@automaker/utils';
+import { CLAUDE_MODEL_MAP } from '@automaker/model-resolver';
+import { simpleQuery } from '../../../providers/simple-query-service.js';
+import type { SettingsService } from '../../../services/settings-service.js';
+import { getPromptCustomization } from '../../../lib/settings-helpers.js';
+
+const logger = createLogger('GenerateTitle');
+
+interface GenerateTitleRequestBody {
+  description: string;
+  projectPath?: string;
+}
+
+interface GenerateTitleSuccessResponse {
+  success: true;
+  title: string;
+}
+
+interface GenerateTitleErrorResponse {
+  success: false;
+  error: string;
+}
+
+export function createGenerateTitleHandler(
+  settingsService?: SettingsService
+): (req: Request, res: Response) => Promise<void> {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { description } = req.body as GenerateTitleRequestBody;
+
+      if (!description || typeof description !== 'string') {
+        const response: GenerateTitleErrorResponse = {
+          success: false,
+          error: 'description is required and must be a string',
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      const trimmedDescription = description.trim();
+      if (trimmedDescription.length === 0) {
+        const response: GenerateTitleErrorResponse = {
+          success: false,
+          error: 'description cannot be empty',
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      logger.info(`Generating title for description: ${trimmedDescription.substring(0, 50)}...`);
+
+      // Get customized prompts from settings
+      const prompts = await getPromptCustomization(settingsService, '[GenerateTitle]');
+      const systemPrompt = prompts.titleGeneration.systemPrompt;
+
+      // Get credentials for API calls (uses hardcoded haiku model, no phase setting)
+      const credentials = await settingsService?.getCredentials();
+
+      const userPrompt = `Generate a concise title for this feature:\n\n${trimmedDescription}`;
+
+      // Use simpleQuery - provider abstraction handles all the streaming/extraction
+      const result = await simpleQuery({
+        prompt: `${systemPrompt}\n\n${userPrompt}`,
+        model: CLAUDE_MODEL_MAP.haiku,
+        cwd: process.cwd(),
+        maxTurns: 1,
+        allowedTools: [],
+        credentials, // Pass credentials for resolving 'credentials' apiKeySource
+      });
+
+      const title = result.text;
+
+      if (!title || title.trim().length === 0) {
+        logger.warn('Received empty response from AI');
+        const response: GenerateTitleErrorResponse = {
+          success: false,
+          error: 'Failed to generate title - empty response',
+        };
+        res.status(500).json(response);
+        return;
+      }
+
+      logger.info(`Generated title: ${title.trim()}`);
+
+      const response: GenerateTitleSuccessResponse = {
+        success: true,
+        title: title.trim(),
+      };
+      res.json(response);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+      logger.error('Title generation failed:', errorMessage);
+
+      const response: GenerateTitleErrorResponse = {
+        success: false,
+        error: errorMessage,
+      };
+      res.status(500).json(response);
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/features/routes/get.ts b/temp_repo/apps/server/src/routes/features/routes/get.ts
new file mode 100644
index 0000000000000000000000000000000000000000..96f63fb8a06763755a0eb6d7531a8ff440c9617a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/features/routes/get.ts
@@ -0,0 +1,37 @@
+/**
+ * POST /get endpoint - Get a single feature
+ */
+
+import type { Request, Response } from 'express';
+import { FeatureLoader } from '../../../services/feature-loader.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createGetHandler(featureLoader: FeatureLoader) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureId } = req.body as {
+        projectPath: string;
+        featureId: string;
+      };
+
+      if (!projectPath || !featureId) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and featureId are required',
+        });
+        return;
+      }
+
+      const feature = await featureLoader.get(projectPath, featureId);
+      if (!feature) {
+        res.status(404).json({ success: false, error: 'Feature not found' });
+        return;
+      }
+
+      res.json({ success: true, feature });
+    } catch (error) {
+      logError(error, 'Get feature failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/features/routes/import.ts b/temp_repo/apps/server/src/routes/features/routes/import.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aa8cfce14eab7ac1dd041388527301994f5ca100
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/features/routes/import.ts
@@ -0,0 +1,210 @@
+/**
+ * POST /import endpoint - Import features from JSON or YAML format
+ */
+
+import type { Request, Response } from 'express';
+import type { FeatureLoader } from '../../../services/feature-loader.js';
+import type { FeatureImportResult, Feature, FeatureExport } from '@automaker/types';
+import { getFeatureExportService } from '../../../services/feature-export-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+interface ImportRequest {
+  projectPath: string;
+  /** Raw JSON or YAML string containing feature data */
+  data: string;
+  /** Whether to overwrite existing features with same ID */
+  overwrite?: boolean;
+  /** Whether to preserve branch info from imported features */
+  preserveBranchInfo?: boolean;
+  /** Optional category to assign to all imported features */
+  targetCategory?: string;
+}
+
+interface ConflictCheckRequest {
+  projectPath: string;
+  /** Raw JSON or YAML string containing feature data */
+  data: string;
+}
+
+interface ConflictInfo {
+  featureId: string;
+  title?: string;
+  existingTitle?: string;
+  hasConflict: boolean;
+}
+
+export function createImportHandler(_featureLoader: FeatureLoader) {
+  const exportService = getFeatureExportService();
+
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const {
+        projectPath,
+        data,
+        overwrite = false,
+        preserveBranchInfo = false,
+        targetCategory,
+      } = req.body as ImportRequest;
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!data) {
+        res.status(400).json({ success: false, error: 'data is required' });
+        return;
+      }
+
+      // Detect format and parse the data
+      const format = exportService.detectFormat(data);
+      if (!format) {
+        res.status(400).json({
+          success: false,
+          error: 'Invalid data format. Expected valid JSON or YAML.',
+        });
+        return;
+      }
+
+      const parsed = exportService.parseImportData(data);
+      if (!parsed) {
+        res.status(400).json({
+          success: false,
+          error: 'Failed to parse import data. Ensure it is valid JSON or YAML.',
+        });
+        return;
+      }
+
+      // Determine if this is a single feature or bulk import
+      const isBulkImport =
+        'features' in parsed && Array.isArray((parsed as { features: unknown }).features);
+
+      let results: FeatureImportResult[];
+
+      if (isBulkImport) {
+        // Bulk import
+        results = await exportService.importFeatures(projectPath, data, {
+          overwrite,
+          preserveBranchInfo,
+          targetCategory,
+        });
+      } else {
+        // Single feature import - we know it's not a bulk export at this point
+        // It must be either a Feature or FeatureExport
+        const singleData = parsed as Feature | FeatureExport;
+
+        const result = await exportService.importFeature(projectPath, {
+          data: singleData,
+          overwrite,
+          preserveBranchInfo,
+          targetCategory,
+        });
+        results = [result];
+      }
+
+      const successCount = results.filter((r) => r.success).length;
+      const failureCount = results.filter((r) => !r.success).length;
+      const allSuccessful = failureCount === 0;
+
+      res.json({
+        success: allSuccessful,
+        importedCount: successCount,
+        failedCount: failureCount,
+        results,
+      });
+    } catch (error) {
+      logError(error, 'Import features failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+/**
+ * Create handler for checking conflicts before import
+ */
+export function createConflictCheckHandler(featureLoader: FeatureLoader) {
+  const exportService = getFeatureExportService();
+
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, data } = req.body as ConflictCheckRequest;
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!data) {
+        res.status(400).json({ success: false, error: 'data is required' });
+        return;
+      }
+
+      // Parse the import data
+      const format = exportService.detectFormat(data);
+      if (!format) {
+        res.status(400).json({
+          success: false,
+          error: 'Invalid data format. Expected valid JSON or YAML.',
+        });
+        return;
+      }
+
+      const parsed = exportService.parseImportData(data);
+      if (!parsed) {
+        res.status(400).json({
+          success: false,
+          error: 'Failed to parse import data.',
+        });
+        return;
+      }
+
+      // Extract features from the data using type guards
+      let featuresToCheck: Array<{ id: string; title?: string }> = [];
+
+      if (exportService.isBulkExport(parsed)) {
+        // Bulk export format
+        featuresToCheck = parsed.features.map((f) => ({
+          id: f.feature.id,
+          title: f.feature.title,
+        }));
+      } else if (exportService.isFeatureExport(parsed)) {
+        // Single FeatureExport format
+        featuresToCheck = [
+          {
+            id: parsed.feature.id,
+            title: parsed.feature.title,
+          },
+        ];
+      } else if (exportService.isRawFeature(parsed)) {
+        // Raw Feature format
+        featuresToCheck = [{ id: parsed.id, title: parsed.title }];
+      }
+
+      // Check each feature for conflicts in parallel
+      const conflicts: ConflictInfo[] = await Promise.all(
+        featuresToCheck.map(async (feature) => {
+          const existing = await featureLoader.get(projectPath, feature.id);
+          return {
+            featureId: feature.id,
+            title: feature.title,
+            existingTitle: existing?.title,
+            hasConflict: !!existing,
+          };
+        })
+      );
+
+      const hasConflicts = conflicts.some((c) => c.hasConflict);
+
+      res.json({
+        success: true,
+        hasConflicts,
+        conflicts,
+        totalFeatures: featuresToCheck.length,
+        conflictCount: conflicts.filter((c) => c.hasConflict).length,
+      });
+    } catch (error) {
+      logError(error, 'Conflict check failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/features/routes/list.ts b/temp_repo/apps/server/src/routes/features/routes/list.ts
new file mode 100644
index 0000000000000000000000000000000000000000..46ff3b921e44ba51744097fad3abecb2264e4e7e
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/features/routes/list.ts
@@ -0,0 +1,73 @@
+/**
+ * POST/GET /list endpoint - List all features for a project
+ *
+ * projectPath may come from req.body (POST) or req.query (GET fallback).
+ *
+ * Also performs orphan detection when a project is loaded to identify
+ * features whose branches no longer exist. This runs on every project load/switch.
+ */
+
+import type { Request, Response } from 'express';
+import { FeatureLoader } from '../../../services/feature-loader.js';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+import { getErrorMessage, logError } from '../common.js';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('FeaturesListRoute');
+
+export function createListHandler(
+  featureLoader: FeatureLoader,
+  autoModeService?: AutoModeServiceCompat
+) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const bodyProjectPath =
+        typeof req.body === 'object' && req.body !== null
+          ? (req.body as { projectPath?: unknown }).projectPath
+          : undefined;
+      const queryProjectPath = req.query.projectPath;
+      const projectPath =
+        typeof bodyProjectPath === 'string'
+          ? bodyProjectPath
+          : typeof queryProjectPath === 'string'
+            ? queryProjectPath
+            : undefined;
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      const features = await featureLoader.getAll(projectPath);
+
+      // Run orphan detection in background when project is loaded
+      // This detects features whose branches no longer exist (e.g., after merge/delete)
+      // We don't await this to keep the list response fast
+      // Note: detectOrphanedFeatures handles errors internally and always resolves
+      if (autoModeService) {
+        autoModeService
+          .detectOrphanedFeatures(projectPath, features)
+          .then((orphanedFeatures) => {
+            if (orphanedFeatures.length > 0) {
+              logger.info(
+                `[ProjectLoad] Detected ${orphanedFeatures.length} orphaned feature(s) in ${projectPath}`
+              );
+              for (const { feature, missingBranch } of orphanedFeatures) {
+                logger.info(
+                  `[ProjectLoad] Orphaned: ${feature.title || feature.id} - branch "${missingBranch}" no longer exists`
+                );
+              }
+            }
+          })
+          .catch((error) => {
+            logger.warn(`[ProjectLoad] Orphan detection failed for ${projectPath}:`, error);
+          });
+      }
+
+      res.json({ success: true, features });
+    } catch (error) {
+      logError(error, 'List features failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/features/routes/orphaned.ts b/temp_repo/apps/server/src/routes/features/routes/orphaned.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e44711be1be64edeb2fe329930c9dfa472834b5a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/features/routes/orphaned.ts
@@ -0,0 +1,287 @@
+/**
+ * POST /orphaned endpoint - Detect orphaned features (features with missing branches)
+ * POST /orphaned/resolve endpoint - Resolve an orphaned feature (delete, create-worktree, or move-to-branch)
+ * POST /orphaned/bulk-resolve endpoint - Resolve multiple orphaned features at once
+ */
+
+import crypto from 'crypto';
+import path from 'path';
+import type { Request, Response } from 'express';
+import { FeatureLoader } from '../../../services/feature-loader.js';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+import { getErrorMessage, logError } from '../common.js';
+import { execGitCommand } from '../../../lib/git.js';
+import { deleteWorktreeMetadata } from '../../../lib/worktree-metadata.js';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('OrphanedFeatures');
+
+type ResolveAction = 'delete' | 'create-worktree' | 'move-to-branch';
+const VALID_ACTIONS: ResolveAction[] = ['delete', 'create-worktree', 'move-to-branch'];
+
+export function createOrphanedListHandler(
+  featureLoader: FeatureLoader,
+  autoModeService?: AutoModeServiceCompat
+) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as { projectPath: string };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!autoModeService) {
+        res.status(500).json({ success: false, error: 'Auto-mode service not available' });
+        return;
+      }
+
+      const orphanedFeatures = await autoModeService.detectOrphanedFeatures(projectPath);
+
+      res.json({ success: true, orphanedFeatures });
+    } catch (error) {
+      logError(error, 'Detect orphaned features failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+export function createOrphanedResolveHandler(
+  featureLoader: FeatureLoader,
+  _autoModeService?: AutoModeServiceCompat
+) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureId, action, targetBranch } = req.body as {
+        projectPath: string;
+        featureId: string;
+        action: ResolveAction;
+        targetBranch?: string | null;
+      };
+
+      if (!projectPath || !featureId || !action) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath, featureId, and action are required',
+        });
+        return;
+      }
+
+      if (!VALID_ACTIONS.includes(action)) {
+        res.status(400).json({
+          success: false,
+          error: `action must be one of: ${VALID_ACTIONS.join(', ')}`,
+        });
+        return;
+      }
+
+      const result = await resolveOrphanedFeature(
+        featureLoader,
+        projectPath,
+        featureId,
+        action,
+        targetBranch
+      );
+
+      if (!result.success) {
+        res.status(result.error === 'Feature not found' ? 404 : 500).json(result);
+        return;
+      }
+
+      res.json(result);
+    } catch (error) {
+      logError(error, 'Resolve orphaned feature failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+interface BulkResolveResult {
+  featureId: string;
+  success: boolean;
+  action?: string;
+  error?: string;
+}
+
+async function resolveOrphanedFeature(
+  featureLoader: FeatureLoader,
+  projectPath: string,
+  featureId: string,
+  action: ResolveAction,
+  targetBranch?: string | null
+): Promise<BulkResolveResult> {
+  try {
+    const feature = await featureLoader.get(projectPath, featureId);
+    if (!feature) {
+      return { featureId, success: false, error: 'Feature not found' };
+    }
+
+    const missingBranch = feature.branchName;
+
+    switch (action) {
+      case 'delete': {
+        if (missingBranch) {
+          try {
+            await deleteWorktreeMetadata(projectPath, missingBranch);
+          } catch {
+            // Non-fatal
+          }
+        }
+        const success = await featureLoader.delete(projectPath, featureId);
+        if (!success) {
+          return { featureId, success: false, error: 'Deletion failed' };
+        }
+        logger.info(`Deleted orphaned feature ${featureId} (branch: ${missingBranch})`);
+        return { featureId, success: true, action: 'deleted' };
+      }
+
+      case 'create-worktree': {
+        if (!missingBranch) {
+          return { featureId, success: false, error: 'Feature has no branch name to recreate' };
+        }
+
+        const sanitizedName = missingBranch.replace(/[^a-zA-Z0-9_-]/g, '-');
+        const hash = crypto.createHash('sha1').update(missingBranch).digest('hex').slice(0, 8);
+        const worktreesDir = path.join(projectPath, '.worktrees');
+        const worktreePath = path.join(worktreesDir, `${sanitizedName}-${hash}`);
+
+        try {
+          await execGitCommand(['worktree', 'add', '-b', missingBranch, worktreePath], projectPath);
+        } catch (error) {
+          const msg = getErrorMessage(error);
+          if (msg.includes('already exists')) {
+            try {
+              await execGitCommand(['worktree', 'add', worktreePath, missingBranch], projectPath);
+            } catch (innerError) {
+              return {
+                featureId,
+                success: false,
+                error: `Failed to create worktree: ${getErrorMessage(innerError)}`,
+              };
+            }
+          } else {
+            return { featureId, success: false, error: `Failed to create worktree: ${msg}` };
+          }
+        }
+
+        logger.info(
+          `Created worktree for orphaned feature ${featureId} at ${worktreePath} (branch: ${missingBranch})`
+        );
+        return { featureId, success: true, action: 'worktree-created' };
+      }
+
+      case 'move-to-branch': {
+        // Move the feature to a different branch (or clear branch to use main worktree)
+        const newBranch = targetBranch || null;
+
+        // Validate that the target branch exists if one is specified
+        if (newBranch) {
+          try {
+            await execGitCommand(['rev-parse', '--verify', newBranch], projectPath);
+          } catch {
+            return {
+              featureId,
+              success: false,
+              error: `Target branch "${newBranch}" does not exist`,
+            };
+          }
+        }
+
+        await featureLoader.update(projectPath, featureId, {
+          branchName: newBranch,
+          status: 'pending',
+        });
+
+        // Clean up old worktree metadata
+        if (missingBranch) {
+          try {
+            await deleteWorktreeMetadata(projectPath, missingBranch);
+          } catch {
+            // Non-fatal
+          }
+        }
+
+        const destination = newBranch ?? 'main worktree';
+        logger.info(
+          `Moved orphaned feature ${featureId} to ${destination} (was: ${missingBranch})`
+        );
+        return { featureId, success: true, action: 'moved' };
+      }
+    }
+  } catch (error) {
+    return { featureId, success: false, error: getErrorMessage(error) };
+  }
+}
+
+export function createOrphanedBulkResolveHandler(featureLoader: FeatureLoader) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureIds, action, targetBranch } = req.body as {
+        projectPath: string;
+        featureIds: string[];
+        action: ResolveAction;
+        targetBranch?: string | null;
+      };
+
+      if (
+        !projectPath ||
+        !featureIds ||
+        !Array.isArray(featureIds) ||
+        featureIds.length === 0 ||
+        !action
+      ) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath, featureIds (non-empty array), and action are required',
+        });
+        return;
+      }
+
+      if (!VALID_ACTIONS.includes(action)) {
+        res.status(400).json({
+          success: false,
+          error: `action must be one of: ${VALID_ACTIONS.join(', ')}`,
+        });
+        return;
+      }
+
+      // Process sequentially for worktree creation (git operations shouldn't race),
+      // in parallel for delete/move-to-branch
+      const results: BulkResolveResult[] = [];
+
+      if (action === 'create-worktree') {
+        for (const featureId of featureIds) {
+          const result = await resolveOrphanedFeature(
+            featureLoader,
+            projectPath,
+            featureId,
+            action,
+            targetBranch
+          );
+          results.push(result);
+        }
+      } else {
+        const batchResults = await Promise.all(
+          featureIds.map((featureId) =>
+            resolveOrphanedFeature(featureLoader, projectPath, featureId, action, targetBranch)
+          )
+        );
+        results.push(...batchResults);
+      }
+
+      const successCount = results.filter((r) => r.success).length;
+      const failedCount = results.length - successCount;
+
+      res.json({
+        success: failedCount === 0,
+        resolvedCount: successCount,
+        failedCount,
+        results,
+      });
+    } catch (error) {
+      logError(error, 'Bulk resolve orphaned features failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/features/routes/update.ts b/temp_repo/apps/server/src/routes/features/routes/update.ts
new file mode 100644
index 0000000000000000000000000000000000000000..205838a492626098d20ff93a17db6e66243c6c96
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/features/routes/update.ts
@@ -0,0 +1,93 @@
+/**
+ * POST /update endpoint - Update a feature
+ */
+
+import type { Request, Response } from 'express';
+import { FeatureLoader } from '../../../services/feature-loader.js';
+import type { Feature, FeatureStatus } from '@automaker/types';
+import type { EventEmitter } from '../../../lib/events.js';
+import { getErrorMessage, logError } from '../common.js';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('features/update');
+
+// Statuses that should trigger syncing to app_spec.txt
+const SYNC_TRIGGER_STATUSES: FeatureStatus[] = ['verified', 'completed'];
+
+export function createUpdateHandler(featureLoader: FeatureLoader, events?: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const {
+        projectPath,
+        featureId,
+        updates,
+        descriptionHistorySource,
+        enhancementMode,
+        preEnhancementDescription,
+      } = req.body as {
+        projectPath: string;
+        featureId: string;
+        updates: Partial<Feature>;
+        descriptionHistorySource?: 'enhance' | 'edit';
+        enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer';
+        preEnhancementDescription?: string;
+      };
+
+      if (!projectPath || !featureId || !updates) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath, featureId, and updates are required',
+        });
+        return;
+      }
+
+      // Get the current feature to detect status changes
+      const currentFeature = await featureLoader.get(projectPath, featureId);
+      if (!currentFeature) {
+        res.status(404).json({ success: false, error: `Feature ${featureId} not found` });
+        return;
+      }
+      const previousStatus = currentFeature.status as FeatureStatus;
+      const newStatus = updates.status as FeatureStatus | undefined;
+
+      const updated = await featureLoader.update(
+        projectPath,
+        featureId,
+        updates,
+        descriptionHistorySource,
+        enhancementMode,
+        preEnhancementDescription
+      );
+
+      // Emit completion event and sync to app_spec.txt when status transitions to verified/completed
+      if (newStatus && SYNC_TRIGGER_STATUSES.includes(newStatus) && previousStatus !== newStatus) {
+        events?.emit('feature:completed', {
+          featureId,
+          featureName: updated.title,
+          projectPath,
+          passes: true,
+          message:
+            newStatus === 'verified' ? 'Feature verified manually' : 'Feature completed manually',
+          executionMode: 'manual',
+        });
+
+        try {
+          const synced = await featureLoader.syncFeatureToAppSpec(projectPath, updated);
+          if (synced) {
+            logger.info(
+              `Synced feature "${updated.title || updated.id}" to app_spec.txt on status change to ${newStatus}`
+            );
+          }
+        } catch (syncError) {
+          // Log the sync error but don't fail the update operation
+          logger.error(`Failed to sync feature to app_spec.txt:`, syncError);
+        }
+      }
+
+      res.json({ success: true, feature: updated });
+    } catch (error) {
+      logError(error, 'Update feature failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/common.ts b/temp_repo/apps/server/src/routes/fs/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6386c83e5c5c2f9f0435772a11ba6d88db0525fa
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/common.ts
@@ -0,0 +1,12 @@
+/**
+ * Common utilities for fs routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+const logger = createLogger('FS');
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/fs/index.ts b/temp_repo/apps/server/src/routes/fs/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e8805102e59b67b7d35bd204d5287fe52b82e417
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/index.ts
@@ -0,0 +1,50 @@
+/**
+ * File system routes
+ * Provides REST API equivalents for Electron IPC file operations
+ */
+
+import { Router } from 'express';
+import type { EventEmitter } from '../../lib/events.js';
+import { createReadHandler } from './routes/read.js';
+import { createWriteHandler } from './routes/write.js';
+import { createMkdirHandler } from './routes/mkdir.js';
+import { createReaddirHandler } from './routes/readdir.js';
+import { createExistsHandler } from './routes/exists.js';
+import { createStatHandler } from './routes/stat.js';
+import { createDeleteHandler } from './routes/delete.js';
+import { createValidatePathHandler } from './routes/validate-path.js';
+import { createResolveDirectoryHandler } from './routes/resolve-directory.js';
+import { createSaveImageHandler } from './routes/save-image.js';
+import { createBrowseHandler } from './routes/browse.js';
+import { createImageHandler } from './routes/image.js';
+import { createSaveBoardBackgroundHandler } from './routes/save-board-background.js';
+import { createDeleteBoardBackgroundHandler } from './routes/delete-board-background.js';
+import { createBrowseProjectFilesHandler } from './routes/browse-project-files.js';
+import { createCopyHandler } from './routes/copy.js';
+import { createMoveHandler } from './routes/move.js';
+import { createDownloadHandler } from './routes/download.js';
+
+export function createFsRoutes(_events: EventEmitter): Router {
+  const router = Router();
+
+  router.post('/read', createReadHandler());
+  router.post('/write', createWriteHandler());
+  router.post('/mkdir', createMkdirHandler());
+  router.post('/readdir', createReaddirHandler());
+  router.post('/exists', createExistsHandler());
+  router.post('/stat', createStatHandler());
+  router.post('/delete', createDeleteHandler());
+  router.post('/validate-path', createValidatePathHandler());
+  router.post('/resolve-directory', createResolveDirectoryHandler());
+  router.post('/save-image', createSaveImageHandler());
+  router.post('/browse', createBrowseHandler());
+  router.get('/image', createImageHandler());
+  router.post('/save-board-background', createSaveBoardBackgroundHandler());
+  router.post('/delete-board-background', createDeleteBoardBackgroundHandler());
+  router.post('/browse-project-files', createBrowseProjectFilesHandler());
+  router.post('/copy', createCopyHandler());
+  router.post('/move', createMoveHandler());
+  router.post('/download', createDownloadHandler());
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/browse-project-files.ts b/temp_repo/apps/server/src/routes/fs/routes/browse-project-files.ts
new file mode 100644
index 0000000000000000000000000000000000000000..50afee0d2ebc20358b40d1d7d428e9fb8519a0c7
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/browse-project-files.ts
@@ -0,0 +1,191 @@
+/**
+ * POST /browse-project-files endpoint - Browse files and directories within a project
+ *
+ * Unlike /browse which only lists directories (for project folder selection),
+ * this endpoint lists both files and directories relative to a project root.
+ * Used by the file selector for "Copy files to worktree" settings.
+ *
+ * Features:
+ * - Lists both files and directories
+ * - Hides .git, .worktrees, node_modules, and other build artifacts
+ * - Returns entries relative to the project root
+ * - Supports navigating into subdirectories
+ * - Security: prevents path traversal outside project root
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import path from 'path';
+import { PathNotAllowedError } from '@automaker/platform';
+import { getErrorMessage, logError } from '../common.js';
+
+// Directories to hide from the listing (build artifacts, caches, etc.)
+const HIDDEN_DIRECTORIES = new Set([
+  '.git',
+  '.worktrees',
+  'node_modules',
+  '.automaker',
+  '__pycache__',
+  '.cache',
+  '.next',
+  '.nuxt',
+  '.svelte-kit',
+  '.turbo',
+  '.vercel',
+  '.output',
+  'coverage',
+  '.nyc_output',
+  'dist',
+  'build',
+  'out',
+  '.tmp',
+  'tmp',
+  '.venv',
+  'venv',
+  'target',
+  'vendor',
+  '.gradle',
+  '.idea',
+  '.vscode',
+]);
+
+interface ProjectFileEntry {
+  name: string;
+  relativePath: string;
+  isDirectory: boolean;
+  isFile: boolean;
+}
+
+export function createBrowseProjectFilesHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, relativePath } = req.body as {
+        projectPath: string;
+        relativePath?: string; // Relative path within the project to browse (empty = project root)
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      const resolvedProjectPath = path.resolve(projectPath);
+
+      // Determine the target directory to browse
+      let targetPath = resolvedProjectPath;
+      let currentRelativePath = '';
+
+      if (relativePath) {
+        // Security: normalize and validate the relative path
+        const normalized = path.normalize(relativePath);
+        if (normalized.startsWith('..') || path.isAbsolute(normalized)) {
+          res.status(400).json({
+            success: false,
+            error: 'Invalid relative path - must be within the project directory',
+          });
+          return;
+        }
+        targetPath = path.join(resolvedProjectPath, normalized);
+        currentRelativePath = normalized;
+
+        // Double-check the resolved path is within the project
+        // Use a separator-terminated prefix to prevent matching sibling dirs
+        // that share the same prefix (e.g. /projects/foo vs /projects/foobar).
+        const resolvedTarget = path.resolve(targetPath);
+        const projectPrefix = resolvedProjectPath.endsWith(path.sep)
+          ? resolvedProjectPath
+          : resolvedProjectPath + path.sep;
+        if (!resolvedTarget.startsWith(projectPrefix) && resolvedTarget !== resolvedProjectPath) {
+          res.status(400).json({
+            success: false,
+            error: 'Path traversal detected',
+          });
+          return;
+        }
+      }
+
+      // Determine parent relative path
+      let parentRelativePath: string | null = null;
+      if (currentRelativePath) {
+        const parent = path.dirname(currentRelativePath);
+        parentRelativePath = parent === '.' ? '' : parent;
+      }
+
+      try {
+        const stat = await secureFs.stat(targetPath);
+
+        if (!stat.isDirectory()) {
+          res.status(400).json({ success: false, error: 'Path is not a directory' });
+          return;
+        }
+
+        // Read directory contents
+        const dirEntries = await secureFs.readdir(targetPath, { withFileTypes: true });
+
+        // Filter and map entries
+        const entries: ProjectFileEntry[] = dirEntries
+          .filter((entry) => {
+            // Skip hidden directories (build artifacts, etc.)
+            if (entry.isDirectory() && HIDDEN_DIRECTORIES.has(entry.name)) {
+              return false;
+            }
+            // Skip entries starting with . (hidden files) except common config files
+            // We keep hidden files visible since users often need .env, .eslintrc, etc.
+            return true;
+          })
+          .map((entry) => {
+            const entryRelativePath = currentRelativePath
+              ? path.posix.join(currentRelativePath.replace(/\\/g, '/'), entry.name)
+              : entry.name;
+
+            return {
+              name: entry.name,
+              relativePath: entryRelativePath,
+              isDirectory: entry.isDirectory(),
+              isFile: entry.isFile(),
+            };
+          })
+          // Sort: directories first, then files, alphabetically within each group
+          .sort((a, b) => {
+            if (a.isDirectory !== b.isDirectory) {
+              return a.isDirectory ? -1 : 1;
+            }
+            return a.name.localeCompare(b.name);
+          });
+
+        res.json({
+          success: true,
+          currentRelativePath,
+          parentRelativePath,
+          entries,
+        });
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Failed to read directory';
+        const isPermissionError = errorMessage.includes('EPERM') || errorMessage.includes('EACCES');
+
+        if (isPermissionError) {
+          res.json({
+            success: true,
+            currentRelativePath,
+            parentRelativePath,
+            entries: [],
+            warning: 'Permission denied - unable to read this directory',
+          });
+        } else {
+          res.status(400).json({
+            success: false,
+            error: errorMessage,
+          });
+        }
+      }
+    } catch (error) {
+      if (error instanceof PathNotAllowedError) {
+        res.status(403).json({ success: false, error: getErrorMessage(error) });
+        return;
+      }
+
+      logError(error, 'Browse project files failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/browse.ts b/temp_repo/apps/server/src/routes/fs/routes/browse.ts
new file mode 100644
index 0000000000000000000000000000000000000000..68259291dc127af0af8eceb47ece8513f4b1423e
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/browse.ts
@@ -0,0 +1,118 @@
+/**
+ * POST /browse endpoint - Browse directories for file browser UI
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import os from 'os';
+import path from 'path';
+import { getAllowedRootDirectory, PathNotAllowedError, isPathAllowed } from '@automaker/platform';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createBrowseHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { dirPath } = req.body as { dirPath?: string };
+
+      // Default to ALLOWED_ROOT_DIRECTORY if set, otherwise home directory
+      const defaultPath = getAllowedRootDirectory() || os.homedir();
+      const targetPath = dirPath ? path.resolve(dirPath) : defaultPath;
+
+      // Detect available drives on Windows
+      const detectDrives = async (): Promise<string[]> => {
+        if (os.platform() !== 'win32') {
+          return [];
+        }
+
+        const drives: string[] = [];
+        const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+        for (const letter of letters) {
+          const drivePath = `${letter}:\\`;
+          try {
+            await secureFs.access(drivePath);
+            drives.push(drivePath);
+          } catch {
+            // Drive doesn't exist, skip it
+          }
+        }
+
+        return drives;
+      };
+
+      // Get parent directory - only if it's within the allowed root
+      const parentPath = path.dirname(targetPath);
+
+      // Determine if parent navigation should be allowed:
+      // 1. Must have a different parent (not at filesystem root)
+      // 2. If ALLOWED_ROOT_DIRECTORY is set, parent must be within it
+      const hasParent = parentPath !== targetPath && isPathAllowed(parentPath);
+
+      // Security: Don't expose parent path outside allowed root
+      const safeParentPath = hasParent ? parentPath : null;
+
+      // Get available drives
+      const drives = await detectDrives();
+
+      try {
+        const stats = await secureFs.stat(targetPath);
+
+        if (!stats.isDirectory()) {
+          res.status(400).json({ success: false, error: 'Path is not a directory' });
+          return;
+        }
+
+        // Read directory contents
+        const entries = await secureFs.readdir(targetPath, { withFileTypes: true });
+
+        // Filter for directories only and add parent directory option
+        const directories = entries
+          .filter((entry) => entry.isDirectory() && !entry.name.startsWith('.'))
+          .map((entry) => ({
+            name: entry.name,
+            path: path.join(targetPath, entry.name),
+          }))
+          .sort((a, b) => a.name.localeCompare(b.name));
+
+        res.json({
+          success: true,
+          currentPath: targetPath,
+          parentPath: safeParentPath,
+          directories,
+          drives,
+        });
+      } catch (error) {
+        // Handle permission errors gracefully - still return path info so user can navigate away
+        const errorMessage = error instanceof Error ? error.message : 'Failed to read directory';
+        const isPermissionError = errorMessage.includes('EPERM') || errorMessage.includes('EACCES');
+
+        if (isPermissionError) {
+          // Return success with empty directories so user can still navigate to parent
+          res.json({
+            success: true,
+            currentPath: targetPath,
+            parentPath: safeParentPath,
+            directories: [],
+            drives,
+            warning:
+              'Permission denied - grant Full Disk Access to Terminal in System Preferences > Privacy & Security',
+          });
+        } else {
+          res.status(400).json({
+            success: false,
+            error: errorMessage,
+          });
+        }
+      }
+    } catch (error) {
+      // Path not allowed - return 403 Forbidden
+      if (error instanceof PathNotAllowedError) {
+        res.status(403).json({ success: false, error: getErrorMessage(error) });
+        return;
+      }
+
+      logError(error, 'Browse directories failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/copy.ts b/temp_repo/apps/server/src/routes/fs/routes/copy.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c52a546e6154ce50a9be5637116dad41d90b77b2
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/copy.ts
@@ -0,0 +1,99 @@
+/**
+ * POST /copy endpoint - Copy file or directory to a new location
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import path from 'path';
+import { PathNotAllowedError } from '@automaker/platform';
+import { mkdirSafe } from '@automaker/utils';
+import { getErrorMessage, logError } from '../common.js';
+
+/**
+ * Recursively copy a directory and its contents
+ */
+async function copyDirectoryRecursive(src: string, dest: string): Promise<void> {
+  await mkdirSafe(dest);
+  const entries = await secureFs.readdir(src, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      await copyDirectoryRecursive(srcPath, destPath);
+    } else {
+      await secureFs.copyFile(srcPath, destPath);
+    }
+  }
+}
+
+export function createCopyHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sourcePath, destinationPath, overwrite } = req.body as {
+        sourcePath: string;
+        destinationPath: string;
+        overwrite?: boolean;
+      };
+
+      if (!sourcePath || !destinationPath) {
+        res
+          .status(400)
+          .json({ success: false, error: 'sourcePath and destinationPath are required' });
+        return;
+      }
+
+      // Prevent copying a folder into itself or its own descendant (infinite recursion)
+      const resolvedSrc = path.resolve(sourcePath);
+      const resolvedDest = path.resolve(destinationPath);
+      if (resolvedDest === resolvedSrc || resolvedDest.startsWith(resolvedSrc + path.sep)) {
+        res.status(400).json({
+          success: false,
+          error: 'Cannot copy a folder into itself or one of its own descendants',
+        });
+        return;
+      }
+
+      // Check if destination already exists
+      try {
+        await secureFs.stat(destinationPath);
+        // Destination exists
+        if (!overwrite) {
+          res.status(409).json({
+            success: false,
+            error: 'Destination already exists',
+            exists: true,
+          });
+          return;
+        }
+        // If overwrite is true, remove the existing destination first to avoid merging
+        await secureFs.rm(destinationPath, { recursive: true });
+      } catch {
+        // Destination doesn't exist - good to proceed
+      }
+
+      // Ensure parent directory exists
+      await mkdirSafe(path.dirname(path.resolve(destinationPath)));
+
+      // Check if source is a directory
+      const stats = await secureFs.stat(sourcePath);
+
+      if (stats.isDirectory()) {
+        await copyDirectoryRecursive(sourcePath, destinationPath);
+      } else {
+        await secureFs.copyFile(sourcePath, destinationPath);
+      }
+
+      res.json({ success: true });
+    } catch (error) {
+      if (error instanceof PathNotAllowedError) {
+        res.status(403).json({ success: false, error: getErrorMessage(error) });
+        return;
+      }
+
+      logError(error, 'Copy file failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/delete-board-background.ts b/temp_repo/apps/server/src/routes/fs/routes/delete-board-background.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3f053f2c1c1bd698ab685d59c076be1c4a71b7dd
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/delete-board-background.ts
@@ -0,0 +1,45 @@
+/**
+ * POST /delete-board-background endpoint - Delete board background image
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import path from 'path';
+import { getErrorMessage, logError } from '../common.js';
+import { getBoardDir } from '@automaker/platform';
+
+export function createDeleteBoardBackgroundHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as { projectPath: string };
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      // Get board directory
+      const boardDir = getBoardDir(projectPath);
+
+      try {
+        // Try to remove all background files in the board directory
+        const files = await secureFs.readdir(boardDir);
+        for (const file of files) {
+          if (file.startsWith('background')) {
+            await secureFs.unlink(path.join(boardDir, file));
+          }
+        }
+      } catch {
+        // Directory may not exist, that's fine
+      }
+
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Delete board background failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/delete.ts b/temp_repo/apps/server/src/routes/fs/routes/delete.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ffb404449a5e5e6d12d2d62a66def6edf118fa12
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/delete.ts
@@ -0,0 +1,34 @@
+/**
+ * POST /delete endpoint - Delete file
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import { PathNotAllowedError } from '@automaker/platform';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createDeleteHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { filePath } = req.body as { filePath: string };
+
+      if (!filePath) {
+        res.status(400).json({ success: false, error: 'filePath is required' });
+        return;
+      }
+
+      await secureFs.rm(filePath, { recursive: true });
+
+      res.json({ success: true });
+    } catch (error) {
+      // Path not allowed - return 403 Forbidden
+      if (error instanceof PathNotAllowedError) {
+        res.status(403).json({ success: false, error: getErrorMessage(error) });
+        return;
+      }
+
+      logError(error, 'Delete file failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/download.ts b/temp_repo/apps/server/src/routes/fs/routes/download.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3ac44078d2dc62086c091b932b120c346e8f86cc
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/download.ts
@@ -0,0 +1,142 @@
+/**
+ * POST /download endpoint - Download a file, or GET /download for streaming
+ * For folders, creates a zip archive on the fly
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import path from 'path';
+import { PathNotAllowedError } from '@automaker/platform';
+import { getErrorMessage, logError } from '../common.js';
+import { createReadStream } from 'fs';
+import { execFile } from 'child_process';
+import { promisify } from 'util';
+import { tmpdir } from 'os';
+
+const execFileAsync = promisify(execFile);
+
+/**
+ * Get total size of a directory recursively
+ */
+async function getDirectorySize(dirPath: string): Promise<number> {
+  let totalSize = 0;
+  const entries = await secureFs.readdir(dirPath, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const entryPath = path.join(dirPath, entry.name);
+    if (entry.isDirectory()) {
+      totalSize += await getDirectorySize(entryPath);
+    } else {
+      const stats = await secureFs.stat(entryPath);
+      totalSize += Number(stats.size);
+    }
+  }
+
+  return totalSize;
+}
+
+export function createDownloadHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { filePath } = req.body as { filePath: string };
+
+      if (!filePath) {
+        res.status(400).json({ success: false, error: 'filePath is required' });
+        return;
+      }
+
+      const stats = await secureFs.stat(filePath);
+      const fileName = path.basename(filePath);
+
+      if (stats.isDirectory()) {
+        // For directories, create a zip archive
+        const dirSize = await getDirectorySize(filePath);
+        const MAX_DIR_SIZE = 100 * 1024 * 1024; // 100MB limit
+
+        if (dirSize > MAX_DIR_SIZE) {
+          res.status(413).json({
+            success: false,
+            error: `Directory is too large to download (${(dirSize / (1024 * 1024)).toFixed(1)}MB). Maximum size is ${MAX_DIR_SIZE / (1024 * 1024)}MB.`,
+            size: dirSize,
+          });
+          return;
+        }
+
+        // Create a temporary zip file
+        const zipFileName = `${fileName}.zip`;
+        const tmpZipPath = path.join(tmpdir(), `automaker-download-${Date.now()}-${zipFileName}`);
+
+        try {
+          // Use system zip command (available on macOS and Linux)
+          // Use execFile to avoid shell injection via user-provided paths
+          await execFileAsync('zip', ['-r', tmpZipPath, fileName], {
+            cwd: path.dirname(filePath),
+            maxBuffer: 50 * 1024 * 1024,
+          });
+
+          const zipStats = await secureFs.stat(tmpZipPath);
+
+          res.setHeader('Content-Type', 'application/zip');
+          res.setHeader('Content-Disposition', `attachment; filename="${zipFileName}"`);
+          res.setHeader('Content-Length', zipStats.size.toString());
+          res.setHeader('X-Directory-Size', dirSize.toString());
+
+          const stream = createReadStream(tmpZipPath);
+          stream.pipe(res);
+
+          stream.on('end', async () => {
+            // Cleanup temp file
+            try {
+              await secureFs.rm(tmpZipPath);
+            } catch {
+              // Ignore cleanup errors
+            }
+          });
+
+          stream.on('error', async (err) => {
+            logError(err, 'Download stream error');
+            try {
+              await secureFs.rm(tmpZipPath);
+            } catch {
+              // Ignore cleanup errors
+            }
+            if (!res.headersSent) {
+              res.status(500).json({ success: false, error: 'Stream error during download' });
+            }
+          });
+        } catch (zipError) {
+          // Cleanup on zip failure
+          try {
+            await secureFs.rm(tmpZipPath);
+          } catch {
+            // Ignore
+          }
+          throw zipError;
+        }
+      } else {
+        // For individual files, stream directly
+        res.setHeader('Content-Type', 'application/octet-stream');
+        res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`);
+        res.setHeader('Content-Length', stats.size.toString());
+
+        const stream = createReadStream(filePath);
+        stream.pipe(res);
+
+        stream.on('error', (err) => {
+          logError(err, 'Download stream error');
+          if (!res.headersSent) {
+            res.status(500).json({ success: false, error: 'Stream error during download' });
+          }
+        });
+      }
+    } catch (error) {
+      if (error instanceof PathNotAllowedError) {
+        res.status(403).json({ success: false, error: getErrorMessage(error) });
+        return;
+      }
+
+      logError(error, 'Download failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/exists.ts b/temp_repo/apps/server/src/routes/fs/routes/exists.ts
new file mode 100644
index 0000000000000000000000000000000000000000..88050889e529e3cc1732792fdc16a83c6f98579e
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/exists.ts
@@ -0,0 +1,41 @@
+/**
+ * POST /exists endpoint - Check if file/directory exists
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import { PathNotAllowedError } from '@automaker/platform';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createExistsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { filePath } = req.body as { filePath: string };
+
+      if (!filePath) {
+        res.status(400).json({ success: false, error: 'filePath is required' });
+        return;
+      }
+
+      try {
+        await secureFs.access(filePath);
+        res.json({ success: true, exists: true });
+      } catch (accessError) {
+        // Check if it's a path not allowed error vs file not existing
+        if (accessError instanceof PathNotAllowedError) {
+          throw accessError;
+        }
+        res.json({ success: true, exists: false });
+      }
+    } catch (error) {
+      // Path not allowed - return 403 Forbidden
+      if (error instanceof PathNotAllowedError) {
+        res.status(403).json({ success: false, error: getErrorMessage(error) });
+        return;
+      }
+
+      logError(error, 'Check exists failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/image.ts b/temp_repo/apps/server/src/routes/fs/routes/image.ts
new file mode 100644
index 0000000000000000000000000000000000000000..32f3b3cbe0a2e6effd219f23435b91dfc16f4ef3
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/image.ts
@@ -0,0 +1,73 @@
+/**
+ * GET /image endpoint - Serve image files
+ *
+ * Requires authentication via auth middleware:
+ * - apiKey query parameter (Electron mode)
+ * - token query parameter (web mode)
+ * - session cookie (web mode)
+ * - X-API-Key header (Electron mode)
+ * - X-Session-Token header (web mode)
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import path from 'path';
+import { PathNotAllowedError } from '@automaker/platform';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createImageHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { path: imagePath, projectPath } = req.query as {
+        path?: string;
+        projectPath?: string;
+      };
+
+      if (!imagePath) {
+        res.status(400).json({ success: false, error: 'path is required' });
+        return;
+      }
+
+      // Resolve full path
+      const fullPath = path.isAbsolute(imagePath)
+        ? imagePath
+        : projectPath
+          ? path.join(projectPath, imagePath)
+          : imagePath;
+
+      // Check if file exists
+      try {
+        await secureFs.access(fullPath);
+      } catch (accessError) {
+        if (accessError instanceof PathNotAllowedError) {
+          res.status(403).json({ success: false, error: 'Path not allowed' });
+          return;
+        }
+        res.status(404).json({ success: false, error: 'Image not found' });
+        return;
+      }
+
+      // Read the file
+      const buffer = await secureFs.readFile(fullPath);
+
+      // Determine MIME type from extension
+      const ext = path.extname(fullPath).toLowerCase();
+      const mimeTypes: Record<string, string> = {
+        '.png': 'image/png',
+        '.jpg': 'image/jpeg',
+        '.jpeg': 'image/jpeg',
+        '.gif': 'image/gif',
+        '.webp': 'image/webp',
+        '.svg': 'image/svg+xml',
+        '.bmp': 'image/bmp',
+      };
+
+      res.setHeader('Content-Type', mimeTypes[ext] || 'application/octet-stream');
+      res.setHeader('Cache-Control', 'public, max-age=3600');
+      res.send(buffer);
+    } catch (error) {
+      logError(error, 'Serve image failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/mkdir.ts b/temp_repo/apps/server/src/routes/fs/routes/mkdir.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f813abcd6eb5b6fd01472ca4d19d000dbbfa23e3
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/mkdir.ts
@@ -0,0 +1,70 @@
+/**
+ * POST /mkdir endpoint - Create directory
+ * Handles symlinks safely to avoid ELOOP errors
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import path from 'path';
+import { PathNotAllowedError } from '@automaker/platform';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createMkdirHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { dirPath } = req.body as { dirPath: string };
+
+      if (!dirPath) {
+        res.status(400).json({ success: false, error: 'dirPath is required' });
+        return;
+      }
+
+      const resolvedPath = path.resolve(dirPath);
+
+      // Check if path already exists using lstat (doesn't follow symlinks)
+      try {
+        const stats = await secureFs.lstat(resolvedPath);
+        // Path exists - if it's a directory or symlink, consider it success
+        if (stats.isDirectory() || stats.isSymbolicLink()) {
+          res.json({ success: true });
+          return;
+        }
+        // It's a file - can't create directory
+        res.status(400).json({
+          success: false,
+          error: 'Path exists and is not a directory',
+        });
+        return;
+      } catch (statError: unknown) {
+        // ENOENT means path doesn't exist - we should create it
+        if ((statError as NodeJS.ErrnoException).code !== 'ENOENT') {
+          // Some other error (could be ELOOP in parent path)
+          throw statError;
+        }
+      }
+
+      // Path doesn't exist, create it
+      await secureFs.mkdir(resolvedPath, { recursive: true });
+
+      res.json({ success: true });
+    } catch (error: unknown) {
+      // Path not allowed - return 403 Forbidden
+      if (error instanceof PathNotAllowedError) {
+        res.status(403).json({ success: false, error: getErrorMessage(error) });
+        return;
+      }
+
+      // Handle ELOOP specifically
+      if ((error as NodeJS.ErrnoException).code === 'ELOOP') {
+        logError(error, 'Create directory failed - symlink loop detected');
+        res.status(400).json({
+          success: false,
+          error: 'Cannot create directory: symlink loop detected in path',
+        });
+        return;
+      }
+      logError(error, 'Create directory failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/move.ts b/temp_repo/apps/server/src/routes/fs/routes/move.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8979db5547a0d62488a859c0c89215fc1cba0eca
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/move.ts
@@ -0,0 +1,79 @@
+/**
+ * POST /move endpoint - Move (rename) file or directory to a new location
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import path from 'path';
+import { PathNotAllowedError } from '@automaker/platform';
+import { mkdirSafe } from '@automaker/utils';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createMoveHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sourcePath, destinationPath, overwrite } = req.body as {
+        sourcePath: string;
+        destinationPath: string;
+        overwrite?: boolean;
+      };
+
+      if (!sourcePath || !destinationPath) {
+        res
+          .status(400)
+          .json({ success: false, error: 'sourcePath and destinationPath are required' });
+        return;
+      }
+
+      // Prevent moving to same location or into its own descendant
+      const resolvedSrc = path.resolve(sourcePath);
+      const resolvedDest = path.resolve(destinationPath);
+      if (resolvedDest === resolvedSrc) {
+        // No-op: source and destination are the same
+        res.json({ success: true });
+        return;
+      }
+      if (resolvedDest.startsWith(resolvedSrc + path.sep)) {
+        res.status(400).json({
+          success: false,
+          error: 'Cannot move a folder into one of its own descendants',
+        });
+        return;
+      }
+
+      // Check if destination already exists
+      try {
+        await secureFs.stat(destinationPath);
+        // Destination exists
+        if (!overwrite) {
+          res.status(409).json({
+            success: false,
+            error: 'Destination already exists',
+            exists: true,
+          });
+          return;
+        }
+        // If overwrite is true, remove the existing destination first
+        await secureFs.rm(destinationPath, { recursive: true });
+      } catch {
+        // Destination doesn't exist - good to proceed
+      }
+
+      // Ensure parent directory exists
+      await mkdirSafe(path.dirname(path.resolve(destinationPath)));
+
+      // Use rename for the move operation
+      await secureFs.rename(sourcePath, destinationPath);
+
+      res.json({ success: true });
+    } catch (error) {
+      if (error instanceof PathNotAllowedError) {
+        res.status(403).json({ success: false, error: getErrorMessage(error) });
+        return;
+      }
+
+      logError(error, 'Move file failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/read.ts b/temp_repo/apps/server/src/routes/fs/routes/read.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6dfcb9fd77aa0556e31d9379f45f6692f34e2336
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/read.ts
@@ -0,0 +1,65 @@
+/**
+ * POST /read endpoint - Read file
+ */
+
+import type { Request, Response } from 'express';
+import path from 'path';
+import * as secureFs from '../../../lib/secure-fs.js';
+import { PathNotAllowedError } from '@automaker/platform';
+import { getErrorMessage, logError } from '../common.js';
+
+// Optional files that are expected to not exist in new projects
+// Don't log ENOENT errors for these to reduce noise
+const OPTIONAL_FILES = ['categories.json', 'app_spec.txt', 'context-metadata.json'];
+
+function isOptionalFile(filePath: string): boolean {
+  const basename = path.basename(filePath);
+  if (OPTIONAL_FILES.some((optionalFile) => basename === optionalFile)) {
+    return true;
+  }
+  // Context and memory files may not exist yet during create/delete or test races
+  if (filePath.includes('.automaker/context/') || filePath.includes('.automaker/memory/')) {
+    const name = path.basename(filePath);
+    const lower = name.toLowerCase();
+    if (lower.endsWith('.md') || lower.endsWith('.txt') || lower.endsWith('.markdown')) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function isENOENT(error: unknown): boolean {
+  return error !== null && typeof error === 'object' && 'code' in error && error.code === 'ENOENT';
+}
+
+export function createReadHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { filePath } = req.body as { filePath: string };
+
+      if (!filePath) {
+        res.status(400).json({ success: false, error: 'filePath is required' });
+        return;
+      }
+
+      const content = await secureFs.readFile(filePath, 'utf-8');
+
+      res.json({ success: true, content });
+    } catch (error) {
+      // Path not allowed - return 403 Forbidden
+      if (error instanceof PathNotAllowedError) {
+        res.status(403).json({ success: false, error: getErrorMessage(error) });
+        return;
+      }
+
+      const filePath = req.body?.filePath || '';
+      const optionalMissing = isENOENT(error) && isOptionalFile(filePath);
+      if (!optionalMissing) {
+        logError(error, 'Read file failed');
+      }
+      // Return 404 for missing optional files so clients can handle "not found"
+      const status = optionalMissing ? 404 : 500;
+      res.status(status).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/readdir.ts b/temp_repo/apps/server/src/routes/fs/routes/readdir.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4393277828de6fd26b551e014fa05d24054f1a33
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/readdir.ts
@@ -0,0 +1,40 @@
+/**
+ * POST /readdir endpoint - Read directory
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import { PathNotAllowedError } from '@automaker/platform';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createReaddirHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { dirPath } = req.body as { dirPath: string };
+
+      if (!dirPath) {
+        res.status(400).json({ success: false, error: 'dirPath is required' });
+        return;
+      }
+
+      const entries = await secureFs.readdir(dirPath, { withFileTypes: true });
+
+      const result = entries.map((entry) => ({
+        name: entry.name,
+        isDirectory: entry.isDirectory(),
+        isFile: entry.isFile(),
+      }));
+
+      res.json({ success: true, entries: result });
+    } catch (error) {
+      // Path not allowed - return 403 Forbidden
+      if (error instanceof PathNotAllowedError) {
+        res.status(403).json({ success: false, error: getErrorMessage(error) });
+        return;
+      }
+
+      logError(error, 'Read directory failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/resolve-directory.ts b/temp_repo/apps/server/src/routes/fs/routes/resolve-directory.ts
new file mode 100644
index 0000000000000000000000000000000000000000..be5a5b0d2ddf6c64666ec737d9a0e13f14e38cb9
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/resolve-directory.ts
@@ -0,0 +1,121 @@
+/**
+ * POST /resolve-directory endpoint - Resolve directory path from directory name
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import path from 'path';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createResolveDirectoryHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const {
+        directoryName,
+        sampleFiles,
+        fileCount: _fileCount,
+      } = req.body as {
+        directoryName: string;
+        sampleFiles?: string[];
+        fileCount?: number;
+      };
+
+      if (!directoryName) {
+        res.status(400).json({ success: false, error: 'directoryName is required' });
+        return;
+      }
+
+      // If directoryName looks like an absolute path, try validating it directly
+      if (path.isAbsolute(directoryName) || directoryName.includes(path.sep)) {
+        try {
+          const resolvedPath = path.resolve(directoryName);
+          const stats = await secureFs.stat(resolvedPath);
+          if (stats.isDirectory()) {
+            res.json({
+              success: true,
+              path: resolvedPath,
+            });
+            return;
+          }
+        } catch {
+          // Not a valid absolute path, continue to search
+        }
+      }
+
+      // Search for directory in common locations
+      const searchPaths: string[] = [
+        process.cwd(), // Current working directory
+        process.env.HOME || process.env.USERPROFILE || '', // User home
+        path.join(process.env.HOME || process.env.USERPROFILE || '', 'Documents'),
+        path.join(process.env.HOME || process.env.USERPROFILE || '', 'Desktop'),
+        // Common project locations
+        path.join(process.env.HOME || process.env.USERPROFILE || '', 'Projects'),
+      ].filter(Boolean);
+
+      // Also check parent of current working directory
+      try {
+        const parentDir = path.dirname(process.cwd());
+        if (!searchPaths.includes(parentDir)) {
+          searchPaths.push(parentDir);
+        }
+      } catch {
+        // Ignore
+      }
+
+      // Search for directory matching the name and file structure
+      for (const searchPath of searchPaths) {
+        try {
+          const candidatePath = path.join(searchPath, directoryName);
+          const stats = await secureFs.stat(candidatePath);
+
+          if (stats.isDirectory()) {
+            // Verify it matches by checking for sample files
+            if (sampleFiles && sampleFiles.length > 0) {
+              let matches = 0;
+              for (const sampleFile of sampleFiles.slice(0, 5)) {
+                // Remove directory name prefix from sample file path
+                const relativeFile = sampleFile.startsWith(directoryName + '/')
+                  ? sampleFile.substring(directoryName.length + 1)
+                  : sampleFile.split('/').slice(1).join('/') ||
+                    sampleFile.split('/').pop() ||
+                    sampleFile;
+
+                try {
+                  const filePath = path.join(candidatePath, relativeFile);
+                  await secureFs.access(filePath);
+                  matches++;
+                } catch {
+                  // File doesn't exist, continue checking
+                }
+              }
+
+              // If at least one file matches, consider it a match
+              if (matches === 0 && sampleFiles.length > 0) {
+                continue; // Try next candidate
+              }
+            }
+
+            // Found matching directory
+            res.json({
+              success: true,
+              path: candidatePath,
+            });
+            return;
+          }
+        } catch {
+          // Directory doesn't exist at this location, continue searching
+          continue;
+        }
+      }
+
+      // Directory not found
+      res.status(404).json({
+        success: false,
+        error: `Directory "${directoryName}" not found in common locations. Please ensure the directory exists.`,
+      });
+    } catch (error) {
+      logError(error, 'Resolve directory failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/save-board-background.ts b/temp_repo/apps/server/src/routes/fs/routes/save-board-background.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e8b82169a6616b4201e49a55410259a33166a198
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/save-board-background.ts
@@ -0,0 +1,53 @@
+/**
+ * POST /save-board-background endpoint - Save board background image
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import path from 'path';
+import { getErrorMessage, logError } from '../common.js';
+import { getBoardDir } from '@automaker/platform';
+
+export function createSaveBoardBackgroundHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { data, filename, projectPath } = req.body as {
+        data: string;
+        filename: string;
+        projectPath: string;
+      };
+
+      if (!data || !filename || !projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'data, filename, and projectPath are required',
+        });
+        return;
+      }
+
+      // Get board directory
+      const boardDir = getBoardDir(projectPath);
+      await secureFs.mkdir(boardDir, { recursive: true });
+
+      // Decode base64 data (remove data URL prefix if present)
+      // Use a regex that handles all data URL formats including those with extra params
+      // e.g., data:image/gif;charset=utf-8;base64,R0lGOD...
+      const base64Data = data.replace(/^data:[^,]+,/, '');
+      const buffer = Buffer.from(base64Data, 'base64');
+
+      // Use a fixed filename for the board background (overwrite previous)
+      const ext = path.extname(filename) || '.png';
+      const uniqueFilename = `background${ext}`;
+      const filePath = path.join(boardDir, uniqueFilename);
+
+      // Write file
+      await secureFs.writeFile(filePath, buffer);
+
+      // Return the absolute path
+      res.json({ success: true, path: filePath });
+    } catch (error) {
+      logError(error, 'Save board background failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/save-image.ts b/temp_repo/apps/server/src/routes/fs/routes/save-image.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4d48661cfcb1ee08f0ab8ae3b5a7f095d9dcc61a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/save-image.ts
@@ -0,0 +1,56 @@
+/**
+ * POST /save-image endpoint - Save image to .automaker images directory
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import path from 'path';
+import { getErrorMessage, logError } from '../common.js';
+import { getImagesDir } from '@automaker/platform';
+import { sanitizeFilename } from '@automaker/utils';
+
+export function createSaveImageHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { data, filename, projectPath } = req.body as {
+        data: string;
+        filename: string;
+        projectPath: string;
+      };
+
+      if (!data || !filename || !projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'data, filename, and projectPath are required',
+        });
+        return;
+      }
+
+      // Get images directory
+      const imagesDir = getImagesDir(projectPath);
+      await secureFs.mkdir(imagesDir, { recursive: true });
+
+      // Decode base64 data (remove data URL prefix if present)
+      // Use a regex that handles all data URL formats including those with extra params
+      // e.g., data:image/gif;charset=utf-8;base64,R0lGOD...
+      const base64Data = data.replace(/^data:[^,]+,/, '');
+      const buffer = Buffer.from(base64Data, 'base64');
+
+      // Generate unique filename with timestamp
+      const timestamp = Date.now();
+      const ext = path.extname(filename) || '.png';
+      const baseName = sanitizeFilename(path.basename(filename, ext), 'image');
+      const uniqueFilename = `${baseName}-${timestamp}${ext}`;
+      const filePath = path.join(imagesDir, uniqueFilename);
+
+      // Write file
+      await secureFs.writeFile(filePath, buffer);
+
+      // Return the absolute path
+      res.json({ success: true, path: filePath });
+    } catch (error) {
+      logError(error, 'Save image failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/stat.ts b/temp_repo/apps/server/src/routes/fs/routes/stat.ts
new file mode 100644
index 0000000000000000000000000000000000000000..54e0ada1554056a17350c4a0ff58da6e38733fc1
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/stat.ts
@@ -0,0 +1,52 @@
+/**
+ * POST /stat endpoint - Get file stats
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import { PathNotAllowedError } from '@automaker/platform';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createStatHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { filePath } = req.body as { filePath: string };
+
+      if (!filePath) {
+        res.status(400).json({ success: false, error: 'filePath is required' });
+        return;
+      }
+
+      const stats = await secureFs.stat(filePath);
+
+      res.json({
+        success: true,
+        stats: {
+          isDirectory: stats.isDirectory(),
+          isFile: stats.isFile(),
+          size: stats.size,
+          mtime: stats.mtime,
+        },
+      });
+    } catch (error) {
+      // Path not allowed - return 403 Forbidden
+      if (error instanceof PathNotAllowedError) {
+        res.status(403).json({ success: false, error: getErrorMessage(error) });
+        return;
+      }
+
+      // File or directory does not exist - return 404 so UI can handle missing paths
+      const code =
+        error && typeof error === 'object' && 'code' in error
+          ? (error as { code: string }).code
+          : '';
+      if (code === 'ENOENT') {
+        res.status(404).json({ success: false, error: 'File or directory not found' });
+        return;
+      }
+
+      logError(error, 'Get file stats failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/validate-path.ts b/temp_repo/apps/server/src/routes/fs/routes/validate-path.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9405e0c1ef4b6b3f0fb2661b0c12107762624ebf
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/validate-path.ts
@@ -0,0 +1,59 @@
+/**
+ * POST /validate-path endpoint - Validate and add path to allowed list
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import path from 'path';
+import { isPathAllowed, getAllowedRootDirectory } from '@automaker/platform';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createValidatePathHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { filePath } = req.body as { filePath: string };
+
+      if (!filePath) {
+        res.status(400).json({ success: false, error: 'filePath is required' });
+        return;
+      }
+
+      const resolvedPath = path.resolve(filePath);
+
+      // Validate path against ALLOWED_ROOT_DIRECTORY before checking if it exists
+      if (!isPathAllowed(resolvedPath)) {
+        const allowedRoot = getAllowedRootDirectory();
+        const errorMessage = allowedRoot
+          ? `Path not allowed: ${filePath}. Must be within ALLOWED_ROOT_DIRECTORY: ${allowedRoot}`
+          : `Path not allowed: ${filePath}`;
+        res.status(403).json({
+          success: false,
+          error: errorMessage,
+          isAllowed: false,
+        });
+        return;
+      }
+
+      // Check if path exists
+      try {
+        const stats = await secureFs.stat(resolvedPath);
+
+        if (!stats.isDirectory()) {
+          res.status(400).json({ success: false, error: 'Path is not a directory' });
+          return;
+        }
+
+        res.json({
+          success: true,
+          path: resolvedPath,
+          isAllowed: true,
+        });
+      } catch {
+        res.status(400).json({ success: false, error: 'Path does not exist' });
+      }
+    } catch (error) {
+      logError(error, 'Validate path failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/fs/routes/write.ts b/temp_repo/apps/server/src/routes/fs/routes/write.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f5cdce561e94a9c4eec056cfc2c8bc83586483ac
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/fs/routes/write.ts
@@ -0,0 +1,43 @@
+/**
+ * POST /write endpoint - Write file
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import path from 'path';
+import { PathNotAllowedError } from '@automaker/platform';
+import { mkdirSafe } from '@automaker/utils';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createWriteHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { filePath, content } = req.body as {
+        filePath: string;
+        content: string;
+      };
+
+      if (!filePath) {
+        res.status(400).json({ success: false, error: 'filePath is required' });
+        return;
+      }
+
+      // Ensure parent directory exists (symlink-safe)
+      await mkdirSafe(path.dirname(path.resolve(filePath)));
+      // Default content to empty string if undefined/null to prevent writing
+      // "undefined" as literal text (e.g. when content field is missing from request)
+      await secureFs.writeFile(filePath, content ?? '', 'utf-8');
+
+      res.json({ success: true });
+    } catch (error) {
+      // Path not allowed - return 403 Forbidden
+      if (error instanceof PathNotAllowedError) {
+        res.status(403).json({ success: false, error: getErrorMessage(error) });
+        return;
+      }
+
+      logError(error, 'Write file failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/gemini/index.ts b/temp_repo/apps/server/src/routes/gemini/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f49ef634c1142c2d1303d4fb919cf08eee2e6bd7
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/gemini/index.ts
@@ -0,0 +1,66 @@
+import { Router, Request, Response } from 'express';
+import { GeminiProvider } from '../../providers/gemini-provider.js';
+import { GeminiUsageService } from '../../services/gemini-usage-service.js';
+import { createLogger } from '@automaker/utils';
+import type { EventEmitter } from '../../lib/events.js';
+
+const logger = createLogger('Gemini');
+
+export function createGeminiRoutes(
+  usageService: GeminiUsageService,
+  _events: EventEmitter
+): Router {
+  const router = Router();
+
+  // Get current usage/quota data from Google Cloud API
+  router.get('/usage', async (_req: Request, res: Response) => {
+    try {
+      const usageData = await usageService.fetchUsageData();
+
+      res.json(usageData);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      logger.error('Error fetching Gemini usage:', error);
+
+      // Return error in a format the UI expects
+      res.status(200).json({
+        authenticated: false,
+        authMethod: 'none',
+        usedPercent: 0,
+        remainingPercent: 100,
+        lastUpdated: new Date().toISOString(),
+        error: `Failed to fetch Gemini usage: ${message}`,
+      });
+    }
+  });
+
+  // Check if Gemini is available
+  router.get('/status', async (_req: Request, res: Response) => {
+    try {
+      const provider = new GeminiProvider();
+      const status = await provider.detectInstallation();
+
+      // Derive authMethod from typed InstallationStatus fields
+      const authMethod = status.authenticated
+        ? status.hasApiKey
+          ? 'api_key'
+          : 'cli_login'
+        : 'none';
+
+      res.json({
+        success: true,
+        installed: status.installed,
+        version: status.version || null,
+        path: status.path || null,
+        authenticated: status.authenticated || false,
+        authMethod,
+        hasCredentialsFile: false,
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      res.status(500).json({ success: false, error: message });
+    }
+  });
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/git/common.ts b/temp_repo/apps/server/src/routes/git/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5fd7013e2fc4c9f61186ad9d1809e57d58a47dfe
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/git/common.ts
@@ -0,0 +1,12 @@
+/**
+ * Common utilities for git routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+const logger = createLogger('Git');
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/git/index.ts b/temp_repo/apps/server/src/routes/git/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..600eb87b71aad50b67b0aac0ad01bb2c0ec467db
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/git/index.ts
@@ -0,0 +1,27 @@
+/**
+ * Git routes - HTTP API for git operations (non-worktree)
+ */
+
+import { Router } from 'express';
+import { validatePathParams } from '../../middleware/validate-paths.js';
+import { createDiffsHandler } from './routes/diffs.js';
+import { createFileDiffHandler } from './routes/file-diff.js';
+import { createStageFilesHandler } from './routes/stage-files.js';
+import { createDetailsHandler } from './routes/details.js';
+import { createEnhancedStatusHandler } from './routes/enhanced-status.js';
+
+export function createGitRoutes(): Router {
+  const router = Router();
+
+  router.post('/diffs', validatePathParams('projectPath'), createDiffsHandler());
+  router.post('/file-diff', validatePathParams('projectPath', 'filePath'), createFileDiffHandler());
+  router.post(
+    '/stage-files',
+    validatePathParams('projectPath', 'files[]'),
+    createStageFilesHandler()
+  );
+  router.post('/details', validatePathParams('projectPath', 'filePath?'), createDetailsHandler());
+  router.post('/enhanced-status', validatePathParams('projectPath'), createEnhancedStatusHandler());
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/git/routes/details.ts b/temp_repo/apps/server/src/routes/git/routes/details.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0861b89eee62841646a875c74e9766d21da1cf60
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/git/routes/details.ts
@@ -0,0 +1,248 @@
+/**
+ * POST /details endpoint - Get detailed git info for a file or project
+ * Returns branch, last commit info, diff stats, and conflict status
+ */
+
+import type { Request, Response } from 'express';
+import { exec, execFile } from 'child_process';
+import { promisify } from 'util';
+import * as secureFs from '../../../lib/secure-fs.js';
+import { getErrorMessage, logError } from '../common.js';
+
+const execAsync = promisify(exec);
+const execFileAsync = promisify(execFile);
+
+interface GitFileDetails {
+  branch: string;
+  lastCommitHash: string;
+  lastCommitMessage: string;
+  lastCommitAuthor: string;
+  lastCommitTimestamp: string;
+  linesAdded: number;
+  linesRemoved: number;
+  isConflicted: boolean;
+  isStaged: boolean;
+  isUnstaged: boolean;
+  statusLabel: string;
+}
+
+export function createDetailsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, filePath } = req.body as {
+        projectPath: string;
+        filePath?: string;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath required' });
+        return;
+      }
+
+      try {
+        // Get current branch
+        const { stdout: branchRaw } = await execAsync('git rev-parse --abbrev-ref HEAD', {
+          cwd: projectPath,
+        });
+        const branch = branchRaw.trim();
+
+        if (!filePath) {
+          // Project-level details - just return branch info
+          res.json({
+            success: true,
+            details: { branch },
+          });
+          return;
+        }
+
+        // Get last commit info for this file
+        let lastCommitHash = '';
+        let lastCommitMessage = '';
+        let lastCommitAuthor = '';
+        let lastCommitTimestamp = '';
+
+        try {
+          const { stdout: logOutput } = await execFileAsync(
+            'git',
+            ['log', '-1', '--format=%H|%s|%an|%aI', '--', filePath],
+            { cwd: projectPath }
+          );
+
+          if (logOutput.trim()) {
+            const parts = logOutput.trim().split('|');
+            lastCommitHash = parts[0] || '';
+            lastCommitMessage = parts[1] || '';
+            lastCommitAuthor = parts[2] || '';
+            lastCommitTimestamp = parts[3] || '';
+          }
+        } catch {
+          // File may not have any commits yet
+        }
+
+        // Get diff stats (lines added/removed)
+        let linesAdded = 0;
+        let linesRemoved = 0;
+
+        try {
+          // Check if file is untracked first
+          const { stdout: statusLine } = await execFileAsync(
+            'git',
+            ['status', '--porcelain', '--', filePath],
+            { cwd: projectPath }
+          );
+
+          if (statusLine.trim().startsWith('??')) {
+            // Untracked file - count all lines as added using Node.js instead of shell
+            try {
+              const fileContent = (await secureFs.readFile(filePath, 'utf-8')).toString();
+              const lines = fileContent.split('\n');
+              // Don't count trailing empty line from final newline
+              linesAdded =
+                lines.length > 0 && lines[lines.length - 1] === ''
+                  ? lines.length - 1
+                  : lines.length;
+            } catch {
+              // Ignore
+            }
+          } else {
+            const { stdout: diffStatRaw } = await execFileAsync(
+              'git',
+              ['diff', '--numstat', 'HEAD', '--', filePath],
+              { cwd: projectPath }
+            );
+
+            if (diffStatRaw.trim()) {
+              const parts = diffStatRaw.trim().split('\t');
+              linesAdded = parseInt(parts[0], 10) || 0;
+              linesRemoved = parseInt(parts[1], 10) || 0;
+            }
+
+            // Also check staged diff stats
+            const { stdout: stagedDiffStatRaw } = await execFileAsync(
+              'git',
+              ['diff', '--numstat', '--cached', '--', filePath],
+              { cwd: projectPath }
+            );
+
+            if (stagedDiffStatRaw.trim()) {
+              const parts = stagedDiffStatRaw.trim().split('\t');
+              linesAdded += parseInt(parts[0], 10) || 0;
+              linesRemoved += parseInt(parts[1], 10) || 0;
+            }
+          }
+        } catch {
+          // Diff might not be available
+        }
+
+        // Get conflict and staging status
+        let isConflicted = false;
+        let isStaged = false;
+        let isUnstaged = false;
+        let statusLabel = '';
+
+        try {
+          const { stdout: statusOutput } = await execFileAsync(
+            'git',
+            ['status', '--porcelain', '--', filePath],
+            { cwd: projectPath }
+          );
+
+          if (statusOutput.trim()) {
+            const indexStatus = statusOutput[0];
+            const workTreeStatus = statusOutput[1];
+
+            // Check for conflicts (both modified, unmerged states)
+            if (
+              indexStatus === 'U' ||
+              workTreeStatus === 'U' ||
+              (indexStatus === 'A' && workTreeStatus === 'A') ||
+              (indexStatus === 'D' && workTreeStatus === 'D')
+            ) {
+              isConflicted = true;
+              statusLabel = 'Conflicted';
+            } else {
+              // Staged changes (index has a status)
+              if (indexStatus !== ' ' && indexStatus !== '?') {
+                isStaged = true;
+              }
+              // Unstaged changes (work tree has a status)
+              if (workTreeStatus !== ' ' && workTreeStatus !== '?') {
+                isUnstaged = true;
+              }
+
+              // Build status label
+              if (isStaged && isUnstaged) {
+                statusLabel = 'Staged + Modified';
+              } else if (isStaged) {
+                statusLabel = 'Staged';
+              } else {
+                const statusChar = workTreeStatus !== ' ' ? workTreeStatus : indexStatus;
+                switch (statusChar) {
+                  case 'M':
+                    statusLabel = 'Modified';
+                    break;
+                  case 'A':
+                    statusLabel = 'Added';
+                    break;
+                  case 'D':
+                    statusLabel = 'Deleted';
+                    break;
+                  case 'R':
+                    statusLabel = 'Renamed';
+                    break;
+                  case 'C':
+                    statusLabel = 'Copied';
+                    break;
+                  case '?':
+                    statusLabel = 'Untracked';
+                    break;
+                  default:
+                    statusLabel = statusChar || '';
+                }
+              }
+            }
+          }
+        } catch {
+          // Status might not be available
+        }
+
+        const details: GitFileDetails = {
+          branch,
+          lastCommitHash,
+          lastCommitMessage,
+          lastCommitAuthor,
+          lastCommitTimestamp,
+          linesAdded,
+          linesRemoved,
+          isConflicted,
+          isStaged,
+          isUnstaged,
+          statusLabel,
+        };
+
+        res.json({ success: true, details });
+      } catch (innerError) {
+        logError(innerError, 'Git details failed');
+        res.json({
+          success: true,
+          details: {
+            branch: '',
+            lastCommitHash: '',
+            lastCommitMessage: '',
+            lastCommitAuthor: '',
+            lastCommitTimestamp: '',
+            linesAdded: 0,
+            linesRemoved: 0,
+            isConflicted: false,
+            isStaged: false,
+            isUnstaged: false,
+            statusLabel: '',
+          },
+        });
+      }
+    } catch (error) {
+      logError(error, 'Get git details failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/git/routes/diffs.ts b/temp_repo/apps/server/src/routes/git/routes/diffs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..02ce2028c161d4acf72a7055cac1a320d518b089
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/git/routes/diffs.ts
@@ -0,0 +1,37 @@
+/**
+ * POST /diffs endpoint - Get diffs for the main project
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from '../common.js';
+import { getGitRepositoryDiffs } from '../../common.js';
+
+export function createDiffsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as { projectPath: string };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath required' });
+        return;
+      }
+
+      try {
+        const result = await getGitRepositoryDiffs(projectPath);
+        res.json({
+          success: true,
+          diff: result.diff,
+          files: result.files,
+          hasChanges: result.hasChanges,
+          ...(result.mergeState ? { mergeState: result.mergeState } : {}),
+        });
+      } catch (innerError) {
+        logError(innerError, 'Git diff failed');
+        res.json({ success: true, diff: '', files: [], hasChanges: false });
+      }
+    } catch (error) {
+      logError(error, 'Get diffs failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/git/routes/enhanced-status.ts b/temp_repo/apps/server/src/routes/git/routes/enhanced-status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4d7d2e3d35e4d9c719592ea3179ec81a051e3888
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/git/routes/enhanced-status.ts
@@ -0,0 +1,176 @@
+/**
+ * POST /enhanced-status endpoint - Get enhanced git status with diff stats per file
+ * Returns per-file status with lines added/removed and staged/unstaged differentiation
+ */
+
+import type { Request, Response } from 'express';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { getErrorMessage, logError } from '../common.js';
+
+const execAsync = promisify(exec);
+
+interface EnhancedFileStatus {
+  path: string;
+  indexStatus: string;
+  workTreeStatus: string;
+  isConflicted: boolean;
+  isStaged: boolean;
+  isUnstaged: boolean;
+  linesAdded: number;
+  linesRemoved: number;
+  statusLabel: string;
+}
+
+function getStatusLabel(indexStatus: string, workTreeStatus: string): string {
+  // Check for conflicts
+  if (
+    indexStatus === 'U' ||
+    workTreeStatus === 'U' ||
+    (indexStatus === 'A' && workTreeStatus === 'A') ||
+    (indexStatus === 'D' && workTreeStatus === 'D')
+  ) {
+    return 'Conflicted';
+  }
+
+  const hasStaged = indexStatus !== ' ' && indexStatus !== '?';
+  const hasUnstaged = workTreeStatus !== ' ' && workTreeStatus !== '?';
+
+  if (hasStaged && hasUnstaged) return 'Staged + Modified';
+  if (hasStaged) return 'Staged';
+
+  const statusChar = workTreeStatus !== ' ' ? workTreeStatus : indexStatus;
+  switch (statusChar) {
+    case 'M':
+      return 'Modified';
+    case 'A':
+      return 'Added';
+    case 'D':
+      return 'Deleted';
+    case 'R':
+      return 'Renamed';
+    case 'C':
+      return 'Copied';
+    case '?':
+      return 'Untracked';
+    default:
+      return statusChar || '';
+  }
+}
+
+export function createEnhancedStatusHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as { projectPath: string };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath required' });
+        return;
+      }
+
+      try {
+        // Get current branch
+        const { stdout: branchRaw } = await execAsync('git rev-parse --abbrev-ref HEAD', {
+          cwd: projectPath,
+        });
+        const branch = branchRaw.trim();
+
+        // Get porcelain status for all files
+        const { stdout: statusOutput } = await execAsync('git status --porcelain', {
+          cwd: projectPath,
+        });
+
+        // Get diff numstat for working tree changes
+        let workTreeStats: Record<string, { added: number; removed: number }> = {};
+        try {
+          const { stdout: numstatRaw } = await execAsync('git diff --numstat', {
+            cwd: projectPath,
+            maxBuffer: 10 * 1024 * 1024,
+          });
+          for (const line of numstatRaw.trim().split('\n').filter(Boolean)) {
+            const parts = line.split('\t');
+            if (parts.length >= 3) {
+              const added = parseInt(parts[0], 10) || 0;
+              const removed = parseInt(parts[1], 10) || 0;
+              workTreeStats[parts[2]] = { added, removed };
+            }
+          }
+        } catch {
+          // Ignore
+        }
+
+        // Get diff numstat for staged changes
+        let stagedStats: Record<string, { added: number; removed: number }> = {};
+        try {
+          const { stdout: stagedNumstatRaw } = await execAsync('git diff --numstat --cached', {
+            cwd: projectPath,
+            maxBuffer: 10 * 1024 * 1024,
+          });
+          for (const line of stagedNumstatRaw.trim().split('\n').filter(Boolean)) {
+            const parts = line.split('\t');
+            if (parts.length >= 3) {
+              const added = parseInt(parts[0], 10) || 0;
+              const removed = parseInt(parts[1], 10) || 0;
+              stagedStats[parts[2]] = { added, removed };
+            }
+          }
+        } catch {
+          // Ignore
+        }
+
+        // Parse status and build enhanced file list
+        const files: EnhancedFileStatus[] = [];
+
+        for (const line of statusOutput.split('\n').filter(Boolean)) {
+          if (line.length < 4) continue;
+
+          const indexStatus = line[0];
+          const workTreeStatus = line[1];
+          const filePath = line.substring(3).trim();
+
+          // Handle renamed files (format: "R  old -> new")
+          const actualPath = filePath.includes(' -> ')
+            ? filePath.split(' -> ')[1].trim()
+            : filePath;
+
+          const isConflicted =
+            indexStatus === 'U' ||
+            workTreeStatus === 'U' ||
+            (indexStatus === 'A' && workTreeStatus === 'A') ||
+            (indexStatus === 'D' && workTreeStatus === 'D');
+
+          const isStaged = indexStatus !== ' ' && indexStatus !== '?';
+          const isUnstaged = workTreeStatus !== ' ' && workTreeStatus !== '?';
+
+          // Combine diff stats from both working tree and staged
+          const wtStats = workTreeStats[actualPath] || { added: 0, removed: 0 };
+          const stStats = stagedStats[actualPath] || { added: 0, removed: 0 };
+
+          files.push({
+            path: actualPath,
+            indexStatus,
+            workTreeStatus,
+            isConflicted,
+            isStaged,
+            isUnstaged,
+            linesAdded: wtStats.added + stStats.added,
+            linesRemoved: wtStats.removed + stStats.removed,
+            statusLabel: getStatusLabel(indexStatus, workTreeStatus),
+          });
+        }
+
+        res.json({
+          success: true,
+          branch,
+          files,
+        });
+      } catch (innerError) {
+        logError(innerError, 'Git enhanced status failed');
+        res.json({ success: true, branch: '', files: [] });
+      }
+    } catch (error) {
+      logError(error, 'Get enhanced status failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/git/routes/file-diff.ts b/temp_repo/apps/server/src/routes/git/routes/file-diff.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6203ecc47b47549d79a982bea0e8551355886650
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/git/routes/file-diff.ts
@@ -0,0 +1,57 @@
+/**
+ * POST /file-diff endpoint - Get diff for a specific file
+ */
+
+import type { Request, Response } from 'express';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { getErrorMessage, logError } from '../common.js';
+import { generateSyntheticDiffForNewFile } from '../../common.js';
+
+const execAsync = promisify(exec);
+
+export function createFileDiffHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, filePath } = req.body as {
+        projectPath: string;
+        filePath: string;
+      };
+
+      if (!projectPath || !filePath) {
+        res.status(400).json({ success: false, error: 'projectPath and filePath required' });
+        return;
+      }
+
+      try {
+        // First check if the file is untracked
+        const { stdout: status } = await execAsync(`git status --porcelain -- "${filePath}"`, {
+          cwd: projectPath,
+        });
+
+        const isUntracked = status.trim().startsWith('??');
+
+        let diff: string;
+        if (isUntracked) {
+          // Generate synthetic diff for untracked file
+          diff = await generateSyntheticDiffForNewFile(projectPath, filePath);
+        } else {
+          // Use regular git diff for tracked files
+          const result = await execAsync(`git diff HEAD -- "${filePath}"`, {
+            cwd: projectPath,
+            maxBuffer: 10 * 1024 * 1024,
+          });
+          diff = result.stdout;
+        }
+
+        res.json({ success: true, diff, filePath });
+      } catch (innerError) {
+        logError(innerError, 'Git file diff failed');
+        res.json({ success: true, diff: '', filePath });
+      }
+    } catch (error) {
+      logError(error, 'Get file diff failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/git/routes/stage-files.ts b/temp_repo/apps/server/src/routes/git/routes/stage-files.ts
new file mode 100644
index 0000000000000000000000000000000000000000..98ca44c1a5246408a782112da89fae410deeb8d2
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/git/routes/stage-files.ts
@@ -0,0 +1,67 @@
+/**
+ * POST /stage-files endpoint - Stage or unstage files in the main project
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from '../common.js';
+import { stageFiles, StageFilesValidationError } from '../../../services/stage-files-service.js';
+
+export function createStageFilesHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, files, operation } = req.body as {
+        projectPath: string;
+        files: string[];
+        operation: 'stage' | 'unstage';
+      };
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath required',
+        });
+        return;
+      }
+
+      if (!Array.isArray(files) || files.length === 0) {
+        res.status(400).json({
+          success: false,
+          error: 'files array required and must not be empty',
+        });
+        return;
+      }
+
+      for (const file of files) {
+        if (typeof file !== 'string' || file.trim() === '') {
+          res.status(400).json({
+            success: false,
+            error: 'Each element of files must be a non-empty string',
+          });
+          return;
+        }
+      }
+
+      if (operation !== 'stage' && operation !== 'unstage') {
+        res.status(400).json({
+          success: false,
+          error: 'operation must be "stage" or "unstage"',
+        });
+        return;
+      }
+
+      const result = await stageFiles(projectPath, files, operation);
+
+      res.json({
+        success: true,
+        result,
+      });
+    } catch (error) {
+      if (error instanceof StageFilesValidationError) {
+        res.status(400).json({ success: false, error: error.message });
+        return;
+      }
+      logError(error, `${(req.body as { operation?: string })?.operation ?? 'stage'} files failed`);
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/github/index.ts b/temp_repo/apps/server/src/routes/github/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1f315c90a2b029d7737d6a8e7003ae361dac7fb5
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/github/index.ts
@@ -0,0 +1,70 @@
+/**
+ * GitHub routes - HTTP API for GitHub integration
+ */
+
+import { Router } from 'express';
+import type { EventEmitter } from '../../lib/events.js';
+import { validatePathParams } from '../../middleware/validate-paths.js';
+import { createCheckGitHubRemoteHandler } from './routes/check-github-remote.js';
+import { createListIssuesHandler } from './routes/list-issues.js';
+import { createListPRsHandler } from './routes/list-prs.js';
+import { createListCommentsHandler } from './routes/list-comments.js';
+import { createListPRReviewCommentsHandler } from './routes/list-pr-review-comments.js';
+import { createResolvePRCommentHandler } from './routes/resolve-pr-comment.js';
+import { createValidateIssueHandler } from './routes/validate-issue.js';
+import {
+  createValidationStatusHandler,
+  createValidationStopHandler,
+  createGetValidationsHandler,
+  createDeleteValidationHandler,
+  createMarkViewedHandler,
+} from './routes/validation-endpoints.js';
+import type { SettingsService } from '../../services/settings-service.js';
+
+export function createGitHubRoutes(
+  events: EventEmitter,
+  settingsService?: SettingsService
+): Router {
+  const router = Router();
+
+  router.post('/check-remote', validatePathParams('projectPath'), createCheckGitHubRemoteHandler());
+  router.post('/issues', validatePathParams('projectPath'), createListIssuesHandler());
+  router.post('/prs', validatePathParams('projectPath'), createListPRsHandler());
+  router.post('/issue-comments', validatePathParams('projectPath'), createListCommentsHandler());
+  router.post(
+    '/pr-review-comments',
+    validatePathParams('projectPath'),
+    createListPRReviewCommentsHandler()
+  );
+  router.post(
+    '/resolve-pr-comment',
+    validatePathParams('projectPath'),
+    createResolvePRCommentHandler()
+  );
+  router.post(
+    '/validate-issue',
+    validatePathParams('projectPath'),
+    createValidateIssueHandler(events, settingsService)
+  );
+
+  // Validation management endpoints
+  router.post(
+    '/validation-status',
+    validatePathParams('projectPath'),
+    createValidationStatusHandler()
+  );
+  router.post('/validation-stop', validatePathParams('projectPath'), createValidationStopHandler());
+  router.post('/validations', validatePathParams('projectPath'), createGetValidationsHandler());
+  router.post(
+    '/validation-delete',
+    validatePathParams('projectPath'),
+    createDeleteValidationHandler()
+  );
+  router.post(
+    '/validation-mark-viewed',
+    validatePathParams('projectPath'),
+    createMarkViewedHandler(events)
+  );
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/github/routes/check-github-remote.ts b/temp_repo/apps/server/src/routes/github/routes/check-github-remote.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5efdb172e684484fe6434c242fa3919801263015
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/github/routes/check-github-remote.ts
@@ -0,0 +1,127 @@
+/**
+ * GET /check-github-remote endpoint - Check if project has a GitHub remote
+ */
+
+import type { Request, Response } from 'express';
+import { execAsync, execEnv, getErrorMessage, logError } from './common.js';
+
+const GIT_REMOTE_ORIGIN_COMMAND = 'git remote get-url origin';
+const GH_REPO_VIEW_COMMAND = 'gh repo view --json name,owner';
+const GITHUB_REPO_URL_PREFIX = 'https://github.com/';
+const GITHUB_HTTPS_REMOTE_REGEX = /https:\/\/github\.com\/([^/]+)\/([^/.]+)/;
+const GITHUB_SSH_REMOTE_REGEX = /git@github\.com:([^/]+)\/([^/.]+)/;
+
+interface GhRepoViewResponse {
+  name?: string;
+  owner?: {
+    login?: string;
+  };
+}
+
+async function resolveRepoFromGh(projectPath: string): Promise<{
+  owner: string;
+  repo: string;
+} | null> {
+  try {
+    const { stdout } = await execAsync(GH_REPO_VIEW_COMMAND, {
+      cwd: projectPath,
+      env: execEnv,
+    });
+
+    const data = JSON.parse(stdout) as GhRepoViewResponse;
+    const owner = typeof data.owner?.login === 'string' ? data.owner.login : null;
+    const repo = typeof data.name === 'string' ? data.name : null;
+
+    if (!owner || !repo) {
+      return null;
+    }
+
+    return { owner, repo };
+  } catch {
+    return null;
+  }
+}
+
+export interface GitHubRemoteStatus {
+  hasGitHubRemote: boolean;
+  remoteUrl: string | null;
+  owner: string | null;
+  repo: string | null;
+}
+
+export async function checkGitHubRemote(projectPath: string): Promise<GitHubRemoteStatus> {
+  const status: GitHubRemoteStatus = {
+    hasGitHubRemote: false,
+    remoteUrl: null,
+    owner: null,
+    repo: null,
+  };
+
+  try {
+    let remoteUrl = '';
+    try {
+      // Get the remote URL (origin by default)
+      const { stdout } = await execAsync(GIT_REMOTE_ORIGIN_COMMAND, {
+        cwd: projectPath,
+        env: execEnv,
+      });
+      remoteUrl = stdout.trim();
+      status.remoteUrl = remoteUrl || null;
+    } catch {
+      // Ignore missing origin remote
+    }
+
+    const ghRepo = await resolveRepoFromGh(projectPath);
+    if (ghRepo) {
+      status.hasGitHubRemote = true;
+      status.owner = ghRepo.owner;
+      status.repo = ghRepo.repo;
+      if (!status.remoteUrl) {
+        status.remoteUrl = `${GITHUB_REPO_URL_PREFIX}${ghRepo.owner}/${ghRepo.repo}`;
+      }
+      return status;
+    }
+
+    // Check if it's a GitHub URL
+    // Formats: https://github.com/owner/repo.git, git@github.com:owner/repo.git
+    if (!remoteUrl) {
+      return status;
+    }
+
+    const httpsMatch = remoteUrl.match(GITHUB_HTTPS_REMOTE_REGEX);
+    const sshMatch = remoteUrl.match(GITHUB_SSH_REMOTE_REGEX);
+
+    const match = httpsMatch || sshMatch;
+    if (match) {
+      status.hasGitHubRemote = true;
+      status.owner = match[1];
+      status.repo = match[2].replace(/\.git$/, '');
+    }
+  } catch {
+    // No remote or not a git repo - that's okay
+  }
+
+  return status;
+}
+
+export function createCheckGitHubRemoteHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body;
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      const status = await checkGitHubRemote(projectPath);
+      res.json({
+        success: true,
+        ...status,
+      });
+    } catch (error) {
+      logError(error, 'Check GitHub remote failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/github/routes/common.ts b/temp_repo/apps/server/src/routes/github/routes/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..52ce2e3d05d20bdc6d7611987ee9d49fc0c2023e
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/github/routes/common.ts
@@ -0,0 +1,14 @@
+/**
+ * Common utilities for GitHub routes
+ *
+ * Re-exports shared utilities from lib/exec-utils so route consumers
+ * can continue importing from this module unchanged.
+ */
+
+import { exec } from 'child_process';
+import { promisify } from 'util';
+
+export const execAsync = promisify(exec);
+
+// Re-export shared utilities from the canonical location
+export { extendedPath, execEnv, getErrorMessage, logError } from '../../../lib/exec-utils.js';
diff --git a/temp_repo/apps/server/src/routes/github/routes/list-comments.ts b/temp_repo/apps/server/src/routes/github/routes/list-comments.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7c2216967b0a7ac6f57c4684252ae559eaa018b4
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/github/routes/list-comments.ts
@@ -0,0 +1,247 @@
+/**
+ * POST /issue-comments endpoint - Fetch comments for a GitHub issue
+ */
+
+import { spawn } from 'child_process';
+import type { Request, Response } from 'express';
+import type { GitHubComment, IssueCommentsResult } from '@automaker/types';
+import { execEnv, getErrorMessage, logError } from './common.js';
+import { checkGitHubRemote } from './check-github-remote.js';
+
+interface ListCommentsRequest {
+  projectPath: string;
+  issueNumber: number;
+  cursor?: string;
+}
+
+interface GraphQLComment {
+  id: string;
+  author: {
+    login: string;
+    avatarUrl?: string;
+  } | null;
+  body: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface GraphQLCommentConnection {
+  totalCount: number;
+  pageInfo: {
+    hasNextPage: boolean;
+    endCursor: string | null;
+  };
+  nodes: GraphQLComment[];
+}
+
+interface GraphQLIssueOrPullRequest {
+  __typename: 'Issue' | 'PullRequest';
+  comments: GraphQLCommentConnection;
+}
+
+interface GraphQLResponse {
+  data?: {
+    repository?: {
+      issueOrPullRequest?: GraphQLIssueOrPullRequest | null;
+    };
+  };
+  errors?: Array<{ message: string }>;
+}
+
+/** Timeout for GitHub API requests in milliseconds */
+const GITHUB_API_TIMEOUT_MS = 30000;
+const COMMENTS_PAGE_SIZE = 50;
+
+/**
+ * Validate cursor format (GraphQL cursors are typically base64 strings)
+ */
+function isValidCursor(cursor: string): boolean {
+  return /^[A-Za-z0-9+/=]+$/.test(cursor);
+}
+
+/**
+ * Fetch comments for a specific issue or pull request using GitHub GraphQL API
+ */
+async function fetchIssueComments(
+  projectPath: string,
+  owner: string,
+  repo: string,
+  issueNumber: number,
+  cursor?: string
+): Promise<IssueCommentsResult> {
+  // Validate cursor format to prevent potential injection
+  if (cursor && !isValidCursor(cursor)) {
+    throw new Error('Invalid cursor format');
+  }
+
+  // Use GraphQL variables instead of string interpolation for safety
+  const query = `
+    query GetIssueComments(
+      $owner: String!
+      $repo: String!
+      $issueNumber: Int!
+      $cursor: String
+      $pageSize: Int!
+    ) {
+      repository(owner: $owner, name: $repo) {
+        issueOrPullRequest(number: $issueNumber) {
+          __typename
+          ... on Issue {
+            comments(first: $pageSize, after: $cursor) {
+              totalCount
+              pageInfo {
+                hasNextPage
+                endCursor
+              }
+              nodes {
+                id
+                author {
+                  login
+                  avatarUrl
+                }
+                body
+                createdAt
+                updatedAt
+              }
+            }
+          }
+          ... on PullRequest {
+            comments(first: $pageSize, after: $cursor) {
+              totalCount
+              pageInfo {
+                hasNextPage
+                endCursor
+              }
+              nodes {
+                id
+                author {
+                  login
+                  avatarUrl
+                }
+                body
+                createdAt
+                updatedAt
+              }
+            }
+          }
+        }
+      }
+    }`;
+
+  const variables = {
+    owner,
+    repo,
+    issueNumber,
+    cursor: cursor || null,
+    pageSize: COMMENTS_PAGE_SIZE,
+  };
+
+  const requestBody = JSON.stringify({ query, variables });
+
+  const response = await new Promise<GraphQLResponse>((resolve, reject) => {
+    const gh = spawn('gh', ['api', 'graphql', '--input', '-'], {
+      cwd: projectPath,
+      env: execEnv,
+    });
+
+    // Add timeout to prevent hanging indefinitely
+    const timeoutId = setTimeout(() => {
+      gh.kill();
+      reject(new Error('GitHub API request timed out'));
+    }, GITHUB_API_TIMEOUT_MS);
+
+    let stdout = '';
+    let stderr = '';
+    gh.stdout.on('data', (data: Buffer) => (stdout += data.toString()));
+    gh.stderr.on('data', (data: Buffer) => (stderr += data.toString()));
+
+    gh.on('close', (code) => {
+      clearTimeout(timeoutId);
+      if (code !== 0) {
+        return reject(new Error(`gh process exited with code ${code}: ${stderr}`));
+      }
+      try {
+        resolve(JSON.parse(stdout));
+      } catch (e) {
+        reject(e);
+      }
+    });
+
+    gh.stdin.write(requestBody);
+    gh.stdin.end();
+  });
+
+  if (response.errors && response.errors.length > 0) {
+    throw new Error(response.errors[0].message);
+  }
+
+  const commentsData = response.data?.repository?.issueOrPullRequest?.comments;
+
+  if (!commentsData) {
+    throw new Error('Issue or pull request not found or no comments data available');
+  }
+
+  const comments: GitHubComment[] = commentsData.nodes.map((node) => ({
+    id: node.id,
+    author: {
+      login: node.author?.login || 'ghost',
+      avatarUrl: node.author?.avatarUrl,
+    },
+    body: node.body,
+    createdAt: node.createdAt,
+    updatedAt: node.updatedAt,
+  }));
+
+  return {
+    comments,
+    totalCount: commentsData.totalCount,
+    hasNextPage: commentsData.pageInfo.hasNextPage,
+    endCursor: commentsData.pageInfo.endCursor || undefined,
+  };
+}
+
+export function createListCommentsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, issueNumber, cursor } = req.body as ListCommentsRequest;
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!issueNumber || typeof issueNumber !== 'number') {
+        res
+          .status(400)
+          .json({ success: false, error: 'issueNumber is required and must be a number' });
+        return;
+      }
+
+      // First check if this is a GitHub repo and get owner/repo
+      const remoteStatus = await checkGitHubRemote(projectPath);
+      if (!remoteStatus.hasGitHubRemote || !remoteStatus.owner || !remoteStatus.repo) {
+        res.status(400).json({
+          success: false,
+          error: 'Project does not have a GitHub remote',
+        });
+        return;
+      }
+
+      const result = await fetchIssueComments(
+        projectPath,
+        remoteStatus.owner,
+        remoteStatus.repo,
+        issueNumber,
+        cursor
+      );
+
+      res.json({
+        success: true,
+        ...result,
+      });
+    } catch (error) {
+      logError(error, `Fetch comments for issue failed`);
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/github/routes/list-issues.ts b/temp_repo/apps/server/src/routes/github/routes/list-issues.ts
new file mode 100644
index 0000000000000000000000000000000000000000..96c3c202ea853b553f8e2aab5ad5d5dfa0b97593
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/github/routes/list-issues.ts
@@ -0,0 +1,331 @@
+/**
+ * POST /list-issues endpoint - List GitHub issues for a project
+ */
+
+import { spawn } from 'child_process';
+import type { Request, Response } from 'express';
+import { execAsync, execEnv, getErrorMessage, logError } from './common.js';
+import { checkGitHubRemote } from './check-github-remote.js';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('ListIssues');
+const OPEN_ISSUES_LIMIT = 100;
+const CLOSED_ISSUES_LIMIT = 50;
+const ISSUE_LIST_FIELDS = 'number,title,state,author,createdAt,labels,url,body,assignees';
+const ISSUE_STATE_OPEN = 'open';
+const ISSUE_STATE_CLOSED = 'closed';
+const GH_ISSUE_LIST_COMMAND = 'gh issue list';
+const GH_STATE_FLAG = '--state';
+const GH_JSON_FLAG = '--json';
+const GH_LIMIT_FLAG = '--limit';
+const LINKED_PRS_BATCH_SIZE = 20;
+const LINKED_PRS_TIMELINE_ITEMS = 10;
+
+export interface GitHubLabel {
+  name: string;
+  color: string;
+}
+
+export interface GitHubAuthor {
+  login: string;
+  avatarUrl?: string;
+}
+
+export interface GitHubAssignee {
+  login: string;
+  avatarUrl?: string;
+}
+
+export interface LinkedPullRequest {
+  number: number;
+  title: string;
+  state: string;
+  url: string;
+}
+
+export interface GitHubIssue {
+  number: number;
+  title: string;
+  state: string;
+  author: GitHubAuthor;
+  createdAt: string;
+  labels: GitHubLabel[];
+  url: string;
+  body: string;
+  assignees: GitHubAssignee[];
+  linkedPRs?: LinkedPullRequest[];
+}
+
+export interface ListIssuesResult {
+  success: boolean;
+  openIssues?: GitHubIssue[];
+  closedIssues?: GitHubIssue[];
+  error?: string;
+}
+
+/**
+ * Fetch linked PRs for a list of issues using GitHub GraphQL API
+ */
+async function fetchLinkedPRs(
+  projectPath: string,
+  owner: string,
+  repo: string,
+  issueNumbers: number[]
+): Promise<Map<number, LinkedPullRequest[]>> {
+  const linkedPRsMap = new Map<number, LinkedPullRequest[]>();
+
+  if (issueNumbers.length === 0) {
+    return linkedPRsMap;
+  }
+
+  // Build GraphQL query for batch fetching linked PRs
+  // We fetch up to 20 issues at a time to avoid query limits
+  for (let i = 0; i < issueNumbers.length; i += LINKED_PRS_BATCH_SIZE) {
+    const batch = issueNumbers.slice(i, i + LINKED_PRS_BATCH_SIZE);
+
+    const issueQueries = batch
+      .map(
+        (num, idx) => `
+        issue${idx}: issueOrPullRequest(number: ${num}) {
+          ... on Issue {
+            number
+            timelineItems(
+              first: ${LINKED_PRS_TIMELINE_ITEMS}
+              itemTypes: [CROSS_REFERENCED_EVENT, CONNECTED_EVENT]
+            ) {
+              nodes {
+                ... on CrossReferencedEvent {
+                  source {
+                    ... on PullRequest {
+                      number
+                      title
+                      state
+                      url
+                    }
+                  }
+                }
+                ... on ConnectedEvent {
+                  subject {
+                    ... on PullRequest {
+                      number
+                      title
+                      state
+                      url
+                    }
+                  }
+                }
+              }
+            }
+          }
+          ... on PullRequest {
+            number
+            timelineItems(
+              first: ${LINKED_PRS_TIMELINE_ITEMS}
+              itemTypes: [CROSS_REFERENCED_EVENT, CONNECTED_EVENT]
+            ) {
+              nodes {
+                ... on CrossReferencedEvent {
+                  source {
+                    ... on PullRequest {
+                      number
+                      title
+                      state
+                      url
+                    }
+                  }
+                }
+                ... on ConnectedEvent {
+                  subject {
+                    ... on PullRequest {
+                      number
+                      title
+                      state
+                      url
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }`
+      )
+      .join('\n');
+
+    const query = `{
+      repository(owner: "${owner}", name: "${repo}") {
+        ${issueQueries}
+      }
+    }`;
+
+    try {
+      // Use spawn with stdin to avoid shell injection vulnerabilities
+      // --input - reads the JSON request body from stdin
+      const requestBody = JSON.stringify({ query });
+      const response = await new Promise<Record<string, unknown>>((resolve, reject) => {
+        const gh = spawn('gh', ['api', 'graphql', '--input', '-'], {
+          cwd: projectPath,
+          env: execEnv,
+        });
+
+        let stdout = '';
+        let stderr = '';
+        gh.stdout.on('data', (data: Buffer) => (stdout += data.toString()));
+        gh.stderr.on('data', (data: Buffer) => (stderr += data.toString()));
+
+        gh.on('close', (code) => {
+          if (code !== 0) {
+            return reject(new Error(`gh process exited with code ${code}: ${stderr}`));
+          }
+          try {
+            resolve(JSON.parse(stdout));
+          } catch (e) {
+            reject(e);
+          }
+        });
+
+        gh.stdin.write(requestBody);
+        gh.stdin.end();
+      });
+
+      const repoData = (response?.data as Record<string, unknown>)?.repository as Record<
+        string,
+        unknown
+      > | null;
+
+      if (repoData) {
+        batch.forEach((issueNum, idx) => {
+          const issueData = repoData[`issue${idx}`] as {
+            timelineItems?: {
+              nodes?: Array<{
+                source?: { number?: number; title?: string; state?: string; url?: string };
+                subject?: { number?: number; title?: string; state?: string; url?: string };
+              }>;
+            };
+          } | null;
+          if (issueData?.timelineItems?.nodes) {
+            const linkedPRs: LinkedPullRequest[] = [];
+            const seenPRs = new Set<number>();
+
+            for (const node of issueData.timelineItems.nodes) {
+              const pr = node?.source || node?.subject;
+              if (pr?.number && !seenPRs.has(pr.number)) {
+                seenPRs.add(pr.number);
+                linkedPRs.push({
+                  number: pr.number,
+                  title: pr.title || '',
+                  state: (pr.state || '').toLowerCase(),
+                  url: pr.url || '',
+                });
+              }
+            }
+
+            if (linkedPRs.length > 0) {
+              linkedPRsMap.set(issueNum, linkedPRs);
+            }
+          }
+        });
+      }
+    } catch (error) {
+      // If GraphQL fails, continue without linked PRs
+      logger.warn(
+        'Failed to fetch linked PRs via GraphQL:',
+        error instanceof Error ? error.message : error
+      );
+    }
+  }
+
+  return linkedPRsMap;
+}
+
+export function createListIssuesHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body;
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      // First check if this is a GitHub repo
+      const remoteStatus = await checkGitHubRemote(projectPath);
+      if (!remoteStatus.hasGitHubRemote) {
+        res.status(400).json({
+          success: false,
+          error: 'Project does not have a GitHub remote',
+        });
+        return;
+      }
+
+      // Fetch open and closed issues in parallel (now including assignees)
+      const repoQualifier =
+        remoteStatus.owner && remoteStatus.repo ? `${remoteStatus.owner}/${remoteStatus.repo}` : '';
+      const repoFlag = repoQualifier ? `-R ${repoQualifier}` : '';
+      const [openResult, closedResult] = await Promise.all([
+        execAsync(
+          [
+            GH_ISSUE_LIST_COMMAND,
+            repoFlag,
+            `${GH_STATE_FLAG} ${ISSUE_STATE_OPEN}`,
+            `${GH_JSON_FLAG} ${ISSUE_LIST_FIELDS}`,
+            `${GH_LIMIT_FLAG} ${OPEN_ISSUES_LIMIT}`,
+          ]
+            .filter(Boolean)
+            .join(' '),
+          {
+            cwd: projectPath,
+            env: execEnv,
+          }
+        ),
+        execAsync(
+          [
+            GH_ISSUE_LIST_COMMAND,
+            repoFlag,
+            `${GH_STATE_FLAG} ${ISSUE_STATE_CLOSED}`,
+            `${GH_JSON_FLAG} ${ISSUE_LIST_FIELDS}`,
+            `${GH_LIMIT_FLAG} ${CLOSED_ISSUES_LIMIT}`,
+          ]
+            .filter(Boolean)
+            .join(' '),
+          {
+            cwd: projectPath,
+            env: execEnv,
+          }
+        ),
+      ]);
+
+      const { stdout: openStdout } = openResult;
+      const { stdout: closedStdout } = closedResult;
+
+      const openIssues: GitHubIssue[] = JSON.parse(openStdout || '[]');
+      const closedIssues: GitHubIssue[] = JSON.parse(closedStdout || '[]');
+
+      // Fetch linked PRs for open issues (more relevant for active work)
+      if (remoteStatus.owner && remoteStatus.repo && openIssues.length > 0) {
+        const linkedPRsMap = await fetchLinkedPRs(
+          projectPath,
+          remoteStatus.owner,
+          remoteStatus.repo,
+          openIssues.map((i) => i.number)
+        );
+
+        // Attach linked PRs to issues
+        for (const issue of openIssues) {
+          const linkedPRs = linkedPRsMap.get(issue.number);
+          if (linkedPRs) {
+            issue.linkedPRs = linkedPRs;
+          }
+        }
+      }
+
+      res.json({
+        success: true,
+        openIssues,
+        closedIssues,
+      });
+    } catch (error) {
+      logError(error, 'List GitHub issues failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/github/routes/list-pr-review-comments.ts b/temp_repo/apps/server/src/routes/github/routes/list-pr-review-comments.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ff16f6e99f81cb47c4675f53e32cc7c403563d2a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/github/routes/list-pr-review-comments.ts
@@ -0,0 +1,72 @@
+/**
+ * POST /pr-review-comments endpoint - Fetch review comments for a GitHub PR
+ *
+ * Fetches both regular PR comments and inline code review comments
+ * for a specific pull request, providing file path and line context.
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from './common.js';
+import { checkGitHubRemote } from './check-github-remote.js';
+import {
+  fetchPRReviewComments,
+  fetchReviewThreadResolvedStatus,
+  type PRReviewComment,
+  type ListPRReviewCommentsResult,
+} from '../../../services/pr-review-comments.service.js';
+
+// Re-export types so existing callers continue to work
+export type { PRReviewComment, ListPRReviewCommentsResult };
+// Re-export service functions so existing callers continue to work
+export { fetchPRReviewComments, fetchReviewThreadResolvedStatus };
+
+interface ListPRReviewCommentsRequest {
+  projectPath: string;
+  prNumber: number;
+}
+
+export function createListPRReviewCommentsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, prNumber } = req.body as ListPRReviewCommentsRequest;
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!prNumber || typeof prNumber !== 'number') {
+        res
+          .status(400)
+          .json({ success: false, error: 'prNumber is required and must be a number' });
+        return;
+      }
+
+      // Check if this is a GitHub repo and get owner/repo
+      const remoteStatus = await checkGitHubRemote(projectPath);
+      if (!remoteStatus.hasGitHubRemote || !remoteStatus.owner || !remoteStatus.repo) {
+        res.status(400).json({
+          success: false,
+          error: 'Project does not have a GitHub remote',
+        });
+        return;
+      }
+
+      const comments = await fetchPRReviewComments(
+        projectPath,
+        remoteStatus.owner,
+        remoteStatus.repo,
+        prNumber
+      );
+
+      res.json({
+        success: true,
+        comments,
+        totalCount: comments.length,
+      });
+    } catch (error) {
+      logError(error, 'Fetch PR review comments failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/github/routes/list-prs.ts b/temp_repo/apps/server/src/routes/github/routes/list-prs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b273fc0abef74b547f3abb9bd1b5dbb6a628f6e8
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/github/routes/list-prs.ts
@@ -0,0 +1,123 @@
+/**
+ * POST /list-prs endpoint - List GitHub pull requests for a project
+ */
+
+import type { Request, Response } from 'express';
+import { execAsync, execEnv, getErrorMessage, logError } from './common.js';
+import { checkGitHubRemote } from './check-github-remote.js';
+
+const OPEN_PRS_LIMIT = 100;
+const MERGED_PRS_LIMIT = 50;
+const PR_LIST_FIELDS =
+  'number,title,state,author,createdAt,labels,url,isDraft,headRefName,reviewDecision,mergeable,body';
+const PR_STATE_OPEN = 'open';
+const PR_STATE_MERGED = 'merged';
+const GH_PR_LIST_COMMAND = 'gh pr list';
+const GH_STATE_FLAG = '--state';
+const GH_JSON_FLAG = '--json';
+const GH_LIMIT_FLAG = '--limit';
+
+export interface GitHubLabel {
+  name: string;
+  color: string;
+}
+
+export interface GitHubAuthor {
+  login: string;
+}
+
+export interface GitHubPR {
+  number: number;
+  title: string;
+  state: string;
+  author: GitHubAuthor;
+  createdAt: string;
+  labels: GitHubLabel[];
+  url: string;
+  isDraft: boolean;
+  headRefName: string;
+  reviewDecision: string | null;
+  mergeable: string;
+  body: string;
+}
+
+export interface ListPRsResult {
+  success: boolean;
+  openPRs?: GitHubPR[];
+  mergedPRs?: GitHubPR[];
+  error?: string;
+}
+
+export function createListPRsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body;
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      // First check if this is a GitHub repo
+      const remoteStatus = await checkGitHubRemote(projectPath);
+      if (!remoteStatus.hasGitHubRemote) {
+        res.status(400).json({
+          success: false,
+          error: 'Project does not have a GitHub remote',
+        });
+        return;
+      }
+
+      const repoQualifier =
+        remoteStatus.owner && remoteStatus.repo ? `${remoteStatus.owner}/${remoteStatus.repo}` : '';
+      const repoFlag = repoQualifier ? `-R ${repoQualifier}` : '';
+
+      const [openResult, mergedResult] = await Promise.all([
+        execAsync(
+          [
+            GH_PR_LIST_COMMAND,
+            repoFlag,
+            `${GH_STATE_FLAG} ${PR_STATE_OPEN}`,
+            `${GH_JSON_FLAG} ${PR_LIST_FIELDS}`,
+            `${GH_LIMIT_FLAG} ${OPEN_PRS_LIMIT}`,
+          ]
+            .filter(Boolean)
+            .join(' '),
+          {
+            cwd: projectPath,
+            env: execEnv,
+          }
+        ),
+        execAsync(
+          [
+            GH_PR_LIST_COMMAND,
+            repoFlag,
+            `${GH_STATE_FLAG} ${PR_STATE_MERGED}`,
+            `${GH_JSON_FLAG} ${PR_LIST_FIELDS}`,
+            `${GH_LIMIT_FLAG} ${MERGED_PRS_LIMIT}`,
+          ]
+            .filter(Boolean)
+            .join(' '),
+          {
+            cwd: projectPath,
+            env: execEnv,
+          }
+        ),
+      ]);
+      const { stdout: openStdout } = openResult;
+      const { stdout: mergedStdout } = mergedResult;
+
+      const openPRs: GitHubPR[] = JSON.parse(openStdout || '[]');
+      const mergedPRs: GitHubPR[] = JSON.parse(mergedStdout || '[]');
+
+      res.json({
+        success: true,
+        openPRs,
+        mergedPRs,
+      });
+    } catch (error) {
+      logError(error, 'List GitHub PRs failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/github/routes/resolve-pr-comment.ts b/temp_repo/apps/server/src/routes/github/routes/resolve-pr-comment.ts
new file mode 100644
index 0000000000000000000000000000000000000000..39855c0442b589098e0be6355b58c3d8dc3f602a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/github/routes/resolve-pr-comment.ts
@@ -0,0 +1,66 @@
+/**
+ * POST /resolve-pr-comment endpoint - Resolve or unresolve a GitHub PR review thread
+ *
+ * Uses the GitHub GraphQL API to resolve or unresolve a review thread
+ * identified by its GraphQL node ID (threadId).
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from './common.js';
+import { checkGitHubRemote } from './check-github-remote.js';
+import { executeReviewThreadMutation } from '../../../services/github-pr-comment.service.js';
+
+export interface ResolvePRCommentResult {
+  success: boolean;
+  isResolved?: boolean;
+  error?: string;
+}
+
+interface ResolvePRCommentRequest {
+  projectPath: string;
+  threadId: string;
+  resolve: boolean;
+}
+
+export function createResolvePRCommentHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, threadId, resolve } = req.body as ResolvePRCommentRequest;
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!threadId) {
+        res.status(400).json({ success: false, error: 'threadId is required' });
+        return;
+      }
+
+      if (typeof resolve !== 'boolean') {
+        res.status(400).json({ success: false, error: 'resolve must be a boolean' });
+        return;
+      }
+
+      // Check if this is a GitHub repo
+      const remoteStatus = await checkGitHubRemote(projectPath);
+      if (!remoteStatus.hasGitHubRemote) {
+        res.status(400).json({
+          success: false,
+          error: 'Project does not have a GitHub remote',
+        });
+        return;
+      }
+
+      const result = await executeReviewThreadMutation(projectPath, threadId, resolve);
+
+      res.json({
+        success: true,
+        isResolved: result.isResolved,
+      });
+    } catch (error) {
+      logError(error, 'Resolve PR comment failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/github/routes/validate-issue.ts b/temp_repo/apps/server/src/routes/github/routes/validate-issue.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7707f2b7d5f07510c782a79fb4a97d29bff22363
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/github/routes/validate-issue.ts
@@ -0,0 +1,448 @@
+/**
+ * POST /validate-issue endpoint - Validate a GitHub issue using provider abstraction (async)
+ *
+ * Scans the codebase to determine if an issue is valid, invalid, or needs clarification.
+ * Runs asynchronously and emits events for progress and completion.
+ * Supports Claude, Codex, Cursor, and OpenCode models.
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import type {
+  IssueValidationResult,
+  IssueValidationEvent,
+  ModelId,
+  GitHubComment,
+  LinkedPRInfo,
+  ThinkingLevel,
+  ReasoningEffort,
+} from '@automaker/types';
+import {
+  DEFAULT_PHASE_MODELS,
+  isClaudeModel,
+  isCodexModel,
+  isCursorModel,
+  isOpencodeModel,
+  supportsStructuredOutput,
+} from '@automaker/types';
+import { resolvePhaseModel, resolveModelString } from '@automaker/model-resolver';
+import { extractJson } from '../../../lib/json-extractor.js';
+import { writeValidation } from '../../../lib/validation-storage.js';
+import { streamingQuery } from '../../../providers/simple-query-service.js';
+import {
+  issueValidationSchema,
+  buildValidationPrompt,
+  ValidationComment,
+  ValidationLinkedPR,
+} from './validation-schema.js';
+import {
+  getPromptCustomization,
+  getAutoLoadClaudeMdSetting,
+  resolveProviderContext,
+} from '../../../lib/settings-helpers.js';
+import {
+  trySetValidationRunning,
+  clearValidationStatus,
+  getErrorMessage,
+  logError,
+  logger,
+} from './validation-common.js';
+import type { SettingsService } from '../../../services/settings-service.js';
+
+/**
+ * Request body for issue validation
+ */
+interface ValidateIssueRequestBody {
+  projectPath: string;
+  issueNumber: number;
+  issueTitle: string;
+  issueBody: string;
+  issueLabels?: string[];
+  /** Model to use for validation (Claude alias or provider model ID) */
+  model?: ModelId;
+  /** Thinking level for Claude models (ignored for non-Claude models) */
+  thinkingLevel?: ThinkingLevel;
+  /** Reasoning effort for Codex models (ignored for non-Codex models) */
+  reasoningEffort?: ReasoningEffort;
+  /** Optional Claude-compatible provider ID for custom providers (e.g., GLM, MiniMax) */
+  providerId?: string;
+  /** Comments to include in validation analysis */
+  comments?: GitHubComment[];
+  /** Linked pull requests for this issue */
+  linkedPRs?: LinkedPRInfo[];
+}
+
+/**
+ * Run the validation asynchronously
+ *
+ * Emits events for start, progress, complete, and error.
+ * Stores result on completion.
+ * Supports Claude/Codex models (structured output) and Cursor/OpenCode models (JSON parsing).
+ */
+async function runValidation(
+  projectPath: string,
+  issueNumber: number,
+  issueTitle: string,
+  issueBody: string,
+  issueLabels: string[] | undefined,
+  model: ModelId,
+  events: EventEmitter,
+  abortController: AbortController,
+  settingsService?: SettingsService,
+  providerId?: string,
+  comments?: ValidationComment[],
+  linkedPRs?: ValidationLinkedPR[],
+  thinkingLevel?: ThinkingLevel,
+  reasoningEffort?: ReasoningEffort
+): Promise<void> {
+  // Emit start event
+  const startEvent: IssueValidationEvent = {
+    type: 'issue_validation_start',
+    issueNumber,
+    issueTitle,
+    projectPath,
+  };
+  events.emit('issue-validation:event', startEvent);
+
+  // Set up timeout (6 minutes)
+  const VALIDATION_TIMEOUT_MS = 360000;
+  const timeoutId = setTimeout(() => {
+    logger.warn(`Validation timeout reached after ${VALIDATION_TIMEOUT_MS}ms`);
+    abortController.abort();
+  }, VALIDATION_TIMEOUT_MS);
+
+  try {
+    // Build the prompt (include comments and linked PRs if provided)
+    const basePrompt = buildValidationPrompt(
+      issueNumber,
+      issueTitle,
+      issueBody,
+      issueLabels,
+      comments,
+      linkedPRs
+    );
+
+    let responseText = '';
+
+    // Get customized prompts from settings
+    const prompts = await getPromptCustomization(settingsService, '[ValidateIssue]');
+    const issueValidationSystemPrompt = prompts.issueValidation.systemPrompt;
+
+    // Determine if we should use structured output based on model type
+    // Claude and Codex support it; Cursor, Gemini, OpenCode, Copilot don't
+    const useStructuredOutput = supportsStructuredOutput(model);
+
+    // Build the final prompt - for Cursor, include system prompt and JSON schema instructions
+    let finalPrompt = basePrompt;
+    if (!useStructuredOutput) {
+      finalPrompt = `${issueValidationSystemPrompt}
+
+CRITICAL INSTRUCTIONS:
+1. DO NOT write any files. Return the JSON in your response only.
+2. Respond with ONLY a JSON object - no explanations, no markdown, just raw JSON.
+3. The JSON must match this exact schema:
+
+${JSON.stringify(issueValidationSchema, null, 2)}
+
+Your entire response should be valid JSON starting with { and ending with }. No text before or after.
+
+${basePrompt}`;
+    }
+
+    // Load autoLoadClaudeMd setting
+    const autoLoadClaudeMd = await getAutoLoadClaudeMdSetting(
+      projectPath,
+      settingsService,
+      '[ValidateIssue]'
+    );
+
+    // Use request overrides if provided, otherwise fall back to settings
+    let effectiveThinkingLevel: ThinkingLevel | undefined = thinkingLevel;
+    let effectiveReasoningEffort: ReasoningEffort | undefined = reasoningEffort;
+    if (!effectiveThinkingLevel || !effectiveReasoningEffort) {
+      const settings = await settingsService?.getGlobalSettings();
+      const phaseModelEntry =
+        settings?.phaseModels?.validationModel || DEFAULT_PHASE_MODELS.validationModel;
+      const resolved = resolvePhaseModel(phaseModelEntry);
+      if (!effectiveThinkingLevel) {
+        effectiveThinkingLevel = resolved.thinkingLevel;
+      }
+      if (!effectiveReasoningEffort && typeof phaseModelEntry !== 'string') {
+        effectiveReasoningEffort = phaseModelEntry.reasoningEffort;
+      }
+    }
+
+    // Check if the model is a provider model (like "GLM-4.5-Air")
+    // If so, get the provider config and resolved Claude model
+    let claudeCompatibleProvider: import('@automaker/types').ClaudeCompatibleProvider | undefined;
+    let providerResolvedModel: string | undefined;
+    let credentials = await settingsService?.getCredentials();
+
+    if (settingsService) {
+      const providerResult = await resolveProviderContext(
+        settingsService,
+        model,
+        providerId,
+        '[ValidateIssue]'
+      );
+      if (providerResult.provider) {
+        claudeCompatibleProvider = providerResult.provider;
+        providerResolvedModel = providerResult.resolvedModel;
+        credentials = providerResult.credentials;
+        logger.info(
+          `Using provider "${providerResult.provider.name}" for model "${model}"` +
+            (providerResolvedModel ? ` -> resolved to "${providerResolvedModel}"` : '')
+        );
+      }
+    }
+
+    // CRITICAL: For custom providers (GLM, MiniMax), pass the provider's model ID (e.g. "GLM-4.7")
+    // to the API, NOT the resolved Claude model - otherwise we get "model not found"
+    // For standard Claude models, resolve aliases (e.g., 'opus' -> 'claude-opus-4-20250514')
+    const effectiveModel = claudeCompatibleProvider
+      ? (model as string)
+      : providerResolvedModel || resolveModelString(model as string);
+    logger.info(`Using model: ${effectiveModel}`);
+
+    // Use streamingQuery with event callbacks
+    const result = await streamingQuery({
+      prompt: finalPrompt,
+      model: effectiveModel,
+      cwd: projectPath,
+      systemPrompt: useStructuredOutput ? issueValidationSystemPrompt : undefined,
+      abortController,
+      thinkingLevel: effectiveThinkingLevel,
+      reasoningEffort: effectiveReasoningEffort,
+      readOnly: true, // Issue validation only reads code, doesn't write
+      settingSources: autoLoadClaudeMd ? ['user', 'project', 'local'] : undefined,
+      claudeCompatibleProvider, // Pass provider for alternative endpoint configuration
+      credentials, // Pass credentials for resolving 'credentials' apiKeySource
+      outputFormat: useStructuredOutput
+        ? {
+            type: 'json_schema',
+            schema: issueValidationSchema as Record<string, unknown>,
+          }
+        : undefined,
+      onText: (text) => {
+        responseText += text;
+        // Emit progress event
+        const progressEvent: IssueValidationEvent = {
+          type: 'issue_validation_progress',
+          issueNumber,
+          content: text,
+          projectPath,
+        };
+        events.emit('issue-validation:event', progressEvent);
+      },
+    });
+
+    // Clear timeout
+    clearTimeout(timeoutId);
+
+    // Get validation result from structured output or parse from text
+    let validationResult: IssueValidationResult | null = null;
+
+    if (result.structured_output) {
+      validationResult = result.structured_output as unknown as IssueValidationResult;
+      logger.debug('Received structured output:', validationResult);
+    } else if (responseText) {
+      // Parse JSON from response text
+      validationResult = extractJson<IssueValidationResult>(responseText, { logger });
+    }
+
+    // Require validation result
+    if (!validationResult) {
+      logger.error('No validation result received from AI provider');
+      throw new Error('Validation failed: no valid result received');
+    }
+
+    logger.info(`Issue #${issueNumber} validation complete: ${validationResult.verdict}`);
+
+    // Store the result
+    await writeValidation(projectPath, issueNumber, {
+      issueNumber,
+      issueTitle,
+      validatedAt: new Date().toISOString(),
+      model,
+      result: validationResult,
+    });
+
+    // Emit completion event
+    const completeEvent: IssueValidationEvent = {
+      type: 'issue_validation_complete',
+      issueNumber,
+      issueTitle,
+      result: validationResult,
+      projectPath,
+      model,
+    };
+    events.emit('issue-validation:event', completeEvent);
+  } catch (error) {
+    clearTimeout(timeoutId);
+
+    const errorMessage = getErrorMessage(error);
+    logError(error, `Issue #${issueNumber} validation failed`);
+
+    // Emit error event
+    const errorEvent: IssueValidationEvent = {
+      type: 'issue_validation_error',
+      issueNumber,
+      error: errorMessage,
+      projectPath,
+    };
+    events.emit('issue-validation:event', errorEvent);
+
+    throw error;
+  }
+}
+
+/**
+ * Creates the handler for validating GitHub issues against the codebase.
+ *
+ * Uses the provider abstraction with:
+ * - Read-only tools (Read, Glob, Grep) for codebase analysis
+ * - JSON schema structured output for reliable parsing
+ * - System prompt guiding the validation process
+ * - Async execution with event emission
+ */
+export function createValidateIssueHandler(
+  events: EventEmitter,
+  settingsService?: SettingsService
+) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const {
+        projectPath,
+        issueNumber,
+        issueTitle,
+        issueBody,
+        issueLabels,
+        model = 'opus',
+        thinkingLevel,
+        reasoningEffort,
+        providerId,
+        comments: rawComments,
+        linkedPRs: rawLinkedPRs,
+      } = req.body as ValidateIssueRequestBody;
+
+      const normalizedProviderId =
+        typeof providerId === 'string' && providerId.trim().length > 0
+          ? providerId.trim()
+          : undefined;
+
+      // Transform GitHubComment[] to ValidationComment[] if provided
+      const validationComments: ValidationComment[] | undefined = rawComments?.map((c) => ({
+        author: c.author?.login || 'ghost',
+        createdAt: c.createdAt,
+        body: c.body,
+      }));
+
+      // Transform LinkedPRInfo[] to ValidationLinkedPR[] if provided
+      const validationLinkedPRs: ValidationLinkedPR[] | undefined = rawLinkedPRs?.map((pr) => ({
+        number: pr.number,
+        title: pr.title,
+        state: pr.state,
+      }));
+
+      logger.info(
+        `[ValidateIssue] Received validation request for issue #${issueNumber}` +
+          (rawComments?.length ? ` with ${rawComments.length} comments` : ' (no comments)') +
+          (rawLinkedPRs?.length ? ` and ${rawLinkedPRs.length} linked PRs` : '')
+      );
+
+      // Validate required fields
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!issueNumber || typeof issueNumber !== 'number') {
+        res
+          .status(400)
+          .json({ success: false, error: 'issueNumber is required and must be a number' });
+        return;
+      }
+
+      if (!issueTitle || typeof issueTitle !== 'string') {
+        res.status(400).json({ success: false, error: 'issueTitle is required' });
+        return;
+      }
+
+      if (typeof issueBody !== 'string') {
+        res.status(400).json({ success: false, error: 'issueBody must be a string' });
+        return;
+      }
+
+      // Validate model parameter at runtime - accept any supported provider model
+      const isValidModel =
+        isClaudeModel(model) ||
+        isCursorModel(model) ||
+        isCodexModel(model) ||
+        isOpencodeModel(model) ||
+        !!normalizedProviderId;
+
+      if (!isValidModel) {
+        res.status(400).json({
+          success: false,
+          error:
+            'Invalid model. Must be a Claude, Cursor, Codex, or OpenCode model ID (or alias), or provide a valid providerId for custom Claude-compatible models.',
+        });
+        return;
+      }
+
+      logger.info(`Starting async validation for issue #${issueNumber}: ${issueTitle}`);
+
+      // Create abort controller and atomically try to claim validation slot
+      // This prevents TOCTOU race conditions
+      const abortController = new AbortController();
+      if (!trySetValidationRunning(projectPath, issueNumber, abortController)) {
+        res.json({
+          success: false,
+          error: `Validation is already running for issue #${issueNumber}`,
+        });
+        return;
+      }
+
+      // Start validation in background (fire-and-forget)
+      runValidation(
+        projectPath,
+        issueNumber,
+        issueTitle,
+        issueBody,
+        issueLabels,
+        model,
+        events,
+        abortController,
+        settingsService,
+        normalizedProviderId,
+        validationComments,
+        validationLinkedPRs,
+        thinkingLevel,
+        reasoningEffort
+      )
+        .catch(() => {
+          // Error is already handled inside runValidation (event emitted)
+        })
+        .finally(() => {
+          clearValidationStatus(projectPath, issueNumber);
+        });
+
+      // Return immediately
+      res.json({
+        success: true,
+        message: `Validation started for issue #${issueNumber}`,
+        issueNumber,
+      });
+    } catch (error) {
+      logError(error, `Issue validation failed`);
+      logger.error('Issue validation error:', error);
+
+      if (!res.headersSent) {
+        res.status(500).json({
+          success: false,
+          error: getErrorMessage(error),
+        });
+      }
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/github/routes/validation-common.ts b/temp_repo/apps/server/src/routes/github/routes/validation-common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..63d34ceb7368cc213eb18d08bc1e03c2215527d6
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/github/routes/validation-common.ts
@@ -0,0 +1,174 @@
+/**
+ * Common utilities and state for issue validation routes
+ *
+ * Tracks running validation status per issue to support:
+ * - Checking if a validation is in progress
+ * - Cancelling a running validation
+ * - Preventing duplicate validations for the same issue
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../../common.js';
+
+const logger = createLogger('IssueValidation');
+
+/**
+ * Status of a validation in progress
+ */
+interface ValidationStatus {
+  isRunning: boolean;
+  abortController: AbortController;
+  startedAt: Date;
+}
+
+/**
+ * Map of issue number to validation status
+ * Key format: `${projectPath}||${issueNumber}` to support multiple projects
+ * Note: Using `||` as delimiter since `:` appears in Windows paths (e.g., C:\)
+ */
+const validationStatusMap = new Map<string, ValidationStatus>();
+
+/** Maximum age for stale validation entries before cleanup (1 hour) */
+const MAX_VALIDATION_AGE_MS = 60 * 60 * 1000;
+
+/**
+ * Create a unique key for a validation
+ * Uses `||` as delimiter since `:` appears in Windows paths
+ */
+function getValidationKey(projectPath: string, issueNumber: number): string {
+  return `${projectPath}||${issueNumber}`;
+}
+
+/**
+ * Check if a validation is currently running for an issue
+ */
+export function isValidationRunning(projectPath: string, issueNumber: number): boolean {
+  const key = getValidationKey(projectPath, issueNumber);
+  const status = validationStatusMap.get(key);
+  return status?.isRunning ?? false;
+}
+
+/**
+ * Get validation status for an issue
+ */
+export function getValidationStatus(
+  projectPath: string,
+  issueNumber: number
+): { isRunning: boolean; startedAt?: Date } | null {
+  const key = getValidationKey(projectPath, issueNumber);
+  const status = validationStatusMap.get(key);
+  if (!status) {
+    return null;
+  }
+  return {
+    isRunning: status.isRunning,
+    startedAt: status.startedAt,
+  };
+}
+
+/**
+ * Get all running validations for a project
+ */
+export function getRunningValidations(projectPath: string): number[] {
+  const runningIssues: number[] = [];
+  const prefix = `${projectPath}||`;
+  for (const [key, status] of validationStatusMap.entries()) {
+    if (status.isRunning && key.startsWith(prefix)) {
+      const issueNumber = parseInt(key.slice(prefix.length), 10);
+      if (!isNaN(issueNumber)) {
+        runningIssues.push(issueNumber);
+      }
+    }
+  }
+  return runningIssues;
+}
+
+/**
+ * Set a validation as running
+ */
+export function setValidationRunning(
+  projectPath: string,
+  issueNumber: number,
+  abortController: AbortController
+): void {
+  const key = getValidationKey(projectPath, issueNumber);
+  validationStatusMap.set(key, {
+    isRunning: true,
+    abortController,
+    startedAt: new Date(),
+  });
+}
+
+/**
+ * Atomically try to set a validation as running (check-and-set)
+ * Prevents TOCTOU race conditions when starting validations
+ *
+ * @returns true if successfully claimed, false if already running
+ */
+export function trySetValidationRunning(
+  projectPath: string,
+  issueNumber: number,
+  abortController: AbortController
+): boolean {
+  const key = getValidationKey(projectPath, issueNumber);
+  if (validationStatusMap.has(key)) {
+    return false; // Already running
+  }
+  validationStatusMap.set(key, {
+    isRunning: true,
+    abortController,
+    startedAt: new Date(),
+  });
+  return true; // Successfully claimed
+}
+
+/**
+ * Cleanup stale validation entries (e.g., from crashed validations)
+ * Should be called periodically to prevent memory leaks
+ */
+export function cleanupStaleValidations(): number {
+  const now = Date.now();
+  let cleanedCount = 0;
+  for (const [key, status] of validationStatusMap.entries()) {
+    if (now - status.startedAt.getTime() > MAX_VALIDATION_AGE_MS) {
+      status.abortController.abort();
+      validationStatusMap.delete(key);
+      cleanedCount++;
+    }
+  }
+  if (cleanedCount > 0) {
+    logger.info(`Cleaned up ${cleanedCount} stale validation entries`);
+  }
+  return cleanedCount;
+}
+
+/**
+ * Clear validation status (call when validation completes or errors)
+ */
+export function clearValidationStatus(projectPath: string, issueNumber: number): void {
+  const key = getValidationKey(projectPath, issueNumber);
+  validationStatusMap.delete(key);
+}
+
+/**
+ * Abort a running validation
+ *
+ * @returns true if validation was aborted, false if not running
+ */
+export function abortValidation(projectPath: string, issueNumber: number): boolean {
+  const key = getValidationKey(projectPath, issueNumber);
+  const status = validationStatusMap.get(key);
+
+  if (!status || !status.isRunning) {
+    return false;
+  }
+
+  status.abortController.abort();
+  validationStatusMap.delete(key);
+  return true;
+}
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
+export { logger };
diff --git a/temp_repo/apps/server/src/routes/github/routes/validation-endpoints.ts b/temp_repo/apps/server/src/routes/github/routes/validation-endpoints.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1f3c23161e9c4be7835e275ea90ed77565740e0f
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/github/routes/validation-endpoints.ts
@@ -0,0 +1,234 @@
+/**
+ * Additional validation endpoints for status, stop, and retrieving stored validations
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import type { IssueValidationEvent } from '@automaker/types';
+import {
+  getValidationStatus,
+  getRunningValidations,
+  abortValidation,
+  getErrorMessage,
+  logError,
+  logger,
+} from './validation-common.js';
+import {
+  getAllValidations,
+  getValidationWithFreshness,
+  deleteValidation,
+  markValidationViewed,
+} from '../../../lib/validation-storage.js';
+
+/**
+ * POST /validation-status - Check if validation is running for an issue
+ */
+export function createValidationStatusHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, issueNumber } = req.body as {
+        projectPath: string;
+        issueNumber?: number;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      // If issueNumber provided, check specific issue
+      if (issueNumber !== undefined) {
+        const status = getValidationStatus(projectPath, issueNumber);
+        res.json({
+          success: true,
+          isRunning: status?.isRunning ?? false,
+          startedAt: status?.startedAt?.toISOString(),
+        });
+        return;
+      }
+
+      // Otherwise, return all running validations for the project
+      const runningIssues = getRunningValidations(projectPath);
+      res.json({
+        success: true,
+        runningIssues,
+      });
+    } catch (error) {
+      logError(error, 'Validation status check failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+/**
+ * POST /validation-stop - Cancel a running validation
+ */
+export function createValidationStopHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, issueNumber } = req.body as {
+        projectPath: string;
+        issueNumber: number;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!issueNumber || typeof issueNumber !== 'number') {
+        res
+          .status(400)
+          .json({ success: false, error: 'issueNumber is required and must be a number' });
+        return;
+      }
+
+      const wasAborted = abortValidation(projectPath, issueNumber);
+
+      if (wasAborted) {
+        logger.info(`Validation for issue #${issueNumber} was stopped`);
+        res.json({
+          success: true,
+          message: `Validation for issue #${issueNumber} has been stopped`,
+        });
+      } else {
+        res.json({
+          success: false,
+          error: `No validation is running for issue #${issueNumber}`,
+        });
+      }
+    } catch (error) {
+      logError(error, 'Validation stop failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+/**
+ * POST /validations - Get stored validations for a project
+ */
+export function createGetValidationsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, issueNumber } = req.body as {
+        projectPath: string;
+        issueNumber?: number;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      // If issueNumber provided, get specific validation with freshness info
+      if (issueNumber !== undefined) {
+        const result = await getValidationWithFreshness(projectPath, issueNumber);
+
+        if (!result) {
+          res.json({
+            success: true,
+            validation: null,
+          });
+          return;
+        }
+
+        res.json({
+          success: true,
+          validation: result.validation,
+          isStale: result.isStale,
+        });
+        return;
+      }
+
+      // Otherwise, get all validations for the project
+      const validations = await getAllValidations(projectPath);
+
+      res.json({
+        success: true,
+        validations,
+      });
+    } catch (error) {
+      logError(error, 'Get validations failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+/**
+ * POST /validation-delete - Delete a stored validation
+ */
+export function createDeleteValidationHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, issueNumber } = req.body as {
+        projectPath: string;
+        issueNumber: number;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!issueNumber || typeof issueNumber !== 'number') {
+        res
+          .status(400)
+          .json({ success: false, error: 'issueNumber is required and must be a number' });
+        return;
+      }
+
+      const deleted = await deleteValidation(projectPath, issueNumber);
+
+      res.json({
+        success: true,
+        deleted,
+      });
+    } catch (error) {
+      logError(error, 'Delete validation failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+/**
+ * POST /validation-mark-viewed - Mark a validation as viewed by the user
+ */
+export function createMarkViewedHandler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, issueNumber } = req.body as {
+        projectPath: string;
+        issueNumber: number;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!issueNumber || typeof issueNumber !== 'number') {
+        res
+          .status(400)
+          .json({ success: false, error: 'issueNumber is required and must be a number' });
+        return;
+      }
+
+      const success = await markValidationViewed(projectPath, issueNumber);
+
+      if (success) {
+        // Emit event so UI can update the unviewed count
+        const viewedEvent: IssueValidationEvent = {
+          type: 'issue_validation_viewed',
+          issueNumber,
+          projectPath,
+        };
+        events.emit('issue-validation:event', viewedEvent);
+      }
+
+      res.json({ success });
+    } catch (error) {
+      logError(error, 'Mark validation viewed failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/github/routes/validation-schema.ts b/temp_repo/apps/server/src/routes/github/routes/validation-schema.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9ba48a2b4b4bc0534c405fdb08bbf6b30cb4911c
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/github/routes/validation-schema.ts
@@ -0,0 +1,172 @@
+/**
+ * Issue Validation Schema and Prompt Building
+ *
+ * Defines the JSON schema for Claude's structured output and
+ * helper functions for building validation prompts.
+ *
+ * Note: The system prompt is now centralized in @automaker/prompts
+ * and accessed via getPromptCustomization() in validate-issue.ts
+ */
+
+/**
+ * JSON Schema for issue validation structured output.
+ * Used with Claude SDK's outputFormat option to ensure reliable parsing.
+ */
+export const issueValidationSchema = {
+  type: 'object',
+  properties: {
+    verdict: {
+      type: 'string',
+      enum: ['valid', 'invalid', 'needs_clarification'],
+      description: 'The validation verdict for the issue',
+    },
+    confidence: {
+      type: 'string',
+      enum: ['high', 'medium', 'low'],
+      description: 'How confident the AI is in its assessment',
+    },
+    reasoning: {
+      type: 'string',
+      description: 'Detailed explanation of the verdict',
+    },
+    bugConfirmed: {
+      type: 'boolean',
+      description: 'For bug reports: whether the bug was confirmed in the codebase',
+    },
+    relatedFiles: {
+      type: 'array',
+      items: { type: 'string' },
+      description: 'Files related to the issue found during analysis',
+    },
+    suggestedFix: {
+      type: 'string',
+      description: 'Suggested approach to fix or implement the issue',
+    },
+    missingInfo: {
+      type: 'array',
+      items: { type: 'string' },
+      description: 'Information needed when verdict is needs_clarification',
+    },
+    estimatedComplexity: {
+      type: 'string',
+      enum: ['trivial', 'simple', 'moderate', 'complex', 'very_complex'],
+      description: 'Estimated effort to address the issue',
+    },
+    prAnalysis: {
+      type: 'object',
+      properties: {
+        hasOpenPR: {
+          type: 'boolean',
+          description: 'Whether there is an open PR linked to this issue',
+        },
+        prFixesIssue: {
+          type: 'boolean',
+          description: 'Whether the PR appears to fix the issue based on the diff',
+        },
+        prNumber: {
+          type: 'number',
+          description: 'The PR number that was analyzed',
+        },
+        prSummary: {
+          type: 'string',
+          description: 'Brief summary of what the PR changes',
+        },
+        recommendation: {
+          type: 'string',
+          enum: ['wait_for_merge', 'pr_needs_work', 'no_pr'],
+          description:
+            'Recommendation: wait for PR to merge, PR needs more work, or no relevant PR',
+        },
+      },
+      description: 'Analysis of linked pull requests if any exist',
+    },
+  },
+  required: ['verdict', 'confidence', 'reasoning'],
+  additionalProperties: false,
+} as const;
+
+/**
+ * Comment data structure for validation prompt
+ */
+export interface ValidationComment {
+  author: string;
+  createdAt: string;
+  body: string;
+}
+
+/**
+ * Linked PR data structure for validation prompt
+ */
+export interface ValidationLinkedPR {
+  number: number;
+  title: string;
+  state: string;
+}
+
+/**
+ * Build the user prompt for issue validation.
+ *
+ * Creates a structured prompt that includes the issue details for Claude
+ * to analyze against the codebase.
+ *
+ * @param issueNumber - The GitHub issue number
+ * @param issueTitle - The issue title
+ * @param issueBody - The issue body/description
+ * @param issueLabels - Optional array of label names
+ * @param comments - Optional array of comments to include in analysis
+ * @param linkedPRs - Optional array of linked pull requests
+ * @returns Formatted prompt string for the validation request
+ */
+export function buildValidationPrompt(
+  issueNumber: number,
+  issueTitle: string,
+  issueBody: string,
+  issueLabels?: string[],
+  comments?: ValidationComment[],
+  linkedPRs?: ValidationLinkedPR[]
+): string {
+  const labelsSection = issueLabels?.length ? `\n\n**Labels:** ${issueLabels.join(', ')}` : '';
+
+  let linkedPRsSection = '';
+  if (linkedPRs && linkedPRs.length > 0) {
+    const prsText = linkedPRs
+      .map((pr) => `- PR #${pr.number} (${pr.state}): ${pr.title}`)
+      .join('\n');
+    linkedPRsSection = `\n\n### Linked Pull Requests\n\n${prsText}`;
+  }
+
+  let commentsSection = '';
+  if (comments && comments.length > 0) {
+    // Limit to most recent 10 comments to control prompt size
+    const recentComments = comments.slice(-10);
+    const commentsText = recentComments
+      .map(
+        (c) => `**${c.author}** (${new Date(c.createdAt).toISOString().slice(0, 10)}):\n${c.body}`
+      )
+      .join('\n\n---\n\n');
+
+    commentsSection = `\n\n### Comments (${comments.length} total${comments.length > 10 ? ', showing last 10' : ''})\n\n${commentsText}`;
+  }
+
+  const hasWorkInProgress =
+    linkedPRs && linkedPRs.some((pr) => pr.state === 'open' || pr.state === 'OPEN');
+  const workInProgressNote = hasWorkInProgress
+    ? '\n\n**Note:** This issue has an open pull request linked. Consider that someone may already be working on a fix.'
+    : '';
+
+  return `Please validate the following GitHub issue by analyzing the codebase:
+
+## Issue #${issueNumber}: ${issueTitle}
+${labelsSection}
+${linkedPRsSection}
+
+### Description
+
+${issueBody || '(No description provided)'}
+${commentsSection}
+${workInProgressNote}
+
+---
+
+Scan the codebase to verify this issue. Look for the files, components, or functionality mentioned. Determine if this issue is valid, invalid, or needs clarification.${comments && comments.length > 0 ? ' Consider the context provided in the comments as well.' : ''}${hasWorkInProgress ? ' Also note in your analysis if there is already work in progress on this issue.' : ''}`;
+}
diff --git a/temp_repo/apps/server/src/routes/health/common.ts b/temp_repo/apps/server/src/routes/health/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ac335c3d16fc4bf8176383815aab97a58ff152cc
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/health/common.ts
@@ -0,0 +1,12 @@
+/**
+ * Common utilities for health routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+const logger = createLogger('Health');
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/health/index.ts b/temp_repo/apps/server/src/routes/health/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..083a8703614410223afd82c06babbe66046edaa0
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/health/index.ts
@@ -0,0 +1,30 @@
+/**
+ * Health check routes
+ *
+ * NOTE: Only the basic health check (/) and environment check are unauthenticated.
+ * The /detailed endpoint requires authentication.
+ */
+
+import { Router } from 'express';
+import { createIndexHandler } from './routes/index.js';
+import { createEnvironmentHandler } from './routes/environment.js';
+
+/**
+ * Create unauthenticated health routes (basic check only)
+ * Used by load balancers and container orchestration
+ */
+export function createHealthRoutes(): Router {
+  const router = Router();
+
+  // Basic health check - no sensitive info
+  router.get('/', createIndexHandler());
+
+  // Environment info including containerization status
+  // This is unauthenticated so the UI can check on startup
+  router.get('/environment', createEnvironmentHandler());
+
+  return router;
+}
+
+// Re-export detailed handler for use in authenticated routes
+export { createDetailedHandler } from './routes/detailed.js';
diff --git a/temp_repo/apps/server/src/routes/health/routes/detailed.ts b/temp_repo/apps/server/src/routes/health/routes/detailed.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d51984666b71f1c1e4caf6e6b16b6a0f01cf1b9b
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/health/routes/detailed.ts
@@ -0,0 +1,26 @@
+/**
+ * GET /detailed endpoint - Detailed health check
+ */
+
+import type { Request, Response } from 'express';
+import { getAuthStatus } from '../../../lib/auth.js';
+import { getVersion } from '../../../lib/version.js';
+
+export function createDetailedHandler() {
+  return (_req: Request, res: Response): void => {
+    res.json({
+      status: 'ok',
+      timestamp: new Date().toISOString(),
+      version: getVersion(),
+      uptime: process.uptime(),
+      memory: process.memoryUsage(),
+      dataDir: process.env.DATA_DIR || './data',
+      auth: getAuthStatus(),
+      env: {
+        nodeVersion: process.version,
+        platform: process.platform,
+        arch: process.arch,
+      },
+    });
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/health/routes/environment.ts b/temp_repo/apps/server/src/routes/health/routes/environment.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8e5a89c9a38cd08d5a53d97c0bd937124f58e7f8
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/health/routes/environment.ts
@@ -0,0 +1,22 @@
+/**
+ * GET /environment endpoint - Environment information including containerization status
+ *
+ * This endpoint is unauthenticated so the UI can check it on startup
+ * before login to determine if sandbox risk warnings should be shown.
+ */
+
+import type { Request, Response } from 'express';
+
+export interface EnvironmentResponse {
+  isContainerized: boolean;
+  skipSandboxWarning?: boolean;
+}
+
+export function createEnvironmentHandler() {
+  return (_req: Request, res: Response): void => {
+    res.json({
+      isContainerized: process.env.IS_CONTAINERIZED === 'true',
+      skipSandboxWarning: process.env.AUTOMAKER_SKIP_SANDBOX_WARNING === 'true',
+    } satisfies EnvironmentResponse);
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/health/routes/index.ts b/temp_repo/apps/server/src/routes/health/routes/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f956a96f7d1422594f83f7181cec768c8ca83220
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/health/routes/index.ts
@@ -0,0 +1,16 @@
+/**
+ * GET / endpoint - Basic health check
+ */
+
+import type { Request, Response } from 'express';
+import { getVersion } from '../../../lib/version.js';
+
+export function createIndexHandler() {
+  return (_req: Request, res: Response): void => {
+    res.json({
+      status: 'ok',
+      timestamp: new Date().toISOString(),
+      version: getVersion(),
+    });
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/ideation/common.ts b/temp_repo/apps/server/src/routes/ideation/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2cca36542f04d26d1fb7dfe3212ac3ae3e43dbba
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/common.ts
@@ -0,0 +1,12 @@
+/**
+ * Common utilities for ideation routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+const logger = createLogger('Ideation');
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/ideation/index.ts b/temp_repo/apps/server/src/routes/ideation/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..95fe128be0c768c371ca884dec326948e31482c5
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/index.ts
@@ -0,0 +1,109 @@
+/**
+ * Ideation routes - HTTP API for brainstorming and idea management
+ */
+
+import { Router } from 'express';
+import type { EventEmitter } from '../../lib/events.js';
+import { validatePathParams } from '../../middleware/validate-paths.js';
+import type { IdeationService } from '../../services/ideation-service.js';
+import type { FeatureLoader } from '../../services/feature-loader.js';
+
+// Route handlers
+import { createSessionStartHandler } from './routes/session-start.js';
+import { createSessionMessageHandler } from './routes/session-message.js';
+import { createSessionStopHandler } from './routes/session-stop.js';
+import { createSessionGetHandler } from './routes/session-get.js';
+import { createIdeasListHandler } from './routes/ideas-list.js';
+import { createIdeasCreateHandler } from './routes/ideas-create.js';
+import { createIdeasGetHandler } from './routes/ideas-get.js';
+import { createIdeasUpdateHandler } from './routes/ideas-update.js';
+import { createIdeasDeleteHandler } from './routes/ideas-delete.js';
+import { createAnalyzeHandler, createGetAnalysisHandler } from './routes/analyze.js';
+import { createConvertHandler } from './routes/convert.js';
+import { createAddSuggestionHandler } from './routes/add-suggestion.js';
+import { createPromptsHandler, createPromptsByCategoryHandler } from './routes/prompts.js';
+import { createSuggestionsGenerateHandler } from './routes/suggestions-generate.js';
+
+export function createIdeationRoutes(
+  events: EventEmitter,
+  ideationService: IdeationService,
+  featureLoader: FeatureLoader
+): Router {
+  const router = Router();
+
+  // Session management
+  router.post(
+    '/session/start',
+    validatePathParams('projectPath'),
+    createSessionStartHandler(ideationService)
+  );
+  router.post('/session/message', createSessionMessageHandler(ideationService));
+  router.post('/session/stop', createSessionStopHandler(events, ideationService));
+  router.post(
+    '/session/get',
+    validatePathParams('projectPath'),
+    createSessionGetHandler(ideationService)
+  );
+
+  // Ideas CRUD
+  router.post(
+    '/ideas/list',
+    validatePathParams('projectPath'),
+    createIdeasListHandler(ideationService)
+  );
+  router.post(
+    '/ideas/create',
+    validatePathParams('projectPath'),
+    createIdeasCreateHandler(events, ideationService)
+  );
+  router.post(
+    '/ideas/get',
+    validatePathParams('projectPath'),
+    createIdeasGetHandler(ideationService)
+  );
+  router.post(
+    '/ideas/update',
+    validatePathParams('projectPath'),
+    createIdeasUpdateHandler(events, ideationService)
+  );
+  router.post(
+    '/ideas/delete',
+    validatePathParams('projectPath'),
+    createIdeasDeleteHandler(events, ideationService)
+  );
+
+  // Project analysis
+  router.post('/analyze', validatePathParams('projectPath'), createAnalyzeHandler(ideationService));
+  router.post(
+    '/analysis',
+    validatePathParams('projectPath'),
+    createGetAnalysisHandler(ideationService)
+  );
+
+  // Convert to feature
+  router.post(
+    '/convert',
+    validatePathParams('projectPath'),
+    createConvertHandler(events, ideationService, featureLoader)
+  );
+
+  // Add suggestion to board as a feature
+  router.post(
+    '/add-suggestion',
+    validatePathParams('projectPath'),
+    createAddSuggestionHandler(ideationService, featureLoader)
+  );
+
+  // Guided prompts (no validation needed - static data)
+  router.get('/prompts', createPromptsHandler(ideationService));
+  router.get('/prompts/:category', createPromptsByCategoryHandler(ideationService));
+
+  // Generate suggestions (structured output)
+  router.post(
+    '/suggestions/generate',
+    validatePathParams('projectPath'),
+    createSuggestionsGenerateHandler(ideationService)
+  );
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/ideation/routes/add-suggestion.ts b/temp_repo/apps/server/src/routes/ideation/routes/add-suggestion.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3326bfc384dc38cfc4a556935169cc3d0695cec6
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/routes/add-suggestion.ts
@@ -0,0 +1,70 @@
+/**
+ * POST /add-suggestion - Add an analysis suggestion to the board as a feature
+ *
+ * This endpoint converts an AnalysisSuggestion to a Feature using the
+ * IdeationService's mapIdeaCategoryToFeatureCategory for consistent category mapping.
+ * This ensures a single source of truth for the conversion logic.
+ */
+
+import type { Request, Response } from 'express';
+import type { IdeationService } from '../../../services/ideation-service.js';
+import type { FeatureLoader } from '../../../services/feature-loader.js';
+import type { AnalysisSuggestion } from '@automaker/types';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createAddSuggestionHandler(
+  ideationService: IdeationService,
+  featureLoader: FeatureLoader
+) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, suggestion } = req.body as {
+        projectPath: string;
+        suggestion: AnalysisSuggestion;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!suggestion) {
+        res.status(400).json({ success: false, error: 'suggestion is required' });
+        return;
+      }
+
+      if (!suggestion.title) {
+        res.status(400).json({ success: false, error: 'suggestion.title is required' });
+        return;
+      }
+
+      if (!suggestion.category) {
+        res.status(400).json({ success: false, error: 'suggestion.category is required' });
+        return;
+      }
+
+      // Build description with rationale if provided
+      const description = suggestion.rationale
+        ? `${suggestion.description}\n\n**Rationale:** ${suggestion.rationale}`
+        : suggestion.description;
+
+      // Use the service's category mapping for consistency
+      const featureCategory = ideationService.mapSuggestionCategoryToFeatureCategory(
+        suggestion.category
+      );
+
+      // Create the feature
+      const feature = await featureLoader.create(projectPath, {
+        title: suggestion.title,
+        description,
+        category: featureCategory,
+        status: 'backlog',
+      });
+
+      res.json({ success: true, featureId: feature.id });
+    } catch (error) {
+      logError(error, 'Add suggestion to board failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/ideation/routes/analyze.ts b/temp_repo/apps/server/src/routes/ideation/routes/analyze.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e8e0b213e75c38d287bb4c5498dfc855d5f65b71
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/routes/analyze.ts
@@ -0,0 +1,49 @@
+/**
+ * POST /analyze - Analyze project and generate suggestions
+ */
+
+import type { Request, Response } from 'express';
+import type { IdeationService } from '../../../services/ideation-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createAnalyzeHandler(ideationService: IdeationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as { projectPath: string };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      // Start analysis - results come via WebSocket events
+      ideationService.analyzeProject(projectPath).catch((error) => {
+        logError(error, 'Analyze project failed (async)');
+      });
+
+      res.json({ success: true, message: 'Analysis started' });
+    } catch (error) {
+      logError(error, 'Analyze project failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+export function createGetAnalysisHandler(ideationService: IdeationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as { projectPath: string };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      const result = await ideationService.getCachedAnalysis(projectPath);
+      res.json({ success: true, result });
+    } catch (error) {
+      logError(error, 'Get analysis failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/ideation/routes/convert.ts b/temp_repo/apps/server/src/routes/ideation/routes/convert.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e1939bb40169c960ed842b982a78faef5f5308c5
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/routes/convert.ts
@@ -0,0 +1,77 @@
+/**
+ * POST /convert - Convert an idea to a feature
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import type { IdeationService } from '../../../services/ideation-service.js';
+import type { FeatureLoader } from '../../../services/feature-loader.js';
+import type { ConvertToFeatureOptions } from '@automaker/types';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createConvertHandler(
+  events: EventEmitter,
+  ideationService: IdeationService,
+  featureLoader: FeatureLoader
+) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, ideaId, keepIdea, column, dependencies, tags } = req.body as {
+        projectPath: string;
+        ideaId: string;
+      } & ConvertToFeatureOptions;
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!ideaId) {
+        res.status(400).json({ success: false, error: 'ideaId is required' });
+        return;
+      }
+
+      // Convert idea to feature structure
+      const featureData = await ideationService.convertToFeature(projectPath, ideaId);
+
+      // Apply any options from the request
+      if (column) {
+        featureData.status = column;
+      }
+      if (dependencies && dependencies.length > 0) {
+        featureData.dependencies = dependencies;
+      }
+      if (tags && tags.length > 0) {
+        featureData.tags = tags;
+      }
+
+      // Create the feature using FeatureLoader
+      const feature = await featureLoader.create(projectPath, featureData);
+
+      // Delete the idea unless keepIdea is explicitly true
+      if (!keepIdea) {
+        await ideationService.deleteIdea(projectPath, ideaId);
+
+        // Emit idea deleted event
+        events.emit('ideation:idea-deleted', {
+          projectPath,
+          ideaId,
+        });
+      }
+
+      // Emit idea converted event to notify frontend
+      events.emit('ideation:idea-converted', {
+        projectPath,
+        ideaId,
+        featureId: feature.id,
+        keepIdea: !!keepIdea,
+      });
+
+      // Return featureId as expected by the frontend API interface
+      res.json({ success: true, featureId: feature.id });
+    } catch (error) {
+      logError(error, 'Convert to feature failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/ideation/routes/ideas-create.ts b/temp_repo/apps/server/src/routes/ideation/routes/ideas-create.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bf368fd9bb771354690c145a8bd2b73a13193186
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/routes/ideas-create.ts
@@ -0,0 +1,51 @@
+/**
+ * POST /ideas/create - Create a new idea
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import type { IdeationService } from '../../../services/ideation-service.js';
+import type { CreateIdeaInput } from '@automaker/types';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createIdeasCreateHandler(events: EventEmitter, ideationService: IdeationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, idea } = req.body as {
+        projectPath: string;
+        idea: CreateIdeaInput;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!idea) {
+        res.status(400).json({ success: false, error: 'idea is required' });
+        return;
+      }
+
+      if (!idea.title || !idea.description || !idea.category) {
+        res.status(400).json({
+          success: false,
+          error: 'idea must have title, description, and category',
+        });
+        return;
+      }
+
+      const created = await ideationService.createIdea(projectPath, idea);
+
+      // Emit idea created event for frontend notification
+      events.emit('ideation:idea-created', {
+        projectPath,
+        idea: created,
+      });
+
+      res.json({ success: true, idea: created });
+    } catch (error) {
+      logError(error, 'Create idea failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/ideation/routes/ideas-delete.ts b/temp_repo/apps/server/src/routes/ideation/routes/ideas-delete.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b1bcf00640457149595a99102cd95c0fb9aba807
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/routes/ideas-delete.ts
@@ -0,0 +1,42 @@
+/**
+ * POST /ideas/delete - Delete an idea
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import type { IdeationService } from '../../../services/ideation-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createIdeasDeleteHandler(events: EventEmitter, ideationService: IdeationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, ideaId } = req.body as {
+        projectPath: string;
+        ideaId: string;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!ideaId) {
+        res.status(400).json({ success: false, error: 'ideaId is required' });
+        return;
+      }
+
+      await ideationService.deleteIdea(projectPath, ideaId);
+
+      // Emit idea deleted event for frontend notification
+      events.emit('ideation:idea-deleted', {
+        projectPath,
+        ideaId,
+      });
+
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Delete idea failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/ideation/routes/ideas-get.ts b/temp_repo/apps/server/src/routes/ideation/routes/ideas-get.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d4865b461d711bfc45dff858aaa8ea1e44e02eab
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/routes/ideas-get.ts
@@ -0,0 +1,39 @@
+/**
+ * POST /ideas/get - Get a single idea
+ */
+
+import type { Request, Response } from 'express';
+import type { IdeationService } from '../../../services/ideation-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createIdeasGetHandler(ideationService: IdeationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, ideaId } = req.body as {
+        projectPath: string;
+        ideaId: string;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!ideaId) {
+        res.status(400).json({ success: false, error: 'ideaId is required' });
+        return;
+      }
+
+      const idea = await ideationService.getIdea(projectPath, ideaId);
+      if (!idea) {
+        res.status(404).json({ success: false, error: 'Idea not found' });
+        return;
+      }
+
+      res.json({ success: true, idea });
+    } catch (error) {
+      logError(error, 'Get idea failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/ideation/routes/ideas-list.ts b/temp_repo/apps/server/src/routes/ideation/routes/ideas-list.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5f6b4504a0b75a7a59fdc1cd6bfbce1960d6d7a5
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/routes/ideas-list.ts
@@ -0,0 +1,26 @@
+/**
+ * POST /ideas/list - List all ideas for a project
+ */
+
+import type { Request, Response } from 'express';
+import type { IdeationService } from '../../../services/ideation-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createIdeasListHandler(ideationService: IdeationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as { projectPath: string };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      const ideas = await ideationService.getIdeas(projectPath);
+      res.json({ success: true, ideas });
+    } catch (error) {
+      logError(error, 'List ideas failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/ideation/routes/ideas-update.ts b/temp_repo/apps/server/src/routes/ideation/routes/ideas-update.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fbf0d8b6049f144623cf9cae43ca670d314a8c90
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/routes/ideas-update.ts
@@ -0,0 +1,54 @@
+/**
+ * POST /ideas/update - Update an idea
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import type { IdeationService } from '../../../services/ideation-service.js';
+import type { UpdateIdeaInput } from '@automaker/types';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createIdeasUpdateHandler(events: EventEmitter, ideationService: IdeationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, ideaId, updates } = req.body as {
+        projectPath: string;
+        ideaId: string;
+        updates: UpdateIdeaInput;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!ideaId) {
+        res.status(400).json({ success: false, error: 'ideaId is required' });
+        return;
+      }
+
+      if (!updates) {
+        res.status(400).json({ success: false, error: 'updates is required' });
+        return;
+      }
+
+      const idea = await ideationService.updateIdea(projectPath, ideaId, updates);
+      if (!idea) {
+        res.status(404).json({ success: false, error: 'Idea not found' });
+        return;
+      }
+
+      // Emit idea updated event for frontend notification
+      events.emit('ideation:idea-updated', {
+        projectPath,
+        ideaId,
+        idea,
+      });
+
+      res.json({ success: true, idea });
+    } catch (error) {
+      logError(error, 'Update idea failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/ideation/routes/prompts.ts b/temp_repo/apps/server/src/routes/ideation/routes/prompts.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8d686bbb1457298504de4a7c4455ee722146775f
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/routes/prompts.ts
@@ -0,0 +1,42 @@
+/**
+ * GET /prompts - Get all guided prompts
+ * GET /prompts/:category - Get prompts for a specific category
+ */
+
+import type { Request, Response } from 'express';
+import type { IdeationService } from '../../../services/ideation-service.js';
+import type { IdeaCategory } from '@automaker/types';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createPromptsHandler(ideationService: IdeationService) {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const prompts = ideationService.getAllPrompts();
+      const categories = ideationService.getPromptCategories();
+      res.json({ success: true, prompts, categories });
+    } catch (error) {
+      logError(error, 'Get prompts failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+export function createPromptsByCategoryHandler(ideationService: IdeationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { category } = req.params as { category: string };
+
+      const validCategories = ideationService.getPromptCategories().map((c) => c.id);
+      if (!validCategories.includes(category as IdeaCategory)) {
+        res.status(400).json({ success: false, error: 'Invalid category' });
+        return;
+      }
+
+      const prompts = ideationService.getPromptsByCategory(category as IdeaCategory);
+      res.json({ success: true, prompts });
+    } catch (error) {
+      logError(error, 'Get prompts by category failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/ideation/routes/session-get.ts b/temp_repo/apps/server/src/routes/ideation/routes/session-get.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c95bd6cbfa96ece7beb10ffda6dc970734f208be
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/routes/session-get.ts
@@ -0,0 +1,45 @@
+/**
+ * POST /session/get - Get an ideation session with messages
+ */
+
+import type { Request, Response } from 'express';
+import type { IdeationService } from '../../../services/ideation-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createSessionGetHandler(ideationService: IdeationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, sessionId } = req.body as {
+        projectPath: string;
+        sessionId: string;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!sessionId) {
+        res.status(400).json({ success: false, error: 'sessionId is required' });
+        return;
+      }
+
+      const session = await ideationService.getSession(projectPath, sessionId);
+      if (!session) {
+        res.status(404).json({ success: false, error: 'Session not found' });
+        return;
+      }
+
+      const isRunning = ideationService.isSessionRunning(sessionId);
+
+      res.json({
+        success: true,
+        session: { ...session, isRunning },
+        messages: session.messages,
+      });
+    } catch (error) {
+      logError(error, 'Get session failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/ideation/routes/session-message.ts b/temp_repo/apps/server/src/routes/ideation/routes/session-message.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0668583e4f35c74983e1382929b5fcf7ff5faa75
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/routes/session-message.ts
@@ -0,0 +1,40 @@
+/**
+ * POST /session/message - Send a message in an ideation session
+ */
+
+import type { Request, Response } from 'express';
+import type { IdeationService } from '../../../services/ideation-service.js';
+import type { SendMessageOptions } from '@automaker/types';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createSessionMessageHandler(ideationService: IdeationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId, message, options } = req.body as {
+        sessionId: string;
+        message: string;
+        options?: SendMessageOptions;
+      };
+
+      if (!sessionId) {
+        res.status(400).json({ success: false, error: 'sessionId is required' });
+        return;
+      }
+
+      if (!message) {
+        res.status(400).json({ success: false, error: 'message is required' });
+        return;
+      }
+
+      // This is async but we don't await - responses come via WebSocket
+      ideationService.sendMessage(sessionId, message, options).catch((error) => {
+        logError(error, 'Send message failed (async)');
+      });
+
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Send message failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/ideation/routes/session-start.ts b/temp_repo/apps/server/src/routes/ideation/routes/session-start.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5d1ae8384ad757e18f23c80cdd8579dfa948cca3
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/routes/session-start.ts
@@ -0,0 +1,30 @@
+/**
+ * POST /session/start - Start a new ideation session
+ */
+
+import type { Request, Response } from 'express';
+import type { IdeationService } from '../../../services/ideation-service.js';
+import type { StartSessionOptions } from '@automaker/types';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createSessionStartHandler(ideationService: IdeationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, options } = req.body as {
+        projectPath: string;
+        options?: StartSessionOptions;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      const session = await ideationService.startSession(projectPath, options);
+      res.json({ success: true, session });
+    } catch (error) {
+      logError(error, 'Start session failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/ideation/routes/session-stop.ts b/temp_repo/apps/server/src/routes/ideation/routes/session-stop.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c0d59e3b51e8be11ff5dc0ebb5c1f9f8346e303a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/routes/session-stop.ts
@@ -0,0 +1,39 @@
+/**
+ * POST /session/stop - Stop an ideation session
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import type { IdeationService } from '../../../services/ideation-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createSessionStopHandler(events: EventEmitter, ideationService: IdeationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId, projectPath } = req.body as {
+        sessionId: string;
+        projectPath?: string;
+      };
+
+      if (!sessionId) {
+        res.status(400).json({ success: false, error: 'sessionId is required' });
+        return;
+      }
+
+      await ideationService.stopSession(sessionId);
+
+      // Emit session stopped event for frontend notification
+      // Note: The service also emits 'ideation:session-ended' internally,
+      // but we emit here as well for route-level consistency with other routes
+      events.emit('ideation:session-ended', {
+        sessionId,
+        projectPath,
+      });
+
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Stop session failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/ideation/routes/suggestions-generate.ts b/temp_repo/apps/server/src/routes/ideation/routes/suggestions-generate.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ffb4e8ac63a7498c3d3a3ceb047e2db5b62633d5
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/ideation/routes/suggestions-generate.ts
@@ -0,0 +1,63 @@
+/**
+ * Generate suggestions route - Returns structured AI suggestions for a prompt
+ */
+
+import type { Request, Response } from 'express';
+import type { IdeationService } from '../../../services/ideation-service.js';
+import type { IdeationContextSources } from '@automaker/types';
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage, logError } from '../common.js';
+
+const logger = createLogger('ideation:suggestions-generate');
+
+/**
+ * Creates an Express route handler for generating AI-powered ideation suggestions.
+ * Accepts a prompt, category, and optional context sources configuration,
+ * then returns structured suggestions that can be added to the board.
+ */
+export function createSuggestionsGenerateHandler(ideationService: IdeationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, promptId, category, count, contextSources } = req.body;
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!promptId) {
+        res.status(400).json({ success: false, error: 'promptId is required' });
+        return;
+      }
+
+      if (!category) {
+        res.status(400).json({ success: false, error: 'category is required' });
+        return;
+      }
+
+      // Default to 10 suggestions, allow 1-20
+      const suggestionCount = Math.min(Math.max(count || 10, 1), 20);
+
+      logger.info(`Generating ${suggestionCount} suggestions for prompt: ${promptId}`);
+
+      const suggestions = await ideationService.generateSuggestions(
+        projectPath,
+        promptId,
+        category,
+        suggestionCount,
+        contextSources as IdeationContextSources | undefined
+      );
+
+      res.json({
+        success: true,
+        suggestions,
+      });
+    } catch (error) {
+      logError(error, 'Failed to generate suggestions');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/mcp/common.ts b/temp_repo/apps/server/src/routes/mcp/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7256ef12e3592cdc0e639b53346902f6165a342b
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/mcp/common.ts
@@ -0,0 +1,24 @@
+/**
+ * Common utilities for MCP routes
+ */
+
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('MCP');
+
+/**
+ * Extract error message from unknown error
+ */
+export function getErrorMessage(error: unknown): string {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return String(error);
+}
+
+/**
+ * Log error with prefix
+ */
+export function logError(error: unknown, message: string): void {
+  logger.error(`${message}:`, error);
+}
diff --git a/temp_repo/apps/server/src/routes/mcp/index.ts b/temp_repo/apps/server/src/routes/mcp/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2c3a023f40b51a5caee403c664f73d042ba09cff
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/mcp/index.ts
@@ -0,0 +1,36 @@
+/**
+ * MCP routes - HTTP API for testing MCP servers
+ *
+ * Provides endpoints for:
+ * - Testing MCP server connections
+ * - Listing available tools from MCP servers
+ *
+ * Mounted at /api/mcp in the main server.
+ */
+
+import { Router } from 'express';
+import type { MCPTestService } from '../../services/mcp-test-service.js';
+import { createTestServerHandler } from './routes/test-server.js';
+import { createListToolsHandler } from './routes/list-tools.js';
+
+/**
+ * Create MCP router with all endpoints
+ *
+ * Endpoints:
+ * - POST /test - Test MCP server connection
+ * - POST /tools - List tools from MCP server
+ *
+ * @param mcpTestService - Instance of MCPTestService for testing connections
+ * @returns Express Router configured with all MCP endpoints
+ */
+export function createMCPRoutes(mcpTestService: MCPTestService): Router {
+  const router = Router();
+
+  // Test MCP server connection
+  router.post('/test', createTestServerHandler(mcpTestService));
+
+  // List tools from MCP server
+  router.post('/tools', createListToolsHandler(mcpTestService));
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/mcp/routes/list-tools.ts b/temp_repo/apps/server/src/routes/mcp/routes/list-tools.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d215180414a0b0de6cf30c8cce6640ac8b27a43c
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/mcp/routes/list-tools.ts
@@ -0,0 +1,57 @@
+/**
+ * POST /api/mcp/tools - List tools for an MCP server
+ *
+ * Lists available tools for an MCP server.
+ * Similar to test but focused on tool discovery.
+ *
+ * SECURITY: Only accepts serverId to look up saved configs. Does NOT accept
+ * arbitrary serverConfig to prevent drive-by command execution attacks.
+ * Users must explicitly save a server config through the UI before testing.
+ *
+ * Request body:
+ *   { serverId: string } - Get tools by server ID from settings
+ *
+ * Response: { success: boolean, tools?: MCPToolInfo[], error?: string }
+ */
+
+import type { Request, Response } from 'express';
+import type { MCPTestService } from '../../../services/mcp-test-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+interface ListToolsRequest {
+  serverId: string;
+}
+
+/**
+ * Create handler factory for POST /api/mcp/tools
+ */
+export function createListToolsHandler(mcpTestService: MCPTestService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const body = req.body as ListToolsRequest;
+
+      if (!body.serverId || typeof body.serverId !== 'string') {
+        res.status(400).json({
+          success: false,
+          error: 'serverId is required',
+        });
+        return;
+      }
+
+      const result = await mcpTestService.testServerById(body.serverId);
+
+      // Return only tool-related information
+      res.json({
+        success: result.success,
+        tools: result.tools,
+        error: result.error,
+      });
+    } catch (error) {
+      logError(error, 'List tools failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/mcp/routes/test-server.ts b/temp_repo/apps/server/src/routes/mcp/routes/test-server.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fb7581cfc066c020d834a9e7fb3961f7754da99f
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/mcp/routes/test-server.ts
@@ -0,0 +1,50 @@
+/**
+ * POST /api/mcp/test - Test MCP server connection and list tools
+ *
+ * Tests connection to an MCP server and returns available tools.
+ *
+ * SECURITY: Only accepts serverId to look up saved configs. Does NOT accept
+ * arbitrary serverConfig to prevent drive-by command execution attacks.
+ * Users must explicitly save a server config through the UI before testing.
+ *
+ * Request body:
+ *   { serverId: string } - Test server by ID from settings
+ *
+ * Response: { success: boolean, tools?: MCPToolInfo[], error?: string, connectionTime?: number }
+ */
+
+import type { Request, Response } from 'express';
+import type { MCPTestService } from '../../../services/mcp-test-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+interface TestServerRequest {
+  serverId: string;
+}
+
+/**
+ * Create handler factory for POST /api/mcp/test
+ */
+export function createTestServerHandler(mcpTestService: MCPTestService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const body = req.body as TestServerRequest;
+
+      if (!body.serverId || typeof body.serverId !== 'string') {
+        res.status(400).json({
+          success: false,
+          error: 'serverId is required',
+        });
+        return;
+      }
+
+      const result = await mcpTestService.testServerById(body.serverId);
+      res.json(result);
+    } catch (error) {
+      logError(error, 'Test server failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/models/common.ts b/temp_repo/apps/server/src/routes/models/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7f30c028743fc3d73535d16671650191748dc5bd
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/models/common.ts
@@ -0,0 +1,12 @@
+/**
+ * Common utilities for models routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+const logger = createLogger('Models');
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/models/index.ts b/temp_repo/apps/server/src/routes/models/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..14d0beabbb15aef69fa353e57a8e5fb6f2bb22dc
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/models/index.ts
@@ -0,0 +1,16 @@
+/**
+ * Models routes - HTTP API for model providers and availability
+ */
+
+import { Router } from 'express';
+import { createAvailableHandler } from './routes/available.js';
+import { createProvidersHandler } from './routes/providers.js';
+
+export function createModelsRoutes(): Router {
+  const router = Router();
+
+  router.get('/available', createAvailableHandler());
+  router.get('/providers', createProvidersHandler());
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/models/routes/available.ts b/temp_repo/apps/server/src/routes/models/routes/available.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2ebb499295aab664927ebc4319a2c1962ae7c0dd
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/models/routes/available.ts
@@ -0,0 +1,21 @@
+/**
+ * GET /available endpoint - Get available models from all providers
+ */
+
+import type { Request, Response } from 'express';
+import { ProviderFactory } from '../../../providers/provider-factory.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createAvailableHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Get all models from all registered providers (Claude + Cursor)
+      const models = ProviderFactory.getAllAvailableModels();
+
+      res.json({ success: true, models });
+    } catch (error) {
+      logError(error, 'Get available models failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/models/routes/providers.ts b/temp_repo/apps/server/src/routes/models/routes/providers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fa4d2828dd911ab4e4bbc4987ab6250a5e66b495
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/models/routes/providers.ts
@@ -0,0 +1,35 @@
+/**
+ * GET /providers endpoint - Check provider status
+ */
+
+import type { Request, Response } from 'express';
+import { ProviderFactory } from '../../../providers/provider-factory.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createProvidersHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Get installation status from all providers
+      const statuses = await ProviderFactory.checkAllProviders();
+
+      const providers: Record<string, Record<string, unknown>> = {
+        anthropic: {
+          available: statuses.claude?.installed || false,
+          hasApiKey: !!process.env.ANTHROPIC_API_KEY,
+        },
+        cursor: {
+          available: statuses.cursor?.installed || false,
+          version: statuses.cursor?.version,
+          path: statuses.cursor?.path,
+          method: statuses.cursor?.method,
+          authenticated: statuses.cursor?.authenticated,
+        },
+      };
+
+      res.json({ success: true, providers });
+    } catch (error) {
+      logError(error, 'Get providers failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/notifications/common.ts b/temp_repo/apps/server/src/routes/notifications/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..707e3a0ddbe57fda7d3c27ff5b35c4c494caeae3
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/notifications/common.ts
@@ -0,0 +1,21 @@
+/**
+ * Common utilities for notification routes
+ *
+ * Provides logger and error handling utilities shared across all notification endpoints.
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+/** Logger instance for notification-related operations */
+export const logger = createLogger('Notifications');
+
+/**
+ * Extract user-friendly error message from error objects
+ */
+export { getErrorMessageShared as getErrorMessage };
+
+/**
+ * Log error with automatic logger binding
+ */
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/notifications/index.ts b/temp_repo/apps/server/src/routes/notifications/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2def111a05881fd249bf3458835f5216ab55792a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/notifications/index.ts
@@ -0,0 +1,62 @@
+/**
+ * Notifications routes - HTTP API for project-level notifications
+ *
+ * Provides endpoints for:
+ * - Listing notifications
+ * - Getting unread count
+ * - Marking notifications as read
+ * - Dismissing notifications
+ *
+ * All endpoints use handler factories that receive the NotificationService instance.
+ * Mounted at /api/notifications in the main server.
+ */
+
+import { Router } from 'express';
+import type { NotificationService } from '../../services/notification-service.js';
+import { validatePathParams } from '../../middleware/validate-paths.js';
+import { createListHandler } from './routes/list.js';
+import { createUnreadCountHandler } from './routes/unread-count.js';
+import { createMarkReadHandler } from './routes/mark-read.js';
+import { createDismissHandler } from './routes/dismiss.js';
+
+/**
+ * Create notifications router with all endpoints
+ *
+ * Endpoints:
+ * - POST /list - List all notifications for a project
+ * - POST /unread-count - Get unread notification count
+ * - POST /mark-read - Mark notification(s) as read
+ * - POST /dismiss - Dismiss notification(s)
+ *
+ * @param notificationService - Instance of NotificationService
+ * @returns Express Router configured with all notification endpoints
+ */
+export function createNotificationsRoutes(notificationService: NotificationService): Router {
+  const router = Router();
+
+  // List notifications
+  router.post('/list', validatePathParams('projectPath'), createListHandler(notificationService));
+
+  // Get unread count
+  router.post(
+    '/unread-count',
+    validatePathParams('projectPath'),
+    createUnreadCountHandler(notificationService)
+  );
+
+  // Mark as read (single or all)
+  router.post(
+    '/mark-read',
+    validatePathParams('projectPath'),
+    createMarkReadHandler(notificationService)
+  );
+
+  // Dismiss (single or all)
+  router.post(
+    '/dismiss',
+    validatePathParams('projectPath'),
+    createDismissHandler(notificationService)
+  );
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/notifications/routes/dismiss.ts b/temp_repo/apps/server/src/routes/notifications/routes/dismiss.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c609f1700bfd236d92b58a204a19459457c7e2f3
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/notifications/routes/dismiss.ts
@@ -0,0 +1,53 @@
+/**
+ * POST /api/notifications/dismiss - Dismiss notification(s)
+ *
+ * Request body: { projectPath: string, notificationId?: string }
+ * - If notificationId provided: dismisses that notification
+ * - If notificationId not provided: dismisses all notifications
+ *
+ * Response: { success: true, dismissed: boolean | count: number }
+ */
+
+import type { Request, Response } from 'express';
+import type { NotificationService } from '../../../services/notification-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+/**
+ * Create handler for POST /api/notifications/dismiss
+ *
+ * @param notificationService - Instance of NotificationService
+ * @returns Express request handler
+ */
+export function createDismissHandler(notificationService: NotificationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, notificationId } = req.body;
+
+      if (!projectPath || typeof projectPath !== 'string') {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      // If notificationId provided, dismiss single notification
+      if (notificationId) {
+        const dismissed = await notificationService.dismissNotification(
+          projectPath,
+          notificationId
+        );
+        if (!dismissed) {
+          res.status(404).json({ success: false, error: 'Notification not found' });
+          return;
+        }
+        res.json({ success: true, dismissed: true });
+        return;
+      }
+
+      // Otherwise dismiss all
+      const count = await notificationService.dismissAll(projectPath);
+      res.json({ success: true, count });
+    } catch (error) {
+      logError(error, 'Dismiss failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/notifications/routes/list.ts b/temp_repo/apps/server/src/routes/notifications/routes/list.ts
new file mode 100644
index 0000000000000000000000000000000000000000..46197fe91e0d1ccbf798fa192432590e27daa65c
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/notifications/routes/list.ts
@@ -0,0 +1,39 @@
+/**
+ * POST /api/notifications/list - List all notifications for a project
+ *
+ * Request body: { projectPath: string }
+ * Response: { success: true, notifications: Notification[] }
+ */
+
+import type { Request, Response } from 'express';
+import type { NotificationService } from '../../../services/notification-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+/**
+ * Create handler for POST /api/notifications/list
+ *
+ * @param notificationService - Instance of NotificationService
+ * @returns Express request handler
+ */
+export function createListHandler(notificationService: NotificationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body;
+
+      if (!projectPath || typeof projectPath !== 'string') {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      const notifications = await notificationService.getNotifications(projectPath);
+
+      res.json({
+        success: true,
+        notifications,
+      });
+    } catch (error) {
+      logError(error, 'List notifications failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/notifications/routes/mark-read.ts b/temp_repo/apps/server/src/routes/notifications/routes/mark-read.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4c9bfeb539185181829d58e41269e22fe148c431
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/notifications/routes/mark-read.ts
@@ -0,0 +1,50 @@
+/**
+ * POST /api/notifications/mark-read - Mark notification(s) as read
+ *
+ * Request body: { projectPath: string, notificationId?: string }
+ * - If notificationId provided: marks that notification as read
+ * - If notificationId not provided: marks all notifications as read
+ *
+ * Response: { success: true, count?: number, notification?: Notification }
+ */
+
+import type { Request, Response } from 'express';
+import type { NotificationService } from '../../../services/notification-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+/**
+ * Create handler for POST /api/notifications/mark-read
+ *
+ * @param notificationService - Instance of NotificationService
+ * @returns Express request handler
+ */
+export function createMarkReadHandler(notificationService: NotificationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, notificationId } = req.body;
+
+      if (!projectPath || typeof projectPath !== 'string') {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      // If notificationId provided, mark single notification
+      if (notificationId) {
+        const notification = await notificationService.markAsRead(projectPath, notificationId);
+        if (!notification) {
+          res.status(404).json({ success: false, error: 'Notification not found' });
+          return;
+        }
+        res.json({ success: true, notification });
+        return;
+      }
+
+      // Otherwise mark all as read
+      const count = await notificationService.markAllAsRead(projectPath);
+      res.json({ success: true, count });
+    } catch (error) {
+      logError(error, 'Mark read failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/notifications/routes/unread-count.ts b/temp_repo/apps/server/src/routes/notifications/routes/unread-count.ts
new file mode 100644
index 0000000000000000000000000000000000000000..98d8e198a2de629bc39107f3f21903d1733c10bb
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/notifications/routes/unread-count.ts
@@ -0,0 +1,39 @@
+/**
+ * POST /api/notifications/unread-count - Get unread notification count
+ *
+ * Request body: { projectPath: string }
+ * Response: { success: true, count: number }
+ */
+
+import type { Request, Response } from 'express';
+import type { NotificationService } from '../../../services/notification-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+/**
+ * Create handler for POST /api/notifications/unread-count
+ *
+ * @param notificationService - Instance of NotificationService
+ * @returns Express request handler
+ */
+export function createUnreadCountHandler(notificationService: NotificationService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body;
+
+      if (!projectPath || typeof projectPath !== 'string') {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      const count = await notificationService.getUnreadCount(projectPath);
+
+      res.json({
+        success: true,
+        count,
+      });
+    } catch (error) {
+      logError(error, 'Get unread count failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/pipeline/common.ts b/temp_repo/apps/server/src/routes/pipeline/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..26aa3e10b6f76f8a092c26e82cea56e7d8c93641
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/pipeline/common.ts
@@ -0,0 +1,21 @@
+/**
+ * Common utilities for pipeline routes
+ *
+ * Provides logger and error handling utilities shared across all pipeline endpoints.
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+/** Logger instance for pipeline-related operations */
+export const logger = createLogger('Pipeline');
+
+/**
+ * Extract user-friendly error message from error objects
+ */
+export { getErrorMessageShared as getErrorMessage };
+
+/**
+ * Log error with automatic logger binding
+ */
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/pipeline/index.ts b/temp_repo/apps/server/src/routes/pipeline/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..86880379b8f13f7f8cb8326294662f4a42a98e5a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/pipeline/index.ts
@@ -0,0 +1,77 @@
+/**
+ * Pipeline routes - HTTP API for pipeline configuration management
+ *
+ * Provides endpoints for:
+ * - Getting pipeline configuration
+ * - Saving pipeline configuration
+ * - Adding, updating, deleting, and reordering pipeline steps
+ *
+ * All endpoints use handler factories that receive the PipelineService instance.
+ * Mounted at /api/pipeline in the main server.
+ */
+
+import { Router } from 'express';
+import type { PipelineService } from '../../services/pipeline-service.js';
+import { validatePathParams } from '../../middleware/validate-paths.js';
+import { createGetConfigHandler } from './routes/get-config.js';
+import { createSaveConfigHandler } from './routes/save-config.js';
+import { createAddStepHandler } from './routes/add-step.js';
+import { createUpdateStepHandler } from './routes/update-step.js';
+import { createDeleteStepHandler } from './routes/delete-step.js';
+import { createReorderStepsHandler } from './routes/reorder-steps.js';
+
+/**
+ * Create pipeline router with all endpoints
+ *
+ * Endpoints:
+ * - POST /config - Get pipeline configuration
+ * - POST /config/save - Save entire pipeline configuration
+ * - POST /steps/add - Add a new pipeline step
+ * - POST /steps/update - Update an existing pipeline step
+ * - POST /steps/delete - Delete a pipeline step
+ * - POST /steps/reorder - Reorder pipeline steps
+ *
+ * @param pipelineService - Instance of PipelineService for file I/O
+ * @returns Express Router configured with all pipeline endpoints
+ */
+export function createPipelineRoutes(pipelineService: PipelineService): Router {
+  const router = Router();
+
+  // Get pipeline configuration
+  router.post(
+    '/config',
+    validatePathParams('projectPath'),
+    createGetConfigHandler(pipelineService)
+  );
+
+  // Save entire pipeline configuration
+  router.post(
+    '/config/save',
+    validatePathParams('projectPath'),
+    createSaveConfigHandler(pipelineService)
+  );
+
+  // Pipeline step operations
+  router.post(
+    '/steps/add',
+    validatePathParams('projectPath'),
+    createAddStepHandler(pipelineService)
+  );
+  router.post(
+    '/steps/update',
+    validatePathParams('projectPath'),
+    createUpdateStepHandler(pipelineService)
+  );
+  router.post(
+    '/steps/delete',
+    validatePathParams('projectPath'),
+    createDeleteStepHandler(pipelineService)
+  );
+  router.post(
+    '/steps/reorder',
+    validatePathParams('projectPath'),
+    createReorderStepsHandler(pipelineService)
+  );
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/pipeline/routes/add-step.ts b/temp_repo/apps/server/src/routes/pipeline/routes/add-step.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a9494e3e9d84ccc2c182f1da247df04811961a6d
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/pipeline/routes/add-step.ts
@@ -0,0 +1,54 @@
+/**
+ * POST /api/pipeline/steps/add - Add a new pipeline step
+ *
+ * Adds a new step to the pipeline configuration.
+ *
+ * Request body: { projectPath: string, step: { name, order, instructions, colorClass } }
+ * Response: { success: true, step: PipelineStep }
+ */
+
+import type { Request, Response } from 'express';
+import type { PipelineService } from '../../../services/pipeline-service.js';
+import type { PipelineStep } from '@automaker/types';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createAddStepHandler(pipelineService: PipelineService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, step } = req.body as {
+        projectPath: string;
+        step: Omit<PipelineStep, 'id' | 'createdAt' | 'updatedAt'>;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!step) {
+        res.status(400).json({ success: false, error: 'step is required' });
+        return;
+      }
+
+      if (!step.name) {
+        res.status(400).json({ success: false, error: 'step.name is required' });
+        return;
+      }
+
+      if (step.instructions === undefined) {
+        res.status(400).json({ success: false, error: 'step.instructions is required' });
+        return;
+      }
+
+      const newStep = await pipelineService.addStep(projectPath, step);
+
+      res.json({
+        success: true,
+        step: newStep,
+      });
+    } catch (error) {
+      logError(error, 'Add pipeline step failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/pipeline/routes/delete-step.ts b/temp_repo/apps/server/src/routes/pipeline/routes/delete-step.ts
new file mode 100644
index 0000000000000000000000000000000000000000..56b6c753187ed805b4a8f1dd902e2614cf5fd1b8
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/pipeline/routes/delete-step.ts
@@ -0,0 +1,42 @@
+/**
+ * POST /api/pipeline/steps/delete - Delete a pipeline step
+ *
+ * Removes a step from the pipeline configuration.
+ *
+ * Request body: { projectPath: string, stepId: string }
+ * Response: { success: true }
+ */
+
+import type { Request, Response } from 'express';
+import type { PipelineService } from '../../../services/pipeline-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createDeleteStepHandler(pipelineService: PipelineService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, stepId } = req.body as {
+        projectPath: string;
+        stepId: string;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!stepId) {
+        res.status(400).json({ success: false, error: 'stepId is required' });
+        return;
+      }
+
+      await pipelineService.deleteStep(projectPath, stepId);
+
+      res.json({
+        success: true,
+      });
+    } catch (error) {
+      logError(error, 'Delete pipeline step failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/pipeline/routes/get-config.ts b/temp_repo/apps/server/src/routes/pipeline/routes/get-config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2e37735e4007200be6df22a96b766f7e134bda10
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/pipeline/routes/get-config.ts
@@ -0,0 +1,35 @@
+/**
+ * POST /api/pipeline/config - Get pipeline configuration
+ *
+ * Returns the pipeline configuration for a project.
+ *
+ * Request body: { projectPath: string }
+ * Response: { success: true, config: PipelineConfig }
+ */
+
+import type { Request, Response } from 'express';
+import type { PipelineService } from '../../../services/pipeline-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createGetConfigHandler(pipelineService: PipelineService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body;
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      const config = await pipelineService.getPipelineConfig(projectPath);
+
+      res.json({
+        success: true,
+        config,
+      });
+    } catch (error) {
+      logError(error, 'Get pipeline config failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/pipeline/routes/reorder-steps.ts b/temp_repo/apps/server/src/routes/pipeline/routes/reorder-steps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d51be11c466c8d2cb372ee97fdedf03cf3d0e8de
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/pipeline/routes/reorder-steps.ts
@@ -0,0 +1,42 @@
+/**
+ * POST /api/pipeline/steps/reorder - Reorder pipeline steps
+ *
+ * Reorders the steps in the pipeline configuration.
+ *
+ * Request body: { projectPath: string, stepIds: string[] }
+ * Response: { success: true }
+ */
+
+import type { Request, Response } from 'express';
+import type { PipelineService } from '../../../services/pipeline-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createReorderStepsHandler(pipelineService: PipelineService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, stepIds } = req.body as {
+        projectPath: string;
+        stepIds: string[];
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!stepIds || !Array.isArray(stepIds)) {
+        res.status(400).json({ success: false, error: 'stepIds array is required' });
+        return;
+      }
+
+      await pipelineService.reorderSteps(projectPath, stepIds);
+
+      res.json({
+        success: true,
+      });
+    } catch (error) {
+      logError(error, 'Reorder pipeline steps failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/pipeline/routes/save-config.ts b/temp_repo/apps/server/src/routes/pipeline/routes/save-config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d414e5b0f4a2d5693dea273250f3cad409d1de7e
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/pipeline/routes/save-config.ts
@@ -0,0 +1,43 @@
+/**
+ * POST /api/pipeline/config/save - Save entire pipeline configuration
+ *
+ * Saves the complete pipeline configuration for a project.
+ *
+ * Request body: { projectPath: string, config: PipelineConfig }
+ * Response: { success: true }
+ */
+
+import type { Request, Response } from 'express';
+import type { PipelineService } from '../../../services/pipeline-service.js';
+import type { PipelineConfig } from '@automaker/types';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createSaveConfigHandler(pipelineService: PipelineService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, config } = req.body as {
+        projectPath: string;
+        config: PipelineConfig;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!config) {
+        res.status(400).json({ success: false, error: 'config is required' });
+        return;
+      }
+
+      await pipelineService.savePipelineConfig(projectPath, config);
+
+      res.json({
+        success: true,
+      });
+    } catch (error) {
+      logError(error, 'Save pipeline config failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/pipeline/routes/update-step.ts b/temp_repo/apps/server/src/routes/pipeline/routes/update-step.ts
new file mode 100644
index 0000000000000000000000000000000000000000..22ad944d9f07a2800bff54ba8069f5a614f5d51d
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/pipeline/routes/update-step.ts
@@ -0,0 +1,50 @@
+/**
+ * POST /api/pipeline/steps/update - Update an existing pipeline step
+ *
+ * Updates a step in the pipeline configuration.
+ *
+ * Request body: { projectPath: string, stepId: string, updates: Partial<PipelineStep> }
+ * Response: { success: true, step: PipelineStep }
+ */
+
+import type { Request, Response } from 'express';
+import type { PipelineService } from '../../../services/pipeline-service.js';
+import type { PipelineStep } from '@automaker/types';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createUpdateStepHandler(pipelineService: PipelineService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, stepId, updates } = req.body as {
+        projectPath: string;
+        stepId: string;
+        updates: Partial<Omit<PipelineStep, 'id' | 'createdAt'>>;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath is required' });
+        return;
+      }
+
+      if (!stepId) {
+        res.status(400).json({ success: false, error: 'stepId is required' });
+        return;
+      }
+
+      if (!updates || Object.keys(updates).length === 0) {
+        res.status(400).json({ success: false, error: 'updates is required' });
+        return;
+      }
+
+      const updatedStep = await pipelineService.updateStep(projectPath, stepId, updates);
+
+      res.json({
+        success: true,
+        step: updatedStep,
+      });
+    } catch (error) {
+      logError(error, 'Update pipeline step failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/projects/common.ts b/temp_repo/apps/server/src/routes/projects/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aa06248ae930fad6ad517ef4302bb37f643168c5
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/projects/common.ts
@@ -0,0 +1,12 @@
+/**
+ * Common utilities for projects routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+const logger = createLogger('Projects');
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/projects/index.ts b/temp_repo/apps/server/src/routes/projects/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ff58167dd3f8fb8cdda868ac772dd1a84c49156d
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/projects/index.ts
@@ -0,0 +1,27 @@
+/**
+ * Projects routes - HTTP API for multi-project overview and management
+ */
+
+import { Router } from 'express';
+import type { FeatureLoader } from '../../services/feature-loader.js';
+import type { AutoModeServiceCompat } from '../../services/auto-mode/index.js';
+import type { SettingsService } from '../../services/settings-service.js';
+import type { NotificationService } from '../../services/notification-service.js';
+import { createOverviewHandler } from './routes/overview.js';
+
+export function createProjectsRoutes(
+  featureLoader: FeatureLoader,
+  autoModeService: AutoModeServiceCompat,
+  settingsService: SettingsService,
+  notificationService: NotificationService
+): Router {
+  const router = Router();
+
+  // GET /overview - Get aggregate status for all projects
+  router.get(
+    '/overview',
+    createOverviewHandler(featureLoader, autoModeService, settingsService, notificationService)
+  );
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/projects/routes/overview.ts b/temp_repo/apps/server/src/routes/projects/routes/overview.ts
new file mode 100644
index 0000000000000000000000000000000000000000..436e683fa212c0503f9577455e4b21dac8cc07ea
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/projects/routes/overview.ts
@@ -0,0 +1,324 @@
+/**
+ * GET /overview endpoint - Get aggregate status for all projects
+ *
+ * Returns a complete overview of all projects including:
+ * - Individual project status (features, auto-mode state)
+ * - Aggregate metrics across all projects
+ * - Recent activity feed (placeholder for future implementation)
+ */
+
+import type { Request, Response } from 'express';
+import type { FeatureLoader } from '../../../services/feature-loader.js';
+import type {
+  AutoModeServiceCompat,
+  RunningAgentInfo,
+  ProjectAutoModeStatus,
+} from '../../../services/auto-mode/index.js';
+import type { SettingsService } from '../../../services/settings-service.js';
+import type { NotificationService } from '../../../services/notification-service.js';
+import type {
+  ProjectStatus,
+  AggregateStatus,
+  MultiProjectOverview,
+  FeatureStatusCounts,
+  AggregateFeatureCounts,
+  AggregateProjectCounts,
+  ProjectHealthStatus,
+  Feature,
+  ProjectRef,
+} from '@automaker/types';
+import { getErrorMessage, logError } from '../common.js';
+
+/**
+ * Compute feature status counts from a list of features
+ */
+function computeFeatureCounts(features: Feature[]): FeatureStatusCounts {
+  const counts: FeatureStatusCounts = {
+    pending: 0,
+    running: 0,
+    completed: 0,
+    failed: 0,
+    verified: 0,
+  };
+
+  for (const feature of features) {
+    switch (feature.status) {
+      case 'pending':
+      case 'ready':
+        counts.pending++;
+        break;
+      case 'running':
+      case 'generating_spec':
+      case 'in_progress':
+        counts.running++;
+        break;
+      case 'waiting_approval':
+        // waiting_approval means agent finished, needs human review - count as pending
+        counts.pending++;
+        break;
+      case 'completed':
+        counts.completed++;
+        break;
+      case 'failed':
+        counts.failed++;
+        break;
+      case 'verified':
+        counts.verified++;
+        break;
+      default:
+        // Unknown status, treat as pending
+        counts.pending++;
+    }
+  }
+
+  return counts;
+}
+
+/**
+ * Determine the overall health status of a project based on its feature statuses
+ */
+function computeHealthStatus(
+  featureCounts: FeatureStatusCounts,
+  isAutoModeRunning: boolean
+): ProjectHealthStatus {
+  const totalFeatures =
+    featureCounts.pending +
+    featureCounts.running +
+    featureCounts.completed +
+    featureCounts.failed +
+    featureCounts.verified;
+
+  // If there are failed features, the project has errors
+  if (featureCounts.failed > 0) {
+    return 'error';
+  }
+
+  // If there are running features or auto mode is running with pending work
+  if (featureCounts.running > 0 || (isAutoModeRunning && featureCounts.pending > 0)) {
+    return 'active';
+  }
+
+  // Pending work but no active execution
+  if (featureCounts.pending > 0) {
+    return 'waiting';
+  }
+
+  // If all features are completed or verified
+  if (totalFeatures > 0 && featureCounts.pending === 0 && featureCounts.running === 0) {
+    return 'completed';
+  }
+
+  // Default to idle
+  return 'idle';
+}
+
+/**
+ * Get the most recent activity timestamp from features
+ */
+function getLastActivityAt(features: Feature[]): string | undefined {
+  if (features.length === 0) {
+    return undefined;
+  }
+
+  let latestTimestamp: number = 0;
+
+  for (const feature of features) {
+    // Check startedAt timestamp (the main timestamp available on Feature)
+    if (feature.startedAt) {
+      const timestamp = new Date(feature.startedAt).getTime();
+      if (!isNaN(timestamp) && timestamp > latestTimestamp) {
+        latestTimestamp = timestamp;
+      }
+    }
+
+    // Also check planSpec timestamps if available
+    if (feature.planSpec?.generatedAt) {
+      const timestamp = new Date(feature.planSpec.generatedAt).getTime();
+      if (!isNaN(timestamp) && timestamp > latestTimestamp) {
+        latestTimestamp = timestamp;
+      }
+    }
+    if (feature.planSpec?.approvedAt) {
+      const timestamp = new Date(feature.planSpec.approvedAt).getTime();
+      if (!isNaN(timestamp) && timestamp > latestTimestamp) {
+        latestTimestamp = timestamp;
+      }
+    }
+  }
+
+  return latestTimestamp > 0 ? new Date(latestTimestamp).toISOString() : undefined;
+}
+
+export function createOverviewHandler(
+  featureLoader: FeatureLoader,
+  autoModeService: AutoModeServiceCompat,
+  settingsService: SettingsService,
+  notificationService: NotificationService
+) {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Get all projects from settings
+      const settings = await settingsService.getGlobalSettings();
+      const projectRefs: ProjectRef[] = settings.projects || [];
+
+      // Get all running agents once to count live running features per project
+      const allRunningAgents: RunningAgentInfo[] = await autoModeService.getRunningAgents();
+
+      // Collect project statuses in parallel
+      const projectStatusPromises = projectRefs.map(async (projectRef): Promise<ProjectStatus> => {
+        try {
+          // Load features for this project
+          const features = await featureLoader.getAll(projectRef.path);
+          const featureCounts = computeFeatureCounts(features);
+          const totalFeatures = features.length;
+
+          // Get auto-mode status for this project (main worktree, branchName = null)
+          const autoModeStatus: ProjectAutoModeStatus = await autoModeService.getStatusForProject(
+            projectRef.path,
+            null
+          );
+          const isAutoModeRunning = autoModeStatus.isAutoLoopRunning;
+
+          // Count live running features for this project (across all branches)
+          // This ensures we only count features that are actually running in memory
+          const liveRunningCount = allRunningAgents.filter(
+            (agent) => agent.projectPath === projectRef.path
+          ).length;
+          featureCounts.running = liveRunningCount;
+
+          // Get notification count for this project
+          let unreadNotificationCount = 0;
+          try {
+            const notifications = await notificationService.getNotifications(projectRef.path);
+            unreadNotificationCount = notifications.filter((n) => !n.read).length;
+          } catch {
+            // Ignore notification errors - project may not have any notifications yet
+          }
+
+          // Compute health status
+          const healthStatus = computeHealthStatus(featureCounts, isAutoModeRunning);
+
+          // Get last activity timestamp
+          const lastActivityAt = getLastActivityAt(features);
+
+          return {
+            projectId: projectRef.id,
+            projectName: projectRef.name,
+            projectPath: projectRef.path,
+            healthStatus,
+            featureCounts,
+            totalFeatures,
+            lastActivityAt,
+            isAutoModeRunning,
+            activeBranch: autoModeStatus.branchName ?? undefined,
+            unreadNotificationCount,
+          };
+        } catch (error) {
+          logError(error, `Failed to load project status: ${projectRef.name}`);
+          // Return a minimal status for projects that fail to load
+          return {
+            projectId: projectRef.id,
+            projectName: projectRef.name,
+            projectPath: projectRef.path,
+            healthStatus: 'error' as ProjectHealthStatus,
+            featureCounts: {
+              pending: 0,
+              running: 0,
+              completed: 0,
+              failed: 0,
+              verified: 0,
+            },
+            totalFeatures: 0,
+            isAutoModeRunning: false,
+            unreadNotificationCount: 0,
+          };
+        }
+      });
+
+      const projectStatuses = await Promise.all(projectStatusPromises);
+
+      // Compute aggregate metrics
+      const aggregateFeatureCounts: AggregateFeatureCounts = {
+        total: 0,
+        pending: 0,
+        running: 0,
+        completed: 0,
+        failed: 0,
+        verified: 0,
+      };
+
+      const aggregateProjectCounts: AggregateProjectCounts = {
+        total: projectStatuses.length,
+        active: 0,
+        idle: 0,
+        waiting: 0,
+        withErrors: 0,
+        allCompleted: 0,
+      };
+
+      let totalUnreadNotifications = 0;
+      let projectsWithAutoModeRunning = 0;
+
+      for (const status of projectStatuses) {
+        // Aggregate feature counts
+        aggregateFeatureCounts.total += status.totalFeatures;
+        aggregateFeatureCounts.pending += status.featureCounts.pending;
+        aggregateFeatureCounts.running += status.featureCounts.running;
+        aggregateFeatureCounts.completed += status.featureCounts.completed;
+        aggregateFeatureCounts.failed += status.featureCounts.failed;
+        aggregateFeatureCounts.verified += status.featureCounts.verified;
+
+        // Aggregate project counts by health status
+        switch (status.healthStatus) {
+          case 'active':
+            aggregateProjectCounts.active++;
+            break;
+          case 'idle':
+            aggregateProjectCounts.idle++;
+            break;
+          case 'waiting':
+            aggregateProjectCounts.waiting++;
+            break;
+          case 'error':
+            aggregateProjectCounts.withErrors++;
+            break;
+          case 'completed':
+            aggregateProjectCounts.allCompleted++;
+            break;
+        }
+
+        // Aggregate notifications
+        totalUnreadNotifications += status.unreadNotificationCount;
+
+        // Count projects with auto-mode running
+        if (status.isAutoModeRunning) {
+          projectsWithAutoModeRunning++;
+        }
+      }
+
+      const aggregateStatus: AggregateStatus = {
+        projectCounts: aggregateProjectCounts,
+        featureCounts: aggregateFeatureCounts,
+        totalUnreadNotifications,
+        projectsWithAutoModeRunning,
+        computedAt: new Date().toISOString(),
+      };
+
+      // Build the response (recentActivity is empty for now - can be populated later)
+      const overview: MultiProjectOverview = {
+        projects: projectStatuses,
+        aggregate: aggregateStatus,
+        recentActivity: [], // Placeholder for future activity feed implementation
+        generatedAt: new Date().toISOString(),
+      };
+
+      res.json({
+        success: true,
+        ...overview,
+      });
+    } catch (error) {
+      logError(error, 'Get project overview failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/running-agents/common.ts b/temp_repo/apps/server/src/routes/running-agents/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2d16a185a16dc23bbdd7d80aa8575e7859daa06
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/running-agents/common.ts
@@ -0,0 +1,12 @@
+/**
+ * Common utilities for running-agents routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+const logger = createLogger('RunningAgents');
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/running-agents/index.ts b/temp_repo/apps/server/src/routes/running-agents/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b94e54f30f483448f750874eea8b71eba8a02b79
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/running-agents/index.ts
@@ -0,0 +1,15 @@
+/**
+ * Running Agents routes - HTTP API for tracking active agent executions
+ */
+
+import { Router } from 'express';
+import type { AutoModeServiceCompat } from '../../services/auto-mode/index.js';
+import { createIndexHandler } from './routes/index.js';
+
+export function createRunningAgentsRoutes(autoModeService: AutoModeServiceCompat): Router {
+  const router = Router();
+
+  router.get('/', createIndexHandler(autoModeService));
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/running-agents/routes/index.ts b/temp_repo/apps/server/src/routes/running-agents/routes/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c18be55b394745ddf40b795ef068053c8bfd087a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/running-agents/routes/index.ts
@@ -0,0 +1,71 @@
+/**
+ * GET / endpoint - Get all running agents
+ */
+
+import type { Request, Response } from 'express';
+import type { AutoModeServiceCompat } from '../../../services/auto-mode/index.js';
+import { getBacklogPlanStatus, getRunningDetails } from '../../backlog-plan/common.js';
+import { getAllRunningGenerations } from '../../app-spec/common.js';
+import path from 'path';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createIndexHandler(autoModeService: AutoModeServiceCompat) {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const runningAgents = [...(await autoModeService.getRunningAgents())];
+
+      const backlogPlanStatus = getBacklogPlanStatus();
+      const backlogPlanDetails = getRunningDetails();
+
+      if (backlogPlanStatus.isRunning && backlogPlanDetails) {
+        runningAgents.push({
+          featureId: `backlog-plan:${backlogPlanDetails.projectPath}`,
+          projectPath: backlogPlanDetails.projectPath,
+          projectName: path.basename(backlogPlanDetails.projectPath),
+          isAutoMode: false,
+          title: 'Backlog plan',
+          description: backlogPlanDetails.prompt,
+        });
+      }
+
+      // Add spec/feature generation tasks
+      const specGenerations = getAllRunningGenerations();
+      for (const generation of specGenerations) {
+        let title: string;
+        let description: string;
+
+        switch (generation.type) {
+          case 'feature_generation':
+            title = 'Generating features from spec';
+            description = 'Creating features from the project specification';
+            break;
+          case 'sync':
+            title = 'Syncing spec with code';
+            description = 'Updating spec from codebase and completed features';
+            break;
+          default:
+            title = 'Regenerating spec';
+            description = 'Analyzing project and generating specification';
+        }
+
+        runningAgents.push({
+          featureId: `spec-generation:${generation.projectPath}`,
+          projectPath: generation.projectPath,
+          projectName: path.basename(generation.projectPath),
+          isAutoMode: false,
+          title,
+          description,
+        });
+      }
+
+      res.json({
+        success: true,
+        runningAgents,
+        totalCount: runningAgents.length,
+      });
+    } catch (error) {
+      logError(error, 'Get running agents failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/sessions/common.ts b/temp_repo/apps/server/src/routes/sessions/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0d1df9b68e6c5b8daafa47af2d2ac64a1ae0c1f1
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/sessions/common.ts
@@ -0,0 +1,12 @@
+/**
+ * Common utilities for sessions routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+const logger = createLogger('Sessions');
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/sessions/index.ts b/temp_repo/apps/server/src/routes/sessions/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e625671f3a963a7b18bbc20847f01043193952b8
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/sessions/index.ts
@@ -0,0 +1,25 @@
+/**
+ * Sessions routes - HTTP API for session management
+ */
+
+import { Router } from 'express';
+import { AgentService } from '../../services/agent-service.js';
+import { createIndexHandler } from './routes/index.js';
+import { createCreateHandler } from './routes/create.js';
+import { createUpdateHandler } from './routes/update.js';
+import { createArchiveHandler } from './routes/archive.js';
+import { createUnarchiveHandler } from './routes/unarchive.js';
+import { createDeleteHandler } from './routes/delete.js';
+
+export function createSessionsRoutes(agentService: AgentService): Router {
+  const router = Router();
+
+  router.get('/', createIndexHandler(agentService));
+  router.post('/', createCreateHandler(agentService));
+  router.put('/:sessionId', createUpdateHandler(agentService));
+  router.post('/:sessionId/archive', createArchiveHandler(agentService));
+  router.post('/:sessionId/unarchive', createUnarchiveHandler(agentService));
+  router.delete('/:sessionId', createDeleteHandler(agentService));
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/sessions/routes/archive.ts b/temp_repo/apps/server/src/routes/sessions/routes/archive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3407e5cd3386a2af4dbf397f4bc9792940bf3d94
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/sessions/routes/archive.ts
@@ -0,0 +1,26 @@
+/**
+ * POST /:sessionId/archive endpoint - Archive a session
+ */
+
+import type { Request, Response } from 'express';
+import { AgentService } from '../../../services/agent-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createArchiveHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId } = req.params;
+      const success = await agentService.archiveSession(sessionId);
+
+      if (!success) {
+        res.status(404).json({ success: false, error: 'Session not found' });
+        return;
+      }
+
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Archive session failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/sessions/routes/create.ts b/temp_repo/apps/server/src/routes/sessions/routes/create.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2917168cae3d462df8c8bd728526f57dfbc53de6
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/sessions/routes/create.ts
@@ -0,0 +1,31 @@
+/**
+ * POST / endpoint - Create a new session
+ */
+
+import type { Request, Response } from 'express';
+import { AgentService } from '../../../services/agent-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createCreateHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { name, projectPath, workingDirectory, model } = req.body as {
+        name: string;
+        projectPath?: string;
+        workingDirectory?: string;
+        model?: string;
+      };
+
+      if (!name) {
+        res.status(400).json({ success: false, error: 'name is required' });
+        return;
+      }
+
+      const session = await agentService.createSession(name, projectPath, workingDirectory, model);
+      res.json({ success: true, session });
+    } catch (error) {
+      logError(error, 'Create session failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/sessions/routes/delete.ts b/temp_repo/apps/server/src/routes/sessions/routes/delete.ts
new file mode 100644
index 0000000000000000000000000000000000000000..91bbc39d2182504f97696afcca19999ec082d0c0
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/sessions/routes/delete.ts
@@ -0,0 +1,26 @@
+/**
+ * DELETE /:sessionId endpoint - Delete a session
+ */
+
+import type { Request, Response } from 'express';
+import { AgentService } from '../../../services/agent-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createDeleteHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId } = req.params;
+      const success = await agentService.deleteSession(sessionId);
+
+      if (!success) {
+        res.status(404).json({ success: false, error: 'Session not found' });
+        return;
+      }
+
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Delete session failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/sessions/routes/index.ts b/temp_repo/apps/server/src/routes/sessions/routes/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5f82bcabfde57de292c39e512be6198e5a30eafb
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/sessions/routes/index.ts
@@ -0,0 +1,43 @@
+/**
+ * GET / endpoint - List all sessions
+ */
+
+import type { Request, Response } from 'express';
+import { AgentService } from '../../../services/agent-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createIndexHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const includeArchived = req.query.includeArchived === 'true';
+      const sessionsRaw = await agentService.listSessions(includeArchived);
+
+      // Transform to match frontend SessionListItem interface
+      const sessions = await Promise.all(
+        sessionsRaw.map(async (s) => {
+          const messages = await agentService.loadSession(s.id);
+          const lastMessage = messages[messages.length - 1];
+          const preview = lastMessage?.content?.slice(0, 100) || '';
+
+          return {
+            id: s.id,
+            name: s.name,
+            projectPath: s.projectPath || s.workingDirectory,
+            workingDirectory: s.workingDirectory,
+            createdAt: s.createdAt,
+            updatedAt: s.updatedAt,
+            isArchived: s.archived || false,
+            tags: s.tags || [],
+            messageCount: messages.length,
+            preview,
+          };
+        })
+      );
+
+      res.json({ success: true, sessions });
+    } catch (error) {
+      logError(error, 'List sessions failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/sessions/routes/unarchive.ts b/temp_repo/apps/server/src/routes/sessions/routes/unarchive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..638d315097875d757f2b58753362ffe267bd7287
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/sessions/routes/unarchive.ts
@@ -0,0 +1,26 @@
+/**
+ * POST /:sessionId/unarchive endpoint - Unarchive a session
+ */
+
+import type { Request, Response } from 'express';
+import { AgentService } from '../../../services/agent-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createUnarchiveHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId } = req.params;
+      const success = await agentService.unarchiveSession(sessionId);
+
+      if (!success) {
+        res.status(404).json({ success: false, error: 'Session not found' });
+        return;
+      }
+
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Unarchive session failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/sessions/routes/update.ts b/temp_repo/apps/server/src/routes/sessions/routes/update.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7705fa221e9c8666c497768405d3f4c74ca37eff
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/sessions/routes/update.ts
@@ -0,0 +1,35 @@
+/**
+ * PUT /:sessionId endpoint - Update a session
+ */
+
+import type { Request, Response } from 'express';
+import { AgentService } from '../../../services/agent-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createUpdateHandler(agentService: AgentService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { sessionId } = req.params;
+      const { name, tags, model } = req.body as {
+        name?: string;
+        tags?: string[];
+        model?: string;
+      };
+
+      const session = await agentService.updateSession(sessionId, {
+        name,
+        tags,
+        model,
+      });
+      if (!session) {
+        res.status(404).json({ success: false, error: 'Session not found' });
+        return;
+      }
+
+      res.json({ success: true, session });
+    } catch (error) {
+      logError(error, 'Update session failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/settings/common.ts b/temp_repo/apps/server/src/routes/settings/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d8201bfd0495c2c16d37631c064086eb89449408
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/settings/common.ts
@@ -0,0 +1,26 @@
+/**
+ * Common utilities for settings routes
+ *
+ * Provides logger and error handling utilities shared across all settings endpoints.
+ * Re-exports error handling helpers from the parent routes module.
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+/** Logger instance for settings-related operations */
+export const logger = createLogger('Settings');
+
+/**
+ * Extract user-friendly error message from error objects
+ *
+ * Re-exported from parent routes common module for consistency.
+ */
+export { getErrorMessageShared as getErrorMessage };
+
+/**
+ * Log error with automatic logger binding
+ *
+ * Convenience function for logging errors with the Settings logger.
+ */
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/settings/index.ts b/temp_repo/apps/server/src/routes/settings/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6f6f6d408357b698ee4993ccb2ce12bae7ca4f1e
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/settings/index.ts
@@ -0,0 +1,81 @@
+/**
+ * Settings routes - HTTP API for persistent file-based settings
+ *
+ * Provides endpoints for:
+ * - Status checking (migration readiness)
+ * - Global settings CRUD
+ * - Credentials management
+ * - Project-specific settings
+ * - localStorage to file migration
+ *
+ * All endpoints use handler factories that receive the SettingsService instance.
+ * Mounted at /api/settings in the main server.
+ */
+
+import { Router } from 'express';
+import type { SettingsService } from '../../services/settings-service.js';
+import { validatePathParams } from '../../middleware/validate-paths.js';
+import { createGetGlobalHandler } from './routes/get-global.js';
+import { createUpdateGlobalHandler } from './routes/update-global.js';
+import { createGetCredentialsHandler } from './routes/get-credentials.js';
+import { createUpdateCredentialsHandler } from './routes/update-credentials.js';
+import { createGetProjectHandler } from './routes/get-project.js';
+import { createUpdateProjectHandler } from './routes/update-project.js';
+import { createMigrateHandler } from './routes/migrate.js';
+import { createStatusHandler } from './routes/status.js';
+import { createDiscoverAgentsHandler } from './routes/discover-agents.js';
+
+/**
+ * Create settings router with all endpoints
+ *
+ * Registers handlers for all settings-related HTTP endpoints.
+ * Each handler is created with the provided SettingsService instance.
+ *
+ * Endpoints:
+ * - GET /status - Check migration status and data availability
+ * - GET /global - Get global settings
+ * - PUT /global - Update global settings
+ * - GET /credentials - Get masked credentials (safe for UI)
+ * - PUT /credentials - Update API keys
+ * - POST /project - Get project settings (requires projectPath in body)
+ * - PUT /project - Update project settings
+ * - POST /migrate - Migrate settings from localStorage
+ * - POST /agents/discover - Discover filesystem agents from .claude/agents/ (read-only)
+ *
+ * @param settingsService - Instance of SettingsService for file I/O
+ * @returns Express Router configured with all settings endpoints
+ */
+export function createSettingsRoutes(settingsService: SettingsService): Router {
+  const router = Router();
+
+  // Status endpoint (check if migration needed)
+  router.get('/status', createStatusHandler(settingsService));
+
+  // Global settings
+  router.get('/global', createGetGlobalHandler(settingsService));
+  router.put('/global', createUpdateGlobalHandler(settingsService));
+
+  // Credentials (separate for security)
+  router.get('/credentials', createGetCredentialsHandler(settingsService));
+  router.put('/credentials', createUpdateCredentialsHandler(settingsService));
+
+  // Project settings
+  router.post(
+    '/project',
+    validatePathParams('projectPath'),
+    createGetProjectHandler(settingsService)
+  );
+  router.put(
+    '/project',
+    validatePathParams('projectPath'),
+    createUpdateProjectHandler(settingsService)
+  );
+
+  // Migration from localStorage
+  router.post('/migrate', createMigrateHandler(settingsService));
+
+  // Filesystem agents discovery (read-only)
+  router.post('/agents/discover', createDiscoverAgentsHandler());
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/settings/routes/discover-agents.ts b/temp_repo/apps/server/src/routes/settings/routes/discover-agents.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aee4a2a2f28315ae76d3d86a4c8339fd6c764a4b
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/settings/routes/discover-agents.ts
@@ -0,0 +1,61 @@
+/**
+ * Discover Agents Route - Returns filesystem-based agents from .claude/agents/
+ *
+ * Scans both user-level (~/.claude/agents/) and project-level (.claude/agents/)
+ * directories for AGENT.md files and returns parsed agent definitions.
+ */
+
+import type { Request, Response } from 'express';
+import { discoverFilesystemAgents } from '../../../lib/agent-discovery.js';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('DiscoverAgentsRoute');
+
+interface DiscoverAgentsRequest {
+  projectPath?: string;
+  sources?: Array<'user' | 'project'>;
+}
+
+/**
+ * Create handler for discovering filesystem agents
+ *
+ * POST /api/settings/agents/discover
+ * Body: { projectPath?: string, sources?: ['user', 'project'] }
+ *
+ * Returns:
+ * {
+ *   success: true,
+ *   agents: Array<{
+ *     name: string,
+ *     definition: AgentDefinition,
+ *     source: 'user' | 'project',
+ *     filePath: string
+ *   }>
+ * }
+ */
+export function createDiscoverAgentsHandler() {
+  return async (req: Request, res: Response) => {
+    try {
+      const { projectPath, sources = ['user', 'project'] } = req.body as DiscoverAgentsRequest;
+
+      logger.info(
+        `Discovering agents from sources: ${sources.join(', ')}${projectPath ? ` (project: ${projectPath})` : ''}`
+      );
+
+      const agents = await discoverFilesystemAgents(projectPath, sources);
+
+      logger.info(`Discovered ${agents.length} filesystem agents`);
+
+      res.json({
+        success: true,
+        agents,
+      });
+    } catch (error) {
+      logger.error('Failed to discover agents:', error);
+      res.status(500).json({
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to discover agents',
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/settings/routes/get-credentials.ts b/temp_repo/apps/server/src/routes/settings/routes/get-credentials.ts
new file mode 100644
index 0000000000000000000000000000000000000000..140ccce497fe360ddebd392eb3ad1c7379f34974
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/settings/routes/get-credentials.ts
@@ -0,0 +1,35 @@
+/**
+ * GET /api/settings/credentials - Get API key status (masked for security)
+ *
+ * Returns masked credentials showing which providers have keys configured.
+ * Each provider shows: `{ configured: boolean, masked: string }`
+ * Masked shows first 4 and last 4 characters for verification.
+ *
+ * Response: `{ "success": true, "credentials": { anthropic, google, openai } }`
+ */
+
+import type { Request, Response } from 'express';
+import type { SettingsService } from '../../../services/settings-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+/**
+ * Create handler factory for GET /api/settings/credentials
+ *
+ * @param settingsService - Instance of SettingsService for file I/O
+ * @returns Express request handler
+ */
+export function createGetCredentialsHandler(settingsService: SettingsService) {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const credentials = await settingsService.getMaskedCredentials();
+
+      res.json({
+        success: true,
+        credentials,
+      });
+    } catch (error) {
+      logError(error, 'Get credentials failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/settings/routes/get-global.ts b/temp_repo/apps/server/src/routes/settings/routes/get-global.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fa432b25218a954eb6d508c73d134209cd2e485a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/settings/routes/get-global.ts
@@ -0,0 +1,34 @@
+/**
+ * GET /api/settings/global - Retrieve global user settings
+ *
+ * Returns the complete GlobalSettings object with all user preferences,
+ * keyboard shortcuts, AI profiles, and project history.
+ *
+ * Response: `{ "success": true, "settings": GlobalSettings }`
+ */
+
+import type { Request, Response } from 'express';
+import type { SettingsService } from '../../../services/settings-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+/**
+ * Create handler factory for GET /api/settings/global
+ *
+ * @param settingsService - Instance of SettingsService for file I/O
+ * @returns Express request handler
+ */
+export function createGetGlobalHandler(settingsService: SettingsService) {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const settings = await settingsService.getGlobalSettings();
+
+      res.json({
+        success: true,
+        settings,
+      });
+    } catch (error) {
+      logError(error, 'Get global settings failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/settings/routes/get-project.ts b/temp_repo/apps/server/src/routes/settings/routes/get-project.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7cd449a2aa299181df7379eed87fa3c26d9d97d1
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/settings/routes/get-project.ts
@@ -0,0 +1,45 @@
+/**
+ * POST /api/settings/project - Get project-specific settings
+ *
+ * Retrieves settings overrides for a specific project. Uses POST because
+ * projectPath may contain special characters that don't work well in URLs.
+ *
+ * Request body: `{ projectPath: string }`
+ * Response: `{ "success": true, "settings": ProjectSettings }`
+ */
+
+import type { Request, Response } from 'express';
+import type { SettingsService } from '../../../services/settings-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+/**
+ * Create handler factory for POST /api/settings/project
+ *
+ * @param settingsService - Instance of SettingsService for file I/O
+ * @returns Express request handler
+ */
+export function createGetProjectHandler(settingsService: SettingsService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as { projectPath?: string };
+
+      if (!projectPath || typeof projectPath !== 'string') {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      const settings = await settingsService.getProjectSettings(projectPath);
+
+      res.json({
+        success: true,
+        settings,
+      });
+    } catch (error) {
+      logError(error, 'Get project settings failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/settings/routes/migrate.ts b/temp_repo/apps/server/src/routes/settings/routes/migrate.ts
new file mode 100644
index 0000000000000000000000000000000000000000..02145d6677b02052dc1d6f1d0a24eff37adc5f15
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/settings/routes/migrate.ts
@@ -0,0 +1,86 @@
+/**
+ * POST /api/settings/migrate - Migrate settings from localStorage to file storage
+ *
+ * Called during onboarding when UI detects localStorage data but no settings files.
+ * Extracts settings from various localStorage keys and writes to new file structure.
+ * Collects errors but continues on partial failures (graceful degradation).
+ *
+ * Request body:
+ * ```json
+ * {
+ *   "data": {
+ *     "automaker-storage"?: string,
+ *     "automaker-setup"?: string,
+ *     "worktree-panel-collapsed"?: string,
+ *     "file-browser-recent-folders"?: string,
+ *     "automaker:lastProjectDir"?: string
+ *   }
+ * }
+ * ```
+ *
+ * Response:
+ * ```json
+ * {
+ *   "success": boolean,
+ *   "migratedGlobalSettings": boolean,
+ *   "migratedCredentials": boolean,
+ *   "migratedProjectCount": number,
+ *   "errors": string[]
+ * }
+ * ```
+ */
+
+import type { Request, Response } from 'express';
+import type { SettingsService } from '../../../services/settings-service.js';
+import { getErrorMessage, logError, logger } from '../common.js';
+
+/**
+ * Create handler factory for POST /api/settings/migrate
+ *
+ * @param settingsService - Instance of SettingsService for file I/O
+ * @returns Express request handler
+ */
+export function createMigrateHandler(settingsService: SettingsService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { data } = req.body as {
+        data?: {
+          'automaker-storage'?: string;
+          'automaker-setup'?: string;
+          'worktree-panel-collapsed'?: string;
+          'file-browser-recent-folders'?: string;
+          'automaker:lastProjectDir'?: string;
+        };
+      };
+
+      if (!data || typeof data !== 'object') {
+        res.status(400).json({
+          success: false,
+          error: 'data object is required containing localStorage data',
+        });
+        return;
+      }
+
+      logger.info('Starting settings migration from localStorage');
+
+      const result = await settingsService.migrateFromLocalStorage(data);
+
+      if (result.success) {
+        logger.info(`Migration successful: ${result.migratedProjectCount} projects migrated`);
+      } else {
+        logger.warn(`Migration completed with errors: ${result.errors.join(', ')}`);
+      }
+
+      res.json({
+        success: result.success,
+        migratedGlobalSettings: result.migratedGlobalSettings,
+        migratedCredentials: result.migratedCredentials,
+        migratedProjectCount: result.migratedProjectCount,
+        errors: result.errors,
+      });
+    } catch (error) {
+      logError(error, 'Migration failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/settings/routes/status.ts b/temp_repo/apps/server/src/routes/settings/routes/status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..04f016437317d65f05fe3351083abc886c9318c3
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/settings/routes/status.ts
@@ -0,0 +1,47 @@
+/**
+ * GET /api/settings/status - Get settings migration and availability status
+ *
+ * Checks which settings files exist to determine if migration from localStorage
+ * is needed. Used by UI during onboarding to decide whether to show migration flow.
+ *
+ * Response:
+ * ```json
+ * {
+ *   "success": true,
+ *   "hasGlobalSettings": boolean,
+ *   "hasCredentials": boolean,
+ *   "dataDir": string,
+ *   "needsMigration": boolean
+ * }
+ * ```
+ */
+
+import type { Request, Response } from 'express';
+import type { SettingsService } from '../../../services/settings-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+/**
+ * Create handler factory for GET /api/settings/status
+ *
+ * @param settingsService - Instance of SettingsService for file I/O
+ * @returns Express request handler
+ */
+export function createStatusHandler(settingsService: SettingsService) {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const hasGlobalSettings = await settingsService.hasGlobalSettings();
+      const hasCredentials = await settingsService.hasCredentials();
+
+      res.json({
+        success: true,
+        hasGlobalSettings,
+        hasCredentials,
+        dataDir: settingsService.getDataDir(),
+        needsMigration: !hasGlobalSettings,
+      });
+    } catch (error) {
+      logError(error, 'Get settings status failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/settings/routes/update-credentials.ts b/temp_repo/apps/server/src/routes/settings/routes/update-credentials.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2b4158306fa02d8cb26d910ebe2b8800b91b13f9
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/settings/routes/update-credentials.ts
@@ -0,0 +1,49 @@
+/**
+ * PUT /api/settings/credentials - Update API credentials
+ *
+ * Updates API keys for supported providers. Partial updates supported.
+ * Returns masked credentials for verification without exposing full keys.
+ *
+ * Request body: `Partial<Credentials>` (usually just apiKeys)
+ * Response: `{ "success": true, "credentials": { anthropic } }`
+ */
+
+import type { Request, Response } from 'express';
+import type { SettingsService } from '../../../services/settings-service.js';
+import type { Credentials } from '../../../types/settings.js';
+import { getErrorMessage, logError } from '../common.js';
+
+/**
+ * Create handler factory for PUT /api/settings/credentials
+ *
+ * @param settingsService - Instance of SettingsService for file I/O
+ * @returns Express request handler
+ */
+export function createUpdateCredentialsHandler(settingsService: SettingsService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const updates = req.body as Partial<Credentials>;
+
+      if (!updates || typeof updates !== 'object') {
+        res.status(400).json({
+          success: false,
+          error: 'Invalid request body - expected credentials object',
+        });
+        return;
+      }
+
+      await settingsService.updateCredentials(updates);
+
+      // Return masked credentials for confirmation
+      const masked = await settingsService.getMaskedCredentials();
+
+      res.json({
+        success: true,
+        credentials: masked,
+      });
+    } catch (error) {
+      logError(error, 'Update credentials failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/settings/routes/update-global.ts b/temp_repo/apps/server/src/routes/settings/routes/update-global.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2bc1c2fa2f3778eb0ee09caec7c255e12fad0a48
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/settings/routes/update-global.ts
@@ -0,0 +1,127 @@
+/**
+ * PUT /api/settings/global - Update global user settings
+ *
+ * Accepts partial GlobalSettings update. Fields provided are merged into
+ * existing settings (not replaced). Returns updated settings.
+ *
+ * Request body: `Partial<GlobalSettings>`
+ * Response: `{ "success": true, "settings": GlobalSettings }`
+ */
+
+import type { Request, Response } from 'express';
+import type { SettingsService } from '../../../services/settings-service.js';
+import type { GlobalSettings } from '../../../types/settings.js';
+import { getErrorMessage, logError, logger } from '../common.js';
+import { setLogLevel, LogLevel } from '@automaker/utils';
+import { setRequestLoggingEnabled } from '../../../index.js';
+import { getTerminalService } from '../../../services/terminal-service.js';
+
+/**
+ * Map server log level string to LogLevel enum
+ */
+const LOG_LEVEL_MAP: Record<string, LogLevel> = {
+  error: LogLevel.ERROR,
+  warn: LogLevel.WARN,
+  info: LogLevel.INFO,
+  debug: LogLevel.DEBUG,
+};
+
+/**
+ * Create handler factory for PUT /api/settings/global
+ *
+ * @param settingsService - Instance of SettingsService for file I/O
+ * @returns Express request handler
+ */
+export function createUpdateGlobalHandler(settingsService: SettingsService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const updates = req.body as Partial<GlobalSettings>;
+
+      if (!updates || typeof updates !== 'object') {
+        res.status(400).json({
+          success: false,
+          error: 'Invalid request body - expected settings object',
+        });
+        return;
+      }
+
+      // Minimal debug logging to help diagnose accidental wipes.
+      const projectsLen = Array.isArray(updates.projects) ? updates.projects.length : undefined;
+      const trashedLen = Array.isArray(updates.trashedProjects)
+        ? updates.trashedProjects.length
+        : undefined;
+      logger.info(
+        `[SERVER_SETTINGS_UPDATE] Request received: projects=${projectsLen ?? 'n/a'}, trashedProjects=${trashedLen ?? 'n/a'}, theme=${
+          updates.theme ?? 'n/a'
+        }, localStorageMigrated=${updates.localStorageMigrated ?? 'n/a'}`
+      );
+
+      // Get old settings to detect theme changes
+      const oldSettings = await settingsService.getGlobalSettings();
+      const oldTheme = oldSettings?.theme;
+
+      logger.info('[SERVER_SETTINGS_UPDATE] Calling updateGlobalSettings...');
+      const settings = await settingsService.updateGlobalSettings(updates);
+      logger.info(
+        '[SERVER_SETTINGS_UPDATE] Update complete, projects count:',
+        settings.projects?.length ?? 0
+      );
+
+      // Handle theme change - regenerate terminal RC files for all projects
+      if ('theme' in updates && updates.theme && updates.theme !== oldTheme) {
+        const terminalService = getTerminalService(settingsService);
+        const newTheme = updates.theme;
+
+        logger.info(
+          `[TERMINAL_CONFIG] Theme changed from ${oldTheme} to ${newTheme}, regenerating RC files`
+        );
+
+        // Regenerate RC files for all projects with terminal config enabled
+        const projects = settings.projects || [];
+        for (const project of projects) {
+          try {
+            const projectSettings = await settingsService.getProjectSettings(project.path);
+            // Check if terminal config is enabled (global or project-specific)
+            const terminalConfigEnabled =
+              projectSettings.terminalConfig?.enabled !== false &&
+              settings.terminalConfig?.enabled === true;
+
+            if (terminalConfigEnabled) {
+              await terminalService.onThemeChange(project.path, newTheme);
+              logger.info(`[TERMINAL_CONFIG] Regenerated RC files for project: ${project.name}`);
+            }
+          } catch (error) {
+            logger.warn(
+              `[TERMINAL_CONFIG] Failed to regenerate RC files for project ${project.name}: ${error}`
+            );
+          }
+        }
+      }
+
+      // Apply server log level if it was updated
+      if ('serverLogLevel' in updates && updates.serverLogLevel) {
+        const level = LOG_LEVEL_MAP[updates.serverLogLevel];
+        if (level !== undefined) {
+          setLogLevel(level);
+          logger.info(`Server log level changed to: ${updates.serverLogLevel}`);
+        }
+      }
+
+      // Apply request logging setting if it was updated
+      if ('enableRequestLogging' in updates && typeof updates.enableRequestLogging === 'boolean') {
+        setRequestLoggingEnabled(updates.enableRequestLogging);
+        logger.info(
+          `HTTP request logging ${updates.enableRequestLogging ? 'enabled' : 'disabled'}`
+        );
+      }
+
+      res.json({
+        success: true,
+        settings,
+      });
+    } catch (error) {
+      logError(error, 'Update global settings failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/settings/routes/update-project.ts b/temp_repo/apps/server/src/routes/settings/routes/update-project.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f5f639f473a8568b8f4c073ad99fb6c2725e1d1a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/settings/routes/update-project.ts
@@ -0,0 +1,57 @@
+/**
+ * PUT /api/settings/project - Update project-specific settings
+ *
+ * Updates settings for a specific project. Partial updates supported.
+ * Project settings override global settings when present.
+ *
+ * Request body: `{ projectPath: string, updates: Partial<ProjectSettings> }`
+ * Response: `{ "success": true, "settings": ProjectSettings }`
+ */
+
+import type { Request, Response } from 'express';
+import type { SettingsService } from '../../../services/settings-service.js';
+import type { ProjectSettings } from '../../../types/settings.js';
+import { getErrorMessage, logError } from '../common.js';
+
+/**
+ * Create handler factory for PUT /api/settings/project
+ *
+ * @param settingsService - Instance of SettingsService for file I/O
+ * @returns Express request handler
+ */
+export function createUpdateProjectHandler(settingsService: SettingsService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, updates } = req.body as {
+        projectPath?: string;
+        updates?: Partial<ProjectSettings>;
+      };
+
+      if (!projectPath || typeof projectPath !== 'string') {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      if (!updates || typeof updates !== 'object') {
+        res.status(400).json({
+          success: false,
+          error: 'updates object is required',
+        });
+        return;
+      }
+
+      const settings = await settingsService.updateProjectSettings(projectPath, updates);
+
+      res.json({
+        success: true,
+        settings,
+      });
+    } catch (error) {
+      logError(error, 'Update project settings failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/common.ts b/temp_repo/apps/server/src/routes/setup/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f03d91751c4a571c06cece292d5290ef7c0f9daa
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/common.ts
@@ -0,0 +1,59 @@
+/**
+ * Common utilities and state for setup routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import path from 'path';
+import { secureFs } from '@automaker/platform';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+const logger = createLogger('Setup');
+
+// Storage for API keys (in-memory cache) - private
+const apiKeys: Record<string, string> = {};
+
+/**
+ * Get an API key for a provider
+ */
+export function getApiKey(provider: string): string | undefined {
+  return apiKeys[provider];
+}
+
+/**
+ * Set an API key for a provider
+ */
+export function setApiKey(provider: string, key: string): void {
+  apiKeys[provider] = key;
+}
+
+/**
+ * Get all API keys (for read-only access)
+ */
+export function getAllApiKeys(): Record<string, string> {
+  return { ...apiKeys };
+}
+
+/**
+ * Helper to persist API keys to .env file
+ * Uses centralized secureFs.writeEnvKey for path validation
+ */
+export async function persistApiKeyToEnv(key: string, value: string): Promise<void> {
+  const envPath = path.join(process.cwd(), '.env');
+
+  try {
+    await secureFs.writeEnvKey(envPath, key, value);
+    logger.info(`[Setup] Persisted ${key} to .env file`);
+  } catch (error) {
+    logger.error(`[Setup] Failed to persist ${key} to .env:`, error);
+    throw error;
+  }
+}
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
+
+/**
+ * Marker file used to indicate a provider has been explicitly disconnected by user
+ */
+export const COPILOT_DISCONNECTED_MARKER_FILE = '.copilot-disconnected';
diff --git a/temp_repo/apps/server/src/routes/setup/get-claude-status.ts b/temp_repo/apps/server/src/routes/setup/get-claude-status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4a3ccaf626db874b7ab245e01b098634565dbfa3
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/get-claude-status.ts
@@ -0,0 +1,182 @@
+/**
+ * Business logic for getting Claude CLI status
+ */
+
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { getClaudeCliPaths, getClaudeAuthIndicators, systemPathAccess } from '@automaker/platform';
+import { getApiKey } from './common.js';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const execAsync = promisify(exec);
+
+const DISCONNECTED_MARKER_FILE = '.claude-disconnected';
+
+function isDisconnectedFromApp(): boolean {
+  try {
+    // Check if we're in a project directory
+    const projectRoot = process.cwd();
+    const markerPath = path.join(projectRoot, '.automaker', DISCONNECTED_MARKER_FILE);
+    return fs.existsSync(markerPath);
+  } catch {
+    return false;
+  }
+}
+
+export async function getClaudeStatus() {
+  let installed = false;
+  let version = '';
+  let cliPath = '';
+  let method = 'none';
+
+  const isWindows = process.platform === 'win32';
+
+  // Try to find Claude CLI using platform-specific command
+  try {
+    // Use 'where' on Windows, 'which' on Unix-like systems
+    const findCommand = isWindows ? 'where claude' : 'which claude';
+    const { stdout } = await execAsync(findCommand);
+    // 'where' on Windows can return multiple paths - take the first one
+    cliPath = stdout.trim().split(/\r?\n/)[0];
+    installed = true;
+    method = 'path';
+
+    // Get version
+    try {
+      const { stdout: versionOut } = await execAsync('claude --version');
+      version = versionOut.trim();
+    } catch {
+      // Version command might not be available
+    }
+  } catch {
+    // Not in PATH, try common locations from centralized system paths
+    const commonPaths = getClaudeCliPaths();
+
+    for (const p of commonPaths) {
+      try {
+        if (await systemPathAccess(p)) {
+          cliPath = p;
+          installed = true;
+          method = 'local';
+
+          // Get version from this path
+          try {
+            const { stdout: versionOut } = await execAsync(`"${p}" --version`);
+            version = versionOut.trim();
+          } catch {
+            // Version command might not be available
+          }
+          break;
+        }
+      } catch {
+        // Not found at this path
+      }
+    }
+  }
+
+  // Check if user has manually disconnected from the app
+  if (isDisconnectedFromApp()) {
+    return {
+      status: installed ? 'installed' : 'not_installed',
+      installed,
+      method,
+      version,
+      path: cliPath,
+      auth: {
+        authenticated: false,
+        method: 'none',
+        hasCredentialsFile: false,
+        hasToken: false,
+        hasStoredOAuthToken: false,
+        hasStoredApiKey: false,
+        hasEnvApiKey: false,
+        oauthTokenValid: false,
+        apiKeyValid: false,
+        hasCliAuth: false,
+        hasRecentActivity: false,
+      },
+    };
+  }
+
+  // Check authentication - detect all possible auth methods
+  // Note: apiKeys.anthropic_oauth_token stores OAuth tokens from subscription auth
+  //       apiKeys.anthropic stores direct API keys for pay-per-use
+  const auth = {
+    authenticated: false,
+    method: 'none' as string,
+    hasCredentialsFile: false,
+    hasToken: false,
+    hasStoredOAuthToken: !!getApiKey('anthropic_oauth_token'),
+    hasStoredApiKey: !!getApiKey('anthropic'),
+    hasEnvApiKey: !!process.env.ANTHROPIC_API_KEY,
+    // Additional fields for detailed status
+    oauthTokenValid: false,
+    apiKeyValid: false,
+    hasCliAuth: false,
+    hasRecentActivity: false,
+  };
+
+  // Use centralized system paths to check Claude authentication indicators
+  const indicators = await getClaudeAuthIndicators();
+
+  // Check for recent activity (indicates working authentication)
+  if (indicators.hasStatsCacheWithActivity) {
+    auth.hasRecentActivity = true;
+    auth.hasCliAuth = true;
+    auth.authenticated = true;
+    auth.method = 'cli_authenticated';
+  }
+
+  // Check for settings + sessions (indicates CLI is set up)
+  if (!auth.hasCliAuth && indicators.hasSettingsFile && indicators.hasProjectsSessions) {
+    auth.hasCliAuth = true;
+    auth.authenticated = true;
+    auth.method = 'cli_authenticated';
+  }
+
+  // Check credentials file
+  if (indicators.hasCredentialsFile && indicators.credentials) {
+    auth.hasCredentialsFile = true;
+    if (indicators.credentials.hasOAuthToken) {
+      auth.hasStoredOAuthToken = true;
+      auth.oauthTokenValid = true;
+      auth.authenticated = true;
+      auth.method = 'oauth_token';
+    } else if (indicators.credentials.hasApiKey) {
+      auth.apiKeyValid = true;
+      auth.authenticated = true;
+      auth.method = 'api_key';
+    }
+  }
+
+  // Environment variables override stored credentials (higher priority)
+  if (auth.hasEnvApiKey) {
+    auth.authenticated = true;
+    auth.apiKeyValid = true;
+    auth.method = 'api_key_env';
+  }
+
+  // In-memory stored OAuth token (from setup wizard - subscription auth)
+  if (!auth.authenticated && getApiKey('anthropic_oauth_token')) {
+    auth.authenticated = true;
+    auth.oauthTokenValid = true;
+    auth.method = 'oauth_token';
+  }
+
+  // In-memory stored API key (from settings UI - pay-per-use)
+  if (!auth.authenticated && getApiKey('anthropic')) {
+    auth.authenticated = true;
+    auth.apiKeyValid = true;
+    auth.method = 'api_key';
+  }
+
+  return {
+    status: installed ? 'installed' : 'not_installed',
+    installed,
+    method,
+    version,
+    path: cliPath,
+    auth,
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/index.ts b/temp_repo/apps/server/src/routes/setup/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b0d32933567ccbca8b17b36cdcc655e58dc5787c
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/index.ts
@@ -0,0 +1,118 @@
+/**
+ * Setup routes - HTTP API for CLI detection, API keys, and platform info
+ */
+
+import { Router } from 'express';
+import { createClaudeStatusHandler } from './routes/claude-status.js';
+import { createInstallClaudeHandler } from './routes/install-claude.js';
+import { createAuthClaudeHandler } from './routes/auth-claude.js';
+import { createStoreApiKeyHandler } from './routes/store-api-key.js';
+import { createDeleteApiKeyHandler } from './routes/delete-api-key.js';
+import { createApiKeysHandler } from './routes/api-keys.js';
+import { createPlatformHandler } from './routes/platform.js';
+import { createVerifyClaudeAuthHandler } from './routes/verify-claude-auth.js';
+import { createVerifyCodexAuthHandler } from './routes/verify-codex-auth.js';
+import { createGhStatusHandler } from './routes/gh-status.js';
+import { createCursorStatusHandler } from './routes/cursor-status.js';
+import { createCodexStatusHandler } from './routes/codex-status.js';
+import { createInstallCodexHandler } from './routes/install-codex.js';
+import { createAuthCodexHandler } from './routes/auth-codex.js';
+import { createAuthCursorHandler } from './routes/auth-cursor.js';
+import { createDeauthClaudeHandler } from './routes/deauth-claude.js';
+import { createDeauthCodexHandler } from './routes/deauth-codex.js';
+import { createDeauthCursorHandler } from './routes/deauth-cursor.js';
+import { createAuthOpencodeHandler } from './routes/auth-opencode.js';
+import { createDeauthOpencodeHandler } from './routes/deauth-opencode.js';
+import { createOpencodeStatusHandler } from './routes/opencode-status.js';
+import { createGeminiStatusHandler } from './routes/gemini-status.js';
+import { createAuthGeminiHandler } from './routes/auth-gemini.js';
+import { createDeauthGeminiHandler } from './routes/deauth-gemini.js';
+import { createCopilotStatusHandler } from './routes/copilot-status.js';
+import { createAuthCopilotHandler } from './routes/auth-copilot.js';
+import { createDeauthCopilotHandler } from './routes/deauth-copilot.js';
+import {
+  createGetCopilotModelsHandler,
+  createRefreshCopilotModelsHandler,
+  createClearCopilotCacheHandler,
+} from './routes/copilot-models.js';
+import {
+  createGetOpencodeModelsHandler,
+  createRefreshOpencodeModelsHandler,
+  createGetOpencodeProvidersHandler,
+  createClearOpencodeCacheHandler,
+} from './routes/opencode-models.js';
+import {
+  createGetCursorConfigHandler,
+  createSetCursorDefaultModelHandler,
+  createSetCursorModelsHandler,
+  createGetCursorPermissionsHandler,
+  createApplyPermissionProfileHandler,
+  createSetCustomPermissionsHandler,
+  createDeleteProjectPermissionsHandler,
+  createGetExampleConfigHandler,
+} from './routes/cursor-config.js';
+
+export function createSetupRoutes(): Router {
+  const router = Router();
+
+  router.get('/claude-status', createClaudeStatusHandler());
+  router.post('/install-claude', createInstallClaudeHandler());
+  router.post('/auth-claude', createAuthClaudeHandler());
+  router.post('/deauth-claude', createDeauthClaudeHandler());
+  router.post('/store-api-key', createStoreApiKeyHandler());
+  router.post('/delete-api-key', createDeleteApiKeyHandler());
+  router.get('/api-keys', createApiKeysHandler());
+  router.get('/platform', createPlatformHandler());
+  router.post('/verify-claude-auth', createVerifyClaudeAuthHandler());
+  router.post('/verify-codex-auth', createVerifyCodexAuthHandler());
+  router.get('/gh-status', createGhStatusHandler());
+
+  // Cursor CLI routes
+  router.get('/cursor-status', createCursorStatusHandler());
+  router.post('/auth-cursor', createAuthCursorHandler());
+  router.post('/deauth-cursor', createDeauthCursorHandler());
+
+  // Codex CLI routes
+  router.get('/codex-status', createCodexStatusHandler());
+  router.post('/install-codex', createInstallCodexHandler());
+  router.post('/auth-codex', createAuthCodexHandler());
+  router.post('/deauth-codex', createDeauthCodexHandler());
+
+  // OpenCode CLI routes
+  router.get('/opencode-status', createOpencodeStatusHandler());
+  router.post('/auth-opencode', createAuthOpencodeHandler());
+  router.post('/deauth-opencode', createDeauthOpencodeHandler());
+
+  // Gemini CLI routes
+  router.get('/gemini-status', createGeminiStatusHandler());
+  router.post('/auth-gemini', createAuthGeminiHandler());
+  router.post('/deauth-gemini', createDeauthGeminiHandler());
+
+  // Copilot CLI routes
+  router.get('/copilot-status', createCopilotStatusHandler());
+  router.post('/auth-copilot', createAuthCopilotHandler());
+  router.post('/deauth-copilot', createDeauthCopilotHandler());
+
+  // Copilot Dynamic Model Discovery routes
+  router.get('/copilot/models', createGetCopilotModelsHandler());
+  router.post('/copilot/models/refresh', createRefreshCopilotModelsHandler());
+  router.post('/copilot/cache/clear', createClearCopilotCacheHandler());
+
+  // OpenCode Dynamic Model Discovery routes
+  router.get('/opencode/models', createGetOpencodeModelsHandler());
+  router.post('/opencode/models/refresh', createRefreshOpencodeModelsHandler());
+  router.get('/opencode/providers', createGetOpencodeProvidersHandler());
+  router.post('/opencode/cache/clear', createClearOpencodeCacheHandler());
+  router.get('/cursor-config', createGetCursorConfigHandler());
+  router.post('/cursor-config/default-model', createSetCursorDefaultModelHandler());
+  router.post('/cursor-config/models', createSetCursorModelsHandler());
+
+  // Cursor CLI Permissions routes
+  router.get('/cursor-permissions', createGetCursorPermissionsHandler());
+  router.post('/cursor-permissions/profile', createApplyPermissionProfileHandler());
+  router.post('/cursor-permissions/custom', createSetCustomPermissionsHandler());
+  router.delete('/cursor-permissions', createDeleteProjectPermissionsHandler());
+  router.get('/cursor-permissions/example', createGetExampleConfigHandler());
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/api-keys.ts b/temp_repo/apps/server/src/routes/setup/routes/api-keys.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ec870e7b744fdd3508822a17188b6d537e2944b4
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/api-keys.ts
@@ -0,0 +1,22 @@
+/**
+ * GET /api-keys endpoint - Get API keys status
+ */
+
+import type { Request, Response } from 'express';
+import { getApiKey, getErrorMessage, logError } from '../common.js';
+
+export function createApiKeysHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      res.json({
+        success: true,
+        hasAnthropicKey: !!getApiKey('anthropic') || !!process.env.ANTHROPIC_API_KEY,
+        hasGoogleKey: !!getApiKey('google'),
+        hasOpenaiKey: !!getApiKey('openai') || !!process.env.OPENAI_API_KEY,
+      });
+    } catch (error) {
+      logError(error, 'Get API keys failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/auth-claude.ts b/temp_repo/apps/server/src/routes/setup/routes/auth-claude.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9eac09895d9c3f5aba7fc62f0f54be3bdad1f779
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/auth-claude.ts
@@ -0,0 +1,53 @@
+/**
+ * POST /auth-claude endpoint - Auth Claude
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from '../common.js';
+import * as fs from 'fs';
+import * as path from 'path';
+
+export function createAuthClaudeHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Remove the disconnected marker file to reconnect the app to the CLI
+      const markerPath = path.join(process.cwd(), '.automaker', '.claude-disconnected');
+      if (fs.existsSync(markerPath)) {
+        fs.unlinkSync(markerPath);
+      }
+
+      // Check if CLI is already authenticated by checking auth indicators
+      const { getClaudeAuthIndicators } = await import('@automaker/platform');
+      const indicators = await getClaudeAuthIndicators();
+      const isAlreadyAuthenticated =
+        indicators.hasStatsCacheWithActivity ||
+        (indicators.hasSettingsFile && indicators.hasProjectsSessions) ||
+        indicators.hasCredentialsFile;
+
+      if (isAlreadyAuthenticated) {
+        // CLI is already authenticated, just reconnect
+        res.json({
+          success: true,
+          message: 'Claude CLI is now linked with the app',
+          wasAlreadyAuthenticated: true,
+        });
+      } else {
+        // CLI needs authentication - but we can't run claude login here
+        // because it requires browser OAuth. Just reconnect and let the user authenticate if needed.
+        res.json({
+          success: true,
+          message:
+            'Claude CLI is now linked with the app. If prompted, please authenticate with "claude login" in your terminal.',
+          requiresManualAuth: true,
+        });
+      }
+    } catch (error) {
+      logError(error, 'Auth Claude failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+        message: 'Failed to link Claude CLI with the app',
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/auth-codex.ts b/temp_repo/apps/server/src/routes/setup/routes/auth-codex.ts
new file mode 100644
index 0000000000000000000000000000000000000000..79857bd8d4bbad7c2a177f0a544a543121210b50
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/auth-codex.ts
@@ -0,0 +1,50 @@
+/**
+ * POST /auth-codex endpoint - Authenticate Codex CLI
+ */
+
+import type { Request, Response } from 'express';
+import { logError, getErrorMessage } from '../common.js';
+import * as fs from 'fs';
+import * as path from 'path';
+
+export function createAuthCodexHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Remove the disconnected marker file to reconnect the app to the CLI
+      const markerPath = path.join(process.cwd(), '.automaker', '.codex-disconnected');
+      if (fs.existsSync(markerPath)) {
+        fs.unlinkSync(markerPath);
+      }
+
+      // Use the same detection logic as the Codex provider
+      const { getCodexAuthIndicators } = await import('@automaker/platform');
+      const indicators = await getCodexAuthIndicators();
+
+      const isAlreadyAuthenticated =
+        indicators.hasApiKey || indicators.hasAuthFile || indicators.hasOAuthToken;
+
+      if (isAlreadyAuthenticated) {
+        // Already has authentication, just reconnect
+        res.json({
+          success: true,
+          message: 'Codex CLI is now linked with the app',
+          wasAlreadyAuthenticated: true,
+        });
+      } else {
+        res.json({
+          success: true,
+          message:
+            'Codex CLI is now linked with the app. If prompted, please authenticate with "codex login" in your terminal.',
+          requiresManualAuth: true,
+        });
+      }
+    } catch (error) {
+      logError(error, 'Auth Codex failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+        message: 'Failed to link Codex CLI with the app',
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/auth-copilot.ts b/temp_repo/apps/server/src/routes/setup/routes/auth-copilot.ts
new file mode 100644
index 0000000000000000000000000000000000000000..579fcc4f2096cb3e126eaba1228985967fb1ab27
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/auth-copilot.ts
@@ -0,0 +1,30 @@
+/**
+ * POST /auth-copilot endpoint - Connect Copilot CLI to the app
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from '../common.js';
+import { connectCopilot } from '../../../services/copilot-connection-service.js';
+
+/**
+ * Creates handler for POST /api/setup/auth-copilot
+ * Removes the disconnection marker to allow Copilot CLI to be used
+ */
+export function createAuthCopilotHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      await connectCopilot();
+
+      res.json({
+        success: true,
+        message: 'Copilot CLI connected to app',
+      });
+    } catch (error) {
+      logError(error, 'Auth Copilot failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/auth-cursor.ts b/temp_repo/apps/server/src/routes/setup/routes/auth-cursor.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fbd6339c80502ccdd6ba9f23f2ce0f04d9579551
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/auth-cursor.ts
@@ -0,0 +1,73 @@
+/**
+ * POST /auth-cursor endpoint - Authenticate Cursor CLI
+ */
+
+import type { Request, Response } from 'express';
+import { logError, getErrorMessage } from '../common.js';
+import * as fs from 'fs';
+import * as path from 'path';
+import os from 'os';
+
+export function createAuthCursorHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Remove the disconnected marker file to reconnect the app to the CLI
+      const markerPath = path.join(process.cwd(), '.automaker', '.cursor-disconnected');
+      if (fs.existsSync(markerPath)) {
+        fs.unlinkSync(markerPath);
+      }
+
+      // Check if Cursor is already authenticated using the same logic as CursorProvider
+      const isAlreadyAuthenticated = (): boolean => {
+        // Check for API key in environment
+        if (process.env.CURSOR_API_KEY) {
+          return true;
+        }
+
+        // Check for credentials files
+        const credentialPaths = [
+          path.join(os.homedir(), '.cursor', 'credentials.json'),
+          path.join(os.homedir(), '.config', 'cursor', 'credentials.json'),
+        ];
+
+        for (const credPath of credentialPaths) {
+          if (fs.existsSync(credPath)) {
+            try {
+              const content = fs.readFileSync(credPath, 'utf8');
+              const creds = JSON.parse(content);
+              if (creds.accessToken || creds.token) {
+                return true;
+              }
+            } catch {
+              // Invalid credentials file, continue checking
+            }
+          }
+        }
+
+        return false;
+      };
+
+      if (isAlreadyAuthenticated()) {
+        res.json({
+          success: true,
+          message: 'Cursor CLI is now linked with the app',
+          wasAlreadyAuthenticated: true,
+        });
+      } else {
+        res.json({
+          success: true,
+          message:
+            'Cursor CLI is now linked with the app. If prompted, please authenticate with "cursor auth" in your terminal.',
+          requiresManualAuth: true,
+        });
+      }
+    } catch (error) {
+      logError(error, 'Auth Cursor failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+        message: 'Failed to link Cursor CLI with the app',
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/auth-gemini.ts b/temp_repo/apps/server/src/routes/setup/routes/auth-gemini.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5faad8db37bf79752c0629650dbb314de0074272
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/auth-gemini.ts
@@ -0,0 +1,42 @@
+/**
+ * POST /auth-gemini endpoint - Connect Gemini CLI to the app
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from '../common.js';
+import * as fs from 'fs/promises';
+import * as path from 'path';
+
+const DISCONNECTED_MARKER_FILE = '.gemini-disconnected';
+
+/**
+ * Creates handler for POST /api/setup/auth-gemini
+ * Removes the disconnection marker to allow Gemini CLI to be used
+ */
+export function createAuthGeminiHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const projectRoot = process.cwd();
+      const automakerDir = path.join(projectRoot, '.automaker');
+      const markerPath = path.join(automakerDir, DISCONNECTED_MARKER_FILE);
+
+      // Remove the disconnection marker if it exists
+      try {
+        await fs.unlink(markerPath);
+      } catch {
+        // File doesn't exist, nothing to remove
+      }
+
+      res.json({
+        success: true,
+        message: 'Gemini CLI connected to app',
+      });
+    } catch (error) {
+      logError(error, 'Auth Gemini failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/auth-opencode.ts b/temp_repo/apps/server/src/routes/setup/routes/auth-opencode.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dce314bf30483461b63851de031076b5a0bb42ba
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/auth-opencode.ts
@@ -0,0 +1,47 @@
+/**
+ * POST /auth-opencode endpoint - Authenticate OpenCode CLI
+ */
+
+import type { Request, Response } from 'express';
+import { logError, getErrorMessage } from '../common.js';
+import * as fs from 'fs';
+import * as path from 'path';
+
+export function createAuthOpencodeHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Remove the disconnected marker file to reconnect the app to the CLI
+      const markerPath = path.join(process.cwd(), '.automaker', '.opencode-disconnected');
+      if (fs.existsSync(markerPath)) {
+        fs.unlinkSync(markerPath);
+      }
+
+      // Check if OpenCode is already authenticated
+      // For OpenCode, check if there's an auth token or API key
+      const hasApiKey = !!process.env.OPENCODE_API_KEY;
+
+      if (hasApiKey) {
+        // Already has authentication, just reconnect
+        res.json({
+          success: true,
+          message: 'OpenCode CLI is now linked with the app',
+          wasAlreadyAuthenticated: true,
+        });
+      } else {
+        res.json({
+          success: true,
+          message:
+            'OpenCode CLI is now linked with the app. If prompted, please authenticate with OpenCode.',
+          requiresManualAuth: true,
+        });
+      }
+    } catch (error) {
+      logError(error, 'Auth OpenCode failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+        message: 'Failed to link OpenCode CLI with the app',
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/claude-status.ts b/temp_repo/apps/server/src/routes/setup/routes/claude-status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f2ae4a593a21c538e4c54807b81ffc1c056dbf37
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/claude-status.ts
@@ -0,0 +1,22 @@
+/**
+ * GET /claude-status endpoint - Get Claude CLI status
+ */
+
+import type { Request, Response } from 'express';
+import { getClaudeStatus } from '../get-claude-status.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createClaudeStatusHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const status = await getClaudeStatus();
+      res.json({
+        success: true,
+        ...status,
+      });
+    } catch (error) {
+      logError(error, 'Get Claude status failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/codex-status.ts b/temp_repo/apps/server/src/routes/setup/routes/codex-status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6e721e05b86dd35af81ddc644259a745276ef658
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/codex-status.ts
@@ -0,0 +1,81 @@
+/**
+ * GET /codex-status endpoint - Get Codex CLI installation and auth status
+ */
+
+import type { Request, Response } from 'express';
+import { CodexProvider } from '../../../providers/codex-provider.js';
+import { getErrorMessage, logError } from '../common.js';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const DISCONNECTED_MARKER_FILE = '.codex-disconnected';
+
+function isCodexDisconnectedFromApp(): boolean {
+  try {
+    const projectRoot = process.cwd();
+    const markerPath = path.join(projectRoot, '.automaker', DISCONNECTED_MARKER_FILE);
+    return fs.existsSync(markerPath);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Creates handler for GET /api/setup/codex-status
+ * Returns Codex CLI installation and authentication status
+ */
+export function createCodexStatusHandler() {
+  const installCommand = 'npm install -g @openai/codex';
+  const loginCommand = 'codex login';
+
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Check if user has manually disconnected from the app
+      if (isCodexDisconnectedFromApp()) {
+        res.json({
+          success: true,
+          installed: true,
+          version: null,
+          path: null,
+          auth: {
+            authenticated: false,
+            method: 'none',
+            hasApiKey: false,
+          },
+          installCommand,
+          loginCommand,
+        });
+        return;
+      }
+
+      const provider = new CodexProvider();
+      const status = await provider.detectInstallation();
+
+      // Derive auth method from authenticated status and API key presence
+      let authMethod = 'none';
+      if (status.authenticated) {
+        authMethod = status.hasApiKey ? 'api_key_env' : 'cli_authenticated';
+      }
+
+      res.json({
+        success: true,
+        installed: status.installed,
+        version: status.version || null,
+        path: status.path || null,
+        auth: {
+          authenticated: status.authenticated || false,
+          method: authMethod,
+          hasApiKey: status.hasApiKey || false,
+        },
+        installCommand,
+        loginCommand,
+      });
+    } catch (error) {
+      logError(error, 'Get Codex status failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/copilot-models.ts b/temp_repo/apps/server/src/routes/setup/routes/copilot-models.ts
new file mode 100644
index 0000000000000000000000000000000000000000..08b9eda9015a742a544eb03c9a044ffafd05b005
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/copilot-models.ts
@@ -0,0 +1,136 @@
+/**
+ * Copilot Dynamic Models API Routes
+ *
+ * Provides endpoints for:
+ * - GET /api/setup/copilot/models - Get available models (cached or refreshed)
+ * - POST /api/setup/copilot/models/refresh - Force refresh models from CLI
+ */
+
+import type { Request, Response } from 'express';
+import { CopilotProvider } from '../../../providers/copilot-provider.js';
+import { getErrorMessage, logError } from '../common.js';
+import type { ModelDefinition } from '@automaker/types';
+
+// Singleton provider instance for caching
+let providerInstance: CopilotProvider | null = null;
+
+function getProvider(): CopilotProvider {
+  if (!providerInstance) {
+    providerInstance = new CopilotProvider();
+  }
+  return providerInstance;
+}
+
+/**
+ * Response type for models endpoint
+ */
+interface ModelsResponse {
+  success: boolean;
+  models?: ModelDefinition[];
+  count?: number;
+  cached?: boolean;
+  error?: string;
+}
+
+/**
+ * Creates handler for GET /api/setup/copilot/models
+ *
+ * Returns currently available models (from cache if available).
+ * Query params:
+ * - refresh=true: Force refresh from CLI before returning
+ *
+ * Note: If cache is empty, this will trigger a refresh to get dynamic models.
+ */
+export function createGetCopilotModelsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const provider = getProvider();
+      const forceRefresh = req.query.refresh === 'true';
+
+      let models: ModelDefinition[];
+      let cached = true;
+
+      if (forceRefresh) {
+        models = await provider.refreshModels();
+        cached = false;
+      } else {
+        // Check if we have cached models
+        if (!provider.hasCachedModels()) {
+          models = await provider.refreshModels();
+          cached = false;
+        } else {
+          models = provider.getAvailableModels();
+        }
+      }
+
+      const response: ModelsResponse = {
+        success: true,
+        models,
+        count: models.length,
+        cached,
+      };
+
+      res.json(response);
+    } catch (error) {
+      logError(error, 'Get Copilot models failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      } as ModelsResponse);
+    }
+  };
+}
+
+/**
+ * Creates handler for POST /api/setup/copilot/models/refresh
+ *
+ * Forces a refresh of models from the Copilot CLI.
+ */
+export function createRefreshCopilotModelsHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const provider = getProvider();
+      const models = await provider.refreshModels();
+
+      const response: ModelsResponse = {
+        success: true,
+        models,
+        count: models.length,
+        cached: false,
+      };
+
+      res.json(response);
+    } catch (error) {
+      logError(error, 'Refresh Copilot models failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      } as ModelsResponse);
+    }
+  };
+}
+
+/**
+ * Creates handler for POST /api/setup/copilot/cache/clear
+ *
+ * Clears the model cache, forcing a fresh fetch on next access.
+ */
+export function createClearCopilotCacheHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const provider = getProvider();
+      provider.clearModelCache();
+
+      res.json({
+        success: true,
+        message: 'Copilot model cache cleared',
+      });
+    } catch (error) {
+      logError(error, 'Clear Copilot cache failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/copilot-status.ts b/temp_repo/apps/server/src/routes/setup/routes/copilot-status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c759c118ccff270efa4a9f3d1881f91f150537b3
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/copilot-status.ts
@@ -0,0 +1,78 @@
+/**
+ * GET /copilot-status endpoint - Get Copilot CLI installation and auth status
+ */
+
+import type { Request, Response } from 'express';
+import { CopilotProvider } from '../../../providers/copilot-provider.js';
+import { getErrorMessage, logError } from '../common.js';
+import * as fs from 'fs/promises';
+import * as path from 'path';
+
+const DISCONNECTED_MARKER_FILE = '.copilot-disconnected';
+
+async function isCopilotDisconnectedFromApp(): Promise<boolean> {
+  try {
+    const projectRoot = process.cwd();
+    const markerPath = path.join(projectRoot, '.automaker', DISCONNECTED_MARKER_FILE);
+    await fs.access(markerPath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Creates handler for GET /api/setup/copilot-status
+ * Returns Copilot CLI installation and authentication status
+ */
+export function createCopilotStatusHandler() {
+  const installCommand = 'npm install -g @github/copilot';
+  const loginCommand = 'gh auth login';
+
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Check if user has manually disconnected from the app
+      if (await isCopilotDisconnectedFromApp()) {
+        res.json({
+          success: true,
+          installed: true,
+          version: null,
+          path: null,
+          auth: {
+            authenticated: false,
+            method: 'none',
+          },
+          installCommand,
+          loginCommand,
+        });
+        return;
+      }
+
+      const provider = new CopilotProvider();
+      const status = await provider.detectInstallation();
+      const auth = await provider.checkAuth();
+
+      res.json({
+        success: true,
+        installed: status.installed,
+        version: status.version || null,
+        path: status.path || null,
+        auth: {
+          authenticated: auth.authenticated,
+          method: auth.method,
+          login: auth.login,
+          host: auth.host,
+          error: auth.error,
+        },
+        installCommand,
+        loginCommand,
+      });
+    } catch (error) {
+      logError(error, 'Get Copilot status failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/cursor-config.ts b/temp_repo/apps/server/src/routes/setup/routes/cursor-config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8b9c05ceee9c7dd63a77f75e085c22a2563c775f
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/cursor-config.ts
@@ -0,0 +1,411 @@
+/**
+ * Cursor CLI configuration routes
+ *
+ * Provides endpoints for managing Cursor CLI configuration:
+ * - GET /api/setup/cursor-config - Get current configuration
+ * - POST /api/setup/cursor-config/default-model - Set default model
+ * - POST /api/setup/cursor-config/models - Set enabled models
+ *
+ * Cursor CLI Permissions endpoints:
+ * - GET /api/setup/cursor-permissions - Get permissions config
+ * - POST /api/setup/cursor-permissions/profile - Apply a permission profile
+ * - POST /api/setup/cursor-permissions/custom - Set custom permissions
+ * - DELETE /api/setup/cursor-permissions - Delete project permissions (use global)
+ */
+
+import type { Request, Response } from 'express';
+import path from 'path';
+import { CursorConfigManager } from '../../../providers/cursor-config-manager.js';
+import {
+  CURSOR_MODEL_MAP,
+  CURSOR_PERMISSION_PROFILES,
+  type CursorModelId,
+  type CursorPermissionProfile,
+  type CursorCliPermissions,
+} from '@automaker/types';
+import {
+  readGlobalConfig,
+  readProjectConfig,
+  getEffectivePermissions,
+  applyProfileToProject,
+  applyProfileGlobally,
+  writeProjectConfig,
+  deleteProjectConfig,
+  detectProfile,
+  hasProjectConfig,
+  getAvailableProfiles,
+  generateExampleConfig,
+} from '../../../services/cursor-config-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+/**
+ * Validate that a project path is safe (no path traversal)
+ * @throws Error if path contains traversal sequences
+ */
+function validateProjectPath(projectPath: string): void {
+  // Resolve to absolute path and check for traversal
+  const resolved = path.resolve(projectPath);
+  const normalized = path.normalize(projectPath);
+
+  // Check for obvious traversal attempts
+  if (normalized.includes('..') || projectPath.includes('..')) {
+    throw new Error('Invalid project path: path traversal not allowed');
+  }
+
+  // Ensure the resolved path doesn't escape intended boundaries
+  // by checking if it starts with the normalized path components
+  if (!resolved.startsWith(path.resolve(normalized))) {
+    throw new Error('Invalid project path: path traversal detected');
+  }
+}
+
+/**
+ * Creates handler for GET /api/setup/cursor-config
+ * Returns current Cursor configuration and available models
+ */
+export function createGetCursorConfigHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const projectPath = req.query.projectPath as string;
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath query parameter is required',
+        });
+        return;
+      }
+
+      // Validate path to prevent traversal attacks
+      validateProjectPath(projectPath);
+
+      const configManager = new CursorConfigManager(projectPath);
+
+      res.json({
+        success: true,
+        config: configManager.getConfig(),
+        availableModels: Object.values(CURSOR_MODEL_MAP),
+      });
+    } catch (error) {
+      logError(error, 'Get Cursor config failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
+
+/**
+ * Creates handler for POST /api/setup/cursor-config/default-model
+ * Sets the default Cursor model
+ */
+export function createSetCursorDefaultModelHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { model, projectPath } = req.body;
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      // Validate path to prevent traversal attacks
+      validateProjectPath(projectPath);
+
+      if (!model || !(model in CURSOR_MODEL_MAP)) {
+        res.status(400).json({
+          success: false,
+          error: `Invalid model ID. Valid models: ${Object.keys(CURSOR_MODEL_MAP).join(', ')}`,
+        });
+        return;
+      }
+
+      const configManager = new CursorConfigManager(projectPath);
+      configManager.setDefaultModel(model as CursorModelId);
+
+      res.json({ success: true, model });
+    } catch (error) {
+      logError(error, 'Set Cursor default model failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
+
+/**
+ * Creates handler for POST /api/setup/cursor-config/models
+ * Sets the enabled Cursor models list
+ */
+export function createSetCursorModelsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { models, projectPath } = req.body;
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      // Validate path to prevent traversal attacks
+      validateProjectPath(projectPath);
+
+      if (!Array.isArray(models)) {
+        res.status(400).json({
+          success: false,
+          error: 'Models must be an array',
+        });
+        return;
+      }
+
+      // Filter to valid models only
+      const validModels = models.filter((m): m is CursorModelId => m in CURSOR_MODEL_MAP);
+
+      if (validModels.length === 0) {
+        res.status(400).json({
+          success: false,
+          error: 'No valid models provided',
+        });
+        return;
+      }
+
+      const configManager = new CursorConfigManager(projectPath);
+      configManager.setEnabledModels(validModels);
+
+      res.json({ success: true, models: validModels });
+    } catch (error) {
+      logError(error, 'Set Cursor models failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
+
+// =============================================================================
+// Cursor CLI Permissions Handlers
+// =============================================================================
+
+/**
+ * Creates handler for GET /api/setup/cursor-permissions
+ * Returns current permissions configuration and available profiles
+ */
+export function createGetCursorPermissionsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const projectPath = req.query.projectPath as string | undefined;
+
+      // Validate path if provided
+      if (projectPath) {
+        validateProjectPath(projectPath);
+      }
+
+      // Get global config
+      const globalConfig = await readGlobalConfig();
+
+      // Get project config if path provided
+      const projectConfig = projectPath ? await readProjectConfig(projectPath) : null;
+
+      // Get effective permissions
+      const effectivePermissions = await getEffectivePermissions(projectPath);
+
+      // Detect which profile is active
+      const activeProfile = detectProfile(effectivePermissions);
+
+      // Check if project has its own config
+      const hasProject = projectPath ? await hasProjectConfig(projectPath) : false;
+
+      res.json({
+        success: true,
+        globalPermissions: globalConfig?.permissions || null,
+        projectPermissions: projectConfig?.permissions || null,
+        effectivePermissions,
+        activeProfile,
+        hasProjectConfig: hasProject,
+        availableProfiles: getAvailableProfiles(),
+      });
+    } catch (error) {
+      logError(error, 'Get Cursor permissions failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
+
+/**
+ * Creates handler for POST /api/setup/cursor-permissions/profile
+ * Applies a predefined permission profile
+ */
+export function createApplyPermissionProfileHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { profileId, projectPath, scope } = req.body as {
+        profileId: CursorPermissionProfile;
+        projectPath?: string;
+        scope: 'global' | 'project';
+      };
+
+      // Validate profile
+      const validProfiles = CURSOR_PERMISSION_PROFILES.map((p) => p.id);
+      if (!validProfiles.includes(profileId)) {
+        res.status(400).json({
+          success: false,
+          error: `Invalid profile. Valid profiles: ${validProfiles.join(', ')}`,
+        });
+        return;
+      }
+
+      if (scope === 'project') {
+        if (!projectPath) {
+          res.status(400).json({
+            success: false,
+            error: 'projectPath is required for project scope',
+          });
+          return;
+        }
+        // Validate path to prevent traversal attacks
+        validateProjectPath(projectPath);
+        await applyProfileToProject(projectPath, profileId);
+      } else {
+        await applyProfileGlobally(profileId);
+      }
+
+      res.json({
+        success: true,
+        message: `Applied "${profileId}" profile to ${scope}`,
+        scope,
+        profileId,
+      });
+    } catch (error) {
+      logError(error, 'Apply Cursor permission profile failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
+
+/**
+ * Creates handler for POST /api/setup/cursor-permissions/custom
+ * Sets custom permissions for a project
+ */
+export function createSetCustomPermissionsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, permissions } = req.body as {
+        projectPath: string;
+        permissions: CursorCliPermissions;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      // Validate path to prevent traversal attacks
+      validateProjectPath(projectPath);
+
+      if (!permissions || !Array.isArray(permissions.allow) || !Array.isArray(permissions.deny)) {
+        res.status(400).json({
+          success: false,
+          error: 'permissions must have allow and deny arrays',
+        });
+        return;
+      }
+
+      await writeProjectConfig(projectPath, {
+        version: 1,
+        permissions,
+      });
+
+      res.json({
+        success: true,
+        message: 'Custom permissions saved',
+        permissions,
+      });
+    } catch (error) {
+      logError(error, 'Set custom Cursor permissions failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
+
+/**
+ * Creates handler for DELETE /api/setup/cursor-permissions
+ * Deletes project-level permissions (falls back to global)
+ */
+export function createDeleteProjectPermissionsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const projectPath = req.query.projectPath as string;
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath query parameter is required',
+        });
+        return;
+      }
+
+      // Validate path to prevent traversal attacks
+      validateProjectPath(projectPath);
+
+      await deleteProjectConfig(projectPath);
+
+      res.json({
+        success: true,
+        message: 'Project permissions deleted, using global config',
+      });
+    } catch (error) {
+      logError(error, 'Delete Cursor project permissions failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
+
+/**
+ * Creates handler for GET /api/setup/cursor-permissions/example
+ * Returns an example config file for a profile
+ */
+export function createGetExampleConfigHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const profileId = (req.query.profileId as CursorPermissionProfile) || 'development';
+
+      const exampleConfig = generateExampleConfig(profileId);
+
+      res.json({
+        success: true,
+        profileId,
+        config: exampleConfig,
+      });
+    } catch (error) {
+      logError(error, 'Get example Cursor config failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/cursor-status.ts b/temp_repo/apps/server/src/routes/setup/routes/cursor-status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f9349aa7903e91998304acef04b1c6692e4499fb
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/cursor-status.ts
@@ -0,0 +1,88 @@
+/**
+ * GET /cursor-status endpoint - Get Cursor CLI installation and auth status
+ */
+
+import type { Request, Response } from 'express';
+import { CursorProvider } from '../../../providers/cursor-provider.js';
+import { getErrorMessage, logError } from '../common.js';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const DISCONNECTED_MARKER_FILE = '.cursor-disconnected';
+
+function isCursorDisconnectedFromApp(): boolean {
+  try {
+    const projectRoot = process.cwd();
+    const markerPath = path.join(projectRoot, '.automaker', DISCONNECTED_MARKER_FILE);
+    return fs.existsSync(markerPath);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Creates handler for GET /api/setup/cursor-status
+ * Returns Cursor CLI installation and authentication status
+ */
+export function createCursorStatusHandler() {
+  const installCommand = 'curl https://cursor.com/install -fsS | bash';
+  const loginCommand = 'cursor-agent login';
+
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Check if user has manually disconnected from the app
+      if (isCursorDisconnectedFromApp()) {
+        const provider = new CursorProvider();
+        const [installed, version] = await Promise.all([
+          provider.isInstalled(),
+          provider.getVersion(),
+        ]);
+        const cliPath = installed ? provider.getCliPath() : null;
+
+        res.json({
+          success: true,
+          installed,
+          version: version || null,
+          path: cliPath,
+          auth: {
+            authenticated: false,
+            method: 'none',
+          },
+          installCommand,
+          loginCommand,
+        });
+        return;
+      }
+
+      const provider = new CursorProvider();
+
+      const [installed, version, auth] = await Promise.all([
+        provider.isInstalled(),
+        provider.getVersion(),
+        provider.checkAuth(),
+      ]);
+
+      // Get CLI path from provider using public accessor
+      const cliPath = installed ? provider.getCliPath() : null;
+
+      res.json({
+        success: true,
+        installed,
+        version: version || null,
+        path: cliPath,
+        auth: {
+          authenticated: auth.authenticated,
+          method: auth.method,
+        },
+        installCommand,
+        loginCommand,
+      });
+    } catch (error) {
+      logError(error, 'Get Cursor status failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/deauth-claude.ts b/temp_repo/apps/server/src/routes/setup/routes/deauth-claude.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8f3c193085531683db25da4f61e87cdc54920360
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/deauth-claude.ts
@@ -0,0 +1,44 @@
+/**
+ * POST /deauth-claude endpoint - Sign out from Claude CLI
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from '../common.js';
+import * as fs from 'fs';
+import * as path from 'path';
+
+export function createDeauthClaudeHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Create a marker file to indicate the CLI is disconnected from the app
+      const automakerDir = path.join(process.cwd(), '.automaker');
+      const markerPath = path.join(automakerDir, '.claude-disconnected');
+
+      // Ensure .automaker directory exists
+      if (!fs.existsSync(automakerDir)) {
+        fs.mkdirSync(automakerDir, { recursive: true });
+      }
+
+      // Create the marker file with timestamp
+      fs.writeFileSync(
+        markerPath,
+        JSON.stringify({
+          disconnectedAt: new Date().toISOString(),
+          message: 'Claude CLI is disconnected from the app',
+        })
+      );
+
+      res.json({
+        success: true,
+        message: 'Claude CLI is now disconnected from the app',
+      });
+    } catch (error) {
+      logError(error, 'Deauth Claude failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+        message: 'Failed to disconnect Claude CLI from the app',
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/deauth-codex.ts b/temp_repo/apps/server/src/routes/setup/routes/deauth-codex.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f44a6e150c9e68ca88c78195707dd904ccc22101
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/deauth-codex.ts
@@ -0,0 +1,44 @@
+/**
+ * POST /deauth-codex endpoint - Sign out from Codex CLI
+ */
+
+import type { Request, Response } from 'express';
+import { logError, getErrorMessage } from '../common.js';
+import * as fs from 'fs';
+import * as path from 'path';
+
+export function createDeauthCodexHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Create a marker file to indicate the CLI is disconnected from the app
+      const automakerDir = path.join(process.cwd(), '.automaker');
+      const markerPath = path.join(automakerDir, '.codex-disconnected');
+
+      // Ensure .automaker directory exists
+      if (!fs.existsSync(automakerDir)) {
+        fs.mkdirSync(automakerDir, { recursive: true });
+      }
+
+      // Create the marker file with timestamp
+      fs.writeFileSync(
+        markerPath,
+        JSON.stringify({
+          disconnectedAt: new Date().toISOString(),
+          message: 'Codex CLI is disconnected from the app',
+        })
+      );
+
+      res.json({
+        success: true,
+        message: 'Codex CLI is now disconnected from the app',
+      });
+    } catch (error) {
+      logError(error, 'Deauth Codex failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+        message: 'Failed to disconnect Codex CLI from the app',
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/deauth-copilot.ts b/temp_repo/apps/server/src/routes/setup/routes/deauth-copilot.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a5420315c565678fffe62e98f328de9f06196807
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/deauth-copilot.ts
@@ -0,0 +1,30 @@
+/**
+ * POST /deauth-copilot endpoint - Disconnect Copilot CLI from the app
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from '../common.js';
+import { disconnectCopilot } from '../../../services/copilot-connection-service.js';
+
+/**
+ * Creates handler for POST /api/setup/deauth-copilot
+ * Creates a marker file to disconnect Copilot CLI from the app
+ */
+export function createDeauthCopilotHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      await disconnectCopilot();
+
+      res.json({
+        success: true,
+        message: 'Copilot CLI disconnected from app',
+      });
+    } catch (error) {
+      logError(error, 'Deauth Copilot failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/deauth-cursor.ts b/temp_repo/apps/server/src/routes/setup/routes/deauth-cursor.ts
new file mode 100644
index 0000000000000000000000000000000000000000..303b200602aa9754b65b9cfde0959e0d1e00095a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/deauth-cursor.ts
@@ -0,0 +1,44 @@
+/**
+ * POST /deauth-cursor endpoint - Sign out from Cursor CLI
+ */
+
+import type { Request, Response } from 'express';
+import { logError, getErrorMessage } from '../common.js';
+import * as fs from 'fs';
+import * as path from 'path';
+
+export function createDeauthCursorHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Create a marker file to indicate the CLI is disconnected from the app
+      const automakerDir = path.join(process.cwd(), '.automaker');
+      const markerPath = path.join(automakerDir, '.cursor-disconnected');
+
+      // Ensure .automaker directory exists
+      if (!fs.existsSync(automakerDir)) {
+        fs.mkdirSync(automakerDir, { recursive: true });
+      }
+
+      // Create the marker file with timestamp
+      fs.writeFileSync(
+        markerPath,
+        JSON.stringify({
+          disconnectedAt: new Date().toISOString(),
+          message: 'Cursor CLI is disconnected from the app',
+        })
+      );
+
+      res.json({
+        success: true,
+        message: 'Cursor CLI is now disconnected from the app',
+      });
+    } catch (error) {
+      logError(error, 'Deauth Cursor failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+        message: 'Failed to disconnect Cursor CLI from the app',
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/deauth-gemini.ts b/temp_repo/apps/server/src/routes/setup/routes/deauth-gemini.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d5b08a0a7bfd49e0afc94c812a811d791c73a3a4
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/deauth-gemini.ts
@@ -0,0 +1,42 @@
+/**
+ * POST /deauth-gemini endpoint - Disconnect Gemini CLI from the app
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from '../common.js';
+import * as fs from 'fs/promises';
+import * as path from 'path';
+
+const DISCONNECTED_MARKER_FILE = '.gemini-disconnected';
+
+/**
+ * Creates handler for POST /api/setup/deauth-gemini
+ * Creates a marker file to disconnect Gemini CLI from the app
+ */
+export function createDeauthGeminiHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const projectRoot = process.cwd();
+      const automakerDir = path.join(projectRoot, '.automaker');
+
+      // Ensure .automaker directory exists
+      await fs.mkdir(automakerDir, { recursive: true });
+
+      const markerPath = path.join(automakerDir, DISCONNECTED_MARKER_FILE);
+
+      // Create the disconnection marker
+      await fs.writeFile(markerPath, 'Gemini CLI disconnected from app');
+
+      res.json({
+        success: true,
+        message: 'Gemini CLI disconnected from app',
+      });
+    } catch (error) {
+      logError(error, 'Deauth Gemini failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/deauth-opencode.ts b/temp_repo/apps/server/src/routes/setup/routes/deauth-opencode.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b0567bc894c37e79b780facee61e7e1b07e09c72
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/deauth-opencode.ts
@@ -0,0 +1,40 @@
+import type { Request, Response } from 'express';
+import { logError, getErrorMessage } from '../common.js';
+import * as fs from 'fs';
+import * as path from 'path';
+
+export function createDeauthOpencodeHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Create a marker file to indicate the CLI is disconnected from the app
+      const automakerDir = path.join(process.cwd(), '.automaker');
+      const markerPath = path.join(automakerDir, '.opencode-disconnected');
+
+      // Ensure .automaker directory exists
+      if (!fs.existsSync(automakerDir)) {
+        fs.mkdirSync(automakerDir, { recursive: true });
+      }
+
+      // Create the marker file with timestamp
+      fs.writeFileSync(
+        markerPath,
+        JSON.stringify({
+          disconnectedAt: new Date().toISOString(),
+          message: 'OpenCode CLI is disconnected from the app',
+        })
+      );
+
+      res.json({
+        success: true,
+        message: 'OpenCode CLI is now disconnected from the app',
+      });
+    } catch (error) {
+      logError(error, 'Deauth OpenCode failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+        message: 'Failed to disconnect OpenCode CLI from the app',
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/delete-api-key.ts b/temp_repo/apps/server/src/routes/setup/routes/delete-api-key.ts
new file mode 100644
index 0000000000000000000000000000000000000000..242425fbfab8f74cd67476b052ddbc9c48ea2d91
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/delete-api-key.ts
@@ -0,0 +1,84 @@
+/**
+ * POST /delete-api-key endpoint - Delete a stored API key
+ */
+
+import type { Request, Response } from 'express';
+import { createLogger } from '@automaker/utils';
+import path from 'path';
+import { secureFs } from '@automaker/platform';
+
+const logger = createLogger('Setup');
+
+// In-memory storage reference (imported from common.ts pattern)
+import { setApiKey } from '../common.js';
+
+/**
+ * Remove an API key from the .env file
+ * Uses centralized secureFs.removeEnvKey for path validation
+ */
+async function removeApiKeyFromEnv(key: string): Promise<void> {
+  const envPath = path.join(process.cwd(), '.env');
+
+  try {
+    await secureFs.removeEnvKey(envPath, key);
+    logger.info(`[Setup] Removed ${key} from .env file`);
+  } catch (error) {
+    logger.error(`[Setup] Failed to remove ${key} from .env:`, error);
+    throw error;
+  }
+}
+
+export function createDeleteApiKeyHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { provider } = req.body as { provider: string };
+
+      if (!provider) {
+        res.status(400).json({
+          success: false,
+          error: 'Provider is required',
+        });
+        return;
+      }
+
+      logger.info(`[Setup] Deleting API key for provider: ${provider}`);
+
+      // Map provider to env key name
+      const envKeyMap: Record<string, string> = {
+        anthropic: 'ANTHROPIC_API_KEY',
+        openai: 'OPENAI_API_KEY',
+      };
+
+      const envKey = envKeyMap[provider];
+      if (!envKey) {
+        res.status(400).json({
+          success: false,
+          error: `Unknown provider: ${provider}. Only anthropic and openai are supported.`,
+        });
+        return;
+      }
+
+      // Clear from in-memory storage
+      setApiKey(provider, '');
+
+      // Remove from environment
+      delete process.env[envKey];
+
+      // Remove from .env file
+      await removeApiKeyFromEnv(envKey);
+
+      logger.info(`[Setup] Successfully deleted API key for ${provider}`);
+
+      res.json({
+        success: true,
+        message: `API key for ${provider} has been deleted`,
+      });
+    } catch (error) {
+      logger.error('[Setup] Delete API key error:', error);
+      res.status(500).json({
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to delete API key',
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/gemini-status.ts b/temp_repo/apps/server/src/routes/setup/routes/gemini-status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ec4fbee4a25c9fccaf08a240fd7da5e676c9e1cc
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/gemini-status.ts
@@ -0,0 +1,79 @@
+/**
+ * GET /gemini-status endpoint - Get Gemini CLI installation and auth status
+ */
+
+import type { Request, Response } from 'express';
+import { GeminiProvider } from '../../../providers/gemini-provider.js';
+import { getErrorMessage, logError } from '../common.js';
+import * as fs from 'fs/promises';
+import * as path from 'path';
+
+const DISCONNECTED_MARKER_FILE = '.gemini-disconnected';
+
+async function isGeminiDisconnectedFromApp(): Promise<boolean> {
+  try {
+    const projectRoot = process.cwd();
+    const markerPath = path.join(projectRoot, '.automaker', DISCONNECTED_MARKER_FILE);
+    await fs.access(markerPath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Creates handler for GET /api/setup/gemini-status
+ * Returns Gemini CLI installation and authentication status
+ */
+export function createGeminiStatusHandler() {
+  const installCommand = 'npm install -g @google/gemini-cli';
+  const loginCommand = 'gemini';
+
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Check if user has manually disconnected from the app
+      if (await isGeminiDisconnectedFromApp()) {
+        res.json({
+          success: true,
+          installed: true,
+          version: null,
+          path: null,
+          auth: {
+            authenticated: false,
+            method: 'none',
+            hasApiKey: false,
+          },
+          installCommand,
+          loginCommand,
+        });
+        return;
+      }
+
+      const provider = new GeminiProvider();
+      const status = await provider.detectInstallation();
+      const auth = await provider.checkAuth();
+
+      res.json({
+        success: true,
+        installed: status.installed,
+        version: status.version || null,
+        path: status.path || null,
+        auth: {
+          authenticated: auth.authenticated,
+          method: auth.method,
+          hasApiKey: auth.hasApiKey || false,
+          hasEnvApiKey: auth.hasEnvApiKey || false,
+          error: auth.error,
+        },
+        installCommand,
+        loginCommand,
+      });
+    } catch (error) {
+      logError(error, 'Get Gemini status failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/gh-status.ts b/temp_repo/apps/server/src/routes/setup/routes/gh-status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f78bbd6d1859be8a8f3d1fbf1793437893d18a60
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/gh-status.ts
@@ -0,0 +1,126 @@
+/**
+ * GET /gh-status endpoint - Get GitHub CLI status
+ */
+
+import type { Request, Response } from 'express';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { getGitHubCliPaths, getExtendedPath, systemPathAccess } from '@automaker/platform';
+import { getErrorMessage, logError } from '../common.js';
+
+const execAsync = promisify(exec);
+
+const execEnv = {
+  ...process.env,
+  PATH: getExtendedPath(),
+};
+
+export interface GhStatus {
+  installed: boolean;
+  authenticated: boolean;
+  version: string | null;
+  path: string | null;
+  user: string | null;
+  error?: string;
+}
+
+async function getGhStatus(): Promise<GhStatus> {
+  const status: GhStatus = {
+    installed: false,
+    authenticated: false,
+    version: null,
+    path: null,
+    user: null,
+  };
+
+  const isWindows = process.platform === 'win32';
+
+  // Check if gh CLI is installed
+  try {
+    const findCommand = isWindows ? 'where gh' : 'command -v gh';
+    const { stdout } = await execAsync(findCommand, { env: execEnv });
+    status.path = stdout.trim().split(/\r?\n/)[0];
+    status.installed = true;
+  } catch {
+    // gh not in PATH, try common locations from centralized system paths
+    const commonPaths = getGitHubCliPaths();
+
+    for (const p of commonPaths) {
+      try {
+        if (await systemPathAccess(p)) {
+          status.path = p;
+          status.installed = true;
+          break;
+        }
+      } catch {
+        // Not found at this path
+      }
+    }
+  }
+
+  if (!status.installed) {
+    return status;
+  }
+
+  // Get version
+  try {
+    const { stdout } = await execAsync('gh --version', { env: execEnv });
+    // Extract version from output like "gh version 2.40.1 (2024-01-09)"
+    const versionMatch = stdout.match(/gh version ([\d.]+)/);
+    status.version = versionMatch ? versionMatch[1] : stdout.trim().split('\n')[0];
+  } catch {
+    // Version command failed
+  }
+
+  // Check authentication status by actually making an API call
+  // gh auth status can return non-zero even when GH_TOKEN is valid
+  let apiCallSucceeded = false;
+  try {
+    const { stdout } = await execAsync('gh api user --jq ".login"', { env: execEnv });
+    const user = stdout.trim();
+    if (user) {
+      status.authenticated = true;
+      status.user = user;
+      apiCallSucceeded = true;
+    }
+    // If stdout is empty, fall through to gh auth status fallback
+  } catch {
+    // API call failed - fall through to gh auth status fallback
+  }
+
+  // Fallback: try gh auth status if API call didn't succeed
+  if (!apiCallSucceeded) {
+    try {
+      const { stdout } = await execAsync('gh auth status', { env: execEnv });
+      status.authenticated = true;
+
+      // Try to extract username from output
+      const userMatch =
+        stdout.match(/Logged in to [^\s]+ account ([^\s]+)/i) ||
+        stdout.match(/Logged in to [^\s]+ as ([^\s]+)/i);
+      if (userMatch) {
+        status.user = userMatch[1];
+      }
+    } catch {
+      // Auth status returns non-zero if not authenticated
+      status.authenticated = false;
+    }
+  }
+
+  return status;
+}
+
+export function createGhStatusHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const status = await getGhStatus();
+      res.json({
+        success: true,
+        ...status,
+      });
+    } catch (error) {
+      logError(error, 'Get GitHub CLI status failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/install-claude.ts b/temp_repo/apps/server/src/routes/setup/routes/install-claude.ts
new file mode 100644
index 0000000000000000000000000000000000000000..644f5e10f9a526f54d8ce7d723e8871e01fe8064
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/install-claude.ts
@@ -0,0 +1,23 @@
+/**
+ * POST /install-claude endpoint - Install Claude CLI
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createInstallClaudeHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // In web mode, we can't install CLIs directly
+      // Return instructions instead
+      res.json({
+        success: false,
+        error:
+          'CLI installation requires terminal access. Please install manually using: npm install -g @anthropic-ai/claude-code',
+      });
+    } catch (error) {
+      logError(error, 'Install Claude CLI failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/install-codex.ts b/temp_repo/apps/server/src/routes/setup/routes/install-codex.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ea40e92dcbee797d942cc650a048937d01d17083
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/install-codex.ts
@@ -0,0 +1,33 @@
+/**
+ * POST /install-codex endpoint - Install Codex CLI
+ */
+
+import type { Request, Response } from 'express';
+import { logError, getErrorMessage } from '../common.js';
+
+/**
+ * Creates handler for POST /api/setup/install-codex
+ * Installs Codex CLI (currently returns instructions for manual install)
+ */
+export function createInstallCodexHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // For now, return manual installation instructions
+      // In the future, this could potentially trigger npm global install
+      const installCommand = 'npm install -g @openai/codex';
+
+      res.json({
+        success: true,
+        message: `Please install Codex CLI manually by running: ${installCommand}`,
+        requiresManualInstall: true,
+        installCommand,
+      });
+    } catch (error) {
+      logError(error, 'Install Codex failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/opencode-models.ts b/temp_repo/apps/server/src/routes/setup/routes/opencode-models.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e7909bf99e45c2670d769b63b1b347a825510776
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/opencode-models.ts
@@ -0,0 +1,186 @@
+/**
+ * OpenCode Dynamic Models API Routes
+ *
+ * Provides endpoints for:
+ * - GET /api/setup/opencode/models - Get available models (cached or refreshed)
+ * - POST /api/setup/opencode/models/refresh - Force refresh models from CLI
+ * - GET /api/setup/opencode/providers - Get authenticated providers
+ */
+
+import type { Request, Response } from 'express';
+import {
+  OpencodeProvider,
+  type OpenCodeProviderInfo,
+} from '../../../providers/opencode-provider.js';
+import { getErrorMessage, logError } from '../common.js';
+import type { ModelDefinition } from '@automaker/types';
+
+// Singleton provider instance for caching
+let providerInstance: OpencodeProvider | null = null;
+
+function getProvider(): OpencodeProvider {
+  if (!providerInstance) {
+    providerInstance = new OpencodeProvider();
+  }
+  return providerInstance;
+}
+
+/**
+ * Response type for models endpoint
+ */
+interface ModelsResponse {
+  success: boolean;
+  models?: ModelDefinition[];
+  count?: number;
+  cached?: boolean;
+  error?: string;
+}
+
+/**
+ * Response type for providers endpoint
+ */
+interface ProvidersResponse {
+  success: boolean;
+  providers?: OpenCodeProviderInfo[];
+  authenticated?: OpenCodeProviderInfo[];
+  error?: string;
+}
+
+/**
+ * Creates handler for GET /api/setup/opencode/models
+ *
+ * Returns currently available models (from cache if available).
+ * Query params:
+ * - refresh=true: Force refresh from CLI before returning
+ *
+ * Note: If cache is empty, this will trigger a refresh to get dynamic models.
+ */
+export function createGetOpencodeModelsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const provider = getProvider();
+      const forceRefresh = req.query.refresh === 'true';
+
+      let models: ModelDefinition[];
+      let cached = true;
+
+      if (forceRefresh) {
+        models = await provider.refreshModels();
+        cached = false;
+      } else {
+        // Check if we have cached models
+        const cachedModels = provider.getAvailableModels();
+
+        // If cache only has default models (provider.hasCachedModels() would be false),
+        // trigger a refresh to get dynamic models
+        if (!provider.hasCachedModels()) {
+          models = await provider.refreshModels();
+          cached = false;
+        } else {
+          models = cachedModels;
+        }
+      }
+
+      const response: ModelsResponse = {
+        success: true,
+        models,
+        count: models.length,
+        cached,
+      };
+
+      res.json(response);
+    } catch (error) {
+      logError(error, 'Get OpenCode models failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      } as ModelsResponse);
+    }
+  };
+}
+
+/**
+ * Creates handler for POST /api/setup/opencode/models/refresh
+ *
+ * Forces a refresh of models from the OpenCode CLI.
+ */
+export function createRefreshOpencodeModelsHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const provider = getProvider();
+      const models = await provider.refreshModels();
+
+      const response: ModelsResponse = {
+        success: true,
+        models,
+        count: models.length,
+        cached: false,
+      };
+
+      res.json(response);
+    } catch (error) {
+      logError(error, 'Refresh OpenCode models failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      } as ModelsResponse);
+    }
+  };
+}
+
+/**
+ * Creates handler for GET /api/setup/opencode/providers
+ *
+ * Returns authenticated providers from OpenCode CLI.
+ * This calls `opencode auth list` to get provider status.
+ */
+export function createGetOpencodeProvidersHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const provider = getProvider();
+      const providers = await provider.fetchAuthenticatedProviders();
+
+      // Filter to only authenticated providers
+      const authenticated = providers.filter((p) => p.authenticated);
+
+      const response: ProvidersResponse = {
+        success: true,
+        providers,
+        authenticated,
+      };
+
+      res.json(response);
+    } catch (error) {
+      logError(error, 'Get OpenCode providers failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      } as ProvidersResponse);
+    }
+  };
+}
+
+/**
+ * Creates handler for POST /api/setup/opencode/cache/clear
+ *
+ * Clears the model cache, forcing a fresh fetch on next access.
+ */
+export function createClearOpencodeCacheHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const provider = getProvider();
+      provider.clearModelCache();
+
+      res.json({
+        success: true,
+        message: 'OpenCode model cache cleared',
+      });
+    } catch (error) {
+      logError(error, 'Clear OpenCode cache failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/opencode-status.ts b/temp_repo/apps/server/src/routes/setup/routes/opencode-status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f474cfb18584a4f42e4cafd27b4cf90d8e590ea6
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/opencode-status.ts
@@ -0,0 +1,59 @@
+/**
+ * GET /opencode-status endpoint - Get OpenCode CLI installation and auth status
+ */
+
+import type { Request, Response } from 'express';
+import { OpencodeProvider } from '../../../providers/opencode-provider.js';
+import { getErrorMessage, logError } from '../common.js';
+
+/**
+ * Creates handler for GET /api/setup/opencode-status
+ * Returns OpenCode CLI installation and authentication status
+ */
+export function createOpencodeStatusHandler() {
+  const installCommand = 'curl -fsSL https://opencode.ai/install | bash';
+  const loginCommand = 'opencode auth login';
+
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const provider = new OpencodeProvider();
+      const status = await provider.detectInstallation();
+
+      // Derive auth method from authenticated status and API key presence
+      let authMethod = 'none';
+      if (status.authenticated) {
+        authMethod = status.hasApiKey ? 'api_key_env' : 'cli_authenticated';
+      }
+
+      res.json({
+        success: true,
+        installed: status.installed,
+        version: status.version || null,
+        path: status.path || null,
+        auth: {
+          authenticated: status.authenticated || false,
+          method: authMethod,
+          hasApiKey: status.hasApiKey || false,
+          hasEnvApiKey: !!process.env.ANTHROPIC_API_KEY || !!process.env.OPENAI_API_KEY,
+          hasOAuthToken: status.hasOAuthToken || false,
+        },
+        recommendation: status.installed
+          ? undefined
+          : 'Install OpenCode CLI to use multi-provider AI models.',
+        installCommand,
+        loginCommand,
+        installCommands: {
+          macos: installCommand,
+          linux: installCommand,
+          npm: 'npm install -g opencode-ai',
+        },
+      });
+    } catch (error) {
+      logError(error, 'Get OpenCode status failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/platform.ts b/temp_repo/apps/server/src/routes/setup/routes/platform.ts
new file mode 100644
index 0000000000000000000000000000000000000000..303cdd8772e2c1428aac0f9de5772ed6c722aaca
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/platform.ts
@@ -0,0 +1,27 @@
+/**
+ * GET /platform endpoint - Get platform info
+ */
+
+import type { Request, Response } from 'express';
+import os from 'os';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createPlatformHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const platform = os.platform();
+      res.json({
+        success: true,
+        platform,
+        arch: os.arch(),
+        homeDir: os.homedir(),
+        isWindows: platform === 'win32',
+        isMac: platform === 'darwin',
+        isLinux: platform === 'linux',
+      });
+    } catch (error) {
+      logError(error, 'Get platform info failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/store-api-key.ts b/temp_repo/apps/server/src/routes/setup/routes/store-api-key.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eae2e430bfeec08ba8eb1b5de42e34fe7540f6b9
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/store-api-key.ts
@@ -0,0 +1,49 @@
+/**
+ * POST /store-api-key endpoint - Store API key
+ */
+
+import type { Request, Response } from 'express';
+import { setApiKey, persistApiKeyToEnv, getErrorMessage, logError } from '../common.js';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('Setup');
+
+export function createStoreApiKeyHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { provider, apiKey } = req.body as {
+        provider: string;
+        apiKey: string;
+      };
+
+      if (!provider || !apiKey) {
+        res.status(400).json({ success: false, error: 'provider and apiKey required' });
+        return;
+      }
+
+      const providerEnvMap: Record<string, string> = {
+        anthropic: 'ANTHROPIC_API_KEY',
+        anthropic_oauth_token: 'ANTHROPIC_API_KEY',
+        openai: 'OPENAI_API_KEY',
+      };
+      const envKey = providerEnvMap[provider];
+      if (!envKey) {
+        res.status(400).json({
+          success: false,
+          error: `Unsupported provider: ${provider}. Only anthropic and openai are supported.`,
+        });
+        return;
+      }
+
+      setApiKey(provider, apiKey);
+      process.env[envKey] = apiKey;
+      await persistApiKeyToEnv(envKey, apiKey);
+      logger.info(`[Setup] Stored API key as ${envKey}`);
+
+      res.json({ success: true });
+    } catch (error) {
+      logError(error, 'Store API key failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/verify-claude-auth.ts b/temp_repo/apps/server/src/routes/setup/routes/verify-claude-auth.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c5a3546750ccc3d75df47c21a547d5907b09883c
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/verify-claude-auth.ts
@@ -0,0 +1,368 @@
+/**
+ * POST /verify-claude-auth endpoint - Verify Claude authentication by running a test query
+ * Supports verifying either CLI auth or API key auth independently
+ */
+
+import type { Request, Response } from 'express';
+import { query } from '@anthropic-ai/claude-agent-sdk';
+import { createLogger } from '@automaker/utils';
+import { getClaudeAuthIndicators } from '@automaker/platform';
+import { getApiKey } from '../common.js';
+import {
+  createSecureAuthEnv,
+  AuthSessionManager,
+  AuthRateLimiter,
+  validateApiKey,
+  createTempEnvOverride,
+} from '../../../lib/auth-utils.js';
+
+const logger = createLogger('Setup');
+const rateLimiter = new AuthRateLimiter();
+
+// Known error patterns that indicate auth failure
+const AUTH_ERROR_PATTERNS = [
+  'OAuth token revoked',
+  'Please run /login',
+  'please run /login',
+  'token revoked',
+  'invalid_api_key',
+  'authentication_error',
+  'unauthorized',
+  'not authenticated',
+  'authentication failed',
+  'invalid api key',
+  'api key is invalid',
+];
+
+// Patterns that indicate billing/credit issues - should FAIL verification
+const BILLING_ERROR_PATTERNS = [
+  'credit balance is too low',
+  'credit balance too low',
+  'insufficient credits',
+  'insufficient balance',
+  'no credits',
+  'out of credits',
+  'billing',
+  'payment required',
+  'add credits',
+];
+
+// Patterns that indicate rate/usage limits - should FAIL verification
+// Users need to wait or upgrade their plan
+const RATE_LIMIT_PATTERNS = [
+  'limit reached',
+  'rate limit',
+  'rate_limit',
+  'resets', // Only valid if it's a temporary reset, not a billing issue
+  '/upgrade',
+  'extra-usage',
+];
+
+function isRateLimitError(text: string): boolean {
+  const lowerText = text.toLowerCase();
+  // First check if it's a billing error - billing errors are NOT rate limits
+  if (isBillingError(text)) {
+    return false;
+  }
+  return RATE_LIMIT_PATTERNS.some((pattern) => lowerText.includes(pattern.toLowerCase()));
+}
+
+function isBillingError(text: string): boolean {
+  const lowerText = text.toLowerCase();
+  return BILLING_ERROR_PATTERNS.some((pattern) => lowerText.includes(pattern.toLowerCase()));
+}
+
+function containsAuthError(text: string): boolean {
+  const lowerText = text.toLowerCase();
+  return AUTH_ERROR_PATTERNS.some((pattern) => lowerText.includes(pattern.toLowerCase()));
+}
+
+export function createVerifyClaudeAuthHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      // In E2E/CI mock mode, skip real API calls
+      if (process.env.AUTOMAKER_MOCK_AGENT === 'true') {
+        res.json({ success: true, authenticated: true });
+        return;
+      }
+
+      // Get the auth method and optional API key from the request body
+      const { authMethod, apiKey } = req.body as {
+        authMethod?: 'cli' | 'api_key';
+        apiKey?: string;
+      };
+
+      // Rate limiting to prevent abuse
+      const clientIp = req.ip || req.socket.remoteAddress || 'unknown';
+      if (!rateLimiter.canAttempt(clientIp)) {
+        const resetTime = rateLimiter.getResetTime(clientIp);
+        res.status(429).json({
+          success: false,
+          authenticated: false,
+          error: 'Too many authentication attempts. Please try again later.',
+          resetTime,
+        });
+        return;
+      }
+
+      logger.info(
+        `[Setup] Verifying Claude authentication using method: ${authMethod || 'auto'}${apiKey ? ' (with provided key)' : ''}`
+      );
+
+      // Create an AbortController with a 30-second timeout
+      const abortController = new AbortController();
+      const timeoutId = setTimeout(() => abortController.abort(), 30000);
+
+      let authenticated = false;
+      let errorMessage = '';
+      let receivedAnyContent = false;
+      let cleanupEnv: (() => void) | undefined;
+
+      // Create secure auth session
+      const sessionId = `claude-auth-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+      try {
+        // For API key verification, validate the key first
+        if (authMethod === 'api_key' && apiKey) {
+          const validation = validateApiKey(apiKey, 'anthropic');
+          if (!validation.isValid) {
+            res.json({
+              success: true,
+              authenticated: false,
+              error: validation.error,
+            });
+            return;
+          }
+        }
+
+        // Create secure environment without modifying process.env
+        const authEnv = createSecureAuthEnv(authMethod || 'api_key', apiKey, 'anthropic');
+
+        // For API key verification without provided key, use stored key or env var
+        if (authMethod === 'api_key' && !apiKey) {
+          const storedApiKey = getApiKey('anthropic');
+          if (storedApiKey) {
+            authEnv.ANTHROPIC_API_KEY = storedApiKey;
+            logger.info('[Setup] Using stored API key for verification');
+          } else if (!authEnv.ANTHROPIC_API_KEY) {
+            res.json({
+              success: true,
+              authenticated: false,
+              error: 'No API key configured. Please enter an API key first.',
+            });
+            return;
+          }
+        }
+
+        // Store the secure environment in session manager
+        AuthSessionManager.createSession(sessionId, authMethod || 'api_key', apiKey, 'anthropic');
+
+        // Create temporary environment override for SDK call
+        cleanupEnv = createTempEnvOverride(authEnv);
+
+        // Run a minimal query to verify authentication
+        const stream = query({
+          prompt: "Reply with only the word 'ok'",
+          options: {
+            model: 'claude-sonnet-4-6',
+            maxTurns: 1,
+            allowedTools: [],
+            abortController,
+          },
+        });
+
+        // Collect all messages and check for errors
+        const allMessages: string[] = [];
+
+        for await (const msg of stream) {
+          const msgStr = JSON.stringify(msg);
+          allMessages.push(msgStr);
+          logger.info('[Setup] Stream message:', msgStr.substring(0, 500));
+
+          // Check for billing errors FIRST - these should fail verification
+          if (isBillingError(msgStr)) {
+            logger.error('[Setup] Found billing error in message');
+            errorMessage =
+              'Credit balance is too low. Please add credits to your Anthropic account at console.anthropic.com';
+            authenticated = false;
+            break;
+          }
+
+          // Check if any part of the message contains auth errors
+          if (containsAuthError(msgStr)) {
+            logger.error('[Setup] Found auth error in message');
+            if (authMethod === 'cli') {
+              errorMessage =
+                "CLI authentication failed. Please run 'claude login' in your terminal to authenticate.";
+            } else {
+              errorMessage = 'API key is invalid or has been revoked.';
+            }
+            break;
+          }
+
+          // Check specifically for assistant messages with text content
+          const msgRecord = msg as Record<string, unknown>;
+          const msgMessage = msgRecord.message as Record<string, unknown> | undefined;
+          if (msg.type === 'assistant' && msgMessage?.content) {
+            const content = msgMessage.content;
+            if (Array.isArray(content)) {
+              for (const block of content) {
+                if (block.type === 'text' && block.text) {
+                  const text = block.text;
+                  logger.info('[Setup] Assistant text:', text);
+
+                  if (containsAuthError(text)) {
+                    if (authMethod === 'cli') {
+                      errorMessage =
+                        "CLI authentication failed. Please run 'claude login' in your terminal to authenticate.";
+                    } else {
+                      errorMessage = 'API key is invalid or has been revoked.';
+                    }
+                    break;
+                  }
+
+                  // Valid text response that's not an error
+                  if (text.toLowerCase().includes('ok') || text.length > 0) {
+                    receivedAnyContent = true;
+                  }
+                }
+              }
+            }
+          }
+
+          // Check for result messages
+          if (msg.type === 'result') {
+            const resultStr = JSON.stringify(msg);
+
+            // First check for billing errors - these should FAIL verification
+            if (isBillingError(resultStr)) {
+              logger.error('[Setup] Billing error detected - insufficient credits');
+              errorMessage =
+                'Credit balance is too low. Please add credits to your Anthropic account at console.anthropic.com';
+              authenticated = false;
+              break;
+            }
+            // Check if it's a rate limit error - should FAIL verification
+            else if (isRateLimitError(resultStr)) {
+              logger.warn('[Setup] Rate limit detected - treating as unverified');
+              errorMessage =
+                'Rate limit reached. Please wait a while before trying again or upgrade your plan.';
+              authenticated = false;
+              break;
+            } else if (containsAuthError(resultStr)) {
+              if (authMethod === 'cli') {
+                errorMessage =
+                  "CLI authentication failed. Please run 'claude login' in your terminal to authenticate.";
+              } else {
+                errorMessage = 'API key is invalid or has been revoked.';
+              }
+            } else {
+              // Got a result without errors
+              receivedAnyContent = true;
+            }
+          }
+        }
+
+        // Determine authentication status
+        if (errorMessage) {
+          authenticated = false;
+        } else if (receivedAnyContent) {
+          authenticated = true;
+        } else {
+          // No content received - might be an issue
+          logger.warn('[Setup] No content received from stream');
+          logger.warn('[Setup] All messages:', allMessages.join('\n'));
+          errorMessage = 'No response received from Claude. Please check your authentication.';
+        }
+      } catch (error: unknown) {
+        const errMessage = error instanceof Error ? error.message : String(error);
+
+        logger.error('[Setup] Claude auth verification exception:', errMessage);
+
+        // Check for billing errors FIRST - these always fail
+        if (isBillingError(errMessage)) {
+          authenticated = false;
+          errorMessage =
+            'Credit balance is too low. Please add credits to your Anthropic account at console.anthropic.com';
+        }
+        // Check for rate limit in exception - should FAIL verification
+        else if (isRateLimitError(errMessage)) {
+          authenticated = false;
+          errorMessage =
+            'Rate limit reached. Please wait a while before trying again or upgrade your plan.';
+          logger.warn('[Setup] Rate limit in exception - treating as unverified');
+        }
+        // If we already determined auth was successful, keep it
+        else if (authenticated) {
+          logger.info('[Setup] Auth already confirmed, ignoring exception');
+        }
+        // Check for auth-related errors in exception
+        else if (containsAuthError(errMessage)) {
+          if (authMethod === 'cli') {
+            errorMessage =
+              "CLI authentication failed. Please run 'claude login' in your terminal to authenticate.";
+          } else {
+            errorMessage = 'API key is invalid or has been revoked.';
+          }
+        } else if (errMessage.includes('abort') || errMessage.includes('timeout')) {
+          errorMessage = 'Verification timed out. Please try again.';
+        } else if (errMessage.includes('exit') && errMessage.includes('code 1')) {
+          // Process exited with code 1 but we might have gotten rate limit info in the stream
+          // Check if we received any content that indicated auth worked
+          if (receivedAnyContent && !errorMessage) {
+            authenticated = true;
+            logger.info('[Setup] Process exit 1 but content received - auth valid');
+          } else if (!errorMessage) {
+            errorMessage = errMessage;
+          }
+        } else if (!errorMessage) {
+          errorMessage = errMessage;
+        }
+      } finally {
+        clearTimeout(timeoutId);
+        // Restore process.env to its original state
+        cleanupEnv?.();
+        // Clean up the auth session
+        AuthSessionManager.destroySession(sessionId);
+      }
+
+      logger.info('[Setup] Verification result:', {
+        authenticated,
+        errorMessage,
+        authMethod,
+      });
+
+      // Determine specific auth type for success messages
+      const effectiveAuthMethod = authMethod ?? 'api_key';
+      let authType: 'oauth' | 'api_key' | 'cli' | undefined;
+      if (authenticated) {
+        if (effectiveAuthMethod === 'api_key') {
+          authType = 'api_key';
+        } else if (effectiveAuthMethod === 'cli') {
+          // Check if CLI auth is via OAuth (Claude Code subscription) or generic CLI
+          try {
+            const indicators = await getClaudeAuthIndicators();
+            authType = indicators.credentials?.hasOAuthToken ? 'oauth' : 'cli';
+          } catch {
+            // Fall back to generic CLI if credential check fails
+            authType = 'cli';
+          }
+        }
+      }
+
+      res.json({
+        success: true,
+        authenticated,
+        authType,
+        error: errorMessage || undefined,
+      });
+    } catch (error) {
+      logger.error('[Setup] Verify Claude auth endpoint error:', error);
+      res.status(500).json({
+        success: false,
+        authenticated: false,
+        error: error instanceof Error ? error.message : 'Verification failed',
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/setup/routes/verify-codex-auth.ts b/temp_repo/apps/server/src/routes/setup/routes/verify-codex-auth.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7dcf1559858d4dd53915852587817e14b229ed4e
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/setup/routes/verify-codex-auth.ts
@@ -0,0 +1,288 @@
+/**
+ * POST /verify-codex-auth endpoint - Verify Codex authentication
+ */
+
+import type { Request, Response } from 'express';
+import { createLogger } from '@automaker/utils';
+import { CODEX_MODEL_MAP } from '@automaker/types';
+import { ProviderFactory } from '../../../providers/provider-factory.js';
+import { getApiKey } from '../common.js';
+import { getCodexAuthIndicators } from '@automaker/platform';
+import {
+  createSecureAuthEnv,
+  AuthSessionManager,
+  AuthRateLimiter,
+  validateApiKey,
+  createTempEnvOverride,
+} from '../../../lib/auth-utils.js';
+
+const logger = createLogger('Setup');
+const rateLimiter = new AuthRateLimiter();
+const OPENAI_API_KEY_ENV = 'OPENAI_API_KEY';
+const AUTH_PROMPT = "Reply with only the word 'ok'";
+const AUTH_TIMEOUT_MS = 30000;
+const ERROR_BILLING_MESSAGE =
+  'Credit balance is too low. Please add credits to your OpenAI account.';
+const ERROR_RATE_LIMIT_MESSAGE =
+  'Rate limit reached. Please wait a while before trying again or upgrade your plan.';
+const ERROR_CLI_AUTH_REQUIRED =
+  "CLI authentication failed. Please run 'codex login' to authenticate.";
+const ERROR_API_KEY_REQUIRED = 'No API key configured. Please enter an API key first.';
+const AUTH_ERROR_PATTERNS = [
+  'authentication',
+  'unauthorized',
+  'invalid_api_key',
+  'invalid api key',
+  'api key is invalid',
+  'not authenticated',
+  'login',
+  'auth(',
+  'token refresh',
+  'tokenrefresh',
+  'failed to parse server response',
+  'transport channel closed',
+];
+const BILLING_ERROR_PATTERNS = [
+  'credit balance is too low',
+  'credit balance too low',
+  'insufficient credits',
+  'insufficient balance',
+  'no credits',
+  'out of credits',
+  'billing',
+  'payment required',
+  'add credits',
+];
+const RATE_LIMIT_PATTERNS = [
+  'limit reached',
+  'rate limit',
+  'rate_limit',
+  'too many requests',
+  'resets',
+  '429',
+];
+
+function containsAuthError(text: string): boolean {
+  const lowerText = text.toLowerCase();
+  return AUTH_ERROR_PATTERNS.some((pattern) => lowerText.includes(pattern));
+}
+
+function isBillingError(text: string): boolean {
+  const lowerText = text.toLowerCase();
+  return BILLING_ERROR_PATTERNS.some((pattern) => lowerText.includes(pattern));
+}
+
+function isRateLimitError(text: string): boolean {
+  if (isBillingError(text)) {
+    return false;
+  }
+  const lowerText = text.toLowerCase();
+  return RATE_LIMIT_PATTERNS.some((pattern) => lowerText.includes(pattern));
+}
+
+export function createVerifyCodexAuthHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    // In E2E/CI mock mode, skip real API calls
+    if (process.env.AUTOMAKER_MOCK_AGENT === 'true') {
+      res.json({ success: true, authenticated: true });
+      return;
+    }
+
+    const { authMethod, apiKey } = req.body as {
+      authMethod?: 'cli' | 'api_key';
+      apiKey?: string;
+    };
+
+    // Create session ID for cleanup
+    const sessionId = `codex-auth-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+    // Rate limiting
+    const clientIp = req.ip || req.socket.remoteAddress || 'unknown';
+    if (!rateLimiter.canAttempt(clientIp)) {
+      const resetTime = rateLimiter.getResetTime(clientIp);
+      res.status(429).json({
+        success: false,
+        authenticated: false,
+        error: 'Too many authentication attempts. Please try again later.',
+        resetTime,
+      });
+      return;
+    }
+
+    const abortController = new AbortController();
+    const timeoutId = setTimeout(() => abortController.abort(), AUTH_TIMEOUT_MS);
+
+    try {
+      // Create secure environment without modifying process.env
+      const authEnv = createSecureAuthEnv(authMethod || 'api_key', apiKey, 'openai');
+
+      // For API key auth, validate and use the provided key or stored key
+      if (authMethod === 'api_key') {
+        if (apiKey) {
+          // Use the provided API key
+          const validation = validateApiKey(apiKey, 'openai');
+          if (!validation.isValid) {
+            res.json({ success: true, authenticated: false, error: validation.error });
+            return;
+          }
+          authEnv[OPENAI_API_KEY_ENV] = validation.normalizedKey;
+        } else {
+          // Try stored key
+          const storedApiKey = getApiKey('openai');
+          if (storedApiKey) {
+            const validation = validateApiKey(storedApiKey, 'openai');
+            if (!validation.isValid) {
+              res.json({ success: true, authenticated: false, error: validation.error });
+              return;
+            }
+            authEnv[OPENAI_API_KEY_ENV] = validation.normalizedKey;
+          } else if (!authEnv[OPENAI_API_KEY_ENV]) {
+            res.json({ success: true, authenticated: false, error: ERROR_API_KEY_REQUIRED });
+            return;
+          }
+        }
+      }
+
+      // Create session and temporary environment override
+      AuthSessionManager.createSession(sessionId, authMethod || 'api_key', undefined, 'openai');
+      const cleanupEnv = createTempEnvOverride(authEnv);
+
+      try {
+        if (authMethod === 'cli') {
+          const authIndicators = await getCodexAuthIndicators();
+          if (!authIndicators.hasOAuthToken && !authIndicators.hasApiKey) {
+            res.json({
+              success: true,
+              authenticated: false,
+              error: ERROR_CLI_AUTH_REQUIRED,
+            });
+            return;
+          }
+        }
+
+        // Use Codex provider explicitly (not ProviderFactory.getProviderForModel)
+        // because Cursor also supports GPT models and has higher priority
+        const provider = ProviderFactory.getProviderByName('codex');
+        if (!provider) {
+          throw new Error('Codex provider not available');
+        }
+        const stream = provider.executeQuery({
+          prompt: AUTH_PROMPT,
+          model: CODEX_MODEL_MAP.gpt52Codex,
+          cwd: process.cwd(),
+          maxTurns: 1,
+          allowedTools: [],
+          abortController,
+        });
+
+        let receivedAnyContent = false;
+        let errorMessage = '';
+
+        for await (const msg of stream) {
+          if (msg.type === 'error' && msg.error) {
+            if (isBillingError(msg.error)) {
+              errorMessage = ERROR_BILLING_MESSAGE;
+            } else if (isRateLimitError(msg.error)) {
+              errorMessage = ERROR_RATE_LIMIT_MESSAGE;
+            } else {
+              errorMessage = msg.error;
+            }
+            break;
+          }
+
+          if (msg.type === 'assistant' && msg.message?.content) {
+            for (const block of msg.message.content) {
+              if (block.type === 'text' && block.text) {
+                receivedAnyContent = true;
+                if (isBillingError(block.text)) {
+                  errorMessage = ERROR_BILLING_MESSAGE;
+                  break;
+                }
+                if (isRateLimitError(block.text)) {
+                  errorMessage = ERROR_RATE_LIMIT_MESSAGE;
+                  break;
+                }
+                if (containsAuthError(block.text)) {
+                  errorMessage = block.text;
+                  break;
+                }
+              }
+            }
+          }
+
+          if (msg.type === 'result' && msg.result) {
+            receivedAnyContent = true;
+            if (isBillingError(msg.result)) {
+              errorMessage = ERROR_BILLING_MESSAGE;
+            } else if (isRateLimitError(msg.result)) {
+              errorMessage = ERROR_RATE_LIMIT_MESSAGE;
+            } else if (containsAuthError(msg.result)) {
+              errorMessage = msg.result;
+              break;
+            }
+          }
+        }
+
+        if (errorMessage) {
+          // Rate limit and billing errors mean auth succeeded but usage is limited
+          const isUsageLimitError =
+            errorMessage === ERROR_BILLING_MESSAGE || errorMessage === ERROR_RATE_LIMIT_MESSAGE;
+
+          const response: {
+            success: boolean;
+            authenticated: boolean;
+            error: string;
+            details?: string;
+          } = {
+            success: true,
+            authenticated: isUsageLimitError ? true : false,
+            error: isUsageLimitError
+              ? errorMessage
+              : authMethod === 'cli'
+                ? ERROR_CLI_AUTH_REQUIRED
+                : 'API key is invalid or has been revoked.',
+          };
+
+          // Include detailed error for auth failures so users can debug
+          if (!isUsageLimitError && errorMessage !== response.error) {
+            response.details = errorMessage;
+          }
+
+          res.json(response);
+          return;
+        }
+
+        if (!receivedAnyContent) {
+          res.json({
+            success: true,
+            authenticated: false,
+            error: 'No response received from Codex. Please check your authentication.',
+          });
+          return;
+        }
+
+        res.json({ success: true, authenticated: true });
+      } finally {
+        // Clean up environment override
+        cleanupEnv();
+      }
+    } catch (error: unknown) {
+      const errMessage = error instanceof Error ? error.message : String(error);
+      logger.error('[Setup] Codex auth verification error:', errMessage);
+      const normalizedError = isBillingError(errMessage)
+        ? ERROR_BILLING_MESSAGE
+        : isRateLimitError(errMessage)
+          ? ERROR_RATE_LIMIT_MESSAGE
+          : errMessage;
+      res.json({
+        success: true,
+        authenticated: false,
+        error: normalizedError,
+      });
+    } finally {
+      clearTimeout(timeoutId);
+      // Clean up session
+      AuthSessionManager.destroySession(sessionId);
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/templates/common.ts b/temp_repo/apps/server/src/routes/templates/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d0ee96ddab5fc2b078db00b601652edf37624c71
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/templates/common.ts
@@ -0,0 +1,12 @@
+/**
+ * Common utilities for templates routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+export const logger = createLogger('Templates');
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/templates/index.ts b/temp_repo/apps/server/src/routes/templates/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..38eb0270f097c428141fbdba5bdec4eab5e30034
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/templates/index.ts
@@ -0,0 +1,15 @@
+/**
+ * Templates routes
+ * Provides API for cloning GitHub starter templates
+ */
+
+import { Router } from 'express';
+import { createCloneHandler } from './routes/clone.js';
+
+export function createTemplatesRoutes(): Router {
+  const router = Router();
+
+  router.post('/clone', createCloneHandler());
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/templates/routes/clone.ts b/temp_repo/apps/server/src/routes/templates/routes/clone.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5874a3efeca5a055486bd180f8016230fc7b0ea0
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/templates/routes/clone.ts
@@ -0,0 +1,204 @@
+/**
+ * POST /clone endpoint - Clone a GitHub template to a new project directory
+ */
+
+import type { Request, Response } from 'express';
+import { spawn } from 'child_process';
+import path from 'path';
+import * as secureFs from '../../../lib/secure-fs.js';
+import { PathNotAllowedError } from '@automaker/platform';
+import { logger, getErrorMessage, logError } from '../common.js';
+
+export function createCloneHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { repoUrl, projectName, parentDir } = req.body as {
+        repoUrl: string;
+        projectName: string;
+        parentDir: string;
+      };
+
+      // Validate inputs
+      if (!repoUrl || !projectName || !parentDir) {
+        res.status(400).json({
+          success: false,
+          error: 'repoUrl, projectName, and parentDir are required',
+        });
+        return;
+      }
+
+      logger.info(
+        `[Templates] Clone request - Repo: ${repoUrl}, Project: ${projectName}, Parent: ${parentDir}`
+      );
+
+      // Validate repo URL is a valid GitHub URL
+      const githubUrlPattern = /^https:\/\/github\.com\/[\w-]+\/[\w.-]+$/;
+      if (!githubUrlPattern.test(repoUrl)) {
+        res.status(400).json({
+          success: false,
+          error: 'Invalid GitHub repository URL',
+        });
+        return;
+      }
+
+      // Sanitize project name (allow alphanumeric, dash, underscore)
+      const sanitizedName = projectName.replace(/[^a-zA-Z0-9-_]/g, '-');
+      if (sanitizedName !== projectName) {
+        logger.info(`[Templates] Sanitized project name: ${projectName} -> ${sanitizedName}`);
+      }
+
+      // Build full project path
+      const projectPath = path.join(parentDir, sanitizedName);
+
+      const resolvedParent = path.resolve(parentDir);
+      const resolvedProject = path.resolve(projectPath);
+      const relativePath = path.relative(resolvedParent, resolvedProject);
+      if (relativePath.startsWith('..') || path.isAbsolute(relativePath)) {
+        res.status(400).json({
+          success: false,
+          error: 'Invalid project name; potential path traversal attempt.',
+        });
+        return;
+      }
+
+      // Check if directory already exists (secureFs.access also validates path is allowed)
+      try {
+        await secureFs.access(projectPath);
+        res.status(400).json({
+          success: false,
+          error: `Directory "${sanitizedName}" already exists in ${parentDir}`,
+        });
+        return;
+      } catch (accessError) {
+        if (accessError instanceof PathNotAllowedError) {
+          res.status(403).json({
+            success: false,
+            error: `Project path not allowed: ${projectPath}. Must be within ALLOWED_ROOT_DIRECTORY.`,
+          });
+          return;
+        }
+        // Directory doesn't exist, which is what we want
+      }
+
+      // Ensure parent directory exists
+      try {
+        // Check if parentDir is a root path (Windows: C:\, D:\, etc. or Unix: /)
+        const isWindowsRoot = /^[A-Za-z]:\\?$/.test(parentDir);
+        const isUnixRoot = parentDir === '/' || parentDir === '';
+        const isRoot = isWindowsRoot || isUnixRoot;
+
+        if (isRoot) {
+          // Root paths always exist, just verify access
+          logger.info(`[Templates] Using root path: ${parentDir}`);
+          await secureFs.access(parentDir);
+        } else {
+          // Check if parent directory exists
+          let parentExists = false;
+          try {
+            await secureFs.access(parentDir);
+            parentExists = true;
+          } catch {
+            parentExists = false;
+          }
+
+          if (!parentExists) {
+            logger.info(`[Templates] Creating parent directory: ${parentDir}`);
+            await secureFs.mkdir(parentDir, { recursive: true });
+          } else {
+            logger.info(`[Templates] Parent directory exists: ${parentDir}`);
+          }
+        }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        logger.error('[Templates] Failed to access parent directory:', parentDir, error);
+        res.status(500).json({
+          success: false,
+          error: `Failed to access parent directory: ${errorMessage}`,
+        });
+        return;
+      }
+
+      logger.info(`[Templates] Cloning ${repoUrl} to ${projectPath}`);
+
+      // Clone the repository
+      const cloneResult = await new Promise<{
+        success: boolean;
+        error?: string;
+      }>((resolve) => {
+        const gitProcess = spawn('git', ['clone', repoUrl, projectPath], {
+          cwd: parentDir,
+        });
+
+        let stderr = '';
+
+        gitProcess.stderr.on('data', (data) => {
+          stderr += data.toString();
+        });
+
+        gitProcess.on('close', (code) => {
+          if (code === 0) {
+            resolve({ success: true });
+          } else {
+            resolve({
+              success: false,
+              error: stderr || `Git clone failed with code ${code}`,
+            });
+          }
+        });
+
+        gitProcess.on('error', (error) => {
+          resolve({
+            success: false,
+            error: `Failed to spawn git: ${error.message}`,
+          });
+        });
+      });
+
+      if (!cloneResult.success) {
+        res.status(500).json({
+          success: false,
+          error: cloneResult.error || 'Failed to clone repository',
+        });
+        return;
+      }
+
+      // Remove .git directory to start fresh
+      try {
+        const gitDir = path.join(projectPath, '.git');
+        await secureFs.rm(gitDir, { recursive: true, force: true });
+        logger.info('[Templates] Removed .git directory');
+      } catch (error) {
+        logger.warn('[Templates] Could not remove .git directory:', error);
+        // Continue anyway - not critical
+      }
+
+      // Initialize a fresh git repository
+      await new Promise<void>((resolve) => {
+        const gitInit = spawn('git', ['init'], {
+          cwd: projectPath,
+        });
+
+        gitInit.on('close', () => {
+          logger.info('[Templates] Initialized fresh git repository');
+          resolve();
+        });
+
+        gitInit.on('error', () => {
+          logger.warn('[Templates] Could not initialize git');
+          resolve();
+        });
+      });
+
+      logger.info(`[Templates] Successfully cloned template to ${projectPath}`);
+
+      res.json({
+        success: true,
+        projectPath,
+        projectName: sanitizedName,
+      });
+    } catch (error) {
+      logError(error, 'Clone template failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/terminal/common.ts b/temp_repo/apps/server/src/routes/terminal/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5e8b6b32923b39131ad6f1aea9c2efb71fa8098c
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/terminal/common.ts
@@ -0,0 +1,149 @@
+/**
+ * Common utilities and state for terminal routes
+ */
+
+import { randomBytes } from 'crypto';
+import { createLogger } from '@automaker/utils';
+import type { Request, Response, NextFunction } from 'express';
+
+const logger = createLogger('Terminal');
+
+// Read env variables lazily to ensure dotenv has loaded them
+function getTerminalPassword(): string | undefined {
+  return process.env.TERMINAL_PASSWORD;
+}
+
+function getTerminalEnabledConfig(): boolean {
+  return process.env.TERMINAL_ENABLED !== 'false'; // Enabled by default
+}
+
+// In-memory session tokens (would use Redis in production) - private
+const validTokens: Map<string, { createdAt: Date; expiresAt: Date }> = new Map();
+const TOKEN_EXPIRY_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+/**
+ * Add a token to the valid tokens map
+ */
+export function addToken(token: string, data: { createdAt: Date; expiresAt: Date }): void {
+  validTokens.set(token, data);
+}
+
+/**
+ * Delete a token from the valid tokens map
+ */
+export function deleteToken(token: string): void {
+  validTokens.delete(token);
+}
+
+/**
+ * Get token data for a given token
+ */
+export function getTokenData(token: string): { createdAt: Date; expiresAt: Date } | undefined {
+  return validTokens.get(token);
+}
+
+/**
+ * Generate a cryptographically secure random token
+ */
+export function generateToken(): string {
+  return `term-${randomBytes(32).toString('base64url')}`;
+}
+
+/**
+ * Clean up expired tokens
+ */
+export function cleanupExpiredTokens(): void {
+  const now = new Date();
+  validTokens.forEach((data, token) => {
+    if (data.expiresAt < now) {
+      validTokens.delete(token);
+    }
+  });
+}
+
+// Clean up expired tokens every 5 minutes
+setInterval(cleanupExpiredTokens, 5 * 60 * 1000);
+
+/**
+ * Validate a terminal session token
+ */
+export function validateTerminalToken(token: string | undefined): boolean {
+  if (!token) return false;
+
+  const tokenData = validTokens.get(token);
+  if (!tokenData) return false;
+
+  if (tokenData.expiresAt < new Date()) {
+    validTokens.delete(token);
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Check if terminal requires password
+ */
+export function isTerminalPasswordRequired(): boolean {
+  return !!getTerminalPassword();
+}
+
+/**
+ * Check if terminal is enabled
+ */
+export function isTerminalEnabled(): boolean {
+  return getTerminalEnabledConfig();
+}
+
+/**
+ * Terminal authentication middleware
+ * Checks for valid session token if password is configured
+ */
+export function terminalAuthMiddleware(req: Request, res: Response, next: NextFunction): void {
+  // Check if terminal is enabled
+  if (!getTerminalEnabledConfig()) {
+    res.status(403).json({
+      success: false,
+      error: 'Terminal access is disabled',
+    });
+    return;
+  }
+
+  // If no password configured, allow all requests
+  if (!getTerminalPassword()) {
+    next();
+    return;
+  }
+
+  // Check for session token
+  const token = (req.headers['x-terminal-token'] as string) || (req.query.token as string);
+
+  if (!validateTerminalToken(token)) {
+    res.status(401).json({
+      success: false,
+      error: 'Terminal authentication required',
+      passwordRequired: true,
+    });
+    return;
+  }
+
+  next();
+}
+
+export function getTerminalPasswordConfig(): string | undefined {
+  return getTerminalPassword();
+}
+
+export function getTerminalEnabledConfigValue(): boolean {
+  return getTerminalEnabledConfig();
+}
+
+export function getTokenExpiryMs(): number {
+  return TOKEN_EXPIRY_MS;
+}
+
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/terminal/index.ts b/temp_repo/apps/server/src/routes/terminal/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..380801e521fdb8d147ac1a42a802de747eb6759d
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/terminal/index.ts
@@ -0,0 +1,44 @@
+/**
+ * Terminal routes with password protection
+ *
+ * Provides REST API for terminal session management and authentication.
+ * WebSocket connections for real-time I/O are handled separately in index.ts.
+ */
+
+import { Router } from 'express';
+import {
+  terminalAuthMiddleware,
+  validateTerminalToken,
+  isTerminalEnabled,
+  isTerminalPasswordRequired,
+} from './common.js';
+import { createStatusHandler } from './routes/status.js';
+import { createAuthHandler } from './routes/auth.js';
+import { createLogoutHandler } from './routes/logout.js';
+import { createSessionsListHandler, createSessionsCreateHandler } from './routes/sessions.js';
+import { createSessionDeleteHandler } from './routes/session-delete.js';
+import { createSessionResizeHandler } from './routes/session-resize.js';
+import { createSettingsGetHandler, createSettingsUpdateHandler } from './routes/settings.js';
+
+// Re-export for use in main index.ts
+export { validateTerminalToken, isTerminalEnabled, isTerminalPasswordRequired };
+
+export function createTerminalRoutes(): Router {
+  const router = Router();
+
+  router.get('/status', createStatusHandler());
+  router.post('/auth', createAuthHandler());
+  router.post('/logout', createLogoutHandler());
+
+  // Apply terminal auth middleware to all routes below
+  router.use(terminalAuthMiddleware);
+
+  router.get('/sessions', createSessionsListHandler());
+  router.post('/sessions', createSessionsCreateHandler());
+  router.delete('/sessions/:id', createSessionDeleteHandler());
+  router.post('/sessions/:id/resize', createSessionResizeHandler());
+  router.get('/settings', createSettingsGetHandler());
+  router.put('/settings', createSettingsUpdateHandler());
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/terminal/routes/auth.ts b/temp_repo/apps/server/src/routes/terminal/routes/auth.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0aa29b345de53136df9872cab8aff6b2e269bf39
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/terminal/routes/auth.ts
@@ -0,0 +1,65 @@
+/**
+ * POST /auth endpoint - Authenticate with password to get a session token
+ */
+
+import type { Request, Response } from 'express';
+import {
+  getTerminalEnabledConfigValue,
+  getTerminalPasswordConfig,
+  generateToken,
+  addToken,
+  getTokenExpiryMs,
+} from '../common.js';
+
+export function createAuthHandler() {
+  return (req: Request, res: Response): void => {
+    if (!getTerminalEnabledConfigValue()) {
+      res.status(403).json({
+        success: false,
+        error: 'Terminal access is disabled',
+      });
+      return;
+    }
+
+    const terminalPassword = getTerminalPasswordConfig();
+
+    // If no password required, return immediate success
+    if (!terminalPassword) {
+      res.json({
+        success: true,
+        data: {
+          authenticated: true,
+          passwordRequired: false,
+        },
+      });
+      return;
+    }
+
+    const { password } = req.body;
+
+    if (!password || password !== terminalPassword) {
+      res.status(401).json({
+        success: false,
+        error: 'Invalid password',
+      });
+      return;
+    }
+
+    // Generate session token
+    const token = generateToken();
+    const now = new Date();
+    addToken(token, {
+      createdAt: now,
+      expiresAt: new Date(now.getTime() + getTokenExpiryMs()),
+    });
+
+    res.json({
+      success: true,
+      data: {
+        authenticated: true,
+        token,
+        expiresIn: getTokenExpiryMs(),
+      },
+    });
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/terminal/routes/logout.ts b/temp_repo/apps/server/src/routes/terminal/routes/logout.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2af85713c4b55be211cf0cdead69f3c980e3acf6
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/terminal/routes/logout.ts
@@ -0,0 +1,20 @@
+/**
+ * POST /logout endpoint - Invalidate a session token
+ */
+
+import type { Request, Response } from 'express';
+import { deleteToken } from '../common.js';
+
+export function createLogoutHandler() {
+  return (req: Request, res: Response): void => {
+    const token = (req.headers['x-terminal-token'] as string) || req.body.token;
+
+    if (token) {
+      deleteToken(token);
+    }
+
+    res.json({
+      success: true,
+    });
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/terminal/routes/session-delete.ts b/temp_repo/apps/server/src/routes/terminal/routes/session-delete.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dec3c69434e6e834ed749e2cc76f153c23df1e01
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/terminal/routes/session-delete.ts
@@ -0,0 +1,26 @@
+/**
+ * DELETE /sessions/:id endpoint - Kill a terminal session
+ */
+
+import type { Request, Response } from 'express';
+import { getTerminalService } from '../../../services/terminal-service.js';
+
+export function createSessionDeleteHandler() {
+  return (req: Request, res: Response): void => {
+    const terminalService = getTerminalService();
+    const { id } = req.params;
+    const killed = terminalService.killSession(id);
+
+    if (!killed) {
+      res.status(404).json({
+        success: false,
+        error: 'Session not found',
+      });
+      return;
+    }
+
+    res.json({
+      success: true,
+    });
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/terminal/routes/session-resize.ts b/temp_repo/apps/server/src/routes/terminal/routes/session-resize.ts
new file mode 100644
index 0000000000000000000000000000000000000000..41db9763093772757dc9783bd3911d91553ce048
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/terminal/routes/session-resize.ts
@@ -0,0 +1,36 @@
+/**
+ * POST /sessions/:id/resize endpoint - Resize a terminal session
+ */
+
+import type { Request, Response } from 'express';
+import { getTerminalService } from '../../../services/terminal-service.js';
+
+export function createSessionResizeHandler() {
+  return (req: Request, res: Response): void => {
+    const terminalService = getTerminalService();
+    const { id } = req.params;
+    const { cols, rows } = req.body;
+
+    if (!cols || !rows) {
+      res.status(400).json({
+        success: false,
+        error: 'cols and rows are required',
+      });
+      return;
+    }
+
+    const resized = terminalService.resize(id, cols, rows);
+
+    if (!resized) {
+      res.status(404).json({
+        success: false,
+        error: 'Session not found',
+      });
+      return;
+    }
+
+    res.json({
+      success: true,
+    });
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/terminal/routes/sessions.ts b/temp_repo/apps/server/src/routes/terminal/routes/sessions.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7d4b5383640074ef6bfb58ae5cefba8390ab8df7
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/terminal/routes/sessions.ts
@@ -0,0 +1,70 @@
+/**
+ * GET /sessions endpoint - List all active terminal sessions
+ * POST /sessions endpoint - Create a new terminal session
+ */
+
+import type { Request, Response } from 'express';
+import { getTerminalService } from '../../../services/terminal-service.js';
+import { getErrorMessage, logError } from '../common.js';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('Terminal');
+
+export function createSessionsListHandler() {
+  return (_req: Request, res: Response): void => {
+    const terminalService = getTerminalService();
+    const sessions = terminalService.getAllSessions();
+    res.json({
+      success: true,
+      data: sessions,
+    });
+  };
+}
+
+export function createSessionsCreateHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const terminalService = getTerminalService();
+      const { cwd, cols, rows, shell } = req.body;
+
+      const session = await terminalService.createSession({
+        cwd,
+        cols: cols || 80,
+        rows: rows || 24,
+        shell,
+      });
+
+      // Check if session creation was refused due to limit
+      if (!session) {
+        const maxSessions = terminalService.getMaxSessions();
+        const currentSessions = terminalService.getSessionCount();
+        logger.warn(`Session limit reached: ${currentSessions}/${maxSessions}`);
+        res.status(429).json({
+          success: false,
+          error: 'Maximum terminal sessions reached',
+          details: `Server limit is ${maxSessions} concurrent sessions. Please close unused terminals.`,
+          currentSessions,
+          maxSessions,
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        data: {
+          id: session.id,
+          cwd: session.cwd,
+          shell: session.shell,
+          createdAt: session.createdAt,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Create terminal session failed');
+      res.status(500).json({
+        success: false,
+        error: 'Failed to create terminal session',
+        details: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/terminal/routes/settings.ts b/temp_repo/apps/server/src/routes/terminal/routes/settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9d8146065faa13d4b1a5e986f4ef346b9c0c5456
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/terminal/routes/settings.ts
@@ -0,0 +1,83 @@
+/**
+ * GET/PUT /settings endpoint - Get/Update terminal settings
+ */
+
+import type { Request, Response } from 'express';
+import {
+  getTerminalService,
+  MIN_MAX_SESSIONS,
+  MAX_MAX_SESSIONS,
+} from '../../../services/terminal-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createSettingsGetHandler() {
+  return (_req: Request, res: Response): void => {
+    try {
+      const terminalService = getTerminalService();
+      res.json({
+        success: true,
+        data: {
+          maxSessions: terminalService.getMaxSessions(),
+          currentSessions: terminalService.getSessionCount(),
+        },
+      });
+    } catch (error) {
+      logError(error, 'Get terminal settings failed');
+      res.status(500).json({
+        success: false,
+        error: 'Failed to get terminal settings',
+        details: getErrorMessage(error),
+      });
+    }
+  };
+}
+
+export function createSettingsUpdateHandler() {
+  return (req: Request, res: Response): void => {
+    try {
+      const terminalService = getTerminalService();
+      const { maxSessions } = req.body;
+
+      // Validate maxSessions if provided
+      if (maxSessions !== undefined) {
+        if (typeof maxSessions !== 'number') {
+          res.status(400).json({
+            success: false,
+            error: 'maxSessions must be a number',
+          });
+          return;
+        }
+        if (!Number.isInteger(maxSessions)) {
+          res.status(400).json({
+            success: false,
+            error: 'maxSessions must be an integer',
+          });
+          return;
+        }
+        if (maxSessions < MIN_MAX_SESSIONS || maxSessions > MAX_MAX_SESSIONS) {
+          res.status(400).json({
+            success: false,
+            error: `maxSessions must be between ${MIN_MAX_SESSIONS} and ${MAX_MAX_SESSIONS}`,
+          });
+          return;
+        }
+        terminalService.setMaxSessions(maxSessions);
+      }
+
+      res.json({
+        success: true,
+        data: {
+          maxSessions: terminalService.getMaxSessions(),
+          currentSessions: terminalService.getSessionCount(),
+        },
+      });
+    } catch (error) {
+      logError(error, 'Update terminal settings failed');
+      res.status(500).json({
+        success: false,
+        error: 'Failed to update terminal settings',
+        details: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/terminal/routes/status.ts b/temp_repo/apps/server/src/routes/terminal/routes/status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..670b405c3bfe4ce733895fdc711c48a783f9e88e
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/terminal/routes/status.ts
@@ -0,0 +1,21 @@
+/**
+ * GET /status endpoint - Get terminal status
+ */
+
+import type { Request, Response } from 'express';
+import { getTerminalService } from '../../../services/terminal-service.js';
+import { getTerminalEnabledConfigValue, isTerminalPasswordRequired } from '../common.js';
+
+export function createStatusHandler() {
+  return (_req: Request, res: Response): void => {
+    const terminalService = getTerminalService();
+    res.json({
+      success: true,
+      data: {
+        enabled: getTerminalEnabledConfigValue(),
+        passwordRequired: isTerminalPasswordRequired(),
+        platform: terminalService.getPlatformInfo(),
+      },
+    });
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/workspace/common.ts b/temp_repo/apps/server/src/routes/workspace/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bec656dda5d9ae586bc7a0b787afd3dbdb189b81
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/workspace/common.ts
@@ -0,0 +1,12 @@
+/**
+ * Common utilities for workspace routes
+ */
+
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+const logger = createLogger('Workspace');
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
diff --git a/temp_repo/apps/server/src/routes/workspace/index.ts b/temp_repo/apps/server/src/routes/workspace/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..374249975c48522200f96fe79080ea8599877efa
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/workspace/index.ts
@@ -0,0 +1,17 @@
+/**
+ * Workspace routes
+ * Provides API endpoints for workspace directory management
+ */
+
+import { Router } from 'express';
+import { createConfigHandler } from './routes/config.js';
+import { createDirectoriesHandler } from './routes/directories.js';
+
+export function createWorkspaceRoutes(): Router {
+  const router = Router();
+
+  router.get('/config', createConfigHandler());
+  router.get('/directories', createDirectoriesHandler());
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/workspace/routes/config.ts b/temp_repo/apps/server/src/routes/workspace/routes/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5ea5cbee6bbfb1ed485b8fba95b691506ffafb44
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/workspace/routes/config.ts
@@ -0,0 +1,58 @@
+/**
+ * GET /config endpoint - Get workspace configuration status
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import path from 'path';
+import { getAllowedRootDirectory, getDataDirectory } from '@automaker/platform';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createConfigHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const allowedRootDirectory = getAllowedRootDirectory();
+      const dataDirectory = getDataDirectory();
+
+      if (!allowedRootDirectory) {
+        // When ALLOWED_ROOT_DIRECTORY is not set, return DATA_DIR as default directory
+        res.json({
+          success: true,
+          configured: false,
+          defaultDir: dataDirectory || null,
+        });
+        return;
+      }
+
+      // Check if the directory exists
+      try {
+        const resolvedWorkspaceDir = path.resolve(allowedRootDirectory);
+        const stats = await secureFs.stat(resolvedWorkspaceDir);
+        if (!stats.isDirectory()) {
+          res.json({
+            success: true,
+            configured: false,
+            error: 'ALLOWED_ROOT_DIRECTORY is not a valid directory',
+          });
+          return;
+        }
+
+        res.json({
+          success: true,
+          configured: true,
+          workspaceDir: resolvedWorkspaceDir,
+          defaultDir: resolvedWorkspaceDir,
+        });
+      } catch {
+        res.json({
+          success: true,
+          configured: false,
+          error: 'ALLOWED_ROOT_DIRECTORY path does not exist',
+        });
+      }
+    } catch (error) {
+      logError(error, 'Get workspace config failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/workspace/routes/directories.ts b/temp_repo/apps/server/src/routes/workspace/routes/directories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..09a66e1b9e2aaa5c97496199d9b32c281f90a469
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/workspace/routes/directories.ts
@@ -0,0 +1,60 @@
+/**
+ * GET /directories endpoint - List directories in workspace
+ */
+
+import type { Request, Response } from 'express';
+import * as secureFs from '../../../lib/secure-fs.js';
+import path from 'path';
+import { getAllowedRootDirectory } from '@automaker/platform';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createDirectoriesHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const allowedRootDirectory = getAllowedRootDirectory();
+
+      if (!allowedRootDirectory) {
+        res.status(400).json({
+          success: false,
+          error: 'ALLOWED_ROOT_DIRECTORY is not configured',
+        });
+        return;
+      }
+
+      const resolvedWorkspaceDir = path.resolve(allowedRootDirectory);
+
+      // Check if directory exists
+      try {
+        await secureFs.stat(resolvedWorkspaceDir);
+      } catch {
+        res.status(400).json({
+          success: false,
+          error: 'Workspace directory path does not exist',
+        });
+        return;
+      }
+
+      // Read directory contents
+      const entries = await secureFs.readdir(resolvedWorkspaceDir, {
+        withFileTypes: true,
+      });
+
+      // Filter to directories only and map to result format
+      const directories = entries
+        .filter((entry) => entry.isDirectory() && !entry.name.startsWith('.'))
+        .map((entry) => ({
+          name: entry.name,
+          path: path.join(resolvedWorkspaceDir, entry.name),
+        }))
+        .sort((a, b) => a.name.localeCompare(b.name));
+
+      res.json({
+        success: true,
+        directories,
+      });
+    } catch (error) {
+      logError(error, 'List workspace directories failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/common.ts b/temp_repo/apps/server/src/routes/worktree/common.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5ceb50bf31e131c682a4f6dd761a151565f486ef
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/common.ts
@@ -0,0 +1,164 @@
+/**
+ * Common utilities for worktree routes
+ */
+
+import {
+  createLogger,
+  isValidBranchName,
+  isValidRemoteName,
+  MAX_BRANCH_NAME_LENGTH,
+} from '@automaker/utils';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { getErrorMessage as getErrorMessageShared, createLogError } from '../common.js';
+
+// Re-export execGitCommand from the canonical shared module so any remaining
+// consumers that import from this file continue to work.
+export { execGitCommand } from '../../lib/git.js';
+
+const logger = createLogger('Worktree');
+export const execAsync = promisify(exec);
+
+// Re-export git validation utilities from the canonical shared module so
+// existing consumers that import from this file continue to work.
+export { isValidBranchName, isValidRemoteName, MAX_BRANCH_NAME_LENGTH };
+
+// ============================================================================
+// Extended PATH configuration for Electron apps
+// ============================================================================
+
+const pathSeparator = process.platform === 'win32' ? ';' : ':';
+const additionalPaths: string[] = [];
+
+if (process.platform === 'win32') {
+  // Windows paths
+  if (process.env.LOCALAPPDATA) {
+    additionalPaths.push(`${process.env.LOCALAPPDATA}\\Programs\\Git\\cmd`);
+  }
+  if (process.env.PROGRAMFILES) {
+    additionalPaths.push(`${process.env.PROGRAMFILES}\\Git\\cmd`);
+  }
+  if (process.env['ProgramFiles(x86)']) {
+    additionalPaths.push(`${process.env['ProgramFiles(x86)']}\\Git\\cmd`);
+  }
+} else {
+  // Unix/Mac paths
+  additionalPaths.push(
+    '/opt/homebrew/bin', // Homebrew on Apple Silicon
+    '/usr/local/bin', // Homebrew on Intel Mac, common Linux location
+    '/home/linuxbrew/.linuxbrew/bin', // Linuxbrew
+    `${process.env.HOME}/.local/bin` // pipx, other user installs
+  );
+}
+
+const extendedPath = [process.env.PATH, ...additionalPaths.filter(Boolean)]
+  .filter(Boolean)
+  .join(pathSeparator);
+
+/**
+ * Environment variables with extended PATH for executing shell commands.
+ * Electron apps don't inherit the user's shell PATH, so we need to add
+ * common tool installation locations.
+ */
+export const execEnv = {
+  ...process.env,
+  PATH: extendedPath,
+};
+
+/**
+ * Check if gh CLI is available on the system
+ */
+export async function isGhCliAvailable(): Promise<boolean> {
+  try {
+    const checkCommand = process.platform === 'win32' ? 'where gh' : 'command -v gh';
+    await execAsync(checkCommand, { env: execEnv });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export const AUTOMAKER_INITIAL_COMMIT_MESSAGE = 'chore: automaker initial commit';
+
+/**
+ * Normalize path separators to forward slashes for cross-platform consistency.
+ * This ensures paths from `path.join()` (backslashes on Windows) match paths
+ * from git commands (which may use forward slashes).
+ */
+export function normalizePath(p: string): string {
+  return p.replace(/\\/g, '/');
+}
+
+/**
+ * Check if a git repository has at least one commit (i.e., HEAD exists)
+ * Returns false for freshly initialized repos with no commits
+ */
+export async function hasCommits(repoPath: string): Promise<boolean> {
+  try {
+    await execAsync('git rev-parse --verify HEAD', { cwd: repoPath });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if an error is ENOENT (file/path not found or spawn failed)
+ * These are expected in test environments with mock paths
+ */
+export function isENOENT(error: unknown): boolean {
+  return error !== null && typeof error === 'object' && 'code' in error && error.code === 'ENOENT';
+}
+
+/**
+ * Check if a path is a mock/test path that doesn't exist
+ */
+export function isMockPath(worktreePath: string): boolean {
+  return worktreePath.startsWith('/mock/') || worktreePath.includes('/mock/');
+}
+
+/**
+ * Conditionally log worktree errors - suppress ENOENT for mock paths
+ * to reduce noise in test output
+ */
+export function logWorktreeError(error: unknown, message: string, worktreePath?: string): void {
+  // Don't log ENOENT errors for mock paths (expected in tests)
+  if (isENOENT(error) && worktreePath && isMockPath(worktreePath)) {
+    return;
+  }
+  logError(error, message);
+}
+
+// Re-export shared utilities
+export { getErrorMessageShared as getErrorMessage };
+export const logError = createLogError(logger);
+
+/**
+ * Ensure the repository has at least one commit so git commands that rely on HEAD work.
+ * Returns true if an empty commit was created, false if the repo already had commits.
+ * @param repoPath - Path to the git repository
+ * @param env - Optional environment variables to pass to git (e.g., GIT_AUTHOR_NAME, GIT_AUTHOR_EMAIL)
+ */
+export async function ensureInitialCommit(
+  repoPath: string,
+  env?: Record<string, string>
+): Promise<boolean> {
+  try {
+    await execAsync('git rev-parse --verify HEAD', { cwd: repoPath });
+    return false;
+  } catch {
+    try {
+      await execAsync(`git commit --allow-empty -m "${AUTOMAKER_INITIAL_COMMIT_MESSAGE}"`, {
+        cwd: repoPath,
+        env: { ...process.env, ...env },
+      });
+      logger.info(`[Worktree] Created initial empty commit to enable worktrees in ${repoPath}`);
+      return true;
+    } catch (error) {
+      const reason = getErrorMessageShared(error);
+      throw new Error(
+        `Failed to create initial git commit. Please commit manually and retry. ${reason}`
+      );
+    }
+  }
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/index.ts b/temp_repo/apps/server/src/routes/worktree/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d786616b2fb12463516be7ee43c287dde496b38d
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/index.ts
@@ -0,0 +1,341 @@
+/**
+ * Worktree routes - HTTP API for git worktree operations
+ */
+
+import { Router } from 'express';
+import type { EventEmitter } from '../../lib/events.js';
+import { validatePathParams } from '../../middleware/validate-paths.js';
+import { requireValidWorktree, requireValidProject, requireGitRepoOnly } from './middleware.js';
+import { createInfoHandler } from './routes/info.js';
+import { createStatusHandler } from './routes/status.js';
+import { createListHandler } from './routes/list.js';
+import { createDiffsHandler } from './routes/diffs.js';
+import { createFileDiffHandler } from './routes/file-diff.js';
+import { createMergeHandler } from './routes/merge.js';
+import { createCreateHandler } from './routes/create.js';
+import { createDeleteHandler } from './routes/delete.js';
+import { createCreatePRHandler } from './routes/create-pr.js';
+import { createPRInfoHandler } from './routes/pr-info.js';
+import { createCommitHandler } from './routes/commit.js';
+import { createGenerateCommitMessageHandler } from './routes/generate-commit-message.js';
+import { createPushHandler } from './routes/push.js';
+import { createPullHandler } from './routes/pull.js';
+import { createCheckoutBranchHandler } from './routes/checkout-branch.js';
+import { createListBranchesHandler } from './routes/list-branches.js';
+import { createSwitchBranchHandler } from './routes/switch-branch.js';
+import {
+  createOpenInEditorHandler,
+  createGetDefaultEditorHandler,
+  createGetAvailableEditorsHandler,
+  createRefreshEditorsHandler,
+} from './routes/open-in-editor.js';
+import {
+  createOpenInTerminalHandler,
+  createGetAvailableTerminalsHandler,
+  createGetDefaultTerminalHandler,
+  createRefreshTerminalsHandler,
+  createOpenInExternalTerminalHandler,
+} from './routes/open-in-terminal.js';
+import { createInitGitHandler } from './routes/init-git.js';
+import { createMigrateHandler } from './routes/migrate.js';
+import { createStartDevHandler } from './routes/start-dev.js';
+import { createStopDevHandler } from './routes/stop-dev.js';
+import { createListDevServersHandler } from './routes/list-dev-servers.js';
+import { createGetDevServerLogsHandler } from './routes/dev-server-logs.js';
+import { createStartTestsHandler } from './routes/start-tests.js';
+import { createStopTestsHandler } from './routes/stop-tests.js';
+import { createGetTestLogsHandler } from './routes/test-logs.js';
+import {
+  createGetInitScriptHandler,
+  createPutInitScriptHandler,
+  createDeleteInitScriptHandler,
+  createRunInitScriptHandler,
+} from './routes/init-script.js';
+import { createCommitLogHandler } from './routes/commit-log.js';
+import { createDiscardChangesHandler } from './routes/discard-changes.js';
+import { createListRemotesHandler } from './routes/list-remotes.js';
+import { createAddRemoteHandler } from './routes/add-remote.js';
+import { createStashPushHandler } from './routes/stash-push.js';
+import { createStashListHandler } from './routes/stash-list.js';
+import { createStashApplyHandler } from './routes/stash-apply.js';
+import { createStashDropHandler } from './routes/stash-drop.js';
+import { createCherryPickHandler } from './routes/cherry-pick.js';
+import { createBranchCommitLogHandler } from './routes/branch-commit-log.js';
+import { createGeneratePRDescriptionHandler } from './routes/generate-pr-description.js';
+import { createRebaseHandler } from './routes/rebase.js';
+import { createAbortOperationHandler } from './routes/abort-operation.js';
+import { createContinueOperationHandler } from './routes/continue-operation.js';
+import { createStageFilesHandler } from './routes/stage-files.js';
+import { createCheckChangesHandler } from './routes/check-changes.js';
+import { createSetTrackingHandler } from './routes/set-tracking.js';
+import { createSyncHandler } from './routes/sync.js';
+import { createUpdatePRNumberHandler } from './routes/update-pr-number.js';
+import type { SettingsService } from '../../services/settings-service.js';
+import type { FeatureLoader } from '../../services/feature-loader.js';
+
+export function createWorktreeRoutes(
+  events: EventEmitter,
+  settingsService?: SettingsService,
+  featureLoader?: FeatureLoader
+): Router {
+  const router = Router();
+
+  router.post('/info', validatePathParams('projectPath'), createInfoHandler());
+  router.post('/status', validatePathParams('projectPath'), createStatusHandler());
+  router.post('/list', createListHandler());
+  router.post('/diffs', validatePathParams('projectPath'), createDiffsHandler());
+  router.post('/file-diff', validatePathParams('projectPath', 'filePath'), createFileDiffHandler());
+  router.post(
+    '/merge',
+    validatePathParams('projectPath'),
+    requireValidProject,
+    createMergeHandler(events)
+  );
+  router.post(
+    '/create',
+    validatePathParams('projectPath'),
+    createCreateHandler(events, settingsService)
+  );
+  router.post(
+    '/delete',
+    validatePathParams('projectPath', 'worktreePath'),
+    createDeleteHandler(events, featureLoader)
+  );
+  router.post('/create-pr', createCreatePRHandler());
+  router.post('/pr-info', createPRInfoHandler());
+  router.post(
+    '/update-pr-number',
+    validatePathParams('worktreePath', 'projectPath?'),
+    requireValidWorktree,
+    createUpdatePRNumberHandler()
+  );
+  router.post(
+    '/commit',
+    validatePathParams('worktreePath'),
+    requireGitRepoOnly,
+    createCommitHandler()
+  );
+  router.post(
+    '/generate-commit-message',
+    validatePathParams('worktreePath'),
+    requireGitRepoOnly,
+    createGenerateCommitMessageHandler(settingsService)
+  );
+  router.post(
+    '/push',
+    validatePathParams('worktreePath'),
+    requireValidWorktree,
+    createPushHandler()
+  );
+  router.post(
+    '/pull',
+    validatePathParams('worktreePath'),
+    requireValidWorktree,
+    createPullHandler()
+  );
+  router.post(
+    '/sync',
+    validatePathParams('worktreePath'),
+    requireValidWorktree,
+    createSyncHandler()
+  );
+  router.post(
+    '/set-tracking',
+    validatePathParams('worktreePath'),
+    requireValidWorktree,
+    createSetTrackingHandler()
+  );
+  router.post(
+    '/checkout-branch',
+    validatePathParams('worktreePath'),
+    requireValidWorktree,
+    createCheckoutBranchHandler(events)
+  );
+  router.post(
+    '/check-changes',
+    validatePathParams('worktreePath'),
+    requireGitRepoOnly,
+    createCheckChangesHandler()
+  );
+  router.post(
+    '/list-branches',
+    validatePathParams('worktreePath'),
+    requireValidWorktree,
+    createListBranchesHandler()
+  );
+  router.post(
+    '/switch-branch',
+    validatePathParams('worktreePath'),
+    requireValidWorktree,
+    createSwitchBranchHandler(events)
+  );
+  router.post('/open-in-editor', validatePathParams('worktreePath'), createOpenInEditorHandler());
+  router.post(
+    '/open-in-terminal',
+    validatePathParams('worktreePath'),
+    createOpenInTerminalHandler()
+  );
+  router.get('/default-editor', createGetDefaultEditorHandler());
+  router.get('/available-editors', createGetAvailableEditorsHandler());
+  router.post('/refresh-editors', createRefreshEditorsHandler());
+
+  // External terminal routes
+  router.get('/available-terminals', createGetAvailableTerminalsHandler());
+  router.get('/default-terminal', createGetDefaultTerminalHandler());
+  router.post('/refresh-terminals', createRefreshTerminalsHandler());
+  router.post(
+    '/open-in-external-terminal',
+    validatePathParams('worktreePath'),
+    createOpenInExternalTerminalHandler()
+  );
+
+  router.post('/init-git', validatePathParams('projectPath'), createInitGitHandler());
+  router.post('/migrate', createMigrateHandler());
+  router.post(
+    '/start-dev',
+    validatePathParams('projectPath', 'worktreePath'),
+    createStartDevHandler(settingsService)
+  );
+  router.post('/stop-dev', createStopDevHandler());
+  router.post('/list-dev-servers', createListDevServersHandler());
+  router.get(
+    '/dev-server-logs',
+    validatePathParams('worktreePath'),
+    createGetDevServerLogsHandler()
+  );
+
+  // Test runner routes
+  router.post(
+    '/start-tests',
+    validatePathParams('worktreePath', 'projectPath?'),
+    createStartTestsHandler(settingsService)
+  );
+  router.post('/stop-tests', createStopTestsHandler());
+  router.get('/test-logs', validatePathParams('worktreePath?'), createGetTestLogsHandler());
+
+  // Init script routes
+  router.get('/init-script', createGetInitScriptHandler());
+  router.put('/init-script', validatePathParams('projectPath'), createPutInitScriptHandler());
+  router.delete('/init-script', validatePathParams('projectPath'), createDeleteInitScriptHandler());
+  router.post(
+    '/run-init-script',
+    validatePathParams('projectPath', 'worktreePath'),
+    createRunInitScriptHandler(events)
+  );
+
+  // Discard changes route
+  router.post(
+    '/discard-changes',
+    validatePathParams('worktreePath'),
+    requireGitRepoOnly,
+    createDiscardChangesHandler()
+  );
+
+  // List remotes route
+  router.post(
+    '/list-remotes',
+    validatePathParams('worktreePath'),
+    requireValidWorktree,
+    createListRemotesHandler()
+  );
+
+  // Add remote route
+  router.post(
+    '/add-remote',
+    validatePathParams('worktreePath'),
+    requireGitRepoOnly,
+    createAddRemoteHandler()
+  );
+
+  // Commit log route
+  router.post(
+    '/commit-log',
+    validatePathParams('worktreePath'),
+    requireValidWorktree,
+    createCommitLogHandler(events)
+  );
+
+  // Stash routes
+  router.post(
+    '/stash-push',
+    validatePathParams('worktreePath'),
+    requireGitRepoOnly,
+    createStashPushHandler(events)
+  );
+  router.post(
+    '/stash-list',
+    validatePathParams('worktreePath'),
+    requireGitRepoOnly,
+    createStashListHandler(events)
+  );
+  router.post(
+    '/stash-apply',
+    validatePathParams('worktreePath'),
+    requireGitRepoOnly,
+    createStashApplyHandler(events)
+  );
+  router.post(
+    '/stash-drop',
+    validatePathParams('worktreePath'),
+    requireGitRepoOnly,
+    createStashDropHandler(events)
+  );
+
+  // Cherry-pick route
+  router.post(
+    '/cherry-pick',
+    validatePathParams('worktreePath'),
+    requireValidWorktree,
+    createCherryPickHandler(events)
+  );
+
+  // Generate PR description route
+  router.post(
+    '/generate-pr-description',
+    validatePathParams('worktreePath'),
+    requireGitRepoOnly,
+    createGeneratePRDescriptionHandler(settingsService)
+  );
+
+  // Branch commit log route (get commits from a specific branch)
+  router.post(
+    '/branch-commit-log',
+    validatePathParams('worktreePath'),
+    requireValidWorktree,
+    createBranchCommitLogHandler(events)
+  );
+
+  // Rebase route
+  router.post(
+    '/rebase',
+    validatePathParams('worktreePath'),
+    requireValidWorktree,
+    createRebaseHandler(events)
+  );
+
+  // Abort in-progress merge/rebase/cherry-pick
+  router.post(
+    '/abort-operation',
+    validatePathParams('worktreePath'),
+    requireGitRepoOnly,
+    createAbortOperationHandler(events)
+  );
+
+  // Continue in-progress merge/rebase/cherry-pick after resolving conflicts
+  router.post(
+    '/continue-operation',
+    validatePathParams('worktreePath'),
+    requireGitRepoOnly,
+    createContinueOperationHandler(events)
+  );
+
+  // Stage/unstage files route
+  router.post(
+    '/stage-files',
+    validatePathParams('worktreePath', 'files[]'),
+    requireGitRepoOnly,
+    createStageFilesHandler()
+  );
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/middleware.ts b/temp_repo/apps/server/src/routes/worktree/middleware.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eb83377f6a0dfbb96b290e67e3ab7806eac29efb
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/middleware.ts
@@ -0,0 +1,75 @@
+/**
+ * Middleware for worktree route validation
+ */
+
+import type { Request, Response, NextFunction } from 'express';
+import { isGitRepo } from '@automaker/git-utils';
+import { hasCommits } from './common.js';
+
+interface ValidationOptions {
+  /** Check if the path is a git repository (default: true) */
+  requireGitRepo?: boolean;
+  /** Check if the repository has at least one commit (default: true) */
+  requireCommits?: boolean;
+  /** The name of the request body field containing the path (default: 'worktreePath') */
+  pathField?: 'worktreePath' | 'projectPath';
+}
+
+/**
+ * Middleware factory to validate that a path is a valid git repository with commits.
+ * This reduces code duplication across route handlers.
+ *
+ * @param options - Validation options
+ * @returns Express middleware function
+ */
+export function requireValidGitRepo(options: ValidationOptions = {}) {
+  const { requireGitRepo = true, requireCommits = true, pathField = 'worktreePath' } = options;
+
+  return async (req: Request, res: Response, next: NextFunction): Promise<void> => {
+    const repoPath = req.body[pathField] as string | undefined;
+
+    if (!repoPath) {
+      // Let the route handler deal with missing path validation
+      next();
+      return;
+    }
+
+    if (requireGitRepo && !(await isGitRepo(repoPath))) {
+      res.status(400).json({
+        success: false,
+        error: 'Not a git repository',
+        code: 'NOT_GIT_REPO',
+      });
+      return;
+    }
+
+    if (requireCommits && !(await hasCommits(repoPath))) {
+      res.status(400).json({
+        success: false,
+        error: 'Repository has no commits yet',
+        code: 'NO_COMMITS',
+      });
+      return;
+    }
+
+    next();
+  };
+}
+
+/**
+ * Middleware to validate git repo for worktreePath field
+ */
+export const requireValidWorktree = requireValidGitRepo({ pathField: 'worktreePath' });
+
+/**
+ * Middleware to validate git repo for projectPath field
+ */
+export const requireValidProject = requireValidGitRepo({ pathField: 'projectPath' });
+
+/**
+ * Middleware to validate git repo without requiring commits (for commit route)
+ */
+export const requireGitRepoOnly = requireValidGitRepo({
+  pathField: 'worktreePath',
+  requireCommits: false,
+});
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/abort-operation.ts b/temp_repo/apps/server/src/routes/worktree/routes/abort-operation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..297e2ac8a8d00dca545c9dc69c49a9f9697b0714
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/abort-operation.ts
@@ -0,0 +1,117 @@
+/**
+ * POST /abort-operation endpoint - Abort an in-progress merge, rebase, or cherry-pick
+ *
+ * Detects which operation (merge, rebase, or cherry-pick) is in progress
+ * and aborts it, returning the repository to a clean state.
+ */
+
+import type { Request, Response } from 'express';
+import path from 'path';
+import * as fs from 'fs/promises';
+import { getErrorMessage, logError, execAsync } from '../common.js';
+import type { EventEmitter } from '../../../lib/events.js';
+
+/**
+ * Detect what type of conflict operation is currently in progress
+ */
+async function detectOperation(
+  worktreePath: string
+): Promise<'merge' | 'rebase' | 'cherry-pick' | null> {
+  try {
+    const { stdout: gitDirRaw } = await execAsync('git rev-parse --git-dir', {
+      cwd: worktreePath,
+    });
+    const gitDir = path.resolve(worktreePath, gitDirRaw.trim());
+
+    const [rebaseMergeExists, rebaseApplyExists, mergeHeadExists, cherryPickHeadExists] =
+      await Promise.all([
+        fs
+          .access(path.join(gitDir, 'rebase-merge'))
+          .then(() => true)
+          .catch(() => false),
+        fs
+          .access(path.join(gitDir, 'rebase-apply'))
+          .then(() => true)
+          .catch(() => false),
+        fs
+          .access(path.join(gitDir, 'MERGE_HEAD'))
+          .then(() => true)
+          .catch(() => false),
+        fs
+          .access(path.join(gitDir, 'CHERRY_PICK_HEAD'))
+          .then(() => true)
+          .catch(() => false),
+      ]);
+
+    if (rebaseMergeExists || rebaseApplyExists) return 'rebase';
+    if (mergeHeadExists) return 'merge';
+    if (cherryPickHeadExists) return 'cherry-pick';
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export function createAbortOperationHandler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath } = req.body as {
+        worktreePath: string;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath is required',
+        });
+        return;
+      }
+
+      const resolvedWorktreePath = path.resolve(worktreePath);
+
+      // Detect what operation is in progress
+      const operation = await detectOperation(resolvedWorktreePath);
+
+      if (!operation) {
+        res.status(400).json({
+          success: false,
+          error: 'No merge, rebase, or cherry-pick in progress',
+        });
+        return;
+      }
+
+      // Abort the operation
+      let abortCommand: string;
+      switch (operation) {
+        case 'merge':
+          abortCommand = 'git merge --abort';
+          break;
+        case 'rebase':
+          abortCommand = 'git rebase --abort';
+          break;
+        case 'cherry-pick':
+          abortCommand = 'git cherry-pick --abort';
+          break;
+      }
+
+      await execAsync(abortCommand, { cwd: resolvedWorktreePath });
+
+      // Emit event
+      events.emit('conflict:aborted', {
+        worktreePath: resolvedWorktreePath,
+        operation,
+      });
+
+      res.json({
+        success: true,
+        result: {
+          operation,
+          message: `${operation.charAt(0).toUpperCase() + operation.slice(1)} aborted successfully`,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Abort operation failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/add-remote.ts b/temp_repo/apps/server/src/routes/worktree/routes/add-remote.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2938920367fec184a851761fb178e76ce3b0e238
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/add-remote.ts
@@ -0,0 +1,166 @@
+/**
+ * POST /add-remote endpoint - Add a new remote to a git repository
+ *
+ * Note: Git repository validation (isGitRepo, hasCommits) is handled by
+ * the requireValidWorktree middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import { execFile } from 'child_process';
+import { promisify } from 'util';
+import { getErrorMessage, logWorktreeError } from '../common.js';
+
+const execFileAsync = promisify(execFile);
+
+/** Maximum allowed length for remote names */
+const MAX_REMOTE_NAME_LENGTH = 250;
+
+/** Maximum allowed length for remote URLs */
+const MAX_REMOTE_URL_LENGTH = 2048;
+
+/** Timeout for git fetch operations (30 seconds) */
+const FETCH_TIMEOUT_MS = 30000;
+
+/**
+ * Validate remote name - must be alphanumeric with dashes/underscores
+ * Git remote names have similar restrictions to branch names
+ */
+function isValidRemoteName(name: string): boolean {
+  // Remote names should be alphanumeric, may contain dashes, underscores, periods
+  // Cannot start with a dash or period, cannot be empty
+  if (!name || name.length === 0 || name.length > MAX_REMOTE_NAME_LENGTH) {
+    return false;
+  }
+  return /^[a-zA-Z0-9][a-zA-Z0-9._-]*$/.test(name);
+}
+
+/**
+ * Validate remote URL - basic validation for git remote URLs
+ * Supports HTTPS, SSH, and git:// protocols
+ */
+function isValidRemoteUrl(url: string): boolean {
+  if (!url || url.length === 0 || url.length > MAX_REMOTE_URL_LENGTH) {
+    return false;
+  }
+  // Support common git URL formats:
+  // - https://github.com/user/repo.git
+  // - git@github.com:user/repo.git
+  // - git://github.com/user/repo.git
+  // - ssh://git@github.com/user/repo.git
+  const httpsPattern = /^https?:\/\/.+/;
+  const sshPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+:.+/;
+  const gitProtocolPattern = /^git:\/\/.+/;
+  const sshProtocolPattern = /^ssh:\/\/.+/;
+
+  return (
+    httpsPattern.test(url) ||
+    sshPattern.test(url) ||
+    gitProtocolPattern.test(url) ||
+    sshProtocolPattern.test(url)
+  );
+}
+
+export function createAddRemoteHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, remoteName, remoteUrl } = req.body as {
+        worktreePath: string;
+        remoteName: string;
+        remoteUrl: string;
+      };
+
+      // Validate required fields
+      const requiredFields = { worktreePath, remoteName, remoteUrl };
+      for (const [key, value] of Object.entries(requiredFields)) {
+        if (!value) {
+          res.status(400).json({ success: false, error: `${key} required` });
+          return;
+        }
+      }
+
+      // Validate remote name
+      if (!isValidRemoteName(remoteName)) {
+        res.status(400).json({
+          success: false,
+          error:
+            'Invalid remote name. Must start with alphanumeric character and contain only letters, numbers, dashes, underscores, or periods.',
+        });
+        return;
+      }
+
+      // Validate remote URL
+      if (!isValidRemoteUrl(remoteUrl)) {
+        res.status(400).json({
+          success: false,
+          error: 'Invalid remote URL. Must be a valid git URL (HTTPS, SSH, or git:// protocol).',
+        });
+        return;
+      }
+
+      // Check if remote already exists
+      try {
+        const { stdout: existingRemotes } = await execFileAsync('git', ['remote'], {
+          cwd: worktreePath,
+        });
+        const remoteNames = existingRemotes
+          .trim()
+          .split('\n')
+          .filter((r) => r.trim());
+        if (remoteNames.includes(remoteName)) {
+          res.status(400).json({
+            success: false,
+            error: `Remote '${remoteName}' already exists`,
+            code: 'REMOTE_EXISTS',
+          });
+          return;
+        }
+      } catch (error) {
+        // If git remote fails, continue with adding the remote. Log for debugging.
+        logWorktreeError(
+          error,
+          'Checking for existing remotes failed, proceeding to add.',
+          worktreePath
+        );
+      }
+
+      // Add the remote using execFile with array arguments to prevent command injection
+      await execFileAsync('git', ['remote', 'add', remoteName, remoteUrl], {
+        cwd: worktreePath,
+      });
+
+      // Optionally fetch from the new remote to get its branches
+      let fetchSucceeded = false;
+      try {
+        await execFileAsync('git', ['fetch', remoteName, '--quiet'], {
+          cwd: worktreePath,
+          timeout: FETCH_TIMEOUT_MS,
+        });
+        fetchSucceeded = true;
+      } catch (fetchError) {
+        // Fetch failed (maybe offline or invalid URL), but remote was added successfully
+        logWorktreeError(
+          fetchError,
+          `Fetch from new remote '${remoteName}' failed (remote added successfully)`,
+          worktreePath
+        );
+        fetchSucceeded = false;
+      }
+
+      res.json({
+        success: true,
+        result: {
+          remoteName,
+          remoteUrl,
+          fetched: fetchSucceeded,
+          message: fetchSucceeded
+            ? `Successfully added remote '${remoteName}' and fetched its branches`
+            : `Successfully added remote '${remoteName}' (fetch failed - you may need to fetch manually)`,
+        },
+      });
+    } catch (error) {
+      const worktreePath = req.body?.worktreePath;
+      logWorktreeError(error, 'Add remote failed', worktreePath);
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/branch-commit-log.ts b/temp_repo/apps/server/src/routes/worktree/routes/branch-commit-log.ts
new file mode 100644
index 0000000000000000000000000000000000000000..60562d9758da703b14d48f6a24f1e2a8f6f377e8
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/branch-commit-log.ts
@@ -0,0 +1,92 @@
+/**
+ * POST /branch-commit-log endpoint - Get recent commit history for a specific branch
+ *
+ * Similar to commit-log but allows specifying a branch name to get commits from
+ * any branch, not just the currently checked out one. Useful for cherry-pick workflows
+ * where you need to browse commits from other branches.
+ *
+ * The handler only validates input, invokes the service, streams lifecycle events
+ * via the EventEmitter, and sends the final JSON response.
+ *
+ * Note: Git repository validation (isGitRepo, hasCommits) is handled by
+ * the requireValidWorktree middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import { getErrorMessage, logError } from '../common.js';
+import { getBranchCommitLog } from '../../../services/branch-commit-log-service.js';
+import { isValidBranchName } from '@automaker/utils';
+
+export function createBranchCommitLogHandler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const {
+        worktreePath,
+        branchName,
+        limit = 20,
+      } = req.body as {
+        worktreePath: string;
+        branchName?: string;
+        limit?: number;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      // Validate branchName before forwarding to execGitCommand.
+      // Reject values that start with '-', contain NUL, contain path-traversal
+      // sequences, or include characters outside the safe whitelist.
+      // An absent branchName is allowed (the service defaults it to HEAD).
+      if (branchName !== undefined && !isValidBranchName(branchName)) {
+        res.status(400).json({
+          success: false,
+          error: 'Invalid branchName: value contains unsafe characters or sequences',
+        });
+        return;
+      }
+
+      // Emit start event so the frontend can observe progress
+      events.emit('branchCommitLog:start', {
+        worktreePath,
+        branchName: branchName || 'HEAD',
+        limit,
+      });
+
+      // Delegate all Git work to the service
+      const result = await getBranchCommitLog(worktreePath, branchName, limit);
+
+      // Emit progress with the number of commits fetched
+      events.emit('branchCommitLog:progress', {
+        worktreePath,
+        branchName: result.branch,
+        commitsLoaded: result.total,
+      });
+
+      // Emit done event
+      events.emit('branchCommitLog:done', {
+        worktreePath,
+        branchName: result.branch,
+        total: result.total,
+      });
+
+      res.json({
+        success: true,
+        result,
+      });
+    } catch (error) {
+      // Emit error event so the frontend can react
+      events.emit('branchCommitLog:error', {
+        error: getErrorMessage(error),
+      });
+
+      logError(error, 'Get branch commit log failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/branch-tracking.ts b/temp_repo/apps/server/src/routes/worktree/routes/branch-tracking.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4144b94a374ae41ca8af3a9c500ed98bd0730203
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/branch-tracking.ts
@@ -0,0 +1,109 @@
+/**
+ * Branch tracking utilities
+ *
+ * Tracks active branches in .automaker so users
+ * can switch between branches even after worktrees are removed.
+ */
+
+import * as secureFs from '../../../lib/secure-fs.js';
+import path from 'path';
+import { getBranchTrackingPath, ensureAutomakerDir } from '@automaker/platform';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('BranchTracking');
+
+export interface TrackedBranch {
+  name: string;
+  createdAt: string;
+  lastActivatedAt?: string;
+}
+
+interface BranchTrackingData {
+  branches: TrackedBranch[];
+}
+
+/**
+ * Read tracked branches from file
+ */
+export async function getTrackedBranches(projectPath: string): Promise<TrackedBranch[]> {
+  try {
+    const filePath = getBranchTrackingPath(projectPath);
+    const content = (await secureFs.readFile(filePath, 'utf-8')) as string;
+    const data: BranchTrackingData = JSON.parse(content);
+    return data.branches || [];
+  } catch (error: unknown) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      return [];
+    }
+    logger.warn('Failed to read tracked branches:', error);
+    return [];
+  }
+}
+
+/**
+ * Save tracked branches to file
+ */
+async function saveTrackedBranches(projectPath: string, branches: TrackedBranch[]): Promise<void> {
+  const automakerDir = await ensureAutomakerDir(projectPath);
+  const filePath = path.join(automakerDir, 'active-branches.json');
+  const data: BranchTrackingData = { branches };
+  await secureFs.writeFile(filePath, JSON.stringify(data, null, 2), 'utf-8');
+}
+
+/**
+ * Add a branch to tracking
+ */
+export async function trackBranch(projectPath: string, branchName: string): Promise<void> {
+  const branches = await getTrackedBranches(projectPath);
+
+  // Check if already tracked
+  const existing = branches.find((b) => b.name === branchName);
+  if (existing) {
+    return; // Already tracked
+  }
+
+  branches.push({
+    name: branchName,
+    createdAt: new Date().toISOString(),
+  });
+
+  await saveTrackedBranches(projectPath, branches);
+  logger.info(`Now tracking branch: ${branchName}`);
+}
+
+/**
+ * Remove a branch from tracking
+ */
+export async function untrackBranch(projectPath: string, branchName: string): Promise<void> {
+  const branches = await getTrackedBranches(projectPath);
+  const filtered = branches.filter((b) => b.name !== branchName);
+
+  if (filtered.length !== branches.length) {
+    await saveTrackedBranches(projectPath, filtered);
+    logger.info(`Stopped tracking branch: ${branchName}`);
+  }
+}
+
+/**
+ * Update last activated timestamp for a branch
+ */
+export async function updateBranchActivation(
+  projectPath: string,
+  branchName: string
+): Promise<void> {
+  const branches = await getTrackedBranches(projectPath);
+  const branch = branches.find((b) => b.name === branchName);
+
+  if (branch) {
+    branch.lastActivatedAt = new Date().toISOString();
+    await saveTrackedBranches(projectPath, branches);
+  }
+}
+
+/**
+ * Check if a branch is tracked
+ */
+export async function isBranchTracked(projectPath: string, branchName: string): Promise<boolean> {
+  const branches = await getTrackedBranches(projectPath);
+  return branches.some((b) => b.name === branchName);
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/check-changes.ts b/temp_repo/apps/server/src/routes/worktree/routes/check-changes.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b49ba8ff5ecf8699230f9ecf00e1fd69913a1bdb
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/check-changes.ts
@@ -0,0 +1,104 @@
+/**
+ * POST /check-changes endpoint - Check for uncommitted changes in a worktree
+ *
+ * Returns a summary of staged, unstaged, and untracked files to help
+ * the user decide whether to stash before a branch operation.
+ *
+ * Note: Git repository validation (isGitRepo) is handled by
+ * the requireGitRepoOnly middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from '../common.js';
+import { execGitCommand } from '../../../lib/git.js';
+
+/**
+ * Parse `git status --porcelain` output into categorised file lists.
+ *
+ * Porcelain format gives two status characters per line:
+ *   XY filename
+ * where X is the index (staged) status and Y is the worktree (unstaged) status.
+ *
+ *  - '?' in both columns → untracked
+ *  - Non-space/non-'?' in X → staged change
+ *  - Non-space/non-'?' in Y (when not untracked) → unstaged change
+ *
+ * A file can appear in both staged and unstaged if it was partially staged.
+ */
+function parseStatusOutput(stdout: string): {
+  staged: string[];
+  unstaged: string[];
+  untracked: string[];
+} {
+  const staged: string[] = [];
+  const unstaged: string[] = [];
+  const untracked: string[] = [];
+
+  const lines = stdout.trim().split('\n').filter(Boolean);
+
+  for (const line of lines) {
+    if (line.length < 3) continue;
+
+    const x = line[0]; // index status
+    const y = line[1]; // worktree status
+    // Handle renames which use " -> " separator
+    const rawPath = line.slice(3);
+    const filePath = rawPath.includes(' -> ') ? rawPath.split(' -> ')[1] : rawPath;
+
+    if (x === '?' && y === '?') {
+      untracked.push(filePath);
+    } else {
+      if (x !== ' ' && x !== '?') {
+        staged.push(filePath);
+      }
+      if (y !== ' ' && y !== '?') {
+        unstaged.push(filePath);
+      }
+    }
+  }
+
+  return { staged, unstaged, untracked };
+}
+
+export function createCheckChangesHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath } = req.body as {
+        worktreePath: string;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      // Get porcelain status (includes staged, unstaged, and untracked files)
+      const stdout = await execGitCommand(['status', '--porcelain'], worktreePath);
+
+      const { staged, unstaged, untracked } = parseStatusOutput(stdout);
+
+      const hasChanges = staged.length > 0 || unstaged.length > 0 || untracked.length > 0;
+
+      // Deduplicate file paths across staged, unstaged, and untracked arrays
+      // to avoid double-counting partially staged files
+      const uniqueFilePaths = new Set([...staged, ...unstaged, ...untracked]);
+
+      res.json({
+        success: true,
+        result: {
+          hasChanges,
+          staged,
+          unstaged,
+          untracked,
+          totalFiles: uniqueFilePaths.size,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Check changes failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/checkout-branch.ts b/temp_repo/apps/server/src/routes/worktree/routes/checkout-branch.ts
new file mode 100644
index 0000000000000000000000000000000000000000..97b4419b57745ed18eff7b9673ff3eb80b947566
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/checkout-branch.ts
@@ -0,0 +1,229 @@
+/**
+ * POST /checkout-branch endpoint - Create and checkout a new branch
+ *
+ * Supports automatic stash handling: when `stashChanges` is true, local changes
+ * are stashed before creating the branch and reapplied after. If the stash pop
+ * results in merge conflicts, returns a special response so the UI can create a
+ * conflict resolution task.
+ *
+ * Git business logic is delegated to checkout-branch-service.ts when stash
+ * handling is requested. Otherwise, falls back to the original simple flow.
+ *
+ * Note: Git repository validation (isGitRepo, hasCommits) is handled by
+ * the requireValidWorktree middleware in index.ts.
+ * Path validation (ALLOWED_ROOT_DIRECTORY) is handled by validatePathParams
+ * middleware in index.ts.
+ */
+
+import type { Request, Response } from 'express';
+import path from 'path';
+import { stat } from 'fs/promises';
+import { getErrorMessage, logError, isValidBranchName } from '../common.js';
+import { execGitCommand } from '../../../lib/git.js';
+import type { EventEmitter } from '../../../lib/events.js';
+import { performCheckoutBranch } from '../../../services/checkout-branch-service.js';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('CheckoutBranchRoute');
+
+/** Timeout for git fetch operations (30 seconds) */
+const FETCH_TIMEOUT_MS = 30_000;
+
+/**
+ * Fetch latest from all remotes (silently, with timeout).
+ * Non-fatal: fetch errors are logged and swallowed so the workflow continues.
+ */
+async function fetchRemotes(cwd: string): Promise<void> {
+  const controller = new AbortController();
+  const timerId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+
+  try {
+    await execGitCommand(['fetch', '--all', '--quiet'], cwd, undefined, controller);
+  } catch (error) {
+    if (error instanceof Error && error.message === 'Process aborted') {
+      logger.warn(
+        `fetchRemotes timed out after ${FETCH_TIMEOUT_MS}ms - continuing without latest remote refs`
+      );
+    } else {
+      logger.warn(`fetchRemotes failed: ${getErrorMessage(error)} - continuing with local refs`);
+    }
+    // Non-fatal: continue with locally available refs
+  } finally {
+    clearTimeout(timerId);
+  }
+}
+
+export function createCheckoutBranchHandler(events?: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, branchName, baseBranch, stashChanges, includeUntracked } = req.body as {
+        worktreePath: string;
+        branchName: string;
+        baseBranch?: string;
+        /** When true, stash local changes before checkout and reapply after */
+        stashChanges?: boolean;
+        /** When true, include untracked files in the stash (defaults to true) */
+        includeUntracked?: boolean;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      if (!branchName) {
+        res.status(400).json({
+          success: false,
+          error: 'branchName required',
+        });
+        return;
+      }
+
+      // Validate branch name using shared allowlist: /^[a-zA-Z0-9._\-/]+$/
+      if (!isValidBranchName(branchName)) {
+        res.status(400).json({
+          success: false,
+          error:
+            'Invalid branch name. Must contain only letters, numbers, dots, dashes, underscores, or slashes.',
+        });
+        return;
+      }
+
+      // Validate base branch if provided
+      if (baseBranch && !isValidBranchName(baseBranch) && baseBranch !== 'HEAD') {
+        res.status(400).json({
+          success: false,
+          error:
+            'Invalid base branch name. Must contain only letters, numbers, dots, dashes, underscores, or slashes.',
+        });
+        return;
+      }
+
+      // Resolve and validate worktreePath to prevent traversal attacks.
+      const resolvedPath = path.resolve(worktreePath);
+      try {
+        const stats = await stat(resolvedPath);
+        if (!stats.isDirectory()) {
+          res.status(400).json({
+            success: false,
+            error: 'worktreePath is not a directory',
+          });
+          return;
+        }
+      } catch {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath does not exist or is not accessible',
+        });
+        return;
+      }
+
+      // Use the service for stash-aware checkout
+      if (stashChanges) {
+        const result = await performCheckoutBranch(
+          resolvedPath,
+          branchName,
+          baseBranch,
+          {
+            stashChanges: true,
+            includeUntracked: includeUntracked ?? true,
+          },
+          events
+        );
+
+        if (!result.success) {
+          const statusCode = isBranchError(result.error) ? 400 : 500;
+          res.status(statusCode).json({
+            success: false,
+            error: result.error,
+            ...(result.stashPopConflicts !== undefined && {
+              stashPopConflicts: result.stashPopConflicts,
+            }),
+            ...(result.stashPopConflictMessage && {
+              stashPopConflictMessage: result.stashPopConflictMessage,
+            }),
+          });
+          return;
+        }
+
+        res.json({
+          success: true,
+          result: result.result,
+        });
+        return;
+      }
+
+      // Original simple flow (no stash handling)
+      // Fetch latest remote refs before creating the branch so that
+      // base branch validation works for remote references like "origin/main"
+      await fetchRemotes(resolvedPath);
+
+      const currentBranchOutput = await execGitCommand(
+        ['rev-parse', '--abbrev-ref', 'HEAD'],
+        resolvedPath
+      );
+      const currentBranch = currentBranchOutput.trim();
+
+      // Check if branch already exists
+      try {
+        await execGitCommand(['rev-parse', '--verify', branchName], resolvedPath);
+        res.status(400).json({
+          success: false,
+          error: `Branch '${branchName}' already exists`,
+        });
+        return;
+      } catch {
+        // Branch doesn't exist, good to create
+      }
+
+      // If baseBranch is provided, verify it exists before using it
+      if (baseBranch) {
+        try {
+          await execGitCommand(['rev-parse', '--verify', baseBranch], resolvedPath);
+        } catch {
+          res.status(400).json({
+            success: false,
+            error: `Base branch '${baseBranch}' does not exist`,
+          });
+          return;
+        }
+      }
+
+      // Create and checkout the new branch
+      const checkoutArgs = ['checkout', '-b', branchName];
+      if (baseBranch) {
+        checkoutArgs.push(baseBranch);
+      }
+      await execGitCommand(checkoutArgs, resolvedPath);
+
+      res.json({
+        success: true,
+        result: {
+          previousBranch: currentBranch,
+          newBranch: branchName,
+          message: `Created and checked out branch '${branchName}'`,
+        },
+      });
+    } catch (error) {
+      events?.emit('switch:error', {
+        error: getErrorMessage(error),
+      });
+
+      logError(error, 'Checkout branch failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+/**
+ * Determine whether an error message represents a client error (400).
+ * Stash failures are server-side errors and are intentionally excluded here
+ * so they are returned as HTTP 500 rather than HTTP 400.
+ */
+function isBranchError(error?: string): boolean {
+  if (!error) return false;
+  return error.includes('already exists') || error.includes('does not exist');
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/cherry-pick.ts b/temp_repo/apps/server/src/routes/worktree/routes/cherry-pick.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8f404a0f5598c5885738f4718adbc20fb0adfbef
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/cherry-pick.ts
@@ -0,0 +1,107 @@
+/**
+ * POST /cherry-pick endpoint - Cherry-pick one or more commits into the current branch
+ *
+ * Applies commits from another branch onto the current branch.
+ * Supports single or multiple commit cherry-picks.
+ *
+ * Git business logic is delegated to cherry-pick-service.ts.
+ * Events are emitted at key lifecycle points for WebSocket subscribers.
+ * The global event emitter is passed into the service so all lifecycle
+ * events (started, success, conflict, abort, verify-failed) are broadcast
+ * to WebSocket clients.
+ *
+ * Note: Git repository validation (isGitRepo, hasCommits) is handled by
+ * the requireValidWorktree middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import path from 'path';
+import { getErrorMessage, logError } from '../common.js';
+import type { EventEmitter } from '../../../lib/events.js';
+import { verifyCommits, runCherryPick } from '../../../services/cherry-pick-service.js';
+
+export function createCherryPickHandler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, commitHashes, options } = req.body as {
+        worktreePath: string;
+        commitHashes: string[];
+        options?: {
+          noCommit?: boolean;
+        };
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath is required',
+        });
+        return;
+      }
+
+      // Normalize the path to prevent path traversal and ensure consistent paths
+      const resolvedWorktreePath = path.resolve(worktreePath);
+
+      if (!commitHashes || !Array.isArray(commitHashes) || commitHashes.length === 0) {
+        res.status(400).json({
+          success: false,
+          error: 'commitHashes array is required and must contain at least one commit hash',
+        });
+        return;
+      }
+
+      // Validate each commit hash format (should be hex string)
+      for (const hash of commitHashes) {
+        if (!/^[a-fA-F0-9]+$/.test(hash)) {
+          res.status(400).json({
+            success: false,
+            error: `Invalid commit hash format: "${hash}"`,
+          });
+          return;
+        }
+      }
+
+      // Verify each commit exists via the service; emits cherry-pick:verify-failed if any hash is missing
+      const invalidHash = await verifyCommits(resolvedWorktreePath, commitHashes, events);
+      if (invalidHash !== null) {
+        res.status(400).json({
+          success: false,
+          error: `Commit "${invalidHash}" does not exist`,
+        });
+        return;
+      }
+
+      // Execute the cherry-pick via the service.
+      // The service emits: cherry-pick:started, cherry-pick:success, cherry-pick:conflict,
+      // and cherry-pick:abort at the appropriate lifecycle points.
+      const result = await runCherryPick(resolvedWorktreePath, commitHashes, options, events);
+
+      if (result.success) {
+        res.json({
+          success: true,
+          result: {
+            cherryPicked: result.cherryPicked,
+            commitHashes: result.commitHashes,
+            branch: result.branch,
+            message: result.message,
+          },
+        });
+      } else if (result.hasConflicts) {
+        res.status(409).json({
+          success: false,
+          error: result.error,
+          hasConflicts: true,
+          aborted: result.aborted,
+        });
+      }
+    } catch (error) {
+      // Emit failure event for unexpected (non-conflict) errors
+      events.emit('cherry-pick:failure', {
+        error: getErrorMessage(error),
+      });
+
+      logError(error, 'Cherry-pick failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/commit-log.ts b/temp_repo/apps/server/src/routes/worktree/routes/commit-log.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dbdce1c3196649eb695abad7b8ce5d703c554849
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/commit-log.ts
@@ -0,0 +1,72 @@
+/**
+ * POST /commit-log endpoint - Get recent commit history for a worktree
+ *
+ * The handler only validates input, invokes the service, streams lifecycle
+ * events via the EventEmitter, and sends the final JSON response.
+ *
+ * Git business logic is delegated to commit-log-service.ts.
+ * Events are emitted at key lifecycle points for WebSocket subscribers.
+ *
+ * Note: Git repository validation (isGitRepo, hasCommits) is handled by
+ * the requireValidWorktree middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import { getErrorMessage, logError } from '../common.js';
+import { getCommitLog } from '../../../services/commit-log-service.js';
+
+export function createCommitLogHandler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, limit = 20 } = req.body as {
+        worktreePath: string;
+        limit?: number;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      // Emit start event so the frontend can observe progress
+      events.emit('commitLog:start', {
+        worktreePath,
+        limit,
+      });
+
+      // Delegate all Git work to the service
+      const result = await getCommitLog(worktreePath, limit);
+
+      // Emit progress with the number of commits fetched
+      events.emit('commitLog:progress', {
+        worktreePath,
+        branch: result.branch,
+        commitsLoaded: result.total,
+      });
+
+      // Emit complete event
+      events.emit('commitLog:complete', {
+        worktreePath,
+        branch: result.branch,
+        total: result.total,
+      });
+
+      res.json({
+        success: true,
+        result,
+      });
+    } catch (error) {
+      // Emit error event so the frontend can react
+      events.emit('commitLog:error', {
+        error: getErrorMessage(error),
+      });
+
+      logError(error, 'Get commit log failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/commit.ts b/temp_repo/apps/server/src/routes/worktree/routes/commit.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1bfbfd5835563a03b5600ad93594b9ed832a0b51
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/commit.ts
@@ -0,0 +1,93 @@
+/**
+ * POST /commit endpoint - Commit changes in a worktree
+ *
+ * Note: Git repository validation (isGitRepo) is handled by
+ * the requireGitRepoOnly middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import { exec, execFile } from 'child_process';
+import { promisify } from 'util';
+import { getErrorMessage, logError } from '../common.js';
+
+const execAsync = promisify(exec);
+const execFileAsync = promisify(execFile);
+
+export function createCommitHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, message, files } = req.body as {
+        worktreePath: string;
+        message: string;
+        files?: string[];
+      };
+
+      if (!worktreePath || !message) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath and message required',
+        });
+        return;
+      }
+
+      // Check for uncommitted changes
+      const { stdout: status } = await execAsync('git status --porcelain', {
+        cwd: worktreePath,
+      });
+
+      if (!status.trim()) {
+        res.json({
+          success: true,
+          result: {
+            committed: false,
+            message: 'No changes to commit',
+          },
+        });
+        return;
+      }
+
+      // Stage changes - either specific files or all changes
+      if (files && files.length > 0) {
+        // Reset any previously staged changes first
+        await execFileAsync('git', ['reset', 'HEAD'], { cwd: worktreePath }).catch(() => {
+          // Ignore errors from reset (e.g., if nothing is staged)
+        });
+        // Stage only the selected files (args array avoids shell injection)
+        await execFileAsync('git', ['add', ...files], { cwd: worktreePath });
+      } else {
+        // Stage all changes (original behavior)
+        await execFileAsync('git', ['add', '-A'], { cwd: worktreePath });
+      }
+
+      // Create commit (pass message as arg to avoid shell injection)
+      await execFileAsync('git', ['commit', '-m', message], {
+        cwd: worktreePath,
+      });
+
+      // Get commit hash
+      const { stdout: hashOutput } = await execAsync('git rev-parse HEAD', {
+        cwd: worktreePath,
+      });
+      const commitHash = hashOutput.trim().substring(0, 8);
+
+      // Get branch name
+      const { stdout: branchOutput } = await execAsync('git rev-parse --abbrev-ref HEAD', {
+        cwd: worktreePath,
+      });
+      const branchName = branchOutput.trim();
+
+      res.json({
+        success: true,
+        result: {
+          committed: true,
+          commitHash,
+          branch: branchName,
+          message,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Commit worktree failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/continue-operation.ts b/temp_repo/apps/server/src/routes/worktree/routes/continue-operation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e7582c02a0e0b094c3028d4b535ff6a424e89a0b
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/continue-operation.ts
@@ -0,0 +1,151 @@
+/**
+ * POST /continue-operation endpoint - Continue an in-progress merge, rebase, or cherry-pick
+ *
+ * After conflicts have been resolved, this endpoint continues the operation.
+ * For merge: performs git commit (merge is auto-committed after conflict resolution)
+ * For rebase: runs git rebase --continue
+ * For cherry-pick: runs git cherry-pick --continue
+ */
+
+import type { Request, Response } from 'express';
+import path from 'path';
+import * as fs from 'fs/promises';
+import { getErrorMessage, logError, execAsync } from '../common.js';
+import type { EventEmitter } from '../../../lib/events.js';
+
+/**
+ * Detect what type of conflict operation is currently in progress
+ */
+async function detectOperation(
+  worktreePath: string
+): Promise<'merge' | 'rebase' | 'cherry-pick' | null> {
+  try {
+    const { stdout: gitDirRaw } = await execAsync('git rev-parse --git-dir', {
+      cwd: worktreePath,
+    });
+    const gitDir = path.resolve(worktreePath, gitDirRaw.trim());
+
+    const [rebaseMergeExists, rebaseApplyExists, mergeHeadExists, cherryPickHeadExists] =
+      await Promise.all([
+        fs
+          .access(path.join(gitDir, 'rebase-merge'))
+          .then(() => true)
+          .catch(() => false),
+        fs
+          .access(path.join(gitDir, 'rebase-apply'))
+          .then(() => true)
+          .catch(() => false),
+        fs
+          .access(path.join(gitDir, 'MERGE_HEAD'))
+          .then(() => true)
+          .catch(() => false),
+        fs
+          .access(path.join(gitDir, 'CHERRY_PICK_HEAD'))
+          .then(() => true)
+          .catch(() => false),
+      ]);
+
+    if (rebaseMergeExists || rebaseApplyExists) return 'rebase';
+    if (mergeHeadExists) return 'merge';
+    if (cherryPickHeadExists) return 'cherry-pick';
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Check if there are still unmerged paths (unresolved conflicts)
+ */
+async function hasUnmergedPaths(worktreePath: string): Promise<boolean> {
+  try {
+    const { stdout: statusOutput } = await execAsync('git status --porcelain', {
+      cwd: worktreePath,
+    });
+    return statusOutput.split('\n').some((line) => /^(UU|AA|DD|AU|UA|DU|UD)/.test(line));
+  } catch {
+    return false;
+  }
+}
+
+export function createContinueOperationHandler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath } = req.body as {
+        worktreePath: string;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath is required',
+        });
+        return;
+      }
+
+      const resolvedWorktreePath = path.resolve(worktreePath);
+
+      // Detect what operation is in progress
+      const operation = await detectOperation(resolvedWorktreePath);
+
+      if (!operation) {
+        res.status(400).json({
+          success: false,
+          error: 'No merge, rebase, or cherry-pick in progress',
+        });
+        return;
+      }
+
+      // Check for unresolved conflicts
+      if (await hasUnmergedPaths(resolvedWorktreePath)) {
+        res.status(409).json({
+          success: false,
+          error:
+            'There are still unresolved conflicts. Please resolve all conflicts before continuing.',
+          hasUnresolvedConflicts: true,
+        });
+        return;
+      }
+
+      // Stage all resolved files first
+      await execAsync('git add -A', { cwd: resolvedWorktreePath });
+
+      // Continue the operation
+      let continueCommand: string;
+      switch (operation) {
+        case 'merge':
+          // For merge, we need to commit after resolving conflicts
+          continueCommand = 'git commit --no-edit';
+          break;
+        case 'rebase':
+          continueCommand = 'git rebase --continue';
+          break;
+        case 'cherry-pick':
+          continueCommand = 'git cherry-pick --continue';
+          break;
+      }
+
+      await execAsync(continueCommand, {
+        cwd: resolvedWorktreePath,
+        env: { ...process.env, GIT_EDITOR: 'true' }, // Prevent editor from opening
+      });
+
+      // Emit event
+      events.emit('conflict:resolved', {
+        worktreePath: resolvedWorktreePath,
+        operation,
+      });
+
+      res.json({
+        success: true,
+        result: {
+          operation,
+          message: `${operation.charAt(0).toUpperCase() + operation.slice(1)} continued successfully`,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Continue operation failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/create-pr.ts b/temp_repo/apps/server/src/routes/worktree/routes/create-pr.ts
new file mode 100644
index 0000000000000000000000000000000000000000..de63aea94e21e729e95261101970a57cc301a869
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/create-pr.ts
@@ -0,0 +1,438 @@
+/**
+ * POST /create-pr endpoint - Commit changes and create a pull request from a worktree
+ */
+
+import type { Request, Response } from 'express';
+import {
+  getErrorMessage,
+  logError,
+  execAsync,
+  execEnv,
+  isValidBranchName,
+  isValidRemoteName,
+  isGhCliAvailable,
+} from '../common.js';
+import { execGitCommand } from '../../../lib/git.js';
+import { spawnProcess } from '@automaker/platform';
+import { updateWorktreePRInfo } from '../../../lib/worktree-metadata.js';
+import { createLogger } from '@automaker/utils';
+import { validatePRState } from '@automaker/types';
+import { resolvePrTarget } from '../../../services/pr-service.js';
+
+const logger = createLogger('CreatePR');
+
+export function createCreatePRHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const {
+        worktreePath,
+        projectPath,
+        commitMessage,
+        prTitle,
+        prBody,
+        baseBranch,
+        draft,
+        remote,
+        targetRemote,
+      } = req.body as {
+        worktreePath: string;
+        projectPath?: string;
+        commitMessage?: string;
+        prTitle?: string;
+        prBody?: string;
+        baseBranch?: string;
+        draft?: boolean;
+        remote?: string;
+        /** Remote to create the PR against (e.g. upstream). If not specified, inferred from repo setup. */
+        targetRemote?: string;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      // Use projectPath if provided, otherwise derive from worktreePath
+      // For worktrees, projectPath is needed to store metadata in the main project's .automaker folder
+      const effectiveProjectPath = projectPath || worktreePath;
+
+      // Get current branch name
+      const { stdout: branchOutput } = await execAsync('git rev-parse --abbrev-ref HEAD', {
+        cwd: worktreePath,
+        env: execEnv,
+      });
+      const branchName = branchOutput.trim();
+
+      // Validate branch name for security
+      if (!isValidBranchName(branchName)) {
+        res.status(400).json({
+          success: false,
+          error: 'Invalid branch name contains unsafe characters',
+        });
+        return;
+      }
+
+      // --- Input validation: run all validation before any git write operations ---
+
+      // Validate remote names before use to prevent command injection
+      if (remote !== undefined && !isValidRemoteName(remote)) {
+        res.status(400).json({
+          success: false,
+          error: 'Invalid remote name contains unsafe characters',
+        });
+        return;
+      }
+      if (targetRemote !== undefined && !isValidRemoteName(targetRemote)) {
+        res.status(400).json({
+          success: false,
+          error: 'Invalid target remote name contains unsafe characters',
+        });
+        return;
+      }
+
+      const pushRemote = remote || 'origin';
+
+      // Resolve repository URL, fork workflow, and target remote information.
+      // This is needed for both the existing PR check and PR creation.
+      // Resolve early so validation errors are caught before any writes.
+      let repoUrl: string | null = null;
+      let upstreamRepo: string | null = null;
+      let originOwner: string | null = null;
+      try {
+        const prTarget = await resolvePrTarget({
+          worktreePath,
+          pushRemote,
+          targetRemote,
+        });
+        repoUrl = prTarget.repoUrl;
+        upstreamRepo = prTarget.upstreamRepo;
+        originOwner = prTarget.originOwner;
+      } catch (resolveErr) {
+        // resolvePrTarget throws for validation errors (unknown targetRemote, missing pushRemote)
+        res.status(400).json({
+          success: false,
+          error: getErrorMessage(resolveErr),
+        });
+        return;
+      }
+
+      // --- Validation complete — proceed with git operations ---
+
+      // Check for uncommitted changes
+      logger.debug(`Checking for uncommitted changes in: ${worktreePath}`);
+      const { stdout: status } = await execAsync('git status --porcelain', {
+        cwd: worktreePath,
+        env: execEnv,
+      });
+      const hasChanges = status.trim().length > 0;
+      logger.debug(`Has uncommitted changes: ${hasChanges}`);
+      if (hasChanges) {
+        logger.debug(`Changed files:\n${status}`);
+      }
+
+      // If there are changes, commit them before creating the PR
+      let commitHash: string | null = null;
+      if (hasChanges) {
+        const message = commitMessage || `Changes from ${branchName}`;
+        logger.debug(`Committing changes with message: ${message}`);
+
+        try {
+          // Stage all changes
+          logger.debug(`Running: git add -A`);
+          await execAsync('git add -A', { cwd: worktreePath, env: execEnv });
+
+          // Create commit — pass message as a separate arg to avoid shell injection
+          logger.debug(`Running: git commit`);
+          await execGitCommand(['commit', '-m', message], worktreePath);
+
+          // Get commit hash
+          const { stdout: hashOutput } = await execAsync('git rev-parse HEAD', {
+            cwd: worktreePath,
+            env: execEnv,
+          });
+          commitHash = hashOutput.trim().substring(0, 8);
+          logger.info(`Commit successful: ${commitHash}`);
+        } catch (commitErr: unknown) {
+          const err = commitErr as { stderr?: string; message?: string };
+          const commitError = err.stderr || err.message || 'Commit failed';
+          logger.error(`Commit failed: ${commitError}`);
+
+          // Return error immediately - don't proceed with push/PR if commit fails
+          res.status(500).json({
+            success: false,
+            error: `Failed to commit changes: ${commitError}`,
+          });
+          return;
+        }
+      }
+
+      // Push the branch to remote (use selected remote or default to 'origin')
+      // Uses array-based execGitCommand to avoid shell injection from pushRemote/branchName.
+      let pushError: string | null = null;
+      try {
+        await execGitCommand(['push', pushRemote, branchName], worktreePath, execEnv);
+      } catch {
+        // If push fails, try with --set-upstream
+        try {
+          await execGitCommand(
+            ['push', '--set-upstream', pushRemote, branchName],
+            worktreePath,
+            execEnv
+          );
+        } catch (error2: unknown) {
+          // Capture push error for reporting
+          const err = error2 as { stderr?: string; message?: string };
+          pushError = err.stderr || err.message || 'Push failed';
+          logger.error('Push failed:', pushError);
+        }
+      }
+
+      // If push failed, return error
+      if (pushError) {
+        res.status(500).json({
+          success: false,
+          error: `Failed to push branch: ${pushError}`,
+        });
+        return;
+      }
+
+      // Create PR using gh CLI or provide browser fallback
+      const base = baseBranch || 'main';
+      const title = prTitle || branchName;
+      const body = prBody || `Changes from branch ${branchName}`;
+      let prUrl: string | null = null;
+      let prError: string | null = null;
+      let browserUrl: string | null = null;
+      let ghCliAvailable = false;
+
+      // Check if gh CLI is available (cross-platform)
+      ghCliAvailable = await isGhCliAvailable();
+
+      // Construct browser URL for PR creation
+      if (repoUrl) {
+        const encodedTitle = encodeURIComponent(title);
+        const encodedBody = encodeURIComponent(body);
+        // Encode base branch and head branch to handle special chars like # or %
+        const encodedBase = encodeURIComponent(base);
+        const encodedBranch = encodeURIComponent(branchName);
+
+        if (upstreamRepo && originOwner) {
+          // Fork workflow (or cross-remote PR): PR to target from push remote
+          browserUrl = `https://github.com/${upstreamRepo}/compare/${encodedBase}...${originOwner}:${encodedBranch}?expand=1&title=${encodedTitle}&body=${encodedBody}`;
+        } else {
+          // Regular repo
+          browserUrl = `${repoUrl}/compare/${encodedBase}...${encodedBranch}?expand=1&title=${encodedTitle}&body=${encodedBody}`;
+        }
+      }
+
+      let prNumber: number | undefined;
+      let prAlreadyExisted = false;
+
+      if (ghCliAvailable) {
+        // First, check if a PR already exists for this branch using gh pr list
+        // This is more reliable than gh pr view as it explicitly searches by branch name
+        // For forks/cross-remote, we need to use owner:branch format for the head parameter
+        const headRef = upstreamRepo && originOwner ? `${originOwner}:${branchName}` : branchName;
+
+        logger.debug(`Checking for existing PR for branch: ${branchName} (headRef: ${headRef})`);
+        try {
+          const listArgs = ['pr', 'list'];
+          if (upstreamRepo) {
+            listArgs.push('--repo', upstreamRepo);
+          }
+          listArgs.push(
+            '--head',
+            headRef,
+            '--json',
+            'number,title,url,state,createdAt',
+            '--limit',
+            '1'
+          );
+          logger.debug(`Running: gh ${listArgs.join(' ')}`);
+          const listResult = await spawnProcess({
+            command: 'gh',
+            args: listArgs,
+            cwd: worktreePath,
+            env: execEnv,
+          });
+          if (listResult.exitCode !== 0) {
+            logger.error(
+              `gh pr list failed with exit code ${listResult.exitCode}: ` +
+                `stderr=${listResult.stderr}, stdout=${listResult.stdout}`
+            );
+            throw new Error(
+              `gh pr list failed (exit code ${listResult.exitCode}): ${listResult.stderr || listResult.stdout}`
+            );
+          }
+          const existingPrOutput = listResult.stdout;
+          logger.debug(`gh pr list output: ${existingPrOutput}`);
+
+          const existingPrs = JSON.parse(existingPrOutput);
+
+          if (Array.isArray(existingPrs) && existingPrs.length > 0) {
+            const existingPr = existingPrs[0];
+            // PR already exists - use it and store metadata
+            logger.info(`PR already exists for branch ${branchName}: PR #${existingPr.number}`);
+            prUrl = existingPr.url;
+            prNumber = existingPr.number;
+            prAlreadyExisted = true;
+
+            // Store the existing PR info in metadata
+            // GitHub CLI returns uppercase states: OPEN, MERGED, CLOSED
+            await updateWorktreePRInfo(effectiveProjectPath, branchName, {
+              number: existingPr.number,
+              url: existingPr.url,
+              title: existingPr.title || title,
+              state: validatePRState(existingPr.state),
+              createdAt: existingPr.createdAt || new Date().toISOString(),
+            });
+            logger.debug(
+              `Stored existing PR info for branch ${branchName}: PR #${existingPr.number}`
+            );
+          } else {
+            logger.debug(`No existing PR found for branch ${branchName}`);
+          }
+        } catch (listError) {
+          // gh pr list failed - log but continue to try creating
+          logger.debug(`gh pr list failed (this is ok, will try to create):`, listError);
+        }
+
+        // Only create a new PR if one doesn't already exist
+        if (!prUrl) {
+          try {
+            // Build gh pr create args as an array to avoid shell injection on
+            // title/body (backticks, $, \ were unsafe with string interpolation)
+            const prArgs = ['pr', 'create', '--base', base];
+
+            // If this is a fork (has upstream remote), specify the repo and head
+            if (upstreamRepo && originOwner) {
+              // For forks: --repo specifies where to create PR, --head specifies source
+              prArgs.push('--repo', upstreamRepo, '--head', `${originOwner}:${branchName}`);
+            } else {
+              // Not a fork, just specify the head branch
+              prArgs.push('--head', branchName);
+            }
+
+            prArgs.push('--title', title, '--body', body);
+            if (draft) prArgs.push('--draft');
+
+            logger.debug(`Creating PR with args: gh ${prArgs.join(' ')}`);
+            const prResult = await spawnProcess({
+              command: 'gh',
+              args: prArgs,
+              cwd: worktreePath,
+              env: execEnv,
+            });
+            if (prResult.exitCode !== 0) {
+              throw Object.assign(new Error(prResult.stderr || 'gh pr create failed'), {
+                stderr: prResult.stderr,
+              });
+            }
+            prUrl = prResult.stdout.trim();
+            logger.info(`PR created: ${prUrl}`);
+
+            // Extract PR number and store metadata for newly created PR
+            if (prUrl) {
+              const prMatch = prUrl.match(/\/pull\/(\d+)/);
+              prNumber = prMatch ? parseInt(prMatch[1], 10) : undefined;
+
+              if (prNumber) {
+                try {
+                  // Note: GitHub doesn't have a 'DRAFT' state - drafts still show as 'OPEN'
+                  await updateWorktreePRInfo(effectiveProjectPath, branchName, {
+                    number: prNumber,
+                    url: prUrl,
+                    title,
+                    state: 'OPEN',
+                    createdAt: new Date().toISOString(),
+                  });
+                  logger.debug(`Stored PR info for branch ${branchName}: PR #${prNumber}`);
+                } catch (metadataError) {
+                  logger.error('Failed to store PR metadata:', metadataError);
+                }
+              }
+            }
+          } catch (ghError: unknown) {
+            // gh CLI failed - check if it's "already exists" error and try to fetch the PR
+            const err = ghError as { stderr?: string; message?: string };
+            const errorMessage = err.stderr || err.message || 'PR creation failed';
+            logger.debug(`gh pr create failed: ${errorMessage}`);
+
+            // If error indicates PR already exists, try to fetch it
+            if (errorMessage.toLowerCase().includes('already exists')) {
+              logger.debug(`PR already exists error - trying to fetch existing PR`);
+              try {
+                // Build args as an array to avoid shell injection.
+                // When upstreamRepo is set (fork/cross-remote workflow) we must
+                // query the upstream repository so we find the correct PR.
+                const viewArgs = ['pr', 'view', '--json', 'number,title,url,state,createdAt'];
+                if (upstreamRepo) {
+                  viewArgs.push('--repo', upstreamRepo);
+                }
+                logger.debug(`Running: gh ${viewArgs.join(' ')}`);
+                const viewResult = await spawnProcess({
+                  command: 'gh',
+                  args: viewArgs,
+                  cwd: worktreePath,
+                  env: execEnv,
+                });
+                if (viewResult.exitCode !== 0) {
+                  throw new Error(
+                    `gh pr view failed (exit code ${viewResult.exitCode}): ${viewResult.stderr || viewResult.stdout}`
+                  );
+                }
+                const existingPr = JSON.parse(viewResult.stdout);
+                if (existingPr.url) {
+                  prUrl = existingPr.url;
+                  prNumber = existingPr.number;
+                  prAlreadyExisted = true;
+
+                  // GitHub CLI returns uppercase states: OPEN, MERGED, CLOSED
+                  await updateWorktreePRInfo(effectiveProjectPath, branchName, {
+                    number: existingPr.number,
+                    url: existingPr.url,
+                    title: existingPr.title || title,
+                    state: validatePRState(existingPr.state),
+                    createdAt: existingPr.createdAt || new Date().toISOString(),
+                  });
+                  logger.debug(`Fetched and stored existing PR: #${existingPr.number}`);
+                }
+              } catch (viewError) {
+                logger.error('Failed to fetch existing PR:', viewError);
+                prError = errorMessage;
+              }
+            } else {
+              prError = errorMessage;
+            }
+          }
+        }
+      } else {
+        prError = 'gh_cli_not_available';
+      }
+
+      // Return result with browser fallback URL
+      res.json({
+        success: true,
+        result: {
+          branch: branchName,
+          committed: hasChanges,
+          commitHash,
+          pushed: true,
+          prUrl,
+          prNumber,
+          prCreated: !!prUrl,
+          prAlreadyExisted,
+          prError: prError || undefined,
+          browserUrl: browserUrl || undefined,
+          ghCliAvailable,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Create PR failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/create.ts b/temp_repo/apps/server/src/routes/worktree/routes/create.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b4417b80afd28ff1e5555d2c6cbcd5da2c4165d
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/create.ts
@@ -0,0 +1,343 @@
+/**
+ * POST /create endpoint - Create a new git worktree
+ *
+ * This endpoint handles worktree creation with proper checks:
+ * 1. First checks if git already has a worktree for the branch (anywhere)
+ * 2. If found, returns the existing worktree (no error)
+ * 3. Syncs the base branch from its remote tracking branch (fast-forward only)
+ * 4. Only creates a new worktree if none exists for the branch
+ */
+
+import type { Request, Response } from 'express';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import path from 'path';
+import * as secureFs from '../../../lib/secure-fs.js';
+import type { EventEmitter } from '../../../lib/events.js';
+import type { SettingsService } from '../../../services/settings-service.js';
+import { WorktreeService } from '../../../services/worktree-service.js';
+import { isGitRepo } from '@automaker/git-utils';
+import {
+  getErrorMessage,
+  logError,
+  normalizePath,
+  ensureInitialCommit,
+  isValidBranchName,
+} from '../common.js';
+import { execGitCommand } from '../../../lib/git.js';
+import { trackBranch } from './branch-tracking.js';
+import { createLogger } from '@automaker/utils';
+import { runInitScript } from '../../../services/init-script-service.js';
+import {
+  syncBaseBranch,
+  type BaseBranchSyncResult,
+} from '../../../services/branch-sync-service.js';
+
+const logger = createLogger('Worktree');
+
+/** Timeout for git fetch operations (30 seconds) */
+const FETCH_TIMEOUT_MS = 30_000;
+
+const execAsync = promisify(exec);
+
+/**
+ * Find an existing worktree for a given branch by checking git worktree list
+ */
+async function findExistingWorktreeForBranch(
+  projectPath: string,
+  branchName: string
+): Promise<{ path: string; branch: string } | null> {
+  try {
+    const { stdout } = await execAsync('git worktree list --porcelain', {
+      cwd: projectPath,
+    });
+
+    const lines = stdout.split('\n');
+    let currentPath: string | null = null;
+    let currentBranch: string | null = null;
+
+    for (const line of lines) {
+      if (line.startsWith('worktree ')) {
+        currentPath = line.slice(9);
+      } else if (line.startsWith('branch ')) {
+        currentBranch = line.slice(7).replace('refs/heads/', '');
+      } else if (line === '' && currentPath && currentBranch) {
+        // End of a worktree entry
+        if (currentBranch === branchName) {
+          // Resolve to absolute path - git may return relative paths
+          // Critical for cross-platform compatibility (Windows, macOS, Linux)
+          const resolvedPath = path.isAbsolute(currentPath)
+            ? path.resolve(currentPath)
+            : path.resolve(projectPath, currentPath);
+          return { path: resolvedPath, branch: currentBranch };
+        }
+        currentPath = null;
+        currentBranch = null;
+      }
+    }
+
+    // Check the last entry (if file doesn't end with newline)
+    if (currentPath && currentBranch && currentBranch === branchName) {
+      // Resolve to absolute path for cross-platform compatibility
+      const resolvedPath = path.isAbsolute(currentPath)
+        ? path.resolve(currentPath)
+        : path.resolve(projectPath, currentPath);
+      return { path: resolvedPath, branch: currentBranch };
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export function createCreateHandler(events: EventEmitter, settingsService?: SettingsService) {
+  const worktreeService = new WorktreeService();
+
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, branchName, baseBranch } = req.body as {
+        projectPath: string;
+        branchName: string;
+        baseBranch?: string; // Optional base branch to create from (defaults to current HEAD). Can be a remote branch like "origin/main".
+      };
+
+      if (!projectPath || !branchName) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and branchName required',
+        });
+        return;
+      }
+
+      // Validate branch name to prevent command injection
+      if (!isValidBranchName(branchName)) {
+        res.status(400).json({
+          success: false,
+          error:
+            'Invalid branch name. Branch names must contain only letters, numbers, dots, hyphens, underscores, and forward slashes.',
+        });
+        return;
+      }
+
+      // Validate base branch if provided
+      if (baseBranch && !isValidBranchName(baseBranch) && baseBranch !== 'HEAD') {
+        res.status(400).json({
+          success: false,
+          error:
+            'Invalid base branch name. Branch names must contain only letters, numbers, dots, hyphens, underscores, and forward slashes.',
+        });
+        return;
+      }
+
+      if (!(await isGitRepo(projectPath))) {
+        res.status(400).json({
+          success: false,
+          error: 'Not a git repository',
+        });
+        return;
+      }
+
+      // Ensure the repository has at least one commit so worktree commands referencing HEAD succeed
+      // Pass git identity env vars so commits work without global git config
+      const gitEnv = {
+        GIT_AUTHOR_NAME: 'Automaker',
+        GIT_AUTHOR_EMAIL: 'automaker@localhost',
+        GIT_COMMITTER_NAME: 'Automaker',
+        GIT_COMMITTER_EMAIL: 'automaker@localhost',
+      };
+      await ensureInitialCommit(projectPath, gitEnv);
+
+      // First, check if git already has a worktree for this branch (anywhere)
+      const existingWorktree = await findExistingWorktreeForBranch(projectPath, branchName);
+      if (existingWorktree) {
+        // Worktree already exists, return it as success (not an error)
+        // This handles manually created worktrees or worktrees from previous runs
+        logger.info(
+          `Found existing worktree for branch "${branchName}" at: ${existingWorktree.path}`
+        );
+
+        // Track the branch so it persists in the UI
+        await trackBranch(projectPath, branchName);
+
+        res.json({
+          success: true,
+          worktree: {
+            path: normalizePath(existingWorktree.path),
+            branch: branchName,
+            isNew: false, // Not newly created
+          },
+        });
+        return;
+      }
+
+      // Sanitize branch name for directory usage
+      const sanitizedName = branchName.replace(/[^a-zA-Z0-9_-]/g, '-');
+      const worktreesDir = path.join(projectPath, '.worktrees');
+      const worktreePath = path.join(worktreesDir, sanitizedName);
+
+      // Create worktrees directory if it doesn't exist
+      await secureFs.mkdir(worktreesDir, { recursive: true });
+
+      // Fetch latest from all remotes before creating the worktree.
+      // This ensures remote refs are up-to-date for:
+      // - Remote base branches (e.g. "origin/main")
+      // - Existing remote branches being checked out as worktrees
+      // - Branch existence checks against fresh remote state
+      logger.info('Fetching from all remotes before creating worktree');
+      try {
+        const controller = new AbortController();
+        const timerId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+        try {
+          await execGitCommand(['fetch', '--all', '--quiet'], projectPath, undefined, controller);
+        } finally {
+          clearTimeout(timerId);
+        }
+      } catch (fetchErr) {
+        // Non-fatal: log but continue — refs might already be cached locally
+        logger.warn(`Failed to fetch from remotes: ${getErrorMessage(fetchErr)}`);
+      }
+
+      // Sync the base branch with its remote tracking branch (fast-forward only).
+      // This ensures the new worktree starts from an up-to-date state rather than
+      // a potentially stale local copy. If the sync fails or the branch has diverged,
+      // we proceed with the local copy and inform the user.
+      const effectiveBase = baseBranch || 'HEAD';
+      let syncResult: BaseBranchSyncResult = { attempted: false, synced: false };
+
+      // Only sync if the base is a real branch (not 'HEAD')
+      // Pass skipFetch=true because we already fetched all remotes above.
+      if (effectiveBase !== 'HEAD') {
+        logger.info(`Syncing base branch '${effectiveBase}' before creating worktree`);
+        syncResult = await syncBaseBranch(projectPath, effectiveBase, true);
+        if (syncResult.attempted) {
+          if (syncResult.synced) {
+            logger.info(`Base branch sync result: ${syncResult.message}`);
+          } else {
+            logger.warn(`Base branch sync result: ${syncResult.message}`);
+          }
+        }
+      } else {
+        // When using HEAD, try to sync the currently checked-out branch
+        // Pass skipFetch=true because we already fetched all remotes above.
+        try {
+          const currentBranch = await execGitCommand(
+            ['rev-parse', '--abbrev-ref', 'HEAD'],
+            projectPath
+          );
+          const trimmedBranch = currentBranch.trim();
+          if (trimmedBranch && trimmedBranch !== 'HEAD') {
+            logger.info(
+              `Syncing current branch '${trimmedBranch}' (HEAD) before creating worktree`
+            );
+            syncResult = await syncBaseBranch(projectPath, trimmedBranch, true);
+            if (syncResult.attempted) {
+              if (syncResult.synced) {
+                logger.info(`HEAD branch sync result: ${syncResult.message}`);
+              } else {
+                logger.warn(`HEAD branch sync result: ${syncResult.message}`);
+              }
+            }
+          }
+        } catch {
+          // Could not determine HEAD branch — skip sync
+        }
+      }
+
+      // Check if branch exists (using array arguments to prevent injection)
+      let branchExists = false;
+      try {
+        await execGitCommand(['rev-parse', '--verify', branchName], projectPath);
+        branchExists = true;
+      } catch {
+        // Branch doesn't exist
+      }
+
+      // Create worktree (using array arguments to prevent injection)
+      if (branchExists) {
+        // Use existing branch
+        await execGitCommand(['worktree', 'add', worktreePath, branchName], projectPath);
+      } else {
+        // Create new branch from base or HEAD
+        const base = baseBranch || 'HEAD';
+        await execGitCommand(
+          ['worktree', 'add', '-b', branchName, worktreePath, base],
+          projectPath
+        );
+      }
+
+      // Note: We intentionally do NOT symlink .automaker to worktrees
+      // Features and config are always accessed from the main project path
+      // This avoids symlink loop issues when activating worktrees
+
+      // Track the branch so it persists in the UI even after worktree is removed
+      await trackBranch(projectPath, branchName);
+
+      // Resolve to absolute path for cross-platform compatibility
+      // normalizePath converts to forward slashes for API consistency
+      const absoluteWorktreePath = path.resolve(worktreePath);
+
+      // Get the commit hash the new worktree is based on for logging
+      let baseCommitHash: string | undefined;
+      try {
+        const hash = await execGitCommand(['rev-parse', '--short', 'HEAD'], absoluteWorktreePath);
+        baseCommitHash = hash.trim();
+      } catch {
+        // Non-critical — just for logging
+      }
+
+      if (baseCommitHash) {
+        logger.info(`New worktree for '${branchName}' based on commit ${baseCommitHash}`);
+      }
+
+      // Copy configured files into the new worktree before responding
+      // This runs synchronously to ensure files are in place before any init script
+      try {
+        await worktreeService.copyConfiguredFiles(
+          projectPath,
+          absoluteWorktreePath,
+          settingsService,
+          events
+        );
+      } catch (copyErr) {
+        // Log but don't fail worktree creation – files may be partially copied
+        logger.warn('Some configured files failed to copy to worktree:', copyErr);
+      }
+
+      // Respond immediately (non-blocking)
+      res.json({
+        success: true,
+        worktree: {
+          path: normalizePath(absoluteWorktreePath),
+          branch: branchName,
+          isNew: !branchExists,
+          baseCommitHash,
+          ...(syncResult.attempted
+            ? {
+                syncResult: {
+                  synced: syncResult.synced,
+                  remote: syncResult.remote,
+                  message: syncResult.message,
+                  diverged: syncResult.diverged,
+                },
+              }
+            : {}),
+        },
+      });
+
+      // Trigger init script asynchronously after response
+      // runInitScript internally checks if script exists and hasn't already run
+      runInitScript({
+        projectPath,
+        worktreePath: absoluteWorktreePath,
+        branch: branchName,
+        emitter: events,
+      }).catch((err) => {
+        logger.error(`Init script failed for ${branchName}:`, err);
+      });
+    } catch (error) {
+      logError(error, 'Create worktree failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/delete.ts b/temp_repo/apps/server/src/routes/worktree/routes/delete.ts
new file mode 100644
index 0000000000000000000000000000000000000000..034be28ef740be611e5f3f0ea162094d34e7678f
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/delete.ts
@@ -0,0 +1,205 @@
+/**
+ * POST /delete endpoint - Delete a git worktree
+ */
+
+import type { Request, Response } from 'express';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import fs from 'fs/promises';
+import { isGitRepo } from '@automaker/git-utils';
+import { getErrorMessage, logError, isValidBranchName } from '../common.js';
+import { execGitCommand } from '../../../lib/git.js';
+import { createLogger } from '@automaker/utils';
+import type { FeatureLoader } from '../../../services/feature-loader.js';
+import type { EventEmitter } from '../../../lib/events.js';
+
+const execAsync = promisify(exec);
+const logger = createLogger('Worktree');
+
+export function createDeleteHandler(events: EventEmitter, featureLoader?: FeatureLoader) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, worktreePath, deleteBranch } = req.body as {
+        projectPath: string;
+        worktreePath: string;
+        deleteBranch?: boolean; // Whether to also delete the branch
+      };
+
+      if (!projectPath || !worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and worktreePath required',
+        });
+        return;
+      }
+
+      if (!(await isGitRepo(projectPath))) {
+        res.status(400).json({
+          success: false,
+          error: 'Not a git repository',
+        });
+        return;
+      }
+
+      // Get branch name before removing worktree
+      let branchName: string | null = null;
+      try {
+        const { stdout } = await execAsync('git rev-parse --abbrev-ref HEAD', {
+          cwd: worktreePath,
+        });
+        branchName = stdout.trim();
+      } catch {
+        // Could not get branch name - worktree directory may already be gone
+        logger.debug('Could not determine branch for worktree, directory may be missing');
+      }
+
+      // Remove the worktree (using array arguments to prevent injection)
+      let removeSucceeded = false;
+      try {
+        await execGitCommand(['worktree', 'remove', worktreePath, '--force'], projectPath);
+        removeSucceeded = true;
+      } catch (removeError) {
+        // `git worktree remove` can fail if the directory is already missing
+        // or in a bad state. Try pruning stale worktree entries as a fallback.
+        logger.debug('git worktree remove failed, trying prune', {
+          error: getErrorMessage(removeError),
+        });
+        try {
+          await execGitCommand(['worktree', 'prune'], projectPath);
+
+          // Verify the specific worktree is no longer registered after prune.
+          // `git worktree prune` exits 0 even if worktreePath was never registered,
+          // so we must explicitly check the worktree list to avoid false positives.
+          const { stdout: listOut } = await execAsync('git worktree list --porcelain', {
+            cwd: projectPath,
+          });
+          // Parse porcelain output and check for an exact path match.
+          // Using substring .includes() can produce false positives when one
+          // worktree path is a prefix of another (e.g. /foo vs /foobar).
+          const stillRegistered = listOut
+            .split('\n')
+            .filter((line) => line.startsWith('worktree '))
+            .map((line) => line.slice('worktree '.length).trim())
+            .some((registeredPath) => registeredPath === worktreePath);
+          if (stillRegistered) {
+            // Prune didn't clean up our entry - treat as failure
+            throw removeError;
+          }
+          removeSucceeded = true;
+        } catch (pruneError) {
+          // If pruneError is the original removeError re-thrown, propagate it
+          if (pruneError === removeError) {
+            throw removeError;
+          }
+          logger.warn('git worktree prune also failed', {
+            error: getErrorMessage(pruneError),
+          });
+          // If both remove and prune fail, still try to return success
+          // if the worktree directory no longer exists (it may have been
+          // manually deleted already).
+          let dirExists = false;
+          try {
+            await fs.access(worktreePath);
+            dirExists = true;
+          } catch {
+            // Directory doesn't exist
+          }
+          if (dirExists) {
+            // Directory still exists - this is a real failure
+            throw removeError;
+          }
+          // Directory is gone, treat as success
+          removeSucceeded = true;
+        }
+      }
+
+      // Optionally delete the branch (only if worktree was successfully removed)
+      let branchDeleted = false;
+      if (
+        removeSucceeded &&
+        deleteBranch &&
+        branchName &&
+        branchName !== 'main' &&
+        branchName !== 'master'
+      ) {
+        // Validate branch name to prevent command injection
+        if (!isValidBranchName(branchName)) {
+          logger.warn(`Invalid branch name detected, skipping deletion: ${branchName}`);
+        } else {
+          try {
+            await execGitCommand(['branch', '-D', branchName], projectPath);
+            branchDeleted = true;
+          } catch {
+            // Branch deletion failed, not critical
+            logger.warn(`Failed to delete branch: ${branchName}`);
+          }
+        }
+      }
+
+      // Emit worktree:deleted event after successful deletion
+      events.emit('worktree:deleted', {
+        worktreePath,
+        projectPath,
+        branchName,
+        branchDeleted,
+      });
+
+      // Move features associated with the deleted branch to the main worktree
+      // This prevents features from being orphaned when a worktree is deleted
+      let featuresMovedToMain = 0;
+      if (featureLoader && branchName) {
+        try {
+          const allFeatures = await featureLoader.getAll(projectPath);
+          const affectedFeatures = allFeatures.filter((f) => f.branchName === branchName);
+          for (const feature of affectedFeatures) {
+            try {
+              await featureLoader.update(projectPath, feature.id, {
+                branchName: null,
+              });
+              featuresMovedToMain++;
+              // Emit feature:migrated event for each successfully migrated feature
+              events.emit('feature:migrated', {
+                featureId: feature.id,
+                status: 'migrated',
+                fromBranch: branchName,
+                toWorktreeId: null, // migrated to main worktree (no specific worktree)
+                projectPath,
+              });
+            } catch (featureUpdateError) {
+              // Non-fatal: log per-feature failure but continue migrating others
+              logger.warn('Failed to move feature to main worktree after deletion', {
+                error: getErrorMessage(featureUpdateError),
+                featureId: feature.id,
+                branchName,
+              });
+            }
+          }
+          if (featuresMovedToMain > 0) {
+            logger.info(
+              `Moved ${featuresMovedToMain} feature(s) to main worktree after deleting worktree with branch: ${branchName}`
+            );
+          }
+        } catch (featureError) {
+          // Non-fatal: log but don't fail the deletion (getAll failed)
+          logger.warn('Failed to load features for migration to main worktree after deletion', {
+            error: getErrorMessage(featureError),
+            branchName,
+          });
+        }
+      }
+
+      res.json({
+        success: true,
+        deleted: {
+          worktreePath,
+          branch: branchDeleted ? branchName : null,
+          branchDeleted,
+          featuresMovedToMain,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Delete worktree failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/dev-server-logs.ts b/temp_repo/apps/server/src/routes/worktree/routes/dev-server-logs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..79d3553bff1d1964a60d5af251816b9ef4a43da8
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/dev-server-logs.ts
@@ -0,0 +1,53 @@
+/**
+ * GET /dev-server-logs endpoint - Get buffered logs for a worktree's dev server
+ *
+ * Returns the scrollback buffer containing historical log output for a running
+ * dev server. Used by clients to populate the log panel on initial connection
+ * before subscribing to real-time updates via WebSocket.
+ */
+
+import type { Request, Response } from 'express';
+import { getDevServerService } from '../../../services/dev-server-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createGetDevServerLogsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath } = req.query as {
+        worktreePath?: string;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath query parameter is required',
+        });
+        return;
+      }
+
+      const devServerService = getDevServerService();
+      const result = devServerService.getServerLogs(worktreePath);
+
+      if (result.success && result.result) {
+        res.json({
+          success: true,
+          result: {
+            worktreePath: result.result.worktreePath,
+            port: result.result.port,
+            url: result.result.url,
+            logs: result.result.logs,
+            startedAt: result.result.startedAt,
+          },
+        });
+      } else {
+        res.status(404).json({
+          success: false,
+          error: result.error || 'Failed to get dev server logs',
+        });
+      }
+    } catch (error) {
+      logError(error, 'Get dev server logs failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/diffs.ts b/temp_repo/apps/server/src/routes/worktree/routes/diffs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1e8586bfa4e556455a5f0ab828d5ba59087f97c0
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/diffs.ts
@@ -0,0 +1,88 @@
+/**
+ * POST /diffs endpoint - Get diffs for a worktree
+ */
+
+import type { Request, Response } from 'express';
+import path from 'path';
+import * as secureFs from '../../../lib/secure-fs.js';
+import { getErrorMessage, logError } from '../common.js';
+import { getGitRepositoryDiffs } from '../../common.js';
+
+export function createDiffsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureId, useWorktrees } = req.body as {
+        projectPath: string;
+        featureId: string;
+        useWorktrees?: boolean;
+      };
+
+      if (!projectPath || !featureId) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and featureId required',
+        });
+        return;
+      }
+
+      // If worktrees aren't enabled, don't probe .worktrees at all.
+      // This avoids noisy logs that make it look like features are "running in worktrees".
+      if (useWorktrees === false) {
+        const result = await getGitRepositoryDiffs(projectPath);
+        res.json({
+          success: true,
+          diff: result.diff,
+          files: result.files,
+          hasChanges: result.hasChanges,
+          ...(result.mergeState ? { mergeState: result.mergeState } : {}),
+        });
+        return;
+      }
+
+      // Git worktrees are stored in project directory
+      // Sanitize featureId the same way it's sanitized when creating worktrees
+      // (see create.ts: branchName.replace(/[^a-zA-Z0-9_-]/g, '-'))
+      const sanitizedFeatureId = featureId.replace(/[^a-zA-Z0-9_-]/g, '-');
+      const worktreePath = path.join(projectPath, '.worktrees', sanitizedFeatureId);
+
+      try {
+        // Check if worktree exists
+        await secureFs.access(worktreePath);
+
+        // Get diffs from worktree
+        const result = await getGitRepositoryDiffs(worktreePath);
+        res.json({
+          success: true,
+          diff: result.diff,
+          files: result.files,
+          hasChanges: result.hasChanges,
+          ...(result.mergeState ? { mergeState: result.mergeState } : {}),
+        });
+      } catch (innerError) {
+        // Worktree doesn't exist - fallback to main project path
+        const code = (innerError as NodeJS.ErrnoException | undefined)?.code;
+        // ENOENT is expected when a feature has no worktree; don't log as an error.
+        if (code && code !== 'ENOENT') {
+          logError(innerError, 'Worktree access failed, falling back to main project');
+        }
+
+        try {
+          const result = await getGitRepositoryDiffs(projectPath);
+          res.json({
+            success: true,
+            diff: result.diff,
+            files: result.files,
+            hasChanges: result.hasChanges,
+            ...(result.mergeState ? { mergeState: result.mergeState } : {}),
+          });
+        } catch (fallbackError) {
+          logError(fallbackError, 'Fallback to main project also failed');
+          res.json({ success: true, diff: '', files: [], hasChanges: false });
+        }
+      }
+    } catch (error) {
+      logError(error, 'Get worktree diffs failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/discard-changes.ts b/temp_repo/apps/server/src/routes/worktree/routes/discard-changes.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eb2c9399dcdcd5b837ca129e24a7b9e904940d91
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/discard-changes.ts
@@ -0,0 +1,317 @@
+/**
+ * POST /discard-changes endpoint - Discard uncommitted changes in a worktree
+ *
+ * Supports two modes:
+ * 1. Discard ALL changes (when no files array is provided)
+ *    - Resets staged changes (git reset HEAD)
+ *    - Discards modified tracked files (git checkout .)
+ *    - Removes untracked files and directories (git clean -ffd)
+ *
+ * 2. Discard SELECTED files (when files array is provided)
+ *    - Unstages selected staged files (git reset HEAD -- <files>)
+ *    - Reverts selected tracked file changes (git checkout -- <files>)
+ *    - Removes selected untracked files (git clean -ffd -- <files>)
+ *
+ * Note: Git repository validation (isGitRepo) is handled by
+ * the requireGitRepoOnly middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import * as path from 'path';
+import * as fs from 'fs';
+import { getErrorMessage, logError } from '@automaker/utils';
+import { execGitCommand } from '../../../lib/git.js';
+
+/**
+ * Validate that a file path does not escape the worktree directory.
+ * Prevents path traversal attacks (e.g., ../../etc/passwd) and
+ * rejects symlinks inside the worktree that point outside of it.
+ */
+function validateFilePath(filePath: string, worktreePath: string): boolean {
+  // Resolve the full path relative to the worktree (lexical resolution)
+  const resolved = path.resolve(worktreePath, filePath);
+  const normalizedWorktree = path.resolve(worktreePath);
+
+  // First, perform lexical prefix check
+  const lexicalOk =
+    resolved.startsWith(normalizedWorktree + path.sep) || resolved === normalizedWorktree;
+  if (!lexicalOk) {
+    return false;
+  }
+
+  // Then, attempt symlink-aware validation using realpath.
+  // This catches symlinks inside the worktree that point outside of it.
+  try {
+    const realResolved = fs.realpathSync(resolved);
+    const realWorktree = fs.realpathSync(normalizedWorktree);
+    return realResolved.startsWith(realWorktree + path.sep) || realResolved === realWorktree;
+  } catch {
+    // If realpath fails (e.g., target doesn't exist yet for untracked files),
+    // fall back to the lexical startsWith check which already passed above.
+    return true;
+  }
+}
+
+/**
+ * Parse a file path from git status --porcelain output, handling renames.
+ * For renamed files (R status), git reports "old_path -> new_path" and
+ * we need the new path to match what parseGitStatus() returns in git-utils.
+ */
+function parseFilePath(rawPath: string, indexStatus: string, workTreeStatus: string): string {
+  const trimmedPath = rawPath.trim();
+  if (indexStatus === 'R' || workTreeStatus === 'R') {
+    const arrowIndex = trimmedPath.indexOf(' -> ');
+    if (arrowIndex !== -1) {
+      return trimmedPath.slice(arrowIndex + 4);
+    }
+  }
+  return trimmedPath;
+}
+
+export function createDiscardChangesHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, files } = req.body as {
+        worktreePath: string;
+        files?: string[];
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      // Check for uncommitted changes first
+      const status = await execGitCommand(['status', '--porcelain'], worktreePath);
+
+      if (!status.trim()) {
+        res.json({
+          success: true,
+          result: {
+            discarded: false,
+            message: 'No changes to discard',
+          },
+        });
+        return;
+      }
+
+      // Get branch name before discarding
+      const branchOutput = await execGitCommand(
+        ['rev-parse', '--abbrev-ref', 'HEAD'],
+        worktreePath
+      );
+      const branchName = branchOutput.trim();
+
+      // Parse the status output to categorize files
+      // Git --porcelain format: XY PATH where X=index status, Y=worktree status
+      // For renamed files: XY OLD_PATH -> NEW_PATH
+      const statusLines = status.trim().split('\n').filter(Boolean);
+      const allFiles = statusLines.map((line) => {
+        const fileStatus = line.substring(0, 2);
+        const rawPath = line.slice(3);
+        const indexStatus = fileStatus.charAt(0);
+        const workTreeStatus = fileStatus.charAt(1);
+        // Parse path consistently with parseGitStatus() in git-utils,
+        // which extracts the new path for renames
+        const filePath = parseFilePath(rawPath, indexStatus, workTreeStatus);
+        return { status: fileStatus, path: filePath };
+      });
+
+      // Determine which files to discard
+      const isSelectiveDiscard = files && files.length > 0 && files.length < allFiles.length;
+
+      if (isSelectiveDiscard) {
+        // Selective discard: only discard the specified files
+        const filesToDiscard = new Set(files);
+
+        // Validate all requested file paths stay within the worktree
+        const invalidPaths = files.filter((f) => !validateFilePath(f, worktreePath));
+        if (invalidPaths.length > 0) {
+          res.status(400).json({
+            success: false,
+            error: `Invalid file paths detected (path traversal): ${invalidPaths.join(', ')}`,
+          });
+          return;
+        }
+
+        // Separate files into categories for proper git operations
+        const trackedModified: string[] = []; // Modified/deleted tracked files
+        const stagedFiles: string[] = []; // Files that are staged
+        const untrackedFiles: string[] = []; // Untracked files (?)
+        const warnings: string[] = [];
+
+        // Track which requested files were matched so we can handle unmatched ones
+        const matchedFiles = new Set<string>();
+
+        for (const file of allFiles) {
+          if (!filesToDiscard.has(file.path)) continue;
+          matchedFiles.add(file.path);
+
+          // file.status is the raw two-character XY git porcelain status (no trim)
+          // X = index/staging status, Y = worktree status
+          const xy = file.status.substring(0, 2);
+          const indexStatus = xy.charAt(0);
+          const workTreeStatus = xy.charAt(1);
+
+          if (indexStatus === '?' && workTreeStatus === '?') {
+            untrackedFiles.push(file.path);
+          } else if (indexStatus === 'A') {
+            // Staged-new file: must be reset (unstaged) then cleaned (deleted).
+            // Never pass to trackedModified — the file has no HEAD version to
+            // check out, so `git checkout --` would fail or do nothing.
+            stagedFiles.push(file.path);
+            untrackedFiles.push(file.path);
+          } else {
+            // Check if the file has staged changes (index status X)
+            if (indexStatus !== ' ' && indexStatus !== '?') {
+              stagedFiles.push(file.path);
+            }
+            // Check for working tree changes (worktree status Y): handles MM, MD, etc.
+            if (workTreeStatus !== ' ' && workTreeStatus !== '?') {
+              trackedModified.push(file.path);
+            }
+          }
+        }
+
+        // Handle files from the UI that didn't match any entry in allFiles.
+        // This can happen due to timing differences between the UI loading diffs
+        // and the discard request, or path format differences.
+        // Attempt to clean unmatched files directly as untracked files.
+        for (const requestedFile of files) {
+          if (!matchedFiles.has(requestedFile)) {
+            untrackedFiles.push(requestedFile);
+          }
+        }
+
+        // 1. Unstage selected staged files (using execFile to bypass shell)
+        if (stagedFiles.length > 0) {
+          try {
+            await execGitCommand(['reset', 'HEAD', '--', ...stagedFiles], worktreePath);
+          } catch (error) {
+            const msg = getErrorMessage(error);
+            logError(error, `Failed to unstage files: ${msg}`);
+            warnings.push(`Failed to unstage some files: ${msg}`);
+          }
+        }
+
+        // 2. Revert selected tracked file changes
+        if (trackedModified.length > 0) {
+          try {
+            await execGitCommand(['checkout', '--', ...trackedModified], worktreePath);
+          } catch (error) {
+            const msg = getErrorMessage(error);
+            logError(error, `Failed to revert tracked files: ${msg}`);
+            warnings.push(`Failed to revert some tracked files: ${msg}`);
+          }
+        }
+
+        // 3. Remove selected untracked files
+        // Use -ffd (double force) to also handle nested git repositories
+        if (untrackedFiles.length > 0) {
+          try {
+            await execGitCommand(['clean', '-ffd', '--', ...untrackedFiles], worktreePath);
+          } catch (error) {
+            const msg = getErrorMessage(error);
+            logError(error, `Failed to clean untracked files: ${msg}`);
+            warnings.push(`Failed to remove some untracked files: ${msg}`);
+          }
+        }
+
+        const fileCount = files.length;
+
+        // Verify the remaining state
+        const finalStatus = await execGitCommand(['status', '--porcelain'], worktreePath);
+
+        const remainingCount = finalStatus.trim()
+          ? finalStatus.trim().split('\n').filter(Boolean).length
+          : 0;
+        const actualDiscarded = allFiles.length - remainingCount;
+
+        let message =
+          actualDiscarded < fileCount
+            ? `Discarded ${actualDiscarded} of ${fileCount} selected files, ${remainingCount} files remaining`
+            : `Discarded ${actualDiscarded} ${actualDiscarded === 1 ? 'file' : 'files'}`;
+
+        res.json({
+          success: true,
+          result: {
+            discarded: true,
+            filesDiscarded: actualDiscarded,
+            filesRemaining: remainingCount,
+            branch: branchName,
+            message,
+            ...(warnings.length > 0 && { warnings }),
+          },
+        });
+      } else {
+        // Discard ALL changes (original behavior)
+        const fileCount = allFiles.length;
+        const warnings: string[] = [];
+
+        // 1. Reset any staged changes
+        try {
+          await execGitCommand(['reset', 'HEAD'], worktreePath);
+        } catch (error) {
+          const msg = getErrorMessage(error);
+          logError(error, `git reset HEAD failed: ${msg}`);
+          warnings.push(`Failed to unstage changes: ${msg}`);
+        }
+
+        // 2. Discard changes in tracked files
+        try {
+          await execGitCommand(['checkout', '.'], worktreePath);
+        } catch (error) {
+          const msg = getErrorMessage(error);
+          logError(error, `git checkout . failed: ${msg}`);
+          warnings.push(`Failed to revert tracked changes: ${msg}`);
+        }
+
+        // 3. Remove untracked files and directories
+        // Use -ffd (double force) to also handle nested git repositories
+        try {
+          await execGitCommand(['clean', '-ffd', '--'], worktreePath);
+        } catch (error) {
+          const msg = getErrorMessage(error);
+          logError(error, `git clean -ffd failed: ${msg}`);
+          warnings.push(`Failed to remove untracked files: ${msg}`);
+        }
+
+        // Verify all changes were discarded
+        const finalStatus = await execGitCommand(['status', '--porcelain'], worktreePath);
+
+        if (finalStatus.trim()) {
+          const remainingCount = finalStatus.trim().split('\n').filter(Boolean).length;
+          res.json({
+            success: true,
+            result: {
+              discarded: true,
+              filesDiscarded: fileCount - remainingCount,
+              filesRemaining: remainingCount,
+              branch: branchName,
+              message: `Discarded ${fileCount - remainingCount} files, ${remainingCount} files could not be removed`,
+              ...(warnings.length > 0 && { warnings }),
+            },
+          });
+        } else {
+          res.json({
+            success: true,
+            result: {
+              discarded: true,
+              filesDiscarded: fileCount,
+              filesRemaining: 0,
+              branch: branchName,
+              message: `Discarded ${fileCount} ${fileCount === 1 ? 'file' : 'files'}`,
+              ...(warnings.length > 0 && { warnings }),
+            },
+          });
+        }
+      }
+    } catch (error) {
+      logError(error, 'Discard changes failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/file-diff.ts b/temp_repo/apps/server/src/routes/worktree/routes/file-diff.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f3d4ed1a6bed02e9e5d502e7eb712f08a3e4bbb9
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/file-diff.ts
@@ -0,0 +1,82 @@
+/**
+ * POST /file-diff endpoint - Get diff for a specific file
+ */
+
+import type { Request, Response } from 'express';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import path from 'path';
+import * as secureFs from '../../../lib/secure-fs.js';
+import { getErrorMessage, logError } from '../common.js';
+import { generateSyntheticDiffForNewFile } from '../../common.js';
+
+const execAsync = promisify(exec);
+
+export function createFileDiffHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureId, filePath, useWorktrees } = req.body as {
+        projectPath: string;
+        featureId: string;
+        filePath: string;
+        useWorktrees?: boolean;
+      };
+
+      if (!projectPath || !featureId || !filePath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath, featureId, and filePath required',
+        });
+        return;
+      }
+
+      // If worktrees aren't enabled, don't probe .worktrees at all.
+      if (useWorktrees === false) {
+        res.json({ success: true, diff: '', filePath });
+        return;
+      }
+
+      // Git worktrees are stored in project directory
+      // Sanitize featureId the same way it's sanitized when creating worktrees
+      // (see create.ts: branchName.replace(/[^a-zA-Z0-9_-]/g, '-'))
+      const sanitizedFeatureId = featureId.replace(/[^a-zA-Z0-9_-]/g, '-');
+      const worktreePath = path.join(projectPath, '.worktrees', sanitizedFeatureId);
+
+      try {
+        await secureFs.access(worktreePath);
+
+        // First check if the file is untracked
+        const { stdout: status } = await execAsync(`git status --porcelain -- "${filePath}"`, {
+          cwd: worktreePath,
+        });
+
+        const isUntracked = status.trim().startsWith('??');
+
+        let diff: string;
+        if (isUntracked) {
+          // Generate synthetic diff for untracked file
+          diff = await generateSyntheticDiffForNewFile(worktreePath, filePath);
+        } else {
+          // Use regular git diff for tracked files
+          const result = await execAsync(`git diff HEAD -- "${filePath}"`, {
+            cwd: worktreePath,
+            maxBuffer: 10 * 1024 * 1024,
+          });
+          diff = result.stdout;
+        }
+
+        res.json({ success: true, diff, filePath });
+      } catch (innerError) {
+        const code = (innerError as NodeJS.ErrnoException | undefined)?.code;
+        // ENOENT is expected when a feature has no worktree; don't log as an error.
+        if (code && code !== 'ENOENT') {
+          logError(innerError, 'Worktree file diff failed');
+        }
+        res.json({ success: true, diff: '', filePath });
+      }
+    } catch (error) {
+      logError(error, 'Get worktree file diff failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/generate-commit-message.ts b/temp_repo/apps/server/src/routes/worktree/routes/generate-commit-message.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ab3a3aca3fe48ccf5c9b0b7a17c6ed8d676e1a4b
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/generate-commit-message.ts
@@ -0,0 +1,270 @@
+/**
+ * POST /worktree/generate-commit-message endpoint - Generate an AI commit message from git diff
+ *
+ * Uses the configured model (via phaseModels.commitMessageModel) to generate a concise,
+ * conventional commit message from git changes. Defaults to Claude Haiku for speed.
+ */
+
+import type { Request, Response } from 'express';
+import { execFile } from 'child_process';
+import { promisify } from 'util';
+import { existsSync } from 'fs';
+import { join } from 'path';
+import { createLogger } from '@automaker/utils';
+import { isCursorModel, stripProviderPrefix } from '@automaker/types';
+import { resolvePhaseModel } from '@automaker/model-resolver';
+import { mergeCommitMessagePrompts } from '@automaker/prompts';
+import { ProviderFactory } from '../../../providers/provider-factory.js';
+import type { SettingsService } from '../../../services/settings-service.js';
+import { getErrorMessage, logError } from '../common.js';
+import { getPhaseModelWithOverrides } from '../../../lib/settings-helpers.js';
+
+const logger = createLogger('GenerateCommitMessage');
+const execFileAsync = promisify(execFile);
+
+/** Timeout for AI provider calls in milliseconds (30 seconds) */
+const AI_TIMEOUT_MS = 30_000;
+
+/**
+ * Wraps an async generator with a timeout.
+ * If the generator takes longer than the timeout, it throws an error.
+ */
+async function* withTimeout<T>(
+  generator: AsyncIterable<T>,
+  timeoutMs: number
+): AsyncGenerator<T, void, unknown> {
+  let timerId: ReturnType<typeof setTimeout> | undefined;
+
+  const timeoutPromise = new Promise<never>((_, reject) => {
+    timerId = setTimeout(
+      () => reject(new Error(`AI provider timed out after ${timeoutMs}ms`)),
+      timeoutMs
+    );
+  });
+
+  const iterator = generator[Symbol.asyncIterator]();
+  let done = false;
+
+  try {
+    while (!done) {
+      const result = await Promise.race([iterator.next(), timeoutPromise]).catch(async (err) => {
+        // Capture the original error, then attempt to close the iterator.
+        // If iterator.return() throws, log it but rethrow the original error
+        // so the timeout error (not the teardown error) is preserved.
+        try {
+          await iterator.return?.();
+        } catch (teardownErr) {
+          logger.warn('Error during iterator cleanup after timeout:', teardownErr);
+        }
+        throw err;
+      });
+      if (result.done) {
+        done = true;
+      } else {
+        yield result.value;
+      }
+    }
+  } finally {
+    clearTimeout(timerId);
+  }
+}
+
+/**
+ * Get the effective system prompt for commit message generation.
+ * Uses custom prompt from settings if enabled, otherwise falls back to default.
+ */
+async function getSystemPrompt(settingsService?: SettingsService): Promise<string> {
+  const settings = await settingsService?.getGlobalSettings();
+  const prompts = mergeCommitMessagePrompts(settings?.promptCustomization?.commitMessage);
+  return prompts.systemPrompt;
+}
+
+interface GenerateCommitMessageRequestBody {
+  worktreePath: string;
+}
+
+interface GenerateCommitMessageSuccessResponse {
+  success: true;
+  message: string;
+}
+
+interface GenerateCommitMessageErrorResponse {
+  success: false;
+  error: string;
+}
+
+export function createGenerateCommitMessageHandler(
+  settingsService?: SettingsService
+): (req: Request, res: Response) => Promise<void> {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath } = req.body as GenerateCommitMessageRequestBody;
+
+      if (!worktreePath || typeof worktreePath !== 'string') {
+        const response: GenerateCommitMessageErrorResponse = {
+          success: false,
+          error: 'worktreePath is required and must be a string',
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      // Validate that the directory exists
+      if (!existsSync(worktreePath)) {
+        const response: GenerateCommitMessageErrorResponse = {
+          success: false,
+          error: 'worktreePath does not exist',
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      // Validate that it's a git repository (check for .git folder or file for worktrees)
+      const gitPath = join(worktreePath, '.git');
+      if (!existsSync(gitPath)) {
+        const response: GenerateCommitMessageErrorResponse = {
+          success: false,
+          error: 'worktreePath is not a git repository',
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      logger.info(`Generating commit message for worktree: ${worktreePath}`);
+
+      // Get git diff of staged and unstaged changes
+      let diff = '';
+      try {
+        // First try to get staged changes
+        const { stdout: stagedDiff } = await execFileAsync('git', ['diff', '--cached'], {
+          cwd: worktreePath,
+          maxBuffer: 1024 * 1024 * 5, // 5MB buffer
+        });
+
+        // If no staged changes, get unstaged changes
+        if (!stagedDiff.trim()) {
+          const { stdout: unstagedDiff } = await execFileAsync('git', ['diff'], {
+            cwd: worktreePath,
+            maxBuffer: 1024 * 1024 * 5, // 5MB buffer
+          });
+          diff = unstagedDiff;
+        } else {
+          diff = stagedDiff;
+        }
+      } catch (error) {
+        logger.error('Failed to get git diff:', error);
+        const response: GenerateCommitMessageErrorResponse = {
+          success: false,
+          error: 'Failed to get git changes',
+        };
+        res.status(500).json(response);
+        return;
+      }
+
+      if (!diff.trim()) {
+        const response: GenerateCommitMessageErrorResponse = {
+          success: false,
+          error: 'No changes to commit',
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      // Truncate diff if too long (keep first 10000 characters to avoid token limits)
+      const truncatedDiff =
+        diff.length > 10000 ? diff.substring(0, 10000) + '\n\n[... diff truncated ...]' : diff;
+
+      const userPrompt = `Generate a commit message for these changes:\n\n\`\`\`diff\n${truncatedDiff}\n\`\`\``;
+
+      // Get model from phase settings with provider info
+      const {
+        phaseModel: phaseModelEntry,
+        provider: claudeCompatibleProvider,
+        credentials,
+      } = await getPhaseModelWithOverrides(
+        'commitMessageModel',
+        settingsService,
+        worktreePath,
+        '[GenerateCommitMessage]'
+      );
+      const { model, thinkingLevel } = resolvePhaseModel(phaseModelEntry);
+
+      logger.info(
+        `Using model for commit message: ${model}`,
+        claudeCompatibleProvider ? `via provider: ${claudeCompatibleProvider.name}` : 'direct API'
+      );
+
+      // Get the effective system prompt (custom or default)
+      const systemPrompt = await getSystemPrompt(settingsService);
+
+      // Get provider for the model type
+      const aiProvider = ProviderFactory.getProviderForModel(model);
+      const bareModel = stripProviderPrefix(model);
+
+      // For Cursor models, combine prompts since Cursor doesn't support systemPrompt separation
+      const effectivePrompt = isCursorModel(model)
+        ? `${systemPrompt}\n\n${userPrompt}`
+        : userPrompt;
+      const effectiveSystemPrompt = isCursorModel(model) ? undefined : systemPrompt;
+
+      logger.info(`Using ${aiProvider.getName()} provider for model: ${model}`);
+
+      let responseText = '';
+      const stream = aiProvider.executeQuery({
+        prompt: effectivePrompt,
+        model: bareModel,
+        cwd: worktreePath,
+        systemPrompt: effectiveSystemPrompt,
+        maxTurns: 1,
+        allowedTools: [],
+        readOnly: true,
+        thinkingLevel, // Pass thinking level for extended thinking support
+        claudeCompatibleProvider, // Pass provider for alternative endpoint configuration
+        credentials, // Pass credentials for resolving 'credentials' apiKeySource
+      });
+
+      // Wrap with timeout to prevent indefinite hangs
+      for await (const msg of withTimeout(stream, AI_TIMEOUT_MS)) {
+        if (msg.type === 'assistant' && msg.message?.content) {
+          for (const block of msg.message.content) {
+            if (block.type === 'text' && block.text) {
+              responseText += block.text;
+            }
+          }
+        } else if (msg.type === 'result' && msg.subtype === 'success' && msg.result) {
+          // Use result text if longer than accumulated text (consistent with simpleQuery pattern)
+          if (msg.result.length > responseText.length) {
+            responseText = msg.result;
+          }
+        }
+      }
+
+      const message = responseText.trim();
+
+      if (!message) {
+        logger.warn('Received empty response from model');
+        const response: GenerateCommitMessageErrorResponse = {
+          success: false,
+          error: 'Failed to generate commit message - empty response',
+        };
+        res.status(500).json(response);
+        return;
+      }
+
+      logger.info(`Generated commit message: ${message.trim().substring(0, 100)}...`);
+
+      const response: GenerateCommitMessageSuccessResponse = {
+        success: true,
+        message: message.trim(),
+      };
+      res.json(response);
+    } catch (error) {
+      logError(error, 'Generate commit message failed');
+      const response: GenerateCommitMessageErrorResponse = {
+        success: false,
+        error: getErrorMessage(error),
+      };
+      res.status(500).json(response);
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/generate-pr-description.ts b/temp_repo/apps/server/src/routes/worktree/routes/generate-pr-description.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a588f82dea99da823f381c1b5ae8d9dc400c4f22
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/generate-pr-description.ts
@@ -0,0 +1,491 @@
+/**
+ * POST /worktree/generate-pr-description endpoint - Generate an AI PR description from git diff
+ *
+ * Uses the configured model (via phaseModels.commitMessageModel) to generate a pull request
+ * title and description from the branch's changes compared to the base branch.
+ * Defaults to Claude Haiku for speed.
+ */
+
+import type { Request, Response } from 'express';
+import { execFile } from 'child_process';
+import { promisify } from 'util';
+import { existsSync } from 'fs';
+import { join } from 'path';
+import { createLogger } from '@automaker/utils';
+import { isCursorModel, stripProviderPrefix } from '@automaker/types';
+import { resolvePhaseModel } from '@automaker/model-resolver';
+import { ProviderFactory } from '../../../providers/provider-factory.js';
+import type { SettingsService } from '../../../services/settings-service.js';
+import { getErrorMessage, logError } from '../common.js';
+import { getPhaseModelWithOverrides } from '../../../lib/settings-helpers.js';
+
+const logger = createLogger('GeneratePRDescription');
+const execFileAsync = promisify(execFile);
+
+/** Timeout for AI provider calls in milliseconds (30 seconds) */
+const AI_TIMEOUT_MS = 30_000;
+
+/** Max diff size to send to AI (characters) */
+const MAX_DIFF_SIZE = 15_000;
+
+const PR_DESCRIPTION_SYSTEM_PROMPT = `You are a pull request description generator. Your task is to create a clear, well-structured PR title and description based on the git diff and branch information provided.
+
+IMPORTANT: Do NOT include any conversational text, explanations, or preamble. Do NOT say things like "I'll analyze..." or "Here is...". Output ONLY the structured format below and nothing else.
+
+Output your response in EXACTLY this format (including the markers):
+---TITLE---
+<a concise PR title, 50-72 chars, imperative mood>
+---BODY---
+## Summary
+<1-3 bullet points describing the key changes>
+
+## Changes
+<Detailed list of what was changed and why>
+
+Rules:
+- Your ENTIRE response must start with ---TITLE--- and contain nothing before it
+- The title should be concise and descriptive (50-72 characters)
+- Use imperative mood for the title (e.g., "Add dark mode toggle" not "Added dark mode toggle")
+- The description should explain WHAT changed and WHY
+- Group related changes together
+- Use markdown formatting for the body
+- Do NOT include the branch name in the title
+- Focus on the user-facing impact when possible
+- If there are breaking changes, mention them prominently
+- The diff may include both committed changes and uncommitted working directory changes. Treat all changes as part of the PR since uncommitted changes will be committed when the PR is created
+- Do NOT distinguish between committed and uncommitted changes in the output - describe all changes as a unified set of PR changes
+- EXCLUDE any files that are gitignored (e.g., node_modules, dist, build, .env files, lock files, generated files, binary artifacts, coverage reports, cache directories). These should not be mentioned in the description even if they appear in the diff
+- Focus only on meaningful source code changes that are tracked by git and relevant to reviewers`;
+
+/**
+ * Wraps an async generator with a timeout.
+ */
+async function* withTimeout<T>(
+  generator: AsyncIterable<T>,
+  timeoutMs: number
+): AsyncGenerator<T, void, unknown> {
+  let timerId: ReturnType<typeof setTimeout> | undefined;
+
+  const timeoutPromise = new Promise<never>((_, reject) => {
+    timerId = setTimeout(
+      () => reject(new Error(`AI provider timed out after ${timeoutMs}ms`)),
+      timeoutMs
+    );
+  });
+
+  const iterator = generator[Symbol.asyncIterator]();
+  let done = false;
+
+  try {
+    while (!done) {
+      const result = await Promise.race([iterator.next(), timeoutPromise]).catch(async (err) => {
+        // Timeout (or other error) — attempt to gracefully close the source generator
+        await iterator.return?.();
+        throw err;
+      });
+      if (result.done) {
+        done = true;
+      } else {
+        yield result.value;
+      }
+    }
+  } finally {
+    clearTimeout(timerId);
+  }
+}
+
+interface GeneratePRDescriptionRequestBody {
+  worktreePath: string;
+  baseBranch?: string;
+}
+
+interface GeneratePRDescriptionSuccessResponse {
+  success: true;
+  title: string;
+  body: string;
+}
+
+interface GeneratePRDescriptionErrorResponse {
+  success: false;
+  error: string;
+}
+
+export function createGeneratePRDescriptionHandler(
+  settingsService?: SettingsService
+): (req: Request, res: Response) => Promise<void> {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, baseBranch } = req.body as GeneratePRDescriptionRequestBody;
+
+      if (!worktreePath || typeof worktreePath !== 'string') {
+        const response: GeneratePRDescriptionErrorResponse = {
+          success: false,
+          error: 'worktreePath is required and must be a string',
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      // Validate that the directory exists
+      if (!existsSync(worktreePath)) {
+        const response: GeneratePRDescriptionErrorResponse = {
+          success: false,
+          error: 'worktreePath does not exist',
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      // Validate that it's a git repository
+      const gitPath = join(worktreePath, '.git');
+      if (!existsSync(gitPath)) {
+        const response: GeneratePRDescriptionErrorResponse = {
+          success: false,
+          error: 'worktreePath is not a git repository',
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      // Validate baseBranch to allow only safe branch name characters
+      if (baseBranch !== undefined && !/^[\w.\-/]+$/.test(baseBranch)) {
+        const response: GeneratePRDescriptionErrorResponse = {
+          success: false,
+          error: 'baseBranch contains invalid characters',
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      logger.info(`Generating PR description for worktree: ${worktreePath}`);
+
+      // Get current branch name
+      const { stdout: branchOutput } = await execFileAsync(
+        'git',
+        ['rev-parse', '--abbrev-ref', 'HEAD'],
+        { cwd: worktreePath }
+      );
+      const branchName = branchOutput.trim();
+
+      // Determine the base branch for comparison
+      const base = baseBranch || 'main';
+
+      // Collect diffs in three layers and combine them:
+      //   1. Committed changes on the branch: `git diff base...HEAD`
+      //   2. Staged (cached) changes not yet committed: `git diff --cached`
+      //   3. Unstaged changes to tracked files: `git diff` (no --cached flag)
+      //
+      // Untracked files are intentionally excluded — they are typically build artifacts,
+      // planning files, hidden dotfiles, or other files unrelated to the PR.
+      // `git diff` and `git diff --cached` only show changes to files already tracked by git,
+      // which is exactly the correct scope.
+      //
+      // We combine all three sources and deduplicate by file path so that a file modified
+      // in commits AND with additional uncommitted changes is not double-counted.
+
+      /** Parse a unified diff into per-file hunks keyed by file path */
+      function parseDiffIntoFileHunks(diffText: string): Map<string, string> {
+        const fileHunks = new Map<string, string>();
+        if (!diffText.trim()) return fileHunks;
+
+        // Split on "diff --git" boundaries (keep the delimiter)
+        const sections = diffText.split(/(?=^diff --git )/m);
+        for (const section of sections) {
+          if (!section.trim()) continue;
+          // Use a back-reference pattern so the "b/" side must match the "a/" capture,
+          // correctly handling paths that contain " b/" in their name.
+          // Falls back to a two-capture pattern to handle renames (a/ and b/ differ).
+          const backrefMatch = section.match(/^diff --git a\/(.+) b\/\1$/m);
+          const renameMatch = !backrefMatch ? section.match(/^diff --git a\/(.+) b\/(.+)$/m) : null;
+          const match = backrefMatch || renameMatch;
+          if (match) {
+            // Prefer the backref capture (identical paths); for renames use the destination (match[2])
+            const filePath = backrefMatch ? match[1] : match[2];
+            // Merge hunks if the same file appears in multiple diff sources
+            const existing = fileHunks.get(filePath) ?? '';
+            fileHunks.set(filePath, existing + section);
+          }
+        }
+        return fileHunks;
+      }
+
+      // --- Step 1: committed changes (branch vs base) ---
+      let committedDiff = '';
+      try {
+        const { stdout } = await execFileAsync('git', ['diff', `${base}...HEAD`], {
+          cwd: worktreePath,
+          maxBuffer: 1024 * 1024 * 5,
+        });
+        committedDiff = stdout;
+      } catch {
+        // Base branch may not exist locally; try the remote tracking branch
+        try {
+          const { stdout } = await execFileAsync('git', ['diff', `origin/${base}...HEAD`], {
+            cwd: worktreePath,
+            maxBuffer: 1024 * 1024 * 5,
+          });
+          committedDiff = stdout;
+        } catch {
+          // Cannot compare against base — leave committedDiff empty; the uncommitted
+          // changes gathered below will still be included.
+          logger.warn(`Could not get committed diff against ${base} or origin/${base}`);
+        }
+      }
+
+      // --- Step 2: staged changes (tracked files only) ---
+      let stagedDiff = '';
+      try {
+        const { stdout } = await execFileAsync('git', ['diff', '--cached'], {
+          cwd: worktreePath,
+          maxBuffer: 1024 * 1024 * 5,
+        });
+        stagedDiff = stdout;
+      } catch (err) {
+        // Non-fatal — staged diff is a best-effort supplement
+        logger.debug('Failed to get staged diff', err);
+      }
+
+      // --- Step 3: unstaged changes (tracked files only) ---
+      let unstagedDiff = '';
+      try {
+        const { stdout } = await execFileAsync('git', ['diff'], {
+          cwd: worktreePath,
+          maxBuffer: 1024 * 1024 * 5,
+        });
+        unstagedDiff = stdout;
+      } catch (err) {
+        // Non-fatal — unstaged diff is a best-effort supplement
+        logger.debug('Failed to get unstaged diff', err);
+      }
+
+      // --- Combine and deduplicate ---
+      // Build a map of filePath → diff content by concatenating hunks from all sources
+      // in chronological order (committed → staged → unstaged) so that no changes
+      // are lost when a file appears in multiple diff sources.
+      const combinedFileHunks = new Map<string, string>();
+
+      for (const source of [committedDiff, stagedDiff, unstagedDiff]) {
+        const hunks = parseDiffIntoFileHunks(source);
+        for (const [filePath, hunk] of hunks) {
+          if (combinedFileHunks.has(filePath)) {
+            combinedFileHunks.set(filePath, combinedFileHunks.get(filePath)! + hunk);
+          } else {
+            combinedFileHunks.set(filePath, hunk);
+          }
+        }
+      }
+
+      const diff = Array.from(combinedFileHunks.values()).join('');
+
+      // Log what files were included for observability
+      if (combinedFileHunks.size > 0) {
+        logger.info(`PR description scope: ${combinedFileHunks.size} file(s)`);
+        logger.debug(
+          `PR description scope files: ${Array.from(combinedFileHunks.keys()).join(', ')}`
+        );
+      }
+
+      // Also get the commit log for context — always scoped to the selected base branch
+      // so the log only contains commits that are part of this PR.
+      // We do NOT fall back to an unscoped `git log` because that would include commits
+      // from the base branch itself and produce misleading AI context.
+      let commitLog = '';
+      try {
+        const { stdout: logOutput } = await execFileAsync(
+          'git',
+          ['log', `${base}..HEAD`, '--oneline', '--no-decorate'],
+          {
+            cwd: worktreePath,
+            maxBuffer: 1024 * 1024,
+          }
+        );
+        commitLog = logOutput.trim();
+      } catch {
+        // Base branch not available locally — try the remote tracking branch
+        try {
+          const { stdout: logOutput } = await execFileAsync(
+            'git',
+            ['log', `origin/${base}..HEAD`, '--oneline', '--no-decorate'],
+            {
+              cwd: worktreePath,
+              maxBuffer: 1024 * 1024,
+            }
+          );
+          commitLog = logOutput.trim();
+        } catch {
+          // Cannot scope commit log to base branch — leave empty rather than
+          // including unscoped commits that would pollute the AI context.
+          logger.warn(`Could not get commit log against ${base} or origin/${base}`);
+        }
+      }
+
+      if (!diff.trim() && !commitLog.trim()) {
+        const response: GeneratePRDescriptionErrorResponse = {
+          success: false,
+          error: 'No changes found to generate a PR description from',
+        };
+        res.status(400).json(response);
+        return;
+      }
+
+      // Truncate diff if too long
+      const truncatedDiff =
+        diff.length > MAX_DIFF_SIZE
+          ? diff.substring(0, MAX_DIFF_SIZE) + '\n\n[... diff truncated ...]'
+          : diff;
+
+      // Build the user prompt
+      let userPrompt = `Generate a pull request title and description for the following changes.\n\nBranch: ${branchName}\nBase Branch: ${base}\n`;
+
+      if (commitLog) {
+        userPrompt += `\nCommit History:\n${commitLog}\n`;
+      }
+
+      if (truncatedDiff) {
+        userPrompt += `\n\`\`\`diff\n${truncatedDiff}\n\`\`\``;
+      }
+
+      // Get model from phase settings with provider info
+      const {
+        phaseModel: phaseModelEntry,
+        provider: claudeCompatibleProvider,
+        credentials,
+      } = await getPhaseModelWithOverrides(
+        'commitMessageModel',
+        settingsService,
+        worktreePath,
+        '[GeneratePRDescription]'
+      );
+      const { model, thinkingLevel } = resolvePhaseModel(phaseModelEntry);
+
+      logger.info(
+        `Using model for PR description: ${model}`,
+        claudeCompatibleProvider ? `via provider: ${claudeCompatibleProvider.name}` : 'direct API'
+      );
+
+      // Get provider for the model type
+      const aiProvider = ProviderFactory.getProviderForModel(model);
+      const bareModel = stripProviderPrefix(model);
+
+      // For Cursor models, combine prompts
+      const effectivePrompt = isCursorModel(model)
+        ? `${PR_DESCRIPTION_SYSTEM_PROMPT}\n\n${userPrompt}`
+        : userPrompt;
+      const effectiveSystemPrompt = isCursorModel(model) ? undefined : PR_DESCRIPTION_SYSTEM_PROMPT;
+
+      logger.info(`Using ${aiProvider.getName()} provider for model: ${model}`);
+
+      let responseText = '';
+      const stream = aiProvider.executeQuery({
+        prompt: effectivePrompt,
+        model: bareModel,
+        cwd: worktreePath,
+        systemPrompt: effectiveSystemPrompt,
+        maxTurns: 1,
+        allowedTools: [],
+        readOnly: true,
+        thinkingLevel,
+        claudeCompatibleProvider,
+        credentials,
+      });
+
+      // Wrap with timeout
+      for await (const msg of withTimeout(stream, AI_TIMEOUT_MS)) {
+        if (msg.type === 'assistant' && msg.message?.content) {
+          for (const block of msg.message.content) {
+            if (block.type === 'text' && block.text) {
+              responseText += block.text;
+            }
+          }
+        } else if (msg.type === 'result' && msg.subtype === 'success' && msg.result) {
+          // Use result text if longer than accumulated text (consistent with simpleQuery pattern)
+          if (msg.result.length > responseText.length) {
+            responseText = msg.result;
+          }
+        }
+      }
+
+      const fullResponse = responseText.trim();
+
+      if (!fullResponse || fullResponse.length === 0) {
+        logger.warn('Received empty response from model');
+        const response: GeneratePRDescriptionErrorResponse = {
+          success: false,
+          error: 'Failed to generate PR description - empty response',
+        };
+        res.status(500).json(response);
+        return;
+      }
+
+      // Parse the response to extract title and body.
+      // The model may include conversational preamble before the structured markers,
+      // so we search for the markers anywhere in the response, not just at the start.
+      let title = '';
+      let body = '';
+
+      const titleMatch = fullResponse.match(/---TITLE---\s*\n([\s\S]*?)(?=---BODY---|$)/);
+      const bodyMatch = fullResponse.match(/---BODY---\s*\n([\s\S]*?)$/);
+
+      if (titleMatch && bodyMatch) {
+        title = titleMatch[1].trim();
+        body = bodyMatch[1].trim();
+      } else {
+        // Fallback: try to extract meaningful content, skipping any conversational preamble.
+        // Common preamble patterns start with "I'll", "I will", "Here", "Let me", "Based on", etc.
+        const lines = fullResponse.split('\n').filter((line) => line.trim().length > 0);
+
+        // Skip lines that look like conversational preamble
+        let startIndex = 0;
+        for (let i = 0; i < lines.length; i++) {
+          const line = lines[i].trim();
+          // Check if this line looks like conversational AI preamble
+          if (
+            /^(I'll|I will|Here('s| is| are)|Let me|Based on|Looking at|Analyzing|Sure|OK|Okay|Of course)/i.test(
+              line
+            ) ||
+            /^(The following|Below is|This (is|will)|After (analyzing|reviewing|looking))/i.test(
+              line
+            )
+          ) {
+            startIndex = i + 1;
+            continue;
+          }
+          break;
+        }
+
+        // Use remaining lines after skipping preamble
+        const contentLines = lines.slice(startIndex);
+        if (contentLines.length > 0) {
+          title = contentLines[0].trim();
+          body = contentLines.slice(1).join('\n').trim();
+        } else {
+          // If all lines were filtered as preamble, use the original first non-empty line
+          title = lines[0]?.trim() || '';
+          body = lines.slice(1).join('\n').trim();
+        }
+      }
+
+      // Clean up title - remove any markdown headings, quotes, or marker artifacts
+      title = title
+        .replace(/^#+\s*/, '')
+        .replace(/^["']|["']$/g, '')
+        .replace(/^---\w+---\s*/, '');
+
+      logger.info(`Generated PR title: ${title.substring(0, 100)}...`);
+
+      const response: GeneratePRDescriptionSuccessResponse = {
+        success: true,
+        title,
+        body,
+      };
+      res.json(response);
+    } catch (error) {
+      logError(error, 'Generate PR description failed');
+      const response: GeneratePRDescriptionErrorResponse = {
+        success: false,
+        error: getErrorMessage(error),
+      };
+      res.status(500).json(response);
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/info.ts b/temp_repo/apps/server/src/routes/worktree/routes/info.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5c2eb808eda31e83cf2a6bdd02d6a53d949916e1
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/info.ts
@@ -0,0 +1,53 @@
+/**
+ * POST /info endpoint - Get worktree info
+ */
+
+import type { Request, Response } from 'express';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import path from 'path';
+import * as secureFs from '../../../lib/secure-fs.js';
+import { getErrorMessage, logError, normalizePath } from '../common.js';
+
+const execAsync = promisify(exec);
+
+export function createInfoHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureId } = req.body as {
+        projectPath: string;
+        featureId: string;
+      };
+
+      if (!projectPath || !featureId) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and featureId required',
+        });
+        return;
+      }
+
+      // Check if worktree exists (git worktrees are stored in project directory)
+      // Sanitize featureId the same way it's sanitized when creating worktrees
+      // (see create.ts: branchName.replace(/[^a-zA-Z0-9_-]/g, '-'))
+      const sanitizedFeatureId = featureId.replace(/[^a-zA-Z0-9_-]/g, '-');
+      const worktreePath = path.join(projectPath, '.worktrees', sanitizedFeatureId);
+      try {
+        await secureFs.access(worktreePath);
+        const { stdout } = await execAsync('git rev-parse --abbrev-ref HEAD', {
+          cwd: worktreePath,
+        });
+        res.json({
+          success: true,
+          worktreePath: normalizePath(worktreePath),
+          branchName: stdout.trim(),
+        });
+      } catch {
+        res.json({ success: true, worktreePath: null, branchName: null });
+      }
+    } catch (error) {
+      logError(error, 'Get worktree info failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/init-git.ts b/temp_repo/apps/server/src/routes/worktree/routes/init-git.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6d58942f3f15f1c5c123646d8beefb5792f14f86
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/init-git.ts
@@ -0,0 +1,133 @@
+/**
+ * POST /init-git endpoint - Initialize a git repository in a directory
+ */
+
+import type { Request, Response } from 'express';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import * as secureFs from '../../../lib/secure-fs.js';
+import { join } from 'path';
+import { getErrorMessage, logError } from '../common.js';
+
+const execAsync = promisify(exec);
+
+export function createInitGitHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as {
+        projectPath: string;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath required',
+        });
+        return;
+      }
+
+      // Check if .git already exists
+      const gitDirPath = join(projectPath, '.git');
+      try {
+        await secureFs.access(gitDirPath);
+        // .git exists
+        res.json({
+          success: true,
+          result: {
+            initialized: false,
+            message: 'Git repository already exists',
+          },
+        });
+        return;
+      } catch {
+        // .git doesn't exist, continue with initialization
+      }
+
+      // Initialize git with 'main' as the default branch (matching GitHub's standard since 2020)
+      // Run commands sequentially so failures can be handled and partial state cleaned up.
+      let gitDirCreated = false;
+      try {
+        // Step 1: initialize the repository
+        try {
+          await execAsync(`git init --initial-branch=main`, { cwd: projectPath });
+        } catch (initError: unknown) {
+          const stderr =
+            initError && typeof initError === 'object' && 'stderr' in initError
+              ? String((initError as { stderr?: string }).stderr)
+              : '';
+          // Idempotent: if .git was created by a concurrent request or a stale lock exists,
+          // treat as "repo already exists" instead of failing
+          if (
+            /could not lock config file.*File exists|fatal: could not set 'core\.repositoryformatversion'/.test(
+              stderr
+            )
+          ) {
+            try {
+              await secureFs.access(gitDirPath);
+              res.json({
+                success: true,
+                result: {
+                  initialized: false,
+                  message: 'Git repository already exists',
+                },
+              });
+              return;
+            } catch {
+              // .git still missing, rethrow original error
+            }
+          }
+          throw initError;
+        }
+        gitDirCreated = true;
+
+        // Step 2: ensure user.name and user.email are set so the commit can succeed.
+        // Check the global/system config first; only set locally if missing.
+        let userName = '';
+        let userEmail = '';
+        try {
+          ({ stdout: userName } = await execAsync(`git config user.name`, { cwd: projectPath }));
+        } catch {
+          // not set globally – will configure locally below
+        }
+        try {
+          ({ stdout: userEmail } = await execAsync(`git config user.email`, {
+            cwd: projectPath,
+          }));
+        } catch {
+          // not set globally – will configure locally below
+        }
+
+        if (!userName.trim()) {
+          await execAsync(`git config user.name "Automaker"`, { cwd: projectPath });
+        }
+        if (!userEmail.trim()) {
+          await execAsync(`git config user.email "automaker@localhost"`, { cwd: projectPath });
+        }
+
+        // Step 3: create the initial empty commit
+        await execAsync(`git commit --allow-empty -m "Initial commit"`, { cwd: projectPath });
+      } catch (error: unknown) {
+        // Clean up the partial .git directory so subsequent runs behave deterministically
+        if (gitDirCreated) {
+          try {
+            await secureFs.rm(gitDirPath, { recursive: true, force: true });
+          } catch {
+            // best-effort cleanup; ignore errors
+          }
+        }
+        throw error;
+      }
+
+      res.json({
+        success: true,
+        result: {
+          initialized: true,
+          message: 'Git repository initialized with initial commit',
+        },
+      });
+    } catch (error) {
+      logError(error, 'Init git failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/init-script.ts b/temp_repo/apps/server/src/routes/worktree/routes/init-script.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e11dfd535bda26922c1e78bc681d91d080a97ecf
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/init-script.ts
@@ -0,0 +1,280 @@
+/**
+ * Init Script routes - Read/write/run the worktree-init.sh file
+ *
+ * POST /init-script - Read the init script content
+ * PUT /init-script - Write content to the init script file
+ * DELETE /init-script - Delete the init script file
+ * POST /run-init-script - Run the init script for a worktree
+ */
+
+import type { Request, Response } from 'express';
+import path from 'path';
+import * as secureFs from '../../../lib/secure-fs.js';
+import { getErrorMessage, logError, isValidBranchName } from '../common.js';
+import { createLogger } from '@automaker/utils';
+import type { EventEmitter } from '../../../lib/events.js';
+import { forceRunInitScript } from '../../../services/init-script-service.js';
+
+const logger = createLogger('InitScript');
+
+/** Fixed path for init script within .automaker directory */
+const INIT_SCRIPT_FILENAME = 'worktree-init.sh';
+
+/** Maximum allowed size for init scripts (1MB) */
+const MAX_SCRIPT_SIZE_BYTES = 1024 * 1024;
+
+/**
+ * Get the full path to the init script for a project
+ */
+function getInitScriptPath(projectPath: string): string {
+  return path.join(projectPath, '.automaker', INIT_SCRIPT_FILENAME);
+}
+
+/**
+ * GET /init-script - Read the init script content
+ */
+export function createGetInitScriptHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const rawProjectPath = req.query.projectPath;
+
+      // Validate projectPath is a non-empty string (not an array or undefined)
+      if (!rawProjectPath || typeof rawProjectPath !== 'string') {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath query parameter is required',
+        });
+        return;
+      }
+
+      const projectPath = rawProjectPath.trim();
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath cannot be empty',
+        });
+        return;
+      }
+
+      const scriptPath = getInitScriptPath(projectPath);
+
+      try {
+        const content = await secureFs.readFile(scriptPath, 'utf-8');
+        res.json({
+          success: true,
+          exists: true,
+          content: content as string,
+          path: scriptPath,
+        });
+      } catch {
+        // File doesn't exist
+        res.json({
+          success: true,
+          exists: false,
+          content: '',
+          path: scriptPath,
+        });
+      }
+    } catch (error) {
+      logError(error, 'Read init script failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
+
+/**
+ * PUT /init-script - Write content to the init script file
+ */
+export function createPutInitScriptHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, content } = req.body as {
+        projectPath: string;
+        content: string;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      if (typeof content !== 'string') {
+        res.status(400).json({
+          success: false,
+          error: 'content must be a string',
+        });
+        return;
+      }
+
+      // Validate script size to prevent disk exhaustion
+      const sizeBytes = Buffer.byteLength(content, 'utf-8');
+      if (sizeBytes > MAX_SCRIPT_SIZE_BYTES) {
+        res.status(400).json({
+          success: false,
+          error: `Script size (${Math.round(sizeBytes / 1024)}KB) exceeds maximum allowed size (${Math.round(MAX_SCRIPT_SIZE_BYTES / 1024)}KB)`,
+        });
+        return;
+      }
+
+      // Log warning if potentially dangerous patterns are detected (non-blocking)
+      const dangerousPatterns = [
+        /rm\s+-rf\s+\/(?!\s*\$)/i, // rm -rf / (not followed by variable)
+        /curl\s+.*\|\s*(?:bash|sh)/i, // curl | bash
+        /wget\s+.*\|\s*(?:bash|sh)/i, // wget | sh
+      ];
+
+      for (const pattern of dangerousPatterns) {
+        if (pattern.test(content)) {
+          logger.warn(
+            `Init script contains potentially dangerous pattern: ${pattern.source}. User responsibility to verify script safety.`
+          );
+        }
+      }
+
+      const scriptPath = getInitScriptPath(projectPath);
+      const automakerDir = path.dirname(scriptPath);
+
+      // Ensure .automaker directory exists
+      await secureFs.mkdir(automakerDir, { recursive: true });
+
+      // Write the script content
+      await secureFs.writeFile(scriptPath, content, 'utf-8');
+
+      logger.info(`Wrote init script to ${scriptPath}`);
+
+      res.json({
+        success: true,
+        path: scriptPath,
+      });
+    } catch (error) {
+      logError(error, 'Write init script failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
+
+/**
+ * DELETE /init-script - Delete the init script file
+ */
+export function createDeleteInitScriptHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath } = req.body as { projectPath: string };
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      const scriptPath = getInitScriptPath(projectPath);
+
+      await secureFs.rm(scriptPath, { force: true });
+      logger.info(`Deleted init script at ${scriptPath}`);
+      res.json({
+        success: true,
+      });
+    } catch (error) {
+      logError(error, 'Delete init script failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
+
+/**
+ * POST /run-init-script - Run (or re-run) the init script for a worktree
+ */
+export function createRunInitScriptHandler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, worktreePath, branch } = req.body as {
+        projectPath: string;
+        worktreePath: string;
+        branch: string;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath is required',
+        });
+        return;
+      }
+
+      if (!branch) {
+        res.status(400).json({
+          success: false,
+          error: 'branch is required',
+        });
+        return;
+      }
+
+      // Validate branch name to prevent injection via environment variables
+      if (!isValidBranchName(branch)) {
+        res.status(400).json({
+          success: false,
+          error:
+            'Invalid branch name. Branch names must contain only letters, numbers, dots, hyphens, underscores, and forward slashes.',
+        });
+        return;
+      }
+
+      const scriptPath = getInitScriptPath(projectPath);
+
+      // Check if script exists
+      try {
+        await secureFs.access(scriptPath);
+      } catch {
+        res.status(404).json({
+          success: false,
+          error: 'No init script found. Create one in Settings > Worktrees.',
+        });
+        return;
+      }
+
+      logger.info(`Running init script for branch "${branch}" (forced)`);
+
+      // Run the script asynchronously (non-blocking)
+      forceRunInitScript({
+        projectPath,
+        worktreePath,
+        branch,
+        emitter: events,
+      });
+
+      // Return immediately - progress will be streamed via WebSocket events
+      res.json({
+        success: true,
+        message: 'Init script started',
+      });
+    } catch (error) {
+      logError(error, 'Run init script failed');
+      res.status(500).json({
+        success: false,
+        error: getErrorMessage(error),
+      });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/list-branches.ts b/temp_repo/apps/server/src/routes/worktree/routes/list-branches.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c4ceea216fd384a11c0265d27b4060e17f97fc04
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/list-branches.ts
@@ -0,0 +1,197 @@
+/**
+ * POST /list-branches endpoint - List all local branches and optionally remote branches
+ *
+ * Note: Git repository validation (isGitRepo, hasCommits) is handled by
+ * the requireValidWorktree middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import { execFile } from 'child_process';
+import { promisify } from 'util';
+import { getErrorMessage, logWorktreeError, execGitCommand } from '../common.js';
+import { getRemotesWithBranch } from '../../../services/worktree-service.js';
+
+const execFileAsync = promisify(execFile);
+
+interface BranchInfo {
+  name: string;
+  isCurrent: boolean;
+  isRemote: boolean;
+}
+
+export function createListBranchesHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, includeRemote = false } = req.body as {
+        worktreePath: string;
+        includeRemote?: boolean;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      // Get current branch (execGitCommand avoids spawning /bin/sh; works in sandboxed CI)
+      const currentBranchOutput = await execGitCommand(
+        ['rev-parse', '--abbrev-ref', 'HEAD'],
+        worktreePath
+      );
+      const currentBranch = currentBranchOutput.trim();
+
+      // List all local branches
+      const branchesOutput = await execGitCommand(
+        ['branch', '--format=%(refname:short)'],
+        worktreePath
+      );
+
+      const branches: BranchInfo[] = branchesOutput
+        .trim()
+        .split('\n')
+        .filter((b) => b.trim())
+        .map((name) => {
+          // Remove any surrounding quotes (Windows git may preserve them)
+          const cleanName = name.trim().replace(/^['"]|['"]$/g, '');
+          return {
+            name: cleanName,
+            isCurrent: cleanName === currentBranch,
+            isRemote: false,
+          };
+        });
+
+      // Fetch remote branches if requested
+      if (includeRemote) {
+        try {
+          // Fetch latest remote refs (silently, don't fail if offline)
+          try {
+            await execGitCommand(['fetch', '--all', '--quiet'], worktreePath);
+          } catch {
+            // Ignore fetch errors - we'll use cached remote refs
+          }
+
+          // List remote branches
+          const remoteBranchesOutput = await execGitCommand(
+            ['branch', '-r', '--format=%(refname:short)'],
+            worktreePath
+          );
+
+          const localBranchNames = new Set(branches.map((b) => b.name));
+
+          remoteBranchesOutput
+            .trim()
+            .split('\n')
+            .filter((b) => b.trim())
+            .forEach((name) => {
+              // Remove any surrounding quotes
+              const cleanName = name.trim().replace(/^['"]|['"]$/g, '');
+              // Skip HEAD pointers like "origin/HEAD"
+              if (cleanName.includes('/HEAD')) return;
+
+              // Skip bare remote names without a branch (e.g. "origin" by itself)
+              if (!cleanName.includes('/')) return;
+
+              // Only add remote branches if a branch with the exact same name isn't already
+              // in the list. This avoids duplicates if a local branch is named like a remote one.
+              // Note: We intentionally include remote branches even when a local branch with the
+              // same base name exists (e.g., show "origin/main" even if local "main" exists),
+              // since users need to select remote branches as PR base targets.
+              if (!localBranchNames.has(cleanName)) {
+                branches.push({
+                  name: cleanName, // Keep full name like "origin/main"
+                  isCurrent: false,
+                  isRemote: true,
+                });
+              }
+            });
+        } catch {
+          // Ignore errors fetching remote branches - return local branches only
+        }
+      }
+
+      // Check if any remotes are configured for this repository
+      let hasAnyRemotes = false;
+      try {
+        const remotesOutput = await execGitCommand(['remote'], worktreePath);
+        hasAnyRemotes = remotesOutput.trim().length > 0;
+      } catch {
+        // If git remote fails, assume no remotes
+        hasAnyRemotes = false;
+      }
+
+      // Get ahead/behind count for current branch and check if remote branch exists
+      let aheadCount = 0;
+      let behindCount = 0;
+      let hasRemoteBranch = false;
+      let trackingRemote: string | undefined;
+      // List of remote names that have a branch matching the current branch name
+      let remotesWithBranch: string[] = [];
+      try {
+        // First check if there's a remote tracking branch
+        const { stdout: upstreamOutput } = await execFileAsync(
+          'git',
+          ['rev-parse', '--abbrev-ref', `${currentBranch}@{upstream}`],
+          { cwd: worktreePath }
+        );
+
+        const upstreamRef = upstreamOutput.trim();
+        if (upstreamRef) {
+          hasRemoteBranch = true;
+          // Extract the remote name from the upstream ref (e.g. "origin/main" -> "origin")
+          const slashIndex = upstreamRef.indexOf('/');
+          if (slashIndex !== -1) {
+            trackingRemote = upstreamRef.slice(0, slashIndex);
+          }
+          const { stdout: aheadBehindOutput } = await execFileAsync(
+            'git',
+            ['rev-list', '--left-right', '--count', `${currentBranch}@{upstream}...HEAD`],
+            { cwd: worktreePath }
+          );
+          const [behind, ahead] = aheadBehindOutput.trim().split(/\s+/).map(Number);
+          aheadCount = ahead || 0;
+          behindCount = behind || 0;
+        }
+      } catch {
+        // No upstream branch set - check if the branch exists on any remote
+        try {
+          // Check if there's a matching branch on origin (most common remote)
+          const { stdout: remoteBranchOutput } = await execFileAsync(
+            'git',
+            ['ls-remote', '--heads', 'origin', currentBranch],
+            { cwd: worktreePath, timeout: 5000 }
+          );
+          hasRemoteBranch = remoteBranchOutput.trim().length > 0;
+        } catch {
+          // No remote branch found or origin doesn't exist
+          hasRemoteBranch = false;
+        }
+      }
+
+      // Check which remotes have a branch matching the current branch name.
+      // This helps the UI distinguish between "branch exists on tracking remote" vs
+      // "branch was pushed to a different remote" (e.g., pushed to 'upstream' but tracking 'origin').
+      // Use for-each-ref to check cached remote refs (already fetched above if includeRemote was true)
+      remotesWithBranch = await getRemotesWithBranch(worktreePath, currentBranch, hasAnyRemotes);
+
+      res.json({
+        success: true,
+        result: {
+          currentBranch,
+          branches,
+          aheadCount,
+          behindCount,
+          hasRemoteBranch,
+          hasAnyRemotes,
+          trackingRemote,
+          remotesWithBranch,
+        },
+      });
+    } catch (error) {
+      const worktreePath = req.body?.worktreePath;
+      logWorktreeError(error, 'List branches failed', worktreePath);
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/list-dev-servers.ts b/temp_repo/apps/server/src/routes/worktree/routes/list-dev-servers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c1093ea5c612eb1f218e6d10685aae82047853f3
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/list-dev-servers.ts
@@ -0,0 +1,29 @@
+/**
+ * POST /list-dev-servers endpoint - List all running dev servers
+ *
+ * Returns information about all worktree dev servers currently running,
+ * including their ports and URLs.
+ */
+
+import type { Request, Response } from 'express';
+import { getDevServerService } from '../../../services/dev-server-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createListDevServersHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const devServerService = getDevServerService();
+      const result = devServerService.listDevServers();
+
+      res.json({
+        success: true,
+        result: {
+          servers: result.result.servers,
+        },
+      });
+    } catch (error) {
+      logError(error, 'List dev servers failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/list-remotes.ts b/temp_repo/apps/server/src/routes/worktree/routes/list-remotes.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1180afced15f45eae044eda3c15c2e740cebc0e3
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/list-remotes.ts
@@ -0,0 +1,127 @@
+/**
+ * POST /list-remotes endpoint - List all remotes and their branches
+ *
+ * Note: Git repository validation (isGitRepo, hasCommits) is handled by
+ * the requireValidWorktree middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { getErrorMessage, logWorktreeError } from '../common.js';
+
+const execAsync = promisify(exec);
+
+interface RemoteBranch {
+  name: string;
+  fullRef: string;
+}
+
+interface RemoteInfo {
+  name: string;
+  url: string;
+  branches: RemoteBranch[];
+}
+
+export function createListRemotesHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath } = req.body as {
+        worktreePath: string;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      // Get list of remotes
+      const { stdout: remotesOutput } = await execAsync('git remote -v', {
+        cwd: worktreePath,
+      });
+
+      // Parse remotes (each remote appears twice - once for fetch, once for push)
+      const remotesSet = new Map<string, string>();
+      remotesOutput
+        .trim()
+        .split('\n')
+        .filter((line) => line.trim())
+        .forEach((line) => {
+          const match = line.match(/^(\S+)\s+(\S+)\s+\(fetch\)$/);
+          if (match) {
+            remotesSet.set(match[1], match[2]);
+          }
+        });
+
+      // Fetch latest from all remotes (silently, don't fail if offline)
+      try {
+        await execAsync('git fetch --all --quiet', {
+          cwd: worktreePath,
+          timeout: 15000, // 15 second timeout
+        });
+      } catch {
+        // Ignore fetch errors - we'll use cached remote refs
+      }
+
+      // Get all remote branches
+      const { stdout: remoteBranchesOutput } = await execAsync(
+        'git branch -r --format="%(refname:short)"',
+        { cwd: worktreePath }
+      );
+
+      // Group branches by remote
+      const remotesBranches = new Map<string, RemoteBranch[]>();
+      remotesSet.forEach((_, remoteName) => {
+        remotesBranches.set(remoteName, []);
+      });
+
+      remoteBranchesOutput
+        .trim()
+        .split('\n')
+        .filter((line) => line.trim())
+        .forEach((line) => {
+          const cleanLine = line.trim().replace(/^['"]|['"]$/g, '');
+          // Skip HEAD pointers like "origin/HEAD"
+          if (cleanLine.includes('/HEAD')) return;
+
+          // Parse remote name from branch ref (e.g., "origin/main" -> "origin")
+          const slashIndex = cleanLine.indexOf('/');
+          if (slashIndex === -1) return;
+
+          const remoteName = cleanLine.substring(0, slashIndex);
+          const branchName = cleanLine.substring(slashIndex + 1);
+
+          if (remotesBranches.has(remoteName)) {
+            remotesBranches.get(remoteName)!.push({
+              name: branchName,
+              fullRef: cleanLine,
+            });
+          }
+        });
+
+      // Build final result
+      const remotes: RemoteInfo[] = [];
+      remotesSet.forEach((url, name) => {
+        remotes.push({
+          name,
+          url,
+          branches: remotesBranches.get(name) || [],
+        });
+      });
+
+      res.json({
+        success: true,
+        result: {
+          remotes,
+        },
+      });
+    } catch (error) {
+      const worktreePath = req.body?.worktreePath;
+      logWorktreeError(error, 'List remotes failed', worktreePath);
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/list.ts b/temp_repo/apps/server/src/routes/worktree/routes/list.ts
new file mode 100644
index 0000000000000000000000000000000000000000..38712691d9171d49fd003cbc5458bfddcafa4530
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/list.ts
@@ -0,0 +1,764 @@
+/**
+ * POST /list endpoint - List all git worktrees
+ *
+ * Returns actual git worktrees from `git worktree list`.
+ * Also scans .worktrees/ directory to discover worktrees that may have been
+ * created externally or whose git state was corrupted.
+ * Does NOT include tracked branches - only real worktrees with separate directories.
+ */
+
+import type { Request, Response } from 'express';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import path from 'path';
+import * as secureFs from '../../../lib/secure-fs.js';
+import { isGitRepo } from '@automaker/git-utils';
+import {
+  getErrorMessage,
+  logError,
+  normalizePath,
+  execEnv,
+  isGhCliAvailable,
+  execGitCommand,
+} from '../common.js';
+import {
+  readAllWorktreeMetadata,
+  updateWorktreePRInfo,
+  type WorktreePRInfo,
+} from '../../../lib/worktree-metadata.js';
+import { createLogger } from '@automaker/utils';
+import { validatePRState } from '@automaker/types';
+import {
+  checkGitHubRemote,
+  type GitHubRemoteStatus,
+} from '../../github/routes/check-github-remote.js';
+
+const execAsync = promisify(exec);
+const logger = createLogger('Worktree');
+
+/** True when git (or shell) could not be spawned (e.g. ENOENT in sandboxed CI). */
+function isSpawnENOENT(error: unknown): boolean {
+  if (!error || typeof error !== 'object') return false;
+  const e = error as { code?: string; errno?: number; syscall?: string };
+  // Accept ENOENT with or without syscall so wrapped/reexported errors are handled.
+  // Node may set syscall to 'spawn' or 'spawn git' (or other command name).
+  if (e.code === 'ENOENT' || e.errno === -2) {
+    return (
+      e.syscall === 'spawn' ||
+      (typeof e.syscall === 'string' && e.syscall.startsWith('spawn')) ||
+      e.syscall === undefined
+    );
+  }
+  return false;
+}
+
+/**
+ * Cache for GitHub remote status per project path.
+ * This prevents repeated "no git remotes found" warnings when polling
+ * projects that don't have a GitHub remote configured.
+ */
+interface GitHubRemoteCacheEntry {
+  status: GitHubRemoteStatus;
+  checkedAt: number;
+}
+
+interface GitHubPRCacheEntry {
+  prs: Map<string, WorktreePRInfo>;
+  fetchedAt: number;
+}
+
+const githubRemoteCache = new Map<string, GitHubRemoteCacheEntry>();
+const githubPRCache = new Map<string, GitHubPRCacheEntry>();
+const GITHUB_REMOTE_CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes
+const GITHUB_PR_CACHE_TTL_MS = 2 * 60 * 1000; // 2 minutes - avoid hitting GitHub on every poll
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  isCurrent: boolean; // Is this the currently checked out branch in main?
+  hasWorktree: boolean; // Always true for items in this list
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+  pr?: WorktreePRInfo; // PR info if a PR has been created for this branch
+  /** Whether there are actual unresolved conflict files (conflictFiles.length > 0) */
+  hasConflicts?: boolean;
+  /** Type of git operation in progress (merge/rebase/cherry-pick), set independently of hasConflicts */
+  conflictType?: 'merge' | 'rebase' | 'cherry-pick';
+  /** List of files with conflicts */
+  conflictFiles?: string[];
+  /** Source branch involved in merge/rebase/cherry-pick, when resolvable */
+  conflictSourceBranch?: string;
+}
+
+/**
+ * Detect if a merge, rebase, or cherry-pick is in progress for a worktree.
+ * Checks for the presence of state files/directories that git creates
+ * during these operations.
+ */
+async function detectConflictState(worktreePath: string): Promise<{
+  hasConflicts: boolean;
+  conflictType?: 'merge' | 'rebase' | 'cherry-pick';
+  conflictFiles?: string[];
+  conflictSourceBranch?: string;
+}> {
+  try {
+    // Find the canonical .git directory for this worktree (execGitCommand avoids /bin/sh in CI)
+    const gitDirRaw = await execGitCommand(['rev-parse', '--git-dir'], worktreePath);
+    const gitDir = path.resolve(worktreePath, gitDirRaw.trim());
+
+    // Check for merge, rebase, and cherry-pick state files/directories
+    const [mergeHeadExists, rebaseMergeExists, rebaseApplyExists, cherryPickHeadExists] =
+      await Promise.all([
+        secureFs
+          .access(path.join(gitDir, 'MERGE_HEAD'))
+          .then(() => true)
+          .catch(() => false),
+        secureFs
+          .access(path.join(gitDir, 'rebase-merge'))
+          .then(() => true)
+          .catch(() => false),
+        secureFs
+          .access(path.join(gitDir, 'rebase-apply'))
+          .then(() => true)
+          .catch(() => false),
+        secureFs
+          .access(path.join(gitDir, 'CHERRY_PICK_HEAD'))
+          .then(() => true)
+          .catch(() => false),
+      ]);
+
+    let conflictType: 'merge' | 'rebase' | 'cherry-pick' | undefined;
+    if (rebaseMergeExists || rebaseApplyExists) {
+      conflictType = 'rebase';
+    } else if (mergeHeadExists) {
+      conflictType = 'merge';
+    } else if (cherryPickHeadExists) {
+      conflictType = 'cherry-pick';
+    }
+
+    if (!conflictType) {
+      return { hasConflicts: false };
+    }
+
+    // Get list of conflicted files using machine-readable git status
+    let conflictFiles: string[] = [];
+    try {
+      const statusOutput = await execGitCommand(
+        ['diff', '--name-only', '--diff-filter=U'],
+        worktreePath
+      );
+      conflictFiles = statusOutput
+        .trim()
+        .split('\n')
+        .filter((f) => f.trim().length > 0);
+    } catch {
+      // Fall back to empty list if diff fails
+    }
+
+    // Detect the source branch involved in the conflict
+    let conflictSourceBranch: string | undefined;
+    try {
+      if (conflictType === 'merge' && mergeHeadExists) {
+        // For merges, resolve MERGE_HEAD to a branch name
+        const mergeHead = (
+          (await secureFs.readFile(path.join(gitDir, 'MERGE_HEAD'), 'utf-8')) as string
+        ).trim();
+        try {
+          const branchName = await execGitCommand(
+            ['name-rev', '--name-only', '--refs=refs/heads/*', mergeHead],
+            worktreePath
+          );
+          const cleaned = branchName.trim().replace(/~\d+$/, '');
+          if (cleaned && cleaned !== 'undefined') {
+            conflictSourceBranch = cleaned;
+          }
+        } catch {
+          // Could not resolve to branch name
+        }
+      } else if (conflictType === 'rebase') {
+        // For rebases, read the onto branch from rebase-merge/head-name or rebase-apply/head-name
+        const headNamePath = rebaseMergeExists
+          ? path.join(gitDir, 'rebase-merge', 'onto-name')
+          : path.join(gitDir, 'rebase-apply', 'onto-name');
+        try {
+          const ontoName = ((await secureFs.readFile(headNamePath, 'utf-8')) as string).trim();
+          if (ontoName) {
+            conflictSourceBranch = ontoName.replace(/^refs\/heads\//, '');
+          }
+        } catch {
+          // onto-name may not exist; try to resolve the onto commit
+          try {
+            const ontoPath = rebaseMergeExists
+              ? path.join(gitDir, 'rebase-merge', 'onto')
+              : path.join(gitDir, 'rebase-apply', 'onto');
+            const ontoCommit = ((await secureFs.readFile(ontoPath, 'utf-8')) as string).trim();
+            if (ontoCommit) {
+              const branchName = await execGitCommand(
+                ['name-rev', '--name-only', '--refs=refs/heads/*', ontoCommit],
+                worktreePath
+              );
+              const cleaned = branchName.trim().replace(/~\d+$/, '');
+              if (cleaned && cleaned !== 'undefined') {
+                conflictSourceBranch = cleaned;
+              }
+            }
+          } catch {
+            // Could not resolve onto commit
+          }
+        }
+      } else if (conflictType === 'cherry-pick' && cherryPickHeadExists) {
+        // For cherry-picks, try to resolve CHERRY_PICK_HEAD to a branch name
+        const cherryPickHead = (
+          (await secureFs.readFile(path.join(gitDir, 'CHERRY_PICK_HEAD'), 'utf-8')) as string
+        ).trim();
+        try {
+          const branchName = await execGitCommand(
+            ['name-rev', '--name-only', '--refs=refs/heads/*', cherryPickHead],
+            worktreePath
+          );
+          const cleaned = branchName.trim().replace(/~\d+$/, '');
+          if (cleaned && cleaned !== 'undefined') {
+            conflictSourceBranch = cleaned;
+          }
+        } catch {
+          // Could not resolve to branch name
+        }
+      }
+    } catch {
+      // Ignore source branch detection errors
+    }
+
+    return {
+      hasConflicts: conflictFiles.length > 0,
+      conflictType,
+      conflictFiles,
+      conflictSourceBranch,
+    };
+  } catch {
+    // If anything fails, assume no conflicts
+    return { hasConflicts: false };
+  }
+}
+
+async function getCurrentBranch(cwd: string): Promise<string> {
+  try {
+    const stdout = await execGitCommand(['branch', '--show-current'], cwd);
+    return stdout.trim();
+  } catch {
+    return '';
+  }
+}
+
+function normalizeBranchFromHeadRef(headRef: string): string | null {
+  let normalized = headRef.trim();
+  const prefixes = ['refs/heads/', 'refs/remotes/origin/', 'refs/remotes/', 'refs/'];
+
+  for (const prefix of prefixes) {
+    if (normalized.startsWith(prefix)) {
+      normalized = normalized.slice(prefix.length);
+      break;
+    }
+  }
+
+  // Return the full branch name, including any slashes (e.g., "feature/my-branch")
+  return normalized || null;
+}
+
+/**
+ * Attempt to recover the branch name for a worktree in detached HEAD state.
+ * This happens during rebase operations where git detaches HEAD from the branch.
+ * We look at git state files (rebase-merge/head-name, rebase-apply/head-name)
+ * to determine which branch the operation is targeting.
+ *
+ * Note: merge conflicts do NOT detach HEAD, so `git worktree list --porcelain`
+ * still includes the `branch` line for merge conflicts. This recovery is
+ * specifically for rebase and cherry-pick operations.
+ */
+async function recoverBranchForDetachedWorktree(worktreePath: string): Promise<string | null> {
+  try {
+    const gitDirRaw = await execGitCommand(['rev-parse', '--git-dir'], worktreePath);
+    const gitDir = path.resolve(worktreePath, gitDirRaw.trim());
+
+    // During a rebase, the original branch is stored in rebase-merge/head-name
+    try {
+      const headNamePath = path.join(gitDir, 'rebase-merge', 'head-name');
+      const headName = (await secureFs.readFile(headNamePath, 'utf-8')) as string;
+      const branch = normalizeBranchFromHeadRef(headName);
+      if (branch) return branch;
+    } catch {
+      // Not a rebase-merge
+    }
+
+    // rebase-apply also stores the original branch in head-name
+    try {
+      const headNamePath = path.join(gitDir, 'rebase-apply', 'head-name');
+      const headName = (await secureFs.readFile(headNamePath, 'utf-8')) as string;
+      const branch = normalizeBranchFromHeadRef(headName);
+      if (branch) return branch;
+    } catch {
+      // Not a rebase-apply
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Scan the .worktrees directory to discover worktrees that may exist on disk
+ * but are not registered with git (e.g., created externally or corrupted state).
+ */
+async function scanWorktreesDirectory(
+  projectPath: string,
+  knownWorktreePaths: Set<string>
+): Promise<Array<{ path: string; branch: string }>> {
+  const discovered: Array<{ path: string; branch: string }> = [];
+  const worktreesDir = path.join(projectPath, '.worktrees');
+
+  try {
+    // Check if .worktrees directory exists
+    await secureFs.access(worktreesDir);
+  } catch {
+    // .worktrees directory doesn't exist
+    return discovered;
+  }
+
+  try {
+    const entries = await secureFs.readdir(worktreesDir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      if (!entry.isDirectory()) continue;
+
+      const worktreePath = path.join(worktreesDir, entry.name);
+      const normalizedPath = normalizePath(worktreePath);
+
+      // Skip if already known from git worktree list
+      if (knownWorktreePaths.has(normalizedPath)) continue;
+
+      // Check if this is a valid git repository
+      const gitPath = path.join(worktreePath, '.git');
+      try {
+        const gitStat = await secureFs.stat(gitPath);
+
+        // Git worktrees have a .git FILE (not directory) that points to the parent repo
+        // Regular repos have a .git DIRECTORY
+        if (gitStat.isFile() || gitStat.isDirectory()) {
+          // Try to get the branch name
+          const branch = await getCurrentBranch(worktreePath);
+          if (branch) {
+            logger.info(
+              `Discovered worktree in .worktrees/ not in git worktree list: ${entry.name} (branch: ${branch})`
+            );
+            discovered.push({
+              path: normalizedPath,
+              branch,
+            });
+          } else {
+            // Try to get branch from HEAD if branch --show-current fails (detached HEAD)
+            let headBranch: string | null = null;
+            try {
+              const headRef = await execGitCommand(
+                ['rev-parse', '--abbrev-ref', 'HEAD'],
+                worktreePath
+              );
+              const ref = headRef.trim();
+              if (ref && ref !== 'HEAD') {
+                headBranch = ref;
+              }
+            } catch (error) {
+              // Can't determine branch from HEAD ref (including timeout) - fall back to detached HEAD recovery
+              logger.debug(
+                `Failed to resolve HEAD ref for ${worktreePath}: ${getErrorMessage(error)}`
+              );
+            }
+
+            // If HEAD is detached (rebase/merge in progress), try recovery from git state files
+            if (!headBranch) {
+              headBranch = await recoverBranchForDetachedWorktree(worktreePath);
+            }
+
+            if (headBranch) {
+              logger.info(
+                `Discovered worktree in .worktrees/ not in git worktree list: ${entry.name} (branch: ${headBranch})`
+              );
+              discovered.push({
+                path: normalizedPath,
+                branch: headBranch,
+              });
+            }
+          }
+        }
+      } catch {
+        // Not a git repo, skip
+      }
+    }
+  } catch (error) {
+    logger.warn(`Failed to scan .worktrees directory: ${getErrorMessage(error)}`);
+  }
+
+  return discovered;
+}
+
+/**
+ * Get cached GitHub remote status for a project, or check and cache it.
+ * Returns null if gh CLI is not available.
+ */
+async function getGitHubRemoteStatus(projectPath: string): Promise<GitHubRemoteStatus | null> {
+  // Check if gh CLI is available first
+  const ghAvailable = await isGhCliAvailable();
+  if (!ghAvailable) {
+    return null;
+  }
+
+  const now = Date.now();
+  const cached = githubRemoteCache.get(projectPath);
+
+  // Return cached result if still valid
+  if (cached && now - cached.checkedAt < GITHUB_REMOTE_CACHE_TTL_MS) {
+    return cached.status;
+  }
+
+  // Check GitHub remote and cache the result
+  const status = await checkGitHubRemote(projectPath);
+  githubRemoteCache.set(projectPath, {
+    status,
+    checkedAt: Date.now(),
+  });
+
+  return status;
+}
+
+/**
+ * Fetch all PRs from GitHub and create a map of branch name to PR info.
+ * Uses --state all to include merged/closed PRs, allowing detection of
+ * state changes (e.g., when a PR is merged on GitHub).
+ *
+ * This also allows detecting PRs that were created outside the app.
+ *
+ * Uses cached GitHub remote status to avoid repeated warnings when the
+ * project doesn't have a GitHub remote configured. Results are cached
+ * briefly to avoid hammering GitHub on frequent worktree polls.
+ */
+async function fetchGitHubPRs(
+  projectPath: string,
+  forceRefresh = false
+): Promise<Map<string, WorktreePRInfo>> {
+  const now = Date.now();
+  const cached = githubPRCache.get(projectPath);
+
+  // Return cached result if valid and not forcing refresh
+  if (!forceRefresh && cached && now - cached.fetchedAt < GITHUB_PR_CACHE_TTL_MS) {
+    return cached.prs;
+  }
+
+  const prMap = new Map<string, WorktreePRInfo>();
+
+  try {
+    // Check GitHub remote status (uses cache to avoid repeated warnings)
+    const remoteStatus = await getGitHubRemoteStatus(projectPath);
+
+    // If gh CLI not available or no GitHub remote, return empty silently
+    if (!remoteStatus || !remoteStatus.hasGitHubRemote) {
+      return prMap;
+    }
+
+    // Use -R flag with owner/repo for more reliable PR fetching
+    const repoFlag =
+      remoteStatus.owner && remoteStatus.repo
+        ? `-R ${remoteStatus.owner}/${remoteStatus.repo}`
+        : '';
+
+    // Fetch all PRs from GitHub (including merged/closed to detect state changes)
+    const { stdout } = await execAsync(
+      `gh pr list ${repoFlag} --state all --json number,title,url,state,headRefName,createdAt --limit 1000`,
+      { cwd: projectPath, env: execEnv, timeout: 15000 }
+    );
+
+    const prs = JSON.parse(stdout || '[]') as Array<{
+      number: number;
+      title: string;
+      url: string;
+      state: string;
+      headRefName: string;
+      createdAt: string;
+    }>;
+
+    for (const pr of prs) {
+      prMap.set(pr.headRefName, {
+        number: pr.number,
+        url: pr.url,
+        title: pr.title,
+        // GitHub CLI returns state as uppercase: OPEN, MERGED, CLOSED
+        state: validatePRState(pr.state),
+        createdAt: pr.createdAt,
+      });
+    }
+
+    // Only update cache on successful fetch
+    githubPRCache.set(projectPath, {
+      prs: prMap,
+      fetchedAt: Date.now(),
+    });
+  } catch (error) {
+    // On fetch failure, return stale cached data if available to avoid
+    // repeated API calls during GitHub API flakiness or temporary outages
+    if (cached) {
+      logger.warn(`Failed to fetch GitHub PRs, returning stale cache: ${getErrorMessage(error)}`);
+      // Extend cache TTL to avoid repeated retries during outages
+      githubPRCache.set(projectPath, { prs: cached.prs, fetchedAt: Date.now() });
+      return cached.prs;
+    }
+    // No cache available, log warning and return empty map
+    logger.warn(`Failed to fetch GitHub PRs: ${getErrorMessage(error)}`);
+  }
+
+  return prMap;
+}
+
+export function createListHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, includeDetails, forceRefreshGitHub } = req.body as {
+        projectPath: string;
+        includeDetails?: boolean;
+        forceRefreshGitHub?: boolean;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({ success: false, error: 'projectPath required' });
+        return;
+      }
+
+      // Clear GitHub remote cache if force refresh requested
+      // This allows users to re-check for GitHub remote after adding one
+      if (forceRefreshGitHub) {
+        githubRemoteCache.delete(projectPath);
+      }
+
+      if (!(await isGitRepo(projectPath))) {
+        res.json({ success: true, worktrees: [] });
+        return;
+      }
+
+      // Get current branch in main directory
+      const currentBranch = await getCurrentBranch(projectPath);
+
+      // Get actual worktrees from git (execGitCommand avoids /bin/sh in sandboxed CI)
+      const stdout = await execGitCommand(['worktree', 'list', '--porcelain'], projectPath);
+
+      const worktrees: WorktreeInfo[] = [];
+      const removedWorktrees: Array<{ path: string; branch: string }> = [];
+      let hasMissingWorktree = false;
+      const lines = stdout.split('\n');
+      let current: { path?: string; branch?: string; isDetached?: boolean } = {};
+      let isFirst = true;
+
+      // First pass: detect removed worktrees
+      for (const line of lines) {
+        if (line.startsWith('worktree ')) {
+          current.path = normalizePath(line.slice(9));
+        } else if (line.startsWith('branch ')) {
+          current.branch = line.slice(7).replace('refs/heads/', '');
+        } else if (line.startsWith('detached')) {
+          // Worktree is in detached HEAD state (e.g., during rebase)
+          current.isDetached = true;
+        } else if (line === '') {
+          if (current.path) {
+            const isMainWorktree = isFirst;
+            // Check if the worktree directory actually exists
+            // Skip checking/pruning the main worktree (projectPath itself)
+            let worktreeExists = false;
+            try {
+              await secureFs.access(current.path);
+              worktreeExists = true;
+            } catch {
+              worktreeExists = false;
+            }
+
+            if (!isMainWorktree && !worktreeExists) {
+              hasMissingWorktree = true;
+              // Worktree directory doesn't exist - it was manually deleted
+              // Only add to removed list if we know the branch name
+              if (current.branch) {
+                removedWorktrees.push({
+                  path: current.path,
+                  branch: current.branch,
+                });
+              }
+            } else if (current.branch) {
+              // Normal case: worktree with a known branch
+              worktrees.push({
+                path: current.path,
+                branch: current.branch,
+                isMain: isMainWorktree,
+                isCurrent: current.branch === currentBranch,
+                hasWorktree: true,
+              });
+              isFirst = false;
+            } else if (current.isDetached && worktreeExists) {
+              // Detached HEAD (e.g., rebase in progress) - try to recover branch name.
+              // This is critical: without this, worktrees undergoing rebase/merge
+              // operations would silently disappear from the UI.
+              const recoveredBranch = await recoverBranchForDetachedWorktree(current.path);
+              worktrees.push({
+                path: current.path,
+                branch: recoveredBranch || `(detached)`,
+                isMain: isMainWorktree,
+                isCurrent: false,
+                hasWorktree: true,
+              });
+              isFirst = false;
+            }
+          }
+          current = {};
+        }
+      }
+
+      // Prune removed worktrees from git (only if any missing worktrees were detected)
+      if (hasMissingWorktree) {
+        try {
+          await execGitCommand(['worktree', 'prune'], projectPath);
+        } catch {
+          // Prune failed, but we'll still report the removed worktrees
+        }
+      }
+
+      // Scan .worktrees directory to discover worktrees that exist on disk
+      // but are not registered with git (e.g., created externally)
+      const knownPaths = new Set(worktrees.map((w) => w.path));
+      const discoveredWorktrees = await scanWorktreesDirectory(projectPath, knownPaths);
+
+      // Add discovered worktrees to the list
+      for (const discovered of discoveredWorktrees) {
+        worktrees.push({
+          path: discovered.path,
+          branch: discovered.branch,
+          isMain: false,
+          isCurrent: discovered.branch === currentBranch,
+          hasWorktree: true,
+        });
+      }
+
+      // Read all worktree metadata to get PR info
+      const allMetadata = await readAllWorktreeMetadata(projectPath);
+
+      // If includeDetails is requested, fetch change status and conflict state for each worktree
+      if (includeDetails) {
+        for (const worktree of worktrees) {
+          try {
+            const statusOutput = await execGitCommand(['status', '--porcelain'], worktree.path);
+            const changedFiles = statusOutput
+              .trim()
+              .split('\n')
+              .filter((line) => line.trim());
+            worktree.hasChanges = changedFiles.length > 0;
+            worktree.changedFilesCount = changedFiles.length;
+          } catch {
+            worktree.hasChanges = false;
+            worktree.changedFilesCount = 0;
+          }
+
+          // Detect merge/rebase/cherry-pick in progress
+          try {
+            const conflictState = await detectConflictState(worktree.path);
+            // Always propagate conflictType so callers know an operation is in progress,
+            // even when there are no unresolved conflict files yet.
+            if (conflictState.conflictType) {
+              worktree.conflictType = conflictState.conflictType;
+            }
+            // hasConflicts is true only when there are actual unresolved files
+            worktree.hasConflicts = conflictState.hasConflicts;
+            worktree.conflictFiles = conflictState.conflictFiles;
+            worktree.conflictSourceBranch = conflictState.conflictSourceBranch;
+          } catch {
+            // Ignore conflict detection errors
+          }
+        }
+      }
+
+      // Assign PR info to each worktree.
+      // Only fetch GitHub PRs if includeDetails is requested (performance optimization).
+      // Uses --state all to detect merged/closed PRs, limited to 1000 recent PRs.
+      const githubPRs = includeDetails
+        ? await fetchGitHubPRs(projectPath, forceRefreshGitHub)
+        : new Map<string, WorktreePRInfo>();
+
+      for (const worktree of worktrees) {
+        // Skip PR assignment for the main worktree - it's not meaningful to show
+        // PRs on the main branch tab, and can be confusing if someone created
+        // a PR from main to another branch
+        if (worktree.isMain) {
+          continue;
+        }
+
+        const metadata = allMetadata.get(worktree.branch);
+        const githubPR = githubPRs.get(worktree.branch);
+
+        const metadataPR = metadata?.pr;
+        // Preserve explicit user-selected PR tracking from metadata when it differs
+        // from branch-derived GitHub PR lookup. This allows "Change PR Number" to
+        // persist instead of being overwritten by gh pr list for the branch.
+        const hasManualOverride =
+          !!metadataPR && !!githubPR && metadataPR.number !== githubPR.number;
+
+        if (hasManualOverride) {
+          worktree.pr = metadataPR;
+        } else if (githubPR) {
+          // Use fresh GitHub data when there is no explicit override.
+          worktree.pr = githubPR;
+
+          // Sync metadata when missing or stale so fallback data stays current.
+          const needsSync =
+            !metadataPR ||
+            metadataPR.number !== githubPR.number ||
+            metadataPR.state !== githubPR.state ||
+            metadataPR.title !== githubPR.title ||
+            metadataPR.url !== githubPR.url ||
+            metadataPR.createdAt !== githubPR.createdAt;
+          if (needsSync) {
+            // Fire and forget - don't block the response
+            updateWorktreePRInfo(projectPath, worktree.branch, githubPR).catch((err) => {
+              logger.warn(
+                `Failed to update PR info for ${worktree.branch}: ${getErrorMessage(err)}`
+              );
+            });
+          }
+        } else if (metadataPR && metadataPR.state === 'OPEN') {
+          // Fall back to stored metadata only if the PR is still OPEN
+          worktree.pr = metadataPR;
+        }
+      }
+
+      res.json({
+        success: true,
+        worktrees,
+        removedWorktrees: removedWorktrees.length > 0 ? removedWorktrees : undefined,
+      });
+    } catch (error) {
+      // When git is unavailable (e.g. sandboxed E2E, PATH without git), return minimal list so UI still loads
+      if (isSpawnENOENT(error)) {
+        const projectPathFromBody = (req.body as { projectPath?: string })?.projectPath;
+        const mainPath = projectPathFromBody ? normalizePath(projectPathFromBody) : undefined;
+        if (mainPath) {
+          res.json({
+            success: true,
+            worktrees: [
+              {
+                path: mainPath,
+                branch: 'main',
+                isMain: true,
+                isCurrent: true,
+                hasWorktree: true,
+              },
+            ],
+          });
+          return;
+        }
+      }
+      logError(error, 'List worktrees failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/merge.ts b/temp_repo/apps/server/src/routes/worktree/routes/merge.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bcd6fbc952a8c2a53b5b5464a392f324055dae15
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/merge.ts
@@ -0,0 +1,83 @@
+/**
+ * POST /merge endpoint - Merge feature (merge worktree branch into a target branch)
+ *
+ * Allows merging a worktree branch into any target branch (defaults to 'main').
+ *
+ * Note: Git repository validation (isGitRepo, hasCommits) is handled by
+ * the requireValidProject middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from '../common.js';
+import type { EventEmitter } from '../../../lib/events.js';
+import { performMerge } from '../../../services/merge-service.js';
+
+export function createMergeHandler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, branchName, worktreePath, targetBranch, options } = req.body as {
+        projectPath: string;
+        branchName: string;
+        worktreePath: string;
+        targetBranch?: string; // Branch to merge into (defaults to 'main')
+        options?: {
+          squash?: boolean;
+          message?: string;
+          deleteWorktreeAndBranch?: boolean;
+          remote?: string;
+        };
+      };
+
+      if (!projectPath || !branchName || !worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath, branchName, and worktreePath are required',
+        });
+        return;
+      }
+
+      // Determine the target branch (default to 'main')
+      const mergeTo = targetBranch || 'main';
+
+      // Delegate all merge logic to the service
+      const result = await performMerge(
+        projectPath,
+        branchName,
+        worktreePath,
+        mergeTo,
+        options,
+        events
+      );
+
+      if (!result.success) {
+        if (result.hasConflicts) {
+          // Return conflict-specific error message that frontend can detect
+          res.status(409).json({
+            success: false,
+            error: result.error,
+            hasConflicts: true,
+            conflictFiles: result.conflictFiles,
+          });
+          return;
+        }
+
+        // Non-conflict service errors (e.g. branch not found, invalid name)
+        res.status(400).json({
+          success: false,
+          error: result.error,
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        mergedBranch: result.mergedBranch,
+        targetBranch: result.targetBranch,
+        deleted: result.deleted,
+      });
+    } catch (error) {
+      logError(error, 'Merge worktree failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/migrate.ts b/temp_repo/apps/server/src/routes/worktree/routes/migrate.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7165b1762ad306f177c13ca0fd30ce0c865923e6
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/migrate.ts
@@ -0,0 +1,32 @@
+/**
+ * POST /migrate endpoint - Migration endpoint (no longer needed)
+ *
+ * This endpoint is kept for backwards compatibility but no longer performs
+ * any migration since .automaker is now stored in the project directory.
+ */
+
+import type { Request, Response } from 'express';
+import { getAutomakerDir } from '@automaker/platform';
+
+export function createMigrateHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    const { projectPath } = req.body as { projectPath: string };
+
+    if (!projectPath) {
+      res.status(400).json({
+        success: false,
+        error: 'projectPath is required',
+      });
+      return;
+    }
+
+    // Migration is no longer needed - .automaker is stored in project directory
+    const automakerDir = getAutomakerDir(projectPath);
+    res.json({
+      success: true,
+      migrated: false,
+      message: 'No migration needed - .automaker is stored in project directory',
+      path: automakerDir,
+    });
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/open-in-editor.ts b/temp_repo/apps/server/src/routes/worktree/routes/open-in-editor.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f0d620d4cd5cdc3664f0983afd1c36e3636b1c86
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/open-in-editor.ts
@@ -0,0 +1,142 @@
+/**
+ * POST /open-in-editor endpoint - Open a worktree directory in the default code editor
+ * GET /default-editor endpoint - Get the name of the default code editor
+ * POST /refresh-editors endpoint - Clear editor cache and re-detect available editors
+ *
+ * This module uses @automaker/platform for cross-platform editor detection and launching.
+ */
+
+import type { Request, Response } from 'express';
+import { isAbsolute } from 'path';
+import {
+  clearEditorCache,
+  detectAllEditors,
+  detectDefaultEditor,
+  openInEditor,
+  openInFileManager,
+} from '@automaker/platform';
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage, logError } from '../common.js';
+
+const logger = createLogger('open-in-editor');
+
+export function createGetAvailableEditorsHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const editors = await detectAllEditors();
+      res.json({
+        success: true,
+        result: {
+          editors,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Get available editors failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+export function createGetDefaultEditorHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const editor = await detectDefaultEditor();
+      res.json({
+        success: true,
+        result: {
+          editorName: editor.name,
+          editorCommand: editor.command,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Get default editor failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+/**
+ * Handler to refresh the editor cache and re-detect available editors
+ * Useful when the user has installed/uninstalled editors
+ */
+export function createRefreshEditorsHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Clear the cache
+      clearEditorCache();
+
+      // Re-detect editors (this will repopulate the cache)
+      const editors = await detectAllEditors();
+
+      logger.info(`Editor cache refreshed, found ${editors.length} editors`);
+
+      res.json({
+        success: true,
+        result: {
+          editors,
+          message: `Found ${editors.length} available editors`,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Refresh editors failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+export function createOpenInEditorHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, editorCommand } = req.body as {
+        worktreePath: string;
+        editorCommand?: string;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      // Security: Validate that worktreePath is an absolute path
+      if (!isAbsolute(worktreePath)) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath must be an absolute path',
+        });
+        return;
+      }
+
+      try {
+        // Use the platform utility to open in editor
+        const result = await openInEditor(worktreePath, editorCommand);
+        res.json({
+          success: true,
+          result: {
+            message: `Opened ${worktreePath} in ${result.editorName}`,
+            editorName: result.editorName,
+          },
+        });
+      } catch (editorError) {
+        // If the specified editor fails, try opening in default file manager as fallback
+        logger.warn(
+          `Failed to open in editor, falling back to file manager: ${getErrorMessage(editorError)}`
+        );
+
+        const result = await openInFileManager(worktreePath);
+        res.json({
+          success: true,
+          result: {
+            message: `Opened ${worktreePath} in ${result.editorName}`,
+            editorName: result.editorName,
+          },
+        });
+      }
+    } catch (error) {
+      logError(error, 'Open in editor failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/open-in-terminal.ts b/temp_repo/apps/server/src/routes/worktree/routes/open-in-terminal.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b13101e3b087e4bd3ecc528f8f7cc83f31b84c6
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/open-in-terminal.ts
@@ -0,0 +1,181 @@
+/**
+ * Terminal endpoints for opening worktree directories in terminals
+ *
+ * POST /open-in-terminal - Open in system default terminal (integrated)
+ * GET /available-terminals - List all available external terminals
+ * GET /default-terminal - Get the default external terminal
+ * POST /refresh-terminals - Clear terminal cache and re-detect
+ * POST /open-in-external-terminal - Open a directory in an external terminal
+ */
+
+import type { Request, Response } from 'express';
+import { isAbsolute } from 'path';
+import {
+  openInTerminal,
+  clearTerminalCache,
+  detectAllTerminals,
+  detectDefaultTerminal,
+  openInExternalTerminal,
+} from '@automaker/platform';
+import { createLogger } from '@automaker/utils';
+import { getErrorMessage, logError } from '../common.js';
+
+const logger = createLogger('open-in-terminal');
+
+/**
+ * Handler to open in system default terminal (integrated terminal behavior)
+ */
+export function createOpenInTerminalHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath } = req.body as {
+        worktreePath: string;
+      };
+
+      if (!worktreePath || typeof worktreePath !== 'string') {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required and must be a string',
+        });
+        return;
+      }
+
+      // Security: Validate that worktreePath is an absolute path
+      if (!isAbsolute(worktreePath)) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath must be an absolute path',
+        });
+        return;
+      }
+
+      // Use the platform utility to open in terminal
+      const result = await openInTerminal(worktreePath);
+      res.json({
+        success: true,
+        result: {
+          message: `Opened terminal in ${worktreePath}`,
+          terminalName: result.terminalName,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Open in terminal failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+/**
+ * Handler to get all available external terminals
+ */
+export function createGetAvailableTerminalsHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const terminals = await detectAllTerminals();
+      res.json({
+        success: true,
+        result: {
+          terminals,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Get available terminals failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+/**
+ * Handler to get the default external terminal
+ */
+export function createGetDefaultTerminalHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      const terminal = await detectDefaultTerminal();
+      res.json({
+        success: true,
+        result: terminal
+          ? {
+              terminalId: terminal.id,
+              terminalName: terminal.name,
+              terminalCommand: terminal.command,
+            }
+          : null,
+      });
+    } catch (error) {
+      logError(error, 'Get default terminal failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+/**
+ * Handler to refresh the terminal cache and re-detect available terminals
+ * Useful when the user has installed/uninstalled terminals
+ */
+export function createRefreshTerminalsHandler() {
+  return async (_req: Request, res: Response): Promise<void> => {
+    try {
+      // Clear the cache
+      clearTerminalCache();
+
+      // Re-detect terminals (this will repopulate the cache)
+      const terminals = await detectAllTerminals();
+
+      logger.info(`Terminal cache refreshed, found ${terminals.length} terminals`);
+
+      res.json({
+        success: true,
+        result: {
+          terminals,
+          message: `Found ${terminals.length} available external terminals`,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Refresh terminals failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+/**
+ * Handler to open a directory in an external terminal
+ */
+export function createOpenInExternalTerminalHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, terminalId } = req.body as {
+        worktreePath: string;
+        terminalId?: string;
+      };
+
+      if (!worktreePath || typeof worktreePath !== 'string') {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required and must be a string',
+        });
+        return;
+      }
+
+      if (!isAbsolute(worktreePath)) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath must be an absolute path',
+        });
+        return;
+      }
+
+      const result = await openInExternalTerminal(worktreePath, terminalId);
+      res.json({
+        success: true,
+        result: {
+          message: `Opened ${worktreePath} in ${result.terminalName}`,
+          terminalName: result.terminalName,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Open in external terminal failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/pr-info.ts b/temp_repo/apps/server/src/routes/worktree/routes/pr-info.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3d1f6b163d65fb96e4fc5f63a9f8af907cc919bc
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/pr-info.ts
@@ -0,0 +1,257 @@
+/**
+ * POST /pr-info endpoint - Get PR info and comments for a branch
+ */
+
+import type { Request, Response } from 'express';
+import {
+  getErrorMessage,
+  logError,
+  execAsync,
+  execEnv,
+  isValidBranchName,
+  isGhCliAvailable,
+} from '../common.js';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('PRInfo');
+
+export interface PRComment {
+  id: number;
+  author: string;
+  body: string;
+  path?: string;
+  line?: number;
+  createdAt: string;
+  isReviewComment: boolean;
+}
+
+export interface PRInfo {
+  number: number;
+  title: string;
+  url: string;
+  state: string;
+  author: string;
+  body: string;
+  comments: PRComment[];
+  reviewComments: PRComment[];
+}
+
+export function createPRInfoHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, branchName } = req.body as {
+        worktreePath: string;
+        branchName: string;
+      };
+
+      if (!worktreePath || !branchName) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath and branchName required',
+        });
+        return;
+      }
+
+      // Validate branch name to prevent command injection
+      if (!isValidBranchName(branchName)) {
+        res.status(400).json({
+          success: false,
+          error: 'Invalid branch name contains unsafe characters',
+        });
+        return;
+      }
+
+      // Check if gh CLI is available
+      const ghCliAvailable = await isGhCliAvailable();
+
+      if (!ghCliAvailable) {
+        res.json({
+          success: true,
+          result: {
+            hasPR: false,
+            ghCliAvailable: false,
+            error: 'gh CLI not available',
+          },
+        });
+        return;
+      }
+
+      // Detect repository information (supports fork workflows)
+      let upstreamRepo: string | null = null;
+      let originOwner: string | null = null;
+      let originRepo: string | null = null;
+
+      try {
+        const { stdout: remotes } = await execAsync('git remote -v', {
+          cwd: worktreePath,
+          env: execEnv,
+        });
+
+        const lines = remotes.split(/\r?\n/);
+        for (const line of lines) {
+          let match =
+            line.match(/^(\w+)\s+.*[:/]([^/]+)\/([^/\s]+?)(?:\.git)?\s+\(fetch\)/) ||
+            line.match(/^(\w+)\s+git@[^:]+:([^/]+)\/([^\s]+?)(?:\.git)?\s+\(fetch\)/) ||
+            line.match(/^(\w+)\s+https?:\/\/[^/]+\/([^/]+)\/([^\s]+?)(?:\.git)?\s+\(fetch\)/);
+
+          if (match) {
+            const [, remoteName, owner, repo] = match;
+            if (remoteName === 'upstream') {
+              upstreamRepo = `${owner}/${repo}`;
+            } else if (remoteName === 'origin') {
+              originOwner = owner;
+              originRepo = repo;
+            }
+          }
+        }
+      } catch {
+        // Ignore remote parsing errors
+      }
+
+      if (!originOwner || !originRepo) {
+        try {
+          const { stdout: originUrl } = await execAsync('git config --get remote.origin.url', {
+            cwd: worktreePath,
+            env: execEnv,
+          });
+          const match = originUrl.trim().match(/[:/]([^/]+)\/([^/\s]+?)(?:\.git)?$/);
+          if (match) {
+            if (!originOwner) {
+              originOwner = match[1];
+            }
+            if (!originRepo) {
+              originRepo = match[2];
+            }
+          }
+        } catch {
+          // Ignore fallback errors
+        }
+      }
+
+      const targetRepo =
+        upstreamRepo || (originOwner && originRepo ? `${originOwner}/${originRepo}` : null);
+      const repoFlag = targetRepo ? ` --repo "${targetRepo}"` : '';
+      const headRef = upstreamRepo && originOwner ? `${originOwner}:${branchName}` : branchName;
+
+      // Get PR info for the branch using gh CLI
+      try {
+        // First, find the PR associated with this branch
+        const listCmd = `gh pr list${repoFlag} --head "${headRef}" --json number,title,url,state,author,body --limit 1`;
+        const { stdout: prListOutput } = await execAsync(listCmd, {
+          cwd: worktreePath,
+          env: execEnv,
+        });
+
+        const prList = JSON.parse(prListOutput);
+
+        if (prList.length === 0) {
+          res.json({
+            success: true,
+            result: {
+              hasPR: false,
+              ghCliAvailable: true,
+            },
+          });
+          return;
+        }
+
+        const pr = prList[0];
+        const prNumber = pr.number;
+
+        // Get regular PR comments (issue comments)
+        let comments: PRComment[] = [];
+        try {
+          const viewCmd = `gh pr view ${prNumber}${repoFlag} --json comments`;
+          const { stdout: commentsOutput } = await execAsync(viewCmd, {
+            cwd: worktreePath,
+            env: execEnv,
+          });
+          const commentsData = JSON.parse(commentsOutput);
+          comments = (commentsData.comments || []).map(
+            (c: { id: number; author: { login: string }; body: string; createdAt: string }) => ({
+              id: c.id,
+              author: c.author?.login || 'unknown',
+              body: c.body,
+              createdAt: c.createdAt,
+              isReviewComment: false,
+            })
+          );
+        } catch (error) {
+          logger.warn('Failed to fetch PR comments:', error);
+        }
+
+        // Get review comments (inline code comments)
+        let reviewComments: PRComment[] = [];
+        // Only fetch review comments if we have repository info
+        if (targetRepo) {
+          try {
+            const reviewsEndpoint = `repos/${targetRepo}/pulls/${prNumber}/comments`;
+            const reviewsCmd = `gh api ${reviewsEndpoint}`;
+            const { stdout: reviewsOutput } = await execAsync(reviewsCmd, {
+              cwd: worktreePath,
+              env: execEnv,
+            });
+            const reviewsData = JSON.parse(reviewsOutput);
+            reviewComments = reviewsData.map(
+              (c: {
+                id: number;
+                user: { login: string };
+                body: string;
+                path: string;
+                line?: number;
+                original_line?: number;
+                created_at: string;
+              }) => ({
+                id: c.id,
+                author: c.user?.login || 'unknown',
+                body: c.body,
+                path: c.path,
+                line: c.line || c.original_line,
+                createdAt: c.created_at,
+                isReviewComment: true,
+              })
+            );
+          } catch (error) {
+            logger.warn('Failed to fetch review comments:', error);
+          }
+        } else {
+          logger.warn('Cannot fetch review comments: repository info not available');
+        }
+
+        const prInfo: PRInfo = {
+          number: prNumber,
+          title: pr.title,
+          url: pr.url,
+          state: pr.state,
+          author: pr.author?.login || 'unknown',
+          body: pr.body || '',
+          comments,
+          reviewComments,
+        };
+
+        res.json({
+          success: true,
+          result: {
+            hasPR: true,
+            ghCliAvailable: true,
+            prInfo,
+          },
+        });
+      } catch (error) {
+        // gh CLI failed - might not be authenticated or no remote
+        logError(error, 'Failed to get PR info');
+        res.json({
+          success: true,
+          result: {
+            hasPR: false,
+            ghCliAvailable: true,
+            error: getErrorMessage(error),
+          },
+        });
+      }
+    } catch (error) {
+      logError(error, 'PR info handler failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/pull.ts b/temp_repo/apps/server/src/routes/worktree/routes/pull.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ccea76d14526ff7536a47907e5dd7e0e9a4a1e8f
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/pull.ts
@@ -0,0 +1,108 @@
+/**
+ * POST /pull endpoint - Pull latest changes for a worktree/branch
+ *
+ * Enhanced pull flow with stash management and conflict detection:
+ * 1. Checks for uncommitted local changes (staged and unstaged)
+ * 2. If local changes exist AND stashIfNeeded is true, automatically stashes them
+ * 3. Performs the git pull
+ * 4. If changes were stashed, attempts to reapply via git stash pop
+ * 5. Detects merge conflicts from both pull and stash reapplication
+ * 6. Returns structured conflict information for AI-assisted resolution
+ *
+ * Git business logic is delegated to pull-service.ts.
+ *
+ * Note: Git repository validation (isGitRepo, hasCommits) is handled by
+ * the requireValidWorktree middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from '../common.js';
+import { performPull } from '../../../services/pull-service.js';
+import type { PullResult } from '../../../services/pull-service.js';
+
+export function createPullHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, remote, remoteBranch, stashIfNeeded } = req.body as {
+        worktreePath: string;
+        remote?: string;
+        /** Specific remote branch to pull (e.g. 'main'). When provided, pulls this branch from the remote regardless of tracking config. */
+        remoteBranch?: string;
+        /** When true, automatically stash local changes before pulling and reapply after */
+        stashIfNeeded?: boolean;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      // Execute the pull via the service
+      const result = await performPull(worktreePath, { remote, remoteBranch, stashIfNeeded });
+
+      // Map service result to HTTP response
+      mapResultToResponse(res, result);
+    } catch (error) {
+      logError(error, 'Pull failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+/**
+ * Map a PullResult from the service to the appropriate HTTP response.
+ *
+ * - Successful results (including local-changes-detected info) → 200
+ * - Validation/state errors (detached HEAD, no upstream) → 400
+ * - Operational errors (fetch/stash/pull failures) → 500
+ */
+function mapResultToResponse(res: Response, result: PullResult): void {
+  if (!result.success && result.error) {
+    // Determine the appropriate HTTP status for errors
+    const statusCode = isClientError(result.error) ? 400 : 500;
+    res.status(statusCode).json({
+      success: false,
+      error: result.error,
+      ...(result.stashRecoveryFailed && { stashRecoveryFailed: true }),
+    });
+    return;
+  }
+
+  // Success case (includes partial success like local changes detected, conflicts, etc.)
+  res.json({
+    success: true,
+    result: {
+      branch: result.branch,
+      pulled: result.pulled,
+      hasLocalChanges: result.hasLocalChanges,
+      localChangedFiles: result.localChangedFiles,
+      hasConflicts: result.hasConflicts,
+      conflictSource: result.conflictSource,
+      conflictFiles: result.conflictFiles,
+      stashed: result.stashed,
+      stashRestored: result.stashRestored,
+      message: result.message,
+      isMerge: result.isMerge,
+      isFastForward: result.isFastForward,
+      mergeAffectedFiles: result.mergeAffectedFiles,
+    },
+  });
+}
+
+/**
+ * Determine whether an error message represents a client error (400)
+ * vs a server error (500).
+ *
+ * Client errors are validation issues or invalid git state that the user
+ * needs to resolve (e.g. detached HEAD, no upstream, no tracking info).
+ */
+function isClientError(errorMessage: string): boolean {
+  return (
+    errorMessage.includes('detached HEAD') ||
+    errorMessage.includes('has no upstream branch') ||
+    errorMessage.includes('no tracking information')
+  );
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/push.ts b/temp_repo/apps/server/src/routes/worktree/routes/push.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0bf7bc3c382ad7365da6d0947dbe5b2da456321a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/push.ts
@@ -0,0 +1,73 @@
+/**
+ * POST /push endpoint - Push a worktree branch to remote
+ *
+ * Git business logic is delegated to push-service.ts.
+ *
+ * Note: Git repository validation (isGitRepo, hasCommits) is handled by
+ * the requireValidWorktree middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from '../common.js';
+import { performPush } from '../../../services/push-service.js';
+
+export function createPushHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, force, remote, autoResolve } = req.body as {
+        worktreePath: string;
+        force?: boolean;
+        remote?: string;
+        autoResolve?: boolean;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      const result = await performPush(worktreePath, { remote, force, autoResolve });
+
+      if (!result.success) {
+        const statusCode = isClientError(result.error ?? '') ? 400 : 500;
+        res.status(statusCode).json({
+          success: false,
+          error: result.error,
+          diverged: result.diverged,
+          hasConflicts: result.hasConflicts,
+          conflictFiles: result.conflictFiles,
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        result: {
+          branch: result.branch,
+          pushed: result.pushed,
+          diverged: result.diverged,
+          autoResolved: result.autoResolved,
+          message: result.message,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Push worktree failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+/**
+ * Determine whether an error message represents a client error (400)
+ * vs a server error (500).
+ */
+function isClientError(errorMessage: string): boolean {
+  return (
+    errorMessage.includes('detached HEAD') ||
+    errorMessage.includes('rejected') ||
+    errorMessage.includes('diverged')
+  );
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/rebase.ts b/temp_repo/apps/server/src/routes/worktree/routes/rebase.ts
new file mode 100644
index 0000000000000000000000000000000000000000..05dc1e6a28b69ee07b7b5101a927f2bc71e63791
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/rebase.ts
@@ -0,0 +1,135 @@
+/**
+ * POST /rebase endpoint - Rebase the current branch onto a target branch
+ *
+ * Rebases the current worktree branch onto a specified target branch
+ * (e.g., origin/main) for a linear history. Detects conflicts and
+ * returns structured conflict information for AI-assisted resolution.
+ *
+ * Git business logic is delegated to rebase-service.ts.
+ * Events are emitted at key lifecycle points for WebSocket subscribers.
+ *
+ * Note: Git repository validation (isGitRepo, hasCommits) is handled by
+ * the requireValidWorktree middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import path from 'path';
+import { getErrorMessage, logError, isValidBranchName, isValidRemoteName } from '../common.js';
+import type { EventEmitter } from '../../../lib/events.js';
+import { runRebase } from '../../../services/rebase-service.js';
+
+export function createRebaseHandler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, ontoBranch, remote } = req.body as {
+        worktreePath: string;
+        /** The branch/ref to rebase onto (e.g., 'origin/main', 'main') */
+        ontoBranch: string;
+        /** Remote name to fetch from before rebasing (defaults to 'origin') */
+        remote?: string;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath is required',
+        });
+        return;
+      }
+
+      if (!ontoBranch) {
+        res.status(400).json({
+          success: false,
+          error: 'ontoBranch is required',
+        });
+        return;
+      }
+
+      // Normalize the path to prevent path traversal and ensure consistent paths
+      const resolvedWorktreePath = path.resolve(worktreePath);
+
+      // Validate the branch name (allow remote refs like origin/main)
+      if (!isValidBranchName(ontoBranch)) {
+        res.status(400).json({
+          success: false,
+          error: `Invalid branch name: "${ontoBranch}"`,
+        });
+        return;
+      }
+
+      // Validate optional remote name to reject unsafe characters at the route layer
+      if (remote !== undefined && !isValidRemoteName(remote)) {
+        res.status(400).json({
+          success: false,
+          error: `Invalid remote name: "${remote}"`,
+        });
+        return;
+      }
+
+      // Emit started event
+      events.emit('rebase:started', {
+        worktreePath: resolvedWorktreePath,
+        ontoBranch,
+      });
+
+      // Execute the rebase via the service
+      const result = await runRebase(resolvedWorktreePath, ontoBranch, { remote });
+
+      if (result.success) {
+        // Emit success event
+        events.emit('rebase:success', {
+          worktreePath: resolvedWorktreePath,
+          branch: result.branch,
+          ontoBranch: result.ontoBranch,
+        });
+
+        res.json({
+          success: true,
+          result: {
+            branch: result.branch,
+            ontoBranch: result.ontoBranch,
+            message: result.message,
+          },
+        });
+      } else if (result.hasConflicts) {
+        // Emit conflict event
+        events.emit('rebase:conflict', {
+          worktreePath: resolvedWorktreePath,
+          ontoBranch,
+          conflictFiles: result.conflictFiles,
+          aborted: result.aborted,
+        });
+
+        res.status(409).json({
+          success: false,
+          error: result.error,
+          hasConflicts: true,
+          conflictFiles: result.conflictFiles,
+          aborted: result.aborted,
+        });
+      } else {
+        // Emit failure event for non-conflict failures
+        events.emit('rebase:failure', {
+          worktreePath: resolvedWorktreePath,
+          branch: result.branch,
+          ontoBranch: result.ontoBranch,
+          error: result.error,
+        });
+
+        res.status(500).json({
+          success: false,
+          error: result.error ?? 'Rebase failed',
+          hasConflicts: false,
+        });
+      }
+    } catch (error) {
+      // Emit failure event
+      events.emit('rebase:failure', {
+        error: getErrorMessage(error),
+      });
+
+      logError(error, 'Rebase failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/set-tracking.ts b/temp_repo/apps/server/src/routes/worktree/routes/set-tracking.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9d63e013d1c0d6db02f9f9d01d72d51cea475b3a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/set-tracking.ts
@@ -0,0 +1,76 @@
+/**
+ * POST /set-tracking endpoint - Set the upstream tracking branch for a worktree
+ *
+ * Sets `git branch --set-upstream-to=<remote>/<branch>` for the current branch.
+ *
+ * Note: Git repository validation (isGitRepo, hasCommits) is handled by
+ * the requireValidWorktree middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import { execGitCommand } from '@automaker/git-utils';
+import { getErrorMessage, logError } from '../common.js';
+import { getCurrentBranch } from '../../../lib/git.js';
+
+export function createSetTrackingHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, remote, branch } = req.body as {
+        worktreePath: string;
+        remote: string;
+        branch?: string;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({ success: false, error: 'worktreePath required' });
+        return;
+      }
+
+      if (!remote) {
+        res.status(400).json({ success: false, error: 'remote required' });
+        return;
+      }
+
+      // Get current branch if not provided
+      let targetBranch = branch;
+      if (!targetBranch) {
+        try {
+          targetBranch = await getCurrentBranch(worktreePath);
+        } catch (err) {
+          res.status(400).json({
+            success: false,
+            error: `Failed to get current branch: ${getErrorMessage(err)}`,
+          });
+          return;
+        }
+
+        if (targetBranch === 'HEAD') {
+          res.status(400).json({
+            success: false,
+            error: 'Cannot set tracking in detached HEAD state.',
+          });
+          return;
+        }
+      }
+
+      // Set upstream tracking (pass local branch name as final arg to be explicit)
+      await execGitCommand(
+        ['branch', '--set-upstream-to', `${remote}/${targetBranch}`, targetBranch],
+        worktreePath
+      );
+
+      res.json({
+        success: true,
+        result: {
+          branch: targetBranch,
+          remote,
+          upstream: `${remote}/${targetBranch}`,
+          message: `Set tracking branch to ${remote}/${targetBranch}`,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Set tracking branch failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/stage-files.ts b/temp_repo/apps/server/src/routes/worktree/routes/stage-files.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d04813e7eef6eadbeab64855748549afa12c9fa5
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/stage-files.ts
@@ -0,0 +1,74 @@
+/**
+ * POST /stage-files endpoint - Stage or unstage files in a worktree
+ *
+ * Supports two operations:
+ * 1. Stage files: `git add <files>` (adds files to the staging area)
+ * 2. Unstage files: `git reset HEAD -- <files>` (removes files from staging area)
+ *
+ * Note: Git repository validation (isGitRepo) is handled by
+ * the requireGitRepoOnly middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from '../common.js';
+import { stageFiles, StageFilesValidationError } from '../../../services/stage-files-service.js';
+
+export function createStageFilesHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, files, operation } = req.body as {
+        worktreePath: string;
+        files: string[];
+        operation: 'stage' | 'unstage';
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      if (!Array.isArray(files) || files.length === 0) {
+        res.status(400).json({
+          success: false,
+          error: 'files array required and must not be empty',
+        });
+        return;
+      }
+
+      for (const file of files) {
+        if (typeof file !== 'string' || file.trim() === '') {
+          res.status(400).json({
+            success: false,
+            error: 'Each element of files must be a non-empty string',
+          });
+          return;
+        }
+      }
+
+      if (operation !== 'stage' && operation !== 'unstage') {
+        res.status(400).json({
+          success: false,
+          error: 'operation must be "stage" or "unstage"',
+        });
+        return;
+      }
+
+      const result = await stageFiles(worktreePath, files, operation);
+
+      res.json({
+        success: true,
+        result,
+      });
+    } catch (error) {
+      if (error instanceof StageFilesValidationError) {
+        res.status(400).json({ success: false, error: error.message });
+        return;
+      }
+      logError(error, `${(req.body as { operation?: string })?.operation ?? 'stage'} files failed`);
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/start-dev.ts b/temp_repo/apps/server/src/routes/worktree/routes/start-dev.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4bb111e8691d4aafe4d10f940667993bcdd0229c
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/start-dev.ts
@@ -0,0 +1,84 @@
+/**
+ * POST /start-dev endpoint - Start a dev server for a worktree
+ *
+ * Spins up a development server in the worktree directory on a unique port,
+ * allowing preview of the worktree's changes without affecting the main dev server.
+ *
+ * If a custom devCommand is configured in project settings, it will be used.
+ * Otherwise, auto-detection based on package manager (npm/yarn/pnpm/bun run dev) is used.
+ */
+
+import type { Request, Response } from 'express';
+import type { SettingsService } from '../../../services/settings-service.js';
+import { getDevServerService } from '../../../services/dev-server-service.js';
+import { getErrorMessage, logError } from '../common.js';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('start-dev');
+
+export function createStartDevHandler(settingsService?: SettingsService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, worktreePath } = req.body as {
+        projectPath: string;
+        worktreePath: string;
+      };
+
+      if (!projectPath) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath is required',
+        });
+        return;
+      }
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath is required',
+        });
+        return;
+      }
+
+      // Get custom dev command from project settings (if configured)
+      let customCommand: string | undefined;
+      if (settingsService) {
+        const projectSettings = await settingsService.getProjectSettings(projectPath);
+        const devCommand = projectSettings?.devCommand?.trim();
+        if (devCommand) {
+          customCommand = devCommand;
+          logger.debug(`Using custom dev command from project settings: ${customCommand}`);
+        } else {
+          logger.debug('No custom dev command configured, using auto-detection');
+        }
+      }
+
+      const devServerService = getDevServerService();
+      const result = await devServerService.startDevServer(
+        projectPath,
+        worktreePath,
+        customCommand
+      );
+
+      if (result.success && result.result) {
+        res.json({
+          success: true,
+          result: {
+            worktreePath: result.result.worktreePath,
+            port: result.result.port,
+            url: result.result.url,
+            message: result.result.message,
+          },
+        });
+      } else {
+        res.status(400).json({
+          success: false,
+          error: result.error || 'Failed to start dev server',
+        });
+      }
+    } catch (error) {
+      logError(error, 'Start dev server failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/start-tests.ts b/temp_repo/apps/server/src/routes/worktree/routes/start-tests.ts
new file mode 100644
index 0000000000000000000000000000000000000000..54837056f4c0771b2b0b5f8ba66bd32286edc6de
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/start-tests.ts
@@ -0,0 +1,92 @@
+/**
+ * POST /start-tests endpoint - Start tests for a worktree
+ *
+ * Runs the test command configured in project settings.
+ * If no testCommand is configured, returns an error.
+ */
+
+import type { Request, Response } from 'express';
+import type { SettingsService } from '../../../services/settings-service.js';
+import { getTestRunnerService } from '../../../services/test-runner-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createStartTestsHandler(settingsService?: SettingsService) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const body = req.body;
+
+      // Validate request body
+      if (!body || typeof body !== 'object') {
+        res.status(400).json({
+          success: false,
+          error: 'Request body must be an object',
+        });
+        return;
+      }
+
+      const worktreePath = typeof body.worktreePath === 'string' ? body.worktreePath : undefined;
+      const projectPath = typeof body.projectPath === 'string' ? body.projectPath : undefined;
+      const testFile = typeof body.testFile === 'string' ? body.testFile : undefined;
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath is required and must be a string',
+        });
+        return;
+      }
+
+      // Get project settings to find the test command
+      // Use projectPath if provided, otherwise use worktreePath
+      const settingsPath = projectPath || worktreePath;
+
+      if (!settingsService) {
+        res.status(500).json({
+          success: false,
+          error: 'Settings service not available',
+        });
+        return;
+      }
+
+      const projectSettings = await settingsService.getProjectSettings(settingsPath);
+      const testCommand = projectSettings?.testCommand;
+
+      if (!testCommand) {
+        res.status(400).json({
+          success: false,
+          error:
+            'No test command configured. Please configure a test command in Project Settings > Testing Configuration.',
+        });
+        return;
+      }
+
+      const testRunnerService = getTestRunnerService();
+      const result = await testRunnerService.startTests(worktreePath, {
+        command: testCommand,
+        testFile,
+      });
+
+      if (result.success && result.result) {
+        res.json({
+          success: true,
+          result: {
+            sessionId: result.result.sessionId,
+            worktreePath: result.result.worktreePath,
+            command: result.result.command,
+            status: result.result.status,
+            testFile: result.result.testFile,
+            message: result.result.message,
+          },
+        });
+      } else {
+        res.status(400).json({
+          success: false,
+          error: result.error || 'Failed to start tests',
+        });
+      }
+    } catch (error) {
+      logError(error, 'Start tests failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/stash-apply.ts b/temp_repo/apps/server/src/routes/worktree/routes/stash-apply.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f854edd3fa9dc8d64e83bb8cc3680066a1103910
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/stash-apply.ts
@@ -0,0 +1,78 @@
+/**
+ * POST /stash-apply endpoint - Apply or pop a stash in a worktree
+ *
+ * Applies a specific stash entry to the working directory.
+ * Can either "apply" (keep stash) or "pop" (remove stash after applying).
+ *
+ * All git operations and conflict detection are delegated to StashService.
+ *
+ * Note: Git repository validation (isGitRepo) is handled by
+ * the requireGitRepoOnly middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import { getErrorMessage, logError } from '../common.js';
+import { applyOrPop } from '../../../services/stash-service.js';
+
+export function createStashApplyHandler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, stashIndex, pop } = req.body as {
+        worktreePath: string;
+        stashIndex: number;
+        pop?: boolean;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      if (stashIndex === undefined || stashIndex === null) {
+        res.status(400).json({
+          success: false,
+          error: 'stashIndex required',
+        });
+        return;
+      }
+
+      const idx = typeof stashIndex === 'string' ? Number(stashIndex) : stashIndex;
+
+      if (!Number.isInteger(idx) || idx < 0) {
+        res.status(400).json({
+          success: false,
+          error: 'stashIndex must be a non-negative integer',
+        });
+        return;
+      }
+
+      // Delegate all stash apply/pop logic to the service
+      const result = await applyOrPop(worktreePath, idx, { pop }, events);
+
+      if (!result.success) {
+        // applyOrPop already logs the error internally via logError — no need to double-log here
+        res.status(500).json({ success: false, error: result.error });
+        return;
+      }
+
+      res.json({
+        success: true,
+        result: {
+          applied: result.applied,
+          hasConflicts: result.hasConflicts,
+          conflictFiles: result.conflictFiles,
+          operation: result.operation,
+          stashIndex: result.stashIndex,
+          message: result.message,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Stash apply failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/stash-drop.ts b/temp_repo/apps/server/src/routes/worktree/routes/stash-drop.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a05985ee83a913546057b6681bd1a29ac6e92950
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/stash-drop.ts
@@ -0,0 +1,83 @@
+/**
+ * POST /stash-drop endpoint - Drop (delete) a stash entry
+ *
+ * The handler only validates input, invokes the service, streams lifecycle
+ * events via the EventEmitter, and sends the final JSON response.
+ *
+ * Git business logic is delegated to stash-service.ts.
+ * Events are emitted at key lifecycle points for WebSocket subscribers.
+ *
+ * Note: Git repository validation (isGitRepo) is handled by
+ * the requireGitRepoOnly middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import { getErrorMessage, logError } from '../common.js';
+import { dropStash } from '../../../services/stash-service.js';
+
+export function createStashDropHandler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, stashIndex } = req.body as {
+        worktreePath: string;
+        stashIndex: number;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      if (!Number.isInteger(stashIndex) || stashIndex < 0) {
+        res.status(400).json({
+          success: false,
+          error: 'stashIndex required',
+        });
+        return;
+      }
+
+      // Emit start event so the frontend can observe progress
+      events.emit('stash:start', {
+        worktreePath,
+        stashIndex,
+        stashRef: `stash@{${stashIndex}}`,
+        operation: 'drop',
+      });
+
+      // Delegate all Git work to the service
+      const result = await dropStash(worktreePath, stashIndex);
+
+      // Emit success event
+      events.emit('stash:success', {
+        worktreePath,
+        stashIndex,
+        operation: 'drop',
+        dropped: result.dropped,
+      });
+
+      res.json({
+        success: true,
+        result: {
+          dropped: result.dropped,
+          stashIndex: result.stashIndex,
+          message: result.message,
+        },
+      });
+    } catch (error) {
+      // Emit error event so the frontend can react
+      events.emit('stash:failure', {
+        worktreePath: req.body?.worktreePath,
+        stashIndex: req.body?.stashIndex,
+        operation: 'drop',
+        error: getErrorMessage(error),
+      });
+
+      logError(error, 'Stash drop failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/stash-list.ts b/temp_repo/apps/server/src/routes/worktree/routes/stash-list.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c34b3878300439eec64815ee2e413c4f933e12a6
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/stash-list.ts
@@ -0,0 +1,76 @@
+/**
+ * POST /stash-list endpoint - List all stashes in a worktree
+ *
+ * The handler only validates input, invokes the service, streams lifecycle
+ * events via the EventEmitter, and sends the final JSON response.
+ *
+ * Git business logic is delegated to stash-service.ts.
+ * Events are emitted at key lifecycle points for WebSocket subscribers.
+ *
+ * Note: Git repository validation (isGitRepo) is handled by
+ * the requireGitRepoOnly middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import { getErrorMessage, logError } from '../common.js';
+import { listStash } from '../../../services/stash-service.js';
+
+export function createStashListHandler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath } = req.body as {
+        worktreePath: string;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      // Emit start event so the frontend can observe progress
+      events.emit('stash:start', {
+        worktreePath,
+        operation: 'list',
+      });
+
+      // Delegate all Git work to the service
+      const result = await listStash(worktreePath);
+
+      // Emit progress with stash count
+      events.emit('stash:progress', {
+        worktreePath,
+        operation: 'list',
+        total: result.total,
+      });
+
+      // Emit success event
+      events.emit('stash:success', {
+        worktreePath,
+        operation: 'list',
+        total: result.total,
+      });
+
+      res.json({
+        success: true,
+        result: {
+          stashes: result.stashes,
+          total: result.total,
+        },
+      });
+    } catch (error) {
+      // Emit error event so the frontend can react
+      events.emit('stash:failure', {
+        worktreePath: req.body?.worktreePath,
+        operation: 'list',
+        error: getErrorMessage(error),
+      });
+
+      logError(error, 'Stash list failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/stash-push.ts b/temp_repo/apps/server/src/routes/worktree/routes/stash-push.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d2be6701df522a424c1a98f9261e0833d78af287
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/stash-push.ts
@@ -0,0 +1,81 @@
+/**
+ * POST /stash-push endpoint - Stash changes in a worktree
+ *
+ * The handler only validates input, invokes the service, streams lifecycle
+ * events via the EventEmitter, and sends the final JSON response.
+ *
+ * Git business logic is delegated to stash-service.ts.
+ * Events are emitted at key lifecycle points for WebSocket subscribers.
+ *
+ * Note: Git repository validation (isGitRepo) is handled by
+ * the requireGitRepoOnly middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import type { EventEmitter } from '../../../lib/events.js';
+import { getErrorMessage, logError } from '../common.js';
+import { pushStash } from '../../../services/stash-service.js';
+
+export function createStashPushHandler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, message, files } = req.body as {
+        worktreePath: string;
+        message?: string;
+        files?: string[];
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      // Emit start event so the frontend can observe progress
+      events.emit('stash:start', {
+        worktreePath,
+        operation: 'push',
+      });
+
+      // Delegate all Git work to the service
+      const result = await pushStash(worktreePath, { message, files });
+
+      // Emit progress with stash result
+      events.emit('stash:progress', {
+        worktreePath,
+        operation: 'push',
+        stashed: result.stashed,
+        branch: result.branch,
+      });
+
+      // Emit success event
+      events.emit('stash:success', {
+        worktreePath,
+        operation: 'push',
+        stashed: result.stashed,
+        branch: result.branch,
+      });
+
+      res.json({
+        success: true,
+        result: {
+          stashed: result.stashed,
+          branch: result.branch,
+          message: result.message,
+        },
+      });
+    } catch (error) {
+      // Emit error event so the frontend can react
+      events.emit('stash:failure', {
+        worktreePath: req.body?.worktreePath,
+        operation: 'push',
+        error: getErrorMessage(error),
+      });
+
+      logError(error, 'Stash push failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/status.ts b/temp_repo/apps/server/src/routes/worktree/routes/status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b44c5ae4366b9fcdcc60a6e1a1417c2865977820
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/status.ts
@@ -0,0 +1,73 @@
+/**
+ * POST /status endpoint - Get worktree status
+ */
+
+import type { Request, Response } from 'express';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import path from 'path';
+import * as secureFs from '../../../lib/secure-fs.js';
+import { getErrorMessage, logError } from '../common.js';
+
+const execAsync = promisify(exec);
+
+export function createStatusHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { projectPath, featureId } = req.body as {
+        projectPath: string;
+        featureId: string;
+      };
+
+      if (!projectPath || !featureId) {
+        res.status(400).json({
+          success: false,
+          error: 'projectPath and featureId required',
+        });
+        return;
+      }
+
+      // Git worktrees are stored in project directory
+      // Sanitize featureId the same way it's sanitized when creating worktrees
+      // (see create.ts: branchName.replace(/[^a-zA-Z0-9_-]/g, '-'))
+      const sanitizedFeatureId = featureId.replace(/[^a-zA-Z0-9_-]/g, '-');
+      const worktreePath = path.join(projectPath, '.worktrees', sanitizedFeatureId);
+
+      try {
+        await secureFs.access(worktreePath);
+        const { stdout: status } = await execAsync('git status --porcelain', {
+          cwd: worktreePath,
+        });
+        const files = status
+          .split('\n')
+          .filter(Boolean)
+          .map((line) => line.slice(3));
+        const { stdout: diffStat } = await execAsync('git diff --stat', {
+          cwd: worktreePath,
+        });
+        const { stdout: logOutput } = await execAsync('git log --oneline -5 --format="%h %s"', {
+          cwd: worktreePath,
+        });
+
+        res.json({
+          success: true,
+          modifiedFiles: files.length,
+          files,
+          diffStat: diffStat.trim(),
+          recentCommits: logOutput.trim().split('\n').filter(Boolean),
+        });
+      } catch {
+        res.json({
+          success: true,
+          modifiedFiles: 0,
+          files: [],
+          diffStat: '',
+          recentCommits: [],
+        });
+      }
+    } catch (error) {
+      logError(error, 'Get worktree status failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/stop-dev.ts b/temp_repo/apps/server/src/routes/worktree/routes/stop-dev.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1dbc7340b6604d3fd0ecd09651210acfb2ae2e1a
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/stop-dev.ts
@@ -0,0 +1,49 @@
+/**
+ * POST /stop-dev endpoint - Stop a dev server for a worktree
+ *
+ * Stops the development server running for a specific worktree,
+ * freeing up the ports for reuse.
+ */
+
+import type { Request, Response } from 'express';
+import { getDevServerService } from '../../../services/dev-server-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createStopDevHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath } = req.body as {
+        worktreePath: string;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath is required',
+        });
+        return;
+      }
+
+      const devServerService = getDevServerService();
+      const result = await devServerService.stopDevServer(worktreePath);
+
+      if (result.success && result.result) {
+        res.json({
+          success: true,
+          result: {
+            worktreePath: result.result.worktreePath,
+            message: result.result.message,
+          },
+        });
+      } else {
+        res.status(400).json({
+          success: false,
+          error: result.error || 'Failed to stop dev server',
+        });
+      }
+    } catch (error) {
+      logError(error, 'Stop dev server failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/stop-tests.ts b/temp_repo/apps/server/src/routes/worktree/routes/stop-tests.ts
new file mode 100644
index 0000000000000000000000000000000000000000..48181f242552b2130588ecf2b143fa03ae944918
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/stop-tests.ts
@@ -0,0 +1,58 @@
+/**
+ * POST /stop-tests endpoint - Stop a running test session
+ *
+ * Stops the test runner process for a specific session,
+ * cancelling any ongoing tests and freeing up resources.
+ */
+
+import type { Request, Response } from 'express';
+import { getTestRunnerService } from '../../../services/test-runner-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+export function createStopTestsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const body = req.body;
+
+      // Validate request body
+      if (!body || typeof body !== 'object') {
+        res.status(400).json({
+          success: false,
+          error: 'Request body must be an object',
+        });
+        return;
+      }
+
+      const sessionId = typeof body.sessionId === 'string' ? body.sessionId : undefined;
+
+      if (!sessionId) {
+        res.status(400).json({
+          success: false,
+          error: 'sessionId is required and must be a string',
+        });
+        return;
+      }
+
+      const testRunnerService = getTestRunnerService();
+      const result = await testRunnerService.stopTests(sessionId);
+
+      if (result.success && result.result) {
+        res.json({
+          success: true,
+          result: {
+            sessionId: result.result.sessionId,
+            message: result.result.message,
+          },
+        });
+      } else {
+        res.status(400).json({
+          success: false,
+          error: result.error || 'Failed to stop tests',
+        });
+      }
+    } catch (error) {
+      logError(error, 'Stop tests failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/switch-branch.ts b/temp_repo/apps/server/src/routes/worktree/routes/switch-branch.ts
new file mode 100644
index 0000000000000000000000000000000000000000..abcdfdcd3c95fd60de006320b47476038480e9b9
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/switch-branch.ts
@@ -0,0 +1,104 @@
+/**
+ * POST /switch-branch endpoint - Switch to an existing branch
+ *
+ * Handles branch switching with automatic stash/reapply of local changes.
+ * If there are uncommitted changes, they are stashed before switching and
+ * reapplied after. If the stash pop results in merge conflicts, returns
+ * a special response code so the UI can create a conflict resolution task.
+ *
+ * For remote branches (e.g., "origin/feature"), automatically creates a
+ * local tracking branch and checks it out.
+ *
+ * Also fetches the latest remote refs before switching to ensure accurate branch detection.
+ *
+ * Git business logic is delegated to worktree-branch-service.ts.
+ * Events are emitted at key lifecycle points for WebSocket subscribers.
+ *
+ * Note: Git repository validation (isGitRepo, hasCommits) is handled by
+ * the requireValidWorktree middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError, isValidBranchName } from '../common.js';
+import type { EventEmitter } from '../../../lib/events.js';
+import { performSwitchBranch } from '../../../services/worktree-branch-service.js';
+
+export function createSwitchBranchHandler(events?: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, branchName } = req.body as {
+        worktreePath: string;
+        branchName: string;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      if (!branchName) {
+        res.status(400).json({
+          success: false,
+          error: 'branchName required',
+        });
+        return;
+      }
+
+      // Validate branch name using shared allowlist to prevent Git option injection
+      if (!isValidBranchName(branchName)) {
+        res.status(400).json({
+          success: false,
+          error: 'Invalid branch name',
+        });
+        return;
+      }
+
+      // Execute the branch switch via the service
+      const result = await performSwitchBranch(worktreePath, branchName, events);
+
+      // Map service result to HTTP response
+      if (!result.success) {
+        // Determine status code based on error type
+        const statusCode = isBranchNotFoundError(result.error) ? 400 : 500;
+        res.status(statusCode).json({
+          success: false,
+          error: result.error,
+          ...(result.stashPopConflicts !== undefined && {
+            stashPopConflicts: result.stashPopConflicts,
+          }),
+          ...(result.stashPopConflictMessage && {
+            stashPopConflictMessage: result.stashPopConflictMessage,
+          }),
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        result: result.result,
+      });
+    } catch (error) {
+      events?.emit('switch:error', {
+        error: getErrorMessage(error),
+      });
+
+      logError(error, 'Switch branch failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+
+/**
+ * Determine whether an error message represents a client error (400)
+ * vs a server error (500).
+ *
+ * Client errors are validation issues like non-existent branches or
+ * unparseable remote branch names.
+ */
+function isBranchNotFoundError(error?: string): boolean {
+  if (!error) return false;
+  return error.includes('does not exist') || error.includes('Failed to parse remote branch name');
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/sync.ts b/temp_repo/apps/server/src/routes/worktree/routes/sync.ts
new file mode 100644
index 0000000000000000000000000000000000000000..acd2ec3b3bc628a736f77036dffadc55c59f79a3
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/sync.ts
@@ -0,0 +1,66 @@
+/**
+ * POST /sync endpoint - Pull then push a worktree branch
+ *
+ * Performs a full sync operation: pull latest from remote, then push
+ * local commits. Handles divergence automatically.
+ *
+ * Git business logic is delegated to sync-service.ts.
+ *
+ * Note: Git repository validation (isGitRepo, hasCommits) is handled by
+ * the requireValidWorktree middleware in index.ts
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError } from '../common.js';
+import { performSync } from '../../../services/sync-service.js';
+
+export function createSyncHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, remote } = req.body as {
+        worktreePath: string;
+        remote?: string;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({
+          success: false,
+          error: 'worktreePath required',
+        });
+        return;
+      }
+
+      const result = await performSync(worktreePath, { remote });
+
+      if (!result.success) {
+        const statusCode = result.hasConflicts ? 409 : 500;
+        res.status(statusCode).json({
+          success: false,
+          error: result.error,
+          hasConflicts: result.hasConflicts,
+          conflictFiles: result.conflictFiles,
+          conflictSource: result.conflictSource,
+          pulled: result.pulled,
+          pushed: result.pushed,
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        result: {
+          branch: result.branch,
+          pulled: result.pulled,
+          pushed: result.pushed,
+          isFastForward: result.isFastForward,
+          isMerge: result.isMerge,
+          autoResolved: result.autoResolved,
+          message: result.message,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Sync worktree failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/test-logs.ts b/temp_repo/apps/server/src/routes/worktree/routes/test-logs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..724730cc3db100c4589c724849c98f04e4bec309
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/test-logs.ts
@@ -0,0 +1,160 @@
+/**
+ * GET /test-logs endpoint - Get buffered logs for a test runner session
+ *
+ * Returns the scrollback buffer containing historical log output for a test run.
+ * Used by clients to populate the log panel on initial connection
+ * before subscribing to real-time updates via WebSocket.
+ *
+ * Query parameters:
+ * - worktreePath: Path to the worktree (optional if sessionId provided)
+ * - sessionId: Specific test session ID (optional, uses active session if not provided)
+ */
+
+import type { Request, Response } from 'express';
+import { getTestRunnerService } from '../../../services/test-runner-service.js';
+import { getErrorMessage, logError } from '../common.js';
+
+interface SessionInfo {
+  sessionId: string;
+  worktreePath?: string;
+  command?: string;
+  testFile?: string;
+  exitCode?: number | null;
+}
+
+interface OutputResult {
+  sessionId: string;
+  status: string;
+  output: string;
+  startedAt: string;
+  finishedAt?: string | null;
+}
+
+function buildLogsResponse(session: SessionInfo, output: OutputResult) {
+  return {
+    success: true,
+    result: {
+      sessionId: session.sessionId,
+      worktreePath: session.worktreePath,
+      command: session.command,
+      status: output.status,
+      testFile: session.testFile,
+      logs: output.output,
+      startedAt: output.startedAt,
+      finishedAt: output.finishedAt,
+      exitCode: session.exitCode ?? null,
+    },
+  };
+}
+
+export function createGetTestLogsHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, sessionId } = req.query as {
+        worktreePath?: string;
+        sessionId?: string;
+      };
+
+      const testRunnerService = getTestRunnerService();
+
+      // If sessionId is provided, get logs for that specific session
+      if (sessionId) {
+        const result = testRunnerService.getSessionOutput(sessionId);
+
+        if (result.success && result.result) {
+          const session = testRunnerService.getSession(sessionId);
+          res.json(
+            buildLogsResponse(
+              {
+                sessionId: result.result.sessionId,
+                worktreePath: session?.worktreePath,
+                command: session?.command,
+                testFile: session?.testFile,
+                exitCode: session?.exitCode,
+              },
+              result.result
+            )
+          );
+        } else {
+          res.status(404).json({
+            success: false,
+            error: result.error || 'Failed to get test logs',
+          });
+        }
+        return;
+      }
+
+      // If worktreePath is provided, get logs for the active session
+      if (worktreePath) {
+        const activeSession = testRunnerService.getActiveSession(worktreePath);
+
+        if (activeSession) {
+          const result = testRunnerService.getSessionOutput(activeSession.id);
+
+          if (result.success && result.result) {
+            res.json(
+              buildLogsResponse(
+                {
+                  sessionId: activeSession.id,
+                  worktreePath: activeSession.worktreePath,
+                  command: activeSession.command,
+                  testFile: activeSession.testFile,
+                  exitCode: activeSession.exitCode,
+                },
+                result.result
+              )
+            );
+          } else {
+            res.status(404).json({
+              success: false,
+              error: result.error || 'Failed to get test logs',
+            });
+          }
+        } else {
+          // No active session - check for most recent session for this worktree
+          const sessions = testRunnerService.listSessions(worktreePath);
+          if (sessions.result.sessions.length > 0) {
+            // Get the most recent session (list is not sorted, so find it)
+            const mostRecent = sessions.result.sessions.reduce((latest, current) => {
+              const latestTime = new Date(latest.startedAt).getTime();
+              const currentTime = new Date(current.startedAt).getTime();
+              return currentTime > latestTime ? current : latest;
+            });
+
+            const result = testRunnerService.getSessionOutput(mostRecent.sessionId);
+            if (result.success && result.result) {
+              res.json(
+                buildLogsResponse(
+                  {
+                    sessionId: mostRecent.sessionId,
+                    worktreePath: mostRecent.worktreePath,
+                    command: mostRecent.command,
+                    testFile: mostRecent.testFile,
+                    exitCode: mostRecent.exitCode,
+                  },
+                  result.result
+                )
+              );
+              return;
+            }
+          }
+
+          res.status(404).json({
+            success: false,
+            error: 'No test sessions found for this worktree',
+          });
+        }
+        return;
+      }
+
+      // Neither sessionId nor worktreePath provided
+      res.status(400).json({
+        success: false,
+        error: 'Either worktreePath or sessionId query parameter is required',
+      });
+    } catch (error) {
+      logError(error, 'Get test logs failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/worktree/routes/update-pr-number.ts b/temp_repo/apps/server/src/routes/worktree/routes/update-pr-number.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b39508f9e55e9bf8e160546b47bf5cde51187e64
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/worktree/routes/update-pr-number.ts
@@ -0,0 +1,163 @@
+/**
+ * POST /update-pr-number endpoint - Update the tracked PR number for a worktree
+ *
+ * Allows users to manually change which PR number is tracked for a worktree branch.
+ * Fetches updated PR info from GitHub when available, or updates metadata with the
+ * provided number only if GitHub CLI is unavailable.
+ */
+
+import type { Request, Response } from 'express';
+import { getErrorMessage, logError, execAsync, execEnv, isGhCliAvailable } from '../common.js';
+import { updateWorktreePRInfo } from '../../../lib/worktree-metadata.js';
+import { createLogger } from '@automaker/utils';
+import { validatePRState } from '@automaker/types';
+
+const logger = createLogger('UpdatePRNumber');
+
+export function createUpdatePRNumberHandler() {
+  return async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { worktreePath, projectPath, prNumber } = req.body as {
+        worktreePath: string;
+        projectPath?: string;
+        prNumber: number;
+      };
+
+      if (!worktreePath) {
+        res.status(400).json({ success: false, error: 'worktreePath required' });
+        return;
+      }
+
+      if (
+        !prNumber ||
+        typeof prNumber !== 'number' ||
+        prNumber <= 0 ||
+        !Number.isInteger(prNumber)
+      ) {
+        res.status(400).json({ success: false, error: 'prNumber must be a positive integer' });
+        return;
+      }
+
+      const effectiveProjectPath = projectPath || worktreePath;
+
+      // Get current branch name
+      const { stdout: branchOutput } = await execAsync('git rev-parse --abbrev-ref HEAD', {
+        cwd: worktreePath,
+        env: execEnv,
+      });
+      const branchName = branchOutput.trim();
+
+      if (!branchName || branchName === 'HEAD') {
+        res.status(400).json({
+          success: false,
+          error: 'Cannot update PR number in detached HEAD state',
+        });
+        return;
+      }
+
+      // Try to fetch PR info from GitHub for the given PR number
+      const ghCliAvailable = await isGhCliAvailable();
+
+      if (ghCliAvailable) {
+        try {
+          // Detect repository for gh CLI
+          let repoFlag = '';
+          try {
+            const { stdout: remotes } = await execAsync('git remote -v', {
+              cwd: worktreePath,
+              env: execEnv,
+            });
+            const lines = remotes.split(/\r?\n/);
+            let upstreamRepo: string | null = null;
+            let originOwner: string | null = null;
+            let originRepo: string | null = null;
+
+            for (const line of lines) {
+              const match =
+                line.match(/^(\w+)\s+.*[:/]([^/]+)\/([^/\s]+?)(?:\.git)?\s+\(fetch\)/) ||
+                line.match(/^(\w+)\s+git@[^:]+:([^/]+)\/([^\s]+?)(?:\.git)?\s+\(fetch\)/) ||
+                line.match(/^(\w+)\s+https?:\/\/[^/]+\/([^/]+)\/([^\s]+?)(?:\.git)?\s+\(fetch\)/);
+
+              if (match) {
+                const [, remoteName, owner, repo] = match;
+                if (remoteName === 'upstream') {
+                  upstreamRepo = `${owner}/${repo}`;
+                } else if (remoteName === 'origin') {
+                  originOwner = owner;
+                  originRepo = repo;
+                }
+              }
+            }
+
+            const targetRepo =
+              upstreamRepo || (originOwner && originRepo ? `${originOwner}/${originRepo}` : null);
+            if (targetRepo) {
+              repoFlag = ` --repo "${targetRepo}"`;
+            }
+          } catch {
+            // Ignore remote parsing errors
+          }
+
+          // Fetch PR info from GitHub using the PR number
+          const viewCmd = `gh pr view ${prNumber}${repoFlag} --json number,title,url,state,createdAt`;
+          const { stdout: prOutput } = await execAsync(viewCmd, {
+            cwd: worktreePath,
+            env: execEnv,
+          });
+
+          const prData = JSON.parse(prOutput);
+
+          const prInfo = {
+            number: prData.number,
+            url: prData.url,
+            title: prData.title,
+            state: validatePRState(prData.state),
+            createdAt: prData.createdAt || new Date().toISOString(),
+          };
+
+          await updateWorktreePRInfo(effectiveProjectPath, branchName, prInfo);
+
+          logger.info(`Updated PR tracking to #${prNumber} for branch ${branchName}`);
+
+          res.json({
+            success: true,
+            result: {
+              branch: branchName,
+              prInfo,
+            },
+          });
+          return;
+        } catch (error) {
+          logger.warn(`Failed to fetch PR #${prNumber} from GitHub:`, error);
+          // Fall through to simple update below
+        }
+      }
+
+      // Fallback: update with just the number, preserving existing PR info structure
+      // or creating minimal info if no GitHub data available
+      const prInfo = {
+        number: prNumber,
+        url: `https://github.com/pulls/${prNumber}`,
+        title: `PR #${prNumber}`,
+        state: validatePRState('OPEN'),
+        createdAt: new Date().toISOString(),
+      };
+
+      await updateWorktreePRInfo(effectiveProjectPath, branchName, prInfo);
+
+      logger.info(`Updated PR tracking to #${prNumber} for branch ${branchName} (no GitHub data)`);
+
+      res.json({
+        success: true,
+        result: {
+          branch: branchName,
+          prInfo,
+          ghCliUnavailable: !ghCliAvailable,
+        },
+      });
+    } catch (error) {
+      logError(error, 'Update PR number failed');
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
diff --git a/temp_repo/apps/server/src/routes/zai/index.ts b/temp_repo/apps/server/src/routes/zai/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4e5b874cc3843a9bf8c15a14ab8ed79c527106c6
--- /dev/null
+++ b/temp_repo/apps/server/src/routes/zai/index.ts
@@ -0,0 +1,159 @@
+import { Router, Request, Response } from 'express';
+import { ZaiUsageService } from '../../services/zai-usage-service.js';
+import type { SettingsService } from '../../services/settings-service.js';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('Zai');
+
+export function createZaiRoutes(
+  usageService: ZaiUsageService,
+  settingsService: SettingsService
+): Router {
+  const router = Router();
+
+  // Initialize z.ai API token from credentials on startup
+  (async () => {
+    try {
+      const credentials = await settingsService.getCredentials();
+      if (credentials.apiKeys?.zai) {
+        usageService.setApiToken(credentials.apiKeys.zai);
+        logger.info('[init] Loaded z.ai API key from credentials');
+      }
+    } catch (error) {
+      logger.error('[init] Failed to load z.ai API key from credentials:', error);
+    }
+  })();
+
+  // Get current usage (fetches from z.ai API)
+  router.get('/usage', async (_req: Request, res: Response) => {
+    try {
+      // Check if z.ai API is configured
+      const isAvailable = usageService.isAvailable();
+      if (!isAvailable) {
+        // Use a 200 + error payload so the UI doesn't interpret it as session auth error
+        res.status(200).json({
+          error: 'z.ai API not configured',
+          message: 'Set Z_AI_API_KEY environment variable to enable z.ai usage tracking',
+        });
+        return;
+      }
+
+      const usage = await usageService.fetchUsageData();
+      res.json(usage);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+
+      if (message.includes('not configured') || message.includes('API token')) {
+        res.status(200).json({
+          error: 'API token required',
+          message: 'Set Z_AI_API_KEY environment variable to enable z.ai usage tracking',
+        });
+      } else if (message.includes('failed') || message.includes('request')) {
+        res.status(200).json({
+          error: 'API request failed',
+          message: message,
+        });
+      } else {
+        logger.error('Error fetching z.ai usage:', error);
+        res.status(500).json({ error: message });
+      }
+    }
+  });
+
+  // Configure API token (for settings page)
+  router.post('/configure', async (req: Request, res: Response) => {
+    try {
+      const { apiToken, apiHost } = req.body;
+
+      // Validate apiToken: must be present and a string
+      if (apiToken === undefined || apiToken === null || typeof apiToken !== 'string') {
+        res.status(400).json({
+          success: false,
+          error: 'Invalid request: apiToken is required and must be a string',
+        });
+        return;
+      }
+
+      // Validate apiHost if provided: must be a string and a well-formed URL
+      if (apiHost !== undefined && apiHost !== null) {
+        if (typeof apiHost !== 'string') {
+          res.status(400).json({
+            success: false,
+            error: 'Invalid request: apiHost must be a string',
+          });
+          return;
+        }
+        // Validate that apiHost is a well-formed URL
+        try {
+          const parsedUrl = new URL(apiHost);
+          if (parsedUrl.protocol !== 'http:' && parsedUrl.protocol !== 'https:') {
+            res.status(400).json({
+              success: false,
+              error: 'Invalid request: apiHost must be a valid HTTP or HTTPS URL',
+            });
+            return;
+          }
+        } catch {
+          res.status(400).json({
+            success: false,
+            error: 'Invalid request: apiHost must be a well-formed URL',
+          });
+          return;
+        }
+      }
+
+      // Pass only the sanitized values to the service
+      const sanitizedToken = apiToken.trim();
+      const sanitizedHost = typeof apiHost === 'string' ? apiHost.trim() : undefined;
+
+      const result = await usageService.configure(
+        { apiToken: sanitizedToken, apiHost: sanitizedHost },
+        settingsService
+      );
+      res.json(result);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      logger.error('Error configuring z.ai:', error);
+      res.status(500).json({ error: message });
+    }
+  });
+
+  // Verify API key without storing it (for testing in settings)
+  router.post('/verify', async (req: Request, res: Response) => {
+    try {
+      const { apiKey } = req.body;
+      const result = await usageService.verifyApiKey(apiKey);
+      res.json(result);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      logger.error('Error verifying z.ai API key:', error);
+      res.json({
+        success: false,
+        authenticated: false,
+        error: `Network error: ${message}`,
+      });
+    }
+  });
+
+  // Check if z.ai is available
+  router.get('/status', async (_req: Request, res: Response) => {
+    try {
+      const isAvailable = usageService.isAvailable();
+      const hasEnvApiKey = Boolean(process.env.Z_AI_API_KEY);
+      const hasApiKey = usageService.getApiToken() !== null;
+
+      res.json({
+        success: true,
+        available: isAvailable,
+        hasApiKey,
+        hasEnvApiKey,
+        message: isAvailable ? 'z.ai API is configured' : 'z.ai API token not configured',
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      res.status(500).json({ success: false, error: message });
+    }
+  });
+
+  return router;
+}
diff --git a/temp_repo/apps/server/src/services/agent-executor-types.ts b/temp_repo/apps/server/src/services/agent-executor-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ef0dcb68c3cfda5f10a2e53389d3642101833e33
--- /dev/null
+++ b/temp_repo/apps/server/src/services/agent-executor-types.ts
@@ -0,0 +1,89 @@
+/**
+ * AgentExecutor Types - Type definitions for agent execution
+ */
+
+import type {
+  PlanningMode,
+  ThinkingLevel,
+  ReasoningEffort,
+  ParsedTask,
+  ClaudeCompatibleProvider,
+  Credentials,
+} from '@automaker/types';
+import type { BaseProvider } from '../providers/base-provider.js';
+
+export interface AgentExecutionOptions {
+  workDir: string;
+  featureId: string;
+  prompt: string;
+  projectPath: string;
+  abortController: AbortController;
+  imagePaths?: string[];
+  model?: string;
+  planningMode?: PlanningMode;
+  requirePlanApproval?: boolean;
+  previousContent?: string;
+  systemPrompt?: string;
+  autoLoadClaudeMd?: boolean;
+  useClaudeCodeSystemPrompt?: boolean;
+  thinkingLevel?: ThinkingLevel;
+  reasoningEffort?: ReasoningEffort;
+  branchName?: string | null;
+  credentials?: Credentials;
+  claudeCompatibleProvider?: ClaudeCompatibleProvider;
+  mcpServers?: Record<string, unknown>;
+  sdkSessionId?: string;
+  sdkOptions?: {
+    maxTurns?: number;
+    allowedTools?: string[];
+    systemPrompt?: string | { type: 'preset'; preset: 'claude_code'; append?: string };
+    settingSources?: Array<'user' | 'project' | 'local'>;
+  };
+  provider: BaseProvider;
+  effectiveBareModel: string;
+  specAlreadyDetected?: boolean;
+  existingApprovedPlanContent?: string;
+  persistedTasks?: ParsedTask[];
+  /** Feature status - used to check if pipeline summary extraction is required */
+  status?: string;
+}
+
+export interface AgentExecutionResult {
+  responseText: string;
+  specDetected: boolean;
+  tasksCompleted: number;
+  aborted: boolean;
+}
+
+export type WaitForApprovalFn = (
+  featureId: string,
+  projectPath: string
+) => Promise<{ approved: boolean; feedback?: string; editedPlan?: string }>;
+
+export type SaveFeatureSummaryFn = (
+  projectPath: string,
+  featureId: string,
+  summary: string
+) => Promise<void>;
+
+export type UpdateFeatureSummaryFn = (
+  projectPath: string,
+  featureId: string,
+  summary: string
+) => Promise<void>;
+
+export type BuildTaskPromptFn = (
+  task: ParsedTask,
+  allTasks: ParsedTask[],
+  taskIndex: number,
+  planContent: string,
+  taskPromptTemplate: string,
+  userFeedback?: string
+) => string;
+
+export interface AgentExecutorCallbacks {
+  waitForApproval: WaitForApprovalFn;
+  saveFeatureSummary: SaveFeatureSummaryFn;
+  updateFeatureSummary: UpdateFeatureSummaryFn;
+  buildTaskPrompt: BuildTaskPromptFn;
+}
diff --git a/temp_repo/apps/server/src/services/agent-executor.ts b/temp_repo/apps/server/src/services/agent-executor.ts
new file mode 100644
index 0000000000000000000000000000000000000000..15731b9285e7b003b0302775945c2c6e4e047526
--- /dev/null
+++ b/temp_repo/apps/server/src/services/agent-executor.ts
@@ -0,0 +1,877 @@
+/**
+ * AgentExecutor - Core agent execution engine with streaming support
+ */
+
+import path from 'path';
+import type { ExecuteOptions, ParsedTask } from '@automaker/types';
+import { isPipelineStatus } from '@automaker/types';
+import { buildPromptWithImages, createLogger, isAuthenticationError } from '@automaker/utils';
+import { getFeatureDir } from '@automaker/platform';
+import * as secureFs from '../lib/secure-fs.js';
+import { TypedEventBus } from './typed-event-bus.js';
+import { FeatureStateManager } from './feature-state-manager.js';
+import { PlanApprovalService } from './plan-approval-service.js';
+import type { SettingsService } from './settings-service.js';
+import {
+  parseTasksFromSpec,
+  detectTaskStartMarker,
+  detectTaskCompleteMarker,
+  detectPhaseCompleteMarker,
+  detectSpecFallback,
+  extractSummary,
+} from './spec-parser.js';
+import { getPromptCustomization } from '../lib/settings-helpers.js';
+import type {
+  AgentExecutionOptions,
+  AgentExecutionResult,
+  AgentExecutorCallbacks,
+} from './agent-executor-types.js';
+
+// Re-export types for backward compatibility
+export type {
+  AgentExecutionOptions,
+  AgentExecutionResult,
+  WaitForApprovalFn,
+  SaveFeatureSummaryFn,
+  UpdateFeatureSummaryFn,
+  BuildTaskPromptFn,
+} from './agent-executor-types.js';
+
+const logger = createLogger('AgentExecutor');
+
+const DEFAULT_MAX_TURNS = 10000;
+
+export class AgentExecutor {
+  private static readonly WRITE_DEBOUNCE_MS = 500;
+  private static readonly STREAM_HEARTBEAT_MS = 15_000;
+
+  /**
+   * Sanitize a provider error value into clean text.
+   * Coalesces to string, removes ANSI codes, strips leading "Error:" prefix,
+   * trims, and returns 'Unknown error' when empty.
+   */
+  private static sanitizeProviderError(input: string | { error?: string } | undefined): string {
+    let raw: string;
+    if (typeof input === 'string') {
+      raw = input;
+    } else if (input && typeof input === 'object' && typeof input.error === 'string') {
+      raw = input.error;
+    } else {
+      raw = '';
+    }
+    const cleaned = raw
+      .replace(/\x1b\[[0-9;]*m/g, '')
+      .replace(/^Error:\s*/i, '')
+      .trim();
+    return cleaned || 'Unknown error';
+  }
+
+  constructor(
+    private eventBus: TypedEventBus,
+    private featureStateManager: FeatureStateManager,
+    private planApprovalService: PlanApprovalService,
+    private settingsService: SettingsService | null = null
+  ) {}
+
+  async execute(
+    options: AgentExecutionOptions,
+    callbacks: AgentExecutorCallbacks
+  ): Promise<AgentExecutionResult> {
+    const {
+      workDir,
+      featureId,
+      projectPath,
+      abortController,
+      branchName = null,
+      provider,
+      effectiveBareModel,
+      previousContent,
+      planningMode = 'skip',
+      requirePlanApproval = false,
+      specAlreadyDetected = false,
+      existingApprovedPlanContent,
+      persistedTasks,
+      credentials,
+      status, // Feature status for pipeline summary check
+      claudeCompatibleProvider,
+      mcpServers,
+      sdkSessionId,
+      sdkOptions,
+    } = options;
+    const { content: promptContent } = await buildPromptWithImages(
+      options.prompt,
+      options.imagePaths,
+      workDir,
+      false
+    );
+    const resolvedMaxTurns = sdkOptions?.maxTurns ?? DEFAULT_MAX_TURNS;
+    if (sdkOptions?.maxTurns == null) {
+      logger.info(
+        `[execute] Feature ${featureId}: sdkOptions.maxTurns is not set, defaulting to ${resolvedMaxTurns}. ` +
+          `Model: ${effectiveBareModel}`
+      );
+    } else {
+      logger.info(
+        `[execute] Feature ${featureId}: maxTurns=${resolvedMaxTurns}, model=${effectiveBareModel}`
+      );
+    }
+
+    const executeOptions: ExecuteOptions = {
+      prompt: promptContent,
+      model: effectiveBareModel,
+      maxTurns: resolvedMaxTurns,
+      cwd: workDir,
+      allowedTools: sdkOptions?.allowedTools as string[] | undefined,
+      abortController,
+      systemPrompt: sdkOptions?.systemPrompt,
+      settingSources: sdkOptions?.settingSources,
+      mcpServers:
+        mcpServers && Object.keys(mcpServers).length > 0
+          ? (mcpServers as Record<string, { command: string }>)
+          : undefined,
+      thinkingLevel: options.thinkingLevel,
+      reasoningEffort: options.reasoningEffort,
+      credentials,
+      claudeCompatibleProvider,
+      sdkSessionId,
+    };
+    const featureDirForOutput = getFeatureDir(projectPath, featureId);
+    const outputPath = path.join(featureDirForOutput, 'agent-output.md');
+    const rawOutputPath = path.join(featureDirForOutput, 'raw-output.jsonl');
+    const enableRawOutput =
+      process.env.AUTOMAKER_DEBUG_RAW_OUTPUT === 'true' ||
+      process.env.AUTOMAKER_DEBUG_RAW_OUTPUT === '1';
+    let responseText = previousContent
+      ? `${previousContent}\n\n---\n\n## Follow-up Session\n\n`
+      : '';
+    let specDetected = specAlreadyDetected,
+      tasksCompleted = 0,
+      aborted = false;
+    let writeTimeout: ReturnType<typeof setTimeout> | null = null,
+      rawOutputLines: string[] = [],
+      rawWriteTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    const writeToFile = async (): Promise<void> => {
+      try {
+        await secureFs.mkdir(path.dirname(outputPath), { recursive: true });
+        await secureFs.writeFile(outputPath, responseText);
+      } catch (error) {
+        logger.error(`Failed to write agent output for ${featureId}:`, error);
+      }
+    };
+    const scheduleWrite = (): void => {
+      if (writeTimeout) clearTimeout(writeTimeout);
+      writeTimeout = setTimeout(() => writeToFile(), AgentExecutor.WRITE_DEBOUNCE_MS);
+    };
+    const appendRawEvent = (event: unknown): void => {
+      if (!enableRawOutput) return;
+      try {
+        rawOutputLines.push(JSON.stringify({ timestamp: new Date().toISOString(), event }));
+        if (rawWriteTimeout) clearTimeout(rawWriteTimeout);
+        rawWriteTimeout = setTimeout(async () => {
+          try {
+            await secureFs.mkdir(path.dirname(rawOutputPath), { recursive: true });
+            await secureFs.appendFile(rawOutputPath, rawOutputLines.join('\n') + '\n');
+            rawOutputLines = [];
+          } catch {
+            /* ignore */
+          }
+        }, AgentExecutor.WRITE_DEBOUNCE_MS);
+      } catch {
+        /* ignore */
+      }
+    };
+
+    const streamStartTime = Date.now();
+    let receivedAnyStreamMessage = false;
+    const streamHeartbeat = setInterval(() => {
+      if (!receivedAnyStreamMessage)
+        logger.info(
+          `Waiting for first model response for feature ${featureId} (${Math.round((Date.now() - streamStartTime) / 1000)}s elapsed)...`
+        );
+    }, AgentExecutor.STREAM_HEARTBEAT_MS);
+    const planningModeRequiresApproval =
+      planningMode === 'spec' ||
+      planningMode === 'full' ||
+      (planningMode === 'lite' && requirePlanApproval);
+    const requiresApproval = planningModeRequiresApproval && requirePlanApproval;
+
+    if (existingApprovedPlanContent && persistedTasks && persistedTasks.length > 0) {
+      const result = await this.executeTasksLoop(
+        options,
+        persistedTasks,
+        existingApprovedPlanContent,
+        responseText,
+        scheduleWrite,
+        callbacks
+      );
+      clearInterval(streamHeartbeat);
+      if (writeTimeout) clearTimeout(writeTimeout);
+      if (rawWriteTimeout) clearTimeout(rawWriteTimeout);
+      await writeToFile();
+
+      // Extract and save summary from the new content generated in this session
+      await this.extractAndSaveSessionSummary(
+        projectPath,
+        featureId,
+        result.responseText,
+        previousContent,
+        callbacks,
+        status
+      );
+
+      return {
+        responseText: result.responseText,
+        specDetected: true,
+        tasksCompleted: result.tasksCompleted,
+        aborted: result.aborted,
+      };
+    }
+
+    logger.info(`Starting stream for feature ${featureId}...`);
+
+    try {
+      const stream = provider.executeQuery(executeOptions);
+      streamLoop: for await (const msg of stream) {
+        if (msg.session_id && msg.session_id !== options.sdkSessionId) {
+          options.sdkSessionId = msg.session_id;
+        }
+        receivedAnyStreamMessage = true;
+        appendRawEvent(msg);
+        if (abortController.signal.aborted) {
+          aborted = true;
+          throw new Error('Feature execution aborted');
+        }
+        if (msg.type === 'assistant' && msg.message?.content) {
+          for (const block of msg.message.content) {
+            if (block.type === 'text') {
+              const newText = block.text || '';
+              if (!newText) continue;
+              if (responseText.length > 0 && newText.length > 0) {
+                const endsWithSentence = /[.!?:]\s*$/.test(responseText),
+                  endsWithNewline = /\n\s*$/.test(responseText);
+                if (
+                  !endsWithNewline &&
+                  (endsWithSentence || /^[\n#\-*>]/.test(newText)) &&
+                  !/[a-zA-Z0-9]/.test(responseText.slice(-1))
+                )
+                  responseText += '\n\n';
+              }
+              responseText += newText;
+              // Check for authentication errors using provider-agnostic utility
+              if (block.text && isAuthenticationError(block.text))
+                throw new Error(
+                  'Authentication failed: Invalid or expired API key. Please check your API key configuration or re-authenticate with your provider.'
+                );
+              scheduleWrite();
+              const hasExplicitMarker = responseText.includes('[SPEC_GENERATED]'),
+                hasFallbackSpec = !hasExplicitMarker && detectSpecFallback(responseText);
+              if (
+                planningModeRequiresApproval &&
+                !specDetected &&
+                (hasExplicitMarker || hasFallbackSpec)
+              ) {
+                specDetected = true;
+                const planContent = hasExplicitMarker
+                  ? responseText.substring(0, responseText.indexOf('[SPEC_GENERATED]')).trim()
+                  : responseText.trim();
+                if (!hasExplicitMarker)
+                  logger.info(`Using fallback spec detection for feature ${featureId}`);
+                const result = await this.handleSpecGenerated(
+                  options,
+                  planContent,
+                  responseText,
+                  requiresApproval,
+                  scheduleWrite,
+                  callbacks
+                );
+                responseText = result.responseText;
+                tasksCompleted = result.tasksCompleted;
+                break streamLoop;
+              }
+              if (!specDetected)
+                this.eventBus.emitAutoModeEvent('auto_mode_progress', {
+                  featureId,
+                  branchName,
+                  content: block.text,
+                });
+            } else if (block.type === 'tool_use') {
+              this.eventBus.emitAutoModeEvent('auto_mode_tool', {
+                featureId,
+                branchName,
+                tool: block.name,
+                input: block.input,
+              });
+              if (responseText.length > 0 && !responseText.endsWith('\n')) responseText += '\n';
+              responseText += `\n🔧 Tool: ${block.name}\n`;
+              if (block.input) responseText += `Input: ${JSON.stringify(block.input, null, 2)}\n`;
+              scheduleWrite();
+            }
+          }
+        } else if (msg.type === 'error') {
+          const sanitized = AgentExecutor.sanitizeProviderError(msg.error);
+          logger.error(
+            `[execute] Feature ${featureId} received error from provider. ` +
+              `raw="${msg.error}", sanitized="${sanitized}", session_id=${msg.session_id ?? 'none'}`
+          );
+          throw new Error(sanitized);
+        } else if (msg.type === 'result') {
+          if (msg.subtype === 'success') {
+            scheduleWrite();
+          } else if (msg.subtype?.startsWith('error')) {
+            // Non-success result subtypes from the SDK (error_max_turns, error_during_execution, etc.)
+            logger.error(
+              `[execute] Feature ${featureId} ended with error subtype: ${msg.subtype}. ` +
+                `session_id=${msg.session_id ?? 'none'}`
+            );
+            throw new Error(`Agent execution ended with: ${msg.subtype}`);
+          } else {
+            logger.warn(
+              `[execute] Feature ${featureId} received unhandled result subtype: ${msg.subtype}`
+            );
+          }
+        }
+      }
+    } finally {
+      clearInterval(streamHeartbeat);
+      if (writeTimeout) clearTimeout(writeTimeout);
+      if (rawWriteTimeout) clearTimeout(rawWriteTimeout);
+
+      const streamElapsedMs = Date.now() - streamStartTime;
+      logger.info(
+        `[execute] Stream ended for feature ${featureId} after ${Math.round(streamElapsedMs / 1000)}s. ` +
+          `aborted=${aborted}, specDetected=${specDetected}, responseLength=${responseText.length}`
+      );
+
+      await writeToFile();
+      if (enableRawOutput && rawOutputLines.length > 0) {
+        try {
+          await secureFs.mkdir(path.dirname(rawOutputPath), { recursive: true });
+          await secureFs.appendFile(rawOutputPath, rawOutputLines.join('\n') + '\n');
+        } catch {
+          /* ignore */
+        }
+      }
+    }
+
+    // Capture summary if it hasn't been captured by handleSpecGenerated or executeTasksLoop
+    // or if we're in a simple execution mode (planningMode='skip')
+    await this.extractAndSaveSessionSummary(
+      projectPath,
+      featureId,
+      responseText,
+      previousContent,
+      callbacks,
+      status
+    );
+
+    return { responseText, specDetected, tasksCompleted, aborted };
+  }
+
+  /**
+   * Strip the follow-up session scaffold marker from content.
+   * The scaffold is added when resuming a session with previous content:
+   *   "\n\n---\n\n## Follow-up Session\n\n"
+   * This ensures fallback summaries don't include the scaffold header.
+   *
+   * The regex pattern handles variations in whitespace while matching the
+   * scaffold structure: dashes followed by "## Follow-up Session" at the
+   * start of the content.
+   */
+  private static stripFollowUpScaffold(content: string): string {
+    // Pattern matches: ^\s*---\s*##\s*Follow-up Session\s*
+    // - ^ = start of content (scaffold is always at the beginning of sessionContent)
+    // - \s* = any whitespace (handles \n\n before ---, spaces/tabs between markers)
+    // - --- = literal dashes
+    // - \s* = whitespace between dashes and heading
+    // - ## = heading marker
+    // - \s* = whitespace before "Follow-up"
+    // - Follow-up Session = literal heading text
+    // - \s* = trailing whitespace/newlines after heading
+    const scaffoldPattern = /^\s*---\s*##\s*Follow-up Session\s*/;
+    return content.replace(scaffoldPattern, '');
+  }
+
+  /**
+   * Extract summary ONLY from the new content generated in this session
+   * and save it via the provided callback.
+   */
+  private async extractAndSaveSessionSummary(
+    projectPath: string,
+    featureId: string,
+    responseText: string,
+    previousContent: string | undefined,
+    callbacks: AgentExecutorCallbacks,
+    status?: string
+  ): Promise<void> {
+    const sessionContent = responseText.substring(previousContent ? previousContent.length : 0);
+    const summary = extractSummary(sessionContent);
+    if (summary) {
+      await callbacks.saveFeatureSummary(projectPath, featureId, summary);
+      return;
+    }
+
+    // If we're in a pipeline step, a summary is expected. Use a fallback if extraction fails.
+    if (isPipelineStatus(status)) {
+      // Strip any follow-up session scaffold before using as fallback
+      const cleanSessionContent = AgentExecutor.stripFollowUpScaffold(sessionContent);
+      const fallback = cleanSessionContent.trim();
+      if (fallback) {
+        await callbacks.saveFeatureSummary(projectPath, featureId, fallback);
+      }
+      logger.warn(
+        `[AgentExecutor] Mandatory summary extraction failed for pipeline feature ${featureId} (status="${status}")`
+      );
+    }
+  }
+
+  private async executeTasksLoop(
+    options: AgentExecutionOptions,
+    tasks: ParsedTask[],
+    planContent: string,
+    initialResponseText: string,
+    scheduleWrite: () => void,
+    callbacks: AgentExecutorCallbacks,
+    userFeedback?: string
+  ): Promise<{ responseText: string; tasksCompleted: number; aborted: boolean }> {
+    const {
+      featureId,
+      projectPath,
+      abortController,
+      branchName = null,
+      provider,
+      sdkOptions,
+    } = options;
+    logger.info(`Starting task execution for feature ${featureId} with ${tasks.length} tasks`);
+    const taskPrompts = await getPromptCustomization(this.settingsService, '[AutoMode]');
+    let responseText = initialResponseText,
+      tasksCompleted = 0;
+
+    for (let taskIndex = 0; taskIndex < tasks.length; taskIndex++) {
+      const task = tasks[taskIndex];
+      if (task.status === 'completed') {
+        tasksCompleted++;
+        continue;
+      }
+      if (abortController.signal.aborted) return { responseText, tasksCompleted, aborted: true };
+      await this.featureStateManager.updateTaskStatus(
+        projectPath,
+        featureId,
+        task.id,
+        'in_progress'
+      );
+      this.eventBus.emitAutoModeEvent('auto_mode_task_started', {
+        featureId,
+        projectPath,
+        branchName,
+        taskId: task.id,
+        taskDescription: task.description,
+        taskIndex,
+        tasksTotal: tasks.length,
+      });
+      await this.featureStateManager.updateFeaturePlanSpec(projectPath, featureId, {
+        currentTaskId: task.id,
+      });
+      const taskPrompt = callbacks.buildTaskPrompt(
+        task,
+        tasks,
+        taskIndex,
+        planContent,
+        taskPrompts.taskExecution.taskPromptTemplate,
+        userFeedback
+      );
+      const taskMaxTurns = sdkOptions?.maxTurns ?? DEFAULT_MAX_TURNS;
+      logger.info(
+        `[executeTasksLoop] Feature ${featureId}, task ${task.id} (${taskIndex + 1}/${tasks.length}): ` +
+          `maxTurns=${taskMaxTurns} (sdkOptions.maxTurns=${sdkOptions?.maxTurns ?? 'undefined'})`
+      );
+      const taskStream = provider.executeQuery(
+        this.buildExecOpts(options, taskPrompt, taskMaxTurns)
+      );
+      let taskOutput = '',
+        taskStartDetected = false,
+        taskCompleteDetected = false;
+
+      for await (const msg of taskStream) {
+        if (msg.session_id && msg.session_id !== options.sdkSessionId) {
+          options.sdkSessionId = msg.session_id;
+        }
+        if (msg.type === 'assistant' && msg.message?.content) {
+          for (const b of msg.message.content) {
+            if (b.type === 'text') {
+              const text = b.text || '';
+              taskOutput += text;
+              responseText += text;
+              this.eventBus.emitAutoModeEvent('auto_mode_progress', {
+                featureId,
+                branchName,
+                content: text,
+              });
+              scheduleWrite();
+              if (!taskStartDetected) {
+                const sid = detectTaskStartMarker(taskOutput);
+                if (sid) {
+                  taskStartDetected = true;
+                  await this.featureStateManager.updateTaskStatus(
+                    projectPath,
+                    featureId,
+                    sid,
+                    'in_progress'
+                  );
+                }
+              }
+              if (!taskCompleteDetected) {
+                const completeMarker = detectTaskCompleteMarker(taskOutput);
+                if (completeMarker) {
+                  taskCompleteDetected = true;
+                  await this.featureStateManager.updateTaskStatus(
+                    projectPath,
+                    featureId,
+                    completeMarker.id,
+                    'completed',
+                    completeMarker.summary
+                  );
+                }
+              }
+              const pn = detectPhaseCompleteMarker(text);
+              if (pn !== null)
+                this.eventBus.emitAutoModeEvent('auto_mode_phase_complete', {
+                  featureId,
+                  projectPath,
+                  branchName,
+                  phaseNumber: pn,
+                });
+            } else if (b.type === 'tool_use')
+              this.eventBus.emitAutoModeEvent('auto_mode_tool', {
+                featureId,
+                branchName,
+                tool: b.name,
+                input: b.input,
+              });
+          }
+        } else if (msg.type === 'error') {
+          const fallback = `Error during task ${task.id}`;
+          const sanitized = AgentExecutor.sanitizeProviderError(msg.error || fallback);
+          logger.error(
+            `[executeTasksLoop] Feature ${featureId} task ${task.id} received error from provider. ` +
+              `raw="${msg.error}", sanitized="${sanitized}", session_id=${msg.session_id ?? 'none'}`
+          );
+          throw new Error(sanitized);
+        } else if (msg.type === 'result') {
+          if (msg.subtype === 'success') {
+            taskOutput += msg.result || '';
+            responseText += msg.result || '';
+          } else if (msg.subtype?.startsWith('error')) {
+            logger.error(
+              `[executeTasksLoop] Feature ${featureId} task ${task.id} ended with error subtype: ${msg.subtype}. ` +
+                `session_id=${msg.session_id ?? 'none'}`
+            );
+            throw new Error(`Agent execution ended with: ${msg.subtype}`);
+          } else {
+            logger.warn(
+              `[executeTasksLoop] Feature ${featureId} task ${task.id} received unhandled result subtype: ${msg.subtype}`
+            );
+          }
+        }
+      }
+      if (!taskCompleteDetected)
+        await this.featureStateManager.updateTaskStatus(
+          projectPath,
+          featureId,
+          task.id,
+          'completed'
+        );
+      tasksCompleted = taskIndex + 1;
+      this.eventBus.emitAutoModeEvent('auto_mode_task_complete', {
+        featureId,
+        projectPath,
+        branchName,
+        taskId: task.id,
+        tasksCompleted,
+        tasksTotal: tasks.length,
+      });
+      await this.featureStateManager.updateFeaturePlanSpec(projectPath, featureId, {
+        tasksCompleted,
+      });
+      if (task.phase) {
+        const next = tasks[taskIndex + 1];
+        if (!next || next.phase !== task.phase) {
+          const m = task.phase.match(/Phase\s*(\d+)/i);
+          if (m)
+            this.eventBus.emitAutoModeEvent('auto_mode_phase_complete', {
+              featureId,
+              projectPath,
+              branchName,
+              phaseNumber: parseInt(m[1], 10),
+            });
+        }
+      }
+    }
+    return { responseText, tasksCompleted, aborted: false };
+  }
+
+  private async handleSpecGenerated(
+    options: AgentExecutionOptions,
+    planContent: string,
+    initialResponseText: string,
+    requiresApproval: boolean,
+    scheduleWrite: () => void,
+    callbacks: AgentExecutorCallbacks
+  ): Promise<{ responseText: string; tasksCompleted: number }> {
+    const {
+      featureId,
+      projectPath,
+      branchName = null,
+      planningMode = 'skip',
+      provider,
+      sdkOptions,
+    } = options;
+    let responseText = initialResponseText,
+      parsedTasks = parseTasksFromSpec(planContent);
+    logger.info(`Parsed ${parsedTasks.length} tasks from spec for feature ${featureId}`);
+    await this.featureStateManager.updateFeaturePlanSpec(projectPath, featureId, {
+      status: 'generated',
+      content: planContent,
+      version: 1,
+      generatedAt: new Date().toISOString(),
+      reviewedByUser: false,
+      tasks: parsedTasks,
+      tasksTotal: parsedTasks.length,
+      tasksCompleted: 0,
+    });
+    const planSummary = extractSummary(planContent);
+    if (planSummary) await callbacks.updateFeatureSummary(projectPath, featureId, planSummary);
+    let approvedPlanContent = planContent,
+      userFeedback: string | undefined,
+      currentPlanContent = planContent,
+      planVersion = 1;
+
+    if (requiresApproval) {
+      let planApproved = false;
+      while (!planApproved) {
+        logger.info(
+          `Spec v${planVersion} generated for feature ${featureId}, waiting for approval`
+        );
+        this.eventBus.emitAutoModeEvent('plan_approval_required', {
+          featureId,
+          projectPath,
+          branchName,
+          planContent: currentPlanContent,
+          planningMode,
+          planVersion,
+        });
+        const approvalResult = await callbacks.waitForApproval(featureId, projectPath);
+        if (approvalResult.approved) {
+          planApproved = true;
+          userFeedback = approvalResult.feedback;
+          approvedPlanContent = approvalResult.editedPlan || currentPlanContent;
+          if (approvalResult.editedPlan) {
+            // Re-parse tasks from edited plan to ensure we execute the updated tasks
+            const editedTasks = parseTasksFromSpec(approvalResult.editedPlan);
+            parsedTasks = editedTasks;
+            await this.featureStateManager.updateFeaturePlanSpec(projectPath, featureId, {
+              content: approvalResult.editedPlan,
+              tasks: editedTasks,
+              tasksTotal: editedTasks.length,
+              tasksCompleted: 0,
+            });
+          }
+          this.eventBus.emitAutoModeEvent('plan_approved', {
+            featureId,
+            projectPath,
+            branchName,
+            hasEdits: !!approvalResult.editedPlan,
+            planVersion,
+          });
+        } else {
+          const hasFeedback = approvalResult.feedback?.trim().length,
+            hasEdits = approvalResult.editedPlan?.trim().length;
+          if (!hasFeedback && !hasEdits) throw new Error('Plan cancelled by user');
+          planVersion++;
+          this.eventBus.emitAutoModeEvent('plan_revision_requested', {
+            featureId,
+            projectPath,
+            branchName,
+            feedback: approvalResult.feedback,
+            hasEdits: !!hasEdits,
+            planVersion,
+          });
+          const revPrompts = await getPromptCustomization(this.settingsService, '[AutoMode]');
+          const taskEx =
+            planningMode === 'full'
+              ? '```tasks\n## Phase 1: Foundation\n- [ ] T001: [Description] | File: [path/to/file]\n```'
+              : '```tasks\n- [ ] T001: [Description] | File: [path/to/file]\n```';
+          let revPrompt = revPrompts.taskExecution.planRevisionTemplate
+            .replace(/\{\{planVersion\}\}/g, String(planVersion - 1))
+            .replace(
+              /\{\{previousPlan\}\}/g,
+              hasEdits ? approvalResult.editedPlan || currentPlanContent : currentPlanContent
+            )
+            .replace(
+              /\{\{userFeedback\}\}/g,
+              approvalResult.feedback || 'Please revise the plan based on the edits above.'
+            )
+            .replace(/\{\{planningMode\}\}/g, planningMode)
+            .replace(/\{\{taskFormatExample\}\}/g, taskEx);
+          await this.featureStateManager.updateFeaturePlanSpec(projectPath, featureId, {
+            status: 'generating',
+            version: planVersion,
+          });
+          let revText = '';
+          for await (const msg of provider.executeQuery(
+            this.buildExecOpts(options, revPrompt, sdkOptions?.maxTurns ?? DEFAULT_MAX_TURNS)
+          )) {
+            if (msg.session_id && msg.session_id !== options.sdkSessionId) {
+              options.sdkSessionId = msg.session_id;
+            }
+            if (msg.type === 'assistant' && msg.message?.content)
+              for (const b of msg.message.content)
+                if (b.type === 'text') {
+                  revText += b.text || '';
+                  this.eventBus.emitAutoModeEvent('auto_mode_progress', {
+                    featureId,
+                    branchName,
+                    content: b.text,
+                  });
+                }
+            if (msg.type === 'error') {
+              const cleanedError =
+                (msg.error || 'Error during plan revision')
+                  .replace(/\x1b\[[0-9;]*m/g, '')
+                  .replace(/^Error:\s*/i, '')
+                  .trim() || 'Error during plan revision';
+              throw new Error(cleanedError);
+            }
+            if (msg.type === 'result' && msg.subtype === 'success') revText += msg.result || '';
+          }
+          const mi = revText.indexOf('[SPEC_GENERATED]');
+          currentPlanContent = mi > 0 ? revText.substring(0, mi).trim() : revText.trim();
+          const revisedTasks = parseTasksFromSpec(currentPlanContent);
+          if (revisedTasks.length === 0 && (planningMode === 'spec' || planningMode === 'full'))
+            this.eventBus.emitAutoModeEvent('plan_revision_warning', {
+              featureId,
+              projectPath,
+              branchName,
+              planningMode,
+              warning: 'Revised plan missing tasks block',
+            });
+          await this.featureStateManager.updateFeaturePlanSpec(projectPath, featureId, {
+            status: 'generated',
+            content: currentPlanContent,
+            version: planVersion,
+            tasks: revisedTasks,
+            tasksTotal: revisedTasks.length,
+            tasksCompleted: 0,
+          });
+          parsedTasks = revisedTasks;
+          responseText += revText;
+        }
+      }
+    } else {
+      this.eventBus.emitAutoModeEvent('plan_auto_approved', {
+        featureId,
+        projectPath,
+        branchName,
+        planContent,
+        planningMode,
+      });
+    }
+    await this.featureStateManager.updateFeaturePlanSpec(projectPath, featureId, {
+      status: 'approved',
+      approvedAt: new Date().toISOString(),
+      reviewedByUser: requiresApproval,
+    });
+    let tasksCompleted = 0;
+    if (parsedTasks.length > 0) {
+      const r = await this.executeTasksLoop(
+        options,
+        parsedTasks,
+        approvedPlanContent,
+        responseText,
+        scheduleWrite,
+        callbacks,
+        userFeedback
+      );
+      responseText = r.responseText;
+      tasksCompleted = r.tasksCompleted;
+    } else {
+      const r = await this.executeSingleAgentContinuation(
+        options,
+        approvedPlanContent,
+        userFeedback,
+        responseText
+      );
+      responseText = r.responseText;
+    }
+    return { responseText, tasksCompleted };
+  }
+
+  private buildExecOpts(o: AgentExecutionOptions, prompt: string, maxTurns: number) {
+    return {
+      prompt,
+      model: o.effectiveBareModel,
+      maxTurns,
+      cwd: o.workDir,
+      allowedTools: o.sdkOptions?.allowedTools as string[] | undefined,
+      abortController: o.abortController,
+      thinkingLevel: o.thinkingLevel,
+      reasoningEffort: o.reasoningEffort,
+      mcpServers:
+        o.mcpServers && Object.keys(o.mcpServers).length > 0
+          ? (o.mcpServers as Record<string, { command: string }>)
+          : undefined,
+      credentials: o.credentials,
+      claudeCompatibleProvider: o.claudeCompatibleProvider,
+      sdkSessionId: o.sdkSessionId,
+    };
+  }
+
+  private async executeSingleAgentContinuation(
+    options: AgentExecutionOptions,
+    planContent: string,
+    userFeedback: string | undefined,
+    initialResponseText: string
+  ): Promise<{ responseText: string }> {
+    const { featureId, branchName = null, provider } = options;
+    logger.info(`No parsed tasks, using single-agent execution for feature ${featureId}`);
+    const prompts = await getPromptCustomization(this.settingsService, '[AutoMode]');
+    const contPrompt = prompts.taskExecution.continuationAfterApprovalTemplate
+      .replace(/\{\{userFeedback\}\}/g, userFeedback || '')
+      .replace(/\{\{approvedPlan\}\}/g, planContent);
+    let responseText = initialResponseText;
+    for await (const msg of provider.executeQuery(
+      this.buildExecOpts(options, contPrompt, options.sdkOptions?.maxTurns ?? DEFAULT_MAX_TURNS)
+    )) {
+      if (msg.session_id && msg.session_id !== options.sdkSessionId) {
+        options.sdkSessionId = msg.session_id;
+      }
+      if (msg.type === 'assistant' && msg.message?.content)
+        for (const b of msg.message.content) {
+          if (b.type === 'text') {
+            responseText += b.text || '';
+            this.eventBus.emitAutoModeEvent('auto_mode_progress', {
+              featureId,
+              branchName,
+              content: b.text,
+            });
+          } else if (b.type === 'tool_use')
+            this.eventBus.emitAutoModeEvent('auto_mode_tool', {
+              featureId,
+              branchName,
+              tool: b.name,
+              input: b.input,
+            });
+        }
+      else if (msg.type === 'error') {
+        const cleanedError =
+          (msg.error || 'Unknown error during implementation')
+            .replace(/\x1b\[[0-9;]*m/g, '')
+            .replace(/^Error:\s*/i, '')
+            .trim() || 'Unknown error during implementation';
+        throw new Error(cleanedError);
+      } else if (msg.type === 'result' && msg.subtype === 'success')
+        responseText += msg.result || '';
+    }
+    return { responseText };
+  }
+}
diff --git a/temp_repo/apps/server/src/services/agent-service.ts b/temp_repo/apps/server/src/services/agent-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..443fff040b250c6f99db93dfbe994446c6255b72
--- /dev/null
+++ b/temp_repo/apps/server/src/services/agent-service.ts
@@ -0,0 +1,1249 @@
+/**
+ * Agent Service - Runs AI agents via provider architecture
+ * Manages conversation sessions and streams responses via WebSocket
+ */
+
+import path from 'path';
+import * as secureFs from '../lib/secure-fs.js';
+import type { EventEmitter } from '../lib/events.js';
+import type { ExecuteOptions, ThinkingLevel, ReasoningEffort } from '@automaker/types';
+import { stripProviderPrefix } from '@automaker/types';
+import {
+  readImageAsBase64,
+  buildPromptWithImages,
+  isAbortError,
+  loadContextFiles,
+  createLogger,
+  classifyError,
+} from '@automaker/utils';
+import { ProviderFactory } from '../providers/provider-factory.js';
+import { createChatOptions, validateWorkingDirectory } from '../lib/sdk-options.js';
+import type { SettingsService } from './settings-service.js';
+import {
+  getAutoLoadClaudeMdSetting,
+  getUseClaudeCodeSystemPromptSetting,
+  filterClaudeMdFromContext,
+  getMCPServersFromSettings,
+  getPromptCustomization,
+  getSkillsConfiguration,
+  getSubagentsConfiguration,
+  getCustomSubagents,
+  getProviderByModelId,
+  getDefaultMaxTurnsSetting,
+} from '../lib/settings-helpers.js';
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  images?: Array<{
+    data: string;
+    mimeType: string;
+    filename: string;
+  }>;
+  timestamp: string;
+  isError?: boolean;
+}
+
+interface QueuedPrompt {
+  id: string;
+  message: string;
+  imagePaths?: string[];
+  model?: string;
+  thinkingLevel?: ThinkingLevel;
+  addedAt: string;
+}
+
+interface Session {
+  messages: Message[];
+  isRunning: boolean;
+  abortController: AbortController | null;
+  workingDirectory: string;
+  model?: string;
+  thinkingLevel?: ThinkingLevel; // Thinking level for Claude models
+  reasoningEffort?: ReasoningEffort; // Reasoning effort for Codex models
+  sdkSessionId?: string; // Claude SDK session ID for conversation continuity
+  promptQueue: QueuedPrompt[]; // Queue of prompts to auto-run after current task
+}
+
+interface SessionMetadata {
+  id: string;
+  name: string;
+  projectPath?: string;
+  workingDirectory: string;
+  createdAt: string;
+  updatedAt: string;
+  archived?: boolean;
+  tags?: string[];
+  model?: string;
+  sdkSessionId?: string; // Claude SDK session ID for conversation continuity
+}
+
+export class AgentService {
+  private sessions = new Map<string, Session>();
+  private stateDir: string;
+  private metadataFile: string;
+  private events: EventEmitter;
+  private settingsService: SettingsService | null = null;
+  private logger = createLogger('AgentService');
+
+  constructor(dataDir: string, events: EventEmitter, settingsService?: SettingsService) {
+    this.stateDir = path.join(dataDir, 'agent-sessions');
+    this.metadataFile = path.join(dataDir, 'sessions-metadata.json');
+    this.events = events;
+    this.settingsService = settingsService ?? null;
+  }
+
+  async initialize(): Promise<void> {
+    await secureFs.mkdir(this.stateDir, { recursive: true });
+  }
+
+  /**
+   * Detect provider-side session errors (session not found, expired, etc.).
+   * Used to decide whether to clear a stale sdkSessionId.
+   */
+  private isStaleSessionError(rawErrorText: string): boolean {
+    const errorLower = rawErrorText.toLowerCase();
+    return (
+      errorLower.includes('session not found') ||
+      errorLower.includes('session expired') ||
+      errorLower.includes('invalid session') ||
+      errorLower.includes('no such session')
+    );
+  }
+
+  /**
+   * Start or resume a conversation
+   */
+  async startConversation({
+    sessionId,
+    workingDirectory,
+  }: {
+    sessionId: string;
+    workingDirectory?: string;
+  }) {
+    // ensureSession handles loading from disk if not in memory.
+    // For startConversation, we always want to create a session even if
+    // metadata doesn't exist yet (new session), so we fall back to creating one.
+    let session = await this.ensureSession(sessionId, workingDirectory);
+    if (!session) {
+      // Session doesn't exist on disk either — create a fresh in-memory session.
+      const effectiveWorkingDirectory = workingDirectory || process.cwd();
+      const resolvedWorkingDirectory = path.resolve(effectiveWorkingDirectory);
+      validateWorkingDirectory(resolvedWorkingDirectory);
+
+      session = {
+        messages: [],
+        isRunning: false,
+        abortController: null,
+        workingDirectory: resolvedWorkingDirectory,
+        promptQueue: [],
+      };
+      this.sessions.set(sessionId, session);
+    }
+
+    return {
+      success: true,
+      messages: session.messages,
+      sessionId,
+    };
+  }
+
+  /**
+   * Ensure a session is loaded into memory.
+   *
+   * Sessions may exist on disk (in metadata and session files) but not be
+   * present in the in-memory Map — for example after a server restart, or
+   * when a client calls sendMessage before explicitly calling startConversation.
+   *
+   * This helper transparently loads the session from disk when it is missing
+   * from memory, eliminating "session not found" errors for sessions that
+   * were previously created but not yet initialized in memory.
+   *
+   * If both metadata and session files are missing, the session truly doesn't
+   * exist. A detailed diagnostic log is emitted so developers can track down
+   * how the invalid session ID was generated.
+   *
+   * @returns The in-memory Session object, or null if the session doesn't exist at all
+   */
+  private async ensureSession(
+    sessionId: string,
+    workingDirectory?: string
+  ): Promise<Session | null> {
+    const existing = this.sessions.get(sessionId);
+    if (existing) {
+      return existing;
+    }
+
+    // Try to load from disk — the session may have been created earlier
+    // (e.g. via createSession) but never initialized in memory.
+    let metadata: Record<string, SessionMetadata>;
+    let messages: Message[];
+    try {
+      [metadata, messages] = await Promise.all([this.loadMetadata(), this.loadSession(sessionId)]);
+    } catch (error) {
+      // Disk read failure should not be treated as "session not found" —
+      // it's a transient I/O problem. Log and return null so callers can
+      // surface an appropriate error message.
+      this.logger.error(
+        `Failed to load session ${sessionId} from disk (I/O error — NOT a missing session):`,
+        error
+      );
+      return null;
+    }
+
+    const sessionMetadata = metadata[sessionId];
+
+    // If there's no metadata AND no persisted messages, the session truly doesn't exist.
+    // Log diagnostic info to help track down how we ended up with an invalid session ID.
+    if (!sessionMetadata && messages.length === 0) {
+      this.logger.warn(
+        `Session "${sessionId}" not found: no metadata and no persisted messages. ` +
+          `This can happen when a session ID references a deleted/expired session, ` +
+          `or when the server restarted and the session was never persisted to disk. ` +
+          `Available session IDs in metadata: [${Object.keys(metadata).slice(0, 10).join(', ')}${Object.keys(metadata).length > 10 ? '...' : ''}]`
+      );
+      return null;
+    }
+
+    const effectiveWorkingDirectory =
+      workingDirectory || sessionMetadata?.workingDirectory || process.cwd();
+    const resolvedWorkingDirectory = path.resolve(effectiveWorkingDirectory);
+
+    // Validate that the working directory is allowed using centralized validation
+    try {
+      validateWorkingDirectory(resolvedWorkingDirectory);
+    } catch (validationError) {
+      this.logger.warn(
+        `Session "${sessionId}": working directory "${resolvedWorkingDirectory}" is not allowed — ` +
+          `returning null so callers treat it as a missing session. Error: ${(validationError as Error).message}`
+      );
+      return null;
+    }
+
+    // Load persisted queue
+    const promptQueue = await this.loadQueueState(sessionId);
+
+    const session: Session = {
+      messages,
+      isRunning: false,
+      abortController: null,
+      workingDirectory: resolvedWorkingDirectory,
+      sdkSessionId: sessionMetadata?.sdkSessionId,
+      promptQueue,
+    };
+
+    this.sessions.set(sessionId, session);
+    this.logger.info(
+      `Auto-initialized session ${sessionId} from disk ` +
+        `(${messages.length} messages, sdkSessionId: ${sessionMetadata?.sdkSessionId ? 'present' : 'none'})`
+    );
+    return session;
+  }
+
+  /**
+   * Send a message to the agent and stream responses
+   */
+  async sendMessage({
+    sessionId,
+    message,
+    workingDirectory,
+    imagePaths,
+    model,
+    thinkingLevel,
+    reasoningEffort,
+  }: {
+    sessionId: string;
+    message: string;
+    workingDirectory?: string;
+    imagePaths?: string[];
+    model?: string;
+    thinkingLevel?: ThinkingLevel;
+    reasoningEffort?: ReasoningEffort;
+  }) {
+    const session = await this.ensureSession(sessionId, workingDirectory);
+    if (!session) {
+      this.logger.error(
+        `Session not found: ${sessionId}. ` +
+          `The session may have been deleted, never created, or lost after a server restart. ` +
+          `In-memory sessions: ${this.sessions.size}, requested ID: ${sessionId}`
+      );
+      throw new Error(
+        `Session ${sessionId} not found. ` +
+          `The session may have been deleted or expired. ` +
+          `Please create a new session and try again.`
+      );
+    }
+
+    if (session.isRunning) {
+      this.logger.error('ERROR: Agent already running for session:', sessionId);
+      throw new Error('Agent is already processing a message');
+    }
+
+    // Update session model, thinking level, and reasoning effort if provided
+    if (model) {
+      session.model = model;
+      await this.updateSession(sessionId, { model });
+    }
+    if (thinkingLevel !== undefined) {
+      session.thinkingLevel = thinkingLevel;
+    }
+    if (reasoningEffort !== undefined) {
+      session.reasoningEffort = reasoningEffort;
+    }
+
+    // Validate vision support before processing images
+    const effectiveModel = model || session.model;
+    if (imagePaths && imagePaths.length > 0 && effectiveModel) {
+      const supportsVision = ProviderFactory.modelSupportsVision(effectiveModel);
+      if (!supportsVision) {
+        throw new Error(
+          `This model (${effectiveModel}) does not support image input. ` +
+            `Please switch to a model that supports vision, or remove the images and try again.`
+        );
+      }
+    }
+
+    // Read images and convert to base64
+    const images: Message['images'] = [];
+    if (imagePaths && imagePaths.length > 0) {
+      for (const imagePath of imagePaths) {
+        try {
+          const imageData = await readImageAsBase64(imagePath);
+          images.push({
+            data: imageData.base64,
+            mimeType: imageData.mimeType,
+            filename: imageData.filename,
+          });
+        } catch (error) {
+          this.logger.error(`Failed to load image ${imagePath}:`, error);
+        }
+      }
+    }
+
+    // Add user message
+    const userMessage: Message = {
+      id: this.generateId(),
+      role: 'user',
+      content: message,
+      images: images.length > 0 ? images : undefined,
+      timestamp: new Date().toISOString(),
+    };
+
+    session.messages.push(userMessage);
+    session.isRunning = true;
+    session.abortController = new AbortController();
+
+    // Emit started event so UI can show thinking indicator
+    this.emitAgentEvent(sessionId, {
+      type: 'started',
+    });
+
+    // Emit user message event
+    this.emitAgentEvent(sessionId, {
+      type: 'message',
+      message: userMessage,
+    });
+
+    await this.saveSession(sessionId, session.messages);
+
+    try {
+      // Determine the effective working directory for context loading
+      const effectiveWorkDir = workingDirectory || session.workingDirectory;
+
+      // Load autoLoadClaudeMd setting (project setting takes precedence over global)
+      const autoLoadClaudeMd = await getAutoLoadClaudeMdSetting(
+        effectiveWorkDir,
+        this.settingsService,
+        '[AgentService]'
+      );
+
+      // Load useClaudeCodeSystemPrompt setting (project setting takes precedence over global)
+      // Wrap in try/catch so transient settingsService errors don't abort message processing
+      let useClaudeCodeSystemPrompt = true;
+      try {
+        useClaudeCodeSystemPrompt = await getUseClaudeCodeSystemPromptSetting(
+          effectiveWorkDir,
+          this.settingsService,
+          '[AgentService]'
+        );
+      } catch (err) {
+        this.logger.error(
+          '[AgentService] getUseClaudeCodeSystemPromptSetting failed, defaulting to true',
+          err
+        );
+      }
+
+      // Load MCP servers from settings (global setting only)
+      const mcpServers = await getMCPServersFromSettings(this.settingsService, '[AgentService]');
+
+      // Get Skills configuration from settings
+      const skillsConfig = this.settingsService
+        ? await getSkillsConfiguration(this.settingsService)
+        : { enabled: false, sources: [] as Array<'user' | 'project'>, shouldIncludeInTools: false };
+
+      // Get Subagents configuration from settings
+      const subagentsConfig = this.settingsService
+        ? await getSubagentsConfiguration(this.settingsService)
+        : { enabled: false, sources: [] as Array<'user' | 'project'>, shouldIncludeInTools: false };
+
+      // Get custom subagents from settings (merge global + project-level) only if enabled
+      const customSubagents =
+        this.settingsService && subagentsConfig.enabled
+          ? await getCustomSubagents(this.settingsService, effectiveWorkDir)
+          : undefined;
+
+      // Get credentials for API calls
+      const credentials = await this.settingsService?.getCredentials();
+
+      // Try to find a provider for the model (if it's a provider model like "GLM-4.7")
+      // This allows users to select provider models in the Agent Runner UI
+      let claudeCompatibleProvider: import('@automaker/types').ClaudeCompatibleProvider | undefined;
+      let providerResolvedModel: string | undefined;
+      const requestedModel = model || session.model;
+      if (requestedModel && this.settingsService) {
+        const providerResult = await getProviderByModelId(
+          requestedModel,
+          this.settingsService,
+          '[AgentService]'
+        );
+        if (providerResult.provider) {
+          claudeCompatibleProvider = providerResult.provider;
+          providerResolvedModel = providerResult.resolvedModel;
+          this.logger.info(
+            `[AgentService] Using provider "${providerResult.provider.name}" for model "${requestedModel}"` +
+              (providerResolvedModel ? ` -> resolved to "${providerResolvedModel}"` : '')
+          );
+        }
+      }
+
+      let combinedSystemPrompt: string | undefined;
+      // Load project context files (CLAUDE.md, CODE_QUALITY.md, etc.) and memory files
+      // Use the user's message as task context for smart memory selection
+      const contextResult = await loadContextFiles({
+        projectPath: effectiveWorkDir,
+        fsModule: secureFs as Parameters<typeof loadContextFiles>[0]['fsModule'],
+        taskContext: {
+          title: message.substring(0, 200), // Use first 200 chars as title
+          description: message,
+        },
+      });
+
+      // When autoLoadClaudeMd is enabled, filter out CLAUDE.md to avoid duplication
+      // (SDK handles CLAUDE.md via settingSources), but keep other context files like CODE_QUALITY.md
+      const contextFilesPrompt = filterClaudeMdFromContext(contextResult, autoLoadClaudeMd);
+
+      // Build combined system prompt with base prompt and context files
+      const baseSystemPrompt = await this.getSystemPrompt();
+      combinedSystemPrompt = contextFilesPrompt
+        ? `${contextFilesPrompt}\n\n${baseSystemPrompt}`
+        : baseSystemPrompt;
+
+      // Build SDK options using centralized configuration
+      // Use thinking level and reasoning effort from request, or fall back to session's stored values
+      const effectiveThinkingLevel = thinkingLevel ?? session.thinkingLevel;
+      const effectiveReasoningEffort = reasoningEffort ?? session.reasoningEffort;
+
+      // When using a custom provider (GLM, MiniMax), use resolved Claude model for SDK config
+      // (thinking level budgets, allowedTools) but we MUST pass the provider's model ID
+      // (e.g. "GLM-4.7") to the API - not "claude-sonnet-4-6" which causes "model not found"
+      const modelForSdk = providerResolvedModel || model;
+      const sessionModelForSdk = providerResolvedModel ? undefined : session.model;
+
+      // Read user-configured max turns from settings
+      const userMaxTurns = await getDefaultMaxTurnsSetting(this.settingsService, '[AgentService]');
+
+      const sdkOptions = createChatOptions({
+        cwd: effectiveWorkDir,
+        model: modelForSdk,
+        sessionModel: sessionModelForSdk,
+        systemPrompt: combinedSystemPrompt,
+        abortController: session.abortController!,
+        autoLoadClaudeMd,
+        useClaudeCodeSystemPrompt,
+        thinkingLevel: effectiveThinkingLevel, // Pass thinking level for Claude models
+        maxTurns: userMaxTurns, // User-configured max turns from settings
+        mcpServers: Object.keys(mcpServers).length > 0 ? mcpServers : undefined,
+      });
+
+      // Extract model, maxTurns, and allowedTools from SDK options
+      const effectiveModel = sdkOptions.model!;
+      const maxTurns = sdkOptions.maxTurns;
+      let allowedTools = sdkOptions.allowedTools as string[] | undefined;
+
+      // Build merged settingSources array using Set for automatic deduplication
+      const sdkSettingSources = (sdkOptions.settingSources ?? []).filter(
+        (source): source is 'user' | 'project' => source === 'user' || source === 'project'
+      );
+      const skillSettingSources = skillsConfig.enabled ? skillsConfig.sources : [];
+      const settingSources = [...new Set([...sdkSettingSources, ...skillSettingSources])];
+
+      // Enhance allowedTools with Skills and Subagents tools
+      // These tools are not in the provider's default set - they're added dynamically based on settings
+      const needsSkillTool = skillsConfig.shouldIncludeInTools;
+      const needsTaskTool =
+        subagentsConfig.shouldIncludeInTools &&
+        customSubagents &&
+        Object.keys(customSubagents).length > 0;
+
+      // Base tools that match the provider's default set
+      const baseTools = [
+        'Read',
+        'Write',
+        'Edit',
+        'MultiEdit',
+        'Glob',
+        'Grep',
+        'LS',
+        'Bash',
+        'WebSearch',
+        'WebFetch',
+        'TodoWrite',
+      ];
+
+      if (allowedTools) {
+        allowedTools = [...allowedTools]; // Create a copy to avoid mutating SDK options
+        // Add Skill tool if skills are enabled
+        if (needsSkillTool && !allowedTools.includes('Skill')) {
+          allowedTools.push('Skill');
+        }
+        // Add Task tool if custom subagents are configured
+        if (needsTaskTool && !allowedTools.includes('Task')) {
+          allowedTools.push('Task');
+        }
+      } else if (needsSkillTool || needsTaskTool) {
+        // If no allowedTools specified but we need to add Skill/Task tools,
+        // build the full list including base tools
+        allowedTools = [...baseTools];
+        if (needsSkillTool) {
+          allowedTools.push('Skill');
+        }
+        if (needsTaskTool) {
+          allowedTools.push('Task');
+        }
+      }
+
+      // Get provider for this model (with prefix)
+      // When using custom provider (GLM, MiniMax), requestedModel routes to Claude provider
+      const modelForProvider = claudeCompatibleProvider
+        ? (requestedModel ?? effectiveModel)
+        : effectiveModel;
+      const provider = ProviderFactory.getProviderForModel(modelForProvider);
+
+      // Strip provider prefix - providers should receive bare model IDs
+      // CRITICAL: For custom providers (GLM, MiniMax), pass the provider's model ID (e.g. "GLM-4.7")
+      // to the API, NOT the resolved Claude model - otherwise we get "model not found"
+      const bareModel: string = claudeCompatibleProvider
+        ? (requestedModel ?? effectiveModel)
+        : stripProviderPrefix(effectiveModel);
+
+      // Build options for provider
+      const conversationHistory = session.messages
+        .slice(0, -1)
+        .map((msg) => ({
+          role: msg.role,
+          content: msg.content,
+        }))
+        .filter((msg) => msg.content.trim().length > 0);
+
+      const options: ExecuteOptions = {
+        prompt: '', // Will be set below based on images
+        model: bareModel, // Bare model ID (e.g., "gpt-5.1-codex-max", "composer-1")
+        originalModel: effectiveModel, // Original with prefix for logging (e.g., "codex-gpt-5.1-codex-max")
+        cwd: effectiveWorkDir,
+        systemPrompt: sdkOptions.systemPrompt,
+        maxTurns: maxTurns,
+        allowedTools: allowedTools,
+        abortController: session.abortController!,
+        conversationHistory:
+          conversationHistory && conversationHistory.length > 0 ? conversationHistory : undefined,
+        settingSources: settingSources.length > 0 ? settingSources : undefined,
+        sdkSessionId: session.sdkSessionId, // Pass SDK session ID for resuming
+        mcpServers: Object.keys(mcpServers).length > 0 ? mcpServers : undefined, // Pass MCP servers configuration
+        agents: customSubagents, // Pass custom subagents for task delegation
+        thinkingLevel: effectiveThinkingLevel, // Pass thinking level for Claude models
+        reasoningEffort: effectiveReasoningEffort, // Pass reasoning effort for Codex models
+        credentials, // Pass credentials for resolving 'credentials' apiKeySource
+        claudeCompatibleProvider, // Pass provider for alternative endpoint configuration (GLM, MiniMax, etc.)
+      };
+
+      // Build prompt content with images
+      const { content: promptContent } = await buildPromptWithImages(
+        message,
+        imagePaths,
+        undefined, // no workDir for agent service
+        true // include image paths in text
+      );
+
+      // Set the prompt in options
+      options.prompt = promptContent;
+
+      // Execute via provider
+      const stream = provider.executeQuery(options);
+
+      let currentAssistantMessage: Message | null = null;
+      let responseText = '';
+      const toolUses: Array<{ name: string; input: unknown }> = [];
+      const toolNamesById = new Map<string, string>();
+
+      for await (const msg of stream) {
+        // Capture SDK session ID from any message and persist it.
+        // Update when:
+        //  - No session ID set yet (first message in a new session)
+        //  - The provider returned a *different* session ID (e.g., after a
+        //    "Session not found" recovery where the provider started a fresh
+        //    session — the stale ID must be replaced with the new one)
+        if (msg.session_id && msg.session_id !== session.sdkSessionId) {
+          session.sdkSessionId = msg.session_id;
+          // Persist the SDK session ID to ensure conversation continuity across server restarts
+          await this.updateSession(sessionId, { sdkSessionId: msg.session_id });
+        }
+
+        if (msg.type === 'assistant') {
+          if (msg.message?.content) {
+            for (const block of msg.message.content) {
+              if (block.type === 'text') {
+                responseText += block.text;
+
+                if (!currentAssistantMessage) {
+                  currentAssistantMessage = {
+                    id: this.generateId(),
+                    role: 'assistant',
+                    content: responseText,
+                    timestamp: new Date().toISOString(),
+                  };
+                  session.messages.push(currentAssistantMessage);
+                } else {
+                  currentAssistantMessage.content = responseText;
+                }
+
+                this.emitAgentEvent(sessionId, {
+                  type: 'stream',
+                  messageId: currentAssistantMessage.id,
+                  content: responseText,
+                  isComplete: false,
+                });
+              } else if (block.type === 'tool_use') {
+                const toolUse = {
+                  name: block.name || 'unknown',
+                  input: block.input,
+                };
+                toolUses.push(toolUse);
+                if (block.tool_use_id) {
+                  toolNamesById.set(block.tool_use_id, toolUse.name);
+                }
+
+                this.emitAgentEvent(sessionId, {
+                  type: 'tool_use',
+                  tool: toolUse,
+                });
+              } else if (block.type === 'tool_result') {
+                const toolUseId = block.tool_use_id;
+                const toolName = toolUseId ? toolNamesById.get(toolUseId) : undefined;
+
+                // Normalize block.content to a string for the emitted event
+                const rawContent: unknown = block.content;
+                let contentString: string;
+                if (typeof rawContent === 'string') {
+                  contentString = rawContent;
+                } else if (Array.isArray(rawContent)) {
+                  // Extract text from content blocks (TextBlock, ImageBlock, etc.)
+                  contentString = rawContent
+                    .map((part: { text?: string; type?: string }) => {
+                      if (typeof part === 'string') return part;
+                      if (part.text) return part.text;
+                      // For non-text blocks (e.g., images), represent as type indicator
+                      if (part.type) return `[${part.type}]`;
+                      return JSON.stringify(part);
+                    })
+                    .join('\n');
+                } else if (rawContent !== undefined && rawContent !== null) {
+                  contentString = JSON.stringify(rawContent);
+                } else {
+                  contentString = '';
+                }
+
+                this.emitAgentEvent(sessionId, {
+                  type: 'tool_result',
+                  tool: {
+                    name: toolName || 'unknown',
+                    input: {
+                      toolUseId,
+                      content: contentString,
+                    },
+                  },
+                });
+              }
+            }
+          }
+        } else if (msg.type === 'result') {
+          if (msg.subtype === 'success' && msg.result) {
+            if (currentAssistantMessage) {
+              currentAssistantMessage.content = msg.result;
+              responseText = msg.result;
+            }
+          }
+
+          this.emitAgentEvent(sessionId, {
+            type: 'complete',
+            messageId: currentAssistantMessage?.id,
+            content: responseText,
+            toolUses,
+          });
+        } else if (msg.type === 'error') {
+          // Some providers (like Codex CLI/SaaS or Cursor CLI) surface failures as
+          // streamed error messages instead of throwing. Handle these here so the
+          // Agent Runner UX matches the Claude/Cursor behavior without changing
+          // their provider implementations.
+
+          // Clean error text: strip ANSI escape codes and the redundant "Error: "
+          // prefix that CLI providers (especially OpenCode) add to stderr output.
+          // The OpenCode provider strips these in normalizeEvent/executeQuery, but
+          // we also strip here as a defense-in-depth measure.
+          //
+          // Without stripping the "Error: " prefix, the wrapping at line ~647
+          // (`content: \`Error: ${enhancedText}\``) produces double-prefixed text:
+          // "Error: Error: Session not found" — confusing for the user.
+          const rawMsgError =
+            (typeof msg.error === 'string' && msg.error.trim()) ||
+            'Unexpected error from provider during agent execution.';
+          let rawErrorText = rawMsgError.replace(/\x1b\[[0-9;]*m/g, '').trim() || rawMsgError;
+          // Remove the CLI's "Error: " prefix to prevent double-wrapping
+          rawErrorText = rawErrorText.replace(/^Error:\s*/i, '').trim() || rawErrorText;
+
+          const errorInfo = classifyError(new Error(rawErrorText));
+
+          // Detect provider-side session errors and proactively clear the stale
+          // sdkSessionId so the next attempt starts a fresh provider session.
+          // This handles providers that don't have built-in session recovery
+          // (unlike OpenCode which auto-retries without the session flag).
+          if (session.sdkSessionId && this.isStaleSessionError(rawErrorText)) {
+            this.logger.info(
+              `Clearing stale sdkSessionId for session ${sessionId} after provider session error`
+            );
+            session.sdkSessionId = undefined;
+            await this.clearSdkSessionId(sessionId);
+          }
+
+          // Keep the provider-supplied text intact (Codex already includes helpful tips),
+          // only add a small rate-limit hint when we can detect it.
+          const enhancedText = errorInfo.isRateLimit
+            ? `${rawErrorText}\n\nTip: It looks like you hit a rate limit. Try waiting a bit or reducing concurrent Agent Runner / Auto Mode tasks.`
+            : rawErrorText;
+
+          this.logger.error('Provider error during agent execution:', {
+            type: errorInfo.type,
+            message: errorInfo.message,
+          });
+
+          // Mark session as no longer running so the UI and queue stay in sync
+          session.isRunning = false;
+          session.abortController = null;
+
+          const errorMessage: Message = {
+            id: this.generateId(),
+            role: 'assistant',
+            content: `Error: ${enhancedText}`,
+            timestamp: new Date().toISOString(),
+            isError: true,
+          };
+
+          session.messages.push(errorMessage);
+          await this.saveSession(sessionId, session.messages);
+
+          this.emitAgentEvent(sessionId, {
+            type: 'error',
+            error: enhancedText,
+            message: errorMessage,
+          });
+
+          // Don't continue streaming after an error message
+          return {
+            success: false,
+          };
+        }
+      }
+
+      await this.saveSession(sessionId, session.messages);
+
+      session.isRunning = false;
+      session.abortController = null;
+
+      // Process next item in queue after completion
+      setImmediate(() => this.processNextInQueue(sessionId));
+
+      return {
+        success: true,
+        message: currentAssistantMessage,
+      };
+    } catch (error) {
+      if (isAbortError(error)) {
+        session.isRunning = false;
+        session.abortController = null;
+        return { success: false, aborted: true };
+      }
+
+      this.logger.error('Error:', error);
+
+      // Strip ANSI escape codes and the "Error: " prefix from thrown error
+      // messages so the UI receives clean text without double-prefixing.
+      let rawThrownMsg = ((error as Error).message || '').replace(/\x1b\[[0-9;]*m/g, '').trim();
+      rawThrownMsg = rawThrownMsg.replace(/^Error:\s*/i, '').trim() || rawThrownMsg;
+      const thrownErrorMsg = rawThrownMsg.toLowerCase();
+
+      // Check if the thrown error is a provider-side session error.
+      // Clear the stale sdkSessionId so the next retry starts fresh.
+      if (session.sdkSessionId && this.isStaleSessionError(rawThrownMsg)) {
+        this.logger.info(
+          `Clearing stale sdkSessionId for session ${sessionId} after thrown session error`
+        );
+        session.sdkSessionId = undefined;
+        await this.clearSdkSessionId(sessionId);
+      }
+
+      session.isRunning = false;
+      session.abortController = null;
+
+      const cleanErrorMsg = rawThrownMsg || (error as Error).message;
+      const errorMessage: Message = {
+        id: this.generateId(),
+        role: 'assistant',
+        content: `Error: ${cleanErrorMsg}`,
+        timestamp: new Date().toISOString(),
+        isError: true,
+      };
+
+      session.messages.push(errorMessage);
+      await this.saveSession(sessionId, session.messages);
+
+      this.emitAgentEvent(sessionId, {
+        type: 'error',
+        error: cleanErrorMsg,
+        message: errorMessage,
+      });
+
+      throw error;
+    }
+  }
+
+  /**
+   * Get conversation history
+   */
+  async getHistory(sessionId: string) {
+    const session = await this.ensureSession(sessionId);
+    if (!session) {
+      return { success: false, error: 'Session not found' };
+    }
+
+    return {
+      success: true,
+      messages: session.messages,
+      isRunning: session.isRunning,
+    };
+  }
+
+  /**
+   * Stop current agent execution
+   */
+  async stopExecution(sessionId: string) {
+    const session = await this.ensureSession(sessionId);
+    if (!session) {
+      return { success: false, error: 'Session not found' };
+    }
+
+    if (session.abortController) {
+      session.abortController.abort();
+      session.isRunning = false;
+      session.abortController = null;
+    }
+
+    return { success: true };
+  }
+
+  /**
+   * Clear conversation history
+   */
+  async clearSession(sessionId: string) {
+    const session = this.sessions.get(sessionId);
+    if (session) {
+      session.messages = [];
+      session.isRunning = false;
+      session.sdkSessionId = undefined; // Clear stale provider session ID to prevent "Session not found" errors
+      await this.saveSession(sessionId, []);
+    }
+
+    // Clear the sdkSessionId from persisted metadata so it doesn't get
+    // reloaded by ensureSession() after a server restart.
+    // This prevents "Session not found" errors when the provider-side session
+    // no longer exists (e.g., OpenCode CLI sessions expire on disk).
+    await this.clearSdkSessionId(sessionId);
+
+    return { success: true };
+  }
+
+  // Session management
+
+  async loadSession(sessionId: string): Promise<Message[]> {
+    const sessionFile = path.join(this.stateDir, `${sessionId}.json`);
+
+    try {
+      const data = (await secureFs.readFile(sessionFile, 'utf-8')) as string;
+      return JSON.parse(data);
+    } catch {
+      return [];
+    }
+  }
+
+  async saveSession(sessionId: string, messages: Message[]): Promise<void> {
+    const sessionFile = path.join(this.stateDir, `${sessionId}.json`);
+
+    try {
+      await secureFs.writeFile(sessionFile, JSON.stringify(messages, null, 2), 'utf-8');
+      await this.updateSessionTimestamp(sessionId);
+    } catch (error) {
+      this.logger.error('Failed to save session:', error);
+    }
+  }
+
+  async loadMetadata(): Promise<Record<string, SessionMetadata>> {
+    try {
+      const data = (await secureFs.readFile(this.metadataFile, 'utf-8')) as string;
+      return JSON.parse(data);
+    } catch {
+      return {};
+    }
+  }
+
+  async saveMetadata(metadata: Record<string, SessionMetadata>): Promise<void> {
+    await secureFs.writeFile(this.metadataFile, JSON.stringify(metadata, null, 2), 'utf-8');
+  }
+
+  async updateSessionTimestamp(sessionId: string): Promise<void> {
+    const metadata = await this.loadMetadata();
+    if (metadata[sessionId]) {
+      metadata[sessionId].updatedAt = new Date().toISOString();
+      await this.saveMetadata(metadata);
+    }
+  }
+
+  async listSessions(includeArchived = false): Promise<SessionMetadata[]> {
+    const metadata = await this.loadMetadata();
+    let sessions = Object.values(metadata);
+
+    if (!includeArchived) {
+      sessions = sessions.filter((s) => !s.archived);
+    }
+
+    return sessions.sort(
+      (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+    );
+  }
+
+  async createSession(
+    name: string,
+    projectPath?: string,
+    workingDirectory?: string,
+    model?: string
+  ): Promise<SessionMetadata> {
+    const sessionId = this.generateId();
+    const metadata = await this.loadMetadata();
+
+    // Determine the effective working directory
+    const effectiveWorkingDirectory = workingDirectory || projectPath || process.cwd();
+    const resolvedWorkingDirectory = path.resolve(effectiveWorkingDirectory);
+
+    // Validate that the working directory is allowed using centralized validation
+    validateWorkingDirectory(resolvedWorkingDirectory);
+
+    // Validate that projectPath is allowed if provided
+    if (projectPath) {
+      validateWorkingDirectory(projectPath);
+    }
+
+    const session: SessionMetadata = {
+      id: sessionId,
+      name,
+      projectPath,
+      workingDirectory: resolvedWorkingDirectory,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      model,
+    };
+
+    metadata[sessionId] = session;
+    await this.saveMetadata(metadata);
+
+    return session;
+  }
+
+  async setSessionModel(sessionId: string, model: string): Promise<boolean> {
+    const session = this.sessions.get(sessionId);
+    if (session) {
+      session.model = model;
+      await this.updateSession(sessionId, { model });
+      return true;
+    }
+    return false;
+  }
+
+  async updateSession(
+    sessionId: string,
+    updates: Partial<SessionMetadata>
+  ): Promise<SessionMetadata | null> {
+    const metadata = await this.loadMetadata();
+    if (!metadata[sessionId]) return null;
+
+    metadata[sessionId] = {
+      ...metadata[sessionId],
+      ...updates,
+      updatedAt: new Date().toISOString(),
+    };
+
+    await this.saveMetadata(metadata);
+    return metadata[sessionId];
+  }
+
+  async archiveSession(sessionId: string): Promise<boolean> {
+    const result = await this.updateSession(sessionId, { archived: true });
+    return result !== null;
+  }
+
+  async unarchiveSession(sessionId: string): Promise<boolean> {
+    const result = await this.updateSession(sessionId, { archived: false });
+    return result !== null;
+  }
+
+  async deleteSession(sessionId: string): Promise<boolean> {
+    const metadata = await this.loadMetadata();
+    if (!metadata[sessionId]) return false;
+
+    delete metadata[sessionId];
+    await this.saveMetadata(metadata);
+
+    // Delete session file
+    try {
+      const sessionFile = path.join(this.stateDir, `${sessionId}.json`);
+      await secureFs.unlink(sessionFile);
+    } catch {
+      // File may not exist
+    }
+
+    // Clear from memory
+    this.sessions.delete(sessionId);
+
+    return true;
+  }
+
+  /**
+   * Clear the sdkSessionId from persisted metadata.
+   *
+   * This removes the provider-side session ID so that the next message
+   * starts a fresh provider session instead of trying to resume a stale one.
+   * Prevents "Session not found" errors from CLI providers like OpenCode
+   * when the provider-side session has been deleted or expired.
+   */
+  async clearSdkSessionId(sessionId: string): Promise<void> {
+    const metadata = await this.loadMetadata();
+    if (metadata[sessionId] && metadata[sessionId].sdkSessionId) {
+      delete metadata[sessionId].sdkSessionId;
+      metadata[sessionId].updatedAt = new Date().toISOString();
+      await this.saveMetadata(metadata);
+    }
+  }
+
+  // Queue management methods
+
+  /**
+   * Add a prompt to the queue for later execution
+   */
+  async addToQueue(
+    sessionId: string,
+    prompt: {
+      message: string;
+      imagePaths?: string[];
+      model?: string;
+      thinkingLevel?: ThinkingLevel;
+    }
+  ): Promise<{ success: boolean; queuedPrompt?: QueuedPrompt; error?: string }> {
+    const session = await this.ensureSession(sessionId);
+    if (!session) {
+      return { success: false, error: 'Session not found' };
+    }
+
+    const queuedPrompt: QueuedPrompt = {
+      id: this.generateId(),
+      message: prompt.message,
+      imagePaths: prompt.imagePaths,
+      model: prompt.model,
+      thinkingLevel: prompt.thinkingLevel,
+      addedAt: new Date().toISOString(),
+    };
+
+    session.promptQueue.push(queuedPrompt);
+    await this.saveQueueState(sessionId, session.promptQueue);
+
+    // Emit queue update event
+    this.emitAgentEvent(sessionId, {
+      type: 'queue_updated',
+      queue: session.promptQueue,
+    });
+
+    return { success: true, queuedPrompt };
+  }
+
+  /**
+   * Get the current queue for a session
+   */
+  async getQueue(
+    sessionId: string
+  ): Promise<{ success: boolean; queue?: QueuedPrompt[]; error?: string }> {
+    const session = await this.ensureSession(sessionId);
+    if (!session) {
+      return { success: false, error: 'Session not found' };
+    }
+    return { success: true, queue: session.promptQueue };
+  }
+
+  /**
+   * Remove a specific prompt from the queue
+   */
+  async removeFromQueue(
+    sessionId: string,
+    promptId: string
+  ): Promise<{ success: boolean; error?: string }> {
+    const session = await this.ensureSession(sessionId);
+    if (!session) {
+      return { success: false, error: 'Session not found' };
+    }
+
+    const index = session.promptQueue.findIndex((p) => p.id === promptId);
+    if (index === -1) {
+      return { success: false, error: 'Prompt not found in queue' };
+    }
+
+    session.promptQueue.splice(index, 1);
+    await this.saveQueueState(sessionId, session.promptQueue);
+
+    this.emitAgentEvent(sessionId, {
+      type: 'queue_updated',
+      queue: session.promptQueue,
+    });
+
+    return { success: true };
+  }
+
+  /**
+   * Clear all prompts from the queue
+   */
+  async clearQueue(sessionId: string): Promise<{ success: boolean; error?: string }> {
+    const session = await this.ensureSession(sessionId);
+    if (!session) {
+      return { success: false, error: 'Session not found' };
+    }
+
+    session.promptQueue = [];
+    await this.saveQueueState(sessionId, []);
+
+    this.emitAgentEvent(sessionId, {
+      type: 'queue_updated',
+      queue: [],
+    });
+
+    return { success: true };
+  }
+
+  /**
+   * Save queue state to disk for persistence
+   */
+  private async saveQueueState(sessionId: string, queue: QueuedPrompt[]): Promise<void> {
+    const queueFile = path.join(this.stateDir, `${sessionId}-queue.json`);
+    try {
+      await secureFs.writeFile(queueFile, JSON.stringify(queue, null, 2), 'utf-8');
+    } catch (error) {
+      this.logger.error('Failed to save queue state:', error);
+    }
+  }
+
+  /**
+   * Load queue state from disk
+   */
+  private async loadQueueState(sessionId: string): Promise<QueuedPrompt[]> {
+    const queueFile = path.join(this.stateDir, `${sessionId}-queue.json`);
+    try {
+      const data = (await secureFs.readFile(queueFile, 'utf-8')) as string;
+      return JSON.parse(data);
+    } catch {
+      return [];
+    }
+  }
+
+  /**
+   * Process the next item in the queue (called after task completion)
+   */
+  private async processNextInQueue(sessionId: string): Promise<void> {
+    const session = this.sessions.get(sessionId);
+    if (!session || session.promptQueue.length === 0) {
+      return;
+    }
+
+    // Don't process if already running
+    if (session.isRunning) {
+      return;
+    }
+
+    const nextPrompt = session.promptQueue.shift();
+    if (!nextPrompt) return;
+
+    await this.saveQueueState(sessionId, session.promptQueue);
+
+    this.emitAgentEvent(sessionId, {
+      type: 'queue_updated',
+      queue: session.promptQueue,
+    });
+
+    try {
+      await this.sendMessage({
+        sessionId,
+        message: nextPrompt.message,
+        imagePaths: nextPrompt.imagePaths,
+        model: nextPrompt.model,
+        thinkingLevel: nextPrompt.thinkingLevel,
+      });
+    } catch (error) {
+      this.logger.error('Failed to process queued prompt:', error);
+      this.emitAgentEvent(sessionId, {
+        type: 'queue_error',
+        error: (error as Error).message,
+        promptId: nextPrompt.id,
+      });
+    }
+  }
+
+  /**
+   * Emit an event to the agent stream (private, used internally).
+   */
+  private emitAgentEvent(sessionId: string, data: Record<string, unknown>): void {
+    this.events.emit('agent:stream', { sessionId, ...data });
+  }
+
+  /**
+   * Emit an error event for a session.
+   *
+   * Public method so that route handlers can surface errors to the UI
+   * even when sendMessage() throws before it can emit its own error event
+   * (e.g., when the session is not found and no in-memory session exists).
+   */
+  emitSessionError(sessionId: string, error: string): void {
+    this.events.emit('agent:stream', { sessionId, type: 'error', error });
+  }
+
+  private async getSystemPrompt(): Promise<string> {
+    // Load from settings (no caching - allows hot reload of custom prompts)
+    const prompts = await getPromptCustomization(this.settingsService, '[AgentService]');
+    return prompts.agent.systemPrompt;
+  }
+
+  private generateId(): string {
+    return `msg_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
+  }
+}
diff --git a/temp_repo/apps/server/src/services/auto-loop-coordinator.ts b/temp_repo/apps/server/src/services/auto-loop-coordinator.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ef4a91557866a5bcbdeb3402bb5af00aadcf1b4b
--- /dev/null
+++ b/temp_repo/apps/server/src/services/auto-loop-coordinator.ts
@@ -0,0 +1,527 @@
+/**
+ * AutoLoopCoordinator - Manages the auto-mode loop lifecycle and failure tracking
+ */
+
+import type { Feature } from '@automaker/types';
+import { createLogger, classifyError } from '@automaker/utils';
+import { areDependenciesSatisfied } from '@automaker/dependency-resolver';
+import type { TypedEventBus } from './typed-event-bus.js';
+import type { ConcurrencyManager } from './concurrency-manager.js';
+import type { SettingsService } from './settings-service.js';
+import { DEFAULT_MAX_CONCURRENCY } from '@automaker/types';
+
+const logger = createLogger('AutoLoopCoordinator');
+
+const CONSECUTIVE_FAILURE_THRESHOLD = 3;
+const FAILURE_WINDOW_MS = 60000;
+
+// Sleep intervals for the auto-loop (in milliseconds)
+const SLEEP_INTERVAL_CAPACITY_MS = 5000;
+const SLEEP_INTERVAL_IDLE_MS = 10000;
+const SLEEP_INTERVAL_NORMAL_MS = 2000;
+const SLEEP_INTERVAL_ERROR_MS = 5000;
+
+export interface AutoModeConfig {
+  maxConcurrency: number;
+  useWorktrees: boolean;
+  projectPath: string;
+  branchName: string | null;
+}
+
+export interface ProjectAutoLoopState {
+  abortController: AbortController;
+  config: AutoModeConfig;
+  isRunning: boolean;
+  consecutiveFailures: { timestamp: number; error: string }[];
+  pausedDueToFailures: boolean;
+  hasEmittedIdleEvent: boolean;
+  branchName: string | null;
+}
+
+/**
+ * Generate a unique key for a worktree auto-loop instance.
+ *
+ * When branchName is null, this represents the main worktree (uses '__main__' sentinel).
+ * The string 'main' is also normalized to '__main__' for consistency.
+ * Named branches always use their exact name.
+ */
+export function getWorktreeAutoLoopKey(projectPath: string, branchName: string | null): string {
+  const normalizedBranch = branchName === 'main' ? null : branchName;
+  return `${projectPath}::${normalizedBranch ?? '__main__'}`;
+}
+
+export type ExecuteFeatureFn = (
+  projectPath: string,
+  featureId: string,
+  useWorktrees: boolean,
+  isAutoMode: boolean
+) => Promise<void>;
+export type LoadPendingFeaturesFn = (
+  projectPath: string,
+  branchName: string | null
+) => Promise<Feature[]>;
+export type SaveExecutionStateFn = (
+  projectPath: string,
+  branchName: string | null,
+  maxConcurrency: number
+) => Promise<void>;
+export type ClearExecutionStateFn = (
+  projectPath: string,
+  branchName: string | null
+) => Promise<void>;
+export type ResetStuckFeaturesFn = (projectPath: string) => Promise<void>;
+export type IsFeatureFinishedFn = (feature: Feature) => boolean;
+export type LoadAllFeaturesFn = (projectPath: string) => Promise<Feature[]>;
+
+export class AutoLoopCoordinator {
+  private autoLoopsByProject = new Map<string, ProjectAutoLoopState>();
+
+  constructor(
+    private eventBus: TypedEventBus,
+    private concurrencyManager: ConcurrencyManager,
+    private settingsService: SettingsService | null,
+    private executeFeatureFn: ExecuteFeatureFn,
+    private loadPendingFeaturesFn: LoadPendingFeaturesFn,
+    private saveExecutionStateFn: SaveExecutionStateFn,
+    private clearExecutionStateFn: ClearExecutionStateFn,
+    private resetStuckFeaturesFn: ResetStuckFeaturesFn,
+    private isFeatureFinishedFn: IsFeatureFinishedFn,
+    private isFeatureRunningFn: (featureId: string) => boolean,
+    private loadAllFeaturesFn?: LoadAllFeaturesFn
+  ) {}
+
+  /**
+   * Start the auto mode loop for a specific project/worktree (supports multiple concurrent projects and worktrees)
+   * @param projectPath - The project to start auto mode for
+   * @param branchName - The branch name for worktree scoping, null for main worktree
+   * @param maxConcurrency - Maximum concurrent features (default: DEFAULT_MAX_CONCURRENCY)
+   */
+  async startAutoLoopForProject(
+    projectPath: string,
+    branchName: string | null = null,
+    maxConcurrency?: number
+  ): Promise<number> {
+    const resolvedMaxConcurrency = await this.resolveMaxConcurrency(
+      projectPath,
+      branchName,
+      maxConcurrency
+    );
+
+    // Use worktree-scoped key
+    const worktreeKey = getWorktreeAutoLoopKey(projectPath, branchName);
+
+    // Check if this project/worktree already has an active autoloop
+    const existingState = this.autoLoopsByProject.get(worktreeKey);
+    if (existingState?.isRunning) {
+      const worktreeDesc = branchName ? `worktree ${branchName}` : 'main worktree';
+      throw new Error(
+        `Auto mode is already running for ${worktreeDesc} in project: ${projectPath}`
+      );
+    }
+
+    // Create new project/worktree autoloop state
+    const abortController = new AbortController();
+    const config: AutoModeConfig = {
+      maxConcurrency: resolvedMaxConcurrency,
+      useWorktrees: true,
+      projectPath,
+      branchName,
+    };
+
+    const projectState: ProjectAutoLoopState = {
+      abortController,
+      config,
+      isRunning: true,
+      consecutiveFailures: [],
+      pausedDueToFailures: false,
+      hasEmittedIdleEvent: false,
+      branchName,
+    };
+
+    this.autoLoopsByProject.set(worktreeKey, projectState);
+    try {
+      await this.resetStuckFeaturesFn(projectPath);
+    } catch {
+      /* ignore */
+    }
+    this.eventBus.emitAutoModeEvent('auto_mode_started', {
+      message: `Auto mode started with max ${resolvedMaxConcurrency} concurrent features`,
+      projectPath,
+      branchName,
+      maxConcurrency: resolvedMaxConcurrency,
+    });
+    await this.saveExecutionStateFn(projectPath, branchName, resolvedMaxConcurrency);
+    this.runAutoLoopForProject(worktreeKey).catch((error) => {
+      const errorInfo = classifyError(error);
+      this.eventBus.emitAutoModeEvent('auto_mode_error', {
+        error: errorInfo.message,
+        errorType: errorInfo.type,
+        projectPath,
+        branchName,
+      });
+    });
+    return resolvedMaxConcurrency;
+  }
+
+  private async runAutoLoopForProject(worktreeKey: string): Promise<void> {
+    const projectState = this.autoLoopsByProject.get(worktreeKey);
+    if (!projectState) return;
+    const { projectPath, branchName } = projectState.config;
+    while (projectState.isRunning && !projectState.abortController.signal.aborted) {
+      try {
+        // Count ALL running features (both auto and manual) against the concurrency limit.
+        // This ensures auto mode is aware of the total system load and does not over-subscribe
+        // resources. Manual tasks always bypass the limit and run immediately, but their
+        // presence is accounted for when deciding whether to dispatch new auto-mode tasks.
+        const runningCount = await this.getRunningCountForWorktree(projectPath, branchName);
+        if (runningCount >= projectState.config.maxConcurrency) {
+          await this.sleep(SLEEP_INTERVAL_CAPACITY_MS, projectState.abortController.signal);
+          continue;
+        }
+        const pendingFeatures = await this.loadPendingFeaturesFn(projectPath, branchName);
+        if (pendingFeatures.length === 0) {
+          if (runningCount === 0 && !projectState.hasEmittedIdleEvent) {
+            // Double-check that we have no features in 'in_progress' state that might
+            // have been released from the concurrency manager but not yet updated to
+            // their final status. This prevents auto_mode_idle from firing prematurely
+            // when features are transitioning states (e.g., during status update).
+            const hasInProgressFeatures = await this.hasInProgressFeaturesForWorktree(
+              projectPath,
+              branchName
+            );
+
+            // Only emit auto_mode_idle if we're truly done with all features
+            if (!hasInProgressFeatures) {
+              this.eventBus.emitAutoModeEvent('auto_mode_idle', {
+                message: 'No pending features - auto mode idle',
+                projectPath,
+                branchName,
+              });
+              projectState.hasEmittedIdleEvent = true;
+            }
+          }
+          await this.sleep(SLEEP_INTERVAL_IDLE_MS, projectState.abortController.signal);
+          continue;
+        }
+
+        // Load all features for dependency checking (if callback provided)
+        const allFeatures = this.loadAllFeaturesFn
+          ? await this.loadAllFeaturesFn(projectPath)
+          : undefined;
+
+        // Filter to eligible features: not running, not finished, and dependencies satisfied.
+        // When loadAllFeaturesFn is not provided, allFeatures is undefined and we bypass
+        // dependency checks (returning true) to avoid false negatives caused by completed
+        // features being absent from pendingFeatures.
+        const eligibleFeatures = pendingFeatures.filter(
+          (f) =>
+            !this.isFeatureRunningFn(f.id) &&
+            !this.isFeatureFinishedFn(f) &&
+            (this.loadAllFeaturesFn ? areDependenciesSatisfied(f, allFeatures!) : true)
+        );
+
+        // Sort eligible features by priority (lower number = higher priority, default 2)
+        eligibleFeatures.sort((a, b) => (a.priority ?? 2) - (b.priority ?? 2));
+
+        const nextFeature = eligibleFeatures[0] ?? null;
+
+        if (nextFeature) {
+          logger.info(
+            `Auto-loop selected feature "${nextFeature.title || nextFeature.id}" ` +
+              `(priority=${nextFeature.priority ?? 2}) from ${eligibleFeatures.length} eligible features`
+          );
+        }
+        if (nextFeature) {
+          projectState.hasEmittedIdleEvent = false;
+          this.executeFeatureFn(
+            projectPath,
+            nextFeature.id,
+            projectState.config.useWorktrees,
+            true
+          ).catch((error) => {
+            const errorInfo = classifyError(error);
+            logger.error(`Auto-loop feature ${nextFeature.id} failed:`, errorInfo.message);
+            if (this.trackFailureAndCheckPauseForProject(projectPath, branchName, errorInfo)) {
+              this.signalShouldPauseForProject(projectPath, branchName, errorInfo);
+            }
+          });
+        }
+        await this.sleep(SLEEP_INTERVAL_NORMAL_MS, projectState.abortController.signal);
+      } catch {
+        if (projectState.abortController.signal.aborted) break;
+        await this.sleep(SLEEP_INTERVAL_ERROR_MS, projectState.abortController.signal);
+      }
+    }
+    projectState.isRunning = false;
+  }
+
+  async stopAutoLoopForProject(
+    projectPath: string,
+    branchName: string | null = null
+  ): Promise<number> {
+    const worktreeKey = getWorktreeAutoLoopKey(projectPath, branchName);
+    const projectState = this.autoLoopsByProject.get(worktreeKey);
+    if (!projectState) return 0;
+    const wasRunning = projectState.isRunning;
+    projectState.isRunning = false;
+    projectState.abortController.abort();
+    await this.clearExecutionStateFn(projectPath, branchName);
+    if (wasRunning)
+      this.eventBus.emitAutoModeEvent('auto_mode_stopped', {
+        message: 'Auto mode stopped',
+        projectPath,
+        branchName,
+      });
+    this.autoLoopsByProject.delete(worktreeKey);
+    return await this.getRunningCountForWorktree(projectPath, branchName);
+  }
+
+  isAutoLoopRunningForProject(projectPath: string, branchName: string | null = null): boolean {
+    const worktreeKey = getWorktreeAutoLoopKey(projectPath, branchName);
+    const projectState = this.autoLoopsByProject.get(worktreeKey);
+    return projectState?.isRunning ?? false;
+  }
+
+  /**
+   * Get auto loop config for a specific project/worktree
+   * @param projectPath - The project path
+   * @param branchName - The branch name, or null for main worktree
+   */
+  getAutoLoopConfigForProject(
+    projectPath: string,
+    branchName: string | null = null
+  ): AutoModeConfig | null {
+    const worktreeKey = getWorktreeAutoLoopKey(projectPath, branchName);
+    const projectState = this.autoLoopsByProject.get(worktreeKey);
+    return projectState?.config ?? null;
+  }
+
+  /**
+   * Get all active auto loop worktrees with their project paths and branch names
+   */
+  getActiveWorktrees(): Array<{ projectPath: string; branchName: string | null }> {
+    const activeWorktrees: Array<{ projectPath: string; branchName: string | null }> = [];
+    for (const [, state] of this.autoLoopsByProject) {
+      if (state.isRunning) {
+        activeWorktrees.push({
+          projectPath: state.config.projectPath,
+          branchName: state.branchName,
+        });
+      }
+    }
+    return activeWorktrees;
+  }
+
+  getActiveProjects(): string[] {
+    const activeProjects = new Set<string>();
+    for (const [, state] of this.autoLoopsByProject) {
+      if (state.isRunning) activeProjects.add(state.config.projectPath);
+    }
+    return Array.from(activeProjects);
+  }
+
+  /**
+   * Get the number of running features for a worktree.
+   * By default counts ALL running features (both auto-mode and manual).
+   * Pass `autoModeOnly: true` to count only auto-mode features.
+   */
+  async getRunningCountForWorktree(
+    projectPath: string,
+    branchName: string | null,
+    options?: { autoModeOnly?: boolean }
+  ): Promise<number> {
+    return this.concurrencyManager.getRunningCountForWorktree(projectPath, branchName, options);
+  }
+
+  trackFailureAndCheckPauseForProject(
+    projectPath: string,
+    branchNameOrError: string | null | { type: string; message: string },
+    errorInfo?: { type: string; message: string }
+  ): boolean {
+    // Support both old (projectPath, errorInfo) and new (projectPath, branchName, errorInfo) signatures
+    let branchName: string | null;
+    let actualErrorInfo: { type: string; message: string };
+    if (
+      typeof branchNameOrError === 'object' &&
+      branchNameOrError !== null &&
+      'type' in branchNameOrError
+    ) {
+      // Old signature: (projectPath, errorInfo)
+      branchName = null;
+      actualErrorInfo = branchNameOrError;
+    } else {
+      // New signature: (projectPath, branchName, errorInfo)
+      branchName = branchNameOrError;
+      actualErrorInfo = errorInfo!;
+    }
+    const projectState = this.autoLoopsByProject.get(
+      getWorktreeAutoLoopKey(projectPath, branchName)
+    );
+    if (!projectState) return false;
+    const now = Date.now();
+    projectState.consecutiveFailures.push({ timestamp: now, error: actualErrorInfo.message });
+    projectState.consecutiveFailures = projectState.consecutiveFailures.filter(
+      (f) => now - f.timestamp < FAILURE_WINDOW_MS
+    );
+    return (
+      projectState.consecutiveFailures.length >= CONSECUTIVE_FAILURE_THRESHOLD ||
+      actualErrorInfo.type === 'quota_exhausted' ||
+      actualErrorInfo.type === 'rate_limit'
+    );
+  }
+
+  signalShouldPauseForProject(
+    projectPath: string,
+    branchNameOrError: string | null | { type: string; message: string },
+    errorInfo?: { type: string; message: string }
+  ): void {
+    // Support both old (projectPath, errorInfo) and new (projectPath, branchName, errorInfo) signatures
+    let branchName: string | null;
+    let actualErrorInfo: { type: string; message: string };
+    if (
+      typeof branchNameOrError === 'object' &&
+      branchNameOrError !== null &&
+      'type' in branchNameOrError
+    ) {
+      branchName = null;
+      actualErrorInfo = branchNameOrError;
+    } else {
+      branchName = branchNameOrError;
+      actualErrorInfo = errorInfo!;
+    }
+
+    const projectState = this.autoLoopsByProject.get(
+      getWorktreeAutoLoopKey(projectPath, branchName)
+    );
+    if (!projectState || projectState.pausedDueToFailures) return;
+    projectState.pausedDueToFailures = true;
+    const failureCount = projectState.consecutiveFailures.length;
+    this.eventBus.emitAutoModeEvent('auto_mode_paused_failures', {
+      message:
+        failureCount >= CONSECUTIVE_FAILURE_THRESHOLD
+          ? `Auto Mode paused: ${failureCount} consecutive failures detected.`
+          : 'Auto Mode paused: Usage limit or API error detected.',
+      errorType: actualErrorInfo.type,
+      originalError: actualErrorInfo.message,
+      failureCount,
+      projectPath,
+      branchName,
+    });
+    this.stopAutoLoopForProject(projectPath, branchName);
+  }
+
+  resetFailureTrackingForProject(projectPath: string, branchName: string | null = null): void {
+    const projectState = this.autoLoopsByProject.get(
+      getWorktreeAutoLoopKey(projectPath, branchName)
+    );
+    if (projectState) {
+      projectState.consecutiveFailures = [];
+      projectState.pausedDueToFailures = false;
+    }
+  }
+
+  recordSuccessForProject(projectPath: string, branchName: string | null = null): void {
+    const projectState = this.autoLoopsByProject.get(
+      getWorktreeAutoLoopKey(projectPath, branchName)
+    );
+    if (projectState) projectState.consecutiveFailures = [];
+  }
+
+  async resolveMaxConcurrency(
+    projectPath: string,
+    branchName: string | null,
+    provided?: number
+  ): Promise<number> {
+    if (typeof provided === 'number' && Number.isFinite(provided)) return provided;
+    if (!this.settingsService) return DEFAULT_MAX_CONCURRENCY;
+    try {
+      const settings = await this.settingsService.getGlobalSettings();
+      const globalMax =
+        typeof settings.maxConcurrency === 'number'
+          ? settings.maxConcurrency
+          : DEFAULT_MAX_CONCURRENCY;
+      const projectId = settings.projects?.find((p) => p.path === projectPath)?.id;
+      const autoModeByWorktree = settings.autoModeByWorktree;
+      if (projectId && autoModeByWorktree && typeof autoModeByWorktree === 'object') {
+        // Normalize both null and 'main' to '__main__' to match the same
+        // canonicalization used by getWorktreeAutoLoopKey, ensuring that
+        // lookups for the primary branch always use the '__main__' sentinel
+        // regardless of whether the caller passed null or the string 'main'.
+        const normalizedBranch =
+          branchName === null || branchName === 'main' ? '__main__' : branchName;
+        const worktreeId = `${projectId}::${normalizedBranch}`;
+        if (
+          worktreeId in autoModeByWorktree &&
+          typeof autoModeByWorktree[worktreeId]?.maxConcurrency === 'number'
+        ) {
+          return autoModeByWorktree[worktreeId].maxConcurrency;
+        }
+      }
+      return globalMax;
+    } catch {
+      return DEFAULT_MAX_CONCURRENCY;
+    }
+  }
+
+  private sleep(ms: number, signal?: AbortSignal): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (signal?.aborted) {
+        reject(new Error('Aborted'));
+        return;
+      }
+      const onAbort = () => {
+        clearTimeout(timeout);
+        reject(new Error('Aborted'));
+      };
+      const timeout = setTimeout(() => {
+        signal?.removeEventListener('abort', onAbort);
+        resolve();
+      }, ms);
+      signal?.addEventListener('abort', onAbort);
+    });
+  }
+
+  /**
+   * Check if a feature belongs to the current worktree based on branch name.
+   * For main worktree (branchName === null or 'main'): includes features with no branchName or branchName === 'main'.
+   * For feature worktrees (branchName !== null and !== 'main'): only includes features with matching branchName.
+   */
+  private featureBelongsToWorktree(feature: Feature, branchName: string | null): boolean {
+    const isMainWorktree = branchName === null || branchName === 'main';
+    if (isMainWorktree) {
+      // Main worktree: include features with no branchName or branchName === 'main'
+      return !feature.branchName || feature.branchName === 'main';
+    } else {
+      // Feature worktree: only include exact branch match
+      return feature.branchName === branchName;
+    }
+  }
+
+  /**
+   * Check if there are features in 'in_progress' status for the current worktree.
+   * This prevents auto_mode_idle from firing prematurely when features are
+   * transitioning states (e.g., during status update from in_progress to completed).
+   */
+  private async hasInProgressFeaturesForWorktree(
+    projectPath: string,
+    branchName: string | null
+  ): Promise<boolean> {
+    if (!this.loadAllFeaturesFn) {
+      return false;
+    }
+
+    try {
+      const allFeatures = await this.loadAllFeaturesFn(projectPath);
+      return allFeatures.some(
+        (f) => f.status === 'in_progress' && this.featureBelongsToWorktree(f, branchName)
+      );
+    } catch (error) {
+      const errorInfo = classifyError(error);
+      logger.warn(
+        `Failed to load all features for idle check (projectPath=${projectPath}, branchName=${branchName}): ${errorInfo.message}`,
+        error
+      );
+      return false;
+    }
+  }
+}
diff --git a/temp_repo/apps/server/src/services/auto-mode/compat.ts b/temp_repo/apps/server/src/services/auto-mode/compat.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ea911d9b8c995f81769566c1dd033345f79ae0f0
--- /dev/null
+++ b/temp_repo/apps/server/src/services/auto-mode/compat.ts
@@ -0,0 +1,241 @@
+/**
+ * Compatibility Shim - Provides AutoModeService-like interface using the new architecture
+ *
+ * This allows existing routes to work without major changes during the transition.
+ * Routes receive this shim which delegates to GlobalAutoModeService and facades.
+ *
+ * This is a TEMPORARY shim - routes should be updated to use the new interface directly.
+ */
+
+import type { Feature } from '@automaker/types';
+import type { EventEmitter } from '../../lib/events.js';
+import { GlobalAutoModeService } from './global-service.js';
+import { AutoModeServiceFacade } from './facade.js';
+import type { SettingsService } from '../settings-service.js';
+import type { FeatureLoader } from '../feature-loader.js';
+import type { ClaudeUsageService } from '../claude-usage-service.js';
+import type { FacadeOptions, AutoModeStatus, RunningAgentInfo } from './types.js';
+
+/**
+ * AutoModeServiceCompat wraps GlobalAutoModeService and facades to provide
+ * the old AutoModeService interface that routes expect.
+ */
+export class AutoModeServiceCompat {
+  private readonly globalService: GlobalAutoModeService;
+  private readonly facadeOptions: FacadeOptions;
+  private readonly facadeCache = new Map<string, AutoModeServiceFacade>();
+
+  constructor(
+    events: EventEmitter,
+    settingsService: SettingsService | null,
+    featureLoader: FeatureLoader,
+    claudeUsageService?: ClaudeUsageService | null
+  ) {
+    this.globalService = new GlobalAutoModeService(events, settingsService, featureLoader);
+    const sharedServices = this.globalService.getSharedServices();
+
+    this.facadeOptions = {
+      events,
+      settingsService,
+      featureLoader,
+      sharedServices,
+      claudeUsageService: claudeUsageService ?? null,
+    };
+  }
+
+  /**
+   * Get the global service for direct access
+   */
+  getGlobalService(): GlobalAutoModeService {
+    return this.globalService;
+  }
+
+  /**
+   * Get or create a facade for a specific project.
+   * Facades are cached by project path so that auto loop state
+   * (stored in the facade's AutoLoopCoordinator) persists across API calls.
+   */
+  createFacade(projectPath: string): AutoModeServiceFacade {
+    let facade = this.facadeCache.get(projectPath);
+    if (!facade) {
+      facade = AutoModeServiceFacade.create(projectPath, this.facadeOptions);
+      this.facadeCache.set(projectPath, facade);
+    }
+    return facade;
+  }
+
+  // ===========================================================================
+  // GLOBAL OPERATIONS (delegated to GlobalAutoModeService)
+  // ===========================================================================
+
+  getStatus(): AutoModeStatus {
+    return this.globalService.getStatus();
+  }
+
+  getActiveAutoLoopProjects(): string[] {
+    return this.globalService.getActiveAutoLoopProjects();
+  }
+
+  getActiveAutoLoopWorktrees(): Array<{ projectPath: string; branchName: string | null }> {
+    return this.globalService.getActiveAutoLoopWorktrees();
+  }
+
+  async getRunningAgents(): Promise<RunningAgentInfo[]> {
+    return this.globalService.getRunningAgents();
+  }
+
+  async markAllRunningFeaturesInterrupted(reason?: string): Promise<void> {
+    return this.globalService.markAllRunningFeaturesInterrupted(reason);
+  }
+
+  async reconcileFeatureStates(projectPath: string): Promise<number> {
+    return this.globalService.reconcileFeatureStates(projectPath);
+  }
+
+  // ===========================================================================
+  // PER-PROJECT OPERATIONS (delegated to facades)
+  // ===========================================================================
+
+  async getStatusForProject(
+    projectPath: string,
+    branchName: string | null = null
+  ): Promise<{
+    isAutoLoopRunning: boolean;
+    runningFeatures: string[];
+    runningCount: number;
+    maxConcurrency: number;
+    branchName: string | null;
+  }> {
+    const facade = this.createFacade(projectPath);
+    return facade.getStatusForProject(branchName);
+  }
+
+  isAutoLoopRunningForProject(projectPath: string, branchName: string | null = null): boolean {
+    const facade = this.createFacade(projectPath);
+    return facade.isAutoLoopRunning(branchName);
+  }
+
+  async startAutoLoopForProject(
+    projectPath: string,
+    branchName: string | null = null,
+    maxConcurrency?: number
+  ): Promise<number> {
+    const facade = this.createFacade(projectPath);
+    return facade.startAutoLoop(branchName, maxConcurrency);
+  }
+
+  async stopAutoLoopForProject(
+    projectPath: string,
+    branchName: string | null = null
+  ): Promise<number> {
+    const facade = this.createFacade(projectPath);
+    return facade.stopAutoLoop(branchName);
+  }
+
+  async executeFeature(
+    projectPath: string,
+    featureId: string,
+    useWorktrees = false,
+    isAutoMode = false,
+    providedWorktreePath?: string,
+    options?: { continuationPrompt?: string; _calledInternally?: boolean }
+  ): Promise<void> {
+    const facade = this.createFacade(projectPath);
+    return facade.executeFeature(
+      featureId,
+      useWorktrees,
+      isAutoMode,
+      providedWorktreePath,
+      options
+    );
+  }
+
+  async stopFeature(featureId: string): Promise<boolean> {
+    // Stop feature is tricky - we need to find which project the feature is running in
+    // The concurrency manager tracks this
+    const runningAgents = await this.getRunningAgents();
+    const agent = runningAgents.find((a) => a.featureId === featureId);
+    if (agent) {
+      const facade = this.createFacade(agent.projectPath);
+      return facade.stopFeature(featureId);
+    }
+    return false;
+  }
+
+  async resumeFeature(projectPath: string, featureId: string, useWorktrees = false): Promise<void> {
+    const facade = this.createFacade(projectPath);
+    return facade.resumeFeature(featureId, useWorktrees);
+  }
+
+  async followUpFeature(
+    projectPath: string,
+    featureId: string,
+    prompt: string,
+    imagePaths?: string[],
+    useWorktrees = true
+  ): Promise<void> {
+    const facade = this.createFacade(projectPath);
+    return facade.followUpFeature(featureId, prompt, imagePaths, useWorktrees);
+  }
+
+  async verifyFeature(projectPath: string, featureId: string): Promise<boolean> {
+    const facade = this.createFacade(projectPath);
+    return facade.verifyFeature(featureId);
+  }
+
+  async commitFeature(
+    projectPath: string,
+    featureId: string,
+    providedWorktreePath?: string
+  ): Promise<string | null> {
+    const facade = this.createFacade(projectPath);
+    return facade.commitFeature(featureId, providedWorktreePath);
+  }
+
+  async contextExists(projectPath: string, featureId: string): Promise<boolean> {
+    const facade = this.createFacade(projectPath);
+    return facade.contextExists(featureId);
+  }
+
+  async analyzeProject(projectPath: string): Promise<void> {
+    const facade = this.createFacade(projectPath);
+    return facade.analyzeProject();
+  }
+
+  async resolvePlanApproval(
+    projectPath: string,
+    featureId: string,
+    approved: boolean,
+    editedPlan?: string,
+    feedback?: string
+  ): Promise<{ success: boolean; error?: string }> {
+    const facade = this.createFacade(projectPath);
+    return facade.resolvePlanApproval(featureId, approved, editedPlan, feedback);
+  }
+
+  async resumeInterruptedFeatures(projectPath: string): Promise<void> {
+    const facade = this.createFacade(projectPath);
+    return facade.resumeInterruptedFeatures();
+  }
+
+  async checkWorktreeCapacity(
+    projectPath: string,
+    featureId: string
+  ): Promise<{
+    hasCapacity: boolean;
+    currentAgents: number;
+    maxAgents: number;
+    branchName: string | null;
+  }> {
+    const facade = this.createFacade(projectPath);
+    return facade.checkWorktreeCapacity(featureId);
+  }
+
+  async detectOrphanedFeatures(
+    projectPath: string,
+    preloadedFeatures?: Feature[]
+  ): Promise<Array<{ feature: Feature; missingBranch: string }>> {
+    const facade = this.createFacade(projectPath);
+    return facade.detectOrphanedFeatures(preloadedFeatures);
+  }
+}
diff --git a/temp_repo/apps/server/src/services/auto-mode/facade.ts b/temp_repo/apps/server/src/services/auto-mode/facade.ts
new file mode 100644
index 0000000000000000000000000000000000000000..db4dccdc9baa511f0ad0cd9c8c4127ee5169300b
--- /dev/null
+++ b/temp_repo/apps/server/src/services/auto-mode/facade.ts
@@ -0,0 +1,1257 @@
+/**
+ * AutoModeServiceFacade - Clean interface for auto-mode functionality
+ *
+ * This facade provides a thin delegation layer over the extracted services,
+ * exposing all 23 public methods that routes currently call on AutoModeService.
+ *
+ * Key design decisions:
+ * - Per-project factory pattern (projectPath is implicit in method calls)
+ * - Clean method names (e.g., startAutoLoop instead of startAutoLoopForProject)
+ * - Thin delegation to underlying services - no new business logic
+ * - Maintains backward compatibility during transition period
+ */
+
+import path from 'path';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import type { Feature, PlanningMode, ThinkingLevel, ReasoningEffort } from '@automaker/types';
+import {
+  DEFAULT_MAX_CONCURRENCY,
+  DEFAULT_MODELS,
+  stripProviderPrefix,
+  isPipelineStatus,
+} from '@automaker/types';
+import { resolveModelString } from '@automaker/model-resolver';
+import { createLogger, loadContextFiles, classifyError } from '@automaker/utils';
+import { getFeatureDir } from '@automaker/platform';
+import * as secureFs from '../../lib/secure-fs.js';
+import { validateWorkingDirectory, createAutoModeOptions } from '../../lib/sdk-options.js';
+import {
+  getPromptCustomization,
+  resolveProviderContext,
+  getMCPServersFromSettings,
+  getDefaultMaxTurnsSetting,
+} from '../../lib/settings-helpers.js';
+import { execGitCommand } from '@automaker/git-utils';
+import { TypedEventBus } from '../typed-event-bus.js';
+import { ConcurrencyManager } from '../concurrency-manager.js';
+import { WorktreeResolver } from '../worktree-resolver.js';
+import { FeatureStateManager } from '../feature-state-manager.js';
+import { PlanApprovalService } from '../plan-approval-service.js';
+import { AutoLoopCoordinator, type AutoModeConfig } from '../auto-loop-coordinator.js';
+import { ExecutionService } from '../execution-service.js';
+import { RecoveryService } from '../recovery-service.js';
+import { PipelineOrchestrator } from '../pipeline-orchestrator.js';
+import { AgentExecutor } from '../agent-executor.js';
+import { TestRunnerService } from '../test-runner-service.js';
+import { ProviderFactory } from '../../providers/provider-factory.js';
+import { FeatureLoader } from '../feature-loader.js';
+import type { SettingsService } from '../settings-service.js';
+import type { EventEmitter } from '../../lib/events.js';
+import type {
+  FacadeOptions,
+  FacadeError,
+  AutoModeStatus,
+  ProjectAutoModeStatus,
+  WorktreeCapacityInfo,
+  RunningAgentInfo,
+  OrphanedFeatureInfo,
+} from './types.js';
+
+const execAsync = promisify(exec);
+const logger = createLogger('AutoModeServiceFacade');
+
+/**
+ * AutoModeServiceFacade provides a clean interface for auto-mode functionality.
+ *
+ * Created via factory pattern with a specific projectPath, allowing methods
+ * to use clean names without requiring projectPath as a parameter.
+ */
+export class AutoModeServiceFacade {
+  private constructor(
+    private readonly projectPath: string,
+    private readonly events: EventEmitter,
+    private readonly eventBus: TypedEventBus,
+    private readonly concurrencyManager: ConcurrencyManager,
+    private readonly worktreeResolver: WorktreeResolver,
+    private readonly featureStateManager: FeatureStateManager,
+    private readonly featureLoader: FeatureLoader,
+    private readonly planApprovalService: PlanApprovalService,
+    private readonly autoLoopCoordinator: AutoLoopCoordinator,
+    private readonly executionService: ExecutionService,
+    private readonly recoveryService: RecoveryService,
+    private readonly pipelineOrchestrator: PipelineOrchestrator,
+    private readonly settingsService: SettingsService | null
+  ) {}
+
+  /**
+   * Determine if a feature is eligible to be picked up by the auto-mode loop.
+   *
+   * @param feature - The feature to check
+   * @param branchName - The current worktree branch name (null for main)
+   * @param primaryBranch - The resolved primary branch name for the project
+   * @returns True if the feature is eligible for auto-dispatch
+   */
+  public static isFeatureEligibleForAutoMode(
+    feature: Feature,
+    branchName: string | null,
+    primaryBranch: string | null
+  ): boolean {
+    const isEligibleStatus =
+      feature.status === 'backlog' ||
+      feature.status === 'ready' ||
+      feature.status === 'interrupted' ||
+      isPipelineStatus(feature.status);
+
+    if (!isEligibleStatus) return false;
+
+    // Filter by branch/worktree alignment
+    if (branchName === null) {
+      // For main worktree, include features with no branch or matching primary branch
+      return !feature.branchName || (primaryBranch != null && feature.branchName === primaryBranch);
+    } else {
+      // For named worktrees, only include features matching that branch
+      return feature.branchName === branchName;
+    }
+  }
+
+  /**
+   * Classify and log an error at the facade boundary.
+   * Emits an error event to the UI so failures are surfaced to the user.
+   *
+   * @param error - The caught error
+   * @param method - The facade method name where the error occurred
+   * @param featureId - Optional feature ID for context
+   * @returns The classified FacadeError for structured consumption
+   */
+  private handleFacadeError(error: unknown, method: string, featureId?: string): FacadeError {
+    const errorInfo = classifyError(error);
+
+    // Log at the facade boundary for debugging
+    logger.error(
+      `[${method}] ${featureId ? `Feature ${featureId}: ` : ''}${errorInfo.message}`,
+      error
+    );
+
+    // Emit error event to UI unless it's an abort/cancellation
+    if (!errorInfo.isAbort && !errorInfo.isCancellation) {
+      this.eventBus.emitAutoModeEvent('auto_mode_error', {
+        featureId: featureId ?? null,
+        featureName: undefined,
+        branchName: null,
+        error: errorInfo.message,
+        errorType: errorInfo.type,
+        projectPath: this.projectPath,
+      });
+    }
+
+    return {
+      method,
+      errorType: errorInfo.type,
+      message: errorInfo.message,
+      featureId,
+      projectPath: this.projectPath,
+    };
+  }
+
+  /**
+   * Create a new AutoModeServiceFacade instance for a specific project.
+   *
+   * @param projectPath - The project path this facade operates on
+   * @param options - Configuration options including events, settingsService, featureLoader
+   */
+  static create(projectPath: string, options: FacadeOptions): AutoModeServiceFacade {
+    const {
+      events,
+      settingsService = null,
+      featureLoader = new FeatureLoader(),
+      sharedServices,
+    } = options;
+
+    // Use shared services if provided, otherwise create new ones
+    // Shared services allow multiple facades to share state (e.g., running features, auto loops)
+    const eventBus = sharedServices?.eventBus ?? new TypedEventBus(events);
+    const worktreeResolver = sharedServices?.worktreeResolver ?? new WorktreeResolver();
+    const concurrencyManager =
+      sharedServices?.concurrencyManager ??
+      new ConcurrencyManager((p) => worktreeResolver.getCurrentBranch(p));
+    const featureStateManager = new FeatureStateManager(events, featureLoader);
+    const planApprovalService = new PlanApprovalService(
+      eventBus,
+      featureStateManager,
+      settingsService
+    );
+    const agentExecutor = new AgentExecutor(
+      eventBus,
+      featureStateManager,
+      planApprovalService,
+      settingsService
+    );
+    const testRunnerService = new TestRunnerService();
+
+    // Helper for building feature prompts (used by pipeline orchestrator)
+    const buildFeaturePrompt = (
+      feature: Feature,
+      prompts: { implementationInstructions: string; playwrightVerificationInstructions: string }
+    ): string => {
+      const title =
+        feature.title || feature.description?.split('\n')[0]?.substring(0, 60) || 'Untitled';
+      let prompt = `## Feature Implementation Task\n\n**Feature ID:** ${feature.id}\n**Title:** ${title}\n**Description:** ${feature.description}\n`;
+      if (feature.spec) {
+        prompt += `\n**Specification:**\n${feature.spec}\n`;
+      }
+      if (!feature.skipTests) {
+        prompt += `\n${prompts.implementationInstructions}\n\n${prompts.playwrightVerificationInstructions}`;
+      } else {
+        prompt += `\n${prompts.implementationInstructions}`;
+      }
+      return prompt;
+    };
+
+    // Create placeholder callbacks - will be bound to facade methods after creation.
+    // These use closures to capture the facade instance once created.
+    // INVARIANT: All callbacks passed to PipelineOrchestrator, AutoLoopCoordinator,
+    // and ExecutionService are invoked asynchronously (never during construction),
+    // so facadeInstance is guaranteed to be assigned before any callback runs.
+    let facadeInstance: AutoModeServiceFacade | null = null;
+    const getFacade = (): AutoModeServiceFacade => {
+      if (!facadeInstance) {
+        throw new Error(
+          'AutoModeServiceFacade not yet initialized — callback invoked during construction'
+        );
+      }
+      return facadeInstance;
+    };
+
+    /**
+     * Shared agent-run helper used by both PipelineOrchestrator and ExecutionService.
+     *
+     * Resolves provider/model context, then delegates to agentExecutor.execute with the
+     * full payload.  The opts parameter uses an index-signature union so it
+     * accepts both the typed ExecutionService opts object and the looser
+     * Record<string, unknown> used by PipelineOrchestrator without requiring
+     * type casts at the call sites.
+     */
+    const createRunAgentFn =
+      () =>
+      async (
+        workDir: string,
+        featureId: string,
+        prompt: string,
+        abortController: AbortController,
+        pPath: string,
+        imagePaths?: string[],
+        model?: string,
+        opts?: {
+          planningMode?: PlanningMode;
+          requirePlanApproval?: boolean;
+          previousContent?: string;
+          systemPrompt?: string;
+          autoLoadClaudeMd?: boolean;
+          useClaudeCodeSystemPrompt?: boolean;
+          thinkingLevel?: ThinkingLevel;
+          reasoningEffort?: ReasoningEffort;
+          branchName?: string | null;
+          status?: string; // Feature status for pipeline summary check
+          [key: string]: unknown;
+        }
+      ): Promise<void> => {
+        const resolvedModel = resolveModelString(model, DEFAULT_MODELS.claude);
+        const provider = ProviderFactory.getProviderForModel(resolvedModel);
+        const effectiveBareModel = stripProviderPrefix(resolvedModel);
+
+        // Resolve custom provider (GLM, MiniMax, etc.) for baseUrl and credentials
+        let claudeCompatibleProvider:
+          | import('@automaker/types').ClaudeCompatibleProvider
+          | undefined;
+        let credentials: import('@automaker/types').Credentials | undefined;
+        let providerResolvedModel: string | undefined;
+
+        if (settingsService) {
+          const providerId = opts?.providerId as string | undefined;
+          const result = await resolveProviderContext(
+            settingsService,
+            resolvedModel,
+            providerId,
+            '[AutoModeFacade]'
+          );
+          claudeCompatibleProvider = result.provider;
+          credentials = result.credentials;
+          providerResolvedModel = result.resolvedModel;
+        }
+
+        // Build sdkOptions with proper maxTurns and allowedTools for auto-mode.
+        // Without this, maxTurns would be undefined, causing providers to use their
+        // internal defaults which may be much lower than intended (e.g., Codex CLI's
+        // default turn limit can cause feature runs to stop prematurely).
+        const autoLoadClaudeMd = opts?.autoLoadClaudeMd ?? false;
+        const useClaudeCodeSystemPrompt = opts?.useClaudeCodeSystemPrompt ?? true;
+        let mcpServers: Record<string, unknown> | undefined;
+        try {
+          if (settingsService) {
+            const servers = await getMCPServersFromSettings(settingsService, '[AutoModeFacade]');
+            if (Object.keys(servers).length > 0) {
+              mcpServers = servers;
+            }
+          }
+        } catch {
+          // MCP servers are optional - continue without them
+        }
+
+        // Read user-configured max turns from settings
+        const userMaxTurns = await getDefaultMaxTurnsSetting(settingsService, '[AutoModeFacade]');
+
+        const sdkOpts = createAutoModeOptions({
+          cwd: workDir,
+          model: providerResolvedModel || resolvedModel,
+          systemPrompt: opts?.systemPrompt,
+          abortController,
+          autoLoadClaudeMd,
+          useClaudeCodeSystemPrompt,
+          thinkingLevel: opts?.thinkingLevel,
+          maxTurns: userMaxTurns,
+          mcpServers: mcpServers as
+            | Record<string, import('@automaker/types').McpServerConfig>
+            | undefined,
+        });
+
+        if (!sdkOpts) {
+          logger.error(
+            `[createRunAgentFn] sdkOpts is UNDEFINED! createAutoModeOptions type: ${typeof createAutoModeOptions}`
+          );
+        }
+
+        logger.info(
+          `[createRunAgentFn] Feature ${featureId}: model=${resolvedModel} (resolved=${providerResolvedModel || resolvedModel}), ` +
+            `maxTurns=${sdkOpts.maxTurns}, allowedTools=${(sdkOpts.allowedTools as string[])?.length ?? 'default'}, ` +
+            `provider=${provider.getName()}`
+        );
+
+        await agentExecutor.execute(
+          {
+            workDir,
+            featureId,
+            prompt,
+            projectPath: pPath,
+            abortController,
+            imagePaths,
+            model: resolvedModel,
+            planningMode: opts?.planningMode as PlanningMode | undefined,
+            requirePlanApproval: opts?.requirePlanApproval as boolean | undefined,
+            previousContent: opts?.previousContent as string | undefined,
+            systemPrompt: opts?.systemPrompt as string | undefined,
+            autoLoadClaudeMd: opts?.autoLoadClaudeMd as boolean | undefined,
+            useClaudeCodeSystemPrompt,
+            thinkingLevel: opts?.thinkingLevel as ThinkingLevel | undefined,
+            reasoningEffort: opts?.reasoningEffort as ReasoningEffort | undefined,
+            branchName: opts?.branchName as string | null | undefined,
+            status: opts?.status as string | undefined,
+            provider,
+            effectiveBareModel,
+            credentials,
+            claudeCompatibleProvider,
+            mcpServers,
+            sdkOptions: {
+              maxTurns: sdkOpts.maxTurns,
+              allowedTools: sdkOpts.allowedTools as string[] | undefined,
+              systemPrompt: sdkOpts.systemPrompt,
+              settingSources: sdkOpts.settingSources as
+                | Array<'user' | 'project' | 'local'>
+                | undefined,
+            },
+          },
+          {
+            waitForApproval: (fId, projPath) => planApprovalService.waitForApproval(fId, projPath),
+            saveFeatureSummary: (projPath, fId, summary) =>
+              featureStateManager.saveFeatureSummary(projPath, fId, summary),
+            updateFeatureSummary: (projPath, fId, summary) =>
+              featureStateManager.saveFeatureSummary(projPath, fId, summary),
+            buildTaskPrompt: (task, allTasks, taskIndex, _planContent, template, feedback) => {
+              let taskPrompt = template
+                .replace(/\{\{taskName\}\}/g, task.description || `Task ${task.id}`)
+                .replace(/\{\{taskIndex\}\}/g, String(taskIndex + 1))
+                .replace(/\{\{totalTasks\}\}/g, String(allTasks.length))
+                .replace(/\{\{taskDescription\}\}/g, task.description || `Task ${task.id}`);
+              if (feedback) {
+                taskPrompt = taskPrompt.replace(/\{\{userFeedback\}\}/g, feedback);
+              }
+              return taskPrompt;
+            },
+          }
+        );
+      };
+
+    // PipelineOrchestrator - runAgentFn delegates to AgentExecutor via shared helper
+    const pipelineOrchestrator = new PipelineOrchestrator(
+      eventBus,
+      featureStateManager,
+      agentExecutor,
+      testRunnerService,
+      worktreeResolver,
+      concurrencyManager,
+      settingsService,
+      // Callbacks
+      (pPath, featureId, status) =>
+        featureStateManager.updateFeatureStatus(pPath, featureId, status),
+      loadContextFiles,
+      buildFeaturePrompt,
+      (pPath, featureId, useWorktrees, _isAutoMode, _model, opts) =>
+        getFacade().executeFeature(featureId, useWorktrees, false, undefined, opts),
+      createRunAgentFn()
+    );
+
+    // AutoLoopCoordinator - ALWAYS create new with proper execution callbacks
+    // NOTE: We don't use sharedServices.autoLoopCoordinator because it doesn't have
+    // execution callbacks. Each facade needs its own coordinator to execute features.
+    // The shared coordinator in GlobalAutoModeService is for monitoring only.
+    const autoLoopCoordinator = new AutoLoopCoordinator(
+      eventBus,
+      concurrencyManager,
+      settingsService,
+      // Callbacks
+      (pPath, featureId, useWorktrees, isAutoMode) =>
+        getFacade().executeFeature(featureId, useWorktrees, isAutoMode),
+      async (pPath, branchName) => {
+        const features = await featureLoader.getAll(pPath);
+        // For main worktree (branchName === null), resolve the actual primary branch name
+        // so features with branchName matching the primary branch are included
+        let primaryBranch: string | null = null;
+        if (branchName === null) {
+          primaryBranch = await worktreeResolver.getCurrentBranch(pPath);
+        }
+        return features.filter((f) =>
+          AutoModeServiceFacade.isFeatureEligibleForAutoMode(f, branchName, primaryBranch)
+        );
+      },
+      (pPath, branchName, maxConcurrency) =>
+        getFacade().saveExecutionStateForProject(branchName, maxConcurrency),
+      (pPath, branchName) => getFacade().clearExecutionState(branchName),
+      (pPath) => featureStateManager.resetStuckFeatures(pPath),
+      (feature) =>
+        feature.status === 'completed' ||
+        feature.status === 'verified' ||
+        feature.status === 'waiting_approval',
+      (featureId) => concurrencyManager.isRunning(featureId),
+      async (pPath) => featureLoader.getAll(pPath)
+    );
+
+    /**
+     * Iterate all active worktrees for this project, falling back to the
+     * main worktree (null) when none are active.
+     */
+    const forEachProjectWorktree = (fn: (branchName: string | null) => void): void => {
+      const projectWorktrees = autoLoopCoordinator
+        .getActiveWorktrees()
+        .filter((w) => w.projectPath === projectPath);
+      if (projectWorktrees.length === 0) {
+        fn(null);
+      } else {
+        for (const w of projectWorktrees) {
+          fn(w.branchName);
+        }
+      }
+    };
+
+    // ExecutionService - runAgentFn delegates to AgentExecutor via shared helper
+    const executionService = new ExecutionService(
+      eventBus,
+      concurrencyManager,
+      worktreeResolver,
+      settingsService,
+      createRunAgentFn(),
+      (context) => pipelineOrchestrator.executePipeline(context),
+      (pPath, featureId, status) =>
+        featureStateManager.updateFeatureStatus(pPath, featureId, status),
+      (pPath, featureId) => featureStateManager.loadFeature(pPath, featureId),
+      async (feature) => {
+        // getPlanningPromptPrefixFn - select appropriate planning prompt based on feature's planningMode
+        if (!feature.planningMode || feature.planningMode === 'skip') {
+          return '';
+        }
+        const prompts = await getPromptCustomization(settingsService, '[PlanningPromptPrefix]');
+        const autoModePrompts = prompts.autoMode;
+        switch (feature.planningMode) {
+          case 'lite':
+            return feature.requirePlanApproval
+              ? autoModePrompts.planningLiteWithApproval + '\n\n'
+              : autoModePrompts.planningLite + '\n\n';
+          case 'spec':
+            return autoModePrompts.planningSpec + '\n\n';
+          case 'full':
+            return autoModePrompts.planningFull + '\n\n';
+          default:
+            return '';
+        }
+      },
+      (pPath, featureId, summary) =>
+        featureStateManager.saveFeatureSummary(pPath, featureId, summary),
+      async () => {
+        /* recordLearnings - stub */
+      },
+      (pPath, featureId) => getFacade().contextExists(featureId),
+      (pPath, featureId, useWorktrees, _calledInternally) =>
+        getFacade().resumeFeature(featureId, useWorktrees, _calledInternally),
+      (errorInfo) => {
+        // Track failure against ALL active worktrees for this project.
+        // The ExecutionService callbacks don't receive branchName, so we
+        // iterate all active worktrees. Uses a for-of loop (not .some()) to
+        // ensure every worktree's failure counter is incremented.
+        let shouldPause = false;
+        forEachProjectWorktree((branchName) => {
+          if (
+            autoLoopCoordinator.trackFailureAndCheckPauseForProject(
+              projectPath,
+              branchName,
+              errorInfo
+            )
+          ) {
+            shouldPause = true;
+          }
+        });
+        return shouldPause;
+      },
+      (errorInfo) => {
+        forEachProjectWorktree((branchName) =>
+          autoLoopCoordinator.signalShouldPauseForProject(projectPath, branchName, errorInfo)
+        );
+      },
+      () => {
+        // Record success to clear failure tracking. This prevents failures
+        // from accumulating over time and incorrectly pausing auto mode.
+        forEachProjectWorktree((branchName) =>
+          autoLoopCoordinator.recordSuccessForProject(projectPath, branchName)
+        );
+      },
+      (_pPath) => getFacade().saveExecutionState(),
+      loadContextFiles
+    );
+
+    // RecoveryService
+    const recoveryService = new RecoveryService(
+      eventBus,
+      concurrencyManager,
+      settingsService,
+      // Callbacks
+      (pPath, featureId, useWorktrees, isAutoMode, providedWorktreePath, opts) =>
+        getFacade().executeFeature(featureId, useWorktrees, isAutoMode, providedWorktreePath, opts),
+      (pPath, featureId) => featureStateManager.loadFeature(pPath, featureId),
+      (pPath, featureId, status) =>
+        pipelineOrchestrator.detectPipelineStatus(pPath, featureId, status),
+      (pPath, feature, useWorktrees, pipelineInfo) =>
+        pipelineOrchestrator.resumePipeline(pPath, feature, useWorktrees, pipelineInfo),
+      (featureId) => concurrencyManager.isRunning(featureId),
+      (opts) => concurrencyManager.acquire(opts),
+      (featureId) => concurrencyManager.release(featureId)
+    );
+
+    // Create the facade instance
+    facadeInstance = new AutoModeServiceFacade(
+      projectPath,
+      events,
+      eventBus,
+      concurrencyManager,
+      worktreeResolver,
+      featureStateManager,
+      featureLoader,
+      planApprovalService,
+      autoLoopCoordinator,
+      executionService,
+      recoveryService,
+      pipelineOrchestrator,
+      settingsService
+    );
+
+    return facadeInstance;
+  }
+
+  // ===========================================================================
+  // AUTO LOOP CONTROL (4 methods)
+  // ===========================================================================
+
+  /**
+   * Start the auto mode loop for this project/worktree
+   * @param branchName - The branch name for worktree scoping, null for main worktree
+   * @param maxConcurrency - Maximum concurrent features
+   */
+  async startAutoLoop(branchName: string | null = null, maxConcurrency?: number): Promise<number> {
+    try {
+      return await this.autoLoopCoordinator.startAutoLoopForProject(
+        this.projectPath,
+        branchName,
+        maxConcurrency
+      );
+    } catch (error) {
+      this.handleFacadeError(error, 'startAutoLoop');
+      throw error;
+    }
+  }
+
+  /**
+   * Stop the auto mode loop for this project/worktree
+   * @param branchName - The branch name, or null for main worktree
+   */
+  async stopAutoLoop(branchName: string | null = null): Promise<number> {
+    try {
+      return await this.autoLoopCoordinator.stopAutoLoopForProject(this.projectPath, branchName);
+    } catch (error) {
+      this.handleFacadeError(error, 'stopAutoLoop');
+      throw error;
+    }
+  }
+
+  /**
+   * Check if auto mode is running for this project/worktree
+   * @param branchName - The branch name, or null for main worktree
+   */
+  isAutoLoopRunning(branchName: string | null = null): boolean {
+    return this.autoLoopCoordinator.isAutoLoopRunningForProject(this.projectPath, branchName);
+  }
+
+  /**
+   * Get auto loop config for this project/worktree
+   * @param branchName - The branch name, or null for main worktree
+   */
+  getAutoLoopConfig(branchName: string | null = null): AutoModeConfig | null {
+    return this.autoLoopCoordinator.getAutoLoopConfigForProject(this.projectPath, branchName);
+  }
+
+  // ===========================================================================
+  // FEATURE EXECUTION (6 methods)
+  // ===========================================================================
+
+  /**
+   * Execute a single feature
+   * @param featureId - The feature ID to execute
+   * @param useWorktrees - Whether to use worktrees for isolation
+   * @param isAutoMode - Whether this is running in auto mode
+   * @param providedWorktreePath - Optional pre-resolved worktree path
+   * @param options - Additional execution options
+   */
+  async executeFeature(
+    featureId: string,
+    useWorktrees = false,
+    isAutoMode = false,
+    providedWorktreePath?: string,
+    options?: {
+      continuationPrompt?: string;
+      _calledInternally?: boolean;
+    }
+  ): Promise<void> {
+    try {
+      return await this.executionService.executeFeature(
+        this.projectPath,
+        featureId,
+        useWorktrees,
+        isAutoMode,
+        providedWorktreePath,
+        options
+      );
+    } catch (error) {
+      this.handleFacadeError(error, 'executeFeature', featureId);
+      throw error;
+    }
+  }
+
+  /**
+   * Stop a specific feature
+   * @param featureId - ID of the feature to stop
+   */
+  async stopFeature(featureId: string): Promise<boolean> {
+    try {
+      // Cancel any pending plan approval for this feature
+      this.cancelPlanApproval(featureId);
+      return await this.executionService.stopFeature(featureId);
+    } catch (error) {
+      this.handleFacadeError(error, 'stopFeature', featureId);
+      throw error;
+    }
+  }
+
+  /**
+   * Resume a feature (continues from saved context or starts fresh)
+   * @param featureId - ID of the feature to resume
+   * @param useWorktrees - Whether to use git worktrees
+   * @param _calledInternally - Internal flag for nested calls
+   */
+  async resumeFeature(
+    featureId: string,
+    useWorktrees = false,
+    _calledInternally = false
+  ): Promise<void> {
+    // Note: ExecutionService.executeFeature catches its own errors internally and
+    // does NOT re-throw them (it emits auto_mode_error and returns normally).
+    // Therefore, errors that reach this catch block are pre-execution failures
+    // (e.g., feature not found, context read error) that ExecutionService never
+    // handled — so calling handleFacadeError here does NOT produce duplicate events.
+    try {
+      return await this.recoveryService.resumeFeature(
+        this.projectPath,
+        featureId,
+        useWorktrees,
+        _calledInternally
+      );
+    } catch (error) {
+      this.handleFacadeError(error, 'resumeFeature', featureId);
+      throw error;
+    }
+  }
+
+  /**
+   * Follow up on a feature with additional instructions
+   * @param featureId - The feature ID
+   * @param prompt - Follow-up prompt
+   * @param imagePaths - Optional image paths
+   * @param useWorktrees - Whether to use worktrees
+   */
+  async followUpFeature(
+    featureId: string,
+    prompt: string,
+    imagePaths?: string[],
+    useWorktrees = true
+  ): Promise<void> {
+    validateWorkingDirectory(this.projectPath);
+
+    try {
+      // Load feature to build the prompt context
+      const feature = await this.featureStateManager.loadFeature(this.projectPath, featureId);
+      if (!feature) throw new Error(`Feature ${featureId} not found`);
+
+      // Read previous agent output as context
+      const featureDir = getFeatureDir(this.projectPath, featureId);
+      let previousContext = '';
+      try {
+        previousContext = (await secureFs.readFile(
+          path.join(featureDir, 'agent-output.md'),
+          'utf-8'
+        )) as string;
+      } catch {
+        // No previous context available - that's OK
+      }
+
+      // Build the feature prompt section
+      const featurePrompt = `## Feature Implementation Task\n\n**Feature ID:** ${feature.id}\n**Title:** ${feature.title || 'Untitled Feature'}\n**Description:** ${feature.description}\n`;
+
+      // Get the follow-up prompt template and build the continuation prompt
+      const prompts = await getPromptCustomization(this.settingsService, '[Facade]');
+      let continuationPrompt = prompts.autoMode.followUpPromptTemplate;
+      continuationPrompt = continuationPrompt
+        .replace(/\{\{featurePrompt\}\}/g, featurePrompt)
+        .replace(/\{\{previousContext\}\}/g, previousContext)
+        .replace(/\{\{followUpInstructions\}\}/g, prompt);
+
+      // Store image paths on the feature so executeFeature can pick them up
+      if (imagePaths && imagePaths.length > 0) {
+        feature.imagePaths = imagePaths.map((p) => ({
+          path: p,
+          filename: p.split('/').pop() || p,
+          mimeType: 'image/*',
+        }));
+        await this.featureStateManager.updateFeatureStatus(
+          this.projectPath,
+          featureId,
+          feature.status || 'in_progress'
+        );
+      }
+
+      // Delegate to executeFeature with the built continuation prompt
+      await this.executeFeature(featureId, useWorktrees, false, undefined, {
+        continuationPrompt,
+      });
+    } catch (error) {
+      const errorInfo = classifyError(error);
+      if (!errorInfo.isAbort) {
+        this.eventBus.emitAutoModeEvent('auto_mode_error', {
+          featureId,
+          featureName: undefined,
+          branchName: null,
+          error: errorInfo.message,
+          errorType: errorInfo.type,
+          projectPath: this.projectPath,
+        });
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Verify a feature's implementation
+   * @param featureId - The feature ID to verify
+   */
+  async verifyFeature(featureId: string): Promise<boolean> {
+    const feature = await this.featureStateManager.loadFeature(this.projectPath, featureId);
+    let workDir = this.projectPath;
+
+    // Use worktreeResolver to find worktree path (consistent with commitFeature)
+    const branchName = feature?.branchName;
+    if (branchName) {
+      const resolved = await this.worktreeResolver.findWorktreeForBranch(
+        this.projectPath,
+        branchName
+      );
+      if (resolved) {
+        try {
+          await secureFs.access(resolved);
+          workDir = resolved;
+        } catch {
+          // Fall back to project path
+        }
+      }
+    }
+
+    const verificationChecks = [
+      { cmd: 'npm run lint', name: 'Lint' },
+      { cmd: 'npm run typecheck', name: 'Type check' },
+      { cmd: 'npm test', name: 'Tests' },
+      { cmd: 'npm run build', name: 'Build' },
+    ];
+
+    let allPassed = true;
+    const results: Array<{ check: string; passed: boolean; output?: string }> = [];
+
+    for (const check of verificationChecks) {
+      try {
+        const { stdout, stderr } = await execAsync(check.cmd, { cwd: workDir, timeout: 120000 });
+        results.push({ check: check.name, passed: true, output: stdout || stderr });
+      } catch (error) {
+        allPassed = false;
+        results.push({ check: check.name, passed: false, output: (error as Error).message });
+        break;
+      }
+    }
+
+    const runningEntryForVerify = this.concurrencyManager.getRunningFeature(featureId);
+    if (runningEntryForVerify?.isAutoMode) {
+      this.eventBus.emitAutoModeEvent('auto_mode_feature_complete', {
+        featureId,
+        featureName: feature?.title,
+        branchName: feature?.branchName ?? null,
+        executionMode: 'auto',
+        passes: allPassed,
+        message: allPassed
+          ? 'All verification checks passed'
+          : `Verification failed: ${results.find((r) => !r.passed)?.check || 'Unknown'}`,
+        projectPath: this.projectPath,
+      });
+    }
+
+    return allPassed;
+  }
+
+  /**
+   * Commit feature changes
+   * @param featureId - The feature ID to commit
+   * @param providedWorktreePath - Optional worktree path
+   */
+  async commitFeature(featureId: string, providedWorktreePath?: string): Promise<string | null> {
+    let workDir = this.projectPath;
+
+    if (providedWorktreePath) {
+      try {
+        await secureFs.access(providedWorktreePath);
+        workDir = providedWorktreePath;
+      } catch {
+        // Use project path
+      }
+    } else {
+      // Use worktreeResolver instead of manual .worktrees lookup
+      const feature = await this.featureStateManager.loadFeature(this.projectPath, featureId);
+      const branchName = feature?.branchName;
+      if (branchName) {
+        const resolved = await this.worktreeResolver.findWorktreeForBranch(
+          this.projectPath,
+          branchName
+        );
+        if (resolved) {
+          workDir = resolved;
+        }
+      }
+    }
+
+    try {
+      const status = await execGitCommand(['status', '--porcelain'], workDir);
+      if (!status.trim()) {
+        return null;
+      }
+
+      const feature = await this.featureStateManager.loadFeature(this.projectPath, featureId);
+      const title =
+        feature?.description?.split('\n')[0]?.substring(0, 60) || `Feature ${featureId}`;
+      const commitMessage = `feat: ${title}\n\nImplemented by Automaker auto-mode`;
+
+      await execGitCommand(['add', '-A'], workDir);
+      await execGitCommand(['commit', '-m', commitMessage], workDir);
+      const hash = await execGitCommand(['rev-parse', 'HEAD'], workDir);
+
+      const runningEntryForCommit = this.concurrencyManager.getRunningFeature(featureId);
+      if (runningEntryForCommit?.isAutoMode) {
+        this.eventBus.emitAutoModeEvent('auto_mode_feature_complete', {
+          featureId,
+          featureName: feature?.title,
+          branchName: feature?.branchName ?? null,
+          executionMode: 'auto',
+          passes: true,
+          message: `Changes committed: ${hash.trim().substring(0, 8)}`,
+          projectPath: this.projectPath,
+        });
+      }
+
+      return hash.trim();
+    } catch (error) {
+      logger.error(`Commit failed for ${featureId}:`, error);
+      return null;
+    }
+  }
+
+  // ===========================================================================
+  // STATUS AND QUERIES (7 methods)
+  // ===========================================================================
+
+  /**
+   * Get current status (global across all projects)
+   */
+  getStatus(): AutoModeStatus {
+    const allRunning = this.concurrencyManager.getAllRunning();
+    return {
+      isRunning: allRunning.length > 0,
+      runningFeatures: allRunning.map((rf) => rf.featureId),
+      runningCount: allRunning.length,
+    };
+  }
+
+  /**
+   * Get status for this project/worktree
+   * @param branchName - The branch name, or null for main worktree
+   */
+  async getStatusForProject(branchName: string | null = null): Promise<ProjectAutoModeStatus> {
+    const isAutoLoopRunning = this.autoLoopCoordinator.isAutoLoopRunningForProject(
+      this.projectPath,
+      branchName
+    );
+    const config = this.autoLoopCoordinator.getAutoLoopConfigForProject(
+      this.projectPath,
+      branchName
+    );
+    // Use branchName-normalized filter so features with branchName "main"
+    // are correctly matched when querying for the main worktree (null)
+    const runningFeatures = await this.concurrencyManager.getRunningFeaturesForWorktree(
+      this.projectPath,
+      branchName
+    );
+
+    return {
+      isAutoLoopRunning,
+      runningFeatures,
+      runningCount: runningFeatures.length,
+      maxConcurrency: config?.maxConcurrency ?? DEFAULT_MAX_CONCURRENCY,
+      branchName,
+    };
+  }
+
+  /**
+   * Get all active auto loop projects (unique project paths)
+   */
+  getActiveAutoLoopProjects(): string[] {
+    return this.autoLoopCoordinator.getActiveProjects();
+  }
+
+  /**
+   * Get all active auto loop worktrees
+   */
+  getActiveAutoLoopWorktrees(): Array<{ projectPath: string; branchName: string | null }> {
+    return this.autoLoopCoordinator.getActiveWorktrees();
+  }
+
+  /**
+   * Get detailed info about all running agents
+   */
+  async getRunningAgents(): Promise<RunningAgentInfo[]> {
+    const agents = await Promise.all(
+      this.concurrencyManager.getAllRunning().map(async (rf) => {
+        let title: string | undefined;
+        let description: string | undefined;
+        let branchName: string | undefined;
+
+        try {
+          const feature = await this.featureLoader.get(rf.projectPath, rf.featureId);
+          if (feature) {
+            title = feature.title;
+            description = feature.description;
+            branchName = feature.branchName ?? undefined;
+          }
+        } catch {
+          // Silently ignore
+        }
+
+        return {
+          featureId: rf.featureId,
+          projectPath: rf.projectPath,
+          projectName: path.basename(rf.projectPath),
+          isAutoMode: rf.isAutoMode,
+          model: rf.model,
+          provider: rf.provider,
+          title,
+          description,
+          branchName,
+        };
+      })
+    );
+    return agents;
+  }
+
+  /**
+   * Check if there's capacity to start a feature on a worktree
+   * @param featureId - The feature ID to check capacity for
+   */
+  async checkWorktreeCapacity(featureId: string): Promise<WorktreeCapacityInfo> {
+    const feature = await this.featureStateManager.loadFeature(this.projectPath, featureId);
+    const rawBranchName = feature?.branchName ?? null;
+    // Normalize primary branch to null (works for main, master, or any default branch)
+    const primaryBranch = await this.worktreeResolver.getCurrentBranch(this.projectPath);
+    const branchName = rawBranchName === primaryBranch ? null : rawBranchName;
+
+    const maxAgents = await this.autoLoopCoordinator.resolveMaxConcurrency(
+      this.projectPath,
+      branchName
+    );
+    const currentAgents = await this.concurrencyManager.getRunningCountForWorktree(
+      this.projectPath,
+      branchName
+    );
+
+    return {
+      hasCapacity: currentAgents < maxAgents,
+      currentAgents,
+      maxAgents,
+      branchName,
+    };
+  }
+
+  /**
+   * Check if context exists for a feature
+   * @param featureId - The feature ID
+   */
+  async contextExists(featureId: string): Promise<boolean> {
+    return this.recoveryService.contextExists(this.projectPath, featureId);
+  }
+
+  // ===========================================================================
+  // PLAN APPROVAL (4 methods)
+  // ===========================================================================
+
+  /**
+   * Resolve a pending plan approval
+   * @param featureId - The feature ID
+   * @param approved - Whether the plan was approved
+   * @param editedPlan - Optional edited plan content
+   * @param feedback - Optional feedback
+   */
+  async resolvePlanApproval(
+    featureId: string,
+    approved: boolean,
+    editedPlan?: string,
+    feedback?: string
+  ): Promise<{ success: boolean; error?: string }> {
+    const result = await this.planApprovalService.resolveApproval(featureId, approved, {
+      editedPlan,
+      feedback,
+      projectPath: this.projectPath,
+    });
+
+    // Handle recovery case
+    if (result.success && result.needsRecovery) {
+      const feature = await this.featureStateManager.loadFeature(this.projectPath, featureId);
+      if (feature) {
+        const prompts = await getPromptCustomization(this.settingsService, '[Facade]');
+        const planContent = editedPlan || feature.planSpec?.content || '';
+        let continuationPrompt = prompts.taskExecution.continuationAfterApprovalTemplate;
+        continuationPrompt = continuationPrompt.replace(/\{\{userFeedback\}\}/g, feedback || '');
+        continuationPrompt = continuationPrompt.replace(/\{\{approvedPlan\}\}/g, planContent);
+
+        // Start execution async
+        this.executeFeature(featureId, true, false, undefined, { continuationPrompt }).catch(
+          (error) => {
+            logger.error(`Recovery execution failed for feature ${featureId}:`, error);
+          }
+        );
+      }
+    }
+
+    return { success: result.success, error: result.error };
+  }
+
+  /**
+   * Wait for plan approval
+   * @param featureId - The feature ID
+   */
+  waitForPlanApproval(
+    featureId: string
+  ): Promise<{ approved: boolean; editedPlan?: string; feedback?: string }> {
+    return this.planApprovalService.waitForApproval(featureId, this.projectPath);
+  }
+
+  /**
+   * Check if a feature has a pending plan approval
+   * @param featureId - The feature ID
+   */
+  hasPendingApproval(featureId: string): boolean {
+    return this.planApprovalService.hasPendingApproval(featureId, this.projectPath);
+  }
+
+  /**
+   * Cancel a pending plan approval
+   * @param featureId - The feature ID
+   */
+  cancelPlanApproval(featureId: string): void {
+    this.planApprovalService.cancelApproval(featureId, this.projectPath);
+  }
+
+  // ===========================================================================
+  // ANALYSIS AND RECOVERY (3 methods)
+  // ===========================================================================
+
+  /**
+   * Analyze project to gather context
+   *
+   * NOTE: This method requires complex provider integration that is only available
+   * in AutoModeService. The facade exposes the method signature for API compatibility,
+   * but routes should use AutoModeService.analyzeProject() until migration is complete.
+   */
+  async analyzeProject(): Promise<void> {
+    // analyzeProject requires provider.execute which is complex to wire up
+    // For now, throw to indicate routes should use AutoModeService
+    throw new Error(
+      'analyzeProject not fully implemented in facade - use AutoModeService.analyzeProject instead'
+    );
+  }
+
+  /**
+   * Resume interrupted features after server restart
+   */
+  async resumeInterruptedFeatures(): Promise<void> {
+    return this.recoveryService.resumeInterruptedFeatures(this.projectPath);
+  }
+
+  /**
+   * Detect orphaned features (features with missing branches)
+   * @param preloadedFeatures - Optional pre-loaded features to avoid redundant disk reads
+   */
+  async detectOrphanedFeatures(preloadedFeatures?: Feature[]): Promise<OrphanedFeatureInfo[]> {
+    const orphanedFeatures: OrphanedFeatureInfo[] = [];
+
+    try {
+      const allFeatures = preloadedFeatures ?? (await this.featureLoader.getAll(this.projectPath));
+      const featuresWithBranches = allFeatures.filter(
+        (f) => f.branchName && f.branchName.trim() !== ''
+      );
+
+      if (featuresWithBranches.length === 0) {
+        return orphanedFeatures;
+      }
+
+      // Get existing branches (using safe array-based command)
+      const stdout = await execGitCommand(
+        ['for-each-ref', '--format=%(refname:short)', 'refs/heads/'],
+        this.projectPath
+      );
+      const existingBranches = new Set(
+        stdout
+          .trim()
+          .split('\n')
+          .map((b) => b.trim())
+          .filter(Boolean)
+      );
+
+      const primaryBranch = await this.worktreeResolver.getCurrentBranch(this.projectPath);
+
+      for (const feature of featuresWithBranches) {
+        const branchName = feature.branchName!;
+        if (primaryBranch && branchName === primaryBranch) {
+          continue;
+        }
+        if (!existingBranches.has(branchName)) {
+          orphanedFeatures.push({ feature, missingBranch: branchName });
+        }
+      }
+
+      return orphanedFeatures;
+    } catch (error) {
+      logger.error('[detectOrphanedFeatures] Error:', error);
+      return orphanedFeatures;
+    }
+  }
+
+  // ===========================================================================
+  // LIFECYCLE (1 method)
+  // ===========================================================================
+
+  /**
+   * Mark all running features as interrupted
+   * @param reason - Optional reason for the interruption
+   */
+  async markAllRunningFeaturesInterrupted(reason?: string): Promise<void> {
+    const allRunning = this.concurrencyManager.getAllRunning();
+
+    for (const rf of allRunning) {
+      await this.featureStateManager.markFeatureInterrupted(rf.projectPath, rf.featureId, reason);
+    }
+
+    if (allRunning.length > 0) {
+      logger.info(
+        `Marked ${allRunning.length} running feature(s) as interrupted: ${reason || 'no reason provided'}`
+      );
+    }
+  }
+
+  // ===========================================================================
+  // INTERNAL HELPERS
+  // ===========================================================================
+
+  /**
+   * Save execution state for recovery.
+   *
+   * Uses the active auto-loop config for each worktree so that the persisted
+   * state reflects the real branch and maxConcurrency values rather than the
+   * hard-coded fallbacks (null / DEFAULT_MAX_CONCURRENCY).
+   */
+  private async saveExecutionState(): Promise<void> {
+    const projectWorktrees = this.autoLoopCoordinator
+      .getActiveWorktrees()
+      .filter((w) => w.projectPath === this.projectPath);
+
+    if (projectWorktrees.length === 0) {
+      // No active auto loops — save with defaults as a best-effort fallback.
+      return this.saveExecutionStateForProject(null, DEFAULT_MAX_CONCURRENCY);
+    }
+
+    // Save state for every active worktree using its real config values.
+    for (const { branchName } of projectWorktrees) {
+      const config = this.autoLoopCoordinator.getAutoLoopConfigForProject(
+        this.projectPath,
+        branchName
+      );
+      const maxConcurrency = config?.maxConcurrency ?? DEFAULT_MAX_CONCURRENCY;
+      await this.saveExecutionStateForProject(branchName, maxConcurrency);
+    }
+  }
+
+  /**
+   * Save execution state for a specific worktree
+   */
+  private async saveExecutionStateForProject(
+    branchName: string | null,
+    maxConcurrency: number
+  ): Promise<void> {
+    return this.recoveryService.saveExecutionStateForProject(
+      this.projectPath,
+      branchName,
+      maxConcurrency
+    );
+  }
+
+  /**
+   * Clear execution state
+   */
+  private async clearExecutionState(branchName: string | null = null): Promise<void> {
+    return this.recoveryService.clearExecutionState(this.projectPath, branchName);
+  }
+}
diff --git a/temp_repo/apps/server/src/services/auto-mode/global-service.ts b/temp_repo/apps/server/src/services/auto-mode/global-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..478f48b3fcf56188da50f9de2353668f1e7befb2
--- /dev/null
+++ b/temp_repo/apps/server/src/services/auto-mode/global-service.ts
@@ -0,0 +1,224 @@
+/**
+ * GlobalAutoModeService - Global operations for auto-mode that span across all projects
+ *
+ * This service manages global state and operations that are not project-specific:
+ * - Overall status (all running features across all projects)
+ * - Active auto loop projects and worktrees
+ * - Graceful shutdown (mark all features as interrupted)
+ *
+ * Per-project operations should use AutoModeServiceFacade instead.
+ */
+
+import path from 'path';
+import { createLogger } from '@automaker/utils';
+import type { EventEmitter } from '../../lib/events.js';
+import { TypedEventBus } from '../typed-event-bus.js';
+import { ConcurrencyManager } from '../concurrency-manager.js';
+import { WorktreeResolver } from '../worktree-resolver.js';
+import { AutoLoopCoordinator } from '../auto-loop-coordinator.js';
+import { FeatureStateManager } from '../feature-state-manager.js';
+import { FeatureLoader } from '../feature-loader.js';
+import type { SettingsService } from '../settings-service.js';
+import type { SharedServices, AutoModeStatus, RunningAgentInfo } from './types.js';
+
+const logger = createLogger('GlobalAutoModeService');
+
+/**
+ * GlobalAutoModeService provides global operations for auto-mode.
+ *
+ * Created once at server startup, shared across all facades.
+ */
+export class GlobalAutoModeService {
+  private readonly eventBus: TypedEventBus;
+  private readonly concurrencyManager: ConcurrencyManager;
+  private readonly autoLoopCoordinator: AutoLoopCoordinator;
+  private readonly worktreeResolver: WorktreeResolver;
+  private readonly featureStateManager: FeatureStateManager;
+  private readonly featureLoader: FeatureLoader;
+
+  constructor(
+    events: EventEmitter,
+    settingsService: SettingsService | null,
+    featureLoader: FeatureLoader = new FeatureLoader()
+  ) {
+    this.featureLoader = featureLoader;
+    this.eventBus = new TypedEventBus(events);
+    this.worktreeResolver = new WorktreeResolver();
+    this.concurrencyManager = new ConcurrencyManager((p) =>
+      this.worktreeResolver.getCurrentBranch(p)
+    );
+    this.featureStateManager = new FeatureStateManager(events, featureLoader);
+
+    // Create AutoLoopCoordinator with callbacks
+    // IMPORTANT: This coordinator is for MONITORING ONLY (getActiveProjects, getActiveWorktrees).
+    // Facades MUST create their own AutoLoopCoordinator for actual execution.
+    // The executeFeatureFn here is a safety guard - it should never be called.
+    this.autoLoopCoordinator = new AutoLoopCoordinator(
+      this.eventBus,
+      this.concurrencyManager,
+      settingsService,
+      // executeFeatureFn - throws because facades must use their own coordinator for execution
+      async () => {
+        throw new Error(
+          'executeFeatureFn not available in GlobalAutoModeService. ' +
+            'Facades must create their own AutoLoopCoordinator for execution.'
+        );
+      },
+      // getBacklogFeaturesFn
+      async (pPath, branchName) => {
+        const features = await featureLoader.getAll(pPath);
+        // For main worktree (branchName === null), resolve the actual primary branch name
+        // so features with branchName matching the primary branch are included
+        let primaryBranch: string | null = null;
+        if (branchName === null) {
+          primaryBranch = await this.worktreeResolver.getCurrentBranch(pPath);
+        }
+        return features.filter(
+          (f) =>
+            (f.status === 'backlog' || f.status === 'ready') &&
+            (branchName === null
+              ? !f.branchName || (primaryBranch && f.branchName === primaryBranch)
+              : f.branchName === branchName)
+        );
+      },
+      // saveExecutionStateFn - placeholder
+      async () => {},
+      // clearExecutionStateFn - placeholder
+      async () => {},
+      // resetStuckFeaturesFn
+      (pPath) => this.featureStateManager.resetStuckFeatures(pPath),
+      // isFeatureDoneFn
+      (feature) =>
+        feature.status === 'completed' ||
+        feature.status === 'verified' ||
+        feature.status === 'waiting_approval',
+      // isFeatureRunningFn
+      (featureId) => this.concurrencyManager.isRunning(featureId)
+    );
+  }
+
+  /**
+   * Get the shared services for use by facades.
+   * This allows facades to share state with the global service.
+   */
+  getSharedServices(): SharedServices {
+    return {
+      eventBus: this.eventBus,
+      concurrencyManager: this.concurrencyManager,
+      autoLoopCoordinator: this.autoLoopCoordinator,
+      worktreeResolver: this.worktreeResolver,
+    };
+  }
+
+  // ===========================================================================
+  // GLOBAL STATUS (3 methods)
+  // ===========================================================================
+
+  /**
+   * Get global status (all projects combined)
+   */
+  getStatus(): AutoModeStatus {
+    const allRunning = this.concurrencyManager.getAllRunning();
+    return {
+      isRunning: allRunning.length > 0,
+      runningFeatures: allRunning.map((rf) => rf.featureId),
+      runningCount: allRunning.length,
+    };
+  }
+
+  /**
+   * Get all active auto loop projects (unique project paths)
+   */
+  getActiveAutoLoopProjects(): string[] {
+    return this.autoLoopCoordinator.getActiveProjects();
+  }
+
+  /**
+   * Get all active auto loop worktrees
+   */
+  getActiveAutoLoopWorktrees(): Array<{ projectPath: string; branchName: string | null }> {
+    return this.autoLoopCoordinator.getActiveWorktrees();
+  }
+
+  // ===========================================================================
+  // RUNNING AGENTS (1 method)
+  // ===========================================================================
+
+  /**
+   * Get detailed info about all running agents
+   */
+  async getRunningAgents(): Promise<RunningAgentInfo[]> {
+    const agents = await Promise.all(
+      this.concurrencyManager.getAllRunning().map(async (rf) => {
+        let title: string | undefined;
+        let description: string | undefined;
+        let branchName: string | undefined;
+
+        try {
+          const feature = await this.featureLoader.get(rf.projectPath, rf.featureId);
+          if (feature) {
+            title = feature.title;
+            description = feature.description;
+            branchName = feature.branchName ?? undefined;
+          }
+        } catch {
+          // Silently ignore
+        }
+
+        return {
+          featureId: rf.featureId,
+          projectPath: rf.projectPath,
+          projectName: path.basename(rf.projectPath),
+          isAutoMode: rf.isAutoMode,
+          model: rf.model,
+          provider: rf.provider,
+          title,
+          description,
+          branchName,
+        };
+      })
+    );
+    return agents;
+  }
+
+  // ===========================================================================
+  // LIFECYCLE (1 method)
+  // ===========================================================================
+
+  /**
+   * Mark all running features as interrupted.
+   * Called during graceful shutdown.
+   *
+   * @param reason - Optional reason for the interruption
+   */
+  async markAllRunningFeaturesInterrupted(reason?: string): Promise<void> {
+    const allRunning = this.concurrencyManager.getAllRunning();
+
+    for (const rf of allRunning) {
+      await this.featureStateManager.markFeatureInterrupted(rf.projectPath, rf.featureId, reason);
+    }
+
+    if (allRunning.length > 0) {
+      logger.info(
+        `Marked ${allRunning.length} running feature(s) as interrupted: ${reason || 'no reason provided'}`
+      );
+    }
+  }
+
+  /**
+   * Reconcile all feature states for a project on server startup.
+   *
+   * Resets features stuck in transient states (in_progress, interrupted, pipeline_*)
+   * back to a resting state and emits events so the UI reflects corrected states.
+   *
+   * This should be called during server initialization to handle:
+   * - Clean shutdown: features already marked as interrupted
+   * - Forced kill / crash: features left in in_progress or pipeline_* states
+   *
+   * @param projectPath - The project path to reconcile
+   * @returns The number of features that were reconciled
+   */
+  async reconcileFeatureStates(projectPath: string): Promise<number> {
+    return this.featureStateManager.reconcileAllFeatureStates(projectPath);
+  }
+}
diff --git a/temp_repo/apps/server/src/services/auto-mode/index.ts b/temp_repo/apps/server/src/services/auto-mode/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..40e0ee8489b3f65076aee523ae9130620102e44b
--- /dev/null
+++ b/temp_repo/apps/server/src/services/auto-mode/index.ts
@@ -0,0 +1,77 @@
+/**
+ * Auto Mode Service Module
+ *
+ * Entry point for auto-mode functionality. Exports:
+ * - GlobalAutoModeService: Global operations that span all projects
+ * - AutoModeServiceFacade: Per-project facade for auto-mode operations
+ * - createAutoModeFacade: Convenience factory function
+ * - Types for route consumption
+ */
+
+// Main exports
+export { GlobalAutoModeService } from './global-service.js';
+export { AutoModeServiceFacade } from './facade.js';
+export { AutoModeServiceCompat } from './compat.js';
+
+// Convenience factory function
+import { AutoModeServiceFacade } from './facade.js';
+import type { FacadeOptions } from './types.js';
+
+/**
+ * Create an AutoModeServiceFacade instance for a specific project.
+ *
+ * This is a convenience wrapper around AutoModeServiceFacade.create().
+ *
+ * @param projectPath - The project path this facade operates on
+ * @param options - Configuration options including events, settingsService, featureLoader
+ * @returns A new AutoModeServiceFacade instance
+ *
+ * @example
+ * ```typescript
+ * import { createAutoModeFacade } from './services/auto-mode';
+ *
+ * const facade = createAutoModeFacade('/path/to/project', {
+ *   events: eventEmitter,
+ *   settingsService,
+ * });
+ *
+ * // Start auto mode
+ * await facade.startAutoLoop(null, 3);
+ *
+ * // Check status
+ * const status = facade.getStatusForProject();
+ * ```
+ */
+export function createAutoModeFacade(
+  projectPath: string,
+  options: FacadeOptions
+): AutoModeServiceFacade {
+  return AutoModeServiceFacade.create(projectPath, options);
+}
+
+// Type exports from types.ts
+export type {
+  FacadeOptions,
+  SharedServices,
+  AutoModeStatus,
+  ProjectAutoModeStatus,
+  WorktreeCapacityInfo,
+  RunningAgentInfo,
+  OrphanedFeatureInfo,
+  FacadeError,
+  GlobalAutoModeOperations,
+} from './types.js';
+
+// Re-export types from extracted services for route convenience
+export type {
+  AutoModeConfig,
+  ProjectAutoLoopState,
+  RunningFeature,
+  AcquireParams,
+  WorktreeInfo,
+  PipelineContext,
+  PipelineStatusInfo,
+  PlanApprovalResult,
+  ResolveApprovalResult,
+  ExecutionState,
+} from './types.js';
diff --git a/temp_repo/apps/server/src/services/auto-mode/types.ts b/temp_repo/apps/server/src/services/auto-mode/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fc82cb1396cd59afbce0bb40853c2facf97601fb
--- /dev/null
+++ b/temp_repo/apps/server/src/services/auto-mode/types.ts
@@ -0,0 +1,148 @@
+/**
+ * Facade Types - Type definitions for AutoModeServiceFacade
+ *
+ * Contains:
+ * - FacadeOptions interface for factory configuration
+ * - Re-exports of types from extracted services that routes might need
+ * - Additional types for facade method signatures
+ */
+
+import type { EventEmitter } from '../../lib/events.js';
+import type { Feature, ModelProvider } from '@automaker/types';
+import type { SettingsService } from '../settings-service.js';
+import type { FeatureLoader } from '../feature-loader.js';
+import type { ConcurrencyManager } from '../concurrency-manager.js';
+import type { AutoLoopCoordinator } from '../auto-loop-coordinator.js';
+import type { WorktreeResolver } from '../worktree-resolver.js';
+import type { TypedEventBus } from '../typed-event-bus.js';
+import type { ClaudeUsageService } from '../claude-usage-service.js';
+
+// Re-export types from extracted services for route consumption
+export type { AutoModeConfig, ProjectAutoLoopState } from '../auto-loop-coordinator.js';
+
+export type { RunningFeature, AcquireParams } from '../concurrency-manager.js';
+
+export type { WorktreeInfo } from '../worktree-resolver.js';
+
+export type { PipelineContext, PipelineStatusInfo } from '../pipeline-orchestrator.js';
+
+export type { PlanApprovalResult, ResolveApprovalResult } from '../plan-approval-service.js';
+
+export type { ExecutionState } from '../recovery-service.js';
+
+/**
+ * Shared services that can be passed to facades to enable state sharing
+ */
+export interface SharedServices {
+  /** TypedEventBus for typed event emission */
+  eventBus: TypedEventBus;
+  /** ConcurrencyManager for tracking running features across all projects */
+  concurrencyManager: ConcurrencyManager;
+  /** AutoLoopCoordinator for managing auto loop state across all projects */
+  autoLoopCoordinator: AutoLoopCoordinator;
+  /** WorktreeResolver for git worktree operations */
+  worktreeResolver: WorktreeResolver;
+}
+
+/**
+ * Options for creating an AutoModeServiceFacade instance
+ */
+export interface FacadeOptions {
+  /** EventEmitter for broadcasting events to clients */
+  events: EventEmitter;
+  /** SettingsService for reading project/global settings (optional) */
+  settingsService?: SettingsService | null;
+  /** FeatureLoader for loading feature data (optional, defaults to new FeatureLoader()) */
+  featureLoader?: FeatureLoader;
+  /** Shared services for state sharing across facades (optional) */
+  sharedServices?: SharedServices;
+  /** ClaudeUsageService for checking usage limits before picking up features (optional) */
+  claudeUsageService?: ClaudeUsageService | null;
+}
+
+/**
+ * Status returned by getStatus()
+ */
+export interface AutoModeStatus {
+  isRunning: boolean;
+  runningFeatures: string[];
+  runningCount: number;
+}
+
+/**
+ * Status returned by getStatusForProject()
+ */
+export interface ProjectAutoModeStatus {
+  isAutoLoopRunning: boolean;
+  runningFeatures: string[];
+  runningCount: number;
+  maxConcurrency: number;
+  branchName: string | null;
+}
+
+/**
+ * Capacity info returned by checkWorktreeCapacity()
+ */
+export interface WorktreeCapacityInfo {
+  hasCapacity: boolean;
+  currentAgents: number;
+  maxAgents: number;
+  branchName: string | null;
+}
+
+/**
+ * Running agent info returned by getRunningAgents()
+ */
+export interface RunningAgentInfo {
+  featureId: string;
+  projectPath: string;
+  projectName: string;
+  isAutoMode: boolean;
+  model?: string;
+  provider?: ModelProvider;
+  title?: string;
+  description?: string;
+  branchName?: string;
+}
+
+/**
+ * Orphaned feature info returned by detectOrphanedFeatures()
+ */
+export interface OrphanedFeatureInfo {
+  feature: Feature;
+  missingBranch: string;
+}
+
+/**
+ * Structured error object returned/emitted by facade methods.
+ * Provides consistent error information for callers and UI consumers.
+ */
+export interface FacadeError {
+  /** The facade method where the error originated */
+  method: string;
+  /** Classified error type from the error handler */
+  errorType: import('@automaker/types').ErrorType;
+  /** Human-readable error message */
+  message: string;
+  /** Feature ID if the error is associated with a specific feature */
+  featureId?: string;
+  /** Project path where the error occurred */
+  projectPath: string;
+}
+
+/**
+ * Interface describing global auto-mode operations (not project-specific).
+ * Used by routes that need global state access.
+ */
+export interface GlobalAutoModeOperations {
+  /** Get global status (all projects combined) */
+  getStatus(): AutoModeStatus;
+  /** Get all active auto loop projects (unique project paths) */
+  getActiveAutoLoopProjects(): string[];
+  /** Get all active auto loop worktrees */
+  getActiveAutoLoopWorktrees(): Array<{ projectPath: string; branchName: string | null }>;
+  /** Get detailed info about all running agents */
+  getRunningAgents(): Promise<RunningAgentInfo[]>;
+  /** Mark all running features as interrupted (for graceful shutdown) */
+  markAllRunningFeaturesInterrupted(reason?: string): Promise<void>;
+}
diff --git a/temp_repo/apps/server/src/services/branch-commit-log-service.ts b/temp_repo/apps/server/src/services/branch-commit-log-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9666f98cfe22adde081e87bd1cf1232bf3064e28
--- /dev/null
+++ b/temp_repo/apps/server/src/services/branch-commit-log-service.ts
@@ -0,0 +1,172 @@
+/**
+ * Service for fetching branch commit log data.
+ *
+ * Extracts the heavy Git command execution and parsing logic from the
+ * branch-commit-log route handler so the handler only validates input,
+ * invokes this service, streams lifecycle events, and sends the response.
+ */
+
+import { execGitCommand } from '../lib/git.js';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface BranchCommit {
+  hash: string;
+  shortHash: string;
+  author: string;
+  authorEmail: string;
+  date: string;
+  subject: string;
+  body: string;
+  files: string[];
+}
+
+export interface BranchCommitLogResult {
+  branch: string;
+  commits: BranchCommit[];
+  total: number;
+}
+
+// ============================================================================
+// Service
+// ============================================================================
+
+/**
+ * Fetch the commit log for a specific branch (or HEAD).
+ *
+ * Runs a single `git log --name-only` invocation (plus `git rev-parse`
+ * when branchName is omitted) inside the given worktree path and
+ * returns a structured result.
+ *
+ * @param worktreePath - Absolute path to the worktree / repository
+ * @param branchName   - Branch to query (omit or pass undefined for HEAD)
+ * @param limit        - Maximum number of commits to return (clamped 1-100)
+ */
+export async function getBranchCommitLog(
+  worktreePath: string,
+  branchName: string | undefined,
+  limit: number
+): Promise<BranchCommitLogResult> {
+  // Clamp limit to a reasonable range
+  const parsedLimit = Number(limit);
+  const commitLimit = Math.min(Math.max(1, Number.isFinite(parsedLimit) ? parsedLimit : 20), 100);
+
+  // Use the specified branch or default to HEAD
+  const targetRef = branchName || 'HEAD';
+
+  // Fetch commit metadata AND file lists in a single git call.
+  // Uses custom record separators so we can parse both metadata and
+  // --name-only output from one invocation, eliminating the previous
+  // N+1 pattern that spawned a separate `git diff-tree` per commit.
+  //
+  // -m causes merge commits to be diffed against each parent so all
+  // files touched by the merge are listed (without -m, --name-only
+  // produces no file output for merge commits because they have 2+ parents).
+  // This means merge commits appear multiple times in the output (once per
+  // parent), so we deduplicate by hash below and merge their file lists.
+  // We over-fetch (2× the limit) to compensate for -m duplicating merge
+  // commit entries, then trim the result to the requested limit.
+  // Use ASCII control characters as record separators – these cannot appear in
+  // git commit messages, so these delimiters are safe regardless of commit
+  // body content.  %x00 and %x01 in git's format string emit literal NUL /
+  // SOH bytes respectively.
+  //
+  // COMMIT_SEP (\x00) – marks the start of each commit record.
+  // META_END   (\x01) – separates commit metadata from the --name-only file list.
+  //
+  // Full per-commit layout emitted by git:
+  //   \x00\n<hash>\n<shorthash>\n...\n<subject>\n<body>\x01<files...>
+  const COMMIT_SEP = '\x00';
+  const META_END = '\x01';
+  const fetchLimit = commitLimit * 2;
+
+  const logOutput = await execGitCommand(
+    [
+      'log',
+      targetRef,
+      `--max-count=${fetchLimit}`,
+      '-m',
+      '--name-only',
+      `--format=%x00%n%H%n%h%n%an%n%ae%n%aI%n%s%n%b%x01`,
+    ],
+    worktreePath
+  );
+
+  // Split output into per-commit blocks and drop the empty first chunk
+  // (the output starts with a NUL commit separator).
+  const commitBlocks = logOutput.split(COMMIT_SEP).filter((block) => block.trim());
+
+  // Use a Map to deduplicate merge commit entries (which appear once per
+  // parent when -m is used) while preserving insertion order.
+  const commitMap = new Map<string, BranchCommit>();
+
+  for (const block of commitBlocks) {
+    const metaEndIdx = block.indexOf(META_END);
+    if (metaEndIdx === -1) continue; // malformed block, skip
+
+    // --- Parse metadata (everything before the META_END delimiter) ---
+    const metaRaw = block.substring(0, metaEndIdx);
+    const metaLines = metaRaw.split('\n');
+
+    // The first line may be empty (newline right after COMMIT_SEP), skip it
+    const nonEmptyStart = metaLines.findIndex((l) => l.trim() !== '');
+    if (nonEmptyStart === -1) continue;
+
+    const fields = metaLines.slice(nonEmptyStart);
+    if (fields.length < 6) continue; // need at least hash..subject
+
+    const hash = fields[0].trim();
+    if (!hash) continue; // defensive: skip if hash is empty
+    const shortHash = fields[1]?.trim() ?? '';
+    const author = fields[2]?.trim() ?? '';
+    const authorEmail = fields[3]?.trim() ?? '';
+    const date = fields[4]?.trim() ?? '';
+    const subject = fields[5]?.trim() ?? '';
+    const body = fields.slice(6).join('\n').trim();
+
+    // --- Parse file list (everything after the META_END delimiter) ---
+    const filesRaw = block.substring(metaEndIdx + META_END.length);
+    const blockFiles = filesRaw
+      .trim()
+      .split('\n')
+      .filter((f) => f.trim());
+
+    // Merge file lists for duplicate entries (merge commits with -m)
+    const existing = commitMap.get(hash);
+    if (existing) {
+      // Add new files to the existing entry's file set
+      const fileSet = new Set(existing.files);
+      for (const f of blockFiles) fileSet.add(f);
+      existing.files = [...fileSet];
+    } else {
+      commitMap.set(hash, {
+        hash,
+        shortHash,
+        author,
+        authorEmail,
+        date,
+        subject,
+        body,
+        files: [...new Set(blockFiles)],
+      });
+    }
+  }
+
+  // Trim to the requested limit (we over-fetched to account for -m duplicates)
+  const commits = [...commitMap.values()].slice(0, commitLimit);
+
+  // If branchName wasn't specified, get current branch for display
+  let displayBranch = branchName;
+  if (!displayBranch) {
+    const branchOutput = await execGitCommand(['rev-parse', '--abbrev-ref', 'HEAD'], worktreePath);
+    displayBranch = branchOutput.trim();
+  }
+
+  return {
+    branch: displayBranch,
+    commits,
+    total: commits.length,
+  };
+}
diff --git a/temp_repo/apps/server/src/services/branch-sync-service.ts b/temp_repo/apps/server/src/services/branch-sync-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6b9d48c358242a66f5b249a99443d4097e4d9def
--- /dev/null
+++ b/temp_repo/apps/server/src/services/branch-sync-service.ts
@@ -0,0 +1,426 @@
+/**
+ * branch-sync-service - Sync a local base branch with its remote tracking branch
+ *
+ * Provides logic to detect remote tracking branches, check whether a branch
+ * is checked out in any worktree, and fast-forward a local branch to match
+ * its remote counterpart.  Extracted from the worktree create route so
+ * the git logic is decoupled from HTTP request/response handling.
+ */
+
+import { createLogger, getErrorMessage } from '@automaker/utils';
+import { execGitCommand } from '../lib/git.js';
+
+const logger = createLogger('BranchSyncService');
+
+/** Timeout for git fetch operations (30 seconds) */
+const FETCH_TIMEOUT_MS = 30_000;
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * Result of attempting to sync a base branch with its remote.
+ */
+export interface BaseBranchSyncResult {
+  /** Whether the sync was attempted */
+  attempted: boolean;
+  /** Whether the sync succeeded */
+  synced: boolean;
+  /** Whether the ref was resolved (but not synced, e.g. remote ref, tag, or commit hash) */
+  resolved?: boolean;
+  /** The remote that was synced from (e.g. 'origin') */
+  remote?: string;
+  /** The commit hash the base branch points to after sync */
+  commitHash?: string;
+  /** Human-readable message about the sync result */
+  message?: string;
+  /** Whether the branch had diverged (local commits ahead of remote) */
+  diverged?: boolean;
+  /** Whether the user can proceed with a stale local copy */
+  canProceedWithStale?: boolean;
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+/**
+ * Detect the remote tracking branch for a given local branch.
+ *
+ * @param projectPath - Path to the git repository
+ * @param branchName - Local branch name to check (e.g. 'main')
+ * @returns Object with remote name and remote branch, or null if no tracking branch
+ */
+export async function getTrackingBranch(
+  projectPath: string,
+  branchName: string
+): Promise<{ remote: string; remoteBranch: string } | null> {
+  try {
+    // git rev-parse --abbrev-ref <branch>@{upstream} returns e.g. "origin/main"
+    const upstream = await execGitCommand(
+      ['rev-parse', '--abbrev-ref', `${branchName}@{upstream}`],
+      projectPath
+    );
+    const trimmed = upstream.trim();
+    if (!trimmed) return null;
+
+    // First, attempt to determine the remote name explicitly via git config
+    // so that remotes whose names contain slashes are handled correctly.
+    let remote: string | null = null;
+    try {
+      const configRemote = await execGitCommand(
+        ['config', '--get', `branch.${branchName}.remote`],
+        projectPath
+      );
+      const configRemoteTrimmed = configRemote.trim();
+      if (configRemoteTrimmed) {
+        remote = configRemoteTrimmed;
+      }
+    } catch {
+      // git config lookup failed — will fall back to string splitting below
+    }
+
+    if (remote) {
+      // Strip the known remote prefix (plus the separating '/') to get the remote branch.
+      // The upstream string is expected to be "<remote>/<remoteBranch>".
+      const prefix = `${remote}/`;
+      if (trimmed.startsWith(prefix)) {
+        return {
+          remote,
+          remoteBranch: trimmed.substring(prefix.length),
+        };
+      }
+      // Upstream doesn't start with the expected prefix — fall through to split
+    }
+
+    // Fall back: split on the FIRST slash, which favors the common case of
+    // single-name remotes with slash-containing branch names (e.g.
+    // "origin/feature/foo" → remote="origin", remoteBranch="feature/foo").
+    // Remotes with slashes in their names are uncommon and are already handled
+    // by the git-config lookup above; this fallback only runs when that lookup
+    // fails, so optimizing for single-name remotes is the safer default.
+    const slashIndex = trimmed.indexOf('/');
+    if (slashIndex > 0) {
+      return {
+        remote: trimmed.substring(0, slashIndex),
+        remoteBranch: trimmed.substring(slashIndex + 1),
+      };
+    }
+    return null;
+  } catch {
+    // No upstream tracking branch configured
+    return null;
+  }
+}
+
+/**
+ * Check whether a branch is checked out in ANY worktree (main or linked).
+ * Uses `git worktree list --porcelain` to enumerate all worktrees and
+ * checks if any of them has the given branch as their HEAD.
+ *
+ * Returns the absolute path of the worktree where the branch is checked out,
+ * or null if the branch is not checked out anywhere. Callers can use the
+ * returned path to run commands (e.g. `git merge`) inside the correct worktree.
+ *
+ * This prevents using `git update-ref` on a branch that is checked out in
+ * a linked worktree, which would desync that worktree's HEAD.
+ */
+export async function isBranchCheckedOut(
+  projectPath: string,
+  branchName: string
+): Promise<string | null> {
+  try {
+    const stdout = await execGitCommand(['worktree', 'list', '--porcelain'], projectPath);
+    const lines = stdout.split('\n');
+    let currentWorktreePath: string | null = null;
+    let currentBranch: string | null = null;
+
+    for (const line of lines) {
+      if (line.startsWith('worktree ')) {
+        currentWorktreePath = line.slice(9);
+      } else if (line.startsWith('branch ')) {
+        currentBranch = line.slice(7).replace('refs/heads/', '');
+      } else if (line === '') {
+        // End of a worktree entry — check for match, then reset for the next
+        if (currentBranch === branchName && currentWorktreePath) {
+          return currentWorktreePath;
+        }
+        currentWorktreePath = null;
+        currentBranch = null;
+      }
+    }
+
+    // Check the last entry (if output doesn't end with a blank line)
+    if (currentBranch === branchName && currentWorktreePath) {
+      return currentWorktreePath;
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Build a BaseBranchSyncResult for cases where we proceed with a stale local copy.
+ * Extracts the repeated pattern of getting the short commit hash with a fallback.
+ */
+export async function buildStaleResult(
+  projectPath: string,
+  branchName: string,
+  remote: string | undefined,
+  message: string,
+  extra?: Partial<BaseBranchSyncResult>
+): Promise<BaseBranchSyncResult> {
+  let commitHash: string | undefined;
+  try {
+    const hash = await execGitCommand(['rev-parse', '--short', branchName], projectPath);
+    commitHash = hash.trim();
+  } catch {
+    /* ignore — commit hash is non-critical */
+  }
+  return {
+    attempted: true,
+    synced: false,
+    remote,
+    commitHash,
+    message,
+    canProceedWithStale: true,
+    ...extra,
+  };
+}
+
+// ============================================================================
+// Main Sync Function
+// ============================================================================
+
+/**
+ * Sync a local base branch with its remote tracking branch using fast-forward only.
+ *
+ * This function:
+ * 1. Detects the remote tracking branch for the given local branch
+ * 2. Fetches latest from that remote (unless skipFetch is true)
+ * 3. Attempts a fast-forward-only update of the local branch
+ * 4. If the branch has diverged, reports the divergence and allows proceeding with stale copy
+ * 5. If no remote tracking branch exists, skips silently
+ *
+ * @param projectPath - Path to the git repository
+ * @param branchName - The local branch name to sync (e.g. 'main')
+ * @param skipFetch - When true, skip the internal git fetch (caller has already fetched)
+ * @returns Sync result with status information
+ */
+export async function syncBaseBranch(
+  projectPath: string,
+  branchName: string,
+  skipFetch = false
+): Promise<BaseBranchSyncResult> {
+  // Check if the branch exists as a local branch (under refs/heads/).
+  // This correctly handles branch names containing slashes (e.g. "feature/abc",
+  // "fix/issue-123") which are valid local branch names, not remote refs.
+  let existsLocally = false;
+  try {
+    await execGitCommand(['rev-parse', '--verify', `refs/heads/${branchName}`], projectPath);
+    existsLocally = true;
+  } catch {
+    existsLocally = false;
+  }
+
+  if (!existsLocally) {
+    // Not a local branch — check if it's a valid ref (remote ref, tag, or commit hash).
+    // No synchronization is performed here; we only resolve the ref to a commit hash.
+    try {
+      const commitHash = await execGitCommand(['rev-parse', '--short', branchName], projectPath);
+      return {
+        attempted: false,
+        synced: false,
+        resolved: true,
+        commitHash: commitHash.trim(),
+        message: `Ref '${branchName}' resolved (not a local branch; no sync performed)`,
+      };
+    } catch {
+      return {
+        attempted: false,
+        synced: false,
+        message: `Ref '${branchName}' not found`,
+      };
+    }
+  }
+
+  // Detect remote tracking branch
+  const tracking = await getTrackingBranch(projectPath, branchName);
+  if (!tracking) {
+    // No remote tracking branch — skip silently
+    logger.info(`Branch '${branchName}' has no remote tracking branch, skipping sync`);
+    try {
+      const commitHash = await execGitCommand(['rev-parse', '--short', branchName], projectPath);
+      return {
+        attempted: false,
+        synced: false,
+        commitHash: commitHash.trim(),
+        message: `Branch '${branchName}' has no remote tracking branch`,
+      };
+    } catch {
+      return {
+        attempted: false,
+        synced: false,
+        message: `Branch '${branchName}' has no remote tracking branch`,
+      };
+    }
+  }
+
+  logger.info(
+    `Syncing base branch '${branchName}' from ${tracking.remote}/${tracking.remoteBranch}`
+  );
+
+  // Fetch the specific remote unless the caller has already performed a fetch
+  // (e.g. via `git fetch --all`) and passed skipFetch=true to avoid redundant work.
+  if (!skipFetch) {
+    try {
+      const fetchController = new AbortController();
+      const fetchTimer = setTimeout(() => fetchController.abort(), FETCH_TIMEOUT_MS);
+      try {
+        await execGitCommand(
+          ['fetch', tracking.remote, tracking.remoteBranch, '--quiet'],
+          projectPath,
+          undefined,
+          fetchController
+        );
+      } finally {
+        clearTimeout(fetchTimer);
+      }
+    } catch (fetchErr) {
+      // Fetch failed — network error, auth error, etc.
+      // Allow proceeding with stale local copy
+      const errMsg = getErrorMessage(fetchErr);
+      logger.warn(`Failed to fetch ${tracking.remote}/${tracking.remoteBranch}: ${errMsg}`);
+      return buildStaleResult(
+        projectPath,
+        branchName,
+        tracking.remote,
+        `Failed to fetch from remote: ${errMsg}. Proceeding with local copy.`
+      );
+    }
+  } else {
+    logger.info(`Skipping fetch for '${branchName}' (caller already fetched from remotes)`);
+  }
+
+  // Check if the local branch is behind, ahead, or diverged from the remote
+  const remoteRef = `${tracking.remote}/${tracking.remoteBranch}`;
+  try {
+    // Count commits ahead and behind
+    const revListOutput = await execGitCommand(
+      ['rev-list', '--left-right', '--count', `${branchName}...${remoteRef}`],
+      projectPath
+    );
+    const parts = revListOutput.trim().split(/\s+/);
+    const ahead = parseInt(parts[0], 10) || 0;
+    const behind = parseInt(parts[1], 10) || 0;
+
+    if (ahead === 0 && behind === 0) {
+      // Already up to date
+      const commitHash = await execGitCommand(['rev-parse', '--short', branchName], projectPath);
+      logger.info(`Branch '${branchName}' is already up to date with ${remoteRef}`);
+      return {
+        attempted: true,
+        synced: true,
+        remote: tracking.remote,
+        commitHash: commitHash.trim(),
+        message: `Branch '${branchName}' is already up to date`,
+      };
+    }
+
+    if (ahead > 0 && behind > 0) {
+      // Branch has diverged — cannot fast-forward
+      logger.warn(
+        `Branch '${branchName}' has diverged from ${remoteRef} (${ahead} ahead, ${behind} behind)`
+      );
+      return buildStaleResult(
+        projectPath,
+        branchName,
+        tracking.remote,
+        `Branch '${branchName}' has diverged from ${remoteRef} (${ahead} commit(s) ahead, ${behind} behind). Using local copy to avoid overwriting local commits.`,
+        { diverged: true }
+      );
+    }
+
+    if (ahead > 0 && behind === 0) {
+      // Local is ahead — nothing to pull, already has everything from remote plus more
+      const commitHash = await execGitCommand(['rev-parse', '--short', branchName], projectPath);
+      logger.info(`Branch '${branchName}' is ${ahead} commit(s) ahead of ${remoteRef}`);
+      return {
+        attempted: true,
+        synced: true,
+        remote: tracking.remote,
+        commitHash: commitHash.trim(),
+        message: `Branch '${branchName}' is ${ahead} commit(s) ahead of remote`,
+      };
+    }
+
+    // behind > 0 && ahead === 0 — can fast-forward
+    logger.info(
+      `Branch '${branchName}' is ${behind} commit(s) behind ${remoteRef}, fast-forwarding`
+    );
+
+    // Determine whether the branch is currently checked out (returns the
+    // worktree path where it is checked out, or null if not checked out)
+    const worktreePath = await isBranchCheckedOut(projectPath, branchName);
+
+    if (worktreePath) {
+      // Branch is checked out in a worktree — use git merge --ff-only
+      // Run the merge inside the worktree that has the branch checked out
+      try {
+        await execGitCommand(['merge', '--ff-only', remoteRef], worktreePath);
+      } catch (mergeErr) {
+        const errMsg = getErrorMessage(mergeErr);
+        logger.warn(`Fast-forward merge failed for '${branchName}': ${errMsg}`);
+        return buildStaleResult(
+          projectPath,
+          branchName,
+          tracking.remote,
+          `Fast-forward merge failed: ${errMsg}. Proceeding with local copy.`
+        );
+      }
+    } else {
+      // Branch is NOT checked out — use git update-ref to fast-forward without checkout
+      // This is safe because we already verified the branch is strictly behind (ahead === 0)
+      try {
+        const remoteCommit = await execGitCommand(['rev-parse', remoteRef], projectPath);
+        await execGitCommand(
+          ['update-ref', `refs/heads/${branchName}`, remoteCommit.trim()],
+          projectPath
+        );
+      } catch (updateErr) {
+        const errMsg = getErrorMessage(updateErr);
+        logger.warn(`update-ref failed for '${branchName}': ${errMsg}`);
+        return buildStaleResult(
+          projectPath,
+          branchName,
+          tracking.remote,
+          `Failed to fast-forward branch: ${errMsg}. Proceeding with local copy.`
+        );
+      }
+    }
+
+    // Successfully fast-forwarded
+    const commitHash = await execGitCommand(['rev-parse', '--short', branchName], projectPath);
+    logger.info(`Successfully synced '${branchName}' to ${commitHash.trim()} from ${remoteRef}`);
+    return {
+      attempted: true,
+      synced: true,
+      remote: tracking.remote,
+      commitHash: commitHash.trim(),
+      message: `Fast-forwarded '${branchName}' by ${behind} commit(s) from ${remoteRef}`,
+    };
+  } catch (err) {
+    // Unexpected error during rev-list or merge — proceed with stale
+    const errMsg = getErrorMessage(err);
+    logger.warn(`Unexpected error syncing '${branchName}': ${errMsg}`);
+    return buildStaleResult(
+      projectPath,
+      branchName,
+      tracking.remote,
+      `Sync failed: ${errMsg}. Proceeding with local copy.`
+    );
+  }
+}
diff --git a/temp_repo/apps/server/src/services/branch-utils.ts b/temp_repo/apps/server/src/services/branch-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9a618da065d98564eb468981777d80e0b52df2ef
--- /dev/null
+++ b/temp_repo/apps/server/src/services/branch-utils.ts
@@ -0,0 +1,170 @@
+/**
+ * branch-utils - Shared git branch helper utilities
+ *
+ * Provides common git operations used by both checkout-branch-service and
+ * worktree-branch-service. Extracted to avoid duplication and ensure
+ * consistent behaviour across branch-related services.
+ */
+
+import { createLogger, getErrorMessage } from '@automaker/utils';
+import { execGitCommand, execGitCommandWithLockRetry } from '../lib/git.js';
+
+const logger = createLogger('BranchUtils');
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface HasAnyChangesOptions {
+  /**
+   * When true, lines that refer to worktree-internal paths (containing
+   * ".worktrees/" or ending with ".worktrees") are excluded from the count.
+   * Use this in contexts where worktree directory entries should not be
+   * considered as real working-tree changes (e.g. worktree-branch-service).
+   */
+  excludeWorktreePaths?: boolean;
+  /**
+   * When true (default), untracked files (lines starting with "??") are
+   * included in the change count. When false, untracked files are ignored so
+   * that hasAnyChanges() is consistent with stashChanges() called without
+   * --include-untracked.
+   */
+  includeUntracked?: boolean;
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+/**
+ * Returns true when a `git status --porcelain` output line refers to a
+ * worktree-internal path that should be ignored when deciding whether there
+ * are "real" local changes.
+ */
+function isExcludedWorktreeLine(line: string): boolean {
+  return line.includes('.worktrees/') || line.endsWith('.worktrees');
+}
+
+// ============================================================================
+// Exported Utilities
+// ============================================================================
+
+/**
+ * Check if there are any changes that should be stashed.
+ *
+ * @param cwd - Working directory of the git repository / worktree
+ * @param options - Optional flags controlling which lines are counted
+ * @param options.excludeWorktreePaths - When true, lines matching worktree
+ *   internal paths are excluded so they are not mistaken for real changes
+ * @param options.includeUntracked - When false, untracked files (lines
+ *   starting with "??") are excluded so this is consistent with a
+ *   stashChanges() call that does not pass --include-untracked.
+ *   Defaults to true.
+ */
+export async function hasAnyChanges(cwd: string, options?: HasAnyChangesOptions): Promise<boolean> {
+  try {
+    const includeUntracked = options?.includeUntracked ?? true;
+    const stdout = await execGitCommand(['status', '--porcelain'], cwd);
+    const lines = stdout
+      .trim()
+      .split('\n')
+      .filter((line) => {
+        if (!line.trim()) return false;
+        if (options?.excludeWorktreePaths && isExcludedWorktreeLine(line)) return false;
+        if (!includeUntracked && line.startsWith('??')) return false;
+        return true;
+      });
+    return lines.length > 0;
+  } catch (err) {
+    logger.error('hasAnyChanges: execGitCommand failed — returning false', {
+      cwd,
+      error: getErrorMessage(err),
+    });
+    return false;
+  }
+}
+
+/**
+ * Stash all local changes (including untracked files if requested).
+ * Returns true if a stash was created, false if there was nothing to stash.
+ * Throws on unexpected errors so callers abort rather than proceeding silently.
+ *
+ * @param cwd - Working directory of the git repository / worktree
+ * @param message - Stash message
+ * @param includeUntracked - When true, passes `--include-untracked` to git stash
+ */
+export async function stashChanges(
+  cwd: string,
+  message: string,
+  includeUntracked: boolean = true
+): Promise<boolean> {
+  try {
+    const args = ['stash', 'push'];
+    if (includeUntracked) {
+      args.push('--include-untracked');
+    }
+    args.push('-m', message);
+
+    const stdout = await execGitCommandWithLockRetry(args, cwd);
+
+    // git exits 0 but prints a benign message when there is nothing to stash
+    const stdoutLower = stdout.toLowerCase();
+    if (
+      stdoutLower.includes('no local changes to save') ||
+      stdoutLower.includes('nothing to stash')
+    ) {
+      logger.debug('stashChanges: nothing to stash', { cwd, message, stdout });
+      return false;
+    }
+
+    return true;
+  } catch (error) {
+    const errorMsg = getErrorMessage(error);
+
+    // Unexpected error – log full details and re-throw so the caller aborts
+    // rather than proceeding with an un-stashed working tree
+    logger.error('stashChanges: unexpected error during stash', {
+      cwd,
+      message,
+      error: errorMsg,
+    });
+    throw new Error(`Failed to stash changes in ${cwd}: ${errorMsg}`);
+  }
+}
+
+/**
+ * Pop the most recent stash entry.
+ * Returns an object indicating success and whether there were conflicts.
+ *
+ * @param cwd - Working directory of the git repository / worktree
+ */
+export async function popStash(
+  cwd: string
+): Promise<{ success: boolean; hasConflicts: boolean; error?: string }> {
+  try {
+    await execGitCommandWithLockRetry(['stash', 'pop'], cwd);
+    // If execGitCommandWithLockRetry succeeds (zero exit code), there are no conflicts
+    return { success: true, hasConflicts: false };
+  } catch (error) {
+    const errorMsg = getErrorMessage(error);
+    if (errorMsg.includes('CONFLICT') || errorMsg.includes('Merge conflict')) {
+      return { success: false, hasConflicts: true, error: errorMsg };
+    }
+    return { success: false, hasConflicts: false, error: errorMsg };
+  }
+}
+
+/**
+ * Check if a local branch already exists.
+ *
+ * @param cwd - Working directory of the git repository / worktree
+ * @param branchName - The branch name to look up (without refs/heads/ prefix)
+ */
+export async function localBranchExists(cwd: string, branchName: string): Promise<boolean> {
+  try {
+    await execGitCommand(['rev-parse', '--verify', `refs/heads/${branchName}`], cwd);
+    return true;
+  } catch {
+    return false;
+  }
+}
diff --git a/temp_repo/apps/server/src/services/checkout-branch-service.ts b/temp_repo/apps/server/src/services/checkout-branch-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..922be329bd79dbd14479651e5fbe9eb70eab443a
--- /dev/null
+++ b/temp_repo/apps/server/src/services/checkout-branch-service.ts
@@ -0,0 +1,389 @@
+/**
+ * CheckoutBranchService - Create and checkout a new branch with stash handling
+ *
+ * Handles new branch creation with automatic stash/reapply of local changes.
+ * If there are uncommitted changes and the caller requests stashing, they are
+ * stashed before creating the branch and reapplied after. If the stash pop
+ * results in merge conflicts, returns a special response so the UI can create
+ * a conflict resolution task.
+ *
+ * Follows the same pattern as worktree-branch-service.ts (performSwitchBranch).
+ *
+ * The workflow:
+ * 0. Fetch latest from all remotes (ensures remote refs are up-to-date)
+ * 1. Validate inputs (branch name, base branch)
+ * 2. Get current branch name
+ * 3. Check if target branch already exists
+ * 4. Optionally stash local changes
+ * 5. Create and checkout the new branch
+ * 6. Reapply stashed changes (detect conflicts)
+ * 7. Handle error recovery (restore stash if checkout fails)
+ */
+
+import { createLogger, getErrorMessage } from '@automaker/utils';
+import { execGitCommand } from '../lib/git.js';
+import type { EventEmitter } from '../lib/events.js';
+import { hasAnyChanges, stashChanges, popStash, localBranchExists } from './branch-utils.js';
+
+const logger = createLogger('CheckoutBranchService');
+
+// ============================================================================
+// Local Helpers
+// ============================================================================
+
+/** Timeout for git fetch operations (30 seconds) */
+const FETCH_TIMEOUT_MS = 30_000;
+
+/**
+ * Fetch latest from all remotes (silently, with timeout).
+ *
+ * A process-level timeout is enforced via an AbortController so that a
+ * slow or unresponsive remote does not block the branch creation flow
+ * indefinitely.  Timeout errors are logged and treated as non-fatal
+ * (the same as network-unavailable errors) so the rest of the workflow
+ * continues normally.  This is called before creating the new branch to
+ * ensure remote refs are up-to-date when a remote base branch is used.
+ */
+async function fetchRemotes(cwd: string): Promise<void> {
+  const controller = new AbortController();
+  const timerId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+
+  try {
+    await execGitCommand(['fetch', '--all', '--quiet'], cwd, undefined, controller);
+  } catch (error) {
+    if (controller.signal.aborted) {
+      // Fetch timed out - log and continue; callers should not be blocked by a slow remote
+      logger.warn(
+        `fetchRemotes timed out after ${FETCH_TIMEOUT_MS}ms - continuing without latest remote refs`
+      );
+    } else {
+      logger.warn(`fetchRemotes failed: ${getErrorMessage(error)} - continuing with local refs`);
+    }
+    // Non-fatal: continue with locally available refs regardless of failure type
+  } finally {
+    clearTimeout(timerId);
+  }
+}
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface CheckoutBranchOptions {
+  /** When true, stash local changes before checkout and reapply after */
+  stashChanges?: boolean;
+  /** When true, include untracked files in the stash */
+  includeUntracked?: boolean;
+}
+
+export interface CheckoutBranchResult {
+  success: boolean;
+  error?: string;
+  result?: {
+    previousBranch: string;
+    newBranch: string;
+    message: string;
+    hasConflicts?: boolean;
+    stashedChanges?: boolean;
+  };
+  /** Set when checkout fails and stash pop produced conflicts during recovery */
+  stashPopConflicts?: boolean;
+  /** Human-readable message when stash pop conflicts occur during error recovery */
+  stashPopConflictMessage?: string;
+}
+
+// ============================================================================
+// Main Service Function
+// ============================================================================
+
+/**
+ * Create and checkout a new branch, optionally stashing and restoring local changes.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @param branchName - Name of the new branch to create
+ * @param baseBranch - Optional base branch to create from (defaults to current HEAD)
+ * @param options - Stash handling options
+ * @param events - Optional event emitter for lifecycle events
+ * @returns CheckoutBranchResult with detailed status information
+ */
+export async function performCheckoutBranch(
+  worktreePath: string,
+  branchName: string,
+  baseBranch?: string,
+  options?: CheckoutBranchOptions,
+  events?: EventEmitter
+): Promise<CheckoutBranchResult> {
+  const shouldStash = options?.stashChanges ?? false;
+  const includeUntracked = options?.includeUntracked ?? true;
+
+  // Emit start event
+  events?.emit('switch:start', { worktreePath, branchName, operation: 'checkout' });
+
+  // 0. Fetch latest from all remotes before creating the branch
+  //    This ensures remote refs are up-to-date so that base branch validation
+  //    works correctly for remote branch references (e.g. "origin/main").
+  await fetchRemotes(worktreePath);
+
+  // 1. Get current branch
+  let previousBranch: string;
+  try {
+    const currentBranchOutput = await execGitCommand(
+      ['rev-parse', '--abbrev-ref', 'HEAD'],
+      worktreePath
+    );
+    previousBranch = currentBranchOutput.trim();
+  } catch (branchError) {
+    const branchErrorMsg = getErrorMessage(branchError);
+    events?.emit('switch:error', {
+      worktreePath,
+      branchName,
+      error: branchErrorMsg,
+    });
+    return {
+      success: false,
+      error: `Failed to determine current branch: ${branchErrorMsg}`,
+    };
+  }
+
+  // 2. Check if branch already exists
+  if (await localBranchExists(worktreePath, branchName)) {
+    events?.emit('switch:error', {
+      worktreePath,
+      branchName,
+      error: `Branch '${branchName}' already exists`,
+    });
+    return {
+      success: false,
+      error: `Branch '${branchName}' already exists`,
+    };
+  }
+
+  // 3. Validate base branch if provided
+  if (baseBranch) {
+    try {
+      await execGitCommand(['rev-parse', '--verify', baseBranch], worktreePath);
+    } catch {
+      events?.emit('switch:error', {
+        worktreePath,
+        branchName,
+        error: `Base branch '${baseBranch}' does not exist`,
+      });
+      return {
+        success: false,
+        error: `Base branch '${baseBranch}' does not exist`,
+      };
+    }
+  }
+
+  // 4. Stash local changes if requested and there are changes
+  let didStash = false;
+
+  if (shouldStash) {
+    const hadChanges = await hasAnyChanges(worktreePath, { includeUntracked });
+    if (hadChanges) {
+      events?.emit('switch:stash', {
+        worktreePath,
+        previousBranch,
+        targetBranch: branchName,
+        action: 'push',
+      });
+
+      const stashMessage = `Auto-stash before switching to ${branchName}`;
+      try {
+        didStash = await stashChanges(worktreePath, stashMessage, includeUntracked);
+      } catch (stashError) {
+        const stashErrorMsg = getErrorMessage(stashError);
+        events?.emit('switch:error', {
+          worktreePath,
+          branchName,
+          error: `Failed to stash local changes: ${stashErrorMsg}`,
+        });
+        return {
+          success: false,
+          error: `Failed to stash local changes before creating branch: ${stashErrorMsg}`,
+        };
+      }
+    }
+  }
+
+  try {
+    // 5. Create and checkout the new branch
+    events?.emit('switch:checkout', {
+      worktreePath,
+      targetBranch: branchName,
+      isRemote: false,
+      previousBranch,
+    });
+
+    const checkoutArgs = ['checkout', '-b', branchName];
+    if (baseBranch) {
+      checkoutArgs.push(baseBranch);
+    }
+    await execGitCommand(checkoutArgs, worktreePath);
+
+    // 6. Reapply stashed changes if we stashed earlier
+    let hasConflicts = false;
+    let conflictMessage = '';
+    let stashReapplied = false;
+
+    if (didStash) {
+      events?.emit('switch:pop', {
+        worktreePath,
+        targetBranch: branchName,
+        action: 'pop',
+      });
+
+      // Isolate the pop in its own try/catch so a thrown exception does not
+      // propagate to the outer catch block, which would attempt a second pop.
+      try {
+        const popResult = await popStash(worktreePath);
+        // Mark didStash false so the outer error-recovery path cannot pop again.
+        didStash = false;
+        hasConflicts = popResult.hasConflicts;
+        if (popResult.hasConflicts) {
+          conflictMessage = `Created branch '${branchName}' but merge conflicts occurred when reapplying your local changes. Please resolve the conflicts.`;
+        } else if (!popResult.success) {
+          conflictMessage = `Created branch '${branchName}' but failed to reapply stashed changes: ${popResult.error}. Your changes are still in the stash.`;
+        } else {
+          stashReapplied = true;
+        }
+      } catch (popError) {
+        // Pop threw an unexpected exception. Record the error and clear didStash
+        // so the outer catch does not attempt a second pop.
+        didStash = false;
+        conflictMessage = `Created branch '${branchName}' but an error occurred while reapplying stashed changes: ${getErrorMessage(popError)}. Your changes may still be in the stash.`;
+        events?.emit('switch:pop', {
+          worktreePath,
+          targetBranch: branchName,
+          action: 'pop',
+          error: getErrorMessage(popError),
+        });
+      }
+    }
+
+    if (hasConflicts) {
+      events?.emit('switch:done', {
+        worktreePath,
+        previousBranch,
+        currentBranch: branchName,
+        hasConflicts: true,
+      });
+      return {
+        success: true,
+        result: {
+          previousBranch,
+          newBranch: branchName,
+          message: conflictMessage,
+          hasConflicts: true,
+          stashedChanges: true,
+        },
+      };
+    } else if (didStash && !stashReapplied) {
+      // Stash pop failed for a non-conflict reason — stash is still present
+      events?.emit('switch:done', {
+        worktreePath,
+        previousBranch,
+        currentBranch: branchName,
+        stashPopFailed: true,
+      });
+      return {
+        success: true,
+        result: {
+          previousBranch,
+          newBranch: branchName,
+          message: conflictMessage,
+          hasConflicts: false,
+          stashedChanges: true,
+        },
+      };
+    } else {
+      const stashNote = stashReapplied ? ' (local changes stashed and reapplied)' : '';
+      events?.emit('switch:done', {
+        worktreePath,
+        previousBranch,
+        currentBranch: branchName,
+        stashReapplied,
+      });
+      return {
+        success: true,
+        result: {
+          previousBranch,
+          newBranch: branchName,
+          message: `Created and checked out branch '${branchName}'${stashNote}`,
+          hasConflicts: false,
+          stashedChanges: stashReapplied,
+        },
+      };
+    }
+  } catch (checkoutError) {
+    // 7. If checkout failed and we stashed, try to restore the stash
+    if (didStash) {
+      try {
+        const popResult = await popStash(worktreePath);
+        if (popResult.hasConflicts) {
+          const checkoutErrorMsg = getErrorMessage(checkoutError);
+          events?.emit('switch:error', {
+            worktreePath,
+            branchName,
+            error: checkoutErrorMsg,
+            stashPopConflicts: true,
+          });
+          return {
+            success: false,
+            error: checkoutErrorMsg,
+            stashPopConflicts: true,
+            stashPopConflictMessage:
+              'Stash pop resulted in conflicts: your stashed changes were partially reapplied ' +
+              'but produced merge conflicts. Please resolve the conflicts before retrying.',
+          };
+        } else if (!popResult.success) {
+          const checkoutErrorMsg = getErrorMessage(checkoutError);
+          const combinedMessage =
+            `${checkoutErrorMsg}. Additionally, restoring your stashed changes failed: ` +
+            `${popResult.error ?? 'unknown error'} — your changes are still saved in the stash.`;
+          events?.emit('switch:error', {
+            worktreePath,
+            branchName,
+            error: combinedMessage,
+          });
+          return {
+            success: false,
+            error: combinedMessage,
+            stashPopConflicts: false,
+          };
+        }
+        // popResult.success === true: stash was cleanly restored
+      } catch (popError) {
+        // popStash itself threw — build a failure result rather than letting
+        // the exception propagate and produce an unhandled rejection.
+        const checkoutErrorMsg = getErrorMessage(checkoutError);
+        const popErrorMsg = getErrorMessage(popError);
+        const combinedMessage =
+          `${checkoutErrorMsg}. Additionally, an error occurred while attempting to restore ` +
+          `your stashed changes: ${popErrorMsg} — your changes may still be saved in the stash.`;
+        events?.emit('switch:error', {
+          worktreePath,
+          branchName,
+          error: combinedMessage,
+        });
+        return {
+          success: false,
+          error: combinedMessage,
+          stashPopConflicts: false,
+          stashPopConflictMessage: combinedMessage,
+        };
+      }
+    }
+    const checkoutErrorMsg = getErrorMessage(checkoutError);
+    events?.emit('switch:error', {
+      worktreePath,
+      branchName,
+      error: checkoutErrorMsg,
+    });
+    return {
+      success: false,
+      error: checkoutErrorMsg,
+      stashPopConflicts: false,
+    };
+  }
+}
diff --git a/temp_repo/apps/server/src/services/cherry-pick-service.ts b/temp_repo/apps/server/src/services/cherry-pick-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..be5dbac2d35c273ee9c2a981b29c440402b5a8a9
--- /dev/null
+++ b/temp_repo/apps/server/src/services/cherry-pick-service.ts
@@ -0,0 +1,179 @@
+/**
+ * CherryPickService - Cherry-pick git operations without HTTP
+ *
+ * Extracted from worktree cherry-pick route to encapsulate all git
+ * cherry-pick business logic in a single service. Follows the same
+ * pattern as merge-service.ts.
+ */
+
+import { createLogger } from '@automaker/utils';
+import { execGitCommand, getCurrentBranch } from '../lib/git.js';
+import { type EventEmitter } from '../lib/events.js';
+
+const logger = createLogger('CherryPickService');
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface CherryPickOptions {
+  noCommit?: boolean;
+}
+
+export interface CherryPickResult {
+  success: boolean;
+  error?: string;
+  hasConflicts?: boolean;
+  aborted?: boolean;
+  cherryPicked?: boolean;
+  commitHashes?: string[];
+  branch?: string;
+  message?: string;
+}
+
+// ============================================================================
+// Service Functions
+// ============================================================================
+
+/**
+ * Verify that each commit hash exists in the repository.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @param commitHashes - Array of commit hashes to verify
+ * @param emitter - Optional event emitter for lifecycle events
+ * @returns The first invalid commit hash, or null if all are valid
+ */
+export async function verifyCommits(
+  worktreePath: string,
+  commitHashes: string[],
+  emitter?: EventEmitter
+): Promise<string | null> {
+  for (const hash of commitHashes) {
+    try {
+      await execGitCommand(['rev-parse', '--verify', hash], worktreePath);
+    } catch {
+      emitter?.emit('cherry-pick:verify-failed', { worktreePath, hash });
+      return hash;
+    }
+  }
+  return null;
+}
+
+/**
+ * Run the cherry-pick operation on the given worktree.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @param commitHashes - Array of commit hashes to cherry-pick (in order)
+ * @param options - Cherry-pick options (e.g., noCommit)
+ * @param emitter - Optional event emitter for lifecycle events
+ * @returns CherryPickResult with success/failure information
+ */
+export async function runCherryPick(
+  worktreePath: string,
+  commitHashes: string[],
+  options?: CherryPickOptions,
+  emitter?: EventEmitter
+): Promise<CherryPickResult> {
+  const args = ['cherry-pick'];
+  if (options?.noCommit) {
+    args.push('--no-commit');
+  }
+  args.push(...commitHashes);
+
+  emitter?.emit('cherry-pick:started', { worktreePath, commitHashes });
+
+  try {
+    await execGitCommand(args, worktreePath);
+
+    const branch = await getCurrentBranch(worktreePath);
+
+    if (options?.noCommit) {
+      const result: CherryPickResult = {
+        success: true,
+        cherryPicked: false,
+        commitHashes,
+        branch,
+        message: `Staged changes from ${commitHashes.length} commit(s); no commit created due to --no-commit`,
+      };
+      emitter?.emit('cherry-pick:success', { worktreePath, commitHashes, branch });
+      return result;
+    }
+
+    const result: CherryPickResult = {
+      success: true,
+      cherryPicked: true,
+      commitHashes,
+      branch,
+      message: `Successfully cherry-picked ${commitHashes.length} commit(s)`,
+    };
+    emitter?.emit('cherry-pick:success', { worktreePath, commitHashes, branch });
+    return result;
+  } catch (cherryPickError: unknown) {
+    // Check if this is a cherry-pick conflict
+    const err = cherryPickError as { stdout?: string; stderr?: string; message?: string };
+    const output = `${err.stdout || ''} ${err.stderr || ''} ${err.message || ''}`;
+    const hasConflicts =
+      output.includes('CONFLICT') ||
+      output.includes('cherry-pick failed') ||
+      output.includes('could not apply');
+
+    if (hasConflicts) {
+      // Abort the cherry-pick to leave the repo in a clean state
+      const aborted = await abortCherryPick(worktreePath, emitter);
+
+      if (!aborted) {
+        logger.error(
+          'Failed to abort cherry-pick after conflict; repository may be in a dirty state',
+          { worktreePath }
+        );
+      }
+
+      emitter?.emit('cherry-pick:conflict', {
+        worktreePath,
+        commitHashes,
+        aborted,
+        stdout: err.stdout,
+        stderr: err.stderr,
+      });
+
+      return {
+        success: false,
+        error: aborted
+          ? 'Cherry-pick aborted due to conflicts; no changes were applied.'
+          : 'Cherry-pick failed due to conflicts and the abort also failed; repository may be in a dirty state.',
+        hasConflicts: true,
+        aborted,
+      };
+    }
+
+    // Non-conflict error - propagate
+    throw cherryPickError;
+  }
+}
+
+/**
+ * Abort an in-progress cherry-pick operation.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @param emitter - Optional event emitter for lifecycle events
+ * @returns true if abort succeeded, false if it failed (logged as warning)
+ */
+export async function abortCherryPick(
+  worktreePath: string,
+  emitter?: EventEmitter
+): Promise<boolean> {
+  try {
+    await execGitCommand(['cherry-pick', '--abort'], worktreePath);
+    emitter?.emit('cherry-pick:abort', { worktreePath, aborted: true });
+    return true;
+  } catch (err: unknown) {
+    const error = err as { message?: string };
+    logger.warn('Failed to abort cherry-pick after conflict');
+    emitter?.emit('cherry-pick:abort', {
+      worktreePath,
+      aborted: false,
+      error: error.message ?? 'Unknown error during cherry-pick abort',
+    });
+    return false;
+  }
+}
diff --git a/temp_repo/apps/server/src/services/claude-usage-service.ts b/temp_repo/apps/server/src/services/claude-usage-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ffb076319f144a74b68ea2a5f1484642fc8ca6c4
--- /dev/null
+++ b/temp_repo/apps/server/src/services/claude-usage-service.ts
@@ -0,0 +1,791 @@
+import { spawn } from 'child_process';
+import * as os from 'os';
+import * as pty from 'node-pty';
+import { ClaudeUsage } from '../routes/claude/types.js';
+import { createLogger } from '@automaker/utils';
+
+/**
+ * Claude Usage Service
+ *
+ * Fetches usage data by executing the Claude CLI's /usage command.
+ * This approach doesn't require any API keys - it relies on the user
+ * having already authenticated via `claude login`.
+ *
+ * Platform-specific implementations:
+ * - macOS: Uses 'expect' command for PTY
+ * - Windows/Linux: Uses node-pty for PTY
+ */
+const logger = createLogger('ClaudeUsage');
+
+export class ClaudeUsageService {
+  private claudeBinary = 'claude';
+  private timeout = 30000; // 30 second timeout
+  private isWindows = os.platform() === 'win32';
+  private isLinux = os.platform() === 'linux';
+  // On Windows, ConPTY requires AttachConsole which fails in Electron/service mode
+  // Detect Electron by checking for electron-specific env vars or process properties
+  // When in Electron, always use winpty to avoid ConPTY's AttachConsole errors
+  private isElectron =
+    !!(process.versions && (process.versions as Record<string, string>).electron) ||
+    !!process.env.ELECTRON_RUN_AS_NODE;
+  private useConptyFallback = false; // Track if we need to use winpty fallback on Windows
+
+  /**
+   * Kill a PTY process with platform-specific handling.
+   * Windows doesn't support Unix signals like SIGTERM, so we call kill() without arguments.
+   * On Unix-like systems (macOS, Linux), we can specify the signal.
+   *
+   * @param ptyProcess - The PTY process to kill
+   * @param signal - The signal to send on Unix-like systems (default: 'SIGTERM')
+   */
+  private killPtyProcess(ptyProcess: pty.IPty, signal: string = 'SIGTERM'): void {
+    if (this.isWindows) {
+      ptyProcess.kill();
+    } else {
+      ptyProcess.kill(signal);
+    }
+  }
+
+  /**
+   * Check if Claude CLI is available on the system
+   */
+  async isAvailable(): Promise<boolean> {
+    return new Promise((resolve) => {
+      const checkCmd = this.isWindows ? 'where' : 'which';
+      const proc = spawn(checkCmd, [this.claudeBinary]);
+      proc.on('close', (code) => {
+        resolve(code === 0);
+      });
+      proc.on('error', () => {
+        resolve(false);
+      });
+    });
+  }
+
+  /**
+   * Fetch usage data by executing the Claude CLI
+   */
+  async fetchUsageData(): Promise<ClaudeUsage> {
+    const output = await this.executeClaudeUsageCommand();
+    return this.parseUsageOutput(output);
+  }
+
+  /**
+   * Execute the claude /usage command and return the output
+   * Uses node-pty on all platforms for consistency
+   */
+  private executeClaudeUsageCommand(): Promise<string> {
+    // Use node-pty on all platforms - it's more reliable than expect on macOS
+    return this.executeClaudeUsageCommandPty();
+  }
+
+  /**
+   * macOS implementation using 'expect' command
+   */
+  private executeClaudeUsageCommandMac(): Promise<string> {
+    return new Promise((resolve, reject) => {
+      let stdout = '';
+      let stderr = '';
+      let settled = false;
+
+      // Use current working directory - likely already trusted by Claude CLI
+      const workingDirectory = process.cwd();
+
+      // Use 'expect' with an inline script to run claude /usage with a PTY
+      // Running from cwd which should already be trusted
+      const expectScript = `
+        set timeout 30
+        spawn claude /usage
+
+        # Wait for usage data or handle trust prompt if needed
+        expect {
+          -re "Ready to code|permission to work|Do you want to work" {
+            # Trust prompt appeared - send Enter to approve
+            sleep 1
+            send "\\r"
+            exp_continue
+          }
+          "Current session" {
+            # Usage data appeared - wait for full output, then exit
+            sleep 3
+            send "\\x1b"
+          }
+          "% left" {
+            # Usage percentage appeared
+            sleep 3
+            send "\\x1b"
+          }
+          timeout {
+            send "\\x1b"
+          }
+          eof {}
+        }
+        expect eof
+      `;
+
+      const proc = spawn('expect', ['-c', expectScript], {
+        cwd: workingDirectory,
+        env: {
+          ...process.env,
+          TERM: 'xterm-256color',
+        },
+      });
+
+      const timeoutId = setTimeout(() => {
+        if (!settled) {
+          settled = true;
+          proc.kill();
+          reject(new Error('Command timed out'));
+        }
+      }, this.timeout);
+
+      proc.stdout.on('data', (data) => {
+        stdout += data.toString();
+      });
+
+      proc.stderr.on('data', (data) => {
+        stderr += data.toString();
+      });
+
+      proc.on('close', (code) => {
+        clearTimeout(timeoutId);
+        if (settled) return;
+        settled = true;
+
+        // Check for authentication errors in output
+        if (
+          stdout.includes('token_expired') ||
+          stdout.includes('authentication_error') ||
+          stderr.includes('token_expired') ||
+          stderr.includes('authentication_error')
+        ) {
+          reject(new Error("Authentication required - please run 'claude login'"));
+          return;
+        }
+
+        // Even if exit code is non-zero, we might have useful output
+        if (stdout.trim()) {
+          resolve(stdout);
+        } else if (code !== 0) {
+          reject(new Error(stderr || `Command exited with code ${code}`));
+        } else {
+          reject(new Error('No output from claude command'));
+        }
+      });
+
+      proc.on('error', (err) => {
+        clearTimeout(timeoutId);
+        if (!settled) {
+          settled = true;
+          reject(new Error(`Failed to execute claude: ${err.message}`));
+        }
+      });
+    });
+  }
+
+  /**
+   * Windows/Linux implementation using node-pty
+   */
+  private executeClaudeUsageCommandPty(): Promise<string> {
+    return new Promise((resolve, reject) => {
+      let output = '';
+      let settled = false;
+      let hasSeenUsageData = false;
+      let hasSeenTrustPrompt = false;
+
+      // Use current working directory (project dir) - most likely already trusted by Claude CLI
+      const workingDirectory = process.cwd();
+
+      // Use platform-appropriate shell and command
+      const shell = this.isWindows ? 'cmd.exe' : '/bin/sh';
+      // Use --add-dir to whitelist the current directory and bypass the trust prompt
+      // We don't pass /usage here, we'll type it into the REPL
+      const args = this.isWindows
+        ? ['/c', 'claude', '--add-dir', workingDirectory]
+        : ['-c', `claude --add-dir "${workingDirectory}"`];
+
+      // Using 'any' for ptyProcess because node-pty types don't include 'killed' property
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let ptyProcess: any = null;
+
+      // Build PTY spawn options
+      const ptyOptions: pty.IPtyForkOptions = {
+        name: 'xterm-256color',
+        cols: 120,
+        rows: 30,
+        cwd: workingDirectory,
+        env: {
+          ...process.env,
+          TERM: 'xterm-256color',
+        } as Record<string, string>,
+      };
+
+      // On Windows, always use winpty instead of ConPTY
+      // ConPTY requires AttachConsole which fails in many contexts:
+      // - Electron apps without a console
+      // - VS Code integrated terminal
+      // - Spawned from other applications
+      // The error happens in a subprocess so we can't catch it - must proactively disable
+      if (this.isWindows) {
+        (ptyOptions as pty.IWindowsPtyForkOptions).useConpty = false;
+        logger.info(
+          '[executeClaudeUsageCommandPty] Using winpty on Windows (ConPTY disabled for compatibility)'
+        );
+      }
+
+      try {
+        ptyProcess = pty.spawn(shell, args, ptyOptions);
+      } catch (spawnError) {
+        const errorMessage = spawnError instanceof Error ? spawnError.message : String(spawnError);
+
+        // Check for Windows ConPTY-specific errors
+        if (this.isWindows && errorMessage.includes('AttachConsole failed')) {
+          // ConPTY failed - try winpty fallback
+          if (!this.useConptyFallback) {
+            logger.warn(
+              '[executeClaudeUsageCommandPty] ConPTY AttachConsole failed, retrying with winpty fallback'
+            );
+            this.useConptyFallback = true;
+
+            try {
+              (ptyOptions as pty.IWindowsPtyForkOptions).useConpty = false;
+              ptyProcess = pty.spawn(shell, args, ptyOptions);
+              logger.info(
+                '[executeClaudeUsageCommandPty] Successfully spawned with winpty fallback'
+              );
+            } catch (fallbackError) {
+              const fallbackMessage =
+                fallbackError instanceof Error ? fallbackError.message : String(fallbackError);
+              logger.error(
+                '[executeClaudeUsageCommandPty] Winpty fallback also failed:',
+                fallbackMessage
+              );
+              reject(
+                new Error(
+                  `Windows PTY unavailable: Both ConPTY and winpty failed. This typically happens when running in Electron without a console. ConPTY error: ${errorMessage}. Winpty error: ${fallbackMessage}`
+                )
+              );
+              return;
+            }
+          } else {
+            logger.error('[executeClaudeUsageCommandPty] Winpty fallback failed:', errorMessage);
+            reject(
+              new Error(
+                `Windows PTY unavailable: ${errorMessage}. The application is running without console access (common in Electron). Try running from a terminal window.`
+              )
+            );
+            return;
+          }
+        } else {
+          logger.error('[executeClaudeUsageCommandPty] Failed to spawn PTY:', errorMessage);
+          reject(
+            new Error(
+              `Unable to access terminal: ${errorMessage}. Claude CLI may not be available or PTY support is limited in this environment.`
+            )
+          );
+          return;
+        }
+      }
+
+      const timeoutId = setTimeout(() => {
+        if (!settled) {
+          settled = true;
+          if (ptyProcess && !ptyProcess.killed) {
+            this.killPtyProcess(ptyProcess);
+          }
+          // Don't fail if we have data - return it instead
+          // Check cleaned output since raw output has ANSI codes between words
+          const cleanedForCheck = output
+            .replace(/\x1B\[(\d+)C/g, (_m: string, n: string) => ' '.repeat(parseInt(n, 10)))
+            .replace(/\x1B\[[0-9;?]*[A-Za-z@]/g, '');
+          if (
+            cleanedForCheck.includes('Current session') ||
+            cleanedForCheck.includes('% used') ||
+            cleanedForCheck.includes('% left')
+          ) {
+            resolve(output);
+          } else if (hasSeenTrustPrompt) {
+            // Trust prompt was shown but we couldn't auto-approve it
+            reject(
+              new Error(
+                'TRUST_PROMPT_PENDING: Claude CLI is waiting for folder permission. Please run "claude" in your terminal and approve access to continue.'
+              )
+            );
+          } else {
+            reject(
+              new Error(
+                'The Claude CLI took too long to respond. This can happen if the CLI is waiting for a trust prompt or is otherwise busy.'
+              )
+            );
+          }
+        }
+      }, 45000); // 45 second timeout
+
+      let hasSentCommand = false;
+      let hasApprovedTrust = false;
+
+      ptyProcess.onData((data: string) => {
+        output += data;
+
+        // Strip ANSI codes for easier matching
+        // Convert cursor forward (ESC[nC) to spaces first to preserve word boundaries,
+        // then strip remaining ANSI sequences. Without this, the Claude CLI TUI output
+        // like "Current week (all models)" becomes "Currentweek(allmodels)".
+        const cleanOutput = output
+          .replace(/\x1B\[(\d+)C/g, (_match: string, n: string) => ' '.repeat(parseInt(n, 10)))
+          .replace(/\x1B\[[0-9;?]*[A-Za-z@]/g, '');
+
+        // Check for specific authentication/permission errors
+        // Must be very specific to avoid false positives from garbled terminal encoding
+        // Removed permission_error check as it was causing false positives with winpty encoding
+        const authChecks = {
+          oauth: cleanOutput.includes('OAuth token does not meet scope requirement'),
+          tokenExpired: cleanOutput.includes('token_expired'),
+          // Only match if it looks like a JSON API error response
+          authError:
+            cleanOutput.includes('"type":"authentication_error"') ||
+            cleanOutput.includes('"type": "authentication_error"'),
+        };
+        const hasAuthError = authChecks.oauth || authChecks.tokenExpired || authChecks.authError;
+
+        if (hasAuthError) {
+          if (!settled) {
+            settled = true;
+            if (ptyProcess && !ptyProcess.killed) {
+              this.killPtyProcess(ptyProcess);
+            }
+            reject(
+              new Error(
+                "Claude CLI authentication issue. Please run 'claude logout' and then 'claude login' in your terminal to refresh permissions."
+              )
+            );
+          }
+          return;
+        }
+
+        // Check if we've seen the usage data (look for "Current session" or the TUI Usage header)
+        // Also check for percentage patterns that appear in usage output
+        const hasUsageIndicators =
+          cleanOutput.includes('Current session') ||
+          (cleanOutput.includes('Usage') && cleanOutput.includes('% left')) ||
+          // Look for percentage patterns - allow optional whitespace between % and left/used
+          // since cursor movement codes may or may not create spaces after stripping
+          /\d+%\s*(left|used|remaining)/i.test(cleanOutput) ||
+          cleanOutput.includes('Resets in') ||
+          cleanOutput.includes('Current week');
+
+        if (!hasSeenUsageData && hasUsageIndicators) {
+          hasSeenUsageData = true;
+          // Wait for full output, then send escape to exit
+          setTimeout(() => {
+            if (!settled && ptyProcess && !ptyProcess.killed) {
+              ptyProcess.write('\x1b'); // Send escape key
+
+              // Fallback: if ESC doesn't exit (Linux), use SIGTERM after 2s
+              // Windows doesn't support signals, so killPtyProcess handles platform differences
+              setTimeout(() => {
+                if (!settled && ptyProcess && !ptyProcess.killed) {
+                  this.killPtyProcess(ptyProcess);
+                }
+              }, 2000);
+            }
+          }, 3000);
+        }
+
+        // Handle Trust Dialog - multiple variants:
+        // - "Do you want to work in this folder?"
+        // - "Ready to code here?" / "I'll need permission to work with your files"
+        // - "Quick safety check" / "Yes, I trust this folder"
+        // Since we are running in cwd (project dir), it is safe to approve.
+        if (
+          !hasApprovedTrust &&
+          (cleanOutput.includes('Do you want to work in this folder?') ||
+            cleanOutput.includes('Ready to code here') ||
+            cleanOutput.includes('permission to work with your files') ||
+            cleanOutput.includes('trust this folder') ||
+            cleanOutput.includes('safety check'))
+        ) {
+          hasApprovedTrust = true;
+          hasSeenTrustPrompt = true;
+          // Wait a tiny bit to ensure prompt is ready, then send Enter
+          setTimeout(() => {
+            if (!settled && ptyProcess && !ptyProcess.killed) {
+              ptyProcess.write('\r');
+            }
+          }, 1000);
+        }
+
+        // Detect REPL prompt and send /usage command
+        // On Windows with winpty, Unicode prompt char ❯ gets garbled, so also check for ASCII indicators
+        const isReplReady =
+          cleanOutput.includes('❯') ||
+          cleanOutput.includes('? for shortcuts') ||
+          // Fallback for winpty garbled encoding - detect CLI welcome screen elements
+          (cleanOutput.includes('Welcome back') && cleanOutput.includes('Claude')) ||
+          (cleanOutput.includes('Tips for getting started') && cleanOutput.includes('Claude')) ||
+          // Detect model indicator which appears when REPL is ready
+          (cleanOutput.includes('Opus') && cleanOutput.includes('Claude API')) ||
+          (cleanOutput.includes('Sonnet') && cleanOutput.includes('Claude API'));
+
+        if (!hasSentCommand && isReplReady) {
+          hasSentCommand = true;
+          // Wait for REPL to fully settle
+          setTimeout(() => {
+            if (!settled && ptyProcess && !ptyProcess.killed) {
+              // Send command with carriage return
+              ptyProcess.write('/usage\r');
+
+              // Send another enter after 1 second to confirm selection if autocomplete menu appeared
+              setTimeout(() => {
+                if (!settled && ptyProcess && !ptyProcess.killed) {
+                  ptyProcess.write('\r');
+                }
+              }, 1200);
+            }
+          }, 1500);
+        }
+
+        // Fallback: if we see "Esc to cancel" but haven't seen usage data yet
+        if (
+          !hasSeenUsageData &&
+          cleanOutput.includes('Esc to cancel') &&
+          !cleanOutput.includes('Do you want to work in this folder?')
+        ) {
+          setTimeout(() => {
+            if (!settled && ptyProcess && !ptyProcess.killed) {
+              ptyProcess.write('\x1b'); // Send escape key
+            }
+          }, 5000);
+        }
+      });
+
+      ptyProcess.onExit(({ exitCode }: { exitCode: number }) => {
+        clearTimeout(timeoutId);
+        if (settled) return;
+        settled = true;
+
+        // Check for auth errors - must be specific to avoid false positives
+        // Removed permission_error check as it was causing false positives with winpty encoding
+        if (output.includes('token_expired') || output.includes('"type":"authentication_error"')) {
+          reject(new Error("Authentication required - please run 'claude login'"));
+          return;
+        }
+
+        if (output.trim()) {
+          resolve(output);
+        } else if (exitCode !== 0) {
+          reject(new Error(`Command exited with code ${exitCode}`));
+        } else {
+          reject(new Error('No output from claude command'));
+        }
+      });
+    });
+  }
+
+  /**
+   * Strip ANSI escape codes from text
+   * Handles CSI, OSC, and other common ANSI sequences
+   */
+  private stripAnsiCodes(text: string): string {
+    // First, convert cursor movement sequences to whitespace to preserve word boundaries.
+    // The Claude CLI TUI uses ESC[nC (cursor forward) instead of actual spaces between words.
+    // Without this, "Current week (all models)" becomes "Currentweek(allmodels)" after stripping.
+    let clean = text
+      // Cursor forward (CSI n C): replace with n spaces to preserve word separation
+      .replace(/\x1B\[(\d+)C/g, (_match, n) => ' '.repeat(parseInt(n, 10)))
+      // Cursor movement (up/down/back/position): replace with newline or nothing
+      .replace(/\x1B\[\d*[ABD]/g, '') // cursor up (A), down (B), back (D)
+      .replace(/\x1B\[\d+;\d+[Hf]/g, '\n') // cursor position (H/f)
+      // Now strip remaining CSI sequences (colors, modes, etc.)
+      .replace(/\x1B\[[0-9;?]*[A-Za-z@]/g, '')
+      // OSC sequences: ESC ] ... terminated by BEL, ST, or another ESC
+      .replace(/\x1B\][^\x07\x1B]*(?:\x07|\x1B\\)?/g, '')
+      // Other ESC sequences: ESC (letter)
+      .replace(/\x1B[A-Za-z]/g, '')
+      // Carriage returns: replace with newline to avoid concatenation
+      .replace(/\r\n/g, '\n')
+      .replace(/\r/g, '\n');
+
+    // Handle backspaces (\x08) by applying them
+    // If we encounter a backspace, remove the character before it
+    while (clean.includes('\x08')) {
+      clean = clean.replace(/[^\x08]\x08/, '');
+      clean = clean.replace(/^\x08+/, '');
+    }
+
+    // Explicitly strip known "Synchronized Output" and "Window Title" garbage
+    // even if ESC is missing (seen in some environments)
+    clean = clean
+      .replace(/\[\?2026[hl]/g, '') // CSI ? 2026 h/l
+      .replace(/\]0;[^\x07]*\x07/g, '') // OSC 0; Title BEL
+      .replace(/\]0;.*?(\[\?|$)/g, ''); // OSC 0; Title ... (unterminated or hit next sequence)
+
+    // Strip remaining non-printable control characters (except newline \n)
+    // ASCII 0-8, 11-31, 127
+    clean = clean.replace(/[\x00-\x08\x0B-\x1F\x7F]/g, '');
+
+    return clean;
+  }
+
+  /**
+   * Parse the Claude CLI output to extract usage information
+   *
+   * Expected output format:
+   * ```
+   * Claude Code v1.0.27
+   *
+   * Current session
+   * ████████████████░░░░ 65% left
+   * Resets in 2h 15m
+   *
+   * Current week (all models)
+   * ██████████░░░░░░░░░░ 35% left
+   * Resets Jan 15, 3:30pm (America/Los_Angeles)
+   *
+   * Current week (Opus)
+   * ████████████████████ 80% left
+   * Resets Jan 15, 3:30pm (America/Los_Angeles)
+   * ```
+   */
+  private parseUsageOutput(rawOutput: string): ClaudeUsage {
+    const output = this.stripAnsiCodes(rawOutput);
+    const lines = output
+      .split('\n')
+      .map((l) => l.trim())
+      .filter((l) => l);
+
+    // Parse session usage
+    const sessionData = this.parseSection(lines, 'Current session', 'session');
+
+    // Parse weekly usage (all models)
+    const weeklyData = this.parseSection(lines, 'Current week (all models)', 'weekly');
+
+    // Parse Sonnet/Opus usage - try different labels
+    let sonnetData = this.parseSection(lines, 'Current week (Sonnet only)', 'sonnet');
+    if (sonnetData.percentage === 0) {
+      sonnetData = this.parseSection(lines, 'Current week (Sonnet)', 'sonnet');
+    }
+    if (sonnetData.percentage === 0) {
+      sonnetData = this.parseSection(lines, 'Current week (Opus)', 'sonnet');
+    }
+
+    return {
+      sessionTokensUsed: 0, // Not available from CLI
+      sessionLimit: 0, // Not available from CLI
+      sessionPercentage: sessionData.percentage,
+      sessionResetTime: sessionData.resetTime,
+      sessionResetText: sessionData.resetText,
+
+      weeklyTokensUsed: 0, // Not available from CLI
+      weeklyLimit: 0, // Not available from CLI
+      weeklyPercentage: weeklyData.percentage,
+      weeklyResetTime: weeklyData.resetTime,
+      weeklyResetText: weeklyData.resetText,
+
+      sonnetWeeklyTokensUsed: 0, // Not available from CLI
+      sonnetWeeklyPercentage: sonnetData.percentage,
+      sonnetResetText: sonnetData.resetText,
+
+      costUsed: null, // Not available from CLI
+      costLimit: null,
+      costCurrency: null,
+
+      lastUpdated: new Date().toISOString(),
+      userTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    };
+  }
+
+  /**
+   * Parse a section of the usage output to extract percentage and reset time
+   */
+  private parseSection(
+    lines: string[],
+    sectionLabel: string,
+    type: string
+  ): { percentage: number; resetTime: string; resetText: string } {
+    let percentage: number | null = null;
+    let resetTime = this.getDefaultResetTime(type);
+    let resetText = '';
+
+    // Find the LAST occurrence of the section (terminal output has multiple screen refreshes)
+    let sectionIndex = -1;
+    for (let i = lines.length - 1; i >= 0; i--) {
+      if (lines[i].toLowerCase().includes(sectionLabel.toLowerCase())) {
+        sectionIndex = i;
+        break;
+      }
+    }
+
+    if (sectionIndex === -1) {
+      return { percentage: 0, resetTime, resetText };
+    }
+
+    // Look at the lines following the section header (within a window of 5 lines)
+    const searchWindow = lines.slice(sectionIndex, sectionIndex + 5);
+
+    for (const line of searchWindow) {
+      // Extract percentage - only take the first match (avoid picking up next section's data)
+      // Use null to track "not found" since 0% is a valid percentage (100% left = 0% used)
+      if (percentage === null) {
+        const percentMatch = line.match(/(\d{1,3})\s*%\s*(left|used|remaining)/i);
+        if (percentMatch) {
+          const value = parseInt(percentMatch[1], 10);
+          const isUsed = percentMatch[2].toLowerCase() === 'used';
+          // Convert "left" to "used" percentage (our UI shows % used)
+          percentage = isUsed ? value : 100 - value;
+        }
+      }
+
+      // Extract reset time - only take the first match
+      if (!resetText && line.toLowerCase().includes('reset')) {
+        // Only extract the part starting from "Resets" (or "Reset") to avoid garbage prefixes
+        const match = line.match(/(Resets?.*)$/i);
+        // If regex fails despite 'includes', likely a complex string issues - verify match before using line
+        // Only fallback to line if it's reasonably short/clean, otherwise skip it to avoid showing garbage
+        if (match) {
+          resetText = match[1];
+        }
+      }
+    }
+
+    // Parse the reset time if we found one
+    if (resetText) {
+      // Clean up resetText: remove percentage info if it was matched on the same line
+      // e.g. "46%used Resets5:59pm" -> " Resets5:59pm"
+      resetText = resetText.replace(/(\d{1,3})\s*%\s*(left|used|remaining)/i, '').trim();
+
+      // Ensure space after "Resets" if missing (e.g. "Resets5:59pm" -> "Resets 5:59pm")
+      resetText = resetText.replace(/(resets?)(\d)/i, '$1 $2');
+
+      resetTime = this.parseResetTime(resetText, type);
+      // Strip timezone like "(Asia/Dubai)" from the display text
+      resetText = resetText.replace(/\s*\([A-Za-z_/]+\)\s*$/, '').trim();
+    }
+
+    return { percentage: percentage ?? 0, resetTime, resetText };
+  }
+
+  /**
+   * Parse reset time from text like "Resets in 2h 15m", "Resets 11am", or "Resets Dec 22 at 8pm"
+   */
+  private parseResetTime(text: string, type: string): string {
+    const now = new Date();
+
+    // Try to parse duration format: "Resets in 2h 15m" or "Resets in 30m"
+    const durationMatch = text.match(
+      /(\d+)\s*h(?:ours?)?(?:\s+(\d+)\s*m(?:in)?)?|(\d+)\s*m(?:in)?/i
+    );
+    if (durationMatch) {
+      let hours = 0;
+      let minutes = 0;
+
+      if (durationMatch[1]) {
+        hours = parseInt(durationMatch[1], 10);
+        minutes = durationMatch[2] ? parseInt(durationMatch[2], 10) : 0;
+      } else if (durationMatch[3]) {
+        minutes = parseInt(durationMatch[3], 10);
+      }
+
+      const resetDate = new Date(now.getTime() + (hours * 60 + minutes) * 60 * 1000);
+      return resetDate.toISOString();
+    }
+
+    // Try to parse simple time-only format: "Resets 11am" or "Resets 3pm"
+    const simpleTimeMatch = text.match(/resets\s*(\d{1,2})(?::(\d{2}))?\s*(am|pm)/i);
+    if (simpleTimeMatch) {
+      let hours = parseInt(simpleTimeMatch[1], 10);
+      const minutes = simpleTimeMatch[2] ? parseInt(simpleTimeMatch[2], 10) : 0;
+      const ampm = simpleTimeMatch[3].toLowerCase();
+
+      // Convert 12-hour to 24-hour
+      if (ampm === 'pm' && hours !== 12) {
+        hours += 12;
+      } else if (ampm === 'am' && hours === 12) {
+        hours = 0;
+      }
+
+      // Create date for today at specified time
+      const resetDate = new Date(now);
+      resetDate.setHours(hours, minutes, 0, 0);
+
+      // If time has passed, use tomorrow
+      if (resetDate <= now) {
+        resetDate.setDate(resetDate.getDate() + 1);
+      }
+      return resetDate.toISOString();
+    }
+
+    // Try to parse date format: "Resets Dec 22 at 8pm" or "Resets Jan 15, 3:30pm"
+    // The regex explicitly matches only valid 3-letter month abbreviations to avoid
+    // matching words like "Resets" when there's no space separator.
+    // Optional "resets\s*" prefix handles cases with or without space after "Resets"
+    const dateMatch = text.match(
+      /(?:resets\s*)?(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s+(\d{1,2})(?:\s+at\s+|\s*,?\s*)(\d{1,2})(?::(\d{2}))?\s*(am|pm)/i
+    );
+    if (dateMatch) {
+      const monthName = dateMatch[1];
+      const day = parseInt(dateMatch[2], 10);
+      let hours = parseInt(dateMatch[3], 10);
+      const minutes = dateMatch[4] ? parseInt(dateMatch[4], 10) : 0;
+      const ampm = dateMatch[5].toLowerCase();
+
+      // Convert 12-hour to 24-hour
+      if (ampm === 'pm' && hours !== 12) {
+        hours += 12;
+      } else if (ampm === 'am' && hours === 12) {
+        hours = 0;
+      }
+
+      // Parse month name
+      const months: Record<string, number> = {
+        jan: 0,
+        feb: 1,
+        mar: 2,
+        apr: 3,
+        may: 4,
+        jun: 5,
+        jul: 6,
+        aug: 7,
+        sep: 8,
+        oct: 9,
+        nov: 10,
+        dec: 11,
+      };
+      const month = months[monthName.toLowerCase().substring(0, 3)];
+
+      if (month !== undefined) {
+        let year = now.getFullYear();
+        // If the date appears to be in the past, assume next year
+        const resetDate = new Date(year, month, day, hours, minutes);
+        if (resetDate < now) {
+          resetDate.setFullYear(year + 1);
+        }
+        return resetDate.toISOString();
+      }
+    }
+
+    // Fallback to default
+    return this.getDefaultResetTime(type);
+  }
+
+  /**
+   * Get default reset time based on usage type
+   */
+  private getDefaultResetTime(type: string): string {
+    const now = new Date();
+
+    if (type === 'session') {
+      // Session resets in ~5 hours
+      return new Date(now.getTime() + 5 * 60 * 60 * 1000).toISOString();
+    } else {
+      // Weekly resets on next Monday around noon
+      const result = new Date(now);
+      const currentDay = now.getDay();
+      let daysUntilMonday = (1 + 7 - currentDay) % 7;
+      if (daysUntilMonday === 0) daysUntilMonday = 7;
+      result.setDate(result.getDate() + daysUntilMonday);
+      result.setHours(12, 59, 0, 0);
+      return result.toISOString();
+    }
+  }
+}
diff --git a/temp_repo/apps/server/src/services/codex-app-server-service.ts b/temp_repo/apps/server/src/services/codex-app-server-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ecfb99da19055e91b5f9df9a365ea931ebb31e81
--- /dev/null
+++ b/temp_repo/apps/server/src/services/codex-app-server-service.ts
@@ -0,0 +1,212 @@
+import { spawn, type ChildProcess } from 'child_process';
+import readline from 'readline';
+import { findCodexCliPath } from '@automaker/platform';
+import { createLogger } from '@automaker/utils';
+import type {
+  AppServerModelResponse,
+  AppServerAccountResponse,
+  AppServerRateLimitsResponse,
+  JsonRpcRequest,
+} from '@automaker/types';
+
+const logger = createLogger('CodexAppServer');
+
+/**
+ * CodexAppServerService
+ *
+ * Centralized service for communicating with Codex CLI's app-server via JSON-RPC protocol.
+ * Handles process spawning, JSON-RPC messaging, and cleanup.
+ *
+ * Connection strategy: Spawn on-demand (new process for each method call)
+ */
+export class CodexAppServerService {
+  private cachedCliPath: string | null = null;
+
+  /**
+   * Check if Codex CLI is available on the system
+   */
+  async isAvailable(): Promise<boolean> {
+    this.cachedCliPath = await findCodexCliPath();
+    return Boolean(this.cachedCliPath);
+  }
+
+  /**
+   * Fetch available models from app-server
+   */
+  async getModels(): Promise<AppServerModelResponse | null> {
+    const result = await this.executeJsonRpc<AppServerModelResponse>((sendRequest) => {
+      return sendRequest('model/list', {});
+    });
+
+    if (result) {
+      logger.info(`[getModels] ✓ Fetched ${result.data.length} models`);
+    }
+
+    return result;
+  }
+
+  /**
+   * Fetch account information from app-server
+   */
+  async getAccount(): Promise<AppServerAccountResponse | null> {
+    return this.executeJsonRpc<AppServerAccountResponse>((sendRequest) => {
+      return sendRequest('account/read', { refreshToken: false });
+    });
+  }
+
+  /**
+   * Fetch rate limits from app-server
+   */
+  async getRateLimits(): Promise<AppServerRateLimitsResponse | null> {
+    return this.executeJsonRpc<AppServerRateLimitsResponse>((sendRequest) => {
+      return sendRequest('account/rateLimits/read', {});
+    });
+  }
+
+  /**
+   * Execute JSON-RPC requests via Codex app-server
+   *
+   * This method:
+   * 1. Spawns a new `codex app-server` process
+   * 2. Handles JSON-RPC initialization handshake
+   * 3. Executes user-provided requests
+   * 4. Cleans up the process
+   *
+   * @param requestFn - Function that receives sendRequest helper and returns a promise
+   * @returns Result of the JSON-RPC request or null on failure
+   */
+  private async executeJsonRpc<T>(
+    requestFn: (sendRequest: <R>(method: string, params?: unknown) => Promise<R>) => Promise<T>
+  ): Promise<T | null> {
+    let childProcess: ChildProcess | null = null;
+
+    try {
+      const cliPath = this.cachedCliPath || (await findCodexCliPath());
+
+      if (!cliPath) {
+        return null;
+      }
+
+      // On Windows, .cmd files must be run through shell
+      const needsShell = process.platform === 'win32' && cliPath.toLowerCase().endsWith('.cmd');
+
+      childProcess = spawn(cliPath, ['app-server'], {
+        cwd: process.cwd(),
+        env: {
+          ...process.env,
+          TERM: 'dumb',
+        },
+        stdio: ['pipe', 'pipe', 'pipe'],
+        shell: needsShell,
+      });
+
+      if (!childProcess.stdin || !childProcess.stdout) {
+        throw new Error('Failed to create stdio pipes');
+      }
+
+      // Setup readline for reading JSONL responses
+      const rl = readline.createInterface({
+        input: childProcess.stdout,
+        crlfDelay: Infinity,
+      });
+
+      // Message ID counter for JSON-RPC
+      let messageId = 0;
+      const pendingRequests = new Map<
+        number,
+        {
+          resolve: (value: unknown) => void;
+          reject: (error: Error) => void;
+          timeout: NodeJS.Timeout;
+        }
+      >();
+
+      // Process incoming messages
+      rl.on('line', (line) => {
+        if (!line.trim()) return;
+
+        try {
+          const message = JSON.parse(line);
+
+          // Handle response to our request
+          if ('id' in message && message.id !== undefined) {
+            const pending = pendingRequests.get(message.id);
+            if (pending) {
+              clearTimeout(pending.timeout);
+              pendingRequests.delete(message.id);
+              if (message.error) {
+                pending.reject(new Error(message.error.message || 'Unknown error'));
+              } else {
+                pending.resolve(message.result);
+              }
+            }
+          }
+          // Ignore notifications (no id field)
+        } catch {
+          // Ignore parse errors for non-JSON lines
+        }
+      });
+
+      // Helper to send JSON-RPC request and wait for response
+      const sendRequest = <R>(method: string, params?: unknown): Promise<R> => {
+        return new Promise((resolve, reject) => {
+          const id = ++messageId;
+          const request: JsonRpcRequest = {
+            method,
+            id,
+            params: params ?? {},
+          };
+
+          // Set timeout for request (10 seconds)
+          const timeout = setTimeout(() => {
+            pendingRequests.delete(id);
+            reject(new Error(`Request timeout: ${method}`));
+          }, 10000);
+
+          pendingRequests.set(id, {
+            resolve: resolve as (value: unknown) => void,
+            reject,
+            timeout,
+          });
+
+          childProcess!.stdin!.write(JSON.stringify(request) + '\n');
+        });
+      };
+
+      // Helper to send notification (no response expected)
+      const sendNotification = (method: string, params?: unknown): void => {
+        const notification = params ? { method, params } : { method };
+        childProcess!.stdin!.write(JSON.stringify(notification) + '\n');
+      };
+
+      // 1. Initialize the app-server
+      await sendRequest('initialize', {
+        clientInfo: {
+          name: 'automaker',
+          title: 'AutoMaker',
+          version: '1.0.0',
+        },
+      });
+
+      // 2. Send initialized notification
+      sendNotification('initialized');
+
+      // 3. Execute user-provided requests
+      const result = await requestFn(sendRequest);
+
+      // Clean up
+      rl.close();
+      childProcess.kill('SIGTERM');
+
+      return result;
+    } catch (error) {
+      logger.error('[executeJsonRpc] Failed:', error);
+      return null;
+    } finally {
+      // Ensure process is killed
+      if (childProcess && !childProcess.killed) {
+        childProcess.kill('SIGTERM');
+      }
+    }
+  }
+}
diff --git a/temp_repo/apps/server/src/services/codex-model-cache-service.ts b/temp_repo/apps/server/src/services/codex-model-cache-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0c9054036783cce981bf66a430786d243edea4b6
--- /dev/null
+++ b/temp_repo/apps/server/src/services/codex-model-cache-service.ts
@@ -0,0 +1,262 @@
+import path from 'path';
+import { secureFs } from '@automaker/platform';
+import { createLogger } from '@automaker/utils';
+import type { AppServerModel } from '@automaker/types';
+import type { CodexAppServerService } from './codex-app-server-service.js';
+
+const logger = createLogger('CodexModelCache');
+
+/**
+ * Codex model with UI-compatible format
+ */
+export interface CodexModel {
+  id: string;
+  label: string;
+  description: string;
+  hasThinking: boolean;
+  supportsVision: boolean;
+  tier: 'premium' | 'standard' | 'basic';
+  isDefault: boolean;
+}
+
+/**
+ * Cache structure stored on disk
+ */
+interface CodexModelCache {
+  models: CodexModel[];
+  cachedAt: number;
+  ttl: number;
+}
+
+/**
+ * CodexModelCacheService
+ *
+ * Caches Codex models fetched from app-server with TTL-based invalidation and disk persistence.
+ *
+ * Features:
+ * - 1-hour TTL (configurable)
+ * - Atomic file writes (temp file + rename)
+ * - Thread-safe (deduplicates concurrent refresh requests)
+ * - Auto-bootstrap on service creation
+ * - Graceful fallback (returns empty array on errors)
+ */
+export class CodexModelCacheService {
+  private cacheFilePath: string;
+  private ttl: number;
+  private appServerService: CodexAppServerService;
+  private inFlightRefresh: Promise<CodexModel[]> | null = null;
+
+  constructor(
+    dataDir: string,
+    appServerService: CodexAppServerService,
+    ttl: number = 3600000 // 1 hour default
+  ) {
+    this.cacheFilePath = path.join(dataDir, 'codex-models-cache.json');
+    this.ttl = ttl;
+    this.appServerService = appServerService;
+  }
+
+  /**
+   * Get models from cache or fetch if stale
+   *
+   * @param forceRefresh - If true, bypass cache and fetch fresh data
+   * @returns Array of Codex models (empty array if unavailable)
+   */
+  async getModels(forceRefresh = false): Promise<CodexModel[]> {
+    // If force refresh, skip cache
+    if (forceRefresh) {
+      return this.refreshModels();
+    }
+
+    // Try to load from cache
+    const cached = await this.loadFromCache();
+    if (cached) {
+      const age = Date.now() - cached.cachedAt;
+      const isStale = age > cached.ttl;
+
+      if (!isStale) {
+        logger.info(
+          `[getModels] ✓ Using cached models (${cached.models.length} models, age: ${Math.round(age / 60000)}min)`
+        );
+        return cached.models;
+      }
+    }
+
+    // Cache is stale or missing, refresh
+    return this.refreshModels();
+  }
+
+  /**
+   * Get models with cache metadata
+   *
+   * @param forceRefresh - If true, bypass cache and fetch fresh data
+   * @returns Object containing models and cache timestamp
+   */
+  async getModelsWithMetadata(
+    forceRefresh = false
+  ): Promise<{ models: CodexModel[]; cachedAt: number }> {
+    const models = await this.getModels(forceRefresh);
+
+    // Try to get the actual cache timestamp
+    const cached = await this.loadFromCache();
+    const cachedAt = cached?.cachedAt ?? Date.now();
+
+    return { models, cachedAt };
+  }
+
+  /**
+   * Refresh models from app-server and update cache
+   *
+   * Thread-safe: Deduplicates concurrent refresh requests
+   */
+  async refreshModels(): Promise<CodexModel[]> {
+    // Deduplicate concurrent refresh requests
+    if (this.inFlightRefresh) {
+      return this.inFlightRefresh;
+    }
+
+    // Start new refresh
+    this.inFlightRefresh = this.doRefresh();
+
+    try {
+      const models = await this.inFlightRefresh;
+      return models;
+    } finally {
+      this.inFlightRefresh = null;
+    }
+  }
+
+  /**
+   * Clear the cache file
+   */
+  async clearCache(): Promise<void> {
+    logger.info('[clearCache] Clearing cache...');
+
+    try {
+      await secureFs.unlink(this.cacheFilePath);
+      logger.info('[clearCache] Cache cleared');
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+        logger.error('[clearCache] Failed to clear cache:', error);
+      }
+    }
+  }
+
+  /**
+   * Internal method to perform the actual refresh
+   */
+  private async doRefresh(): Promise<CodexModel[]> {
+    try {
+      // Check if app-server is available
+      const isAvailable = await this.appServerService.isAvailable();
+      if (!isAvailable) {
+        return [];
+      }
+
+      // Fetch models from app-server
+      const response = await this.appServerService.getModels();
+      if (!response || !response.data) {
+        return [];
+      }
+
+      // Transform models to UI format
+      const models = response.data.map((model) => this.transformModel(model));
+
+      // Save to cache
+      await this.saveToCache(models);
+
+      logger.info(`[refreshModels] ✓ Fetched fresh models (${models.length} models)`);
+
+      return models;
+    } catch (error) {
+      logger.error('[doRefresh] Refresh failed:', error);
+      return [];
+    }
+  }
+
+  /**
+   * Transform app-server model to UI-compatible format
+   */
+  private transformModel(appServerModel: AppServerModel): CodexModel {
+    return {
+      id: `codex-${appServerModel.id}`, // Add 'codex-' prefix for compatibility
+      label: appServerModel.displayName,
+      description: appServerModel.description,
+      hasThinking: appServerModel.supportedReasoningEfforts.length > 0,
+      supportsVision: true, // All Codex models support vision
+      tier: this.inferTier(appServerModel.id),
+      isDefault: appServerModel.isDefault,
+    };
+  }
+
+  /**
+   * Infer tier from model ID
+   */
+  private inferTier(modelId: string): 'premium' | 'standard' | 'basic' {
+    if (
+      modelId.includes('max') ||
+      modelId.includes('gpt-5.2-codex') ||
+      modelId.includes('gpt-5.3-codex')
+    ) {
+      return 'premium';
+    }
+    if (modelId.includes('mini')) {
+      return 'basic';
+    }
+    return 'standard';
+  }
+
+  /**
+   * Load cache from disk
+   */
+  private async loadFromCache(): Promise<CodexModelCache | null> {
+    try {
+      const content = await secureFs.readFile(this.cacheFilePath, 'utf-8');
+      const cache = JSON.parse(content.toString()) as CodexModelCache;
+
+      // Validate cache structure
+      if (!Array.isArray(cache.models) || typeof cache.cachedAt !== 'number') {
+        logger.warn('[loadFromCache] Invalid cache structure, ignoring');
+        return null;
+      }
+
+      return cache;
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+        logger.warn('[loadFromCache] Failed to read cache:', error);
+      }
+      return null;
+    }
+  }
+
+  /**
+   * Save cache to disk (atomic write)
+   */
+  private async saveToCache(models: CodexModel[]): Promise<void> {
+    const cache: CodexModelCache = {
+      models,
+      cachedAt: Date.now(),
+      ttl: this.ttl,
+    };
+
+    const tempPath = `${this.cacheFilePath}.tmp.${Date.now()}`;
+
+    try {
+      // Write to temp file
+      const content = JSON.stringify(cache, null, 2);
+      await secureFs.writeFile(tempPath, content, 'utf-8');
+
+      // Atomic rename
+      await secureFs.rename(tempPath, this.cacheFilePath);
+    } catch (error) {
+      logger.error('[saveToCache] Failed to save cache:', error);
+
+      // Clean up temp file
+      try {
+        await secureFs.unlink(tempPath);
+      } catch {
+        // Ignore cleanup errors
+      }
+    }
+  }
+}
diff --git a/temp_repo/apps/server/src/services/codex-usage-service.ts b/temp_repo/apps/server/src/services/codex-usage-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e18d508e3c2d3c365fdaacaa9c1237b219f7e667
--- /dev/null
+++ b/temp_repo/apps/server/src/services/codex-usage-service.ts
@@ -0,0 +1,348 @@
+import {
+  findCodexCliPath,
+  getCodexAuthPath,
+  systemPathExists,
+  systemPathReadFile,
+} from '@automaker/platform';
+import { createLogger } from '@automaker/utils';
+import type { CodexAppServerService } from './codex-app-server-service.js';
+
+const logger = createLogger('CodexUsage');
+
+export interface CodexRateLimitWindow {
+  limit: number;
+  used: number;
+  remaining: number;
+  usedPercent: number;
+  windowDurationMins: number;
+  resetsAt: number;
+}
+
+export type CodexPlanType = 'free' | 'plus' | 'pro' | 'team' | 'enterprise' | 'edu' | 'unknown';
+
+export interface CodexUsageData {
+  rateLimits: {
+    primary?: CodexRateLimitWindow;
+    secondary?: CodexRateLimitWindow;
+    planType?: CodexPlanType;
+  } | null;
+  lastUpdated: string;
+}
+
+/**
+ * Codex Usage Service
+ *
+ * Fetches usage data from Codex CLI using the app-server JSON-RPC API.
+ * Falls back to auth file parsing if app-server is unavailable.
+ */
+export class CodexUsageService {
+  private cachedCliPath: string | null = null;
+  private appServerService: CodexAppServerService | null = null;
+  private accountPlanTypeArray: CodexPlanType[] = [
+    'free',
+    'plus',
+    'pro',
+    'team',
+    'enterprise',
+    'edu',
+  ];
+
+  constructor(appServerService?: CodexAppServerService) {
+    this.appServerService = appServerService || null;
+  }
+
+  /**
+   * Check if Codex CLI is available on the system
+   */
+  async isAvailable(): Promise<boolean> {
+    this.cachedCliPath = await findCodexCliPath();
+    return Boolean(this.cachedCliPath);
+  }
+
+  /**
+   * Attempt to fetch usage data
+   *
+   * Priority order:
+   * 1. Codex app-server JSON-RPC API (most reliable, provides real-time data)
+   * 2. Auth file JWT parsing (fallback for plan type)
+   */
+  async fetchUsageData(): Promise<CodexUsageData> {
+    logger.info('[fetchUsageData] Starting...');
+    const cliPath = this.cachedCliPath || (await findCodexCliPath());
+
+    if (!cliPath) {
+      logger.error('[fetchUsageData] Codex CLI not found');
+      throw new Error('Codex CLI not found. Please install it with: npm install -g @openai/codex');
+    }
+
+    logger.info(`[fetchUsageData] Using CLI path: ${cliPath}`);
+
+    // Try to get usage from Codex app-server (most reliable method)
+    const appServerUsage = await this.fetchFromAppServer();
+    if (appServerUsage) {
+      logger.info('[fetchUsageData] ✓ Fetched usage from app-server');
+      return appServerUsage;
+    }
+
+    logger.info('[fetchUsageData] App-server failed, trying auth file fallback...');
+
+    // Fallback: try to parse usage from auth file
+    const authUsage = await this.fetchFromAuthFile();
+    if (authUsage) {
+      logger.info('[fetchUsageData] ✓ Fetched usage from auth file');
+      return authUsage;
+    }
+
+    logger.info('[fetchUsageData] All methods failed, returning unknown');
+
+    // If all else fails, return unknown
+    return {
+      rateLimits: {
+        planType: 'unknown',
+      },
+      lastUpdated: new Date().toISOString(),
+    };
+  }
+
+  /**
+   * Fetch usage data from Codex app-server using JSON-RPC API
+   * This is the most reliable method as it gets real-time data from OpenAI
+   */
+  private async fetchFromAppServer(): Promise<CodexUsageData | null> {
+    try {
+      // Use CodexAppServerService if available
+      if (!this.appServerService) {
+        return null;
+      }
+
+      // Fetch account and rate limits in parallel
+      const [accountResult, rateLimitsResult] = await Promise.all([
+        this.appServerService.getAccount(),
+        this.appServerService.getRateLimits(),
+      ]);
+
+      if (!accountResult) {
+        return null;
+      }
+
+      // Build response
+      // Prefer planType from rateLimits (more accurate/current) over account (can be stale)
+      let planType: CodexPlanType = 'unknown';
+
+      // First try rate limits planType (most accurate)
+      const rateLimitsPlanType = rateLimitsResult?.rateLimits?.planType;
+      if (rateLimitsPlanType) {
+        const normalizedType = rateLimitsPlanType.toLowerCase() as CodexPlanType;
+        if (this.accountPlanTypeArray.includes(normalizedType)) {
+          planType = normalizedType;
+        }
+      }
+
+      // Fall back to account planType if rate limits didn't have it
+      if (planType === 'unknown' && accountResult.account?.planType) {
+        const normalizedType = accountResult.account.planType.toLowerCase() as CodexPlanType;
+        if (this.accountPlanTypeArray.includes(normalizedType)) {
+          planType = normalizedType;
+        }
+      }
+
+      const result: CodexUsageData = {
+        rateLimits: {
+          planType,
+        },
+        lastUpdated: new Date().toISOString(),
+      };
+
+      // Add rate limit info if available
+      if (rateLimitsResult?.rateLimits?.primary) {
+        const primary = rateLimitsResult.rateLimits.primary;
+        result.rateLimits!.primary = {
+          limit: -1, // Not provided by API
+          used: -1, // Not provided by API
+          remaining: -1, // Not provided by API
+          usedPercent: primary.usedPercent,
+          windowDurationMins: primary.windowDurationMins,
+          resetsAt: primary.resetsAt,
+        };
+      }
+
+      // Add secondary rate limit if available
+      if (rateLimitsResult?.rateLimits?.secondary) {
+        const secondary = rateLimitsResult.rateLimits.secondary;
+        result.rateLimits!.secondary = {
+          limit: -1, // Not provided by API
+          used: -1, // Not provided by API
+          remaining: -1, // Not provided by API
+          usedPercent: secondary.usedPercent,
+          windowDurationMins: secondary.windowDurationMins,
+          resetsAt: secondary.resetsAt,
+        };
+      }
+
+      logger.info(
+        `[fetchFromAppServer] ✓ Plan: ${planType}, Primary: ${result.rateLimits?.primary?.usedPercent || 'N/A'}%, Secondary: ${result.rateLimits?.secondary?.usedPercent || 'N/A'}%`
+      );
+      return result;
+    } catch (error) {
+      logger.error('[fetchFromAppServer] Failed:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Extract plan type from auth file JWT token
+   * Returns the actual plan type or 'unknown' if not available
+   */
+  private async getPlanTypeFromAuthFile(): Promise<CodexPlanType> {
+    try {
+      const authFilePath = getCodexAuthPath();
+      logger.info(`[getPlanTypeFromAuthFile] Auth file path: ${authFilePath}`);
+      const exists = systemPathExists(authFilePath);
+
+      if (!exists) {
+        logger.warn('[getPlanTypeFromAuthFile] Auth file does not exist');
+        return 'unknown';
+      }
+
+      const authContent = await systemPathReadFile(authFilePath);
+      const authData = JSON.parse(authContent);
+
+      if (!authData.tokens?.id_token) {
+        logger.info('[getPlanTypeFromAuthFile] No id_token in auth file');
+        return 'unknown';
+      }
+
+      const claims = this.parseJwt(authData.tokens.id_token);
+      if (!claims) {
+        logger.info('[getPlanTypeFromAuthFile] Failed to parse JWT');
+        return 'unknown';
+      }
+
+      logger.info('[getPlanTypeFromAuthFile] JWT claims keys:', Object.keys(claims));
+
+      // Extract plan type from nested OpenAI auth object with type validation
+      const openaiAuthClaim = claims['https://api.openai.com/auth'];
+      logger.info(
+        '[getPlanTypeFromAuthFile] OpenAI auth claim:',
+        JSON.stringify(openaiAuthClaim, null, 2)
+      );
+
+      let accountType: string | undefined;
+      let isSubscriptionExpired = false;
+
+      if (
+        openaiAuthClaim &&
+        typeof openaiAuthClaim === 'object' &&
+        !Array.isArray(openaiAuthClaim)
+      ) {
+        const openaiAuth = openaiAuthClaim as Record<string, unknown>;
+
+        if (typeof openaiAuth.chatgpt_plan_type === 'string') {
+          accountType = openaiAuth.chatgpt_plan_type;
+        }
+
+        // Check if subscription has expired
+        if (typeof openaiAuth.chatgpt_subscription_active_until === 'string') {
+          const expiryDate = new Date(openaiAuth.chatgpt_subscription_active_until);
+          if (!isNaN(expiryDate.getTime())) {
+            isSubscriptionExpired = expiryDate < new Date();
+          }
+        }
+      } else {
+        // Fallback: try top-level claim names
+        const possibleClaimNames = [
+          'https://chatgpt.com/account_type',
+          'account_type',
+          'plan',
+          'plan_type',
+        ];
+
+        for (const claimName of possibleClaimNames) {
+          const claimValue = claims[claimName];
+          if (claimValue && typeof claimValue === 'string') {
+            accountType = claimValue;
+            break;
+          }
+        }
+      }
+
+      // If subscription is expired, treat as free plan
+      if (isSubscriptionExpired && accountType && accountType !== 'free') {
+        logger.info(`Subscription expired, using "free" instead of "${accountType}"`);
+        accountType = 'free';
+      }
+
+      if (accountType) {
+        const normalizedType = accountType.toLowerCase() as CodexPlanType;
+        logger.info(
+          `[getPlanTypeFromAuthFile] Account type: "${accountType}", normalized: "${normalizedType}"`
+        );
+        if (this.accountPlanTypeArray.includes(normalizedType)) {
+          logger.info(`[getPlanTypeFromAuthFile] Returning plan type: ${normalizedType}`);
+          return normalizedType;
+        }
+      } else {
+        logger.info('[getPlanTypeFromAuthFile] No account type found in claims');
+      }
+    } catch (error) {
+      logger.error('[getPlanTypeFromAuthFile] Failed to get plan type from auth file:', error);
+    }
+
+    logger.info('[getPlanTypeFromAuthFile] Returning unknown');
+    return 'unknown';
+  }
+
+  /**
+   * Try to extract usage info from the Codex auth file
+   * Reuses getPlanTypeFromAuthFile to avoid code duplication
+   */
+  private async fetchFromAuthFile(): Promise<CodexUsageData | null> {
+    logger.info('[fetchFromAuthFile] Starting...');
+    try {
+      const planType = await this.getPlanTypeFromAuthFile();
+      logger.info(`[fetchFromAuthFile] Got plan type: ${planType}`);
+
+      if (planType === 'unknown') {
+        logger.info('[fetchFromAuthFile] Plan type unknown, returning null');
+        return null;
+      }
+
+      const result: CodexUsageData = {
+        rateLimits: {
+          planType,
+        },
+        lastUpdated: new Date().toISOString(),
+      };
+
+      logger.info('[fetchFromAuthFile] Returning result:', JSON.stringify(result, null, 2));
+      return result;
+    } catch (error) {
+      logger.error('[fetchFromAuthFile] Failed to parse auth file:', error);
+    }
+
+    return null;
+  }
+
+  /**
+   * Parse JWT token to extract claims
+   */
+  private parseJwt(token: string): Record<string, unknown> | null {
+    try {
+      const parts = token.split('.');
+
+      if (parts.length !== 3) {
+        return null;
+      }
+
+      const base64Url = parts[1];
+      const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+
+      // Use Buffer for Node.js environment
+      const jsonPayload = Buffer.from(base64, 'base64').toString('utf-8');
+
+      return JSON.parse(jsonPayload);
+    } catch {
+      return null;
+    }
+  }
+}
diff --git a/temp_repo/apps/server/src/services/commit-log-service.ts b/temp_repo/apps/server/src/services/commit-log-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..14cb21d0b65fcd8058ebd89c0d0d7510213a31d9
--- /dev/null
+++ b/temp_repo/apps/server/src/services/commit-log-service.ts
@@ -0,0 +1,161 @@
+/**
+ * Service for fetching commit log data from a worktree.
+ *
+ * Extracts the heavy Git command execution and parsing logic from the
+ * commit-log route handler so the handler only validates input,
+ * invokes this service, streams lifecycle events, and sends the response.
+ *
+ * Follows the same approach as branch-commit-log-service: a single
+ * `git log --name-only` call with custom separators to fetch both
+ * commit metadata and file lists, avoiding N+1 git invocations.
+ */
+
+import { execGitCommand } from '../lib/git.js';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface CommitLogEntry {
+  hash: string;
+  shortHash: string;
+  author: string;
+  authorEmail: string;
+  date: string;
+  subject: string;
+  body: string;
+  files: string[];
+}
+
+export interface CommitLogResult {
+  branch: string;
+  commits: CommitLogEntry[];
+  total: number;
+}
+
+// ============================================================================
+// Service
+// ============================================================================
+
+/**
+ * Fetch the commit log for a worktree (HEAD).
+ *
+ * Runs a single `git log --name-only` invocation plus `git rev-parse`
+ * inside the given worktree path and returns a structured result.
+ *
+ * @param worktreePath - Absolute path to the worktree / repository
+ * @param limit        - Maximum number of commits to return (clamped 1-100)
+ */
+export async function getCommitLog(worktreePath: string, limit: number): Promise<CommitLogResult> {
+  // Clamp limit to a reasonable range
+  const parsedLimit = Number(limit);
+  const commitLimit = Math.min(Math.max(1, Number.isFinite(parsedLimit) ? parsedLimit : 20), 100);
+
+  // Use custom separators to parse both metadata and file lists from
+  // a single git log invocation (same approach as branch-commit-log-service).
+  //
+  // -m causes merge commits to be diffed against each parent so all
+  // files touched by the merge are listed (without -m, --name-only
+  // produces no file output for merge commits because they have 2+ parents).
+  // This means merge commits appear multiple times in the output (once per
+  // parent), so we deduplicate by hash below and merge their file lists.
+  // We over-fetch (2x the limit) to compensate for -m duplicating merge
+  // commit entries, then trim the result to the requested limit.
+  // Use ASCII control characters as record separators – these cannot appear in
+  // git commit messages, so these delimiters are safe regardless of commit
+  // body content.  %x00 and %x01 in git's format string emit literal NUL /
+  // SOH bytes respectively.
+  //
+  // COMMIT_SEP (\x00) – marks the start of each commit record.
+  // META_END   (\x01) – separates commit metadata from the --name-only file list.
+  //
+  // Full per-commit layout emitted by git:
+  //   \x00\n<hash>\n<shorthash>\n...\n<subject>\n<body>\x01<files...>
+  const COMMIT_SEP = '\x00';
+  const META_END = '\x01';
+  const fetchLimit = commitLimit * 2;
+
+  const logOutput = await execGitCommand(
+    [
+      'log',
+      `--max-count=${fetchLimit}`,
+      '-m',
+      '--name-only',
+      `--format=%x00%n%H%n%h%n%an%n%ae%n%aI%n%s%n%b%x01`,
+    ],
+    worktreePath
+  );
+
+  // Split output into per-commit blocks and drop the empty first chunk
+  // (the output starts with a NUL commit separator).
+  const commitBlocks = logOutput.split(COMMIT_SEP).filter((block) => block.trim());
+
+  // Use a Map to deduplicate merge commit entries (which appear once per
+  // parent when -m is used) while preserving insertion order.
+  const commitMap = new Map<string, CommitLogEntry>();
+
+  for (const block of commitBlocks) {
+    const metaEndIdx = block.indexOf(META_END);
+    if (metaEndIdx === -1) continue; // malformed block, skip
+
+    // --- Parse metadata (everything before the META_END delimiter) ---
+    const metaRaw = block.substring(0, metaEndIdx);
+    const metaLines = metaRaw.split('\n');
+
+    // The first line may be empty (newline right after COMMIT_SEP), skip it
+    const nonEmptyStart = metaLines.findIndex((l) => l.trim() !== '');
+    if (nonEmptyStart === -1) continue;
+
+    const fields = metaLines.slice(nonEmptyStart);
+    if (fields.length < 6) continue; // need at least hash..subject
+
+    const hash = fields[0].trim();
+    if (!hash) continue; // defensive: skip if hash is empty
+    const shortHash = fields[1]?.trim() ?? '';
+    const author = fields[2]?.trim() ?? '';
+    const authorEmail = fields[3]?.trim() ?? '';
+    const date = fields[4]?.trim() ?? '';
+    const subject = fields[5]?.trim() ?? '';
+    const body = fields.slice(6).join('\n').trim();
+
+    // --- Parse file list (everything after the META_END delimiter) ---
+    const filesRaw = block.substring(metaEndIdx + META_END.length);
+    const blockFiles = filesRaw
+      .trim()
+      .split('\n')
+      .filter((f) => f.trim());
+
+    // Merge file lists for duplicate entries (merge commits with -m)
+    const existing = commitMap.get(hash);
+    if (existing) {
+      // Add new files to the existing entry's file set
+      const fileSet = new Set(existing.files);
+      for (const f of blockFiles) fileSet.add(f);
+      existing.files = [...fileSet];
+    } else {
+      commitMap.set(hash, {
+        hash,
+        shortHash,
+        author,
+        authorEmail,
+        date,
+        subject,
+        body,
+        files: [...new Set(blockFiles)],
+      });
+    }
+  }
+
+  // Trim to the requested limit (we over-fetched to account for -m duplicates)
+  const commits = [...commitMap.values()].slice(0, commitLimit);
+
+  // Get current branch name
+  const branchOutput = await execGitCommand(['rev-parse', '--abbrev-ref', 'HEAD'], worktreePath);
+  const branch = branchOutput.trim();
+
+  return {
+    branch,
+    commits,
+    total: commits.length,
+  };
+}
diff --git a/temp_repo/apps/server/src/services/concurrency-manager.ts b/temp_repo/apps/server/src/services/concurrency-manager.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b64456a172428110c99f247ebaef7e71d526313a
--- /dev/null
+++ b/temp_repo/apps/server/src/services/concurrency-manager.ts
@@ -0,0 +1,272 @@
+/**
+ * ConcurrencyManager - Manages running feature slots with lease-based reference counting
+ *
+ * Extracted from AutoModeService to provide a standalone service for tracking
+ * running feature execution with proper lease counting to support nested calls
+ * (e.g., resumeFeature -> executeFeature).
+ *
+ * Key behaviors:
+ * - acquire() with existing entry + allowReuse: increment leaseCount, return existing
+ * - acquire() with existing entry + no allowReuse: throw Error('already running')
+ * - release() decrements leaseCount, only deletes at 0
+ * - release() with force:true bypasses leaseCount check
+ */
+
+import type { ModelProvider } from '@automaker/types';
+
+/**
+ * Function type for getting the current branch of a project.
+ * Injected to allow for testing and decoupling from git operations.
+ */
+export type GetCurrentBranchFn = (projectPath: string) => Promise<string | null>;
+
+/**
+ * Represents a running feature execution with all tracking metadata
+ */
+export interface RunningFeature {
+  featureId: string;
+  projectPath: string;
+  worktreePath: string | null;
+  branchName: string | null;
+  abortController: AbortController;
+  isAutoMode: boolean;
+  startTime: number;
+  leaseCount: number;
+  model?: string;
+  provider?: ModelProvider;
+}
+
+/**
+ * Parameters for acquiring a running feature slot
+ */
+export interface AcquireParams {
+  featureId: string;
+  projectPath: string;
+  isAutoMode: boolean;
+  allowReuse?: boolean;
+  abortController?: AbortController;
+}
+
+/**
+ * ConcurrencyManager manages the running features Map with lease-based reference counting.
+ *
+ * This supports nested execution patterns where a feature may be acquired multiple times
+ * (e.g., during resume operations) and should only be released when all references are done.
+ */
+export class ConcurrencyManager {
+  private runningFeatures = new Map<string, RunningFeature>();
+  private getCurrentBranch: GetCurrentBranchFn;
+
+  /**
+   * @param getCurrentBranch - Function to get the current branch for a project.
+   *                           If not provided, defaults to returning 'main'.
+   */
+  constructor(getCurrentBranch?: GetCurrentBranchFn) {
+    this.getCurrentBranch = getCurrentBranch ?? (() => Promise.resolve('main'));
+  }
+
+  /**
+   * Acquire a slot in the runningFeatures map for a feature.
+   * Implements reference counting via leaseCount to support nested calls
+   * (e.g., resumeFeature -> executeFeature).
+   *
+   * @param params.featureId - ID of the feature to track
+   * @param params.projectPath - Path to the project
+   * @param params.isAutoMode - Whether this is an auto-mode execution
+   * @param params.allowReuse - If true, allows incrementing leaseCount for already-running features
+   * @param params.abortController - Optional abort controller to use
+   * @returns The RunningFeature entry (existing or newly created)
+   * @throws Error if feature is already running and allowReuse is false
+   */
+  acquire(params: AcquireParams): RunningFeature {
+    const existing = this.runningFeatures.get(params.featureId);
+    if (existing) {
+      if (!params.allowReuse) {
+        throw new Error('already running');
+      }
+      existing.leaseCount += 1;
+      return existing;
+    }
+
+    const abortController = params.abortController ?? new AbortController();
+    const entry: RunningFeature = {
+      featureId: params.featureId,
+      projectPath: params.projectPath,
+      worktreePath: null,
+      branchName: null,
+      abortController,
+      isAutoMode: params.isAutoMode,
+      startTime: Date.now(),
+      leaseCount: 1,
+    };
+    this.runningFeatures.set(params.featureId, entry);
+    return entry;
+  }
+
+  /**
+   * Release a slot in the runningFeatures map for a feature.
+   * Decrements leaseCount and only removes the entry when it reaches zero,
+   * unless force option is used.
+   *
+   * @param featureId - ID of the feature to release
+   * @param options.force - If true, immediately removes the entry regardless of leaseCount
+   */
+  release(featureId: string, options?: { force?: boolean }): void {
+    const entry = this.runningFeatures.get(featureId);
+    if (!entry) {
+      return;
+    }
+
+    if (options?.force) {
+      this.runningFeatures.delete(featureId);
+      return;
+    }
+
+    entry.leaseCount -= 1;
+    if (entry.leaseCount <= 0) {
+      this.runningFeatures.delete(featureId);
+    }
+  }
+
+  /**
+   * Check if a feature is currently running
+   *
+   * @param featureId - ID of the feature to check
+   * @returns true if the feature is in the runningFeatures map
+   */
+  isRunning(featureId: string): boolean {
+    return this.runningFeatures.has(featureId);
+  }
+
+  /**
+   * Get the RunningFeature entry for a feature
+   *
+   * @param featureId - ID of the feature
+   * @returns The RunningFeature entry or undefined if not running
+   */
+  getRunningFeature(featureId: string): RunningFeature | undefined {
+    return this.runningFeatures.get(featureId);
+  }
+
+  /**
+   * Get count of running features for a specific project
+   *
+   * @param projectPath - The project path to count features for
+   * @returns Number of running features for the project
+   */
+  getRunningCount(projectPath: string): number {
+    let count = 0;
+    for (const [, feature] of this.runningFeatures) {
+      if (feature.projectPath === projectPath) {
+        count++;
+      }
+    }
+    return count;
+  }
+
+  /**
+   * Get count of running features for a specific worktree
+   *
+   * @param projectPath - The project path
+   * @param branchName - The branch name, or null for main worktree
+   *                     (features without branchName or matching primary branch)
+   * @param options.autoModeOnly - If true, only count features started by auto mode.
+   *                               Note: The auto-loop coordinator now counts ALL
+   *                               running features (not just auto-mode) to ensure
+   *                               total system load is respected. This option is
+   *                               retained for other callers that may need filtered counts.
+   * @returns Number of running features for the worktree
+   */
+  async getRunningCountForWorktree(
+    projectPath: string,
+    branchName: string | null,
+    options?: { autoModeOnly?: boolean }
+  ): Promise<number> {
+    // Get the actual primary branch name for the project
+    const primaryBranch = await this.getCurrentBranch(projectPath);
+
+    let count = 0;
+    for (const [, feature] of this.runningFeatures) {
+      // If autoModeOnly is set, skip manually started features
+      if (options?.autoModeOnly && !feature.isAutoMode) {
+        continue;
+      }
+
+      // Filter by project path AND branchName to get accurate worktree-specific count
+      const featureBranch = feature.branchName ?? null;
+      if (branchName === null) {
+        // Main worktree: match features with branchName === null OR branchName matching primary branch
+        const isPrimaryBranch =
+          featureBranch === null || (primaryBranch && featureBranch === primaryBranch);
+        if (feature.projectPath === projectPath && isPrimaryBranch) {
+          count++;
+        }
+      } else {
+        // Feature worktree: exact match
+        if (feature.projectPath === projectPath && featureBranch === branchName) {
+          count++;
+        }
+      }
+    }
+    return count;
+  }
+
+  /**
+   * Get all currently running features
+   *
+   * @returns Array of all RunningFeature entries
+   */
+  getAllRunning(): RunningFeature[] {
+    return Array.from(this.runningFeatures.values());
+  }
+
+  /**
+   * Get running feature IDs for a specific worktree, with proper primary branch normalization.
+   *
+   * When branchName is null (main worktree), matches features with branchName === null
+   * OR branchName matching the primary branch (e.g., "main", "master").
+   *
+   * @param projectPath - The project path
+   * @param branchName - The branch name, or null for main worktree
+   * @returns Array of feature IDs running in the specified worktree
+   */
+  async getRunningFeaturesForWorktree(
+    projectPath: string,
+    branchName: string | null
+  ): Promise<string[]> {
+    const primaryBranch = await this.getCurrentBranch(projectPath);
+    const featureIds: string[] = [];
+
+    for (const [, feature] of this.runningFeatures) {
+      if (feature.projectPath !== projectPath) continue;
+      const featureBranch = feature.branchName ?? null;
+
+      if (branchName === null) {
+        // Main worktree: match features with null branchName OR primary branch name
+        const isPrimaryBranch =
+          featureBranch === null || (primaryBranch && featureBranch === primaryBranch);
+        if (isPrimaryBranch) featureIds.push(feature.featureId);
+      } else {
+        // Feature worktree: exact match
+        if (featureBranch === branchName) featureIds.push(feature.featureId);
+      }
+    }
+
+    return featureIds;
+  }
+
+  /**
+   * Update properties of a running feature
+   *
+   * @param featureId - ID of the feature to update
+   * @param updates - Partial RunningFeature properties to update
+   */
+  updateRunningFeature(featureId: string, updates: Partial<RunningFeature>): void {
+    const entry = this.runningFeatures.get(featureId);
+    if (!entry) {
+      return;
+    }
+
+    Object.assign(entry, updates);
+  }
+}
diff --git a/temp_repo/apps/server/src/services/copilot-connection-service.ts b/temp_repo/apps/server/src/services/copilot-connection-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..deb1e4324f529ae07e3a75f5bae9eb7ba9ff0862
--- /dev/null
+++ b/temp_repo/apps/server/src/services/copilot-connection-service.ts
@@ -0,0 +1,80 @@
+/**
+ * Copilot Connection Service
+ *
+ * Handles the connection and disconnection of Copilot CLI to the app.
+ * Uses a marker file to track the disconnected state.
+ */
+
+import * as fs from 'fs/promises';
+import * as path from 'path';
+import { createLogger } from '@automaker/utils';
+import { COPILOT_DISCONNECTED_MARKER_FILE } from '../routes/setup/common.js';
+
+const logger = createLogger('CopilotConnectionService');
+
+/**
+ * Get the path to the disconnected marker file
+ */
+function getMarkerPath(projectRoot?: string): string {
+  const root = projectRoot || process.cwd();
+  const automakerDir = path.join(root, '.automaker');
+  return path.join(automakerDir, COPILOT_DISCONNECTED_MARKER_FILE);
+}
+
+/**
+ * Connect Copilot CLI to the app by removing the disconnected marker
+ *
+ * @param projectRoot - Optional project root directory (defaults to cwd)
+ * @returns Promise that resolves when the connection is established
+ */
+export async function connectCopilot(projectRoot?: string): Promise<void> {
+  const markerPath = getMarkerPath(projectRoot);
+
+  try {
+    await fs.unlink(markerPath);
+    logger.info('Copilot CLI connected to app (marker removed)');
+  } catch (error) {
+    // File doesn't exist - that's fine, Copilot is already connected
+    if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+      logger.error('Failed to remove disconnected marker:', error);
+      throw error;
+    }
+    logger.debug('Copilot already connected (no marker file found)');
+  }
+}
+
+/**
+ * Disconnect Copilot CLI from the app by creating the disconnected marker
+ *
+ * @param projectRoot - Optional project root directory (defaults to cwd)
+ * @returns Promise that resolves when the disconnection is complete
+ */
+export async function disconnectCopilot(projectRoot?: string): Promise<void> {
+  const root = projectRoot || process.cwd();
+  const automakerDir = path.join(root, '.automaker');
+  const markerPath = path.join(automakerDir, COPILOT_DISCONNECTED_MARKER_FILE);
+
+  // Ensure .automaker directory exists
+  await fs.mkdir(automakerDir, { recursive: true });
+
+  // Create the disconnection marker
+  await fs.writeFile(markerPath, 'Copilot CLI disconnected from app');
+  logger.info('Copilot CLI disconnected from app (marker created)');
+}
+
+/**
+ * Check if Copilot CLI is connected (not disconnected)
+ *
+ * @param projectRoot - Optional project root directory (defaults to cwd)
+ * @returns Promise that resolves to true if connected, false if disconnected
+ */
+export async function isCopilotConnected(projectRoot?: string): Promise<boolean> {
+  const markerPath = getMarkerPath(projectRoot);
+
+  try {
+    await fs.access(markerPath);
+    return false; // Marker exists = disconnected
+  } catch {
+    return true; // Marker doesn't exist = connected
+  }
+}
diff --git a/temp_repo/apps/server/src/services/cursor-config-service.ts b/temp_repo/apps/server/src/services/cursor-config-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d84252b9b7bee7268359d8aa6092663c4467a7a5
--- /dev/null
+++ b/temp_repo/apps/server/src/services/cursor-config-service.ts
@@ -0,0 +1,280 @@
+/**
+ * Cursor Config Service
+ *
+ * Manages Cursor CLI permissions configuration files:
+ * - Global: ~/.cursor/cli-config.json
+ * - Project: <project>/.cursor/cli.json
+ *
+ * Based on: https://cursor.com/docs/cli/reference/configuration
+ */
+
+import * as fs from 'fs/promises';
+import * as path from 'path';
+import * as os from 'os';
+import { createLogger } from '@automaker/utils';
+import type {
+  CursorCliConfigFile,
+  CursorCliPermissions,
+  CursorPermissionProfile,
+} from '@automaker/types';
+import {
+  CURSOR_STRICT_PROFILE,
+  CURSOR_DEVELOPMENT_PROFILE,
+  CURSOR_PERMISSION_PROFILES,
+} from '@automaker/types';
+
+const logger = createLogger('CursorConfigService');
+
+/**
+ * Get the path to the global Cursor CLI config
+ */
+export function getGlobalConfigPath(): string {
+  // Windows: $env:USERPROFILE\.cursor\cli-config.json
+  // macOS/Linux: ~/.cursor/cli-config.json
+  // XDG_CONFIG_HOME override on Linux: $XDG_CONFIG_HOME/cursor/cli-config.json
+  const xdgConfig = process.env.XDG_CONFIG_HOME;
+  const cursorConfigDir = process.env.CURSOR_CONFIG_DIR;
+
+  if (cursorConfigDir) {
+    return path.join(cursorConfigDir, 'cli-config.json');
+  }
+
+  if (process.platform === 'linux' && xdgConfig) {
+    return path.join(xdgConfig, 'cursor', 'cli-config.json');
+  }
+
+  return path.join(os.homedir(), '.cursor', 'cli-config.json');
+}
+
+/**
+ * Get the path to a project's Cursor CLI config
+ */
+export function getProjectConfigPath(projectPath: string): string {
+  return path.join(projectPath, '.cursor', 'cli.json');
+}
+
+/**
+ * Read the global Cursor CLI config
+ */
+export async function readGlobalConfig(): Promise<CursorCliConfigFile | null> {
+  const configPath = getGlobalConfigPath();
+
+  try {
+    const content = await fs.readFile(configPath, 'utf-8');
+    const config = JSON.parse(content) as CursorCliConfigFile;
+    logger.debug('Read global Cursor config from:', configPath);
+    return config;
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      logger.debug('Global Cursor config not found at:', configPath);
+      return null;
+    }
+    logger.error('Failed to read global Cursor config:', error);
+    throw error;
+  }
+}
+
+/**
+ * Write the global Cursor CLI config
+ */
+export async function writeGlobalConfig(config: CursorCliConfigFile): Promise<void> {
+  const configPath = getGlobalConfigPath();
+  const configDir = path.dirname(configPath);
+
+  // Ensure directory exists
+  await fs.mkdir(configDir, { recursive: true });
+
+  // Write config
+  await fs.writeFile(configPath, JSON.stringify(config, null, 2));
+  logger.info('Wrote global Cursor config to:', configPath);
+}
+
+/**
+ * Read a project's Cursor CLI config
+ */
+export async function readProjectConfig(projectPath: string): Promise<CursorCliConfigFile | null> {
+  const configPath = getProjectConfigPath(projectPath);
+
+  try {
+    const content = await fs.readFile(configPath, 'utf-8');
+    const config = JSON.parse(content) as CursorCliConfigFile;
+    logger.debug('Read project Cursor config from:', configPath);
+    return config;
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      logger.debug('Project Cursor config not found at:', configPath);
+      return null;
+    }
+    logger.error('Failed to read project Cursor config:', error);
+    throw error;
+  }
+}
+
+/**
+ * Write a project's Cursor CLI config
+ *
+ * Note: Project-level config ONLY supports permissions.
+ * The version field and other settings are global-only.
+ * See: https://cursor.com/docs/cli/reference/configuration
+ */
+export async function writeProjectConfig(
+  projectPath: string,
+  config: CursorCliConfigFile
+): Promise<void> {
+  const configPath = getProjectConfigPath(projectPath);
+  const configDir = path.dirname(configPath);
+
+  // Ensure .cursor directory exists
+  await fs.mkdir(configDir, { recursive: true });
+
+  // Write config (project config ONLY supports permissions - no version field!)
+  const projectConfig = {
+    permissions: config.permissions,
+  };
+
+  await fs.writeFile(configPath, JSON.stringify(projectConfig, null, 2));
+  logger.info('Wrote project Cursor config to:', configPath);
+}
+
+/**
+ * Delete a project's Cursor CLI config
+ */
+export async function deleteProjectConfig(projectPath: string): Promise<void> {
+  const configPath = getProjectConfigPath(projectPath);
+
+  try {
+    await fs.unlink(configPath);
+    logger.info('Deleted project Cursor config:', configPath);
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+      throw error;
+    }
+  }
+}
+
+/**
+ * Get the effective permissions for a project
+ * Project config takes precedence over global config
+ */
+export async function getEffectivePermissions(
+  projectPath?: string
+): Promise<CursorCliPermissions | null> {
+  // Try project config first
+  if (projectPath) {
+    const projectConfig = await readProjectConfig(projectPath);
+    if (projectConfig?.permissions) {
+      return projectConfig.permissions;
+    }
+  }
+
+  // Fall back to global config
+  const globalConfig = await readGlobalConfig();
+  return globalConfig?.permissions || null;
+}
+
+/**
+ * Apply a predefined permission profile to a project
+ */
+export async function applyProfileToProject(
+  projectPath: string,
+  profileId: CursorPermissionProfile
+): Promise<void> {
+  const profile = CURSOR_PERMISSION_PROFILES.find((p) => p.id === profileId);
+
+  if (!profile) {
+    throw new Error(`Unknown permission profile: ${profileId}`);
+  }
+
+  await writeProjectConfig(projectPath, {
+    version: 1,
+    permissions: profile.permissions,
+  });
+
+  logger.info(`Applied "${profile.name}" profile to project:`, projectPath);
+}
+
+/**
+ * Apply a predefined permission profile globally
+ */
+export async function applyProfileGlobally(profileId: CursorPermissionProfile): Promise<void> {
+  const profile = CURSOR_PERMISSION_PROFILES.find((p) => p.id === profileId);
+
+  if (!profile) {
+    throw new Error(`Unknown permission profile: ${profileId}`);
+  }
+
+  // Read existing global config to preserve other settings
+  const existingConfig = await readGlobalConfig();
+
+  await writeGlobalConfig({
+    version: 1,
+    ...existingConfig,
+    permissions: profile.permissions,
+  });
+
+  logger.info(`Applied "${profile.name}" profile globally`);
+}
+
+/**
+ * Detect which profile matches the current permissions
+ */
+export function detectProfile(
+  permissions: CursorCliPermissions | null
+): CursorPermissionProfile | null {
+  if (!permissions) {
+    return null;
+  }
+
+  // Check if permissions match a predefined profile
+  for (const profile of CURSOR_PERMISSION_PROFILES) {
+    const allowMatch =
+      JSON.stringify(profile.permissions.allow.sort()) === JSON.stringify(permissions.allow.sort());
+    const denyMatch =
+      JSON.stringify(profile.permissions.deny.sort()) === JSON.stringify(permissions.deny.sort());
+
+    if (allowMatch && denyMatch) {
+      return profile.id;
+    }
+  }
+
+  return 'custom';
+}
+
+/**
+ * Generate example config file content
+ */
+export function generateExampleConfig(profileId: CursorPermissionProfile = 'development'): string {
+  const profile =
+    CURSOR_PERMISSION_PROFILES.find((p) => p.id === profileId) || CURSOR_DEVELOPMENT_PROFILE;
+
+  const config: CursorCliConfigFile = {
+    version: 1,
+    permissions: profile.permissions,
+  };
+
+  return JSON.stringify(config, null, 2);
+}
+
+/**
+ * Check if a project has Cursor CLI config
+ */
+export async function hasProjectConfig(projectPath: string): Promise<boolean> {
+  const configPath = getProjectConfigPath(projectPath);
+
+  try {
+    await fs.access(configPath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Get all available permission profiles
+ */
+export function getAvailableProfiles() {
+  return CURSOR_PERMISSION_PROFILES;
+}
+
+// Export profile constants for convenience
+export { CURSOR_STRICT_PROFILE, CURSOR_DEVELOPMENT_PROFILE };
diff --git a/temp_repo/apps/server/src/services/dev-server-service.ts b/temp_repo/apps/server/src/services/dev-server-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..319e9895f4b2854793131010bbc26523e908d704
--- /dev/null
+++ b/temp_repo/apps/server/src/services/dev-server-service.ts
@@ -0,0 +1,1317 @@
+/**
+ * Dev Server Service
+ *
+ * Manages multiple development server processes for git worktrees.
+ * Each worktree can have its own dev server running on a unique port.
+ *
+ * Developers should configure their projects to use the PORT environment variable.
+ */
+
+import { spawn, execSync, type ChildProcess } from 'child_process';
+import * as secureFs from '../lib/secure-fs.js';
+import path from 'path';
+import net from 'net';
+import { createLogger } from '@automaker/utils';
+import type { EventEmitter } from '../lib/events.js';
+import fs from 'fs/promises';
+import { constants } from 'fs';
+
+const logger = createLogger('DevServerService');
+
+// Maximum scrollback buffer size (characters) - matches TerminalService pattern
+const MAX_SCROLLBACK_SIZE = 50000; // ~50KB per dev server
+
+// Timeout (ms) before falling back to the allocated port if URL detection hasn't succeeded.
+// This handles cases where the dev server output format is not recognized by any pattern.
+const URL_DETECTION_TIMEOUT_MS = 30_000;
+
+// URL patterns for detecting full URLs from dev server output.
+// Defined once at module level to avoid reallocation on every call to detectUrlFromOutput.
+// Ordered from most specific (framework-specific) to least specific.
+const URL_PATTERNS: Array<{ pattern: RegExp; description: string }> = [
+  // Vite / Nuxt / SvelteKit / Astro / Angular CLI format: "Local:  http://..."
+  {
+    pattern: /(?:Local|Network|External):\s+(https?:\/\/[^\s]+)/i,
+    description: 'Vite/Nuxt/SvelteKit/Astro/Angular format',
+  },
+  // Next.js format: "ready - started server on 0.0.0.0:3000, url: http://localhost:3000"
+  // Next.js 14+: "▲ Next.js 14.0.0\n- Local: http://localhost:3000"
+  {
+    pattern: /(?:ready|started server).*?(?:url:\s*)?(https?:\/\/[^\s,]+)/i,
+    description: 'Next.js format',
+  },
+  // Remix format: "started at http://localhost:3000"
+  // Django format: "Starting development server at http://127.0.0.1:8000/"
+  // Rails / Puma: "Listening on http://127.0.0.1:3000"
+  // Generic: "listening at http://...", "available at http://...", "running at http://..."
+  {
+    pattern:
+      /(?:starting|started|listening|running|available|serving|accessible)\s+(?:at|on)\s+(https?:\/\/[^\s,)]+)/i,
+    description: 'Generic "starting/started/listening at" format',
+  },
+  // PHP built-in server: "Development Server (http://localhost:8000) started"
+  {
+    pattern: /(?:server|development server)\s*\(\s*(https?:\/\/[^\s)]+)\s*\)/i,
+    description: 'PHP server format',
+  },
+  // Webpack Dev Server: "Project is running at http://localhost:8080/"
+  {
+    pattern: /(?:project|app|application)\s+(?:is\s+)?running\s+(?:at|on)\s+(https?:\/\/[^\s,]+)/i,
+    description: 'Webpack/generic "running at" format',
+  },
+  // Go / Rust / generic: "Serving on http://...", "Server on http://..."
+  {
+    pattern: /(?:serving|server)\s+(?:on|at)\s+(https?:\/\/[^\s,]+)/i,
+    description: 'Generic "serving on" format',
+  },
+  // Localhost URL with port (conservative - must be localhost/127.0.0.1/[::]/0.0.0.0)
+  // This catches anything that looks like a dev server URL
+  {
+    pattern: /(https?:\/\/(?:localhost|127\.0\.0\.1|\[::\]|0\.0\.0\.0):\d+\S*)/i,
+    description: 'Generic localhost URL with port',
+  },
+];
+
+// Port-only patterns for detecting port numbers from dev server output
+// when a full URL is not present in the output.
+// Defined once at module level to avoid reallocation on every call to detectUrlFromOutput.
+const PORT_PATTERNS: Array<{ pattern: RegExp; description: string }> = [
+  // "listening on port 3000", "server on port 3000", "started on port 3000"
+  {
+    pattern: /(?:listening|running|started|serving|available)\s+on\s+port\s+(\d+)/i,
+    description: '"listening on port" format',
+  },
+  // "Port: 3000", "port 3000" (at start of line or after whitespace)
+  {
+    pattern: /(?:^|\s)port[:\s]+(\d{4,5})(?:\s|$|[.,;])/im,
+    description: '"port:" format',
+  },
+];
+
+// Throttle output to prevent overwhelming WebSocket under heavy load.
+// 100ms (~10fps) is sufficient for readable log streaming while keeping
+// WebSocket traffic manageable. The previous 4ms rate (~250fps) generated
+// up to 250 events/sec which caused progressive browser slowdown from
+// accumulated console logs, JSON serialization overhead, and React re-renders.
+const OUTPUT_THROTTLE_MS = 100; // ~10fps max update rate
+const OUTPUT_BATCH_SIZE = 8192; // Larger batches to compensate for lower frequency
+
+export interface DevServerInfo {
+  worktreePath: string;
+  /** The port originally reserved by findAvailablePort() – never mutated after startDevServer sets it */
+  allocatedPort: number;
+  port: number;
+  url: string;
+  process: ChildProcess | null;
+  startedAt: Date;
+  // Scrollback buffer for log history (replay on reconnect)
+  scrollbackBuffer: string;
+  // Pending output to be flushed to subscribers
+  outputBuffer: string;
+  // Throttle timer for batching output
+  flushTimeout: NodeJS.Timeout | null;
+  // Flag to indicate server is stopping (prevents output after stop)
+  stopping: boolean;
+  // Flag to indicate if URL has been detected from output
+  urlDetected: boolean;
+  // Timer for URL detection timeout fallback
+  urlDetectionTimeout: NodeJS.Timeout | null;
+  // Custom command used to start the server
+  customCommand?: string;
+}
+
+/**
+ * Persistable subset of DevServerInfo for survival across server restarts
+ */
+interface PersistedDevServerInfo {
+  worktreePath: string;
+  allocatedPort: number;
+  port: number;
+  url: string;
+  startedAt: string;
+  urlDetected: boolean;
+  customCommand?: string;
+}
+
+// Port allocation starts at 3001 to avoid conflicts with common dev ports
+const BASE_PORT = 3001;
+const MAX_PORT = 3099; // Safety limit
+
+// Common livereload ports that may need cleanup when stopping dev servers
+const LIVERELOAD_PORTS = [35729, 35730, 35731] as const;
+
+class DevServerService {
+  private runningServers: Map<string, DevServerInfo> = new Map();
+  private startingServers: Set<string> = new Set();
+  private allocatedPorts: Set<number> = new Set();
+  private emitter: EventEmitter | null = null;
+  private dataDir: string | null = null;
+  private saveQueue: Promise<void> = Promise.resolve();
+
+  /**
+   * Initialize the service with data directory for persistence
+   */
+  async initialize(dataDir: string, emitter: EventEmitter): Promise<void> {
+    this.dataDir = dataDir;
+    this.emitter = emitter;
+    await this.loadState();
+  }
+
+  /**
+   * Set the event emitter for streaming log events
+   * Called during service initialization with the global event emitter
+   */
+  setEventEmitter(emitter: EventEmitter): void {
+    this.emitter = emitter;
+  }
+
+  /**
+   * Save the current state of running servers to disk
+   */
+  private async saveState(): Promise<void> {
+    if (!this.dataDir) return;
+
+    // Queue the save operation to prevent concurrent writes
+    this.saveQueue = this.saveQueue
+      .then(async () => {
+        if (!this.dataDir) return;
+        try {
+          const statePath = path.join(this.dataDir, 'dev-servers.json');
+          const persistedInfo: PersistedDevServerInfo[] = Array.from(
+            this.runningServers.values()
+          ).map((s) => ({
+            worktreePath: s.worktreePath,
+            allocatedPort: s.allocatedPort,
+            port: s.port,
+            url: s.url,
+            startedAt: s.startedAt.toISOString(),
+            urlDetected: s.urlDetected,
+            customCommand: s.customCommand,
+          }));
+
+          await fs.writeFile(statePath, JSON.stringify(persistedInfo, null, 2));
+          logger.debug(`Saved dev server state to ${statePath}`);
+        } catch (error) {
+          logger.error('Failed to save dev server state:', error);
+        }
+      })
+      .catch((error) => {
+        logger.error('Error in save queue:', error);
+      });
+
+    return this.saveQueue;
+  }
+
+  /**
+   * Load the state of running servers from disk
+   */
+  private async loadState(): Promise<void> {
+    if (!this.dataDir) return;
+
+    try {
+      const statePath = path.join(this.dataDir, 'dev-servers.json');
+      try {
+        await fs.access(statePath, constants.F_OK);
+      } catch {
+        // File doesn't exist, which is fine
+        return;
+      }
+
+      const content = await fs.readFile(statePath, 'utf-8');
+      const rawParsed: unknown = JSON.parse(content);
+
+      if (!Array.isArray(rawParsed)) {
+        logger.warn('Dev server state file is not an array, skipping load');
+        return;
+      }
+
+      const persistedInfo: PersistedDevServerInfo[] = rawParsed.filter((entry: unknown) => {
+        if (entry === null || typeof entry !== 'object') {
+          logger.warn('Dropping invalid dev server entry (not an object):', entry);
+          return false;
+        }
+        const e = entry as Record<string, unknown>;
+        const valid =
+          typeof e.worktreePath === 'string' &&
+          e.worktreePath.length > 0 &&
+          typeof e.allocatedPort === 'number' &&
+          Number.isInteger(e.allocatedPort) &&
+          e.allocatedPort >= 1 &&
+          e.allocatedPort <= 65535 &&
+          typeof e.port === 'number' &&
+          Number.isInteger(e.port) &&
+          e.port >= 1 &&
+          e.port <= 65535 &&
+          typeof e.url === 'string' &&
+          typeof e.startedAt === 'string' &&
+          typeof e.urlDetected === 'boolean' &&
+          (e.customCommand === undefined || typeof e.customCommand === 'string');
+        if (!valid) {
+          logger.warn('Dropping malformed dev server entry:', e);
+        }
+        return valid;
+      }) as PersistedDevServerInfo[];
+
+      logger.info(`Loading ${persistedInfo.length} dev servers from state`);
+
+      for (const info of persistedInfo) {
+        // Check if the process is still running on the port
+        // Since we can't reliably re-attach to the process for output,
+        // we'll just check if the port is in use.
+        const portInUse = !(await this.isPortAvailable(info.port));
+
+        if (portInUse) {
+          logger.info(`Re-attached to dev server on port ${info.port} for ${info.worktreePath}`);
+          const serverInfo: DevServerInfo = {
+            ...info,
+            startedAt: new Date(info.startedAt),
+            process: null, // Process object is lost, but we know it's running
+            scrollbackBuffer: '',
+            outputBuffer: '',
+            flushTimeout: null,
+            stopping: false,
+            urlDetectionTimeout: null,
+          };
+          this.runningServers.set(info.worktreePath, serverInfo);
+          this.allocatedPorts.add(info.allocatedPort);
+        } else {
+          logger.info(
+            `Dev server on port ${info.port} for ${info.worktreePath} is no longer running`
+          );
+        }
+      }
+
+      // Cleanup stale entries from the file if any
+      if (this.runningServers.size !== persistedInfo.length) {
+        await this.saveState();
+      }
+    } catch (error) {
+      logger.error('Failed to load dev server state:', error);
+    }
+  }
+
+  /**
+   * Prune a stale server entry whose process has exited without cleanup.
+   * Clears any pending timers, removes the port from allocatedPorts, deletes
+   * the entry from runningServers, and emits the "dev-server:stopped" event
+   * so all callers consistently notify the frontend when pruning entries.
+   *
+   * @param worktreePath - The key used in runningServers
+   * @param server - The DevServerInfo entry to prune
+   */
+  private pruneStaleServer(worktreePath: string, server: DevServerInfo): void {
+    if (server.flushTimeout) clearTimeout(server.flushTimeout);
+    if (server.urlDetectionTimeout) clearTimeout(server.urlDetectionTimeout);
+    // Use allocatedPort (immutable) to free the reserved slot; server.port may have
+    // been mutated by detectUrlFromOutput to reflect the actual detected port.
+    this.allocatedPorts.delete(server.allocatedPort);
+    this.runningServers.delete(worktreePath);
+
+    // Persist state change
+    this.saveState().catch((err) => logger.error('Failed to save state in pruneStaleServer:', err));
+
+    if (this.emitter) {
+      this.emitter.emit('dev-server:stopped', {
+        worktreePath,
+        port: server.port, // Report the externally-visible (detected) port
+        exitCode: server.process?.exitCode ?? null,
+        timestamp: new Date().toISOString(),
+      });
+    }
+  }
+
+  /**
+   * Append data to scrollback buffer with size limit enforcement
+   * Evicts oldest data when buffer exceeds MAX_SCROLLBACK_SIZE
+   */
+  private appendToScrollback(server: DevServerInfo, data: string): void {
+    server.scrollbackBuffer += data;
+    if (server.scrollbackBuffer.length > MAX_SCROLLBACK_SIZE) {
+      server.scrollbackBuffer = server.scrollbackBuffer.slice(-MAX_SCROLLBACK_SIZE);
+    }
+  }
+
+  /**
+   * Flush buffered output to WebSocket subscribers
+   * Sends batched output to prevent overwhelming clients under heavy load
+   */
+  private flushOutput(server: DevServerInfo): void {
+    // Skip flush if server is stopping or buffer is empty
+    if (server.stopping || server.outputBuffer.length === 0) {
+      server.flushTimeout = null;
+      return;
+    }
+
+    let dataToSend = server.outputBuffer;
+    if (dataToSend.length > OUTPUT_BATCH_SIZE) {
+      // Send in batches if buffer is large
+      dataToSend = server.outputBuffer.slice(0, OUTPUT_BATCH_SIZE);
+      server.outputBuffer = server.outputBuffer.slice(OUTPUT_BATCH_SIZE);
+      // Schedule another flush for remaining data
+      server.flushTimeout = setTimeout(() => this.flushOutput(server), OUTPUT_THROTTLE_MS);
+    } else {
+      server.outputBuffer = '';
+      server.flushTimeout = null;
+    }
+
+    // Emit output event for WebSocket streaming
+    if (this.emitter) {
+      this.emitter.emit('dev-server:output', {
+        worktreePath: server.worktreePath,
+        content: dataToSend,
+        timestamp: new Date().toISOString(),
+      });
+    }
+  }
+
+  /**
+   * Strip ANSI escape codes from a string
+   * Dev server output often contains color codes that can interfere with URL detection
+   */
+  private stripAnsi(str: string): string {
+    // Matches ANSI escape sequences: CSI sequences, OSC sequences, and simple escapes
+    // eslint-disable-next-line no-control-regex
+    return str.replace(/\x1B(?:\[[0-9;]*[a-zA-Z]|\].*?(?:\x07|\x1B\\)|\[[?]?[0-9;]*[hl])/g, '');
+  }
+
+  /**
+   * Extract port number from a URL string.
+   * Returns the explicit port if present, or null if no port is specified.
+   * Default protocol ports (80/443) are intentionally NOT returned to avoid
+   * overwriting allocated dev server ports with protocol defaults.
+   */
+  private extractPortFromUrl(url: string): number | null {
+    try {
+      const parsed = new URL(url);
+      if (parsed.port) {
+        return parseInt(parsed.port, 10);
+      }
+      return null;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Detect actual server URL from output
+   * Parses stdout/stderr for common URL patterns from dev servers.
+   *
+   * Supports detection of URLs from:
+   * - Vite: "Local:   http://localhost:5173/"
+   * - Next.js: "ready - started server on 0.0.0.0:3000, url: http://localhost:3000"
+   * - Nuxt: "Local:    http://localhost:3000/"
+   * - Remix: "started at http://localhost:3000"
+   * - Astro: "Local    http://localhost:4321/"
+   * - SvelteKit: "Local:   http://localhost:5173/"
+   * - CRA/Webpack: "On Your Network: http://192.168.1.1:3000"
+   * - Angular: "Local:   http://localhost:4200/"
+   * - Express/Fastify/Koa: "Server listening on port 3000"
+   * - Django: "Starting development server at http://127.0.0.1:8000/"
+   * - Rails: "Listening on http://127.0.0.1:3000"
+   * - PHP: "Development Server (http://localhost:8000) started"
+   * - Generic: Any localhost URL with a port
+   */
+  private async detectUrlFromOutput(server: DevServerInfo, content: string): Promise<void> {
+    // Skip if URL already detected
+    if (server.urlDetected) {
+      return;
+    }
+
+    // Strip ANSI escape codes to prevent color codes from breaking regex matching
+    const cleanContent = this.stripAnsi(content);
+
+    // Phase 1: Try to detect a full URL from output
+    // Patterns are defined at module level (URL_PATTERNS) and reused across calls
+    for (const { pattern, description } of URL_PATTERNS) {
+      const match = cleanContent.match(pattern);
+      if (match && match[1]) {
+        let detectedUrl = match[1].trim();
+        // Remove trailing punctuation that might have been captured
+        detectedUrl = detectedUrl.replace(/[.,;:!?)\]}>]+$/, '');
+
+        if (detectedUrl.startsWith('http://') || detectedUrl.startsWith('https://')) {
+          // Normalize 0.0.0.0 to localhost for browser accessibility
+          detectedUrl = detectedUrl.replace(
+            /\/\/0\.0\.0\.0(:\d+)?/,
+            (_, port) => `//localhost${port || ''}`
+          );
+          // Normalize [::] to localhost for browser accessibility
+          detectedUrl = detectedUrl.replace(
+            /\/\/\[::\](:\d+)?/,
+            (_, port) => `//localhost${port || ''}`
+          );
+          // Normalize [::1] (IPv6 loopback) to localhost for browser accessibility
+          detectedUrl = detectedUrl.replace(
+            /\/\/\[::1\](:\d+)?/,
+            (_, port) => `//localhost${port || ''}`
+          );
+
+          server.url = detectedUrl;
+          server.urlDetected = true;
+
+          // Clear the URL detection timeout since we found the URL
+          if (server.urlDetectionTimeout) {
+            clearTimeout(server.urlDetectionTimeout);
+            server.urlDetectionTimeout = null;
+          }
+
+          // Update the port to match the detected URL's actual port
+          const detectedPort = this.extractPortFromUrl(detectedUrl);
+          if (detectedPort && detectedPort !== server.port) {
+            logger.info(
+              `Port mismatch: allocated ${server.port}, detected ${detectedPort} from ${description}`
+            );
+            server.port = detectedPort;
+          }
+
+          logger.info(`Detected server URL via ${description}: ${detectedUrl}`);
+
+          // Persist state change
+          await this.saveState().catch((err) =>
+            logger.error('Failed to save state in detectUrlFromOutput:', err)
+          );
+
+          // Emit URL update event
+          if (this.emitter) {
+            this.emitter.emit('dev-server:url-detected', {
+              worktreePath: server.worktreePath,
+              url: detectedUrl,
+              port: server.port,
+              timestamp: new Date().toISOString(),
+            });
+          }
+          return;
+        }
+      }
+    }
+
+    // Phase 2: Try to detect just a port number from output (no full URL)
+    // Some servers only print "listening on port 3000" without a full URL
+    // Patterns are defined at module level (PORT_PATTERNS) and reused across calls
+    for (const { pattern, description } of PORT_PATTERNS) {
+      const match = cleanContent.match(pattern);
+      if (match && match[1]) {
+        const detectedPort = parseInt(match[1], 10);
+        // Sanity check: port should be in a reasonable range
+        if (detectedPort > 0 && detectedPort <= 65535) {
+          const detectedUrl = `http://localhost:${detectedPort}`;
+          server.url = detectedUrl;
+          server.urlDetected = true;
+
+          // Clear the URL detection timeout since we found the port
+          if (server.urlDetectionTimeout) {
+            clearTimeout(server.urlDetectionTimeout);
+            server.urlDetectionTimeout = null;
+          }
+
+          if (detectedPort !== server.port) {
+            logger.info(
+              `Port mismatch: allocated ${server.port}, detected ${detectedPort} from ${description}`
+            );
+            server.port = detectedPort;
+          }
+
+          logger.info(`Detected server port via ${description}: ${detectedPort} → ${detectedUrl}`);
+
+          // Persist state change
+          await this.saveState().catch((err) =>
+            logger.error('Failed to save state in detectUrlFromOutput Phase 2:', err)
+          );
+
+          // Emit URL update event
+          if (this.emitter) {
+            this.emitter.emit('dev-server:url-detected', {
+              worktreePath: server.worktreePath,
+              url: detectedUrl,
+              port: server.port,
+              timestamp: new Date().toISOString(),
+            });
+          }
+          return;
+        }
+      }
+    }
+  }
+
+  /**
+   * Handle incoming stdout/stderr data from dev server process
+   * Buffers data for scrollback replay and schedules throttled emission
+   */
+  private async handleProcessOutput(server: DevServerInfo, data: Buffer): Promise<void> {
+    // Skip output if server is stopping
+    if (server.stopping) {
+      return;
+    }
+
+    const content = data.toString();
+
+    // Try to detect actual server URL from output
+    await this.detectUrlFromOutput(server, content);
+
+    // Append to scrollback buffer for replay on reconnect
+    this.appendToScrollback(server, content);
+
+    // Buffer output for throttled live delivery
+    server.outputBuffer += content;
+
+    // Schedule flush if not already scheduled
+    if (!server.flushTimeout) {
+      server.flushTimeout = setTimeout(() => this.flushOutput(server), OUTPUT_THROTTLE_MS);
+    }
+
+    // Also log for debugging (existing behavior)
+    logger.debug(`[Port${server.port}] ${content.trim()}`);
+  }
+
+  /**
+   * Check if a port is available (not in use by system or by us)
+   */
+  private async isPortAvailable(port: number): Promise<boolean> {
+    // First check if we've already allocated it
+    if (this.allocatedPorts.has(port)) {
+      return false;
+    }
+
+    // Then check if the system has it in use
+    return new Promise((resolve) => {
+      const server = net.createServer();
+      server.once('error', () => resolve(false));
+      server.once('listening', () => {
+        server.close();
+        resolve(true);
+      });
+      server.listen(port, '127.0.0.1');
+    });
+  }
+
+  /**
+   * Kill any process running on the given port
+   */
+  private killProcessOnPort(port: number): void {
+    try {
+      if (process.platform === 'win32') {
+        // Windows: find and kill process on port
+        const result = execSync(`netstat -ano | findstr :${port}`, { encoding: 'utf-8' });
+        const lines = result.trim().split('\n');
+        const pids = new Set<string>();
+        for (const line of lines) {
+          const parts = line.trim().split(/\s+/);
+          const pid = parts[parts.length - 1];
+          if (pid && pid !== '0') {
+            pids.add(pid);
+          }
+        }
+        for (const pid of pids) {
+          try {
+            execSync(`taskkill /F /PID ${pid}`, { stdio: 'ignore' });
+            logger.debug(`Killed process ${pid} on port ${port}`);
+          } catch {
+            // Process may have already exited
+          }
+        }
+      } else {
+        // macOS/Linux: use lsof to find and kill process
+        try {
+          const result = execSync(`lsof -ti:${port}`, { encoding: 'utf-8' });
+          const pids = result.trim().split('\n').filter(Boolean);
+          for (const pid of pids) {
+            try {
+              execSync(`kill -9 ${pid}`, { stdio: 'ignore' });
+              logger.debug(`Killed process ${pid} on port ${port}`);
+            } catch {
+              // Process may have already exited
+            }
+          }
+        } catch {
+          // No process found on port, which is fine
+        }
+      }
+    } catch {
+      // Ignore errors - port might not have any process
+      logger.debug(`No process to kill on port ${port}`);
+    }
+  }
+
+  /**
+   * Find the next available port, killing any process on it first
+   */
+  private async findAvailablePort(): Promise<number> {
+    let port = BASE_PORT;
+
+    while (port <= MAX_PORT) {
+      // Skip ports we've already allocated internally
+      if (this.allocatedPorts.has(port)) {
+        port++;
+        continue;
+      }
+
+      // Force kill any process on this port before checking availability
+      // This ensures we can claim the port even if something stale is holding it
+      this.killProcessOnPort(port);
+
+      // Small delay to let the port be released
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Now check if it's available
+      if (await this.isPortAvailable(port)) {
+        return port;
+      }
+      port++;
+    }
+
+    throw new Error(`No available ports found between ${BASE_PORT} and ${MAX_PORT}`);
+  }
+
+  /**
+   * Helper to check if a file exists using secureFs
+   */
+  private async fileExists(filePath: string): Promise<boolean> {
+    try {
+      await secureFs.access(filePath);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Detect the package manager used in a directory
+   */
+  private async detectPackageManager(dir: string): Promise<'npm' | 'yarn' | 'pnpm' | 'bun' | null> {
+    if (await this.fileExists(path.join(dir, 'bun.lockb'))) return 'bun';
+    if (await this.fileExists(path.join(dir, 'pnpm-lock.yaml'))) return 'pnpm';
+    if (await this.fileExists(path.join(dir, 'yarn.lock'))) return 'yarn';
+    if (await this.fileExists(path.join(dir, 'package-lock.json'))) return 'npm';
+    if (await this.fileExists(path.join(dir, 'package.json'))) return 'npm'; // Default
+    return null;
+  }
+
+  /**
+   * Get the dev script command for a directory
+   */
+  private async getDevCommand(dir: string): Promise<{ cmd: string; args: string[] } | null> {
+    const pm = await this.detectPackageManager(dir);
+    if (!pm) return null;
+
+    switch (pm) {
+      case 'bun':
+        return { cmd: 'bun', args: ['run', 'dev'] };
+      case 'pnpm':
+        return { cmd: 'pnpm', args: ['run', 'dev'] };
+      case 'yarn':
+        return { cmd: 'yarn', args: ['dev'] };
+      case 'npm':
+      default:
+        return { cmd: 'npm', args: ['run', 'dev'] };
+    }
+  }
+
+  /**
+   * Parse a custom command string into cmd and args
+   * Handles quoted strings with spaces (e.g., "my command" arg1 arg2)
+   */
+  private parseCustomCommand(command: string): { cmd: string; args: string[] } {
+    const tokens: string[] = [];
+    let current = '';
+    let inQuote = false;
+    let quoteChar = '';
+
+    for (let i = 0; i < command.length; i++) {
+      const char = command[i];
+
+      if (inQuote) {
+        if (char === quoteChar) {
+          inQuote = false;
+        } else {
+          current += char;
+        }
+      } else if (char === '"' || char === "'") {
+        inQuote = true;
+        quoteChar = char;
+      } else if (char === ' ') {
+        if (current) {
+          tokens.push(current);
+          current = '';
+        }
+      } else {
+        current += char;
+      }
+    }
+
+    if (current) {
+      tokens.push(current);
+    }
+
+    const [cmd, ...args] = tokens;
+    return { cmd: cmd || '', args };
+  }
+
+  /**
+   * Start a dev server for a worktree
+   * @param projectPath - The project root path
+   * @param worktreePath - The worktree directory path
+   * @param customCommand - Optional custom command to run instead of auto-detected dev command
+   */
+  async startDevServer(
+    projectPath: string,
+    worktreePath: string,
+    customCommand?: string
+  ): Promise<{
+    success: boolean;
+    result?: {
+      worktreePath: string;
+      port: number;
+      url: string;
+      message: string;
+    };
+    error?: string;
+  }> {
+    // Check if already running or starting
+    if (this.runningServers.has(worktreePath) || this.startingServers.has(worktreePath)) {
+      const existing = this.runningServers.get(worktreePath);
+      if (existing) {
+        return {
+          success: true,
+          result: {
+            worktreePath: existing.worktreePath,
+            port: existing.port,
+            url: existing.url,
+            message: `Dev server already running on port ${existing.port}`,
+          },
+        };
+      }
+      return {
+        success: false,
+        error: 'Dev server is already starting',
+      };
+    }
+
+    this.startingServers.add(worktreePath);
+
+    try {
+      // Verify the worktree exists
+      if (!(await this.fileExists(worktreePath))) {
+        return {
+          success: false,
+          error: `Worktree path does not exist: ${worktreePath}`,
+        };
+      }
+
+      // Determine the dev command to use
+      let devCommand: { cmd: string; args: string[] };
+
+      // Normalize custom command: trim whitespace and treat empty strings as undefined
+      const normalizedCustomCommand = customCommand?.trim();
+
+      if (normalizedCustomCommand) {
+        // Use the provided custom command
+        devCommand = this.parseCustomCommand(normalizedCustomCommand);
+        if (!devCommand.cmd) {
+          return {
+            success: false,
+            error: 'Invalid custom command: command cannot be empty',
+          };
+        }
+        logger.debug(`Using custom command: ${normalizedCustomCommand}`);
+      } else {
+        // Check for package.json when auto-detecting
+        const packageJsonPath = path.join(worktreePath, 'package.json');
+        if (!(await this.fileExists(packageJsonPath))) {
+          return {
+            success: false,
+            error: `No package.json found in: ${worktreePath}`,
+          };
+        }
+
+        // Get dev command from package manager detection
+        const detectedCommand = await this.getDevCommand(worktreePath);
+        if (!detectedCommand) {
+          return {
+            success: false,
+            error: `Could not determine dev command for: ${worktreePath}`,
+          };
+        }
+        devCommand = detectedCommand;
+      }
+
+      // Find available port
+      let port: number;
+      try {
+        port = await this.findAvailablePort();
+      } catch (error) {
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : 'Port allocation failed',
+        };
+      }
+
+      // Reserve the port (port was already force-killed in findAvailablePort)
+      this.allocatedPorts.add(port);
+
+      // Also kill common related ports (livereload, etc.)
+      // Some dev servers use fixed ports for HMR/livereload regardless of main port
+      for (const relatedPort of LIVERELOAD_PORTS) {
+        this.killProcessOnPort(relatedPort);
+      }
+
+      // Small delay to ensure related ports are freed
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      logger.info(`Starting dev server on port ${port}`);
+      logger.debug(`Working directory (cwd): ${worktreePath}`);
+      logger.debug(`Command: ${devCommand.cmd} ${devCommand.args.join(' ')} with PORT=${port}`);
+
+      // Emit starting only after preflight checks pass to avoid dangling starting state.
+      if (this.emitter) {
+        this.emitter.emit('dev-server:starting', {
+          worktreePath,
+          timestamp: new Date().toISOString(),
+        });
+      }
+
+      // Spawn the dev process with PORT environment variable
+      // FORCE_COLOR enables colored output even when not running in a TTY
+      const env = {
+        ...process.env,
+        PORT: String(port),
+        FORCE_COLOR: '1',
+        // Some tools use these additional env vars for color detection
+        COLORTERM: 'truecolor',
+        TERM: 'xterm-256color',
+      };
+
+      const devProcess = spawn(devCommand.cmd, devCommand.args, {
+        cwd: worktreePath,
+        env,
+        stdio: ['ignore', 'pipe', 'pipe'],
+        detached: false,
+      });
+
+      // Track if process failed early using object to work around TypeScript narrowing
+      const status = { error: null as string | null, exited: false };
+
+      // Create server info early so we can reference it in handlers
+      // We'll add it to runningServers after verifying the process started successfully
+      const fallbackHost = 'localhost';
+      const serverInfo: DevServerInfo = {
+        worktreePath,
+        allocatedPort: port, // Immutable: records which port we reserved; never changed after this point
+        port,
+        url: `http://${fallbackHost}:${port}`, // Initial URL, may be updated by detectUrlFromOutput
+        process: devProcess,
+        startedAt: new Date(),
+        scrollbackBuffer: '',
+        outputBuffer: '',
+        flushTimeout: null,
+        stopping: false,
+        urlDetected: false, // Will be set to true when actual URL is detected from output
+        urlDetectionTimeout: null, // Will be set after server starts successfully
+        customCommand: normalizedCustomCommand,
+      };
+
+      // Capture stdout with buffer management and event emission
+      if (devProcess.stdout) {
+        devProcess.stdout.on('data', (data: Buffer) => {
+          this.handleProcessOutput(serverInfo, data).catch((error: unknown) => {
+            logger.error('Failed to handle dev server stdout output:', error);
+          });
+        });
+      }
+
+      // Capture stderr with buffer management and event emission
+      if (devProcess.stderr) {
+        devProcess.stderr.on('data', (data: Buffer) => {
+          this.handleProcessOutput(serverInfo, data).catch((error: unknown) => {
+            logger.error('Failed to handle dev server stderr output:', error);
+          });
+        });
+      }
+
+      // Helper to clean up resources and emit stop event
+      const cleanupAndEmitStop = (exitCode: number | null, errorMessage?: string) => {
+        if (serverInfo.flushTimeout) {
+          clearTimeout(serverInfo.flushTimeout);
+          serverInfo.flushTimeout = null;
+        }
+
+        // Clear URL detection timeout to prevent stale fallback emission
+        if (serverInfo.urlDetectionTimeout) {
+          clearTimeout(serverInfo.urlDetectionTimeout);
+          serverInfo.urlDetectionTimeout = null;
+        }
+
+        // Emit stopped event (only if not already stopping - prevents duplicate events)
+        if (this.emitter && !serverInfo.stopping) {
+          this.emitter.emit('dev-server:stopped', {
+            worktreePath,
+            port: serverInfo.port, // Use the detected port (may differ from allocated port if detectUrlFromOutput updated it)
+            exitCode,
+            error: errorMessage,
+            timestamp: new Date().toISOString(),
+          });
+        }
+
+        this.allocatedPorts.delete(serverInfo.allocatedPort);
+        this.runningServers.delete(worktreePath);
+
+        // Persist state change
+        this.saveState().catch((err) => logger.error('Failed to save state in cleanup:', err));
+      };
+
+      devProcess.on('error', (error) => {
+        logger.error(`Process error:`, error);
+        status.error = error.message;
+        cleanupAndEmitStop(null, error.message);
+      });
+
+      devProcess.on('exit', (code) => {
+        logger.info(`Process for ${worktreePath} exited with code ${code}`);
+        status.exited = true;
+        cleanupAndEmitStop(code);
+      });
+
+      // Wait a moment to see if the process fails immediately
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      if (status.error) {
+        return {
+          success: false,
+          error: `Failed to start dev server: ${status.error}`,
+        };
+      }
+
+      if (status.exited) {
+        return {
+          success: false,
+          error: `Dev server process exited immediately. Check server logs for details.`,
+        };
+      }
+
+      // Server started successfully - add to running servers map
+      this.runningServers.set(worktreePath, serverInfo);
+
+      // Persist state change
+      await this.saveState().catch((err) =>
+        logger.error('Failed to save state in startDevServer:', err)
+      );
+
+      // Emit started event for WebSocket subscribers
+      if (this.emitter) {
+        this.emitter.emit('dev-server:started', {
+          worktreePath,
+          port,
+          url: serverInfo.url,
+          timestamp: new Date().toISOString(),
+        });
+      }
+
+      // Set up URL detection timeout fallback.
+      // If URL detection hasn't succeeded after URL_DETECTION_TIMEOUT_MS, check if
+      // the allocated port is actually in use (server probably started successfully)
+      // and emit a url-detected event with the allocated port as fallback.
+      // Also re-scan the scrollback buffer in case the URL was printed before
+      // our patterns could match (e.g., it was split across multiple data chunks).
+      serverInfo.urlDetectionTimeout = setTimeout(async () => {
+        serverInfo.urlDetectionTimeout = null;
+
+        // Only run fallback if server is still running and URL wasn't detected
+        if (
+          serverInfo.stopping ||
+          serverInfo.urlDetected ||
+          !this.runningServers.has(worktreePath)
+        ) {
+          return;
+        }
+
+        // Re-scan the entire scrollback buffer for URL patterns
+        // This catches cases where the URL was split across multiple output chunks
+        logger.info(`URL detection timeout for ${worktreePath}, re-scanning scrollback buffer`);
+        await this.detectUrlFromOutput(serverInfo, serverInfo.scrollbackBuffer).catch((err) =>
+          logger.error('Failed to re-scan scrollback buffer:', err)
+        );
+
+        // If still not detected after full rescan, use the allocated port as fallback
+        if (!serverInfo.urlDetected) {
+          logger.info(`URL detection fallback: using allocated port ${port} for ${worktreePath}`);
+          const fallbackUrl = `http://${fallbackHost}:${port}`;
+          serverInfo.url = fallbackUrl;
+          serverInfo.urlDetected = true;
+
+          // Persist state change
+          await this.saveState().catch((err) =>
+            logger.error('Failed to save state in URL detection fallback:', err)
+          );
+
+          if (this.emitter) {
+            this.emitter.emit('dev-server:url-detected', {
+              worktreePath: serverInfo.worktreePath,
+              url: fallbackUrl,
+              port,
+              timestamp: new Date().toISOString(),
+            });
+          }
+        }
+      }, URL_DETECTION_TIMEOUT_MS);
+
+      return {
+        success: true,
+        result: {
+          worktreePath: serverInfo.worktreePath,
+          port: serverInfo.port,
+          url: serverInfo.url,
+          message: `Dev server started on port ${port}`,
+        },
+      };
+    } finally {
+      this.startingServers.delete(worktreePath);
+    }
+  }
+
+  /**
+   * Stop a dev server for a worktree
+   */
+  async stopDevServer(worktreePath: string): Promise<{
+    success: boolean;
+    result?: { worktreePath: string; message: string };
+    error?: string;
+  }> {
+    const server = this.runningServers.get(worktreePath);
+
+    // If we don't have a record of this server, it may have crashed/exited on its own
+    // Return success so the frontend can clear its state
+    if (!server) {
+      logger.debug(`No server record for ${worktreePath}, may have already stopped`);
+      return {
+        success: true,
+        result: {
+          worktreePath,
+          message: `Dev server already stopped`,
+        },
+      };
+    }
+
+    logger.info(`Stopping dev server for ${worktreePath}`);
+
+    // Mark as stopping to prevent further output events
+    server.stopping = true;
+
+    // Clean up flush timeout to prevent memory leaks
+    if (server.flushTimeout) {
+      clearTimeout(server.flushTimeout);
+      server.flushTimeout = null;
+    }
+
+    // Clean up URL detection timeout
+    if (server.urlDetectionTimeout) {
+      clearTimeout(server.urlDetectionTimeout);
+      server.urlDetectionTimeout = null;
+    }
+
+    // Clear any pending output buffer
+    server.outputBuffer = '';
+
+    // Emit stopped event immediately so UI updates right away
+    if (this.emitter) {
+      this.emitter.emit('dev-server:stopped', {
+        worktreePath,
+        port: server.port,
+        exitCode: null, // Will be populated by exit handler if process exits normally
+        timestamp: new Date().toISOString(),
+      });
+    }
+
+    // Kill the process; persisted/re-attached entries may not have a process handle.
+    if (server.process && !server.process.killed) {
+      server.process.kill('SIGTERM');
+    } else {
+      this.killProcessOnPort(server.port);
+    }
+
+    // Free the originally-reserved port slot (allocatedPort is immutable and always
+    // matches what was added to allocatedPorts in startDevServer; server.port may
+    // have been updated by detectUrlFromOutput to the actual detected port).
+    this.allocatedPorts.delete(server.allocatedPort);
+    this.runningServers.delete(worktreePath);
+
+    // Persist state change
+    await this.saveState().catch((err) =>
+      logger.error('Failed to save state in stopDevServer:', err)
+    );
+
+    return {
+      success: true,
+      result: {
+        worktreePath,
+        message: `Stopped dev server on port ${server.port}`,
+      },
+    };
+  }
+
+  /**
+   * List all running dev servers
+   * Also verifies that each server's process is still alive, removing stale entries
+   */
+  listDevServers(): {
+    success: boolean;
+    result: {
+      servers: Array<{
+        worktreePath: string;
+        port: number;
+        url: string;
+        urlDetected: boolean;
+        startedAt: string;
+      }>;
+    };
+  } {
+    // Prune any servers whose process has died without us being notified
+    // This handles edge cases where the process exited but the 'exit' event was missed
+    const stalePaths: string[] = [];
+    for (const [worktreePath, server] of this.runningServers) {
+      // Check if exitCode is a number (not null/undefined) - indicates process has exited
+      if (server.process && typeof server.process.exitCode === 'number') {
+        logger.info(
+          `Pruning stale server entry for ${worktreePath} (process exited with code ${server.process.exitCode})`
+        );
+        stalePaths.push(worktreePath);
+      }
+    }
+    for (const stalePath of stalePaths) {
+      const server = this.runningServers.get(stalePath);
+      if (server) {
+        // Delegate to the shared helper so timers, ports, and the stopped event
+        // are all handled consistently with isRunning and getServerInfo.
+        this.pruneStaleServer(stalePath, server);
+      }
+    }
+
+    const servers = Array.from(this.runningServers.values()).map((s) => ({
+      worktreePath: s.worktreePath,
+      port: s.port,
+      url: s.url,
+      urlDetected: s.urlDetected,
+      startedAt: s.startedAt.toISOString(),
+    }));
+
+    return {
+      success: true,
+      result: { servers },
+    };
+  }
+
+  /**
+   * Check if a worktree has a running dev server.
+   * Also prunes stale entries where the process has exited.
+   */
+  isRunning(worktreePath: string): boolean {
+    const server = this.runningServers.get(worktreePath);
+    if (!server) return false;
+    // Prune stale entry if the process has exited
+    if (server.process && typeof server.process.exitCode === 'number') {
+      this.pruneStaleServer(worktreePath, server);
+      return false;
+    }
+    return true;
+  }
+
+  /**
+   * Get info for a specific worktree's dev server.
+   * Also prunes stale entries where the process has exited.
+   */
+  getServerInfo(worktreePath: string): DevServerInfo | undefined {
+    const server = this.runningServers.get(worktreePath);
+    if (!server) return undefined;
+    // Prune stale entry if the process has exited
+    if (server.process && typeof server.process.exitCode === 'number') {
+      this.pruneStaleServer(worktreePath, server);
+      return undefined;
+    }
+    return server;
+  }
+
+  /**
+   * Get buffered logs for a worktree's dev server
+   * Returns the scrollback buffer containing historical log output
+   * Used by the API to serve logs to clients on initial connection
+   */
+  getServerLogs(worktreePath: string): {
+    success: boolean;
+    result?: {
+      worktreePath: string;
+      port: number;
+      url: string;
+      logs: string;
+      startedAt: string;
+    };
+    error?: string;
+  } {
+    const server = this.runningServers.get(worktreePath);
+
+    if (!server) {
+      return {
+        success: false,
+        error: `No dev server running for worktree: ${worktreePath}`,
+      };
+    }
+
+    // Prune stale entry if the process has been killed or has exited
+    if (server.process && (server.process.killed || server.process.exitCode != null)) {
+      this.pruneStaleServer(worktreePath, server);
+      return {
+        success: false,
+        error: `No dev server running for worktree: ${worktreePath}`,
+      };
+    }
+
+    return {
+      success: true,
+      result: {
+        worktreePath: server.worktreePath,
+        port: server.port,
+        url: server.url,
+        logs: server.scrollbackBuffer,
+        startedAt: server.startedAt.toISOString(),
+      },
+    };
+  }
+
+  /**
+   * Get all allocated ports
+   */
+  getAllocatedPorts(): number[] {
+    return Array.from(this.allocatedPorts);
+  }
+
+  /**
+   * Stop all running dev servers (for cleanup)
+   */
+  async stopAll(): Promise<void> {
+    logger.info(`Stopping all ${this.runningServers.size} dev servers`);
+
+    for (const [worktreePath] of this.runningServers) {
+      await this.stopDevServer(worktreePath);
+    }
+  }
+}
+
+// Singleton instance
+let devServerServiceInstance: DevServerService | null = null;
+
+export function getDevServerService(): DevServerService {
+  if (!devServerServiceInstance) {
+    devServerServiceInstance = new DevServerService();
+  }
+  return devServerServiceInstance;
+}
+
+// Cleanup on process exit
+process.on('SIGTERM', async () => {
+  if (devServerServiceInstance) {
+    await devServerServiceInstance.stopAll();
+  }
+});
+
+process.on('SIGINT', async () => {
+  if (devServerServiceInstance) {
+    await devServerServiceInstance.stopAll();
+  }
+});
diff --git a/temp_repo/apps/server/src/services/event-history-service.ts b/temp_repo/apps/server/src/services/event-history-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a7091725139abcb0edb111235947c4152c54f0c5
--- /dev/null
+++ b/temp_repo/apps/server/src/services/event-history-service.ts
@@ -0,0 +1,333 @@
+/**
+ * Event History Service - Stores and retrieves event records for debugging and replay
+ *
+ * Provides persistent storage for events in {projectPath}/.automaker/events/
+ * Each event is stored as a separate JSON file with an index for quick listing.
+ *
+ * Features:
+ * - Store events when they occur
+ * - List and filter historical events
+ * - Replay events to test hook configurations
+ * - Delete old events to manage disk space
+ */
+
+import { createLogger } from '@automaker/utils';
+import * as secureFs from '../lib/secure-fs.js';
+import { getEventHistoryIndexPath, getEventPath, ensureEventHistoryDir } from '@automaker/platform';
+import type {
+  StoredEvent,
+  StoredEventIndex,
+  StoredEventSummary,
+  EventHistoryFilter,
+  EventHookTrigger,
+} from '@automaker/types';
+import { DEFAULT_EVENT_HISTORY_INDEX } from '@automaker/types';
+import { randomUUID } from 'crypto';
+
+const logger = createLogger('EventHistoryService');
+
+/** Maximum events to keep in the index (oldest are pruned) */
+const MAX_EVENTS_IN_INDEX = 1000;
+
+/**
+ * Atomic file write - write to temp file then rename
+ */
+async function atomicWriteJson(filePath: string, data: unknown): Promise<void> {
+  const tempPath = `${filePath}.tmp.${Date.now()}`;
+  const content = JSON.stringify(data, null, 2);
+
+  try {
+    await secureFs.writeFile(tempPath, content, 'utf-8');
+    await secureFs.rename(tempPath, filePath);
+  } catch (error) {
+    try {
+      await secureFs.unlink(tempPath);
+    } catch {
+      // Ignore cleanup errors
+    }
+    throw error;
+  }
+}
+
+/**
+ * Safely read JSON file with fallback to default
+ */
+async function readJsonFile<T>(filePath: string, defaultValue: T): Promise<T> {
+  try {
+    const content = (await secureFs.readFile(filePath, 'utf-8')) as string;
+    return JSON.parse(content) as T;
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      return defaultValue;
+    }
+    logger.error(`Error reading ${filePath}:`, error);
+    return defaultValue;
+  }
+}
+
+/**
+ * Input for storing a new event
+ */
+export interface StoreEventInput {
+  trigger: EventHookTrigger;
+  projectPath: string;
+  featureId?: string;
+  featureName?: string;
+  error?: string;
+  errorType?: string;
+  passes?: boolean;
+  metadata?: Record<string, unknown>;
+}
+
+/**
+ * EventHistoryService - Manages persistent storage of events
+ */
+export class EventHistoryService {
+  /**
+   * Store a new event to history
+   *
+   * @param input - Event data to store
+   * @returns Promise resolving to the stored event
+   */
+  async storeEvent(input: StoreEventInput): Promise<StoredEvent> {
+    const { projectPath, trigger, featureId, featureName, error, errorType, passes, metadata } =
+      input;
+
+    // Ensure events directory exists
+    await ensureEventHistoryDir(projectPath);
+
+    const eventId = `evt-${Date.now()}-${randomUUID().slice(0, 8)}`;
+    const timestamp = new Date().toISOString();
+    const projectName = this.extractProjectName(projectPath);
+
+    const event: StoredEvent = {
+      id: eventId,
+      trigger,
+      timestamp,
+      projectPath,
+      projectName,
+      featureId,
+      featureName,
+      error,
+      errorType,
+      passes,
+      metadata,
+    };
+
+    // Write the full event to its own file
+    const eventPath = getEventPath(projectPath, eventId);
+    await atomicWriteJson(eventPath, event);
+
+    // Update the index
+    await this.addToIndex(projectPath, event);
+
+    logger.info(`Stored event ${eventId} (${trigger}) for project ${projectName}`);
+
+    return event;
+  }
+
+  /**
+   * Get all events for a project with optional filtering
+   *
+   * @param projectPath - Absolute path to project directory
+   * @param filter - Optional filter criteria
+   * @returns Promise resolving to array of event summaries
+   */
+  async getEvents(projectPath: string, filter?: EventHistoryFilter): Promise<StoredEventSummary[]> {
+    const indexPath = getEventHistoryIndexPath(projectPath);
+    const index = await readJsonFile<StoredEventIndex>(indexPath, DEFAULT_EVENT_HISTORY_INDEX);
+
+    let events = [...index.events];
+
+    // Apply filters
+    if (filter) {
+      if (filter.trigger) {
+        events = events.filter((e) => e.trigger === filter.trigger);
+      }
+      if (filter.featureId) {
+        events = events.filter((e) => e.featureId === filter.featureId);
+      }
+      if (filter.since) {
+        const sinceDate = new Date(filter.since).getTime();
+        events = events.filter((e) => new Date(e.timestamp).getTime() >= sinceDate);
+      }
+      if (filter.until) {
+        const untilDate = new Date(filter.until).getTime();
+        events = events.filter((e) => new Date(e.timestamp).getTime() <= untilDate);
+      }
+    }
+
+    // Sort by timestamp (newest first)
+    events.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+
+    // Apply pagination
+    if (filter?.offset) {
+      events = events.slice(filter.offset);
+    }
+    if (filter?.limit) {
+      events = events.slice(0, filter.limit);
+    }
+
+    return events;
+  }
+
+  /**
+   * Get a single event by ID
+   *
+   * @param projectPath - Absolute path to project directory
+   * @param eventId - Event identifier
+   * @returns Promise resolving to the full event or null if not found
+   */
+  async getEvent(projectPath: string, eventId: string): Promise<StoredEvent | null> {
+    const eventPath = getEventPath(projectPath, eventId);
+    try {
+      const content = (await secureFs.readFile(eventPath, 'utf-8')) as string;
+      return JSON.parse(content) as StoredEvent;
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+        return null;
+      }
+      logger.error(`Error reading event ${eventId}:`, error);
+      return null;
+    }
+  }
+
+  /**
+   * Delete an event by ID
+   *
+   * @param projectPath - Absolute path to project directory
+   * @param eventId - Event identifier
+   * @returns Promise resolving to true if deleted
+   */
+  async deleteEvent(projectPath: string, eventId: string): Promise<boolean> {
+    // Remove from index
+    const indexPath = getEventHistoryIndexPath(projectPath);
+    const index = await readJsonFile<StoredEventIndex>(indexPath, DEFAULT_EVENT_HISTORY_INDEX);
+
+    const initialLength = index.events.length;
+    index.events = index.events.filter((e) => e.id !== eventId);
+
+    if (index.events.length === initialLength) {
+      return false; // Event not found in index
+    }
+
+    await atomicWriteJson(indexPath, index);
+
+    // Delete the event file
+    const eventPath = getEventPath(projectPath, eventId);
+    try {
+      await secureFs.unlink(eventPath);
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+        logger.error(`Error deleting event file ${eventId}:`, error);
+      }
+    }
+
+    logger.info(`Deleted event ${eventId}`);
+    return true;
+  }
+
+  /**
+   * Clear all events for a project
+   *
+   * @param projectPath - Absolute path to project directory
+   * @returns Promise resolving to number of events cleared
+   */
+  async clearEvents(projectPath: string): Promise<number> {
+    const indexPath = getEventHistoryIndexPath(projectPath);
+    const index = await readJsonFile<StoredEventIndex>(indexPath, DEFAULT_EVENT_HISTORY_INDEX);
+
+    const count = index.events.length;
+
+    // Delete all event files
+    for (const event of index.events) {
+      const eventPath = getEventPath(projectPath, event.id);
+      try {
+        await secureFs.unlink(eventPath);
+      } catch (error) {
+        if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+          logger.error(`Error deleting event file ${event.id}:`, error);
+        }
+      }
+    }
+
+    // Reset the index
+    await atomicWriteJson(indexPath, DEFAULT_EVENT_HISTORY_INDEX);
+
+    logger.info(`Cleared ${count} events for project`);
+    return count;
+  }
+
+  /**
+   * Get event count for a project
+   *
+   * @param projectPath - Absolute path to project directory
+   * @param filter - Optional filter criteria
+   * @returns Promise resolving to event count
+   */
+  async getEventCount(projectPath: string, filter?: EventHistoryFilter): Promise<number> {
+    const events = await this.getEvents(projectPath, {
+      ...filter,
+      limit: undefined,
+      offset: undefined,
+    });
+    return events.length;
+  }
+
+  /**
+   * Add an event to the index (internal)
+   */
+  private async addToIndex(projectPath: string, event: StoredEvent): Promise<void> {
+    const indexPath = getEventHistoryIndexPath(projectPath);
+    const index = await readJsonFile<StoredEventIndex>(indexPath, DEFAULT_EVENT_HISTORY_INDEX);
+
+    const summary: StoredEventSummary = {
+      id: event.id,
+      trigger: event.trigger,
+      timestamp: event.timestamp,
+      featureName: event.featureName,
+      featureId: event.featureId,
+    };
+
+    // Add to beginning (newest first)
+    index.events.unshift(summary);
+
+    // Prune old events if over limit
+    if (index.events.length > MAX_EVENTS_IN_INDEX) {
+      const removed = index.events.splice(MAX_EVENTS_IN_INDEX);
+      // Delete the pruned event files
+      for (const oldEvent of removed) {
+        const eventPath = getEventPath(projectPath, oldEvent.id);
+        try {
+          await secureFs.unlink(eventPath);
+        } catch {
+          // Ignore deletion errors for pruned events
+        }
+      }
+      logger.info(`Pruned ${removed.length} old events from history`);
+    }
+
+    await atomicWriteJson(indexPath, index);
+  }
+
+  /**
+   * Extract project name from path
+   */
+  private extractProjectName(projectPath: string): string {
+    const parts = projectPath.split(/[/\\]/);
+    return parts[parts.length - 1] || projectPath;
+  }
+}
+
+// Singleton instance
+let eventHistoryServiceInstance: EventHistoryService | null = null;
+
+/**
+ * Get the singleton event history service instance
+ */
+export function getEventHistoryService(): EventHistoryService {
+  if (!eventHistoryServiceInstance) {
+    eventHistoryServiceInstance = new EventHistoryService();
+  }
+  return eventHistoryServiceInstance;
+}
diff --git a/temp_repo/apps/server/src/services/event-hook-service.ts b/temp_repo/apps/server/src/services/event-hook-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..816a6ed27ce9556f43d4c97688702d1d9fc1d512
--- /dev/null
+++ b/temp_repo/apps/server/src/services/event-hook-service.ts
@@ -0,0 +1,659 @@
+/**
+ * Event Hook Service - Executes custom actions when system events occur
+ *
+ * Listens to the event emitter and triggers configured hooks:
+ * - Shell commands: Executed with configurable timeout
+ * - HTTP webhooks: POST/GET/PUT/PATCH requests with variable substitution
+ *
+ * Also stores events to history for debugging and replay.
+ *
+ * Supported events:
+ * - feature_created: A new feature was created
+ * - feature_success: Feature completed successfully
+ * - feature_error: Feature failed with an error
+ * - auto_mode_complete: Auto mode finished all features (idle state)
+ * - auto_mode_error: Auto mode encountered a critical error
+ */
+
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { createLogger } from '@automaker/utils';
+import type { EventEmitter } from '../lib/events.js';
+import type { SettingsService } from './settings-service.js';
+import type { EventHistoryService } from './event-history-service.js';
+import type { FeatureLoader } from './feature-loader.js';
+import type {
+  EventHook,
+  EventHookTrigger,
+  EventHookShellAction,
+  EventHookHttpAction,
+  EventHookNtfyAction,
+  NtfyEndpointConfig,
+  EventHookContext,
+} from '@automaker/types';
+import { ntfyService, type NtfyContext } from './ntfy-service.js';
+
+const execAsync = promisify(exec);
+const logger = createLogger('EventHooks');
+
+/** Default timeout for shell commands (30 seconds) */
+const DEFAULT_SHELL_TIMEOUT = 30000;
+
+/** Default timeout for HTTP requests (10 seconds) */
+const DEFAULT_HTTP_TIMEOUT = 10000;
+
+// Use the shared EventHookContext type (aliased locally as HookContext for clarity)
+type HookContext = EventHookContext;
+
+/**
+ * Auto-mode event payload structure
+ */
+interface AutoModeEventPayload {
+  type?: string;
+  featureId?: string;
+  featureName?: string;
+  passes?: boolean;
+  executionMode?: 'auto' | 'manual';
+  message?: string;
+  error?: string;
+  errorType?: string;
+  projectPath?: string;
+  /** Status field present when type === 'feature_status_changed' */
+  status?: string;
+}
+
+/**
+ * Feature created event payload structure
+ */
+interface FeatureCreatedPayload {
+  featureId: string;
+  featureName?: string;
+  projectPath: string;
+}
+
+/**
+ * Feature status changed event payload structure
+ */
+interface FeatureStatusChangedPayload {
+  featureId: string;
+  projectPath: string;
+  status: string;
+}
+
+/**
+ * Type guard to safely narrow AutoModeEventPayload to FeatureStatusChangedPayload
+ */
+function isFeatureStatusChangedPayload(
+  payload: AutoModeEventPayload
+): payload is AutoModeEventPayload & FeatureStatusChangedPayload {
+  return (
+    typeof payload.featureId === 'string' &&
+    typeof payload.projectPath === 'string' &&
+    typeof payload.status === 'string'
+  );
+}
+
+/**
+ * Feature completed event payload structure
+ */
+interface FeatureCompletedPayload {
+  featureId: string;
+  featureName?: string;
+  projectPath: string;
+  passes?: boolean;
+  message?: string;
+  executionMode?: 'auto' | 'manual';
+}
+
+/**
+ * Event Hook Service
+ *
+ * Manages execution of user-configured event hooks in response to system events.
+ * Also stores events to history for debugging and replay.
+ */
+export class EventHookService {
+  /** Feature status that indicates agent work is done and awaiting human review (tests skipped) */
+  private static readonly STATUS_WAITING_APPROVAL = 'waiting_approval';
+  /** Feature status that indicates agent work passed automated verification */
+  private static readonly STATUS_VERIFIED = 'verified';
+
+  private emitter: EventEmitter | null = null;
+  private settingsService: SettingsService | null = null;
+  private eventHistoryService: EventHistoryService | null = null;
+  private featureLoader: FeatureLoader | null = null;
+  private unsubscribe: (() => void) | null = null;
+
+  /**
+   * Track feature IDs that have already had hooks fired via auto_mode_feature_complete
+   * to prevent double-firing when feature_status_changed also fires for the same feature.
+   * Entries are automatically cleaned up after 30 seconds.
+   */
+  private recentlyHandledFeatures = new Set<string>();
+
+  /**
+   * Timer IDs for pending cleanup of recentlyHandledFeatures entries,
+   * keyed by featureId. Stored so they can be cancelled in destroy().
+   */
+  private recentlyHandledTimers = new Map<string, ReturnType<typeof setTimeout>>();
+
+  /**
+   * Initialize the service with event emitter, settings service, event history service, and feature loader
+   */
+  initialize(
+    emitter: EventEmitter,
+    settingsService: SettingsService,
+    eventHistoryService?: EventHistoryService,
+    featureLoader?: FeatureLoader
+  ): void {
+    this.emitter = emitter;
+    this.settingsService = settingsService;
+    this.eventHistoryService = eventHistoryService || null;
+    this.featureLoader = featureLoader || null;
+
+    // Subscribe to events
+    this.unsubscribe = emitter.subscribe((type, payload) => {
+      if (type === 'auto-mode:event') {
+        this.handleAutoModeEvent(payload as AutoModeEventPayload);
+      } else if (type === 'feature:created') {
+        this.handleFeatureCreatedEvent(payload as FeatureCreatedPayload);
+      } else if (type === 'feature:completed') {
+        this.handleFeatureCompletedEvent(payload as FeatureCompletedPayload);
+      }
+    });
+
+    logger.info('Event hook service initialized');
+  }
+
+  /**
+   * Cleanup subscriptions
+   */
+  destroy(): void {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = null;
+    }
+    // Cancel all pending cleanup timers to avoid cross-session mutations
+    for (const timerId of this.recentlyHandledTimers.values()) {
+      clearTimeout(timerId);
+    }
+    this.recentlyHandledTimers.clear();
+    this.recentlyHandledFeatures.clear();
+    this.emitter = null;
+    this.settingsService = null;
+    this.eventHistoryService = null;
+    this.featureLoader = null;
+  }
+
+  /**
+   * Handle auto-mode events and trigger matching hooks
+   */
+  private async handleAutoModeEvent(payload: AutoModeEventPayload): Promise<void> {
+    if (!payload.type) return;
+
+    // Map internal event types to hook triggers
+    let trigger: EventHookTrigger | null = null;
+
+    switch (payload.type) {
+      case 'auto_mode_feature_complete':
+        // Only map explicit auto-mode completion events.
+        // Manual feature completions are emitted as feature:completed.
+        if (payload.executionMode !== 'auto') return;
+        trigger = payload.passes ? 'feature_success' : 'feature_error';
+        // Track this feature so feature_status_changed doesn't double-fire hooks
+        if (payload.featureId) {
+          this.markFeatureHandled(payload.featureId);
+        }
+        break;
+      case 'auto_mode_error':
+        // Feature-level error (has featureId) vs auto-mode level error
+        trigger = payload.featureId ? 'feature_error' : 'auto_mode_error';
+        // Track this feature so feature_status_changed doesn't double-fire hooks
+        if (payload.featureId) {
+          this.markFeatureHandled(payload.featureId);
+        }
+        break;
+      case 'auto_mode_idle':
+        trigger = 'auto_mode_complete';
+        break;
+      case 'feature_status_changed':
+        if (isFeatureStatusChangedPayload(payload)) {
+          this.handleFeatureStatusChanged(payload);
+        }
+        return;
+      default:
+        // Other event types don't trigger hooks
+        return;
+    }
+
+    if (!trigger) return;
+
+    // Load feature name if we have featureId but no featureName
+    let featureName: string | undefined = undefined;
+    if (payload.featureId && payload.projectPath && this.featureLoader) {
+      try {
+        const feature = await this.featureLoader.get(payload.projectPath, payload.featureId);
+        if (feature?.title) {
+          featureName = feature.title;
+        }
+      } catch (error) {
+        logger.warn(`Failed to load feature ${payload.featureId} for event hook:`, error);
+      }
+    }
+
+    // Build context for variable substitution
+    // Use loaded featureName (from feature.title) or fall back to payload.featureName
+    // Only populate error/errorType for error triggers - don't leak success messages into error fields
+    const isErrorTrigger = trigger === 'feature_error' || trigger === 'auto_mode_error';
+    const context: HookContext = {
+      featureId: payload.featureId,
+      featureName: featureName || payload.featureName,
+      projectPath: payload.projectPath,
+      projectName: payload.projectPath ? this.extractProjectName(payload.projectPath) : undefined,
+      error: isErrorTrigger ? payload.error || payload.message : undefined,
+      errorType: isErrorTrigger ? payload.errorType : undefined,
+      timestamp: new Date().toISOString(),
+      eventType: trigger,
+    };
+
+    // Execute matching hooks (pass passes for feature completion events)
+    await this.executeHooksForTrigger(trigger, context, { passes: payload.passes });
+  }
+
+  /**
+   * Handle feature:completed events and trigger matching hooks
+   */
+  private async handleFeatureCompletedEvent(payload: FeatureCompletedPayload): Promise<void> {
+    if (!payload.featureId || !payload.projectPath) return;
+
+    // Mark as handled to prevent duplicate firing if feature_status_changed also fires
+    this.markFeatureHandled(payload.featureId);
+
+    const passes = payload.passes ?? true;
+    const trigger: EventHookTrigger = passes ? 'feature_success' : 'feature_error';
+
+    // Load feature name if we have featureId but no featureName
+    let featureName: string | undefined = undefined;
+    if (payload.projectPath && this.featureLoader) {
+      try {
+        const feature = await this.featureLoader.get(payload.projectPath, payload.featureId);
+        if (feature?.title) {
+          featureName = feature.title;
+        }
+      } catch (error) {
+        logger.warn(`Failed to load feature ${payload.featureId} for event hook:`, error);
+      }
+    }
+
+    const isErrorTrigger = trigger === 'feature_error';
+    const context: HookContext = {
+      featureId: payload.featureId,
+      featureName: featureName || payload.featureName,
+      projectPath: payload.projectPath,
+      projectName: this.extractProjectName(payload.projectPath),
+      error: isErrorTrigger ? payload.message : undefined,
+      errorType: undefined,
+      timestamp: new Date().toISOString(),
+      eventType: trigger,
+    };
+
+    await this.executeHooksForTrigger(trigger, context, { passes });
+  }
+
+  /**
+   * Handle feature:created events and trigger matching hooks
+   */
+  private async handleFeatureCreatedEvent(payload: FeatureCreatedPayload): Promise<void> {
+    const context: HookContext = {
+      featureId: payload.featureId,
+      featureName: payload.featureName,
+      projectPath: payload.projectPath,
+      projectName: this.extractProjectName(payload.projectPath),
+      timestamp: new Date().toISOString(),
+      eventType: 'feature_created',
+    };
+
+    await this.executeHooksForTrigger('feature_created', context);
+  }
+
+  /**
+   * Handle feature_status_changed events for non-auto-mode feature completion.
+   *
+   * Auto-mode features already emit auto_mode_feature_complete which triggers hooks.
+   * This handler catches manual (non-auto-mode) feature completions by detecting
+   * status transitions to completion states (verified, waiting_approval).
+   */
+  private async handleFeatureStatusChanged(payload: FeatureStatusChangedPayload): Promise<void> {
+    // Skip if this feature was already handled via auto_mode_feature_complete
+    if (this.recentlyHandledFeatures.has(payload.featureId)) {
+      return;
+    }
+
+    let trigger: EventHookTrigger | null = null;
+
+    if (
+      payload.status === EventHookService.STATUS_VERIFIED ||
+      payload.status === EventHookService.STATUS_WAITING_APPROVAL
+    ) {
+      trigger = 'feature_success';
+    } else {
+      // Only completion statuses trigger hooks from status changes
+      return;
+    }
+
+    // Load feature name
+    let featureName: string | undefined = undefined;
+    if (this.featureLoader) {
+      try {
+        const feature = await this.featureLoader.get(payload.projectPath, payload.featureId);
+        if (feature?.title) {
+          featureName = feature.title;
+        }
+      } catch (error) {
+        logger.warn(`Failed to load feature ${payload.featureId} for status change hook:`, error);
+      }
+    }
+
+    const context: HookContext = {
+      featureId: payload.featureId,
+      featureName,
+      projectPath: payload.projectPath,
+      projectName: this.extractProjectName(payload.projectPath),
+      timestamp: new Date().toISOString(),
+      eventType: trigger,
+    };
+
+    await this.executeHooksForTrigger(trigger, context, { passes: true });
+  }
+
+  /**
+   * Mark a feature as recently handled to prevent double-firing hooks.
+   * Entries are cleaned up after 30 seconds.
+   */
+  private markFeatureHandled(featureId: string): void {
+    // Cancel any existing timer for this feature before setting a new one
+    const existing = this.recentlyHandledTimers.get(featureId);
+    if (existing !== undefined) {
+      clearTimeout(existing);
+    }
+    this.recentlyHandledFeatures.add(featureId);
+    const timerId = setTimeout(() => {
+      this.recentlyHandledFeatures.delete(featureId);
+      this.recentlyHandledTimers.delete(featureId);
+    }, 30000);
+    this.recentlyHandledTimers.set(featureId, timerId);
+  }
+
+  /**
+   * Execute all enabled hooks matching the given trigger and store event to history
+   */
+  private async executeHooksForTrigger(
+    trigger: EventHookTrigger,
+    context: HookContext,
+    additionalData?: { passes?: boolean }
+  ): Promise<void> {
+    // Store event to history (even if no hooks match)
+    if (this.eventHistoryService && context.projectPath) {
+      try {
+        await this.eventHistoryService.storeEvent({
+          trigger,
+          projectPath: context.projectPath,
+          featureId: context.featureId,
+          featureName: context.featureName,
+          error: context.error,
+          errorType: context.errorType,
+          passes: additionalData?.passes,
+        });
+      } catch (error) {
+        logger.error('Failed to store event to history:', error);
+      }
+    }
+
+    if (!this.settingsService) {
+      logger.warn('Settings service not available');
+      return;
+    }
+
+    try {
+      const settings = await this.settingsService.getGlobalSettings();
+      const hooks = settings.eventHooks || [];
+
+      // Filter to enabled hooks matching this trigger
+      const matchingHooks = hooks.filter((hook) => hook.enabled && hook.trigger === trigger);
+
+      if (matchingHooks.length === 0) {
+        return;
+      }
+
+      logger.info(`Executing ${matchingHooks.length} hook(s) for trigger: ${trigger}`);
+
+      // Execute hooks in parallel (don't wait for one to finish before starting next)
+      await Promise.allSettled(matchingHooks.map((hook) => this.executeHook(hook, context)));
+    } catch (error) {
+      logger.error('Error executing hooks:', error);
+    }
+  }
+
+  /**
+   * Execute a single hook
+   */
+  private async executeHook(hook: EventHook, context: HookContext): Promise<void> {
+    const hookName = hook.name || hook.id;
+
+    try {
+      if (hook.action.type === 'shell') {
+        await this.executeShellHook(hook.action, context, hookName);
+      } else if (hook.action.type === 'http') {
+        await this.executeHttpHook(hook.action, context, hookName);
+      } else if (hook.action.type === 'ntfy') {
+        await this.executeNtfyHook(hook.action, context, hookName);
+      }
+    } catch (error) {
+      logger.error(`Hook "${hookName}" failed:`, error);
+    }
+  }
+
+  /**
+   * Execute a shell command hook
+   */
+  private async executeShellHook(
+    action: EventHookShellAction,
+    context: HookContext,
+    hookName: string
+  ): Promise<void> {
+    const command = this.substituteVariables(action.command, context);
+    const timeout = action.timeout || DEFAULT_SHELL_TIMEOUT;
+
+    logger.info(`Executing shell hook "${hookName}": ${command}`);
+
+    try {
+      const { stdout, stderr } = await execAsync(command, {
+        timeout,
+        maxBuffer: 1024 * 1024, // 1MB buffer
+      });
+
+      if (stdout) {
+        logger.debug(`Hook "${hookName}" stdout: ${stdout.trim()}`);
+      }
+      if (stderr) {
+        logger.warn(`Hook "${hookName}" stderr: ${stderr.trim()}`);
+      }
+
+      logger.info(`Shell hook "${hookName}" completed successfully`);
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code === 'ETIMEDOUT') {
+        logger.error(`Shell hook "${hookName}" timed out after ${timeout}ms`);
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Execute an HTTP webhook hook
+   */
+  private async executeHttpHook(
+    action: EventHookHttpAction,
+    context: HookContext,
+    hookName: string
+  ): Promise<void> {
+    const url = this.substituteVariables(action.url, context);
+    const method = action.method || 'POST';
+
+    // Substitute variables in headers
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+    if (action.headers) {
+      for (const [key, value] of Object.entries(action.headers)) {
+        headers[key] = this.substituteVariables(value, context);
+      }
+    }
+
+    // Substitute variables in body
+    let body: string | undefined;
+    if (action.body) {
+      body = this.substituteVariables(action.body, context);
+    } else if (method !== 'GET') {
+      // Default body with context information
+      body = JSON.stringify({
+        eventType: context.eventType,
+        timestamp: context.timestamp,
+        featureId: context.featureId,
+        featureName: context.featureName,
+        projectPath: context.projectPath,
+        projectName: context.projectName,
+        error: context.error,
+      });
+    }
+
+    logger.info(`Executing HTTP hook "${hookName}": ${method} ${url}`);
+
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), DEFAULT_HTTP_TIMEOUT);
+
+      const response = await fetch(url, {
+        method,
+        headers,
+        body: method !== 'GET' ? body : undefined,
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!response.ok) {
+        logger.warn(`HTTP hook "${hookName}" received status ${response.status}`);
+      } else {
+        logger.info(`HTTP hook "${hookName}" completed successfully (status: ${response.status})`);
+      }
+    } catch (error) {
+      if ((error as Error).name === 'AbortError') {
+        logger.error(`HTTP hook "${hookName}" timed out after ${DEFAULT_HTTP_TIMEOUT}ms`);
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Execute an ntfy.sh notification hook
+   */
+  private async executeNtfyHook(
+    action: EventHookNtfyAction,
+    context: HookContext,
+    hookName: string
+  ): Promise<void> {
+    if (!this.settingsService) {
+      logger.warn('Settings service not available for ntfy hook');
+      return;
+    }
+
+    // Get the endpoint configuration
+    const settings = await this.settingsService.getGlobalSettings();
+    const endpoints = settings.ntfyEndpoints || [];
+    const endpoint = endpoints.find((e) => e.id === action.endpointId);
+
+    if (!endpoint) {
+      logger.error(`Ntfy hook "${hookName}" references unknown endpoint: ${action.endpointId}`);
+      return;
+    }
+
+    // Convert HookContext to NtfyContext
+    const ntfyContext: NtfyContext = {
+      featureId: context.featureId,
+      featureName: context.featureName,
+      projectPath: context.projectPath,
+      projectName: context.projectName,
+      error: context.error,
+      errorType: context.errorType,
+      timestamp: context.timestamp,
+      eventType: context.eventType,
+    };
+
+    // Resolve click URL: action-level overrides endpoint default
+    let clickUrl = action.clickUrl || endpoint.defaultClickUrl;
+
+    // Apply deep-link parameters to the resolved click URL
+    if (clickUrl && context.projectPath) {
+      try {
+        const url = new URL(clickUrl);
+        url.pathname = '/board';
+        // Add projectPath so the UI can switch to the correct project
+        url.searchParams.set('projectPath', context.projectPath);
+        // Add featureId as query param for deep linking to board with feature output modal
+        if (context.featureId) {
+          url.searchParams.set('featureId', context.featureId);
+        }
+        clickUrl = url.toString();
+      } catch (error) {
+        // If URL parsing fails, log warning and use as-is
+        logger.warn(
+          `Failed to parse click URL "${clickUrl}" for deep linking: ${error instanceof Error ? error.message : String(error)}`
+        );
+      }
+    }
+
+    logger.info(`Executing ntfy hook "${hookName}" to endpoint "${endpoint.name}"`);
+
+    const result = await ntfyService.sendNotification(
+      endpoint,
+      {
+        title: action.title,
+        body: action.body,
+        tags: action.tags,
+        emoji: action.emoji,
+        clickUrl,
+        priority: action.priority,
+      },
+      ntfyContext
+    );
+
+    if (!result.success) {
+      logger.warn(`Ntfy hook "${hookName}" failed: ${result.error}`);
+    } else {
+      logger.info(`Ntfy hook "${hookName}" completed successfully`);
+    }
+  }
+
+  /**
+   * Substitute {{variable}} placeholders in a string
+   */
+  private substituteVariables(template: string, context: HookContext): string {
+    return template.replace(/\{\{(\w+)\}\}/g, (match, variable) => {
+      const value = context[variable as keyof HookContext];
+      if (value === undefined || value === null) {
+        return '';
+      }
+      return String(value);
+    });
+  }
+
+  /**
+   * Extract project name from path
+   */
+  private extractProjectName(projectPath: string): string {
+    const parts = projectPath.split(/[/\\]/);
+    return parts[parts.length - 1] || projectPath;
+  }
+}
+
+// Singleton instance
+export const eventHookService = new EventHookService();
diff --git a/temp_repo/apps/server/src/services/execution-service.ts b/temp_repo/apps/server/src/services/execution-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..949f2e104f96413a39706715a98ec8bba25fa9b0
--- /dev/null
+++ b/temp_repo/apps/server/src/services/execution-service.ts
@@ -0,0 +1,611 @@
+/**
+ * ExecutionService - Feature execution lifecycle coordination
+ */
+
+import path from 'path';
+import type { Feature } from '@automaker/types';
+import { createLogger, classifyError, loadContextFiles, recordMemoryUsage } from '@automaker/utils';
+import { resolveModelString, DEFAULT_MODELS } from '@automaker/model-resolver';
+import { getFeatureDir } from '@automaker/platform';
+import { ProviderFactory } from '../providers/provider-factory.js';
+import * as secureFs from '../lib/secure-fs.js';
+import {
+  getPromptCustomization,
+  getAutoLoadClaudeMdSetting,
+  getUseClaudeCodeSystemPromptSetting,
+  filterClaudeMdFromContext,
+} from '../lib/settings-helpers.js';
+import { validateWorkingDirectory } from '../lib/sdk-options.js';
+import { extractSummary } from './spec-parser.js';
+import type { TypedEventBus } from './typed-event-bus.js';
+import type { ConcurrencyManager, RunningFeature } from './concurrency-manager.js';
+import type { WorktreeResolver } from './worktree-resolver.js';
+import type { SettingsService } from './settings-service.js';
+import { pipelineService } from './pipeline-service.js';
+
+// Re-export callback types from execution-types.ts for backward compatibility
+export type {
+  RunAgentFn,
+  ExecutePipelineFn,
+  UpdateFeatureStatusFn,
+  LoadFeatureFn,
+  GetPlanningPromptPrefixFn,
+  SaveFeatureSummaryFn,
+  RecordLearningsFn,
+  ContextExistsFn,
+  ResumeFeatureFn,
+  TrackFailureFn,
+  SignalPauseFn,
+  RecordSuccessFn,
+  SaveExecutionStateFn,
+  LoadContextFilesFn,
+} from './execution-types.js';
+
+import type {
+  RunAgentFn,
+  ExecutePipelineFn,
+  UpdateFeatureStatusFn,
+  LoadFeatureFn,
+  GetPlanningPromptPrefixFn,
+  SaveFeatureSummaryFn,
+  RecordLearningsFn,
+  ContextExistsFn,
+  ResumeFeatureFn,
+  TrackFailureFn,
+  SignalPauseFn,
+  RecordSuccessFn,
+  SaveExecutionStateFn,
+  LoadContextFilesFn,
+} from './execution-types.js';
+
+const logger = createLogger('ExecutionService');
+
+/** Marker written by agent-executor for each tool invocation. */
+const TOOL_USE_MARKER = '🔧 Tool:';
+
+/** Minimum trimmed output length to consider agent work meaningful. */
+const MIN_MEANINGFUL_OUTPUT_LENGTH = 200;
+
+export class ExecutionService {
+  constructor(
+    private eventBus: TypedEventBus,
+    private concurrencyManager: ConcurrencyManager,
+    private worktreeResolver: WorktreeResolver,
+    private settingsService: SettingsService | null,
+    // Callback dependencies for delegation
+    private runAgentFn: RunAgentFn,
+    private executePipelineFn: ExecutePipelineFn,
+    private updateFeatureStatusFn: UpdateFeatureStatusFn,
+    private loadFeatureFn: LoadFeatureFn,
+    private getPlanningPromptPrefixFn: GetPlanningPromptPrefixFn,
+    private saveFeatureSummaryFn: SaveFeatureSummaryFn,
+    private recordLearningsFn: RecordLearningsFn,
+    private contextExistsFn: ContextExistsFn,
+    private resumeFeatureFn: ResumeFeatureFn,
+    private trackFailureFn: TrackFailureFn,
+    private signalPauseFn: SignalPauseFn,
+    private recordSuccessFn: RecordSuccessFn,
+    private saveExecutionStateFn: SaveExecutionStateFn,
+    private loadContextFilesFn: LoadContextFilesFn
+  ) {}
+
+  private acquireRunningFeature(options: {
+    featureId: string;
+    projectPath: string;
+    isAutoMode: boolean;
+    allowReuse?: boolean;
+  }): RunningFeature {
+    return this.concurrencyManager.acquire(options);
+  }
+
+  private releaseRunningFeature(featureId: string, options?: { force?: boolean }): void {
+    this.concurrencyManager.release(featureId, options);
+  }
+
+  private extractTitleFromDescription(description: string | undefined): string {
+    if (!description?.trim()) return 'Untitled Feature';
+    const firstLine = description.split('\n')[0].trim();
+    return firstLine.length <= 60 ? firstLine : firstLine.substring(0, 57) + '...';
+  }
+
+  /**
+   * Build feature description section (without implementation instructions).
+   * Used when planning mode is active — the planning prompt provides its own instructions.
+   */
+  buildFeatureDescription(feature: Feature): string {
+    const title = this.extractTitleFromDescription(feature.description);
+
+    let prompt = `## Feature Task
+
+**Feature ID:** ${feature.id}
+**Title:** ${title}
+**Description:** ${feature.description}
+`;
+
+    if (feature.spec) {
+      prompt += `
+**Specification:**
+${feature.spec}
+`;
+    }
+
+    if (feature.imagePaths && feature.imagePaths.length > 0) {
+      const imagesList = feature.imagePaths
+        .map((img, idx) => {
+          const imgPath = typeof img === 'string' ? img : img.path;
+          const filename =
+            typeof img === 'string'
+              ? imgPath.split('/').pop()
+              : img.filename || imgPath.split('/').pop();
+          const mimeType = typeof img === 'string' ? 'image/*' : img.mimeType || 'image/*';
+          return `   ${idx + 1}. ${filename} (${mimeType})\n      Path: ${imgPath}`;
+        })
+        .join('\n');
+      prompt += `\n**Context Images Attached:**\n${feature.imagePaths.length} image(s) attached:\n${imagesList}\n`;
+    }
+
+    return prompt;
+  }
+
+  buildFeaturePrompt(
+    feature: Feature,
+    taskExecutionPrompts: {
+      implementationInstructions: string;
+      playwrightVerificationInstructions: string;
+    }
+  ): string {
+    let prompt = this.buildFeatureDescription(feature);
+
+    prompt += feature.skipTests
+      ? `\n${taskExecutionPrompts.implementationInstructions}`
+      : `\n${taskExecutionPrompts.implementationInstructions}\n\n${taskExecutionPrompts.playwrightVerificationInstructions}`;
+    return prompt;
+  }
+
+  async executeFeature(
+    projectPath: string,
+    featureId: string,
+    useWorktrees = false,
+    isAutoMode = false,
+    providedWorktreePath?: string,
+    options?: { continuationPrompt?: string; _calledInternally?: boolean }
+  ): Promise<void> {
+    const tempRunningFeature = this.acquireRunningFeature({
+      featureId,
+      projectPath,
+      isAutoMode,
+      allowReuse: options?._calledInternally,
+    });
+    const abortController = tempRunningFeature.abortController;
+    if (isAutoMode) await this.saveExecutionStateFn(projectPath);
+    let feature: Feature | null = null;
+    let pipelineCompleted = false;
+
+    try {
+      validateWorkingDirectory(projectPath);
+      feature = await this.loadFeatureFn(projectPath, featureId);
+      if (!feature) throw new Error(`Feature ${featureId} not found`);
+
+      // Update status to in_progress immediately after acquiring the feature.
+      // This prevents a race condition where the UI reloads features and sees the
+      // feature still in 'backlog' status while it's actually being executed.
+      // Only do this for the initial call (not internal/recursive calls which would
+      // redundantly update the status).
+      if (
+        !options?._calledInternally &&
+        (feature.status === 'backlog' ||
+          feature.status === 'ready' ||
+          feature.status === 'interrupted')
+      ) {
+        await this.updateFeatureStatusFn(projectPath, featureId, 'in_progress');
+      }
+
+      if (!options?.continuationPrompt) {
+        if (feature.planSpec?.status === 'approved') {
+          const prompts = await getPromptCustomization(this.settingsService, '[ExecutionService]');
+          let continuationPrompt = prompts.taskExecution.continuationAfterApprovalTemplate;
+          continuationPrompt = continuationPrompt
+            .replace(/\{\{userFeedback\}\}/g, '')
+            .replace(/\{\{approvedPlan\}\}/g, feature.planSpec.content || '');
+          return await this.executeFeature(
+            projectPath,
+            featureId,
+            useWorktrees,
+            isAutoMode,
+            providedWorktreePath,
+            { continuationPrompt, _calledInternally: true }
+          );
+        }
+        if (await this.contextExistsFn(projectPath, featureId)) {
+          return await this.resumeFeatureFn(projectPath, featureId, useWorktrees, true);
+        }
+      }
+
+      let worktreePath: string | null = providedWorktreePath ?? null;
+      const branchName = feature.branchName;
+      if (!worktreePath && useWorktrees && branchName) {
+        worktreePath = await this.worktreeResolver.findWorktreeForBranch(projectPath, branchName);
+        if (!worktreePath) {
+          throw new Error(
+            `Worktree enabled but no worktree found for feature branch "${branchName}".`
+          );
+        }
+        logger.info(`Using worktree for branch "${branchName}": ${worktreePath}`);
+      }
+      const workDir = worktreePath ? path.resolve(worktreePath) : path.resolve(projectPath);
+      validateWorkingDirectory(workDir);
+      tempRunningFeature.worktreePath = worktreePath;
+      tempRunningFeature.branchName = branchName ?? null;
+      // Ensure status is in_progress (may already be set from the early update above,
+      // but internal/recursive calls skip the early update and need it here).
+      // Mirror the external guard: only transition when the feature is still in
+      // backlog, ready, or interrupted to avoid overwriting a concurrent terminal status.
+      if (
+        options?._calledInternally &&
+        (feature.status === 'backlog' ||
+          feature.status === 'ready' ||
+          feature.status === 'interrupted')
+      ) {
+        await this.updateFeatureStatusFn(projectPath, featureId, 'in_progress');
+      }
+      this.eventBus.emitAutoModeEvent('auto_mode_feature_start', {
+        featureId,
+        projectPath,
+        branchName: feature.branchName ?? null,
+        feature: {
+          id: featureId,
+          title: feature.title || 'Loading...',
+          description: feature.description || 'Feature is starting',
+        },
+      });
+
+      const autoLoadClaudeMd = await getAutoLoadClaudeMdSetting(
+        projectPath,
+        this.settingsService,
+        '[ExecutionService]'
+      );
+      const useClaudeCodeSystemPrompt = await getUseClaudeCodeSystemPromptSetting(
+        projectPath,
+        this.settingsService,
+        '[ExecutionService]'
+      );
+      const prompts = await getPromptCustomization(this.settingsService, '[ExecutionService]');
+      let prompt: string;
+      const contextResult = await this.loadContextFilesFn({
+        projectPath,
+        fsModule: secureFs as Parameters<typeof loadContextFiles>[0]['fsModule'],
+        taskContext: {
+          title: feature.title ?? '',
+          description: feature.description ?? '',
+        },
+      });
+      const combinedSystemPrompt = filterClaudeMdFromContext(contextResult, autoLoadClaudeMd);
+
+      if (options?.continuationPrompt) {
+        prompt = options.continuationPrompt;
+      } else {
+        const planningPrefix = await this.getPlanningPromptPrefixFn(feature);
+        if (planningPrefix) {
+          // Planning mode active: use planning instructions + feature description only.
+          // Do NOT include implementationInstructions — they conflict with the planning
+          // prompt's "DO NOT proceed with implementation until approval" directive.
+          prompt = planningPrefix + '\n\n' + this.buildFeatureDescription(feature);
+        } else {
+          prompt = this.buildFeaturePrompt(feature, prompts.taskExecution);
+        }
+        if (feature.planningMode && feature.planningMode !== 'skip') {
+          this.eventBus.emitAutoModeEvent('planning_started', {
+            featureId: feature.id,
+            mode: feature.planningMode,
+            message: `Starting ${feature.planningMode} planning phase`,
+          });
+        }
+      }
+
+      const imagePaths = feature.imagePaths?.map((img) =>
+        typeof img === 'string' ? img : img.path
+      );
+      const model = resolveModelString(feature.model, DEFAULT_MODELS.claude);
+      tempRunningFeature.model = model;
+      tempRunningFeature.provider = ProviderFactory.getProviderNameForModel(model);
+
+      await this.runAgentFn(
+        workDir,
+        featureId,
+        prompt,
+        abortController,
+        projectPath,
+        imagePaths,
+        model,
+        {
+          projectPath,
+          planningMode: feature.planningMode,
+          requirePlanApproval: feature.requirePlanApproval,
+          systemPrompt: combinedSystemPrompt || undefined,
+          autoLoadClaudeMd,
+          useClaudeCodeSystemPrompt,
+          thinkingLevel: feature.thinkingLevel,
+          reasoningEffort: feature.reasoningEffort,
+          providerId: feature.providerId,
+          branchName: feature.branchName ?? null,
+        }
+      );
+
+      // Check for incomplete tasks after agent execution.
+      // The agent may have finished early (hit max turns, decided it was done, etc.)
+      // while tasks are still pending. If so, re-run the agent to complete remaining tasks.
+      const MAX_TASK_RETRY_ATTEMPTS = 3;
+      let taskRetryAttempts = 0;
+      while (!abortController.signal.aborted && taskRetryAttempts < MAX_TASK_RETRY_ATTEMPTS) {
+        const currentFeature = await this.loadFeatureFn(projectPath, featureId);
+        if (!currentFeature?.planSpec?.tasks) break;
+
+        const pendingTasks = currentFeature.planSpec.tasks.filter(
+          (t) => t.status === 'pending' || t.status === 'in_progress'
+        );
+        if (pendingTasks.length === 0) break;
+
+        taskRetryAttempts++;
+        const totalTasks = currentFeature.planSpec.tasks.length;
+        const completedTasks = currentFeature.planSpec.tasks.filter(
+          (t) => t.status === 'completed'
+        ).length;
+        logger.info(
+          `[executeFeature] Feature ${featureId} has ${pendingTasks.length} incomplete tasks (${completedTasks}/${totalTasks} completed). Re-running agent (attempt ${taskRetryAttempts}/${MAX_TASK_RETRY_ATTEMPTS})`
+        );
+
+        this.eventBus.emitAutoModeEvent('auto_mode_progress', {
+          featureId,
+          branchName: feature.branchName ?? null,
+          content: `Agent finished with ${pendingTasks.length} tasks remaining. Re-running to complete tasks (attempt ${taskRetryAttempts}/${MAX_TASK_RETRY_ATTEMPTS})...`,
+          projectPath,
+        });
+
+        // Build a continuation prompt that tells the agent to finish remaining tasks
+        const remainingTasksList = pendingTasks
+          .map((t) => `- ${t.id}: ${t.description} (${t.status})`)
+          .join('\n');
+
+        const continuationPrompt = `## Continue Implementation - Incomplete Tasks
+
+The previous agent session ended before all tasks were completed. Please continue implementing the remaining tasks.
+
+**Completed:** ${completedTasks}/${totalTasks} tasks
+**Remaining tasks:**
+${remainingTasksList}
+
+Please continue from where you left off and complete all remaining tasks. Use the same [TASK_START:ID] and [TASK_COMPLETE:ID] markers for each task.`;
+
+        await this.runAgentFn(
+          workDir,
+          featureId,
+          continuationPrompt,
+          abortController,
+          projectPath,
+          undefined,
+          model,
+          {
+            projectPath,
+            planningMode: 'skip',
+            requirePlanApproval: false,
+            systemPrompt: combinedSystemPrompt || undefined,
+            autoLoadClaudeMd,
+            useClaudeCodeSystemPrompt,
+            thinkingLevel: feature.thinkingLevel,
+            reasoningEffort: feature.reasoningEffort,
+            providerId: feature.providerId,
+            branchName: feature.branchName ?? null,
+          }
+        );
+      }
+
+      // Log if tasks are still incomplete after retry attempts
+      if (taskRetryAttempts >= MAX_TASK_RETRY_ATTEMPTS) {
+        const finalFeature = await this.loadFeatureFn(projectPath, featureId);
+        const stillPending = finalFeature?.planSpec?.tasks?.filter(
+          (t) => t.status === 'pending' || t.status === 'in_progress'
+        );
+        if (stillPending && stillPending.length > 0) {
+          logger.warn(
+            `[executeFeature] Feature ${featureId} still has ${stillPending.length} incomplete tasks after ${MAX_TASK_RETRY_ATTEMPTS} retry attempts. Moving to final status.`
+          );
+        }
+      }
+
+      const pipelineConfig = await pipelineService.getPipelineConfig(projectPath);
+      const excludedStepIds = new Set(feature.excludedPipelineSteps || []);
+      const sortedSteps = [...(pipelineConfig?.steps || [])]
+        .sort((a, b) => a.order - b.order)
+        .filter((step) => !excludedStepIds.has(step.id));
+      if (sortedSteps.length > 0) {
+        await this.executePipelineFn({
+          projectPath,
+          featureId,
+          feature,
+          steps: sortedSteps,
+          workDir,
+          worktreePath,
+          branchName: feature.branchName ?? null,
+          abortController,
+          autoLoadClaudeMd,
+          useClaudeCodeSystemPrompt,
+          testAttempts: 0,
+          maxTestAttempts: 5,
+        });
+        pipelineCompleted = true;
+        // Check if pipeline set a terminal status (e.g., merge_conflict) — don't overwrite it
+        const refreshed = await this.loadFeatureFn(projectPath, featureId);
+        if (refreshed?.status === 'merge_conflict') {
+          return;
+        }
+      }
+
+      // Read agent output before determining final status.
+      // CLI-based providers (Cursor, Codex, etc.) may exit quickly without doing
+      // meaningful work. Check output to avoid prematurely marking as 'verified'.
+      const outputPath = path.join(getFeatureDir(projectPath, featureId), 'agent-output.md');
+      let agentOutput = '';
+      try {
+        agentOutput = (await secureFs.readFile(outputPath, 'utf-8')) as string;
+      } catch {
+        /* */
+      }
+
+      // Determine if the agent did meaningful work by checking for tool usage
+      // indicators in the output. The agent executor writes "🔧 Tool:" markers
+      // each time a tool is invoked. No tool usage suggests the CLI exited
+      // without performing implementation work.
+      const hasToolUsage = agentOutput.includes(TOOL_USE_MARKER);
+      const isOutputTooShort = agentOutput.trim().length < MIN_MEANINGFUL_OUTPUT_LENGTH;
+      const agentDidWork = hasToolUsage && !isOutputTooShort;
+
+      let finalStatus: 'verified' | 'waiting_approval';
+      if (feature.skipTests) {
+        finalStatus = 'waiting_approval';
+      } else if (!agentDidWork) {
+        // Agent didn't produce meaningful output (e.g., CLI exited quickly).
+        // Route to waiting_approval so the user can review and re-run.
+        finalStatus = 'waiting_approval';
+        logger.warn(
+          `[executeFeature] Feature ${featureId}: agent produced insufficient output ` +
+            `(${agentOutput.trim().length}/${MIN_MEANINGFUL_OUTPUT_LENGTH} chars, toolUsage=${hasToolUsage}). ` +
+            `Setting status to waiting_approval instead of verified.`
+        );
+      } else {
+        finalStatus = 'verified';
+      }
+
+      await this.updateFeatureStatusFn(projectPath, featureId, finalStatus);
+      this.recordSuccessFn();
+
+      // Check final task completion state for accurate reporting
+      const completedFeature = await this.loadFeatureFn(projectPath, featureId);
+      const totalTasks = completedFeature?.planSpec?.tasks?.length ?? 0;
+      const completedTasks =
+        completedFeature?.planSpec?.tasks?.filter((t) => t.status === 'completed').length ?? 0;
+      const hasIncompleteTasks = totalTasks > 0 && completedTasks < totalTasks;
+
+      try {
+        // Only save summary if feature doesn't already have one (e.g., accumulated from pipeline steps)
+        // This prevents overwriting accumulated summaries with just the last step's output
+        // The agent-executor already extracts and saves summaries during execution
+        if (agentOutput && !completedFeature?.summary) {
+          const summary = extractSummary(agentOutput);
+          if (summary) await this.saveFeatureSummaryFn(projectPath, featureId, summary);
+        }
+        if (contextResult.memoryFiles.length > 0 && agentOutput) {
+          await recordMemoryUsage(
+            projectPath,
+            contextResult.memoryFiles,
+            agentOutput,
+            true,
+            secureFs as Parameters<typeof recordMemoryUsage>[4]
+          );
+        }
+        await this.recordLearningsFn(projectPath, feature, agentOutput);
+      } catch {
+        /* learnings recording failed */
+      }
+
+      const elapsedSeconds = Math.round((Date.now() - tempRunningFeature.startTime) / 1000);
+      let completionMessage = `Feature completed in ${elapsedSeconds}s`;
+      if (finalStatus === 'verified') completionMessage += ' - auto-verified';
+      if (hasIncompleteTasks)
+        completionMessage += ` (${completedTasks}/${totalTasks} tasks completed)`;
+
+      if (isAutoMode) {
+        this.eventBus.emitAutoModeEvent('auto_mode_feature_complete', {
+          featureId,
+          featureName: feature.title,
+          branchName: feature.branchName ?? null,
+          executionMode: 'auto',
+          passes: true,
+          message: completionMessage,
+          projectPath,
+          model: tempRunningFeature.model,
+          provider: tempRunningFeature.provider,
+        });
+      }
+    } catch (error) {
+      const errorInfo = classifyError(error);
+      if (errorInfo.isAbort) {
+        await this.updateFeatureStatusFn(projectPath, featureId, 'interrupted');
+        if (isAutoMode) {
+          this.eventBus.emitAutoModeEvent('auto_mode_feature_complete', {
+            featureId,
+            featureName: feature?.title,
+            branchName: feature?.branchName ?? null,
+            executionMode: 'auto',
+            passes: false,
+            message: 'Feature stopped by user',
+            projectPath,
+          });
+        }
+      } else {
+        logger.error(`Feature ${featureId} failed:`, error);
+        // If pipeline steps completed successfully, don't send the feature back to backlog.
+        // The pipeline work is done — set to waiting_approval so the user can review.
+        const fallbackStatus = pipelineCompleted ? 'waiting_approval' : 'backlog';
+        if (pipelineCompleted) {
+          logger.info(
+            `[executeFeature] Feature ${featureId} failed after pipeline completed. ` +
+              `Setting status to waiting_approval instead of backlog to preserve pipeline work.`
+          );
+        }
+        // Don't overwrite terminal states like 'merge_conflict' that were set during pipeline execution
+        let currentStatus: string | undefined;
+        try {
+          const currentFeature = await this.loadFeatureFn(projectPath, featureId);
+          currentStatus = currentFeature?.status;
+        } catch (loadErr) {
+          // If loading fails, log it and proceed with the status update anyway
+          logger.warn(
+            `[executeFeature] Failed to reload feature ${featureId} for status check:`,
+            loadErr
+          );
+        }
+        if (currentStatus !== 'merge_conflict') {
+          await this.updateFeatureStatusFn(projectPath, featureId, fallbackStatus);
+        }
+        this.eventBus.emitAutoModeEvent('auto_mode_error', {
+          featureId,
+          featureName: feature?.title,
+          branchName: feature?.branchName ?? null,
+          error: errorInfo.message,
+          errorType: errorInfo.type,
+          projectPath,
+        });
+        if (this.trackFailureFn({ type: errorInfo.type, message: errorInfo.message })) {
+          this.signalPauseFn({ type: errorInfo.type, message: errorInfo.message });
+        }
+      }
+    } finally {
+      this.releaseRunningFeature(featureId);
+      if (isAutoMode && projectPath) await this.saveExecutionStateFn(projectPath);
+    }
+  }
+
+  async stopFeature(featureId: string): Promise<boolean> {
+    const running = this.concurrencyManager.getRunningFeature(featureId);
+    if (!running) return false;
+    const { projectPath } = running;
+
+    // Immediately update feature status to 'interrupted' so the UI reflects
+    // the stop right away. CLI-based providers can take seconds to terminate
+    // their subprocess after the abort signal fires, leaving the feature stuck
+    // in 'in_progress' on the Kanban board until the executeFeature catch block
+    // eventually runs. By persisting and emitting the status change here, the
+    // board updates immediately regardless of how long the subprocess takes to stop.
+    try {
+      await this.updateFeatureStatusFn(projectPath, featureId, 'interrupted');
+    } catch (err) {
+      // Non-fatal: the abort still proceeds and executeFeature's catch block
+      // will attempt the same update once the subprocess terminates.
+      logger.warn(`stopFeature: failed to immediately update status for ${featureId}:`, err);
+    }
+
+    running.abortController.abort();
+    this.releaseRunningFeature(featureId, { force: true });
+    return true;
+  }
+}
diff --git a/temp_repo/apps/server/src/services/execution-types.ts b/temp_repo/apps/server/src/services/execution-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..765098ba1135bc3fdd8d7719c2a11e328f547d2b
--- /dev/null
+++ b/temp_repo/apps/server/src/services/execution-types.ts
@@ -0,0 +1,215 @@
+/**
+ * Execution Types - Type definitions for ExecutionService and related services
+ *
+ * Contains callback types used by ExecutionService for dependency injection,
+ * allowing the service to delegate to other services without circular dependencies.
+ */
+
+import type { Feature, PlanningMode, ThinkingLevel, ReasoningEffort } from '@automaker/types';
+import type { loadContextFiles } from '@automaker/utils';
+import type { PipelineContext } from './pipeline-orchestrator.js';
+
+// =============================================================================
+// ExecutionService Callback Types
+// =============================================================================
+
+/**
+ * Function to run the agent with a prompt
+ */
+export type RunAgentFn = (
+  workDir: string,
+  featureId: string,
+  prompt: string,
+  abortController: AbortController,
+  projectPath: string,
+  imagePaths?: string[],
+  model?: string,
+  options?: {
+    projectPath?: string;
+    planningMode?: PlanningMode;
+    requirePlanApproval?: boolean;
+    previousContent?: string;
+    systemPrompt?: string;
+    autoLoadClaudeMd?: boolean;
+    useClaudeCodeSystemPrompt?: boolean;
+    thinkingLevel?: ThinkingLevel;
+    reasoningEffort?: ReasoningEffort;
+    providerId?: string;
+    branchName?: string | null;
+  }
+) => Promise<void>;
+
+/**
+ * Function to execute pipeline steps
+ */
+export type ExecutePipelineFn = (context: PipelineContext) => Promise<void>;
+
+/**
+ * Function to update feature status
+ */
+export type UpdateFeatureStatusFn = (
+  projectPath: string,
+  featureId: string,
+  status: string
+) => Promise<void>;
+
+/**
+ * Function to load a feature by ID
+ */
+export type LoadFeatureFn = (projectPath: string, featureId: string) => Promise<Feature | null>;
+
+/**
+ * Function to get the planning prompt prefix based on feature's planning mode
+ */
+export type GetPlanningPromptPrefixFn = (feature: Feature) => Promise<string>;
+
+/**
+ * Function to save a feature summary
+ */
+export type SaveFeatureSummaryFn = (
+  projectPath: string,
+  featureId: string,
+  summary: string
+) => Promise<void>;
+
+/**
+ * Function to record learnings from a completed feature
+ */
+export type RecordLearningsFn = (
+  projectPath: string,
+  feature: Feature,
+  agentOutput: string
+) => Promise<void>;
+
+/**
+ * Function to check if context exists for a feature
+ */
+export type ContextExistsFn = (projectPath: string, featureId: string) => Promise<boolean>;
+
+/**
+ * Function to resume a feature (continues from saved context or starts fresh)
+ */
+export type ResumeFeatureFn = (
+  projectPath: string,
+  featureId: string,
+  useWorktrees: boolean,
+  _calledInternally: boolean
+) => Promise<void>;
+
+/**
+ * Function to track failure and check if pause threshold is reached
+ * Returns true if auto-mode should pause
+ */
+export type TrackFailureFn = (errorInfo: { type: string; message: string }) => boolean;
+
+/**
+ * Function to signal that auto-mode should pause due to failures
+ */
+export type SignalPauseFn = (errorInfo: { type: string; message: string }) => void;
+
+/**
+ * Function to record a successful execution (resets failure tracking)
+ */
+export type RecordSuccessFn = () => void;
+
+/**
+ * Function to save execution state
+ */
+export type SaveExecutionStateFn = (projectPath: string) => Promise<void>;
+
+/**
+ * Type alias for loadContextFiles function
+ */
+export type LoadContextFilesFn = typeof loadContextFiles;
+
+// =============================================================================
+// PipelineOrchestrator Callback Types
+// =============================================================================
+
+/**
+ * Function to build feature prompt
+ */
+export type BuildFeaturePromptFn = (
+  feature: Feature,
+  prompts: { implementationInstructions: string; playwrightVerificationInstructions: string }
+) => string;
+
+/**
+ * Function to execute a feature
+ */
+export type ExecuteFeatureFn = (
+  projectPath: string,
+  featureId: string,
+  useWorktrees: boolean,
+  isAutoMode: boolean,
+  providedWorktreePath?: string,
+  options?: { continuationPrompt?: string; _calledInternally?: boolean }
+) => Promise<void>;
+
+/**
+ * Function to run agent (for PipelineOrchestrator)
+ */
+export type PipelineRunAgentFn = (
+  workDir: string,
+  featureId: string,
+  prompt: string,
+  abortController: AbortController,
+  projectPath: string,
+  imagePaths?: string[],
+  model?: string,
+  options?: Record<string, unknown>
+) => Promise<void>;
+
+// =============================================================================
+// AutoLoopCoordinator Callback Types
+// =============================================================================
+
+/**
+ * Function to execute a feature in auto-loop
+ */
+export type AutoLoopExecuteFeatureFn = (
+  projectPath: string,
+  featureId: string,
+  useWorktrees: boolean,
+  isAutoMode: boolean
+) => Promise<void>;
+
+/**
+ * Function to load pending features for a worktree
+ */
+export type LoadPendingFeaturesFn = (
+  projectPath: string,
+  branchName: string | null
+) => Promise<Feature[]>;
+
+/**
+ * Function to save execution state for auto-loop
+ */
+export type AutoLoopSaveExecutionStateFn = (
+  projectPath: string,
+  branchName: string | null,
+  maxConcurrency: number
+) => Promise<void>;
+
+/**
+ * Function to clear execution state
+ */
+export type ClearExecutionStateFn = (
+  projectPath: string,
+  branchName: string | null
+) => Promise<void>;
+
+/**
+ * Function to reset stuck features
+ */
+export type ResetStuckFeaturesFn = (projectPath: string) => Promise<void>;
+
+/**
+ * Function to check if a feature is finished
+ */
+export type IsFeatureFinishedFn = (feature: Feature) => boolean;
+
+/**
+ * Function to check if a feature is running
+ */
+export type IsFeatureRunningFn = (featureId: string) => boolean;
diff --git a/temp_repo/apps/server/src/services/feature-export-service.ts b/temp_repo/apps/server/src/services/feature-export-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bd741dc2280b176f53f10f1f8cbbb5117faffd6b
--- /dev/null
+++ b/temp_repo/apps/server/src/services/feature-export-service.ts
@@ -0,0 +1,539 @@
+/**
+ * Feature Export Service - Handles exporting and importing features in JSON/YAML formats
+ *
+ * Provides functionality to:
+ * - Export single features to JSON or YAML format
+ * - Export multiple features (bulk export)
+ * - Import features from JSON or YAML data
+ * - Validate import data for compatibility
+ */
+
+import { createLogger } from '@automaker/utils';
+import { stringify as yamlStringify, parse as yamlParse } from 'yaml';
+import type { Feature, FeatureExport, FeatureImport, FeatureImportResult } from '@automaker/types';
+import { FeatureLoader } from './feature-loader.js';
+
+const logger = createLogger('FeatureExportService');
+
+/** Current export format version */
+export const FEATURE_EXPORT_VERSION = '1.0.0';
+
+/** Supported export formats */
+export type ExportFormat = 'json' | 'yaml';
+
+/** Options for exporting features */
+export interface ExportOptions {
+  /** Format to export in (default: 'json') */
+  format?: ExportFormat;
+  /** Whether to include description history (default: true) */
+  includeHistory?: boolean;
+  /** Whether to include plan spec (default: true) */
+  includePlanSpec?: boolean;
+  /** Optional metadata to include */
+  metadata?: {
+    projectName?: string;
+    projectPath?: string;
+    branch?: string;
+    [key: string]: unknown;
+  };
+  /** Who/what is performing the export */
+  exportedBy?: string;
+  /** Pretty print output (default: true) */
+  prettyPrint?: boolean;
+}
+
+/** Options for bulk export */
+export interface BulkExportOptions extends ExportOptions {
+  /** Filter by category */
+  category?: string;
+  /** Filter by status */
+  status?: string;
+  /** Feature IDs to include (if not specified, exports all) */
+  featureIds?: string[];
+}
+
+/** Result of a bulk export */
+export interface BulkExportResult {
+  /** Export format version */
+  version: string;
+  /** ISO date string when the export was created */
+  exportedAt: string;
+  /** Number of features exported */
+  count: number;
+  /** The exported features */
+  features: FeatureExport[];
+  /** Export metadata */
+  metadata?: {
+    projectName?: string;
+    projectPath?: string;
+    branch?: string;
+    [key: string]: unknown;
+  };
+}
+
+/**
+ * FeatureExportService - Manages feature export and import operations
+ */
+export class FeatureExportService {
+  private featureLoader: FeatureLoader;
+
+  constructor(featureLoader?: FeatureLoader) {
+    this.featureLoader = featureLoader || new FeatureLoader();
+  }
+
+  /**
+   * Export a single feature to the specified format
+   *
+   * @param projectPath - Path to the project
+   * @param featureId - ID of the feature to export
+   * @param options - Export options
+   * @returns Promise resolving to the exported feature string
+   */
+  async exportFeature(
+    projectPath: string,
+    featureId: string,
+    options: ExportOptions = {}
+  ): Promise<string> {
+    const feature = await this.featureLoader.get(projectPath, featureId);
+    if (!feature) {
+      throw new Error(`Feature ${featureId} not found`);
+    }
+
+    return this.exportFeatureData(feature, options);
+  }
+
+  /**
+   * Export feature data to the specified format (without fetching from disk)
+   *
+   * @param feature - The feature to export
+   * @param options - Export options
+   * @returns The exported feature string
+   */
+  exportFeatureData(feature: Feature, options: ExportOptions = {}): string {
+    const {
+      format = 'json',
+      includeHistory = true,
+      includePlanSpec = true,
+      metadata,
+      exportedBy,
+      prettyPrint = true,
+    } = options;
+
+    // Prepare feature data, optionally excluding some fields
+    const featureData = this.prepareFeatureForExport(feature, {
+      includeHistory,
+      includePlanSpec,
+    });
+
+    const exportData: FeatureExport = {
+      version: FEATURE_EXPORT_VERSION,
+      feature: featureData,
+      exportedAt: new Date().toISOString(),
+      ...(exportedBy ? { exportedBy } : {}),
+      ...(metadata ? { metadata } : {}),
+    };
+
+    return this.serialize(exportData, format, prettyPrint);
+  }
+
+  /**
+   * Export multiple features to the specified format
+   *
+   * @param projectPath - Path to the project
+   * @param options - Bulk export options
+   * @returns Promise resolving to the exported features string
+   */
+  async exportFeatures(projectPath: string, options: BulkExportOptions = {}): Promise<string> {
+    const {
+      format = 'json',
+      category,
+      status,
+      featureIds,
+      includeHistory = true,
+      includePlanSpec = true,
+      metadata,
+      prettyPrint = true,
+    } = options;
+
+    // Get all features
+    let features = await this.featureLoader.getAll(projectPath);
+
+    // Apply filters
+    if (featureIds && featureIds.length > 0) {
+      const idSet = new Set(featureIds);
+      features = features.filter((f) => idSet.has(f.id));
+    }
+    if (category) {
+      features = features.filter((f) => f.category === category);
+    }
+    if (status) {
+      features = features.filter((f) => f.status === status);
+    }
+
+    // Generate timestamp once for consistent export time across all features
+    const exportedAt = new Date().toISOString();
+
+    // Prepare feature exports
+    const featureExports: FeatureExport[] = features.map((feature) => ({
+      version: FEATURE_EXPORT_VERSION,
+      feature: this.prepareFeatureForExport(feature, { includeHistory, includePlanSpec }),
+      exportedAt,
+    }));
+
+    const bulkExport: BulkExportResult = {
+      version: FEATURE_EXPORT_VERSION,
+      exportedAt,
+      count: featureExports.length,
+      features: featureExports,
+      ...(metadata ? { metadata } : {}),
+    };
+
+    logger.info(`Exported ${featureExports.length} features from ${projectPath}`);
+
+    return this.serialize(bulkExport, format, prettyPrint);
+  }
+
+  /**
+   * Import a feature from JSON or YAML data
+   *
+   * @param projectPath - Path to the project
+   * @param importData - Import configuration
+   * @returns Promise resolving to the import result
+   */
+  async importFeature(
+    projectPath: string,
+    importData: FeatureImport
+  ): Promise<FeatureImportResult> {
+    const warnings: string[] = [];
+
+    try {
+      // Extract feature from data (handle both raw Feature and wrapped FeatureExport)
+      const feature = this.extractFeatureFromImport(importData.data);
+      if (!feature) {
+        return {
+          success: false,
+          importedAt: new Date().toISOString(),
+          errors: ['Invalid import data: could not extract feature'],
+        };
+      }
+
+      // Validate required fields
+      const validationErrors = this.validateFeature(feature);
+      if (validationErrors.length > 0) {
+        return {
+          success: false,
+          importedAt: new Date().toISOString(),
+          errors: validationErrors,
+        };
+      }
+
+      // Determine the feature ID to use
+      const featureId = importData.newId || feature.id || this.featureLoader.generateFeatureId();
+
+      // Check for existing feature
+      const existingFeature = await this.featureLoader.get(projectPath, featureId);
+      if (existingFeature && !importData.overwrite) {
+        return {
+          success: false,
+          importedAt: new Date().toISOString(),
+          errors: [`Feature with ID ${featureId} already exists. Set overwrite: true to replace.`],
+        };
+      }
+
+      // Prepare feature for import
+      const featureToImport: Feature = {
+        ...feature,
+        id: featureId,
+        // Optionally override category
+        ...(importData.targetCategory ? { category: importData.targetCategory } : {}),
+        // Clear branch info if not preserving
+        ...(importData.preserveBranchInfo ? {} : { branchName: undefined }),
+      };
+
+      // Clear runtime-specific fields that shouldn't be imported
+      delete featureToImport.titleGenerating;
+      delete featureToImport.error;
+
+      // Handle image paths - they won't be valid after import
+      if (featureToImport.imagePaths && featureToImport.imagePaths.length > 0) {
+        warnings.push(
+          `Feature had ${featureToImport.imagePaths.length} image path(s) that were cleared during import. Images must be re-attached.`
+        );
+        featureToImport.imagePaths = [];
+      }
+
+      // Handle text file paths - they won't be valid after import
+      if (featureToImport.textFilePaths && featureToImport.textFilePaths.length > 0) {
+        warnings.push(
+          `Feature had ${featureToImport.textFilePaths.length} text file path(s) that were cleared during import. Files must be re-attached.`
+        );
+        featureToImport.textFilePaths = [];
+      }
+
+      // Create or update the feature
+      if (existingFeature) {
+        await this.featureLoader.update(projectPath, featureId, featureToImport);
+        logger.info(`Updated feature ${featureId} via import`);
+      } else {
+        await this.featureLoader.create(projectPath, featureToImport);
+        logger.info(`Created feature ${featureId} via import`);
+      }
+
+      return {
+        success: true,
+        featureId,
+        importedAt: new Date().toISOString(),
+        warnings: warnings.length > 0 ? warnings : undefined,
+        wasOverwritten: !!existingFeature,
+      };
+    } catch (error) {
+      logger.error('Failed to import feature:', error);
+      return {
+        success: false,
+        importedAt: new Date().toISOString(),
+        errors: [`Import failed: ${error instanceof Error ? error.message : String(error)}`],
+      };
+    }
+  }
+
+  /**
+   * Import multiple features from JSON or YAML data
+   *
+   * @param projectPath - Path to the project
+   * @param data - Raw JSON or YAML string, or parsed data
+   * @param options - Import options applied to all features
+   * @returns Promise resolving to array of import results
+   */
+  async importFeatures(
+    projectPath: string,
+    data: string | BulkExportResult,
+    options: Omit<FeatureImport, 'data'> = {}
+  ): Promise<FeatureImportResult[]> {
+    let bulkData: BulkExportResult;
+
+    // Parse if string
+    if (typeof data === 'string') {
+      const parsed = this.parseImportData(data);
+      if (!parsed || !this.isBulkExport(parsed)) {
+        return [
+          {
+            success: false,
+            importedAt: new Date().toISOString(),
+            errors: ['Invalid bulk import data: expected BulkExportResult format'],
+          },
+        ];
+      }
+      bulkData = parsed as BulkExportResult;
+    } else {
+      bulkData = data;
+    }
+
+    // Import each feature
+    const results: FeatureImportResult[] = [];
+    for (const featureExport of bulkData.features) {
+      const result = await this.importFeature(projectPath, {
+        data: featureExport,
+        ...options,
+      });
+      results.push(result);
+    }
+
+    const successCount = results.filter((r) => r.success).length;
+    logger.info(`Bulk import complete: ${successCount}/${results.length} features imported`);
+
+    return results;
+  }
+
+  /**
+   * Parse import data from JSON or YAML string
+   *
+   * @param data - Raw JSON or YAML string
+   * @returns Parsed data or null if parsing fails
+   */
+  parseImportData(data: string): Feature | FeatureExport | BulkExportResult | null {
+    const trimmed = data.trim();
+
+    // Try JSON first
+    if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+      try {
+        return JSON.parse(trimmed);
+      } catch {
+        // Fall through to YAML
+      }
+    }
+
+    // Try YAML
+    try {
+      return yamlParse(trimmed);
+    } catch (error) {
+      logger.error('Failed to parse import data:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Detect the format of import data
+   *
+   * @param data - Raw string data
+   * @returns Detected format or null if unknown
+   */
+  detectFormat(data: string): ExportFormat | null {
+    const trimmed = data.trim();
+
+    // JSON detection
+    if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+      try {
+        JSON.parse(trimmed);
+        return 'json';
+      } catch {
+        // Not valid JSON
+      }
+    }
+
+    // YAML detection (if it parses and wasn't JSON)
+    try {
+      yamlParse(trimmed);
+      return 'yaml';
+    } catch {
+      // Not valid YAML either
+    }
+
+    return null;
+  }
+
+  /**
+   * Prepare a feature for export by optionally removing fields
+   */
+  private prepareFeatureForExport(
+    feature: Feature,
+    options: { includeHistory?: boolean; includePlanSpec?: boolean }
+  ): Feature {
+    const { includeHistory = true, includePlanSpec = true } = options;
+
+    // Clone to avoid modifying original
+    const exported: Feature = { ...feature };
+
+    // Remove transient fields that shouldn't be exported
+    delete exported.titleGenerating;
+    delete exported.error;
+
+    // Optionally exclude history
+    if (!includeHistory) {
+      delete exported.descriptionHistory;
+    }
+
+    // Optionally exclude plan spec
+    if (!includePlanSpec) {
+      delete exported.planSpec;
+    }
+
+    return exported;
+  }
+
+  /**
+   * Extract a Feature from import data (handles both raw and wrapped formats)
+   */
+  private extractFeatureFromImport(data: Feature | FeatureExport): Feature | null {
+    if (!data || typeof data !== 'object') {
+      return null;
+    }
+
+    // Check if it's a FeatureExport wrapper
+    if ('version' in data && 'feature' in data && 'exportedAt' in data) {
+      const exportData = data as FeatureExport;
+      return exportData.feature;
+    }
+
+    // Assume it's a raw Feature
+    return data as Feature;
+  }
+
+  /**
+   * Check if parsed data is a bulk export
+   */
+  isBulkExport(data: unknown): data is BulkExportResult {
+    if (!data || typeof data !== 'object') {
+      return false;
+    }
+    const obj = data as Record<string, unknown>;
+    return 'version' in obj && 'features' in obj && Array.isArray(obj.features);
+  }
+
+  /**
+   * Check if parsed data is a single FeatureExport
+   */
+  isFeatureExport(data: unknown): data is FeatureExport {
+    if (!data || typeof data !== 'object') {
+      return false;
+    }
+    const obj = data as Record<string, unknown>;
+    return (
+      'version' in obj &&
+      'feature' in obj &&
+      'exportedAt' in obj &&
+      typeof obj.feature === 'object' &&
+      obj.feature !== null &&
+      'id' in (obj.feature as Record<string, unknown>)
+    );
+  }
+
+  /**
+   * Check if parsed data is a raw Feature
+   */
+  isRawFeature(data: unknown): data is Feature {
+    if (!data || typeof data !== 'object') {
+      return false;
+    }
+    const obj = data as Record<string, unknown>;
+    // A raw feature has 'id' but not the 'version' + 'feature' wrapper of FeatureExport
+    return 'id' in obj && !('feature' in obj && 'version' in obj);
+  }
+
+  /**
+   * Validate a feature has required fields
+   */
+  private validateFeature(feature: Feature): string[] {
+    const errors: string[] = [];
+
+    if (!feature.description && !feature.title) {
+      errors.push('Feature must have at least a title or description');
+    }
+
+    if (!feature.category) {
+      errors.push('Feature must have a category');
+    }
+
+    return errors;
+  }
+
+  /**
+   * Serialize export data to string (handles both single feature and bulk exports)
+   */
+  private serialize<T extends FeatureExport | BulkExportResult>(
+    data: T,
+    format: ExportFormat,
+    prettyPrint: boolean
+  ): string {
+    if (format === 'yaml') {
+      return yamlStringify(data, {
+        indent: 2,
+        lineWidth: 120,
+      });
+    }
+
+    return prettyPrint ? JSON.stringify(data, null, 2) : JSON.stringify(data);
+  }
+}
+
+// Singleton instance
+let featureExportServiceInstance: FeatureExportService | null = null;
+
+/**
+ * Get the singleton feature export service instance
+ */
+export function getFeatureExportService(): FeatureExportService {
+  if (!featureExportServiceInstance) {
+    featureExportServiceInstance = new FeatureExportService();
+  }
+  return featureExportServiceInstance;
+}
diff --git a/temp_repo/apps/server/src/services/feature-loader.ts b/temp_repo/apps/server/src/services/feature-loader.ts
new file mode 100644
index 0000000000000000000000000000000000000000..31eca4a7a86089147ab68eae9bd512e6c100ced2
--- /dev/null
+++ b/temp_repo/apps/server/src/services/feature-loader.ts
@@ -0,0 +1,623 @@
+/**
+ * Feature Loader - Handles loading and managing features from individual feature folders
+ * Each feature is stored in .automaker/features/{featureId}/feature.json
+ */
+
+import path from 'path';
+import type { Feature, DescriptionHistoryEntry } from '@automaker/types';
+import {
+  createLogger,
+  atomicWriteJson,
+  readJsonWithRecovery,
+  logRecoveryWarning,
+  DEFAULT_BACKUP_COUNT,
+} from '@automaker/utils';
+import * as secureFs from '../lib/secure-fs.js';
+import {
+  getFeaturesDir,
+  getFeatureDir,
+  getFeatureImagesDir,
+  getAppSpecPath,
+  ensureAutomakerDir,
+} from '@automaker/platform';
+import { addImplementedFeature, type ImplementedFeature } from '../lib/xml-extractor.js';
+
+const logger = createLogger('FeatureLoader');
+
+// Re-export Feature type for convenience
+export type { Feature };
+
+export class FeatureLoader {
+  /**
+   * Get the features directory path
+   */
+  getFeaturesDir(projectPath: string): string {
+    return getFeaturesDir(projectPath);
+  }
+
+  /**
+   * Get the images directory path for a feature
+   */
+  getFeatureImagesDir(projectPath: string, featureId: string): string {
+    return getFeatureImagesDir(projectPath, featureId);
+  }
+
+  /**
+   * Delete images that were removed from a feature
+   */
+  private async deleteOrphanedImages(
+    projectPath: string,
+    oldPaths: Array<string | { path: string; [key: string]: unknown }> | undefined,
+    newPaths: Array<string | { path: string; [key: string]: unknown }> | undefined
+  ): Promise<void> {
+    if (!oldPaths || oldPaths.length === 0) {
+      return;
+    }
+
+    // Build sets of paths for comparison
+    const oldPathSet = new Set(oldPaths.map((p) => (typeof p === 'string' ? p : p.path)));
+    const newPathSet = new Set((newPaths || []).map((p) => (typeof p === 'string' ? p : p.path)));
+
+    // Find images that were removed
+    for (const oldPath of oldPathSet) {
+      if (!newPathSet.has(oldPath)) {
+        try {
+          // Paths are now absolute
+          await secureFs.unlink(oldPath);
+          logger.info(`Deleted orphaned image: ${oldPath}`);
+        } catch (error) {
+          // Ignore errors when deleting (file may already be gone)
+          logger.warn(`Failed to delete image: ${oldPath}`, error);
+        }
+      }
+    }
+  }
+
+  /**
+   * Copy images from temp directory to feature directory and update paths
+   */
+  private async migrateImages(
+    projectPath: string,
+    featureId: string,
+    imagePaths?: Array<string | { path: string; [key: string]: unknown }>
+  ): Promise<Array<string | { path: string; [key: string]: unknown }> | undefined> {
+    if (!imagePaths || imagePaths.length === 0) {
+      return imagePaths;
+    }
+
+    const featureImagesDir = this.getFeatureImagesDir(projectPath, featureId);
+    await secureFs.mkdir(featureImagesDir, { recursive: true });
+
+    const updatedPaths: Array<string | { path: string; [key: string]: unknown }> = [];
+
+    for (const imagePath of imagePaths) {
+      try {
+        const originalPath = typeof imagePath === 'string' ? imagePath : imagePath.path;
+
+        // Skip if already in feature directory (already absolute path in external storage)
+        if (originalPath.includes(`/features/${featureId}/images/`)) {
+          updatedPaths.push(imagePath);
+          continue;
+        }
+
+        // Resolve the full path
+        const fullOriginalPath = path.isAbsolute(originalPath)
+          ? originalPath
+          : path.join(projectPath, originalPath);
+
+        // Check if file exists
+        try {
+          await secureFs.access(fullOriginalPath);
+        } catch {
+          logger.warn(`Image not found, skipping: ${fullOriginalPath}`);
+          continue;
+        }
+
+        // Get filename and create new path in external storage
+        const filename = path.basename(originalPath);
+        const newPath = path.join(featureImagesDir, filename);
+
+        // Copy the file
+        await secureFs.copyFile(fullOriginalPath, newPath);
+        logger.info(`Copied image: ${originalPath} -> ${newPath}`);
+
+        // Try to delete the original temp file
+        try {
+          await secureFs.unlink(fullOriginalPath);
+        } catch {
+          // Ignore errors when deleting temp file
+        }
+
+        // Update the path in the result (use absolute path)
+        if (typeof imagePath === 'string') {
+          updatedPaths.push(newPath);
+        } else {
+          updatedPaths.push({ ...imagePath, path: newPath });
+        }
+      } catch (error) {
+        logger.error(`Failed to migrate image:`, error);
+        // Rethrow error to let caller decide how to handle it
+        // Keeping original path could lead to broken references
+        throw error;
+      }
+    }
+
+    return updatedPaths;
+  }
+
+  /**
+   * Get the path to a specific feature folder
+   */
+  getFeatureDir(projectPath: string, featureId: string): string {
+    return getFeatureDir(projectPath, featureId);
+  }
+
+  /**
+   * Get the path to a feature's feature.json file
+   */
+  getFeatureJsonPath(projectPath: string, featureId: string): string {
+    return path.join(this.getFeatureDir(projectPath, featureId), 'feature.json');
+  }
+
+  /**
+   * Get the path to a feature's agent-output.md file
+   */
+  getAgentOutputPath(projectPath: string, featureId: string): string {
+    return path.join(this.getFeatureDir(projectPath, featureId), 'agent-output.md');
+  }
+
+  /**
+   * Get the path to a feature's raw-output.jsonl file
+   */
+  getRawOutputPath(projectPath: string, featureId: string): string {
+    return path.join(this.getFeatureDir(projectPath, featureId), 'raw-output.jsonl');
+  }
+
+  /**
+   * Generate a new feature ID
+   */
+  generateFeatureId(): string {
+    return `feature-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+  }
+
+  /**
+   * Get all features for a project
+   */
+  async getAll(projectPath: string): Promise<Feature[]> {
+    try {
+      const featuresDir = this.getFeaturesDir(projectPath);
+
+      // Check if features directory exists
+      try {
+        await secureFs.access(featuresDir);
+      } catch {
+        return [];
+      }
+
+      // Read all feature directories
+      // secureFs.readdir returns Dirent[] but typed as generic; cast to access isDirectory()
+      const entries = (await secureFs.readdir(featuresDir, {
+        withFileTypes: true,
+      })) as import('fs').Dirent[];
+      const featureDirs = entries.filter((entry) => entry.isDirectory());
+
+      // Load all features concurrently with automatic recovery from backups
+      const featurePromises = featureDirs.map(async (dir) => {
+        const featureId = dir.name;
+        const featureJsonPath = this.getFeatureJsonPath(projectPath, featureId);
+
+        // Use recovery-enabled read to handle corrupted files
+        const result = await readJsonWithRecovery<Feature | null>(featureJsonPath, null, {
+          maxBackups: DEFAULT_BACKUP_COUNT,
+          autoRestore: true,
+        });
+
+        logRecoveryWarning(result, `Feature ${featureId}`, logger);
+
+        const feature = result.data;
+
+        if (!feature) {
+          return null;
+        }
+
+        if (!feature.id) {
+          logger.warn(`Feature ${featureId} missing required 'id' field, skipping`);
+          return null;
+        }
+
+        // Clear transient runtime flag - titleGenerating is only meaningful during
+        // the current session's async title generation. If it was persisted (e.g.,
+        // app closed before generation completed), it would cause the UI to show
+        // "Generating title..." indefinitely.
+        if (feature.titleGenerating) {
+          delete feature.titleGenerating;
+        }
+
+        return feature;
+      });
+
+      const results = await Promise.all(featurePromises);
+      const features = results.filter((f): f is Feature => f !== null);
+
+      // Sort by creation order (feature IDs contain timestamp)
+      features.sort((a, b) => {
+        const aTime = a.id ? parseInt(a.id.split('-')[1] || '0') : 0;
+        const bTime = b.id ? parseInt(b.id.split('-')[1] || '0') : 0;
+        return aTime - bTime;
+      });
+
+      return features;
+    } catch (error) {
+      logger.error('Failed to get all features:', error);
+      return [];
+    }
+  }
+
+  /**
+   * Normalize a title for comparison (case-insensitive, trimmed)
+   */
+  private normalizeTitle(title: string): string {
+    return title.toLowerCase().trim();
+  }
+
+  /**
+   * Find a feature by its title (case-insensitive match)
+   * @param projectPath - Path to the project
+   * @param title - Title to search for
+   * @returns The matching feature or null if not found
+   */
+  async findByTitle(projectPath: string, title: string): Promise<Feature | null> {
+    if (!title || !title.trim()) {
+      return null;
+    }
+
+    const normalizedTitle = this.normalizeTitle(title);
+    const features = await this.getAll(projectPath);
+
+    for (const feature of features) {
+      if (feature.title && this.normalizeTitle(feature.title) === normalizedTitle) {
+        return feature;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Check if a title already exists on another feature (for duplicate detection)
+   * @param projectPath - Path to the project
+   * @param title - Title to check
+   * @param excludeFeatureId - Optional feature ID to exclude from the check (for updates)
+   * @returns The duplicate feature if found, null otherwise
+   */
+  async findDuplicateTitle(
+    projectPath: string,
+    title: string,
+    excludeFeatureId?: string
+  ): Promise<Feature | null> {
+    if (!title || !title.trim()) {
+      return null;
+    }
+
+    const normalizedTitle = this.normalizeTitle(title);
+    const features = await this.getAll(projectPath);
+
+    for (const feature of features) {
+      // Skip the feature being updated (if provided)
+      if (excludeFeatureId && feature.id === excludeFeatureId) {
+        continue;
+      }
+
+      if (feature.title && this.normalizeTitle(feature.title) === normalizedTitle) {
+        return feature;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Get a single feature by ID
+   * Uses automatic recovery from backups if the main file is corrupted
+   */
+  async get(projectPath: string, featureId: string): Promise<Feature | null> {
+    const featureJsonPath = this.getFeatureJsonPath(projectPath, featureId);
+
+    // Use recovery-enabled read to handle corrupted files
+    const result = await readJsonWithRecovery<Feature | null>(featureJsonPath, null, {
+      maxBackups: DEFAULT_BACKUP_COUNT,
+      autoRestore: true,
+    });
+
+    logRecoveryWarning(result, `Feature ${featureId}`, logger);
+
+    const feature = result.data;
+
+    // Clear transient runtime flag (same as in getAll)
+    if (feature?.titleGenerating) {
+      delete feature.titleGenerating;
+    }
+
+    return feature;
+  }
+
+  /**
+   * Create a new feature
+   */
+  async create(projectPath: string, featureData: Partial<Feature>): Promise<Feature> {
+    const featureId = featureData.id || this.generateFeatureId();
+    const featureDir = this.getFeatureDir(projectPath, featureId);
+    const featureJsonPath = this.getFeatureJsonPath(projectPath, featureId);
+
+    // Ensure automaker directory exists
+    await ensureAutomakerDir(projectPath);
+
+    // Create feature directory
+    await secureFs.mkdir(featureDir, { recursive: true });
+
+    // Migrate images from temp directory to feature directory
+    const migratedImagePaths = await this.migrateImages(
+      projectPath,
+      featureId,
+      featureData.imagePaths
+    );
+
+    // Initialize description history with the initial description
+    const initialHistory: DescriptionHistoryEntry[] = [];
+    if (featureData.description && featureData.description.trim()) {
+      initialHistory.push({
+        description: featureData.description,
+        timestamp: new Date().toISOString(),
+        source: 'initial',
+      });
+    }
+
+    // Ensure feature has required fields
+    const feature: Feature = {
+      category: featureData.category || 'Uncategorized',
+      description: featureData.description || '',
+      ...featureData,
+      id: featureId,
+      createdAt: featureData.createdAt || new Date().toISOString(),
+      imagePaths: migratedImagePaths,
+      descriptionHistory: initialHistory,
+    };
+
+    // Remove transient runtime fields before persisting to disk.
+    // titleGenerating is UI-only state that tracks in-flight async title generation.
+    // Persisting it can cause cards to show "Generating title..." indefinitely
+    // if the app restarts before generation completes.
+    const featureToWrite = { ...feature };
+    delete featureToWrite.titleGenerating;
+
+    // Write feature.json atomically with backup support
+    await atomicWriteJson(featureJsonPath, featureToWrite, { backupCount: DEFAULT_BACKUP_COUNT });
+
+    logger.info(`Created feature ${featureId}`);
+    return feature;
+  }
+
+  /**
+   * Update a feature (partial updates supported)
+   * @param projectPath - Path to the project
+   * @param featureId - ID of the feature to update
+   * @param updates - Partial feature updates
+   * @param descriptionHistorySource - Source of description change ('enhance' or 'edit')
+   * @param enhancementMode - Enhancement mode if source is 'enhance'
+   * @param preEnhancementDescription - Description before enhancement (for restoring original)
+   */
+  async update(
+    projectPath: string,
+    featureId: string,
+    updates: Partial<Feature>,
+    descriptionHistorySource?: 'enhance' | 'edit',
+    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer',
+    preEnhancementDescription?: string
+  ): Promise<Feature> {
+    const feature = await this.get(projectPath, featureId);
+    if (!feature) {
+      throw new Error(`Feature ${featureId} not found`);
+    }
+
+    // Handle image path changes
+    let updatedImagePaths = updates.imagePaths;
+    if (updates.imagePaths !== undefined) {
+      // Delete orphaned images (images that were removed)
+      await this.deleteOrphanedImages(projectPath, feature.imagePaths, updates.imagePaths);
+
+      // Migrate any new images
+      updatedImagePaths = await this.migrateImages(projectPath, featureId, updates.imagePaths);
+    }
+
+    // Track description history if description changed
+    let updatedHistory = feature.descriptionHistory || [];
+    if (
+      updates.description !== undefined &&
+      updates.description !== feature.description &&
+      updates.description.trim()
+    ) {
+      const timestamp = new Date().toISOString();
+
+      // If this is an enhancement and we have the pre-enhancement description,
+      // add the original text to history first (so user can restore to it)
+      if (
+        descriptionHistorySource === 'enhance' &&
+        preEnhancementDescription &&
+        preEnhancementDescription.trim()
+      ) {
+        // Check if this pre-enhancement text is different from the last history entry
+        const lastEntry = updatedHistory[updatedHistory.length - 1];
+        if (!lastEntry || lastEntry.description !== preEnhancementDescription) {
+          const preEnhanceEntry: DescriptionHistoryEntry = {
+            description: preEnhancementDescription,
+            timestamp,
+            source: updatedHistory.length === 0 ? 'initial' : 'edit',
+          };
+          updatedHistory = [...updatedHistory, preEnhanceEntry];
+        }
+      }
+
+      // Add the new/enhanced description to history
+      const historyEntry: DescriptionHistoryEntry = {
+        description: updates.description,
+        timestamp,
+        source: descriptionHistorySource || 'edit',
+        ...(descriptionHistorySource === 'enhance' && enhancementMode ? { enhancementMode } : {}),
+      };
+      updatedHistory = [...updatedHistory, historyEntry];
+    }
+
+    // Merge updates
+    const updatedFeature: Feature = {
+      ...feature,
+      ...updates,
+      ...(updatedImagePaths !== undefined ? { imagePaths: updatedImagePaths } : {}),
+      descriptionHistory: updatedHistory,
+    };
+
+    // Remove transient runtime fields before persisting (same as create)
+    const featureToWrite = { ...updatedFeature };
+    delete featureToWrite.titleGenerating;
+
+    // Write back to file atomically with backup support
+    const featureJsonPath = this.getFeatureJsonPath(projectPath, featureId);
+    await atomicWriteJson(featureJsonPath, featureToWrite, { backupCount: DEFAULT_BACKUP_COUNT });
+
+    logger.info(`Updated feature ${featureId}`);
+    return updatedFeature;
+  }
+
+  /**
+   * Delete a feature
+   */
+  async delete(projectPath: string, featureId: string): Promise<boolean> {
+    try {
+      const featureDir = this.getFeatureDir(projectPath, featureId);
+      await secureFs.rm(featureDir, { recursive: true, force: true });
+      logger.info(`Deleted feature ${featureId}`);
+      return true;
+    } catch (error) {
+      logger.error(`Failed to delete feature ${featureId}:`, error);
+      return false;
+    }
+  }
+
+  /**
+   * Get agent output for a feature
+   */
+  async getAgentOutput(projectPath: string, featureId: string): Promise<string | null> {
+    try {
+      const agentOutputPath = this.getAgentOutputPath(projectPath, featureId);
+      const content = (await secureFs.readFile(agentOutputPath, 'utf-8')) as string;
+      return content;
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+        return null;
+      }
+      logger.error(`Failed to get agent output for ${featureId}:`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Get raw output for a feature (JSONL format for debugging)
+   */
+  async getRawOutput(projectPath: string, featureId: string): Promise<string | null> {
+    try {
+      const rawOutputPath = this.getRawOutputPath(projectPath, featureId);
+      const content = (await secureFs.readFile(rawOutputPath, 'utf-8')) as string;
+      return content;
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+        return null;
+      }
+      logger.error(`Failed to get raw output for ${featureId}:`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * Save agent output for a feature
+   */
+  async saveAgentOutput(projectPath: string, featureId: string, content: string): Promise<void> {
+    const featureDir = this.getFeatureDir(projectPath, featureId);
+    await secureFs.mkdir(featureDir, { recursive: true });
+
+    const agentOutputPath = this.getAgentOutputPath(projectPath, featureId);
+    await secureFs.writeFile(agentOutputPath, content, 'utf-8');
+  }
+
+  /**
+   * Delete agent output for a feature
+   */
+  async deleteAgentOutput(projectPath: string, featureId: string): Promise<void> {
+    try {
+      const agentOutputPath = this.getAgentOutputPath(projectPath, featureId);
+      await secureFs.unlink(agentOutputPath);
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+        throw error;
+      }
+    }
+  }
+
+  /**
+   * Sync a completed feature to the app_spec.txt implemented_features section
+   *
+   * When a feature is completed, this method adds it to the implemented_features
+   * section of the project's app_spec.txt file. This keeps the spec in sync
+   * with the actual state of the codebase.
+   *
+   * @param projectPath - Path to the project
+   * @param feature - The feature to sync (must have title or description)
+   * @param fileLocations - Optional array of file paths where the feature was implemented
+   * @returns True if the spec was updated, false if no spec exists or feature was skipped
+   */
+  async syncFeatureToAppSpec(
+    projectPath: string,
+    feature: Feature,
+    fileLocations?: string[]
+  ): Promise<boolean> {
+    try {
+      const appSpecPath = getAppSpecPath(projectPath);
+
+      // Read the current app_spec.txt
+      let specContent: string;
+      try {
+        specContent = (await secureFs.readFile(appSpecPath, 'utf-8')) as string;
+      } catch (error) {
+        if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+          logger.info(`No app_spec.txt found for project, skipping sync for feature ${feature.id}`);
+          return false;
+        }
+        throw error;
+      }
+
+      // Build the implemented feature entry
+      const featureName = feature.title || `Feature: ${feature.id}`;
+      const implementedFeature: ImplementedFeature = {
+        name: featureName,
+        description: feature.description,
+        ...(fileLocations && fileLocations.length > 0 ? { file_locations: fileLocations } : {}),
+      };
+
+      // Add the feature to the implemented_features section
+      const updatedSpecContent = addImplementedFeature(specContent, implementedFeature);
+
+      // Check if the content actually changed (feature might already exist)
+      if (updatedSpecContent === specContent) {
+        logger.info(`Feature "${featureName}" already exists in app_spec.txt, skipping`);
+        return false;
+      }
+
+      // Write the updated spec back to the file
+      await secureFs.writeFile(appSpecPath, updatedSpecContent, 'utf-8');
+
+      logger.info(`Synced feature "${featureName}" to app_spec.txt`);
+      return true;
+    } catch (error) {
+      logger.error(`Failed to sync feature ${feature.id} to app_spec.txt:`, error);
+      throw error;
+    }
+  }
+}
diff --git a/temp_repo/apps/server/src/services/feature-state-manager.ts b/temp_repo/apps/server/src/services/feature-state-manager.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4500489670c7507c4cf89174b064f911f38d88f1
--- /dev/null
+++ b/temp_repo/apps/server/src/services/feature-state-manager.ts
@@ -0,0 +1,874 @@
+/**
+ * FeatureStateManager - Manages feature status updates with proper persistence
+ *
+ * Extracted from AutoModeService to provide a standalone service for:
+ * - Updating feature status with proper disk persistence
+ * - Handling corrupted JSON with backup recovery
+ * - Emitting events AFTER successful persistence (prevent stale data on refresh)
+ * - Resetting stuck features after server restart
+ *
+ * Key behaviors:
+ * - Persist BEFORE emit (Pitfall 2 from research)
+ * - Use readJsonWithRecovery for all reads
+ * - markInterrupted preserves pipeline_* statuses
+ */
+
+import path from 'path';
+import type { Feature, FeatureStatusWithPipeline, ParsedTask, PlanSpec } from '@automaker/types';
+import { isPipelineStatus } from '@automaker/types';
+import {
+  atomicWriteJson,
+  readJsonWithRecovery,
+  logRecoveryWarning,
+  DEFAULT_BACKUP_COUNT,
+  createLogger,
+} from '@automaker/utils';
+import { getFeatureDir, getFeaturesDir } from '@automaker/platform';
+import * as secureFs from '../lib/secure-fs.js';
+import type { EventEmitter } from '../lib/events.js';
+import type { AutoModeEventType } from './typed-event-bus.js';
+import { getNotificationService } from './notification-service.js';
+import { FeatureLoader } from './feature-loader.js';
+import { pipelineService } from './pipeline-service.js';
+
+const logger = createLogger('FeatureStateManager');
+
+// Notification type constants
+const NOTIFICATION_TYPE_WAITING_APPROVAL = 'feature_waiting_approval';
+const NOTIFICATION_TYPE_VERIFIED = 'feature_verified';
+const NOTIFICATION_TYPE_FEATURE_ERROR = 'feature_error';
+const NOTIFICATION_TYPE_AUTO_MODE_ERROR = 'auto_mode_error';
+
+// Notification title constants
+const NOTIFICATION_TITLE_WAITING_APPROVAL = 'Feature Ready for Review';
+const NOTIFICATION_TITLE_VERIFIED = 'Feature Verified';
+const NOTIFICATION_TITLE_FEATURE_ERROR = 'Feature Failed';
+const NOTIFICATION_TITLE_AUTO_MODE_ERROR = 'Auto Mode Error';
+
+/**
+ * Auto-mode event payload structure
+ * This is the payload that comes with 'auto-mode:event' events
+ */
+interface AutoModeEventPayload {
+  type?: string;
+  featureId?: string;
+  featureName?: string;
+  passes?: boolean;
+  executionMode?: 'auto' | 'manual';
+  message?: string;
+  error?: string;
+  errorType?: string;
+  projectPath?: string;
+  /** Status field present when type === 'feature_status_changed' */
+  status?: string;
+}
+
+/**
+ * FeatureStateManager handles feature status updates with persistence guarantees.
+ *
+ * This service is responsible for:
+ * 1. Updating feature status and persisting to disk BEFORE emitting events
+ * 2. Handling corrupted JSON with automatic backup recovery
+ * 3. Resetting stuck features after server restarts
+ * 4. Managing justFinishedAt timestamps for UI badges
+ */
+export class FeatureStateManager {
+  private events: EventEmitter;
+  private featureLoader: FeatureLoader;
+  private unsubscribe: (() => void) | null = null;
+
+  constructor(events: EventEmitter, featureLoader: FeatureLoader) {
+    this.events = events;
+    this.featureLoader = featureLoader;
+
+    // Subscribe to error events to create notifications
+    this.unsubscribe = events.subscribe((type, payload) => {
+      if (type === 'auto-mode:event') {
+        this.handleAutoModeEventError(payload as AutoModeEventPayload);
+      }
+    });
+  }
+
+  /**
+   * Cleanup subscriptions
+   */
+  destroy(): void {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = null;
+    }
+  }
+
+  /**
+   * Load a feature from disk with recovery support
+   *
+   * @param projectPath - Path to the project
+   * @param featureId - ID of the feature to load
+   * @returns The feature data, or null if not found/recoverable
+   */
+  async loadFeature(projectPath: string, featureId: string): Promise<Feature | null> {
+    const featureDir = getFeatureDir(projectPath, featureId);
+    const featurePath = path.join(featureDir, 'feature.json');
+
+    try {
+      const result = await readJsonWithRecovery<Feature | null>(featurePath, null, {
+        maxBackups: DEFAULT_BACKUP_COUNT,
+        autoRestore: true,
+      });
+      logRecoveryWarning(result, `Feature ${featureId}`, logger);
+      return result.data;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Update feature status with proper persistence and event ordering.
+   *
+   * IMPORTANT: Persists to disk BEFORE emitting events to prevent stale data
+   * on client refresh (Pitfall 2 from research).
+   *
+   * @param projectPath - Path to the project
+   * @param featureId - ID of the feature to update
+   * @param status - New status value
+   */
+  async updateFeatureStatus(projectPath: string, featureId: string, status: string): Promise<void> {
+    const featureDir = getFeatureDir(projectPath, featureId);
+    const featurePath = path.join(featureDir, 'feature.json');
+
+    try {
+      // Use recovery-enabled read for corrupted file handling
+      const result = await readJsonWithRecovery<Feature | null>(featurePath, null, {
+        maxBackups: DEFAULT_BACKUP_COUNT,
+        autoRestore: true,
+      });
+
+      logRecoveryWarning(result, `Feature ${featureId}`, logger);
+
+      const feature = result.data;
+      if (!feature) {
+        logger.warn(`Feature ${featureId} not found or could not be recovered`);
+        return;
+      }
+
+      feature.status = status;
+      feature.updatedAt = new Date().toISOString();
+
+      // Handle justFinishedAt timestamp based on status
+      const shouldSetJustFinishedAt = status === 'waiting_approval';
+      const shouldClearJustFinishedAt = status !== 'waiting_approval';
+      if (shouldSetJustFinishedAt) {
+        feature.justFinishedAt = new Date().toISOString();
+      } else if (shouldClearJustFinishedAt) {
+        feature.justFinishedAt = undefined;
+      }
+
+      // Finalize in-progress tasks when reaching terminal states (waiting_approval or verified)
+      if (status === 'waiting_approval' || status === 'verified') {
+        this.finalizeInProgressTasks(feature, featureId, status);
+      }
+
+      // PERSIST BEFORE EMIT (Pitfall 2)
+      await atomicWriteJson(featurePath, feature, { backupCount: DEFAULT_BACKUP_COUNT });
+
+      // Emit status change event so UI can react without polling
+      this.emitAutoModeEvent('feature_status_changed', {
+        featureId,
+        projectPath,
+        status,
+      });
+
+      // Create notifications for important status changes
+      // Wrapped in try-catch so failures don't block syncFeatureToAppSpec below
+      try {
+        const notificationService = getNotificationService();
+        const displayName = this.getFeatureDisplayName(feature, featureId);
+
+        if (status === 'waiting_approval') {
+          await notificationService.createNotification({
+            type: NOTIFICATION_TYPE_WAITING_APPROVAL,
+            title: displayName,
+            message: NOTIFICATION_TITLE_WAITING_APPROVAL,
+            featureId,
+            projectPath,
+          });
+        } else if (status === 'verified') {
+          await notificationService.createNotification({
+            type: NOTIFICATION_TYPE_VERIFIED,
+            title: displayName,
+            message: NOTIFICATION_TITLE_VERIFIED,
+            featureId,
+            projectPath,
+          });
+        }
+      } catch (notificationError) {
+        logger.warn(`Failed to create notification for feature ${featureId}:`, notificationError);
+      }
+
+      // Sync completed/verified features to app_spec.txt
+      if (status === 'verified' || status === 'completed') {
+        try {
+          await this.featureLoader.syncFeatureToAppSpec(projectPath, feature);
+        } catch (syncError) {
+          // Log but don't fail the status update if sync fails
+          logger.warn(`Failed to sync feature ${featureId} to app_spec.txt:`, syncError);
+        }
+      }
+    } catch (error) {
+      logger.error(`Failed to update feature status for ${featureId}:`, error);
+    }
+  }
+
+  /**
+   * Mark a feature as interrupted due to server restart or other interruption.
+   *
+   * This is a convenience helper that updates the feature status to 'interrupted',
+   * indicating the feature was in progress but execution was disrupted (e.g., server
+   * restart, process crash, or manual stop). Features with this status can be
+   * resumed later using the resume functionality.
+   *
+   * Note: Features with pipeline_* statuses are preserved rather than overwritten
+   * to 'interrupted'. This ensures that resumePipelineFeature() can pick up from
+   * the correct pipeline step after a restart.
+   *
+   * @param projectPath - Path to the project
+   * @param featureId - ID of the feature to mark as interrupted
+   * @param reason - Optional reason for the interruption (logged for debugging)
+   */
+  async markFeatureInterrupted(
+    projectPath: string,
+    featureId: string,
+    reason?: string
+  ): Promise<void> {
+    // Load the feature to check its current status
+    const feature = await this.loadFeature(projectPath, featureId);
+    const currentStatus = feature?.status;
+
+    // Preserve pipeline_* statuses so resumePipelineFeature can resume from the correct step
+    if (isPipelineStatus(currentStatus)) {
+      logger.info(
+        `Feature ${featureId} was in ${currentStatus}; preserving pipeline status for resume`
+      );
+      return;
+    }
+
+    if (reason) {
+      logger.info(`Marking feature ${featureId} as interrupted: ${reason}`);
+    } else {
+      logger.info(`Marking feature ${featureId} as interrupted`);
+    }
+
+    await this.updateFeatureStatus(projectPath, featureId, 'interrupted');
+  }
+
+  /**
+   * Shared helper that scans features in a project directory and resets any stuck
+   * in transient states (in_progress, interrupted) back to resting states.
+   * Pipeline_* statuses are preserved so they can be resumed.
+   *
+   * Also resets:
+   * - generating planSpec status back to pending
+   * - in_progress tasks back to pending
+   *
+   * @param projectPath - The project path to scan
+   * @param callerLabel - Label for log messages (e.g., 'resetStuckFeatures', 'reconcileAllFeatureStates')
+   * @returns Object with reconciledFeatures (id + status info), reconciledCount, and scanned count
+   */
+  private async scanAndResetFeatures(
+    projectPath: string,
+    callerLabel: string
+  ): Promise<{
+    reconciledFeatures: Array<{
+      id: string;
+      previousStatus: string | undefined;
+      newStatus: string | undefined;
+    }>;
+    reconciledFeatureIds: string[];
+    reconciledCount: number;
+    scanned: number;
+  }> {
+    const featuresDir = getFeaturesDir(projectPath);
+    let scanned = 0;
+    let reconciledCount = 0;
+    const reconciledFeatureIds: string[] = [];
+    const reconciledFeatures: Array<{
+      id: string;
+      previousStatus: string | undefined;
+      newStatus: string | undefined;
+    }> = [];
+
+    try {
+      const entries = await secureFs.readdir(featuresDir, { withFileTypes: true });
+
+      for (const entry of entries) {
+        if (!entry.isDirectory()) continue;
+
+        scanned++;
+        const featurePath = path.join(featuresDir, entry.name, 'feature.json');
+        const result = await readJsonWithRecovery<Feature | null>(featurePath, null, {
+          maxBackups: DEFAULT_BACKUP_COUNT,
+          autoRestore: true,
+        });
+
+        const feature = result.data;
+        if (!feature) continue;
+
+        let needsUpdate = false;
+        const originalStatus = feature.status;
+
+        // Reset features in active execution states back to a resting state
+        // After a server restart, no processes are actually running
+        const isActiveState = originalStatus === 'in_progress' || originalStatus === 'interrupted';
+
+        if (isActiveState) {
+          const hasApprovedPlan = feature.planSpec?.status === 'approved';
+          feature.status = hasApprovedPlan ? 'ready' : 'backlog';
+          needsUpdate = true;
+          logger.info(
+            `[${callerLabel}] Reset feature ${feature.id} from ${originalStatus} to ${feature.status}`
+          );
+        }
+
+        // Handle pipeline_* statuses separately: preserve them so they can be resumed
+        // but still count them as needing attention if they were stuck.
+        if (isPipelineStatus(originalStatus)) {
+          // We don't change the status, but we still want to reset planSpec/task states
+          // if they were stuck in transient generation/execution modes.
+          // No feature.status change here.
+          logger.debug(
+            `[${callerLabel}] Preserving pipeline status for feature ${feature.id}: ${originalStatus}`
+          );
+        }
+
+        // Reset generating planSpec status back to pending (spec generation was interrupted)
+        if (feature.planSpec?.status === 'generating') {
+          feature.planSpec.status = 'pending';
+          needsUpdate = true;
+          logger.info(
+            `[${callerLabel}] Reset feature ${feature.id} planSpec status from generating to pending`
+          );
+        }
+
+        // Reset any in_progress tasks back to pending (task execution was interrupted)
+        if (feature.planSpec?.tasks) {
+          for (const task of feature.planSpec.tasks) {
+            if (task.status === 'in_progress') {
+              task.status = 'pending';
+              needsUpdate = true;
+              logger.info(
+                `[${callerLabel}] Reset task ${task.id} for feature ${feature.id} from in_progress to pending`
+              );
+              // Clear currentTaskId if it points to this reverted task
+              if (feature.planSpec?.currentTaskId === task.id) {
+                feature.planSpec.currentTaskId = undefined;
+                logger.info(
+                  `[${callerLabel}] Cleared planSpec.currentTaskId for feature ${feature.id} (was pointing to reverted task ${task.id})`
+                );
+              }
+            }
+          }
+        }
+
+        if (needsUpdate) {
+          feature.updatedAt = new Date().toISOString();
+          await atomicWriteJson(featurePath, feature, { backupCount: DEFAULT_BACKUP_COUNT });
+          reconciledCount++;
+          reconciledFeatureIds.push(feature.id);
+          reconciledFeatures.push({
+            id: feature.id,
+            previousStatus: originalStatus,
+            newStatus: feature.status,
+          });
+        }
+      }
+    } catch (error) {
+      // If features directory doesn't exist, that's fine
+      if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+        logger.error(`[${callerLabel}] Error resetting features for ${projectPath}:`, error);
+      }
+    }
+
+    return { reconciledFeatures, reconciledFeatureIds, reconciledCount, scanned };
+  }
+
+  /**
+   * Reset features that were stuck in transient states due to server crash.
+   * Called when auto mode is enabled to clean up from previous session.
+   *
+   * Resets:
+   * - in_progress features back to ready (if has plan) or backlog (if no plan)
+   * - interrupted features back to ready (if has plan) or backlog (if no plan)
+   * - generating planSpec status back to pending
+   * - in_progress tasks back to pending
+   *
+   * Preserves:
+   * - pipeline_* statuses (so resumePipelineFeature can resume from correct step)
+   *
+   * @param projectPath - The project path to reset features for
+   */
+  async resetStuckFeatures(projectPath: string): Promise<void> {
+    const { reconciledCount, scanned } = await this.scanAndResetFeatures(
+      projectPath,
+      'resetStuckFeatures'
+    );
+
+    logger.info(
+      `[resetStuckFeatures] Scanned ${scanned} features, reset ${reconciledCount} features for ${projectPath}`
+    );
+  }
+
+  /**
+   * Reconcile all feature states on server startup.
+   *
+   * This method resets all features stuck in transient states (in_progress,
+   * interrupted, pipeline_*) and emits events so connected UI clients
+   * immediately reflect the corrected states.
+   *
+   * Should be called once during server initialization, before the UI is served,
+   * to ensure feature state consistency after any type of restart (clean, forced, crash).
+   *
+   * @param projectPath - The project path to reconcile features for
+   * @returns The number of features that were reconciled
+   */
+  async reconcileAllFeatureStates(projectPath: string): Promise<number> {
+    logger.info(`[reconcileAllFeatureStates] Starting reconciliation for ${projectPath}`);
+
+    const { reconciledFeatures, reconciledFeatureIds, reconciledCount, scanned } =
+      await this.scanAndResetFeatures(projectPath, 'reconcileAllFeatureStates');
+
+    // Emit per-feature status change events so UI invalidates its cache
+    for (const { id, previousStatus, newStatus } of reconciledFeatures) {
+      this.emitAutoModeEvent('feature_status_changed', {
+        featureId: id,
+        projectPath,
+        status: newStatus,
+        previousStatus,
+        reason: 'server_restart_reconciliation',
+      });
+    }
+
+    // Emit a bulk reconciliation event for the UI
+    if (reconciledCount > 0) {
+      this.emitAutoModeEvent('features_reconciled', {
+        projectPath,
+        reconciledCount,
+        reconciledFeatureIds,
+        message: `Reconciled ${reconciledCount} feature(s) after server restart`,
+      });
+    }
+
+    logger.info(
+      `[reconcileAllFeatureStates] Scanned ${scanned} features, reconciled ${reconciledCount} for ${projectPath}`
+    );
+
+    return reconciledCount;
+  }
+
+  /**
+   * Update the planSpec of a feature with partial updates.
+   *
+   * @param projectPath - The project path
+   * @param featureId - The feature ID
+   * @param updates - Partial PlanSpec updates to apply
+   */
+  async updateFeaturePlanSpec(
+    projectPath: string,
+    featureId: string,
+    updates: Partial<PlanSpec>
+  ): Promise<void> {
+    const featureDir = getFeatureDir(projectPath, featureId);
+    const featurePath = path.join(featureDir, 'feature.json');
+
+    try {
+      const result = await readJsonWithRecovery<Feature | null>(featurePath, null, {
+        maxBackups: DEFAULT_BACKUP_COUNT,
+        autoRestore: true,
+      });
+
+      logRecoveryWarning(result, `Feature ${featureId}`, logger);
+
+      const feature = result.data;
+      if (!feature) {
+        logger.warn(`Feature ${featureId} not found or could not be recovered`);
+        return;
+      }
+
+      // Initialize planSpec if it doesn't exist
+      if (!feature.planSpec) {
+        feature.planSpec = {
+          status: 'pending',
+          version: 1,
+          reviewedByUser: false,
+        };
+      }
+
+      // Capture old content BEFORE applying updates for version comparison
+      const oldContent = feature.planSpec.content;
+
+      // Apply updates
+      Object.assign(feature.planSpec, updates);
+
+      // If content is being updated and it's different from old content, increment version
+      if (updates.content !== undefined && updates.content !== oldContent) {
+        feature.planSpec.version = (feature.planSpec.version || 0) + 1;
+      }
+
+      feature.updatedAt = new Date().toISOString();
+
+      // PERSIST BEFORE EMIT
+      await atomicWriteJson(featurePath, feature, { backupCount: DEFAULT_BACKUP_COUNT });
+
+      // Emit event for UI update
+      this.emitAutoModeEvent('plan_spec_updated', {
+        featureId,
+        projectPath,
+        planSpec: feature.planSpec,
+      });
+    } catch (error) {
+      logger.error(`Failed to update planSpec for ${featureId}:`, error);
+    }
+  }
+
+  /**
+   * Save the extracted summary to a feature's summary field.
+   * This is called after agent execution completes to save a summary
+   * extracted from the agent's output using <summary> tags.
+   *
+   * For pipeline features (status starts with pipeline_), summaries are accumulated
+   * across steps with a header identifying each step. For non-pipeline features,
+   * the summary is replaced entirely.
+   *
+   * @param projectPath - The project path
+   * @param featureId - The feature ID
+   * @param summary - The summary text to save
+   */
+  async saveFeatureSummary(projectPath: string, featureId: string, summary: string): Promise<void> {
+    const featureDir = getFeatureDir(projectPath, featureId);
+    const featurePath = path.join(featureDir, 'feature.json');
+    const normalizedSummary = summary.trim();
+
+    try {
+      const result = await readJsonWithRecovery<Feature | null>(featurePath, null, {
+        maxBackups: DEFAULT_BACKUP_COUNT,
+        autoRestore: true,
+      });
+
+      logRecoveryWarning(result, `Feature ${featureId}`, logger);
+
+      const feature = result.data;
+      if (!feature) {
+        logger.warn(`Feature ${featureId} not found or could not be recovered`);
+        return;
+      }
+
+      if (!normalizedSummary) {
+        logger.debug(
+          `[saveFeatureSummary] Skipping empty summary for feature ${featureId} (status="${feature.status}")`
+        );
+        return;
+      }
+
+      // For pipeline features, accumulate summaries across steps
+      if (isPipelineStatus(feature.status)) {
+        // If we already have a non-phase summary (typically the initial implementation
+        // summary from in_progress), normalize it into a named phase before appending
+        // pipeline step summaries. This keeps the format consistent for UI phase parsing.
+        const implementationHeader = '### Implementation';
+        if (feature.summary && !feature.summary.trimStart().startsWith('### ')) {
+          feature.summary = `${implementationHeader}\n\n${feature.summary.trim()}`;
+        }
+
+        const stepName = await this.getPipelineStepName(projectPath, feature.status);
+        const stepHeader = `### ${stepName}`;
+        const stepSection = `${stepHeader}\n\n${normalizedSummary}`;
+
+        if (feature.summary) {
+          // Check if this step already exists in the summary (e.g., if retried)
+          // Use section splitting to only match real section boundaries, not text in body content
+          const separator = '\n\n---\n\n';
+          const sections = feature.summary.split(separator);
+          let replaced = false;
+          const updatedSections = sections.map((section) => {
+            if (section.startsWith(`${stepHeader}\n\n`)) {
+              replaced = true;
+              return stepSection;
+            }
+            return section;
+          });
+
+          if (replaced) {
+            feature.summary = updatedSections.join(separator);
+            logger.info(
+              `[saveFeatureSummary] Updated existing pipeline step summary for feature ${featureId}: step="${stepName}"`
+            );
+          } else {
+            // Append as a new section
+            feature.summary = `${feature.summary}${separator}${stepSection}`;
+            logger.info(
+              `[saveFeatureSummary] Appended new pipeline step summary for feature ${featureId}: step="${stepName}"`
+            );
+          }
+        } else {
+          feature.summary = stepSection;
+          logger.info(
+            `[saveFeatureSummary] Initialized pipeline summary for feature ${featureId}: step="${stepName}"`
+          );
+        }
+      } else {
+        feature.summary = normalizedSummary;
+      }
+
+      feature.updatedAt = new Date().toISOString();
+
+      // PERSIST BEFORE EMIT
+      await atomicWriteJson(featurePath, feature, { backupCount: DEFAULT_BACKUP_COUNT });
+
+      // Emit event for UI update
+      this.emitAutoModeEvent('auto_mode_summary', {
+        featureId,
+        projectPath,
+        summary: feature.summary,
+      });
+    } catch (error) {
+      logger.error(`Failed to save summary for ${featureId}:`, error);
+    }
+  }
+
+  /**
+   * Look up the pipeline step name from the current pipeline status.
+   *
+   * @param projectPath - The project path
+   * @param status - The current pipeline status (e.g., 'pipeline_abc123')
+   * @returns The step name, or a fallback based on the step ID
+   */
+  private async getPipelineStepName(projectPath: string, status: string): Promise<string> {
+    try {
+      const stepId = pipelineService.getStepIdFromStatus(status as FeatureStatusWithPipeline);
+      if (stepId) {
+        const step = await pipelineService.getStep(projectPath, stepId);
+        if (step) return step.name;
+      }
+    } catch (error) {
+      logger.debug(
+        `[getPipelineStepName] Failed to look up step name for status "${status}", using fallback:`,
+        error
+      );
+    }
+    // Fallback: derive a human-readable name from the status suffix
+    // e.g., 'pipeline_code_review' → 'Code Review'
+    const suffix = status.replace('pipeline_', '');
+    return suffix
+      .split('_')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+  }
+
+  /**
+   * Update the status of a specific task within planSpec.tasks
+   *
+   * @param projectPath - The project path
+   * @param featureId - The feature ID
+   * @param taskId - The task ID to update
+   * @param status - The new task status
+   */
+  async updateTaskStatus(
+    projectPath: string,
+    featureId: string,
+    taskId: string,
+    status: ParsedTask['status'],
+    summary?: string
+  ): Promise<void> {
+    const featureDir = getFeatureDir(projectPath, featureId);
+    const featurePath = path.join(featureDir, 'feature.json');
+
+    try {
+      const result = await readJsonWithRecovery<Feature | null>(featurePath, null, {
+        maxBackups: DEFAULT_BACKUP_COUNT,
+        autoRestore: true,
+      });
+
+      logRecoveryWarning(result, `Feature ${featureId}`, logger);
+
+      const feature = result.data;
+      if (!feature || !feature.planSpec?.tasks) {
+        logger.warn(`Feature ${featureId} not found or has no tasks`);
+        return;
+      }
+
+      // Find and update the task
+      const task = feature.planSpec.tasks.find((t) => t.id === taskId);
+      if (task) {
+        task.status = status;
+        if (summary) {
+          task.summary = summary;
+        }
+        feature.updatedAt = new Date().toISOString();
+
+        // PERSIST BEFORE EMIT
+        await atomicWriteJson(featurePath, feature, { backupCount: DEFAULT_BACKUP_COUNT });
+
+        // Emit event for UI update
+        this.emitAutoModeEvent('auto_mode_task_status', {
+          featureId,
+          projectPath,
+          taskId,
+          status,
+          summary,
+          tasks: feature.planSpec.tasks,
+        });
+      } else {
+        const availableIds = feature.planSpec.tasks.map((t) => t.id).join(', ');
+        logger.warn(
+          `[updateTaskStatus] Task ${taskId} not found in feature ${featureId} (${projectPath}). Available task IDs: [${availableIds}]`
+        );
+      }
+    } catch (error) {
+      logger.error(`Failed to update task ${taskId} status for ${featureId}:`, error);
+    }
+  }
+
+  /**
+   * Get the display name for a feature, preferring title over feature ID.
+   * Empty string titles are treated as missing and fallback to featureId.
+   *
+   * @param feature - The feature to get the display name for
+   * @param featureId - The feature ID to use as fallback
+   * @returns The display name (title or feature ID)
+   */
+  private getFeatureDisplayName(feature: Feature, featureId: string): string {
+    // Use title if it's a non-empty string, otherwise fallback to featureId
+    return feature.title && feature.title.trim() ? feature.title : featureId;
+  }
+
+  /**
+   * Handle auto-mode events to create error notifications.
+   * This listens for error events and creates notifications to alert users.
+   */
+  private async handleAutoModeEventError(payload: AutoModeEventPayload): Promise<void> {
+    if (!payload.type) return;
+
+    // Only handle error events
+    if (payload.type !== 'auto_mode_error' && payload.type !== 'auto_mode_feature_complete') {
+      return;
+    }
+
+    // For auto_mode_feature_complete, only notify on failures (passes === false)
+    if (payload.type === 'auto_mode_feature_complete' && payload.passes !== false) {
+      return;
+    }
+
+    // Get project path - handle different event formats
+    const projectPath = payload.projectPath;
+    if (!projectPath) return;
+
+    try {
+      const notificationService = getNotificationService();
+
+      // Determine notification type and title based on event type
+      // Only auto_mode_feature_complete events should create feature_error notifications
+      const isFeatureError = payload.type === 'auto_mode_feature_complete';
+      const notificationType = isFeatureError
+        ? NOTIFICATION_TYPE_FEATURE_ERROR
+        : NOTIFICATION_TYPE_AUTO_MODE_ERROR;
+      const notificationTitle = isFeatureError
+        ? NOTIFICATION_TITLE_FEATURE_ERROR
+        : NOTIFICATION_TITLE_AUTO_MODE_ERROR;
+
+      // Build error message
+      let errorMessage = payload.message || 'An error occurred';
+      if (payload.error) {
+        errorMessage = payload.error;
+      }
+
+      // Use feature title as notification title when available, fall back to gesture name
+      let title = notificationTitle;
+      if (payload.featureId) {
+        const displayName = await this.getFeatureDisplayNameById(projectPath, payload.featureId);
+        if (displayName) {
+          title = displayName;
+          errorMessage = `${notificationTitle}: ${errorMessage}`;
+        }
+      }
+
+      await notificationService.createNotification({
+        type: notificationType,
+        title,
+        message: errorMessage,
+        featureId: payload.featureId,
+        projectPath,
+      });
+    } catch (notificationError) {
+      logger.warn(`Failed to create error notification:`, notificationError);
+    }
+  }
+
+  /**
+   * Get feature display name by loading the feature directly.
+   */
+  private async getFeatureDisplayNameById(
+    projectPath: string,
+    featureId: string
+  ): Promise<string | null> {
+    const feature = await this.loadFeature(projectPath, featureId);
+    if (!feature) return null;
+    return this.getFeatureDisplayName(feature, featureId);
+  }
+
+  /**
+   * Finalize in-progress tasks when a feature reaches a terminal state.
+   * Marks in_progress tasks as completed but leaves pending tasks untouched.
+   *
+   * @param feature - The feature whose tasks should be finalized
+   * @param featureId - The feature ID for logging
+   * @param targetStatus - The status the feature is transitioning to
+   */
+  private finalizeInProgressTasks(feature: Feature, featureId: string, targetStatus: string): void {
+    if (!feature.planSpec?.tasks) {
+      return;
+    }
+
+    let tasksFinalized = 0;
+    let tasksPending = 0;
+
+    for (const task of feature.planSpec.tasks) {
+      if (task.status === 'in_progress') {
+        task.status = 'completed';
+        tasksFinalized++;
+      } else if (task.status === 'pending') {
+        tasksPending++;
+      }
+    }
+
+    // Update tasksCompleted count to reflect actual completed tasks
+    feature.planSpec.tasksCompleted = feature.planSpec.tasks.filter(
+      (t) => t.status === 'completed'
+    ).length;
+    feature.planSpec.currentTaskId = undefined;
+
+    if (tasksFinalized > 0) {
+      logger.info(
+        `[updateFeatureStatus] Finalized ${tasksFinalized} in_progress tasks for feature ${featureId} moving to ${targetStatus}`
+      );
+    }
+
+    if (tasksPending > 0) {
+      logger.warn(
+        `[updateFeatureStatus] Feature ${featureId} moving to ${targetStatus} with ${tasksPending} pending (never started) tasks out of ${feature.planSpec.tasks.length} total`
+      );
+    }
+  }
+
+  /**
+   * Emit an auto-mode event via the event emitter
+   *
+   * @param eventType - The event type (e.g., 'auto_mode_summary')
+   * @param data - The event payload
+   */
+  private emitAutoModeEvent(eventType: AutoModeEventType, data: Record<string, unknown>): void {
+    // Wrap the event in auto-mode:event format expected by the client
+    this.events.emit('auto-mode:event', {
+      type: eventType,
+      ...data,
+    });
+  }
+}
diff --git a/temp_repo/apps/server/src/services/gemini-usage-service.ts b/temp_repo/apps/server/src/services/gemini-usage-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fba8bda3403c3690a5b760396ec2d50239c9a2ac
--- /dev/null
+++ b/temp_repo/apps/server/src/services/gemini-usage-service.ts
@@ -0,0 +1,817 @@
+/**
+ * Gemini Usage Service
+ *
+ * Service for tracking Gemini CLI usage and quota.
+ * Uses the internal Google Cloud quota API (same as CodexBar).
+ * See: https://github.com/steipete/CodexBar/blob/main/docs/gemini.md
+ *
+ * OAuth credentials are extracted from the Gemini CLI installation,
+ * not hardcoded, to ensure compatibility with CLI updates.
+ */
+
+import { createLogger } from '@automaker/utils';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as os from 'os';
+import { execFileSync } from 'child_process';
+
+const logger = createLogger('GeminiUsage');
+
+// Quota API endpoint (internal Google Cloud API)
+const QUOTA_API_URL = 'https://cloudcode-pa.googleapis.com/v1internal:retrieveUserQuota';
+
+// Code Assist endpoint for getting project ID and tier info
+const CODE_ASSIST_URL = 'https://cloudcode-pa.googleapis.com/v1internal:loadCodeAssist';
+
+// Google OAuth endpoints for token refresh
+const GOOGLE_TOKEN_URL = 'https://oauth2.googleapis.com/token';
+
+/** Default timeout for fetch requests in milliseconds */
+const FETCH_TIMEOUT_MS = 10_000;
+
+/** TTL for cached credentials in milliseconds (5 minutes) */
+const CREDENTIALS_CACHE_TTL_MS = 5 * 60 * 1000;
+
+export interface GeminiQuotaBucket {
+  /** Model ID this quota applies to */
+  modelId: string;
+  /** Remaining fraction (0-1) */
+  remainingFraction: number;
+  /** ISO-8601 reset time */
+  resetTime: string;
+}
+
+/** Simplified quota info for a model tier (Flash or Pro) */
+export interface GeminiTierQuota {
+  /** Used percentage (0-100) */
+  usedPercent: number;
+  /** Remaining percentage (0-100) */
+  remainingPercent: number;
+  /** Reset time as human-readable string */
+  resetText?: string;
+  /** ISO-8601 reset time */
+  resetTime?: string;
+}
+
+export interface GeminiUsageData {
+  /** Whether authenticated via CLI */
+  authenticated: boolean;
+  /** Authentication method */
+  authMethod: 'cli_login' | 'api_key' | 'none';
+  /** Usage percentage (100 - remainingFraction * 100) - overall most constrained */
+  usedPercent: number;
+  /** Remaining percentage - overall most constrained */
+  remainingPercent: number;
+  /** Reset time as human-readable string */
+  resetText?: string;
+  /** ISO-8601 reset time */
+  resetTime?: string;
+  /** Model ID with lowest remaining quota */
+  constrainedModel?: string;
+  /** Flash tier quota (aggregated from all flash models) */
+  flashQuota?: GeminiTierQuota;
+  /** Pro tier quota (aggregated from all pro models) */
+  proQuota?: GeminiTierQuota;
+  /** Raw quota buckets for detailed view */
+  quotaBuckets?: GeminiQuotaBucket[];
+  /** When this data was last fetched */
+  lastUpdated: string;
+  /** Optional error message */
+  error?: string;
+}
+
+interface OAuthCredentials {
+  access_token?: string;
+  id_token?: string;
+  refresh_token?: string;
+  token_type?: string;
+  expiry_date?: number;
+  client_id?: string;
+  client_secret?: string;
+}
+
+interface OAuthClientCredentials {
+  clientId: string;
+  clientSecret: string;
+}
+
+interface QuotaResponse {
+  // The actual API returns 'buckets', not 'quotaBuckets'
+  buckets?: Array<{
+    modelId?: string;
+    remainingFraction?: number;
+    resetTime?: string;
+    tokenType?: string;
+  }>;
+  // Legacy field name (in case API changes)
+  quotaBuckets?: Array<{
+    modelId?: string;
+    remainingFraction?: number;
+    resetTime?: string;
+    tokenType?: string;
+  }>;
+}
+
+/**
+ * Gemini Usage Service
+ *
+ * Provides real usage/quota data for Gemini CLI users.
+ * Extracts OAuth credentials from the Gemini CLI installation.
+ */
+export class GeminiUsageService {
+  private cachedCredentials: OAuthCredentials | null = null;
+  private cachedCredentialsAt: number | null = null;
+  private cachedClientCredentials: OAuthClientCredentials | null = null;
+  private credentialsPath: string;
+  /** The actual path from which credentials were loaded (for write-back) */
+  private loadedCredentialsPath: string | null = null;
+
+  constructor() {
+    // Default credentials path for Gemini CLI
+    this.credentialsPath = path.join(os.homedir(), '.gemini', 'oauth_creds.json');
+  }
+
+  /**
+   * Check if Gemini CLI is authenticated
+   */
+  async isAvailable(): Promise<boolean> {
+    const creds = await this.loadCredentials();
+    return Boolean(creds?.access_token || creds?.refresh_token);
+  }
+
+  /**
+   * Fetch quota/usage data from Google Cloud API
+   */
+  async fetchUsageData(): Promise<GeminiUsageData> {
+    logger.info('[fetchUsageData] Starting...');
+
+    const creds = await this.loadCredentials();
+
+    if (!creds || (!creds.access_token && !creds.refresh_token)) {
+      logger.info('[fetchUsageData] No credentials found');
+      return {
+        authenticated: false,
+        authMethod: 'none',
+        usedPercent: 0,
+        remainingPercent: 100,
+        lastUpdated: new Date().toISOString(),
+        error: 'Not authenticated. Run "gemini auth login" to authenticate.',
+      };
+    }
+
+    try {
+      // Get a valid access token (refresh if needed)
+      const accessToken = await this.getValidAccessToken(creds);
+
+      if (!accessToken) {
+        return {
+          authenticated: false,
+          authMethod: 'none',
+          usedPercent: 0,
+          remainingPercent: 100,
+          lastUpdated: new Date().toISOString(),
+          error: 'Failed to obtain access token. Try running "gemini auth login" again.',
+        };
+      }
+
+      // First, get the project ID from loadCodeAssist endpoint
+      // This is required to get accurate quota data
+      let projectId: string | undefined;
+      try {
+        const codeAssistResponse = await fetch(CODE_ASSIST_URL, {
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({}),
+          signal: AbortSignal.timeout(FETCH_TIMEOUT_MS),
+        });
+
+        if (codeAssistResponse.ok) {
+          const codeAssistData = (await codeAssistResponse.json()) as {
+            cloudaicompanionProject?: string;
+            currentTier?: { id?: string; name?: string };
+          };
+          projectId = codeAssistData.cloudaicompanionProject;
+          logger.debug('[fetchUsageData] Got project ID:', projectId);
+        }
+      } catch (e) {
+        logger.debug('[fetchUsageData] Failed to get project ID:', e);
+      }
+
+      // Fetch quota from Google Cloud API
+      // Pass project ID to get accurate quota (without it, returns default 100%)
+      const response = await fetch(QUOTA_API_URL, {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(projectId ? { project: projectId } : {}),
+        signal: AbortSignal.timeout(FETCH_TIMEOUT_MS),
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text().catch(() => '');
+        logger.error('[fetchUsageData] Quota API error:', response.status, errorText);
+
+        // Still authenticated, but quota API failed
+        return {
+          authenticated: true,
+          authMethod: 'cli_login',
+          usedPercent: 0,
+          remainingPercent: 100,
+          lastUpdated: new Date().toISOString(),
+          error: `Quota API unavailable (${response.status})`,
+        };
+      }
+
+      const data = (await response.json()) as QuotaResponse;
+
+      // API returns 'buckets', with fallback to 'quotaBuckets' for compatibility
+      const apiBuckets = data.buckets || data.quotaBuckets;
+
+      logger.debug('[fetchUsageData] Raw buckets:', JSON.stringify(apiBuckets));
+
+      if (!apiBuckets || apiBuckets.length === 0) {
+        return {
+          authenticated: true,
+          authMethod: 'cli_login',
+          usedPercent: 0,
+          remainingPercent: 100,
+          lastUpdated: new Date().toISOString(),
+        };
+      }
+
+      // Group buckets into Flash and Pro tiers
+      // Flash: any model with "flash" in the name
+      // Pro: any model with "pro" in the name
+      let flashLowestRemaining = 1.0;
+      let flashResetTime: string | undefined;
+      let hasFlashModels = false;
+      let proLowestRemaining = 1.0;
+      let proResetTime: string | undefined;
+      let hasProModels = false;
+      let overallLowestRemaining = 1.0;
+      let constrainedModel: string | undefined;
+      let overallResetTime: string | undefined;
+
+      const quotaBuckets: GeminiQuotaBucket[] = apiBuckets.map((bucket) => {
+        const remaining = bucket.remainingFraction ?? 1.0;
+        const modelId = bucket.modelId?.toLowerCase() || '';
+
+        // Track overall lowest
+        if (remaining < overallLowestRemaining) {
+          overallLowestRemaining = remaining;
+          constrainedModel = bucket.modelId;
+          overallResetTime = bucket.resetTime;
+        }
+
+        // Group into Flash or Pro tier
+        if (modelId.includes('flash')) {
+          hasFlashModels = true;
+          if (remaining < flashLowestRemaining) {
+            flashLowestRemaining = remaining;
+            flashResetTime = bucket.resetTime;
+          }
+          // Also track reset time even if at 100%
+          if (!flashResetTime && bucket.resetTime) {
+            flashResetTime = bucket.resetTime;
+          }
+        } else if (modelId.includes('pro')) {
+          hasProModels = true;
+          if (remaining < proLowestRemaining) {
+            proLowestRemaining = remaining;
+            proResetTime = bucket.resetTime;
+          }
+          // Also track reset time even if at 100%
+          if (!proResetTime && bucket.resetTime) {
+            proResetTime = bucket.resetTime;
+          }
+        }
+
+        return {
+          modelId: bucket.modelId || 'unknown',
+          remainingFraction: remaining,
+          resetTime: bucket.resetTime || '',
+        };
+      });
+
+      const usedPercent = Math.round((1 - overallLowestRemaining) * 100);
+      const remainingPercent = Math.round(overallLowestRemaining * 100);
+
+      // Build tier quotas (only include if we found models for that tier)
+      const flashQuota: GeminiTierQuota | undefined = hasFlashModels
+        ? {
+            usedPercent: Math.round((1 - flashLowestRemaining) * 100),
+            remainingPercent: Math.round(flashLowestRemaining * 100),
+            resetText: flashResetTime ? this.formatResetTime(flashResetTime) : undefined,
+            resetTime: flashResetTime,
+          }
+        : undefined;
+
+      const proQuota: GeminiTierQuota | undefined = hasProModels
+        ? {
+            usedPercent: Math.round((1 - proLowestRemaining) * 100),
+            remainingPercent: Math.round(proLowestRemaining * 100),
+            resetText: proResetTime ? this.formatResetTime(proResetTime) : undefined,
+            resetTime: proResetTime,
+          }
+        : undefined;
+
+      return {
+        authenticated: true,
+        authMethod: 'cli_login',
+        usedPercent,
+        remainingPercent,
+        resetText: overallResetTime ? this.formatResetTime(overallResetTime) : undefined,
+        resetTime: overallResetTime,
+        constrainedModel,
+        flashQuota,
+        proQuota,
+        quotaBuckets,
+        lastUpdated: new Date().toISOString(),
+      };
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : 'Unknown error';
+      logger.error('[fetchUsageData] Error:', errorMsg);
+
+      return {
+        authenticated: true,
+        authMethod: 'cli_login',
+        usedPercent: 0,
+        remainingPercent: 100,
+        lastUpdated: new Date().toISOString(),
+        error: `Failed to fetch quota: ${errorMsg}`,
+      };
+    }
+  }
+
+  /**
+   * Load OAuth credentials from file.
+   * Implements TTL-based cache invalidation and file mtime checks.
+   */
+  private async loadCredentials(): Promise<OAuthCredentials | null> {
+    // Check if cached credentials are still valid
+    if (this.cachedCredentials && this.cachedCredentialsAt) {
+      const now = Date.now();
+      const cacheAge = now - this.cachedCredentialsAt;
+
+      if (cacheAge < CREDENTIALS_CACHE_TTL_MS) {
+        // Cache is within TTL - also check file mtime
+        const sourcePath = this.loadedCredentialsPath || this.credentialsPath;
+        try {
+          const stat = fs.statSync(sourcePath);
+          if (stat.mtimeMs <= this.cachedCredentialsAt) {
+            // File hasn't been modified since we cached - use cache
+            return this.cachedCredentials;
+          }
+          // File has been modified, fall through to re-read
+          logger.debug('[loadCredentials] File modified since cache, re-reading');
+        } catch {
+          // File doesn't exist or can't stat - use cache
+          return this.cachedCredentials;
+        }
+      } else {
+        // Cache TTL expired, discard
+        logger.debug('[loadCredentials] Cache TTL expired, re-reading');
+      }
+
+      // Invalidate cached credentials
+      this.cachedCredentials = null;
+      this.cachedCredentialsAt = null;
+    }
+
+    // Build unique possible paths (deduplicate)
+    const rawPaths = [
+      this.credentialsPath,
+      path.join(os.homedir(), '.config', 'gemini', 'oauth_creds.json'),
+    ];
+    const possiblePaths = [...new Set(rawPaths)];
+
+    for (const credPath of possiblePaths) {
+      try {
+        if (fs.existsSync(credPath)) {
+          const content = fs.readFileSync(credPath, 'utf8');
+          const creds = JSON.parse(content);
+
+          // Handle different credential formats
+          if (creds.access_token || creds.refresh_token) {
+            this.cachedCredentials = creds;
+            this.cachedCredentialsAt = Date.now();
+            this.loadedCredentialsPath = credPath;
+            logger.info('[loadCredentials] Loaded from:', credPath);
+            return creds;
+          }
+
+          // Some formats nest credentials under 'web' or 'installed'
+          if (creds.web?.client_id || creds.installed?.client_id) {
+            const clientCreds = creds.web || creds.installed;
+            this.cachedCredentials = {
+              client_id: clientCreds.client_id,
+              client_secret: clientCreds.client_secret,
+            };
+            this.cachedCredentialsAt = Date.now();
+            this.loadedCredentialsPath = credPath;
+            return this.cachedCredentials;
+          }
+        }
+      } catch (error) {
+        logger.debug('[loadCredentials] Failed to load from', credPath, error);
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Find the Gemini CLI binary path
+   */
+  private findGeminiBinaryPath(): string | null {
+    // Try 'which' on Unix-like systems, 'where' on Windows
+    const whichCmd = process.platform === 'win32' ? 'where' : 'which';
+    try {
+      const whichResult = execFileSync(whichCmd, ['gemini'], {
+        encoding: 'utf8',
+        timeout: 5000,
+        stdio: ['pipe', 'pipe', 'pipe'],
+      }).trim();
+      // 'where' on Windows may return multiple lines; take the first
+      const firstLine = whichResult.split('\n')[0]?.trim();
+      if (firstLine && fs.existsSync(firstLine)) {
+        return firstLine;
+      }
+    } catch {
+      // Ignore errors from 'which'/'where'
+    }
+
+    // Check common installation paths
+    const possiblePaths = [
+      // npm global installs
+      path.join(os.homedir(), '.npm-global', 'bin', 'gemini'),
+      '/usr/local/bin/gemini',
+      '/usr/bin/gemini',
+      // Homebrew
+      '/opt/homebrew/bin/gemini',
+      '/usr/local/opt/gemini/bin/gemini',
+      // nvm/fnm node installs
+      path.join(os.homedir(), '.nvm', 'versions', 'node'),
+      path.join(os.homedir(), '.fnm', 'node-versions'),
+      // Windows
+      path.join(os.homedir(), 'AppData', 'Roaming', 'npm', 'gemini.cmd'),
+      path.join(os.homedir(), 'AppData', 'Roaming', 'npm', 'gemini'),
+    ];
+
+    for (const p of possiblePaths) {
+      if (fs.existsSync(p)) {
+        return p;
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Extract OAuth client credentials from Gemini CLI installation
+   * This mimics CodexBar's approach of finding oauth2.js in the CLI
+   */
+  private extractOAuthClientCredentials(): OAuthClientCredentials | null {
+    if (this.cachedClientCredentials) {
+      return this.cachedClientCredentials;
+    }
+
+    const geminiBinary = this.findGeminiBinaryPath();
+    if (!geminiBinary) {
+      logger.debug('[extractOAuthClientCredentials] Gemini binary not found');
+      return null;
+    }
+
+    // Resolve symlinks to find actual location
+    let resolvedPath = geminiBinary;
+    try {
+      resolvedPath = fs.realpathSync(geminiBinary);
+    } catch {
+      // Use original path if realpath fails
+    }
+
+    const baseDir = path.dirname(resolvedPath);
+    logger.debug('[extractOAuthClientCredentials] Base dir:', baseDir);
+
+    // Possible locations for oauth2.js relative to the binary
+    // Based on CodexBar's search patterns
+    const possibleOAuth2Paths = [
+      // npm global install structure
+      path.join(
+        baseDir,
+        '..',
+        'lib',
+        'node_modules',
+        '@google',
+        'gemini-cli',
+        'dist',
+        'src',
+        'code_assist',
+        'oauth2.js'
+      ),
+      path.join(
+        baseDir,
+        '..',
+        'lib',
+        'node_modules',
+        '@google',
+        'gemini-cli-core',
+        'dist',
+        'src',
+        'code_assist',
+        'oauth2.js'
+      ),
+      // Homebrew/libexec structure
+      path.join(
+        baseDir,
+        '..',
+        'libexec',
+        'lib',
+        'node_modules',
+        '@google',
+        'gemini-cli',
+        'dist',
+        'src',
+        'code_assist',
+        'oauth2.js'
+      ),
+      path.join(
+        baseDir,
+        '..',
+        'libexec',
+        'lib',
+        'node_modules',
+        '@google',
+        'gemini-cli-core',
+        'dist',
+        'src',
+        'code_assist',
+        'oauth2.js'
+      ),
+      // Direct sibling
+      path.join(baseDir, '..', 'gemini-cli-core', 'dist', 'src', 'code_assist', 'oauth2.js'),
+      path.join(baseDir, '..', 'gemini-cli', 'dist', 'src', 'code_assist', 'oauth2.js'),
+      // Alternative node_modules structures
+      path.join(
+        baseDir,
+        '..',
+        '..',
+        'lib',
+        'node_modules',
+        '@google',
+        'gemini-cli',
+        'dist',
+        'src',
+        'code_assist',
+        'oauth2.js'
+      ),
+      path.join(
+        baseDir,
+        '..',
+        '..',
+        'lib',
+        'node_modules',
+        '@google',
+        'gemini-cli-core',
+        'dist',
+        'src',
+        'code_assist',
+        'oauth2.js'
+      ),
+    ];
+
+    for (const oauth2Path of possibleOAuth2Paths) {
+      try {
+        const normalizedPath = path.normalize(oauth2Path);
+        if (fs.existsSync(normalizedPath)) {
+          logger.debug('[extractOAuthClientCredentials] Found oauth2.js at:', normalizedPath);
+          const content = fs.readFileSync(normalizedPath, 'utf8');
+          const creds = this.parseOAuthCredentialsFromSource(content);
+          if (creds) {
+            this.cachedClientCredentials = creds;
+            logger.info('[extractOAuthClientCredentials] Extracted credentials from CLI');
+            return creds;
+          }
+        }
+      } catch (error) {
+        logger.debug('[extractOAuthClientCredentials] Failed to read', oauth2Path, error);
+      }
+    }
+
+    // Try finding oauth2.js by searching in node_modules (POSIX only)
+    if (process.platform !== 'win32') {
+      try {
+        const searchBase = path.resolve(baseDir, '..');
+        const searchResult = execFileSync(
+          'find',
+          [searchBase, '-name', 'oauth2.js', '-path', '*gemini*', '-path', '*code_assist*'],
+          { encoding: 'utf8', timeout: 5000, stdio: ['pipe', 'pipe', 'pipe'] }
+        )
+          .trim()
+          .split('\n')[0]; // Take first result
+
+        if (searchResult && fs.existsSync(searchResult)) {
+          logger.debug('[extractOAuthClientCredentials] Found via search:', searchResult);
+          const content = fs.readFileSync(searchResult, 'utf8');
+          const creds = this.parseOAuthCredentialsFromSource(content);
+          if (creds) {
+            this.cachedClientCredentials = creds;
+            logger.info(
+              '[extractOAuthClientCredentials] Extracted credentials from CLI (via search)'
+            );
+            return creds;
+          }
+        }
+      } catch {
+        // Ignore search errors
+      }
+    }
+
+    logger.warn('[extractOAuthClientCredentials] Could not extract credentials from CLI');
+    return null;
+  }
+
+  /**
+   * Parse OAuth client credentials from oauth2.js source code
+   */
+  private parseOAuthCredentialsFromSource(content: string): OAuthClientCredentials | null {
+    // Patterns based on CodexBar's regex extraction
+    // Look for: OAUTH_CLIENT_ID = "..." or const clientId = "..."
+    const clientIdPatterns = [
+      /OAUTH_CLIENT_ID\s*=\s*["']([^"']+)["']/,
+      /clientId\s*[:=]\s*["']([^"']+)["']/,
+      /client_id\s*[:=]\s*["']([^"']+)["']/,
+      /"clientId"\s*:\s*["']([^"']+)["']/,
+    ];
+
+    const clientSecretPatterns = [
+      /OAUTH_CLIENT_SECRET\s*=\s*["']([^"']+)["']/,
+      /clientSecret\s*[:=]\s*["']([^"']+)["']/,
+      /client_secret\s*[:=]\s*["']([^"']+)["']/,
+      /"clientSecret"\s*:\s*["']([^"']+)["']/,
+    ];
+
+    let clientId: string | null = null;
+    let clientSecret: string | null = null;
+
+    for (const pattern of clientIdPatterns) {
+      const match = content.match(pattern);
+      if (match && match[1]) {
+        clientId = match[1];
+        break;
+      }
+    }
+
+    for (const pattern of clientSecretPatterns) {
+      const match = content.match(pattern);
+      if (match && match[1]) {
+        clientSecret = match[1];
+        break;
+      }
+    }
+
+    if (clientId && clientSecret) {
+      logger.debug('[parseOAuthCredentialsFromSource] Found client credentials');
+      return { clientId, clientSecret };
+    }
+
+    return null;
+  }
+
+  /**
+   * Get a valid access token, refreshing if necessary
+   */
+  private async getValidAccessToken(creds: OAuthCredentials): Promise<string | null> {
+    // Check if current token is still valid (with 5 min buffer)
+    if (creds.access_token && creds.expiry_date) {
+      const now = Date.now();
+      if (creds.expiry_date > now + 5 * 60 * 1000) {
+        logger.debug('[getValidAccessToken] Using existing token (not expired)');
+        return creds.access_token;
+      }
+    }
+
+    // If we have a refresh token, try to refresh
+    if (creds.refresh_token) {
+      // Try to extract credentials from CLI first
+      const extractedCreds = this.extractOAuthClientCredentials();
+
+      // Use extracted credentials, then fall back to credentials in file
+      const clientId = extractedCreds?.clientId || creds.client_id;
+      const clientSecret = extractedCreds?.clientSecret || creds.client_secret;
+
+      if (!clientId || !clientSecret) {
+        logger.error('[getValidAccessToken] No client credentials available for token refresh');
+        // Return existing token even if expired - it might still work
+        return creds.access_token || null;
+      }
+
+      try {
+        logger.debug('[getValidAccessToken] Refreshing token...');
+        const response = await fetch(GOOGLE_TOKEN_URL, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          body: new URLSearchParams({
+            client_id: clientId,
+            client_secret: clientSecret,
+            refresh_token: creds.refresh_token,
+            grant_type: 'refresh_token',
+          }),
+          signal: AbortSignal.timeout(FETCH_TIMEOUT_MS),
+        });
+
+        if (response.ok) {
+          const data = (await response.json()) as { access_token?: string; expires_in?: number };
+          const newAccessToken = data.access_token;
+          const expiresIn = data.expires_in || 3600;
+
+          if (newAccessToken) {
+            logger.info('[getValidAccessToken] Token refreshed successfully');
+
+            // Update cached credentials
+            this.cachedCredentials = {
+              ...creds,
+              access_token: newAccessToken,
+              expiry_date: Date.now() + expiresIn * 1000,
+            };
+            this.cachedCredentialsAt = Date.now();
+
+            // Save back to the file the credentials were loaded from
+            const writePath = this.loadedCredentialsPath || this.credentialsPath;
+            try {
+              fs.writeFileSync(writePath, JSON.stringify(this.cachedCredentials, null, 2));
+            } catch (e) {
+              logger.debug('[getValidAccessToken] Could not save refreshed token:', e);
+            }
+
+            return newAccessToken;
+          }
+        } else {
+          const errorText = await response.text().catch(() => '');
+          logger.error('[getValidAccessToken] Token refresh failed:', response.status, errorText);
+        }
+      } catch (error) {
+        logger.error('[getValidAccessToken] Token refresh error:', error);
+      }
+    }
+
+    // Return current access token even if it might be expired
+    return creds.access_token || null;
+  }
+
+  /**
+   * Format reset time as human-readable string
+   */
+  private formatResetTime(isoTime: string): string {
+    try {
+      const resetDate = new Date(isoTime);
+      const now = new Date();
+      const diff = resetDate.getTime() - now.getTime();
+
+      if (diff < 0) {
+        return 'Resetting soon';
+      }
+
+      const minutes = Math.floor(diff / 60000);
+      const hours = Math.floor(minutes / 60);
+
+      if (hours > 0) {
+        const remainingMins = minutes % 60;
+        return remainingMins > 0 ? `Resets in ${hours}h ${remainingMins}m` : `Resets in ${hours}h`;
+      }
+
+      return `Resets in ${minutes}m`;
+    } catch {
+      return '';
+    }
+  }
+
+  /**
+   * Clear cached credentials (useful after logout)
+   */
+  clearCache(): void {
+    this.cachedCredentials = null;
+    this.cachedCredentialsAt = null;
+    this.cachedClientCredentials = null;
+  }
+}
+
+// Singleton instance
+let usageServiceInstance: GeminiUsageService | null = null;
+
+/**
+ * Get the singleton instance of GeminiUsageService
+ */
+export function getGeminiUsageService(): GeminiUsageService {
+  if (!usageServiceInstance) {
+    usageServiceInstance = new GeminiUsageService();
+  }
+  return usageServiceInstance;
+}
diff --git a/temp_repo/apps/server/src/services/github-pr-comment.service.ts b/temp_repo/apps/server/src/services/github-pr-comment.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b49d417a7a48b01f0067863607f0c984d9e2c275
--- /dev/null
+++ b/temp_repo/apps/server/src/services/github-pr-comment.service.ts
@@ -0,0 +1,103 @@
+/**
+ * GitHub PR Comment Service
+ *
+ * Domain logic for resolving/unresolving PR review threads via the
+ * GitHub GraphQL API. Extracted from the route handler so the route
+ * only deals with request/response plumbing.
+ */
+
+import { spawn } from 'child_process';
+import { execEnv } from '../lib/exec-utils.js';
+
+/** Timeout for GitHub GraphQL API requests in milliseconds */
+const GITHUB_API_TIMEOUT_MS = 30000;
+
+interface GraphQLMutationResponse {
+  data?: {
+    resolveReviewThread?: {
+      thread?: { isResolved: boolean; id: string } | null;
+    } | null;
+    unresolveReviewThread?: {
+      thread?: { isResolved: boolean; id: string } | null;
+    } | null;
+  };
+  errors?: Array<{ message: string }>;
+}
+
+/**
+ * Execute a GraphQL mutation to resolve or unresolve a review thread.
+ */
+export async function executeReviewThreadMutation(
+  projectPath: string,
+  threadId: string,
+  resolve: boolean
+): Promise<{ isResolved: boolean }> {
+  const mutationName = resolve ? 'resolveReviewThread' : 'unresolveReviewThread';
+
+  const mutation = `
+    mutation ${resolve ? 'ResolveThread' : 'UnresolveThread'}($threadId: ID!) {
+      ${mutationName}(input: { threadId: $threadId }) {
+        thread {
+          id
+          isResolved
+        }
+      }
+    }`;
+
+  const variables = { threadId };
+  const requestBody = JSON.stringify({ query: mutation, variables });
+
+  // Declare timeoutId before registering the error handler to avoid TDZ confusion
+  let timeoutId: NodeJS.Timeout | undefined;
+
+  const response = await new Promise<GraphQLMutationResponse>((res, rej) => {
+    const gh = spawn('gh', ['api', 'graphql', '--input', '-'], {
+      cwd: projectPath,
+      env: execEnv,
+    });
+
+    gh.on('error', (err) => {
+      clearTimeout(timeoutId);
+      rej(err);
+    });
+
+    timeoutId = setTimeout(() => {
+      gh.kill();
+      rej(new Error('GitHub GraphQL API request timed out'));
+    }, GITHUB_API_TIMEOUT_MS);
+
+    let stdout = '';
+    let stderr = '';
+    gh.stdout.on('data', (data: Buffer) => (stdout += data.toString()));
+    gh.stderr.on('data', (data: Buffer) => (stderr += data.toString()));
+
+    gh.on('close', (code) => {
+      clearTimeout(timeoutId);
+      if (code !== 0) {
+        return rej(new Error(`gh process exited with code ${code}: ${stderr}`));
+      }
+      try {
+        res(JSON.parse(stdout));
+      } catch (e) {
+        rej(e);
+      }
+    });
+
+    gh.stdin.write(requestBody);
+    gh.stdin.end();
+  });
+
+  if (response.errors && response.errors.length > 0) {
+    throw new Error(response.errors[0].message);
+  }
+
+  const threadData = resolve
+    ? response.data?.resolveReviewThread?.thread
+    : response.data?.unresolveReviewThread?.thread;
+
+  if (!threadData) {
+    throw new Error('No thread data returned from GitHub API');
+  }
+
+  return { isResolved: threadData.isResolved };
+}
diff --git a/temp_repo/apps/server/src/services/ideation-service.ts b/temp_repo/apps/server/src/services/ideation-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9bbea03b77f2c317d25b7bc63443d8e49c881928
--- /dev/null
+++ b/temp_repo/apps/server/src/services/ideation-service.ts
@@ -0,0 +1,1868 @@
+/**
+ * Ideation Service - Manages brainstorming sessions and ideas
+ * Provides AI-powered ideation, project analysis, and idea-to-feature conversion
+ */
+
+import path from 'path';
+import * as secureFs from '../lib/secure-fs.js';
+import type { EventEmitter } from '../lib/events.js';
+import type { Feature, ExecuteOptions } from '@automaker/types';
+import type {
+  Idea,
+  IdeaCategory,
+  IdeaStatus,
+  IdeationSession,
+  IdeationSessionWithMessages,
+  IdeationMessage,
+  ProjectAnalysisResult,
+  AnalysisSuggestion,
+  AnalysisFileInfo,
+  CreateIdeaInput,
+  UpdateIdeaInput,
+  StartSessionOptions,
+  SendMessageOptions,
+  PromptCategory,
+  IdeationPrompt,
+  IdeationContextSources,
+} from '@automaker/types';
+import { DEFAULT_IDEATION_CONTEXT_SOURCES } from '@automaker/types';
+import {
+  getIdeasDir,
+  getIdeaDir,
+  getIdeaPath,
+  getIdeationSessionsDir,
+  getIdeationSessionPath,
+  getIdeationAnalysisPath,
+  getAppSpecPath,
+  ensureIdeationDir,
+} from '@automaker/platform';
+import { extractXmlElements, extractImplementedFeatures } from '../lib/xml-extractor.js';
+import { createLogger, loadContextFiles, isAbortError } from '@automaker/utils';
+import { ProviderFactory } from '../providers/provider-factory.js';
+import type { SettingsService } from './settings-service.js';
+import type { FeatureLoader } from './feature-loader.js';
+import { createChatOptions, validateWorkingDirectory } from '../lib/sdk-options.js';
+import { resolveModelString, resolvePhaseModel } from '@automaker/model-resolver';
+import { stripProviderPrefix } from '@automaker/types';
+import {
+  getPromptCustomization,
+  getProviderByModelId,
+  getPhaseModelWithOverrides,
+} from '../lib/settings-helpers.js';
+
+const logger = createLogger('IdeationService');
+
+interface ActiveSession {
+  session: IdeationSession;
+  messages: IdeationMessage[];
+  isRunning: boolean;
+  abortController: AbortController | null;
+}
+
+export class IdeationService {
+  private activeSessions = new Map<string, ActiveSession>();
+  private events: EventEmitter;
+  private settingsService: SettingsService | null = null;
+  private featureLoader: FeatureLoader | null = null;
+
+  constructor(
+    events: EventEmitter,
+    settingsService?: SettingsService,
+    featureLoader?: FeatureLoader
+  ) {
+    this.events = events;
+    this.settingsService = settingsService ?? null;
+    this.featureLoader = featureLoader ?? null;
+  }
+
+  // ============================================================================
+  // Session Management
+  // ============================================================================
+
+  /**
+   * Start a new ideation session
+   */
+  async startSession(projectPath: string, options?: StartSessionOptions): Promise<IdeationSession> {
+    validateWorkingDirectory(projectPath);
+    await ensureIdeationDir(projectPath);
+
+    const sessionId = this.generateId('session');
+    const now = new Date().toISOString();
+
+    const session: IdeationSession = {
+      id: sessionId,
+      projectPath,
+      promptCategory: options?.promptCategory,
+      promptId: options?.promptId,
+      status: 'active',
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    const activeSession: ActiveSession = {
+      session,
+      messages: [],
+      isRunning: false,
+      abortController: null,
+    };
+
+    this.activeSessions.set(sessionId, activeSession);
+    await this.saveSessionToDisk(projectPath, session, []);
+
+    this.events.emit('ideation:session-started', { sessionId, projectPath });
+
+    // If there's an initial message from a prompt, send it
+    if (options?.initialMessage) {
+      await this.sendMessage(sessionId, options.initialMessage);
+    }
+
+    return session;
+  }
+
+  /**
+   * Get an existing session
+   */
+  async getSession(
+    projectPath: string,
+    sessionId: string
+  ): Promise<IdeationSessionWithMessages | null> {
+    // Check if session is already active in memory
+    let activeSession = this.activeSessions.get(sessionId);
+
+    if (!activeSession) {
+      // Try to load from disk
+      const loaded = await this.loadSessionFromDisk(projectPath, sessionId);
+      if (!loaded) return null;
+
+      activeSession = {
+        session: loaded.session,
+        messages: loaded.messages,
+        isRunning: false,
+        abortController: null,
+      };
+      this.activeSessions.set(sessionId, activeSession);
+    }
+
+    return {
+      ...activeSession.session,
+      messages: activeSession.messages,
+    };
+  }
+
+  /**
+   * Send a message in an ideation session
+   */
+  async sendMessage(
+    sessionId: string,
+    message: string,
+    options?: SendMessageOptions
+  ): Promise<void> {
+    const activeSession = this.activeSessions.get(sessionId);
+    if (!activeSession) {
+      throw new Error(`Session ${sessionId} not found`);
+    }
+
+    if (activeSession.isRunning) {
+      throw new Error('Session is already processing a message');
+    }
+
+    activeSession.isRunning = true;
+    activeSession.abortController = new AbortController();
+
+    // Add user message
+    const userMessage: IdeationMessage = {
+      id: this.generateId('msg'),
+      role: 'user',
+      content: message,
+      timestamp: new Date().toISOString(),
+    };
+    activeSession.messages.push(userMessage);
+
+    // Emit user message
+    this.events.emit('ideation:stream', {
+      sessionId,
+      type: 'message',
+      message: userMessage,
+    });
+
+    try {
+      const projectPath = activeSession.session.projectPath;
+
+      // Build conversation history
+      const conversationHistory = activeSession.messages.slice(0, -1).map((msg) => ({
+        role: msg.role,
+        content: msg.content,
+      }));
+
+      // Load context files
+      const contextResult = await loadContextFiles({
+        projectPath,
+        fsModule: secureFs as Parameters<typeof loadContextFiles>[0]['fsModule'],
+      });
+
+      // Gather existing features and ideas to prevent duplicate suggestions
+      const existingWorkContext = await this.gatherExistingWorkContext(projectPath);
+
+      // Get customized prompts from settings
+      const prompts = await getPromptCustomization(this.settingsService, '[IdeationService]');
+
+      // Build system prompt for ideation
+      const systemPrompt = this.buildIdeationSystemPrompt(
+        prompts.ideation.ideationSystemPrompt,
+        contextResult.formattedPrompt,
+        activeSession.session.promptCategory,
+        existingWorkContext
+      );
+
+      // Resolve model alias to canonical identifier (with prefix)
+      let modelId = resolveModelString(options?.model ?? 'sonnet');
+
+      // Try to find a provider for this model (e.g., GLM, MiniMax models)
+      let claudeCompatibleProvider: import('@automaker/types').ClaudeCompatibleProvider | undefined;
+      let credentials = await this.settingsService?.getCredentials();
+
+      if (this.settingsService && options?.model) {
+        const providerResult = await getProviderByModelId(
+          options.model,
+          this.settingsService,
+          '[IdeationService]'
+        );
+        if (providerResult.provider) {
+          claudeCompatibleProvider = providerResult.provider;
+          // CRITICAL: For custom providers, use the provider's model ID (e.g. "GLM-4.7")
+          // for the API call, NOT the resolved Claude model - otherwise we get "model not found"
+          modelId = options.model;
+          credentials = providerResult.credentials ?? credentials;
+        }
+      }
+
+      // Create SDK options
+      const sdkOptions = createChatOptions({
+        cwd: projectPath,
+        model: modelId,
+        systemPrompt,
+        abortController: activeSession.abortController!,
+      });
+
+      const provider = ProviderFactory.getProviderForModel(modelId);
+
+      // Strip provider prefix - providers need bare model IDs
+      const bareModel = stripProviderPrefix(modelId);
+
+      const executeOptions: ExecuteOptions = {
+        prompt: message,
+        model: bareModel,
+        originalModel: modelId,
+        cwd: projectPath,
+        systemPrompt: sdkOptions.systemPrompt,
+        maxTurns: 1, // Single turn for ideation
+        abortController: activeSession.abortController!,
+        conversationHistory: conversationHistory.length > 0 ? conversationHistory : undefined,
+        claudeCompatibleProvider, // Pass provider for alternative endpoint configuration
+        credentials, // Pass credentials for resolving 'credentials' apiKeySource
+      };
+
+      const stream = provider.executeQuery(executeOptions);
+
+      let responseText = '';
+      const assistantMessage: IdeationMessage = {
+        id: this.generateId('msg'),
+        role: 'assistant',
+        content: '',
+        timestamp: new Date().toISOString(),
+      };
+
+      for await (const msg of stream) {
+        if (msg.type === 'assistant' && msg.message?.content) {
+          for (const block of msg.message.content) {
+            if (block.type === 'text') {
+              responseText += block.text;
+              assistantMessage.content = responseText;
+
+              this.events.emit('ideation:stream', {
+                sessionId,
+                type: 'stream',
+                content: responseText,
+                done: false,
+              });
+            }
+          }
+        } else if (msg.type === 'result') {
+          if (msg.subtype === 'success' && msg.result) {
+            assistantMessage.content = msg.result;
+            responseText = msg.result;
+          }
+        }
+      }
+
+      activeSession.messages.push(assistantMessage);
+
+      this.events.emit('ideation:stream', {
+        sessionId,
+        type: 'message-complete',
+        message: assistantMessage,
+        content: responseText,
+        done: true,
+      });
+
+      // Save session
+      await this.saveSessionToDisk(projectPath, activeSession.session, activeSession.messages);
+    } catch (error) {
+      if (isAbortError(error)) {
+        this.events.emit('ideation:stream', {
+          sessionId,
+          type: 'aborted',
+        });
+      } else {
+        logger.error('Error in ideation message:', error);
+        this.events.emit('ideation:stream', {
+          sessionId,
+          type: 'error',
+          error: (error as Error).message,
+        });
+      }
+    } finally {
+      activeSession.isRunning = false;
+      activeSession.abortController = null;
+    }
+  }
+
+  /**
+   * Stop an active session
+   */
+  async stopSession(sessionId: string): Promise<void> {
+    const activeSession = this.activeSessions.get(sessionId);
+    if (!activeSession) return;
+
+    if (activeSession.abortController) {
+      activeSession.abortController.abort();
+    }
+
+    activeSession.isRunning = false;
+    activeSession.abortController = null;
+    activeSession.session.status = 'completed';
+
+    await this.saveSessionToDisk(
+      activeSession.session.projectPath,
+      activeSession.session,
+      activeSession.messages
+    );
+
+    this.events.emit('ideation:session-ended', { sessionId });
+  }
+
+  // ============================================================================
+  // Ideas CRUD
+  // ============================================================================
+
+  /**
+   * Create a new idea
+   */
+  async createIdea(projectPath: string, input: CreateIdeaInput): Promise<Idea> {
+    validateWorkingDirectory(projectPath);
+    await ensureIdeationDir(projectPath);
+
+    const ideaId = this.generateId('idea');
+    const now = new Date().toISOString();
+
+    const idea: Idea = {
+      id: ideaId,
+      title: input.title,
+      description: input.description,
+      category: input.category,
+      status: input.status || 'raw',
+      impact: input.impact || 'medium',
+      effort: input.effort || 'medium',
+      conversationId: input.conversationId,
+      sourcePromptId: input.sourcePromptId,
+      userStories: input.userStories,
+      notes: input.notes,
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    // Save to disk
+    const ideaDir = getIdeaDir(projectPath, ideaId);
+    await secureFs.mkdir(ideaDir, { recursive: true });
+    await secureFs.writeFile(
+      getIdeaPath(projectPath, ideaId),
+      JSON.stringify(idea, null, 2),
+      'utf-8'
+    );
+
+    return idea;
+  }
+
+  /**
+   * Get all ideas for a project
+   */
+  async getIdeas(projectPath: string): Promise<Idea[]> {
+    try {
+      const ideasDir = getIdeasDir(projectPath);
+
+      try {
+        await secureFs.access(ideasDir);
+      } catch {
+        return [];
+      }
+
+      const entries = (await secureFs.readdir(ideasDir, {
+        withFileTypes: true,
+      })) as import('fs').Dirent[];
+      const ideaDirs = entries.filter((entry) => entry.isDirectory());
+
+      const ideas: Idea[] = [];
+      for (const dir of ideaDirs) {
+        try {
+          const ideaPath = getIdeaPath(projectPath, dir.name);
+          const content = (await secureFs.readFile(ideaPath, 'utf-8')) as string;
+          ideas.push(JSON.parse(content));
+        } catch (error) {
+          logger.warn(`Failed to load idea ${dir.name}:`, error);
+        }
+      }
+
+      // Sort by updatedAt descending
+      return ideas.sort(
+        (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+      );
+    } catch (error) {
+      logger.error('Failed to get ideas:', error);
+      return [];
+    }
+  }
+
+  /**
+   * Get a single idea
+   */
+  async getIdea(projectPath: string, ideaId: string): Promise<Idea | null> {
+    try {
+      const ideaPath = getIdeaPath(projectPath, ideaId);
+      const content = (await secureFs.readFile(ideaPath, 'utf-8')) as string;
+      return JSON.parse(content);
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Update an idea
+   */
+  async updateIdea(
+    projectPath: string,
+    ideaId: string,
+    updates: UpdateIdeaInput
+  ): Promise<Idea | null> {
+    const idea = await this.getIdea(projectPath, ideaId);
+    if (!idea) return null;
+
+    const updatedIdea: Idea = {
+      ...idea,
+      ...updates,
+      updatedAt: new Date().toISOString(),
+    };
+
+    await secureFs.writeFile(
+      getIdeaPath(projectPath, ideaId),
+      JSON.stringify(updatedIdea, null, 2),
+      'utf-8'
+    );
+
+    return updatedIdea;
+  }
+
+  /**
+   * Delete an idea
+   */
+  async deleteIdea(projectPath: string, ideaId: string): Promise<void> {
+    const ideaDir = getIdeaDir(projectPath, ideaId);
+    try {
+      await secureFs.rm(ideaDir, { recursive: true });
+    } catch {
+      // Ignore if doesn't exist
+    }
+  }
+
+  /**
+   * Archive an idea
+   */
+  async archiveIdea(projectPath: string, ideaId: string): Promise<Idea | null> {
+    return this.updateIdea(projectPath, ideaId, {
+      status: 'archived' as IdeaStatus,
+    });
+  }
+
+  // ============================================================================
+  // Project Analysis
+  // ============================================================================
+
+  /**
+   * Analyze project structure and generate suggestions
+   */
+  async analyzeProject(projectPath: string): Promise<ProjectAnalysisResult> {
+    validateWorkingDirectory(projectPath);
+    await ensureIdeationDir(projectPath);
+
+    this.emitAnalysisEvent('ideation:analysis-started', {
+      projectPath,
+      message: 'Starting project analysis...',
+    });
+
+    try {
+      // Gather project structure
+      const structure = await this.gatherProjectStructure(projectPath);
+
+      this.emitAnalysisEvent('ideation:analysis-progress', {
+        projectPath,
+        progress: 30,
+        message: 'Analyzing codebase structure...',
+      });
+
+      // Use AI to generate suggestions
+      const suggestions = await this.generateAnalysisSuggestions(projectPath, structure);
+
+      this.emitAnalysisEvent('ideation:analysis-progress', {
+        projectPath,
+        progress: 80,
+        message: 'Generating improvement suggestions...',
+      });
+
+      const result: ProjectAnalysisResult = {
+        projectPath,
+        analyzedAt: new Date().toISOString(),
+        totalFiles: structure.totalFiles,
+        routes: structure.routes,
+        components: structure.components,
+        services: structure.services,
+        framework: structure.framework,
+        language: structure.language,
+        dependencies: structure.dependencies,
+        suggestions,
+        summary: this.generateAnalysisSummary(structure, suggestions),
+      };
+
+      // Cache the result
+      await secureFs.writeFile(
+        getIdeationAnalysisPath(projectPath),
+        JSON.stringify(result, null, 2),
+        'utf-8'
+      );
+
+      this.emitAnalysisEvent('ideation:analysis-complete', {
+        projectPath,
+        result,
+      });
+
+      return result;
+    } catch (error) {
+      logger.error('Project analysis failed:', error);
+      this.emitAnalysisEvent('ideation:analysis-error', {
+        projectPath,
+        error: (error as Error).message,
+      });
+      throw error;
+    }
+  }
+
+  /**
+   * Emit analysis event wrapped in ideation:analysis format
+   */
+  private emitAnalysisEvent(eventType: string, data: Record<string, unknown>): void {
+    this.events.emit('ideation:analysis', {
+      type: eventType,
+      ...data,
+    });
+  }
+
+  /**
+   * Check if a session is currently running (processing a message)
+   */
+  isSessionRunning(sessionId: string): boolean {
+    const activeSession = this.activeSessions.get(sessionId);
+    return activeSession?.isRunning ?? false;
+  }
+
+  /**
+   * Get cached analysis result
+   */
+  async getCachedAnalysis(projectPath: string): Promise<ProjectAnalysisResult | null> {
+    try {
+      const content = (await secureFs.readFile(
+        getIdeationAnalysisPath(projectPath),
+        'utf-8'
+      )) as string;
+      return JSON.parse(content);
+    } catch {
+      return null;
+    }
+  }
+
+  // ============================================================================
+  // Convert to Feature
+  // ============================================================================
+
+  /**
+   * Convert an idea to a feature
+   */
+  async convertToFeature(projectPath: string, ideaId: string): Promise<Feature> {
+    const idea = await this.getIdea(projectPath, ideaId);
+    if (!idea) {
+      throw new Error(`Idea ${ideaId} not found`);
+    }
+
+    // Build feature description from idea
+    let description = idea.description;
+    if (idea.userStories && idea.userStories.length > 0) {
+      description += '\n\n## User Stories\n' + idea.userStories.map((s) => `- ${s}`).join('\n');
+    }
+    if (idea.notes) {
+      description += '\n\n## Notes\n' + idea.notes;
+    }
+
+    const feature: Feature = {
+      id: this.generateId('feature'),
+      title: idea.title,
+      category: this.mapIdeaCategoryToFeatureCategory(idea.category),
+      description,
+      status: 'backlog',
+    };
+
+    return feature;
+  }
+
+  // ============================================================================
+  // Generate Suggestions
+  // ============================================================================
+
+  /**
+   * Generate structured suggestions for a prompt
+   * Returns parsed suggestions that can be directly added to the board
+   */
+  async generateSuggestions(
+    projectPath: string,
+    promptId: string,
+    category: IdeaCategory,
+    count: number = 10,
+    contextSources?: IdeationContextSources
+  ): Promise<AnalysisSuggestion[]> {
+    const suggestionCount = Math.min(Math.max(Math.floor(count ?? 10), 1), 20);
+    // Merge with defaults for backward compatibility
+    const sources = { ...DEFAULT_IDEATION_CONTEXT_SOURCES, ...contextSources };
+    validateWorkingDirectory(projectPath);
+
+    // Get the prompt
+    const prompt = this.getAllPrompts().find((p) => p.id === promptId);
+    if (!prompt) {
+      throw new Error(`Prompt ${promptId} not found`);
+    }
+
+    // Emit start event
+    this.events.emit('ideation:suggestions', {
+      type: 'started',
+      promptId,
+      category,
+    });
+
+    try {
+      // Load context files (respecting toggle settings)
+      const contextResult = await loadContextFiles({
+        projectPath,
+        fsModule: secureFs as Parameters<typeof loadContextFiles>[0]['fsModule'],
+        includeContextFiles: sources.useContextFiles,
+        includeMemory: sources.useMemoryFiles,
+      });
+
+      // Build context from multiple sources
+      let contextPrompt = contextResult.formattedPrompt;
+
+      // Add app spec context if enabled
+      if (sources.useAppSpec) {
+        const appSpecContext = await this.buildAppSpecContext(projectPath);
+        if (appSpecContext) {
+          contextPrompt = contextPrompt ? `${contextPrompt}\n\n${appSpecContext}` : appSpecContext;
+        }
+      }
+
+      // If no context was found, try to gather basic project info
+      if (!contextPrompt) {
+        const projectInfo = await this.gatherBasicProjectInfo(projectPath);
+        if (projectInfo) {
+          contextPrompt = projectInfo;
+        }
+      }
+
+      // Gather existing features and ideas to prevent duplicates (respecting toggle settings)
+      const existingWorkContext = await this.gatherExistingWorkContext(projectPath, {
+        includeFeatures: sources.useExistingFeatures,
+        includeIdeas: sources.useExistingIdeas,
+      });
+
+      // Get customized prompts from settings
+      const prompts = await getPromptCustomization(this.settingsService, '[IdeationService]');
+
+      // Build system prompt for structured suggestions
+      const systemPrompt = this.buildSuggestionsSystemPrompt(
+        prompts.ideation.suggestionsSystemPrompt,
+        contextPrompt,
+        category,
+        suggestionCount,
+        existingWorkContext
+      );
+
+      // Get model from phase settings with provider info (ideationModel)
+      const phaseResult = await getPhaseModelWithOverrides(
+        'ideationModel',
+        this.settingsService,
+        projectPath,
+        '[IdeationService]'
+      );
+      const resolved = resolvePhaseModel(phaseResult.phaseModel);
+      // resolvePhaseModel already resolves model aliases internally - no need to call resolveModelString again
+      const modelId = resolved.model;
+      const claudeCompatibleProvider = phaseResult.provider;
+      const credentials = phaseResult.credentials;
+
+      logger.info(
+        'generateSuggestions using model:',
+        modelId,
+        claudeCompatibleProvider ? `via provider: ${claudeCompatibleProvider.name}` : 'direct API'
+      );
+
+      // Create SDK options
+      const sdkOptions = createChatOptions({
+        cwd: projectPath,
+        model: modelId,
+        systemPrompt,
+        abortController: new AbortController(),
+      });
+
+      const provider = ProviderFactory.getProviderForModel(modelId);
+
+      // Strip provider prefix - providers need bare model IDs
+      const bareModel = stripProviderPrefix(modelId);
+
+      const executeOptions: ExecuteOptions = {
+        prompt: prompt.prompt,
+        model: bareModel,
+        originalModel: modelId,
+        cwd: projectPath,
+        systemPrompt: sdkOptions.systemPrompt,
+        maxTurns: 1,
+        // Disable all tools - we just want text generation, not codebase analysis
+        allowedTools: [],
+        abortController: new AbortController(),
+        readOnly: true, // Suggestions only need to return JSON, never write files
+        claudeCompatibleProvider, // Pass provider for alternative endpoint configuration
+        credentials, // Pass credentials for resolving 'credentials' apiKeySource
+      };
+
+      const stream = provider.executeQuery(executeOptions);
+
+      let responseText = '';
+      for await (const msg of stream) {
+        if (msg.type === 'assistant' && msg.message?.content) {
+          for (const block of msg.message.content) {
+            if (block.type === 'text') {
+              responseText += block.text;
+            }
+          }
+        } else if (msg.type === 'result' && msg.subtype === 'success' && msg.result) {
+          responseText = msg.result;
+        }
+      }
+
+      // Parse the response into structured suggestions
+      const suggestions = this.parseSuggestionsFromResponse(
+        responseText,
+        category,
+        suggestionCount
+      );
+
+      // Emit complete event
+      this.events.emit('ideation:suggestions', {
+        type: 'complete',
+        promptId,
+        category,
+        suggestions,
+      });
+
+      return suggestions;
+    } catch (error) {
+      logger.error('Failed to generate suggestions:', error);
+      this.events.emit('ideation:suggestions', {
+        type: 'error',
+        promptId,
+        error: (error as Error).message,
+      });
+      throw error;
+    }
+  }
+
+  /**
+   * Build system prompt for structured suggestion generation
+   * @param basePrompt - The base system prompt from settings
+   * @param contextFilesPrompt - Project context from loaded files
+   * @param category - The idea category to focus on
+   * @param count - Number of suggestions to generate
+   * @param existingWorkContext - Context about existing features/ideas
+   */
+  private buildSuggestionsSystemPrompt(
+    basePrompt: string,
+    contextFilesPrompt: string | undefined,
+    category: IdeaCategory,
+    count: number = 10,
+    existingWorkContext?: string
+  ): string {
+    const contextSection = contextFilesPrompt
+      ? `## Project Context\n${contextFilesPrompt}`
+      : `## No Project Context Available\nNo context files were found. Generate suggestions based on the user's prompt and general best practices for the type of application being described.`;
+
+    const existingWorkSection = existingWorkContext ? `\n\n${existingWorkContext}` : '';
+
+    // Replace placeholder {{count}} if present, otherwise append count instruction
+    let prompt = basePrompt;
+    if (prompt.includes('{{count}}')) {
+      prompt = prompt.replace(/\{\{count\}\}/g, String(count));
+    } else {
+      prompt += `\n\nGenerate exactly ${count} suggestions.`;
+    }
+
+    return `${prompt}
+
+Focus area: ${this.getCategoryDescription(category)}
+
+${contextSection}${existingWorkSection}`;
+  }
+
+  /**
+   * Parse AI response into structured suggestions
+   */
+  private parseSuggestionsFromResponse(
+    response: string,
+    category: IdeaCategory,
+    count: number
+  ): AnalysisSuggestion[] {
+    try {
+      // Try to extract JSON from the response
+      const jsonMatch = response.match(/\[[\s\S]*\]/);
+      if (!jsonMatch) {
+        logger.warn('No JSON array found in response, falling back to text parsing');
+        return this.parseTextResponse(response, category, count);
+      }
+
+      const parsed = JSON.parse(jsonMatch[0]);
+      if (!Array.isArray(parsed)) {
+        return this.parseTextResponse(response, category, count);
+      }
+
+      return parsed
+        .map(
+          (
+            item: {
+              title?: string;
+              description?: string;
+              rationale?: string;
+              priority?: 'low' | 'medium' | 'high';
+              relatedFiles?: string[];
+            },
+            index: number
+          ) => ({
+            id: this.generateId('sug'),
+            category,
+            title: item.title || `Suggestion ${index + 1}`,
+            description: item.description || '',
+            rationale: item.rationale || '',
+            priority: item.priority || ('medium' as const),
+            relatedFiles: item.relatedFiles || [],
+          })
+        )
+        .slice(0, count);
+    } catch (error) {
+      logger.warn('Failed to parse JSON response:', error);
+      return this.parseTextResponse(response, category, count);
+    }
+  }
+
+  /**
+   * Fallback: parse text response into suggestions
+   */
+  private parseTextResponse(
+    response: string,
+    category: IdeaCategory,
+    count: number
+  ): AnalysisSuggestion[] {
+    const suggestions: AnalysisSuggestion[] = [];
+
+    // Try to find numbered items or headers
+    const lines = response.split('\n');
+    let currentSuggestion: Partial<AnalysisSuggestion> | null = null;
+    let currentContent: string[] = [];
+
+    for (const line of lines) {
+      // Check for numbered items or markdown headers
+      const titleMatch = line.match(/^(?:\d+[.)]\s*\*{0,2}|#{1,3}\s+)(.+)/);
+
+      if (titleMatch) {
+        // Save previous suggestion
+        if (currentSuggestion && currentSuggestion.title) {
+          suggestions.push({
+            id: this.generateId('sug'),
+            category,
+            title: currentSuggestion.title,
+            description: currentContent.join(' ').trim() || currentSuggestion.title,
+            rationale: '',
+            priority: 'medium',
+            ...currentSuggestion,
+          } as AnalysisSuggestion);
+        }
+
+        // Start new suggestion
+        currentSuggestion = {
+          title: titleMatch[1].replace(/\*{1,2}/g, '').trim(),
+        };
+        currentContent = [];
+      } else if (currentSuggestion && line.trim()) {
+        currentContent.push(line.trim());
+      }
+    }
+
+    // Don't forget the last suggestion
+    if (currentSuggestion && currentSuggestion.title) {
+      suggestions.push({
+        id: this.generateId('sug'),
+        category,
+        title: currentSuggestion.title,
+        description: currentContent.join(' ').trim() || currentSuggestion.title,
+        rationale: '',
+        priority: 'medium',
+      } as AnalysisSuggestion);
+    }
+
+    // If no suggestions found, create one from the whole response
+    if (suggestions.length === 0 && response.trim()) {
+      suggestions.push({
+        id: this.generateId('sug'),
+        category,
+        title: 'AI Suggestion',
+        description: response.slice(0, 500),
+        rationale: '',
+        priority: 'medium',
+      });
+    }
+
+    return suggestions.slice(0, count);
+  }
+
+  // ============================================================================
+  // Guided Prompts
+  // ============================================================================
+
+  /**
+   * Get all prompt categories
+   */
+  getPromptCategories(): PromptCategory[] {
+    return [
+      {
+        id: 'feature',
+        name: 'Features',
+        icon: 'Zap',
+        description: 'New capabilities and functionality',
+      },
+      {
+        id: 'ux-ui',
+        name: 'UX/UI',
+        icon: 'Palette',
+        description: 'Design and user experience improvements',
+      },
+      {
+        id: 'dx',
+        name: 'Developer Experience',
+        icon: 'Code',
+        description: 'Developer tooling and workflows',
+      },
+      {
+        id: 'growth',
+        name: 'Growth',
+        icon: 'TrendingUp',
+        description: 'User engagement and retention',
+      },
+      {
+        id: 'technical',
+        name: 'Technical',
+        icon: 'Cpu',
+        description: 'Architecture and infrastructure',
+      },
+      {
+        id: 'security',
+        name: 'Security',
+        icon: 'Shield',
+        description: 'Security improvements and vulnerability fixes',
+      },
+      {
+        id: 'performance',
+        name: 'Performance',
+        icon: 'Gauge',
+        description: 'Performance optimization and speed improvements',
+      },
+      {
+        id: 'accessibility',
+        name: 'Accessibility',
+        icon: 'Accessibility',
+        description: 'Accessibility features and inclusive design',
+      },
+      {
+        id: 'analytics',
+        name: 'Analytics',
+        icon: 'BarChart',
+        description: 'Analytics, monitoring, and insights features',
+      },
+    ];
+  }
+
+  /**
+   * Get prompts for a specific category
+   */
+  getPromptsByCategory(category: IdeaCategory): IdeationPrompt[] {
+    const allPrompts = this.getAllPrompts();
+    return allPrompts.filter((p) => p.category === category);
+  }
+
+  /**
+   * Get all guided prompts
+   * This is the single source of truth for guided prompts data.
+   * Frontend fetches this data via /api/ideation/prompts endpoint.
+   */
+  getAllPrompts(): IdeationPrompt[] {
+    return [
+      // Feature prompts
+      {
+        id: 'feature-missing',
+        category: 'feature',
+        title: 'Missing Features',
+        description: 'Discover features users might expect',
+        prompt:
+          "Based on the project context provided, identify features that users of similar applications typically expect but might be missing. Consider the app's domain, target users, and common patterns in similar products.",
+      },
+      {
+        id: 'feature-automation',
+        category: 'feature',
+        title: 'Automation Opportunities',
+        description: 'Find manual processes that could be automated',
+        prompt:
+          'Based on the project context, identify manual processes or repetitive tasks that could be automated. Look for patterns where users might be doing things repeatedly that software could handle.',
+      },
+      {
+        id: 'feature-integrations',
+        category: 'feature',
+        title: 'Integration Ideas',
+        description: 'Identify valuable third-party integrations',
+        prompt:
+          "Based on the project context, what third-party services or APIs would provide value if integrated? Consider the app's domain and what complementary services users might need.",
+      },
+      {
+        id: 'feature-workflow',
+        category: 'feature',
+        title: 'Workflow Improvements',
+        description: 'Streamline user workflows',
+        prompt:
+          'Based on the project context, analyze the user workflows. What steps could be combined, eliminated, or automated? Where are users likely spending too much time on repetitive tasks?',
+      },
+
+      // UX/UI prompts
+      {
+        id: 'ux-friction',
+        category: 'ux-ui',
+        title: 'Friction Points',
+        description: 'Identify where users might get stuck',
+        prompt:
+          'Based on the project context, identify potential user friction points. Where might users get confused, stuck, or frustrated? Consider form submissions, navigation, error states, and complex interactions.',
+      },
+      {
+        id: 'ux-empty-states',
+        category: 'ux-ui',
+        title: 'Empty States',
+        description: 'Improve empty state experiences',
+        prompt:
+          "Based on the project context, identify empty states that could be improved. How can we guide users when there's no content? Consider onboarding, helpful prompts, and sample data.",
+      },
+      {
+        id: 'ux-accessibility',
+        category: 'ux-ui',
+        title: 'Accessibility Improvements',
+        description: 'Enhance accessibility and inclusivity',
+        prompt:
+          'Based on the project context, suggest accessibility improvements. Consider keyboard navigation, screen reader support, color contrast, focus states, and ARIA labels. What specific improvements would make this more accessible?',
+      },
+      {
+        id: 'ux-mobile',
+        category: 'ux-ui',
+        title: 'Mobile Experience',
+        description: 'Optimize for mobile users',
+        prompt:
+          'Based on the project context, suggest improvements for the mobile user experience. Consider touch targets, responsive layouts, and mobile-specific interactions.',
+      },
+      {
+        id: 'ux-feedback',
+        category: 'ux-ui',
+        title: 'User Feedback',
+        description: 'Improve feedback and status indicators',
+        prompt:
+          'Based on the project context, analyze how the application communicates with users. Where are loading states, success messages, or error handling missing or unclear? What feedback would help users understand what is happening?',
+      },
+
+      // DX prompts
+      {
+        id: 'dx-documentation',
+        category: 'dx',
+        title: 'Documentation Gaps',
+        description: 'Identify missing documentation',
+        prompt:
+          'Based on the project context, identify areas that could benefit from better documentation. What would help new developers understand the architecture, APIs, and conventions? Consider inline comments, READMEs, and API docs.',
+      },
+      {
+        id: 'dx-testing',
+        category: 'dx',
+        title: 'Testing Improvements',
+        description: 'Enhance test coverage and quality',
+        prompt:
+          'Based on the project context, suggest areas that need better test coverage. What types of tests might be missing? Consider unit tests, integration tests, and end-to-end tests.',
+      },
+      {
+        id: 'dx-tooling',
+        category: 'dx',
+        title: 'Developer Tooling',
+        description: 'Improve development workflows',
+        prompt:
+          'Based on the project context, suggest improvements to development workflows. What improvements would speed up development? Consider build times, hot reload, debugging tools, and developer scripts.',
+      },
+      {
+        id: 'dx-error-handling',
+        category: 'dx',
+        title: 'Error Handling',
+        description: 'Improve error messages and debugging',
+        prompt:
+          'Based on the project context, analyze error handling. Where are error messages unclear or missing? What would help developers debug issues faster? Consider logging, error boundaries, and stack traces.',
+      },
+
+      // Growth prompts
+      {
+        id: 'growth-onboarding',
+        category: 'growth',
+        title: 'Onboarding Flow',
+        description: 'Improve new user experience',
+        prompt:
+          'Based on the project context, suggest improvements to the onboarding experience. How can we help new users understand the value and get started quickly? Consider tutorials, progressive disclosure, and quick wins.',
+      },
+      {
+        id: 'growth-engagement',
+        category: 'growth',
+        title: 'User Engagement',
+        description: 'Increase user retention and activity',
+        prompt:
+          'Based on the project context, suggest features that would increase user engagement and retention. What would bring users back daily? Consider notifications, streaks, social features, and personalization.',
+      },
+      {
+        id: 'growth-sharing',
+        category: 'growth',
+        title: 'Shareability',
+        description: 'Make the app more shareable',
+        prompt:
+          'Based on the project context, suggest ways to make the application more shareable. What features would encourage users to invite others or share their work? Consider collaboration, public profiles, and export features.',
+      },
+      {
+        id: 'growth-monetization',
+        category: 'growth',
+        title: 'Monetization Ideas',
+        description: 'Identify potential revenue streams',
+        prompt:
+          'Based on the project context, what features or tiers could support monetization? Consider premium features, usage limits, team features, and integrations that users would pay for.',
+      },
+
+      // Technical prompts
+      {
+        id: 'tech-performance',
+        category: 'technical',
+        title: 'Performance Optimization',
+        description: 'Identify performance bottlenecks',
+        prompt:
+          'Based on the project context, suggest performance optimization opportunities. Where might bottlenecks exist? Consider database queries, API calls, bundle size, rendering, and caching strategies.',
+      },
+      {
+        id: 'tech-architecture',
+        category: 'technical',
+        title: 'Architecture Review',
+        description: 'Evaluate and improve architecture',
+        prompt:
+          'Based on the project context, suggest architectural improvements. What would make the codebase more maintainable, scalable, or testable? Consider separation of concerns, dependency management, and patterns.',
+      },
+      {
+        id: 'tech-debt',
+        category: 'technical',
+        title: 'Technical Debt',
+        description: 'Identify areas needing refactoring',
+        prompt:
+          'Based on the project context, identify potential technical debt. What areas might be becoming hard to maintain or understand? What refactoring would have the highest impact? Consider duplicated code, complexity, and outdated patterns.',
+      },
+      {
+        id: 'tech-security',
+        category: 'technical',
+        title: 'Security Review',
+        description: 'Identify security improvements',
+        prompt:
+          'Based on the project context, review for security improvements. What best practices are missing? Consider authentication, authorization, input validation, and data protection. Note: This is for improvement suggestions, not a security audit.',
+      },
+
+      // Security prompts
+      {
+        id: 'security-auth',
+        category: 'security',
+        title: 'Authentication Security',
+        description: 'Review authentication mechanisms',
+        prompt:
+          'Based on the project context, analyze the authentication system. What security improvements would strengthen user authentication? Consider password policies, session management, MFA, and token handling.',
+      },
+      {
+        id: 'security-data',
+        category: 'security',
+        title: 'Data Protection',
+        description: 'Protect sensitive user data',
+        prompt:
+          'Based on the project context, review how sensitive data is handled. What improvements would better protect user privacy? Consider encryption, data minimization, secure storage, and data retention policies.',
+      },
+      {
+        id: 'security-input',
+        category: 'security',
+        title: 'Input Validation',
+        description: 'Prevent injection attacks',
+        prompt:
+          'Based on the project context, analyze input handling. Where could input validation be strengthened? Consider SQL injection, XSS, command injection, and file upload vulnerabilities.',
+      },
+      {
+        id: 'security-api',
+        category: 'security',
+        title: 'API Security',
+        description: 'Secure API endpoints',
+        prompt:
+          'Based on the project context, review API security. What improvements would make the API more secure? Consider rate limiting, authorization, CORS, and request validation.',
+      },
+
+      // Performance prompts
+      {
+        id: 'perf-frontend',
+        category: 'performance',
+        title: 'Frontend Performance',
+        description: 'Optimize UI rendering and loading',
+        prompt:
+          'Based on the project context, analyze frontend performance. What optimizations would improve load times and responsiveness? Consider bundle splitting, lazy loading, memoization, and render optimization.',
+      },
+      {
+        id: 'perf-backend',
+        category: 'performance',
+        title: 'Backend Performance',
+        description: 'Optimize server-side operations',
+        prompt:
+          'Based on the project context, review backend performance. What optimizations would improve response times? Consider database queries, caching strategies, async operations, and resource pooling.',
+      },
+      {
+        id: 'perf-database',
+        category: 'performance',
+        title: 'Database Optimization',
+        description: 'Improve query performance',
+        prompt:
+          'Based on the project context, analyze database interactions. What optimizations would improve data access performance? Consider indexing, query optimization, denormalization, and connection pooling.',
+      },
+      {
+        id: 'perf-caching',
+        category: 'performance',
+        title: 'Caching Strategies',
+        description: 'Implement effective caching',
+        prompt:
+          'Based on the project context, review caching opportunities. Where would caching provide the most benefit? Consider API responses, computed values, static assets, and session data.',
+      },
+
+      // Accessibility prompts
+      {
+        id: 'a11y-keyboard',
+        category: 'accessibility',
+        title: 'Keyboard Navigation',
+        description: 'Enable full keyboard access',
+        prompt:
+          'Based on the project context, analyze keyboard accessibility. What improvements would enable users to navigate entirely with keyboard? Consider focus management, tab order, and keyboard shortcuts.',
+      },
+      {
+        id: 'a11y-screen-reader',
+        category: 'accessibility',
+        title: 'Screen Reader Support',
+        description: 'Improve screen reader experience',
+        prompt:
+          'Based on the project context, review screen reader compatibility. What improvements would help users with visual impairments? Consider ARIA labels, semantic HTML, live regions, and alt text.',
+      },
+      {
+        id: 'a11y-visual',
+        category: 'accessibility',
+        title: 'Visual Accessibility',
+        description: 'Improve visual design for all users',
+        prompt:
+          'Based on the project context, analyze visual accessibility. What improvements would help users with visual impairments? Consider color contrast, text sizing, focus indicators, and reduced motion.',
+      },
+      {
+        id: 'a11y-forms',
+        category: 'accessibility',
+        title: 'Accessible Forms',
+        description: 'Make forms usable for everyone',
+        prompt:
+          'Based on the project context, review form accessibility. What improvements would make forms more accessible? Consider labels, error messages, required field indicators, and input assistance.',
+      },
+
+      // Analytics prompts
+      {
+        id: 'analytics-tracking',
+        category: 'analytics',
+        title: 'User Tracking',
+        description: 'Track key user behaviors',
+        prompt:
+          'Based on the project context, analyze analytics opportunities. What user behaviors should be tracked to understand engagement? Consider page views, feature usage, conversion funnels, and session duration.',
+      },
+      {
+        id: 'analytics-metrics',
+        category: 'analytics',
+        title: 'Key Metrics',
+        description: 'Define success metrics',
+        prompt:
+          'Based on the project context, what key metrics should be tracked? Consider user acquisition, retention, engagement, and feature adoption. What dashboards would be most valuable?',
+      },
+      {
+        id: 'analytics-errors',
+        category: 'analytics',
+        title: 'Error Monitoring',
+        description: 'Track and analyze errors',
+        prompt:
+          'Based on the project context, review error handling for monitoring opportunities. What error tracking would help identify and fix issues faster? Consider error aggregation, alerting, and stack traces.',
+      },
+      {
+        id: 'analytics-performance',
+        category: 'analytics',
+        title: 'Performance Monitoring',
+        description: 'Track application performance',
+        prompt:
+          'Based on the project context, analyze performance monitoring opportunities. What metrics would help identify bottlenecks? Consider load times, API response times, and resource usage.',
+      },
+    ];
+  }
+
+  // ============================================================================
+  // Private Helpers
+  // ============================================================================
+
+  private buildIdeationSystemPrompt(
+    basePrompt: string,
+    contextFilesPrompt: string | undefined,
+    category?: IdeaCategory,
+    existingWorkContext?: string
+  ): string {
+    const categoryContext = category
+      ? `\n\nFocus area: ${this.getCategoryDescription(category)}`
+      : '';
+
+    const contextSection = contextFilesPrompt
+      ? `\n\n## Project Context\n${contextFilesPrompt}`
+      : '';
+
+    const existingWorkSection = existingWorkContext ? `\n\n${existingWorkContext}` : '';
+
+    return basePrompt + categoryContext + contextSection + existingWorkSection;
+  }
+
+  private getCategoryDescription(category: IdeaCategory): string {
+    const descriptions: Record<IdeaCategory, string> = {
+      feature: 'New features and capabilities that add value for users',
+      'ux-ui': 'User interface and user experience improvements',
+      dx: 'Developer experience and tooling improvements',
+      growth: 'User acquisition, engagement, and retention',
+      technical: 'Architecture, performance, and infrastructure',
+      security: 'Security improvements and vulnerability fixes',
+      performance: 'Performance optimization and speed improvements',
+      accessibility: 'Accessibility features and inclusive design',
+      analytics: 'Analytics, monitoring, and insights features',
+    };
+    return descriptions[category] || '';
+  }
+
+  /**
+   * Build context from app_spec.txt for suggestion generation
+   * Extracts project name, overview, capabilities, and implemented features
+   */
+  private async buildAppSpecContext(projectPath: string): Promise<string> {
+    try {
+      const specPath = getAppSpecPath(projectPath);
+      const specContent = (await secureFs.readFile(specPath, 'utf-8')) as string;
+
+      const parts: string[] = [];
+      parts.push('## App Specification');
+
+      // Extract project name
+      const projectNames = extractXmlElements(specContent, 'project_name');
+      if (projectNames.length > 0 && projectNames[0]) {
+        parts.push(`**Project:** ${projectNames[0]}`);
+      }
+
+      // Extract overview
+      const overviews = extractXmlElements(specContent, 'overview');
+      if (overviews.length > 0 && overviews[0]) {
+        parts.push(`**Overview:** ${overviews[0]}`);
+      }
+
+      // Extract core capabilities
+      const capabilities = extractXmlElements(specContent, 'capability');
+      if (capabilities.length > 0) {
+        parts.push('**Core Capabilities:**');
+        for (const cap of capabilities) {
+          parts.push(`- ${cap}`);
+        }
+      }
+
+      // Extract implemented features
+      const implementedFeatures = extractImplementedFeatures(specContent);
+      if (implementedFeatures.length > 0) {
+        parts.push('**Implemented Features:**');
+        for (const feature of implementedFeatures) {
+          if (feature.description) {
+            parts.push(`- ${feature.name}: ${feature.description}`);
+          } else {
+            parts.push(`- ${feature.name}`);
+          }
+        }
+      }
+
+      // Only return content if we extracted something meaningful
+      if (parts.length > 1) {
+        return parts.join('\n');
+      }
+      return '';
+    } catch (error) {
+      // If file doesn't exist, return empty string silently
+      if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+        return '';
+      }
+      // For other errors, log and return empty string
+      logger.warn('Failed to build app spec context:', error);
+      return '';
+    }
+  }
+
+  /**
+   * Gather basic project information for context when no context files exist
+   */
+  private async gatherBasicProjectInfo(projectPath: string): Promise<string | null> {
+    const parts: string[] = [];
+
+    // Try to read package.json
+    try {
+      const packageJsonPath = path.join(projectPath, 'package.json');
+      const content = (await secureFs.readFile(packageJsonPath, 'utf-8')) as string;
+      const pkg = JSON.parse(content);
+
+      parts.push('## Project Information (from package.json)');
+      if (pkg.name) parts.push(`**Name:** ${pkg.name}`);
+      if (pkg.description) parts.push(`**Description:** ${pkg.description}`);
+      if (pkg.version) parts.push(`**Version:** ${pkg.version}`);
+
+      const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+      const depNames = Object.keys(allDeps);
+
+      // Detect framework and language
+      let framework = 'Unknown';
+      if (allDeps.react) framework = allDeps.next ? 'Next.js' : 'React';
+      else if (allDeps.vue) framework = allDeps.nuxt ? 'Nuxt' : 'Vue';
+      else if (allDeps['@angular/core']) framework = 'Angular';
+      else if (allDeps.svelte) framework = 'Svelte';
+      else if (allDeps.express) framework = 'Express';
+      else if (allDeps.fastify) framework = 'Fastify';
+      else if (allDeps.koa) framework = 'Koa';
+
+      const language = allDeps.typescript ? 'TypeScript' : 'JavaScript';
+      parts.push(`**Tech Stack:** ${framework} with ${language}`);
+
+      // Key dependencies
+      const keyDeps = depNames
+        .filter(
+          (d) => !d.startsWith('@types/') && !['typescript', 'eslint', 'prettier'].includes(d)
+        )
+        .slice(0, 15);
+      if (keyDeps.length > 0) {
+        parts.push(`**Key Dependencies:** ${keyDeps.join(', ')}`);
+      }
+
+      // Scripts
+      if (pkg.scripts) {
+        const scriptNames = Object.keys(pkg.scripts).slice(0, 10);
+        parts.push(`**Available Scripts:** ${scriptNames.join(', ')}`);
+      }
+    } catch {
+      // No package.json, try other files
+    }
+
+    // Try to read README.md (first 500 chars)
+    try {
+      const readmePath = path.join(projectPath, 'README.md');
+      const content = (await secureFs.readFile(readmePath, 'utf-8')) as string;
+      if (content) {
+        parts.push('\n## README.md (excerpt)');
+        parts.push(content.slice(0, 1000));
+      }
+    } catch {
+      // No README
+    }
+
+    // Try to get cached analysis
+    const cachedAnalysis = await this.getCachedAnalysis(projectPath);
+    if (cachedAnalysis) {
+      parts.push('\n## Project Structure Analysis');
+      parts.push(cachedAnalysis.summary || '');
+      if (cachedAnalysis.routes && cachedAnalysis.routes.length > 0) {
+        parts.push(`**Routes:** ${cachedAnalysis.routes.map((r) => r.name).join(', ')}`);
+      }
+      if (cachedAnalysis.components && cachedAnalysis.components.length > 0) {
+        parts.push(
+          `**Components:** ${cachedAnalysis.components
+            .slice(0, 10)
+            .map((c) => c.name)
+            .join(
+              ', '
+            )}${cachedAnalysis.components.length > 10 ? ` and ${cachedAnalysis.components.length - 10} more` : ''}`
+        );
+      }
+    }
+
+    if (parts.length === 0) {
+      return null;
+    }
+
+    return parts.join('\n');
+  }
+
+  /**
+   * Gather existing features and ideas to prevent duplicate suggestions
+   * Returns a concise list of titles grouped by status to avoid polluting context
+   */
+  private async gatherExistingWorkContext(
+    projectPath: string,
+    options?: { includeFeatures?: boolean; includeIdeas?: boolean }
+  ): Promise<string> {
+    const { includeFeatures = true, includeIdeas = true } = options ?? {};
+    const parts: string[] = [];
+
+    // Load existing features from the board
+    if (includeFeatures && this.featureLoader) {
+      try {
+        const features = await this.featureLoader.getAll(projectPath);
+        if (features.length > 0) {
+          parts.push('## Existing Features (Do NOT regenerate these)');
+          parts.push(
+            'The following features already exist on the board. Do NOT suggest similar ideas:\n'
+          );
+
+          // Group features by status for clarity
+          const byStatus: Record<string, string[]> = {
+            done: [],
+            'in-review': [],
+            'in-progress': [],
+            backlog: [],
+          };
+
+          for (const feature of features) {
+            const status = feature.status || 'backlog';
+            const title = feature.title || 'Untitled';
+            if (byStatus[status]) {
+              byStatus[status].push(title);
+            } else {
+              byStatus['backlog'].push(title);
+            }
+          }
+
+          // Output completed features first (most important to not duplicate)
+          if (byStatus['done'].length > 0) {
+            parts.push(`**Completed:** ${byStatus['done'].join(', ')}`);
+          }
+          if (byStatus['in-review'].length > 0) {
+            parts.push(`**In Review:** ${byStatus['in-review'].join(', ')}`);
+          }
+          if (byStatus['in-progress'].length > 0) {
+            parts.push(`**In Progress:** ${byStatus['in-progress'].join(', ')}`);
+          }
+          if (byStatus['backlog'].length > 0) {
+            parts.push(`**Backlog:** ${byStatus['backlog'].join(', ')}`);
+          }
+          parts.push('');
+        }
+      } catch (error) {
+        logger.warn('Failed to load existing features:', error);
+      }
+    }
+
+    // Load existing ideas
+    if (includeIdeas) {
+      try {
+        const ideas = await this.getIdeas(projectPath);
+        // Filter out archived ideas
+        const activeIdeas = ideas.filter((idea) => idea.status !== 'archived');
+
+        if (activeIdeas.length > 0) {
+          parts.push('## Existing Ideas (Do NOT regenerate these)');
+          parts.push(
+            'The following ideas have already been captured. Do NOT suggest similar ideas:\n'
+          );
+
+          // Group by category for organization
+          const byCategory: Record<string, string[]> = {};
+          for (const idea of activeIdeas) {
+            const cat = idea.category || 'feature';
+            if (!byCategory[cat]) {
+              byCategory[cat] = [];
+            }
+            byCategory[cat].push(idea.title);
+          }
+
+          for (const [category, titles] of Object.entries(byCategory)) {
+            parts.push(`**${category}:** ${titles.join(', ')}`);
+          }
+          parts.push('');
+        }
+      } catch (error) {
+        logger.warn('Failed to load existing ideas:', error);
+      }
+    }
+
+    return parts.join('\n');
+  }
+
+  private async gatherProjectStructure(projectPath: string): Promise<{
+    totalFiles: number;
+    routes: AnalysisFileInfo[];
+    components: AnalysisFileInfo[];
+    services: AnalysisFileInfo[];
+    framework?: string;
+    language?: string;
+    dependencies?: string[];
+  }> {
+    const routes: AnalysisFileInfo[] = [];
+    const components: AnalysisFileInfo[] = [];
+    const services: AnalysisFileInfo[] = [];
+    let totalFiles = 0;
+    let framework: string | undefined;
+    let language: string | undefined;
+    const dependencies: string[] = [];
+
+    // Check for package.json to detect framework and dependencies
+    try {
+      const packageJsonPath = path.join(projectPath, 'package.json');
+      const content = (await secureFs.readFile(packageJsonPath, 'utf-8')) as string;
+      const pkg = JSON.parse(content);
+
+      const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+      dependencies.push(...Object.keys(allDeps).slice(0, 20)); // Top 20 deps
+
+      if (allDeps.react) framework = 'React';
+      else if (allDeps.vue) framework = 'Vue';
+      else if (allDeps.angular) framework = 'Angular';
+      else if (allDeps.next) framework = 'Next.js';
+      else if (allDeps.express) framework = 'Express';
+
+      language = allDeps.typescript ? 'TypeScript' : 'JavaScript';
+    } catch {
+      // No package.json
+    }
+
+    // Scan common directories
+    const scanPatterns = [
+      { dir: 'src/routes', type: 'route' as const },
+      { dir: 'src/pages', type: 'route' as const },
+      { dir: 'app', type: 'route' as const },
+      { dir: 'src/components', type: 'component' as const },
+      { dir: 'components', type: 'component' as const },
+      { dir: 'src/services', type: 'service' as const },
+      { dir: 'src/lib', type: 'service' as const },
+      { dir: 'lib', type: 'service' as const },
+    ];
+
+    for (const pattern of scanPatterns) {
+      const fullPath = path.join(projectPath, pattern.dir);
+      try {
+        const files = await this.scanDirectory(fullPath, pattern.type);
+        totalFiles += files.length;
+
+        if (pattern.type === 'route') routes.push(...files);
+        else if (pattern.type === 'component') components.push(...files);
+        else if (pattern.type === 'service') services.push(...files);
+      } catch {
+        // Directory doesn't exist
+      }
+    }
+
+    return {
+      totalFiles,
+      routes: routes.slice(0, 20),
+      components: components.slice(0, 30),
+      services: services.slice(0, 20),
+      framework,
+      language,
+      dependencies,
+    };
+  }
+
+  private async scanDirectory(
+    dirPath: string,
+    type: 'route' | 'component' | 'service' | 'model' | 'config' | 'test' | 'other'
+  ): Promise<AnalysisFileInfo[]> {
+    const results: AnalysisFileInfo[] = [];
+
+    try {
+      const entries = (await secureFs.readdir(dirPath, {
+        withFileTypes: true,
+      })) as import('fs').Dirent[];
+
+      for (const entry of entries) {
+        if (entry.isDirectory()) {
+          const subResults = await this.scanDirectory(path.join(dirPath, entry.name), type);
+          results.push(...subResults);
+        } else if (entry.isFile() && this.isCodeFile(entry.name)) {
+          results.push({
+            path: path.join(dirPath, entry.name),
+            type,
+            name: entry.name.replace(/\.(tsx?|jsx?|vue)$/, ''),
+          });
+        }
+      }
+    } catch {
+      // Ignore errors
+    }
+
+    return results;
+  }
+
+  private isCodeFile(filename: string): boolean {
+    return (
+      /\.(tsx?|jsx?|vue|svelte)$/.test(filename) &&
+      !filename.includes('.test.') &&
+      !filename.includes('.spec.')
+    );
+  }
+
+  private async generateAnalysisSuggestions(
+    _projectPath: string,
+    structure: Awaited<ReturnType<typeof this.gatherProjectStructure>>
+  ): Promise<AnalysisSuggestion[]> {
+    // Generate basic suggestions based on project structure analysis
+    const suggestions: AnalysisSuggestion[] = [];
+
+    if (structure.routes.length > 0 && structure.routes.length < 5) {
+      suggestions.push({
+        id: this.generateId('sug'),
+        category: 'feature',
+        title: 'Expand Core Functionality',
+        description: 'The app has a small number of routes. Consider adding more features.',
+        rationale: `Only ${structure.routes.length} routes detected. Most apps benefit from additional navigation options.`,
+        priority: 'medium',
+      });
+    }
+
+    if (
+      !structure.dependencies?.includes('react-query') &&
+      !structure.dependencies?.includes('@tanstack/react-query')
+    ) {
+      suggestions.push({
+        id: this.generateId('sug'),
+        category: 'technical',
+        title: 'Add Data Fetching Library',
+        description: 'Consider adding React Query or similar for better data management.',
+        rationale:
+          'Data fetching libraries provide caching, background updates, and better loading states.',
+        priority: 'low',
+      });
+    }
+
+    return suggestions;
+  }
+
+  private generateAnalysisSummary(
+    structure: Awaited<ReturnType<typeof this.gatherProjectStructure>>,
+    suggestions: AnalysisSuggestion[]
+  ): string {
+    const parts: string[] = [];
+
+    if (structure.framework) {
+      parts.push(`${structure.framework} ${structure.language || ''} application`);
+    }
+
+    parts.push(`with ${structure.totalFiles} code files`);
+    parts.push(`${structure.routes.length} routes`);
+    parts.push(`${structure.components.length} components`);
+    parts.push(`${structure.services.length} services`);
+
+    const summary = parts.join(', ');
+    const highPriority = suggestions.filter((s) => s.priority === 'high').length;
+
+    return `${summary}. Found ${suggestions.length} improvement opportunities${highPriority > 0 ? ` (${highPriority} high priority)` : ''}.`;
+  }
+
+  /**
+   * Map idea category to feature category
+   * Used internally for idea-to-feature conversion
+   */
+  private mapIdeaCategoryToFeatureCategory(category: IdeaCategory): string {
+    return this.mapSuggestionCategoryToFeatureCategory(category);
+  }
+
+  /**
+   * Map suggestion/idea category to feature category
+   * This is the single source of truth for category mapping.
+   * Used by both idea-to-feature conversion and suggestion-to-feature conversion.
+   */
+  mapSuggestionCategoryToFeatureCategory(category: IdeaCategory): string {
+    const mapping: Record<IdeaCategory, string> = {
+      feature: 'ui',
+      'ux-ui': 'enhancement',
+      dx: 'chore',
+      growth: 'feature',
+      technical: 'refactor',
+      security: 'bug',
+      performance: 'enhancement',
+      accessibility: 'enhancement',
+      analytics: 'feature',
+    };
+    return mapping[category] || 'feature';
+  }
+
+  private async saveSessionToDisk(
+    projectPath: string,
+    session: IdeationSession,
+    messages: IdeationMessage[]
+  ): Promise<void> {
+    await secureFs.mkdir(getIdeationSessionsDir(projectPath), { recursive: true });
+    const data = { session, messages };
+    await secureFs.writeFile(
+      getIdeationSessionPath(projectPath, session.id),
+      JSON.stringify(data, null, 2),
+      'utf-8'
+    );
+  }
+
+  private async loadSessionFromDisk(
+    projectPath: string,
+    sessionId: string
+  ): Promise<{ session: IdeationSession; messages: IdeationMessage[] } | null> {
+    try {
+      const content = (await secureFs.readFile(
+        getIdeationSessionPath(projectPath, sessionId),
+        'utf-8'
+      )) as string;
+      return JSON.parse(content);
+    } catch {
+      return null;
+    }
+  }
+
+  private generateId(prefix: string): string {
+    return `${prefix}-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+  }
+}
diff --git a/temp_repo/apps/server/src/services/init-script-service.ts b/temp_repo/apps/server/src/services/init-script-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7731c5ee542464b2c12bda78e6f75c4268723bcc
--- /dev/null
+++ b/temp_repo/apps/server/src/services/init-script-service.ts
@@ -0,0 +1,360 @@
+/**
+ * Init Script Service - Executes worktree initialization scripts
+ *
+ * Runs the .automaker/worktree-init.sh script after worktree creation.
+ * Uses Git Bash on Windows for cross-platform shell script compatibility.
+ */
+
+import { spawn } from 'child_process';
+import path from 'path';
+import { createLogger } from '@automaker/utils';
+import { systemPathExists, getShellPaths, findGitBashPath } from '@automaker/platform';
+import { findCommand } from '../lib/cli-detection.js';
+import type { EventEmitter } from '../lib/events.js';
+import { readWorktreeMetadata, writeWorktreeMetadata } from '../lib/worktree-metadata.js';
+import * as secureFs from '../lib/secure-fs.js';
+
+const logger = createLogger('InitScript');
+
+export interface InitScriptOptions {
+  /** Absolute path to the project root */
+  projectPath: string;
+  /** Absolute path to the worktree directory */
+  worktreePath: string;
+  /** Branch name for this worktree */
+  branch: string;
+  /** Event emitter for streaming output */
+  emitter: EventEmitter;
+}
+
+interface ShellCommand {
+  shell: string;
+  args: string[];
+}
+
+/**
+ * Init Script Service
+ *
+ * Handles execution of worktree initialization scripts with cross-platform
+ * shell detection and proper streaming of output via WebSocket events.
+ */
+export class InitScriptService {
+  private cachedShellCommand: ShellCommand | null | undefined = undefined;
+
+  /**
+   * Get the path to the init script for a project
+   */
+  getInitScriptPath(projectPath: string): string {
+    return path.join(projectPath, '.automaker', 'worktree-init.sh');
+  }
+
+  /**
+   * Check if the init script has already been run for a worktree
+   */
+  async hasInitScriptRun(projectPath: string, branch: string): Promise<boolean> {
+    const metadata = await readWorktreeMetadata(projectPath, branch);
+    return metadata?.initScriptRan === true;
+  }
+
+  /**
+   * Find the appropriate shell for running scripts
+   * Uses findGitBashPath() on Windows to avoid WSL bash, then falls back to PATH
+   */
+  async findShellCommand(): Promise<ShellCommand | null> {
+    // Return cached result if available
+    if (this.cachedShellCommand !== undefined) {
+      return this.cachedShellCommand;
+    }
+
+    if (process.platform === 'win32') {
+      // On Windows, prioritize Git Bash over WSL bash (C:\Windows\System32\bash.exe)
+      // WSL bash may not be properly configured and causes ENOENT errors
+
+      // First try known Git Bash installation paths
+      const gitBashPath = await findGitBashPath();
+      if (gitBashPath) {
+        logger.debug(`Found Git Bash at: ${gitBashPath}`);
+        this.cachedShellCommand = { shell: gitBashPath, args: [] };
+        return this.cachedShellCommand;
+      }
+
+      // Fall back to finding bash in PATH, but skip WSL bash
+      const bashInPath = await findCommand(['bash']);
+      if (bashInPath && !bashInPath.toLowerCase().includes('system32')) {
+        logger.debug(`Found bash in PATH at: ${bashInPath}`);
+        this.cachedShellCommand = { shell: bashInPath, args: [] };
+        return this.cachedShellCommand;
+      }
+
+      logger.warn('Git Bash not found. WSL bash was skipped to avoid compatibility issues.');
+      this.cachedShellCommand = null;
+      return null;
+    }
+
+    // Unix-like systems: use getShellPaths() and check existence
+    const shellPaths = getShellPaths();
+    const posixShells = shellPaths.filter(
+      (p) => p.includes('bash') || p === '/bin/sh' || p === '/usr/bin/sh'
+    );
+
+    for (const shellPath of posixShells) {
+      try {
+        if (systemPathExists(shellPath)) {
+          this.cachedShellCommand = { shell: shellPath, args: [] };
+          return this.cachedShellCommand;
+        }
+      } catch {
+        // Path not allowed or doesn't exist, continue
+      }
+    }
+
+    // Ultimate fallback
+    if (systemPathExists('/bin/sh')) {
+      this.cachedShellCommand = { shell: '/bin/sh', args: [] };
+      return this.cachedShellCommand;
+    }
+
+    this.cachedShellCommand = null;
+    return null;
+  }
+
+  /**
+   * Run the worktree initialization script
+   * Non-blocking - returns immediately after spawning
+   */
+  async runInitScript(options: InitScriptOptions): Promise<void> {
+    const { projectPath, worktreePath, branch, emitter } = options;
+
+    const scriptPath = this.getInitScriptPath(projectPath);
+
+    // Check if script exists using secureFs (respects ALLOWED_ROOT_DIRECTORY)
+    try {
+      await secureFs.access(scriptPath);
+    } catch {
+      logger.debug(`No init script found at ${scriptPath}`);
+      return;
+    }
+
+    // Check if already run
+    if (await this.hasInitScriptRun(projectPath, branch)) {
+      logger.info(`Init script already ran for branch "${branch}", skipping`);
+      return;
+    }
+
+    // Get shell command
+    const shellCmd = await this.findShellCommand();
+    if (!shellCmd) {
+      const error =
+        process.platform === 'win32'
+          ? 'Git Bash not found. Please install Git for Windows to run init scripts.'
+          : 'No shell found (/bin/bash or /bin/sh)';
+      logger.error(error);
+
+      // Update metadata with error, preserving existing metadata
+      const existingMetadata = await readWorktreeMetadata(projectPath, branch);
+      await writeWorktreeMetadata(projectPath, branch, {
+        branch,
+        createdAt: existingMetadata?.createdAt || new Date().toISOString(),
+        pr: existingMetadata?.pr,
+        initScriptRan: true,
+        initScriptStatus: 'failed',
+        initScriptError: error,
+      });
+
+      emitter.emit('worktree:init-completed', {
+        projectPath,
+        worktreePath,
+        branch,
+        success: false,
+        error,
+      });
+      return;
+    }
+
+    logger.info(`Running init script for branch "${branch}" in ${worktreePath}`);
+    logger.debug(`Using shell: ${shellCmd.shell}`);
+
+    // Update metadata to mark as running
+    const existingMetadata = await readWorktreeMetadata(projectPath, branch);
+    await writeWorktreeMetadata(projectPath, branch, {
+      branch,
+      createdAt: existingMetadata?.createdAt || new Date().toISOString(),
+      pr: existingMetadata?.pr,
+      initScriptRan: false,
+      initScriptStatus: 'running',
+    });
+
+    // Emit started event
+    emitter.emit('worktree:init-started', {
+      projectPath,
+      worktreePath,
+      branch,
+    });
+
+    // Build safe environment - only pass necessary variables, not all of process.env
+    // This prevents exposure of sensitive credentials like ANTHROPIC_API_KEY
+    const safeEnv: Record<string, string> = {
+      // Automaker-specific variables
+      AUTOMAKER_PROJECT_PATH: projectPath,
+      AUTOMAKER_WORKTREE_PATH: worktreePath,
+      AUTOMAKER_BRANCH: branch,
+
+      // Essential system variables
+      PATH: process.env.PATH || '',
+      HOME: process.env.HOME || '',
+      USER: process.env.USER || '',
+      TMPDIR: process.env.TMPDIR || process.env.TEMP || process.env.TMP || '/tmp',
+
+      // Shell and locale
+      SHELL: process.env.SHELL || '',
+      LANG: process.env.LANG || 'en_US.UTF-8',
+      LC_ALL: process.env.LC_ALL || '',
+
+      // Force color output even though we're not a TTY
+      FORCE_COLOR: '1',
+      npm_config_color: 'always',
+      CLICOLOR_FORCE: '1',
+
+      // Git configuration
+      GIT_TERMINAL_PROMPT: '0',
+    };
+
+    // Platform-specific additions
+    if (process.platform === 'win32') {
+      safeEnv.USERPROFILE = process.env.USERPROFILE || '';
+      safeEnv.APPDATA = process.env.APPDATA || '';
+      safeEnv.LOCALAPPDATA = process.env.LOCALAPPDATA || '';
+      safeEnv.SystemRoot = process.env.SystemRoot || 'C:\\Windows';
+      safeEnv.TEMP = process.env.TEMP || '';
+    }
+
+    // Spawn the script with safe environment
+    const child = spawn(shellCmd.shell, [...shellCmd.args, scriptPath], {
+      cwd: worktreePath,
+      env: safeEnv,
+      stdio: ['ignore', 'pipe', 'pipe'],
+    });
+
+    // Stream stdout
+    child.stdout?.on('data', (data: Buffer) => {
+      const content = data.toString();
+      emitter.emit('worktree:init-output', {
+        projectPath,
+        branch,
+        type: 'stdout',
+        content,
+      });
+    });
+
+    // Stream stderr
+    child.stderr?.on('data', (data: Buffer) => {
+      const content = data.toString();
+      emitter.emit('worktree:init-output', {
+        projectPath,
+        branch,
+        type: 'stderr',
+        content,
+      });
+    });
+
+    // Handle completion
+    child.on('exit', async (code) => {
+      const success = code === 0;
+      const status = success ? 'success' : 'failed';
+
+      logger.info(`Init script for branch "${branch}" ${status} with exit code ${code}`);
+
+      // Update metadata
+      const metadata = await readWorktreeMetadata(projectPath, branch);
+      await writeWorktreeMetadata(projectPath, branch, {
+        branch,
+        createdAt: metadata?.createdAt || new Date().toISOString(),
+        pr: metadata?.pr,
+        initScriptRan: true,
+        initScriptStatus: status,
+        initScriptError: success ? undefined : `Exit code: ${code}`,
+      });
+
+      // Emit completion event
+      emitter.emit('worktree:init-completed', {
+        projectPath,
+        worktreePath,
+        branch,
+        success,
+        exitCode: code,
+      });
+    });
+
+    child.on('error', async (error) => {
+      logger.error(`Init script error for branch "${branch}":`, error);
+
+      // Update metadata
+      const metadata = await readWorktreeMetadata(projectPath, branch);
+      await writeWorktreeMetadata(projectPath, branch, {
+        branch,
+        createdAt: metadata?.createdAt || new Date().toISOString(),
+        pr: metadata?.pr,
+        initScriptRan: true,
+        initScriptStatus: 'failed',
+        initScriptError: error.message,
+      });
+
+      // Emit completion with error
+      emitter.emit('worktree:init-completed', {
+        projectPath,
+        worktreePath,
+        branch,
+        success: false,
+        error: error.message,
+      });
+    });
+  }
+
+  /**
+   * Force re-run the worktree initialization script
+   * Ignores the initScriptRan flag - useful for testing or re-setup
+   */
+  async forceRunInitScript(options: InitScriptOptions): Promise<void> {
+    const { projectPath, branch } = options;
+
+    // Reset the initScriptRan flag so the script will run
+    const metadata = await readWorktreeMetadata(projectPath, branch);
+    if (metadata) {
+      await writeWorktreeMetadata(projectPath, branch, {
+        ...metadata,
+        initScriptRan: false,
+        initScriptStatus: undefined,
+        initScriptError: undefined,
+      });
+    }
+
+    // Now run the script
+    await this.runInitScript(options);
+  }
+}
+
+// Singleton instance for convenience
+let initScriptService: InitScriptService | null = null;
+
+/**
+ * Get the singleton InitScriptService instance
+ */
+export function getInitScriptService(): InitScriptService {
+  if (!initScriptService) {
+    initScriptService = new InitScriptService();
+  }
+  return initScriptService;
+}
+
+// Export convenience functions that use the singleton
+export const getInitScriptPath = (projectPath: string) =>
+  getInitScriptService().getInitScriptPath(projectPath);
+
+export const hasInitScriptRun = (projectPath: string, branch: string) =>
+  getInitScriptService().hasInitScriptRun(projectPath, branch);
+
+export const runInitScript = (options: InitScriptOptions) =>
+  getInitScriptService().runInitScript(options);
+
+export const forceRunInitScript = (options: InitScriptOptions) =>
+  getInitScriptService().forceRunInitScript(options);
diff --git a/temp_repo/apps/server/src/services/mcp-test-service.ts b/temp_repo/apps/server/src/services/mcp-test-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4232de60167d295d4c5108e2d812d356d382fab4
--- /dev/null
+++ b/temp_repo/apps/server/src/services/mcp-test-service.ts
@@ -0,0 +1,251 @@
+/**
+ * MCP Test Service
+ *
+ * Provides functionality to test MCP server connections and list available tools.
+ * Supports stdio, SSE, and HTTP transport types.
+ */
+
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
+import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js';
+import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import type { MCPServerConfig, MCPToolInfo } from '@automaker/types';
+import type { SettingsService } from './settings-service.js';
+
+const execAsync = promisify(exec);
+const DEFAULT_TIMEOUT = 10000; // 10 seconds
+const IS_WINDOWS = process.platform === 'win32';
+
+export interface MCPTestResult {
+  success: boolean;
+  tools?: MCPToolInfo[];
+  error?: string;
+  connectionTime?: number;
+  serverInfo?: {
+    name?: string;
+    version?: string;
+  };
+}
+
+/**
+ * MCP Test Service for testing server connections and listing tools
+ */
+export class MCPTestService {
+  private settingsService: SettingsService;
+
+  constructor(settingsService: SettingsService) {
+    this.settingsService = settingsService;
+  }
+
+  /**
+   * Test connection to an MCP server and list its tools
+   */
+  async testServer(serverConfig: MCPServerConfig): Promise<MCPTestResult> {
+    const startTime = Date.now();
+    let client: Client | null = null;
+    let transport:
+      | StdioClientTransport
+      | SSEClientTransport
+      | StreamableHTTPClientTransport
+      | null = null;
+
+    try {
+      client = new Client({
+        name: 'automaker-mcp-test',
+        version: '1.0.0',
+      });
+
+      // Create transport based on server type
+      transport = await this.createTransport(serverConfig);
+
+      // Connect with timeout
+      await Promise.race([
+        client.connect(transport),
+        this.timeout(DEFAULT_TIMEOUT, 'Connection timeout'),
+      ]);
+
+      // List tools with timeout
+      const toolsResult = await Promise.race([
+        client.listTools(),
+        this.timeout<{
+          tools: Array<{
+            name: string;
+            description?: string;
+            inputSchema?: Record<string, unknown>;
+          }>;
+        }>(DEFAULT_TIMEOUT, 'List tools timeout'),
+      ]);
+
+      const connectionTime = Date.now() - startTime;
+
+      // Convert tools to MCPToolInfo format
+      const tools: MCPToolInfo[] = (toolsResult.tools || []).map(
+        (tool: { name: string; description?: string; inputSchema?: Record<string, unknown> }) => ({
+          name: tool.name,
+          description: tool.description,
+          inputSchema: tool.inputSchema,
+          enabled: true,
+        })
+      );
+
+      return {
+        success: true,
+        tools,
+        connectionTime,
+        serverInfo: {
+          name: serverConfig.name,
+          version: undefined, // Could be extracted from server info if available
+        },
+      };
+    } catch (error) {
+      const connectionTime = Date.now() - startTime;
+      return {
+        success: false,
+        error: this.getErrorMessage(error),
+        connectionTime,
+      };
+    } finally {
+      // Clean up client connection and ensure process termination
+      await this.cleanupConnection(client, transport);
+    }
+  }
+
+  /**
+   * Clean up MCP client connection and terminate spawned processes
+   *
+   * On Windows, child processes spawned via 'cmd /c' don't get terminated when the
+   * parent process is killed. We use taskkill with /t flag to kill the entire process tree.
+   * This prevents orphaned MCP server processes that would spam logs with ping warnings.
+   *
+   * IMPORTANT: We must run taskkill BEFORE client.close() because:
+   * - client.close() kills only the parent cmd.exe process
+   * - This orphans the child node.exe processes before we can kill them
+   * - taskkill /t needs the parent PID to exist to traverse the process tree
+   */
+  private async cleanupConnection(
+    client: Client | null,
+    transport: StdioClientTransport | SSEClientTransport | StreamableHTTPClientTransport | null
+  ): Promise<void> {
+    // Get the PID before any cleanup (only available for stdio transports)
+    const pid = transport instanceof StdioClientTransport ? transport.pid : null;
+
+    // On Windows with stdio transport, kill the entire process tree FIRST
+    // This must happen before client.close() which would orphan child processes
+    if (IS_WINDOWS && pid) {
+      try {
+        // taskkill /f = force, /t = kill process tree, /pid = process ID
+        await execAsync(`taskkill /f /t /pid ${pid}`);
+      } catch {
+        // Process may have already exited, which is fine
+      }
+    }
+
+    // Now do the standard close (may be a no-op if taskkill already killed everything)
+    if (client) {
+      try {
+        await client.close();
+      } catch {
+        // Expected if taskkill already terminated the process
+      }
+    }
+  }
+
+  /**
+   * Test server by ID (looks up config from settings)
+   */
+  async testServerById(serverId: string): Promise<MCPTestResult> {
+    try {
+      const globalSettings = await this.settingsService.getGlobalSettings();
+      const serverConfig = globalSettings.mcpServers?.find((s) => s.id === serverId);
+
+      if (!serverConfig) {
+        return {
+          success: false,
+          error: `Server with ID "${serverId}" not found`,
+        };
+      }
+
+      return this.testServer(serverConfig);
+    } catch (error) {
+      return {
+        success: false,
+        error: this.getErrorMessage(error),
+      };
+    }
+  }
+
+  /**
+   * Create appropriate transport based on server type
+   */
+  private async createTransport(
+    config: MCPServerConfig
+  ): Promise<StdioClientTransport | SSEClientTransport | StreamableHTTPClientTransport> {
+    if (config.type === 'sse') {
+      if (!config.url) {
+        throw new Error('URL is required for SSE transport');
+      }
+      // Use eventSourceInit workaround for SSE headers (SDK bug workaround)
+      // See: https://github.com/modelcontextprotocol/typescript-sdk/issues/436
+      const headers = config.headers;
+      return new SSEClientTransport(new URL(config.url), {
+        requestInit: headers ? { headers } : undefined,
+        eventSourceInit: headers
+          ? {
+              fetch: (url: string | URL | Request, init?: RequestInit) => {
+                const fetchHeaders = new Headers(init?.headers || {});
+                for (const [key, value] of Object.entries(headers)) {
+                  fetchHeaders.set(key, value);
+                }
+                return fetch(url, { ...init, headers: fetchHeaders });
+              },
+            }
+          : undefined,
+      });
+    }
+
+    if (config.type === 'http') {
+      if (!config.url) {
+        throw new Error('URL is required for HTTP transport');
+      }
+      return new StreamableHTTPClientTransport(new URL(config.url), {
+        requestInit: config.headers
+          ? {
+              headers: config.headers,
+            }
+          : undefined,
+      });
+    }
+
+    // Default to stdio
+    if (!config.command) {
+      throw new Error('Command is required for stdio transport');
+    }
+
+    return new StdioClientTransport({
+      command: config.command,
+      args: config.args,
+      env: config.env,
+    });
+  }
+
+  /**
+   * Create a timeout promise
+   */
+  private timeout<T>(ms: number, message: string): Promise<T> {
+    return new Promise((_, reject) => {
+      setTimeout(() => reject(new Error(message)), ms);
+    });
+  }
+
+  /**
+   * Extract error message from unknown error
+   */
+  private getErrorMessage(error: unknown): string {
+    if (error instanceof Error) {
+      return error.message;
+    }
+    return String(error);
+  }
+}
diff --git a/temp_repo/apps/server/src/services/merge-service.ts b/temp_repo/apps/server/src/services/merge-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0301d4a860c6b2773b4562d1a6bcc49598675ca7
--- /dev/null
+++ b/temp_repo/apps/server/src/services/merge-service.ts
@@ -0,0 +1,299 @@
+/**
+ * MergeService - Direct merge operations without HTTP
+ *
+ * Extracted from worktree merge route to allow internal service calls.
+ */
+
+import { createLogger, isValidBranchName, isValidRemoteName } from '@automaker/utils';
+import { type EventEmitter } from '../lib/events.js';
+import { execGitCommand } from '@automaker/git-utils';
+const logger = createLogger('MergeService');
+
+export interface MergeOptions {
+  squash?: boolean;
+  message?: string;
+  deleteWorktreeAndBranch?: boolean;
+  /** Remote name to fetch from before merging (defaults to 'origin') */
+  remote?: string;
+}
+
+export interface MergeServiceResult {
+  success: boolean;
+  error?: string;
+  hasConflicts?: boolean;
+  conflictFiles?: string[];
+  mergedBranch?: string;
+  targetBranch?: string;
+  deleted?: {
+    worktreeDeleted: boolean;
+    branchDeleted: boolean;
+  };
+}
+
+/**
+ * Perform a git merge operation directly without HTTP.
+ *
+ * @param projectPath - Path to the git repository
+ * @param branchName - Source branch to merge
+ * @param worktreePath - Path to the worktree (used for deletion if requested)
+ * @param targetBranch - Branch to merge into (defaults to 'main')
+ * @param options - Merge options
+ * @param options.squash - If true, perform a squash merge
+ * @param options.message - Custom merge commit message
+ * @param options.deleteWorktreeAndBranch - If true, delete worktree and branch after merge
+ * @param options.remote - Remote name to fetch from before merging (defaults to 'origin')
+ */
+export async function performMerge(
+  projectPath: string,
+  branchName: string,
+  worktreePath: string,
+  targetBranch: string = 'main',
+  options?: MergeOptions,
+  emitter?: EventEmitter
+): Promise<MergeServiceResult> {
+  if (!projectPath || !branchName || !worktreePath) {
+    return {
+      success: false,
+      error: 'projectPath, branchName, and worktreePath are required',
+    };
+  }
+
+  const mergeTo = targetBranch || 'main';
+
+  // Validate branch names early to reject invalid input before any git operations
+  if (!isValidBranchName(branchName)) {
+    return {
+      success: false,
+      error: `Invalid source branch name: "${branchName}"`,
+    };
+  }
+  if (!isValidBranchName(mergeTo)) {
+    return {
+      success: false,
+      error: `Invalid target branch name: "${mergeTo}"`,
+    };
+  }
+
+  // Validate source branch exists (using safe array-based command)
+  try {
+    await execGitCommand(['rev-parse', '--verify', branchName], projectPath);
+  } catch {
+    return {
+      success: false,
+      error: `Branch "${branchName}" does not exist`,
+    };
+  }
+
+  // Validate target branch exists (using safe array-based command)
+  try {
+    await execGitCommand(['rev-parse', '--verify', mergeTo], projectPath);
+  } catch {
+    return {
+      success: false,
+      error: `Target branch "${mergeTo}" does not exist`,
+    };
+  }
+
+  // Validate the remote name to prevent git option injection.
+  // Reject invalid remote names so the caller knows their input was wrong,
+  // consistent with how invalid branch names are handled above.
+  const remote = options?.remote || 'origin';
+  if (!isValidRemoteName(remote)) {
+    logger.warn('Invalid remote name supplied to merge-service', {
+      remote,
+      projectPath,
+    });
+    return {
+      success: false,
+      error: `Invalid remote name: "${remote}"`,
+    };
+  }
+
+  // Fetch latest from remote before merging to ensure we have up-to-date refs
+  try {
+    await execGitCommand(['fetch', remote], projectPath);
+  } catch (fetchError) {
+    logger.warn('Failed to fetch from remote before merge; proceeding with local refs', {
+      remote,
+      projectPath,
+      error: (fetchError as Error).message,
+    });
+    // Non-fatal: proceed with local refs if fetch fails (e.g. offline)
+  }
+
+  // Emit merge:start after validating inputs
+  emitter?.emit('merge:start', { branchName, targetBranch: mergeTo, worktreePath });
+
+  // Merge the feature branch into the target branch (using safe array-based commands)
+  const mergeMessage = options?.message || `Merge ${branchName} into ${mergeTo}`;
+  const mergeArgs = options?.squash
+    ? ['merge', '--squash', branchName]
+    : ['merge', branchName, '-m', mergeMessage];
+
+  try {
+    // Set LC_ALL=C so git always emits English output regardless of the system
+    // locale, making text-based conflict detection reliable.
+    await execGitCommand(mergeArgs, projectPath, { LC_ALL: 'C' });
+  } catch (mergeError: unknown) {
+    // Check if this is a merge conflict.  We use a multi-layer strategy so
+    // that detection is reliable even when locale settings vary or git's text
+    // output changes across versions:
+    //
+    //  1. Primary (text-based): scan the error output for well-known English
+    //     conflict markers.  Because we pass LC_ALL=C above these strings are
+    //     always in English, but we keep the check as one layer among several.
+    //
+    //  2. Unmerged-path check: run `git diff --name-only --diff-filter=U`
+    //     (locale-stable) and treat any non-empty output as a conflict
+    //     indicator, capturing the file list at the same time.
+    //
+    //  3. Fallback status check: run `git status --porcelain` and look for
+    //     lines whose first two characters indicate an unmerged state
+    //     (UU, AA, DD, AU, UA, DU, UD).
+    //
+    // hasConflicts is true when ANY of the three layers returns positive.
+    const err = mergeError as { stdout?: string; stderr?: string; message?: string };
+    const output = `${err.stdout || ''} ${err.stderr || ''} ${err.message || ''}`;
+
+    // Layer 1 – text matching (locale-safe because we set LC_ALL=C above).
+    const textIndicatesConflict =
+      output.includes('CONFLICT') || output.includes('Automatic merge failed');
+
+    // Layers 2 & 3 – repository state inspection (locale-independent).
+    // Layer 2: get conflicted files via diff (also locale-stable output).
+    let conflictFiles: string[] | undefined;
+    let diffIndicatesConflict = false;
+    try {
+      const diffOutput = await execGitCommand(
+        ['diff', '--name-only', '--diff-filter=U'],
+        projectPath,
+        { LC_ALL: 'C' }
+      );
+      const files = diffOutput
+        .trim()
+        .split('\n')
+        .filter((f) => f.trim().length > 0);
+      if (files.length > 0) {
+        diffIndicatesConflict = true;
+        conflictFiles = files;
+      }
+    } catch {
+      // If we can't get the file list, leave conflictFiles undefined so callers
+      // can distinguish "no conflicts" (empty array) from "unknown due to diff failure" (undefined)
+    }
+
+    // Layer 3: check for unmerged paths via machine-readable git status.
+    let hasUnmergedPaths = false;
+    try {
+      const statusOutput = await execGitCommand(['status', '--porcelain'], projectPath, {
+        LC_ALL: 'C',
+      });
+      // Unmerged status codes occupy the first two characters of each line.
+      // Standard unmerged codes: UU, AA, DD, AU, UA, DU, UD.
+      const unmergedLines = statusOutput
+        .split('\n')
+        .filter((line) => /^(UU|AA|DD|AU|UA|DU|UD)/.test(line));
+      hasUnmergedPaths = unmergedLines.length > 0;
+
+      // If Layer 2 did not populate conflictFiles (e.g. diff failed or returned
+      // nothing) but Layer 3 does detect unmerged paths, parse the status lines
+      // to extract filenames and assign them to conflictFiles so callers always
+      // receive an accurate file list when conflicts are present.
+      if (hasUnmergedPaths && conflictFiles === undefined) {
+        const parsedFiles = unmergedLines
+          .map((line) => line.slice(2).trim())
+          .filter((f) => f.length > 0);
+        // Deduplicate (e.g. rename entries can appear twice)
+        conflictFiles = [...new Set(parsedFiles)];
+      }
+    } catch {
+      // git status failing is itself a sign something is wrong; leave
+      // hasUnmergedPaths as false and rely on the other layers.
+    }
+
+    const hasConflicts = textIndicatesConflict || diffIndicatesConflict || hasUnmergedPaths;
+
+    if (hasConflicts) {
+      // Emit merge:conflict event with conflict details
+      emitter?.emit('merge:conflict', { branchName, targetBranch: mergeTo, conflictFiles });
+
+      return {
+        success: false,
+        error: `Merge CONFLICT: Automatic merge of "${branchName}" into "${mergeTo}" failed. Please resolve conflicts manually.`,
+        hasConflicts: true,
+        conflictFiles,
+      };
+    }
+
+    // Emit merge:error for non-conflict errors before re-throwing
+    emitter?.emit('merge:error', {
+      branchName,
+      targetBranch: mergeTo,
+      error: err.message || String(mergeError),
+    });
+
+    // Re-throw non-conflict errors
+    throw mergeError;
+  }
+
+  // If squash merge, need to commit (using safe array-based command)
+  if (options?.squash) {
+    const squashMessage = options?.message || `Merge ${branchName} (squash)`;
+    try {
+      await execGitCommand(['commit', '-m', squashMessage], projectPath);
+    } catch (commitError: unknown) {
+      const err = commitError as { message?: string };
+      // Emit merge:error so subscribers always receive either merge:success or merge:error
+      emitter?.emit('merge:error', {
+        branchName,
+        targetBranch: mergeTo,
+        error: err.message || String(commitError),
+      });
+      throw commitError;
+    }
+  }
+
+  // Optionally delete the worktree and branch after merging
+  let worktreeDeleted = false;
+  let branchDeleted = false;
+
+  if (options?.deleteWorktreeAndBranch) {
+    // Remove the worktree
+    try {
+      await execGitCommand(['worktree', 'remove', worktreePath, '--force'], projectPath);
+      worktreeDeleted = true;
+    } catch {
+      // Try with prune if remove fails
+      try {
+        await execGitCommand(['worktree', 'prune'], projectPath);
+        worktreeDeleted = true;
+      } catch {
+        logger.warn(`Failed to remove worktree: ${worktreePath}`);
+      }
+    }
+
+    // Delete the branch (but not main/master)
+    if (branchName !== 'main' && branchName !== 'master') {
+      try {
+        await execGitCommand(['branch', '-D', branchName], projectPath);
+        branchDeleted = true;
+      } catch {
+        logger.warn(`Failed to delete branch: ${branchName}`);
+      }
+    }
+  }
+
+  // Emit merge:success with merged branch, target branch, and deletion info
+  emitter?.emit('merge:success', {
+    mergedBranch: branchName,
+    targetBranch: mergeTo,
+    deleted: options?.deleteWorktreeAndBranch ? { worktreeDeleted, branchDeleted } : undefined,
+  });
+
+  return {
+    success: true,
+    mergedBranch: branchName,
+    targetBranch: mergeTo,
+    deleted: options?.deleteWorktreeAndBranch ? { worktreeDeleted, branchDeleted } : undefined,
+  };
+}
diff --git a/temp_repo/apps/server/src/services/notification-service.ts b/temp_repo/apps/server/src/services/notification-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..216853089d4addf1e5535ef1d8367d8c33f38f10
--- /dev/null
+++ b/temp_repo/apps/server/src/services/notification-service.ts
@@ -0,0 +1,280 @@
+/**
+ * Notification Service - Handles reading/writing notifications to JSON files
+ *
+ * Provides persistent storage for project-level notifications in
+ * {projectPath}/.automaker/notifications.json
+ *
+ * Notifications alert users when:
+ * - Features reach specific statuses (waiting_approval, verified)
+ * - Long-running operations complete (spec generation)
+ */
+
+import { createLogger } from '@automaker/utils';
+import * as secureFs from '../lib/secure-fs.js';
+import { getNotificationsPath, ensureAutomakerDir } from '@automaker/platform';
+import type { Notification, NotificationsFile, NotificationType } from '@automaker/types';
+import { DEFAULT_NOTIFICATIONS_FILE } from '@automaker/types';
+import type { EventEmitter } from '../lib/events.js';
+import { randomUUID } from 'crypto';
+
+const logger = createLogger('NotificationService');
+
+/**
+ * Atomic file write - write to temp file then rename
+ */
+async function atomicWriteJson(filePath: string, data: unknown): Promise<void> {
+  const tempPath = `${filePath}.tmp.${Date.now()}`;
+  const content = JSON.stringify(data, null, 2);
+
+  try {
+    await secureFs.writeFile(tempPath, content, 'utf-8');
+    await secureFs.rename(tempPath, filePath);
+  } catch (error) {
+    // Clean up temp file if it exists
+    try {
+      await secureFs.unlink(tempPath);
+    } catch {
+      // Ignore cleanup errors
+    }
+    throw error;
+  }
+}
+
+/**
+ * Safely read JSON file with fallback to default
+ */
+async function readJsonFile<T>(filePath: string, defaultValue: T): Promise<T> {
+  try {
+    const content = (await secureFs.readFile(filePath, 'utf-8')) as string;
+    return JSON.parse(content) as T;
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      return defaultValue;
+    }
+    logger.error(`Error reading ${filePath}:`, error);
+    return defaultValue;
+  }
+}
+
+/**
+ * Input for creating a new notification
+ */
+export interface CreateNotificationInput {
+  type: NotificationType;
+  title: string;
+  message: string;
+  featureId?: string;
+  projectPath: string;
+}
+
+/**
+ * NotificationService - Manages persistent storage of notifications
+ *
+ * Handles reading and writing notifications to JSON files with atomic operations
+ * for reliability. Each project has its own notifications.json file.
+ */
+export class NotificationService {
+  private events: EventEmitter | null = null;
+
+  /**
+   * Set the event emitter for broadcasting notification events
+   */
+  setEventEmitter(events: EventEmitter): void {
+    this.events = events;
+  }
+
+  /**
+   * Get all notifications for a project
+   *
+   * @param projectPath - Absolute path to project directory
+   * @returns Promise resolving to array of notifications
+   */
+  async getNotifications(projectPath: string): Promise<Notification[]> {
+    const notificationsPath = getNotificationsPath(projectPath);
+    const file = await readJsonFile<NotificationsFile>(
+      notificationsPath,
+      DEFAULT_NOTIFICATIONS_FILE
+    );
+    // Filter out dismissed notifications and sort by date (newest first)
+    return file.notifications
+      .filter((n) => !n.dismissed)
+      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+  }
+
+  /**
+   * Get unread notification count for a project
+   *
+   * @param projectPath - Absolute path to project directory
+   * @returns Promise resolving to unread count
+   */
+  async getUnreadCount(projectPath: string): Promise<number> {
+    const notifications = await this.getNotifications(projectPath);
+    return notifications.filter((n) => !n.read).length;
+  }
+
+  /**
+   * Create a new notification
+   *
+   * @param input - Notification creation input
+   * @returns Promise resolving to the created notification
+   */
+  async createNotification(input: CreateNotificationInput): Promise<Notification> {
+    const { projectPath, type, title, message, featureId } = input;
+
+    // Ensure automaker directory exists
+    await ensureAutomakerDir(projectPath);
+
+    const notificationsPath = getNotificationsPath(projectPath);
+    const file = await readJsonFile<NotificationsFile>(
+      notificationsPath,
+      DEFAULT_NOTIFICATIONS_FILE
+    );
+
+    const notification: Notification = {
+      id: randomUUID(),
+      type,
+      title,
+      message,
+      createdAt: new Date().toISOString(),
+      read: false,
+      dismissed: false,
+      featureId,
+      projectPath,
+    };
+
+    file.notifications.push(notification);
+    await atomicWriteJson(notificationsPath, file);
+
+    logger.info(`Created notification: ${title} for project ${projectPath}`);
+
+    // Emit event for real-time updates
+    if (this.events) {
+      this.events.emit('notification:created', notification);
+    }
+
+    return notification;
+  }
+
+  /**
+   * Mark a notification as read
+   *
+   * @param projectPath - Absolute path to project directory
+   * @param notificationId - ID of the notification to mark as read
+   * @returns Promise resolving to the updated notification or null if not found
+   */
+  async markAsRead(projectPath: string, notificationId: string): Promise<Notification | null> {
+    const notificationsPath = getNotificationsPath(projectPath);
+    const file = await readJsonFile<NotificationsFile>(
+      notificationsPath,
+      DEFAULT_NOTIFICATIONS_FILE
+    );
+
+    const notification = file.notifications.find((n) => n.id === notificationId);
+    if (!notification) {
+      return null;
+    }
+
+    notification.read = true;
+    await atomicWriteJson(notificationsPath, file);
+
+    logger.info(`Marked notification ${notificationId} as read`);
+    return notification;
+  }
+
+  /**
+   * Mark all notifications as read for a project
+   *
+   * @param projectPath - Absolute path to project directory
+   * @returns Promise resolving to number of notifications marked as read
+   */
+  async markAllAsRead(projectPath: string): Promise<number> {
+    const notificationsPath = getNotificationsPath(projectPath);
+    const file = await readJsonFile<NotificationsFile>(
+      notificationsPath,
+      DEFAULT_NOTIFICATIONS_FILE
+    );
+
+    let count = 0;
+    for (const notification of file.notifications) {
+      if (!notification.read && !notification.dismissed) {
+        notification.read = true;
+        count++;
+      }
+    }
+
+    if (count > 0) {
+      await atomicWriteJson(notificationsPath, file);
+      logger.info(`Marked ${count} notifications as read`);
+    }
+
+    return count;
+  }
+
+  /**
+   * Dismiss a notification
+   *
+   * @param projectPath - Absolute path to project directory
+   * @param notificationId - ID of the notification to dismiss
+   * @returns Promise resolving to true if notification was dismissed
+   */
+  async dismissNotification(projectPath: string, notificationId: string): Promise<boolean> {
+    const notificationsPath = getNotificationsPath(projectPath);
+    const file = await readJsonFile<NotificationsFile>(
+      notificationsPath,
+      DEFAULT_NOTIFICATIONS_FILE
+    );
+
+    const notification = file.notifications.find((n) => n.id === notificationId);
+    if (!notification) {
+      return false;
+    }
+
+    notification.dismissed = true;
+    await atomicWriteJson(notificationsPath, file);
+
+    logger.info(`Dismissed notification ${notificationId}`);
+    return true;
+  }
+
+  /**
+   * Dismiss all notifications for a project
+   *
+   * @param projectPath - Absolute path to project directory
+   * @returns Promise resolving to number of notifications dismissed
+   */
+  async dismissAll(projectPath: string): Promise<number> {
+    const notificationsPath = getNotificationsPath(projectPath);
+    const file = await readJsonFile<NotificationsFile>(
+      notificationsPath,
+      DEFAULT_NOTIFICATIONS_FILE
+    );
+
+    let count = 0;
+    for (const notification of file.notifications) {
+      if (!notification.dismissed) {
+        notification.dismissed = true;
+        count++;
+      }
+    }
+
+    if (count > 0) {
+      await atomicWriteJson(notificationsPath, file);
+      logger.info(`Dismissed ${count} notifications`);
+    }
+
+    return count;
+  }
+}
+
+// Singleton instance
+let notificationServiceInstance: NotificationService | null = null;
+
+/**
+ * Get the singleton notification service instance
+ */
+export function getNotificationService(): NotificationService {
+  if (!notificationServiceInstance) {
+    notificationServiceInstance = new NotificationService();
+  }
+  return notificationServiceInstance;
+}
diff --git a/temp_repo/apps/server/src/services/ntfy-service.ts b/temp_repo/apps/server/src/services/ntfy-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c63ac6e207d6fac7b910e61465e79e7292cdcd61
--- /dev/null
+++ b/temp_repo/apps/server/src/services/ntfy-service.ts
@@ -0,0 +1,282 @@
+/**
+ * Ntfy Service - Sends push notifications via ntfy.sh
+ *
+ * Provides integration with ntfy.sh for push notifications.
+ * Supports custom servers, authentication, tags, emojis, and click actions.
+ *
+ * @see https://docs.ntfy.sh/publish/
+ */
+
+import { createLogger } from '@automaker/utils';
+import type { NtfyEndpointConfig, EventHookContext } from '@automaker/types';
+
+const logger = createLogger('Ntfy');
+
+/** Default timeout for ntfy HTTP requests (10 seconds) */
+const DEFAULT_NTFY_TIMEOUT = 10000;
+
+// Re-export EventHookContext as NtfyContext for backward compatibility
+export type NtfyContext = EventHookContext;
+
+/**
+ * Ntfy Service
+ *
+ * Handles sending notifications to ntfy.sh endpoints.
+ */
+export class NtfyService {
+  /**
+   * Send a notification to a ntfy.sh endpoint
+   *
+   * @param endpoint The ntfy.sh endpoint configuration
+   * @param options Notification options (title, body, tags, etc.)
+   * @param context Context for variable substitution
+   */
+  async sendNotification(
+    endpoint: NtfyEndpointConfig,
+    options: {
+      title?: string;
+      body?: string;
+      tags?: string;
+      emoji?: string;
+      clickUrl?: string;
+      priority?: 1 | 2 | 3 | 4 | 5;
+    },
+    context: NtfyContext
+  ): Promise<{ success: boolean; error?: string }> {
+    if (!endpoint.enabled) {
+      logger.warn(`Ntfy endpoint "${endpoint.name}" is disabled, skipping notification`);
+      return { success: false, error: 'Endpoint is disabled' };
+    }
+
+    // Validate endpoint configuration
+    const validationError = this.validateEndpoint(endpoint);
+    if (validationError) {
+      logger.error(`Invalid ntfy endpoint configuration: ${validationError}`);
+      return { success: false, error: validationError };
+    }
+
+    // Build URL
+    const serverUrl = endpoint.serverUrl.replace(/\/$/, ''); // Remove trailing slash
+    const url = `${serverUrl}/${encodeURIComponent(endpoint.topic)}`;
+
+    // Build headers
+    const headers: Record<string, string> = {
+      'Content-Type': 'text/plain; charset=utf-8',
+    };
+
+    // Title (with variable substitution)
+    const title = this.substituteVariables(options.title || this.getDefaultTitle(context), context);
+    if (title) {
+      headers['Title'] = title;
+    }
+
+    // Priority
+    const priority = options.priority || 3;
+    headers['Priority'] = String(priority);
+
+    // Tags and emoji
+    const tags = this.buildTags(
+      options.tags || endpoint.defaultTags,
+      options.emoji || endpoint.defaultEmoji
+    );
+    if (tags) {
+      headers['Tags'] = tags;
+    }
+
+    // Click action URL
+    const clickUrl = this.substituteVariables(
+      options.clickUrl || endpoint.defaultClickUrl || '',
+      context
+    );
+    if (clickUrl) {
+      headers['Click'] = clickUrl;
+    }
+
+    // Authentication
+    this.addAuthHeaders(headers, endpoint);
+
+    // Message body (with variable substitution)
+    const body = this.substituteVariables(options.body || this.getDefaultBody(context), context);
+
+    logger.info(`Sending ntfy notification to ${endpoint.name}: ${title}`);
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), DEFAULT_NTFY_TIMEOUT);
+
+    try {
+      const response = await fetch(url, {
+        method: 'POST',
+        headers,
+        body,
+        signal: controller.signal,
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text().catch(() => 'Unknown error');
+        logger.error(`Ntfy notification failed with status ${response.status}: ${errorText}`);
+        return {
+          success: false,
+          error: `HTTP ${response.status}: ${errorText}`,
+        };
+      }
+
+      logger.info(`Ntfy notification sent successfully to ${endpoint.name}`);
+      return { success: true };
+    } catch (error) {
+      if ((error as Error).name === 'AbortError') {
+        logger.error(`Ntfy notification timed out after ${DEFAULT_NTFY_TIMEOUT}ms`);
+        return { success: false, error: 'Request timed out' };
+      }
+
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      logger.error(`Ntfy notification failed: ${errorMessage}`);
+      return { success: false, error: errorMessage };
+    } finally {
+      clearTimeout(timeoutId);
+    }
+  }
+
+  /**
+   * Validate an ntfy endpoint configuration
+   */
+  validateEndpoint(endpoint: NtfyEndpointConfig): string | null {
+    // Validate server URL
+    if (!endpoint.serverUrl) {
+      return 'Server URL is required';
+    }
+
+    try {
+      new URL(endpoint.serverUrl);
+    } catch {
+      return 'Invalid server URL format';
+    }
+
+    // Validate topic
+    if (!endpoint.topic) {
+      return 'Topic is required';
+    }
+
+    if (endpoint.topic.includes(' ') || endpoint.topic.includes('\t')) {
+      return 'Topic cannot contain spaces';
+    }
+
+    // Validate authentication
+    if (endpoint.authType === 'basic') {
+      if (!endpoint.username || !endpoint.password) {
+        return 'Username and password are required for basic authentication';
+      }
+    } else if (endpoint.authType === 'token') {
+      if (!endpoint.token) {
+        return 'Access token is required for token authentication';
+      }
+    }
+
+    return null;
+  }
+
+  /**
+   * Build tags string from tags and emoji
+   */
+  private buildTags(tags?: string, emoji?: string): string {
+    const tagList: string[] = [];
+
+    if (tags) {
+      // Split by comma and trim whitespace
+      const parsedTags = tags
+        .split(',')
+        .map((t) => t.trim())
+        .filter((t) => t.length > 0);
+      tagList.push(...parsedTags);
+    }
+
+    if (emoji) {
+      // Add emoji as first tag if it looks like a shortcode
+      if (emoji.startsWith(':') && emoji.endsWith(':')) {
+        tagList.unshift(emoji.slice(1, -1));
+      } else if (!emoji.includes(' ')) {
+        // If it's a single emoji or shortcode without colons, add as-is
+        tagList.unshift(emoji);
+      }
+    }
+
+    return tagList.join(',');
+  }
+
+  /**
+   * Add authentication headers based on auth type
+   */
+  private addAuthHeaders(headers: Record<string, string>, endpoint: NtfyEndpointConfig): void {
+    if (endpoint.authType === 'basic' && endpoint.username && endpoint.password) {
+      const credentials = Buffer.from(`${endpoint.username}:${endpoint.password}`).toString(
+        'base64'
+      );
+      headers['Authorization'] = `Basic ${credentials}`;
+    } else if (endpoint.authType === 'token' && endpoint.token) {
+      headers['Authorization'] = `Bearer ${endpoint.token}`;
+    }
+  }
+
+  /**
+   * Get default title based on event context
+   */
+  private getDefaultTitle(context: NtfyContext): string {
+    const eventName = this.formatEventName(context.eventType);
+    if (context.featureName) {
+      return `${eventName}: ${context.featureName}`;
+    }
+    return eventName;
+  }
+
+  /**
+   * Get default body based on event context
+   */
+  private getDefaultBody(context: NtfyContext): string {
+    const lines: string[] = [];
+
+    if (context.featureName) {
+      lines.push(`Feature: ${context.featureName}`);
+    }
+    if (context.featureId) {
+      lines.push(`ID: ${context.featureId}`);
+    }
+    if (context.projectName) {
+      lines.push(`Project: ${context.projectName}`);
+    }
+    if (context.error) {
+      lines.push(`Error: ${context.error}`);
+    }
+    lines.push(`Time: ${context.timestamp}`);
+
+    return lines.join('\n');
+  }
+
+  /**
+   * Format event type to human-readable name
+   */
+  private formatEventName(eventType: string): string {
+    const eventNames: Record<string, string> = {
+      feature_created: 'Feature Created',
+      feature_success: 'Feature Completed',
+      feature_error: 'Feature Failed',
+      auto_mode_complete: 'Auto Mode Complete',
+      auto_mode_error: 'Auto Mode Error',
+    };
+    return eventNames[eventType] || eventType;
+  }
+
+  /**
+   * Substitute {{variable}} placeholders in a string
+   */
+  private substituteVariables(template: string, context: NtfyContext): string {
+    return template.replace(/\{\{(\w+)\}\}/g, (match, variable) => {
+      const value = context[variable as keyof NtfyContext];
+      if (value === undefined || value === null) {
+        return '';
+      }
+      return String(value);
+    });
+  }
+}
+
+// Singleton instance
+export const ntfyService = new NtfyService();
diff --git a/temp_repo/apps/server/src/services/pipeline-orchestrator.ts b/temp_repo/apps/server/src/services/pipeline-orchestrator.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c3b1e53a1403fa2f4505442e5c431a8041280e79
--- /dev/null
+++ b/temp_repo/apps/server/src/services/pipeline-orchestrator.ts
@@ -0,0 +1,691 @@
+/**
+ * PipelineOrchestrator - Pipeline step execution and coordination
+ */
+
+import path from 'path';
+import type {
+  Feature,
+  PipelineStep,
+  PipelineConfig,
+  FeatureStatusWithPipeline,
+} from '@automaker/types';
+import { createLogger, loadContextFiles, classifyError } from '@automaker/utils';
+import { getFeatureDir } from '@automaker/platform';
+import { resolveModelString, DEFAULT_MODELS } from '@automaker/model-resolver';
+import * as secureFs from '../lib/secure-fs.js';
+import {
+  getPromptCustomization,
+  getAutoLoadClaudeMdSetting,
+  getUseClaudeCodeSystemPromptSetting,
+  filterClaudeMdFromContext,
+} from '../lib/settings-helpers.js';
+import { validateWorkingDirectory } from '../lib/sdk-options.js';
+import type { TypedEventBus } from './typed-event-bus.js';
+import type { FeatureStateManager } from './feature-state-manager.js';
+import type { AgentExecutor } from './agent-executor.js';
+import type { WorktreeResolver } from './worktree-resolver.js';
+import type { SettingsService } from './settings-service.js';
+import type { ConcurrencyManager } from './concurrency-manager.js';
+import { pipelineService } from './pipeline-service.js';
+import type { TestRunnerService, TestRunStatus } from './test-runner-service.js';
+import { performMerge } from './merge-service.js';
+import type {
+  PipelineContext,
+  PipelineStatusInfo,
+  StepResult,
+  MergeResult,
+  UpdateFeatureStatusFn,
+  BuildFeaturePromptFn,
+  ExecuteFeatureFn,
+  RunAgentFn,
+} from './pipeline-types.js';
+
+// Re-export types for backward compatibility
+export type {
+  PipelineContext,
+  PipelineStatusInfo,
+  StepResult,
+  MergeResult,
+  UpdateFeatureStatusFn,
+  BuildFeaturePromptFn,
+  ExecuteFeatureFn,
+  RunAgentFn,
+} from './pipeline-types.js';
+
+const logger = createLogger('PipelineOrchestrator');
+
+export class PipelineOrchestrator {
+  constructor(
+    private eventBus: TypedEventBus,
+    private featureStateManager: FeatureStateManager,
+    private agentExecutor: AgentExecutor,
+    private testRunnerService: TestRunnerService,
+    private worktreeResolver: WorktreeResolver,
+    private concurrencyManager: ConcurrencyManager,
+    private settingsService: SettingsService | null,
+    private updateFeatureStatusFn: UpdateFeatureStatusFn,
+    private loadContextFilesFn: typeof loadContextFiles,
+    private buildFeaturePromptFn: BuildFeaturePromptFn,
+    private executeFeatureFn: ExecuteFeatureFn,
+    private runAgentFn: RunAgentFn
+  ) {}
+
+  async executePipeline(ctx: PipelineContext): Promise<void> {
+    const {
+      projectPath,
+      featureId,
+      feature,
+      steps,
+      workDir,
+      abortController,
+      autoLoadClaudeMd,
+      useClaudeCodeSystemPrompt,
+    } = ctx;
+    const prompts = await getPromptCustomization(this.settingsService, '[AutoMode]');
+    const contextResult = await this.loadContextFilesFn({
+      projectPath,
+      fsModule: secureFs as Parameters<typeof loadContextFiles>[0]['fsModule'],
+      taskContext: { title: feature.title ?? '', description: feature.description ?? '' },
+    });
+    const contextFilesPrompt = filterClaudeMdFromContext(contextResult, autoLoadClaudeMd);
+    const contextPath = path.join(getFeatureDir(projectPath, featureId), 'agent-output.md');
+    let previousContext = '';
+    try {
+      previousContext = (await secureFs.readFile(contextPath, 'utf-8')) as string;
+    } catch {
+      /* */
+    }
+
+    for (let i = 0; i < steps.length; i++) {
+      const step = steps[i];
+      if (abortController.signal.aborted) throw new Error('Pipeline execution aborted');
+      await this.updateFeatureStatusFn(projectPath, featureId, `pipeline_${step.id}`);
+      this.eventBus.emitAutoModeEvent('auto_mode_progress', {
+        featureId,
+        branchName: feature.branchName ?? null,
+        content: `Starting pipeline step ${i + 1}/${steps.length}: ${step.name}`,
+        projectPath,
+      });
+      this.eventBus.emitAutoModeEvent('pipeline_step_started', {
+        featureId,
+        stepId: step.id,
+        stepName: step.name,
+        stepIndex: i,
+        totalSteps: steps.length,
+        projectPath,
+      });
+      const model = resolveModelString(feature.model, DEFAULT_MODELS.claude);
+      const currentStatus = `pipeline_${step.id}`;
+      await this.runAgentFn(
+        workDir,
+        featureId,
+        this.buildPipelineStepPrompt(step, feature, previousContext, prompts.taskExecution),
+        abortController,
+        projectPath,
+        undefined,
+        model,
+        {
+          projectPath,
+          planningMode: 'skip',
+          requirePlanApproval: false,
+          previousContent: previousContext,
+          systemPrompt: contextFilesPrompt || undefined,
+          autoLoadClaudeMd,
+          useClaudeCodeSystemPrompt,
+          thinkingLevel: feature.thinkingLevel,
+          reasoningEffort: feature.reasoningEffort,
+          status: currentStatus,
+          providerId: feature.providerId,
+        }
+      );
+      try {
+        previousContext = (await secureFs.readFile(contextPath, 'utf-8')) as string;
+      } catch {
+        /* */
+      }
+      this.eventBus.emitAutoModeEvent('pipeline_step_complete', {
+        featureId,
+        stepId: step.id,
+        stepName: step.name,
+        stepIndex: i,
+        totalSteps: steps.length,
+        projectPath,
+      });
+    }
+    if (ctx.branchName) {
+      const mergeResult = await this.attemptMerge(ctx);
+      if (!mergeResult.success && mergeResult.hasConflicts) return;
+    }
+  }
+
+  buildPipelineStepPrompt(
+    step: PipelineStep,
+    feature: Feature,
+    previousContext: string,
+    taskPrompts: { implementationInstructions: string; playwrightVerificationInstructions: string }
+  ): string {
+    let prompt = `## Pipeline Step: ${step.name}\n\nThis is an automated pipeline step.\n\n### Feature Context\n${this.buildFeaturePromptFn(feature, taskPrompts)}\n\n`;
+    if (previousContext) prompt += `### Previous Work\n${previousContext}\n\n`;
+    return (
+      prompt +
+      `### Pipeline Step Instructions\n${step.instructions}\n\n### Task\nComplete the pipeline step instructions above.\n\n` +
+      `**CRITICAL: After completing the instructions, you MUST output a summary using this EXACT format:**\n\n` +
+      `<summary>\n` +
+      `## Summary: ${step.name}\n\n` +
+      `### Changes Implemented\n` +
+      `- [List all changes made in this step]\n\n` +
+      `### Files Modified\n` +
+      `- [List all files modified in this step]\n\n` +
+      `### Outcome\n` +
+      `- [Describe the result of this step]\n` +
+      `</summary>\n\n` +
+      `The <summary> and </summary> tags MUST be on their own lines. This is REQUIRED.`
+    );
+  }
+
+  async detectPipelineStatus(
+    projectPath: string,
+    featureId: string,
+    currentStatus: FeatureStatusWithPipeline
+  ): Promise<PipelineStatusInfo> {
+    const isPipeline = pipelineService.isPipelineStatus(currentStatus);
+    if (!isPipeline)
+      return {
+        isPipeline: false,
+        stepId: null,
+        stepIndex: -1,
+        totalSteps: 0,
+        step: null,
+        config: null,
+      };
+    const stepId = pipelineService.getStepIdFromStatus(currentStatus);
+    if (!stepId)
+      return {
+        isPipeline: true,
+        stepId: null,
+        stepIndex: -1,
+        totalSteps: 0,
+        step: null,
+        config: null,
+      };
+    const config = await pipelineService.getPipelineConfig(projectPath);
+    if (!config || config.steps.length === 0)
+      return { isPipeline: true, stepId, stepIndex: -1, totalSteps: 0, step: null, config: null };
+    const sortedSteps = [...config.steps].sort((a, b) => a.order - b.order);
+    const stepIndex = sortedSteps.findIndex((s) => s.id === stepId);
+    return {
+      isPipeline: true,
+      stepId,
+      stepIndex,
+      totalSteps: sortedSteps.length,
+      step: stepIndex === -1 ? null : sortedSteps[stepIndex],
+      config,
+    };
+  }
+
+  async resumePipeline(
+    projectPath: string,
+    feature: Feature,
+    useWorktrees: boolean,
+    pipelineInfo: PipelineStatusInfo
+  ): Promise<void> {
+    const featureId = feature.id;
+    const contextPath = path.join(getFeatureDir(projectPath, featureId), 'agent-output.md');
+    let hasContext = false;
+    try {
+      await secureFs.access(contextPath);
+      hasContext = true;
+    } catch {
+      /* No context */
+    }
+
+    if (!hasContext) {
+      logger.warn(`No context for feature ${featureId}, restarting pipeline`);
+      await this.updateFeatureStatusFn(projectPath, featureId, 'in_progress');
+      return this.executeFeatureFn(projectPath, featureId, useWorktrees, false, undefined, {
+        _calledInternally: true,
+      });
+    }
+
+    if (pipelineInfo.stepIndex === -1) {
+      logger.warn(`Step ${pipelineInfo.stepId} no longer exists, completing feature`);
+      const finalStatus = feature.skipTests ? 'waiting_approval' : 'verified';
+      await this.updateFeatureStatusFn(projectPath, featureId, finalStatus);
+      const runningEntryForStep = this.concurrencyManager.getRunningFeature(featureId);
+      if (runningEntryForStep?.isAutoMode) {
+        this.eventBus.emitAutoModeEvent('auto_mode_feature_complete', {
+          featureId,
+          featureName: feature.title,
+          branchName: feature.branchName ?? null,
+          executionMode: 'auto',
+          passes: true,
+          message: 'Pipeline step no longer exists',
+          projectPath,
+        });
+      }
+      return;
+    }
+
+    if (!pipelineInfo.config) throw new Error('Pipeline config is null but stepIndex is valid');
+    return this.resumeFromStep(
+      projectPath,
+      feature,
+      useWorktrees,
+      pipelineInfo.stepIndex,
+      pipelineInfo.config
+    );
+  }
+
+  /** Resume from a specific step index */
+  async resumeFromStep(
+    projectPath: string,
+    feature: Feature,
+    useWorktrees: boolean,
+    startFromStepIndex: number,
+    pipelineConfig: PipelineConfig
+  ): Promise<void> {
+    const featureId = feature.id;
+    const allSortedSteps = [...pipelineConfig.steps].sort((a, b) => a.order - b.order);
+    if (startFromStepIndex < 0 || startFromStepIndex >= allSortedSteps.length)
+      throw new Error(`Invalid step index: ${startFromStepIndex}`);
+
+    const excludedStepIds = new Set(feature.excludedPipelineSteps || []);
+    let currentStep = allSortedSteps[startFromStepIndex];
+
+    if (excludedStepIds.has(currentStep.id)) {
+      const nextStatus = pipelineService.getNextStatus(
+        `pipeline_${currentStep.id}`,
+        pipelineConfig,
+        feature.skipTests ?? false,
+        feature.excludedPipelineSteps
+      );
+      if (!pipelineService.isPipelineStatus(nextStatus)) {
+        await this.updateFeatureStatusFn(projectPath, featureId, nextStatus);
+        const runningEntryForExcluded = this.concurrencyManager.getRunningFeature(featureId);
+        if (runningEntryForExcluded?.isAutoMode) {
+          this.eventBus.emitAutoModeEvent('auto_mode_feature_complete', {
+            featureId,
+            featureName: feature.title,
+            branchName: feature.branchName ?? null,
+            executionMode: 'auto',
+            passes: true,
+            message: 'Pipeline completed (remaining steps excluded)',
+            projectPath,
+          });
+        }
+        return;
+      }
+      const nextStepId = pipelineService.getStepIdFromStatus(nextStatus);
+      const nextStepIndex = allSortedSteps.findIndex((s) => s.id === nextStepId);
+      if (nextStepIndex === -1) throw new Error(`Next step ${nextStepId} not found`);
+      startFromStepIndex = nextStepIndex;
+    }
+
+    const stepsToExecute = allSortedSteps
+      .slice(startFromStepIndex)
+      .filter((step) => !excludedStepIds.has(step.id));
+    if (stepsToExecute.length === 0) {
+      const finalStatus = feature.skipTests ? 'waiting_approval' : 'verified';
+      await this.updateFeatureStatusFn(projectPath, featureId, finalStatus);
+      const runningEntryForAllExcluded = this.concurrencyManager.getRunningFeature(featureId);
+      if (runningEntryForAllExcluded?.isAutoMode) {
+        this.eventBus.emitAutoModeEvent('auto_mode_feature_complete', {
+          featureId,
+          featureName: feature.title,
+          branchName: feature.branchName ?? null,
+          executionMode: 'auto',
+          passes: true,
+          message: 'Pipeline completed (all steps excluded)',
+          projectPath,
+        });
+      }
+      return;
+    }
+
+    const runningEntry = this.concurrencyManager.acquire({
+      featureId,
+      projectPath,
+      isAutoMode: false,
+      allowReuse: true,
+    });
+    const abortController = runningEntry.abortController;
+    runningEntry.branchName = feature.branchName ?? null;
+    let pipelineCompleted = false;
+
+    try {
+      validateWorkingDirectory(projectPath);
+      let worktreePath: string | null = null;
+      const branchName = feature.branchName;
+
+      if (useWorktrees && branchName) {
+        worktreePath = await this.worktreeResolver.findWorktreeForBranch(projectPath, branchName);
+        if (worktreePath) logger.info(`Using worktree for branch "${branchName}": ${worktreePath}`);
+      }
+
+      const workDir = worktreePath ? path.resolve(worktreePath) : path.resolve(projectPath);
+      validateWorkingDirectory(workDir);
+      runningEntry.worktreePath = worktreePath;
+      runningEntry.branchName = branchName ?? null;
+
+      this.eventBus.emitAutoModeEvent('auto_mode_feature_start', {
+        featureId,
+        projectPath,
+        branchName: branchName ?? null,
+        feature: {
+          id: featureId,
+          title: feature.title || 'Resuming Pipeline',
+          description: feature.description,
+        },
+      });
+
+      const autoLoadClaudeMd = await getAutoLoadClaudeMdSetting(
+        projectPath,
+        this.settingsService,
+        '[AutoMode]'
+      );
+      const useClaudeCodeSystemPrompt = await getUseClaudeCodeSystemPromptSetting(
+        projectPath,
+        this.settingsService,
+        '[AutoMode]'
+      );
+      const context: PipelineContext = {
+        projectPath,
+        featureId,
+        feature,
+        steps: stepsToExecute,
+        workDir,
+        worktreePath,
+        branchName: branchName ?? null,
+        abortController,
+        autoLoadClaudeMd,
+        useClaudeCodeSystemPrompt,
+        testAttempts: 0,
+        maxTestAttempts: 5,
+      };
+
+      await this.executePipeline(context);
+      pipelineCompleted = true;
+
+      // Re-fetch feature to check if executePipeline set a terminal status (e.g., merge_conflict)
+      const reloadedFeature = await this.featureStateManager.loadFeature(projectPath, featureId);
+      const finalStatus = feature.skipTests ? 'waiting_approval' : 'verified';
+
+      // Only update status if not already in a terminal state
+      if (reloadedFeature && reloadedFeature.status !== 'merge_conflict') {
+        await this.updateFeatureStatusFn(projectPath, featureId, finalStatus);
+      }
+      logger.info(`Pipeline resume completed for feature ${featureId}`);
+      if (runningEntry.isAutoMode) {
+        this.eventBus.emitAutoModeEvent('auto_mode_feature_complete', {
+          featureId,
+          featureName: feature.title,
+          branchName: feature.branchName ?? null,
+          executionMode: 'auto',
+          passes: true,
+          message: 'Pipeline resumed successfully',
+          projectPath,
+        });
+      }
+    } catch (error) {
+      const errorInfo = classifyError(error);
+      if (errorInfo.isAbort) {
+        if (runningEntry.isAutoMode) {
+          this.eventBus.emitAutoModeEvent('auto_mode_feature_complete', {
+            featureId,
+            featureName: feature.title,
+            branchName: feature.branchName ?? null,
+            executionMode: 'auto',
+            passes: false,
+            message: 'Pipeline stopped by user',
+            projectPath,
+          });
+        }
+      } else {
+        // If pipeline steps completed successfully, don't send the feature back to backlog.
+        // The pipeline work is done — set to waiting_approval so the user can review.
+        const fallbackStatus = pipelineCompleted ? 'waiting_approval' : 'backlog';
+        if (pipelineCompleted) {
+          logger.info(
+            `[resumeFromStep] Feature ${featureId} failed after pipeline completed. ` +
+              `Setting status to waiting_approval instead of backlog to preserve pipeline work.`
+          );
+        }
+        logger.error(`Pipeline resume failed for ${featureId}:`, error);
+        // Don't overwrite terminal states like 'merge_conflict' that were set during pipeline execution
+        const currentFeature = await this.featureStateManager.loadFeature(projectPath, featureId);
+        if (currentFeature?.status !== 'merge_conflict') {
+          await this.updateFeatureStatusFn(projectPath, featureId, fallbackStatus);
+        }
+        this.eventBus.emitAutoModeEvent('auto_mode_error', {
+          featureId,
+          featureName: feature.title,
+          branchName: feature.branchName ?? null,
+          error: errorInfo.message,
+          errorType: errorInfo.type,
+          projectPath,
+        });
+      }
+    } finally {
+      this.concurrencyManager.release(featureId);
+    }
+  }
+
+  /** Execute test step with agent fix loop (REQ-F07) */
+  async executeTestStep(context: PipelineContext, testCommand: string): Promise<StepResult> {
+    const { featureId, projectPath, workDir, abortController, maxTestAttempts } = context;
+
+    for (let attempt = 1; attempt <= maxTestAttempts; attempt++) {
+      if (abortController.signal.aborted)
+        return { success: false, message: 'Test execution aborted' };
+      logger.info(`Running tests for ${featureId} (attempt ${attempt}/${maxTestAttempts})`);
+
+      const testResult = await this.testRunnerService.startTests(workDir, { command: testCommand });
+      if (!testResult.success || !testResult.result?.sessionId)
+        return {
+          success: false,
+          testsPassed: false,
+          message: testResult.error || 'Failed to start tests',
+        };
+
+      const completionResult = await this.waitForTestCompletion(
+        testResult.result.sessionId,
+        abortController.signal
+      );
+      if (completionResult.status === 'passed') return { success: true, testsPassed: true };
+
+      const sessionOutput = this.testRunnerService.getSessionOutput(testResult.result.sessionId);
+      const scrollback = sessionOutput.result?.output || '';
+      this.eventBus.emitAutoModeEvent('pipeline_test_failed', {
+        featureId,
+        attempt,
+        maxAttempts: maxTestAttempts,
+        failedTests: this.extractFailedTestNames(scrollback),
+        projectPath,
+      });
+
+      if (attempt < maxTestAttempts) {
+        const fixPrompt = `## Test Failures - Please Fix\n\n${this.buildTestFailureSummary(scrollback)}\n\nFix the failing tests without modifying test code unless clearly wrong.`;
+        await this.runAgentFn(
+          workDir,
+          featureId,
+          fixPrompt,
+          abortController,
+          projectPath,
+          undefined,
+          undefined,
+          {
+            projectPath,
+            planningMode: 'skip',
+            requirePlanApproval: false,
+            useClaudeCodeSystemPrompt: context.useClaudeCodeSystemPrompt,
+            autoLoadClaudeMd: context.autoLoadClaudeMd,
+            thinkingLevel: context.feature.thinkingLevel,
+            reasoningEffort: context.feature.reasoningEffort,
+            status: context.feature.status,
+            providerId: context.feature.providerId,
+          }
+        );
+      }
+    }
+    return {
+      success: false,
+      testsPassed: false,
+      message: `Tests failed after ${maxTestAttempts} attempts`,
+    };
+  }
+
+  /** Wait for test completion */
+  private async waitForTestCompletion(
+    sessionId: string,
+    signal: AbortSignal
+  ): Promise<{ status: TestRunStatus; exitCode: number | null; duration: number }> {
+    return new Promise((resolve) => {
+      const checkInterval = setInterval(() => {
+        // Check for abort
+        if (signal.aborted) {
+          clearInterval(checkInterval);
+          clearTimeout(timeoutId);
+          resolve({ status: 'failed', exitCode: null, duration: 0 });
+          return;
+        }
+
+        const session = this.testRunnerService.getSession(sessionId);
+        if (session && session.status !== 'running' && session.status !== 'pending') {
+          clearInterval(checkInterval);
+          clearTimeout(timeoutId);
+          resolve({
+            status: session.status,
+            exitCode: session.exitCode,
+            duration: session.finishedAt
+              ? session.finishedAt.getTime() - session.startedAt.getTime()
+              : 0,
+          });
+        }
+      }, 1000);
+      const timeoutId = setTimeout(() => {
+        // Check for abort before timeout resolution
+        if (signal.aborted) {
+          clearInterval(checkInterval);
+          resolve({ status: 'failed', exitCode: null, duration: 0 });
+          return;
+        }
+        clearInterval(checkInterval);
+        resolve({ status: 'failed', exitCode: null, duration: 600000 });
+      }, 600000);
+    });
+  }
+
+  /** Attempt to merge feature branch (REQ-F05) */
+  async attemptMerge(context: PipelineContext): Promise<MergeResult> {
+    const { projectPath, featureId, branchName, worktreePath, feature } = context;
+    if (!branchName) return { success: false, error: 'No branch name for merge' };
+
+    logger.info(`Attempting auto-merge for feature ${featureId} (branch: ${branchName})`);
+    try {
+      // Get the primary branch dynamically instead of hardcoding 'main'
+      const targetBranch = await this.worktreeResolver.getCurrentBranch(projectPath);
+
+      // Call merge service directly instead of HTTP fetch
+      const result = await performMerge(
+        projectPath,
+        branchName,
+        worktreePath || projectPath,
+        targetBranch || 'main',
+        {
+          deleteWorktreeAndBranch: false,
+        },
+        this.eventBus.getUnderlyingEmitter()
+      );
+
+      if (!result.success) {
+        if (result.hasConflicts) {
+          await this.updateFeatureStatusFn(projectPath, featureId, 'merge_conflict');
+          this.eventBus.emitAutoModeEvent('pipeline_merge_conflict', {
+            featureId,
+            branchName,
+            projectPath,
+          });
+          return { success: false, hasConflicts: true, needsAgentResolution: true };
+        }
+        return { success: false, error: result.error };
+      }
+
+      logger.info(`Auto-merge successful for feature ${featureId}`);
+      const runningEntryForMerge = this.concurrencyManager.getRunningFeature(featureId);
+      if (runningEntryForMerge?.isAutoMode) {
+        this.eventBus.emitAutoModeEvent('auto_mode_feature_complete', {
+          featureId,
+          featureName: feature.title,
+          branchName,
+          executionMode: 'auto',
+          passes: true,
+          message: 'Pipeline completed and merged',
+          projectPath,
+        });
+      }
+      return { success: true };
+    } catch (error) {
+      logger.error(`Merge failed for ${featureId}:`, error);
+      return { success: false, error: (error as Error).message };
+    }
+  }
+
+  /** Shared helper to parse test output lines and extract failure information */
+  private parseTestLines(scrollback: string): {
+    failedTests: string[];
+    passCount: number;
+    failCount: number;
+  } {
+    const lines = scrollback.split('\n');
+    const failedTests: string[] = [];
+    let passCount = 0;
+    let failCount = 0;
+
+    let inFailureContext = false;
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (trimmed.includes('FAIL') || trimmed.includes('FAILED')) {
+        const match = trimmed.match(/(?:FAIL|FAILED)\s+(.+)/);
+        if (match) failedTests.push(match[1].trim());
+        failCount++;
+        inFailureContext = true;
+      } else if (trimmed.includes('PASS') || trimmed.includes('PASSED')) {
+        passCount++;
+        inFailureContext = false;
+      }
+      if (trimmed.match(/^>\s+.*\.(test|spec)\./)) {
+        failedTests.push(trimmed.replace(/^>\s+/, ''));
+      }
+      // Only capture assertion details when they appear in failure context
+      // or match explicit assertion error / expect patterns
+      if (trimmed.includes('AssertionError')) {
+        failedTests.push(trimmed);
+      } else if (
+        inFailureContext &&
+        /expect\(.+\)\.(toBe|toEqual|toMatch|toThrow|toContain)\s*\(/.test(trimmed)
+      ) {
+        failedTests.push(trimmed);
+      } else if (
+        inFailureContext &&
+        (trimmed.startsWith('Expected') || trimmed.startsWith('Received'))
+      ) {
+        failedTests.push(trimmed);
+      }
+    }
+
+    return { failedTests, passCount, failCount };
+  }
+
+  /** Build a concise test failure summary for the agent */
+  buildTestFailureSummary(scrollback: string): string {
+    const { failedTests, passCount, failCount } = this.parseTestLines(scrollback);
+    const unique = [...new Set(failedTests)].slice(0, 10);
+    return `Test Results: ${passCount} passed, ${failCount} failed.\n\nFailed tests:\n${unique.map((t) => `- ${t}`).join('\n')}\n\nOutput (last 2000 chars):\n${scrollback.slice(-2000)}`;
+  }
+
+  /** Extract failed test names from scrollback */
+  private extractFailedTestNames(scrollback: string): string[] {
+    const { failedTests } = this.parseTestLines(scrollback);
+    return [...new Set(failedTests)].slice(0, 20);
+  }
+}
diff --git a/temp_repo/apps/server/src/services/pipeline-service.ts b/temp_repo/apps/server/src/services/pipeline-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fb885d807dfddc95f4354f0952b3d1f18918b221
--- /dev/null
+++ b/temp_repo/apps/server/src/services/pipeline-service.ts
@@ -0,0 +1,344 @@
+/**
+ * Pipeline Service - Handles reading/writing pipeline configuration
+ *
+ * Provides persistent storage for:
+ * - Pipeline configuration ({projectPath}/.automaker/pipeline.json)
+ */
+
+import path from 'path';
+import { createLogger } from '@automaker/utils';
+import * as secureFs from '../lib/secure-fs.js';
+import { ensureAutomakerDir } from '@automaker/platform';
+import type { PipelineConfig, PipelineStep, FeatureStatusWithPipeline } from '@automaker/types';
+
+const logger = createLogger('PipelineService');
+
+// Default empty pipeline config
+const DEFAULT_PIPELINE_CONFIG: PipelineConfig = {
+  version: 1,
+  steps: [],
+};
+
+/**
+ * Atomic file write - write to temp file then rename
+ */
+async function atomicWriteJson(filePath: string, data: unknown): Promise<void> {
+  const tempPath = `${filePath}.tmp.${Date.now()}`;
+  const content = JSON.stringify(data, null, 2);
+
+  try {
+    await secureFs.writeFile(tempPath, content, 'utf-8');
+    await secureFs.rename(tempPath, filePath);
+  } catch (error) {
+    // Clean up temp file if it exists
+    try {
+      await secureFs.unlink(tempPath);
+    } catch {
+      // Ignore cleanup errors
+    }
+    throw error;
+  }
+}
+
+/**
+ * Safely read JSON file with fallback to default
+ */
+async function readJsonFile<T>(filePath: string, defaultValue: T): Promise<T> {
+  try {
+    const content = (await secureFs.readFile(filePath, 'utf-8')) as string;
+    return JSON.parse(content) as T;
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      return defaultValue;
+    }
+    logger.error(`Error reading ${filePath}:`, error);
+    return defaultValue;
+  }
+}
+
+/**
+ * Generate a unique ID for pipeline steps
+ */
+function generateStepId(): string {
+  return `step_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 8)}`;
+}
+
+/**
+ * Get the pipeline config file path for a project
+ */
+function getPipelineConfigPath(projectPath: string): string {
+  return path.join(projectPath, '.automaker', 'pipeline.json');
+}
+
+/**
+ * PipelineService - Manages pipeline configuration for workflow automation
+ *
+ * Handles reading and writing pipeline config to JSON files with atomic operations.
+ * Pipeline steps define custom columns that appear between "in_progress" and
+ * "waiting_approval/verified" columns in the kanban board.
+ */
+export class PipelineService {
+  /**
+   * Get pipeline configuration for a project
+   *
+   * @param projectPath - Absolute path to the project
+   * @returns Promise resolving to PipelineConfig (empty steps array if no config exists)
+   */
+  async getPipelineConfig(projectPath: string): Promise<PipelineConfig> {
+    const configPath = getPipelineConfigPath(projectPath);
+    const config = await readJsonFile<PipelineConfig>(configPath, DEFAULT_PIPELINE_CONFIG);
+
+    // Ensure version is set
+    return {
+      ...DEFAULT_PIPELINE_CONFIG,
+      ...config,
+    };
+  }
+
+  /**
+   * Save entire pipeline configuration
+   *
+   * @param projectPath - Absolute path to the project
+   * @param config - Complete PipelineConfig to save
+   */
+  async savePipelineConfig(projectPath: string, config: PipelineConfig): Promise<void> {
+    await ensureAutomakerDir(projectPath);
+    const configPath = getPipelineConfigPath(projectPath);
+    await atomicWriteJson(configPath, config);
+    logger.info(`Pipeline config saved for project: ${projectPath}`);
+  }
+
+  /**
+   * Add a new pipeline step
+   *
+   * @param projectPath - Absolute path to the project
+   * @param step - Step data (without id, createdAt, updatedAt)
+   * @returns Promise resolving to the created PipelineStep
+   */
+  async addStep(
+    projectPath: string,
+    step: Omit<PipelineStep, 'id' | 'createdAt' | 'updatedAt'>
+  ): Promise<PipelineStep> {
+    const config = await this.getPipelineConfig(projectPath);
+    const now = new Date().toISOString();
+
+    const newStep: PipelineStep = {
+      ...step,
+      id: generateStepId(),
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    config.steps.push(newStep);
+
+    // Normalize order values
+    config.steps.sort((a, b) => a.order - b.order);
+    config.steps.forEach((s, index) => {
+      s.order = index;
+    });
+
+    await this.savePipelineConfig(projectPath, config);
+    logger.info(`Pipeline step added: ${newStep.name} (${newStep.id})`);
+
+    return newStep;
+  }
+
+  /**
+   * Update an existing pipeline step
+   *
+   * @param projectPath - Absolute path to the project
+   * @param stepId - ID of the step to update
+   * @param updates - Partial step data to merge
+   */
+  async updateStep(
+    projectPath: string,
+    stepId: string,
+    updates: Partial<Omit<PipelineStep, 'id' | 'createdAt'>>
+  ): Promise<PipelineStep> {
+    const config = await this.getPipelineConfig(projectPath);
+    const stepIndex = config.steps.findIndex((s) => s.id === stepId);
+
+    if (stepIndex === -1) {
+      throw new Error(`Pipeline step not found: ${stepId}`);
+    }
+
+    config.steps[stepIndex] = {
+      ...config.steps[stepIndex],
+      ...updates,
+      updatedAt: new Date().toISOString(),
+    };
+
+    await this.savePipelineConfig(projectPath, config);
+    logger.info(`Pipeline step updated: ${stepId}`);
+
+    return config.steps[stepIndex];
+  }
+
+  /**
+   * Delete a pipeline step
+   *
+   * @param projectPath - Absolute path to the project
+   * @param stepId - ID of the step to delete
+   */
+  async deleteStep(projectPath: string, stepId: string): Promise<void> {
+    const config = await this.getPipelineConfig(projectPath);
+    const stepIndex = config.steps.findIndex((s) => s.id === stepId);
+
+    if (stepIndex === -1) {
+      throw new Error(`Pipeline step not found: ${stepId}`);
+    }
+
+    config.steps.splice(stepIndex, 1);
+
+    // Normalize order values after deletion
+    config.steps.forEach((s, index) => {
+      s.order = index;
+    });
+
+    await this.savePipelineConfig(projectPath, config);
+    logger.info(`Pipeline step deleted: ${stepId}`);
+  }
+
+  /**
+   * Reorder pipeline steps
+   *
+   * @param projectPath - Absolute path to the project
+   * @param stepIds - Array of step IDs in the desired order
+   */
+  async reorderSteps(projectPath: string, stepIds: string[]): Promise<void> {
+    const config = await this.getPipelineConfig(projectPath);
+
+    // Validate all step IDs exist
+    const existingIds = new Set(config.steps.map((s) => s.id));
+    for (const id of stepIds) {
+      if (!existingIds.has(id)) {
+        throw new Error(`Pipeline step not found: ${id}`);
+      }
+    }
+
+    // Create a map for quick lookup
+    const stepMap = new Map(config.steps.map((s) => [s.id, s]));
+
+    // Reorder steps based on stepIds array
+    config.steps = stepIds.map((id, index) => {
+      const step = stepMap.get(id)!;
+      return { ...step, order: index, updatedAt: new Date().toISOString() };
+    });
+
+    await this.savePipelineConfig(projectPath, config);
+    logger.info(`Pipeline steps reordered`);
+  }
+
+  /**
+   * Get the next status in the pipeline flow
+   *
+   * Determines what status a feature should transition to based on current status.
+   * Flow: in_progress -> pipeline_step_0 -> pipeline_step_1 -> ... -> final status
+   * Steps in the excludedStepIds array will be skipped.
+   *
+   * @param currentStatus - Current feature status
+   * @param config - Pipeline configuration (or null if no pipeline)
+   * @param skipTests - Whether to skip tests (affects final status)
+   * @param excludedStepIds - Optional array of step IDs to skip
+   * @returns The next status in the pipeline flow
+   */
+  getNextStatus(
+    currentStatus: FeatureStatusWithPipeline,
+    config: PipelineConfig | null,
+    skipTests: boolean,
+    excludedStepIds?: string[]
+  ): FeatureStatusWithPipeline {
+    const steps = config?.steps || [];
+    const exclusions = new Set(excludedStepIds || []);
+
+    // Sort steps by order and filter out excluded steps
+    const sortedSteps = [...steps]
+      .sort((a, b) => a.order - b.order)
+      .filter((step) => !exclusions.has(step.id));
+
+    // If no pipeline steps (or all excluded), use original logic
+    if (sortedSteps.length === 0) {
+      // If coming from in_progress or already in a pipeline step, go to final status
+      if (currentStatus === 'in_progress' || currentStatus.startsWith('pipeline_')) {
+        return skipTests ? 'waiting_approval' : 'verified';
+      }
+      return currentStatus;
+    }
+
+    // Coming from in_progress -> go to first non-excluded pipeline step
+    if (currentStatus === 'in_progress') {
+      return `pipeline_${sortedSteps[0].id}`;
+    }
+
+    // Coming from a pipeline step -> go to next non-excluded step or final status
+    if (currentStatus.startsWith('pipeline_')) {
+      const currentStepId = currentStatus.replace('pipeline_', '');
+      const currentIndex = sortedSteps.findIndex((s) => s.id === currentStepId);
+
+      if (currentIndex === -1) {
+        // Current step not found in filtered list (might be excluded or invalid)
+        // Find next valid step after this one from the original sorted list
+        const allSortedSteps = [...steps].sort((a, b) => a.order - b.order);
+        const originalIndex = allSortedSteps.findIndex((s) => s.id === currentStepId);
+
+        if (originalIndex === -1) {
+          // Step truly doesn't exist, go to final status
+          return skipTests ? 'waiting_approval' : 'verified';
+        }
+
+        // Find the next non-excluded step after the current one
+        for (let i = originalIndex + 1; i < allSortedSteps.length; i++) {
+          if (!exclusions.has(allSortedSteps[i].id)) {
+            return `pipeline_${allSortedSteps[i].id}`;
+          }
+        }
+
+        // No more non-excluded steps, go to final status
+        return skipTests ? 'waiting_approval' : 'verified';
+      }
+
+      if (currentIndex < sortedSteps.length - 1) {
+        // Go to next non-excluded step
+        return `pipeline_${sortedSteps[currentIndex + 1].id}`;
+      }
+
+      // Last non-excluded step completed, go to final status
+      return skipTests ? 'waiting_approval' : 'verified';
+    }
+
+    // For other statuses, don't change
+    return currentStatus;
+  }
+
+  /**
+   * Get a specific pipeline step by ID
+   *
+   * @param projectPath - Absolute path to the project
+   * @param stepId - ID of the step to retrieve
+   * @returns The pipeline step or null if not found
+   */
+  async getStep(projectPath: string, stepId: string): Promise<PipelineStep | null> {
+    const config = await this.getPipelineConfig(projectPath);
+    return config.steps.find((s) => s.id === stepId) || null;
+  }
+
+  /**
+   * Check if a status is a pipeline status
+   */
+  isPipelineStatus(status: FeatureStatusWithPipeline): boolean {
+    return status.startsWith('pipeline_');
+  }
+
+  /**
+   * Extract step ID from a pipeline status
+   */
+  getStepIdFromStatus(status: FeatureStatusWithPipeline): string | null {
+    if (!this.isPipelineStatus(status)) {
+      return null;
+    }
+    return status.replace('pipeline_', '');
+  }
+}
+
+// Export singleton instance
+export const pipelineService = new PipelineService();
diff --git a/temp_repo/apps/server/src/services/pipeline-types.ts b/temp_repo/apps/server/src/services/pipeline-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67957b6a79ad56a30d327a3fd0e550bbbf9e5b60
--- /dev/null
+++ b/temp_repo/apps/server/src/services/pipeline-types.ts
@@ -0,0 +1,73 @@
+/**
+ * Pipeline Types - Type definitions for PipelineOrchestrator
+ */
+
+import type { Feature, PipelineStep, PipelineConfig } from '@automaker/types';
+
+export interface PipelineContext {
+  projectPath: string;
+  featureId: string;
+  feature: Feature;
+  steps: PipelineStep[];
+  workDir: string;
+  worktreePath: string | null;
+  branchName: string | null;
+  abortController: AbortController;
+  autoLoadClaudeMd: boolean;
+  useClaudeCodeSystemPrompt?: boolean;
+  testAttempts: number;
+  maxTestAttempts: number;
+}
+
+export interface PipelineStatusInfo {
+  isPipeline: boolean;
+  stepId: string | null;
+  stepIndex: number;
+  totalSteps: number;
+  step: PipelineStep | null;
+  config: PipelineConfig | null;
+}
+
+export interface StepResult {
+  success: boolean;
+  testsPassed?: boolean;
+  message?: string;
+}
+
+export interface MergeResult {
+  success: boolean;
+  hasConflicts?: boolean;
+  needsAgentResolution?: boolean;
+  error?: string;
+}
+
+export type UpdateFeatureStatusFn = (
+  projectPath: string,
+  featureId: string,
+  status: string
+) => Promise<void>;
+
+export type BuildFeaturePromptFn = (
+  feature: Feature,
+  prompts: { implementationInstructions: string; playwrightVerificationInstructions: string }
+) => string;
+
+export type ExecuteFeatureFn = (
+  projectPath: string,
+  featureId: string,
+  useWorktrees: boolean,
+  useScreenshots: boolean,
+  model?: string,
+  options?: { _calledInternally?: boolean }
+) => Promise<void>;
+
+export type RunAgentFn = (
+  workDir: string,
+  featureId: string,
+  prompt: string,
+  abortController: AbortController,
+  projectPath: string,
+  imagePaths?: string[],
+  model?: string,
+  options?: Record<string, unknown>
+) => Promise<void>;
diff --git a/temp_repo/apps/server/src/services/plan-approval-service.ts b/temp_repo/apps/server/src/services/plan-approval-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ebd377679531ea6db0cf7f0e0ea54195356d7bbe
--- /dev/null
+++ b/temp_repo/apps/server/src/services/plan-approval-service.ts
@@ -0,0 +1,332 @@
+/**
+ * PlanApprovalService - Manages plan approval workflow with timeout and recovery
+ *
+ * Key behaviors:
+ * - Timeout stored in closure, wrapped resolve/reject ensures cleanup
+ * - Recovery returns needsRecovery flag (caller handles execution)
+ * - Auto-reject on timeout (safety feature, not auto-approve)
+ */
+
+import { createLogger } from '@automaker/utils';
+import type { TypedEventBus } from './typed-event-bus.js';
+import type { FeatureStateManager } from './feature-state-manager.js';
+import type { SettingsService } from './settings-service.js';
+
+const logger = createLogger('PlanApprovalService');
+
+/** Result returned when approval is resolved */
+export interface PlanApprovalResult {
+  approved: boolean;
+  editedPlan?: string;
+  feedback?: string;
+}
+
+/** Result returned from resolveApproval method */
+export interface ResolveApprovalResult {
+  success: boolean;
+  error?: string;
+  needsRecovery?: boolean;
+}
+
+/** Represents an orphaned approval that needs recovery after server restart */
+export interface OrphanedApproval {
+  featureId: string;
+  projectPath: string;
+  generatedAt?: string;
+  planContent?: string;
+}
+
+/** Internal: timeoutId stored in closure, NOT in this object */
+interface PendingApproval {
+  resolve: (result: PlanApprovalResult) => void;
+  reject: (error: Error) => void;
+  featureId: string;
+  projectPath: string;
+}
+
+/** Default timeout: 30 minutes */
+const DEFAULT_APPROVAL_TIMEOUT_MS = 30 * 60 * 1000;
+
+/**
+ * PlanApprovalService handles the plan approval workflow with lifecycle management.
+ */
+export class PlanApprovalService {
+  private pendingApprovals = new Map<string, PendingApproval>();
+  private eventBus: TypedEventBus;
+  private featureStateManager: FeatureStateManager;
+  private settingsService: SettingsService | null;
+
+  constructor(
+    eventBus: TypedEventBus,
+    featureStateManager: FeatureStateManager,
+    settingsService: SettingsService | null
+  ) {
+    this.eventBus = eventBus;
+    this.featureStateManager = featureStateManager;
+    this.settingsService = settingsService;
+  }
+
+  /** Generate project-scoped key to prevent collisions across projects */
+  private approvalKey(projectPath: string, featureId: string): string {
+    return `${projectPath}::${featureId}`;
+  }
+
+  /** Wait for plan approval with timeout (default 30 min). Rejects on timeout/cancellation. */
+  async waitForApproval(featureId: string, projectPath: string): Promise<PlanApprovalResult> {
+    const timeoutMs = await this.getTimeoutMs(projectPath);
+    const timeoutMinutes = Math.round(timeoutMs / 60000);
+    const key = this.approvalKey(projectPath, featureId);
+
+    logger.info(`Registering pending approval for feature ${featureId} in project ${projectPath}`);
+    logger.info(
+      `Current pending approvals: ${Array.from(this.pendingApprovals.keys()).join(', ') || 'none'}`
+    );
+
+    return new Promise((resolve, reject) => {
+      // Prevent duplicate registrations for the same key — reject and clean up existing entry
+      const existing = this.pendingApprovals.get(key);
+      if (existing) {
+        existing.reject(new Error('Superseded by a new waitForApproval call'));
+        this.pendingApprovals.delete(key);
+      }
+
+      // Wrap resolve/reject to clear timeout when approval is resolved
+      // This ensures timeout is ALWAYS cleared on any resolution path
+      // Define wrappers BEFORE setTimeout so they can be used in timeout callback
+      let timeoutId: NodeJS.Timeout;
+      const wrappedResolve = (result: PlanApprovalResult) => {
+        clearTimeout(timeoutId);
+        resolve(result);
+      };
+
+      const wrappedReject = (error: Error) => {
+        clearTimeout(timeoutId);
+        reject(error);
+      };
+
+      // Set up timeout to prevent indefinite waiting and memory leaks
+      // Now timeoutId assignment happens after wrappers are defined
+      timeoutId = setTimeout(() => {
+        const pending = this.pendingApprovals.get(key);
+        if (pending) {
+          logger.warn(
+            `Plan approval for feature ${featureId} timed out after ${timeoutMinutes} minutes`
+          );
+          this.pendingApprovals.delete(key);
+          wrappedReject(
+            new Error(
+              `Plan approval timed out after ${timeoutMinutes} minutes - feature execution cancelled`
+            )
+          );
+        }
+      }, timeoutMs);
+
+      this.pendingApprovals.set(key, {
+        resolve: wrappedResolve,
+        reject: wrappedReject,
+        featureId,
+        projectPath,
+      });
+
+      logger.info(
+        `Pending approval registered for feature ${featureId} (timeout: ${timeoutMinutes} minutes)`
+      );
+    });
+  }
+
+  /** Resolve approval. Recovery path: returns needsRecovery=true if planSpec.status='generated'. */
+  async resolveApproval(
+    featureId: string,
+    approved: boolean,
+    options?: { editedPlan?: string; feedback?: string; projectPath?: string }
+  ): Promise<ResolveApprovalResult> {
+    const { editedPlan, feedback, projectPath: projectPathFromClient } = options ?? {};
+
+    logger.info(`resolveApproval called for feature ${featureId}, approved=${approved}`);
+    logger.info(
+      `Current pending approvals: ${Array.from(this.pendingApprovals.keys()).join(', ') || 'none'}`
+    );
+
+    // Try to find pending approval using project-scoped key if projectPath is available
+    let foundKey: string | undefined;
+    let pending: PendingApproval | undefined;
+
+    if (projectPathFromClient) {
+      foundKey = this.approvalKey(projectPathFromClient, featureId);
+      pending = this.pendingApprovals.get(foundKey);
+    } else {
+      // Fallback: search by featureId (backward compatibility)
+      for (const [key, approval] of this.pendingApprovals) {
+        if (approval.featureId === featureId) {
+          foundKey = key;
+          pending = approval;
+          break;
+        }
+      }
+    }
+
+    if (!pending) {
+      logger.info(`No pending approval in Map for feature ${featureId}`);
+
+      // RECOVERY: If no pending approval but we have projectPath from client,
+      // check if feature's planSpec.status is 'generated' and handle recovery
+      if (projectPathFromClient) {
+        logger.info(`Attempting recovery with projectPath: ${projectPathFromClient}`);
+        const feature = await this.featureStateManager.loadFeature(
+          projectPathFromClient,
+          featureId
+        );
+
+        if (feature?.planSpec?.status === 'generated') {
+          logger.info(`Feature ${featureId} has planSpec.status='generated', performing recovery`);
+
+          if (approved) {
+            // Update planSpec to approved
+            await this.featureStateManager.updateFeaturePlanSpec(projectPathFromClient, featureId, {
+              status: 'approved',
+              approvedAt: new Date().toISOString(),
+              reviewedByUser: true,
+              content: editedPlan || feature.planSpec.content,
+            });
+
+            logger.info(`Recovery approval complete for feature ${featureId}`);
+
+            // Return needsRecovery flag - caller (AutoModeService) handles execution
+            return { success: true, needsRecovery: true };
+          } else {
+            // Rejection recovery
+            await this.featureStateManager.updateFeaturePlanSpec(projectPathFromClient, featureId, {
+              status: 'rejected',
+              reviewedByUser: true,
+            });
+
+            await this.featureStateManager.updateFeatureStatus(
+              projectPathFromClient,
+              featureId,
+              'backlog'
+            );
+
+            this.eventBus.emitAutoModeEvent('plan_rejected', {
+              featureId,
+              projectPath: projectPathFromClient,
+              feedback,
+            });
+
+            return { success: true };
+          }
+        }
+      }
+
+      logger.info(
+        `ERROR: No pending approval found for feature ${featureId} and recovery not possible`
+      );
+      return {
+        success: false,
+        error: `No pending approval for feature ${featureId}`,
+      };
+    }
+
+    logger.info(`Found pending approval for feature ${featureId}, proceeding...`);
+
+    const { projectPath } = pending;
+
+    // Update feature's planSpec status
+    await this.featureStateManager.updateFeaturePlanSpec(projectPath, featureId, {
+      status: approved ? 'approved' : 'rejected',
+      approvedAt: approved ? new Date().toISOString() : undefined,
+      reviewedByUser: true,
+      ...(editedPlan !== undefined && { content: editedPlan }), // Only update content if user provided an edited version
+    });
+
+    // If rejected, emit event so client knows the rejection reason (even without feedback)
+    if (!approved) {
+      this.eventBus.emitAutoModeEvent('plan_rejected', {
+        featureId,
+        projectPath,
+        feedback,
+      });
+    }
+
+    // Resolve the promise with all data including feedback
+    // This triggers the wrapped resolve which clears the timeout
+    pending.resolve({ approved, editedPlan, feedback });
+    if (foundKey) {
+      this.pendingApprovals.delete(foundKey);
+    }
+
+    return { success: true };
+  }
+
+  /** Cancel approval (e.g., when feature stopped). Timeout cleared via wrapped reject. */
+  cancelApproval(featureId: string, projectPath?: string): void {
+    logger.info(`cancelApproval called for feature ${featureId}`);
+    logger.info(
+      `Current pending approvals: ${Array.from(this.pendingApprovals.keys()).join(', ') || 'none'}`
+    );
+
+    // If projectPath provided, use project-scoped key; otherwise search by featureId
+    let foundKey: string | undefined;
+    let pending: PendingApproval | undefined;
+
+    if (projectPath) {
+      foundKey = this.approvalKey(projectPath, featureId);
+      pending = this.pendingApprovals.get(foundKey);
+    } else {
+      // Fallback: search for any approval with this featureId (backward compatibility)
+      for (const [key, approval] of this.pendingApprovals) {
+        if (approval.featureId === featureId) {
+          foundKey = key;
+          pending = approval;
+          break;
+        }
+      }
+    }
+
+    if (pending && foundKey) {
+      logger.info(`Found and cancelling pending approval for feature ${featureId}`);
+      // Wrapped reject clears timeout automatically
+      pending.reject(new Error('Plan approval cancelled - feature was stopped'));
+      this.pendingApprovals.delete(foundKey);
+    } else {
+      logger.info(`No pending approval to cancel for feature ${featureId}`);
+    }
+  }
+
+  /** Check if a feature has a pending plan approval. */
+  hasPendingApproval(featureId: string, projectPath?: string): boolean {
+    if (projectPath) {
+      return this.pendingApprovals.has(this.approvalKey(projectPath, featureId));
+    }
+    // Fallback: search by featureId (backward compatibility)
+    for (const approval of this.pendingApprovals.values()) {
+      if (approval.featureId === featureId) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /** Get timeout from project settings or default (30 min). */
+  private async getTimeoutMs(projectPath: string): Promise<number> {
+    if (!this.settingsService) {
+      return DEFAULT_APPROVAL_TIMEOUT_MS;
+    }
+
+    try {
+      const projectSettings = await this.settingsService.getProjectSettings(projectPath);
+      // Check for planApprovalTimeoutMs in project settings
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const timeoutMs = (projectSettings as any).planApprovalTimeoutMs;
+      if (typeof timeoutMs === 'number' && timeoutMs > 0) {
+        return timeoutMs;
+      }
+    } catch (error) {
+      logger.warn(
+        `Failed to get project settings for ${projectPath}, using default timeout`,
+        error
+      );
+    }
+
+    return DEFAULT_APPROVAL_TIMEOUT_MS;
+  }
+}
diff --git a/temp_repo/apps/server/src/services/pr-review-comments.service.ts b/temp_repo/apps/server/src/services/pr-review-comments.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d4bc1388a14bb41e66567dbaf515eb02f0d8a571
--- /dev/null
+++ b/temp_repo/apps/server/src/services/pr-review-comments.service.ts
@@ -0,0 +1,431 @@
+/**
+ * PR Review Comments Service
+ *
+ * Domain logic for fetching PR review comments, enriching them with
+ * resolved-thread status, and sorting. Extracted from the route handler
+ * so the route only deals with request/response plumbing.
+ */
+
+import { spawn, execFile } from 'child_process';
+import { promisify } from 'util';
+import { createLogger } from '@automaker/utils';
+import { execEnv, logError } from '../lib/exec-utils.js';
+
+const execFileAsync = promisify(execFile);
+
+// ── Public types (re-exported for callers) ──
+
+export interface PRReviewComment {
+  id: string;
+  author: string;
+  avatarUrl?: string;
+  body: string;
+  path?: string;
+  line?: number;
+  createdAt: string;
+  updatedAt?: string;
+  isReviewComment: boolean;
+  /** Whether this is an outdated review comment (code has changed since) */
+  isOutdated?: boolean;
+  /** Whether the review thread containing this comment has been resolved */
+  isResolved?: boolean;
+  /** The GraphQL node ID of the review thread (used for resolve/unresolve mutations) */
+  threadId?: string;
+  /** The diff hunk context for the comment */
+  diffHunk?: string;
+  /** The side of the diff (LEFT or RIGHT) */
+  side?: string;
+  /** The commit ID the comment was made on */
+  commitId?: string;
+  /** Whether the comment author is a bot/app account */
+  isBot?: boolean;
+}
+
+export interface ListPRReviewCommentsResult {
+  success: boolean;
+  comments?: PRReviewComment[];
+  totalCount?: number;
+  error?: string;
+}
+
+// ── Internal types ──
+
+/** Timeout for GitHub GraphQL API requests in milliseconds */
+const GITHUB_API_TIMEOUT_MS = 30000;
+
+/** Maximum number of pagination pages to prevent infinite loops */
+const MAX_PAGINATION_PAGES = 20;
+
+interface GraphQLReviewThreadComment {
+  databaseId: number;
+}
+
+interface GraphQLReviewThread {
+  id: string;
+  isResolved: boolean;
+  comments: {
+    pageInfo?: {
+      hasNextPage: boolean;
+      endCursor?: string | null;
+    };
+    nodes: GraphQLReviewThreadComment[];
+  };
+}
+
+interface GraphQLResponse {
+  data?: {
+    repository?: {
+      pullRequest?: {
+        reviewThreads?: {
+          nodes: GraphQLReviewThread[];
+          pageInfo?: {
+            hasNextPage: boolean;
+            endCursor?: string | null;
+          };
+        };
+      } | null;
+    };
+  };
+  errors?: Array<{ message: string }>;
+}
+
+interface ReviewThreadInfo {
+  isResolved: boolean;
+  threadId: string;
+}
+
+// ── Logger ──
+
+const logger = createLogger('PRReviewCommentsService');
+
+// ── Service functions ──
+
+/**
+ * Execute a GraphQL query via the `gh` CLI and return the parsed response.
+ */
+async function executeGraphQL(projectPath: string, requestBody: string): Promise<GraphQLResponse> {
+  let timeoutId: NodeJS.Timeout | undefined;
+
+  const response = await new Promise<GraphQLResponse>((resolve, reject) => {
+    const gh = spawn('gh', ['api', 'graphql', '--input', '-'], {
+      cwd: projectPath,
+      env: execEnv,
+    });
+
+    gh.on('error', (err) => {
+      clearTimeout(timeoutId);
+      reject(err);
+    });
+
+    timeoutId = setTimeout(() => {
+      gh.kill();
+      reject(new Error('GitHub GraphQL API request timed out'));
+    }, GITHUB_API_TIMEOUT_MS);
+
+    let stdout = '';
+    let stderr = '';
+    gh.stdout.on('data', (data: Buffer) => (stdout += data.toString()));
+    gh.stderr.on('data', (data: Buffer) => (stderr += data.toString()));
+
+    gh.on('close', (code) => {
+      clearTimeout(timeoutId);
+      if (code !== 0) {
+        return reject(new Error(`gh process exited with code ${code}: ${stderr}`));
+      }
+      try {
+        resolve(JSON.parse(stdout));
+      } catch (e) {
+        reject(e);
+      }
+    });
+
+    gh.stdin.on('error', () => {
+      // Ignore stdin errors (e.g. when the child process is killed)
+    });
+    gh.stdin.write(requestBody);
+    gh.stdin.end();
+  });
+
+  if (response.errors && response.errors.length > 0) {
+    throw new Error(response.errors[0].message);
+  }
+
+  return response;
+}
+
+/**
+ * Fetch review thread resolved status and thread IDs using GitHub GraphQL API.
+ * Uses cursor-based pagination to handle PRs with more than 100 review threads.
+ * Returns a map of comment ID (string) -> { isResolved, threadId }.
+ */
+export async function fetchReviewThreadResolvedStatus(
+  projectPath: string,
+  owner: string,
+  repo: string,
+  prNumber: number
+): Promise<Map<string, ReviewThreadInfo>> {
+  const resolvedMap = new Map<string, ReviewThreadInfo>();
+
+  const query = `
+    query GetPRReviewThreads(
+      $owner: String!
+      $repo: String!
+      $prNumber: Int!
+      $cursor: String
+    ) {
+      repository(owner: $owner, name: $repo) {
+        pullRequest(number: $prNumber) {
+          reviewThreads(first: 100, after: $cursor) {
+            pageInfo {
+              hasNextPage
+              endCursor
+            }
+            nodes {
+              id
+              isResolved
+              comments(first: 100) {
+                pageInfo {
+                  hasNextPage
+                  endCursor
+                }
+                nodes {
+                  databaseId
+                }
+              }
+            }
+          }
+        }
+      }
+    }`;
+
+  try {
+    let cursor: string | null = null;
+    let pageCount = 0;
+
+    do {
+      const variables = { owner, repo, prNumber, cursor };
+      const requestBody = JSON.stringify({ query, variables });
+      const response = await executeGraphQL(projectPath, requestBody);
+
+      const reviewThreads = response.data?.repository?.pullRequest?.reviewThreads;
+      const threads = reviewThreads?.nodes ?? [];
+
+      for (const thread of threads) {
+        if (thread.comments.pageInfo?.hasNextPage) {
+          logger.debug(
+            `Review thread ${thread.id} in PR #${prNumber} has >100 comments — ` +
+              'some comments may be missing resolved status'
+          );
+        }
+        const info: ReviewThreadInfo = { isResolved: thread.isResolved, threadId: thread.id };
+        for (const comment of thread.comments.nodes) {
+          resolvedMap.set(String(comment.databaseId), info);
+        }
+      }
+
+      const pageInfo = reviewThreads?.pageInfo;
+      if (pageInfo?.hasNextPage && pageInfo.endCursor) {
+        cursor = pageInfo.endCursor;
+        pageCount++;
+        logger.debug(
+          `Fetching next page of review threads for PR #${prNumber} (page ${pageCount + 1})`
+        );
+      } else {
+        cursor = null;
+      }
+    } while (cursor && pageCount < MAX_PAGINATION_PAGES);
+
+    if (pageCount >= MAX_PAGINATION_PAGES) {
+      logger.warn(
+        `PR #${prNumber} in ${owner}/${repo} has more than ${MAX_PAGINATION_PAGES * 100} review threads — ` +
+          'pagination limit reached. Some comments may be missing resolved status.'
+      );
+    }
+  } catch (error) {
+    // Log but don't fail — resolved status is best-effort
+    logError(error, 'Failed to fetch PR review thread resolved status');
+  }
+
+  return resolvedMap;
+}
+
+/**
+ * Fetch all comments for a PR (regular, inline review, and review body comments)
+ */
+export async function fetchPRReviewComments(
+  projectPath: string,
+  owner: string,
+  repo: string,
+  prNumber: number
+): Promise<PRReviewComment[]> {
+  const allComments: PRReviewComment[] = [];
+
+  // Fetch review thread resolved status in parallel with comment fetching
+  const resolvedStatusPromise = fetchReviewThreadResolvedStatus(projectPath, owner, repo, prNumber);
+
+  // 1. Fetch regular PR comments (issue-level comments)
+  // Uses the REST API issues endpoint instead of `gh pr view --json comments`
+  // because the latter uses GraphQL internally where bot/app authors can return
+  // null, causing bot comments to be silently dropped or display as "unknown".
+  try {
+    const issueCommentsEndpoint = `repos/${owner}/${repo}/issues/${prNumber}/comments`;
+    const { stdout: commentsOutput } = await execFileAsync(
+      'gh',
+      ['api', issueCommentsEndpoint, '--paginate'],
+      {
+        cwd: projectPath,
+        env: execEnv,
+        maxBuffer: 1024 * 1024 * 10, // 10MB buffer for large PRs
+        timeout: GITHUB_API_TIMEOUT_MS,
+      }
+    );
+
+    const commentsData = JSON.parse(commentsOutput);
+    const regularComments = (Array.isArray(commentsData) ? commentsData : []).map(
+      (c: {
+        id: number;
+        user: { login: string; avatar_url?: string; type?: string } | null;
+        body: string;
+        created_at: string;
+        updated_at?: string;
+        performed_via_github_app?: { slug: string } | null;
+      }) => ({
+        id: String(c.id),
+        author: c.user?.login || c.performed_via_github_app?.slug || 'unknown',
+        avatarUrl: c.user?.avatar_url,
+        body: c.body,
+        createdAt: c.created_at,
+        updatedAt: c.updated_at,
+        isReviewComment: false,
+        isOutdated: false,
+        isBot: c.user?.type === 'Bot' || !!c.performed_via_github_app,
+        // Regular PR comments are not part of review threads, so not resolvable
+        isResolved: false,
+      })
+    );
+
+    allComments.push(...regularComments);
+  } catch (error) {
+    logError(error, 'Failed to fetch regular PR comments');
+  }
+
+  // 2. Fetch inline review comments (code-level comments with file/line info)
+  try {
+    const reviewsEndpoint = `repos/${owner}/${repo}/pulls/${prNumber}/comments`;
+    const { stdout: reviewsOutput } = await execFileAsync(
+      'gh',
+      ['api', reviewsEndpoint, '--paginate'],
+      {
+        cwd: projectPath,
+        env: execEnv,
+        maxBuffer: 1024 * 1024 * 10, // 10MB buffer for large PRs
+        timeout: GITHUB_API_TIMEOUT_MS,
+      }
+    );
+
+    const reviewsData = JSON.parse(reviewsOutput);
+    const reviewComments = (Array.isArray(reviewsData) ? reviewsData : []).map(
+      (c: {
+        id: number;
+        user: { login: string; avatar_url?: string; type?: string } | null;
+        body: string;
+        path: string;
+        line?: number;
+        original_line?: number;
+        created_at: string;
+        updated_at?: string;
+        diff_hunk?: string;
+        side?: string;
+        commit_id?: string;
+        position?: number | null;
+        performed_via_github_app?: { slug: string } | null;
+      }) => ({
+        id: String(c.id),
+        author: c.user?.login || c.performed_via_github_app?.slug || 'unknown',
+        avatarUrl: c.user?.avatar_url,
+        body: c.body,
+        path: c.path,
+        line: c.line ?? c.original_line,
+        createdAt: c.created_at,
+        updatedAt: c.updated_at,
+        isReviewComment: true,
+        // A review comment is "outdated" if position is null (code has changed)
+        isOutdated: c.position === null,
+        // isResolved will be filled in below from GraphQL data
+        isResolved: false,
+        isBot: c.user?.type === 'Bot' || !!c.performed_via_github_app,
+        diffHunk: c.diff_hunk,
+        side: c.side,
+        commitId: c.commit_id,
+      })
+    );
+
+    allComments.push(...reviewComments);
+  } catch (error) {
+    logError(error, 'Failed to fetch inline review comments');
+  }
+
+  // 3. Fetch review body comments (summary text submitted with each review)
+  // These are the top-level comments written when submitting a review
+  // (Approve, Request Changes, Comment). They are separate from inline code comments
+  // and issue-level comments. Only include reviews that have a non-empty body.
+  try {
+    const reviewsEndpoint = `repos/${owner}/${repo}/pulls/${prNumber}/reviews`;
+    const { stdout: reviewBodiesOutput } = await execFileAsync(
+      'gh',
+      ['api', reviewsEndpoint, '--paginate'],
+      {
+        cwd: projectPath,
+        env: execEnv,
+        maxBuffer: 1024 * 1024 * 10, // 10MB buffer for large PRs
+        timeout: GITHUB_API_TIMEOUT_MS,
+      }
+    );
+
+    const reviewBodiesData = JSON.parse(reviewBodiesOutput);
+    const reviewBodyComments = (Array.isArray(reviewBodiesData) ? reviewBodiesData : [])
+      .filter(
+        (r: { body?: string; state?: string }) =>
+          r.body && r.body.trim().length > 0 && r.state !== 'PENDING'
+      )
+      .map(
+        (r: {
+          id: number;
+          user: { login: string; avatar_url?: string; type?: string } | null;
+          body: string;
+          state: string;
+          submitted_at: string;
+          performed_via_github_app?: { slug: string } | null;
+        }) => ({
+          id: `review-${r.id}`,
+          author: r.user?.login || r.performed_via_github_app?.slug || 'unknown',
+          avatarUrl: r.user?.avatar_url,
+          body: r.body,
+          createdAt: r.submitted_at,
+          isReviewComment: false,
+          isOutdated: false,
+          isResolved: false,
+          isBot: r.user?.type === 'Bot' || !!r.performed_via_github_app,
+        })
+      );
+
+    allComments.push(...reviewBodyComments);
+  } catch (error) {
+    logError(error, 'Failed to fetch review body comments');
+  }
+
+  // Wait for resolved status and apply to inline review comments
+  const resolvedMap = await resolvedStatusPromise;
+  for (const comment of allComments) {
+    if (comment.isReviewComment && resolvedMap.has(comment.id)) {
+      const info = resolvedMap.get(comment.id)!;
+      comment.isResolved = info.isResolved;
+      comment.threadId = info.threadId;
+    }
+  }
+
+  // Sort by createdAt descending (newest first)
+  allComments.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+
+  return allComments;
+}
diff --git a/temp_repo/apps/server/src/services/pr-service.ts b/temp_repo/apps/server/src/services/pr-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4b26f35b8690f47cdf0f01723e9765057a064573
--- /dev/null
+++ b/temp_repo/apps/server/src/services/pr-service.ts
@@ -0,0 +1,225 @@
+/**
+ * Service for resolving PR target information from git remotes.
+ *
+ * Extracts remote-parsing and target-resolution logic that was previously
+ * inline in the create-pr route handler.
+ */
+
+// TODO: Move execAsync/execEnv to a shared lib (lib/exec.ts or @automaker/utils) so that
+// services no longer depend on route internals. Tracking issue: route-to-service dependency
+// inversion. For now, a local thin wrapper is used within the service boundary.
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { createLogger, isValidRemoteName } from '@automaker/utils';
+
+// Thin local wrapper — duplicates the route-level execAsync/execEnv until a
+// shared lib/exec.ts (or @automaker/utils export) is created.
+const execAsync = promisify(exec);
+
+const pathSeparator = process.platform === 'win32' ? ';' : ':';
+const _additionalPaths: string[] = [];
+if (process.platform === 'win32') {
+  if (process.env.LOCALAPPDATA)
+    _additionalPaths.push(`${process.env.LOCALAPPDATA}\\Programs\\Git\\cmd`);
+  if (process.env.PROGRAMFILES) _additionalPaths.push(`${process.env.PROGRAMFILES}\\Git\\cmd`);
+  if (process.env['ProgramFiles(x86)'])
+    _additionalPaths.push(`${process.env['ProgramFiles(x86)']}\\Git\\cmd`);
+} else {
+  _additionalPaths.push(
+    '/opt/homebrew/bin',
+    '/usr/local/bin',
+    '/home/linuxbrew/.linuxbrew/bin',
+    `${process.env.HOME}/.local/bin`
+  );
+}
+const execEnv = {
+  ...process.env,
+  PATH: [process.env.PATH, ..._additionalPaths.filter(Boolean)].filter(Boolean).join(pathSeparator),
+};
+
+const logger = createLogger('PRService');
+
+export interface ParsedRemote {
+  owner: string;
+  repo: string;
+}
+
+export interface PrTargetResult {
+  repoUrl: string | null;
+  targetRepo: string | null;
+  pushOwner: string | null;
+  upstreamRepo: string | null;
+  originOwner: string | null;
+  parsedRemotes: Map<string, ParsedRemote>;
+}
+
+/**
+ * Parse all git remotes for the given repo path and resolve the PR target.
+ *
+ * @param worktreePath - Working directory of the repository / worktree
+ * @param pushRemote   - Remote used for pushing (e.g. "origin")
+ * @param targetRemote - Explicit remote to target the PR against (optional)
+ *
+ * @throws {Error} When targetRemote is specified but not found among repository remotes
+ * @throws {Error} When pushRemote is not found among parsed remotes (when targetRemote is specified)
+ */
+export async function resolvePrTarget({
+  worktreePath,
+  pushRemote,
+  targetRemote,
+}: {
+  worktreePath: string;
+  pushRemote: string;
+  targetRemote?: string;
+}): Promise<PrTargetResult> {
+  // Validate remote names — pushRemote is a required string so the undefined
+  // guard is unnecessary, but targetRemote is optional.
+  if (!isValidRemoteName(pushRemote)) {
+    throw new Error(`Invalid push remote name: "${pushRemote}"`);
+  }
+  if (targetRemote !== undefined && !isValidRemoteName(targetRemote)) {
+    throw new Error(`Invalid target remote name: "${targetRemote}"`);
+  }
+
+  let repoUrl: string | null = null;
+  let upstreamRepo: string | null = null;
+  let originOwner: string | null = null;
+  const parsedRemotes: Map<string, ParsedRemote> = new Map();
+
+  try {
+    const { stdout: remotes } = await execAsync('git remote -v', {
+      cwd: worktreePath,
+      env: execEnv,
+    });
+
+    // Parse remotes to detect fork workflow and get repo URL
+    const lines = remotes.split(/\r?\n/); // Handle both Unix and Windows line endings
+    for (const line of lines) {
+      // Try multiple patterns to match different remote URL formats
+      // Pattern 1: git@github.com:owner/repo.git (fetch)
+      // Pattern 2: https://github.com/owner/repo.git (fetch)
+      // Pattern 3: https://github.com/owner/repo (fetch)
+      let match = line.match(
+        /^([a-zA-Z0-9._-]+)\s+.*[:/]([^/]+)\/([^/\s]+?)(?:\.git)?\s+\(fetch\)/
+      );
+      if (!match) {
+        // Try SSH format: git@github.com:owner/repo.git
+        match = line.match(
+          /^([a-zA-Z0-9._-]+)\s+git@[^:]+:([^/]+)\/([^\s]+?)(?:\.git)?\s+\(fetch\)/
+        );
+      }
+      if (!match) {
+        // Try HTTPS format: https://github.com/owner/repo.git
+        match = line.match(
+          /^([a-zA-Z0-9._-]+)\s+https?:\/\/[^/]+\/([^/]+)\/([^\s]+?)(?:\.git)?\s+\(fetch\)/
+        );
+      }
+
+      if (match) {
+        const [, remoteName, owner, repo] = match;
+        parsedRemotes.set(remoteName, { owner, repo });
+        if (remoteName === 'upstream') {
+          upstreamRepo = `${owner}/${repo}`;
+          repoUrl = `https://github.com/${owner}/${repo}`;
+        } else if (remoteName === 'origin') {
+          originOwner = owner;
+          if (!repoUrl) {
+            repoUrl = `https://github.com/${owner}/${repo}`;
+          }
+        }
+      }
+    }
+  } catch (err) {
+    // Log the failure for debugging — control flow falls through to auto-detection
+    logger.debug('Failed to parse git remotes', { worktreePath, error: err });
+  }
+
+  // When targetRemote is explicitly provided but remote parsing failed entirely
+  // (parsedRemotes is empty), we cannot validate or resolve the requested remote.
+  // Silently proceeding to auto-detection would ignore the caller's explicit intent,
+  // so we fail fast with a clear error instead.
+  if (targetRemote && parsedRemotes.size === 0) {
+    throw new Error(
+      `targetRemote "${targetRemote}" was specified but no remotes could be parsed from the repository. ` +
+        `Ensure the repository has at least one configured remote (parsedRemotes is empty).`
+    );
+  }
+
+  // When a targetRemote is explicitly specified, validate that it is known
+  // before using it. Silently falling back to auto-detection when the caller
+  // explicitly requested a remote that doesn't exist is misleading, so we
+  // fail fast here instead.
+  if (targetRemote && parsedRemotes.size > 0 && !parsedRemotes.has(targetRemote)) {
+    throw new Error(`targetRemote "${targetRemote}" not found in repository remotes`);
+  }
+
+  // When a targetRemote is explicitly specified, override fork detection
+  // to use the specified remote as the PR target
+  let targetRepo: string | null = null;
+  let pushOwner: string | null = null;
+  if (targetRemote && parsedRemotes.size > 0) {
+    const targetInfo = parsedRemotes.get(targetRemote);
+    const pushInfo = parsedRemotes.get(pushRemote);
+
+    // If the push remote is not found in the parsed remotes, we cannot
+    // determine the push owner and would build incorrect URLs. Fail fast
+    // instead of silently proceeding with null values.
+    if (!pushInfo) {
+      logger.warn('Push remote not found in parsed remotes', {
+        pushRemote,
+        targetRemote,
+        availableRemotes: [...parsedRemotes.keys()],
+      });
+      throw new Error(`Push remote "${pushRemote}" not found in repository remotes`);
+    }
+
+    if (targetInfo) {
+      targetRepo = `${targetInfo.owner}/${targetInfo.repo}`;
+      repoUrl = `https://github.com/${targetInfo.owner}/${targetInfo.repo}`;
+    }
+    pushOwner = pushInfo.owner;
+
+    // Override the auto-detected upstream/origin with explicit targetRemote
+    // Only treat as cross-remote if target differs from push remote
+    if (targetRemote !== pushRemote && targetInfo) {
+      upstreamRepo = targetRepo;
+      originOwner = pushOwner;
+    } else if (targetInfo) {
+      // Same remote for push and target - regular (non-fork) workflow
+      upstreamRepo = null;
+      originOwner = targetInfo.owner;
+      repoUrl = `https://github.com/${targetInfo.owner}/${targetInfo.repo}`;
+    }
+  }
+
+  // Fallback: Try to get repo URL from git config if remote parsing failed
+  if (!repoUrl) {
+    try {
+      const { stdout: originUrl } = await execAsync('git config --get remote.origin.url', {
+        cwd: worktreePath,
+        env: execEnv,
+      });
+      const url = originUrl.trim();
+
+      // Parse URL to extract owner/repo
+      // Handle both SSH (git@github.com:owner/repo.git) and HTTPS (https://github.com/owner/repo.git)
+      const match = url.match(/[:/]([^/]+)\/([^/\s]+?)(?:\.git)?$/);
+      if (match) {
+        const [, owner, repo] = match;
+        originOwner = owner;
+        repoUrl = `https://github.com/${owner}/${repo}`;
+      }
+    } catch {
+      // Failed to get repo URL from config
+    }
+  }
+
+  return {
+    repoUrl,
+    targetRepo,
+    pushOwner,
+    upstreamRepo,
+    originOwner,
+    parsedRemotes,
+  };
+}
diff --git a/temp_repo/apps/server/src/services/pull-service.ts b/temp_repo/apps/server/src/services/pull-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d6f8c36a88e3ded8403a2569eba1f41e24a6aec6
--- /dev/null
+++ b/temp_repo/apps/server/src/services/pull-service.ts
@@ -0,0 +1,546 @@
+/**
+ * PullService - Pull git operations without HTTP
+ *
+ * Encapsulates the full git pull workflow including:
+ * - Branch name and detached HEAD detection
+ * - Fetching from remote
+ * - Status parsing and local change detection
+ * - Stash push/pop logic
+ * - Upstream verification (rev-parse / --verify)
+ * - Pull execution and conflict detection
+ * - Conflict file list collection
+ *
+ * Extracted from the worktree pull route to improve organization
+ * and testability. Follows the same pattern as rebase-service.ts
+ * and cherry-pick-service.ts.
+ */
+
+import { createLogger, getErrorMessage } from '@automaker/utils';
+import { execGitCommand, getConflictFiles } from '@automaker/git-utils';
+import { execGitCommandWithLockRetry, getCurrentBranch } from '../lib/git.js';
+
+const logger = createLogger('PullService');
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface PullOptions {
+  /** Remote name to pull from (defaults to 'origin') */
+  remote?: string;
+  /** Specific remote branch to pull (e.g. 'main'). When provided, overrides the tracking branch and fetches this branch from the remote. */
+  remoteBranch?: string;
+  /** When true, automatically stash local changes before pulling and reapply after */
+  stashIfNeeded?: boolean;
+}
+
+export interface PullResult {
+  success: boolean;
+  error?: string;
+  branch?: string;
+  pulled?: boolean;
+  hasLocalChanges?: boolean;
+  localChangedFiles?: string[];
+  stashed?: boolean;
+  stashRestored?: boolean;
+  stashRecoveryFailed?: boolean;
+  hasConflicts?: boolean;
+  conflictSource?: 'pull' | 'stash';
+  conflictFiles?: string[];
+  message?: string;
+  /** Whether the pull resulted in a merge commit (not fast-forward) */
+  isMerge?: boolean;
+  /** Whether the pull was a fast-forward (no merge commit needed) */
+  isFastForward?: boolean;
+  /** Files affected by the merge (only present when isMerge is true) */
+  mergeAffectedFiles?: string[];
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+/**
+ * Fetch the latest refs from a remote.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @param remote - Remote name (e.g. 'origin')
+ */
+export async function fetchRemote(worktreePath: string, remote: string): Promise<void> {
+  await execGitCommand(['fetch', remote], worktreePath);
+}
+
+/**
+ * Parse `git status --porcelain` output into a list of changed file paths.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @returns Object with hasLocalChanges flag and list of changed file paths
+ */
+export async function getLocalChanges(
+  worktreePath: string
+): Promise<{ hasLocalChanges: boolean; localChangedFiles: string[] }> {
+  const statusOutput = await execGitCommand(['status', '--porcelain'], worktreePath);
+  const hasLocalChanges = statusOutput.trim().length > 0;
+
+  let localChangedFiles: string[] = [];
+  if (hasLocalChanges) {
+    localChangedFiles = statusOutput
+      .trim()
+      .split('\n')
+      .filter((line) => line.trim().length > 0)
+      .map((line) => {
+        const entry = line.substring(3).trim();
+        const arrowIndex = entry.indexOf(' -> ');
+        return arrowIndex !== -1 ? entry.substring(arrowIndex + 4).trim() : entry;
+      });
+  }
+
+  return { hasLocalChanges, localChangedFiles };
+}
+
+/**
+ * Stash local changes with a descriptive message.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @param branchName - Current branch name (used in stash message)
+ * @returns Promise<void> — resolves on success, throws on failure
+ */
+export async function stashChanges(worktreePath: string, branchName: string): Promise<void> {
+  const stashMessage = `automaker-pull-stash: Pre-pull stash on ${branchName}`;
+  await execGitCommandWithLockRetry(
+    ['stash', 'push', '--include-untracked', '-m', stashMessage],
+    worktreePath
+  );
+}
+
+/**
+ * Pop the top stash entry.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @returns The stdout from stash pop
+ */
+export async function popStash(worktreePath: string): Promise<string> {
+  return await execGitCommandWithLockRetry(['stash', 'pop'], worktreePath);
+}
+
+/**
+ * Try to pop the stash, returning whether the pop succeeded.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @returns true if stash pop succeeded, false if it failed
+ */
+async function tryPopStash(worktreePath: string): Promise<boolean> {
+  try {
+    await execGitCommandWithLockRetry(['stash', 'pop'], worktreePath);
+    return true;
+  } catch (stashPopError) {
+    // Stash pop failed - leave it in stash list for manual recovery
+    logger.error('Failed to reapply stash during error recovery', {
+      worktreePath,
+      error: getErrorMessage(stashPopError),
+    });
+    return false;
+  }
+}
+
+/**
+ * Result of the upstream/remote branch check.
+ * - 'tracking': the branch has a configured upstream tracking ref
+ * - 'remote': no tracking ref, but the remote branch exists
+ * - 'none': neither a tracking ref nor a remote branch was found
+ */
+export type UpstreamStatus = 'tracking' | 'remote' | 'none';
+
+/**
+ * Check whether the branch has an upstream tracking ref, or whether
+ * the remote branch exists.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @param branchName - Current branch name
+ * @param remote - Remote name
+ * @returns UpstreamStatus indicating tracking ref, remote branch, or neither
+ */
+export async function hasUpstreamOrRemoteBranch(
+  worktreePath: string,
+  branchName: string,
+  remote: string
+): Promise<UpstreamStatus> {
+  try {
+    await execGitCommand(['rev-parse', '--abbrev-ref', `${branchName}@{upstream}`], worktreePath);
+    return 'tracking';
+  } catch {
+    // No upstream tracking - check if the remote branch exists
+    try {
+      await execGitCommand(['rev-parse', '--verify', `${remote}/${branchName}`], worktreePath);
+      return 'remote';
+    } catch {
+      return 'none';
+    }
+  }
+}
+
+/**
+ * Check whether an error output string indicates a merge conflict.
+ */
+function isConflictError(errorOutput: string): boolean {
+  return errorOutput.includes('CONFLICT') || errorOutput.includes('Automatic merge failed');
+}
+
+/**
+ * Determine whether the current HEAD commit is a merge commit by checking
+ * whether it has two or more parent hashes.
+ *
+ * Runs `git show -s --pretty=%P HEAD` which prints the parent SHAs separated
+ * by spaces.  A merge commit has at least two parents; a regular commit has one.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @returns true if HEAD is a merge commit, false otherwise
+ */
+async function isMergeCommit(worktreePath: string): Promise<boolean> {
+  try {
+    const output = await execGitCommand(['show', '-s', '--pretty=%P', 'HEAD'], worktreePath);
+    // Each parent SHA is separated by a space; two or more means it's a merge
+    const parents = output
+      .trim()
+      .split(/\s+/)
+      .filter((p) => p.length > 0);
+    return parents.length >= 2;
+  } catch {
+    // If the check fails for any reason, assume it is not a merge commit
+    return false;
+  }
+}
+
+/**
+ * Check whether an output string indicates a stash conflict.
+ */
+function isStashConflict(output: string): boolean {
+  return output.includes('CONFLICT') || output.includes('Merge conflict');
+}
+
+// ============================================================================
+// Main Service Function
+// ============================================================================
+
+/**
+ * Perform a full git pull workflow on the given worktree.
+ *
+ * The workflow:
+ * 1. Get current branch name (detect detached HEAD)
+ * 2. Fetch from remote
+ * 3. Check for local changes
+ * 4. If local changes and stashIfNeeded, stash them
+ * 5. Verify upstream tracking or remote branch exists
+ * 6. Execute `git pull`
+ * 7. If stash was created and pull succeeded, reapply stash
+ * 8. Detect and report conflicts from pull or stash reapplication
+ *
+ * @param worktreePath - Path to the git worktree
+ * @param options - Pull options (remote, stashIfNeeded)
+ * @returns PullResult with detailed status information
+ */
+export async function performPull(
+  worktreePath: string,
+  options?: PullOptions
+): Promise<PullResult> {
+  const targetRemote = options?.remote || 'origin';
+  const stashIfNeeded = options?.stashIfNeeded ?? false;
+  const targetRemoteBranch = options?.remoteBranch;
+
+  // 1. Get current branch name
+  let branchName: string;
+  try {
+    branchName = await getCurrentBranch(worktreePath);
+  } catch (err) {
+    return {
+      success: false,
+      error: `Failed to get current branch: ${getErrorMessage(err)}`,
+    };
+  }
+
+  // 2. Check for detached HEAD state
+  if (branchName === 'HEAD') {
+    return {
+      success: false,
+      error: 'Cannot pull in detached HEAD state. Please checkout a branch first.',
+    };
+  }
+
+  // 3. Fetch latest from remote
+  try {
+    await fetchRemote(worktreePath, targetRemote);
+  } catch (fetchError) {
+    return {
+      success: false,
+      error: `Failed to fetch from remote '${targetRemote}': ${getErrorMessage(fetchError)}`,
+    };
+  }
+
+  // 4. Check for local changes
+  let hasLocalChanges: boolean;
+  let localChangedFiles: string[];
+  try {
+    ({ hasLocalChanges, localChangedFiles } = await getLocalChanges(worktreePath));
+  } catch (err) {
+    return {
+      success: false,
+      error: `Failed to get local changes: ${getErrorMessage(err)}`,
+    };
+  }
+
+  // 5. If there are local changes and stashIfNeeded is not requested, return info
+  if (hasLocalChanges && !stashIfNeeded) {
+    return {
+      success: true,
+      branch: branchName,
+      pulled: false,
+      hasLocalChanges: true,
+      localChangedFiles,
+      message:
+        'Local changes detected. Use stashIfNeeded to automatically stash and reapply changes.',
+    };
+  }
+
+  // 6. Stash local changes if needed
+  let didStash = false;
+  if (hasLocalChanges && stashIfNeeded) {
+    try {
+      await stashChanges(worktreePath, branchName);
+      didStash = true;
+    } catch (stashError) {
+      return {
+        success: false,
+        error: `Failed to stash local changes: ${getErrorMessage(stashError)}`,
+      };
+    }
+  }
+
+  // 7. Verify upstream tracking or remote branch exists
+  // Skip this check when a specific remote branch is provided - we always use
+  // explicit 'git pull <remote> <branch>' args in that case.
+  let upstreamStatus: UpstreamStatus = 'tracking';
+  if (!targetRemoteBranch) {
+    upstreamStatus = await hasUpstreamOrRemoteBranch(worktreePath, branchName, targetRemote);
+    if (upstreamStatus === 'none') {
+      let stashRecoveryFailed = false;
+      if (didStash) {
+        const stashPopped = await tryPopStash(worktreePath);
+        stashRecoveryFailed = !stashPopped;
+      }
+      return {
+        success: false,
+        error: `Branch '${branchName}' has no upstream branch on remote '${targetRemote}'. Push it first or set upstream with: git branch --set-upstream-to=${targetRemote}/${branchName}${stashRecoveryFailed ? ' Local changes remain stashed and need manual recovery (run: git stash pop).' : ''}`,
+        stashRecoveryFailed: stashRecoveryFailed ? stashRecoveryFailed : undefined,
+      };
+    }
+  }
+
+  // 8. Pull latest changes
+  // When a specific remote branch is requested, always use explicit remote + branch args.
+  // When the branch has a configured upstream tracking ref, let Git use it automatically.
+  // When only the remote branch exists (no tracking ref), explicitly specify remote and branch.
+  const pullArgs = targetRemoteBranch
+    ? ['pull', targetRemote, targetRemoteBranch]
+    : upstreamStatus === 'tracking'
+      ? ['pull']
+      : ['pull', targetRemote, branchName];
+  let pullConflict = false;
+  let pullConflictFiles: string[] = [];
+
+  // Declare merge detection variables before the try block so they are accessible
+  // in the stash reapplication path even when didStash is true.
+  let isMerge = false;
+  let isFastForward = false;
+  let mergeAffectedFiles: string[] = [];
+
+  try {
+    const pullOutput = await execGitCommand(pullArgs, worktreePath);
+
+    const alreadyUpToDate = pullOutput.includes('Already up to date');
+    // Detect fast-forward from git pull output
+    isFastForward = pullOutput.includes('Fast-forward') || pullOutput.includes('fast-forward');
+    // Detect merge by checking whether the new HEAD has two parents (more reliable
+    // than string-matching localised pull output which may not contain 'Merge').
+    isMerge = !alreadyUpToDate && !isFastForward ? await isMergeCommit(worktreePath) : false;
+
+    // If it was a real merge (not fast-forward), get the affected files
+    if (isMerge) {
+      try {
+        // Get files changed in the merge commit
+        const diffOutput = await execGitCommand(
+          ['diff', '--name-only', 'HEAD~1', 'HEAD'],
+          worktreePath
+        );
+        mergeAffectedFiles = diffOutput
+          .trim()
+          .split('\n')
+          .filter((f: string) => f.trim().length > 0);
+      } catch {
+        // Ignore errors - this is best-effort
+      }
+    }
+
+    // If no stash to reapply, return success
+    if (!didStash) {
+      return {
+        success: true,
+        branch: branchName,
+        pulled: !alreadyUpToDate,
+        hasLocalChanges: false,
+        stashed: false,
+        stashRestored: false,
+        message: alreadyUpToDate ? 'Already up to date' : 'Pulled latest changes',
+        ...(isMerge ? { isMerge: true, mergeAffectedFiles } : {}),
+        ...(isFastForward ? { isFastForward: true } : {}),
+      };
+    }
+  } catch (pullError: unknown) {
+    const err = pullError as { stderr?: string; stdout?: string; message?: string };
+    const errorOutput = `${err.stderr || ''} ${err.stdout || ''} ${err.message || ''}`;
+
+    if (isConflictError(errorOutput)) {
+      pullConflict = true;
+      try {
+        pullConflictFiles = await getConflictFiles(worktreePath);
+      } catch {
+        pullConflictFiles = [];
+      }
+    } else {
+      // Non-conflict pull error
+      let stashRecoveryFailed = false;
+      if (didStash) {
+        const stashPopped = await tryPopStash(worktreePath);
+        stashRecoveryFailed = !stashPopped;
+      }
+
+      // Check for common errors
+      const errorMsg = err.stderr || err.message || 'Pull failed';
+      if (errorMsg.includes('no tracking information')) {
+        return {
+          success: false,
+          error: `Branch '${branchName}' has no upstream branch. Push it first or set upstream with: git branch --set-upstream-to=${targetRemote}/${branchName}${stashRecoveryFailed ? ' Local changes remain stashed and need manual recovery (run: git stash pop).' : ''}`,
+          stashRecoveryFailed: stashRecoveryFailed ? stashRecoveryFailed : undefined,
+        };
+      }
+
+      return {
+        success: false,
+        error: `${errorMsg}${stashRecoveryFailed ? ' Local changes remain stashed and need manual recovery (run: git stash pop).' : ''}`,
+        stashRecoveryFailed: stashRecoveryFailed ? stashRecoveryFailed : undefined,
+      };
+    }
+  }
+
+  // 9. If pull had conflicts, return conflict info (don't try stash pop)
+  if (pullConflict) {
+    return {
+      success: false,
+      branch: branchName,
+      pulled: true,
+      hasConflicts: true,
+      conflictSource: 'pull',
+      conflictFiles: pullConflictFiles,
+      stashed: didStash,
+      stashRestored: false,
+      message:
+        `Pull resulted in merge conflicts. ${didStash ? 'Your local changes are still stashed.' : ''}`.trim(),
+    };
+  }
+
+  // 10. Pull succeeded, now try to reapply stash
+  if (didStash) {
+    return await reapplyStash(worktreePath, branchName, {
+      isMerge,
+      isFastForward,
+      mergeAffectedFiles,
+    });
+  }
+
+  // Shouldn't reach here, but return a safe default
+  return {
+    success: true,
+    branch: branchName,
+    pulled: true,
+    message: 'Pulled latest changes',
+  };
+}
+
+/**
+ * Attempt to reapply stashed changes after a successful pull.
+ * Handles both clean reapplication and conflict scenarios.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @param branchName - Current branch name
+ * @param mergeInfo - Merge/fast-forward detection info from the pull step
+ * @returns PullResult reflecting stash reapplication status
+ */
+async function reapplyStash(
+  worktreePath: string,
+  branchName: string,
+  mergeInfo: { isMerge: boolean; isFastForward: boolean; mergeAffectedFiles: string[] }
+): Promise<PullResult> {
+  const mergeFields: Partial<PullResult> = {
+    ...(mergeInfo.isMerge
+      ? { isMerge: true, mergeAffectedFiles: mergeInfo.mergeAffectedFiles }
+      : {}),
+    ...(mergeInfo.isFastForward ? { isFastForward: true } : {}),
+  };
+
+  try {
+    await popStash(worktreePath);
+
+    // Stash pop succeeded cleanly (popStash throws on non-zero exit)
+    return {
+      success: true,
+      branch: branchName,
+      pulled: true,
+      hasConflicts: false,
+      stashed: true,
+      stashRestored: true,
+      ...mergeFields,
+      message: 'Pulled latest changes and restored your stashed changes.',
+    };
+  } catch (stashPopError: unknown) {
+    const err = stashPopError as { stderr?: string; stdout?: string; message?: string };
+    const errorOutput = `${err.stderr || ''} ${err.stdout || ''} ${err.message || ''}`;
+
+    // Check if stash pop failed due to conflicts
+    // The stash remains in the stash list when conflicts occur, so stashRestored is false
+    if (isStashConflict(errorOutput)) {
+      let stashConflictFiles: string[] = [];
+      try {
+        stashConflictFiles = await getConflictFiles(worktreePath);
+      } catch {
+        stashConflictFiles = [];
+      }
+
+      return {
+        success: true,
+        branch: branchName,
+        pulled: true,
+        hasConflicts: true,
+        conflictSource: 'stash',
+        conflictFiles: stashConflictFiles,
+        stashed: true,
+        stashRestored: false,
+        ...mergeFields,
+        message: 'Pull succeeded but reapplying your stashed changes resulted in merge conflicts.',
+      };
+    }
+
+    // Non-conflict stash pop error - stash is still in the stash list
+    logger.warn('Failed to reapply stash after pull', { worktreePath, error: errorOutput });
+
+    return {
+      success: true,
+      branch: branchName,
+      pulled: true,
+      hasConflicts: false,
+      stashed: true,
+      stashRestored: false,
+      ...mergeFields,
+      message:
+        'Pull succeeded but failed to reapply stashed changes. Your changes are still in the stash list.',
+    };
+  }
+}
diff --git a/temp_repo/apps/server/src/services/push-service.ts b/temp_repo/apps/server/src/services/push-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f1619f5b3509edc162a29dc532b88167cd450bc5
--- /dev/null
+++ b/temp_repo/apps/server/src/services/push-service.ts
@@ -0,0 +1,258 @@
+/**
+ * PushService - Push git operations without HTTP
+ *
+ * Encapsulates the full git push workflow including:
+ * - Branch name and detached HEAD detection
+ * - Safe array-based command execution (no shell interpolation)
+ * - Divergent branch detection and auto-resolution via pull-then-retry
+ * - Structured result reporting
+ *
+ * Mirrors the pull-service.ts pattern for consistency.
+ */
+
+import { createLogger, getErrorMessage } from '@automaker/utils';
+import { execGitCommand } from '@automaker/git-utils';
+import { getCurrentBranch } from '../lib/git.js';
+import { performPull } from './pull-service.js';
+
+const logger = createLogger('PushService');
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface PushOptions {
+  /** Remote name to push to (defaults to 'origin') */
+  remote?: string;
+  /** Force push */
+  force?: boolean;
+  /** When true and push is rejected due to divergence, pull then retry push */
+  autoResolve?: boolean;
+}
+
+export interface PushResult {
+  success: boolean;
+  error?: string;
+  branch?: string;
+  pushed?: boolean;
+  /** Whether the push was initially rejected because the branches diverged */
+  diverged?: boolean;
+  /** Whether divergence was automatically resolved via pull-then-retry */
+  autoResolved?: boolean;
+  /** Whether the auto-resolve pull resulted in merge conflicts */
+  hasConflicts?: boolean;
+  /** Files with merge conflicts (only when hasConflicts is true) */
+  conflictFiles?: string[];
+  message?: string;
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+/**
+ * Detect whether push error output indicates a diverged/non-fast-forward rejection.
+ */
+function isDivergenceError(errorOutput: string): boolean {
+  const lower = errorOutput.toLowerCase();
+  // Require specific divergence indicators rather than just 'rejected' alone,
+  // which could match pre-receive hook rejections or protected branch errors.
+  const hasNonFastForward = lower.includes('non-fast-forward');
+  const hasFetchFirst = lower.includes('fetch first');
+  const hasFailedToPush = lower.includes('failed to push some refs');
+  const hasRejected = lower.includes('rejected');
+  return hasNonFastForward || hasFetchFirst || (hasRejected && hasFailedToPush);
+}
+
+// ============================================================================
+// Main Service Function
+// ============================================================================
+
+/**
+ * Perform a git push on the given worktree.
+ *
+ * The workflow:
+ * 1. Get current branch name (detect detached HEAD)
+ * 2. Attempt `git push <remote> <branch>` with safe array args
+ * 3. If push fails with divergence and autoResolve is true:
+ *    a. Pull from the same remote (with stash support)
+ *    b. If pull succeeds without conflicts, retry push
+ * 4. If push fails with "no upstream" error, retry with --set-upstream
+ * 5. Return structured result
+ *
+ * @param worktreePath - Path to the git worktree
+ * @param options - Push options (remote, force, autoResolve)
+ * @returns PushResult with detailed status information
+ */
+export async function performPush(
+  worktreePath: string,
+  options?: PushOptions
+): Promise<PushResult> {
+  const targetRemote = options?.remote || 'origin';
+  const force = options?.force ?? false;
+  const autoResolve = options?.autoResolve ?? false;
+
+  // 1. Get current branch name
+  let branchName: string;
+  try {
+    branchName = await getCurrentBranch(worktreePath);
+  } catch (err) {
+    return {
+      success: false,
+      error: `Failed to get current branch: ${getErrorMessage(err)}`,
+    };
+  }
+
+  // 2. Check for detached HEAD state
+  if (branchName === 'HEAD') {
+    return {
+      success: false,
+      error: 'Cannot push in detached HEAD state. Please checkout a branch first.',
+    };
+  }
+
+  // 3. Build push args (no -u flag; upstream is set in the fallback path only when needed)
+  const pushArgs = ['push', targetRemote, branchName];
+  if (force) {
+    pushArgs.push('--force');
+  }
+
+  // 4. Attempt push
+  try {
+    await execGitCommand(pushArgs, worktreePath);
+
+    return {
+      success: true,
+      branch: branchName,
+      pushed: true,
+      message: `Successfully pushed ${branchName} to ${targetRemote}`,
+    };
+  } catch (pushError: unknown) {
+    const err = pushError as { stderr?: string; stdout?: string; message?: string };
+    const errorOutput = `${err.stderr || ''} ${err.stdout || ''} ${err.message || ''}`;
+
+    // 5. Check if the error is a divergence rejection
+    if (isDivergenceError(errorOutput)) {
+      if (!autoResolve) {
+        return {
+          success: false,
+          branch: branchName,
+          pushed: false,
+          diverged: true,
+          error: `Push rejected: remote has changes not present locally. Use sync or pull first, or enable auto-resolve.`,
+          message: `Push to ${targetRemote} was rejected because the remote branch has diverged.`,
+        };
+      }
+
+      // 6. Auto-resolve: pull then retry push
+      logger.info('Push rejected due to divergence, attempting auto-resolve via pull', {
+        worktreePath,
+        remote: targetRemote,
+        branch: branchName,
+      });
+
+      try {
+        const pullResult = await performPull(worktreePath, {
+          remote: targetRemote,
+          stashIfNeeded: true,
+        });
+
+        if (!pullResult.success) {
+          return {
+            success: false,
+            branch: branchName,
+            pushed: false,
+            diverged: true,
+            autoResolved: false,
+            error: `Auto-resolve failed during pull: ${pullResult.error}`,
+          };
+        }
+
+        if (pullResult.hasConflicts) {
+          return {
+            success: false,
+            branch: branchName,
+            pushed: false,
+            diverged: true,
+            autoResolved: false,
+            hasConflicts: true,
+            conflictFiles: pullResult.conflictFiles,
+            error:
+              'Auto-resolve pull resulted in merge conflicts. Resolve conflicts and push again.',
+          };
+        }
+
+        // 7. Retry push after successful pull
+        try {
+          await execGitCommand(pushArgs, worktreePath);
+
+          return {
+            success: true,
+            branch: branchName,
+            pushed: true,
+            diverged: true,
+            autoResolved: true,
+            message: `Push succeeded after auto-resolving divergence (pulled from ${targetRemote} first).`,
+          };
+        } catch (retryError: unknown) {
+          const retryErr = retryError as { stderr?: string; message?: string };
+          return {
+            success: false,
+            branch: branchName,
+            pushed: false,
+            diverged: true,
+            autoResolved: false,
+            error: `Push failed after auto-resolve pull: ${retryErr.stderr || retryErr.message || 'Unknown error'}`,
+          };
+        }
+      } catch (pullError) {
+        return {
+          success: false,
+          branch: branchName,
+          pushed: false,
+          diverged: true,
+          autoResolved: false,
+          error: `Auto-resolve pull failed: ${getErrorMessage(pullError)}`,
+        };
+      }
+    }
+
+    // 6b. Non-divergence error (e.g. no upstream configured) - retry with --set-upstream
+    const isNoUpstreamError =
+      errorOutput.toLowerCase().includes('no upstream') ||
+      errorOutput.toLowerCase().includes('has no upstream branch') ||
+      errorOutput.toLowerCase().includes('set-upstream');
+    if (isNoUpstreamError) {
+      try {
+        const setUpstreamArgs = ['push', '--set-upstream', targetRemote, branchName];
+        if (force) {
+          setUpstreamArgs.push('--force');
+        }
+        await execGitCommand(setUpstreamArgs, worktreePath);
+
+        return {
+          success: true,
+          branch: branchName,
+          pushed: true,
+          message: `Successfully pushed ${branchName} to ${targetRemote} (set upstream)`,
+        };
+      } catch (upstreamError: unknown) {
+        const upstreamErr = upstreamError as { stderr?: string; message?: string };
+        return {
+          success: false,
+          branch: branchName,
+          pushed: false,
+          error: upstreamErr.stderr || upstreamErr.message || getErrorMessage(pushError),
+        };
+      }
+    }
+
+    // 6c. Other push error - return as-is
+    return {
+      success: false,
+      branch: branchName,
+      pushed: false,
+      error: err.stderr || err.message || getErrorMessage(pushError),
+    };
+  }
+}
diff --git a/temp_repo/apps/server/src/services/rebase-service.ts b/temp_repo/apps/server/src/services/rebase-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..758a667b5d4eb7a75fb2df3d43449f5b7d34384d
--- /dev/null
+++ b/temp_repo/apps/server/src/services/rebase-service.ts
@@ -0,0 +1,260 @@
+/**
+ * RebaseService - Rebase git operations without HTTP
+ *
+ * Handles git rebase operations with conflict detection and reporting.
+ * Follows the same pattern as merge-service.ts and cherry-pick-service.ts.
+ */
+
+import fs from 'fs/promises';
+import path from 'path';
+import { createLogger, getErrorMessage, isValidRemoteName } from '@automaker/utils';
+import { execGitCommand, getCurrentBranch, getConflictFiles } from '@automaker/git-utils';
+
+const logger = createLogger('RebaseService');
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface RebaseOptions {
+  /** Remote name to fetch from before rebasing (defaults to 'origin') */
+  remote?: string;
+}
+
+export interface RebaseResult {
+  success: boolean;
+  error?: string;
+  hasConflicts?: boolean;
+  conflictFiles?: string[];
+  aborted?: boolean;
+  branch?: string;
+  ontoBranch?: string;
+  message?: string;
+}
+
+// ============================================================================
+// Service Functions
+// ============================================================================
+
+/**
+ * Run a git rebase operation on the given worktree.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @param ontoBranch - The branch to rebase onto (e.g., 'origin/main')
+ * @param options - Optional rebase options (remote name for fetch)
+ * @returns RebaseResult with success/failure information
+ */
+export async function runRebase(
+  worktreePath: string,
+  ontoBranch: string,
+  options?: RebaseOptions
+): Promise<RebaseResult> {
+  // Reject empty, whitespace-only, or dash-prefixed branch names.
+  const normalizedOntoBranch = ontoBranch?.trim() ?? '';
+  if (normalizedOntoBranch === '' || normalizedOntoBranch.startsWith('-')) {
+    return {
+      success: false,
+      error: `Invalid branch name: "${ontoBranch}" must not be empty or start with a dash.`,
+    };
+  }
+
+  // Get current branch name before rebase
+  let currentBranch: string;
+  try {
+    currentBranch = await getCurrentBranch(worktreePath);
+  } catch (branchErr) {
+    return {
+      success: false,
+      error: `Failed to resolve current branch for worktree "${worktreePath}": ${getErrorMessage(branchErr)}`,
+    };
+  }
+
+  // Validate the remote name to prevent git option injection.
+  // Reject invalid remote names so the caller knows their input was wrong,
+  // consistent with how invalid branch names are handled above.
+  const remote = options?.remote || 'origin';
+  if (!isValidRemoteName(remote)) {
+    logger.warn('Invalid remote name supplied to rebase-service', {
+      remote,
+      worktreePath,
+    });
+    return {
+      success: false,
+      error: `Invalid remote name: "${remote}"`,
+    };
+  }
+
+  // Fetch latest from remote before rebasing to ensure we have up-to-date refs
+  try {
+    await execGitCommand(['fetch', remote], worktreePath);
+  } catch (fetchError) {
+    logger.warn('Failed to fetch from remote before rebase; proceeding with local refs', {
+      remote,
+      worktreePath,
+      error: getErrorMessage(fetchError),
+    });
+    // Non-fatal: proceed with local refs if fetch fails (e.g. offline)
+  }
+
+  try {
+    // Pass ontoBranch after '--' so git treats it as a ref, not an option.
+    // Set LC_ALL=C so git always emits English output regardless of the system
+    // locale, making text-based conflict detection reliable.
+    await execGitCommand(['rebase', '--', normalizedOntoBranch], worktreePath, { LC_ALL: 'C' });
+
+    return {
+      success: true,
+      branch: currentBranch,
+      ontoBranch: normalizedOntoBranch,
+      message: `Successfully rebased ${currentBranch} onto ${normalizedOntoBranch}`,
+    };
+  } catch (rebaseError: unknown) {
+    // Check if this is a rebase conflict.  We use a multi-layer strategy so
+    // that detection is reliable even when locale settings vary or git's text
+    // output changes across versions:
+    //
+    //  1. Primary (text-based): scan the error output for well-known English
+    //     conflict markers.  Because we pass LC_ALL=C above these strings are
+    //     always in English, but we keep the check as one layer among several.
+    //
+    //  2. Repository-state check: run `git rev-parse --git-dir` to find the
+    //     actual .git directory, then verify whether the in-progress rebase
+    //     state directories (.git/rebase-merge or .git/rebase-apply) exist.
+    //     These are created by git at the start of a rebase and are the most
+    //     reliable indicator that a rebase is still in progress (i.e. stopped
+    //     due to conflicts).
+    //
+    //  3. Unmerged-path check: run `git status --porcelain` (machine-readable,
+    //     locale-independent) and look for lines whose first two characters
+    //     indicate an unmerged state (UU, AA, DD, AU, UA, DU, UD).
+    //
+    // hasConflicts is true when ANY of the three layers returns positive.
+    const err = rebaseError as { stdout?: string; stderr?: string; message?: string };
+    const output = `${err.stdout || ''} ${err.stderr || ''} ${err.message || ''}`;
+
+    // Layer 1 – text matching (locale-safe because we set LC_ALL=C above).
+    const textIndicatesConflict =
+      output.includes('CONFLICT') ||
+      output.includes('could not apply') ||
+      output.includes('Resolve all conflicts') ||
+      output.includes('fix conflicts');
+
+    // Layers 2 & 3 – repository state inspection (locale-independent).
+    let rebaseStateExists = false;
+    let hasUnmergedPaths = false;
+    try {
+      // Find the canonical .git directory for this worktree.
+      const gitDir = (await execGitCommand(['rev-parse', '--git-dir'], worktreePath)).trim();
+      // git rev-parse --git-dir returns a path relative to cwd when the repo is
+      // a worktree, so we resolve it against worktreePath.
+      const resolvedGitDir = path.resolve(worktreePath, gitDir);
+
+      // Layer 2: check for rebase state directories.
+      const rebaseMergeDir = path.join(resolvedGitDir, 'rebase-merge');
+      const rebaseApplyDir = path.join(resolvedGitDir, 'rebase-apply');
+      const [rebaseMergeExists, rebaseApplyExists] = await Promise.all([
+        fs
+          .access(rebaseMergeDir)
+          .then(() => true)
+          .catch(() => false),
+        fs
+          .access(rebaseApplyDir)
+          .then(() => true)
+          .catch(() => false),
+      ]);
+      rebaseStateExists = rebaseMergeExists || rebaseApplyExists;
+    } catch {
+      // If rev-parse fails the repo may be in an unexpected state; fall back to
+      // text-based detection only.
+    }
+
+    try {
+      // Layer 3: check for unmerged paths via machine-readable git status.
+      const statusOutput = await execGitCommand(['status', '--porcelain'], worktreePath, {
+        LC_ALL: 'C',
+      });
+      // Unmerged status codes occupy the first two characters of each line.
+      // Standard unmerged codes: UU, AA, DD, AU, UA, DU, UD.
+      hasUnmergedPaths = statusOutput
+        .split('\n')
+        .some((line) => /^(UU|AA|DD|AU|UA|DU|UD)/.test(line));
+    } catch {
+      // git status failing is itself a sign something is wrong; leave
+      // hasUnmergedPaths as false and rely on the other layers.
+    }
+
+    const hasConflicts = textIndicatesConflict || rebaseStateExists || hasUnmergedPaths;
+
+    if (hasConflicts) {
+      // Attempt to fetch the list of conflicted files.  We wrap this in its
+      // own try/catch so that a failure here does NOT prevent abortRebase from
+      // running – keeping the repository in a clean state is the priority.
+      let conflictFiles: string[] | undefined;
+      let conflictFilesError: unknown;
+      try {
+        conflictFiles = await getConflictFiles(worktreePath);
+      } catch (getConflictFilesError: unknown) {
+        conflictFilesError = getConflictFilesError;
+        logger.warn('Failed to retrieve conflict files after rebase conflict', {
+          worktreePath,
+          error: getErrorMessage(getConflictFilesError),
+        });
+      }
+
+      // Abort the rebase to leave the repo in a clean state.  This must
+      // always run regardless of whether getConflictFiles succeeded.
+      const aborted = await abortRebase(worktreePath);
+
+      if (!aborted) {
+        logger.error('Failed to abort rebase after conflict; repository may be in a dirty state', {
+          worktreePath,
+        });
+      }
+
+      // Re-throw a composed error so callers retain both the original rebase
+      // failure context and any conflict-file lookup failure.
+      if (conflictFilesError !== undefined) {
+        const composedMessage = [
+          `Rebase of "${currentBranch}" onto "${normalizedOntoBranch}" failed due to conflicts.`,
+          `Original rebase error: ${getErrorMessage(rebaseError)}`,
+          `Additionally, fetching conflict files failed: ${getErrorMessage(conflictFilesError)}`,
+          aborted
+            ? 'The rebase was aborted; no changes were applied.'
+            : 'The rebase abort also failed; repository may be in a dirty state.',
+        ].join(' ');
+        throw new Error(composedMessage);
+      }
+
+      return {
+        success: false,
+        error: aborted
+          ? `Rebase of "${currentBranch}" onto "${normalizedOntoBranch}" aborted due to conflicts; no changes were applied.`
+          : `Rebase of "${currentBranch}" onto "${normalizedOntoBranch}" failed due to conflicts and the abort also failed; repository may be in a dirty state.`,
+        hasConflicts: true,
+        conflictFiles,
+        aborted,
+        branch: currentBranch,
+        ontoBranch: normalizedOntoBranch,
+      };
+    }
+
+    // Non-conflict error - propagate
+    throw rebaseError;
+  }
+}
+
+/**
+ * Abort an in-progress rebase operation.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @returns true if abort succeeded, false if it failed (logged as warning)
+ */
+export async function abortRebase(worktreePath: string): Promise<boolean> {
+  try {
+    await execGitCommand(['rebase', '--abort'], worktreePath);
+    return true;
+  } catch (err) {
+    logger.warn('Failed to abort rebase after conflict', err instanceof Error ? err.message : err);
+    return false;
+  }
+}
diff --git a/temp_repo/apps/server/src/services/recovery-service.ts b/temp_repo/apps/server/src/services/recovery-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d08f5a8e5e9fab7d666b1e2d7ad641af5a0bef41
--- /dev/null
+++ b/temp_repo/apps/server/src/services/recovery-service.ts
@@ -0,0 +1,333 @@
+/**
+ * RecoveryService - Crash recovery and feature resumption
+ */
+
+import path from 'path';
+import type { Feature, FeatureStatusWithPipeline } from '@automaker/types';
+import { DEFAULT_MAX_CONCURRENCY } from '@automaker/types';
+import {
+  createLogger,
+  readJsonWithRecovery,
+  logRecoveryWarning,
+  DEFAULT_BACKUP_COUNT,
+} from '@automaker/utils';
+import {
+  getFeatureDir,
+  getFeaturesDir,
+  getExecutionStatePath,
+  ensureAutomakerDir,
+} from '@automaker/platform';
+import * as secureFs from '../lib/secure-fs.js';
+import { getPromptCustomization } from '../lib/settings-helpers.js';
+import type { TypedEventBus } from './typed-event-bus.js';
+import type { ConcurrencyManager, RunningFeature } from './concurrency-manager.js';
+import type { SettingsService } from './settings-service.js';
+import type { PipelineStatusInfo } from './pipeline-orchestrator.js';
+
+const logger = createLogger('RecoveryService');
+
+export interface ExecutionState {
+  version: 1;
+  autoLoopWasRunning: boolean;
+  maxConcurrency: number;
+  projectPath: string;
+  branchName: string | null;
+  runningFeatureIds: string[];
+  savedAt: string;
+}
+
+export const DEFAULT_EXECUTION_STATE: ExecutionState = {
+  version: 1,
+  autoLoopWasRunning: false,
+  maxConcurrency: DEFAULT_MAX_CONCURRENCY,
+  projectPath: '',
+  branchName: null,
+  runningFeatureIds: [],
+  savedAt: '',
+};
+
+export type ExecuteFeatureFn = (
+  projectPath: string,
+  featureId: string,
+  useWorktrees: boolean,
+  isAutoMode: boolean,
+  providedWorktreePath?: string,
+  options?: { continuationPrompt?: string; _calledInternally?: boolean }
+) => Promise<void>;
+export type LoadFeatureFn = (projectPath: string, featureId: string) => Promise<Feature | null>;
+export type DetectPipelineStatusFn = (
+  projectPath: string,
+  featureId: string,
+  status: FeatureStatusWithPipeline
+) => Promise<PipelineStatusInfo>;
+export type ResumePipelineFn = (
+  projectPath: string,
+  feature: Feature,
+  useWorktrees: boolean,
+  pipelineInfo: PipelineStatusInfo
+) => Promise<void>;
+export type IsFeatureRunningFn = (featureId: string) => boolean;
+export type AcquireRunningFeatureFn = (options: {
+  featureId: string;
+  projectPath: string;
+  isAutoMode: boolean;
+  allowReuse?: boolean;
+}) => RunningFeature;
+export type ReleaseRunningFeatureFn = (featureId: string) => void;
+
+export class RecoveryService {
+  constructor(
+    private eventBus: TypedEventBus,
+    private concurrencyManager: ConcurrencyManager,
+    private settingsService: SettingsService | null,
+    private executeFeatureFn: ExecuteFeatureFn,
+    private loadFeatureFn: LoadFeatureFn,
+    private detectPipelineStatusFn: DetectPipelineStatusFn,
+    private resumePipelineFn: ResumePipelineFn,
+    private isFeatureRunningFn: IsFeatureRunningFn,
+    private acquireRunningFeatureFn: AcquireRunningFeatureFn,
+    private releaseRunningFeatureFn: ReleaseRunningFeatureFn
+  ) {}
+
+  async saveExecutionStateForProject(
+    projectPath: string,
+    branchName: string | null,
+    maxConcurrency: number
+  ): Promise<void> {
+    try {
+      await ensureAutomakerDir(projectPath);
+      const runningFeatureIds = this.concurrencyManager
+        .getAllRunning()
+        .filter((f) => f.projectPath === projectPath)
+        .map((f) => f.featureId);
+      const state: ExecutionState = {
+        version: 1,
+        autoLoopWasRunning: true,
+        maxConcurrency,
+        projectPath,
+        branchName,
+        runningFeatureIds,
+        savedAt: new Date().toISOString(),
+      };
+      await secureFs.writeFile(
+        getExecutionStatePath(projectPath),
+        JSON.stringify(state, null, 2),
+        'utf-8'
+      );
+    } catch {
+      /* ignore */
+    }
+  }
+
+  async saveExecutionState(
+    projectPath: string,
+    autoLoopWasRunning = false,
+    maxConcurrency = DEFAULT_MAX_CONCURRENCY
+  ): Promise<void> {
+    try {
+      await ensureAutomakerDir(projectPath);
+      const state: ExecutionState = {
+        version: 1,
+        autoLoopWasRunning,
+        maxConcurrency,
+        projectPath,
+        branchName: null,
+        runningFeatureIds: this.concurrencyManager.getAllRunning().map((rf) => rf.featureId),
+        savedAt: new Date().toISOString(),
+      };
+      await secureFs.writeFile(
+        getExecutionStatePath(projectPath),
+        JSON.stringify(state, null, 2),
+        'utf-8'
+      );
+    } catch {
+      /* ignore */
+    }
+  }
+
+  async loadExecutionState(projectPath: string): Promise<ExecutionState> {
+    try {
+      const content = (await secureFs.readFile(
+        getExecutionStatePath(projectPath),
+        'utf-8'
+      )) as string;
+      return JSON.parse(content) as ExecutionState;
+    } catch {
+      return DEFAULT_EXECUTION_STATE;
+    }
+  }
+
+  async clearExecutionState(projectPath: string, _branchName: string | null = null): Promise<void> {
+    try {
+      await secureFs.unlink(getExecutionStatePath(projectPath));
+    } catch {
+      /* ignore */
+    }
+  }
+
+  async contextExists(projectPath: string, featureId: string): Promise<boolean> {
+    try {
+      await secureFs.access(path.join(getFeatureDir(projectPath, featureId), 'agent-output.md'));
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  private async executeFeatureWithContext(
+    projectPath: string,
+    featureId: string,
+    context: string,
+    useWorktrees: boolean
+  ): Promise<void> {
+    const feature = await this.loadFeatureFn(projectPath, featureId);
+    if (!feature) throw new Error(`Feature ${featureId} not found`);
+    const prompts = await getPromptCustomization(this.settingsService, '[RecoveryService]');
+    const featurePrompt = `## Feature Implementation Task\n\n**Feature ID:** ${feature.id}\n**Title:** ${feature.title || 'Untitled Feature'}\n**Description:** ${feature.description}\n`;
+    let prompt = prompts.taskExecution.resumeFeatureTemplate;
+    prompt = prompt
+      .replace(/\{\{featurePrompt\}\}/g, featurePrompt)
+      .replace(/\{\{previousContext\}\}/g, context);
+    return this.executeFeatureFn(projectPath, featureId, useWorktrees, false, undefined, {
+      continuationPrompt: prompt,
+      _calledInternally: true,
+    });
+  }
+
+  async resumeFeature(
+    projectPath: string,
+    featureId: string,
+    useWorktrees = false,
+    _calledInternally = false
+  ): Promise<void> {
+    if (!_calledInternally && this.isFeatureRunningFn(featureId)) return;
+    this.acquireRunningFeatureFn({
+      featureId,
+      projectPath,
+      isAutoMode: false,
+      allowReuse: _calledInternally,
+    });
+    try {
+      const feature = await this.loadFeatureFn(projectPath, featureId);
+      if (!feature) throw new Error(`Feature ${featureId} not found`);
+      const pipelineInfo = await this.detectPipelineStatusFn(
+        projectPath,
+        featureId,
+        (feature.status || '') as FeatureStatusWithPipeline
+      );
+      if (pipelineInfo.isPipeline)
+        return await this.resumePipelineFn(projectPath, feature, useWorktrees, pipelineInfo);
+      const hasContext = await this.contextExists(projectPath, featureId);
+      if (hasContext) {
+        const context = (await secureFs.readFile(
+          path.join(getFeatureDir(projectPath, featureId), 'agent-output.md'),
+          'utf-8'
+        )) as string;
+        this.eventBus.emitAutoModeEvent('auto_mode_feature_resuming', {
+          featureId,
+          featureName: feature.title,
+          projectPath,
+          hasContext: true,
+          message: `Resuming feature "${feature.title}" from saved context`,
+        });
+        return await this.executeFeatureWithContext(projectPath, featureId, context, useWorktrees);
+      }
+      this.eventBus.emitAutoModeEvent('auto_mode_feature_resuming', {
+        featureId,
+        featureName: feature.title,
+        projectPath,
+        hasContext: false,
+        message: `Starting fresh execution for interrupted feature "${feature.title}"`,
+      });
+      return await this.executeFeatureFn(projectPath, featureId, useWorktrees, false, undefined, {
+        _calledInternally: true,
+      });
+    } finally {
+      this.releaseRunningFeatureFn(featureId);
+    }
+  }
+
+  async resumeInterruptedFeatures(projectPath: string): Promise<void> {
+    const featuresDir = getFeaturesDir(projectPath);
+    try {
+      // Load execution state to find features that were running before restart.
+      // This is critical because reconcileAllFeatureStates() runs at server startup
+      // and resets in_progress/interrupted/pipeline_* features to ready/backlog
+      // BEFORE the UI connects and calls this method. Without checking execution state,
+      // we would find no features to resume since their statuses have already been reset.
+      const executionState = await this.loadExecutionState(projectPath);
+      const previouslyRunningIds = new Set(executionState.runningFeatureIds ?? []);
+
+      const entries = await secureFs.readdir(featuresDir, { withFileTypes: true });
+      const featuresWithContext: Feature[] = [];
+      const featuresWithoutContext: Feature[] = [];
+      for (const entry of entries) {
+        if (entry.isDirectory()) {
+          const result = await readJsonWithRecovery<Feature | null>(
+            path.join(featuresDir, entry.name, 'feature.json'),
+            null,
+            { maxBackups: DEFAULT_BACKUP_COUNT, autoRestore: true }
+          );
+          logRecoveryWarning(result, `Feature ${entry.name}`, logger);
+          const feature = result.data;
+          if (!feature) continue;
+
+          // Check if the feature should be resumed:
+          // 1. Features still in active states (in_progress, pipeline_*) - not yet reconciled
+          // 2. Features in interrupted state - explicitly marked for resume
+          // 3. Features that were previously running (from execution state) and are now
+          //    in ready/backlog due to reconciliation resetting their status
+          const isActiveState =
+            feature.status === 'in_progress' ||
+            feature.status === 'interrupted' ||
+            (feature.status && feature.status.startsWith('pipeline_'));
+          const wasReconciledFromRunning =
+            previouslyRunningIds.has(feature.id) &&
+            (feature.status === 'ready' || feature.status === 'backlog');
+
+          if (isActiveState || wasReconciledFromRunning) {
+            if (await this.contextExists(projectPath, feature.id)) {
+              featuresWithContext.push(feature);
+            } else {
+              featuresWithoutContext.push(feature);
+            }
+          }
+        }
+      }
+      const allInterruptedFeatures = [...featuresWithContext, ...featuresWithoutContext];
+      if (allInterruptedFeatures.length === 0) return;
+
+      logger.info(
+        `[resumeInterruptedFeatures] Found ${allInterruptedFeatures.length} feature(s) to resume ` +
+          `(${previouslyRunningIds.size} from execution state, statuses: ${allInterruptedFeatures.map((f) => `${f.id}=${f.status}`).join(', ')})`
+      );
+
+      this.eventBus.emitAutoModeEvent('auto_mode_resuming_features', {
+        message: `Resuming ${allInterruptedFeatures.length} interrupted feature(s)`,
+        projectPath,
+        featureIds: allInterruptedFeatures.map((f) => f.id),
+        features: allInterruptedFeatures.map((f) => ({
+          id: f.id,
+          title: f.title,
+          status: f.status,
+          branchName: f.branchName ?? null,
+          hasContext: featuresWithContext.some((fc) => fc.id === f.id),
+        })),
+      });
+      for (const feature of allInterruptedFeatures) {
+        try {
+          if (!this.isFeatureRunningFn(feature.id))
+            await this.resumeFeature(projectPath, feature.id, true);
+        } catch {
+          /* continue */
+        }
+      }
+
+      // Clear execution state after successful resume to prevent
+      // re-resuming the same features on subsequent calls
+      await this.clearExecutionState(projectPath);
+    } catch {
+      /* ignore */
+    }
+  }
+}
diff --git a/temp_repo/apps/server/src/services/settings-service.ts b/temp_repo/apps/server/src/services/settings-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5986b877acded14ed9c736f38888dbee9584956d
--- /dev/null
+++ b/temp_repo/apps/server/src/services/settings-service.ts
@@ -0,0 +1,1405 @@
+/**
+ * Settings Service - Handles reading/writing settings to JSON files
+ *
+ * Provides persistent storage for:
+ * - Global settings (DATA_DIR/settings.json)
+ * - Credentials (DATA_DIR/credentials.json)
+ * - Per-project settings ({projectPath}/.automaker/settings.json)
+ */
+
+import { createLogger, atomicWriteJson, DEFAULT_BACKUP_COUNT } from '@automaker/utils';
+import * as secureFs from '../lib/secure-fs.js';
+import os from 'os';
+import path from 'path';
+import fs from 'fs/promises';
+
+import {
+  getGlobalSettingsPath,
+  getCredentialsPath,
+  getProjectSettingsPath,
+  ensureDataDir,
+  ensureAutomakerDir,
+} from '@automaker/platform';
+import type {
+  GlobalSettings,
+  Credentials,
+  ProjectSettings,
+  KeyboardShortcuts,
+  ProjectRef,
+  TrashedProjectRef,
+  BoardBackgroundSettings,
+  WorktreeInfo,
+  PhaseModelConfig,
+  PhaseModelEntry,
+  FeatureTemplate,
+  ClaudeApiProfile,
+  ClaudeCompatibleProvider,
+  ProviderModel,
+} from '../types/settings.js';
+import {
+  DEFAULT_GLOBAL_SETTINGS,
+  DEFAULT_CREDENTIALS,
+  DEFAULT_PROJECT_SETTINGS,
+  DEFAULT_PHASE_MODELS,
+  DEFAULT_FEATURE_TEMPLATES,
+  SETTINGS_VERSION,
+  CREDENTIALS_VERSION,
+  PROJECT_SETTINGS_VERSION,
+} from '../types/settings.js';
+import {
+  DEFAULT_MAX_CONCURRENCY,
+  migrateModelId,
+  migrateCursorModelIds,
+  migrateOpencodeModelIds,
+} from '@automaker/types';
+
+const logger = createLogger('SettingsService');
+
+/**
+ * Wrapper for readJsonFile from utils that uses the local secureFs
+ * to maintain compatibility with the server's secure file system
+ */
+async function readJsonFile<T>(filePath: string, defaultValue: T): Promise<T> {
+  try {
+    const content = (await secureFs.readFile(filePath, 'utf-8')) as string;
+    return JSON.parse(content) as T;
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      return defaultValue;
+    }
+    logger.error(`Error reading ${filePath}:`, error);
+    return defaultValue;
+  }
+}
+
+/**
+ * Check if a file exists
+ */
+async function fileExists(filePath: string): Promise<boolean> {
+  try {
+    await secureFs.access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Write settings atomically with backup support
+ */
+async function writeSettingsJson(filePath: string, data: unknown): Promise<void> {
+  await atomicWriteJson(filePath, data, { backupCount: DEFAULT_BACKUP_COUNT });
+}
+
+/**
+ * SettingsService - Manages persistent storage of user settings and credentials
+ *
+ * Handles reading and writing settings to JSON files with atomic operations
+ * for reliability. Provides three levels of settings:
+ * - Global settings: shared preferences in {dataDir}/settings.json
+ * - Credentials: sensitive API keys in {dataDir}/credentials.json
+ * - Project settings: per-project overrides in {projectPath}/.automaker/settings.json
+ *
+ * All operations are atomic (write to temp file, then rename) to prevent corruption.
+ * Missing files are treated as empty and return defaults on read.
+ * Updates use deep merge for nested objects like keyboardShortcuts and apiKeys.
+ */
+export class SettingsService {
+  private dataDir: string;
+
+  /**
+   * Create a new SettingsService instance
+   *
+   * @param dataDir - Absolute path to global data directory (e.g., ~/.automaker)
+   */
+  constructor(dataDir: string) {
+    this.dataDir = dataDir;
+  }
+
+  // ============================================================================
+  // Global Settings
+  // ============================================================================
+
+  /**
+   * Get global settings with defaults applied for any missing fields
+   *
+   * Reads from {dataDir}/settings.json. If file doesn't exist, returns defaults.
+   * Missing fields are filled in from DEFAULT_GLOBAL_SETTINGS for forward/backward
+   * compatibility during schema migrations.
+   *
+   * Also applies version-based migrations for breaking changes.
+   *
+   * @returns Promise resolving to complete GlobalSettings object
+   */
+  async getGlobalSettings(): Promise<GlobalSettings> {
+    const settingsPath = getGlobalSettingsPath(this.dataDir);
+    const settings = await readJsonFile<GlobalSettings>(settingsPath, DEFAULT_GLOBAL_SETTINGS);
+
+    // Migrate legacy enhancementModel/validationModel to phaseModels
+    const migratedPhaseModels = this.migratePhaseModels(settings);
+
+    // Migrate model IDs to canonical format
+    const migratedModelSettings = this.migrateModelSettings(settings);
+
+    // Merge built-in feature templates: ensure all built-in templates exist in user settings.
+    // User customizations (enabled/disabled state, order overrides) are preserved.
+    // New built-in templates added in code updates are injected for existing users.
+    const mergedFeatureTemplates = this.mergeBuiltInTemplates(settings.featureTemplates);
+
+    // Apply any missing defaults (for backwards compatibility)
+    let result: GlobalSettings = {
+      ...DEFAULT_GLOBAL_SETTINGS,
+      ...settings,
+      ...migratedModelSettings,
+      keyboardShortcuts: {
+        ...DEFAULT_GLOBAL_SETTINGS.keyboardShortcuts,
+        ...settings.keyboardShortcuts,
+      },
+      phaseModels: migratedPhaseModels,
+      featureTemplates: mergedFeatureTemplates,
+    };
+
+    // Version-based migrations
+    const storedVersion = settings.version || 1;
+    let needsSave = false;
+
+    // Migration v2 -> v3: Convert string phase models to PhaseModelEntry objects
+    // Note: migratePhaseModels() handles the actual conversion for both v1 and v2 formats
+    if (storedVersion < 3) {
+      logger.info(
+        `Migrating settings from v${storedVersion} to v3: converting phase models to PhaseModelEntry format`
+      );
+      needsSave = true;
+    }
+
+    // Migration v3 -> v4: Add onboarding/setup wizard state fields
+    // Older settings files never stored setup state in settings.json (it lived in localStorage),
+    // so default to "setup complete" for existing installs to avoid forcing re-onboarding.
+    if (storedVersion < 4) {
+      if (settings.setupComplete === undefined) result.setupComplete = true;
+      if (settings.isFirstRun === undefined) result.isFirstRun = false;
+      if (settings.skipClaudeSetup === undefined) result.skipClaudeSetup = false;
+      needsSave = true;
+    }
+
+    // Migration v4 -> v5: Auto-create "Direct Anthropic" profile for existing users
+    // If user has an Anthropic API key in credentials but no profiles, create a
+    // "Direct Anthropic" profile that references the credentials and set it as active.
+    if (storedVersion < 5) {
+      try {
+        const credentials = await this.getCredentials();
+        const hasAnthropicKey = !!credentials.apiKeys?.anthropic;
+        const hasNoProfiles = !result.claudeApiProfiles || result.claudeApiProfiles.length === 0;
+        const hasNoActiveProfile = !result.activeClaudeApiProfileId;
+
+        if (hasAnthropicKey && hasNoProfiles && hasNoActiveProfile) {
+          const directAnthropicProfile = {
+            id: `profile-${Date.now()}-direct-anthropic`,
+            name: 'Direct Anthropic',
+            baseUrl: 'https://api.anthropic.com',
+            apiKeySource: 'credentials' as const,
+            useAuthToken: false,
+          };
+
+          result.claudeApiProfiles = [directAnthropicProfile];
+          result.activeClaudeApiProfileId = directAnthropicProfile.id;
+
+          logger.info(
+            'Migration v4->v5: Created "Direct Anthropic" profile using existing credentials'
+          );
+        }
+      } catch (error) {
+        logger.warn(
+          'Migration v4->v5: Could not check credentials for auto-profile creation:',
+          error
+        );
+      }
+      needsSave = true;
+    }
+
+    // Migration v5 -> v6: Convert claudeApiProfiles to claudeCompatibleProviders
+    // The new system uses a models[] array instead of modelMappings, and removes
+    // the "active profile" concept - models are selected directly in phase model configs.
+    if (storedVersion < 6) {
+      const legacyProfiles = settings.claudeApiProfiles || [];
+      if (
+        legacyProfiles.length > 0 &&
+        (!result.claudeCompatibleProviders || result.claudeCompatibleProviders.length === 0)
+      ) {
+        logger.info(
+          `Migration v5->v6: Converting ${legacyProfiles.length} Claude API profile(s) to compatible providers`
+        );
+        result.claudeCompatibleProviders = this.migrateProfilesToProviders(legacyProfiles);
+      }
+      // Remove the deprecated activeClaudeApiProfileId field
+      if (result.activeClaudeApiProfileId) {
+        logger.info('Migration v5->v6: Removing deprecated activeClaudeApiProfileId');
+        delete result.activeClaudeApiProfileId;
+      }
+      needsSave = true;
+    }
+
+    // Update version if any migration occurred
+    if (needsSave) {
+      result.version = SETTINGS_VERSION;
+    }
+
+    // Save migrated settings if needed
+    if (needsSave) {
+      try {
+        await ensureDataDir(this.dataDir);
+        await writeSettingsJson(settingsPath, result);
+        logger.info('Settings migration complete');
+      } catch (error) {
+        logger.error('Failed to save migrated settings:', error);
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Merge built-in feature templates with user's stored templates.
+   *
+   * Ensures new built-in templates added in code updates are available to existing users
+   * without overwriting their customizations (e.g., enabled/disabled state, custom order).
+   * Built-in templates missing from stored settings are appended with their defaults.
+   *
+   * @param storedTemplates - Templates from user's settings file (may be undefined for new installs)
+   * @returns Merged template list with all built-in templates present
+   */
+  private mergeBuiltInTemplates(storedTemplates: FeatureTemplate[] | undefined): FeatureTemplate[] {
+    if (!storedTemplates) {
+      return DEFAULT_FEATURE_TEMPLATES;
+    }
+
+    const storedIds = new Set(storedTemplates.map((t) => t.id));
+    const missingBuiltIns = DEFAULT_FEATURE_TEMPLATES.filter((t) => !storedIds.has(t.id));
+
+    if (missingBuiltIns.length === 0) {
+      return storedTemplates;
+    }
+
+    // Append missing built-in templates after existing ones
+    return [...storedTemplates, ...missingBuiltIns];
+  }
+
+  /**
+   * Migrate legacy enhancementModel/validationModel fields to phaseModels structure
+   *
+   * Handles backwards compatibility for settings created before phaseModels existed.
+   * Also handles migration from string phase models (v2) to PhaseModelEntry objects (v3).
+   * Legacy fields take precedence over defaults but phaseModels takes precedence over legacy.
+   *
+   * @param settings - Raw settings from file
+   * @returns Complete PhaseModelConfig with all fields populated
+   */
+  private migratePhaseModels(settings: Partial<GlobalSettings>): PhaseModelConfig {
+    // Start with defaults
+    const result: PhaseModelConfig = { ...DEFAULT_PHASE_MODELS };
+
+    // If phaseModels exists, use it (with defaults for any missing fields)
+    if (settings.phaseModels) {
+      // Merge with defaults and convert any string values to PhaseModelEntry
+      const merged: PhaseModelConfig = { ...DEFAULT_PHASE_MODELS };
+      for (const key of Object.keys(settings.phaseModels) as Array<keyof PhaseModelConfig>) {
+        const value = settings.phaseModels[key];
+        if (value !== undefined) {
+          // Convert string to PhaseModelEntry if needed (v2 -> v3 migration)
+          merged[key] = this.toPhaseModelEntry(value);
+        }
+      }
+      return merged;
+    }
+
+    // Migrate legacy fields if phaseModels doesn't exist
+    // These were the only two legacy fields that existed
+    if (settings.enhancementModel) {
+      result.enhancementModel = this.toPhaseModelEntry(settings.enhancementModel);
+      logger.debug(`Migrated legacy enhancementModel: ${settings.enhancementModel}`);
+    }
+    if (settings.validationModel) {
+      result.validationModel = this.toPhaseModelEntry(settings.validationModel);
+      logger.debug(`Migrated legacy validationModel: ${settings.validationModel}`);
+    }
+
+    return result;
+  }
+
+  /**
+   * Convert a phase model value to PhaseModelEntry format
+   *
+   * Handles migration from string format (v2) to object format (v3).
+   * Also migrates legacy model IDs to canonical prefixed format.
+   * - String values like 'sonnet' become { model: 'claude-sonnet' }
+   * - Object values have their model ID migrated if needed
+   *
+   * @param value - Phase model value (string or PhaseModelEntry)
+   * @returns PhaseModelEntry object with canonical model ID
+   */
+  private toPhaseModelEntry(value: string | PhaseModelEntry): PhaseModelEntry {
+    if (typeof value === 'string') {
+      // v2 format: just a model string - migrate to canonical ID
+      return { model: migrateModelId(value) as PhaseModelEntry['model'] };
+    }
+    // v3 format: PhaseModelEntry object - migrate model ID if needed
+    return {
+      ...value,
+      model: migrateModelId(value.model) as PhaseModelEntry['model'],
+    };
+  }
+
+  /**
+   * Migrate ClaudeApiProfiles to ClaudeCompatibleProviders
+   *
+   * Converts the legacy profile format (with modelMappings) to the new
+   * provider format (with models[] array). Each model mapping entry becomes
+   * a ProviderModel with appropriate tier assignment.
+   *
+   * @param profiles - Legacy ClaudeApiProfile array
+   * @returns Array of ClaudeCompatibleProvider
+   */
+  private migrateProfilesToProviders(profiles: ClaudeApiProfile[]): ClaudeCompatibleProvider[] {
+    return profiles.map((profile): ClaudeCompatibleProvider => {
+      // Convert modelMappings to models array
+      const models: ProviderModel[] = [];
+
+      if (profile.modelMappings) {
+        // Haiku mapping
+        if (profile.modelMappings.haiku) {
+          models.push({
+            id: profile.modelMappings.haiku,
+            displayName: this.inferModelDisplayName(profile.modelMappings.haiku, 'haiku'),
+            mapsToClaudeModel: 'haiku',
+          });
+        }
+        // Sonnet mapping
+        if (profile.modelMappings.sonnet) {
+          models.push({
+            id: profile.modelMappings.sonnet,
+            displayName: this.inferModelDisplayName(profile.modelMappings.sonnet, 'sonnet'),
+            mapsToClaudeModel: 'sonnet',
+          });
+        }
+        // Opus mapping
+        if (profile.modelMappings.opus) {
+          models.push({
+            id: profile.modelMappings.opus,
+            displayName: this.inferModelDisplayName(profile.modelMappings.opus, 'opus'),
+            mapsToClaudeModel: 'opus',
+          });
+        }
+      }
+
+      // Infer provider type from base URL or name
+      const providerType = this.inferProviderType(profile);
+
+      return {
+        id: profile.id,
+        name: profile.name,
+        providerType,
+        enabled: true,
+        baseUrl: profile.baseUrl,
+        apiKeySource: profile.apiKeySource ?? 'inline',
+        apiKey: profile.apiKey,
+        useAuthToken: profile.useAuthToken,
+        timeoutMs: profile.timeoutMs,
+        disableNonessentialTraffic: profile.disableNonessentialTraffic,
+        models,
+      };
+    });
+  }
+
+  /**
+   * Infer a display name for a model based on its ID and tier
+   *
+   * @param modelId - The raw model ID
+   * @param tier - The tier hint (haiku/sonnet/opus)
+   * @returns A user-friendly display name
+   */
+  private inferModelDisplayName(modelId: string, tier: 'haiku' | 'sonnet' | 'opus'): string {
+    // Common patterns in model IDs
+    const lowerModelId = modelId.toLowerCase();
+
+    // GLM models
+    if (lowerModelId.includes('glm')) {
+      return modelId.replace(/-/g, ' ').replace(/glm/i, 'GLM');
+    }
+
+    // MiniMax models
+    if (lowerModelId.includes('minimax')) {
+      return modelId.replace(/-/g, ' ').replace(/minimax/i, 'MiniMax');
+    }
+
+    // Claude models via OpenRouter or similar
+    if (lowerModelId.includes('claude')) {
+      return modelId;
+    }
+
+    // Default: use model ID as display name with tier in parentheses
+    return `${modelId} (${tier})`;
+  }
+
+  /**
+   * Infer provider type from profile configuration
+   *
+   * @param profile - The legacy profile
+   * @returns The inferred provider type
+   */
+  private inferProviderType(profile: ClaudeApiProfile): ClaudeCompatibleProvider['providerType'] {
+    const baseUrl = profile.baseUrl.toLowerCase();
+    const name = profile.name.toLowerCase();
+
+    // Check URL patterns
+    if (baseUrl.includes('z.ai') || baseUrl.includes('zhipuai')) {
+      return 'glm';
+    }
+    if (baseUrl.includes('minimax')) {
+      return 'minimax';
+    }
+    if (baseUrl.includes('openrouter')) {
+      return 'openrouter';
+    }
+    if (baseUrl.includes('anthropic.com')) {
+      return 'anthropic';
+    }
+
+    // Check name patterns
+    if (name.includes('glm') || name.includes('zhipu')) {
+      return 'glm';
+    }
+    if (name.includes('minimax')) {
+      return 'minimax';
+    }
+    if (name.includes('openrouter')) {
+      return 'openrouter';
+    }
+    if (name.includes('anthropic') || name.includes('direct')) {
+      return 'anthropic';
+    }
+
+    // Default to custom
+    return 'custom';
+  }
+
+  /**
+   * Migrate model-related settings to canonical format
+   *
+   * Migrates:
+   * - enabledCursorModels: legacy IDs to cursor- prefixed
+   * - enabledOpencodeModels: legacy slash format to dash format
+   * - cursorDefaultModel: legacy ID to cursor- prefixed
+   *
+   * @param settings - Settings to migrate
+   * @returns Settings with migrated model IDs
+   */
+  private migrateModelSettings(settings: Partial<GlobalSettings>): Partial<GlobalSettings> {
+    const migrated: Partial<GlobalSettings> = { ...settings };
+
+    // Migrate Cursor models
+    if (settings.enabledCursorModels) {
+      migrated.enabledCursorModels = migrateCursorModelIds(
+        settings.enabledCursorModels as string[]
+      );
+    }
+
+    // Migrate Cursor default model
+    if (settings.cursorDefaultModel) {
+      const migratedDefault = migrateCursorModelIds([settings.cursorDefaultModel as string]);
+      if (migratedDefault.length > 0) {
+        migrated.cursorDefaultModel = migratedDefault[0];
+      }
+    }
+
+    // Migrate OpenCode models
+    if (settings.enabledOpencodeModels) {
+      migrated.enabledOpencodeModels = migrateOpencodeModelIds(
+        settings.enabledOpencodeModels as string[]
+      );
+    }
+
+    // Migrate OpenCode default model
+    if (settings.opencodeDefaultModel) {
+      const migratedDefault = migrateOpencodeModelIds([settings.opencodeDefaultModel as string]);
+      if (migratedDefault.length > 0) {
+        migrated.opencodeDefaultModel = migratedDefault[0];
+      }
+    }
+
+    return migrated;
+  }
+
+  /**
+   * Update global settings with partial changes
+   *
+   * Performs a deep merge: nested objects like keyboardShortcuts are merged,
+   * not replaced. Updates are written atomically. Creates dataDir if needed.
+   *
+   * @param updates - Partial GlobalSettings to merge (only provided fields are updated)
+   * @returns Promise resolving to complete updated GlobalSettings
+   */
+  async updateGlobalSettings(updates: Partial<GlobalSettings>): Promise<GlobalSettings> {
+    await ensureDataDir(this.dataDir);
+    const settingsPath = getGlobalSettingsPath(this.dataDir);
+
+    const current = await this.getGlobalSettings();
+
+    // Guard against destructive "empty array/object" overwrites.
+    // During auth transitions, the UI can briefly have default/empty state and accidentally
+    // sync it, wiping persisted settings (especially `projects`).
+    const sanitizedUpdates: Partial<GlobalSettings> = { ...updates };
+    let attemptedProjectWipe = false;
+
+    const ignoreEmptyArrayOverwrite = <K extends keyof GlobalSettings>(key: K): void => {
+      const nextVal = sanitizedUpdates[key] as unknown;
+      const curVal = current[key] as unknown;
+      if (
+        Array.isArray(nextVal) &&
+        nextVal.length === 0 &&
+        Array.isArray(curVal) &&
+        curVal.length > 0
+      ) {
+        delete sanitizedUpdates[key];
+      }
+    };
+
+    const currentProjectsLen = Array.isArray(current.projects) ? current.projects.length : 0;
+    // Check if this is a legitimate project removal (moved to trash) vs accidental wipe
+    const newTrashedProjectsLen = Array.isArray(sanitizedUpdates.trashedProjects)
+      ? sanitizedUpdates.trashedProjects.length
+      : Array.isArray(current.trashedProjects)
+        ? current.trashedProjects.length
+        : 0;
+
+    if (
+      Array.isArray(sanitizedUpdates.projects) &&
+      sanitizedUpdates.projects.length === 0 &&
+      currentProjectsLen > 0
+    ) {
+      // Only treat as accidental wipe if trashedProjects is also empty
+      // (If projects are moved to trash, they appear in trashedProjects)
+      if (newTrashedProjectsLen === 0) {
+        logger.warn(
+          '[WIPE_PROTECTION] Attempted to set projects to empty array with no trash! Ignoring update.',
+          {
+            currentProjectsLen,
+            newProjectsLen: 0,
+            newTrashedProjectsLen,
+            currentProjects: current.projects?.map((p) => p.name),
+          }
+        );
+        attemptedProjectWipe = true;
+        delete sanitizedUpdates.projects;
+      } else {
+        logger.info('[LEGITIMATE_REMOVAL] Removing all projects to trash', {
+          currentProjectsLen,
+          newProjectsLen: 0,
+          movedToTrash: newTrashedProjectsLen,
+        });
+      }
+    }
+
+    ignoreEmptyArrayOverwrite('trashedProjects');
+    ignoreEmptyArrayOverwrite('projectHistory');
+    ignoreEmptyArrayOverwrite('recentFolders');
+    ignoreEmptyArrayOverwrite('mcpServers');
+    ignoreEmptyArrayOverwrite('enabledCursorModels');
+    ignoreEmptyArrayOverwrite('claudeApiProfiles');
+    // Note: claudeCompatibleProviders intentionally NOT guarded - users should be able to delete all providers
+
+    // Check for explicit permission to clear eventHooks (escape hatch for intentional clearing)
+    const allowEmptyEventHooks =
+      (sanitizedUpdates as Record<string, unknown>).__allowEmptyEventHooks === true;
+    // Remove the flag so it doesn't get persisted
+    delete (sanitizedUpdates as Record<string, unknown>).__allowEmptyEventHooks;
+
+    // Only guard eventHooks if explicit permission wasn't granted
+    if (!allowEmptyEventHooks) {
+      ignoreEmptyArrayOverwrite('eventHooks');
+    }
+
+    // Guard ntfyEndpoints against accidental wipe
+    // (similar to eventHooks, these are user-configured and shouldn't be lost)
+    // Check for explicit permission to clear ntfyEndpoints (escape hatch for intentional clearing)
+    const allowEmptyNtfyEndpoints =
+      (sanitizedUpdates as Record<string, unknown>).__allowEmptyNtfyEndpoints === true;
+    // Remove the flag so it doesn't get persisted
+    delete (sanitizedUpdates as Record<string, unknown>).__allowEmptyNtfyEndpoints;
+
+    if (!allowEmptyNtfyEndpoints) {
+      const currentNtfyLen = Array.isArray(current.ntfyEndpoints)
+        ? current.ntfyEndpoints.length
+        : 0;
+      const newNtfyLen = Array.isArray(sanitizedUpdates.ntfyEndpoints)
+        ? sanitizedUpdates.ntfyEndpoints.length
+        : currentNtfyLen;
+
+      if (Array.isArray(sanitizedUpdates.ntfyEndpoints) && newNtfyLen === 0 && currentNtfyLen > 0) {
+        logger.warn(
+          '[WIPE_PROTECTION] Attempted to set ntfyEndpoints to empty array! Ignoring update.',
+          {
+            currentNtfyLen,
+            newNtfyLen,
+          }
+        );
+        delete sanitizedUpdates.ntfyEndpoints;
+      }
+    } else {
+      logger.info('[INTENTIONAL_CLEAR] Clearing ntfyEndpoints via escape hatch');
+    }
+
+    // Empty object overwrite guard
+    const ignoreEmptyObjectOverwrite = <K extends keyof GlobalSettings>(key: K): void => {
+      const nextVal = sanitizedUpdates[key] as unknown;
+      const curVal = current[key] as unknown;
+      if (
+        nextVal &&
+        typeof nextVal === 'object' &&
+        !Array.isArray(nextVal) &&
+        Object.keys(nextVal).length === 0 &&
+        curVal &&
+        typeof curVal === 'object' &&
+        !Array.isArray(curVal) &&
+        Object.keys(curVal).length > 0
+      ) {
+        delete sanitizedUpdates[key];
+      }
+    };
+
+    ignoreEmptyObjectOverwrite('lastSelectedSessionByProject');
+    ignoreEmptyObjectOverwrite('autoModeByWorktree');
+
+    // If a request attempted to wipe projects, also ignore theme changes in that same request.
+    if (attemptedProjectWipe) {
+      delete sanitizedUpdates.theme;
+    }
+
+    const updated: GlobalSettings = {
+      ...current,
+      ...sanitizedUpdates,
+      version: SETTINGS_VERSION,
+    };
+
+    // Deep merge keyboard shortcuts if provided
+    if (sanitizedUpdates.keyboardShortcuts) {
+      updated.keyboardShortcuts = {
+        ...current.keyboardShortcuts,
+        ...sanitizedUpdates.keyboardShortcuts,
+      };
+    }
+
+    // Deep merge phaseModels if provided
+    if (sanitizedUpdates.phaseModels) {
+      updated.phaseModels = {
+        ...current.phaseModels,
+        ...sanitizedUpdates.phaseModels,
+      };
+    }
+
+    // Deep merge autoModeByWorktree if provided (preserves other worktree entries)
+    if (sanitizedUpdates.autoModeByWorktree) {
+      type WorktreeEntry = { maxConcurrency: number; branchName: string | null };
+      const mergedAutoModeByWorktree: Record<string, WorktreeEntry> = {
+        ...current.autoModeByWorktree,
+      };
+      for (const [key, value] of Object.entries(sanitizedUpdates.autoModeByWorktree)) {
+        mergedAutoModeByWorktree[key] = {
+          ...mergedAutoModeByWorktree[key],
+          ...value,
+        };
+      }
+      updated.autoModeByWorktree = mergedAutoModeByWorktree;
+    }
+
+    await writeSettingsJson(settingsPath, updated);
+    logger.info('Global settings updated');
+
+    return updated;
+  }
+
+  /**
+   * Check if global settings file exists
+   *
+   * Used to determine if user has previously configured settings.
+   *
+   * @returns Promise resolving to true if {dataDir}/settings.json exists
+   */
+  async hasGlobalSettings(): Promise<boolean> {
+    const settingsPath = getGlobalSettingsPath(this.dataDir);
+    return fileExists(settingsPath);
+  }
+
+  // ============================================================================
+  // Credentials
+  // ============================================================================
+
+  /**
+   * Get credentials with defaults applied
+   *
+   * Reads from {dataDir}/credentials.json. If file doesn't exist, returns
+   * defaults (empty API keys). Used primarily by backend for API authentication.
+   * UI should use getMaskedCredentials() instead.
+   *
+   * @returns Promise resolving to complete Credentials object
+   */
+  async getCredentials(): Promise<Credentials> {
+    const credentialsPath = getCredentialsPath(this.dataDir);
+    const credentials = await readJsonFile<Credentials>(credentialsPath, DEFAULT_CREDENTIALS);
+
+    return {
+      ...DEFAULT_CREDENTIALS,
+      ...credentials,
+      apiKeys: {
+        ...DEFAULT_CREDENTIALS.apiKeys,
+        ...credentials.apiKeys,
+      },
+    };
+  }
+
+  /**
+   * Update credentials with partial changes
+   *
+   * Updates individual API keys. Uses deep merge for apiKeys object.
+   * Creates dataDir if needed. Credentials are written atomically.
+   * WARNING: Use only in secure contexts - keys are unencrypted.
+   *
+   * @param updates - Partial Credentials (usually just apiKeys)
+   * @returns Promise resolving to complete updated Credentials object
+   */
+  async updateCredentials(updates: Partial<Credentials>): Promise<Credentials> {
+    await ensureDataDir(this.dataDir);
+    const credentialsPath = getCredentialsPath(this.dataDir);
+
+    const current = await this.getCredentials();
+    const updated: Credentials = {
+      ...current,
+      ...updates,
+      version: CREDENTIALS_VERSION,
+    };
+
+    // Deep merge api keys if provided
+    if (updates.apiKeys) {
+      updated.apiKeys = {
+        ...current.apiKeys,
+        ...updates.apiKeys,
+      };
+    }
+
+    await writeSettingsJson(credentialsPath, updated);
+    logger.info('Credentials updated');
+
+    return updated;
+  }
+
+  /**
+   * Get masked credentials safe for UI display
+   *
+   * Returns API keys masked for security (first 4 and last 4 chars visible).
+   * Use this for showing credential status in UI without exposing full keys.
+   * Each key includes a 'configured' boolean and masked string representation.
+   *
+   * @returns Promise resolving to masked credentials object with each provider's status
+   */
+  async getMaskedCredentials(): Promise<{
+    anthropic: { configured: boolean; masked: string };
+    google: { configured: boolean; masked: string };
+    openai: { configured: boolean; masked: string };
+    zai: { configured: boolean; masked: string };
+  }> {
+    const credentials = await this.getCredentials();
+
+    const maskKey = (key: string): string => {
+      if (!key || key.length < 8) return '';
+      return `${key.substring(0, 4)}...${key.substring(key.length - 4)}`;
+    };
+
+    return {
+      anthropic: {
+        configured: !!credentials.apiKeys.anthropic,
+        masked: maskKey(credentials.apiKeys.anthropic),
+      },
+      google: {
+        configured: !!credentials.apiKeys.google,
+        masked: maskKey(credentials.apiKeys.google),
+      },
+      openai: {
+        configured: !!credentials.apiKeys.openai,
+        masked: maskKey(credentials.apiKeys.openai),
+      },
+      zai: {
+        configured: !!credentials.apiKeys.zai,
+        masked: maskKey(credentials.apiKeys.zai),
+      },
+    };
+  }
+
+  /**
+   * Check if credentials file exists
+   *
+   * Used to determine if user has configured any API keys.
+   *
+   * @returns Promise resolving to true if {dataDir}/credentials.json exists
+   */
+  async hasCredentials(): Promise<boolean> {
+    const credentialsPath = getCredentialsPath(this.dataDir);
+    return fileExists(credentialsPath);
+  }
+
+  // ============================================================================
+  // Project Settings
+  // ============================================================================
+
+  /**
+   * Get project-specific settings with defaults applied
+   *
+   * Reads from {projectPath}/.automaker/settings.json. If file doesn't exist,
+   * returns defaults. Project settings are optional - missing values fall back
+   * to global settings on the UI side.
+   *
+   * @param projectPath - Absolute path to project directory
+   * @returns Promise resolving to complete ProjectSettings object
+   */
+  async getProjectSettings(projectPath: string): Promise<ProjectSettings> {
+    const settingsPath = getProjectSettingsPath(projectPath);
+    const settings = await readJsonFile<ProjectSettings>(settingsPath, DEFAULT_PROJECT_SETTINGS);
+
+    return {
+      ...DEFAULT_PROJECT_SETTINGS,
+      ...settings,
+    };
+  }
+
+  /**
+   * Update project-specific settings with partial changes
+   *
+   * Performs a deep merge on boardBackground. Creates .automaker directory
+   * in project if needed. Updates are written atomically.
+   *
+   * @param projectPath - Absolute path to project directory
+   * @param updates - Partial ProjectSettings to merge
+   * @returns Promise resolving to complete updated ProjectSettings
+   */
+  async updateProjectSettings(
+    projectPath: string,
+    updates: Partial<ProjectSettings>
+  ): Promise<ProjectSettings> {
+    await ensureAutomakerDir(projectPath);
+    const settingsPath = getProjectSettingsPath(projectPath);
+
+    const current = await this.getProjectSettings(projectPath);
+    const updated: ProjectSettings = {
+      ...current,
+      ...updates,
+      version: PROJECT_SETTINGS_VERSION,
+    };
+
+    // Deep merge board background if provided
+    if (updates.boardBackground) {
+      updated.boardBackground = {
+        ...current.boardBackground,
+        ...updates.boardBackground,
+      };
+    }
+
+    // Handle activeClaudeApiProfileId special cases:
+    // - "__USE_GLOBAL__" marker means delete the key (use global setting)
+    // - null means explicit "Direct Anthropic API"
+    // - string means specific profile ID
+    if (
+      'activeClaudeApiProfileId' in updates &&
+      updates.activeClaudeApiProfileId === '__USE_GLOBAL__'
+    ) {
+      delete updated.activeClaudeApiProfileId;
+    }
+
+    // Handle phaseModelOverrides special cases:
+    // - "__CLEAR__" marker means delete the key (use global settings for all phases)
+    // - object means partial overrides for specific phases
+    if (
+      'phaseModelOverrides' in updates &&
+      (updates as Record<string, unknown>).phaseModelOverrides === '__CLEAR__'
+    ) {
+      delete updated.phaseModelOverrides;
+    }
+
+    // Handle defaultFeatureModel special cases:
+    // - "__CLEAR__" marker means delete the key (use global setting)
+    // - object means project-specific override
+    if (
+      'defaultFeatureModel' in updates &&
+      (updates as Record<string, unknown>).defaultFeatureModel === '__CLEAR__'
+    ) {
+      delete updated.defaultFeatureModel;
+    }
+
+    // Handle devCommand special cases:
+    // - null means delete the key (use auto-detection)
+    // - string means custom command
+    if ('devCommand' in updates && updates.devCommand === null) {
+      delete updated.devCommand;
+    }
+
+    // Handle testCommand special cases:
+    // - null means delete the key (use auto-detection)
+    // - string means custom command
+    if ('testCommand' in updates && updates.testCommand === null) {
+      delete updated.testCommand;
+    }
+
+    await writeSettingsJson(settingsPath, updated);
+    logger.info(`Project settings updated for ${projectPath}`);
+
+    return updated;
+  }
+
+  /**
+   * Check if project settings file exists
+   *
+   * @param projectPath - Absolute path to project directory
+   * @returns Promise resolving to true if {projectPath}/.automaker/settings.json exists
+   */
+  async hasProjectSettings(projectPath: string): Promise<boolean> {
+    const settingsPath = getProjectSettingsPath(projectPath);
+    return fileExists(settingsPath);
+  }
+
+  // ============================================================================
+  // Migration
+  // ============================================================================
+
+  /**
+   * Migrate settings from localStorage to file-based storage
+   *
+   * Called during onboarding when UI detects localStorage data but no settings files.
+   * Extracts global settings, credentials, and per-project settings from various
+   * localStorage keys and writes them to the new file-based storage.
+   * Collects errors but continues on partial failures.
+   *
+   * @param localStorageData - Object containing localStorage key/value pairs to migrate
+   * @returns Promise resolving to migration result with success status and error list
+   */
+  async migrateFromLocalStorage(localStorageData: {
+    'automaker-storage'?: string;
+    'automaker-setup'?: string;
+    'worktree-panel-collapsed'?: string;
+    'file-browser-recent-folders'?: string;
+    'automaker:lastProjectDir'?: string;
+  }): Promise<{
+    success: boolean;
+    migratedGlobalSettings: boolean;
+    migratedCredentials: boolean;
+    migratedProjectCount: number;
+    errors: string[];
+  }> {
+    const errors: string[] = [];
+    let migratedGlobalSettings = false;
+    let migratedCredentials = false;
+    let migratedProjectCount = 0;
+
+    try {
+      // Parse the main automaker-storage
+      let appState: Record<string, unknown> = {};
+      if (localStorageData['automaker-storage']) {
+        try {
+          const parsed = JSON.parse(localStorageData['automaker-storage']);
+          appState = parsed.state || parsed;
+        } catch (e) {
+          errors.push(`Failed to parse automaker-storage: ${e}`);
+        }
+      }
+
+      // Parse setup wizard state (previously stored in localStorage)
+      let setupState: Record<string, unknown> = {};
+      if (localStorageData['automaker-setup']) {
+        try {
+          const parsed = JSON.parse(localStorageData['automaker-setup']);
+          setupState = parsed.state || parsed;
+        } catch (e) {
+          errors.push(`Failed to parse automaker-setup: ${e}`);
+        }
+      }
+
+      // Extract global settings
+      const globalSettings: Partial<GlobalSettings> = {
+        setupComplete:
+          setupState.setupComplete !== undefined ? (setupState.setupComplete as boolean) : false,
+        isFirstRun: setupState.isFirstRun !== undefined ? (setupState.isFirstRun as boolean) : true,
+        skipClaudeSetup:
+          setupState.skipClaudeSetup !== undefined
+            ? (setupState.skipClaudeSetup as boolean)
+            : false,
+        theme: (appState.theme as GlobalSettings['theme']) || 'dark',
+        sidebarOpen: appState.sidebarOpen !== undefined ? (appState.sidebarOpen as boolean) : true,
+        chatHistoryOpen: (appState.chatHistoryOpen as boolean) || false,
+        maxConcurrency: (appState.maxConcurrency as number) || DEFAULT_MAX_CONCURRENCY,
+        defaultSkipTests:
+          appState.defaultSkipTests !== undefined ? (appState.defaultSkipTests as boolean) : true,
+        enableDependencyBlocking:
+          appState.enableDependencyBlocking !== undefined
+            ? (appState.enableDependencyBlocking as boolean)
+            : true,
+        skipVerificationInAutoMode:
+          appState.skipVerificationInAutoMode !== undefined
+            ? (appState.skipVerificationInAutoMode as boolean)
+            : false,
+        useWorktrees:
+          appState.useWorktrees !== undefined ? (appState.useWorktrees as boolean) : true,
+        defaultPlanningMode:
+          (appState.defaultPlanningMode as GlobalSettings['defaultPlanningMode']) || 'skip',
+        defaultRequirePlanApproval: (appState.defaultRequirePlanApproval as boolean) || false,
+        muteDoneSound: (appState.muteDoneSound as boolean) || false,
+        enhancementModel:
+          (appState.enhancementModel as GlobalSettings['enhancementModel']) || 'sonnet',
+        keyboardShortcuts:
+          (appState.keyboardShortcuts as KeyboardShortcuts) ||
+          DEFAULT_GLOBAL_SETTINGS.keyboardShortcuts,
+        eventHooks: (appState.eventHooks as GlobalSettings['eventHooks']) || [],
+        ntfyEndpoints: (appState.ntfyEndpoints as GlobalSettings['ntfyEndpoints']) || [],
+        projects: (appState.projects as ProjectRef[]) || [],
+        trashedProjects: (appState.trashedProjects as TrashedProjectRef[]) || [],
+        projectHistory: (appState.projectHistory as string[]) || [],
+        projectHistoryIndex: (appState.projectHistoryIndex as number) || -1,
+        lastSelectedSessionByProject:
+          (appState.lastSelectedSessionByProject as Record<string, string>) || {},
+      };
+
+      // Add direct localStorage values
+      if (localStorageData['automaker:lastProjectDir']) {
+        globalSettings.lastProjectDir = localStorageData['automaker:lastProjectDir'];
+      }
+
+      if (localStorageData['file-browser-recent-folders']) {
+        try {
+          globalSettings.recentFolders = JSON.parse(
+            localStorageData['file-browser-recent-folders']
+          );
+        } catch {
+          globalSettings.recentFolders = [];
+        }
+      }
+
+      if (localStorageData['worktree-panel-collapsed']) {
+        globalSettings.worktreePanelCollapsed =
+          localStorageData['worktree-panel-collapsed'] === 'true';
+      }
+
+      // Save global settings
+      await this.updateGlobalSettings(globalSettings);
+      migratedGlobalSettings = true;
+      logger.info('Migrated global settings from localStorage');
+
+      // Extract and save credentials
+      if (appState.apiKeys) {
+        const apiKeys = appState.apiKeys as {
+          anthropic?: string;
+          google?: string;
+          openai?: string;
+        };
+        await this.updateCredentials({
+          apiKeys: {
+            anthropic: apiKeys.anthropic || '',
+            google: apiKeys.google || '',
+            openai: apiKeys.openai || '',
+            zai: '',
+          },
+        });
+        migratedCredentials = true;
+        logger.info('Migrated credentials from localStorage');
+      }
+
+      // Migrate per-project settings
+      const boardBackgroundByProject = appState.boardBackgroundByProject as
+        | Record<string, BoardBackgroundSettings>
+        | undefined;
+      const currentWorktreeByProject = appState.currentWorktreeByProject as
+        | Record<string, { path: string | null; branch: string }>
+        | undefined;
+      const worktreesByProject = appState.worktreesByProject as
+        | Record<string, WorktreeInfo[]>
+        | undefined;
+
+      // Get unique project paths that have per-project settings
+      const projectPaths = new Set<string>();
+      if (boardBackgroundByProject) {
+        Object.keys(boardBackgroundByProject).forEach((p) => projectPaths.add(p));
+      }
+      if (currentWorktreeByProject) {
+        Object.keys(currentWorktreeByProject).forEach((p) => projectPaths.add(p));
+      }
+      if (worktreesByProject) {
+        Object.keys(worktreesByProject).forEach((p) => projectPaths.add(p));
+      }
+
+      // Also check projects list for theme settings
+      const projects = (appState.projects as ProjectRef[]) || [];
+      for (const project of projects) {
+        if (project.theme) {
+          projectPaths.add(project.path);
+        }
+      }
+
+      // Migrate each project's settings
+      for (const projectPath of projectPaths) {
+        try {
+          const projectSettings: Partial<ProjectSettings> = {};
+
+          // Get theme from project object
+          const project = projects.find((p) => p.path === projectPath);
+          if (project?.theme) {
+            projectSettings.theme = project.theme as ProjectSettings['theme'];
+          }
+
+          if (boardBackgroundByProject?.[projectPath]) {
+            projectSettings.boardBackground = boardBackgroundByProject[projectPath];
+          }
+
+          if (currentWorktreeByProject?.[projectPath]) {
+            projectSettings.currentWorktree = currentWorktreeByProject[projectPath];
+          }
+
+          if (worktreesByProject?.[projectPath]) {
+            projectSettings.worktrees = worktreesByProject[projectPath];
+          }
+
+          if (Object.keys(projectSettings).length > 0) {
+            await this.updateProjectSettings(projectPath, projectSettings);
+            migratedProjectCount++;
+          }
+        } catch (e) {
+          errors.push(`Failed to migrate project settings for ${projectPath}: ${e}`);
+        }
+      }
+
+      logger.info(`Migration complete: ${migratedProjectCount} projects migrated`);
+
+      return {
+        success: errors.length === 0,
+        migratedGlobalSettings,
+        migratedCredentials,
+        migratedProjectCount,
+        errors,
+      };
+    } catch (error) {
+      logger.error('Migration failed:', error);
+      errors.push(`Migration failed: ${error}`);
+      return {
+        success: false,
+        migratedGlobalSettings,
+        migratedCredentials,
+        migratedProjectCount,
+        errors,
+      };
+    }
+  }
+
+  /**
+   * Get the data directory path
+   *
+   * Returns the absolute path to the directory where global settings and
+   * credentials are stored. Useful for logging, debugging, and validation.
+   *
+   * @returns Absolute path to data directory
+   */
+  getDataDir(): string {
+    return this.dataDir;
+  }
+
+  /**
+   * Get the legacy Electron userData directory path
+   *
+   * Returns the platform-specific path where Electron previously stored settings
+   * before the migration to shared data directories.
+   *
+   * @returns Absolute path to legacy userData directory
+   */
+  private getLegacyElectronUserDataPath(): string {
+    const homeDir = os.homedir();
+
+    switch (process.platform) {
+      case 'darwin':
+        // macOS: ~/Library/Application Support/Automaker
+        return path.join(homeDir, 'Library', 'Application Support', 'Automaker');
+      case 'win32':
+        // Windows: %APPDATA%\Automaker
+        return path.join(
+          process.env.APPDATA || path.join(homeDir, 'AppData', 'Roaming'),
+          'Automaker'
+        );
+      default:
+        // Linux and others: ~/.config/Automaker
+        return path.join(process.env.XDG_CONFIG_HOME || path.join(homeDir, '.config'), 'Automaker');
+    }
+  }
+
+  /**
+   * Migrate entire data directory from legacy Electron userData location to new shared data directory
+   *
+   * This handles the migration from when Electron stored data in the platform-specific
+   * userData directory (e.g., ~/.config/Automaker) to the new shared ./data directory.
+   *
+   * Migration only occurs if:
+   * 1. The new location does NOT have settings.json
+   * 2. The legacy location DOES have settings.json
+   *
+   * Migrates all files and directories including:
+   * - settings.json (global settings)
+   * - credentials.json (API keys)
+   * - sessions-metadata.json (chat session metadata)
+   * - agent-sessions/ (conversation histories)
+   * - Any other files in the data directory
+   *
+   * @returns Promise resolving to migration result
+   */
+  async migrateFromLegacyElectronPath(): Promise<{
+    migrated: boolean;
+    migratedFiles: string[];
+    legacyPath: string;
+    errors: string[];
+  }> {
+    const legacyPath = this.getLegacyElectronUserDataPath();
+    const migratedFiles: string[] = [];
+    const errors: string[] = [];
+
+    // Skip if legacy path is the same as current data dir (no migration needed)
+    if (path.resolve(legacyPath) === path.resolve(this.dataDir)) {
+      logger.debug('Legacy path same as current data dir, skipping migration');
+      return { migrated: false, migratedFiles, legacyPath, errors };
+    }
+
+    logger.info(`Checking for legacy data migration from: ${legacyPath}`);
+    logger.info(`Current data directory: ${this.dataDir}`);
+
+    // Check if new settings already exist
+    const newSettingsPath = getGlobalSettingsPath(this.dataDir);
+    let newSettingsExist = false;
+    try {
+      await fs.access(newSettingsPath);
+      newSettingsExist = true;
+    } catch {
+      // New settings don't exist, migration may be needed
+    }
+
+    if (newSettingsExist) {
+      logger.debug('Settings already exist in new location, skipping migration');
+      return { migrated: false, migratedFiles, legacyPath, errors };
+    }
+
+    // Check if legacy directory exists and has settings
+    const legacySettingsPath = path.join(legacyPath, 'settings.json');
+    let legacySettingsExist = false;
+    try {
+      await fs.access(legacySettingsPath);
+      legacySettingsExist = true;
+    } catch {
+      // Legacy settings don't exist
+    }
+
+    if (!legacySettingsExist) {
+      logger.debug('No legacy settings found, skipping migration');
+      return { migrated: false, migratedFiles, legacyPath, errors };
+    }
+
+    // Perform migration of specific application data files only
+    // (not Electron internal caches like Code Cache, GPU Cache, etc.)
+    logger.info('Found legacy data directory, migrating application data to new location...');
+
+    // Ensure new data directory exists
+    try {
+      await ensureDataDir(this.dataDir);
+    } catch (error) {
+      const msg = `Failed to create data directory: ${error}`;
+      logger.error(msg);
+      errors.push(msg);
+      return { migrated: false, migratedFiles, legacyPath, errors };
+    }
+
+    // Only migrate specific application data files/directories
+    const itemsToMigrate = [
+      'settings.json',
+      'credentials.json',
+      'sessions-metadata.json',
+      'agent-sessions',
+      '.api-key',
+      '.sessions',
+    ];
+
+    for (const item of itemsToMigrate) {
+      const srcPath = path.join(legacyPath, item);
+      const destPath = path.join(this.dataDir, item);
+
+      // Check if source exists
+      try {
+        await fs.access(srcPath);
+      } catch {
+        // Source doesn't exist, skip
+        continue;
+      }
+
+      // Check if destination already exists
+      try {
+        await fs.access(destPath);
+        logger.debug(`Skipping ${item} - already exists in destination`);
+        continue;
+      } catch {
+        // Destination doesn't exist, proceed with copy
+      }
+
+      // Copy file or directory
+      try {
+        const stat = await fs.stat(srcPath);
+        if (stat.isDirectory()) {
+          await this.copyDirectory(srcPath, destPath);
+          migratedFiles.push(item + '/');
+          logger.info(`Migrated directory: ${item}/`);
+        } else {
+          const content = await fs.readFile(srcPath);
+          await fs.writeFile(destPath, content);
+          migratedFiles.push(item);
+          logger.info(`Migrated file: ${item}`);
+        }
+      } catch (error) {
+        const msg = `Failed to migrate ${item}: ${error}`;
+        logger.error(msg);
+        errors.push(msg);
+      }
+    }
+
+    if (migratedFiles.length > 0) {
+      logger.info(
+        `Migration complete. Migrated ${migratedFiles.length} item(s): ${migratedFiles.join(', ')}`
+      );
+      logger.info(`Legacy path: ${legacyPath}`);
+      logger.info(`New path: ${this.dataDir}`);
+    }
+
+    return {
+      migrated: migratedFiles.length > 0,
+      migratedFiles,
+      legacyPath,
+      errors,
+    };
+  }
+
+  /**
+   * Recursively copy a directory from source to destination
+   *
+   * @param srcDir - Source directory path
+   * @param destDir - Destination directory path
+   */
+  private async copyDirectory(srcDir: string, destDir: string): Promise<void> {
+    await fs.mkdir(destDir, { recursive: true });
+    const entries = await fs.readdir(srcDir, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const srcPath = path.join(srcDir, entry.name);
+      const destPath = path.join(destDir, entry.name);
+
+      if (entry.isDirectory()) {
+        await this.copyDirectory(srcPath, destPath);
+      } else if (entry.isFile()) {
+        const content = await fs.readFile(srcPath);
+        await fs.writeFile(destPath, content);
+      }
+    }
+  }
+}
diff --git a/temp_repo/apps/server/src/services/spec-parser.ts b/temp_repo/apps/server/src/services/spec-parser.ts
new file mode 100644
index 0000000000000000000000000000000000000000..534c17e2ff3a203c457751deca5d1a3cac5bb90d
--- /dev/null
+++ b/temp_repo/apps/server/src/services/spec-parser.ts
@@ -0,0 +1,251 @@
+/**
+ * Spec Parser - Pure functions for parsing spec content and detecting markers
+ *
+ * Extracts tasks from generated specs, detects progress markers,
+ * and extracts summary content from various formats.
+ */
+
+import type { ParsedTask } from '@automaker/types';
+
+/**
+ * Parse a single task line
+ * Format: - [ ] T###: Description | File: path/to/file
+ */
+function parseTaskLine(line: string, currentPhase?: string): ParsedTask | null {
+  // Match pattern: - [ ] T###: Description | File: path
+  const taskMatch = line.match(/- \[ \] (T\d{3}):\s*([^|]+)(?:\|\s*File:\s*(.+))?$/);
+  if (!taskMatch) {
+    // Try simpler pattern without file
+    const simpleMatch = line.match(/- \[ \] (T\d{3}):\s*(.+)$/);
+    if (simpleMatch) {
+      return {
+        id: simpleMatch[1],
+        description: simpleMatch[2].trim(),
+        phase: currentPhase,
+        status: 'pending',
+      };
+    }
+    return null;
+  }
+
+  return {
+    id: taskMatch[1],
+    description: taskMatch[2].trim(),
+    filePath: taskMatch[3]?.trim(),
+    phase: currentPhase,
+    status: 'pending',
+  };
+}
+
+/**
+ * Parse tasks from generated spec content
+ * Looks for the ```tasks code block and extracts task lines
+ * Format: - [ ] T###: Description | File: path/to/file
+ */
+export function parseTasksFromSpec(specContent: string): ParsedTask[] {
+  const tasks: ParsedTask[] = [];
+
+  // Extract content within ```tasks ... ``` block
+  const tasksBlockMatch = specContent.match(/```tasks\s*([\s\S]*?)```/);
+  if (!tasksBlockMatch) {
+    // Try fallback: look for task lines anywhere in content
+    const taskLines = specContent.match(/- \[ \] T\d{3}:.*$/gm);
+    if (!taskLines) {
+      return tasks;
+    }
+    // Parse fallback task lines
+    let currentPhase: string | undefined;
+    for (const line of taskLines) {
+      const parsed = parseTaskLine(line, currentPhase);
+      if (parsed) {
+        tasks.push(parsed);
+      }
+    }
+    return tasks;
+  }
+
+  const tasksContent = tasksBlockMatch[1];
+  const lines = tasksContent.split('\n');
+
+  let currentPhase: string | undefined;
+
+  for (const line of lines) {
+    const trimmedLine = line.trim();
+
+    // Check for phase header (e.g., "## Phase 1: Foundation")
+    const phaseMatch = trimmedLine.match(/^##\s*(.+)$/);
+    if (phaseMatch) {
+      currentPhase = phaseMatch[1].trim();
+      continue;
+    }
+
+    // Check for task line
+    if (trimmedLine.startsWith('- [ ]')) {
+      const parsed = parseTaskLine(trimmedLine, currentPhase);
+      if (parsed) {
+        tasks.push(parsed);
+      }
+    }
+  }
+
+  return tasks;
+}
+
+/**
+ * Detect [TASK_START] marker in text and extract task ID
+ * Format: [TASK_START] T###: Description
+ */
+export function detectTaskStartMarker(text: string): string | null {
+  const match = text.match(/\[TASK_START\]\s*(T\d{3})/);
+  return match ? match[1] : null;
+}
+
+/**
+ * Detect [TASK_COMPLETE] marker in text and extract task ID and summary
+ * Format: [TASK_COMPLETE] T###: Brief summary
+ */
+export function detectTaskCompleteMarker(text: string): { id: string; summary?: string } | null {
+  // Use a regex that captures the summary until newline or next task marker
+  // Allow brackets in summary content (e.g., "supports array[index] access")
+  // Pattern breakdown:
+  // - \[TASK_COMPLETE\]\s* - Match the marker
+  // - (T\d{3}) - Capture task ID
+  // - (?::\s*([^\n\[]+))? - Optionally capture summary (stops at newline or bracket)
+  // - But we want to allow brackets in summary, so we use a different approach:
+  // - Match summary until newline, then trim any trailing markers in post-processing
+  const match = text.match(/\[TASK_COMPLETE\]\s*(T\d{3})(?::\s*(.+?))?(?=\n|$)/i);
+  if (!match) return null;
+
+  // Post-process: remove trailing task markers from summary if present
+  let summary = match[2]?.trim();
+  if (summary) {
+    // Remove trailing content that looks like another marker
+    summary = summary.replace(/\s*\[TASK_[A-Z_]+\].*$/i, '').trim();
+  }
+
+  return {
+    id: match[1],
+    summary: summary || undefined,
+  };
+}
+
+/**
+ * Detect [PHASE_COMPLETE] marker in text and extract phase number
+ * Format: [PHASE_COMPLETE] Phase N complete
+ */
+export function detectPhaseCompleteMarker(text: string): number | null {
+  const match = text.match(/\[PHASE_COMPLETE\]\s*Phase\s*(\d+)/i);
+  return match ? parseInt(match[1], 10) : null;
+}
+
+/**
+ * Fallback spec detection when [SPEC_GENERATED] marker is missing
+ * Looks for structural elements that indicate a spec was generated.
+ * This is especially important for non-Claude models that may not output
+ * the explicit [SPEC_GENERATED] marker.
+ *
+ * @param text - The text content to check for spec structure
+ * @returns true if the text appears to be a generated spec
+ */
+export function detectSpecFallback(text: string): boolean {
+  // Check for key structural elements of a spec
+  const hasTasksBlock = /```tasks[\s\S]*```/.test(text);
+  const hasTaskLines = /- \[ \] T\d{3}:/.test(text);
+
+  // Check for common spec sections (case-insensitive)
+  const hasAcceptanceCriteria = /acceptance criteria/i.test(text);
+  const hasTechnicalContext = /technical context/i.test(text);
+  const hasProblemStatement = /problem statement/i.test(text);
+  const hasUserStory = /user story/i.test(text);
+  // Additional patterns for different model outputs
+  const hasGoal = /\*\*Goal\*\*:/i.test(text);
+  const hasSolution = /\*\*Solution\*\*:/i.test(text);
+  const hasImplementation = /implementation\s*(plan|steps|approach)/i.test(text);
+  const hasOverview = /##\s*(overview|summary)/i.test(text);
+
+  // Spec is detected if we have task structure AND at least some spec content
+  const hasTaskStructure = hasTasksBlock || hasTaskLines;
+  const hasSpecContent =
+    hasAcceptanceCriteria ||
+    hasTechnicalContext ||
+    hasProblemStatement ||
+    hasUserStory ||
+    hasGoal ||
+    hasSolution ||
+    hasImplementation ||
+    hasOverview;
+
+  return hasTaskStructure && hasSpecContent;
+}
+
+/**
+ * Extract summary from text content
+ * Checks for multiple formats in order of priority:
+ * 1. Explicit <summary> tags
+ * 2. ## Summary section (markdown)
+ * 3. **Goal**: section (lite planning mode)
+ * 4. **Problem**: or **Problem Statement**: section (spec/full modes)
+ * 5. **Solution**: section as fallback
+ *
+ * Note: Uses last match for each pattern to avoid stale summaries
+ * when agent output accumulates across multiple runs.
+ *
+ * @param text - The text content to extract summary from
+ * @returns The extracted summary string, or null if no summary found
+ */
+export function extractSummary(text: string): string | null {
+  // Helper to truncate content to first paragraph with max length
+  const truncate = (content: string, maxLength: number): string => {
+    const firstPara = content.split(/\n\n/)[0];
+    return firstPara.length > maxLength ? `${firstPara.substring(0, maxLength)}...` : firstPara;
+  };
+
+  // Helper to get last match from matchAll results
+  const getLastMatch = (matches: IterableIterator<RegExpMatchArray>): RegExpMatchArray | null => {
+    const arr = [...matches];
+    return arr.length > 0 ? arr[arr.length - 1] : null;
+  };
+
+  // Check for explicit <summary> tags first (use last match to avoid stale summaries)
+  const summaryMatches = text.matchAll(/<summary>([\s\S]*?)<\/summary>/g);
+  const summaryMatch = getLastMatch(summaryMatches);
+  if (summaryMatch) {
+    return summaryMatch[1].trim();
+  }
+
+  // Check for ## Summary section (use last match)
+  // Stop at \n## [^#] (same-level headers like "## Changes") but preserve ### subsections
+  // (like "### Root Cause", "### Fix Applied") that belong to the summary content.
+  const sectionMatches = text.matchAll(/##\s*Summary\s*\n+([\s\S]*?)(?=\n## [^#]|$)/gi);
+  const sectionMatch = getLastMatch(sectionMatches);
+  if (sectionMatch) {
+    const content = sectionMatch[1].trim();
+    // Keep full content (including ### subsections) up to max length
+    return content.length > 500 ? `${content.substring(0, 500)}...` : content;
+  }
+
+  // Check for **Goal**: section (lite mode, use last match)
+  const goalMatches = text.matchAll(/\*\*Goal\*\*:\s*(.+?)(?:\n|$)/gi);
+  const goalMatch = getLastMatch(goalMatches);
+  if (goalMatch) {
+    return goalMatch[1].trim();
+  }
+
+  // Check for **Problem**: or **Problem Statement**: section (spec/full modes, use last match)
+  const problemMatches = text.matchAll(
+    /\*\*Problem(?:\s*Statement)?\*\*:\s*([\s\S]*?)(?=\n\d+\.|\n\*\*|$)/gi
+  );
+  const problemMatch = getLastMatch(problemMatches);
+  if (problemMatch) {
+    return truncate(problemMatch[1].trim(), 500);
+  }
+
+  // Check for **Solution**: section as fallback (use last match)
+  const solutionMatches = text.matchAll(/\*\*Solution\*\*:\s*([\s\S]*?)(?=\n\d+\.|\n\*\*|$)/gi);
+  const solutionMatch = getLastMatch(solutionMatches);
+  if (solutionMatch) {
+    return truncate(solutionMatch[1].trim(), 300);
+  }
+
+  return null;
+}
diff --git a/temp_repo/apps/server/src/services/stage-files-service.ts b/temp_repo/apps/server/src/services/stage-files-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e155b3ee15645492ac75e78b313e0a7a5d309482
--- /dev/null
+++ b/temp_repo/apps/server/src/services/stage-files-service.ts
@@ -0,0 +1,117 @@
+/**
+ * stageFilesService - Path validation and git staging/unstaging operations
+ *
+ * Extracted from createStageFilesHandler to centralise path canonicalization,
+ * path-traversal validation, and git invocation so they can be tested and
+ * reused independently of the HTTP layer.
+ */
+
+import path from 'path';
+import fs from 'fs/promises';
+import { execGitCommand } from '../lib/git.js';
+
+/**
+ * Result returned by `stageFiles` on success.
+ */
+export interface StageFilesResult {
+  operation: string;
+  filesCount: number;
+}
+
+/**
+ * Error thrown when one or more file paths fail validation (e.g. absolute
+ * paths, path-traversal attempts, or paths that resolve outside the worktree
+ * root, or when the worktree path itself does not exist).
+ *
+ * Handlers can catch this to return an HTTP 400 response instead of 500.
+ */
+export class StageFilesValidationError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'StageFilesValidationError';
+  }
+}
+
+/**
+ * Resolve the canonical path of the worktree root, validate every file path
+ * against it to prevent path-traversal attacks, and then invoke the
+ * appropriate git command (`add` or `reset`) to stage or unstage the files.
+ *
+ * @param worktreePath - Absolute path to the git worktree root directory.
+ * @param files        - Relative file paths to stage or unstage.
+ * @param operation    - `'stage'` runs `git add`, `'unstage'` runs `git reset HEAD`.
+ *
+ * @returns An object containing the operation name and the number of files
+ *          that were staged/unstaged.
+ *
+ * @throws {StageFilesValidationError} When `worktreePath` is inaccessible or
+ *   any entry in `files` fails the path-traversal checks.
+ * @throws {Error} When the underlying git command fails.
+ */
+export async function stageFiles(
+  worktreePath: string,
+  files: string[],
+  operation: 'stage' | 'unstage'
+): Promise<StageFilesResult> {
+  // Canonicalize the worktree root by resolving symlinks so that
+  // path-traversal checks are reliable even when symlinks are involved.
+  let canonicalRoot: string;
+  try {
+    canonicalRoot = await fs.realpath(worktreePath);
+  } catch {
+    throw new StageFilesValidationError('worktreePath does not exist or is not accessible');
+  }
+
+  // Validate and sanitize each file path to prevent path traversal attacks.
+  // Each file entry is resolved against the canonicalized worktree root and
+  // must remain within that root directory.
+  const base = canonicalRoot + path.sep;
+  const sanitizedFiles: string[] = [];
+  for (const file of files) {
+    // Reject empty or whitespace-only paths — path.resolve(canonicalRoot, '')
+    // returns canonicalRoot itself, so without this guard an empty string would
+    // pass all subsequent checks and be forwarded to git unchanged.
+    if (file.trim() === '') {
+      throw new StageFilesValidationError(
+        'Invalid file path (empty or whitespace-only paths not allowed)'
+      );
+    }
+    // Reject absolute paths
+    if (path.isAbsolute(file)) {
+      throw new StageFilesValidationError(
+        `Invalid file path (absolute paths not allowed): ${file}`
+      );
+    }
+    // Reject entries containing '..'
+    if (file.includes('..')) {
+      throw new StageFilesValidationError(
+        `Invalid file path (path traversal not allowed): ${file}`
+      );
+    }
+    // Resolve the file path against the canonicalized worktree root and
+    // ensure the result stays within the worktree directory.
+    const resolved = path.resolve(canonicalRoot, file);
+    if (resolved !== canonicalRoot && !resolved.startsWith(base)) {
+      throw new StageFilesValidationError(
+        `Invalid file path (outside worktree directory): ${file}`
+      );
+    }
+    // Forward only the original relative path to git — git interprets
+    // paths relative to its working directory (canonicalRoot / worktreePath),
+    // so we do not need to pass the resolved absolute path.
+    sanitizedFiles.push(file);
+  }
+
+  if (operation === 'stage') {
+    // Stage the specified files
+    await execGitCommand(['add', '--', ...sanitizedFiles], worktreePath);
+  } else {
+    // Unstage the specified files
+    await execGitCommand(['reset', 'HEAD', '--', ...sanitizedFiles], worktreePath);
+  }
+
+  return {
+    operation,
+    filesCount: sanitizedFiles.length,
+  };
+}
diff --git a/temp_repo/apps/server/src/services/stash-service.ts b/temp_repo/apps/server/src/services/stash-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dd0a8737c7fc6ead711d70d12deff3b2fd78a929
--- /dev/null
+++ b/temp_repo/apps/server/src/services/stash-service.ts
@@ -0,0 +1,461 @@
+/**
+ * StashService - Stash operations without HTTP
+ *
+ * Encapsulates stash workflows including:
+ * - Push (create) stashes with optional message and file selection
+ * - List all stash entries with metadata and changed files
+ * - Apply or pop a stash entry with conflict detection
+ * - Drop (delete) a stash entry
+ * - Conflict detection from command output and git diff
+ * - Lifecycle event emission (start, progress, conflicts, success, failure)
+ *
+ * Extracted from the worktree stash route handlers to improve organisation
+ * and testability. Follows the same pattern as pull-service.ts and
+ * merge-service.ts.
+ */
+
+import { createLogger, getErrorMessage } from '@automaker/utils';
+import type { EventEmitter } from '../lib/events.js';
+import { execGitCommand, execGitCommandWithLockRetry } from '../lib/git.js';
+
+const logger = createLogger('StashService');
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface StashApplyOptions {
+  /** When true, remove the stash entry after applying (git stash pop) */
+  pop?: boolean;
+}
+
+export interface StashApplyResult {
+  success: boolean;
+  error?: string;
+  applied?: boolean;
+  hasConflicts?: boolean;
+  conflictFiles?: string[];
+  operation?: 'apply' | 'pop';
+  stashIndex?: number;
+  message?: string;
+}
+
+export interface StashPushResult {
+  success: boolean;
+  error?: string;
+  stashed: boolean;
+  branch?: string;
+  message?: string;
+}
+
+export interface StashEntry {
+  index: number;
+  message: string;
+  branch: string;
+  date: string;
+  files: string[];
+}
+
+export interface StashListResult {
+  success: boolean;
+  error?: string;
+  stashes: StashEntry[];
+  total: number;
+}
+
+export interface StashDropResult {
+  success: boolean;
+  error?: string;
+  dropped: boolean;
+  stashIndex?: number;
+  message?: string;
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+/**
+ * Retrieve the list of files with unmerged (conflicted) entries using git diff.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @returns Array of file paths that have unresolved conflicts
+ */
+export async function getConflictedFiles(worktreePath: string): Promise<string[]> {
+  try {
+    const diffOutput = await execGitCommand(
+      ['diff', '--name-only', '--diff-filter=U'],
+      worktreePath
+    );
+    return diffOutput
+      .trim()
+      .split('\n')
+      .filter((f) => f.trim().length > 0);
+  } catch {
+    // If we cannot get the file list, return an empty array
+    return [];
+  }
+}
+
+/**
+ * Determine whether command output indicates a merge conflict.
+ */
+function isConflictOutput(output: string): boolean {
+  return output.includes('CONFLICT') || output.includes('Merge conflict');
+}
+
+/**
+ * Build a conflict result from stash apply/pop, emit events, and return.
+ * Extracted to avoid duplicating conflict handling in the try and catch paths.
+ */
+async function handleStashConflicts(
+  worktreePath: string,
+  stashIndex: number,
+  operation: 'apply' | 'pop',
+  events?: EventEmitter
+): Promise<StashApplyResult> {
+  const conflictFiles = await getConflictedFiles(worktreePath);
+
+  events?.emit('stash:conflicts', {
+    worktreePath,
+    stashIndex,
+    operation,
+    conflictFiles,
+  });
+
+  const result: StashApplyResult = {
+    success: true,
+    applied: true,
+    hasConflicts: true,
+    conflictFiles,
+    operation,
+    stashIndex,
+    message: `Stash ${operation === 'pop' ? 'popped' : 'applied'} with conflicts. Please resolve the conflicts.`,
+  };
+
+  events?.emit('stash:success', {
+    worktreePath,
+    stashIndex,
+    operation,
+    hasConflicts: true,
+    conflictFiles,
+  });
+
+  return result;
+}
+
+// ============================================================================
+// Main Service Function
+// ============================================================================
+
+/**
+ * Apply or pop a stash entry in the given worktree.
+ *
+ * The workflow:
+ * 1. Validate inputs
+ * 2. Emit stash:start event
+ * 3. Run `git stash apply` or `git stash pop`
+ * 4. Emit stash:progress event with raw command output
+ * 5. Check output for conflict markers; if conflicts found, collect files and
+ *    emit stash:conflicts event
+ * 6. Emit stash:success or stash:failure depending on outcome
+ * 7. Return a structured StashApplyResult
+ *
+ * @param worktreePath  - Absolute path to the git worktree
+ * @param stashIndex    - Zero-based stash index (stash@{N})
+ * @param options       - Optional flags (pop)
+ * @returns StashApplyResult with detailed status information
+ */
+export async function applyOrPop(
+  worktreePath: string,
+  stashIndex: number,
+  options?: StashApplyOptions,
+  events?: EventEmitter
+): Promise<StashApplyResult> {
+  const operation: 'apply' | 'pop' = options?.pop ? 'pop' : 'apply';
+  const stashRef = `stash@{${stashIndex}}`;
+
+  logger.info(`[StashService] ${operation} ${stashRef} in ${worktreePath}`);
+
+  // 1. Emit start event
+  events?.emit('stash:start', { worktreePath, stashIndex, stashRef, operation });
+
+  try {
+    // 2. Run git stash apply / pop
+    let stdout = '';
+
+    try {
+      stdout = await execGitCommand(['stash', operation, stashRef], worktreePath);
+    } catch (gitError: unknown) {
+      const err = gitError as { stdout?: string; stderr?: string; message?: string };
+      const errStdout = err.stdout || '';
+      const errStderr = err.stderr || err.message || '';
+
+      const combinedOutput = `${errStdout}\n${errStderr}`;
+
+      // 3. Emit progress with raw output
+      events?.emit('stash:progress', {
+        worktreePath,
+        stashIndex,
+        operation,
+        output: combinedOutput,
+      });
+
+      // 4. Check if the error is a conflict
+      if (isConflictOutput(combinedOutput)) {
+        return handleStashConflicts(worktreePath, stashIndex, operation, events);
+      }
+
+      // 5. Non-conflict git error – re-throw so the outer catch logs and handles it
+      throw gitError;
+    }
+
+    // 6. Command succeeded – check stdout for conflict markers (some git versions
+    //    exit 0 even when conflicts occur during apply)
+    const combinedOutput = stdout;
+
+    events?.emit('stash:progress', { worktreePath, stashIndex, operation, output: combinedOutput });
+
+    if (isConflictOutput(combinedOutput)) {
+      return handleStashConflicts(worktreePath, stashIndex, operation, events);
+    }
+
+    // 7. Clean success
+    const result: StashApplyResult = {
+      success: true,
+      applied: true,
+      hasConflicts: false,
+      operation,
+      stashIndex,
+      message: `Stash ${operation === 'pop' ? 'popped' : 'applied'} successfully`,
+    };
+
+    events?.emit('stash:success', {
+      worktreePath,
+      stashIndex,
+      operation,
+      hasConflicts: false,
+    });
+
+    return result;
+  } catch (error) {
+    const errorMessage = getErrorMessage(error);
+
+    logger.error(`Stash ${operation} failed`, { error: getErrorMessage(error) });
+
+    events?.emit('stash:failure', {
+      worktreePath,
+      stashIndex,
+      operation,
+      error: errorMessage,
+    });
+
+    return {
+      success: false,
+      error: errorMessage,
+      applied: false,
+      operation,
+      stashIndex,
+    };
+  }
+}
+
+// ============================================================================
+// Push Stash
+// ============================================================================
+
+/**
+ * Stash uncommitted changes (including untracked files) with an optional
+ * message and optional file selection.
+ *
+ * Workflow:
+ * 1. Check for uncommitted changes via `git status --porcelain`
+ * 2. If no changes, return early with stashed: false
+ * 3. Build and run `git stash push --include-untracked [-m message] [-- files]`
+ * 4. Retrieve the current branch name
+ * 5. Return a structured StashPushResult
+ *
+ * @param worktreePath - Absolute path to the git worktree
+ * @param options      - Optional message and files to selectively stash
+ * @returns StashPushResult with stash status and branch info
+ */
+export async function pushStash(
+  worktreePath: string,
+  options?: { message?: string; files?: string[] },
+  events?: EventEmitter
+): Promise<StashPushResult> {
+  const message = options?.message;
+  const files = options?.files;
+
+  logger.info(`[StashService] push stash in ${worktreePath}`);
+  events?.emit('stash:start', { worktreePath, operation: 'push' });
+
+  // 1. Check for any changes to stash
+  const status = await execGitCommand(['status', '--porcelain'], worktreePath);
+
+  if (!status.trim()) {
+    events?.emit('stash:success', { worktreePath, operation: 'push', stashed: false });
+    return {
+      success: true,
+      stashed: false,
+      message: 'No changes to stash',
+    };
+  }
+
+  // 2. Build stash push command args
+  const args = ['stash', 'push', '--include-untracked'];
+  if (message && message.trim()) {
+    args.push('-m', message.trim());
+  }
+
+  // If specific files are provided, add them as pathspecs after '--'
+  if (files && files.length > 0) {
+    args.push('--');
+    args.push(...files);
+  }
+
+  // 3. Execute stash push (with automatic index.lock cleanup and retry)
+  await execGitCommandWithLockRetry(args, worktreePath);
+
+  // 4. Get current branch name
+  const branchOutput = await execGitCommand(['rev-parse', '--abbrev-ref', 'HEAD'], worktreePath);
+  const branchName = branchOutput.trim();
+
+  events?.emit('stash:success', {
+    worktreePath,
+    operation: 'push',
+    stashed: true,
+    branch: branchName,
+  });
+
+  return {
+    success: true,
+    stashed: true,
+    branch: branchName,
+    message: message?.trim() || `WIP on ${branchName}`,
+  };
+}
+
+// ============================================================================
+// List Stashes
+// ============================================================================
+
+/**
+ * List all stash entries for a worktree with metadata and changed files.
+ *
+ * Workflow:
+ * 1. Run `git stash list` with a custom format to get index, message, and date
+ * 2. Parse each stash line into a structured StashEntry
+ * 3. For each entry, fetch the list of files changed via `git stash show`
+ * 4. Return the full list as a StashListResult
+ *
+ * @param worktreePath - Absolute path to the git worktree
+ * @returns StashListResult with all stash entries and their metadata
+ */
+export async function listStash(worktreePath: string): Promise<StashListResult> {
+  logger.info(`[StashService] list stashes in ${worktreePath}`);
+
+  // 1. Get stash list with format: index, message, date
+  // Use %aI (strict ISO 8601) instead of %ai to ensure cross-browser compatibility
+  const stashOutput = await execGitCommand(
+    ['stash', 'list', '--format=%gd|||%s|||%aI'],
+    worktreePath
+  );
+
+  if (!stashOutput.trim()) {
+    return {
+      success: true,
+      stashes: [],
+      total: 0,
+    };
+  }
+
+  const stashLines = stashOutput
+    .trim()
+    .split('\n')
+    .filter((l) => l.trim());
+  const stashes: StashEntry[] = [];
+
+  for (const line of stashLines) {
+    const parts = line.split('|||');
+    if (parts.length < 3) continue;
+
+    const refSpec = parts[0].trim(); // e.g., "stash@{0}"
+    const stashMessage = parts[1].trim();
+    const date = parts[2].trim();
+
+    // Extract index from stash@{N}; skip entries that don't match the expected format
+    const indexMatch = refSpec.match(/stash@\{(\d+)\}/);
+    if (!indexMatch) continue;
+    const index = parseInt(indexMatch[1], 10);
+
+    // Extract branch name from message (format: "WIP on branch: hash message" or "On branch: hash message")
+    let branch = '';
+    const branchMatch = stashMessage.match(/^(?:WIP on|On) ([^:]+):/);
+    if (branchMatch) {
+      branch = branchMatch[1];
+    }
+
+    // Get list of files in this stash
+    let files: string[] = [];
+    try {
+      const filesOutput = await execGitCommand(
+        ['stash', 'show', refSpec, '--name-only'],
+        worktreePath
+      );
+      files = filesOutput
+        .trim()
+        .split('\n')
+        .filter((f) => f.trim());
+    } catch {
+      // Ignore errors getting file list
+    }
+
+    stashes.push({
+      index,
+      message: stashMessage,
+      branch,
+      date,
+      files,
+    });
+  }
+
+  return {
+    success: true,
+    stashes,
+    total: stashes.length,
+  };
+}
+
+// ============================================================================
+// Drop Stash
+// ============================================================================
+
+/**
+ * Drop (delete) a stash entry by index.
+ *
+ * @param worktreePath - Absolute path to the git worktree
+ * @param stashIndex   - Zero-based stash index (stash@{N})
+ * @returns StashDropResult with drop status
+ */
+export async function dropStash(
+  worktreePath: string,
+  stashIndex: number,
+  events?: EventEmitter
+): Promise<StashDropResult> {
+  const stashRef = `stash@{${stashIndex}}`;
+
+  logger.info(`[StashService] drop ${stashRef} in ${worktreePath}`);
+  events?.emit('stash:start', { worktreePath, stashIndex, stashRef, operation: 'drop' });
+
+  await execGitCommand(['stash', 'drop', stashRef], worktreePath);
+
+  events?.emit('stash:success', { worktreePath, stashIndex, stashRef, operation: 'drop' });
+
+  return {
+    success: true,
+    dropped: true,
+    stashIndex,
+    message: `Stash ${stashRef} dropped successfully`,
+  };
+}
diff --git a/temp_repo/apps/server/src/services/sync-service.ts b/temp_repo/apps/server/src/services/sync-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f47055c9250e5fb98e7f0fa86a00d5ad7f739ba6
--- /dev/null
+++ b/temp_repo/apps/server/src/services/sync-service.ts
@@ -0,0 +1,209 @@
+/**
+ * SyncService - Pull then push in a single operation
+ *
+ * Composes performPull() and performPush() to synchronize a branch
+ * with its remote. Always uses stashIfNeeded for the pull step.
+ * If push fails with divergence after pull, retries once.
+ *
+ * Follows the same pattern as pull-service.ts and push-service.ts.
+ */
+
+import { createLogger, getErrorMessage } from '@automaker/utils';
+import { performPull } from './pull-service.js';
+import { performPush } from './push-service.js';
+import type { PullResult } from './pull-service.js';
+import type { PushResult } from './push-service.js';
+
+const logger = createLogger('SyncService');
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface SyncOptions {
+  /** Remote name (defaults to 'origin') */
+  remote?: string;
+}
+
+export interface SyncResult {
+  success: boolean;
+  error?: string;
+  branch?: string;
+  /** Whether the pull step was performed */
+  pulled?: boolean;
+  /** Whether the push step was performed */
+  pushed?: boolean;
+  /** Pull resulted in conflicts */
+  hasConflicts?: boolean;
+  /** Files with merge conflicts */
+  conflictFiles?: string[];
+  /** Source of conflicts ('pull' | 'stash') */
+  conflictSource?: 'pull' | 'stash';
+  /** Whether the pull was a fast-forward */
+  isFastForward?: boolean;
+  /** Whether the pull resulted in a merge commit */
+  isMerge?: boolean;
+  /** Whether push divergence was auto-resolved */
+  autoResolved?: boolean;
+  message?: string;
+}
+
+// ============================================================================
+// Main Service Function
+// ============================================================================
+
+/**
+ * Perform a sync operation (pull then push) on the given worktree.
+ *
+ * The workflow:
+ * 1. Pull from remote with stashIfNeeded: true
+ * 2. If pull has conflicts, stop and return conflict info
+ * 3. Push to remote
+ * 4. If push fails with divergence after pull, retry once
+ *
+ * @param worktreePath - Path to the git worktree
+ * @param options - Sync options (remote)
+ * @returns SyncResult with detailed status information
+ */
+export async function performSync(
+  worktreePath: string,
+  options?: SyncOptions
+): Promise<SyncResult> {
+  const targetRemote = options?.remote || 'origin';
+
+  // 1. Pull from remote
+  logger.info('Sync: starting pull', { worktreePath, remote: targetRemote });
+
+  let pullResult: PullResult;
+  try {
+    pullResult = await performPull(worktreePath, {
+      remote: targetRemote,
+      stashIfNeeded: true,
+    });
+  } catch (pullError) {
+    return {
+      success: false,
+      error: `Sync pull failed: ${getErrorMessage(pullError)}`,
+    };
+  }
+
+  if (!pullResult.success) {
+    return {
+      success: false,
+      branch: pullResult.branch,
+      pulled: false,
+      pushed: false,
+      error: `Sync pull failed: ${pullResult.error}`,
+      hasConflicts: pullResult.hasConflicts,
+      conflictFiles: pullResult.conflictFiles,
+      conflictSource: pullResult.conflictSource,
+    };
+  }
+
+  // 2. If pull had conflicts, stop and return conflict info
+  if (pullResult.hasConflicts) {
+    return {
+      success: false,
+      branch: pullResult.branch,
+      pulled: true,
+      pushed: false,
+      hasConflicts: true,
+      conflictFiles: pullResult.conflictFiles,
+      conflictSource: pullResult.conflictSource,
+      isFastForward: pullResult.isFastForward,
+      isMerge: pullResult.isMerge,
+      error: 'Sync stopped: pull resulted in merge conflicts. Resolve conflicts and try again.',
+      message: pullResult.message,
+    };
+  }
+
+  // 3. Push to remote
+  logger.info('Sync: pull succeeded, starting push', { worktreePath, remote: targetRemote });
+
+  let pushResult: PushResult;
+  try {
+    pushResult = await performPush(worktreePath, {
+      remote: targetRemote,
+    });
+  } catch (pushError) {
+    return {
+      success: false,
+      branch: pullResult.branch,
+      pulled: true,
+      pushed: false,
+      isFastForward: pullResult.isFastForward,
+      isMerge: pullResult.isMerge,
+      error: `Sync push failed: ${getErrorMessage(pushError)}`,
+    };
+  }
+
+  if (!pushResult.success) {
+    // 4. If push diverged after pull, retry once with autoResolve
+    if (pushResult.diverged) {
+      logger.info('Sync: push diverged after pull, retrying with autoResolve', {
+        worktreePath,
+        remote: targetRemote,
+      });
+
+      try {
+        const retryResult = await performPush(worktreePath, {
+          remote: targetRemote,
+          autoResolve: true,
+        });
+
+        if (retryResult.success) {
+          return {
+            success: true,
+            branch: retryResult.branch,
+            pulled: true,
+            pushed: true,
+            autoResolved: true,
+            isFastForward: pullResult.isFastForward,
+            isMerge: pullResult.isMerge,
+            message: 'Sync completed (push required auto-resolve).',
+          };
+        }
+
+        return {
+          success: false,
+          branch: retryResult.branch,
+          pulled: true,
+          pushed: false,
+          hasConflicts: retryResult.hasConflicts,
+          conflictFiles: retryResult.conflictFiles,
+          error: retryResult.error,
+        };
+      } catch (retryError) {
+        return {
+          success: false,
+          branch: pullResult.branch,
+          pulled: true,
+          pushed: false,
+          error: `Sync push retry failed: ${getErrorMessage(retryError)}`,
+        };
+      }
+    }
+
+    return {
+      success: false,
+      branch: pushResult.branch,
+      pulled: true,
+      pushed: false,
+      isFastForward: pullResult.isFastForward,
+      isMerge: pullResult.isMerge,
+      error: `Sync push failed: ${pushResult.error}`,
+    };
+  }
+
+  return {
+    success: true,
+    branch: pushResult.branch,
+    pulled: pullResult.pulled ?? true,
+    pushed: true,
+    isFastForward: pullResult.isFastForward,
+    isMerge: pullResult.isMerge,
+    message: pullResult.pulled
+      ? 'Sync completed: pulled latest changes and pushed.'
+      : 'Sync completed: already up to date, pushed local commits.',
+  };
+}
diff --git a/temp_repo/apps/server/src/services/terminal-service.ts b/temp_repo/apps/server/src/services/terminal-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..167ab3480e9f2430e3f87ed4431dc8f6eb2209ac
--- /dev/null
+++ b/temp_repo/apps/server/src/services/terminal-service.ts
@@ -0,0 +1,935 @@
+/**
+ * Terminal Service
+ *
+ * Manages PTY (pseudo-terminal) sessions using node-pty.
+ * Supports cross-platform shell detection including WSL.
+ */
+
+import * as pty from 'node-pty';
+import { EventEmitter } from 'events';
+import * as os from 'os';
+import * as path from 'path';
+// secureFs is used for user-controllable paths (working directory validation)
+// to enforce ALLOWED_ROOT_DIRECTORY security boundary
+import * as secureFs from '../lib/secure-fs.js';
+import { createLogger } from '@automaker/utils';
+import type { SettingsService } from './settings-service.js';
+import { getTerminalThemeColors, getAllTerminalThemes } from '../lib/terminal-themes-data.js';
+import {
+  getRcFilePath,
+  getTerminalDir,
+  ensureRcFilesUpToDate,
+  type TerminalConfig,
+} from '@automaker/platform';
+
+const logger = createLogger('Terminal');
+// System paths module handles shell binary checks and WSL detection
+// These are system paths outside ALLOWED_ROOT_DIRECTORY, centralized for security auditing
+import {
+  systemPathExists,
+  systemPathReadFileSync,
+  getWslVersionPath,
+  getShellPaths,
+} from '@automaker/platform';
+
+const BASH_LOGIN_ARG = '--login';
+const BASH_RCFILE_ARG = '--rcfile';
+const SHELL_NAME_BASH = 'bash';
+const SHELL_NAME_ZSH = 'zsh';
+const SHELL_NAME_SH = 'sh';
+const DEFAULT_SHOW_USER_HOST = true;
+const DEFAULT_SHOW_PATH = true;
+const DEFAULT_SHOW_TIME = false;
+const DEFAULT_SHOW_EXIT_STATUS = false;
+const DEFAULT_PATH_DEPTH = 0;
+const DEFAULT_PATH_STYLE: TerminalConfig['pathStyle'] = 'full';
+const DEFAULT_CUSTOM_PROMPT = true;
+const DEFAULT_PROMPT_FORMAT: TerminalConfig['promptFormat'] = 'standard';
+const DEFAULT_SHOW_GIT_BRANCH = true;
+const DEFAULT_SHOW_GIT_STATUS = true;
+const DEFAULT_CUSTOM_ALIASES = '';
+const DEFAULT_CUSTOM_ENV_VARS: Record<string, string> = {};
+const PROMPT_THEME_CUSTOM = 'custom';
+const PROMPT_THEME_PREFIX = 'omp-';
+const OMP_THEME_ENV_VAR = 'AUTOMAKER_OMP_THEME';
+
+// Maximum scrollback buffer size (characters)
+const MAX_SCROLLBACK_SIZE = 50000; // ~50KB per terminal
+
+// Session limit constants - shared with routes/settings.ts
+export const MIN_MAX_SESSIONS = 1;
+export const MAX_MAX_SESSIONS = 1000;
+
+// Maximum number of concurrent terminal sessions
+// Can be overridden via TERMINAL_MAX_SESSIONS environment variable
+// Default set to 1000 - effectively unlimited for most use cases
+let maxSessions = parseInt(process.env.TERMINAL_MAX_SESSIONS || '1000', 10);
+
+// Throttle output to prevent overwhelming WebSocket under heavy load
+// Using 4ms for responsive input feedback while still preventing flood
+// Note: 16ms caused perceived input lag, especially with backspace
+const OUTPUT_THROTTLE_MS = 4; // ~250fps max update rate for responsive input
+const OUTPUT_BATCH_SIZE = 4096; // Smaller batches for lower latency
+
+function applyBashRcFileArgs(args: string[], rcFilePath: string): string[] {
+  const sanitizedArgs: string[] = [];
+
+  for (let index = 0; index < args.length; index += 1) {
+    const arg = args[index];
+    if (arg === BASH_LOGIN_ARG) {
+      continue;
+    }
+    if (arg === BASH_RCFILE_ARG) {
+      index += 1;
+      continue;
+    }
+    sanitizedArgs.push(arg);
+  }
+
+  sanitizedArgs.push(BASH_RCFILE_ARG, rcFilePath);
+  return sanitizedArgs;
+}
+
+function normalizePathStyle(
+  pathStyle: TerminalConfig['pathStyle'] | undefined
+): TerminalConfig['pathStyle'] {
+  if (pathStyle === 'short' || pathStyle === 'basename') {
+    return pathStyle;
+  }
+  return DEFAULT_PATH_STYLE;
+}
+
+function normalizePathDepth(pathDepth: number | undefined): number {
+  const depth =
+    typeof pathDepth === 'number' && Number.isFinite(pathDepth) ? pathDepth : DEFAULT_PATH_DEPTH;
+  return Math.max(DEFAULT_PATH_DEPTH, Math.floor(depth));
+}
+
+function getShellBasename(shellPath: string): string {
+  const lastSep = Math.max(shellPath.lastIndexOf('/'), shellPath.lastIndexOf('\\'));
+  return lastSep >= 0 ? shellPath.slice(lastSep + 1) : shellPath;
+}
+
+function getShellArgsForPath(shellPath: string): string[] {
+  const shellName = getShellBasename(shellPath).toLowerCase().replace('.exe', '');
+  if (shellName === 'powershell' || shellName === 'pwsh' || shellName === 'cmd') {
+    return [];
+  }
+  if (shellName === SHELL_NAME_SH) {
+    return [];
+  }
+  return [BASH_LOGIN_ARG];
+}
+
+function resolveOmpThemeName(promptTheme: string | undefined): string | null {
+  if (!promptTheme || promptTheme === PROMPT_THEME_CUSTOM) {
+    return null;
+  }
+  if (promptTheme.startsWith(PROMPT_THEME_PREFIX)) {
+    return promptTheme.slice(PROMPT_THEME_PREFIX.length);
+  }
+  return null;
+}
+
+function buildEffectiveTerminalConfig(
+  globalTerminalConfig: TerminalConfig | undefined,
+  projectTerminalConfig: Partial<TerminalConfig> | undefined
+): TerminalConfig {
+  const mergedEnvVars = {
+    ...(globalTerminalConfig?.customEnvVars ?? DEFAULT_CUSTOM_ENV_VARS),
+    ...(projectTerminalConfig?.customEnvVars ?? DEFAULT_CUSTOM_ENV_VARS),
+  };
+
+  return {
+    enabled: projectTerminalConfig?.enabled ?? globalTerminalConfig?.enabled ?? false,
+    customPrompt: globalTerminalConfig?.customPrompt ?? DEFAULT_CUSTOM_PROMPT,
+    promptFormat: globalTerminalConfig?.promptFormat ?? DEFAULT_PROMPT_FORMAT,
+    showGitBranch:
+      projectTerminalConfig?.showGitBranch ??
+      globalTerminalConfig?.showGitBranch ??
+      DEFAULT_SHOW_GIT_BRANCH,
+    showGitStatus:
+      projectTerminalConfig?.showGitStatus ??
+      globalTerminalConfig?.showGitStatus ??
+      DEFAULT_SHOW_GIT_STATUS,
+    showUserHost:
+      projectTerminalConfig?.showUserHost ??
+      globalTerminalConfig?.showUserHost ??
+      DEFAULT_SHOW_USER_HOST,
+    showPath:
+      projectTerminalConfig?.showPath ?? globalTerminalConfig?.showPath ?? DEFAULT_SHOW_PATH,
+    pathStyle: normalizePathStyle(
+      projectTerminalConfig?.pathStyle ?? globalTerminalConfig?.pathStyle
+    ),
+    pathDepth: normalizePathDepth(
+      projectTerminalConfig?.pathDepth ?? globalTerminalConfig?.pathDepth
+    ),
+    showTime:
+      projectTerminalConfig?.showTime ?? globalTerminalConfig?.showTime ?? DEFAULT_SHOW_TIME,
+    showExitStatus:
+      projectTerminalConfig?.showExitStatus ??
+      globalTerminalConfig?.showExitStatus ??
+      DEFAULT_SHOW_EXIT_STATUS,
+    customAliases:
+      projectTerminalConfig?.customAliases ??
+      globalTerminalConfig?.customAliases ??
+      DEFAULT_CUSTOM_ALIASES,
+    customEnvVars: mergedEnvVars,
+    rcFileVersion: globalTerminalConfig?.rcFileVersion,
+  };
+}
+
+export interface TerminalSession {
+  id: string;
+  pty: pty.IPty;
+  cwd: string;
+  createdAt: Date;
+  shell: string;
+  scrollbackBuffer: string; // Store recent output for replay on reconnect
+  outputBuffer: string; // Pending output to be flushed
+  flushTimeout: NodeJS.Timeout | null; // Throttle timer
+  resizeInProgress: boolean; // Flag to suppress scrollback during resize
+  resizeDebounceTimeout: NodeJS.Timeout | null; // Resize settle timer
+}
+
+export interface TerminalOptions {
+  cwd?: string;
+  shell?: string;
+  cols?: number;
+  rows?: number;
+  env?: Record<string, string>;
+}
+
+type DataCallback = (sessionId: string, data: string) => void;
+type ExitCallback = (sessionId: string, exitCode: number) => void;
+
+export class TerminalService extends EventEmitter {
+  private sessions: Map<string, TerminalSession> = new Map();
+  private dataCallbacks: Set<DataCallback> = new Set();
+  private exitCallbacks: Set<ExitCallback> = new Set();
+  private isWindows = os.platform() === 'win32';
+  // On Windows, ConPTY requires AttachConsole which fails in Electron/service mode
+  // Detect Electron by checking for electron-specific env vars or process properties
+  private isElectron =
+    !!(process.versions && (process.versions as Record<string, string>).electron) ||
+    !!process.env.ELECTRON_RUN_AS_NODE;
+  private useConptyFallback = false; // Track if we need to use winpty fallback on Windows
+  private settingsService: SettingsService | null = null;
+
+  constructor(settingsService?: SettingsService) {
+    super();
+    this.settingsService = settingsService || null;
+  }
+
+  /**
+   * Kill a PTY process with platform-specific handling.
+   * Windows doesn't support Unix signals like SIGTERM/SIGKILL, so we call kill() without arguments.
+   * On Unix-like systems (macOS, Linux), we can specify the signal.
+   *
+   * @param ptyProcess - The PTY process to kill
+   * @param signal - The signal to send on Unix-like systems (default: 'SIGTERM')
+   */
+  private killPtyProcess(ptyProcess: pty.IPty, signal: string = 'SIGTERM'): void {
+    if (this.isWindows) {
+      ptyProcess.kill();
+    } else {
+      ptyProcess.kill(signal);
+    }
+  }
+
+  /**
+   * Detect the best shell for the current platform
+   * Uses getShellPaths() to iterate through allowed shell paths
+   */
+  detectShell(): { shell: string; args: string[] } {
+    const platform = os.platform();
+    const shellPaths = getShellPaths();
+
+    // Check if running in WSL - prefer user's shell or bash with --login
+    if (platform === 'linux' && this.isWSL()) {
+      const userShell = process.env.SHELL;
+      if (userShell) {
+        // Try to find userShell in allowed paths
+        for (const allowedShell of shellPaths) {
+          if (
+            allowedShell === userShell ||
+            getShellBasename(allowedShell) === getShellBasename(userShell)
+          ) {
+            try {
+              if (systemPathExists(allowedShell)) {
+                return { shell: allowedShell, args: getShellArgsForPath(allowedShell) };
+              }
+            } catch {
+              // Path not allowed, continue searching
+            }
+          }
+        }
+      }
+      // Fall back to first available POSIX shell
+      for (const shell of shellPaths) {
+        try {
+          if (systemPathExists(shell)) {
+            return { shell, args: getShellArgsForPath(shell) };
+          }
+        } catch {
+          // Path not allowed, continue
+        }
+      }
+      return { shell: '/bin/bash', args: ['--login'] };
+    }
+
+    // For all platforms: first try user's shell if set
+    const userShell = process.env.SHELL;
+    if (userShell && platform !== 'win32') {
+      // Try to find userShell in allowed paths
+      for (const allowedShell of shellPaths) {
+        if (
+          allowedShell === userShell ||
+          getShellBasename(allowedShell) === getShellBasename(userShell)
+        ) {
+          try {
+            if (systemPathExists(allowedShell)) {
+              return { shell: allowedShell, args: getShellArgsForPath(allowedShell) };
+            }
+          } catch {
+            // Path not allowed, continue searching
+          }
+        }
+      }
+    }
+
+    // Iterate through allowed shell paths and return first existing one
+    for (const shell of shellPaths) {
+      try {
+        if (systemPathExists(shell)) {
+          return { shell, args: getShellArgsForPath(shell) };
+        }
+      } catch {
+        // Path not allowed or doesn't exist, continue to next
+      }
+    }
+
+    // Ultimate fallbacks based on platform
+    if (platform === 'win32') {
+      return { shell: 'cmd.exe', args: [] };
+    }
+    return { shell: '/bin/sh', args: [] };
+  }
+
+  /**
+   * Detect if running inside WSL (Windows Subsystem for Linux)
+   */
+  isWSL(): boolean {
+    try {
+      // Check /proc/version for Microsoft/WSL indicators
+      const wslVersionPath = getWslVersionPath();
+      if (systemPathExists(wslVersionPath)) {
+        const version = systemPathReadFileSync(wslVersionPath, 'utf-8').toLowerCase();
+        return version.includes('microsoft') || version.includes('wsl');
+      }
+      // Check for WSL environment variable
+      if (process.env.WSL_DISTRO_NAME || process.env.WSLENV) {
+        return true;
+      }
+    } catch {
+      // Ignore errors
+    }
+    return false;
+  }
+
+  /**
+   * Get platform info for the client
+   */
+  getPlatformInfo(): {
+    platform: string;
+    isWSL: boolean;
+    defaultShell: string;
+    arch: string;
+  } {
+    const { shell } = this.detectShell();
+    return {
+      platform: os.platform(),
+      isWSL: this.isWSL(),
+      defaultShell: shell,
+      arch: os.arch(),
+    };
+  }
+
+  /**
+   * Validate and resolve a working directory path
+   * Includes basic sanitization against null bytes and path normalization
+   * Uses secureFs to enforce ALLOWED_ROOT_DIRECTORY for user-provided paths
+   */
+  private async resolveWorkingDirectory(requestedCwd?: string): Promise<string> {
+    const homeDir = os.homedir();
+
+    // If no cwd requested, use home
+    if (!requestedCwd) {
+      return homeDir;
+    }
+
+    // Clean up the path
+    let cwd = requestedCwd.trim();
+
+    // Reject paths with null bytes (could bypass path checks)
+    if (cwd.includes('\0')) {
+      logger.warn(`Rejecting path with null byte: ${cwd.replace(/\0/g, '\\0')}`);
+      return homeDir;
+    }
+
+    // Fix double slashes at start (but not for Windows UNC paths)
+    if (cwd.startsWith('//') && !cwd.startsWith('//wsl')) {
+      cwd = cwd.slice(1);
+    }
+
+    // Normalize the path to resolve . and .. segments
+    // Skip normalization for WSL UNC paths as path.resolve would break them
+    if (!cwd.startsWith('//wsl')) {
+      cwd = path.resolve(cwd);
+    }
+
+    // Check if path exists and is a directory
+    // Using secureFs.stat to enforce ALLOWED_ROOT_DIRECTORY security boundary
+    // This prevents terminals from being opened in directories outside the allowed workspace
+    try {
+      const statResult = await secureFs.stat(cwd);
+      if (statResult.isDirectory()) {
+        return cwd;
+      }
+      logger.warn(`Path exists but is not a directory: ${cwd}, falling back to home`);
+      return homeDir;
+    } catch {
+      logger.warn(`Working directory does not exist or not allowed: ${cwd}, falling back to home`);
+      return homeDir;
+    }
+  }
+
+  /**
+   * Get current session count
+   */
+  getSessionCount(): number {
+    return this.sessions.size;
+  }
+
+  /**
+   * Get maximum allowed sessions
+   */
+  getMaxSessions(): number {
+    return maxSessions;
+  }
+
+  /**
+   * Set maximum allowed sessions (can be called dynamically)
+   */
+  setMaxSessions(limit: number): void {
+    if (limit >= MIN_MAX_SESSIONS && limit <= MAX_MAX_SESSIONS) {
+      maxSessions = limit;
+      logger.info(`Max sessions limit updated to ${limit}`);
+    }
+  }
+
+  /**
+   * Create a new terminal session
+   * Returns null if the maximum session limit has been reached
+   */
+  async createSession(options: TerminalOptions = {}): Promise<TerminalSession | null> {
+    // Check session limit
+    if (this.sessions.size >= maxSessions) {
+      logger.error(`Max sessions (${maxSessions}) reached, refusing new session`);
+      return null;
+    }
+
+    const id = `term-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+
+    const { shell: detectedShell, args: detectedShellArgs } = this.detectShell();
+    const shell = options.shell || detectedShell;
+    let shellArgs = options.shell ? getShellArgsForPath(shell) : [...detectedShellArgs];
+
+    // Validate and resolve working directory
+    // Uses secureFs internally to enforce ALLOWED_ROOT_DIRECTORY
+    const cwd = await this.resolveWorkingDirectory(options.cwd);
+
+    // Build environment with some useful defaults
+    // These settings ensure consistent terminal behavior across platforms
+    // First, create a clean copy of process.env excluding Automaker-specific variables
+    // that could pollute user shells (e.g., PORT would affect Next.js/other dev servers)
+    const automakerEnvVars = ['PORT', 'DATA_DIR', 'AUTOMAKER_API_KEY', 'NODE_PATH'];
+    const cleanEnv: Record<string, string> = {};
+    for (const [key, value] of Object.entries(process.env)) {
+      if (value !== undefined && !automakerEnvVars.includes(key)) {
+        cleanEnv[key] = value;
+      }
+    }
+
+    // Terminal config injection (custom prompts, themes)
+    const terminalConfigEnv: Record<string, string> = {};
+    if (this.settingsService) {
+      try {
+        logger.info(
+          `[createSession] Checking terminal config for session ${id}, cwd: ${options.cwd || cwd}`
+        );
+        const globalSettings = await this.settingsService.getGlobalSettings();
+        const projectSettings = options.cwd
+          ? await this.settingsService.getProjectSettings(options.cwd)
+          : null;
+
+        const globalTerminalConfig = globalSettings?.terminalConfig;
+        const projectTerminalConfig = projectSettings?.terminalConfig;
+        const effectiveConfig = buildEffectiveTerminalConfig(
+          globalTerminalConfig,
+          projectTerminalConfig
+        );
+
+        logger.info(
+          `[createSession] Terminal config: global.enabled=${globalTerminalConfig?.enabled}, project.enabled=${projectTerminalConfig?.enabled}`
+        );
+        logger.info(
+          `[createSession] Terminal config effective enabled: ${effectiveConfig.enabled}`
+        );
+
+        if (effectiveConfig.enabled && globalTerminalConfig) {
+          const currentTheme = globalSettings?.theme || 'dark';
+          const themeColors = getTerminalThemeColors(currentTheme);
+          const allThemes = getAllTerminalThemes();
+          const promptTheme =
+            projectTerminalConfig?.promptTheme ?? globalTerminalConfig.promptTheme;
+          const ompThemeName = resolveOmpThemeName(promptTheme);
+
+          // Ensure RC files are up to date
+          await ensureRcFilesUpToDate(
+            options.cwd || cwd,
+            currentTheme,
+            effectiveConfig,
+            themeColors,
+            allThemes
+          );
+
+          // Set shell-specific env vars
+          const shellName = getShellBasename(shell).toLowerCase();
+          if (ompThemeName && effectiveConfig.customPrompt) {
+            terminalConfigEnv[OMP_THEME_ENV_VAR] = ompThemeName;
+          }
+
+          if (shellName.includes(SHELL_NAME_BASH)) {
+            const bashRcFilePath = getRcFilePath(options.cwd || cwd, SHELL_NAME_BASH);
+            terminalConfigEnv.BASH_ENV = bashRcFilePath;
+            terminalConfigEnv.AUTOMAKER_CUSTOM_PROMPT = effectiveConfig.customPrompt
+              ? 'true'
+              : 'false';
+            terminalConfigEnv.AUTOMAKER_THEME = currentTheme;
+            shellArgs = applyBashRcFileArgs(shellArgs, bashRcFilePath);
+          } else if (shellName.includes(SHELL_NAME_ZSH)) {
+            terminalConfigEnv.ZDOTDIR = getTerminalDir(options.cwd || cwd);
+            terminalConfigEnv.AUTOMAKER_CUSTOM_PROMPT = effectiveConfig.customPrompt
+              ? 'true'
+              : 'false';
+            terminalConfigEnv.AUTOMAKER_THEME = currentTheme;
+          } else if (shellName === SHELL_NAME_SH) {
+            terminalConfigEnv.ENV = getRcFilePath(options.cwd || cwd, SHELL_NAME_SH);
+            terminalConfigEnv.AUTOMAKER_CUSTOM_PROMPT = effectiveConfig.customPrompt
+              ? 'true'
+              : 'false';
+            terminalConfigEnv.AUTOMAKER_THEME = currentTheme;
+          }
+
+          // Add custom env vars from config
+          Object.assign(terminalConfigEnv, effectiveConfig.customEnvVars);
+
+          logger.info(
+            `[createSession] Terminal config enabled for session ${id}, shell: ${shellName}`
+          );
+        }
+      } catch (error) {
+        logger.warn(`[createSession] Failed to apply terminal config: ${error}`);
+      }
+    }
+
+    const env: Record<string, string> = {
+      ...cleanEnv,
+      TERM: 'xterm-256color',
+      COLORTERM: 'truecolor',
+      TERM_PROGRAM: 'automaker-terminal',
+      // Ensure proper locale for character handling
+      LANG: process.env.LANG || 'en_US.UTF-8',
+      LC_ALL: process.env.LC_ALL || process.env.LANG || 'en_US.UTF-8',
+      ...options.env,
+      ...terminalConfigEnv, // Apply terminal config env vars last (highest priority)
+    };
+
+    logger.info(`Creating session ${id} with shell: ${shell} in ${cwd}`);
+
+    // Build PTY spawn options
+    const ptyOptions: pty.IPtyForkOptions = {
+      name: 'xterm-256color',
+      cols: options.cols || 80,
+      rows: options.rows || 24,
+      cwd,
+      env,
+    };
+
+    // On Windows, always use winpty instead of ConPTY
+    // ConPTY requires AttachConsole which fails in many contexts:
+    // - Electron apps without a console
+    // - VS Code integrated terminal
+    // - Spawned from other applications
+    // The error happens in a subprocess so we can't catch it - must proactively disable
+    if (this.isWindows) {
+      (ptyOptions as pty.IWindowsPtyForkOptions).useConpty = false;
+      logger.info(
+        `[createSession] Using winpty for session ${id} (ConPTY disabled for compatibility)`
+      );
+    }
+
+    let ptyProcess: pty.IPty;
+    try {
+      ptyProcess = pty.spawn(shell, shellArgs, ptyOptions);
+    } catch (spawnError) {
+      const errorMessage = spawnError instanceof Error ? spawnError.message : String(spawnError);
+
+      // Check for Windows ConPTY-specific errors
+      if (this.isWindows && errorMessage.includes('AttachConsole failed')) {
+        // ConPTY failed - try winpty fallback
+        if (!this.useConptyFallback) {
+          logger.warn(`[createSession] ConPTY AttachConsole failed, retrying with winpty fallback`);
+          this.useConptyFallback = true;
+
+          try {
+            (ptyOptions as pty.IWindowsPtyForkOptions).useConpty = false;
+            ptyProcess = pty.spawn(shell, shellArgs, ptyOptions);
+            logger.info(`[createSession] Successfully spawned session ${id} with winpty fallback`);
+          } catch (fallbackError) {
+            const fallbackMessage =
+              fallbackError instanceof Error ? fallbackError.message : String(fallbackError);
+            logger.error(`[createSession] Winpty fallback also failed:`, fallbackMessage);
+            return null;
+          }
+        } else {
+          logger.error(`[createSession] PTY spawn failed (winpty):`, errorMessage);
+          return null;
+        }
+      } else {
+        logger.error(`[createSession] PTY spawn failed:`, errorMessage);
+        return null;
+      }
+    }
+
+    const session: TerminalSession = {
+      id,
+      pty: ptyProcess,
+      cwd,
+      createdAt: new Date(),
+      shell,
+      scrollbackBuffer: '',
+      outputBuffer: '',
+      flushTimeout: null,
+      resizeInProgress: false,
+      resizeDebounceTimeout: null,
+    };
+
+    this.sessions.set(id, session);
+
+    // Flush buffered output to clients (throttled)
+    const flushOutput = () => {
+      if (session.outputBuffer.length === 0) return;
+
+      // Send in batches if buffer is large
+      let dataToSend = session.outputBuffer;
+      if (dataToSend.length > OUTPUT_BATCH_SIZE) {
+        dataToSend = session.outputBuffer.slice(0, OUTPUT_BATCH_SIZE);
+        session.outputBuffer = session.outputBuffer.slice(OUTPUT_BATCH_SIZE);
+        // Schedule another flush for remaining data
+        session.flushTimeout = setTimeout(flushOutput, OUTPUT_THROTTLE_MS);
+      } else {
+        session.outputBuffer = '';
+        session.flushTimeout = null;
+      }
+
+      this.dataCallbacks.forEach((cb) => cb(id, dataToSend));
+      this.emit('data', id, dataToSend);
+    };
+
+    // Forward data events with throttling
+    ptyProcess.onData((data) => {
+      // Skip ALL output during resize/reconnect to prevent prompt redraw duplication
+      // This drops both scrollback AND live output during the suppression window
+      // Without this, prompt redraws from SIGWINCH go to live clients causing duplicates
+      if (session.resizeInProgress) {
+        return;
+      }
+
+      // Append to scrollback buffer
+      session.scrollbackBuffer += data;
+      // Trim if too large (keep the most recent data)
+      if (session.scrollbackBuffer.length > MAX_SCROLLBACK_SIZE) {
+        session.scrollbackBuffer = session.scrollbackBuffer.slice(-MAX_SCROLLBACK_SIZE);
+      }
+
+      // Buffer output for throttled live delivery
+      session.outputBuffer += data;
+
+      // Schedule flush if not already scheduled
+      if (!session.flushTimeout) {
+        session.flushTimeout = setTimeout(flushOutput, OUTPUT_THROTTLE_MS);
+      }
+    });
+
+    // Handle exit
+    ptyProcess.onExit(({ exitCode }) => {
+      const exitMessage =
+        exitCode === undefined || exitCode === null
+          ? 'Session terminated'
+          : `Session exited with code ${exitCode}`;
+      logger.info(`${exitMessage} (${id})`);
+      this.sessions.delete(id);
+      this.exitCallbacks.forEach((cb) => cb(id, exitCode));
+      this.emit('exit', id, exitCode);
+    });
+
+    logger.info(`Session ${id} created successfully`);
+    return session;
+  }
+
+  /**
+   * Write data to a terminal session
+   */
+  write(sessionId: string, data: string): boolean {
+    const session = this.sessions.get(sessionId);
+    if (!session) {
+      logger.warn(`Session ${sessionId} not found`);
+      return false;
+    }
+    session.pty.write(data);
+    return true;
+  }
+
+  /**
+   * Resize a terminal session
+   * @param suppressOutput - If true, suppress output during resize to prevent duplicate prompts.
+   *                         Should be false for the initial resize so the first prompt isn't dropped.
+   */
+  resize(sessionId: string, cols: number, rows: number, suppressOutput: boolean = true): boolean {
+    const session = this.sessions.get(sessionId);
+    if (!session) {
+      logger.warn(`Session ${sessionId} not found for resize`);
+      return false;
+    }
+    try {
+      // Only suppress output on subsequent resizes, not the initial one
+      // This prevents the shell's first prompt from being dropped
+      if (suppressOutput) {
+        session.resizeInProgress = true;
+        if (session.resizeDebounceTimeout) {
+          clearTimeout(session.resizeDebounceTimeout);
+        }
+      }
+
+      session.pty.resize(cols, rows);
+
+      // Clear resize flag after a delay (allow prompt to settle)
+      // 150ms is enough for most prompts - longer causes sluggish feel
+      if (suppressOutput) {
+        session.resizeDebounceTimeout = setTimeout(() => {
+          session.resizeInProgress = false;
+          session.resizeDebounceTimeout = null;
+        }, 150);
+      }
+
+      return true;
+    } catch (error) {
+      logger.error(`Error resizing session ${sessionId}:`, error);
+      session.resizeInProgress = false; // Clear flag on error
+      return false;
+    }
+  }
+
+  /**
+   * Kill a terminal session
+   * Attempts graceful SIGTERM first, then SIGKILL after 1 second if still alive
+   */
+  killSession(sessionId: string): boolean {
+    const session = this.sessions.get(sessionId);
+    if (!session) {
+      return false;
+    }
+    try {
+      // Clean up flush timeout
+      if (session.flushTimeout) {
+        clearTimeout(session.flushTimeout);
+        session.flushTimeout = null;
+      }
+      // Clean up resize debounce timeout
+      if (session.resizeDebounceTimeout) {
+        clearTimeout(session.resizeDebounceTimeout);
+        session.resizeDebounceTimeout = null;
+      }
+
+      // First try graceful SIGTERM to allow process cleanup
+      // On Windows, killPtyProcess calls kill() without signal since Windows doesn't support Unix signals
+      logger.info(`Session ${sessionId} sending SIGTERM`);
+      this.killPtyProcess(session.pty, 'SIGTERM');
+
+      // Schedule SIGKILL fallback if process doesn't exit gracefully
+      // The onExit handler will remove session from map when it actually exits
+      setTimeout(() => {
+        if (this.sessions.has(sessionId)) {
+          logger.info(`Session ${sessionId} still alive after SIGTERM, sending SIGKILL`);
+          try {
+            this.killPtyProcess(session.pty, 'SIGKILL');
+          } catch {
+            // Process may have already exited
+          }
+          // Force remove from map if still present
+          this.sessions.delete(sessionId);
+        }
+      }, 1000);
+
+      logger.info(`Session ${sessionId} kill initiated`);
+      return true;
+    } catch (error) {
+      logger.error(`Error killing session ${sessionId}:`, error);
+      // Still try to remove from map even if kill fails
+      this.sessions.delete(sessionId);
+      return false;
+    }
+  }
+
+  /**
+   * Get a session by ID
+   */
+  getSession(sessionId: string): TerminalSession | undefined {
+    return this.sessions.get(sessionId);
+  }
+
+  /**
+   * Get scrollback buffer for a session (for replay on reconnect)
+   */
+  getScrollback(sessionId: string): string | null {
+    const session = this.sessions.get(sessionId);
+    return session?.scrollbackBuffer || null;
+  }
+
+  /**
+   * Get scrollback buffer and clear pending output buffer to prevent duplicates
+   * Call this when establishing a new WebSocket connection
+   * This prevents data that's already in scrollback from being sent again via data callback
+   */
+  getScrollbackAndClearPending(sessionId: string): string | null {
+    const session = this.sessions.get(sessionId);
+    if (!session) return null;
+
+    // Clear any pending output that hasn't been flushed yet
+    // This data is already in scrollbackBuffer
+    session.outputBuffer = '';
+    if (session.flushTimeout) {
+      clearTimeout(session.flushTimeout);
+      session.flushTimeout = null;
+    }
+
+    // NOTE: Don't set resizeInProgress here - it causes blank terminals
+    // if the shell hasn't output its prompt yet when WebSocket connects.
+    // The resize() method handles suppression during actual resize events.
+
+    return session.scrollbackBuffer || null;
+  }
+
+  /**
+   * Get all active sessions
+   */
+  getAllSessions(): Array<{
+    id: string;
+    cwd: string;
+    createdAt: Date;
+    shell: string;
+  }> {
+    return Array.from(this.sessions.values()).map((s) => ({
+      id: s.id,
+      cwd: s.cwd,
+      createdAt: s.createdAt,
+      shell: s.shell,
+    }));
+  }
+
+  /**
+   * Subscribe to data events
+   */
+  onData(callback: DataCallback): () => void {
+    this.dataCallbacks.add(callback);
+    return () => this.dataCallbacks.delete(callback);
+  }
+
+  /**
+   * Subscribe to exit events
+   */
+  onExit(callback: ExitCallback): () => void {
+    this.exitCallbacks.add(callback);
+    return () => this.exitCallbacks.delete(callback);
+  }
+
+  /**
+   * Handle theme change - regenerate RC files with new theme colors
+   */
+  async onThemeChange(projectPath: string, newTheme: string): Promise<void> {
+    if (!this.settingsService) {
+      logger.warn('[onThemeChange] SettingsService not available');
+      return;
+    }
+
+    try {
+      const globalSettings = await this.settingsService.getGlobalSettings();
+      const terminalConfig = globalSettings?.terminalConfig;
+      const projectSettings = await this.settingsService.getProjectSettings(projectPath);
+      const projectTerminalConfig = projectSettings?.terminalConfig;
+      const effectiveConfig = buildEffectiveTerminalConfig(terminalConfig, projectTerminalConfig);
+
+      if (effectiveConfig.enabled && terminalConfig) {
+        const themeColors = getTerminalThemeColors(
+          newTheme as import('@automaker/types').ThemeMode
+        );
+        const allThemes = getAllTerminalThemes();
+
+        // Regenerate RC files with new theme
+        await ensureRcFilesUpToDate(
+          projectPath,
+          newTheme as import('@automaker/types').ThemeMode,
+          effectiveConfig,
+          themeColors,
+          allThemes
+        );
+
+        logger.info(`[onThemeChange] Regenerated RC files for theme: ${newTheme}`);
+      }
+    } catch (error) {
+      logger.error(`[onThemeChange] Failed to regenerate RC files: ${error}`);
+    }
+  }
+
+  /**
+   * Clean up all sessions
+   */
+  cleanup(): void {
+    logger.info(`Cleaning up ${this.sessions.size} sessions`);
+    this.sessions.forEach((session, id) => {
+      try {
+        // Clean up flush timeout
+        if (session.flushTimeout) {
+          clearTimeout(session.flushTimeout);
+        }
+        // Use platform-specific kill to ensure proper termination on Windows
+        this.killPtyProcess(session.pty);
+      } catch {
+        // Ignore errors during cleanup
+      }
+      this.sessions.delete(id);
+    });
+  }
+}
+
+// Singleton instance
+let terminalService: TerminalService | null = null;
+
+export function getTerminalService(settingsService?: SettingsService): TerminalService {
+  if (!terminalService) {
+    terminalService = new TerminalService(settingsService);
+  }
+  return terminalService;
+}
diff --git a/temp_repo/apps/server/src/services/test-runner-service.ts b/temp_repo/apps/server/src/services/test-runner-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d55d7be61db3f69f315b86cfc1f0aba1704cbe5f
--- /dev/null
+++ b/temp_repo/apps/server/src/services/test-runner-service.ts
@@ -0,0 +1,682 @@
+/**
+ * Test Runner Service
+ *
+ * Manages test execution processes for git worktrees.
+ * Runs user-configured test commands with output streaming.
+ *
+ * Features:
+ * - Process management with graceful shutdown
+ * - Output buffering and throttling for WebSocket streaming
+ * - Support for running all tests or specific files
+ * - Cross-platform process cleanup (Windows/Unix)
+ */
+
+import { spawn, execSync, type ChildProcess } from 'child_process';
+import * as secureFs from '../lib/secure-fs.js';
+import { createLogger } from '@automaker/utils';
+import type { EventEmitter } from '../lib/events.js';
+
+const logger = createLogger('TestRunnerService');
+
+// Maximum scrollback buffer size (characters)
+const MAX_SCROLLBACK_SIZE = 50000; // ~50KB per test run
+
+// Throttle output to prevent overwhelming WebSocket under heavy load
+// Note: Too aggressive throttling (< 50ms) can cause memory issues and UI crashes
+// due to rapid React state updates and string concatenation overhead
+const OUTPUT_THROTTLE_MS = 100; // ~10fps - balances responsiveness with stability
+const OUTPUT_BATCH_SIZE = 8192; // Larger batch size to reduce event frequency
+
+/**
+ * Status of a test run
+ */
+export type TestRunStatus = 'pending' | 'running' | 'passed' | 'failed' | 'cancelled' | 'error';
+
+/**
+ * Information about an active test run session
+ */
+export interface TestRunSession {
+  /** Unique identifier for this test run */
+  id: string;
+  /** Path to the worktree where tests are running */
+  worktreePath: string;
+  /** The command being run */
+  command: string;
+  /** The spawned child process */
+  process: ChildProcess | null;
+  /** When the test run started */
+  startedAt: Date;
+  /** When the test run finished (if completed) */
+  finishedAt: Date | null;
+  /** Current status of the test run */
+  status: TestRunStatus;
+  /** Exit code from the process (if completed) */
+  exitCode: number | null;
+  /** Specific test file being run (optional) */
+  testFile?: string;
+  /** Scrollback buffer for log history (replay on reconnect) */
+  scrollbackBuffer: string;
+  /** Pending output to be flushed to subscribers */
+  outputBuffer: string;
+  /** Throttle timer for batching output */
+  flushTimeout: NodeJS.Timeout | null;
+  /** Flag to indicate session is stopping (prevents output after stop) */
+  stopping: boolean;
+}
+
+/**
+ * Result of a test run operation
+ */
+export interface TestRunResult {
+  success: boolean;
+  result?: {
+    sessionId: string;
+    worktreePath: string;
+    command: string;
+    status: TestRunStatus;
+    testFile?: string;
+    message: string;
+  };
+  error?: string;
+}
+
+/**
+ * Test Runner Service class
+ * Manages test execution processes across worktrees
+ */
+class TestRunnerService {
+  private sessions: Map<string, TestRunSession> = new Map();
+  private emitter: EventEmitter | null = null;
+
+  /**
+   * Set the event emitter for streaming log events
+   * Called during service initialization with the global event emitter
+   */
+  setEventEmitter(emitter: EventEmitter): void {
+    this.emitter = emitter;
+  }
+
+  /**
+   * Helper to check if a file exists using secureFs
+   */
+  private async fileExists(filePath: string): Promise<boolean> {
+    try {
+      await secureFs.access(filePath);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Append data to scrollback buffer with size limit enforcement
+   * Evicts oldest data when buffer exceeds MAX_SCROLLBACK_SIZE
+   */
+  private appendToScrollback(session: TestRunSession, data: string): void {
+    session.scrollbackBuffer += data;
+    if (session.scrollbackBuffer.length > MAX_SCROLLBACK_SIZE) {
+      session.scrollbackBuffer = session.scrollbackBuffer.slice(-MAX_SCROLLBACK_SIZE);
+    }
+  }
+
+  /**
+   * Flush buffered output to WebSocket subscribers
+   * Sends batched output to prevent overwhelming clients under heavy load
+   */
+  private flushOutput(session: TestRunSession): void {
+    // Skip flush if session is stopping or buffer is empty
+    if (session.stopping || session.outputBuffer.length === 0) {
+      session.flushTimeout = null;
+      return;
+    }
+
+    let dataToSend = session.outputBuffer;
+    if (dataToSend.length > OUTPUT_BATCH_SIZE) {
+      // Send in batches if buffer is large
+      dataToSend = session.outputBuffer.slice(0, OUTPUT_BATCH_SIZE);
+      session.outputBuffer = session.outputBuffer.slice(OUTPUT_BATCH_SIZE);
+      // Schedule another flush for remaining data
+      session.flushTimeout = setTimeout(() => this.flushOutput(session), OUTPUT_THROTTLE_MS);
+    } else {
+      session.outputBuffer = '';
+      session.flushTimeout = null;
+    }
+
+    // Emit output event for WebSocket streaming
+    if (this.emitter) {
+      this.emitter.emit('test-runner:output', {
+        sessionId: session.id,
+        worktreePath: session.worktreePath,
+        content: dataToSend,
+        timestamp: new Date().toISOString(),
+      });
+    }
+  }
+
+  /**
+   * Handle incoming stdout/stderr data from test process
+   * Buffers data for scrollback replay and schedules throttled emission
+   */
+  private handleProcessOutput(session: TestRunSession, data: Buffer): void {
+    // Skip output if session is stopping
+    if (session.stopping) {
+      return;
+    }
+
+    const content = data.toString();
+
+    // Append to scrollback buffer for replay on reconnect
+    this.appendToScrollback(session, content);
+
+    // Buffer output for throttled live delivery
+    session.outputBuffer += content;
+
+    // Schedule flush if not already scheduled
+    if (!session.flushTimeout) {
+      session.flushTimeout = setTimeout(() => this.flushOutput(session), OUTPUT_THROTTLE_MS);
+    }
+
+    // Also log for debugging (existing behavior)
+    logger.debug(`[${session.id}] ${content.trim()}`);
+  }
+
+  /**
+   * Kill any process running (platform-specific cleanup)
+   */
+  private killProcessTree(pid: number): void {
+    try {
+      if (process.platform === 'win32') {
+        // Windows: use taskkill to kill process tree
+        execSync(`taskkill /F /T /PID ${pid}`, { stdio: 'ignore' });
+      } else {
+        // Unix: kill the process group
+        try {
+          process.kill(-pid, 'SIGTERM');
+        } catch {
+          // Fallback to killing just the process
+          process.kill(pid, 'SIGTERM');
+        }
+      }
+    } catch (error) {
+      logger.debug(`Error killing process ${pid}:`, error);
+    }
+  }
+
+  /**
+   * Generate a unique session ID
+   */
+  private generateSessionId(): string {
+    return `test-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+  }
+
+  /**
+   * Sanitize a test file path to prevent command injection
+   * Allows only safe characters for file paths
+   */
+  private sanitizeTestFile(testFile: string): string {
+    // Remove any shell metacharacters and normalize path
+    // Allow only alphanumeric, dots, slashes, hyphens, underscores, colons (for Windows paths)
+    return testFile.replace(/[^a-zA-Z0-9.\\/_\-:]/g, '');
+  }
+
+  /**
+   * Start tests in a worktree using the provided command
+   *
+   * @param worktreePath - Path to the worktree where tests should run
+   * @param options - Configuration for the test run
+   * @returns TestRunResult with session info or error
+   */
+  async startTests(
+    worktreePath: string,
+    options: {
+      command: string;
+      testFile?: string;
+    }
+  ): Promise<TestRunResult> {
+    const { command, testFile } = options;
+
+    // Check if already running
+    const existingSession = this.getActiveSession(worktreePath);
+    if (existingSession) {
+      return {
+        success: false,
+        error: `Tests are already running for this worktree (session: ${existingSession.id})`,
+      };
+    }
+
+    // Verify the worktree exists
+    if (!(await this.fileExists(worktreePath))) {
+      return {
+        success: false,
+        error: `Worktree path does not exist: ${worktreePath}`,
+      };
+    }
+
+    if (!command) {
+      return {
+        success: false,
+        error: 'No test command provided',
+      };
+    }
+
+    // Build the final command (append test file if specified)
+    let finalCommand = command;
+    if (testFile) {
+      // Sanitize test file path to prevent command injection
+      const sanitizedFile = this.sanitizeTestFile(testFile);
+      // Append the test file to the command
+      // Most test runners support: command -- file or command file
+      finalCommand = `${command} -- ${sanitizedFile}`;
+    }
+
+    // Parse command into cmd and args (shell execution)
+    // We use shell: true to support complex commands like "npm run test:server"
+    logger.info(`Starting tests in ${worktreePath}`);
+    logger.info(`Command: ${finalCommand}`);
+
+    // Create session
+    const sessionId = this.generateSessionId();
+    const session: TestRunSession = {
+      id: sessionId,
+      worktreePath,
+      command: finalCommand,
+      process: null,
+      startedAt: new Date(),
+      finishedAt: null,
+      status: 'pending',
+      exitCode: null,
+      testFile,
+      scrollbackBuffer: '',
+      outputBuffer: '',
+      flushTimeout: null,
+      stopping: false,
+    };
+
+    // Spawn the test process using shell
+    const env = {
+      ...process.env,
+      FORCE_COLOR: '1',
+      COLORTERM: 'truecolor',
+      TERM: 'xterm-256color',
+      CI: 'true', // Helps some test runners format output better
+    };
+
+    const testProcess = spawn(finalCommand, [], {
+      cwd: worktreePath,
+      env,
+      shell: true,
+      stdio: ['ignore', 'pipe', 'pipe'],
+      detached: process.platform !== 'win32', // Use process groups on Unix for cleanup
+    });
+
+    session.process = testProcess;
+    session.status = 'running';
+
+    // Track if process failed early
+    const status = { error: null as string | null, exited: false };
+
+    // Helper to clean up resources and emit events
+    const cleanupAndFinish = (
+      exitCode: number | null,
+      finalStatus: TestRunStatus,
+      errorMessage?: string
+    ) => {
+      session.finishedAt = new Date();
+      session.exitCode = exitCode;
+      session.status = finalStatus;
+
+      if (session.flushTimeout) {
+        clearTimeout(session.flushTimeout);
+        session.flushTimeout = null;
+      }
+
+      // Flush any remaining output
+      if (session.outputBuffer.length > 0 && this.emitter && !session.stopping) {
+        this.emitter.emit('test-runner:output', {
+          sessionId: session.id,
+          worktreePath: session.worktreePath,
+          content: session.outputBuffer,
+          timestamp: new Date().toISOString(),
+        });
+        session.outputBuffer = '';
+      }
+
+      // Emit completed event
+      if (this.emitter && !session.stopping) {
+        this.emitter.emit('test-runner:completed', {
+          sessionId: session.id,
+          worktreePath: session.worktreePath,
+          command: session.command,
+          status: finalStatus,
+          exitCode,
+          error: errorMessage,
+          duration: session.finishedAt.getTime() - session.startedAt.getTime(),
+          timestamp: new Date().toISOString(),
+        });
+      }
+    };
+
+    // Capture stdout
+    if (testProcess.stdout) {
+      testProcess.stdout.on('data', (data: Buffer) => {
+        this.handleProcessOutput(session, data);
+      });
+    }
+
+    // Capture stderr
+    if (testProcess.stderr) {
+      testProcess.stderr.on('data', (data: Buffer) => {
+        this.handleProcessOutput(session, data);
+      });
+    }
+
+    testProcess.on('error', (error) => {
+      logger.error(`Process error for ${sessionId}:`, error);
+      status.error = error.message;
+      cleanupAndFinish(null, 'error', error.message);
+    });
+
+    testProcess.on('exit', (code) => {
+      logger.info(`Test process for ${worktreePath} exited with code ${code}`);
+      status.exited = true;
+
+      // Determine final status based on exit code
+      let finalStatus: TestRunStatus;
+      if (session.stopping) {
+        finalStatus = 'cancelled';
+      } else if (code === 0) {
+        finalStatus = 'passed';
+      } else {
+        finalStatus = 'failed';
+      }
+
+      cleanupAndFinish(code, finalStatus);
+    });
+
+    // Store session
+    this.sessions.set(sessionId, session);
+
+    // Wait a moment to see if the process fails immediately
+    await new Promise((resolve) => setTimeout(resolve, 200));
+
+    if (status.error) {
+      return {
+        success: false,
+        error: `Failed to start tests: ${status.error}`,
+      };
+    }
+
+    if (status.exited) {
+      // Process already exited - check if it was immediate failure
+      const exitedSession = this.sessions.get(sessionId);
+      if (exitedSession && exitedSession.status === 'error') {
+        return {
+          success: false,
+          error: `Test process exited immediately. Check output for details.`,
+        };
+      }
+    }
+
+    // Emit started event
+    if (this.emitter) {
+      this.emitter.emit('test-runner:started', {
+        sessionId,
+        worktreePath,
+        command: finalCommand,
+        testFile,
+        timestamp: new Date().toISOString(),
+      });
+    }
+
+    return {
+      success: true,
+      result: {
+        sessionId,
+        worktreePath,
+        command: finalCommand,
+        status: 'running',
+        testFile,
+        message: `Tests started: ${finalCommand}`,
+      },
+    };
+  }
+
+  /**
+   * Stop a running test session
+   *
+   * @param sessionId - The ID of the test session to stop
+   * @returns Result with success status and message
+   */
+  async stopTests(sessionId: string): Promise<{
+    success: boolean;
+    result?: { sessionId: string; message: string };
+    error?: string;
+  }> {
+    const session = this.sessions.get(sessionId);
+
+    if (!session) {
+      return {
+        success: false,
+        error: `Test session not found: ${sessionId}`,
+      };
+    }
+
+    if (session.status !== 'running') {
+      return {
+        success: true,
+        result: {
+          sessionId,
+          message: `Tests already finished (status: ${session.status})`,
+        },
+      };
+    }
+
+    logger.info(`Cancelling test session ${sessionId}`);
+
+    // Mark as stopping to prevent further output events
+    session.stopping = true;
+
+    // Clean up flush timeout
+    if (session.flushTimeout) {
+      clearTimeout(session.flushTimeout);
+      session.flushTimeout = null;
+    }
+
+    // Kill the process
+    if (session.process && !session.process.killed && session.process.pid) {
+      this.killProcessTree(session.process.pid);
+    }
+
+    session.status = 'cancelled';
+    session.finishedAt = new Date();
+
+    // Emit cancelled event
+    if (this.emitter) {
+      this.emitter.emit('test-runner:completed', {
+        sessionId,
+        worktreePath: session.worktreePath,
+        command: session.command,
+        status: 'cancelled',
+        exitCode: null,
+        duration: session.finishedAt.getTime() - session.startedAt.getTime(),
+        timestamp: new Date().toISOString(),
+      });
+    }
+
+    return {
+      success: true,
+      result: {
+        sessionId,
+        message: 'Test run cancelled',
+      },
+    };
+  }
+
+  /**
+   * Get the active test session for a worktree
+   */
+  getActiveSession(worktreePath: string): TestRunSession | undefined {
+    for (const session of this.sessions.values()) {
+      if (session.worktreePath === worktreePath && session.status === 'running') {
+        return session;
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Get a test session by ID
+   */
+  getSession(sessionId: string): TestRunSession | undefined {
+    return this.sessions.get(sessionId);
+  }
+
+  /**
+   * Get buffered output for a test session
+   */
+  getSessionOutput(sessionId: string): {
+    success: boolean;
+    result?: {
+      sessionId: string;
+      output: string;
+      status: TestRunStatus;
+      startedAt: string;
+      finishedAt: string | null;
+    };
+    error?: string;
+  } {
+    const session = this.sessions.get(sessionId);
+
+    if (!session) {
+      return {
+        success: false,
+        error: `Test session not found: ${sessionId}`,
+      };
+    }
+
+    return {
+      success: true,
+      result: {
+        sessionId,
+        output: session.scrollbackBuffer,
+        status: session.status,
+        startedAt: session.startedAt.toISOString(),
+        finishedAt: session.finishedAt?.toISOString() || null,
+      },
+    };
+  }
+
+  /**
+   * List all test sessions (optionally filter by worktree)
+   */
+  listSessions(worktreePath?: string): {
+    success: boolean;
+    result: {
+      sessions: Array<{
+        sessionId: string;
+        worktreePath: string;
+        command: string;
+        status: TestRunStatus;
+        testFile?: string;
+        startedAt: string;
+        finishedAt: string | null;
+        exitCode: number | null;
+      }>;
+    };
+  } {
+    let sessions = Array.from(this.sessions.values());
+
+    if (worktreePath) {
+      sessions = sessions.filter((s) => s.worktreePath === worktreePath);
+    }
+
+    return {
+      success: true,
+      result: {
+        sessions: sessions.map((s) => ({
+          sessionId: s.id,
+          worktreePath: s.worktreePath,
+          command: s.command,
+          status: s.status,
+          testFile: s.testFile,
+          startedAt: s.startedAt.toISOString(),
+          finishedAt: s.finishedAt?.toISOString() || null,
+          exitCode: s.exitCode,
+        })),
+      },
+    };
+  }
+
+  /**
+   * Check if a worktree has an active test run
+   */
+  isRunning(worktreePath: string): boolean {
+    return this.getActiveSession(worktreePath) !== undefined;
+  }
+
+  /**
+   * Clean up old completed sessions (keep only recent ones)
+   */
+  cleanupOldSessions(maxAgeMs: number = 30 * 60 * 1000): void {
+    const now = Date.now();
+    for (const [sessionId, session] of this.sessions.entries()) {
+      if (session.status !== 'running' && session.finishedAt) {
+        if (now - session.finishedAt.getTime() > maxAgeMs) {
+          this.sessions.delete(sessionId);
+          logger.debug(`Cleaned up old test session: ${sessionId}`);
+        }
+      }
+    }
+  }
+
+  /**
+   * Cancel all running test sessions (for cleanup)
+   */
+  async cancelAll(): Promise<void> {
+    logger.info(`Cancelling all ${this.sessions.size} test sessions`);
+
+    for (const session of this.sessions.values()) {
+      if (session.status === 'running') {
+        await this.stopTests(session.id);
+      }
+    }
+  }
+
+  /**
+   * Cleanup service resources
+   */
+  async cleanup(): Promise<void> {
+    await this.cancelAll();
+    this.sessions.clear();
+  }
+}
+
+// Singleton instance
+let testRunnerServiceInstance: TestRunnerService | null = null;
+
+export function getTestRunnerService(): TestRunnerService {
+  if (!testRunnerServiceInstance) {
+    testRunnerServiceInstance = new TestRunnerService();
+  }
+  return testRunnerServiceInstance;
+}
+
+// Cleanup on process exit
+process.on('SIGTERM', () => {
+  if (testRunnerServiceInstance) {
+    testRunnerServiceInstance.cleanup().catch((err) => {
+      logger.error('Cleanup failed on SIGTERM:', err);
+    });
+  }
+});
+
+process.on('SIGINT', () => {
+  if (testRunnerServiceInstance) {
+    testRunnerServiceInstance.cleanup().catch((err) => {
+      logger.error('Cleanup failed on SIGINT:', err);
+    });
+  }
+});
+
+// Export the class for testing purposes
+export { TestRunnerService };
diff --git a/temp_repo/apps/server/src/services/typed-event-bus.ts b/temp_repo/apps/server/src/services/typed-event-bus.ts
new file mode 100644
index 0000000000000000000000000000000000000000..09d1e9bc0dab05a8828a4b9476907fc84d32096c
--- /dev/null
+++ b/temp_repo/apps/server/src/services/typed-event-bus.ts
@@ -0,0 +1,112 @@
+/**
+ * TypedEventBus - Type-safe event emission wrapper for AutoModeService
+ *
+ * This class wraps the existing EventEmitter to provide type-safe event emission,
+ * specifically encapsulating the `emitAutoModeEvent` pattern used throughout AutoModeService.
+ *
+ * Key behavior:
+ * - emitAutoModeEvent wraps events in 'auto-mode:event' format for frontend consumption
+ * - Preserves all existing event emission patterns for backward compatibility
+ * - Frontend receives events in the exact same format as before (no breaking changes)
+ */
+
+import type { EventEmitter, EventType, EventCallback } from '../lib/events.js';
+
+/**
+ * Auto-mode event types that can be emitted through the TypedEventBus.
+ * These correspond to the event types expected by the frontend.
+ */
+export type AutoModeEventType =
+  | 'auto_mode_started'
+  | 'auto_mode_stopped'
+  | 'auto_mode_idle'
+  | 'auto_mode_error'
+  | 'auto_mode_paused_failures'
+  | 'auto_mode_feature_start'
+  | 'auto_mode_feature_complete'
+  | 'auto_mode_feature_resuming'
+  | 'auto_mode_progress'
+  | 'auto_mode_tool'
+  | 'auto_mode_task_started'
+  | 'auto_mode_task_complete'
+  | 'auto_mode_task_status'
+  | 'auto_mode_phase_complete'
+  | 'auto_mode_summary'
+  | 'auto_mode_resuming_features'
+  | 'planning_started'
+  | 'plan_approval_required'
+  | 'plan_approved'
+  | 'plan_auto_approved'
+  | 'plan_rejected'
+  | 'plan_revision_requested'
+  | 'plan_revision_warning'
+  | 'plan_spec_updated'
+  | 'pipeline_step_started'
+  | 'pipeline_step_complete'
+  | 'pipeline_test_failed'
+  | 'pipeline_merge_conflict'
+  | 'feature_status_changed'
+  | 'features_reconciled';
+
+/**
+ * TypedEventBus wraps an EventEmitter to provide type-safe event emission
+ * with the auto-mode event wrapping pattern.
+ */
+export class TypedEventBus {
+  private events: EventEmitter;
+
+  /**
+   * Create a TypedEventBus wrapping an existing EventEmitter.
+   * @param events - The underlying EventEmitter to wrap
+   */
+  constructor(events: EventEmitter) {
+    this.events = events;
+  }
+
+  /**
+   * Emit a raw event directly to subscribers.
+   * Use this for non-auto-mode events that don't need wrapping.
+   * @param type - The event type
+   * @param payload - The event payload
+   */
+  emit(type: EventType, payload: unknown): void {
+    this.events.emit(type, payload);
+  }
+
+  /**
+   * Emit an auto-mode event wrapped in the correct format for the client.
+   * All auto-mode events are sent as type "auto-mode:event" with the actual
+   * event type and data in the payload.
+   *
+   * This produces the exact same event format that the frontend expects:
+   * { type: eventType, ...data }
+   *
+   * @param eventType - The auto-mode event type (e.g., 'auto_mode_started')
+   * @param data - Additional data to include in the event payload
+   */
+  emitAutoModeEvent(eventType: AutoModeEventType, data: Record<string, unknown>): void {
+    // Wrap the event in auto-mode:event format expected by the client
+    this.events.emit('auto-mode:event', {
+      type: eventType,
+      ...data,
+    });
+  }
+
+  /**
+   * Subscribe to all events from the underlying emitter.
+   * @param callback - Function called with (type, payload) for each event
+   * @returns Unsubscribe function
+   */
+  subscribe(callback: EventCallback): () => void {
+    return this.events.subscribe(callback);
+  }
+
+  /**
+   * Get the underlying EventEmitter for cases where direct access is needed.
+   * Use sparingly - prefer the typed methods when possible.
+   * @returns The wrapped EventEmitter
+   */
+  getUnderlyingEmitter(): EventEmitter {
+    return this.events;
+  }
+}
diff --git a/temp_repo/apps/server/src/services/worktree-branch-service.ts b/temp_repo/apps/server/src/services/worktree-branch-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..21134212371c8693e7a842598db3d7b481762506
--- /dev/null
+++ b/temp_repo/apps/server/src/services/worktree-branch-service.ts
@@ -0,0 +1,406 @@
+/**
+ * WorktreeBranchService - Switch branch operations without HTTP
+ *
+ * Handles branch switching with automatic stash/reapply of local changes.
+ * If there are uncommitted changes, they are stashed before switching and
+ * reapplied after. If the stash pop results in merge conflicts, returns
+ * a special response so the UI can create a conflict resolution task.
+ *
+ * For remote branches (e.g., "origin/feature"), automatically creates a
+ * local tracking branch and checks it out.
+ *
+ * Fetches the latest remote refs before switching to ensure remote branch
+ * references are up-to-date for accurate detection and checkout.
+ *
+ * Extracted from the worktree switch-branch route to improve organization
+ * and testability. Follows the same pattern as pull-service.ts and
+ * rebase-service.ts.
+ */
+
+import { createLogger, getErrorMessage } from '@automaker/utils';
+import { execGitCommand } from '../lib/git.js';
+import type { EventEmitter } from '../lib/events.js';
+import { hasAnyChanges, stashChanges, popStash, localBranchExists } from './branch-utils.js';
+
+const logger = createLogger('WorktreeBranchService');
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface SwitchBranchResult {
+  success: boolean;
+  error?: string;
+  result?: {
+    previousBranch: string;
+    currentBranch: string;
+    message: string;
+    hasConflicts?: boolean;
+    stashedChanges?: boolean;
+  };
+  /** Set when checkout fails and stash pop produced conflicts during recovery */
+  stashPopConflicts?: boolean;
+  /** Human-readable message when stash pop conflicts occur during error recovery */
+  stashPopConflictMessage?: string;
+}
+
+// ============================================================================
+// Local Helpers
+// ============================================================================
+
+/** Timeout for git fetch operations (30 seconds) */
+const FETCH_TIMEOUT_MS = 30_000;
+
+/**
+ * Fetch latest from all remotes (silently, with timeout).
+ *
+ * A process-level timeout is enforced via an AbortController so that a
+ * slow or unresponsive remote does not block the branch-switch flow
+ * indefinitely.  Timeout errors are logged and treated as non-fatal
+ * (the same as network-unavailable errors) so the rest of the workflow
+ * continues normally.  This is called before the branch switch to
+ * ensure remote refs are up-to-date for branch detection and checkout.
+ */
+async function fetchRemotes(cwd: string): Promise<void> {
+  const controller = new AbortController();
+  const timerId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+
+  try {
+    await execGitCommand(['fetch', '--all', '--quiet'], cwd, undefined, controller);
+  } catch (error) {
+    if (controller.signal.aborted) {
+      // Fetch timed out - log and continue; callers should not be blocked by a slow remote
+      logger.warn(
+        `fetchRemotes timed out after ${FETCH_TIMEOUT_MS}ms - continuing without latest remote refs`
+      );
+    } else {
+      logger.warn(`fetchRemotes failed: ${getErrorMessage(error)} - continuing with local refs`);
+    }
+    // Non-fatal: continue with locally available refs regardless of failure type
+  } finally {
+    clearTimeout(timerId);
+  }
+}
+
+/**
+ * Parse a remote branch name like "origin/feature-branch" into its parts.
+ * Splits on the first slash so the remote is the segment before the first '/'
+ * and the branch is everything after it (preserving any subsequent slashes).
+ * For example, "origin/feature/my-branch" → { remote: "origin", branch: "feature/my-branch" }.
+ * Returns null if the input contains no slash.
+ */
+function parseRemoteBranch(branchName: string): { remote: string; branch: string } | null {
+  const firstSlash = branchName.indexOf('/');
+  if (firstSlash === -1) return null;
+  return {
+    remote: branchName.substring(0, firstSlash),
+    branch: branchName.substring(firstSlash + 1),
+  };
+}
+
+/**
+ * Check if a branch name refers to a remote branch
+ */
+async function isRemoteBranch(cwd: string, branchName: string): Promise<boolean> {
+  try {
+    const stdout = await execGitCommand(['branch', '-r', '--format=%(refname:short)'], cwd);
+    const remoteBranches = stdout
+      .trim()
+      .split('\n')
+      .map((b) => b.trim().replace(/^['"]|['"]$/g, ''))
+      .filter((b) => b);
+    return remoteBranches.includes(branchName);
+  } catch (err) {
+    logger.error('isRemoteBranch: failed to list remote branches — returning false', {
+      branchName,
+      cwd,
+      error: getErrorMessage(err),
+    });
+    return false;
+  }
+}
+
+// ============================================================================
+// Main Service Function
+// ============================================================================
+
+/**
+ * Perform a full branch switch workflow on the given worktree.
+ *
+ * The workflow:
+ * 1. Fetch latest from all remotes (ensures remote refs are up-to-date)
+ * 2. Get current branch name
+ * 3. Detect remote vs local branch and determine target
+ * 4. Return early if already on target branch
+ * 5. Validate branch existence
+ * 6. Stash local changes if any
+ * 7. Checkout the target branch
+ * 8. Reapply stashed changes (detect conflicts)
+ * 9. Handle error recovery (restore stash if checkout fails)
+ *
+ * @param worktreePath - Path to the git worktree
+ * @param branchName - Branch to switch to (can be local or remote like "origin/feature")
+ * @param events - Optional event emitter for lifecycle events
+ * @returns SwitchBranchResult with detailed status information
+ */
+export async function performSwitchBranch(
+  worktreePath: string,
+  branchName: string,
+  events?: EventEmitter
+): Promise<SwitchBranchResult> {
+  // Emit start event
+  events?.emit('switch:start', { worktreePath, branchName });
+
+  // 1. Fetch latest from all remotes before switching
+  //    This ensures remote branch refs are up-to-date so that isRemoteBranch()
+  //    can detect newly created remote branches and local tracking branches
+  //    are aware of upstream changes.
+  await fetchRemotes(worktreePath);
+
+  // 2. Get current branch
+  const currentBranchOutput = await execGitCommand(
+    ['rev-parse', '--abbrev-ref', 'HEAD'],
+    worktreePath
+  );
+  const previousBranch = currentBranchOutput.trim();
+
+  // 3. Determine the actual target branch name for checkout
+  let targetBranch = branchName;
+  let isRemote = false;
+
+  // Check if this is a remote branch (e.g., "origin/feature-branch")
+  let parsedRemote: { remote: string; branch: string } | null = null;
+  if (await isRemoteBranch(worktreePath, branchName)) {
+    isRemote = true;
+    parsedRemote = parseRemoteBranch(branchName);
+    if (parsedRemote) {
+      targetBranch = parsedRemote.branch;
+    } else {
+      events?.emit('switch:error', {
+        worktreePath,
+        branchName,
+        error: `Failed to parse remote branch name '${branchName}'`,
+      });
+      return {
+        success: false,
+        error: `Failed to parse remote branch name '${branchName}'`,
+      };
+    }
+  }
+
+  // 4. Return early if already on the target branch
+  if (previousBranch === targetBranch) {
+    events?.emit('switch:done', {
+      worktreePath,
+      previousBranch,
+      currentBranch: targetBranch,
+      alreadyOnBranch: true,
+    });
+    return {
+      success: true,
+      result: {
+        previousBranch,
+        currentBranch: targetBranch,
+        message: `Already on branch '${targetBranch}'`,
+      },
+    };
+  }
+
+  // 5. Check if target branch exists as a local branch
+  if (!isRemote) {
+    if (!(await localBranchExists(worktreePath, branchName))) {
+      events?.emit('switch:error', {
+        worktreePath,
+        branchName,
+        error: `Branch '${branchName}' does not exist`,
+      });
+      return {
+        success: false,
+        error: `Branch '${branchName}' does not exist`,
+      };
+    }
+  }
+
+  // 6. Stash local changes if any exist
+  const hadChanges = await hasAnyChanges(worktreePath, { excludeWorktreePaths: true });
+  let didStash = false;
+
+  if (hadChanges) {
+    events?.emit('switch:stash', {
+      worktreePath,
+      previousBranch,
+      targetBranch,
+      action: 'push',
+    });
+    const stashMessage = `automaker-branch-switch: ${previousBranch} → ${targetBranch}`;
+    try {
+      didStash = await stashChanges(worktreePath, stashMessage, true);
+    } catch (stashError) {
+      const stashErrorMsg = getErrorMessage(stashError);
+      events?.emit('switch:error', {
+        worktreePath,
+        branchName,
+        error: `Failed to stash local changes: ${stashErrorMsg}`,
+      });
+      return {
+        success: false,
+        error: `Failed to stash local changes before switching branches: ${stashErrorMsg}`,
+      };
+    }
+  }
+
+  try {
+    // 7. Switch to the target branch
+    events?.emit('switch:checkout', {
+      worktreePath,
+      targetBranch,
+      isRemote,
+      previousBranch,
+    });
+
+    if (isRemote) {
+      if (!parsedRemote) {
+        throw new Error(`Failed to parse remote branch name '${branchName}'`);
+      }
+      if (await localBranchExists(worktreePath, parsedRemote.branch)) {
+        // Local branch exists, just checkout
+        await execGitCommand(['checkout', parsedRemote.branch], worktreePath);
+      } else {
+        // Create local tracking branch from remote
+        await execGitCommand(['checkout', '-b', parsedRemote.branch, branchName], worktreePath);
+      }
+    } else {
+      await execGitCommand(['checkout', targetBranch], worktreePath);
+    }
+
+    // 8. Reapply stashed changes if we stashed earlier
+    let hasConflicts = false;
+    let conflictMessage = '';
+    let stashReapplied = false;
+
+    if (didStash) {
+      events?.emit('switch:pop', {
+        worktreePath,
+        targetBranch,
+        action: 'pop',
+      });
+
+      const popResult = await popStash(worktreePath);
+      hasConflicts = popResult.hasConflicts;
+      if (popResult.hasConflicts) {
+        conflictMessage = `Switched to branch '${targetBranch}' but merge conflicts occurred when reapplying your local changes. Please resolve the conflicts.`;
+      } else if (!popResult.success) {
+        // Stash pop failed for a non-conflict reason - the stash is still there
+        conflictMessage = `Switched to branch '${targetBranch}' but failed to reapply stashed changes: ${popResult.error}. Your changes are still in the stash.`;
+      } else {
+        stashReapplied = true;
+      }
+    }
+
+    if (hasConflicts) {
+      events?.emit('switch:done', {
+        worktreePath,
+        previousBranch,
+        currentBranch: targetBranch,
+        hasConflicts: true,
+      });
+      return {
+        success: true,
+        result: {
+          previousBranch,
+          currentBranch: targetBranch,
+          message: conflictMessage,
+          hasConflicts: true,
+          stashedChanges: true,
+        },
+      };
+    } else if (didStash && !stashReapplied) {
+      // Stash pop failed for a non-conflict reason — stash is still present
+      events?.emit('switch:done', {
+        worktreePath,
+        previousBranch,
+        currentBranch: targetBranch,
+        stashPopFailed: true,
+      });
+      return {
+        success: true,
+        result: {
+          previousBranch,
+          currentBranch: targetBranch,
+          message: conflictMessage,
+          hasConflicts: false,
+          stashedChanges: true,
+        },
+      };
+    } else {
+      const stashNote = stashReapplied ? ' (local changes stashed and reapplied)' : '';
+      events?.emit('switch:done', {
+        worktreePath,
+        previousBranch,
+        currentBranch: targetBranch,
+        stashReapplied,
+      });
+      return {
+        success: true,
+        result: {
+          previousBranch,
+          currentBranch: targetBranch,
+          message: `Switched to branch '${targetBranch}'${stashNote}`,
+          hasConflicts: false,
+          stashedChanges: stashReapplied,
+        },
+      };
+    }
+  } catch (checkoutError) {
+    // 9. Error recovery: if checkout failed and we stashed, try to restore the stash
+    if (didStash) {
+      const popResult = await popStash(worktreePath);
+      if (popResult.hasConflicts) {
+        // Stash pop itself produced merge conflicts — the working tree is now in a
+        // conflicted state even though the checkout failed. Surface this clearly so
+        // the caller can prompt the user (or AI) to resolve conflicts rather than
+        // simply retrying the branch switch.
+        const checkoutErrorMsg = getErrorMessage(checkoutError);
+        events?.emit('switch:error', {
+          worktreePath,
+          branchName,
+          error: checkoutErrorMsg,
+          stashPopConflicts: true,
+        });
+        return {
+          success: false,
+          error: checkoutErrorMsg,
+          stashPopConflicts: true,
+          stashPopConflictMessage:
+            'Stash pop resulted in conflicts: your stashed changes were partially reapplied ' +
+            'but produced merge conflicts. Please resolve the conflicts before retrying the branch switch.',
+        };
+      } else if (!popResult.success) {
+        // Stash pop failed for a non-conflict reason; the stash entry is still intact.
+        // Include this detail alongside the original checkout error.
+        const checkoutErrorMsg = getErrorMessage(checkoutError);
+        const combinedMessage =
+          `${checkoutErrorMsg}. Additionally, restoring your stashed changes failed: ` +
+          `${popResult.error ?? 'unknown error'} — your changes are still saved in the stash.`;
+        events?.emit('switch:error', {
+          worktreePath,
+          branchName,
+          error: combinedMessage,
+        });
+        return {
+          success: false,
+          error: combinedMessage,
+          stashPopConflicts: false,
+        };
+      }
+      // popResult.success === true: stash was cleanly restored, re-throw the checkout error
+    }
+    const checkoutErrorMsg = getErrorMessage(checkoutError);
+    events?.emit('switch:error', {
+      worktreePath,
+      branchName,
+      error: checkoutErrorMsg,
+    });
+    throw checkoutError;
+  }
+}
diff --git a/temp_repo/apps/server/src/services/worktree-resolver.ts b/temp_repo/apps/server/src/services/worktree-resolver.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4048d1e805675ab8db65a4d93b1df22b738e3153
--- /dev/null
+++ b/temp_repo/apps/server/src/services/worktree-resolver.ts
@@ -0,0 +1,185 @@
+/**
+ * WorktreeResolver - Git worktree discovery and resolution
+ *
+ * Extracted from AutoModeService to provide a standalone service for:
+ * - Finding existing worktrees for a given branch
+ * - Getting the current branch of a repository
+ * - Listing all worktrees with their metadata
+ *
+ * Key behaviors:
+ * - Parses `git worktree list --porcelain` output
+ * - Always resolves paths to absolute (cross-platform compatibility)
+ * - Handles detached HEAD and bare worktrees gracefully
+ */
+
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import path from 'path';
+
+const execAsync = promisify(exec);
+
+/**
+ * Information about a git worktree
+ */
+export interface WorktreeInfo {
+  /** Absolute path to the worktree directory */
+  path: string;
+  /** Branch name (without refs/heads/ prefix), or null if detached HEAD */
+  branch: string | null;
+  /** Whether this is the main worktree (first in git worktree list) */
+  isMain: boolean;
+}
+
+/**
+ * WorktreeResolver handles git worktree discovery and path resolution.
+ *
+ * This service is responsible for:
+ * 1. Finding existing worktrees by branch name
+ * 2. Getting the current branch of a repository
+ * 3. Listing all worktrees with normalized paths
+ */
+export class WorktreeResolver {
+  private normalizeBranchName(branchName: string | null | undefined): string | null {
+    if (!branchName) return null;
+    let normalized = branchName.trim();
+    if (!normalized) return null;
+
+    normalized = normalized.replace(/^refs\/heads\//, '');
+    normalized = normalized.replace(/^refs\/remotes\/[^/]+\//, '');
+    normalized = normalized.replace(/^(origin|upstream)\//, '');
+
+    return normalized || null;
+  }
+
+  /**
+   * Get the current branch name for a git repository
+   *
+   * @param projectPath - Path to the git repository
+   * @returns The current branch name, or null if not in a git repo or on detached HEAD
+   */
+  async getCurrentBranch(projectPath: string): Promise<string | null> {
+    try {
+      const { stdout } = await execAsync('git branch --show-current', { cwd: projectPath });
+      const branch = stdout.trim();
+      return branch || null;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Find an existing worktree for a given branch name
+   *
+   * @param projectPath - Path to the git repository (main worktree)
+   * @param branchName - Branch name to find worktree for
+   * @returns Absolute path to the worktree, or null if not found
+   */
+  async findWorktreeForBranch(projectPath: string, branchName: string): Promise<string | null> {
+    try {
+      const normalizedTargetBranch = this.normalizeBranchName(branchName);
+      if (!normalizedTargetBranch) return null;
+
+      const { stdout } = await execAsync('git worktree list --porcelain', {
+        cwd: projectPath,
+      });
+
+      const lines = stdout.split('\n');
+      let currentPath: string | null = null;
+      let currentBranch: string | null = null;
+
+      for (const line of lines) {
+        if (line.startsWith('worktree ')) {
+          currentPath = line.slice(9);
+        } else if (line.startsWith('branch ')) {
+          currentBranch = this.normalizeBranchName(line.slice(7));
+        } else if (line === '' && currentPath && currentBranch) {
+          // End of a worktree entry
+          if (currentBranch === normalizedTargetBranch) {
+            // Resolve to absolute path - git may return relative paths
+            // On Windows, this is critical for cwd to work correctly
+            // On all platforms, absolute paths ensure consistent behavior
+            return this.resolvePath(projectPath, currentPath);
+          }
+          currentPath = null;
+          currentBranch = null;
+        }
+      }
+
+      // Check the last entry (if file doesn't end with newline)
+      if (currentPath && currentBranch && currentBranch === normalizedTargetBranch) {
+        return this.resolvePath(projectPath, currentPath);
+      }
+
+      return null;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * List all worktrees for a repository
+   *
+   * @param projectPath - Path to the git repository
+   * @returns Array of WorktreeInfo objects with normalized paths
+   */
+  async listWorktrees(projectPath: string): Promise<WorktreeInfo[]> {
+    try {
+      const { stdout } = await execAsync('git worktree list --porcelain', {
+        cwd: projectPath,
+      });
+
+      const worktrees: WorktreeInfo[] = [];
+      const lines = stdout.split('\n');
+      let currentPath: string | null = null;
+      let currentBranch: string | null = null;
+      let isFirstWorktree = true;
+
+      for (const line of lines) {
+        if (line.startsWith('worktree ')) {
+          currentPath = line.slice(9);
+        } else if (line.startsWith('branch ')) {
+          currentBranch = this.normalizeBranchName(line.slice(7));
+        } else if (line.startsWith('detached')) {
+          // Detached HEAD - branch is null
+          currentBranch = null;
+        } else if (line === '' && currentPath) {
+          // End of a worktree entry
+          worktrees.push({
+            path: this.resolvePath(projectPath, currentPath),
+            branch: currentBranch,
+            isMain: isFirstWorktree,
+          });
+          currentPath = null;
+          currentBranch = null;
+          isFirstWorktree = false;
+        }
+      }
+
+      // Handle last entry if file doesn't end with newline
+      if (currentPath) {
+        worktrees.push({
+          path: this.resolvePath(projectPath, currentPath),
+          branch: currentBranch,
+          isMain: isFirstWorktree,
+        });
+      }
+
+      return worktrees;
+    } catch {
+      return [];
+    }
+  }
+
+  /**
+   * Resolve a path to absolute, handling both relative and absolute inputs
+   *
+   * @param projectPath - Base path for relative resolution
+   * @param worktreePath - Path from git worktree list output
+   * @returns Absolute path
+   */
+  private resolvePath(projectPath: string, worktreePath: string): string {
+    return path.isAbsolute(worktreePath)
+      ? path.resolve(worktreePath)
+      : path.resolve(projectPath, worktreePath);
+  }
+}
diff --git a/temp_repo/apps/server/src/services/worktree-service.ts b/temp_repo/apps/server/src/services/worktree-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0cb7a2516e83fc13ba78192712aa9c42d999189d
--- /dev/null
+++ b/temp_repo/apps/server/src/services/worktree-service.ts
@@ -0,0 +1,178 @@
+/**
+ * WorktreeService - File-system operations for git worktrees
+ *
+ * Extracted from the worktree create route to centralise file-copy logic,
+ * surface errors through an EventEmitter instead of swallowing them, and
+ * make the behaviour testable in isolation.
+ */
+
+import path from 'path';
+import fs from 'fs/promises';
+import { execGitCommand } from '@automaker/git-utils';
+import type { EventEmitter } from '../lib/events.js';
+import type { SettingsService } from './settings-service.js';
+
+/**
+ * Get the list of remote names that have a branch matching the given branch name.
+ *
+ * Uses `git for-each-ref` to check cached remote refs, returning the names of
+ * any remotes that already have a branch with the same name as `currentBranch`.
+ * Returns an empty array when `hasAnyRemotes` is false or when no matching
+ * remote refs are found.
+ *
+ * This helps the UI distinguish between "branch exists on the tracking remote"
+ * vs "branch was pushed to a different remote".
+ *
+ * @param worktreePath  - Path to the git worktree
+ * @param currentBranch - Branch name to search for on remotes
+ * @param hasAnyRemotes - Whether the repository has any remotes configured
+ * @returns Array of remote names (e.g. ["origin", "upstream"]) that contain the branch
+ */
+export async function getRemotesWithBranch(
+  worktreePath: string,
+  currentBranch: string,
+  hasAnyRemotes: boolean
+): Promise<string[]> {
+  if (!hasAnyRemotes) {
+    return [];
+  }
+
+  try {
+    const remoteRefsOutput = await execGitCommand(
+      ['for-each-ref', '--format=%(refname:short)', `refs/remotes/*/${currentBranch}`],
+      worktreePath
+    );
+
+    if (!remoteRefsOutput.trim()) {
+      return [];
+    }
+
+    return remoteRefsOutput
+      .trim()
+      .split('\n')
+      .map((ref) => {
+        // Extract remote name from "remote/branch" format
+        const slashIdx = ref.indexOf('/');
+        return slashIdx !== -1 ? ref.slice(0, slashIdx) : ref;
+      })
+      .filter((name) => name.length > 0);
+  } catch {
+    // Ignore errors - return empty array
+    return [];
+  }
+}
+
+/**
+ * Error thrown when one or more file copy operations fail during
+ * `copyConfiguredFiles`.  The caller can inspect `failures` for details.
+ */
+export class CopyFilesError extends Error {
+  constructor(public readonly failures: Array<{ path: string; error: string }>) {
+    super(`Failed to copy ${failures.length} file(s): ${failures.map((f) => f.path).join(', ')}`);
+    this.name = 'CopyFilesError';
+  }
+}
+
+/**
+ * WorktreeService encapsulates file-system operations that run against
+ * git worktrees (e.g. copying project-configured files into a new worktree).
+ *
+ * All operations emit typed events so the frontend can stream progress to the
+ * user.  Errors are collected and surfaced to the caller rather than silently
+ * swallowed.
+ */
+export class WorktreeService {
+  /**
+   * Copy files / directories listed in the project's `worktreeCopyFiles`
+   * setting from `projectPath` into `worktreePath`.
+   *
+   * Security: paths containing `..` segments or absolute paths are rejected.
+   *
+   * Events emitted via `emitter`:
+   * - `worktree:copy-files:copied`  – a file or directory was successfully copied
+   * - `worktree:copy-files:skipped` – a source file was not found (ENOENT)
+   * - `worktree:copy-files:failed`  – an unexpected error occurred copying a file
+   *
+   * @throws {CopyFilesError} if any copy operation fails for a reason other
+   *   than ENOENT (missing source file).
+   */
+  async copyConfiguredFiles(
+    projectPath: string,
+    worktreePath: string,
+    settingsService: SettingsService | undefined,
+    emitter: EventEmitter
+  ): Promise<void> {
+    if (!settingsService) return;
+
+    const projectSettings = await settingsService.getProjectSettings(projectPath);
+    const copyFiles = projectSettings.worktreeCopyFiles;
+
+    if (!copyFiles || copyFiles.length === 0) return;
+
+    const failures: Array<{ path: string; error: string }> = [];
+
+    for (const relativePath of copyFiles) {
+      // Security: prevent path traversal
+      const normalized = path.normalize(relativePath);
+      if (normalized === '' || normalized === '.') {
+        const reason = 'Suspicious path rejected (empty or current-dir)';
+        emitter.emit('worktree:copy-files:skipped', {
+          path: relativePath,
+          reason,
+        });
+        continue;
+      }
+      if (normalized.startsWith('..') || path.isAbsolute(normalized)) {
+        const reason = 'Suspicious path rejected (traversal or absolute)';
+        emitter.emit('worktree:copy-files:skipped', {
+          path: relativePath,
+          reason,
+        });
+        continue;
+      }
+
+      const sourcePath = path.join(projectPath, normalized);
+      const destPath = path.join(worktreePath, normalized);
+
+      try {
+        // Check if source exists
+        const stat = await fs.stat(sourcePath);
+
+        // Ensure destination directory exists
+        const destDir = path.dirname(destPath);
+        await fs.mkdir(destDir, { recursive: true });
+
+        if (stat.isDirectory()) {
+          // Recursively copy directory
+          await fs.cp(sourcePath, destPath, { recursive: true, force: true });
+        } else {
+          // Copy single file
+          await fs.copyFile(sourcePath, destPath);
+        }
+
+        emitter.emit('worktree:copy-files:copied', {
+          path: normalized,
+          type: stat.isDirectory() ? 'directory' : 'file',
+        });
+      } catch (err) {
+        if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+          emitter.emit('worktree:copy-files:skipped', {
+            path: normalized,
+            reason: 'File not found in project root',
+          });
+        } else {
+          const errorMessage = err instanceof Error ? err.message : String(err);
+          emitter.emit('worktree:copy-files:failed', {
+            path: normalized,
+            error: errorMessage,
+          });
+          failures.push({ path: normalized, error: errorMessage });
+        }
+      }
+    }
+
+    if (failures.length > 0) {
+      throw new CopyFilesError(failures);
+    }
+  }
+}
diff --git a/temp_repo/apps/server/src/services/zai-usage-service.ts b/temp_repo/apps/server/src/services/zai-usage-service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a9d4dd865ad4c85df5a9e73db9b0edfa7df1d90
--- /dev/null
+++ b/temp_repo/apps/server/src/services/zai-usage-service.ts
@@ -0,0 +1,582 @@
+import { createLogger } from '@automaker/utils';
+import { createEventEmitter } from '../lib/events.js';
+import type { SettingsService } from './settings-service.js';
+
+const logger = createLogger('ZaiUsage');
+
+/** Default timeout for fetch requests in milliseconds */
+const FETCH_TIMEOUT_MS = 10_000;
+
+/**
+ * z.ai quota limit entry from the API
+ */
+export interface ZaiQuotaLimit {
+  limitType: 'TOKENS_LIMIT' | 'TIME_LIMIT' | string;
+  limit: number;
+  used: number;
+  remaining: number;
+  usedPercent: number;
+  nextResetTime: number; // epoch milliseconds
+}
+
+/**
+ * z.ai usage details by model (for MCP tracking)
+ */
+export interface ZaiUsageDetail {
+  modelId: string;
+  used: number;
+  limit: number;
+}
+
+/**
+ * z.ai plan types
+ */
+export type ZaiPlanType = 'free' | 'basic' | 'standard' | 'professional' | 'enterprise' | 'unknown';
+
+/**
+ * z.ai usage data structure
+ */
+export interface ZaiUsageData {
+  quotaLimits: {
+    tokens?: ZaiQuotaLimit;
+    mcp?: ZaiQuotaLimit;
+    planType: ZaiPlanType;
+  } | null;
+  usageDetails?: ZaiUsageDetail[];
+  lastUpdated: string;
+}
+
+/**
+ * z.ai API limit entry - supports multiple field naming conventions
+ */
+interface ZaiApiLimit {
+  // Type field (z.ai uses 'type', others might use 'limitType')
+  type?: string;
+  limitType?: string;
+  // Limit value (z.ai uses 'usage' for total limit, others might use 'limit')
+  usage?: number;
+  limit?: number;
+  // Used value (z.ai uses 'currentValue', others might use 'used')
+  currentValue?: number;
+  used?: number;
+  // Remaining
+  remaining?: number;
+  // Percentage (z.ai uses 'percentage', others might use 'usedPercent')
+  percentage?: number;
+  usedPercent?: number;
+  // Reset time
+  nextResetTime?: number;
+  // Additional z.ai fields
+  unit?: number;
+  number?: number;
+  usageDetails?: Array<{ modelCode: string; usage: number }>;
+}
+
+/**
+ * z.ai API response structure
+ * Flexible to handle various possible response formats
+ */
+interface ZaiApiResponse {
+  code?: number;
+  success?: boolean;
+  data?: {
+    limits?: ZaiApiLimit[];
+    // Alternative: limits might be an object instead of array
+    tokensLimit?: {
+      limit: number;
+      used: number;
+      remaining?: number;
+      usedPercent?: number;
+      nextResetTime?: number;
+    };
+    timeLimit?: {
+      limit: number;
+      used: number;
+      remaining?: number;
+      usedPercent?: number;
+      nextResetTime?: number;
+    };
+    // Quota-style fields
+    quota?: number;
+    quotaUsed?: number;
+    quotaRemaining?: number;
+    planName?: string;
+    plan?: string;
+    plan_type?: string;
+    packageName?: string;
+    usageDetails?: Array<{
+      modelId: string;
+      used: number;
+      limit: number;
+    }>;
+  };
+  // Root-level alternatives
+  limits?: ZaiApiLimit[];
+  quota?: number;
+  quotaUsed?: number;
+  message?: string;
+}
+
+/** Result from configure method */
+interface ConfigureResult {
+  success: boolean;
+  message: string;
+  isAvailable: boolean;
+}
+
+/** Result from verifyApiKey method */
+interface VerifyResult {
+  success: boolean;
+  authenticated: boolean;
+  message?: string;
+  error?: string;
+}
+
+/**
+ * z.ai Usage Service
+ *
+ * Fetches usage quota data from the z.ai API.
+ * Uses API token authentication stored via environment variable or settings.
+ */
+export class ZaiUsageService {
+  private apiToken: string | null = null;
+  private apiHost: string = 'https://api.z.ai';
+
+  /**
+   * Set the API token for authentication
+   */
+  setApiToken(token: string): void {
+    this.apiToken = token;
+    logger.info('[setApiToken] API token configured');
+  }
+
+  /**
+   * Get the current API token
+   */
+  getApiToken(): string | null {
+    // Priority: 1. Instance token, 2. Environment variable
+    return this.apiToken || process.env.Z_AI_API_KEY || null;
+  }
+
+  /**
+   * Set the API host (for BigModel CN region support)
+   */
+  setApiHost(host: string): void {
+    this.apiHost = host.startsWith('http') ? host : `https://${host}`;
+    logger.info(`[setApiHost] API host set to: ${this.apiHost}`);
+  }
+
+  /**
+   * Get the API host
+   */
+  getApiHost(): string {
+    // Priority: 1. Instance host, 2. Z_AI_API_HOST env, 3. Default
+    if (process.env.Z_AI_API_HOST) {
+      const envHost = process.env.Z_AI_API_HOST.trim();
+      return envHost.startsWith('http') ? envHost : `https://${envHost}`;
+    }
+    return this.apiHost;
+  }
+
+  /**
+   * Check if z.ai API is available (has token configured)
+   */
+  isAvailable(): boolean {
+    const token = this.getApiToken();
+    return Boolean(token && token.length > 0);
+  }
+
+  /**
+   * Configure z.ai API token and host.
+   * Persists the token via settingsService and updates in-memory state.
+   */
+  async configure(
+    options: { apiToken?: string; apiHost?: string },
+    settingsService: SettingsService
+  ): Promise<ConfigureResult> {
+    const emitter = createEventEmitter();
+
+    if (options.apiToken !== undefined) {
+      // Set in-memory token
+      this.setApiToken(options.apiToken || '');
+
+      // Persist to credentials
+      try {
+        await settingsService.updateCredentials({
+          apiKeys: { zai: options.apiToken || '' },
+        } as Parameters<typeof settingsService.updateCredentials>[0]);
+        logger.info('[configure] Saved z.ai API key to credentials');
+      } catch (persistError) {
+        logger.error('[configure] Failed to persist z.ai API key:', persistError);
+      }
+    }
+
+    if (options.apiHost) {
+      this.setApiHost(options.apiHost);
+    }
+
+    const result: ConfigureResult = {
+      success: true,
+      message: 'z.ai configuration updated',
+      isAvailable: this.isAvailable(),
+    };
+
+    emitter.emit('notification:created', {
+      type: 'zai.configured',
+      success: result.success,
+      isAvailable: result.isAvailable,
+    });
+
+    return result;
+  }
+
+  /**
+   * Verify an API key without storing it.
+   * Makes a test request to the z.ai quota URL with the given key.
+   */
+  async verifyApiKey(apiKey: string | undefined): Promise<VerifyResult> {
+    const emitter = createEventEmitter();
+
+    if (!apiKey || typeof apiKey !== 'string' || apiKey.trim().length === 0) {
+      return {
+        success: false,
+        authenticated: false,
+        error: 'Please provide an API key to test.',
+      };
+    }
+
+    const quotaUrl =
+      process.env.Z_AI_QUOTA_URL || `${this.getApiHost()}/api/monitor/usage/quota/limit`;
+
+    logger.info(`[verify] Testing API key against: ${quotaUrl}`);
+
+    try {
+      const response = await fetch(quotaUrl, {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${apiKey.trim()}`,
+          Accept: 'application/json',
+        },
+        signal: AbortSignal.timeout(FETCH_TIMEOUT_MS),
+      });
+
+      let result: VerifyResult;
+
+      if (response.ok) {
+        result = {
+          success: true,
+          authenticated: true,
+          message: 'Connection successful! z.ai API responded.',
+        };
+      } else if (response.status === 401 || response.status === 403) {
+        result = {
+          success: false,
+          authenticated: false,
+          error: 'Invalid API key. Please check your key and try again.',
+        };
+      } else {
+        result = {
+          success: false,
+          authenticated: false,
+          error: `API request failed: ${response.status} ${response.statusText}`,
+        };
+      }
+
+      emitter.emit('notification:created', {
+        type: 'zai.verify.result',
+        success: result.success,
+        authenticated: result.authenticated,
+      });
+
+      return result;
+    } catch (error) {
+      // Handle abort/timeout errors specifically
+      if (error instanceof Error && error.name === 'AbortError') {
+        const result: VerifyResult = {
+          success: false,
+          authenticated: false,
+          error: 'Request timed out. The z.ai API did not respond in time.',
+        };
+        emitter.emit('notification:created', {
+          type: 'zai.verify.result',
+          success: false,
+          error: 'timeout',
+        });
+        return result;
+      }
+
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      logger.error('Error verifying z.ai API key:', error);
+
+      emitter.emit('notification:created', {
+        type: 'zai.verify.result',
+        success: false,
+        error: message,
+      });
+
+      return {
+        success: false,
+        authenticated: false,
+        error: `Network error: ${message}`,
+      };
+    }
+  }
+
+  /**
+   * Fetch usage data from z.ai API
+   */
+  async fetchUsageData(): Promise<ZaiUsageData> {
+    logger.info('[fetchUsageData] Starting...');
+    const emitter = createEventEmitter();
+
+    emitter.emit('notification:created', { type: 'zai.usage.start' });
+
+    const token = this.getApiToken();
+    if (!token) {
+      logger.error('[fetchUsageData] No API token configured');
+      const error = new Error(
+        'z.ai API token not configured. Set Z_AI_API_KEY environment variable.'
+      );
+      emitter.emit('notification:created', {
+        type: 'zai.usage.error',
+        error: error.message,
+      });
+      throw error;
+    }
+
+    const quotaUrl =
+      process.env.Z_AI_QUOTA_URL || `${this.getApiHost()}/api/monitor/usage/quota/limit`;
+
+    logger.info(`[fetchUsageData] Fetching from: ${quotaUrl}`);
+
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+
+      try {
+        const response = await fetch(quotaUrl, {
+          method: 'GET',
+          headers: {
+            Authorization: `Bearer ${token}`,
+            Accept: 'application/json',
+          },
+          signal: controller.signal,
+        });
+
+        clearTimeout(timeoutId);
+
+        if (!response.ok) {
+          logger.error(`[fetchUsageData] HTTP ${response.status}: ${response.statusText}`);
+          throw new Error(`z.ai API request failed: ${response.status} ${response.statusText}`);
+        }
+
+        const data = (await response.json()) as unknown as ZaiApiResponse;
+        logger.info('[fetchUsageData] Response received:', JSON.stringify(data, null, 2));
+
+        const result = this.parseApiResponse(data);
+
+        emitter.emit('notification:created', {
+          type: 'zai.usage.success',
+          data: result,
+        });
+
+        return result;
+      } finally {
+        clearTimeout(timeoutId);
+      }
+    } catch (error) {
+      // Handle abort/timeout errors
+      if (error instanceof Error && error.name === 'AbortError') {
+        const timeoutError = new Error(`z.ai API request timed out after ${FETCH_TIMEOUT_MS}ms`);
+        emitter.emit('notification:created', {
+          type: 'zai.usage.error',
+          error: timeoutError.message,
+        });
+        throw timeoutError;
+      }
+
+      if (error instanceof Error && error.message.includes('z.ai API')) {
+        emitter.emit('notification:created', {
+          type: 'zai.usage.error',
+          error: error.message,
+        });
+        throw error;
+      }
+
+      logger.error('[fetchUsageData] Failed to fetch:', error);
+      const fetchError = new Error(
+        `Failed to fetch z.ai usage data: ${error instanceof Error ? error.message : String(error)}`
+      );
+      emitter.emit('notification:created', {
+        type: 'zai.usage.error',
+        error: fetchError.message,
+      });
+      throw fetchError;
+    }
+  }
+
+  /**
+   * Parse the z.ai API response into our data structure
+   * Handles multiple possible response formats from z.ai API
+   */
+  private parseApiResponse(response: ZaiApiResponse): ZaiUsageData {
+    const result: ZaiUsageData = {
+      quotaLimits: {
+        planType: 'unknown',
+      },
+      lastUpdated: new Date().toISOString(),
+    };
+
+    logger.info('[parseApiResponse] Raw response:', JSON.stringify(response, null, 2));
+
+    // Try to find data - could be in response.data or at root level
+    let data = response.data;
+
+    // Check for root-level limits array
+    if (!data && response.limits) {
+      logger.info('[parseApiResponse] Found limits at root level');
+      data = { limits: response.limits };
+    }
+
+    // Check for root-level quota fields
+    if (!data && (response.quota !== undefined || response.quotaUsed !== undefined)) {
+      logger.info('[parseApiResponse] Found quota fields at root level');
+      data = { quota: response.quota, quotaUsed: response.quotaUsed };
+    }
+
+    if (!data) {
+      logger.warn('[parseApiResponse] No data found in response');
+      return result;
+    }
+
+    logger.info('[parseApiResponse] Data keys:', Object.keys(data));
+
+    // Parse plan type from various possible field names
+    const planName = data.planName || data.plan || data.plan_type || data.packageName;
+
+    if (planName) {
+      const normalizedPlan = String(planName).toLowerCase();
+      if (['free', 'basic', 'standard', 'professional', 'enterprise'].includes(normalizedPlan)) {
+        result.quotaLimits!.planType = normalizedPlan as ZaiPlanType;
+      }
+      logger.info(`[parseApiResponse] Plan type: ${result.quotaLimits!.planType}`);
+    }
+
+    // Parse quota limits from array format
+    if (data.limits && Array.isArray(data.limits)) {
+      logger.info('[parseApiResponse] Parsing limits array with', data.limits.length, 'entries');
+      for (const limit of data.limits) {
+        logger.info('[parseApiResponse] Processing limit:', JSON.stringify(limit));
+
+        // Handle different field naming conventions from z.ai API:
+        // - 'usage' is the total limit, 'currentValue' is the used amount
+        // - OR 'limit' is the total limit, 'used' is the used amount
+        const limitVal = limit.usage ?? limit.limit ?? 0;
+        const usedVal = limit.currentValue ?? limit.used ?? 0;
+
+        // Get percentage from 'percentage' or 'usedPercent' field, or calculate it
+        const apiPercent = limit.percentage ?? limit.usedPercent;
+        const calculatedPercent = limitVal > 0 ? (usedVal / limitVal) * 100 : 0;
+        const usedPercent =
+          apiPercent !== undefined && apiPercent > 0 ? apiPercent : calculatedPercent;
+
+        // Get limit type from 'type' or 'limitType' field
+        const rawLimitType = limit.type ?? limit.limitType ?? '';
+
+        const quotaLimit: ZaiQuotaLimit = {
+          limitType: rawLimitType || 'TOKENS_LIMIT',
+          limit: limitVal,
+          used: usedVal,
+          remaining: limit.remaining ?? limitVal - usedVal,
+          usedPercent,
+          nextResetTime: limit.nextResetTime ?? 0,
+        };
+
+        // Match various possible limitType values
+        const limitType = String(rawLimitType).toUpperCase();
+        if (limitType.includes('TOKEN') || limitType === 'TOKENS_LIMIT') {
+          result.quotaLimits!.tokens = quotaLimit;
+          logger.info(
+            `[parseApiResponse] Tokens: ${quotaLimit.used}/${quotaLimit.limit} (${quotaLimit.usedPercent.toFixed(1)}%)`
+          );
+        } else if (limitType.includes('TIME') || limitType === 'TIME_LIMIT') {
+          result.quotaLimits!.mcp = quotaLimit;
+          logger.info(
+            `[parseApiResponse] MCP: ${quotaLimit.used}/${quotaLimit.limit} (${quotaLimit.usedPercent.toFixed(1)}%)`
+          );
+        } else {
+          // If limitType is unknown, use as tokens by default (first one)
+          if (!result.quotaLimits!.tokens) {
+            quotaLimit.limitType = 'TOKENS_LIMIT';
+            result.quotaLimits!.tokens = quotaLimit;
+            logger.info(`[parseApiResponse] Unknown limit type '${rawLimitType}', using as tokens`);
+          }
+        }
+      }
+    }
+
+    // Parse alternative object-style limits
+    if (data.tokensLimit) {
+      const t = data.tokensLimit;
+      const limitVal = t.limit ?? 0;
+      const usedVal = t.used ?? 0;
+      const calculatedPercent = limitVal > 0 ? (usedVal / limitVal) * 100 : 0;
+      result.quotaLimits!.tokens = {
+        limitType: 'TOKENS_LIMIT',
+        limit: limitVal,
+        used: usedVal,
+        remaining: t.remaining ?? limitVal - usedVal,
+        usedPercent:
+          t.usedPercent !== undefined && t.usedPercent > 0 ? t.usedPercent : calculatedPercent,
+        nextResetTime: t.nextResetTime ?? 0,
+      };
+      logger.info('[parseApiResponse] Parsed tokensLimit object');
+    }
+
+    if (data.timeLimit) {
+      const t = data.timeLimit;
+      const limitVal = t.limit ?? 0;
+      const usedVal = t.used ?? 0;
+      const calculatedPercent = limitVal > 0 ? (usedVal / limitVal) * 100 : 0;
+      result.quotaLimits!.mcp = {
+        limitType: 'TIME_LIMIT',
+        limit: limitVal,
+        used: usedVal,
+        remaining: t.remaining ?? limitVal - usedVal,
+        usedPercent:
+          t.usedPercent !== undefined && t.usedPercent > 0 ? t.usedPercent : calculatedPercent,
+        nextResetTime: t.nextResetTime ?? 0,
+      };
+      logger.info('[parseApiResponse] Parsed timeLimit object');
+    }
+
+    // Parse simple quota/quotaUsed format as tokens
+    if (data.quota !== undefined && data.quotaUsed !== undefined && !result.quotaLimits!.tokens) {
+      const limitVal = Number(data.quota) || 0;
+      const usedVal = Number(data.quotaUsed) || 0;
+      result.quotaLimits!.tokens = {
+        limitType: 'TOKENS_LIMIT',
+        limit: limitVal,
+        used: usedVal,
+        remaining:
+          data.quotaRemaining !== undefined ? Number(data.quotaRemaining) : limitVal - usedVal,
+        usedPercent: limitVal > 0 ? (usedVal / limitVal) * 100 : 0,
+        nextResetTime: 0,
+      };
+      logger.info('[parseApiResponse] Parsed simple quota format');
+    }
+
+    // Parse usage details (MCP tracking)
+    if (data.usageDetails && Array.isArray(data.usageDetails)) {
+      result.usageDetails = data.usageDetails.map((detail) => ({
+        modelId: detail.modelId,
+        used: detail.used,
+        limit: detail.limit,
+      }));
+      logger.info(`[parseApiResponse] Usage details for ${result.usageDetails.length} models`);
+    }
+
+    logger.info('[parseApiResponse] Final result:', JSON.stringify(result, null, 2));
+    return result;
+  }
+}
diff --git a/temp_repo/apps/server/src/tests/cli-integration.test.ts b/temp_repo/apps/server/src/tests/cli-integration.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..695e8ea06285f20b3929cc42f084f851396cf8a7
--- /dev/null
+++ b/temp_repo/apps/server/src/tests/cli-integration.test.ts
@@ -0,0 +1,375 @@
+/**
+ * CLI Integration Tests
+ *
+ * Comprehensive tests for CLI detection, authentication, and operations
+ * across all providers (Claude, Codex, Cursor)
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+  detectCli,
+  detectAllCLis,
+  findCommand,
+  getCliVersion,
+  getInstallInstructions,
+  validateCliInstallation,
+} from '../lib/cli-detection.js';
+import { classifyError, getUserFriendlyErrorMessage } from '../lib/error-handler.js';
+
+describe('CLI Detection Framework', () => {
+  describe('findCommand', () => {
+    it('should find existing command', async () => {
+      // Test with a command that should exist
+      const result = await findCommand(['node']);
+      expect(result).toBeTruthy();
+    });
+
+    it('should return null for non-existent command', async () => {
+      const result = await findCommand(['nonexistent-command-12345']);
+      expect(result).toBeNull();
+    });
+
+    it('should find first available command from alternatives', async () => {
+      const result = await findCommand(['nonexistent-command-12345', 'node']);
+      expect(result).toBeTruthy();
+      expect(result).toContain('node');
+    });
+  });
+
+  describe('getCliVersion', () => {
+    it('should get version for existing command', async () => {
+      const version = await getCliVersion('node', ['--version'], 5000);
+      expect(version).toBeTruthy();
+      expect(typeof version).toBe('string');
+    });
+
+    it('should timeout for non-responsive command', async () => {
+      await expect(getCliVersion('sleep', ['10'], 1000)).rejects.toThrow();
+    }, 15000); // Give extra time for test timeout
+
+    it("should handle command that doesn't exist", async () => {
+      await expect(
+        getCliVersion('nonexistent-command-12345', ['--version'], 2000)
+      ).rejects.toThrow();
+    });
+  });
+
+  describe('getInstallInstructions', () => {
+    it('should return instructions for supported platforms', () => {
+      const claudeInstructions = getInstallInstructions('claude', 'darwin');
+      expect(claudeInstructions).toContain('brew install');
+
+      const codexInstructions = getInstallInstructions('codex', 'linux');
+      expect(codexInstructions).toContain('npm install');
+    });
+
+    it('should handle unsupported platform', () => {
+      const instructions = getInstallInstructions('claude', 'unknown-platform' as NodeJS.Platform);
+      expect(instructions).toContain('No installation instructions available');
+    });
+  });
+
+  describe('validateCliInstallation', () => {
+    it('should validate properly installed CLI', () => {
+      const cliInfo = {
+        name: 'Test CLI',
+        command: 'node',
+        version: 'v18.0.0',
+        path: '/usr/bin/node',
+        installed: true,
+        authenticated: true,
+        authMethod: 'cli' as const,
+      };
+
+      const result = validateCliInstallation(cliInfo);
+      expect(result.valid).toBe(true);
+      expect(result.issues).toHaveLength(0);
+    });
+
+    it('should detect issues with installation', () => {
+      const cliInfo = {
+        name: 'Test CLI',
+        command: '',
+        version: '',
+        path: '',
+        installed: false,
+        authenticated: false,
+        authMethod: 'none' as const,
+      };
+
+      const result = validateCliInstallation(cliInfo);
+      expect(result.valid).toBe(false);
+      expect(result.issues.length).toBeGreaterThan(0);
+      expect(result.issues).toContain('CLI is not installed');
+    });
+  });
+});
+
+describe('Error Handling System', () => {
+  describe('classifyError', () => {
+    it('should classify authentication errors', () => {
+      const authError = new Error('invalid_api_key: Your API key is invalid');
+      const result = classifyError(authError, 'claude');
+
+      expect(result.type).toBe('authentication');
+      expect(result.severity).toBe('high');
+      expect(result.userMessage).toContain('Authentication failed');
+      expect(result.retryable).toBe(false);
+      expect(result.provider).toBe('claude');
+    });
+
+    it('should classify billing errors', () => {
+      const billingError = new Error('credit balance is too low');
+      const result = classifyError(billingError);
+
+      expect(result.type).toBe('billing');
+      expect(result.severity).toBe('high');
+      expect(result.userMessage).toContain('insufficient credits');
+      expect(result.retryable).toBe(false);
+    });
+
+    it('should classify rate limit errors', () => {
+      const rateLimitError = new Error('Rate limit reached. Try again later.');
+      const result = classifyError(rateLimitError);
+
+      expect(result.type).toBe('rate_limit');
+      expect(result.severity).toBe('medium');
+      expect(result.userMessage).toContain('Rate limit reached');
+      expect(result.retryable).toBe(true);
+    });
+
+    it('should classify network errors', () => {
+      const networkError = new Error('ECONNREFUSED: Connection refused');
+      const result = classifyError(networkError);
+
+      expect(result.type).toBe('network');
+      expect(result.severity).toBe('medium');
+      expect(result.userMessage).toContain('Network connection issue');
+      expect(result.retryable).toBe(true);
+    });
+
+    it('should handle unknown errors', () => {
+      const unknownError = new Error('Something completely unexpected happened');
+      const result = classifyError(unknownError);
+
+      expect(result.type).toBe('unknown');
+      expect(result.severity).toBe('medium');
+      expect(result.userMessage).toContain('unexpected error');
+      expect(result.retryable).toBe(true);
+    });
+  });
+
+  describe('getUserFriendlyErrorMessage', () => {
+    it('should include provider name in message', () => {
+      const error = new Error('invalid_api_key');
+      const message = getUserFriendlyErrorMessage(error, 'claude');
+
+      expect(message).toContain('[CLAUDE]');
+    });
+
+    it('should include suggested action when available', () => {
+      const error = new Error('invalid_api_key');
+      const message = getUserFriendlyErrorMessage(error);
+
+      expect(message).toContain('Verify your API key');
+    });
+  });
+});
+
+describe('Provider-Specific Tests', () => {
+  describe('Claude CLI Detection', () => {
+    it('should detect Claude CLI if installed', async () => {
+      const result = await detectCli('claude');
+
+      if (result.detected) {
+        expect(result.cli.name).toBe('Claude CLI');
+        expect(result.cli.installed).toBe(true);
+        expect(result.cli.command).toBeTruthy();
+      }
+      // If not installed, that's also a valid test result
+    });
+
+    it('should handle missing Claude CLI gracefully', async () => {
+      // This test will pass regardless of whether Claude is installed
+      const result = await detectCli('claude');
+      expect(typeof result.detected).toBe('boolean');
+      expect(Array.isArray(result.issues)).toBe(true);
+    });
+  });
+
+  describe('Codex CLI Detection', () => {
+    it('should detect Codex CLI if installed', async () => {
+      const result = await detectCli('codex');
+
+      if (result.detected) {
+        expect(result.cli.name).toBe('Codex CLI');
+        expect(result.cli.installed).toBe(true);
+        expect(result.cli.command).toBeTruthy();
+      }
+    });
+  });
+
+  describe('Cursor CLI Detection', () => {
+    it('should detect Cursor CLI if installed', async () => {
+      const result = await detectCli('cursor');
+
+      if (result.detected) {
+        expect(result.cli.name).toBe('Cursor CLI');
+        expect(result.cli.installed).toBe(true);
+        expect(result.cli.command).toBeTruthy();
+      }
+    });
+  });
+});
+
+describe('Integration Tests', () => {
+  describe('detectAllCLis', () => {
+    it('should detect all available CLIs', async () => {
+      const results = await detectAllCLis();
+
+      expect(results).toHaveProperty('claude');
+      expect(results).toHaveProperty('codex');
+      expect(results).toHaveProperty('cursor');
+
+      // Each should have the expected structure
+      Object.values(results).forEach((result) => {
+        expect(result).toHaveProperty('cli');
+        expect(result).toHaveProperty('detected');
+        expect(result).toHaveProperty('issues');
+        expect(result.cli).toHaveProperty('name');
+        expect(result.cli).toHaveProperty('installed');
+        expect(result.cli).toHaveProperty('authenticated');
+      });
+    }, 30000); // Longer timeout for CLI detection
+
+    it('should handle concurrent CLI detection', async () => {
+      // Run detection multiple times concurrently
+      const promises = [detectAllCLis(), detectAllCLis(), detectAllCLis()];
+
+      const results = await Promise.all(promises);
+
+      // All should return consistent results
+      expect(results).toHaveLength(3);
+      results.forEach((result) => {
+        expect(result).toHaveProperty('claude');
+        expect(result).toHaveProperty('codex');
+        expect(result).toHaveProperty('cursor');
+      });
+    }, 45000);
+  });
+});
+
+describe('Error Recovery Tests', () => {
+  it('should handle partial CLI detection failures', async () => {
+    // Mock a scenario where some CLIs fail to detect
+    const results = await detectAllCLis();
+
+    // Should still return results for all providers
+    expect(results).toHaveProperty('claude');
+    expect(results).toHaveProperty('codex');
+    expect(results).toHaveProperty('cursor');
+
+    // Should provide error information for failures
+    Object.entries(results).forEach(([_provider, result]) => {
+      if (!result.detected && result.issues.length > 0) {
+        expect(result.issues.length).toBeGreaterThan(0);
+        expect(result.issues[0]).toBeTruthy();
+      }
+    });
+  });
+
+  it('should handle timeout during CLI detection', async () => {
+    // Test with very short timeout
+    const result = await detectCli('claude', { timeout: 1 });
+
+    // Should handle gracefully without throwing
+    expect(typeof result.detected).toBe('boolean');
+    expect(Array.isArray(result.issues)).toBe(true);
+  });
+});
+
+describe('Security Tests', () => {
+  it('should not expose sensitive information in error messages', () => {
+    const errorWithKey = new Error('invalid_api_key: sk-ant-abc123secret456');
+    const message = getUserFriendlyErrorMessage(errorWithKey);
+
+    // Should not expose the actual API key
+    expect(message).not.toContain('sk-ant-abc123secret456');
+    expect(message).toContain('Authentication failed');
+  });
+
+  it('should sanitize file paths in error messages', () => {
+    const errorWithPath = new Error('Permission denied: /home/user/.ssh/id_rsa');
+    const message = getUserFriendlyErrorMessage(errorWithPath);
+
+    // Should not expose sensitive file paths
+    expect(message).not.toContain('/home/user/.ssh/id_rsa');
+  });
+});
+
+// Performance Tests
+describe('Performance Tests', () => {
+  it('should detect CLIs within reasonable time', async () => {
+    const startTime = Date.now();
+    const results = await detectAllCLis();
+    const endTime = Date.now();
+
+    const duration = endTime - startTime;
+    expect(duration).toBeLessThan(10000); // Should complete in under 10 seconds
+    expect(results).toHaveProperty('claude');
+    expect(results).toHaveProperty('codex');
+    expect(results).toHaveProperty('cursor');
+  }, 15000);
+
+  it('should handle rapid repeated calls', async () => {
+    // Make multiple rapid calls
+    const promises = Array.from({ length: 10 }, () => detectAllCLis());
+    const results = await Promise.all(promises);
+
+    // All should complete successfully
+    expect(results).toHaveLength(10);
+    results.forEach((result) => {
+      expect(result).toHaveProperty('claude');
+      expect(result).toHaveProperty('codex');
+      expect(result).toHaveProperty('cursor');
+    });
+  }, 60000);
+});
+
+// Edge Cases
+describe('Edge Cases', () => {
+  it('should handle empty CLI names', async () => {
+    await expect(detectCli('' as unknown as Parameters<typeof detectCli>[0])).rejects.toThrow();
+  });
+
+  it('should handle null CLI names', async () => {
+    await expect(detectCli(null as unknown as Parameters<typeof detectCli>[0])).rejects.toThrow();
+  });
+
+  it('should handle undefined CLI names', async () => {
+    await expect(
+      detectCli(undefined as unknown as Parameters<typeof detectCli>[0])
+    ).rejects.toThrow();
+  });
+
+  it('should handle malformed error objects', () => {
+    const testCases = [
+      null,
+      undefined,
+      '',
+      123,
+      [],
+      { nested: { error: { message: 'test' } } },
+      { error: 'simple string error' },
+    ];
+
+    testCases.forEach((error) => {
+      expect(() => {
+        const result = classifyError(error);
+        expect(result).toHaveProperty('type');
+        expect(result).toHaveProperty('severity');
+        expect(result).toHaveProperty('userMessage');
+      }).not.toThrow();
+    });
+  });
+});
diff --git a/temp_repo/apps/server/src/types/settings.ts b/temp_repo/apps/server/src/types/settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..30ce17220b4665b19ff26b9fc2d2ed112253ff85
--- /dev/null
+++ b/temp_repo/apps/server/src/types/settings.ts
@@ -0,0 +1,49 @@
+/**
+ * Settings Types - Re-exported from @automaker/types
+ *
+ * This file now re-exports settings types from the shared @automaker/types package
+ * to maintain backward compatibility with existing imports in the server codebase.
+ */
+
+export type {
+  ThemeMode,
+  ModelAlias,
+  PlanningMode,
+  ThinkingLevel,
+  ModelProvider,
+  KeyboardShortcuts,
+  ProjectRef,
+  TrashedProjectRef,
+  ChatSessionRef,
+  GlobalSettings,
+  Credentials,
+  BoardBackgroundSettings,
+  WorktreeInfo,
+  ProjectSettings,
+  PhaseModelConfig,
+  PhaseModelKey,
+  PhaseModelEntry,
+  FeatureTemplate,
+  // Claude-compatible provider types
+  ApiKeySource,
+  ClaudeCompatibleProviderType,
+  ClaudeModelAlias,
+  ProviderModel,
+  ClaudeCompatibleProvider,
+  ClaudeCompatibleProviderTemplate,
+  // Legacy profile types (deprecated)
+  ClaudeApiProfile,
+  ClaudeApiProfileTemplate,
+} from '@automaker/types';
+
+export {
+  DEFAULT_KEYBOARD_SHORTCUTS,
+  DEFAULT_GLOBAL_SETTINGS,
+  DEFAULT_CREDENTIALS,
+  DEFAULT_PROJECT_SETTINGS,
+  DEFAULT_PHASE_MODELS,
+  DEFAULT_FEATURE_TEMPLATES,
+  SETTINGS_VERSION,
+  CREDENTIALS_VERSION,
+  PROJECT_SETTINGS_VERSION,
+} from '@automaker/types';
diff --git a/temp_repo/apps/server/test/git-log-parser.test.js b/temp_repo/apps/server/test/git-log-parser.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..c81c49584b24da8dcbee1c97992f361ac6c5e2ba
--- /dev/null
+++ b/temp_repo/apps/server/test/git-log-parser.test.js
@@ -0,0 +1,196 @@
+import { describe, it, expect } from 'vitest';
+import { parseGitLogOutput } from '../src/lib/git-log-parser.js';
+
+// Mock data: fields within each commit are newline-separated,
+// commits are NUL-separated (matching the parser contract).
+const mockGitOutput = [
+  'a1b2c3d4e5f67890abcd1234567890abcd1234\na1b2c3\nJohn Doe\njohn@example.com\n2023-01-01T12:00:00Z\nInitial commit\nThis is the commit body',
+  'e5f6g7h8i9j0klmnoprstuv\ne5f6g7\nJane Smith\njane@example.com\n2023-01-02T12:00:00Z\nFix bug\nFixed the bug with ---END--- in the message',
+  'q1w2e3r4t5y6u7i8o9p0asdfghjkl\nq1w2e3\nBob Johnson\nbob@example.com\n2023-01-03T12:00:00Z\nAnother commit\nEmpty body',
+].join('\0');
+
+// Mock data where commit bodies contain ---END--- markers
+const mockOutputWithEndMarker = [
+  'a1b2c3d4e5f67890abcd1234567890abcd1234\na1b2c3\nJohn Doe\njohn@example.com\n2023-01-01T12:00:00Z\nInitial commit\nThis is the commit body\n---END--- is in this message',
+  'e5f6g7h8i9j0klmnoprstuv\ne5f6g7\nJane Smith\njane@example.com\n2023-01-02T12:00:00Z\nFix bug\nFixed the bug with ---END--- in the message',
+  'q1w2e3r4t5y6u7i8o9p0asdfghjkl\nq1w2e3\nBob Johnson\nbob@example.com\n2023-01-03T12:00:00Z\nAnother commit\nEmpty body',
+].join('\0');
+
+// Single-commit mock: fields newline-separated, no trailing NUL needed
+const singleCommitOutput =
+  'a1b2c3d4e5f67890abcd1234567890abcd1234\na1b2c3\nJohn Doe\njohn@example.com\n2023-01-01T12:00:00Z\nSingle commit\nSingle commit body';
+
+describe('parseGitLogOutput', () => {
+  describe('normal parsing (three commits)', () => {
+    it('returns the correct number of commits', () => {
+      const commits = parseGitLogOutput(mockGitOutput);
+      expect(commits.length).toBe(3);
+    });
+
+    it('parses the first commit fields correctly', () => {
+      const commits = parseGitLogOutput(mockGitOutput);
+      expect(commits[0].hash).toBe('a1b2c3d4e5f67890abcd1234567890abcd1234');
+      expect(commits[0].shortHash).toBe('a1b2c3');
+      expect(commits[0].author).toBe('John Doe');
+      expect(commits[0].authorEmail).toBe('john@example.com');
+      expect(commits[0].date).toBe('2023-01-01T12:00:00Z');
+      expect(commits[0].subject).toBe('Initial commit');
+      expect(commits[0].body).toBe('This is the commit body');
+    });
+
+    it('parses the second commit fields correctly', () => {
+      const commits = parseGitLogOutput(mockGitOutput);
+      expect(commits[1].hash).toBe('e5f6g7h8i9j0klmnoprstuv');
+      expect(commits[1].shortHash).toBe('e5f6g7');
+      expect(commits[1].author).toBe('Jane Smith');
+      expect(commits[1].subject).toBe('Fix bug');
+      expect(commits[1].body).toMatch(/---END---/);
+    });
+
+    it('parses the third commit fields correctly', () => {
+      const commits = parseGitLogOutput(mockGitOutput);
+      expect(commits[2].hash).toBe('q1w2e3r4t5y6u7i8o9p0asdfghjkl');
+      expect(commits[2].shortHash).toBe('q1w2e3');
+      expect(commits[2].author).toBe('Bob Johnson');
+      expect(commits[2].subject).toBe('Another commit');
+      expect(commits[2].body).toBe('Empty body');
+    });
+  });
+
+  describe('parsing with ---END--- in commit messages', () => {
+    it('returns the correct number of commits', () => {
+      const commits = parseGitLogOutput(mockOutputWithEndMarker);
+      expect(commits.length).toBe(3);
+    });
+
+    it('preserves ---END--- text in the body of the first commit', () => {
+      const commits = parseGitLogOutput(mockOutputWithEndMarker);
+      expect(commits[0].subject).toBe('Initial commit');
+      expect(commits[0].body).toMatch(/---END---/);
+    });
+
+    it('preserves ---END--- text in the body of the second commit', () => {
+      const commits = parseGitLogOutput(mockOutputWithEndMarker);
+      expect(commits[1].subject).toBe('Fix bug');
+      expect(commits[1].body).toMatch(/---END---/);
+    });
+
+    it('parses the third commit without ---END--- interference', () => {
+      const commits = parseGitLogOutput(mockOutputWithEndMarker);
+      expect(commits[2].subject).toBe('Another commit');
+      expect(commits[2].body).toBe('Empty body');
+    });
+  });
+
+  describe('empty output', () => {
+    it('returns an empty array for an empty string', () => {
+      const commits = parseGitLogOutput('');
+      expect(commits).toEqual([]);
+      expect(commits.length).toBe(0);
+    });
+  });
+
+  describe('single-commit output', () => {
+    it('returns exactly one commit', () => {
+      const commits = parseGitLogOutput(singleCommitOutput);
+      expect(commits.length).toBe(1);
+    });
+
+    it('parses the single commit fields correctly', () => {
+      const commits = parseGitLogOutput(singleCommitOutput);
+      expect(commits[0].hash).toBe('a1b2c3d4e5f67890abcd1234567890abcd1234');
+      expect(commits[0].shortHash).toBe('a1b2c3');
+      expect(commits[0].author).toBe('John Doe');
+      expect(commits[0].authorEmail).toBe('john@example.com');
+      expect(commits[0].date).toBe('2023-01-01T12:00:00Z');
+      expect(commits[0].subject).toBe('Single commit');
+      expect(commits[0].body).toBe('Single commit body');
+    });
+  });
+
+  describe('multi-line commit body', () => {
+    // Test vector from test-proper-nul-format.js: commit with a 3-line body
+    const multiLineBodyOutput =
+      [
+        'abc123\nabc1\nJohn Doe\njohn@example.com\n2023-01-01T12:00:00Z\nInitial commit\nThis is a normal commit body',
+        'def456\ndef4\nJane Smith\njane@example.com\n2023-01-02T12:00:00Z\nFix bug\nFixed the bug with ---END--- in this message',
+        'ghi789\nghi7\nBob Johnson\nbob@example.com\n2023-01-03T12:00:00Z\nAnother commit\nThis body has multiple lines\nSecond line\nThird line',
+      ].join('\0') + '\0';
+
+    it('returns 3 commits', () => {
+      const commits = parseGitLogOutput(multiLineBodyOutput);
+      expect(commits.length).toBe(3);
+    });
+
+    it('parses the first commit correctly', () => {
+      const commits = parseGitLogOutput(multiLineBodyOutput);
+      expect(commits[0].hash).toBe('abc123');
+      expect(commits[0].shortHash).toBe('abc1');
+      expect(commits[0].author).toBe('John Doe');
+      expect(commits[0].authorEmail).toBe('john@example.com');
+      expect(commits[0].date).toBe('2023-01-01T12:00:00Z');
+      expect(commits[0].subject).toBe('Initial commit');
+      expect(commits[0].body).toBe('This is a normal commit body');
+    });
+
+    it('parses the second commit with ---END--- in body correctly', () => {
+      const commits = parseGitLogOutput(multiLineBodyOutput);
+      expect(commits[1].hash).toBe('def456');
+      expect(commits[1].shortHash).toBe('def4');
+      expect(commits[1].author).toBe('Jane Smith');
+      expect(commits[1].subject).toBe('Fix bug');
+      expect(commits[1].body).toContain('---END---');
+    });
+
+    it('parses the third commit with a multi-line body correctly', () => {
+      const commits = parseGitLogOutput(multiLineBodyOutput);
+      expect(commits[2].hash).toBe('ghi789');
+      expect(commits[2].shortHash).toBe('ghi7');
+      expect(commits[2].author).toBe('Bob Johnson');
+      expect(commits[2].subject).toBe('Another commit');
+      expect(commits[2].body).toBe('This body has multiple lines\nSecond line\nThird line');
+    });
+  });
+
+  describe('commit with empty body (trailing blank lines after subject)', () => {
+    // Test vector from test-proper-nul-format.js: empty body commit
+    const emptyBodyOutput =
+      'empty123\nempty1\nAlice Brown\nalice@example.com\n2023-01-04T12:00:00Z\nEmpty body commit\n\n\0';
+
+    it('returns 1 commit', () => {
+      const commits = parseGitLogOutput(emptyBodyOutput);
+      expect(commits.length).toBe(1);
+    });
+
+    it('parses the commit subject correctly', () => {
+      const commits = parseGitLogOutput(emptyBodyOutput);
+      expect(commits[0].hash).toBe('empty123');
+      expect(commits[0].shortHash).toBe('empty1');
+      expect(commits[0].author).toBe('Alice Brown');
+      expect(commits[0].subject).toBe('Empty body commit');
+    });
+
+    it('produces an empty body string when only blank lines follow the subject', () => {
+      const commits = parseGitLogOutput(emptyBodyOutput);
+      expect(commits[0].body).toBe('');
+    });
+  });
+
+  describe('leading empty lines in a commit block', () => {
+    // Blocks that start with blank lines before the hash field
+    const outputWithLeadingBlanks =
+      '\n\nabc123\nabc1\nJohn Doe\njohn@example.com\n2023-01-01T12:00:00Z\nSubject here\nBody here';
+
+    it('returns 1 commit despite leading blank lines', () => {
+      const commits = parseGitLogOutput(outputWithLeadingBlanks);
+      expect(commits.length).toBe(1);
+    });
+
+    it('parses the commit fields correctly when block has leading empty lines', () => {
+      const commits = parseGitLogOutput(outputWithLeadingBlanks);
+      expect(commits[0].hash).toBe('abc123');
+      expect(commits[0].subject).toBe('Subject here');
+      expect(commits[0].body).toBe('Body here');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/fixtures/configs.ts b/temp_repo/apps/server/tests/fixtures/configs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6cf348e3fd59246dfc8ec01e0532417e92ecd5b4
--- /dev/null
+++ b/temp_repo/apps/server/tests/fixtures/configs.ts
@@ -0,0 +1,17 @@
+/**
+ * Configuration fixtures for testing
+ */
+
+export const tomlConfigFixture = `
+experimental_use_rmcp_client = true
+
+[mcp_servers.automaker-tools]
+command = "node"
+args = ["/path/to/server.js"]
+startup_timeout_sec = 10
+tool_timeout_sec = 60
+enabled_tools = ["UpdateFeatureStatus"]
+
+[mcp_servers.automaker-tools.env]
+AUTOMAKER_PROJECT_PATH = "/path/to/project"
+`;
diff --git a/temp_repo/apps/server/tests/fixtures/images.ts b/temp_repo/apps/server/tests/fixtures/images.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f7e768c6346d5bdcf594f597ccf23af4757fe115
--- /dev/null
+++ b/temp_repo/apps/server/tests/fixtures/images.ts
@@ -0,0 +1,14 @@
+/**
+ * Image fixtures for testing image handling
+ */
+
+// 1x1 transparent PNG base64 data
+export const pngBase64Fixture =
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+
+export const imageDataFixture = {
+  base64: pngBase64Fixture,
+  mimeType: 'image/png',
+  filename: 'test.png',
+  originalPath: '/path/to/test.png',
+};
diff --git a/temp_repo/apps/server/tests/fixtures/messages.ts b/temp_repo/apps/server/tests/fixtures/messages.ts
new file mode 100644
index 0000000000000000000000000000000000000000..56eb75f79b57a2c3761b4a85d840197a4f444ba2
--- /dev/null
+++ b/temp_repo/apps/server/tests/fixtures/messages.ts
@@ -0,0 +1,34 @@
+/**
+ * Message fixtures for testing providers and lib utilities
+ */
+
+import type { ConversationMessage, ProviderMessage, ContentBlock } from '@automaker/types';
+
+export const conversationHistoryFixture: ConversationMessage[] = [
+  {
+    role: 'user',
+    content: 'Hello, can you help me?',
+  },
+  {
+    role: 'assistant',
+    content: 'Of course! How can I assist you today?',
+  },
+  {
+    role: 'user',
+    content: [
+      { type: 'text', text: 'What is in this image?' },
+      {
+        type: 'image',
+        source: { type: 'base64', media_type: 'image/png', data: 'base64data' },
+      },
+    ],
+  },
+];
+
+export const claudeProviderMessageFixture: ProviderMessage = {
+  type: 'assistant',
+  message: {
+    role: 'assistant',
+    content: [{ type: 'text', text: 'This is a test response' }],
+  },
+};
diff --git a/temp_repo/apps/server/tests/integration/helpers/git-test-repo.ts b/temp_repo/apps/server/tests/integration/helpers/git-test-repo.ts
new file mode 100644
index 0000000000000000000000000000000000000000..de5e421569473626eae21e66a9916a05cb7a9ad6
--- /dev/null
+++ b/temp_repo/apps/server/tests/integration/helpers/git-test-repo.ts
@@ -0,0 +1,140 @@
+/**
+ * Helper for creating test git repositories for integration tests
+ */
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import * as fs from 'fs/promises';
+import * as path from 'path';
+import * as os from 'os';
+
+const execAsync = promisify(exec);
+
+export interface TestRepo {
+  path: string;
+  cleanup: () => Promise<void>;
+}
+
+/**
+ * Create a temporary git repository for testing
+ */
+export async function createTestGitRepo(): Promise<TestRepo> {
+  const tmpDir = await fs.mkdtemp(path.join(os.tmpdir(), 'automaker-test-'));
+
+  // Initialize git repo with 'main' as the default branch (matching GitHub's standard)
+  await execAsync('git init --initial-branch=main', { cwd: tmpDir });
+
+  // Use environment variables instead of git config to avoid affecting user's git config
+  // These env vars override git config without modifying it
+  const gitEnv = {
+    ...process.env,
+    GIT_AUTHOR_NAME: 'Test User',
+    GIT_AUTHOR_EMAIL: 'test@example.com',
+    GIT_COMMITTER_NAME: 'Test User',
+    GIT_COMMITTER_EMAIL: 'test@example.com',
+  };
+
+  // Create initial commit
+  await fs.writeFile(path.join(tmpDir, 'README.md'), '# Test Project\n');
+  await execAsync('git add .', { cwd: tmpDir, env: gitEnv });
+  await execAsync('git commit -m "Initial commit"', { cwd: tmpDir, env: gitEnv });
+
+  return {
+    path: tmpDir,
+    cleanup: async () => {
+      try {
+        // Remove all worktrees first
+        const { stdout } = await execAsync('git worktree list --porcelain', {
+          cwd: tmpDir,
+        }).catch(() => ({ stdout: '' }));
+
+        const worktrees = stdout
+          .split('\n\n')
+          .slice(1) // Skip main worktree
+          .map((block) => {
+            const pathLine = block.split('\n').find((line) => line.startsWith('worktree '));
+            return pathLine ? pathLine.replace('worktree ', '') : null;
+          })
+          .filter(Boolean);
+
+        for (const worktreePath of worktrees) {
+          try {
+            await execAsync(`git worktree remove "${worktreePath}" --force`, {
+              cwd: tmpDir,
+            });
+          } catch (err) {
+            // Ignore errors
+          }
+        }
+
+        // Remove the repository
+        await fs.rm(tmpDir, { recursive: true, force: true });
+      } catch (error) {
+        console.error('Failed to cleanup test repo:', error);
+      }
+    },
+  };
+}
+
+/**
+ * Create a feature file in the test repo
+ */
+export async function createTestFeature(
+  repoPath: string,
+  featureId: string,
+  featureData: any
+): Promise<void> {
+  const featuresDir = path.join(repoPath, '.automaker', 'features');
+  const featureDir = path.join(featuresDir, featureId);
+
+  await fs.mkdir(featureDir, { recursive: true });
+  await fs.writeFile(path.join(featureDir, 'feature.json'), JSON.stringify(featureData, null, 2));
+}
+
+/**
+ * Get list of git branches
+ */
+export async function listBranches(repoPath: string): Promise<string[]> {
+  const { stdout } = await execAsync('git branch --list', { cwd: repoPath });
+  return stdout
+    .split('\n')
+    .map((line) => line.trim().replace(/^[*+]\s*/, ''))
+    .filter(Boolean);
+}
+
+/**
+ * Get list of git worktrees
+ */
+export async function listWorktrees(repoPath: string): Promise<string[]> {
+  try {
+    const { stdout } = await execAsync('git worktree list --porcelain', {
+      cwd: repoPath,
+    });
+
+    return stdout
+      .split('\n\n')
+      .slice(1) // Skip main worktree
+      .map((block) => {
+        const pathLine = block.split('\n').find((line) => line.startsWith('worktree '));
+        return pathLine ? pathLine.replace('worktree ', '') : null;
+      })
+      .filter(Boolean) as string[];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Check if a branch exists
+ */
+export async function branchExists(repoPath: string, branchName: string): Promise<boolean> {
+  const branches = await listBranches(repoPath);
+  return branches.includes(branchName);
+}
+
+/**
+ * Check if a worktree exists
+ */
+export async function worktreeExists(repoPath: string, worktreePath: string): Promise<boolean> {
+  const worktrees = await listWorktrees(repoPath);
+  return worktrees.some((wt) => wt === worktreePath);
+}
diff --git a/temp_repo/apps/server/tests/integration/routes/worktree/create.integration.test.ts b/temp_repo/apps/server/tests/integration/routes/worktree/create.integration.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a751706b6d68d88f51e1f99e77aeeb45aa283904
--- /dev/null
+++ b/temp_repo/apps/server/tests/integration/routes/worktree/create.integration.test.ts
@@ -0,0 +1,61 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { createCreateHandler } from '@/routes/worktree/routes/create.js';
+import { AUTOMAKER_INITIAL_COMMIT_MESSAGE } from '@/routes/worktree/common.js';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import * as fs from 'fs/promises';
+import * as os from 'os';
+import * as path from 'path';
+
+const execAsync = promisify(exec);
+
+describe('worktree create route - repositories without commits', () => {
+  let repoPath: string | null = null;
+
+  async function initRepoWithoutCommit() {
+    repoPath = await fs.mkdtemp(path.join(os.tmpdir(), 'automaker-no-commit-'));
+    // Initialize with 'main' as the default branch (matching GitHub's standard)
+    await execAsync('git init --initial-branch=main', { cwd: repoPath });
+    // Don't set git config - use environment variables in commit operations instead
+    // to avoid affecting user's git config
+    // Intentionally skip creating an initial commit
+  }
+
+  afterEach(async () => {
+    if (!repoPath) {
+      return;
+    }
+    await fs.rm(repoPath, { recursive: true, force: true });
+    repoPath = null;
+  });
+
+  it('creates an initial commit before adding a worktree when HEAD is missing', async () => {
+    await initRepoWithoutCommit();
+    const handler = createCreateHandler();
+
+    const json = vi.fn();
+    const status = vi.fn().mockReturnThis();
+    const req = {
+      body: { projectPath: repoPath, branchName: 'feature/no-head' },
+    } as any;
+    const res = {
+      json,
+      status,
+    } as any;
+
+    await handler(req, res);
+
+    expect(status).not.toHaveBeenCalled();
+    expect(json).toHaveBeenCalled();
+    const payload = json.mock.calls[0][0];
+    expect(payload.success).toBe(true);
+
+    const { stdout: commitCount } = await execAsync('git rev-list --count HEAD', {
+      cwd: repoPath!,
+    });
+    expect(Number(commitCount.trim())).toBeGreaterThan(0);
+
+    const { stdout: latestMessage } = await execAsync('git log -1 --pretty=%B', { cwd: repoPath! });
+    expect(latestMessage.trim()).toBe(AUTOMAKER_INITIAL_COMMIT_MESSAGE);
+  });
+});
diff --git a/temp_repo/apps/server/tests/setup.ts b/temp_repo/apps/server/tests/setup.ts
new file mode 100644
index 0000000000000000000000000000000000000000..15ecc9dca741e86d005098fed35add1f9fac8e56
--- /dev/null
+++ b/temp_repo/apps/server/tests/setup.ts
@@ -0,0 +1,15 @@
+/**
+ * Vitest global setup file
+ * Runs before each test file
+ */
+
+import { vi, beforeEach } from 'vitest';
+
+// Set test environment variables
+process.env.NODE_ENV = 'test';
+process.env.DATA_DIR = '/tmp/test-data';
+
+// Reset all mocks before each test
+beforeEach(() => {
+  vi.clearAllMocks();
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/app-spec-format.test.ts b/temp_repo/apps/server/tests/unit/lib/app-spec-format.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eef788140dcad38e6f180a596729d0fe26d11ec0
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/app-spec-format.test.ts
@@ -0,0 +1,183 @@
+import { describe, it, expect } from 'vitest';
+import {
+  specToXml,
+  getStructuredSpecPromptInstruction,
+  getAppSpecFormatInstruction,
+  APP_SPEC_XML_FORMAT,
+  type SpecOutput,
+} from '@/lib/app-spec-format.js';
+
+describe('app-spec-format.ts', () => {
+  describe('specToXml', () => {
+    it('should convert minimal spec to XML', () => {
+      const spec: SpecOutput = {
+        project_name: 'Test Project',
+        overview: 'A test project',
+        technology_stack: ['TypeScript', 'Node.js'],
+        core_capabilities: ['Testing', 'Development'],
+        implemented_features: [{ name: 'Feature 1', description: 'First feature' }],
+      };
+
+      const xml = specToXml(spec);
+
+      expect(xml).toContain('<?xml version="1.0" encoding="UTF-8"?>');
+      expect(xml).toContain('<project_specification>');
+      expect(xml).toContain('</project_specification>');
+      expect(xml).toContain('<project_name>Test Project</project_name>');
+      expect(xml).toContain('<technology>TypeScript</technology>');
+      expect(xml).toContain('<capability>Testing</capability>');
+    });
+
+    it('should escape XML special characters', () => {
+      const spec: SpecOutput = {
+        project_name: 'Test & Project',
+        overview: 'Description with <tags>',
+        technology_stack: ['TypeScript'],
+        core_capabilities: ['Cap'],
+        implemented_features: [],
+      };
+
+      const xml = specToXml(spec);
+
+      expect(xml).toContain('Test &amp; Project');
+      expect(xml).toContain('&lt;tags&gt;');
+    });
+
+    it('should include file_locations when provided', () => {
+      const spec: SpecOutput = {
+        project_name: 'Test',
+        overview: 'Test',
+        technology_stack: ['TS'],
+        core_capabilities: ['Cap'],
+        implemented_features: [
+          {
+            name: 'Feature',
+            description: 'Desc',
+            file_locations: ['src/index.ts'],
+          },
+        ],
+      };
+
+      const xml = specToXml(spec);
+
+      expect(xml).toContain('<file_locations>');
+      expect(xml).toContain('<location>src/index.ts</location>');
+    });
+
+    it('should not include file_locations when empty', () => {
+      const spec: SpecOutput = {
+        project_name: 'Test',
+        overview: 'Test',
+        technology_stack: ['TS'],
+        core_capabilities: ['Cap'],
+        implemented_features: [{ name: 'Feature', description: 'Desc', file_locations: [] }],
+      };
+
+      const xml = specToXml(spec);
+
+      expect(xml).not.toContain('<file_locations>');
+    });
+
+    it('should include additional_requirements when provided', () => {
+      const spec: SpecOutput = {
+        project_name: 'Test',
+        overview: 'Test',
+        technology_stack: ['TS'],
+        core_capabilities: ['Cap'],
+        implemented_features: [],
+        additional_requirements: ['Node.js 18+'],
+      };
+
+      const xml = specToXml(spec);
+
+      expect(xml).toContain('<additional_requirements>');
+      expect(xml).toContain('<requirement>Node.js 18+</requirement>');
+    });
+
+    it('should include development_guidelines when provided', () => {
+      const spec: SpecOutput = {
+        project_name: 'Test',
+        overview: 'Test',
+        technology_stack: ['TS'],
+        core_capabilities: ['Cap'],
+        implemented_features: [],
+        development_guidelines: ['Use ESLint'],
+      };
+
+      const xml = specToXml(spec);
+
+      expect(xml).toContain('<development_guidelines>');
+      expect(xml).toContain('<guideline>Use ESLint</guideline>');
+    });
+
+    it('should include implementation_roadmap when provided', () => {
+      const spec: SpecOutput = {
+        project_name: 'Test',
+        overview: 'Test',
+        technology_stack: ['TS'],
+        core_capabilities: ['Cap'],
+        implemented_features: [],
+        implementation_roadmap: [{ phase: 'Phase 1', status: 'completed', description: 'Setup' }],
+      };
+
+      const xml = specToXml(spec);
+
+      expect(xml).toContain('<implementation_roadmap>');
+      expect(xml).toContain('<status>completed</status>');
+    });
+
+    it('should not include optional sections when empty', () => {
+      const spec: SpecOutput = {
+        project_name: 'Test',
+        overview: 'Test',
+        technology_stack: ['TS'],
+        core_capabilities: ['Cap'],
+        implemented_features: [],
+        additional_requirements: [],
+        development_guidelines: [],
+        implementation_roadmap: [],
+      };
+
+      const xml = specToXml(spec);
+
+      expect(xml).not.toContain('<additional_requirements>');
+      expect(xml).not.toContain('<development_guidelines>');
+      expect(xml).not.toContain('<implementation_roadmap>');
+    });
+  });
+
+  describe('getStructuredSpecPromptInstruction', () => {
+    it('should return non-empty prompt instruction', () => {
+      const instruction = getStructuredSpecPromptInstruction();
+      expect(instruction).toBeTruthy();
+      expect(instruction.length).toBeGreaterThan(100);
+    });
+
+    it('should mention required fields', () => {
+      const instruction = getStructuredSpecPromptInstruction();
+      expect(instruction).toContain('project_name');
+      expect(instruction).toContain('overview');
+      expect(instruction).toContain('technology_stack');
+    });
+  });
+
+  describe('getAppSpecFormatInstruction', () => {
+    it('should return non-empty format instruction', () => {
+      const instruction = getAppSpecFormatInstruction();
+      expect(instruction).toBeTruthy();
+      expect(instruction.length).toBeGreaterThan(100);
+    });
+
+    it('should include critical formatting requirements', () => {
+      const instruction = getAppSpecFormatInstruction();
+      expect(instruction).toContain('CRITICAL FORMATTING REQUIREMENTS');
+    });
+  });
+
+  describe('APP_SPEC_XML_FORMAT', () => {
+    it('should contain valid XML template structure', () => {
+      expect(APP_SPEC_XML_FORMAT).toContain('<project_specification>');
+      expect(APP_SPEC_XML_FORMAT).toContain('</project_specification>');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/auth.test.ts b/temp_repo/apps/server/tests/unit/lib/auth.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8708062f6ddf72ca5dc1ef090e99e19365658fb8
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/auth.test.ts
@@ -0,0 +1,399 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { createMockExpressContext } from '../../utils/mocks.js';
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * Note: auth.ts reads AUTOMAKER_API_KEY at module load time.
+ * We need to reset modules and reimport for each test to get fresh state.
+ */
+describe('auth.ts', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    delete process.env.AUTOMAKER_API_KEY;
+    delete process.env.AUTOMAKER_HIDE_API_KEY;
+    delete process.env.NODE_ENV;
+  });
+
+  describe('authMiddleware', () => {
+    it('should reject request without any authentication', async () => {
+      const { authMiddleware } = await import('@/lib/auth.js');
+      const { req, res, next } = createMockExpressContext();
+
+      authMiddleware(req, res, next);
+
+      expect(res.status).toHaveBeenCalledWith(401);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'Authentication required.',
+      });
+      expect(next).not.toHaveBeenCalled();
+    });
+
+    it('should reject request with invalid API key', async () => {
+      process.env.AUTOMAKER_API_KEY = 'test-secret-key';
+
+      const { authMiddleware } = await import('@/lib/auth.js');
+      const { req, res, next } = createMockExpressContext();
+      req.headers['x-api-key'] = 'wrong-key';
+
+      authMiddleware(req, res, next);
+
+      expect(res.status).toHaveBeenCalledWith(403);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'Invalid API key.',
+      });
+      expect(next).not.toHaveBeenCalled();
+    });
+
+    it('should call next() with valid API key', async () => {
+      process.env.AUTOMAKER_API_KEY = 'test-secret-key';
+
+      const { authMiddleware } = await import('@/lib/auth.js');
+      const { req, res, next } = createMockExpressContext();
+      req.headers['x-api-key'] = 'test-secret-key';
+
+      authMiddleware(req, res, next);
+
+      expect(next).toHaveBeenCalled();
+      expect(res.status).not.toHaveBeenCalled();
+    });
+
+    it('should authenticate with session token in header', async () => {
+      const { authMiddleware, createSession } = await import('@/lib/auth.js');
+      const token = await createSession();
+      const { req, res, next } = createMockExpressContext();
+      req.headers['x-session-token'] = token;
+
+      authMiddleware(req, res, next);
+
+      expect(next).toHaveBeenCalled();
+      expect(res.status).not.toHaveBeenCalled();
+    });
+
+    it('should reject invalid session token in header', async () => {
+      const { authMiddleware } = await import('@/lib/auth.js');
+      const { req, res, next } = createMockExpressContext();
+      req.headers['x-session-token'] = 'invalid-token';
+
+      authMiddleware(req, res, next);
+
+      expect(res.status).toHaveBeenCalledWith(403);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'Invalid or expired session token.',
+      });
+      expect(next).not.toHaveBeenCalled();
+    });
+
+    it('should authenticate with API key in query parameter', async () => {
+      process.env.AUTOMAKER_API_KEY = 'test-secret-key';
+
+      const { authMiddleware } = await import('@/lib/auth.js');
+      const { req, res, next } = createMockExpressContext();
+      req.query.apiKey = 'test-secret-key';
+
+      authMiddleware(req, res, next);
+
+      expect(next).toHaveBeenCalled();
+      expect(res.status).not.toHaveBeenCalled();
+    });
+
+    it('should authenticate with session cookie', async () => {
+      const { authMiddleware, createSession, getSessionCookieName } = await import('@/lib/auth.js');
+      const token = await createSession();
+      const cookieName = getSessionCookieName();
+      const { req, res, next } = createMockExpressContext();
+      req.cookies = { [cookieName]: token };
+
+      authMiddleware(req, res, next);
+
+      expect(next).toHaveBeenCalled();
+      expect(res.status).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('createSession', () => {
+    it('should create a new session and return token', async () => {
+      const { createSession } = await import('@/lib/auth.js');
+      const token = await createSession();
+
+      expect(token).toBeDefined();
+      expect(typeof token).toBe('string');
+      expect(token.length).toBeGreaterThan(0);
+    });
+
+    it('should create unique tokens for each session', async () => {
+      const { createSession } = await import('@/lib/auth.js');
+      const token1 = await createSession();
+      const token2 = await createSession();
+
+      expect(token1).not.toBe(token2);
+    });
+  });
+
+  describe('validateSession', () => {
+    it('should validate a valid session token', async () => {
+      const { createSession, validateSession } = await import('@/lib/auth.js');
+      const token = await createSession();
+
+      expect(validateSession(token)).toBe(true);
+    });
+
+    it('should reject invalid session token', async () => {
+      const { validateSession } = await import('@/lib/auth.js');
+
+      expect(validateSession('invalid-token')).toBe(false);
+    });
+
+    it('should reject expired session token', async () => {
+      vi.useFakeTimers();
+      const { createSession, validateSession } = await import('@/lib/auth.js');
+      const token = await createSession();
+
+      // Advance time past session expiration (30 days)
+      vi.advanceTimersByTime(31 * 24 * 60 * 60 * 1000);
+
+      expect(validateSession(token)).toBe(false);
+      vi.useRealTimers();
+    });
+  });
+
+  describe('invalidateSession', () => {
+    it('should invalidate a session token', async () => {
+      const { createSession, validateSession, invalidateSession } = await import('@/lib/auth.js');
+      const token = await createSession();
+
+      expect(validateSession(token)).toBe(true);
+      await invalidateSession(token);
+      expect(validateSession(token)).toBe(false);
+    });
+  });
+
+  describe('createWsConnectionToken', () => {
+    it('should create a WebSocket connection token', async () => {
+      const { createWsConnectionToken } = await import('@/lib/auth.js');
+      const token = createWsConnectionToken();
+
+      expect(token).toBeDefined();
+      expect(typeof token).toBe('string');
+      expect(token.length).toBeGreaterThan(0);
+    });
+
+    it('should create unique tokens', async () => {
+      const { createWsConnectionToken } = await import('@/lib/auth.js');
+      const token1 = createWsConnectionToken();
+      const token2 = createWsConnectionToken();
+
+      expect(token1).not.toBe(token2);
+    });
+  });
+
+  describe('validateWsConnectionToken', () => {
+    it('should validate a valid WebSocket token', async () => {
+      const { createWsConnectionToken, validateWsConnectionToken } = await import('@/lib/auth.js');
+      const token = createWsConnectionToken();
+
+      expect(validateWsConnectionToken(token)).toBe(true);
+    });
+
+    it('should reject invalid WebSocket token', async () => {
+      const { validateWsConnectionToken } = await import('@/lib/auth.js');
+
+      expect(validateWsConnectionToken('invalid-token')).toBe(false);
+    });
+
+    it('should reject expired WebSocket token', async () => {
+      vi.useFakeTimers();
+      const { createWsConnectionToken, validateWsConnectionToken } = await import('@/lib/auth.js');
+      const token = createWsConnectionToken();
+
+      // Advance time past token expiration (5 minutes)
+      vi.advanceTimersByTime(6 * 60 * 1000);
+
+      expect(validateWsConnectionToken(token)).toBe(false);
+      vi.useRealTimers();
+    });
+
+    it('should invalidate token after first use (single-use)', async () => {
+      const { createWsConnectionToken, validateWsConnectionToken } = await import('@/lib/auth.js');
+      const token = createWsConnectionToken();
+
+      expect(validateWsConnectionToken(token)).toBe(true);
+      // Token should be deleted after first use
+      expect(validateWsConnectionToken(token)).toBe(false);
+    });
+  });
+
+  describe('validateApiKey', () => {
+    it('should validate correct API key', async () => {
+      process.env.AUTOMAKER_API_KEY = 'test-secret-key';
+
+      const { validateApiKey } = await import('@/lib/auth.js');
+
+      expect(validateApiKey('test-secret-key')).toBe(true);
+    });
+
+    it('should reject incorrect API key', async () => {
+      process.env.AUTOMAKER_API_KEY = 'test-secret-key';
+
+      const { validateApiKey } = await import('@/lib/auth.js');
+
+      expect(validateApiKey('wrong-key')).toBe(false);
+    });
+
+    it('should reject empty string', async () => {
+      process.env.AUTOMAKER_API_KEY = 'test-secret-key';
+
+      const { validateApiKey } = await import('@/lib/auth.js');
+
+      expect(validateApiKey('')).toBe(false);
+    });
+
+    it('should reject null/undefined', async () => {
+      process.env.AUTOMAKER_API_KEY = 'test-secret-key';
+
+      const { validateApiKey } = await import('@/lib/auth.js');
+
+      expect(validateApiKey(null as any)).toBe(false);
+      expect(validateApiKey(undefined as any)).toBe(false);
+    });
+
+    it('should use timing-safe comparison for different lengths', async () => {
+      process.env.AUTOMAKER_API_KEY = 'test-secret-key';
+
+      const { validateApiKey } = await import('@/lib/auth.js');
+
+      // Key with different length should be rejected without timing leak
+      expect(validateApiKey('short')).toBe(false);
+      expect(validateApiKey('very-long-key-that-does-not-match')).toBe(false);
+    });
+  });
+
+  describe('getSessionCookieOptions', () => {
+    it('should return cookie options with httpOnly true', async () => {
+      const { getSessionCookieOptions } = await import('@/lib/auth.js');
+      const options = getSessionCookieOptions();
+
+      expect(options.httpOnly).toBe(true);
+      expect(options.sameSite).toBe('lax');
+      expect(options.path).toBe('/');
+      expect(options.maxAge).toBeGreaterThan(0);
+    });
+
+    it('should set secure to true in production', async () => {
+      process.env.NODE_ENV = 'production';
+
+      const { getSessionCookieOptions } = await import('@/lib/auth.js');
+      const options = getSessionCookieOptions();
+
+      expect(options.secure).toBe(true);
+    });
+
+    it('should set secure to false in non-production', async () => {
+      process.env.NODE_ENV = 'development';
+
+      const { getSessionCookieOptions } = await import('@/lib/auth.js');
+      const options = getSessionCookieOptions();
+
+      expect(options.secure).toBe(false);
+    });
+  });
+
+  describe('getSessionCookieName', () => {
+    it('should return the session cookie name', async () => {
+      const { getSessionCookieName } = await import('@/lib/auth.js');
+      const name = getSessionCookieName();
+
+      expect(name).toBe('automaker_session');
+    });
+  });
+
+  describe('isRequestAuthenticated', () => {
+    it('should return true for authenticated request with API key', async () => {
+      process.env.AUTOMAKER_API_KEY = 'test-secret-key';
+
+      const { isRequestAuthenticated } = await import('@/lib/auth.js');
+      const { req } = createMockExpressContext();
+      req.headers['x-api-key'] = 'test-secret-key';
+
+      expect(isRequestAuthenticated(req)).toBe(true);
+    });
+
+    it('should return false for unauthenticated request', async () => {
+      const { isRequestAuthenticated } = await import('@/lib/auth.js');
+      const { req } = createMockExpressContext();
+
+      expect(isRequestAuthenticated(req)).toBe(false);
+    });
+
+    it('should return true for authenticated request with session token', async () => {
+      const { isRequestAuthenticated, createSession } = await import('@/lib/auth.js');
+      const token = await createSession();
+      const { req } = createMockExpressContext();
+      req.headers['x-session-token'] = token;
+
+      expect(isRequestAuthenticated(req)).toBe(true);
+    });
+  });
+
+  describe('checkRawAuthentication', () => {
+    it('should return true for valid API key in headers', async () => {
+      process.env.AUTOMAKER_API_KEY = 'test-secret-key';
+
+      const { checkRawAuthentication } = await import('@/lib/auth.js');
+
+      expect(checkRawAuthentication({ 'x-api-key': 'test-secret-key' }, {}, {})).toBe(true);
+    });
+
+    it('should return true for valid session token in headers', async () => {
+      const { checkRawAuthentication, createSession } = await import('@/lib/auth.js');
+      const token = await createSession();
+
+      expect(checkRawAuthentication({ 'x-session-token': token }, {}, {})).toBe(true);
+    });
+
+    it('should return true for valid API key in query', async () => {
+      process.env.AUTOMAKER_API_KEY = 'test-secret-key';
+
+      const { checkRawAuthentication } = await import('@/lib/auth.js');
+
+      expect(checkRawAuthentication({}, { apiKey: 'test-secret-key' }, {})).toBe(true);
+    });
+
+    it('should return true for valid session cookie', async () => {
+      const { checkRawAuthentication, createSession, getSessionCookieName } =
+        await import('@/lib/auth.js');
+      const token = await createSession();
+      const cookieName = getSessionCookieName();
+
+      expect(checkRawAuthentication({}, {}, { [cookieName]: token })).toBe(true);
+    });
+
+    it('should return false for invalid credentials', async () => {
+      const { checkRawAuthentication } = await import('@/lib/auth.js');
+
+      expect(checkRawAuthentication({}, {}, {})).toBe(false);
+    });
+  });
+
+  describe('isAuthEnabled', () => {
+    it('should always return true (auth is always required)', async () => {
+      const { isAuthEnabled } = await import('@/lib/auth.js');
+      expect(isAuthEnabled()).toBe(true);
+    });
+  });
+
+  describe('getAuthStatus', () => {
+    it('should return enabled status with api_key_or_session method', async () => {
+      const { getAuthStatus } = await import('@/lib/auth.js');
+      const status = getAuthStatus();
+
+      expect(status).toEqual({
+        enabled: true,
+        method: 'api_key_or_session',
+      });
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/automaker-paths.test.ts b/temp_repo/apps/server/tests/unit/lib/automaker-paths.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..09042ca03990340404b531ef77709e0076de8232
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/automaker-paths.test.ts
@@ -0,0 +1,214 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import path from 'path';
+import fs from 'fs/promises';
+import os from 'os';
+import {
+  getAutomakerDir,
+  getFeaturesDir,
+  getFeatureDir,
+  getFeatureImagesDir,
+  getBoardDir,
+  getImagesDir,
+  getWorktreesDir,
+  getAppSpecPath,
+  getBranchTrackingPath,
+  ensureAutomakerDir,
+  getGlobalSettingsPath,
+  getCredentialsPath,
+  getProjectSettingsPath,
+  ensureDataDir,
+} from '@automaker/platform';
+
+describe('automaker-paths.ts', () => {
+  const projectPath = path.join('/test', 'project');
+
+  describe('getAutomakerDir', () => {
+    it('should return path to .automaker directory', () => {
+      expect(getAutomakerDir(projectPath)).toBe(path.join(projectPath, '.automaker'));
+    });
+
+    it('should handle paths with trailing slashes', () => {
+      const pathWithSlash = path.join('/test', 'project') + path.sep;
+      expect(getAutomakerDir(pathWithSlash)).toBe(path.join(pathWithSlash, '.automaker'));
+    });
+  });
+
+  describe('getFeaturesDir', () => {
+    it('should return path to features directory', () => {
+      expect(getFeaturesDir(projectPath)).toBe(path.join(projectPath, '.automaker', 'features'));
+    });
+  });
+
+  describe('getFeatureDir', () => {
+    it('should return path to specific feature directory', () => {
+      expect(getFeatureDir(projectPath, 'feature-123')).toBe(
+        path.join(projectPath, '.automaker', 'features', 'feature-123')
+      );
+    });
+
+    it('should handle feature IDs with special characters', () => {
+      expect(getFeatureDir(projectPath, 'my-feature_v2')).toBe(
+        path.join(projectPath, '.automaker', 'features', 'my-feature_v2')
+      );
+    });
+  });
+
+  describe('getFeatureImagesDir', () => {
+    it('should return path to feature images directory', () => {
+      expect(getFeatureImagesDir(projectPath, 'feature-123')).toBe(
+        path.join(projectPath, '.automaker', 'features', 'feature-123', 'images')
+      );
+    });
+  });
+
+  describe('getBoardDir', () => {
+    it('should return path to board directory', () => {
+      expect(getBoardDir(projectPath)).toBe(path.join(projectPath, '.automaker', 'board'));
+    });
+  });
+
+  describe('getImagesDir', () => {
+    it('should return path to images directory', () => {
+      expect(getImagesDir(projectPath)).toBe(path.join(projectPath, '.automaker', 'images'));
+    });
+  });
+
+  describe('getWorktreesDir', () => {
+    it('should return path to worktrees directory', () => {
+      expect(getWorktreesDir(projectPath)).toBe(path.join(projectPath, '.automaker', 'worktrees'));
+    });
+  });
+
+  describe('getAppSpecPath', () => {
+    it('should return path to app_spec.txt file', () => {
+      expect(getAppSpecPath(projectPath)).toBe(
+        path.join(projectPath, '.automaker', 'app_spec.txt')
+      );
+    });
+  });
+
+  describe('getBranchTrackingPath', () => {
+    it('should return path to active-branches.json file', () => {
+      expect(getBranchTrackingPath(projectPath)).toBe(
+        path.join(projectPath, '.automaker', 'active-branches.json')
+      );
+    });
+  });
+
+  describe('ensureAutomakerDir', () => {
+    let testDir: string;
+
+    beforeEach(async () => {
+      testDir = path.join(os.tmpdir(), `automaker-paths-test-${Date.now()}`);
+      await fs.mkdir(testDir, { recursive: true });
+    });
+
+    afterEach(async () => {
+      try {
+        await fs.rm(testDir, { recursive: true, force: true });
+      } catch {
+        // Ignore cleanup errors
+      }
+    });
+
+    it('should create automaker directory and return path', async () => {
+      const result = await ensureAutomakerDir(testDir);
+
+      expect(result).toBe(path.join(testDir, '.automaker'));
+      const stats = await fs.stat(result);
+      expect(stats.isDirectory()).toBe(true);
+    });
+
+    it('should succeed if directory already exists', async () => {
+      const automakerDir = path.join(testDir, '.automaker');
+      await fs.mkdir(automakerDir, { recursive: true });
+
+      const result = await ensureAutomakerDir(testDir);
+
+      expect(result).toBe(automakerDir);
+    });
+  });
+
+  describe('getGlobalSettingsPath', () => {
+    it('should return path to settings.json in data directory', () => {
+      const dataDir = '/test/data';
+      const result = getGlobalSettingsPath(dataDir);
+      expect(result).toBe(path.join(dataDir, 'settings.json'));
+    });
+
+    it('should handle paths with trailing slashes', () => {
+      const dataDir = '/test/data' + path.sep;
+      const result = getGlobalSettingsPath(dataDir);
+      expect(result).toBe(path.join(dataDir, 'settings.json'));
+    });
+  });
+
+  describe('getCredentialsPath', () => {
+    it('should return path to credentials.json in data directory', () => {
+      const dataDir = '/test/data';
+      const result = getCredentialsPath(dataDir);
+      expect(result).toBe(path.join(dataDir, 'credentials.json'));
+    });
+
+    it('should handle paths with trailing slashes', () => {
+      const dataDir = '/test/data' + path.sep;
+      const result = getCredentialsPath(dataDir);
+      expect(result).toBe(path.join(dataDir, 'credentials.json'));
+    });
+  });
+
+  describe('getProjectSettingsPath', () => {
+    it('should return path to settings.json in project .automaker directory', () => {
+      const projectPath = '/test/project';
+      const result = getProjectSettingsPath(projectPath);
+      expect(result).toBe(path.join(projectPath, '.automaker', 'settings.json'));
+    });
+
+    it('should handle paths with trailing slashes', () => {
+      const projectPath = '/test/project' + path.sep;
+      const result = getProjectSettingsPath(projectPath);
+      expect(result).toBe(path.join(projectPath, '.automaker', 'settings.json'));
+    });
+  });
+
+  describe('ensureDataDir', () => {
+    let testDir: string;
+
+    beforeEach(async () => {
+      testDir = path.join(os.tmpdir(), `data-dir-test-${Date.now()}`);
+    });
+
+    afterEach(async () => {
+      try {
+        await fs.rm(testDir, { recursive: true, force: true });
+      } catch {
+        // Ignore cleanup errors
+      }
+    });
+
+    it('should create data directory and return path', async () => {
+      const result = await ensureDataDir(testDir);
+
+      expect(result).toBe(testDir);
+      const stats = await fs.stat(testDir);
+      expect(stats.isDirectory()).toBe(true);
+    });
+
+    it('should succeed if directory already exists', async () => {
+      await fs.mkdir(testDir, { recursive: true });
+
+      const result = await ensureDataDir(testDir);
+
+      expect(result).toBe(testDir);
+    });
+
+    it('should create nested directories', async () => {
+      const nestedDir = path.join(testDir, 'nested', 'deep');
+      const result = await ensureDataDir(nestedDir);
+
+      expect(result).toBe(nestedDir);
+      const stats = await fs.stat(nestedDir);
+      expect(stats.isDirectory()).toBe(true);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/conversation-utils.test.ts b/temp_repo/apps/server/tests/unit/lib/conversation-utils.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bb7c6684ef8c1e24d01197bfb8e395a69b0d6963
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/conversation-utils.test.ts
@@ -0,0 +1,224 @@
+import { describe, it, expect } from 'vitest';
+import {
+  extractTextFromContent,
+  normalizeContentBlocks,
+  formatHistoryAsText,
+  convertHistoryToMessages,
+} from '@automaker/utils';
+import { conversationHistoryFixture } from '../../fixtures/messages.js';
+
+describe('conversation-utils.ts', () => {
+  describe('extractTextFromContent', () => {
+    it('should return string content as-is', () => {
+      const result = extractTextFromContent('Hello world');
+      expect(result).toBe('Hello world');
+    });
+
+    it('should extract text from single text block', () => {
+      const content = [{ type: 'text', text: 'Hello' }];
+      const result = extractTextFromContent(content);
+      expect(result).toBe('Hello');
+    });
+
+    it('should extract and join multiple text blocks with newlines', () => {
+      const content = [
+        { type: 'text', text: 'First block' },
+        { type: 'text', text: 'Second block' },
+        { type: 'text', text: 'Third block' },
+      ];
+      const result = extractTextFromContent(content);
+      expect(result).toBe('First block\nSecond block\nThird block');
+    });
+
+    it('should ignore non-text blocks', () => {
+      const content = [
+        { type: 'text', text: 'Text content' },
+        { type: 'image', source: { type: 'base64', data: 'abc' } },
+        { type: 'text', text: 'More text' },
+        { type: 'tool_use', name: 'bash', input: {} },
+      ];
+      const result = extractTextFromContent(content);
+      expect(result).toBe('Text content\nMore text');
+    });
+
+    it('should handle blocks without text property', () => {
+      const content = [
+        { type: 'text', text: 'Valid' },
+        { type: 'text' } as any,
+        { type: 'text', text: 'Also valid' },
+      ];
+      const result = extractTextFromContent(content);
+      expect(result).toBe('Valid\n\nAlso valid');
+    });
+
+    it('should handle empty array', () => {
+      const result = extractTextFromContent([]);
+      expect(result).toBe('');
+    });
+
+    it('should handle array with only non-text blocks', () => {
+      const content = [
+        { type: 'image', source: {} },
+        { type: 'tool_use', name: 'test' },
+      ];
+      const result = extractTextFromContent(content);
+      expect(result).toBe('');
+    });
+  });
+
+  describe('normalizeContentBlocks', () => {
+    it('should convert string to content block array', () => {
+      const result = normalizeContentBlocks('Hello');
+      expect(result).toEqual([{ type: 'text', text: 'Hello' }]);
+    });
+
+    it('should return array content as-is', () => {
+      const content = [
+        { type: 'text', text: 'Hello' },
+        { type: 'image', source: {} },
+      ];
+      const result = normalizeContentBlocks(content);
+      expect(result).toBe(content);
+      expect(result).toHaveLength(2);
+    });
+
+    it('should handle empty string', () => {
+      const result = normalizeContentBlocks('');
+      expect(result).toEqual([{ type: 'text', text: '' }]);
+    });
+  });
+
+  describe('formatHistoryAsText', () => {
+    it('should return empty string for empty history', () => {
+      const result = formatHistoryAsText([]);
+      expect(result).toBe('');
+    });
+
+    it('should format single user message', () => {
+      const history = [{ role: 'user' as const, content: 'Hello' }];
+      const result = formatHistoryAsText(history);
+
+      expect(result).toContain('Previous conversation:');
+      expect(result).toContain('User: Hello');
+      expect(result).toContain('---');
+    });
+
+    it('should format single assistant message', () => {
+      const history = [{ role: 'assistant' as const, content: 'Hi there' }];
+      const result = formatHistoryAsText(history);
+
+      expect(result).toContain('Assistant: Hi there');
+    });
+
+    it('should format multiple messages with correct roles', () => {
+      const history = conversationHistoryFixture.slice(0, 2);
+      const result = formatHistoryAsText(history);
+
+      expect(result).toContain('User: Hello, can you help me?');
+      expect(result).toContain('Assistant: Of course! How can I assist you today?');
+      expect(result).toContain('---');
+    });
+
+    it('should handle messages with array content (multipart)', () => {
+      const history = [conversationHistoryFixture[2]]; // Has text + image
+      const result = formatHistoryAsText(history);
+
+      expect(result).toContain('What is in this image?');
+      expect(result).not.toContain('base64'); // Should not include image data
+    });
+
+    it('should format all messages from fixture', () => {
+      const result = formatHistoryAsText(conversationHistoryFixture);
+
+      expect(result).toContain('Previous conversation:');
+      expect(result).toContain('User: Hello, can you help me?');
+      expect(result).toContain('Assistant: Of course!');
+      expect(result).toContain('User: What is in this image?');
+      expect(result).toContain('---');
+    });
+
+    it('should separate messages with double newlines', () => {
+      const history = [
+        { role: 'user' as const, content: 'First' },
+        { role: 'assistant' as const, content: 'Second' },
+      ];
+      const result = formatHistoryAsText(history);
+
+      expect(result).toMatch(/User: First\n\nAssistant: Second/);
+    });
+  });
+
+  describe('convertHistoryToMessages', () => {
+    it('should convert empty history', () => {
+      const result = convertHistoryToMessages([]);
+      expect(result).toEqual([]);
+    });
+
+    it('should convert single message to SDK format', () => {
+      const history = [{ role: 'user' as const, content: 'Hello' }];
+      const result = convertHistoryToMessages(history);
+
+      expect(result).toHaveLength(1);
+      expect(result[0]).toMatchObject({
+        type: 'user',
+        session_id: '',
+        message: {
+          role: 'user',
+          content: [{ type: 'text', text: 'Hello' }],
+        },
+        parent_tool_use_id: null,
+      });
+    });
+
+    it('should normalize string content to array', () => {
+      const history = [{ role: 'assistant' as const, content: 'Response' }];
+      const result = convertHistoryToMessages(history);
+
+      expect(result[0].message.content).toEqual([{ type: 'text', text: 'Response' }]);
+    });
+
+    it('should preserve array content', () => {
+      const history = [
+        {
+          role: 'user' as const,
+          content: [
+            { type: 'text', text: 'Hello' },
+            { type: 'image', source: {} },
+          ],
+        },
+      ];
+      const result = convertHistoryToMessages(history);
+
+      expect(result[0].message.content).toHaveLength(2);
+      expect(result[0].message.content[0]).toEqual({ type: 'text', text: 'Hello' });
+    });
+
+    it('should convert multiple messages', () => {
+      const history = conversationHistoryFixture.slice(0, 2);
+      const result = convertHistoryToMessages(history);
+
+      expect(result).toHaveLength(2);
+      expect(result[0].type).toBe('user');
+      expect(result[1].type).toBe('assistant');
+    });
+
+    it('should set correct fields for SDK format', () => {
+      const history = [{ role: 'user' as const, content: 'Test' }];
+      const result = convertHistoryToMessages(history);
+
+      expect(result[0].session_id).toBe('');
+      expect(result[0].parent_tool_use_id).toBeNull();
+      expect(result[0].type).toBe('user');
+      expect(result[0].message.role).toBe('user');
+    });
+
+    it('should handle all messages from fixture', () => {
+      const result = convertHistoryToMessages(conversationHistoryFixture);
+
+      expect(result).toHaveLength(3);
+      expect(result[0].message.content).toBeInstanceOf(Array);
+      expect(result[1].message.content).toBeInstanceOf(Array);
+      expect(result[2].message.content).toBeInstanceOf(Array);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/dependency-resolver.test.ts b/temp_repo/apps/server/tests/unit/lib/dependency-resolver.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b018dacdd85f9bd1fc17843b4ae5d6b3f97e6661
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/dependency-resolver.test.ts
@@ -0,0 +1,432 @@
+import { describe, it, expect } from 'vitest';
+import {
+  resolveDependencies,
+  areDependenciesSatisfied,
+  getBlockingDependencies,
+  type DependencyResolutionResult,
+} from '@automaker/dependency-resolver';
+import type { Feature } from '@automaker/types';
+
+// Helper to create test features
+function createFeature(
+  id: string,
+  options: {
+    status?: string;
+    priority?: number;
+    dependencies?: string[];
+    category?: string;
+    description?: string;
+  } = {}
+): Feature {
+  return {
+    id,
+    category: options.category || 'test',
+    description: options.description || `Feature ${id}`,
+    status: options.status || 'backlog',
+    priority: options.priority,
+    dependencies: options.dependencies,
+  };
+}
+
+describe('dependency-resolver.ts', () => {
+  describe('resolveDependencies', () => {
+    it('should handle empty feature list', () => {
+      const result = resolveDependencies([]);
+
+      expect(result.orderedFeatures).toEqual([]);
+      expect(result.circularDependencies).toEqual([]);
+      expect(result.missingDependencies.size).toBe(0);
+      expect(result.blockedFeatures.size).toBe(0);
+    });
+
+    it('should handle features with no dependencies', () => {
+      const features = [
+        createFeature('f1', { priority: 1 }),
+        createFeature('f2', { priority: 2 }),
+        createFeature('f3', { priority: 3 }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.orderedFeatures).toHaveLength(3);
+      expect(result.orderedFeatures[0].id).toBe('f1'); // Highest priority first
+      expect(result.orderedFeatures[1].id).toBe('f2');
+      expect(result.orderedFeatures[2].id).toBe('f3');
+      expect(result.circularDependencies).toEqual([]);
+      expect(result.missingDependencies.size).toBe(0);
+      expect(result.blockedFeatures.size).toBe(0);
+    });
+
+    it('should order features by dependencies (simple chain)', () => {
+      const features = [
+        createFeature('f3', { dependencies: ['f2'] }),
+        createFeature('f1'),
+        createFeature('f2', { dependencies: ['f1'] }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.orderedFeatures).toHaveLength(3);
+      expect(result.orderedFeatures[0].id).toBe('f1');
+      expect(result.orderedFeatures[1].id).toBe('f2');
+      expect(result.orderedFeatures[2].id).toBe('f3');
+      expect(result.circularDependencies).toEqual([]);
+    });
+
+    it('should respect priority within same dependency level', () => {
+      const features = [
+        createFeature('f1', { priority: 3, dependencies: ['base'] }),
+        createFeature('f2', { priority: 1, dependencies: ['base'] }),
+        createFeature('f3', { priority: 2, dependencies: ['base'] }),
+        createFeature('base'),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.orderedFeatures[0].id).toBe('base');
+      expect(result.orderedFeatures[1].id).toBe('f2'); // Priority 1
+      expect(result.orderedFeatures[2].id).toBe('f3'); // Priority 2
+      expect(result.orderedFeatures[3].id).toBe('f1'); // Priority 3
+    });
+
+    it('should use default priority of 2 when not specified', () => {
+      const features = [
+        createFeature('f1', { priority: 1 }),
+        createFeature('f2'), // No priority = default 2
+        createFeature('f3', { priority: 3 }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.orderedFeatures[0].id).toBe('f1');
+      expect(result.orderedFeatures[1].id).toBe('f2');
+      expect(result.orderedFeatures[2].id).toBe('f3');
+    });
+
+    it('should detect missing dependencies', () => {
+      const features = [
+        createFeature('f1', { dependencies: ['missing1', 'missing2'] }),
+        createFeature('f2', { dependencies: ['f1', 'missing3'] }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.missingDependencies.size).toBe(2);
+      expect(result.missingDependencies.get('f1')).toEqual(['missing1', 'missing2']);
+      expect(result.missingDependencies.get('f2')).toEqual(['missing3']);
+      expect(result.orderedFeatures).toHaveLength(2);
+    });
+
+    it('should detect blocked features (incomplete dependencies)', () => {
+      const features = [
+        createFeature('f1', { status: 'in_progress' }),
+        createFeature('f2', { status: 'backlog', dependencies: ['f1'] }),
+        createFeature('f3', { status: 'completed' }),
+        createFeature('f4', { status: 'backlog', dependencies: ['f3'] }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.blockedFeatures.size).toBe(1);
+      expect(result.blockedFeatures.get('f2')).toEqual(['f1']);
+      expect(result.blockedFeatures.has('f4')).toBe(false); // f3 is completed
+    });
+
+    it('should not block features whose dependencies are verified', () => {
+      const features = [
+        createFeature('f1', { status: 'verified' }),
+        createFeature('f2', { status: 'backlog', dependencies: ['f1'] }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.blockedFeatures.size).toBe(0);
+    });
+
+    it('should detect circular dependencies (simple cycle)', () => {
+      const features = [
+        createFeature('f1', { dependencies: ['f2'] }),
+        createFeature('f2', { dependencies: ['f1'] }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.circularDependencies).toHaveLength(1);
+      expect(result.circularDependencies[0]).toContain('f1');
+      expect(result.circularDependencies[0]).toContain('f2');
+      expect(result.orderedFeatures).toHaveLength(2); // Features still included
+    });
+
+    it('should detect circular dependencies (multi-node cycle)', () => {
+      const features = [
+        createFeature('f1', { dependencies: ['f3'] }),
+        createFeature('f2', { dependencies: ['f1'] }),
+        createFeature('f3', { dependencies: ['f2'] }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.circularDependencies.length).toBeGreaterThan(0);
+      expect(result.orderedFeatures).toHaveLength(3);
+    });
+
+    it('should handle mixed valid and circular dependencies', () => {
+      const features = [
+        createFeature('base'),
+        createFeature('f1', { dependencies: ['base', 'f2'] }),
+        createFeature('f2', { dependencies: ['f1'] }), // Circular with f1
+        createFeature('f3', { dependencies: ['base'] }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.circularDependencies.length).toBeGreaterThan(0);
+      expect(result.orderedFeatures[0].id).toBe('base');
+      expect(result.orderedFeatures).toHaveLength(4);
+    });
+
+    it('should handle complex dependency graph', () => {
+      const features = [
+        createFeature('ui', { dependencies: ['api', 'auth'], priority: 1 }),
+        createFeature('api', { dependencies: ['db'], priority: 2 }),
+        createFeature('auth', { dependencies: ['db'], priority: 1 }),
+        createFeature('db', { priority: 1 }),
+        createFeature('tests', { dependencies: ['ui'], priority: 3 }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      const order = result.orderedFeatures.map((f) => f.id);
+
+      expect(order[0]).toBe('db');
+      expect(order.indexOf('db')).toBeLessThan(order.indexOf('api'));
+      expect(order.indexOf('db')).toBeLessThan(order.indexOf('auth'));
+      expect(order.indexOf('api')).toBeLessThan(order.indexOf('ui'));
+      expect(order.indexOf('auth')).toBeLessThan(order.indexOf('ui'));
+      expect(order.indexOf('ui')).toBeLessThan(order.indexOf('tests'));
+      expect(result.circularDependencies).toEqual([]);
+    });
+
+    it('should handle features with empty dependencies array', () => {
+      const features = [
+        createFeature('f1', { dependencies: [] }),
+        createFeature('f2', { dependencies: [] }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.orderedFeatures).toHaveLength(2);
+      expect(result.circularDependencies).toEqual([]);
+      expect(result.blockedFeatures.size).toBe(0);
+    });
+
+    it('should track multiple blocking dependencies', () => {
+      const features = [
+        createFeature('f1', { status: 'in_progress' }),
+        createFeature('f2', { status: 'backlog' }),
+        createFeature('f3', { status: 'backlog', dependencies: ['f1', 'f2'] }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.blockedFeatures.get('f3')).toEqual(['f1', 'f2']);
+    });
+
+    it('should handle self-referencing dependency', () => {
+      const features = [createFeature('f1', { dependencies: ['f1'] })];
+
+      const result = resolveDependencies(features);
+
+      expect(result.circularDependencies.length).toBeGreaterThan(0);
+      expect(result.orderedFeatures).toHaveLength(1);
+    });
+  });
+
+  describe('areDependenciesSatisfied', () => {
+    it('should return true for feature with no dependencies', () => {
+      const feature = createFeature('f1');
+      const allFeatures = [feature];
+
+      expect(areDependenciesSatisfied(feature, allFeatures)).toBe(true);
+    });
+
+    it('should return true for feature with empty dependencies array', () => {
+      const feature = createFeature('f1', { dependencies: [] });
+      const allFeatures = [feature];
+
+      expect(areDependenciesSatisfied(feature, allFeatures)).toBe(true);
+    });
+
+    it('should return true when all dependencies are completed', () => {
+      const allFeatures = [
+        createFeature('f1', { status: 'completed' }),
+        createFeature('f2', { status: 'completed' }),
+        createFeature('f3', { status: 'backlog', dependencies: ['f1', 'f2'] }),
+      ];
+
+      expect(areDependenciesSatisfied(allFeatures[2], allFeatures)).toBe(true);
+    });
+
+    it('should return true when all dependencies are verified', () => {
+      const allFeatures = [
+        createFeature('f1', { status: 'verified' }),
+        createFeature('f2', { status: 'verified' }),
+        createFeature('f3', { status: 'backlog', dependencies: ['f1', 'f2'] }),
+      ];
+
+      expect(areDependenciesSatisfied(allFeatures[2], allFeatures)).toBe(true);
+    });
+
+    it('should return true when dependencies are mix of completed and verified', () => {
+      const allFeatures = [
+        createFeature('f1', { status: 'completed' }),
+        createFeature('f2', { status: 'verified' }),
+        createFeature('f3', { status: 'backlog', dependencies: ['f1', 'f2'] }),
+      ];
+
+      expect(areDependenciesSatisfied(allFeatures[2], allFeatures)).toBe(true);
+    });
+
+    it('should return false when any dependency is in_progress', () => {
+      const allFeatures = [
+        createFeature('f1', { status: 'completed' }),
+        createFeature('f2', { status: 'in_progress' }),
+        createFeature('f3', { status: 'backlog', dependencies: ['f1', 'f2'] }),
+      ];
+
+      expect(areDependenciesSatisfied(allFeatures[2], allFeatures)).toBe(false);
+    });
+
+    it('should return false when any dependency is in backlog', () => {
+      const allFeatures = [
+        createFeature('f1', { status: 'completed' }),
+        createFeature('f2', { status: 'backlog' }),
+        createFeature('f3', { status: 'backlog', dependencies: ['f1', 'f2'] }),
+      ];
+
+      expect(areDependenciesSatisfied(allFeatures[2], allFeatures)).toBe(false);
+    });
+
+    it('should return false when dependency is missing', () => {
+      const allFeatures = [createFeature('f1', { status: 'backlog', dependencies: ['missing'] })];
+
+      expect(areDependenciesSatisfied(allFeatures[0], allFeatures)).toBe(false);
+    });
+
+    it('should return false when multiple dependencies are incomplete', () => {
+      const allFeatures = [
+        createFeature('f1', { status: 'backlog' }),
+        createFeature('f2', { status: 'in_progress' }),
+        createFeature('f3', { status: 'waiting_approval' }),
+        createFeature('f4', { status: 'backlog', dependencies: ['f1', 'f2', 'f3'] }),
+      ];
+
+      expect(areDependenciesSatisfied(allFeatures[3], allFeatures)).toBe(false);
+    });
+  });
+
+  describe('getBlockingDependencies', () => {
+    it('should return empty array for feature with no dependencies', () => {
+      const feature = createFeature('f1');
+      const allFeatures = [feature];
+
+      expect(getBlockingDependencies(feature, allFeatures)).toEqual([]);
+    });
+
+    it('should return empty array for feature with empty dependencies array', () => {
+      const feature = createFeature('f1', { dependencies: [] });
+      const allFeatures = [feature];
+
+      expect(getBlockingDependencies(feature, allFeatures)).toEqual([]);
+    });
+
+    it('should return empty array when all dependencies are completed', () => {
+      const allFeatures = [
+        createFeature('f1', { status: 'completed' }),
+        createFeature('f2', { status: 'completed' }),
+        createFeature('f3', { status: 'backlog', dependencies: ['f1', 'f2'] }),
+      ];
+
+      expect(getBlockingDependencies(allFeatures[2], allFeatures)).toEqual([]);
+    });
+
+    it('should return empty array when all dependencies are verified', () => {
+      const allFeatures = [
+        createFeature('f1', { status: 'verified' }),
+        createFeature('f2', { status: 'verified' }),
+        createFeature('f3', { status: 'backlog', dependencies: ['f1', 'f2'] }),
+      ];
+
+      expect(getBlockingDependencies(allFeatures[2], allFeatures)).toEqual([]);
+    });
+
+    it('should return blocking dependencies in backlog status', () => {
+      const allFeatures = [
+        createFeature('f1', { status: 'backlog' }),
+        createFeature('f2', { status: 'completed' }),
+        createFeature('f3', { status: 'backlog', dependencies: ['f1', 'f2'] }),
+      ];
+
+      expect(getBlockingDependencies(allFeatures[2], allFeatures)).toEqual(['f1']);
+    });
+
+    it('should return blocking dependencies in in_progress status', () => {
+      const allFeatures = [
+        createFeature('f1', { status: 'in_progress' }),
+        createFeature('f2', { status: 'verified' }),
+        createFeature('f3', { status: 'backlog', dependencies: ['f1', 'f2'] }),
+      ];
+
+      expect(getBlockingDependencies(allFeatures[2], allFeatures)).toEqual(['f1']);
+    });
+
+    it('should return blocking dependencies in waiting_approval status', () => {
+      const allFeatures = [
+        createFeature('f1', { status: 'waiting_approval' }),
+        createFeature('f2', { status: 'completed' }),
+        createFeature('f3', { status: 'backlog', dependencies: ['f1', 'f2'] }),
+      ];
+
+      expect(getBlockingDependencies(allFeatures[2], allFeatures)).toEqual(['f1']);
+    });
+
+    it('should return all blocking dependencies', () => {
+      const allFeatures = [
+        createFeature('f1', { status: 'backlog' }),
+        createFeature('f2', { status: 'in_progress' }),
+        createFeature('f3', { status: 'waiting_approval' }),
+        createFeature('f4', { status: 'completed' }),
+        createFeature('f5', { status: 'backlog', dependencies: ['f1', 'f2', 'f3', 'f4'] }),
+      ];
+
+      const blocking = getBlockingDependencies(allFeatures[4], allFeatures);
+      expect(blocking).toHaveLength(3);
+      expect(blocking).toContain('f1');
+      expect(blocking).toContain('f2');
+      expect(blocking).toContain('f3');
+      expect(blocking).not.toContain('f4');
+    });
+
+    it('should handle missing dependencies', () => {
+      const allFeatures = [createFeature('f1', { status: 'backlog', dependencies: ['missing'] })];
+
+      // Missing dependencies won't be in the blocking list since they don't exist
+      expect(getBlockingDependencies(allFeatures[0], allFeatures)).toEqual([]);
+    });
+
+    it('should handle mix of completed, verified, and incomplete dependencies', () => {
+      const allFeatures = [
+        createFeature('f1', { status: 'completed' }),
+        createFeature('f2', { status: 'verified' }),
+        createFeature('f3', { status: 'in_progress' }),
+        createFeature('f4', { status: 'backlog' }),
+        createFeature('f5', { status: 'backlog', dependencies: ['f1', 'f2', 'f3', 'f4'] }),
+      ];
+
+      const blocking = getBlockingDependencies(allFeatures[4], allFeatures);
+      expect(blocking).toHaveLength(2);
+      expect(blocking).toContain('f3');
+      expect(blocking).toContain('f4');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/enhancement-prompts.test.ts b/temp_repo/apps/server/tests/unit/lib/enhancement-prompts.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..77d118d3e5bb23dd070225169189603290c0e054
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/enhancement-prompts.test.ts
@@ -0,0 +1,240 @@
+import { describe, it, expect } from 'vitest';
+import {
+  getEnhancementPrompt,
+  getSystemPrompt,
+  getExamples,
+  buildUserPrompt,
+  isValidEnhancementMode,
+  getAvailableEnhancementModes,
+  IMPROVE_SYSTEM_PROMPT,
+  TECHNICAL_SYSTEM_PROMPT,
+  SIMPLIFY_SYSTEM_PROMPT,
+  ACCEPTANCE_SYSTEM_PROMPT,
+  IMPROVE_EXAMPLES,
+  TECHNICAL_EXAMPLES,
+  SIMPLIFY_EXAMPLES,
+  ACCEPTANCE_EXAMPLES,
+  type EnhancementMode,
+} from '@/lib/enhancement-prompts.js';
+
+const ENHANCEMENT_MODES: EnhancementMode[] = [
+  'improve',
+  'technical',
+  'simplify',
+  'acceptance',
+  'ux-reviewer',
+];
+
+describe('enhancement-prompts.ts', () => {
+  describe('System Prompt Constants', () => {
+    it('should have non-empty improve system prompt', () => {
+      expect(IMPROVE_SYSTEM_PROMPT).toBeDefined();
+      expect(IMPROVE_SYSTEM_PROMPT.length).toBeGreaterThan(100);
+      expect(IMPROVE_SYSTEM_PROMPT).toContain('ANALYZE');
+      expect(IMPROVE_SYSTEM_PROMPT).toContain('CLARIFY');
+    });
+
+    it('should have non-empty technical system prompt', () => {
+      expect(TECHNICAL_SYSTEM_PROMPT).toBeDefined();
+      expect(TECHNICAL_SYSTEM_PROMPT.length).toBeGreaterThan(100);
+      expect(TECHNICAL_SYSTEM_PROMPT).toContain('technical');
+    });
+
+    it('should have non-empty simplify system prompt', () => {
+      expect(SIMPLIFY_SYSTEM_PROMPT).toBeDefined();
+      expect(SIMPLIFY_SYSTEM_PROMPT.length).toBeGreaterThan(100);
+      expect(SIMPLIFY_SYSTEM_PROMPT).toContain('simplify');
+    });
+
+    it('should have non-empty acceptance system prompt', () => {
+      expect(ACCEPTANCE_SYSTEM_PROMPT).toBeDefined();
+      expect(ACCEPTANCE_SYSTEM_PROMPT.length).toBeGreaterThan(100);
+      expect(ACCEPTANCE_SYSTEM_PROMPT).toContain('acceptance criteria');
+    });
+  });
+
+  describe('Example Constants', () => {
+    it('should have improve examples with input and output', () => {
+      expect(IMPROVE_EXAMPLES).toBeDefined();
+      expect(IMPROVE_EXAMPLES.length).toBeGreaterThan(0);
+      IMPROVE_EXAMPLES.forEach((example) => {
+        expect(example.input).toBeDefined();
+        expect(example.output).toBeDefined();
+        expect(example.input.length).toBeGreaterThan(0);
+        expect(example.output.length).toBeGreaterThan(0);
+      });
+    });
+
+    it('should have technical examples with input and output', () => {
+      expect(TECHNICAL_EXAMPLES).toBeDefined();
+      expect(TECHNICAL_EXAMPLES.length).toBeGreaterThan(0);
+      TECHNICAL_EXAMPLES.forEach((example) => {
+        expect(example.input).toBeDefined();
+        expect(example.output).toBeDefined();
+      });
+    });
+
+    it('should have simplify examples with input and output', () => {
+      expect(SIMPLIFY_EXAMPLES).toBeDefined();
+      expect(SIMPLIFY_EXAMPLES.length).toBeGreaterThan(0);
+      SIMPLIFY_EXAMPLES.forEach((example) => {
+        expect(example.input).toBeDefined();
+        expect(example.output).toBeDefined();
+      });
+    });
+
+    it('should have acceptance examples with input and output', () => {
+      expect(ACCEPTANCE_EXAMPLES).toBeDefined();
+      expect(ACCEPTANCE_EXAMPLES.length).toBeGreaterThan(0);
+      ACCEPTANCE_EXAMPLES.forEach((example) => {
+        expect(example.input).toBeDefined();
+        expect(example.output).toBeDefined();
+      });
+    });
+  });
+
+  describe('getEnhancementPrompt', () => {
+    it('should return config for improve mode', () => {
+      const config = getEnhancementPrompt('improve');
+      expect(config.systemPrompt).toBe(IMPROVE_SYSTEM_PROMPT);
+      expect(config.description).toContain('clear');
+    });
+
+    it('should return config for technical mode', () => {
+      const config = getEnhancementPrompt('technical');
+      expect(config.systemPrompt).toBe(TECHNICAL_SYSTEM_PROMPT);
+      expect(config.description).toContain('technical');
+    });
+
+    it('should return config for simplify mode', () => {
+      const config = getEnhancementPrompt('simplify');
+      expect(config.systemPrompt).toBe(SIMPLIFY_SYSTEM_PROMPT);
+      expect(config.description).toContain('concise');
+    });
+
+    it('should return config for acceptance mode', () => {
+      const config = getEnhancementPrompt('acceptance');
+      expect(config.systemPrompt).toBe(ACCEPTANCE_SYSTEM_PROMPT);
+      expect(config.description).toContain('acceptance');
+    });
+
+    it('should handle case-insensitive mode', () => {
+      const config = getEnhancementPrompt('IMPROVE');
+      expect(config.systemPrompt).toBe(IMPROVE_SYSTEM_PROMPT);
+    });
+
+    it('should fall back to improve for invalid mode', () => {
+      const config = getEnhancementPrompt('invalid-mode');
+      expect(config.systemPrompt).toBe(IMPROVE_SYSTEM_PROMPT);
+    });
+
+    it('should fall back to improve for empty string', () => {
+      const config = getEnhancementPrompt('');
+      expect(config.systemPrompt).toBe(IMPROVE_SYSTEM_PROMPT);
+    });
+  });
+
+  describe('getSystemPrompt', () => {
+    it('should return correct system prompt for each mode', () => {
+      expect(getSystemPrompt('improve')).toBe(IMPROVE_SYSTEM_PROMPT);
+      expect(getSystemPrompt('technical')).toBe(TECHNICAL_SYSTEM_PROMPT);
+      expect(getSystemPrompt('simplify')).toBe(SIMPLIFY_SYSTEM_PROMPT);
+      expect(getSystemPrompt('acceptance')).toBe(ACCEPTANCE_SYSTEM_PROMPT);
+    });
+  });
+
+  describe('getExamples', () => {
+    it('should return correct examples for each mode', () => {
+      expect(getExamples('improve')).toBe(IMPROVE_EXAMPLES);
+      expect(getExamples('technical')).toBe(TECHNICAL_EXAMPLES);
+      expect(getExamples('simplify')).toBe(SIMPLIFY_EXAMPLES);
+      expect(getExamples('acceptance')).toBe(ACCEPTANCE_EXAMPLES);
+    });
+
+    it('should return arrays with example objects', () => {
+      const modes: EnhancementMode[] = ['improve', 'technical', 'simplify', 'acceptance'];
+      modes.forEach((mode) => {
+        const examples = getExamples(mode);
+        expect(Array.isArray(examples)).toBe(true);
+        expect(examples.length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('buildUserPrompt', () => {
+    const testText = 'Add a logout button';
+
+    it('should build prompt with examples by default', () => {
+      const prompt = buildUserPrompt('improve', testText);
+      expect(prompt).toContain('Example 1:');
+      expect(prompt).toContain(testText);
+      expect(prompt).toContain('Please enhance the following task description:');
+    });
+
+    it('should build prompt without examples when includeExamples is false', () => {
+      const prompt = buildUserPrompt('improve', testText, false);
+      expect(prompt).not.toContain('Example 1:');
+      expect(prompt).toContain(testText);
+      expect(prompt).toContain('Please enhance the following task description:');
+    });
+
+    it('should include all examples for improve mode', () => {
+      const prompt = buildUserPrompt('improve', testText);
+      IMPROVE_EXAMPLES.forEach((example, index) => {
+        expect(prompt).toContain(`Example ${index + 1}:`);
+        expect(prompt).toContain(example.input);
+      });
+    });
+
+    it('should include separator between examples', () => {
+      const prompt = buildUserPrompt('improve', testText);
+      expect(prompt).toContain('---');
+    });
+
+    it('should work with all enhancement modes', () => {
+      ENHANCEMENT_MODES.forEach((mode) => {
+        const prompt = buildUserPrompt(mode, testText);
+        expect(prompt).toContain(testText);
+        expect(prompt.length).toBeGreaterThan(100);
+      });
+    });
+
+    it('should preserve the original text exactly', () => {
+      const specialText = 'Add feature with special chars: <>&"\'';
+      const prompt = buildUserPrompt('improve', specialText);
+      expect(prompt).toContain(specialText);
+    });
+  });
+
+  describe('isValidEnhancementMode', () => {
+    it('should return true for valid modes', () => {
+      expect(isValidEnhancementMode('improve')).toBe(true);
+      expect(isValidEnhancementMode('technical')).toBe(true);
+      expect(isValidEnhancementMode('simplify')).toBe(true);
+      expect(isValidEnhancementMode('acceptance')).toBe(true);
+      expect(isValidEnhancementMode('ux-reviewer')).toBe(true);
+    });
+
+    it('should return false for invalid modes', () => {
+      expect(isValidEnhancementMode('invalid')).toBe(false);
+      expect(isValidEnhancementMode('IMPROVE')).toBe(false); // case-sensitive
+      expect(isValidEnhancementMode('')).toBe(false);
+      expect(isValidEnhancementMode('random')).toBe(false);
+    });
+  });
+
+  describe('getAvailableEnhancementModes', () => {
+    it('should return all enhancement modes', () => {
+      const modes = getAvailableEnhancementModes();
+      expect(modes).toHaveLength(ENHANCEMENT_MODES.length);
+      ENHANCEMENT_MODES.forEach((mode) => {
+        expect(modes).toContain(mode);
+      });
+    });
+
+    it('should return an array', () => {
+      const modes = getAvailableEnhancementModes();
+      expect(Array.isArray(modes)).toBe(true);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/error-handler.test.ts b/temp_repo/apps/server/tests/unit/lib/error-handler.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..87a160368abd86cc46136d6e5851e9dc6d971974
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/error-handler.test.ts
@@ -0,0 +1,211 @@
+import { describe, it, expect } from 'vitest';
+import {
+  isAbortError,
+  isAuthenticationError,
+  isCancellationError,
+  classifyError,
+  getUserFriendlyErrorMessage,
+  type ErrorType,
+} from '@automaker/utils';
+
+describe('error-handler.ts', () => {
+  describe('isAbortError', () => {
+    it('should detect AbortError by error name', () => {
+      const error = new Error('Operation cancelled');
+      error.name = 'AbortError';
+      expect(isAbortError(error)).toBe(true);
+    });
+
+    it('should detect abort error by message content', () => {
+      const error = new Error('Request was aborted');
+      expect(isAbortError(error)).toBe(true);
+    });
+
+    it('should return false for non-abort errors', () => {
+      const error = new Error('Something else went wrong');
+      expect(isAbortError(error)).toBe(false);
+    });
+
+    it('should return false for non-Error objects', () => {
+      expect(isAbortError('not an error')).toBe(false);
+      expect(isAbortError(null)).toBe(false);
+      expect(isAbortError(undefined)).toBe(false);
+    });
+  });
+
+  describe('isCancellationError', () => {
+    it("should detect 'cancelled' message", () => {
+      expect(isCancellationError('Operation was cancelled')).toBe(true);
+    });
+
+    it("should detect 'canceled' message", () => {
+      expect(isCancellationError('Request was canceled')).toBe(true);
+    });
+
+    it("should detect 'stopped' message", () => {
+      expect(isCancellationError('Process was stopped')).toBe(true);
+    });
+
+    it("should detect 'aborted' message", () => {
+      expect(isCancellationError('Task was aborted')).toBe(true);
+    });
+
+    it('should be case insensitive', () => {
+      expect(isCancellationError('CANCELLED')).toBe(true);
+      expect(isCancellationError('Canceled')).toBe(true);
+    });
+
+    it('should return false for non-cancellation errors', () => {
+      expect(isCancellationError('File not found')).toBe(false);
+      expect(isCancellationError('Network error')).toBe(false);
+    });
+  });
+
+  describe('isAuthenticationError', () => {
+    it("should detect 'Authentication failed' message", () => {
+      expect(isAuthenticationError('Authentication failed')).toBe(true);
+    });
+
+    it("should detect 'Invalid API key' message", () => {
+      expect(isAuthenticationError('Invalid API key provided')).toBe(true);
+    });
+
+    it("should detect 'authentication_failed' message", () => {
+      expect(isAuthenticationError('authentication_failed')).toBe(true);
+    });
+
+    it("should detect 'Fix external API key' message", () => {
+      expect(isAuthenticationError('Fix external API key configuration')).toBe(true);
+    });
+
+    it('should return false for non-authentication errors', () => {
+      expect(isAuthenticationError('Network connection error')).toBe(false);
+      expect(isAuthenticationError('File not found')).toBe(false);
+    });
+
+    it('should be case sensitive', () => {
+      expect(isAuthenticationError('authentication Failed')).toBe(false);
+    });
+  });
+
+  describe('classifyError', () => {
+    it('should classify authentication errors', () => {
+      const error = new Error('Authentication failed');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('authentication');
+      expect(result.isAuth).toBe(true);
+      expect(result.isAbort).toBe(false);
+      expect(result.message).toBe('Authentication failed');
+      expect(result.originalError).toBe(error);
+    });
+
+    it('should classify abort errors', () => {
+      const error = new Error('Operation aborted');
+      error.name = 'AbortError';
+      const result = classifyError(error);
+
+      expect(result.type).toBe('abort');
+      expect(result.isAbort).toBe(true);
+      expect(result.isAuth).toBe(false);
+      expect(result.message).toBe('Operation aborted');
+    });
+
+    it('should prioritize auth over abort if both match', () => {
+      const error = new Error('Authentication failed and aborted');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('authentication');
+      expect(result.isAuth).toBe(true);
+      expect(result.isAbort).toBe(true); // Still detected as abort too
+    });
+
+    it('should classify cancellation errors', () => {
+      const error = new Error('Operation was cancelled');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('cancellation');
+      expect(result.isCancellation).toBe(true);
+      expect(result.isAbort).toBe(false);
+      expect(result.isAuth).toBe(false);
+    });
+
+    it('should prioritize abort over cancellation if both match', () => {
+      const error = new Error('Operation aborted');
+      error.name = 'AbortError';
+      const result = classifyError(error);
+
+      expect(result.type).toBe('abort');
+      expect(result.isAbort).toBe(true);
+      expect(result.isCancellation).toBe(true); // Still detected as cancellation too
+    });
+
+    it("should classify cancellation errors with 'canceled' spelling", () => {
+      const error = new Error('Request was canceled');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('cancellation');
+      expect(result.isCancellation).toBe(true);
+    });
+
+    it("should classify cancellation errors with 'stopped' message", () => {
+      const error = new Error('Process was stopped');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('cancellation');
+      expect(result.isCancellation).toBe(true);
+    });
+
+    it('should classify generic Error as execution error', () => {
+      const error = new Error('Something went wrong');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('execution');
+      expect(result.isAuth).toBe(false);
+      expect(result.isAbort).toBe(false);
+    });
+
+    it('should classify non-Error objects as unknown', () => {
+      const error = 'string error';
+      const result = classifyError(error);
+
+      expect(result.type).toBe('unknown');
+      expect(result.message).toBe('string error');
+    });
+
+    it('should handle null and undefined', () => {
+      const nullResult = classifyError(null);
+      expect(nullResult.type).toBe('unknown');
+      expect(nullResult.message).toBe('Unknown error');
+
+      const undefinedResult = classifyError(undefined);
+      expect(undefinedResult.type).toBe('unknown');
+      expect(undefinedResult.message).toBe('Unknown error');
+    });
+  });
+
+  describe('getUserFriendlyErrorMessage', () => {
+    it('should return friendly message for abort errors', () => {
+      const error = new Error('abort');
+      const result = getUserFriendlyErrorMessage(error);
+      expect(result).toBe('Operation was cancelled');
+    });
+
+    it('should return friendly message for authentication errors', () => {
+      const error = new Error('Authentication failed');
+      const result = getUserFriendlyErrorMessage(error);
+      expect(result).toBe('Authentication failed. Please check your API key.');
+    });
+
+    it('should return original message for other errors', () => {
+      const error = new Error('File not found');
+      const result = getUserFriendlyErrorMessage(error);
+      expect(result).toBe('File not found');
+    });
+
+    it('should handle non-Error objects', () => {
+      const result = getUserFriendlyErrorMessage('Custom error');
+      expect(result).toBe('Custom error');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/events.test.ts b/temp_repo/apps/server/tests/unit/lib/events.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a8a780928cfde77e9a47ef39e5616d16b06c69f4
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/events.test.ts
@@ -0,0 +1,130 @@
+import { describe, it, expect, vi } from 'vitest';
+import { createEventEmitter, type EventType } from '@/lib/events.js';
+
+describe('events.ts', () => {
+  describe('createEventEmitter', () => {
+    it('should emit events to single subscriber', () => {
+      const emitter = createEventEmitter();
+      const callback = vi.fn();
+
+      emitter.subscribe(callback);
+      emitter.emit('agent:stream', { message: 'test' });
+
+      expect(callback).toHaveBeenCalledOnce();
+      expect(callback).toHaveBeenCalledWith('agent:stream', { message: 'test' });
+    });
+
+    it('should emit events to multiple subscribers', () => {
+      const emitter = createEventEmitter();
+      const callback1 = vi.fn();
+      const callback2 = vi.fn();
+      const callback3 = vi.fn();
+
+      emitter.subscribe(callback1);
+      emitter.subscribe(callback2);
+      emitter.subscribe(callback3);
+      emitter.emit('feature:started', { id: '123' });
+
+      expect(callback1).toHaveBeenCalledOnce();
+      expect(callback2).toHaveBeenCalledOnce();
+      expect(callback3).toHaveBeenCalledOnce();
+      expect(callback1).toHaveBeenCalledWith('feature:started', { id: '123' });
+    });
+
+    it('should support unsubscribe functionality', () => {
+      const emitter = createEventEmitter();
+      const callback = vi.fn();
+
+      const unsubscribe = emitter.subscribe(callback);
+      emitter.emit('agent:stream', { test: 1 });
+
+      expect(callback).toHaveBeenCalledOnce();
+
+      unsubscribe();
+      emitter.emit('agent:stream', { test: 2 });
+
+      expect(callback).toHaveBeenCalledOnce(); // Still called only once
+    });
+
+    it('should handle errors in subscribers without crashing', () => {
+      const emitter = createEventEmitter();
+      const errorCallback = vi.fn(() => {
+        throw new Error('Subscriber error');
+      });
+      const normalCallback = vi.fn();
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      emitter.subscribe(errorCallback);
+      emitter.subscribe(normalCallback);
+
+      expect(() => {
+        emitter.emit('feature:error', { error: 'test' });
+      }).not.toThrow();
+
+      expect(errorCallback).toHaveBeenCalledOnce();
+      expect(normalCallback).toHaveBeenCalledOnce();
+      expect(consoleSpy).toHaveBeenCalled();
+
+      consoleSpy.mockRestore();
+    });
+
+    it('should emit different event types', () => {
+      const emitter = createEventEmitter();
+      const callback = vi.fn();
+
+      emitter.subscribe(callback);
+
+      const eventTypes: EventType[] = [
+        'agent:stream',
+        'auto-mode:started',
+        'feature:completed',
+        'project:analysis-progress',
+      ];
+
+      eventTypes.forEach((type) => {
+        emitter.emit(type, { type });
+      });
+
+      expect(callback).toHaveBeenCalledTimes(4);
+    });
+
+    it('should handle emitting without subscribers', () => {
+      const emitter = createEventEmitter();
+
+      expect(() => {
+        emitter.emit('agent:stream', { test: true });
+      }).not.toThrow();
+    });
+
+    it('should allow multiple subscriptions and unsubscriptions', () => {
+      const emitter = createEventEmitter();
+      const callback1 = vi.fn();
+      const callback2 = vi.fn();
+      const callback3 = vi.fn();
+
+      const unsub1 = emitter.subscribe(callback1);
+      const unsub2 = emitter.subscribe(callback2);
+      const unsub3 = emitter.subscribe(callback3);
+
+      emitter.emit('feature:started', { test: 1 });
+      expect(callback1).toHaveBeenCalledOnce();
+      expect(callback2).toHaveBeenCalledOnce();
+      expect(callback3).toHaveBeenCalledOnce();
+
+      unsub2();
+
+      emitter.emit('feature:started', { test: 2 });
+      expect(callback1).toHaveBeenCalledTimes(2);
+      expect(callback2).toHaveBeenCalledOnce(); // Still just once
+      expect(callback3).toHaveBeenCalledTimes(2);
+
+      unsub1();
+      unsub3();
+
+      emitter.emit('feature:started', { test: 3 });
+      expect(callback1).toHaveBeenCalledTimes(2);
+      expect(callback2).toHaveBeenCalledOnce();
+      expect(callback3).toHaveBeenCalledTimes(2);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/file-editor-store-logic.test.ts b/temp_repo/apps/server/tests/unit/lib/file-editor-store-logic.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7f6eabbd36e82de6869975f5e16769c0d17a22c3
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/file-editor-store-logic.test.ts
@@ -0,0 +1,333 @@
+import { describe, it, expect } from 'vitest';
+import {
+  computeIsDirty,
+  updateTabWithContent as updateTabContent,
+  markTabAsSaved as markTabSaved,
+} from '../../../../ui/src/components/views/file-editor-view/file-editor-dirty-utils.ts';
+
+/**
+ * Unit tests for the file editor store logic, focusing on the unsaved indicator fix.
+ *
+ * The bug was: File unsaved indicators weren't working reliably - editing a file
+ * and saving it would sometimes leave the dirty indicator (dot) visible.
+ *
+ * Root causes:
+ * 1. Stale closure in handleSave - captured activeTab could have old content
+ * 2. Editor buffer not synced - CodeMirror might have buffered changes not yet in store
+ *
+ * Fix:
+ * - handleSave now gets fresh state from store using getState()
+ * - handleSave gets current content from editor via getValue()
+ * - Content is synced to store before saving if it differs
+ *
+ * Since we can't easily test the React/zustand store in node environment,
+ * we test the pure logic that the store uses for dirty state tracking.
+ */
+
+describe('File editor dirty state logic', () => {
+  describe('updateTabContent', () => {
+    it('should set isDirty to true when content differs from originalContent', () => {
+      const tab = {
+        content: 'original content',
+        originalContent: 'original content',
+        isDirty: false,
+      };
+
+      const updated = updateTabContent(tab, 'modified content');
+
+      expect(updated.isDirty).toBe(true);
+      expect(updated.content).toBe('modified content');
+      expect(updated.originalContent).toBe('original content');
+    });
+
+    it('should set isDirty to false when content matches originalContent', () => {
+      const tab = {
+        content: 'original content',
+        originalContent: 'original content',
+        isDirty: false,
+      };
+
+      // First modify it
+      let updated = updateTabContent(tab, 'modified content');
+      expect(updated.isDirty).toBe(true);
+
+      // Now update back to original
+      updated = updateTabContent(updated, 'original content');
+      expect(updated.isDirty).toBe(false);
+    });
+
+    it('should handle empty content correctly', () => {
+      const tab = {
+        content: '',
+        originalContent: '',
+        isDirty: false,
+      };
+
+      const updated = updateTabContent(tab, 'new content');
+
+      expect(updated.isDirty).toBe(true);
+    });
+  });
+
+  describe('markTabSaved', () => {
+    it('should set isDirty to false and update both content and originalContent', () => {
+      const tab = {
+        content: 'original content',
+        originalContent: 'original content',
+        isDirty: false,
+      };
+
+      // First modify
+      let updated = updateTabContent(tab, 'modified content');
+      expect(updated.isDirty).toBe(true);
+
+      // Then save
+      updated = markTabSaved(updated, 'modified content');
+
+      expect(updated.isDirty).toBe(false);
+      expect(updated.content).toBe('modified content');
+      expect(updated.originalContent).toBe('modified content');
+    });
+
+    it('should correctly clear dirty state when save is triggered after edit', () => {
+      // This test simulates the bug scenario:
+      // 1. User edits file -> isDirty = true
+      // 2. User saves -> markTabSaved should set isDirty = false
+      let tab = {
+        content: 'initial',
+        originalContent: 'initial',
+        isDirty: false,
+      };
+
+      // Simulate user editing
+      tab = updateTabContent(tab, 'initial\nnew line');
+
+      // Should be dirty
+      expect(tab.isDirty).toBe(true);
+
+      // Simulate save (with the content that was saved)
+      tab = markTabSaved(tab, 'initial\nnew line');
+
+      // Should NOT be dirty anymore
+      expect(tab.isDirty).toBe(false);
+    });
+  });
+
+  describe('race condition handling', () => {
+    it('should correctly handle updateTabContent after markTabSaved with same content', () => {
+      // This tests the scenario where:
+      // 1. CodeMirror has a pending onChange with content "B"
+      // 2. User presses save when editor shows "B"
+      // 3. markTabSaved is called with "B"
+      // 4. CodeMirror's pending onChange fires with "B" (same content)
+      // Result: isDirty should remain false
+      let tab = {
+        content: 'A',
+        originalContent: 'A',
+        isDirty: false,
+      };
+
+      // User edits to "B"
+      tab = updateTabContent(tab, 'B');
+
+      // Save with "B"
+      tab = markTabSaved(tab, 'B');
+
+      // Late onChange with same content "B"
+      tab = updateTabContent(tab, 'B');
+
+      expect(tab.isDirty).toBe(false);
+      expect(tab.content).toBe('B');
+    });
+
+    it('should correctly handle updateTabContent after markTabSaved with different content', () => {
+      // This tests the scenario where:
+      // 1. CodeMirror has a pending onChange with content "C"
+      // 2. User presses save when store has "B"
+      // 3. markTabSaved is called with "B"
+      // 4. CodeMirror's pending onChange fires with "C" (different content)
+      // Result: isDirty should be true (file changed after save)
+      let tab = {
+        content: 'A',
+        originalContent: 'A',
+        isDirty: false,
+      };
+
+      // User edits to "B"
+      tab = updateTabContent(tab, 'B');
+
+      // Save with "B"
+      tab = markTabSaved(tab, 'B');
+
+      // Late onChange with different content "C"
+      tab = updateTabContent(tab, 'C');
+
+      // File changed after save, so it should be dirty
+      expect(tab.isDirty).toBe(true);
+      expect(tab.content).toBe('C');
+      expect(tab.originalContent).toBe('B');
+    });
+
+    it('should handle rapid edit-save-edit cycle correctly', () => {
+      // Simulate rapid user actions
+      let tab = {
+        content: 'v1',
+        originalContent: 'v1',
+        isDirty: false,
+      };
+
+      // Edit 1
+      tab = updateTabContent(tab, 'v2');
+      expect(tab.isDirty).toBe(true);
+
+      // Save 1
+      tab = markTabSaved(tab, 'v2');
+      expect(tab.isDirty).toBe(false);
+
+      // Edit 2
+      tab = updateTabContent(tab, 'v3');
+      expect(tab.isDirty).toBe(true);
+
+      // Save 2
+      tab = markTabSaved(tab, 'v3');
+      expect(tab.isDirty).toBe(false);
+
+      // Edit 3 (back to v2)
+      tab = updateTabContent(tab, 'v2');
+      expect(tab.isDirty).toBe(true);
+
+      // Save 3
+      tab = markTabSaved(tab, 'v2');
+      expect(tab.isDirty).toBe(false);
+    });
+  });
+
+  describe('handleSave stale closure fix simulation', () => {
+    it('demonstrates the fix: using fresh content instead of closure content', () => {
+      // This test demonstrates why the fix was necessary.
+      // The old handleSave captured activeTab in closure, which could be stale.
+      // The fix gets fresh state from getState() and uses editor.getValue().
+
+      // Simulate store state
+      let storeState = {
+        tabs: [
+          {
+            id: 'tab-1',
+            content: 'A',
+            originalContent: 'A',
+            isDirty: false,
+          },
+        ],
+        activeTabId: 'tab-1',
+      };
+
+      // Simulate a "stale closure" capturing the tab state
+      const staleClosureTab = storeState.tabs[0];
+
+      // User edits - store state updates
+      storeState = {
+        ...storeState,
+        tabs: [
+          {
+            id: 'tab-1',
+            content: 'B',
+            originalContent: 'A',
+            isDirty: true,
+          },
+        ],
+      };
+
+      // OLD BUG: Using stale closure tab would save "A" (old content)
+      const oldBugSavedContent = staleClosureTab!.content;
+      expect(oldBugSavedContent).toBe('A'); // Wrong! Should be "B"
+
+      // FIX: Using fresh state from getState() gets correct content
+      const freshTab = storeState.tabs[0];
+      const fixedSavedContent = freshTab!.content;
+      expect(fixedSavedContent).toBe('B'); // Correct!
+    });
+
+    it('demonstrates syncing editor content before save', () => {
+      // This test demonstrates why we need to get content from editor directly.
+      // The store might have stale content if onChange hasn't fired yet.
+
+      // Simulate store state (has old content because onChange hasn't fired)
+      let storeContent = 'A';
+
+      // Editor has newer content (not yet synced to store)
+      const editorContent = 'B';
+
+      // FIX: Use editor content if available, fall back to store content
+      const contentToSave = editorContent ?? storeContent;
+
+      expect(contentToSave).toBe('B'); // Correctly saves editor content
+
+      // Simulate syncing to store before save
+      if (editorContent !== null && editorContent !== storeContent) {
+        storeContent = editorContent;
+      }
+
+      // Now store is synced
+      expect(storeContent).toBe('B');
+
+      // After save, markTabSaved would set originalContent = savedContent
+      // and isDirty = false (if no more changes come in)
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle whitespace-only changes as dirty', () => {
+      let tab = {
+        content: 'hello',
+        originalContent: 'hello',
+        isDirty: false,
+      };
+
+      tab = updateTabContent(tab, 'hello ');
+      expect(tab.isDirty).toBe(true);
+    });
+
+    it('should treat CRLF and LF line endings as equivalent (not dirty)', () => {
+      let tab = {
+        content: 'line1\nline2',
+        originalContent: 'line1\nline2',
+        isDirty: false,
+      };
+
+      // CodeMirror normalizes \r\n to \n internally, so content that only
+      // differs by line endings should NOT be considered dirty.
+      tab = updateTabContent(tab, 'line1\r\nline2');
+      expect(tab.isDirty).toBe(false);
+    });
+
+    it('should handle unicode content correctly', () => {
+      let tab = {
+        content: '你好世界',
+        originalContent: '你好世界',
+        isDirty: false,
+      };
+
+      tab = updateTabContent(tab, '你好宇宙');
+      expect(tab.isDirty).toBe(true);
+
+      tab = markTabSaved(tab, '你好宇宙');
+      expect(tab.isDirty).toBe(false);
+    });
+
+    it('should handle very large content efficiently', () => {
+      // Generate a large string (1MB)
+      const largeOriginal = 'x'.repeat(1024 * 1024);
+      const largeModified = largeOriginal + 'y';
+
+      let tab = {
+        content: largeOriginal,
+        originalContent: largeOriginal,
+        isDirty: false,
+      };
+
+      tab = updateTabContent(tab, largeModified);
+
+      expect(tab.isDirty).toBe(true);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/fs-utils.test.ts b/temp_repo/apps/server/tests/unit/lib/fs-utils.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6ac49e6d8211104292ee6cb9657fcc653eb7b0ad
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/fs-utils.test.ts
@@ -0,0 +1,171 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { mkdirSafe, existsSafe } from '@automaker/utils';
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+
+describe('fs-utils.ts', () => {
+  let testDir: string;
+
+  beforeEach(async () => {
+    // Create a temporary test directory
+    testDir = path.join(os.tmpdir(), `fs-utils-test-${Date.now()}`);
+    await fs.mkdir(testDir, { recursive: true });
+  });
+
+  afterEach(async () => {
+    // Clean up test directory
+    try {
+      await fs.rm(testDir, { recursive: true, force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe('mkdirSafe', () => {
+    it('should create a new directory', async () => {
+      const newDir = path.join(testDir, 'new-directory');
+      await mkdirSafe(newDir);
+
+      const stats = await fs.stat(newDir);
+      expect(stats.isDirectory()).toBe(true);
+    });
+
+    it('should succeed if directory already exists', async () => {
+      const existingDir = path.join(testDir, 'existing');
+      await fs.mkdir(existingDir);
+
+      // Should not throw
+      await expect(mkdirSafe(existingDir)).resolves.toBeUndefined();
+    });
+
+    it('should create nested directories', async () => {
+      const nestedDir = path.join(testDir, 'a', 'b', 'c');
+      await mkdirSafe(nestedDir);
+
+      const stats = await fs.stat(nestedDir);
+      expect(stats.isDirectory()).toBe(true);
+    });
+
+    it('should throw if path exists as a file', async () => {
+      const filePath = path.join(testDir, 'file.txt');
+      await fs.writeFile(filePath, 'content');
+
+      await expect(mkdirSafe(filePath)).rejects.toThrow('Path exists and is not a directory');
+    });
+
+    it('should succeed if path is a symlink to a directory', async () => {
+      const realDir = path.join(testDir, 'real-dir');
+      const symlinkPath = path.join(testDir, 'link-to-dir');
+      await fs.mkdir(realDir);
+      await fs.symlink(realDir, symlinkPath);
+
+      // Should not throw
+      await expect(mkdirSafe(symlinkPath)).resolves.toBeUndefined();
+    });
+
+    it('should handle ELOOP error gracefully when checking path', async () => {
+      // Mock lstat to throw ELOOP error
+      const originalLstat = fs.lstat;
+      const mkdirSafePath = path.join(testDir, 'eloop-path');
+
+      vi.spyOn(fs, 'lstat').mockRejectedValueOnce({ code: 'ELOOP' });
+
+      // Should not throw, should return gracefully
+      await expect(mkdirSafe(mkdirSafePath)).resolves.toBeUndefined();
+
+      vi.restoreAllMocks();
+    });
+
+    it('should handle EEXIST error gracefully when creating directory', async () => {
+      const newDir = path.join(testDir, 'race-condition-dir');
+
+      // Mock lstat to return ENOENT (path doesn't exist)
+      // Then mock mkdir to throw EEXIST (race condition)
+      vi.spyOn(fs, 'lstat').mockRejectedValueOnce({ code: 'ENOENT' });
+      vi.spyOn(fs, 'mkdir').mockRejectedValueOnce({ code: 'EEXIST' });
+
+      // Should not throw, should return gracefully
+      await expect(mkdirSafe(newDir)).resolves.toBeUndefined();
+
+      vi.restoreAllMocks();
+    });
+
+    it('should handle ELOOP error gracefully when creating directory', async () => {
+      const newDir = path.join(testDir, 'eloop-create-dir');
+
+      // Mock lstat to return ENOENT (path doesn't exist)
+      // Then mock mkdir to throw ELOOP
+      vi.spyOn(fs, 'lstat').mockRejectedValueOnce({ code: 'ENOENT' });
+      vi.spyOn(fs, 'mkdir').mockRejectedValueOnce({ code: 'ELOOP' });
+
+      // Should not throw, should return gracefully
+      await expect(mkdirSafe(newDir)).resolves.toBeUndefined();
+
+      vi.restoreAllMocks();
+    });
+  });
+
+  describe('existsSafe', () => {
+    it('should return true for existing file', async () => {
+      const filePath = path.join(testDir, 'test-file.txt');
+      await fs.writeFile(filePath, 'content');
+
+      const exists = await existsSafe(filePath);
+      expect(exists).toBe(true);
+    });
+
+    it('should return true for existing directory', async () => {
+      const dirPath = path.join(testDir, 'test-dir');
+      await fs.mkdir(dirPath);
+
+      const exists = await existsSafe(dirPath);
+      expect(exists).toBe(true);
+    });
+
+    it('should return false for non-existent path', async () => {
+      const nonExistent = path.join(testDir, 'does-not-exist');
+
+      const exists = await existsSafe(nonExistent);
+      expect(exists).toBe(false);
+    });
+
+    it('should return true for symlink', async () => {
+      const realFile = path.join(testDir, 'real-file.txt');
+      const symlinkPath = path.join(testDir, 'link-to-file');
+      await fs.writeFile(realFile, 'content');
+      await fs.symlink(realFile, symlinkPath);
+
+      const exists = await existsSafe(symlinkPath);
+      expect(exists).toBe(true);
+    });
+
+    it("should return true for broken symlink (symlink exists even if target doesn't)", async () => {
+      const symlinkPath = path.join(testDir, 'broken-link');
+      const nonExistent = path.join(testDir, 'non-existent-target');
+      await fs.symlink(nonExistent, symlinkPath);
+
+      const exists = await existsSafe(symlinkPath);
+      expect(exists).toBe(true);
+    });
+
+    it('should return true for ELOOP error (symlink loop)', async () => {
+      // Mock lstat to throw ELOOP error
+      vi.spyOn(fs, 'lstat').mockRejectedValueOnce({ code: 'ELOOP' });
+
+      const exists = await existsSafe('/some/path/with/loop');
+      expect(exists).toBe(true);
+
+      vi.restoreAllMocks();
+    });
+
+    it('should throw for other errors', async () => {
+      // Mock lstat to throw a non-ENOENT, non-ELOOP error
+      vi.spyOn(fs, 'lstat').mockRejectedValueOnce({ code: 'EACCES' });
+
+      await expect(existsSafe('/some/path')).rejects.toMatchObject({ code: 'EACCES' });
+
+      vi.restoreAllMocks();
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/git-log-parser.test.ts b/temp_repo/apps/server/tests/unit/lib/git-log-parser.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..53c5342c963e6f6db4333e647e59b2fcadf72736
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/git-log-parser.test.ts
@@ -0,0 +1,196 @@
+import { describe, it, expect } from 'vitest';
+import { parseGitLogOutput } from '../../../src/lib/git-log-parser.js';
+
+// Mock data: fields within each commit are newline-separated,
+// commits are NUL-separated (matching the parser contract).
+const mockGitOutput = [
+  'a1b2c3d4e5f67890abcd1234567890abcd1234\na1b2c3\nJohn Doe\njohn@example.com\n2023-01-01T12:00:00Z\nInitial commit\nThis is the commit body',
+  'e5f6g7h8i9j0klmnoprstuv\ne5f6g7\nJane Smith\njane@example.com\n2023-01-02T12:00:00Z\nFix bug\nFixed the bug with ---END--- in the message',
+  'q1w2e3r4t5y6u7i8o9p0asdfghjkl\nq1w2e3\nBob Johnson\nbob@example.com\n2023-01-03T12:00:00Z\nAnother commit\nEmpty body',
+].join('\0');
+
+// Mock data where commit bodies contain ---END--- markers
+const mockOutputWithEndMarker = [
+  'a1b2c3d4e5f67890abcd1234567890abcd1234\na1b2c3\nJohn Doe\njohn@example.com\n2023-01-01T12:00:00Z\nInitial commit\nThis is the commit body\n---END--- is in this message',
+  'e5f6g7h8i9j0klmnoprstuv\ne5f6g7\nJane Smith\njane@example.com\n2023-01-02T12:00:00Z\nFix bug\nFixed the bug with ---END--- in the message',
+  'q1w2e3r4t5y6u7i8o9p0asdfghjkl\nq1w2e3\nBob Johnson\nbob@example.com\n2023-01-03T12:00:00Z\nAnother commit\nEmpty body',
+].join('\0');
+
+// Single-commit mock: fields newline-separated, no trailing NUL needed
+const singleCommitOutput =
+  'a1b2c3d4e5f67890abcd1234567890abcd1234\na1b2c3\nJohn Doe\njohn@example.com\n2023-01-01T12:00:00Z\nSingle commit\nSingle commit body';
+
+describe('parseGitLogOutput', () => {
+  describe('normal parsing (three commits)', () => {
+    it('returns the correct number of commits', () => {
+      const commits = parseGitLogOutput(mockGitOutput);
+      expect(commits.length).toBe(3);
+    });
+
+    it('parses the first commit fields correctly', () => {
+      const commits = parseGitLogOutput(mockGitOutput);
+      expect(commits[0].hash).toBe('a1b2c3d4e5f67890abcd1234567890abcd1234');
+      expect(commits[0].shortHash).toBe('a1b2c3');
+      expect(commits[0].author).toBe('John Doe');
+      expect(commits[0].authorEmail).toBe('john@example.com');
+      expect(commits[0].date).toBe('2023-01-01T12:00:00Z');
+      expect(commits[0].subject).toBe('Initial commit');
+      expect(commits[0].body).toBe('This is the commit body');
+    });
+
+    it('parses the second commit fields correctly', () => {
+      const commits = parseGitLogOutput(mockGitOutput);
+      expect(commits[1].hash).toBe('e5f6g7h8i9j0klmnoprstuv');
+      expect(commits[1].shortHash).toBe('e5f6g7');
+      expect(commits[1].author).toBe('Jane Smith');
+      expect(commits[1].subject).toBe('Fix bug');
+      expect(commits[1].body).toMatch(/---END---/);
+    });
+
+    it('parses the third commit fields correctly', () => {
+      const commits = parseGitLogOutput(mockGitOutput);
+      expect(commits[2].hash).toBe('q1w2e3r4t5y6u7i8o9p0asdfghjkl');
+      expect(commits[2].shortHash).toBe('q1w2e3');
+      expect(commits[2].author).toBe('Bob Johnson');
+      expect(commits[2].subject).toBe('Another commit');
+      expect(commits[2].body).toBe('Empty body');
+    });
+  });
+
+  describe('parsing with ---END--- in commit messages', () => {
+    it('returns the correct number of commits', () => {
+      const commits = parseGitLogOutput(mockOutputWithEndMarker);
+      expect(commits.length).toBe(3);
+    });
+
+    it('preserves ---END--- text in the body of the first commit', () => {
+      const commits = parseGitLogOutput(mockOutputWithEndMarker);
+      expect(commits[0].subject).toBe('Initial commit');
+      expect(commits[0].body).toMatch(/---END---/);
+    });
+
+    it('preserves ---END--- text in the body of the second commit', () => {
+      const commits = parseGitLogOutput(mockOutputWithEndMarker);
+      expect(commits[1].subject).toBe('Fix bug');
+      expect(commits[1].body).toMatch(/---END---/);
+    });
+
+    it('parses the third commit without ---END--- interference', () => {
+      const commits = parseGitLogOutput(mockOutputWithEndMarker);
+      expect(commits[2].subject).toBe('Another commit');
+      expect(commits[2].body).toBe('Empty body');
+    });
+  });
+
+  describe('empty output', () => {
+    it('returns an empty array for an empty string', () => {
+      const commits = parseGitLogOutput('');
+      expect(commits).toEqual([]);
+      expect(commits.length).toBe(0);
+    });
+  });
+
+  describe('single-commit output', () => {
+    it('returns exactly one commit', () => {
+      const commits = parseGitLogOutput(singleCommitOutput);
+      expect(commits.length).toBe(1);
+    });
+
+    it('parses the single commit fields correctly', () => {
+      const commits = parseGitLogOutput(singleCommitOutput);
+      expect(commits[0].hash).toBe('a1b2c3d4e5f67890abcd1234567890abcd1234');
+      expect(commits[0].shortHash).toBe('a1b2c3');
+      expect(commits[0].author).toBe('John Doe');
+      expect(commits[0].authorEmail).toBe('john@example.com');
+      expect(commits[0].date).toBe('2023-01-01T12:00:00Z');
+      expect(commits[0].subject).toBe('Single commit');
+      expect(commits[0].body).toBe('Single commit body');
+    });
+  });
+
+  describe('multi-line commit body', () => {
+    // Test vector from test-proper-nul-format.js: commit with a 3-line body
+    const multiLineBodyOutput =
+      [
+        'abc123\nabc1\nJohn Doe\njohn@example.com\n2023-01-01T12:00:00Z\nInitial commit\nThis is a normal commit body',
+        'def456\ndef4\nJane Smith\njane@example.com\n2023-01-02T12:00:00Z\nFix bug\nFixed the bug with ---END--- in this message',
+        'ghi789\nghi7\nBob Johnson\nbob@example.com\n2023-01-03T12:00:00Z\nAnother commit\nThis body has multiple lines\nSecond line\nThird line',
+      ].join('\0') + '\0';
+
+    it('returns 3 commits', () => {
+      const commits = parseGitLogOutput(multiLineBodyOutput);
+      expect(commits.length).toBe(3);
+    });
+
+    it('parses the first commit correctly', () => {
+      const commits = parseGitLogOutput(multiLineBodyOutput);
+      expect(commits[0].hash).toBe('abc123');
+      expect(commits[0].shortHash).toBe('abc1');
+      expect(commits[0].author).toBe('John Doe');
+      expect(commits[0].authorEmail).toBe('john@example.com');
+      expect(commits[0].date).toBe('2023-01-01T12:00:00Z');
+      expect(commits[0].subject).toBe('Initial commit');
+      expect(commits[0].body).toBe('This is a normal commit body');
+    });
+
+    it('parses the second commit with ---END--- in body correctly', () => {
+      const commits = parseGitLogOutput(multiLineBodyOutput);
+      expect(commits[1].hash).toBe('def456');
+      expect(commits[1].shortHash).toBe('def4');
+      expect(commits[1].author).toBe('Jane Smith');
+      expect(commits[1].subject).toBe('Fix bug');
+      expect(commits[1].body).toContain('---END---');
+    });
+
+    it('parses the third commit with a multi-line body correctly', () => {
+      const commits = parseGitLogOutput(multiLineBodyOutput);
+      expect(commits[2].hash).toBe('ghi789');
+      expect(commits[2].shortHash).toBe('ghi7');
+      expect(commits[2].author).toBe('Bob Johnson');
+      expect(commits[2].subject).toBe('Another commit');
+      expect(commits[2].body).toBe('This body has multiple lines\nSecond line\nThird line');
+    });
+  });
+
+  describe('commit with empty body (trailing blank lines after subject)', () => {
+    // Test vector from test-proper-nul-format.js: empty body commit
+    const emptyBodyOutput =
+      'empty123\nempty1\nAlice Brown\nalice@example.com\n2023-01-04T12:00:00Z\nEmpty body commit\n\n\0';
+
+    it('returns 1 commit', () => {
+      const commits = parseGitLogOutput(emptyBodyOutput);
+      expect(commits.length).toBe(1);
+    });
+
+    it('parses the commit subject correctly', () => {
+      const commits = parseGitLogOutput(emptyBodyOutput);
+      expect(commits[0].hash).toBe('empty123');
+      expect(commits[0].shortHash).toBe('empty1');
+      expect(commits[0].author).toBe('Alice Brown');
+      expect(commits[0].subject).toBe('Empty body commit');
+    });
+
+    it('produces an empty body string when only blank lines follow the subject', () => {
+      const commits = parseGitLogOutput(emptyBodyOutput);
+      expect(commits[0].body).toBe('');
+    });
+  });
+
+  describe('leading empty lines in a commit block', () => {
+    // Blocks that start with blank lines before the hash field
+    const outputWithLeadingBlanks =
+      '\n\nabc123\nabc1\nJohn Doe\njohn@example.com\n2023-01-01T12:00:00Z\nSubject here\nBody here';
+
+    it('returns 1 commit despite leading blank lines', () => {
+      const commits = parseGitLogOutput(outputWithLeadingBlanks);
+      expect(commits.length).toBe(1);
+    });
+
+    it('parses the commit fields correctly when block has leading empty lines', () => {
+      const commits = parseGitLogOutput(outputWithLeadingBlanks);
+      expect(commits[0].hash).toBe('abc123');
+      expect(commits[0].subject).toBe('Subject here');
+      expect(commits[0].body).toBe('Body here');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/image-handler.test.ts b/temp_repo/apps/server/tests/unit/lib/image-handler.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3e48ad429e31682a8545e8ca7f895f8aa61b6f7e
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/image-handler.test.ts
@@ -0,0 +1,226 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+  getMimeTypeForImage,
+  readImageAsBase64,
+  convertImagesToContentBlocks,
+  formatImagePathsForPrompt,
+} from '@automaker/utils';
+import { pngBase64Fixture } from '../../fixtures/images.js';
+import * as fs from 'fs/promises';
+
+vi.mock('fs/promises');
+
+describe('image-handler.ts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('getMimeTypeForImage', () => {
+    it('should return correct MIME type for .jpg', () => {
+      expect(getMimeTypeForImage('test.jpg')).toBe('image/jpeg');
+      expect(getMimeTypeForImage('/path/to/test.jpg')).toBe('image/jpeg');
+    });
+
+    it('should return correct MIME type for .jpeg', () => {
+      expect(getMimeTypeForImage('test.jpeg')).toBe('image/jpeg');
+    });
+
+    it('should return correct MIME type for .png', () => {
+      expect(getMimeTypeForImage('test.png')).toBe('image/png');
+    });
+
+    it('should return correct MIME type for .gif', () => {
+      expect(getMimeTypeForImage('test.gif')).toBe('image/gif');
+    });
+
+    it('should return correct MIME type for .webp', () => {
+      expect(getMimeTypeForImage('test.webp')).toBe('image/webp');
+    });
+
+    it('should be case-insensitive', () => {
+      expect(getMimeTypeForImage('test.PNG')).toBe('image/png');
+      expect(getMimeTypeForImage('test.JPG')).toBe('image/jpeg');
+      expect(getMimeTypeForImage('test.GIF')).toBe('image/gif');
+      expect(getMimeTypeForImage('test.WEBP')).toBe('image/webp');
+    });
+
+    it('should default to image/png for unknown extensions', () => {
+      expect(getMimeTypeForImage('test.unknown')).toBe('image/png');
+      expect(getMimeTypeForImage('test.txt')).toBe('image/png');
+      expect(getMimeTypeForImage('test')).toBe('image/png');
+    });
+
+    it('should handle paths with multiple dots', () => {
+      expect(getMimeTypeForImage('my.image.file.jpg')).toBe('image/jpeg');
+    });
+  });
+
+  describe('readImageAsBase64', () => {
+    // Skip on Windows as path.resolve converts Unix paths to Windows paths (CI runs on Linux)
+    it.skipIf(process.platform === 'win32')(
+      'should read image and return base64 data',
+      async () => {
+        const mockBuffer = Buffer.from(pngBase64Fixture, 'base64');
+        vi.mocked(fs.readFile).mockResolvedValue(mockBuffer);
+
+        const result = await readImageAsBase64('/path/to/test.png');
+
+        expect(result).toMatchObject({
+          base64: pngBase64Fixture,
+          mimeType: 'image/png',
+          filename: 'test.png',
+          originalPath: '/path/to/test.png',
+        });
+        expect(fs.readFile).toHaveBeenCalledWith('/path/to/test.png');
+      }
+    );
+
+    it('should handle different image formats', async () => {
+      const mockBuffer = Buffer.from('jpeg-data');
+      vi.mocked(fs.readFile).mockResolvedValue(mockBuffer);
+
+      const result = await readImageAsBase64('/path/to/photo.jpg');
+
+      expect(result.mimeType).toBe('image/jpeg');
+      expect(result.filename).toBe('photo.jpg');
+      expect(result.base64).toBe(mockBuffer.toString('base64'));
+    });
+
+    it('should extract filename from path', async () => {
+      const mockBuffer = Buffer.from('data');
+      vi.mocked(fs.readFile).mockResolvedValue(mockBuffer);
+
+      const result = await readImageAsBase64('/deep/nested/path/image.webp');
+
+      expect(result.filename).toBe('image.webp');
+    });
+
+    it('should throw error if file cannot be read', async () => {
+      vi.mocked(fs.readFile).mockRejectedValue(new Error('File not found'));
+
+      await expect(readImageAsBase64('/nonexistent.png')).rejects.toThrow('File not found');
+    });
+  });
+
+  describe('convertImagesToContentBlocks', () => {
+    it('should convert single image to content block', async () => {
+      const mockBuffer = Buffer.from(pngBase64Fixture, 'base64');
+      vi.mocked(fs.readFile).mockResolvedValue(mockBuffer);
+
+      const result = await convertImagesToContentBlocks(['/path/test.png']);
+
+      expect(result).toHaveLength(1);
+      expect(result[0]).toMatchObject({
+        type: 'image',
+        source: {
+          type: 'base64',
+          media_type: 'image/png',
+          data: pngBase64Fixture,
+        },
+      });
+    });
+
+    it('should convert multiple images to content blocks', async () => {
+      const mockBuffer = Buffer.from('test-data');
+      vi.mocked(fs.readFile).mockResolvedValue(mockBuffer);
+
+      const result = await convertImagesToContentBlocks(['/a.png', '/b.jpg', '/c.webp']);
+
+      expect(result).toHaveLength(3);
+      expect(result[0].source.media_type).toBe('image/png');
+      expect(result[1].source.media_type).toBe('image/jpeg');
+      expect(result[2].source.media_type).toBe('image/webp');
+    });
+
+    it('should resolve relative paths with workDir', async () => {
+      const mockBuffer = Buffer.from('data');
+      vi.mocked(fs.readFile).mockResolvedValue(mockBuffer);
+
+      await convertImagesToContentBlocks(['relative.png'], '/work/dir');
+
+      // Use path-agnostic check since Windows uses backslashes
+      const calls = vi.mocked(fs.readFile).mock.calls;
+      expect(calls[0][0]).toMatch(/relative\.png$/);
+      expect(calls[0][0]).toContain('work');
+      expect(calls[0][0]).toContain('dir');
+    });
+
+    // Skip on Windows as path.resolve converts Unix paths to Windows paths (CI runs on Linux)
+    it.skipIf(process.platform === 'win32')(
+      'should handle absolute paths without workDir',
+      async () => {
+        const mockBuffer = Buffer.from('data');
+        vi.mocked(fs.readFile).mockResolvedValue(mockBuffer);
+
+        await convertImagesToContentBlocks(['/absolute/path.png']);
+
+        expect(fs.readFile).toHaveBeenCalledWith('/absolute/path.png');
+      }
+    );
+
+    it('should continue processing on individual image errors', async () => {
+      vi.mocked(fs.readFile)
+        .mockResolvedValueOnce(Buffer.from('ok1'))
+        .mockRejectedValueOnce(new Error('Failed'))
+        .mockResolvedValueOnce(Buffer.from('ok2'));
+
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      const result = await convertImagesToContentBlocks(['/a.png', '/b.png', '/c.png']);
+
+      expect(result).toHaveLength(2); // Only successful images
+      expect(consoleSpy).toHaveBeenCalled();
+
+      consoleSpy.mockRestore();
+    });
+
+    it('should return empty array for empty input', async () => {
+      const result = await convertImagesToContentBlocks([]);
+      expect(result).toEqual([]);
+    });
+
+    // Skip on Windows as path.resolve converts Unix paths to Windows paths (CI runs on Linux)
+    it.skipIf(process.platform === 'win32')('should handle undefined workDir', async () => {
+      const mockBuffer = Buffer.from('data');
+      vi.mocked(fs.readFile).mockResolvedValue(mockBuffer);
+
+      const result = await convertImagesToContentBlocks(['/test.png'], undefined);
+
+      expect(result).toHaveLength(1);
+      expect(fs.readFile).toHaveBeenCalledWith('/test.png');
+    });
+  });
+
+  describe('formatImagePathsForPrompt', () => {
+    it('should format single image path as bulleted list', () => {
+      const result = formatImagePathsForPrompt(['/path/image.png']);
+
+      expect(result).toContain('\n\nAttached images:');
+      expect(result).toContain('- /path/image.png');
+    });
+
+    it('should format multiple image paths as bulleted list', () => {
+      const result = formatImagePathsForPrompt(['/path/a.png', '/path/b.jpg', '/path/c.webp']);
+
+      expect(result).toContain('Attached images:');
+      expect(result).toContain('- /path/a.png');
+      expect(result).toContain('- /path/b.jpg');
+      expect(result).toContain('- /path/c.webp');
+    });
+
+    it('should return empty string for empty array', () => {
+      const result = formatImagePathsForPrompt([]);
+      expect(result).toBe('');
+    });
+
+    it('should start with double newline', () => {
+      const result = formatImagePathsForPrompt(['/test.png']);
+      expect(result.startsWith('\n\n')).toBe(true);
+    });
+
+    it('should handle paths with special characters', () => {
+      const result = formatImagePathsForPrompt(['/path/with spaces/image.png']);
+      expect(result).toContain('- /path/with spaces/image.png');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/json-extractor.test.ts b/temp_repo/apps/server/tests/unit/lib/json-extractor.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bc0681fbc3337f0a90f54af2ee213e10db11e0ac
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/json-extractor.test.ts
@@ -0,0 +1,308 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { extractJson, extractJsonWithKey, extractJsonWithArray } from '@/lib/json-extractor.js';
+
+describe('json-extractor.ts', () => {
+  const mockLogger = {
+    debug: vi.fn(),
+    warn: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('extractJson', () => {
+    describe('Strategy 1: JSON in ```json code block', () => {
+      it('should extract JSON from ```json code block', () => {
+        const responseText = `Here is the result:
+\`\`\`json
+{"name": "test", "value": 42}
+\`\`\`
+That's all!`;
+
+        const result = extractJson(responseText, { logger: mockLogger });
+
+        expect(result).toEqual({ name: 'test', value: 42 });
+        expect(mockLogger.debug).toHaveBeenCalledWith('Extracting JSON from ```json code block');
+      });
+
+      it('should handle multiline JSON in code block', () => {
+        const responseText = `\`\`\`json
+{
+  "items": [
+    {"id": 1},
+    {"id": 2}
+  ]
+}
+\`\`\``;
+
+        const result = extractJson(responseText, { logger: mockLogger });
+
+        expect(result).toEqual({ items: [{ id: 1 }, { id: 2 }] });
+      });
+    });
+
+    describe('Strategy 2: JSON in ``` code block (no language)', () => {
+      it('should extract JSON from unmarked code block', () => {
+        const responseText = `Result:
+\`\`\`
+{"status": "ok"}
+\`\`\``;
+
+        const result = extractJson(responseText, { logger: mockLogger });
+
+        expect(result).toEqual({ status: 'ok' });
+        expect(mockLogger.debug).toHaveBeenCalledWith('Extracting JSON from ``` code block');
+      });
+
+      it('should handle array JSON in unmarked code block', () => {
+        const responseText = `\`\`\`
+[1, 2, 3]
+\`\`\``;
+
+        const result = extractJson<number[]>(responseText, { logger: mockLogger });
+
+        expect(result).toEqual([1, 2, 3]);
+      });
+
+      it('should skip non-JSON code blocks and find JSON via brace matching', () => {
+        // When code block contains non-JSON, later strategies will try to extract
+        // The first { in the response is in the function code, so brace matching
+        // will try that and fail. The JSON after the code block is found via strategy 5.
+        const responseText = `\`\`\`
+return true;
+\`\`\`
+Here is the JSON: {"actual": "json"}`;
+
+        const result = extractJson(responseText, { logger: mockLogger });
+
+        expect(result).toEqual({ actual: 'json' });
+      });
+    });
+
+    describe('Strategy 3: Find JSON with required key', () => {
+      it('should find JSON containing required key', () => {
+        const responseText = `Some text before {"features": ["a", "b"]} and after`;
+
+        const result = extractJson(responseText, {
+          logger: mockLogger,
+          requiredKey: 'features',
+        });
+
+        expect(result).toEqual({ features: ['a', 'b'] });
+        expect(mockLogger.debug).toHaveBeenCalledWith(
+          'Extracting JSON with required key "features"'
+        );
+      });
+
+      it('should skip JSON without required key', () => {
+        const responseText = `{"wrong": "key"} {"features": ["correct"]}`;
+
+        const result = extractJson(responseText, {
+          logger: mockLogger,
+          requiredKey: 'features',
+        });
+
+        expect(result).toEqual({ features: ['correct'] });
+      });
+    });
+
+    describe('Strategy 4: Find any JSON by brace matching', () => {
+      it('should extract JSON by matching braces', () => {
+        const responseText = `Let me provide the response: {"result": "success", "data": {"nested": true}}. Done.`;
+
+        const result = extractJson(responseText, { logger: mockLogger });
+
+        expect(result).toEqual({ result: 'success', data: { nested: true } });
+        expect(mockLogger.debug).toHaveBeenCalledWith('Extracting JSON by brace matching');
+      });
+
+      it('should handle deeply nested objects', () => {
+        const responseText = `{"a": {"b": {"c": {"d": "deep"}}}}`;
+
+        const result = extractJson(responseText, { logger: mockLogger });
+
+        expect(result).toEqual({ a: { b: { c: { d: 'deep' } } } });
+      });
+    });
+
+    describe('Strategy 5: First { to last }', () => {
+      it('should extract from first to last brace when other strategies fail', () => {
+        // Create malformed JSON that brace matching fails but first-to-last works
+        const responseText = `Prefix {"key": "value"} suffix text`;
+
+        const result = extractJson(responseText, { logger: mockLogger });
+
+        expect(result).toEqual({ key: 'value' });
+      });
+    });
+
+    describe('Strategy 6: Parse entire response as JSON', () => {
+      it('should parse entire response when it is valid JSON object', () => {
+        const responseText = `{"complete": "json"}`;
+
+        const result = extractJson(responseText, { logger: mockLogger });
+
+        expect(result).toEqual({ complete: 'json' });
+      });
+
+      it('should parse entire response when it is valid JSON array', () => {
+        const responseText = `["a", "b", "c"]`;
+
+        const result = extractJson<string[]>(responseText, { logger: mockLogger });
+
+        expect(result).toEqual(['a', 'b', 'c']);
+      });
+
+      it('should handle whitespace around JSON', () => {
+        const responseText = `
+  {"trimmed": true}
+  `;
+
+        const result = extractJson(responseText, { logger: mockLogger });
+
+        expect(result).toEqual({ trimmed: true });
+      });
+    });
+
+    describe('requireArray option', () => {
+      it('should validate required key contains array', () => {
+        const responseText = `{"items": ["a", "b", "c"]}`;
+
+        const result = extractJson(responseText, {
+          logger: mockLogger,
+          requiredKey: 'items',
+          requireArray: true,
+        });
+
+        expect(result).toEqual({ items: ['a', 'b', 'c'] });
+      });
+
+      it('should reject when required key is not an array', () => {
+        const responseText = `{"items": "not an array"}`;
+
+        const result = extractJson(responseText, {
+          logger: mockLogger,
+          requiredKey: 'items',
+          requireArray: true,
+        });
+
+        expect(result).toBeNull();
+      });
+    });
+
+    describe('error handling', () => {
+      it('should return null for invalid JSON', () => {
+        const responseText = `This is not JSON at all`;
+
+        const result = extractJson(responseText, { logger: mockLogger });
+
+        expect(result).toBeNull();
+        expect(mockLogger.debug).toHaveBeenCalledWith('Failed to extract JSON from response');
+      });
+
+      it('should return null for malformed JSON', () => {
+        const responseText = `{"broken": }`;
+
+        const result = extractJson(responseText, { logger: mockLogger });
+
+        expect(result).toBeNull();
+      });
+
+      it('should return null for empty input', () => {
+        const result = extractJson('', { logger: mockLogger });
+
+        expect(result).toBeNull();
+      });
+
+      it('should return null when required key is missing', () => {
+        const responseText = `{"other": "key"}`;
+
+        const result = extractJson(responseText, {
+          logger: mockLogger,
+          requiredKey: 'missing',
+        });
+
+        expect(result).toBeNull();
+      });
+    });
+
+    describe('edge cases', () => {
+      it('should handle JSON with escaped characters', () => {
+        const responseText = `{"text": "Hello \\"World\\"", "path": "C:\\\\Users"}`;
+
+        const result = extractJson(responseText, { logger: mockLogger });
+
+        expect(result).toEqual({ text: 'Hello "World"', path: 'C:\\Users' });
+      });
+
+      it('should handle JSON with unicode', () => {
+        const responseText = `{"emoji": "🚀", "japanese": "日本語"}`;
+
+        const result = extractJson(responseText, { logger: mockLogger });
+
+        expect(result).toEqual({ emoji: '🚀', japanese: '日本語' });
+      });
+
+      it('should work without custom logger', () => {
+        const responseText = `{"simple": "test"}`;
+
+        const result = extractJson(responseText);
+
+        expect(result).toEqual({ simple: 'test' });
+      });
+
+      it('should handle multiple JSON objects in text - takes first valid one', () => {
+        const responseText = `First: {"a": 1} Second: {"b": 2}`;
+
+        const result = extractJson(responseText, { logger: mockLogger });
+
+        expect(result).toEqual({ a: 1 });
+      });
+    });
+  });
+
+  describe('extractJsonWithKey', () => {
+    it('should extract JSON with specified required key', () => {
+      const responseText = `{"suggestions": [{"title": "Test"}]}`;
+
+      const result = extractJsonWithKey(responseText, 'suggestions', { logger: mockLogger });
+
+      expect(result).toEqual({ suggestions: [{ title: 'Test' }] });
+    });
+
+    it('should return null when key is missing', () => {
+      const responseText = `{"other": "data"}`;
+
+      const result = extractJsonWithKey(responseText, 'suggestions', { logger: mockLogger });
+
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('extractJsonWithArray', () => {
+    it('should extract JSON with array at specified key', () => {
+      const responseText = `{"features": ["feature1", "feature2"]}`;
+
+      const result = extractJsonWithArray(responseText, 'features', { logger: mockLogger });
+
+      expect(result).toEqual({ features: ['feature1', 'feature2'] });
+    });
+
+    it('should return null when key value is not an array', () => {
+      const responseText = `{"features": "not an array"}`;
+
+      const result = extractJsonWithArray(responseText, 'features', { logger: mockLogger });
+
+      expect(result).toBeNull();
+    });
+
+    it('should return null when key is missing', () => {
+      const responseText = `{"other": ["array"]}`;
+
+      const result = extractJsonWithArray(responseText, 'features', { logger: mockLogger });
+
+      expect(result).toBeNull();
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/logger.test.ts b/temp_repo/apps/server/tests/unit/lib/logger.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..234a7373d56eb94a950f9bfb635edeea7f206c46
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/logger.test.ts
@@ -0,0 +1,141 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import {
+  LogLevel,
+  createLogger,
+  getLogLevel,
+  setLogLevel,
+  setColorsEnabled,
+  setTimestampsEnabled,
+} from '@automaker/utils';
+
+describe('logger.ts', () => {
+  let consoleSpy: {
+    log: ReturnType<typeof vi.spyOn>;
+    warn: ReturnType<typeof vi.spyOn>;
+    error: ReturnType<typeof vi.spyOn>;
+  };
+  let originalLogLevel: LogLevel;
+
+  beforeEach(() => {
+    originalLogLevel = getLogLevel();
+    // Disable colors and timestamps for predictable test output
+    setColorsEnabled(false);
+    setTimestampsEnabled(false);
+    consoleSpy = {
+      log: vi.spyOn(console, 'log').mockImplementation(() => {}),
+      warn: vi.spyOn(console, 'warn').mockImplementation(() => {}),
+      error: vi.spyOn(console, 'error').mockImplementation(() => {}),
+    };
+  });
+
+  afterEach(() => {
+    setLogLevel(originalLogLevel);
+    consoleSpy.log.mockRestore();
+    consoleSpy.warn.mockRestore();
+    consoleSpy.error.mockRestore();
+  });
+
+  describe('LogLevel enum', () => {
+    it('should have correct numeric values', () => {
+      expect(LogLevel.ERROR).toBe(0);
+      expect(LogLevel.WARN).toBe(1);
+      expect(LogLevel.INFO).toBe(2);
+      expect(LogLevel.DEBUG).toBe(3);
+    });
+  });
+
+  describe('setLogLevel and getLogLevel', () => {
+    it('should set and get log level', () => {
+      setLogLevel(LogLevel.DEBUG);
+      expect(getLogLevel()).toBe(LogLevel.DEBUG);
+
+      setLogLevel(LogLevel.ERROR);
+      expect(getLogLevel()).toBe(LogLevel.ERROR);
+    });
+  });
+
+  describe('createLogger', () => {
+    it('should create a logger with context prefix', () => {
+      setLogLevel(LogLevel.INFO);
+      const logger = createLogger('TestContext');
+
+      logger.info('test message');
+
+      // New format: 'LEVEL [Context]' as first arg, then message
+      expect(consoleSpy.log).toHaveBeenCalledWith('INFO  [TestContext]', 'test message');
+    });
+
+    it('should log error at all log levels', () => {
+      const logger = createLogger('Test');
+
+      setLogLevel(LogLevel.ERROR);
+      logger.error('error message');
+      expect(consoleSpy.error).toHaveBeenCalledWith('ERROR [Test]', 'error message');
+    });
+
+    it('should log warn when level is WARN or higher', () => {
+      const logger = createLogger('Test');
+
+      setLogLevel(LogLevel.ERROR);
+      logger.warn('warn message 1');
+      expect(consoleSpy.log).not.toHaveBeenCalled();
+
+      setLogLevel(LogLevel.WARN);
+      logger.warn('warn message 2');
+      // Note: warn uses console.log in Node.js implementation
+      expect(consoleSpy.log).toHaveBeenCalledWith('WARN  [Test]', 'warn message 2');
+    });
+
+    it('should log info when level is INFO or higher', () => {
+      const logger = createLogger('Test');
+
+      setLogLevel(LogLevel.WARN);
+      logger.info('info message 1');
+      expect(consoleSpy.log).not.toHaveBeenCalled();
+
+      setLogLevel(LogLevel.INFO);
+      logger.info('info message 2');
+      expect(consoleSpy.log).toHaveBeenCalledWith('INFO  [Test]', 'info message 2');
+    });
+
+    it('should log debug only when level is DEBUG', () => {
+      const logger = createLogger('Test');
+
+      setLogLevel(LogLevel.INFO);
+      logger.debug('debug message 1');
+      expect(consoleSpy.log).not.toHaveBeenCalled();
+
+      setLogLevel(LogLevel.DEBUG);
+      logger.debug('debug message 2');
+      expect(consoleSpy.log).toHaveBeenCalledWith('DEBUG [Test]', 'debug message 2');
+    });
+
+    it('should pass multiple arguments to log functions', () => {
+      setLogLevel(LogLevel.DEBUG);
+      const logger = createLogger('Multi');
+
+      logger.info('message', { data: 'value' }, 123);
+      expect(consoleSpy.log).toHaveBeenCalledWith(
+        'INFO  [Multi]',
+        'message',
+        { data: 'value' },
+        123
+      );
+    });
+
+    it('should include timestamps when enabled', () => {
+      setTimestampsEnabled(true);
+      setLogLevel(LogLevel.INFO);
+      const logger = createLogger('Timestamp');
+
+      logger.info('test');
+
+      // First arg should contain ISO timestamp format
+      const firstArg = consoleSpy.log.mock.calls[0][0];
+      expect(firstArg).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z INFO  \[Timestamp\]$/);
+      expect(consoleSpy.log.mock.calls[0][1]).toBe('test');
+
+      setTimestampsEnabled(false);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/model-resolver.test.ts b/temp_repo/apps/server/tests/unit/lib/model-resolver.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..65e3115dfdfefde39bee8ae32ccc14f9a34fcff0
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/model-resolver.test.ts
@@ -0,0 +1,168 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import {
+  resolveModelString,
+  getEffectiveModel,
+  CLAUDE_MODEL_MAP,
+  CURSOR_MODEL_MAP,
+  DEFAULT_MODELS,
+} from '@automaker/model-resolver';
+
+describe('model-resolver.ts', () => {
+  let consoleSpy: any;
+
+  beforeEach(() => {
+    consoleSpy = {
+      log: vi.spyOn(console, 'log').mockImplementation(() => {}),
+      warn: vi.spyOn(console, 'warn').mockImplementation(() => {}),
+    };
+  });
+
+  afterEach(() => {
+    consoleSpy.log.mockRestore();
+    consoleSpy.warn.mockRestore();
+  });
+
+  describe('resolveModelString', () => {
+    it("should resolve 'haiku' alias to full model string", () => {
+      const result = resolveModelString('haiku');
+      expect(result).toBe(CLAUDE_MODEL_MAP.haiku);
+    });
+
+    it("should resolve 'sonnet' alias to full model string", () => {
+      const result = resolveModelString('sonnet');
+      expect(result).toBe(CLAUDE_MODEL_MAP.sonnet);
+    });
+
+    it("should resolve 'opus' alias to full model string", () => {
+      const result = resolveModelString('opus');
+      expect(result).toBe('claude-opus-4-6');
+      expect(consoleSpy.log).toHaveBeenCalledWith(
+        expect.stringContaining('Migrated legacy ID: "opus" -> "claude-opus"')
+      );
+    });
+
+    it('should pass through unknown models unchanged (may be provider models)', () => {
+      // Unknown models now pass through unchanged to support ClaudeCompatibleProvider models
+      // like GLM-4.7, MiniMax-M2.1, o1, etc.
+      const models = ['o1', 'o1-mini', 'o3', 'unknown-model', 'fake-model-123', 'GLM-4.7'];
+      models.forEach((model) => {
+        const result = resolveModelString(model);
+        // Should pass through unchanged (could be provider models)
+        expect(result).toBe(model);
+      });
+    });
+
+    it('should pass through full Claude model strings', () => {
+      const models = [CLAUDE_MODEL_MAP.opus, CLAUDE_MODEL_MAP.sonnet, CLAUDE_MODEL_MAP.haiku];
+      models.forEach((model) => {
+        const result = resolveModelString(model);
+        expect(result).toBe(model);
+      });
+      expect(consoleSpy.log).toHaveBeenCalledWith(
+        expect.stringContaining('Using full Claude model string')
+      );
+    });
+
+    it('should return default model when modelKey is undefined', () => {
+      const result = resolveModelString(undefined);
+      expect(result).toBe(DEFAULT_MODELS.claude);
+    });
+
+    it('should return custom default model when provided', () => {
+      const customDefault = 'custom-model';
+      const result = resolveModelString(undefined, customDefault);
+      expect(result).toBe(customDefault);
+    });
+
+    it('should pass through unknown model key unchanged (no warning)', () => {
+      const result = resolveModelString('unknown-model');
+      // Unknown models pass through unchanged (could be provider models)
+      expect(result).toBe('unknown-model');
+      // No warning - unknown models are valid for providers
+      expect(consoleSpy.warn).not.toHaveBeenCalled();
+    });
+
+    it('should handle empty string', () => {
+      const result = resolveModelString('');
+      expect(result).toBe(DEFAULT_MODELS.claude);
+    });
+
+    describe('Cursor models', () => {
+      it('should pass through cursor-prefixed models unchanged', () => {
+        const result = resolveModelString('cursor-composer-1');
+        expect(result).toBe('cursor-composer-1');
+        expect(consoleSpy.log).toHaveBeenCalledWith(expect.stringContaining('Using Cursor model'));
+      });
+
+      it('should add cursor- prefix to bare Cursor model IDs', () => {
+        const result = resolveModelString('composer-1');
+        expect(result).toBe('cursor-composer-1');
+      });
+
+      it('should handle cursor-auto model', () => {
+        const result = resolveModelString('cursor-auto');
+        expect(result).toBe('cursor-auto');
+      });
+
+      it('should handle all known Cursor model IDs with prefix', () => {
+        const cursorModelIds = Object.keys(CURSOR_MODEL_MAP);
+        cursorModelIds.forEach((modelId) => {
+          const result = resolveModelString(`cursor-${modelId}`);
+          expect(result).toBe(`cursor-${modelId}`);
+        });
+      });
+    });
+  });
+
+  describe('getEffectiveModel', () => {
+    it('should prioritize explicit model over session and default', () => {
+      const result = getEffectiveModel('opus', 'haiku', 'gpt-5.2');
+      expect(result).toBe('claude-opus-4-6');
+    });
+
+    it('should use session model when explicit is not provided', () => {
+      const result = getEffectiveModel(undefined, 'sonnet', 'gpt-5.2');
+      expect(result).toBe(CLAUDE_MODEL_MAP.sonnet);
+    });
+
+    it('should use default when neither explicit nor session is provided', () => {
+      const customDefault = CLAUDE_MODEL_MAP.haiku;
+      const result = getEffectiveModel(undefined, undefined, customDefault);
+      expect(result).toBe(customDefault);
+    });
+
+    it('should use Claude default when no arguments provided', () => {
+      const result = getEffectiveModel();
+      expect(result).toBe(DEFAULT_MODELS.claude);
+    });
+
+    it('should handle explicit empty strings as undefined', () => {
+      const result = getEffectiveModel('', 'haiku');
+      expect(result).toBe(CLAUDE_MODEL_MAP.haiku);
+    });
+  });
+
+  describe('CLAUDE_MODEL_MAP', () => {
+    it('should have haiku, sonnet, opus mappings', () => {
+      expect(CLAUDE_MODEL_MAP).toHaveProperty('haiku');
+      expect(CLAUDE_MODEL_MAP).toHaveProperty('sonnet');
+      expect(CLAUDE_MODEL_MAP).toHaveProperty('opus');
+    });
+
+    it('should have valid Claude model strings', () => {
+      expect(CLAUDE_MODEL_MAP.haiku).toContain('haiku');
+      expect(CLAUDE_MODEL_MAP.sonnet).toContain('sonnet');
+      expect(CLAUDE_MODEL_MAP.opus).toContain('opus');
+    });
+  });
+
+  describe('DEFAULT_MODELS', () => {
+    it('should have claude default', () => {
+      expect(DEFAULT_MODELS).toHaveProperty('claude');
+    });
+
+    it('should have valid default model', () => {
+      expect(DEFAULT_MODELS.claude).toContain('claude');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/nul-delimiter.test.ts b/temp_repo/apps/server/tests/unit/lib/nul-delimiter.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5cf20bdc77013ceb43579502bb033931ede11ae0
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/nul-delimiter.test.ts
@@ -0,0 +1,83 @@
+// Automated tests for NUL character behavior in git commit parsing
+
+import { describe, it, expect } from 'vitest';
+
+describe('NUL character behavior', () => {
+  // Create a string with NUL characters
+  const str1 =
+    'abc123\x00abc1\x00John Doe\x00john@example.com\x002023-01-01T12:00:00Z\x00Initial commit\x00This is a normal commit body\x00';
+
+  describe('split on NUL character', () => {
+    const parts = str1.split('\0');
+
+    it('should produce the expected number of parts', () => {
+      // 7 fields + 1 trailing empty string from the trailing \x00
+      expect(parts.length).toBe(8);
+    });
+
+    it('should contain the expected part values', () => {
+      expect(parts[0]).toBe('abc123');
+      expect(parts[1]).toBe('abc1');
+      expect(parts[2]).toBe('John Doe');
+      expect(parts[3]).toBe('john@example.com');
+      expect(parts[4]).toBe('2023-01-01T12:00:00Z');
+      expect(parts[5]).toBe('Initial commit');
+      expect(parts[6]).toBe('This is a normal commit body');
+      expect(parts[7]).toBe('');
+    });
+
+    it('should have correct lengths for each part', () => {
+      expect(parts[0].length).toBe(6); // 'abc123'
+      expect(parts[1].length).toBe(4); // 'abc1'
+      expect(parts[2].length).toBe(8); // 'John Doe'
+      expect(parts[3].length).toBe(16); // 'john@example.com'
+      expect(parts[4].length).toBe(20); // '2023-01-01T12:00:00Z'
+      expect(parts[5].length).toBe(14); // 'Initial commit'
+      expect(parts[6].length).toBe(28); // 'This is a normal commit body'
+      expect(parts[7].length).toBe(0); // trailing empty
+    });
+  });
+
+  describe('git format split and filter', () => {
+    const gitFormat = `abc123\x00abc1\x00John Doe\x00john@example.com\x002023-01-01T12:00:00Z\x00Initial commit\x00Body text here\x00def456\x00def4\x00Jane Smith\x00jane@example.com\x002023-01-02T12:00:00Z\x00Second commit\x00Body with ---END--- text\x00`;
+
+    const gitParts = gitFormat.split('\0').filter((block) => block.trim());
+
+    it('should produce the expected number of non-empty parts after filtering', () => {
+      // 14 non-empty field strings (7 fields per commit × 2 commits); trailing empty is filtered out
+      expect(gitParts.length).toBe(14);
+    });
+
+    it('should contain correct field values for the first commit', () => {
+      const fields = gitParts.slice(0, 7);
+      expect(fields.length).toBe(7);
+      expect(fields[0]).toBe('abc123'); // hash
+      expect(fields[1]).toBe('abc1'); // shortHash
+      expect(fields[2]).toBe('John Doe'); // author
+      expect(fields[3]).toBe('john@example.com'); // authorEmail
+      expect(fields[4]).toBe('2023-01-01T12:00:00Z'); // date
+      expect(fields[5]).toBe('Initial commit'); // subject
+      expect(fields[6]).toBe('Body text here'); // body
+    });
+
+    it('should contain correct field values for the second commit', () => {
+      const fields = gitParts.slice(7, 14);
+      expect(fields.length).toBe(7);
+      expect(fields[0]).toBe('def456'); // hash
+      expect(fields[1]).toBe('def4'); // shortHash
+      expect(fields[2]).toBe('Jane Smith'); // author
+      expect(fields[3]).toBe('jane@example.com'); // authorEmail
+      expect(fields[4]).toBe('2023-01-02T12:00:00Z'); // date
+      expect(fields[5]).toBe('Second commit'); // subject
+      expect(fields[6]).toBe('Body with ---END--- text'); // body (---END--- handled correctly)
+    });
+
+    it('each part should have the expected number of newline-delimited fields', () => {
+      // Each gitPart is a single field value (no internal newlines), so split('\n') yields 1 field
+      gitParts.forEach((block) => {
+        const fields = block.split('\n');
+        expect(fields.length).toBe(1);
+      });
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/prompt-builder.test.ts b/temp_repo/apps/server/tests/unit/lib/prompt-builder.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1577c4aa9621b8c3302e7fe53c2d9f35f495de52
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/prompt-builder.test.ts
@@ -0,0 +1,120 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import * as utils from '@automaker/utils';
+import * as fs from 'fs/promises';
+
+// Mock fs module for the image-handler's readFile calls
+vi.mock('fs/promises');
+
+describe('prompt-builder.ts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Setup default mock for fs.readFile to return a valid image buffer
+    vi.mocked(fs.readFile).mockResolvedValue(Buffer.from('fake-image-data'));
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('buildPromptWithImages', () => {
+    it('should return plain text when no images provided', async () => {
+      const result = await utils.buildPromptWithImages('Hello world');
+
+      expect(result).toEqual({
+        content: 'Hello world',
+        hasImages: false,
+      });
+    });
+
+    it('should return plain text when imagePaths is empty array', async () => {
+      const result = await utils.buildPromptWithImages('Hello world', []);
+
+      expect(result).toEqual({
+        content: 'Hello world',
+        hasImages: false,
+      });
+    });
+
+    it('should build content blocks with single image', async () => {
+      const result = await utils.buildPromptWithImages('Describe this image', ['/test.png']);
+
+      expect(result.hasImages).toBe(true);
+      expect(Array.isArray(result.content)).toBe(true);
+      const content = result.content as Array<{ type: string; text?: string }>;
+      expect(content).toHaveLength(2);
+      expect(content[0]).toEqual({ type: 'text', text: 'Describe this image' });
+      expect(content[1].type).toBe('image');
+    });
+
+    it('should build content blocks with multiple images', async () => {
+      const result = await utils.buildPromptWithImages('Analyze these', ['/a.png', '/b.jpg']);
+
+      expect(result.hasImages).toBe(true);
+      const content = result.content as Array<{ type: string }>;
+      expect(content).toHaveLength(3); // 1 text + 2 images
+      expect(content[0].type).toBe('text');
+      expect(content[1].type).toBe('image');
+      expect(content[2].type).toBe('image');
+    });
+
+    it('should include image paths in text when requested', async () => {
+      const result = await utils.buildPromptWithImages(
+        'Base prompt',
+        ['/test.png'],
+        undefined,
+        true
+      );
+
+      const content = result.content as Array<{ type: string; text?: string }>;
+      expect(content[0].text).toContain('Base prompt');
+      expect(content[0].text).toContain('/test.png');
+    });
+
+    it('should not include image paths by default', async () => {
+      const result = await utils.buildPromptWithImages('Base prompt', ['/test.png']);
+
+      const content = result.content as Array<{ type: string; text?: string }>;
+      expect(content[0].text).toBe('Base prompt');
+      expect(content[0].text).not.toContain('Attached');
+    });
+
+    it('should handle empty text content', async () => {
+      const result = await utils.buildPromptWithImages('', ['/test.png']);
+
+      expect(result.hasImages).toBe(true);
+      // When text is empty/whitespace, should only have image blocks
+      const content = result.content as Array<{ type: string }>;
+      expect(content.every((block) => block.type === 'image')).toBe(true);
+    });
+
+    it('should trim text content before checking if empty', async () => {
+      const result = await utils.buildPromptWithImages('   ', ['/test.png']);
+
+      const content = result.content as Array<{ type: string }>;
+      // Whitespace-only text should be excluded
+      expect(content.every((block) => block.type === 'image')).toBe(true);
+    });
+
+    it("should return text when only one block and it's text", async () => {
+      // Make readFile reject to simulate image load failure
+      vi.mocked(fs.readFile).mockRejectedValue(new Error('File not found'));
+
+      const result = await utils.buildPromptWithImages('Just text', ['/missing.png']);
+
+      // If no images are successfully loaded, should return just the text
+      expect(result.content).toBe('Just text');
+      expect(result.hasImages).toBe(true); // Still true because images were requested
+    });
+
+    it('should pass workDir for path resolution', async () => {
+      // The function should use workDir to resolve relative paths
+      const result = await utils.buildPromptWithImages('Test', ['relative.png'], '/work/dir');
+
+      // Verify it tried to read the file (with resolved path including workDir)
+      expect(fs.readFile).toHaveBeenCalled();
+      // The path should be resolved using workDir
+      const readCall = vi.mocked(fs.readFile).mock.calls[0][0];
+      expect(readCall).toContain('relative.png');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/sdk-options.test.ts b/temp_repo/apps/server/tests/unit/lib/sdk-options.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f552efd95b16d0b9b33fac87a0b1b68d112bb5aa
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/sdk-options.test.ts
@@ -0,0 +1,519 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+describe('sdk-options.ts', () => {
+  let originalEnv: NodeJS.ProcessEnv;
+
+  beforeEach(() => {
+    originalEnv = { ...process.env };
+    vi.resetModules();
+  });
+
+  afterEach(() => {
+    process.env = originalEnv;
+  });
+
+  describe('TOOL_PRESETS', () => {
+    it('should export readOnly tools', async () => {
+      const { TOOL_PRESETS } = await import('@/lib/sdk-options.js');
+      expect(TOOL_PRESETS.readOnly).toEqual(['Read', 'Glob', 'Grep']);
+    });
+
+    it('should export specGeneration tools', async () => {
+      const { TOOL_PRESETS } = await import('@/lib/sdk-options.js');
+      expect(TOOL_PRESETS.specGeneration).toEqual(['Read', 'Glob', 'Grep']);
+    });
+
+    it('should export fullAccess tools', async () => {
+      const { TOOL_PRESETS } = await import('@/lib/sdk-options.js');
+      expect(TOOL_PRESETS.fullAccess).toContain('Read');
+      expect(TOOL_PRESETS.fullAccess).toContain('Write');
+      expect(TOOL_PRESETS.fullAccess).toContain('Edit');
+      expect(TOOL_PRESETS.fullAccess).toContain('Bash');
+    });
+
+    it('should export chat tools matching fullAccess', async () => {
+      const { TOOL_PRESETS } = await import('@/lib/sdk-options.js');
+      expect(TOOL_PRESETS.chat).toEqual(TOOL_PRESETS.fullAccess);
+    });
+  });
+
+  describe('MAX_TURNS', () => {
+    it('should export turn presets', async () => {
+      const { MAX_TURNS } = await import('@/lib/sdk-options.js');
+      expect(MAX_TURNS.quick).toBe(50);
+      expect(MAX_TURNS.standard).toBe(100);
+      expect(MAX_TURNS.extended).toBe(250);
+      expect(MAX_TURNS.maximum).toBe(1000);
+    });
+  });
+
+  describe('getModelForUseCase', () => {
+    it('should return explicit model when provided', async () => {
+      const { getModelForUseCase } = await import('@/lib/sdk-options.js');
+      const result = getModelForUseCase('spec', 'claude-sonnet-4-6');
+      expect(result).toBe('claude-sonnet-4-6');
+    });
+
+    it('should use environment variable for spec model', async () => {
+      process.env.AUTOMAKER_MODEL_SPEC = 'claude-sonnet-4-6';
+      const { getModelForUseCase } = await import('@/lib/sdk-options.js');
+      const result = getModelForUseCase('spec');
+      expect(result).toBe('claude-sonnet-4-6');
+    });
+
+    it('should use default model for spec when no override', async () => {
+      delete process.env.AUTOMAKER_MODEL_SPEC;
+      delete process.env.AUTOMAKER_MODEL_DEFAULT;
+      const { getModelForUseCase } = await import('@/lib/sdk-options.js');
+      const result = getModelForUseCase('spec');
+      expect(result).toContain('claude');
+    });
+
+    it('should fall back to AUTOMAKER_MODEL_DEFAULT', async () => {
+      delete process.env.AUTOMAKER_MODEL_SPEC;
+      process.env.AUTOMAKER_MODEL_DEFAULT = 'claude-sonnet-4-6';
+      const { getModelForUseCase } = await import('@/lib/sdk-options.js');
+      const result = getModelForUseCase('spec');
+      expect(result).toBe('claude-sonnet-4-6');
+    });
+  });
+
+  describe('createSpecGenerationOptions', () => {
+    it('should create options with spec generation settings', async () => {
+      const { createSpecGenerationOptions, TOOL_PRESETS, MAX_TURNS } =
+        await import('@/lib/sdk-options.js');
+
+      const options = createSpecGenerationOptions({ cwd: '/test/path' });
+
+      expect(options.cwd).toBe('/test/path');
+      expect(options.maxTurns).toBe(MAX_TURNS.maximum);
+      expect(options.allowedTools).toEqual([...TOOL_PRESETS.specGeneration]);
+      expect(options.permissionMode).toBe('default');
+    });
+
+    it('should include system prompt when provided', async () => {
+      const { createSpecGenerationOptions } = await import('@/lib/sdk-options.js');
+
+      const options = createSpecGenerationOptions({
+        cwd: '/test/path',
+        systemPrompt: 'Custom prompt',
+      });
+
+      expect(options.systemPrompt).toBe('Custom prompt');
+    });
+
+    it('should include abort controller when provided', async () => {
+      const { createSpecGenerationOptions } = await import('@/lib/sdk-options.js');
+
+      const abortController = new AbortController();
+      const options = createSpecGenerationOptions({
+        cwd: '/test/path',
+        abortController,
+      });
+
+      expect(options.abortController).toBe(abortController);
+    });
+  });
+
+  describe('createFeatureGenerationOptions', () => {
+    it('should create options with feature generation settings', async () => {
+      const { createFeatureGenerationOptions, TOOL_PRESETS, MAX_TURNS } =
+        await import('@/lib/sdk-options.js');
+
+      const options = createFeatureGenerationOptions({ cwd: '/test/path' });
+
+      expect(options.cwd).toBe('/test/path');
+      expect(options.maxTurns).toBe(MAX_TURNS.quick);
+      expect(options.allowedTools).toEqual([...TOOL_PRESETS.readOnly]);
+    });
+  });
+
+  describe('createSuggestionsOptions', () => {
+    it('should create options with suggestions settings', async () => {
+      const { createSuggestionsOptions, TOOL_PRESETS, MAX_TURNS } =
+        await import('@/lib/sdk-options.js');
+
+      const options = createSuggestionsOptions({ cwd: '/test/path' });
+
+      expect(options.cwd).toBe('/test/path');
+      expect(options.maxTurns).toBe(MAX_TURNS.extended);
+      expect(options.allowedTools).toEqual([...TOOL_PRESETS.readOnly]);
+    });
+
+    it('should include systemPrompt when provided', async () => {
+      const { createSuggestionsOptions } = await import('@/lib/sdk-options.js');
+
+      const options = createSuggestionsOptions({
+        cwd: '/test/path',
+        systemPrompt: 'Custom prompt',
+      });
+
+      expect(options.systemPrompt).toBe('Custom prompt');
+    });
+
+    it('should include abortController when provided', async () => {
+      const { createSuggestionsOptions } = await import('@/lib/sdk-options.js');
+
+      const abortController = new AbortController();
+      const options = createSuggestionsOptions({
+        cwd: '/test/path',
+        abortController,
+      });
+
+      expect(options.abortController).toBe(abortController);
+    });
+
+    it('should include outputFormat when provided', async () => {
+      const { createSuggestionsOptions } = await import('@/lib/sdk-options.js');
+
+      const options = createSuggestionsOptions({
+        cwd: '/test/path',
+        outputFormat: { type: 'json' },
+      });
+
+      expect(options.outputFormat).toEqual({ type: 'json' });
+    });
+  });
+
+  describe('createChatOptions', () => {
+    it('should create options with chat settings', async () => {
+      const { createChatOptions, TOOL_PRESETS, MAX_TURNS } = await import('@/lib/sdk-options.js');
+
+      const options = createChatOptions({ cwd: '/test/path' });
+
+      expect(options.cwd).toBe('/test/path');
+      expect(options.maxTurns).toBe(MAX_TURNS.standard);
+      expect(options.allowedTools).toEqual([...TOOL_PRESETS.chat]);
+    });
+
+    it('should prefer explicit model over session model', async () => {
+      const { createChatOptions } = await import('@/lib/sdk-options.js');
+
+      const options = createChatOptions({
+        cwd: '/test/path',
+        model: 'claude-opus-4-20250514',
+        sessionModel: 'claude-haiku-3-5-20241022',
+      });
+
+      expect(options.model).toBe('claude-opus-4-20250514');
+    });
+
+    it('should use session model when explicit model not provided', async () => {
+      const { createChatOptions } = await import('@/lib/sdk-options.js');
+
+      const options = createChatOptions({
+        cwd: '/test/path',
+        sessionModel: 'claude-sonnet-4-6',
+      });
+
+      expect(options.model).toBe('claude-sonnet-4-6');
+    });
+  });
+
+  describe('createAutoModeOptions', () => {
+    it('should create options with auto mode settings', async () => {
+      const { createAutoModeOptions, TOOL_PRESETS, MAX_TURNS } =
+        await import('@/lib/sdk-options.js');
+
+      const options = createAutoModeOptions({ cwd: '/test/path' });
+
+      expect(options.cwd).toBe('/test/path');
+      expect(options.maxTurns).toBe(MAX_TURNS.maximum);
+      expect(options.allowedTools).toEqual([...TOOL_PRESETS.fullAccess]);
+    });
+
+    it('should include systemPrompt when provided', async () => {
+      const { createAutoModeOptions } = await import('@/lib/sdk-options.js');
+
+      const options = createAutoModeOptions({
+        cwd: '/test/path',
+        systemPrompt: 'Custom prompt',
+      });
+
+      expect(options.systemPrompt).toBe('Custom prompt');
+    });
+
+    it('should include abortController when provided', async () => {
+      const { createAutoModeOptions } = await import('@/lib/sdk-options.js');
+
+      const abortController = new AbortController();
+      const options = createAutoModeOptions({
+        cwd: '/test/path',
+        abortController,
+      });
+
+      expect(options.abortController).toBe(abortController);
+    });
+  });
+
+  describe('createCustomOptions', () => {
+    it('should create options with custom settings', async () => {
+      const { createCustomOptions } = await import('@/lib/sdk-options.js');
+
+      const options = createCustomOptions({
+        cwd: '/test/path',
+        maxTurns: 10,
+        allowedTools: ['Read', 'Write'],
+      });
+
+      expect(options.cwd).toBe('/test/path');
+      expect(options.maxTurns).toBe(10);
+      expect(options.allowedTools).toEqual(['Read', 'Write']);
+    });
+
+    it('should use defaults when optional params not provided', async () => {
+      const { createCustomOptions, TOOL_PRESETS, MAX_TURNS } = await import('@/lib/sdk-options.js');
+
+      const options = createCustomOptions({ cwd: '/test/path' });
+
+      expect(options.maxTurns).toBe(MAX_TURNS.maximum);
+      expect(options.allowedTools).toEqual([...TOOL_PRESETS.readOnly]);
+    });
+
+    it('should include systemPrompt when provided', async () => {
+      const { createCustomOptions } = await import('@/lib/sdk-options.js');
+
+      const options = createCustomOptions({
+        cwd: '/test/path',
+        systemPrompt: 'Custom prompt',
+      });
+
+      expect(options.systemPrompt).toBe('Custom prompt');
+    });
+
+    it('should include abortController when provided', async () => {
+      const { createCustomOptions } = await import('@/lib/sdk-options.js');
+
+      const abortController = new AbortController();
+      const options = createCustomOptions({
+        cwd: '/test/path',
+        abortController,
+      });
+
+      expect(options.abortController).toBe(abortController);
+    });
+  });
+
+  describe('getThinkingTokenBudget (from @automaker/types)', () => {
+    it('should return undefined for "none" thinking level', async () => {
+      const { getThinkingTokenBudget } = await import('@automaker/types');
+      expect(getThinkingTokenBudget('none')).toBeUndefined();
+    });
+
+    it('should return undefined for undefined thinking level', async () => {
+      const { getThinkingTokenBudget } = await import('@automaker/types');
+      expect(getThinkingTokenBudget(undefined)).toBeUndefined();
+    });
+
+    it('should return 1024 for "low" thinking level', async () => {
+      const { getThinkingTokenBudget } = await import('@automaker/types');
+      expect(getThinkingTokenBudget('low')).toBe(1024);
+    });
+
+    it('should return 10000 for "medium" thinking level', async () => {
+      const { getThinkingTokenBudget } = await import('@automaker/types');
+      expect(getThinkingTokenBudget('medium')).toBe(10000);
+    });
+
+    it('should return 16000 for "high" thinking level', async () => {
+      const { getThinkingTokenBudget } = await import('@automaker/types');
+      expect(getThinkingTokenBudget('high')).toBe(16000);
+    });
+
+    it('should return 32000 for "ultrathink" thinking level', async () => {
+      const { getThinkingTokenBudget } = await import('@automaker/types');
+      expect(getThinkingTokenBudget('ultrathink')).toBe(32000);
+    });
+  });
+
+  describe('THINKING_TOKEN_BUDGET constant', () => {
+    it('should have correct values for all thinking levels', async () => {
+      const { THINKING_TOKEN_BUDGET } = await import('@automaker/types');
+
+      expect(THINKING_TOKEN_BUDGET.none).toBeUndefined();
+      expect(THINKING_TOKEN_BUDGET.low).toBe(1024);
+      expect(THINKING_TOKEN_BUDGET.medium).toBe(10000);
+      expect(THINKING_TOKEN_BUDGET.high).toBe(16000);
+      expect(THINKING_TOKEN_BUDGET.ultrathink).toBe(32000);
+    });
+
+    it('should have minimum of 1024 for enabled thinking levels', async () => {
+      const { THINKING_TOKEN_BUDGET } = await import('@automaker/types');
+
+      // Per Claude SDK docs: minimum is 1024 tokens
+      expect(THINKING_TOKEN_BUDGET.low).toBeGreaterThanOrEqual(1024);
+      expect(THINKING_TOKEN_BUDGET.medium).toBeGreaterThanOrEqual(1024);
+      expect(THINKING_TOKEN_BUDGET.high).toBeGreaterThanOrEqual(1024);
+      expect(THINKING_TOKEN_BUDGET.ultrathink).toBeGreaterThanOrEqual(1024);
+    });
+
+    it('should have ultrathink at or below 32000 to avoid timeouts', async () => {
+      const { THINKING_TOKEN_BUDGET } = await import('@automaker/types');
+
+      // Per Claude SDK docs: above 32000 risks timeouts
+      expect(THINKING_TOKEN_BUDGET.ultrathink).toBeLessThanOrEqual(32000);
+    });
+  });
+
+  describe('thinking level integration with SDK options', () => {
+    describe('createSpecGenerationOptions with thinkingLevel', () => {
+      it('should not include maxThinkingTokens when thinkingLevel is undefined', async () => {
+        const { createSpecGenerationOptions } = await import('@/lib/sdk-options.js');
+
+        const options = createSpecGenerationOptions({ cwd: '/test/path' });
+
+        expect(options.maxThinkingTokens).toBeUndefined();
+      });
+
+      it('should not include maxThinkingTokens when thinkingLevel is "none"', async () => {
+        const { createSpecGenerationOptions } = await import('@/lib/sdk-options.js');
+
+        const options = createSpecGenerationOptions({
+          cwd: '/test/path',
+          thinkingLevel: 'none',
+        });
+
+        expect(options.maxThinkingTokens).toBeUndefined();
+      });
+
+      it('should include maxThinkingTokens for "low" thinkingLevel', async () => {
+        const { createSpecGenerationOptions } = await import('@/lib/sdk-options.js');
+
+        const options = createSpecGenerationOptions({
+          cwd: '/test/path',
+          thinkingLevel: 'low',
+        });
+
+        expect(options.maxThinkingTokens).toBe(1024);
+      });
+
+      it('should include maxThinkingTokens for "high" thinkingLevel', async () => {
+        const { createSpecGenerationOptions } = await import('@/lib/sdk-options.js');
+
+        const options = createSpecGenerationOptions({
+          cwd: '/test/path',
+          thinkingLevel: 'high',
+        });
+
+        expect(options.maxThinkingTokens).toBe(16000);
+      });
+
+      it('should include maxThinkingTokens for "ultrathink" thinkingLevel', async () => {
+        const { createSpecGenerationOptions } = await import('@/lib/sdk-options.js');
+
+        const options = createSpecGenerationOptions({
+          cwd: '/test/path',
+          thinkingLevel: 'ultrathink',
+        });
+
+        expect(options.maxThinkingTokens).toBe(32000);
+      });
+    });
+
+    describe('createAutoModeOptions with thinkingLevel', () => {
+      it('should not include maxThinkingTokens when thinkingLevel is undefined', async () => {
+        const { createAutoModeOptions } = await import('@/lib/sdk-options.js');
+
+        const options = createAutoModeOptions({ cwd: '/test/path' });
+
+        expect(options.maxThinkingTokens).toBeUndefined();
+      });
+
+      it('should include maxThinkingTokens for "medium" thinkingLevel', async () => {
+        const { createAutoModeOptions } = await import('@/lib/sdk-options.js');
+
+        const options = createAutoModeOptions({
+          cwd: '/test/path',
+          thinkingLevel: 'medium',
+        });
+
+        expect(options.maxThinkingTokens).toBe(10000);
+      });
+
+      it('should include maxThinkingTokens for "ultrathink" thinkingLevel', async () => {
+        const { createAutoModeOptions } = await import('@/lib/sdk-options.js');
+
+        const options = createAutoModeOptions({
+          cwd: '/test/path',
+          thinkingLevel: 'ultrathink',
+        });
+
+        expect(options.maxThinkingTokens).toBe(32000);
+      });
+    });
+
+    describe('createChatOptions with thinkingLevel', () => {
+      it('should include maxThinkingTokens for enabled thinkingLevel', async () => {
+        const { createChatOptions } = await import('@/lib/sdk-options.js');
+
+        const options = createChatOptions({
+          cwd: '/test/path',
+          thinkingLevel: 'high',
+        });
+
+        expect(options.maxThinkingTokens).toBe(16000);
+      });
+    });
+
+    describe('createSuggestionsOptions with thinkingLevel', () => {
+      it('should include maxThinkingTokens for enabled thinkingLevel', async () => {
+        const { createSuggestionsOptions } = await import('@/lib/sdk-options.js');
+
+        const options = createSuggestionsOptions({
+          cwd: '/test/path',
+          thinkingLevel: 'low',
+        });
+
+        expect(options.maxThinkingTokens).toBe(1024);
+      });
+    });
+
+    describe('createCustomOptions with thinkingLevel', () => {
+      it('should include maxThinkingTokens for enabled thinkingLevel', async () => {
+        const { createCustomOptions } = await import('@/lib/sdk-options.js');
+
+        const options = createCustomOptions({
+          cwd: '/test/path',
+          thinkingLevel: 'medium',
+        });
+
+        expect(options.maxThinkingTokens).toBe(10000);
+      });
+
+      it('should not include maxThinkingTokens when thinkingLevel is "none"', async () => {
+        const { createCustomOptions } = await import('@/lib/sdk-options.js');
+
+        const options = createCustomOptions({
+          cwd: '/test/path',
+          thinkingLevel: 'none',
+        });
+
+        expect(options.maxThinkingTokens).toBeUndefined();
+      });
+    });
+
+    describe('adaptive thinking for Opus 4.6', () => {
+      it('should not set maxThinkingTokens for adaptive thinking (model decides)', async () => {
+        const { createAutoModeOptions } = await import('@/lib/sdk-options.js');
+
+        const options = createAutoModeOptions({
+          cwd: '/test/path',
+          thinkingLevel: 'adaptive',
+        });
+
+        expect(options.maxThinkingTokens).toBeUndefined();
+      });
+
+      it('should not include maxThinkingTokens when thinkingLevel is "none"', async () => {
+        const { createAutoModeOptions } = await import('@/lib/sdk-options.js');
+
+        const options = createAutoModeOptions({
+          cwd: '/test/path',
+          thinkingLevel: 'none',
+        });
+
+        expect(options.maxThinkingTokens).toBeUndefined();
+      });
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/security.test.ts b/temp_repo/apps/server/tests/unit/lib/security.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bd90d5983f941d1b40b1ee401127c50afc4a8ba6
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/security.test.ts
@@ -0,0 +1,186 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import path from 'path';
+
+/**
+ * Note: security.ts maintains module-level state (allowed paths Set).
+ * We need to reset modules and reimport for each test to get fresh state.
+ */
+describe('security.ts', () => {
+  beforeEach(() => {
+    vi.resetModules();
+  });
+
+  describe('initAllowedPaths', () => {
+    it('should load ALLOWED_ROOT_DIRECTORY if set', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/projects';
+      delete process.env.DATA_DIR;
+
+      const { initAllowedPaths, getAllowedPaths } = await import('@automaker/platform');
+      initAllowedPaths();
+
+      const allowed = getAllowedPaths();
+      expect(allowed).toContain(path.resolve('/projects'));
+    });
+
+    it('should include DATA_DIR if set', async () => {
+      delete process.env.ALLOWED_ROOT_DIRECTORY;
+      process.env.DATA_DIR = '/data/dir';
+
+      const { initAllowedPaths, getAllowedPaths } = await import('@automaker/platform');
+      initAllowedPaths();
+
+      const allowed = getAllowedPaths();
+      expect(allowed).toContain(path.resolve('/data/dir'));
+    });
+
+    it('should include both ALLOWED_ROOT_DIRECTORY and DATA_DIR if both set', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/projects';
+      process.env.DATA_DIR = '/data';
+
+      const { initAllowedPaths, getAllowedPaths } = await import('@automaker/platform');
+      initAllowedPaths();
+
+      const allowed = getAllowedPaths();
+      expect(allowed).toContain(path.resolve('/projects'));
+      expect(allowed).toContain(path.resolve('/data'));
+      expect(allowed).toHaveLength(2);
+    });
+
+    it('should return empty array when no paths configured', async () => {
+      delete process.env.ALLOWED_ROOT_DIRECTORY;
+      delete process.env.DATA_DIR;
+
+      const { initAllowedPaths, getAllowedPaths } = await import('@automaker/platform');
+      initAllowedPaths();
+
+      const allowed = getAllowedPaths();
+      expect(allowed).toHaveLength(0);
+    });
+  });
+
+  describe('isPathAllowed', () => {
+    it('should allow paths within ALLOWED_ROOT_DIRECTORY', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/allowed/project';
+      process.env.DATA_DIR = '';
+
+      const { initAllowedPaths, isPathAllowed } = await import('@automaker/platform');
+      initAllowedPaths();
+
+      // Paths within allowed directory should be allowed
+      expect(isPathAllowed('/allowed/project/file.txt')).toBe(true);
+      expect(isPathAllowed('/allowed/project/subdir/file.txt')).toBe(true);
+
+      // Paths outside allowed directory should be denied
+      expect(isPathAllowed('/not/allowed/file.txt')).toBe(false);
+      expect(isPathAllowed('/tmp/file.txt')).toBe(false);
+      expect(isPathAllowed('/etc/passwd')).toBe(false);
+    });
+
+    it('should allow all paths when no restrictions are configured', async () => {
+      delete process.env.DATA_DIR;
+      delete process.env.ALLOWED_ROOT_DIRECTORY;
+
+      const { initAllowedPaths, isPathAllowed } = await import('@automaker/platform');
+      initAllowedPaths();
+
+      // All paths should be allowed when no restrictions are configured
+      expect(isPathAllowed('/allowed/project/file.txt')).toBe(true);
+      expect(isPathAllowed('/not/allowed/file.txt')).toBe(true);
+      expect(isPathAllowed('/tmp/file.txt')).toBe(true);
+      expect(isPathAllowed('/etc/passwd')).toBe(true);
+      expect(isPathAllowed('/any/path')).toBe(true);
+    });
+
+    it('should allow all paths when DATA_DIR is set but ALLOWED_ROOT_DIRECTORY is not', async () => {
+      process.env.DATA_DIR = '/data';
+      delete process.env.ALLOWED_ROOT_DIRECTORY;
+
+      const { initAllowedPaths, isPathAllowed } = await import('@automaker/platform');
+      initAllowedPaths();
+
+      // DATA_DIR should be allowed
+      expect(isPathAllowed('/data/settings.json')).toBe(true);
+      // But all other paths should also be allowed when ALLOWED_ROOT_DIRECTORY is not set
+      expect(isPathAllowed('/allowed/project/file.txt')).toBe(true);
+      expect(isPathAllowed('/not/allowed/file.txt')).toBe(true);
+      expect(isPathAllowed('/tmp/file.txt')).toBe(true);
+      expect(isPathAllowed('/etc/passwd')).toBe(true);
+      expect(isPathAllowed('/any/path')).toBe(true);
+    });
+  });
+
+  describe('validatePath', () => {
+    it('should return resolved path for allowed paths', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/allowed';
+      process.env.DATA_DIR = '';
+
+      const { initAllowedPaths, validatePath } = await import('@automaker/platform');
+      initAllowedPaths();
+
+      const result = validatePath('/allowed/file.txt');
+      expect(result).toBe(path.resolve('/allowed/file.txt'));
+    });
+
+    it('should throw error for paths outside allowed directories', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/allowed';
+      process.env.DATA_DIR = '';
+
+      const { initAllowedPaths, validatePath } = await import('@automaker/platform');
+      initAllowedPaths();
+
+      // Disallowed paths should throw PathNotAllowedError
+      expect(() => validatePath('/disallowed/file.txt')).toThrow();
+    });
+
+    it('should not throw error for any path when no restrictions are configured', async () => {
+      delete process.env.DATA_DIR;
+      delete process.env.ALLOWED_ROOT_DIRECTORY;
+
+      const { initAllowedPaths, validatePath } = await import('@automaker/platform');
+      initAllowedPaths();
+
+      // All paths are allowed when no restrictions configured
+      expect(() => validatePath('/disallowed/file.txt')).not.toThrow();
+      expect(validatePath('/disallowed/file.txt')).toBe(path.resolve('/disallowed/file.txt'));
+    });
+
+    it('should resolve relative paths within allowed directory', async () => {
+      const cwd = process.cwd();
+      process.env.ALLOWED_ROOT_DIRECTORY = cwd;
+      process.env.DATA_DIR = '';
+
+      const { initAllowedPaths, validatePath } = await import('@automaker/platform');
+      initAllowedPaths();
+
+      const result = validatePath('./file.txt');
+      expect(result).toBe(path.resolve(cwd, './file.txt'));
+    });
+  });
+
+  describe('getAllowedPaths', () => {
+    it('should return array of allowed paths', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/projects';
+      process.env.DATA_DIR = '/data';
+
+      const { initAllowedPaths, getAllowedPaths } = await import('@automaker/platform');
+      initAllowedPaths();
+
+      const result = getAllowedPaths();
+      expect(Array.isArray(result)).toBe(true);
+      expect(result.length).toBe(2);
+      expect(result).toContain(path.resolve('/projects'));
+      expect(result).toContain(path.resolve('/data'));
+    });
+
+    it('should return resolved paths', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/test';
+      process.env.DATA_DIR = '';
+
+      const { initAllowedPaths, getAllowedPaths } = await import('@automaker/platform');
+      initAllowedPaths();
+
+      const result = getAllowedPaths();
+      expect(result[0]).toBe(path.resolve('/test'));
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/settings-helpers.test.ts b/temp_repo/apps/server/tests/unit/lib/settings-helpers.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..edaa74d03d8c99221a8fe19235b42e02b41c94b3
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/settings-helpers.test.ts
@@ -0,0 +1,982 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+  getMCPServersFromSettings,
+  getProviderById,
+  getProviderByModelId,
+  resolveProviderContext,
+  getAllProviderModels,
+} from '@/lib/settings-helpers.js';
+import type { SettingsService } from '@/services/settings-service.js';
+
+// Mock the logger
+vi.mock('@automaker/utils', async () => {
+  const actual = await vi.importActual('@automaker/utils');
+  const mockLogger = {
+    info: vi.fn(),
+    error: vi.fn(),
+    warn: vi.fn(),
+    debug: vi.fn(),
+  };
+  return {
+    ...actual,
+    createLogger: () => mockLogger,
+  };
+});
+
+describe('settings-helpers.ts', () => {
+  describe('getMCPServersFromSettings', () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('should return empty object when settingsService is null', async () => {
+      const result = await getMCPServersFromSettings(null);
+      expect(result).toEqual({});
+    });
+
+    it('should return empty object when settingsService is undefined', async () => {
+      const result = await getMCPServersFromSettings(undefined);
+      expect(result).toEqual({});
+    });
+
+    it('should return empty object when no MCP servers configured', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({ mcpServers: [] }),
+      } as unknown as SettingsService;
+
+      const result = await getMCPServersFromSettings(mockSettingsService);
+      expect(result).toEqual({});
+    });
+
+    it('should return empty object when mcpServers is undefined', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const result = await getMCPServersFromSettings(mockSettingsService);
+      expect(result).toEqual({});
+    });
+
+    it('should convert enabled stdio server to SDK format', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          mcpServers: [
+            {
+              id: '1',
+              name: 'test-server',
+              type: 'stdio',
+              command: 'node',
+              args: ['server.js'],
+              env: { NODE_ENV: 'test' },
+              enabled: true,
+            },
+          ],
+        }),
+      } as unknown as SettingsService;
+
+      const result = await getMCPServersFromSettings(mockSettingsService);
+      expect(result).toEqual({
+        'test-server': {
+          type: 'stdio',
+          command: 'node',
+          args: ['server.js'],
+          env: { NODE_ENV: 'test' },
+        },
+      });
+    });
+
+    it('should convert enabled SSE server to SDK format', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          mcpServers: [
+            {
+              id: '1',
+              name: 'sse-server',
+              type: 'sse',
+              url: 'http://localhost:3000/sse',
+              headers: { Authorization: 'Bearer token' },
+              enabled: true,
+            },
+          ],
+        }),
+      } as unknown as SettingsService;
+
+      const result = await getMCPServersFromSettings(mockSettingsService);
+      expect(result).toEqual({
+        'sse-server': {
+          type: 'sse',
+          url: 'http://localhost:3000/sse',
+          headers: { Authorization: 'Bearer token' },
+        },
+      });
+    });
+
+    it('should convert enabled HTTP server to SDK format', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          mcpServers: [
+            {
+              id: '1',
+              name: 'http-server',
+              type: 'http',
+              url: 'http://localhost:3000/api',
+              headers: { 'X-API-Key': 'secret' },
+              enabled: true,
+            },
+          ],
+        }),
+      } as unknown as SettingsService;
+
+      const result = await getMCPServersFromSettings(mockSettingsService);
+      expect(result).toEqual({
+        'http-server': {
+          type: 'http',
+          url: 'http://localhost:3000/api',
+          headers: { 'X-API-Key': 'secret' },
+        },
+      });
+    });
+
+    it('should filter out disabled servers', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          mcpServers: [
+            {
+              id: '1',
+              name: 'enabled-server',
+              type: 'stdio',
+              command: 'node',
+              enabled: true,
+            },
+            {
+              id: '2',
+              name: 'disabled-server',
+              type: 'stdio',
+              command: 'python',
+              enabled: false,
+            },
+          ],
+        }),
+      } as unknown as SettingsService;
+
+      const result = await getMCPServersFromSettings(mockSettingsService);
+      expect(Object.keys(result)).toHaveLength(1);
+      expect(result['enabled-server']).toBeDefined();
+      expect(result['disabled-server']).toBeUndefined();
+    });
+
+    it('should treat servers without enabled field as enabled', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          mcpServers: [
+            {
+              id: '1',
+              name: 'implicit-enabled',
+              type: 'stdio',
+              command: 'node',
+              // enabled field not set
+            },
+          ],
+        }),
+      } as unknown as SettingsService;
+
+      const result = await getMCPServersFromSettings(mockSettingsService);
+      expect(result['implicit-enabled']).toBeDefined();
+    });
+
+    it('should handle multiple enabled servers', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          mcpServers: [
+            { id: '1', name: 'server1', type: 'stdio', command: 'node', enabled: true },
+            { id: '2', name: 'server2', type: 'stdio', command: 'python', enabled: true },
+          ],
+        }),
+      } as unknown as SettingsService;
+
+      const result = await getMCPServersFromSettings(mockSettingsService);
+      expect(Object.keys(result)).toHaveLength(2);
+      expect(result['server1']).toBeDefined();
+      expect(result['server2']).toBeDefined();
+    });
+
+    it('should return empty object and log error on exception', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockRejectedValue(new Error('Settings error')),
+      } as unknown as SettingsService;
+
+      const result = await getMCPServersFromSettings(mockSettingsService, '[Test]');
+      expect(result).toEqual({});
+      // Logger will be called with error, but we don't need to assert it
+    });
+
+    it('should throw error for SSE server without URL', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          mcpServers: [
+            {
+              id: '1',
+              name: 'bad-sse',
+              type: 'sse',
+              enabled: true,
+              // url missing
+            },
+          ],
+        }),
+      } as unknown as SettingsService;
+
+      // The error is caught and logged, returns empty
+      const result = await getMCPServersFromSettings(mockSettingsService);
+      expect(result).toEqual({});
+    });
+
+    it('should throw error for HTTP server without URL', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          mcpServers: [
+            {
+              id: '1',
+              name: 'bad-http',
+              type: 'http',
+              enabled: true,
+              // url missing
+            },
+          ],
+        }),
+      } as unknown as SettingsService;
+
+      const result = await getMCPServersFromSettings(mockSettingsService);
+      expect(result).toEqual({});
+    });
+
+    it('should throw error for stdio server without command', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          mcpServers: [
+            {
+              id: '1',
+              name: 'bad-stdio',
+              type: 'stdio',
+              enabled: true,
+              // command missing
+            },
+          ],
+        }),
+      } as unknown as SettingsService;
+
+      const result = await getMCPServersFromSettings(mockSettingsService);
+      expect(result).toEqual({});
+    });
+
+    it('should default to stdio type when type is not specified', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          mcpServers: [
+            {
+              id: '1',
+              name: 'no-type',
+              command: 'node',
+              enabled: true,
+              // type not specified, should default to stdio
+            },
+          ],
+        }),
+      } as unknown as SettingsService;
+
+      const result = await getMCPServersFromSettings(mockSettingsService);
+      expect(result['no-type']).toEqual({
+        type: 'stdio',
+        command: 'node',
+        args: undefined,
+        env: undefined,
+      });
+    });
+  });
+
+  describe('getProviderById', () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('should return provider when found by ID', async () => {
+      const mockProvider = { id: 'zai-1', name: 'Zai', enabled: true };
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [mockProvider],
+        }),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const result = await getProviderById('zai-1', mockSettingsService);
+      expect(result.provider).toEqual(mockProvider);
+    });
+
+    it('should return undefined when provider not found', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [],
+        }),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const result = await getProviderById('unknown', mockSettingsService);
+      expect(result.provider).toBeUndefined();
+    });
+
+    it('should return provider even if disabled (caller handles enabled state)', async () => {
+      const mockProvider = { id: 'disabled-1', name: 'Disabled', enabled: false };
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [mockProvider],
+        }),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const result = await getProviderById('disabled-1', mockSettingsService);
+      expect(result.provider).toEqual(mockProvider);
+    });
+  });
+
+  describe('getProviderByModelId', () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('should return provider and modelConfig when found by model ID', async () => {
+      const mockModel = { id: 'custom-model-1', name: 'Custom Model' };
+      const mockProvider = {
+        id: 'provider-1',
+        name: 'Provider 1',
+        enabled: true,
+        models: [mockModel],
+      };
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [mockProvider],
+        }),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const result = await getProviderByModelId('custom-model-1', mockSettingsService);
+      expect(result.provider).toEqual(mockProvider);
+      expect(result.modelConfig).toEqual(mockModel);
+    });
+
+    it('should resolve mapped Claude model when mapsToClaudeModel is present', async () => {
+      const mockModel = {
+        id: 'custom-model-1',
+        name: 'Custom Model',
+        mapsToClaudeModel: 'sonnet-3-5',
+      };
+      const mockProvider = {
+        id: 'provider-1',
+        name: 'Provider 1',
+        enabled: true,
+        models: [mockModel],
+      };
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [mockProvider],
+        }),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const result = await getProviderByModelId('custom-model-1', mockSettingsService);
+      expect(result.resolvedModel).toBeDefined();
+      // resolveModelString('sonnet-3-5') usually returns 'claude-3-5-sonnet-20240620' or similar
+    });
+
+    it('should ignore disabled providers', async () => {
+      const mockModel = { id: 'custom-model-1', name: 'Custom Model' };
+      const mockProvider = {
+        id: 'disabled-1',
+        name: 'Disabled Provider',
+        enabled: false,
+        models: [mockModel],
+      };
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [mockProvider],
+        }),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const result = await getProviderByModelId('custom-model-1', mockSettingsService);
+      expect(result.provider).toBeUndefined();
+    });
+  });
+
+  describe('resolveProviderContext', () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('should resolve provider by explicit providerId', async () => {
+      const mockProvider = {
+        id: 'provider-1',
+        name: 'Provider 1',
+        enabled: true,
+        models: [{ id: 'custom-model-1', name: 'Custom Model' }],
+      };
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [mockProvider],
+        }),
+        getCredentials: vi.fn().mockResolvedValue({ anthropicApiKey: 'test-key' }),
+      } as unknown as SettingsService;
+
+      const result = await resolveProviderContext(
+        mockSettingsService,
+        'custom-model-1',
+        'provider-1'
+      );
+
+      expect(result.provider).toEqual(mockProvider);
+      expect(result.credentials).toEqual({ anthropicApiKey: 'test-key' });
+    });
+
+    it('should return undefined provider when explicit providerId not found', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [],
+        }),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const result = await resolveProviderContext(
+        mockSettingsService,
+        'some-model',
+        'unknown-provider'
+      );
+
+      expect(result.provider).toBeUndefined();
+    });
+
+    it('should fallback to model-based lookup when providerId not provided', async () => {
+      const mockProvider = {
+        id: 'provider-1',
+        name: 'Provider 1',
+        enabled: true,
+        models: [{ id: 'custom-model-1', name: 'Custom Model' }],
+      };
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [mockProvider],
+        }),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const result = await resolveProviderContext(mockSettingsService, 'custom-model-1');
+
+      expect(result.provider).toEqual(mockProvider);
+      expect(result.modelConfig?.id).toBe('custom-model-1');
+    });
+
+    it('should resolve mapsToClaudeModel to actual Claude model', async () => {
+      const mockProvider = {
+        id: 'provider-1',
+        name: 'Provider 1',
+        enabled: true,
+        models: [
+          {
+            id: 'custom-model-1',
+            name: 'Custom Model',
+            mapsToClaudeModel: 'sonnet',
+          },
+        ],
+      };
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [mockProvider],
+        }),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const result = await resolveProviderContext(mockSettingsService, 'custom-model-1');
+
+      // resolveModelString('sonnet') should return a valid Claude model ID
+      expect(result.resolvedModel).toBeDefined();
+      expect(result.resolvedModel).toContain('claude');
+    });
+
+    it('should handle empty providers list', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [],
+        }),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const result = await resolveProviderContext(mockSettingsService, 'some-model');
+
+      expect(result.provider).toBeUndefined();
+      expect(result.resolvedModel).toBeUndefined();
+      expect(result.modelConfig).toBeUndefined();
+    });
+
+    it('should handle missing claudeCompatibleProviders field', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({}),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const result = await resolveProviderContext(mockSettingsService, 'some-model');
+
+      expect(result.provider).toBeUndefined();
+    });
+
+    it('should skip disabled providers during fallback lookup', async () => {
+      const disabledProvider = {
+        id: 'disabled-1',
+        name: 'Disabled Provider',
+        enabled: false,
+        models: [{ id: 'model-in-disabled', name: 'Model' }],
+      };
+      const enabledProvider = {
+        id: 'enabled-1',
+        name: 'Enabled Provider',
+        enabled: true,
+        models: [{ id: 'model-in-enabled', name: 'Model' }],
+      };
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [disabledProvider, enabledProvider],
+        }),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      // Should skip the disabled provider and find the model in the enabled one
+      const result = await resolveProviderContext(mockSettingsService, 'model-in-enabled');
+      expect(result.provider?.id).toBe('enabled-1');
+
+      // Should not find model that only exists in disabled provider
+      const result2 = await resolveProviderContext(mockSettingsService, 'model-in-disabled');
+      expect(result2.provider).toBeUndefined();
+    });
+
+    it('should perform case-insensitive model ID matching', async () => {
+      const mockProvider = {
+        id: 'provider-1',
+        name: 'Provider 1',
+        enabled: true,
+        models: [{ id: 'Custom-Model-1', name: 'Custom Model' }],
+      };
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [mockProvider],
+        }),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const result = await resolveProviderContext(mockSettingsService, 'custom-model-1');
+
+      expect(result.provider).toEqual(mockProvider);
+      expect(result.modelConfig?.id).toBe('Custom-Model-1');
+    });
+
+    it('should return error result on exception', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockRejectedValue(new Error('Settings error')),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const result = await resolveProviderContext(mockSettingsService, 'some-model');
+
+      expect(result.provider).toBeUndefined();
+      expect(result.credentials).toBeUndefined();
+      expect(result.resolvedModel).toBeUndefined();
+      expect(result.modelConfig).toBeUndefined();
+    });
+
+    it('should persist and load provider config from server settings', async () => {
+      // This test verifies the main bug fix: providers are loaded from server settings
+      const savedProvider = {
+        id: 'saved-provider-1',
+        name: 'Saved Provider',
+        enabled: true,
+        apiKeySource: 'credentials' as const,
+        models: [
+          {
+            id: 'saved-model-1',
+            name: 'Saved Model',
+            mapsToClaudeModel: 'sonnet',
+          },
+        ],
+      };
+
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [savedProvider],
+        }),
+        getCredentials: vi.fn().mockResolvedValue({
+          anthropicApiKey: 'saved-api-key',
+        }),
+      } as unknown as SettingsService;
+
+      // Simulate loading saved provider config
+      const result = await resolveProviderContext(
+        mockSettingsService,
+        'saved-model-1',
+        'saved-provider-1'
+      );
+
+      // Verify the provider is loaded from server settings
+      expect(result.provider).toEqual(savedProvider);
+      expect(result.provider?.id).toBe('saved-provider-1');
+      expect(result.provider?.models).toHaveLength(1);
+      expect(result.credentials?.anthropicApiKey).toBe('saved-api-key');
+      // Verify model mapping is resolved
+      expect(result.resolvedModel).toContain('claude');
+    });
+
+    it('should accept custom logPrefix parameter', async () => {
+      // Verify that the logPrefix parameter is accepted (used by facade.ts)
+      const mockProvider = {
+        id: 'provider-1',
+        name: 'Provider 1',
+        enabled: true,
+        models: [{ id: 'model-1', name: 'Model' }],
+      };
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [mockProvider],
+        }),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      // Call with custom logPrefix (as facade.ts does)
+      const result = await resolveProviderContext(
+        mockSettingsService,
+        'model-1',
+        undefined,
+        '[CustomPrefix]'
+      );
+
+      // Function should work the same with custom prefix
+      expect(result.provider).toEqual(mockProvider);
+    });
+
+    // Session restore scenarios - provider.enabled: undefined should be treated as enabled
+    describe('session restore scenarios (enabled: undefined)', () => {
+      it('should treat provider with enabled: undefined as enabled', async () => {
+        // This is the main bug fix: when providers are loaded from settings on session restore,
+        // enabled might be undefined (not explicitly set) and should be treated as enabled
+        const mockProvider = {
+          id: 'provider-1',
+          name: 'Provider 1',
+          enabled: undefined, // Not explicitly set - should be treated as enabled
+          models: [{ id: 'model-1', name: 'Model' }],
+        };
+        const mockSettingsService = {
+          getGlobalSettings: vi.fn().mockResolvedValue({
+            claudeCompatibleProviders: [mockProvider],
+          }),
+          getCredentials: vi.fn().mockResolvedValue({}),
+        } as unknown as SettingsService;
+
+        const result = await resolveProviderContext(mockSettingsService, 'model-1');
+
+        // Provider should be found and used even though enabled is undefined
+        expect(result.provider).toEqual(mockProvider);
+        expect(result.modelConfig?.id).toBe('model-1');
+      });
+
+      it('should use provider by ID when enabled is undefined', async () => {
+        // This tests the explicit providerId lookup with undefined enabled
+        const mockProvider = {
+          id: 'provider-1',
+          name: 'Provider 1',
+          enabled: undefined, // Not explicitly set - should be treated as enabled
+          models: [{ id: 'custom-model', name: 'Custom Model', mapsToClaudeModel: 'sonnet' }],
+        };
+        const mockSettingsService = {
+          getGlobalSettings: vi.fn().mockResolvedValue({
+            claudeCompatibleProviders: [mockProvider],
+          }),
+          getCredentials: vi.fn().mockResolvedValue({ anthropicApiKey: 'test-key' }),
+        } as unknown as SettingsService;
+
+        const result = await resolveProviderContext(
+          mockSettingsService,
+          'custom-model',
+          'provider-1'
+        );
+
+        // Provider should be found and used even though enabled is undefined
+        expect(result.provider).toEqual(mockProvider);
+        expect(result.credentials?.anthropicApiKey).toBe('test-key');
+        expect(result.resolvedModel).toContain('claude');
+      });
+
+      it('should find model via fallback in provider with enabled: undefined', async () => {
+        // Test fallback model lookup when provider has undefined enabled
+        const providerWithUndefinedEnabled = {
+          id: 'provider-1',
+          name: 'Provider 1',
+          // enabled is not set (undefined)
+          models: [{ id: 'model-1', name: 'Model' }],
+        };
+        const mockSettingsService = {
+          getGlobalSettings: vi.fn().mockResolvedValue({
+            claudeCompatibleProviders: [providerWithUndefinedEnabled],
+          }),
+          getCredentials: vi.fn().mockResolvedValue({}),
+        } as unknown as SettingsService;
+
+        const result = await resolveProviderContext(mockSettingsService, 'model-1');
+
+        expect(result.provider).toEqual(providerWithUndefinedEnabled);
+        expect(result.modelConfig?.id).toBe('model-1');
+      });
+
+      it('should still use provider for connection when model not found in its models array', async () => {
+        // This tests the fix: when providerId is explicitly set and provider is found,
+        // but the model isn't in that provider's models array, we still use that provider
+        // for connection settings (baseUrl, credentials)
+        const mockProvider = {
+          id: 'provider-1',
+          name: 'Provider 1',
+          enabled: true,
+          baseUrl: 'https://custom-api.example.com',
+          models: [{ id: 'other-model', name: 'Other Model' }],
+        };
+        const mockSettingsService = {
+          getGlobalSettings: vi.fn().mockResolvedValue({
+            claudeCompatibleProviders: [mockProvider],
+          }),
+          getCredentials: vi.fn().mockResolvedValue({ anthropicApiKey: 'test-key' }),
+        } as unknown as SettingsService;
+
+        const result = await resolveProviderContext(
+          mockSettingsService,
+          'unknown-model', // Model not in provider's models array
+          'provider-1'
+        );
+
+        // Provider should still be returned for connection settings
+        expect(result.provider).toEqual(mockProvider);
+        // modelConfig should be undefined since the model wasn't found
+        expect(result.modelConfig).toBeUndefined();
+        // resolvedModel should be undefined since no mapping was found
+        expect(result.resolvedModel).toBeUndefined();
+      });
+
+      it('should fallback to find modelConfig in other providers when not in explicit providerId provider', async () => {
+        // When providerId is set and provider is found, but model isn't there,
+        // we should still search for modelConfig in other providers
+        const provider1 = {
+          id: 'provider-1',
+          name: 'Provider 1',
+          enabled: true,
+          baseUrl: 'https://provider1.example.com',
+          models: [{ id: 'provider1-model', name: 'Provider 1 Model' }],
+        };
+        const provider2 = {
+          id: 'provider-2',
+          name: 'Provider 2',
+          enabled: true,
+          baseUrl: 'https://provider2.example.com',
+          models: [
+            {
+              id: 'shared-model',
+              name: 'Shared Model',
+              mapsToClaudeModel: 'sonnet',
+            },
+          ],
+        };
+        const mockSettingsService = {
+          getGlobalSettings: vi.fn().mockResolvedValue({
+            claudeCompatibleProviders: [provider1, provider2],
+          }),
+          getCredentials: vi.fn().mockResolvedValue({ anthropicApiKey: 'test-key' }),
+        } as unknown as SettingsService;
+
+        const result = await resolveProviderContext(
+          mockSettingsService,
+          'shared-model', // This model is in provider-2, not provider-1
+          'provider-1' // But we explicitly want to use provider-1
+        );
+
+        // Provider should still be provider-1 (for connection settings)
+        expect(result.provider).toEqual(provider1);
+        // But modelConfig should be found from provider-2
+        expect(result.modelConfig?.id).toBe('shared-model');
+        // And the model mapping should be resolved
+        expect(result.resolvedModel).toContain('claude');
+      });
+
+      it('should handle multiple providers with mixed enabled states', async () => {
+        // Test the full session restore scenario with multiple providers
+        const providers = [
+          {
+            id: 'provider-1',
+            name: 'First Provider',
+            enabled: undefined, // Undefined after restore
+            models: [{ id: 'model-a', name: 'Model A' }],
+          },
+          {
+            id: 'provider-2',
+            name: 'Second Provider',
+            // enabled field missing entirely
+            models: [{ id: 'model-b', name: 'Model B', mapsToClaudeModel: 'opus' }],
+          },
+          {
+            id: 'provider-3',
+            name: 'Disabled Provider',
+            enabled: false, // Explicitly disabled
+            models: [{ id: 'model-c', name: 'Model C' }],
+          },
+        ];
+
+        const mockSettingsService = {
+          getGlobalSettings: vi.fn().mockResolvedValue({
+            claudeCompatibleProviders: providers,
+          }),
+          getCredentials: vi.fn().mockResolvedValue({ anthropicApiKey: 'test-key' }),
+        } as unknown as SettingsService;
+
+        // Provider 1 should work (enabled: undefined)
+        const result1 = await resolveProviderContext(mockSettingsService, 'model-a', 'provider-1');
+        expect(result1.provider?.id).toBe('provider-1');
+        expect(result1.modelConfig?.id).toBe('model-a');
+
+        // Provider 2 should work (enabled field missing)
+        const result2 = await resolveProviderContext(mockSettingsService, 'model-b', 'provider-2');
+        expect(result2.provider?.id).toBe('provider-2');
+        expect(result2.modelConfig?.id).toBe('model-b');
+        expect(result2.resolvedModel).toContain('claude');
+
+        // Provider 3 with explicit providerId IS returned even if disabled
+        // (caller handles enabled state check)
+        const result3 = await resolveProviderContext(mockSettingsService, 'model-c', 'provider-3');
+        // Provider is found but modelConfig won't be found since disabled providers
+        // skip model lookup in their models array
+        expect(result3.provider).toEqual(providers[2]);
+        expect(result3.modelConfig).toBeUndefined();
+      });
+    });
+  });
+
+  describe('getAllProviderModels', () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('should return all models from enabled providers', async () => {
+      const mockProviders = [
+        {
+          id: 'provider-1',
+          name: 'Provider 1',
+          enabled: true,
+          models: [
+            { id: 'model-1', name: 'Model 1' },
+            { id: 'model-2', name: 'Model 2' },
+          ],
+        },
+        {
+          id: 'provider-2',
+          name: 'Provider 2',
+          enabled: true,
+          models: [{ id: 'model-3', name: 'Model 3' }],
+        },
+      ];
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: mockProviders,
+        }),
+      } as unknown as SettingsService;
+
+      const result = await getAllProviderModels(mockSettingsService);
+
+      expect(result).toHaveLength(3);
+      expect(result[0].providerId).toBe('provider-1');
+      expect(result[0].model.id).toBe('model-1');
+      expect(result[2].providerId).toBe('provider-2');
+    });
+
+    it('should filter out disabled providers', async () => {
+      const mockProviders = [
+        {
+          id: 'enabled-1',
+          name: 'Enabled Provider',
+          enabled: true,
+          models: [{ id: 'model-1', name: 'Model 1' }],
+        },
+        {
+          id: 'disabled-1',
+          name: 'Disabled Provider',
+          enabled: false,
+          models: [{ id: 'model-2', name: 'Model 2' }],
+        },
+      ];
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: mockProviders,
+        }),
+      } as unknown as SettingsService;
+
+      const result = await getAllProviderModels(mockSettingsService);
+
+      expect(result).toHaveLength(1);
+      expect(result[0].providerId).toBe('enabled-1');
+    });
+
+    it('should return empty array when no providers configured', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: [],
+        }),
+      } as unknown as SettingsService;
+
+      const result = await getAllProviderModels(mockSettingsService);
+
+      expect(result).toEqual([]);
+    });
+
+    it('should handle missing claudeCompatibleProviders field', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const result = await getAllProviderModels(mockSettingsService);
+
+      expect(result).toEqual([]);
+    });
+
+    it('should handle provider with no models', async () => {
+      const mockProviders = [
+        {
+          id: 'provider-1',
+          name: 'Provider 1',
+          enabled: true,
+          models: [],
+        },
+        {
+          id: 'provider-2',
+          name: 'Provider 2',
+          enabled: true,
+          // no models field
+        },
+      ];
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({
+          claudeCompatibleProviders: mockProviders,
+        }),
+      } as unknown as SettingsService;
+
+      const result = await getAllProviderModels(mockSettingsService);
+
+      expect(result).toEqual([]);
+    });
+
+    it('should return empty array on exception', async () => {
+      const mockSettingsService = {
+        getGlobalSettings: vi.fn().mockRejectedValue(new Error('Settings error')),
+      } as unknown as SettingsService;
+
+      const result = await getAllProviderModels(mockSettingsService);
+
+      expect(result).toEqual([]);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/thinking-level-normalization.test.ts b/temp_repo/apps/server/tests/unit/lib/thinking-level-normalization.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35f1b6e0455f447eacfd23460d56f312e289eac1
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/thinking-level-normalization.test.ts
@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { normalizeThinkingLevelForModel } from '@automaker/types';
+
+describe('normalizeThinkingLevelForModel', () => {
+  it('preserves explicitly selected none for Opus models', () => {
+    expect(normalizeThinkingLevelForModel('claude-opus', 'none')).toBe('none');
+  });
+
+  it('falls back to none when Opus receives an unsupported manual thinking level', () => {
+    expect(normalizeThinkingLevelForModel('claude-opus', 'medium')).toBe('none');
+  });
+
+  it('keeps adaptive for Opus when adaptive is selected', () => {
+    expect(normalizeThinkingLevelForModel('claude-opus', 'adaptive')).toBe('adaptive');
+  });
+
+  it('preserves supported manual levels for non-Opus models', () => {
+    expect(normalizeThinkingLevelForModel('claude-sonnet', 'high')).toBe('high');
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/validation-storage.test.ts b/temp_repo/apps/server/tests/unit/lib/validation-storage.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..05b44fc7987fb72fa87c35af563f744ec33e8dc3
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/validation-storage.test.ts
@@ -0,0 +1,306 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import {
+  writeValidation,
+  readValidation,
+  getAllValidations,
+  deleteValidation,
+  isValidationStale,
+  getValidationWithFreshness,
+  markValidationViewed,
+  getUnviewedValidationsCount,
+  type StoredValidation,
+} from '@/lib/validation-storage.js';
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+
+describe('validation-storage.ts', () => {
+  let testProjectPath: string;
+
+  beforeEach(async () => {
+    testProjectPath = path.join(os.tmpdir(), `validation-storage-test-${Date.now()}`);
+    await fs.mkdir(testProjectPath, { recursive: true });
+  });
+
+  afterEach(async () => {
+    try {
+      await fs.rm(testProjectPath, { recursive: true, force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  const createMockValidation = (overrides: Partial<StoredValidation> = {}): StoredValidation => ({
+    issueNumber: 123,
+    issueTitle: 'Test Issue',
+    validatedAt: new Date().toISOString(),
+    model: 'haiku',
+    result: {
+      verdict: 'valid',
+      confidence: 'high',
+      reasoning: 'Test reasoning',
+    },
+    ...overrides,
+  });
+
+  describe('writeValidation', () => {
+    it('should write validation to storage', async () => {
+      const validation = createMockValidation();
+
+      await writeValidation(testProjectPath, 123, validation);
+
+      // Verify file was created
+      const validationPath = path.join(
+        testProjectPath,
+        '.automaker',
+        'validations',
+        '123',
+        'validation.json'
+      );
+      const content = await fs.readFile(validationPath, 'utf-8');
+      expect(JSON.parse(content)).toEqual(validation);
+    });
+
+    it('should create nested directories if they do not exist', async () => {
+      const validation = createMockValidation({ issueNumber: 456 });
+
+      await writeValidation(testProjectPath, 456, validation);
+
+      const validationPath = path.join(
+        testProjectPath,
+        '.automaker',
+        'validations',
+        '456',
+        'validation.json'
+      );
+      const content = await fs.readFile(validationPath, 'utf-8');
+      expect(JSON.parse(content)).toEqual(validation);
+    });
+  });
+
+  describe('readValidation', () => {
+    it('should read validation from storage', async () => {
+      const validation = createMockValidation();
+      await writeValidation(testProjectPath, 123, validation);
+
+      const result = await readValidation(testProjectPath, 123);
+
+      expect(result).toEqual(validation);
+    });
+
+    it('should return null when validation does not exist', async () => {
+      const result = await readValidation(testProjectPath, 999);
+
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('getAllValidations', () => {
+    it('should return all validations for a project', async () => {
+      const validation1 = createMockValidation({ issueNumber: 1, issueTitle: 'Issue 1' });
+      const validation2 = createMockValidation({ issueNumber: 2, issueTitle: 'Issue 2' });
+      const validation3 = createMockValidation({ issueNumber: 3, issueTitle: 'Issue 3' });
+
+      await writeValidation(testProjectPath, 1, validation1);
+      await writeValidation(testProjectPath, 2, validation2);
+      await writeValidation(testProjectPath, 3, validation3);
+
+      const result = await getAllValidations(testProjectPath);
+
+      expect(result).toHaveLength(3);
+      expect(result[0]).toEqual(validation1);
+      expect(result[1]).toEqual(validation2);
+      expect(result[2]).toEqual(validation3);
+    });
+
+    it('should return empty array when no validations exist', async () => {
+      const result = await getAllValidations(testProjectPath);
+
+      expect(result).toEqual([]);
+    });
+
+    it('should skip non-numeric directories', async () => {
+      const validation = createMockValidation({ issueNumber: 1 });
+      await writeValidation(testProjectPath, 1, validation);
+
+      // Create a non-numeric directory
+      const invalidDir = path.join(testProjectPath, '.automaker', 'validations', 'invalid');
+      await fs.mkdir(invalidDir, { recursive: true });
+
+      const result = await getAllValidations(testProjectPath);
+
+      expect(result).toHaveLength(1);
+      expect(result[0]).toEqual(validation);
+    });
+  });
+
+  describe('deleteValidation', () => {
+    it('should delete validation from storage', async () => {
+      const validation = createMockValidation();
+      await writeValidation(testProjectPath, 123, validation);
+
+      const result = await deleteValidation(testProjectPath, 123);
+
+      expect(result).toBe(true);
+
+      const readResult = await readValidation(testProjectPath, 123);
+      expect(readResult).toBeNull();
+    });
+
+    it('should return true even when validation does not exist', async () => {
+      const result = await deleteValidation(testProjectPath, 999);
+
+      expect(result).toBe(true);
+    });
+  });
+
+  describe('isValidationStale', () => {
+    it('should return false for recent validation', () => {
+      const validation = createMockValidation({
+        validatedAt: new Date().toISOString(),
+      });
+
+      const result = isValidationStale(validation);
+
+      expect(result).toBe(false);
+    });
+
+    it('should return true for validation older than 24 hours', () => {
+      const oldDate = new Date();
+      oldDate.setHours(oldDate.getHours() - 25); // 25 hours ago
+
+      const validation = createMockValidation({
+        validatedAt: oldDate.toISOString(),
+      });
+
+      const result = isValidationStale(validation);
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false for validation exactly at 24 hours', () => {
+      const exactDate = new Date(Date.now() - 24 * 60 * 60 * 1000 + 100);
+
+      const validation = createMockValidation({
+        validatedAt: exactDate.toISOString(),
+      });
+
+      const result = isValidationStale(validation);
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('getValidationWithFreshness', () => {
+    it('should return validation with isStale false for recent validation', async () => {
+      const validation = createMockValidation({
+        validatedAt: new Date().toISOString(),
+      });
+      await writeValidation(testProjectPath, 123, validation);
+
+      const result = await getValidationWithFreshness(testProjectPath, 123);
+
+      expect(result).not.toBeNull();
+      expect(result!.validation).toEqual(validation);
+      expect(result!.isStale).toBe(false);
+    });
+
+    it('should return validation with isStale true for old validation', async () => {
+      const oldDate = new Date();
+      oldDate.setHours(oldDate.getHours() - 25);
+
+      const validation = createMockValidation({
+        validatedAt: oldDate.toISOString(),
+      });
+      await writeValidation(testProjectPath, 123, validation);
+
+      const result = await getValidationWithFreshness(testProjectPath, 123);
+
+      expect(result).not.toBeNull();
+      expect(result!.isStale).toBe(true);
+    });
+
+    it('should return null when validation does not exist', async () => {
+      const result = await getValidationWithFreshness(testProjectPath, 999);
+
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('markValidationViewed', () => {
+    it('should mark validation as viewed', async () => {
+      const validation = createMockValidation();
+      await writeValidation(testProjectPath, 123, validation);
+
+      const result = await markValidationViewed(testProjectPath, 123);
+
+      expect(result).toBe(true);
+
+      const updated = await readValidation(testProjectPath, 123);
+      expect(updated).not.toBeNull();
+      expect(updated!.viewedAt).toBeDefined();
+    });
+
+    it('should return false when validation does not exist', async () => {
+      const result = await markValidationViewed(testProjectPath, 999);
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('getUnviewedValidationsCount', () => {
+    it('should return count of unviewed non-stale validations', async () => {
+      const validation1 = createMockValidation({ issueNumber: 1 });
+      const validation2 = createMockValidation({ issueNumber: 2 });
+      const validation3 = createMockValidation({
+        issueNumber: 3,
+        viewedAt: new Date().toISOString(),
+      });
+
+      await writeValidation(testProjectPath, 1, validation1);
+      await writeValidation(testProjectPath, 2, validation2);
+      await writeValidation(testProjectPath, 3, validation3);
+
+      const result = await getUnviewedValidationsCount(testProjectPath);
+
+      expect(result).toBe(2);
+    });
+
+    it('should not count stale validations', async () => {
+      const oldDate = new Date();
+      oldDate.setHours(oldDate.getHours() - 25);
+
+      const validation1 = createMockValidation({ issueNumber: 1 });
+      const validation2 = createMockValidation({
+        issueNumber: 2,
+        validatedAt: oldDate.toISOString(),
+      });
+
+      await writeValidation(testProjectPath, 1, validation1);
+      await writeValidation(testProjectPath, 2, validation2);
+
+      const result = await getUnviewedValidationsCount(testProjectPath);
+
+      expect(result).toBe(1);
+    });
+
+    it('should return 0 when no validations exist', async () => {
+      const result = await getUnviewedValidationsCount(testProjectPath);
+
+      expect(result).toBe(0);
+    });
+
+    it('should return 0 when all validations are viewed', async () => {
+      const validation = createMockValidation({
+        issueNumber: 1,
+        viewedAt: new Date().toISOString(),
+      });
+
+      await writeValidation(testProjectPath, 1, validation);
+
+      const result = await getUnviewedValidationsCount(testProjectPath);
+
+      expect(result).toBe(0);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/worktree-metadata.test.ts b/temp_repo/apps/server/tests/unit/lib/worktree-metadata.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2f84af883e3a9bbd0afc02d3285596a4d7fda886
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/worktree-metadata.test.ts
@@ -0,0 +1,391 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import {
+  readWorktreeMetadata,
+  writeWorktreeMetadata,
+  updateWorktreePRInfo,
+  getWorktreePRInfo,
+  readAllWorktreeMetadata,
+  deleteWorktreeMetadata,
+  type WorktreeMetadata,
+  type WorktreePRInfo,
+} from '@/lib/worktree-metadata.js';
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+
+describe('worktree-metadata.ts', () => {
+  let testProjectPath: string;
+
+  beforeEach(async () => {
+    testProjectPath = path.join(os.tmpdir(), `worktree-metadata-test-${Date.now()}`);
+    await fs.mkdir(testProjectPath, { recursive: true });
+  });
+
+  afterEach(async () => {
+    try {
+      await fs.rm(testProjectPath, { recursive: true, force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe('sanitizeBranchName', () => {
+    // Test through readWorktreeMetadata and writeWorktreeMetadata
+    it('should sanitize branch names with invalid characters', async () => {
+      const branch = 'feature/test-branch';
+      const metadata: WorktreeMetadata = {
+        branch,
+        createdAt: new Date().toISOString(),
+      };
+
+      await writeWorktreeMetadata(testProjectPath, branch, metadata);
+      const result = await readWorktreeMetadata(testProjectPath, branch);
+      expect(result).toEqual(metadata);
+    });
+
+    it('should sanitize branch names with Windows invalid characters', async () => {
+      const branch = 'feature:test*branch?';
+      const metadata: WorktreeMetadata = {
+        branch,
+        createdAt: new Date().toISOString(),
+      };
+
+      await writeWorktreeMetadata(testProjectPath, branch, metadata);
+      const result = await readWorktreeMetadata(testProjectPath, branch);
+      expect(result).toEqual(metadata);
+    });
+
+    it('should sanitize Windows reserved names', async () => {
+      const branch = 'CON';
+      const metadata: WorktreeMetadata = {
+        branch,
+        createdAt: new Date().toISOString(),
+      };
+
+      await writeWorktreeMetadata(testProjectPath, branch, metadata);
+      const result = await readWorktreeMetadata(testProjectPath, branch);
+      expect(result).toEqual(metadata);
+    });
+
+    it('should handle empty branch name', async () => {
+      const branch = '';
+      const metadata: WorktreeMetadata = {
+        branch: 'branch',
+        createdAt: new Date().toISOString(),
+      };
+
+      // Empty branch name should be sanitized to "_branch"
+      await writeWorktreeMetadata(testProjectPath, branch, metadata);
+      const result = await readWorktreeMetadata(testProjectPath, branch);
+      expect(result).toEqual(metadata);
+    });
+
+    it('should handle branch name that becomes empty after sanitization', async () => {
+      // Test branch that would become empty after removing invalid chars
+      const branch = '///';
+      const metadata: WorktreeMetadata = {
+        branch: 'branch',
+        createdAt: new Date().toISOString(),
+      };
+
+      await writeWorktreeMetadata(testProjectPath, branch, metadata);
+      const result = await readWorktreeMetadata(testProjectPath, branch);
+      expect(result).toEqual(metadata);
+    });
+  });
+
+  describe('readWorktreeMetadata', () => {
+    it("should return null when metadata file doesn't exist", async () => {
+      const result = await readWorktreeMetadata(testProjectPath, 'nonexistent-branch');
+      expect(result).toBeNull();
+    });
+
+    it('should read existing metadata', async () => {
+      const branch = 'test-branch';
+      const metadata: WorktreeMetadata = {
+        branch,
+        createdAt: new Date().toISOString(),
+      };
+
+      await writeWorktreeMetadata(testProjectPath, branch, metadata);
+      const result = await readWorktreeMetadata(testProjectPath, branch);
+      expect(result).toEqual(metadata);
+    });
+
+    it('should read metadata with PR info', async () => {
+      const branch = 'pr-branch';
+      const metadata: WorktreeMetadata = {
+        branch,
+        createdAt: new Date().toISOString(),
+        pr: {
+          number: 123,
+          url: 'https://github.com/owner/repo/pull/123',
+          title: 'Test PR',
+          state: 'OPEN',
+          createdAt: new Date().toISOString(),
+        },
+      };
+
+      await writeWorktreeMetadata(testProjectPath, branch, metadata);
+      const result = await readWorktreeMetadata(testProjectPath, branch);
+      expect(result).toEqual(metadata);
+    });
+  });
+
+  describe('writeWorktreeMetadata', () => {
+    it("should create metadata directory if it doesn't exist", async () => {
+      const branch = 'new-branch';
+      const metadata: WorktreeMetadata = {
+        branch,
+        createdAt: new Date().toISOString(),
+      };
+
+      await writeWorktreeMetadata(testProjectPath, branch, metadata);
+      const result = await readWorktreeMetadata(testProjectPath, branch);
+      expect(result).toEqual(metadata);
+    });
+
+    it('should overwrite existing metadata', async () => {
+      const branch = 'existing-branch';
+      const metadata1: WorktreeMetadata = {
+        branch,
+        createdAt: new Date().toISOString(),
+      };
+      const metadata2: WorktreeMetadata = {
+        branch,
+        createdAt: new Date().toISOString(),
+        pr: {
+          number: 456,
+          url: 'https://github.com/owner/repo/pull/456',
+          title: 'Updated PR',
+          state: 'CLOSED',
+          createdAt: new Date().toISOString(),
+        },
+      };
+
+      await writeWorktreeMetadata(testProjectPath, branch, metadata1);
+      await writeWorktreeMetadata(testProjectPath, branch, metadata2);
+      const result = await readWorktreeMetadata(testProjectPath, branch);
+      expect(result).toEqual(metadata2);
+    });
+  });
+
+  describe('updateWorktreePRInfo', () => {
+    it("should create new metadata if it doesn't exist", async () => {
+      const branch = 'new-pr-branch';
+      const prInfo: WorktreePRInfo = {
+        number: 789,
+        url: 'https://github.com/owner/repo/pull/789',
+        title: 'New PR',
+        state: 'OPEN',
+        createdAt: new Date().toISOString(),
+      };
+
+      await updateWorktreePRInfo(testProjectPath, branch, prInfo);
+      const result = await readWorktreeMetadata(testProjectPath, branch);
+      expect(result).not.toBeNull();
+      expect(result?.branch).toBe(branch);
+      expect(result?.pr).toEqual(prInfo);
+    });
+
+    it('should update existing metadata with PR info', async () => {
+      const branch = 'existing-pr-branch';
+      const metadata: WorktreeMetadata = {
+        branch,
+        createdAt: new Date().toISOString(),
+      };
+
+      await writeWorktreeMetadata(testProjectPath, branch, metadata);
+
+      const prInfo: WorktreePRInfo = {
+        number: 999,
+        url: 'https://github.com/owner/repo/pull/999',
+        title: 'Updated PR',
+        state: 'MERGED',
+        createdAt: new Date().toISOString(),
+      };
+
+      await updateWorktreePRInfo(testProjectPath, branch, prInfo);
+      const result = await readWorktreeMetadata(testProjectPath, branch);
+      expect(result?.pr).toEqual(prInfo);
+    });
+
+    it('should preserve existing metadata when updating PR info', async () => {
+      const branch = 'preserve-branch';
+      const originalCreatedAt = new Date().toISOString();
+      const metadata: WorktreeMetadata = {
+        branch,
+        createdAt: originalCreatedAt,
+      };
+
+      await writeWorktreeMetadata(testProjectPath, branch, metadata);
+
+      const prInfo: WorktreePRInfo = {
+        number: 111,
+        url: 'https://github.com/owner/repo/pull/111',
+        title: 'PR',
+        state: 'OPEN',
+        createdAt: new Date().toISOString(),
+      };
+
+      await updateWorktreePRInfo(testProjectPath, branch, prInfo);
+      const result = await readWorktreeMetadata(testProjectPath, branch);
+      expect(result?.createdAt).toBe(originalCreatedAt);
+      expect(result?.pr).toEqual(prInfo);
+    });
+  });
+
+  describe('getWorktreePRInfo', () => {
+    it("should return null when metadata doesn't exist", async () => {
+      const result = await getWorktreePRInfo(testProjectPath, 'nonexistent');
+      expect(result).toBeNull();
+    });
+
+    it('should return null when metadata exists but has no PR info', async () => {
+      const branch = 'no-pr-branch';
+      const metadata: WorktreeMetadata = {
+        branch,
+        createdAt: new Date().toISOString(),
+      };
+
+      await writeWorktreeMetadata(testProjectPath, branch, metadata);
+      const result = await getWorktreePRInfo(testProjectPath, branch);
+      expect(result).toBeNull();
+    });
+
+    it('should return PR info when it exists', async () => {
+      const branch = 'has-pr-branch';
+      const prInfo: WorktreePRInfo = {
+        number: 222,
+        url: 'https://github.com/owner/repo/pull/222',
+        title: 'Has PR',
+        state: 'OPEN',
+        createdAt: new Date().toISOString(),
+      };
+
+      await updateWorktreePRInfo(testProjectPath, branch, prInfo);
+      const result = await getWorktreePRInfo(testProjectPath, branch);
+      expect(result).toEqual(prInfo);
+    });
+  });
+
+  describe('readAllWorktreeMetadata', () => {
+    it("should return empty map when worktrees directory doesn't exist", async () => {
+      const result = await readAllWorktreeMetadata(testProjectPath);
+      expect(result.size).toBe(0);
+    });
+
+    it('should return empty map when worktrees directory is empty', async () => {
+      const worktreesDir = path.join(testProjectPath, '.automaker', 'worktrees');
+      await fs.mkdir(worktreesDir, { recursive: true });
+
+      const result = await readAllWorktreeMetadata(testProjectPath);
+      expect(result.size).toBe(0);
+    });
+
+    it('should read all worktree metadata', async () => {
+      const branch1 = 'branch-1';
+      const branch2 = 'branch-2';
+      const metadata1: WorktreeMetadata = {
+        branch: branch1,
+        createdAt: new Date().toISOString(),
+      };
+      const metadata2: WorktreeMetadata = {
+        branch: branch2,
+        createdAt: new Date().toISOString(),
+        pr: {
+          number: 333,
+          url: 'https://github.com/owner/repo/pull/333',
+          title: 'PR 3',
+          state: 'OPEN',
+          createdAt: new Date().toISOString(),
+        },
+      };
+
+      await writeWorktreeMetadata(testProjectPath, branch1, metadata1);
+      await writeWorktreeMetadata(testProjectPath, branch2, metadata2);
+
+      const result = await readAllWorktreeMetadata(testProjectPath);
+      expect(result.size).toBe(2);
+      expect(result.get(branch1)).toEqual(metadata1);
+      expect(result.get(branch2)).toEqual(metadata2);
+    });
+
+    it('should skip directories without worktree.json', async () => {
+      const worktreesDir = path.join(testProjectPath, '.automaker', 'worktrees');
+      const emptyDir = path.join(worktreesDir, 'empty-dir');
+      await fs.mkdir(emptyDir, { recursive: true });
+
+      const branch = 'valid-branch';
+      const metadata: WorktreeMetadata = {
+        branch,
+        createdAt: new Date().toISOString(),
+      };
+      await writeWorktreeMetadata(testProjectPath, branch, metadata);
+
+      const result = await readAllWorktreeMetadata(testProjectPath);
+      expect(result.size).toBe(1);
+      expect(result.get(branch)).toEqual(metadata);
+    });
+
+    it('should skip files in worktrees directory', async () => {
+      const worktreesDir = path.join(testProjectPath, '.automaker', 'worktrees');
+      await fs.mkdir(worktreesDir, { recursive: true });
+      const filePath = path.join(worktreesDir, 'not-a-dir.txt');
+      await fs.writeFile(filePath, 'content');
+
+      const branch = 'valid-branch';
+      const metadata: WorktreeMetadata = {
+        branch,
+        createdAt: new Date().toISOString(),
+      };
+      await writeWorktreeMetadata(testProjectPath, branch, metadata);
+
+      const result = await readAllWorktreeMetadata(testProjectPath);
+      expect(result.size).toBe(1);
+      expect(result.get(branch)).toEqual(metadata);
+    });
+
+    it('should skip directories with malformed JSON', async () => {
+      const worktreesDir = path.join(testProjectPath, '.automaker', 'worktrees');
+      const badDir = path.join(worktreesDir, 'bad-dir');
+      await fs.mkdir(badDir, { recursive: true });
+      const badJsonPath = path.join(badDir, 'worktree.json');
+      await fs.writeFile(badJsonPath, 'not valid json');
+
+      const branch = 'valid-branch';
+      const metadata: WorktreeMetadata = {
+        branch,
+        createdAt: new Date().toISOString(),
+      };
+      await writeWorktreeMetadata(testProjectPath, branch, metadata);
+
+      const result = await readAllWorktreeMetadata(testProjectPath);
+      expect(result.size).toBe(1);
+      expect(result.get(branch)).toEqual(metadata);
+    });
+  });
+
+  describe('deleteWorktreeMetadata', () => {
+    it('should delete worktree metadata directory', async () => {
+      const branch = 'to-delete';
+      const metadata: WorktreeMetadata = {
+        branch,
+        createdAt: new Date().toISOString(),
+      };
+
+      await writeWorktreeMetadata(testProjectPath, branch, metadata);
+      let result = await readWorktreeMetadata(testProjectPath, branch);
+      expect(result).not.toBeNull();
+
+      await deleteWorktreeMetadata(testProjectPath, branch);
+      result = await readWorktreeMetadata(testProjectPath, branch);
+      expect(result).toBeNull();
+    });
+
+    it("should handle deletion when metadata doesn't exist", async () => {
+      // Should not throw
+      await expect(deleteWorktreeMetadata(testProjectPath, 'nonexistent')).resolves.toBeUndefined();
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/lib/xml-extractor.test.ts b/temp_repo/apps/server/tests/unit/lib/xml-extractor.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..750a5f33d1933f660dadbe23724dcb5c0f96786c
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/lib/xml-extractor.test.ts
@@ -0,0 +1,1027 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+  escapeXml,
+  unescapeXml,
+  extractXmlSection,
+  extractXmlElements,
+  extractImplementedFeatures,
+  extractImplementedFeatureNames,
+  featureToXml,
+  featuresToXml,
+  updateImplementedFeaturesSection,
+  addImplementedFeature,
+  removeImplementedFeature,
+  updateImplementedFeature,
+  hasImplementedFeature,
+  toSpecOutputFeatures,
+  fromSpecOutputFeatures,
+  type ImplementedFeature,
+  type XmlExtractorLogger,
+} from '@/lib/xml-extractor.js';
+
+describe('xml-extractor.ts', () => {
+  // Mock logger for testing custom logger functionality
+  const createMockLogger = (): XmlExtractorLogger & { calls: string[] } => {
+    const calls: string[] = [];
+    return {
+      calls,
+      debug: vi.fn((msg: string) => calls.push(`debug: ${msg}`)),
+      warn: vi.fn((msg: string) => calls.push(`warn: ${msg}`)),
+    };
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('escapeXml', () => {
+    it('should escape ampersand', () => {
+      expect(escapeXml('foo & bar')).toBe('foo &amp; bar');
+    });
+
+    it('should escape less than', () => {
+      expect(escapeXml('a < b')).toBe('a &lt; b');
+    });
+
+    it('should escape greater than', () => {
+      expect(escapeXml('a > b')).toBe('a &gt; b');
+    });
+
+    it('should escape double quotes', () => {
+      expect(escapeXml('say "hello"')).toBe('say &quot;hello&quot;');
+    });
+
+    it('should escape single quotes', () => {
+      expect(escapeXml("it's" + ' fine')).toBe('it&apos;s fine');
+    });
+
+    it('should handle null', () => {
+      expect(escapeXml(null)).toBe('');
+    });
+
+    it('should handle undefined', () => {
+      expect(escapeXml(undefined)).toBe('');
+    });
+
+    it('should handle empty string', () => {
+      expect(escapeXml('')).toBe('');
+    });
+
+    it('should escape multiple special characters', () => {
+      expect(escapeXml('a < b & c > d "e" \'f\'')).toBe(
+        'a &lt; b &amp; c &gt; d &quot;e&quot; &apos;f&apos;'
+      );
+    });
+  });
+
+  describe('unescapeXml', () => {
+    it('should unescape ampersand', () => {
+      expect(unescapeXml('foo &amp; bar')).toBe('foo & bar');
+    });
+
+    it('should unescape less than', () => {
+      expect(unescapeXml('a &lt; b')).toBe('a < b');
+    });
+
+    it('should unescape greater than', () => {
+      expect(unescapeXml('a &gt; b')).toBe('a > b');
+    });
+
+    it('should unescape double quotes', () => {
+      expect(unescapeXml('say &quot;hello&quot;')).toBe('say "hello"');
+    });
+
+    it('should unescape single quotes', () => {
+      expect(unescapeXml('it&apos;s fine')).toBe("it's fine");
+    });
+
+    it('should handle empty string', () => {
+      expect(unescapeXml('')).toBe('');
+    });
+
+    it('should roundtrip with escapeXml', () => {
+      const original = 'Test & <value> "quoted" \'apostrophe\'';
+      expect(unescapeXml(escapeXml(original))).toBe(original);
+    });
+  });
+
+  describe('extractXmlSection', () => {
+    it('should extract section content', () => {
+      const xml = '<root><section>content here</section></root>';
+      expect(extractXmlSection(xml, 'section')).toBe('content here');
+    });
+
+    it('should extract multiline section content', () => {
+      const xml = `<root>
+<section>
+  line 1
+  line 2
+</section>
+</root>`;
+      expect(extractXmlSection(xml, 'section')).toContain('line 1');
+      expect(extractXmlSection(xml, 'section')).toContain('line 2');
+    });
+
+    it('should return null for non-existent section', () => {
+      const xml = '<root><other>content</other></root>';
+      expect(extractXmlSection(xml, 'section')).toBeNull();
+    });
+
+    it('should be case-insensitive', () => {
+      const xml = '<root><Section>content</Section></root>';
+      expect(extractXmlSection(xml, 'section')).toBe('content');
+    });
+
+    it('should handle empty section', () => {
+      const xml = '<root><section></section></root>';
+      expect(extractXmlSection(xml, 'section')).toBe('');
+    });
+  });
+
+  describe('extractXmlElements', () => {
+    it('should extract all element values', () => {
+      const xml = '<items><item>one</item><item>two</item><item>three</item></items>';
+      expect(extractXmlElements(xml, 'item')).toEqual(['one', 'two', 'three']);
+    });
+
+    it('should return empty array for non-existent elements', () => {
+      const xml = '<items><other>value</other></items>';
+      expect(extractXmlElements(xml, 'item')).toEqual([]);
+    });
+
+    it('should trim whitespace', () => {
+      const xml = '<items><item>  spaced  </item></items>';
+      expect(extractXmlElements(xml, 'item')).toEqual(['spaced']);
+    });
+
+    it('should unescape XML entities', () => {
+      const xml = '<items><item>foo &amp; bar</item></items>';
+      expect(extractXmlElements(xml, 'item')).toEqual(['foo & bar']);
+    });
+
+    it('should handle empty elements', () => {
+      const xml = '<items><item></item><item>value</item></items>';
+      expect(extractXmlElements(xml, 'item')).toEqual(['', 'value']);
+    });
+  });
+
+  describe('extractImplementedFeatures', () => {
+    const sampleSpec = `<?xml version="1.0" encoding="UTF-8"?>
+<project_specification>
+  <project_name>Test Project</project_name>
+  <implemented_features>
+    <feature>
+      <name>Feature One</name>
+      <description>First feature description</description>
+    </feature>
+    <feature>
+      <name>Feature Two</name>
+      <description>Second feature description</description>
+      <file_locations>
+        <location>src/feature-two.ts</location>
+        <location>src/utils/helper.ts</location>
+      </file_locations>
+    </feature>
+  </implemented_features>
+</project_specification>`;
+
+    it('should extract all features', () => {
+      const features = extractImplementedFeatures(sampleSpec);
+      expect(features).toHaveLength(2);
+    });
+
+    it('should extract feature names', () => {
+      const features = extractImplementedFeatures(sampleSpec);
+      expect(features[0].name).toBe('Feature One');
+      expect(features[1].name).toBe('Feature Two');
+    });
+
+    it('should extract feature descriptions', () => {
+      const features = extractImplementedFeatures(sampleSpec);
+      expect(features[0].description).toBe('First feature description');
+      expect(features[1].description).toBe('Second feature description');
+    });
+
+    it('should extract file_locations when present', () => {
+      const features = extractImplementedFeatures(sampleSpec);
+      expect(features[0].file_locations).toBeUndefined();
+      expect(features[1].file_locations).toEqual(['src/feature-two.ts', 'src/utils/helper.ts']);
+    });
+
+    it('should return empty array for missing section', () => {
+      const xml =
+        '<project_specification><project_name>Test</project_name></project_specification>';
+      expect(extractImplementedFeatures(xml)).toEqual([]);
+    });
+
+    it('should return empty array for empty section', () => {
+      const xml = `<project_specification>
+        <implemented_features>
+        </implemented_features>
+      </project_specification>`;
+      expect(extractImplementedFeatures(xml)).toEqual([]);
+    });
+
+    it('should handle escaped content', () => {
+      const xml = `<implemented_features>
+        <feature>
+          <name>Test &amp; Feature</name>
+          <description>Uses &lt;brackets&gt;</description>
+        </feature>
+      </implemented_features>`;
+      const features = extractImplementedFeatures(xml);
+      expect(features[0].name).toBe('Test & Feature');
+      expect(features[0].description).toBe('Uses <brackets>');
+    });
+  });
+
+  describe('extractImplementedFeatureNames', () => {
+    it('should return only feature names', () => {
+      const xml = `<implemented_features>
+        <feature>
+          <name>Feature A</name>
+          <description>Description A</description>
+        </feature>
+        <feature>
+          <name>Feature B</name>
+          <description>Description B</description>
+        </feature>
+      </implemented_features>`;
+      expect(extractImplementedFeatureNames(xml)).toEqual(['Feature A', 'Feature B']);
+    });
+
+    it('should return empty array for no features', () => {
+      const xml = '<root></root>';
+      expect(extractImplementedFeatureNames(xml)).toEqual([]);
+    });
+  });
+
+  describe('featureToXml', () => {
+    it('should generate XML for feature without file_locations', () => {
+      const feature: ImplementedFeature = {
+        name: 'My Feature',
+        description: 'Feature description',
+      };
+      const xml = featureToXml(feature);
+      expect(xml).toContain('<name>My Feature</name>');
+      expect(xml).toContain('<description>Feature description</description>');
+      expect(xml).not.toContain('<file_locations>');
+    });
+
+    it('should generate XML for feature with file_locations', () => {
+      const feature: ImplementedFeature = {
+        name: 'My Feature',
+        description: 'Feature description',
+        file_locations: ['src/index.ts', 'src/utils.ts'],
+      };
+      const xml = featureToXml(feature);
+      expect(xml).toContain('<file_locations>');
+      expect(xml).toContain('<location>src/index.ts</location>');
+      expect(xml).toContain('<location>src/utils.ts</location>');
+    });
+
+    it('should escape special characters', () => {
+      const feature: ImplementedFeature = {
+        name: 'Test & Feature',
+        description: 'Has <tags>',
+      };
+      const xml = featureToXml(feature);
+      expect(xml).toContain('Test &amp; Feature');
+      expect(xml).toContain('Has &lt;tags&gt;');
+    });
+
+    it('should not include empty file_locations array', () => {
+      const feature: ImplementedFeature = {
+        name: 'Feature',
+        description: 'Desc',
+        file_locations: [],
+      };
+      const xml = featureToXml(feature);
+      expect(xml).not.toContain('<file_locations>');
+    });
+  });
+
+  describe('featuresToXml', () => {
+    it('should generate XML for multiple features', () => {
+      const features: ImplementedFeature[] = [
+        { name: 'Feature 1', description: 'Desc 1' },
+        { name: 'Feature 2', description: 'Desc 2' },
+      ];
+      const xml = featuresToXml(features);
+      expect(xml).toContain('<name>Feature 1</name>');
+      expect(xml).toContain('<name>Feature 2</name>');
+    });
+
+    it('should handle empty array', () => {
+      expect(featuresToXml([])).toBe('');
+    });
+  });
+
+  describe('updateImplementedFeaturesSection', () => {
+    const baseSpec = `<?xml version="1.0" encoding="UTF-8"?>
+<project_specification>
+  <project_name>Test</project_name>
+  <core_capabilities>
+    <capability>Testing</capability>
+  </core_capabilities>
+  <implemented_features>
+    <feature>
+      <name>Old Feature</name>
+      <description>Old description</description>
+    </feature>
+  </implemented_features>
+</project_specification>`;
+
+    it('should replace existing section', () => {
+      const newFeatures: ImplementedFeature[] = [
+        { name: 'New Feature', description: 'New description' },
+      ];
+      const result = updateImplementedFeaturesSection(baseSpec, newFeatures);
+      expect(result).toContain('New Feature');
+      expect(result).not.toContain('Old Feature');
+    });
+
+    it('should insert section after core_capabilities if missing', () => {
+      const specWithoutSection = `<?xml version="1.0" encoding="UTF-8"?>
+<project_specification>
+  <project_name>Test</project_name>
+  <core_capabilities>
+    <capability>Testing</capability>
+  </core_capabilities>
+</project_specification>`;
+      const newFeatures: ImplementedFeature[] = [
+        { name: 'New Feature', description: 'New description' },
+      ];
+      const result = updateImplementedFeaturesSection(specWithoutSection, newFeatures);
+      expect(result).toContain('<implemented_features>');
+      expect(result).toContain('New Feature');
+    });
+
+    it('should handle multiple features', () => {
+      const newFeatures: ImplementedFeature[] = [
+        { name: 'Feature A', description: 'Desc A' },
+        { name: 'Feature B', description: 'Desc B', file_locations: ['src/b.ts'] },
+      ];
+      const result = updateImplementedFeaturesSection(baseSpec, newFeatures);
+      expect(result).toContain('Feature A');
+      expect(result).toContain('Feature B');
+      expect(result).toContain('src/b.ts');
+    });
+  });
+
+  describe('addImplementedFeature', () => {
+    const baseSpec = `<implemented_features>
+    <feature>
+      <name>Existing Feature</name>
+      <description>Existing description</description>
+    </feature>
+  </implemented_features>`;
+
+    it('should add new feature', () => {
+      const newFeature: ImplementedFeature = {
+        name: 'New Feature',
+        description: 'New description',
+      };
+      const result = addImplementedFeature(baseSpec, newFeature);
+      expect(result).toContain('Existing Feature');
+      expect(result).toContain('New Feature');
+    });
+
+    it('should not add duplicate feature', () => {
+      const duplicate: ImplementedFeature = {
+        name: 'Existing Feature',
+        description: 'Different description',
+      };
+      const result = addImplementedFeature(baseSpec, duplicate);
+      // Should still have only one instance
+      const matches = result.match(/Existing Feature/g);
+      expect(matches).toHaveLength(1);
+    });
+
+    it('should be case-insensitive for duplicates', () => {
+      const duplicate: ImplementedFeature = {
+        name: 'EXISTING FEATURE',
+        description: 'Different description',
+      };
+      const result = addImplementedFeature(baseSpec, duplicate);
+      expect(result).not.toContain('EXISTING FEATURE');
+    });
+  });
+
+  describe('removeImplementedFeature', () => {
+    const baseSpec = `<implemented_features>
+    <feature>
+      <name>Feature A</name>
+      <description>Description A</description>
+    </feature>
+    <feature>
+      <name>Feature B</name>
+      <description>Description B</description>
+    </feature>
+  </implemented_features>`;
+
+    it('should remove feature by name', () => {
+      const result = removeImplementedFeature(baseSpec, 'Feature A');
+      expect(result).not.toContain('Feature A');
+      expect(result).toContain('Feature B');
+    });
+
+    it('should be case-insensitive', () => {
+      const result = removeImplementedFeature(baseSpec, 'feature a');
+      expect(result).not.toContain('Feature A');
+      expect(result).toContain('Feature B');
+    });
+
+    it('should return unchanged content if feature not found', () => {
+      const result = removeImplementedFeature(baseSpec, 'Nonexistent');
+      expect(result).toContain('Feature A');
+      expect(result).toContain('Feature B');
+    });
+  });
+
+  describe('updateImplementedFeature', () => {
+    const baseSpec = `<implemented_features>
+    <feature>
+      <name>My Feature</name>
+      <description>Original description</description>
+    </feature>
+  </implemented_features>`;
+
+    it('should update feature description', () => {
+      const result = updateImplementedFeature(baseSpec, 'My Feature', {
+        description: 'Updated description',
+      });
+      expect(result).toContain('Updated description');
+      expect(result).not.toContain('Original description');
+    });
+
+    it('should add file_locations', () => {
+      const result = updateImplementedFeature(baseSpec, 'My Feature', {
+        file_locations: ['src/new.ts'],
+      });
+      expect(result).toContain('<file_locations>');
+      expect(result).toContain('src/new.ts');
+    });
+
+    it('should preserve feature name if not updated', () => {
+      const result = updateImplementedFeature(baseSpec, 'My Feature', {
+        description: 'New desc',
+      });
+      expect(result).toContain('My Feature');
+    });
+
+    it('should be case-insensitive', () => {
+      const result = updateImplementedFeature(baseSpec, 'my feature', {
+        description: 'Updated',
+      });
+      expect(result).toContain('Updated');
+    });
+
+    it('should return unchanged content if feature not found', () => {
+      const result = updateImplementedFeature(baseSpec, 'Nonexistent', {
+        description: 'New',
+      });
+      expect(result).toContain('Original description');
+    });
+  });
+
+  describe('hasImplementedFeature', () => {
+    const baseSpec = `<implemented_features>
+    <feature>
+      <name>Existing Feature</name>
+      <description>Description</description>
+    </feature>
+  </implemented_features>`;
+
+    it('should return true for existing feature', () => {
+      expect(hasImplementedFeature(baseSpec, 'Existing Feature')).toBe(true);
+    });
+
+    it('should return false for non-existing feature', () => {
+      expect(hasImplementedFeature(baseSpec, 'Nonexistent')).toBe(false);
+    });
+
+    it('should be case-insensitive', () => {
+      expect(hasImplementedFeature(baseSpec, 'existing feature')).toBe(true);
+      expect(hasImplementedFeature(baseSpec, 'EXISTING FEATURE')).toBe(true);
+    });
+  });
+
+  describe('toSpecOutputFeatures', () => {
+    it('should convert to SpecOutput format', () => {
+      const features: ImplementedFeature[] = [
+        { name: 'Feature 1', description: 'Desc 1' },
+        { name: 'Feature 2', description: 'Desc 2', file_locations: ['src/f2.ts'] },
+      ];
+      const result = toSpecOutputFeatures(features);
+      expect(result).toEqual([
+        { name: 'Feature 1', description: 'Desc 1' },
+        { name: 'Feature 2', description: 'Desc 2', file_locations: ['src/f2.ts'] },
+      ]);
+    });
+
+    it('should handle empty array', () => {
+      expect(toSpecOutputFeatures([])).toEqual([]);
+    });
+  });
+
+  describe('fromSpecOutputFeatures', () => {
+    it('should convert from SpecOutput format', () => {
+      const specFeatures = [
+        { name: 'Feature 1', description: 'Desc 1' },
+        { name: 'Feature 2', description: 'Desc 2', file_locations: ['src/f2.ts'] },
+      ];
+      const result = fromSpecOutputFeatures(specFeatures);
+      expect(result).toEqual([
+        { name: 'Feature 1', description: 'Desc 1' },
+        { name: 'Feature 2', description: 'Desc 2', file_locations: ['src/f2.ts'] },
+      ]);
+    });
+
+    it('should handle empty array', () => {
+      expect(fromSpecOutputFeatures([])).toEqual([]);
+    });
+  });
+
+  describe('roundtrip', () => {
+    it('should maintain data integrity through extract -> update cycle', () => {
+      const originalSpec = `<?xml version="1.0" encoding="UTF-8"?>
+<project_specification>
+  <project_name>Test</project_name>
+  <core_capabilities>
+    <capability>Testing</capability>
+  </core_capabilities>
+  <implemented_features>
+    <feature>
+      <name>Test &amp; Feature</name>
+      <description>Uses &lt;special&gt; chars</description>
+      <file_locations>
+        <location>src/test.ts</location>
+      </file_locations>
+    </feature>
+  </implemented_features>
+</project_specification>`;
+
+      // Extract features
+      const features = extractImplementedFeatures(originalSpec);
+      expect(features[0].name).toBe('Test & Feature');
+      expect(features[0].description).toBe('Uses <special> chars');
+
+      // Update with same features
+      const result = updateImplementedFeaturesSection(originalSpec, features);
+
+      // Re-extract and verify
+      const reExtracted = extractImplementedFeatures(result);
+      expect(reExtracted[0].name).toBe('Test & Feature');
+      expect(reExtracted[0].description).toBe('Uses <special> chars');
+      expect(reExtracted[0].file_locations).toEqual(['src/test.ts']);
+    });
+  });
+
+  describe('custom logger', () => {
+    it('should use custom logger for extractXmlSection', () => {
+      const mockLogger = createMockLogger();
+      const xml = '<root><section>content</section></root>';
+      extractXmlSection(xml, 'section', { logger: mockLogger });
+      expect(mockLogger.debug).toHaveBeenCalledWith('Extracted <section> section');
+    });
+
+    it('should log when section is not found', () => {
+      const mockLogger = createMockLogger();
+      const xml = '<root><other>content</other></root>';
+      extractXmlSection(xml, 'missing', { logger: mockLogger });
+      expect(mockLogger.debug).toHaveBeenCalledWith('Section <missing> not found');
+    });
+
+    it('should use custom logger for extractXmlElements', () => {
+      const mockLogger = createMockLogger();
+      const xml = '<items><item>one</item><item>two</item></items>';
+      extractXmlElements(xml, 'item', { logger: mockLogger });
+      expect(mockLogger.debug).toHaveBeenCalledWith('Extracted 2 <item> elements');
+    });
+
+    it('should use custom logger for extractImplementedFeatures', () => {
+      const mockLogger = createMockLogger();
+      const xml = `<implemented_features>
+        <feature>
+          <name>Test</name>
+          <description>Desc</description>
+        </feature>
+      </implemented_features>`;
+      extractImplementedFeatures(xml, { logger: mockLogger });
+      expect(mockLogger.debug).toHaveBeenCalledWith('Extracted 1 implemented features');
+    });
+
+    it('should log when no implemented_features section found', () => {
+      const mockLogger = createMockLogger();
+      const xml = '<root><other>content</other></root>';
+      extractImplementedFeatures(xml, { logger: mockLogger });
+      expect(mockLogger.debug).toHaveBeenCalledWith('No implemented_features section found');
+    });
+
+    it('should use custom logger warn for missing insertion point', () => {
+      const mockLogger = createMockLogger();
+      // XML without project_specification, core_capabilities, or implemented_features
+      const xml = '<other>content</other>';
+      const features: ImplementedFeature[] = [{ name: 'Test', description: 'Desc' }];
+      updateImplementedFeaturesSection(xml, features, { logger: mockLogger });
+      expect(mockLogger.warn).toHaveBeenCalledWith(
+        'Could not find appropriate insertion point for implemented_features'
+      );
+    });
+  });
+
+  describe('edge cases', () => {
+    describe('escapeXml edge cases', () => {
+      it('should handle strings with only special characters', () => {
+        expect(escapeXml('<>&"\'')).toBe('&lt;&gt;&amp;&quot;&apos;');
+      });
+
+      it('should handle very long strings', () => {
+        const longString = 'a'.repeat(10000) + '&' + 'b'.repeat(10000);
+        const escaped = escapeXml(longString);
+        expect(escaped).toContain('&amp;');
+        expect(escaped.length).toBe(20005); // +4 for &amp; minus &
+      });
+
+      it('should handle unicode characters without escaping', () => {
+        const unicode = '日本語 emoji: 🚀 symbols: ∞ ≠ ≤';
+        expect(escapeXml(unicode)).toBe(unicode);
+      });
+    });
+
+    describe('unescapeXml edge cases', () => {
+      it('should handle strings with only entities', () => {
+        expect(unescapeXml('&lt;&gt;&amp;&quot;&apos;')).toBe('<>&"\'');
+      });
+
+      it('should not double-unescape', () => {
+        // &amp;lt; should become &lt; (not <)
+        expect(unescapeXml('&amp;lt;')).toBe('&lt;');
+      });
+
+      it('should handle partial/invalid entities gracefully', () => {
+        // Invalid entities should pass through unchanged
+        expect(unescapeXml('&unknown;')).toBe('&unknown;');
+        expect(unescapeXml('&amp')).toBe('&amp'); // Missing semicolon
+      });
+    });
+
+    describe('extractXmlSection edge cases', () => {
+      it('should handle nested tags with same name', () => {
+        // Note: regex-based parsing with non-greedy matching will match
+        // from first opening tag to first closing tag
+        const xml = '<outer><outer>inner</outer></outer>';
+        // Non-greedy [\s\S]*? matches from first <outer> to first </outer>
+        expect(extractXmlSection(xml, 'outer')).toBe('<outer>inner');
+      });
+
+      it('should handle self-closing tags (returns null)', () => {
+        const xml = '<root><section /></root>';
+        // Regex expects content between tags, self-closing won't match
+        expect(extractXmlSection(xml, 'section')).toBeNull();
+      });
+
+      it('should handle tags with attributes', () => {
+        const xml = '<root><section id="1" class="test">content</section></root>';
+        // The regex matches exact tag names, so this won't match
+        expect(extractXmlSection(xml, 'section')).toBeNull();
+      });
+
+      it('should handle whitespace in tag content', () => {
+        const xml = '<section>   \n\t  </section>';
+        expect(extractXmlSection(xml, 'section')).toBe('   \n\t  ');
+      });
+    });
+
+    describe('extractXmlElements edge cases', () => {
+      it('should handle elements across multiple lines', () => {
+        const xml = `<items>
+          <item>
+            first
+          </item>
+          <item>second</item>
+        </items>`;
+        // Multiline content is now captured with [\s\S]*? pattern
+        const result = extractXmlElements(xml, 'item');
+        expect(result).toHaveLength(2);
+        expect(result[0]).toBe('first');
+        expect(result[1]).toBe('second');
+      });
+
+      it('should handle consecutive elements without whitespace', () => {
+        const xml = '<items><item>a</item><item>b</item><item>c</item></items>';
+        expect(extractXmlElements(xml, 'item')).toEqual(['a', 'b', 'c']);
+      });
+    });
+
+    describe('extractImplementedFeatures edge cases', () => {
+      it('should skip features without names', () => {
+        const xml = `<implemented_features>
+          <feature>
+            <description>Orphan description</description>
+          </feature>
+          <feature>
+            <name>Valid Feature</name>
+            <description>Has name</description>
+          </feature>
+        </implemented_features>`;
+        const features = extractImplementedFeatures(xml);
+        expect(features).toHaveLength(1);
+        expect(features[0].name).toBe('Valid Feature');
+      });
+
+      it('should handle features with empty names', () => {
+        const xml = `<implemented_features>
+          <feature>
+            <name></name>
+            <description>Empty name</description>
+          </feature>
+        </implemented_features>`;
+        const features = extractImplementedFeatures(xml);
+        expect(features).toHaveLength(0); // Empty name is falsy
+      });
+
+      it('should handle features with whitespace-only names', () => {
+        const xml = `<implemented_features>
+          <feature>
+            <name>   </name>
+            <description>Whitespace name</description>
+          </feature>
+        </implemented_features>`;
+        const features = extractImplementedFeatures(xml);
+        expect(features).toHaveLength(0); // Trimmed whitespace is empty
+      });
+
+      it('should handle empty file_locations section', () => {
+        const xml = `<implemented_features>
+          <feature>
+            <name>Test</name>
+            <description>Desc</description>
+            <file_locations>
+            </file_locations>
+          </feature>
+        </implemented_features>`;
+        const features = extractImplementedFeatures(xml);
+        expect(features[0].file_locations).toBeUndefined();
+      });
+    });
+
+    describe('featureToXml edge cases', () => {
+      it('should handle custom indentation', () => {
+        const feature: ImplementedFeature = {
+          name: 'Test',
+          description: 'Desc',
+        };
+        const xml = featureToXml(feature, '\t');
+        expect(xml).toContain('\t\t<feature>');
+        expect(xml).toContain('\t\t\t<name>Test</name>');
+      });
+
+      it('should handle empty description', () => {
+        const feature: ImplementedFeature = {
+          name: 'Test',
+          description: '',
+        };
+        const xml = featureToXml(feature);
+        expect(xml).toContain('<description></description>');
+      });
+
+      it('should handle undefined file_locations', () => {
+        const feature: ImplementedFeature = {
+          name: 'Test',
+          description: 'Desc',
+          file_locations: undefined,
+        };
+        const xml = featureToXml(feature);
+        expect(xml).not.toContain('file_locations');
+      });
+    });
+
+    describe('updateImplementedFeaturesSection edge cases', () => {
+      it('should insert before </project_specification> as fallback', () => {
+        const specWithoutCoreCapabilities = `<?xml version="1.0" encoding="UTF-8"?>
+<project_specification>
+  <project_name>Test</project_name>
+</project_specification>`;
+        const newFeatures: ImplementedFeature[] = [
+          { name: 'New Feature', description: 'New description' },
+        ];
+        const result = updateImplementedFeaturesSection(specWithoutCoreCapabilities, newFeatures);
+        expect(result).toContain('<implemented_features>');
+        expect(result).toContain('New Feature');
+        expect(result.indexOf('<implemented_features>')).toBeLessThan(
+          result.indexOf('</project_specification>')
+        );
+      });
+
+      it('should return unchanged content when no insertion point found', () => {
+        const invalidSpec = '<other>content</other>';
+        const newFeatures: ImplementedFeature[] = [{ name: 'Feature', description: 'Desc' }];
+        const result = updateImplementedFeaturesSection(invalidSpec, newFeatures);
+        expect(result).toBe(invalidSpec);
+      });
+
+      it('should handle empty features array', () => {
+        const spec = `<implemented_features>
+          <feature>
+            <name>Old</name>
+            <description>Old desc</description>
+          </feature>
+        </implemented_features>`;
+        const result = updateImplementedFeaturesSection(spec, []);
+        expect(result).toContain('<implemented_features>');
+        expect(result).not.toContain('Old');
+      });
+    });
+
+    describe('addImplementedFeature edge cases', () => {
+      it('should create section when adding to spec without implemented_features', () => {
+        const specWithoutSection = `<project_specification>
+  <core_capabilities>
+    <capability>Testing</capability>
+  </core_capabilities>
+</project_specification>`;
+        const newFeature: ImplementedFeature = {
+          name: 'First Feature',
+          description: 'First description',
+        };
+        const result = addImplementedFeature(specWithoutSection, newFeature);
+        expect(result).toContain('<implemented_features>');
+        expect(result).toContain('First Feature');
+      });
+
+      it('should handle feature with all fields populated', () => {
+        const spec = `<implemented_features></implemented_features>`;
+        const newFeature: ImplementedFeature = {
+          name: 'Complete Feature',
+          description: 'Full description',
+          file_locations: ['src/a.ts', 'src/b.ts', 'src/c.ts'],
+        };
+        const result = addImplementedFeature(spec, newFeature);
+        expect(result).toContain('Complete Feature');
+        expect(result).toContain('src/a.ts');
+        expect(result).toContain('src/b.ts');
+        expect(result).toContain('src/c.ts');
+      });
+    });
+
+    describe('updateImplementedFeature edge cases', () => {
+      it('should allow updating feature name', () => {
+        const spec = `<implemented_features>
+          <feature>
+            <name>Old Name</name>
+            <description>Desc</description>
+          </feature>
+        </implemented_features>`;
+        const result = updateImplementedFeature(spec, 'Old Name', {
+          name: 'New Name',
+        });
+        expect(result).toContain('New Name');
+        expect(result).not.toContain('Old Name');
+      });
+
+      it('should allow clearing file_locations', () => {
+        const spec = `<implemented_features>
+          <feature>
+            <name>Test</name>
+            <description>Desc</description>
+            <file_locations>
+              <location>src/old.ts</location>
+            </file_locations>
+          </feature>
+        </implemented_features>`;
+        const result = updateImplementedFeature(spec, 'Test', {
+          file_locations: [],
+        });
+        expect(result).not.toContain('file_locations');
+        expect(result).not.toContain('src/old.ts');
+      });
+
+      it('should handle updating multiple fields at once', () => {
+        const spec = `<implemented_features>
+          <feature>
+            <name>Original</name>
+            <description>Original desc</description>
+          </feature>
+        </implemented_features>`;
+        const result = updateImplementedFeature(spec, 'Original', {
+          name: 'Updated',
+          description: 'Updated desc',
+          file_locations: ['new/path.ts'],
+        });
+        expect(result).toContain('Updated');
+        expect(result).toContain('Updated desc');
+        expect(result).toContain('new/path.ts');
+      });
+    });
+
+    describe('toSpecOutputFeatures and fromSpecOutputFeatures edge cases', () => {
+      it('should handle features with empty file_locations array', () => {
+        const features: ImplementedFeature[] = [
+          { name: 'Test', description: 'Desc', file_locations: [] },
+        ];
+        const specOutput = toSpecOutputFeatures(features);
+        expect(specOutput[0].file_locations).toBeUndefined();
+      });
+
+      it('should handle round-trip conversion', () => {
+        const original: ImplementedFeature[] = [
+          { name: 'Feature 1', description: 'Desc 1' },
+          { name: 'Feature 2', description: 'Desc 2', file_locations: ['src/f.ts'] },
+        ];
+        const specOutput = toSpecOutputFeatures(original);
+        const restored = fromSpecOutputFeatures(specOutput);
+        expect(restored).toEqual(original);
+      });
+    });
+  });
+
+  describe('integration scenarios', () => {
+    it('should handle a complete spec file workflow', () => {
+      // Start with a minimal spec
+      let spec = `<?xml version="1.0" encoding="UTF-8"?>
+<project_specification>
+  <project_name>My App</project_name>
+  <core_capabilities>
+    <capability>User management</capability>
+  </core_capabilities>
+</project_specification>`;
+
+      // Add first feature
+      spec = addImplementedFeature(spec, {
+        name: 'User Authentication',
+        description: 'Login and logout functionality',
+        file_locations: ['src/auth/login.ts', 'src/auth/logout.ts'],
+      });
+      expect(hasImplementedFeature(spec, 'User Authentication')).toBe(true);
+
+      // Add second feature
+      spec = addImplementedFeature(spec, {
+        name: 'User Profile',
+        description: 'View and edit user profile',
+      });
+      expect(extractImplementedFeatureNames(spec)).toEqual(['User Authentication', 'User Profile']);
+
+      // Update first feature
+      spec = updateImplementedFeature(spec, 'User Authentication', {
+        file_locations: ['src/auth/login.ts', 'src/auth/logout.ts', 'src/auth/session.ts'],
+      });
+      const features = extractImplementedFeatures(spec);
+      expect(features[0].file_locations).toContain('src/auth/session.ts');
+
+      // Remove a feature
+      spec = removeImplementedFeature(spec, 'User Profile');
+      expect(hasImplementedFeature(spec, 'User Profile')).toBe(false);
+      expect(hasImplementedFeature(spec, 'User Authentication')).toBe(true);
+    });
+
+    it('should handle special characters throughout workflow', () => {
+      const spec = `<project_specification>
+  <core_capabilities></core_capabilities>
+</project_specification>`;
+
+      const result = addImplementedFeature(spec, {
+        name: 'Search & Filter',
+        description: 'Supports <query> syntax with "quoted" terms',
+        file_locations: ["src/search/parser's.ts"],
+      });
+
+      const features = extractImplementedFeatures(result);
+      expect(features[0].name).toBe('Search & Filter');
+      expect(features[0].description).toBe('Supports <query> syntax with "quoted" terms');
+      expect(features[0].file_locations?.[0]).toBe("src/search/parser's.ts");
+    });
+
+    it('should preserve other XML content when modifying features', () => {
+      const spec = `<?xml version="1.0" encoding="UTF-8"?>
+<project_specification>
+  <project_name>Preserved Name</project_name>
+  <description>This should be preserved</description>
+  <core_capabilities>
+    <capability>Capability 1</capability>
+    <capability>Capability 2</capability>
+  </core_capabilities>
+  <implemented_features>
+    <feature>
+      <name>Old Feature</name>
+      <description>Will be replaced</description>
+    </feature>
+  </implemented_features>
+  <future_plans>Keep this too</future_plans>
+</project_specification>`;
+
+      const result = updateImplementedFeaturesSection(spec, [
+        { name: 'New Feature', description: 'New desc' },
+      ]);
+
+      expect(result).toContain('Preserved Name');
+      expect(result).toContain('This should be preserved');
+      expect(result).toContain('Capability 1');
+      expect(result).toContain('Capability 2');
+      expect(result).toContain('Keep this too');
+      expect(result).not.toContain('Old Feature');
+      expect(result).toContain('New Feature');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/providers/base-provider.test.ts b/temp_repo/apps/server/tests/unit/providers/base-provider.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f355fec9900cac9c26a00257a214741b52dd5e8a
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/providers/base-provider.test.ts
@@ -0,0 +1,238 @@
+import { describe, it, expect } from 'vitest';
+import { BaseProvider } from '@/providers/base-provider.js';
+import type {
+  ProviderConfig,
+  ExecuteOptions,
+  ProviderMessage,
+  InstallationStatus,
+  ModelDefinition,
+} from '@automaker/types';
+
+// Concrete implementation for testing the abstract class
+class TestProvider extends BaseProvider {
+  getName(): string {
+    return 'test-provider';
+  }
+
+  async *executeQuery(_options: ExecuteOptions): AsyncGenerator<ProviderMessage> {
+    yield { type: 'text', text: 'test response' };
+  }
+
+  async detectInstallation(): Promise<InstallationStatus> {
+    return { installed: true };
+  }
+
+  getAvailableModels(): ModelDefinition[] {
+    return [{ id: 'test-model-1', name: 'Test Model 1', description: 'A test model' }];
+  }
+}
+
+describe('base-provider.ts', () => {
+  describe('constructor', () => {
+    it('should initialize with empty config when none provided', () => {
+      const provider = new TestProvider();
+      expect(provider.getConfig()).toEqual({});
+    });
+
+    it('should initialize with provided config', () => {
+      const config: ProviderConfig = {
+        apiKey: 'test-key',
+        baseUrl: 'https://test.com',
+      };
+      const provider = new TestProvider(config);
+      expect(provider.getConfig()).toEqual(config);
+    });
+
+    it('should call getName() during initialization', () => {
+      const provider = new TestProvider();
+      expect(provider.getName()).toBe('test-provider');
+    });
+  });
+
+  describe('validateConfig', () => {
+    it('should return valid when config exists', () => {
+      const provider = new TestProvider({ apiKey: 'test' });
+      const result = provider.validateConfig();
+
+      expect(result.valid).toBe(true);
+      expect(result.errors).toHaveLength(0);
+      expect(result.warnings).toHaveLength(0);
+    });
+
+    it('should return invalid when config is undefined', () => {
+      // Create provider without config
+      const provider = new TestProvider();
+      // Manually set config to undefined to test edge case
+      (provider as any).config = undefined;
+
+      const result = provider.validateConfig();
+
+      expect(result.valid).toBe(false);
+      expect(result.errors).toContain('Provider config is missing');
+    });
+
+    it('should return valid for empty config object', () => {
+      const provider = new TestProvider({});
+      const result = provider.validateConfig();
+
+      expect(result.valid).toBe(true);
+      expect(result.errors).toHaveLength(0);
+    });
+
+    it('should include warnings array in result', () => {
+      const provider = new TestProvider();
+      const result = provider.validateConfig();
+
+      expect(result).toHaveProperty('warnings');
+      expect(Array.isArray(result.warnings)).toBe(true);
+    });
+  });
+
+  describe('supportsFeature', () => {
+    it("should support 'tools' feature", () => {
+      const provider = new TestProvider();
+      expect(provider.supportsFeature('tools')).toBe(true);
+    });
+
+    it("should support 'text' feature", () => {
+      const provider = new TestProvider();
+      expect(provider.supportsFeature('text')).toBe(true);
+    });
+
+    it('should not support unknown features', () => {
+      const provider = new TestProvider();
+      expect(provider.supportsFeature('vision')).toBe(false);
+      expect(provider.supportsFeature('mcp')).toBe(false);
+      expect(provider.supportsFeature('unknown')).toBe(false);
+    });
+
+    it('should be case-sensitive', () => {
+      const provider = new TestProvider();
+      expect(provider.supportsFeature('TOOLS')).toBe(false);
+      expect(provider.supportsFeature('Text')).toBe(false);
+    });
+  });
+
+  describe('getConfig', () => {
+    it('should return current config', () => {
+      const config: ProviderConfig = {
+        apiKey: 'test-key',
+        model: 'test-model',
+      };
+      const provider = new TestProvider(config);
+
+      expect(provider.getConfig()).toEqual(config);
+    });
+
+    it('should return same reference', () => {
+      const config: ProviderConfig = { apiKey: 'test' };
+      const provider = new TestProvider(config);
+
+      const retrieved1 = provider.getConfig();
+      const retrieved2 = provider.getConfig();
+
+      expect(retrieved1).toBe(retrieved2);
+    });
+  });
+
+  describe('setConfig', () => {
+    it('should merge partial config with existing config', () => {
+      const provider = new TestProvider({ apiKey: 'original-key' });
+
+      provider.setConfig({ model: 'new-model' });
+
+      expect(provider.getConfig()).toEqual({
+        apiKey: 'original-key',
+        model: 'new-model',
+      });
+    });
+
+    it('should override existing fields', () => {
+      const provider = new TestProvider({ apiKey: 'old-key', model: 'old-model' });
+
+      provider.setConfig({ apiKey: 'new-key' });
+
+      expect(provider.getConfig()).toEqual({
+        apiKey: 'new-key',
+        model: 'old-model',
+      });
+    });
+
+    it('should accept empty object', () => {
+      const provider = new TestProvider({ apiKey: 'test' });
+      const originalConfig = provider.getConfig();
+
+      provider.setConfig({});
+
+      expect(provider.getConfig()).toEqual(originalConfig);
+    });
+
+    it('should handle multiple updates', () => {
+      const provider = new TestProvider();
+
+      provider.setConfig({ apiKey: 'key1' });
+      provider.setConfig({ model: 'model1' });
+      provider.setConfig({ baseUrl: 'https://test.com' });
+
+      expect(provider.getConfig()).toEqual({
+        apiKey: 'key1',
+        model: 'model1',
+        baseUrl: 'https://test.com',
+      });
+    });
+
+    it('should preserve other fields when updating one field', () => {
+      const provider = new TestProvider({
+        apiKey: 'key',
+        model: 'model',
+        baseUrl: 'https://test.com',
+      });
+
+      provider.setConfig({ model: 'new-model' });
+
+      expect(provider.getConfig()).toEqual({
+        apiKey: 'key',
+        model: 'new-model',
+        baseUrl: 'https://test.com',
+      });
+    });
+  });
+
+  describe('abstract methods', () => {
+    it('should require getName implementation', () => {
+      const provider = new TestProvider();
+      expect(typeof provider.getName).toBe('function');
+      expect(provider.getName()).toBe('test-provider');
+    });
+
+    it('should require executeQuery implementation', async () => {
+      const provider = new TestProvider();
+      expect(typeof provider.executeQuery).toBe('function');
+
+      const generator = provider.executeQuery({
+        prompt: 'test',
+        projectDirectory: '/test',
+      });
+      const result = await generator.next();
+
+      expect(result.value).toEqual({ type: 'text', text: 'test response' });
+    });
+
+    it('should require detectInstallation implementation', async () => {
+      const provider = new TestProvider();
+      expect(typeof provider.detectInstallation).toBe('function');
+
+      const status = await provider.detectInstallation();
+      expect(status).toHaveProperty('installed');
+    });
+
+    it('should require getAvailableModels implementation', () => {
+      const provider = new TestProvider();
+      expect(typeof provider.getAvailableModels).toBe('function');
+
+      const models = provider.getAvailableModels();
+      expect(Array.isArray(models)).toBe(true);
+      expect(models.length).toBeGreaterThan(0);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/providers/claude-provider.test.ts b/temp_repo/apps/server/tests/unit/providers/claude-provider.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8a3850a60bcec2829354b3e45877564af5f3bf9c
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/providers/claude-provider.test.ts
@@ -0,0 +1,500 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ClaudeProvider } from '@/providers/claude-provider.js';
+import * as sdk from '@anthropic-ai/claude-agent-sdk';
+import { collectAsyncGenerator } from '../../utils/helpers.js';
+
+vi.mock('@anthropic-ai/claude-agent-sdk');
+
+vi.mock('@automaker/platform', () => ({
+  getClaudeAuthIndicators: vi.fn().mockResolvedValue({
+    hasCredentialsFile: false,
+    hasSettingsFile: false,
+    hasStatsCacheWithActivity: false,
+    hasProjectsSessions: false,
+    credentials: null,
+    checks: {},
+  }),
+}));
+
+describe('claude-provider.ts', () => {
+  let provider: ClaudeProvider;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    provider = new ClaudeProvider();
+    delete process.env.ANTHROPIC_API_KEY;
+    delete process.env.ANTHROPIC_BASE_URL;
+    delete process.env.ANTHROPIC_AUTH_TOKEN;
+  });
+
+  describe('getName', () => {
+    it("should return 'claude' as provider name", () => {
+      expect(provider.getName()).toBe('claude');
+    });
+  });
+
+  describe('executeQuery', () => {
+    it('should execute simple text query', async () => {
+      const mockMessages = [
+        { type: 'text', text: 'Response 1' },
+        { type: 'text', text: 'Response 2' },
+      ];
+
+      vi.mocked(sdk.query).mockReturnValue(
+        (async function* () {
+          for (const msg of mockMessages) {
+            yield msg;
+          }
+        })()
+      );
+
+      const generator = provider.executeQuery({
+        prompt: 'Hello',
+        model: 'claude-opus-4-6',
+        cwd: '/test',
+      });
+
+      const results = await collectAsyncGenerator(generator);
+
+      expect(results).toHaveLength(2);
+      expect(results[0]).toEqual({ type: 'text', text: 'Response 1' });
+      expect(results[1]).toEqual({ type: 'text', text: 'Response 2' });
+    });
+
+    it('should pass correct options to SDK', async () => {
+      vi.mocked(sdk.query).mockReturnValue(
+        (async function* () {
+          yield { type: 'text', text: 'test' };
+        })()
+      );
+
+      const generator = provider.executeQuery({
+        prompt: 'Test prompt',
+        model: 'claude-opus-4-6',
+        cwd: '/test/dir',
+        systemPrompt: 'You are helpful',
+        maxTurns: 10,
+        allowedTools: ['Read', 'Write'],
+      });
+
+      await collectAsyncGenerator(generator);
+
+      expect(sdk.query).toHaveBeenCalledWith({
+        prompt: 'Test prompt',
+        options: expect.objectContaining({
+          model: 'claude-opus-4-6',
+          systemPrompt: 'You are helpful',
+          maxTurns: 10,
+          cwd: '/test/dir',
+          allowedTools: ['Read', 'Write'],
+          permissionMode: 'bypassPermissions',
+          allowDangerouslySkipPermissions: true,
+        }),
+      });
+    });
+
+    it('should not include allowedTools when not specified (caller decides via sdk-options)', async () => {
+      vi.mocked(sdk.query).mockReturnValue(
+        (async function* () {
+          yield { type: 'text', text: 'test' };
+        })()
+      );
+
+      const generator = provider.executeQuery({
+        prompt: 'Test',
+        model: 'claude-opus-4-6',
+        cwd: '/test',
+      });
+
+      await collectAsyncGenerator(generator);
+
+      expect(sdk.query).toHaveBeenCalledWith({
+        prompt: 'Test',
+        options: expect.not.objectContaining({
+          allowedTools: expect.anything(),
+        }),
+      });
+    });
+
+    it('should pass abortController if provided', async () => {
+      vi.mocked(sdk.query).mockReturnValue(
+        (async function* () {
+          yield { type: 'text', text: 'test' };
+        })()
+      );
+
+      const abortController = new AbortController();
+
+      const generator = provider.executeQuery({
+        prompt: 'Test',
+        model: 'claude-opus-4-6',
+        cwd: '/test',
+        abortController,
+      });
+
+      await collectAsyncGenerator(generator);
+
+      expect(sdk.query).toHaveBeenCalledWith({
+        prompt: 'Test',
+        options: expect.objectContaining({
+          abortController,
+        }),
+      });
+    });
+
+    it('should handle conversation history with sdkSessionId using resume option', async () => {
+      vi.mocked(sdk.query).mockReturnValue(
+        (async function* () {
+          yield { type: 'text', text: 'test' };
+        })()
+      );
+
+      const conversationHistory = [
+        { role: 'user' as const, content: 'Previous message' },
+        { role: 'assistant' as const, content: 'Previous response' },
+      ];
+
+      const generator = provider.executeQuery({
+        prompt: 'Current message',
+        model: 'claude-opus-4-6',
+        cwd: '/test',
+        conversationHistory,
+        sdkSessionId: 'test-session-id',
+      });
+
+      await collectAsyncGenerator(generator);
+
+      // Should use resume option when sdkSessionId is provided with history
+      expect(sdk.query).toHaveBeenCalledWith({
+        prompt: 'Current message',
+        options: expect.objectContaining({
+          resume: 'test-session-id',
+        }),
+      });
+    });
+
+    it('should handle array prompt (with images)', async () => {
+      vi.mocked(sdk.query).mockReturnValue(
+        (async function* () {
+          yield { type: 'text', text: 'test' };
+        })()
+      );
+
+      const arrayPrompt = [
+        { type: 'text', text: 'Describe this' },
+        { type: 'image', source: { type: 'base64', data: '...' } },
+      ];
+
+      const generator = provider.executeQuery({
+        prompt: arrayPrompt as any,
+        model: 'claude-opus-4-6',
+        cwd: '/test',
+      });
+
+      await collectAsyncGenerator(generator);
+
+      // Should pass an async generator as prompt for array inputs
+      const callArgs = vi.mocked(sdk.query).mock.calls[0][0];
+      expect(typeof callArgs.prompt).not.toBe('string');
+    });
+
+    it('should use maxTurns default of 1000', async () => {
+      vi.mocked(sdk.query).mockReturnValue(
+        (async function* () {
+          yield { type: 'text', text: 'test' };
+        })()
+      );
+
+      const generator = provider.executeQuery({
+        prompt: 'Test',
+        model: 'claude-opus-4-6',
+        cwd: '/test',
+      });
+
+      await collectAsyncGenerator(generator);
+
+      expect(sdk.query).toHaveBeenCalledWith({
+        prompt: 'Test',
+        options: expect.objectContaining({
+          maxTurns: 1000,
+        }),
+      });
+    });
+
+    it('should handle errors during execution and rethrow', async () => {
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const testError = new Error('SDK execution failed');
+
+      vi.mocked(sdk.query).mockReturnValue(
+        (async function* () {
+          throw testError;
+        })()
+      );
+
+      const generator = provider.executeQuery({
+        prompt: 'Test',
+        model: 'claude-opus-4-6',
+        cwd: '/test',
+      });
+
+      await expect(collectAsyncGenerator(generator)).rejects.toThrow('SDK execution failed');
+
+      // Should log error with classification info (via logger)
+      // Logger format: 'ERROR [Context]' message, data
+      const errorCall = consoleErrorSpy.mock.calls[0];
+      expect(errorCall[0]).toMatch(/ERROR.*\[ClaudeProvider\]/);
+      expect(errorCall[1]).toBe('executeQuery() error during execution:');
+      expect(errorCall[2]).toMatchObject({
+        type: expect.any(String),
+        message: 'SDK execution failed',
+        isRateLimit: false,
+        stack: expect.stringContaining('Error: SDK execution failed'),
+      });
+
+      consoleErrorSpy.mockRestore();
+    });
+  });
+
+  describe('detectInstallation', () => {
+    it('should return installed with SDK method', async () => {
+      const result = await provider.detectInstallation();
+
+      expect(result.installed).toBe(true);
+      expect(result.method).toBe('sdk');
+    });
+
+    it('should detect ANTHROPIC_API_KEY', async () => {
+      process.env.ANTHROPIC_API_KEY = 'test-key';
+
+      const result = await provider.detectInstallation();
+
+      expect(result.hasApiKey).toBe(true);
+      expect(result.authenticated).toBe(true);
+    });
+
+    it('should return hasApiKey false when no keys present', async () => {
+      const result = await provider.detectInstallation();
+
+      expect(result.hasApiKey).toBe(false);
+      expect(result.authenticated).toBe(false);
+    });
+  });
+
+  describe('environment variable passthrough', () => {
+    afterEach(() => {
+      delete process.env.ANTHROPIC_BASE_URL;
+      delete process.env.ANTHROPIC_AUTH_TOKEN;
+    });
+
+    it('should pass ANTHROPIC_BASE_URL to SDK env', async () => {
+      process.env.ANTHROPIC_BASE_URL = 'https://custom.example.com/v1';
+
+      vi.mocked(sdk.query).mockReturnValue(
+        (async function* () {
+          yield { type: 'text', text: 'test' };
+        })()
+      );
+
+      const generator = provider.executeQuery({
+        prompt: 'Test',
+        model: 'claude-opus-4-6',
+        cwd: '/test',
+      });
+
+      await collectAsyncGenerator(generator);
+
+      expect(sdk.query).toHaveBeenCalledWith({
+        prompt: 'Test',
+        options: expect.objectContaining({
+          env: expect.objectContaining({
+            ANTHROPIC_BASE_URL: 'https://custom.example.com/v1',
+          }),
+        }),
+      });
+    });
+
+    it('should pass ANTHROPIC_AUTH_TOKEN to SDK env', async () => {
+      process.env.ANTHROPIC_AUTH_TOKEN = 'custom-auth-token';
+
+      vi.mocked(sdk.query).mockReturnValue(
+        (async function* () {
+          yield { type: 'text', text: 'test' };
+        })()
+      );
+
+      const generator = provider.executeQuery({
+        prompt: 'Test',
+        model: 'claude-opus-4-6',
+        cwd: '/test',
+      });
+
+      await collectAsyncGenerator(generator);
+
+      expect(sdk.query).toHaveBeenCalledWith({
+        prompt: 'Test',
+        options: expect.objectContaining({
+          env: expect.objectContaining({
+            ANTHROPIC_AUTH_TOKEN: 'custom-auth-token',
+          }),
+        }),
+      });
+    });
+
+    it('should pass both custom endpoint vars together', async () => {
+      process.env.ANTHROPIC_BASE_URL = 'https://gateway.example.com';
+      process.env.ANTHROPIC_AUTH_TOKEN = 'gateway-token';
+
+      vi.mocked(sdk.query).mockReturnValue(
+        (async function* () {
+          yield { type: 'text', text: 'test' };
+        })()
+      );
+
+      const generator = provider.executeQuery({
+        prompt: 'Test',
+        model: 'claude-opus-4-6',
+        cwd: '/test',
+      });
+
+      await collectAsyncGenerator(generator);
+
+      expect(sdk.query).toHaveBeenCalledWith({
+        prompt: 'Test',
+        options: expect.objectContaining({
+          env: expect.objectContaining({
+            ANTHROPIC_BASE_URL: 'https://gateway.example.com',
+            ANTHROPIC_AUTH_TOKEN: 'gateway-token',
+          }),
+        }),
+      });
+    });
+  });
+
+  describe('getAvailableModels', () => {
+    it('should return 5 Claude models', () => {
+      const models = provider.getAvailableModels();
+
+      expect(models).toHaveLength(5);
+    });
+
+    it('should include Claude Opus 4.6', () => {
+      const models = provider.getAvailableModels();
+
+      const opus = models.find((m) => m.id === 'claude-opus-4-6');
+      expect(opus).toBeDefined();
+      expect(opus?.name).toBe('Claude Opus 4.6');
+      expect(opus?.provider).toBe('anthropic');
+    });
+
+    it('should include Claude Sonnet 4.6', () => {
+      const models = provider.getAvailableModels();
+
+      const sonnet = models.find((m) => m.id === 'claude-sonnet-4-6');
+      expect(sonnet).toBeDefined();
+      expect(sonnet?.name).toBe('Claude Sonnet 4.6');
+    });
+
+    it('should include Claude 3.5 Sonnet', () => {
+      const models = provider.getAvailableModels();
+
+      const sonnet35 = models.find((m) => m.id === 'claude-3-5-sonnet-20241022');
+      expect(sonnet35).toBeDefined();
+    });
+
+    it('should include Claude Haiku 4.5', () => {
+      const models = provider.getAvailableModels();
+
+      const haiku = models.find((m) => m.id === 'claude-haiku-4-5-20251001');
+      expect(haiku).toBeDefined();
+    });
+
+    it('should mark Opus as default', () => {
+      const models = provider.getAvailableModels();
+
+      const opus = models.find((m) => m.id === 'claude-opus-4-6');
+      expect(opus?.default).toBe(true);
+    });
+
+    it('should all support vision and tools', () => {
+      const models = provider.getAvailableModels();
+
+      models.forEach((model) => {
+        expect(model.supportsVision).toBe(true);
+        expect(model.supportsTools).toBe(true);
+      });
+    });
+
+    it('should have correct context windows', () => {
+      const models = provider.getAvailableModels();
+
+      models.forEach((model) => {
+        expect(model.contextWindow).toBe(200000);
+      });
+    });
+
+    it('should have modelString field matching id', () => {
+      const models = provider.getAvailableModels();
+
+      models.forEach((model) => {
+        expect(model.modelString).toBe(model.id);
+      });
+    });
+  });
+
+  describe('supportsFeature', () => {
+    it("should support 'tools' feature", () => {
+      expect(provider.supportsFeature('tools')).toBe(true);
+    });
+
+    it("should support 'text' feature", () => {
+      expect(provider.supportsFeature('text')).toBe(true);
+    });
+
+    it("should support 'vision' feature", () => {
+      expect(provider.supportsFeature('vision')).toBe(true);
+    });
+
+    it("should support 'thinking' feature", () => {
+      expect(provider.supportsFeature('thinking')).toBe(true);
+    });
+
+    it("should not support 'mcp' feature", () => {
+      expect(provider.supportsFeature('mcp')).toBe(false);
+    });
+
+    it("should not support 'cli' feature", () => {
+      expect(provider.supportsFeature('cli')).toBe(false);
+    });
+
+    it('should not support unknown features', () => {
+      expect(provider.supportsFeature('unknown')).toBe(false);
+    });
+  });
+
+  describe('validateConfig', () => {
+    it('should validate config from base class', () => {
+      const result = provider.validateConfig();
+
+      expect(result.valid).toBe(true);
+      expect(result.errors).toHaveLength(0);
+    });
+  });
+
+  describe('config management', () => {
+    it('should get and set config', () => {
+      provider.setConfig({ apiKey: 'test-key' });
+
+      const config = provider.getConfig();
+      expect(config.apiKey).toBe('test-key');
+    });
+
+    it('should merge config updates', () => {
+      provider.setConfig({ apiKey: 'key1' });
+      provider.setConfig({ model: 'model1' });
+
+      const config = provider.getConfig();
+      expect(config.apiKey).toBe('key1');
+      expect(config.model).toBe('model1');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/providers/codex-provider.test.ts b/temp_repo/apps/server/tests/unit/providers/codex-provider.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a0448a705a8e1c6b0b7b9c3d02abf74ab401dfa8
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/providers/codex-provider.test.ts
@@ -0,0 +1,474 @@
+import { describe, it, expect, vi, beforeEach, afterAll } from 'vitest';
+import os from 'os';
+import path from 'path';
+import { CodexProvider } from '../../../src/providers/codex-provider.js';
+import type { ProviderMessage } from '../../../src/providers/types.js';
+import { collectAsyncGenerator } from '../../utils/helpers.js';
+import {
+  spawnJSONLProcess,
+  findCodexCliPath,
+  secureFs,
+  getCodexConfigDir,
+  getCodexAuthIndicators,
+} from '@automaker/platform';
+import {
+  calculateReasoningTimeout,
+  REASONING_TIMEOUT_MULTIPLIERS,
+  DEFAULT_TIMEOUT_MS,
+  validateBareModelId,
+} from '@automaker/types';
+
+const OPENAI_API_KEY_ENV = 'OPENAI_API_KEY';
+const originalOpenAIKey = process.env[OPENAI_API_KEY_ENV];
+
+const codexRunMock = vi.fn();
+
+vi.mock('@openai/codex-sdk', () => ({
+  Codex: class {
+    constructor(_opts: { apiKey: string }) {}
+    startThread() {
+      return {
+        id: 'thread-123',
+        run: codexRunMock,
+      };
+    }
+    resumeThread() {
+      return {
+        id: 'thread-123',
+        run: codexRunMock,
+      };
+    }
+  },
+}));
+
+const EXEC_SUBCOMMAND = 'exec';
+
+vi.mock('@automaker/platform', () => ({
+  spawnJSONLProcess: vi.fn(),
+  spawnProcess: vi.fn(),
+  findCodexCliPath: vi.fn(),
+  getCodexAuthIndicators: vi.fn().mockResolvedValue({
+    hasAuthFile: false,
+    hasOAuthToken: false,
+    hasApiKey: false,
+  }),
+  getCodexConfigDir: vi.fn().mockReturnValue('/home/test/.codex'),
+  secureFs: {
+    readFile: vi.fn(),
+    mkdir: vi.fn(),
+    writeFile: vi.fn(),
+  },
+  getDataDirectory: vi.fn(),
+}));
+
+vi.mock('@/services/settings-service.js', () => ({
+  SettingsService: class {
+    async getGlobalSettings() {
+      return {
+        codexAutoLoadAgents: false,
+        codexSandboxMode: 'workspace-write',
+        codexApprovalPolicy: 'on-request',
+      };
+    }
+  },
+}));
+
+describe('codex-provider.ts', () => {
+  let provider: CodexProvider;
+
+  afterAll(() => {
+    if (originalOpenAIKey !== undefined) {
+      process.env[OPENAI_API_KEY_ENV] = originalOpenAIKey;
+    } else {
+      delete process.env[OPENAI_API_KEY_ENV];
+    }
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(getCodexConfigDir).mockReturnValue('/home/test/.codex');
+    vi.mocked(findCodexCliPath).mockResolvedValue('/usr/bin/codex');
+    vi.mocked(getCodexAuthIndicators).mockResolvedValue({
+      hasAuthFile: true,
+      hasOAuthToken: true,
+      hasApiKey: false,
+    });
+    delete process.env[OPENAI_API_KEY_ENV];
+    provider = new CodexProvider();
+  });
+
+  describe('executeQuery', () => {
+    it('emits tool_use and tool_result with shared tool_use_id for command execution', async () => {
+      const mockEvents = [
+        {
+          type: 'item.started',
+          item: {
+            type: 'command_execution',
+            id: 'cmd-1',
+            command: 'ls',
+          },
+        },
+        {
+          type: 'item.completed',
+          item: {
+            type: 'command_execution',
+            id: 'cmd-1',
+            output: 'file1\nfile2',
+          },
+        },
+      ];
+
+      vi.mocked(spawnJSONLProcess).mockReturnValue(
+        (async function* () {
+          for (const event of mockEvents) {
+            yield event;
+          }
+        })()
+      );
+      const results = await collectAsyncGenerator<ProviderMessage>(
+        provider.executeQuery({
+          prompt: 'List files',
+          model: 'gpt-5.2',
+          cwd: '/tmp',
+        })
+      );
+
+      expect(results).toHaveLength(2);
+      const toolUse = results[0];
+      const toolResult = results[1];
+
+      expect(toolUse.type).toBe('assistant');
+      expect(toolUse.message?.content[0].type).toBe('tool_use');
+      const toolUseId = toolUse.message?.content[0].tool_use_id;
+      expect(toolUseId).toBeDefined();
+
+      expect(toolResult.type).toBe('assistant');
+      expect(toolResult.message?.content[0].type).toBe('tool_result');
+      expect(toolResult.message?.content[0].tool_use_id).toBe(toolUseId);
+      expect(toolResult.message?.content[0].content).toBe('file1\nfile2');
+    });
+
+    it('adds output schema and max turn overrides when configured', async () => {
+      // Note: With full-permissions always on, these flags are no longer used
+      // This test now only verifies the basic CLI structure
+      // Using gpt-5.1-codex-max which should route to Codex (not Cursor)
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      await collectAsyncGenerator(
+        provider.executeQuery({
+          prompt: 'Test config',
+          model: 'gpt-5.1-codex-max',
+          cwd: '/tmp',
+          allowedTools: ['Read', 'Write'],
+          maxTurns: 5,
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      expect(call.args).toContain('exec'); // Should have exec subcommand
+      expect(call.args).toContain('--dangerously-bypass-approvals-and-sandbox'); // Should have YOLO flag
+      expect(call.args).toContain('--model');
+      expect(call.args).toContain('--json');
+    });
+
+    it('uses exec resume when sdkSessionId is provided', async () => {
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      await collectAsyncGenerator(
+        provider.executeQuery({
+          prompt: 'Continue',
+          model: 'gpt-5.2',
+          cwd: '/tmp',
+          sdkSessionId: 'codex-session-123',
+          outputFormat: { type: 'json_schema', schema: { type: 'object', properties: {} } },
+          codexSettings: { additionalDirs: ['/extra/dir'] },
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      expect(call.args[0]).toBe('exec');
+      expect(call.args[1]).toBe('resume');
+      expect(call.args).toContain('codex-session-123');
+      expect(call.args).toContain('--json');
+      // Resume queries must not include --output-schema or --add-dir
+      expect(call.args).not.toContain('--output-schema');
+      expect(call.args).not.toContain('--add-dir');
+    });
+
+    it('overrides approval policy when MCP auto-approval is enabled', async () => {
+      // Note: With full-permissions always on (--dangerously-bypass-approvals-and-sandbox),
+      // approval policy is bypassed, not configured via --config
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      await collectAsyncGenerator(
+        provider.executeQuery({
+          prompt: 'Test approvals',
+          model: 'gpt-5.1-codex-max',
+          cwd: '/tmp',
+          mcpServers: { mock: { type: 'stdio', command: 'node' } },
+          mcpAutoApproveTools: true,
+          codexSettings: { approvalPolicy: 'untrusted' },
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      const execIndex = call.args.indexOf(EXEC_SUBCOMMAND);
+      expect(call.args).toContain('--dangerously-bypass-approvals-and-sandbox'); // YOLO flag bypasses approval
+      expect(call.args).toContain('--model');
+      expect(call.args).toContain('--json');
+    });
+
+    it('injects user and project instructions when auto-load is enabled', async () => {
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      const userPath = path.join('/home/test/.codex', 'AGENTS.md');
+      const projectPath = path.join('/tmp/project', '.codex', 'AGENTS.md');
+      vi.mocked(secureFs.readFile).mockImplementation(async (filePath: string) => {
+        if (filePath === userPath) {
+          return 'User rules';
+        }
+        if (filePath === projectPath) {
+          return 'Project rules';
+        }
+        throw new Error('missing');
+      });
+
+      await collectAsyncGenerator(
+        provider.executeQuery({
+          prompt: 'Hello',
+          model: 'gpt-5.2',
+          cwd: '/tmp/project',
+          codexSettings: { autoLoadAgents: true },
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      const promptText = call.stdinData;
+      expect(promptText).toContain('User rules');
+      expect(promptText).toContain('Project rules');
+    });
+
+    it('disables sandbox mode when running in cloud storage paths', async () => {
+      // Note: With full-permissions always on (--dangerously-bypass-approvals-and-sandbox),
+      // sandbox mode is bypassed, not configured via --sandbox flag
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      const cloudPath = path.join(os.homedir(), 'Dropbox', 'project');
+      await collectAsyncGenerator(
+        provider.executeQuery({
+          prompt: 'Hello',
+          model: 'gpt-5.1-codex-max',
+          cwd: cloudPath,
+          codexSettings: { sandboxMode: 'workspace-write' },
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      // YOLO flag bypasses sandbox entirely
+      expect(call.args).toContain('--dangerously-bypass-approvals-and-sandbox');
+      expect(call.args).toContain('--model');
+      expect(call.args).toContain('--json');
+    });
+
+    it('uses the SDK when no tools are requested and an API key is present', async () => {
+      process.env[OPENAI_API_KEY_ENV] = 'sk-test';
+      // Override auth indicators so CLI-native auth doesn't take priority over API key
+      vi.mocked(getCodexAuthIndicators).mockResolvedValue({
+        hasAuthFile: false,
+        hasOAuthToken: false,
+        hasApiKey: false,
+      });
+      codexRunMock.mockResolvedValue({ finalResponse: 'Hello from SDK' });
+
+      const results = await collectAsyncGenerator<ProviderMessage>(
+        provider.executeQuery({
+          prompt: 'Hello',
+          model: 'gpt-5.2',
+          cwd: '/tmp',
+          allowedTools: [],
+        })
+      );
+
+      expect(results[0].message?.content[0].text).toBe('Hello from SDK');
+      expect(results[1].result).toBe('Hello from SDK');
+    });
+
+    it('uses the SDK when API key is present, even for tool requests (to avoid OAuth issues)', async () => {
+      process.env[OPENAI_API_KEY_ENV] = 'sk-test';
+      // Override auth indicators so CLI-native auth doesn't take priority over API key
+      vi.mocked(getCodexAuthIndicators).mockResolvedValue({
+        hasAuthFile: false,
+        hasOAuthToken: false,
+        hasApiKey: false,
+      });
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      await collectAsyncGenerator(
+        provider.executeQuery({
+          prompt: 'Read files',
+          model: 'gpt-5.2',
+          cwd: '/tmp',
+          allowedTools: ['Read'],
+        })
+      );
+
+      expect(codexRunMock).toHaveBeenCalled();
+      expect(spawnJSONLProcess).not.toHaveBeenCalled();
+    });
+
+    it('falls back to CLI when no tools are requested and no API key is available', async () => {
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      await collectAsyncGenerator(
+        provider.executeQuery({
+          prompt: 'Hello',
+          model: 'gpt-5.2',
+          cwd: '/tmp',
+          allowedTools: [],
+        })
+      );
+
+      expect(codexRunMock).not.toHaveBeenCalled();
+      expect(spawnJSONLProcess).toHaveBeenCalled();
+    });
+
+    it('passes extended timeout for high reasoning effort', async () => {
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      await collectAsyncGenerator(
+        provider.executeQuery({
+          prompt: 'Complex reasoning task',
+          model: 'gpt-5.1-codex-max',
+          cwd: '/tmp',
+          reasoningEffort: 'high',
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      // High reasoning effort should have 3x the CLI base timeout (120000ms)
+      // CODEX_CLI_TIMEOUT_MS = 120000, multiplier for 'high' = 3.0 → 360000ms
+      const CODEX_CLI_TIMEOUT_MS = 120000;
+      expect(call.timeout).toBe(CODEX_CLI_TIMEOUT_MS * REASONING_TIMEOUT_MULTIPLIERS.high);
+    });
+
+    it('passes extended timeout for xhigh reasoning effort', async () => {
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      await collectAsyncGenerator(
+        provider.executeQuery({
+          prompt: 'Very complex reasoning task',
+          model: 'gpt-5.1-codex-max',
+          cwd: '/tmp',
+          reasoningEffort: 'xhigh',
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      // xhigh reasoning effort uses 5-minute base timeout (300000ms) for feature generation
+      // then applies 4x multiplier: 300000 * 4.0 = 1200000ms (20 minutes)
+      const CODEX_FEATURE_GENERATION_BASE_TIMEOUT_MS = 300000;
+      expect(call.timeout).toBe(
+        CODEX_FEATURE_GENERATION_BASE_TIMEOUT_MS * REASONING_TIMEOUT_MULTIPLIERS.xhigh
+      );
+    });
+
+    it('uses default timeout when no reasoning effort is specified', async () => {
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      await collectAsyncGenerator(
+        provider.executeQuery({
+          prompt: 'Simple task',
+          model: 'gpt-5.2',
+          cwd: '/tmp',
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      // No reasoning effort should use the CLI base timeout (2 minutes)
+      // CODEX_CLI_TIMEOUT_MS = 120000ms, no multiplier applied
+      const CODEX_CLI_TIMEOUT_MS = 120000;
+      expect(call.timeout).toBe(CODEX_CLI_TIMEOUT_MS);
+    });
+  });
+
+  describe('calculateReasoningTimeout', () => {
+    it('returns default timeout when no reasoning effort is specified', () => {
+      expect(calculateReasoningTimeout()).toBe(DEFAULT_TIMEOUT_MS);
+      expect(calculateReasoningTimeout(undefined)).toBe(DEFAULT_TIMEOUT_MS);
+    });
+
+    it('returns default timeout for none reasoning effort', () => {
+      expect(calculateReasoningTimeout('none')).toBe(DEFAULT_TIMEOUT_MS);
+    });
+
+    it('applies correct multiplier for minimal reasoning effort', () => {
+      const expected = Math.round(DEFAULT_TIMEOUT_MS * REASONING_TIMEOUT_MULTIPLIERS.minimal);
+      expect(calculateReasoningTimeout('minimal')).toBe(expected);
+    });
+
+    it('applies correct multiplier for low reasoning effort', () => {
+      const expected = Math.round(DEFAULT_TIMEOUT_MS * REASONING_TIMEOUT_MULTIPLIERS.low);
+      expect(calculateReasoningTimeout('low')).toBe(expected);
+    });
+
+    it('applies correct multiplier for medium reasoning effort', () => {
+      const expected = Math.round(DEFAULT_TIMEOUT_MS * REASONING_TIMEOUT_MULTIPLIERS.medium);
+      expect(calculateReasoningTimeout('medium')).toBe(expected);
+    });
+
+    it('applies correct multiplier for high reasoning effort', () => {
+      const expected = Math.round(DEFAULT_TIMEOUT_MS * REASONING_TIMEOUT_MULTIPLIERS.high);
+      expect(calculateReasoningTimeout('high')).toBe(expected);
+    });
+
+    it('applies correct multiplier for xhigh reasoning effort', () => {
+      const expected = Math.round(DEFAULT_TIMEOUT_MS * REASONING_TIMEOUT_MULTIPLIERS.xhigh);
+      expect(calculateReasoningTimeout('xhigh')).toBe(expected);
+    });
+
+    it('uses custom base timeout when provided', () => {
+      const customBase = 60000;
+      expect(calculateReasoningTimeout('high', customBase)).toBe(
+        Math.round(customBase * REASONING_TIMEOUT_MULTIPLIERS.high)
+      );
+    });
+
+    it('falls back to 1.0 multiplier for invalid reasoning effort', () => {
+      // Test that invalid values fallback gracefully to default multiplier
+      // This tests the defensive ?? 1.0 in calculateReasoningTimeout
+      const invalidEffort = 'invalid_effort' as never;
+      expect(calculateReasoningTimeout(invalidEffort)).toBe(DEFAULT_TIMEOUT_MS);
+    });
+
+    it('produces expected absolute timeout values', () => {
+      // Verify the actual timeout values that will be used:
+      // none: 30000ms (30s)
+      // minimal: 36000ms (36s)
+      // low: 45000ms (45s)
+      // medium: 60000ms (1m)
+      // high: 90000ms (1m 30s)
+      // xhigh: 120000ms (2m)
+      expect(calculateReasoningTimeout('none')).toBe(30000);
+      expect(calculateReasoningTimeout('minimal')).toBe(36000);
+      expect(calculateReasoningTimeout('low')).toBe(45000);
+      expect(calculateReasoningTimeout('medium')).toBe(60000);
+      expect(calculateReasoningTimeout('high')).toBe(90000);
+      expect(calculateReasoningTimeout('xhigh')).toBe(120000);
+    });
+  });
+
+  describe('validateBareModelId integration', () => {
+    it('should allow codex- prefixed models for Codex provider with expectedProvider="codex"', () => {
+      expect(() => validateBareModelId('codex-gpt-4', 'CodexProvider', 'codex')).not.toThrow();
+      expect(() =>
+        validateBareModelId('codex-gpt-5.1-codex-max', 'CodexProvider', 'codex')
+      ).not.toThrow();
+    });
+
+    it('should reject other provider prefixes for Codex provider', () => {
+      expect(() => validateBareModelId('cursor-gpt-4', 'CodexProvider', 'codex')).toThrow();
+      expect(() => validateBareModelId('gemini-2.5-flash', 'CodexProvider', 'codex')).toThrow();
+      expect(() => validateBareModelId('copilot-gpt-4', 'CodexProvider', 'codex')).toThrow();
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/providers/copilot-provider.test.ts b/temp_repo/apps/server/tests/unit/providers/copilot-provider.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..54cdb49c60dbc7d440d22fb60de3c41b95108695
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/providers/copilot-provider.test.ts
@@ -0,0 +1,689 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { CopilotProvider, CopilotErrorCode } from '@/providers/copilot-provider.js';
+import { collectAsyncGenerator } from '../../utils/helpers.js';
+import { CopilotClient } from '@github/copilot-sdk';
+
+const createSessionMock = vi.fn();
+const resumeSessionMock = vi.fn();
+
+function createMockSession(sessionId = 'test-session') {
+  let eventHandler: ((event: any) => void) | null = null;
+  return {
+    sessionId,
+    send: vi.fn().mockImplementation(async () => {
+      if (eventHandler) {
+        eventHandler({ type: 'assistant.message', data: { content: 'hello' } });
+        eventHandler({ type: 'session.idle' });
+      }
+    }),
+    destroy: vi.fn().mockResolvedValue(undefined),
+    on: vi.fn().mockImplementation((handler: (event: any) => void) => {
+      eventHandler = handler;
+    }),
+  };
+}
+
+// Mock the Copilot SDK
+vi.mock('@github/copilot-sdk', () => ({
+  CopilotClient: vi.fn().mockImplementation(() => ({
+    start: vi.fn().mockResolvedValue(undefined),
+    stop: vi.fn().mockResolvedValue(undefined),
+    createSession: createSessionMock,
+    resumeSession: resumeSessionMock,
+  })),
+}));
+
+// Mock child_process with all needed exports
+vi.mock('child_process', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('child_process')>();
+  return {
+    ...actual,
+    execSync: vi.fn(),
+  };
+});
+
+// Mock fs (synchronous) for CLI detection (existsSync)
+vi.mock('fs', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('fs')>();
+  return {
+    ...actual,
+    existsSync: vi.fn().mockReturnValue(true),
+  };
+});
+
+// Mock fs/promises
+vi.mock('fs/promises', () => ({
+  access: vi.fn().mockRejectedValue(new Error('Not found')),
+  readFile: vi.fn().mockRejectedValue(new Error('Not found')),
+  mkdir: vi.fn().mockResolvedValue(undefined),
+}));
+
+// Import execSync after mocking
+import { execSync } from 'child_process';
+import * as fs from 'fs';
+
+describe('copilot-provider.ts', () => {
+  let provider: CopilotProvider;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(CopilotClient).mockImplementation(function () {
+      return {
+        start: vi.fn().mockResolvedValue(undefined),
+        stop: vi.fn().mockResolvedValue(undefined),
+        createSession: createSessionMock,
+        resumeSession: resumeSessionMock,
+      } as any;
+    });
+    createSessionMock.mockResolvedValue(createMockSession());
+    resumeSessionMock.mockResolvedValue(createMockSession('resumed-session'));
+
+    // Mock fs.existsSync for CLI path validation
+    vi.mocked(fs.existsSync).mockReturnValue(true);
+
+    // Mock CLI detection to find the CLI
+    // The CliProvider base class uses 'which copilot' (Unix) or 'where copilot' (Windows)
+    // to find the CLI path, then validates with fs.existsSync
+    vi.mocked(execSync).mockImplementation((cmd: string) => {
+      // CLI path detection (which/where command)
+      if (cmd.startsWith('which ') || cmd.startsWith('where ')) {
+        return '/usr/local/bin/copilot';
+      }
+      if (cmd.includes('--version')) {
+        return '1.0.0';
+      }
+      if (cmd.includes('gh auth status')) {
+        return 'Logged in to github.com account testuser';
+      }
+      if (cmd.includes('models list')) {
+        return JSON.stringify([{ id: 'claude-sonnet-4.5', name: 'Claude Sonnet 4.5' }]);
+      }
+      return '';
+    });
+
+    provider = new CopilotProvider();
+    delete process.env.GITHUB_TOKEN;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('getName', () => {
+    it("should return 'copilot' as provider name", () => {
+      expect(provider.getName()).toBe('copilot');
+    });
+  });
+
+  describe('getCliName', () => {
+    it("should return 'copilot' as CLI name", () => {
+      expect(provider.getCliName()).toBe('copilot');
+    });
+  });
+
+  describe('supportsFeature', () => {
+    it('should support tools feature', () => {
+      expect(provider.supportsFeature('tools')).toBe(true);
+    });
+
+    it('should support text feature', () => {
+      expect(provider.supportsFeature('text')).toBe(true);
+    });
+
+    it('should support streaming feature', () => {
+      expect(provider.supportsFeature('streaming')).toBe(true);
+    });
+
+    it('should NOT support vision feature (not implemented yet)', () => {
+      expect(provider.supportsFeature('vision')).toBe(false);
+    });
+
+    it('should not support unknown feature', () => {
+      expect(provider.supportsFeature('unknown')).toBe(false);
+    });
+  });
+
+  describe('getAvailableModels', () => {
+    it('should return static model definitions', () => {
+      const models = provider.getAvailableModels();
+      expect(Array.isArray(models)).toBe(true);
+      expect(models.length).toBeGreaterThan(0);
+
+      // All models should have required fields
+      models.forEach((model) => {
+        expect(model.id).toBeDefined();
+        expect(model.name).toBeDefined();
+        expect(model.provider).toBe('copilot');
+      });
+    });
+
+    it('should include copilot- prefix in model IDs', () => {
+      const models = provider.getAvailableModels();
+      models.forEach((model) => {
+        expect(model.id).toMatch(/^copilot-/);
+      });
+    });
+  });
+
+  describe('checkAuth', () => {
+    it('should return authenticated status when gh CLI is logged in', async () => {
+      // Set up mocks BEFORE creating provider to ensure CLI detection succeeds
+      vi.mocked(fs.existsSync).mockReturnValue(true);
+      vi.mocked(execSync).mockImplementation((cmd: string) => {
+        // CLI path detection (which/where command)
+        if (cmd.startsWith('which ') || cmd.startsWith('where ')) {
+          return '/usr/local/bin/copilot';
+        }
+        if (cmd.includes('--version')) {
+          return '1.0.0';
+        }
+        if (cmd.includes('gh auth status')) {
+          return 'Logged in to github.com account testuser';
+        }
+        return '';
+      });
+
+      // Create fresh provider with the mock in place
+      const freshProvider = new CopilotProvider();
+      const status = await freshProvider.checkAuth();
+      expect(status.authenticated).toBe(true);
+      expect(status.method).toBe('oauth');
+      expect(status.login).toBe('testuser');
+    });
+
+    it('should return unauthenticated when gh auth fails', async () => {
+      // Set up mocks BEFORE creating provider
+      vi.mocked(fs.existsSync).mockReturnValue(true);
+      vi.mocked(execSync).mockImplementation((cmd: string) => {
+        // CLI path detection (which/where command)
+        if (cmd.startsWith('which ') || cmd.startsWith('where ')) {
+          return '/usr/local/bin/copilot';
+        }
+        if (cmd.includes('--version')) {
+          return '1.0.0';
+        }
+        if (cmd.includes('gh auth status')) {
+          throw new Error('Not logged in');
+        }
+        if (cmd.includes('copilot auth status')) {
+          throw new Error('Not logged in');
+        }
+        return '';
+      });
+
+      // Create fresh provider with the mock in place
+      const freshProvider = new CopilotProvider();
+      const status = await freshProvider.checkAuth();
+      expect(status.authenticated).toBe(false);
+      expect(status.method).toBe('none');
+    });
+
+    it('should detect GITHUB_TOKEN environment variable', async () => {
+      process.env.GITHUB_TOKEN = 'test-token';
+
+      // Set up mocks BEFORE creating provider
+      vi.mocked(fs.existsSync).mockReturnValue(true);
+      vi.mocked(execSync).mockImplementation((cmd: string) => {
+        // CLI path detection (which/where command)
+        if (cmd.startsWith('which ') || cmd.startsWith('where ')) {
+          return '/usr/local/bin/copilot';
+        }
+        if (cmd.includes('--version')) {
+          return '1.0.0';
+        }
+        if (cmd.includes('gh auth status')) {
+          throw new Error('Not logged in');
+        }
+        if (cmd.includes('copilot auth status')) {
+          throw new Error('Not logged in');
+        }
+        return '';
+      });
+
+      // Create fresh provider with the mock in place
+      const freshProvider = new CopilotProvider();
+      const status = await freshProvider.checkAuth();
+      expect(status.authenticated).toBe(true);
+      expect(status.method).toBe('oauth');
+
+      delete process.env.GITHUB_TOKEN;
+    });
+  });
+
+  describe('detectInstallation', () => {
+    it('should detect installed CLI', async () => {
+      // Set up mocks BEFORE creating provider
+      vi.mocked(fs.existsSync).mockReturnValue(true);
+      vi.mocked(execSync).mockImplementation((cmd: string) => {
+        // CLI path detection (which/where command)
+        if (cmd.startsWith('which ') || cmd.startsWith('where ')) {
+          return '/usr/local/bin/copilot';
+        }
+        if (cmd.includes('--version')) {
+          return '1.2.3';
+        }
+        if (cmd.includes('gh auth status')) {
+          return 'Logged in to github.com account testuser';
+        }
+        return '';
+      });
+
+      // Create fresh provider with the mock in place
+      const freshProvider = new CopilotProvider();
+      const status = await freshProvider.detectInstallation();
+      expect(status.installed).toBe(true);
+      expect(status.version).toBe('1.2.3');
+      expect(status.authenticated).toBe(true);
+    });
+  });
+
+  describe('normalizeEvent', () => {
+    it('should normalize assistant.message event', () => {
+      const event = {
+        type: 'assistant.message',
+        data: { content: 'Hello, world!' },
+      };
+
+      const result = provider.normalizeEvent(event);
+      expect(result).toEqual({
+        type: 'assistant',
+        message: {
+          role: 'assistant',
+          content: [{ type: 'text', text: 'Hello, world!' }],
+        },
+      });
+    });
+
+    it('should skip assistant.message_delta event', () => {
+      const event = {
+        type: 'assistant.message_delta',
+        data: { delta: 'partial' },
+      };
+
+      const result = provider.normalizeEvent(event);
+      expect(result).toBeNull();
+    });
+
+    it('should normalize tool.execution_start event', () => {
+      const event = {
+        type: 'tool.execution_start',
+        data: {
+          toolName: 'read_file',
+          toolCallId: 'call-123',
+          input: { path: '/test/file.txt' },
+        },
+      };
+
+      const result = provider.normalizeEvent(event);
+      expect(result).toEqual({
+        type: 'assistant',
+        message: {
+          role: 'assistant',
+          content: [
+            {
+              type: 'tool_use',
+              name: 'Read', // Normalized from read_file
+              tool_use_id: 'call-123',
+              input: { path: '/test/file.txt', file_path: '/test/file.txt' }, // Path normalized
+            },
+          ],
+        },
+      });
+    });
+
+    it('should normalize tool.execution_complete event', () => {
+      const event = {
+        type: 'tool.execution_complete',
+        data: {
+          toolCallId: 'call-123',
+          success: true,
+          result: {
+            content: 'file content',
+          },
+        },
+      };
+
+      const result = provider.normalizeEvent(event);
+      expect(result).toEqual({
+        type: 'assistant',
+        message: {
+          role: 'assistant',
+          content: [
+            {
+              type: 'tool_result',
+              tool_use_id: 'call-123',
+              content: 'file content',
+            },
+          ],
+        },
+      });
+    });
+
+    it('should handle tool.execution_complete with error', () => {
+      const event = {
+        type: 'tool.execution_complete',
+        data: {
+          toolCallId: 'call-456',
+          success: false,
+          error: {
+            message: 'Command failed',
+          },
+        },
+      };
+
+      const result = provider.normalizeEvent(event);
+      expect(result?.message?.content?.[0]).toMatchObject({
+        type: 'tool_result',
+        tool_use_id: 'call-456',
+        content: '[ERROR] Command failed',
+      });
+    });
+
+    it('should handle tool.execution_complete with empty result', () => {
+      const event = {
+        type: 'tool.execution_complete',
+        data: {
+          toolCallId: 'call-789',
+          success: true,
+          result: {
+            content: '',
+          },
+        },
+      };
+
+      const result = provider.normalizeEvent(event);
+      expect(result?.message?.content?.[0]).toMatchObject({
+        type: 'tool_result',
+        tool_use_id: 'call-789',
+        content: '',
+      });
+    });
+
+    it('should handle tool.execution_complete with missing result', () => {
+      const event = {
+        type: 'tool.execution_complete',
+        data: {
+          toolCallId: 'call-999',
+          success: true,
+          // No result field
+        },
+      };
+
+      const result = provider.normalizeEvent(event);
+      expect(result?.message?.content?.[0]).toMatchObject({
+        type: 'tool_result',
+        tool_use_id: 'call-999',
+        content: '',
+      });
+    });
+
+    it('should handle tool.execution_complete with error code', () => {
+      const event = {
+        type: 'tool.execution_complete',
+        data: {
+          toolCallId: 'call-567',
+          success: false,
+          error: {
+            message: 'Permission denied',
+            code: 'EACCES',
+          },
+        },
+      };
+
+      const result = provider.normalizeEvent(event);
+      expect(result?.message?.content?.[0]).toMatchObject({
+        type: 'tool_result',
+        tool_use_id: 'call-567',
+        content: '[ERROR] Permission denied (EACCES)',
+      });
+    });
+
+    it('should normalize session.idle to success result', () => {
+      const event = { type: 'session.idle' };
+
+      const result = provider.normalizeEvent(event);
+      expect(result).toEqual({
+        type: 'result',
+        subtype: 'success',
+      });
+    });
+
+    it('should normalize session.error to error event', () => {
+      const event = {
+        type: 'session.error',
+        data: { message: 'Something went wrong' },
+      };
+
+      const result = provider.normalizeEvent(event);
+      expect(result).toEqual({
+        type: 'error',
+        error: 'Something went wrong',
+      });
+    });
+
+    it('should use error code in fallback when session.error message is empty', () => {
+      const event = {
+        type: 'session.error',
+        data: { message: '', code: 'RATE_LIMIT_EXCEEDED' },
+      };
+
+      const result = provider.normalizeEvent(event);
+      expect(result).not.toBeNull();
+      expect(result!.type).toBe('error');
+      expect(result!.error).toContain('RATE_LIMIT_EXCEEDED');
+      expect(result!.error).not.toBe('Unknown error');
+    });
+
+    it('should return generic "Copilot agent error" fallback when both message and code are empty', () => {
+      const event = {
+        type: 'session.error',
+        data: { message: '', code: '' },
+      };
+
+      const result = provider.normalizeEvent(event);
+      expect(result).not.toBeNull();
+      expect(result!.type).toBe('error');
+      expect(result!.error).toBe('Copilot agent error');
+      // Must NOT be the old opaque 'Unknown error'
+      expect(result!.error).not.toBe('Unknown error');
+    });
+
+    it('should return generic "Copilot agent error" fallback when data has no code field', () => {
+      const event = {
+        type: 'session.error',
+        data: { message: '' },
+      };
+
+      const result = provider.normalizeEvent(event);
+      expect(result).not.toBeNull();
+      expect(result!.type).toBe('error');
+      expect(result!.error).toBe('Copilot agent error');
+    });
+
+    it('should return null for unknown event types', () => {
+      const event = { type: 'unknown.event' };
+
+      const result = provider.normalizeEvent(event);
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('mapError', () => {
+    it('should map authentication errors', () => {
+      const errorInfo = (provider as any).mapError('not authenticated', null);
+      expect(errorInfo.code).toBe(CopilotErrorCode.NOT_AUTHENTICATED);
+      expect(errorInfo.recoverable).toBe(true);
+    });
+
+    it('should map rate limit errors', () => {
+      const errorInfo = (provider as any).mapError('rate limit exceeded', null);
+      expect(errorInfo.code).toBe(CopilotErrorCode.RATE_LIMITED);
+      expect(errorInfo.recoverable).toBe(true);
+    });
+
+    it('should map model unavailable errors', () => {
+      const errorInfo = (provider as any).mapError('model not available', null);
+      expect(errorInfo.code).toBe(CopilotErrorCode.MODEL_UNAVAILABLE);
+      expect(errorInfo.recoverable).toBe(true);
+    });
+
+    it('should map network errors', () => {
+      const errorInfo = (provider as any).mapError('connection refused', null);
+      expect(errorInfo.code).toBe(CopilotErrorCode.NETWORK_ERROR);
+      expect(errorInfo.recoverable).toBe(true);
+    });
+
+    it('should map process crash (exit code 137)', () => {
+      const errorInfo = (provider as any).mapError('', 137);
+      expect(errorInfo.code).toBe(CopilotErrorCode.PROCESS_CRASHED);
+      expect(errorInfo.recoverable).toBe(true);
+    });
+
+    it('should return unknown error for unrecognized errors', () => {
+      const errorInfo = (provider as any).mapError('some random error', 1);
+      expect(errorInfo.code).toBe(CopilotErrorCode.UNKNOWN);
+      expect(errorInfo.recoverable).toBe(false);
+    });
+  });
+
+  describe('model cache', () => {
+    it('should indicate when cache is empty', () => {
+      expect(provider.hasCachedModels()).toBe(false);
+    });
+
+    it('should clear model cache', () => {
+      provider.clearModelCache();
+      expect(provider.hasCachedModels()).toBe(false);
+    });
+  });
+
+  describe('tool name normalization', () => {
+    it('should normalize read_file to Read', () => {
+      const event = {
+        type: 'tool.execution_start',
+        data: { toolName: 'read_file', toolCallId: 'id', input: {} },
+      };
+      const result = provider.normalizeEvent(event);
+      expect(result?.message?.content?.[0]).toMatchObject({ name: 'Read' });
+    });
+
+    it('should normalize write_file to Write', () => {
+      const event = {
+        type: 'tool.execution_start',
+        data: { toolName: 'write_file', toolCallId: 'id', input: {} },
+      };
+      const result = provider.normalizeEvent(event);
+      expect(result?.message?.content?.[0]).toMatchObject({ name: 'Write' });
+    });
+
+    it('should normalize run_shell to Bash', () => {
+      const event = {
+        type: 'tool.execution_start',
+        data: { toolName: 'run_shell', toolCallId: 'id', input: {} },
+      };
+      const result = provider.normalizeEvent(event);
+      expect(result?.message?.content?.[0]).toMatchObject({ name: 'Bash' });
+    });
+
+    it('should normalize search to Grep', () => {
+      const event = {
+        type: 'tool.execution_start',
+        data: { toolName: 'search', toolCallId: 'id', input: {} },
+      };
+      const result = provider.normalizeEvent(event);
+      expect(result?.message?.content?.[0]).toMatchObject({ name: 'Grep' });
+    });
+
+    it('should normalize todo_write to TodoWrite', () => {
+      const event = {
+        type: 'tool.execution_start',
+        data: {
+          toolName: 'todo_write',
+          toolCallId: 'id',
+          input: {
+            todos: [{ description: 'Test task', status: 'pending' }],
+          },
+        },
+      };
+      const result = provider.normalizeEvent(event);
+      expect(result?.message?.content?.[0]).toMatchObject({ name: 'TodoWrite' });
+    });
+
+    it('should normalize todo content from description', () => {
+      const event = {
+        type: 'tool.execution_start',
+        data: {
+          toolName: 'todo_write',
+          toolCallId: 'id',
+          input: {
+            todos: [{ description: 'Test task', status: 'pending' }],
+          },
+        },
+      };
+      const result = provider.normalizeEvent(event);
+      const todoInput = (result?.message?.content?.[0] as any)?.input;
+      expect(todoInput.todos[0]).toMatchObject({
+        content: 'Test task',
+        status: 'pending',
+        activeForm: 'Test task',
+      });
+    });
+
+    it('should map cancelled status to completed', () => {
+      const event = {
+        type: 'tool.execution_start',
+        data: {
+          toolName: 'todo_write',
+          toolCallId: 'id',
+          input: {
+            todos: [{ description: 'Cancelled task', status: 'cancelled' }],
+          },
+        },
+      };
+      const result = provider.normalizeEvent(event);
+      const todoInput = (result?.message?.content?.[0] as any)?.input;
+      expect(todoInput.todos[0].status).toBe('completed');
+    });
+  });
+
+  describe('executeQuery resume behavior', () => {
+    it('uses resumeSession when sdkSessionId is provided', async () => {
+      const results = await collectAsyncGenerator(
+        provider.executeQuery({
+          prompt: 'Hello',
+          model: 'claude-sonnet-4.6',
+          cwd: '/tmp/project',
+          sdkSessionId: 'session-123',
+        })
+      );
+
+      expect(resumeSessionMock).toHaveBeenCalledWith(
+        'session-123',
+        expect.objectContaining({ model: 'claude-sonnet-4.6', streaming: true })
+      );
+      expect(createSessionMock).not.toHaveBeenCalled();
+      expect(results.some((msg) => msg.session_id === 'resumed-session')).toBe(true);
+    });
+
+    it('falls back to createSession when resumeSession fails', async () => {
+      resumeSessionMock.mockRejectedValueOnce(new Error('session not found'));
+      createSessionMock.mockResolvedValueOnce(createMockSession('fresh-session'));
+
+      const results = await collectAsyncGenerator(
+        provider.executeQuery({
+          prompt: 'Hello',
+          model: 'claude-sonnet-4.6',
+          cwd: '/tmp/project',
+          sdkSessionId: 'stale-session',
+        })
+      );
+
+      expect(resumeSessionMock).toHaveBeenCalledWith(
+        'stale-session',
+        expect.objectContaining({ model: 'claude-sonnet-4.6', streaming: true })
+      );
+      expect(createSessionMock).toHaveBeenCalledTimes(1);
+      expect(results.some((msg) => msg.session_id === 'fresh-session')).toBe(true);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/providers/cursor-config-manager.test.ts b/temp_repo/apps/server/tests/unit/providers/cursor-config-manager.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..114854098ac06a420bcce66960e836234677a78c
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/providers/cursor-config-manager.test.ts
@@ -0,0 +1,352 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import * as fs from 'fs';
+import * as path from 'path';
+import os from 'os';
+import { CursorConfigManager } from '@/providers/cursor-config-manager.js';
+
+vi.mock('fs');
+vi.mock('@automaker/platform', () => ({
+  getAutomakerDir: vi.fn((projectPath: string) => path.join(projectPath, '.automaker')),
+}));
+
+describe('cursor-config-manager.ts', () => {
+  // Use platform-agnostic paths
+  const testProjectPath = path.join(os.tmpdir(), 'test-project');
+  const expectedConfigPath = path.join(testProjectPath, '.automaker', 'cursor-config.json');
+  let manager: CursorConfigManager;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Default: no existing config file
+    vi.mocked(fs.existsSync).mockReturnValue(false);
+    vi.mocked(fs.mkdirSync).mockReturnValue(undefined);
+    vi.mocked(fs.writeFileSync).mockReturnValue(undefined);
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  describe('constructor', () => {
+    it('should load existing config from disk', () => {
+      const existingConfig = {
+        defaultModel: 'claude-3-5-sonnet',
+        models: ['auto', 'claude-3-5-sonnet'],
+      };
+
+      vi.mocked(fs.existsSync).mockReturnValue(true);
+      vi.mocked(fs.readFileSync).mockReturnValue(JSON.stringify(existingConfig));
+
+      manager = new CursorConfigManager(testProjectPath);
+
+      expect(fs.existsSync).toHaveBeenCalledWith(expectedConfigPath);
+      expect(fs.readFileSync).toHaveBeenCalledWith(expectedConfigPath, 'utf8');
+      expect(manager.getConfig()).toEqual(existingConfig);
+    });
+
+    it('should use default config if file does not exist', () => {
+      vi.mocked(fs.existsSync).mockReturnValue(false);
+
+      manager = new CursorConfigManager(testProjectPath);
+
+      const config = manager.getConfig();
+      expect(config.defaultModel).toBe('cursor-auto');
+      expect(config.models).toContain('cursor-auto');
+    });
+
+    it('should use default config if file read fails', () => {
+      vi.mocked(fs.existsSync).mockReturnValue(true);
+      vi.mocked(fs.readFileSync).mockImplementation(() => {
+        throw new Error('Read error');
+      });
+
+      manager = new CursorConfigManager(testProjectPath);
+
+      expect(manager.getDefaultModel()).toBe('cursor-auto');
+    });
+
+    it('should use default config if JSON parse fails', () => {
+      vi.mocked(fs.existsSync).mockReturnValue(true);
+      vi.mocked(fs.readFileSync).mockReturnValue('invalid json');
+
+      manager = new CursorConfigManager(testProjectPath);
+
+      expect(manager.getDefaultModel()).toBe('cursor-auto');
+    });
+  });
+
+  describe('getConfig', () => {
+    it('should return a copy of the config', () => {
+      manager = new CursorConfigManager(testProjectPath);
+
+      const config1 = manager.getConfig();
+      const config2 = manager.getConfig();
+
+      expect(config1).toEqual(config2);
+      expect(config1).not.toBe(config2); // Different objects
+    });
+  });
+
+  describe('getDefaultModel / setDefaultModel', () => {
+    beforeEach(() => {
+      manager = new CursorConfigManager(testProjectPath);
+    });
+
+    it('should return default model', () => {
+      expect(manager.getDefaultModel()).toBe('cursor-auto');
+    });
+
+    it('should set and persist default model', () => {
+      manager.setDefaultModel('claude-3-5-sonnet');
+
+      expect(manager.getDefaultModel()).toBe('claude-3-5-sonnet');
+      expect(fs.writeFileSync).toHaveBeenCalled();
+    });
+
+    it('should return cursor-auto if defaultModel is undefined', () => {
+      vi.mocked(fs.existsSync).mockReturnValue(true);
+      vi.mocked(fs.readFileSync).mockReturnValue(JSON.stringify({ models: ['cursor-auto'] }));
+
+      manager = new CursorConfigManager(testProjectPath);
+
+      expect(manager.getDefaultModel()).toBe('cursor-auto');
+    });
+  });
+
+  describe('getEnabledModels / setEnabledModels', () => {
+    beforeEach(() => {
+      manager = new CursorConfigManager(testProjectPath);
+    });
+
+    it('should return enabled models', () => {
+      const models = manager.getEnabledModels();
+      expect(Array.isArray(models)).toBe(true);
+      expect(models).toContain('cursor-auto');
+    });
+
+    it('should set enabled models', () => {
+      manager.setEnabledModels(['claude-3-5-sonnet', 'gpt-4o']);
+
+      expect(manager.getEnabledModels()).toEqual(['claude-3-5-sonnet', 'gpt-4o']);
+      expect(fs.writeFileSync).toHaveBeenCalled();
+    });
+
+    it('should return [cursor-auto] if models is undefined', () => {
+      vi.mocked(fs.existsSync).mockReturnValue(true);
+      vi.mocked(fs.readFileSync).mockReturnValue(JSON.stringify({ defaultModel: 'cursor-auto' }));
+
+      manager = new CursorConfigManager(testProjectPath);
+
+      expect(manager.getEnabledModels()).toEqual(['cursor-auto']);
+    });
+  });
+
+  describe('addModel', () => {
+    beforeEach(() => {
+      vi.mocked(fs.existsSync).mockReturnValue(true);
+      vi.mocked(fs.readFileSync).mockReturnValue(
+        JSON.stringify({
+          defaultModel: 'cursor-auto',
+          models: ['cursor-auto'],
+        })
+      );
+      manager = new CursorConfigManager(testProjectPath);
+    });
+
+    it('should add a new model', () => {
+      manager.addModel('claude-3-5-sonnet');
+
+      expect(manager.getEnabledModels()).toContain('claude-3-5-sonnet');
+      expect(fs.writeFileSync).toHaveBeenCalled();
+    });
+
+    it('should not add duplicate models', () => {
+      manager.addModel('cursor-auto');
+
+      // Should not save if model already exists
+      expect(fs.writeFileSync).not.toHaveBeenCalled();
+    });
+
+    it('should initialize models array if undefined', () => {
+      vi.mocked(fs.readFileSync).mockReturnValue(JSON.stringify({ defaultModel: 'cursor-auto' }));
+      manager = new CursorConfigManager(testProjectPath);
+
+      manager.addModel('claude-3-5-sonnet');
+
+      expect(manager.getEnabledModels()).toContain('claude-3-5-sonnet');
+    });
+  });
+
+  describe('removeModel', () => {
+    beforeEach(() => {
+      vi.mocked(fs.existsSync).mockReturnValue(true);
+      vi.mocked(fs.readFileSync).mockReturnValue(
+        JSON.stringify({
+          defaultModel: 'auto',
+          models: ['auto', 'claude-3-5-sonnet', 'gpt-4o'],
+        })
+      );
+      manager = new CursorConfigManager(testProjectPath);
+    });
+
+    it('should remove a model', () => {
+      manager.removeModel('gpt-4o');
+
+      expect(manager.getEnabledModels()).not.toContain('gpt-4o');
+      expect(fs.writeFileSync).toHaveBeenCalled();
+    });
+
+    it('should handle removing non-existent model', () => {
+      manager.removeModel('non-existent' as any);
+
+      // Should still save (filtering happens regardless)
+      expect(fs.writeFileSync).toHaveBeenCalled();
+    });
+
+    it('should do nothing if models array is undefined', () => {
+      vi.mocked(fs.readFileSync).mockReturnValue(JSON.stringify({ defaultModel: 'auto' }));
+      manager = new CursorConfigManager(testProjectPath);
+
+      manager.removeModel('auto');
+
+      expect(fs.writeFileSync).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('isModelEnabled', () => {
+    beforeEach(() => {
+      vi.mocked(fs.existsSync).mockReturnValue(true);
+      vi.mocked(fs.readFileSync).mockReturnValue(
+        JSON.stringify({
+          defaultModel: 'auto',
+          models: ['auto', 'claude-3-5-sonnet'],
+        })
+      );
+      manager = new CursorConfigManager(testProjectPath);
+    });
+
+    it('should return true for enabled model', () => {
+      expect(manager.isModelEnabled('auto')).toBe(true);
+      expect(manager.isModelEnabled('claude-3-5-sonnet')).toBe(true);
+    });
+
+    it('should return false for disabled model', () => {
+      expect(manager.isModelEnabled('gpt-4o')).toBe(false);
+    });
+
+    it('should return false if models is undefined', () => {
+      vi.mocked(fs.readFileSync).mockReturnValue(JSON.stringify({ defaultModel: 'auto' }));
+      manager = new CursorConfigManager(testProjectPath);
+
+      expect(manager.isModelEnabled('auto')).toBe(false);
+    });
+  });
+
+  describe('getMcpServers / setMcpServers', () => {
+    beforeEach(() => {
+      manager = new CursorConfigManager(testProjectPath);
+    });
+
+    it('should return empty array by default', () => {
+      expect(manager.getMcpServers()).toEqual([]);
+    });
+
+    it('should set and get MCP servers', () => {
+      manager.setMcpServers(['server1', 'server2']);
+
+      expect(manager.getMcpServers()).toEqual(['server1', 'server2']);
+      expect(fs.writeFileSync).toHaveBeenCalled();
+    });
+  });
+
+  describe('getRules / setRules', () => {
+    beforeEach(() => {
+      manager = new CursorConfigManager(testProjectPath);
+    });
+
+    it('should return empty array by default', () => {
+      expect(manager.getRules()).toEqual([]);
+    });
+
+    it('should set and get rules', () => {
+      manager.setRules(['.cursorrules', 'rules.md']);
+
+      expect(manager.getRules()).toEqual(['.cursorrules', 'rules.md']);
+      expect(fs.writeFileSync).toHaveBeenCalled();
+    });
+  });
+
+  describe('reset', () => {
+    beforeEach(() => {
+      vi.mocked(fs.existsSync).mockReturnValue(true);
+      vi.mocked(fs.readFileSync).mockReturnValue(
+        JSON.stringify({
+          defaultModel: 'claude-3-5-sonnet',
+          models: ['claude-3-5-sonnet'],
+          mcpServers: ['server1'],
+          rules: ['rules.md'],
+        })
+      );
+      manager = new CursorConfigManager(testProjectPath);
+    });
+
+    it('should reset to default values', () => {
+      manager.reset();
+
+      expect(manager.getDefaultModel()).toBe('cursor-auto');
+      expect(manager.getMcpServers()).toEqual([]);
+      expect(manager.getRules()).toEqual([]);
+      expect(fs.writeFileSync).toHaveBeenCalled();
+    });
+  });
+
+  describe('exists', () => {
+    it('should return true if config file exists', () => {
+      vi.mocked(fs.existsSync).mockReturnValue(true);
+      manager = new CursorConfigManager(testProjectPath);
+
+      vi.mocked(fs.existsSync).mockReturnValue(true);
+      expect(manager.exists()).toBe(true);
+    });
+
+    it('should return false if config file does not exist', () => {
+      manager = new CursorConfigManager(testProjectPath);
+
+      vi.mocked(fs.existsSync).mockReturnValue(false);
+      expect(manager.exists()).toBe(false);
+    });
+  });
+
+  describe('getConfigPath', () => {
+    it('should return the config file path', () => {
+      manager = new CursorConfigManager(testProjectPath);
+
+      expect(manager.getConfigPath()).toBe(expectedConfigPath);
+    });
+  });
+
+  describe('saveConfig', () => {
+    it('should create directory if it does not exist', () => {
+      vi.mocked(fs.existsSync)
+        .mockReturnValueOnce(false) // For loadConfig
+        .mockReturnValueOnce(false); // For directory check in saveConfig
+
+      manager = new CursorConfigManager(testProjectPath);
+      manager.setDefaultModel('claude-3-5-sonnet');
+
+      expect(fs.mkdirSync).toHaveBeenCalledWith(path.dirname(expectedConfigPath), {
+        recursive: true,
+      });
+    });
+
+    it('should throw error on write failure', () => {
+      manager = new CursorConfigManager(testProjectPath);
+
+      vi.mocked(fs.writeFileSync).mockImplementation(() => {
+        throw new Error('Write failed');
+      });
+
+      expect(() => manager.setDefaultModel('claude-3-5-sonnet')).toThrow('Write failed');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/providers/cursor-provider.test.ts b/temp_repo/apps/server/tests/unit/providers/cursor-provider.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..846ac69be2593fb325f9be1d86bbadf80c0fd5da
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/providers/cursor-provider.test.ts
@@ -0,0 +1,235 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { CursorProvider } from '@/providers/cursor-provider.js';
+import { validateBareModelId } from '@automaker/types';
+
+describe('cursor-provider.ts', () => {
+  describe('buildCliArgs', () => {
+    it('adds --resume when sdkSessionId is provided', () => {
+      const provider = Object.create(CursorProvider.prototype) as CursorProvider & {
+        cliPath?: string;
+      };
+      provider.cliPath = '/usr/local/bin/cursor-agent';
+
+      const args = provider.buildCliArgs({
+        prompt: 'Continue the task',
+        model: 'gpt-5',
+        cwd: '/tmp/project',
+        sdkSessionId: 'cursor-session-123',
+      });
+
+      const resumeIndex = args.indexOf('--resume');
+      expect(resumeIndex).toBeGreaterThan(-1);
+      expect(args[resumeIndex + 1]).toBe('cursor-session-123');
+    });
+
+    it('does not add --resume when sdkSessionId is omitted', () => {
+      const provider = Object.create(CursorProvider.prototype) as CursorProvider & {
+        cliPath?: string;
+      };
+      provider.cliPath = '/usr/local/bin/cursor-agent';
+
+      const args = provider.buildCliArgs({
+        prompt: 'Start a new task',
+        model: 'gpt-5',
+        cwd: '/tmp/project',
+      });
+
+      expect(args).not.toContain('--resume');
+    });
+  });
+
+  describe('normalizeEvent - result error handling', () => {
+    let provider: CursorProvider;
+
+    beforeEach(() => {
+      provider = Object.create(CursorProvider.prototype) as CursorProvider;
+    });
+
+    it('returns error message from resultEvent.error when is_error=true', () => {
+      const event = {
+        type: 'result',
+        is_error: true,
+        error: 'Rate limit exceeded',
+        result: '',
+        subtype: 'error',
+        duration_ms: 3000,
+        session_id: 'sess-123',
+      };
+
+      const msg = provider.normalizeEvent(event);
+
+      expect(msg).not.toBeNull();
+      expect(msg!.type).toBe('error');
+      expect(msg!.error).toBe('Rate limit exceeded');
+    });
+
+    it('falls back to resultEvent.result when error field is empty and is_error=true', () => {
+      const event = {
+        type: 'result',
+        is_error: true,
+        error: '',
+        result: 'Process terminated unexpectedly',
+        subtype: 'error',
+        duration_ms: 5000,
+        session_id: 'sess-456',
+      };
+
+      const msg = provider.normalizeEvent(event);
+
+      expect(msg).not.toBeNull();
+      expect(msg!.type).toBe('error');
+      expect(msg!.error).toBe('Process terminated unexpectedly');
+    });
+
+    it('builds diagnostic fallback when both error and result are empty and is_error=true', () => {
+      const event = {
+        type: 'result',
+        is_error: true,
+        error: '',
+        result: '',
+        subtype: 'error',
+        duration_ms: 5000,
+        session_id: 'sess-789',
+      };
+
+      const msg = provider.normalizeEvent(event);
+
+      expect(msg).not.toBeNull();
+      expect(msg!.type).toBe('error');
+      // Should contain diagnostic info rather than 'Unknown error'
+      expect(msg!.error).toContain('5000ms');
+      expect(msg!.error).toContain('sess-789');
+      expect(msg!.error).not.toBe('Unknown error');
+    });
+
+    it('preserves session_id in error message', () => {
+      const event = {
+        type: 'result',
+        is_error: true,
+        error: 'Timeout occurred',
+        result: '',
+        subtype: 'error',
+        duration_ms: 30000,
+        session_id: 'my-session-id',
+      };
+
+      const msg = provider.normalizeEvent(event);
+
+      expect(msg!.session_id).toBe('my-session-id');
+    });
+
+    it('uses "none" when session_id is missing from diagnostic fallback', () => {
+      const event = {
+        type: 'result',
+        is_error: true,
+        error: '',
+        result: '',
+        subtype: 'error',
+        duration_ms: 5000,
+        // session_id intentionally omitted
+      };
+
+      const msg = provider.normalizeEvent(event);
+
+      expect(msg).not.toBeNull();
+      expect(msg!.type).toBe('error');
+      expect(msg!.error).toContain('none');
+      expect(msg!.error).not.toContain('undefined');
+    });
+
+    it('returns success result when is_error=false', () => {
+      const event = {
+        type: 'result',
+        is_error: false,
+        error: '',
+        result: 'Completed successfully',
+        subtype: 'success',
+        duration_ms: 2000,
+        session_id: 'sess-ok',
+      };
+
+      const msg = provider.normalizeEvent(event);
+
+      expect(msg).not.toBeNull();
+      expect(msg!.type).toBe('result');
+      expect(msg!.subtype).toBe('success');
+    });
+  });
+
+  describe('Cursor Gemini models support', () => {
+    let provider: CursorProvider;
+
+    beforeEach(() => {
+      provider = Object.create(CursorProvider.prototype) as CursorProvider & {
+        cliPath?: string;
+      };
+      provider.cliPath = '/usr/local/bin/cursor-agent';
+    });
+
+    describe('buildCliArgs with Cursor Gemini models', () => {
+      it('should handle cursor-gemini-3-pro model', () => {
+        const args = provider.buildCliArgs({
+          prompt: 'Write a function',
+          model: 'gemini-3-pro', // Bare model ID after stripping cursor- prefix
+          cwd: '/tmp/project',
+        });
+
+        const modelIndex = args.indexOf('--model');
+        expect(modelIndex).toBeGreaterThan(-1);
+        expect(args[modelIndex + 1]).toBe('gemini-3-pro');
+      });
+
+      it('should handle cursor-gemini-3-flash model', () => {
+        const args = provider.buildCliArgs({
+          prompt: 'Quick task',
+          model: 'gemini-3-flash', // Bare model ID after stripping cursor- prefix
+          cwd: '/tmp/project',
+        });
+
+        const modelIndex = args.indexOf('--model');
+        expect(modelIndex).toBeGreaterThan(-1);
+        expect(args[modelIndex + 1]).toBe('gemini-3-flash');
+      });
+
+      it('should include --resume with Cursor Gemini models when sdkSessionId is provided', () => {
+        const args = provider.buildCliArgs({
+          prompt: 'Continue task',
+          model: 'gemini-3-pro',
+          cwd: '/tmp/project',
+          sdkSessionId: 'cursor-gemini-session-123',
+        });
+
+        const resumeIndex = args.indexOf('--resume');
+        expect(resumeIndex).toBeGreaterThan(-1);
+        expect(args[resumeIndex + 1]).toBe('cursor-gemini-session-123');
+      });
+    });
+
+    describe('validateBareModelId with Cursor Gemini models', () => {
+      it('should allow gemini- prefixed models for Cursor provider with expectedProvider="cursor"', () => {
+        // This is the key fix - Cursor Gemini models have bare IDs like "gemini-3-pro"
+        expect(() => validateBareModelId('gemini-3-pro', 'CursorProvider', 'cursor')).not.toThrow();
+        expect(() =>
+          validateBareModelId('gemini-3-flash', 'CursorProvider', 'cursor')
+        ).not.toThrow();
+      });
+
+      it('should still reject other provider prefixes for Cursor provider', () => {
+        expect(() => validateBareModelId('codex-gpt-4', 'CursorProvider', 'cursor')).toThrow();
+        expect(() => validateBareModelId('copilot-gpt-4', 'CursorProvider', 'cursor')).toThrow();
+        expect(() => validateBareModelId('opencode-gpt-4', 'CursorProvider', 'cursor')).toThrow();
+      });
+
+      it('should accept cursor- prefixed models when expectedProvider is "cursor" (for double-prefix validation)', () => {
+        // Note: When expectedProvider="cursor", we skip the cursor- prefix check
+        // This is intentional because the validation happens AFTER prefix stripping
+        // So if cursor-gemini-3-pro reaches validateBareModelId with expectedProvider="cursor",
+        // it means the prefix was NOT properly stripped, but we skip it anyway
+        // since we're checking if the Cursor provider itself can receive cursor- prefixed models
+        expect(() =>
+          validateBareModelId('cursor-gemini-3-pro', 'CursorProvider', 'cursor')
+        ).not.toThrow();
+      });
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/providers/gemini-provider.test.ts b/temp_repo/apps/server/tests/unit/providers/gemini-provider.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5dffc56882f59b2f0699f4ae659538768cb90e2e
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/providers/gemini-provider.test.ts
@@ -0,0 +1,272 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { GeminiProvider } from '@/providers/gemini-provider.js';
+import type { ProviderMessage } from '@automaker/types';
+import { validateBareModelId } from '@automaker/types';
+
+describe('gemini-provider.ts', () => {
+  let provider: GeminiProvider;
+
+  beforeEach(() => {
+    provider = new GeminiProvider();
+  });
+
+  describe('buildCliArgs', () => {
+    it('should include --prompt with empty string to force headless mode', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Hello from Gemini',
+        model: '2.5-flash',
+        cwd: '/tmp/project',
+      });
+
+      const promptIndex = args.indexOf('--prompt');
+      expect(promptIndex).toBeGreaterThan(-1);
+      expect(args[promptIndex + 1]).toBe('');
+    });
+
+    it('should include --resume when sdkSessionId is provided', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Hello',
+        model: '2.5-flash',
+        cwd: '/tmp/project',
+        sdkSessionId: 'gemini-session-123',
+      });
+
+      const resumeIndex = args.indexOf('--resume');
+      expect(resumeIndex).toBeGreaterThan(-1);
+      expect(args[resumeIndex + 1]).toBe('gemini-session-123');
+    });
+
+    it('should not include --resume when sdkSessionId is missing', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Hello',
+        model: '2.5-flash',
+        cwd: '/tmp/project',
+      });
+
+      expect(args).not.toContain('--resume');
+    });
+
+    it('should include --sandbox false for faster execution', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Hello',
+        model: '2.5-flash',
+        cwd: '/tmp/project',
+      });
+
+      const sandboxIndex = args.indexOf('--sandbox');
+      expect(sandboxIndex).toBeGreaterThan(-1);
+      expect(args[sandboxIndex + 1]).toBe('false');
+    });
+
+    it('should include --approval-mode yolo for non-interactive use', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Hello',
+        model: '2.5-flash',
+        cwd: '/tmp/project',
+      });
+
+      const approvalIndex = args.indexOf('--approval-mode');
+      expect(approvalIndex).toBeGreaterThan(-1);
+      expect(args[approvalIndex + 1]).toBe('yolo');
+    });
+
+    it('should include --output-format stream-json', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Hello',
+        model: '2.5-flash',
+        cwd: '/tmp/project',
+      });
+
+      const formatIndex = args.indexOf('--output-format');
+      expect(formatIndex).toBeGreaterThan(-1);
+      expect(args[formatIndex + 1]).toBe('stream-json');
+    });
+
+    it('should include --include-directories with cwd', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Hello',
+        model: '2.5-flash',
+        cwd: '/tmp/my-project',
+      });
+
+      const dirIndex = args.indexOf('--include-directories');
+      expect(dirIndex).toBeGreaterThan(-1);
+      expect(args[dirIndex + 1]).toBe('/tmp/my-project');
+    });
+
+    it('should add gemini- prefix to bare model names', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Hello',
+        model: '2.5-flash',
+        cwd: '/tmp/project',
+      });
+
+      const modelIndex = args.indexOf('--model');
+      expect(modelIndex).toBeGreaterThan(-1);
+      expect(args[modelIndex + 1]).toBe('gemini-2.5-flash');
+    });
+
+    it('should not double-prefix model names that already have gemini-', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Hello',
+        model: 'gemini-2.5-pro',
+        cwd: '/tmp/project',
+      });
+
+      const modelIndex = args.indexOf('--model');
+      expect(modelIndex).toBeGreaterThan(-1);
+      expect(args[modelIndex + 1]).toBe('gemini-2.5-pro');
+    });
+  });
+
+  describe('normalizeEvent - error handling', () => {
+    it('returns error from result event when status=error and error field is set', () => {
+      const event = {
+        type: 'result',
+        status: 'error',
+        error: 'Model overloaded',
+        session_id: 'sess-gemini-1',
+        stats: { duration_ms: 4000, total_tokens: 0 },
+      };
+
+      const msg = provider.normalizeEvent(event) as ProviderMessage;
+
+      expect(msg).not.toBeNull();
+      expect(msg.type).toBe('error');
+      expect(msg.error).toBe('Model overloaded');
+      expect(msg.session_id).toBe('sess-gemini-1');
+    });
+
+    it('builds diagnostic fallback when result event has status=error but empty error field', () => {
+      const event = {
+        type: 'result',
+        status: 'error',
+        error: '',
+        session_id: 'sess-gemini-2',
+        stats: { duration_ms: 7500, total_tokens: 0 },
+      };
+
+      const msg = provider.normalizeEvent(event) as ProviderMessage;
+
+      expect(msg).not.toBeNull();
+      expect(msg.type).toBe('error');
+      // Diagnostic info should be present instead of 'Unknown error'
+      expect(msg.error).toContain('7500ms');
+      expect(msg.error).toContain('sess-gemini-2');
+      expect(msg.error).not.toBe('Unknown error');
+    });
+
+    it('builds fallback with "unknown" duration when stats are missing', () => {
+      const event = {
+        type: 'result',
+        status: 'error',
+        error: '',
+        session_id: 'sess-gemini-nostats',
+        // no stats field
+      };
+
+      const msg = provider.normalizeEvent(event) as ProviderMessage;
+
+      expect(msg).not.toBeNull();
+      expect(msg.type).toBe('error');
+      expect(msg.error).toContain('unknown');
+    });
+
+    it('returns error from standalone error event with error field set', () => {
+      const event = {
+        type: 'error',
+        error: 'API key invalid',
+        session_id: 'sess-gemini-3',
+      };
+
+      const msg = provider.normalizeEvent(event) as ProviderMessage;
+
+      expect(msg).not.toBeNull();
+      expect(msg.type).toBe('error');
+      expect(msg.error).toBe('API key invalid');
+    });
+
+    it('builds diagnostic fallback when standalone error event has empty error field', () => {
+      const event = {
+        type: 'error',
+        error: '',
+        session_id: 'sess-gemini-empty',
+      };
+
+      const msg = provider.normalizeEvent(event) as ProviderMessage;
+
+      expect(msg).not.toBeNull();
+      expect(msg.type).toBe('error');
+      // Should include session_id, not just 'Unknown error'
+      expect(msg.error).toContain('sess-gemini-empty');
+      expect(msg.error).not.toBe('Unknown error');
+    });
+
+    it('builds fallback mentioning "none" when session_id is missing from error event', () => {
+      const event = {
+        type: 'error',
+        error: '',
+        // no session_id
+      };
+
+      const msg = provider.normalizeEvent(event) as ProviderMessage;
+
+      expect(msg).not.toBeNull();
+      expect(msg.type).toBe('error');
+      expect(msg.error).toContain('none');
+    });
+
+    it('uses consistent "Gemini agent failed" label for both result and error event fallbacks', () => {
+      const resultEvent = {
+        type: 'result',
+        status: 'error',
+        error: '',
+        session_id: 'sess-r',
+        stats: { duration_ms: 1000 },
+      };
+      const errorEvent = {
+        type: 'error',
+        error: '',
+        session_id: 'sess-e',
+      };
+
+      const resultMsg = provider.normalizeEvent(resultEvent) as ProviderMessage;
+      const errorMsg = provider.normalizeEvent(errorEvent) as ProviderMessage;
+
+      // Both fallback messages should use the same "Gemini agent failed" prefix
+      expect(resultMsg.error).toContain('Gemini agent failed');
+      expect(errorMsg.error).toContain('Gemini agent failed');
+    });
+
+    it('returns success result when result event has status=success', () => {
+      const event = {
+        type: 'result',
+        status: 'success',
+        error: '',
+        session_id: 'sess-gemini-ok',
+        stats: { duration_ms: 1200, total_tokens: 500 },
+      };
+
+      const msg = provider.normalizeEvent(event) as ProviderMessage;
+
+      expect(msg).not.toBeNull();
+      expect(msg.type).toBe('result');
+      expect(msg.subtype).toBe('success');
+    });
+  });
+
+  describe('validateBareModelId integration', () => {
+    it('should allow gemini- prefixed models for Gemini provider with expectedProvider="gemini"', () => {
+      expect(() =>
+        validateBareModelId('gemini-2.5-flash', 'GeminiProvider', 'gemini')
+      ).not.toThrow();
+      expect(() => validateBareModelId('gemini-2.5-pro', 'GeminiProvider', 'gemini')).not.toThrow();
+    });
+
+    it('should reject other provider prefixes for Gemini provider', () => {
+      expect(() => validateBareModelId('cursor-gpt-4', 'GeminiProvider', 'gemini')).toThrow();
+      expect(() => validateBareModelId('codex-gpt-4', 'GeminiProvider', 'gemini')).toThrow();
+      expect(() => validateBareModelId('copilot-gpt-4', 'GeminiProvider', 'gemini')).toThrow();
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/providers/opencode-provider.test.ts b/temp_repo/apps/server/tests/unit/providers/opencode-provider.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a3a0d7269d28b5f6600c9f5b27ededa3477d8a09
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/providers/opencode-provider.test.ts
@@ -0,0 +1,1627 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import {
+  OpencodeProvider,
+  resetToolUseIdCounter,
+} from '../../../src/providers/opencode-provider.js';
+import type { ProviderMessage, ModelDefinition } from '@automaker/types';
+import { collectAsyncGenerator } from '../../utils/helpers.js';
+import { spawnJSONLProcess, getOpenCodeAuthIndicators } from '@automaker/platform';
+
+vi.mock('@automaker/platform', () => ({
+  spawnJSONLProcess: vi.fn(),
+  isWslAvailable: vi.fn().mockReturnValue(false),
+  findCliInWsl: vi.fn().mockReturnValue(null),
+  createWslCommand: vi.fn(),
+  windowsToWslPath: vi.fn(),
+  getOpenCodeAuthIndicators: vi.fn().mockResolvedValue({
+    hasAuthFile: false,
+    hasOAuthToken: false,
+    hasApiKey: false,
+  }),
+}));
+
+describe('opencode-provider.ts', () => {
+  let provider: OpencodeProvider;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    resetToolUseIdCounter();
+    provider = new OpencodeProvider();
+  });
+
+  afterEach(() => {
+    // Note: Don't use vi.restoreAllMocks() here as it would undo the module-level
+    // mock implementations (like getOpenCodeAuthIndicators) set up with vi.mock()
+  });
+
+  // ==========================================================================
+  // Basic Provider Tests
+  // ==========================================================================
+
+  describe('getName', () => {
+    it("should return 'opencode' as provider name", () => {
+      expect(provider.getName()).toBe('opencode');
+    });
+  });
+
+  describe('getCliName', () => {
+    it("should return 'opencode' as CLI name", () => {
+      expect(provider.getCliName()).toBe('opencode');
+    });
+  });
+
+  describe('getAvailableModels', () => {
+    it('should return 5 models', () => {
+      const models = provider.getAvailableModels();
+      expect(models).toHaveLength(5);
+    });
+
+    it('should include Big Pickle as default', () => {
+      const models = provider.getAvailableModels();
+      const bigPickle = models.find((m) => m.id === 'opencode/big-pickle');
+
+      expect(bigPickle).toBeDefined();
+      expect(bigPickle?.name).toBe('Big Pickle (Free)');
+      expect(bigPickle?.provider).toBe('opencode');
+      expect(bigPickle?.default).toBe(true);
+      expect(bigPickle?.modelString).toBe('opencode/big-pickle');
+    });
+
+    it('should include free tier GLM model', () => {
+      const models = provider.getAvailableModels();
+      const glm = models.find((m) => m.id === 'opencode/glm-5-free');
+
+      expect(glm).toBeDefined();
+      expect(glm?.name).toBe('GLM 5 Free');
+      expect(glm?.tier).toBe('basic');
+    });
+
+    it('should include free tier MiniMax model', () => {
+      const models = provider.getAvailableModels();
+      const minimax = models.find((m) => m.id === 'opencode/minimax-m2.5-free');
+
+      expect(minimax).toBeDefined();
+      expect(minimax?.name).toBe('MiniMax M2.5 Free');
+      expect(minimax?.tier).toBe('basic');
+    });
+
+    it('should have all models support tools', () => {
+      const models = provider.getAvailableModels();
+
+      models.forEach((model) => {
+        expect(model.supportsTools).toBe(true);
+      });
+    });
+
+    it('should have models with modelString property', () => {
+      const models = provider.getAvailableModels();
+
+      for (const model of models) {
+        expect(model).toHaveProperty('modelString');
+        expect(typeof model.modelString).toBe('string');
+      }
+    });
+  });
+
+  describe('parseModelsOutput', () => {
+    it('should parse nested provider model IDs', () => {
+      const output = ['openrouter/anthropic/claude-3.5-sonnet', 'openai/gpt-4o'].join('\n');
+
+      const parseModelsOutput = (
+        provider as unknown as { parseModelsOutput: (output: string) => ModelDefinition[] }
+      ).parseModelsOutput.bind(provider);
+      const models = parseModelsOutput(output);
+
+      expect(models).toHaveLength(2);
+      const openrouterModel = models.find((model) => model.id.startsWith('openrouter/'));
+
+      expect(openrouterModel).toBeDefined();
+      expect(openrouterModel?.provider).toBe('openrouter');
+      expect(openrouterModel?.modelString).toBe('openrouter/anthropic/claude-3.5-sonnet');
+    });
+  });
+
+  describe('supportsFeature', () => {
+    it("should support 'tools' feature", () => {
+      expect(provider.supportsFeature('tools')).toBe(true);
+    });
+
+    it("should support 'text' feature", () => {
+      expect(provider.supportsFeature('text')).toBe(true);
+    });
+
+    it("should support 'vision' feature", () => {
+      expect(provider.supportsFeature('vision')).toBe(true);
+    });
+
+    it("should not support 'thinking' feature", () => {
+      expect(provider.supportsFeature('thinking')).toBe(false);
+    });
+
+    it("should not support 'mcp' feature", () => {
+      expect(provider.supportsFeature('mcp')).toBe(false);
+    });
+
+    it("should not support 'cli' feature", () => {
+      expect(provider.supportsFeature('cli')).toBe(false);
+    });
+
+    it('should return false for unknown features', () => {
+      expect(provider.supportsFeature('unknown-feature')).toBe(false);
+      expect(provider.supportsFeature('nonexistent')).toBe(false);
+      expect(provider.supportsFeature('')).toBe(false);
+    });
+  });
+
+  // ==========================================================================
+  // buildCliArgs Tests
+  // ==========================================================================
+
+  describe('buildCliArgs', () => {
+    it('should build correct args with run subcommand', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Hello',
+        model: 'opencode/big-pickle',
+        cwd: '/tmp/project',
+      });
+
+      expect(args[0]).toBe('run');
+    });
+
+    it('should include --format json for streaming output', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Hello',
+        model: 'opencode/big-pickle',
+        cwd: '/tmp/project',
+      });
+
+      const formatIndex = args.indexOf('--format');
+      expect(formatIndex).toBeGreaterThan(-1);
+      expect(args[formatIndex + 1]).toBe('json');
+    });
+
+    it('should include model with --model flag', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Hello',
+        model: 'anthropic/claude-sonnet-4-5',
+        cwd: '/tmp/project',
+      });
+
+      const modelIndex = args.indexOf('--model');
+      expect(modelIndex).toBeGreaterThan(-1);
+      expect(args[modelIndex + 1]).toBe('anthropic/claude-sonnet-4-5');
+    });
+
+    it('should strip opencode- prefix from model', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Hello',
+        model: 'opencode-anthropic/claude-sonnet-4-5',
+        cwd: '/tmp/project',
+      });
+
+      const modelIndex = args.indexOf('--model');
+      expect(args[modelIndex + 1]).toBe('anthropic/claude-sonnet-4-5');
+    });
+
+    it('should handle missing cwd', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Hello',
+        model: 'opencode/big-pickle',
+      });
+
+      expect(args).not.toContain('-c');
+    });
+
+    it('should handle model from opencode provider', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Hello',
+        model: 'opencode/big-pickle',
+        cwd: '/tmp/project',
+      });
+
+      expect(args).toContain('--model');
+      expect(args).toContain('opencode/big-pickle');
+    });
+  });
+
+  // ==========================================================================
+  // normalizeEvent Tests
+  // ==========================================================================
+
+  describe('normalizeEvent', () => {
+    describe('text events (new OpenCode format)', () => {
+      it('should convert text to assistant message with text content', () => {
+        const event = {
+          type: 'text',
+          part: {
+            type: 'text',
+            text: 'Hello, world!',
+          },
+          sessionID: 'test-session',
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result).toEqual({
+          type: 'assistant',
+          session_id: 'test-session',
+          message: {
+            role: 'assistant',
+            content: [
+              {
+                type: 'text',
+                text: 'Hello, world!',
+              },
+            ],
+          },
+        });
+      });
+
+      it('should return null for empty text', () => {
+        const event = {
+          type: 'text',
+          part: {
+            type: 'text',
+            text: '',
+          },
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result).toBeNull();
+      });
+
+      it('should return null for text with undefined text', () => {
+        const event = {
+          type: 'text',
+          part: {},
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result).toBeNull();
+      });
+    });
+
+    describe('tool_call events', () => {
+      it('should convert tool_call to assistant message with tool_use content', () => {
+        const event = {
+          type: 'tool_call',
+          part: {
+            type: 'tool-call',
+            call_id: 'call-123',
+            name: 'Read',
+            args: { file_path: '/tmp/test.txt' },
+          },
+          sessionID: 'test-session',
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result).toEqual({
+          type: 'assistant',
+          session_id: 'test-session',
+          message: {
+            role: 'assistant',
+            content: [
+              {
+                type: 'tool_use',
+                name: 'Read',
+                tool_use_id: 'call-123',
+                input: { file_path: '/tmp/test.txt' },
+              },
+            ],
+          },
+        });
+      });
+
+      it('should generate tool_use_id when call_id is missing', () => {
+        const event = {
+          type: 'tool_call',
+          part: {
+            type: 'tool-call',
+            name: 'Write',
+            args: { content: 'test' },
+          },
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result?.message?.content[0].type).toBe('tool_use');
+        expect(result?.message?.content[0].tool_use_id).toBe('opencode-tool-1');
+
+        // Second call should increment
+        const result2 = provider.normalizeEvent({
+          type: 'tool_call',
+          part: {
+            type: 'tool-call',
+            name: 'Edit',
+            args: {},
+          },
+        });
+        expect(result2?.message?.content[0].tool_use_id).toBe('opencode-tool-2');
+      });
+    });
+
+    describe('tool_result events', () => {
+      it('should convert tool_result to assistant message with tool_result content', () => {
+        const event = {
+          type: 'tool_result',
+          part: {
+            type: 'tool-result',
+            call_id: 'call-123',
+            output: 'File contents here',
+          },
+          sessionID: 'test-session',
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result).toEqual({
+          type: 'assistant',
+          session_id: 'test-session',
+          message: {
+            role: 'assistant',
+            content: [
+              {
+                type: 'tool_result',
+                tool_use_id: 'call-123',
+                content: 'File contents here',
+              },
+            ],
+          },
+        });
+      });
+
+      it('should handle tool_result without call_id', () => {
+        const event = {
+          type: 'tool_result',
+          part: {
+            type: 'tool-result',
+            output: 'Result without ID',
+          },
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result?.message?.content[0].type).toBe('tool_result');
+        expect(result?.message?.content[0].tool_use_id).toBeUndefined();
+      });
+    });
+
+    describe('tool_error events', () => {
+      it('should convert tool_error to error message', () => {
+        const event = {
+          type: 'tool_error',
+          part: {
+            type: 'tool-error',
+            call_id: 'call-123',
+            error: 'File not found',
+          },
+          sessionID: 'test-session',
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result).toEqual({
+          type: 'error',
+          session_id: 'test-session',
+          error: 'File not found',
+        });
+      });
+
+      it('should provide default error message when error is missing', () => {
+        const event = {
+          type: 'tool_error',
+          part: {
+            type: 'tool-error',
+            call_id: 'call-123',
+          },
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result?.type).toBe('error');
+        expect(result?.error).toBe('Tool execution failed');
+      });
+    });
+
+    describe('step_start events', () => {
+      it('should return null for step_start events (informational)', () => {
+        const event = {
+          type: 'step_start',
+          part: {
+            type: 'step-start',
+          },
+          sessionID: 'test-session',
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result).toBeNull();
+      });
+    });
+
+    describe('step_finish events', () => {
+      it('should convert successful step_finish to result message', () => {
+        const event = {
+          type: 'step_finish',
+          part: {
+            type: 'step-finish',
+            reason: 'stop',
+            result: 'Task completed successfully',
+          },
+          sessionID: 'test-session',
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result).toEqual({
+          type: 'result',
+          subtype: 'success',
+          session_id: 'test-session',
+          result: 'Task completed successfully',
+        });
+      });
+
+      it('should convert step_finish with error to error message', () => {
+        const event = {
+          type: 'step_finish',
+          part: {
+            type: 'step-finish',
+            reason: 'error',
+            error: 'Something went wrong',
+          },
+          sessionID: 'test-session',
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result).toEqual({
+          type: 'error',
+          session_id: 'test-session',
+          error: 'Something went wrong',
+        });
+      });
+
+      it('should convert step_finish with error property to error message', () => {
+        const event = {
+          type: 'step_finish',
+          part: {
+            type: 'step-finish',
+            error: 'Process failed',
+          },
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result?.type).toBe('error');
+        expect(result?.error).toBe('Process failed');
+      });
+
+      it('should provide default error message for failed step without error text', () => {
+        const event = {
+          type: 'step_finish',
+          part: {
+            type: 'step-finish',
+            reason: 'error',
+          },
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result?.type).toBe('error');
+        expect(result?.error).toBe('Step execution failed');
+      });
+
+      it('should treat step_finish with reason=stop as success', () => {
+        const event = {
+          type: 'step_finish',
+          part: {
+            type: 'step-finish',
+            reason: 'stop',
+            result: 'Done',
+          },
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result?.type).toBe('result');
+        expect(result?.subtype).toBe('success');
+      });
+    });
+
+    describe('unknown events', () => {
+      it('should return null for unknown event types', () => {
+        const event = {
+          type: 'unknown-event',
+          data: 'some data',
+        };
+
+        const result = provider.normalizeEvent(event);
+
+        expect(result).toBeNull();
+      });
+
+      it('should return null for null input', () => {
+        const result = provider.normalizeEvent(null);
+        expect(result).toBeNull();
+      });
+
+      it('should return null for undefined input', () => {
+        const result = provider.normalizeEvent(undefined);
+        expect(result).toBeNull();
+      });
+
+      it('should return null for non-object input', () => {
+        expect(provider.normalizeEvent('string')).toBeNull();
+        expect(provider.normalizeEvent(123)).toBeNull();
+        expect(provider.normalizeEvent(true)).toBeNull();
+      });
+
+      it('should return null for events without type', () => {
+        expect(provider.normalizeEvent({})).toBeNull();
+        expect(provider.normalizeEvent({ data: 'no type' })).toBeNull();
+      });
+    });
+  });
+
+  // ==========================================================================
+  // executeQuery Tests
+  // ==========================================================================
+
+  describe('executeQuery', () => {
+    /**
+     * Helper to set up the provider with a mocked CLI path
+     * This bypasses CLI detection for testing
+     */
+    function setupMockedProvider(): OpencodeProvider {
+      const mockedProvider = new OpencodeProvider();
+      // Access protected property to simulate CLI detection
+      (mockedProvider as unknown as { cliPath: string }).cliPath = '/usr/bin/opencode';
+      (mockedProvider as unknown as { detectedStrategy: string }).detectedStrategy = 'native';
+      return mockedProvider;
+    }
+
+    it('should stream text events as assistant messages', async () => {
+      const mockedProvider = setupMockedProvider();
+
+      const mockEvents = [
+        { type: 'text', part: { type: 'text', text: 'Hello ' } },
+        { type: 'text', part: { type: 'text', text: 'World!' } },
+      ];
+
+      vi.mocked(spawnJSONLProcess).mockReturnValue(
+        (async function* () {
+          for (const event of mockEvents) {
+            yield event;
+          }
+        })()
+      );
+
+      const results = await collectAsyncGenerator<ProviderMessage>(
+        mockedProvider.executeQuery({
+          prompt: 'Say hello',
+          model: 'anthropic/claude-sonnet-4-5',
+          cwd: '/tmp',
+        })
+      );
+
+      expect(results).toHaveLength(2);
+      expect(results[0].type).toBe('assistant');
+      expect(results[0].message?.content[0].text).toBe('Hello ');
+      expect(results[1].message?.content[0].text).toBe('World!');
+    });
+
+    it('should emit tool_use and tool_result with matching IDs', async () => {
+      const mockedProvider = setupMockedProvider();
+
+      const mockEvents = [
+        {
+          type: 'tool_call',
+          part: {
+            type: 'tool-call',
+            call_id: 'tool-1',
+            name: 'Read',
+            args: { file_path: '/tmp/test.txt' },
+          },
+        },
+        {
+          type: 'tool_result',
+          part: {
+            type: 'tool-result',
+            call_id: 'tool-1',
+            output: 'File contents',
+          },
+        },
+      ];
+
+      vi.mocked(spawnJSONLProcess).mockReturnValue(
+        (async function* () {
+          for (const event of mockEvents) {
+            yield event;
+          }
+        })()
+      );
+
+      const results = await collectAsyncGenerator<ProviderMessage>(
+        mockedProvider.executeQuery({
+          prompt: 'Read a file',
+          cwd: '/tmp',
+        })
+      );
+
+      expect(results).toHaveLength(2);
+
+      const toolUse = results[0];
+      const toolResult = results[1];
+
+      expect(toolUse.type).toBe('assistant');
+      expect(toolUse.message?.content[0].type).toBe('tool_use');
+      expect(toolUse.message?.content[0].tool_use_id).toBe('tool-1');
+
+      expect(toolResult.type).toBe('assistant');
+      expect(toolResult.message?.content[0].type).toBe('tool_result');
+      expect(toolResult.message?.content[0].tool_use_id).toBe('tool-1');
+    });
+
+    it('should pass stdinData containing the prompt', async () => {
+      const mockedProvider = setupMockedProvider();
+
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      await collectAsyncGenerator(
+        mockedProvider.executeQuery({
+          prompt: 'My test prompt',
+          cwd: '/tmp',
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      expect(call.stdinData).toBe('My test prompt');
+    });
+
+    it('should extract text from array prompt', async () => {
+      const mockedProvider = setupMockedProvider();
+
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      const arrayPrompt = [
+        { type: 'text', text: 'First part' },
+        { type: 'image', source: { type: 'base64', data: '...' } },
+        { type: 'text', text: 'Second part' },
+      ];
+
+      await collectAsyncGenerator(
+        mockedProvider.executeQuery({
+          prompt: arrayPrompt as unknown as string,
+          cwd: '/tmp',
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      expect(call.stdinData).toBe('First part\nSecond part');
+    });
+
+    it('should include correct CLI args in subprocess options', async () => {
+      const mockedProvider = setupMockedProvider();
+
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      await collectAsyncGenerator(
+        mockedProvider.executeQuery({
+          prompt: 'Test',
+          model: 'opencode-anthropic/claude-opus-4-5',
+          cwd: '/tmp/workspace',
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      expect(call.args).toContain('run');
+      expect(call.args).toContain('--format');
+      expect(call.args).toContain('json');
+      expect(call.args).toContain('--model');
+      expect(call.args).toContain('anthropic/claude-opus-4-5');
+    });
+
+    it('should skip null-normalized events', async () => {
+      const mockedProvider = setupMockedProvider();
+
+      const mockEvents = [
+        { type: 'unknown-internal-event', data: 'ignored' },
+        { type: 'text', part: { type: 'text', text: 'Valid text' } },
+        { type: 'another-unknown', foo: 'bar' },
+        { type: 'step_finish', part: { type: 'step-finish', reason: 'stop', result: 'Done' } },
+      ];
+
+      vi.mocked(spawnJSONLProcess).mockReturnValue(
+        (async function* () {
+          for (const event of mockEvents) {
+            yield event;
+          }
+        })()
+      );
+
+      const results = await collectAsyncGenerator<ProviderMessage>(
+        mockedProvider.executeQuery({
+          prompt: 'Test',
+          model: 'opencode/big-pickle',
+          cwd: '/test',
+        })
+      );
+
+      // Should only have valid events (text and result), not the unknown ones
+      expect(results.length).toBe(2);
+    });
+
+    it('should throw error when CLI is not installed', async () => {
+      // Create provider and explicitly set cliPath to null to simulate not installed
+      // Set detectedStrategy to 'npx' to prevent ensureCliDetected from re-running detection
+      const unmockedProvider = new OpencodeProvider();
+      (unmockedProvider as unknown as { cliPath: string | null }).cliPath = null;
+      (unmockedProvider as unknown as { detectedStrategy: string }).detectedStrategy = 'npx';
+
+      await expect(
+        collectAsyncGenerator(
+          unmockedProvider.executeQuery({
+            prompt: 'Test',
+            cwd: '/test',
+          })
+        )
+      ).rejects.toThrow(/CLI not found/);
+    });
+  });
+
+  // ==========================================================================
+  // getSpawnConfig Tests
+  // ==========================================================================
+
+  describe('getSpawnConfig', () => {
+    it('should return npx as Windows strategy', () => {
+      const config = provider.getSpawnConfig();
+      expect(config.windowsStrategy).toBe('npx');
+    });
+
+    it('should specify opencode-ai@latest as npx package', () => {
+      const config = provider.getSpawnConfig();
+      expect(config.npxPackage).toBe('opencode-ai@latest');
+    });
+
+    it('should include common paths for Linux', () => {
+      const config = provider.getSpawnConfig();
+      const linuxPaths = config.commonPaths['linux'];
+
+      expect(linuxPaths).toBeDefined();
+      expect(linuxPaths.length).toBeGreaterThan(0);
+      expect(linuxPaths.some((p) => p.includes('opencode'))).toBe(true);
+    });
+
+    it('should include common paths for macOS', () => {
+      const config = provider.getSpawnConfig();
+      const darwinPaths = config.commonPaths['darwin'];
+
+      expect(darwinPaths).toBeDefined();
+      expect(darwinPaths.length).toBeGreaterThan(0);
+      expect(darwinPaths.some((p) => p.includes('homebrew'))).toBe(true);
+    });
+
+    it('should include common paths for Windows', () => {
+      const config = provider.getSpawnConfig();
+      const win32Paths = config.commonPaths['win32'];
+
+      expect(win32Paths).toBeDefined();
+      expect(win32Paths.length).toBeGreaterThan(0);
+      expect(win32Paths.some((p) => p.includes('npm'))).toBe(true);
+    });
+  });
+
+  // ==========================================================================
+  // detectInstallation Tests
+  // ==========================================================================
+
+  describe('detectInstallation', () => {
+    beforeEach(() => {
+      // Ensure the mock implementation is set up for each test
+      vi.mocked(getOpenCodeAuthIndicators).mockResolvedValue({
+        hasAuthFile: false,
+        hasOAuthToken: false,
+        hasApiKey: false,
+      });
+    });
+
+    it('should return installed true when CLI is found', async () => {
+      (provider as unknown as { cliPath: string }).cliPath = '/usr/local/bin/opencode';
+      (provider as unknown as { detectedStrategy: string }).detectedStrategy = 'native';
+
+      const result = await provider.detectInstallation();
+
+      expect(result.installed).toBe(true);
+      expect(result.path).toBe('/usr/local/bin/opencode');
+    });
+
+    it('should return installed false when CLI is not found', async () => {
+      // Set both cliPath to null and detectedStrategy to something other than 'native'
+      // to prevent ensureCliDetected from re-detecting
+      (provider as unknown as { cliPath: string | null }).cliPath = null;
+      (provider as unknown as { detectedStrategy: string }).detectedStrategy = 'npx';
+
+      const result = await provider.detectInstallation();
+
+      expect(result.installed).toBe(false);
+    });
+
+    it('should return method as npm when using npx strategy', async () => {
+      (provider as unknown as { cliPath: string }).cliPath = 'npx';
+      (provider as unknown as { detectedStrategy: string }).detectedStrategy = 'npx';
+
+      const result = await provider.detectInstallation();
+
+      expect(result.method).toBe('npm');
+    });
+
+    it('should return method as cli when using native strategy', async () => {
+      (provider as unknown as { cliPath: string }).cliPath = '/usr/local/bin/opencode';
+      (provider as unknown as { detectedStrategy: string }).detectedStrategy = 'native';
+
+      const result = await provider.detectInstallation();
+
+      expect(result.method).toBe('cli');
+    });
+  });
+
+  // ==========================================================================
+  // Config Management Tests (inherited from BaseProvider)
+  // ==========================================================================
+
+  describe('config management', () => {
+    it('should get and set config', () => {
+      provider.setConfig({ apiKey: 'test-api-key' });
+
+      const config = provider.getConfig();
+      expect(config.apiKey).toBe('test-api-key');
+    });
+
+    it('should merge config updates', () => {
+      provider.setConfig({ apiKey: 'key1' });
+      provider.setConfig({ model: 'model1' });
+
+      const config = provider.getConfig();
+      expect(config.apiKey).toBe('key1');
+      expect(config.model).toBe('model1');
+    });
+  });
+
+  describe('validateConfig', () => {
+    it('should validate config from base class', () => {
+      const result = provider.validateConfig();
+
+      expect(result.valid).toBe(true);
+      expect(result.errors).toHaveLength(0);
+    });
+  });
+
+  // ==========================================================================
+  // Additional Edge Case Tests
+  // ==========================================================================
+
+  describe('extractPromptText edge cases', () => {
+    function setupMockedProvider(): OpencodeProvider {
+      const mockedProvider = new OpencodeProvider();
+      (mockedProvider as unknown as { cliPath: string }).cliPath = '/usr/bin/opencode';
+      (mockedProvider as unknown as { detectedStrategy: string }).detectedStrategy = 'native';
+      return mockedProvider;
+    }
+
+    it('should handle empty array prompt', async () => {
+      const mockedProvider = setupMockedProvider();
+
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      await collectAsyncGenerator(
+        mockedProvider.executeQuery({
+          prompt: [] as unknown as string,
+          cwd: '/tmp',
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      expect(call.stdinData).toBe('');
+    });
+
+    it('should handle array prompt with only image blocks (no text)', async () => {
+      const mockedProvider = setupMockedProvider();
+
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      const imageOnlyPrompt = [
+        { type: 'image', source: { type: 'base64', data: 'abc123' } },
+        { type: 'image', source: { type: 'base64', data: 'def456' } },
+      ];
+
+      await collectAsyncGenerator(
+        mockedProvider.executeQuery({
+          prompt: imageOnlyPrompt as unknown as string,
+          cwd: '/tmp',
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      expect(call.stdinData).toBe('');
+    });
+
+    it('should handle array prompt with mixed content types', async () => {
+      const mockedProvider = setupMockedProvider();
+
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      const mixedPrompt = [
+        { type: 'text', text: 'Analyze this image' },
+        { type: 'image', source: { type: 'base64', data: 'abc123' } },
+        { type: 'text', text: 'And this one' },
+        { type: 'image', source: { type: 'base64', data: 'def456' } },
+        { type: 'text', text: 'What differences do you see?' },
+      ];
+
+      await collectAsyncGenerator(
+        mockedProvider.executeQuery({
+          prompt: mixedPrompt as unknown as string,
+          cwd: '/tmp',
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      expect(call.stdinData).toBe('Analyze this image\nAnd this one\nWhat differences do you see?');
+    });
+
+    it('should handle text blocks with empty text property', async () => {
+      const mockedProvider = setupMockedProvider();
+
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      const promptWithEmptyText = [
+        { type: 'text', text: 'Hello' },
+        { type: 'text', text: '' },
+        { type: 'text', text: 'World' },
+      ];
+
+      await collectAsyncGenerator(
+        mockedProvider.executeQuery({
+          prompt: promptWithEmptyText as unknown as string,
+          cwd: '/tmp',
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      // Empty text blocks should be filtered out
+      expect(call.stdinData).toBe('Hello\nWorld');
+    });
+  });
+
+  describe('abort handling', () => {
+    function setupMockedProvider(): OpencodeProvider {
+      const mockedProvider = new OpencodeProvider();
+      (mockedProvider as unknown as { cliPath: string }).cliPath = '/usr/bin/opencode';
+      (mockedProvider as unknown as { detectedStrategy: string }).detectedStrategy = 'native';
+      return mockedProvider;
+    }
+
+    it('should pass abortController to subprocess options', async () => {
+      const mockedProvider = setupMockedProvider();
+
+      vi.mocked(spawnJSONLProcess).mockReturnValue((async function* () {})());
+
+      const abortController = new AbortController();
+
+      await collectAsyncGenerator(
+        mockedProvider.executeQuery({
+          prompt: 'Test',
+          cwd: '/tmp',
+          abortController,
+        })
+      );
+
+      const call = vi.mocked(spawnJSONLProcess).mock.calls[0][0];
+      expect(call.abortController).toBe(abortController);
+    });
+  });
+
+  describe('session_id preservation', () => {
+    function setupMockedProvider(): OpencodeProvider {
+      const mockedProvider = new OpencodeProvider();
+      (mockedProvider as unknown as { cliPath: string }).cliPath = '/usr/bin/opencode';
+      (mockedProvider as unknown as { detectedStrategy: string }).detectedStrategy = 'native';
+      return mockedProvider;
+    }
+
+    it('should preserve session_id through the full executeQuery flow', async () => {
+      const mockedProvider = setupMockedProvider();
+      const sessionId = 'test-session-123';
+
+      const mockEvents = [
+        { type: 'text', part: { type: 'text', text: 'Hello ' }, sessionID: sessionId },
+        {
+          type: 'tool_call',
+          part: { type: 'tool-call', name: 'Read', args: {}, call_id: 'c1' },
+          sessionID: sessionId,
+        },
+        {
+          type: 'tool_result',
+          part: { type: 'tool-result', call_id: 'c1', output: 'file content' },
+          sessionID: sessionId,
+        },
+        {
+          type: 'step_finish',
+          part: { type: 'step-finish', reason: 'stop', result: 'Done' },
+          sessionID: sessionId,
+        },
+      ];
+
+      vi.mocked(spawnJSONLProcess).mockReturnValue(
+        (async function* () {
+          for (const event of mockEvents) {
+            yield event;
+          }
+        })()
+      );
+
+      const results = await collectAsyncGenerator<ProviderMessage>(
+        mockedProvider.executeQuery({
+          prompt: 'Test',
+          model: 'opencode/big-pickle',
+          cwd: '/tmp',
+        })
+      );
+
+      // All emitted messages should have the session_id
+      expect(results).toHaveLength(4);
+      results.forEach((result) => {
+        expect(result.session_id).toBe(sessionId);
+      });
+    });
+  });
+
+  describe('normalizeEvent additional edge cases', () => {
+    it('should handle tool_call with empty args object', () => {
+      const event = {
+        type: 'tool_call',
+        part: {
+          type: 'tool-call',
+          call_id: 'call-123',
+          name: 'Glob',
+          args: {},
+        },
+      };
+
+      const result = provider.normalizeEvent(event);
+
+      expect(result?.message?.content[0].type).toBe('tool_use');
+      expect(result?.message?.content[0].input).toEqual({});
+    });
+
+    it('should handle tool_call with null args', () => {
+      const event = {
+        type: 'tool_call',
+        part: {
+          type: 'tool-call',
+          call_id: 'call-123',
+          name: 'Glob',
+          args: null,
+        },
+      };
+
+      const result = provider.normalizeEvent(event);
+
+      expect(result?.message?.content[0].type).toBe('tool_use');
+      expect(result?.message?.content[0].input).toBeNull();
+    });
+
+    it('should handle tool_call with complex nested args', () => {
+      const event = {
+        type: 'tool_call',
+        part: {
+          type: 'tool-call',
+          call_id: 'call-123',
+          name: 'Edit',
+          args: {
+            file_path: '/tmp/test.ts',
+            changes: [
+              { line: 10, old: 'foo', new: 'bar' },
+              { line: 20, old: 'baz', new: 'qux' },
+            ],
+            options: { replace_all: true },
+          },
+        },
+      };
+
+      const result = provider.normalizeEvent(event);
+
+      expect(result?.message?.content[0].type).toBe('tool_use');
+      expect(result?.message?.content[0].input).toEqual({
+        file_path: '/tmp/test.ts',
+        changes: [
+          { line: 10, old: 'foo', new: 'bar' },
+          { line: 20, old: 'baz', new: 'qux' },
+        ],
+        options: { replace_all: true },
+      });
+    });
+
+    it('should handle tool_result with empty output', () => {
+      const event = {
+        type: 'tool_result',
+        part: {
+          type: 'tool-result',
+          call_id: 'call-123',
+          output: '',
+        },
+      };
+
+      const result = provider.normalizeEvent(event);
+
+      expect(result?.message?.content[0].type).toBe('tool_result');
+      expect(result?.message?.content[0].content).toBe('');
+    });
+
+    it('should handle text with whitespace-only text', () => {
+      const event = {
+        type: 'text',
+        part: {
+          type: 'text',
+          text: '   ',
+        },
+      };
+
+      const result = provider.normalizeEvent(event);
+
+      // Whitespace should be preserved (not filtered like empty string)
+      expect(result).not.toBeNull();
+      expect(result?.message?.content[0].text).toBe('   ');
+    });
+
+    it('should handle text with newlines', () => {
+      const event = {
+        type: 'text',
+        part: {
+          type: 'text',
+          text: 'Line 1\nLine 2\nLine 3',
+        },
+      };
+
+      const result = provider.normalizeEvent(event);
+
+      expect(result?.message?.content[0].text).toBe('Line 1\nLine 2\nLine 3');
+    });
+
+    it('should handle step_finish with both result and error (error takes precedence)', () => {
+      const event = {
+        type: 'step_finish',
+        part: {
+          type: 'step-finish',
+          reason: 'stop',
+          result: 'Some result',
+          error: 'But also an error',
+        },
+      };
+
+      const result = provider.normalizeEvent(event);
+
+      expect(result?.type).toBe('error');
+      expect(result?.error).toBe('But also an error');
+    });
+  });
+
+  describe('isInstalled', () => {
+    it('should return true when CLI path is set', async () => {
+      (provider as unknown as { cliPath: string }).cliPath = '/usr/bin/opencode';
+      (provider as unknown as { detectedStrategy: string }).detectedStrategy = 'native';
+
+      const result = await provider.isInstalled();
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false when CLI path is null', async () => {
+      (provider as unknown as { cliPath: string | null }).cliPath = null;
+      (provider as unknown as { detectedStrategy: string }).detectedStrategy = 'npx';
+
+      const result = await provider.isInstalled();
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('model tier validation', () => {
+    it('should have exactly one default model', () => {
+      const models = provider.getAvailableModels();
+      const defaultModels = models.filter((m) => m.default === true);
+
+      expect(defaultModels).toHaveLength(1);
+      expect(defaultModels[0].id).toBe('opencode/big-pickle');
+    });
+
+    it('should have valid tier values for all models', () => {
+      const models = provider.getAvailableModels();
+      const validTiers = ['basic', 'standard', 'premium'];
+
+      models.forEach((model) => {
+        expect(validTiers).toContain(model.tier);
+      });
+    });
+
+    it('should have descriptions for all models', () => {
+      const models = provider.getAvailableModels();
+
+      models.forEach((model) => {
+        expect(model.description).toBeDefined();
+        expect(typeof model.description).toBe('string');
+        expect(model.description!.length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('buildCliArgs edge cases', () => {
+    it('should handle very long prompts', () => {
+      const longPrompt = 'a'.repeat(10000);
+      const args = provider.buildCliArgs({
+        prompt: longPrompt,
+        model: 'opencode/big-pickle',
+        cwd: '/tmp',
+      });
+
+      // The prompt is NOT in args (it's passed via stdin)
+      // Just verify the args structure is correct
+      expect(args).toContain('run');
+      expect(args).not.toContain('-');
+      expect(args.join(' ')).not.toContain(longPrompt);
+    });
+
+    it('should handle prompts with special characters', () => {
+      const specialPrompt = 'Test $HOME $(rm -rf /) `command` "quotes" \'single\'';
+      const args = provider.buildCliArgs({
+        prompt: specialPrompt,
+        model: 'opencode/big-pickle',
+        cwd: '/tmp',
+      });
+
+      // Special chars in prompt should not affect args (prompt is via stdin)
+      expect(args).toContain('run');
+      expect(args).not.toContain('-');
+    });
+
+    it('should handle cwd with spaces', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Test',
+        model: 'opencode/big-pickle',
+        cwd: '/tmp/path with spaces/project',
+      });
+
+      // cwd is set at subprocess level, not via CLI args
+      expect(args).not.toContain('-c');
+      expect(args).not.toContain('/tmp/path with spaces/project');
+    });
+
+    it('should handle model with unusual characters', () => {
+      const args = provider.buildCliArgs({
+        prompt: 'Test',
+        model: 'opencode-provider/model-v1.2.3-beta',
+        cwd: '/tmp',
+      });
+
+      const modelIndex = args.indexOf('--model');
+      expect(args[modelIndex + 1]).toBe('provider/model-v1.2.3-beta');
+    });
+  });
+
+  // ==========================================================================
+  // parseProvidersOutput Tests
+  // ==========================================================================
+
+  describe('parseProvidersOutput', () => {
+    // Helper function to access private method
+    function parseProviders(output: string) {
+      return (
+        provider as unknown as {
+          parseProvidersOutput: (output: string) => Array<{
+            id: string;
+            name: string;
+            authenticated: boolean;
+            authMethod?: 'oauth' | 'api_key';
+          }>;
+        }
+      ).parseProvidersOutput(output);
+    }
+
+    // =======================================================================
+    // Critical Fix Validation
+    // =======================================================================
+
+    describe('Critical Fix Validation', () => {
+      it('should map "z.ai coding plan" to "zai-coding-plan" (NOT "z-ai")', () => {
+        const output = '●  z.ai coding plan oauth';
+        const result = parseProviders(output);
+
+        expect(result).toHaveLength(1);
+        expect(result[0].id).toBe('zai-coding-plan');
+        expect(result[0].name).toBe('z.ai coding plan');
+        expect(result[0].authMethod).toBe('oauth');
+      });
+
+      it('should map "z.ai" to "z-ai" (different from coding plan)', () => {
+        const output = '●  z.ai api';
+        const result = parseProviders(output);
+
+        expect(result).toHaveLength(1);
+        expect(result[0].id).toBe('z-ai');
+        expect(result[0].name).toBe('z.ai');
+        expect(result[0].authMethod).toBe('api_key');
+      });
+
+      it('should distinguish between "z.ai coding plan" and "z.ai"', () => {
+        const output = '●  z.ai coding plan oauth\n●  z.ai api';
+        const result = parseProviders(output);
+
+        expect(result).toHaveLength(2);
+        expect(result[0].id).toBe('zai-coding-plan');
+        expect(result[0].name).toBe('z.ai coding plan');
+        expect(result[1].id).toBe('z-ai');
+        expect(result[1].name).toBe('z.ai');
+      });
+    });
+
+    // =======================================================================
+    // Provider Name Mapping
+    // =======================================================================
+
+    describe('Provider Name Mapping', () => {
+      it('should map all 12 providers correctly', () => {
+        const output = `●  anthropic oauth
+●  github copilot oauth
+●  google api
+●  openai api
+●  openrouter api
+●  azure api
+●  amazon bedrock oauth
+●  ollama api
+●  lm studio api
+●  opencode oauth
+●  z.ai coding plan oauth
+●  z.ai api`;
+
+        const result = parseProviders(output);
+
+        expect(result).toHaveLength(12);
+        expect(result.map((p) => p.id)).toEqual([
+          'anthropic',
+          'github-copilot',
+          'google',
+          'openai',
+          'openrouter',
+          'azure',
+          'amazon-bedrock',
+          'ollama',
+          'lmstudio',
+          'opencode',
+          'zai-coding-plan',
+          'z-ai',
+        ]);
+      });
+
+      it('should handle case-insensitive provider names and preserve original casing', () => {
+        const output = '●  Anthropic api\n●  OPENAI oauth\n●  GitHub Copilot oauth';
+        const result = parseProviders(output);
+
+        expect(result).toHaveLength(3);
+        expect(result[0].id).toBe('anthropic');
+        expect(result[0].name).toBe('Anthropic'); // Preserves casing
+        expect(result[1].id).toBe('openai');
+        expect(result[1].name).toBe('OPENAI'); // Preserves casing
+        expect(result[2].id).toBe('github-copilot');
+        expect(result[2].name).toBe('GitHub Copilot'); // Preserves casing
+      });
+
+      it('should handle multi-word provider names with spaces', () => {
+        const output = '●  Amazon Bedrock oauth\n●  LM Studio api\n●  GitHub Copilot oauth';
+        const result = parseProviders(output);
+
+        expect(result[0].id).toBe('amazon-bedrock');
+        expect(result[0].name).toBe('Amazon Bedrock');
+        expect(result[1].id).toBe('lmstudio');
+        expect(result[1].name).toBe('LM Studio');
+        expect(result[2].id).toBe('github-copilot');
+        expect(result[2].name).toBe('GitHub Copilot');
+      });
+    });
+
+    // =======================================================================
+    // Duplicate Aliases
+    // =======================================================================
+
+    describe('Duplicate Aliases', () => {
+      it('should map provider aliases to the same ID', () => {
+        // Test copilot variants
+        const copilot1 = parseProviders('●  copilot oauth');
+        const copilot2 = parseProviders('●  github copilot oauth');
+        expect(copilot1[0].id).toBe('github-copilot');
+        expect(copilot2[0].id).toBe('github-copilot');
+
+        // Test bedrock variants
+        const bedrock1 = parseProviders('●  bedrock oauth');
+        const bedrock2 = parseProviders('●  amazon bedrock oauth');
+        expect(bedrock1[0].id).toBe('amazon-bedrock');
+        expect(bedrock2[0].id).toBe('amazon-bedrock');
+
+        // Test lmstudio variants
+        const lm1 = parseProviders('●  lmstudio api');
+        const lm2 = parseProviders('●  lm studio api');
+        expect(lm1[0].id).toBe('lmstudio');
+        expect(lm2[0].id).toBe('lmstudio');
+      });
+    });
+
+    // =======================================================================
+    // Authentication Methods
+    // =======================================================================
+
+    describe('Authentication Methods', () => {
+      it('should detect oauth and api_key auth methods', () => {
+        const output = '●  anthropic oauth\n●  openai api\n●  google api_key';
+        const result = parseProviders(output);
+
+        expect(result[0].authMethod).toBe('oauth');
+        expect(result[1].authMethod).toBe('api_key');
+        expect(result[2].authMethod).toBe('api_key');
+      });
+
+      it('should set authenticated to true and handle case-insensitive auth methods', () => {
+        const output = '●  anthropic OAuth\n●  openai API';
+        const result = parseProviders(output);
+
+        expect(result[0].authenticated).toBe(true);
+        expect(result[0].authMethod).toBe('oauth');
+        expect(result[1].authenticated).toBe(true);
+        expect(result[1].authMethod).toBe('api_key');
+      });
+
+      it('should return undefined authMethod for unknown auth types', () => {
+        const output = '●  anthropic unknown-auth';
+        const result = parseProviders(output);
+
+        expect(result[0].authenticated).toBe(true);
+        expect(result[0].authMethod).toBeUndefined();
+      });
+    });
+
+    // =======================================================================
+    // ANSI Escape Sequences
+    // =======================================================================
+
+    describe('ANSI Escape Sequences', () => {
+      it('should strip ANSI color codes from output', () => {
+        const output = '\x1b[32m●  anthropic oauth\x1b[0m';
+        const result = parseProviders(output);
+
+        expect(result).toHaveLength(1);
+        expect(result[0].id).toBe('anthropic');
+        expect(result[0].name).toBe('anthropic');
+      });
+
+      it('should handle complex ANSI sequences and codes in provider names', () => {
+        const output =
+          '\x1b[1;32m●\x1b[0m  \x1b[33mgit\x1b[32mhub\x1b[0m copilot\x1b[0m \x1b[36moauth\x1b[0m';
+        const result = parseProviders(output);
+
+        expect(result).toHaveLength(1);
+        expect(result[0].id).toBe('github-copilot');
+      });
+    });
+
+    // =======================================================================
+    // Edge Cases
+    // =======================================================================
+
+    describe('Edge Cases', () => {
+      it('should return empty array for empty output or no ● symbols', () => {
+        expect(parseProviders('')).toEqual([]);
+        expect(parseProviders('anthropic oauth\nopenai api')).toEqual([]);
+        expect(parseProviders('No authenticated providers')).toEqual([]);
+      });
+
+      it('should skip malformed lines with ● but insufficient content', () => {
+        const output = '●\n●  \n●  anthropic\n●  openai api';
+        const result = parseProviders(output);
+
+        // Only the last line has both provider name and auth method
+        expect(result).toHaveLength(1);
+        expect(result[0].id).toBe('openai');
+      });
+
+      it('should use fallback for unknown providers (spaces to hyphens)', () => {
+        const output = '●  unknown provider name oauth';
+        const result = parseProviders(output);
+
+        expect(result[0].id).toBe('unknown-provider-name');
+        expect(result[0].name).toBe('unknown provider name');
+      });
+
+      it('should handle extra whitespace and mixed case', () => {
+        const output = '●    AnThRoPiC    oauth';
+        const result = parseProviders(output);
+
+        expect(result[0].id).toBe('anthropic');
+        expect(result[0].name).toBe('AnThRoPiC');
+      });
+
+      it('should handle multiple ● symbols on same line', () => {
+        const output = '●  ●  anthropic oauth';
+        const result = parseProviders(output);
+
+        expect(result).toHaveLength(1);
+        expect(result[0].id).toBe('anthropic');
+      });
+
+      it('should handle different newline formats and trailing newlines', () => {
+        const outputUnix = '●  anthropic oauth\n●  openai api';
+        const outputWindows = '●  anthropic oauth\r\n●  openai api\r\n\r\n';
+
+        const resultUnix = parseProviders(outputUnix);
+        const resultWindows = parseProviders(outputWindows);
+
+        expect(resultUnix).toHaveLength(2);
+        expect(resultWindows).toHaveLength(2);
+      });
+
+      it('should handle provider names with numbers and special characters', () => {
+        const output = '●  gpt-4o api';
+        const result = parseProviders(output);
+
+        expect(result[0].id).toBe('gpt-4o');
+        expect(result[0].name).toBe('gpt-4o');
+      });
+    });
+
+    // =======================================================================
+    // Real-world CLI Output
+    // =======================================================================
+
+    describe('Real-world CLI Output', () => {
+      it('should parse CLI output with box drawing characters and decorations', () => {
+        const output = `┌─────────────────────────────────────────────────┐
+│ Authenticated Providers                        │
+├─────────────────────────────────────────────────┤
+●  anthropic oauth
+●  openai api
+└─────────────────────────────────────────────────┘`;
+
+        const result = parseProviders(output);
+
+        expect(result).toHaveLength(2);
+        expect(result[0].id).toBe('anthropic');
+        expect(result[1].id).toBe('openai');
+      });
+
+      it('should parse output with ANSI colors and box characters', () => {
+        const output = `\x1b[1m┌─────────────────────────────────────────────────┐\x1b[0m
+\x1b[1m│ Authenticated Providers                        │\x1b[0m
+\x1b[1m├─────────────────────────────────────────────────┤\x1b[0m
+\x1b[32m●\x1b[0m  \x1b[33manthropic\x1b[0m \x1b[36moauth\x1b[0m
+\x1b[32m●\x1b[0m  \x1b[33mgoogle\x1b[0m \x1b[36mapi\x1b[0m
+\x1b[1m└─────────────────────────────────────────────────┘\x1b[0m`;
+
+        const result = parseProviders(output);
+
+        expect(result).toHaveLength(2);
+        expect(result[0].id).toBe('anthropic');
+        expect(result[1].id).toBe('google');
+      });
+
+      it('should handle "no authenticated providers" message', () => {
+        const output = `┌─────────────────────────────────────────────────┐
+│ No authenticated providers found               │
+└─────────────────────────────────────────────────┘`;
+
+        const result = parseProviders(output);
+        expect(result).toEqual([]);
+      });
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/providers/provider-factory.test.ts b/temp_repo/apps/server/tests/unit/providers/provider-factory.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f92c7256bc2cf63d99031992414779cd06d55b83
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/providers/provider-factory.test.ts
@@ -0,0 +1,331 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ProviderFactory } from '@/providers/provider-factory.js';
+import { ClaudeProvider } from '@/providers/claude-provider.js';
+import { CursorProvider } from '@/providers/cursor-provider.js';
+import { CodexProvider } from '@/providers/codex-provider.js';
+import { OpencodeProvider } from '@/providers/opencode-provider.js';
+import { GeminiProvider } from '@/providers/gemini-provider.js';
+import { CopilotProvider } from '@/providers/copilot-provider.js';
+
+describe('provider-factory.ts', () => {
+  let consoleSpy: any;
+  let detectClaudeSpy: any;
+  let detectCursorSpy: any;
+  let detectCodexSpy: any;
+  let detectOpencodeSpy: any;
+  let detectGeminiSpy: any;
+  let detectCopilotSpy: any;
+
+  beforeEach(() => {
+    consoleSpy = {
+      warn: vi.spyOn(console, 'warn').mockImplementation(() => {}),
+    };
+
+    // Avoid hitting real CLI / filesystem checks during unit tests
+    detectClaudeSpy = vi
+      .spyOn(ClaudeProvider.prototype, 'detectInstallation')
+      .mockResolvedValue({ installed: true });
+    detectCursorSpy = vi
+      .spyOn(CursorProvider.prototype, 'detectInstallation')
+      .mockResolvedValue({ installed: true });
+    detectCodexSpy = vi
+      .spyOn(CodexProvider.prototype, 'detectInstallation')
+      .mockResolvedValue({ installed: true });
+    detectOpencodeSpy = vi
+      .spyOn(OpencodeProvider.prototype, 'detectInstallation')
+      .mockResolvedValue({ installed: true });
+    detectGeminiSpy = vi
+      .spyOn(GeminiProvider.prototype, 'detectInstallation')
+      .mockResolvedValue({ installed: true });
+    detectCopilotSpy = vi
+      .spyOn(CopilotProvider.prototype, 'detectInstallation')
+      .mockResolvedValue({ installed: true });
+  });
+
+  afterEach(() => {
+    consoleSpy.warn.mockRestore();
+    detectClaudeSpy.mockRestore();
+    detectCursorSpy.mockRestore();
+    detectCodexSpy.mockRestore();
+    detectOpencodeSpy.mockRestore();
+    detectGeminiSpy.mockRestore();
+    detectCopilotSpy.mockRestore();
+  });
+
+  describe('getProviderForModel', () => {
+    describe('Claude models (claude-* prefix)', () => {
+      it('should return ClaudeProvider for claude-opus-4-6', () => {
+        const provider = ProviderFactory.getProviderForModel('claude-opus-4-6');
+        expect(provider).toBeInstanceOf(ClaudeProvider);
+      });
+
+      it('should return ClaudeProvider for claude-sonnet-4-6', () => {
+        const provider = ProviderFactory.getProviderForModel('claude-sonnet-4-6');
+        expect(provider).toBeInstanceOf(ClaudeProvider);
+      });
+
+      it('should return ClaudeProvider for claude-haiku-4-5', () => {
+        const provider = ProviderFactory.getProviderForModel('claude-haiku-4-5');
+        expect(provider).toBeInstanceOf(ClaudeProvider);
+      });
+
+      it('should be case-insensitive for claude models', () => {
+        const provider = ProviderFactory.getProviderForModel('CLAUDE-OPUS-4-6');
+        expect(provider).toBeInstanceOf(ClaudeProvider);
+      });
+    });
+
+    describe('Claude aliases', () => {
+      it("should return ClaudeProvider for 'haiku'", () => {
+        const provider = ProviderFactory.getProviderForModel('haiku');
+        expect(provider).toBeInstanceOf(ClaudeProvider);
+      });
+
+      it("should return ClaudeProvider for 'sonnet'", () => {
+        const provider = ProviderFactory.getProviderForModel('sonnet');
+        expect(provider).toBeInstanceOf(ClaudeProvider);
+      });
+
+      it("should return ClaudeProvider for 'opus'", () => {
+        const provider = ProviderFactory.getProviderForModel('opus');
+        expect(provider).toBeInstanceOf(ClaudeProvider);
+      });
+
+      it('should be case-insensitive for aliases', () => {
+        const provider1 = ProviderFactory.getProviderForModel('HAIKU');
+        const provider2 = ProviderFactory.getProviderForModel('Sonnet');
+        const provider3 = ProviderFactory.getProviderForModel('Opus');
+
+        expect(provider1).toBeInstanceOf(ClaudeProvider);
+        expect(provider2).toBeInstanceOf(ClaudeProvider);
+        expect(provider3).toBeInstanceOf(ClaudeProvider);
+      });
+    });
+
+    describe('Cursor models (cursor-* prefix)', () => {
+      it('should return CursorProvider for cursor-auto', () => {
+        const provider = ProviderFactory.getProviderForModel('cursor-auto');
+        expect(provider).toBeInstanceOf(CursorProvider);
+      });
+
+      it('should return CursorProvider for cursor-sonnet-4.5', () => {
+        const provider = ProviderFactory.getProviderForModel('cursor-sonnet-4.5');
+        expect(provider).toBeInstanceOf(CursorProvider);
+      });
+
+      it('should return CursorProvider for cursor-gpt-5.2', () => {
+        const provider = ProviderFactory.getProviderForModel('cursor-gpt-5.2');
+        expect(provider).toBeInstanceOf(CursorProvider);
+      });
+
+      it('should be case-insensitive for cursor models', () => {
+        const provider = ProviderFactory.getProviderForModel('CURSOR-AUTO');
+        expect(provider).toBeInstanceOf(CursorProvider);
+      });
+
+      it('should return CursorProvider for known cursor model ID without prefix', () => {
+        const provider = ProviderFactory.getProviderForModel('auto');
+        expect(provider).toBeInstanceOf(CursorProvider);
+      });
+    });
+
+    describe('Unknown models', () => {
+      it('should default to ClaudeProvider for unknown model', () => {
+        const provider = ProviderFactory.getProviderForModel('unknown-model-123');
+        expect(provider).toBeInstanceOf(ClaudeProvider);
+      });
+
+      it('should handle empty string by defaulting to ClaudeProvider', () => {
+        const provider = ProviderFactory.getProviderForModel('');
+        expect(provider).toBeInstanceOf(ClaudeProvider);
+      });
+
+      it('should default to ClaudeProvider for completely unknown prefixes', () => {
+        const provider = ProviderFactory.getProviderForModel('random-xyz-model');
+        expect(provider).toBeInstanceOf(ClaudeProvider);
+      });
+    });
+
+    describe('Cursor models via model ID lookup', () => {
+      it('should return CodexProvider for gpt-5.2 (Codex model, not Cursor)', () => {
+        // gpt-5.2 is in both CURSOR_MODEL_MAP and CODEX_MODEL_CONFIG_MAP
+        // It should route to Codex since Codex models take priority
+        const provider = ProviderFactory.getProviderForModel('gpt-5.2');
+        expect(provider).toBeInstanceOf(CodexProvider);
+      });
+
+      it('should return CursorProvider for grok (valid Cursor model)', () => {
+        const provider = ProviderFactory.getProviderForModel('grok');
+        expect(provider).toBeInstanceOf(CursorProvider);
+      });
+
+      it('should return CursorProvider for gemini-3-pro (valid Cursor model)', () => {
+        const provider = ProviderFactory.getProviderForModel('gemini-3-pro');
+        expect(provider).toBeInstanceOf(CursorProvider);
+      });
+    });
+  });
+
+  describe('getAllProviders', () => {
+    it('should return array of all providers', () => {
+      const providers = ProviderFactory.getAllProviders();
+      expect(Array.isArray(providers)).toBe(true);
+    });
+
+    it('should include ClaudeProvider', () => {
+      const providers = ProviderFactory.getAllProviders();
+      const hasClaudeProvider = providers.some((p) => p instanceof ClaudeProvider);
+      expect(hasClaudeProvider).toBe(true);
+    });
+
+    it('should return exactly 6 providers', () => {
+      const providers = ProviderFactory.getAllProviders();
+      expect(providers).toHaveLength(6);
+    });
+
+    it('should include CopilotProvider', () => {
+      const providers = ProviderFactory.getAllProviders();
+      const hasCopilotProvider = providers.some((p) => p instanceof CopilotProvider);
+      expect(hasCopilotProvider).toBe(true);
+    });
+
+    it('should include GeminiProvider', () => {
+      const providers = ProviderFactory.getAllProviders();
+      const hasGeminiProvider = providers.some((p) => p instanceof GeminiProvider);
+      expect(hasGeminiProvider).toBe(true);
+    });
+
+    it('should include CursorProvider', () => {
+      const providers = ProviderFactory.getAllProviders();
+      const hasCursorProvider = providers.some((p) => p instanceof CursorProvider);
+      expect(hasCursorProvider).toBe(true);
+    });
+
+    it('should create new instances each time', () => {
+      const providers1 = ProviderFactory.getAllProviders();
+      const providers2 = ProviderFactory.getAllProviders();
+
+      expect(providers1[0]).not.toBe(providers2[0]);
+    });
+  });
+
+  describe('checkAllProviders', () => {
+    it('should return installation status for all providers', async () => {
+      const statuses = await ProviderFactory.checkAllProviders();
+
+      expect(statuses).toHaveProperty('claude');
+    });
+
+    it('should call detectInstallation on each provider', async () => {
+      const statuses = await ProviderFactory.checkAllProviders();
+
+      expect(statuses.claude).toHaveProperty('installed');
+    });
+
+    it('should return correct provider names as keys', async () => {
+      const statuses = await ProviderFactory.checkAllProviders();
+      const keys = Object.keys(statuses);
+
+      expect(keys).toContain('claude');
+      expect(keys).toContain('cursor');
+      expect(keys).toContain('codex');
+      expect(keys).toContain('opencode');
+      expect(keys).toContain('gemini');
+      expect(keys).toContain('copilot');
+      expect(keys).toHaveLength(6);
+    });
+
+    it('should include cursor status', async () => {
+      const statuses = await ProviderFactory.checkAllProviders();
+
+      expect(statuses.cursor).toHaveProperty('installed');
+    });
+  });
+
+  describe('getProviderByName', () => {
+    it("should return ClaudeProvider for 'claude'", () => {
+      const provider = ProviderFactory.getProviderByName('claude');
+      expect(provider).toBeInstanceOf(ClaudeProvider);
+    });
+
+    it("should return ClaudeProvider for 'anthropic'", () => {
+      const provider = ProviderFactory.getProviderByName('anthropic');
+      expect(provider).toBeInstanceOf(ClaudeProvider);
+    });
+
+    it("should return CursorProvider for 'cursor'", () => {
+      const provider = ProviderFactory.getProviderByName('cursor');
+      expect(provider).toBeInstanceOf(CursorProvider);
+    });
+
+    it('should be case-insensitive', () => {
+      const provider1 = ProviderFactory.getProviderByName('CLAUDE');
+      const provider2 = ProviderFactory.getProviderByName('ANTHROPIC');
+      const provider3 = ProviderFactory.getProviderByName('CURSOR');
+
+      expect(provider1).toBeInstanceOf(ClaudeProvider);
+      expect(provider2).toBeInstanceOf(ClaudeProvider);
+      expect(provider3).toBeInstanceOf(CursorProvider);
+    });
+
+    it('should return null for unknown provider', () => {
+      const provider = ProviderFactory.getProviderByName('unknown');
+      expect(provider).toBeNull();
+    });
+
+    it('should return null for empty string', () => {
+      const provider = ProviderFactory.getProviderByName('');
+      expect(provider).toBeNull();
+    });
+
+    it('should create new instance each time', () => {
+      const provider1 = ProviderFactory.getProviderByName('claude');
+      const provider2 = ProviderFactory.getProviderByName('claude');
+
+      expect(provider1).not.toBe(provider2);
+      expect(provider1).toBeInstanceOf(ClaudeProvider);
+      expect(provider2).toBeInstanceOf(ClaudeProvider);
+    });
+  });
+
+  describe('getAllAvailableModels', () => {
+    it('should return array of models', () => {
+      const models = ProviderFactory.getAllAvailableModels();
+      expect(Array.isArray(models)).toBe(true);
+    });
+
+    it('should include models from all providers', () => {
+      const models = ProviderFactory.getAllAvailableModels();
+      expect(models.length).toBeGreaterThan(0);
+    });
+
+    it('should return models with required fields', () => {
+      const models = ProviderFactory.getAllAvailableModels();
+
+      models.forEach((model) => {
+        expect(model).toHaveProperty('id');
+        expect(model).toHaveProperty('name');
+        expect(typeof model.id).toBe('string');
+        expect(typeof model.name).toBe('string');
+      });
+    });
+
+    it('should include Claude models', () => {
+      const models = ProviderFactory.getAllAvailableModels();
+
+      // Claude models should include claude-* in their IDs
+      const hasClaudeModels = models.some((m) => m.id.toLowerCase().includes('claude'));
+
+      expect(hasClaudeModels).toBe(true);
+    });
+
+    it('should include Cursor models', () => {
+      const models = ProviderFactory.getAllAvailableModels();
+
+      // Cursor models should include cursor provider
+      const hasCursorModels = models.some((m) => m.provider === 'cursor');
+
+      expect(hasCursorModels).toBe(true);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/routes/app-spec/common.test.ts b/temp_repo/apps/server/tests/unit/routes/app-spec/common.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a348a2aa484cb8e06121bf666b58e72d2769239a
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/routes/app-spec/common.test.ts
@@ -0,0 +1,104 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import {
+  setRunningState,
+  getErrorMessage,
+  getSpecRegenerationStatus,
+} from '@/routes/app-spec/common.js';
+
+const TEST_PROJECT_PATH = '/tmp/automaker-test-project';
+
+describe('app-spec/common.ts', () => {
+  beforeEach(() => {
+    // Reset state before each test
+    setRunningState(TEST_PROJECT_PATH, false, null);
+  });
+
+  describe('setRunningState', () => {
+    it('should set isRunning to true when running is true', () => {
+      setRunningState(TEST_PROJECT_PATH, true);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).isRunning).toBe(true);
+    });
+
+    it('should set isRunning to false when running is false', () => {
+      setRunningState(TEST_PROJECT_PATH, true);
+      setRunningState(TEST_PROJECT_PATH, false);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).isRunning).toBe(false);
+    });
+
+    it('should set currentAbortController when provided', () => {
+      const controller = new AbortController();
+      setRunningState(TEST_PROJECT_PATH, true, controller);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).currentAbortController).toBe(controller);
+    });
+
+    it('should set currentAbortController to null when not provided', () => {
+      const controller = new AbortController();
+      setRunningState(TEST_PROJECT_PATH, true, controller);
+      setRunningState(TEST_PROJECT_PATH, false);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).currentAbortController).toBe(null);
+    });
+
+    it('should keep currentAbortController when explicitly passed null while running', () => {
+      const controller = new AbortController();
+      setRunningState(TEST_PROJECT_PATH, true, controller);
+      setRunningState(TEST_PROJECT_PATH, true, null);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).currentAbortController).toBe(controller);
+    });
+
+    it('should update state multiple times correctly', () => {
+      const controller1 = new AbortController();
+      const controller2 = new AbortController();
+
+      setRunningState(TEST_PROJECT_PATH, true, controller1);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).isRunning).toBe(true);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).currentAbortController).toBe(controller1);
+
+      setRunningState(TEST_PROJECT_PATH, true, controller2);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).isRunning).toBe(true);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).currentAbortController).toBe(controller2);
+
+      setRunningState(TEST_PROJECT_PATH, false, null);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).isRunning).toBe(false);
+      expect(getSpecRegenerationStatus(TEST_PROJECT_PATH).currentAbortController).toBe(null);
+    });
+  });
+
+  describe('getErrorMessage', () => {
+    it('should return message from Error instance', () => {
+      const error = new Error('Test error message');
+      expect(getErrorMessage(error)).toBe('Test error message');
+    });
+
+    it("should return 'Unknown error' for non-Error objects", () => {
+      expect(getErrorMessage('string error')).toBe('Unknown error');
+      expect(getErrorMessage(123)).toBe('Unknown error');
+      expect(getErrorMessage(null)).toBe('Unknown error');
+      expect(getErrorMessage(undefined)).toBe('Unknown error');
+      expect(getErrorMessage({})).toBe('Unknown error');
+      expect(getErrorMessage([])).toBe('Unknown error');
+    });
+
+    it('should return message from Error with empty message', () => {
+      const error = new Error('');
+      expect(getErrorMessage(error)).toBe('');
+    });
+
+    it('should handle Error objects with custom properties', () => {
+      const error = new Error('Base message');
+      (error as any).customProp = 'custom value';
+      expect(getErrorMessage(error)).toBe('Base message');
+    });
+
+    it('should handle Error objects created with different constructors', () => {
+      class CustomError extends Error {
+        constructor(message: string) {
+          super(message);
+          this.name = 'CustomError';
+        }
+      }
+
+      const customError = new CustomError('Custom error message');
+      expect(getErrorMessage(customError)).toBe('Custom error message');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/routes/app-spec/parse-and-create-features-defaults.test.ts b/temp_repo/apps/server/tests/unit/routes/app-spec/parse-and-create-features-defaults.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8f1080ac7316d8d0ec74970e99e391fd7069ef1b
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/routes/app-spec/parse-and-create-features-defaults.test.ts
@@ -0,0 +1,270 @@
+/**
+ * Tests for default fields applied to features created by parseAndCreateFeatures
+ *
+ * Verifies that auto-created features include planningMode: 'skip',
+ * requirePlanApproval: false, and dependencies: [].
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import path from 'path';
+
+// Use vi.hoisted to create mock functions that can be referenced in vi.mock factories
+const { mockMkdir, mockAtomicWriteJson, mockExtractJsonWithArray, mockCreateNotification } =
+  vi.hoisted(() => ({
+    mockMkdir: vi.fn().mockResolvedValue(undefined),
+    mockAtomicWriteJson: vi.fn().mockResolvedValue(undefined),
+    mockExtractJsonWithArray: vi.fn(),
+    mockCreateNotification: vi.fn().mockResolvedValue(undefined),
+  }));
+
+vi.mock('@/lib/secure-fs.js', () => ({
+  mkdir: mockMkdir,
+}));
+
+vi.mock('@automaker/utils', () => ({
+  createLogger: vi.fn().mockReturnValue({
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    debug: vi.fn(),
+  }),
+  atomicWriteJson: mockAtomicWriteJson,
+  DEFAULT_BACKUP_COUNT: 3,
+}));
+
+vi.mock('@automaker/platform', () => ({
+  getFeaturesDir: vi.fn((projectPath: string) => path.join(projectPath, '.automaker', 'features')),
+}));
+
+vi.mock('@/lib/json-extractor.js', () => ({
+  extractJsonWithArray: mockExtractJsonWithArray,
+}));
+
+vi.mock('@/services/notification-service.js', () => ({
+  getNotificationService: vi.fn(() => ({
+    createNotification: mockCreateNotification,
+  })),
+}));
+
+// Import after mocks are set up
+import { parseAndCreateFeatures } from '../../../../src/routes/app-spec/parse-and-create-features.js';
+
+describe('parseAndCreateFeatures - default fields', () => {
+  const mockEvents = {
+    emit: vi.fn(),
+  } as any;
+
+  const projectPath = '/test/project';
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should set planningMode to "skip" on created features', async () => {
+    mockExtractJsonWithArray.mockReturnValue({
+      features: [
+        {
+          id: 'feature-1',
+          title: 'Test Feature',
+          description: 'A test feature',
+          priority: 1,
+          complexity: 'simple',
+        },
+      ],
+    });
+
+    await parseAndCreateFeatures(projectPath, 'content', mockEvents);
+
+    expect(mockAtomicWriteJson).toHaveBeenCalledTimes(1);
+    const writtenData = mockAtomicWriteJson.mock.calls[0][1];
+    expect(writtenData.planningMode).toBe('skip');
+  });
+
+  it('should set requirePlanApproval to false on created features', async () => {
+    mockExtractJsonWithArray.mockReturnValue({
+      features: [
+        {
+          id: 'feature-1',
+          title: 'Test Feature',
+          description: 'A test feature',
+        },
+      ],
+    });
+
+    await parseAndCreateFeatures(projectPath, 'content', mockEvents);
+
+    const writtenData = mockAtomicWriteJson.mock.calls[0][1];
+    expect(writtenData.requirePlanApproval).toBe(false);
+  });
+
+  it('should set dependencies to empty array when not provided', async () => {
+    mockExtractJsonWithArray.mockReturnValue({
+      features: [
+        {
+          id: 'feature-1',
+          title: 'Test Feature',
+          description: 'A test feature',
+        },
+      ],
+    });
+
+    await parseAndCreateFeatures(projectPath, 'content', mockEvents);
+
+    const writtenData = mockAtomicWriteJson.mock.calls[0][1];
+    expect(writtenData.dependencies).toEqual([]);
+  });
+
+  it('should preserve dependencies when provided by the parser', async () => {
+    mockExtractJsonWithArray.mockReturnValue({
+      features: [
+        {
+          id: 'feature-1',
+          title: 'Test Feature',
+          description: 'A test feature',
+          dependencies: ['feature-0'],
+        },
+      ],
+    });
+
+    await parseAndCreateFeatures(projectPath, 'content', mockEvents);
+
+    const writtenData = mockAtomicWriteJson.mock.calls[0][1];
+    expect(writtenData.dependencies).toEqual(['feature-0']);
+  });
+
+  it('should apply all default fields consistently across multiple features', async () => {
+    mockExtractJsonWithArray.mockReturnValue({
+      features: [
+        {
+          id: 'feature-1',
+          title: 'Feature 1',
+          description: 'First feature',
+        },
+        {
+          id: 'feature-2',
+          title: 'Feature 2',
+          description: 'Second feature',
+          dependencies: ['feature-1'],
+        },
+        {
+          id: 'feature-3',
+          title: 'Feature 3',
+          description: 'Third feature',
+        },
+      ],
+    });
+
+    await parseAndCreateFeatures(projectPath, 'content', mockEvents);
+
+    expect(mockAtomicWriteJson).toHaveBeenCalledTimes(3);
+
+    for (let i = 0; i < 3; i++) {
+      const writtenData = mockAtomicWriteJson.mock.calls[i][1];
+      expect(writtenData.planningMode, `feature ${i + 1} planningMode`).toBe('skip');
+      expect(writtenData.requirePlanApproval, `feature ${i + 1} requirePlanApproval`).toBe(false);
+      expect(Array.isArray(writtenData.dependencies), `feature ${i + 1} dependencies`).toBe(true);
+    }
+
+    // Feature 2 should have its explicit dependency preserved
+    expect(mockAtomicWriteJson.mock.calls[1][1].dependencies).toEqual(['feature-1']);
+    // Features 1 and 3 should have empty arrays
+    expect(mockAtomicWriteJson.mock.calls[0][1].dependencies).toEqual([]);
+    expect(mockAtomicWriteJson.mock.calls[2][1].dependencies).toEqual([]);
+  });
+
+  it('should set status to "backlog" on all created features', async () => {
+    mockExtractJsonWithArray.mockReturnValue({
+      features: [
+        {
+          id: 'feature-1',
+          title: 'Test Feature',
+          description: 'A test feature',
+        },
+      ],
+    });
+
+    await parseAndCreateFeatures(projectPath, 'content', mockEvents);
+
+    const writtenData = mockAtomicWriteJson.mock.calls[0][1];
+    expect(writtenData.status).toBe('backlog');
+  });
+
+  it('should include createdAt and updatedAt timestamps', async () => {
+    mockExtractJsonWithArray.mockReturnValue({
+      features: [
+        {
+          id: 'feature-1',
+          title: 'Test Feature',
+          description: 'A test feature',
+        },
+      ],
+    });
+
+    await parseAndCreateFeatures(projectPath, 'content', mockEvents);
+
+    const writtenData = mockAtomicWriteJson.mock.calls[0][1];
+    expect(writtenData.createdAt).toBeDefined();
+    expect(writtenData.updatedAt).toBeDefined();
+    // Should be valid ISO date strings
+    expect(new Date(writtenData.createdAt).toISOString()).toBe(writtenData.createdAt);
+    expect(new Date(writtenData.updatedAt).toISOString()).toBe(writtenData.updatedAt);
+  });
+
+  it('should use default values for optional fields not provided', async () => {
+    mockExtractJsonWithArray.mockReturnValue({
+      features: [
+        {
+          id: 'feature-minimal',
+          title: 'Minimal Feature',
+          description: 'Only required fields',
+        },
+      ],
+    });
+
+    await parseAndCreateFeatures(projectPath, 'content', mockEvents);
+
+    const writtenData = mockAtomicWriteJson.mock.calls[0][1];
+    expect(writtenData.category).toBe('Uncategorized');
+    expect(writtenData.priority).toBe(2);
+    expect(writtenData.complexity).toBe('moderate');
+    expect(writtenData.dependencies).toEqual([]);
+    expect(writtenData.planningMode).toBe('skip');
+    expect(writtenData.requirePlanApproval).toBe(false);
+  });
+
+  it('should emit success event after creating features', async () => {
+    mockExtractJsonWithArray.mockReturnValue({
+      features: [
+        {
+          id: 'feature-1',
+          title: 'Feature 1',
+          description: 'First',
+        },
+      ],
+    });
+
+    await parseAndCreateFeatures(projectPath, 'content', mockEvents);
+
+    expect(mockEvents.emit).toHaveBeenCalledWith(
+      'spec-regeneration:event',
+      expect.objectContaining({
+        type: 'spec_regeneration_complete',
+        projectPath,
+      })
+    );
+  });
+
+  it('should emit error event when no valid JSON is found', async () => {
+    mockExtractJsonWithArray.mockReturnValue(null);
+
+    await parseAndCreateFeatures(projectPath, 'invalid content', mockEvents);
+
+    expect(mockEvents.emit).toHaveBeenCalledWith(
+      'spec-regeneration:event',
+      expect.objectContaining({
+        type: 'spec_regeneration_error',
+        projectPath,
+      })
+    );
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/routes/app-spec/parse-and-create-features.test.ts b/temp_repo/apps/server/tests/unit/routes/app-spec/parse-and-create-features.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9bb5c1200f41ae01eb95d4d5358b5927d7da30c8
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/routes/app-spec/parse-and-create-features.test.ts
@@ -0,0 +1,244 @@
+import { describe, it, expect } from 'vitest';
+
+describe('app-spec/parse-and-create-features.ts - JSON extraction', () => {
+  // Test the JSON extraction regex pattern used in parseAndCreateFeatures
+  const jsonExtractionPattern = /\{[\s\S]*"features"[\s\S]*\}/;
+
+  describe('JSON extraction regex', () => {
+    it('should extract JSON with features array', () => {
+      const content = `Here is the response:
+{
+  "features": [
+    {
+      "id": "feature-1",
+      "title": "Test Feature",
+      "description": "A test feature",
+      "priority": 1,
+      "complexity": "simple",
+      "dependencies": []
+    }
+  ]
+}`;
+
+      const match = content.match(jsonExtractionPattern);
+      expect(match).not.toBeNull();
+      expect(match![0]).toContain('"features"');
+      expect(match![0]).toContain('"id": "feature-1"');
+    });
+
+    it('should extract JSON with multiple features', () => {
+      const content = `Some text before
+{
+  "features": [
+    {
+      "id": "feature-1",
+      "title": "Feature 1"
+    },
+    {
+      "id": "feature-2",
+      "title": "Feature 2"
+    }
+  ]
+}
+Some text after`;
+
+      const match = content.match(jsonExtractionPattern);
+      expect(match).not.toBeNull();
+      expect(match![0]).toContain('"features"');
+      expect(match![0]).toContain('"feature-1"');
+      expect(match![0]).toContain('"feature-2"');
+    });
+
+    it('should extract JSON with nested objects and arrays', () => {
+      const content = `Response:
+{
+  "features": [
+    {
+      "id": "feature-1",
+      "dependencies": ["dep-1", "dep-2"],
+      "metadata": {
+        "tags": ["tag1", "tag2"]
+      }
+    }
+  ]
+}`;
+
+      const match = content.match(jsonExtractionPattern);
+      expect(match).not.toBeNull();
+      expect(match![0]).toContain('"dependencies"');
+      expect(match![0]).toContain('"dep-1"');
+    });
+
+    it('should handle JSON with whitespace and newlines', () => {
+      const content = `Text before
+{
+  "features": [
+    {
+      "id": "feature-1",
+      "title": "Feature",
+      "description": "A feature\nwith newlines"
+    }
+  ]
+}
+Text after`;
+
+      const match = content.match(jsonExtractionPattern);
+      expect(match).not.toBeNull();
+      expect(match![0]).toContain('"features"');
+    });
+
+    it('should extract JSON when features array is empty', () => {
+      const content = `Response:
+{
+  "features": []
+}`;
+
+      const match = content.match(jsonExtractionPattern);
+      expect(match).not.toBeNull();
+      expect(match![0]).toContain('"features"');
+      expect(match![0]).toContain('[]');
+    });
+
+    it('should not match content without features key', () => {
+      const content = `{
+  "otherKey": "value"
+}`;
+
+      const match = content.match(jsonExtractionPattern);
+      expect(match).toBeNull();
+    });
+
+    it('should not match content without JSON structure', () => {
+      const content = 'Just plain text with features mentioned';
+      const match = content.match(jsonExtractionPattern);
+      expect(match).toBeNull();
+    });
+
+    it('should extract JSON when features key appears multiple times', () => {
+      const content = `Before:
+{
+  "features": [
+    {
+      "id": "feature-1",
+      "title": "Feature"
+    }
+  ]
+}
+After: The word "features" appears again`;
+
+      const match = content.match(jsonExtractionPattern);
+      expect(match).not.toBeNull();
+      // Should match from first { to last }
+      expect(match![0]).toContain('"features"');
+    });
+
+    it('should handle JSON with escaped quotes', () => {
+      const content = `{
+  "features": [
+    {
+      "id": "feature-1",
+      "description": "A feature with \\"quotes\\""
+    }
+  ]
+}`;
+
+      const match = content.match(jsonExtractionPattern);
+      expect(match).not.toBeNull();
+      expect(match![0]).toContain('"features"');
+    });
+
+    it('should extract JSON with complex nested structure', () => {
+      const content = `Response:
+{
+  "features": [
+    {
+      "id": "feature-1",
+      "dependencies": [
+        {
+          "id": "dep-1",
+          "type": "required"
+        }
+      ],
+      "metadata": {
+        "tags": ["tag1"],
+        "notes": "Some notes"
+      }
+    }
+  ],
+  "metadata": {
+    "version": "1.0"
+  }
+}`;
+
+      const match = content.match(jsonExtractionPattern);
+      expect(match).not.toBeNull();
+      expect(match![0]).toContain('"features"');
+      expect(match![0]).toContain('"metadata"');
+    });
+  });
+
+  describe('JSON parsing validation', () => {
+    it('should parse valid feature JSON structure', () => {
+      const validJson = `{
+  "features": [
+    {
+      "id": "feature-1",
+      "title": "Test Feature",
+      "description": "A test feature",
+      "priority": 1,
+      "complexity": "simple",
+      "dependencies": []
+    }
+  ]
+}`;
+
+      const parsed = JSON.parse(validJson);
+      expect(parsed.features).toBeDefined();
+      expect(Array.isArray(parsed.features)).toBe(true);
+      expect(parsed.features.length).toBe(1);
+      expect(parsed.features[0].id).toBe('feature-1');
+      expect(parsed.features[0].title).toBe('Test Feature');
+    });
+
+    it('should handle features with optional fields', () => {
+      const jsonWithOptionalFields = `{
+  "features": [
+    {
+      "id": "feature-1",
+      "title": "Feature",
+      "priority": 2,
+      "complexity": "moderate"
+    }
+  ]
+}`;
+
+      const parsed = JSON.parse(jsonWithOptionalFields);
+      expect(parsed.features[0].id).toBe('feature-1');
+      expect(parsed.features[0].priority).toBe(2);
+      // description and dependencies are optional
+      expect(parsed.features[0].description).toBeUndefined();
+      expect(parsed.features[0].dependencies).toBeUndefined();
+    });
+
+    it('should handle features with dependencies', () => {
+      const jsonWithDeps = `{
+  "features": [
+    {
+      "id": "feature-1",
+      "title": "Feature 1",
+      "dependencies": []
+    },
+    {
+      "id": "feature-2",
+      "title": "Feature 2",
+      "dependencies": ["feature-1"]
+    }
+  ]
+}`;
+
+      const parsed = JSON.parse(jsonWithDeps);
+      expect(parsed.features[0].dependencies).toEqual([]);
+      expect(parsed.features[1].dependencies).toEqual(['feature-1']);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/routes/backlog-plan/apply.test.ts b/temp_repo/apps/server/tests/unit/routes/backlog-plan/apply.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..44b5f2709cb91fdb8ffb41f0ea134376f3fbe597
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/routes/backlog-plan/apply.test.ts
@@ -0,0 +1,149 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { mockGetAll, mockCreate, mockUpdate, mockDelete, mockClearBacklogPlan } = vi.hoisted(() => ({
+  mockGetAll: vi.fn(),
+  mockCreate: vi.fn(),
+  mockUpdate: vi.fn(),
+  mockDelete: vi.fn(),
+  mockClearBacklogPlan: vi.fn(),
+}));
+
+vi.mock('@/services/feature-loader.js', () => ({
+  FeatureLoader: class {
+    getAll = mockGetAll;
+    create = mockCreate;
+    update = mockUpdate;
+    delete = mockDelete;
+  },
+}));
+
+vi.mock('@/routes/backlog-plan/common.js', () => ({
+  logger: {
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  },
+  clearBacklogPlan: mockClearBacklogPlan,
+  getErrorMessage: (error: unknown) => (error instanceof Error ? error.message : String(error)),
+  logError: vi.fn(),
+}));
+
+import { createApplyHandler } from '@/routes/backlog-plan/routes/apply.js';
+
+function createMockRes() {
+  const res: {
+    status: ReturnType<typeof vi.fn>;
+    json: ReturnType<typeof vi.fn>;
+  } = {
+    status: vi.fn(),
+    json: vi.fn(),
+  };
+  res.status.mockReturnValue(res);
+  return res;
+}
+
+describe('createApplyHandler', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetAll.mockResolvedValue([]);
+    mockCreate.mockResolvedValue({ id: 'feature-created' });
+    mockUpdate.mockResolvedValue({});
+    mockDelete.mockResolvedValue(true);
+    mockClearBacklogPlan.mockResolvedValue(undefined);
+  });
+
+  it('applies default feature model and planning settings when backlog plan additions omit them', async () => {
+    const settingsService = {
+      getGlobalSettings: vi.fn().mockResolvedValue({
+        defaultFeatureModel: { model: 'codex-gpt-5.2-codex', reasoningEffort: 'high' },
+        defaultPlanningMode: 'spec',
+        defaultRequirePlanApproval: true,
+      }),
+      getProjectSettings: vi.fn().mockResolvedValue({}),
+    } as any;
+
+    const req = {
+      body: {
+        projectPath: '/tmp/project',
+        plan: {
+          changes: [
+            {
+              type: 'add',
+              feature: {
+                id: 'feature-from-plan',
+                title: 'Created from plan',
+                description: 'desc',
+              },
+            },
+          ],
+        },
+      },
+    } as any;
+    const res = createMockRes();
+
+    await createApplyHandler(settingsService)(req, res as any);
+
+    expect(mockCreate).toHaveBeenCalledWith(
+      '/tmp/project',
+      expect.objectContaining({
+        model: 'codex-gpt-5.2-codex',
+        reasoningEffort: 'high',
+        planningMode: 'spec',
+        requirePlanApproval: true,
+      })
+    );
+    expect(res.json).toHaveBeenCalledWith(
+      expect.objectContaining({
+        success: true,
+      })
+    );
+  });
+
+  it('uses project default feature model override and enforces no approval for skip mode', async () => {
+    const settingsService = {
+      getGlobalSettings: vi.fn().mockResolvedValue({
+        defaultFeatureModel: { model: 'claude-opus' },
+        defaultPlanningMode: 'skip',
+        defaultRequirePlanApproval: true,
+      }),
+      getProjectSettings: vi.fn().mockResolvedValue({
+        defaultFeatureModel: {
+          model: 'GLM-4.7',
+          providerId: 'provider-glm',
+          thinkingLevel: 'adaptive',
+        },
+      }),
+    } as any;
+
+    const req = {
+      body: {
+        projectPath: '/tmp/project',
+        plan: {
+          changes: [
+            {
+              type: 'add',
+              feature: {
+                id: 'feature-from-plan',
+                title: 'Created from plan',
+              },
+            },
+          ],
+        },
+      },
+    } as any;
+    const res = createMockRes();
+
+    await createApplyHandler(settingsService)(req, res as any);
+
+    expect(mockCreate).toHaveBeenCalledWith(
+      '/tmp/project',
+      expect.objectContaining({
+        model: 'GLM-4.7',
+        providerId: 'provider-glm',
+        thinkingLevel: 'adaptive',
+        planningMode: 'skip',
+        requirePlanApproval: false,
+      })
+    );
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/routes/backlog-plan/generate-plan.test.ts b/temp_repo/apps/server/tests/unit/routes/backlog-plan/generate-plan.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..92556a35d3ce47bd80522b06ff7ef4633ba6e6c3
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/routes/backlog-plan/generate-plan.test.ts
@@ -0,0 +1,218 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { BacklogPlanResult, ProviderMessage } from '@automaker/types';
+
+const {
+  mockGetAll,
+  mockExecuteQuery,
+  mockSaveBacklogPlan,
+  mockSetRunningState,
+  mockSetRunningDetails,
+  mockGetPromptCustomization,
+  mockGetAutoLoadClaudeMdSetting,
+  mockGetUseClaudeCodeSystemPromptSetting,
+} = vi.hoisted(() => ({
+  mockGetAll: vi.fn(),
+  mockExecuteQuery: vi.fn(),
+  mockSaveBacklogPlan: vi.fn(),
+  mockSetRunningState: vi.fn(),
+  mockSetRunningDetails: vi.fn(),
+  mockGetPromptCustomization: vi.fn(),
+  mockGetAutoLoadClaudeMdSetting: vi.fn(),
+  mockGetUseClaudeCodeSystemPromptSetting: vi.fn(),
+}));
+
+vi.mock('@/services/feature-loader.js', () => ({
+  FeatureLoader: class {
+    getAll = mockGetAll;
+  },
+}));
+
+vi.mock('@/providers/provider-factory.js', () => ({
+  ProviderFactory: {
+    getProviderForModel: vi.fn(() => ({
+      executeQuery: mockExecuteQuery,
+    })),
+  },
+}));
+
+vi.mock('@/routes/backlog-plan/common.js', () => ({
+  logger: {
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  },
+  setRunningState: mockSetRunningState,
+  setRunningDetails: mockSetRunningDetails,
+  getErrorMessage: (error: unknown) => (error instanceof Error ? error.message : String(error)),
+  saveBacklogPlan: mockSaveBacklogPlan,
+}));
+
+vi.mock('@/lib/settings-helpers.js', () => ({
+  getPromptCustomization: mockGetPromptCustomization,
+  getAutoLoadClaudeMdSetting: mockGetAutoLoadClaudeMdSetting,
+  getUseClaudeCodeSystemPromptSetting: mockGetUseClaudeCodeSystemPromptSetting,
+  getPhaseModelWithOverrides: vi.fn(),
+}));
+
+import { generateBacklogPlan } from '@/routes/backlog-plan/generate-plan.js';
+
+function createMockEvents() {
+  return {
+    emit: vi.fn(),
+  };
+}
+
+describe('generateBacklogPlan', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockGetAll.mockResolvedValue([]);
+    mockGetPromptCustomization.mockResolvedValue({
+      backlogPlan: {
+        systemPrompt: 'System instructions',
+        userPromptTemplate:
+          'Current features:\n{{currentFeatures}}\n\nUser request:\n{{userRequest}}',
+      },
+    });
+    mockGetAutoLoadClaudeMdSetting.mockResolvedValue(false);
+    mockGetUseClaudeCodeSystemPromptSetting.mockResolvedValue(true);
+  });
+
+  it('salvages valid streamed JSON when Claude process exits with code 1', async () => {
+    const partialResult: BacklogPlanResult = {
+      changes: [
+        {
+          type: 'add',
+          feature: {
+            title: 'Add signup form',
+            description: 'Create signup UI and validation',
+            category: 'frontend',
+          },
+          reason: 'Required for user onboarding',
+        },
+      ],
+      summary: 'Adds signup feature to the backlog',
+      dependencyUpdates: [],
+    };
+
+    const responseJson = JSON.stringify(partialResult);
+
+    async function* streamWithExitError(): AsyncGenerator<ProviderMessage> {
+      yield {
+        type: 'assistant',
+        message: {
+          role: 'assistant',
+          content: [{ type: 'text', text: responseJson }],
+        },
+      };
+      throw new Error('Claude Code process exited with code 1');
+    }
+
+    mockExecuteQuery.mockReturnValueOnce(streamWithExitError());
+
+    const events = createMockEvents();
+    const abortController = new AbortController();
+
+    const result = await generateBacklogPlan(
+      '/tmp/project',
+      'Please add a signup feature',
+      events as any,
+      abortController,
+      undefined,
+      'claude-opus'
+    );
+
+    expect(mockExecuteQuery).toHaveBeenCalledTimes(1);
+    expect(result).toEqual(partialResult);
+    expect(mockSaveBacklogPlan).toHaveBeenCalledWith(
+      '/tmp/project',
+      expect.objectContaining({
+        prompt: 'Please add a signup feature',
+        model: 'claude-opus-4-6',
+        result: partialResult,
+      })
+    );
+    expect(events.emit).toHaveBeenCalledWith('backlog-plan:event', {
+      type: 'backlog_plan_complete',
+      result: partialResult,
+    });
+    expect(mockSetRunningState).toHaveBeenCalledWith(false, null);
+    expect(mockSetRunningDetails).toHaveBeenCalledWith(null);
+  });
+
+  it('prefers parseable provider result over longer non-JSON accumulated text on exit', async () => {
+    const recoveredResult: BacklogPlanResult = {
+      changes: [
+        {
+          type: 'add',
+          feature: {
+            title: 'Add reset password flow',
+            description: 'Implement reset password request and token validation UI',
+            category: 'frontend',
+          },
+          reason: 'Supports account recovery',
+        },
+      ],
+      summary: 'Adds password reset capability',
+      dependencyUpdates: [],
+    };
+
+    const validProviderResult = JSON.stringify(recoveredResult);
+    const invalidAccumulatedText = `${validProviderResult}\n\nAdditional commentary that breaks raw JSON parsing.`;
+
+    async function* streamWithResultThenExit(): AsyncGenerator<ProviderMessage> {
+      yield {
+        type: 'assistant',
+        message: {
+          role: 'assistant',
+          content: [{ type: 'text', text: invalidAccumulatedText }],
+        },
+      };
+      yield {
+        type: 'result',
+        subtype: 'success',
+        duration_ms: 10,
+        duration_api_ms: 10,
+        is_error: false,
+        num_turns: 1,
+        result: validProviderResult,
+        session_id: 'session-1',
+        total_cost_usd: 0,
+        usage: {
+          input_tokens: 10,
+          cache_creation_input_tokens: 0,
+          cache_read_input_tokens: 0,
+          output_tokens: 10,
+          server_tool_use: {
+            web_search_requests: 0,
+          },
+          service_tier: 'standard',
+        },
+      };
+      throw new Error('Claude Code process exited with code 1');
+    }
+
+    mockExecuteQuery.mockReturnValueOnce(streamWithResultThenExit());
+
+    const events = createMockEvents();
+    const abortController = new AbortController();
+
+    const result = await generateBacklogPlan(
+      '/tmp/project',
+      'Add password reset support',
+      events as any,
+      abortController,
+      undefined,
+      'claude-opus'
+    );
+
+    expect(result).toEqual(recoveredResult);
+    expect(mockSaveBacklogPlan).toHaveBeenCalledWith(
+      '/tmp/project',
+      expect.objectContaining({
+        result: recoveredResult,
+      })
+    );
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/routes/pipeline.test.ts b/temp_repo/apps/server/tests/unit/routes/pipeline.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..299fdca82f0b8805a10f51514e1501aa97ce8dde
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/routes/pipeline.test.ts
@@ -0,0 +1,499 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { Request, Response } from 'express';
+import { createGetConfigHandler } from '@/routes/pipeline/routes/get-config.js';
+import { createSaveConfigHandler } from '@/routes/pipeline/routes/save-config.js';
+import { createAddStepHandler } from '@/routes/pipeline/routes/add-step.js';
+import { createUpdateStepHandler } from '@/routes/pipeline/routes/update-step.js';
+import { createDeleteStepHandler } from '@/routes/pipeline/routes/delete-step.js';
+import { createReorderStepsHandler } from '@/routes/pipeline/routes/reorder-steps.js';
+import type { PipelineService } from '@/services/pipeline-service.js';
+import type { PipelineConfig, PipelineStep } from '@automaker/types';
+import { createMockExpressContext } from '../../utils/mocks.js';
+
+describe('pipeline routes', () => {
+  let mockPipelineService: PipelineService;
+  let req: Request;
+  let res: Response;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockPipelineService = {
+      getPipelineConfig: vi.fn(),
+      savePipelineConfig: vi.fn(),
+      addStep: vi.fn(),
+      updateStep: vi.fn(),
+      deleteStep: vi.fn(),
+      reorderSteps: vi.fn(),
+    } as any;
+
+    const context = createMockExpressContext();
+    req = context.req;
+    res = context.res;
+  });
+
+  describe('get-config', () => {
+    it('should return pipeline config successfully', async () => {
+      const config: PipelineConfig = {
+        version: 1,
+        steps: [],
+      };
+
+      vi.mocked(mockPipelineService.getPipelineConfig).mockResolvedValue(config);
+      req.body = { projectPath: '/test/project' };
+
+      const handler = createGetConfigHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(mockPipelineService.getPipelineConfig).toHaveBeenCalledWith('/test/project');
+      expect(res.json).toHaveBeenCalledWith({
+        success: true,
+        config,
+      });
+    });
+
+    it('should return 400 if projectPath is missing', async () => {
+      req.body = {};
+
+      const handler = createGetConfigHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'projectPath is required',
+      });
+      expect(mockPipelineService.getPipelineConfig).not.toHaveBeenCalled();
+    });
+
+    it('should handle errors gracefully', async () => {
+      const error = new Error('Read failed');
+      vi.mocked(mockPipelineService.getPipelineConfig).mockRejectedValue(error);
+      req.body = { projectPath: '/test/project' };
+
+      const handler = createGetConfigHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(500);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'Read failed',
+      });
+    });
+  });
+
+  describe('save-config', () => {
+    it('should save pipeline config successfully', async () => {
+      const config: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 0,
+            instructions: 'Instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      vi.mocked(mockPipelineService.savePipelineConfig).mockResolvedValue(undefined);
+      req.body = { projectPath: '/test/project', config };
+
+      const handler = createSaveConfigHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(mockPipelineService.savePipelineConfig).toHaveBeenCalledWith('/test/project', config);
+      expect(res.json).toHaveBeenCalledWith({
+        success: true,
+      });
+    });
+
+    it('should return 400 if projectPath is missing', async () => {
+      req.body = { config: { version: 1, steps: [] } };
+
+      const handler = createSaveConfigHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'projectPath is required',
+      });
+    });
+
+    it('should return 400 if config is missing', async () => {
+      req.body = { projectPath: '/test/project' };
+
+      const handler = createSaveConfigHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'config is required',
+      });
+    });
+
+    it('should handle errors gracefully', async () => {
+      const error = new Error('Save failed');
+      vi.mocked(mockPipelineService.savePipelineConfig).mockRejectedValue(error);
+      req.body = {
+        projectPath: '/test/project',
+        config: { version: 1, steps: [] },
+      };
+
+      const handler = createSaveConfigHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(500);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'Save failed',
+      });
+    });
+  });
+
+  describe('add-step', () => {
+    it('should add step successfully', async () => {
+      const stepData = {
+        name: 'New Step',
+        order: 0,
+        instructions: 'Do something',
+        colorClass: 'blue',
+      };
+
+      const newStep: PipelineStep = {
+        ...stepData,
+        id: 'step1',
+        createdAt: '2024-01-01T00:00:00.000Z',
+        updatedAt: '2024-01-01T00:00:00.000Z',
+      };
+
+      vi.mocked(mockPipelineService.addStep).mockResolvedValue(newStep);
+      req.body = { projectPath: '/test/project', step: stepData };
+
+      const handler = createAddStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(mockPipelineService.addStep).toHaveBeenCalledWith('/test/project', stepData);
+      expect(res.json).toHaveBeenCalledWith({
+        success: true,
+        step: newStep,
+      });
+    });
+
+    it('should return 400 if projectPath is missing', async () => {
+      req.body = { step: { name: 'Step', order: 0, instructions: 'Do', colorClass: 'blue' } };
+
+      const handler = createAddStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'projectPath is required',
+      });
+    });
+
+    it('should return 400 if step is missing', async () => {
+      req.body = { projectPath: '/test/project' };
+
+      const handler = createAddStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'step is required',
+      });
+    });
+
+    it('should return 400 if step.name is missing', async () => {
+      req.body = {
+        projectPath: '/test/project',
+        step: { order: 0, instructions: 'Do', colorClass: 'blue' },
+      };
+
+      const handler = createAddStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'step.name is required',
+      });
+    });
+
+    it('should return 400 if step.instructions is missing', async () => {
+      req.body = {
+        projectPath: '/test/project',
+        step: { name: 'Step', order: 0, colorClass: 'blue' },
+      };
+
+      const handler = createAddStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'step.instructions is required',
+      });
+    });
+
+    it('should handle errors gracefully', async () => {
+      const error = new Error('Add failed');
+      vi.mocked(mockPipelineService.addStep).mockRejectedValue(error);
+      req.body = {
+        projectPath: '/test/project',
+        step: { name: 'Step', order: 0, instructions: 'Do', colorClass: 'blue' },
+      };
+
+      const handler = createAddStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(500);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'Add failed',
+      });
+    });
+  });
+
+  describe('update-step', () => {
+    it('should update step successfully', async () => {
+      const updates = {
+        name: 'Updated Name',
+        instructions: 'Updated instructions',
+      };
+
+      const updatedStep: PipelineStep = {
+        id: 'step1',
+        name: 'Updated Name',
+        order: 0,
+        instructions: 'Updated instructions',
+        colorClass: 'blue',
+        createdAt: '2024-01-01T00:00:00.000Z',
+        updatedAt: '2024-01-02T00:00:00.000Z',
+      };
+
+      vi.mocked(mockPipelineService.updateStep).mockResolvedValue(updatedStep);
+      req.body = { projectPath: '/test/project', stepId: 'step1', updates };
+
+      const handler = createUpdateStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(mockPipelineService.updateStep).toHaveBeenCalledWith(
+        '/test/project',
+        'step1',
+        updates
+      );
+      expect(res.json).toHaveBeenCalledWith({
+        success: true,
+        step: updatedStep,
+      });
+    });
+
+    it('should return 400 if projectPath is missing', async () => {
+      req.body = { stepId: 'step1', updates: { name: 'New' } };
+
+      const handler = createUpdateStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'projectPath is required',
+      });
+    });
+
+    it('should return 400 if stepId is missing', async () => {
+      req.body = { projectPath: '/test/project', updates: { name: 'New' } };
+
+      const handler = createUpdateStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'stepId is required',
+      });
+    });
+
+    it('should return 400 if updates is missing', async () => {
+      req.body = { projectPath: '/test/project', stepId: 'step1' };
+
+      const handler = createUpdateStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'updates is required',
+      });
+    });
+
+    it('should return 400 if updates is empty object', async () => {
+      req.body = { projectPath: '/test/project', stepId: 'step1', updates: {} };
+
+      const handler = createUpdateStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'updates is required',
+      });
+    });
+
+    it('should handle errors gracefully', async () => {
+      const error = new Error('Update failed');
+      vi.mocked(mockPipelineService.updateStep).mockRejectedValue(error);
+      req.body = {
+        projectPath: '/test/project',
+        stepId: 'step1',
+        updates: { name: 'New' },
+      };
+
+      const handler = createUpdateStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(500);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'Update failed',
+      });
+    });
+  });
+
+  describe('delete-step', () => {
+    it('should delete step successfully', async () => {
+      vi.mocked(mockPipelineService.deleteStep).mockResolvedValue(undefined);
+      req.body = { projectPath: '/test/project', stepId: 'step1' };
+
+      const handler = createDeleteStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(mockPipelineService.deleteStep).toHaveBeenCalledWith('/test/project', 'step1');
+      expect(res.json).toHaveBeenCalledWith({
+        success: true,
+      });
+    });
+
+    it('should return 400 if projectPath is missing', async () => {
+      req.body = { stepId: 'step1' };
+
+      const handler = createDeleteStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'projectPath is required',
+      });
+    });
+
+    it('should return 400 if stepId is missing', async () => {
+      req.body = { projectPath: '/test/project' };
+
+      const handler = createDeleteStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'stepId is required',
+      });
+    });
+
+    it('should handle errors gracefully', async () => {
+      const error = new Error('Delete failed');
+      vi.mocked(mockPipelineService.deleteStep).mockRejectedValue(error);
+      req.body = { projectPath: '/test/project', stepId: 'step1' };
+
+      const handler = createDeleteStepHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(500);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'Delete failed',
+      });
+    });
+  });
+
+  describe('reorder-steps', () => {
+    it('should reorder steps successfully', async () => {
+      vi.mocked(mockPipelineService.reorderSteps).mockResolvedValue(undefined);
+      req.body = { projectPath: '/test/project', stepIds: ['step2', 'step1', 'step3'] };
+
+      const handler = createReorderStepsHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(mockPipelineService.reorderSteps).toHaveBeenCalledWith('/test/project', [
+        'step2',
+        'step1',
+        'step3',
+      ]);
+      expect(res.json).toHaveBeenCalledWith({
+        success: true,
+      });
+    });
+
+    it('should return 400 if projectPath is missing', async () => {
+      req.body = { stepIds: ['step1', 'step2'] };
+
+      const handler = createReorderStepsHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'projectPath is required',
+      });
+    });
+
+    it('should return 400 if stepIds is missing', async () => {
+      req.body = { projectPath: '/test/project' };
+
+      const handler = createReorderStepsHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'stepIds array is required',
+      });
+    });
+
+    it('should return 400 if stepIds is not an array', async () => {
+      req.body = { projectPath: '/test/project', stepIds: 'not-an-array' };
+
+      const handler = createReorderStepsHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'stepIds array is required',
+      });
+    });
+
+    it('should handle errors gracefully', async () => {
+      const error = new Error('Reorder failed');
+      vi.mocked(mockPipelineService.reorderSteps).mockRejectedValue(error);
+      req.body = { projectPath: '/test/project', stepIds: ['step1', 'step2'] };
+
+      const handler = createReorderStepsHandler(mockPipelineService);
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(500);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'Reorder failed',
+      });
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/routes/running-agents.test.ts b/temp_repo/apps/server/tests/unit/routes/running-agents.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dfd2e2ab60bfa6b98b50f3fabea7d768f390d3ba
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/routes/running-agents.test.ts
@@ -0,0 +1,258 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { Request, Response } from 'express';
+import { createIndexHandler } from '@/routes/running-agents/routes/index.js';
+import type { AutoModeService } from '@/services/auto-mode-service.js';
+import { createMockExpressContext } from '../../utils/mocks.js';
+
+describe('running-agents routes', () => {
+  let mockAutoModeService: Partial<AutoModeService>;
+  let req: Request;
+  let res: Response;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockAutoModeService = {
+      getRunningAgents: vi.fn(),
+    };
+
+    const context = createMockExpressContext();
+    req = context.req;
+    res = context.res;
+  });
+
+  describe('GET / (index handler)', () => {
+    it('should return empty array when no agents are running', async () => {
+      // Arrange
+      vi.mocked(mockAutoModeService.getRunningAgents!).mockResolvedValue([]);
+
+      // Act
+      const handler = createIndexHandler(mockAutoModeService as AutoModeService);
+      await handler(req, res);
+
+      // Assert
+      expect(mockAutoModeService.getRunningAgents).toHaveBeenCalled();
+      expect(res.json).toHaveBeenCalledWith({
+        success: true,
+        runningAgents: [],
+        totalCount: 0,
+      });
+    });
+
+    it('should return running agents with all properties', async () => {
+      // Arrange
+      const runningAgents = [
+        {
+          featureId: 'feature-123',
+          projectPath: '/home/user/project',
+          projectName: 'project',
+          isAutoMode: true,
+          model: 'claude-sonnet-4-20250514',
+          provider: 'claude',
+          title: 'Implement login feature',
+          description: 'Add user authentication with OAuth',
+        },
+        {
+          featureId: 'feature-456',
+          projectPath: '/home/user/other-project',
+          projectName: 'other-project',
+          isAutoMode: false,
+          model: 'codex-gpt-5.1',
+          provider: 'codex',
+          title: 'Fix navigation bug',
+          description: undefined,
+        },
+      ];
+
+      vi.mocked(mockAutoModeService.getRunningAgents!).mockResolvedValue(runningAgents);
+
+      // Act
+      const handler = createIndexHandler(mockAutoModeService as AutoModeService);
+      await handler(req, res);
+
+      // Assert
+      expect(res.json).toHaveBeenCalledWith({
+        success: true,
+        runningAgents,
+        totalCount: 2,
+      });
+    });
+
+    it('should return agents without title/description (backward compatibility)', async () => {
+      // Arrange
+      const runningAgents = [
+        {
+          featureId: 'legacy-feature',
+          projectPath: '/project',
+          projectName: 'project',
+          isAutoMode: true,
+          model: undefined,
+          provider: undefined,
+          title: undefined,
+          description: undefined,
+        },
+      ];
+
+      vi.mocked(mockAutoModeService.getRunningAgents!).mockResolvedValue(runningAgents);
+
+      // Act
+      const handler = createIndexHandler(mockAutoModeService as AutoModeService);
+      await handler(req, res);
+
+      // Assert
+      expect(res.json).toHaveBeenCalledWith({
+        success: true,
+        runningAgents,
+        totalCount: 1,
+      });
+    });
+
+    it('should handle errors gracefully and return 500', async () => {
+      // Arrange
+      const error = new Error('Database connection failed');
+      vi.mocked(mockAutoModeService.getRunningAgents!).mockRejectedValue(error);
+
+      // Act
+      const handler = createIndexHandler(mockAutoModeService as AutoModeService);
+      await handler(req, res);
+
+      // Assert
+      expect(res.status).toHaveBeenCalledWith(500);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'Database connection failed',
+      });
+    });
+
+    it('should handle non-Error exceptions', async () => {
+      // Arrange
+      vi.mocked(mockAutoModeService.getRunningAgents!).mockRejectedValue('String error');
+
+      // Act
+      const handler = createIndexHandler(mockAutoModeService as AutoModeService);
+      await handler(req, res);
+
+      // Assert
+      expect(res.status).toHaveBeenCalledWith(500);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: expect.any(String),
+      });
+    });
+
+    it('should correctly count multiple running agents', async () => {
+      // Arrange
+      const runningAgents = Array.from({ length: 10 }, (_, i) => ({
+        featureId: `feature-${i}`,
+        projectPath: `/project-${i}`,
+        projectName: `project-${i}`,
+        isAutoMode: i % 2 === 0,
+        model: i % 3 === 0 ? 'claude-sonnet-4-20250514' : 'claude-haiku-4-5',
+        provider: 'claude',
+        title: `Feature ${i}`,
+        description: `Description ${i}`,
+      }));
+
+      vi.mocked(mockAutoModeService.getRunningAgents!).mockResolvedValue(runningAgents);
+
+      // Act
+      const handler = createIndexHandler(mockAutoModeService as AutoModeService);
+      await handler(req, res);
+
+      // Assert
+      expect(res.json).toHaveBeenCalledWith({
+        success: true,
+        runningAgents,
+        totalCount: 10,
+      });
+    });
+
+    it('should include agents from different projects', async () => {
+      // Arrange
+      const runningAgents = [
+        {
+          featureId: 'feature-a',
+          projectPath: '/workspace/project-alpha',
+          projectName: 'project-alpha',
+          isAutoMode: true,
+          model: 'claude-sonnet-4-20250514',
+          provider: 'claude',
+          title: 'Feature A',
+          description: 'In project alpha',
+        },
+        {
+          featureId: 'feature-b',
+          projectPath: '/workspace/project-beta',
+          projectName: 'project-beta',
+          isAutoMode: false,
+          model: 'codex-gpt-5.1',
+          provider: 'codex',
+          title: 'Feature B',
+          description: 'In project beta',
+        },
+      ];
+
+      vi.mocked(mockAutoModeService.getRunningAgents!).mockResolvedValue(runningAgents);
+
+      // Act
+      const handler = createIndexHandler(mockAutoModeService as AutoModeService);
+      await handler(req, res);
+
+      // Assert
+      const response = vi.mocked(res.json).mock.calls[0][0];
+      expect(response.runningAgents[0].projectPath).toBe('/workspace/project-alpha');
+      expect(response.runningAgents[1].projectPath).toBe('/workspace/project-beta');
+    });
+
+    it('should include model and provider information for running agents', async () => {
+      // Arrange
+      const runningAgents = [
+        {
+          featureId: 'feature-claude',
+          projectPath: '/project',
+          projectName: 'project',
+          isAutoMode: true,
+          model: 'claude-sonnet-4-20250514',
+          provider: 'claude',
+          title: 'Claude Feature',
+          description: 'Using Claude model',
+        },
+        {
+          featureId: 'feature-codex',
+          projectPath: '/project',
+          projectName: 'project',
+          isAutoMode: false,
+          model: 'codex-gpt-5.1',
+          provider: 'codex',
+          title: 'Codex Feature',
+          description: 'Using Codex model',
+        },
+        {
+          featureId: 'feature-cursor',
+          projectPath: '/project',
+          projectName: 'project',
+          isAutoMode: false,
+          model: 'cursor-auto',
+          provider: 'cursor',
+          title: 'Cursor Feature',
+          description: 'Using Cursor model',
+        },
+      ];
+
+      vi.mocked(mockAutoModeService.getRunningAgents!).mockResolvedValue(runningAgents);
+
+      // Act
+      const handler = createIndexHandler(mockAutoModeService as AutoModeService);
+      await handler(req, res);
+
+      // Assert
+      const response = vi.mocked(res.json).mock.calls[0][0];
+      expect(response.runningAgents[0].model).toBe('claude-sonnet-4-20250514');
+      expect(response.runningAgents[0].provider).toBe('claude');
+      expect(response.runningAgents[1].model).toBe('codex-gpt-5.1');
+      expect(response.runningAgents[1].provider).toBe('codex');
+      expect(response.runningAgents[2].model).toBe('cursor-auto');
+      expect(response.runningAgents[2].provider).toBe('cursor');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/routes/worktree/add-remote.test.ts b/temp_repo/apps/server/tests/unit/routes/worktree/add-remote.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9eb3e828c1d15626b801e9adfabb2a0daa1b87bf
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/routes/worktree/add-remote.test.ts
@@ -0,0 +1,565 @@
+import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
+import type { Request, Response } from 'express';
+import { createMockExpressContext } from '../../../utils/mocks.js';
+
+// Mock child_process with importOriginal to keep other exports
+vi.mock('child_process', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('child_process')>();
+  return {
+    ...actual,
+    execFile: vi.fn(),
+  };
+});
+
+// Mock util.promisify to return the function as-is so we can mock execFile
+vi.mock('util', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('util')>();
+  return {
+    ...actual,
+    promisify: (fn: unknown) => fn,
+  };
+});
+
+// Import handler after mocks are set up
+import { createAddRemoteHandler } from '@/routes/worktree/routes/add-remote.js';
+import { execFile } from 'child_process';
+
+// Get the mocked execFile
+const mockExecFile = execFile as Mock;
+
+/**
+ * Helper to create a standard mock implementation for git commands
+ */
+function createGitMock(options: {
+  existingRemotes?: string[];
+  addRemoteFails?: boolean;
+  addRemoteError?: string;
+  fetchFails?: boolean;
+}): (command: string, args: string[]) => Promise<{ stdout: string; stderr: string }> {
+  const {
+    existingRemotes = [],
+    addRemoteFails = false,
+    addRemoteError = 'git remote add failed',
+    fetchFails = false,
+  } = options;
+
+  return (command: string, args: string[]) => {
+    if (command === 'git' && args[0] === 'remote' && args.length === 1) {
+      return Promise.resolve({ stdout: existingRemotes.join('\n'), stderr: '' });
+    }
+    if (command === 'git' && args[0] === 'remote' && args[1] === 'add') {
+      if (addRemoteFails) {
+        return Promise.reject(new Error(addRemoteError));
+      }
+      return Promise.resolve({ stdout: '', stderr: '' });
+    }
+    if (command === 'git' && args[0] === 'fetch') {
+      if (fetchFails) {
+        return Promise.reject(new Error('fetch failed'));
+      }
+      return Promise.resolve({ stdout: '', stderr: '' });
+    }
+    return Promise.resolve({ stdout: '', stderr: '' });
+  };
+}
+
+describe('add-remote route', () => {
+  let req: Request;
+  let res: Response;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    const context = createMockExpressContext();
+    req = context.req;
+    res = context.res;
+  });
+
+  describe('input validation', () => {
+    it('should return 400 if worktreePath is missing', async () => {
+      req.body = { remoteName: 'origin', remoteUrl: 'https://github.com/user/repo.git' };
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'worktreePath required',
+      });
+    });
+
+    it('should return 400 if remoteName is missing', async () => {
+      req.body = { worktreePath: '/test/path', remoteUrl: 'https://github.com/user/repo.git' };
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'remoteName required',
+      });
+    });
+
+    it('should return 400 if remoteUrl is missing', async () => {
+      req.body = { worktreePath: '/test/path', remoteName: 'origin' };
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'remoteUrl required',
+      });
+    });
+  });
+
+  describe('remote name validation', () => {
+    it('should return 400 for empty remote name', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: '',
+        remoteUrl: 'https://github.com/user/repo.git',
+      };
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'remoteName required',
+      });
+    });
+
+    it('should return 400 for remote name starting with dash', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: '-invalid',
+        remoteUrl: 'https://github.com/user/repo.git',
+      };
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error:
+          'Invalid remote name. Must start with alphanumeric character and contain only letters, numbers, dashes, underscores, or periods.',
+      });
+    });
+
+    it('should return 400 for remote name starting with period', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: '.invalid',
+        remoteUrl: 'https://github.com/user/repo.git',
+      };
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error:
+          'Invalid remote name. Must start with alphanumeric character and contain only letters, numbers, dashes, underscores, or periods.',
+      });
+    });
+
+    it('should return 400 for remote name with invalid characters', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'invalid name',
+        remoteUrl: 'https://github.com/user/repo.git',
+      };
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error:
+          'Invalid remote name. Must start with alphanumeric character and contain only letters, numbers, dashes, underscores, or periods.',
+      });
+    });
+
+    it('should return 400 for remote name exceeding 250 characters', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'a'.repeat(251),
+        remoteUrl: 'https://github.com/user/repo.git',
+      };
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error:
+          'Invalid remote name. Must start with alphanumeric character and contain only letters, numbers, dashes, underscores, or periods.',
+      });
+    });
+
+    it('should accept valid remote names with alphanumeric, dashes, underscores, and periods', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'my-remote_name.1',
+        remoteUrl: 'https://github.com/user/repo.git',
+      };
+
+      // Mock git remote to return empty list (no existing remotes)
+      mockExecFile.mockImplementation(createGitMock({ existingRemotes: [] }));
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      // Should not return 400 for invalid name
+      expect(res.status).not.toHaveBeenCalledWith(400);
+    });
+  });
+
+  describe('remote URL validation', () => {
+    it('should return 400 for empty remote URL', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'origin',
+        remoteUrl: '',
+      };
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'remoteUrl required',
+      });
+    });
+
+    it('should return 400 for invalid remote URL', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'origin',
+        remoteUrl: 'not-a-valid-url',
+      };
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'Invalid remote URL. Must be a valid git URL (HTTPS, SSH, or git:// protocol).',
+      });
+    });
+
+    it('should return 400 for URL exceeding 2048 characters', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'origin',
+        remoteUrl: 'https://github.com/' + 'a'.repeat(2049) + '.git',
+      };
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'Invalid remote URL. Must be a valid git URL (HTTPS, SSH, or git:// protocol).',
+      });
+    });
+
+    it('should accept HTTPS URLs', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'origin',
+        remoteUrl: 'https://github.com/user/repo.git',
+      };
+
+      mockExecFile.mockImplementation(createGitMock({ existingRemotes: [] }));
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).not.toHaveBeenCalledWith(400);
+    });
+
+    it('should accept HTTP URLs', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'origin',
+        remoteUrl: 'http://github.com/user/repo.git',
+      };
+
+      mockExecFile.mockImplementation(createGitMock({ existingRemotes: [] }));
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).not.toHaveBeenCalledWith(400);
+    });
+
+    it('should accept SSH URLs', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'origin',
+        remoteUrl: 'git@github.com:user/repo.git',
+      };
+
+      mockExecFile.mockImplementation(createGitMock({ existingRemotes: [] }));
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).not.toHaveBeenCalledWith(400);
+    });
+
+    it('should accept git:// protocol URLs', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'origin',
+        remoteUrl: 'git://github.com/user/repo.git',
+      };
+
+      mockExecFile.mockImplementation(createGitMock({ existingRemotes: [] }));
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).not.toHaveBeenCalledWith(400);
+    });
+
+    it('should accept ssh:// protocol URLs', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'origin',
+        remoteUrl: 'ssh://git@github.com/user/repo.git',
+      };
+
+      mockExecFile.mockImplementation(createGitMock({ existingRemotes: [] }));
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).not.toHaveBeenCalledWith(400);
+    });
+  });
+
+  describe('remote already exists check', () => {
+    it('should return 400 with REMOTE_EXISTS code when remote already exists', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'origin',
+        remoteUrl: 'https://github.com/user/repo.git',
+      };
+
+      mockExecFile.mockImplementation(createGitMock({ existingRemotes: ['origin', 'upstream'] }));
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(400);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: "Remote 'origin' already exists",
+        code: 'REMOTE_EXISTS',
+      });
+    });
+
+    it('should proceed if remote does not exist', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'new-remote',
+        remoteUrl: 'https://github.com/user/repo.git',
+      };
+
+      mockExecFile.mockImplementation(createGitMock({ existingRemotes: ['origin'] }));
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      // Should call git remote add with array arguments
+      expect(mockExecFile).toHaveBeenCalledWith(
+        'git',
+        ['remote', 'add', 'new-remote', 'https://github.com/user/repo.git'],
+        expect.any(Object)
+      );
+    });
+  });
+
+  describe('successful remote addition', () => {
+    it('should add remote successfully with successful fetch', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'upstream',
+        remoteUrl: 'https://github.com/other/repo.git',
+      };
+
+      mockExecFile.mockImplementation(
+        createGitMock({ existingRemotes: ['origin'], fetchFails: false })
+      );
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.json).toHaveBeenCalledWith({
+        success: true,
+        result: {
+          remoteName: 'upstream',
+          remoteUrl: 'https://github.com/other/repo.git',
+          fetched: true,
+          message: "Successfully added remote 'upstream' and fetched its branches",
+        },
+      });
+    });
+
+    it('should add remote successfully even if fetch fails', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'upstream',
+        remoteUrl: 'https://github.com/other/repo.git',
+      };
+
+      mockExecFile.mockImplementation(
+        createGitMock({ existingRemotes: ['origin'], fetchFails: true })
+      );
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.json).toHaveBeenCalledWith({
+        success: true,
+        result: {
+          remoteName: 'upstream',
+          remoteUrl: 'https://github.com/other/repo.git',
+          fetched: false,
+          message:
+            "Successfully added remote 'upstream' (fetch failed - you may need to fetch manually)",
+        },
+      });
+    });
+
+    it('should pass correct cwd option to git commands', async () => {
+      req.body = {
+        worktreePath: '/custom/worktree/path',
+        remoteName: 'origin',
+        remoteUrl: 'https://github.com/user/repo.git',
+      };
+
+      const execCalls: { command: string; args: string[]; options: unknown }[] = [];
+      mockExecFile.mockImplementation((command: string, args: string[], options: unknown) => {
+        execCalls.push({ command, args, options });
+        if (command === 'git' && args[0] === 'remote' && args.length === 1) {
+          return Promise.resolve({ stdout: '', stderr: '' });
+        }
+        return Promise.resolve({ stdout: '', stderr: '' });
+      });
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      // Check that git remote was called with correct cwd
+      expect((execCalls[0].options as { cwd: string }).cwd).toBe('/custom/worktree/path');
+      // Check that git remote add was called with correct cwd
+      expect((execCalls[1].options as { cwd: string }).cwd).toBe('/custom/worktree/path');
+    });
+  });
+
+  describe('error handling', () => {
+    it('should return 500 when git remote add fails', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'origin',
+        remoteUrl: 'https://github.com/user/repo.git',
+      };
+
+      mockExecFile.mockImplementation(
+        createGitMock({
+          existingRemotes: [],
+          addRemoteFails: true,
+          addRemoteError: 'git remote add failed',
+        })
+      );
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(500);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: 'git remote add failed',
+      });
+    });
+
+    it('should continue adding remote if git remote check fails', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'origin',
+        remoteUrl: 'https://github.com/user/repo.git',
+      };
+
+      mockExecFile.mockImplementation((command: string, args: string[]) => {
+        if (command === 'git' && args[0] === 'remote' && args.length === 1) {
+          return Promise.reject(new Error('not a git repo'));
+        }
+        if (command === 'git' && args[0] === 'remote' && args[1] === 'add') {
+          return Promise.resolve({ stdout: '', stderr: '' });
+        }
+        if (command === 'git' && args[0] === 'fetch') {
+          return Promise.resolve({ stdout: '', stderr: '' });
+        }
+        return Promise.resolve({ stdout: '', stderr: '' });
+      });
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      // Should still try to add remote with array arguments
+      expect(mockExecFile).toHaveBeenCalledWith(
+        'git',
+        ['remote', 'add', 'origin', 'https://github.com/user/repo.git'],
+        expect.any(Object)
+      );
+      expect(res.json).toHaveBeenCalledWith({
+        success: true,
+        result: expect.objectContaining({
+          remoteName: 'origin',
+        }),
+      });
+    });
+
+    it('should handle non-Error exceptions', async () => {
+      req.body = {
+        worktreePath: '/test/path',
+        remoteName: 'origin',
+        remoteUrl: 'https://github.com/user/repo.git',
+      };
+
+      mockExecFile.mockImplementation((command: string, args: string[]) => {
+        if (command === 'git' && args[0] === 'remote' && args.length === 1) {
+          return Promise.resolve({ stdout: '', stderr: '' });
+        }
+        if (command === 'git' && args[0] === 'remote' && args[1] === 'add') {
+          return Promise.reject('String error');
+        }
+        return Promise.resolve({ stdout: '', stderr: '' });
+      });
+
+      const handler = createAddRemoteHandler();
+      await handler(req, res);
+
+      expect(res.status).toHaveBeenCalledWith(500);
+      expect(res.json).toHaveBeenCalledWith({
+        success: false,
+        error: expect.any(String),
+      });
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/routes/worktree/list-detached-head.test.ts b/temp_repo/apps/server/tests/unit/routes/worktree/list-detached-head.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7163603bd2682e4ac6a11f1ba9d4ba32cba42595
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/routes/worktree/list-detached-head.test.ts
@@ -0,0 +1,930 @@
+/**
+ * Tests for worktree list endpoint handling of detached HEAD state.
+ *
+ * When a worktree is in detached HEAD state (e.g., during a rebase),
+ * `git worktree list --porcelain` outputs "detached" instead of
+ * "branch refs/heads/...". Previously, these worktrees were silently
+ * dropped from the response because the parser required both path AND branch.
+ */
+
+import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
+import type { Request, Response } from 'express';
+import { exec } from 'child_process';
+import { createMockExpressContext } from '../../../utils/mocks.js';
+
+// Mock all external dependencies before importing the module under test
+vi.mock('child_process', () => ({
+  exec: vi.fn(),
+}));
+
+vi.mock('@/lib/git.js', () => ({
+  execGitCommand: vi.fn(),
+}));
+
+vi.mock('@automaker/git-utils', () => ({
+  isGitRepo: vi.fn(async () => true),
+}));
+
+vi.mock('@automaker/utils', () => ({
+  createLogger: () => ({
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    debug: vi.fn(),
+  }),
+}));
+
+vi.mock('@automaker/types', () => ({
+  validatePRState: vi.fn((state: string) => state),
+}));
+
+vi.mock('@/lib/secure-fs.js', () => ({
+  access: vi.fn().mockResolvedValue(undefined),
+  readFile: vi.fn(),
+  readdir: vi.fn().mockResolvedValue([]),
+  stat: vi.fn(),
+}));
+
+vi.mock('@/lib/worktree-metadata.js', () => ({
+  readAllWorktreeMetadata: vi.fn(async () => new Map()),
+  updateWorktreePRInfo: vi.fn(async () => undefined),
+}));
+
+vi.mock('@/routes/worktree/common.js', async (importOriginal) => {
+  const actual = (await importOriginal()) as Record<string, unknown>;
+  return {
+    ...actual,
+    getErrorMessage: vi.fn((e: Error) => e?.message || 'Unknown error'),
+    logError: vi.fn(),
+    normalizePath: vi.fn((p: string) => p),
+    execEnv: {},
+    isGhCliAvailable: vi.fn().mockResolvedValue(false),
+  };
+});
+
+vi.mock('@/routes/github/routes/check-github-remote.js', () => ({
+  checkGitHubRemote: vi.fn().mockResolvedValue({ hasGitHubRemote: false }),
+}));
+
+import { createListHandler } from '@/routes/worktree/routes/list.js';
+import * as secureFs from '@/lib/secure-fs.js';
+import { execGitCommand } from '@/lib/git.js';
+import { readAllWorktreeMetadata, updateWorktreePRInfo } from '@/lib/worktree-metadata.js';
+import { isGitRepo } from '@automaker/git-utils';
+import { isGhCliAvailable, normalizePath, getErrorMessage } from '@/routes/worktree/common.js';
+import { checkGitHubRemote } from '@/routes/github/routes/check-github-remote.js';
+
+/**
+ * Set up execGitCommand mock (list handler uses this via lib/git.js, not child_process.exec).
+ */
+function setupExecGitCommandMock(options: {
+  porcelainOutput: string;
+  projectBranch?: string;
+  gitDirs?: Record<string, string>;
+  worktreeBranches?: Record<string, string>;
+}) {
+  const { porcelainOutput, projectBranch = 'main', gitDirs = {}, worktreeBranches = {} } = options;
+
+  vi.mocked(execGitCommand).mockImplementation(async (args: string[], cwd: string) => {
+    if (args[0] === 'worktree' && args[1] === 'list' && args[2] === '--porcelain') {
+      return porcelainOutput;
+    }
+    if (args[0] === 'branch' && args[1] === '--show-current') {
+      if (worktreeBranches[cwd] !== undefined) {
+        return worktreeBranches[cwd] + '\n';
+      }
+      return projectBranch + '\n';
+    }
+    if (args[0] === 'rev-parse' && args[1] === '--git-dir') {
+      if (cwd && gitDirs[cwd]) {
+        return gitDirs[cwd] + '\n';
+      }
+      throw new Error('not a git directory');
+    }
+    if (args[0] === 'rev-parse' && args[1] === '--abbrev-ref' && args[2] === 'HEAD') {
+      return 'HEAD\n';
+    }
+    if (args[0] === 'worktree' && args[1] === 'prune') {
+      return '';
+    }
+    if (args[0] === 'status' && args[1] === '--porcelain') {
+      return '';
+    }
+    if (args[0] === 'diff' && args[1] === '--name-only' && args[2] === '--diff-filter=U') {
+      return '';
+    }
+    return '';
+  });
+}
+
+describe('worktree list - detached HEAD handling', () => {
+  let req: Request;
+  let res: Response;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    const context = createMockExpressContext();
+    req = context.req;
+    res = context.res;
+
+    // Re-establish mock implementations cleared by mockReset/clearAllMocks
+    vi.mocked(isGitRepo).mockResolvedValue(true);
+    vi.mocked(readAllWorktreeMetadata).mockResolvedValue(new Map());
+    vi.mocked(isGhCliAvailable).mockResolvedValue(false);
+    vi.mocked(checkGitHubRemote).mockResolvedValue({ hasGitHubRemote: false });
+    vi.mocked(normalizePath).mockImplementation((p: string) => p);
+    vi.mocked(getErrorMessage).mockImplementation(
+      (e: unknown) => (e as Error)?.message || 'Unknown error'
+    );
+
+    // Default: all paths exist
+    vi.mocked(secureFs.access).mockResolvedValue(undefined);
+    // Default: .worktrees directory doesn't exist (no scan via readdir)
+    vi.mocked(secureFs.readdir).mockRejectedValue(new Error('ENOENT'));
+    // Default: readFile fails
+    vi.mocked(secureFs.readFile).mockRejectedValue(new Error('ENOENT'));
+
+    // Default execGitCommand so list handler gets valid porcelain/branch output (vitest clearMocks resets implementations)
+    setupExecGitCommandMock({
+      porcelainOutput: 'worktree /project\nbranch refs/heads/main\n\n',
+      projectBranch: 'main',
+    });
+  });
+
+  /**
+   * Helper: set up execGitCommand mock for the list handler.
+   * Worktree-specific behavior can be customized via the options parameter.
+   */
+  function setupStandardExec(options: {
+    porcelainOutput: string;
+    projectBranch?: string;
+    /** Map of worktree path -> git-dir path */
+    gitDirs?: Record<string, string>;
+    /** Map of worktree cwd -> branch for `git branch --show-current` */
+    worktreeBranches?: Record<string, string>;
+  }) {
+    setupExecGitCommandMock(options);
+  }
+
+  /** Suppress .worktrees dir scan by making access throw for the .worktrees dir. */
+  function disableWorktreesScan() {
+    vi.mocked(secureFs.access).mockImplementation(async (p) => {
+      const pathStr = String(p);
+      // Block only the .worktrees dir access check in scanWorktreesDirectory
+      if (pathStr.endsWith('.worktrees') || pathStr.endsWith('.worktrees/')) {
+        throw new Error('ENOENT');
+      }
+      // All other paths exist
+      return undefined;
+    });
+  }
+
+  describe('porcelain parser', () => {
+    it('should include normal worktrees with branch lines', async () => {
+      req.body = { projectPath: '/project' };
+
+      setupStandardExec({
+        porcelainOutput: [
+          'worktree /project',
+          'branch refs/heads/main',
+          '',
+          'worktree /project/.worktrees/feature-a',
+          'branch refs/heads/feature-a',
+          '',
+        ].join('\n'),
+      });
+      disableWorktreesScan();
+
+      const handler = createListHandler();
+      await handler(req, res);
+
+      const response = vi.mocked(res.json).mock.calls[0][0] as {
+        success: boolean;
+        worktrees: Array<{ branch: string; path: string; isMain: boolean; hasWorktree: boolean }>;
+      };
+
+      expect(response.success).toBe(true);
+      expect(response.worktrees).toHaveLength(2);
+      expect(response.worktrees[0]).toEqual(
+        expect.objectContaining({
+          path: '/project',
+          branch: 'main',
+          isMain: true,
+          hasWorktree: true,
+        })
+      );
+      expect(response.worktrees[1]).toEqual(
+        expect.objectContaining({
+          path: '/project/.worktrees/feature-a',
+          branch: 'feature-a',
+          isMain: false,
+          hasWorktree: true,
+        })
+      );
+    });
+
+    it('should include worktrees with detached HEAD and recover branch from rebase-merge state', async () => {
+      req.body = { projectPath: '/project' };
+
+      setupStandardExec({
+        porcelainOutput: [
+          'worktree /project',
+          'branch refs/heads/main',
+          '',
+          'worktree /project/.worktrees/rebasing-wt',
+          'detached',
+          '',
+        ].join('\n'),
+        gitDirs: {
+          '/project/.worktrees/rebasing-wt': '/project/.worktrees/rebasing-wt/.git',
+        },
+      });
+      disableWorktreesScan();
+
+      // rebase-merge/head-name returns the branch being rebased
+      vi.mocked(secureFs.readFile).mockImplementation(async (filePath) => {
+        const pathStr = String(filePath);
+        if (pathStr.includes('rebase-merge/head-name')) {
+          return 'refs/heads/feature/my-rebasing-branch\n' as any;
+        }
+        throw new Error('ENOENT');
+      });
+
+      const handler = createListHandler();
+      await handler(req, res);
+
+      const response = vi.mocked(res.json).mock.calls[0][0] as {
+        worktrees: Array<{ branch: string; path: string; isCurrent: boolean }>;
+      };
+      expect(response.worktrees).toHaveLength(2);
+      expect(response.worktrees[1]).toEqual(
+        expect.objectContaining({
+          path: '/project/.worktrees/rebasing-wt',
+          branch: 'feature/my-rebasing-branch',
+          isMain: false,
+          isCurrent: false,
+          hasWorktree: true,
+        })
+      );
+    });
+
+    it('should include worktrees with detached HEAD and recover branch from rebase-apply state', async () => {
+      req.body = { projectPath: '/project' };
+
+      setupStandardExec({
+        porcelainOutput: [
+          'worktree /project',
+          'branch refs/heads/main',
+          '',
+          'worktree /project/.worktrees/apply-wt',
+          'detached',
+          '',
+        ].join('\n'),
+        gitDirs: {
+          '/project/.worktrees/apply-wt': '/project/.worktrees/apply-wt/.git',
+        },
+      });
+      disableWorktreesScan();
+
+      // rebase-merge doesn't exist, but rebase-apply does
+      vi.mocked(secureFs.readFile).mockImplementation(async (filePath) => {
+        const pathStr = String(filePath);
+        if (pathStr.includes('rebase-apply/head-name')) {
+          return 'refs/heads/feature/apply-branch\n' as any;
+        }
+        throw new Error('ENOENT');
+      });
+
+      const handler = createListHandler();
+      await handler(req, res);
+
+      const response = vi.mocked(res.json).mock.calls[0][0] as {
+        worktrees: Array<{ branch: string; path: string }>;
+      };
+      const detachedWt = response.worktrees.find((w) => w.path === '/project/.worktrees/apply-wt');
+      expect(detachedWt).toBeDefined();
+      expect(detachedWt!.branch).toBe('feature/apply-branch');
+    });
+
+    it('should show merge conflict worktrees normally since merge does not detach HEAD', async () => {
+      // During a merge conflict, HEAD stays on the branch, so `git worktree list --porcelain`
+      // still outputs `branch refs/heads/...`. This test verifies merge conflicts don't
+      // trigger the detached HEAD recovery path.
+      req.body = { projectPath: '/project' };
+
+      setupStandardExec({
+        porcelainOutput: [
+          'worktree /project',
+          'branch refs/heads/main',
+          '',
+          'worktree /project/.worktrees/merge-wt',
+          'branch refs/heads/feature/merge-branch',
+          '',
+        ].join('\n'),
+      });
+      disableWorktreesScan();
+
+      const handler = createListHandler();
+      await handler(req, res);
+
+      const response = vi.mocked(res.json).mock.calls[0][0] as {
+        worktrees: Array<{ branch: string; path: string }>;
+      };
+      const mergeWt = response.worktrees.find((w) => w.path === '/project/.worktrees/merge-wt');
+      expect(mergeWt).toBeDefined();
+      expect(mergeWt!.branch).toBe('feature/merge-branch');
+    });
+
+    it('should fall back to (detached) when all branch recovery methods fail', async () => {
+      req.body = { projectPath: '/project' };
+
+      setupStandardExec({
+        porcelainOutput: [
+          'worktree /project',
+          'branch refs/heads/main',
+          '',
+          'worktree /project/.worktrees/unknown-wt',
+          'detached',
+          '',
+        ].join('\n'),
+        worktreeBranches: {
+          '/project/.worktrees/unknown-wt': '', // empty = no branch
+        },
+      });
+      disableWorktreesScan();
+
+      // All readFile calls fail (no gitDirs so rev-parse --git-dir will throw)
+      vi.mocked(secureFs.readFile).mockRejectedValue(new Error('ENOENT'));
+
+      const handler = createListHandler();
+      await handler(req, res);
+
+      const response = vi.mocked(res.json).mock.calls[0][0] as {
+        worktrees: Array<{ branch: string; path: string }>;
+      };
+      const detachedWt = response.worktrees.find(
+        (w) => w.path === '/project/.worktrees/unknown-wt'
+      );
+      expect(detachedWt).toBeDefined();
+      expect(detachedWt!.branch).toBe('(detached)');
+    });
+
+    it('should not include detached worktree when directory does not exist on disk', async () => {
+      req.body = { projectPath: '/project' };
+
+      setupStandardExec({
+        porcelainOutput: [
+          'worktree /project',
+          'branch refs/heads/main',
+          '',
+          'worktree /project/.worktrees/deleted-wt',
+          'detached',
+          '',
+        ].join('\n'),
+      });
+
+      // The deleted worktree doesn't exist on disk
+      vi.mocked(secureFs.access).mockImplementation(async (p) => {
+        const pathStr = String(p);
+        if (pathStr.includes('deleted-wt')) {
+          throw new Error('ENOENT');
+        }
+        if (pathStr.endsWith('.worktrees') || pathStr.endsWith('.worktrees/')) {
+          throw new Error('ENOENT');
+        }
+        return undefined;
+      });
+
+      const handler = createListHandler();
+      await handler(req, res);
+
+      const response = vi.mocked(res.json).mock.calls[0][0] as {
+        worktrees: Array<{ branch: string; path: string }>;
+      };
+      // Only the main worktree should be present
+      expect(response.worktrees).toHaveLength(1);
+      expect(response.worktrees[0].path).toBe('/project');
+    });
+
+    it('should set isCurrent to false for detached worktrees even if recovered branch matches current branch', async () => {
+      req.body = { projectPath: '/project' };
+
+      setupStandardExec({
+        porcelainOutput: [
+          'worktree /project',
+          'branch refs/heads/main',
+          '',
+          'worktree /project/.worktrees/rebasing-wt',
+          'detached',
+          '',
+        ].join('\n'),
+        // currentBranch for project is 'feature/my-branch'
+        projectBranch: 'feature/my-branch',
+        gitDirs: {
+          '/project/.worktrees/rebasing-wt': '/project/.worktrees/rebasing-wt/.git',
+        },
+      });
+      disableWorktreesScan();
+
+      // Recovery returns the same branch as currentBranch
+      vi.mocked(secureFs.readFile).mockImplementation(async (filePath) => {
+        const pathStr = String(filePath);
+        if (pathStr.includes('rebase-merge/head-name')) {
+          return 'refs/heads/feature/my-branch\n' as any;
+        }
+        throw new Error('ENOENT');
+      });
+
+      const handler = createListHandler();
+      await handler(req, res);
+
+      const response = vi.mocked(res.json).mock.calls[0][0] as {
+        worktrees: Array<{ branch: string; isCurrent: boolean; path: string }>;
+      };
+      const detachedWt = response.worktrees.find(
+        (w) => w.path === '/project/.worktrees/rebasing-wt'
+      );
+      expect(detachedWt).toBeDefined();
+      // Detached worktrees should always have isCurrent=false
+      expect(detachedWt!.isCurrent).toBe(false);
+    });
+
+    it('should handle mixed normal and detached worktrees', async () => {
+      req.body = { projectPath: '/project' };
+
+      setupStandardExec({
+        porcelainOutput: [
+          'worktree /project',
+          'branch refs/heads/main',
+          '',
+          'worktree /project/.worktrees/normal-wt',
+          'branch refs/heads/feature-normal',
+          '',
+          'worktree /project/.worktrees/rebasing-wt',
+          'detached',
+          '',
+          'worktree /project/.worktrees/another-normal',
+          'branch refs/heads/feature-other',
+          '',
+        ].join('\n'),
+        gitDirs: {
+          '/project/.worktrees/rebasing-wt': '/project/.worktrees/rebasing-wt/.git',
+        },
+      });
+      disableWorktreesScan();
+
+      vi.mocked(secureFs.readFile).mockImplementation(async (filePath) => {
+        const pathStr = String(filePath);
+        if (pathStr.includes('rebase-merge/head-name')) {
+          return 'refs/heads/feature/rebasing\n' as any;
+        }
+        throw new Error('ENOENT');
+      });
+
+      const handler = createListHandler();
+      await handler(req, res);
+
+      const response = vi.mocked(res.json).mock.calls[0][0] as {
+        worktrees: Array<{ branch: string; path: string; isMain: boolean }>;
+      };
+      expect(response.worktrees).toHaveLength(4);
+      expect(response.worktrees[0]).toEqual(
+        expect.objectContaining({ path: '/project', branch: 'main', isMain: true })
+      );
+      expect(response.worktrees[1]).toEqual(
+        expect.objectContaining({
+          path: '/project/.worktrees/normal-wt',
+          branch: 'feature-normal',
+          isMain: false,
+        })
+      );
+      expect(response.worktrees[2]).toEqual(
+        expect.objectContaining({
+          path: '/project/.worktrees/rebasing-wt',
+          branch: 'feature/rebasing',
+          isMain: false,
+        })
+      );
+      expect(response.worktrees[3]).toEqual(
+        expect.objectContaining({
+          path: '/project/.worktrees/another-normal',
+          branch: 'feature-other',
+          isMain: false,
+        })
+      );
+    });
+
+    it('should correctly advance isFirst flag past detached worktrees', async () => {
+      req.body = { projectPath: '/project' };
+
+      setupStandardExec({
+        porcelainOutput: [
+          'worktree /project',
+          'branch refs/heads/main',
+          '',
+          'worktree /project/.worktrees/detached-wt',
+          'detached',
+          '',
+          'worktree /project/.worktrees/normal-wt',
+          'branch refs/heads/feature-x',
+          '',
+        ].join('\n'),
+      });
+      disableWorktreesScan();
+      vi.mocked(secureFs.readFile).mockRejectedValue(new Error('ENOENT'));
+
+      const handler = createListHandler();
+      await handler(req, res);
+
+      const response = vi.mocked(res.json).mock.calls[0][0] as {
+        worktrees: Array<{ branch: string; isMain: boolean }>;
+      };
+      expect(response.worktrees).toHaveLength(3);
+      expect(response.worktrees[0].isMain).toBe(true); // main
+      expect(response.worktrees[1].isMain).toBe(false); // detached
+      expect(response.worktrees[2].isMain).toBe(false); // normal
+    });
+
+    it('should not add removed detached worktrees to removedWorktrees list', async () => {
+      req.body = { projectPath: '/project' };
+
+      setupStandardExec({
+        porcelainOutput: [
+          'worktree /project',
+          'branch refs/heads/main',
+          '',
+          'worktree /project/.worktrees/gone-wt',
+          'detached',
+          '',
+        ].join('\n'),
+      });
+
+      // The detached worktree doesn't exist on disk
+      vi.mocked(secureFs.access).mockImplementation(async (p) => {
+        const pathStr = String(p);
+        if (pathStr.includes('gone-wt')) {
+          throw new Error('ENOENT');
+        }
+        if (pathStr.endsWith('.worktrees') || pathStr.endsWith('.worktrees/')) {
+          throw new Error('ENOENT');
+        }
+        return undefined;
+      });
+
+      const handler = createListHandler();
+      await handler(req, res);
+
+      const response = vi.mocked(res.json).mock.calls[0][0] as {
+        worktrees: Array<{ branch: string }>;
+        removedWorktrees?: Array<{ path: string; branch: string }>;
+      };
+      // Should not be in removed list since we don't know the branch
+      expect(response.removedWorktrees).toBeUndefined();
+    });
+
+    it('should strip refs/heads/ prefix from recovered branch name', async () => {
+      req.body = { projectPath: '/project' };
+
+      setupStandardExec({
+        porcelainOutput: [
+          'worktree /project',
+          'branch refs/heads/main',
+          '',
+          'worktree /project/.worktrees/wt1',
+          'detached',
+          '',
+        ].join('\n'),
+        gitDirs: {
+          '/project/.worktrees/wt1': '/project/.worktrees/wt1/.git',
+        },
+      });
+      disableWorktreesScan();
+
+      vi.mocked(secureFs.readFile).mockImplementation(async (filePath) => {
+        const pathStr = String(filePath);
+        if (pathStr.includes('rebase-merge/head-name')) {
+          return 'refs/heads/my-branch\n' as any;
+        }
+        throw new Error('ENOENT');
+      });
+
+      const handler = createListHandler();
+      await handler(req, res);
+
+      const response = vi.mocked(res.json).mock.calls[0][0] as {
+        worktrees: Array<{ branch: string; path: string }>;
+      };
+      const wt = response.worktrees.find((w) => w.path === '/project/.worktrees/wt1');
+      expect(wt).toBeDefined();
+      // Should be 'my-branch', not 'refs/heads/my-branch'
+      expect(wt!.branch).toBe('my-branch');
+    });
+  });
+
+  describe('scanWorktreesDirectory with detached HEAD recovery', () => {
+    it('should recover branch for discovered worktrees with detached HEAD', async () => {
+      req.body = { projectPath: '/project' };
+
+      vi.mocked(execGitCommand).mockImplementation(async (args: string[], cwd: string) => {
+        if (args[0] === 'worktree' && args[1] === 'list') {
+          return 'worktree /project\nbranch refs/heads/main\n\n';
+        }
+        if (args[0] === 'branch' && args[1] === '--show-current') {
+          return cwd === '/project' ? 'main\n' : '\n';
+        }
+        if (args[0] === 'rev-parse' && args[1] === '--abbrev-ref') {
+          return 'HEAD\n';
+        }
+        if (args[0] === 'rev-parse' && args[1] === '--git-dir') {
+          return '/project/.worktrees/orphan-wt/.git\n';
+        }
+        return '';
+      });
+
+      // .worktrees directory exists and has an orphan worktree
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+      vi.mocked(secureFs.readdir).mockResolvedValue([
+        { name: 'orphan-wt', isDirectory: () => true, isFile: () => false } as any,
+      ]);
+      vi.mocked(secureFs.stat).mockResolvedValue({
+        isFile: () => true,
+        isDirectory: () => false,
+      } as any);
+
+      // readFile returns branch from rebase-merge/head-name
+      vi.mocked(secureFs.readFile).mockImplementation(async (filePath) => {
+        const pathStr = String(filePath);
+        if (pathStr.includes('rebase-merge/head-name')) {
+          return 'refs/heads/feature/orphan-branch\n' as any;
+        }
+        throw new Error('ENOENT');
+      });
+
+      const handler = createListHandler();
+      await handler(req, res);
+
+      const response = vi.mocked(res.json).mock.calls[0][0] as {
+        worktrees: Array<{ branch: string; path: string }>;
+      };
+
+      const orphanWt = response.worktrees.find((w) => w.path === '/project/.worktrees/orphan-wt');
+      expect(orphanWt).toBeDefined();
+      expect(orphanWt!.branch).toBe('feature/orphan-branch');
+    });
+
+    it('should skip discovered worktrees when all branch detection fails', async () => {
+      req.body = { projectPath: '/project' };
+
+      vi.mocked(execGitCommand).mockImplementation(async (args: string[], cwd: string) => {
+        if (args[0] === 'worktree' && args[1] === 'list') {
+          return 'worktree /project\nbranch refs/heads/main\n\n';
+        }
+        if (args[0] === 'branch' && args[1] === '--show-current') {
+          return cwd === '/project' ? 'main\n' : '\n';
+        }
+        if (args[0] === 'rev-parse' && args[1] === '--abbrev-ref') {
+          return 'HEAD\n';
+        }
+        if (args[0] === 'rev-parse' && args[1] === '--git-dir') {
+          throw new Error('not a git dir');
+        }
+        return '';
+      });
+
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+      vi.mocked(secureFs.readdir).mockResolvedValue([
+        { name: 'broken-wt', isDirectory: () => true, isFile: () => false } as any,
+      ]);
+      vi.mocked(secureFs.stat).mockResolvedValue({
+        isFile: () => true,
+        isDirectory: () => false,
+      } as any);
+      vi.mocked(secureFs.readFile).mockRejectedValue(new Error('ENOENT'));
+
+      const handler = createListHandler();
+      await handler(req, res);
+
+      const response = vi.mocked(res.json).mock.calls[0][0] as {
+        worktrees: Array<{ branch: string; path: string }>;
+      };
+
+      // Only main worktree should be present
+      expect(response.worktrees).toHaveLength(1);
+      expect(response.worktrees[0].branch).toBe('main');
+    });
+  });
+
+  describe('PR tracking precedence', () => {
+    it('should keep manually tracked PR from metadata when branch PR differs', async () => {
+      req.body = { projectPath: '/project', includeDetails: true };
+
+      vi.mocked(readAllWorktreeMetadata).mockResolvedValue(
+        new Map([
+          [
+            'feature-a',
+            {
+              branch: 'feature-a',
+              createdAt: '2026-01-01T00:00:00.000Z',
+              pr: {
+                number: 99,
+                url: 'https://github.com/org/repo/pull/99',
+                title: 'Manual override PR',
+                state: 'OPEN',
+                createdAt: '2026-01-01T00:00:00.000Z',
+              },
+            },
+          ],
+        ])
+      );
+      vi.mocked(isGhCliAvailable).mockResolvedValue(true);
+      vi.mocked(checkGitHubRemote).mockResolvedValue({
+        hasGitHubRemote: true,
+        owner: 'org',
+        repo: 'repo',
+      });
+      vi.mocked(secureFs.access).mockImplementation(async (p) => {
+        const pathStr = String(p);
+        if (
+          pathStr.includes('MERGE_HEAD') ||
+          pathStr.includes('rebase-merge') ||
+          pathStr.includes('rebase-apply') ||
+          pathStr.includes('CHERRY_PICK_HEAD')
+        ) {
+          throw new Error('ENOENT');
+        }
+        return undefined;
+      });
+
+      vi.mocked(execGitCommand).mockImplementation(async (args: string[], cwd: string) => {
+        if (args[0] === 'rev-parse' && args[1] === '--git-dir') {
+          throw new Error('no git dir');
+        }
+        if (args[0] === 'worktree' && args[1] === 'list') {
+          return [
+            'worktree /project',
+            'branch refs/heads/main',
+            '',
+            'worktree /project/.worktrees/feature-a',
+            'branch refs/heads/feature-a',
+            '',
+          ].join('\n');
+        }
+        if (args[0] === 'branch' && args[1] === '--show-current') {
+          return cwd === '/project' ? 'main\n' : 'feature-a\n';
+        }
+        if (args[0] === 'status' && args[1] === '--porcelain') {
+          return '';
+        }
+        return '';
+      });
+      (exec as unknown as Mock).mockImplementation(
+        (
+          cmd: string,
+          _opts: unknown,
+          callback?: (err: Error | null, out: { stdout: string; stderr: string }) => void
+        ) => {
+          const cb = typeof _opts === 'function' ? _opts : callback!;
+          if (cmd.includes('gh pr list')) {
+            cb(null, {
+              stdout: JSON.stringify([
+                {
+                  number: 42,
+                  title: 'Branch PR',
+                  url: 'https://github.com/org/repo/pull/42',
+                  state: 'OPEN',
+                  headRefName: 'feature-a',
+                  createdAt: '2026-01-02T00:00:00.000Z',
+                },
+              ]),
+              stderr: '',
+            });
+          } else {
+            cb(null, { stdout: '', stderr: '' });
+          }
+        }
+      );
+      disableWorktreesScan();
+
+      const handler = createListHandler();
+      await handler(req, res);
+
+      const response = vi.mocked(res.json).mock.calls[0][0] as {
+        worktrees: Array<{ branch: string; pr?: { number: number; title: string } }>;
+      };
+      const featureWorktree = response.worktrees.find((w) => w.branch === 'feature-a');
+      expect(featureWorktree?.pr?.number).toBe(99);
+      expect(featureWorktree?.pr?.title).toBe('Manual override PR');
+    });
+
+    it('should prefer GitHub PR when it matches metadata number and sync updated fields', async () => {
+      req.body = { projectPath: '/project-2', includeDetails: true };
+
+      vi.mocked(readAllWorktreeMetadata).mockResolvedValue(
+        new Map([
+          [
+            'feature-a',
+            {
+              branch: 'feature-a',
+              createdAt: '2026-01-01T00:00:00.000Z',
+              pr: {
+                number: 42,
+                url: 'https://github.com/org/repo/pull/42',
+                title: 'Old title',
+                state: 'OPEN',
+                createdAt: '2026-01-01T00:00:00.000Z',
+              },
+            },
+          ],
+        ])
+      );
+      vi.mocked(isGhCliAvailable).mockResolvedValue(true);
+      vi.mocked(checkGitHubRemote).mockResolvedValue({
+        hasGitHubRemote: true,
+        owner: 'org',
+        repo: 'repo',
+      });
+      vi.mocked(secureFs.access).mockImplementation(async (p) => {
+        const pathStr = String(p);
+        if (
+          pathStr.includes('MERGE_HEAD') ||
+          pathStr.includes('rebase-merge') ||
+          pathStr.includes('rebase-apply') ||
+          pathStr.includes('CHERRY_PICK_HEAD')
+        ) {
+          throw new Error('ENOENT');
+        }
+        return undefined;
+      });
+
+      vi.mocked(execGitCommand).mockImplementation(async (args: string[], cwd: string) => {
+        if (args[0] === 'rev-parse' && args[1] === '--git-dir') {
+          throw new Error('no git dir');
+        }
+        if (args[0] === 'worktree' && args[1] === 'list') {
+          return [
+            'worktree /project-2',
+            'branch refs/heads/main',
+            '',
+            'worktree /project-2/.worktrees/feature-a',
+            'branch refs/heads/feature-a',
+            '',
+          ].join('\n');
+        }
+        if (args[0] === 'branch' && args[1] === '--show-current') {
+          return cwd === '/project-2' ? 'main\n' : 'feature-a\n';
+        }
+        if (args[0] === 'status' && args[1] === '--porcelain') {
+          return '';
+        }
+        return '';
+      });
+      (exec as unknown as Mock).mockImplementation(
+        (
+          cmd: string,
+          _opts: unknown,
+          callback?: (err: Error | null, out: { stdout: string; stderr: string }) => void
+        ) => {
+          const cb = typeof _opts === 'function' ? _opts : callback!;
+          if (cmd.includes('gh pr list')) {
+            cb(null, {
+              stdout: JSON.stringify([
+                {
+                  number: 42,
+                  title: 'New title from GitHub',
+                  url: 'https://github.com/org/repo/pull/42',
+                  state: 'MERGED',
+                  headRefName: 'feature-a',
+                  createdAt: '2026-01-02T00:00:00.000Z',
+                },
+              ]),
+              stderr: '',
+            });
+          } else {
+            cb(null, { stdout: '', stderr: '' });
+          }
+        }
+      );
+      disableWorktreesScan();
+
+      const handler = createListHandler();
+      await handler(req, res);
+
+      const response = vi.mocked(res.json).mock.calls[0][0] as {
+        worktrees: Array<{ branch: string; pr?: { number: number; title: string; state: string } }>;
+      };
+      const featureWorktree = response.worktrees.find((w) => w.branch === 'feature-a');
+      expect(featureWorktree?.pr?.number).toBe(42);
+      expect(featureWorktree?.pr?.title).toBe('New title from GitHub');
+      expect(featureWorktree?.pr?.state).toBe('MERGED');
+      expect(vi.mocked(updateWorktreePRInfo)).toHaveBeenCalledWith(
+        '/project-2',
+        'feature-a',
+        expect.objectContaining({
+          number: 42,
+          title: 'New title from GitHub',
+          state: 'MERGED',
+        })
+      );
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/routes/worktree/switch-branch.test.ts b/temp_repo/apps/server/tests/unit/routes/worktree/switch-branch.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c599fd07e1c506cac71d4326ad367d9c8855cc20
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/routes/worktree/switch-branch.test.ts
@@ -0,0 +1,145 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { Request, Response } from 'express';
+import { createMockExpressContext } from '../../../utils/mocks.js';
+
+vi.mock('@/services/worktree-branch-service.js', () => ({
+  performSwitchBranch: vi.fn(),
+}));
+
+import { performSwitchBranch } from '@/services/worktree-branch-service.js';
+import { createSwitchBranchHandler } from '@/routes/worktree/routes/switch-branch.js';
+
+const mockPerformSwitchBranch = vi.mocked(performSwitchBranch);
+
+describe('switch-branch route', () => {
+  let req: Request;
+  let res: Response;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    const context = createMockExpressContext();
+    req = context.req;
+    res = context.res;
+  });
+
+  it('should return 400 when branchName is missing', async () => {
+    req.body = { worktreePath: '/repo/path' };
+
+    const handler = createSwitchBranchHandler();
+    await handler(req, res);
+
+    expect(res.status).toHaveBeenCalledWith(400);
+    expect(res.json).toHaveBeenCalledWith({
+      success: false,
+      error: 'branchName required',
+    });
+    expect(mockPerformSwitchBranch).not.toHaveBeenCalled();
+  });
+
+  it('should return 400 when branchName starts with a dash', async () => {
+    req.body = { worktreePath: '/repo/path', branchName: '-flag' };
+
+    const handler = createSwitchBranchHandler();
+    await handler(req, res);
+
+    expect(res.status).toHaveBeenCalledWith(400);
+    expect(res.json).toHaveBeenCalledWith({
+      success: false,
+      error: 'Invalid branch name',
+    });
+    expect(mockPerformSwitchBranch).not.toHaveBeenCalled();
+  });
+
+  it('should return 400 when branchName starts with double dash', async () => {
+    req.body = { worktreePath: '/repo/path', branchName: '--option' };
+
+    const handler = createSwitchBranchHandler();
+    await handler(req, res);
+
+    expect(res.status).toHaveBeenCalledWith(400);
+    expect(res.json).toHaveBeenCalledWith({
+      success: false,
+      error: 'Invalid branch name',
+    });
+    expect(mockPerformSwitchBranch).not.toHaveBeenCalled();
+  });
+
+  it('should return 400 when branchName contains invalid characters', async () => {
+    req.body = { worktreePath: '/repo/path', branchName: 'branch name with spaces' };
+
+    const handler = createSwitchBranchHandler();
+    await handler(req, res);
+
+    expect(res.status).toHaveBeenCalledWith(400);
+    expect(res.json).toHaveBeenCalledWith({
+      success: false,
+      error: 'Invalid branch name',
+    });
+    expect(mockPerformSwitchBranch).not.toHaveBeenCalled();
+  });
+
+  it('should allow switching when only untracked files exist', async () => {
+    req.body = {
+      worktreePath: '/repo/path',
+      branchName: 'feature/test',
+    };
+
+    mockPerformSwitchBranch.mockResolvedValue({
+      success: true,
+      result: {
+        previousBranch: 'main',
+        currentBranch: 'feature/test',
+        message: "Switched to branch 'feature/test'",
+        hasConflicts: false,
+        stashedChanges: false,
+      },
+    });
+
+    const handler = createSwitchBranchHandler();
+    await handler(req, res);
+
+    expect(res.json).toHaveBeenCalledWith({
+      success: true,
+      result: {
+        previousBranch: 'main',
+        currentBranch: 'feature/test',
+        message: "Switched to branch 'feature/test'",
+        hasConflicts: false,
+        stashedChanges: false,
+      },
+    });
+    expect(mockPerformSwitchBranch).toHaveBeenCalledWith('/repo/path', 'feature/test', undefined);
+  });
+
+  it('should stash changes and switch when tracked files are modified', async () => {
+    req.body = {
+      worktreePath: '/repo/path',
+      branchName: 'feature/test',
+    };
+
+    mockPerformSwitchBranch.mockResolvedValue({
+      success: true,
+      result: {
+        previousBranch: 'main',
+        currentBranch: 'feature/test',
+        message: "Switched to branch 'feature/test' (local changes stashed and reapplied)",
+        hasConflicts: false,
+        stashedChanges: true,
+      },
+    });
+
+    const handler = createSwitchBranchHandler();
+    await handler(req, res);
+
+    expect(res.json).toHaveBeenCalledWith({
+      success: true,
+      result: {
+        previousBranch: 'main',
+        currentBranch: 'feature/test',
+        message: "Switched to branch 'feature/test' (local changes stashed and reapplied)",
+        hasConflicts: false,
+        stashedChanges: true,
+      },
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/agent-executor-summary.test.ts b/temp_repo/apps/server/tests/unit/services/agent-executor-summary.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3bb3cc06d731c4c1b94d0fbeb710d10675f33463
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/agent-executor-summary.test.ts
@@ -0,0 +1,446 @@
+import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
+import { AgentExecutor } from '../../../src/services/agent-executor.js';
+import type { TypedEventBus } from '../../../src/services/typed-event-bus.js';
+import type { FeatureStateManager } from '../../../src/services/feature-state-manager.js';
+import type { PlanApprovalService } from '../../../src/services/plan-approval-service.js';
+import type { BaseProvider } from '../../../src/providers/base-provider.js';
+import * as secureFs from '../../../src/lib/secure-fs.js';
+import { getFeatureDir } from '@automaker/platform';
+import { buildPromptWithImages } from '@automaker/utils';
+
+vi.mock('../../../src/lib/secure-fs.js', () => ({
+  mkdir: vi.fn().mockResolvedValue(undefined),
+  writeFile: vi.fn().mockResolvedValue(undefined),
+  appendFile: vi.fn().mockResolvedValue(undefined),
+  readFile: vi.fn().mockResolvedValue(''),
+}));
+
+vi.mock('@automaker/platform', () => ({
+  getFeatureDir: vi.fn(),
+}));
+
+vi.mock('@automaker/utils', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@automaker/utils')>();
+  return {
+    ...actual,
+    buildPromptWithImages: vi.fn(),
+    createLogger: vi.fn().mockReturnValue({
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+      debug: vi.fn(),
+    }),
+  };
+});
+
+describe('AgentExecutor Summary Extraction', () => {
+  let mockEventBus: TypedEventBus;
+  let mockFeatureStateManager: FeatureStateManager;
+  let mockPlanApprovalService: PlanApprovalService;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockEventBus = {
+      emitAutoModeEvent: vi.fn(),
+    } as unknown as TypedEventBus;
+
+    mockFeatureStateManager = {
+      updateTaskStatus: vi.fn().mockResolvedValue(undefined),
+      updateFeaturePlanSpec: vi.fn().mockResolvedValue(undefined),
+      saveFeatureSummary: vi.fn().mockResolvedValue(undefined),
+    } as unknown as FeatureStateManager;
+
+    mockPlanApprovalService = {
+      waitForApproval: vi.fn(),
+    } as unknown as PlanApprovalService;
+
+    (getFeatureDir as Mock).mockReturnValue('/mock/feature/dir');
+    (buildPromptWithImages as Mock).mockResolvedValue({ content: 'mocked prompt' });
+  });
+
+  it('should extract summary from new session content only', async () => {
+    const executor = new AgentExecutor(
+      mockEventBus,
+      mockFeatureStateManager,
+      mockPlanApprovalService,
+      null
+    );
+
+    const previousContent = `Some previous work.
+<summary>Old summary</summary>`;
+    const newWork = `New implementation work.
+<summary>New summary</summary>`;
+
+    const mockProvider = {
+      getName: () => 'mock',
+      executeQuery: vi.fn().mockImplementation(function* () {
+        yield {
+          type: 'assistant',
+          message: {
+            content: [{ type: 'text', text: newWork }],
+          },
+        };
+        yield { type: 'result', subtype: 'success' };
+      }),
+    } as unknown as BaseProvider;
+
+    const options = {
+      workDir: '/test',
+      featureId: 'test-feature',
+      prompt: 'Test prompt',
+      projectPath: '/project',
+      abortController: new AbortController(),
+      provider: mockProvider,
+      effectiveBareModel: 'claude-sonnet',
+      planningMode: 'skip' as const,
+      previousContent,
+    };
+
+    const callbacks = {
+      waitForApproval: vi.fn(),
+      saveFeatureSummary: vi.fn(),
+      updateFeatureSummary: vi.fn(),
+      buildTaskPrompt: vi.fn(),
+    };
+
+    await executor.execute(options, callbacks);
+
+    // Verify it called saveFeatureSummary with the NEW summary
+    expect(callbacks.saveFeatureSummary).toHaveBeenCalledWith(
+      '/project',
+      'test-feature',
+      'New summary'
+    );
+
+    // Ensure it didn't call it with Old summary
+    expect(callbacks.saveFeatureSummary).not.toHaveBeenCalledWith(
+      '/project',
+      'test-feature',
+      'Old summary'
+    );
+  });
+
+  it('should not save summary if no summary in NEW session content', async () => {
+    const executor = new AgentExecutor(
+      mockEventBus,
+      mockFeatureStateManager,
+      mockPlanApprovalService,
+      null
+    );
+
+    const previousContent = `Some previous work.
+<summary>Old summary</summary>`;
+    const newWork = `New implementation work without a summary tag.`;
+
+    const mockProvider = {
+      getName: () => 'mock',
+      executeQuery: vi.fn().mockImplementation(function* () {
+        yield {
+          type: 'assistant',
+          message: {
+            content: [{ type: 'text', text: newWork }],
+          },
+        };
+        yield { type: 'result', subtype: 'success' };
+      }),
+    } as unknown as BaseProvider;
+
+    const options = {
+      workDir: '/test',
+      featureId: 'test-feature',
+      prompt: 'Test prompt',
+      projectPath: '/project',
+      abortController: new AbortController(),
+      provider: mockProvider,
+      effectiveBareModel: 'claude-sonnet',
+      planningMode: 'skip' as const,
+      previousContent,
+    };
+
+    const callbacks = {
+      waitForApproval: vi.fn(),
+      saveFeatureSummary: vi.fn(),
+      updateFeatureSummary: vi.fn(),
+      buildTaskPrompt: vi.fn(),
+    };
+
+    await executor.execute(options, callbacks);
+
+    // Verify it NEVER called saveFeatureSummary because there was no NEW summary
+    expect(callbacks.saveFeatureSummary).not.toHaveBeenCalled();
+  });
+
+  it('should extract task summary and update task status during streaming', async () => {
+    const executor = new AgentExecutor(
+      mockEventBus,
+      mockFeatureStateManager,
+      mockPlanApprovalService,
+      null
+    );
+
+    const mockProvider = {
+      getName: () => 'mock',
+      executeQuery: vi.fn().mockImplementation(function* () {
+        yield {
+          type: 'assistant',
+          message: {
+            content: [{ type: 'text', text: 'Working... ' }],
+          },
+        };
+        yield {
+          type: 'assistant',
+          message: {
+            content: [{ type: 'text', text: '[TASK_COMPLETE] T001: Task finished successfully' }],
+          },
+        };
+        yield { type: 'result', subtype: 'success' };
+      }),
+    } as unknown as BaseProvider;
+
+    // We trigger executeTasksLoop by providing persistedTasks
+    const options = {
+      workDir: '/test',
+      featureId: 'test-feature',
+      prompt: 'Test prompt',
+      projectPath: '/project',
+      abortController: new AbortController(),
+      provider: mockProvider,
+      effectiveBareModel: 'claude-sonnet',
+      planningMode: 'skip' as const,
+      existingApprovedPlanContent: 'Some plan',
+      persistedTasks: [{ id: 'T001', description: 'Task 1', status: 'pending' as const }],
+    };
+
+    const callbacks = {
+      waitForApproval: vi.fn(),
+      saveFeatureSummary: vi.fn(),
+      updateFeatureSummary: vi.fn(),
+      buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+    };
+
+    await executor.execute(options, callbacks);
+
+    // Verify it updated task status with summary
+    expect(mockFeatureStateManager.updateTaskStatus).toHaveBeenCalledWith(
+      '/project',
+      'test-feature',
+      'T001',
+      'completed',
+      'Task finished successfully'
+    );
+  });
+
+  describe('Pipeline step summary fallback', () => {
+    it('should save fallback summary when extraction fails for pipeline step', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        null
+      );
+
+      // Content without a summary tag (extraction will fail)
+      const newWork = 'Implementation completed without summary tag.';
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: newWork }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const options = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet',
+        planningMode: 'skip' as const,
+        status: 'pipeline_step1' as const, // Pipeline status triggers fallback
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn(),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn(),
+      };
+
+      await executor.execute(options, callbacks);
+
+      // Verify fallback summary was saved with trimmed content
+      expect(callbacks.saveFeatureSummary).toHaveBeenCalledWith(
+        '/project',
+        'test-feature',
+        'Implementation completed without summary tag.'
+      );
+    });
+
+    it('should not save fallback for non-pipeline status when extraction fails', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        null
+      );
+
+      // Content without a summary tag
+      const newWork = 'Implementation completed without summary tag.';
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: newWork }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const options = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet',
+        planningMode: 'skip' as const,
+        status: 'in_progress' as const, // Non-pipeline status
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn(),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn(),
+      };
+
+      await executor.execute(options, callbacks);
+
+      // Verify no fallback was saved for non-pipeline status
+      expect(callbacks.saveFeatureSummary).not.toHaveBeenCalled();
+    });
+
+    it('should not save empty fallback for pipeline step', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        null
+      );
+
+      // Empty/whitespace-only content
+      const newWork = '   \n\t  ';
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: newWork }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const options = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet',
+        planningMode: 'skip' as const,
+        status: 'pipeline_step1' as const,
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn(),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn(),
+      };
+
+      await executor.execute(options, callbacks);
+
+      // Verify no fallback was saved since content was empty/whitespace
+      expect(callbacks.saveFeatureSummary).not.toHaveBeenCalled();
+    });
+
+    it('should prefer extracted summary over fallback for pipeline step', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        null
+      );
+
+      // Content WITH a summary tag
+      const newWork = `Implementation details here.
+<summary>Proper summary from extraction</summary>`;
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: newWork }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const options = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet',
+        planningMode: 'skip' as const,
+        status: 'pipeline_step1' as const,
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn(),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn(),
+      };
+
+      await executor.execute(options, callbacks);
+
+      // Verify extracted summary was saved, not the full content
+      expect(callbacks.saveFeatureSummary).toHaveBeenCalledWith(
+        '/project',
+        'test-feature',
+        'Proper summary from extraction'
+      );
+      // Ensure it didn't save the full content as fallback
+      expect(callbacks.saveFeatureSummary).not.toHaveBeenCalledWith(
+        '/project',
+        'test-feature',
+        expect.stringContaining('Implementation details here')
+      );
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/agent-executor.test.ts b/temp_repo/apps/server/tests/unit/services/agent-executor.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..868878bdafa5cb54761d036bd57572709c3d4966
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/agent-executor.test.ts
@@ -0,0 +1,1749 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import {
+  AgentExecutor,
+  type AgentExecutionOptions,
+  type AgentExecutionResult,
+  type WaitForApprovalFn,
+  type SaveFeatureSummaryFn,
+  type UpdateFeatureSummaryFn,
+  type BuildTaskPromptFn,
+} from '../../../src/services/agent-executor.js';
+import type { TypedEventBus } from '../../../src/services/typed-event-bus.js';
+import type { FeatureStateManager } from '../../../src/services/feature-state-manager.js';
+import type { PlanApprovalService } from '../../../src/services/plan-approval-service.js';
+import type { SettingsService } from '../../../src/services/settings-service.js';
+import type { BaseProvider } from '../../../src/providers/base-provider.js';
+
+/**
+ * Unit tests for AgentExecutor
+ *
+ * Note: Full integration tests for execute() require complex mocking of
+ * @automaker/utils and @automaker/platform which have module hoisting issues.
+ * These tests focus on:
+ * - Constructor injection
+ * - Interface exports
+ * - Type correctness
+ *
+ * Integration tests for streaming/marker detection are covered in E2E tests
+ * and auto-mode-service tests.
+ */
+describe('AgentExecutor', () => {
+  // Mock dependencies
+  let mockEventBus: TypedEventBus;
+  let mockFeatureStateManager: FeatureStateManager;
+  let mockPlanApprovalService: PlanApprovalService;
+  let mockSettingsService: SettingsService | null;
+
+  beforeEach(() => {
+    // Reset mocks
+    mockEventBus = {
+      emitAutoModeEvent: vi.fn(),
+    } as unknown as TypedEventBus;
+
+    mockFeatureStateManager = {
+      updateTaskStatus: vi.fn().mockResolvedValue(undefined),
+      updateFeaturePlanSpec: vi.fn().mockResolvedValue(undefined),
+      saveFeatureSummary: vi.fn().mockResolvedValue(undefined),
+    } as unknown as FeatureStateManager;
+
+    mockPlanApprovalService = {
+      waitForApproval: vi.fn(),
+    } as unknown as PlanApprovalService;
+
+    mockSettingsService = null;
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('constructor', () => {
+    it('should create instance with all dependencies', () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+      expect(executor).toBeInstanceOf(AgentExecutor);
+    });
+
+    it('should accept null settingsService', () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        null
+      );
+      expect(executor).toBeInstanceOf(AgentExecutor);
+    });
+
+    it('should accept undefined settingsService', () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService
+      );
+      expect(executor).toBeInstanceOf(AgentExecutor);
+    });
+
+    it('should store eventBus dependency', () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+      // Verify executor was created - actual use tested via execute()
+      expect(executor).toBeDefined();
+    });
+
+    it('should store featureStateManager dependency', () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+      expect(executor).toBeDefined();
+    });
+
+    it('should store planApprovalService dependency', () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+      expect(executor).toBeDefined();
+    });
+  });
+
+  describe('interface exports', () => {
+    it('should export AgentExecutionOptions type', () => {
+      // Type assertion test - if this compiles, the type is exported correctly
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: {} as BaseProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+      };
+      expect(options.featureId).toBe('test-feature');
+    });
+
+    it('should export AgentExecutionResult type', () => {
+      const result: AgentExecutionResult = {
+        responseText: 'test response',
+        specDetected: false,
+        tasksCompleted: 0,
+        aborted: false,
+      };
+      expect(result.aborted).toBe(false);
+    });
+
+    it('should export callback types', () => {
+      const waitForApproval: WaitForApprovalFn = async () => ({ approved: true });
+      const saveFeatureSummary: SaveFeatureSummaryFn = async () => {};
+      const updateFeatureSummary: UpdateFeatureSummaryFn = async () => {};
+      const buildTaskPrompt: BuildTaskPromptFn = () => 'prompt';
+
+      expect(typeof waitForApproval).toBe('function');
+      expect(typeof saveFeatureSummary).toBe('function');
+      expect(typeof updateFeatureSummary).toBe('function');
+      expect(typeof buildTaskPrompt).toBe('function');
+    });
+  });
+
+  describe('AgentExecutionOptions', () => {
+    it('should accept required options', () => {
+      const options: AgentExecutionOptions = {
+        workDir: '/test/workdir',
+        featureId: 'feature-123',
+        prompt: 'Test prompt',
+        projectPath: '/test/project',
+        abortController: new AbortController(),
+        provider: {} as BaseProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+      };
+
+      expect(options.workDir).toBe('/test/workdir');
+      expect(options.featureId).toBe('feature-123');
+      expect(options.prompt).toBe('Test prompt');
+      expect(options.projectPath).toBe('/test/project');
+      expect(options.abortController).toBeInstanceOf(AbortController);
+      expect(options.effectiveBareModel).toBe('claude-sonnet-4-6');
+    });
+
+    it('should accept optional options', () => {
+      const options: AgentExecutionOptions = {
+        workDir: '/test/workdir',
+        featureId: 'feature-123',
+        prompt: 'Test prompt',
+        projectPath: '/test/project',
+        abortController: new AbortController(),
+        provider: {} as BaseProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        // Optional fields
+        imagePaths: ['/image1.png', '/image2.png'],
+        model: 'claude-sonnet-4-6',
+        planningMode: 'spec',
+        requirePlanApproval: true,
+        previousContent: 'Previous content',
+        systemPrompt: 'System prompt',
+        autoLoadClaudeMd: true,
+        thinkingLevel: 'medium',
+        branchName: 'feature-branch',
+        specAlreadyDetected: false,
+        existingApprovedPlanContent: 'Approved plan',
+        persistedTasks: [{ id: 'T001', description: 'Task 1', status: 'pending' }],
+        sdkOptions: {
+          maxTurns: 100,
+          allowedTools: ['read', 'write'],
+        },
+      };
+
+      expect(options.imagePaths).toHaveLength(2);
+      expect(options.planningMode).toBe('spec');
+      expect(options.requirePlanApproval).toBe(true);
+      expect(options.branchName).toBe('feature-branch');
+    });
+  });
+
+  describe('AgentExecutionResult', () => {
+    it('should contain responseText', () => {
+      const result: AgentExecutionResult = {
+        responseText: 'Full response text from agent',
+        specDetected: true,
+        tasksCompleted: 5,
+        aborted: false,
+      };
+      expect(result.responseText).toBe('Full response text from agent');
+    });
+
+    it('should contain specDetected flag', () => {
+      const result: AgentExecutionResult = {
+        responseText: '',
+        specDetected: true,
+        tasksCompleted: 0,
+        aborted: false,
+      };
+      expect(result.specDetected).toBe(true);
+    });
+
+    it('should contain tasksCompleted count', () => {
+      const result: AgentExecutionResult = {
+        responseText: '',
+        specDetected: true,
+        tasksCompleted: 10,
+        aborted: false,
+      };
+      expect(result.tasksCompleted).toBe(10);
+    });
+
+    it('should contain aborted flag', () => {
+      const result: AgentExecutionResult = {
+        responseText: '',
+        specDetected: false,
+        tasksCompleted: 3,
+        aborted: true,
+      };
+      expect(result.aborted).toBe(true);
+    });
+  });
+
+  describe('execute method signature', () => {
+    it('should have execute method', () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+      expect(typeof executor.execute).toBe('function');
+    });
+
+    it('should accept options and callbacks', () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      // Type check - verifying the signature accepts the expected parameters
+      // Actual execution would require mocking external modules
+      const executeSignature = executor.execute.length;
+      // execute(options, callbacks) = 2 parameters
+      expect(executeSignature).toBe(2);
+    });
+  });
+
+  describe('callback types', () => {
+    it('WaitForApprovalFn should return approval result', async () => {
+      const waitForApproval: WaitForApprovalFn = vi.fn().mockResolvedValue({
+        approved: true,
+        feedback: 'Looks good',
+        editedPlan: undefined,
+      });
+
+      const result = await waitForApproval('feature-123', '/project');
+      expect(result.approved).toBe(true);
+      expect(result.feedback).toBe('Looks good');
+    });
+
+    it('WaitForApprovalFn should handle rejection with feedback', async () => {
+      const waitForApproval: WaitForApprovalFn = vi.fn().mockResolvedValue({
+        approved: false,
+        feedback: 'Please add more tests',
+        editedPlan: '## Revised Plan\n...',
+      });
+
+      const result = await waitForApproval('feature-123', '/project');
+      expect(result.approved).toBe(false);
+      expect(result.feedback).toBe('Please add more tests');
+      expect(result.editedPlan).toBeDefined();
+    });
+
+    it('SaveFeatureSummaryFn should accept parameters', async () => {
+      const saveSummary: SaveFeatureSummaryFn = vi.fn().mockResolvedValue(undefined);
+
+      await saveSummary('/project', 'feature-123', 'Feature summary text');
+      expect(saveSummary).toHaveBeenCalledWith('/project', 'feature-123', 'Feature summary text');
+    });
+
+    it('UpdateFeatureSummaryFn should accept parameters', async () => {
+      const updateSummary: UpdateFeatureSummaryFn = vi.fn().mockResolvedValue(undefined);
+
+      await updateSummary('/project', 'feature-123', 'Updated summary');
+      expect(updateSummary).toHaveBeenCalledWith('/project', 'feature-123', 'Updated summary');
+    });
+
+    it('BuildTaskPromptFn should return prompt string', () => {
+      const buildPrompt: BuildTaskPromptFn = vi.fn().mockReturnValue('Execute T001: Create file');
+
+      const task = { id: 'T001', description: 'Create file', status: 'pending' as const };
+      const allTasks = [task];
+      const prompt = buildPrompt(task, allTasks, 0, 'Plan content', 'Template', undefined);
+
+      expect(typeof prompt).toBe('string');
+      expect(prompt).toBe('Execute T001: Create file');
+    });
+  });
+
+  describe('dependency injection patterns', () => {
+    it('should allow different eventBus implementations', () => {
+      const customEventBus = {
+        emitAutoModeEvent: vi.fn(),
+        emit: vi.fn(),
+        on: vi.fn(),
+      } as unknown as TypedEventBus;
+
+      const executor = new AgentExecutor(
+        customEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      expect(executor).toBeInstanceOf(AgentExecutor);
+    });
+
+    it('should allow different featureStateManager implementations', () => {
+      const customStateManager = {
+        updateTaskStatus: vi.fn().mockResolvedValue(undefined),
+        updateFeaturePlanSpec: vi.fn().mockResolvedValue(undefined),
+        saveFeatureSummary: vi.fn().mockResolvedValue(undefined),
+        loadFeature: vi.fn().mockResolvedValue(null),
+      } as unknown as FeatureStateManager;
+
+      const executor = new AgentExecutor(
+        mockEventBus,
+        customStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      expect(executor).toBeInstanceOf(AgentExecutor);
+    });
+
+    it('should work with mock settingsService', () => {
+      const customSettingsService = {
+        getGlobalSettings: vi.fn().mockResolvedValue({}),
+        getCredentials: vi.fn().mockResolvedValue({}),
+      } as unknown as SettingsService;
+
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        customSettingsService
+      );
+
+      expect(executor).toBeInstanceOf(AgentExecutor);
+    });
+  });
+
+  describe('execute() behavior', () => {
+    /**
+     * Execution tests focus on verifiable behaviors without requiring
+     * full stream mocking. Complex integration scenarios are tested in E2E.
+     */
+
+    it('should return aborted=true when abort signal is already aborted', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      // Create an already-aborted controller
+      const abortController = new AbortController();
+      abortController.abort();
+
+      // Mock provider that yields nothing (would check signal first)
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          // Generator yields nothing, simulating immediate abort check
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController,
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      // Execute - should complete without error even with aborted signal
+      const result = await executor.execute(options, callbacks);
+
+      // When stream is empty and signal is aborted before stream starts,
+      // the result depends on whether abort was checked
+      expect(result).toBeDefined();
+      expect(result.responseText).toBeDefined();
+    });
+
+    it('should initialize with previousContent when provided', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          // Empty stream
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        previousContent: 'Previous context from earlier session',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      const result = await executor.execute(options, callbacks);
+
+      // Response should start with previous content
+      expect(result.responseText).toContain('Previous context from earlier session');
+      expect(result.responseText).toContain('Follow-up Session');
+    });
+
+    it('should return specDetected=false when no spec markers in content', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'Simple response without spec markers' }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip', // No spec detection in skip mode
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      const result = await executor.execute(options, callbacks);
+
+      expect(result.specDetected).toBe(false);
+      expect(result.responseText).toContain('Simple response without spec markers');
+    });
+
+    it('should emit auto_mode_progress events for text content', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'First chunk of text' }],
+            },
+          };
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'Second chunk of text' }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await executor.execute(options, callbacks);
+
+      // Should emit progress events for each text chunk
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith('auto_mode_progress', {
+        featureId: 'test-feature',
+        branchName: null,
+        content: 'First chunk of text',
+      });
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith('auto_mode_progress', {
+        featureId: 'test-feature',
+        branchName: null,
+        content: 'Second chunk of text',
+      });
+    });
+
+    it('should emit auto_mode_tool events for tool use', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [
+                {
+                  type: 'tool_use',
+                  name: 'write_file',
+                  input: { path: '/test/file.ts', content: 'test content' },
+                },
+              ],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await executor.execute(options, callbacks);
+
+      // Should emit tool event
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith('auto_mode_tool', {
+        featureId: 'test-feature',
+        branchName: null,
+        tool: 'write_file',
+        input: { path: '/test/file.ts', content: 'test content' },
+      });
+    });
+
+    it('should throw error when provider stream yields error message', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'Starting...' }],
+            },
+          };
+          yield {
+            type: 'error',
+            error: 'API rate limit exceeded',
+          };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await expect(executor.execute(options, callbacks)).rejects.toThrow('API rate limit exceeded');
+    });
+
+    it('should throw "Unknown error" when provider stream yields error with empty message', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'error',
+            error: '',
+            session_id: 'sess-123',
+          };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await expect(executor.execute(options, callbacks)).rejects.toThrow('Unknown error');
+    });
+
+    it('should throw with sanitized error when provider yields ANSI-decorated error', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'error',
+            // ANSI color codes + "Error: " prefix that should be stripped
+            error: '\x1b[31mError: Connection refused\x1b[0m',
+          };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      // Should strip ANSI codes and "Error: " prefix
+      await expect(executor.execute(options, callbacks)).rejects.toThrow('Connection refused');
+    });
+
+    it('should throw when result subtype is error_max_turns', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'Working on it...' }],
+            },
+          };
+          yield {
+            type: 'result',
+            subtype: 'error_max_turns',
+            session_id: 'sess-456',
+          };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await expect(executor.execute(options, callbacks)).rejects.toThrow(
+        'Agent execution ended with: error_max_turns'
+      );
+    });
+
+    it('should throw when result subtype is error_during_execution', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'result',
+            subtype: 'error_during_execution',
+            session_id: 'sess-789',
+          };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await expect(executor.execute(options, callbacks)).rejects.toThrow(
+        'Agent execution ended with: error_during_execution'
+      );
+    });
+
+    it('should throw when result subtype is error_max_structured_output_retries', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'result',
+            subtype: 'error_max_structured_output_retries',
+          };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await expect(executor.execute(options, callbacks)).rejects.toThrow(
+        'Agent execution ended with: error_max_structured_output_retries'
+      );
+    });
+
+    it('should throw when result subtype is error_max_budget_usd', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'result',
+            subtype: 'error_max_budget_usd',
+            session_id: 'sess-budget',
+          };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await expect(executor.execute(options, callbacks)).rejects.toThrow(
+        'Agent execution ended with: error_max_budget_usd'
+      );
+    });
+
+    it('should NOT throw when result subtype is success', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'Done!' }],
+            },
+          };
+          yield {
+            type: 'result',
+            subtype: 'success',
+            session_id: 'sess-ok',
+          };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      // Should resolve without throwing
+      const result = await executor.execute(options, callbacks);
+      expect(result.aborted).toBe(false);
+      expect(result.responseText).toContain('Done!');
+    });
+
+    it('should throw error when authentication fails in response', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'Error: Invalid API key' }],
+            },
+          };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await expect(executor.execute(options, callbacks)).rejects.toThrow('Authentication failed');
+    });
+
+    it('should accumulate responseText from multiple text blocks', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [
+                { type: 'text', text: 'Part 1.' },
+                { type: 'text', text: ' Part 2.' },
+              ],
+            },
+          };
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: ' Part 3.' }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      const result = await executor.execute(options, callbacks);
+
+      // All parts should be in response text
+      expect(result.responseText).toContain('Part 1');
+      expect(result.responseText).toContain('Part 2');
+      expect(result.responseText).toContain('Part 3');
+    });
+
+    it('should return tasksCompleted=0 when no tasks executed', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'Simple response' }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      const result = await executor.execute(options, callbacks);
+
+      expect(result.tasksCompleted).toBe(0);
+      expect(result.aborted).toBe(false);
+    });
+
+    it('should pass branchName to event payloads', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'Response' }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+        branchName: 'feature/my-feature',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await executor.execute(options, callbacks);
+
+      // Branch name should be passed to progress event
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_progress',
+        expect.objectContaining({
+          branchName: 'feature/my-feature',
+        })
+      );
+    });
+
+    it('should pass claudeCompatibleProvider to executeQuery options', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const mockClaudeProvider = { id: 'zai-1', name: 'Zai' } as any;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        claudeCompatibleProvider: mockClaudeProvider,
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await executor.execute(options, callbacks);
+
+      expect(mockProvider.executeQuery).toHaveBeenCalledWith(
+        expect.objectContaining({
+          claudeCompatibleProvider: mockClaudeProvider,
+        })
+      );
+    });
+
+    it('should return correct result structure', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'Test response' }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary: vi.fn(),
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      const result = await executor.execute(options, callbacks);
+
+      // Verify result has all expected properties
+      expect(result).toHaveProperty('responseText');
+      expect(result).toHaveProperty('specDetected');
+      expect(result).toHaveProperty('tasksCompleted');
+      expect(result).toHaveProperty('aborted');
+
+      // Verify types
+      expect(typeof result.responseText).toBe('string');
+      expect(typeof result.specDetected).toBe('boolean');
+      expect(typeof result.tasksCompleted).toBe('number');
+      expect(typeof result.aborted).toBe('boolean');
+    });
+  });
+
+  describe('pipeline summary fallback with scaffold stripping', () => {
+    it('should strip follow-up scaffold from fallback summary when extraction fails', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'Some agent output without summary markers' }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const saveFeatureSummary = vi.fn().mockResolvedValue(undefined);
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+        previousContent: 'Previous session content',
+        status: 'pipeline_step1', // Pipeline status to trigger fallback
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary,
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await executor.execute(options, callbacks);
+
+      // The fallback summary should be called without the scaffold header
+      expect(saveFeatureSummary).toHaveBeenCalled();
+      const savedSummary = saveFeatureSummary.mock.calls[0][2];
+      // Should not contain the scaffold header
+      expect(savedSummary).not.toContain('---');
+      expect(savedSummary).not.toContain('Follow-up Session');
+      // Should contain the actual content
+      expect(savedSummary).toContain('Some agent output without summary markers');
+    });
+
+    it('should not save fallback when scaffold is the only content after stripping', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      // Provider yields no content - only scaffold will be present
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          // Empty stream - no actual content
+        }),
+      } as unknown as BaseProvider;
+
+      const saveFeatureSummary = vi.fn().mockResolvedValue(undefined);
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+        previousContent: 'Previous session content',
+        status: 'pipeline_step1', // Pipeline status
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary,
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await executor.execute(options, callbacks);
+
+      // Should not save an empty fallback (after scaffold is stripped)
+      expect(saveFeatureSummary).not.toHaveBeenCalled();
+    });
+
+    it('should save extracted summary when available, not fallback', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [
+                {
+                  type: 'text',
+                  text: 'Some content\n\n<summary>Extracted summary here</summary>\n\nMore content',
+                },
+              ],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const saveFeatureSummary = vi.fn().mockResolvedValue(undefined);
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+        previousContent: 'Previous session content',
+        status: 'pipeline_step1', // Pipeline status
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary,
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await executor.execute(options, callbacks);
+
+      // Should save the extracted summary, not the full content
+      expect(saveFeatureSummary).toHaveBeenCalledTimes(1);
+      expect(saveFeatureSummary).toHaveBeenCalledWith(
+        '/project',
+        'test-feature',
+        'Extracted summary here'
+      );
+    });
+
+    it('should handle scaffold with various whitespace patterns', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'Agent response here' }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const saveFeatureSummary = vi.fn().mockResolvedValue(undefined);
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+        previousContent: 'Previous session content',
+        status: 'pipeline_step1',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary,
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await executor.execute(options, callbacks);
+
+      // Should strip scaffold and save actual content
+      expect(saveFeatureSummary).toHaveBeenCalled();
+      const savedSummary = saveFeatureSummary.mock.calls[0][2];
+      expect(savedSummary.trim()).toBe('Agent response here');
+    });
+
+    it('should handle scaffold with extra newlines between markers', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'Actual content after scaffold' }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const saveFeatureSummary = vi.fn().mockResolvedValue(undefined);
+
+      // Set up with previous content to trigger scaffold insertion
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+        previousContent: 'Previous session content',
+        status: 'pipeline_step1',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary,
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await executor.execute(options, callbacks);
+
+      expect(saveFeatureSummary).toHaveBeenCalled();
+      const savedSummary = saveFeatureSummary.mock.calls[0][2];
+      // Verify the scaffold is stripped
+      expect(savedSummary).not.toMatch(/---\s*##\s*Follow-up Session/);
+    });
+
+    it('should handle content without any scaffold (first session)', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'First session output without summary' }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const saveFeatureSummary = vi.fn().mockResolvedValue(undefined);
+
+      // No previousContent means no scaffold
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+        previousContent: undefined, // No previous content
+        status: 'pipeline_step1',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary,
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await executor.execute(options, callbacks);
+
+      expect(saveFeatureSummary).toHaveBeenCalled();
+      const savedSummary = saveFeatureSummary.mock.calls[0][2];
+      expect(savedSummary).toBe('First session output without summary');
+    });
+
+    it('should handle non-pipeline status without saving fallback', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'Output without summary' }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const saveFeatureSummary = vi.fn().mockResolvedValue(undefined);
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+        previousContent: 'Previous content',
+        status: 'implementing', // Non-pipeline status
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary,
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await executor.execute(options, callbacks);
+
+      // Should NOT save fallback for non-pipeline status
+      expect(saveFeatureSummary).not.toHaveBeenCalled();
+    });
+
+    it('should correctly handle content that starts with dashes but is not scaffold', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      // Content that looks like it might have dashes but is actual content
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: '---This is a code comment or separator---' }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const saveFeatureSummary = vi.fn().mockResolvedValue(undefined);
+
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+        previousContent: undefined,
+        status: 'pipeline_step1',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary,
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await executor.execute(options, callbacks);
+
+      expect(saveFeatureSummary).toHaveBeenCalled();
+      const savedSummary = saveFeatureSummary.mock.calls[0][2];
+      // Content should be preserved since it's not the scaffold pattern
+      expect(savedSummary).toContain('---This is a code comment or separator---');
+    });
+
+    it('should handle scaffold at different positions in content', async () => {
+      const executor = new AgentExecutor(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockPlanApprovalService,
+        mockSettingsService
+      );
+
+      const mockProvider = {
+        getName: () => 'mock',
+        executeQuery: vi.fn().mockImplementation(function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              content: [{ type: 'text', text: 'Content after scaffold marker' }],
+            },
+          };
+          yield { type: 'result', subtype: 'success' };
+        }),
+      } as unknown as BaseProvider;
+
+      const saveFeatureSummary = vi.fn().mockResolvedValue(undefined);
+
+      // With previousContent, scaffold will be at the start of sessionContent
+      const options: AgentExecutionOptions = {
+        workDir: '/test',
+        featureId: 'test-feature',
+        prompt: 'Test prompt',
+        projectPath: '/project',
+        abortController: new AbortController(),
+        provider: mockProvider,
+        effectiveBareModel: 'claude-sonnet-4-6',
+        planningMode: 'skip',
+        previousContent: 'Previous content',
+        status: 'pipeline_step1',
+      };
+
+      const callbacks = {
+        waitForApproval: vi.fn().mockResolvedValue({ approved: true }),
+        saveFeatureSummary,
+        updateFeatureSummary: vi.fn(),
+        buildTaskPrompt: vi.fn().mockReturnValue('task prompt'),
+      };
+
+      await executor.execute(options, callbacks);
+
+      expect(saveFeatureSummary).toHaveBeenCalled();
+      const savedSummary = saveFeatureSummary.mock.calls[0][2];
+      // Scaffold should be stripped, only actual content remains
+      expect(savedSummary).toBe('Content after scaffold marker');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/agent-output-validation.test.ts b/temp_repo/apps/server/tests/unit/services/agent-output-validation.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6939246946ea503bb8c5197af251dfbd6e240e5b
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/agent-output-validation.test.ts
@@ -0,0 +1,192 @@
+import { describe, it, expect } from 'vitest';
+
+/**
+ * Contract tests verifying the tool marker format used by agent-executor
+ * (which writes agent output) and execution-service (which reads it to
+ * determine if the agent did meaningful work).
+ *
+ * The agent-executor writes: `\n🔧 Tool: ${block.name}\n`
+ * The execution-service checks: `agentOutput.includes('🔧 Tool:')`
+ *
+ * These tests ensure the marker format contract stays consistent and
+ * document the exact detection logic used for status determination.
+ */
+
+// The exact marker prefix that execution-service searches for
+const TOOL_MARKER = '🔧 Tool:';
+
+// Minimum output length threshold for "meaningful work"
+const MIN_OUTPUT_LENGTH = 200;
+
+/**
+ * Simulates the agent-executor's tool_use output format.
+ * See: agent-executor.ts line ~293
+ */
+function formatToolUseBlock(toolName: string, input?: Record<string, unknown>): string {
+  let output = `\n${TOOL_MARKER} ${toolName}\n`;
+  if (input) output += `Input: ${JSON.stringify(input, null, 2)}\n`;
+  return output;
+}
+
+/**
+ * Simulates the execution-service's output validation logic.
+ * See: execution-service.ts lines ~427-429
+ */
+function validateAgentOutput(
+  agentOutput: string,
+  skipTests: boolean
+): 'verified' | 'waiting_approval' {
+  const hasToolUsage = agentOutput.includes(TOOL_MARKER);
+  const hasMinimalOutput = agentOutput.trim().length < MIN_OUTPUT_LENGTH;
+  const agentDidWork = hasToolUsage && !hasMinimalOutput;
+
+  if (skipTests) return 'waiting_approval';
+  if (!agentDidWork) return 'waiting_approval';
+  return 'verified';
+}
+
+describe('Agent Output Validation - Contract Tests', () => {
+  describe('tool marker format contract', () => {
+    it('agent-executor tool format contains the expected marker', () => {
+      const toolOutput = formatToolUseBlock('Read', { file_path: '/src/index.ts' });
+      expect(toolOutput).toContain(TOOL_MARKER);
+    });
+
+    it('agent-executor tool format includes tool name after marker', () => {
+      const toolOutput = formatToolUseBlock('Edit', {
+        file_path: '/src/app.ts',
+        old_string: 'foo',
+        new_string: 'bar',
+      });
+      expect(toolOutput).toContain('🔧 Tool: Edit');
+    });
+
+    it('agent-executor tool format includes JSON input', () => {
+      const input = { file_path: '/src/index.ts' };
+      const toolOutput = formatToolUseBlock('Read', input);
+      expect(toolOutput).toContain('Input: ');
+      expect(toolOutput).toContain('"file_path": "/src/index.ts"');
+    });
+
+    it('agent-executor tool format works without input', () => {
+      const toolOutput = formatToolUseBlock('Bash');
+      expect(toolOutput).toContain('🔧 Tool: Bash');
+      expect(toolOutput).not.toContain('Input:');
+    });
+
+    it('marker includes colon and space to avoid false positives', () => {
+      // Ensure the marker is specific enough to avoid matching other emoji patterns
+      expect(TOOL_MARKER).toBe('🔧 Tool:');
+      expect(TOOL_MARKER).toContain(':');
+    });
+  });
+
+  describe('output validation logic', () => {
+    it('verified: tool usage + sufficient output', () => {
+      const output =
+        'Starting implementation of the new feature...\n' +
+        formatToolUseBlock('Read', { file_path: '/src/index.ts' }) +
+        'I can see the existing code. Let me make the needed changes.\n' +
+        formatToolUseBlock('Edit', { file_path: '/src/index.ts' }) +
+        'Changes complete. The implementation adds new validation logic and tests.';
+      expect(output.trim().length).toBeGreaterThanOrEqual(MIN_OUTPUT_LENGTH);
+
+      expect(validateAgentOutput(output, false)).toBe('verified');
+    });
+
+    it('waiting_approval: no tool markers regardless of length', () => {
+      const longOutput = 'I analyzed the codebase. '.repeat(50);
+      expect(longOutput.trim().length).toBeGreaterThan(MIN_OUTPUT_LENGTH);
+
+      expect(validateAgentOutput(longOutput, false)).toBe('waiting_approval');
+    });
+
+    it('waiting_approval: tool markers but insufficient length', () => {
+      const shortOutput = formatToolUseBlock('Read', { file_path: '/src/a.ts' });
+      expect(shortOutput.trim().length).toBeLessThan(MIN_OUTPUT_LENGTH);
+
+      expect(validateAgentOutput(shortOutput, false)).toBe('waiting_approval');
+    });
+
+    it('waiting_approval: empty output', () => {
+      expect(validateAgentOutput('', false)).toBe('waiting_approval');
+    });
+
+    it('waiting_approval: skipTests always overrides', () => {
+      const goodOutput =
+        'Starting...\n' +
+        formatToolUseBlock('Read', { file_path: '/src/index.ts' }) +
+        formatToolUseBlock('Edit', { file_path: '/src/index.ts' }) +
+        'Done implementing. '.repeat(15);
+      expect(goodOutput.trim().length).toBeGreaterThanOrEqual(MIN_OUTPUT_LENGTH);
+
+      expect(validateAgentOutput(goodOutput, true)).toBe('waiting_approval');
+    });
+
+    it('boundary: exactly MIN_OUTPUT_LENGTH chars with tool is verified', () => {
+      const tool = formatToolUseBlock('Read');
+      const padding = 'x'.repeat(MIN_OUTPUT_LENGTH - tool.trim().length);
+      const output = tool + padding;
+      expect(output.trim().length).toBeGreaterThanOrEqual(MIN_OUTPUT_LENGTH);
+
+      expect(validateAgentOutput(output, false)).toBe('verified');
+    });
+
+    it('boundary: MIN_OUTPUT_LENGTH - 1 chars with tool is waiting_approval', () => {
+      const marker = `${TOOL_MARKER} Read\n`;
+      const padding = 'x'.repeat(MIN_OUTPUT_LENGTH - 1 - marker.length);
+      const output = marker + padding;
+      expect(output.trim().length).toBe(MIN_OUTPUT_LENGTH - 1);
+
+      expect(validateAgentOutput(output, false)).toBe('waiting_approval');
+    });
+  });
+
+  describe('realistic provider scenarios', () => {
+    it('Claude SDK agent with multiple tools → verified', () => {
+      let output = "I'll implement the feature.\n\n";
+      output += formatToolUseBlock('Read', { file_path: '/src/components/App.tsx' });
+      output += 'I see the component. Let me update it.\n\n';
+      output += formatToolUseBlock('Edit', {
+        file_path: '/src/components/App.tsx',
+        old_string: 'const App = () => {',
+        new_string: 'const App: React.FC = () => {',
+      });
+      output += 'Done. The component is now typed correctly.\n';
+
+      expect(validateAgentOutput(output, false)).toBe('verified');
+    });
+
+    it('Cursor CLI quick exit (no tools) → waiting_approval', () => {
+      const output = 'Task received. Processing...\nResult: completed successfully.';
+      expect(validateAgentOutput(output, false)).toBe('waiting_approval');
+    });
+
+    it('Codex CLI with brief acknowledgment → waiting_approval', () => {
+      const output = 'Understood the task. Starting implementation.\nDone.';
+      expect(validateAgentOutput(output, false)).toBe('waiting_approval');
+    });
+
+    it('Agent that only reads but makes no edits (single Read tool, short output) → waiting_approval', () => {
+      const output = formatToolUseBlock('Read', { file_path: '/src/index.ts' }) + 'File read.';
+      expect(output.trim().length).toBeLessThan(MIN_OUTPUT_LENGTH);
+      expect(validateAgentOutput(output, false)).toBe('waiting_approval');
+    });
+
+    it('Agent with extensive tool usage and explanation → verified', () => {
+      let output = 'Analyzing the codebase for the authentication feature.\n\n';
+      for (let i = 0; i < 5; i++) {
+        output += formatToolUseBlock('Read', { file_path: `/src/auth/handler${i}.ts` });
+        output += `Found handler ${i}. `;
+      }
+      output += formatToolUseBlock('Edit', {
+        file_path: '/src/auth/handler0.ts',
+        old_string: 'function login() {}',
+        new_string: 'async function login(creds: Credentials) { ... }',
+      });
+      output += 'Implementation complete with all authentication changes applied.\n';
+
+      expect(validateAgentOutput(output, false)).toBe('verified');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/agent-service.test.ts b/temp_repo/apps/server/tests/unit/services/agent-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..22ab63831b9d64b8f3aaec798236d47ac9c4991b
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/agent-service.test.ts
@@ -0,0 +1,997 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { AgentService } from '@/services/agent-service.js';
+import { ProviderFactory } from '@/providers/provider-factory.js';
+import * as fs from 'fs/promises';
+import * as imageHandler from '@automaker/utils';
+import * as promptBuilder from '@automaker/utils';
+import * as contextLoader from '@automaker/utils';
+import { collectAsyncGenerator } from '../../utils/helpers.js';
+
+// Create a shared mock logger instance for assertions using vi.hoisted
+const mockLogger = vi.hoisted(() => ({
+  info: vi.fn(),
+  error: vi.fn(),
+  warn: vi.fn(),
+  debug: vi.fn(),
+}));
+
+vi.mock('fs/promises');
+vi.mock('@/providers/provider-factory.js');
+vi.mock('@automaker/utils', async () => {
+  const actual = await vi.importActual<typeof import('@automaker/utils')>('@automaker/utils');
+  return {
+    ...actual,
+    loadContextFiles: vi.fn(),
+    buildPromptWithImages: vi.fn(),
+    readImageAsBase64: vi.fn(),
+    createLogger: vi.fn(() => mockLogger),
+  };
+});
+
+describe('agent-service.ts', () => {
+  let service: AgentService;
+  const mockEvents = {
+    subscribe: vi.fn(),
+    emit: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    service = new AgentService('/test/data', mockEvents as any);
+
+    // Mock loadContextFiles to return empty context by default
+    vi.mocked(contextLoader.loadContextFiles).mockResolvedValue({
+      files: [],
+      formattedPrompt: '',
+    });
+  });
+
+  describe('initialize', () => {
+    it('should create state directory', async () => {
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+
+      await service.initialize();
+
+      expect(fs.mkdir).toHaveBeenCalledWith(expect.stringContaining('agent-sessions'), {
+        recursive: true,
+      });
+    });
+  });
+
+  describe('startConversation', () => {
+    it('should create new session with empty messages', async () => {
+      const error: any = new Error('ENOENT');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+
+      const result = await service.startConversation({
+        sessionId: 'session-1',
+        workingDirectory: '/test/dir',
+      });
+
+      expect(result.success).toBe(true);
+      expect(result.messages).toEqual([]);
+      expect(result.sessionId).toBe('session-1');
+    });
+
+    it('should load existing session', async () => {
+      const existingMessages = [
+        {
+          id: 'msg-1',
+          role: 'user',
+          content: 'Hello',
+          timestamp: '2024-01-01T00:00:00Z',
+        },
+      ];
+
+      vi.mocked(fs.readFile).mockResolvedValue(JSON.stringify(existingMessages));
+
+      const result = await service.startConversation({
+        sessionId: 'session-1',
+        workingDirectory: '/test/dir',
+      });
+
+      expect(result.success).toBe(true);
+      expect(result.messages).toEqual(existingMessages);
+    });
+
+    it('should use process.cwd() if no working directory provided', async () => {
+      const error: any = new Error('ENOENT');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+
+      const result = await service.startConversation({
+        sessionId: 'session-1',
+      });
+
+      expect(result.success).toBe(true);
+    });
+
+    it('should reuse existing session if already started', async () => {
+      const error: any = new Error('ENOENT');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+
+      // Start session first time
+      await service.startConversation({
+        sessionId: 'session-1',
+      });
+
+      // Start again with same ID
+      const result = await service.startConversation({
+        sessionId: 'session-1',
+      });
+
+      expect(result.success).toBe(true);
+      // First call reads metadata file and session file via ensureSession (2 calls)
+      // Since no metadata or messages exist, a fresh session is created without loading queue state.
+      // Second call should reuse in-memory session (no additional calls)
+      expect(fs.readFile).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('sendMessage', () => {
+    beforeEach(async () => {
+      const error: any = new Error('ENOENT');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+
+      await service.startConversation({
+        sessionId: 'session-1',
+        workingDirectory: '/test/dir',
+      });
+    });
+
+    it('should throw if session not found', async () => {
+      await expect(
+        service.sendMessage({
+          sessionId: 'nonexistent',
+          message: 'Hello',
+        })
+      ).rejects.toThrow('Session nonexistent not found');
+    });
+
+    it('should process message and stream responses', async () => {
+      const mockProvider = {
+        getName: () => 'claude',
+        executeQuery: async function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              role: 'assistant',
+              content: [{ type: 'text', text: 'Response' }],
+            },
+          };
+          yield {
+            type: 'result',
+            subtype: 'success',
+          };
+        },
+      };
+
+      vi.mocked(ProviderFactory.getProviderForModel).mockReturnValue(mockProvider as any);
+
+      vi.mocked(promptBuilder.buildPromptWithImages).mockResolvedValue({
+        content: 'Hello',
+        hasImages: false,
+      });
+
+      const result = await service.sendMessage({
+        sessionId: 'session-1',
+        message: 'Hello',
+        workingDirectory: '/custom/dir',
+      });
+
+      expect(result.success).toBe(true);
+      expect(mockEvents.emit).toHaveBeenCalled();
+    });
+
+    it('should emit tool_result events from provider stream', async () => {
+      const mockProvider = {
+        getName: () => 'gemini',
+        executeQuery: async function* () {
+          yield {
+            type: 'assistant',
+            message: {
+              role: 'assistant',
+              content: [
+                {
+                  type: 'tool_use',
+                  name: 'Read',
+                  tool_use_id: 'tool-1',
+                  input: { file_path: 'README.md' },
+                },
+              ],
+            },
+          };
+          yield {
+            type: 'assistant',
+            message: {
+              role: 'assistant',
+              content: [
+                {
+                  type: 'tool_result',
+                  tool_use_id: 'tool-1',
+                  content: 'File contents here',
+                },
+              ],
+            },
+          };
+          yield {
+            type: 'result',
+            subtype: 'success',
+          };
+        },
+      };
+
+      vi.mocked(ProviderFactory.getProviderForModel).mockReturnValue(mockProvider as any);
+
+      vi.mocked(promptBuilder.buildPromptWithImages).mockResolvedValue({
+        content: 'Hello',
+        hasImages: false,
+      });
+
+      await service.sendMessage({
+        sessionId: 'session-1',
+        message: 'Hello',
+      });
+
+      expect(mockEvents.emit).toHaveBeenCalledWith(
+        'agent:stream',
+        expect.objectContaining({
+          sessionId: 'session-1',
+          type: 'tool_result',
+          tool: {
+            name: 'Read',
+            input: {
+              toolUseId: 'tool-1',
+              content: 'File contents here',
+            },
+          },
+        })
+      );
+    });
+
+    it('should emit tool_result with unknown tool name for unregistered tool_use_id', async () => {
+      const mockProvider = {
+        getName: () => 'gemini',
+        executeQuery: async function* () {
+          // Yield tool_result WITHOUT a preceding tool_use (unregistered tool_use_id)
+          yield {
+            type: 'assistant',
+            message: {
+              role: 'assistant',
+              content: [
+                {
+                  type: 'tool_result',
+                  tool_use_id: 'unregistered-id',
+                  content: 'Some result content',
+                },
+              ],
+            },
+          };
+          yield {
+            type: 'result',
+            subtype: 'success',
+          };
+        },
+      };
+
+      vi.mocked(ProviderFactory.getProviderForModel).mockReturnValue(mockProvider as any);
+
+      vi.mocked(promptBuilder.buildPromptWithImages).mockResolvedValue({
+        content: 'Hello',
+        hasImages: false,
+      });
+
+      await service.sendMessage({
+        sessionId: 'session-1',
+        message: 'Hello',
+      });
+
+      expect(mockEvents.emit).toHaveBeenCalledWith(
+        'agent:stream',
+        expect.objectContaining({
+          sessionId: 'session-1',
+          type: 'tool_result',
+          tool: {
+            name: 'unknown',
+            input: {
+              toolUseId: 'unregistered-id',
+              content: 'Some result content',
+            },
+          },
+        })
+      );
+    });
+
+    it('should handle images in message', async () => {
+      const mockProvider = {
+        getName: () => 'claude',
+        executeQuery: async function* () {
+          yield {
+            type: 'result',
+            subtype: 'success',
+          };
+        },
+      };
+
+      vi.mocked(ProviderFactory.getProviderForModel).mockReturnValue(mockProvider as any);
+
+      vi.mocked(imageHandler.readImageAsBase64).mockResolvedValue({
+        base64: 'base64data',
+        mimeType: 'image/png',
+        filename: 'test.png',
+        originalPath: '/path/test.png',
+      });
+
+      vi.mocked(promptBuilder.buildPromptWithImages).mockResolvedValue({
+        content: 'Check image',
+        hasImages: true,
+      });
+
+      await service.sendMessage({
+        sessionId: 'session-1',
+        message: 'Check this',
+        imagePaths: ['/path/test.png'],
+      });
+
+      expect(imageHandler.readImageAsBase64).toHaveBeenCalledWith('/path/test.png');
+    });
+
+    it('should handle failed image loading gracefully', async () => {
+      const mockProvider = {
+        getName: () => 'claude',
+        executeQuery: async function* () {
+          yield {
+            type: 'result',
+            subtype: 'success',
+          };
+        },
+      };
+
+      vi.mocked(ProviderFactory.getProviderForModel).mockReturnValue(mockProvider as any);
+
+      vi.mocked(imageHandler.readImageAsBase64).mockRejectedValue(new Error('Image not found'));
+
+      vi.mocked(promptBuilder.buildPromptWithImages).mockResolvedValue({
+        content: 'Check image',
+        hasImages: false,
+      });
+
+      await service.sendMessage({
+        sessionId: 'session-1',
+        message: 'Check this',
+        imagePaths: ['/path/test.png'],
+      });
+
+      expect(mockLogger.error).toHaveBeenCalled();
+    });
+
+    it('should use custom model if provided', async () => {
+      const mockProvider = {
+        getName: () => 'claude',
+        executeQuery: async function* () {
+          yield {
+            type: 'result',
+            subtype: 'success',
+          };
+        },
+      };
+
+      vi.mocked(ProviderFactory.getProviderForModel).mockReturnValue(mockProvider as any);
+
+      vi.mocked(promptBuilder.buildPromptWithImages).mockResolvedValue({
+        content: 'Hello',
+        hasImages: false,
+      });
+
+      await service.sendMessage({
+        sessionId: 'session-1',
+        message: 'Hello',
+        model: 'claude-sonnet-4-6',
+      });
+
+      expect(ProviderFactory.getProviderForModel).toHaveBeenCalledWith('claude-sonnet-4-6');
+    });
+
+    it('should save session messages', async () => {
+      const mockProvider = {
+        getName: () => 'claude',
+        executeQuery: async function* () {
+          yield {
+            type: 'result',
+            subtype: 'success',
+          };
+        },
+      };
+
+      vi.mocked(ProviderFactory.getProviderForModel).mockReturnValue(mockProvider as any);
+
+      vi.mocked(promptBuilder.buildPromptWithImages).mockResolvedValue({
+        content: 'Hello',
+        hasImages: false,
+      });
+
+      await service.sendMessage({
+        sessionId: 'session-1',
+        message: 'Hello',
+      });
+
+      expect(fs.writeFile).toHaveBeenCalled();
+    });
+
+    it('should include context/history preparation for Gemini requests', async () => {
+      let capturedOptions: any;
+      const mockProvider = {
+        getName: () => 'gemini',
+        executeQuery: async function* (options: any) {
+          capturedOptions = options;
+          yield {
+            type: 'result',
+            subtype: 'success',
+          };
+        },
+      };
+
+      vi.mocked(ProviderFactory.getProviderForModelName).mockReturnValue('gemini');
+      vi.mocked(ProviderFactory.getProviderForModel).mockReturnValue(mockProvider as any);
+      vi.mocked(promptBuilder.buildPromptWithImages).mockResolvedValue({
+        content: 'Hello',
+        hasImages: false,
+      });
+
+      await service.sendMessage({
+        sessionId: 'session-1',
+        message: 'Hello',
+        model: 'gemini-2.5-flash',
+      });
+
+      expect(contextLoader.loadContextFiles).toHaveBeenCalled();
+      expect(capturedOptions).toBeDefined();
+    });
+  });
+
+  describe('stopExecution', () => {
+    it('should stop execution for a session', async () => {
+      const error: any = new Error('ENOENT');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+
+      await service.startConversation({
+        sessionId: 'session-1',
+      });
+
+      // Should return success
+      const result = await service.stopExecution('session-1');
+      expect(result.success).toBeDefined();
+    });
+  });
+
+  describe('getHistory', () => {
+    it('should return message history', async () => {
+      const error: any = new Error('ENOENT');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+
+      await service.startConversation({
+        sessionId: 'session-1',
+      });
+
+      const history = await service.getHistory('session-1');
+
+      expect(history).toBeDefined();
+      expect(history?.messages).toEqual([]);
+    });
+
+    it('should handle non-existent session', async () => {
+      const history = await service.getHistory('nonexistent');
+      expect(history).toBeDefined();
+      expect(history.success).toBe(false);
+      expect(history.error).toBeDefined();
+      expect(typeof history.error).toBe('string');
+    });
+  });
+
+  describe('clearSession', () => {
+    it('should clear session messages', async () => {
+      const error: any = new Error('ENOENT');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+
+      await service.startConversation({
+        sessionId: 'session-1',
+      });
+
+      await service.clearSession('session-1');
+
+      const history = await service.getHistory('session-1');
+      expect(history?.messages).toEqual([]);
+      expect(fs.writeFile).toHaveBeenCalled();
+    });
+
+    it('should clear sdkSessionId from persisted metadata to prevent stale session errors', async () => {
+      // Setup: Session exists in metadata with an sdkSessionId (simulating
+      // a session that previously communicated with a CLI provider like OpenCode)
+      const metadata = {
+        'session-1': {
+          id: 'session-1',
+          name: 'Test Session',
+          workingDirectory: '/test/dir',
+          createdAt: '2024-01-01T00:00:00Z',
+          updatedAt: '2024-01-01T00:00:00Z',
+          sdkSessionId: 'stale-opencode-session-id',
+        },
+      };
+
+      vi.mocked(fs.readFile).mockResolvedValue(JSON.stringify(metadata));
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+
+      // Start the session (loads from disk metadata)
+      await service.startConversation({
+        sessionId: 'session-1',
+        workingDirectory: '/test/dir',
+      });
+
+      // Clear the session
+      await service.clearSession('session-1');
+
+      // Verify that the LAST writeFile call to sessions-metadata.json
+      // (from clearSdkSessionId) has sdkSessionId removed.
+      // Earlier writes may still include it (e.g., from updateSessionTimestamp).
+      const writeFileCalls = vi.mocked(fs.writeFile).mock.calls;
+      const metadataWriteCalls = writeFileCalls.filter(
+        (call) =>
+          typeof call[0] === 'string' && (call[0] as string).includes('sessions-metadata.json')
+      );
+
+      expect(metadataWriteCalls.length).toBeGreaterThan(0);
+      const lastMetadataWriteCall = metadataWriteCalls[metadataWriteCalls.length - 1];
+      const savedMetadata = JSON.parse(lastMetadataWriteCall[1] as string);
+      expect(savedMetadata['session-1'].sdkSessionId).toBeUndefined();
+    });
+  });
+
+  describe('clearSdkSessionId', () => {
+    it('should remove sdkSessionId from persisted metadata', async () => {
+      const metadata = {
+        'session-1': {
+          id: 'session-1',
+          name: 'Test Session',
+          workingDirectory: '/test/dir',
+          createdAt: '2024-01-01T00:00:00Z',
+          updatedAt: '2024-01-01T00:00:00Z',
+          sdkSessionId: 'old-provider-session-id',
+        },
+      };
+
+      vi.mocked(fs.readFile).mockResolvedValue(JSON.stringify(metadata));
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      await service.clearSdkSessionId('session-1');
+
+      const writeFileCalls = vi.mocked(fs.writeFile).mock.calls;
+      expect(writeFileCalls.length).toBeGreaterThan(0);
+
+      const savedMetadata = JSON.parse(writeFileCalls[0][1] as string);
+      expect(savedMetadata['session-1'].sdkSessionId).toBeUndefined();
+      expect(savedMetadata['session-1'].updatedAt).not.toBe('2024-01-01T00:00:00Z');
+    });
+
+    it('should do nothing if session has no sdkSessionId', async () => {
+      const metadata = {
+        'session-1': {
+          id: 'session-1',
+          name: 'Test Session',
+          workingDirectory: '/test/dir',
+          createdAt: '2024-01-01T00:00:00Z',
+          updatedAt: '2024-01-01T00:00:00Z',
+        },
+      };
+
+      vi.mocked(fs.readFile).mockResolvedValue(JSON.stringify(metadata));
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      await service.clearSdkSessionId('session-1');
+
+      // writeFile should not have been called since there's no sdkSessionId to clear
+      expect(fs.writeFile).not.toHaveBeenCalled();
+    });
+
+    it('should do nothing if session does not exist in metadata', async () => {
+      vi.mocked(fs.readFile).mockResolvedValue('{}');
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      await service.clearSdkSessionId('nonexistent');
+
+      expect(fs.writeFile).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('createSession', () => {
+    beforeEach(() => {
+      vi.mocked(fs.readFile).mockResolvedValue('{}');
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+    });
+
+    it('should create a new session with metadata', async () => {
+      const session = await service.createSession('Test Session', '/test/project', '/test/dir');
+
+      expect(session.id).toBeDefined();
+      expect(session.name).toBe('Test Session');
+      expect(session.projectPath).toBe('/test/project');
+      expect(session.workingDirectory).toBeDefined();
+      expect(session.createdAt).toBeDefined();
+      expect(session.updatedAt).toBeDefined();
+    });
+
+    it('should use process.cwd() if no working directory provided', async () => {
+      const session = await service.createSession('Test Session');
+
+      expect(session.workingDirectory).toBeDefined();
+    });
+
+    it('should validate working directory', async () => {
+      // Set ALLOWED_ROOT_DIRECTORY to restrict paths
+      const originalAllowedRoot = process.env.ALLOWED_ROOT_DIRECTORY;
+      process.env.ALLOWED_ROOT_DIRECTORY = '/allowed/projects';
+
+      // Re-import platform to initialize with new env var
+      vi.resetModules();
+      const { initAllowedPaths } = await import('@automaker/platform');
+      initAllowedPaths();
+
+      const { AgentService } = await import('@/services/agent-service.js');
+      const testService = new AgentService('/test/data', mockEvents as any);
+      vi.mocked(fs.readFile).mockResolvedValue('{}');
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      await expect(
+        testService.createSession('Test Session', undefined, '/invalid/path')
+      ).rejects.toThrow();
+
+      // Restore original value
+      if (originalAllowedRoot) {
+        process.env.ALLOWED_ROOT_DIRECTORY = originalAllowedRoot;
+      } else {
+        delete process.env.ALLOWED_ROOT_DIRECTORY;
+      }
+      vi.resetModules();
+      const { initAllowedPaths: reinit } = await import('@automaker/platform');
+      reinit();
+    });
+  });
+
+  describe('setSessionModel', () => {
+    beforeEach(async () => {
+      const error: any = new Error('ENOENT');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+
+      await service.startConversation({
+        sessionId: 'session-1',
+      });
+    });
+
+    it('should set model for existing session', async () => {
+      vi.mocked(fs.readFile).mockResolvedValue('{"session-1": {}}');
+      const result = await service.setSessionModel('session-1', 'claude-sonnet-4-6');
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false for non-existent session', async () => {
+      const result = await service.setSessionModel('nonexistent', 'claude-sonnet-4-6');
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('updateSession', () => {
+    beforeEach(() => {
+      vi.mocked(fs.readFile).mockResolvedValue(
+        JSON.stringify({
+          'session-1': {
+            id: 'session-1',
+            name: 'Test Session',
+            createdAt: '2024-01-01T00:00:00Z',
+            updatedAt: '2024-01-01T00:00:00Z',
+          },
+        })
+      );
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+    });
+
+    it('should update session metadata', async () => {
+      const result = await service.updateSession('session-1', { name: 'Updated Name' });
+
+      expect(result).not.toBeNull();
+      expect(result?.name).toBe('Updated Name');
+      expect(result?.updatedAt).not.toBe('2024-01-01T00:00:00Z');
+    });
+
+    it('should return null for non-existent session', async () => {
+      const result = await service.updateSession('nonexistent', { name: 'Updated Name' });
+
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('archiveSession', () => {
+    beforeEach(() => {
+      vi.mocked(fs.readFile).mockResolvedValue(
+        JSON.stringify({
+          'session-1': {
+            id: 'session-1',
+            name: 'Test Session',
+            createdAt: '2024-01-01T00:00:00Z',
+            updatedAt: '2024-01-01T00:00:00Z',
+          },
+        })
+      );
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+    });
+
+    it('should archive a session', async () => {
+      const result = await service.archiveSession('session-1');
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false for non-existent session', async () => {
+      const result = await service.archiveSession('nonexistent');
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('unarchiveSession', () => {
+    beforeEach(() => {
+      vi.mocked(fs.readFile).mockResolvedValue(
+        JSON.stringify({
+          'session-1': {
+            id: 'session-1',
+            name: 'Test Session',
+            archived: true,
+            createdAt: '2024-01-01T00:00:00Z',
+            updatedAt: '2024-01-01T00:00:00Z',
+          },
+        })
+      );
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+    });
+
+    it('should unarchive a session', async () => {
+      const result = await service.unarchiveSession('session-1');
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false for non-existent session', async () => {
+      const result = await service.unarchiveSession('nonexistent');
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('deleteSession', () => {
+    beforeEach(() => {
+      vi.mocked(fs.readFile).mockResolvedValue(
+        JSON.stringify({
+          'session-1': {
+            id: 'session-1',
+            name: 'Test Session',
+            createdAt: '2024-01-01T00:00:00Z',
+            updatedAt: '2024-01-01T00:00:00Z',
+          },
+        })
+      );
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(fs.unlink).mockResolvedValue(undefined);
+    });
+
+    it('should delete a session', async () => {
+      const result = await service.deleteSession('session-1');
+
+      expect(result).toBe(true);
+      expect(fs.writeFile).toHaveBeenCalled();
+    });
+
+    it('should return false for non-existent session', async () => {
+      const result = await service.deleteSession('nonexistent');
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('listSessions', () => {
+    beforeEach(() => {
+      vi.mocked(fs.readFile).mockResolvedValue(
+        JSON.stringify({
+          'session-1': {
+            id: 'session-1',
+            name: 'Test Session 1',
+            createdAt: '2024-01-01T00:00:00Z',
+            updatedAt: '2024-01-02T00:00:00Z',
+            archived: false,
+          },
+          'session-2': {
+            id: 'session-2',
+            name: 'Test Session 2',
+            createdAt: '2024-01-01T00:00:00Z',
+            updatedAt: '2024-01-03T00:00:00Z',
+            archived: true,
+          },
+        })
+      );
+    });
+
+    it('should list non-archived sessions by default', async () => {
+      const sessions = await service.listSessions();
+
+      expect(sessions.length).toBe(1);
+      expect(sessions[0].id).toBe('session-1');
+    });
+
+    it('should include archived sessions when requested', async () => {
+      const sessions = await service.listSessions(true);
+
+      expect(sessions.length).toBe(2);
+    });
+
+    it('should sort sessions by updatedAt descending', async () => {
+      const sessions = await service.listSessions(true);
+
+      expect(sessions[0].id).toBe('session-2');
+      expect(sessions[1].id).toBe('session-1');
+    });
+  });
+
+  describe('addToQueue', () => {
+    beforeEach(async () => {
+      const error: any = new Error('ENOENT');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+
+      await service.startConversation({
+        sessionId: 'session-1',
+      });
+    });
+
+    it('should add prompt to queue', async () => {
+      const result = await service.addToQueue('session-1', {
+        message: 'Test prompt',
+        imagePaths: ['/test/image.png'],
+        model: 'claude-sonnet-4-6',
+      });
+
+      expect(result.success).toBe(true);
+      expect(result.queuedPrompt).toBeDefined();
+      expect(result.queuedPrompt?.message).toBe('Test prompt');
+      expect(mockEvents.emit).toHaveBeenCalled();
+    });
+
+    it('should return error for non-existent session', async () => {
+      const result = await service.addToQueue('nonexistent', {
+        message: 'Test prompt',
+      });
+
+      expect(result.success).toBe(false);
+      expect(result.error).toBe('Session not found');
+    });
+  });
+
+  describe('getQueue', () => {
+    beforeEach(async () => {
+      const error: any = new Error('ENOENT');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+
+      await service.startConversation({
+        sessionId: 'session-1',
+      });
+    });
+
+    it('should return queue for session', async () => {
+      await service.addToQueue('session-1', { message: 'Test prompt' });
+      const result = await service.getQueue('session-1');
+
+      expect(result.success).toBe(true);
+      expect(result.queue).toBeDefined();
+      expect(result.queue?.length).toBe(1);
+    });
+
+    it('should return error for non-existent session', async () => {
+      const result = await service.getQueue('nonexistent');
+
+      expect(result.success).toBe(false);
+      expect(result.error).toBe('Session not found');
+    });
+  });
+
+  describe('removeFromQueue', () => {
+    beforeEach(async () => {
+      const error: any = new Error('ENOENT');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+
+      await service.startConversation({
+        sessionId: 'session-1',
+      });
+
+      const addResult = await service.addToQueue('session-1', { message: 'Test prompt' });
+      vi.clearAllMocks();
+    });
+
+    it('should remove prompt from queue', async () => {
+      const queueResult = await service.getQueue('session-1');
+      const promptId = queueResult.queue![0].id;
+
+      const result = await service.removeFromQueue('session-1', promptId);
+
+      expect(result.success).toBe(true);
+      expect(mockEvents.emit).toHaveBeenCalled();
+    });
+
+    it('should return error for non-existent session', async () => {
+      const result = await service.removeFromQueue('nonexistent', 'prompt-id');
+
+      expect(result.success).toBe(false);
+      expect(result.error).toBe('Session not found');
+    });
+
+    it('should return error for non-existent prompt', async () => {
+      const result = await service.removeFromQueue('session-1', 'nonexistent-prompt-id');
+
+      expect(result.success).toBe(false);
+      expect(result.error).toBe('Prompt not found in queue');
+    });
+  });
+
+  describe('clearQueue', () => {
+    beforeEach(async () => {
+      const error: any = new Error('ENOENT');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+
+      await service.startConversation({
+        sessionId: 'session-1',
+      });
+
+      await service.addToQueue('session-1', { message: 'Test prompt 1' });
+      await service.addToQueue('session-1', { message: 'Test prompt 2' });
+      vi.clearAllMocks();
+    });
+
+    it('should clear all prompts from queue', async () => {
+      const result = await service.clearQueue('session-1');
+
+      expect(result.success).toBe(true);
+      const queueResult = await service.getQueue('session-1');
+      expect(queueResult.queue?.length).toBe(0);
+      expect(mockEvents.emit).toHaveBeenCalled();
+    });
+
+    it('should return error for non-existent session', async () => {
+      const result = await service.clearQueue('nonexistent');
+
+      expect(result.success).toBe(false);
+      expect(result.error).toBe('Session not found');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/auto-loop-coordinator.test.ts b/temp_repo/apps/server/tests/unit/services/auto-loop-coordinator.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7c39ea971917e0db9fe3a451b964158ee781ff4e
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/auto-loop-coordinator.test.ts
@@ -0,0 +1,1432 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import {
+  AutoLoopCoordinator,
+  getWorktreeAutoLoopKey,
+  type AutoModeConfig,
+  type ProjectAutoLoopState,
+  type ExecuteFeatureFn,
+  type LoadPendingFeaturesFn,
+  type LoadAllFeaturesFn,
+  type SaveExecutionStateFn,
+  type ClearExecutionStateFn,
+  type ResetStuckFeaturesFn,
+  type IsFeatureFinishedFn,
+} from '../../../src/services/auto-loop-coordinator.js';
+import type { TypedEventBus } from '../../../src/services/typed-event-bus.js';
+import type { ConcurrencyManager } from '../../../src/services/concurrency-manager.js';
+import type { SettingsService } from '../../../src/services/settings-service.js';
+import type { Feature } from '@automaker/types';
+
+describe('auto-loop-coordinator.ts', () => {
+  // Mock dependencies
+  let mockEventBus: TypedEventBus;
+  let mockConcurrencyManager: ConcurrencyManager;
+  let mockSettingsService: SettingsService | null;
+
+  // Callback mocks
+  let mockExecuteFeature: ExecuteFeatureFn;
+  let mockLoadPendingFeatures: LoadPendingFeaturesFn;
+  let mockLoadAllFeatures: LoadAllFeaturesFn;
+  let mockSaveExecutionState: SaveExecutionStateFn;
+  let mockClearExecutionState: ClearExecutionStateFn;
+  let mockResetStuckFeatures: ResetStuckFeaturesFn;
+  let mockIsFeatureFinished: IsFeatureFinishedFn;
+  let mockIsFeatureRunning: (featureId: string) => boolean;
+
+  let coordinator: AutoLoopCoordinator;
+
+  const testFeature: Feature = {
+    id: 'feature-1',
+    title: 'Test Feature',
+    category: 'test',
+    description: 'Test description',
+    status: 'ready',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+
+    mockEventBus = {
+      emitAutoModeEvent: vi.fn(),
+    } as unknown as TypedEventBus;
+
+    mockConcurrencyManager = {
+      getRunningCountForWorktree: vi.fn().mockResolvedValue(0),
+      isRunning: vi.fn().mockReturnValue(false),
+    } as unknown as ConcurrencyManager;
+
+    mockSettingsService = {
+      getGlobalSettings: vi.fn().mockResolvedValue({
+        maxConcurrency: 3,
+        projects: [{ id: 'proj-1', path: '/test/project' }],
+        autoModeByWorktree: {},
+      }),
+    } as unknown as SettingsService;
+
+    // Callback mocks
+    mockExecuteFeature = vi.fn().mockResolvedValue(undefined);
+    mockLoadPendingFeatures = vi.fn().mockResolvedValue([]);
+    mockLoadAllFeatures = vi.fn().mockResolvedValue([]);
+    mockSaveExecutionState = vi.fn().mockResolvedValue(undefined);
+    mockClearExecutionState = vi.fn().mockResolvedValue(undefined);
+    mockResetStuckFeatures = vi.fn().mockResolvedValue(undefined);
+    mockIsFeatureFinished = vi.fn().mockReturnValue(false);
+    mockIsFeatureRunning = vi.fn().mockReturnValue(false);
+
+    coordinator = new AutoLoopCoordinator(
+      mockEventBus,
+      mockConcurrencyManager,
+      mockSettingsService,
+      mockExecuteFeature,
+      mockLoadPendingFeatures,
+      mockSaveExecutionState,
+      mockClearExecutionState,
+      mockResetStuckFeatures,
+      mockIsFeatureFinished,
+      mockIsFeatureRunning,
+      mockLoadAllFeatures
+    );
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('getWorktreeAutoLoopKey', () => {
+    it('returns correct key for main worktree (null branch)', () => {
+      const key = getWorktreeAutoLoopKey('/test/project', null);
+      expect(key).toBe('/test/project::__main__');
+    });
+
+    it('returns correct key for named branch', () => {
+      const key = getWorktreeAutoLoopKey('/test/project', 'feature/test-1');
+      expect(key).toBe('/test/project::feature/test-1');
+    });
+
+    it("normalizes 'main' branch to null", () => {
+      const key = getWorktreeAutoLoopKey('/test/project', 'main');
+      expect(key).toBe('/test/project::__main__');
+    });
+  });
+
+  describe('startAutoLoopForProject', () => {
+    it('throws if loop already running for project/worktree', async () => {
+      // Start the first loop
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      // Try to start another - should throw
+      await expect(coordinator.startAutoLoopForProject('/test/project', null, 1)).rejects.toThrow(
+        'Auto mode is already running for main worktree in project'
+      );
+    });
+
+    it('creates ProjectAutoLoopState with correct config', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', 'feature-branch', 2);
+
+      const config = coordinator.getAutoLoopConfigForProject('/test/project', 'feature-branch');
+      expect(config).toEqual({
+        maxConcurrency: 2,
+        useWorktrees: true,
+        projectPath: '/test/project',
+        branchName: 'feature-branch',
+      });
+    });
+
+    it('emits auto_mode_started event', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 3);
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith('auto_mode_started', {
+        message: 'Auto mode started with max 3 concurrent features',
+        projectPath: '/test/project',
+        branchName: null,
+        maxConcurrency: 3,
+      });
+    });
+
+    it('calls saveExecutionState', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 3);
+
+      expect(mockSaveExecutionState).toHaveBeenCalledWith('/test/project', null, 3);
+    });
+
+    it('resets stuck features on start', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      expect(mockResetStuckFeatures).toHaveBeenCalledWith('/test/project');
+    });
+
+    it('uses settings maxConcurrency when not provided', async () => {
+      const result = await coordinator.startAutoLoopForProject('/test/project', null);
+
+      expect(result).toBe(3); // from mockSettingsService
+    });
+
+    it('uses worktree-specific maxConcurrency from settings', async () => {
+      vi.mocked(mockSettingsService!.getGlobalSettings).mockResolvedValue({
+        maxConcurrency: 5,
+        projects: [{ id: 'proj-1', path: '/test/project' }],
+        autoModeByWorktree: {
+          'proj-1::__main__': { maxConcurrency: 7 },
+        },
+      });
+
+      const result = await coordinator.startAutoLoopForProject('/test/project', null);
+
+      expect(result).toBe(7);
+    });
+  });
+
+  describe('stopAutoLoopForProject', () => {
+    it('aborts running loop', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      const result = await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      expect(result).toBe(0);
+      expect(coordinator.isAutoLoopRunningForProject('/test/project', null)).toBe(false);
+    });
+
+    it('emits auto_mode_stopped event', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+      vi.mocked(mockEventBus.emitAutoModeEvent).mockClear();
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith('auto_mode_stopped', {
+        message: 'Auto mode stopped',
+        projectPath: '/test/project',
+        branchName: null,
+      });
+    });
+
+    it('calls clearExecutionState', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      expect(mockClearExecutionState).toHaveBeenCalledWith('/test/project', null);
+    });
+
+    it('returns 0 when no loop running', async () => {
+      const result = await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      expect(result).toBe(0);
+      expect(mockClearExecutionState).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('isAutoLoopRunningForProject', () => {
+    it('returns true when running', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      expect(coordinator.isAutoLoopRunningForProject('/test/project', null)).toBe(true);
+    });
+
+    it('returns false when not running', () => {
+      expect(coordinator.isAutoLoopRunningForProject('/test/project', null)).toBe(false);
+    });
+
+    it('returns false for different worktree', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', 'branch-a', 1);
+
+      expect(coordinator.isAutoLoopRunningForProject('/test/project', 'branch-b')).toBe(false);
+    });
+  });
+
+  describe('runAutoLoopForProject', () => {
+    it('loads pending features each iteration', async () => {
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([]);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      // Advance time to trigger loop iterations
+      await vi.advanceTimersByTimeAsync(11000);
+
+      // Stop the loop to avoid hanging
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      expect(mockLoadPendingFeatures).toHaveBeenCalled();
+    });
+
+    it('executes features within concurrency limit', async () => {
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([testFeature]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 2);
+
+      // Advance time to trigger loop iteration
+      await vi.advanceTimersByTimeAsync(3000);
+
+      // Stop the loop
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      expect(mockExecuteFeature).toHaveBeenCalledWith('/test/project', 'feature-1', true, true);
+    });
+
+    it('emits idle event when no work remains (running=0, pending=0)', async () => {
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      // Clear the initial event mock calls
+      vi.mocked(mockEventBus.emitAutoModeEvent).mockClear();
+
+      // Advance time to trigger loop iteration and idle event
+      await vi.advanceTimersByTimeAsync(11000);
+
+      // Stop the loop
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith('auto_mode_idle', {
+        message: 'No pending features - auto mode idle',
+        projectPath: '/test/project',
+        branchName: null,
+      });
+    });
+
+    it('skips already-running features', async () => {
+      const feature2: Feature = { ...testFeature, id: 'feature-2' };
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([testFeature, feature2]);
+      vi.mocked(mockIsFeatureRunning)
+        .mockReturnValueOnce(true) // feature-1 is running
+        .mockReturnValueOnce(false); // feature-2 is not running
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 2);
+
+      await vi.advanceTimersByTimeAsync(3000);
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should execute feature-2, not feature-1
+      expect(mockExecuteFeature).toHaveBeenCalledWith('/test/project', 'feature-2', true, true);
+    });
+
+    it('stops when aborted', async () => {
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([testFeature]);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      // Stop immediately
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should not have executed many features
+      expect(mockExecuteFeature.mock.calls.length).toBeLessThanOrEqual(1);
+    });
+
+    it('waits when at capacity', async () => {
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([testFeature]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(2); // At capacity for maxConcurrency=2
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 2);
+
+      await vi.advanceTimersByTimeAsync(6000);
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should not have executed features because at capacity
+      expect(mockExecuteFeature).not.toHaveBeenCalled();
+    });
+
+    it('counts all running features (auto + manual) against concurrency limit', async () => {
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([testFeature]);
+      // 2 manual features running — total count is 2
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(2);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 2);
+
+      await vi.advanceTimersByTimeAsync(6000);
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should NOT execute because total running count (2) meets the concurrency limit (2)
+      expect(mockExecuteFeature).not.toHaveBeenCalled();
+      // Verify it was called WITHOUT autoModeOnly (counts all tasks)
+      // The coordinator's wrapper passes options through as undefined when not specified
+      expect(mockConcurrencyManager.getRunningCountForWorktree).toHaveBeenCalledWith(
+        '/test/project',
+        null,
+        undefined
+      );
+    });
+
+    it('allows auto dispatch when manual tasks finish and capacity becomes available', async () => {
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([testFeature]);
+      // First call: at capacity (2 manual features running)
+      // Second call: capacity freed (1 feature running)
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree)
+        .mockResolvedValueOnce(2) // at capacity
+        .mockResolvedValueOnce(1); // capacity available after manual task completes
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 2);
+
+      // First iteration: at capacity, should wait
+      await vi.advanceTimersByTimeAsync(5000);
+
+      // Second iteration: capacity available, should execute
+      await vi.advanceTimersByTimeAsync(6000);
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should execute after capacity freed
+      expect(mockExecuteFeature).toHaveBeenCalledWith('/test/project', 'feature-1', true, true);
+    });
+
+    it('waits when manually started tasks already fill concurrency limit at auto mode activation', async () => {
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([testFeature]);
+      // Manual tasks already fill the limit
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(3);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 3);
+
+      await vi.advanceTimersByTimeAsync(6000);
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Auto mode should remain waiting, not dispatch
+      expect(mockExecuteFeature).not.toHaveBeenCalled();
+    });
+
+    it('resumes dispatching when all running tasks complete simultaneously', async () => {
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([testFeature]);
+      // First check: all 3 slots occupied
+      // Second check: all tasks completed simultaneously
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree)
+        .mockResolvedValueOnce(3) // all slots full
+        .mockResolvedValueOnce(0); // all tasks completed at once
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 3);
+
+      // First iteration: at capacity
+      await vi.advanceTimersByTimeAsync(5000);
+      // Second iteration: all freed
+      await vi.advanceTimersByTimeAsync(6000);
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should execute after all tasks freed capacity
+      expect(mockExecuteFeature).toHaveBeenCalledWith('/test/project', 'feature-1', true, true);
+    });
+  });
+
+  describe('priority-based feature selection', () => {
+    it('selects highest priority feature first (lowest number)', async () => {
+      const lowPriority: Feature = {
+        ...testFeature,
+        id: 'feature-low',
+        priority: 3,
+        title: 'Low Priority',
+      };
+      const highPriority: Feature = {
+        ...testFeature,
+        id: 'feature-high',
+        priority: 1,
+        title: 'High Priority',
+      };
+      const medPriority: Feature = {
+        ...testFeature,
+        id: 'feature-med',
+        priority: 2,
+        title: 'Med Priority',
+      };
+
+      // Return features in non-priority order
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([
+        lowPriority,
+        medPriority,
+        highPriority,
+      ]);
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([lowPriority, medPriority, highPriority]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+      await vi.advanceTimersByTimeAsync(3000);
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should execute the highest priority feature (priority=1)
+      expect(mockExecuteFeature).toHaveBeenCalledWith('/test/project', 'feature-high', true, true);
+    });
+
+    it('uses default priority of 2 when not specified', async () => {
+      const noPriority: Feature = { ...testFeature, id: 'feature-none', title: 'No Priority' };
+      const highPriority: Feature = {
+        ...testFeature,
+        id: 'feature-high',
+        priority: 1,
+        title: 'High Priority',
+      };
+
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([noPriority, highPriority]);
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([noPriority, highPriority]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+      await vi.advanceTimersByTimeAsync(3000);
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // High priority (1) should be selected over default priority (2)
+      expect(mockExecuteFeature).toHaveBeenCalledWith('/test/project', 'feature-high', true, true);
+    });
+
+    it('selects first feature when priorities are equal', async () => {
+      const featureA: Feature = {
+        ...testFeature,
+        id: 'feature-a',
+        priority: 2,
+        title: 'Feature A',
+      };
+      const featureB: Feature = {
+        ...testFeature,
+        id: 'feature-b',
+        priority: 2,
+        title: 'Feature B',
+      };
+
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([featureA, featureB]);
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([featureA, featureB]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+      await vi.advanceTimersByTimeAsync(3000);
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // When priorities equal, the first feature from the filtered list should be chosen
+      expect(mockExecuteFeature).toHaveBeenCalledWith('/test/project', 'feature-a', true, true);
+    });
+  });
+
+  describe('dependency-aware feature selection', () => {
+    it('skips features with unsatisfied dependencies', async () => {
+      const depFeature: Feature = {
+        ...testFeature,
+        id: 'feature-dep',
+        status: 'in_progress',
+        title: 'Dependency Feature',
+      };
+      const blockedFeature: Feature = {
+        ...testFeature,
+        id: 'feature-blocked',
+        dependencies: ['feature-dep'],
+        priority: 1,
+        title: 'Blocked Feature',
+      };
+      const readyFeature: Feature = {
+        ...testFeature,
+        id: 'feature-ready',
+        priority: 2,
+        title: 'Ready Feature',
+      };
+
+      // Pending features (backlog/ready status)
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([blockedFeature, readyFeature]);
+      // All features (including the in-progress dependency)
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([depFeature, blockedFeature, readyFeature]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+      await vi.advanceTimersByTimeAsync(3000);
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should skip blocked feature (dependency not complete) and execute ready feature
+      expect(mockExecuteFeature).toHaveBeenCalledWith('/test/project', 'feature-ready', true, true);
+      expect(mockExecuteFeature).not.toHaveBeenCalledWith(
+        '/test/project',
+        'feature-blocked',
+        true,
+        true
+      );
+    });
+
+    it('picks features whose dependencies are completed', async () => {
+      const completedDep: Feature = {
+        ...testFeature,
+        id: 'feature-dep',
+        status: 'completed',
+        title: 'Completed Dependency',
+      };
+      const unblockedFeature: Feature = {
+        ...testFeature,
+        id: 'feature-unblocked',
+        dependencies: ['feature-dep'],
+        priority: 1,
+        title: 'Unblocked Feature',
+      };
+
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([unblockedFeature]);
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([completedDep, unblockedFeature]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+      await vi.advanceTimersByTimeAsync(3000);
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should execute the unblocked feature since its dependency is completed
+      expect(mockExecuteFeature).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-unblocked',
+        true,
+        true
+      );
+    });
+
+    it('picks features whose dependencies are verified', async () => {
+      const verifiedDep: Feature = {
+        ...testFeature,
+        id: 'feature-dep',
+        status: 'verified',
+        title: 'Verified Dependency',
+      };
+      const unblockedFeature: Feature = {
+        ...testFeature,
+        id: 'feature-unblocked',
+        dependencies: ['feature-dep'],
+        priority: 1,
+        title: 'Unblocked Feature',
+      };
+
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([unblockedFeature]);
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([verifiedDep, unblockedFeature]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+      await vi.advanceTimersByTimeAsync(3000);
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      expect(mockExecuteFeature).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-unblocked',
+        true,
+        true
+      );
+    });
+
+    it('respects both priority and dependencies together', async () => {
+      const completedDep: Feature = {
+        ...testFeature,
+        id: 'feature-dep',
+        status: 'completed',
+        title: 'Completed Dep',
+      };
+      const blockedHighPriority: Feature = {
+        ...testFeature,
+        id: 'feature-blocked-hp',
+        dependencies: ['feature-not-done'],
+        priority: 1,
+        title: 'Blocked High Priority',
+      };
+      const unblockedLowPriority: Feature = {
+        ...testFeature,
+        id: 'feature-unblocked-lp',
+        dependencies: ['feature-dep'],
+        priority: 3,
+        title: 'Unblocked Low Priority',
+      };
+      const unblockedMedPriority: Feature = {
+        ...testFeature,
+        id: 'feature-unblocked-mp',
+        priority: 2,
+        title: 'Unblocked Med Priority',
+      };
+
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([
+        blockedHighPriority,
+        unblockedLowPriority,
+        unblockedMedPriority,
+      ]);
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([
+        completedDep,
+        blockedHighPriority,
+        unblockedLowPriority,
+        unblockedMedPriority,
+      ]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+      await vi.advanceTimersByTimeAsync(3000);
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should skip blocked high-priority and pick the unblocked medium-priority
+      expect(mockExecuteFeature).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-unblocked-mp',
+        true,
+        true
+      );
+      expect(mockExecuteFeature).not.toHaveBeenCalledWith(
+        '/test/project',
+        'feature-blocked-hp',
+        true,
+        true
+      );
+    });
+
+    it('handles features with no dependencies (always eligible)', async () => {
+      const noDeps: Feature = {
+        ...testFeature,
+        id: 'feature-no-deps',
+        priority: 2,
+        title: 'No Dependencies',
+      };
+
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([noDeps]);
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([noDeps]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+      await vi.advanceTimersByTimeAsync(3000);
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      expect(mockExecuteFeature).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-no-deps',
+        true,
+        true
+      );
+    });
+  });
+
+  describe('failure tracking', () => {
+    it('trackFailureAndCheckPauseForProject returns true after threshold', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      // Track 3 failures (threshold)
+      const result1 = coordinator.trackFailureAndCheckPauseForProject('/test/project', {
+        type: 'agent_error',
+        message: 'Error 1',
+      });
+      expect(result1).toBe(false);
+
+      const result2 = coordinator.trackFailureAndCheckPauseForProject('/test/project', {
+        type: 'agent_error',
+        message: 'Error 2',
+      });
+      expect(result2).toBe(false);
+
+      const result3 = coordinator.trackFailureAndCheckPauseForProject('/test/project', {
+        type: 'agent_error',
+        message: 'Error 3',
+      });
+      expect(result3).toBe(true); // Should pause after 3
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+    });
+
+    it('agent errors count as failures', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      const result = coordinator.trackFailureAndCheckPauseForProject('/test/project', {
+        type: 'agent_error',
+        message: 'Agent failed',
+      });
+
+      // First error should not pause
+      expect(result).toBe(false);
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+    });
+
+    it('clears failures on success (recordSuccessForProject)', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      // Add 2 failures
+      coordinator.trackFailureAndCheckPauseForProject('/test/project', {
+        type: 'agent_error',
+        message: 'Error 1',
+      });
+      coordinator.trackFailureAndCheckPauseForProject('/test/project', {
+        type: 'agent_error',
+        message: 'Error 2',
+      });
+
+      // Record success - should clear failures
+      coordinator.recordSuccessForProject('/test/project');
+
+      // Next failure should return false (not hitting threshold)
+      const result = coordinator.trackFailureAndCheckPauseForProject('/test/project', {
+        type: 'agent_error',
+        message: 'Error 3',
+      });
+      expect(result).toBe(false);
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+    });
+
+    it('signalShouldPauseForProject emits event and stops loop', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+      vi.mocked(mockEventBus.emitAutoModeEvent).mockClear();
+
+      coordinator.signalShouldPauseForProject('/test/project', {
+        type: 'quota_exhausted',
+        message: 'Rate limited',
+      });
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_paused_failures',
+        expect.objectContaining({
+          errorType: 'quota_exhausted',
+          projectPath: '/test/project',
+        })
+      );
+
+      // Loop should be stopped
+      expect(coordinator.isAutoLoopRunningForProject('/test/project', null)).toBe(false);
+    });
+
+    it('quota/rate limit errors pause immediately', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      const result = coordinator.trackFailureAndCheckPauseForProject('/test/project', {
+        type: 'quota_exhausted',
+        message: 'API quota exceeded',
+      });
+
+      expect(result).toBe(true); // Should pause immediately
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+    });
+
+    it('rate_limit type also pauses immediately', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      const result = coordinator.trackFailureAndCheckPauseForProject('/test/project', {
+        type: 'rate_limit',
+        message: 'Rate limited',
+      });
+
+      expect(result).toBe(true);
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+    });
+  });
+
+  describe('multiple projects', () => {
+    it('runs concurrent loops for different projects', async () => {
+      await coordinator.startAutoLoopForProject('/project-a', null, 1);
+      await coordinator.startAutoLoopForProject('/project-b', null, 1);
+
+      expect(coordinator.isAutoLoopRunningForProject('/project-a', null)).toBe(true);
+      expect(coordinator.isAutoLoopRunningForProject('/project-b', null)).toBe(true);
+
+      await coordinator.stopAutoLoopForProject('/project-a', null);
+      await coordinator.stopAutoLoopForProject('/project-b', null);
+    });
+
+    it('runs concurrent loops for different worktrees of same project', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+      await coordinator.startAutoLoopForProject('/test/project', 'feature-branch', 1);
+
+      expect(coordinator.isAutoLoopRunningForProject('/test/project', null)).toBe(true);
+      expect(coordinator.isAutoLoopRunningForProject('/test/project', 'feature-branch')).toBe(true);
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+      await coordinator.stopAutoLoopForProject('/test/project', 'feature-branch');
+    });
+
+    it('stopping one loop does not affect others', async () => {
+      await coordinator.startAutoLoopForProject('/project-a', null, 1);
+      await coordinator.startAutoLoopForProject('/project-b', null, 1);
+
+      await coordinator.stopAutoLoopForProject('/project-a', null);
+
+      expect(coordinator.isAutoLoopRunningForProject('/project-a', null)).toBe(false);
+      expect(coordinator.isAutoLoopRunningForProject('/project-b', null)).toBe(true);
+
+      await coordinator.stopAutoLoopForProject('/project-b', null);
+    });
+  });
+
+  describe('getAutoLoopConfigForProject', () => {
+    it('returns config when loop is running', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 5);
+
+      const config = coordinator.getAutoLoopConfigForProject('/test/project', null);
+
+      expect(config).toEqual({
+        maxConcurrency: 5,
+        useWorktrees: true,
+        projectPath: '/test/project',
+        branchName: null,
+      });
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+    });
+
+    it('returns null when no loop running', () => {
+      const config = coordinator.getAutoLoopConfigForProject('/test/project', null);
+
+      expect(config).toBeNull();
+    });
+  });
+
+  describe('getRunningCountForWorktree', () => {
+    it('delegates to ConcurrencyManager', async () => {
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(3);
+
+      const count = await coordinator.getRunningCountForWorktree('/test/project', null);
+
+      expect(count).toBe(3);
+      expect(mockConcurrencyManager.getRunningCountForWorktree).toHaveBeenCalledWith(
+        '/test/project',
+        null,
+        undefined
+      );
+    });
+
+    it('passes autoModeOnly option to ConcurrencyManager', async () => {
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(1);
+
+      const count = await coordinator.getRunningCountForWorktree('/test/project', null, {
+        autoModeOnly: true,
+      });
+
+      expect(count).toBe(1);
+      expect(mockConcurrencyManager.getRunningCountForWorktree).toHaveBeenCalledWith(
+        '/test/project',
+        null,
+        { autoModeOnly: true }
+      );
+    });
+  });
+
+  describe('resetFailureTrackingForProject', () => {
+    it('clears consecutive failures and paused flag', async () => {
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      // Add failures
+      coordinator.trackFailureAndCheckPauseForProject('/test/project', {
+        type: 'agent_error',
+        message: 'Error',
+      });
+      coordinator.trackFailureAndCheckPauseForProject('/test/project', {
+        type: 'agent_error',
+        message: 'Error',
+      });
+
+      // Reset failure tracking
+      coordinator.resetFailureTrackingForProject('/test/project');
+
+      // Next 3 failures should be needed to trigger pause again
+      const result1 = coordinator.trackFailureAndCheckPauseForProject('/test/project', {
+        type: 'agent_error',
+        message: 'Error',
+      });
+      expect(result1).toBe(false);
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles null settingsService gracefully', async () => {
+      const coordWithoutSettings = new AutoLoopCoordinator(
+        mockEventBus,
+        mockConcurrencyManager,
+        null, // No settings service
+        mockExecuteFeature,
+        mockLoadPendingFeatures,
+        mockSaveExecutionState,
+        mockClearExecutionState,
+        mockResetStuckFeatures,
+        mockIsFeatureFinished,
+        mockIsFeatureRunning
+      );
+
+      // Should use default concurrency
+      const result = await coordWithoutSettings.startAutoLoopForProject('/test/project', null);
+
+      expect(result).toBe(1); // DEFAULT_MAX_CONCURRENCY
+
+      await coordWithoutSettings.stopAutoLoopForProject('/test/project', null);
+    });
+
+    it('handles resetStuckFeatures error gracefully', async () => {
+      vi.mocked(mockResetStuckFeatures).mockRejectedValue(new Error('Reset failed'));
+
+      // Should not throw
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      expect(mockResetStuckFeatures).toHaveBeenCalled();
+
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+    });
+
+    it('trackFailureAndCheckPauseForProject returns false when no loop', () => {
+      const result = coordinator.trackFailureAndCheckPauseForProject('/nonexistent', {
+        type: 'agent_error',
+        message: 'Error',
+      });
+
+      expect(result).toBe(false);
+    });
+
+    it('signalShouldPauseForProject does nothing when no loop', () => {
+      // Should not throw
+      coordinator.signalShouldPauseForProject('/nonexistent', {
+        type: 'quota_exhausted',
+        message: 'Error',
+      });
+
+      expect(mockEventBus.emitAutoModeEvent).not.toHaveBeenCalledWith(
+        'auto_mode_paused_failures',
+        expect.anything()
+      );
+    });
+
+    it('does not emit stopped event when loop was not running', async () => {
+      const result = await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      expect(result).toBe(0);
+      expect(mockEventBus.emitAutoModeEvent).not.toHaveBeenCalledWith(
+        'auto_mode_stopped',
+        expect.anything()
+      );
+    });
+
+    it('bypasses dependency checks when loadAllFeaturesFn is omitted', async () => {
+      // Create a dependency feature that is NOT completed (in_progress)
+      const inProgressDep: Feature = {
+        ...testFeature,
+        id: 'dep-feature',
+        status: 'in_progress',
+        title: 'In-Progress Dependency',
+      };
+      // Create a pending feature that depends on the in-progress dep
+      const pendingFeatureWithDep: Feature = {
+        ...testFeature,
+        id: 'feature-with-dep',
+        dependencies: ['dep-feature'],
+        status: 'ready',
+        title: 'Feature With Dependency',
+      };
+
+      // loadAllFeaturesFn is NOT provided, so dependency checks are bypassed entirely
+      // (the coordinator returns true instead of calling areDependenciesSatisfied)
+      const coordWithoutLoadAll = new AutoLoopCoordinator(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockSettingsService,
+        mockExecuteFeature,
+        mockLoadPendingFeatures,
+        mockSaveExecutionState,
+        mockClearExecutionState,
+        mockResetStuckFeatures,
+        mockIsFeatureFinished,
+        mockIsFeatureRunning
+        // loadAllFeaturesFn omitted
+      );
+
+      // pendingFeatures includes the in-progress dep and the pending feature;
+      // since loadAllFeaturesFn is absent, dependency checks are bypassed,
+      // so pendingFeatureWithDep is eligible even though its dependency is not completed
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([inProgressDep, pendingFeatureWithDep]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+      // The in-progress dep is not finished and not running, so both features pass the
+      // isFeatureFinished filter; but only pendingFeatureWithDep should be executed
+      // because we mark dep-feature as running to prevent it from being picked
+      vi.mocked(mockIsFeatureFinished).mockReturnValue(false);
+      vi.mocked(mockIsFeatureRunning as ReturnType<typeof vi.fn>).mockImplementation(
+        (id: string) => id === 'dep-feature'
+      );
+
+      await coordWithoutLoadAll.startAutoLoopForProject('/test/project', null, 1);
+      await vi.advanceTimersByTimeAsync(3000);
+      await coordWithoutLoadAll.stopAutoLoopForProject('/test/project', null);
+
+      // pendingFeatureWithDep executes despite its dependency not being completed,
+      // because dependency checks are bypassed when loadAllFeaturesFn is omitted
+      expect(mockExecuteFeature).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-with-dep',
+        true,
+        true
+      );
+      // dep-feature is not executed because it is marked as running
+      expect(mockExecuteFeature).not.toHaveBeenCalledWith(
+        '/test/project',
+        'dep-feature',
+        true,
+        true
+      );
+    });
+  });
+
+  describe('auto_mode_idle emission timing (idle check fix)', () => {
+    it('emits auto_mode_idle when no features in any state (empty project)', async () => {
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([]);
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      // Clear the initial event mock calls
+      vi.mocked(mockEventBus.emitAutoModeEvent).mockClear();
+
+      // Advance time to trigger loop iteration and idle event
+      await vi.advanceTimersByTimeAsync(11000);
+
+      // Stop the loop
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith('auto_mode_idle', {
+        message: 'No pending features - auto mode idle',
+        projectPath: '/test/project',
+        branchName: null,
+      });
+    });
+
+    it('does NOT emit auto_mode_idle when features are in in_progress status', async () => {
+      // No pending features (backlog/ready)
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([]);
+      // But there are features in in_progress status
+      const inProgressFeature: Feature = {
+        ...testFeature,
+        id: 'feature-1',
+        status: 'in_progress',
+        title: 'In Progress Feature',
+      };
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([inProgressFeature]);
+      // No running features in concurrency manager (they were released during status update)
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      // Clear the initial event mock calls
+      vi.mocked(mockEventBus.emitAutoModeEvent).mockClear();
+
+      // Advance time to trigger loop iteration
+      await vi.advanceTimersByTimeAsync(11000);
+
+      // Stop the loop
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should NOT emit auto_mode_idle because there's an in_progress feature
+      expect(mockEventBus.emitAutoModeEvent).not.toHaveBeenCalledWith('auto_mode_idle', {
+        message: 'No pending features - auto mode idle',
+        projectPath: '/test/project',
+        branchName: null,
+      });
+    });
+
+    it('emits auto_mode_idle after in_progress feature completes', async () => {
+      const completedFeature: Feature = {
+        ...testFeature,
+        id: 'feature-1',
+        status: 'completed',
+        title: 'Completed Feature',
+      };
+
+      // Initially has in_progress feature
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([]);
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([completedFeature]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      // Clear the initial event mock calls
+      vi.mocked(mockEventBus.emitAutoModeEvent).mockClear();
+
+      // Advance time to trigger loop iteration
+      await vi.advanceTimersByTimeAsync(11000);
+
+      // Stop the loop
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should emit auto_mode_idle because all features are completed
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith('auto_mode_idle', {
+        message: 'No pending features - auto mode idle',
+        projectPath: '/test/project',
+        branchName: null,
+      });
+    });
+
+    it('does NOT emit auto_mode_idle for in_progress features in main worktree (no branchName)', async () => {
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([]);
+      // Feature in main worktree has no branchName
+      const mainWorktreeFeature: Feature = {
+        ...testFeature,
+        id: 'feature-main',
+        status: 'in_progress',
+        title: 'Main Worktree Feature',
+        branchName: undefined, // Main worktree feature
+      };
+      // Feature in branch worktree has branchName
+      const branchFeature: Feature = {
+        ...testFeature,
+        id: 'feature-branch',
+        status: 'in_progress',
+        title: 'Branch Feature',
+        branchName: 'feature/some-branch',
+      };
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([mainWorktreeFeature, branchFeature]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      // Start auto mode for main worktree
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      // Clear the initial event mock calls
+      vi.mocked(mockEventBus.emitAutoModeEvent).mockClear();
+
+      // Advance time to trigger loop iteration
+      await vi.advanceTimersByTimeAsync(11000);
+
+      // Stop the loop
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should NOT emit auto_mode_idle because there's an in_progress feature in main worktree
+      expect(mockEventBus.emitAutoModeEvent).not.toHaveBeenCalledWith(
+        'auto_mode_idle',
+        expect.objectContaining({
+          projectPath: '/test/project',
+          branchName: null,
+        })
+      );
+    });
+
+    it('does NOT emit auto_mode_idle for in_progress features with matching branchName', async () => {
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([]);
+      // Feature in matching branch
+      const matchingBranchFeature: Feature = {
+        ...testFeature,
+        id: 'feature-matching',
+        status: 'in_progress',
+        title: 'Matching Branch Feature',
+        branchName: 'feature/test-branch',
+      };
+      // Feature in different branch
+      const differentBranchFeature: Feature = {
+        ...testFeature,
+        id: 'feature-different',
+        status: 'in_progress',
+        title: 'Different Branch Feature',
+        branchName: 'feature/other-branch',
+      };
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([
+        matchingBranchFeature,
+        differentBranchFeature,
+      ]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      // Start auto mode for feature/test-branch
+      await coordinator.startAutoLoopForProject('/test/project', 'feature/test-branch', 1);
+
+      // Clear the initial event mock calls
+      vi.mocked(mockEventBus.emitAutoModeEvent).mockClear();
+
+      // Advance time to trigger loop iteration
+      await vi.advanceTimersByTimeAsync(11000);
+
+      // Stop the loop
+      await coordinator.stopAutoLoopForProject('/test/project', 'feature/test-branch');
+
+      // Should NOT emit auto_mode_idle because there's an in_progress feature with matching branch
+      expect(mockEventBus.emitAutoModeEvent).not.toHaveBeenCalledWith(
+        'auto_mode_idle',
+        expect.objectContaining({
+          projectPath: '/test/project',
+          branchName: 'feature/test-branch',
+        })
+      );
+    });
+
+    it('emits auto_mode_idle when in_progress feature has different branchName', async () => {
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([]);
+      // Only feature is in a different branch
+      const differentBranchFeature: Feature = {
+        ...testFeature,
+        id: 'feature-different',
+        status: 'in_progress',
+        title: 'Different Branch Feature',
+        branchName: 'feature/other-branch',
+      };
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([differentBranchFeature]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      // Start auto mode for feature/test-branch
+      await coordinator.startAutoLoopForProject('/test/project', 'feature/test-branch', 1);
+
+      // Clear the initial event mock calls
+      vi.mocked(mockEventBus.emitAutoModeEvent).mockClear();
+
+      // Advance time to trigger loop iteration
+      await vi.advanceTimersByTimeAsync(11000);
+
+      // Stop the loop
+      await coordinator.stopAutoLoopForProject('/test/project', 'feature/test-branch');
+
+      // Should emit auto_mode_idle because the in_progress feature is in a different branch
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith('auto_mode_idle', {
+        message: 'No pending features - auto mode idle',
+        projectPath: '/test/project',
+        branchName: 'feature/test-branch',
+      });
+    });
+
+    it('emits auto_mode_idle when only backlog/ready features exist and no running/in_progress features', async () => {
+      // backlog/ready features should be in loadPendingFeatures, not loadAllFeatures for idle check
+      // But this test verifies the idle check doesn't incorrectly block on backlog/ready
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([]); // No pending (for current iteration check)
+      const backlogFeature: Feature = {
+        ...testFeature,
+        id: 'feature-1',
+        status: 'backlog',
+        title: 'Backlog Feature',
+      };
+      const readyFeature: Feature = {
+        ...testFeature,
+        id: 'feature-2',
+        status: 'ready',
+        title: 'Ready Feature',
+      };
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([backlogFeature, readyFeature]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      // Clear the initial event mock calls
+      vi.mocked(mockEventBus.emitAutoModeEvent).mockClear();
+
+      // Advance time to trigger loop iteration
+      await vi.advanceTimersByTimeAsync(11000);
+
+      // Stop the loop
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should NOT emit auto_mode_idle because there are backlog/ready features
+      // (even though they're not in_progress, the idle check only looks at in_progress status)
+      // Actually, backlog/ready would be caught by loadPendingFeatures on next iteration,
+      // so this should emit idle since runningCount=0 and no in_progress features
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith('auto_mode_idle', {
+        message: 'No pending features - auto mode idle',
+        projectPath: '/test/project',
+        branchName: null,
+      });
+    });
+
+    it('handles loadAllFeaturesFn error gracefully (falls back to emitting idle)', async () => {
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([]);
+      vi.mocked(mockLoadAllFeatures).mockRejectedValue(new Error('Failed to load features'));
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      // Clear the initial event mock calls
+      vi.mocked(mockEventBus.emitAutoModeEvent).mockClear();
+
+      // Advance time to trigger loop iteration
+      await vi.advanceTimersByTimeAsync(11000);
+
+      // Stop the loop
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should still emit auto_mode_idle when loadAllFeatures fails (defensive behavior)
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith('auto_mode_idle', {
+        message: 'No pending features - auto mode idle',
+        projectPath: '/test/project',
+        branchName: null,
+      });
+    });
+
+    it('handles missing loadAllFeaturesFn gracefully (falls back to emitting idle)', async () => {
+      // Create coordinator without loadAllFeaturesFn
+      const coordWithoutLoadAll = new AutoLoopCoordinator(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockSettingsService,
+        mockExecuteFeature,
+        mockLoadPendingFeatures,
+        mockSaveExecutionState,
+        mockClearExecutionState,
+        mockResetStuckFeatures,
+        mockIsFeatureFinished,
+        mockIsFeatureRunning
+        // loadAllFeaturesFn omitted
+      );
+
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordWithoutLoadAll.startAutoLoopForProject('/test/project', null, 1);
+
+      // Clear the initial event mock calls
+      vi.mocked(mockEventBus.emitAutoModeEvent).mockClear();
+
+      // Advance time to trigger loop iteration
+      await vi.advanceTimersByTimeAsync(11000);
+
+      // Stop the loop
+      await coordWithoutLoadAll.stopAutoLoopForProject('/test/project', null);
+
+      // Should emit auto_mode_idle when loadAllFeaturesFn is missing (defensive behavior)
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith('auto_mode_idle', {
+        message: 'No pending features - auto mode idle',
+        projectPath: '/test/project',
+        branchName: null,
+      });
+    });
+
+    it('only emits auto_mode_idle once per idle period (hasEmittedIdleEvent flag)', async () => {
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([]);
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([]);
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      // Clear the initial event mock calls
+      vi.mocked(mockEventBus.emitAutoModeEvent).mockClear();
+
+      // Advance time multiple times to trigger multiple loop iterations
+      await vi.advanceTimersByTimeAsync(11000); // First idle check
+      await vi.advanceTimersByTimeAsync(11000); // Second idle check
+      await vi.advanceTimersByTimeAsync(11000); // Third idle check
+
+      // Stop the loop
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // Should only emit auto_mode_idle once despite multiple iterations
+      const idleCalls = vi
+        .mocked(mockEventBus.emitAutoModeEvent)
+        .mock.calls.filter((call) => call[0] === 'auto_mode_idle');
+      expect(idleCalls.length).toBe(1);
+    });
+
+    it('premature auto_mode_idle bug scenario: runningCount=0 but feature still in_progress', async () => {
+      // This test reproduces the exact bug scenario described in the feature:
+      // When a feature completes, there's a brief window where:
+      // 1. The feature has been released from runningFeatures (so runningCount = 0)
+      // 2. The feature's status is still 'in_progress' during the status update transition
+      // 3. pendingFeatures returns empty (only checks 'backlog'/'ready' statuses)
+      // The fix ensures auto_mode_idle is NOT emitted in this window
+
+      vi.mocked(mockLoadPendingFeatures).mockResolvedValue([]); // No backlog/ready features
+      // Feature is still in in_progress status (during status update transition)
+      const transitioningFeature: Feature = {
+        ...testFeature,
+        id: 'feature-1',
+        status: 'in_progress',
+        title: 'Transitioning Feature',
+      };
+      vi.mocked(mockLoadAllFeatures).mockResolvedValue([transitioningFeature]);
+      // Feature has been released from concurrency manager (runningCount = 0)
+      vi.mocked(mockConcurrencyManager.getRunningCountForWorktree).mockResolvedValue(0);
+
+      await coordinator.startAutoLoopForProject('/test/project', null, 1);
+
+      // Clear the initial event mock calls
+      vi.mocked(mockEventBus.emitAutoModeEvent).mockClear();
+
+      // Advance time to trigger loop iteration
+      await vi.advanceTimersByTimeAsync(11000);
+
+      // Stop the loop
+      await coordinator.stopAutoLoopForProject('/test/project', null);
+
+      // The fix prevents auto_mode_idle from being emitted in this scenario
+      expect(mockEventBus.emitAutoModeEvent).not.toHaveBeenCalledWith('auto_mode_idle', {
+        message: 'No pending features - auto mode idle',
+        projectPath: '/test/project',
+        branchName: null,
+      });
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/auto-mode-facade.test.ts b/temp_repo/apps/server/tests/unit/services/auto-mode-facade.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8a2ab4cf9ae0d598863d2cb5a401c59a785fb79e
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/auto-mode-facade.test.ts
@@ -0,0 +1,127 @@
+import { describe, it, expect } from 'vitest';
+import { AutoModeServiceFacade } from '@/services/auto-mode/facade.js';
+import type { Feature } from '@automaker/types';
+
+describe('AutoModeServiceFacade', () => {
+  describe('isFeatureEligibleForAutoMode', () => {
+    it('should include features with pipeline_* status', () => {
+      const features: Partial<Feature>[] = [
+        { id: '1', status: 'ready', branchName: 'main' },
+        { id: '2', status: 'pipeline_testing', branchName: 'main' },
+        { id: '3', status: 'in_progress', branchName: 'main' },
+        { id: '4', status: 'interrupted', branchName: 'main' },
+        { id: '5', status: 'backlog', branchName: 'main' },
+      ];
+
+      const branchName = 'main';
+      const primaryBranch = 'main';
+
+      const filtered = features.filter((f) =>
+        AutoModeServiceFacade.isFeatureEligibleForAutoMode(f as Feature, branchName, primaryBranch)
+      );
+
+      expect(filtered.map((f) => f.id)).toContain('1'); // ready
+      expect(filtered.map((f) => f.id)).toContain('2'); // pipeline_testing
+      expect(filtered.map((f) => f.id)).toContain('4'); // interrupted
+      expect(filtered.map((f) => f.id)).toContain('5'); // backlog
+      expect(filtered.map((f) => f.id)).not.toContain('3'); // in_progress
+    });
+
+    it('should correctly handle main worktree alignment', () => {
+      const features: Partial<Feature>[] = [
+        { id: '1', status: 'ready', branchName: undefined },
+        { id: '2', status: 'ready', branchName: 'main' },
+        { id: '3', status: 'ready', branchName: 'other' },
+      ];
+
+      const branchName = null; // main worktree
+      const primaryBranch = 'main';
+
+      const filtered = features.filter((f) =>
+        AutoModeServiceFacade.isFeatureEligibleForAutoMode(f as Feature, branchName, primaryBranch)
+      );
+
+      expect(filtered.map((f) => f.id)).toContain('1'); // no branch
+      expect(filtered.map((f) => f.id)).toContain('2'); // matching primary branch
+      expect(filtered.map((f) => f.id)).not.toContain('3'); // mismatching branch
+    });
+
+    it('should exclude completed, verified, and waiting_approval statuses', () => {
+      const features: Partial<Feature>[] = [
+        { id: '1', status: 'completed', branchName: 'main' },
+        { id: '2', status: 'verified', branchName: 'main' },
+        { id: '3', status: 'waiting_approval', branchName: 'main' },
+      ];
+
+      const filtered = features.filter((f) =>
+        AutoModeServiceFacade.isFeatureEligibleForAutoMode(f as Feature, 'main', 'main')
+      );
+
+      expect(filtered).toHaveLength(0);
+    });
+
+    it('should include pipeline_complete as eligible (still a pipeline status)', () => {
+      const feature: Partial<Feature> = {
+        id: '1',
+        status: 'pipeline_complete',
+        branchName: 'main',
+      };
+
+      const result = AutoModeServiceFacade.isFeatureEligibleForAutoMode(
+        feature as Feature,
+        'main',
+        'main'
+      );
+
+      expect(result).toBe(true);
+    });
+
+    it('should filter pipeline features by branch in named worktrees', () => {
+      const features: Partial<Feature>[] = [
+        { id: '1', status: 'pipeline_testing', branchName: 'feature-branch' },
+        { id: '2', status: 'pipeline_review', branchName: 'other-branch' },
+        { id: '3', status: 'pipeline_deploy', branchName: undefined },
+      ];
+
+      const filtered = features.filter((f) =>
+        AutoModeServiceFacade.isFeatureEligibleForAutoMode(f as Feature, 'feature-branch', null)
+      );
+
+      expect(filtered.map((f) => f.id)).toEqual(['1']);
+    });
+
+    it('should handle null primaryBranch for main worktree', () => {
+      const features: Partial<Feature>[] = [
+        { id: '1', status: 'ready', branchName: undefined },
+        { id: '2', status: 'ready', branchName: 'main' },
+      ];
+
+      const filtered = features.filter((f) =>
+        AutoModeServiceFacade.isFeatureEligibleForAutoMode(f as Feature, null, null)
+      );
+
+      // When primaryBranch is null, only features with no branchName are included
+      expect(filtered.map((f) => f.id)).toEqual(['1']);
+    });
+
+    it('should include various pipeline_* step IDs as eligible', () => {
+      const statuses = [
+        'pipeline_step_abc_123',
+        'pipeline_code_review',
+        'pipeline_step1',
+        'pipeline_testing',
+        'pipeline_deploy',
+      ];
+
+      for (const status of statuses) {
+        const feature: Partial<Feature> = { id: '1', status, branchName: 'main' };
+        const result = AutoModeServiceFacade.isFeatureEligibleForAutoMode(
+          feature as Feature,
+          'main',
+          'main'
+        );
+        expect(result).toBe(true);
+      }
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/auto-mode-task-parsing.test.ts b/temp_repo/apps/server/tests/unit/services/auto-mode-task-parsing.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f5a660ba62c3278b906bfbff7ec88602b79768ec
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/auto-mode-task-parsing.test.ts
@@ -0,0 +1,570 @@
+import { describe, it, expect } from 'vitest';
+import type { ParsedTask } from '@automaker/types';
+
+/**
+ * Test the task parsing logic by reimplementing the parsing functions
+ * These mirror the logic in auto-mode-service.ts parseTasksFromSpec and parseTaskLine
+ */
+
+function parseTaskLine(line: string, currentPhase?: string): ParsedTask | null {
+  // Match pattern: - [ ] T###: Description | File: path
+  const taskMatch = line.match(/- \[ \] (T\d{3}):\s*([^|]+)(?:\|\s*File:\s*(.+))?$/);
+  if (!taskMatch) {
+    // Try simpler pattern without file
+    const simpleMatch = line.match(/- \[ \] (T\d{3}):\s*(.+)$/);
+    if (simpleMatch) {
+      return {
+        id: simpleMatch[1],
+        description: simpleMatch[2].trim(),
+        phase: currentPhase,
+        status: 'pending',
+      };
+    }
+    return null;
+  }
+
+  return {
+    id: taskMatch[1],
+    description: taskMatch[2].trim(),
+    filePath: taskMatch[3]?.trim(),
+    phase: currentPhase,
+    status: 'pending',
+  };
+}
+
+function parseTasksFromSpec(specContent: string): ParsedTask[] {
+  const tasks: ParsedTask[] = [];
+
+  // Extract content within ```tasks ... ``` block
+  const tasksBlockMatch = specContent.match(/```tasks\s*([\s\S]*?)```/);
+  if (!tasksBlockMatch) {
+    // Try fallback: look for task lines anywhere in content
+    const taskLines = specContent.match(/- \[ \] T\d{3}:.*$/gm);
+    if (!taskLines) {
+      return tasks;
+    }
+    // Parse fallback task lines
+    let currentPhase: string | undefined;
+    for (const line of taskLines) {
+      const parsed = parseTaskLine(line, currentPhase);
+      if (parsed) {
+        tasks.push(parsed);
+      }
+    }
+    return tasks;
+  }
+
+  const tasksContent = tasksBlockMatch[1];
+  const lines = tasksContent.split('\n');
+
+  let currentPhase: string | undefined;
+
+  for (const line of lines) {
+    const trimmedLine = line.trim();
+
+    // Check for phase header (e.g., "## Phase 1: Foundation")
+    const phaseMatch = trimmedLine.match(/^##\s*(.+)$/);
+    if (phaseMatch) {
+      currentPhase = phaseMatch[1].trim();
+      continue;
+    }
+
+    // Check for task line
+    if (trimmedLine.startsWith('- [ ]')) {
+      const parsed = parseTaskLine(trimmedLine, currentPhase);
+      if (parsed) {
+        tasks.push(parsed);
+      }
+    }
+  }
+
+  return tasks;
+}
+
+describe('Task Parsing', () => {
+  describe('parseTaskLine', () => {
+    it('should parse task with file path', () => {
+      const line = '- [ ] T001: Create user model | File: src/models/user.ts';
+      const result = parseTaskLine(line);
+      expect(result).toEqual({
+        id: 'T001',
+        description: 'Create user model',
+        filePath: 'src/models/user.ts',
+        phase: undefined,
+        status: 'pending',
+      });
+    });
+
+    it('should parse task without file path', () => {
+      const line = '- [ ] T002: Setup database connection';
+      const result = parseTaskLine(line);
+      expect(result).toEqual({
+        id: 'T002',
+        description: 'Setup database connection',
+        phase: undefined,
+        status: 'pending',
+      });
+    });
+
+    it('should include phase when provided', () => {
+      const line = '- [ ] T003: Write tests | File: tests/user.test.ts';
+      const result = parseTaskLine(line, 'Phase 1: Foundation');
+      expect(result?.phase).toBe('Phase 1: Foundation');
+    });
+
+    it('should return null for invalid line', () => {
+      expect(parseTaskLine('- [ ] Invalid format')).toBeNull();
+      expect(parseTaskLine('Not a task line')).toBeNull();
+      expect(parseTaskLine('')).toBeNull();
+    });
+
+    it('should handle multi-word descriptions', () => {
+      const line = '- [ ] T004: Implement user authentication with JWT tokens | File: src/auth.ts';
+      const result = parseTaskLine(line);
+      expect(result?.description).toBe('Implement user authentication with JWT tokens');
+    });
+
+    it('should trim whitespace from description and file path', () => {
+      const line = '- [ ] T005:   Create API endpoint   | File:   src/routes/api.ts  ';
+      const result = parseTaskLine(line);
+      expect(result?.description).toBe('Create API endpoint');
+      expect(result?.filePath).toBe('src/routes/api.ts');
+    });
+  });
+
+  describe('parseTasksFromSpec', () => {
+    it('should parse tasks from a tasks code block', () => {
+      const specContent = `
+## Specification
+
+Some description here.
+
+\`\`\`tasks
+- [ ] T001: Create user model | File: src/models/user.ts
+- [ ] T002: Add API endpoint | File: src/routes/users.ts
+- [ ] T003: Write unit tests | File: tests/user.test.ts
+\`\`\`
+
+## Notes
+Some notes here.
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks).toHaveLength(3);
+      expect(tasks[0].id).toBe('T001');
+      expect(tasks[1].id).toBe('T002');
+      expect(tasks[2].id).toBe('T003');
+    });
+
+    it('should parse tasks with phases', () => {
+      const specContent = `
+\`\`\`tasks
+## Phase 1: Foundation
+- [ ] T001: Initialize project | File: package.json
+- [ ] T002: Configure TypeScript | File: tsconfig.json
+
+## Phase 2: Implementation
+- [ ] T003: Create main module | File: src/index.ts
+- [ ] T004: Add utility functions | File: src/utils.ts
+
+## Phase 3: Testing
+- [ ] T005: Write tests | File: tests/index.test.ts
+\`\`\`
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks).toHaveLength(5);
+      expect(tasks[0].phase).toBe('Phase 1: Foundation');
+      expect(tasks[1].phase).toBe('Phase 1: Foundation');
+      expect(tasks[2].phase).toBe('Phase 2: Implementation');
+      expect(tasks[3].phase).toBe('Phase 2: Implementation');
+      expect(tasks[4].phase).toBe('Phase 3: Testing');
+    });
+
+    it('should return empty array for content without tasks', () => {
+      const specContent = 'Just some text without any tasks';
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks).toEqual([]);
+    });
+
+    it('should fallback to finding task lines outside code block', () => {
+      const specContent = `
+## Implementation Plan
+
+- [ ] T001: First task | File: src/first.ts
+- [ ] T002: Second task | File: src/second.ts
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks).toHaveLength(2);
+      expect(tasks[0].id).toBe('T001');
+      expect(tasks[1].id).toBe('T002');
+    });
+
+    it('should handle empty tasks block', () => {
+      const specContent = `
+\`\`\`tasks
+\`\`\`
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks).toEqual([]);
+    });
+
+    it('should handle mixed valid and invalid lines', () => {
+      const specContent = `
+\`\`\`tasks
+- [ ] T001: Valid task | File: src/valid.ts
+- Invalid line
+Some other text
+- [ ] T002: Another valid task
+\`\`\`
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks).toHaveLength(2);
+    });
+
+    it('should preserve task order', () => {
+      const specContent = `
+\`\`\`tasks
+- [ ] T003: Third
+- [ ] T001: First
+- [ ] T002: Second
+\`\`\`
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks[0].id).toBe('T003');
+      expect(tasks[1].id).toBe('T001');
+      expect(tasks[2].id).toBe('T002');
+    });
+
+    it('should handle task IDs with different numbers', () => {
+      const specContent = `
+\`\`\`tasks
+- [ ] T001: First
+- [ ] T010: Tenth
+- [ ] T100: Hundredth
+\`\`\`
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks).toHaveLength(3);
+      expect(tasks[0].id).toBe('T001');
+      expect(tasks[1].id).toBe('T010');
+      expect(tasks[2].id).toBe('T100');
+    });
+  });
+
+  describe('spec content generation patterns', () => {
+    it('should match the expected lite mode output format', () => {
+      const liteModeOutput = `
+1. **Goal**: Implement user registration
+2. **Approach**: Create form component, add validation, connect to API
+3. **Files to Touch**: src/components/Register.tsx, src/api/auth.ts
+4. **Tasks**:
+   1. Create registration form
+   2. Add form validation
+   3. Connect to backend API
+5. **Risks**: Form state management complexity
+
+[PLAN_GENERATED] Planning outline complete.
+`;
+      expect(liteModeOutput).toContain('[PLAN_GENERATED]');
+      expect(liteModeOutput).toContain('Goal');
+      expect(liteModeOutput).toContain('Approach');
+    });
+
+    it('should match the expected spec mode output format', () => {
+      const specModeOutput = `
+1. **Problem**: Users cannot register for accounts
+
+2. **Solution**: Implement registration form with email/password validation
+
+3. **Acceptance Criteria**:
+   - GIVEN a new user, WHEN they fill in valid details, THEN account is created
+
+4. **Files to Modify**:
+   | File | Purpose | Action |
+   |------|---------|--------|
+   | src/Register.tsx | Registration form | create |
+
+5. **Implementation Tasks**:
+\`\`\`tasks
+- [ ] T001: Create registration component | File: src/Register.tsx
+- [ ] T002: Add form validation | File: src/Register.tsx
+\`\`\`
+
+6. **Verification**: Manual testing of registration flow
+
+[SPEC_GENERATED] Please review the specification above.
+`;
+      expect(specModeOutput).toContain('[SPEC_GENERATED]');
+      expect(specModeOutput).toContain('```tasks');
+      expect(specModeOutput).toContain('T001');
+    });
+
+    it('should match the expected full mode output format', () => {
+      const fullModeOutput = `
+1. **Problem Statement**: Users need ability to create accounts
+
+2. **User Story**: As a new user, I want to register, so that I can access the app
+
+3. **Acceptance Criteria**:
+   - **Happy Path**: GIVEN valid email, WHEN registering, THEN account created
+   - **Edge Cases**: GIVEN existing email, WHEN registering, THEN error shown
+
+4. **Technical Context**:
+   | Aspect | Value |
+   |--------|-------|
+   | Affected Files | src/Register.tsx |
+
+5. **Non-Goals**: Social login, password recovery
+
+6. **Implementation Tasks**:
+\`\`\`tasks
+## Phase 1: Foundation
+- [ ] T001: Setup component structure | File: src/Register.tsx
+
+## Phase 2: Core Implementation
+- [ ] T002: Add form logic | File: src/Register.tsx
+
+## Phase 3: Integration & Testing
+- [ ] T003: Connect to API | File: src/api/auth.ts
+\`\`\`
+
+[SPEC_GENERATED] Please review the comprehensive specification above.
+`;
+      expect(fullModeOutput).toContain('Phase 1');
+      expect(fullModeOutput).toContain('Phase 2');
+      expect(fullModeOutput).toContain('Phase 3');
+      expect(fullModeOutput).toContain('[SPEC_GENERATED]');
+    });
+  });
+
+  describe('detectSpecFallback - non-Claude model support', () => {
+    /**
+     * Reimplementation of detectSpecFallback for testing
+     * This mirrors the logic in auto-mode-service.ts for detecting specs
+     * when the [SPEC_GENERATED] marker is missing (common with non-Claude models)
+     */
+    function detectSpecFallback(text: string): boolean {
+      // Check for key structural elements of a spec
+      const hasTasksBlock = /```tasks[\s\S]*```/.test(text);
+      const hasTaskLines = /- \[ \] T\d{3}:/.test(text);
+
+      // Check for common spec sections (case-insensitive)
+      const hasAcceptanceCriteria = /acceptance criteria/i.test(text);
+      const hasTechnicalContext = /technical context/i.test(text);
+      const hasProblemStatement = /problem statement/i.test(text);
+      const hasUserStory = /user story/i.test(text);
+      // Additional patterns for different model outputs
+      const hasGoal = /\*\*Goal\*\*:/i.test(text);
+      const hasSolution = /\*\*Solution\*\*:/i.test(text);
+      const hasImplementation = /implementation\s*(plan|steps|approach)/i.test(text);
+      const hasOverview = /##\s*(overview|summary)/i.test(text);
+
+      // Spec is detected if we have task structure AND at least some spec content
+      const hasTaskStructure = hasTasksBlock || hasTaskLines;
+      const hasSpecContent =
+        hasAcceptanceCriteria ||
+        hasTechnicalContext ||
+        hasProblemStatement ||
+        hasUserStory ||
+        hasGoal ||
+        hasSolution ||
+        hasImplementation ||
+        hasOverview;
+
+      return hasTaskStructure && hasSpecContent;
+    }
+
+    it('should detect spec with tasks block and acceptance criteria', () => {
+      const content = `
+## Acceptance Criteria
+- GIVEN a user, WHEN they login, THEN they see the dashboard
+
+\`\`\`tasks
+- [ ] T001: Create login form | File: src/Login.tsx
+\`\`\`
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with task lines and problem statement', () => {
+      const content = `
+## Problem Statement
+Users cannot currently log in to the application.
+
+## Implementation Plan
+- [ ] T001: Add authentication endpoint
+- [ ] T002: Create login UI
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with Goal section (lite planning mode style)', () => {
+      const content = `
+**Goal**: Implement user authentication
+
+**Solution**: Use JWT tokens for session management
+
+- [ ] T001: Setup auth middleware
+- [ ] T002: Create token service
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with User Story format', () => {
+      const content = `
+## User Story
+As a user, I want to reset my password, so that I can regain access.
+
+## Technical Context
+This will modify the auth module.
+
+\`\`\`tasks
+- [ ] T001: Add reset endpoint
+\`\`\`
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with Overview section', () => {
+      const content = `
+## Overview
+This feature adds dark mode support.
+
+\`\`\`tasks
+- [ ] T001: Add theme toggle
+- [ ] T002: Update CSS variables
+\`\`\`
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with Summary section', () => {
+      const content = `
+## Summary
+Adding a new dashboard component.
+
+- [ ] T001: Create dashboard layout
+- [ ] T002: Add widgets
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with implementation plan', () => {
+      const content = `
+## Implementation Plan
+We will add the feature in two phases.
+
+- [ ] T001: Phase 1 setup
+- [ ] T002: Phase 2 implementation
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with implementation steps', () => {
+      const content = `
+## Implementation Steps
+Follow these steps:
+
+- [ ] T001: Step one
+- [ ] T002: Step two
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with implementation approach', () => {
+      const content = `
+## Implementation Approach
+We will use a modular approach.
+
+- [ ] T001: Create modules
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should NOT detect spec without task structure', () => {
+      const content = `
+## Problem Statement
+Users cannot log in.
+
+## Acceptance Criteria
+- GIVEN a user, WHEN they try to login, THEN it works
+`;
+      expect(detectSpecFallback(content)).toBe(false);
+    });
+
+    it('should NOT detect spec without spec content sections', () => {
+      const content = `
+Here are some tasks:
+
+- [ ] T001: Do something
+- [ ] T002: Do another thing
+`;
+      expect(detectSpecFallback(content)).toBe(false);
+    });
+
+    it('should NOT detect random text as spec', () => {
+      const content = 'Just some random text without any structure';
+      expect(detectSpecFallback(content)).toBe(false);
+    });
+
+    it('should handle case-insensitive matching for spec sections', () => {
+      const content = `
+## ACCEPTANCE CRITERIA
+All caps section header
+
+- [ ] T001: Task
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+
+      const content2 = `
+## acceptance criteria
+Lower case section header
+
+- [ ] T001: Task
+`;
+      expect(detectSpecFallback(content2)).toBe(true);
+    });
+
+    it('should detect OpenAI-style output without explicit marker', () => {
+      // Non-Claude models may format specs differently but still have the key elements
+      const openAIStyleOutput = `
+# Feature Specification: User Authentication
+
+**Goal**: Allow users to securely log into the application
+
+**Solution**: Implement JWT-based authentication with refresh tokens
+
+## Acceptance Criteria
+1. Users can log in with email and password
+2. Invalid credentials show error message
+3. Sessions persist across page refreshes
+
+## Implementation Tasks
+\`\`\`tasks
+- [ ] T001: Create auth service | File: src/services/auth.ts
+- [ ] T002: Build login component | File: src/components/Login.tsx
+- [ ] T003: Add protected routes | File: src/App.tsx
+\`\`\`
+`;
+      expect(detectSpecFallback(openAIStyleOutput)).toBe(true);
+    });
+
+    it('should detect Gemini-style output without explicit marker', () => {
+      const geminiStyleOutput = `
+## Overview
+
+This specification describes the implementation of a user profile page.
+
+## Technical Context
+- Framework: React
+- State: Redux
+
+## Tasks
+
+- [ ] T001: Create ProfilePage component
+- [ ] T002: Add profile API endpoint
+- [ ] T003: Style the profile page
+`;
+      expect(detectSpecFallback(geminiStyleOutput)).toBe(true);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/auto-mode/facade-agent-runner.test.ts b/temp_repo/apps/server/tests/unit/services/auto-mode/facade-agent-runner.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..58cbaeb96810a53ed9309aa0bc57799d8f4ec1fa
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/auto-mode/facade-agent-runner.test.ts
@@ -0,0 +1,207 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// Mock dependencies (hoisted)
+vi.mock('../../../../src/services/agent-executor.js');
+vi.mock('../../../../src/lib/settings-helpers.js');
+vi.mock('../../../../src/providers/provider-factory.js');
+vi.mock('../../../../src/lib/sdk-options.js');
+vi.mock('@automaker/model-resolver', () => ({
+  resolveModelString: vi.fn((model, fallback) => model || fallback),
+  DEFAULT_MODELS: { claude: 'claude-3-5-sonnet' },
+}));
+
+import { AutoModeServiceFacade } from '../../../../src/services/auto-mode/facade.js';
+import { AgentExecutor } from '../../../../src/services/agent-executor.js';
+import * as settingsHelpers from '../../../../src/lib/settings-helpers.js';
+import { ProviderFactory } from '../../../../src/providers/provider-factory.js';
+import * as sdkOptions from '../../../../src/lib/sdk-options.js';
+
+describe('AutoModeServiceFacade Agent Runner', () => {
+  let mockAgentExecutor: MockAgentExecutor;
+  let mockSettingsService: MockSettingsService;
+  let facade: AutoModeServiceFacade;
+
+  // Type definitions for mocks
+  interface MockAgentExecutor {
+    execute: ReturnType<typeof vi.fn>;
+  }
+  interface MockSettingsService {
+    getGlobalSettings: ReturnType<typeof vi.fn>;
+    getCredentials: ReturnType<typeof vi.fn>;
+    getProjectSettings: ReturnType<typeof vi.fn>;
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Set up the mock for createAutoModeOptions
+    // Note: Using 'as any' because Options type from SDK is complex and we only need
+    // the specific fields that are verified in tests (maxTurns, allowedTools, etc.)
+    vi.mocked(sdkOptions.createAutoModeOptions).mockReturnValue({
+      maxTurns: 123,
+      allowedTools: ['tool1'],
+      systemPrompt: 'system-prompt',
+    } as any);
+
+    mockAgentExecutor = {
+      execute: vi.fn().mockResolvedValue(undefined),
+    };
+    (AgentExecutor as any).mockImplementation(function (this: MockAgentExecutor) {
+      return mockAgentExecutor;
+    });
+
+    mockSettingsService = {
+      getGlobalSettings: vi.fn().mockResolvedValue({}),
+      getCredentials: vi.fn().mockResolvedValue({}),
+      getProjectSettings: vi.fn().mockResolvedValue({}),
+    };
+
+    // Helper to access the private createRunAgentFn via factory creation
+    facade = AutoModeServiceFacade.create('/project', {
+      events: { on: vi.fn(), emit: vi.fn(), subscribe: vi.fn().mockReturnValue(vi.fn()) } as any,
+      settingsService: mockSettingsService,
+      sharedServices: {
+        eventBus: { emitAutoModeEvent: vi.fn() } as any,
+        worktreeResolver: { getCurrentBranch: vi.fn().mockResolvedValue('main') } as any,
+        concurrencyManager: {
+          isRunning: vi.fn().mockReturnValue(false),
+          getRunningFeature: vi.fn().mockReturnValue(null),
+        } as any,
+      } as any,
+    });
+  });
+
+  it('should resolve provider by providerId and pass to AgentExecutor', async () => {
+    // 1. Setup mocks
+    const mockProvider = { getName: () => 'mock-provider' };
+    (ProviderFactory.getProviderForModel as any).mockReturnValue(mockProvider);
+
+    const mockClaudeProvider = { id: 'zai-1', name: 'Zai' };
+    const mockCredentials = { apiKey: 'test-key' };
+    (settingsHelpers.resolveProviderContext as any).mockResolvedValue({
+      provider: mockClaudeProvider,
+      credentials: mockCredentials,
+      resolvedModel: undefined,
+    });
+
+    const runAgentFn = (facade as any).executionService.runAgentFn;
+
+    // 2. Execute
+    await runAgentFn(
+      '/workdir',
+      'feature-1',
+      'prompt',
+      new AbortController(),
+      '/project',
+      [],
+      'model-1',
+      {
+        providerId: 'zai-1',
+      }
+    );
+
+    // 3. Verify
+    expect(settingsHelpers.resolveProviderContext).toHaveBeenCalledWith(
+      mockSettingsService,
+      'model-1',
+      'zai-1',
+      '[AutoModeFacade]'
+    );
+
+    expect(mockAgentExecutor.execute).toHaveBeenCalledWith(
+      expect.objectContaining({
+        claudeCompatibleProvider: mockClaudeProvider,
+        credentials: mockCredentials,
+        model: 'model-1', // Original model ID
+      }),
+      expect.any(Object)
+    );
+  });
+
+  it('should fallback to model-based lookup if providerId is not provided', async () => {
+    const mockProvider = { getName: () => 'mock-provider' };
+    (ProviderFactory.getProviderForModel as any).mockReturnValue(mockProvider);
+
+    const mockClaudeProvider = { id: 'zai-model', name: 'Zai Model' };
+    (settingsHelpers.resolveProviderContext as any).mockResolvedValue({
+      provider: mockClaudeProvider,
+      credentials: { apiKey: 'model-key' },
+      resolvedModel: 'resolved-model-1',
+    });
+
+    const runAgentFn = (facade as any).executionService.runAgentFn;
+
+    await runAgentFn(
+      '/workdir',
+      'feature-1',
+      'prompt',
+      new AbortController(),
+      '/project',
+      [],
+      'model-1',
+      {
+        // no providerId
+      }
+    );
+
+    expect(settingsHelpers.resolveProviderContext).toHaveBeenCalledWith(
+      mockSettingsService,
+      'model-1',
+      undefined,
+      '[AutoModeFacade]'
+    );
+
+    expect(mockAgentExecutor.execute).toHaveBeenCalledWith(
+      expect.objectContaining({
+        claudeCompatibleProvider: mockClaudeProvider,
+      }),
+      expect.any(Object)
+    );
+  });
+
+  it('should use resolvedModel from provider config for createAutoModeOptions if it maps to a Claude model', async () => {
+    const mockProvider = { getName: () => 'mock-provider' };
+    (ProviderFactory.getProviderForModel as any).mockReturnValue(mockProvider);
+
+    const mockClaudeProvider = {
+      id: 'zai-1',
+      name: 'Zai',
+      models: [{ id: 'custom-model-1', mapsToClaudeModel: 'claude-3-opus' }],
+    };
+    (settingsHelpers.resolveProviderContext as any).mockResolvedValue({
+      provider: mockClaudeProvider,
+      credentials: { apiKey: 'test-key' },
+      resolvedModel: 'claude-3-5-opus',
+    });
+
+    const runAgentFn = (facade as any).executionService.runAgentFn;
+
+    await runAgentFn(
+      '/workdir',
+      'feature-1',
+      'prompt',
+      new AbortController(),
+      '/project',
+      [],
+      'custom-model-1',
+      {
+        providerId: 'zai-1',
+      }
+    );
+
+    // Verify createAutoModeOptions was called with the mapped model
+    expect(sdkOptions.createAutoModeOptions).toHaveBeenCalledWith(
+      expect.objectContaining({
+        model: 'claude-3-5-opus',
+      })
+    );
+
+    // Verify AgentExecutor.execute still gets the original custom model ID
+    expect(mockAgentExecutor.execute).toHaveBeenCalledWith(
+      expect.objectContaining({
+        model: 'custom-model-1',
+      }),
+      expect.any(Object)
+    );
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/claude-usage-service.test.ts b/temp_repo/apps/server/tests/unit/services/claude-usage-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bb88381ef985fec32d23fae961be6b9a78cacbf3
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/claude-usage-service.test.ts
@@ -0,0 +1,739 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ClaudeUsageService } from '@/services/claude-usage-service.js';
+import { spawn } from 'child_process';
+import * as pty from 'node-pty';
+import * as os from 'os';
+
+vi.mock('child_process');
+vi.mock('node-pty');
+vi.mock('os');
+
+describe('claude-usage-service.ts', () => {
+  let service: ClaudeUsageService;
+  let mockSpawnProcess: any;
+  let mockPtyProcess: any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    service = new ClaudeUsageService();
+
+    // Mock spawn process for isAvailable and Mac commands
+    mockSpawnProcess = {
+      on: vi.fn(),
+      kill: vi.fn(),
+      stdout: {
+        on: vi.fn(),
+      },
+      stderr: {
+        on: vi.fn(),
+      },
+    };
+
+    // Mock PTY process for Windows
+    mockPtyProcess = {
+      onData: vi.fn(),
+      onExit: vi.fn(),
+      write: vi.fn(),
+      kill: vi.fn(),
+    };
+
+    vi.mocked(spawn).mockReturnValue(mockSpawnProcess as any);
+    vi.mocked(pty.spawn).mockReturnValue(mockPtyProcess);
+  });
+
+  describe('isAvailable', () => {
+    it('should return true when Claude CLI is available', async () => {
+      vi.mocked(os.platform).mockReturnValue('darwin');
+
+      // Simulate successful which/where command
+      mockSpawnProcess.on.mockImplementation((event: string, callback: Function) => {
+        if (event === 'close') {
+          callback(0); // Exit code 0 = found
+        }
+        return mockSpawnProcess;
+      });
+
+      const result = await service.isAvailable();
+
+      expect(result).toBe(true);
+      expect(spawn).toHaveBeenCalledWith('which', ['claude']);
+    });
+
+    it('should return false when Claude CLI is not available', async () => {
+      vi.mocked(os.platform).mockReturnValue('darwin');
+
+      mockSpawnProcess.on.mockImplementation((event: string, callback: Function) => {
+        if (event === 'close') {
+          callback(1); // Exit code 1 = not found
+        }
+        return mockSpawnProcess;
+      });
+
+      const result = await service.isAvailable();
+
+      expect(result).toBe(false);
+    });
+
+    it('should return false on error', async () => {
+      vi.mocked(os.platform).mockReturnValue('darwin');
+
+      mockSpawnProcess.on.mockImplementation((event: string, callback: Function) => {
+        if (event === 'error') {
+          callback(new Error('Command failed'));
+        }
+        return mockSpawnProcess;
+      });
+
+      const result = await service.isAvailable();
+
+      expect(result).toBe(false);
+    });
+
+    it("should use 'where' command on Windows", async () => {
+      vi.mocked(os.platform).mockReturnValue('win32');
+      const ptyService = new ClaudeUsageService(); // Create new service after platform mock
+
+      mockSpawnProcess.on.mockImplementation((event: string, callback: Function) => {
+        if (event === 'close') {
+          callback(0);
+        }
+        return mockSpawnProcess;
+      });
+
+      await ptyService.isAvailable();
+
+      expect(spawn).toHaveBeenCalledWith('where', ['claude']);
+    });
+  });
+
+  describe('stripAnsiCodes', () => {
+    it('should strip ANSI color codes from text', () => {
+      const service = new ClaudeUsageService();
+      const input = '\x1B[31mRed text\x1B[0m Normal text';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.stripAnsiCodes(input);
+
+      expect(result).toBe('Red text Normal text');
+    });
+
+    it('should handle text without ANSI codes', () => {
+      const service = new ClaudeUsageService();
+      const input = 'Plain text';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.stripAnsiCodes(input);
+
+      expect(result).toBe('Plain text');
+    });
+
+    it('should strip OSC sequences (window title, etc.)', () => {
+      const service = new ClaudeUsageService();
+      // OSC sequence to set window title: ESC ] 0 ; title BEL
+      const input = '\x1B]0;Claude Code\x07Regular text';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.stripAnsiCodes(input);
+
+      expect(result).toBe('Regular text');
+    });
+
+    it('should strip DEC private mode sequences', () => {
+      const service = new ClaudeUsageService();
+      // DEC private mode sequences like ESC[?2026h and ESC[?2026l
+      const input = '\x1B[?2026lClaude Code\x1B[?2026h more text';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.stripAnsiCodes(input);
+
+      expect(result).toBe('Claude Code more text');
+    });
+
+    it('should handle complex terminal output with mixed escape sequences', () => {
+      const service = new ClaudeUsageService();
+      // Simulate the garbled output seen in the bug: "[?2026l ]0;❇ Claude Code [?2026h"
+      // This contains OSC (set title) and DEC private mode sequences
+      const input =
+        '\x1B[?2026l\x1B]0;❇ Claude Code\x07\x1B[?2026hCurrent session 0%used Resets3am';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.stripAnsiCodes(input);
+
+      expect(result).toBe('Current session 0%used Resets3am');
+    });
+
+    it('should strip single character escape sequences', () => {
+      const service = new ClaudeUsageService();
+      // ESC c is the reset terminal command
+      const input = '\x1BcReset text';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.stripAnsiCodes(input);
+
+      expect(result).toBe('Reset text');
+    });
+
+    it('should remove control characters but preserve newlines and tabs', () => {
+      const service = new ClaudeUsageService();
+      // BEL character (\x07) should be stripped, but the word "Bell" is regular text
+      const input = 'Line 1\nLine 2\tTabbed\x07 with bell';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.stripAnsiCodes(input);
+
+      // BEL is stripped, newlines and tabs preserved
+      expect(result).toBe('Line 1\nLine 2\tTabbed with bell');
+    });
+
+    it('should convert cursor forward (ESC[nC) to spaces', () => {
+      const service = new ClaudeUsageService();
+      // Claude CLI TUI uses ESC[1C instead of space between words
+      const input = 'Current\x1B[1Csession';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.stripAnsiCodes(input);
+
+      expect(result).toBe('Current session');
+    });
+
+    it('should handle multi-character cursor forward sequences', () => {
+      const service = new ClaudeUsageService();
+      // ESC[3C = move cursor forward 3 positions = 3 spaces
+      const input = 'Hello\x1B[3Cworld';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.stripAnsiCodes(input);
+
+      expect(result).toBe('Hello   world');
+    });
+
+    it('should handle real Claude CLI TUI output with cursor movement codes', () => {
+      const service = new ClaudeUsageService();
+      // Simulates actual Claude CLI /usage output where words are separated by ESC[1C
+      const input =
+        'Current\x1B[1Cweek\x1B[1C(all\x1B[1Cmodels)\n' +
+        '\x1B[32m█████████████████████████▌\x1B[0m\x1B[1C51%\x1B[1Cused\n' +
+        'Resets\x1B[1CFeb\x1B[1C19\x1B[1Cat\x1B[1C3pm\x1B[1C(America/Los_Angeles)';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.stripAnsiCodes(input);
+
+      expect(result).toContain('Current week (all models)');
+      expect(result).toContain('51% used');
+      expect(result).toContain('Resets Feb 19 at 3pm (America/Los_Angeles)');
+    });
+
+    it('should parse usage output with cursor movement codes between words', () => {
+      const service = new ClaudeUsageService();
+      // Simulates the full /usage TUI output with ESC[1C between every word
+      const output =
+        'Current\x1B[1Csession\n' +
+        '\x1B[32m█████████████▌\x1B[0m\x1B[1C27%\x1B[1Cused\n' +
+        'Resets\x1B[1C9pm\x1B[1C(America/Los_Angeles)\n' +
+        '\n' +
+        'Current\x1B[1Cweek\x1B[1C(all\x1B[1Cmodels)\n' +
+        '\x1B[32m█████████████████████████▌\x1B[0m\x1B[1C51%\x1B[1Cused\n' +
+        'Resets\x1B[1CFeb\x1B[1C19\x1B[1Cat\x1B[1C3pm\x1B[1C(America/Los_Angeles)\n' +
+        '\n' +
+        'Current\x1B[1Cweek\x1B[1C(Sonnet\x1B[1Conly)\n' +
+        '\x1B[32m██▌\x1B[0m\x1B[1C5%\x1B[1Cused\n' +
+        'Resets\x1B[1CFeb\x1B[1C19\x1B[1Cat\x1B[1C11pm\x1B[1C(America/Los_Angeles)';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseUsageOutput(output);
+
+      expect(result.sessionPercentage).toBe(27);
+      expect(result.weeklyPercentage).toBe(51);
+      expect(result.sonnetWeeklyPercentage).toBe(5);
+      expect(result.weeklyResetText).toContain('Resets Feb 19 at 3pm');
+      expect(result.weeklyResetText).not.toContain('America/Los_Angeles');
+    });
+  });
+
+  describe('parseResetTime', () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date('2025-01-15T10:00:00Z'));
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it('should parse duration format with hours and minutes', () => {
+      const service = new ClaudeUsageService();
+      const text = 'Resets in 2h 15m';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseResetTime(text, 'session');
+
+      const expected = new Date('2025-01-15T12:15:00Z');
+      expect(new Date(result)).toEqual(expected);
+    });
+
+    it('should parse duration format with only minutes', () => {
+      const service = new ClaudeUsageService();
+      const text = 'Resets in 30m';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseResetTime(text, 'session');
+
+      const expected = new Date('2025-01-15T10:30:00Z');
+      expect(new Date(result)).toEqual(expected);
+    });
+
+    it('should parse simple time format (AM)', () => {
+      const service = new ClaudeUsageService();
+      const text = 'Resets 11am';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseResetTime(text, 'session');
+
+      // Should be today at 11am, or tomorrow if already passed
+      const resultDate = new Date(result);
+      expect(resultDate.getHours()).toBe(11);
+      expect(resultDate.getMinutes()).toBe(0);
+    });
+
+    it('should parse simple time format (PM)', () => {
+      const service = new ClaudeUsageService();
+      const text = 'Resets 3pm';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseResetTime(text, 'session');
+
+      const resultDate = new Date(result);
+      expect(resultDate.getHours()).toBe(15);
+      expect(resultDate.getMinutes()).toBe(0);
+    });
+
+    it('should parse date format with month, day, and time', () => {
+      const service = new ClaudeUsageService();
+      const text = 'Resets Dec 22 at 8pm';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseResetTime(text, 'weekly');
+
+      const resultDate = new Date(result);
+      expect(resultDate.getMonth()).toBe(11); // December = 11
+      expect(resultDate.getDate()).toBe(22);
+      expect(resultDate.getHours()).toBe(20);
+    });
+
+    it('should parse date format with comma separator', () => {
+      const service = new ClaudeUsageService();
+      const text = 'Resets Jan 15, 3:30pm';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseResetTime(text, 'weekly');
+
+      const resultDate = new Date(result);
+      expect(resultDate.getMonth()).toBe(0); // January = 0
+      expect(resultDate.getDate()).toBe(15);
+      expect(resultDate.getHours()).toBe(15);
+      expect(resultDate.getMinutes()).toBe(30);
+    });
+
+    it('should handle 12am correctly', () => {
+      const service = new ClaudeUsageService();
+      const text = 'Resets 12am';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseResetTime(text, 'session');
+
+      const resultDate = new Date(result);
+      expect(resultDate.getHours()).toBe(0);
+    });
+
+    it('should handle 12pm correctly', () => {
+      const service = new ClaudeUsageService();
+      const text = 'Resets 12pm';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseResetTime(text, 'session');
+
+      const resultDate = new Date(result);
+      expect(resultDate.getHours()).toBe(12);
+    });
+
+    it('should return default reset time for unparseable text', () => {
+      const service = new ClaudeUsageService();
+      const text = 'Invalid reset text';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseResetTime(text, 'session');
+      // @ts-expect-error - accessing private method for testing
+      const defaultResult = service.getDefaultResetTime('session');
+
+      expect(result).toBe(defaultResult);
+    });
+  });
+
+  describe('getDefaultResetTime', () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date('2025-01-15T10:00:00Z')); // Wednesday
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it('should return session default (5 hours from now)', () => {
+      const service = new ClaudeUsageService();
+      // @ts-expect-error - accessing private method for testing
+      const result = service.getDefaultResetTime('session');
+
+      const expected = new Date('2025-01-15T15:00:00Z');
+      expect(new Date(result)).toEqual(expected);
+    });
+
+    it('should return weekly default (next Monday at noon)', () => {
+      const service = new ClaudeUsageService();
+      // @ts-expect-error - accessing private method for testing
+      const result = service.getDefaultResetTime('weekly');
+
+      const resultDate = new Date(result);
+      // Next Monday from Wednesday should be 5 days away
+      expect(resultDate.getDay()).toBe(1); // Monday
+      expect(resultDate.getHours()).toBe(12);
+      expect(resultDate.getMinutes()).toBe(59);
+    });
+  });
+
+  describe('parseSection', () => {
+    it('should parse section with percentage left', () => {
+      const service = new ClaudeUsageService();
+      const lines = ['Current session', '████████████████░░░░ 65% left', 'Resets in 2h 15m'];
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseSection(lines, 'Current session', 'session');
+
+      expect(result.percentage).toBe(35); // 100 - 65 = 35% used
+      expect(result.resetText).toBe('Resets in 2h 15m');
+    });
+
+    it('should parse section with percentage used', () => {
+      const service = new ClaudeUsageService();
+      const lines = [
+        'Current week (all models)',
+        '██████████░░░░░░░░░░ 40% used',
+        'Resets Jan 15, 3:30pm',
+      ];
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseSection(lines, 'Current week (all models)', 'weekly');
+
+      expect(result.percentage).toBe(40); // Already in % used
+    });
+
+    it('should return zero percentage when section not found', () => {
+      const service = new ClaudeUsageService();
+      const lines = ['Some other text', 'No matching section'];
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseSection(lines, 'Current session', 'session');
+
+      expect(result.percentage).toBe(0);
+    });
+
+    it('should strip timezone from reset text', () => {
+      const service = new ClaudeUsageService();
+      const lines = ['Current session', '65% left', 'Resets 3pm (America/Los_Angeles)'];
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseSection(lines, 'Current session', 'session');
+
+      expect(result.resetText).toBe('Resets 3pm');
+      expect(result.resetText).not.toContain('America/Los_Angeles');
+    });
+
+    it('should handle case-insensitive section matching', () => {
+      const service = new ClaudeUsageService();
+      const lines = ['CURRENT SESSION', '65% left', 'Resets in 2h'];
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseSection(lines, 'current session', 'session');
+
+      expect(result.percentage).toBe(35);
+    });
+  });
+
+  describe('parseUsageOutput', () => {
+    it('should parse complete usage output', () => {
+      const service = new ClaudeUsageService();
+      const output = `
+Claude Code v1.0.27
+
+Current session
+████████████████░░░░ 65% left
+Resets in 2h 15m
+
+Current week (all models)
+██████████░░░░░░░░░░ 35% left
+Resets Jan 15, 3:30pm (America/Los_Angeles)
+
+Current week (Sonnet only)
+████████████████████ 80% left
+Resets Jan 15, 3:30pm (America/Los_Angeles)
+`;
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseUsageOutput(output);
+
+      expect(result.sessionPercentage).toBe(35); // 100 - 65
+      expect(result.weeklyPercentage).toBe(65); // 100 - 35
+      expect(result.sonnetWeeklyPercentage).toBe(20); // 100 - 80
+      expect(result.sessionResetText).toContain('Resets in 2h 15m');
+      expect(result.weeklyResetText).toContain('Resets Jan 15, 3:30pm');
+      expect(result.userTimezone).toBe(Intl.DateTimeFormat().resolvedOptions().timeZone);
+    });
+
+    it('should handle output with ANSI codes', () => {
+      const service = new ClaudeUsageService();
+      const output = `
+\x1B[1mClaude Code v1.0.27\x1B[0m
+
+\x1B[1mCurrent session\x1B[0m
+\x1B[32m████████████████░░░░\x1B[0m 65% left
+Resets in 2h 15m
+`;
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseUsageOutput(output);
+
+      expect(result.sessionPercentage).toBe(35);
+    });
+
+    it('should handle Opus section name', () => {
+      const service = new ClaudeUsageService();
+      const output = `
+Current session
+65% left
+Resets in 2h
+
+Current week (all models)
+35% left
+Resets Jan 15, 3pm
+
+Current week (Opus)
+90% left
+Resets Jan 15, 3pm
+`;
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseUsageOutput(output);
+
+      expect(result.sonnetWeeklyPercentage).toBe(10); // 100 - 90
+    });
+
+    it('should set default values for missing sections', () => {
+      const service = new ClaudeUsageService();
+      const output = 'Claude Code v1.0.27';
+      // @ts-expect-error - accessing private method for testing
+      const result = service.parseUsageOutput(output);
+
+      expect(result.sessionPercentage).toBe(0);
+      expect(result.weeklyPercentage).toBe(0);
+      expect(result.sonnetWeeklyPercentage).toBe(0);
+      expect(result.sessionTokensUsed).toBe(0);
+      expect(result.sessionLimit).toBe(0);
+      expect(result.costUsed).toBeNull();
+      expect(result.costLimit).toBeNull();
+      expect(result.costCurrency).toBeNull();
+    });
+  });
+
+  // Note: executeClaudeUsageCommandMac tests removed - the service now uses PTY for all platforms
+  // The executeClaudeUsageCommandMac method exists but is dead code (never called)
+  describe.skip('executeClaudeUsageCommandMac (deprecated - uses PTY now)', () => {
+    it('should be skipped - service now uses PTY for all platforms', () => {
+      expect(true).toBe(true);
+    });
+  });
+
+  describe('executeClaudeUsageCommandPty', () => {
+    // Note: The service now uses PTY for all platforms, using process.cwd() as the working directory
+    beforeEach(() => {
+      vi.mocked(os.platform).mockReturnValue('win32');
+    });
+
+    it('should use node-pty and return output', async () => {
+      const ptyService = new ClaudeUsageService();
+      const mockOutput = `
+Current session
+65% left
+Resets in 2h
+`;
+
+      let dataCallback: Function | undefined;
+      let exitCallback: Function | undefined;
+
+      const mockPty = {
+        onData: vi.fn((callback: Function) => {
+          dataCallback = callback;
+        }),
+        onExit: vi.fn((callback: Function) => {
+          exitCallback = callback;
+        }),
+        write: vi.fn(),
+        kill: vi.fn(),
+      };
+      vi.mocked(pty.spawn).mockReturnValue(mockPty as any);
+
+      const promise = ptyService.fetchUsageData();
+
+      // Simulate data
+      dataCallback!(mockOutput);
+
+      // Simulate successful exit
+      exitCallback!({ exitCode: 0 });
+
+      const result = await promise;
+
+      expect(result.sessionPercentage).toBe(35);
+      // Service uses process.cwd() for --add-dir
+      expect(pty.spawn).toHaveBeenCalledWith(
+        'cmd.exe',
+        ['/c', 'claude', '--add-dir', process.cwd()],
+        expect.objectContaining({
+          cwd: process.cwd(),
+        })
+      );
+    });
+
+    it('should send escape key after seeing usage data', async () => {
+      vi.useFakeTimers();
+      const ptyService = new ClaudeUsageService();
+
+      const mockOutput = 'Current session\n65% left';
+
+      let dataCallback: Function | undefined;
+      let exitCallback: Function | undefined;
+
+      const mockPty = {
+        onData: vi.fn((callback: Function) => {
+          dataCallback = callback;
+        }),
+        onExit: vi.fn((callback: Function) => {
+          exitCallback = callback;
+        }),
+        write: vi.fn(),
+        kill: vi.fn(),
+      };
+      vi.mocked(pty.spawn).mockReturnValue(mockPty as any);
+
+      const promise = ptyService.fetchUsageData();
+
+      // Simulate seeing usage data
+      dataCallback!(mockOutput);
+
+      // Advance time to trigger escape key sending (impl uses 3000ms delay)
+      vi.advanceTimersByTime(3100);
+
+      expect(mockPty.write).toHaveBeenCalledWith('\x1b');
+
+      // Complete the promise to avoid unhandled rejection
+      exitCallback!({ exitCode: 0 });
+      await promise;
+
+      vi.useRealTimers();
+    });
+
+    it('should handle authentication errors', async () => {
+      const ptyService = new ClaudeUsageService();
+      let dataCallback: Function | undefined;
+      let exitCallback: Function | undefined;
+
+      const mockPty = {
+        onData: vi.fn((callback: Function) => {
+          dataCallback = callback;
+        }),
+        onExit: vi.fn((callback: Function) => {
+          exitCallback = callback;
+        }),
+        write: vi.fn(),
+        kill: vi.fn(),
+      };
+      vi.mocked(pty.spawn).mockReturnValue(mockPty as any);
+
+      const promise = ptyService.fetchUsageData();
+
+      // Send data containing the authentication error pattern the service looks for
+      dataCallback!('"type":"authentication_error"');
+
+      // Trigger the exit handler which checks for auth errors
+      exitCallback!({ exitCode: 1 });
+
+      await expect(promise).rejects.toThrow(
+        "Claude CLI authentication issue. Please run 'claude logout' and then 'claude login' in your terminal to refresh permissions."
+      );
+    });
+
+    it('should handle timeout with no data', async () => {
+      vi.useFakeTimers();
+      const ptyService = new ClaudeUsageService();
+
+      const mockPty = {
+        onData: vi.fn(),
+        onExit: vi.fn(),
+        write: vi.fn(),
+        kill: vi.fn(),
+        killed: false,
+      };
+      vi.mocked(pty.spawn).mockReturnValue(mockPty as any);
+
+      const promise = ptyService.fetchUsageData();
+
+      // Advance time past timeout (45 seconds)
+      vi.advanceTimersByTime(46000);
+
+      await expect(promise).rejects.toThrow(
+        'The Claude CLI took too long to respond. This can happen if the CLI is waiting for a trust prompt or is otherwise busy.'
+      );
+      expect(mockPty.kill).toHaveBeenCalled();
+
+      vi.useRealTimers();
+    });
+
+    it('should return data on timeout if data was captured', async () => {
+      vi.useFakeTimers();
+      const ptyService = new ClaudeUsageService();
+
+      let dataCallback: Function | undefined;
+
+      const mockPty = {
+        onData: vi.fn((callback: Function) => {
+          dataCallback = callback;
+        }),
+        onExit: vi.fn(),
+        write: vi.fn(),
+        kill: vi.fn(),
+        killed: false,
+      };
+      vi.mocked(pty.spawn).mockReturnValue(mockPty as any);
+
+      const promise = ptyService.fetchUsageData();
+
+      // Simulate receiving usage data
+      dataCallback!('Current session\n65% left\nResets in 2h');
+
+      // Advance time past timeout (45 seconds)
+      vi.advanceTimersByTime(46000);
+
+      // Should resolve with data instead of rejecting
+      const result = await promise;
+      expect(result.sessionPercentage).toBe(35); // 100 - 65
+      expect(mockPty.kill).toHaveBeenCalled();
+
+      vi.useRealTimers();
+    });
+
+    it('should send SIGTERM after ESC if process does not exit', async () => {
+      vi.useFakeTimers();
+      // Mock Unix platform to test SIGTERM behavior (Windows calls kill() without signal)
+      vi.mocked(os.platform).mockReturnValue('darwin');
+      const ptyService = new ClaudeUsageService();
+
+      let dataCallback: Function | undefined;
+
+      const mockPty = {
+        onData: vi.fn((callback: Function) => {
+          dataCallback = callback;
+        }),
+        onExit: vi.fn(),
+        write: vi.fn(),
+        kill: vi.fn(),
+        killed: false,
+      };
+      vi.mocked(pty.spawn).mockReturnValue(mockPty as any);
+
+      ptyService.fetchUsageData();
+
+      // Simulate seeing usage data
+      dataCallback!('Current session\n65% left');
+
+      // Advance 3s to trigger ESC (impl uses 3000ms delay)
+      vi.advanceTimersByTime(3100);
+      expect(mockPty.write).toHaveBeenCalledWith('\x1b');
+
+      // Advance another 2s to trigger SIGTERM fallback
+      vi.advanceTimersByTime(2100);
+      expect(mockPty.kill).toHaveBeenCalledWith('SIGTERM');
+
+      vi.useRealTimers();
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/concurrency-manager.test.ts b/temp_repo/apps/server/tests/unit/services/concurrency-manager.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c7cce4823f05965994a9e1e6338b3fb0d6636752
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/concurrency-manager.test.ts
@@ -0,0 +1,693 @@
+import { describe, it, expect, beforeEach, vi, type Mock } from 'vitest';
+import {
+  ConcurrencyManager,
+  type RunningFeature,
+  type GetCurrentBranchFn,
+} from '@/services/concurrency-manager.js';
+
+describe('ConcurrencyManager', () => {
+  let manager: ConcurrencyManager;
+  let mockGetCurrentBranch: Mock<GetCurrentBranchFn>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Default: primary branch is 'main'
+    mockGetCurrentBranch = vi.fn().mockResolvedValue('main');
+    manager = new ConcurrencyManager(mockGetCurrentBranch);
+  });
+
+  describe('acquire', () => {
+    it('should create new entry with leaseCount: 1 on first acquire', () => {
+      const result = manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      expect(result.featureId).toBe('feature-1');
+      expect(result.projectPath).toBe('/test/project');
+      expect(result.isAutoMode).toBe(true);
+      expect(result.leaseCount).toBe(1);
+      expect(result.worktreePath).toBeNull();
+      expect(result.branchName).toBeNull();
+      expect(result.startTime).toBeDefined();
+      expect(result.abortController).toBeInstanceOf(AbortController);
+    });
+
+    it('should increment leaseCount when allowReuse is true for existing feature', () => {
+      // First acquire
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      // Second acquire with allowReuse
+      const result = manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+        allowReuse: true,
+      });
+
+      expect(result.leaseCount).toBe(2);
+    });
+
+    it('should throw "already running" when allowReuse is false for existing feature', () => {
+      // First acquire
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      // Second acquire without allowReuse
+      expect(() =>
+        manager.acquire({
+          featureId: 'feature-1',
+          projectPath: '/test/project',
+          isAutoMode: true,
+        })
+      ).toThrow('already running');
+    });
+
+    it('should throw "already running" when allowReuse is explicitly false', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      expect(() =>
+        manager.acquire({
+          featureId: 'feature-1',
+          projectPath: '/test/project',
+          isAutoMode: true,
+          allowReuse: false,
+        })
+      ).toThrow('already running');
+    });
+
+    it('should use provided abortController', () => {
+      const customAbortController = new AbortController();
+
+      const result = manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+        abortController: customAbortController,
+      });
+
+      expect(result.abortController).toBe(customAbortController);
+    });
+
+    it('should return the existing entry when allowReuse is true', () => {
+      const first = manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      const second = manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+        allowReuse: true,
+      });
+
+      // Should be the same object reference
+      expect(second).toBe(first);
+    });
+
+    it('should allow multiple nested acquire calls with allowReuse', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+        allowReuse: true,
+      });
+
+      const result = manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+        allowReuse: true,
+      });
+
+      expect(result.leaseCount).toBe(3);
+    });
+  });
+
+  describe('release', () => {
+    it('should decrement leaseCount on release', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+        allowReuse: true,
+      });
+
+      manager.release('feature-1');
+
+      const entry = manager.getRunningFeature('feature-1');
+      expect(entry?.leaseCount).toBe(1);
+    });
+
+    it('should delete entry when leaseCount reaches 0', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      manager.release('feature-1');
+
+      expect(manager.isRunning('feature-1')).toBe(false);
+      expect(manager.getRunningFeature('feature-1')).toBeUndefined();
+    });
+
+    it('should delete entry immediately when force is true regardless of leaseCount', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+        allowReuse: true,
+      });
+
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+        allowReuse: true,
+      });
+
+      // leaseCount is 3, but force should still delete
+      manager.release('feature-1', { force: true });
+
+      expect(manager.isRunning('feature-1')).toBe(false);
+    });
+
+    it('should do nothing when releasing non-existent feature', () => {
+      // Should not throw
+      manager.release('non-existent-feature');
+      manager.release('non-existent-feature', { force: true });
+    });
+
+    it('should only delete entry after all leases are released', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+        allowReuse: true,
+      });
+
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+        allowReuse: true,
+      });
+
+      // leaseCount is 3
+      manager.release('feature-1');
+      expect(manager.isRunning('feature-1')).toBe(true);
+
+      manager.release('feature-1');
+      expect(manager.isRunning('feature-1')).toBe(true);
+
+      manager.release('feature-1');
+      expect(manager.isRunning('feature-1')).toBe(false);
+    });
+  });
+
+  describe('isRunning', () => {
+    it('should return false when feature is not running', () => {
+      expect(manager.isRunning('feature-1')).toBe(false);
+    });
+
+    it('should return true when feature is running', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      expect(manager.isRunning('feature-1')).toBe(true);
+    });
+
+    it('should return false after feature is released', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      manager.release('feature-1');
+
+      expect(manager.isRunning('feature-1')).toBe(false);
+    });
+  });
+
+  describe('getRunningFeature', () => {
+    it('should return undefined for non-existent feature', () => {
+      expect(manager.getRunningFeature('feature-1')).toBeUndefined();
+    });
+
+    it('should return the RunningFeature entry', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      const entry = manager.getRunningFeature('feature-1');
+      expect(entry).toBeDefined();
+      expect(entry?.featureId).toBe('feature-1');
+      expect(entry?.projectPath).toBe('/test/project');
+    });
+  });
+
+  describe('getRunningCount (project-level)', () => {
+    it('should return 0 when no features are running', () => {
+      expect(manager.getRunningCount('/test/project')).toBe(0);
+    });
+
+    it('should count features for specific project', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      manager.acquire({
+        featureId: 'feature-2',
+        projectPath: '/test/project',
+        isAutoMode: false,
+      });
+
+      expect(manager.getRunningCount('/test/project')).toBe(2);
+    });
+
+    it('should only count features for the specified project', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/project-a',
+        isAutoMode: true,
+      });
+
+      manager.acquire({
+        featureId: 'feature-2',
+        projectPath: '/project-b',
+        isAutoMode: true,
+      });
+
+      manager.acquire({
+        featureId: 'feature-3',
+        projectPath: '/project-a',
+        isAutoMode: false,
+      });
+
+      expect(manager.getRunningCount('/project-a')).toBe(2);
+      expect(manager.getRunningCount('/project-b')).toBe(1);
+      expect(manager.getRunningCount('/project-c')).toBe(0);
+    });
+  });
+
+  describe('getRunningCountForWorktree', () => {
+    it('should return 0 when no features are running', async () => {
+      const count = await manager.getRunningCountForWorktree('/test/project', null);
+      expect(count).toBe(0);
+    });
+
+    it('should count features with null branchName as main worktree', async () => {
+      const entry = manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+      // entry.branchName is null by default
+
+      const count = await manager.getRunningCountForWorktree('/test/project', null);
+      expect(count).toBe(1);
+    });
+
+    it('should count features matching primary branch as main worktree', async () => {
+      mockGetCurrentBranch.mockResolvedValue('main');
+
+      const entry = manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+      manager.updateRunningFeature('feature-1', { branchName: 'main' });
+
+      const count = await manager.getRunningCountForWorktree('/test/project', null);
+      expect(count).toBe(1);
+    });
+
+    it('should count features with exact branch match for feature worktrees', async () => {
+      const entry = manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+      manager.updateRunningFeature('feature-1', { branchName: 'feature-branch' });
+
+      manager.acquire({
+        featureId: 'feature-2',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+      // feature-2 has null branchName
+
+      const featureBranchCount = await manager.getRunningCountForWorktree(
+        '/test/project',
+        'feature-branch'
+      );
+      expect(featureBranchCount).toBe(1);
+
+      const mainWorktreeCount = await manager.getRunningCountForWorktree('/test/project', null);
+      expect(mainWorktreeCount).toBe(1);
+    });
+
+    it('should respect branch normalization (main is treated as null)', async () => {
+      mockGetCurrentBranch.mockResolvedValue('main');
+
+      // Feature with branchName 'main' should count as main worktree
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+      manager.updateRunningFeature('feature-1', { branchName: 'main' });
+
+      // Feature with branchName null should also count as main worktree
+      manager.acquire({
+        featureId: 'feature-2',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      const mainCount = await manager.getRunningCountForWorktree('/test/project', null);
+      expect(mainCount).toBe(2);
+    });
+
+    it('should count only auto-mode features when autoModeOnly is true', async () => {
+      // Auto-mode feature on main worktree
+      manager.acquire({
+        featureId: 'feature-auto',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      // Manual feature on main worktree
+      manager.acquire({
+        featureId: 'feature-manual',
+        projectPath: '/test/project',
+        isAutoMode: false,
+      });
+
+      // Without autoModeOnly: counts both
+      const totalCount = await manager.getRunningCountForWorktree('/test/project', null);
+      expect(totalCount).toBe(2);
+
+      // With autoModeOnly: counts only auto-mode features
+      const autoModeCount = await manager.getRunningCountForWorktree('/test/project', null, {
+        autoModeOnly: true,
+      });
+      expect(autoModeCount).toBe(1);
+    });
+
+    it('should count only auto-mode features on specific worktree when autoModeOnly is true', async () => {
+      // Auto-mode feature on feature branch
+      manager.acquire({
+        featureId: 'feature-auto',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+      manager.updateRunningFeature('feature-auto', { branchName: 'feature-branch' });
+
+      // Manual feature on same feature branch
+      manager.acquire({
+        featureId: 'feature-manual',
+        projectPath: '/test/project',
+        isAutoMode: false,
+      });
+      manager.updateRunningFeature('feature-manual', { branchName: 'feature-branch' });
+
+      // Another auto-mode feature on different branch (should not be counted)
+      manager.acquire({
+        featureId: 'feature-other',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+      manager.updateRunningFeature('feature-other', { branchName: 'other-branch' });
+
+      const autoModeCount = await manager.getRunningCountForWorktree(
+        '/test/project',
+        'feature-branch',
+        { autoModeOnly: true }
+      );
+      expect(autoModeCount).toBe(1);
+
+      const totalCount = await manager.getRunningCountForWorktree(
+        '/test/project',
+        'feature-branch'
+      );
+      expect(totalCount).toBe(2);
+    });
+
+    it('should return 0 when autoModeOnly is true and only manual features are running', async () => {
+      manager.acquire({
+        featureId: 'feature-manual-1',
+        projectPath: '/test/project',
+        isAutoMode: false,
+      });
+
+      manager.acquire({
+        featureId: 'feature-manual-2',
+        projectPath: '/test/project',
+        isAutoMode: false,
+      });
+
+      const autoModeCount = await manager.getRunningCountForWorktree('/test/project', null, {
+        autoModeOnly: true,
+      });
+      expect(autoModeCount).toBe(0);
+    });
+
+    it('should filter by both projectPath and branchName', async () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/project-a',
+        isAutoMode: true,
+      });
+      manager.updateRunningFeature('feature-1', { branchName: 'feature-x' });
+
+      manager.acquire({
+        featureId: 'feature-2',
+        projectPath: '/project-b',
+        isAutoMode: true,
+      });
+      manager.updateRunningFeature('feature-2', { branchName: 'feature-x' });
+
+      const countA = await manager.getRunningCountForWorktree('/project-a', 'feature-x');
+      const countB = await manager.getRunningCountForWorktree('/project-b', 'feature-x');
+
+      expect(countA).toBe(1);
+      expect(countB).toBe(1);
+    });
+  });
+
+  describe('getAllRunning', () => {
+    it('should return empty array when no features are running', () => {
+      expect(manager.getAllRunning()).toEqual([]);
+    });
+
+    it('should return array with all running features', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/project-a',
+        isAutoMode: true,
+      });
+
+      manager.acquire({
+        featureId: 'feature-2',
+        projectPath: '/project-b',
+        isAutoMode: false,
+      });
+
+      const running = manager.getAllRunning();
+      expect(running).toHaveLength(2);
+      expect(running.map((r) => r.featureId)).toContain('feature-1');
+      expect(running.map((r) => r.featureId)).toContain('feature-2');
+    });
+
+    it('should include feature metadata', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/project-a',
+        isAutoMode: true,
+      });
+      manager.updateRunningFeature('feature-1', { model: 'claude-sonnet-4', provider: 'claude' });
+
+      const running = manager.getAllRunning();
+      expect(running[0].model).toBe('claude-sonnet-4');
+      expect(running[0].provider).toBe('claude');
+    });
+  });
+
+  describe('updateRunningFeature', () => {
+    it('should update worktreePath and branchName', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      manager.updateRunningFeature('feature-1', {
+        worktreePath: '/worktrees/feature-1',
+        branchName: 'feature-1-branch',
+      });
+
+      const entry = manager.getRunningFeature('feature-1');
+      expect(entry?.worktreePath).toBe('/worktrees/feature-1');
+      expect(entry?.branchName).toBe('feature-1-branch');
+    });
+
+    it('should update model and provider', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      manager.updateRunningFeature('feature-1', {
+        model: 'claude-opus-4-5-20251101',
+        provider: 'claude',
+      });
+
+      const entry = manager.getRunningFeature('feature-1');
+      expect(entry?.model).toBe('claude-opus-4-5-20251101');
+      expect(entry?.provider).toBe('claude');
+    });
+
+    it('should do nothing for non-existent feature', () => {
+      // Should not throw
+      manager.updateRunningFeature('non-existent', { model: 'test' });
+    });
+
+    it('should preserve other properties when updating partial fields', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      const original = manager.getRunningFeature('feature-1');
+      const originalStartTime = original?.startTime;
+
+      manager.updateRunningFeature('feature-1', { model: 'claude-sonnet-4' });
+
+      const updated = manager.getRunningFeature('feature-1');
+      expect(updated?.startTime).toBe(originalStartTime);
+      expect(updated?.projectPath).toBe('/test/project');
+      expect(updated?.isAutoMode).toBe(true);
+      expect(updated?.model).toBe('claude-sonnet-4');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle multiple features for same project', () => {
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      manager.acquire({
+        featureId: 'feature-2',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      manager.acquire({
+        featureId: 'feature-3',
+        projectPath: '/test/project',
+        isAutoMode: false,
+      });
+
+      expect(manager.getRunningCount('/test/project')).toBe(3);
+      expect(manager.isRunning('feature-1')).toBe(true);
+      expect(manager.isRunning('feature-2')).toBe(true);
+      expect(manager.isRunning('feature-3')).toBe(true);
+    });
+
+    it('should handle features across different worktrees', async () => {
+      // Main worktree feature
+      manager.acquire({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+
+      // Worktree A feature
+      manager.acquire({
+        featureId: 'feature-2',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+      manager.updateRunningFeature('feature-2', {
+        worktreePath: '/worktrees/a',
+        branchName: 'branch-a',
+      });
+
+      // Worktree B feature
+      manager.acquire({
+        featureId: 'feature-3',
+        projectPath: '/test/project',
+        isAutoMode: true,
+      });
+      manager.updateRunningFeature('feature-3', {
+        worktreePath: '/worktrees/b',
+        branchName: 'branch-b',
+      });
+
+      expect(await manager.getRunningCountForWorktree('/test/project', null)).toBe(1);
+      expect(await manager.getRunningCountForWorktree('/test/project', 'branch-a')).toBe(1);
+      expect(await manager.getRunningCountForWorktree('/test/project', 'branch-b')).toBe(1);
+      expect(manager.getRunningCount('/test/project')).toBe(3);
+    });
+
+    it('should return 0 counts and empty arrays for empty state', () => {
+      expect(manager.getRunningCount('/any/project')).toBe(0);
+      expect(manager.getAllRunning()).toEqual([]);
+      expect(manager.isRunning('any-feature')).toBe(false);
+      expect(manager.getRunningFeature('any-feature')).toBeUndefined();
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/cursor-config-service.test.ts b/temp_repo/apps/server/tests/unit/services/cursor-config-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..50f6b86e408007b119b47785b49a57df91112ce9
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/cursor-config-service.test.ts
@@ -0,0 +1,359 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import * as fs from 'fs/promises';
+import * as os from 'os';
+import * as path from 'path';
+import {
+  getGlobalConfigPath,
+  getProjectConfigPath,
+  readGlobalConfig,
+  writeGlobalConfig,
+  readProjectConfig,
+  writeProjectConfig,
+  deleteProjectConfig,
+  getEffectivePermissions,
+  applyProfileToProject,
+  applyProfileGlobally,
+  detectProfile,
+  generateExampleConfig,
+  hasProjectConfig,
+  getAvailableProfiles,
+} from '@/services/cursor-config-service.js';
+
+vi.mock('fs/promises');
+vi.mock('os');
+
+describe('cursor-config-service.ts', () => {
+  const mockHomedir = path.join(path.sep, 'home', 'user');
+  const testProjectPath = path.join(path.sep, 'tmp', 'test-project');
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(os.homedir).mockReturnValue(mockHomedir);
+    delete process.env.XDG_CONFIG_HOME;
+    delete process.env.CURSOR_CONFIG_DIR;
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  describe('getGlobalConfigPath', () => {
+    it('should return default path using homedir', () => {
+      const result = getGlobalConfigPath();
+      expect(result).toContain('.cursor');
+      expect(result).toContain('cli-config.json');
+    });
+
+    it('should use CURSOR_CONFIG_DIR if set', () => {
+      const customDir = path.join(path.sep, 'custom', 'cursor', 'config');
+      process.env.CURSOR_CONFIG_DIR = customDir;
+
+      const result = getGlobalConfigPath();
+
+      expect(result).toContain('custom');
+      expect(result).toContain('cli-config.json');
+    });
+  });
+
+  describe('getProjectConfigPath', () => {
+    it('should return project config path', () => {
+      const result = getProjectConfigPath(testProjectPath);
+      expect(result).toContain('.cursor');
+      expect(result).toContain('cli.json');
+    });
+  });
+
+  describe('readGlobalConfig', () => {
+    it('should read and parse global config', async () => {
+      const mockConfig = { version: 1, permissions: { allow: ['*'], deny: [] } };
+      vi.mocked(fs.readFile).mockResolvedValue(JSON.stringify(mockConfig));
+
+      const result = await readGlobalConfig();
+
+      expect(result).toEqual(mockConfig);
+      expect(fs.readFile).toHaveBeenCalledWith(expect.stringContaining('cli-config.json'), 'utf-8');
+    });
+
+    it('should return null if file does not exist', async () => {
+      const error = new Error('ENOENT') as NodeJS.ErrnoException;
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+
+      const result = await readGlobalConfig();
+
+      expect(result).toBeNull();
+    });
+
+    it('should throw on other errors', async () => {
+      const error = new Error('Permission denied') as NodeJS.ErrnoException;
+      error.code = 'EACCES';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+
+      await expect(readGlobalConfig()).rejects.toThrow('Permission denied');
+    });
+  });
+
+  describe('writeGlobalConfig', () => {
+    it('should create directory and write config', async () => {
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      const config = { version: 1, permissions: { allow: ['*'], deny: [] } };
+      await writeGlobalConfig(config);
+
+      expect(fs.mkdir).toHaveBeenCalledWith(expect.stringContaining('.cursor'), {
+        recursive: true,
+      });
+      expect(fs.writeFile).toHaveBeenCalledWith(
+        expect.stringContaining('cli-config.json'),
+        expect.any(String)
+      );
+    });
+  });
+
+  describe('readProjectConfig', () => {
+    it('should read and parse project config', async () => {
+      const mockConfig = { version: 1, permissions: { allow: ['read'], deny: ['write'] } };
+      vi.mocked(fs.readFile).mockResolvedValue(JSON.stringify(mockConfig));
+
+      const result = await readProjectConfig(testProjectPath);
+
+      expect(result).toEqual(mockConfig);
+      expect(fs.readFile).toHaveBeenCalledWith(expect.stringContaining('cli.json'), 'utf-8');
+    });
+
+    it('should return null if file does not exist', async () => {
+      const error = new Error('ENOENT') as NodeJS.ErrnoException;
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+
+      const result = await readProjectConfig(testProjectPath);
+
+      expect(result).toBeNull();
+    });
+
+    it('should throw on other errors', async () => {
+      const error = new Error('Read error') as NodeJS.ErrnoException;
+      error.code = 'EIO';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+
+      await expect(readProjectConfig(testProjectPath)).rejects.toThrow('Read error');
+    });
+  });
+
+  describe('writeProjectConfig', () => {
+    it('should write project config with only permissions', async () => {
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      const config = { version: 1, permissions: { allow: ['read'], deny: ['write'] } };
+      await writeProjectConfig(testProjectPath, config);
+
+      expect(fs.mkdir).toHaveBeenCalledWith(expect.stringContaining('.cursor'), {
+        recursive: true,
+      });
+
+      // Check that only permissions is written (no version)
+      const writtenContent = vi.mocked(fs.writeFile).mock.calls[0][1] as string;
+      const parsed = JSON.parse(writtenContent);
+      expect(parsed).toEqual({ permissions: { allow: ['read'], deny: ['write'] } });
+      expect(parsed.version).toBeUndefined();
+    });
+  });
+
+  describe('deleteProjectConfig', () => {
+    it('should delete project config', async () => {
+      vi.mocked(fs.unlink).mockResolvedValue(undefined);
+
+      await deleteProjectConfig(testProjectPath);
+
+      expect(fs.unlink).toHaveBeenCalledWith(expect.stringContaining('cli.json'));
+    });
+
+    it('should not throw if file does not exist', async () => {
+      const error = new Error('ENOENT') as NodeJS.ErrnoException;
+      error.code = 'ENOENT';
+      vi.mocked(fs.unlink).mockRejectedValue(error);
+
+      await expect(deleteProjectConfig(testProjectPath)).resolves.not.toThrow();
+    });
+
+    it('should throw on other errors', async () => {
+      const error = new Error('Permission denied') as NodeJS.ErrnoException;
+      error.code = 'EACCES';
+      vi.mocked(fs.unlink).mockRejectedValue(error);
+
+      await expect(deleteProjectConfig(testProjectPath)).rejects.toThrow('Permission denied');
+    });
+  });
+
+  describe('getEffectivePermissions', () => {
+    it('should return project permissions if available', async () => {
+      const projectPerms = { allow: ['read'], deny: ['write'] };
+      vi.mocked(fs.readFile).mockResolvedValueOnce(JSON.stringify({ permissions: projectPerms }));
+
+      const result = await getEffectivePermissions(testProjectPath);
+
+      expect(result).toEqual(projectPerms);
+    });
+
+    it('should fall back to global permissions', async () => {
+      const globalPerms = { allow: ['*'], deny: [] };
+      const error = new Error('ENOENT') as NodeJS.ErrnoException;
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile)
+        .mockRejectedValueOnce(error) // Project config not found
+        .mockResolvedValueOnce(JSON.stringify({ permissions: globalPerms }));
+
+      const result = await getEffectivePermissions(testProjectPath);
+
+      expect(result).toEqual(globalPerms);
+    });
+
+    it('should return null if no config exists', async () => {
+      const error = new Error('ENOENT') as NodeJS.ErrnoException;
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+
+      const result = await getEffectivePermissions(testProjectPath);
+
+      expect(result).toBeNull();
+    });
+
+    it('should return global permissions if no project path provided', async () => {
+      const globalPerms = { allow: ['*'], deny: [] };
+      vi.mocked(fs.readFile).mockResolvedValue(JSON.stringify({ permissions: globalPerms }));
+
+      const result = await getEffectivePermissions();
+
+      expect(result).toEqual(globalPerms);
+    });
+  });
+
+  describe('applyProfileToProject', () => {
+    it('should write development profile to project', async () => {
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      await applyProfileToProject(testProjectPath, 'development');
+
+      expect(fs.writeFile).toHaveBeenCalled();
+      const writtenContent = vi.mocked(fs.writeFile).mock.calls[0][1] as string;
+      const parsed = JSON.parse(writtenContent);
+      expect(parsed.permissions).toBeDefined();
+    });
+
+    it('should throw on unknown profile', async () => {
+      await expect(applyProfileToProject(testProjectPath, 'unknown' as any)).rejects.toThrow(
+        'Unknown permission profile: unknown'
+      );
+    });
+  });
+
+  describe('applyProfileGlobally', () => {
+    it('should write profile to global config', async () => {
+      const error = new Error('ENOENT') as NodeJS.ErrnoException;
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error); // No existing config
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      await applyProfileGlobally('strict');
+
+      expect(fs.writeFile).toHaveBeenCalled();
+      const writtenContent = vi.mocked(fs.writeFile).mock.calls[0][1] as string;
+      const parsed = JSON.parse(writtenContent);
+      expect(parsed.version).toBe(1);
+      expect(parsed.permissions).toBeDefined();
+    });
+
+    it('should preserve existing settings', async () => {
+      const existingConfig = { version: 1, someOtherSetting: 'value' };
+      vi.mocked(fs.readFile).mockResolvedValue(JSON.stringify(existingConfig));
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      await applyProfileGlobally('development');
+
+      const writtenContent = vi.mocked(fs.writeFile).mock.calls[0][1] as string;
+      const parsed = JSON.parse(writtenContent);
+      expect(parsed.someOtherSetting).toBe('value');
+    });
+
+    it('should throw on unknown profile', async () => {
+      await expect(applyProfileGlobally('unknown' as any)).rejects.toThrow(
+        'Unknown permission profile: unknown'
+      );
+    });
+  });
+
+  describe('detectProfile', () => {
+    it('should return null for null permissions', () => {
+      expect(detectProfile(null)).toBeNull();
+    });
+
+    it('should return custom for non-matching permissions', () => {
+      const customPerms = { allow: ['some-custom'], deny: ['other-custom'] };
+      const result = detectProfile(customPerms);
+      expect(result).toBe('custom');
+    });
+
+    it('should detect matching profile', () => {
+      // Get a profile's permissions and verify detection works
+      const profiles = getAvailableProfiles();
+      if (profiles.length > 0) {
+        const profile = profiles[0];
+        const result = detectProfile(profile.permissions);
+        expect(result).toBe(profile.id);
+      }
+    });
+  });
+
+  describe('generateExampleConfig', () => {
+    it('should generate development profile config by default', () => {
+      const config = generateExampleConfig();
+      const parsed = JSON.parse(config);
+
+      expect(parsed.version).toBe(1);
+      expect(parsed.permissions).toBeDefined();
+    });
+
+    it('should generate specified profile config', () => {
+      const config = generateExampleConfig('strict');
+      const parsed = JSON.parse(config);
+
+      expect(parsed.version).toBe(1);
+      expect(parsed.permissions).toBeDefined();
+      expect(parsed.permissions.deny).toBeDefined();
+    });
+  });
+
+  describe('hasProjectConfig', () => {
+    it('should return true if config exists', async () => {
+      vi.mocked(fs.access).mockResolvedValue(undefined);
+
+      const result = await hasProjectConfig(testProjectPath);
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false if config does not exist', async () => {
+      vi.mocked(fs.access).mockRejectedValue(new Error('ENOENT'));
+
+      const result = await hasProjectConfig(testProjectPath);
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('getAvailableProfiles', () => {
+    it('should return all available profiles', () => {
+      const profiles = getAvailableProfiles();
+
+      expect(Array.isArray(profiles)).toBe(true);
+      expect(profiles.length).toBeGreaterThan(0);
+      expect(profiles.some((p) => p.id === 'strict')).toBe(true);
+      expect(profiles.some((p) => p.id === 'development')).toBe(true);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/dev-server-event-types.test.ts b/temp_repo/apps/server/tests/unit/services/dev-server-event-types.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bf4dcbfa9917b3fd78740024381cc77aeadac78
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/dev-server-event-types.test.ts
@@ -0,0 +1,115 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { EventEmitter } from 'events';
+import path from 'path';
+import os from 'os';
+import fs from 'fs/promises';
+import { spawn } from 'child_process';
+
+// Mock child_process
+vi.mock('child_process', () => ({
+  spawn: vi.fn(),
+  execSync: vi.fn(),
+  execFile: vi.fn(),
+}));
+
+// Mock secure-fs
+vi.mock('@/lib/secure-fs.js', () => ({
+  access: vi.fn(),
+}));
+
+// Mock net
+vi.mock('net', () => ({
+  default: {
+    createServer: vi.fn(),
+  },
+  createServer: vi.fn(),
+}));
+
+import * as secureFs from '@/lib/secure-fs.js';
+import net from 'net';
+
+describe('DevServerService Event Types', () => {
+  let testDataDir: string;
+  let worktreeDir: string;
+  let mockEmitter: EventEmitter;
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    vi.resetModules();
+
+    testDataDir = path.join(os.tmpdir(), `dev-server-events-test-${Date.now()}`);
+    worktreeDir = path.join(os.tmpdir(), `dev-server-worktree-events-test-${Date.now()}`);
+    await fs.mkdir(testDataDir, { recursive: true });
+    await fs.mkdir(worktreeDir, { recursive: true });
+
+    mockEmitter = new EventEmitter();
+
+    vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+    const mockServer = new EventEmitter() as any;
+    mockServer.listen = vi.fn().mockImplementation((port: number, host: string) => {
+      process.nextTick(() => mockServer.emit('listening'));
+    });
+    mockServer.close = vi.fn();
+    vi.mocked(net.createServer).mockReturnValue(mockServer);
+  });
+
+  afterEach(async () => {
+    try {
+      await fs.rm(testDataDir, { recursive: true, force: true });
+      await fs.rm(worktreeDir, { recursive: true, force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  it('should emit all required event types during dev server lifecycle', async () => {
+    const { getDevServerService } = await import('@/services/dev-server-service.js');
+    const service = getDevServerService();
+    await service.initialize(testDataDir, mockEmitter as any);
+
+    const mockProcess = createMockProcess();
+    vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+    const emittedEvents: Record<string, any[]> = {
+      'dev-server:starting': [],
+      'dev-server:started': [],
+      'dev-server:url-detected': [],
+      'dev-server:output': [],
+      'dev-server:stopped': [],
+    };
+
+    Object.keys(emittedEvents).forEach((type) => {
+      mockEmitter.on(type, (payload) => emittedEvents[type].push(payload));
+    });
+
+    // 1. Starting & Started
+    await service.startDevServer(worktreeDir, worktreeDir);
+    expect(emittedEvents['dev-server:starting'].length).toBe(1);
+    expect(emittedEvents['dev-server:started'].length).toBe(1);
+
+    // 2. Output & URL Detected
+    mockProcess.stdout.emit('data', Buffer.from('Local: http://localhost:5173/\n'));
+    // Throttled output needs a bit of time (OUTPUT_THROTTLE_MS is 100ms)
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    expect(emittedEvents['dev-server:output'].length).toBeGreaterThanOrEqual(1);
+    expect(emittedEvents['dev-server:url-detected'].length).toBe(1);
+    expect(emittedEvents['dev-server:url-detected'][0].url).toBe('http://localhost:5173/');
+
+    // 3. Stopped
+    await service.stopDevServer(worktreeDir);
+    expect(emittedEvents['dev-server:stopped'].length).toBe(1);
+  });
+});
+
+// Helper to create a mock child process
+function createMockProcess() {
+  const mockProcess = new EventEmitter() as any;
+  mockProcess.stdout = new EventEmitter();
+  mockProcess.stderr = new EventEmitter();
+  mockProcess.kill = vi.fn();
+  mockProcess.killed = false;
+  mockProcess.pid = 12345;
+  mockProcess.unref = vi.fn();
+  return mockProcess;
+}
diff --git a/temp_repo/apps/server/tests/unit/services/dev-server-persistence.test.ts b/temp_repo/apps/server/tests/unit/services/dev-server-persistence.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..24dca037fa668acc9c48e6c60ba61979b3056182
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/dev-server-persistence.test.ts
@@ -0,0 +1,240 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { EventEmitter } from 'events';
+import path from 'path';
+import os from 'os';
+import fs from 'fs/promises';
+import { spawn, execSync } from 'child_process';
+
+// Mock child_process
+vi.mock('child_process', () => ({
+  spawn: vi.fn(),
+  execSync: vi.fn(),
+  execFile: vi.fn(),
+}));
+
+// Mock secure-fs
+vi.mock('@/lib/secure-fs.js', () => ({
+  access: vi.fn(),
+}));
+
+// Mock net
+vi.mock('net', () => ({
+  default: {
+    createServer: vi.fn(),
+  },
+  createServer: vi.fn(),
+}));
+
+import * as secureFs from '@/lib/secure-fs.js';
+import net from 'net';
+
+describe('DevServerService Persistence & Sync', () => {
+  let testDataDir: string;
+  let worktreeDir: string;
+  let mockEmitter: EventEmitter;
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    vi.resetModules();
+
+    testDataDir = path.join(os.tmpdir(), `dev-server-persistence-test-${Date.now()}`);
+    worktreeDir = path.join(os.tmpdir(), `dev-server-worktree-test-${Date.now()}`);
+    await fs.mkdir(testDataDir, { recursive: true });
+    await fs.mkdir(worktreeDir, { recursive: true });
+
+    mockEmitter = new EventEmitter();
+
+    // Default mock for secureFs.access - return resolved (file exists)
+    vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+    // Default mock for net.createServer - port available
+    const mockServer = new EventEmitter() as any;
+    mockServer.listen = vi.fn().mockImplementation((port: number, host: string) => {
+      process.nextTick(() => mockServer.emit('listening'));
+    });
+    mockServer.close = vi.fn();
+    vi.mocked(net.createServer).mockReturnValue(mockServer);
+
+    // Default mock for execSync - no process on port
+    vi.mocked(execSync).mockImplementation(() => {
+      throw new Error('No process found');
+    });
+  });
+
+  afterEach(async () => {
+    try {
+      await fs.rm(testDataDir, { recursive: true, force: true });
+      await fs.rm(worktreeDir, { recursive: true, force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  it('should emit dev-server:starting when startDevServer is called', async () => {
+    const { getDevServerService } = await import('@/services/dev-server-service.js');
+    const service = getDevServerService();
+    await service.initialize(testDataDir, mockEmitter as any);
+
+    const mockProcess = createMockProcess();
+    vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+    const events: any[] = [];
+    mockEmitter.on('dev-server:starting', (payload) => events.push(payload));
+
+    await service.startDevServer(worktreeDir, worktreeDir);
+
+    expect(events.length).toBe(1);
+    expect(events[0].worktreePath).toBe(worktreeDir);
+  });
+
+  it('should prevent concurrent starts for the same worktree', async () => {
+    const { getDevServerService } = await import('@/services/dev-server-service.js');
+    const service = getDevServerService();
+    await service.initialize(testDataDir, mockEmitter as any);
+
+    // Delay spawn to simulate long starting time
+    vi.mocked(spawn).mockImplementation(() => {
+      const p = createMockProcess();
+      // Don't return immediately, simulate some work
+      return p as any;
+    });
+
+    // Start first one (don't await yet if we want to test concurrency)
+    const promise1 = service.startDevServer(worktreeDir, worktreeDir);
+
+    // Try to start second one immediately
+    const result2 = await service.startDevServer(worktreeDir, worktreeDir);
+
+    expect(result2.success).toBe(false);
+    expect(result2.error).toContain('already starting');
+
+    await promise1;
+  });
+
+  it('should persist state to dev-servers.json when started', async () => {
+    const { getDevServerService } = await import('@/services/dev-server-service.js');
+    const service = getDevServerService();
+    await service.initialize(testDataDir, mockEmitter as any);
+
+    const mockProcess = createMockProcess();
+    vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+    await service.startDevServer(worktreeDir, worktreeDir);
+
+    const statePath = path.join(testDataDir, 'dev-servers.json');
+    const exists = await fs
+      .access(statePath)
+      .then(() => true)
+      .catch(() => false);
+    expect(exists).toBe(true);
+
+    const content = await fs.readFile(statePath, 'utf-8');
+    const state = JSON.parse(content);
+    expect(state.length).toBe(1);
+    expect(state[0].worktreePath).toBe(worktreeDir);
+  });
+
+  it('should load state from dev-servers.json on initialize', async () => {
+    // 1. Create a fake state file
+    const persistedInfo = [
+      {
+        worktreePath: worktreeDir,
+        allocatedPort: 3005,
+        port: 3005,
+        url: 'http://localhost:3005',
+        startedAt: new Date().toISOString(),
+        urlDetected: true,
+        customCommand: 'npm run dev',
+      },
+    ];
+    await fs.writeFile(path.join(testDataDir, 'dev-servers.json'), JSON.stringify(persistedInfo));
+
+    // 2. Mock port as IN USE (so it re-attaches)
+    const mockServer = new EventEmitter() as any;
+    mockServer.listen = vi.fn().mockImplementation((port: number, host: string) => {
+      // Fail to listen = port in use
+      process.nextTick(() => mockServer.emit('error', new Error('EADDRINUSE')));
+    });
+    vi.mocked(net.createServer).mockReturnValue(mockServer);
+
+    const { getDevServerService } = await import('@/services/dev-server-service.js');
+    const service = getDevServerService();
+    await service.initialize(testDataDir, mockEmitter as any);
+
+    expect(service.isRunning(worktreeDir)).toBe(true);
+    const info = service.getServerInfo(worktreeDir);
+    expect(info?.port).toBe(3005);
+  });
+
+  it('should prune stale servers from state on initialize if port is available', async () => {
+    // 1. Create a fake state file
+    const persistedInfo = [
+      {
+        worktreePath: worktreeDir,
+        allocatedPort: 3005,
+        port: 3005,
+        url: 'http://localhost:3005',
+        startedAt: new Date().toISOString(),
+        urlDetected: true,
+      },
+    ];
+    await fs.writeFile(path.join(testDataDir, 'dev-servers.json'), JSON.stringify(persistedInfo));
+
+    // 2. Mock port as AVAILABLE (so it prunes)
+    const mockServer = new EventEmitter() as any;
+    mockServer.listen = vi.fn().mockImplementation((port: number, host: string) => {
+      process.nextTick(() => mockServer.emit('listening'));
+    });
+    mockServer.close = vi.fn();
+    vi.mocked(net.createServer).mockReturnValue(mockServer);
+
+    const { getDevServerService } = await import('@/services/dev-server-service.js');
+    const service = getDevServerService();
+    await service.initialize(testDataDir, mockEmitter as any);
+
+    expect(service.isRunning(worktreeDir)).toBe(false);
+
+    // Give it a moment to complete the pruning saveState
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    // Check if file was updated
+    const content = await fs.readFile(path.join(testDataDir, 'dev-servers.json'), 'utf-8');
+    const state = JSON.parse(content);
+    expect(state.length).toBe(0);
+  });
+
+  it('should update persisted state when URL is detected', async () => {
+    const { getDevServerService } = await import('@/services/dev-server-service.js');
+    const service = getDevServerService();
+    await service.initialize(testDataDir, mockEmitter as any);
+
+    const mockProcess = createMockProcess();
+    vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+    await service.startDevServer(worktreeDir, worktreeDir);
+
+    // Simulate output with URL
+    mockProcess.stdout.emit('data', Buffer.from('Local: http://localhost:5555/\n'));
+
+    // Give it a moment to process and save (needs to wait for saveQueue)
+    await new Promise((resolve) => setTimeout(resolve, 300));
+
+    const content = await fs.readFile(path.join(testDataDir, 'dev-servers.json'), 'utf-8');
+    const state = JSON.parse(content);
+    expect(state[0].url).toBe('http://localhost:5555/');
+    expect(state[0].port).toBe(5555);
+    expect(state[0].urlDetected).toBe(true);
+  });
+});
+
+// Helper to create a mock child process
+function createMockProcess() {
+  const mockProcess = new EventEmitter() as any;
+  mockProcess.stdout = new EventEmitter();
+  mockProcess.stderr = new EventEmitter();
+  mockProcess.kill = vi.fn();
+  mockProcess.killed = false;
+  mockProcess.pid = 12345;
+  mockProcess.unref = vi.fn();
+  return mockProcess;
+}
diff --git a/temp_repo/apps/server/tests/unit/services/dev-server-service.test.ts b/temp_repo/apps/server/tests/unit/services/dev-server-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3e3164508ac212707dc8dac300a2268b3a1861da
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/dev-server-service.test.ts
@@ -0,0 +1,900 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { EventEmitter } from 'events';
+import path from 'path';
+import os from 'os';
+import fs from 'fs/promises';
+
+// Mock child_process
+vi.mock('child_process', () => ({
+  spawn: vi.fn(),
+  execSync: vi.fn(),
+  execFile: vi.fn(),
+}));
+
+// Mock secure-fs
+vi.mock('@/lib/secure-fs.js', () => ({
+  access: vi.fn(),
+}));
+
+// Mock net
+vi.mock('net', () => ({
+  default: {
+    createServer: vi.fn(),
+  },
+  createServer: vi.fn(),
+}));
+
+import { spawn, execSync } from 'child_process';
+import * as secureFs from '@/lib/secure-fs.js';
+import net from 'net';
+
+describe('dev-server-service.ts', () => {
+  let testDir: string;
+  let originalHostname: string | undefined;
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    vi.resetModules();
+
+    // Store and set HOSTNAME for consistent test behavior
+    originalHostname = process.env.HOSTNAME;
+    process.env.HOSTNAME = 'localhost';
+
+    testDir = path.join(os.tmpdir(), `dev-server-test-${Date.now()}`);
+    await fs.mkdir(testDir, { recursive: true });
+
+    // Default mock for secureFs.access - return resolved (file exists)
+    vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+    // Default mock for net.createServer - port available
+    const mockServer = new EventEmitter() as any;
+    mockServer.listen = vi.fn().mockImplementation((port: number, host: string) => {
+      process.nextTick(() => mockServer.emit('listening'));
+    });
+    mockServer.close = vi.fn();
+    vi.mocked(net.createServer).mockReturnValue(mockServer);
+
+    // Default mock for execSync - no process on port
+    vi.mocked(execSync).mockImplementation(() => {
+      throw new Error('No process found');
+    });
+  });
+
+  afterEach(async () => {
+    // Restore original HOSTNAME
+    if (originalHostname === undefined) {
+      delete process.env.HOSTNAME;
+    } else {
+      process.env.HOSTNAME = originalHostname;
+    }
+
+    try {
+      await fs.rm(testDir, { recursive: true, force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe('getDevServerService', () => {
+    it('should return a singleton instance', async () => {
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+
+      const instance1 = getDevServerService();
+      const instance2 = getDevServerService();
+
+      expect(instance1).toBe(instance2);
+    });
+  });
+
+  describe('startDevServer', () => {
+    it('should return error if worktree path does not exist', async () => {
+      vi.mocked(secureFs.access).mockRejectedValueOnce(new Error('File not found'));
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      const result = await service.startDevServer('/project', '/nonexistent/worktree');
+
+      expect(result.success).toBe(false);
+      expect(result.error).toContain('does not exist');
+    });
+
+    it('should return error if no package.json found', async () => {
+      vi.mocked(secureFs.access).mockImplementation(async (p: any) => {
+        if (typeof p === 'string' && p.includes('package.json')) {
+          throw new Error('File not found');
+        }
+        return undefined;
+      });
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      const result = await service.startDevServer(testDir, testDir);
+
+      expect(result.success).toBe(false);
+      expect(result.error).toContain('No package.json found');
+    });
+
+    it('should detect npm as package manager with package-lock.json', async () => {
+      vi.mocked(secureFs.access).mockImplementation(async (p: any) => {
+        const pathStr = typeof p === 'string' ? p : '';
+        if (pathStr.includes('bun.lockb')) throw new Error('Not found');
+        if (pathStr.includes('pnpm-lock.yaml')) throw new Error('Not found');
+        if (pathStr.includes('yarn.lock')) throw new Error('Not found');
+        if (pathStr.includes('package-lock.json')) return undefined;
+        if (pathStr.includes('package.json')) return undefined;
+        return undefined;
+      });
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      expect(spawn).toHaveBeenCalledWith('npm', ['run', 'dev'], expect.any(Object));
+    });
+
+    it('should detect yarn as package manager with yarn.lock', async () => {
+      vi.mocked(secureFs.access).mockImplementation(async (p: any) => {
+        const pathStr = typeof p === 'string' ? p : '';
+        if (pathStr.includes('bun.lockb')) throw new Error('Not found');
+        if (pathStr.includes('pnpm-lock.yaml')) throw new Error('Not found');
+        if (pathStr.includes('yarn.lock')) return undefined;
+        if (pathStr.includes('package.json')) return undefined;
+        return undefined;
+      });
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      expect(spawn).toHaveBeenCalledWith('yarn', ['dev'], expect.any(Object));
+    });
+
+    it('should detect pnpm as package manager with pnpm-lock.yaml', async () => {
+      vi.mocked(secureFs.access).mockImplementation(async (p: any) => {
+        const pathStr = typeof p === 'string' ? p : '';
+        if (pathStr.includes('bun.lockb')) throw new Error('Not found');
+        if (pathStr.includes('pnpm-lock.yaml')) return undefined;
+        if (pathStr.includes('package.json')) return undefined;
+        return undefined;
+      });
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      expect(spawn).toHaveBeenCalledWith('pnpm', ['run', 'dev'], expect.any(Object));
+    });
+
+    it('should detect bun as package manager with bun.lockb', async () => {
+      vi.mocked(secureFs.access).mockImplementation(async (p: any) => {
+        const pathStr = typeof p === 'string' ? p : '';
+        if (pathStr.includes('bun.lockb')) return undefined;
+        if (pathStr.includes('package.json')) return undefined;
+        return undefined;
+      });
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      expect(spawn).toHaveBeenCalledWith('bun', ['run', 'dev'], expect.any(Object));
+    });
+
+    it('should return existing server info if already running', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      // Start first server
+      const result1 = await service.startDevServer(testDir, testDir);
+      expect(result1.success).toBe(true);
+
+      // Try to start again - should return existing
+      const result2 = await service.startDevServer(testDir, testDir);
+      expect(result2.success).toBe(true);
+      expect(result2.result?.message).toContain('already running');
+    });
+
+    it('should start dev server successfully', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      const result = await service.startDevServer(testDir, testDir);
+
+      expect(result.success).toBe(true);
+      expect(result.result).toBeDefined();
+      expect(result.result?.port).toBeGreaterThanOrEqual(3001);
+      expect(result.result?.url).toContain('http://localhost:');
+    });
+  });
+
+  describe('stopDevServer', () => {
+    it('should return success if server not found', async () => {
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      const result = await service.stopDevServer('/nonexistent/path');
+
+      expect(result.success).toBe(true);
+      expect(result.result?.message).toContain('already stopped');
+    });
+
+    it('should stop a running server', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      // Start server
+      await service.startDevServer(testDir, testDir);
+
+      // Stop server
+      const result = await service.stopDevServer(testDir);
+
+      expect(result.success).toBe(true);
+      expect(mockProcess.kill).toHaveBeenCalledWith('SIGTERM');
+    });
+  });
+
+  describe('listDevServers', () => {
+    it('should return empty list when no servers running', async () => {
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      const result = service.listDevServers();
+
+      expect(result.success).toBe(true);
+      expect(result.result.servers).toEqual([]);
+    });
+
+    it('should list running servers', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      const result = service.listDevServers();
+
+      expect(result.success).toBe(true);
+      expect(result.result.servers.length).toBeGreaterThanOrEqual(1);
+      expect(result.result.servers[0].worktreePath).toBe(testDir);
+    });
+  });
+
+  describe('isRunning', () => {
+    it('should return false for non-running server', async () => {
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      expect(service.isRunning('/some/path')).toBe(false);
+    });
+
+    it('should return true for running server', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      expect(service.isRunning(testDir)).toBe(true);
+    });
+  });
+
+  describe('getServerInfo', () => {
+    it('should return undefined for non-running server', async () => {
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      expect(service.getServerInfo('/some/path')).toBeUndefined();
+    });
+
+    it('should return info for running server', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      const info = service.getServerInfo(testDir);
+      expect(info).toBeDefined();
+      expect(info?.worktreePath).toBe(testDir);
+      expect(info?.port).toBeGreaterThanOrEqual(3001);
+    });
+  });
+
+  describe('getAllocatedPorts', () => {
+    it('should return allocated ports', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      const ports = service.getAllocatedPorts();
+      expect(ports.length).toBeGreaterThanOrEqual(1);
+      expect(ports[0]).toBeGreaterThanOrEqual(3001);
+    });
+  });
+
+  describe('stopAll', () => {
+    it('should stop all running servers', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      await service.stopAll();
+
+      expect(service.listDevServers().result.servers).toHaveLength(0);
+    });
+  });
+
+  describe('URL detection from output', () => {
+    it('should detect Vite format URL', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      // Start server
+      await service.startDevServer(testDir, testDir);
+
+      // Simulate Vite output
+      mockProcess.stdout.emit('data', Buffer.from('  VITE v5.0.0  ready in 123 ms\n'));
+      mockProcess.stdout.emit('data', Buffer.from('  ➜  Local:   http://localhost:5173/\n'));
+
+      // Give it a moment to process
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:5173/');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should detect Next.js format URL', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      // Simulate Next.js output
+      mockProcess.stdout.emit(
+        'data',
+        Buffer.from('ready - started server on 0.0.0.0:3000, url: http://localhost:3000\n')
+      );
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:3000');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should detect generic localhost URL', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      // Simulate generic output with URL
+      mockProcess.stdout.emit('data', Buffer.from('Server running at http://localhost:8080\n'));
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:8080');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should keep initial URL if no URL detected in output', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      const result = await service.startDevServer(testDir, testDir);
+
+      // Simulate output without URL
+      mockProcess.stdout.emit('data', Buffer.from('Server starting...\n'));
+      mockProcess.stdout.emit('data', Buffer.from('Ready!\n'));
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      // Should keep the initial allocated URL
+      expect(serverInfo?.url).toBe(result.result?.url);
+      expect(serverInfo?.urlDetected).toBe(false);
+    });
+
+    it('should detect HTTPS URLs', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      // Simulate HTTPS dev server
+      mockProcess.stdout.emit('data', Buffer.from('Server listening at https://localhost:3443\n'));
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('https://localhost:3443');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should only detect URL once (not update after first detection)', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      // First URL
+      mockProcess.stdout.emit('data', Buffer.from('Local: http://localhost:5173/\n'));
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const firstUrl = service.getServerInfo(testDir)?.url;
+
+      // Try to emit another URL
+      mockProcess.stdout.emit('data', Buffer.from('Network: http://192.168.1.1:5173/\n'));
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      // Should keep the first detected URL
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe(firstUrl);
+      expect(serverInfo?.url).toBe('http://localhost:5173/');
+    });
+
+    it('should detect Astro format URL', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      // Astro uses the same "Local:" prefix as Vite
+      mockProcess.stdout.emit('data', Buffer.from('  🚀  astro  v4.0.0 started in 200ms\n'));
+      mockProcess.stdout.emit('data', Buffer.from('  ┃ Local    http://localhost:4321/\n'));
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      // Astro doesn't use "Local:" with colon, so it should be caught by the localhost URL pattern
+      expect(serverInfo?.url).toBe('http://localhost:4321/');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should detect Remix format URL', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      mockProcess.stdout.emit(
+        'data',
+        Buffer.from('Remix App Server started at http://localhost:3000\n')
+      );
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:3000');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should detect Django format URL', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      mockProcess.stdout.emit(
+        'data',
+        Buffer.from('Starting development server at http://127.0.0.1:8000/\n')
+      );
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://127.0.0.1:8000/');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should detect Webpack Dev Server format URL', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      mockProcess.stdout.emit(
+        'data',
+        Buffer.from('<i> [webpack-dev-server] Project is running at http://localhost:8080/\n')
+      );
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:8080/');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should detect PHP built-in server format URL', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      mockProcess.stdout.emit(
+        'data',
+        Buffer.from('Development Server (http://localhost:8000) started\n')
+      );
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:8000');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should detect "listening on port" format (port-only detection)', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      // Some servers only print the port number, not a full URL
+      mockProcess.stdout.emit('data', Buffer.from('Server listening on port 4000\n'));
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:4000');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should detect "running on port" format (port-only detection)', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      mockProcess.stdout.emit('data', Buffer.from('Application running on port 9000\n'));
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:9000');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should strip ANSI escape codes before detecting URL', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      // Simulate Vite output with ANSI color codes
+      mockProcess.stdout.emit(
+        'data',
+        Buffer.from(
+          '  \x1B[32m➜\x1B[0m  \x1B[1mLocal:\x1B[0m   \x1B[36mhttp://localhost:5173/\x1B[0m\n'
+        )
+      );
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:5173/');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should normalize 0.0.0.0 to localhost', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      mockProcess.stdout.emit('data', Buffer.from('Server listening at http://0.0.0.0:3000\n'));
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:3000');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should normalize [::] to localhost', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      mockProcess.stdout.emit('data', Buffer.from('Local: http://[::]:4000/\n'));
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:4000/');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should update port field when detected URL has different port', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      const result = await service.startDevServer(testDir, testDir);
+      const allocatedPort = result.result?.port;
+
+      // Server starts on a completely different port (ignoring PORT env var)
+      mockProcess.stdout.emit('data', Buffer.from('Local: http://localhost:9999/\n'));
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:9999/');
+      expect(serverInfo?.port).toBe(9999);
+      // The port should be different from what was initially allocated
+      if (allocatedPort !== 9999) {
+        expect(serverInfo?.port).not.toBe(allocatedPort);
+      }
+    });
+
+    it('should detect URL from stderr output', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      // Some servers output URL info to stderr
+      mockProcess.stderr.emit('data', Buffer.from('Local: http://localhost:3000/\n'));
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:3000/');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should not match URLs without a port (non-dev-server URLs)', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      const result = await service.startDevServer(testDir, testDir);
+
+      // CDN/external URLs should not be detected
+      mockProcess.stdout.emit(
+        'data',
+        Buffer.from('Downloading from https://cdn.example.com/bundle.js\n')
+      );
+      mockProcess.stdout.emit('data', Buffer.from('Fetching https://registry.npmjs.org/package\n'));
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      // Should keep the initial allocated URL since external URLs don't match
+      expect(serverInfo?.url).toBe(result.result?.url);
+      expect(serverInfo?.urlDetected).toBe(false);
+    });
+
+    it('should handle URLs with trailing punctuation', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      // URL followed by punctuation
+      mockProcess.stdout.emit('data', Buffer.from('Server started at http://localhost:3000.\n'));
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:3000');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should detect Express/Fastify format URL', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      mockProcess.stdout.emit('data', Buffer.from('Server listening on http://localhost:3000\n'));
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:3000');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+
+    it('should detect Angular CLI format URL', async () => {
+      vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+      const mockProcess = createMockProcess();
+      vi.mocked(spawn).mockReturnValue(mockProcess as any);
+
+      const { getDevServerService } = await import('@/services/dev-server-service.js');
+      const service = getDevServerService();
+
+      await service.startDevServer(testDir, testDir);
+
+      // Angular CLI output
+      mockProcess.stderr.emit(
+        'data',
+        Buffer.from(
+          '** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **\n'
+        )
+      );
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const serverInfo = service.getServerInfo(testDir);
+      expect(serverInfo?.url).toBe('http://localhost:4200/');
+      expect(serverInfo?.urlDetected).toBe(true);
+    });
+  });
+});
+
+// Helper to create a mock child process
+function createMockProcess() {
+  const mockProcess = new EventEmitter() as any;
+  mockProcess.stdout = new EventEmitter();
+  mockProcess.stderr = new EventEmitter();
+  mockProcess.kill = vi.fn();
+  mockProcess.killed = false;
+  mockProcess.pid = 12345;
+
+  // Don't exit immediately - let the test control the lifecycle
+  return mockProcess;
+}
diff --git a/temp_repo/apps/server/tests/unit/services/event-hook-service.test.ts b/temp_repo/apps/server/tests/unit/services/event-hook-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fba67664f9b44a4a2ade401482b2432cb05c1ec7
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/event-hook-service.test.ts
@@ -0,0 +1,1476 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { EventHookService } from '../../../src/services/event-hook-service.js';
+import type { EventEmitter, EventCallback, EventType } from '../../../src/lib/events.js';
+import type { SettingsService } from '../../../src/services/settings-service.js';
+import type { EventHistoryService } from '../../../src/services/event-history-service.js';
+import type { FeatureLoader } from '../../../src/services/feature-loader.js';
+
+// Mock global fetch for ntfy tests
+const originalFetch = global.fetch;
+
+/**
+ * Create a mock EventEmitter for testing
+ */
+function createMockEventEmitter(): EventEmitter & {
+  subscribers: Set<EventCallback>;
+  simulateEvent: (type: EventType, payload: unknown) => void;
+} {
+  const subscribers = new Set<EventCallback>();
+
+  return {
+    subscribers,
+    emit(type: EventType, payload: unknown) {
+      for (const callback of subscribers) {
+        callback(type, payload);
+      }
+    },
+    subscribe(callback: EventCallback) {
+      subscribers.add(callback);
+      return () => {
+        subscribers.delete(callback);
+      };
+    },
+    simulateEvent(type: EventType, payload: unknown) {
+      for (const callback of subscribers) {
+        callback(type, payload);
+      }
+    },
+  };
+}
+
+/**
+ * Create a mock SettingsService
+ */
+function createMockSettingsService(
+  hooks: unknown[] = [],
+  ntfyEndpoints: unknown[] = []
+): SettingsService {
+  return {
+    getGlobalSettings: vi.fn().mockResolvedValue({
+      eventHooks: hooks,
+      ntfyEndpoints: ntfyEndpoints,
+    }),
+  } as unknown as SettingsService;
+}
+
+/**
+ * Create a mock EventHistoryService
+ */
+function createMockEventHistoryService() {
+  return {
+    storeEvent: vi.fn().mockResolvedValue({ id: 'test-event-id' }),
+  } as unknown as EventHistoryService;
+}
+
+/**
+ * Create a mock FeatureLoader
+ */
+function createMockFeatureLoader(features: Record<string, { title: string }> = {}) {
+  return {
+    get: vi.fn().mockImplementation((_projectPath: string, featureId: string) => {
+      return Promise.resolve(features[featureId] || null);
+    }),
+  } as unknown as FeatureLoader;
+}
+
+describe('EventHookService', () => {
+  let service: EventHookService;
+  let mockEmitter: ReturnType<typeof createMockEventEmitter>;
+  let mockSettingsService: ReturnType<typeof createMockSettingsService>;
+  let mockEventHistoryService: ReturnType<typeof createMockEventHistoryService>;
+  let mockFeatureLoader: ReturnType<typeof createMockFeatureLoader>;
+  let mockFetch: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    service = new EventHookService();
+    mockEmitter = createMockEventEmitter();
+    mockSettingsService = createMockSettingsService();
+    mockEventHistoryService = createMockEventHistoryService();
+    mockFeatureLoader = createMockFeatureLoader();
+    // Set up mock fetch for ntfy tests
+    mockFetch = vi.fn();
+    global.fetch = mockFetch;
+  });
+
+  afterEach(() => {
+    service.destroy();
+    global.fetch = originalFetch;
+  });
+
+  describe('initialize', () => {
+    it('should subscribe to the event emitter', () => {
+      service.initialize(mockEmitter, mockSettingsService, mockEventHistoryService);
+      expect(mockEmitter.subscribers.size).toBe(1);
+    });
+
+    it('should log initialization', () => {
+      service.initialize(mockEmitter, mockSettingsService);
+      expect(mockEmitter.subscribers.size).toBe(1);
+    });
+  });
+
+  describe('destroy', () => {
+    it('should unsubscribe from the event emitter', () => {
+      service.initialize(mockEmitter, mockSettingsService);
+      expect(mockEmitter.subscribers.size).toBe(1);
+
+      service.destroy();
+      expect(mockEmitter.subscribers.size).toBe(0);
+    });
+  });
+
+  describe('event mapping - auto_mode_feature_complete', () => {
+    it('should map to feature_success when passes is true', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        featureName: 'Test Feature',
+        passes: true,
+        message: 'Feature completed in 30s',
+        projectPath: '/test/project',
+      });
+
+      // Allow async processing
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.trigger).toBe('feature_success');
+      expect(storeCall.passes).toBe(true);
+    });
+
+    it('should map to feature_error when passes is false', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        featureName: 'Test Feature',
+        passes: false,
+        message: 'Feature stopped by user',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.trigger).toBe('feature_error');
+      expect(storeCall.passes).toBe(false);
+    });
+
+    it('should NOT populate error field for successful feature completion', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        featureName: 'Test Feature',
+        passes: true,
+        message: 'Feature completed in 30s - auto-verified',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.trigger).toBe('feature_success');
+      // Critical: error should NOT contain the success message
+      expect(storeCall.error).toBeUndefined();
+      expect(storeCall.errorType).toBeUndefined();
+    });
+
+    it('should populate error field for failed feature completion', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        featureName: 'Test Feature',
+        passes: false,
+        message: 'Feature stopped by user',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.trigger).toBe('feature_error');
+      // Error field should be populated for error triggers
+      expect(storeCall.error).toBe('Feature stopped by user');
+    });
+
+    it('should ignore feature complete events without explicit auto execution mode', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        featureId: 'feat-1',
+        featureName: 'Manual Feature',
+        passes: true,
+        message: 'Manually verified',
+        projectPath: '/test/project',
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      expect(mockEventHistoryService.storeEvent).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('event mapping - feature:completed', () => {
+    it('should map manual completion to feature_success', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('feature:completed', {
+        featureId: 'feat-1',
+        featureName: 'Manual Feature',
+        projectPath: '/test/project',
+        passes: true,
+        executionMode: 'manual',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.trigger).toBe('feature_success');
+      expect(storeCall.passes).toBe(true);
+    });
+  });
+
+  describe('event mapping - auto_mode_error', () => {
+    it('should map to feature_error when featureId is present', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_error',
+        featureId: 'feat-1',
+        error: 'Network timeout',
+        errorType: 'network',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.trigger).toBe('feature_error');
+      expect(storeCall.error).toBe('Network timeout');
+      expect(storeCall.errorType).toBe('network');
+    });
+
+    it('should map to auto_mode_error when featureId is not present', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_error',
+        error: 'System error',
+        errorType: 'system',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.trigger).toBe('auto_mode_error');
+      expect(storeCall.error).toBe('System error');
+      expect(storeCall.errorType).toBe('system');
+    });
+  });
+
+  describe('event mapping - auto_mode_idle', () => {
+    it('should map to auto_mode_complete', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_idle',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.trigger).toBe('auto_mode_complete');
+    });
+  });
+
+  describe('event mapping - feature:created', () => {
+    it('should trigger feature_created hook', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('feature:created', {
+        featureId: 'feat-1',
+        featureName: 'New Feature',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.trigger).toBe('feature_created');
+      expect(storeCall.featureId).toBe('feat-1');
+    });
+  });
+
+  describe('event mapping - unhandled events', () => {
+    it('should ignore auto-mode events with unrecognized types', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_progress',
+        featureId: 'feat-1',
+        content: 'Working...',
+        projectPath: '/test/project',
+      });
+
+      // Give it time to process
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      expect(mockEventHistoryService.storeEvent).not.toHaveBeenCalled();
+    });
+
+    it('should ignore events without a type', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        featureId: 'feat-1',
+        projectPath: '/test/project',
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      expect(mockEventHistoryService.storeEvent).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('hook execution', () => {
+    it('should execute matching enabled hooks for feature_success', async () => {
+      const hooks = [
+        {
+          id: 'hook-1',
+          enabled: true,
+          trigger: 'feature_success',
+          name: 'Success Hook',
+          action: {
+            type: 'shell',
+            command: 'echo "success"',
+          },
+        },
+        {
+          id: 'hook-2',
+          enabled: true,
+          trigger: 'feature_error',
+          name: 'Error Hook',
+          action: {
+            type: 'shell',
+            command: 'echo "error"',
+          },
+        },
+      ];
+
+      mockSettingsService = createMockSettingsService(hooks);
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        featureName: 'Test Feature',
+        passes: true,
+        message: 'Feature completed in 30s',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockSettingsService.getGlobalSettings).toHaveBeenCalled();
+      });
+
+      // The error hook should NOT have been triggered for a success event
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.trigger).toBe('feature_success');
+    });
+
+    it('should NOT execute error hooks when feature completes successfully', async () => {
+      // This is the key regression test for the bug:
+      // "Error event hook fired when a feature completes successfully"
+      const hooks = [
+        {
+          id: 'hook-error',
+          enabled: true,
+          trigger: 'feature_error',
+          name: 'Error Notification',
+          action: {
+            type: 'shell',
+            command: 'echo "ERROR FIRED"',
+          },
+        },
+      ];
+
+      mockSettingsService = createMockSettingsService(hooks);
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        featureName: 'Test Feature',
+        passes: true,
+        message: 'Feature completed in 30s - auto-verified',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      // Verify the trigger was feature_success, not feature_error
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.trigger).toBe('feature_success');
+      // And no error information should be present
+      expect(storeCall.error).toBeUndefined();
+      expect(storeCall.errorType).toBeUndefined();
+    });
+  });
+
+  describe('feature name loading', () => {
+    it('should load feature name from feature loader when not in payload', async () => {
+      mockFeatureLoader = createMockFeatureLoader({
+        'feat-1': { title: 'Loaded Feature Title' },
+      });
+
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        passes: true,
+        message: 'Done',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.featureName).toBe('Loaded Feature Title');
+    });
+
+    it('should fall back to payload featureName when loader fails', async () => {
+      mockFeatureLoader = createMockFeatureLoader({}); // Empty - no features found
+
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        featureName: 'Fallback Name',
+        passes: true,
+        message: 'Done',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.featureName).toBe('Fallback Name');
+    });
+  });
+
+  describe('event mapping - feature_status_changed (non-auto-mode completion)', () => {
+    it('should trigger feature_success when status changes to verified', async () => {
+      mockFeatureLoader = createMockFeatureLoader({
+        'feat-1': { title: 'Manual Feature' },
+      });
+
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'feature_status_changed',
+        featureId: 'feat-1',
+        projectPath: '/test/project',
+        status: 'verified',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.trigger).toBe('feature_success');
+      expect(storeCall.featureName).toBe('Manual Feature');
+      expect(storeCall.passes).toBe(true);
+    });
+
+    it('should trigger feature_success when status changes to waiting_approval', async () => {
+      mockFeatureLoader = createMockFeatureLoader({
+        'feat-1': { title: 'Manual Feature' },
+      });
+
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'feature_status_changed',
+        featureId: 'feat-1',
+        projectPath: '/test/project',
+        status: 'waiting_approval',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.trigger).toBe('feature_success');
+      expect(storeCall.passes).toBe(true);
+      expect(storeCall.featureName).toBe('Manual Feature');
+    });
+
+    it('should NOT trigger hooks for non-completion status changes', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'feature_status_changed',
+        featureId: 'feat-1',
+        projectPath: '/test/project',
+        status: 'in_progress',
+      });
+
+      // Give it time to process
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      expect(mockEventHistoryService.storeEvent).not.toHaveBeenCalled();
+    });
+
+    it('should NOT double-fire hooks when auto_mode_feature_complete already fired', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      // First: auto_mode_feature_complete fires (auto-mode path)
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        featureName: 'Auto Feature',
+        passes: true,
+        message: 'Feature completed',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalledTimes(1);
+      });
+
+      // Then: feature_status_changed fires for the same feature
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'feature_status_changed',
+        featureId: 'feat-1',
+        projectPath: '/test/project',
+        status: 'verified',
+      });
+
+      // Give it time to process
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      // Should still only have been called once (from auto_mode_feature_complete)
+      expect(mockEventHistoryService.storeEvent).toHaveBeenCalledTimes(1);
+    });
+
+    it('should NOT double-fire hooks when auto_mode_error already fired for feature', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      // First: auto_mode_error fires for a feature
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_error',
+        featureId: 'feat-1',
+        error: 'Something failed',
+        errorType: 'execution',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalledTimes(1);
+      });
+
+      // Then: feature_status_changed fires for the same feature (e.g., reset to backlog)
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'feature_status_changed',
+        featureId: 'feat-1',
+        projectPath: '/test/project',
+        status: 'verified', // unlikely after error, but tests the dedup
+      });
+
+      // Give it time to process
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      // Should still only have been called once
+      expect(mockEventHistoryService.storeEvent).toHaveBeenCalledTimes(1);
+    });
+
+    it('should fire hooks for different features independently', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      // Auto-mode completion for feat-1
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        passes: true,
+        message: 'Done',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalledTimes(1);
+      });
+
+      // Manual completion for feat-2 (different feature)
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'feature_status_changed',
+        featureId: 'feat-2',
+        projectPath: '/test/project',
+        status: 'verified',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalledTimes(2);
+      });
+
+      // feat-2 should have triggered feature_success
+      const secondCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[1][0];
+      expect(secondCall.trigger).toBe('feature_success');
+      expect(secondCall.featureId).toBe('feat-2');
+    });
+  });
+
+  describe('error context for error events', () => {
+    it('should use payload.error when available for error triggers', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_error',
+        featureId: 'feat-1',
+        error: 'Authentication failed',
+        errorType: 'auth',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.error).toBe('Authentication failed');
+      expect(storeCall.errorType).toBe('auth');
+    });
+
+    it('should fall back to payload.message for error field in error triggers', async () => {
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        passes: false,
+        message: 'Feature stopped by user',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      const storeCall = (mockEventHistoryService.storeEvent as ReturnType<typeof vi.fn>).mock
+        .calls[0][0];
+      expect(storeCall.trigger).toBe('feature_error');
+      expect(storeCall.error).toBe('Feature stopped by user');
+    });
+  });
+
+  describe('ntfy hook execution', () => {
+    const mockNtfyEndpoint = {
+      id: 'endpoint-1',
+      name: 'Test Endpoint',
+      serverUrl: 'https://ntfy.sh',
+      topic: 'test-topic',
+      authType: 'none' as const,
+      enabled: true,
+    };
+
+    it('should execute ntfy hook when endpoint is configured', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const hooks = [
+        {
+          id: 'ntfy-hook-1',
+          enabled: true,
+          trigger: 'feature_success',
+          name: 'Ntfy Success Hook',
+          action: {
+            type: 'ntfy',
+            endpointId: 'endpoint-1',
+            title: 'Feature {{featureName}} completed!',
+            priority: 3,
+          },
+        },
+      ];
+
+      mockSettingsService = createMockSettingsService(hooks, [mockNtfyEndpoint]);
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        featureName: 'Test Feature',
+        passes: true,
+        message: 'Feature completed',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockFetch).toHaveBeenCalled();
+      });
+
+      const [url, options] = mockFetch.mock.calls[0];
+      expect(url).toBe('https://ntfy.sh/test-topic');
+      expect(options.method).toBe('POST');
+      expect(options.headers['Title']).toBe('Feature Test Feature completed!');
+    });
+
+    it('should NOT execute ntfy hook when endpoint is not found', async () => {
+      const hooks = [
+        {
+          id: 'ntfy-hook-1',
+          enabled: true,
+          trigger: 'feature_success',
+          name: 'Ntfy Hook with Missing Endpoint',
+          action: {
+            type: 'ntfy',
+            endpointId: 'non-existent-endpoint',
+          },
+        },
+      ];
+
+      mockSettingsService = createMockSettingsService(hooks, [mockNtfyEndpoint]);
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        featureName: 'Test Feature',
+        passes: true,
+        message: 'Feature completed',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      // Fetch should NOT have been called since endpoint doesn't exist
+      expect(mockFetch).not.toHaveBeenCalled();
+    });
+
+    it('should use ntfy endpoint default values when hook does not override', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const endpointWithDefaults = {
+        ...mockNtfyEndpoint,
+        defaultTags: 'default-tag',
+        defaultEmoji: 'tada',
+        defaultClickUrl: 'https://default.example.com',
+      };
+
+      const hooks = [
+        {
+          id: 'ntfy-hook-1',
+          enabled: true,
+          trigger: 'feature_error',
+          name: 'Ntfy Error Hook',
+          action: {
+            type: 'ntfy',
+            endpointId: 'endpoint-1',
+            // No title, tags, or emoji - should use endpoint defaults
+          },
+        },
+      ];
+
+      mockSettingsService = createMockSettingsService(hooks, [endpointWithDefaults]);
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        featureName: 'Failed Feature',
+        passes: false,
+        message: 'Something went wrong',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockFetch).toHaveBeenCalled();
+      });
+
+      const options = mockFetch.mock.calls[0][1];
+      // Should use default tags and emoji from endpoint
+      expect(options.headers['Tags']).toBe('tada,default-tag');
+      // Click URL gets deep-link query param when feature context is available
+      expect(options.headers['Click']).toContain('https://default.example.com/board');
+      expect(options.headers['Click']).toContain('featureId=feat-1');
+    });
+
+    it('should send ntfy notification with authentication', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const endpointWithAuth = {
+        ...mockNtfyEndpoint,
+        authType: 'token' as const,
+        token: 'tk_test_token',
+      };
+
+      const hooks = [
+        {
+          id: 'ntfy-hook-1',
+          enabled: true,
+          trigger: 'feature_success',
+          name: 'Authenticated Ntfy Hook',
+          action: {
+            type: 'ntfy',
+            endpointId: 'endpoint-1',
+          },
+        },
+      ];
+
+      mockSettingsService = createMockSettingsService(hooks, [endpointWithAuth]);
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        featureName: 'Test Feature',
+        passes: true,
+        message: 'Feature completed',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockFetch).toHaveBeenCalled();
+      });
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Authorization']).toBe('Bearer tk_test_token');
+    });
+
+    it('should handle ntfy notification failure gracefully', async () => {
+      mockFetch.mockRejectedValueOnce(new Error('Network error'));
+
+      const hooks = [
+        {
+          id: 'ntfy-hook-1',
+          enabled: true,
+          trigger: 'feature_success',
+          name: 'Ntfy Hook That Will Fail',
+          action: {
+            type: 'ntfy',
+            endpointId: 'endpoint-1',
+          },
+        },
+      ];
+
+      mockSettingsService = createMockSettingsService(hooks, [mockNtfyEndpoint]);
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        featureName: 'Test Feature',
+        passes: true,
+        message: 'Feature completed',
+        projectPath: '/test/project',
+      });
+
+      // Should not throw - error should be caught gracefully
+      await vi.waitFor(() => {
+        expect(mockFetch).toHaveBeenCalled();
+      });
+
+      // Event should still be stored even if ntfy hook fails
+      expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+    });
+
+    it('should substitute variables in ntfy title and body', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const hooks = [
+        {
+          id: 'ntfy-hook-1',
+          enabled: true,
+          trigger: 'feature_success',
+          name: 'Ntfy Hook with Variables',
+          action: {
+            type: 'ntfy',
+            endpointId: 'endpoint-1',
+            title: '[{{projectName}}] {{featureName}}',
+            body: 'Feature {{featureId}} completed at {{timestamp}}',
+          },
+        },
+      ];
+
+      mockSettingsService = createMockSettingsService(hooks, [mockNtfyEndpoint]);
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-123',
+        featureName: 'Cool Feature',
+        passes: true,
+        message: 'Feature completed',
+        projectPath: '/test/my-project',
+        projectName: 'my-project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockFetch).toHaveBeenCalled();
+      });
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Title']).toBe('[my-project] Cool Feature');
+      expect(options.body).toContain('feat-123');
+    });
+
+    it('should NOT execute ntfy hook when endpoint is disabled', async () => {
+      const disabledEndpoint = {
+        ...mockNtfyEndpoint,
+        enabled: false,
+      };
+
+      const hooks = [
+        {
+          id: 'ntfy-hook-1',
+          enabled: true,
+          trigger: 'feature_success',
+          name: 'Ntfy Hook with Disabled Endpoint',
+          action: {
+            type: 'ntfy',
+            endpointId: 'endpoint-1',
+          },
+        },
+      ];
+
+      mockSettingsService = createMockSettingsService(hooks, [disabledEndpoint]);
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        featureName: 'Test Feature',
+        passes: true,
+        message: 'Feature completed',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockEventHistoryService.storeEvent).toHaveBeenCalled();
+      });
+
+      // Fetch should not be called because endpoint is disabled
+      expect(mockFetch).not.toHaveBeenCalled();
+    });
+
+    it('should use hook-specific values over endpoint defaults', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const endpointWithDefaults = {
+        ...mockNtfyEndpoint,
+        defaultTags: 'default-tag',
+        defaultEmoji: 'default-emoji',
+        defaultClickUrl: 'https://default.example.com',
+      };
+
+      const hooks = [
+        {
+          id: 'ntfy-hook-1',
+          enabled: true,
+          trigger: 'feature_success',
+          name: 'Ntfy Hook with Overrides',
+          action: {
+            type: 'ntfy',
+            endpointId: 'endpoint-1',
+            tags: 'override-tag',
+            emoji: 'override-emoji',
+            clickUrl: 'https://override.example.com',
+            priority: 5,
+          },
+        },
+      ];
+
+      mockSettingsService = createMockSettingsService(hooks, [endpointWithDefaults]);
+      service.initialize(
+        mockEmitter,
+        mockSettingsService,
+        mockEventHistoryService,
+        mockFeatureLoader
+      );
+
+      mockEmitter.simulateEvent('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        executionMode: 'auto',
+        featureId: 'feat-1',
+        featureName: 'Test Feature',
+        passes: true,
+        message: 'Feature completed',
+        projectPath: '/test/project',
+      });
+
+      await vi.waitFor(() => {
+        expect(mockFetch).toHaveBeenCalled();
+      });
+
+      const options = mockFetch.mock.calls[0][1];
+      // Hook values should override endpoint defaults
+      expect(options.headers['Tags']).toBe('override-emoji,override-tag');
+      // Click URL uses hook-specific base URL with deep link params applied
+      expect(options.headers['Click']).toContain('https://override.example.com/board');
+      expect(options.headers['Click']).toContain('featureId=feat-1');
+      expect(options.headers['Priority']).toBe('5');
+    });
+
+    describe('click URL deep linking', () => {
+      it('should generate board URL with featureId query param when feature context is available', async () => {
+        mockFetch.mockResolvedValueOnce({
+          ok: true,
+          status: 200,
+        });
+
+        const endpointWithDefaultClickUrl = {
+          ...mockNtfyEndpoint,
+          defaultClickUrl: 'https://app.example.com',
+        };
+
+        const hooks = [
+          {
+            id: 'ntfy-hook-1',
+            enabled: true,
+            trigger: 'feature_success',
+            name: 'Ntfy Hook',
+            action: {
+              type: 'ntfy',
+              endpointId: 'endpoint-1',
+            },
+          },
+        ];
+
+        mockSettingsService = createMockSettingsService(hooks, [endpointWithDefaultClickUrl]);
+        service.initialize(
+          mockEmitter,
+          mockSettingsService,
+          mockEventHistoryService,
+          mockFeatureLoader
+        );
+
+        mockEmitter.simulateEvent('auto-mode:event', {
+          type: 'auto_mode_feature_complete',
+          executionMode: 'auto',
+          featureId: 'test-feature-123',
+          featureName: 'Test Feature',
+          passes: true,
+          message: 'Feature completed',
+          projectPath: '/test/project',
+        });
+
+        await vi.waitFor(() => {
+          expect(mockFetch).toHaveBeenCalled();
+        });
+
+        const options = mockFetch.mock.calls[0][1];
+        const clickUrl = options.headers['Click'];
+
+        // Should use /board path with featureId query param
+        expect(clickUrl).toContain('/board');
+        expect(clickUrl).toContain('featureId=test-feature-123');
+        // Should NOT use the old path-based format
+        expect(clickUrl).not.toContain('/feature/');
+      });
+
+      it('should generate board URL without featureId when no feature context', async () => {
+        mockFetch.mockResolvedValueOnce({
+          ok: true,
+          status: 200,
+        });
+
+        const endpointWithDefaultClickUrl = {
+          ...mockNtfyEndpoint,
+          defaultClickUrl: 'https://app.example.com',
+        };
+
+        const hooks = [
+          {
+            id: 'ntfy-hook-1',
+            enabled: true,
+            trigger: 'auto_mode_complete',
+            name: 'Auto Mode Complete Hook',
+            action: {
+              type: 'ntfy',
+              endpointId: 'endpoint-1',
+            },
+          },
+        ];
+
+        mockSettingsService = createMockSettingsService(hooks, [endpointWithDefaultClickUrl]);
+        service.initialize(
+          mockEmitter,
+          mockSettingsService,
+          mockEventHistoryService,
+          mockFeatureLoader
+        );
+
+        // Event without featureId but with projectPath (auto_mode_idle triggers auto_mode_complete)
+        mockEmitter.simulateEvent('auto-mode:event', {
+          type: 'auto_mode_idle',
+          executionMode: 'auto',
+          projectPath: '/test/project',
+          totalFeatures: 5,
+        });
+
+        await vi.waitFor(() => {
+          expect(mockFetch).toHaveBeenCalled();
+        });
+
+        const options = mockFetch.mock.calls[0][1];
+        const clickUrl = options.headers['Click'];
+
+        // Should navigate to board without featureId
+        expect(clickUrl).toContain('/board');
+        expect(clickUrl).not.toContain('featureId=');
+      });
+
+      it('should apply deep link params to hook-specific click URL', async () => {
+        mockFetch.mockResolvedValueOnce({
+          ok: true,
+          status: 200,
+        });
+
+        const endpointWithDefaultClickUrl = {
+          ...mockNtfyEndpoint,
+          defaultClickUrl: 'https://default.example.com',
+        };
+
+        const hooks = [
+          {
+            id: 'ntfy-hook-1',
+            enabled: true,
+            trigger: 'feature_success',
+            name: 'Ntfy Hook with Custom Click URL',
+            action: {
+              type: 'ntfy',
+              endpointId: 'endpoint-1',
+              clickUrl: 'https://custom.example.com/custom-page',
+            },
+          },
+        ];
+
+        mockSettingsService = createMockSettingsService(hooks, [endpointWithDefaultClickUrl]);
+        service.initialize(
+          mockEmitter,
+          mockSettingsService,
+          mockEventHistoryService,
+          mockFeatureLoader
+        );
+
+        mockEmitter.simulateEvent('auto-mode:event', {
+          type: 'auto_mode_feature_complete',
+          executionMode: 'auto',
+          featureId: 'feat-789',
+          featureName: 'Custom URL Test',
+          passes: true,
+          message: 'Feature completed',
+          projectPath: '/test/project',
+        });
+
+        await vi.waitFor(() => {
+          expect(mockFetch).toHaveBeenCalled();
+        });
+
+        const options = mockFetch.mock.calls[0][1];
+        const clickUrl = options.headers['Click'];
+
+        // Should use the hook-specific click URL with deep link params applied
+        expect(clickUrl).toContain('https://custom.example.com/board');
+        expect(clickUrl).toContain('featureId=feat-789');
+      });
+
+      it('should preserve existing query params when adding featureId', async () => {
+        mockFetch.mockResolvedValueOnce({
+          ok: true,
+          status: 200,
+        });
+
+        const endpointWithDefaultClickUrl = {
+          ...mockNtfyEndpoint,
+          defaultClickUrl: 'https://app.example.com/board?view=list',
+        };
+
+        const hooks = [
+          {
+            id: 'ntfy-hook-1',
+            enabled: true,
+            trigger: 'feature_success',
+            name: 'Ntfy Hook',
+            action: {
+              type: 'ntfy',
+              endpointId: 'endpoint-1',
+            },
+          },
+        ];
+
+        mockSettingsService = createMockSettingsService(hooks, [endpointWithDefaultClickUrl]);
+        service.initialize(
+          mockEmitter,
+          mockSettingsService,
+          mockEventHistoryService,
+          mockFeatureLoader
+        );
+
+        mockEmitter.simulateEvent('auto-mode:event', {
+          type: 'auto_mode_feature_complete',
+          executionMode: 'auto',
+          featureId: 'feat-456',
+          featureName: 'Test Feature',
+          passes: true,
+          message: 'Feature completed',
+          projectPath: '/test/project',
+        });
+
+        await vi.waitFor(() => {
+          expect(mockFetch).toHaveBeenCalled();
+        });
+
+        const options = mockFetch.mock.calls[0][1];
+        const clickUrl = options.headers['Click'];
+
+        // Should preserve existing query params and add featureId
+        expect(clickUrl).toContain('view=list');
+        expect(clickUrl).toContain('featureId=feat-456');
+        // Should be properly formatted URL
+        expect(clickUrl).toMatch(/^https:\/\/app\.example\.com\/board\?.+$/);
+      });
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/execution-service.test.ts b/temp_repo/apps/server/tests/unit/services/execution-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..af02bada8bc35fdd903ab6a560344da39a97b113
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/execution-service.test.ts
@@ -0,0 +1,2059 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import path from 'path';
+import type { Feature } from '@automaker/types';
+
+/**
+ * Helper to normalize paths for cross-platform test compatibility.
+ */
+const normalizePath = (p: string): string => path.resolve(p);
+import {
+  ExecutionService,
+  type RunAgentFn,
+  type ExecutePipelineFn,
+  type UpdateFeatureStatusFn,
+  type LoadFeatureFn,
+  type GetPlanningPromptPrefixFn,
+  type SaveFeatureSummaryFn,
+  type RecordLearningsFn,
+  type ContextExistsFn,
+  type ResumeFeatureFn,
+  type TrackFailureFn,
+  type SignalPauseFn,
+  type RecordSuccessFn,
+} from '../../../src/services/execution-service.js';
+import type { TypedEventBus } from '../../../src/services/typed-event-bus.js';
+import type {
+  ConcurrencyManager,
+  RunningFeature,
+} from '../../../src/services/concurrency-manager.js';
+import type { WorktreeResolver } from '../../../src/services/worktree-resolver.js';
+import type { SettingsService } from '../../../src/services/settings-service.js';
+import { pipelineService } from '../../../src/services/pipeline-service.js';
+import * as secureFs from '../../../src/lib/secure-fs.js';
+import { getFeatureDir } from '@automaker/platform';
+import {
+  getPromptCustomization,
+  getAutoLoadClaudeMdSetting,
+  getUseClaudeCodeSystemPromptSetting,
+  filterClaudeMdFromContext,
+} from '../../../src/lib/settings-helpers.js';
+import { extractSummary } from '../../../src/services/spec-parser.js';
+import { resolveModelString } from '@automaker/model-resolver';
+
+// Mock pipelineService
+vi.mock('../../../src/services/pipeline-service.js', () => ({
+  pipelineService: {
+    getPipelineConfig: vi.fn(),
+    isPipelineStatus: vi.fn(),
+    getStepIdFromStatus: vi.fn(),
+  },
+}));
+
+// Mock secureFs
+vi.mock('../../../src/lib/secure-fs.js', () => ({
+  readFile: vi.fn(),
+  writeFile: vi.fn(),
+  mkdir: vi.fn(),
+  access: vi.fn(),
+}));
+
+// Mock settings helpers
+vi.mock('../../../src/lib/settings-helpers.js', () => ({
+  getPromptCustomization: vi.fn().mockResolvedValue({
+    taskExecution: {
+      implementationInstructions: 'test instructions',
+      playwrightVerificationInstructions: 'test playwright',
+      continuationAfterApprovalTemplate:
+        '{{userFeedback}}\n\nApproved plan:\n{{approvedPlan}}\n\nProceed.',
+    },
+  }),
+  getAutoLoadClaudeMdSetting: vi.fn().mockResolvedValue(true),
+  getUseClaudeCodeSystemPromptSetting: vi.fn().mockResolvedValue(true),
+  filterClaudeMdFromContext: vi.fn().mockReturnValue('context prompt'),
+}));
+
+// Mock sdk-options
+vi.mock('../../../src/lib/sdk-options.js', () => ({
+  validateWorkingDirectory: vi.fn(),
+}));
+
+// Mock platform
+vi.mock('@automaker/platform', () => ({
+  getFeatureDir: vi
+    .fn()
+    .mockImplementation(
+      (projectPath: string, featureId: string) => `${projectPath}/.automaker/features/${featureId}`
+    ),
+}));
+
+// Mock model-resolver
+vi.mock('@automaker/model-resolver', () => ({
+  resolveModelString: vi.fn().mockReturnValue('claude-sonnet-4'),
+  DEFAULT_MODELS: { claude: 'claude-sonnet-4' },
+}));
+
+// Mock provider-factory
+vi.mock('../../../src/providers/provider-factory.js', () => ({
+  ProviderFactory: {
+    getProviderNameForModel: vi.fn().mockReturnValue('anthropic'),
+  },
+}));
+
+// Mock spec-parser
+vi.mock('../../../src/services/spec-parser.js', () => ({
+  extractSummary: vi.fn().mockReturnValue('Test summary'),
+}));
+
+// Mock @automaker/utils
+vi.mock('@automaker/utils', () => ({
+  createLogger: vi.fn().mockReturnValue({
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    debug: vi.fn(),
+  }),
+  classifyError: vi.fn((error: unknown) => {
+    const err = error as Error | null;
+    if (err?.name === 'AbortError' || err?.message?.includes('abort')) {
+      return { isAbort: true, type: 'abort', message: 'Aborted' };
+    }
+    return { isAbort: false, type: 'unknown', message: err?.message || 'Unknown error' };
+  }),
+  loadContextFiles: vi.fn(),
+  recordMemoryUsage: vi.fn().mockResolvedValue(undefined),
+}));
+
+describe('execution-service.ts', () => {
+  // Mock dependencies
+  let mockEventBus: TypedEventBus;
+  let mockConcurrencyManager: ConcurrencyManager;
+  let mockWorktreeResolver: WorktreeResolver;
+  let mockSettingsService: SettingsService | null;
+
+  // Callback mocks
+  let mockRunAgentFn: RunAgentFn;
+  let mockExecutePipelineFn: ExecutePipelineFn;
+  let mockUpdateFeatureStatusFn: UpdateFeatureStatusFn;
+  let mockLoadFeatureFn: LoadFeatureFn;
+  let mockGetPlanningPromptPrefixFn: GetPlanningPromptPrefixFn;
+  let mockSaveFeatureSummaryFn: SaveFeatureSummaryFn;
+  let mockRecordLearningsFn: RecordLearningsFn;
+  let mockContextExistsFn: ContextExistsFn;
+  let mockResumeFeatureFn: ResumeFeatureFn;
+  let mockTrackFailureFn: TrackFailureFn;
+  let mockSignalPauseFn: SignalPauseFn;
+  let mockRecordSuccessFn: RecordSuccessFn;
+  let mockSaveExecutionStateFn: vi.Mock;
+  let mockLoadContextFilesFn: vi.Mock;
+
+  let service: ExecutionService;
+
+  // Test data
+  const testFeature: Feature = {
+    id: 'feature-1',
+    title: 'Test Feature',
+    category: 'test',
+    description: 'Test description',
+    status: 'backlog',
+    branchName: 'feature/test-1',
+  };
+
+  const createRunningFeature = (featureId: string): RunningFeature => ({
+    featureId,
+    projectPath: '/test/project',
+    worktreePath: null,
+    branchName: null,
+    abortController: new AbortController(),
+    isAutoMode: false,
+    startTime: Date.now(),
+    leaseCount: 1,
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockEventBus = {
+      emitAutoModeEvent: vi.fn(),
+    } as unknown as TypedEventBus;
+
+    mockConcurrencyManager = {
+      acquire: vi.fn().mockImplementation(({ featureId, isAutoMode }) => ({
+        ...createRunningFeature(featureId),
+        isAutoMode: isAutoMode ?? false,
+      })),
+      release: vi.fn(),
+      getRunningFeature: vi.fn(),
+      isRunning: vi.fn(),
+    } as unknown as ConcurrencyManager;
+
+    mockWorktreeResolver = {
+      findWorktreeForBranch: vi.fn().mockResolvedValue('/test/worktree'),
+    } as unknown as WorktreeResolver;
+
+    mockSettingsService = null;
+
+    mockRunAgentFn = vi.fn().mockResolvedValue(undefined);
+    mockExecutePipelineFn = vi.fn().mockResolvedValue(undefined);
+    mockUpdateFeatureStatusFn = vi.fn().mockResolvedValue(undefined);
+    mockLoadFeatureFn = vi.fn().mockResolvedValue(testFeature);
+    mockGetPlanningPromptPrefixFn = vi.fn().mockResolvedValue('');
+    mockSaveFeatureSummaryFn = vi.fn().mockResolvedValue(undefined);
+    mockRecordLearningsFn = vi.fn().mockResolvedValue(undefined);
+    mockContextExistsFn = vi.fn().mockResolvedValue(false);
+    mockResumeFeatureFn = vi.fn().mockResolvedValue(undefined);
+    mockTrackFailureFn = vi.fn().mockReturnValue(false);
+    mockSignalPauseFn = vi.fn();
+    mockRecordSuccessFn = vi.fn();
+    mockSaveExecutionStateFn = vi.fn().mockResolvedValue(undefined);
+    mockLoadContextFilesFn = vi.fn().mockResolvedValue({
+      formattedPrompt: 'test context',
+      memoryFiles: [],
+    });
+
+    // Default mocks for secureFs
+    // Include tool usage markers to simulate meaningful agent output.
+    // The execution service checks for '🔧 Tool:' markers and minimum
+    // output length to determine if the agent did real work.
+    vi.mocked(secureFs.readFile).mockResolvedValue(
+      'Starting implementation...\n\n🔧 Tool: Read\nInput: {"file_path": "/src/index.ts"}\n\n' +
+        '🔧 Tool: Edit\nInput: {"file_path": "/src/index.ts", "old_string": "foo", "new_string": "bar"}\n\n' +
+        'Implementation complete. Updated the code as requested.'
+    );
+    vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+    // Re-setup platform mocks
+    vi.mocked(getFeatureDir).mockImplementation(
+      (projectPath: string, featureId: string) => `${projectPath}/.automaker/features/${featureId}`
+    );
+
+    // Default pipeline config (no steps)
+    vi.mocked(pipelineService.getPipelineConfig).mockResolvedValue({ version: 1, steps: [] });
+
+    // Re-setup settings helpers mocks (vi.clearAllMocks clears implementations)
+    vi.mocked(getPromptCustomization).mockResolvedValue({
+      taskExecution: {
+        implementationInstructions: 'test instructions',
+        playwrightVerificationInstructions: 'test playwright',
+        continuationAfterApprovalTemplate:
+          '{{userFeedback}}\n\nApproved plan:\n{{approvedPlan}}\n\nProceed.',
+      },
+    } as Awaited<ReturnType<typeof getPromptCustomization>>);
+    vi.mocked(getAutoLoadClaudeMdSetting).mockResolvedValue(true);
+    vi.mocked(getUseClaudeCodeSystemPromptSetting).mockResolvedValue(true);
+    vi.mocked(filterClaudeMdFromContext).mockReturnValue('context prompt');
+
+    // Re-setup spec-parser mock
+    vi.mocked(extractSummary).mockReturnValue('Test summary');
+
+    // Re-setup model-resolver mock
+    vi.mocked(resolveModelString).mockReturnValue('claude-sonnet-4');
+
+    service = new ExecutionService(
+      mockEventBus,
+      mockConcurrencyManager,
+      mockWorktreeResolver,
+      mockSettingsService,
+      mockRunAgentFn,
+      mockExecutePipelineFn,
+      mockUpdateFeatureStatusFn,
+      mockLoadFeatureFn,
+      mockGetPlanningPromptPrefixFn,
+      mockSaveFeatureSummaryFn,
+      mockRecordLearningsFn,
+      mockContextExistsFn,
+      mockResumeFeatureFn,
+      mockTrackFailureFn,
+      mockSignalPauseFn,
+      mockRecordSuccessFn,
+      mockSaveExecutionStateFn,
+      mockLoadContextFilesFn
+    );
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('constructor', () => {
+    it('creates service with all dependencies', () => {
+      expect(service).toBeInstanceOf(ExecutionService);
+    });
+
+    it('accepts null settingsService', () => {
+      const svc = new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        null,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+      expect(svc).toBeInstanceOf(ExecutionService);
+    });
+  });
+
+  describe('buildFeaturePrompt', () => {
+    const taskPrompts = {
+      implementationInstructions: 'impl instructions',
+      playwrightVerificationInstructions: 'playwright instructions',
+    };
+
+    it('includes feature title and description', () => {
+      const prompt = service.buildFeaturePrompt(testFeature, taskPrompts);
+      expect(prompt).toContain('**Feature ID:** feature-1');
+      expect(prompt).toContain('Test description');
+    });
+
+    it('includes specification when present', () => {
+      const featureWithSpec: Feature = {
+        ...testFeature,
+        spec: 'Detailed specification here',
+      };
+      const prompt = service.buildFeaturePrompt(featureWithSpec, taskPrompts);
+      expect(prompt).toContain('**Specification:**');
+      expect(prompt).toContain('Detailed specification here');
+    });
+
+    it('includes acceptance criteria from task prompts', () => {
+      const prompt = service.buildFeaturePrompt(testFeature, taskPrompts);
+      expect(prompt).toContain('impl instructions');
+    });
+
+    it('adds playwright instructions when skipTests is false', () => {
+      const featureWithTests: Feature = { ...testFeature, skipTests: false };
+      const prompt = service.buildFeaturePrompt(featureWithTests, taskPrompts);
+      expect(prompt).toContain('playwright instructions');
+    });
+
+    it('omits playwright instructions when skipTests is true', () => {
+      const featureWithoutTests: Feature = { ...testFeature, skipTests: true };
+      const prompt = service.buildFeaturePrompt(featureWithoutTests, taskPrompts);
+      expect(prompt).not.toContain('playwright instructions');
+    });
+
+    it('includes images note when imagePaths present', () => {
+      const featureWithImages: Feature = {
+        ...testFeature,
+        imagePaths: ['/path/to/image.png', { path: '/path/to/image2.jpg', mimeType: 'image/jpeg' }],
+      };
+      const prompt = service.buildFeaturePrompt(featureWithImages, taskPrompts);
+      expect(prompt).toContain('Context Images Attached:');
+      expect(prompt).toContain('2 image(s)');
+    });
+
+    it('extracts title from first line of description', () => {
+      const featureWithLongDesc: Feature = {
+        ...testFeature,
+        description: 'First line title\nRest of description',
+      };
+      const prompt = service.buildFeaturePrompt(featureWithLongDesc, taskPrompts);
+      expect(prompt).toContain('**Title:** First line title');
+    });
+
+    it('truncates long titles to 60 characters', () => {
+      const longDescription = 'A'.repeat(100);
+      const featureWithLongTitle: Feature = {
+        ...testFeature,
+        description: longDescription,
+      };
+      const prompt = service.buildFeaturePrompt(featureWithLongTitle, taskPrompts);
+      expect(prompt).toContain('**Title:** ' + 'A'.repeat(57) + '...');
+    });
+  });
+
+  describe('executeFeature', () => {
+    it('throws if feature not found', async () => {
+      mockLoadFeatureFn = vi.fn().mockResolvedValue(null);
+      const svc = new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+
+      await svc.executeFeature('/test/project', 'nonexistent');
+
+      // Error event should be emitted
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_error',
+        expect.objectContaining({ featureId: 'nonexistent' })
+      );
+    });
+
+    it('acquires running feature slot', async () => {
+      await service.executeFeature('/test/project', 'feature-1');
+
+      expect(mockConcurrencyManager.acquire).toHaveBeenCalledWith(
+        expect.objectContaining({
+          featureId: 'feature-1',
+          projectPath: '/test/project',
+        })
+      );
+    });
+
+    it('updates status to in_progress before starting', async () => {
+      await service.executeFeature('/test/project', 'feature-1');
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'in_progress'
+      );
+    });
+
+    it('emits feature_start event after status update', async () => {
+      await service.executeFeature('/test/project', 'feature-1');
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_feature_start',
+        expect.objectContaining({
+          featureId: 'feature-1',
+          projectPath: '/test/project',
+        })
+      );
+
+      // Verify order: status update happens before event
+      const statusCallIndex = mockUpdateFeatureStatusFn.mock.invocationCallOrder[0];
+      const eventCallIndex = mockEventBus.emitAutoModeEvent.mock.invocationCallOrder[0];
+      expect(statusCallIndex).toBeLessThan(eventCallIndex);
+    });
+
+    it('runs agent with correct prompt', async () => {
+      await service.executeFeature('/test/project', 'feature-1');
+
+      expect(mockRunAgentFn).toHaveBeenCalled();
+      const callArgs = mockRunAgentFn.mock.calls[0];
+      expect(callArgs[0]).toMatch(/test.*project/); // workDir contains project
+      expect(callArgs[1]).toBe('feature-1');
+      expect(callArgs[2]).toContain('Feature Task');
+      expect(callArgs[3]).toBeInstanceOf(AbortController);
+      expect(callArgs[4]).toBe('/test/project');
+      // Model (index 6) should be resolved
+      expect(callArgs[6]).toBe('claude-sonnet-4');
+    });
+
+    it('passes providerId to runAgentFn when present on feature', async () => {
+      const featureWithProvider: Feature = {
+        ...testFeature,
+        providerId: 'zai-provider-1',
+      };
+      vi.mocked(mockLoadFeatureFn).mockResolvedValue(featureWithProvider);
+
+      await service.executeFeature('/test/project', 'feature-1');
+
+      expect(mockRunAgentFn).toHaveBeenCalled();
+      const callArgs = mockRunAgentFn.mock.calls[0];
+      const options = callArgs[7];
+      expect(options.providerId).toBe('zai-provider-1');
+    });
+
+    it('executes pipeline after agent completes', async () => {
+      const pipelineSteps = [{ id: 'step-1', name: 'Step 1', order: 1, instructions: 'Do step 1' }];
+      vi.mocked(pipelineService.getPipelineConfig).mockResolvedValue({
+        version: 1,
+        steps: pipelineSteps as any,
+      });
+
+      await service.executeFeature('/test/project', 'feature-1');
+
+      // Agent runs first
+      expect(mockRunAgentFn).toHaveBeenCalled();
+      // Then pipeline executes
+      expect(mockExecutePipelineFn).toHaveBeenCalledWith(
+        expect.objectContaining({
+          projectPath: '/test/project',
+          featureId: 'feature-1',
+          steps: pipelineSteps,
+        })
+      );
+    });
+
+    it('updates status to verified on completion', async () => {
+      await service.executeFeature('/test/project', 'feature-1');
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'verified'
+      );
+    });
+
+    it('updates status to waiting_approval when skipTests is true', async () => {
+      mockLoadFeatureFn = vi.fn().mockResolvedValue({ ...testFeature, skipTests: true });
+      const svc = new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'waiting_approval'
+      );
+    });
+
+    it('records success on completion', async () => {
+      await service.executeFeature('/test/project', 'feature-1');
+
+      expect(mockRecordSuccessFn).toHaveBeenCalled();
+    });
+
+    it('releases running feature in finally block', async () => {
+      await service.executeFeature('/test/project', 'feature-1');
+
+      expect(mockConcurrencyManager.release).toHaveBeenCalledWith('feature-1', undefined);
+    });
+
+    it('redirects to resumeFeature when context exists', async () => {
+      mockContextExistsFn = vi.fn().mockResolvedValue(true);
+      const svc = new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+
+      await svc.executeFeature('/test/project', 'feature-1', true);
+
+      expect(mockResumeFeatureFn).toHaveBeenCalledWith('/test/project', 'feature-1', true, true);
+      // Should not run agent
+      expect(mockRunAgentFn).not.toHaveBeenCalled();
+    });
+
+    it('emits feature_complete event on success when isAutoMode is true', async () => {
+      await service.executeFeature('/test/project', 'feature-1', false, true);
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_feature_complete',
+        expect.objectContaining({
+          featureId: 'feature-1',
+          passes: true,
+        })
+      );
+    });
+
+    it('does not emit feature_complete event on success when isAutoMode is false', async () => {
+      await service.executeFeature('/test/project', 'feature-1', false, false);
+
+      const completeCalls = vi
+        .mocked(mockEventBus.emitAutoModeEvent)
+        .mock.calls.filter((call) => call[0] === 'auto_mode_feature_complete');
+      expect(completeCalls.length).toBe(0);
+    });
+  });
+
+  describe('executeFeature - approved plan handling', () => {
+    it('builds continuation prompt for approved plan', async () => {
+      const featureWithApprovedPlan: Feature = {
+        ...testFeature,
+        planSpec: { status: 'approved', content: 'The approved plan content' },
+      };
+      mockLoadFeatureFn = vi.fn().mockResolvedValue(featureWithApprovedPlan);
+
+      const svc = new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // Agent should be called with continuation prompt
+      expect(mockRunAgentFn).toHaveBeenCalled();
+      const callArgs = mockRunAgentFn.mock.calls[0];
+      expect(callArgs[1]).toBe('feature-1');
+      expect(callArgs[2]).toContain('The approved plan content');
+    });
+
+    it('recursively calls executeFeature with continuation', async () => {
+      const featureWithApprovedPlan: Feature = {
+        ...testFeature,
+        planSpec: { status: 'approved', content: 'Plan' },
+      };
+      mockLoadFeatureFn = vi.fn().mockResolvedValue(featureWithApprovedPlan);
+
+      const svc = new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // acquire should be called twice - once for initial, once for recursive
+      expect(mockConcurrencyManager.acquire).toHaveBeenCalledTimes(2);
+      // Second call should have allowReuse: true
+      expect(mockConcurrencyManager.acquire).toHaveBeenLastCalledWith(
+        expect.objectContaining({ allowReuse: true })
+      );
+    });
+
+    it('skips contextExists check when continuation prompt provided', async () => {
+      // Feature has context AND approved plan, but continuation prompt is provided
+      const featureWithApprovedPlan: Feature = {
+        ...testFeature,
+        planSpec: { status: 'approved', content: 'Plan' },
+      };
+      mockLoadFeatureFn = vi.fn().mockResolvedValue(featureWithApprovedPlan);
+      mockContextExistsFn = vi.fn().mockResolvedValue(true);
+
+      const svc = new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // resumeFeature should NOT be called even though context exists
+      // because we're going through approved plan flow
+      expect(mockResumeFeatureFn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('executeFeature - incomplete task retry', () => {
+    const createServiceWithMocks = () => {
+      return new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+    };
+
+    it('does not re-run agent when feature has no tasks', async () => {
+      // Feature with no planSpec/tasks - should complete normally with 1 agent call
+      mockLoadFeatureFn = vi.fn().mockResolvedValue(testFeature);
+      const svc = createServiceWithMocks();
+
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockRunAgentFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not re-run agent when all tasks are completed', async () => {
+      const featureWithCompletedTasks: Feature = {
+        ...testFeature,
+        planSpec: {
+          status: 'approved',
+          content: 'Plan',
+          tasks: [
+            { id: 'T001', title: 'Task 1', status: 'completed', description: 'First task' },
+            { id: 'T002', title: 'Task 2', status: 'completed', description: 'Second task' },
+          ],
+          tasksCompleted: 2,
+        },
+      };
+      mockLoadFeatureFn = vi.fn().mockResolvedValue(featureWithCompletedTasks);
+      const svc = createServiceWithMocks();
+
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // Only the initial agent call + the approved-plan recursive call
+      // The approved plan triggers recursive executeFeature, so runAgentFn is called once in the inner call
+      expect(mockRunAgentFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('re-runs agent when there are pending tasks after initial execution', async () => {
+      const featureWithPendingTasks: Feature = {
+        ...testFeature,
+        planSpec: {
+          status: 'approved',
+          content: 'Plan',
+          tasks: [
+            { id: 'T001', title: 'Task 1', status: 'completed', description: 'First task' },
+            { id: 'T002', title: 'Task 2', status: 'pending', description: 'Second task' },
+            { id: 'T003', title: 'Task 3', status: 'pending', description: 'Third task' },
+          ],
+          tasksCompleted: 1,
+        },
+      };
+
+      // After first agent run, loadFeature returns feature with pending tasks
+      // After second agent run, loadFeature returns feature with all tasks completed
+      const featureAllDone: Feature = {
+        ...testFeature,
+        planSpec: {
+          status: 'approved',
+          content: 'Plan',
+          tasks: [
+            { id: 'T001', title: 'Task 1', status: 'completed', description: 'First task' },
+            { id: 'T002', title: 'Task 2', status: 'completed', description: 'Second task' },
+            { id: 'T003', title: 'Task 3', status: 'completed', description: 'Third task' },
+          ],
+          tasksCompleted: 3,
+        },
+      };
+
+      let loadCallCount = 0;
+      mockLoadFeatureFn = vi.fn().mockImplementation(() => {
+        loadCallCount++;
+        // First call: initial feature load at the top of executeFeature
+        // Second call: after first agent run (check for incomplete tasks) - has pending tasks
+        // Third call: after second agent run (check for incomplete tasks) - all done
+        if (loadCallCount <= 2) return featureWithPendingTasks;
+        return featureAllDone;
+      });
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1', false, false, undefined, {
+        continuationPrompt: 'Continue',
+        _calledInternally: true,
+      });
+
+      // Should have called runAgentFn twice: initial + one retry
+      expect(mockRunAgentFn).toHaveBeenCalledTimes(2);
+
+      // The retry call should contain continuation prompt about incomplete tasks
+      const retryCallArgs = mockRunAgentFn.mock.calls[1];
+      expect(retryCallArgs[2]).toContain('Continue Implementation - Incomplete Tasks');
+      expect(retryCallArgs[2]).toContain('T002');
+      expect(retryCallArgs[2]).toContain('T003');
+
+      // Should have emitted a progress event about retrying
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_progress',
+        expect.objectContaining({
+          featureId: 'feature-1',
+          content: expect.stringContaining('Re-running to complete tasks'),
+        })
+      );
+    });
+
+    it('respects maximum retry attempts', async () => {
+      const featureAlwaysPending: Feature = {
+        ...testFeature,
+        planSpec: {
+          status: 'approved',
+          content: 'Plan',
+          tasks: [
+            { id: 'T001', title: 'Task 1', status: 'completed', description: 'First task' },
+            { id: 'T002', title: 'Task 2', status: 'pending', description: 'Second task' },
+          ],
+          tasksCompleted: 1,
+        },
+      };
+
+      // Always return feature with pending tasks (agent never completes T002)
+      mockLoadFeatureFn = vi.fn().mockResolvedValue(featureAlwaysPending);
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1', false, false, undefined, {
+        continuationPrompt: 'Continue',
+        _calledInternally: true,
+      });
+
+      // Initial run + 3 retry attempts = 4 total
+      expect(mockRunAgentFn).toHaveBeenCalledTimes(4);
+
+      // Should still set final status even with incomplete tasks
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'verified'
+      );
+    });
+
+    it('stops retrying when abort signal is triggered', async () => {
+      const featureWithPendingTasks: Feature = {
+        ...testFeature,
+        planSpec: {
+          status: 'approved',
+          content: 'Plan',
+          tasks: [
+            { id: 'T001', title: 'Task 1', status: 'completed', description: 'First task' },
+            { id: 'T002', title: 'Task 2', status: 'pending', description: 'Second task' },
+          ],
+          tasksCompleted: 1,
+        },
+      };
+
+      mockLoadFeatureFn = vi.fn().mockResolvedValue(featureWithPendingTasks);
+
+      // Simulate abort after first agent run
+      let runCount = 0;
+      const capturedAbortController = { current: null as AbortController | null };
+      mockRunAgentFn = vi.fn().mockImplementation((_wd, _fid, _prompt, abortCtrl) => {
+        capturedAbortController.current = abortCtrl;
+        runCount++;
+        if (runCount >= 1) {
+          // Abort after first run
+          abortCtrl.abort();
+        }
+        return Promise.resolve();
+      });
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1', false, false, undefined, {
+        continuationPrompt: 'Continue',
+        _calledInternally: true,
+      });
+
+      // Should only have the initial run, then abort prevents retries
+      expect(mockRunAgentFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('re-runs agent for in_progress tasks (not just pending)', async () => {
+      const featureWithInProgressTask: Feature = {
+        ...testFeature,
+        planSpec: {
+          status: 'approved',
+          content: 'Plan',
+          tasks: [
+            { id: 'T001', title: 'Task 1', status: 'completed', description: 'First task' },
+            { id: 'T002', title: 'Task 2', status: 'in_progress', description: 'Second task' },
+          ],
+          tasksCompleted: 1,
+          currentTaskId: 'T002',
+        },
+      };
+
+      const featureAllDone: Feature = {
+        ...testFeature,
+        planSpec: {
+          status: 'approved',
+          content: 'Plan',
+          tasks: [
+            { id: 'T001', title: 'Task 1', status: 'completed', description: 'First task' },
+            { id: 'T002', title: 'Task 2', status: 'completed', description: 'Second task' },
+          ],
+          tasksCompleted: 2,
+        },
+      };
+
+      let loadCallCount = 0;
+      mockLoadFeatureFn = vi.fn().mockImplementation(() => {
+        loadCallCount++;
+        if (loadCallCount <= 2) return featureWithInProgressTask;
+        return featureAllDone;
+      });
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1', false, false, undefined, {
+        continuationPrompt: 'Continue',
+        _calledInternally: true,
+      });
+
+      // Should have retried for the in_progress task
+      expect(mockRunAgentFn).toHaveBeenCalledTimes(2);
+
+      // The retry prompt should mention the in_progress task
+      const retryCallArgs = mockRunAgentFn.mock.calls[1];
+      expect(retryCallArgs[2]).toContain('T002');
+      expect(retryCallArgs[2]).toContain('in_progress');
+    });
+
+    it('uses planningMode skip and no plan approval for retry runs', async () => {
+      const featureWithPendingTasks: Feature = {
+        ...testFeature,
+        planningMode: 'full',
+        requirePlanApproval: true,
+        planSpec: {
+          status: 'approved',
+          content: 'Plan',
+          tasks: [
+            { id: 'T001', title: 'Task 1', status: 'completed', description: 'First task' },
+            { id: 'T002', title: 'Task 2', status: 'pending', description: 'Second task' },
+          ],
+          tasksCompleted: 1,
+        },
+      };
+
+      const featureAllDone: Feature = {
+        ...testFeature,
+        planSpec: {
+          status: 'approved',
+          content: 'Plan',
+          tasks: [
+            { id: 'T001', title: 'Task 1', status: 'completed', description: 'First task' },
+            { id: 'T002', title: 'Task 2', status: 'completed', description: 'Second task' },
+          ],
+          tasksCompleted: 2,
+        },
+      };
+
+      let loadCallCount = 0;
+      mockLoadFeatureFn = vi.fn().mockImplementation(() => {
+        loadCallCount++;
+        if (loadCallCount <= 2) return featureWithPendingTasks;
+        return featureAllDone;
+      });
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1', false, false, undefined, {
+        continuationPrompt: 'Continue',
+        _calledInternally: true,
+      });
+
+      // The retry agent call should use planningMode: 'skip' and requirePlanApproval: false
+      const retryCallArgs = mockRunAgentFn.mock.calls[1];
+      const retryOptions = retryCallArgs[7]; // options object
+      expect(retryOptions.planningMode).toBe('skip');
+      expect(retryOptions.requirePlanApproval).toBe(false);
+    });
+  });
+
+  describe('executeFeature - error handling', () => {
+    it('classifies and emits error event', async () => {
+      const testError = new Error('Test error');
+      mockRunAgentFn = vi.fn().mockRejectedValue(testError);
+      const svc = new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_error',
+        expect.objectContaining({
+          featureId: 'feature-1',
+          error: 'Test error',
+        })
+      );
+    });
+
+    it('updates status to backlog on error', async () => {
+      const testError = new Error('Test error');
+      mockRunAgentFn = vi.fn().mockRejectedValue(testError);
+      const svc = new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'backlog'
+      );
+    });
+
+    it('tracks failure and checks pause', async () => {
+      const testError = new Error('Rate limit error');
+      mockRunAgentFn = vi.fn().mockRejectedValue(testError);
+      const svc = new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockTrackFailureFn).toHaveBeenCalledWith(
+        expect.objectContaining({
+          message: 'Rate limit error',
+        })
+      );
+    });
+
+    it('signals pause when threshold reached', async () => {
+      const testError = new Error('Quota exceeded');
+      mockRunAgentFn = vi.fn().mockRejectedValue(testError);
+      mockTrackFailureFn = vi.fn().mockReturnValue(true); // threshold reached
+
+      const svc = new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockSignalPauseFn).toHaveBeenCalledWith(
+        expect.objectContaining({
+          message: 'Quota exceeded',
+        })
+      );
+    });
+
+    it('handles abort signal without error event (emits feature_complete when isAutoMode=true)', async () => {
+      const abortError = new Error('abort');
+      abortError.name = 'AbortError';
+      mockRunAgentFn = vi.fn().mockRejectedValue(abortError);
+
+      const svc = new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+
+      await svc.executeFeature('/test/project', 'feature-1', false, true);
+
+      // Should emit feature_complete with stopped by user
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_feature_complete',
+        expect.objectContaining({
+          featureId: 'feature-1',
+          passes: false,
+          message: 'Feature stopped by user',
+        })
+      );
+
+      // Should NOT emit error event
+      const errorCalls = vi
+        .mocked(mockEventBus.emitAutoModeEvent)
+        .mock.calls.filter((call) => call[0] === 'auto_mode_error');
+      expect(errorCalls.length).toBe(0);
+    });
+
+    it('handles abort signal without emitting feature_complete when isAutoMode=false', async () => {
+      const abortError = new Error('abort');
+      abortError.name = 'AbortError';
+      mockRunAgentFn = vi.fn().mockRejectedValue(abortError);
+
+      const svc = new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+
+      await svc.executeFeature('/test/project', 'feature-1', false, false);
+
+      // Should NOT emit feature_complete when isAutoMode is false
+      const completeCalls = vi
+        .mocked(mockEventBus.emitAutoModeEvent)
+        .mock.calls.filter((call) => call[0] === 'auto_mode_feature_complete');
+      expect(completeCalls.length).toBe(0);
+
+      // Should NOT emit error event (abort is not an error)
+      const errorCalls = vi
+        .mocked(mockEventBus.emitAutoModeEvent)
+        .mock.calls.filter((call) => call[0] === 'auto_mode_error');
+      expect(errorCalls.length).toBe(0);
+    });
+
+    it('releases running feature even on error', async () => {
+      const testError = new Error('Test error');
+      mockRunAgentFn = vi.fn().mockRejectedValue(testError);
+      const svc = new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockConcurrencyManager.release).toHaveBeenCalledWith('feature-1', undefined);
+    });
+  });
+
+  describe('stopFeature', () => {
+    it('returns false if feature not running', async () => {
+      vi.mocked(mockConcurrencyManager.getRunningFeature).mockReturnValue(undefined);
+
+      const result = await service.stopFeature('feature-1');
+
+      expect(result).toBe(false);
+    });
+
+    it('aborts running feature', async () => {
+      const runningFeature = createRunningFeature('feature-1');
+      const abortSpy = vi.spyOn(runningFeature.abortController, 'abort');
+      vi.mocked(mockConcurrencyManager.getRunningFeature).mockReturnValue(runningFeature);
+
+      const result = await service.stopFeature('feature-1');
+
+      expect(result).toBe(true);
+      expect(abortSpy).toHaveBeenCalled();
+    });
+
+    it('releases running feature with force', async () => {
+      const runningFeature = createRunningFeature('feature-1');
+      vi.mocked(mockConcurrencyManager.getRunningFeature).mockReturnValue(runningFeature);
+
+      await service.stopFeature('feature-1');
+
+      expect(mockConcurrencyManager.release).toHaveBeenCalledWith('feature-1', { force: true });
+    });
+
+    it('immediately updates feature status to interrupted before subprocess terminates', async () => {
+      const runningFeature = createRunningFeature('feature-1');
+      vi.mocked(mockConcurrencyManager.getRunningFeature).mockReturnValue(runningFeature);
+
+      await service.stopFeature('feature-1');
+
+      // Should update to 'interrupted' immediately so the UI reflects the stop
+      // without waiting for the CLI subprocess to fully terminate
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'interrupted'
+      );
+    });
+
+    it('still aborts and releases even if status update fails', async () => {
+      const runningFeature = createRunningFeature('feature-1');
+      const abortSpy = vi.spyOn(runningFeature.abortController, 'abort');
+      vi.mocked(mockConcurrencyManager.getRunningFeature).mockReturnValue(runningFeature);
+      vi.mocked(mockUpdateFeatureStatusFn).mockRejectedValueOnce(new Error('disk error'));
+
+      const result = await service.stopFeature('feature-1');
+
+      expect(result).toBe(true);
+      expect(abortSpy).toHaveBeenCalled();
+      expect(mockConcurrencyManager.release).toHaveBeenCalledWith('feature-1', { force: true });
+    });
+  });
+
+  describe('worktree resolution', () => {
+    it('uses worktree when useWorktrees is true and branch exists', async () => {
+      await service.executeFeature('/test/project', 'feature-1', true);
+
+      expect(mockWorktreeResolver.findWorktreeForBranch).toHaveBeenCalledWith(
+        '/test/project',
+        'feature/test-1'
+      );
+    });
+
+    it('emits error and does not execute agent when worktree is not found in worktree mode', async () => {
+      vi.mocked(mockWorktreeResolver.findWorktreeForBranch).mockResolvedValue(null);
+
+      await service.executeFeature('/test/project', 'feature-1', true);
+
+      expect(mockRunAgentFn).not.toHaveBeenCalled();
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_error',
+        expect.objectContaining({
+          featureId: 'feature-1',
+          error: 'Worktree enabled but no worktree found for feature branch "feature/test-1".',
+        })
+      );
+    });
+
+    it('skips worktree resolution when useWorktrees is false', async () => {
+      await service.executeFeature('/test/project', 'feature-1', false);
+
+      expect(mockWorktreeResolver.findWorktreeForBranch).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('auto-mode integration', () => {
+    it('saves execution state when isAutoMode is true', async () => {
+      await service.executeFeature('/test/project', 'feature-1', false, true);
+
+      expect(mockSaveExecutionStateFn).toHaveBeenCalledWith('/test/project');
+    });
+
+    it('saves execution state after completion in auto-mode', async () => {
+      await service.executeFeature('/test/project', 'feature-1', false, true);
+
+      // Should be called twice: once at start, once at end
+      expect(mockSaveExecutionStateFn).toHaveBeenCalledTimes(2);
+    });
+
+    it('does not save execution state when isAutoMode is false', async () => {
+      await service.executeFeature('/test/project', 'feature-1', false, false);
+
+      expect(mockSaveExecutionStateFn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('planning mode', () => {
+    it('calls getPlanningPromptPrefix for features', async () => {
+      await service.executeFeature('/test/project', 'feature-1');
+
+      expect(mockGetPlanningPromptPrefixFn).toHaveBeenCalledWith(testFeature);
+    });
+
+    it('emits planning_started event when planning mode is not skip', async () => {
+      const featureWithPlanning: Feature = {
+        ...testFeature,
+        planningMode: 'lite',
+      };
+      mockLoadFeatureFn = vi.fn().mockResolvedValue(featureWithPlanning);
+      const svc = new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'planning_started',
+        expect.objectContaining({
+          featureId: 'feature-1',
+          mode: 'lite',
+        })
+      );
+    });
+  });
+
+  describe('summary extraction', () => {
+    it('extracts and saves summary from agent output', async () => {
+      vi.mocked(secureFs.readFile).mockResolvedValue('Agent output with summary');
+
+      await service.executeFeature('/test/project', 'feature-1');
+
+      expect(mockSaveFeatureSummaryFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'Test summary'
+      );
+    });
+
+    it('records learnings from agent output', async () => {
+      vi.mocked(secureFs.readFile).mockResolvedValue('Agent output');
+
+      await service.executeFeature('/test/project', 'feature-1');
+
+      expect(mockRecordLearningsFn).toHaveBeenCalledWith(
+        '/test/project',
+        testFeature,
+        'Agent output'
+      );
+    });
+
+    it('handles missing agent output gracefully', async () => {
+      vi.mocked(secureFs.readFile).mockRejectedValue(new Error('ENOENT'));
+
+      // Should not throw (isAutoMode=true so event is emitted)
+      await service.executeFeature('/test/project', 'feature-1', false, true);
+
+      // Feature should still complete successfully
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_feature_complete',
+        expect.objectContaining({ passes: true })
+      );
+    });
+
+    // Helper to create ExecutionService with a custom loadFeatureFn that returns
+    // different features on first load (initial) vs subsequent loads (after completion)
+    const createServiceWithCustomLoad = (completedFeature: Feature): ExecutionService => {
+      let loadCallCount = 0;
+      mockLoadFeatureFn = vi.fn().mockImplementation(() => {
+        loadCallCount++;
+        return loadCallCount === 1 ? testFeature : completedFeature;
+      });
+
+      return new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+    };
+
+    it('does not overwrite accumulated summary when feature already has one', async () => {
+      const featureWithAccumulatedSummary: Feature = {
+        ...testFeature,
+        summary:
+          '### Implementation\n\nFirst step output\n\n---\n\n### Code Review\n\nReview findings',
+      };
+
+      const svc = createServiceWithCustomLoad(featureWithAccumulatedSummary);
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // saveFeatureSummaryFn should NOT be called because feature already has a summary
+      // This prevents overwriting accumulated pipeline summaries with just the last step's output
+      expect(mockSaveFeatureSummaryFn).not.toHaveBeenCalled();
+    });
+
+    it('saves summary when feature has no existing summary', async () => {
+      const featureWithoutSummary: Feature = {
+        ...testFeature,
+        summary: undefined,
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(
+        '🔧 Tool: Edit\nInput: {"file_path": "/src/index.ts"}\n\n<summary>New summary</summary>'
+      );
+
+      const svc = createServiceWithCustomLoad(featureWithoutSummary);
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // Should save the extracted summary since feature has none
+      expect(mockSaveFeatureSummaryFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'Test summary'
+      );
+    });
+
+    it('does not overwrite summary when feature has empty string summary (treats as no summary)', async () => {
+      // Empty string is falsy, so it should be treated as "no summary" and a new one should be saved
+      const featureWithEmptySummary: Feature = {
+        ...testFeature,
+        summary: '',
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(
+        '🔧 Tool: Edit\nInput: {"file_path": "/src/index.ts"}\n\n<summary>New summary</summary>'
+      );
+
+      const svc = createServiceWithCustomLoad(featureWithEmptySummary);
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // Empty string is falsy, so it should save a new summary
+      expect(mockSaveFeatureSummaryFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'Test summary'
+      );
+    });
+
+    it('preserves accumulated summary when feature is transitioned from pipeline to verified', async () => {
+      // This is the key scenario: feature went through pipeline steps, accumulated a summary,
+      // then status changed to 'verified' - we should NOT overwrite the accumulated summary
+      const featureWithAccumulatedSummary: Feature = {
+        ...testFeature,
+        status: 'verified',
+        summary:
+          '### Implementation\n\nCreated auth module\n\n---\n\n### Code Review\n\nApproved\n\n---\n\n### Testing\n\nAll tests pass',
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue('Agent output with summary');
+
+      const svc = createServiceWithCustomLoad(featureWithAccumulatedSummary);
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // The accumulated summary should be preserved
+      expect(mockSaveFeatureSummaryFn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('executeFeature - agent output validation', () => {
+    // Helper to generate realistic agent output with tool markers
+    const makeAgentOutput = (toolCount: number, extraText = ''): string => {
+      let output = 'Starting implementation...\n\n';
+      for (let i = 0; i < toolCount; i++) {
+        output += `🔧 Tool: Edit\nInput: {"file_path": "/src/file${i}.ts", "old_string": "old${i}", "new_string": "new${i}"}\n\n`;
+      }
+      output += `Implementation complete. ${extraText}`;
+      return output;
+    };
+
+    const createServiceWithMocks = () => {
+      return new ExecutionService(
+        mockEventBus,
+        mockConcurrencyManager,
+        mockWorktreeResolver,
+        mockSettingsService,
+        mockRunAgentFn,
+        mockExecutePipelineFn,
+        mockUpdateFeatureStatusFn,
+        mockLoadFeatureFn,
+        mockGetPlanningPromptPrefixFn,
+        mockSaveFeatureSummaryFn,
+        mockRecordLearningsFn,
+        mockContextExistsFn,
+        mockResumeFeatureFn,
+        mockTrackFailureFn,
+        mockSignalPauseFn,
+        mockRecordSuccessFn,
+        mockSaveExecutionStateFn,
+        mockLoadContextFilesFn
+      );
+    };
+
+    it('sets verified when agent output has tool usage and sufficient length', async () => {
+      const output = makeAgentOutput(3, 'Updated authentication module with new login flow.');
+      vi.mocked(secureFs.readFile).mockResolvedValue(output);
+
+      await service.executeFeature('/test/project', 'feature-1');
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'verified'
+      );
+    });
+
+    it('sets waiting_approval when agent output is empty', async () => {
+      vi.mocked(secureFs.readFile).mockResolvedValue('');
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'waiting_approval'
+      );
+    });
+
+    it('sets waiting_approval when agent output has no tool usage markers', async () => {
+      // Long output but no tool markers - agent printed text but didn't use tools
+      const longOutputNoTools = 'I analyzed the codebase and found several issues. '.repeat(20);
+      vi.mocked(secureFs.readFile).mockResolvedValue(longOutputNoTools);
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'waiting_approval'
+      );
+    });
+
+    it('sets waiting_approval when agent output has tool markers but is too short', async () => {
+      // Has a tool marker but total output is under 200 chars
+      const shortWithTool = '🔧 Tool: Read\nInput: {"file_path": "/src/index.ts"}\nDone.';
+      expect(shortWithTool.trim().length).toBeLessThan(200);
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(shortWithTool);
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'waiting_approval'
+      );
+    });
+
+    it('sets waiting_approval when agent output file is missing (ENOENT)', async () => {
+      vi.mocked(secureFs.readFile).mockRejectedValue(new Error('ENOENT'));
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'waiting_approval'
+      );
+    });
+
+    it('sets waiting_approval when agent output is only whitespace', async () => {
+      vi.mocked(secureFs.readFile).mockResolvedValue('   \n\n\t  \n  ');
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'waiting_approval'
+      );
+    });
+
+    it('sets verified when output is exactly at the 200 char threshold with tool usage', async () => {
+      // Create output that's exactly 200 chars trimmed with tool markers
+      const toolMarker = '🔧 Tool: Edit\nInput: {"file_path": "/src/index.ts"}\n';
+      const padding = 'x'.repeat(200 - toolMarker.length);
+      const output = toolMarker + padding;
+      expect(output.trim().length).toBeGreaterThanOrEqual(200);
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(output);
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'verified'
+      );
+    });
+
+    it('sets waiting_approval when output is 199 chars with tool usage (below threshold)', async () => {
+      const toolMarker = '🔧 Tool: Read\n';
+      const padding = 'x'.repeat(199 - toolMarker.length);
+      const output = toolMarker + padding;
+      expect(output.trim().length).toBe(199);
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(output);
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'waiting_approval'
+      );
+    });
+
+    it('skipTests always takes priority over output validation', async () => {
+      // Meaningful output with tool usage - would normally be 'verified'
+      const output = makeAgentOutput(5, 'All changes applied successfully.');
+      vi.mocked(secureFs.readFile).mockResolvedValue(output);
+
+      mockLoadFeatureFn = vi.fn().mockResolvedValue({ ...testFeature, skipTests: true });
+      const svc = createServiceWithMocks();
+
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // skipTests=true always means waiting_approval regardless of output quality
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'waiting_approval'
+      );
+    });
+
+    it('skipTests with empty output still results in waiting_approval', async () => {
+      vi.mocked(secureFs.readFile).mockResolvedValue('');
+
+      mockLoadFeatureFn = vi.fn().mockResolvedValue({ ...testFeature, skipTests: true });
+      const svc = createServiceWithMocks();
+
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'waiting_approval'
+      );
+    });
+
+    it('still records success even when output validation fails', async () => {
+      vi.mocked(secureFs.readFile).mockResolvedValue('');
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // recordSuccess should still be called - the agent ran without errors
+      expect(mockRecordSuccessFn).toHaveBeenCalled();
+    });
+
+    it('still extracts summary when output has content but no tool markers', async () => {
+      const outputNoTools = 'A '.repeat(150); // > 200 chars but no tool markers
+      vi.mocked(secureFs.readFile).mockResolvedValue(outputNoTools);
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // Summary extraction still runs even though status is waiting_approval
+      expect(extractSummary).toHaveBeenCalledWith(outputNoTools);
+      expect(mockSaveFeatureSummaryFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'Test summary'
+      );
+    });
+
+    it('emits feature_complete with passes=true even when output validation routes to waiting_approval', async () => {
+      vi.mocked(secureFs.readFile).mockResolvedValue('');
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1', false, true);
+
+      // The agent ran without error - it's still a "pass" from the execution perspective
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_feature_complete',
+        expect.objectContaining({ passes: true })
+      );
+    });
+
+    it('handles realistic Cursor CLI output that exits quickly', async () => {
+      // Simulates a Cursor CLI that prints a brief message and exits
+      const cursorQuickExit = 'Task received. Processing...\nResult: completed successfully.';
+      expect(cursorQuickExit.includes('🔧 Tool:')).toBe(false);
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(cursorQuickExit);
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // No tool usage = waiting_approval
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'waiting_approval'
+      );
+    });
+
+    it('handles realistic Claude SDK output with multiple tool uses', async () => {
+      // Simulates a Claude SDK agent that does real work
+      const claudeOutput =
+        "I'll implement the requested feature.\n\n" +
+        '🔧 Tool: Read\nInput: {"file_path": "/src/components/App.tsx"}\n\n' +
+        'I can see the existing component structure. Let me modify it.\n\n' +
+        '🔧 Tool: Edit\nInput: {"file_path": "/src/components/App.tsx", "old_string": "const App = () => {", "new_string": "const App: React.FC = () => {"}\n\n' +
+        '🔧 Tool: Write\nInput: {"file_path": "/src/components/NewFeature.tsx"}\n\n' +
+        "I've created the new component and updated the existing one. The feature is now implemented with proper TypeScript types.";
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(claudeOutput);
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // Real work = verified
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'verified'
+      );
+    });
+
+    it('reads agent output from the correct path with utf-8 encoding', async () => {
+      const output = makeAgentOutput(2, 'Done with changes.');
+      vi.mocked(secureFs.readFile).mockResolvedValue(output);
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // Verify readFile was called with the correct path derived from getFeatureDir
+      expect(secureFs.readFile).toHaveBeenCalledWith(
+        '/test/project/.automaker/features/feature-1/agent-output.md',
+        'utf-8'
+      );
+    });
+
+    it('completion message includes auto-verified when status is verified', async () => {
+      const output = makeAgentOutput(3, 'All changes applied.');
+      vi.mocked(secureFs.readFile).mockResolvedValue(output);
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1', false, true);
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_feature_complete',
+        expect.objectContaining({
+          message: expect.stringContaining('auto-verified'),
+        })
+      );
+    });
+
+    it('completion message does NOT include auto-verified when status is waiting_approval', async () => {
+      // Empty output → waiting_approval
+      vi.mocked(secureFs.readFile).mockResolvedValue('');
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1', false, true);
+
+      const completeCall = vi
+        .mocked(mockEventBus.emitAutoModeEvent)
+        .mock.calls.find((call) => call[0] === 'auto_mode_feature_complete');
+      expect(completeCall).toBeDefined();
+      expect((completeCall![1] as { message: string }).message).not.toContain('auto-verified');
+    });
+
+    it('uses same agentOutput for both status determination and summary extraction', async () => {
+      // Specific output that is long enough with tool markers (verified path)
+      // AND has content for summary extraction
+      const specificOutput =
+        '🔧 Tool: Read\nReading file...\n🔧 Tool: Edit\nEditing file...\n' +
+        'The implementation is complete. Here is a detailed description of what was done. '.repeat(
+          3
+        );
+      vi.mocked(secureFs.readFile).mockResolvedValue(specificOutput);
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // Status should be verified (has tools + long enough)
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'verified'
+      );
+      // extractSummary should receive the exact same output
+      expect(extractSummary).toHaveBeenCalledWith(specificOutput);
+      // recordLearnings should also receive the same output
+      expect(mockRecordLearningsFn).toHaveBeenCalledWith(
+        '/test/project',
+        testFeature,
+        specificOutput
+      );
+    });
+
+    it('does not call recordMemoryUsage when output is empty and memoryFiles is empty', async () => {
+      vi.mocked(secureFs.readFile).mockResolvedValue('');
+      const { recordMemoryUsage } = await import('@automaker/utils');
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // With empty output and empty memoryFiles, recordMemoryUsage should not be called
+      expect(recordMemoryUsage).not.toHaveBeenCalled();
+    });
+
+    it('handles output with special unicode characters correctly', async () => {
+      // Output with various unicode but includes tool markers
+      const unicodeOutput =
+        '🔧 Tool: Read\n' +
+        '🔧 Tool: Edit\n' +
+        'Añadiendo función de búsqueda con caracteres especiales: ñ, ü, ö, é, 日本語テスト. ' +
+        'Die Änderungen wurden erfolgreich implementiert. '.repeat(3);
+      vi.mocked(secureFs.readFile).mockResolvedValue(unicodeOutput);
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // Should still detect tool markers and sufficient length
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'verified'
+      );
+    });
+
+    it('treats output with only newlines and spaces around tool marker as insufficient', async () => {
+      // Has tool marker but surrounded by whitespace, total trimmed < 200
+      const sparseOutput = '\n\n  🔧 Tool: Read  \n\n';
+      expect(sparseOutput.trim().length).toBeLessThan(200);
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(sparseOutput);
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'waiting_approval'
+      );
+    });
+
+    it('detects tool marker substring correctly (partial match like "🔧 Tools:" does not count)', async () => {
+      // Output with a similar but not exact marker - "🔧 Tools:" instead of "🔧 Tool:"
+      const wrongMarker = '🔧 Tools: Read\n🔧 Tools: Edit\n' + 'Implementation done. '.repeat(20);
+      expect(wrongMarker.includes('🔧 Tool:')).toBe(false);
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(wrongMarker);
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // "🔧 Tools:" is not the same as "🔧 Tool:" - should be waiting_approval
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'waiting_approval'
+      );
+    });
+
+    it('pipeline merge_conflict status short-circuits before output validation', async () => {
+      // Set up pipeline that results in merge_conflict
+      vi.mocked(pipelineService.getPipelineConfig).mockResolvedValue({
+        version: 1,
+        steps: [{ id: 'step-1', name: 'Step 1', order: 1, instructions: 'Do step 1' }] as any,
+      });
+
+      // After pipeline, loadFeature returns merge_conflict status
+      let loadCallCount = 0;
+      mockLoadFeatureFn = vi.fn().mockImplementation(() => {
+        loadCallCount++;
+        if (loadCallCount === 1) return testFeature; // initial load
+        // All subsequent loads (task check + pipeline refresh) return merge_conflict
+        return { ...testFeature, status: 'merge_conflict' };
+      });
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // Should NOT have called updateFeatureStatusFn with 'verified' or 'waiting_approval'
+      // because pipeline merge_conflict short-circuits the method
+      const statusCalls = vi
+        .mocked(mockUpdateFeatureStatusFn)
+        .mock.calls.filter((call) => call[2] === 'verified' || call[2] === 'waiting_approval');
+      // The only non-in_progress status call should be absent since merge_conflict returns early
+      expect(statusCalls.length).toBe(0);
+    });
+
+    it('sets waiting_approval instead of backlog when error occurs after pipeline completes', async () => {
+      // Set up pipeline with steps
+      vi.mocked(pipelineService.getPipelineConfig).mockResolvedValue({
+        version: 1,
+        steps: [{ id: 'step-1', name: 'Step 1', order: 1, instructions: 'Do step 1' }] as any,
+      });
+
+      // Pipeline succeeds, but reading agent output throws after pipeline completes
+      mockExecutePipelineFn = vi.fn().mockResolvedValue(undefined);
+      // Simulate an error after pipeline completes by making loadFeature throw
+      // on the post-pipeline refresh call
+      let loadCallCount = 0;
+      mockLoadFeatureFn = vi.fn().mockImplementation(() => {
+        loadCallCount++;
+        if (loadCallCount === 1) return testFeature; // initial load
+        // Second call is the task-retry check, third is the pipeline refresh
+        if (loadCallCount <= 2) return testFeature;
+        throw new Error('Unexpected post-pipeline error');
+      });
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // Should set to waiting_approval, NOT backlog, since pipeline completed
+      const backlogCalls = vi
+        .mocked(mockUpdateFeatureStatusFn)
+        .mock.calls.filter((call) => call[2] === 'backlog');
+      expect(backlogCalls.length).toBe(0);
+
+      const waitingCalls = vi
+        .mocked(mockUpdateFeatureStatusFn)
+        .mock.calls.filter((call) => call[2] === 'waiting_approval');
+      expect(waitingCalls.length).toBeGreaterThan(0);
+    });
+
+    it('still sets backlog when error occurs before pipeline completes', async () => {
+      // Set up pipeline with steps
+      vi.mocked(pipelineService.getPipelineConfig).mockResolvedValue({
+        version: 1,
+        steps: [{ id: 'step-1', name: 'Step 1', order: 1, instructions: 'Do step 1' }] as any,
+      });
+
+      // Pipeline itself throws (e.g., agent error during pipeline step)
+      mockExecutePipelineFn = vi.fn().mockRejectedValue(new Error('Agent execution failed'));
+
+      const svc = createServiceWithMocks();
+      await svc.executeFeature('/test/project', 'feature-1');
+
+      // Should still set to backlog since pipeline did NOT complete
+      const backlogCalls = vi
+        .mocked(mockUpdateFeatureStatusFn)
+        .mock.calls.filter((call) => call[2] === 'backlog');
+      expect(backlogCalls.length).toBe(1);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/feature-export-service.test.ts b/temp_repo/apps/server/tests/unit/services/feature-export-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9ba36d12a21672af2ea585a05e352a53f70790e1
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/feature-export-service.test.ts
@@ -0,0 +1,623 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { FeatureExportService, FEATURE_EXPORT_VERSION } from '@/services/feature-export-service.js';
+import type { Feature, FeatureExport } from '@automaker/types';
+import type { FeatureLoader } from '@/services/feature-loader.js';
+
+describe('feature-export-service.ts', () => {
+  let exportService: FeatureExportService;
+  let mockFeatureLoader: {
+    get: ReturnType<typeof vi.fn>;
+    getAll: ReturnType<typeof vi.fn>;
+    create: ReturnType<typeof vi.fn>;
+    update: ReturnType<typeof vi.fn>;
+    generateFeatureId: ReturnType<typeof vi.fn>;
+  };
+  const testProjectPath = '/test/project';
+
+  const sampleFeature: Feature = {
+    id: 'feature-123-abc',
+    title: 'Test Feature',
+    category: 'UI',
+    description: 'A test feature description',
+    status: 'pending',
+    priority: 1,
+    dependencies: ['feature-456'],
+    descriptionHistory: [
+      {
+        description: 'Initial description',
+        timestamp: '2024-01-01T00:00:00.000Z',
+        source: 'initial',
+      },
+    ],
+    planSpec: {
+      status: 'generated',
+      content: 'Plan content',
+      version: 1,
+      reviewedByUser: false,
+    },
+    imagePaths: ['/tmp/image1.png', '/tmp/image2.jpg'],
+    textFilePaths: [
+      {
+        id: 'file-1',
+        path: '/tmp/doc.txt',
+        filename: 'doc.txt',
+        mimeType: 'text/plain',
+        content: 'Some content',
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Create mock FeatureLoader instance
+    mockFeatureLoader = {
+      get: vi.fn(),
+      getAll: vi.fn(),
+      create: vi.fn(),
+      update: vi.fn(),
+      generateFeatureId: vi.fn().mockReturnValue('feature-mock-id'),
+    };
+
+    // Inject mock via constructor
+    exportService = new FeatureExportService(mockFeatureLoader as unknown as FeatureLoader);
+  });
+
+  describe('exportFeatureData', () => {
+    it('should export feature to JSON format', () => {
+      const result = exportService.exportFeatureData(sampleFeature, { format: 'json' });
+
+      const parsed = JSON.parse(result) as FeatureExport;
+      expect(parsed.version).toBe(FEATURE_EXPORT_VERSION);
+      expect(parsed.feature.id).toBe(sampleFeature.id);
+      expect(parsed.feature.title).toBe(sampleFeature.title);
+      expect(parsed.exportedAt).toBeDefined();
+    });
+
+    it('should export feature to YAML format', () => {
+      const result = exportService.exportFeatureData(sampleFeature, { format: 'yaml' });
+
+      expect(result).toContain('version:');
+      expect(result).toContain('feature:');
+      expect(result).toContain('Test Feature');
+      expect(result).toContain('exportedAt:');
+    });
+
+    it('should exclude description history when option is false', () => {
+      const result = exportService.exportFeatureData(sampleFeature, {
+        format: 'json',
+        includeHistory: false,
+      });
+
+      const parsed = JSON.parse(result) as FeatureExport;
+      expect(parsed.feature.descriptionHistory).toBeUndefined();
+    });
+
+    it('should include description history by default', () => {
+      const result = exportService.exportFeatureData(sampleFeature, { format: 'json' });
+
+      const parsed = JSON.parse(result) as FeatureExport;
+      expect(parsed.feature.descriptionHistory).toBeDefined();
+      expect(parsed.feature.descriptionHistory).toHaveLength(1);
+    });
+
+    it('should exclude plan spec when option is false', () => {
+      const result = exportService.exportFeatureData(sampleFeature, {
+        format: 'json',
+        includePlanSpec: false,
+      });
+
+      const parsed = JSON.parse(result) as FeatureExport;
+      expect(parsed.feature.planSpec).toBeUndefined();
+    });
+
+    it('should include plan spec by default', () => {
+      const result = exportService.exportFeatureData(sampleFeature, { format: 'json' });
+
+      const parsed = JSON.parse(result) as FeatureExport;
+      expect(parsed.feature.planSpec).toBeDefined();
+    });
+
+    it('should include metadata when provided', () => {
+      const result = exportService.exportFeatureData(sampleFeature, {
+        format: 'json',
+        metadata: { projectName: 'TestProject', branch: 'main' },
+      });
+
+      const parsed = JSON.parse(result) as FeatureExport;
+      expect(parsed.metadata).toEqual({ projectName: 'TestProject', branch: 'main' });
+    });
+
+    it('should include exportedBy when provided', () => {
+      const result = exportService.exportFeatureData(sampleFeature, {
+        format: 'json',
+        exportedBy: 'test-user',
+      });
+
+      const parsed = JSON.parse(result) as FeatureExport;
+      expect(parsed.exportedBy).toBe('test-user');
+    });
+
+    it('should remove transient fields (titleGenerating, error)', () => {
+      const featureWithTransient: Feature = {
+        ...sampleFeature,
+        titleGenerating: true,
+        error: 'Some error',
+      };
+
+      const result = exportService.exportFeatureData(featureWithTransient, { format: 'json' });
+
+      const parsed = JSON.parse(result) as FeatureExport;
+      expect(parsed.feature.titleGenerating).toBeUndefined();
+      expect(parsed.feature.error).toBeUndefined();
+    });
+
+    it('should support compact JSON (prettyPrint: false)', () => {
+      const prettyResult = exportService.exportFeatureData(sampleFeature, {
+        format: 'json',
+        prettyPrint: true,
+      });
+      const compactResult = exportService.exportFeatureData(sampleFeature, {
+        format: 'json',
+        prettyPrint: false,
+      });
+
+      // Compact should have no newlines/indentation
+      expect(compactResult).not.toContain('\n');
+      // Pretty should have newlines
+      expect(prettyResult).toContain('\n');
+    });
+  });
+
+  describe('exportFeature', () => {
+    it('should fetch and export feature by ID', async () => {
+      mockFeatureLoader.get.mockResolvedValue(sampleFeature);
+
+      const result = await exportService.exportFeature(testProjectPath, 'feature-123-abc');
+
+      expect(mockFeatureLoader.get).toHaveBeenCalledWith(testProjectPath, 'feature-123-abc');
+      const parsed = JSON.parse(result) as FeatureExport;
+      expect(parsed.feature.id).toBe(sampleFeature.id);
+    });
+
+    it('should throw when feature not found', async () => {
+      mockFeatureLoader.get.mockResolvedValue(null);
+
+      await expect(exportService.exportFeature(testProjectPath, 'nonexistent')).rejects.toThrow(
+        'Feature nonexistent not found'
+      );
+    });
+  });
+
+  describe('exportFeatures', () => {
+    const features: Feature[] = [
+      { ...sampleFeature, id: 'feature-1', category: 'UI' },
+      { ...sampleFeature, id: 'feature-2', category: 'Backend', status: 'completed' },
+      { ...sampleFeature, id: 'feature-3', category: 'UI', status: 'pending' },
+    ];
+
+    it('should export all features', async () => {
+      mockFeatureLoader.getAll.mockResolvedValue(features);
+
+      const result = await exportService.exportFeatures(testProjectPath);
+
+      const parsed = JSON.parse(result);
+      expect(parsed.count).toBe(3);
+      expect(parsed.features).toHaveLength(3);
+    });
+
+    it('should filter by category', async () => {
+      mockFeatureLoader.getAll.mockResolvedValue(features);
+
+      const result = await exportService.exportFeatures(testProjectPath, { category: 'UI' });
+
+      const parsed = JSON.parse(result);
+      expect(parsed.count).toBe(2);
+      expect(parsed.features.every((f: FeatureExport) => f.feature.category === 'UI')).toBe(true);
+    });
+
+    it('should filter by status', async () => {
+      mockFeatureLoader.getAll.mockResolvedValue(features);
+
+      const result = await exportService.exportFeatures(testProjectPath, { status: 'completed' });
+
+      const parsed = JSON.parse(result);
+      expect(parsed.count).toBe(1);
+      expect(parsed.features[0].feature.status).toBe('completed');
+    });
+
+    it('should filter by feature IDs', async () => {
+      mockFeatureLoader.getAll.mockResolvedValue(features);
+
+      const result = await exportService.exportFeatures(testProjectPath, {
+        featureIds: ['feature-1', 'feature-3'],
+      });
+
+      const parsed = JSON.parse(result);
+      expect(parsed.count).toBe(2);
+      const ids = parsed.features.map((f: FeatureExport) => f.feature.id);
+      expect(ids).toContain('feature-1');
+      expect(ids).toContain('feature-3');
+      expect(ids).not.toContain('feature-2');
+    });
+
+    it('should export to YAML format', async () => {
+      mockFeatureLoader.getAll.mockResolvedValue(features);
+
+      const result = await exportService.exportFeatures(testProjectPath, { format: 'yaml' });
+
+      expect(result).toContain('version:');
+      expect(result).toContain('count:');
+      expect(result).toContain('features:');
+    });
+
+    it('should include metadata when provided', async () => {
+      mockFeatureLoader.getAll.mockResolvedValue(features);
+
+      const result = await exportService.exportFeatures(testProjectPath, {
+        metadata: { projectName: 'TestProject' },
+      });
+
+      const parsed = JSON.parse(result);
+      expect(parsed.metadata).toEqual({ projectName: 'TestProject' });
+    });
+  });
+
+  describe('parseImportData', () => {
+    it('should parse valid JSON', () => {
+      const json = JSON.stringify(sampleFeature);
+      const result = exportService.parseImportData(json);
+
+      expect(result).toBeDefined();
+      expect((result as Feature).id).toBe(sampleFeature.id);
+    });
+
+    it('should parse valid YAML', () => {
+      const yaml = `
+id: feature-yaml-123
+title: YAML Feature
+category: Testing
+description: A YAML feature
+`;
+      const result = exportService.parseImportData(yaml);
+
+      expect(result).toBeDefined();
+      expect((result as Feature).id).toBe('feature-yaml-123');
+      expect((result as Feature).title).toBe('YAML Feature');
+    });
+
+    it('should return null for invalid data', () => {
+      const result = exportService.parseImportData('not valid {json} or yaml: [');
+
+      expect(result).toBeNull();
+    });
+
+    it('should parse FeatureExport wrapper', () => {
+      const exportData: FeatureExport = {
+        version: '1.0.0',
+        feature: sampleFeature,
+        exportedAt: new Date().toISOString(),
+      };
+      const json = JSON.stringify(exportData);
+
+      const result = exportService.parseImportData(json) as FeatureExport;
+
+      expect(result.version).toBe('1.0.0');
+      expect(result.feature.id).toBe(sampleFeature.id);
+    });
+  });
+
+  describe('detectFormat', () => {
+    it('should detect JSON format', () => {
+      const json = JSON.stringify({ id: 'test' });
+      expect(exportService.detectFormat(json)).toBe('json');
+    });
+
+    it('should detect YAML format', () => {
+      const yaml = `
+id: test
+title: Test
+`;
+      expect(exportService.detectFormat(yaml)).toBe('yaml');
+    });
+
+    it('should detect YAML for plain text (YAML is very permissive)', () => {
+      // YAML parses any plain text as a string, so this is detected as valid YAML
+      // The actual validation happens in parseImportData which checks for required fields
+      expect(exportService.detectFormat('not valid {[')).toBe('yaml');
+    });
+
+    it('should handle whitespace', () => {
+      const json = '  { "id": "test" }  ';
+      expect(exportService.detectFormat(json)).toBe('json');
+    });
+  });
+
+  describe('importFeature', () => {
+    it('should import feature from raw Feature data', async () => {
+      mockFeatureLoader.get.mockResolvedValue(null);
+      mockFeatureLoader.create.mockResolvedValue(sampleFeature);
+
+      const result = await exportService.importFeature(testProjectPath, {
+        data: sampleFeature,
+      });
+
+      expect(result.success).toBe(true);
+      expect(result.featureId).toBe(sampleFeature.id);
+      expect(mockFeatureLoader.create).toHaveBeenCalled();
+    });
+
+    it('should import feature from FeatureExport wrapper', async () => {
+      mockFeatureLoader.get.mockResolvedValue(null);
+      mockFeatureLoader.create.mockResolvedValue(sampleFeature);
+
+      const exportData: FeatureExport = {
+        version: '1.0.0',
+        feature: sampleFeature,
+        exportedAt: new Date().toISOString(),
+      };
+
+      const result = await exportService.importFeature(testProjectPath, {
+        data: exportData,
+      });
+
+      expect(result.success).toBe(true);
+      expect(result.featureId).toBe(sampleFeature.id);
+    });
+
+    it('should use custom ID when provided', async () => {
+      mockFeatureLoader.get.mockResolvedValue(null);
+      mockFeatureLoader.create.mockImplementation(async (_, data) => ({
+        ...sampleFeature,
+        id: data.id!,
+      }));
+
+      const result = await exportService.importFeature(testProjectPath, {
+        data: sampleFeature,
+        newId: 'custom-id-123',
+      });
+
+      expect(result.success).toBe(true);
+      expect(result.featureId).toBe('custom-id-123');
+    });
+
+    it('should fail when feature exists and overwrite is false', async () => {
+      mockFeatureLoader.get.mockResolvedValue(sampleFeature);
+
+      const result = await exportService.importFeature(testProjectPath, {
+        data: sampleFeature,
+        overwrite: false,
+      });
+
+      expect(result.success).toBe(false);
+      expect(result.errors).toContain(
+        `Feature with ID ${sampleFeature.id} already exists. Set overwrite: true to replace.`
+      );
+    });
+
+    it('should overwrite when overwrite is true', async () => {
+      mockFeatureLoader.get.mockResolvedValue(sampleFeature);
+      mockFeatureLoader.update.mockResolvedValue(sampleFeature);
+
+      const result = await exportService.importFeature(testProjectPath, {
+        data: sampleFeature,
+        overwrite: true,
+      });
+
+      expect(result.success).toBe(true);
+      expect(result.wasOverwritten).toBe(true);
+      expect(mockFeatureLoader.update).toHaveBeenCalled();
+    });
+
+    it('should apply target category override', async () => {
+      mockFeatureLoader.get.mockResolvedValue(null);
+      mockFeatureLoader.create.mockImplementation(async (_, data) => ({
+        ...sampleFeature,
+        ...data,
+      }));
+
+      await exportService.importFeature(testProjectPath, {
+        data: sampleFeature,
+        targetCategory: 'NewCategory',
+      });
+
+      const createCall = mockFeatureLoader.create.mock.calls[0];
+      expect(createCall[1].category).toBe('NewCategory');
+    });
+
+    it('should clear branch info when preserveBranchInfo is false', async () => {
+      const featureWithBranch: Feature = {
+        ...sampleFeature,
+        branchName: 'feature/test-branch',
+      };
+      mockFeatureLoader.get.mockResolvedValue(null);
+      mockFeatureLoader.create.mockImplementation(async (_, data) => ({
+        ...featureWithBranch,
+        ...data,
+      }));
+
+      await exportService.importFeature(testProjectPath, {
+        data: featureWithBranch,
+        preserveBranchInfo: false,
+      });
+
+      const createCall = mockFeatureLoader.create.mock.calls[0];
+      expect(createCall[1].branchName).toBeUndefined();
+    });
+
+    it('should preserve branch info when preserveBranchInfo is true', async () => {
+      const featureWithBranch: Feature = {
+        ...sampleFeature,
+        branchName: 'feature/test-branch',
+      };
+      mockFeatureLoader.get.mockResolvedValue(null);
+      mockFeatureLoader.create.mockImplementation(async (_, data) => ({
+        ...featureWithBranch,
+        ...data,
+      }));
+
+      await exportService.importFeature(testProjectPath, {
+        data: featureWithBranch,
+        preserveBranchInfo: true,
+      });
+
+      const createCall = mockFeatureLoader.create.mock.calls[0];
+      expect(createCall[1].branchName).toBe('feature/test-branch');
+    });
+
+    it('should warn and clear image paths', async () => {
+      mockFeatureLoader.get.mockResolvedValue(null);
+      mockFeatureLoader.create.mockResolvedValue(sampleFeature);
+
+      const result = await exportService.importFeature(testProjectPath, {
+        data: sampleFeature,
+      });
+
+      expect(result.warnings).toBeDefined();
+      expect(result.warnings).toContainEqual(expect.stringContaining('image path'));
+      const createCall = mockFeatureLoader.create.mock.calls[0];
+      expect(createCall[1].imagePaths).toEqual([]);
+    });
+
+    it('should warn and clear text file paths', async () => {
+      mockFeatureLoader.get.mockResolvedValue(null);
+      mockFeatureLoader.create.mockResolvedValue(sampleFeature);
+
+      const result = await exportService.importFeature(testProjectPath, {
+        data: sampleFeature,
+      });
+
+      expect(result.warnings).toBeDefined();
+      expect(result.warnings).toContainEqual(expect.stringContaining('text file path'));
+      const createCall = mockFeatureLoader.create.mock.calls[0];
+      expect(createCall[1].textFilePaths).toEqual([]);
+    });
+
+    it('should fail with validation error for missing required fields', async () => {
+      const invalidFeature = {
+        id: 'feature-invalid',
+        // Missing description, title, and category
+      } as Feature;
+
+      const result = await exportService.importFeature(testProjectPath, {
+        data: invalidFeature,
+      });
+
+      expect(result.success).toBe(false);
+      expect(result.errors).toBeDefined();
+      expect(result.errors!.some((e) => e.includes('title or description'))).toBe(true);
+    });
+
+    it('should generate ID when none provided', async () => {
+      const featureWithoutId = {
+        title: 'No ID Feature',
+        category: 'Testing',
+        description: 'Feature without ID',
+      } as Feature;
+
+      mockFeatureLoader.get.mockResolvedValue(null);
+      mockFeatureLoader.create.mockImplementation(async (_, data) => ({
+        ...featureWithoutId,
+        id: data.id!,
+      }));
+
+      const result = await exportService.importFeature(testProjectPath, {
+        data: featureWithoutId,
+      });
+
+      expect(result.success).toBe(true);
+      expect(result.featureId).toBe('feature-mock-id');
+    });
+  });
+
+  describe('importFeatures', () => {
+    const bulkExport = {
+      version: '1.0.0',
+      exportedAt: new Date().toISOString(),
+      count: 2,
+      features: [
+        {
+          version: '1.0.0',
+          feature: { ...sampleFeature, id: 'feature-1' },
+          exportedAt: new Date().toISOString(),
+        },
+        {
+          version: '1.0.0',
+          feature: { ...sampleFeature, id: 'feature-2' },
+          exportedAt: new Date().toISOString(),
+        },
+      ],
+    };
+
+    it('should import multiple features from JSON string', async () => {
+      mockFeatureLoader.get.mockResolvedValue(null);
+      mockFeatureLoader.create.mockImplementation(async (_, data) => ({
+        ...sampleFeature,
+        id: data.id!,
+      }));
+
+      const results = await exportService.importFeatures(
+        testProjectPath,
+        JSON.stringify(bulkExport)
+      );
+
+      expect(results).toHaveLength(2);
+      expect(results[0].success).toBe(true);
+      expect(results[1].success).toBe(true);
+    });
+
+    it('should import multiple features from parsed data', async () => {
+      mockFeatureLoader.get.mockResolvedValue(null);
+      mockFeatureLoader.create.mockImplementation(async (_, data) => ({
+        ...sampleFeature,
+        id: data.id!,
+      }));
+
+      const results = await exportService.importFeatures(testProjectPath, bulkExport);
+
+      expect(results).toHaveLength(2);
+      expect(results.every((r) => r.success)).toBe(true);
+    });
+
+    it('should apply options to all features', async () => {
+      mockFeatureLoader.get.mockResolvedValue(null);
+      mockFeatureLoader.create.mockImplementation(async (_, data) => ({
+        ...sampleFeature,
+        ...data,
+      }));
+
+      await exportService.importFeatures(testProjectPath, bulkExport, {
+        targetCategory: 'ImportedCategory',
+      });
+
+      const createCalls = mockFeatureLoader.create.mock.calls;
+      expect(createCalls[0][1].category).toBe('ImportedCategory');
+      expect(createCalls[1][1].category).toBe('ImportedCategory');
+    });
+
+    it('should return error for invalid bulk format', async () => {
+      const results = await exportService.importFeatures(testProjectPath, '{ "invalid": "data" }');
+
+      expect(results).toHaveLength(1);
+      expect(results[0].success).toBe(false);
+      expect(results[0].errors).toContainEqual(expect.stringContaining('Invalid bulk import data'));
+    });
+
+    it('should handle partial failures', async () => {
+      mockFeatureLoader.get.mockResolvedValueOnce(null).mockResolvedValueOnce(sampleFeature); // Second feature exists
+
+      mockFeatureLoader.create.mockImplementation(async (_, data) => ({
+        ...sampleFeature,
+        id: data.id!,
+      }));
+
+      const results = await exportService.importFeatures(testProjectPath, bulkExport, {
+        overwrite: false,
+      });
+
+      expect(results).toHaveLength(2);
+      expect(results[0].success).toBe(true);
+      expect(results[1].success).toBe(false); // Exists without overwrite
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/feature-loader.test.ts b/temp_repo/apps/server/tests/unit/services/feature-loader.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d3d0bbdc68d08dd81f1e1f22d85961d4dea58d22
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/feature-loader.test.ts
@@ -0,0 +1,916 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { FeatureLoader } from '@/services/feature-loader.js';
+import * as fs from 'fs/promises';
+import path from 'path';
+
+vi.mock('fs/promises');
+
+describe('feature-loader.ts', () => {
+  let loader: FeatureLoader;
+  const testProjectPath = '/test/project';
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    loader = new FeatureLoader();
+  });
+
+  describe('getFeaturesDir', () => {
+    it('should return features directory path', () => {
+      const result = loader.getFeaturesDir(testProjectPath);
+      expect(result).toContain('test');
+      expect(result).toContain('project');
+      expect(result).toContain('.automaker');
+      expect(result).toContain('features');
+    });
+  });
+
+  describe('getFeatureImagesDir', () => {
+    it('should return feature images directory path', () => {
+      const result = loader.getFeatureImagesDir(testProjectPath, 'feature-123');
+      expect(result).toContain('features');
+      expect(result).toContain('feature-123');
+      expect(result).toContain('images');
+    });
+  });
+
+  describe('getFeatureDir', () => {
+    it('should return feature directory path', () => {
+      const result = loader.getFeatureDir(testProjectPath, 'feature-123');
+      expect(result).toContain('features');
+      expect(result).toContain('feature-123');
+    });
+  });
+
+  describe('getFeatureJsonPath', () => {
+    it('should return feature.json path', () => {
+      const result = loader.getFeatureJsonPath(testProjectPath, 'feature-123');
+      expect(result).toContain('features');
+      expect(result).toContain('feature-123');
+      expect(result).toContain('feature.json');
+    });
+  });
+
+  describe('getAgentOutputPath', () => {
+    it('should return agent-output.md path', () => {
+      const result = loader.getAgentOutputPath(testProjectPath, 'feature-123');
+      expect(result).toContain('features');
+      expect(result).toContain('feature-123');
+      expect(result).toContain('agent-output.md');
+    });
+  });
+
+  describe('generateFeatureId', () => {
+    it('should generate unique feature ID with timestamp', () => {
+      const id1 = loader.generateFeatureId();
+      const id2 = loader.generateFeatureId();
+
+      expect(id1).toMatch(/^feature-\d+-[a-z0-9]+$/);
+      expect(id2).toMatch(/^feature-\d+-[a-z0-9]+$/);
+      expect(id1).not.toBe(id2);
+    });
+
+    it("should start with 'feature-'", () => {
+      const id = loader.generateFeatureId();
+      expect(id).toMatch(/^feature-/);
+    });
+  });
+
+  describe('getAll', () => {
+    it("should return empty array when features directory doesn't exist", async () => {
+      vi.mocked(fs.access).mockRejectedValue(new Error('ENOENT'));
+
+      const result = await loader.getAll(testProjectPath);
+
+      expect(result).toEqual([]);
+    });
+
+    it('should load all features from feature directories', async () => {
+      vi.mocked(fs.access).mockResolvedValue(undefined);
+      vi.mocked(fs.readdir).mockResolvedValue([
+        { name: 'feature-1', isDirectory: () => true } as any,
+        { name: 'feature-2', isDirectory: () => true } as any,
+        { name: 'file.txt', isDirectory: () => false } as any,
+      ]);
+
+      vi.mocked(fs.readFile)
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            id: 'feature-1',
+            category: 'ui',
+            description: 'Feature 1',
+          })
+        )
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            id: 'feature-2',
+            category: 'backend',
+            description: 'Feature 2',
+          })
+        );
+
+      const result = await loader.getAll(testProjectPath);
+
+      expect(result).toHaveLength(2);
+      expect(result[0].id).toBe('feature-1');
+      expect(result[1].id).toBe('feature-2');
+    });
+
+    it('should skip features without id field', async () => {
+      vi.mocked(fs.access).mockResolvedValue(undefined);
+      vi.mocked(fs.readdir).mockResolvedValue([
+        { name: 'feature-1', isDirectory: () => true } as any,
+        { name: 'feature-2', isDirectory: () => true } as any,
+      ]);
+
+      const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+
+      vi.mocked(fs.readFile)
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            category: 'ui',
+            description: 'Missing ID',
+          })
+        )
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            id: 'feature-2',
+            category: 'backend',
+            description: 'Feature 2',
+          })
+        );
+
+      const result = await loader.getAll(testProjectPath);
+
+      expect(result).toHaveLength(1);
+      expect(result[0].id).toBe('feature-2');
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringMatching(/WARN.*\[FeatureLoader\]/),
+        expect.stringContaining("missing required 'id' field")
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('should skip features with missing feature.json', async () => {
+      vi.mocked(fs.access).mockResolvedValue(undefined);
+      vi.mocked(fs.readdir).mockResolvedValue([
+        { name: 'feature-1', isDirectory: () => true } as any,
+        { name: 'feature-2', isDirectory: () => true } as any,
+      ]);
+
+      const error: any = new Error('File not found');
+      error.code = 'ENOENT';
+
+      vi.mocked(fs.readFile)
+        .mockRejectedValueOnce(error)
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            id: 'feature-2',
+            category: 'backend',
+            description: 'Feature 2',
+          })
+        );
+
+      const result = await loader.getAll(testProjectPath);
+
+      expect(result).toHaveLength(1);
+      expect(result[0].id).toBe('feature-2');
+    });
+
+    it('should handle malformed JSON gracefully', async () => {
+      vi.mocked(fs.access).mockResolvedValue(undefined);
+      vi.mocked(fs.readdir).mockResolvedValue([
+        { name: 'feature-1', isDirectory: () => true } as any,
+      ]);
+
+      const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+
+      vi.mocked(fs.readFile).mockResolvedValue('invalid json{');
+
+      const result = await loader.getAll(testProjectPath);
+
+      expect(result).toEqual([]);
+      // With recovery-enabled reads, warnings come from AtomicWriter and FeatureLoader
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringMatching(/WARN.*\[AtomicWriter\]/),
+        expect.stringContaining('unavailable')
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('should sort features by creation order (timestamp)', async () => {
+      vi.mocked(fs.access).mockResolvedValue(undefined);
+      vi.mocked(fs.readdir).mockResolvedValue([
+        { name: 'feature-3', isDirectory: () => true } as any,
+        { name: 'feature-1', isDirectory: () => true } as any,
+        { name: 'feature-2', isDirectory: () => true } as any,
+      ]);
+
+      vi.mocked(fs.readFile)
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            id: 'feature-3000-xyz',
+            category: 'ui',
+          })
+        )
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            id: 'feature-1000-abc',
+            category: 'ui',
+          })
+        )
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            id: 'feature-2000-def',
+            category: 'ui',
+          })
+        );
+
+      const result = await loader.getAll(testProjectPath);
+
+      expect(result).toHaveLength(3);
+      expect(result[0].id).toBe('feature-1000-abc');
+      expect(result[1].id).toBe('feature-2000-def');
+      expect(result[2].id).toBe('feature-3000-xyz');
+    });
+  });
+
+  describe('get', () => {
+    it('should return feature by ID', async () => {
+      const featureData = {
+        id: 'feature-123',
+        category: 'ui',
+        description: 'Test feature',
+      };
+
+      vi.mocked(fs.readFile).mockResolvedValue(JSON.stringify(featureData));
+
+      const result = await loader.get(testProjectPath, 'feature-123');
+
+      expect(result).toEqual(featureData);
+    });
+
+    it("should return null when feature doesn't exist", async () => {
+      const error: any = new Error('File not found');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+
+      const result = await loader.get(testProjectPath, 'feature-123');
+
+      expect(result).toBeNull();
+    });
+
+    it('should return null on other errors (with recovery attempt)', async () => {
+      // With recovery-enabled reads, get() returns null instead of throwing
+      // because it attempts to recover from backups before giving up
+      vi.mocked(fs.readFile).mockRejectedValue(new Error('Permission denied'));
+
+      const result = await loader.get(testProjectPath, 'feature-123');
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('create', () => {
+    it('should create new feature', async () => {
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      const featureData = {
+        category: 'ui',
+        description: 'New feature',
+      };
+
+      const result = await loader.create(testProjectPath, featureData);
+
+      expect(result).toMatchObject({
+        category: 'ui',
+        description: 'New feature',
+        id: expect.stringMatching(/^feature-/),
+      });
+      expect(fs.writeFile).toHaveBeenCalled();
+    });
+
+    it('should use provided ID if given', async () => {
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      const result = await loader.create(testProjectPath, {
+        id: 'custom-id',
+        category: 'ui',
+        description: 'Test',
+      });
+
+      expect(result.id).toBe('custom-id');
+    });
+
+    it('should set default category if not provided', async () => {
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      const result = await loader.create(testProjectPath, {
+        description: 'Test',
+      });
+
+      expect(result.category).toBe('Uncategorized');
+    });
+  });
+
+  describe('update', () => {
+    it('should update existing feature', async () => {
+      vi.mocked(fs.readFile).mockResolvedValue(
+        JSON.stringify({
+          id: 'feature-123',
+          category: 'ui',
+          description: 'Old description',
+        })
+      );
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      const result = await loader.update(testProjectPath, 'feature-123', {
+        description: 'New description',
+      });
+
+      expect(result.description).toBe('New description');
+      expect(result.category).toBe('ui');
+      expect(fs.writeFile).toHaveBeenCalled();
+    });
+
+    it("should throw if feature doesn't exist", async () => {
+      const error: any = new Error('File not found');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+
+      await expect(loader.update(testProjectPath, 'feature-123', {})).rejects.toThrow('not found');
+    });
+  });
+
+  describe('delete', () => {
+    it('should delete feature directory', async () => {
+      vi.mocked(fs.rm).mockResolvedValue(undefined);
+
+      const result = await loader.delete(testProjectPath, 'feature-123');
+
+      expect(result).toBe(true);
+      expect(fs.rm).toHaveBeenCalledWith(expect.stringContaining('feature-123'), {
+        recursive: true,
+        force: true,
+      });
+    });
+
+    it('should return false on error', async () => {
+      vi.mocked(fs.rm).mockRejectedValue(new Error('Permission denied'));
+
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      const result = await loader.delete(testProjectPath, 'feature-123');
+
+      expect(result).toBe(false);
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringMatching(/ERROR.*\[FeatureLoader\]/),
+        expect.stringContaining('Failed to delete feature'),
+        expect.objectContaining({ message: 'Permission denied' })
+      );
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('getAgentOutput', () => {
+    it('should return agent output content', async () => {
+      vi.mocked(fs.readFile).mockResolvedValue('Agent output content');
+
+      const result = await loader.getAgentOutput(testProjectPath, 'feature-123');
+
+      expect(result).toBe('Agent output content');
+    });
+
+    it("should return null when file doesn't exist", async () => {
+      const error: any = new Error('File not found');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValue(error);
+
+      const result = await loader.getAgentOutput(testProjectPath, 'feature-123');
+
+      expect(result).toBeNull();
+    });
+
+    it('should throw on other errors', async () => {
+      vi.mocked(fs.readFile).mockRejectedValue(new Error('Permission denied'));
+
+      await expect(loader.getAgentOutput(testProjectPath, 'feature-123')).rejects.toThrow(
+        'Permission denied'
+      );
+    });
+  });
+
+  describe('saveAgentOutput', () => {
+    it('should save agent output to file', async () => {
+      vi.mocked(fs.mkdir).mockResolvedValue(undefined);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      await loader.saveAgentOutput(testProjectPath, 'feature-123', 'Output content');
+
+      expect(fs.writeFile).toHaveBeenCalledWith(
+        expect.stringContaining('agent-output.md'),
+        'Output content',
+        'utf-8'
+      );
+    });
+  });
+
+  describe('deleteAgentOutput', () => {
+    it('should delete agent output file', async () => {
+      vi.mocked(fs.unlink).mockResolvedValue(undefined);
+
+      await loader.deleteAgentOutput(testProjectPath, 'feature-123');
+
+      expect(fs.unlink).toHaveBeenCalledWith(expect.stringContaining('agent-output.md'));
+    });
+
+    it('should handle missing file gracefully', async () => {
+      const error: any = new Error('File not found');
+      error.code = 'ENOENT';
+      vi.mocked(fs.unlink).mockRejectedValue(error);
+
+      // Should not throw
+      await expect(
+        loader.deleteAgentOutput(testProjectPath, 'feature-123')
+      ).resolves.toBeUndefined();
+    });
+
+    it('should throw on other errors', async () => {
+      vi.mocked(fs.unlink).mockRejectedValue(new Error('Permission denied'));
+
+      await expect(loader.deleteAgentOutput(testProjectPath, 'feature-123')).rejects.toThrow(
+        'Permission denied'
+      );
+    });
+  });
+
+  describe('findByTitle', () => {
+    it('should find feature by exact title match (case-insensitive)', async () => {
+      vi.mocked(fs.access).mockResolvedValue(undefined);
+      vi.mocked(fs.readdir).mockResolvedValue([
+        { name: 'feature-1', isDirectory: () => true } as any,
+        { name: 'feature-2', isDirectory: () => true } as any,
+      ]);
+
+      vi.mocked(fs.readFile)
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            id: 'feature-1000-abc',
+            title: 'Login Feature',
+            category: 'auth',
+            description: 'Login implementation',
+          })
+        )
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            id: 'feature-2000-def',
+            title: 'Logout Feature',
+            category: 'auth',
+            description: 'Logout implementation',
+          })
+        );
+
+      const result = await loader.findByTitle(testProjectPath, 'LOGIN FEATURE');
+
+      expect(result).not.toBeNull();
+      expect(result?.id).toBe('feature-1000-abc');
+      expect(result?.title).toBe('Login Feature');
+    });
+
+    it('should return null when title is not found', async () => {
+      vi.mocked(fs.access).mockResolvedValue(undefined);
+      vi.mocked(fs.readdir).mockResolvedValue([
+        { name: 'feature-1', isDirectory: () => true } as any,
+      ]);
+
+      vi.mocked(fs.readFile).mockResolvedValueOnce(
+        JSON.stringify({
+          id: 'feature-1000-abc',
+          title: 'Login Feature',
+          category: 'auth',
+          description: 'Login implementation',
+        })
+      );
+
+      const result = await loader.findByTitle(testProjectPath, 'Nonexistent Feature');
+
+      expect(result).toBeNull();
+    });
+
+    it('should return null for empty or whitespace title', async () => {
+      const result1 = await loader.findByTitle(testProjectPath, '');
+      const result2 = await loader.findByTitle(testProjectPath, '   ');
+
+      expect(result1).toBeNull();
+      expect(result2).toBeNull();
+    });
+
+    it('should skip features without titles', async () => {
+      vi.mocked(fs.access).mockResolvedValue(undefined);
+      vi.mocked(fs.readdir).mockResolvedValue([
+        { name: 'feature-1', isDirectory: () => true } as any,
+        { name: 'feature-2', isDirectory: () => true } as any,
+      ]);
+
+      vi.mocked(fs.readFile)
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            id: 'feature-1000-abc',
+            // no title
+            category: 'auth',
+            description: 'Login implementation',
+          })
+        )
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            id: 'feature-2000-def',
+            title: 'Login Feature',
+            category: 'auth',
+            description: 'Another login',
+          })
+        );
+
+      const result = await loader.findByTitle(testProjectPath, 'Login Feature');
+
+      expect(result).not.toBeNull();
+      expect(result?.id).toBe('feature-2000-def');
+    });
+  });
+
+  describe('findDuplicateTitle', () => {
+    it('should find duplicate title', async () => {
+      vi.mocked(fs.access).mockResolvedValue(undefined);
+      vi.mocked(fs.readdir).mockResolvedValue([
+        { name: 'feature-1', isDirectory: () => true } as any,
+      ]);
+
+      vi.mocked(fs.readFile).mockResolvedValueOnce(
+        JSON.stringify({
+          id: 'feature-1000-abc',
+          title: 'My Feature',
+          category: 'ui',
+          description: 'Feature description',
+        })
+      );
+
+      const result = await loader.findDuplicateTitle(testProjectPath, 'my feature');
+
+      expect(result).not.toBeNull();
+      expect(result?.id).toBe('feature-1000-abc');
+    });
+
+    it('should exclude specified feature ID from duplicate check', async () => {
+      vi.mocked(fs.access).mockResolvedValue(undefined);
+      vi.mocked(fs.readdir).mockResolvedValue([
+        { name: 'feature-1', isDirectory: () => true } as any,
+        { name: 'feature-2', isDirectory: () => true } as any,
+      ]);
+
+      vi.mocked(fs.readFile)
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            id: 'feature-1000-abc',
+            title: 'My Feature',
+            category: 'ui',
+            description: 'Feature 1',
+          })
+        )
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            id: 'feature-2000-def',
+            title: 'Other Feature',
+            category: 'ui',
+            description: 'Feature 2',
+          })
+        );
+
+      // Should not find duplicate when excluding the feature that has the title
+      const result = await loader.findDuplicateTitle(
+        testProjectPath,
+        'My Feature',
+        'feature-1000-abc'
+      );
+
+      expect(result).toBeNull();
+    });
+
+    it('should find duplicate when title exists on different feature', async () => {
+      vi.mocked(fs.access).mockResolvedValue(undefined);
+      vi.mocked(fs.readdir).mockResolvedValue([
+        { name: 'feature-1', isDirectory: () => true } as any,
+        { name: 'feature-2', isDirectory: () => true } as any,
+      ]);
+
+      vi.mocked(fs.readFile)
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            id: 'feature-1000-abc',
+            title: 'My Feature',
+            category: 'ui',
+            description: 'Feature 1',
+          })
+        )
+        .mockResolvedValueOnce(
+          JSON.stringify({
+            id: 'feature-2000-def',
+            title: 'Other Feature',
+            category: 'ui',
+            description: 'Feature 2',
+          })
+        );
+
+      // Should find duplicate because feature-1000-abc has the title and we're excluding feature-2000-def
+      const result = await loader.findDuplicateTitle(
+        testProjectPath,
+        'My Feature',
+        'feature-2000-def'
+      );
+
+      expect(result).not.toBeNull();
+      expect(result?.id).toBe('feature-1000-abc');
+    });
+
+    it('should return null for empty or whitespace title', async () => {
+      const result1 = await loader.findDuplicateTitle(testProjectPath, '');
+      const result2 = await loader.findDuplicateTitle(testProjectPath, '   ');
+
+      expect(result1).toBeNull();
+      expect(result2).toBeNull();
+    });
+
+    it('should handle titles with leading/trailing whitespace', async () => {
+      vi.mocked(fs.access).mockResolvedValue(undefined);
+      vi.mocked(fs.readdir).mockResolvedValue([
+        { name: 'feature-1', isDirectory: () => true } as any,
+      ]);
+
+      vi.mocked(fs.readFile).mockResolvedValueOnce(
+        JSON.stringify({
+          id: 'feature-1000-abc',
+          title: 'My Feature',
+          category: 'ui',
+          description: 'Feature description',
+        })
+      );
+
+      const result = await loader.findDuplicateTitle(testProjectPath, '  My Feature  ');
+
+      expect(result).not.toBeNull();
+      expect(result?.id).toBe('feature-1000-abc');
+    });
+  });
+
+  describe('syncFeatureToAppSpec', () => {
+    const sampleAppSpec = `<?xml version="1.0" encoding="UTF-8"?>
+<project_specification>
+  <project_name>Test Project</project_name>
+  <core_capabilities>
+    <capability>Testing</capability>
+  </core_capabilities>
+  <implemented_features>
+    <feature>
+      <name>Existing Feature</name>
+      <description>Already implemented</description>
+    </feature>
+  </implemented_features>
+</project_specification>`;
+
+    const appSpecWithoutFeatures = `<?xml version="1.0" encoding="UTF-8"?>
+<project_specification>
+  <project_name>Test Project</project_name>
+  <core_capabilities>
+    <capability>Testing</capability>
+  </core_capabilities>
+</project_specification>`;
+
+    it('should add feature to app_spec.txt', async () => {
+      vi.mocked(fs.readFile).mockResolvedValueOnce(sampleAppSpec);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      const feature = {
+        id: 'feature-1234-abc',
+        title: 'New Feature',
+        category: 'ui',
+        description: 'A new feature description',
+      };
+
+      const result = await loader.syncFeatureToAppSpec(testProjectPath, feature);
+
+      expect(result).toBe(true);
+      expect(fs.writeFile).toHaveBeenCalledWith(
+        expect.stringContaining('app_spec.txt'),
+        expect.stringContaining('New Feature'),
+        'utf-8'
+      );
+      expect(fs.writeFile).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.stringContaining('A new feature description'),
+        'utf-8'
+      );
+    });
+
+    it('should add feature with file locations', async () => {
+      vi.mocked(fs.readFile).mockResolvedValueOnce(sampleAppSpec);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      const feature = {
+        id: 'feature-1234-abc',
+        title: 'Feature With Locations',
+        category: 'backend',
+        description: 'Feature with file locations',
+      };
+
+      const result = await loader.syncFeatureToAppSpec(testProjectPath, feature, [
+        'src/feature.ts',
+        'src/utils/helper.ts',
+      ]);
+
+      expect(result).toBe(true);
+      expect(fs.writeFile).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.stringContaining('src/feature.ts'),
+        'utf-8'
+      );
+      expect(fs.writeFile).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.stringContaining('src/utils/helper.ts'),
+        'utf-8'
+      );
+    });
+
+    it('should return false when app_spec.txt does not exist', async () => {
+      const error: any = new Error('File not found');
+      error.code = 'ENOENT';
+      vi.mocked(fs.readFile).mockRejectedValueOnce(error);
+
+      const feature = {
+        id: 'feature-1234-abc',
+        title: 'New Feature',
+        category: 'ui',
+        description: 'A new feature description',
+      };
+
+      const result = await loader.syncFeatureToAppSpec(testProjectPath, feature);
+
+      expect(result).toBe(false);
+      expect(fs.writeFile).not.toHaveBeenCalled();
+    });
+
+    it('should return false when feature already exists (duplicate)', async () => {
+      vi.mocked(fs.readFile).mockResolvedValueOnce(sampleAppSpec);
+
+      const feature = {
+        id: 'feature-5678-xyz',
+        title: 'Existing Feature', // Same name as existing feature
+        category: 'ui',
+        description: 'Different description',
+      };
+
+      const result = await loader.syncFeatureToAppSpec(testProjectPath, feature);
+
+      expect(result).toBe(false);
+      expect(fs.writeFile).not.toHaveBeenCalled();
+    });
+
+    it('should use feature ID as fallback name when title is missing', async () => {
+      vi.mocked(fs.readFile).mockResolvedValueOnce(sampleAppSpec);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      const feature = {
+        id: 'feature-1234-abc',
+        category: 'ui',
+        description: 'Feature without title',
+        // No title property
+      };
+
+      const result = await loader.syncFeatureToAppSpec(testProjectPath, feature);
+
+      expect(result).toBe(true);
+      expect(fs.writeFile).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.stringContaining('Feature: feature-1234-abc'),
+        'utf-8'
+      );
+    });
+
+    it('should handle app_spec without implemented_features section', async () => {
+      vi.mocked(fs.readFile).mockResolvedValueOnce(appSpecWithoutFeatures);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      const feature = {
+        id: 'feature-1234-abc',
+        title: 'First Feature',
+        category: 'ui',
+        description: 'First implemented feature',
+      };
+
+      const result = await loader.syncFeatureToAppSpec(testProjectPath, feature);
+
+      expect(result).toBe(true);
+      expect(fs.writeFile).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.stringContaining('<implemented_features>'),
+        'utf-8'
+      );
+      expect(fs.writeFile).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.stringContaining('First Feature'),
+        'utf-8'
+      );
+    });
+
+    it('should throw on non-ENOENT file read errors', async () => {
+      const error = new Error('Permission denied');
+      vi.mocked(fs.readFile).mockRejectedValueOnce(error);
+
+      const feature = {
+        id: 'feature-1234-abc',
+        title: 'New Feature',
+        category: 'ui',
+        description: 'A new feature description',
+      };
+
+      await expect(loader.syncFeatureToAppSpec(testProjectPath, feature)).rejects.toThrow(
+        'Permission denied'
+      );
+    });
+
+    it('should preserve existing features when adding a new one', async () => {
+      vi.mocked(fs.readFile).mockResolvedValueOnce(sampleAppSpec);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      const feature = {
+        id: 'feature-1234-abc',
+        title: 'New Feature',
+        category: 'ui',
+        description: 'A new feature',
+      };
+
+      await loader.syncFeatureToAppSpec(testProjectPath, feature);
+
+      // Verify both old and new features are in the output
+      expect(fs.writeFile).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.stringContaining('Existing Feature'),
+        'utf-8'
+      );
+      expect(fs.writeFile).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.stringContaining('New Feature'),
+        'utf-8'
+      );
+    });
+
+    it('should escape special characters in feature name and description', async () => {
+      vi.mocked(fs.readFile).mockResolvedValueOnce(sampleAppSpec);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      const feature = {
+        id: 'feature-1234-abc',
+        title: 'Feature with <special> & "chars"',
+        category: 'ui',
+        description: 'Description with <tags> & "quotes"',
+      };
+
+      const result = await loader.syncFeatureToAppSpec(testProjectPath, feature);
+
+      expect(result).toBe(true);
+      // The XML should have escaped characters
+      expect(fs.writeFile).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.stringContaining('&lt;special&gt;'),
+        'utf-8'
+      );
+      expect(fs.writeFile).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.stringContaining('&amp;'),
+        'utf-8'
+      );
+    });
+
+    it('should not add empty file_locations array', async () => {
+      vi.mocked(fs.readFile).mockResolvedValueOnce(sampleAppSpec);
+      vi.mocked(fs.writeFile).mockResolvedValue(undefined);
+
+      const feature = {
+        id: 'feature-1234-abc',
+        title: 'Feature Without Locations',
+        category: 'ui',
+        description: 'No file locations',
+      };
+
+      await loader.syncFeatureToAppSpec(testProjectPath, feature, []);
+
+      // File locations should not be included when array is empty
+      const writeCall = vi.mocked(fs.writeFile).mock.calls[0];
+      const writtenContent = writeCall[1] as string;
+
+      // Count occurrences of file_locations - should only have the one from Existing Feature if any
+      // The new feature should not add file_locations
+      expect(writtenContent).toContain('Feature Without Locations');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/feature-state-manager.test.ts b/temp_repo/apps/server/tests/unit/services/feature-state-manager.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d0c3ea4b01bc5517ce16ef9d25ad79e056b1f64d
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/feature-state-manager.test.ts
@@ -0,0 +1,1539 @@
+import { describe, it, expect, beforeEach, vi, type Mock } from 'vitest';
+import path from 'path';
+import { FeatureStateManager } from '@/services/feature-state-manager.js';
+import type { Feature } from '@automaker/types';
+import { isPipelineStatus } from '@automaker/types';
+
+const PIPELINE_SUMMARY_SEPARATOR = '\n\n---\n\n';
+const PIPELINE_SUMMARY_HEADER_PREFIX = '### ';
+import type { EventEmitter } from '@/lib/events.js';
+import type { FeatureLoader } from '@/services/feature-loader.js';
+import * as secureFs from '@/lib/secure-fs.js';
+import { atomicWriteJson, readJsonWithRecovery } from '@automaker/utils';
+import { getFeatureDir, getFeaturesDir } from '@automaker/platform';
+import { getNotificationService } from '@/services/notification-service.js';
+import { pipelineService } from '@/services/pipeline-service.js';
+
+/**
+ * Helper to normalize paths for cross-platform test compatibility.
+ * Uses path.normalize (not path.resolve) to match path.join behavior in production code.
+ */
+const normalizePath = (p: string): string => path.normalize(p);
+
+// Mock dependencies
+vi.mock('@/lib/secure-fs.js', () => ({
+  readFile: vi.fn(),
+  readdir: vi.fn(),
+}));
+
+vi.mock('@automaker/utils', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@automaker/utils')>();
+  return {
+    ...actual,
+    atomicWriteJson: vi.fn(),
+    readJsonWithRecovery: vi.fn(),
+    logRecoveryWarning: vi.fn(),
+  };
+});
+
+vi.mock('@automaker/platform', () => ({
+  getFeatureDir: vi.fn(),
+  getFeaturesDir: vi.fn(),
+}));
+
+vi.mock('@/services/notification-service.js', () => ({
+  getNotificationService: vi.fn(() => ({
+    createNotification: vi.fn(),
+  })),
+}));
+
+vi.mock('@/services/pipeline-service.js', () => ({
+  pipelineService: {
+    getStepIdFromStatus: vi.fn((status: string) => {
+      if (status.startsWith('pipeline_')) return status.replace('pipeline_', '');
+      return null;
+    }),
+    getStep: vi.fn(),
+  },
+}));
+
+describe('FeatureStateManager', () => {
+  let manager: FeatureStateManager;
+  let mockEvents: EventEmitter;
+  let mockFeatureLoader: FeatureLoader;
+
+  const mockFeature: Feature = {
+    id: 'feature-123',
+    name: 'Test Feature',
+    title: 'Test Feature Title',
+    description: 'A test feature',
+    status: 'pending',
+    createdAt: '2024-01-01T00:00:00Z',
+    updatedAt: '2024-01-01T00:00:00Z',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockEvents = {
+      emit: vi.fn(),
+      subscribe: vi.fn(() => vi.fn()),
+    };
+
+    mockFeatureLoader = {
+      syncFeatureToAppSpec: vi.fn(),
+    } as unknown as FeatureLoader;
+
+    manager = new FeatureStateManager(mockEvents, mockFeatureLoader);
+
+    // Default mocks
+    (getFeatureDir as Mock).mockReturnValue('/project/.automaker/features/feature-123');
+    (getFeaturesDir as Mock).mockReturnValue('/project/.automaker/features');
+  });
+
+  describe('loadFeature', () => {
+    it('should load feature from disk', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({ data: mockFeature, recovered: false });
+
+      const feature = await manager.loadFeature('/project', 'feature-123');
+
+      expect(feature).toEqual(mockFeature);
+      expect(getFeatureDir).toHaveBeenCalledWith('/project', 'feature-123');
+      expect(readJsonWithRecovery).toHaveBeenCalledWith(
+        normalizePath('/project/.automaker/features/feature-123/feature.json'),
+        null,
+        expect.objectContaining({ autoRestore: true })
+      );
+    });
+
+    it('should return null if feature does not exist', async () => {
+      (readJsonWithRecovery as Mock).mockRejectedValue(new Error('ENOENT'));
+
+      const feature = await manager.loadFeature('/project', 'non-existent');
+
+      expect(feature).toBeNull();
+    });
+
+    it('should return null if feature JSON is invalid', async () => {
+      // readJsonWithRecovery returns null as the default value when JSON is invalid
+      (readJsonWithRecovery as Mock).mockResolvedValue({ data: null, recovered: false });
+
+      const feature = await manager.loadFeature('/project', 'feature-123');
+
+      expect(feature).toBeNull();
+    });
+  });
+
+  describe('updateFeatureStatus', () => {
+    it('should update feature status and persist to disk', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'in_progress');
+
+      expect(atomicWriteJson).toHaveBeenCalled();
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.status).toBe('in_progress');
+      expect(savedFeature.updatedAt).toBeDefined();
+    });
+
+    it('should set justFinishedAt when status is waiting_approval', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'waiting_approval');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.justFinishedAt).toBeDefined();
+    });
+
+    it('should clear justFinishedAt when status is not waiting_approval', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, justFinishedAt: '2024-01-01T00:00:00Z' },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'in_progress');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.justFinishedAt).toBeUndefined();
+    });
+
+    it('should finalize in_progress tasks but keep pending tasks when moving to waiting_approval', async () => {
+      const featureWithTasks: Feature = {
+        ...mockFeature,
+        status: 'in_progress',
+        planSpec: {
+          status: 'approved',
+          version: 1,
+          reviewedByUser: true,
+          currentTaskId: 'task-2',
+          tasksCompleted: 1,
+          tasks: [
+            { id: 'task-1', title: 'Task 1', status: 'completed', description: 'First task' },
+            { id: 'task-2', title: 'Task 2', status: 'in_progress', description: 'Second task' },
+            { id: 'task-3', title: 'Task 3', status: 'pending', description: 'Third task' },
+          ],
+        },
+      };
+
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: featureWithTasks,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'waiting_approval');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      // Already completed tasks stay completed
+      expect(savedFeature.planSpec?.tasks?.[0].status).toBe('completed');
+      // in_progress tasks should be finalized to completed
+      expect(savedFeature.planSpec?.tasks?.[1].status).toBe('completed');
+      // pending tasks should remain pending (never started)
+      expect(savedFeature.planSpec?.tasks?.[2].status).toBe('pending');
+      // currentTaskId should be cleared
+      expect(savedFeature.planSpec?.currentTaskId).toBeUndefined();
+      // tasksCompleted should equal actual completed tasks count
+      expect(savedFeature.planSpec?.tasksCompleted).toBe(2);
+    });
+
+    it('should finalize tasks when moving to verified status', async () => {
+      const featureWithTasks: Feature = {
+        ...mockFeature,
+        status: 'in_progress',
+        planSpec: {
+          status: 'approved',
+          version: 1,
+          reviewedByUser: true,
+          currentTaskId: 'task-2',
+          tasksCompleted: 1,
+          tasks: [
+            { id: 'task-1', title: 'Task 1', status: 'completed', description: 'First task' },
+            { id: 'task-2', title: 'Task 2', status: 'in_progress', description: 'Second task' },
+            { id: 'task-3', title: 'Task 3', status: 'pending', description: 'Third task' },
+          ],
+        },
+      };
+
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: featureWithTasks,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'verified');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      // Already completed tasks stay completed
+      expect(savedFeature.planSpec?.tasks?.[0].status).toBe('completed');
+      // in_progress tasks should be finalized to completed
+      expect(savedFeature.planSpec?.tasks?.[1].status).toBe('completed');
+      // pending tasks should remain pending (never started)
+      expect(savedFeature.planSpec?.tasks?.[2].status).toBe('pending');
+      // currentTaskId should be cleared
+      expect(savedFeature.planSpec?.currentTaskId).toBeUndefined();
+      // tasksCompleted should equal actual completed tasks count
+      expect(savedFeature.planSpec?.tasksCompleted).toBe(2);
+      // justFinishedAt should be cleared for verified
+      expect(savedFeature.justFinishedAt).toBeUndefined();
+    });
+
+    it('should handle waiting_approval without planSpec tasks gracefully', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'waiting_approval');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.status).toBe('waiting_approval');
+      expect(savedFeature.justFinishedAt).toBeDefined();
+    });
+
+    it('should create notification for waiting_approval status', async () => {
+      const mockNotificationService = { createNotification: vi.fn() };
+      (getNotificationService as Mock).mockReturnValue(mockNotificationService);
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'waiting_approval');
+
+      expect(mockNotificationService.createNotification).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'feature_waiting_approval',
+          featureId: 'feature-123',
+        })
+      );
+    });
+
+    it('should use feature.title as notification title for waiting_approval status', async () => {
+      const mockNotificationService = { createNotification: vi.fn() };
+      (getNotificationService as Mock).mockReturnValue(mockNotificationService);
+      const featureWithTitle: Feature = {
+        ...mockFeature,
+        title: 'My Awesome Feature Title',
+        name: 'old-name-property', // name property exists but should not be used
+      };
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: featureWithTitle,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'waiting_approval');
+
+      expect(mockNotificationService.createNotification).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'feature_waiting_approval',
+          title: 'My Awesome Feature Title',
+          message: 'Feature Ready for Review',
+        })
+      );
+    });
+
+    it('should fallback to featureId as notification title when feature.title is undefined in waiting_approval notification', async () => {
+      const mockNotificationService = { createNotification: vi.fn() };
+      (getNotificationService as Mock).mockReturnValue(mockNotificationService);
+      const featureWithoutTitle: Feature = {
+        ...mockFeature,
+        title: undefined,
+        name: 'old-name-property',
+      };
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: featureWithoutTitle,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'waiting_approval');
+
+      expect(mockNotificationService.createNotification).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'feature_waiting_approval',
+          title: 'feature-123',
+          message: 'Feature Ready for Review',
+        })
+      );
+    });
+
+    it('should handle empty string title by using featureId as notification title in waiting_approval notification', async () => {
+      const mockNotificationService = { createNotification: vi.fn() };
+      (getNotificationService as Mock).mockReturnValue(mockNotificationService);
+      const featureWithEmptyTitle: Feature = {
+        ...mockFeature,
+        title: '',
+        name: 'old-name-property',
+      };
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: featureWithEmptyTitle,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'waiting_approval');
+
+      expect(mockNotificationService.createNotification).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'feature_waiting_approval',
+          title: 'feature-123',
+          message: 'Feature Ready for Review',
+        })
+      );
+    });
+
+    it('should create notification for verified status', async () => {
+      const mockNotificationService = { createNotification: vi.fn() };
+      (getNotificationService as Mock).mockReturnValue(mockNotificationService);
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'verified');
+
+      expect(mockNotificationService.createNotification).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'feature_verified',
+          featureId: 'feature-123',
+        })
+      );
+    });
+
+    it('should use feature.title as notification title for verified status', async () => {
+      const mockNotificationService = { createNotification: vi.fn() };
+      (getNotificationService as Mock).mockReturnValue(mockNotificationService);
+      const featureWithTitle: Feature = {
+        ...mockFeature,
+        title: 'My Awesome Feature Title',
+        name: 'old-name-property', // name property exists but should not be used
+      };
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: featureWithTitle,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'verified');
+
+      expect(mockNotificationService.createNotification).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'feature_verified',
+          title: 'My Awesome Feature Title',
+          message: 'Feature Verified',
+        })
+      );
+    });
+
+    it('should fallback to featureId as notification title when feature.title is undefined in verified notification', async () => {
+      const mockNotificationService = { createNotification: vi.fn() };
+      (getNotificationService as Mock).mockReturnValue(mockNotificationService);
+      const featureWithoutTitle: Feature = {
+        ...mockFeature,
+        title: undefined,
+        name: 'old-name-property',
+      };
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: featureWithoutTitle,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'verified');
+
+      expect(mockNotificationService.createNotification).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'feature_verified',
+          title: 'feature-123',
+          message: 'Feature Verified',
+        })
+      );
+    });
+
+    it('should handle empty string title by using featureId as notification title in verified notification', async () => {
+      const mockNotificationService = { createNotification: vi.fn() };
+      (getNotificationService as Mock).mockReturnValue(mockNotificationService);
+      const featureWithEmptyTitle: Feature = {
+        ...mockFeature,
+        title: '',
+        name: 'old-name-property',
+      };
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: featureWithEmptyTitle,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'verified');
+
+      expect(mockNotificationService.createNotification).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'feature_verified',
+          title: 'feature-123',
+          message: 'Feature Verified',
+        })
+      );
+    });
+
+    it('should sync to app_spec for completed status', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'completed');
+
+      expect(mockFeatureLoader.syncFeatureToAppSpec).toHaveBeenCalledWith(
+        '/project',
+        expect.objectContaining({ status: 'completed' })
+      );
+    });
+
+    it('should sync to app_spec for verified status', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeatureStatus('/project', 'feature-123', 'verified');
+
+      expect(mockFeatureLoader.syncFeatureToAppSpec).toHaveBeenCalled();
+    });
+
+    it('should not fail if sync to app_spec fails', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature },
+        recovered: false,
+        source: 'main',
+      });
+      (mockFeatureLoader.syncFeatureToAppSpec as Mock).mockRejectedValue(new Error('Sync failed'));
+
+      // Should not throw
+      await expect(
+        manager.updateFeatureStatus('/project', 'feature-123', 'completed')
+      ).resolves.not.toThrow();
+    });
+
+    it('should handle feature not found gracefully', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: null,
+        recovered: true,
+        source: 'default',
+      });
+
+      // Should not throw
+      await expect(
+        manager.updateFeatureStatus('/project', 'non-existent', 'in_progress')
+      ).resolves.not.toThrow();
+      expect(atomicWriteJson).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('markFeatureInterrupted', () => {
+    it('should mark feature as interrupted', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'in_progress' },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.markFeatureInterrupted('/project', 'feature-123', 'server shutdown');
+
+      expect(atomicWriteJson).toHaveBeenCalled();
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.status).toBe('interrupted');
+    });
+
+    it('should preserve pipeline_* statuses', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step_1' },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.markFeatureInterrupted('/project', 'feature-123', 'server shutdown');
+
+      // Should NOT call atomicWriteJson because pipeline status is preserved
+      expect(atomicWriteJson).not.toHaveBeenCalled();
+      expect(isPipelineStatus('pipeline_step_1')).toBe(true);
+    });
+
+    it('should preserve pipeline_complete status', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_complete' },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.markFeatureInterrupted('/project', 'feature-123');
+
+      expect(atomicWriteJson).not.toHaveBeenCalled();
+    });
+
+    it('should handle feature not found', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: null,
+        recovered: true,
+        source: 'default',
+      });
+
+      // Should not throw
+      await expect(
+        manager.markFeatureInterrupted('/project', 'non-existent')
+      ).resolves.not.toThrow();
+    });
+  });
+
+  describe('resetStuckFeatures', () => {
+    it('should reset in_progress features to ready if has approved plan', async () => {
+      const stuckFeature: Feature = {
+        ...mockFeature,
+        status: 'in_progress',
+        planSpec: { status: 'approved', version: 1, reviewedByUser: true },
+      };
+
+      (secureFs.readdir as Mock).mockResolvedValue([
+        { name: 'feature-123', isDirectory: () => true },
+      ]);
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: stuckFeature,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.resetStuckFeatures('/project');
+
+      expect(atomicWriteJson).toHaveBeenCalled();
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.status).toBe('ready');
+    });
+
+    it('should reset in_progress features to backlog if no approved plan', async () => {
+      const stuckFeature: Feature = {
+        ...mockFeature,
+        status: 'in_progress',
+        planSpec: undefined,
+      };
+
+      (secureFs.readdir as Mock).mockResolvedValue([
+        { name: 'feature-123', isDirectory: () => true },
+      ]);
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: stuckFeature,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.resetStuckFeatures('/project');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.status).toBe('backlog');
+    });
+
+    it('should preserve pipeline_* statuses during reset', async () => {
+      const pipelineFeature: Feature = {
+        ...mockFeature,
+        status: 'pipeline_testing',
+        planSpec: { status: 'approved', version: 1, reviewedByUser: true },
+      };
+
+      (secureFs.readdir as Mock).mockResolvedValue([
+        { name: 'feature-123', isDirectory: () => true },
+      ]);
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: pipelineFeature,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.resetStuckFeatures('/project');
+
+      // Status should NOT be changed, but needsUpdate might be true if other things reset
+      // In this case, nothing else should be reset, so atomicWriteJson shouldn't be called
+      expect(atomicWriteJson).not.toHaveBeenCalled();
+    });
+
+    it('should reset generating planSpec status to pending', async () => {
+      const stuckFeature: Feature = {
+        ...mockFeature,
+        status: 'pending',
+        planSpec: { status: 'generating', version: 1, reviewedByUser: false },
+      };
+
+      (secureFs.readdir as Mock).mockResolvedValue([
+        { name: 'feature-123', isDirectory: () => true },
+      ]);
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: stuckFeature,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.resetStuckFeatures('/project');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.planSpec?.status).toBe('pending');
+    });
+
+    it('should reset in_progress tasks to pending', async () => {
+      const stuckFeature: Feature = {
+        ...mockFeature,
+        status: 'pending',
+        planSpec: {
+          status: 'approved',
+          version: 1,
+          reviewedByUser: true,
+          tasks: [
+            { id: 'task-1', title: 'Task 1', status: 'completed', description: '' },
+            { id: 'task-2', title: 'Task 2', status: 'in_progress', description: '' },
+            { id: 'task-3', title: 'Task 3', status: 'pending', description: '' },
+          ],
+          currentTaskId: 'task-2',
+        },
+      };
+
+      (secureFs.readdir as Mock).mockResolvedValue([
+        { name: 'feature-123', isDirectory: () => true },
+      ]);
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: stuckFeature,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.resetStuckFeatures('/project');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.planSpec?.tasks?.[1].status).toBe('pending');
+      expect(savedFeature.planSpec?.currentTaskId).toBeUndefined();
+    });
+
+    it('should skip non-directory entries', async () => {
+      (secureFs.readdir as Mock).mockResolvedValue([
+        { name: 'feature-123', isDirectory: () => true },
+        { name: 'some-file.txt', isDirectory: () => false },
+      ]);
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: mockFeature,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.resetStuckFeatures('/project');
+
+      // Should only process the directory
+      expect(readJsonWithRecovery).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle features directory not existing', async () => {
+      const error = new Error('ENOENT') as NodeJS.ErrnoException;
+      error.code = 'ENOENT';
+      (secureFs.readdir as Mock).mockRejectedValue(error);
+
+      // Should not throw
+      await expect(manager.resetStuckFeatures('/project')).resolves.not.toThrow();
+    });
+
+    it('should not update feature if nothing is stuck', async () => {
+      const normalFeature: Feature = {
+        ...mockFeature,
+        status: 'completed',
+        planSpec: { status: 'approved', version: 1, reviewedByUser: true },
+      };
+
+      (secureFs.readdir as Mock).mockResolvedValue([
+        { name: 'feature-123', isDirectory: () => true },
+      ]);
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: normalFeature,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.resetStuckFeatures('/project');
+
+      expect(atomicWriteJson).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('updateFeaturePlanSpec', () => {
+    it('should update planSpec with partial updates', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeaturePlanSpec('/project', 'feature-123', { status: 'approved' });
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.planSpec?.status).toBe('approved');
+    });
+
+    it('should initialize planSpec if not exists', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, planSpec: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeaturePlanSpec('/project', 'feature-123', { status: 'approved' });
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.planSpec).toBeDefined();
+      expect(savedFeature.planSpec?.version).toBe(1);
+    });
+
+    it('should increment version when content changes', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: {
+          ...mockFeature,
+          planSpec: {
+            status: 'pending',
+            version: 2,
+            content: 'old content',
+            reviewedByUser: false,
+          },
+        },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateFeaturePlanSpec('/project', 'feature-123', { content: 'new content' });
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.planSpec?.version).toBe(3);
+    });
+  });
+
+  describe('saveFeatureSummary', () => {
+    it('should save summary and emit event', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'This is the summary');
+
+      // Verify persisted
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe('This is the summary');
+
+      // Verify event emitted AFTER persistence
+      expect(mockEvents.emit).toHaveBeenCalledWith('auto-mode:event', {
+        type: 'auto_mode_summary',
+        featureId: 'feature-123',
+        projectPath: '/project',
+        summary: 'This is the summary',
+      });
+    });
+
+    it('should handle feature not found', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: null,
+        recovered: true,
+        source: 'default',
+      });
+
+      await expect(
+        manager.saveFeatureSummary('/project', 'non-existent', 'Summary')
+      ).resolves.not.toThrow();
+      expect(atomicWriteJson).not.toHaveBeenCalled();
+      expect(mockEvents.emit).not.toHaveBeenCalled();
+    });
+
+    it('should accumulate summary with step header for pipeline features', async () => {
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Code Review', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step1', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'First step output');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe(
+        `${PIPELINE_SUMMARY_HEADER_PREFIX}Code Review\n\nFirst step output`
+      );
+    });
+
+    it('should append subsequent pipeline step summaries with separator', async () => {
+      const existingSummary = `${PIPELINE_SUMMARY_HEADER_PREFIX}Code Review\n\nFirst step output`;
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'step2' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step2', summary: existingSummary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'Second step output');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe(
+        `${PIPELINE_SUMMARY_HEADER_PREFIX}Code Review\n\nFirst step output${PIPELINE_SUMMARY_SEPARATOR}${PIPELINE_SUMMARY_HEADER_PREFIX}Testing\n\nSecond step output`
+      );
+    });
+
+    it('should normalize existing non-phase summary before appending pipeline step summary', async () => {
+      const existingSummary = 'Implemented authentication and settings management.';
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Code Review', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step1', summary: existingSummary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'Reviewed and approved changes');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe(
+        `${PIPELINE_SUMMARY_HEADER_PREFIX}Implementation\n\nImplemented authentication and settings management.${PIPELINE_SUMMARY_SEPARATOR}${PIPELINE_SUMMARY_HEADER_PREFIX}Code Review\n\nReviewed and approved changes`
+      );
+    });
+
+    it('should use fallback step name when pipeline step not found', async () => {
+      (pipelineService.getStep as Mock).mockResolvedValue(null);
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_unknown_step', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'Step output');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe(
+        `${PIPELINE_SUMMARY_HEADER_PREFIX}Unknown Step\n\nStep output`
+      );
+    });
+
+    it('should overwrite summary for non-pipeline features', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'in_progress', summary: 'Old summary' },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'New summary');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe('New summary');
+    });
+
+    it('should emit full accumulated summary for pipeline features', async () => {
+      const existingSummary = '### Code Review\n\nFirst step output';
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Refinement', id: 'step2' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step2', summary: existingSummary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'Refinement output');
+
+      const expectedSummary =
+        '### Code Review\n\nFirst step output\n\n---\n\n### Refinement\n\nRefinement output';
+      expect(mockEvents.emit).toHaveBeenCalledWith('auto-mode:event', {
+        type: 'auto_mode_summary',
+        featureId: 'feature-123',
+        projectPath: '/project',
+        summary: expectedSummary,
+      });
+    });
+
+    it('should skip accumulation for pipeline features when summary is empty', async () => {
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step1', summary: '' },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'Test output');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      // Empty string is falsy, so should start fresh
+      expect(savedFeature.summary).toBe('### Testing\n\nTest output');
+    });
+
+    it('should skip persistence when incoming summary is only whitespace', async () => {
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step1', summary: '### Existing\n\nValue' },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', '   \n\t  ');
+
+      expect(atomicWriteJson).not.toHaveBeenCalled();
+      expect(mockEvents.emit).not.toHaveBeenCalled();
+    });
+
+    it('should accumulate three pipeline steps in chronological order', async () => {
+      // Step 1: Code Review
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Code Review', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step1', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'Review findings');
+      const afterStep1 = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(afterStep1.summary).toBe('### Code Review\n\nReview findings');
+
+      // Step 2: Testing (summary from step 1 exists)
+      vi.clearAllMocks();
+      (getFeatureDir as Mock).mockReturnValue('/project/.automaker/features/feature-123');
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'step2' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step2', summary: afterStep1.summary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'All tests pass');
+      const afterStep2 = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+
+      // Step 3: Refinement (summaries from steps 1+2 exist)
+      vi.clearAllMocks();
+      (getFeatureDir as Mock).mockReturnValue('/project/.automaker/features/feature-123');
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Refinement', id: 'step3' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step3', summary: afterStep2.summary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'Code polished');
+      const afterStep3 = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+
+      // Verify the full accumulated summary has all three steps in order
+      expect(afterStep3.summary).toBe(
+        `${PIPELINE_SUMMARY_HEADER_PREFIX}Code Review\n\nReview findings${PIPELINE_SUMMARY_SEPARATOR}${PIPELINE_SUMMARY_HEADER_PREFIX}Testing\n\nAll tests pass${PIPELINE_SUMMARY_SEPARATOR}${PIPELINE_SUMMARY_HEADER_PREFIX}Refinement\n\nCode polished`
+      );
+    });
+
+    it('should replace existing step summary if called again for the same step', async () => {
+      const existingSummary = `${PIPELINE_SUMMARY_HEADER_PREFIX}Implementation\n\nInitial code${PIPELINE_SUMMARY_SEPARATOR}${PIPELINE_SUMMARY_HEADER_PREFIX}Code Review\n\nFirst review attempt`;
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Code Review', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step1', summary: existingSummary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary(
+        '/project',
+        'feature-123',
+        'Second review attempt (success)'
+      );
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      // Should REPLACE "First review attempt" with "Second review attempt (success)"
+      // and NOT append it as a new section
+      expect(savedFeature.summary).toBe(
+        `${PIPELINE_SUMMARY_HEADER_PREFIX}Implementation\n\nInitial code${PIPELINE_SUMMARY_SEPARATOR}${PIPELINE_SUMMARY_HEADER_PREFIX}Code Review\n\nSecond review attempt (success)`
+      );
+      // Ensure it didn't duplicate the separator or header
+      expect(
+        savedFeature.summary.match(new RegExp(PIPELINE_SUMMARY_HEADER_PREFIX + 'Code Review', 'g'))
+          ?.length
+      ).toBe(1);
+      expect(
+        savedFeature.summary.match(new RegExp(PIPELINE_SUMMARY_SEPARATOR.trim(), 'g'))?.length
+      ).toBe(1);
+    });
+
+    it('should replace last step summary without trailing separator', async () => {
+      // Test case: replacing the last step which has no separator after it
+      const existingSummary = `${PIPELINE_SUMMARY_HEADER_PREFIX}Implementation\n\nInitial code${PIPELINE_SUMMARY_SEPARATOR}${PIPELINE_SUMMARY_HEADER_PREFIX}Testing\n\nFirst test run`;
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'step2' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step2', summary: existingSummary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'All tests pass');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe(
+        `${PIPELINE_SUMMARY_HEADER_PREFIX}Implementation\n\nInitial code${PIPELINE_SUMMARY_SEPARATOR}${PIPELINE_SUMMARY_HEADER_PREFIX}Testing\n\nAll tests pass`
+      );
+    });
+
+    it('should replace first step summary with separator after it', async () => {
+      // Test case: replacing the first step which has a separator after it
+      const existingSummary = `${PIPELINE_SUMMARY_HEADER_PREFIX}Implementation\n\nFirst attempt${PIPELINE_SUMMARY_SEPARATOR}${PIPELINE_SUMMARY_HEADER_PREFIX}Testing\n\nAll tests pass`;
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Implementation', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step1', summary: existingSummary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'Second attempt');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe(
+        `${PIPELINE_SUMMARY_HEADER_PREFIX}Implementation\n\nSecond attempt${PIPELINE_SUMMARY_SEPARATOR}${PIPELINE_SUMMARY_HEADER_PREFIX}Testing\n\nAll tests pass`
+      );
+    });
+
+    it('should not match step header appearing in body text, only at section boundaries', async () => {
+      // Test case: body text contains "### Testing" which should NOT be matched
+      // Only headers at actual section boundaries should be replaced
+      const existingSummary = `${PIPELINE_SUMMARY_HEADER_PREFIX}Implementation\n\nThis step covers the Testing module.\n\n### Testing\n\nThe above is just markdown in body, not a section header.${PIPELINE_SUMMARY_SEPARATOR}${PIPELINE_SUMMARY_HEADER_PREFIX}Testing\n\nReal test section`;
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'step2' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step2', summary: existingSummary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'Updated test results');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      // The section replacement should only replace the actual Testing section at the boundary
+      // NOT the "### Testing" that appears in the body text
+      expect(savedFeature.summary).toBe(
+        `${PIPELINE_SUMMARY_HEADER_PREFIX}Implementation\n\nThis step covers the Testing module.\n\n### Testing\n\nThe above is just markdown in body, not a section header.${PIPELINE_SUMMARY_SEPARATOR}${PIPELINE_SUMMARY_HEADER_PREFIX}Testing\n\nUpdated test results`
+      );
+    });
+
+    it('should handle step name with special regex characters safely', async () => {
+      // Test case: step name contains characters that would break regex
+      const existingSummary = `${PIPELINE_SUMMARY_HEADER_PREFIX}Code (Review)\n\nFirst attempt`;
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Code (Review)', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step1', summary: existingSummary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'Second attempt');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe(
+        `${PIPELINE_SUMMARY_HEADER_PREFIX}Code (Review)\n\nSecond attempt`
+      );
+    });
+
+    it('should handle step name with brackets safely', async () => {
+      // Test case: step name contains array-like syntax [0]
+      const existingSummary = `${PIPELINE_SUMMARY_HEADER_PREFIX}Step [0]\n\nFirst attempt`;
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Step [0]', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step1', summary: existingSummary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'Second attempt');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe(
+        `${PIPELINE_SUMMARY_HEADER_PREFIX}Step [0]\n\nSecond attempt`
+      );
+    });
+
+    it('should handle pipelineService.getStepIdFromStatus throwing an error gracefully', async () => {
+      (pipelineService.getStepIdFromStatus as Mock).mockImplementation(() => {
+        throw new Error('Config not found');
+      });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_my_step', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'Step output');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      // Should use fallback: capitalize each word in the status suffix
+      expect(savedFeature.summary).toBe(`${PIPELINE_SUMMARY_HEADER_PREFIX}My Step\n\nStep output`);
+    });
+
+    it('should handle pipelineService.getStep throwing an error gracefully', async () => {
+      (pipelineService.getStep as Mock).mockRejectedValue(new Error('Disk read error'));
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_code_review', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'Step output');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      // Should use fallback: capitalize each word in the status suffix
+      expect(savedFeature.summary).toBe(
+        `${PIPELINE_SUMMARY_HEADER_PREFIX}Code Review\n\nStep output`
+      );
+    });
+
+    it('should handle summary content with markdown formatting', async () => {
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Code Review', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step1', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      const markdownSummary =
+        '## Changes Made\n- Fixed **bug** in `parser.ts`\n- Added `validateInput()` function\n\n```typescript\nconst x = 1;\n```';
+
+      await manager.saveFeatureSummary('/project', 'feature-123', markdownSummary);
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe(
+        `${PIPELINE_SUMMARY_HEADER_PREFIX}Code Review\n\n${markdownSummary}`
+      );
+    });
+
+    it('should persist before emitting event for pipeline summary accumulation', async () => {
+      const callOrder: string[] = [];
+      const existingSummary = '### Code Review\n\nFirst step output';
+
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'step2' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, status: 'pipeline_step2', summary: existingSummary },
+        recovered: false,
+        source: 'main',
+      });
+      (atomicWriteJson as Mock).mockImplementation(async () => {
+        callOrder.push('persist');
+      });
+      (mockEvents.emit as Mock).mockImplementation(() => {
+        callOrder.push('emit');
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'Test results');
+
+      expect(callOrder).toEqual(['persist', 'emit']);
+    });
+  });
+
+  describe('updateTaskStatus', () => {
+    it('should update task status and emit event', async () => {
+      const featureWithTasks: Feature = {
+        ...mockFeature,
+        planSpec: {
+          status: 'approved',
+          version: 1,
+          reviewedByUser: true,
+          tasks: [
+            { id: 'task-1', title: 'Task 1', status: 'pending', description: '' },
+            { id: 'task-2', title: 'Task 2', status: 'pending', description: '' },
+          ],
+        },
+      };
+
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: featureWithTasks,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateTaskStatus('/project', 'feature-123', 'task-1', 'completed');
+
+      // Verify persisted
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.planSpec?.tasks?.[0].status).toBe('completed');
+
+      // Verify event emitted
+      expect(mockEvents.emit).toHaveBeenCalledWith('auto-mode:event', {
+        type: 'auto_mode_task_status',
+        featureId: 'feature-123',
+        projectPath: '/project',
+        taskId: 'task-1',
+        status: 'completed',
+        tasks: expect.any(Array),
+      });
+    });
+
+    it('should update task status and summary and emit event', async () => {
+      const featureWithTasks: Feature = {
+        ...mockFeature,
+        planSpec: {
+          status: 'approved',
+          version: 1,
+          reviewedByUser: true,
+          tasks: [{ id: 'task-1', title: 'Task 1', status: 'pending', description: '' }],
+        },
+      };
+
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: featureWithTasks,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateTaskStatus(
+        '/project',
+        'feature-123',
+        'task-1',
+        'completed',
+        'Task finished successfully'
+      );
+
+      // Verify persisted
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.planSpec?.tasks?.[0].status).toBe('completed');
+      expect(savedFeature.planSpec?.tasks?.[0].summary).toBe('Task finished successfully');
+
+      // Verify event emitted
+      expect(mockEvents.emit).toHaveBeenCalledWith('auto-mode:event', {
+        type: 'auto_mode_task_status',
+        featureId: 'feature-123',
+        projectPath: '/project',
+        taskId: 'task-1',
+        status: 'completed',
+        summary: 'Task finished successfully',
+        tasks: expect.any(Array),
+      });
+    });
+
+    it('should handle task not found', async () => {
+      const featureWithTasks: Feature = {
+        ...mockFeature,
+        planSpec: {
+          status: 'approved',
+          version: 1,
+          reviewedByUser: true,
+          tasks: [{ id: 'task-1', title: 'Task 1', status: 'pending', description: '' }],
+        },
+      };
+
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: featureWithTasks,
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.updateTaskStatus('/project', 'feature-123', 'non-existent-task', 'completed');
+
+      // Should not persist or emit if task not found
+      expect(atomicWriteJson).not.toHaveBeenCalled();
+      expect(mockEvents.emit).not.toHaveBeenCalled();
+    });
+
+    it('should handle feature without tasks', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature },
+        recovered: false,
+        source: 'main',
+      });
+
+      await expect(
+        manager.updateTaskStatus('/project', 'feature-123', 'task-1', 'completed')
+      ).resolves.not.toThrow();
+      expect(atomicWriteJson).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('persist BEFORE emit ordering', () => {
+    it('saveFeatureSummary should persist before emitting event', async () => {
+      const callOrder: string[] = [];
+
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature },
+        recovered: false,
+        source: 'main',
+      });
+      (atomicWriteJson as Mock).mockImplementation(async () => {
+        callOrder.push('persist');
+      });
+      (mockEvents.emit as Mock).mockImplementation(() => {
+        callOrder.push('emit');
+      });
+
+      await manager.saveFeatureSummary('/project', 'feature-123', 'Summary');
+
+      expect(callOrder).toEqual(['persist', 'emit']);
+    });
+
+    it('updateTaskStatus should persist before emitting event', async () => {
+      const callOrder: string[] = [];
+
+      const featureWithTasks: Feature = {
+        ...mockFeature,
+        planSpec: {
+          status: 'approved',
+          version: 1,
+          reviewedByUser: true,
+          tasks: [{ id: 'task-1', title: 'Task 1', status: 'pending', description: '' }],
+        },
+      };
+
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: featureWithTasks,
+        recovered: false,
+        source: 'main',
+      });
+      (atomicWriteJson as Mock).mockImplementation(async () => {
+        callOrder.push('persist');
+      });
+      (mockEvents.emit as Mock).mockImplementation(() => {
+        callOrder.push('emit');
+      });
+
+      await manager.updateTaskStatus('/project', 'feature-123', 'task-1', 'completed');
+
+      expect(callOrder).toEqual(['persist', 'emit']);
+    });
+  });
+
+  describe('handleAutoModeEventError', () => {
+    let subscribeCallback: (type: string, payload: unknown) => void;
+
+    beforeEach(() => {
+      // Get the subscribe callback from the mock - the callback passed TO subscribe is at index [0]
+      // subscribe is called like: events.subscribe(callback), so callback is at mock.calls[0][0]
+      const mockCalls = (mockEvents.subscribe as Mock).mock.calls;
+      if (mockCalls.length > 0 && mockCalls[0].length > 0) {
+        subscribeCallback = mockCalls[0][0] as typeof subscribeCallback;
+      }
+    });
+
+    it('should ignore events with no type', async () => {
+      const mockNotificationService = { createNotification: vi.fn() };
+      (getNotificationService as Mock).mockReturnValue(mockNotificationService);
+
+      await subscribeCallback('auto-mode:event', {});
+
+      expect(mockNotificationService.createNotification).not.toHaveBeenCalled();
+    });
+
+    it('should ignore non-error events', async () => {
+      const mockNotificationService = { createNotification: vi.fn() };
+      (getNotificationService as Mock).mockReturnValue(mockNotificationService);
+
+      await subscribeCallback('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        passes: true,
+        projectPath: '/project',
+      });
+
+      expect(mockNotificationService.createNotification).not.toHaveBeenCalled();
+    });
+
+    it('should create auto_mode_error notification with gesture name as title when no featureId', async () => {
+      const mockNotificationService = { createNotification: vi.fn() };
+      (getNotificationService as Mock).mockReturnValue(mockNotificationService);
+
+      await subscribeCallback('auto-mode:event', {
+        type: 'auto_mode_error',
+        message: 'Something went wrong',
+        projectPath: '/project',
+      });
+
+      expect(mockNotificationService.createNotification).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'auto_mode_error',
+          title: 'Auto Mode Error',
+          message: 'Something went wrong',
+          projectPath: '/project',
+        })
+      );
+    });
+
+    it('should use error field instead of message when available', async () => {
+      const mockNotificationService = { createNotification: vi.fn() };
+      (getNotificationService as Mock).mockReturnValue(mockNotificationService);
+
+      await subscribeCallback('auto-mode:event', {
+        type: 'auto_mode_error',
+        message: 'Some message',
+        error: 'The actual error',
+        projectPath: '/project',
+      });
+
+      expect(mockNotificationService.createNotification).toHaveBeenCalledWith(
+        expect.objectContaining({
+          type: 'auto_mode_error',
+          message: 'The actual error',
+        })
+      );
+    });
+
+    it('should use feature title as notification title for feature error with featureId', async () => {
+      const mockNotificationService = { createNotification: vi.fn() };
+      (getNotificationService as Mock).mockReturnValue(mockNotificationService);
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...mockFeature, title: 'Login Page Feature' },
+        recovered: false,
+        source: 'main',
+      });
+
+      subscribeCallback('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        passes: false,
+        featureId: 'feature-123',
+        error: 'Build failed',
+        projectPath: '/project',
+      });
+
+      // Wait for async handleAutoModeEventError to complete
+      await vi.waitFor(() => {
+        expect(mockNotificationService.createNotification).toHaveBeenCalledWith(
+          expect.objectContaining({
+            type: 'feature_error',
+            title: 'Login Page Feature',
+            message: 'Feature Failed: Build failed',
+            featureId: 'feature-123',
+          })
+        );
+      });
+    });
+
+    it('should ignore auto_mode_feature_complete without passes=false', async () => {
+      const mockNotificationService = { createNotification: vi.fn() };
+      (getNotificationService as Mock).mockReturnValue(mockNotificationService);
+
+      await subscribeCallback('auto-mode:event', {
+        type: 'auto_mode_feature_complete',
+        passes: true,
+        projectPath: '/project',
+      });
+
+      expect(mockNotificationService.createNotification).not.toHaveBeenCalled();
+    });
+
+    it('should handle missing projectPath gracefully', async () => {
+      const mockNotificationService = { createNotification: vi.fn() };
+      (getNotificationService as Mock).mockReturnValue(mockNotificationService);
+
+      await subscribeCallback('auto-mode:event', {
+        type: 'auto_mode_error',
+        message: 'Error occurred',
+      });
+
+      expect(mockNotificationService.createNotification).not.toHaveBeenCalled();
+    });
+
+    it('should handle notification service failures gracefully', async () => {
+      (getNotificationService as Mock).mockImplementation(() => {
+        throw new Error('Service unavailable');
+      });
+
+      // Should not throw - the callback returns void so we just call it and wait for async work
+      subscribeCallback('auto-mode:event', {
+        type: 'auto_mode_error',
+        message: 'Error',
+        projectPath: '/project',
+      });
+
+      // Give async handleAutoModeEventError time to complete
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+  });
+
+  describe('destroy', () => {
+    it('should unsubscribe from event subscription', () => {
+      const unsubscribeFn = vi.fn();
+      (mockEvents.subscribe as Mock).mockReturnValue(unsubscribeFn);
+
+      // Create a new manager to get a fresh subscription
+      const newManager = new FeatureStateManager(mockEvents, mockFeatureLoader);
+
+      // Call destroy
+      newManager.destroy();
+
+      // Verify unsubscribe was called
+      expect(unsubscribeFn).toHaveBeenCalled();
+    });
+
+    it('should handle destroy being called multiple times', () => {
+      const unsubscribeFn = vi.fn();
+      (mockEvents.subscribe as Mock).mockReturnValue(unsubscribeFn);
+
+      const newManager = new FeatureStateManager(mockEvents, mockFeatureLoader);
+
+      // Call destroy multiple times
+      newManager.destroy();
+      newManager.destroy();
+
+      // Should only unsubscribe once
+      expect(unsubscribeFn).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/ideation-service.test.ts b/temp_repo/apps/server/tests/unit/services/ideation-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7004362a2eec311f8b805ac662c644c53c4ef99c
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/ideation-service.test.ts
@@ -0,0 +1,932 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { IdeationService } from '@/services/ideation-service.js';
+import type { EventEmitter } from '@/lib/events.js';
+import type { SettingsService } from '@/services/settings-service.js';
+import type { FeatureLoader } from '@/services/feature-loader.js';
+import * as secureFs from '@/lib/secure-fs.js';
+import * as platform from '@automaker/platform';
+import * as utils from '@automaker/utils';
+import type {
+  CreateIdeaInput,
+  UpdateIdeaInput,
+  Idea,
+  IdeationSession,
+  StartSessionOptions,
+} from '@automaker/types';
+import { ProviderFactory } from '@/providers/provider-factory.js';
+
+// Create shared mock instances for assertions using vi.hoisted
+const mockLogger = vi.hoisted(() => ({
+  info: vi.fn(),
+  error: vi.fn(),
+  warn: vi.fn(),
+  debug: vi.fn(),
+}));
+
+const mockCreateChatOptions = vi.hoisted(() =>
+  vi.fn(() => ({
+    model: 'claude-sonnet-4-6',
+    systemPrompt: 'test prompt',
+  }))
+);
+
+// Mock dependencies
+vi.mock('@/lib/secure-fs.js');
+vi.mock('@automaker/platform');
+vi.mock('@automaker/utils', async () => {
+  const actual = await vi.importActual<typeof import('@automaker/utils')>('@automaker/utils');
+  return {
+    ...actual,
+    createLogger: vi.fn(() => mockLogger),
+    loadContextFiles: vi.fn(),
+    isAbortError: vi.fn(),
+  };
+});
+vi.mock('@/providers/provider-factory.js');
+vi.mock('@/lib/sdk-options.js', () => ({
+  createChatOptions: mockCreateChatOptions,
+  validateWorkingDirectory: vi.fn(),
+}));
+
+describe('IdeationService', () => {
+  let service: IdeationService;
+  let mockEvents: EventEmitter;
+  let mockSettingsService: SettingsService;
+  let mockFeatureLoader: FeatureLoader;
+  const testProjectPath = '/test/project';
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Create mock event emitter
+    mockEvents = {
+      emit: vi.fn(),
+      on: vi.fn(),
+      off: vi.fn(),
+      removeAllListeners: vi.fn(),
+    } as unknown as EventEmitter;
+
+    // Create mock settings service
+    mockSettingsService = {
+      getCredentials: vi.fn().mockResolvedValue({}),
+      getGlobalSettings: vi.fn().mockResolvedValue({}),
+    } as unknown as SettingsService;
+
+    // Create mock feature loader
+    mockFeatureLoader = {
+      getAll: vi.fn().mockResolvedValue([]),
+    } as unknown as FeatureLoader;
+
+    // Mock platform functions
+    vi.mocked(platform.ensureIdeationDir).mockResolvedValue(undefined);
+    vi.mocked(platform.getIdeaDir).mockReturnValue(
+      '/test/project/.automaker/ideation/ideas/idea-123'
+    );
+    vi.mocked(platform.getIdeaPath).mockReturnValue(
+      '/test/project/.automaker/ideation/ideas/idea-123/idea.json'
+    );
+    vi.mocked(platform.getIdeasDir).mockReturnValue('/test/project/.automaker/ideation/ideas');
+    vi.mocked(platform.getIdeationSessionPath).mockReturnValue(
+      '/test/project/.automaker/ideation/sessions/session-123.json'
+    );
+    vi.mocked(platform.getIdeationSessionsDir).mockReturnValue(
+      '/test/project/.automaker/ideation/sessions'
+    );
+    vi.mocked(platform.getIdeationAnalysisPath).mockReturnValue(
+      '/test/project/.automaker/ideation/analysis.json'
+    );
+
+    // Mock utils (already mocked above, but reset return values)
+    vi.mocked(utils.loadContextFiles).mockResolvedValue({
+      formattedPrompt: 'Test context',
+      files: [],
+    });
+    vi.mocked(utils.isAbortError).mockReturnValue(false);
+
+    service = new IdeationService(mockEvents, mockSettingsService, mockFeatureLoader);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  // ============================================================================
+  // Session Management Tests
+  // ============================================================================
+
+  describe('Session Management', () => {
+    describe('startSession', () => {
+      it('should create a new session with default options', async () => {
+        vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+
+        const session = await service.startSession(testProjectPath);
+
+        expect(session).toBeDefined();
+        expect(session.id).toMatch(/^session-/);
+        expect(session.projectPath).toBe(testProjectPath);
+        expect(session.status).toBe('active');
+        expect(session.createdAt).toBeDefined();
+        expect(session.updatedAt).toBeDefined();
+        expect(platform.ensureIdeationDir).toHaveBeenCalledWith(testProjectPath);
+        expect(secureFs.writeFile).toHaveBeenCalled();
+        expect(mockEvents.emit).toHaveBeenCalledWith('ideation:session-started', {
+          sessionId: session.id,
+          projectPath: testProjectPath,
+        });
+      });
+
+      it('should create session with custom options', async () => {
+        vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+
+        const options: StartSessionOptions = {
+          promptCategory: 'features',
+          promptId: 'new-features',
+        };
+
+        const session = await service.startSession(testProjectPath, options);
+
+        expect(session.promptCategory).toBe('features');
+        expect(session.promptId).toBe('new-features');
+      });
+
+      it('should send initial message if provided in options', async () => {
+        vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+        vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify({ features: [] }));
+
+        // Mock provider
+        const mockProvider = {
+          executeQuery: vi.fn().mockReturnValue({
+            async *[Symbol.asyncIterator]() {
+              yield {
+                type: 'result',
+                subtype: 'success',
+                result: 'AI response',
+              };
+            },
+          }),
+        };
+        vi.mocked(ProviderFactory.getProviderForModel).mockReturnValue(mockProvider as any);
+
+        const options: StartSessionOptions = {
+          initialMessage: 'Hello, AI!',
+        };
+
+        await service.startSession(testProjectPath, options);
+
+        // Give time for the async message to process
+        await new Promise((resolve) => setTimeout(resolve, 10));
+
+        expect(mockProvider.executeQuery).toHaveBeenCalled();
+      });
+    });
+
+    describe('getSession', () => {
+      it('should return null for non-existent session', async () => {
+        vi.mocked(secureFs.readFile).mockRejectedValue(new Error('ENOENT'));
+
+        const result = await service.getSession(testProjectPath, 'non-existent');
+
+        expect(result).toBeNull();
+      });
+
+      it('should return active session from memory', async () => {
+        vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+
+        const session = await service.startSession(testProjectPath);
+        const retrieved = await service.getSession(testProjectPath, session.id);
+
+        expect(retrieved).toBeDefined();
+        expect(retrieved?.id).toBe(session.id);
+        expect(retrieved?.messages).toEqual([]);
+      });
+
+      it('should load session from disk if not in memory', async () => {
+        const mockSession: IdeationSession = {
+          id: 'session-123',
+          projectPath: testProjectPath,
+          status: 'active',
+          createdAt: '2024-01-01T00:00:00.000Z',
+          updatedAt: '2024-01-01T00:00:00.000Z',
+        };
+
+        const sessionData = {
+          session: mockSession,
+          messages: [],
+        };
+
+        vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(sessionData));
+
+        const result = await service.getSession(testProjectPath, 'session-123');
+
+        expect(result).toBeDefined();
+        expect(result?.id).toBe('session-123');
+      });
+    });
+
+    describe('stopSession', () => {
+      it('should stop an active session', async () => {
+        vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+
+        const session = await service.startSession(testProjectPath);
+        await service.stopSession(session.id);
+
+        expect(mockEvents.emit).toHaveBeenCalledWith('ideation:session-ended', {
+          sessionId: session.id,
+        });
+      });
+
+      it('should handle stopping non-existent session gracefully', async () => {
+        await expect(service.stopSession('non-existent')).resolves.not.toThrow();
+      });
+    });
+
+    describe('isSessionRunning', () => {
+      it('should return false for non-existent session', () => {
+        expect(service.isSessionRunning('non-existent')).toBe(false);
+      });
+
+      it('should return false for idle session', async () => {
+        vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+
+        const session = await service.startSession(testProjectPath);
+        expect(service.isSessionRunning(session.id)).toBe(false);
+      });
+    });
+  });
+
+  // ============================================================================
+  // Ideas CRUD Tests
+  // ============================================================================
+
+  describe('Ideas CRUD', () => {
+    describe('createIdea', () => {
+      it('should create a new idea with required fields', async () => {
+        vi.mocked(secureFs.mkdir).mockResolvedValue(undefined);
+        vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+
+        const input: CreateIdeaInput = {
+          title: 'Test Idea',
+          description: 'This is a test idea',
+          category: 'features',
+        };
+
+        const idea = await service.createIdea(testProjectPath, input);
+
+        expect(idea).toBeDefined();
+        expect(idea.id).toMatch(/^idea-/);
+        expect(idea.title).toBe('Test Idea');
+        expect(idea.description).toBe('This is a test idea');
+        expect(idea.category).toBe('features');
+        expect(idea.status).toBe('raw');
+        expect(idea.impact).toBe('medium');
+        expect(idea.effort).toBe('medium');
+        expect(secureFs.mkdir).toHaveBeenCalled();
+        expect(secureFs.writeFile).toHaveBeenCalled();
+      });
+
+      it('should create idea with all optional fields', async () => {
+        vi.mocked(secureFs.mkdir).mockResolvedValue(undefined);
+        vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+
+        const input: CreateIdeaInput = {
+          title: 'Full Idea',
+          description: 'Complete idea',
+          category: 'features',
+          status: 'refined',
+          impact: 'high',
+          effort: 'low',
+          conversationId: 'conv-123',
+          sourcePromptId: 'prompt-123',
+          userStories: ['Story 1', 'Story 2'],
+          notes: 'Additional notes',
+        };
+
+        const idea = await service.createIdea(testProjectPath, input);
+
+        expect(idea.status).toBe('refined');
+        expect(idea.impact).toBe('high');
+        expect(idea.effort).toBe('low');
+        expect(idea.conversationId).toBe('conv-123');
+        expect(idea.sourcePromptId).toBe('prompt-123');
+        expect(idea.userStories).toEqual(['Story 1', 'Story 2']);
+        expect(idea.notes).toBe('Additional notes');
+      });
+    });
+
+    describe('getIdeas', () => {
+      it('should return empty array when ideas directory does not exist', async () => {
+        vi.mocked(secureFs.access).mockRejectedValue(new Error('ENOENT'));
+
+        const ideas = await service.getIdeas(testProjectPath);
+
+        expect(ideas).toEqual([]);
+      });
+
+      it('should load all ideas from disk', async () => {
+        vi.mocked(secureFs.access).mockResolvedValue(undefined);
+        vi.mocked(secureFs.readdir).mockResolvedValue([
+          { name: 'idea-1', isDirectory: () => true } as any,
+          { name: 'idea-2', isDirectory: () => true } as any,
+        ]);
+
+        const idea1: Idea = {
+          id: 'idea-1',
+          title: 'Idea 1',
+          description: 'First idea',
+          category: 'features',
+          status: 'raw',
+          impact: 'medium',
+          effort: 'medium',
+          createdAt: '2024-01-01T00:00:00.000Z',
+          updatedAt: '2024-01-01T00:00:00.000Z',
+        };
+
+        const idea2: Idea = {
+          id: 'idea-2',
+          title: 'Idea 2',
+          description: 'Second idea',
+          category: 'bugs',
+          status: 'refined',
+          impact: 'high',
+          effort: 'low',
+          createdAt: '2024-01-02T00:00:00.000Z',
+          updatedAt: '2024-01-02T00:00:00.000Z',
+        };
+
+        vi.mocked(secureFs.readFile)
+          .mockResolvedValueOnce(JSON.stringify(idea1))
+          .mockResolvedValueOnce(JSON.stringify(idea2));
+
+        const ideas = await service.getIdeas(testProjectPath);
+
+        expect(ideas).toHaveLength(2);
+        expect(ideas[0].id).toBe('idea-2'); // Sorted by updatedAt descending
+        expect(ideas[1].id).toBe('idea-1');
+      });
+
+      it('should skip invalid idea files', async () => {
+        vi.mocked(secureFs.access).mockResolvedValue(undefined);
+        vi.mocked(secureFs.readdir).mockResolvedValue([
+          { name: 'idea-1', isDirectory: () => true } as any,
+          { name: 'idea-2', isDirectory: () => true } as any,
+        ]);
+
+        const validIdea: Idea = {
+          id: 'idea-1',
+          title: 'Valid Idea',
+          description: 'Valid',
+          category: 'features',
+          status: 'raw',
+          impact: 'medium',
+          effort: 'medium',
+          createdAt: '2024-01-01T00:00:00.000Z',
+          updatedAt: '2024-01-01T00:00:00.000Z',
+        };
+
+        vi.mocked(secureFs.readFile)
+          .mockResolvedValueOnce(JSON.stringify(validIdea))
+          .mockRejectedValueOnce(new Error('Invalid JSON'));
+
+        const ideas = await service.getIdeas(testProjectPath);
+
+        expect(ideas).toHaveLength(1);
+        expect(ideas[0].id).toBe('idea-1');
+      });
+    });
+
+    describe('getIdea', () => {
+      it('should return idea by id', async () => {
+        const mockIdea: Idea = {
+          id: 'idea-123',
+          title: 'Test Idea',
+          description: 'Test',
+          category: 'features',
+          status: 'raw',
+          impact: 'medium',
+          effort: 'medium',
+          createdAt: '2024-01-01T00:00:00.000Z',
+          updatedAt: '2024-01-01T00:00:00.000Z',
+        };
+
+        vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(mockIdea));
+
+        const idea = await service.getIdea(testProjectPath, 'idea-123');
+
+        expect(idea).toBeDefined();
+        expect(idea?.id).toBe('idea-123');
+      });
+
+      it('should return null for non-existent idea', async () => {
+        vi.mocked(secureFs.readFile).mockRejectedValue(new Error('ENOENT'));
+
+        const idea = await service.getIdea(testProjectPath, 'non-existent');
+
+        expect(idea).toBeNull();
+      });
+    });
+
+    describe('updateIdea', () => {
+      it('should update idea fields', async () => {
+        const existingIdea: Idea = {
+          id: 'idea-123',
+          title: 'Original Title',
+          description: 'Original',
+          category: 'features',
+          status: 'raw',
+          impact: 'medium',
+          effort: 'medium',
+          createdAt: '2024-01-01T00:00:00.000Z',
+          updatedAt: '2024-01-01T00:00:00.000Z',
+        };
+
+        vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingIdea));
+        vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+
+        const updates: UpdateIdeaInput = {
+          title: 'Updated Title',
+          status: 'refined',
+        };
+
+        const updated = await service.updateIdea(testProjectPath, 'idea-123', updates);
+
+        expect(updated).toBeDefined();
+        expect(updated?.title).toBe('Updated Title');
+        expect(updated?.status).toBe('refined');
+        expect(updated?.description).toBe('Original'); // Unchanged
+        expect(updated?.updatedAt).not.toBe('2024-01-01T00:00:00.000Z'); // Should be updated
+      });
+
+      it('should return null for non-existent idea', async () => {
+        vi.mocked(secureFs.readFile).mockRejectedValue(new Error('ENOENT'));
+
+        const updated = await service.updateIdea(testProjectPath, 'non-existent', {
+          title: 'New Title',
+        });
+
+        expect(updated).toBeNull();
+      });
+    });
+
+    describe('deleteIdea', () => {
+      it('should delete idea directory', async () => {
+        vi.mocked(secureFs.rm).mockResolvedValue(undefined);
+
+        await service.deleteIdea(testProjectPath, 'idea-123');
+
+        expect(secureFs.rm).toHaveBeenCalledWith(
+          expect.stringContaining('idea-123'),
+          expect.objectContaining({ recursive: true })
+        );
+      });
+
+      it('should handle non-existent idea gracefully', async () => {
+        vi.mocked(secureFs.rm).mockRejectedValue(new Error('ENOENT'));
+
+        await expect(service.deleteIdea(testProjectPath, 'non-existent')).resolves.not.toThrow();
+      });
+    });
+
+    describe('archiveIdea', () => {
+      it('should set idea status to archived', async () => {
+        const existingIdea: Idea = {
+          id: 'idea-123',
+          title: 'Test',
+          description: 'Test',
+          category: 'features',
+          status: 'raw',
+          impact: 'medium',
+          effort: 'medium',
+          createdAt: '2024-01-01T00:00:00.000Z',
+          updatedAt: '2024-01-01T00:00:00.000Z',
+        };
+
+        vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingIdea));
+        vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+
+        const archived = await service.archiveIdea(testProjectPath, 'idea-123');
+
+        expect(archived).toBeDefined();
+        expect(archived?.status).toBe('archived');
+      });
+    });
+  });
+
+  // ============================================================================
+  // Conversion Tests
+  // ============================================================================
+
+  describe('Idea to Feature Conversion', () => {
+    describe('convertToFeature', () => {
+      it('should convert idea to feature with basic fields', async () => {
+        const mockIdea: Idea = {
+          id: 'idea-123',
+          title: 'Add Dark Mode',
+          description: 'Implement dark mode theme',
+          category: 'feature',
+          status: 'refined',
+          impact: 'high',
+          effort: 'medium',
+          createdAt: '2024-01-01T00:00:00.000Z',
+          updatedAt: '2024-01-01T00:00:00.000Z',
+        };
+
+        vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(mockIdea));
+
+        const feature = await service.convertToFeature(testProjectPath, 'idea-123');
+
+        expect(feature).toBeDefined();
+        expect(feature.id).toMatch(/^feature-/);
+        expect(feature.title).toBe('Add Dark Mode');
+        expect(feature.description).toBe('Implement dark mode theme');
+        expect(feature.category).toBe('ui'); // features -> ui mapping
+        expect(feature.status).toBe('backlog');
+      });
+
+      it('should include user stories in feature description', async () => {
+        const mockIdea: Idea = {
+          id: 'idea-123',
+          title: 'Test',
+          description: 'Base description',
+          category: 'features',
+          status: 'refined',
+          impact: 'medium',
+          effort: 'medium',
+          userStories: ['As a user, I want X', 'As a user, I want Y'],
+          createdAt: '2024-01-01T00:00:00.000Z',
+          updatedAt: '2024-01-01T00:00:00.000Z',
+        };
+
+        vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(mockIdea));
+
+        const feature = await service.convertToFeature(testProjectPath, 'idea-123');
+
+        expect(feature.description).toContain('Base description');
+        expect(feature.description).toContain('## User Stories');
+        expect(feature.description).toContain('As a user, I want X');
+        expect(feature.description).toContain('As a user, I want Y');
+      });
+
+      it('should include notes in feature description', async () => {
+        const mockIdea: Idea = {
+          id: 'idea-123',
+          title: 'Test',
+          description: 'Base description',
+          category: 'features',
+          status: 'refined',
+          impact: 'medium',
+          effort: 'medium',
+          notes: 'Important implementation notes',
+          createdAt: '2024-01-01T00:00:00.000Z',
+          updatedAt: '2024-01-01T00:00:00.000Z',
+        };
+
+        vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(mockIdea));
+
+        const feature = await service.convertToFeature(testProjectPath, 'idea-123');
+
+        expect(feature.description).toContain('Base description');
+        expect(feature.description).toContain('## Notes');
+        expect(feature.description).toContain('Important implementation notes');
+      });
+
+      it('should throw error for non-existent idea', async () => {
+        vi.mocked(secureFs.readFile).mockRejectedValue(new Error('ENOENT'));
+
+        await expect(service.convertToFeature(testProjectPath, 'non-existent')).rejects.toThrow(
+          'Idea non-existent not found'
+        );
+      });
+    });
+  });
+
+  // ============================================================================
+  // Project Analysis Tests
+  // ============================================================================
+
+  describe('Project Analysis', () => {
+    describe('analyzeProject', () => {
+      it('should analyze project and generate suggestions', async () => {
+        vi.mocked(secureFs.readFile).mockResolvedValue(
+          JSON.stringify({
+            name: 'test-project',
+            dependencies: {},
+          })
+        );
+        vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+        vi.mocked(secureFs.access).mockResolvedValue(undefined);
+        vi.mocked(secureFs.readdir).mockResolvedValue([]);
+
+        const result = await service.analyzeProject(testProjectPath);
+
+        expect(result).toBeDefined();
+        expect(result.projectPath).toBe(testProjectPath);
+        expect(result.analyzedAt).toBeDefined();
+        expect(result.suggestions).toBeDefined();
+        expect(Array.isArray(result.suggestions)).toBe(true);
+        expect(mockEvents.emit).toHaveBeenCalledWith(
+          'ideation:analysis',
+          expect.objectContaining({
+            type: 'ideation:analysis-started',
+          })
+        );
+        expect(mockEvents.emit).toHaveBeenCalledWith(
+          'ideation:analysis',
+          expect.objectContaining({
+            type: 'ideation:analysis-complete',
+          })
+        );
+      });
+
+      it('should emit error event on failure', async () => {
+        // Mock writeFile to fail (this is called after gatherProjectStructure and isn't caught)
+        vi.mocked(secureFs.readFile).mockResolvedValue(
+          JSON.stringify({
+            name: 'test-project',
+            dependencies: {},
+          })
+        );
+        vi.mocked(secureFs.writeFile).mockRejectedValue(new Error('Write failed'));
+
+        await expect(service.analyzeProject(testProjectPath)).rejects.toThrow();
+
+        expect(mockEvents.emit).toHaveBeenCalledWith(
+          'ideation:analysis',
+          expect.objectContaining({
+            type: 'ideation:analysis-error',
+          })
+        );
+      });
+    });
+
+    describe('getCachedAnalysis', () => {
+      it('should return cached analysis if exists', async () => {
+        const mockAnalysis = {
+          projectPath: testProjectPath,
+          analyzedAt: '2024-01-01T00:00:00.000Z',
+          totalFiles: 10,
+          suggestions: [],
+          summary: 'Test summary',
+        };
+
+        vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(mockAnalysis));
+
+        const result = await service.getCachedAnalysis(testProjectPath);
+
+        expect(result).toEqual(mockAnalysis);
+      });
+
+      it('should return null if cache does not exist', async () => {
+        vi.mocked(secureFs.readFile).mockRejectedValue(new Error('ENOENT'));
+
+        const result = await service.getCachedAnalysis(testProjectPath);
+
+        expect(result).toBeNull();
+      });
+    });
+  });
+
+  // ============================================================================
+  // Prompt Management Tests
+  // ============================================================================
+
+  describe('Prompt Management', () => {
+    describe('getPromptCategories', () => {
+      it('should return list of prompt categories', () => {
+        const categories = service.getPromptCategories();
+
+        expect(Array.isArray(categories)).toBe(true);
+        expect(categories.length).toBeGreaterThan(0);
+        expect(categories[0]).toHaveProperty('id');
+        expect(categories[0]).toHaveProperty('name');
+      });
+    });
+
+    describe('getAllPrompts', () => {
+      it('should return all guided prompts', () => {
+        const prompts = service.getAllPrompts();
+
+        expect(Array.isArray(prompts)).toBe(true);
+        expect(prompts.length).toBeGreaterThan(0);
+        expect(prompts[0]).toHaveProperty('id');
+        expect(prompts[0]).toHaveProperty('category');
+        expect(prompts[0]).toHaveProperty('title');
+        expect(prompts[0]).toHaveProperty('prompt');
+      });
+    });
+
+    describe('getPromptsByCategory', () => {
+      it('should return prompts filtered by category', () => {
+        const allPrompts = service.getAllPrompts();
+        const firstCategory = allPrompts[0].category;
+
+        const filtered = service.getPromptsByCategory(firstCategory);
+
+        expect(Array.isArray(filtered)).toBe(true);
+        filtered.forEach((prompt) => {
+          expect(prompt.category).toBe(firstCategory);
+        });
+      });
+
+      it('should return empty array for non-existent category', () => {
+        const filtered = service.getPromptsByCategory('non-existent-category' as any);
+
+        expect(filtered).toEqual([]);
+      });
+    });
+  });
+
+  // ============================================================================
+  // Suggestions Generation Tests
+  // ============================================================================
+
+  describe('Suggestion Generation', () => {
+    describe('generateSuggestions', () => {
+      it('should generate suggestions for a prompt', async () => {
+        vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify({}));
+
+        const mockProvider = {
+          executeQuery: vi.fn().mockReturnValue({
+            async *[Symbol.asyncIterator]() {
+              yield {
+                type: 'result',
+                subtype: 'success',
+                result: JSON.stringify([
+                  {
+                    title: 'Add user authentication',
+                    description: 'Implement auth',
+                    category: 'security',
+                    impact: 'high',
+                    effort: 'high',
+                  },
+                ]),
+              };
+            },
+          }),
+        };
+
+        vi.mocked(ProviderFactory.getProviderForModel).mockReturnValue(mockProvider as any);
+
+        const prompts = service.getAllPrompts();
+        const firstPrompt = prompts[0];
+
+        const suggestions = await service.generateSuggestions(
+          testProjectPath,
+          firstPrompt.id,
+          'features',
+          5
+        );
+
+        expect(Array.isArray(suggestions)).toBe(true);
+        expect(mockEvents.emit).toHaveBeenCalledWith(
+          'ideation:suggestions',
+          expect.objectContaining({
+            type: 'started',
+          })
+        );
+      });
+
+      it('should throw error for non-existent prompt', async () => {
+        await expect(
+          service.generateSuggestions(testProjectPath, 'non-existent', 'features', 5)
+        ).rejects.toThrow('Prompt non-existent not found');
+      });
+
+      it('should include app spec context when useAppSpec is enabled', async () => {
+        const mockAppSpec = `
+          <project_specification>
+            <project_name>Test Project</project_name>
+            <overview>A test application for unit testing</overview>
+            <core_capabilities>
+              <capability>User authentication</capability>
+              <capability>Data visualization</capability>
+            </core_capabilities>
+            <implemented_features>
+              <feature>
+                <name>Login System</name>
+                <description>Basic auth with email/password</description>
+              </feature>
+            </implemented_features>
+          </project_specification>
+        `;
+
+        vi.mocked(platform.getAppSpecPath).mockReturnValue('/test/project/.automaker/app_spec.txt');
+
+        // First call returns app spec, subsequent calls return empty JSON
+        vi.mocked(secureFs.readFile)
+          .mockResolvedValueOnce(mockAppSpec)
+          .mockResolvedValue(JSON.stringify({}));
+
+        const mockProvider = {
+          executeQuery: vi.fn().mockReturnValue({
+            async *[Symbol.asyncIterator]() {
+              yield {
+                type: 'result',
+                subtype: 'success',
+                result: JSON.stringify([{ title: 'Test', description: 'Test' }]),
+              };
+            },
+          }),
+        };
+        vi.mocked(ProviderFactory.getProviderForModel).mockReturnValue(mockProvider as any);
+
+        const prompts = service.getAllPrompts();
+        await service.generateSuggestions(testProjectPath, prompts[0].id, 'feature', 5, {
+          useAppSpec: true,
+          useContextFiles: false,
+          useMemoryFiles: false,
+          useExistingFeatures: false,
+          useExistingIdeas: false,
+        });
+
+        // Verify createChatOptions was called with systemPrompt containing app spec info
+        expect(mockCreateChatOptions).toHaveBeenCalled();
+        const chatOptionsCall = mockCreateChatOptions.mock.calls[0][0];
+        expect(chatOptionsCall.systemPrompt).toContain('Test Project');
+        expect(chatOptionsCall.systemPrompt).toContain('A test application for unit testing');
+        expect(chatOptionsCall.systemPrompt).toContain('User authentication');
+        expect(chatOptionsCall.systemPrompt).toContain('Login System');
+      });
+
+      it('should exclude app spec context when useAppSpec is disabled', async () => {
+        const mockAppSpec = `
+          <project_specification>
+            <project_name>Hidden Project</project_name>
+            <overview>This should not appear</overview>
+          </project_specification>
+        `;
+
+        vi.mocked(platform.getAppSpecPath).mockReturnValue('/test/project/.automaker/app_spec.txt');
+        vi.mocked(secureFs.readFile).mockResolvedValue(mockAppSpec);
+
+        const mockProvider = {
+          executeQuery: vi.fn().mockReturnValue({
+            async *[Symbol.asyncIterator]() {
+              yield {
+                type: 'result',
+                subtype: 'success',
+                result: JSON.stringify([{ title: 'Test', description: 'Test' }]),
+              };
+            },
+          }),
+        };
+        vi.mocked(ProviderFactory.getProviderForModel).mockReturnValue(mockProvider as any);
+
+        const prompts = service.getAllPrompts();
+        await service.generateSuggestions(testProjectPath, prompts[0].id, 'feature', 5, {
+          useAppSpec: false,
+          useContextFiles: false,
+          useMemoryFiles: false,
+          useExistingFeatures: false,
+          useExistingIdeas: false,
+        });
+
+        // Verify createChatOptions was called with systemPrompt NOT containing app spec info
+        expect(mockCreateChatOptions).toHaveBeenCalled();
+        const chatOptionsCall = mockCreateChatOptions.mock.calls[0][0];
+        expect(chatOptionsCall.systemPrompt).not.toContain('Hidden Project');
+        expect(chatOptionsCall.systemPrompt).not.toContain('This should not appear');
+      });
+
+      it('should handle missing app spec file gracefully', async () => {
+        vi.mocked(platform.getAppSpecPath).mockReturnValue('/test/project/.automaker/app_spec.txt');
+
+        const enoentError = new Error('ENOENT: no such file or directory') as NodeJS.ErrnoException;
+        enoentError.code = 'ENOENT';
+
+        // First call fails with ENOENT for app spec, subsequent calls return empty JSON
+        vi.mocked(secureFs.readFile)
+          .mockRejectedValueOnce(enoentError)
+          .mockResolvedValue(JSON.stringify({}));
+
+        const mockProvider = {
+          executeQuery: vi.fn().mockReturnValue({
+            async *[Symbol.asyncIterator]() {
+              yield {
+                type: 'result',
+                subtype: 'success',
+                result: JSON.stringify([{ title: 'Test', description: 'Test' }]),
+              };
+            },
+          }),
+        };
+        vi.mocked(ProviderFactory.getProviderForModel).mockReturnValue(mockProvider as any);
+
+        const prompts = service.getAllPrompts();
+
+        // Should not throw
+        await expect(
+          service.generateSuggestions(testProjectPath, prompts[0].id, 'feature', 5, {
+            useAppSpec: true,
+            useContextFiles: false,
+            useMemoryFiles: false,
+            useExistingFeatures: false,
+            useExistingIdeas: false,
+          })
+        ).resolves.toBeDefined();
+
+        // Should not log warning for ENOENT
+        expect(mockLogger.warn).not.toHaveBeenCalled();
+      });
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/mcp-test-service.test.ts b/temp_repo/apps/server/tests/unit/services/mcp-test-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..07c1cc0df5c89d42dee12402e2d7968719932321
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/mcp-test-service.test.ts
@@ -0,0 +1,447 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import type { MCPServerConfig } from '@automaker/types';
+
+// Skip this test suite - MCP SDK mocking is complex and these tests need integration tests
+// Coverage will be handled by excluding this file from coverage thresholds
+describe.skip('mcp-test-service.ts', () => {});
+
+// Create mock client
+const mockClient = {
+  connect: vi.fn(),
+  listTools: vi.fn(),
+  close: vi.fn(),
+};
+
+// Mock the MCP SDK modules before importing MCPTestService
+vi.mock('@modelcontextprotocol/sdk/client/index.js', () => ({
+  Client: vi.fn(() => mockClient),
+}));
+
+vi.mock('@modelcontextprotocol/sdk/client/stdio.js', () => ({
+  StdioClientTransport: vi.fn(),
+}));
+
+vi.mock('@modelcontextprotocol/sdk/client/sse.js', () => ({
+  SSEClientTransport: vi.fn(),
+}));
+
+vi.mock('@modelcontextprotocol/sdk/client/streamableHttp.js', () => ({
+  StreamableHTTPClientTransport: vi.fn(),
+}));
+
+// Import after mocking
+import { MCPTestService } from '@/services/mcp-test-service.js';
+import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
+import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js';
+import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
+
+describe.skip('mcp-test-service.ts - SDK tests', () => {
+  let mcpTestService: MCPTestService;
+  let mockSettingsService: any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockSettingsService = {
+      getGlobalSettings: vi.fn(),
+    };
+
+    // Reset mock client defaults
+    mockClient.connect.mockResolvedValue(undefined);
+    mockClient.listTools.mockResolvedValue({ tools: [] });
+    mockClient.close.mockResolvedValue(undefined);
+
+    mcpTestService = new MCPTestService(mockSettingsService);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('testServer', () => {
+    describe('with stdio transport', () => {
+      it('should successfully test stdio server', async () => {
+        mockClient.listTools.mockResolvedValue({
+          tools: [
+            { name: 'tool1', description: 'Test tool 1' },
+            { name: 'tool2', description: 'Test tool 2', inputSchema: { type: 'object' } },
+          ],
+        });
+
+        const config: MCPServerConfig = {
+          id: 'test-server',
+          name: 'Test Server',
+          type: 'stdio',
+          command: 'node',
+          args: ['server.js'],
+          enabled: true,
+        };
+
+        const result = await mcpTestService.testServer(config);
+
+        expect(result.success).toBe(true);
+        expect(result.tools).toHaveLength(2);
+        expect(result.tools?.[0].name).toBe('tool1');
+        expect(result.tools?.[0].enabled).toBe(true);
+        expect(result.connectionTime).toBeGreaterThanOrEqual(0);
+        expect(result.serverInfo?.name).toBe('Test Server');
+        expect(StdioClientTransport).toHaveBeenCalledWith({
+          command: 'node',
+          args: ['server.js'],
+          env: undefined,
+        });
+      });
+
+      it('should throw error if command is missing for stdio', async () => {
+        const config: MCPServerConfig = {
+          id: 'test-server',
+          name: 'Test Server',
+          type: 'stdio',
+          enabled: true,
+        };
+
+        const result = await mcpTestService.testServer(config);
+
+        expect(result.success).toBe(false);
+        expect(result.error).toBe('Command is required for stdio transport');
+      });
+
+      it('should pass env to stdio transport', async () => {
+        const config: MCPServerConfig = {
+          id: 'test-server',
+          name: 'Test Server',
+          type: 'stdio',
+          command: 'node',
+          args: ['server.js'],
+          env: { API_KEY: 'secret' },
+          enabled: true,
+        };
+
+        await mcpTestService.testServer(config);
+
+        expect(StdioClientTransport).toHaveBeenCalledWith({
+          command: 'node',
+          args: ['server.js'],
+          env: { API_KEY: 'secret' },
+        });
+      });
+    });
+
+    describe('with SSE transport', () => {
+      it('should successfully test SSE server', async () => {
+        const config: MCPServerConfig = {
+          id: 'sse-server',
+          name: 'SSE Server',
+          type: 'sse',
+          url: 'http://localhost:3000/sse',
+          enabled: true,
+        };
+
+        const result = await mcpTestService.testServer(config);
+
+        expect(result.success).toBe(true);
+        expect(SSEClientTransport).toHaveBeenCalled();
+      });
+
+      it('should throw error if URL is missing for SSE', async () => {
+        const config: MCPServerConfig = {
+          id: 'sse-server',
+          name: 'SSE Server',
+          type: 'sse',
+          enabled: true,
+        };
+
+        const result = await mcpTestService.testServer(config);
+
+        expect(result.success).toBe(false);
+        expect(result.error).toBe('URL is required for SSE transport');
+      });
+
+      it('should pass headers to SSE transport', async () => {
+        const config: MCPServerConfig = {
+          id: 'sse-server',
+          name: 'SSE Server',
+          type: 'sse',
+          url: 'http://localhost:3000/sse',
+          headers: { Authorization: 'Bearer token' },
+          enabled: true,
+        };
+
+        await mcpTestService.testServer(config);
+
+        expect(SSEClientTransport).toHaveBeenCalledWith(
+          expect.any(URL),
+          expect.objectContaining({
+            requestInit: { headers: { Authorization: 'Bearer token' } },
+            eventSourceInit: expect.any(Object),
+          })
+        );
+      });
+    });
+
+    describe('with HTTP transport', () => {
+      it('should successfully test HTTP server', async () => {
+        const config: MCPServerConfig = {
+          id: 'http-server',
+          name: 'HTTP Server',
+          type: 'http',
+          url: 'http://localhost:3000/api',
+          enabled: true,
+        };
+
+        const result = await mcpTestService.testServer(config);
+
+        expect(result.success).toBe(true);
+        expect(StreamableHTTPClientTransport).toHaveBeenCalled();
+      });
+
+      it('should throw error if URL is missing for HTTP', async () => {
+        const config: MCPServerConfig = {
+          id: 'http-server',
+          name: 'HTTP Server',
+          type: 'http',
+          enabled: true,
+        };
+
+        const result = await mcpTestService.testServer(config);
+
+        expect(result.success).toBe(false);
+        expect(result.error).toBe('URL is required for HTTP transport');
+      });
+
+      it('should pass headers to HTTP transport', async () => {
+        const config: MCPServerConfig = {
+          id: 'http-server',
+          name: 'HTTP Server',
+          type: 'http',
+          url: 'http://localhost:3000/api',
+          headers: { 'X-API-Key': 'secret' },
+          enabled: true,
+        };
+
+        await mcpTestService.testServer(config);
+
+        expect(StreamableHTTPClientTransport).toHaveBeenCalledWith(
+          expect.any(URL),
+          expect.objectContaining({
+            requestInit: { headers: { 'X-API-Key': 'secret' } },
+          })
+        );
+      });
+    });
+
+    describe('error handling', () => {
+      it('should handle connection errors', async () => {
+        mockClient.connect.mockRejectedValue(new Error('Connection refused'));
+
+        const config: MCPServerConfig = {
+          id: 'test-server',
+          name: 'Test Server',
+          type: 'stdio',
+          command: 'node',
+          enabled: true,
+        };
+
+        const result = await mcpTestService.testServer(config);
+
+        expect(result.success).toBe(false);
+        expect(result.error).toBe('Connection refused');
+        expect(result.connectionTime).toBeGreaterThanOrEqual(0);
+      });
+
+      it('should handle listTools errors', async () => {
+        mockClient.listTools.mockRejectedValue(new Error('Failed to list tools'));
+
+        const config: MCPServerConfig = {
+          id: 'test-server',
+          name: 'Test Server',
+          type: 'stdio',
+          command: 'node',
+          enabled: true,
+        };
+
+        const result = await mcpTestService.testServer(config);
+
+        expect(result.success).toBe(false);
+        expect(result.error).toBe('Failed to list tools');
+      });
+
+      it('should handle non-Error thrown values', async () => {
+        mockClient.connect.mockRejectedValue('string error');
+
+        const config: MCPServerConfig = {
+          id: 'test-server',
+          name: 'Test Server',
+          type: 'stdio',
+          command: 'node',
+          enabled: true,
+        };
+
+        const result = await mcpTestService.testServer(config);
+
+        expect(result.success).toBe(false);
+        expect(result.error).toBe('string error');
+      });
+
+      it('should cleanup client on success', async () => {
+        const config: MCPServerConfig = {
+          id: 'test-server',
+          name: 'Test Server',
+          type: 'stdio',
+          command: 'node',
+          enabled: true,
+        };
+
+        await mcpTestService.testServer(config);
+
+        expect(mockClient.close).toHaveBeenCalled();
+      });
+
+      it('should cleanup client on error', async () => {
+        mockClient.connect.mockRejectedValue(new Error('Connection failed'));
+
+        const config: MCPServerConfig = {
+          id: 'test-server',
+          name: 'Test Server',
+          type: 'stdio',
+          command: 'node',
+          enabled: true,
+        };
+
+        await mcpTestService.testServer(config);
+
+        expect(mockClient.close).toHaveBeenCalled();
+      });
+
+      it('should ignore cleanup errors', async () => {
+        mockClient.close.mockRejectedValue(new Error('Cleanup failed'));
+
+        const config: MCPServerConfig = {
+          id: 'test-server',
+          name: 'Test Server',
+          type: 'stdio',
+          command: 'node',
+          enabled: true,
+        };
+
+        // Should not throw
+        const result = await mcpTestService.testServer(config);
+
+        expect(result.success).toBe(true);
+      });
+    });
+
+    describe('tool mapping', () => {
+      it('should map tools correctly with all fields', async () => {
+        mockClient.listTools.mockResolvedValue({
+          tools: [
+            {
+              name: 'complex-tool',
+              description: 'A complex tool',
+              inputSchema: { type: 'object', properties: { arg1: { type: 'string' } } },
+            },
+          ],
+        });
+
+        const config: MCPServerConfig = {
+          id: 'test-server',
+          name: 'Test Server',
+          type: 'stdio',
+          command: 'node',
+          enabled: true,
+        };
+
+        const result = await mcpTestService.testServer(config);
+
+        expect(result.tools?.[0]).toEqual({
+          name: 'complex-tool',
+          description: 'A complex tool',
+          inputSchema: { type: 'object', properties: { arg1: { type: 'string' } } },
+          enabled: true,
+        });
+      });
+
+      it('should handle empty tools array', async () => {
+        mockClient.listTools.mockResolvedValue({ tools: [] });
+
+        const config: MCPServerConfig = {
+          id: 'test-server',
+          name: 'Test Server',
+          type: 'stdio',
+          command: 'node',
+          enabled: true,
+        };
+
+        const result = await mcpTestService.testServer(config);
+
+        expect(result.tools).toEqual([]);
+      });
+
+      it('should handle undefined tools', async () => {
+        mockClient.listTools.mockResolvedValue({});
+
+        const config: MCPServerConfig = {
+          id: 'test-server',
+          name: 'Test Server',
+          type: 'stdio',
+          command: 'node',
+          enabled: true,
+        };
+
+        const result = await mcpTestService.testServer(config);
+
+        expect(result.tools).toEqual([]);
+      });
+    });
+  });
+
+  describe('testServerById', () => {
+    it('should test server found by ID', async () => {
+      const serverConfig: MCPServerConfig = {
+        id: 'server-1',
+        name: 'Server One',
+        type: 'stdio',
+        command: 'node',
+        enabled: true,
+      };
+
+      mockSettingsService.getGlobalSettings.mockResolvedValue({
+        mcpServers: [serverConfig],
+      });
+
+      const result = await mcpTestService.testServerById('server-1');
+
+      expect(result.success).toBe(true);
+      expect(mockSettingsService.getGlobalSettings).toHaveBeenCalled();
+    });
+
+    it('should return error if server not found', async () => {
+      mockSettingsService.getGlobalSettings.mockResolvedValue({
+        mcpServers: [],
+      });
+
+      const result = await mcpTestService.testServerById('non-existent');
+
+      expect(result.success).toBe(false);
+      expect(result.error).toBe('Server with ID "non-existent" not found');
+    });
+
+    it('should return error if mcpServers is undefined', async () => {
+      mockSettingsService.getGlobalSettings.mockResolvedValue({});
+
+      const result = await mcpTestService.testServerById('server-1');
+
+      expect(result.success).toBe(false);
+      expect(result.error).toBe('Server with ID "server-1" not found');
+    });
+
+    it('should handle settings service errors', async () => {
+      mockSettingsService.getGlobalSettings.mockRejectedValue(new Error('Settings error'));
+
+      const result = await mcpTestService.testServerById('server-1');
+
+      expect(result.success).toBe(false);
+      expect(result.error).toBe('Settings error');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/ntfy-service.test.ts b/temp_repo/apps/server/tests/unit/services/ntfy-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0a2cc1951c6ebcdd0e805a5cc9a8f74aaf4b565f
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/ntfy-service.test.ts
@@ -0,0 +1,642 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { NtfyService } from '../../../src/services/ntfy-service.js';
+import type { NtfyEndpointConfig } from '@automaker/types';
+
+// Mock global fetch
+const originalFetch = global.fetch;
+
+describe('NtfyService', () => {
+  let service: NtfyService;
+  let mockFetch: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    service = new NtfyService();
+    mockFetch = vi.fn();
+    global.fetch = mockFetch;
+  });
+
+  afterEach(() => {
+    global.fetch = originalFetch;
+    vi.restoreAllMocks();
+  });
+
+  /**
+   * Create a valid endpoint config for testing
+   */
+  function createEndpoint(overrides: Partial<NtfyEndpointConfig> = {}): NtfyEndpointConfig {
+    return {
+      id: 'test-endpoint-id',
+      name: 'Test Endpoint',
+      serverUrl: 'https://ntfy.sh',
+      topic: 'test-topic',
+      authType: 'none',
+      enabled: true,
+      ...overrides,
+    };
+  }
+
+  /**
+   * Create a basic context for testing
+   */
+  function createContext() {
+    return {
+      featureId: 'feat-123',
+      featureName: 'Test Feature',
+      projectPath: '/test/project',
+      projectName: 'test-project',
+      timestamp: '2024-01-15T10:30:00.000Z',
+      eventType: 'feature_success',
+    };
+  }
+
+  describe('validateEndpoint', () => {
+    it('should return null for valid endpoint with no auth', () => {
+      const endpoint = createEndpoint();
+      const result = service.validateEndpoint(endpoint);
+      expect(result).toBeNull();
+    });
+
+    it('should return null for valid endpoint with basic auth', () => {
+      const endpoint = createEndpoint({
+        authType: 'basic',
+        username: 'user',
+        password: 'pass',
+      });
+      const result = service.validateEndpoint(endpoint);
+      expect(result).toBeNull();
+    });
+
+    it('should return null for valid endpoint with token auth', () => {
+      const endpoint = createEndpoint({
+        authType: 'token',
+        token: 'tk_123456',
+      });
+      const result = service.validateEndpoint(endpoint);
+      expect(result).toBeNull();
+    });
+
+    it('should return error when serverUrl is missing', () => {
+      const endpoint = createEndpoint({ serverUrl: '' });
+      const result = service.validateEndpoint(endpoint);
+      expect(result).toBe('Server URL is required');
+    });
+
+    it('should return error when serverUrl is invalid', () => {
+      const endpoint = createEndpoint({ serverUrl: 'not-a-valid-url' });
+      const result = service.validateEndpoint(endpoint);
+      expect(result).toBe('Invalid server URL format');
+    });
+
+    it('should return error when topic is missing', () => {
+      const endpoint = createEndpoint({ topic: '' });
+      const result = service.validateEndpoint(endpoint);
+      expect(result).toBe('Topic is required');
+    });
+
+    it('should return error when topic contains spaces', () => {
+      const endpoint = createEndpoint({ topic: 'invalid topic' });
+      const result = service.validateEndpoint(endpoint);
+      expect(result).toBe('Topic cannot contain spaces');
+    });
+
+    it('should return error when topic contains tabs', () => {
+      const endpoint = createEndpoint({ topic: 'invalid\ttopic' });
+      const result = service.validateEndpoint(endpoint);
+      expect(result).toBe('Topic cannot contain spaces');
+    });
+
+    it('should return error when basic auth is missing username', () => {
+      const endpoint = createEndpoint({
+        authType: 'basic',
+        username: '',
+        password: 'pass',
+      });
+      const result = service.validateEndpoint(endpoint);
+      expect(result).toBe('Username and password are required for basic authentication');
+    });
+
+    it('should return error when basic auth is missing password', () => {
+      const endpoint = createEndpoint({
+        authType: 'basic',
+        username: 'user',
+        password: '',
+      });
+      const result = service.validateEndpoint(endpoint);
+      expect(result).toBe('Username and password are required for basic authentication');
+    });
+
+    it('should return error when token auth is missing token', () => {
+      const endpoint = createEndpoint({
+        authType: 'token',
+        token: '',
+      });
+      const result = service.validateEndpoint(endpoint);
+      expect(result).toBe('Access token is required for token authentication');
+    });
+  });
+
+  describe('sendNotification', () => {
+    it('should return error when endpoint is disabled', async () => {
+      const endpoint = createEndpoint({ enabled: false });
+      const result = await service.sendNotification(endpoint, {}, createContext());
+      expect(result.success).toBe(false);
+      expect(result.error).toBe('Endpoint is disabled');
+      expect(mockFetch).not.toHaveBeenCalled();
+    });
+
+    it('should return error when endpoint validation fails', async () => {
+      const endpoint = createEndpoint({ serverUrl: '' });
+      const result = await service.sendNotification(endpoint, {}, createContext());
+      expect(result.success).toBe(false);
+      expect(result.error).toBe('Server URL is required');
+      expect(mockFetch).not.toHaveBeenCalled();
+    });
+
+    it('should send notification with default values', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const endpoint = createEndpoint();
+      const result = await service.sendNotification(endpoint, {}, createContext());
+
+      expect(result.success).toBe(true);
+      expect(mockFetch).toHaveBeenCalledTimes(1);
+
+      const [url, options] = mockFetch.mock.calls[0];
+      expect(url).toBe('https://ntfy.sh/test-topic');
+      expect(options.method).toBe('POST');
+      expect(options.headers['Content-Type']).toBe('text/plain; charset=utf-8');
+      expect(options.headers['Title']).toContain('Feature Completed');
+      expect(options.headers['Priority']).toBe('3');
+    });
+
+    it('should send notification with custom title and body', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const endpoint = createEndpoint();
+      const result = await service.sendNotification(
+        endpoint,
+        {
+          title: 'Custom Title',
+          body: 'Custom body message',
+        },
+        createContext()
+      );
+
+      expect(result.success).toBe(true);
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Title']).toBe('Custom Title');
+      expect(options.body).toBe('Custom body message');
+    });
+
+    it('should send notification with tags and emoji', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const endpoint = createEndpoint();
+      const result = await service.sendNotification(
+        endpoint,
+        {
+          tags: 'warning,skull',
+          emoji: 'tada',
+        },
+        createContext()
+      );
+
+      expect(result.success).toBe(true);
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Tags']).toBe('tada,warning,skull');
+    });
+
+    it('should send notification with priority', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const endpoint = createEndpoint();
+      const result = await service.sendNotification(endpoint, { priority: 5 }, createContext());
+
+      expect(result.success).toBe(true);
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Priority']).toBe('5');
+    });
+
+    it('should send notification with click URL', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const endpoint = createEndpoint();
+      const result = await service.sendNotification(
+        endpoint,
+        { clickUrl: 'https://example.com/feature/123' },
+        createContext()
+      );
+
+      expect(result.success).toBe(true);
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Click']).toBe('https://example.com/feature/123');
+    });
+
+    it('should use endpoint default tags and emoji when not specified', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const endpoint = createEndpoint({
+        defaultTags: 'default-tag',
+        defaultEmoji: 'rocket',
+      });
+      const result = await service.sendNotification(endpoint, {}, createContext());
+
+      expect(result.success).toBe(true);
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Tags']).toBe('rocket,default-tag');
+    });
+
+    it('should use endpoint default click URL when not specified', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const endpoint = createEndpoint({
+        defaultClickUrl: 'https://default.example.com',
+      });
+      const result = await service.sendNotification(endpoint, {}, createContext());
+
+      expect(result.success).toBe(true);
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Click']).toBe('https://default.example.com');
+    });
+
+    it('should send notification with basic authentication', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const endpoint = createEndpoint({
+        authType: 'basic',
+        username: 'testuser',
+        password: 'testpass',
+      });
+      const result = await service.sendNotification(endpoint, {}, createContext());
+
+      expect(result.success).toBe(true);
+      const options = mockFetch.mock.calls[0][1];
+      // Basic auth should be base64 encoded
+      const expectedAuth = Buffer.from('testuser:testpass').toString('base64');
+      expect(options.headers['Authorization']).toBe(`Basic ${expectedAuth}`);
+    });
+
+    it('should send notification with token authentication', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const endpoint = createEndpoint({
+        authType: 'token',
+        token: 'tk_test_token_123',
+      });
+      const result = await service.sendNotification(endpoint, {}, createContext());
+
+      expect(result.success).toBe(true);
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Authorization']).toBe('Bearer tk_test_token_123');
+    });
+
+    it('should return error on HTTP error response', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: false,
+        status: 403,
+        text: () => Promise.resolve('Forbidden - invalid token'),
+      });
+
+      const endpoint = createEndpoint();
+      const result = await service.sendNotification(endpoint, {}, createContext());
+
+      expect(result.success).toBe(false);
+      expect(result.error).toContain('403');
+      expect(result.error).toContain('Forbidden');
+    });
+
+    it('should return error on timeout', async () => {
+      mockFetch.mockImplementationOnce(() => {
+        const error = new Error('Aborted');
+        error.name = 'AbortError';
+        throw error;
+      });
+
+      const endpoint = createEndpoint();
+      const result = await service.sendNotification(endpoint, {}, createContext());
+
+      expect(result.success).toBe(false);
+      expect(result.error).toBe('Request timed out');
+    });
+
+    it('should return error on network error', async () => {
+      mockFetch.mockRejectedValueOnce(new Error('Network error'));
+
+      const endpoint = createEndpoint();
+      const result = await service.sendNotification(endpoint, {}, createContext());
+
+      expect(result.success).toBe(false);
+      expect(result.error).toBe('Network error');
+    });
+
+    it('should handle server URL with trailing slash', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const endpoint = createEndpoint({ serverUrl: 'https://ntfy.sh/' });
+      await service.sendNotification(endpoint, {}, createContext());
+
+      const url = mockFetch.mock.calls[0][0];
+      expect(url).toBe('https://ntfy.sh/test-topic');
+    });
+
+    it('should URL encode the topic', async () => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+      });
+
+      const endpoint = createEndpoint({ topic: 'test/topic#special' });
+      await service.sendNotification(endpoint, {}, createContext());
+
+      const url = mockFetch.mock.calls[0][0];
+      expect(url).toContain('test%2Ftopic%23special');
+    });
+  });
+
+  describe('variable substitution', () => {
+    it('should substitute {{featureId}} in title', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      await service.sendNotification(
+        endpoint,
+        { title: 'Feature {{featureId}} completed' },
+        createContext()
+      );
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Title']).toBe('Feature feat-123 completed');
+    });
+
+    it('should substitute {{featureName}} in body', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      await service.sendNotification(
+        endpoint,
+        { body: 'The feature "{{featureName}}" is done!' },
+        createContext()
+      );
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.body).toBe('The feature "Test Feature" is done!');
+    });
+
+    it('should substitute {{projectName}} in title', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      await service.sendNotification(
+        endpoint,
+        { title: '[{{projectName}}] Event: {{eventType}}' },
+        createContext()
+      );
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Title']).toBe('[test-project] Event: feature_success');
+    });
+
+    it('should substitute {{timestamp}} in body', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      await service.sendNotification(
+        endpoint,
+        { body: 'Completed at: {{timestamp}}' },
+        createContext()
+      );
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.body).toBe('Completed at: 2024-01-15T10:30:00.000Z');
+    });
+
+    it('should substitute {{error}} in body for error events', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      const context = {
+        ...createContext(),
+        eventType: 'feature_error',
+        error: 'Something went wrong',
+      };
+      await service.sendNotification(endpoint, { title: 'Error: {{error}}' }, context);
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Title']).toBe('Error: Something went wrong');
+    });
+
+    it('should substitute multiple variables', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      await service.sendNotification(
+        endpoint,
+        {
+          title: '[{{projectName}}] {{featureName}}',
+          body: 'Feature {{featureId}} completed at {{timestamp}}',
+        },
+        createContext()
+      );
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Title']).toBe('[test-project] Test Feature');
+      expect(options.body).toBe('Feature feat-123 completed at 2024-01-15T10:30:00.000Z');
+    });
+
+    it('should replace unknown variables with empty string', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      await service.sendNotification(
+        endpoint,
+        { title: 'Value: {{unknownVariable}}' },
+        createContext()
+      );
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Title']).toBe('Value: ');
+    });
+  });
+
+  describe('default title generation', () => {
+    it('should generate title with feature name for feature_success', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      await service.sendNotification(endpoint, {}, createContext());
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Title']).toBe('Feature Completed: Test Feature');
+    });
+
+    it('should generate title without feature name when missing', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      const context = { ...createContext(), featureName: undefined };
+      await service.sendNotification(endpoint, {}, context);
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Title']).toBe('Feature Completed');
+    });
+
+    it('should generate correct title for feature_created', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      const context = { ...createContext(), eventType: 'feature_created' };
+      await service.sendNotification(endpoint, {}, context);
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Title']).toBe('Feature Created: Test Feature');
+    });
+
+    it('should generate correct title for feature_error', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      const context = { ...createContext(), eventType: 'feature_error' };
+      await service.sendNotification(endpoint, {}, context);
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Title']).toBe('Feature Failed: Test Feature');
+    });
+
+    it('should generate correct title for auto_mode_complete', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      const context = {
+        ...createContext(),
+        eventType: 'auto_mode_complete',
+        featureName: undefined,
+      };
+      await service.sendNotification(endpoint, {}, context);
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Title']).toBe('Auto Mode Complete');
+    });
+
+    it('should generate correct title for auto_mode_error', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      const context = { ...createContext(), eventType: 'auto_mode_error', featureName: undefined };
+      await service.sendNotification(endpoint, {}, context);
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Title']).toBe('Auto Mode Error');
+    });
+  });
+
+  describe('default body generation', () => {
+    it('should generate body with feature info', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      await service.sendNotification(endpoint, {}, createContext());
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.body).toContain('Feature: Test Feature');
+      expect(options.body).toContain('ID: feat-123');
+      expect(options.body).toContain('Project: test-project');
+      expect(options.body).toContain('Time: 2024-01-15T10:30:00.000Z');
+    });
+
+    it('should include error in body for error events', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      const context = {
+        ...createContext(),
+        eventType: 'feature_error',
+        error: 'Build failed',
+      };
+      await service.sendNotification(endpoint, {}, context);
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.body).toContain('Error: Build failed');
+    });
+  });
+
+  describe('emoji and tags handling', () => {
+    it('should handle emoji shortcode with colons', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      await service.sendNotification(endpoint, { emoji: ':tada:' }, createContext());
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Tags']).toBe('tada');
+    });
+
+    it('should handle emoji without colons', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      await service.sendNotification(endpoint, { emoji: 'warning' }, createContext());
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Tags']).toBe('warning');
+    });
+
+    it('should combine emoji and tags correctly', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      await service.sendNotification(
+        endpoint,
+        { emoji: 'rotating_light', tags: 'urgent,alert' },
+        createContext()
+      );
+
+      const options = mockFetch.mock.calls[0][1];
+      // Emoji comes first, then tags
+      expect(options.headers['Tags']).toBe('rotating_light,urgent,alert');
+    });
+
+    it('should ignore emoji with spaces', async () => {
+      mockFetch.mockResolvedValueOnce({ ok: true, status: 200 });
+
+      const endpoint = createEndpoint();
+      await service.sendNotification(
+        endpoint,
+        { emoji: 'multi word emoji', tags: 'test' },
+        createContext()
+      );
+
+      const options = mockFetch.mock.calls[0][1];
+      expect(options.headers['Tags']).toBe('test');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/pipeline-orchestrator-prompts.test.ts b/temp_repo/apps/server/tests/unit/services/pipeline-orchestrator-prompts.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ba847bd09a0bdfc8863ef8cd05d739f6a5e88047
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/pipeline-orchestrator-prompts.test.ts
@@ -0,0 +1,57 @@
+import { describe, it, expect, vi } from 'vitest';
+import { PipelineOrchestrator } from '../../../src/services/pipeline-orchestrator.js';
+import type { Feature } from '@automaker/types';
+
+describe('PipelineOrchestrator Prompts', () => {
+  const mockFeature: Feature = {
+    id: 'feature-123',
+    title: 'Test Feature',
+    description: 'A test feature',
+    status: 'in_progress',
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    tasks: [],
+  };
+
+  const mockBuildFeaturePrompt = (feature: Feature) => `Feature: ${feature.title}`;
+
+  it('should include mandatory summary requirement in pipeline step prompt', () => {
+    const orchestrator = new PipelineOrchestrator(
+      null as any, // eventBus
+      null as any, // featureStateManager
+      null as any, // agentExecutor
+      null as any, // testRunnerService
+      null as any, // worktreeResolver
+      null as any, // concurrencyManager
+      null as any, // settingsService
+      null as any, // updateFeatureStatusFn
+      null as any, // loadContextFilesFn
+      mockBuildFeaturePrompt,
+      null as any, // executeFeatureFn
+      null as any // runAgentFn
+    );
+
+    const step = {
+      id: 'step1',
+      name: 'Code Review',
+      instructions: 'Review the code for quality.',
+    };
+
+    const prompt = orchestrator.buildPipelineStepPrompt(
+      step as any,
+      mockFeature,
+      'Previous work context',
+      { implementationInstructions: '', playwrightVerificationInstructions: '' }
+    );
+
+    expect(prompt).toContain('## Pipeline Step: Code Review');
+    expect(prompt).toContain('Review the code for quality.');
+    expect(prompt).toContain(
+      '**CRITICAL: After completing the instructions, you MUST output a summary using this EXACT format:**'
+    );
+    expect(prompt).toContain('<summary>');
+    expect(prompt).toContain('## Summary: Code Review');
+    expect(prompt).toContain('</summary>');
+    expect(prompt).toContain('The <summary> and </summary> tags MUST be on their own lines.');
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/pipeline-orchestrator-provider-id.test.ts b/temp_repo/apps/server/tests/unit/services/pipeline-orchestrator-provider-id.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..58822100d8f4a76719a43b3aa516820299204320
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/pipeline-orchestrator-provider-id.test.ts
@@ -0,0 +1,356 @@
+/**
+ * Tests for providerId passthrough in PipelineOrchestrator
+ * Verifies that feature.providerId is forwarded to runAgentFn in both
+ * executePipeline (step execution) and executeTestStep (test fix) contexts.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { Feature, PipelineStep } from '@automaker/types';
+import {
+  PipelineOrchestrator,
+  type PipelineContext,
+  type UpdateFeatureStatusFn,
+  type BuildFeaturePromptFn,
+  type ExecuteFeatureFn,
+  type RunAgentFn,
+} from '../../../src/services/pipeline-orchestrator.js';
+import type { TypedEventBus } from '../../../src/services/typed-event-bus.js';
+import type { FeatureStateManager } from '../../../src/services/feature-state-manager.js';
+import type { AgentExecutor } from '../../../src/services/agent-executor.js';
+import type { WorktreeResolver } from '../../../src/services/worktree-resolver.js';
+import type { SettingsService } from '../../../src/services/settings-service.js';
+import type { ConcurrencyManager } from '../../../src/services/concurrency-manager.js';
+import type { TestRunnerService } from '../../../src/services/test-runner-service.js';
+import * as secureFs from '../../../src/lib/secure-fs.js';
+import { getFeatureDir } from '@automaker/platform';
+import {
+  getPromptCustomization,
+  getAutoLoadClaudeMdSetting,
+  filterClaudeMdFromContext,
+} from '../../../src/lib/settings-helpers.js';
+
+// Mock pipelineService
+vi.mock('../../../src/services/pipeline-service.js', () => ({
+  pipelineService: {
+    isPipelineStatus: vi.fn(),
+    getStepIdFromStatus: vi.fn(),
+    getPipelineConfig: vi.fn(),
+    getNextStatus: vi.fn(),
+  },
+}));
+
+// Mock merge-service
+vi.mock('../../../src/services/merge-service.js', () => ({
+  performMerge: vi.fn().mockResolvedValue({ success: true }),
+}));
+
+// Mock secureFs
+vi.mock('../../../src/lib/secure-fs.js', () => ({
+  readFile: vi.fn(),
+  access: vi.fn(),
+}));
+
+// Mock settings helpers
+vi.mock('../../../src/lib/settings-helpers.js', () => ({
+  getPromptCustomization: vi.fn().mockResolvedValue({
+    taskExecution: {
+      implementationInstructions: 'test instructions',
+      playwrightVerificationInstructions: 'test playwright',
+    },
+  }),
+  getAutoLoadClaudeMdSetting: vi.fn().mockResolvedValue(true),
+  getUseClaudeCodeSystemPromptSetting: vi.fn().mockResolvedValue(true),
+  filterClaudeMdFromContext: vi.fn().mockReturnValue('context prompt'),
+}));
+
+// Mock validateWorkingDirectory
+vi.mock('../../../src/lib/sdk-options.js', () => ({
+  validateWorkingDirectory: vi.fn(),
+}));
+
+// Mock platform
+vi.mock('@automaker/platform', () => ({
+  getFeatureDir: vi
+    .fn()
+    .mockImplementation(
+      (projectPath: string, featureId: string) => `${projectPath}/.automaker/features/${featureId}`
+    ),
+}));
+
+// Mock model-resolver
+vi.mock('@automaker/model-resolver', () => ({
+  resolveModelString: vi.fn().mockReturnValue('claude-sonnet-4'),
+  DEFAULT_MODELS: { claude: 'claude-sonnet-4' },
+}));
+
+describe('PipelineOrchestrator - providerId passthrough', () => {
+  let mockEventBus: TypedEventBus;
+  let mockFeatureStateManager: FeatureStateManager;
+  let mockAgentExecutor: AgentExecutor;
+  let mockTestRunnerService: TestRunnerService;
+  let mockWorktreeResolver: WorktreeResolver;
+  let mockConcurrencyManager: ConcurrencyManager;
+  let mockUpdateFeatureStatusFn: UpdateFeatureStatusFn;
+  let mockLoadContextFilesFn: vi.Mock;
+  let mockBuildFeaturePromptFn: BuildFeaturePromptFn;
+  let mockExecuteFeatureFn: ExecuteFeatureFn;
+  let mockRunAgentFn: RunAgentFn;
+  let orchestrator: PipelineOrchestrator;
+
+  const testSteps: PipelineStep[] = [
+    {
+      id: 'step-1',
+      name: 'Step 1',
+      order: 1,
+      instructions: 'Do step 1',
+      colorClass: 'blue',
+      createdAt: '',
+      updatedAt: '',
+    },
+  ];
+
+  const createFeatureWithProvider = (providerId?: string): Feature => ({
+    id: 'feature-1',
+    title: 'Test Feature',
+    category: 'test',
+    description: 'Test description',
+    status: 'pipeline_step-1',
+    branchName: 'feature/test-1',
+    providerId,
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockEventBus = {
+      emitAutoModeEvent: vi.fn(),
+      getUnderlyingEmitter: vi.fn().mockReturnValue({}),
+    } as unknown as TypedEventBus;
+
+    mockFeatureStateManager = {
+      updateFeatureStatus: vi.fn().mockResolvedValue(undefined),
+      loadFeature: vi.fn().mockResolvedValue(createFeatureWithProvider()),
+    } as unknown as FeatureStateManager;
+
+    mockAgentExecutor = {
+      execute: vi.fn().mockResolvedValue({ success: true }),
+    } as unknown as AgentExecutor;
+
+    mockTestRunnerService = {
+      startTests: vi
+        .fn()
+        .mockResolvedValue({ success: true, result: { sessionId: 'test-session-1' } }),
+      getSession: vi.fn().mockReturnValue({
+        status: 'passed',
+        exitCode: 0,
+        startedAt: new Date(),
+        finishedAt: new Date(),
+      }),
+      getSessionOutput: vi
+        .fn()
+        .mockReturnValue({ success: true, result: { output: 'All tests passed' } }),
+    } as unknown as TestRunnerService;
+
+    mockWorktreeResolver = {
+      findWorktreeForBranch: vi.fn().mockResolvedValue('/test/worktree'),
+      getCurrentBranch: vi.fn().mockResolvedValue('main'),
+    } as unknown as WorktreeResolver;
+
+    mockConcurrencyManager = {
+      acquire: vi.fn().mockImplementation(({ featureId, isAutoMode }) => ({
+        featureId,
+        projectPath: '/test/project',
+        abortController: new AbortController(),
+        branchName: null,
+        worktreePath: null,
+        isAutoMode: isAutoMode ?? false,
+      })),
+      release: vi.fn(),
+      getRunningFeature: vi.fn().mockReturnValue(undefined),
+    } as unknown as ConcurrencyManager;
+
+    mockUpdateFeatureStatusFn = vi.fn().mockResolvedValue(undefined);
+    mockLoadContextFilesFn = vi.fn().mockResolvedValue({ contextPrompt: 'test context' });
+    mockBuildFeaturePromptFn = vi.fn().mockReturnValue('Feature prompt content');
+    mockExecuteFeatureFn = vi.fn().mockResolvedValue(undefined);
+    mockRunAgentFn = vi.fn().mockResolvedValue(undefined);
+
+    vi.mocked(secureFs.readFile).mockResolvedValue('Previous context');
+    vi.mocked(secureFs.access).mockResolvedValue(undefined);
+    vi.mocked(getFeatureDir).mockImplementation(
+      (projectPath: string, featureId: string) => `${projectPath}/.automaker/features/${featureId}`
+    );
+    vi.mocked(getPromptCustomization).mockResolvedValue({
+      taskExecution: {
+        implementationInstructions: 'test instructions',
+        playwrightVerificationInstructions: 'test playwright',
+      },
+    } as any);
+    vi.mocked(getAutoLoadClaudeMdSetting).mockResolvedValue(true);
+    vi.mocked(filterClaudeMdFromContext).mockReturnValue('context prompt');
+
+    orchestrator = new PipelineOrchestrator(
+      mockEventBus,
+      mockFeatureStateManager,
+      mockAgentExecutor,
+      mockTestRunnerService,
+      mockWorktreeResolver,
+      mockConcurrencyManager,
+      null,
+      mockUpdateFeatureStatusFn,
+      mockLoadContextFilesFn,
+      mockBuildFeaturePromptFn,
+      mockExecuteFeatureFn,
+      mockRunAgentFn
+    );
+  });
+
+  describe('executePipeline', () => {
+    it('should pass providerId to runAgentFn options when feature has providerId', async () => {
+      const feature = createFeatureWithProvider('moonshot-ai');
+      const context: PipelineContext = {
+        projectPath: '/test/project',
+        featureId: 'feature-1',
+        feature,
+        steps: testSteps,
+        workDir: '/test/project',
+        worktreePath: null,
+        branchName: 'feature/test-1',
+        abortController: new AbortController(),
+        autoLoadClaudeMd: true,
+        testAttempts: 0,
+        maxTestAttempts: 5,
+      };
+
+      await orchestrator.executePipeline(context);
+
+      expect(mockRunAgentFn).toHaveBeenCalledTimes(1);
+      const options = mockRunAgentFn.mock.calls[0][7];
+      expect(options).toHaveProperty('providerId', 'moonshot-ai');
+    });
+
+    it('should pass undefined providerId when feature has no providerId', async () => {
+      const feature = createFeatureWithProvider(undefined);
+      const context: PipelineContext = {
+        projectPath: '/test/project',
+        featureId: 'feature-1',
+        feature,
+        steps: testSteps,
+        workDir: '/test/project',
+        worktreePath: null,
+        branchName: 'feature/test-1',
+        abortController: new AbortController(),
+        autoLoadClaudeMd: true,
+        testAttempts: 0,
+        maxTestAttempts: 5,
+      };
+
+      await orchestrator.executePipeline(context);
+
+      expect(mockRunAgentFn).toHaveBeenCalledTimes(1);
+      const options = mockRunAgentFn.mock.calls[0][7];
+      expect(options).toHaveProperty('providerId', undefined);
+    });
+
+    it('should pass status alongside providerId in options', async () => {
+      const feature = createFeatureWithProvider('zhipu');
+      const context: PipelineContext = {
+        projectPath: '/test/project',
+        featureId: 'feature-1',
+        feature,
+        steps: testSteps,
+        workDir: '/test/project',
+        worktreePath: null,
+        branchName: 'feature/test-1',
+        abortController: new AbortController(),
+        autoLoadClaudeMd: true,
+        testAttempts: 0,
+        maxTestAttempts: 5,
+      };
+
+      await orchestrator.executePipeline(context);
+
+      const options = mockRunAgentFn.mock.calls[0][7];
+      expect(options).toHaveProperty('providerId', 'zhipu');
+      expect(options).toHaveProperty('status');
+    });
+  });
+
+  describe('executeTestStep', () => {
+    it('should pass providerId in test fix agent options when tests fail', async () => {
+      vi.mocked(mockTestRunnerService.getSession)
+        .mockReturnValueOnce({
+          status: 'failed',
+          exitCode: 1,
+          startedAt: new Date(),
+          finishedAt: new Date(),
+        } as never)
+        .mockReturnValueOnce({
+          status: 'passed',
+          exitCode: 0,
+          startedAt: new Date(),
+          finishedAt: new Date(),
+        } as never);
+
+      const feature = createFeatureWithProvider('custom-provider');
+      const context: PipelineContext = {
+        projectPath: '/test/project',
+        featureId: 'feature-1',
+        feature,
+        steps: testSteps,
+        workDir: '/test/project',
+        worktreePath: null,
+        branchName: 'feature/test-1',
+        abortController: new AbortController(),
+        autoLoadClaudeMd: true,
+        testAttempts: 0,
+        maxTestAttempts: 5,
+      };
+
+      await orchestrator.executeTestStep(context, 'npm test');
+
+      // The fix agent should receive providerId
+      expect(mockRunAgentFn).toHaveBeenCalledTimes(1);
+      const options = mockRunAgentFn.mock.calls[0][7];
+      expect(options).toHaveProperty('providerId', 'custom-provider');
+    }, 15000);
+
+    it('should pass thinkingLevel in test fix agent options', async () => {
+      vi.mocked(mockTestRunnerService.getSession)
+        .mockReturnValueOnce({
+          status: 'failed',
+          exitCode: 1,
+          startedAt: new Date(),
+          finishedAt: new Date(),
+        } as never)
+        .mockReturnValueOnce({
+          status: 'passed',
+          exitCode: 0,
+          startedAt: new Date(),
+          finishedAt: new Date(),
+        } as never);
+
+      const feature = createFeatureWithProvider('moonshot-ai');
+      feature.thinkingLevel = 'high';
+      const context: PipelineContext = {
+        projectPath: '/test/project',
+        featureId: 'feature-1',
+        feature,
+        steps: testSteps,
+        workDir: '/test/project',
+        worktreePath: null,
+        branchName: 'feature/test-1',
+        abortController: new AbortController(),
+        autoLoadClaudeMd: true,
+        testAttempts: 0,
+        maxTestAttempts: 5,
+      };
+
+      await orchestrator.executeTestStep(context, 'npm test');
+
+      const options = mockRunAgentFn.mock.calls[0][7];
+      expect(options).toHaveProperty('thinkingLevel', 'high');
+      expect(options).toHaveProperty('providerId', 'moonshot-ai');
+    }, 15000);
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/pipeline-orchestrator-status-provider.test.ts b/temp_repo/apps/server/tests/unit/services/pipeline-orchestrator-status-provider.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..880d8debdcc1c29d12b2513e562dd3422afc161d
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/pipeline-orchestrator-status-provider.test.ts
@@ -0,0 +1,302 @@
+/**
+ * Tests for status + providerId coexistence in PipelineOrchestrator options.
+ *
+ * During rebase onto upstream/v1.0.0rc, a merge conflict arose where
+ * upstream added `status: currentStatus` and the incoming branch added
+ * `providerId: feature.providerId`. The conflict resolution kept BOTH fields.
+ *
+ * This test validates that both fields coexist correctly in the options
+ * object passed to runAgentFn in both executePipeline and executeTestStep.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { Feature, PipelineStep } from '@automaker/types';
+import {
+  PipelineOrchestrator,
+  type PipelineContext,
+  type UpdateFeatureStatusFn,
+  type BuildFeaturePromptFn,
+  type ExecuteFeatureFn,
+  type RunAgentFn,
+} from '../../../src/services/pipeline-orchestrator.js';
+import type { TypedEventBus } from '../../../src/services/typed-event-bus.js';
+import type { FeatureStateManager } from '../../../src/services/feature-state-manager.js';
+import type { AgentExecutor } from '../../../src/services/agent-executor.js';
+import type { WorktreeResolver } from '../../../src/services/worktree-resolver.js';
+import type { ConcurrencyManager } from '../../../src/services/concurrency-manager.js';
+import type { TestRunnerService } from '../../../src/services/test-runner-service.js';
+import * as secureFs from '../../../src/lib/secure-fs.js';
+import { getFeatureDir } from '@automaker/platform';
+import {
+  getPromptCustomization,
+  getAutoLoadClaudeMdSetting,
+  filterClaudeMdFromContext,
+} from '../../../src/lib/settings-helpers.js';
+
+vi.mock('../../../src/services/pipeline-service.js', () => ({
+  pipelineService: {
+    isPipelineStatus: vi.fn(),
+    getStepIdFromStatus: vi.fn(),
+    getPipelineConfig: vi.fn(),
+    getNextStatus: vi.fn(),
+  },
+}));
+
+vi.mock('../../../src/services/merge-service.js', () => ({
+  performMerge: vi.fn().mockResolvedValue({ success: true }),
+}));
+
+vi.mock('../../../src/lib/secure-fs.js', () => ({
+  readFile: vi.fn(),
+  access: vi.fn(),
+}));
+
+vi.mock('../../../src/lib/settings-helpers.js', () => ({
+  getPromptCustomization: vi.fn().mockResolvedValue({
+    taskExecution: {
+      implementationInstructions: 'test instructions',
+      playwrightVerificationInstructions: 'test playwright',
+    },
+  }),
+  getAutoLoadClaudeMdSetting: vi.fn().mockResolvedValue(true),
+  getUseClaudeCodeSystemPromptSetting: vi.fn().mockResolvedValue(true),
+  filterClaudeMdFromContext: vi.fn().mockReturnValue('context prompt'),
+}));
+
+vi.mock('../../../src/lib/sdk-options.js', () => ({
+  validateWorkingDirectory: vi.fn(),
+}));
+
+vi.mock('@automaker/platform', () => ({
+  getFeatureDir: vi
+    .fn()
+    .mockImplementation(
+      (projectPath: string, featureId: string) => `${projectPath}/.automaker/features/${featureId}`
+    ),
+}));
+
+vi.mock('@automaker/model-resolver', () => ({
+  resolveModelString: vi.fn().mockReturnValue('claude-sonnet-4'),
+  DEFAULT_MODELS: { claude: 'claude-sonnet-4' },
+}));
+
+describe('PipelineOrchestrator - status and providerId coexistence', () => {
+  let mockRunAgentFn: RunAgentFn;
+  let orchestrator: PipelineOrchestrator;
+
+  const testSteps: PipelineStep[] = [
+    {
+      id: 'implement',
+      name: 'Implement Feature',
+      order: 1,
+      instructions: 'Implement the feature',
+      colorClass: 'blue',
+      createdAt: '',
+      updatedAt: '',
+    },
+  ];
+
+  const createFeature = (overrides: Partial<Feature> = {}): Feature => ({
+    id: 'feature-1',
+    title: 'Test Feature',
+    category: 'test',
+    description: 'Test description',
+    status: 'pipeline_implement',
+    branchName: 'feature/test-1',
+    providerId: 'moonshot-ai',
+    thinkingLevel: 'medium',
+    reasoningEffort: 'high',
+    ...overrides,
+  });
+
+  const createContext = (feature: Feature): PipelineContext => ({
+    projectPath: '/test/project',
+    featureId: feature.id,
+    feature,
+    steps: testSteps,
+    workDir: '/test/project',
+    worktreePath: null,
+    branchName: feature.branchName ?? 'main',
+    abortController: new AbortController(),
+    autoLoadClaudeMd: true,
+    testAttempts: 0,
+    maxTestAttempts: 5,
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockRunAgentFn = vi.fn().mockResolvedValue(undefined);
+
+    vi.mocked(secureFs.readFile).mockResolvedValue('Previous context');
+    vi.mocked(secureFs.access).mockResolvedValue(undefined);
+    vi.mocked(getFeatureDir).mockImplementation(
+      (projectPath: string, featureId: string) => `${projectPath}/.automaker/features/${featureId}`
+    );
+    vi.mocked(getPromptCustomization).mockResolvedValue({
+      taskExecution: {
+        implementationInstructions: 'test instructions',
+        playwrightVerificationInstructions: 'test playwright',
+      },
+    } as any);
+    vi.mocked(getAutoLoadClaudeMdSetting).mockResolvedValue(true);
+    vi.mocked(filterClaudeMdFromContext).mockReturnValue('context prompt');
+
+    const mockEventBus = {
+      emitAutoModeEvent: vi.fn(),
+      getUnderlyingEmitter: vi.fn().mockReturnValue({}),
+    } as unknown as TypedEventBus;
+
+    const mockFeatureStateManager = {
+      updateFeatureStatus: vi.fn().mockResolvedValue(undefined),
+      loadFeature: vi.fn().mockResolvedValue(createFeature()),
+    } as unknown as FeatureStateManager;
+
+    const mockTestRunnerService = {
+      startTests: vi
+        .fn()
+        .mockResolvedValue({ success: true, result: { sessionId: 'test-session-1' } }),
+      getSession: vi.fn().mockReturnValue({
+        status: 'passed',
+        exitCode: 0,
+        startedAt: new Date(),
+        finishedAt: new Date(),
+      }),
+      getSessionOutput: vi
+        .fn()
+        .mockReturnValue({ success: true, result: { output: 'All tests passed' } }),
+    } as unknown as TestRunnerService;
+
+    orchestrator = new PipelineOrchestrator(
+      mockEventBus,
+      mockFeatureStateManager,
+      {} as AgentExecutor,
+      mockTestRunnerService,
+      {
+        findWorktreeForBranch: vi.fn().mockResolvedValue('/test/worktree'),
+        getCurrentBranch: vi.fn().mockResolvedValue('main'),
+      } as unknown as WorktreeResolver,
+      {
+        acquire: vi.fn().mockImplementation(({ featureId }) => ({
+          featureId,
+          projectPath: '/test/project',
+          abortController: new AbortController(),
+          branchName: null,
+          worktreePath: null,
+          isAutoMode: false,
+        })),
+        release: vi.fn(),
+        getRunningFeature: vi.fn().mockReturnValue(undefined),
+      } as unknown as ConcurrencyManager,
+      null,
+      vi.fn().mockResolvedValue(undefined),
+      vi.fn().mockResolvedValue({ contextPrompt: 'test context' }),
+      vi.fn().mockReturnValue('Feature prompt content'),
+      vi.fn().mockResolvedValue(undefined),
+      mockRunAgentFn
+    );
+  });
+
+  describe('executePipeline - options object', () => {
+    it('should pass both status and providerId in options', async () => {
+      const feature = createFeature({ providerId: 'moonshot-ai' });
+      const context = createContext(feature);
+
+      await orchestrator.executePipeline(context);
+
+      expect(mockRunAgentFn).toHaveBeenCalledTimes(1);
+      const options = mockRunAgentFn.mock.calls[0][7];
+      expect(options).toHaveProperty('status', 'pipeline_implement');
+      expect(options).toHaveProperty('providerId', 'moonshot-ai');
+    });
+
+    it('should pass status even when providerId is undefined', async () => {
+      const feature = createFeature({ providerId: undefined });
+      const context = createContext(feature);
+
+      await orchestrator.executePipeline(context);
+
+      const options = mockRunAgentFn.mock.calls[0][7];
+      expect(options).toHaveProperty('status', 'pipeline_implement');
+      expect(options).toHaveProperty('providerId', undefined);
+    });
+
+    it('should pass thinkingLevel and reasoningEffort alongside status and providerId', async () => {
+      const feature = createFeature({
+        providerId: 'zhipu',
+        thinkingLevel: 'high',
+        reasoningEffort: 'medium',
+      });
+      const context = createContext(feature);
+
+      await orchestrator.executePipeline(context);
+
+      const options = mockRunAgentFn.mock.calls[0][7];
+      expect(options).toHaveProperty('status', 'pipeline_implement');
+      expect(options).toHaveProperty('providerId', 'zhipu');
+      expect(options).toHaveProperty('thinkingLevel', 'high');
+      expect(options).toHaveProperty('reasoningEffort', 'medium');
+    });
+  });
+
+  describe('executeTestStep - options object', () => {
+    it('should pass both status and providerId in test fix agent options', async () => {
+      const feature = createFeature({
+        status: 'running',
+        providerId: 'custom-provider',
+      });
+      const context = createContext(feature);
+
+      const mockTestRunner = orchestrator['testRunnerService'] as any;
+      vi.mocked(mockTestRunner.getSession)
+        .mockReturnValueOnce({
+          status: 'failed',
+          exitCode: 1,
+          startedAt: new Date(),
+          finishedAt: new Date(),
+        })
+        .mockReturnValueOnce({
+          status: 'passed',
+          exitCode: 0,
+          startedAt: new Date(),
+          finishedAt: new Date(),
+        });
+
+      await orchestrator.executeTestStep(context, 'npm test');
+
+      expect(mockRunAgentFn).toHaveBeenCalledTimes(1);
+      const options = mockRunAgentFn.mock.calls[0][7];
+      expect(options).toHaveProperty('status', 'running');
+      expect(options).toHaveProperty('providerId', 'custom-provider');
+    }, 15000);
+
+    it('should pass feature.status (not currentStatus) in test fix context', async () => {
+      const feature = createFeature({
+        status: 'pipeline_test',
+        providerId: 'moonshot-ai',
+      });
+      const context = createContext(feature);
+
+      const mockTestRunner = orchestrator['testRunnerService'] as any;
+      vi.mocked(mockTestRunner.getSession)
+        .mockReturnValueOnce({
+          status: 'failed',
+          exitCode: 1,
+          startedAt: new Date(),
+          finishedAt: new Date(),
+        })
+        .mockReturnValueOnce({
+          status: 'passed',
+          exitCode: 0,
+          startedAt: new Date(),
+          finishedAt: new Date(),
+        });
+
+      await orchestrator.executeTestStep(context, 'npm test');
+
+      const options = mockRunAgentFn.mock.calls[0][7];
+      // In test fix context, status should come from context.feature.status
+      expect(options).toHaveProperty('status', 'pipeline_test');
+      expect(options).toHaveProperty('providerId', 'moonshot-ai');
+    }, 15000);
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/pipeline-orchestrator.test.ts b/temp_repo/apps/server/tests/unit/services/pipeline-orchestrator.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d4f342656167c2c84d84d3158ec91b18b8bc0dd6
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/pipeline-orchestrator.test.ts
@@ -0,0 +1,1141 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import type { Feature, PipelineStep, PipelineConfig } from '@automaker/types';
+import {
+  PipelineOrchestrator,
+  type PipelineContext,
+  type PipelineStatusInfo,
+  type UpdateFeatureStatusFn,
+  type BuildFeaturePromptFn,
+  type ExecuteFeatureFn,
+  type RunAgentFn,
+} from '../../../src/services/pipeline-orchestrator.js';
+import type { TypedEventBus } from '../../../src/services/typed-event-bus.js';
+import type { FeatureStateManager } from '../../../src/services/feature-state-manager.js';
+import type { AgentExecutor } from '../../../src/services/agent-executor.js';
+import type { WorktreeResolver } from '../../../src/services/worktree-resolver.js';
+import type { SettingsService } from '../../../src/services/settings-service.js';
+import type { ConcurrencyManager } from '../../../src/services/concurrency-manager.js';
+import type { TestRunnerService } from '../../../src/services/test-runner-service.js';
+import { pipelineService } from '../../../src/services/pipeline-service.js';
+import * as secureFs from '../../../src/lib/secure-fs.js';
+import { getFeatureDir } from '@automaker/platform';
+import {
+  getPromptCustomization,
+  getAutoLoadClaudeMdSetting,
+  filterClaudeMdFromContext,
+} from '../../../src/lib/settings-helpers.js';
+
+// Mock pipelineService
+vi.mock('../../../src/services/pipeline-service.js', () => ({
+  pipelineService: {
+    isPipelineStatus: vi.fn(),
+    getStepIdFromStatus: vi.fn(),
+    getPipelineConfig: vi.fn(),
+    getNextStatus: vi.fn(),
+  },
+}));
+
+// Mock merge-service
+vi.mock('../../../src/services/merge-service.js', () => ({
+  performMerge: vi.fn(),
+}));
+
+import { performMerge } from '../../../src/services/merge-service.js';
+
+// Mock secureFs
+vi.mock('../../../src/lib/secure-fs.js', () => ({
+  readFile: vi.fn(),
+  access: vi.fn(),
+}));
+
+// Mock settings helpers
+vi.mock('../../../src/lib/settings-helpers.js', () => ({
+  getPromptCustomization: vi.fn().mockResolvedValue({
+    taskExecution: {
+      implementationInstructions: 'test instructions',
+      playwrightVerificationInstructions: 'test playwright',
+    },
+  }),
+  getAutoLoadClaudeMdSetting: vi.fn().mockResolvedValue(true),
+  getUseClaudeCodeSystemPromptSetting: vi.fn().mockResolvedValue(true),
+  filterClaudeMdFromContext: vi.fn().mockReturnValue('context prompt'),
+}));
+
+// Mock validateWorkingDirectory
+vi.mock('../../../src/lib/sdk-options.js', () => ({
+  validateWorkingDirectory: vi.fn(),
+}));
+
+// Mock platform
+vi.mock('@automaker/platform', () => ({
+  getFeatureDir: vi
+    .fn()
+    .mockImplementation(
+      (projectPath: string, featureId: string) => `${projectPath}/.automaker/features/${featureId}`
+    ),
+}));
+
+// Mock model-resolver
+vi.mock('@automaker/model-resolver', () => ({
+  resolveModelString: vi.fn().mockReturnValue('claude-sonnet-4'),
+  DEFAULT_MODELS: { claude: 'claude-sonnet-4' },
+}));
+
+describe('PipelineOrchestrator', () => {
+  // Mock dependencies
+  let mockEventBus: TypedEventBus;
+  let mockFeatureStateManager: FeatureStateManager;
+  let mockAgentExecutor: AgentExecutor;
+  let mockTestRunnerService: TestRunnerService;
+  let mockWorktreeResolver: WorktreeResolver;
+  let mockConcurrencyManager: ConcurrencyManager;
+  let mockSettingsService: SettingsService | null;
+  let mockUpdateFeatureStatusFn: UpdateFeatureStatusFn;
+  let mockLoadContextFilesFn: vi.Mock;
+  let mockBuildFeaturePromptFn: BuildFeaturePromptFn;
+  let mockExecuteFeatureFn: ExecuteFeatureFn;
+  let mockRunAgentFn: RunAgentFn;
+  let orchestrator: PipelineOrchestrator;
+
+  // Test data
+  const testFeature: Feature = {
+    id: 'feature-1',
+    title: 'Test Feature',
+    category: 'test',
+    description: 'Test description',
+    status: 'pipeline_step-1',
+    branchName: 'feature/test-1',
+  };
+
+  const testSteps: PipelineStep[] = [
+    {
+      id: 'step-1',
+      name: 'Step 1',
+      order: 1,
+      instructions: 'Do step 1',
+      colorClass: 'blue',
+      createdAt: '',
+      updatedAt: '',
+    },
+    {
+      id: 'step-2',
+      name: 'Step 2',
+      order: 2,
+      instructions: 'Do step 2',
+      colorClass: 'green',
+      createdAt: '',
+      updatedAt: '',
+    },
+  ];
+
+  const testConfig: PipelineConfig = {
+    version: 1,
+    steps: testSteps,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockEventBus = {
+      emitAutoModeEvent: vi.fn(),
+      getUnderlyingEmitter: vi.fn().mockReturnValue({}),
+    } as unknown as TypedEventBus;
+
+    mockFeatureStateManager = {
+      updateFeatureStatus: vi.fn().mockResolvedValue(undefined),
+      loadFeature: vi.fn().mockResolvedValue(testFeature),
+    } as unknown as FeatureStateManager;
+
+    mockAgentExecutor = {
+      execute: vi.fn().mockResolvedValue({ success: true }),
+    } as unknown as AgentExecutor;
+
+    mockTestRunnerService = {
+      startTests: vi
+        .fn()
+        .mockResolvedValue({ success: true, result: { sessionId: 'test-session-1' } }),
+      getSession: vi.fn().mockReturnValue({
+        status: 'passed',
+        exitCode: 0,
+        startedAt: new Date(),
+        finishedAt: new Date(),
+      }),
+      getSessionOutput: vi
+        .fn()
+        .mockReturnValue({ success: true, result: { output: 'All tests passed' } }),
+    } as unknown as TestRunnerService;
+
+    mockWorktreeResolver = {
+      findWorktreeForBranch: vi.fn().mockResolvedValue('/test/worktree'),
+      getCurrentBranch: vi.fn().mockResolvedValue('main'),
+    } as unknown as WorktreeResolver;
+
+    mockConcurrencyManager = {
+      acquire: vi.fn().mockImplementation(({ featureId, isAutoMode }) => ({
+        featureId,
+        projectPath: '/test/project',
+        abortController: new AbortController(),
+        branchName: null,
+        worktreePath: null,
+        isAutoMode: isAutoMode ?? false,
+      })),
+      release: vi.fn(),
+      getRunningFeature: vi.fn().mockReturnValue(undefined),
+    } as unknown as ConcurrencyManager;
+
+    mockSettingsService = null;
+
+    mockUpdateFeatureStatusFn = vi.fn().mockResolvedValue(undefined);
+    mockLoadContextFilesFn = vi.fn().mockResolvedValue({ contextPrompt: 'test context' });
+    mockBuildFeaturePromptFn = vi.fn().mockReturnValue('Feature prompt content');
+    mockExecuteFeatureFn = vi.fn().mockResolvedValue(undefined);
+    mockRunAgentFn = vi.fn().mockResolvedValue(undefined);
+
+    // Default mocks for secureFs
+    vi.mocked(secureFs.readFile).mockResolvedValue('Previous context');
+    vi.mocked(secureFs.access).mockResolvedValue(undefined);
+
+    // Re-setup platform mocks (clearAllMocks resets implementations)
+    vi.mocked(getFeatureDir).mockImplementation(
+      (projectPath: string, featureId: string) => `${projectPath}/.automaker/features/${featureId}`
+    );
+
+    // Re-setup settings helpers mocks
+    vi.mocked(getPromptCustomization).mockResolvedValue({
+      taskExecution: {
+        implementationInstructions: 'test instructions',
+        playwrightVerificationInstructions: 'test playwright',
+      },
+    } as any);
+    vi.mocked(getAutoLoadClaudeMdSetting).mockResolvedValue(true);
+    vi.mocked(filterClaudeMdFromContext).mockReturnValue('context prompt');
+
+    orchestrator = new PipelineOrchestrator(
+      mockEventBus,
+      mockFeatureStateManager,
+      mockAgentExecutor,
+      mockTestRunnerService,
+      mockWorktreeResolver,
+      mockConcurrencyManager,
+      mockSettingsService,
+      mockUpdateFeatureStatusFn,
+      mockLoadContextFilesFn,
+      mockBuildFeaturePromptFn,
+      mockExecuteFeatureFn,
+      mockRunAgentFn
+    );
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('constructor', () => {
+    it('should create instance with all dependencies', () => {
+      expect(orchestrator).toBeInstanceOf(PipelineOrchestrator);
+    });
+
+    it('should accept null settingsService', () => {
+      const orch = new PipelineOrchestrator(
+        mockEventBus,
+        mockFeatureStateManager,
+        mockAgentExecutor,
+        mockTestRunnerService,
+        mockWorktreeResolver,
+        mockConcurrencyManager,
+        null,
+        mockUpdateFeatureStatusFn,
+        mockLoadContextFilesFn,
+        mockBuildFeaturePromptFn,
+        mockExecuteFeatureFn,
+        mockRunAgentFn
+      );
+      expect(orch).toBeInstanceOf(PipelineOrchestrator);
+    });
+  });
+
+  describe('buildPipelineStepPrompt', () => {
+    const taskPrompts = {
+      implementationInstructions: 'impl instructions',
+      playwrightVerificationInstructions: 'playwright instructions',
+    };
+
+    it('should include step name and instructions', () => {
+      const prompt = orchestrator.buildPipelineStepPrompt(
+        testSteps[0],
+        testFeature,
+        '',
+        taskPrompts
+      );
+      expect(prompt).toContain('## Pipeline Step: Step 1');
+      expect(prompt).toContain('Do step 1');
+    });
+
+    it('should include feature context from callback', () => {
+      orchestrator.buildPipelineStepPrompt(testSteps[0], testFeature, '', taskPrompts);
+      expect(mockBuildFeaturePromptFn).toHaveBeenCalledWith(testFeature, taskPrompts);
+    });
+
+    it('should include previous context when available', () => {
+      const prompt = orchestrator.buildPipelineStepPrompt(
+        testSteps[0],
+        testFeature,
+        'Previous work content',
+        taskPrompts
+      );
+      expect(prompt).toContain('### Previous Work');
+      expect(prompt).toContain('Previous work content');
+    });
+
+    it('should omit previous context section when empty', () => {
+      const prompt = orchestrator.buildPipelineStepPrompt(
+        testSteps[0],
+        testFeature,
+        '',
+        taskPrompts
+      );
+      expect(prompt).not.toContain('### Previous Work');
+    });
+  });
+
+  describe('detectPipelineStatus', () => {
+    beforeEach(() => {
+      vi.mocked(pipelineService.isPipelineStatus).mockReturnValue(true);
+      vi.mocked(pipelineService.getStepIdFromStatus).mockReturnValue('step-1');
+      vi.mocked(pipelineService.getPipelineConfig).mockResolvedValue(testConfig);
+    });
+
+    it('should return isPipeline false for non-pipeline status', async () => {
+      vi.mocked(pipelineService.isPipelineStatus).mockReturnValue(false);
+
+      const result = await orchestrator.detectPipelineStatus(
+        '/test/project',
+        'feature-1',
+        'in_progress'
+      );
+      expect(result.isPipeline).toBe(false);
+      expect(result.stepId).toBeNull();
+    });
+
+    it('should return step info for valid pipeline status', async () => {
+      const result = await orchestrator.detectPipelineStatus(
+        '/test/project',
+        'feature-1',
+        'pipeline_step-1'
+      );
+      expect(result.isPipeline).toBe(true);
+      expect(result.stepId).toBe('step-1');
+      expect(result.stepIndex).toBe(0);
+      expect(result.step?.name).toBe('Step 1');
+    });
+
+    it('should return stepIndex -1 when step not found in config', async () => {
+      vi.mocked(pipelineService.getStepIdFromStatus).mockReturnValue('nonexistent-step');
+
+      const result = await orchestrator.detectPipelineStatus(
+        '/test/project',
+        'feature-1',
+        'pipeline_nonexistent'
+      );
+      expect(result.isPipeline).toBe(true);
+      expect(result.stepIndex).toBe(-1);
+      expect(result.step).toBeNull();
+    });
+
+    it('should return config null when no pipeline config exists', async () => {
+      vi.mocked(pipelineService.getPipelineConfig).mockResolvedValue(null);
+
+      const result = await orchestrator.detectPipelineStatus(
+        '/test/project',
+        'feature-1',
+        'pipeline_step-1'
+      );
+      expect(result.isPipeline).toBe(true);
+      expect(result.config).toBeNull();
+      expect(result.stepIndex).toBe(-1);
+    });
+  });
+
+  describe('executeTestStep', () => {
+    const createTestContext = (): PipelineContext => ({
+      projectPath: '/test/project',
+      featureId: 'feature-1',
+      feature: testFeature,
+      steps: testSteps,
+      workDir: '/test/project',
+      worktreePath: null,
+      branchName: 'feature/test-1',
+      abortController: new AbortController(),
+      autoLoadClaudeMd: true,
+      testAttempts: 0,
+      maxTestAttempts: 5,
+    });
+
+    it('should return success when tests pass on first attempt', async () => {
+      const context = createTestContext();
+      const result = await orchestrator.executeTestStep(context, 'npm test');
+
+      expect(result.success).toBe(true);
+      expect(result.testsPassed).toBe(true);
+      expect(mockTestRunnerService.startTests).toHaveBeenCalledTimes(1);
+    }, 10000);
+
+    it('should retry with agent fix when tests fail', async () => {
+      vi.mocked(mockTestRunnerService.getSession)
+        .mockReturnValueOnce({
+          status: 'failed',
+          exitCode: 1,
+          startedAt: new Date(),
+          finishedAt: new Date(),
+        } as never)
+        .mockReturnValueOnce({
+          status: 'passed',
+          exitCode: 0,
+          startedAt: new Date(),
+          finishedAt: new Date(),
+        } as never);
+
+      const context = createTestContext();
+      const result = await orchestrator.executeTestStep(context, 'npm test');
+
+      expect(result.success).toBe(true);
+      expect(mockRunAgentFn).toHaveBeenCalledTimes(1);
+      expect(mockTestRunnerService.startTests).toHaveBeenCalledTimes(2);
+    }, 15000);
+
+    it('should fail after max attempts', async () => {
+      vi.mocked(mockTestRunnerService.getSession).mockReturnValue({
+        status: 'failed',
+        exitCode: 1,
+        startedAt: new Date(),
+        finishedAt: new Date(),
+      } as never);
+
+      // Use smaller maxTestAttempts to speed up test
+      const context = { ...createTestContext(), maxTestAttempts: 2 };
+      const result = await orchestrator.executeTestStep(context, 'npm test');
+
+      expect(result.success).toBe(false);
+      expect(result.testsPassed).toBe(false);
+      expect(mockTestRunnerService.startTests).toHaveBeenCalledTimes(2);
+      expect(mockRunAgentFn).toHaveBeenCalledTimes(1);
+    }, 15000);
+
+    it('should emit pipeline_test_failed event on each failure', async () => {
+      vi.mocked(mockTestRunnerService.getSession).mockReturnValue({
+        status: 'failed',
+        exitCode: 1,
+        startedAt: new Date(),
+        finishedAt: new Date(),
+      } as never);
+
+      // Use smaller maxTestAttempts to speed up test
+      const context = { ...createTestContext(), maxTestAttempts: 2 };
+      await orchestrator.executeTestStep(context, 'npm test');
+
+      const testFailedCalls = vi
+        .mocked(mockEventBus.emitAutoModeEvent)
+        .mock.calls.filter((call) => call[0] === 'pipeline_test_failed');
+      expect(testFailedCalls.length).toBe(2);
+    }, 15000);
+
+    it('should build test failure summary for agent', async () => {
+      vi.mocked(mockTestRunnerService.getSession)
+        .mockReturnValueOnce({
+          status: 'failed',
+          exitCode: 1,
+          startedAt: new Date(),
+          finishedAt: new Date(),
+        } as never)
+        .mockReturnValueOnce({
+          status: 'passed',
+          exitCode: 0,
+          startedAt: new Date(),
+          finishedAt: new Date(),
+        } as never);
+      vi.mocked(mockTestRunnerService.getSessionOutput).mockReturnValue({
+        success: true,
+        result: { output: 'FAIL test.spec.ts\nExpected 1 to be 2' },
+      } as never);
+
+      const context = createTestContext();
+      await orchestrator.executeTestStep(context, 'npm test');
+
+      const fixPromptCall = vi.mocked(mockRunAgentFn).mock.calls[0];
+      expect(fixPromptCall[2]).toContain('Test Failures');
+    }, 15000);
+  });
+
+  describe('attemptMerge', () => {
+    const createMergeContext = (): PipelineContext => ({
+      projectPath: '/test/project',
+      featureId: 'feature-1',
+      feature: testFeature,
+      steps: testSteps,
+      workDir: '/test/project',
+      worktreePath: '/test/worktree',
+      branchName: 'feature/test-1',
+      abortController: new AbortController(),
+      autoLoadClaudeMd: true,
+      testAttempts: 0,
+      maxTestAttempts: 5,
+    });
+
+    beforeEach(() => {
+      vi.mocked(performMerge).mockReset();
+    });
+
+    it('should call performMerge with correct parameters', async () => {
+      vi.mocked(performMerge).mockResolvedValue({ success: true });
+
+      const context = createMergeContext();
+      await orchestrator.attemptMerge(context);
+
+      expect(performMerge).toHaveBeenCalledWith(
+        '/test/project',
+        'feature/test-1',
+        '/test/worktree',
+        'main',
+        { deleteWorktreeAndBranch: false },
+        expect.anything()
+      );
+    });
+
+    it('should return success on clean merge', async () => {
+      vi.mocked(performMerge).mockResolvedValue({ success: true });
+
+      const context = createMergeContext();
+      const result = await orchestrator.attemptMerge(context);
+
+      expect(result.success).toBe(true);
+      expect(result.hasConflicts).toBeUndefined();
+    });
+
+    it('should set merge_conflict status when hasConflicts is true', async () => {
+      vi.mocked(performMerge).mockResolvedValue({
+        success: false,
+        hasConflicts: true,
+        error: 'Merge conflict',
+      });
+
+      const context = createMergeContext();
+      await orchestrator.attemptMerge(context);
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'merge_conflict'
+      );
+    });
+
+    it('should emit pipeline_merge_conflict event on conflict', async () => {
+      vi.mocked(performMerge).mockResolvedValue({
+        success: false,
+        hasConflicts: true,
+        error: 'Merge conflict',
+      });
+
+      const context = createMergeContext();
+      await orchestrator.attemptMerge(context);
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'pipeline_merge_conflict',
+        expect.objectContaining({ featureId: 'feature-1', branchName: 'feature/test-1' })
+      );
+    });
+
+    it('should emit auto_mode_feature_complete on success when isAutoMode is true', async () => {
+      vi.mocked(performMerge).mockResolvedValue({ success: true });
+      vi.mocked(mockConcurrencyManager.getRunningFeature).mockReturnValue({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        abortController: new AbortController(),
+        branchName: null,
+        worktreePath: null,
+        isAutoMode: true,
+        startTime: Date.now(),
+        leaseCount: 1,
+      });
+
+      const context = createMergeContext();
+      await orchestrator.attemptMerge(context);
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_feature_complete',
+        expect.objectContaining({ featureId: 'feature-1', passes: true })
+      );
+    });
+
+    it('should not emit auto_mode_feature_complete on success when isAutoMode is false', async () => {
+      vi.mocked(performMerge).mockResolvedValue({ success: true });
+      vi.mocked(mockConcurrencyManager.getRunningFeature).mockReturnValue(undefined);
+
+      const context = createMergeContext();
+      await orchestrator.attemptMerge(context);
+
+      const completeCalls = vi
+        .mocked(mockEventBus.emitAutoModeEvent)
+        .mock.calls.filter((call) => call[0] === 'auto_mode_feature_complete');
+      expect(completeCalls.length).toBe(0);
+    });
+
+    it('should return needsAgentResolution true on conflict', async () => {
+      vi.mocked(performMerge).mockResolvedValue({
+        success: false,
+        hasConflicts: true,
+        error: 'Merge conflict',
+      });
+
+      const context = createMergeContext();
+      const result = await orchestrator.attemptMerge(context);
+
+      expect(result.needsAgentResolution).toBe(true);
+    });
+  });
+
+  describe('buildTestFailureSummary', () => {
+    it('should extract pass/fail counts from test output', () => {
+      const scrollback = `
+        PASS tests/passing.test.ts
+        FAIL tests/failing.test.ts
+        FAIL tests/another.test.ts
+      `;
+
+      const summary = orchestrator.buildTestFailureSummary(scrollback);
+      expect(summary).toContain('1 passed');
+      expect(summary).toContain('2 failed');
+    });
+
+    it('should extract failed test names from output', () => {
+      const scrollback = `
+        FAIL tests/auth.test.ts
+        FAIL tests/user.test.ts
+      `;
+
+      const summary = orchestrator.buildTestFailureSummary(scrollback);
+      expect(summary).toContain('tests/auth.test.ts');
+      expect(summary).toContain('tests/user.test.ts');
+    });
+
+    it('should return concise summary for agent', () => {
+      const longOutput = 'x'.repeat(5000);
+      const summary = orchestrator.buildTestFailureSummary(longOutput);
+
+      expect(summary.length).toBeLessThan(5000);
+      expect(summary).toContain('Output (last 2000 chars)');
+    });
+  });
+
+  describe('resumePipeline', () => {
+    const validPipelineInfo: PipelineStatusInfo = {
+      isPipeline: true,
+      stepId: 'step-1',
+      stepIndex: 0,
+      totalSteps: 2,
+      step: testSteps[0],
+      config: testConfig,
+    };
+
+    it('should restart from beginning when no context file', async () => {
+      vi.mocked(secureFs.access).mockRejectedValue(new Error('ENOENT'));
+
+      await orchestrator.resumePipeline('/test/project', testFeature, true, validPipelineInfo);
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'in_progress'
+      );
+      expect(mockExecuteFeatureFn).toHaveBeenCalled();
+    });
+
+    it('should complete feature when step no longer exists and emit event when isAutoMode=true', async () => {
+      const invalidPipelineInfo: PipelineStatusInfo = {
+        ...validPipelineInfo,
+        stepIndex: -1,
+        step: null,
+      };
+
+      vi.mocked(mockConcurrencyManager.getRunningFeature).mockReturnValue({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        abortController: new AbortController(),
+        branchName: null,
+        worktreePath: null,
+        isAutoMode: true,
+        startTime: Date.now(),
+        leaseCount: 1,
+      });
+
+      await orchestrator.resumePipeline('/test/project', testFeature, true, invalidPipelineInfo);
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'verified'
+      );
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_feature_complete',
+        expect.objectContaining({ message: expect.stringContaining('no longer exists') })
+      );
+    });
+
+    it('should not emit feature_complete when step no longer exists and isAutoMode=false', async () => {
+      const invalidPipelineInfo: PipelineStatusInfo = {
+        ...validPipelineInfo,
+        stepIndex: -1,
+        step: null,
+      };
+
+      vi.mocked(mockConcurrencyManager.getRunningFeature).mockReturnValue(undefined);
+
+      await orchestrator.resumePipeline('/test/project', testFeature, true, invalidPipelineInfo);
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'verified'
+      );
+      const completeCalls = vi
+        .mocked(mockEventBus.emitAutoModeEvent)
+        .mock.calls.filter((call) => call[0] === 'auto_mode_feature_complete');
+      expect(completeCalls.length).toBe(0);
+    });
+  });
+
+  describe('resumeFromStep', () => {
+    it('should filter out excluded steps', async () => {
+      const featureWithExclusions: Feature = {
+        ...testFeature,
+        excludedPipelineSteps: ['step-1'],
+      };
+
+      vi.mocked(pipelineService.getNextStatus).mockReturnValue('pipeline_step-2');
+      vi.mocked(pipelineService.isPipelineStatus).mockReturnValue(true);
+      vi.mocked(pipelineService.getStepIdFromStatus).mockReturnValue('step-2');
+
+      await orchestrator.resumeFromStep(
+        '/test/project',
+        featureWithExclusions,
+        true,
+        0,
+        testConfig
+      );
+
+      expect(mockRunAgentFn).toHaveBeenCalled();
+    });
+
+    it('should complete feature when all remaining steps excluded and emit event when isAutoMode=true', async () => {
+      const featureWithAllExcluded: Feature = {
+        ...testFeature,
+        excludedPipelineSteps: ['step-1', 'step-2'],
+      };
+
+      vi.mocked(pipelineService.getNextStatus).mockReturnValue('verified');
+      vi.mocked(pipelineService.isPipelineStatus).mockReturnValue(false);
+      vi.mocked(mockConcurrencyManager.getRunningFeature).mockReturnValue({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        abortController: new AbortController(),
+        branchName: null,
+        worktreePath: null,
+        isAutoMode: true,
+        startTime: Date.now(),
+        leaseCount: 1,
+      });
+
+      await orchestrator.resumeFromStep(
+        '/test/project',
+        featureWithAllExcluded,
+        true,
+        0,
+        testConfig
+      );
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_feature_complete',
+        expect.objectContaining({ message: expect.stringContaining('excluded') })
+      );
+    });
+
+    it('should acquire running feature slot before execution', async () => {
+      await orchestrator.resumeFromStep('/test/project', testFeature, true, 0, testConfig);
+
+      expect(mockConcurrencyManager.acquire).toHaveBeenCalledWith(
+        expect.objectContaining({ featureId: 'feature-1', allowReuse: true })
+      );
+    });
+
+    it('should release slot on completion', async () => {
+      await orchestrator.resumeFromStep('/test/project', testFeature, true, 0, testConfig);
+
+      expect(mockConcurrencyManager.release).toHaveBeenCalledWith('feature-1');
+    });
+
+    it('should release slot on error', async () => {
+      mockRunAgentFn.mockRejectedValue(new Error('Test error'));
+
+      await orchestrator.resumeFromStep('/test/project', testFeature, true, 0, testConfig);
+
+      expect(mockConcurrencyManager.release).toHaveBeenCalledWith('feature-1');
+    });
+  });
+
+  describe('executePipeline', () => {
+    const createPipelineContext = (): PipelineContext => ({
+      projectPath: '/test/project',
+      featureId: 'feature-1',
+      feature: testFeature,
+      steps: testSteps,
+      workDir: '/test/project',
+      worktreePath: null,
+      branchName: 'feature/test-1',
+      abortController: new AbortController(),
+      autoLoadClaudeMd: true,
+      testAttempts: 0,
+      maxTestAttempts: 5,
+    });
+
+    beforeEach(() => {
+      vi.mocked(performMerge).mockResolvedValue({ success: true });
+    });
+
+    it('should execute steps in sequence', async () => {
+      const context = createPipelineContext();
+      await orchestrator.executePipeline(context);
+
+      expect(mockRunAgentFn).toHaveBeenCalledTimes(2);
+    });
+
+    it('should emit pipeline_step_started for each step', async () => {
+      const context = createPipelineContext();
+      await orchestrator.executePipeline(context);
+
+      const startedCalls = vi
+        .mocked(mockEventBus.emitAutoModeEvent)
+        .mock.calls.filter((call) => call[0] === 'pipeline_step_started');
+      expect(startedCalls.length).toBe(2);
+    });
+
+    it('should emit pipeline_step_complete after each step', async () => {
+      const context = createPipelineContext();
+      await orchestrator.executePipeline(context);
+
+      const completeCalls = vi
+        .mocked(mockEventBus.emitAutoModeEvent)
+        .mock.calls.filter((call) => call[0] === 'pipeline_step_complete');
+      expect(completeCalls.length).toBe(2);
+    });
+
+    it('should update feature status to pipeline_{stepId} for each step', async () => {
+      const context = createPipelineContext();
+      await orchestrator.executePipeline(context);
+
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'pipeline_step-1'
+      );
+      expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'pipeline_step-2'
+      );
+    });
+
+    it('should respect abort signal between steps', async () => {
+      const context = createPipelineContext();
+      mockRunAgentFn.mockImplementation(async () => {
+        context.abortController.abort();
+      });
+
+      await expect(orchestrator.executePipeline(context)).rejects.toThrow(
+        'Pipeline execution aborted'
+      );
+    });
+
+    it('should call attemptMerge after successful completion', async () => {
+      const context = createPipelineContext();
+      await orchestrator.executePipeline(context);
+
+      expect(performMerge).toHaveBeenCalledWith(
+        '/test/project',
+        'feature/test-1',
+        '/test/project', // Falls back to projectPath when worktreePath is null
+        'main',
+        { deleteWorktreeAndBranch: false },
+        expect.anything()
+      );
+    });
+  });
+
+  describe('AutoModeService integration (delegation verification)', () => {
+    describe('executePipeline delegation', () => {
+      const createPipelineContext = (): PipelineContext => ({
+        projectPath: '/test/project',
+        featureId: 'feature-1',
+        feature: testFeature,
+        steps: testSteps,
+        workDir: '/test/project',
+        worktreePath: '/test/worktree',
+        branchName: 'feature/test-1',
+        abortController: new AbortController(),
+        autoLoadClaudeMd: true,
+        testAttempts: 0,
+        maxTestAttempts: 5,
+      });
+
+      beforeEach(() => {
+        vi.mocked(performMerge).mockResolvedValue({ success: true });
+      });
+
+      it('builds PipelineContext with correct fields from executeFeature', async () => {
+        const context = createPipelineContext();
+        await orchestrator.executePipeline(context);
+
+        // Verify all context fields were used correctly
+        expect(context.projectPath).toBe('/test/project');
+        expect(context.featureId).toBe('feature-1');
+        expect(context.steps).toHaveLength(2);
+        expect(context.workDir).toBe('/test/project');
+        expect(context.worktreePath).toBe('/test/worktree');
+        expect(context.branchName).toBe('feature/test-1');
+        expect(context.autoLoadClaudeMd).toBe(true);
+        expect(context.testAttempts).toBe(0);
+        expect(context.maxTestAttempts).toBe(5);
+      });
+
+      it('passes worktreePath when worktree exists', async () => {
+        const context = createPipelineContext();
+        context.worktreePath = '/test/custom-worktree';
+
+        await orchestrator.executePipeline(context);
+
+        // Merge should receive the worktree path
+        expect(performMerge).toHaveBeenCalledWith(
+          '/test/project',
+          'feature/test-1',
+          '/test/custom-worktree',
+          'main',
+          { deleteWorktreeAndBranch: false },
+          expect.anything()
+        );
+      });
+
+      it('passes branchName from feature', async () => {
+        const context = createPipelineContext();
+        context.branchName = 'feature/custom-branch';
+        context.feature = { ...testFeature, branchName: 'feature/custom-branch' };
+
+        await orchestrator.executePipeline(context);
+
+        expect(performMerge).toHaveBeenCalledWith(
+          '/test/project',
+          'feature/custom-branch',
+          '/test/worktree',
+          'main',
+          { deleteWorktreeAndBranch: false },
+          expect.anything()
+        );
+      });
+
+      it('passes testAttempts and maxTestAttempts', async () => {
+        const context = createPipelineContext();
+        context.testAttempts = 2;
+        context.maxTestAttempts = 10;
+
+        // These values would be used by executeTestStep if called
+        expect(context.testAttempts).toBe(2);
+        expect(context.maxTestAttempts).toBe(10);
+      });
+    });
+
+    describe('detectPipelineStatus delegation', () => {
+      beforeEach(() => {
+        vi.mocked(pipelineService.isPipelineStatus).mockReturnValue(true);
+        vi.mocked(pipelineService.getStepIdFromStatus).mockReturnValue('step-1');
+        vi.mocked(pipelineService.getPipelineConfig).mockResolvedValue(testConfig);
+      });
+
+      it('returns pipelineInfo from orchestrator for pipeline status', async () => {
+        const result = await orchestrator.detectPipelineStatus(
+          '/test/project',
+          'feature-1',
+          'pipeline_step-1'
+        );
+
+        expect(result.isPipeline).toBe(true);
+        expect(result.stepId).toBe('step-1');
+        expect(result.stepIndex).toBe(0);
+        expect(result.config).toEqual(testConfig);
+      });
+
+      it('returns isPipeline false for non-pipeline status', async () => {
+        vi.mocked(pipelineService.isPipelineStatus).mockReturnValue(false);
+
+        const result = await orchestrator.detectPipelineStatus(
+          '/test/project',
+          'feature-1',
+          'in_progress'
+        );
+
+        expect(result.isPipeline).toBe(false);
+        expect(result.stepId).toBeNull();
+        expect(result.config).toBeNull();
+      });
+    });
+
+    describe('resumePipeline delegation', () => {
+      const validPipelineInfo: PipelineStatusInfo = {
+        isPipeline: true,
+        stepId: 'step-1',
+        stepIndex: 0,
+        totalSteps: 2,
+        step: testSteps[0],
+        config: testConfig,
+      };
+
+      it('builds resumeContext with autoLoadClaudeMd setting', async () => {
+        vi.mocked(getAutoLoadClaudeMdSetting).mockResolvedValue(true);
+
+        await orchestrator.resumeFromStep('/test/project', testFeature, true, 0, testConfig);
+
+        // Verify autoLoadClaudeMd was fetched
+        expect(getAutoLoadClaudeMdSetting).toHaveBeenCalledWith(
+          '/test/project',
+          null,
+          '[AutoMode]'
+        );
+      });
+
+      it('passes useWorktrees flag to orchestrator', async () => {
+        await orchestrator.resumeFromStep('/test/project', testFeature, true, 0, testConfig);
+
+        // When useWorktrees is true, it should look for worktree
+        expect(mockWorktreeResolver.findWorktreeForBranch).toHaveBeenCalledWith(
+          '/test/project',
+          'feature/test-1'
+        );
+      });
+
+      it('sets maxTestAttempts to 5', async () => {
+        // The default maxTestAttempts is 5 as per CONTEXT.md
+        await orchestrator.resumeFromStep('/test/project', testFeature, true, 0, testConfig);
+
+        // Execution should proceed with maxTestAttempts = 5
+        expect(mockRunAgentFn).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('edge cases', () => {
+    describe('abort signal handling', () => {
+      it('handles abort signal during step execution', async () => {
+        const context: PipelineContext = {
+          projectPath: '/test/project',
+          featureId: 'feature-1',
+          feature: testFeature,
+          steps: testSteps,
+          workDir: '/test/project',
+          worktreePath: null,
+          branchName: 'feature/test-1',
+          abortController: new AbortController(),
+          autoLoadClaudeMd: true,
+          testAttempts: 0,
+          maxTestAttempts: 5,
+        };
+
+        // Abort during first step
+        mockRunAgentFn.mockImplementationOnce(async () => {
+          context.abortController.abort();
+        });
+
+        await expect(orchestrator.executePipeline(context)).rejects.toThrow(
+          'Pipeline execution aborted'
+        );
+      });
+    });
+
+    describe('context file handling', () => {
+      it('handles missing context file during resume', async () => {
+        vi.mocked(secureFs.access).mockRejectedValue(new Error('ENOENT'));
+
+        const pipelineInfo: PipelineStatusInfo = {
+          isPipeline: true,
+          stepId: 'step-1',
+          stepIndex: 0,
+          totalSteps: 2,
+          step: testSteps[0],
+          config: testConfig,
+        };
+
+        await orchestrator.resumePipeline('/test/project', testFeature, true, pipelineInfo);
+
+        // Should restart from beginning when no context
+        expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+          '/test/project',
+          'feature-1',
+          'in_progress'
+        );
+        expect(mockExecuteFeatureFn).toHaveBeenCalled();
+      });
+    });
+
+    describe('step deletion handling', () => {
+      it('handles deleted step during resume', async () => {
+        const pipelineInfo: PipelineStatusInfo = {
+          isPipeline: true,
+          stepId: 'deleted-step',
+          stepIndex: -1,
+          totalSteps: 2,
+          step: null,
+          config: testConfig,
+        };
+
+        await orchestrator.resumePipeline('/test/project', testFeature, true, pipelineInfo);
+
+        // Should complete feature when step no longer exists
+        expect(mockUpdateFeatureStatusFn).toHaveBeenCalledWith(
+          '/test/project',
+          'feature-1',
+          'verified'
+        );
+      });
+
+      it('handles all steps excluded during resume and emits event when isAutoMode=true', async () => {
+        const featureWithAllExcluded: Feature = {
+          ...testFeature,
+          excludedPipelineSteps: ['step-1', 'step-2'],
+        };
+
+        vi.mocked(pipelineService.getNextStatus).mockReturnValue('verified');
+        vi.mocked(pipelineService.isPipelineStatus).mockReturnValue(false);
+        vi.mocked(mockConcurrencyManager.getRunningFeature).mockReturnValue({
+          featureId: 'feature-1',
+          projectPath: '/test/project',
+          abortController: new AbortController(),
+          branchName: null,
+          worktreePath: null,
+          isAutoMode: true,
+          startTime: Date.now(),
+          leaseCount: 1,
+        });
+
+        await orchestrator.resumeFromStep(
+          '/test/project',
+          featureWithAllExcluded,
+          true,
+          0,
+          testConfig
+        );
+
+        expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+          'auto_mode_feature_complete',
+          expect.objectContaining({
+            message: expect.stringContaining('excluded'),
+          })
+        );
+      });
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/pipeline-service.test.ts b/temp_repo/apps/server/tests/unit/services/pipeline-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..66297afe8b615cc3a39ed214772af03177fd1428
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/pipeline-service.test.ts
@@ -0,0 +1,1221 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+import { PipelineService } from '@/services/pipeline-service.js';
+import type { PipelineConfig, PipelineStep } from '@automaker/types';
+
+// Mock secure-fs
+vi.mock('@/lib/secure-fs.js', () => ({
+  readFile: vi.fn(),
+  writeFile: vi.fn(),
+  rename: vi.fn(),
+  unlink: vi.fn(),
+}));
+
+// Mock ensureAutomakerDir
+vi.mock('@automaker/platform', () => ({
+  ensureAutomakerDir: vi.fn(),
+}));
+
+import * as secureFs from '@/lib/secure-fs.js';
+import { ensureAutomakerDir } from '@automaker/platform';
+
+describe('pipeline-service.ts', () => {
+  let testProjectDir: string;
+  let pipelineService: PipelineService;
+
+  beforeEach(async () => {
+    testProjectDir = path.join(os.tmpdir(), `pipeline-test-${Date.now()}`);
+    await fs.mkdir(testProjectDir, { recursive: true });
+    pipelineService = new PipelineService();
+    vi.clearAllMocks();
+  });
+
+  afterEach(async () => {
+    try {
+      await fs.rm(testProjectDir, { recursive: true, force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe('getPipelineConfig', () => {
+    it('should return default config when file does not exist', async () => {
+      const error = new Error('File not found') as NodeJS.ErrnoException;
+      error.code = 'ENOENT';
+      vi.mocked(secureFs.readFile).mockRejectedValue(error);
+
+      const config = await pipelineService.getPipelineConfig(testProjectDir);
+
+      expect(config).toEqual({
+        version: 1,
+        steps: [],
+      });
+    });
+
+    it('should read and return existing config', async () => {
+      const existingConfig: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Test Step',
+            order: 0,
+            instructions: 'Do something',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      const configPath = path.join(testProjectDir, '.automaker', 'pipeline.json');
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingConfig) as any);
+
+      const config = await pipelineService.getPipelineConfig(testProjectDir);
+
+      expect(secureFs.readFile).toHaveBeenCalledWith(configPath, 'utf-8');
+      expect(config).toEqual(existingConfig);
+    });
+
+    it('should merge with defaults for missing properties', async () => {
+      const partialConfig = {
+        steps: [
+          {
+            id: 'step1',
+            name: 'Test Step',
+            order: 0,
+            instructions: 'Do something',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      const configPath = path.join(testProjectDir, '.automaker', 'pipeline.json');
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(partialConfig) as any);
+
+      const config = await pipelineService.getPipelineConfig(testProjectDir);
+
+      expect(config.version).toBe(1);
+      expect(config.steps).toHaveLength(1);
+    });
+
+    it('should handle read errors gracefully', async () => {
+      const error = new Error('Read error');
+      vi.mocked(secureFs.readFile).mockRejectedValue(error);
+
+      const config = await pipelineService.getPipelineConfig(testProjectDir);
+
+      // Should return default config on error
+      expect(config).toEqual({
+        version: 1,
+        steps: [],
+      });
+    });
+  });
+
+  describe('savePipelineConfig', () => {
+    it('should save config to file', async () => {
+      const config: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Test Step',
+            order: 0,
+            instructions: 'Do something',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      vi.mocked(ensureAutomakerDir).mockResolvedValue(undefined);
+      vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(secureFs.rename).mockResolvedValue(undefined);
+
+      await pipelineService.savePipelineConfig(testProjectDir, config);
+
+      expect(ensureAutomakerDir).toHaveBeenCalledWith(testProjectDir);
+      expect(secureFs.writeFile).toHaveBeenCalled();
+      expect(secureFs.rename).toHaveBeenCalled();
+    });
+
+    it('should use atomic write pattern', async () => {
+      const config: PipelineConfig = {
+        version: 1,
+        steps: [],
+      };
+
+      vi.mocked(ensureAutomakerDir).mockResolvedValue(undefined);
+      vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(secureFs.rename).mockResolvedValue(undefined);
+
+      await pipelineService.savePipelineConfig(testProjectDir, config);
+
+      const writeCall = vi.mocked(secureFs.writeFile).mock.calls[0];
+      const tempPath = writeCall[0] as string;
+      expect(tempPath).toContain('.tmp.');
+      expect(tempPath).toContain('pipeline.json');
+    });
+
+    it('should clean up temp file on write error', async () => {
+      const config: PipelineConfig = {
+        version: 1,
+        steps: [],
+      };
+
+      vi.mocked(ensureAutomakerDir).mockResolvedValue(undefined);
+      vi.mocked(secureFs.writeFile).mockRejectedValue(new Error('Write failed'));
+      vi.mocked(secureFs.unlink).mockResolvedValue(undefined);
+
+      await expect(pipelineService.savePipelineConfig(testProjectDir, config)).rejects.toThrow(
+        'Write failed'
+      );
+
+      expect(secureFs.unlink).toHaveBeenCalled();
+    });
+  });
+
+  describe('addStep', () => {
+    it('should add a new step to config', async () => {
+      const error = new Error('File not found') as NodeJS.ErrnoException;
+      error.code = 'ENOENT';
+      vi.mocked(secureFs.readFile).mockRejectedValue(error);
+      vi.mocked(ensureAutomakerDir).mockResolvedValue(undefined);
+      vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(secureFs.rename).mockResolvedValue(undefined);
+
+      const stepData = {
+        name: 'New Step',
+        order: 0,
+        instructions: 'Do something',
+        colorClass: 'blue',
+      };
+
+      const newStep = await pipelineService.addStep(testProjectDir, stepData);
+
+      expect(newStep.name).toBe('New Step');
+      expect(newStep.id).toMatch(/^step_/);
+      expect(newStep.createdAt).toBeDefined();
+      expect(newStep.updatedAt).toBeDefined();
+      expect(newStep.createdAt).toBe(newStep.updatedAt);
+    });
+
+    it('should normalize order values after adding step', async () => {
+      const existingConfig: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 5, // Out of order
+            instructions: 'Do something',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingConfig) as any);
+      vi.mocked(ensureAutomakerDir).mockResolvedValue(undefined);
+      vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(secureFs.rename).mockResolvedValue(undefined);
+
+      const stepData = {
+        name: 'New Step',
+        order: 10, // Out of order
+        instructions: 'Do something',
+        colorClass: 'red',
+      };
+
+      await pipelineService.addStep(testProjectDir, stepData);
+
+      const writeCall = vi.mocked(secureFs.writeFile).mock.calls[0];
+      const savedConfig = JSON.parse(writeCall[1] as string) as PipelineConfig;
+      expect(savedConfig.steps[0].order).toBe(0);
+      expect(savedConfig.steps[1].order).toBe(1);
+    });
+
+    it('should sort steps by order before normalizing', async () => {
+      const existingConfig: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 2,
+            instructions: 'Do something',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+          {
+            id: 'step2',
+            name: 'Step 2',
+            order: 0,
+            instructions: 'Do something else',
+            colorClass: 'green',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingConfig) as any);
+      vi.mocked(ensureAutomakerDir).mockResolvedValue(undefined);
+      vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(secureFs.rename).mockResolvedValue(undefined);
+
+      const stepData = {
+        name: 'New Step',
+        order: 1,
+        instructions: 'Do something',
+        colorClass: 'red',
+      };
+
+      await pipelineService.addStep(testProjectDir, stepData);
+
+      const writeCall = vi.mocked(secureFs.writeFile).mock.calls[0];
+      const savedConfig = JSON.parse(writeCall[1] as string) as PipelineConfig;
+      // Should be sorted: step2 (order 0), newStep (order 1), step1 (order 2)
+      expect(savedConfig.steps[0].id).toBe('step2');
+      expect(savedConfig.steps[0].order).toBe(0);
+      expect(savedConfig.steps[1].order).toBe(1);
+      expect(savedConfig.steps[2].id).toBe('step1');
+      expect(savedConfig.steps[2].order).toBe(2);
+    });
+  });
+
+  describe('updateStep', () => {
+    it('should update an existing step', async () => {
+      const existingConfig: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Old Name',
+            order: 0,
+            instructions: 'Old instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingConfig) as any);
+      vi.mocked(ensureAutomakerDir).mockResolvedValue(undefined);
+      vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(secureFs.rename).mockResolvedValue(undefined);
+
+      const updates = {
+        name: 'New Name',
+        instructions: 'New instructions',
+      };
+
+      const updatedStep = await pipelineService.updateStep(testProjectDir, 'step1', updates);
+
+      expect(updatedStep.name).toBe('New Name');
+      expect(updatedStep.instructions).toBe('New instructions');
+      expect(updatedStep.id).toBe('step1');
+      expect(updatedStep.createdAt).toBe('2024-01-01T00:00:00.000Z');
+      expect(updatedStep.updatedAt).not.toBe('2024-01-01T00:00:00.000Z');
+    });
+
+    it('should throw error if step not found', async () => {
+      const existingConfig: PipelineConfig = {
+        version: 1,
+        steps: [],
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingConfig) as any);
+
+      await expect(
+        pipelineService.updateStep(testProjectDir, 'nonexistent', { name: 'New' })
+      ).rejects.toThrow('Pipeline step not found: nonexistent');
+    });
+
+    it('should preserve createdAt when updating', async () => {
+      const existingConfig: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step',
+            order: 0,
+            instructions: 'Instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingConfig) as any);
+      vi.mocked(ensureAutomakerDir).mockResolvedValue(undefined);
+      vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(secureFs.rename).mockResolvedValue(undefined);
+
+      const updatedStep = await pipelineService.updateStep(testProjectDir, 'step1', {
+        name: 'Updated',
+      });
+
+      expect(updatedStep.createdAt).toBe('2024-01-01T00:00:00.000Z');
+    });
+  });
+
+  describe('deleteStep', () => {
+    it('should delete an existing step', async () => {
+      const existingConfig: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 0,
+            instructions: 'Instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+          {
+            id: 'step2',
+            name: 'Step 2',
+            order: 1,
+            instructions: 'Instructions',
+            colorClass: 'green',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingConfig) as any);
+      vi.mocked(ensureAutomakerDir).mockResolvedValue(undefined);
+      vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(secureFs.rename).mockResolvedValue(undefined);
+
+      await pipelineService.deleteStep(testProjectDir, 'step1');
+
+      const writeCall = vi.mocked(secureFs.writeFile).mock.calls[0];
+      const savedConfig = JSON.parse(writeCall[1] as string) as PipelineConfig;
+      expect(savedConfig.steps).toHaveLength(1);
+      expect(savedConfig.steps[0].id).toBe('step2');
+      expect(savedConfig.steps[0].order).toBe(0); // Normalized
+    });
+
+    it('should throw error if step not found', async () => {
+      const existingConfig: PipelineConfig = {
+        version: 1,
+        steps: [],
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingConfig) as any);
+
+      await expect(pipelineService.deleteStep(testProjectDir, 'nonexistent')).rejects.toThrow(
+        'Pipeline step not found: nonexistent'
+      );
+    });
+
+    it('should normalize order values after deletion', async () => {
+      const existingConfig: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 0,
+            instructions: 'Instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+          {
+            id: 'step2',
+            name: 'Step 2',
+            order: 5, // Out of order
+            instructions: 'Instructions',
+            colorClass: 'green',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+          {
+            id: 'step3',
+            name: 'Step 3',
+            order: 10, // Out of order
+            instructions: 'Instructions',
+            colorClass: 'red',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingConfig) as any);
+      vi.mocked(ensureAutomakerDir).mockResolvedValue(undefined);
+      vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(secureFs.rename).mockResolvedValue(undefined);
+
+      await pipelineService.deleteStep(testProjectDir, 'step2');
+
+      const writeCall = vi.mocked(secureFs.writeFile).mock.calls[0];
+      const savedConfig = JSON.parse(writeCall[1] as string) as PipelineConfig;
+      expect(savedConfig.steps).toHaveLength(2);
+      expect(savedConfig.steps[0].order).toBe(0);
+      expect(savedConfig.steps[1].order).toBe(1);
+    });
+  });
+
+  describe('reorderSteps', () => {
+    it('should reorder steps according to stepIds array', async () => {
+      const existingConfig: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 0,
+            instructions: 'Instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+          {
+            id: 'step2',
+            name: 'Step 2',
+            order: 1,
+            instructions: 'Instructions',
+            colorClass: 'green',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+          {
+            id: 'step3',
+            name: 'Step 3',
+            order: 2,
+            instructions: 'Instructions',
+            colorClass: 'red',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingConfig) as any);
+      vi.mocked(ensureAutomakerDir).mockResolvedValue(undefined);
+      vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(secureFs.rename).mockResolvedValue(undefined);
+
+      await pipelineService.reorderSteps(testProjectDir, ['step3', 'step1', 'step2']);
+
+      const writeCall = vi.mocked(secureFs.writeFile).mock.calls[0];
+      const savedConfig = JSON.parse(writeCall[1] as string) as PipelineConfig;
+      expect(savedConfig.steps[0].id).toBe('step3');
+      expect(savedConfig.steps[0].order).toBe(0);
+      expect(savedConfig.steps[1].id).toBe('step1');
+      expect(savedConfig.steps[1].order).toBe(1);
+      expect(savedConfig.steps[2].id).toBe('step2');
+      expect(savedConfig.steps[2].order).toBe(2);
+    });
+
+    it('should update updatedAt timestamp for reordered steps', async () => {
+      const existingConfig: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 0,
+            instructions: 'Instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+          {
+            id: 'step2',
+            name: 'Step 2',
+            order: 1,
+            instructions: 'Instructions',
+            colorClass: 'green',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingConfig) as any);
+      vi.mocked(ensureAutomakerDir).mockResolvedValue(undefined);
+      vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(secureFs.rename).mockResolvedValue(undefined);
+
+      await pipelineService.reorderSteps(testProjectDir, ['step2', 'step1']);
+
+      const writeCall = vi.mocked(secureFs.writeFile).mock.calls[0];
+      const savedConfig = JSON.parse(writeCall[1] as string) as PipelineConfig;
+      expect(savedConfig.steps[0].updatedAt).not.toBe('2024-01-01T00:00:00.000Z');
+      expect(savedConfig.steps[1].updatedAt).not.toBe('2024-01-01T00:00:00.000Z');
+    });
+
+    it('should throw error if step ID not found', async () => {
+      const existingConfig: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 0,
+            instructions: 'Instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingConfig) as any);
+
+      await expect(
+        pipelineService.reorderSteps(testProjectDir, ['step1', 'nonexistent'])
+      ).rejects.toThrow('Pipeline step not found: nonexistent');
+    });
+
+    it('should allow partial reordering (filtering steps)', async () => {
+      const existingConfig: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 0,
+            instructions: 'Instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+          {
+            id: 'step2',
+            name: 'Step 2',
+            order: 1,
+            instructions: 'Instructions',
+            colorClass: 'green',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingConfig) as any);
+      vi.mocked(ensureAutomakerDir).mockResolvedValue(undefined);
+      vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+      vi.mocked(secureFs.rename).mockResolvedValue(undefined);
+
+      await pipelineService.reorderSteps(testProjectDir, ['step1']);
+
+      const writeCall = vi.mocked(secureFs.writeFile).mock.calls[0];
+      const savedConfig = JSON.parse(writeCall[1] as string) as PipelineConfig;
+      // Should only keep step1, effectively filtering out step2
+      expect(savedConfig.steps).toHaveLength(1);
+      expect(savedConfig.steps[0].id).toBe('step1');
+      expect(savedConfig.steps[0].order).toBe(0);
+    });
+  });
+
+  describe('getNextStatus', () => {
+    it('should return waiting_approval when no pipeline and skipTests is true', () => {
+      const nextStatus = pipelineService.getNextStatus('in_progress', null, true);
+      expect(nextStatus).toBe('waiting_approval');
+    });
+
+    it('should return verified when no pipeline and skipTests is false', () => {
+      const nextStatus = pipelineService.getNextStatus('in_progress', null, false);
+      expect(nextStatus).toBe('verified');
+    });
+
+    it('should return first pipeline step when coming from in_progress', () => {
+      const config: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 0,
+            instructions: 'Instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      const nextStatus = pipelineService.getNextStatus('in_progress', config, false);
+      expect(nextStatus).toBe('pipeline_step1');
+    });
+
+    it('should go to next pipeline step when in middle of pipeline', () => {
+      const config: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 0,
+            instructions: 'Instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+          {
+            id: 'step2',
+            name: 'Step 2',
+            order: 1,
+            instructions: 'Instructions',
+            colorClass: 'green',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      const nextStatus = pipelineService.getNextStatus('pipeline_step1', config, false);
+      expect(nextStatus).toBe('pipeline_step2');
+    });
+
+    it('should go to final status when completing last pipeline step', () => {
+      const config: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 0,
+            instructions: 'Instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      const nextStatus = pipelineService.getNextStatus('pipeline_step1', config, false);
+      expect(nextStatus).toBe('verified');
+    });
+
+    it('should go to waiting_approval when completing last step with skipTests', () => {
+      const config: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 0,
+            instructions: 'Instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      const nextStatus = pipelineService.getNextStatus('pipeline_step1', config, true);
+      expect(nextStatus).toBe('waiting_approval');
+    });
+
+    it('should handle invalid pipeline step ID gracefully', () => {
+      const config: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 0,
+            instructions: 'Instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      const nextStatus = pipelineService.getNextStatus('pipeline_nonexistent', config, false);
+      expect(nextStatus).toBe('verified');
+    });
+
+    it('should preserve other statuses unchanged', () => {
+      const config: PipelineConfig = {
+        version: 1,
+        steps: [],
+      };
+
+      expect(pipelineService.getNextStatus('backlog', config, false)).toBe('backlog');
+      expect(pipelineService.getNextStatus('waiting_approval', config, false)).toBe(
+        'waiting_approval'
+      );
+      expect(pipelineService.getNextStatus('verified', config, false)).toBe('verified');
+      expect(pipelineService.getNextStatus('completed', config, false)).toBe('completed');
+    });
+
+    it('should sort steps by order when determining next status', () => {
+      const config: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step2',
+            name: 'Step 2',
+            order: 1,
+            instructions: 'Instructions',
+            colorClass: 'green',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 0,
+            instructions: 'Instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      const nextStatus = pipelineService.getNextStatus('in_progress', config, false);
+      expect(nextStatus).toBe('pipeline_step1'); // Should use step1 (order 0), not step2
+    });
+
+    describe('with exclusions', () => {
+      it('should skip excluded step when coming from in_progress', () => {
+        const config: PipelineConfig = {
+          version: 1,
+          steps: [
+            {
+              id: 'step1',
+              name: 'Step 1',
+              order: 0,
+              instructions: 'Instructions',
+              colorClass: 'blue',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+            {
+              id: 'step2',
+              name: 'Step 2',
+              order: 1,
+              instructions: 'Instructions',
+              colorClass: 'green',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+          ],
+        };
+
+        const nextStatus = pipelineService.getNextStatus('in_progress', config, false, ['step1']);
+        expect(nextStatus).toBe('pipeline_step2'); // Should skip step1 and go to step2
+      });
+
+      it('should skip excluded step when moving between steps', () => {
+        const config: PipelineConfig = {
+          version: 1,
+          steps: [
+            {
+              id: 'step1',
+              name: 'Step 1',
+              order: 0,
+              instructions: 'Instructions',
+              colorClass: 'blue',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+            {
+              id: 'step2',
+              name: 'Step 2',
+              order: 1,
+              instructions: 'Instructions',
+              colorClass: 'green',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+            {
+              id: 'step3',
+              name: 'Step 3',
+              order: 2,
+              instructions: 'Instructions',
+              colorClass: 'red',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+          ],
+        };
+
+        const nextStatus = pipelineService.getNextStatus('pipeline_step1', config, false, [
+          'step2',
+        ]);
+        expect(nextStatus).toBe('pipeline_step3'); // Should skip step2 and go to step3
+      });
+
+      it('should go to final status when all remaining steps are excluded', () => {
+        const config: PipelineConfig = {
+          version: 1,
+          steps: [
+            {
+              id: 'step1',
+              name: 'Step 1',
+              order: 0,
+              instructions: 'Instructions',
+              colorClass: 'blue',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+            {
+              id: 'step2',
+              name: 'Step 2',
+              order: 1,
+              instructions: 'Instructions',
+              colorClass: 'green',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+          ],
+        };
+
+        const nextStatus = pipelineService.getNextStatus('pipeline_step1', config, false, [
+          'step2',
+        ]);
+        expect(nextStatus).toBe('verified'); // No more steps after exclusion
+      });
+
+      it('should go to waiting_approval when all remaining steps excluded and skipTests is true', () => {
+        const config: PipelineConfig = {
+          version: 1,
+          steps: [
+            {
+              id: 'step1',
+              name: 'Step 1',
+              order: 0,
+              instructions: 'Instructions',
+              colorClass: 'blue',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+            {
+              id: 'step2',
+              name: 'Step 2',
+              order: 1,
+              instructions: 'Instructions',
+              colorClass: 'green',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+          ],
+        };
+
+        const nextStatus = pipelineService.getNextStatus('pipeline_step1', config, true, ['step2']);
+        expect(nextStatus).toBe('waiting_approval');
+      });
+
+      it('should go to final status when all steps are excluded from in_progress', () => {
+        const config: PipelineConfig = {
+          version: 1,
+          steps: [
+            {
+              id: 'step1',
+              name: 'Step 1',
+              order: 0,
+              instructions: 'Instructions',
+              colorClass: 'blue',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+            {
+              id: 'step2',
+              name: 'Step 2',
+              order: 1,
+              instructions: 'Instructions',
+              colorClass: 'green',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+          ],
+        };
+
+        const nextStatus = pipelineService.getNextStatus('in_progress', config, false, [
+          'step1',
+          'step2',
+        ]);
+        expect(nextStatus).toBe('verified');
+      });
+
+      it('should handle empty exclusions array like no exclusions', () => {
+        const config: PipelineConfig = {
+          version: 1,
+          steps: [
+            {
+              id: 'step1',
+              name: 'Step 1',
+              order: 0,
+              instructions: 'Instructions',
+              colorClass: 'blue',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+          ],
+        };
+
+        const nextStatus = pipelineService.getNextStatus('in_progress', config, false, []);
+        expect(nextStatus).toBe('pipeline_step1');
+      });
+
+      it('should handle undefined exclusions like no exclusions', () => {
+        const config: PipelineConfig = {
+          version: 1,
+          steps: [
+            {
+              id: 'step1',
+              name: 'Step 1',
+              order: 0,
+              instructions: 'Instructions',
+              colorClass: 'blue',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+          ],
+        };
+
+        const nextStatus = pipelineService.getNextStatus('in_progress', config, false, undefined);
+        expect(nextStatus).toBe('pipeline_step1');
+      });
+
+      it('should skip multiple excluded steps in sequence', () => {
+        const config: PipelineConfig = {
+          version: 1,
+          steps: [
+            {
+              id: 'step1',
+              name: 'Step 1',
+              order: 0,
+              instructions: 'Instructions',
+              colorClass: 'blue',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+            {
+              id: 'step2',
+              name: 'Step 2',
+              order: 1,
+              instructions: 'Instructions',
+              colorClass: 'green',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+            {
+              id: 'step3',
+              name: 'Step 3',
+              order: 2,
+              instructions: 'Instructions',
+              colorClass: 'red',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+            {
+              id: 'step4',
+              name: 'Step 4',
+              order: 3,
+              instructions: 'Instructions',
+              colorClass: 'yellow',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+          ],
+        };
+
+        // Exclude step2 and step3
+        const nextStatus = pipelineService.getNextStatus('pipeline_step1', config, false, [
+          'step2',
+          'step3',
+        ]);
+        expect(nextStatus).toBe('pipeline_step4'); // Should skip step2 and step3
+      });
+
+      it('should handle exclusion of non-existent step IDs gracefully', () => {
+        const config: PipelineConfig = {
+          version: 1,
+          steps: [
+            {
+              id: 'step1',
+              name: 'Step 1',
+              order: 0,
+              instructions: 'Instructions',
+              colorClass: 'blue',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+            {
+              id: 'step2',
+              name: 'Step 2',
+              order: 1,
+              instructions: 'Instructions',
+              colorClass: 'green',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+          ],
+        };
+
+        // Exclude a non-existent step - should have no effect
+        const nextStatus = pipelineService.getNextStatus('in_progress', config, false, [
+          'nonexistent',
+        ]);
+        expect(nextStatus).toBe('pipeline_step1');
+      });
+
+      it('should find next valid step when current step becomes excluded mid-flow', () => {
+        const config: PipelineConfig = {
+          version: 1,
+          steps: [
+            {
+              id: 'step1',
+              name: 'Step 1',
+              order: 0,
+              instructions: 'Instructions',
+              colorClass: 'blue',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+            {
+              id: 'step2',
+              name: 'Step 2',
+              order: 1,
+              instructions: 'Instructions',
+              colorClass: 'green',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+            {
+              id: 'step3',
+              name: 'Step 3',
+              order: 2,
+              instructions: 'Instructions',
+              colorClass: 'red',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+          ],
+        };
+
+        // Feature is at step1 but step1 is now excluded - should find next valid step
+        const nextStatus = pipelineService.getNextStatus('pipeline_step1', config, false, [
+          'step1',
+          'step2',
+        ]);
+        expect(nextStatus).toBe('pipeline_step3');
+      });
+
+      it('should go to final status when current step is excluded and no steps remain', () => {
+        const config: PipelineConfig = {
+          version: 1,
+          steps: [
+            {
+              id: 'step1',
+              name: 'Step 1',
+              order: 0,
+              instructions: 'Instructions',
+              colorClass: 'blue',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+            {
+              id: 'step2',
+              name: 'Step 2',
+              order: 1,
+              instructions: 'Instructions',
+              colorClass: 'green',
+              createdAt: '2024-01-01T00:00:00.000Z',
+              updatedAt: '2024-01-01T00:00:00.000Z',
+            },
+          ],
+        };
+
+        // Feature is at step1 but both steps are excluded
+        const nextStatus = pipelineService.getNextStatus('pipeline_step1', config, false, [
+          'step1',
+          'step2',
+        ]);
+        expect(nextStatus).toBe('verified');
+      });
+    });
+  });
+
+  describe('getStep', () => {
+    it('should return step by ID', async () => {
+      const existingConfig: PipelineConfig = {
+        version: 1,
+        steps: [
+          {
+            id: 'step1',
+            name: 'Step 1',
+            order: 0,
+            instructions: 'Instructions',
+            colorClass: 'blue',
+            createdAt: '2024-01-01T00:00:00.000Z',
+            updatedAt: '2024-01-01T00:00:00.000Z',
+          },
+        ],
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingConfig) as any);
+
+      const step = await pipelineService.getStep(testProjectDir, 'step1');
+
+      expect(step).not.toBeNull();
+      expect(step?.id).toBe('step1');
+      expect(step?.name).toBe('Step 1');
+    });
+
+    it('should return null if step not found', async () => {
+      const existingConfig: PipelineConfig = {
+        version: 1,
+        steps: [],
+      };
+
+      vi.mocked(secureFs.readFile).mockResolvedValue(JSON.stringify(existingConfig) as any);
+
+      const step = await pipelineService.getStep(testProjectDir, 'nonexistent');
+
+      expect(step).toBeNull();
+    });
+  });
+
+  describe('isPipelineStatus', () => {
+    it('should return true for pipeline statuses', () => {
+      expect(pipelineService.isPipelineStatus('pipeline_step1')).toBe(true);
+      expect(pipelineService.isPipelineStatus('pipeline_abc123')).toBe(true);
+    });
+
+    it('should return false for non-pipeline statuses', () => {
+      expect(pipelineService.isPipelineStatus('in_progress')).toBe(false);
+      expect(pipelineService.isPipelineStatus('waiting_approval')).toBe(false);
+      expect(pipelineService.isPipelineStatus('verified')).toBe(false);
+      expect(pipelineService.isPipelineStatus('backlog')).toBe(false);
+      expect(pipelineService.isPipelineStatus('completed')).toBe(false);
+    });
+  });
+
+  describe('getStepIdFromStatus', () => {
+    it('should extract step ID from pipeline status', () => {
+      expect(pipelineService.getStepIdFromStatus('pipeline_step1')).toBe('step1');
+      expect(pipelineService.getStepIdFromStatus('pipeline_abc123')).toBe('abc123');
+    });
+
+    it('should return null for non-pipeline statuses', () => {
+      expect(pipelineService.getStepIdFromStatus('in_progress')).toBeNull();
+      expect(pipelineService.getStepIdFromStatus('waiting_approval')).toBeNull();
+      expect(pipelineService.getStepIdFromStatus('verified')).toBeNull();
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/pipeline-summary-accumulation.test.ts b/temp_repo/apps/server/tests/unit/services/pipeline-summary-accumulation.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..23668a8be0cb21990606402efaa14c0e6266650d
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/pipeline-summary-accumulation.test.ts
@@ -0,0 +1,598 @@
+/**
+ * Integration tests for pipeline summary accumulation across multiple steps.
+ *
+ * These tests verify the end-to-end behavior where:
+ * 1. Each pipeline step produces a summary via agent-executor → callbacks.saveFeatureSummary()
+ * 2. FeatureStateManager.saveFeatureSummary() accumulates summaries with step headers
+ * 3. The emitted auto_mode_summary event contains the full accumulated summary
+ * 4. The UI can use feature.summary (accumulated) instead of extractSummary() (last-only)
+ */
+
+import { describe, it, expect, beforeEach, vi, type Mock } from 'vitest';
+import { FeatureStateManager } from '@/services/feature-state-manager.js';
+import type { Feature } from '@automaker/types';
+import type { EventEmitter } from '@/lib/events.js';
+import type { FeatureLoader } from '@/services/feature-loader.js';
+import { atomicWriteJson, readJsonWithRecovery } from '@automaker/utils';
+import { getFeatureDir } from '@automaker/platform';
+import { pipelineService } from '@/services/pipeline-service.js';
+
+// Mock dependencies
+vi.mock('@/lib/secure-fs.js', () => ({
+  readFile: vi.fn(),
+  readdir: vi.fn(),
+}));
+
+vi.mock('@automaker/utils', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@automaker/utils')>();
+  return {
+    ...actual,
+    atomicWriteJson: vi.fn(),
+    readJsonWithRecovery: vi.fn(),
+    logRecoveryWarning: vi.fn(),
+  };
+});
+
+vi.mock('@automaker/platform', () => ({
+  getFeatureDir: vi.fn(),
+  getFeaturesDir: vi.fn(),
+}));
+
+vi.mock('@/services/notification-service.js', () => ({
+  getNotificationService: vi.fn(() => ({
+    createNotification: vi.fn(),
+  })),
+}));
+
+vi.mock('@/services/pipeline-service.js', () => ({
+  pipelineService: {
+    getStepIdFromStatus: vi.fn((status: string) => {
+      if (status.startsWith('pipeline_')) return status.replace('pipeline_', '');
+      return null;
+    }),
+    getStep: vi.fn(),
+  },
+}));
+
+describe('Pipeline Summary Accumulation (Integration)', () => {
+  let manager: FeatureStateManager;
+  let mockEvents: EventEmitter;
+
+  const baseFeature: Feature = {
+    id: 'pipeline-feature-1',
+    name: 'Pipeline Feature',
+    title: 'Pipeline Feature Title',
+    description: 'A feature going through pipeline steps',
+    status: 'pipeline_step1',
+    createdAt: '2024-01-01T00:00:00Z',
+    updatedAt: '2024-01-01T00:00:00Z',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockEvents = {
+      emit: vi.fn(),
+      subscribe: vi.fn(() => vi.fn()),
+    };
+
+    const mockFeatureLoader = {
+      syncFeatureToAppSpec: vi.fn(),
+    } as unknown as FeatureLoader;
+
+    manager = new FeatureStateManager(mockEvents, mockFeatureLoader);
+
+    (getFeatureDir as Mock).mockReturnValue('/project/.automaker/features/pipeline-feature-1');
+  });
+
+  describe('multi-step pipeline summary accumulation', () => {
+    it('should accumulate summaries across three pipeline steps in chronological order', async () => {
+      // --- Step 1: Implementation ---
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Implementation', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step1', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary(
+        '/project',
+        'pipeline-feature-1',
+        '## Changes\n- Added auth module\n- Created user service'
+      );
+
+      const step1Feature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(step1Feature.summary).toBe(
+        '### Implementation\n\n## Changes\n- Added auth module\n- Created user service'
+      );
+
+      // --- Step 2: Code Review ---
+      vi.clearAllMocks();
+      (getFeatureDir as Mock).mockReturnValue('/project/.automaker/features/pipeline-feature-1');
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Code Review', id: 'step2' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step2', summary: step1Feature.summary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary(
+        '/project',
+        'pipeline-feature-1',
+        '## Review Findings\n- Style issues fixed\n- Added error handling'
+      );
+
+      const step2Feature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+
+      // --- Step 3: Testing ---
+      vi.clearAllMocks();
+      (getFeatureDir as Mock).mockReturnValue('/project/.automaker/features/pipeline-feature-1');
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'step3' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step3', summary: step2Feature.summary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary(
+        '/project',
+        'pipeline-feature-1',
+        '## Test Results\n- 42 tests pass\n- 98% coverage'
+      );
+
+      const finalFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+
+      // Verify the full accumulated summary has all three steps separated by ---
+      const expectedSummary = [
+        '### Implementation',
+        '',
+        '## Changes',
+        '- Added auth module',
+        '- Created user service',
+        '',
+        '---',
+        '',
+        '### Code Review',
+        '',
+        '## Review Findings',
+        '- Style issues fixed',
+        '- Added error handling',
+        '',
+        '---',
+        '',
+        '### Testing',
+        '',
+        '## Test Results',
+        '- 42 tests pass',
+        '- 98% coverage',
+      ].join('\n');
+
+      expect(finalFeature.summary).toBe(expectedSummary);
+    });
+
+    it('should emit the full accumulated summary in auto_mode_summary event', async () => {
+      // Step 1
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Implementation', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step1', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', 'Step 1 output');
+
+      // Verify the event was emitted with correct data
+      expect(mockEvents.emit).toHaveBeenCalledWith('auto-mode:event', {
+        type: 'auto_mode_summary',
+        featureId: 'pipeline-feature-1',
+        projectPath: '/project',
+        summary: '### Implementation\n\nStep 1 output',
+      });
+
+      // Step 2 (with accumulated summary from step 1)
+      vi.clearAllMocks();
+      (getFeatureDir as Mock).mockReturnValue('/project/.automaker/features/pipeline-feature-1');
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'step2' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: {
+          ...baseFeature,
+          status: 'pipeline_step2',
+          summary: '### Implementation\n\nStep 1 output',
+        },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', 'Step 2 output');
+
+      // The event should contain the FULL accumulated summary, not just step 2
+      expect(mockEvents.emit).toHaveBeenCalledWith('auto-mode:event', {
+        type: 'auto_mode_summary',
+        featureId: 'pipeline-feature-1',
+        projectPath: '/project',
+        summary: '### Implementation\n\nStep 1 output\n\n---\n\n### Testing\n\nStep 2 output',
+      });
+    });
+  });
+
+  describe('edge cases in pipeline accumulation', () => {
+    it('should normalize a legacy implementation summary before appending pipeline output', async () => {
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Code Review', id: 'step2' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: {
+          ...baseFeature,
+          status: 'pipeline_step2',
+          summary: 'Implemented authentication and settings updates.',
+        },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', 'Reviewed and approved');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe(
+        '### Implementation\n\nImplemented authentication and settings updates.\n\n---\n\n### Code Review\n\nReviewed and approved'
+      );
+    });
+
+    it('should skip persistence when a pipeline step summary is empty', async () => {
+      const existingSummary = '### Step 1\n\nFirst step output';
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Step 2', id: 'step2' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step2', summary: existingSummary },
+        recovered: false,
+        source: 'main',
+      });
+
+      // Empty summary should be ignored to avoid persisting blank sections.
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', '');
+
+      expect(atomicWriteJson).not.toHaveBeenCalled();
+      expect(mockEvents.emit).not.toHaveBeenCalled();
+    });
+
+    it('should handle pipeline step name lookup failure with fallback', async () => {
+      (pipelineService.getStepIdFromStatus as Mock).mockImplementation(() => {
+        throw new Error('Pipeline config not loaded');
+      });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_code_review', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', 'Review output');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      // Fallback: capitalize words from status suffix
+      expect(savedFeature.summary).toBe('### Code Review\n\nReview output');
+    });
+
+    it('should handle summary with special markdown characters in pipeline mode', async () => {
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Implementation', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step1', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      const markdownSummary = [
+        '## Changes Made',
+        '- Fixed **critical bug** in `parser.ts`',
+        '- Added `validateInput()` function',
+        '',
+        '```typescript',
+        'const x = 1;',
+        '```',
+        '',
+        '| Column | Value |',
+        '|--------|-------|',
+        '| Tests  | Pass  |',
+      ].join('\n');
+
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', markdownSummary);
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe(`### Implementation\n\n${markdownSummary}`);
+      // Verify markdown is preserved
+      expect(savedFeature.summary).toContain('```typescript');
+      expect(savedFeature.summary).toContain('| Column | Value |');
+    });
+
+    it('should correctly handle rapid sequential pipeline steps without data loss', async () => {
+      // Simulate 5 rapid pipeline steps
+      const stepConfigs = [
+        { name: 'Planning', status: 'pipeline_step1', content: 'Plan created' },
+        { name: 'Implementation', status: 'pipeline_step2', content: 'Code written' },
+        { name: 'Code Review', status: 'pipeline_step3', content: 'Review complete' },
+        { name: 'Testing', status: 'pipeline_step4', content: 'All tests pass' },
+        { name: 'Refinement', status: 'pipeline_step5', content: 'Code polished' },
+      ];
+
+      let currentSummary: string | undefined = undefined;
+
+      for (const step of stepConfigs) {
+        vi.clearAllMocks();
+        (getFeatureDir as Mock).mockReturnValue('/project/.automaker/features/pipeline-feature-1');
+        (pipelineService.getStep as Mock).mockResolvedValue({
+          name: step.name,
+          id: step.status.replace('pipeline_', ''),
+        });
+        (readJsonWithRecovery as Mock).mockResolvedValue({
+          data: { ...baseFeature, status: step.status, summary: currentSummary },
+          recovered: false,
+          source: 'main',
+        });
+
+        await manager.saveFeatureSummary('/project', 'pipeline-feature-1', step.content);
+
+        currentSummary = ((atomicWriteJson as Mock).mock.calls[0][1] as Feature).summary;
+      }
+
+      // Final summary should contain all 5 steps
+      expect(currentSummary).toContain('### Planning');
+      expect(currentSummary).toContain('Plan created');
+      expect(currentSummary).toContain('### Implementation');
+      expect(currentSummary).toContain('Code written');
+      expect(currentSummary).toContain('### Code Review');
+      expect(currentSummary).toContain('Review complete');
+      expect(currentSummary).toContain('### Testing');
+      expect(currentSummary).toContain('All tests pass');
+      expect(currentSummary).toContain('### Refinement');
+      expect(currentSummary).toContain('Code polished');
+
+      // Verify there are exactly 4 separators (between 5 steps)
+      const separatorCount = (currentSummary!.match(/\n\n---\n\n/g) || []).length;
+      expect(separatorCount).toBe(4);
+    });
+  });
+
+  describe('UI summary display logic', () => {
+    it('should emit accumulated summary that UI can display directly (no extractSummary needed)', async () => {
+      // This test verifies the UI can use feature.summary directly
+      // without needing to call extractSummary() which only returns the last entry
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Implementation', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step1', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', 'First step');
+
+      const step1Summary = ((atomicWriteJson as Mock).mock.calls[0][1] as Feature).summary;
+
+      // Step 2
+      vi.clearAllMocks();
+      (getFeatureDir as Mock).mockReturnValue('/project/.automaker/features/pipeline-feature-1');
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'step2' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step2', summary: step1Summary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', 'Second step');
+
+      const emittedEvent = (mockEvents.emit as Mock).mock.calls[0][1];
+      const accumulatedSummary = emittedEvent.summary;
+
+      // The accumulated summary should contain BOTH steps
+      expect(accumulatedSummary).toContain('### Implementation');
+      expect(accumulatedSummary).toContain('First step');
+      expect(accumulatedSummary).toContain('### Testing');
+      expect(accumulatedSummary).toContain('Second step');
+    });
+
+    it('should handle single-step pipeline (no accumulation needed)', async () => {
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Implementation', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step1', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', 'Single step output');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe('### Implementation\n\nSingle step output');
+
+      // No separator should be present for single step
+      expect(savedFeature.summary).not.toContain('---');
+    });
+
+    it('should preserve chronological order of summaries', async () => {
+      // Step 1
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Alpha', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step1', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', 'First');
+
+      const step1Summary = ((atomicWriteJson as Mock).mock.calls[0][1] as Feature).summary;
+
+      // Step 2
+      vi.clearAllMocks();
+      (getFeatureDir as Mock).mockReturnValue('/project/.automaker/features/pipeline-feature-1');
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Beta', id: 'step2' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step2', summary: step1Summary },
+        recovered: false,
+        source: 'main',
+      });
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', 'Second');
+
+      const finalSummary = ((atomicWriteJson as Mock).mock.calls[0][1] as Feature).summary;
+
+      // Verify order: Alpha should come before Beta
+      const alphaIndex = finalSummary!.indexOf('### Alpha');
+      const betaIndex = finalSummary!.indexOf('### Beta');
+      expect(alphaIndex).toBeLessThan(betaIndex);
+    });
+  });
+
+  describe('non-pipeline features', () => {
+    it('should overwrite summary for non-pipeline features', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: {
+          ...baseFeature,
+          status: 'in_progress', // Non-pipeline status
+          summary: 'Old summary',
+        },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', 'New summary');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe('New summary');
+    });
+
+    it('should not add step headers for non-pipeline features', async () => {
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: {
+          ...baseFeature,
+          status: 'in_progress', // Non-pipeline status
+          summary: undefined,
+        },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', 'Simple summary');
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toBe('Simple summary');
+      expect(savedFeature.summary).not.toContain('###');
+    });
+  });
+
+  describe('summary content edge cases', () => {
+    it('should handle summary with unicode characters', async () => {
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step1', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      const unicodeSummary = 'Test results: ✅ 42 passed, ❌ 0 failed, 🎉 100% coverage';
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', unicodeSummary);
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toContain('✅');
+      expect(savedFeature.summary).toContain('❌');
+      expect(savedFeature.summary).toContain('🎉');
+    });
+
+    it('should handle very long summary content', async () => {
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Implementation', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step1', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      // Generate a very long summary (10KB+)
+      const longContent = 'This is a line of content.\n'.repeat(500);
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', longContent);
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary!.length).toBeGreaterThan(10000);
+    });
+
+    it('should handle summary with markdown tables', async () => {
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step1', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      const tableSummary = `
+## Test Results
+
+| Test Suite | Passed | Failed | Skipped |
+|------------|--------|--------|---------|
+| Unit       | 42     | 0      | 2       |
+| Integration| 15     | 0      | 0       |
+| E2E        | 8      | 1      | 0       |
+`;
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', tableSummary);
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toContain('| Test Suite |');
+      expect(savedFeature.summary).toContain('| Unit       | 42     |');
+    });
+
+    it('should handle summary with nested markdown headers', async () => {
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Implementation', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step1', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      const nestedSummary = `
+## Main Changes
+### Backend
+- Added API endpoints
+### Frontend
+- Created components
+#### Deep nesting
+- Minor fix
+`;
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', nestedSummary);
+
+      const savedFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      expect(savedFeature.summary).toContain('### Backend');
+      expect(savedFeature.summary).toContain('### Frontend');
+      expect(savedFeature.summary).toContain('#### Deep nesting');
+    });
+  });
+
+  describe('persistence and event ordering', () => {
+    it('should persist summary BEFORE emitting event', async () => {
+      const callOrder: string[] = [];
+
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step1', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+      (atomicWriteJson as Mock).mockImplementation(async () => {
+        callOrder.push('persist');
+      });
+      (mockEvents.emit as Mock).mockImplementation(() => {
+        callOrder.push('emit');
+      });
+
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', 'Summary');
+
+      expect(callOrder).toEqual(['persist', 'emit']);
+    });
+
+    it('should not emit event if persistence fails (error is caught silently)', async () => {
+      // Note: saveFeatureSummary catches errors internally and logs them
+      // It does NOT re-throw, so the method completes successfully even on error
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'step1' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_step1', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+      (atomicWriteJson as Mock).mockRejectedValue(new Error('Disk full'));
+
+      // Method completes without throwing (error is logged internally)
+      await manager.saveFeatureSummary('/project', 'pipeline-feature-1', 'Summary');
+
+      // Event should NOT be emitted since persistence failed
+      expect(mockEvents.emit).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/plan-approval-service.test.ts b/temp_repo/apps/server/tests/unit/services/plan-approval-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d5379755a6b5dba5fb639c999d3f1ec650dd58da
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/plan-approval-service.test.ts
@@ -0,0 +1,470 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+import { PlanApprovalService } from '@/services/plan-approval-service.js';
+import type { TypedEventBus } from '@/services/typed-event-bus.js';
+import type { FeatureStateManager } from '@/services/feature-state-manager.js';
+import type { SettingsService } from '@/services/settings-service.js';
+import type { Feature } from '@automaker/types';
+
+describe('PlanApprovalService', () => {
+  let service: PlanApprovalService;
+  let mockEventBus: TypedEventBus;
+  let mockFeatureStateManager: FeatureStateManager;
+  let mockSettingsService: SettingsService | null;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+
+    mockEventBus = {
+      emitAutoModeEvent: vi.fn(),
+      emit: vi.fn(),
+      subscribe: vi.fn(() => vi.fn()),
+      getUnderlyingEmitter: vi.fn(),
+    } as unknown as TypedEventBus;
+
+    mockFeatureStateManager = {
+      loadFeature: vi.fn(),
+      updateFeatureStatus: vi.fn(),
+      updateFeaturePlanSpec: vi.fn(),
+    } as unknown as FeatureStateManager;
+
+    mockSettingsService = {
+      getProjectSettings: vi.fn().mockResolvedValue({}),
+    } as unknown as SettingsService;
+
+    service = new PlanApprovalService(mockEventBus, mockFeatureStateManager, mockSettingsService);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  // Helper to flush pending promises
+  const flushPromises = () => vi.runAllTimersAsync();
+
+  describe('waitForApproval', () => {
+    it('should create pending entry and return Promise', async () => {
+      const approvalPromise = service.waitForApproval('feature-1', '/project');
+      // Flush async operations so the approval is registered
+      await vi.advanceTimersByTimeAsync(0);
+
+      expect(service.hasPendingApproval('feature-1')).toBe(true);
+      expect(approvalPromise).toBeInstanceOf(Promise);
+    });
+
+    it('should timeout and reject after configured period', async () => {
+      const approvalPromise = service.waitForApproval('feature-1', '/project');
+      // Attach catch to prevent unhandled rejection warning (will be properly asserted below)
+      approvalPromise.catch(() => {});
+      // Flush the async initialization
+      await vi.advanceTimersByTimeAsync(0);
+
+      // Advance time by 30 minutes
+      await vi.advanceTimersByTimeAsync(30 * 60 * 1000);
+
+      await expect(approvalPromise).rejects.toThrow(
+        'Plan approval timed out after 30 minutes - feature execution cancelled'
+      );
+      expect(service.hasPendingApproval('feature-1')).toBe(false);
+    });
+
+    it('should use configured timeout from project settings', async () => {
+      // Configure 10 minute timeout
+      vi.mocked(mockSettingsService!.getProjectSettings).mockResolvedValue({
+        planApprovalTimeoutMs: 10 * 60 * 1000,
+      } as never);
+
+      const approvalPromise = service.waitForApproval('feature-1', '/project');
+      // Attach catch to prevent unhandled rejection warning (will be properly asserted below)
+      approvalPromise.catch(() => {});
+      // Flush the async initialization
+      await vi.advanceTimersByTimeAsync(0);
+
+      // Advance time by 10 minutes - should timeout
+      await vi.advanceTimersByTimeAsync(10 * 60 * 1000);
+
+      await expect(approvalPromise).rejects.toThrow(
+        'Plan approval timed out after 10 minutes - feature execution cancelled'
+      );
+    });
+
+    it('should fall back to default timeout when settings service is null', async () => {
+      // Create service without settings service
+      const serviceNoSettings = new PlanApprovalService(
+        mockEventBus,
+        mockFeatureStateManager,
+        null
+      );
+
+      const approvalPromise = serviceNoSettings.waitForApproval('feature-1', '/project');
+      // Attach catch to prevent unhandled rejection warning (will be properly asserted below)
+      approvalPromise.catch(() => {});
+      // Flush async
+      await vi.advanceTimersByTimeAsync(0);
+
+      // Advance by 29 minutes - should not timeout yet
+      await vi.advanceTimersByTimeAsync(29 * 60 * 1000);
+      expect(serviceNoSettings.hasPendingApproval('feature-1')).toBe(true);
+
+      // Advance by 1 more minute (total 30) - should timeout
+      await vi.advanceTimersByTimeAsync(1 * 60 * 1000);
+
+      await expect(approvalPromise).rejects.toThrow('Plan approval timed out');
+    });
+  });
+
+  describe('resolveApproval', () => {
+    it('should resolve Promise correctly when approved=true', async () => {
+      const approvalPromise = service.waitForApproval('feature-1', '/project');
+      await vi.advanceTimersByTimeAsync(0);
+
+      const result = await service.resolveApproval('feature-1', true, {
+        editedPlan: 'Updated plan',
+        feedback: 'Looks good!',
+      });
+
+      expect(result).toEqual({ success: true });
+
+      const approval = await approvalPromise;
+      expect(approval).toEqual({
+        approved: true,
+        editedPlan: 'Updated plan',
+        feedback: 'Looks good!',
+      });
+
+      expect(service.hasPendingApproval('feature-1')).toBe(false);
+    });
+
+    it('should resolve Promise correctly when approved=false', async () => {
+      const approvalPromise = service.waitForApproval('feature-1', '/project');
+      await vi.advanceTimersByTimeAsync(0);
+
+      const result = await service.resolveApproval('feature-1', false, {
+        feedback: 'Need more details',
+      });
+
+      expect(result).toEqual({ success: true });
+
+      const approval = await approvalPromise;
+      expect(approval).toEqual({
+        approved: false,
+        editedPlan: undefined,
+        feedback: 'Need more details',
+      });
+    });
+
+    it('should emit plan_rejected event when rejected with feedback', async () => {
+      service.waitForApproval('feature-1', '/project');
+      await vi.advanceTimersByTimeAsync(0);
+
+      await service.resolveApproval('feature-1', false, {
+        feedback: 'Need changes',
+      });
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith('plan_rejected', {
+        featureId: 'feature-1',
+        projectPath: '/project',
+        feedback: 'Need changes',
+      });
+    });
+
+    it('should update planSpec status to approved when approved', async () => {
+      service.waitForApproval('feature-1', '/project');
+      await vi.advanceTimersByTimeAsync(0);
+
+      await service.resolveApproval('feature-1', true, {
+        editedPlan: 'New plan content',
+      });
+
+      expect(mockFeatureStateManager.updateFeaturePlanSpec).toHaveBeenCalledWith(
+        '/project',
+        'feature-1',
+        expect.objectContaining({
+          status: 'approved',
+          reviewedByUser: true,
+          content: 'New plan content',
+        })
+      );
+    });
+
+    it('should update planSpec status to rejected when rejected', async () => {
+      service.waitForApproval('feature-1', '/project');
+      await vi.advanceTimersByTimeAsync(0);
+
+      await service.resolveApproval('feature-1', false);
+
+      expect(mockFeatureStateManager.updateFeaturePlanSpec).toHaveBeenCalledWith(
+        '/project',
+        'feature-1',
+        expect.objectContaining({
+          status: 'rejected',
+          reviewedByUser: true,
+        })
+      );
+    });
+
+    it('should clear timeout on normal resolution (no double-fire)', async () => {
+      const approvalPromise = service.waitForApproval('feature-1', '/project');
+      await vi.advanceTimersByTimeAsync(0);
+
+      // Advance 10 minutes then resolve
+      await vi.advanceTimersByTimeAsync(10 * 60 * 1000);
+      await service.resolveApproval('feature-1', true);
+
+      const approval = await approvalPromise;
+      expect(approval.approved).toBe(true);
+
+      // Advance past the 30 minute mark - should NOT reject
+      await vi.advanceTimersByTimeAsync(25 * 60 * 1000);
+
+      // If timeout wasn't cleared, we'd see issues
+      expect(service.hasPendingApproval('feature-1')).toBe(false);
+    });
+
+    it('should return error when no pending approval and no recovery possible', async () => {
+      const result = await service.resolveApproval('non-existent', true);
+
+      expect(result).toEqual({
+        success: false,
+        error: 'No pending approval for feature non-existent',
+      });
+    });
+  });
+
+  describe('recovery path', () => {
+    it('should return needsRecovery=true when planSpec.status is generated and approved', async () => {
+      const mockFeature: Feature = {
+        id: 'feature-1',
+        name: 'Test Feature',
+        title: 'Test Feature',
+        description: 'Test',
+        status: 'in_progress',
+        createdAt: '2024-01-01T00:00:00Z',
+        updatedAt: '2024-01-01T00:00:00Z',
+        planSpec: {
+          status: 'generated',
+          version: 1,
+          reviewedByUser: false,
+          content: 'Original plan',
+        },
+      };
+
+      vi.mocked(mockFeatureStateManager.loadFeature).mockResolvedValue(mockFeature);
+
+      // No pending approval in Map, but feature has generated planSpec
+      const result = await service.resolveApproval('feature-1', true, {
+        projectPath: '/project',
+        editedPlan: 'Edited plan',
+      });
+
+      expect(result).toEqual({ success: true, needsRecovery: true });
+
+      // Should update planSpec
+      expect(mockFeatureStateManager.updateFeaturePlanSpec).toHaveBeenCalledWith(
+        '/project',
+        'feature-1',
+        expect.objectContaining({
+          status: 'approved',
+          content: 'Edited plan',
+        })
+      );
+    });
+
+    it('should handle recovery rejection correctly', async () => {
+      const mockFeature: Feature = {
+        id: 'feature-1',
+        name: 'Test Feature',
+        title: 'Test Feature',
+        description: 'Test',
+        status: 'in_progress',
+        createdAt: '2024-01-01T00:00:00Z',
+        updatedAt: '2024-01-01T00:00:00Z',
+        planSpec: {
+          status: 'generated',
+          version: 1,
+          reviewedByUser: false,
+        },
+      };
+
+      vi.mocked(mockFeatureStateManager.loadFeature).mockResolvedValue(mockFeature);
+
+      const result = await service.resolveApproval('feature-1', false, {
+        projectPath: '/project',
+        feedback: 'Rejected via recovery',
+      });
+
+      expect(result).toEqual({ success: true }); // No needsRecovery for rejections
+
+      // Should update planSpec to rejected
+      expect(mockFeatureStateManager.updateFeaturePlanSpec).toHaveBeenCalledWith(
+        '/project',
+        'feature-1',
+        expect.objectContaining({
+          status: 'rejected',
+          reviewedByUser: true,
+        })
+      );
+
+      // Should update feature status to backlog
+      expect(mockFeatureStateManager.updateFeatureStatus).toHaveBeenCalledWith(
+        '/project',
+        'feature-1',
+        'backlog'
+      );
+
+      // Should emit plan_rejected event
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith('plan_rejected', {
+        featureId: 'feature-1',
+        projectPath: '/project',
+        feedback: 'Rejected via recovery',
+      });
+    });
+
+    it('should not trigger recovery when planSpec.status is not generated', async () => {
+      const mockFeature: Feature = {
+        id: 'feature-1',
+        name: 'Test Feature',
+        title: 'Test Feature',
+        description: 'Test',
+        status: 'pending',
+        createdAt: '2024-01-01T00:00:00Z',
+        updatedAt: '2024-01-01T00:00:00Z',
+        planSpec: {
+          status: 'pending', // Not 'generated'
+          version: 1,
+          reviewedByUser: false,
+        },
+      };
+
+      vi.mocked(mockFeatureStateManager.loadFeature).mockResolvedValue(mockFeature);
+
+      const result = await service.resolveApproval('feature-1', true, {
+        projectPath: '/project',
+      });
+
+      expect(result).toEqual({
+        success: false,
+        error: 'No pending approval for feature feature-1',
+      });
+    });
+  });
+
+  describe('cancelApproval', () => {
+    it('should reject pending Promise with cancellation error', async () => {
+      const approvalPromise = service.waitForApproval('feature-1', '/project');
+      await vi.advanceTimersByTimeAsync(0);
+
+      service.cancelApproval('feature-1');
+
+      await expect(approvalPromise).rejects.toThrow(
+        'Plan approval cancelled - feature was stopped'
+      );
+      expect(service.hasPendingApproval('feature-1')).toBe(false);
+    });
+
+    it('should clear timeout on cancellation', async () => {
+      const approvalPromise = service.waitForApproval('feature-1', '/project');
+      await vi.advanceTimersByTimeAsync(0);
+
+      service.cancelApproval('feature-1');
+
+      // Verify rejection happened
+      await expect(approvalPromise).rejects.toThrow();
+
+      // Advance past timeout - should not cause any issues
+      await vi.advanceTimersByTimeAsync(35 * 60 * 1000);
+
+      // No additional errors should occur
+      expect(service.hasPendingApproval('feature-1')).toBe(false);
+    });
+
+    it('should do nothing when no pending approval exists', () => {
+      // Should not throw
+      expect(() => service.cancelApproval('non-existent')).not.toThrow();
+    });
+  });
+
+  describe('hasPendingApproval', () => {
+    it('should return true when approval is pending', async () => {
+      service.waitForApproval('feature-1', '/project');
+      await vi.advanceTimersByTimeAsync(0);
+
+      expect(service.hasPendingApproval('feature-1')).toBe(true);
+    });
+
+    it('should return false when no approval is pending', () => {
+      expect(service.hasPendingApproval('feature-1')).toBe(false);
+    });
+
+    it('should return false after approval is resolved', async () => {
+      service.waitForApproval('feature-1', '/project');
+      await vi.advanceTimersByTimeAsync(0);
+      await service.resolveApproval('feature-1', true);
+
+      expect(service.hasPendingApproval('feature-1')).toBe(false);
+    });
+
+    it('should return false after approval is cancelled', async () => {
+      const promise = service.waitForApproval('feature-1', '/project');
+      await vi.advanceTimersByTimeAsync(0);
+      service.cancelApproval('feature-1');
+
+      // Consume the rejection
+      await promise.catch(() => {});
+
+      expect(service.hasPendingApproval('feature-1')).toBe(false);
+    });
+  });
+
+  describe('getTimeoutMs (via waitForApproval behavior)', () => {
+    it('should return configured value from project settings', async () => {
+      vi.mocked(mockSettingsService!.getProjectSettings).mockResolvedValue({
+        planApprovalTimeoutMs: 5 * 60 * 1000, // 5 minutes
+      } as never);
+
+      const approvalPromise = service.waitForApproval('feature-1', '/project');
+      // Attach catch to prevent unhandled rejection warning (will be properly asserted below)
+      approvalPromise.catch(() => {});
+      await vi.advanceTimersByTimeAsync(0);
+
+      // Should not timeout at 4 minutes
+      await vi.advanceTimersByTimeAsync(4 * 60 * 1000);
+      expect(service.hasPendingApproval('feature-1')).toBe(true);
+
+      // Should timeout at 5 minutes
+      await vi.advanceTimersByTimeAsync(1 * 60 * 1000);
+      await expect(approvalPromise).rejects.toThrow('timed out after 5 minutes');
+    });
+
+    it('should return default when settings service throws', async () => {
+      vi.mocked(mockSettingsService!.getProjectSettings).mockRejectedValue(new Error('Failed'));
+
+      const approvalPromise = service.waitForApproval('feature-1', '/project');
+      // Attach catch to prevent unhandled rejection warning (will be properly asserted below)
+      approvalPromise.catch(() => {});
+      await vi.advanceTimersByTimeAsync(0);
+
+      // Should use default 30 minute timeout
+      await vi.advanceTimersByTimeAsync(29 * 60 * 1000);
+      expect(service.hasPendingApproval('feature-1')).toBe(true);
+
+      await vi.advanceTimersByTimeAsync(1 * 60 * 1000);
+      await expect(approvalPromise).rejects.toThrow('timed out after 30 minutes');
+    });
+
+    it('should return default when planApprovalTimeoutMs is invalid', async () => {
+      vi.mocked(mockSettingsService!.getProjectSettings).mockResolvedValue({
+        planApprovalTimeoutMs: -1, // Invalid
+      } as never);
+
+      const approvalPromise = service.waitForApproval('feature-1', '/project');
+      // Attach catch to prevent unhandled rejection warning (will be properly asserted below)
+      approvalPromise.catch(() => {});
+      await vi.advanceTimersByTimeAsync(0);
+
+      // Should use default 30 minute timeout
+      await vi.advanceTimersByTimeAsync(30 * 60 * 1000);
+      await expect(approvalPromise).rejects.toThrow('timed out after 30 minutes');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/recovery-service.test.ts b/temp_repo/apps/server/tests/unit/services/recovery-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cd99fc088dc0e02e5baedb0e4b190a009af39555
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/recovery-service.test.ts
@@ -0,0 +1,792 @@
+/**
+ * Unit tests for RecoveryService
+ *
+ * Tests crash recovery and feature resumption functionality:
+ * - Execution state persistence (save/load/clear)
+ * - Context detection (agent-output.md exists)
+ * - Feature resumption flow (pipeline vs non-pipeline)
+ * - Interrupted feature detection and batch resumption
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import path from 'path';
+import { RecoveryService, DEFAULT_EXECUTION_STATE } from '@/services/recovery-service.js';
+import type { Feature } from '@automaker/types';
+
+/**
+ * Helper to normalize paths for cross-platform test compatibility.
+ * Uses path.normalize (not path.resolve) to match path.join behavior in production code.
+ */
+const normalizePath = (p: string): string => path.normalize(p);
+
+// Mock dependencies
+vi.mock('@automaker/utils', () => ({
+  createLogger: () => ({
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    debug: vi.fn(),
+  }),
+  readJsonWithRecovery: vi.fn().mockResolvedValue({ data: null, wasRecovered: false }),
+  logRecoveryWarning: vi.fn(),
+  DEFAULT_BACKUP_COUNT: 5,
+}));
+
+vi.mock('@automaker/platform', () => ({
+  getFeatureDir: (projectPath: string, featureId: string) =>
+    `${projectPath}/.automaker/features/${featureId}`,
+  getFeaturesDir: (projectPath: string) => `${projectPath}/.automaker/features`,
+  getExecutionStatePath: (projectPath: string) => `${projectPath}/.automaker/execution-state.json`,
+  ensureAutomakerDir: vi.fn().mockResolvedValue(undefined),
+}));
+
+vi.mock('@/lib/secure-fs.js', () => ({
+  access: vi.fn().mockRejectedValue(new Error('ENOENT')),
+  readFile: vi.fn().mockRejectedValue(new Error('ENOENT')),
+  writeFile: vi.fn().mockResolvedValue(undefined),
+  unlink: vi.fn().mockResolvedValue(undefined),
+  readdir: vi.fn().mockResolvedValue([]),
+}));
+
+vi.mock('@/lib/settings-helpers.js', () => ({
+  getPromptCustomization: vi.fn().mockResolvedValue({
+    taskExecution: {
+      resumeFeatureTemplate: 'Resume: {{featurePrompt}}\n\nPrevious context:\n{{previousContext}}',
+    },
+  }),
+}));
+
+describe('recovery-service.ts', () => {
+  // Import mocked modules for access in tests
+  let secureFs: typeof import('@/lib/secure-fs.js');
+  let utils: typeof import('@automaker/utils');
+
+  // Mock dependencies
+  const mockEventBus = {
+    emitAutoModeEvent: vi.fn(),
+    on: vi.fn(),
+    off: vi.fn(),
+  };
+
+  const mockConcurrencyManager = {
+    getAllRunning: vi.fn().mockReturnValue([]),
+    getRunningFeature: vi.fn().mockReturnValue(null),
+    acquire: vi.fn().mockImplementation(({ featureId }) => ({
+      featureId,
+      abortController: new AbortController(),
+      projectPath: '/test/project',
+      isAutoMode: false,
+      startTime: Date.now(),
+      leaseCount: 1,
+    })),
+    release: vi.fn(),
+    getRunningCountForWorktree: vi.fn().mockReturnValue(0),
+  };
+
+  const mockSettingsService = null;
+
+  // Callback mocks - initialize empty, set up in beforeEach
+  let mockExecuteFeature: ReturnType<typeof vi.fn>;
+  let mockLoadFeature: ReturnType<typeof vi.fn>;
+  let mockDetectPipelineStatus: ReturnType<typeof vi.fn>;
+  let mockResumePipeline: ReturnType<typeof vi.fn>;
+  let mockIsFeatureRunning: ReturnType<typeof vi.fn>;
+  let mockAcquireRunningFeature: ReturnType<typeof vi.fn>;
+  let mockReleaseRunningFeature: ReturnType<typeof vi.fn>;
+
+  let service: RecoveryService;
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+
+    // Import mocked modules
+    secureFs = await import('@/lib/secure-fs.js');
+    utils = await import('@automaker/utils');
+
+    // Reset secure-fs mocks to default behavior
+    vi.mocked(secureFs.access).mockRejectedValue(new Error('ENOENT'));
+    vi.mocked(secureFs.readFile).mockRejectedValue(new Error('ENOENT'));
+    vi.mocked(secureFs.writeFile).mockResolvedValue(undefined);
+    vi.mocked(secureFs.unlink).mockResolvedValue(undefined);
+    vi.mocked(secureFs.readdir).mockResolvedValue([]);
+
+    // Reset all callback mocks with default implementations
+    mockExecuteFeature = vi.fn().mockResolvedValue(undefined);
+    mockLoadFeature = vi.fn().mockResolvedValue(null);
+    mockDetectPipelineStatus = vi.fn().mockResolvedValue({
+      isPipeline: false,
+      stepId: null,
+      stepIndex: -1,
+      totalSteps: 0,
+      step: null,
+      config: null,
+    });
+    mockResumePipeline = vi.fn().mockResolvedValue(undefined);
+    mockIsFeatureRunning = vi.fn().mockReturnValue(false);
+    mockAcquireRunningFeature = vi.fn().mockImplementation(({ featureId }) => ({
+      featureId,
+      abortController: new AbortController(),
+    }));
+    mockReleaseRunningFeature = vi.fn();
+
+    service = new RecoveryService(
+      mockEventBus as any,
+      mockConcurrencyManager as any,
+      mockSettingsService,
+      mockExecuteFeature,
+      mockLoadFeature,
+      mockDetectPipelineStatus,
+      mockResumePipeline,
+      mockIsFeatureRunning,
+      mockAcquireRunningFeature,
+      mockReleaseRunningFeature
+    );
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  describe('DEFAULT_EXECUTION_STATE', () => {
+    it('has correct default values', () => {
+      expect(DEFAULT_EXECUTION_STATE).toEqual({
+        version: 1,
+        autoLoopWasRunning: false,
+        maxConcurrency: expect.any(Number),
+        projectPath: '',
+        branchName: null,
+        runningFeatureIds: [],
+        savedAt: '',
+      });
+    });
+  });
+
+  describe('saveExecutionStateForProject', () => {
+    it('writes correct JSON to execution state path', async () => {
+      mockConcurrencyManager.getAllRunning.mockReturnValue([
+        { featureId: 'feature-1', projectPath: '/test/project' },
+        { featureId: 'feature-2', projectPath: '/test/project' },
+        { featureId: 'feature-3', projectPath: '/other/project' },
+      ]);
+
+      await service.saveExecutionStateForProject('/test/project', 'feature-branch', 3);
+
+      expect(secureFs.writeFile).toHaveBeenCalledWith(
+        '/test/project/.automaker/execution-state.json',
+        expect.any(String),
+        'utf-8'
+      );
+
+      const writtenContent = JSON.parse(vi.mocked(secureFs.writeFile).mock.calls[0][1] as string);
+      expect(writtenContent).toMatchObject({
+        version: 1,
+        autoLoopWasRunning: true,
+        maxConcurrency: 3,
+        projectPath: '/test/project',
+        branchName: 'feature-branch',
+        runningFeatureIds: ['feature-1', 'feature-2'],
+      });
+      expect(writtenContent.savedAt).toBeDefined();
+    });
+
+    it('filters running features by project path', async () => {
+      mockConcurrencyManager.getAllRunning.mockReturnValue([
+        { featureId: 'feature-1', projectPath: '/project-a' },
+        { featureId: 'feature-2', projectPath: '/project-b' },
+      ]);
+
+      await service.saveExecutionStateForProject('/project-a', null, 2);
+
+      const writtenContent = JSON.parse(vi.mocked(secureFs.writeFile).mock.calls[0][1] as string);
+      expect(writtenContent.runningFeatureIds).toEqual(['feature-1']);
+    });
+
+    it('handles null branch name for main worktree', async () => {
+      mockConcurrencyManager.getAllRunning.mockReturnValue([]);
+      await service.saveExecutionStateForProject('/test/project', null, 1);
+
+      const writtenContent = JSON.parse(vi.mocked(secureFs.writeFile).mock.calls[0][1] as string);
+      expect(writtenContent.branchName).toBeNull();
+    });
+  });
+
+  describe('saveExecutionState (legacy)', () => {
+    it('saves execution state with legacy format', async () => {
+      mockConcurrencyManager.getAllRunning.mockReturnValue([
+        { featureId: 'feature-1', projectPath: '/test' },
+      ]);
+
+      await service.saveExecutionState('/test/project', true, 5);
+
+      expect(secureFs.writeFile).toHaveBeenCalled();
+      const writtenContent = JSON.parse(vi.mocked(secureFs.writeFile).mock.calls[0][1] as string);
+      expect(writtenContent).toMatchObject({
+        autoLoopWasRunning: true,
+        maxConcurrency: 5,
+        branchName: null, // Legacy uses main worktree
+      });
+    });
+  });
+
+  describe('loadExecutionState', () => {
+    it('parses JSON correctly when file exists', async () => {
+      const mockState = {
+        version: 1,
+        autoLoopWasRunning: true,
+        maxConcurrency: 4,
+        projectPath: '/test/project',
+        branchName: 'dev',
+        runningFeatureIds: ['f1', 'f2'],
+        savedAt: '2026-01-27T12:00:00Z',
+      };
+      vi.mocked(secureFs.readFile).mockResolvedValueOnce(JSON.stringify(mockState));
+
+      const result = await service.loadExecutionState('/test/project');
+
+      expect(result).toEqual(mockState);
+    });
+
+    it('returns default state on ENOENT error', async () => {
+      const error = new Error('File not found') as NodeJS.ErrnoException;
+      error.code = 'ENOENT';
+      vi.mocked(secureFs.readFile).mockRejectedValueOnce(error);
+
+      const result = await service.loadExecutionState('/test/project');
+
+      expect(result).toEqual(DEFAULT_EXECUTION_STATE);
+    });
+
+    it('returns default state on other errors and logs', async () => {
+      vi.mocked(secureFs.readFile).mockRejectedValueOnce(new Error('Permission denied'));
+
+      const result = await service.loadExecutionState('/test/project');
+
+      expect(result).toEqual(DEFAULT_EXECUTION_STATE);
+    });
+  });
+
+  describe('clearExecutionState', () => {
+    it('removes execution state file', async () => {
+      await service.clearExecutionState('/test/project');
+
+      expect(secureFs.unlink).toHaveBeenCalledWith('/test/project/.automaker/execution-state.json');
+    });
+
+    it('does not throw on ENOENT error', async () => {
+      const error = new Error('File not found') as NodeJS.ErrnoException;
+      error.code = 'ENOENT';
+      vi.mocked(secureFs.unlink).mockRejectedValueOnce(error);
+
+      await expect(service.clearExecutionState('/test/project')).resolves.not.toThrow();
+    });
+
+    it('logs error on other failures', async () => {
+      vi.mocked(secureFs.unlink).mockRejectedValueOnce(new Error('Permission denied'));
+
+      await expect(service.clearExecutionState('/test/project')).resolves.not.toThrow();
+    });
+  });
+
+  describe('contextExists', () => {
+    it('returns true when agent-output.md exists', async () => {
+      vi.mocked(secureFs.access).mockResolvedValueOnce(undefined);
+
+      const result = await service.contextExists('/test/project', 'feature-1');
+
+      expect(result).toBe(true);
+      expect(secureFs.access).toHaveBeenCalledWith(
+        normalizePath('/test/project/.automaker/features/feature-1/agent-output.md')
+      );
+    });
+
+    it('returns false when agent-output.md is missing', async () => {
+      vi.mocked(secureFs.access).mockRejectedValueOnce(new Error('ENOENT'));
+
+      const result = await service.contextExists('/test/project', 'feature-1');
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('resumeFeature', () => {
+    const mockFeature: Feature = {
+      id: 'feature-1',
+      title: 'Test Feature',
+      description: 'A test feature',
+      status: 'in_progress',
+    };
+
+    beforeEach(() => {
+      mockLoadFeature.mockResolvedValue(mockFeature);
+    });
+
+    it('skips if feature already running (idempotent)', async () => {
+      mockIsFeatureRunning.mockReturnValueOnce(true);
+
+      await service.resumeFeature('/test/project', 'feature-1');
+
+      expect(mockLoadFeature).not.toHaveBeenCalled();
+      expect(mockExecuteFeature).not.toHaveBeenCalled();
+    });
+
+    it('detects pipeline status for feature', async () => {
+      vi.mocked(secureFs.access).mockRejectedValue(new Error('ENOENT'));
+      await service.resumeFeature('/test/project', 'feature-1');
+
+      expect(mockDetectPipelineStatus).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        'in_progress'
+      );
+    });
+
+    it('delegates to resumePipeline for pipeline features', async () => {
+      const pipelineInfo = {
+        isPipeline: true,
+        stepId: 'test',
+        stepIndex: 1,
+        totalSteps: 3,
+        step: {
+          id: 'test',
+          name: 'Test Step',
+          command: 'npm test',
+          type: 'test' as const,
+          order: 1,
+        },
+        config: null,
+      };
+      mockDetectPipelineStatus.mockResolvedValueOnce(pipelineInfo);
+
+      await service.resumeFeature('/test/project', 'feature-1');
+
+      expect(mockResumePipeline).toHaveBeenCalledWith(
+        '/test/project',
+        mockFeature,
+        false,
+        pipelineInfo
+      );
+      expect(mockExecuteFeature).not.toHaveBeenCalled();
+    });
+
+    it('calls executeFeature with continuation prompt when context exists', async () => {
+      // Reset settings-helpers mock before this test
+      const settingsHelpers = await import('@/lib/settings-helpers.js');
+      vi.mocked(settingsHelpers.getPromptCustomization).mockResolvedValue({
+        taskExecution: {
+          resumeFeatureTemplate:
+            'Resume: {{featurePrompt}}\n\nPrevious context:\n{{previousContext}}',
+          implementationInstructions: '',
+          playwrightVerificationInstructions: '',
+        },
+      } as any);
+
+      vi.mocked(secureFs.access).mockResolvedValueOnce(undefined);
+      vi.mocked(secureFs.readFile).mockResolvedValueOnce('Previous agent output content');
+
+      await service.resumeFeature('/test/project', 'feature-1');
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_feature_resuming',
+        expect.objectContaining({
+          featureId: 'feature-1',
+          hasContext: true,
+        })
+      );
+      expect(mockExecuteFeature).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        false,
+        false,
+        undefined,
+        expect.objectContaining({
+          continuationPrompt: expect.stringContaining('Previous agent output content'),
+          _calledInternally: true,
+        })
+      );
+    });
+
+    it('calls executeFeature fresh when no context', async () => {
+      vi.mocked(secureFs.access).mockRejectedValueOnce(new Error('ENOENT'));
+
+      await service.resumeFeature('/test/project', 'feature-1');
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_feature_resuming',
+        expect.objectContaining({
+          featureId: 'feature-1',
+          hasContext: false,
+        })
+      );
+      expect(mockExecuteFeature).toHaveBeenCalledWith(
+        '/test/project',
+        'feature-1',
+        false,
+        false,
+        undefined,
+        expect.objectContaining({
+          _calledInternally: true,
+        })
+      );
+    });
+
+    it('releases running feature in finally block', async () => {
+      mockLoadFeature.mockRejectedValueOnce(new Error('Feature not found'));
+
+      await expect(service.resumeFeature('/test/project', 'feature-1')).rejects.toThrow();
+
+      expect(mockReleaseRunningFeature).toHaveBeenCalledWith('feature-1');
+    });
+
+    it('throws error if feature not found', async () => {
+      mockLoadFeature.mockResolvedValueOnce(null);
+
+      await expect(service.resumeFeature('/test/project', 'feature-1')).rejects.toThrow(
+        'Feature feature-1 not found'
+      );
+    });
+
+    it('acquires running feature with allowReuse when calledInternally', async () => {
+      vi.mocked(secureFs.access).mockRejectedValue(new Error('ENOENT'));
+      await service.resumeFeature('/test/project', 'feature-1', false, true);
+
+      expect(mockAcquireRunningFeature).toHaveBeenCalledWith({
+        featureId: 'feature-1',
+        projectPath: '/test/project',
+        isAutoMode: false,
+        allowReuse: true,
+      });
+    });
+  });
+
+  describe('resumeInterruptedFeatures', () => {
+    it('finds features with in_progress status', async () => {
+      vi.mocked(secureFs.readdir).mockResolvedValueOnce([
+        { name: 'feature-1', isDirectory: () => true } as any,
+        { name: 'feature-2', isDirectory: () => true } as any,
+      ]);
+      vi.mocked(utils.readJsonWithRecovery)
+        .mockResolvedValueOnce({
+          data: { id: 'feature-1', title: 'Feature 1', status: 'in_progress' },
+          wasRecovered: false,
+        })
+        .mockResolvedValueOnce({
+          data: { id: 'feature-2', title: 'Feature 2', status: 'backlog' },
+          wasRecovered: false,
+        });
+
+      mockLoadFeature.mockResolvedValue({
+        id: 'feature-1',
+        title: 'Feature 1',
+        status: 'in_progress',
+        description: 'Test',
+      });
+
+      await service.resumeInterruptedFeatures('/test/project');
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_resuming_features',
+        expect.objectContaining({
+          featureIds: ['feature-1'],
+        })
+      );
+    });
+
+    it('finds features with interrupted status', async () => {
+      vi.mocked(secureFs.readdir).mockResolvedValueOnce([
+        { name: 'feature-1', isDirectory: () => true } as any,
+      ]);
+      vi.mocked(utils.readJsonWithRecovery).mockResolvedValueOnce({
+        data: { id: 'feature-1', title: 'Feature 1', status: 'interrupted' },
+        wasRecovered: false,
+      });
+
+      mockLoadFeature.mockResolvedValue({
+        id: 'feature-1',
+        title: 'Feature 1',
+        status: 'interrupted',
+        description: 'Test',
+      });
+
+      await service.resumeInterruptedFeatures('/test/project');
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_resuming_features',
+        expect.objectContaining({
+          featureIds: ['feature-1'],
+        })
+      );
+    });
+
+    it('finds features with pipeline_* status', async () => {
+      vi.mocked(secureFs.readdir).mockResolvedValueOnce([
+        { name: 'feature-1', isDirectory: () => true } as any,
+      ]);
+      vi.mocked(utils.readJsonWithRecovery).mockResolvedValueOnce({
+        data: { id: 'feature-1', title: 'Feature 1', status: 'pipeline_test' },
+        wasRecovered: false,
+      });
+
+      mockLoadFeature.mockResolvedValue({
+        id: 'feature-1',
+        title: 'Feature 1',
+        status: 'pipeline_test',
+        description: 'Test',
+      });
+
+      await service.resumeInterruptedFeatures('/test/project');
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_resuming_features',
+        expect.objectContaining({
+          features: expect.arrayContaining([
+            expect.objectContaining({ id: 'feature-1', status: 'pipeline_test' }),
+          ]),
+        })
+      );
+    });
+
+    it('finds reconciled features using execution state (ready/backlog from previously running)', async () => {
+      // Simulate execution state with previously running feature IDs
+      const executionState = {
+        version: 1,
+        autoLoopWasRunning: true,
+        maxConcurrency: 2,
+        projectPath: '/test/project',
+        branchName: null,
+        runningFeatureIds: ['feature-1', 'feature-2'],
+        savedAt: '2026-01-27T12:00:00Z',
+      };
+      vi.mocked(secureFs.readFile).mockResolvedValueOnce(JSON.stringify(executionState));
+
+      vi.mocked(secureFs.readdir).mockResolvedValueOnce([
+        { name: 'feature-1', isDirectory: () => true } as any,
+        { name: 'feature-2', isDirectory: () => true } as any,
+        { name: 'feature-3', isDirectory: () => true } as any,
+      ]);
+      // feature-1 was reconciled from in_progress to ready
+      // feature-2 was reconciled from in_progress to backlog
+      // feature-3 is in backlog but was NOT previously running
+      vi.mocked(utils.readJsonWithRecovery)
+        .mockResolvedValueOnce({
+          data: { id: 'feature-1', title: 'Feature 1', status: 'ready' },
+          wasRecovered: false,
+        })
+        .mockResolvedValueOnce({
+          data: { id: 'feature-2', title: 'Feature 2', status: 'backlog' },
+          wasRecovered: false,
+        })
+        .mockResolvedValueOnce({
+          data: { id: 'feature-3', title: 'Feature 3', status: 'backlog' },
+          wasRecovered: false,
+        });
+
+      mockLoadFeature
+        .mockResolvedValueOnce({
+          id: 'feature-1',
+          title: 'Feature 1',
+          status: 'ready',
+          description: 'Test',
+        })
+        .mockResolvedValueOnce({
+          id: 'feature-2',
+          title: 'Feature 2',
+          status: 'backlog',
+          description: 'Test',
+        });
+
+      await service.resumeInterruptedFeatures('/test/project');
+
+      // Should resume feature-1 and feature-2 (from execution state) but NOT feature-3
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_resuming_features',
+        expect.objectContaining({
+          featureIds: ['feature-1', 'feature-2'],
+        })
+      );
+    });
+
+    it('clears execution state after successful resume', async () => {
+      // Simulate execution state
+      const executionState = {
+        version: 1,
+        autoLoopWasRunning: true,
+        maxConcurrency: 1,
+        projectPath: '/test/project',
+        branchName: null,
+        runningFeatureIds: ['feature-1'],
+        savedAt: '2026-01-27T12:00:00Z',
+      };
+      vi.mocked(secureFs.readFile).mockResolvedValueOnce(JSON.stringify(executionState));
+
+      vi.mocked(secureFs.readdir).mockResolvedValueOnce([
+        { name: 'feature-1', isDirectory: () => true } as any,
+      ]);
+      vi.mocked(utils.readJsonWithRecovery).mockResolvedValueOnce({
+        data: { id: 'feature-1', title: 'Feature 1', status: 'ready' },
+        wasRecovered: false,
+      });
+
+      mockLoadFeature.mockResolvedValue({
+        id: 'feature-1',
+        title: 'Feature 1',
+        status: 'ready',
+        description: 'Test',
+      });
+
+      await service.resumeInterruptedFeatures('/test/project');
+
+      // Should clear execution state after resuming
+      expect(secureFs.unlink).toHaveBeenCalledWith('/test/project/.automaker/execution-state.json');
+    });
+
+    it('distinguishes features with/without context', async () => {
+      vi.mocked(secureFs.readdir).mockResolvedValueOnce([
+        { name: 'feature-with', isDirectory: () => true } as any,
+        { name: 'feature-without', isDirectory: () => true } as any,
+      ]);
+      vi.mocked(utils.readJsonWithRecovery)
+        .mockResolvedValueOnce({
+          data: { id: 'feature-with', title: 'With Context', status: 'in_progress' },
+          wasRecovered: false,
+        })
+        .mockResolvedValueOnce({
+          data: { id: 'feature-without', title: 'Without Context', status: 'in_progress' },
+          wasRecovered: false,
+        });
+
+      // First feature has context, second doesn't
+      vi.mocked(secureFs.access)
+        .mockResolvedValueOnce(undefined) // feature-with has context
+        .mockRejectedValueOnce(new Error('ENOENT')); // feature-without doesn't
+
+      mockLoadFeature
+        .mockResolvedValueOnce({
+          id: 'feature-with',
+          title: 'With Context',
+          status: 'in_progress',
+          description: 'Test',
+        })
+        .mockResolvedValueOnce({
+          id: 'feature-without',
+          title: 'Without Context',
+          status: 'in_progress',
+          description: 'Test',
+        });
+
+      await service.resumeInterruptedFeatures('/test/project');
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_resuming_features',
+        expect.objectContaining({
+          features: expect.arrayContaining([
+            expect.objectContaining({ id: 'feature-with', hasContext: true }),
+            expect.objectContaining({ id: 'feature-without', hasContext: false }),
+          ]),
+        })
+      );
+    });
+
+    it('emits auto_mode_resuming_features event', async () => {
+      vi.mocked(secureFs.readdir).mockResolvedValueOnce([
+        { name: 'feature-1', isDirectory: () => true } as any,
+      ]);
+      vi.mocked(utils.readJsonWithRecovery).mockResolvedValueOnce({
+        data: { id: 'feature-1', title: 'Feature 1', status: 'in_progress' },
+        wasRecovered: false,
+      });
+
+      mockLoadFeature.mockResolvedValue({
+        id: 'feature-1',
+        title: 'Feature 1',
+        status: 'in_progress',
+        description: 'Test',
+      });
+
+      await service.resumeInterruptedFeatures('/test/project');
+
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_resuming_features',
+        expect.objectContaining({
+          message: expect.stringContaining('interrupted feature'),
+          projectPath: '/test/project',
+        })
+      );
+    });
+
+    it('skips features already running (idempotent)', async () => {
+      vi.mocked(secureFs.readdir).mockResolvedValueOnce([
+        { name: 'feature-1', isDirectory: () => true } as any,
+      ]);
+      vi.mocked(utils.readJsonWithRecovery).mockResolvedValueOnce({
+        data: { id: 'feature-1', title: 'Feature 1', status: 'in_progress' },
+        wasRecovered: false,
+      });
+
+      mockIsFeatureRunning.mockReturnValue(true);
+
+      await service.resumeInterruptedFeatures('/test/project');
+
+      // Should emit event but not actually resume
+      expect(mockEventBus.emitAutoModeEvent).toHaveBeenCalledWith(
+        'auto_mode_resuming_features',
+        expect.anything()
+      );
+      // But resumeFeature should exit early due to isFeatureRunning check
+      expect(mockLoadFeature).not.toHaveBeenCalled();
+    });
+
+    it('handles ENOENT for features directory gracefully', async () => {
+      const error = new Error('Directory not found') as NodeJS.ErrnoException;
+      error.code = 'ENOENT';
+      vi.mocked(secureFs.readdir).mockRejectedValueOnce(error);
+
+      await expect(service.resumeInterruptedFeatures('/test/project')).resolves.not.toThrow();
+    });
+
+    it('continues with other features when one fails', async () => {
+      vi.mocked(secureFs.readdir).mockResolvedValueOnce([
+        { name: 'feature-fail', isDirectory: () => true } as any,
+        { name: 'feature-success', isDirectory: () => true } as any,
+      ]);
+      vi.mocked(utils.readJsonWithRecovery)
+        .mockResolvedValueOnce({
+          data: { id: 'feature-fail', title: 'Fail', status: 'in_progress' },
+          wasRecovered: false,
+        })
+        .mockResolvedValueOnce({
+          data: { id: 'feature-success', title: 'Success', status: 'in_progress' },
+          wasRecovered: false,
+        });
+
+      // First feature throws during resume, second succeeds
+      mockLoadFeature.mockRejectedValueOnce(new Error('Resume failed')).mockResolvedValueOnce({
+        id: 'feature-success',
+        title: 'Success',
+        status: 'in_progress',
+        description: 'Test',
+      });
+
+      await service.resumeInterruptedFeatures('/test/project');
+
+      // Should still attempt to resume the second feature
+      expect(mockLoadFeature).toHaveBeenCalledTimes(2);
+    });
+
+    it('logs info when no interrupted features found', async () => {
+      vi.mocked(secureFs.readdir).mockResolvedValueOnce([
+        { name: 'feature-1', isDirectory: () => true } as any,
+      ]);
+      vi.mocked(utils.readJsonWithRecovery).mockResolvedValueOnce({
+        data: { id: 'feature-1', title: 'Feature 1', status: 'completed' },
+        wasRecovered: false,
+      });
+
+      await service.resumeInterruptedFeatures('/test/project');
+
+      expect(mockEventBus.emitAutoModeEvent).not.toHaveBeenCalledWith(
+        'auto_mode_resuming_features',
+        expect.anything()
+      );
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/settings-service.test.ts b/temp_repo/apps/server/tests/unit/services/settings-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4188cd9de8615376901f55110d9abea371776990
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/settings-service.test.ts
@@ -0,0 +1,1045 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+import { SettingsService } from '@/services/settings-service.js';
+import {
+  DEFAULT_GLOBAL_SETTINGS,
+  DEFAULT_CREDENTIALS,
+  DEFAULT_PROJECT_SETTINGS,
+  SETTINGS_VERSION,
+  CREDENTIALS_VERSION,
+  PROJECT_SETTINGS_VERSION,
+  type GlobalSettings,
+  type Credentials,
+  type ProjectSettings,
+} from '@/types/settings.js';
+import type { NtfyEndpointConfig } from '@automaker/types';
+
+describe('settings-service.ts', () => {
+  let testDataDir: string;
+  let testProjectDir: string;
+  let settingsService: SettingsService;
+
+  /**
+   * Helper to create a test ntfy endpoint with sensible defaults
+   */
+  function createTestNtfyEndpoint(overrides: Partial<NtfyEndpointConfig> = {}): NtfyEndpointConfig {
+    return {
+      id: `endpoint-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+      name: 'Test Endpoint',
+      serverUrl: 'https://ntfy.sh',
+      topic: 'test-topic',
+      authType: 'none',
+      enabled: true,
+      ...overrides,
+    };
+  }
+
+  beforeEach(async () => {
+    testDataDir = path.join(os.tmpdir(), `settings-test-${Date.now()}`);
+    testProjectDir = path.join(os.tmpdir(), `project-test-${Date.now()}`);
+    await fs.mkdir(testDataDir, { recursive: true });
+    await fs.mkdir(testProjectDir, { recursive: true });
+    settingsService = new SettingsService(testDataDir);
+  });
+
+  afterEach(async () => {
+    try {
+      await fs.rm(testDataDir, { recursive: true, force: true });
+      await fs.rm(testProjectDir, { recursive: true, force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe('getGlobalSettings', () => {
+    it('should return default settings when file does not exist', async () => {
+      const settings = await settingsService.getGlobalSettings();
+      expect(settings).toEqual(DEFAULT_GLOBAL_SETTINGS);
+    });
+
+    it('should read and return existing settings', async () => {
+      const customSettings: GlobalSettings = {
+        ...DEFAULT_GLOBAL_SETTINGS,
+        theme: 'light',
+        sidebarOpen: false,
+        maxConcurrency: 5,
+      };
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(customSettings, null, 2));
+
+      const settings = await settingsService.getGlobalSettings();
+      expect(settings.theme).toBe('light');
+      expect(settings.sidebarOpen).toBe(false);
+      expect(settings.maxConcurrency).toBe(5);
+    });
+
+    it('should merge with defaults for missing properties', async () => {
+      const partialSettings = {
+        version: SETTINGS_VERSION,
+        theme: 'dark',
+      };
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(partialSettings, null, 2));
+
+      const settings = await settingsService.getGlobalSettings();
+      expect(settings.theme).toBe('dark');
+      expect(settings.sidebarOpen).toBe(DEFAULT_GLOBAL_SETTINGS.sidebarOpen);
+      expect(settings.maxConcurrency).toBe(DEFAULT_GLOBAL_SETTINGS.maxConcurrency);
+    });
+
+    it('should merge keyboard shortcuts deeply', async () => {
+      const customSettings: GlobalSettings = {
+        ...DEFAULT_GLOBAL_SETTINGS,
+        keyboardShortcuts: {
+          ...DEFAULT_GLOBAL_SETTINGS.keyboardShortcuts,
+          board: 'B',
+        },
+      };
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(customSettings, null, 2));
+
+      const settings = await settingsService.getGlobalSettings();
+      expect(settings.keyboardShortcuts.board).toBe('B');
+      expect(settings.keyboardShortcuts.agent).toBe(
+        DEFAULT_GLOBAL_SETTINGS.keyboardShortcuts.agent
+      );
+    });
+  });
+
+  describe('updateGlobalSettings', () => {
+    it('should create settings file with updates', async () => {
+      const updates: Partial<GlobalSettings> = {
+        theme: 'light',
+        sidebarOpen: false,
+      };
+
+      const updated = await settingsService.updateGlobalSettings(updates);
+
+      expect(updated.theme).toBe('light');
+      expect(updated.sidebarOpen).toBe(false);
+      expect(updated.version).toBe(SETTINGS_VERSION);
+
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      const fileContent = await fs.readFile(settingsPath, 'utf-8');
+      const saved = JSON.parse(fileContent);
+      expect(saved.theme).toBe('light');
+      expect(saved.sidebarOpen).toBe(false);
+    });
+
+    it('should merge updates with existing settings', async () => {
+      const initial: GlobalSettings = {
+        ...DEFAULT_GLOBAL_SETTINGS,
+        theme: 'dark',
+        maxConcurrency: 3,
+      };
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(initial, null, 2));
+
+      const updates: Partial<GlobalSettings> = {
+        theme: 'light',
+      };
+
+      const updated = await settingsService.updateGlobalSettings(updates);
+
+      expect(updated.theme).toBe('light');
+      expect(updated.maxConcurrency).toBe(3); // Preserved from initial
+    });
+
+    it('should deep merge keyboard shortcuts', async () => {
+      const updates: Partial<GlobalSettings> = {
+        keyboardShortcuts: {
+          board: 'B',
+        },
+      };
+
+      const updated = await settingsService.updateGlobalSettings(updates);
+
+      expect(updated.keyboardShortcuts.board).toBe('B');
+      expect(updated.keyboardShortcuts.agent).toBe(DEFAULT_GLOBAL_SETTINGS.keyboardShortcuts.agent);
+    });
+
+    it('should not overwrite non-empty projects with an empty array (data loss guard)', async () => {
+      const initial: GlobalSettings = {
+        ...DEFAULT_GLOBAL_SETTINGS,
+        theme: 'solarized' as GlobalSettings['theme'],
+        projects: [
+          {
+            id: 'proj1',
+            name: 'Project 1',
+            path: '/tmp/project-1',
+            lastOpened: new Date().toISOString(),
+          },
+        ] as any,
+      };
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(initial, null, 2));
+
+      const updated = await settingsService.updateGlobalSettings({
+        projects: [],
+        theme: 'light',
+      } as any);
+
+      expect(updated.projects.length).toBe(1);
+      expect((updated.projects as any)[0]?.id).toBe('proj1');
+      // Theme should be preserved in the same request if it attempted to wipe projects
+      expect(updated.theme).toBe('solarized');
+    });
+
+    it('should not overwrite non-empty ntfyEndpoints with an empty array (data loss guard)', async () => {
+      const endpoint1 = createTestNtfyEndpoint({
+        id: 'endpoint-1',
+        name: 'My Ntfy',
+        topic: 'my-topic',
+      });
+      const initial: GlobalSettings = {
+        ...DEFAULT_GLOBAL_SETTINGS,
+        ntfyEndpoints: [endpoint1] as any,
+      };
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(initial, null, 2));
+
+      const updated = await settingsService.updateGlobalSettings({
+        ntfyEndpoints: [],
+      } as any);
+
+      // The empty array should be ignored - existing endpoints should be preserved
+      expect(updated.ntfyEndpoints?.length).toBe(1);
+      expect((updated.ntfyEndpoints as any)?.[0]?.id).toBe('endpoint-1');
+    });
+
+    it('should allow adding new ntfyEndpoints to existing list', async () => {
+      const endpoint1 = createTestNtfyEndpoint({
+        id: 'endpoint-1',
+        name: 'First Endpoint',
+        topic: 'first-topic',
+      });
+      const endpoint2 = createTestNtfyEndpoint({
+        id: 'endpoint-2',
+        name: 'Second Endpoint',
+        serverUrl: 'https://ntfy.example.com',
+        topic: 'second-topic',
+        authType: 'token',
+        token: 'test-token',
+      });
+
+      const initial: GlobalSettings = {
+        ...DEFAULT_GLOBAL_SETTINGS,
+        ntfyEndpoints: [endpoint1] as any,
+      };
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(initial, null, 2));
+
+      const updated = await settingsService.updateGlobalSettings({
+        ntfyEndpoints: [endpoint1, endpoint2] as any,
+      });
+
+      // Both endpoints should be present
+      expect(updated.ntfyEndpoints?.length).toBe(2);
+      expect((updated.ntfyEndpoints as any)?.[0]?.id).toBe('endpoint-1');
+      expect((updated.ntfyEndpoints as any)?.[1]?.id).toBe('endpoint-2');
+    });
+
+    it('should allow updating ntfyEndpoints with non-empty array', async () => {
+      const originalEndpoint = createTestNtfyEndpoint({
+        id: 'endpoint-1',
+        name: 'Original Name',
+        topic: 'original-topic',
+      });
+      const updatedEndpoint = createTestNtfyEndpoint({
+        id: 'endpoint-1',
+        name: 'Updated Name',
+        topic: 'updated-topic',
+        enabled: false,
+      });
+
+      const initial: GlobalSettings = {
+        ...DEFAULT_GLOBAL_SETTINGS,
+        ntfyEndpoints: [originalEndpoint] as any,
+      };
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(initial, null, 2));
+
+      const updated = await settingsService.updateGlobalSettings({
+        ntfyEndpoints: [updatedEndpoint] as any,
+      });
+
+      // The update should go through with the new values
+      expect(updated.ntfyEndpoints?.length).toBe(1);
+      expect((updated.ntfyEndpoints as any)?.[0]?.name).toBe('Updated Name');
+      expect((updated.ntfyEndpoints as any)?.[0]?.topic).toBe('updated-topic');
+      expect((updated.ntfyEndpoints as any)?.[0]?.enabled).toBe(false);
+    });
+
+    it('should allow empty ntfyEndpoints when no existing endpoints exist', async () => {
+      // Start with no endpoints (default state)
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(DEFAULT_GLOBAL_SETTINGS, null, 2));
+
+      // Trying to set empty array should be fine when there are no existing endpoints
+      const updated = await settingsService.updateGlobalSettings({
+        ntfyEndpoints: [],
+      } as any);
+
+      // Empty array should be set (no data loss because there was nothing to lose)
+      expect(updated.ntfyEndpoints?.length ?? 0).toBe(0);
+    });
+
+    it('should preserve ntfyEndpoints while updating other settings', async () => {
+      const endpoint = createTestNtfyEndpoint({
+        id: 'endpoint-1',
+        name: 'My Endpoint',
+        topic: 'my-topic',
+      });
+      const initial: GlobalSettings = {
+        ...DEFAULT_GLOBAL_SETTINGS,
+        theme: 'dark',
+        ntfyEndpoints: [endpoint] as any,
+      };
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(initial, null, 2));
+
+      // Update theme without sending ntfyEndpoints
+      const updated = await settingsService.updateGlobalSettings({
+        theme: 'light',
+      });
+
+      // Theme should be updated
+      expect(updated.theme).toBe('light');
+      // ntfyEndpoints should be preserved from existing settings
+      expect(updated.ntfyEndpoints?.length).toBe(1);
+      expect((updated.ntfyEndpoints as any)?.[0]?.id).toBe('endpoint-1');
+    });
+
+    it('should allow clearing ntfyEndpoints with escape hatch flag', async () => {
+      const endpoint = createTestNtfyEndpoint({ id: 'endpoint-1' });
+      const initial: GlobalSettings = {
+        ...DEFAULT_GLOBAL_SETTINGS,
+        ntfyEndpoints: [endpoint] as any,
+      };
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(initial, null, 2));
+
+      // Use escape hatch to intentionally clear ntfyEndpoints
+      const updated = await settingsService.updateGlobalSettings({
+        ntfyEndpoints: [],
+        __allowEmptyNtfyEndpoints: true,
+      } as any);
+
+      // The empty array should be applied because escape hatch was used
+      expect(updated.ntfyEndpoints?.length ?? 0).toBe(0);
+    });
+
+    it('should create data directory if it does not exist', async () => {
+      const newDataDir = path.join(os.tmpdir(), `new-data-dir-${Date.now()}`);
+      const newService = new SettingsService(newDataDir);
+
+      await newService.updateGlobalSettings({ theme: 'light' });
+
+      const stats = await fs.stat(newDataDir);
+      expect(stats.isDirectory()).toBe(true);
+
+      await fs.rm(newDataDir, { recursive: true, force: true });
+    });
+  });
+
+  describe('hasGlobalSettings', () => {
+    it('should return false when settings file does not exist', async () => {
+      const exists = await settingsService.hasGlobalSettings();
+      expect(exists).toBe(false);
+    });
+
+    it('should return true when settings file exists', async () => {
+      await settingsService.updateGlobalSettings({ theme: 'light' });
+      const exists = await settingsService.hasGlobalSettings();
+      expect(exists).toBe(true);
+    });
+  });
+
+  describe('getCredentials', () => {
+    it('should return default credentials when file does not exist', async () => {
+      const credentials = await settingsService.getCredentials();
+      expect(credentials).toEqual(DEFAULT_CREDENTIALS);
+    });
+
+    it('should read and return existing credentials', async () => {
+      const customCredentials: Credentials = {
+        ...DEFAULT_CREDENTIALS,
+        apiKeys: {
+          anthropic: 'sk-test-key',
+        },
+      };
+      const credentialsPath = path.join(testDataDir, 'credentials.json');
+      await fs.writeFile(credentialsPath, JSON.stringify(customCredentials, null, 2));
+
+      const credentials = await settingsService.getCredentials();
+      expect(credentials.apiKeys.anthropic).toBe('sk-test-key');
+    });
+
+    it('should merge with defaults for missing api keys', async () => {
+      const partialCredentials = {
+        version: CREDENTIALS_VERSION,
+        apiKeys: {
+          anthropic: 'sk-test',
+        },
+      };
+      const credentialsPath = path.join(testDataDir, 'credentials.json');
+      await fs.writeFile(credentialsPath, JSON.stringify(partialCredentials, null, 2));
+
+      const credentials = await settingsService.getCredentials();
+      expect(credentials.apiKeys.anthropic).toBe('sk-test');
+    });
+  });
+
+  describe('updateCredentials', () => {
+    it('should create credentials file with updates', async () => {
+      const updates: Partial<Credentials> = {
+        apiKeys: {
+          anthropic: 'sk-test-key',
+        },
+      };
+
+      const updated = await settingsService.updateCredentials(updates);
+
+      expect(updated.apiKeys.anthropic).toBe('sk-test-key');
+      expect(updated.version).toBe(CREDENTIALS_VERSION);
+
+      const credentialsPath = path.join(testDataDir, 'credentials.json');
+      const fileContent = await fs.readFile(credentialsPath, 'utf-8');
+      const saved = JSON.parse(fileContent);
+      expect(saved.apiKeys.anthropic).toBe('sk-test-key');
+    });
+
+    it('should merge updates with existing credentials', async () => {
+      const initial: Credentials = {
+        ...DEFAULT_CREDENTIALS,
+        apiKeys: {
+          anthropic: 'sk-initial',
+        },
+      };
+      const credentialsPath = path.join(testDataDir, 'credentials.json');
+      await fs.writeFile(credentialsPath, JSON.stringify(initial, null, 2));
+
+      const updates: Partial<Credentials> = {
+        apiKeys: {
+          anthropic: 'sk-updated',
+        },
+      };
+
+      const updated = await settingsService.updateCredentials(updates);
+
+      expect(updated.apiKeys.anthropic).toBe('sk-updated');
+    });
+
+    it('should deep merge api keys', async () => {
+      const initial: Credentials = {
+        ...DEFAULT_CREDENTIALS,
+        apiKeys: {
+          anthropic: 'sk-anthropic',
+        },
+      };
+      const credentialsPath = path.join(testDataDir, 'credentials.json');
+      await fs.writeFile(credentialsPath, JSON.stringify(initial, null, 2));
+
+      const updates: Partial<Credentials> = {
+        apiKeys: {
+          anthropic: 'sk-updated-anthropic',
+        },
+      };
+
+      const updated = await settingsService.updateCredentials(updates);
+
+      expect(updated.apiKeys.anthropic).toBe('sk-updated-anthropic');
+    });
+  });
+
+  describe('getMaskedCredentials', () => {
+    it('should return masked credentials for empty keys', async () => {
+      const masked = await settingsService.getMaskedCredentials();
+      expect(masked.anthropic.configured).toBe(false);
+      expect(masked.anthropic.masked).toBe('');
+    });
+
+    it('should mask keys correctly', async () => {
+      await settingsService.updateCredentials({
+        apiKeys: {
+          anthropic: 'sk-ant-api03-1234567890abcdef',
+        },
+      });
+
+      const masked = await settingsService.getMaskedCredentials();
+      expect(masked.anthropic.configured).toBe(true);
+      expect(masked.anthropic.masked).toBe('sk-a...cdef');
+    });
+
+    it('should handle short keys', async () => {
+      await settingsService.updateCredentials({
+        apiKeys: {
+          anthropic: 'short',
+        },
+      });
+
+      const masked = await settingsService.getMaskedCredentials();
+      expect(masked.anthropic.configured).toBe(true);
+      expect(masked.anthropic.masked).toBe('');
+    });
+  });
+
+  describe('hasCredentials', () => {
+    it('should return false when credentials file does not exist', async () => {
+      const exists = await settingsService.hasCredentials();
+      expect(exists).toBe(false);
+    });
+
+    it('should return true when credentials file exists', async () => {
+      await settingsService.updateCredentials({
+        apiKeys: { anthropic: 'test' },
+      });
+      const exists = await settingsService.hasCredentials();
+      expect(exists).toBe(true);
+    });
+  });
+
+  describe('getProjectSettings', () => {
+    it('should return default settings when file does not exist', async () => {
+      const settings = await settingsService.getProjectSettings(testProjectDir);
+      expect(settings).toEqual(DEFAULT_PROJECT_SETTINGS);
+    });
+
+    it('should read and return existing project settings', async () => {
+      const customSettings: ProjectSettings = {
+        ...DEFAULT_PROJECT_SETTINGS,
+        theme: 'light',
+        useWorktrees: true,
+      };
+      const automakerDir = path.join(testProjectDir, '.automaker');
+      await fs.mkdir(automakerDir, { recursive: true });
+      const settingsPath = path.join(automakerDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(customSettings, null, 2));
+
+      const settings = await settingsService.getProjectSettings(testProjectDir);
+      expect(settings.theme).toBe('light');
+      expect(settings.useWorktrees).toBe(true);
+    });
+
+    it('should merge with defaults for missing properties', async () => {
+      const partialSettings = {
+        version: PROJECT_SETTINGS_VERSION,
+        theme: 'dark',
+      };
+      const automakerDir = path.join(testProjectDir, '.automaker');
+      await fs.mkdir(automakerDir, { recursive: true });
+      const settingsPath = path.join(automakerDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(partialSettings, null, 2));
+
+      const settings = await settingsService.getProjectSettings(testProjectDir);
+      expect(settings.theme).toBe('dark');
+      expect(settings.version).toBe(PROJECT_SETTINGS_VERSION);
+    });
+  });
+
+  describe('updateProjectSettings', () => {
+    it('should create project settings file with updates', async () => {
+      const updates: Partial<ProjectSettings> = {
+        theme: 'light',
+        useWorktrees: true,
+      };
+
+      const updated = await settingsService.updateProjectSettings(testProjectDir, updates);
+
+      expect(updated.theme).toBe('light');
+      expect(updated.useWorktrees).toBe(true);
+      expect(updated.version).toBe(PROJECT_SETTINGS_VERSION);
+
+      const automakerDir = path.join(testProjectDir, '.automaker');
+      const settingsPath = path.join(automakerDir, 'settings.json');
+      const fileContent = await fs.readFile(settingsPath, 'utf-8');
+      const saved = JSON.parse(fileContent);
+      expect(saved.theme).toBe('light');
+      expect(saved.useWorktrees).toBe(true);
+    });
+
+    it('should merge updates with existing project settings', async () => {
+      const initial: ProjectSettings = {
+        ...DEFAULT_PROJECT_SETTINGS,
+        theme: 'dark',
+        useWorktrees: false,
+      };
+      const automakerDir = path.join(testProjectDir, '.automaker');
+      await fs.mkdir(automakerDir, { recursive: true });
+      const settingsPath = path.join(automakerDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(initial, null, 2));
+
+      const updates: Partial<ProjectSettings> = {
+        theme: 'light',
+      };
+
+      const updated = await settingsService.updateProjectSettings(testProjectDir, updates);
+
+      expect(updated.theme).toBe('light');
+      expect(updated.useWorktrees).toBe(false); // Preserved
+    });
+
+    it('should deep merge board background', async () => {
+      const initial: ProjectSettings = {
+        ...DEFAULT_PROJECT_SETTINGS,
+        boardBackground: {
+          imagePath: '/path/to/image.jpg',
+          cardOpacity: 0.8,
+          columnOpacity: 0.9,
+          columnBorderEnabled: true,
+          cardGlassmorphism: false,
+          cardBorderEnabled: true,
+          cardBorderOpacity: 0.5,
+          hideScrollbar: false,
+        },
+      };
+      const automakerDir = path.join(testProjectDir, '.automaker');
+      await fs.mkdir(automakerDir, { recursive: true });
+      const settingsPath = path.join(automakerDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(initial, null, 2));
+
+      const updates: Partial<ProjectSettings> = {
+        boardBackground: {
+          cardOpacity: 0.9,
+        },
+      };
+
+      const updated = await settingsService.updateProjectSettings(testProjectDir, updates);
+
+      expect(updated.boardBackground?.imagePath).toBe('/path/to/image.jpg');
+      expect(updated.boardBackground?.cardOpacity).toBe(0.9);
+      expect(updated.boardBackground?.columnOpacity).toBe(0.9);
+    });
+
+    it('should create .automaker directory if it does not exist', async () => {
+      const newProjectDir = path.join(os.tmpdir(), `new-project-${Date.now()}`);
+
+      await settingsService.updateProjectSettings(newProjectDir, { theme: 'light' });
+
+      const automakerDir = path.join(newProjectDir, '.automaker');
+      const stats = await fs.stat(automakerDir);
+      expect(stats.isDirectory()).toBe(true);
+
+      await fs.rm(newProjectDir, { recursive: true, force: true });
+    });
+  });
+
+  describe('hasProjectSettings', () => {
+    it('should return false when project settings file does not exist', async () => {
+      const exists = await settingsService.hasProjectSettings(testProjectDir);
+      expect(exists).toBe(false);
+    });
+
+    it('should return true when project settings file exists', async () => {
+      await settingsService.updateProjectSettings(testProjectDir, { theme: 'light' });
+      const exists = await settingsService.hasProjectSettings(testProjectDir);
+      expect(exists).toBe(true);
+    });
+  });
+
+  describe('migrateFromLocalStorage', () => {
+    it('should migrate global settings from localStorage data', async () => {
+      const localStorageData = {
+        'automaker-storage': JSON.stringify({
+          state: {
+            theme: 'light',
+            sidebarOpen: false,
+            maxConcurrency: 5,
+          },
+        }),
+      };
+
+      const result = await settingsService.migrateFromLocalStorage(localStorageData);
+
+      expect(result.success).toBe(true);
+      expect(result.migratedGlobalSettings).toBe(true);
+      expect(result.migratedCredentials).toBe(false);
+      expect(result.migratedProjectCount).toBe(0);
+
+      const settings = await settingsService.getGlobalSettings();
+      expect(settings.theme).toBe('light');
+      expect(settings.sidebarOpen).toBe(false);
+      expect(settings.maxConcurrency).toBe(5);
+    });
+
+    it('should migrate credentials from localStorage data', async () => {
+      const localStorageData = {
+        'automaker-storage': JSON.stringify({
+          state: {
+            apiKeys: {
+              anthropic: 'sk-test-key',
+            },
+          },
+        }),
+      };
+
+      const result = await settingsService.migrateFromLocalStorage(localStorageData);
+
+      expect(result.success).toBe(true);
+      expect(result.migratedCredentials).toBe(true);
+
+      const credentials = await settingsService.getCredentials();
+      expect(credentials.apiKeys.anthropic).toBe('sk-test-key');
+    });
+
+    it('should migrate project settings from localStorage data', async () => {
+      const localStorageData = {
+        'automaker-storage': JSON.stringify({
+          state: {
+            projects: [
+              {
+                id: 'proj1',
+                name: 'Project 1',
+                path: testProjectDir,
+                theme: 'light',
+              },
+            ],
+            boardBackgroundByProject: {
+              [testProjectDir]: {
+                imagePath: '/path/to/image.jpg',
+                cardOpacity: 0.8,
+                columnOpacity: 0.9,
+                columnBorderEnabled: true,
+                cardGlassmorphism: false,
+                cardBorderEnabled: true,
+                cardBorderOpacity: 0.5,
+                hideScrollbar: false,
+              },
+            },
+          },
+        }),
+      };
+
+      const result = await settingsService.migrateFromLocalStorage(localStorageData);
+
+      expect(result.success).toBe(true);
+      expect(result.migratedProjectCount).toBe(1);
+
+      const projectSettings = await settingsService.getProjectSettings(testProjectDir);
+      expect(projectSettings.theme).toBe('light');
+      expect(projectSettings.boardBackground?.imagePath).toBe('/path/to/image.jpg');
+    });
+
+    it('should migrate ntfyEndpoints from localStorage data', async () => {
+      const localStorageData = {
+        'automaker-storage': JSON.stringify({
+          state: {
+            ntfyEndpoints: [
+              {
+                id: 'endpoint-1',
+                name: 'My Ntfy Server',
+                serverUrl: 'https://ntfy.sh',
+                topic: 'my-topic',
+                authType: 'none',
+                enabled: true,
+              },
+            ],
+          },
+        }),
+      };
+
+      const result = await settingsService.migrateFromLocalStorage(localStorageData);
+
+      expect(result.success).toBe(true);
+      expect(result.migratedGlobalSettings).toBe(true);
+
+      const settings = await settingsService.getGlobalSettings();
+      expect(settings.ntfyEndpoints?.length).toBe(1);
+      expect((settings.ntfyEndpoints as any)?.[0]?.id).toBe('endpoint-1');
+      expect((settings.ntfyEndpoints as any)?.[0]?.name).toBe('My Ntfy Server');
+      expect((settings.ntfyEndpoints as any)?.[0]?.topic).toBe('my-topic');
+    });
+
+    it('should migrate eventHooks and ntfyEndpoints together from localStorage data', async () => {
+      const localStorageData = {
+        'automaker-storage': JSON.stringify({
+          state: {
+            eventHooks: [
+              {
+                id: 'hook-1',
+                name: 'Test Hook',
+                eventType: 'feature:started',
+                enabled: true,
+                actions: [],
+              },
+            ],
+            ntfyEndpoints: [
+              {
+                id: 'endpoint-1',
+                name: 'My Endpoint',
+                serverUrl: 'https://ntfy.sh',
+                topic: 'test-topic',
+                authType: 'none',
+                enabled: true,
+              },
+            ],
+          },
+        }),
+      };
+
+      const result = await settingsService.migrateFromLocalStorage(localStorageData);
+
+      expect(result.success).toBe(true);
+      const settings = await settingsService.getGlobalSettings();
+      expect(settings.eventHooks?.length).toBe(1);
+      expect(settings.ntfyEndpoints?.length).toBe(1);
+      expect((settings.eventHooks as any)?.[0]?.id).toBe('hook-1');
+      expect((settings.ntfyEndpoints as any)?.[0]?.id).toBe('endpoint-1');
+    });
+
+    it('should handle direct localStorage values', async () => {
+      const localStorageData = {
+        'automaker:lastProjectDir': '/path/to/project',
+        'file-browser-recent-folders': JSON.stringify(['/path1', '/path2']),
+        'worktree-panel-collapsed': 'true',
+      };
+
+      const result = await settingsService.migrateFromLocalStorage(localStorageData);
+
+      expect(result.success).toBe(true);
+      const settings = await settingsService.getGlobalSettings();
+      expect(settings.lastProjectDir).toBe('/path/to/project');
+      expect(settings.recentFolders).toEqual(['/path1', '/path2']);
+      expect(settings.worktreePanelCollapsed).toBe(true);
+    });
+
+    it('should handle invalid JSON gracefully', async () => {
+      const localStorageData = {
+        'automaker-storage': 'invalid json',
+        'file-browser-recent-folders': 'invalid json',
+      };
+
+      const result = await settingsService.migrateFromLocalStorage(localStorageData);
+
+      expect(result.success).toBe(false);
+      expect(result.errors.length).toBeGreaterThan(0);
+    });
+
+    // Skip on Windows as chmod doesn't work the same way (CI runs on Linux)
+    it.skipIf(process.platform === 'win32')(
+      'should handle migration errors gracefully',
+      async () => {
+        // Create a read-only directory to cause write errors
+        const readOnlyDir = path.join(os.tmpdir(), `readonly-${Date.now()}`);
+        await fs.mkdir(readOnlyDir, { recursive: true });
+        await fs.chmod(readOnlyDir, 0o444);
+
+        const readOnlyService = new SettingsService(readOnlyDir);
+        const localStorageData = {
+          'automaker-storage': JSON.stringify({
+            state: { theme: 'light' },
+          }),
+        };
+
+        const result = await readOnlyService.migrateFromLocalStorage(localStorageData);
+
+        expect(result.success).toBe(false);
+        expect(result.errors.length).toBeGreaterThan(0);
+
+        await fs.chmod(readOnlyDir, 0o755);
+        await fs.rm(readOnlyDir, { recursive: true, force: true });
+      }
+    );
+  });
+
+  describe('getDataDir', () => {
+    it('should return the data directory path', () => {
+      const dataDir = settingsService.getDataDir();
+      expect(dataDir).toBe(testDataDir);
+    });
+  });
+
+  describe('phase model migration (v2 -> v3)', () => {
+    it('should migrate string phase models to PhaseModelEntry format', async () => {
+      // Simulate v2 format with string phase models
+      const v2Settings = {
+        version: 2,
+        theme: 'dark',
+        phaseModels: {
+          enhancementModel: 'sonnet',
+          fileDescriptionModel: 'haiku',
+          imageDescriptionModel: 'haiku',
+          validationModel: 'sonnet',
+          specGenerationModel: 'opus',
+          featureGenerationModel: 'sonnet',
+          backlogPlanningModel: 'sonnet',
+          projectAnalysisModel: 'sonnet',
+        },
+      };
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(v2Settings, null, 2));
+
+      const settings = await settingsService.getGlobalSettings();
+
+      // Verify all phase models are now PhaseModelEntry objects
+      // Legacy aliases are migrated to canonical IDs
+      expect(settings.phaseModels.enhancementModel).toEqual({ model: 'claude-sonnet' });
+      expect(settings.phaseModels.fileDescriptionModel).toEqual({ model: 'claude-haiku' });
+      expect(settings.phaseModels.specGenerationModel).toEqual({ model: 'claude-opus' });
+      expect(settings.version).toBe(SETTINGS_VERSION);
+    });
+
+    it('should preserve PhaseModelEntry objects during migration', async () => {
+      // Simulate v3 format (already has PhaseModelEntry objects)
+      const v3Settings = {
+        version: 3,
+        theme: 'dark',
+        phaseModels: {
+          enhancementModel: { model: 'sonnet', thinkingLevel: 'high' },
+          fileDescriptionModel: { model: 'haiku' },
+          imageDescriptionModel: { model: 'haiku', thinkingLevel: 'low' },
+          validationModel: { model: 'sonnet' },
+          specGenerationModel: { model: 'opus', thinkingLevel: 'ultrathink' },
+          featureGenerationModel: { model: 'sonnet' },
+          backlogPlanningModel: { model: 'sonnet', thinkingLevel: 'medium' },
+          projectAnalysisModel: { model: 'sonnet' },
+        },
+      };
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(v3Settings, null, 2));
+
+      const settings = await settingsService.getGlobalSettings();
+
+      // Verify PhaseModelEntry objects are preserved with thinkingLevel
+      // Legacy aliases are migrated to canonical IDs
+      expect(settings.phaseModels.enhancementModel).toEqual({
+        model: 'claude-sonnet',
+        thinkingLevel: 'high',
+      });
+      expect(settings.phaseModels.specGenerationModel).toEqual({
+        model: 'claude-opus',
+        thinkingLevel: 'ultrathink',
+      });
+      expect(settings.phaseModels.backlogPlanningModel).toEqual({
+        model: 'claude-sonnet',
+        thinkingLevel: 'medium',
+      });
+    });
+
+    it('should handle mixed format (some string, some object)', async () => {
+      // Edge case: mixed format (shouldn't happen but handle gracefully)
+      const mixedSettings = {
+        version: 2,
+        theme: 'dark',
+        phaseModels: {
+          enhancementModel: 'sonnet', // string
+          fileDescriptionModel: { model: 'haiku', thinkingLevel: 'low' }, // object
+          imageDescriptionModel: 'haiku', // string
+          validationModel: { model: 'opus' }, // object without thinkingLevel
+          specGenerationModel: 'opus',
+          featureGenerationModel: 'sonnet',
+          backlogPlanningModel: 'sonnet',
+          projectAnalysisModel: 'sonnet',
+        },
+      };
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(mixedSettings, null, 2));
+
+      const settings = await settingsService.getGlobalSettings();
+
+      // Strings should be converted to objects with canonical IDs
+      expect(settings.phaseModels.enhancementModel).toEqual({ model: 'claude-sonnet' });
+      expect(settings.phaseModels.imageDescriptionModel).toEqual({ model: 'claude-haiku' });
+      // Objects should be preserved with migrated IDs
+      expect(settings.phaseModels.fileDescriptionModel).toEqual({
+        model: 'claude-haiku',
+        thinkingLevel: 'low',
+      });
+      expect(settings.phaseModels.validationModel).toEqual({ model: 'claude-opus' });
+    });
+
+    it('should migrate legacy enhancementModel/validationModel fields', async () => {
+      // Simulate v1 format with legacy fields
+      const v1Settings = {
+        version: 1,
+        theme: 'dark',
+        enhancementModel: 'haiku',
+        validationModel: 'opus',
+        // No phaseModels object
+      };
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(v1Settings, null, 2));
+
+      const settings = await settingsService.getGlobalSettings();
+
+      // Legacy fields should be migrated to phaseModels with canonical IDs
+      expect(settings.phaseModels.enhancementModel).toEqual({ model: 'claude-haiku' });
+      expect(settings.phaseModels.validationModel).toEqual({ model: 'claude-opus' });
+      // Other fields should use defaults (canonical IDs) - specGenerationModel includes thinkingLevel from DEFAULT_PHASE_MODELS
+      expect(settings.phaseModels.specGenerationModel).toEqual({
+        model: 'claude-opus',
+        thinkingLevel: 'adaptive',
+      });
+    });
+
+    it('should use default phase models when none are configured', async () => {
+      // Simulate empty settings
+      const emptySettings = {
+        version: 1,
+        theme: 'dark',
+      };
+      const settingsPath = path.join(testDataDir, 'settings.json');
+      await fs.writeFile(settingsPath, JSON.stringify(emptySettings, null, 2));
+
+      const settings = await settingsService.getGlobalSettings();
+
+      // Should use DEFAULT_PHASE_MODELS (with canonical IDs) - specGenerationModel includes thinkingLevel from DEFAULT_PHASE_MODELS
+      expect(settings.phaseModels.enhancementModel).toEqual({ model: 'claude-sonnet' });
+      expect(settings.phaseModels.fileDescriptionModel).toEqual({ model: 'claude-haiku' });
+      expect(settings.phaseModels.specGenerationModel).toEqual({
+        model: 'claude-opus',
+        thinkingLevel: 'adaptive',
+      });
+    });
+
+    it('should deep merge phaseModels on update', async () => {
+      // Create initial settings with some phase models
+      await settingsService.updateGlobalSettings({
+        phaseModels: {
+          enhancementModel: { model: 'sonnet', thinkingLevel: 'high' },
+        },
+      });
+
+      // Update with a different phase model
+      await settingsService.updateGlobalSettings({
+        phaseModels: {
+          specGenerationModel: { model: 'opus', thinkingLevel: 'ultrathink' },
+        },
+      });
+
+      const settings = await settingsService.getGlobalSettings();
+
+      // Both should be preserved (models migrated to canonical format)
+      expect(settings.phaseModels.enhancementModel).toEqual({
+        model: 'claude-sonnet',
+        thinkingLevel: 'high',
+      });
+      expect(settings.phaseModels.specGenerationModel).toEqual({
+        model: 'claude-opus',
+        thinkingLevel: 'ultrathink',
+      });
+    });
+  });
+
+  describe('atomicWriteJson', () => {
+    // Skip on Windows as chmod doesn't work the same way (CI runs on Linux)
+    it.skipIf(process.platform === 'win32')(
+      'should handle write errors and clean up temp file',
+      async () => {
+        // Create a read-only directory to cause write errors
+        const readOnlyDir = path.join(os.tmpdir(), `readonly-${Date.now()}`);
+        await fs.mkdir(readOnlyDir, { recursive: true });
+        await fs.chmod(readOnlyDir, 0o444);
+
+        const readOnlyService = new SettingsService(readOnlyDir);
+
+        await expect(readOnlyService.updateGlobalSettings({ theme: 'light' })).rejects.toThrow();
+
+        await fs.chmod(readOnlyDir, 0o755);
+        await fs.rm(readOnlyDir, { recursive: true, force: true });
+      }
+    );
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/spec-parser.test.ts b/temp_repo/apps/server/tests/unit/services/spec-parser.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..205e92c3be4212621bbae7032d311f4c82810ef3
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/spec-parser.test.ts
@@ -0,0 +1,840 @@
+import { describe, it, expect } from 'vitest';
+import {
+  parseTasksFromSpec,
+  detectTaskStartMarker,
+  detectTaskCompleteMarker,
+  detectPhaseCompleteMarker,
+  detectSpecFallback,
+  extractSummary,
+} from '../../../src/services/spec-parser.js';
+
+describe('SpecParser', () => {
+  describe('parseTasksFromSpec', () => {
+    it('should parse tasks from a tasks code block', () => {
+      const specContent = `
+## Specification
+
+Some description here.
+
+\`\`\`tasks
+- [ ] T001: Create user model | File: src/models/user.ts
+- [ ] T002: Add API endpoint | File: src/routes/users.ts
+- [ ] T003: Write unit tests | File: tests/user.test.ts
+\`\`\`
+
+## Notes
+Some notes here.
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks).toHaveLength(3);
+      expect(tasks[0]).toEqual({
+        id: 'T001',
+        description: 'Create user model',
+        filePath: 'src/models/user.ts',
+        phase: undefined,
+        status: 'pending',
+      });
+      expect(tasks[1].id).toBe('T002');
+      expect(tasks[2].id).toBe('T003');
+    });
+
+    it('should parse tasks with phases', () => {
+      const specContent = `
+\`\`\`tasks
+## Phase 1: Foundation
+- [ ] T001: Initialize project | File: package.json
+- [ ] T002: Configure TypeScript | File: tsconfig.json
+
+## Phase 2: Implementation
+- [ ] T003: Create main module | File: src/index.ts
+- [ ] T004: Add utility functions | File: src/utils.ts
+
+## Phase 3: Testing
+- [ ] T005: Write tests | File: tests/index.test.ts
+\`\`\`
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks).toHaveLength(5);
+      expect(tasks[0].phase).toBe('Phase 1: Foundation');
+      expect(tasks[1].phase).toBe('Phase 1: Foundation');
+      expect(tasks[2].phase).toBe('Phase 2: Implementation');
+      expect(tasks[3].phase).toBe('Phase 2: Implementation');
+      expect(tasks[4].phase).toBe('Phase 3: Testing');
+    });
+
+    it('should return empty array for content without tasks', () => {
+      const specContent = 'Just some text without any tasks';
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks).toEqual([]);
+    });
+
+    it('should fallback to finding task lines outside code block', () => {
+      const specContent = `
+## Implementation Plan
+
+- [ ] T001: First task | File: src/first.ts
+- [ ] T002: Second task | File: src/second.ts
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks).toHaveLength(2);
+      expect(tasks[0].id).toBe('T001');
+      expect(tasks[1].id).toBe('T002');
+    });
+
+    it('should handle empty tasks block', () => {
+      const specContent = `
+\`\`\`tasks
+\`\`\`
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks).toEqual([]);
+    });
+
+    it('should handle empty string input', () => {
+      const tasks = parseTasksFromSpec('');
+      expect(tasks).toEqual([]);
+    });
+
+    it('should handle task without file path', () => {
+      const specContent = `
+\`\`\`tasks
+- [ ] T001: Task without file
+\`\`\`
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks).toHaveLength(1);
+      expect(tasks[0]).toEqual({
+        id: 'T001',
+        description: 'Task without file',
+        phase: undefined,
+        status: 'pending',
+      });
+    });
+
+    it('should handle mixed valid and invalid lines', () => {
+      const specContent = `
+\`\`\`tasks
+- [ ] T001: Valid task | File: src/valid.ts
+- Invalid line
+Some other text
+- [ ] T002: Another valid task
+\`\`\`
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks).toHaveLength(2);
+    });
+
+    it('should preserve task order', () => {
+      const specContent = `
+\`\`\`tasks
+- [ ] T003: Third
+- [ ] T001: First
+- [ ] T002: Second
+\`\`\`
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks[0].id).toBe('T003');
+      expect(tasks[1].id).toBe('T001');
+      expect(tasks[2].id).toBe('T002');
+    });
+
+    it('should handle task IDs with different numbers', () => {
+      const specContent = `
+\`\`\`tasks
+- [ ] T001: First
+- [ ] T010: Tenth
+- [ ] T100: Hundredth
+\`\`\`
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks).toHaveLength(3);
+      expect(tasks[0].id).toBe('T001');
+      expect(tasks[1].id).toBe('T010');
+      expect(tasks[2].id).toBe('T100');
+    });
+
+    it('should trim whitespace from description and file path', () => {
+      const specContent = `
+\`\`\`tasks
+- [ ] T001:   Create API endpoint   | File:   src/routes/api.ts
+\`\`\`
+`;
+      const tasks = parseTasksFromSpec(specContent);
+      expect(tasks[0].description).toBe('Create API endpoint');
+      expect(tasks[0].filePath).toBe('src/routes/api.ts');
+    });
+  });
+
+  describe('detectTaskStartMarker', () => {
+    it('should detect task start marker and return task ID', () => {
+      expect(detectTaskStartMarker('[TASK_START] T001')).toBe('T001');
+      expect(detectTaskStartMarker('[TASK_START] T042')).toBe('T042');
+      expect(detectTaskStartMarker('[TASK_START] T999')).toBe('T999');
+    });
+
+    it('should handle marker with description', () => {
+      expect(detectTaskStartMarker('[TASK_START] T001: Creating user model')).toBe('T001');
+    });
+
+    it('should return null when no marker present', () => {
+      expect(detectTaskStartMarker('No marker here')).toBeNull();
+      expect(detectTaskStartMarker('')).toBeNull();
+    });
+
+    it('should find marker in accumulated text', () => {
+      const accumulated = `
+Some earlier output...
+
+Now starting the task:
+[TASK_START] T003: Setting up database
+
+Let me begin by...
+`;
+      expect(detectTaskStartMarker(accumulated)).toBe('T003');
+    });
+
+    it('should handle whitespace variations', () => {
+      expect(detectTaskStartMarker('[TASK_START]  T001')).toBe('T001');
+      expect(detectTaskStartMarker('[TASK_START]\tT001')).toBe('T001');
+    });
+
+    it('should not match invalid task IDs', () => {
+      expect(detectTaskStartMarker('[TASK_START] TASK1')).toBeNull();
+      expect(detectTaskStartMarker('[TASK_START] T1')).toBeNull();
+      expect(detectTaskStartMarker('[TASK_START] T12')).toBeNull();
+    });
+  });
+
+  describe('detectTaskCompleteMarker', () => {
+    it('should detect task complete marker and return task ID', () => {
+      expect(detectTaskCompleteMarker('[TASK_COMPLETE] T001')).toEqual({
+        id: 'T001',
+        summary: undefined,
+      });
+      expect(detectTaskCompleteMarker('[TASK_COMPLETE] T042')).toEqual({
+        id: 'T042',
+        summary: undefined,
+      });
+    });
+
+    it('should handle marker with summary', () => {
+      expect(detectTaskCompleteMarker('[TASK_COMPLETE] T001: User model created')).toEqual({
+        id: 'T001',
+        summary: 'User model created',
+      });
+    });
+
+    it('should return null when no marker present', () => {
+      expect(detectTaskCompleteMarker('No marker here')).toBeNull();
+      expect(detectTaskCompleteMarker('')).toBeNull();
+    });
+
+    it('should find marker in accumulated text', () => {
+      const accumulated = `
+Working on the task...
+
+Done with the implementation:
+[TASK_COMPLETE] T003: Database setup complete
+
+Moving on to...
+`;
+      expect(detectTaskCompleteMarker(accumulated)).toEqual({
+        id: 'T003',
+        summary: 'Database setup complete',
+      });
+    });
+
+    it('should find marker in the middle of a stream with trailing text', () => {
+      const streamText =
+        'The implementation is complete! [TASK_COMPLETE] T001: Added user model and tests. Now let me check the next task...';
+      expect(detectTaskCompleteMarker(streamText)).toEqual({
+        id: 'T001',
+        summary: 'Added user model and tests. Now let me check the next task...',
+      });
+    });
+
+    it('should find marker in the middle of a stream with multiple tasks and return the FIRST match', () => {
+      const streamText =
+        '[TASK_COMPLETE] T001: Task one done. Continuing... [TASK_COMPLETE] T002: Task two done. Moving on...';
+      expect(detectTaskCompleteMarker(streamText)).toEqual({
+        id: 'T001',
+        summary: 'Task one done. Continuing...',
+      });
+    });
+
+    it('should not confuse with TASK_START marker', () => {
+      expect(detectTaskCompleteMarker('[TASK_START] T001')).toBeNull();
+    });
+
+    it('should not match invalid task IDs', () => {
+      expect(detectTaskCompleteMarker('[TASK_COMPLETE] TASK1')).toBeNull();
+      expect(detectTaskCompleteMarker('[TASK_COMPLETE] T1')).toBeNull();
+    });
+
+    it('should allow brackets in summary text', () => {
+      // Regression test: summaries containing array[index] syntax should not be truncated
+      expect(
+        detectTaskCompleteMarker('[TASK_COMPLETE] T001: Supports array[index] access syntax')
+      ).toEqual({
+        id: 'T001',
+        summary: 'Supports array[index] access syntax',
+      });
+    });
+
+    it('should handle summary with multiple brackets', () => {
+      expect(
+        detectTaskCompleteMarker('[TASK_COMPLETE] T042: Fixed bug in data[0].items[key] mapping')
+      ).toEqual({
+        id: 'T042',
+        summary: 'Fixed bug in data[0].items[key] mapping',
+      });
+    });
+
+    it('should stop at newline in summary', () => {
+      const result = detectTaskCompleteMarker(
+        '[TASK_COMPLETE] T001: First line\nSecond line without marker'
+      );
+      expect(result).toEqual({
+        id: 'T001',
+        summary: 'First line',
+      });
+    });
+
+    it('should stop at next TASK_START marker', () => {
+      expect(
+        detectTaskCompleteMarker('[TASK_COMPLETE] T001: Summary text[TASK_START] T002')
+      ).toEqual({
+        id: 'T001',
+        summary: 'Summary text',
+      });
+    });
+  });
+
+  describe('detectPhaseCompleteMarker', () => {
+    it('should detect phase complete marker and return phase number', () => {
+      expect(detectPhaseCompleteMarker('[PHASE_COMPLETE] Phase 1')).toBe(1);
+      expect(detectPhaseCompleteMarker('[PHASE_COMPLETE] Phase 2')).toBe(2);
+      expect(detectPhaseCompleteMarker('[PHASE_COMPLETE] Phase 10')).toBe(10);
+    });
+
+    it('should handle marker with description', () => {
+      expect(detectPhaseCompleteMarker('[PHASE_COMPLETE] Phase 1 complete')).toBe(1);
+      expect(detectPhaseCompleteMarker('[PHASE_COMPLETE] Phase 2: Foundation done')).toBe(2);
+    });
+
+    it('should return null when no marker present', () => {
+      expect(detectPhaseCompleteMarker('No marker here')).toBeNull();
+      expect(detectPhaseCompleteMarker('')).toBeNull();
+    });
+
+    it('should be case-insensitive', () => {
+      expect(detectPhaseCompleteMarker('[PHASE_COMPLETE] phase 1')).toBe(1);
+      expect(detectPhaseCompleteMarker('[PHASE_COMPLETE] PHASE 2')).toBe(2);
+    });
+
+    it('should find marker in accumulated text', () => {
+      const accumulated = `
+Finishing up the phase...
+
+All tasks complete:
+[PHASE_COMPLETE] Phase 2 complete
+
+Starting Phase 3...
+`;
+      expect(detectPhaseCompleteMarker(accumulated)).toBe(2);
+    });
+
+    it('should not confuse with task markers', () => {
+      expect(detectPhaseCompleteMarker('[TASK_COMPLETE] T001')).toBeNull();
+    });
+  });
+
+  describe('detectSpecFallback', () => {
+    it('should detect spec with tasks block and acceptance criteria', () => {
+      const content = `
+## Acceptance Criteria
+- GIVEN a user, WHEN they login, THEN they see the dashboard
+
+\`\`\`tasks
+- [ ] T001: Create login form | File: src/Login.tsx
+\`\`\`
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with task lines and problem statement', () => {
+      const content = `
+## Problem Statement
+Users cannot currently log in to the application.
+
+## Implementation Plan
+- [ ] T001: Add authentication endpoint
+- [ ] T002: Create login UI
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with Goal section (lite planning mode)', () => {
+      const content = `
+**Goal**: Implement user authentication
+
+**Solution**: Use JWT tokens for session management
+
+- [ ] T001: Setup auth middleware
+- [ ] T002: Create token service
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with User Story format', () => {
+      const content = `
+## User Story
+As a user, I want to reset my password, so that I can regain access.
+
+## Technical Context
+This will modify the auth module.
+
+\`\`\`tasks
+- [ ] T001: Add reset endpoint
+\`\`\`
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with Overview section', () => {
+      const content = `
+## Overview
+This feature adds dark mode support.
+
+\`\`\`tasks
+- [ ] T001: Add theme toggle
+\`\`\`
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with Summary section', () => {
+      const content = `
+## Summary
+Adding a new dashboard component.
+
+- [ ] T001: Create dashboard layout
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with implementation plan', () => {
+      const content = `
+## Implementation Plan
+We will add the feature in two phases.
+
+- [ ] T001: Phase 1 setup
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with implementation steps', () => {
+      const content = `
+## Implementation Steps
+Follow these steps:
+
+- [ ] T001: Step one
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should detect spec with implementation approach', () => {
+      const content = `
+## Implementation Approach
+We will use a modular approach.
+
+- [ ] T001: Create modules
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+
+    it('should NOT detect spec without task structure', () => {
+      const content = `
+## Problem Statement
+Users cannot log in.
+
+## Acceptance Criteria
+- GIVEN a user, WHEN they try to login, THEN it works
+`;
+      expect(detectSpecFallback(content)).toBe(false);
+    });
+
+    it('should NOT detect spec without spec content sections', () => {
+      const content = `
+Here are some tasks:
+
+- [ ] T001: Do something
+- [ ] T002: Do another thing
+`;
+      expect(detectSpecFallback(content)).toBe(false);
+    });
+
+    it('should NOT detect random text as spec', () => {
+      expect(detectSpecFallback('Just some random text')).toBe(false);
+      expect(detectSpecFallback('')).toBe(false);
+    });
+
+    it('should handle case-insensitive matching for spec sections', () => {
+      const content = `
+## ACCEPTANCE CRITERIA
+All caps section header
+
+- [ ] T001: Task
+`;
+      expect(detectSpecFallback(content)).toBe(true);
+    });
+  });
+
+  describe('extractSummary', () => {
+    describe('explicit <summary> tags', () => {
+      it('should extract content from summary tags', () => {
+        const text = 'Some preamble <summary>This is the summary content</summary> more text';
+        expect(extractSummary(text)).toBe('This is the summary content');
+      });
+
+      it('should use last match to avoid stale summaries', () => {
+        const text = `
+<summary>Old stale summary</summary>
+
+More agent output...
+
+<summary>Fresh new summary</summary>
+`;
+        expect(extractSummary(text)).toBe('Fresh new summary');
+      });
+
+      it('should handle multiline summary content', () => {
+        const text = `<summary>First line
+Second line
+Third line</summary>`;
+        expect(extractSummary(text)).toBe('First line\nSecond line\nThird line');
+      });
+
+      it('should trim whitespace from summary', () => {
+        const text = '<summary>  trimmed content  </summary>';
+        expect(extractSummary(text)).toBe('trimmed content');
+      });
+    });
+
+    describe('## Summary section (markdown)', () => {
+      it('should extract from ## Summary section', () => {
+        const text = `
+## Summary
+
+This is a summary paragraph.
+
+## Other Section
+More content.
+`;
+        expect(extractSummary(text)).toBe('This is a summary paragraph.');
+      });
+
+      it('should truncate long summaries to 500 chars', () => {
+        const longContent = 'A'.repeat(600);
+        const text = `
+## Summary
+
+${longContent}
+
+## Next Section
+`;
+        const result = extractSummary(text);
+        expect(result).not.toBeNull();
+        expect(result!.length).toBeLessThanOrEqual(503); // 500 + '...'
+        expect(result!.endsWith('...')).toBe(true);
+      });
+
+      it('should use last match for ## Summary', () => {
+        const text = `
+## Summary
+
+Old summary content.
+
+## Summary
+
+New summary content.
+`;
+        expect(extractSummary(text)).toBe('New summary content.');
+      });
+
+      it('should stop at next markdown header', () => {
+        const text = `
+## Summary
+
+Summary content here.
+
+## Implementation
+Implementation details.
+`;
+        expect(extractSummary(text)).toBe('Summary content here.');
+      });
+
+      it('should include ### subsections within the summary (not cut off at ### Root Cause)', () => {
+        const text = `
+## Summary
+
+Overview of changes.
+
+### Root Cause
+The bug was caused by X.
+
+### Fix Applied
+Changed Y to Z.
+
+## Other Section
+More content.
+`;
+        const result = extractSummary(text);
+        expect(result).not.toBeNull();
+        expect(result).toContain('Overview of changes.');
+        expect(result).toContain('### Root Cause');
+        expect(result).toContain('The bug was caused by X.');
+        expect(result).toContain('### Fix Applied');
+        expect(result).toContain('Changed Y to Z.');
+        expect(result).not.toContain('## Other Section');
+      });
+
+      it('should include ### subsections and stop at next ## header', () => {
+        const text = `
+## Summary
+
+Brief intro.
+
+### Changes
+- File A modified
+- File B added
+
+### Notes
+Important context.
+
+## Implementation
+Details here.
+`;
+        const result = extractSummary(text);
+        expect(result).not.toBeNull();
+        expect(result).toContain('Brief intro.');
+        expect(result).toContain('### Changes');
+        expect(result).toContain('### Notes');
+        expect(result).not.toContain('## Implementation');
+      });
+    });
+
+    describe('**Goal**: section (lite planning mode)', () => {
+      it('should extract from **Goal**: section', () => {
+        const text = '**Goal**: Implement user authentication\n**Approach**: Use JWT';
+        expect(extractSummary(text)).toBe('Implement user authentication');
+      });
+
+      it('should use last match for **Goal**:', () => {
+        const text = `
+**Goal**: Old goal
+
+More output...
+
+**Goal**: New goal
+`;
+        expect(extractSummary(text)).toBe('New goal');
+      });
+
+      it('should handle inline goal', () => {
+        const text = '1. **Goal**: Add login functionality';
+        expect(extractSummary(text)).toBe('Add login functionality');
+      });
+    });
+
+    describe('**Problem**: section (spec/full modes)', () => {
+      it('should extract from **Problem**: section', () => {
+        const text = `
+**Problem**: Users cannot log in to the application
+
+**Solution**: Add authentication
+`;
+        expect(extractSummary(text)).toBe('Users cannot log in to the application');
+      });
+
+      it('should extract from **Problem Statement**: section', () => {
+        const text = `
+**Problem Statement**: Users need password reset functionality
+
+1. Create reset endpoint
+`;
+        expect(extractSummary(text)).toBe('Users need password reset functionality');
+      });
+
+      it('should truncate long problem descriptions', () => {
+        const longProblem = 'X'.repeat(600);
+        const text = `**Problem**: ${longProblem}`;
+        const result = extractSummary(text);
+        expect(result).not.toBeNull();
+        expect(result!.length).toBeLessThanOrEqual(503);
+      });
+    });
+
+    describe('**Solution**: section (fallback)', () => {
+      it('should extract from **Solution**: section as fallback', () => {
+        const text = '**Solution**: Use JWT for authentication\n1. Install package';
+        expect(extractSummary(text)).toBe('Use JWT for authentication');
+      });
+
+      it('should truncate solution to 300 chars', () => {
+        const longSolution = 'Y'.repeat(400);
+        const text = `**Solution**: ${longSolution}`;
+        const result = extractSummary(text);
+        expect(result).not.toBeNull();
+        expect(result!.length).toBeLessThanOrEqual(303);
+      });
+    });
+
+    describe('priority order', () => {
+      it('should prefer <summary> over ## Summary', () => {
+        const text = `
+## Summary
+
+Markdown summary
+
+<summary>Tagged summary</summary>
+`;
+        expect(extractSummary(text)).toBe('Tagged summary');
+      });
+
+      it('should prefer ## Summary over **Goal**:', () => {
+        const text = `
+**Goal**: Goal content
+
+## Summary
+
+Summary section content.
+`;
+        expect(extractSummary(text)).toBe('Summary section content.');
+      });
+
+      it('should prefer **Goal**: over **Problem**:', () => {
+        const text = `
+**Problem**: Problem description
+
+**Goal**: Goal description
+`;
+        expect(extractSummary(text)).toBe('Goal description');
+      });
+
+      it('should prefer **Problem**: over **Solution**:', () => {
+        const text = `
+**Solution**: Solution description
+
+**Problem**: Problem description
+`;
+        expect(extractSummary(text)).toBe('Problem description');
+      });
+    });
+
+    describe('edge cases', () => {
+      it('should return null for empty string', () => {
+        expect(extractSummary('')).toBeNull();
+      });
+
+      it('should return null when no summary pattern found', () => {
+        expect(extractSummary('Random text without any summary patterns')).toBeNull();
+      });
+
+      it('should include all paragraphs in ## Summary section', () => {
+        const text = `
+## Summary
+
+First paragraph of summary.
+
+Second paragraph of summary.
+
+## Other
+`;
+        const result = extractSummary(text);
+        expect(result).toContain('First paragraph of summary.');
+        expect(result).toContain('Second paragraph of summary.');
+      });
+    });
+
+    describe('pipeline accumulated output (multiple <summary> tags)', () => {
+      it('should return only the LAST summary tag from accumulated pipeline output', () => {
+        // Documents WHY the UI needs server-side feature.summary:
+        // When pipeline steps accumulate raw output in agent-output.md, each step
+        // writes its own <summary> tag. extractSummary takes only the LAST match,
+        // losing all previous steps' summaries.
+        const accumulatedOutput = `
+## Step 1: Code Review
+
+Some review output...
+
+<summary>
+## Code Review Summary
+- Found 3 issues
+- Suggested 2 improvements
+</summary>
+
+---
+
+## Follow-up Session
+
+## Step 2: Testing
+
+Running tests...
+
+<summary>
+## Testing Summary
+- All 15 tests pass
+- Coverage at 92%
+</summary>
+`;
+        const result = extractSummary(accumulatedOutput);
+        // Only the LAST summary tag is returned - the Code Review summary is lost
+        expect(result).toBe('## Testing Summary\n- All 15 tests pass\n- Coverage at 92%');
+        expect(result).not.toContain('Code Review');
+      });
+
+      it('should return only the LAST summary from three pipeline steps', () => {
+        const accumulatedOutput = `
+<summary>Step 1: Implementation complete</summary>
+
+---
+
+## Follow-up Session
+
+<summary>Step 2: Code review findings</summary>
+
+---
+
+## Follow-up Session
+
+<summary>Step 3: All tests passing</summary>
+`;
+        const result = extractSummary(accumulatedOutput);
+        expect(result).toBe('Step 3: All tests passing');
+        expect(result).not.toContain('Step 1');
+        expect(result).not.toContain('Step 2');
+      });
+
+      it('should handle accumulated output where only one step has a summary tag', () => {
+        const accumulatedOutput = `
+## Step 1: Implementation
+Some raw output without summary tags...
+
+---
+
+## Follow-up Session
+
+## Step 2: Testing
+
+<summary>
+## Test Results
+- All tests pass
+</summary>
+`;
+        const result = extractSummary(accumulatedOutput);
+        expect(result).toBe('## Test Results\n- All tests pass');
+      });
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/terminal-service.test.ts b/temp_repo/apps/server/tests/unit/services/terminal-service.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d9258433cd78db4c3f203dadcb7107d608129147
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/terminal-service.test.ts
@@ -0,0 +1,643 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { TerminalService, getTerminalService } from '@/services/terminal-service.js';
+import * as pty from 'node-pty';
+import * as os from 'os';
+import * as path from 'path';
+import * as platform from '@automaker/platform';
+import * as secureFs from '@/lib/secure-fs.js';
+
+vi.mock('node-pty');
+vi.mock('os');
+vi.mock('@automaker/platform', async () => {
+  const actual = await vi.importActual('@automaker/platform');
+  return {
+    ...actual,
+    systemPathExists: vi.fn(),
+    systemPathReadFileSync: vi.fn(),
+    getWslVersionPath: vi.fn(),
+    getShellPaths: vi.fn(), // Mock shell paths for cross-platform testing
+    isAllowedSystemPath: vi.fn(() => true), // Allow all paths in tests
+  };
+});
+vi.mock('@/lib/secure-fs.js');
+
+describe('terminal-service.ts', () => {
+  let service: TerminalService;
+  let mockPtyProcess: any;
+
+  // Shell paths for each platform (matching system-paths.ts)
+  const linuxShellPaths = [
+    '/bin/zsh',
+    '/bin/bash',
+    '/bin/sh',
+    '/usr/bin/zsh',
+    '/usr/bin/bash',
+    '/usr/bin/sh',
+    '/usr/local/bin/zsh',
+    '/usr/local/bin/bash',
+    '/opt/homebrew/bin/zsh',
+    '/opt/homebrew/bin/bash',
+    'zsh',
+    'bash',
+    'sh',
+  ];
+
+  const windowsShellPaths = [
+    'C:\\Program Files\\PowerShell\\7\\pwsh.exe',
+    'C:\\Program Files\\PowerShell\\7-preview\\pwsh.exe',
+    'C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe',
+    'C:\\Windows\\System32\\cmd.exe',
+    'pwsh.exe',
+    'pwsh',
+    'powershell.exe',
+    'powershell',
+    'cmd.exe',
+    'cmd',
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    service = new TerminalService();
+
+    // Mock PTY process
+    mockPtyProcess = {
+      onData: vi.fn(),
+      onExit: vi.fn(),
+      write: vi.fn(),
+      resize: vi.fn(),
+      kill: vi.fn(),
+    };
+
+    vi.mocked(pty.spawn).mockReturnValue(mockPtyProcess);
+    vi.mocked(os.homedir).mockReturnValue('/home/user');
+    vi.mocked(os.platform).mockReturnValue('linux');
+    vi.mocked(os.arch).mockReturnValue('x64');
+
+    // Default mocks for system paths and secureFs
+    vi.mocked(platform.systemPathExists).mockReturnValue(true);
+    vi.mocked(platform.systemPathReadFileSync).mockReturnValue('');
+    vi.mocked(platform.getWslVersionPath).mockReturnValue('/proc/version');
+    vi.mocked(platform.getShellPaths).mockReturnValue(linuxShellPaths); // Default to Linux paths
+    vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+  });
+
+  afterEach(() => {
+    service.cleanup();
+  });
+
+  describe('detectShell', () => {
+    it('should detect PowerShell Core on Windows when available', () => {
+      vi.mocked(os.platform).mockReturnValue('win32');
+      vi.mocked(platform.getShellPaths).mockReturnValue(windowsShellPaths);
+      vi.mocked(platform.systemPathExists).mockImplementation((path: string) => {
+        return path === 'C:\\Program Files\\PowerShell\\7\\pwsh.exe';
+      });
+
+      const result = service.detectShell();
+
+      expect(result.shell).toBe('C:\\Program Files\\PowerShell\\7\\pwsh.exe');
+      expect(result.args).toEqual([]);
+    });
+
+    it('should fall back to PowerShell on Windows if Core not available', () => {
+      vi.mocked(os.platform).mockReturnValue('win32');
+      vi.mocked(platform.getShellPaths).mockReturnValue(windowsShellPaths);
+      vi.mocked(platform.systemPathExists).mockImplementation((path: string) => {
+        return path === 'C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe';
+      });
+
+      const result = service.detectShell();
+
+      expect(result.shell).toBe('C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe');
+      expect(result.args).toEqual([]);
+    });
+
+    it('should fall back to cmd.exe on Windows if no PowerShell', () => {
+      vi.mocked(os.platform).mockReturnValue('win32');
+      vi.mocked(platform.getShellPaths).mockReturnValue(windowsShellPaths);
+      vi.mocked(platform.systemPathExists).mockReturnValue(false);
+
+      const result = service.detectShell();
+
+      expect(result.shell).toBe('cmd.exe');
+      expect(result.args).toEqual([]);
+    });
+
+    it('should detect user shell on macOS', () => {
+      vi.mocked(os.platform).mockReturnValue('darwin');
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/zsh' });
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+
+      const result = service.detectShell();
+
+      expect(result.shell).toBe('/bin/zsh');
+      expect(result.args).toEqual(['--login']);
+    });
+
+    it('should fall back to zsh on macOS if user shell not available', () => {
+      vi.mocked(os.platform).mockReturnValue('darwin');
+      vi.spyOn(process, 'env', 'get').mockReturnValue({});
+      vi.mocked(platform.systemPathExists).mockImplementation((path: string) => {
+        return path === '/bin/zsh';
+      });
+
+      const result = service.detectShell();
+
+      expect(result.shell).toBe('/bin/zsh');
+      expect(result.args).toEqual(['--login']);
+    });
+
+    it('should fall back to bash on macOS if zsh not available', () => {
+      vi.mocked(os.platform).mockReturnValue('darwin');
+      vi.spyOn(process, 'env', 'get').mockReturnValue({});
+      // zsh not available, but bash is
+      vi.mocked(platform.systemPathExists).mockImplementation((path: string) => {
+        return path === '/bin/bash';
+      });
+
+      const result = service.detectShell();
+
+      expect(result.shell).toBe('/bin/bash');
+      expect(result.args).toEqual(['--login']);
+    });
+
+    it('should detect user shell on Linux', () => {
+      vi.mocked(os.platform).mockReturnValue('linux');
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+
+      const result = service.detectShell();
+
+      expect(result.shell).toBe('/bin/bash');
+      expect(result.args).toEqual(['--login']);
+    });
+
+    it('should fall back to bash on Linux if user shell not available', () => {
+      vi.mocked(os.platform).mockReturnValue('linux');
+      vi.spyOn(process, 'env', 'get').mockReturnValue({});
+      vi.mocked(platform.systemPathExists).mockImplementation((path: string) => {
+        return path === '/bin/bash';
+      });
+
+      const result = service.detectShell();
+
+      expect(result.shell).toBe('/bin/bash');
+      expect(result.args).toEqual(['--login']);
+    });
+
+    it('should fall back to sh on Linux if bash not available', () => {
+      vi.mocked(os.platform).mockReturnValue('linux');
+      vi.spyOn(process, 'env', 'get').mockReturnValue({});
+      vi.mocked(platform.systemPathExists).mockReturnValue(false);
+
+      const result = service.detectShell();
+
+      expect(result.shell).toBe('/bin/sh');
+      expect(result.args).toEqual([]);
+    });
+
+    it('should detect WSL and use appropriate shell', () => {
+      vi.mocked(os.platform).mockReturnValue('linux');
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(platform.systemPathReadFileSync).mockReturnValue(
+        'Linux version 5.10.0-microsoft-standard-WSL2'
+      );
+
+      const result = service.detectShell();
+
+      expect(result.shell).toBe('/bin/bash');
+      expect(result.args).toEqual(['--login']);
+    });
+  });
+
+  describe('isWSL', () => {
+    it('should return true if /proc/version contains microsoft', () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(platform.systemPathReadFileSync).mockReturnValue(
+        'Linux version 5.10.0-microsoft-standard-WSL2'
+      );
+
+      expect(service.isWSL()).toBe(true);
+    });
+
+    it('should return true if /proc/version contains wsl', () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(platform.systemPathReadFileSync).mockReturnValue('Linux version 5.10.0-wsl2');
+
+      expect(service.isWSL()).toBe(true);
+    });
+
+    it('should return true if WSL_DISTRO_NAME is set', () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(false);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ WSL_DISTRO_NAME: 'Ubuntu' });
+
+      expect(service.isWSL()).toBe(true);
+    });
+
+    it('should return true if WSLENV is set', () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(false);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ WSLENV: 'PATH/l' });
+
+      expect(service.isWSL()).toBe(true);
+    });
+
+    it('should return false if not in WSL', () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(false);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({});
+
+      expect(service.isWSL()).toBe(false);
+    });
+
+    it('should return false if error reading /proc/version', () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(platform.systemPathReadFileSync).mockImplementation(() => {
+        throw new Error('Permission denied');
+      });
+
+      expect(service.isWSL()).toBe(false);
+    });
+  });
+
+  describe('getPlatformInfo', () => {
+    it('should return platform information', () => {
+      vi.mocked(os.platform).mockReturnValue('linux');
+      vi.mocked(os.arch).mockReturnValue('x64');
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      const info = service.getPlatformInfo();
+
+      expect(info.platform).toBe('linux');
+      expect(info.arch).toBe('x64');
+      expect(info.defaultShell).toBe('/bin/bash');
+      expect(typeof info.isWSL).toBe('boolean');
+    });
+  });
+
+  describe('createSession', () => {
+    it('should create a new terminal session', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      const session = await service.createSession({
+        cwd: '/test/dir',
+        cols: 100,
+        rows: 30,
+      });
+
+      expect(session).not.toBeNull();
+      expect(session!.id).toMatch(/^term-/);
+      expect(session!.cwd).toBe(path.resolve('/test/dir'));
+      expect(session!.shell).toBe('/bin/bash');
+      expect(pty.spawn).toHaveBeenCalledWith(
+        '/bin/bash',
+        ['--login'],
+        expect.objectContaining({
+          cwd: path.resolve('/test/dir'),
+          cols: 100,
+          rows: 30,
+        })
+      );
+    });
+
+    it('should use default cols and rows if not provided', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      await service.createSession();
+
+      expect(pty.spawn).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.any(Array),
+        expect.objectContaining({
+          cols: 80,
+          rows: 24,
+        })
+      );
+    });
+
+    it('should fall back to home directory if cwd does not exist', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockRejectedValue(new Error('ENOENT'));
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      const session = await service.createSession({
+        cwd: '/nonexistent',
+      });
+
+      expect(session).not.toBeNull();
+      expect(session!.cwd).toBe('/home/user');
+    });
+
+    it('should fall back to home directory if cwd is not a directory', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => false } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      const session = await service.createSession({
+        cwd: '/file.txt',
+      });
+
+      expect(session).not.toBeNull();
+      expect(session!.cwd).toBe('/home/user');
+    });
+
+    it('should fix double slashes in path', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      const session = await service.createSession({
+        cwd: '//test/dir',
+      });
+
+      expect(session).not.toBeNull();
+      expect(session!.cwd).toBe(path.resolve('/test/dir'));
+    });
+
+    it('should preserve WSL UNC paths', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      const session = await service.createSession({
+        cwd: '//wsl$/Ubuntu/home',
+      });
+
+      expect(session).not.toBeNull();
+      expect(session!.cwd).toBe('//wsl$/Ubuntu/home');
+    });
+
+    it('should handle data events from PTY', async () => {
+      vi.useFakeTimers();
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      const dataCallback = vi.fn();
+      service.onData(dataCallback);
+
+      await service.createSession();
+
+      // Simulate data event
+      const onDataHandler = mockPtyProcess.onData.mock.calls[0][0];
+      onDataHandler('test data');
+
+      // Wait for throttled output
+      vi.advanceTimersByTime(20);
+
+      expect(dataCallback).toHaveBeenCalled();
+
+      vi.useRealTimers();
+    });
+
+    it('should handle exit events from PTY', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      const exitCallback = vi.fn();
+      service.onExit(exitCallback);
+
+      const session = await service.createSession();
+
+      // Simulate exit event
+      const onExitHandler = mockPtyProcess.onExit.mock.calls[0][0];
+      onExitHandler({ exitCode: 0 });
+
+      expect(session).not.toBeNull();
+      expect(exitCallback).toHaveBeenCalledWith(session!.id, 0);
+      expect(service.getSession(session!.id)).toBeUndefined();
+    });
+  });
+
+  describe('write', () => {
+    it('should write data to existing session', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      const session = await service.createSession();
+      const result = service.write(session!.id, 'ls\n');
+
+      expect(result).toBe(true);
+      expect(mockPtyProcess.write).toHaveBeenCalledWith('ls\n');
+    });
+
+    it('should return false for non-existent session', () => {
+      const result = service.write('nonexistent', 'data');
+
+      expect(result).toBe(false);
+      expect(mockPtyProcess.write).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('resize', () => {
+    it('should resize existing session', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      const session = await service.createSession();
+      const result = service.resize(session!.id, 120, 40);
+
+      expect(result).toBe(true);
+      expect(mockPtyProcess.resize).toHaveBeenCalledWith(120, 40);
+    });
+
+    it('should return false for non-existent session', () => {
+      const result = service.resize('nonexistent', 120, 40);
+
+      expect(result).toBe(false);
+      expect(mockPtyProcess.resize).not.toHaveBeenCalled();
+    });
+
+    it('should handle resize errors', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+      mockPtyProcess.resize.mockImplementation(() => {
+        throw new Error('Resize failed');
+      });
+
+      const session = await service.createSession();
+      const result = service.resize(session!.id, 120, 40);
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('killSession', () => {
+    it('should kill existing session', async () => {
+      vi.useFakeTimers();
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      const session = await service.createSession();
+      const result = service.killSession(session!.id);
+
+      expect(result).toBe(true);
+      expect(mockPtyProcess.kill).toHaveBeenCalledWith('SIGTERM');
+
+      // Session is removed after SIGKILL timeout (1 second)
+      vi.advanceTimersByTime(1000);
+
+      expect(mockPtyProcess.kill).toHaveBeenCalledWith('SIGKILL');
+      expect(service.getSession(session!.id)).toBeUndefined();
+
+      vi.useRealTimers();
+    });
+
+    it('should return false for non-existent session', () => {
+      const result = service.killSession('nonexistent');
+
+      expect(result).toBe(false);
+    });
+
+    it('should handle kill errors', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+      mockPtyProcess.kill.mockImplementation(() => {
+        throw new Error('Kill failed');
+      });
+
+      const session = await service.createSession();
+      const result = service.killSession(session!.id);
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('getSession', () => {
+    it('should return existing session', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      const session = await service.createSession();
+      const retrieved = service.getSession(session!.id);
+
+      expect(retrieved).toBe(session);
+    });
+
+    it('should return undefined for non-existent session', () => {
+      const retrieved = service.getSession('nonexistent');
+
+      expect(retrieved).toBeUndefined();
+    });
+  });
+
+  describe('getScrollback', () => {
+    it('should return scrollback buffer for existing session', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      const session = await service.createSession();
+      session!.scrollbackBuffer = 'test scrollback';
+
+      const scrollback = service.getScrollback(session!.id);
+
+      expect(scrollback).toBe('test scrollback');
+    });
+
+    it('should return null for non-existent session', () => {
+      const scrollback = service.getScrollback('nonexistent');
+
+      expect(scrollback).toBeNull();
+    });
+  });
+
+  describe('getAllSessions', () => {
+    it('should return all active sessions', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      const session1 = await service.createSession({ cwd: '/dir1' });
+      const session2 = await service.createSession({ cwd: '/dir2' });
+
+      const sessions = service.getAllSessions();
+
+      expect(sessions).toHaveLength(2);
+      expect(session1).not.toBeNull();
+      expect(session2).not.toBeNull();
+      expect(sessions[0].id).toBe(session1!.id);
+      expect(sessions[1].id).toBe(session2!.id);
+      expect(sessions[0].cwd).toBe(path.resolve('/dir1'));
+      expect(sessions[1].cwd).toBe(path.resolve('/dir2'));
+    });
+
+    it('should return empty array if no sessions', () => {
+      const sessions = service.getAllSessions();
+
+      expect(sessions).toEqual([]);
+    });
+  });
+
+  describe('onData and onExit', () => {
+    it('should allow subscribing and unsubscribing from data events', () => {
+      const callback = vi.fn();
+      const unsubscribe = service.onData(callback);
+
+      expect(typeof unsubscribe).toBe('function');
+
+      unsubscribe();
+    });
+
+    it('should allow subscribing and unsubscribing from exit events', () => {
+      const callback = vi.fn();
+      const unsubscribe = service.onExit(callback);
+
+      expect(typeof unsubscribe).toBe('function');
+
+      unsubscribe();
+    });
+  });
+
+  describe('cleanup', () => {
+    it('should clean up all sessions', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+
+      const session1 = await service.createSession();
+      const session2 = await service.createSession();
+
+      service.cleanup();
+
+      expect(session1).not.toBeNull();
+      expect(session2).not.toBeNull();
+      expect(service.getSession(session1!.id)).toBeUndefined();
+      expect(service.getSession(session2!.id)).toBeUndefined();
+      expect(service.getAllSessions()).toHaveLength(0);
+    });
+
+    it('should handle cleanup errors gracefully', async () => {
+      vi.mocked(platform.systemPathExists).mockReturnValue(true);
+      vi.mocked(secureFs.stat).mockResolvedValue({ isDirectory: () => true } as any);
+      vi.spyOn(process, 'env', 'get').mockReturnValue({ SHELL: '/bin/bash' });
+      mockPtyProcess.kill.mockImplementation(() => {
+        throw new Error('Kill failed');
+      });
+
+      await service.createSession();
+
+      expect(() => service.cleanup()).not.toThrow();
+    });
+  });
+
+  describe('getTerminalService', () => {
+    it('should return singleton instance', () => {
+      const instance1 = getTerminalService();
+      const instance2 = getTerminalService();
+
+      expect(instance1).toBe(instance2);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/typed-event-bus.test.ts b/temp_repo/apps/server/tests/unit/services/typed-event-bus.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..85c5b20286da86893e15bc38b0cce56ac0f25dfb
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/typed-event-bus.test.ts
@@ -0,0 +1,299 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { TypedEventBus } from '../../../src/services/typed-event-bus.js';
+import type { EventEmitter, EventCallback, EventType } from '../../../src/lib/events.js';
+
+/**
+ * Create a mock EventEmitter for testing
+ */
+function createMockEventEmitter(): EventEmitter & {
+  emitCalls: Array<{ type: EventType; payload: unknown }>;
+  subscribers: Set<EventCallback>;
+} {
+  const subscribers = new Set<EventCallback>();
+  const emitCalls: Array<{ type: EventType; payload: unknown }> = [];
+
+  return {
+    emitCalls,
+    subscribers,
+    emit(type: EventType, payload: unknown) {
+      emitCalls.push({ type, payload });
+      // Also call subscribers to simulate real behavior
+      for (const callback of subscribers) {
+        callback(type, payload);
+      }
+    },
+    subscribe(callback: EventCallback) {
+      subscribers.add(callback);
+      return () => {
+        subscribers.delete(callback);
+      };
+    },
+  };
+}
+
+describe('TypedEventBus', () => {
+  let mockEmitter: ReturnType<typeof createMockEventEmitter>;
+  let eventBus: TypedEventBus;
+
+  beforeEach(() => {
+    mockEmitter = createMockEventEmitter();
+    eventBus = new TypedEventBus(mockEmitter);
+  });
+
+  describe('constructor', () => {
+    it('should wrap an EventEmitter', () => {
+      expect(eventBus).toBeInstanceOf(TypedEventBus);
+    });
+
+    it('should store the underlying emitter', () => {
+      expect(eventBus.getUnderlyingEmitter()).toBe(mockEmitter);
+    });
+  });
+
+  describe('emit', () => {
+    it('should pass events directly to the underlying emitter', () => {
+      const payload = { test: 'data' };
+      eventBus.emit('feature:created', payload);
+
+      expect(mockEmitter.emitCalls).toHaveLength(1);
+      expect(mockEmitter.emitCalls[0]).toEqual({
+        type: 'feature:created',
+        payload: { test: 'data' },
+      });
+    });
+
+    it('should handle various event types', () => {
+      eventBus.emit('feature:updated', { id: '1' });
+      eventBus.emit('agent:streaming', { chunk: 'data' });
+      eventBus.emit('error', { message: 'error' });
+
+      expect(mockEmitter.emitCalls).toHaveLength(3);
+      expect(mockEmitter.emitCalls[0].type).toBe('feature:updated');
+      expect(mockEmitter.emitCalls[1].type).toBe('agent:streaming');
+      expect(mockEmitter.emitCalls[2].type).toBe('error');
+    });
+  });
+
+  describe('emitAutoModeEvent', () => {
+    it('should wrap events in auto-mode:event format', () => {
+      eventBus.emitAutoModeEvent('auto_mode_started', { projectPath: '/test' });
+
+      expect(mockEmitter.emitCalls).toHaveLength(1);
+      expect(mockEmitter.emitCalls[0].type).toBe('auto-mode:event');
+    });
+
+    it('should include event type in payload', () => {
+      eventBus.emitAutoModeEvent('auto_mode_started', { projectPath: '/test' });
+
+      const payload = mockEmitter.emitCalls[0].payload as Record<string, unknown>;
+      expect(payload.type).toBe('auto_mode_started');
+    });
+
+    it('should spread additional data into payload', () => {
+      eventBus.emitAutoModeEvent('auto_mode_feature_start', {
+        featureId: 'feat-1',
+        featureName: 'Test Feature',
+        projectPath: '/project',
+      });
+
+      const payload = mockEmitter.emitCalls[0].payload as Record<string, unknown>;
+      expect(payload).toEqual({
+        type: 'auto_mode_feature_start',
+        featureId: 'feat-1',
+        featureName: 'Test Feature',
+        projectPath: '/project',
+      });
+    });
+
+    it('should handle empty data object', () => {
+      eventBus.emitAutoModeEvent('auto_mode_idle', {});
+
+      const payload = mockEmitter.emitCalls[0].payload as Record<string, unknown>;
+      expect(payload).toEqual({ type: 'auto_mode_idle' });
+    });
+
+    it('should preserve exact event format for frontend compatibility', () => {
+      // This test verifies the exact format that the frontend expects
+      eventBus.emitAutoModeEvent('auto_mode_progress', {
+        featureId: 'feat-123',
+        progress: 50,
+        message: 'Processing...',
+      });
+
+      expect(mockEmitter.emitCalls[0]).toEqual({
+        type: 'auto-mode:event',
+        payload: {
+          type: 'auto_mode_progress',
+          featureId: 'feat-123',
+          progress: 50,
+          message: 'Processing...',
+        },
+      });
+    });
+
+    it('should handle all standard auto-mode event types', () => {
+      const eventTypes = [
+        'auto_mode_started',
+        'auto_mode_stopped',
+        'auto_mode_idle',
+        'auto_mode_error',
+        'auto_mode_paused_failures',
+        'auto_mode_feature_start',
+        'auto_mode_feature_complete',
+        'auto_mode_feature_resuming',
+        'auto_mode_progress',
+        'auto_mode_tool',
+        'auto_mode_task_started',
+        'auto_mode_task_complete',
+        'planning_started',
+        'plan_approval_required',
+        'plan_approved',
+        'plan_rejected',
+      ] as const;
+
+      for (const eventType of eventTypes) {
+        eventBus.emitAutoModeEvent(eventType, { test: true });
+      }
+
+      expect(mockEmitter.emitCalls).toHaveLength(eventTypes.length);
+      mockEmitter.emitCalls.forEach((call, index) => {
+        expect(call.type).toBe('auto-mode:event');
+        const payload = call.payload as Record<string, unknown>;
+        expect(payload.type).toBe(eventTypes[index]);
+      });
+    });
+
+    it('should allow custom event types (string extensibility)', () => {
+      eventBus.emitAutoModeEvent('custom_event_type', { custom: 'data' });
+
+      const payload = mockEmitter.emitCalls[0].payload as Record<string, unknown>;
+      expect(payload.type).toBe('custom_event_type');
+    });
+  });
+
+  describe('subscribe', () => {
+    it('should pass subscriptions to the underlying emitter', () => {
+      const callback = vi.fn();
+      eventBus.subscribe(callback);
+
+      expect(mockEmitter.subscribers.has(callback)).toBe(true);
+    });
+
+    it('should return an unsubscribe function', () => {
+      const callback = vi.fn();
+      const unsubscribe = eventBus.subscribe(callback);
+
+      expect(mockEmitter.subscribers.has(callback)).toBe(true);
+
+      unsubscribe();
+
+      expect(mockEmitter.subscribers.has(callback)).toBe(false);
+    });
+
+    it('should receive events when subscribed', () => {
+      const callback = vi.fn();
+      eventBus.subscribe(callback);
+
+      eventBus.emit('feature:created', { id: '1' });
+
+      expect(callback).toHaveBeenCalledWith('feature:created', { id: '1' });
+    });
+
+    it('should receive auto-mode events when subscribed', () => {
+      const callback = vi.fn();
+      eventBus.subscribe(callback);
+
+      eventBus.emitAutoModeEvent('auto_mode_started', { projectPath: '/test' });
+
+      expect(callback).toHaveBeenCalledWith('auto-mode:event', {
+        type: 'auto_mode_started',
+        projectPath: '/test',
+      });
+    });
+
+    it('should not receive events after unsubscribe', () => {
+      const callback = vi.fn();
+      const unsubscribe = eventBus.subscribe(callback);
+
+      eventBus.emit('event1', {});
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      unsubscribe();
+
+      eventBus.emit('event2', {});
+      expect(callback).toHaveBeenCalledTimes(1); // Still 1, not called again
+    });
+  });
+
+  describe('getUnderlyingEmitter', () => {
+    it('should return the wrapped EventEmitter', () => {
+      const emitter = eventBus.getUnderlyingEmitter();
+      expect(emitter).toBe(mockEmitter);
+    });
+
+    it('should allow direct access for special cases', () => {
+      const emitter = eventBus.getUnderlyingEmitter();
+
+      // Verify we can use it directly
+      emitter.emit('direct:event', { direct: true });
+
+      expect(mockEmitter.emitCalls).toHaveLength(1);
+      expect(mockEmitter.emitCalls[0].type).toBe('direct:event');
+    });
+  });
+
+  describe('integration with real EventEmitter pattern', () => {
+    it('should produce the exact payload format used by AutoModeService', () => {
+      // This test documents the exact format that was in AutoModeService.emitAutoModeEvent
+      // before extraction, ensuring backward compatibility
+
+      const receivedEvents: Array<{ type: EventType; payload: unknown }> = [];
+
+      eventBus.subscribe((type, payload) => {
+        receivedEvents.push({ type, payload });
+      });
+
+      // Simulate the exact call pattern from AutoModeService
+      eventBus.emitAutoModeEvent('auto_mode_feature_start', {
+        featureId: 'abc-123',
+        featureName: 'Add user authentication',
+        projectPath: '/home/user/project',
+      });
+
+      expect(receivedEvents).toHaveLength(1);
+      expect(receivedEvents[0]).toEqual({
+        type: 'auto-mode:event',
+        payload: {
+          type: 'auto_mode_feature_start',
+          featureId: 'abc-123',
+          featureName: 'Add user authentication',
+          projectPath: '/home/user/project',
+        },
+      });
+    });
+
+    it('should handle complex nested data in events', () => {
+      eventBus.emitAutoModeEvent('auto_mode_tool', {
+        featureId: 'feat-1',
+        tool: {
+          name: 'write_file',
+          input: {
+            path: '/src/index.ts',
+            content: 'const x = 1;',
+          },
+        },
+        timestamp: 1234567890,
+      });
+
+      const payload = mockEmitter.emitCalls[0].payload as Record<string, unknown>;
+      expect(payload.type).toBe('auto_mode_tool');
+      expect(payload.tool).toEqual({
+        name: 'write_file',
+        input: {
+          path: '/src/index.ts',
+          content: 'const x = 1;',
+        },
+      });
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/services/worktree-resolver.test.ts b/temp_repo/apps/server/tests/unit/services/worktree-resolver.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6ba1396e2c5837cb6c2447bc6fa8016227063408
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/services/worktree-resolver.test.ts
@@ -0,0 +1,337 @@
+import { describe, it, expect, beforeEach, vi, type Mock } from 'vitest';
+import { WorktreeResolver, type WorktreeInfo } from '@/services/worktree-resolver.js';
+import { exec } from 'child_process';
+import path from 'path';
+
+// Mock child_process
+vi.mock('child_process', () => ({
+  exec: vi.fn(),
+}));
+
+/**
+ * Helper to normalize paths for cross-platform test compatibility.
+ * On Windows, path.resolve('/Users/dev/project') returns 'C:\Users\dev\project' (with current drive).
+ * This helper ensures test expectations match the actual platform behavior.
+ */
+const normalizePath = (p: string): string => path.resolve(p);
+
+// Create promisified mock helper
+const mockExecAsync = (
+  impl: (cmd: string, options?: { cwd?: string }) => Promise<{ stdout: string; stderr: string }>
+) => {
+  (exec as unknown as Mock).mockImplementation(
+    (
+      cmd: string,
+      options: { cwd?: string } | undefined,
+      callback: (error: Error | null, result: { stdout: string; stderr: string }) => void
+    ) => {
+      impl(cmd, options)
+        .then((result) => callback(null, result))
+        .catch((error) => callback(error, { stdout: '', stderr: '' }));
+    }
+  );
+};
+
+describe('WorktreeResolver', () => {
+  let resolver: WorktreeResolver;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    resolver = new WorktreeResolver();
+  });
+
+  describe('getCurrentBranch', () => {
+    it('should return branch name when on a branch', async () => {
+      mockExecAsync(async () => ({ stdout: 'main\n', stderr: '' }));
+
+      const branch = await resolver.getCurrentBranch('/test/project');
+
+      expect(branch).toBe('main');
+    });
+
+    it('should return null on detached HEAD (empty output)', async () => {
+      mockExecAsync(async () => ({ stdout: '', stderr: '' }));
+
+      const branch = await resolver.getCurrentBranch('/test/project');
+
+      expect(branch).toBeNull();
+    });
+
+    it('should return null when git command fails', async () => {
+      mockExecAsync(async () => {
+        throw new Error('Not a git repository');
+      });
+
+      const branch = await resolver.getCurrentBranch('/not/a/git/repo');
+
+      expect(branch).toBeNull();
+    });
+
+    it('should trim whitespace from branch name', async () => {
+      mockExecAsync(async () => ({ stdout: '  feature-branch  \n', stderr: '' }));
+
+      const branch = await resolver.getCurrentBranch('/test/project');
+
+      expect(branch).toBe('feature-branch');
+    });
+
+    it('should use provided projectPath as cwd', async () => {
+      let capturedCwd: string | undefined;
+      mockExecAsync(async (cmd, options) => {
+        capturedCwd = options?.cwd;
+        return { stdout: 'main\n', stderr: '' };
+      });
+
+      await resolver.getCurrentBranch('/custom/path');
+
+      expect(capturedCwd).toBe('/custom/path');
+    });
+  });
+
+  describe('findWorktreeForBranch', () => {
+    const porcelainOutput = `worktree /Users/dev/project
+branch refs/heads/main
+
+worktree /Users/dev/project/.worktrees/feature-x
+branch refs/heads/feature-x
+
+worktree /Users/dev/project/.worktrees/feature-y
+branch refs/heads/feature-y
+`;
+
+    it('should find worktree by branch name', async () => {
+      mockExecAsync(async () => ({ stdout: porcelainOutput, stderr: '' }));
+
+      const result = await resolver.findWorktreeForBranch('/Users/dev/project', 'feature-x');
+
+      expect(result).toBe(normalizePath('/Users/dev/project/.worktrees/feature-x'));
+    });
+
+    it('should normalize refs/heads and trim when resolving target branch', async () => {
+      mockExecAsync(async () => ({ stdout: porcelainOutput, stderr: '' }));
+
+      const result = await resolver.findWorktreeForBranch(
+        '/Users/dev/project',
+        '  refs/heads/feature-x  '
+      );
+
+      expect(result).toBe(normalizePath('/Users/dev/project/.worktrees/feature-x'));
+    });
+
+    it('should normalize remote-style target branch names', async () => {
+      mockExecAsync(async () => ({ stdout: porcelainOutput, stderr: '' }));
+
+      const result = await resolver.findWorktreeForBranch('/Users/dev/project', 'origin/feature-x');
+
+      expect(result).toBe(normalizePath('/Users/dev/project/.worktrees/feature-x'));
+    });
+
+    it('should return null when branch not found', async () => {
+      mockExecAsync(async () => ({ stdout: porcelainOutput, stderr: '' }));
+
+      const path = await resolver.findWorktreeForBranch('/Users/dev/project', 'non-existent');
+
+      expect(path).toBeNull();
+    });
+
+    it('should return null when git command fails', async () => {
+      mockExecAsync(async () => {
+        throw new Error('Not a git repository');
+      });
+
+      const path = await resolver.findWorktreeForBranch('/not/a/repo', 'main');
+
+      expect(path).toBeNull();
+    });
+
+    it('should find main worktree', async () => {
+      mockExecAsync(async () => ({ stdout: porcelainOutput, stderr: '' }));
+
+      const result = await resolver.findWorktreeForBranch('/Users/dev/project', 'main');
+
+      expect(result).toBe(normalizePath('/Users/dev/project'));
+    });
+
+    it('should handle porcelain output without trailing newline', async () => {
+      const noTrailingNewline = `worktree /Users/dev/project
+branch refs/heads/main
+
+worktree /Users/dev/project/.worktrees/feature-x
+branch refs/heads/feature-x`;
+
+      mockExecAsync(async () => ({ stdout: noTrailingNewline, stderr: '' }));
+
+      const result = await resolver.findWorktreeForBranch('/Users/dev/project', 'feature-x');
+
+      expect(result).toBe(normalizePath('/Users/dev/project/.worktrees/feature-x'));
+    });
+
+    it('should resolve relative paths to absolute', async () => {
+      const relativePathOutput = `worktree /Users/dev/project
+branch refs/heads/main
+
+worktree .worktrees/feature-relative
+branch refs/heads/feature-relative
+`;
+
+      mockExecAsync(async () => ({ stdout: relativePathOutput, stderr: '' }));
+
+      const result = await resolver.findWorktreeForBranch('/Users/dev/project', 'feature-relative');
+
+      // Should resolve to absolute path (platform-specific)
+      expect(result).toBe(normalizePath('/Users/dev/project/.worktrees/feature-relative'));
+    });
+
+    it('should use projectPath as cwd for git command', async () => {
+      let capturedCwd: string | undefined;
+      mockExecAsync(async (cmd, options) => {
+        capturedCwd = options?.cwd;
+        return { stdout: porcelainOutput, stderr: '' };
+      });
+
+      await resolver.findWorktreeForBranch('/custom/project', 'main');
+
+      expect(capturedCwd).toBe('/custom/project');
+    });
+  });
+
+  describe('listWorktrees', () => {
+    it('should list all worktrees with metadata', async () => {
+      const porcelainOutput = `worktree /Users/dev/project
+branch refs/heads/main
+
+worktree /Users/dev/project/.worktrees/feature-x
+branch refs/heads/feature-x
+
+worktree /Users/dev/project/.worktrees/feature-y
+branch refs/heads/feature-y
+`;
+
+      mockExecAsync(async () => ({ stdout: porcelainOutput, stderr: '' }));
+
+      const worktrees = await resolver.listWorktrees('/Users/dev/project');
+
+      expect(worktrees).toHaveLength(3);
+      expect(worktrees[0]).toEqual({
+        path: normalizePath('/Users/dev/project'),
+        branch: 'main',
+        isMain: true,
+      });
+      expect(worktrees[1]).toEqual({
+        path: normalizePath('/Users/dev/project/.worktrees/feature-x'),
+        branch: 'feature-x',
+        isMain: false,
+      });
+      expect(worktrees[2]).toEqual({
+        path: normalizePath('/Users/dev/project/.worktrees/feature-y'),
+        branch: 'feature-y',
+        isMain: false,
+      });
+    });
+
+    it('should return empty array when git command fails', async () => {
+      mockExecAsync(async () => {
+        throw new Error('Not a git repository');
+      });
+
+      const worktrees = await resolver.listWorktrees('/not/a/repo');
+
+      expect(worktrees).toEqual([]);
+    });
+
+    it('should handle detached HEAD worktrees', async () => {
+      const porcelainWithDetached = `worktree /Users/dev/project
+branch refs/heads/main
+
+worktree /Users/dev/project/.worktrees/detached-wt
+detached
+`;
+
+      mockExecAsync(async () => ({ stdout: porcelainWithDetached, stderr: '' }));
+
+      const worktrees = await resolver.listWorktrees('/Users/dev/project');
+
+      expect(worktrees).toHaveLength(2);
+      expect(worktrees[1]).toEqual({
+        path: normalizePath('/Users/dev/project/.worktrees/detached-wt'),
+        branch: null, // Detached HEAD has no branch
+        isMain: false,
+      });
+    });
+
+    it('should mark only first worktree as main', async () => {
+      const multipleWorktrees = `worktree /Users/dev/project
+branch refs/heads/main
+
+worktree /Users/dev/project/.worktrees/wt1
+branch refs/heads/branch1
+
+worktree /Users/dev/project/.worktrees/wt2
+branch refs/heads/branch2
+`;
+
+      mockExecAsync(async () => ({ stdout: multipleWorktrees, stderr: '' }));
+
+      const worktrees = await resolver.listWorktrees('/Users/dev/project');
+
+      expect(worktrees[0].isMain).toBe(true);
+      expect(worktrees[1].isMain).toBe(false);
+      expect(worktrees[2].isMain).toBe(false);
+    });
+
+    it('should resolve relative paths to absolute', async () => {
+      const relativePathOutput = `worktree /Users/dev/project
+branch refs/heads/main
+
+worktree .worktrees/relative-wt
+branch refs/heads/relative-branch
+`;
+
+      mockExecAsync(async () => ({ stdout: relativePathOutput, stderr: '' }));
+
+      const worktrees = await resolver.listWorktrees('/Users/dev/project');
+
+      expect(worktrees[1].path).toBe(normalizePath('/Users/dev/project/.worktrees/relative-wt'));
+    });
+
+    it('should handle single worktree (main only)', async () => {
+      const singleWorktree = `worktree /Users/dev/project
+branch refs/heads/main
+`;
+
+      mockExecAsync(async () => ({ stdout: singleWorktree, stderr: '' }));
+
+      const worktrees = await resolver.listWorktrees('/Users/dev/project');
+
+      expect(worktrees).toHaveLength(1);
+      expect(worktrees[0]).toEqual({
+        path: normalizePath('/Users/dev/project'),
+        branch: 'main',
+        isMain: true,
+      });
+    });
+
+    it('should handle empty git worktree list output', async () => {
+      mockExecAsync(async () => ({ stdout: '', stderr: '' }));
+
+      const worktrees = await resolver.listWorktrees('/Users/dev/project');
+
+      expect(worktrees).toEqual([]);
+    });
+
+    it('should handle output without trailing newline', async () => {
+      const noTrailingNewline = `worktree /Users/dev/project
+branch refs/heads/main
+
+worktree /Users/dev/project/.worktrees/feature-x
+branch refs/heads/feature-x`;
+
+      mockExecAsync(async () => ({ stdout: noTrailingNewline, stderr: '' }));
+
+      const worktrees = await resolver.listWorktrees('/Users/dev/project');
+
+      expect(worktrees).toHaveLength(2);
+      expect(worktrees[1].branch).toBe('feature-x');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/types/pipeline-types.test.ts b/temp_repo/apps/server/tests/unit/types/pipeline-types.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d978cc4f558c67fb93687b21a5530812d63d56ef
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/types/pipeline-types.test.ts
@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import { isPipelineStatus } from '@automaker/types';
+
+describe('isPipelineStatus', () => {
+  it('should return true for valid pipeline statuses', () => {
+    expect(isPipelineStatus('pipeline_step1')).toBe(true);
+    expect(isPipelineStatus('pipeline_testing')).toBe(true);
+    expect(isPipelineStatus('pipeline_code_review')).toBe(true);
+    expect(isPipelineStatus('pipeline_complete')).toBe(true);
+  });
+
+  it('should return true for pipeline_ prefix with any non-empty suffix', () => {
+    expect(isPipelineStatus('pipeline_')).toBe(false); // Empty suffix is invalid
+    expect(isPipelineStatus('pipeline_123')).toBe(true);
+    expect(isPipelineStatus('pipeline_step_abc_123')).toBe(true);
+  });
+
+  it('should return false for non-pipeline statuses', () => {
+    expect(isPipelineStatus('in_progress')).toBe(false);
+    expect(isPipelineStatus('backlog')).toBe(false);
+    expect(isPipelineStatus('ready')).toBe(false);
+    expect(isPipelineStatus('interrupted')).toBe(false);
+    expect(isPipelineStatus('waiting_approval')).toBe(false);
+    expect(isPipelineStatus('verified')).toBe(false);
+    expect(isPipelineStatus('completed')).toBe(false);
+  });
+
+  it('should return false for null and undefined', () => {
+    expect(isPipelineStatus(null)).toBe(false);
+    expect(isPipelineStatus(undefined)).toBe(false);
+  });
+
+  it('should return false for empty string', () => {
+    expect(isPipelineStatus('')).toBe(false);
+  });
+
+  it('should return false for partial matches', () => {
+    expect(isPipelineStatus('pipeline')).toBe(false);
+    expect(isPipelineStatus('pipelin_step1')).toBe(false);
+    expect(isPipelineStatus('Pipeline_step1')).toBe(false);
+    expect(isPipelineStatus('PIPELINE_step1')).toBe(false);
+  });
+
+  it('should return false for pipeline prefix embedded in longer string', () => {
+    expect(isPipelineStatus('not_pipeline_step1')).toBe(false);
+    expect(isPipelineStatus('my_pipeline_step')).toBe(false);
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/ui/agent-output-summary-e2e.test.ts b/temp_repo/apps/server/tests/unit/ui/agent-output-summary-e2e.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67187c16a44119201147c01ea4c0fa652003045b
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/ui/agent-output-summary-e2e.test.ts
@@ -0,0 +1,563 @@
+/**
+ * End-to-end integration tests for agent output summary display flow.
+ *
+ * These tests validate the complete flow from:
+ * 1. Server-side summary accumulation (FeatureStateManager.saveFeatureSummary)
+ * 2. Event emission with accumulated summary (auto_mode_summary event)
+ * 3. UI-side summary retrieval (feature.summary via API)
+ * 4. UI-side summary parsing and display (parsePhaseSummaries, extractSummary)
+ *
+ * The tests simulate what happens when:
+ * - A feature goes through multiple pipeline steps
+ * - Each step produces a summary
+ * - The server accumulates all summaries
+ * - The UI displays the accumulated summary
+ */
+
+import { describe, it, expect, beforeEach, vi, type Mock } from 'vitest';
+import { FeatureStateManager } from '@/services/feature-state-manager.js';
+import type { Feature } from '@automaker/types';
+import type { EventEmitter } from '@/lib/events.js';
+import type { FeatureLoader } from '@/services/feature-loader.js';
+import { atomicWriteJson, readJsonWithRecovery } from '@automaker/utils';
+import { getFeatureDir } from '@automaker/platform';
+import { pipelineService } from '@/services/pipeline-service.js';
+
+// Mock dependencies
+vi.mock('@/lib/secure-fs.js', () => ({
+  readFile: vi.fn(),
+  readdir: vi.fn(),
+}));
+
+vi.mock('@automaker/utils', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@automaker/utils')>();
+  return {
+    ...actual,
+    atomicWriteJson: vi.fn(),
+    readJsonWithRecovery: vi.fn(),
+    logRecoveryWarning: vi.fn(),
+  };
+});
+
+vi.mock('@automaker/platform', () => ({
+  getFeatureDir: vi.fn(),
+  getFeaturesDir: vi.fn(),
+}));
+
+vi.mock('@/services/notification-service.js', () => ({
+  getNotificationService: vi.fn(() => ({
+    createNotification: vi.fn(),
+  })),
+}));
+
+vi.mock('@/services/pipeline-service.js', () => ({
+  pipelineService: {
+    getStepIdFromStatus: vi.fn((status: string) => {
+      if (status.startsWith('pipeline_')) return status.replace('pipeline_', '');
+      return null;
+    }),
+    getStep: vi.fn(),
+  },
+}));
+
+// ============================================================================
+// UI-side parsing functions (mirrored from apps/ui/src/lib/log-parser.ts)
+// ============================================================================
+
+function parsePhaseSummaries(summary: string | undefined): Map<string, string> {
+  const phaseSummaries = new Map<string, string>();
+  if (!summary || !summary.trim()) return phaseSummaries;
+
+  const sections = summary.split(/\n\n---\n\n/);
+  for (const section of sections) {
+    const headerMatch = section.match(/^###\s+(.+?)(?:\n|$)/);
+    if (headerMatch) {
+      const phaseName = headerMatch[1].trim().toLowerCase();
+      const content = section.substring(headerMatch[0].length).trim();
+      phaseSummaries.set(phaseName, content);
+    }
+  }
+  return phaseSummaries;
+}
+
+function extractSummary(rawOutput: string): string | null {
+  if (!rawOutput || !rawOutput.trim()) return null;
+
+  const regexesToTry: Array<{
+    regex: RegExp;
+    processor: (m: RegExpMatchArray) => string;
+  }> = [
+    { regex: /<summary>([\s\S]*?)<\/summary>/gi, processor: (m) => m[1] },
+    { regex: /^##\s+Summary[^\n]*\n([\s\S]*?)(?=\n##\s+[^#]|\n🔧|$)/gm, processor: (m) => m[1] },
+  ];
+
+  for (const { regex, processor } of regexesToTry) {
+    const matches = [...rawOutput.matchAll(regex)];
+    if (matches.length > 0) {
+      const lastMatch = matches[matches.length - 1];
+      return processor(lastMatch).trim();
+    }
+  }
+  return null;
+}
+
+function isAccumulatedSummary(summary: string | undefined): boolean {
+  if (!summary || !summary.trim()) return false;
+  return summary.includes('\n\n---\n\n') && (summary.match(/###\s+.+/g)?.length ?? 0) > 0;
+}
+
+/**
+ * Returns the first summary candidate that contains non-whitespace content.
+ * Mirrors getFirstNonEmptySummary from apps/ui/src/lib/summary-selection.ts
+ */
+function getFirstNonEmptySummary(...candidates: (string | null | undefined)[]): string | null {
+  for (const candidate of candidates) {
+    if (typeof candidate === 'string' && candidate.trim().length > 0) {
+      return candidate;
+    }
+  }
+  return null;
+}
+
+// ============================================================================
+// Unit tests for helper functions
+// ============================================================================
+
+describe('getFirstNonEmptySummary', () => {
+  it('should return the first non-empty string', () => {
+    expect(getFirstNonEmptySummary(null, undefined, 'first', 'second')).toBe('first');
+  });
+
+  it('should skip null and undefined candidates', () => {
+    expect(getFirstNonEmptySummary(null, undefined, 'valid')).toBe('valid');
+  });
+
+  it('should skip whitespace-only strings', () => {
+    expect(getFirstNonEmptySummary('   ', '\n\t', 'actual content')).toBe('actual content');
+  });
+
+  it('should return null when all candidates are empty', () => {
+    expect(getFirstNonEmptySummary(null, undefined, '', '   ')).toBeNull();
+  });
+
+  it('should return null when no candidates provided', () => {
+    expect(getFirstNonEmptySummary()).toBeNull();
+  });
+
+  it('should handle empty string as invalid', () => {
+    expect(getFirstNonEmptySummary('', 'valid')).toBe('valid');
+  });
+
+  it('should prefer first valid candidate', () => {
+    expect(getFirstNonEmptySummary('first', 'second', 'third')).toBe('first');
+  });
+
+  it('should handle strings with only spaces as invalid', () => {
+    expect(getFirstNonEmptySummary('     ', '   \n  ', 'valid')).toBe('valid');
+  });
+
+  it('should accept strings with content surrounded by whitespace', () => {
+    expect(getFirstNonEmptySummary('  content with spaces  ')).toBe('  content with spaces  ');
+  });
+});
+
+describe('Agent Output Summary E2E Flow', () => {
+  let manager: FeatureStateManager;
+  let mockEvents: EventEmitter;
+
+  const baseFeature: Feature = {
+    id: 'e2e-feature-1',
+    name: 'E2E Feature',
+    title: 'E2E Feature Title',
+    description: 'A feature going through complete pipeline',
+    status: 'pipeline_implementation',
+    createdAt: '2024-01-01T00:00:00Z',
+    updatedAt: '2024-01-01T00:00:00Z',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockEvents = {
+      emit: vi.fn(),
+      subscribe: vi.fn(() => vi.fn()),
+    };
+
+    const mockFeatureLoader = {
+      syncFeatureToAppSpec: vi.fn(),
+    } as unknown as FeatureLoader;
+
+    manager = new FeatureStateManager(mockEvents, mockFeatureLoader);
+
+    (getFeatureDir as Mock).mockReturnValue('/project/.automaker/features/e2e-feature-1');
+  });
+
+  describe('complete pipeline flow: server accumulation → UI display', () => {
+    it('should maintain complete summary across all pipeline steps', async () => {
+      // ===== STEP 1: Implementation =====
+      (pipelineService.getStep as Mock).mockResolvedValue({
+        name: 'Implementation',
+        id: 'implementation',
+      });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_implementation', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary(
+        '/project',
+        'e2e-feature-1',
+        '## Changes\n- Created auth module\n- Added user service'
+      );
+
+      const step1Feature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      const step1Summary = step1Feature.summary;
+
+      // Verify server-side accumulation format
+      expect(step1Summary).toBe(
+        '### Implementation\n\n## Changes\n- Created auth module\n- Added user service'
+      );
+
+      // Verify UI can parse this summary
+      const phases1 = parsePhaseSummaries(step1Summary);
+      expect(phases1.size).toBe(1);
+      expect(phases1.get('implementation')).toContain('Created auth module');
+
+      // ===== STEP 2: Code Review =====
+      vi.clearAllMocks();
+      (getFeatureDir as Mock).mockReturnValue('/project/.automaker/features/e2e-feature-1');
+      (pipelineService.getStep as Mock).mockResolvedValue({
+        name: 'Code Review',
+        id: 'code_review',
+      });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_code_review', summary: step1Summary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary(
+        '/project',
+        'e2e-feature-1',
+        '## Review Results\n- Approved with minor suggestions'
+      );
+
+      const step2Feature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      const step2Summary = step2Feature.summary;
+
+      // Verify accumulation now has both steps
+      expect(step2Summary).toContain('### Implementation');
+      expect(step2Summary).toContain('Created auth module');
+      expect(step2Summary).toContain('### Code Review');
+      expect(step2Summary).toContain('Approved with minor suggestions');
+      expect(step2Summary).toContain('\n\n---\n\n'); // Separator
+
+      // Verify UI can parse accumulated summary
+      expect(isAccumulatedSummary(step2Summary)).toBe(true);
+      const phases2 = parsePhaseSummaries(step2Summary);
+      expect(phases2.size).toBe(2);
+      expect(phases2.get('implementation')).toContain('Created auth module');
+      expect(phases2.get('code review')).toContain('Approved with minor suggestions');
+
+      // ===== STEP 3: Testing =====
+      vi.clearAllMocks();
+      (getFeatureDir as Mock).mockReturnValue('/project/.automaker/features/e2e-feature-1');
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'testing' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_testing', summary: step2Summary },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary(
+        '/project',
+        'e2e-feature-1',
+        '## Test Results\n- 42 tests pass\n- 98% coverage'
+      );
+
+      const finalFeature = (atomicWriteJson as Mock).mock.calls[0][1] as Feature;
+      const finalSummary = finalFeature.summary;
+
+      // Verify final accumulation has all three steps
+      expect(finalSummary).toContain('### Implementation');
+      expect(finalSummary).toContain('Created auth module');
+      expect(finalSummary).toContain('### Code Review');
+      expect(finalSummary).toContain('Approved with minor suggestions');
+      expect(finalSummary).toContain('### Testing');
+      expect(finalSummary).toContain('42 tests pass');
+
+      // Verify UI-side parsing of complete pipeline
+      expect(isAccumulatedSummary(finalSummary)).toBe(true);
+      const finalPhases = parsePhaseSummaries(finalSummary);
+      expect(finalPhases.size).toBe(3);
+
+      // Verify chronological order (implementation before testing)
+      const summaryLines = finalSummary!.split('\n');
+      const implIndex = summaryLines.findIndex((l) => l.includes('### Implementation'));
+      const reviewIndex = summaryLines.findIndex((l) => l.includes('### Code Review'));
+      const testIndex = summaryLines.findIndex((l) => l.includes('### Testing'));
+      expect(implIndex).toBeLessThan(reviewIndex);
+      expect(reviewIndex).toBeLessThan(testIndex);
+    });
+
+    it('should emit events with accumulated summaries for real-time UI updates', async () => {
+      // Step 1
+      (pipelineService.getStep as Mock).mockResolvedValue({
+        name: 'Implementation',
+        id: 'implementation',
+      });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_implementation', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'e2e-feature-1', 'Step 1 output');
+
+      // Verify event emission
+      expect(mockEvents.emit).toHaveBeenCalledWith('auto-mode:event', {
+        type: 'auto_mode_summary',
+        featureId: 'e2e-feature-1',
+        projectPath: '/project',
+        summary: '### Implementation\n\nStep 1 output',
+      });
+
+      // Step 2
+      vi.clearAllMocks();
+      (getFeatureDir as Mock).mockReturnValue('/project/.automaker/features/e2e-feature-1');
+      (pipelineService.getStep as Mock).mockResolvedValue({ name: 'Testing', id: 'testing' });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: {
+          ...baseFeature,
+          status: 'pipeline_testing',
+          summary: '### Implementation\n\nStep 1 output',
+        },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'e2e-feature-1', 'Step 2 output');
+
+      // Event should contain FULL accumulated summary
+      expect(mockEvents.emit).toHaveBeenCalledWith('auto-mode:event', {
+        type: 'auto_mode_summary',
+        featureId: 'e2e-feature-1',
+        projectPath: '/project',
+        summary: '### Implementation\n\nStep 1 output\n\n---\n\n### Testing\n\nStep 2 output',
+      });
+    });
+  });
+
+  describe('UI display logic: feature.summary vs extractSummary()', () => {
+    it('should prefer feature.summary (server-accumulated) over extractSummary() (last only)', () => {
+      // Simulate what the server has accumulated
+      const featureSummary = [
+        '### Implementation',
+        '',
+        '## Changes',
+        '- Created feature',
+        '',
+        '---',
+        '',
+        '### Testing',
+        '',
+        '## Results',
+        '- All tests pass',
+      ].join('\n');
+
+      // Simulate raw agent output (only contains last summary)
+      const rawOutput = `
+Working on tests...
+
+<summary>
+## Results
+- All tests pass
+</summary>
+`;
+
+      // UI logic: getFirstNonEmptySummary(feature?.summary, extractSummary(output))
+      const displaySummary = getFirstNonEmptySummary(featureSummary, extractSummary(rawOutput));
+
+      // Should use server-accumulated summary
+      expect(displaySummary).toBe(featureSummary);
+      expect(displaySummary).toContain('### Implementation');
+      expect(displaySummary).toContain('### Testing');
+
+      // If server summary was missing, only last summary would be shown
+      const fallbackSummary = extractSummary(rawOutput);
+      expect(fallbackSummary).not.toContain('Implementation');
+      expect(fallbackSummary).toContain('All tests pass');
+    });
+
+    it('should handle legacy features without server accumulation', () => {
+      // Legacy features have no feature.summary
+      const featureSummary = undefined;
+
+      // Raw output contains the summary
+      const rawOutput = `
+<summary>
+## Implementation Complete
+- Created the feature
+- All tests pass
+</summary>
+`;
+
+      // UI logic: getFirstNonEmptySummary(feature?.summary, extractSummary(output))
+      const displaySummary = getFirstNonEmptySummary(featureSummary, extractSummary(rawOutput));
+
+      // Should fall back to client-side extraction
+      expect(displaySummary).toContain('Implementation Complete');
+      expect(displaySummary).toContain('All tests pass');
+    });
+  });
+
+  describe('error recovery and edge cases', () => {
+    it('should gracefully handle pipeline interruption', async () => {
+      // Step 1 completes
+      (pipelineService.getStep as Mock).mockResolvedValue({
+        name: 'Implementation',
+        id: 'implementation',
+      });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_implementation', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'e2e-feature-1', 'Implementation done');
+
+      const step1Summary = ((atomicWriteJson as Mock).mock.calls[0][1] as Feature).summary;
+
+      // Pipeline gets interrupted (status changes but summary is preserved)
+      // When user views the feature later, the summary should still be available
+      expect(step1Summary).toBe('### Implementation\n\nImplementation done');
+
+      // UI can still parse the partial pipeline
+      const phases = parsePhaseSummaries(step1Summary);
+      expect(phases.size).toBe(1);
+      expect(phases.get('implementation')).toBe('Implementation done');
+    });
+
+    it('should handle very large accumulated summaries', async () => {
+      // Generate large content for each step
+      const generateLargeContent = (stepNum: number) => {
+        const lines = [`## Step ${stepNum} Changes`];
+        for (let i = 0; i < 100; i++) {
+          lines.push(
+            `- Change ${i}: This is a detailed description of the change made during step ${stepNum}`
+          );
+        }
+        return lines.join('\n');
+      };
+
+      // Simulate 5 pipeline steps with large content
+      let currentSummary: string | undefined = undefined;
+      const stepNames = ['Planning', 'Implementation', 'Code Review', 'Testing', 'Refinement'];
+
+      for (let i = 0; i < 5; i++) {
+        vi.clearAllMocks();
+        (getFeatureDir as Mock).mockReturnValue('/project/.automaker/features/e2e-feature-1');
+        (pipelineService.getStep as Mock).mockResolvedValue({
+          name: stepNames[i],
+          id: stepNames[i].toLowerCase().replace(' ', '_'),
+        });
+        (readJsonWithRecovery as Mock).mockResolvedValue({
+          data: {
+            ...baseFeature,
+            status: `pipeline_${stepNames[i].toLowerCase().replace(' ', '_')}`,
+            summary: currentSummary,
+          },
+          recovered: false,
+          source: 'main',
+        });
+
+        await manager.saveFeatureSummary('/project', 'e2e-feature-1', generateLargeContent(i + 1));
+
+        currentSummary = ((atomicWriteJson as Mock).mock.calls[0][1] as Feature).summary;
+      }
+
+      // Final summary should be large but still parseable
+      expect(currentSummary!.length).toBeGreaterThan(5000);
+      expect(isAccumulatedSummary(currentSummary)).toBe(true);
+
+      const phases = parsePhaseSummaries(currentSummary);
+      expect(phases.size).toBe(5);
+
+      // Verify all steps are present
+      for (const stepName of stepNames) {
+        expect(phases.has(stepName.toLowerCase())).toBe(true);
+      }
+    });
+  });
+
+  describe('query invalidation simulation', () => {
+    it('should trigger UI refetch on auto_mode_summary event', async () => {
+      // This test documents the expected behavior:
+      // When saveFeatureSummary is called, it emits auto_mode_summary event
+      // The UI's use-query-invalidation.ts invalidates the feature query
+      // This causes a refetch of the feature, getting the updated summary
+
+      (pipelineService.getStep as Mock).mockResolvedValue({
+        name: 'Implementation',
+        id: 'implementation',
+      });
+      (readJsonWithRecovery as Mock).mockResolvedValue({
+        data: { ...baseFeature, status: 'pipeline_implementation', summary: undefined },
+        recovered: false,
+        source: 'main',
+      });
+
+      await manager.saveFeatureSummary('/project', 'e2e-feature-1', 'Summary content');
+
+      // Verify event was emitted (triggers React Query invalidation)
+      expect(mockEvents.emit).toHaveBeenCalledWith(
+        'auto-mode:event',
+        expect.objectContaining({
+          type: 'auto_mode_summary',
+          featureId: 'e2e-feature-1',
+          summary: expect.any(String),
+        })
+      );
+
+      // The UI would then:
+      // 1. Receive the event via WebSocket
+      // 2. Invalidate the feature query
+      // 3. Refetch the feature (GET /api/features/:id)
+      // 4. Display the updated feature.summary
+    });
+  });
+});
+
+/**
+ * KEY E2E FLOW SUMMARY:
+ *
+ * 1. PIPELINE EXECUTION:
+ *    - Feature starts with status='pipeline_implementation'
+ *    - Agent runs and produces summary
+ *    - FeatureStateManager.saveFeatureSummary() accumulates with step header
+ *    - Status advances to 'pipeline_testing'
+ *    - Process repeats for each step
+ *
+ * 2. SERVER-SIDE ACCUMULATION:
+ *    - First step: `### Implementation\n\n<content>`
+ *    - Second step: `### Implementation\n\n<content>\n\n---\n\n### Testing\n\n<content>`
+ *    - Pattern continues with each step
+ *
+ * 3. EVENT EMISSION:
+ *    - auto_mode_summary event contains FULL accumulated summary
+ *    - UI receives event via WebSocket
+ *    - React Query invalidates feature query
+ *    - Feature is refetched with updated summary
+ *
+ * 4. UI DISPLAY:
+ *    - AgentOutputModal uses: getFirstNonEmptySummary(feature?.summary, extractSummary(output))
+ *    - feature.summary is preferred (contains all steps)
+ *    - extractSummary() is fallback (last summary only)
+ *    - parsePhaseSummaries() can split into individual phases for UI
+ *
+ * 5. FALLBACK FOR LEGACY:
+ *    - Old features may not have feature.summary
+ *    - UI falls back to extracting from raw output
+ *    - Only last summary is available in this case
+ */
diff --git a/temp_repo/apps/server/tests/unit/ui/agent-output-summary-priority.test.ts b/temp_repo/apps/server/tests/unit/ui/agent-output-summary-priority.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c31f950e4af28c20a63f152fc1d91be1c4ec2c40
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/ui/agent-output-summary-priority.test.ts
@@ -0,0 +1,403 @@
+/**
+ * Unit tests for the agent output summary priority logic.
+ *
+ * These tests verify the summary display logic used in AgentOutputModal
+ * where the UI must choose between server-accumulated summaries and
+ * client-side extracted summaries.
+ *
+ * Priority order (from agent-output-modal.tsx):
+ * 1. feature.summary (server-accumulated, contains all pipeline steps)
+ * 2. extractSummary(output) (client-side fallback, last summary only)
+ *
+ * This priority is crucial for pipeline features where the server-side
+ * accumulation provides the complete history of all step summaries.
+ */
+
+import { describe, it, expect } from 'vitest';
+// Import the actual extractSummary function to ensure test behavior matches production
+import { extractSummary } from '../../../../ui/src/lib/log-parser.ts';
+import { getFirstNonEmptySummary } from '../../../../ui/src/lib/summary-selection.ts';
+
+/**
+ * Simulates the summary priority logic from AgentOutputModal.
+ *
+ * Priority:
+ * 1. feature?.summary (server-accumulated)
+ * 2. extractSummary(output) (client-side fallback)
+ */
+function getDisplaySummary(
+  featureSummary: string | undefined | null,
+  rawOutput: string
+): string | null {
+  return getFirstNonEmptySummary(featureSummary, extractSummary(rawOutput));
+}
+
+describe('Agent Output Summary Priority Logic', () => {
+  describe('priority order: feature.summary over extractSummary', () => {
+    it('should use feature.summary when available (server-accumulated wins)', () => {
+      const featureSummary = '### Step 1\n\nFirst step\n\n---\n\n### Step 2\n\nSecond step';
+      const rawOutput = `
+<summary>
+Only the last summary is extracted client-side
+</summary>
+`;
+
+      const result = getDisplaySummary(featureSummary, rawOutput);
+
+      // Server-accumulated summary should be used, not client-side extraction
+      expect(result).toBe(featureSummary);
+      expect(result).toContain('### Step 1');
+      expect(result).toContain('### Step 2');
+      expect(result).not.toContain('Only the last summary');
+    });
+
+    it('should use client-side extractSummary when feature.summary is undefined', () => {
+      const rawOutput = `
+<summary>
+This is the only summary
+</summary>
+`;
+
+      const result = getDisplaySummary(undefined, rawOutput);
+
+      expect(result).toBe('This is the only summary');
+    });
+
+    it('should use client-side extractSummary when feature.summary is null', () => {
+      const rawOutput = `
+<summary>
+Client-side extracted summary
+</summary>
+`;
+
+      const result = getDisplaySummary(null, rawOutput);
+
+      expect(result).toBe('Client-side extracted summary');
+    });
+
+    it('should use client-side extractSummary when feature.summary is empty string', () => {
+      const rawOutput = `
+<summary>
+Fallback content
+</summary>
+`;
+
+      const result = getDisplaySummary('', rawOutput);
+
+      // Empty string is falsy, so fallback is used
+      expect(result).toBe('Fallback content');
+    });
+
+    it('should use client-side extractSummary when feature.summary is whitespace only', () => {
+      const rawOutput = `
+<summary>
+Fallback for whitespace summary
+</summary>
+`;
+
+      const result = getDisplaySummary('   \n  ', rawOutput);
+
+      expect(result).toBe('Fallback for whitespace summary');
+    });
+
+    it('should preserve original server summary formatting when non-empty after trim', () => {
+      const featureSummary = '\n### Implementation\n\n- Added API route\n';
+
+      const result = getDisplaySummary(featureSummary, '');
+
+      expect(result).toBe(featureSummary);
+      expect(result).toContain('### Implementation');
+    });
+  });
+
+  describe('pipeline step accumulation scenarios', () => {
+    it('should display all pipeline steps when using server-accumulated summary', () => {
+      // This simulates a feature that went through 3 pipeline steps
+      const featureSummary = [
+        '### Implementation',
+        '',
+        '## Changes',
+        '- Created new module',
+        '- Added tests',
+        '',
+        '---',
+        '',
+        '### Code Review',
+        '',
+        '## Review Results',
+        '- Approved with minor suggestions',
+        '',
+        '---',
+        '',
+        '### Testing',
+        '',
+        '## Test Results',
+        '- All 42 tests pass',
+        '- Coverage: 98%',
+      ].join('\n');
+
+      const rawOutput = `
+<summary>
+Only testing step visible in raw output
+</summary>
+`;
+
+      const result = getDisplaySummary(featureSummary, rawOutput);
+
+      // All pipeline steps should be visible
+      expect(result).toContain('### Implementation');
+      expect(result).toContain('### Code Review');
+      expect(result).toContain('### Testing');
+      expect(result).toContain('All 42 tests pass');
+    });
+
+    it('should display only last summary when server-side accumulation not available', () => {
+      // When feature.summary is not available, only the last summary is shown
+      const rawOutput = `
+<summary>
+Step 1: Implementation complete
+</summary>
+
+---
+
+<summary>
+Step 2: Code review complete
+</summary>
+
+---
+
+<summary>
+Step 3: Testing complete
+</summary>
+`;
+
+      const result = getDisplaySummary(undefined, rawOutput);
+
+      // Only the LAST summary should be shown (client-side fallback behavior)
+      expect(result).toBe('Step 3: Testing complete');
+      expect(result).not.toContain('Step 1');
+      expect(result).not.toContain('Step 2');
+    });
+
+    it('should handle single-step pipeline (no accumulation needed)', () => {
+      const featureSummary = '### Implementation\n\nCreated the feature';
+      const rawOutput = '';
+
+      const result = getDisplaySummary(featureSummary, rawOutput);
+
+      expect(result).toBe(featureSummary);
+      expect(result).not.toContain('---'); // No separator for single step
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should return null when both feature.summary and extractSummary are unavailable', () => {
+      const rawOutput = 'No summary tags here, just regular output.';
+
+      const result = getDisplaySummary(undefined, rawOutput);
+
+      expect(result).toBeNull();
+    });
+
+    it('should return null when rawOutput is empty and no feature summary', () => {
+      const result = getDisplaySummary(undefined, '');
+
+      expect(result).toBeNull();
+    });
+
+    it('should return null when rawOutput is whitespace only', () => {
+      const result = getDisplaySummary(undefined, '   \n\n   ');
+
+      expect(result).toBeNull();
+    });
+
+    it('should use client-side fallback when feature.summary is empty string (falsy)', () => {
+      // Empty string is falsy in JavaScript, so fallback is correctly used.
+      // This is the expected behavior - an empty summary has no value to display.
+      const rawOutput = `
+<summary>
+Fallback content when server summary is empty
+</summary>
+`;
+
+      // Empty string is falsy, so fallback is used
+      const result = getDisplaySummary('', rawOutput);
+      expect(result).toBe('Fallback content when server summary is empty');
+    });
+
+    it('should behave identically when feature is null vs feature.summary is undefined', () => {
+      // This test verifies that the behavior is consistent whether:
+      // - The feature object itself is null/undefined
+      // - The feature object exists but summary property is undefined
+      const rawOutput = `
+<summary>
+Client-side extracted summary
+</summary>
+`;
+
+      // Both scenarios should use client-side fallback
+      const resultWithUndefined = getDisplaySummary(undefined, rawOutput);
+      const resultWithNull = getDisplaySummary(null, rawOutput);
+
+      expect(resultWithUndefined).toBe('Client-side extracted summary');
+      expect(resultWithNull).toBe('Client-side extracted summary');
+      expect(resultWithUndefined).toBe(resultWithNull);
+    });
+  });
+
+  describe('markdown content preservation', () => {
+    it('should preserve markdown formatting in server-accumulated summary', () => {
+      const featureSummary = `### Code Review
+
+## Changes Made
+- Fixed **critical bug** in \`parser.ts\`
+- Added \`validateInput()\` function
+
+\`\`\`typescript
+const x = 1;
+\`\`\`
+
+| Test | Result |
+|------|--------|
+| Unit | Pass   |`;
+
+      const result = getDisplaySummary(featureSummary, '');
+
+      expect(result).toContain('**critical bug**');
+      expect(result).toContain('`parser.ts`');
+      expect(result).toContain('```typescript');
+      expect(result).toContain('| Test | Result |');
+    });
+
+    it('should preserve unicode in server-accumulated summary', () => {
+      const featureSummary = '### Testing\n\n✅ 42 passed\n❌ 0 failed\n🎉 100% coverage';
+
+      const result = getDisplaySummary(featureSummary, '');
+
+      expect(result).toContain('✅');
+      expect(result).toContain('❌');
+      expect(result).toContain('🎉');
+    });
+  });
+
+  describe('real-world scenarios', () => {
+    it('should handle typical pipeline feature with server accumulation', () => {
+      // Simulates a real pipeline feature that went through Implementation → Testing
+      const featureSummary = `### Implementation
+
+## Changes Made
+- Created UserProfile component
+- Added authentication middleware
+- Updated API endpoints
+
+---
+
+### Testing
+
+## Test Results
+- Unit tests: 15 passed
+- Integration tests: 8 passed
+- E2E tests: 3 passed`;
+
+      const rawOutput = `
+Working on the feature...
+
+<summary>
+## Test Results
+- Unit tests: 15 passed
+- Integration tests: 8 passed
+- E2E tests: 3 passed
+</summary>
+`;
+
+      const result = getDisplaySummary(featureSummary, rawOutput);
+
+      // Both steps should be visible
+      expect(result).toContain('### Implementation');
+      expect(result).toContain('### Testing');
+      expect(result).toContain('UserProfile component');
+      expect(result).toContain('15 passed');
+    });
+
+    it('should handle non-pipeline feature (single summary)', () => {
+      // Non-pipeline features have a single summary, no accumulation
+      const featureSummary = '## Implementation Complete\n- Created the feature\n- All tests pass';
+      const rawOutput = '';
+
+      const result = getDisplaySummary(featureSummary, rawOutput);
+
+      expect(result).toBe(featureSummary);
+      expect(result).not.toContain('###'); // No step headers for non-pipeline
+    });
+
+    it('should handle legacy feature without server summary (fallback)', () => {
+      // Legacy features may not have feature.summary set
+      const rawOutput = `
+<summary>
+Legacy implementation from before server-side accumulation
+</summary>
+`;
+
+      const result = getDisplaySummary(undefined, rawOutput);
+
+      expect(result).toBe('Legacy implementation from before server-side accumulation');
+    });
+  });
+
+  describe('view mode determination logic', () => {
+    /**
+     * Simulates the effectiveViewMode logic from agent-output-modal.tsx line 86
+     * Default to 'summary' if summary is available, otherwise 'parsed'
+     */
+    function getEffectiveViewMode(
+      viewMode: string | null,
+      summary: string | null
+    ): 'summary' | 'parsed' {
+      return (viewMode ?? (summary ? 'summary' : 'parsed')) as 'summary' | 'parsed';
+    }
+
+    it('should default to summary view when server summary is available', () => {
+      const summary = '### Implementation\n\nContent';
+      const result = getEffectiveViewMode(null, summary);
+      expect(result).toBe('summary');
+    });
+
+    it('should default to summary view when client-side extraction succeeds', () => {
+      const summary = 'Extracted from raw output';
+      const result = getEffectiveViewMode(null, summary);
+      expect(result).toBe('summary');
+    });
+
+    it('should default to parsed view when no summary is available', () => {
+      const result = getEffectiveViewMode(null, null);
+      expect(result).toBe('parsed');
+    });
+
+    it('should respect explicit view mode selection over default', () => {
+      const summary = 'Summary is available';
+      expect(getEffectiveViewMode('raw', summary)).toBe('raw');
+      expect(getEffectiveViewMode('parsed', summary)).toBe('parsed');
+      expect(getEffectiveViewMode('changes', summary)).toBe('changes');
+    });
+  });
+});
+
+/**
+ * KEY ARCHITECTURE INSIGHT:
+ *
+ * The priority order (feature.summary > extractSummary(output)) is essential for
+ * pipeline features because:
+ *
+ * 1. Server-side accumulation (FeatureStateManager.saveFeatureSummary) collects
+ *    ALL step summaries with headers and separators in chronological order.
+ *
+ * 2. Client-side extractSummary() only returns the LAST summary tag from raw output,
+ *    losing all previous step summaries.
+ *
+ * 3. The UI must prefer feature.summary to display the complete history of all
+ *    pipeline steps to the user.
+ *
+ * For non-pipeline features (single execution), both sources contain the same
+ * summary, so the priority doesn't matter. But for pipeline features, using the
+ * wrong source would result in incomplete information display.
+ */
diff --git a/temp_repo/apps/server/tests/unit/ui/log-parser-mixed-format.test.ts b/temp_repo/apps/server/tests/unit/ui/log-parser-mixed-format.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..37a03e9d402b19d47b83aaaca0c26e1137255989
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/ui/log-parser-mixed-format.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest';
+import {
+  parseAllPhaseSummaries,
+  parsePhaseSummaries,
+  extractPhaseSummary,
+  extractImplementationSummary,
+  isAccumulatedSummary,
+} from '../../../../ui/src/lib/log-parser.ts';
+
+describe('log-parser mixed summary format compatibility', () => {
+  const mixedSummary = [
+    'Implemented core auth flow and API wiring.',
+    '',
+    '---',
+    '',
+    '### Code Review',
+    '',
+    'Addressed lint warnings and improved error handling.',
+    '',
+    '---',
+    '',
+    '### Testing',
+    '',
+    'All tests passing.',
+  ].join('\n');
+
+  it('treats leading headerless section as Implementation phase', () => {
+    const phases = parsePhaseSummaries(mixedSummary);
+
+    expect(phases.get('implementation')).toBe('Implemented core auth flow and API wiring.');
+    expect(phases.get('code review')).toBe('Addressed lint warnings and improved error handling.');
+    expect(phases.get('testing')).toBe('All tests passing.');
+  });
+
+  it('returns implementation summary from mixed format', () => {
+    expect(extractImplementationSummary(mixedSummary)).toBe(
+      'Implemented core auth flow and API wiring.'
+    );
+  });
+
+  it('includes Implementation as the first parsed phase entry', () => {
+    const entries = parseAllPhaseSummaries(mixedSummary);
+
+    expect(entries[0]).toMatchObject({
+      phaseName: 'Implementation',
+      content: 'Implemented core auth flow and API wiring.',
+    });
+    expect(entries.map((entry) => entry.phaseName)).toEqual([
+      'Implementation',
+      'Code Review',
+      'Testing',
+    ]);
+  });
+
+  it('extracts specific phase summaries from mixed format', () => {
+    expect(extractPhaseSummary(mixedSummary, 'Implementation')).toBe(
+      'Implemented core auth flow and API wiring.'
+    );
+    expect(extractPhaseSummary(mixedSummary, 'Code Review')).toBe(
+      'Addressed lint warnings and improved error handling.'
+    );
+    expect(extractPhaseSummary(mixedSummary, 'Testing')).toBe('All tests passing.');
+  });
+
+  it('treats mixed format as accumulated summary', () => {
+    expect(isAccumulatedSummary(mixedSummary)).toBe(true);
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/ui/log-parser-phase-summary.test.ts b/temp_repo/apps/server/tests/unit/ui/log-parser-phase-summary.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c919b5a57f631c9267c5193bf9ca8c76d5808492
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/ui/log-parser-phase-summary.test.ts
@@ -0,0 +1,973 @@
+/**
+ * Unit tests for log-parser phase summary parsing functions.
+ *
+ * These functions are used to parse accumulated summaries that contain multiple
+ * pipeline step summaries separated by `---` and identified by `### StepName` headers.
+ *
+ * Functions tested:
+ * - parsePhaseSummaries: Parses the entire accumulated summary into a Map
+ * - extractPhaseSummary: Extracts a specific phase's content
+ * - extractImplementationSummary: Extracts implementation phase content (convenience)
+ * - isAccumulatedSummary: Checks if a summary is in accumulated format
+ */
+
+import { describe, it, expect } from 'vitest';
+
+// Mirror the functions from apps/ui/src/lib/log-parser.ts
+// (We can't import directly because it's a UI file)
+
+/**
+ * Parses an accumulated summary string into individual phase summaries.
+ */
+function parsePhaseSummaries(summary: string | undefined): Map<string, string> {
+  const phaseSummaries = new Map<string, string>();
+
+  if (!summary || !summary.trim()) {
+    return phaseSummaries;
+  }
+
+  // Split by the horizontal rule separator
+  const sections = summary.split(/\n\n---\n\n/);
+
+  for (const section of sections) {
+    // Match the phase header pattern: ### Phase Name
+    const headerMatch = section.match(/^###\s+(.+?)(?:\n|$)/);
+    if (headerMatch) {
+      const phaseName = headerMatch[1].trim().toLowerCase();
+      // Extract content after the header (skip the header line and leading newlines)
+      const content = section.substring(headerMatch[0].length).trim();
+      phaseSummaries.set(phaseName, content);
+    }
+  }
+
+  return phaseSummaries;
+}
+
+/**
+ * Extracts a specific phase summary from an accumulated summary string.
+ */
+function extractPhaseSummary(summary: string | undefined, phaseName: string): string | null {
+  const phaseSummaries = parsePhaseSummaries(summary);
+  const normalizedPhaseName = phaseName.toLowerCase();
+  return phaseSummaries.get(normalizedPhaseName) || null;
+}
+
+/**
+ * Extracts the implementation phase summary from an accumulated summary string.
+ */
+function extractImplementationSummary(summary: string | undefined): string | null {
+  if (!summary || !summary.trim()) {
+    return null;
+  }
+
+  const phaseSummaries = parsePhaseSummaries(summary);
+
+  // Try exact match first
+  const implementationContent = phaseSummaries.get('implementation');
+  if (implementationContent) {
+    return implementationContent;
+  }
+
+  // Fallback: find any phase containing "implement"
+  for (const [phaseName, content] of phaseSummaries) {
+    if (phaseName.includes('implement')) {
+      return content;
+    }
+  }
+
+  // If no phase summaries found, the summary might not be in accumulated format
+  // (legacy or non-pipeline feature). In this case, return the whole summary
+  // if it looks like a single summary (no phase headers).
+  if (!summary.includes('### ') && !summary.includes('\n---\n')) {
+    return summary;
+  }
+
+  return null;
+}
+
+/**
+ * Checks if a summary string is in the accumulated multi-phase format.
+ */
+function isAccumulatedSummary(summary: string | undefined): boolean {
+  if (!summary || !summary.trim()) {
+    return false;
+  }
+
+  // Check for the presence of phase headers with separator
+  const hasMultiplePhases =
+    summary.includes('\n\n---\n\n') && summary.match(/###\s+.+/g)?.length > 0;
+
+  return hasMultiplePhases;
+}
+
+/**
+ * Represents a single phase entry in an accumulated summary.
+ */
+interface PhaseSummaryEntry {
+  /** The phase name (e.g., "Implementation", "Testing", "Code Review") */
+  phaseName: string;
+  /** The content of this phase's summary */
+  content: string;
+  /** The original header line (e.g., "### Implementation") */
+  header: string;
+}
+
+/** Default phase name used for non-accumulated summaries */
+const DEFAULT_PHASE_NAME = 'Summary';
+
+/**
+ * Parses an accumulated summary into individual phase entries.
+ * Returns phases in the order they appear in the summary.
+ */
+function parseAllPhaseSummaries(summary: string | undefined): PhaseSummaryEntry[] {
+  const entries: PhaseSummaryEntry[] = [];
+
+  if (!summary || !summary.trim()) {
+    return entries;
+  }
+
+  // Check if this is an accumulated summary (has phase headers)
+  if (!summary.includes('### ')) {
+    // Not an accumulated summary - return as single entry with generic name
+    return [
+      { phaseName: DEFAULT_PHASE_NAME, content: summary, header: `### ${DEFAULT_PHASE_NAME}` },
+    ];
+  }
+
+  // Split by the horizontal rule separator
+  const sections = summary.split(/\n\n---\n\n/);
+
+  for (const section of sections) {
+    // Match the phase header pattern: ### Phase Name
+    const headerMatch = section.match(/^(###\s+)(.+?)(?:\n|$)/);
+    if (headerMatch) {
+      const header = headerMatch[0].trim();
+      const phaseName = headerMatch[2].trim();
+      // Extract content after the header (skip the header line and leading newlines)
+      const content = section.substring(headerMatch[0].length).trim();
+      entries.push({ phaseName, content, header });
+    }
+  }
+
+  return entries;
+}
+
+describe('parsePhaseSummaries', () => {
+  describe('basic parsing', () => {
+    it('should parse single phase summary', () => {
+      const summary = `### Implementation
+
+## Changes Made
+- Created new module
+- Added unit tests`;
+
+      const result = parsePhaseSummaries(summary);
+
+      expect(result.size).toBe(1);
+      expect(result.get('implementation')).toBe(
+        '## Changes Made\n- Created new module\n- Added unit tests'
+      );
+    });
+
+    it('should parse multiple phase summaries', () => {
+      const summary = `### Implementation
+
+## Changes Made
+- Created new module
+
+---
+
+### Testing
+
+## Test Results
+- All tests pass`;
+
+      const result = parsePhaseSummaries(summary);
+
+      expect(result.size).toBe(2);
+      expect(result.get('implementation')).toBe('## Changes Made\n- Created new module');
+      expect(result.get('testing')).toBe('## Test Results\n- All tests pass');
+    });
+
+    it('should handle three or more phases', () => {
+      const summary = `### Planning
+
+Plan created
+
+---
+
+### Implementation
+
+Code written
+
+---
+
+### Testing
+
+Tests pass
+
+---
+
+### Refinement
+
+Code polished`;
+
+      const result = parsePhaseSummaries(summary);
+
+      expect(result.size).toBe(4);
+      expect(result.get('planning')).toBe('Plan created');
+      expect(result.get('implementation')).toBe('Code written');
+      expect(result.get('testing')).toBe('Tests pass');
+      expect(result.get('refinement')).toBe('Code polished');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should return empty map for undefined summary', () => {
+      const result = parsePhaseSummaries(undefined);
+      expect(result.size).toBe(0);
+    });
+
+    it('should return empty map for null summary', () => {
+      const result = parsePhaseSummaries(null as unknown as string);
+      expect(result.size).toBe(0);
+    });
+
+    it('should return empty map for empty string', () => {
+      const result = parsePhaseSummaries('');
+      expect(result.size).toBe(0);
+    });
+
+    it('should return empty map for whitespace-only string', () => {
+      const result = parsePhaseSummaries('   \n\n   ');
+      expect(result.size).toBe(0);
+    });
+
+    it('should handle summary without phase headers', () => {
+      const summary = 'Just some regular content without headers';
+      const result = parsePhaseSummaries(summary);
+      expect(result.size).toBe(0);
+    });
+
+    it('should handle section without header after separator', () => {
+      const summary = `### Implementation
+
+Content here
+
+---
+
+This section has no header`;
+
+      const result = parsePhaseSummaries(summary);
+
+      expect(result.size).toBe(1);
+      expect(result.get('implementation')).toBe('Content here');
+    });
+  });
+
+  describe('phase name normalization', () => {
+    it('should normalize phase names to lowercase', () => {
+      const summary = `### IMPLEMENTATION
+
+Content`;
+
+      const result = parsePhaseSummaries(summary);
+      expect(result.has('implementation')).toBe(true);
+      expect(result.has('IMPLEMENTATION')).toBe(false);
+    });
+
+    it('should handle mixed case phase names', () => {
+      const summary = `### Code Review
+
+Content`;
+
+      const result = parsePhaseSummaries(summary);
+      expect(result.has('code review')).toBe(true);
+    });
+
+    it('should preserve spaces in multi-word phase names', () => {
+      const summary = `### Code Review
+
+Content`;
+
+      const result = parsePhaseSummaries(summary);
+      expect(result.get('code review')).toBe('Content');
+    });
+  });
+
+  describe('content preservation', () => {
+    it('should preserve markdown formatting in content', () => {
+      const summary = `### Implementation
+
+## Heading
+- **Bold text**
+- \`code\`
+\`\`\`typescript
+const x = 1;
+\`\`\``;
+
+      const result = parsePhaseSummaries(summary);
+      const content = result.get('implementation');
+
+      expect(content).toContain('**Bold text**');
+      expect(content).toContain('`code`');
+      expect(content).toContain('```typescript');
+    });
+
+    it('should preserve unicode in content', () => {
+      const summary = `### Testing
+
+Results: ✅ 42 passed, ❌ 0 failed`;
+
+      const result = parsePhaseSummaries(summary);
+      expect(result.get('testing')).toContain('✅');
+      expect(result.get('testing')).toContain('❌');
+    });
+
+    it('should preserve tables in content', () => {
+      const summary = `### Testing
+
+| Test | Result |
+|------|--------|
+| Unit | Pass   |`;
+
+      const result = parsePhaseSummaries(summary);
+      expect(result.get('testing')).toContain('| Test | Result |');
+    });
+
+    it('should handle empty phase content', () => {
+      const summary = `### Implementation
+
+---
+
+### Testing
+
+Content`;
+
+      const result = parsePhaseSummaries(summary);
+      expect(result.get('implementation')).toBe('');
+      expect(result.get('testing')).toBe('Content');
+    });
+  });
+});
+
+describe('extractPhaseSummary', () => {
+  describe('extraction by phase name', () => {
+    it('should extract specified phase content', () => {
+      const summary = `### Implementation
+
+Implementation content
+
+---
+
+### Testing
+
+Testing content`;
+
+      expect(extractPhaseSummary(summary, 'Implementation')).toBe('Implementation content');
+      expect(extractPhaseSummary(summary, 'Testing')).toBe('Testing content');
+    });
+
+    it('should be case-insensitive for phase name', () => {
+      const summary = `### Implementation
+
+Content`;
+
+      expect(extractPhaseSummary(summary, 'implementation')).toBe('Content');
+      expect(extractPhaseSummary(summary, 'IMPLEMENTATION')).toBe('Content');
+      expect(extractPhaseSummary(summary, 'ImPlEmEnTaTiOn')).toBe('Content');
+    });
+
+    it('should return null for non-existent phase', () => {
+      const summary = `### Implementation
+
+Content`;
+
+      expect(extractPhaseSummary(summary, 'NonExistent')).toBeNull();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should return null for undefined summary', () => {
+      expect(extractPhaseSummary(undefined, 'Implementation')).toBeNull();
+    });
+
+    it('should return null for empty summary', () => {
+      expect(extractPhaseSummary('', 'Implementation')).toBeNull();
+    });
+
+    it('should handle whitespace in phase name', () => {
+      const summary = `### Code Review
+
+Content`;
+
+      expect(extractPhaseSummary(summary, 'Code Review')).toBe('Content');
+      expect(extractPhaseSummary(summary, 'code review')).toBe('Content');
+    });
+  });
+});
+
+describe('extractImplementationSummary', () => {
+  describe('exact match', () => {
+    it('should extract implementation phase by exact name', () => {
+      const summary = `### Implementation
+
+## Changes Made
+- Created feature
+- Added tests
+
+---
+
+### Testing
+
+Tests pass`;
+
+      const result = extractImplementationSummary(summary);
+      expect(result).toBe('## Changes Made\n- Created feature\n- Added tests');
+    });
+
+    it('should be case-insensitive', () => {
+      const summary = `### IMPLEMENTATION
+
+Content`;
+
+      expect(extractImplementationSummary(summary)).toBe('Content');
+    });
+  });
+
+  describe('partial match fallback', () => {
+    it('should find phase containing "implement"', () => {
+      const summary = `### Feature Implementation
+
+Content here`;
+
+      const result = extractImplementationSummary(summary);
+      expect(result).toBe('Content here');
+    });
+
+    it('should find phase containing "implementation"', () => {
+      const summary = `### Implementation Phase
+
+Content here`;
+
+      const result = extractImplementationSummary(summary);
+      expect(result).toBe('Content here');
+    });
+  });
+
+  describe('legacy/non-accumulated summary handling', () => {
+    it('should return full summary if no phase headers present', () => {
+      const summary = `## Changes Made
+- Created feature
+- Added tests`;
+
+      const result = extractImplementationSummary(summary);
+      expect(result).toBe(summary);
+    });
+
+    it('should return null if summary has phase headers but no implementation', () => {
+      const summary = `### Testing
+
+Tests pass
+
+---
+
+### Review
+
+Review complete`;
+
+      const result = extractImplementationSummary(summary);
+      expect(result).toBeNull();
+    });
+
+    it('should not return full summary if it contains phase headers', () => {
+      const summary = `### Testing
+
+Tests pass`;
+
+      const result = extractImplementationSummary(summary);
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should return null for undefined summary', () => {
+      expect(extractImplementationSummary(undefined)).toBeNull();
+    });
+
+    it('should return null for empty string', () => {
+      expect(extractImplementationSummary('')).toBeNull();
+    });
+
+    it('should return null for whitespace-only string', () => {
+      expect(extractImplementationSummary('   \n\n   ')).toBeNull();
+    });
+  });
+});
+
+describe('isAccumulatedSummary', () => {
+  describe('accumulated format detection', () => {
+    it('should return true for accumulated summary with separator and headers', () => {
+      const summary = `### Implementation
+
+Content
+
+---
+
+### Testing
+
+Content`;
+
+      expect(isAccumulatedSummary(summary)).toBe(true);
+    });
+
+    it('should return true for accumulated summary with multiple phases', () => {
+      const summary = `### Phase 1
+
+Content 1
+
+---
+
+### Phase 2
+
+Content 2
+
+---
+
+### Phase 3
+
+Content 3`;
+
+      expect(isAccumulatedSummary(summary)).toBe(true);
+    });
+
+    it('should return true for accumulated summary with just one phase and separator', () => {
+      // Even a single phase with a separator suggests it's in accumulated format
+      const summary = `### Implementation
+
+Content
+
+---
+
+### Testing
+
+More content`;
+
+      expect(isAccumulatedSummary(summary)).toBe(true);
+    });
+  });
+
+  describe('non-accumulated format detection', () => {
+    it('should return false for summary without separator', () => {
+      const summary = `### Implementation
+
+Just content`;
+
+      expect(isAccumulatedSummary(summary)).toBe(false);
+    });
+
+    it('should return false for summary with separator but no headers', () => {
+      const summary = `Content
+
+---
+
+More content`;
+
+      expect(isAccumulatedSummary(summary)).toBe(false);
+    });
+
+    it('should return false for simple text summary', () => {
+      const summary = 'Just a simple summary without any special formatting';
+      expect(isAccumulatedSummary(summary)).toBe(false);
+    });
+
+    it('should return false for markdown summary without phase headers', () => {
+      const summary = `## Changes Made
+- Created feature
+- Added tests`;
+      expect(isAccumulatedSummary(summary)).toBe(false);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should return false for undefined summary', () => {
+      expect(isAccumulatedSummary(undefined)).toBe(false);
+    });
+
+    it('should return false for null summary', () => {
+      expect(isAccumulatedSummary(null as unknown as string)).toBe(false);
+    });
+
+    it('should return false for empty string', () => {
+      expect(isAccumulatedSummary('')).toBe(false);
+    });
+
+    it('should return false for whitespace-only string', () => {
+      expect(isAccumulatedSummary('   \n\n   ')).toBe(false);
+    });
+  });
+});
+
+describe('Integration: Full parsing workflow', () => {
+  it('should correctly parse typical server-accumulated pipeline summary', () => {
+    // This simulates what FeatureStateManager.saveFeatureSummary() produces
+    const summary = [
+      '### Implementation',
+      '',
+      '## Changes',
+      '- Added auth module',
+      '- Created user service',
+      '',
+      '---',
+      '',
+      '### Code Review',
+      '',
+      '## Review Results',
+      '- Style issues fixed',
+      '- Added error handling',
+      '',
+      '---',
+      '',
+      '### Testing',
+      '',
+      '## Test Results',
+      '- 42 tests pass',
+      '- 98% coverage',
+    ].join('\n');
+
+    // Verify isAccumulatedSummary
+    expect(isAccumulatedSummary(summary)).toBe(true);
+
+    // Verify parsePhaseSummaries
+    const phases = parsePhaseSummaries(summary);
+    expect(phases.size).toBe(3);
+    expect(phases.get('implementation')).toContain('Added auth module');
+    expect(phases.get('code review')).toContain('Style issues fixed');
+    expect(phases.get('testing')).toContain('42 tests pass');
+
+    // Verify extractPhaseSummary
+    expect(extractPhaseSummary(summary, 'Implementation')).toContain('Added auth module');
+    expect(extractPhaseSummary(summary, 'Code Review')).toContain('Style issues fixed');
+    expect(extractPhaseSummary(summary, 'Testing')).toContain('42 tests pass');
+
+    // Verify extractImplementationSummary
+    expect(extractImplementationSummary(summary)).toContain('Added auth module');
+  });
+
+  it('should handle legacy non-pipeline summary correctly', () => {
+    // Legacy features have simple summaries without accumulation
+    const summary = `## Implementation Complete
+- Created the feature
+- All tests pass`;
+
+    // Should NOT be detected as accumulated
+    expect(isAccumulatedSummary(summary)).toBe(false);
+
+    // parsePhaseSummaries should return empty
+    const phases = parsePhaseSummaries(summary);
+    expect(phases.size).toBe(0);
+
+    // extractPhaseSummary should return null
+    expect(extractPhaseSummary(summary, 'Implementation')).toBeNull();
+
+    // extractImplementationSummary should return the full summary (legacy handling)
+    expect(extractImplementationSummary(summary)).toBe(summary);
+  });
+
+  it('should handle single-step pipeline summary', () => {
+    // A single pipeline step still gets the header but no separator
+    const summary = `### Implementation
+
+## Changes
+- Created the feature`;
+
+    // Should NOT be detected as accumulated (no separator)
+    expect(isAccumulatedSummary(summary)).toBe(false);
+
+    // parsePhaseSummaries should still extract the single phase
+    const phases = parsePhaseSummaries(summary);
+    expect(phases.size).toBe(1);
+    expect(phases.get('implementation')).toContain('Created the feature');
+  });
+});
+
+/**
+ * KEY ARCHITECTURE NOTES:
+ *
+ * 1. The accumulated summary format uses:
+ *    - `### PhaseName` for step headers
+ *    - `\n\n---\n\n` as separator between steps
+ *
+ * 2. Phase names are normalized to lowercase in the Map for case-insensitive lookup.
+ *
+ * 3. Legacy summaries (non-pipeline features) don't have phase headers and should
+ *    be returned as-is by extractImplementationSummary.
+ *
+ * 4. isAccumulatedSummary() checks for BOTH separator AND phase headers to be
+ *    confident that the summary is in the accumulated format.
+ *
+ * 5. The server-side FeatureStateManager.saveFeatureSummary() is responsible for
+ *    creating summaries in this accumulated format.
+ */
+
+describe('parseAllPhaseSummaries', () => {
+  describe('basic parsing', () => {
+    it('should parse single phase summary into array with one entry', () => {
+      const summary = `### Implementation
+
+## Changes Made
+- Created new module
+- Added unit tests`;
+
+      const result = parseAllPhaseSummaries(summary);
+
+      expect(result.length).toBe(1);
+      expect(result[0].phaseName).toBe('Implementation');
+      expect(result[0].content).toBe('## Changes Made\n- Created new module\n- Added unit tests');
+      expect(result[0].header).toBe('### Implementation');
+    });
+
+    it('should parse multiple phase summaries in order', () => {
+      const summary = `### Implementation
+
+## Changes Made
+- Created new module
+
+---
+
+### Testing
+
+## Test Results
+- All tests pass`;
+
+      const result = parseAllPhaseSummaries(summary);
+
+      expect(result.length).toBe(2);
+      // Verify order is preserved
+      expect(result[0].phaseName).toBe('Implementation');
+      expect(result[0].content).toBe('## Changes Made\n- Created new module');
+      expect(result[1].phaseName).toBe('Testing');
+      expect(result[1].content).toBe('## Test Results\n- All tests pass');
+    });
+
+    it('should parse three or more phases in correct order', () => {
+      const summary = `### Planning
+
+Plan created
+
+---
+
+### Implementation
+
+Code written
+
+---
+
+### Testing
+
+Tests pass
+
+---
+
+### Refinement
+
+Code polished`;
+
+      const result = parseAllPhaseSummaries(summary);
+
+      expect(result.length).toBe(4);
+      expect(result[0].phaseName).toBe('Planning');
+      expect(result[1].phaseName).toBe('Implementation');
+      expect(result[2].phaseName).toBe('Testing');
+      expect(result[3].phaseName).toBe('Refinement');
+    });
+  });
+
+  describe('non-accumulated summary handling', () => {
+    it('should return single entry for summary without phase headers', () => {
+      const summary = `## Changes Made
+- Created feature
+- Added tests`;
+
+      const result = parseAllPhaseSummaries(summary);
+
+      expect(result.length).toBe(1);
+      expect(result[0].phaseName).toBe('Summary');
+      expect(result[0].content).toBe(summary);
+    });
+
+    it('should return single entry for simple text summary', () => {
+      const summary = 'Just a simple summary without any special formatting';
+
+      const result = parseAllPhaseSummaries(summary);
+
+      expect(result.length).toBe(1);
+      expect(result[0].phaseName).toBe('Summary');
+      expect(result[0].content).toBe(summary);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should return empty array for undefined summary', () => {
+      const result = parseAllPhaseSummaries(undefined);
+      expect(result.length).toBe(0);
+    });
+
+    it('should return empty array for empty string', () => {
+      const result = parseAllPhaseSummaries('');
+      expect(result.length).toBe(0);
+    });
+
+    it('should return empty array for whitespace-only string', () => {
+      const result = parseAllPhaseSummaries('   \n\n   ');
+      expect(result.length).toBe(0);
+    });
+
+    it('should handle section without header after separator', () => {
+      const summary = `### Implementation
+
+Content here
+
+---
+
+This section has no header`;
+
+      const result = parseAllPhaseSummaries(summary);
+
+      expect(result.length).toBe(1);
+      expect(result[0].phaseName).toBe('Implementation');
+    });
+  });
+
+  describe('content preservation', () => {
+    it('should preserve markdown formatting in content', () => {
+      const summary = `### Implementation
+
+## Heading
+- **Bold text**
+- \`code\`
+\`\`\`typescript
+const x = 1;
+\`\`\``;
+
+      const result = parseAllPhaseSummaries(summary);
+      const content = result[0].content;
+
+      expect(content).toContain('**Bold text**');
+      expect(content).toContain('`code`');
+      expect(content).toContain('```typescript');
+    });
+
+    it('should preserve unicode in content', () => {
+      const summary = `### Testing
+
+Results: ✅ 42 passed, ❌ 0 failed`;
+
+      const result = parseAllPhaseSummaries(summary);
+      expect(result[0].content).toContain('✅');
+      expect(result[0].content).toContain('❌');
+    });
+
+    it('should preserve tables in content', () => {
+      const summary = `### Testing
+
+| Test | Result |
+|------|--------|
+| Unit | Pass   |`;
+
+      const result = parseAllPhaseSummaries(summary);
+      expect(result[0].content).toContain('| Test | Result |');
+    });
+
+    it('should handle empty phase content', () => {
+      const summary = `### Implementation
+
+---
+
+### Testing
+
+Content`;
+
+      const result = parseAllPhaseSummaries(summary);
+      expect(result.length).toBe(2);
+      expect(result[0].content).toBe('');
+      expect(result[1].content).toBe('Content');
+    });
+  });
+
+  describe('header preservation', () => {
+    it('should preserve original header text', () => {
+      const summary = `### Code Review
+
+Content`;
+
+      const result = parseAllPhaseSummaries(summary);
+      expect(result[0].header).toBe('### Code Review');
+    });
+
+    it('should preserve phase name with original casing', () => {
+      const summary = `### CODE REVIEW
+
+Content`;
+
+      const result = parseAllPhaseSummaries(summary);
+      expect(result[0].phaseName).toBe('CODE REVIEW');
+    });
+  });
+
+  describe('chronological order preservation', () => {
+    it('should maintain order: Alpha before Beta before Gamma', () => {
+      const summary = `### Alpha
+
+First
+
+---
+
+### Beta
+
+Second
+
+---
+
+### Gamma
+
+Third`;
+
+      const result = parseAllPhaseSummaries(summary);
+
+      expect(result.length).toBe(3);
+      const names = result.map((e) => e.phaseName);
+      expect(names).toEqual(['Alpha', 'Beta', 'Gamma']);
+    });
+
+    it('should preserve typical pipeline order', () => {
+      const summary = [
+        '### Implementation',
+        '',
+        '## Changes',
+        '- Added auth module',
+        '',
+        '---',
+        '',
+        '### Code Review',
+        '',
+        '## Review Results',
+        '- Style issues fixed',
+        '',
+        '---',
+        '',
+        '### Testing',
+        '',
+        '## Test Results',
+        '- 42 tests pass',
+      ].join('\n');
+
+      const result = parseAllPhaseSummaries(summary);
+
+      expect(result.length).toBe(3);
+      expect(result[0].phaseName).toBe('Implementation');
+      expect(result[1].phaseName).toBe('Code Review');
+      expect(result[2].phaseName).toBe('Testing');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/ui/log-parser-summary.test.ts b/temp_repo/apps/server/tests/unit/ui/log-parser-summary.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e5bc0b707a680679697b652812e32d385e5680b2
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/ui/log-parser-summary.test.ts
@@ -0,0 +1,453 @@
+/**
+ * Unit tests for the UI's log-parser extractSummary() function.
+ *
+ * These tests document the behavior of extractSummary() which is used as a
+ * CLIENT-SIDE FALLBACK when feature.summary (server-accumulated) is not available.
+ *
+ * IMPORTANT: extractSummary() returns only the LAST <summary> tag from raw output.
+ * For pipeline features with multiple steps, the server-side FeatureStateManager
+ * accumulates all step summaries into feature.summary, which the UI prefers.
+ *
+ * The tests below verify that extractSummary() correctly:
+ * - Returns the LAST summary when multiple exist (mimicking pipeline accumulation)
+ * - Handles various summary formats (<summary> tags, markdown headers)
+ * - Returns null when no summary is found
+ * - Handles edge cases like empty input and malformed tags
+ */
+
+import { describe, it, expect } from 'vitest';
+
+// Recreate the extractSummary logic from apps/ui/src/lib/log-parser.ts
+// We can't import directly because it's a UI file, so we mirror the logic here
+
+/**
+ * Cleans up fragmented streaming text by removing spurious newlines
+ */
+function cleanFragmentedText(content: string): string {
+  let cleaned = content.replace(/([a-zA-Z])\n+([a-zA-Z])/g, '$1$2');
+  cleaned = cleaned.replace(/<([a-zA-Z]+)\n*([a-zA-Z]*)\n*>/g, '<$1$2>');
+  cleaned = cleaned.replace(/<\/([a-zA-Z]+)\n*([a-zA-Z]*)\n*>/g, '</$1$2>');
+  return cleaned;
+}
+
+/**
+ * Extracts summary content from raw log output
+ * Returns the LAST summary text if found, or null if no summary exists
+ */
+function extractSummary(rawOutput: string): string | null {
+  if (!rawOutput || !rawOutput.trim()) {
+    return null;
+  }
+
+  const cleanedOutput = cleanFragmentedText(rawOutput);
+
+  const regexesToTry: Array<{
+    regex: RegExp;
+    processor: (m: RegExpMatchArray) => string;
+  }> = [
+    { regex: /<summary>([\s\S]*?)<\/summary>/gi, processor: (m) => m[1] },
+    { regex: /^##\s+Summary[^\n]*\n([\s\S]*?)(?=\n##\s+[^#]|\n🔧|$)/gm, processor: (m) => m[1] },
+    {
+      regex: /^##\s+(Feature|Changes|Implementation)[^\n]*\n([\s\S]*?)(?=\n##\s+[^#]|\n🔧|$)/gm,
+      processor: (m) => `## ${m[1]}\n${m[2]}`,
+    },
+    {
+      regex: /(^|\n)(All tasks completed[\s\S]*?)(?=\n🔧|\n📋|\n⚡|\n❌|$)/g,
+      processor: (m) => m[2],
+    },
+    {
+      regex:
+        /(^|\n)((I've|I have) (successfully |now )?(completed|finished|implemented)[\s\S]*?)(?=\n🔧|\n📋|\n⚡|\n❌|$)/g,
+      processor: (m) => m[2],
+    },
+  ];
+
+  for (const { regex, processor } of regexesToTry) {
+    const matches = [...cleanedOutput.matchAll(regex)];
+    if (matches.length > 0) {
+      const lastMatch = matches[matches.length - 1];
+      return cleanFragmentedText(processor(lastMatch)).trim();
+    }
+  }
+
+  return null;
+}
+
+describe('log-parser extractSummary (UI fallback)', () => {
+  describe('basic summary extraction', () => {
+    it('should extract summary from <summary> tags', () => {
+      const output = `
+Some agent output...
+
+<summary>
+## Changes Made
+- Fixed the bug in parser.ts
+- Added error handling
+</summary>
+
+More output...
+`;
+      const result = extractSummary(output);
+      expect(result).toBe('## Changes Made\n- Fixed the bug in parser.ts\n- Added error handling');
+    });
+
+    it('should prefer <summary> tags over markdown headers', () => {
+      const output = `
+## Summary
+
+Markdown summary here.
+
+<summary>
+XML summary here.
+</summary>
+`;
+      const result = extractSummary(output);
+      expect(result).toBe('XML summary here.');
+    });
+  });
+
+  describe('multiple summaries (pipeline accumulation scenario)', () => {
+    it('should return ONLY the LAST summary tag when multiple exist', () => {
+      // This is the key behavior for pipeline features:
+      // extractSummary returns only the LAST, which is why server-side
+      // accumulation is needed for multi-step pipelines
+      const output = `
+## Step 1: Code Review
+
+<summary>
+- Found 3 issues
+- Approved with changes
+</summary>
+
+---
+
+## Step 2: Testing
+
+<summary>
+- All tests pass
+- Coverage 95%
+</summary>
+`;
+      const result = extractSummary(output);
+      expect(result).toBe('- All tests pass\n- Coverage 95%');
+      expect(result).not.toContain('Code Review');
+      expect(result).not.toContain('Found 3 issues');
+    });
+
+    it('should return ONLY the LAST summary from three pipeline steps', () => {
+      const output = `
+<summary>Step 1 complete</summary>
+
+---
+
+<summary>Step 2 complete</summary>
+
+---
+
+<summary>Step 3 complete - all done!</summary>
+`;
+      const result = extractSummary(output);
+      expect(result).toBe('Step 3 complete - all done!');
+      expect(result).not.toContain('Step 1');
+      expect(result).not.toContain('Step 2');
+    });
+
+    it('should handle mixed summary formats across pipeline steps', () => {
+      const output = `
+## Step 1
+
+<summary>
+Implementation done
+</summary>
+
+---
+
+## Step 2
+
+## Summary
+Review complete
+
+---
+
+## Step 3
+
+<summary>
+All tests passing
+</summary>
+`;
+      const result = extractSummary(output);
+      // The <summary> tag format takes priority, and returns the LAST match
+      expect(result).toBe('All tests passing');
+    });
+  });
+
+  describe('priority order of summary patterns', () => {
+    it('should try patterns in priority order: <summary> first, then markdown headers', () => {
+      // When both <summary> tags and markdown headers exist,
+      // <summary> tags should take priority
+      const output = `
+## Summary
+
+This markdown summary should be ignored.
+
+<summary>
+This XML summary should be used.
+</summary>
+`;
+      const result = extractSummary(output);
+      expect(result).toBe('This XML summary should be used.');
+      expect(result).not.toContain('ignored');
+    });
+
+    it('should fall back to Feature/Changes/Implementation headers when no <summary> tag', () => {
+      // Note: The regex for these headers requires content before the header
+      // (^ at start or preceded by newline). Adding some content before.
+      const output = `
+Agent output here...
+
+## Feature
+
+New authentication system with OAuth support.
+
+## Next
+`;
+      const result = extractSummary(output);
+      // Should find the Feature header and include it in result
+      // Note: Due to regex behavior, it captures content until next ##
+      expect(result).toContain('## Feature');
+    });
+
+    it('should fall back to completion phrases when no structured summary found', () => {
+      const output = `
+Working on the feature...
+Making progress...
+
+All tasks completed successfully. The feature is ready.
+
+🔧 Tool: Bash
+`;
+      const result = extractSummary(output);
+      expect(result).toContain('All tasks completed');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should return null for empty string', () => {
+      expect(extractSummary('')).toBeNull();
+    });
+
+    it('should return null for whitespace-only string', () => {
+      expect(extractSummary('   \n\n   ')).toBeNull();
+    });
+
+    it('should return null when no summary pattern found', () => {
+      expect(extractSummary('Random agent output without any summary patterns')).toBeNull();
+    });
+
+    it('should handle malformed <summary> tags gracefully', () => {
+      const output = `
+<summary>
+This summary is never closed...
+`;
+      // Without closing tag, the regex won't match
+      expect(extractSummary(output)).toBeNull();
+    });
+
+    it('should handle empty <summary> tags', () => {
+      const output = `
+<summary></summary>
+`;
+      const result = extractSummary(output);
+      expect(result).toBe(''); // Empty string is valid
+    });
+
+    it('should handle <summary> tags with only whitespace', () => {
+      const output = `
+<summary>
+
+</summary>
+`;
+      const result = extractSummary(output);
+      expect(result).toBe(''); // Trimmed to empty string
+    });
+
+    it('should handle summary with markdown code blocks', () => {
+      const output = `
+<summary>
+## Changes
+
+\`\`\`typescript
+const x = 1;
+\`\`\`
+
+Done!
+</summary>
+`;
+      const result = extractSummary(output);
+      expect(result).toContain('```typescript');
+      expect(result).toContain('const x = 1;');
+    });
+
+    it('should handle summary with special characters', () => {
+      const output = `
+<summary>
+Fixed bug in parser.ts: "quotes" and 'apostrophes'
+Special chars: <>&$@#%^*
+</summary>
+`;
+      const result = extractSummary(output);
+      expect(result).toContain('"quotes"');
+      expect(result).toContain('<>&$@#%^*');
+    });
+  });
+
+  describe('fragmented streaming text handling', () => {
+    it('should handle fragmented <summary> tags from streaming', () => {
+      // Sometimes streaming providers split text like "<sum\n\nmary>"
+      const output = `
+<sum
+
+mary>
+Fixed the issue
+</sum
+
+mary>
+`;
+      const result = extractSummary(output);
+      // The cleanFragmentedText function should normalize this
+      expect(result).toBe('Fixed the issue');
+    });
+
+    it('should handle fragmented text within summary content', () => {
+      const output = `
+<summary>
+Fixed the bug in par
+ser.ts
+</summary>
+`;
+      const result = extractSummary(output);
+      // cleanFragmentedText should join "par\n\nser" into "parser"
+      expect(result).toBe('Fixed the bug in parser.ts');
+    });
+  });
+
+  describe('completion phrase detection', () => {
+    it('should extract "All tasks completed" summaries', () => {
+      const output = `
+Some output...
+
+All tasks completed successfully. The feature is ready for review.
+
+🔧 Tool: Bash
+`;
+      const result = extractSummary(output);
+      expect(result).toContain('All tasks completed');
+    });
+
+    it("should extract I've completed summaries", () => {
+      const output = `
+Working on feature...
+
+I've successfully implemented the feature with all requirements met.
+
+🔧 Tool: Read
+`;
+      const result = extractSummary(output);
+      expect(result).toContain("I've successfully implemented");
+    });
+
+    it('should extract "I have finished" summaries', () => {
+      const output = `
+Implementation phase...
+
+I have finished the implementation.
+
+📋 Planning
+`;
+      const result = extractSummary(output);
+      expect(result).toContain('I have finished');
+    });
+  });
+
+  describe('real-world pipeline scenarios', () => {
+    it('should handle typical multi-step pipeline output (returns last only)', () => {
+      // This test documents WHY server-side accumulation is essential:
+      // extractSummary only returns the last step's summary
+      const output = `
+📋 Planning Mode: Full
+
+🔧 Tool: Read
+Input: {"file_path": "src/parser.ts"}
+
+<summary>
+## Code Review
+- Analyzed parser.ts
+- Found potential improvements
+</summary>
+
+---
+
+## Follow-up Session
+
+🔧 Tool: Edit
+Input: {"file_path": "src/parser.ts"}
+
+<summary>
+## Implementation
+- Applied suggested improvements
+- Updated tests
+</summary>
+
+---
+
+## Follow-up Session
+
+🔧 Tool: Bash
+Input: {"command": "npm test"}
+
+<summary>
+## Testing
+- All 42 tests pass
+- No regressions detected
+</summary>
+`;
+      const result = extractSummary(output);
+      // Only the LAST summary is returned
+      expect(result).toBe('## Testing\n- All 42 tests pass\n- No regressions detected');
+      // Earlier summaries are lost
+      expect(result).not.toContain('Code Review');
+      expect(result).not.toContain('Implementation');
+    });
+
+    it('should handle single-step non-pipeline output', () => {
+      // For non-pipeline features, extractSummary works correctly
+      const output = `
+Working on feature...
+
+<summary>
+## Implementation Complete
+- Created new component
+- Added unit tests
+- Updated documentation
+</summary>
+`;
+      const result = extractSummary(output);
+      expect(result).toContain('Implementation Complete');
+      expect(result).toContain('Created new component');
+    });
+  });
+});
+
+/**
+ * These tests verify the UI fallback behavior for summary extraction.
+ *
+ * KEY INSIGHT: The extractSummary() function returns only the LAST summary,
+ * which is why the server-side FeatureStateManager.saveFeatureSummary() method
+ * accumulates all step summaries into feature.summary.
+ *
+ * The UI's AgentOutputModal component uses this priority:
+ * 1. feature.summary (server-accumulated, contains all steps)
+ * 2. extractSummary(output) (client-side fallback, last summary only)
+ *
+ * For pipeline features, this ensures all step summaries are displayed.
+ */
diff --git a/temp_repo/apps/server/tests/unit/ui/phase-summary-parser.test.ts b/temp_repo/apps/server/tests/unit/ui/phase-summary-parser.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aa7f0533f3be3996b20d7b06488522e70ddcc3d5
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/ui/phase-summary-parser.test.ts
@@ -0,0 +1,533 @@
+/**
+ * Unit tests for the UI's log-parser phase summary parsing functions.
+ *
+ * These tests verify the behavior of:
+ * - parsePhaseSummaries(): Parses accumulated summary into individual phases
+ * - extractPhaseSummary(): Extracts a specific phase's summary
+ * - extractImplementationSummary(): Extracts only the implementation phase
+ * - isAccumulatedSummary(): Checks if summary is in accumulated format
+ *
+ * The accumulated summary format uses markdown headers with `###` for phase names
+ * and `---` as separators between phases.
+ *
+ * TODO: These test helper functions are mirrored from apps/ui/src/lib/log-parser.ts
+ * because server-side tests cannot import from the UI module. If the production
+ * implementation changes, these tests may pass while production fails.
+ * Consider adding an integration test that validates the actual UI parsing behavior.
+ */
+
+import { describe, it, expect } from 'vitest';
+
+// ============================================================================
+// MIRRORED FUNCTIONS from apps/ui/src/lib/log-parser.ts
+// ============================================================================
+// NOTE: These functions are mirrored from the UI implementation because
+// server-side tests cannot import from apps/ui/. Keep these in sync with the
+// production implementation. The UI implementation includes additional
+// handling for getPhaseSections/leadingImplementationSection for backward
+// compatibility with mixed formats.
+
+/**
+ * Parses an accumulated summary string into individual phase summaries.
+ */
+function parsePhaseSummaries(summary: string | undefined): Map<string, string> {
+  const phaseSummaries = new Map<string, string>();
+
+  if (!summary || !summary.trim()) {
+    return phaseSummaries;
+  }
+
+  // Split by the horizontal rule separator
+  const sections = summary.split(/\n\n---\n\n/);
+
+  for (const section of sections) {
+    // Match the phase header pattern: ### Phase Name
+    const headerMatch = section.match(/^###\s+(.+?)(?:\n|$)/);
+    if (headerMatch) {
+      const phaseName = headerMatch[1].trim().toLowerCase();
+      // Extract content after the header (skip the header line and leading newlines)
+      const content = section.substring(headerMatch[0].length).trim();
+      phaseSummaries.set(phaseName, content);
+    }
+  }
+
+  return phaseSummaries;
+}
+
+/**
+ * Extracts a specific phase summary from an accumulated summary string.
+ */
+function extractPhaseSummary(summary: string | undefined, phaseName: string): string | null {
+  const phaseSummaries = parsePhaseSummaries(summary);
+  const normalizedPhaseName = phaseName.toLowerCase();
+  return phaseSummaries.get(normalizedPhaseName) || null;
+}
+
+/**
+ * Gets the implementation phase summary from an accumulated summary string.
+ */
+function extractImplementationSummary(summary: string | undefined): string | null {
+  if (!summary || !summary.trim()) {
+    return null;
+  }
+
+  const phaseSummaries = parsePhaseSummaries(summary);
+
+  // Try exact match first
+  const implementationContent = phaseSummaries.get('implementation');
+  if (implementationContent) {
+    return implementationContent;
+  }
+
+  // Fallback: find any phase containing "implement"
+  for (const [phaseName, content] of phaseSummaries) {
+    if (phaseName.includes('implement')) {
+      return content;
+    }
+  }
+
+  // If no phase summaries found, the summary might not be in accumulated format
+  // (legacy or non-pipeline feature). In this case, return the whole summary
+  // if it looks like a single summary (no phase headers).
+  if (!summary.includes('### ') && !summary.includes('\n---\n')) {
+    return summary;
+  }
+
+  return null;
+}
+
+/**
+ * Checks if a summary string is in the accumulated multi-phase format.
+ */
+function isAccumulatedSummary(summary: string | undefined): boolean {
+  if (!summary || !summary.trim()) {
+    return false;
+  }
+
+  // Check for the presence of phase headers with separator
+  const hasMultiplePhases =
+    summary.includes('\n\n---\n\n') && summary.match(/###\s+.+/g)?.length > 0;
+
+  return hasMultiplePhases;
+}
+
+describe('phase summary parser', () => {
+  describe('parsePhaseSummaries', () => {
+    it('should parse single phase summary', () => {
+      const summary = `### Implementation
+
+Created auth module with login functionality.`;
+
+      const result = parsePhaseSummaries(summary);
+
+      expect(result.size).toBe(1);
+      expect(result.get('implementation')).toBe('Created auth module with login functionality.');
+    });
+
+    it('should parse multiple phase summaries', () => {
+      const summary = `### Implementation
+
+Created auth module.
+
+---
+
+### Testing
+
+All tests pass.
+
+---
+
+### Code Review
+
+Approved with minor suggestions.`;
+
+      const result = parsePhaseSummaries(summary);
+
+      expect(result.size).toBe(3);
+      expect(result.get('implementation')).toBe('Created auth module.');
+      expect(result.get('testing')).toBe('All tests pass.');
+      expect(result.get('code review')).toBe('Approved with minor suggestions.');
+    });
+
+    it('should handle empty input', () => {
+      expect(parsePhaseSummaries('').size).toBe(0);
+      expect(parsePhaseSummaries(undefined).size).toBe(0);
+      expect(parsePhaseSummaries('   \n\n   ').size).toBe(0);
+    });
+
+    it('should handle phase names with spaces', () => {
+      const summary = `### Code Review
+
+Review findings here.`;
+
+      const result = parsePhaseSummaries(summary);
+      expect(result.get('code review')).toBe('Review findings here.');
+    });
+
+    it('should normalize phase names to lowercase', () => {
+      const summary = `### IMPLEMENTATION
+
+Content here.`;
+
+      const result = parsePhaseSummaries(summary);
+      expect(result.get('implementation')).toBe('Content here.');
+      expect(result.get('IMPLEMENTATION')).toBeUndefined();
+    });
+
+    it('should handle content with markdown', () => {
+      const summary = `### Implementation
+
+## Changes Made
+- Fixed bug in parser.ts
+- Added error handling
+
+\`\`\`typescript
+const x = 1;
+\`\`\``;
+
+      const result = parsePhaseSummaries(summary);
+      expect(result.get('implementation')).toContain('## Changes Made');
+      expect(result.get('implementation')).toContain('```typescript');
+    });
+
+    it('should return empty map for non-accumulated format', () => {
+      // Legacy format without phase headers
+      const summary = `## Summary
+
+This is a simple summary without phase headers.`;
+
+      const result = parsePhaseSummaries(summary);
+      expect(result.size).toBe(0);
+    });
+  });
+
+  describe('extractPhaseSummary', () => {
+    it('should extract specific phase by name (case-insensitive)', () => {
+      const summary = `### Implementation
+
+Implementation content.
+
+---
+
+### Testing
+
+Testing content.`;
+
+      expect(extractPhaseSummary(summary, 'implementation')).toBe('Implementation content.');
+      expect(extractPhaseSummary(summary, 'IMPLEMENTATION')).toBe('Implementation content.');
+      expect(extractPhaseSummary(summary, 'Implementation')).toBe('Implementation content.');
+      expect(extractPhaseSummary(summary, 'testing')).toBe('Testing content.');
+    });
+
+    it('should return null for non-existent phase', () => {
+      const summary = `### Implementation
+
+Content here.`;
+
+      expect(extractPhaseSummary(summary, 'code review')).toBeNull();
+    });
+
+    it('should return null for empty input', () => {
+      expect(extractPhaseSummary('', 'implementation')).toBeNull();
+      expect(extractPhaseSummary(undefined, 'implementation')).toBeNull();
+    });
+  });
+
+  describe('extractImplementationSummary', () => {
+    it('should extract implementation phase from accumulated summary', () => {
+      const summary = `### Implementation
+
+Created auth module.
+
+---
+
+### Testing
+
+All tests pass.
+
+---
+
+### Code Review
+
+Approved.`;
+
+      const result = extractImplementationSummary(summary);
+      expect(result).toBe('Created auth module.');
+      expect(result).not.toContain('Testing');
+      expect(result).not.toContain('Code Review');
+    });
+
+    it('should return implementation phase even when not first', () => {
+      const summary = `### Planning
+
+Plan created.
+
+---
+
+### Implementation
+
+Implemented the feature.
+
+---
+
+### Review
+
+Reviewed.`;
+
+      const result = extractImplementationSummary(summary);
+      expect(result).toBe('Implemented the feature.');
+    });
+
+    it('should handle phase with "implementation" in name', () => {
+      const summary = `### Feature Implementation
+
+Built the feature.`;
+
+      const result = extractImplementationSummary(summary);
+      expect(result).toBe('Built the feature.');
+    });
+
+    it('should return full summary for non-accumulated format (legacy)', () => {
+      // Non-pipeline features store summary without phase headers
+      const summary = `## Changes
+- Fixed bug
+- Added tests`;
+
+      const result = extractImplementationSummary(summary);
+      expect(result).toBe(summary);
+    });
+
+    it('should return null for empty input', () => {
+      expect(extractImplementationSummary('')).toBeNull();
+      expect(extractImplementationSummary(undefined)).toBeNull();
+      expect(extractImplementationSummary('   \n\n   ')).toBeNull();
+    });
+
+    it('should return null when no implementation phase in accumulated summary', () => {
+      const summary = `### Testing
+
+Tests written.
+
+---
+
+### Code Review
+
+Approved.`;
+
+      const result = extractImplementationSummary(summary);
+      expect(result).toBeNull();
+    });
+  });
+
+  describe('isAccumulatedSummary', () => {
+    it('should return true for accumulated multi-phase summary', () => {
+      const summary = `### Implementation
+
+Content.
+
+---
+
+### Testing
+
+Content.`;
+
+      expect(isAccumulatedSummary(summary)).toBe(true);
+    });
+
+    it('should return false for single phase summary (no separator)', () => {
+      const summary = `### Implementation
+
+Content.`;
+
+      expect(isAccumulatedSummary(summary)).toBe(false);
+    });
+
+    it('should return false for legacy non-accumulated format', () => {
+      const summary = `## Summary
+
+This is a simple summary.`;
+
+      expect(isAccumulatedSummary(summary)).toBe(false);
+    });
+
+    it('should return false for empty input', () => {
+      expect(isAccumulatedSummary('')).toBe(false);
+      expect(isAccumulatedSummary(undefined)).toBe(false);
+      expect(isAccumulatedSummary('   \n\n   ')).toBe(false);
+    });
+
+    it('should return true even for two phases', () => {
+      const summary = `### Implementation
+
+Content A.
+
+---
+
+### Code Review
+
+Content B.`;
+
+      expect(isAccumulatedSummary(summary)).toBe(true);
+    });
+  });
+
+  describe('acceptance criteria scenarios', () => {
+    it('AC1: Implementation summary preserved when Testing completes', () => {
+      // Given a task card completes the Implementation phase,
+      // when the Testing phase subsequently completes,
+      // then the Implementation phase summary must remain stored independently
+      const summary = `### Implementation
+
+- Created auth module
+- Added user service
+
+---
+
+### Testing
+
+- 42 tests pass
+- 98% coverage`;
+
+      const impl = extractImplementationSummary(summary);
+      const testing = extractPhaseSummary(summary, 'testing');
+
+      expect(impl).toBe('- Created auth module\n- Added user service');
+      expect(testing).toBe('- 42 tests pass\n- 98% coverage');
+      expect(impl).not.toContain('Testing');
+      expect(testing).not.toContain('auth module');
+    });
+
+    it('AC4: Implementation Summary tab shows only implementation phase', () => {
+      // Given a task card has completed the Implementation phase
+      // (regardless of how many subsequent phases have run),
+      // when the user opens the "Implementation Summary" tab,
+      // then it must display only the summary produced by the Implementation phase
+      const summary = `### Implementation
+
+Implementation phase output here.
+
+---
+
+### Testing
+
+Testing phase output here.
+
+---
+
+### Code Review
+
+Code review output here.`;
+
+      const impl = extractImplementationSummary(summary);
+
+      expect(impl).toBe('Implementation phase output here.');
+      expect(impl).not.toContain('Testing');
+      expect(impl).not.toContain('Code Review');
+    });
+
+    it('AC5: Empty state when implementation not started', () => {
+      // Given a task card has not yet started the Implementation phase
+      const summary = `### Planning
+
+Planning phase complete.`;
+
+      const impl = extractImplementationSummary(summary);
+
+      // Should return null (UI shows "No implementation summary available")
+      expect(impl).toBeNull();
+    });
+
+    it('AC6: Single phase summary displayed correctly', () => {
+      // Given a task card where Implementation was the only completed phase
+      const summary = `### Implementation
+
+Only implementation was done.`;
+
+      const impl = extractImplementationSummary(summary);
+
+      expect(impl).toBe('Only implementation was done.');
+    });
+
+    it('AC9: Mid-progress shows only completed phases', () => {
+      // Given a task card is mid-progress
+      // (e.g., Implementation and Testing complete, Code Review pending)
+      const summary = `### Implementation
+
+Implementation done.
+
+---
+
+### Testing
+
+Testing done.`;
+
+      const phases = parsePhaseSummaries(summary);
+
+      expect(phases.size).toBe(2);
+      expect(phases.has('implementation')).toBe(true);
+      expect(phases.has('testing')).toBe(true);
+      expect(phases.has('code review')).toBe(false);
+    });
+
+    it('AC10: All phases in chronological order', () => {
+      // Given all phases of a task card are complete
+      const summary = `### Implementation
+
+First phase content.
+
+---
+
+### Testing
+
+Second phase content.
+
+---
+
+### Code Review
+
+Third phase content.`;
+
+      // ParsePhaseSummaries should preserve order
+      const phases = parsePhaseSummaries(summary);
+      const phaseNames = [...phases.keys()];
+
+      expect(phaseNames).toEqual(['implementation', 'testing', 'code review']);
+    });
+
+    it('AC17: Retried phase shows only latest', () => {
+      // Given a phase was retried, when viewing the Summary tab,
+      // only one entry for the retried phase must appear (the latest retry's summary)
+      //
+      // Note: The server-side FeatureStateManager overwrites the phase summary
+      // when the same phase runs again, so we only have one entry per phase name.
+      // This test verifies that the parser correctly handles this.
+      const summary = `### Implementation
+
+First attempt content.
+
+---
+
+### Testing
+
+First test run.
+
+---
+
+### Implementation
+
+Retry content - fixed issues.
+
+---
+
+### Testing
+
+Retry - all tests now pass.`;
+
+      const phases = parsePhaseSummaries(summary);
+
+      // The parser will have both entries, but Map keeps last value for same key
+      expect(phases.get('implementation')).toBe('Retry content - fixed issues.');
+      expect(phases.get('testing')).toBe('Retry - all tests now pass.');
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/ui/summary-auto-scroll.test.ts b/temp_repo/apps/server/tests/unit/ui/summary-auto-scroll.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..544e88a05aacfa6791c7f193a7c287813922cf04
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/ui/summary-auto-scroll.test.ts
@@ -0,0 +1,238 @@
+/**
+ * Unit tests for the summary auto-scroll detection logic.
+ *
+ * These tests verify the behavior of the scroll detection function used in
+ * AgentOutputModal to determine if auto-scroll should be enabled.
+ *
+ * The logic mirrors the handleSummaryScroll function in:
+ * apps/ui/src/components/views/board-view/dialogs/agent-output-modal.tsx
+ *
+ * Auto-scroll behavior:
+ * - When user is at or near the bottom (< 50px from bottom), auto-scroll is enabled
+ * - When user scrolls up to view older content, auto-scroll is disabled
+ * - Scrolling back to bottom re-enables auto-scroll
+ */
+
+import { describe, it, expect } from 'vitest';
+
+/**
+ * Determines if the scroll position is at the bottom of the container.
+ * This is the core logic from handleSummaryScroll in AgentOutputModal.
+ *
+ * @param scrollTop - Current scroll position from top
+ * @param scrollHeight - Total scrollable height
+ * @param clientHeight - Visible height of the container
+ * @param threshold - Distance from bottom to consider "at bottom" (default: 50px)
+ * @returns true if at bottom, false otherwise
+ */
+function isScrollAtBottom(
+  scrollTop: number,
+  scrollHeight: number,
+  clientHeight: number,
+  threshold = 50
+): boolean {
+  const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+  return distanceFromBottom < threshold;
+}
+
+describe('Summary Auto-Scroll Detection Logic', () => {
+  describe('basic scroll position detection', () => {
+    it('should return true when scrolled to exact bottom', () => {
+      // Container: 500px tall, content: 1000px tall
+      // ScrollTop: 500 (scrolled to bottom)
+      const result = isScrollAtBottom(500, 1000, 500);
+      expect(result).toBe(true);
+    });
+
+    it('should return true when near bottom (within threshold)', () => {
+      // 49px from bottom - within 50px threshold
+      const result = isScrollAtBottom(451, 1000, 500);
+      expect(result).toBe(true);
+    });
+
+    it('should return true when exactly at threshold boundary (49px)', () => {
+      // 49px from bottom
+      const result = isScrollAtBottom(451, 1000, 500);
+      expect(result).toBe(true);
+    });
+
+    it('should return false when just outside threshold (51px)', () => {
+      // 51px from bottom - outside 50px threshold
+      const result = isScrollAtBottom(449, 1000, 500);
+      expect(result).toBe(false);
+    });
+
+    it('should return false when scrolled to top', () => {
+      const result = isScrollAtBottom(0, 1000, 500);
+      expect(result).toBe(false);
+    });
+
+    it('should return false when scrolled to middle', () => {
+      const result = isScrollAtBottom(250, 1000, 500);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('edge cases with small content', () => {
+    it('should return true when content fits in viewport (no scroll needed)', () => {
+      // Content is smaller than container - no scrolling possible
+      const result = isScrollAtBottom(0, 300, 500);
+      expect(result).toBe(true);
+    });
+
+    it('should return true when content exactly fits viewport', () => {
+      const result = isScrollAtBottom(0, 500, 500);
+      expect(result).toBe(true);
+    });
+
+    it('should return true when content slightly exceeds viewport (within threshold)', () => {
+      // Content: 540px, Viewport: 500px, can scroll 40px
+      // At scroll 0, we're 40px from bottom - within threshold
+      const result = isScrollAtBottom(0, 540, 500);
+      expect(result).toBe(true);
+    });
+  });
+
+  describe('large content scenarios', () => {
+    it('should correctly detect bottom in very long content', () => {
+      // Simulate accumulated summary from many pipeline steps
+      // Content: 10000px, Viewport: 500px
+      const result = isScrollAtBottom(9500, 10000, 500);
+      expect(result).toBe(true);
+    });
+
+    it('should correctly detect non-bottom in very long content', () => {
+      // User scrolled up to read earlier summaries
+      const result = isScrollAtBottom(5000, 10000, 500);
+      expect(result).toBe(false);
+    });
+
+    it('should detect when user scrolls up from bottom', () => {
+      // Started at bottom (scroll: 9500), then scrolled up 100px
+      const result = isScrollAtBottom(9400, 10000, 500);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('custom threshold values', () => {
+    it('should work with larger threshold (100px)', () => {
+      // 75px from bottom - within 100px threshold
+      const result = isScrollAtBottom(425, 1000, 500, 100);
+      expect(result).toBe(true);
+    });
+
+    it('should work with smaller threshold (10px)', () => {
+      // 15px from bottom - outside 10px threshold
+      const result = isScrollAtBottom(485, 1000, 500, 10);
+      expect(result).toBe(false);
+    });
+
+    it('should work with zero threshold (exact match only)', () => {
+      // At exact bottom - distanceFromBottom = 0, which is NOT < 0 with strict comparison
+      // This is an edge case: the implementation uses < not <=
+      const result = isScrollAtBottom(500, 1000, 500, 0);
+      expect(result).toBe(false); // 0 < 0 is false
+
+      // 1px from bottom - also fails
+      const result2 = isScrollAtBottom(499, 1000, 500, 0);
+      expect(result2).toBe(false);
+
+      // For exact match with 0 threshold, we need negative distanceFromBottom
+      // which happens when scrollTop > scrollHeight - clientHeight (overscroll)
+      const result3 = isScrollAtBottom(501, 1000, 500, 0);
+      expect(result3).toBe(true); // -1 < 0 is true
+    });
+  });
+
+  describe('pipeline summary scrolling scenarios', () => {
+    it('should enable auto-scroll when new content arrives while at bottom', () => {
+      // User is at bottom viewing step 2 summary
+      // Step 3 summary is added, increasing scrollHeight from 1000 to 1500
+      // ScrollTop stays at 950 (was at bottom), but now user needs to scroll
+
+      // Before new content: isScrollAtBottom(950, 1000, 500) = true
+      // After new content: auto-scroll should kick in to scroll to new bottom
+
+      // Simulating the auto-scroll effect setting scrollTop to new bottom
+      const newScrollTop = 1500 - 500; // scrollHeight - clientHeight
+      const result = isScrollAtBottom(newScrollTop, 1500, 500);
+      expect(result).toBe(true);
+    });
+
+    it('should not auto-scroll when user is reading earlier summaries', () => {
+      // User scrolled up to read step 1 summary while step 3 is added
+      // scrollHeight increases, but scrollTop stays same
+      // User is now further from bottom
+
+      // User was at scroll position 200 (reading early content)
+      // New content increases scrollHeight from 1000 to 1500
+      // Distance from bottom goes from 300 to 800
+      const result = isScrollAtBottom(200, 1500, 500);
+      expect(result).toBe(false);
+    });
+
+    it('should re-enable auto-scroll when user scrolls back to bottom', () => {
+      // User was reading step 1 (scrollTop: 200)
+      // User scrolls back to bottom to see latest content
+      const result = isScrollAtBottom(1450, 1500, 500);
+      expect(result).toBe(true);
+    });
+  });
+
+  describe('decimal scroll values', () => {
+    it('should handle fractional scroll positions', () => {
+      // Browsers can report fractional scroll values
+      const result = isScrollAtBottom(499.5, 1000, 500);
+      expect(result).toBe(true);
+    });
+
+    it('should handle fractional scroll heights', () => {
+      const result = isScrollAtBottom(450.7, 1000.3, 500);
+      expect(result).toBe(true);
+    });
+  });
+
+  describe('negative and invalid inputs', () => {
+    it('should handle negative scrollTop (bounce scroll)', () => {
+      // iOS can report negative scrollTop during bounce
+      const result = isScrollAtBottom(-10, 1000, 500);
+      expect(result).toBe(false);
+    });
+
+    it('should handle zero scrollHeight', () => {
+      // Empty content
+      const result = isScrollAtBottom(0, 0, 500);
+      expect(result).toBe(true);
+    });
+
+    it('should handle zero clientHeight', () => {
+      // Hidden container - distanceFromBottom = 1000 - 0 - 0 = 1000
+      // This is not < threshold, so returns false
+      // This edge case represents a broken/invisible container
+      const result = isScrollAtBottom(0, 1000, 0);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('real-world accumulated summary dimensions', () => {
+    it('should handle typical 3-step pipeline summary dimensions', () => {
+      // Approximate: 3 steps x ~800px each = ~2400px
+      // Viewport: 400px (modal height)
+      const result = isScrollAtBottom(2000, 2400, 400);
+      expect(result).toBe(true);
+    });
+
+    it('should handle large 10-step pipeline summary dimensions', () => {
+      // Approximate: 10 steps x ~800px each = ~8000px
+      // Viewport: 400px
+      const result = isScrollAtBottom(7600, 8000, 400);
+      expect(result).toBe(true);
+    });
+
+    it('should detect scroll to top of large summary', () => {
+      // User at top of 10-step summary
+      const result = isScrollAtBottom(0, 8000, 400);
+      expect(result).toBe(false);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/ui/summary-normalization.test.ts b/temp_repo/apps/server/tests/unit/ui/summary-normalization.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..999a4f3506383997fe9eb187c37063ae4a5225f4
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/ui/summary-normalization.test.ts
@@ -0,0 +1,128 @@
+/**
+ * Unit tests for summary normalization between UI components and parser functions.
+ *
+ * These tests verify that:
+ * - getFirstNonEmptySummary returns string | null
+ * - parseAllPhaseSummaries and isAccumulatedSummary expect string | undefined
+ * - The normalization (summary ?? undefined) correctly converts null to undefined
+ *
+ * This ensures the UI components properly bridge the type gap between:
+ * - getFirstNonEmptySummary (returns string | null)
+ * - parseAllPhaseSummaries (expects string | undefined)
+ * - isAccumulatedSummary (expects string | undefined)
+ */
+
+import { describe, it, expect } from 'vitest';
+import { parseAllPhaseSummaries, isAccumulatedSummary } from '../../../../ui/src/lib/log-parser.ts';
+import { getFirstNonEmptySummary } from '../../../../ui/src/lib/summary-selection.ts';
+
+describe('Summary Normalization', () => {
+  describe('getFirstNonEmptySummary', () => {
+    it('should return the first non-empty string', () => {
+      const result = getFirstNonEmptySummary(null, undefined, 'valid summary', 'another');
+      expect(result).toBe('valid summary');
+    });
+
+    it('should return null when all candidates are empty', () => {
+      const result = getFirstNonEmptySummary(null, undefined, '', '   ');
+      expect(result).toBeNull();
+    });
+
+    it('should return null when no candidates provided', () => {
+      const result = getFirstNonEmptySummary();
+      expect(result).toBeNull();
+    });
+
+    it('should return null for all null/undefined candidates', () => {
+      const result = getFirstNonEmptySummary(null, undefined, null);
+      expect(result).toBeNull();
+    });
+
+    it('should preserve original string formatting (not trim)', () => {
+      const result = getFirstNonEmptySummary('  summary with spaces  ');
+      expect(result).toBe('  summary with spaces  ');
+    });
+  });
+
+  describe('parseAllPhaseSummaries with normalized input', () => {
+    it('should handle null converted to undefined via ?? operator', () => {
+      const summary = getFirstNonEmptySummary(null, undefined);
+      // This is the normalization: summary ?? undefined
+      const normalizedSummary = summary ?? undefined;
+
+      // TypeScript should accept this without error
+      const result = parseAllPhaseSummaries(normalizedSummary);
+      expect(result).toEqual([]);
+    });
+
+    it('should parse accumulated summary when non-null is normalized', () => {
+      const rawSummary =
+        '### Implementation\n\nDid some work\n\n---\n\n### Testing\n\nAll tests pass';
+      const summary = getFirstNonEmptySummary(null, rawSummary);
+      const normalizedSummary = summary ?? undefined;
+
+      const result = parseAllPhaseSummaries(normalizedSummary);
+      expect(result).toHaveLength(2);
+      expect(result[0].phaseName).toBe('Implementation');
+      expect(result[1].phaseName).toBe('Testing');
+    });
+  });
+
+  describe('isAccumulatedSummary with normalized input', () => {
+    it('should return false for null converted to undefined', () => {
+      const summary = getFirstNonEmptySummary(null, undefined);
+      const normalizedSummary = summary ?? undefined;
+
+      const result = isAccumulatedSummary(normalizedSummary);
+      expect(result).toBe(false);
+    });
+
+    it('should return true for valid accumulated summary after normalization', () => {
+      const rawSummary =
+        '### Implementation\n\nDid some work\n\n---\n\n### Testing\n\nAll tests pass';
+      const summary = getFirstNonEmptySummary(rawSummary);
+      const normalizedSummary = summary ?? undefined;
+
+      const result = isAccumulatedSummary(normalizedSummary);
+      expect(result).toBe(true);
+    });
+
+    it('should return false for single-phase summary after normalization', () => {
+      const rawSummary = '### Implementation\n\nDid some work';
+      const summary = getFirstNonEmptySummary(rawSummary);
+      const normalizedSummary = summary ?? undefined;
+
+      const result = isAccumulatedSummary(normalizedSummary);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('Type safety verification', () => {
+    it('should demonstrate that null must be normalized to undefined', () => {
+      // This test documents the type mismatch that requires normalization
+      const summary: string | null = getFirstNonEmptySummary(null);
+      const normalizedSummary: string | undefined = summary ?? undefined;
+
+      // parseAllPhaseSummaries expects string | undefined, not string | null
+      // The normalization converts null -> undefined, which is compatible
+      const result = parseAllPhaseSummaries(normalizedSummary);
+      expect(result).toEqual([]);
+    });
+
+    it('should work with the actual usage pattern from components', () => {
+      // Simulates the actual pattern used in summary-dialog.tsx and agent-output-modal.tsx
+      const featureSummary: string | null | undefined = null;
+      const extractedSummary: string | null | undefined = undefined;
+
+      const rawSummary = getFirstNonEmptySummary(featureSummary, extractedSummary);
+      const normalizedSummary = rawSummary ?? undefined;
+
+      // Both parser functions should work with the normalized value
+      const phases = parseAllPhaseSummaries(normalizedSummary);
+      const hasMultiple = isAccumulatedSummary(normalizedSummary);
+
+      expect(phases).toEqual([]);
+      expect(hasMultiple).toBe(false);
+    });
+  });
+});
diff --git a/temp_repo/apps/server/tests/unit/ui/summary-source-flow.integration.test.ts b/temp_repo/apps/server/tests/unit/ui/summary-source-flow.integration.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6f268d4aca7e1fd68da9e83afabc2895065d11c5
--- /dev/null
+++ b/temp_repo/apps/server/tests/unit/ui/summary-source-flow.integration.test.ts
@@ -0,0 +1,108 @@
+import { describe, it, expect } from 'vitest';
+import { parseAllPhaseSummaries, isAccumulatedSummary } from '../../../../ui/src/lib/log-parser.ts';
+import { getFirstNonEmptySummary } from '../../../../ui/src/lib/summary-selection.ts';
+
+/**
+ * Mirrors summary source priority in agent-info-panel.tsx:
+ * freshFeature.summary > feature.summary > summaryProp > agentInfo.summary
+ */
+function getCardEffectiveSummary(params: {
+  freshFeatureSummary?: string | null;
+  featureSummary?: string | null;
+  summaryProp?: string | null;
+  agentInfoSummary?: string | null;
+}): string | undefined | null {
+  return getFirstNonEmptySummary(
+    params.freshFeatureSummary,
+    params.featureSummary,
+    params.summaryProp,
+    params.agentInfoSummary
+  );
+}
+
+/**
+ * Mirrors SummaryDialog raw summary selection in summary-dialog.tsx:
+ * summaryProp > feature.summary > agentInfo.summary
+ */
+function getDialogRawSummary(params: {
+  summaryProp?: string | null;
+  featureSummary?: string | null;
+  agentInfoSummary?: string | null;
+}): string | undefined | null {
+  return getFirstNonEmptySummary(
+    params.summaryProp,
+    params.featureSummary,
+    params.agentInfoSummary
+  );
+}
+
+describe('Summary Source Flow Integration', () => {
+  it('uses fresh per-feature summary in card and preserves it through summary dialog', () => {
+    const staleListSummary = '## Old summary from stale list cache';
+    const freshAccumulatedSummary = `### Implementation
+
+Implemented auth + profile flow.
+
+---
+
+### Testing
+
+- Unit tests: 18 passed
+- Integration tests: 6 passed`;
+    const parsedAgentInfoSummary = 'Fallback summary from parsed agent output';
+
+    const cardEffectiveSummary = getCardEffectiveSummary({
+      freshFeatureSummary: freshAccumulatedSummary,
+      featureSummary: staleListSummary,
+      summaryProp: undefined,
+      agentInfoSummary: parsedAgentInfoSummary,
+    });
+
+    expect(cardEffectiveSummary).toBe(freshAccumulatedSummary);
+
+    const dialogRawSummary = getDialogRawSummary({
+      summaryProp: cardEffectiveSummary,
+      featureSummary: staleListSummary,
+      agentInfoSummary: parsedAgentInfoSummary,
+    });
+
+    expect(dialogRawSummary).toBe(freshAccumulatedSummary);
+    expect(isAccumulatedSummary(dialogRawSummary ?? undefined)).toBe(true);
+
+    const phases = parseAllPhaseSummaries(dialogRawSummary ?? undefined);
+    expect(phases).toHaveLength(2);
+    expect(phases[0]?.phaseName).toBe('Implementation');
+    expect(phases[1]?.phaseName).toBe('Testing');
+  });
+
+  it('falls back in order when fresher sources are absent', () => {
+    const cardEffectiveSummary = getCardEffectiveSummary({
+      freshFeatureSummary: undefined,
+      featureSummary: '',
+      summaryProp: undefined,
+      agentInfoSummary: 'Agent parsed fallback',
+    });
+
+    expect(cardEffectiveSummary).toBe('Agent parsed fallback');
+
+    const dialogRawSummary = getDialogRawSummary({
+      summaryProp: undefined,
+      featureSummary: undefined,
+      agentInfoSummary: cardEffectiveSummary,
+    });
+
+    expect(dialogRawSummary).toBe('Agent parsed fallback');
+    expect(isAccumulatedSummary(dialogRawSummary ?? undefined)).toBe(false);
+  });
+
+  it('treats whitespace-only summaries as empty during fallback selection', () => {
+    const cardEffectiveSummary = getCardEffectiveSummary({
+      freshFeatureSummary: '   \n',
+      featureSummary: '\t',
+      summaryProp: '   ',
+      agentInfoSummary: 'Agent parsed fallback',
+    });
+
+    expect(cardEffectiveSummary).toBe('Agent parsed fallback');
+  });
+});
diff --git a/temp_repo/apps/server/tests/utils/helpers.ts b/temp_repo/apps/server/tests/utils/helpers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cf928f07ae74998d3b9a7ae20ce065e153530063
--- /dev/null
+++ b/temp_repo/apps/server/tests/utils/helpers.ts
@@ -0,0 +1,38 @@
+/**
+ * Test helper functions
+ */
+
+/**
+ * Collect all values from an async generator
+ */
+export async function collectAsyncGenerator<T>(gen: AsyncGenerator<T>): Promise<T[]> {
+  const results: T[] = [];
+  for await (const item of gen) {
+    results.push(item);
+  }
+  return results;
+}
+
+/**
+ * Wait for a condition to be true
+ */
+export async function waitFor(
+  condition: () => boolean,
+  timeout = 1000,
+  interval = 10
+): Promise<void> {
+  const start = Date.now();
+  while (!condition()) {
+    if (Date.now() - start > timeout) {
+      throw new Error('Timeout waiting for condition');
+    }
+    await new Promise((resolve) => setTimeout(resolve, interval));
+  }
+}
+
+/**
+ * Create a temporary directory for tests
+ */
+export function createTempDir(): string {
+  return `/tmp/test-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
diff --git a/temp_repo/apps/server/tests/utils/mocks.ts b/temp_repo/apps/server/tests/utils/mocks.ts
new file mode 100644
index 0000000000000000000000000000000000000000..380ac9fd4b84e14f2cbd1697c456a484912fffb8
--- /dev/null
+++ b/temp_repo/apps/server/tests/utils/mocks.ts
@@ -0,0 +1,107 @@
+/**
+ * Mock utilities for testing
+ * Provides reusable mocks for common dependencies
+ */
+
+import { vi } from 'vitest';
+import type { ChildProcess } from 'child_process';
+import { EventEmitter } from 'events';
+import type { Readable } from 'stream';
+
+/**
+ * Mock child_process.spawn for subprocess tests
+ */
+export function createMockChildProcess(options: {
+  stdout?: string[];
+  stderr?: string[];
+  exitCode?: number | null;
+  shouldError?: boolean;
+}): ChildProcess {
+  const { stdout = [], stderr = [], exitCode = 0, shouldError = false } = options;
+
+  const mockProcess = new EventEmitter() as any;
+
+  // Create mock stdout stream
+  mockProcess.stdout = new EventEmitter() as Readable;
+  mockProcess.stderr = new EventEmitter() as Readable;
+
+  mockProcess.kill = vi.fn();
+
+  // Simulate async output
+  process.nextTick(() => {
+    // Emit stdout lines
+    for (const line of stdout) {
+      mockProcess.stdout.emit('data', Buffer.from(line + '\n'));
+    }
+
+    // Emit stderr lines
+    for (const line of stderr) {
+      mockProcess.stderr.emit('data', Buffer.from(line + '\n'));
+    }
+
+    // Emit exit or error
+    if (shouldError) {
+      mockProcess.emit('error', new Error('Process error'));
+    } else {
+      mockProcess.emit('exit', exitCode);
+    }
+  });
+
+  return mockProcess as ChildProcess;
+}
+
+/**
+ * Mock fs/promises for file system tests
+ */
+export function createMockFs() {
+  return {
+    readFile: vi.fn(),
+    writeFile: vi.fn(),
+    mkdir: vi.fn(),
+    access: vi.fn(),
+    stat: vi.fn(),
+  };
+}
+
+/**
+ * Mock Express request/response/next for middleware tests
+ */
+export function createMockExpressContext() {
+  const req = {
+    headers: {},
+    body: {},
+    params: {},
+    query: {},
+  } as any;
+
+  const res = {
+    status: vi.fn().mockReturnThis(),
+    json: vi.fn().mockReturnThis(),
+    send: vi.fn().mockReturnThis(),
+  } as any;
+
+  const next = vi.fn();
+
+  return { req, res, next };
+}
+
+/**
+ * Mock AbortController for async operation tests
+ */
+export function createMockAbortController() {
+  const controller = new AbortController();
+  const originalAbort = controller.abort.bind(controller);
+  controller.abort = vi.fn(originalAbort);
+  return controller;
+}
+
+/**
+ * Mock Claude SDK query function
+ */
+export function createMockClaudeQuery(messages: any[] = []) {
+  return vi.fn(async function* ({ prompt, options }: any) {
+    for (const msg of messages) {
+      yield msg;
+    }
+  });
+}
diff --git a/temp_repo/apps/server/tsconfig.json b/temp_repo/apps/server/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..c83c5333234b1fd69d23bfc13d07cead4ebaee6f
--- /dev/null
+++ b/temp_repo/apps/server/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2022"],
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/temp_repo/apps/server/tsconfig.test.json b/temp_repo/apps/server/tsconfig.test.json
new file mode 100644
index 0000000000000000000000000000000000000000..1c3058b4afa5dd41e65b72bb5a9db992aceea892
--- /dev/null
+++ b/temp_repo/apps/server/tsconfig.test.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": ["vitest/globals", "node"],
+    "moduleResolution": "Bundler",
+    "module": "ESNext"
+  },
+  "include": ["src/**/*", "tests/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/temp_repo/apps/server/vitest.config.ts b/temp_repo/apps/server/vitest.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..36577c5eaec4f70aaf0fd0a2386e3584fb2580c3
--- /dev/null
+++ b/temp_repo/apps/server/vitest.config.ts
@@ -0,0 +1,62 @@
+import { defineConfig } from 'vitest/config';
+import path from 'path';
+
+export default defineConfig({
+  test: {
+    name: 'server',
+    reporters: ['verbose'],
+    globals: true,
+    environment: 'node',
+    setupFiles: ['./tests/setup.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html', 'lcov'],
+      include: ['src/**/*.ts'],
+      exclude: [
+        'src/**/*.d.ts',
+        'src/index.ts',
+        'src/routes/**', // Routes are better tested with integration tests
+        'src/types/**', // Type re-exports don't need coverage
+        'src/middleware/**', // Middleware needs integration tests
+        'src/lib/enhancement-prompts.ts', // Prompt templates don't need unit tests
+        'src/services/claude-usage-service.ts', // TODO: Add tests for usage tracking
+        'src/services/mcp-test-service.ts', // Needs MCP SDK integration tests
+        'src/providers/index.ts', // Just exports
+        'src/providers/types.ts', // Type definitions
+        'src/providers/cli-provider.ts', // CLI integration - needs integration tests
+        'src/providers/cursor-provider.ts', // Cursor CLI integration - needs integration tests
+        '**/libs/**', // Exclude aliased shared packages from server coverage
+      ],
+      thresholds: {
+        // Coverage thresholds
+        lines: 60,
+        functions: 75,
+        branches: 55,
+        statements: 60,
+      },
+    },
+    include: ['tests/**/*.test.ts', 'tests/**/*.spec.ts'],
+    exclude: ['**/node_modules/**', '**/dist/**'],
+    mockReset: true,
+    restoreMocks: true,
+    clearMocks: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      // Resolve shared packages to source files for proper mocking in tests
+      '@automaker/utils': path.resolve(__dirname, '../../libs/utils/src/index.ts'),
+      '@automaker/platform': path.resolve(__dirname, '../../libs/platform/src/index.ts'),
+      '@automaker/types': path.resolve(__dirname, '../../libs/types/src/index.ts'),
+      '@automaker/model-resolver': path.resolve(
+        __dirname,
+        '../../libs/model-resolver/src/index.ts'
+      ),
+      '@automaker/dependency-resolver': path.resolve(
+        __dirname,
+        '../../libs/dependency-resolver/src/index.ts'
+      ),
+      '@automaker/git-utils': path.resolve(__dirname, '../../libs/git-utils/src/index.ts'),
+    },
+  },
+});
diff --git a/temp_repo/apps/ui/.gitignore b/temp_repo/apps/ui/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..b8ed277526771358a679e61c66c00122e7a228fa
--- /dev/null
+++ b/temp_repo/apps/ui/.gitignore
@@ -0,0 +1,48 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# Vite
+/dist/
+/dist-electron/
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# typescript
+*.tsbuildinfo
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/tests/.auth/
+
+# Electron
+/release/
+/server-bundle/
+
+# TanStack Router generated
+src/routeTree.gen.ts
diff --git a/temp_repo/apps/ui/components.json b/temp_repo/apps/ui/components.json
new file mode 100644
index 0000000000000000000000000000000000000000..edcaef267e34d591c9ae0f0b4cd14a146e6c012f
--- /dev/null
+++ b/temp_repo/apps/ui/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
diff --git a/temp_repo/apps/ui/docs/AGENT_ARCHITECTURE.md b/temp_repo/apps/ui/docs/AGENT_ARCHITECTURE.md
new file mode 100644
index 0000000000000000000000000000000000000000..f5c374c472f9b548e496df7e5756a9d283518bb1
--- /dev/null
+++ b/temp_repo/apps/ui/docs/AGENT_ARCHITECTURE.md
@@ -0,0 +1,285 @@
+# Agent Architecture - Surviving Next.js Restarts
+
+## Problem Statement
+
+When using the Automaker app to iterate on itself:
+
+1. Agent modifies code files
+2. Next.js hot-reloads and restarts
+3. API routes are killed
+4. Agent conversation is lost
+
+## Solution: Electron Main Process Agent
+
+The agent now runs in the **Electron main process** instead of Next.js API routes. This provides:
+
+- ✅ **Survives Next.js restarts** - Main process is independent of renderer
+- ✅ **Persistent state** - Conversations saved to disk automatically
+- ✅ **Real-time streaming** - IPC events for live updates
+- ✅ **Session recovery** - Reconnects automatically after restart
+
+## Architecture Overview
+
+```
+┌─────────────────────────────────────────┐
+│   Electron Main Process                 │
+│   ┌───────────────────────────────┐     │
+│   │  Agent Service                │     │
+│   │  - Manages sessions           │     │
+│   │  - Runs Claude Agent SDK      │     │
+│   │  - Persists to disk           │     │
+│   │  - Streams via IPC            │     │
+│   └───────────────────────────────┘     │
+└──────────────┬──────────────────────────┘
+               │ IPC (survives restarts)
+┌──────────────┴──────────────────────────┐
+│   Electron Renderer (Next.js)           │
+│   ┌───────────────────────────────┐     │
+│   │  React Frontend               │     │
+│   │  - useElectronAgent hook      │     │
+│   │  - Auto-reconnects            │     │
+│   │  - Real-time updates          │     │
+│   └───────────────────────────────┘     │
+└─────────────────────────────────────────┘
+```
+
+## Key Components
+
+### 1. Agent Service (`electron/agent-service.js`)
+
+The core service running in the Electron main process:
+
+- **Session Management**: Tracks multiple conversations by session ID
+- **State Persistence**: Saves conversations to `userData/agent-sessions/*.json`
+- **Streaming**: Sends real-time updates to renderer via IPC
+- **Tool Support**: Full Read/Write/Edit/Bash/Grep/Glob capabilities
+- **Error Recovery**: Continues after errors, saves state
+
+### 2. IPC Handlers (`electron/main.js`)
+
+Electron main process handlers:
+
+- `agent:start` - Initialize or resume a session
+- `agent:send` - Send a message (returns immediately)
+- `agent:getHistory` - Retrieve conversation history
+- `agent:stop` - Stop current execution
+- `agent:clear` - Clear conversation
+- `agent:stream` - Event emitted for streaming updates
+
+### 3. Preload Bridge (`electron/preload.js`)
+
+Secure IPC bridge exposed to renderer:
+
+```javascript
+window.electronAPI.agent.start(sessionId, workingDir);
+window.electronAPI.agent.send(sessionId, message, workingDir);
+window.electronAPI.agent.onStream(callback);
+```
+
+### 4. React Hook (`src/hooks/use-electron-agent.ts`)
+
+Easy-to-use React hook:
+
+```typescript
+const {
+  messages, // Conversation history
+  isProcessing, // Agent is working
+  isConnected, // Session initialized
+  sendMessage, // Send user message
+  stopExecution, // Stop current task
+  clearHistory, // Clear conversation
+  error, // Error state
+} = useElectronAgent({
+  sessionId: 'project_xyz',
+  workingDirectory: '/path/to/project',
+  onToolUse: (tool) => console.log('Using:', tool),
+});
+```
+
+### 5. Frontend Component (`src/components/views/agent-view.tsx`)
+
+Updated to use IPC instead of HTTP:
+
+- Generates session ID from project path
+- Auto-reconnects on mount
+- Shows tool usage in real-time
+- Displays connection status
+
+## Data Flow
+
+### Sending a Message
+
+1. User types message in React UI
+2. `sendMessage()` calls `window.electronAPI.agent.send()`
+3. IPC handler in main process receives message
+4. Agent service starts processing
+5. Main process streams updates via `agent:stream` events
+6. React hook receives events and updates UI
+7. Conversation saved to disk
+
+### Surviving a Restart
+
+1. Agent is modifying code → Next.js restarts
+2. React component unmounts
+3. **Main process keeps running** (agent continues)
+4. React component remounts after restart
+5. Calls `agent:start` with same session ID
+6. Main process returns full conversation history
+7. Subscribes to `agent:stream` events
+8. UI shows complete conversation + live updates
+
+## Session Storage
+
+Sessions are stored in:
+
+```
+<userData>/agent-sessions/<sessionId>.json
+```
+
+Each session file contains:
+
+```json
+[
+  {
+    "id": "msg_1234_abc",
+    "role": "user",
+    "content": "Add a new feature...",
+    "timestamp": "2024-12-07T12:00:00.000Z"
+  },
+  {
+    "id": "msg_1235_def",
+    "role": "assistant",
+    "content": "I'll help you add that feature...",
+    "timestamp": "2024-12-07T12:00:05.000Z"
+  }
+]
+```
+
+## Session ID Generation
+
+Session IDs are generated from project paths:
+
+```typescript
+const sessionId = `project_${projectPath.replace(/[^a-zA-Z0-9]/g, '_')}`;
+```
+
+This ensures:
+
+- Each project has its own conversation
+- Conversations persist across app restarts
+- Multiple projects can run simultaneously
+
+## Streaming Events
+
+The agent emits these event types:
+
+### `message`
+
+User message added to conversation
+
+### `stream`
+
+Assistant response streaming (updates in real-time)
+
+### `tool_use`
+
+Agent is using a tool (Read, Write, Edit, etc.)
+
+### `complete`
+
+Agent finished processing
+
+### `error`
+
+Error occurred during processing
+
+## Configuration
+
+The agent is configured with:
+
+```javascript
+{
+  model: "claude-opus-4-6",
+  maxTurns: 20,
+  cwd: workingDirectory,
+  allowedTools: [
+    "Read", "Write", "Edit", "Glob", "Grep",
+    "Bash", "WebSearch", "WebFetch"
+  ],
+  permissionMode: "acceptEdits",  // Auto-approve file edits
+  sandbox: {
+    enabled: true,                // Sandboxed bash execution
+    autoAllowBashIfSandboxed: true
+  }
+}
+```
+
+## Benefits
+
+### For Self-Iteration
+
+Now you can ask the agent to modify Automaker itself:
+
+```
+User: "Add a dark mode toggle to the settings"
+Agent: *modifies files*
+→ Next.js restarts
+→ Agent continues working
+→ UI reconnects automatically
+→ Shows full conversation history
+```
+
+### For Long-Running Tasks
+
+The agent can work on complex tasks that take multiple turns:
+
+```
+User: "Implement authentication with GitHub OAuth"
+Agent:
+  1. Creates auth API routes
+  2. Next.js restarts
+  3. Agent continues: Adds middleware
+  4. Next.js restarts again
+  5. Agent continues: Updates UI components
+  6. All changes tracked, conversation preserved
+```
+
+## Testing
+
+To test the architecture:
+
+1. Open a project in Automaker
+2. Ask the agent to modify a file in `src/`
+3. Watch Next.js restart
+4. Verify the conversation continues
+5. Check that history is preserved
+6. Restart the entire Electron app
+7. Verify conversation loads from disk
+
+## Troubleshooting
+
+### "Electron API not available"
+
+- Make sure you're running in Electron, not browser
+- Check `window.isElectron` is `true`
+
+### Session not persisting
+
+- Check userData directory exists
+- Verify write permissions
+- Look for errors in Electron console
+
+### Next.js restart kills agent
+
+- Verify agent service is in `electron/main.js`
+- Check IPC handlers are registered
+- Ensure not using HTTP `/api/chat` route
+
+## Future Enhancements
+
+- [ ] Multiple concurrent sessions
+- [ ] Export conversation history
+- [ ] Undo/redo for agent actions
+- [ ] Progress bars for long-running tasks
+- [ ] Voice input/output
+- [ ] Agent memory across sessions
diff --git a/temp_repo/apps/ui/docs/SESSION_MANAGEMENT.md b/temp_repo/apps/ui/docs/SESSION_MANAGEMENT.md
new file mode 100644
index 0000000000000000000000000000000000000000..b4c5eac775c11443cf01111835d8c64a2296e55a
--- /dev/null
+++ b/temp_repo/apps/ui/docs/SESSION_MANAGEMENT.md
@@ -0,0 +1,393 @@
+# Session Management Guide
+
+## Overview
+
+The Automaker Agent Chat now supports multiple concurrent sessions, allowing you to organize different conversations by topic, feature, or task. Each session is independently managed and persisted.
+
+## Features
+
+### ✨ Multiple Sessions
+
+- Create unlimited agent sessions per project
+- Each session has its own conversation history
+- Switch between sessions instantly
+- Sessions persist across app restarts
+
+### 📋 Session Organization
+
+- Custom names for easy identification
+- Last message preview
+- Message count tracking
+- Sort by most recently updated
+
+### 🗄️ Archive & Delete
+
+- Archive old sessions to declutter
+- Unarchive when needed
+- Permanently delete sessions
+- Confirm before destructive actions
+
+### 💾 Automatic Persistence
+
+- All sessions auto-save to disk
+- Survive Next.js restarts
+- Survive Electron app restarts
+- Never lose your conversations
+
+## User Interface
+
+### Session Manager Sidebar
+
+Located on the left side of the Agent Chat view:
+
+```
+┌──────────────────────────┬────────────────────────┐
+│  Session Manager         │  Chat Messages         │
+│                          │                        │
+│  [+ New]  [Archive]      │  User: Hello           │
+│                          │  Agent: Hi there!      │
+│  📝 Feature: Auth        │                        │
+│     "Add OAuth login..." │  [Input field]         │
+│     42 messages          │                        │
+│                          │                        │
+│  📝 Bug: Payment         │                        │
+│     "Fix stripe inte..." │                        │
+│     15 messages          │                        │
+│                          │                        │
+└──────────────────────────┴────────────────────────┘
+```
+
+### Toggle Sidebar
+
+Click the panel icon in the header to show/hide the session manager.
+
+## How to Use
+
+### Creating a Session
+
+1. Click the **"+ New"** button
+2. Enter a descriptive name
+3. Press Enter or click ✓
+4. The new session is immediately active
+
+**Example session names:**
+
+- "Feature: Dark Mode"
+- "Bug: Login redirect"
+- "Refactor: API layer"
+- "Docs: Getting started"
+
+### Switching Sessions
+
+Simply click on any session in the list to switch to it. The conversation history loads instantly.
+
+### Renaming a Session
+
+1. Click the edit icon (✏️) next to the session name
+2. Type the new name
+3. Press Enter or click ✓
+
+### Clearing a Session
+
+Click the **"Clear"** button in the chat header to delete all messages from the current session while keeping the session itself.
+
+### Archiving a Session
+
+1. Click the archive icon (📦) next to the session
+2. The session moves to the archived list
+3. Toggle **"Show Archived"** to view archived sessions
+
+**When to archive:**
+
+- Completed features
+- Resolved bugs
+- Old experiments
+- Historical reference
+
+### Unarchiving a Session
+
+1. Toggle **"Show Archived"** to see archived sessions
+2. Click the unarchive icon (📤)
+3. The session returns to the active list
+
+### Deleting a Session
+
+1. Archive the session first
+2. View archived sessions
+3. Click the delete icon (🗑️)
+4. Confirm the deletion
+5. **This is permanent!**
+
+## Storage Location
+
+Sessions are stored in your user data directory:
+
+**macOS:**
+
+```
+~/Library/Application Support/automaker/agent-sessions/
+```
+
+**Windows:**
+
+```
+%APPDATA%/automaker/agent-sessions/
+```
+
+**Linux:**
+
+```
+~/.config/automaker/agent-sessions/
+```
+
+### File Structure
+
+```
+agent-sessions/
+├── session_1234567890_abc.json       # Session conversation
+├── session_1234567891_def.json       # Another session
+└── sessions-metadata.json            # Session metadata
+```
+
+### Session File Format
+
+Each session file contains an array of messages:
+
+```json
+[
+  {
+    "id": "msg_1234567890_xyz",
+    "role": "user",
+    "content": "Add authentication to the app",
+    "timestamp": "2024-12-07T12:00:00.000Z"
+  },
+  {
+    "id": "msg_1234567891_abc",
+    "role": "assistant",
+    "content": "I'll help you add authentication...",
+    "timestamp": "2024-12-07T12:00:05.000Z"
+  }
+]
+```
+
+### Metadata File Format
+
+The metadata file tracks all sessions:
+
+```json
+{
+  "session_1234567890_abc": {
+    "name": "Feature: Authentication",
+    "projectPath": "/path/to/project",
+    "createdAt": "2024-12-07T12:00:00.000Z",
+    "updatedAt": "2024-12-07T12:30:00.000Z",
+    "isArchived": false,
+    "tags": []
+  }
+}
+```
+
+## Best Practices
+
+### Naming Conventions
+
+Use prefixes to organize sessions by type:
+
+- **Feature:** New functionality
+  - "Feature: Dark mode toggle"
+  - "Feature: User profiles"
+
+- **Bug:** Issue resolution
+  - "Bug: Memory leak in dashboard"
+  - "Bug: Form validation errors"
+
+- **Refactor:** Code improvements
+  - "Refactor: Database layer"
+  - "Refactor: Component structure"
+
+- **Docs:** Documentation work
+  - "Docs: API documentation"
+  - "Docs: README updates"
+
+- **Experiment:** Try new ideas
+  - "Experiment: WebGL renderer"
+  - "Experiment: New state management"
+
+### Session Lifecycle
+
+1. **Create** → Start a new feature or task
+2. **Work** → Have conversation, iterate on code
+3. **Complete** → Finish the task
+4. **Archive** → Keep for reference
+5. **Delete** → Remove when no longer needed
+
+### When to Create Multiple Sessions
+
+**Do create separate sessions for:**
+
+- ✅ Different features
+- ✅ Unrelated bugs
+- ✅ Experimental work
+- ✅ Different contexts or approaches
+
+**Don't create separate sessions for:**
+
+- ❌ Same feature, different iterations
+- ❌ Related bug fixes
+- ❌ Continuation of previous work
+
+### Managing Session Clutter
+
+- Archive completed work weekly
+- Delete archived sessions after 30 days
+- Use clear naming conventions
+- Consolidate related sessions
+
+## Integration with Project Workflow
+
+### Feature Development
+
+```
+1. Create: "Feature: User notifications"
+2. Agent: Design the notification system
+3. Agent: Implement backend
+4. Next.js restarts (agent continues)
+5. Agent: Implement frontend
+6. Agent: Add tests
+7. Complete & Archive
+```
+
+### Bug Fixing
+
+```
+1. Create: "Bug: Payment processing timeout"
+2. Agent: Investigate the issue
+3. Agent: Identify root cause
+4. Agent: Implement fix
+5. Agent: Add regression test
+6. Complete & Archive
+```
+
+### Refactoring
+
+```
+1. Create: "Refactor: API error handling"
+2. Agent: Analyze current implementation
+3. Agent: Design new approach
+4. Agent: Refactor service layer
+5. Next.js restarts (agent continues)
+6. Agent: Refactor controller layer
+7. Agent: Update tests
+8. Complete & Archive
+```
+
+## Keyboard Shortcuts
+
+_(Coming soon)_
+
+- `Cmd/Ctrl + K` - Create new session
+- `Cmd/Ctrl + [` - Previous session
+- `Cmd/Ctrl + ]` - Next session
+- `Cmd/Ctrl + Shift + A` - Toggle archive view
+
+## Troubleshooting
+
+### Session Not Saving
+
+**Check:**
+
+- Electron has write permissions
+- Disk space available
+- Check Electron console for errors
+
+**Solution:**
+
+```bash
+# macOS - Check permissions
+ls -la ~/Library/Application\ Support/automaker/
+
+# Fix permissions if needed
+chmod -R u+w ~/Library/Application\ Support/automaker/
+```
+
+### Can't Switch Sessions
+
+**Check:**
+
+- Session is not archived
+- No errors in console
+- Agent is not currently processing
+
+**Solution:**
+
+- Wait for current message to complete
+- Check for error messages
+- Try clearing and reloading
+
+### Session Disappeared
+
+**Check:**
+
+- Not filtered by archive status
+- Not accidentally deleted
+- Check backup files
+
+**Recovery:**
+
+- Toggle "Show Archived"
+- Check filesystem for `.json` files
+- Restore from backup if available
+
+## API Reference
+
+For developers integrating session management:
+
+### Create Session
+
+```typescript
+const result = await window.electronAPI.sessions.create(
+  'Session Name',
+  '/project/path',
+  '/working/directory'
+);
+```
+
+### List Sessions
+
+```typescript
+const { sessions } = await window.electronAPI.sessions.list(
+  false // includeArchived
+);
+```
+
+### Update Session
+
+```typescript
+await window.electronAPI.sessions.update(sessionId, 'New Name', ['tag1', 'tag2']);
+```
+
+### Archive/Unarchive
+
+```typescript
+await window.electronAPI.sessions.archive(sessionId);
+await window.electronAPI.sessions.unarchive(sessionId);
+```
+
+### Delete Session
+
+```typescript
+await window.electronAPI.sessions.delete(sessionId);
+```
+
+## Future Enhancements
+
+- [ ] Tag system for categorization
+- [ ] Search sessions by content
+- [ ] Export session to markdown
+- [ ] Share sessions with team
+- [ ] Session templates
+- [ ] Keyboard shortcuts
+- [ ] Drag & drop to reorder
+- [ ] Favorite/pin sessions
+- [ ] Session statistics
+- [ ] Automatic archiving rules
diff --git a/temp_repo/apps/ui/eslint.config.mjs b/temp_repo/apps/ui/eslint.config.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..0bd5a9b2b2f62afdcf5c48321abf48755786341f
--- /dev/null
+++ b/temp_repo/apps/ui/eslint.config.mjs
@@ -0,0 +1,190 @@
+import { defineConfig, globalIgnores } from 'eslint/config';
+import js from '@eslint/js';
+import ts from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import reactHooks from 'eslint-plugin-react-hooks';
+
+const eslintConfig = defineConfig([
+  js.configs.recommended,
+  {
+    files: ['**/*.mjs', '**/*.cjs'],
+    languageOptions: {
+      globals: {
+        console: 'readonly',
+        process: 'readonly',
+        require: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        setTimeout: 'readonly',
+        clearTimeout: 'readonly',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['warn', { argsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' }],
+    },
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+      globals: {
+        // Browser/DOM APIs
+        window: 'readonly',
+        document: 'readonly',
+        navigator: 'readonly',
+        Navigator: 'readonly',
+        localStorage: 'readonly',
+        sessionStorage: 'readonly',
+        fetch: 'readonly',
+        WebSocket: 'readonly',
+        File: 'readonly',
+        FileList: 'readonly',
+        FileReader: 'readonly',
+        Blob: 'readonly',
+        atob: 'readonly',
+        crypto: 'readonly',
+        prompt: 'readonly',
+        confirm: 'readonly',
+        getComputedStyle: 'readonly',
+        requestAnimationFrame: 'readonly',
+        cancelAnimationFrame: 'readonly',
+        requestIdleCallback: 'readonly',
+        cancelIdleCallback: 'readonly',
+        alert: 'readonly',
+        // DOM Element Types
+        HTMLElement: 'readonly',
+        HTMLInputElement: 'readonly',
+        HTMLDivElement: 'readonly',
+        HTMLButtonElement: 'readonly',
+        HTMLSpanElement: 'readonly',
+        HTMLTextAreaElement: 'readonly',
+        HTMLHeadingElement: 'readonly',
+        HTMLParagraphElement: 'readonly',
+        HTMLImageElement: 'readonly',
+        HTMLLinkElement: 'readonly',
+        HTMLScriptElement: 'readonly',
+        Element: 'readonly',
+        SVGElement: 'readonly',
+        SVGSVGElement: 'readonly',
+        // Event Types
+        Event: 'readonly',
+        KeyboardEvent: 'readonly',
+        DragEvent: 'readonly',
+        PointerEvent: 'readonly',
+        CustomEvent: 'readonly',
+        ClipboardEvent: 'readonly',
+        WheelEvent: 'readonly',
+        MouseEvent: 'readonly',
+        UIEvent: 'readonly',
+        MediaQueryListEvent: 'readonly',
+        PageTransitionEvent: 'readonly',
+        DataTransfer: 'readonly',
+        // Web APIs
+        ResizeObserver: 'readonly',
+        AbortSignal: 'readonly',
+        AbortController: 'readonly',
+        IntersectionObserver: 'readonly',
+        Audio: 'readonly',
+        HTMLAudioElement: 'readonly',
+        ScrollBehavior: 'readonly',
+        URL: 'readonly',
+        URLSearchParams: 'readonly',
+        XMLHttpRequest: 'readonly',
+        Response: 'readonly',
+        RequestInit: 'readonly',
+        RequestCache: 'readonly',
+        ServiceWorkerRegistration: 'readonly',
+        // Timers
+        setTimeout: 'readonly',
+        setInterval: 'readonly',
+        clearTimeout: 'readonly',
+        clearInterval: 'readonly',
+        queueMicrotask: 'readonly',
+        // Node.js (for scripts and Electron)
+        process: 'readonly',
+        require: 'readonly',
+        __dirname: 'readonly',
+        __filename: 'readonly',
+        NodeJS: 'readonly',
+        // React
+        React: 'readonly',
+        JSX: 'readonly',
+        // Electron
+        Electron: 'readonly',
+        // Console
+        console: 'readonly',
+        // Structured clone (modern browser/Node API)
+        structuredClone: 'readonly',
+        // Vite defines
+        __APP_VERSION__: 'readonly',
+        __APP_BUILD_HASH__: 'readonly',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': ts,
+      'react-hooks': reactHooks,
+    },
+    rules: {
+      ...ts.configs.recommended.rules,
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/ban-ts-comment': [
+        'error',
+        {
+          'ts-nocheck': 'allow-with-description',
+          minimumDescriptionLength: 10,
+        },
+      ],
+    },
+  },
+  {
+    files: ['public/sw.js'],
+    languageOptions: {
+      globals: {
+        // Service Worker globals
+        self: 'readonly',
+        caches: 'readonly',
+        fetch: 'readonly',
+        Headers: 'readonly',
+        Response: 'readonly',
+        URL: 'readonly',
+        setTimeout: 'readonly',
+        console: 'readonly',
+        // Built-in globals used in sw.js
+        Date: 'readonly',
+        Promise: 'readonly',
+        Set: 'readonly',
+        JSON: 'readonly',
+        String: 'readonly',
+        Array: 'readonly',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['warn', { argsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' }],
+    },
+  },
+  globalIgnores([
+    'dist/**',
+    'dist-electron/**',
+    'node_modules/**',
+    'server-bundle/**',
+    'release/**',
+    'src/routeTree.gen.ts',
+  ]),
+]);
+
+export default eslintConfig;
diff --git a/temp_repo/apps/ui/index.html b/temp_repo/apps/ui/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..afc0f07fc2804191ed93bb8b4df8117a7fd80509
--- /dev/null
+++ b/temp_repo/apps/ui/index.html
@@ -0,0 +1,240 @@
+<!doctype html>
+<html lang="en" suppressHydrationWarning>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Automaker - Autonomous AI Development Studio</title>
+    <meta name="description" content="Build software autonomously with AI agents" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <!-- PWA -->
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" content="#09090b" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-title" content="Automaker" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <link rel="apple-touch-icon" href="/logo_larger.png" />
+    <!-- Performance: Preload critical assets with fetchpriority for faster First Contentful Paint -->
+    <link rel="preload" href="/logo.png" as="image" fetchpriority="high" />
+    <link
+      rel="preload"
+      href="/automaker.svg"
+      as="image"
+      type="image/svg+xml"
+      fetchpriority="high"
+    />
+    <!-- Critical inline styles: prevent white/wrong-color flash on mobile PWA cold start -->
+    <!-- These styles are applied before any external CSS loads, eliminating FOUC -->
+    <style>
+      html {
+        background-color: #09090b;
+      }
+      @media (prefers-color-scheme: light) {
+        html:not([class]) {
+          background-color: #fff;
+        }
+      }
+      html.light,
+      html.cream,
+      html.solarizedlight,
+      html.github,
+      html.paper,
+      html.rose,
+      html.mint,
+      html.lavender,
+      html.sand,
+      html.sky,
+      html.peach,
+      html.snow,
+      html.sepia,
+      html.gruvboxlight,
+      html.nordlight,
+      html.blossom,
+      html.ayu-light,
+      html.onelight,
+      html.bluloco,
+      html.feather {
+        background-color: #fff;
+      }
+      html,
+      body {
+        margin: 0;
+        overflow: hidden;
+        position: fixed;
+        width: 100%;
+        height: 100%;
+      }
+      #app {
+        height: 100vh;
+        height: 100dvh;
+        overflow: hidden;
+      }
+      /* Inline app shell: shows logo + spinner while JS bundle downloads.
+         On slow mobile networks the bundle can take 2-5s; this eliminates
+         the blank screen and gives immediate visual feedback.
+         React's createRoot().render() replaces #app's innerHTML, removing this. */
+      .app-shell {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        gap: 24px;
+        opacity: 1;
+      }
+      .app-shell-logo {
+        width: 56px;
+        height: 56px;
+        opacity: 0.9;
+      }
+      /* Default (dark): light spinner + logo strokes */
+      .app-shell-spinner {
+        width: 20px;
+        height: 20px;
+        border: 2px solid rgba(255, 255, 255, 0.1);
+        border-top-color: rgba(255, 255, 255, 0.5);
+        border-radius: 50%;
+        animation: shell-spin 0.8s linear infinite;
+      }
+      .app-shell-logo-stroke {
+        stroke: rgba(255, 255, 255, 0.7);
+      }
+      .app-shell-logo-bg {
+        fill: rgba(255, 255, 255, 0.08);
+      }
+      /* Light themes: dark spinner + logo strokes.
+         The theme script below sets data-theme-type="light" on <html> for any light
+         theme, so future theme additions only need to update the script — not CSS. */
+      html[data-theme-type='light'] .app-shell-spinner {
+        border-color: rgba(0, 0, 0, 0.08);
+        border-top-color: rgba(0, 0, 0, 0.4);
+      }
+      html[data-theme-type='light'] .app-shell-logo-stroke {
+        stroke: rgba(0, 0, 0, 0.55);
+      }
+      html[data-theme-type='light'] .app-shell-logo-bg {
+        fill: rgba(0, 0, 0, 0.06);
+      }
+      /* System light preference when no theme class is applied yet */
+      @media (prefers-color-scheme: light) {
+        html:not([class]) .app-shell-spinner {
+          border-color: rgba(0, 0, 0, 0.08);
+          border-top-color: rgba(0, 0, 0, 0.4);
+        }
+        html:not([class]) .app-shell-logo-stroke {
+          stroke: rgba(0, 0, 0, 0.55);
+        }
+        html:not([class]) .app-shell-logo-bg {
+          fill: rgba(0, 0, 0, 0.06);
+        }
+      }
+      @keyframes shell-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
+    <script>
+      // Prevent theme flash - apply stored theme before React hydrates
+      (function () {
+        try {
+          // Primary key used by current builds for pre-React theme persistence.
+          var theme = localStorage.getItem('automaker:theme');
+
+          // Backward compatibility: older builds stored theme in the Zustand blob.
+          if (!theme) {
+            var stored = localStorage.getItem('automaker-storage');
+            if (stored) {
+              var data = JSON.parse(stored);
+              theme = data?.state?.theme || data?.theme || null;
+            }
+          }
+
+          // Light theme names — kept in sync with the background-color rule above.
+          // Adding a new light theme only requires updating this array.
+          var lightThemes = [
+            'light',
+            'cream',
+            'solarizedlight',
+            'github',
+            'paper',
+            'rose',
+            'mint',
+            'lavender',
+            'sand',
+            'sky',
+            'peach',
+            'snow',
+            'sepia',
+            'gruvboxlight',
+            'nordlight',
+            'blossom',
+            'ayu-light',
+            'onelight',
+            'bluloco',
+            'feather',
+          ];
+
+          if (theme && theme !== 'system') {
+            // Apply the stored theme class directly (covers 'light', 'dark', and
+            // all named themes like 'cream', 'nord', etc.)
+            document.documentElement.classList.add(theme);
+            if (lightThemes.indexOf(theme) !== -1) {
+              document.documentElement.setAttribute('data-theme-type', 'light');
+            }
+          } else if (
+            theme === 'system' &&
+            window.matchMedia('(prefers-color-scheme: dark)').matches
+          ) {
+            document.documentElement.classList.add('dark');
+          } else if (
+            theme === 'system' &&
+            window.matchMedia('(prefers-color-scheme: light)').matches
+          ) {
+            document.documentElement.setAttribute('data-theme-type', 'light');
+          }
+          // Detect PWA standalone mode early so CSS can apply reduced bottom safe-area
+          // before first paint, preventing a layout shift on notched devices.
+          if (
+            window.matchMedia('(display-mode: standalone)').matches ||
+            navigator.standalone === true
+          ) {
+            document.documentElement.setAttribute('data-pwa', 'standalone');
+          }
+        } catch (e) {}
+      })();
+    </script>
+  </head>
+  <body class="antialiased">
+    <div id="app">
+      <!-- Inline app shell: renders instantly while JS downloads on slow mobile networks.
+           React's createRoot().render() replaces this content automatically. -->
+      <div class="app-shell">
+        <svg
+          class="app-shell-logo"
+          viewBox="0 0 256 256"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <rect class="app-shell-logo-bg" x="16" y="16" width="224" height="224" rx="56" />
+          <g
+            class="app-shell-logo-stroke"
+            fill="none"
+            stroke-width="20"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M92 92 L52 128 L92 164" />
+            <path d="M144 72 L116 184" />
+            <path d="M164 92 L204 128 L164 164" />
+          </g>
+        </svg>
+        <div class="app-shell-spinner" role="status" aria-label="Loading…"></div>
+      </div>
+    </div>
+    <script type="module" src="/src/renderer.tsx"></script>
+  </body>
+</html>
diff --git a/temp_repo/apps/ui/nginx.conf b/temp_repo/apps/ui/nginx.conf
new file mode 100644
index 0000000000000000000000000000000000000000..da56165d015afbeb9829692c25e2357919684bb9
--- /dev/null
+++ b/temp_repo/apps/ui/nginx.conf
@@ -0,0 +1,31 @@
+# Map for conditional WebSocket upgrade header
+map $http_upgrade $connection_upgrade {
+    default upgrade;
+    '' close;
+}
+
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Proxy API and WebSocket requests to the backend server container
+    # Handles both HTTP API calls and WebSocket upgrades (/api/events, /api/terminal/ws)
+    location /api/ {
+        proxy_pass http://server:3008;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection $connection_upgrade;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_buffering off;
+        proxy_read_timeout 3600s;
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
diff --git a/temp_repo/apps/ui/package.json b/temp_repo/apps/ui/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..a95bb3eca774b00b7868719c9005c264d391e6cf
--- /dev/null
+++ b/temp_repo/apps/ui/package.json
@@ -0,0 +1,302 @@
+{
+  "name": "@automaker/ui",
+  "version": "1.0.0",
+  "description": "An autonomous AI development studio that helps you build software faster using AI-powered agents",
+  "homepage": "https://github.com/AutoMaker-Org/automaker",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AutoMaker-Org/automaker.git"
+  },
+  "author": "AutoMaker Team",
+  "license": "SEE LICENSE IN LICENSE",
+  "desktopName": "automaker.desktop",
+  "private": true,
+  "engines": {
+    "node": ">=22.0.0 <23.0.0"
+  },
+  "main": "dist-electron/main.js",
+  "scripts": {
+    "dev": "vite",
+    "dev:web": "cross-env VITE_SKIP_ELECTRON=true vite",
+    "dev:electron": "vite",
+    "dev:electron:debug": "cross-env OPEN_DEVTOOLS=true vite",
+    "build": "vite build",
+    "build:electron": "node scripts/prepare-server.mjs && vite build && electron-builder",
+    "build:electron:dir": "node scripts/prepare-server.mjs && vite build && electron-builder --dir",
+    "build:electron:win": "node scripts/prepare-server.mjs && vite build && electron-builder --win",
+    "build:electron:win:dir": "node scripts/prepare-server.mjs && vite build && electron-builder --win --dir",
+    "build:electron:mac": "node scripts/prepare-server.mjs && vite build && electron-builder --mac",
+    "build:electron:mac:dir": "node scripts/prepare-server.mjs && vite build && electron-builder --mac --dir",
+    "build:electron:linux": "node scripts/prepare-server.mjs && vite build && electron-builder --linux",
+    "build:electron:linux:dir": "node scripts/prepare-server.mjs && vite build && electron-builder --linux --dir",
+    "postinstall": "electron-builder install-app-deps",
+    "preview": "vite preview",
+    "lint": "npx eslint",
+    "typecheck": "tsc --noEmit",
+    "pretest": "node scripts/kill-test-servers.mjs && node scripts/setup-e2e-fixtures.mjs",
+    "test": "playwright test",
+    "test:headed": "playwright test --headed",
+    "dev:electron:wsl": "cross-env vite",
+    "dev:electron:wsl:gpu": "cross-env MESA_D3D12_DEFAULT_ADAPTER_NAME=NVIDIA vite"
+  },
+  "dependencies": {
+    "@automaker/dependency-resolver": "1.0.0",
+    "@automaker/spec-parser": "1.0.0",
+    "@automaker/types": "1.0.0",
+    "@codemirror/lang-cpp": "^6.0.3",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lang-php": "^6.0.2",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-rust": "^6.0.2",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/lang-xml": "6.1.0",
+    "@codemirror/language": "^6.12.1",
+    "@codemirror/legacy-modes": "^6.5.2",
+    "@codemirror/merge": "^6.12.0",
+    "@codemirror/search": "^6.6.0",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/theme-one-dark": "6.1.3",
+    "@codemirror/view": "^6.39.15",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
+    "@fontsource/cascadia-code": "^5.2.3",
+    "@fontsource/fira-code": "^5.2.7",
+    "@fontsource/ibm-plex-mono": "^5.2.7",
+    "@fontsource/inconsolata": "^5.2.8",
+    "@fontsource/inter": "^5.2.8",
+    "@fontsource/iosevka": "^5.2.5",
+    "@fontsource/jetbrains-mono": "^5.2.8",
+    "@fontsource/lato": "^5.2.7",
+    "@fontsource/montserrat": "^5.2.8",
+    "@fontsource/open-sans": "^5.2.7",
+    "@fontsource/poppins": "^5.2.7",
+    "@fontsource/raleway": "^5.2.8",
+    "@fontsource/roboto": "^5.2.9",
+    "@fontsource/source-code-pro": "^5.2.7",
+    "@fontsource/source-sans-3": "^5.2.9",
+    "@fontsource/work-sans": "^5.2.8",
+    "@lezer/highlight": "1.2.3",
+    "@radix-ui/react-checkbox": "1.3.3",
+    "@radix-ui/react-collapsible": "1.1.12",
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-dropdown-menu": "2.1.16",
+    "@radix-ui/react-label": "2.1.8",
+    "@radix-ui/react-popover": "1.1.15",
+    "@radix-ui/react-radio-group": "1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "2.2.6",
+    "@radix-ui/react-slider": "1.3.6",
+    "@radix-ui/react-slot": "1.2.4",
+    "@radix-ui/react-switch": "1.2.6",
+    "@radix-ui/react-tabs": "1.1.13",
+    "@radix-ui/react-tooltip": "1.2.8",
+    "@tanstack/react-query": "^5.90.17",
+    "@tanstack/react-query-devtools": "^5.91.2",
+    "@tanstack/react-query-persist-client": "^5.90.22",
+    "@tanstack/react-router": "1.141.6",
+    "@uiw/react-codemirror": "4.25.4",
+    "@xterm/addon-fit": "0.10.0",
+    "@xterm/addon-search": "0.15.0",
+    "@xterm/addon-web-links": "0.11.0",
+    "@xterm/addon-webgl": "0.18.0",
+    "@xterm/xterm": "5.5.0",
+    "@xyflow/react": "12.10.0",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "1.1.1",
+    "dagre": "0.8.5",
+    "dotenv": "17.2.3",
+    "geist": "1.5.1",
+    "idb-keyval": "^6.2.2",
+    "lucide-react": "0.562.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-markdown": "10.1.0",
+    "react-resizable-panels": "3.0.6",
+    "rehype-raw": "7.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
+    "sonner": "2.0.7",
+    "tailwind-merge": "3.4.0",
+    "usehooks-ts": "3.1.1",
+    "zod": "^3.24.1 || ^4.0.0",
+    "zustand": "5.0.9"
+  },
+  "optionalDependencies": {
+    "lightningcss-darwin-arm64": "1.29.2",
+    "lightningcss-darwin-x64": "1.29.2",
+    "lightningcss-linux-arm-gnueabihf": "1.29.2",
+    "lightningcss-linux-arm64-gnu": "1.29.2",
+    "lightningcss-linux-arm64-musl": "1.29.2",
+    "lightningcss-linux-x64-gnu": "1.29.2",
+    "lightningcss-linux-x64-musl": "1.29.2",
+    "lightningcss-win32-arm64-msvc": "1.29.2",
+    "lightningcss-win32-x64-msvc": "1.29.2"
+  },
+  "devDependencies": {
+    "@electron/rebuild": "4.0.2",
+    "@eslint/js": "9.0.0",
+    "@playwright/test": "1.57.0",
+    "@tailwindcss/vite": "4.1.18",
+    "@tanstack/router-plugin": "1.141.7",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/dagre": "0.7.53",
+    "@types/node": "22.19.3",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "@typescript-eslint/eslint-plugin": "8.50.0",
+    "@typescript-eslint/parser": "8.50.0",
+    "@vitejs/plugin-react": "5.1.2",
+    "cross-env": "10.1.0",
+    "electron": "39.2.7",
+    "electron-builder": "26.0.12",
+    "eslint": "9.39.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "jsdom": "^28.1.0",
+    "tailwindcss": "4.1.18",
+    "tw-animate-css": "1.4.0",
+    "typescript": "5.9.3",
+    "vite": "7.3.0",
+    "vite-plugin-electron": "0.29.0",
+    "vite-plugin-electron-renderer": "0.14.6"
+  },
+  "build": {
+    "appId": "com.automaker.app",
+    "productName": "Automaker",
+    "artifactName": "${productName}-${version}-${arch}.${ext}",
+    "npmRebuild": false,
+    "publish": null,
+    "afterPack": "./scripts/rebuild-server-natives.cjs",
+    "directories": {
+      "output": "release"
+    },
+    "files": [
+      "dist/**/*",
+      "dist-electron/**/*",
+      "public/**/*",
+      "!node_modules/**/*"
+    ],
+    "extraResources": [
+      {
+        "from": "server-bundle/dist",
+        "to": "server"
+      },
+      {
+        "from": "server-bundle/node_modules",
+        "to": "server/node_modules"
+      },
+      {
+        "from": "server-bundle/libs",
+        "to": "server/libs"
+      },
+      {
+        "from": "server-bundle/package.json",
+        "to": "server/package.json"
+      },
+      {
+        "from": "../../.env",
+        "to": ".env",
+        "filter": [
+          "**/*"
+        ]
+      },
+      {
+        "from": "public/logo_larger.png",
+        "to": "logo_larger.png"
+      }
+    ],
+    "mac": {
+      "category": "public.app-category.developer-tools",
+      "target": [
+        {
+          "target": "dmg",
+          "arch": [
+            "x64",
+            "arm64"
+          ]
+        },
+        {
+          "target": "zip",
+          "arch": [
+            "x64",
+            "arm64"
+          ]
+        }
+      ],
+      "icon": "public/logo_larger.png"
+    },
+    "win": {
+      "target": [
+        {
+          "target": "nsis",
+          "arch": [
+            "x64"
+          ]
+        }
+      ],
+      "icon": "public/icon.ico"
+    },
+    "linux": {
+      "target": [
+        {
+          "target": "AppImage",
+          "arch": [
+            "x64"
+          ]
+        },
+        {
+          "target": "deb",
+          "arch": [
+            "x64"
+          ]
+        },
+        {
+          "target": "rpm",
+          "arch": [
+            "x64"
+          ]
+        }
+      ],
+      "category": "Development",
+      "icon": "public/logo_larger.png",
+      "maintainer": "webdevcody@gmail.com",
+      "executableName": "automaker",
+      "description": "An autonomous AI development studio that helps you build software faster using AI-powered agents",
+      "synopsis": "AI-powered autonomous development studio",
+      "desktop": {
+        "entry": {
+          "Icon": "/opt/Automaker/resources/logo_larger.png"
+        }
+      }
+    },
+    "rpm": {
+      "depends": [
+        "gtk3",
+        "libnotify",
+        "nss",
+        "libXScrnSaver",
+        "libXtst",
+        "xdg-utils",
+        "at-spi2-core",
+        "libuuid"
+      ],
+      "compression": "xz",
+      "vendor": "AutoMaker Team",
+      "afterInstall": "scripts/rpm-after-install.sh"
+    },
+    "nsis": {
+      "oneClick": false,
+      "allowToChangeInstallationDirectory": true,
+      "createDesktopShortcut": true,
+      "createStartMenuShortcut": true
+    }
+  }
+}
diff --git a/temp_repo/apps/ui/playwright.config.ts b/temp_repo/apps/ui/playwright.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c1230318cc96b0490e4804a0b489945c1da05e22
--- /dev/null
+++ b/temp_repo/apps/ui/playwright.config.ts
@@ -0,0 +1,127 @@
+import { defineConfig, devices } from '@playwright/test';
+import path from 'path';
+
+const port = process.env.TEST_PORT || 3107;
+
+// PATH that includes common git locations so the E2E server can run git (worktree list, etc.)
+const pathSeparator = process.platform === 'win32' ? ';' : ':';
+const extraPath =
+  process.platform === 'win32'
+    ? [
+        process.env.LOCALAPPDATA && `${process.env.LOCALAPPDATA}\\Programs\\Git\\cmd`,
+        process.env.PROGRAMFILES && `${process.env.PROGRAMFILES}\\Git\\cmd`,
+      ].filter(Boolean)
+    : [
+        '/opt/homebrew/bin',
+        '/usr/local/bin',
+        '/usr/bin',
+        '/home/linuxbrew/.linuxbrew/bin',
+        process.env.HOME && `${process.env.HOME}/.local/bin`,
+      ].filter(Boolean);
+const e2eServerPath = [process.env.PATH, ...extraPath].filter(Boolean).join(pathSeparator);
+const serverPort = process.env.TEST_SERVER_PORT || 3108;
+// When true, no webServer is started; you must run UI (port 3107) and server (3108) yourself.
+const reuseServer = process.env.TEST_REUSE_SERVER === 'true';
+// Only skip backend startup when explicitly requested for E2E runs.
+// VITE_SERVER_URL may be set in user shells for local dev and should not affect tests.
+const useExternalBackend = process.env.TEST_USE_EXTERNAL_BACKEND === 'true';
+// Always use mock agent for tests (disables rate limiting, uses mock Claude responses)
+const mockAgent = true;
+
+// Auth state file written by global setup, reused by all tests to skip per-test login
+const AUTH_STATE_PATH = path.join(__dirname, 'tests/.auth/storage-state.json');
+
+export default defineConfig({
+  testDir: './tests',
+  // Keep Playwright scoped to E2E specs so Vitest unit files are not executed here.
+  testMatch: '**/*.spec.ts',
+  testIgnore: ['**/unit/**'],
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  // Use multiple workers for parallelism. CI gets 2 workers (constrained resources),
+  // local runs use 8 workers for faster test execution.
+  workers: process.env.CI ? 2 : 8,
+  reporter: process.env.CI ? 'github' : 'html',
+  timeout: 30000,
+  use: {
+    baseURL: `http://127.0.0.1:${port}`,
+    trace: 'on-failure',
+    screenshot: 'only-on-failure',
+    serviceWorkers: 'block',
+    // Reuse auth state from global setup - avoids per-test login overhead
+    storageState: AUTH_STATE_PATH,
+  },
+  // Global setup - authenticate once and save state for all workers
+  globalSetup: require.resolve('./tests/global-setup.ts'),
+  globalTeardown: require.resolve('./tests/global-teardown.ts'),
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  ...(reuseServer
+    ? {}
+    : {
+        webServer: [
+          // Backend server - runs with mock agent enabled in CI
+          // Uses dev:test (no file watching) to avoid port conflicts from server restarts
+          ...(useExternalBackend
+            ? []
+            : [
+                {
+                  command: `cd ../server && npm run dev:test`,
+                  url: `http://127.0.0.1:${serverPort}/api/health`,
+                  // Don't reuse existing server to ensure we use the test API key
+                  reuseExistingServer: false,
+                  timeout: 60000,
+                  env: {
+                    ...process.env,
+                    PORT: String(serverPort),
+                    // Ensure server can find git in CI/minimal env (worktree list, etc.)
+                    PATH: e2eServerPath,
+                    // Enable mock agent in CI to avoid real API calls
+                    AUTOMAKER_MOCK_AGENT: mockAgent ? 'true' : 'false',
+                    // Set a test API key for web mode authentication
+                    AUTOMAKER_API_KEY:
+                      process.env.AUTOMAKER_API_KEY || 'test-api-key-for-e2e-tests',
+                    // Hide the API key banner to reduce log noise
+                    AUTOMAKER_HIDE_API_KEY: 'true',
+                    // Explicitly unset ALLOWED_ROOT_DIRECTORY to allow all paths for testing
+                    // (prevents inheriting /projects from Docker or other environments)
+                    ALLOWED_ROOT_DIRECTORY: '',
+                    // Simulate containerized environment to skip sandbox confirmation dialogs
+                    IS_CONTAINERIZED: 'true',
+                    // Increase Node.js memory limit to prevent OOM during tests
+                    NODE_OPTIONS: [process.env.NODE_OPTIONS, '--max-old-space-size=4096']
+                      .filter(Boolean)
+                      .join(' '),
+                  },
+                },
+              ]),
+          // Frontend Vite dev server
+          {
+            command: `npm run dev`,
+            url: `http://127.0.0.1:${port}`,
+            reuseExistingServer: false,
+            timeout: 120000,
+            env: {
+              ...process.env,
+              // Must set AUTOMAKER_WEB_PORT to match the port Playwright waits for
+              AUTOMAKER_WEB_PORT: String(port),
+              // Must set AUTOMAKER_SERVER_PORT so Vite proxy forwards to the correct backend port
+              AUTOMAKER_SERVER_PORT: String(serverPort),
+              VITE_SKIP_SETUP: 'true',
+              // Always skip electron plugin during tests - prevents duplicate server spawning
+              VITE_SKIP_ELECTRON: 'true',
+              // Clear VITE_SERVER_URL to force the frontend to use the Vite proxy (/api)
+              // instead of calling the backend directly. Direct calls bypass the proxy and
+              // cause cookie domain mismatches (cookies are bound to 127.0.0.1 but
+              // VITE_SERVER_URL typically uses localhost).
+              VITE_SERVER_URL: '',
+            },
+          },
+        ],
+      }),
+});
diff --git a/temp_repo/apps/ui/public/automaker.svg b/temp_repo/apps/ui/public/automaker.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ece4dc5c0397fa424268e1dffff5943c64ed3041
--- /dev/null
+++ b/temp_repo/apps/ui/public/automaker.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" role="img" aria-label="Code icon">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="256" y2="256" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#6B5BFF"></stop>
+      <stop offset="100%" stop-color="#2EC7FF"></stop>
+    </linearGradient>
+
+    <filter id="iconShadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#000000" flood-opacity="0.25"></feDropShadow>
+    </filter>
+  </defs>
+
+  <!-- Rounded square background -->
+  <rect x="16" y="16" width="224" height="224" rx="56" fill="url(#bg)"></rect>
+
+  <!-- </> icon (slightly reduced overall size) -->
+  <g fill="none" stroke="#FFFFFF" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" filter="url(#iconShadow)">
+    <!-- Left bracket < -->
+    <path d="M92 92 L52 128 L92 164"></path>
+
+    <!-- Slash / -->
+    <path d="M144 72 L116 184"></path>
+
+    <!-- Right bracket > -->
+    <path d="M164 92 L204 128 L164 164"></path>
+  </g>
+</svg>
diff --git a/temp_repo/apps/ui/public/file.svg b/temp_repo/apps/ui/public/file.svg
new file mode 100644
index 0000000000000000000000000000000000000000..004145cddf3f9db91b57b9cb596683c8eb420862
--- /dev/null
+++ b/temp_repo/apps/ui/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/temp_repo/apps/ui/public/globe.svg b/temp_repo/apps/ui/public/globe.svg
new file mode 100644
index 0000000000000000000000000000000000000000..567f17b0d7c7fb662c16d4357dd74830caf2dccb
--- /dev/null
+++ b/temp_repo/apps/ui/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/temp_repo/apps/ui/public/icon.ico b/temp_repo/apps/ui/public/icon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..fd02de332529993e913d35423961c6b3a41b8bf9
Binary files /dev/null and b/temp_repo/apps/ui/public/icon.ico differ
diff --git a/temp_repo/apps/ui/public/logo.png b/temp_repo/apps/ui/public/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..643b70d9f6679deb9cae2c26607d609b411abb1b
Binary files /dev/null and b/temp_repo/apps/ui/public/logo.png differ
diff --git a/temp_repo/apps/ui/public/logo_larger.png b/temp_repo/apps/ui/public/logo_larger.png
new file mode 100644
index 0000000000000000000000000000000000000000..efa9d3bee2c25e8534a55735e52f91714013b60d
--- /dev/null
+++ b/temp_repo/apps/ui/public/logo_larger.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cf60e646a6b9b27f193d3527019a0d8b6a5f1a83c97573547702ad1b35257cf6
+size 324788
diff --git a/temp_repo/apps/ui/public/manifest.json b/temp_repo/apps/ui/public/manifest.json
new file mode 100644
index 0000000000000000000000000000000000000000..5231d721b6b0711d851d9d631b1fcc801e768f3b
--- /dev/null
+++ b/temp_repo/apps/ui/public/manifest.json
@@ -0,0 +1,44 @@
+{
+  "name": "Automaker - Autonomous AI Development Studio",
+  "short_name": "Automaker",
+  "description": "Build software autonomously with AI agents",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#09090b",
+  "theme_color": "#09090b",
+  "orientation": "any",
+  "scope": "/",
+  "id": "/",
+  "icons": [
+    {
+      "src": "/logo.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/logo_larger.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/automaker.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    }
+  ],
+  "categories": ["developer", "productivity", "utilities"],
+  "lang": "en-US",
+  "dir": "ltr",
+  "launch_handler": {
+    "client_mode": "focus-existing"
+  },
+  "handle_links": "preferred",
+  "edge_side_panel": {
+    "preferred_width": 480
+  },
+  "prefer_related_applications": false,
+  "display_override": ["standalone", "minimal-ui"]
+}
diff --git a/temp_repo/apps/ui/public/next.svg b/temp_repo/apps/ui/public/next.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5174b28c565c285e3e312ec5178be64fbeca8398
--- /dev/null
+++ b/temp_repo/apps/ui/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/temp_repo/apps/ui/public/readme_logo.png b/temp_repo/apps/ui/public/readme_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..b0d7f2bc82db97761a554996ffa6dfb720a70554
Binary files /dev/null and b/temp_repo/apps/ui/public/readme_logo.png differ
diff --git a/temp_repo/apps/ui/public/readme_logo.svg b/temp_repo/apps/ui/public/readme_logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..86177aeab215399c0e75c9621ae9222fe8bc42eb
--- /dev/null
+++ b/temp_repo/apps/ui/public/readme_logo.svg
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1456" height="330" viewBox="0 0 1456 330" role="img" aria-label="Automaker Logo">
+  <defs>
+    <!-- Brand Gradient -->
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#6B5BFF" />
+      <stop offset="100%" stop-color="#2EC7FF" />
+    </linearGradient>
+    
+    <!-- Shadow filter -->
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#000000" flood-opacity="0.3" />
+    </filter>
+  </defs>
+
+  <!-- Optional subtle background to ensure contrast on all GitHub themes -->
+  <rect width="1456" height="330" rx="20" fill="#09090b" />
+
+  <!-- Logo Icon (Left Side) -->
+  <g transform="translate(80, 65)">
+    <!-- Rounded square background -->
+    <rect width="200" height="200" rx="50" fill="url(#bg)" />
+    
+    <!-- Icon paths -->
+    <g fill="none" stroke="#FFFFFF" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" filter="url(#shadow)" transform="translate(100, 100)">
+      <!-- Left bracket < -->
+      <path d="M-30 -30 L-55 0 L-30 30" />
+      <!-- Slash / -->
+      <path d="M15 -45 L-15 45" />
+      <!-- Right bracket > -->
+      <path d="M30 -30 L55 0 L30 30" />
+    </g>
+  </g>
+
+  <!-- Text Section -->
+  <text x="320" y="215" font-family="Inter, system-ui, -apple-system, sans-serif" font-size="160" font-weight="800" letter-spacing="-4" fill="#FFFFFF">
+    automaker<tspan fill="#6B5BFF">.</tspan>
+  </text>
+</svg>
diff --git a/temp_repo/apps/ui/public/sounds/ding.mp3 b/temp_repo/apps/ui/public/sounds/ding.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..660e58198d62723afbc712445d187fab6cb49958
Binary files /dev/null and b/temp_repo/apps/ui/public/sounds/ding.mp3 differ
diff --git a/temp_repo/apps/ui/public/sw.js b/temp_repo/apps/ui/public/sw.js
new file mode 100644
index 0000000000000000000000000000000000000000..1370cb7c3a33733f13e0087be95aff8f7dcbae18
--- /dev/null
+++ b/temp_repo/apps/ui/public/sw.js
@@ -0,0 +1,626 @@
+// Automaker Service Worker - Optimized for mobile PWA loading performance
+// NOTE: CACHE_NAME is injected with a build hash at build time by the swCacheBuster
+// Vite plugin (see vite.config.mts). In development it stays as-is; in production
+// builds it becomes e.g. 'automaker-v5-a1b2c3d4' for automatic cache invalidation.
+const CACHE_NAME = 'automaker-v5'; // replaced at build time → 'automaker-v5-<hash>'
+
+// Separate cache for immutable hashed assets (long-lived)
+const IMMUTABLE_CACHE = 'automaker-immutable-v2';
+
+// Separate cache for API responses (short-lived, stale-while-revalidate on mobile)
+const API_CACHE = 'automaker-api-v1';
+
+// Assets to cache on install (app shell for instant loading)
+const SHELL_ASSETS = [
+  '/',
+  '/index.html',
+  '/manifest.json',
+  '/logo.png',
+  '/logo_larger.png',
+  '/automaker.svg',
+  '/favicon.ico',
+];
+
+// Critical JS/CSS assets extracted from index.html at build time by the swCacheBuster
+// Vite plugin. Populated during production builds; empty in dev mode.
+// These are precached on SW install so that PWA cold starts after memory eviction
+// serve instantly from cache instead of requiring a full network download.
+const CRITICAL_ASSETS = [];
+
+// Whether mobile caching is enabled (set via message from main thread).
+// Persisted to Cache Storage so it survives aggressive SW termination on mobile.
+let mobileMode = false;
+const MOBILE_MODE_CACHE_KEY = 'automaker-sw-config';
+const MOBILE_MODE_URL = '/sw-config/mobile-mode';
+
+/**
+ * Persist mobileMode to Cache Storage so it survives SW restarts.
+ * Service workers on mobile get killed aggressively — without persistence,
+ * mobileMode resets to false and API caching silently stops working.
+ */
+async function persistMobileMode(enabled) {
+  try {
+    const cache = await caches.open(MOBILE_MODE_CACHE_KEY);
+    const response = new Response(JSON.stringify({ mobileMode: enabled }), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+    await cache.put(MOBILE_MODE_URL, response);
+  } catch (_e) {
+    // Best-effort persistence — SW still works without it
+  }
+}
+
+/**
+ * Restore mobileMode from Cache Storage on SW startup.
+ */
+async function restoreMobileMode() {
+  try {
+    const cache = await caches.open(MOBILE_MODE_CACHE_KEY);
+    const response = await cache.match(MOBILE_MODE_URL);
+    if (response) {
+      const data = await response.json();
+      mobileMode = !!data.mobileMode;
+    }
+  } catch (_e) {
+    // Best-effort restore — defaults to false
+  }
+}
+
+// Restore mobileMode immediately on SW startup
+// Keep a promise so fetch handlers can await restoration on cold SW starts.
+// This prevents a race where early API requests run before mobileMode is loaded
+// from Cache Storage, incorrectly falling back to network-first.
+const mobileModeRestorePromise = restoreMobileMode();
+
+// API endpoints that are safe to serve from stale cache on mobile.
+// These are GET-only, read-heavy endpoints where showing slightly stale data
+// is far better than a blank screen or reload on flaky mobile connections.
+const CACHEABLE_API_PATTERNS = [
+  '/api/features',
+  '/api/settings',
+  '/api/models',
+  '/api/usage',
+  '/api/worktrees',
+  '/api/github',
+  '/api/cli',
+  '/api/sessions',
+  '/api/running-agents',
+  '/api/pipeline',
+  '/api/workspace',
+  '/api/spec',
+];
+
+// Max age for API cache entries (5 minutes).
+// After this, even mobile will require a network fetch.
+const API_CACHE_MAX_AGE = 5 * 60 * 1000;
+
+// Maximum entries in API cache to prevent unbounded growth
+const API_CACHE_MAX_ENTRIES = 100;
+
+/**
+ * Check if an API request is safe to cache (read-only data endpoints)
+ */
+function isCacheableApiRequest(url) {
+  const path = url.pathname;
+  if (!path.startsWith('/api/')) return false;
+  return CACHEABLE_API_PATTERNS.some((pattern) => path.startsWith(pattern));
+}
+
+/**
+ * Check if a cached API response is still fresh enough to use
+ */
+function isApiCacheFresh(response) {
+  const cachedAt = response.headers.get('x-sw-cached-at');
+  if (!cachedAt) return false;
+  return Date.now() - parseInt(cachedAt, 10) < API_CACHE_MAX_AGE;
+}
+
+/**
+ * Clone a response and add a timestamp header for cache freshness tracking.
+ * Uses arrayBuffer() instead of blob() to avoid doubling memory for large responses.
+ */
+async function addCacheTimestamp(response) {
+  const headers = new Headers(response.headers);
+  headers.set('x-sw-cached-at', String(Date.now()));
+  const body = await response.clone().arrayBuffer();
+  return new Response(body, {
+    status: response.status,
+    statusText: response.statusText,
+    headers,
+  });
+}
+
+self.addEventListener('install', (event) => {
+  // Cache the app shell AND critical JS/CSS assets so the PWA loads instantly.
+  // SHELL_ASSETS go into CACHE_NAME (general cache), CRITICAL_ASSETS go into
+  // IMMUTABLE_CACHE (long-lived, content-hashed assets). This ensures that even
+  // the very first visit populates the immutable cache — previously, assets were
+  // only cached on fetch interception, but the SW isn't active during the first
+  // page load so nothing got cached until the second visit.
+  //
+  // self.skipWaiting() is NOT called here — activation is deferred until the main
+  // thread sends a SKIP_WAITING message to avoid disrupting a live page.
+  event.waitUntil(
+    Promise.all([
+      // Cache app shell (HTML, icons, manifest) using individual fetch+put instead of
+      // cache.addAll(). This is critical because cache.addAll() respects the server's
+      // Cache-Control response headers — if the server sends 'Cache-Control: no-store'
+      // (which Vite dev server does for index.html), addAll() silently skips caching
+      // and the pre-React loading spinner is never served from cache.
+      //
+      // cache.put() bypasses Cache-Control headers entirely, ensuring the app shell
+      // is always cached on install regardless of what the server sends. This is the
+      // correct approach for SW-managed caches where the SW (not HTTP headers) controls
+      // freshness via the activate event's cache cleanup and the navigation strategy's
+      // background revalidation.
+      caches.open(CACHE_NAME).then((cache) =>
+        Promise.all(
+          SHELL_ASSETS.map((url) =>
+            fetch(url)
+              .then((response) => {
+                if (response.ok) return cache.put(url, response);
+              })
+              .catch(() => {
+                // Individual asset fetch failure is non-fatal — the SW still activates
+                // and the next navigation will populate the cache via Strategy 3.
+              })
+          )
+        )
+      ),
+      // Cache critical JS/CSS bundles (injected at build time by swCacheBuster).
+      // Uses individual fetch+put instead of cache.addAll() so a single asset
+      // failure doesn't prevent the rest from being cached.
+      //
+      // IMPORTANT: We fetch with { mode: 'cors' } because Vite's output HTML uses
+      // <script type="module" crossorigin> and <link rel="modulepreload" crossorigin>
+      // for these assets. The Cache API keys entries by URL + request mode, so a
+      // no-cors cached response won't match a cors-mode browser request. Fetching
+      // with cors mode here ensures the cached entries match what the browser requests.
+      CRITICAL_ASSETS.length > 0
+        ? caches.open(IMMUTABLE_CACHE).then((cache) =>
+            Promise.all(
+              CRITICAL_ASSETS.map((url) =>
+                fetch(url, { mode: 'cors' })
+                  .then((response) => {
+                    if (response.ok) return cache.put(url, response);
+                  })
+                  .catch(() => {
+                    // Individual asset fetch failure is non-fatal
+                  })
+              )
+            )
+          )
+        : Promise.resolve(),
+    ])
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  // Remove old caches (both regular and immutable)
+  const validCaches = new Set([CACHE_NAME, IMMUTABLE_CACHE, API_CACHE, MOBILE_MODE_CACHE_KEY]);
+  event.waitUntil(
+    Promise.all([
+      // Clean old caches
+      caches.keys().then((cacheNames) => {
+        return Promise.all(
+          cacheNames.filter((name) => !validCaches.has(name)).map((name) => caches.delete(name))
+        );
+      }),
+      // Enable Navigation Preload for faster navigation responses on mobile.
+      // When enabled, the browser fires the navigation fetch in parallel with
+      // service worker boot, eliminating the SW startup delay (~50-200ms on mobile).
+      self.registration.navigationPreload && self.registration.navigationPreload.enable(),
+      // Claim clients so this SW immediately controls all open pages.
+      //
+      // This is safe in all activation scenarios:
+      // 1. First install: No old SW exists — claiming is a no-op with no side effects.
+      //    Critically, this lets the fetch handler intercept requests during the same
+      //    visit that registered the SW, populating the immutable cache.
+      // 2. SKIP_WAITING from main thread: The page is freshly loaded, so claiming
+      //    won't cause a visible flash (the SW was explicitly asked to take over).
+      // 3. Natural activation (all old-SW tabs closed): The new SW activates when
+      //    no pages are using the old SW, so claiming controls only new navigations.
+      //
+      // Without clients.claim(), the SW's fetch handler would not intercept any
+      // requests until the next full navigation — meaning the first visit after
+      // install would not benefit from the cache-first asset strategy.
+      self.clients.claim(),
+    ])
+  );
+});
+
+/**
+ * Determine if a URL points to an immutable hashed asset.
+ * Vite produces filenames like /assets/index-D3f1k2.js or /assets/style-Ab12Cd.css
+ * These contain content hashes and are safe to cache permanently.
+ */
+function isImmutableAsset(url) {
+  const path = url.pathname;
+  // Match Vite's hashed asset pattern: /assets/<name>-<hash>.<ext>
+  // This covers JS bundles, CSS, and font files that Vite outputs to /assets/
+  // with content hashes (e.g., /assets/font-inter-WC6UYoCP.js).
+  // Note: We intentionally do NOT cache all font files globally — only those
+  // under /assets/ (which are Vite-processed, content-hashed, and actively used).
+  // There are 639+ font files (~20MB total) across all font families; caching them
+  // all would push iOS toward its ~50MB PWA quota and trigger eviction of everything.
+  if (path.startsWith('/assets/') && /-[A-Za-z0-9_-]{6,}\.\w+$/.test(path)) {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Determine if a request is for app code (JS/CSS) that should be cached aggressively.
+ * This includes both production /assets/* bundles and development /src/* modules.
+ *
+ * The path.startsWith('/src/') check is dev-only — in development the Vite dev server
+ * serves source files directly from /src/*. In production all code is bundled under
+ * /assets/*, so the /src/ check is harmless but only present for developer convenience.
+ */
+function isCodeAsset(url) {
+  const path = url.pathname;
+  const isScriptOrStyle = /\.(m?js|css|tsx?)$/.test(path);
+  if (!isScriptOrStyle) return false;
+  return path.startsWith('/assets/') || path.startsWith('/src/');
+}
+
+/**
+ * Determine if a URL points to a static asset that benefits from stale-while-revalidate
+ */
+function isStaticAsset(url) {
+  const path = url.pathname;
+  return /\.(png|jpg|jpeg|gif|svg|ico|webp|mp3|wav)$/.test(path);
+}
+
+/**
+ * Determine if a request is for a navigation (HTML page)
+ */
+function isNavigationRequest(request) {
+  return (
+    request.mode === 'navigate' ||
+    (request.method === 'GET' && request.headers.get('accept')?.includes('text/html'))
+  );
+}
+
+self.addEventListener('fetch', (event) => {
+  // Only handle GET requests
+  if (event.request.method !== 'GET') return;
+
+  const url = new URL(event.request.url);
+
+  // Skip cross-origin requests
+  if (url.origin !== self.location.origin) return;
+
+  // Strategy 5 (mobile only): Stale-while-revalidate for cacheable API requests.
+  // On mobile, flaky connections cause blank screens and reloads. By serving
+  // cached API responses immediately and refreshing in the background, we ensure
+  // the UI always has data to render, even on slow or interrupted connections.
+  // The main thread's React Query layer handles the eventual fresh data via its
+  // own refetching mechanism, so the user sees updates within seconds.
+  if (url.pathname.startsWith('/api/')) {
+    event.respondWith(
+      (async () => {
+        // On mobile, service workers are frequently terminated and restarted.
+        // Ensure persisted mobileMode is restored before deciding strategy so the
+        // very first API requests after restart can hit cache immediately.
+        try {
+          await mobileModeRestorePromise;
+        } catch (_e) {
+          // Best-effort restore — keep default mobileMode value on failure.
+        }
+
+        if (!(mobileMode && isCacheableApiRequest(url))) {
+          // Non-mobile or non-cacheable API: skip SW caching and use network.
+          return fetch(event.request);
+        }
+
+        const cache = await caches.open(API_CACHE);
+        const cachedResponse = await cache.match(event.request);
+
+        // Helper: start a network fetch that updates the cache on success.
+        // Lazily invoked so we don't fire a network request when the cache
+        // is already fresh — saves bandwidth and battery on mobile.
+        const startNetworkFetch = () =>
+          fetch(event.request)
+            .then(async (networkResponse) => {
+              if (networkResponse.ok) {
+                // Store with timestamp for freshness checking
+                const timestampedResponse = await addCacheTimestamp(networkResponse);
+                cache.put(event.request, timestampedResponse);
+                return networkResponse;
+              }
+              // Non-ok response (e.g. 5xx) — don't resolve with it for the race
+              // so the caller falls back to cachedResponse instead of showing an error page.
+              if (cachedResponse) return null;
+              return networkResponse;
+            })
+            .catch((err) => {
+              // Network failed - if we have cache, that's fine (returned below)
+              // If no cache, propagate the error
+              if (cachedResponse) return null;
+              throw err;
+            });
+
+        // If we have a fresh-enough cached response, return it immediately
+        // without firing a background fetch — React Query's own refetching
+        // will request fresh data when its stale time expires.
+        if (cachedResponse && isApiCacheFresh(cachedResponse)) {
+          return cachedResponse;
+        }
+
+        // From here the cache is either stale or missing — start the network fetch.
+        const fetchPromise = startNetworkFetch();
+
+        // If we have a stale cached response but network is slow, race them:
+        // Return whichever resolves first (cached immediately vs network)
+        if (cachedResponse) {
+          // Give network a brief window (2s) to respond, otherwise use stale cache
+          const networkResult = await Promise.race([
+            fetchPromise,
+            new Promise((resolve) => setTimeout(() => resolve(null), 2000)),
+          ]);
+          if (!networkResult) {
+            // Timeout won — keep the background fetch alive so the cache update
+            // can complete even after we return the stale cached response.
+            event.waitUntil(fetchPromise.catch(() => {}));
+          }
+          return networkResult || cachedResponse;
+        }
+
+        // No cache at all - must wait for network
+        return fetchPromise;
+      })()
+    );
+    return;
+  }
+
+  // Strategy 1: Cache-first for immutable hashed assets (JS/CSS bundles, fonts)
+  // These files contain content hashes in their names - they never change.
+  //
+  // Uses { ignoreVary: true } for cache matching because the same asset URL
+  // can be requested with different modes: <link rel="prefetch"> uses no-cors,
+  // <script type="module" crossorigin> and <link rel="modulepreload" crossorigin>
+  // use cors. Without ignoreVary, a cors-mode browser request won't match a
+  // no-cors cached entry (or vice versa), causing unnecessary network fetches
+  // even when the asset is already in the cache.
+  if (isImmutableAsset(url)) {
+    event.respondWith(
+      caches.open(IMMUTABLE_CACHE).then((cache) => {
+        return cache.match(event.request, { ignoreVary: true }).then((cachedResponse) => {
+          if (cachedResponse) {
+            return cachedResponse;
+          }
+          return fetch(event.request).then((networkResponse) => {
+            if (networkResponse.ok) {
+              cache.put(event.request, networkResponse.clone());
+            }
+            return networkResponse;
+          });
+        });
+      })
+    );
+    return;
+  }
+
+  // Strategy 1b: Cache-first for app code assets that are not immutable-hashed.
+  // This removes network-coupled startup delays for pre-React boot files when
+  // they are served without content hashes (for example, dev-like module paths).
+  if (isCodeAsset(url)) {
+    event.respondWith(
+      caches.open(CACHE_NAME).then((cache) =>
+        cache.match(event.request).then((cachedResponse) => {
+          const fetchPromise = fetch(event.request)
+            .then((networkResponse) => {
+              if (networkResponse.ok) {
+                cache.put(event.request, networkResponse.clone());
+              }
+              return networkResponse;
+            })
+            .catch(() => {
+              if (cachedResponse) return cachedResponse;
+              // Return a safe no-op response matching the asset type so the browser
+              // can parse it without errors, instead of a plain-text 503.
+              const dest = event.request.destination;
+              const urlPath = url.pathname;
+              if (dest === 'script' || urlPath.endsWith('.js') || urlPath.endsWith('.mjs')) {
+                return new Response('// offline', {
+                  status: 503,
+                  statusText: 'Service Unavailable',
+                  headers: { 'Content-Type': 'application/javascript' },
+                });
+              }
+              if (dest === 'style' || urlPath.endsWith('.css')) {
+                return new Response('/* offline */', {
+                  status: 503,
+                  statusText: 'Service Unavailable',
+                  headers: { 'Content-Type': 'text/css' },
+                });
+              }
+              return new Response('Service Unavailable', {
+                status: 503,
+                statusText: 'Service Unavailable',
+                headers: { 'Content-Type': 'text/plain' },
+              });
+            });
+
+          if (cachedResponse) {
+            event.waitUntil(fetchPromise.catch(() => {}));
+            return cachedResponse;
+          }
+
+          return fetchPromise;
+        })
+      )
+    );
+    return;
+  }
+
+  // Strategy 2: Stale-while-revalidate for static assets (images, audio)
+  // Serve cached version immediately, update cache in background.
+  if (isStaticAsset(url)) {
+    event.respondWith(
+      caches.open(CACHE_NAME).then((cache) => {
+        return cache.match(event.request).then((cachedResponse) => {
+          const fetchPromise = fetch(event.request)
+            .then((networkResponse) => {
+              if (networkResponse.ok && networkResponse.type === 'basic') {
+                cache.put(event.request, networkResponse.clone());
+              }
+              return networkResponse;
+            })
+            .catch(() => cachedResponse);
+
+          // Return cached version immediately, or wait for network
+          return cachedResponse || fetchPromise;
+        });
+      })
+    );
+    return;
+  }
+
+  // Strategy 3: Cache-first with background revalidation for navigation requests (HTML)
+  //
+  // The app shell (index.html) is a thin SPA entry point — its content rarely changes
+  // meaningfully between deploys because all JS/CSS bundles are content-hashed. Serving
+  // it from cache first eliminates the visible "reload flash" that occurs when the user
+  // switches back to the PWA and the old network-first strategy went to the network.
+  //
+  // The background revalidation ensures the cache stays fresh for the NEXT navigation,
+  // so new deployments are picked up within one page visit. Navigation Preload is used
+  // for the background fetch when available (no extra latency cost).
+  if (isNavigationRequest(event.request)) {
+    event.respondWith(
+      (async () => {
+        const cache = await caches.open(CACHE_NAME);
+        const cachedResponse = (await cache.match(event.request)) || (await cache.match('/'));
+
+        // Start a background fetch to update the cache for next time.
+        // Uses Navigation Preload if available (already in-flight, no extra cost).
+        const updateCache = async () => {
+          try {
+            const preloadResponse = event.preloadResponse && (await event.preloadResponse);
+            const freshResponse = preloadResponse || (await fetch(event.request));
+            if (freshResponse.ok && freshResponse.type === 'basic') {
+              await cache.put(event.request, freshResponse.clone());
+            }
+          } catch (_e) {
+            // Network failed — cache stays as-is, still fine for next visit
+          }
+        };
+
+        if (cachedResponse) {
+          // Serve from cache immediately — no network delay, no reload flash.
+          // Update cache in background for the next visit.
+          event.waitUntil(updateCache());
+          return cachedResponse;
+        }
+
+        // No cache yet (first visit) — must go to network
+        try {
+          const preloadResponse = event.preloadResponse && (await event.preloadResponse);
+          const response = preloadResponse || (await fetch(event.request));
+          if (response.ok && response.type === 'basic') {
+            // Use event.waitUntil to ensure the cache write completes before
+            // the service worker is terminated (mirrors the cached-path pattern).
+            event.waitUntil(cache.put(event.request, response.clone()));
+          }
+          return response;
+        } catch (_e) {
+          return new Response('Offline', { status: 503 });
+        }
+      })()
+    );
+    return;
+  }
+
+  // Strategy 4: Network-first for everything else
+  event.respondWith(
+    fetch(event.request)
+      .then((response) => {
+        if (response.ok && response.type === 'basic') {
+          const responseClone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(event.request, responseClone);
+          });
+        }
+        return response;
+      })
+      .catch(() => {
+        return caches.match(event.request);
+      })
+  );
+});
+
+// Periodic cleanup of the immutable cache to prevent unbounded growth
+// Remove entries older than 30 days when cache exceeds 200 entries
+self.addEventListener('message', (event) => {
+  if (event.data?.type === 'CACHE_CLEANUP') {
+    const MAX_ENTRIES = 200;
+    caches.open(IMMUTABLE_CACHE).then((cache) => {
+      cache.keys().then((keys) => {
+        if (keys.length > MAX_ENTRIES) {
+          // Delete oldest entries (first in, first out)
+          const deleteCount = keys.length - MAX_ENTRIES;
+          keys.slice(0, deleteCount).forEach((key) => cache.delete(key));
+        }
+      });
+    });
+
+    // Also clean up API cache
+    caches.open(API_CACHE).then((cache) => {
+      cache.keys().then((keys) => {
+        if (keys.length > API_CACHE_MAX_ENTRIES) {
+          const deleteCount = keys.length - API_CACHE_MAX_ENTRIES;
+          keys.slice(0, deleteCount).forEach((key) => cache.delete(key));
+        }
+      });
+    });
+  }
+
+  // Allow the main thread to explicitly activate a waiting service worker.
+  // This is used when the user acknowledges an "Update available" prompt,
+  // or during fresh page loads where it's safe to swap the SW.
+  if (event.data?.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+
+  // Enable/disable mobile caching mode.
+  // Sent from main thread after detecting the device is mobile.
+  // This allows the SW to apply mobile-specific caching strategies.
+  // Persisted to Cache Storage so it survives SW restarts on mobile.
+  if (event.data?.type === 'SET_MOBILE_MODE') {
+    mobileMode = !!event.data.enabled;
+    persistMobileMode(mobileMode);
+  }
+
+  // Warm the immutable cache with critical assets the app will need.
+  // Called from the main thread after the initial render is complete,
+  // so we don't compete with critical resource loading on mobile.
+  if (event.data?.type === 'PRECACHE_ASSETS' && Array.isArray(event.data.urls)) {
+    event.waitUntil(
+      caches.open(IMMUTABLE_CACHE).then((cache) => {
+        return Promise.all(
+          event.data.urls.map((url) => {
+            // Use ignoreVary so we find assets regardless of the request mode
+            // they were originally cached with (cors vs no-cors).
+            return cache.match(url, { ignoreVary: true }).then((existing) => {
+              if (!existing) {
+                // Fetch with cors mode to match how <script crossorigin> and
+                // <link rel="modulepreload" crossorigin> request these assets.
+                return fetch(url, { mode: 'cors', priority: 'low' })
+                  .then((response) => {
+                    if (response.ok) {
+                      return cache.put(url, response);
+                    }
+                  })
+                  .catch(() => {
+                    // Silently ignore precache failures
+                  });
+              }
+            });
+          })
+        );
+      })
+    );
+  }
+});
diff --git a/temp_repo/apps/ui/public/vercel.svg b/temp_repo/apps/ui/public/vercel.svg
new file mode 100644
index 0000000000000000000000000000000000000000..77053960334e2e34dc584dea8019925c3b4ccca9
--- /dev/null
+++ b/temp_repo/apps/ui/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/temp_repo/apps/ui/public/window.svg b/temp_repo/apps/ui/public/window.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b2b2a44f6ebc70c450043c05a002e7a93ba5d651
--- /dev/null
+++ b/temp_repo/apps/ui/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file
diff --git a/temp_repo/apps/ui/scripts/bump-version.mjs b/temp_repo/apps/ui/scripts/bump-version.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..ae4d95168222a2783113087e77bfcd8f5bff52d7
--- /dev/null
+++ b/temp_repo/apps/ui/scripts/bump-version.mjs
@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+/**
+ * Bumps the version in apps/ui/package.json and apps/server/package.json
+ * Usage: node scripts/bump-version.mjs [major|minor|patch]
+ * Example: node scripts/bump-version.mjs patch
+ */
+
+import { readFileSync, writeFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const bumpType = process.argv[2]?.toLowerCase();
+
+if (!bumpType || !['major', 'minor', 'patch'].includes(bumpType)) {
+  console.error('Error: Bump type argument is required');
+  console.error('Usage: node scripts/bump-version.mjs [major|minor|patch]');
+  console.error('Example: node scripts/bump-version.mjs patch');
+  process.exit(1);
+}
+
+const uiPackageJsonPath = join(__dirname, '..', 'package.json');
+const serverPackageJsonPath = join(__dirname, '..', '..', 'server', 'package.json');
+
+function bumpVersion(packageJsonPath, packageName) {
+  try {
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+    const oldVersion = packageJson.version;
+
+    // Parse version
+    const versionParts = oldVersion.split('.').map(Number);
+    if (versionParts.length !== 3) {
+      console.error(`Error: Invalid version format in ${packageName}: ${oldVersion}`);
+      console.error('Expected format: X.Y.Z (e.g., 1.2.3)');
+      process.exit(1);
+    }
+
+    // Bump version
+    let [major, minor, patch] = versionParts;
+
+    switch (bumpType) {
+      case 'major':
+        major += 1;
+        minor = 0;
+        patch = 0;
+        break;
+      case 'minor':
+        minor += 1;
+        patch = 0;
+        break;
+      case 'patch':
+        patch += 1;
+        break;
+    }
+
+    const newVersion = `${major}.${minor}.${patch}`;
+    packageJson.version = newVersion;
+
+    writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', 'utf8');
+
+    return newVersion;
+  } catch (error) {
+    console.error(`Error bumping version in ${packageName}: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+try {
+  // Bump UI package version
+  const uiOldVersion = JSON.parse(readFileSync(uiPackageJsonPath, 'utf8')).version;
+  const uiNewVersion = bumpVersion(uiPackageJsonPath, '@automaker/ui');
+
+  // Bump server package version (sync with UI)
+  const serverOldVersion = JSON.parse(readFileSync(serverPackageJsonPath, 'utf8')).version;
+  const serverNewVersion = bumpVersion(serverPackageJsonPath, '@automaker/server');
+
+  // Verify versions match
+  if (uiNewVersion !== serverNewVersion) {
+    console.error(`Error: Version mismatch! UI: ${uiNewVersion}, Server: ${serverNewVersion}`);
+    process.exit(1);
+  }
+
+  console.log(`✅ Bumped version from ${uiOldVersion} to ${uiNewVersion} (${bumpType})`);
+  console.log(`📦 Updated @automaker/ui: ${uiOldVersion} -> ${uiNewVersion}`);
+  console.log(`📦 Updated @automaker/server: ${serverOldVersion} -> ${serverNewVersion}`);
+  console.log(`📦 Version is now: ${uiNewVersion}`);
+} catch (error) {
+  console.error(`Error bumping version: ${error.message}`);
+  process.exit(1);
+}
diff --git a/temp_repo/apps/ui/scripts/kill-test-servers.mjs b/temp_repo/apps/ui/scripts/kill-test-servers.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..1dc1e33116e18eae0fc644cd8ab149906b61c38e
--- /dev/null
+++ b/temp_repo/apps/ui/scripts/kill-test-servers.mjs
@@ -0,0 +1,67 @@
+/**
+ * Kill any existing servers on test ports before running tests
+ * This ensures the test server starts fresh with the correct API key
+ */
+
+import { exec } from 'child_process';
+import { promisify } from 'util';
+
+const execAsync = promisify(exec);
+
+const SERVER_PORT = process.env.TEST_SERVER_PORT || 3108;
+const UI_PORT = process.env.TEST_PORT || 3107;
+// Match Playwright config semantics: only explicit opt-in should skip backend startup/cleanup.
+// VITE_SERVER_URL may exist in local shells and should not implicitly affect test behavior.
+const USE_EXTERNAL_SERVER = process.env.TEST_USE_EXTERNAL_BACKEND === 'true';
+console.log(`[KillTestServers] SERVER_PORT ${SERVER_PORT}`);
+console.log(`[KillTestServers] UI_PORT ${UI_PORT}`);
+async function killProcessOnPort(port) {
+  try {
+    const hasLsof = await execAsync('command -v lsof').then(
+      () => true,
+      () => false
+    );
+
+    if (hasLsof) {
+      const { stdout } = await execAsync(`lsof -ti:${port}`);
+      const pids = stdout.trim().split('\n').filter(Boolean);
+
+      if (pids.length > 0) {
+        console.log(`[KillTestServers] Found process(es) on port ${port}: ${pids.join(', ')}`);
+        for (const pid of pids) {
+          try {
+            await execAsync(`kill -9 ${pid}`);
+            console.log(`[KillTestServers] Killed process ${pid}`);
+          } catch (_error) {
+            // Process might have already exited
+          }
+        }
+        await new Promise((resolve) => setTimeout(resolve, 500));
+      }
+      return;
+    }
+
+    const hasFuser = await execAsync('command -v fuser').then(
+      () => true,
+      () => false
+    );
+    if (hasFuser) {
+      await execAsync(`fuser -k -9 ${port}/tcp`).catch(() => undefined);
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      return;
+    }
+  } catch (_error) {
+    // No process on port, which is fine
+  }
+}
+
+async function main() {
+  console.log('[KillTestServers] Checking for existing test servers...');
+  if (!USE_EXTERNAL_SERVER) {
+    await killProcessOnPort(Number(SERVER_PORT));
+  }
+  await killProcessOnPort(Number(UI_PORT));
+  console.log('[KillTestServers] Done');
+}
+
+main().catch(console.error);
diff --git a/temp_repo/apps/ui/scripts/prepare-server.mjs b/temp_repo/apps/ui/scripts/prepare-server.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..db92b385b2ae6b983420b972d7c97bbadb4cf7f9
--- /dev/null
+++ b/temp_repo/apps/ui/scripts/prepare-server.mjs
@@ -0,0 +1,154 @@
+#!/usr/bin/env node
+
+/**
+ * This script prepares the server for bundling with Electron.
+ * It copies the server dist and installs production dependencies
+ * in a way that works with npm workspaces.
+ */
+
+import { execSync } from 'child_process';
+import { cpSync, existsSync, mkdirSync, rmSync, writeFileSync, readFileSync, lstatSync } from 'fs';
+import { join, dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const APP_DIR = join(__dirname, '..');
+const SERVER_DIR = join(APP_DIR, '..', 'server');
+const LIBS_DIR = join(APP_DIR, '..', '..', 'libs');
+const BUNDLE_DIR = join(APP_DIR, 'server-bundle');
+
+// Local workspace packages that need to be bundled
+const LOCAL_PACKAGES = [
+  '@automaker/types',
+  '@automaker/utils',
+  '@automaker/prompts',
+  '@automaker/platform',
+  '@automaker/model-resolver',
+  '@automaker/dependency-resolver',
+  '@automaker/git-utils',
+];
+
+console.log('🔧 Preparing server for Electron bundling...\n');
+
+// Step 1: Clean up previous bundle
+if (existsSync(BUNDLE_DIR)) {
+  console.log('🗑️  Cleaning previous server-bundle...');
+  rmSync(BUNDLE_DIR, { recursive: true });
+}
+mkdirSync(BUNDLE_DIR, { recursive: true });
+
+// Step 2: Build the server TypeScript
+console.log('📦 Building server TypeScript...');
+execSync('npm run build', { cwd: SERVER_DIR, stdio: 'inherit' });
+
+// Step 3: Copy server dist
+console.log('📋 Copying server dist...');
+cpSync(join(SERVER_DIR, 'dist'), join(BUNDLE_DIR, 'dist'), { recursive: true });
+
+// Step 4: Copy local workspace packages
+console.log('📦 Copying local workspace packages...');
+const bundleLibsDir = join(BUNDLE_DIR, 'libs');
+mkdirSync(bundleLibsDir, { recursive: true });
+
+for (const pkgName of LOCAL_PACKAGES) {
+  const pkgDir = pkgName.replace('@automaker/', '');
+  const srcDir = join(LIBS_DIR, pkgDir);
+  const destDir = join(bundleLibsDir, pkgDir);
+
+  if (!existsSync(srcDir)) {
+    console.warn(`⚠️  Warning: Package ${pkgName} not found at ${srcDir}`);
+    continue;
+  }
+
+  mkdirSync(destDir, { recursive: true });
+
+  // Copy dist folder
+  if (existsSync(join(srcDir, 'dist'))) {
+    cpSync(join(srcDir, 'dist'), join(destDir, 'dist'), { recursive: true });
+  }
+
+  // Copy package.json
+  if (existsSync(join(srcDir, 'package.json'))) {
+    cpSync(join(srcDir, 'package.json'), join(destDir, 'package.json'));
+  }
+
+  console.log(`   ✓ ${pkgName}`);
+}
+
+// Step 5: Create a minimal package.json for the server
+console.log('📝 Creating server package.json...');
+const serverPkg = JSON.parse(readFileSync(join(SERVER_DIR, 'package.json'), 'utf-8'));
+
+// Replace local package versions with file: references
+const dependencies = { ...serverPkg.dependencies };
+for (const pkgName of LOCAL_PACKAGES) {
+  if (dependencies[pkgName]) {
+    const pkgDir = pkgName.replace('@automaker/', '');
+    dependencies[pkgName] = `file:libs/${pkgDir}`;
+  }
+}
+
+const bundlePkg = {
+  name: '@automaker/server-bundle',
+  version: serverPkg.version,
+  type: 'module',
+  main: 'dist/index.js',
+  dependencies,
+};
+
+writeFileSync(join(BUNDLE_DIR, 'package.json'), JSON.stringify(bundlePkg, null, 2));
+
+// Step 6: Install production dependencies
+console.log('📥 Installing server production dependencies...');
+execSync('npm install --omit=dev', {
+  cwd: BUNDLE_DIR,
+  stdio: 'inherit',
+  env: {
+    ...process.env,
+    // Prevent npm from using workspace resolution
+    npm_config_workspace: '',
+  },
+});
+
+// Step 6b: Replace symlinks for local packages with real copies
+// npm install creates symlinks for file: references, but these break when packaged by electron-builder
+console.log('🔗 Replacing symlinks with real directory copies...');
+const nodeModulesAutomaker = join(BUNDLE_DIR, 'node_modules', '@automaker');
+for (const pkgName of LOCAL_PACKAGES) {
+  const pkgDir = pkgName.replace('@automaker/', '');
+  const nmPkgPath = join(nodeModulesAutomaker, pkgDir);
+  try {
+    // lstatSync does not follow symlinks, allowing us to check for broken ones
+    if (lstatSync(nmPkgPath).isSymbolicLink()) {
+      const realPath = resolve(BUNDLE_DIR, 'libs', pkgDir);
+      rmSync(nmPkgPath);
+      cpSync(realPath, nmPkgPath, { recursive: true });
+      console.log(`   ✓ Replaced symlink: ${pkgName}`);
+    }
+  } catch (error) {
+    // If the path doesn't exist, lstatSync throws ENOENT. We can safely ignore this.
+    if (error.code !== 'ENOENT') {
+      throw error;
+    }
+  }
+}
+
+// Step 7: Rebuild native modules for current architecture
+// This is critical for modules like node-pty that have native bindings
+console.log('🔨 Rebuilding native modules for current architecture...');
+try {
+  execSync('npm rebuild', {
+    cwd: BUNDLE_DIR,
+    stdio: 'inherit',
+  });
+  console.log('✅ Native modules rebuilt successfully');
+} catch (error) {
+  console.warn(
+    '⚠️  Warning: Failed to rebuild native modules. Terminal functionality may not work.'
+  );
+  console.warn('   Error:', error.message);
+}
+
+console.log('\n✅ Server prepared for bundling at:', BUNDLE_DIR);
diff --git a/temp_repo/apps/ui/scripts/rebuild-server-natives.cjs b/temp_repo/apps/ui/scripts/rebuild-server-natives.cjs
new file mode 100644
index 0000000000000000000000000000000000000000..899be3675f6f9d7d1ffade23494cac7d9d3c9bf1
--- /dev/null
+++ b/temp_repo/apps/ui/scripts/rebuild-server-natives.cjs
@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+/**
+ * Electron-builder afterPack hook
+ * Rebuilds native modules in the server bundle for the target architecture
+ */
+
+const { exec } = require('child_process');
+const { promisify } = require('util');
+const path = require('path');
+
+const execAsync = promisify(exec);
+
+exports.default = async function (context) {
+  const { appOutDir, electronPlatformName, arch, packager } = context;
+  const electronVersion = packager.config.electronVersion;
+
+  // Convert arch to string if it's a number (electron-builder sometimes passes indices)
+  const archNames = ['ia32', 'x64', 'armv7l', 'arm64', 'universal'];
+  const archStr = typeof arch === 'number' ? archNames[arch] : arch;
+
+  console.log(`\n🔨 Rebuilding server native modules for ${electronPlatformName}-${archStr}...`);
+
+  // Path to server node_modules in the packaged app
+  let serverNodeModulesPath;
+  if (electronPlatformName === 'darwin') {
+    serverNodeModulesPath = path.join(
+      appOutDir,
+      `${packager.appInfo.productName}.app`,
+      'Contents',
+      'Resources',
+      'server',
+      'node_modules'
+    );
+  } else if (electronPlatformName === 'win32') {
+    serverNodeModulesPath = path.join(appOutDir, 'resources', 'server', 'node_modules');
+  } else {
+    serverNodeModulesPath = path.join(appOutDir, 'resources', 'server', 'node_modules');
+  }
+
+  try {
+    // Rebuild native modules for the target architecture
+    const rebuildCmd = `npx --yes @electron/rebuild --version=${electronVersion} --arch=${archStr} --force --module-dir="${serverNodeModulesPath}/.."`;
+
+    console.log(`   Command: ${rebuildCmd}`);
+
+    const { stdout, stderr } = await execAsync(rebuildCmd);
+    if (stdout) console.log(stdout);
+    if (stderr) console.error(stderr);
+
+    console.log(`✅ Server native modules rebuilt successfully for ${archStr}\n`);
+  } catch (error) {
+    console.error(`❌ Failed to rebuild server native modules:`, error.message);
+    // Don't fail the build, just warn
+  }
+};
diff --git a/temp_repo/apps/ui/scripts/rpm-after-install.sh b/temp_repo/apps/ui/scripts/rpm-after-install.sh
new file mode 100644
index 0000000000000000000000000000000000000000..ee4d95500f8c23881e7eb345930f4baa746f0358
--- /dev/null
+++ b/temp_repo/apps/ui/scripts/rpm-after-install.sh
@@ -0,0 +1,14 @@
+#!/bin/bash
+# Set the setuid bit on chrome-sandbox so Electron's sandbox works on systems
+# where unprivileged user namespaces are restricted (e.g. hardened kernels).
+# On Fedora/RHEL with standard kernel settings this is a safe no-op.
+chmod 4755 /opt/Automaker/chrome-sandbox 2>/dev/null || true
+
+# Refresh the GTK icon cache so GNOME/KDE picks up the newly installed icon
+# immediately without requiring a logout. The -f flag forces a rebuild even
+# if the cache is up-to-date; -t suppresses the mtime check warning.
+gtk-update-icon-cache -f -t /usr/share/icons/hicolor 2>/dev/null || true
+
+# Rebuild the desktop entry database so the app appears in the app launcher
+# straight after install.
+update-desktop-database /usr/share/applications 2>/dev/null || true
diff --git a/temp_repo/apps/ui/scripts/setup-e2e-fixtures.mjs b/temp_repo/apps/ui/scripts/setup-e2e-fixtures.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..3a1becbe08d99fd421b07b5039295df00deb2be9
--- /dev/null
+++ b/temp_repo/apps/ui/scripts/setup-e2e-fixtures.mjs
@@ -0,0 +1,170 @@
+#!/usr/bin/env node
+
+/**
+ * Setup script for E2E test fixtures
+ * Creates the necessary test fixture directories and files before running Playwright tests
+ * Also resets the server's settings.json to a known state for test isolation
+ */
+
+import * as fs from 'fs';
+import * as os from 'os';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Resolve workspace root (apps/ui/scripts -> workspace root)
+const WORKSPACE_ROOT = path.resolve(__dirname, '../../..');
+const FIXTURE_PATH = path.join(WORKSPACE_ROOT, 'test/fixtures/projectA');
+const SPEC_FILE_PATH = path.join(FIXTURE_PATH, '.automaker/app_spec.txt');
+const CONTEXT_DIR = path.join(FIXTURE_PATH, '.automaker/context');
+const CONTEXT_METADATA_PATH = path.join(CONTEXT_DIR, 'context-metadata.json');
+const SERVER_SETTINGS_PATH = path.join(WORKSPACE_ROOT, 'apps/server/data/settings.json');
+// Create a shared test workspace directory that will be used as default for project creation
+const TEST_WORKSPACE_DIR = path.join(os.tmpdir(), 'automaker-e2e-workspace');
+
+const SPEC_CONTENT = `<app_spec>
+  <name>Test Project A</name>
+  <description>A test fixture project for Playwright testing</description>
+  <tech_stack>
+    <item>TypeScript</item>
+    <item>React</item>
+  </tech_stack>
+</app_spec>
+`;
+
+// Clean settings.json for E2E tests - no current project so localStorage can control state
+const E2E_SETTINGS = {
+  version: 4,
+  setupComplete: true,
+  isFirstRun: false,
+  skipClaudeSetup: false,
+  theme: 'dark',
+  sidebarOpen: true,
+  chatHistoryOpen: false,
+  maxConcurrency: 3,
+  defaultSkipTests: true,
+  enableDependencyBlocking: true,
+  skipVerificationInAutoMode: false,
+  useWorktrees: true,
+  defaultPlanningMode: 'skip',
+  defaultRequirePlanApproval: false,
+  muteDoneSound: false,
+  phaseModels: {
+    enhancementModel: { model: 'sonnet' },
+    fileDescriptionModel: { model: 'haiku' },
+    imageDescriptionModel: { model: 'haiku' },
+    validationModel: { model: 'sonnet' },
+    specGenerationModel: { model: 'opus' },
+    featureGenerationModel: { model: 'sonnet' },
+    backlogPlanningModel: { model: 'sonnet' },
+    projectAnalysisModel: { model: 'sonnet' },
+    ideationModel: { model: 'sonnet' },
+  },
+  enhancementModel: 'sonnet',
+  validationModel: 'opus',
+  enabledCursorModels: ['auto', 'composer-1'],
+  cursorDefaultModel: 'auto',
+  keyboardShortcuts: {
+    board: 'K',
+    agent: 'A',
+    spec: 'D',
+    context: 'C',
+    settings: 'S',
+    terminal: 'T',
+    toggleSidebar: '`',
+    addFeature: 'N',
+    addContextFile: 'N',
+    startNext: 'G',
+    newSession: 'N',
+    openProject: 'O',
+    projectPicker: 'P',
+    cyclePrevProject: 'Q',
+    cycleNextProject: 'E',
+    splitTerminalRight: 'Alt+D',
+    splitTerminalDown: 'Alt+S',
+    closeTerminal: 'Alt+W',
+    tools: 'T',
+    ideation: 'I',
+    githubIssues: 'G',
+    githubPrs: 'R',
+    newTerminalTab: 'Alt+T',
+  },
+  // Default test project using the fixture path - tests can override via route mocking if needed
+  projects: [
+    {
+      id: 'e2e-default-project',
+      name: 'E2E Test Project',
+      path: FIXTURE_PATH,
+      lastOpened: new Date().toISOString(),
+    },
+  ],
+  trashedProjects: [],
+  currentProjectId: 'e2e-default-project',
+  projectHistory: [],
+  projectHistoryIndex: 0,
+  lastProjectDir: TEST_WORKSPACE_DIR,
+  recentFolders: [],
+  worktreePanelCollapsed: false,
+  lastSelectedSessionByProject: {},
+  autoLoadClaudeMd: false,
+  skipSandboxWarning: true,
+  codexAutoLoadAgents: false,
+  codexSandboxMode: 'workspace-write',
+  codexApprovalPolicy: 'on-request',
+  codexEnableWebSearch: false,
+  codexEnableImages: true,
+  codexAdditionalDirs: [],
+  mcpServers: [],
+  enableSandboxMode: false,
+  mcpAutoApproveTools: true,
+  mcpUnrestrictedTools: true,
+  promptCustomization: {},
+  localStorageMigrated: true,
+};
+
+function setupFixtures() {
+  console.log('Setting up E2E test fixtures...');
+  console.log(`Workspace root: ${WORKSPACE_ROOT}`);
+  console.log(`Fixture path: ${FIXTURE_PATH}`);
+  console.log(`Test workspace dir: ${TEST_WORKSPACE_DIR}`);
+
+  // Create test workspace directory for project creation tests
+  if (!fs.existsSync(TEST_WORKSPACE_DIR)) {
+    fs.mkdirSync(TEST_WORKSPACE_DIR, { recursive: true });
+    console.log(`Created test workspace directory: ${TEST_WORKSPACE_DIR}`);
+  }
+
+  // Create fixture directory
+  const specDir = path.dirname(SPEC_FILE_PATH);
+  if (!fs.existsSync(specDir)) {
+    fs.mkdirSync(specDir, { recursive: true });
+    console.log(`Created directory: ${specDir}`);
+  }
+
+  // Create app_spec.txt
+  fs.writeFileSync(SPEC_FILE_PATH, SPEC_CONTENT);
+  console.log(`Created fixture file: ${SPEC_FILE_PATH}`);
+
+  // Create .automaker/context and context-metadata.json (expected by context view / FS read)
+  if (!fs.existsSync(CONTEXT_DIR)) {
+    fs.mkdirSync(CONTEXT_DIR, { recursive: true });
+    console.log(`Created directory: ${CONTEXT_DIR}`);
+  }
+  fs.writeFileSync(CONTEXT_METADATA_PATH, JSON.stringify({ files: {} }, null, 2));
+  console.log(`Created fixture file: ${CONTEXT_METADATA_PATH}`);
+
+  // Reset server settings.json to a clean state for E2E tests
+  const settingsDir = path.dirname(SERVER_SETTINGS_PATH);
+  if (!fs.existsSync(settingsDir)) {
+    fs.mkdirSync(settingsDir, { recursive: true });
+    console.log(`Created directory: ${settingsDir}`);
+  }
+  fs.writeFileSync(SERVER_SETTINGS_PATH, JSON.stringify(E2E_SETTINGS, null, 2));
+  console.log(`Reset server settings: ${SERVER_SETTINGS_PATH}`);
+
+  console.log('E2E test fixtures setup complete!');
+}
+
+setupFixtures();
diff --git a/temp_repo/apps/ui/scripts/update-version.mjs b/temp_repo/apps/ui/scripts/update-version.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..ad6d47b94f73340a9993c496920405f60cb52cd7
--- /dev/null
+++ b/temp_repo/apps/ui/scripts/update-version.mjs
@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+/**
+ * Updates the version in apps/ui/package.json
+ * Usage: node scripts/update-version.mjs <version>
+ * Example: node scripts/update-version.mjs 1.2.3
+ */
+
+import { readFileSync, writeFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const version = process.argv[2];
+
+if (!version) {
+  console.error('Error: Version argument is required');
+  console.error('Usage: node scripts/update-version.mjs <version>');
+  process.exit(1);
+}
+
+// Remove 'v' prefix if present (e.g., "v1.2.3" -> "1.2.3")
+const cleanVersion = version.startsWith('v') ? version.slice(1) : version;
+
+// Validate version format (basic semver check)
+if (!/^\d+\.\d+\.\d+/.test(cleanVersion)) {
+  console.error(`Error: Invalid version format: ${cleanVersion}`);
+  console.error('Expected format: X.Y.Z (e.g., 1.2.3)');
+  process.exit(1);
+}
+
+const packageJsonPath = join(__dirname, '..', 'package.json');
+
+try {
+  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+  const oldVersion = packageJson.version;
+  packageJson.version = cleanVersion;
+
+  writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', 'utf8');
+
+  console.log(`Updated version from ${oldVersion} to ${cleanVersion}`);
+} catch (error) {
+  console.error(`Error updating version: ${error.message}`);
+  process.exit(1);
+}
diff --git a/temp_repo/apps/ui/src/app.tsx b/temp_repo/apps/ui/src/app.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a87f57e5f233486cb9b01aa68ff4199bacb50f25
--- /dev/null
+++ b/temp_repo/apps/ui/src/app.tsx
@@ -0,0 +1,136 @@
+import { useState, useCallback, useEffect } from 'react';
+import { RouterProvider } from '@tanstack/react-router';
+import { createLogger } from '@automaker/utils/logger';
+import { router } from './utils/router';
+import { SplashScreen } from './components/splash-screen';
+import { useSettingsSync } from './hooks/use-settings-sync';
+import { useCursorStatusInit } from './hooks/use-cursor-status-init';
+import { useProviderAuthInit } from './hooks/use-provider-auth-init';
+import { useMobileVisibility, useMobileOnlineManager } from './hooks/use-mobile-visibility';
+import { useAppStore } from './store/app-store';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import './styles/global.css';
+import './styles/theme-imports';
+import './styles/font-imports';
+import { loadUserFonts, preloadAllFonts } from './styles/font-imports';
+
+const logger = createLogger('App');
+
+// Key for localStorage to persist splash screen preference
+const DISABLE_SPLASH_KEY = 'automaker-disable-splash';
+
+export default function App() {
+  const disableSplashScreen = useAppStore((state) => state.disableSplashScreen);
+
+  const [showSplash, setShowSplash] = useState(() => {
+    // Check localStorage for user preference (available synchronously)
+    const savedPreference = localStorage.getItem(DISABLE_SPLASH_KEY);
+    if (savedPreference === 'true') {
+      return false;
+    }
+    // Only show splash once per browser session.
+    // Uses localStorage (not sessionStorage) so tab restores after discard
+    // don't replay the splash — sessionStorage is cleared when a tab is discarded.
+    // The flag is written on splash complete and cleared when the tab is fully closed
+    // (via the 'pagehide' + persisted=false event, which fires on true tab close but
+    // not on discard/background). This gives "once per actual session" semantics.
+    if (localStorage.getItem('automaker-splash-shown-session')) {
+      return false;
+    }
+    return true;
+  });
+
+  // Sync the disableSplashScreen setting to localStorage for fast access on next startup
+  useEffect(() => {
+    localStorage.setItem(DISABLE_SPLASH_KEY, String(disableSplashScreen));
+  }, [disableSplashScreen]);
+
+  // Load user-selected custom fonts on startup, then preload remaining fonts during idle time.
+  // Uses requestIdleCallback where available for better mobile performance - this ensures
+  // font loading doesn't compete with critical rendering and input handling.
+  useEffect(() => {
+    // Immediately load any fonts the user has configured
+    loadUserFonts();
+
+    // After the app is fully interactive, preload remaining fonts
+    // so font picker previews work instantly.
+    // Use requestIdleCallback on mobile for better scheduling - it yields to
+    // user interactions and critical rendering, unlike setTimeout which may fire
+    // during a busy frame and cause jank.
+    const schedulePreload =
+      typeof requestIdleCallback !== 'undefined'
+        ? () => requestIdleCallback(() => preloadAllFonts(), { timeout: 5000 })
+        : () => setTimeout(() => preloadAllFonts(), 3000);
+
+    const timer = setTimeout(() => {
+      schedulePreload();
+    }, 2000); // Wait 2s after mount, then use idle callback for the actual loading
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Clear accumulated PerformanceMeasure entries to prevent memory leak in dev mode
+  // React's internal scheduler creates performance marks/measures that accumulate without cleanup
+  useEffect(() => {
+    if (import.meta.env.DEV) {
+      const clearPerfEntries = () => {
+        // Check if window.performance is available before calling its methods
+        if (window.performance) {
+          window.performance.clearMarks();
+          window.performance.clearMeasures();
+        }
+      };
+      const interval = setInterval(clearPerfEntries, 5000);
+      return () => clearInterval(interval);
+    }
+  }, []);
+
+  // Settings are now loaded in __root.tsx after successful session verification
+  // This ensures a unified flow: verify session → load settings → redirect
+  // We no longer block router rendering here - settings loading happens in __root.tsx
+
+  // Sync settings changes back to server (API-first persistence)
+  const settingsSyncState = useSettingsSync();
+  if (settingsSyncState.error) {
+    logger.error('Settings sync error:', settingsSyncState.error);
+  }
+
+  // Initialize Cursor CLI status at startup
+  useCursorStatusInit();
+
+  // Initialize Provider auth status at startup (for Claude/Codex usage display)
+  useProviderAuthInit();
+
+  // Mobile-specific: Manage React Query focus/online state based on page visibility.
+  // Prevents the "blank screen + reload" cycle caused by aggressive refetching
+  // when the mobile PWA is switched away from and back to.
+  useMobileVisibility();
+  useMobileOnlineManager();
+
+  const handleSplashComplete = useCallback(() => {
+    // Mark splash as shown for this session (survives tab discard/restore)
+    localStorage.setItem('automaker-splash-shown-session', 'true');
+    setShowSplash(false);
+  }, []);
+
+  // Clear the splash-shown flag when the tab is truly closed (not just discarded).
+  // `pagehide` with persisted=false fires on real navigation/close but NOT on discard,
+  // so discarded tabs that are restored skip the splash while true re-opens show it.
+  useEffect(() => {
+    const handlePageHide = (e: PageTransitionEvent) => {
+      if (!e.persisted) {
+        // Tab is being closed or navigating away (not going into bfcache)
+        localStorage.removeItem('automaker-splash-shown-session');
+      }
+    };
+    window.addEventListener('pagehide', handlePageHide);
+    return () => window.removeEventListener('pagehide', handlePageHide);
+  }, []);
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <RouterProvider router={router} />
+      {showSplash && !disableSplashScreen && <SplashScreen onComplete={handleSplashComplete} />}
+    </TooltipProvider>
+  );
+}
diff --git a/temp_repo/apps/ui/src/assets/fonts/zed/zed-fonts.css b/temp_repo/apps/ui/src/assets/fonts/zed/zed-fonts.css
new file mode 100644
index 0000000000000000000000000000000000000000..1b62a128bf5a88e5cc595321fa94334692899105
--- /dev/null
+++ b/temp_repo/apps/ui/src/assets/fonts/zed/zed-fonts.css
@@ -0,0 +1,67 @@
+/* Zed Fonts - https://github.com/zed-industries/zed-fonts */
+
+/* Zed Sans - UI Font */
+@font-face {
+  font-family: 'Zed Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./zed-sans-extended.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Zed Sans';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./zed-sans-extendeditalic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Zed Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./zed-sans-extendedbold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Zed Sans';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./zed-sans-extendedbolditalic.ttf') format('truetype');
+}
+
+/* Zed Mono - Code Font */
+@font-face {
+  font-family: 'Zed Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./zed-mono-extended.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Zed Mono';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./zed-mono-extendeditalic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Zed Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./zed-mono-extendedbold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Zed Mono';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./zed-mono-extendedbolditalic.ttf') format('truetype');
+}
diff --git a/temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extended.ttf b/temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extended.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..e585d19c6b32ad8d3e34c6deb44354373007a3d3
--- /dev/null
+++ b/temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extended.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3c6dc71ef173de2b44065487e60dcf47d5afc1fad888b41fc4bb037c53210352
+size 3291724
diff --git a/temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extendedbold.ttf b/temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extendedbold.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..af8f687130a12dce5e3f1ccef456c50f13e2febe
--- /dev/null
+++ b/temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extendedbold.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:072953e1cedddae4eccdfec24421e763e99130a1727dc5aff058d7bd4986b7aa
+size 3275296
diff --git a/temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extendedbolditalic.ttf b/temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extendedbolditalic.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..910411be1fe8db5daceb91151e61838164326578
--- /dev/null
+++ b/temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extendedbolditalic.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:61e001f1356fadf203466f40112d6de91281bd45175bc16640314319b73a0a1f
+size 3459752
diff --git a/temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extendeditalic.ttf b/temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extendeditalic.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..a8fffd402acef54b8379c6e3249c761f3db23166
--- /dev/null
+++ b/temp_repo/apps/ui/src/assets/fonts/zed/zed-mono-extendeditalic.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fa4376b481327d63a9a83d5f19365edcc325e58439f7633bdc3c3ca58c5c2184
+size 3482500
diff --git a/temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extended.ttf b/temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extended.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..dee8dad1d51182e9907fc281c2cf4ed3f0528749
--- /dev/null
+++ b/temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extended.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7307ee01d2de6ecc403c7c4198e059f2b47ff70efdb8734b40281ec3025fcec6
+size 3881072
diff --git a/temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extendedbold.ttf b/temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extendedbold.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..c83bb738fddb4a2f551eb0cee0d4cfbac118ecec
--- /dev/null
+++ b/temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extendedbold.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5897556752615b0a6168f0a56a8dea86737554dd22c0f72090f576ee150aa7cc
+size 3861168
diff --git a/temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extendedbolditalic.ttf b/temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extendedbolditalic.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..1819b44063187352f29112d5ca01393139f72037
--- /dev/null
+++ b/temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extendedbolditalic.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:754fa0f3f0a436f31c1416eebbb902f6bbae6fc7d0485db316d8e634238e195d
+size 4133220
diff --git a/temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extendeditalic.ttf b/temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extendeditalic.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..6a50a97f8ff57950a651e0e8e1c2624fd9a762b4
--- /dev/null
+++ b/temp_repo/apps/ui/src/assets/fonts/zed/zed-sans-extendeditalic.ttf
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6fc98d352ec79fea5352182b1f1d475469ea6739401fbbca542b22a5592b4783
+size 4143104
diff --git a/temp_repo/apps/ui/src/assets/icons/gemini-icon.svg b/temp_repo/apps/ui/src/assets/icons/gemini-icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4545c8331f9ea657a3b00596b26b60b5487ab323
--- /dev/null
+++ b/temp_repo/apps/ui/src/assets/icons/gemini-icon.svg
@@ -0,0 +1,10 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 28C14 26.0633 13.6267 24.2433 12.88 22.54C12.1567 20.8367 11.165 19.355 9.905 18.095C8.645 16.835 7.16333 15.8433 5.46 15.12C3.75667 14.3733 1.93667 14 0 14C1.93667 14 3.75667 13.6383 5.46 12.915C7.16333 12.1683 8.645 11.165 9.905 9.905C11.165 8.645 12.1567 7.16333 12.88 5.46C13.6267 3.75667 14 1.93667 14 0C14 1.93667 14.3617 3.75667 15.085 5.46C15.8317 7.16333 16.835 8.645 18.095 9.905C19.355 11.165 20.8367 12.1683 22.54 12.915C24.2433 13.6383 26.0633 14 28 14C26.0633 14 24.2433 14.3733 22.54 15.12C20.8367 15.8433 19.355 16.835 18.095 18.095C16.835 19.355 15.8317 20.8367 15.085 22.54C14.3617 24.2433 14 26.0633 14 28Z" fill="url(#paint0_radial_16771_53212)"/>
+<defs>
+<radialGradient id="paint0_radial_16771_53212" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(2.77876 11.3795) rotate(18.6832) scale(29.8025 238.737)">
+<stop offset="0.0671246" stop-color="#9168C0"/>
+<stop offset="0.342551" stop-color="#5684D1"/>
+<stop offset="0.672076" stop-color="#1BA1E3"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/temp_repo/apps/ui/src/components/claude-usage-popover.tsx b/temp_repo/apps/ui/src/components/claude-usage-popover.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5beaac94428d533eb11ad52eb7be6a9c90c5fb30
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/claude-usage-popover.tsx
@@ -0,0 +1,263 @@
+/**
+ * Claude Usage Popover
+ *
+ * Displays Claude API usage statistics using React Query for data fetching.
+ */
+
+import { useState, useMemo } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import { RefreshCw, AlertTriangle, CheckCircle, XCircle, Clock, ExternalLink } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { useSetupStore } from '@/store/setup-store';
+import { useClaudeUsage } from '@/hooks/queries';
+
+export function ClaudeUsagePopover() {
+  const claudeAuthStatus = useSetupStore((state) => state.claudeAuthStatus);
+  const [open, setOpen] = useState(false);
+
+  // Check if CLI is verified/authenticated
+  const isCliVerified =
+    claudeAuthStatus?.authenticated && claudeAuthStatus?.method === 'cli_authenticated';
+
+  // Use React Query for usage data
+  const {
+    data: claudeUsage,
+    isLoading,
+    isFetching,
+    error,
+    dataUpdatedAt,
+    refetch,
+  } = useClaudeUsage(isCliVerified);
+
+  // Check if data is stale (older than 2 minutes)
+  const isStale = useMemo(() => {
+    return !dataUpdatedAt || Date.now() - dataUpdatedAt > 2 * 60 * 1000;
+  }, [dataUpdatedAt]);
+
+  // Derived status color/icon helper
+  const getStatusInfo = (percentage: number) => {
+    if (percentage >= 75) return { color: 'text-red-500', icon: XCircle, bg: 'bg-red-500' };
+    if (percentage >= 50)
+      return { color: 'text-orange-500', icon: AlertTriangle, bg: 'bg-orange-500' };
+    return { color: 'text-green-500', icon: CheckCircle, bg: 'bg-green-500' };
+  };
+
+  // Helper component for the progress bar
+  const ProgressBar = ({ percentage, colorClass }: { percentage: number; colorClass: string }) => (
+    <div className="h-2 w-full bg-secondary/50 rounded-full overflow-hidden">
+      <div
+        className={cn('h-full transition-all duration-500', colorClass)}
+        style={{ width: `${Math.min(percentage, 100)}%` }}
+      />
+    </div>
+  );
+
+  const UsageCard = ({
+    title,
+    subtitle,
+    percentage,
+    resetText,
+    isPrimary = false,
+    stale = false,
+  }: {
+    title: string;
+    subtitle: string;
+    percentage: number;
+    resetText?: string;
+    isPrimary?: boolean;
+    stale?: boolean;
+  }) => {
+    const isValidPercentage =
+      typeof percentage === 'number' && !isNaN(percentage) && isFinite(percentage);
+    const safePercentage = isValidPercentage ? percentage : 0;
+
+    const status = getStatusInfo(safePercentage);
+    const StatusIcon = status.icon;
+
+    return (
+      <div
+        className={cn(
+          'rounded-xl border bg-card/50 p-4 transition-opacity',
+          isPrimary ? 'border-border/60 shadow-sm' : 'border-border/40',
+          (stale || !isValidPercentage) && 'opacity-50'
+        )}
+      >
+        <div className="flex items-start justify-between mb-3">
+          <div>
+            <h4 className={cn('font-semibold', isPrimary ? 'text-sm' : 'text-xs')}>{title}</h4>
+            <p className="text-[10px] text-muted-foreground">{subtitle}</p>
+          </div>
+          {isValidPercentage ? (
+            <div className="flex items-center gap-1.5">
+              <StatusIcon className={cn('w-3.5 h-3.5', status.color)} />
+              <span
+                className={cn(
+                  'font-mono font-bold',
+                  status.color,
+                  isPrimary ? 'text-base' : 'text-sm'
+                )}
+              >
+                {Math.round(safePercentage)}%
+              </span>
+            </div>
+          ) : (
+            <span className="text-xs text-muted-foreground">N/A</span>
+          )}
+        </div>
+        <ProgressBar
+          percentage={safePercentage}
+          colorClass={isValidPercentage ? status.bg : 'bg-muted-foreground/30'}
+        />
+        {resetText && (
+          <div className="mt-2 flex justify-end">
+            <p className="text-xs text-muted-foreground flex items-center gap-1">
+              {title === 'Session Usage' && <Clock className="w-3 h-3" />}
+              {resetText}
+            </p>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  // Header Button
+  const maxPercentage = claudeUsage
+    ? Math.max(claudeUsage.sessionPercentage || 0, claudeUsage.weeklyPercentage || 0)
+    : 0;
+
+  const getProgressBarColor = (percentage: number) => {
+    if (percentage >= 80) return 'bg-red-500';
+    if (percentage >= 50) return 'bg-yellow-500';
+    return 'bg-green-500';
+  };
+
+  const trigger = (
+    <Button variant="ghost" size="sm" className="h-9 gap-3 bg-secondary border border-border px-3">
+      <span className="text-sm font-medium">Usage</span>
+      {claudeUsage && (
+        <div
+          className={cn(
+            'h-1.5 w-16 bg-muted-foreground/20 rounded-full overflow-hidden transition-opacity',
+            isStale && 'opacity-60'
+          )}
+        >
+          <div
+            className={cn('h-full transition-all duration-500', getProgressBarColor(maxPercentage))}
+            style={{ width: `${Math.min(maxPercentage, 100)}%` }}
+          />
+        </div>
+      )}
+    </Button>
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent
+        className="w-80 p-0 overflow-hidden bg-background/95 backdrop-blur-xl border-border shadow-2xl"
+        align="end"
+        sideOffset={8}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border/50 bg-secondary/10">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-semibold">Claude Usage</span>
+          </div>
+          {error && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn('h-6 w-6', isFetching && 'opacity-80')}
+              onClick={() => !isFetching && refetch()}
+            >
+              <RefreshCw className={cn('w-3.5 h-3.5', isFetching && 'animate-spin')} />
+            </Button>
+          )}
+        </div>
+
+        {/* Content */}
+        <div className="p-4 space-y-4">
+          {error ? (
+            <div className="flex flex-col items-center justify-center py-6 text-center space-y-3">
+              <AlertTriangle className="w-8 h-8 text-yellow-500/80" />
+              <div className="space-y-1 flex flex-col items-center">
+                <p className="text-sm font-medium">
+                  {error instanceof Error ? error.message : 'Failed to fetch usage'}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  Make sure Claude CLI is installed and authenticated via{' '}
+                  <code className="font-mono bg-muted px-1 rounded">claude login</code>
+                </p>
+              </div>
+            </div>
+          ) : isLoading || !claudeUsage ? (
+            <div className="flex flex-col items-center justify-center py-8 space-y-2">
+              <Spinner size="lg" />
+              <p className="text-xs text-muted-foreground">Loading usage data...</p>
+            </div>
+          ) : (
+            <>
+              {/* Primary Card */}
+              <UsageCard
+                title="Session Usage"
+                subtitle="5-hour rolling window"
+                percentage={claudeUsage.sessionPercentage}
+                resetText={claudeUsage.sessionResetText}
+                isPrimary={true}
+                stale={isStale}
+              />
+
+              {/* Secondary Cards Grid */}
+              <div className="grid grid-cols-2 gap-3">
+                <UsageCard
+                  title="Weekly"
+                  subtitle="All models"
+                  percentage={claudeUsage.weeklyPercentage}
+                  resetText={claudeUsage.weeklyResetText}
+                  stale={isStale}
+                />
+                <UsageCard
+                  title="Sonnet"
+                  subtitle="Weekly"
+                  percentage={claudeUsage.sonnetWeeklyPercentage}
+                  resetText={claudeUsage.sonnetResetText}
+                  stale={isStale}
+                />
+              </div>
+
+              {/* Extra Usage / Cost */}
+              {claudeUsage.costLimit && claudeUsage.costLimit > 0 && (
+                <UsageCard
+                  title="Extra Usage"
+                  subtitle={`${claudeUsage.costUsed ?? 0} / ${claudeUsage.costLimit} ${claudeUsage.costCurrency ?? ''}`}
+                  percentage={
+                    claudeUsage.costLimit > 0
+                      ? ((claudeUsage.costUsed ?? 0) / claudeUsage.costLimit) * 100
+                      : 0
+                  }
+                  stale={isStale}
+                />
+              )}
+            </>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-4 py-2 bg-secondary/10 border-t border-border/50">
+          <a
+            href="https://status.claude.com"
+            target="_blank"
+            rel="noreferrer"
+            className="text-[10px] text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
+          >
+            Claude Status <ExternalLink className="w-2.5 h-2.5" />
+          </a>
+
+          <span className="text-[10px] text-muted-foreground">Updates every minute</span>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/codex-usage-popover.tsx b/temp_repo/apps/ui/src/components/codex-usage-popover.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d4b55506f5cf2c128a0bae1b2d1a4874d711ba27
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/codex-usage-popover.tsx
@@ -0,0 +1,388 @@
+import { useState, useMemo } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import { RefreshCw, AlertTriangle, CheckCircle, XCircle, Clock, ExternalLink } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { useSetupStore } from '@/store/setup-store';
+import { useCodexUsage } from '@/hooks/queries';
+import { getExpectedCodexPacePercentage, getPaceStatusLabel } from '@/store/utils/usage-utils';
+
+// Error codes for distinguishing failure modes
+const ERROR_CODES = {
+  API_BRIDGE_UNAVAILABLE: 'API_BRIDGE_UNAVAILABLE',
+  AUTH_ERROR: 'AUTH_ERROR',
+  NOT_AVAILABLE: 'NOT_AVAILABLE',
+  UNKNOWN: 'UNKNOWN',
+} as const;
+
+type ErrorCode = (typeof ERROR_CODES)[keyof typeof ERROR_CODES];
+
+type UsageError = {
+  code: ErrorCode;
+  message: string;
+};
+
+// Helper to format reset time
+function formatResetTime(unixTimestamp: number): string {
+  const date = new Date(unixTimestamp * 1000);
+  const now = new Date();
+  const diff = date.getTime() - now.getTime();
+
+  // If less than 1 hour, show minutes
+  if (diff < 3600000) {
+    const mins = Math.ceil(diff / 60000);
+    return `Resets in ${mins}m`;
+  }
+
+  // If less than 24 hours, show hours and minutes
+  if (diff < 86400000) {
+    const hours = Math.floor(diff / 3600000);
+    const mins = Math.ceil((diff % 3600000) / 60000);
+    return `Resets in ${hours}h ${mins > 0 ? `${mins}m` : ''}`;
+  }
+
+  // Otherwise show date
+  return `Resets ${date.toLocaleDateString()} at ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+}
+
+// Helper to format window duration
+function getWindowLabel(durationMins: number): { title: string; subtitle: string } {
+  if (durationMins < 60) {
+    return { title: `${durationMins}min Window`, subtitle: 'Rate limit' };
+  }
+  if (durationMins < 1440) {
+    const hours = Math.round(durationMins / 60);
+    return { title: `${hours}h Window`, subtitle: 'Rate limit' };
+  }
+  const days = Math.round(durationMins / 1440);
+  return { title: `${days}d Window`, subtitle: 'Rate limit' };
+}
+
+export function CodexUsagePopover() {
+  const codexAuthStatus = useSetupStore((state) => state.codexAuthStatus);
+  const [open, setOpen] = useState(false);
+
+  // Check if Codex is authenticated
+  const isCodexAuthenticated = codexAuthStatus?.authenticated;
+
+  // Use React Query for data fetching with automatic polling
+  const {
+    data: codexUsage,
+    isFetching,
+    error: queryError,
+    dataUpdatedAt,
+    refetch,
+  } = useCodexUsage(isCodexAuthenticated);
+
+  // Check if data is stale (older than 2 minutes)
+  const isStale = useMemo(() => {
+    return !dataUpdatedAt || Date.now() - dataUpdatedAt > 2 * 60 * 1000;
+  }, [dataUpdatedAt]);
+
+  // Convert query error to UsageError format for backward compatibility
+  const error = useMemo((): UsageError | null => {
+    if (!queryError) return null;
+    const message = queryError instanceof Error ? queryError.message : String(queryError);
+    if (message.includes('not available') || message.includes('does not provide')) {
+      return { code: ERROR_CODES.NOT_AVAILABLE, message };
+    }
+    if (message.includes('bridge') || message.includes('API')) {
+      return { code: ERROR_CODES.API_BRIDGE_UNAVAILABLE, message };
+    }
+    return { code: ERROR_CODES.AUTH_ERROR, message };
+  }, [queryError]);
+
+  // Derived status color/icon helper
+  const getStatusInfo = (percentage: number) => {
+    if (percentage >= 75) return { color: 'text-red-500', icon: XCircle, bg: 'bg-red-500' };
+    if (percentage >= 50)
+      return { color: 'text-orange-500', icon: AlertTriangle, bg: 'bg-orange-500' };
+    return { color: 'text-green-500', icon: CheckCircle, bg: 'bg-green-500' };
+  };
+
+  // Helper component for the progress bar with optional pace indicator
+  const ProgressBar = ({
+    percentage,
+    colorClass,
+    pacePercentage,
+  }: {
+    percentage: number;
+    colorClass: string;
+    pacePercentage?: number | null;
+  }) => (
+    <div className="relative h-2 w-full bg-secondary/50 rounded-full overflow-hidden">
+      <div
+        className={cn('h-full transition-all duration-500', colorClass)}
+        style={{ width: `${Math.min(percentage, 100)}%` }}
+      />
+      {pacePercentage != null && pacePercentage > 0 && pacePercentage < 100 && (
+        <div
+          className="absolute top-0 h-full w-0.5 bg-foreground/60"
+          style={{ left: `${pacePercentage}%` }}
+          title={`Expected: ${Math.round(pacePercentage)}%`}
+        />
+      )}
+    </div>
+  );
+
+  const UsageCard = ({
+    title,
+    subtitle,
+    percentage,
+    resetText,
+    isPrimary = false,
+    stale = false,
+    pacePercentage,
+  }: {
+    title: string;
+    subtitle: string;
+    percentage: number;
+    resetText?: string;
+    isPrimary?: boolean;
+    stale?: boolean;
+    pacePercentage?: number | null;
+  }) => {
+    const isValidPercentage =
+      typeof percentage === 'number' && !isNaN(percentage) && isFinite(percentage);
+    const safePercentage = isValidPercentage ? percentage : 0;
+
+    const status = getStatusInfo(safePercentage);
+    const StatusIcon = status.icon;
+    const paceLabel =
+      isValidPercentage && pacePercentage != null
+        ? getPaceStatusLabel(safePercentage, pacePercentage)
+        : null;
+
+    return (
+      <div
+        className={cn(
+          'rounded-xl border bg-card/50 p-4 transition-opacity',
+          isPrimary ? 'border-border/60 shadow-sm' : 'border-border/40',
+          (stale || !isValidPercentage) && 'opacity-50'
+        )}
+      >
+        <div className="flex items-start justify-between mb-3">
+          <div>
+            <h4 className={cn('font-semibold', isPrimary ? 'text-sm' : 'text-xs')}>{title}</h4>
+            <p className="text-[10px] text-muted-foreground">{subtitle}</p>
+          </div>
+          {isValidPercentage ? (
+            <div className="flex items-center gap-1.5">
+              <StatusIcon className={cn('w-3.5 h-3.5', status.color)} />
+              <span
+                className={cn(
+                  'font-mono font-bold',
+                  status.color,
+                  isPrimary ? 'text-base' : 'text-sm'
+                )}
+              >
+                {Math.round(safePercentage)}%
+              </span>
+            </div>
+          ) : (
+            <span className="text-xs text-muted-foreground">N/A</span>
+          )}
+        </div>
+        <ProgressBar
+          percentage={safePercentage}
+          colorClass={isValidPercentage ? status.bg : 'bg-muted-foreground/30'}
+          pacePercentage={pacePercentage}
+        />
+        <div className="mt-2 flex items-center justify-between">
+          {paceLabel ? (
+            <p
+              className={cn(
+                'text-[10px] font-medium',
+                safePercentage > (pacePercentage ?? 0) ? 'text-orange-500' : 'text-green-500'
+              )}
+            >
+              {paceLabel}
+            </p>
+          ) : (
+            <div />
+          )}
+          {resetText && (
+            <p className="text-xs text-muted-foreground flex items-center gap-1">
+              <Clock className="w-3 h-3" />
+              {resetText}
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  // Header Button
+  const maxPercentage = codexUsage?.rateLimits
+    ? Math.max(
+        codexUsage.rateLimits.primary?.usedPercent || 0,
+        codexUsage.rateLimits.secondary?.usedPercent || 0
+      )
+    : 0;
+
+  const getProgressBarColor = (percentage: number) => {
+    if (percentage >= 80) return 'bg-red-500';
+    if (percentage >= 50) return 'bg-yellow-500';
+    return 'bg-green-500';
+  };
+
+  const trigger = (
+    <Button variant="ghost" size="sm" className="h-9 gap-3 bg-secondary border border-border px-3">
+      <span className="text-sm font-medium">Codex</span>
+      {codexUsage && codexUsage.rateLimits && (
+        <div
+          className={cn(
+            'h-1.5 w-16 bg-muted-foreground/20 rounded-full overflow-hidden transition-opacity',
+            isStale && 'opacity-60'
+          )}
+        >
+          <div
+            className={cn('h-full transition-all duration-500', getProgressBarColor(maxPercentage))}
+            style={{ width: `${Math.min(maxPercentage, 100)}%` }}
+          />
+        </div>
+      )}
+    </Button>
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent
+        className="w-80 p-0 overflow-hidden bg-background/95 backdrop-blur-xl border-border shadow-2xl"
+        align="end"
+        sideOffset={8}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border/50 bg-secondary/10">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-semibold">Codex Usage</span>
+          </div>
+          {error && error.code !== ERROR_CODES.NOT_AVAILABLE && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn('h-6 w-6', isFetching && 'opacity-80')}
+              onClick={() => !isFetching && refetch()}
+            >
+              <RefreshCw className={cn('w-3.5 h-3.5', isFetching && 'animate-spin')} />
+            </Button>
+          )}
+        </div>
+
+        {/* Content */}
+        <div className="p-4 space-y-4">
+          {error ? (
+            <div className="flex flex-col items-center justify-center py-6 text-center space-y-3">
+              <AlertTriangle className="w-8 h-8 text-yellow-500/80" />
+              <div className="space-y-1 flex flex-col items-center">
+                <p className="text-sm font-medium">
+                  {error.code === ERROR_CODES.NOT_AVAILABLE ? 'Usage not available' : error.message}
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  {error.code === ERROR_CODES.API_BRIDGE_UNAVAILABLE ? (
+                    'Ensure the Electron bridge is running or restart the app'
+                  ) : error.code === ERROR_CODES.NOT_AVAILABLE ? (
+                    <>
+                      Codex CLI doesn't provide usage statistics. Check{' '}
+                      <a
+                        href="https://platform.openai.com/usage"
+                        target="_blank"
+                        rel="noreferrer"
+                        className="underline hover:text-foreground"
+                      >
+                        OpenAI dashboard
+                      </a>{' '}
+                      for usage details.
+                    </>
+                  ) : (
+                    <>
+                      Make sure Codex CLI is installed and authenticated via{' '}
+                      <code className="font-mono bg-muted px-1 rounded">codex login</code>
+                    </>
+                  )}
+                </p>
+              </div>
+            </div>
+          ) : !codexUsage ? (
+            // Loading state
+            <div className="flex flex-col items-center justify-center py-8 space-y-2">
+              <Spinner size="lg" />
+              <p className="text-xs text-muted-foreground">Loading usage data...</p>
+            </div>
+          ) : codexUsage.rateLimits ? (
+            <>
+              {/* Primary Window Card */}
+              {codexUsage.rateLimits.primary && (
+                <UsageCard
+                  title={getWindowLabel(codexUsage.rateLimits.primary.windowDurationMins).title}
+                  subtitle={
+                    getWindowLabel(codexUsage.rateLimits.primary.windowDurationMins).subtitle
+                  }
+                  percentage={codexUsage.rateLimits.primary.usedPercent}
+                  resetText={formatResetTime(codexUsage.rateLimits.primary.resetsAt)}
+                  isPrimary={true}
+                  stale={isStale}
+                  pacePercentage={getExpectedCodexPacePercentage(
+                    codexUsage.rateLimits.primary.resetsAt,
+                    codexUsage.rateLimits.primary.windowDurationMins
+                  )}
+                />
+              )}
+
+              {/* Secondary Window Card */}
+              {codexUsage.rateLimits.secondary && (
+                <UsageCard
+                  title={getWindowLabel(codexUsage.rateLimits.secondary.windowDurationMins).title}
+                  subtitle={
+                    getWindowLabel(codexUsage.rateLimits.secondary.windowDurationMins).subtitle
+                  }
+                  percentage={codexUsage.rateLimits.secondary.usedPercent}
+                  resetText={formatResetTime(codexUsage.rateLimits.secondary.resetsAt)}
+                  stale={isStale}
+                  pacePercentage={getExpectedCodexPacePercentage(
+                    codexUsage.rateLimits.secondary.resetsAt,
+                    codexUsage.rateLimits.secondary.windowDurationMins
+                  )}
+                />
+              )}
+
+              {/* Plan Type */}
+              {codexUsage.rateLimits.planType && (
+                <div className="rounded-xl border border-border/40 bg-secondary/20 p-3">
+                  <p className="text-xs text-muted-foreground">
+                    Plan:{' '}
+                    <span className="text-foreground font-medium">
+                      {codexUsage.rateLimits.planType.charAt(0).toUpperCase() +
+                        codexUsage.rateLimits.planType.slice(1)}
+                    </span>
+                  </p>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="flex flex-col items-center justify-center py-6 text-center">
+              <AlertTriangle className="w-8 h-8 text-yellow-500/80" />
+              <p className="text-sm font-medium mt-3">No usage data available</p>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-4 py-2 bg-secondary/10 border-t border-border/50">
+          <a
+            href="https://platform.openai.com/usage"
+            target="_blank"
+            rel="noreferrer"
+            className="text-[10px] text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
+          >
+            OpenAI Dashboard <ExternalLink className="w-2.5 h-2.5" />
+          </a>
+
+          <span className="text-[10px] text-muted-foreground">Updates every minute</span>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/dialogs/board-background-modal.tsx b/temp_repo/apps/ui/src/components/dialogs/board-background-modal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c923e7513a02b981e9fe5f6f49a66db2d7e091e3
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/dialogs/board-background-modal.tsx
@@ -0,0 +1,536 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { ImageIcon, Upload, Trash2 } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+
+const logger = createLogger('BoardBackgroundModal');
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Button } from '@/components/ui/button';
+import { Slider } from '@/components/ui/slider';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { cn } from '@/lib/utils';
+import { useAppStore, defaultBackgroundSettings } from '@/store/app-store';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
+import { useBoardBackgroundSettings } from '@/hooks/use-board-background-settings';
+import { toast } from 'sonner';
+import {
+  fileToBase64,
+  validateImageFile,
+  ACCEPTED_IMAGE_TYPES,
+  DEFAULT_MAX_FILE_SIZE,
+} from '@/lib/image-utils';
+
+interface BoardBackgroundModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModalProps) {
+  const { currentProject, boardBackgroundByProject } = useAppStore();
+  const {
+    setBoardBackground,
+    setCardOpacity,
+    setColumnOpacity,
+    setColumnBorderEnabled,
+    setCardGlassmorphism,
+    setCardBorderEnabled,
+    setCardBorderOpacity,
+    setHideScrollbar,
+    clearBoardBackground,
+    persistSettings,
+    getCurrentSettings,
+  } = useBoardBackgroundSettings();
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+
+  // Get current background settings (live from store)
+  const backgroundSettings =
+    (currentProject && boardBackgroundByProject[currentProject.path]) || defaultBackgroundSettings;
+
+  // Local state for sliders during dragging (avoids store updates during drag)
+  const [localCardOpacity, setLocalCardOpacity] = useState(backgroundSettings.cardOpacity);
+  const [localColumnOpacity, setLocalColumnOpacity] = useState(backgroundSettings.columnOpacity);
+  const [localCardBorderOpacity, setLocalCardBorderOpacity] = useState(
+    backgroundSettings.cardBorderOpacity
+  );
+  const [isDragging, setIsDragging] = useState(false);
+
+  // Sync local state with store when not dragging (e.g., on modal open or external changes)
+  useEffect(() => {
+    if (!isDragging) {
+      setLocalCardOpacity(backgroundSettings.cardOpacity);
+      setLocalColumnOpacity(backgroundSettings.columnOpacity);
+      setLocalCardBorderOpacity(backgroundSettings.cardBorderOpacity);
+    }
+  }, [
+    isDragging,
+    backgroundSettings.cardOpacity,
+    backgroundSettings.columnOpacity,
+    backgroundSettings.cardBorderOpacity,
+  ]);
+
+  const columnBorderEnabled = backgroundSettings.columnBorderEnabled;
+  const cardGlassmorphism = backgroundSettings.cardGlassmorphism;
+  const cardBorderEnabled = backgroundSettings.cardBorderEnabled;
+  const hideScrollbar = backgroundSettings.hideScrollbar;
+  const imageVersion = backgroundSettings.imageVersion;
+
+  // Update preview image when background settings change
+  useEffect(() => {
+    if (currentProject && backgroundSettings.imagePath) {
+      // Add cache-busting query parameter to force browser to reload image
+      const cacheBuster = imageVersion ?? Date.now().toString();
+      const imagePath = getAuthenticatedImageUrl(
+        backgroundSettings.imagePath,
+        currentProject.path,
+        cacheBuster
+      );
+      setPreviewImage(imagePath);
+    } else {
+      setPreviewImage(null);
+    }
+  }, [currentProject, backgroundSettings.imagePath, imageVersion]);
+
+  const processFile = useCallback(
+    async (file: File) => {
+      if (!currentProject) {
+        toast.error('No project selected');
+        return;
+      }
+
+      // Validate file
+      const validation = validateImageFile(file, DEFAULT_MAX_FILE_SIZE);
+      if (!validation.isValid) {
+        toast.error(validation.error);
+        return;
+      }
+
+      setIsProcessing(true);
+      try {
+        const base64 = await fileToBase64(file);
+
+        // Set preview immediately
+        setPreviewImage(base64);
+
+        // Save to server
+        const httpClient = getHttpApiClient();
+        const result = await httpClient.saveBoardBackground(
+          base64,
+          file.name,
+          file.type,
+          currentProject.path
+        );
+
+        if (result.success && result.path) {
+          // Update store and persist to server
+          await setBoardBackground(currentProject.path, result.path);
+          toast.success('Background image saved');
+        } else {
+          toast.error(result.error || 'Failed to save background image');
+          setPreviewImage(null);
+        }
+      } catch (error) {
+        logger.error('Failed to process image:', error);
+        toast.error('Failed to process image');
+        setPreviewImage(null);
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    [currentProject, setBoardBackground]
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragOver(false);
+
+      const files = e.dataTransfer.files;
+      if (files.length > 0) {
+        processFile(files[0]);
+      }
+    },
+    [processFile]
+  );
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  }, []);
+
+  const handleFileSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (files && files.length > 0) {
+        processFile(files[0]);
+      }
+      // Reset the input so the same file can be selected again
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    },
+    [processFile]
+  );
+
+  const handleBrowseClick = useCallback(() => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, []);
+
+  const handleClear = useCallback(async () => {
+    if (!currentProject) return;
+
+    try {
+      setIsProcessing(true);
+      const httpClient = getHttpApiClient();
+      const result = await httpClient.deleteBoardBackground(currentProject.path);
+
+      if (result.success) {
+        await clearBoardBackground(currentProject.path);
+        setPreviewImage(null);
+        toast.success('Background image cleared');
+      } else {
+        toast.error(result.error || 'Failed to clear background image');
+      }
+    } catch (error) {
+      logger.error('Failed to clear background:', error);
+      toast.error('Failed to clear background');
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [currentProject, clearBoardBackground]);
+
+  // Live update local state during drag (modal-only, no store update)
+  const handleCardOpacityChange = useCallback((value: number[]) => {
+    setIsDragging(true);
+    setLocalCardOpacity(value[0]);
+  }, []);
+
+  // Update store and persist when slider is released
+  const handleCardOpacityCommit = useCallback(
+    (value: number[]) => {
+      if (!currentProject) return;
+      setIsDragging(false);
+      setCardOpacity(currentProject.path, value[0]);
+      const current = getCurrentSettings(currentProject.path);
+      persistSettings(currentProject.path, { ...current, cardOpacity: value[0] });
+    },
+    [currentProject, setCardOpacity, getCurrentSettings, persistSettings]
+  );
+
+  // Live update local state during drag (modal-only, no store update)
+  const handleColumnOpacityChange = useCallback((value: number[]) => {
+    setIsDragging(true);
+    setLocalColumnOpacity(value[0]);
+  }, []);
+
+  // Update store and persist when slider is released
+  const handleColumnOpacityCommit = useCallback(
+    (value: number[]) => {
+      if (!currentProject) return;
+      setIsDragging(false);
+      setColumnOpacity(currentProject.path, value[0]);
+      const current = getCurrentSettings(currentProject.path);
+      persistSettings(currentProject.path, { ...current, columnOpacity: value[0] });
+    },
+    [currentProject, setColumnOpacity, getCurrentSettings, persistSettings]
+  );
+
+  const handleColumnBorderToggle = useCallback(
+    async (checked: boolean) => {
+      if (!currentProject) return;
+      await setColumnBorderEnabled(currentProject.path, checked);
+    },
+    [currentProject, setColumnBorderEnabled]
+  );
+
+  const handleCardGlassmorphismToggle = useCallback(
+    async (checked: boolean) => {
+      if (!currentProject) return;
+      await setCardGlassmorphism(currentProject.path, checked);
+    },
+    [currentProject, setCardGlassmorphism]
+  );
+
+  const handleCardBorderToggle = useCallback(
+    async (checked: boolean) => {
+      if (!currentProject) return;
+      await setCardBorderEnabled(currentProject.path, checked);
+    },
+    [currentProject, setCardBorderEnabled]
+  );
+
+  // Live update local state during drag (modal-only, no store update)
+  const handleCardBorderOpacityChange = useCallback((value: number[]) => {
+    setIsDragging(true);
+    setLocalCardBorderOpacity(value[0]);
+  }, []);
+
+  // Update store and persist when slider is released
+  const handleCardBorderOpacityCommit = useCallback(
+    (value: number[]) => {
+      if (!currentProject) return;
+      setIsDragging(false);
+      setCardBorderOpacity(currentProject.path, value[0]);
+      const current = getCurrentSettings(currentProject.path);
+      persistSettings(currentProject.path, { ...current, cardBorderOpacity: value[0] });
+    },
+    [currentProject, setCardBorderOpacity, getCurrentSettings, persistSettings]
+  );
+
+  const handleHideScrollbarToggle = useCallback(
+    async (checked: boolean) => {
+      if (!currentProject) return;
+      await setHideScrollbar(currentProject.path, checked);
+    },
+    [currentProject, setHideScrollbar]
+  );
+
+  if (!currentProject) {
+    return null;
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-full sm:max-w-md overflow-y-auto">
+        <SheetHeader
+          className="px-6"
+          style={{
+            paddingTop: 'max(1.5rem, calc(env(safe-area-inset-top, 0px) + 1rem))',
+          }}
+        >
+          <SheetTitle className="flex items-center gap-2">
+            <ImageIcon className="w-5 h-5 text-brand-500" />
+            Board Background Settings
+          </SheetTitle>
+          <SheetDescription className="text-muted-foreground">
+            Set a custom background image for your kanban board and adjust card/column opacity
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="space-y-6 px-6 pb-6">
+          {/* Image Upload Section */}
+          <div className="space-y-3">
+            <Label>Background Image</Label>
+
+            {/* Hidden file input */}
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept={ACCEPTED_IMAGE_TYPES.join(',')}
+              onChange={handleFileSelect}
+              className="hidden"
+              disabled={isProcessing}
+            />
+
+            {/* Drop zone */}
+            <div
+              onDrop={handleDrop}
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              className={cn(
+                'relative rounded-lg border-2 border-dashed transition-all duration-200',
+                {
+                  'border-brand-500/60 bg-brand-500/5 dark:bg-brand-500/10':
+                    isDragOver && !isProcessing,
+                  'border-muted-foreground/25': !isDragOver && !isProcessing,
+                  'border-muted-foreground/10 opacity-50 cursor-not-allowed': isProcessing,
+                  'hover:border-brand-500/40 hover:bg-brand-500/5 dark:hover:bg-brand-500/5':
+                    !isProcessing && !isDragOver,
+                }
+              )}
+            >
+              {previewImage ? (
+                <div className="relative p-4">
+                  <div className="relative w-full h-48 rounded-md overflow-hidden border border-border bg-muted">
+                    <img
+                      src={previewImage}
+                      alt="Background preview"
+                      className="w-full h-full object-cover"
+                    />
+                    {isProcessing && (
+                      <div className="absolute inset-0 flex items-center justify-center bg-background/80">
+                        <Spinner size="lg" />
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex gap-2 mt-3">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleBrowseClick}
+                      disabled={isProcessing}
+                      className="flex-1"
+                    >
+                      <Upload className="w-4 h-4 mr-2" />
+                      Change Image
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={handleClear}
+                      disabled={isProcessing}
+                    >
+                      <Trash2 className="w-4 h-4 mr-2" />
+                      Clear
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <div
+                  onClick={handleBrowseClick}
+                  className="flex flex-col items-center justify-center p-8 text-center cursor-pointer"
+                >
+                  <div
+                    className={cn(
+                      'rounded-full p-3 mb-3',
+                      isDragOver && !isProcessing
+                        ? 'bg-brand-500/10 dark:bg-brand-500/20'
+                        : 'bg-muted'
+                    )}
+                  >
+                    {isProcessing ? (
+                      <Spinner size="lg" />
+                    ) : (
+                      <ImageIcon className="h-6 w-6 text-muted-foreground" />
+                    )}
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {isDragOver && !isProcessing
+                      ? 'Drop image here'
+                      : 'Click to upload or drag and drop'}
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-1">
+                    JPG, PNG, GIF, or WebP (max {Math.round(DEFAULT_MAX_FILE_SIZE / (1024 * 1024))}
+                    MB)
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Opacity Controls */}
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label>Card Opacity</Label>
+                <span className="text-sm text-muted-foreground">{localCardOpacity}%</span>
+              </div>
+              <Slider
+                value={[localCardOpacity]}
+                onValueChange={handleCardOpacityChange}
+                onValueCommit={handleCardOpacityCommit}
+                min={0}
+                max={100}
+                step={1}
+                className="w-full"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label>Column Opacity</Label>
+                <span className="text-sm text-muted-foreground">{localColumnOpacity}%</span>
+              </div>
+              <Slider
+                value={[localColumnOpacity]}
+                onValueChange={handleColumnOpacityChange}
+                onValueCommit={handleColumnOpacityCommit}
+                min={0}
+                max={100}
+                step={1}
+                className="w-full"
+              />
+            </div>
+
+            {/* Column Border Toggle */}
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="column-border-toggle"
+                checked={columnBorderEnabled}
+                onCheckedChange={handleColumnBorderToggle}
+              />
+              <Label htmlFor="column-border-toggle" className="cursor-pointer">
+                Show Column Borders
+              </Label>
+            </div>
+
+            {/* Card Glassmorphism Toggle */}
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="card-glassmorphism-toggle"
+                checked={cardGlassmorphism}
+                onCheckedChange={handleCardGlassmorphismToggle}
+              />
+              <Label htmlFor="card-glassmorphism-toggle" className="cursor-pointer">
+                Card Glassmorphism (blur effect)
+              </Label>
+            </div>
+
+            {/* Card Border Toggle */}
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="card-border-toggle"
+                checked={cardBorderEnabled}
+                onCheckedChange={handleCardBorderToggle}
+              />
+              <Label htmlFor="card-border-toggle" className="cursor-pointer">
+                Show Card Borders
+              </Label>
+            </div>
+
+            {/* Card Border Opacity - only show when border is enabled */}
+            {cardBorderEnabled && (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label>Card Border Opacity</Label>
+                  <span className="text-sm text-muted-foreground">{localCardBorderOpacity}%</span>
+                </div>
+                <Slider
+                  value={[localCardBorderOpacity]}
+                  onValueChange={handleCardBorderOpacityChange}
+                  onValueCommit={handleCardBorderOpacityCommit}
+                  min={0}
+                  max={100}
+                  step={1}
+                  className="w-full"
+                />
+              </div>
+            )}
+
+            {/* Hide Scrollbar Toggle */}
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="hide-scrollbar-toggle"
+                checked={hideScrollbar}
+                onCheckedChange={handleHideScrollbarToggle}
+              />
+              <Label htmlFor="hide-scrollbar-toggle" className="cursor-pointer">
+                Hide Board Scrollbar
+              </Label>
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/dialogs/delete-all-archived-sessions-dialog.tsx b/temp_repo/apps/ui/src/components/dialogs/delete-all-archived-sessions-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..358b99da23c683a675d8128d513be9859e1f602f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/dialogs/delete-all-archived-sessions-dialog.tsx
@@ -0,0 +1,55 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Trash2 } from 'lucide-react';
+
+interface DeleteAllArchivedSessionsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  archivedCount: number;
+  onConfirm: () => void;
+}
+
+export function DeleteAllArchivedSessionsDialog({
+  open,
+  onOpenChange,
+  archivedCount,
+  onConfirm,
+}: DeleteAllArchivedSessionsDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-testid="delete-all-archived-sessions-dialog">
+        <DialogHeader>
+          <DialogTitle>Delete All Archived Sessions</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete all archived sessions? This action cannot be undone.
+            {archivedCount > 0 && (
+              <span className="block mt-2 text-yellow-500">
+                {archivedCount} session(s) will be deleted.
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            data-testid="confirm-delete-all-archived-sessions"
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            Delete All
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/dialogs/delete-session-dialog.tsx b/temp_repo/apps/ui/src/components/dialogs/delete-session-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..108620129d46aa9545ebfe8df3ef46a139817c05
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/dialogs/delete-session-dialog.tsx
@@ -0,0 +1,48 @@
+import { MessageSquare } from 'lucide-react';
+import { DeleteConfirmDialog } from '@/components/ui/delete-confirm-dialog';
+import type { SessionListItem } from '@/types/electron';
+
+interface DeleteSessionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  session: SessionListItem | null;
+  onConfirm: (sessionId: string) => void;
+}
+
+export function DeleteSessionDialog({
+  open,
+  onOpenChange,
+  session,
+  onConfirm,
+}: DeleteSessionDialogProps) {
+  const handleConfirm = () => {
+    if (session) {
+      onConfirm(session.id);
+    }
+  };
+
+  return (
+    <DeleteConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      onConfirm={handleConfirm}
+      title="Delete Session"
+      description="Are you sure you want to delete this session? This action cannot be undone."
+      confirmText="Delete Session"
+      testId="delete-session-dialog"
+      confirmTestId="confirm-delete-session"
+    >
+      {session && (
+        <div className="flex items-center gap-3 p-4 rounded-lg bg-sidebar-accent/10 border border-sidebar-border">
+          <div className="w-10 h-10 rounded-lg bg-sidebar-accent/20 border border-sidebar-border flex items-center justify-center shrink-0">
+            <MessageSquare className="w-5 h-5 text-brand-500" />
+          </div>
+          <div className="min-w-0">
+            <p className="font-medium text-foreground truncate">{session.name}</p>
+            <p className="text-xs text-muted-foreground">{session.messageCount} messages</p>
+          </div>
+        </div>
+      )}
+    </DeleteConfirmDialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/dialogs/file-browser-dialog.tsx b/temp_repo/apps/ui/src/components/dialogs/file-browser-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..391bfe0865de8f48ca80f0c3612a85c8d3acfc78
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/dialogs/file-browser-dialog.tsx
@@ -0,0 +1,357 @@
+import { useState, useEffect, useCallback } from 'react';
+import { FolderOpen, Folder, ChevronRight, HardDrive, Clock, X } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { PathInput } from '@/components/ui/path-input';
+import { Kbd, KbdGroup } from '@/components/ui/kbd';
+import { getDefaultWorkspaceDirectory, saveLastProjectDirectory } from '@/lib/workspace-config';
+import { useOSDetection } from '@/hooks';
+import { apiPost } from '@/lib/api-fetch';
+import { useAppStore } from '@/store/app-store';
+
+interface DirectoryEntry {
+  name: string;
+  path: string;
+}
+
+interface BrowseResult {
+  success: boolean;
+  currentPath: string;
+  parentPath: string | null;
+  directories: DirectoryEntry[];
+  drives?: string[];
+  error?: string;
+  warning?: string;
+}
+
+interface FileBrowserDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSelect: (path: string) => void;
+  title?: string;
+  description?: string;
+  initialPath?: string;
+}
+
+export function FileBrowserDialog({
+  open,
+  onOpenChange,
+  onSelect,
+  title = 'Select Project Directory',
+  description = 'Navigate to your project folder or paste a path directly',
+  initialPath,
+}: FileBrowserDialogProps) {
+  const { isMac } = useOSDetection();
+  const [currentPath, setCurrentPath] = useState<string>('');
+  const [parentPath, setParentPath] = useState<string | null>(null);
+  const [directories, setDirectories] = useState<DirectoryEntry[]>([]);
+  const [drives, setDrives] = useState<string[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [warning, setWarning] = useState('');
+
+  // Use recent folders from app store (synced via API)
+  const recentFolders = useAppStore((s) => s.recentFolders);
+  const setRecentFolders = useAppStore((s) => s.setRecentFolders);
+  const addRecentFolder = useAppStore((s) => s.addRecentFolder);
+
+  const handleRemoveRecent = useCallback(
+    (e: React.MouseEvent, path: string) => {
+      e.stopPropagation();
+      const updated = recentFolders.filter((p) => p !== path);
+      setRecentFolders(updated);
+    },
+    [recentFolders, setRecentFolders]
+  );
+
+  const browseDirectory = useCallback(async (dirPath?: string) => {
+    setLoading(true);
+    setError('');
+    setWarning('');
+
+    try {
+      const result = await apiPost<BrowseResult>('/api/fs/browse', { dirPath });
+
+      if (result.success) {
+        setCurrentPath(result.currentPath);
+        setParentPath(result.parentPath);
+        setDirectories(result.directories);
+        setDrives(result.drives || []);
+        setWarning(result.warning || '');
+      } else {
+        setError(result.error || 'Failed to browse directory');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load directories');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const handleSelectRecent = useCallback(
+    (path: string) => {
+      browseDirectory(path);
+    },
+    [browseDirectory]
+  );
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      setCurrentPath('');
+      setParentPath(null);
+      setDirectories([]);
+      setError('');
+      setWarning('');
+    }
+  }, [open]);
+
+  // Load initial path or workspace directory when dialog opens
+  useEffect(() => {
+    if (open && !currentPath) {
+      // Priority order:
+      // 1. Last selected directory from this file browser (from localStorage)
+      // 2. initialPath prop (from parent component)
+      // 3. Default workspace directory
+      // 4. Home directory
+      const loadInitialPath = async () => {
+        try {
+          // First, check for last selected directory from getDefaultWorkspaceDirectory
+          // which already implements the priority: last used > Documents/Automaker > DATA_DIR
+          const defaultDir = await getDefaultWorkspaceDirectory();
+
+          // If we have a default directory, use it (unless initialPath is explicitly provided and different)
+          const pathToUse = initialPath || defaultDir;
+
+          if (pathToUse) {
+            browseDirectory(pathToUse);
+          } else {
+            // No default directory, browse home directory
+            browseDirectory();
+          }
+        } catch {
+          // If config fetch fails, try initialPath or fall back to home directory
+          if (initialPath) {
+            browseDirectory(initialPath);
+          } else {
+            browseDirectory();
+          }
+        }
+      };
+
+      loadInitialPath();
+    }
+  }, [open, initialPath, currentPath, browseDirectory]);
+
+  const handleSelectDirectory = (dir: DirectoryEntry) => {
+    browseDirectory(dir.path);
+  };
+
+  const handleGoHome = useCallback(() => {
+    browseDirectory();
+  }, [browseDirectory]);
+
+  const handleNavigate = useCallback(
+    (path: string) => {
+      browseDirectory(path);
+    },
+    [browseDirectory]
+  );
+
+  const handleSelectDrive = (drivePath: string) => {
+    browseDirectory(drivePath);
+  };
+
+  const handleSelect = useCallback(() => {
+    if (currentPath) {
+      addRecentFolder(currentPath);
+      // Save to last project directory so it's used as default next time
+      saveLastProjectDirectory(currentPath);
+      onSelect(currentPath);
+      onOpenChange(false);
+    }
+  }, [currentPath, onSelect, onOpenChange, addRecentFolder]);
+
+  // Handle Command/Ctrl+Enter keyboard shortcut to select current folder
+  useEffect(() => {
+    if (!open) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Check for Command+Enter (Mac) or Ctrl+Enter (Windows/Linux)
+      if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        if (currentPath && !loading) {
+          handleSelect();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [open, currentPath, loading, handleSelect]);
+
+  // Helper to get folder name from path
+  const getFolderName = (path: string) => {
+    const parts = path.split(/[/\\]/).filter(Boolean);
+    return parts[parts.length - 1] || path;
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-popover border-border max-w-3xl max-h-[85vh] overflow-hidden flex flex-col p-4 focus:outline-none focus-visible:outline-none">
+        <DialogHeader className="pb-1">
+          <DialogTitle className="flex items-center gap-2 text-base">
+            <FolderOpen className="w-4 h-4 text-brand-500" />
+            {title}
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground text-xs">
+            {description}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-2 min-h-[350px] flex-1 overflow-hidden py-1">
+          {/* Path navigation */}
+          <PathInput
+            currentPath={currentPath}
+            parentPath={parentPath}
+            loading={loading}
+            error={!!error}
+            onNavigate={handleNavigate}
+            onHome={handleGoHome}
+            entries={directories.map((dir) => ({ ...dir, isDirectory: true }))}
+            onSelectEntry={(entry) => {
+              if (entry.isDirectory) {
+                handleSelectDirectory(entry);
+              }
+            }}
+          />
+
+          {/* Recent folders */}
+          {recentFolders.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 p-2 rounded-md bg-sidebar-accent/10 border border-sidebar-border">
+              <div className="flex items-center gap-1 text-xs text-muted-foreground mr-1">
+                <Clock className="w-3 h-3" />
+                <span>Recent:</span>
+              </div>
+              {recentFolders.map((folder) => (
+                <button
+                  key={folder}
+                  onClick={() => handleSelectRecent(folder)}
+                  className="group flex items-center gap-1 h-6 px-2 text-xs bg-sidebar-accent/20 hover:bg-sidebar-accent/40 rounded border border-sidebar-border transition-colors"
+                  disabled={loading}
+                  title={folder}
+                >
+                  <Folder className="w-3 h-3 text-brand-500 shrink-0" />
+                  <span className="truncate max-w-[120px]">{getFolderName(folder)}</span>
+                  <button
+                    onClick={(e) => handleRemoveRecent(e, folder)}
+                    className="ml-0.5 opacity-0 group-hover:opacity-100 hover:text-destructive transition-opacity"
+                    title="Remove from recent"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* Drives selector (Windows only) */}
+          {drives.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 p-2 rounded-md bg-sidebar-accent/10 border border-sidebar-border">
+              <div className="flex items-center gap-1 text-xs text-muted-foreground mr-1">
+                <HardDrive className="w-3 h-3" />
+                <span>Drives:</span>
+              </div>
+              {drives.map((drive) => (
+                <Button
+                  key={drive}
+                  variant={currentPath.startsWith(drive) ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => handleSelectDrive(drive)}
+                  className="h-6 px-2 text-xs"
+                  disabled={loading}
+                >
+                  {drive.replace('\\', '')}
+                </Button>
+              ))}
+            </div>
+          )}
+
+          {/* Directory list */}
+          <div className="flex-1 overflow-y-auto border border-sidebar-border rounded-md scrollbar-styled">
+            {loading && (
+              <div className="flex items-center justify-center h-full p-4">
+                <div className="text-xs text-muted-foreground">Loading directories...</div>
+              </div>
+            )}
+
+            {error && (
+              <div className="flex items-center justify-center h-full p-4">
+                <div className="text-xs text-destructive">{error}</div>
+              </div>
+            )}
+
+            {warning && (
+              <div className="p-2 bg-yellow-500/10 border border-yellow-500/30 rounded-md mb-1">
+                <div className="text-xs text-yellow-500">{warning}</div>
+              </div>
+            )}
+
+            {!loading && !error && !warning && directories.length === 0 && (
+              <div className="flex items-center justify-center h-full p-4">
+                <div className="text-xs text-muted-foreground">No subdirectories found</div>
+              </div>
+            )}
+
+            {!loading && !error && directories.length > 0 && (
+              <div className="divide-y divide-sidebar-border">
+                {directories.map((dir) => (
+                  <button
+                    key={dir.path}
+                    onClick={() => handleSelectDirectory(dir)}
+                    className="w-full flex items-center gap-2 px-2 py-1.5 hover:bg-sidebar-accent/10 transition-colors text-left group"
+                  >
+                    <Folder className="w-4 h-4 text-brand-500 shrink-0" />
+                    <span className="flex-1 truncate text-xs">{dir.name}</span>
+                    <ChevronRight className="w-3.5 h-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="text-[10px] text-muted-foreground">
+            Paste a full path above, or click on folders to navigate. Press Enter or click → to jump
+            to a path.
+          </div>
+        </div>
+
+        <DialogFooter className="border-t border-border pt-3 gap-2 mt-1">
+          <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            onClick={handleSelect}
+            disabled={!currentPath || loading}
+            title="Select current folder (Cmd+Enter / Ctrl+Enter)"
+          >
+            <FolderOpen className="w-3.5 h-3.5 mr-1.5" />
+            Select Current Folder
+            <KbdGroup className="ml-1">
+              <Kbd>{isMac ? '⌘' : 'Ctrl'}</Kbd>
+              <Kbd>↵</Kbd>
+            </KbdGroup>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/dialogs/index.ts b/temp_repo/apps/ui/src/components/dialogs/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1c09dffa4aa3cc6269cae73bdd61d419ee35d98a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/dialogs/index.ts
@@ -0,0 +1,10 @@
+export { BoardBackgroundModal } from './board-background-modal';
+export { DeleteAllArchivedSessionsDialog } from './delete-all-archived-sessions-dialog';
+export { DeleteSessionDialog } from './delete-session-dialog';
+export { FileBrowserDialog } from './file-browser-dialog';
+export { NewProjectModal } from './new-project-modal';
+export { SandboxRejectionScreen } from './sandbox-rejection-screen';
+export { SandboxRiskDialog } from './sandbox-risk-dialog';
+export { PRCommentResolutionDialog } from './pr-comment-resolution-dialog';
+export type { PRCommentResolutionPRInfo } from './pr-comment-resolution-dialog';
+export { WorkspacePickerModal } from './workspace-picker-modal';
diff --git a/temp_repo/apps/ui/src/components/dialogs/new-project-modal.tsx b/temp_repo/apps/ui/src/components/dialogs/new-project-modal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c27f7807798a8a06f3db9687bcce7bc062afba45
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/dialogs/new-project-modal.tsx
@@ -0,0 +1,457 @@
+import { useState, useEffect } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { HotkeyButton } from '@/components/ui/hotkey-button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Badge } from '@/components/ui/badge';
+import { FolderPlus, FolderOpen, Rocket, ExternalLink, Check, Link, Folder } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { starterTemplates, type StarterTemplate } from '@/lib/templates';
+import { getElectronAPI } from '@/lib/electron';
+import { cn } from '@/lib/utils';
+import { useFileBrowser } from '@/contexts/file-browser-context';
+import { getDefaultWorkspaceDirectory, saveLastProjectDirectory } from '@/lib/workspace-config';
+
+const logger = createLogger('NewProjectModal');
+
+interface ValidationErrors {
+  projectName?: boolean;
+  workspaceDir?: boolean;
+  templateSelection?: boolean;
+  customUrl?: boolean;
+}
+
+interface NewProjectModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreateBlankProject: (projectName: string, parentDir: string) => Promise<void>;
+  onCreateFromTemplate: (
+    template: StarterTemplate,
+    projectName: string,
+    parentDir: string
+  ) => Promise<void>;
+  onCreateFromCustomUrl: (repoUrl: string, projectName: string, parentDir: string) => Promise<void>;
+  isCreating: boolean;
+}
+
+export function NewProjectModal({
+  open,
+  onOpenChange,
+  onCreateBlankProject,
+  onCreateFromTemplate,
+  onCreateFromCustomUrl,
+  isCreating,
+}: NewProjectModalProps) {
+  const [activeTab, setActiveTab] = useState<'blank' | 'template'>('blank');
+  const [projectName, setProjectName] = useState('');
+  const [workspaceDir, setWorkspaceDir] = useState<string>('');
+  const [isLoadingWorkspace, setIsLoadingWorkspace] = useState(false);
+  const [selectedTemplate, setSelectedTemplate] = useState<StarterTemplate | null>(null);
+  const [useCustomUrl, setUseCustomUrl] = useState(false);
+  const [customUrl, setCustomUrl] = useState('');
+  const [errors, setErrors] = useState<ValidationErrors>({});
+  const { openFileBrowser } = useFileBrowser();
+
+  // Fetch workspace directory when modal opens
+  useEffect(() => {
+    if (open) {
+      setIsLoadingWorkspace(true);
+      getDefaultWorkspaceDirectory()
+        .then((defaultDir) => {
+          if (defaultDir) {
+            setWorkspaceDir(defaultDir);
+          }
+        })
+        .catch((error) => {
+          logger.error('Failed to get default workspace directory:', error);
+        })
+        .finally(() => {
+          setIsLoadingWorkspace(false);
+        });
+    }
+  }, [open]);
+
+  // Reset form when modal closes
+  useEffect(() => {
+    if (!open) {
+      setProjectName('');
+      setSelectedTemplate(null);
+      setUseCustomUrl(false);
+      setCustomUrl('');
+      setActiveTab('blank');
+      setErrors({});
+    }
+  }, [open]);
+
+  // Clear specific errors when user fixes them
+  useEffect(() => {
+    if (projectName && errors.projectName) {
+      setErrors((prev) => ({ ...prev, projectName: false }));
+    }
+  }, [projectName, errors.projectName]);
+
+  useEffect(() => {
+    if ((selectedTemplate || (useCustomUrl && customUrl)) && errors.templateSelection) {
+      setErrors((prev) => ({ ...prev, templateSelection: false }));
+    }
+  }, [selectedTemplate, useCustomUrl, customUrl, errors.templateSelection]);
+
+  useEffect(() => {
+    if (customUrl && errors.customUrl) {
+      setErrors((prev) => ({ ...prev, customUrl: false }));
+    }
+  }, [customUrl, errors.customUrl]);
+
+  const validateAndCreate = async () => {
+    const newErrors: ValidationErrors = {};
+
+    // Check project name
+    if (!projectName.trim()) {
+      newErrors.projectName = true;
+    }
+
+    // Check workspace dir
+    if (!workspaceDir) {
+      newErrors.workspaceDir = true;
+    }
+
+    // Check template selection (only for template tab)
+    if (activeTab === 'template') {
+      if (useCustomUrl) {
+        if (!customUrl.trim()) {
+          newErrors.customUrl = true;
+        }
+      } else if (!selectedTemplate) {
+        newErrors.templateSelection = true;
+      }
+    }
+
+    // If there are errors, show them and don't proceed
+    if (Object.values(newErrors).some(Boolean)) {
+      setErrors(newErrors);
+      return;
+    }
+
+    // Clear errors and proceed
+    setErrors({});
+
+    if (activeTab === 'blank') {
+      await onCreateBlankProject(projectName, workspaceDir);
+    } else if (useCustomUrl && customUrl) {
+      await onCreateFromCustomUrl(customUrl, projectName, workspaceDir);
+    } else if (selectedTemplate) {
+      await onCreateFromTemplate(selectedTemplate, projectName, workspaceDir);
+    }
+  };
+
+  const handleOpenRepo = (url: string) => {
+    const api = getElectronAPI();
+    api.openExternalLink(url);
+  };
+
+  const handleSelectTemplate = (template: StarterTemplate) => {
+    setSelectedTemplate(template);
+    setUseCustomUrl(false);
+    setCustomUrl('');
+  };
+
+  const handleToggleCustomUrl = () => {
+    setUseCustomUrl(!useCustomUrl);
+    if (!useCustomUrl) {
+      setSelectedTemplate(null);
+    }
+  };
+
+  const handleBrowseDirectory = async () => {
+    const selectedPath = await openFileBrowser({
+      title: 'Select Base Project Directory',
+      description: 'Choose the parent directory where your project will be created',
+      initialPath: workspaceDir || undefined,
+    });
+    if (selectedPath) {
+      setWorkspaceDir(selectedPath);
+      // Save to localStorage for next time
+      saveLastProjectDirectory(selectedPath);
+      // Clear any workspace error when a valid directory is selected
+      if (errors.workspaceDir) {
+        setErrors((prev) => ({ ...prev, workspaceDir: false }));
+      }
+    }
+  };
+
+  // Use platform-specific path separator
+  const pathSep =
+    typeof window !== 'undefined' && window.electronAPI
+      ? navigator.platform.indexOf('Win') !== -1
+        ? '\\'
+        : '/'
+      : '/';
+  const projectPath = workspaceDir && projectName ? `${workspaceDir}${pathSep}${projectName}` : '';
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="bg-card border-border max-w-2xl max-h-[85vh] overflow-hidden flex flex-col"
+        data-testid="new-project-modal"
+      >
+        <DialogHeader className="pb-2">
+          <DialogTitle className="text-foreground">Create New Project</DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            Start with a blank project or choose from a starter template.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Project Name Input - Always visible at top */}
+        <div className="space-y-3 pb-4 border-b border-border">
+          <div className="space-y-2">
+            <Label
+              htmlFor="project-name"
+              className={cn('text-foreground', errors.projectName && 'text-red-500')}
+            >
+              Project Name {errors.projectName && <span className="text-red-500">*</span>}
+            </Label>
+            <Input
+              id="project-name"
+              placeholder="my-awesome-project"
+              value={projectName}
+              onChange={(e) => setProjectName(e.target.value)}
+              className={cn(
+                'bg-input text-foreground placeholder:text-muted-foreground',
+                errors.projectName
+                  ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20'
+                  : 'border-border'
+              )}
+              data-testid="project-name-input"
+              autoFocus
+            />
+            {errors.projectName && <p className="text-xs text-red-500">Project name is required</p>}
+          </div>
+
+          {/* Workspace Directory Display */}
+          <div
+            className={cn(
+              'flex items-start gap-2 text-sm',
+              errors.workspaceDir ? 'text-red-500' : 'text-muted-foreground'
+            )}
+          >
+            <Folder className="w-4 h-4 shrink-0 mt-0.5" />
+            <span className="flex-1 min-w-0 flex flex-col gap-1">
+              {isLoadingWorkspace ? (
+                'Loading workspace...'
+              ) : workspaceDir ? (
+                <>
+                  <span>Will be created at:</span>
+                  <code
+                    className="text-xs bg-muted px-1.5 py-0.5 rounded truncate block max-w-full"
+                    title={projectPath || workspaceDir}
+                  >
+                    {projectPath || workspaceDir}
+                  </code>
+                </>
+              ) : null}
+            </span>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={handleBrowseDirectory}
+              disabled={isLoadingWorkspace}
+              className="shrink-0 h-7 px-2 text-xs"
+              data-testid="browse-directory-button"
+            >
+              <FolderOpen className="w-3.5 h-3.5 mr-1" />
+              Browse
+            </Button>
+          </div>
+        </div>
+
+        <Tabs
+          value={activeTab}
+          onValueChange={(v) => setActiveTab(v as 'blank' | 'template')}
+          className="flex-1 flex flex-col overflow-hidden"
+        >
+          <TabsList className="w-full justify-start">
+            <TabsTrigger value="blank" className="gap-2">
+              <FolderPlus className="w-4 h-4" />
+              Blank Project
+            </TabsTrigger>
+            <TabsTrigger value="template" className="gap-2">
+              <Rocket className="w-4 h-4" />
+              Starter Kit
+            </TabsTrigger>
+          </TabsList>
+
+          <div className="flex-1 overflow-y-auto py-4">
+            <TabsContent value="blank" className="mt-0">
+              <div className="p-4 rounded-lg bg-muted/50 border border-border">
+                <p className="text-sm text-muted-foreground">
+                  Create an empty project with the standard .automaker directory structure. Perfect
+                  for starting from scratch or importing an existing codebase.
+                </p>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="template" className="mt-0">
+              <div className="space-y-4">
+                {/* Error message for template selection */}
+                {errors.templateSelection && (
+                  <p className="text-sm text-red-500">
+                    Please select a template or enter a custom GitHub URL
+                  </p>
+                )}
+
+                {/* Preset Templates */}
+                <div
+                  className={cn(
+                    'space-y-3 rounded-lg p-1 -m-1',
+                    errors.templateSelection && 'ring-2 ring-red-500/50'
+                  )}
+                >
+                  {starterTemplates.map((template) => (
+                    <div
+                      key={template.id}
+                      className={cn(
+                        'p-4 rounded-lg border cursor-pointer transition-all',
+                        selectedTemplate?.id === template.id && !useCustomUrl
+                          ? 'border-brand-500 bg-brand-500/10'
+                          : 'border-border bg-muted/30 hover:border-border-glass hover:bg-muted/50'
+                      )}
+                      onClick={() => handleSelectTemplate(template)}
+                      data-testid={`template-${template.id}`}
+                    >
+                      <div className="flex items-start justify-between gap-4">
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2 mb-1">
+                            <h4 className="font-medium text-foreground">{template.name}</h4>
+                            {selectedTemplate?.id === template.id && !useCustomUrl && (
+                              <Check className="w-4 h-4 text-brand-500" />
+                            )}
+                          </div>
+                          <p className="text-sm text-muted-foreground mb-3">
+                            {template.description}
+                          </p>
+
+                          {/* Tech Stack */}
+                          <div className="flex flex-wrap gap-1.5 mb-3">
+                            {template.techStack.slice(0, 6).map((tech) => (
+                              <Badge key={tech} variant="secondary" className="text-xs">
+                                {tech}
+                              </Badge>
+                            ))}
+                            {template.techStack.length > 6 && (
+                              <Badge variant="secondary" className="text-xs">
+                                +{template.techStack.length - 6} more
+                              </Badge>
+                            )}
+                          </div>
+
+                          {/* Key Features */}
+                          <div className="text-xs text-muted-foreground">
+                            <span className="font-medium">Features: </span>
+                            {template.features.slice(0, 3).join(' · ')}
+                            {template.features.length > 3 &&
+                              ` · +${template.features.length - 3} more`}
+                          </div>
+                        </div>
+
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="shrink-0"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleOpenRepo(template.repoUrl);
+                          }}
+                        >
+                          <ExternalLink className="w-4 h-4 mr-1" />
+                          View
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+
+                  {/* Custom URL Option */}
+                  <div
+                    className={cn(
+                      'p-4 rounded-lg border cursor-pointer transition-all',
+                      useCustomUrl
+                        ? 'border-brand-500 bg-brand-500/10'
+                        : 'border-border bg-muted/30 hover:border-border-glass hover:bg-muted/50'
+                    )}
+                    onClick={handleToggleCustomUrl}
+                  >
+                    <div className="flex items-center gap-2 mb-2">
+                      <Link className="w-4 h-4 text-muted-foreground" />
+                      <h4 className="font-medium text-foreground">Custom GitHub URL</h4>
+                      {useCustomUrl && <Check className="w-4 h-4 text-brand-500" />}
+                    </div>
+                    <p className="text-sm text-muted-foreground mb-3">
+                      Clone any public GitHub repository as a starting point.
+                    </p>
+
+                    {useCustomUrl && (
+                      <div onClick={(e) => e.stopPropagation()} className="space-y-1">
+                        <Input
+                          placeholder="https://github.com/username/repository"
+                          value={customUrl}
+                          onChange={(e) => setCustomUrl(e.target.value)}
+                          className={cn(
+                            'bg-input text-foreground placeholder:text-muted-foreground',
+                            errors.customUrl
+                              ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20'
+                              : 'border-border'
+                          )}
+                          data-testid="custom-url-input"
+                        />
+                        {errors.customUrl && (
+                          <p className="text-xs text-red-500">GitHub URL is required</p>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+          </div>
+        </Tabs>
+
+        <DialogFooter className="border-t border-border pt-4">
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            className="text-muted-foreground hover:text-foreground hover:bg-accent"
+          >
+            Cancel
+          </Button>
+          <HotkeyButton
+            onClick={validateAndCreate}
+            disabled={isCreating}
+            className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-white border-0"
+            hotkey={{ key: 'Enter', cmdCtrl: true }}
+            hotkeyActive={open}
+            data-testid="confirm-create-project"
+          >
+            {isCreating ? (
+              <>
+                <Spinner size="sm" className="mr-2" />
+                {activeTab === 'template' ? 'Cloning...' : 'Creating...'}
+              </>
+            ) : (
+              <>Create Project</>
+            )}
+          </HotkeyButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/dialogs/pr-comment-resolution-dialog.tsx b/temp_repo/apps/ui/src/components/dialogs/pr-comment-resolution-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b64eea98745af14b2868d9a025138082cbba3990
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/dialogs/pr-comment-resolution-dialog.tsx
@@ -0,0 +1,1145 @@
+/**
+ * PR Comment Resolution Dialog
+ *
+ * A dialog that displays PR review comments with multi-selection support,
+ * allowing users to create feature tasks to address comments individually
+ * or as a group.
+ */
+
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import {
+  MessageSquare,
+  FileCode,
+  User,
+  AlertCircle,
+  CheckCircle2,
+  Loader2,
+  ChevronDown,
+  ArrowUpDown,
+  EyeOff,
+  Eye,
+  Maximize2,
+  Check,
+  Undo2,
+  RefreshCw,
+} from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { Spinner } from '@/components/ui/spinner';
+import { Markdown } from '@/components/ui/markdown';
+import { cn, generateUUID, normalizeModelEntry } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import { useGitHubPRReviewComments } from '@/hooks/queries';
+import { useCreateFeature, useResolveReviewThread } from '@/hooks/mutations';
+import { toast } from 'sonner';
+import type { PRReviewComment } from '@/lib/electron';
+import type { Feature } from '@/store/app-store';
+import type { PhaseModelEntry } from '@automaker/types';
+import { normalizeThinkingLevelForModel } from '@automaker/types';
+import { resolveModelString } from '@automaker/model-resolver';
+import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults';
+
+// ============================================
+// Types
+// ============================================
+
+type AddressMode = 'together' | 'individually';
+type SortOrder = 'newest' | 'oldest';
+
+/** Minimal PR info needed by the dialog - works with both GitHubPR and WorktreePRInfo */
+export interface PRCommentResolutionPRInfo {
+  number: number;
+  title: string;
+  /** The branch name (headRefName) associated with this PR, used to assign features to the correct worktree */
+  headRefName?: string;
+  /** The URL of the PR, used to set prUrl on created features */
+  url?: string;
+}
+
+interface PRCommentResolutionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  pr: PRCommentResolutionPRInfo;
+}
+
+// ============================================
+// Utility Functions
+// ============================================
+
+/** Generate a feature ID */
+function generateFeatureId(): string {
+  return generateUUID();
+}
+
+/** Format a date string for display */
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+/** Format a time string for display */
+function formatTime(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+  });
+}
+
+/** Format the file location string */
+function formatFileLocation(comment: PRReviewComment): string | null {
+  if (!comment.path) return null;
+  if (comment.line) return `${comment.path}:${comment.line}`;
+  return comment.path;
+}
+
+// ============================================
+// Prompt Generation
+// ============================================
+
+/** Generate a feature title for a single comment */
+function generateSingleCommentTitle(
+  pr: PRCommentResolutionPRInfo,
+  comment: PRReviewComment
+): string {
+  const location = comment.path
+    ? ` on ${comment.path}${comment.line ? `:${comment.line}` : ''}`
+    : '';
+  return `Address PR #${pr.number} comment by @${comment.author}${location}`;
+}
+
+/** Generate a feature title for multiple comments addressed together */
+function generateGroupTitle(pr: PRCommentResolutionPRInfo, comments: PRReviewComment[]): string {
+  return `Address ${comments.length} review comment${comments.length > 1 ? 's' : ''} on PR #${pr.number}`;
+}
+
+/** Generate a feature description for a single comment */
+function generateSingleCommentDescription(
+  pr: PRCommentResolutionPRInfo,
+  comment: PRReviewComment
+): string {
+  const fileContext = comment.path
+    ? `**File:** \`${comment.path}\`${comment.line ? ` (line ${comment.line})` : ''}\n`
+    : '';
+
+  return `## PR Review Comment Resolution
+
+**Pull Request:** #${pr.number} - ${pr.title}
+**Comment Author:** @${comment.author}
+${fileContext}
+### Review Comment
+
+> ${comment.body.split('\n').join('\n> ')}
+
+### Instructions
+
+Please address the review comment above. The comment was left ${comment.isReviewComment ? 'as an inline code review' : 'as a general PR'} comment${comment.path ? ` on file \`${comment.path}\`` : ''}${comment.line ? ` at line ${comment.line}` : ''}.
+
+Review the code in context and make the necessary changes to resolve this feedback. Ensure the changes:
+1. Directly address the reviewer's concern
+2. Follow the existing code patterns and conventions
+3. Do not introduce regressions
+`;
+}
+
+/** Generate a feature description for multiple comments addressed together */
+function generateGroupDescription(
+  pr: PRCommentResolutionPRInfo,
+  comments: PRReviewComment[]
+): string {
+  const commentSections = comments
+    .map((comment, index) => {
+      const fileContext = comment.path
+        ? `**File:** \`${comment.path}\`${comment.line ? ` (line ${comment.line})` : ''}\n`
+        : '';
+
+      return `### Comment ${index + 1} - by @${comment.author}
+${fileContext}
+> ${comment.body.split('\n').join('\n> ')}
+`;
+    })
+    .join('\n---\n\n');
+
+  return `## PR Review Comments Resolution
+
+**Pull Request:** #${pr.number} - ${pr.title}
+**Number of comments:** ${comments.length}
+
+Please address all of the following review comments from this pull request.
+
+---
+
+${commentSections}
+
+### Instructions
+
+Please address all the review comments listed above. For each comment:
+1. Review the code in context at the specified file and line
+2. Make the necessary changes to resolve the reviewer's feedback
+3. Ensure changes follow existing code patterns and conventions
+4. Do not introduce regressions
+`;
+}
+
+// ============================================
+// Comment Row Component
+// ============================================
+
+interface CommentRowProps {
+  comment: PRReviewComment;
+  isSelected: boolean;
+  onToggle: () => void;
+  onExpandDetail: () => void;
+  onResolve?: (comment: PRReviewComment, resolve: boolean) => void;
+  isResolvingThread?: boolean;
+}
+
+function CommentRow({
+  comment,
+  isSelected,
+  onToggle,
+  onExpandDetail,
+  onResolve,
+  isResolvingThread,
+}: CommentRowProps) {
+  const fileLocation = formatFileLocation(comment);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Determine if the comment body is long enough to need expansion
+  const PREVIEW_CHAR_LIMIT = 200;
+  const needsExpansion = comment.body.length > PREVIEW_CHAR_LIMIT || comment.body.includes('\n');
+
+  const handleExpandToggle = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsExpanded((prev) => !prev);
+  }, []);
+
+  const handleExpandDetail = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onExpandDetail();
+    },
+    [onExpandDetail]
+  );
+
+  const handleResolveClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (onResolve) {
+        onResolve(comment, !comment.isResolved);
+      }
+    },
+    [comment, onResolve]
+  );
+
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-3 p-3 rounded-lg border border-border transition-colors',
+        needsExpansion ? 'cursor-pointer' : 'cursor-default',
+        isSelected ? 'bg-accent/50 border-primary/30' : 'hover:bg-accent/30'
+      )}
+      onClick={needsExpansion ? () => setIsExpanded((prev) => !prev) : undefined}
+    >
+      <Checkbox
+        checked={isSelected}
+        onCheckedChange={() => onToggle()}
+        className="mt-0.5 shrink-0"
+        onClick={(e) => e.stopPropagation()}
+      />
+
+      <div className="flex-1 min-w-0">
+        {/* Header: disclosure triangle + author + file location + tags */}
+        <div className="flex items-start gap-1.5 flex-wrap mb-1">
+          <div className="flex items-center gap-2 flex-wrap flex-1 min-w-0">
+            <div className="flex items-center gap-1.5">
+              {comment.avatarUrl ? (
+                <img
+                  src={comment.avatarUrl}
+                  alt={comment.author}
+                  className="h-5 w-5 rounded-full"
+                />
+              ) : (
+                <div className="h-5 w-5 rounded-full bg-muted flex items-center justify-center">
+                  <User className="h-3 w-3 text-muted-foreground" />
+                </div>
+              )}
+              <span className="text-sm font-medium">@{comment.author}</span>
+            </div>
+
+            {fileLocation && (
+              <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                <FileCode className="h-3 w-3" />
+                <span className="font-mono">{fileLocation}</span>
+              </div>
+            )}
+
+            {comment.isBot && (
+              <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-purple-500/10 text-purple-500">
+                Bot
+              </span>
+            )}
+
+            {comment.isOutdated && (
+              <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-yellow-500/10 text-yellow-500">
+                Outdated
+              </span>
+            )}
+
+            {comment.isReviewComment && (
+              <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-blue-500/10 text-blue-500">
+                Review
+              </span>
+            )}
+
+            {comment.isResolved && (
+              <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-green-500/10 text-green-600 dark:text-green-500">
+                Resolved
+              </span>
+            )}
+
+            {/* Resolve / Unresolve button - only for review comments with a threadId */}
+            {comment.isReviewComment && comment.threadId && onResolve && (
+              <button
+                type="button"
+                onClick={handleResolveClick}
+                disabled={isResolvingThread}
+                className={cn(
+                  'shrink-0 transition-colors p-0.5 rounded flex items-center gap-1 text-[10px] font-medium',
+                  comment.isResolved
+                    ? 'text-green-600 dark:text-green-500 hover:text-muted-foreground hover:bg-muted'
+                    : 'text-muted-foreground hover:text-green-600 dark:hover:text-green-500 hover:bg-muted',
+                  isResolvingThread && 'opacity-50 cursor-not-allowed'
+                )}
+                title={comment.isResolved ? 'Unresolve this thread' : 'Resolve this thread'}
+              >
+                {isResolvingThread ? (
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                ) : comment.isResolved ? (
+                  <Undo2 className="h-3.5 w-3.5" />
+                ) : (
+                  <Check className="h-3.5 w-3.5" />
+                )}
+              </button>
+            )}
+
+            <div className="ml-auto shrink-0 flex items-center gap-1">
+              {/* Disclosure triangle - toggles expand/collapse */}
+              {needsExpansion ? (
+                <button
+                  type="button"
+                  onClick={handleExpandToggle}
+                  className="text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded hover:bg-muted"
+                  title={isExpanded ? 'Collapse comment' : 'Expand comment'}
+                >
+                  {isExpanded ? (
+                    <ChevronDown className="h-3.5 w-3.5" />
+                  ) : (
+                    <ChevronDown className="h-3.5 w-3.5 -rotate-90" />
+                  )}
+                </button>
+              ) : (
+                <span className="w-4 h-4" />
+              )}
+
+              {/* Expand detail button */}
+              <button
+                type="button"
+                onClick={handleExpandDetail}
+                className="text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded hover:bg-muted"
+                title="View full comment details"
+              >
+                <Maximize2 className="h-3.5 w-3.5" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Comment body - collapsible, rendered as markdown */}
+        {isExpanded ? (
+          <div onClick={(e) => e.stopPropagation()}>
+            <Markdown className="text-sm [&_p]:text-muted-foreground [&_li]:text-muted-foreground">
+              {comment.body}
+            </Markdown>
+          </div>
+        ) : (
+          <div className="line-clamp-2">
+            <Markdown className="text-sm [&_p]:text-muted-foreground [&_li]:text-muted-foreground [&_p]:my-0 [&_ul]:my-0 [&_ol]:my-0 [&_h1]:text-sm [&_h2]:text-sm [&_h3]:text-sm [&_h4]:text-sm [&_h1]:my-0 [&_h2]:my-0 [&_h3]:my-0 [&_h4]:my-0 [&_pre]:my-0 [&_blockquote]:my-0">
+              {comment.body}
+            </Markdown>
+          </div>
+        )}
+
+        {/* Date row */}
+        <div className="flex items-center mt-1">
+          <div className="flex flex-col">
+            <div className="text-xs text-muted-foreground">{formatDate(comment.createdAt)}</div>
+            <div className="text-xs text-muted-foreground/70">{formatTime(comment.createdAt)}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// Comment Detail Dialog Component
+// ============================================
+
+interface CommentDetailDialogProps {
+  comment: PRReviewComment | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+function CommentDetailDialog({ comment, open, onOpenChange }: CommentDetailDialogProps) {
+  if (!comment) return null;
+
+  const fileLocation = formatFileLocation(comment);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[85vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <MessageSquare className="h-5 w-5 text-blue-500" />
+            Comment Details
+          </DialogTitle>
+          <DialogDescription>
+            Full view of the review comment with rendered content.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 min-h-0 overflow-y-auto -mx-6 px-6">
+          <div className="space-y-4 pb-2">
+            {/* Author & metadata section */}
+            <div className="flex items-center gap-3 flex-wrap">
+              <div className="flex items-center gap-2">
+                {comment.avatarUrl ? (
+                  <img
+                    src={comment.avatarUrl}
+                    alt={comment.author}
+                    className="h-8 w-8 rounded-full"
+                  />
+                ) : (
+                  <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center">
+                    <User className="h-4 w-4 text-muted-foreground" />
+                  </div>
+                )}
+                <div>
+                  <span className="text-sm font-semibold">@{comment.author}</span>
+                  <div className="text-xs text-muted-foreground">
+                    {formatDate(comment.createdAt)} at {formatTime(comment.createdAt)}
+                  </div>
+                </div>
+              </div>
+
+              {/* Badges */}
+              <div className="flex items-center gap-1.5 ml-auto">
+                {comment.isBot && (
+                  <span className="px-2 py-0.5 text-xs font-medium rounded bg-purple-500/10 text-purple-500">
+                    Bot
+                  </span>
+                )}
+                {comment.isOutdated && (
+                  <span className="px-2 py-0.5 text-xs font-medium rounded bg-yellow-500/10 text-yellow-500">
+                    Outdated
+                  </span>
+                )}
+                {comment.isReviewComment && (
+                  <span className="px-2 py-0.5 text-xs font-medium rounded bg-blue-500/10 text-blue-500">
+                    Review
+                  </span>
+                )}
+                {comment.isResolved && (
+                  <span className="px-2 py-0.5 text-xs font-medium rounded bg-green-500/10 text-green-600 dark:text-green-500">
+                    Resolved
+                  </span>
+                )}
+              </div>
+            </div>
+
+            {/* File location */}
+            {fileLocation && (
+              <div className="flex items-center gap-2 p-2.5 rounded-lg bg-muted/50 border border-border">
+                <FileCode className="h-4 w-4 text-muted-foreground shrink-0" />
+                <span className="text-sm font-mono text-muted-foreground">{fileLocation}</span>
+              </div>
+            )}
+
+            {/* Diff hunk */}
+            {comment.diffHunk && (
+              <div className="rounded-lg border border-border overflow-hidden">
+                <div className="px-3 py-1.5 bg-muted/50 border-b border-border">
+                  <span className="text-xs font-medium text-muted-foreground">Code Context</span>
+                </div>
+                <pre className="p-3 text-xs font-mono overflow-x-auto bg-card text-foreground-secondary leading-relaxed">
+                  {comment.diffHunk}
+                </pre>
+              </div>
+            )}
+
+            {/* Comment body - rendered as markdown */}
+            <div className="rounded-lg border border-border p-4">
+              <Markdown className="text-sm">{comment.body}</Markdown>
+            </div>
+
+            {/* Additional metadata */}
+            {(comment.updatedAt || comment.commitId || comment.side) && (
+              <div className="flex items-center gap-4 text-xs text-muted-foreground flex-wrap">
+                {comment.updatedAt && comment.updatedAt !== comment.createdAt && (
+                  <span>Updated: {formatDate(comment.updatedAt)}</span>
+                )}
+                {comment.commitId && (
+                  <span className="font-mono">Commit: {comment.commitId.slice(0, 7)}</span>
+                )}
+                {comment.side && <span>Side: {comment.side}</span>}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter className="mt-4">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ============================================
+// Error State Component
+// ============================================
+
+interface CreationErrorStateProps {
+  errors: Array<{ comment: PRReviewComment; error: string }>;
+  onDismiss: () => void;
+}
+
+function CreationErrorState({ errors, onDismiss }: CreationErrorStateProps) {
+  return (
+    <div className="p-4 rounded-lg bg-destructive/10 border border-destructive/20">
+      <div className="flex items-center gap-2 mb-2">
+        <AlertCircle className="h-4 w-4 text-destructive" />
+        <span className="text-sm font-medium text-destructive">
+          Failed to create {errors.length} feature{errors.length > 1 ? 's' : ''}
+        </span>
+      </div>
+      <ul className="text-xs text-muted-foreground space-y-1 ml-6">
+        {errors.map((err, i) => (
+          <li key={i}>
+            <span className="font-medium">@{err.comment.author}</span>
+            {err.comment.path && <span> on {err.comment.path}</span>}: {err.error}
+          </li>
+        ))}
+      </ul>
+      <Button variant="ghost" size="sm" className="mt-2" onClick={onDismiss}>
+        Dismiss
+      </Button>
+    </div>
+  );
+}
+
+// ============================================
+// Main Dialog Component
+// ============================================
+
+export function PRCommentResolutionDialog({
+  open,
+  onOpenChange,
+  pr,
+}: PRCommentResolutionDialogProps) {
+  const { currentProject, defaultFeatureModel } = useAppStore();
+
+  // Use project-level default feature model if set, otherwise fall back to global
+  const effectiveDefaultFeatureModel = currentProject?.defaultFeatureModel ?? defaultFeatureModel;
+
+  // State
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [addressMode, setAddressMode] = useState<AddressMode>('together');
+  const [sortOrder, setSortOrder] = useState<SortOrder>('newest');
+  const [showResolved, setShowResolved] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [creationErrors, setCreationErrors] = useState<
+    Array<{ comment: PRReviewComment; error: string }>
+  >([]);
+  const [detailComment, setDetailComment] = useState<PRReviewComment | null>(null);
+
+  // Per-thread resolving state - tracks which threads are currently being resolved/unresolved
+  const [resolvingThreads, setResolvingThreads] = useState<Set<string>>(new Set());
+
+  // Model selection state
+  const [modelEntry, setModelEntry] = useState<PhaseModelEntry>({ model: 'claude-sonnet' });
+
+  // Track previous open state to detect when dialog opens
+  const wasOpenRef = useRef(false);
+
+  const handleModelChange = useCallback((entry: PhaseModelEntry) => {
+    const modelId = typeof entry.model === 'string' ? entry.model : '';
+    const normalizedThinkingLevel = normalizeThinkingLevelForModel(modelId, entry.thinkingLevel);
+
+    setModelEntry({ ...entry, thinkingLevel: normalizedThinkingLevel });
+  }, []);
+
+  // Fetch PR review comments
+  const {
+    data,
+    isLoading: loading,
+    isFetching: refreshing,
+    error,
+    refetch,
+  } = useGitHubPRReviewComments(currentProject?.path, open ? pr.number : undefined);
+
+  // Sync model defaults and refresh comments when dialog opens (transitions from closed to open)
+  useEffect(() => {
+    const justOpened = open && !wasOpenRef.current;
+    wasOpenRef.current = open;
+
+    if (justOpened) {
+      setModelEntry(effectiveDefaultFeatureModel);
+      // Force refresh PR comments from GitHub when dialog opens
+      refetch();
+    }
+  }, [open, effectiveDefaultFeatureModel, refetch]);
+
+  const allComments = useMemo(() => {
+    const raw = data?.comments ?? [];
+    // Sort based on current sort order
+    return [...raw].sort((a, b) => {
+      const dateA = new Date(a.createdAt).getTime();
+      const dateB = new Date(b.createdAt).getTime();
+      return sortOrder === 'newest' ? dateB - dateA : dateA - dateB;
+    });
+  }, [data, sortOrder]);
+
+  // Count resolved and unresolved comments for filter display
+  const resolvedCount = useMemo(
+    () => allComments.filter((c) => c.isResolved).length,
+    [allComments]
+  );
+  const hasResolvedComments = resolvedCount > 0;
+
+  const comments = useMemo(() => {
+    if (showResolved) return allComments;
+    return allComments.filter((c) => !c.isResolved);
+  }, [allComments, showResolved]);
+
+  // Feature creation mutation
+  const createFeature = useCreateFeature(currentProject?.path ?? '');
+
+  // Resolve/unresolve thread mutation
+  const resolveThread = useResolveReviewThread(currentProject?.path ?? '', pr.number);
+
+  // Derived state
+  const allSelected = comments.length > 0 && comments.every((c) => selectedIds.has(c.id));
+  const someSelected = selectedIds.size > 0 && !allSelected;
+  const noneSelected = selectedIds.size === 0;
+
+  // ============================================
+  // Handlers
+  // ============================================
+
+  const handleToggleComment = useCallback((commentId: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(commentId)) {
+        next.delete(commentId);
+      } else {
+        next.add(commentId);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleResolveComment = useCallback(
+    (comment: PRReviewComment, resolve: boolean) => {
+      if (!comment.threadId) return;
+      const threadId = comment.threadId;
+      setResolvingThreads((prev) => {
+        const next = new Set(prev);
+        next.add(threadId);
+        return next;
+      });
+      resolveThread.mutate(
+        { threadId, resolve },
+        {
+          onSettled: () => {
+            setResolvingThreads((prev) => {
+              const next = new Set(prev);
+              next.delete(threadId);
+              return next;
+            });
+          },
+        }
+      );
+    },
+    [resolveThread]
+  );
+
+  const handleSelectAll = useCallback(() => {
+    if (allSelected) {
+      setSelectedIds(new Set());
+    } else {
+      setSelectedIds(new Set(comments.map((c) => c.id)));
+    }
+  }, [allSelected, comments]);
+
+  const handleModeChange = useCallback((checked: boolean) => {
+    setAddressMode(checked ? 'individually' : 'together');
+  }, []);
+
+  const handleSortToggle = useCallback(() => {
+    setSortOrder((prev) => (prev === 'newest' ? 'oldest' : 'newest'));
+  }, []);
+
+  const handleShowResolvedToggle = useCallback(() => {
+    setShowResolved((prev) => {
+      const nextShowResolved = !prev;
+      // When hiding resolved comments, remove any selected resolved comment IDs
+      if (!nextShowResolved) {
+        setSelectedIds((prevIds) => {
+          const resolvedIds = new Set(allComments.filter((c) => c.isResolved).map((c) => c.id));
+          const next = new Set(prevIds);
+          for (const id of resolvedIds) {
+            next.delete(id);
+          }
+          return next.size !== prevIds.size ? next : prevIds;
+        });
+      }
+      return nextShowResolved;
+    });
+  }, [allComments]);
+
+  const handleSubmit = useCallback(async () => {
+    if (noneSelected || !currentProject?.path) return;
+
+    const selectedComments = comments.filter((c) => selectedIds.has(c.id));
+
+    // Resolve and normalize model settings
+    const normalizedEntry = normalizeModelEntry(modelEntry);
+    const selectedModel = resolveModelString(normalizedEntry.model);
+
+    setIsCreating(true);
+    setCreationErrors([]);
+
+    try {
+      if (addressMode === 'together') {
+        // Create a single feature for all selected comments
+        const feature: Feature = {
+          id: generateFeatureId(),
+          title: generateGroupTitle(pr, selectedComments),
+          category: 'bug-fix',
+          description: generateGroupDescription(pr, selectedComments),
+          steps: [],
+          status: 'backlog',
+          model: selectedModel,
+          thinkingLevel: normalizedEntry.thinkingLevel,
+          reasoningEffort: normalizedEntry.reasoningEffort,
+          providerId: normalizedEntry.providerId,
+          planningMode: 'skip',
+          requirePlanApproval: false,
+          dependencies: [],
+          ...(pr.url ? { prUrl: pr.url } : {}),
+          // Associate feature with the PR's branch so it appears on the correct worktree
+          ...(pr.headRefName ? { branchName: pr.headRefName } : {}),
+        };
+
+        await createFeature.mutateAsync(feature);
+        toast.success('Feature created', {
+          description: `Created feature to address ${selectedComments.length} PR comment${selectedComments.length > 1 ? 's' : ''}`,
+        });
+        onOpenChange(false);
+      } else {
+        // Create one feature per selected comment
+        const errors: Array<{ comment: PRReviewComment; error: string }> = [];
+        let successCount = 0;
+
+        for (const comment of selectedComments) {
+          try {
+            const feature: Feature = {
+              id: generateFeatureId(),
+              title: generateSingleCommentTitle(pr, comment),
+              category: 'bug-fix',
+              description: generateSingleCommentDescription(pr, comment),
+              steps: [],
+              status: 'backlog',
+              model: selectedModel,
+              thinkingLevel: normalizedEntry.thinkingLevel,
+              reasoningEffort: normalizedEntry.reasoningEffort,
+              providerId: normalizedEntry.providerId,
+              planningMode: 'skip',
+              requirePlanApproval: false,
+              dependencies: [],
+              ...(pr.url ? { prUrl: pr.url } : {}),
+              // Associate feature with the PR's branch so it appears on the correct worktree
+              ...(pr.headRefName ? { branchName: pr.headRefName } : {}),
+            };
+
+            await createFeature.mutateAsync(feature);
+            successCount++;
+          } catch (err) {
+            errors.push({
+              comment,
+              error: err instanceof Error ? err.message : 'Unknown error',
+            });
+          }
+        }
+
+        if (errors.length > 0) {
+          setCreationErrors(errors);
+          if (successCount > 0) {
+            toast.warning(`Created ${successCount} feature${successCount > 1 ? 's' : ''}`, {
+              description: `${errors.length} failed to create`,
+            });
+          }
+        } else {
+          toast.success(`Created ${successCount} feature${successCount > 1 ? 's' : ''}`, {
+            description: `Each PR comment will be addressed individually`,
+          });
+          onOpenChange(false);
+        }
+      }
+    } catch (err) {
+      toast.error('Failed to create feature', {
+        description: err instanceof Error ? err.message : 'Unknown error',
+      });
+    } finally {
+      setIsCreating(false);
+    }
+  }, [
+    noneSelected,
+    currentProject?.path,
+    comments,
+    selectedIds,
+    addressMode,
+    pr,
+    createFeature,
+    onOpenChange,
+    modelEntry,
+  ]);
+
+  const handleOpenChange = useCallback(
+    (newOpen: boolean) => {
+      if (!newOpen) {
+        // Reset state when closing
+        setSelectedIds(new Set());
+        setAddressMode('together');
+        setSortOrder('newest');
+        setShowResolved(false);
+        setCreationErrors([]);
+        setDetailComment(null);
+        setResolvingThreads(new Set());
+        setModelEntry(effectiveDefaultFeatureModel);
+      }
+      onOpenChange(newOpen);
+    },
+    [onOpenChange, effectiveDefaultFeatureModel]
+  );
+
+  // ============================================
+  // Render
+  // ============================================
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="max-w-3xl max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <div className="flex items-center justify-between pr-10">
+            <DialogTitle className="flex items-center gap-2">
+              <MessageSquare className="h-5 w-5 text-blue-500" />
+              Manage PR Review Comments
+            </DialogTitle>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0 shrink-0"
+              onClick={() => refetch()}
+              disabled={refreshing}
+              title="Refresh comments"
+            >
+              <RefreshCw className={cn('h-4 w-4', refreshing && 'animate-spin')} />
+            </Button>
+          </div>
+          <DialogDescription>
+            Select comments from PR #{pr.number} to create feature tasks that address them.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Content Area */}
+        <div className="flex-1 min-h-0 flex flex-col gap-4 overflow-hidden">
+          {/* Loading State */}
+          {loading && (
+            <div className="flex-1 flex items-center justify-center py-12">
+              <Spinner size="lg" />
+            </div>
+          )}
+
+          {/* Error State */}
+          {error && !loading && (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <div className="p-3 rounded-full bg-destructive/10 mb-3">
+                <AlertCircle className="h-8 w-8 text-destructive" />
+              </div>
+              <h3 className="text-sm font-medium mb-1">Failed to Load Comments</h3>
+              <p className="text-xs text-muted-foreground mb-3">
+                {error instanceof Error ? error.message : 'Unknown error'}
+              </p>
+              <Button variant="outline" size="sm" onClick={() => refetch()}>
+                Try Again
+              </Button>
+            </div>
+          )}
+
+          {/* Comments List (controls + items) - shown whenever there are any comments */}
+          {!loading && !error && allComments.length > 0 && (
+            <>
+              {/* Controls Bar */}
+              <div className="flex flex-wrap items-center justify-between gap-2 px-1">
+                {/* Select All - only interactive when there are visible comments */}
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    checked={allSelected ? true : someSelected ? 'indeterminate' : false}
+                    onCheckedChange={handleSelectAll}
+                    disabled={comments.length === 0}
+                  />
+                  <Label
+                    className={cn(
+                      'text-sm',
+                      comments.length > 0 ? 'cursor-pointer' : 'text-muted-foreground'
+                    )}
+                    onClick={comments.length > 0 ? handleSelectAll : undefined}
+                  >
+                    {allSelected
+                      ? 'Deselect all'
+                      : `Select all (${comments.length}${!showResolved && hasResolvedComments ? ` of ${allComments.length}` : ''})`}
+                  </Label>
+                </div>
+
+                <div className="flex flex-wrap items-center gap-2">
+                  {/* Show/Hide Resolved Filter Toggle - always visible */}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className={cn(
+                      'h-7 px-2 text-xs gap-1',
+                      showResolved && 'text-foreground',
+                      !hasResolvedComments && 'opacity-50'
+                    )}
+                    onClick={handleShowResolvedToggle}
+                    disabled={!hasResolvedComments}
+                    title={
+                      !hasResolvedComments
+                        ? 'No resolved comments'
+                        : showResolved
+                          ? `Showing all comments — click to hide ${resolvedCount} resolved`
+                          : `Hiding ${resolvedCount} resolved — click to show all`
+                    }
+                  >
+                    {showResolved ? (
+                      <>
+                        <Eye className="h-3 w-3" />
+                        Hide resolved
+                      </>
+                    ) : (
+                      <>
+                        <EyeOff className="h-3 w-3" />
+                        Show resolved
+                      </>
+                    )}
+                    {hasResolvedComments && (
+                      <span className="ml-0.5 px-1 py-0 text-[10px] font-medium rounded bg-muted text-muted-foreground">
+                        {resolvedCount}
+                      </span>
+                    )}
+                  </Button>
+
+                  {/* Sort Toggle Button */}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 px-2 text-xs gap-1"
+                    onClick={handleSortToggle}
+                    title={
+                      sortOrder === 'newest'
+                        ? 'Showing newest first — click for oldest first'
+                        : 'Showing oldest first — click for newest first'
+                    }
+                  >
+                    <ArrowUpDown className="h-3 w-3" />
+                    {sortOrder === 'newest' ? 'Newest first' : 'Oldest first'}
+                  </Button>
+
+                  {/* Mode Toggle */}
+                  <div className="flex items-center gap-2 shrink-0">
+                    <Label
+                      className={cn(
+                        'text-xs cursor-pointer',
+                        addressMode === 'together' ? 'text-foreground' : 'text-muted-foreground'
+                      )}
+                    >
+                      Together
+                    </Label>
+                    <Switch
+                      checked={addressMode === 'individually'}
+                      onCheckedChange={handleModeChange}
+                    />
+                    <Label
+                      className={cn(
+                        'text-xs cursor-pointer',
+                        addressMode === 'individually' ? 'text-foreground' : 'text-muted-foreground'
+                      )}
+                    >
+                      Individually
+                    </Label>
+                  </div>
+                </div>
+              </div>
+
+              {/* Empty State - all comments filtered out (all resolved, filter hiding them) */}
+              {comments.length === 0 && (
+                <div className="flex flex-col items-center justify-center py-10 text-center">
+                  <div className="p-3 rounded-full bg-muted/50 mb-3">
+                    <CheckCircle2 className="h-8 w-8 text-green-500" />
+                  </div>
+                  <h3 className="text-sm font-medium mb-1">All Comments Resolved</h3>
+                  <p className="text-xs text-muted-foreground mb-3">
+                    All {resolvedCount} comment{resolvedCount !== 1 ? 's' : ''} on this pull request{' '}
+                    {resolvedCount !== 1 ? 'have' : 'has'} been resolved.
+                  </p>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleShowResolvedToggle}
+                    className="text-xs"
+                  >
+                    <Eye className="h-3 w-3 mr-1.5" />
+                    Show resolved comments
+                  </Button>
+                </div>
+              )}
+
+              {/* Selection Info */}
+              {!noneSelected && comments.length > 0 && (
+                <div className="text-xs text-muted-foreground px-1">
+                  {selectedIds.size} comment{selectedIds.size > 1 ? 's' : ''} selected
+                  {addressMode === 'together'
+                    ? ' - will create 1 feature'
+                    : ` - will create ${selectedIds.size} feature${selectedIds.size > 1 ? 's' : ''}`}
+                </div>
+              )}
+
+              {/* Scrollable Comments */}
+              {comments.length > 0 && (
+                <div className="flex-1 overflow-auto space-y-2 min-h-0 pr-1">
+                  {comments.map((comment) => (
+                    <CommentRow
+                      key={comment.id}
+                      comment={comment}
+                      isSelected={selectedIds.has(comment.id)}
+                      onToggle={() => handleToggleComment(comment.id)}
+                      onExpandDetail={() => setDetailComment(comment)}
+                      onResolve={handleResolveComment}
+                      isResolvingThread={
+                        !!comment.threadId && resolvingThreads.has(comment.threadId)
+                      }
+                    />
+                  ))}
+                </div>
+              )}
+
+              {/* Creation Errors */}
+              {creationErrors.length > 0 && (
+                <CreationErrorState
+                  errors={creationErrors}
+                  onDismiss={() => setCreationErrors([])}
+                />
+              )}
+            </>
+          )}
+
+          {/* Empty State - no comments at all */}
+          {!loading && !error && allComments.length === 0 && (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <div className="p-3 rounded-full bg-muted/50 mb-3">
+                <CheckCircle2 className="h-8 w-8 text-green-500" />
+              </div>
+              <h3 className="text-sm font-medium mb-1">No Open Comments</h3>
+              <p className="text-xs text-muted-foreground">
+                This pull request has no comments to address.
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <DialogFooter className="mt-4">
+          <div className="flex items-center justify-between gap-2 w-full flex-wrap">
+            {/* Cancel button - left side */}
+            <Button variant="outline" onClick={() => handleOpenChange(false)} disabled={isCreating}>
+              Cancel
+            </Button>
+
+            {/* Model selector + Create button - right side */}
+            <div className="flex items-center gap-2">
+              {!loading && !error && allComments.length > 0 && (
+                <PhaseModelSelector
+                  value={modelEntry}
+                  onChange={handleModelChange}
+                  compact
+                  align="end"
+                />
+              )}
+              <Button
+                onClick={handleSubmit}
+                disabled={noneSelected || isCreating || loading || comments.length === 0}
+              >
+                {isCreating ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Creating...
+                  </>
+                ) : (
+                  <>
+                    Create Feature
+                    {addressMode === 'individually' && selectedIds.size > 1 ? 's' : ''}
+                    {!noneSelected && (
+                      <span className="ml-1.5 px-1.5 py-0.5 text-[10px] bg-primary-foreground/20 rounded">
+                        {addressMode === 'together' ? '1' : selectedIds.size}
+                      </span>
+                    )}
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+
+      {/* Comment Detail Dialog - opened when user clicks expand on a comment */}
+      <CommentDetailDialog
+        comment={detailComment}
+        open={!!detailComment}
+        onOpenChange={(open) => {
+          if (!open) setDetailComment(null);
+        }}
+      />
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/dialogs/project-file-selector-dialog.tsx b/temp_repo/apps/ui/src/components/dialogs/project-file-selector-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..79136dd47cecd24610e7a4817e2c6854f6144b8f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/dialogs/project-file-selector-dialog.tsx
@@ -0,0 +1,451 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import {
+  FolderOpen,
+  Folder,
+  FileCode,
+  ChevronRight,
+  ArrowLeft,
+  Check,
+  Search,
+  X,
+} from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Kbd, KbdGroup } from '@/components/ui/kbd';
+import { useOSDetection } from '@/hooks';
+import { apiPost } from '@/lib/api-fetch';
+import { cn } from '@/lib/utils';
+
+interface ProjectFileEntry {
+  name: string;
+  relativePath: string;
+  isDirectory: boolean;
+  isFile: boolean;
+}
+
+interface BrowseResult {
+  success: boolean;
+  currentRelativePath: string;
+  parentRelativePath: string | null;
+  entries: ProjectFileEntry[];
+  warning?: string;
+  error?: string;
+}
+
+interface ProjectFileSelectorDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSelect: (paths: string[]) => void;
+  projectPath: string;
+  existingFiles?: string[];
+  title?: string;
+  description?: string;
+}
+
+export function ProjectFileSelectorDialog({
+  open,
+  onOpenChange,
+  onSelect,
+  projectPath,
+  existingFiles = [],
+  title = 'Select Files to Copy',
+  description = 'Browse your project and select files or directories to copy into new worktrees.',
+}: ProjectFileSelectorDialogProps) {
+  const { isMac } = useOSDetection();
+  const [currentRelativePath, setCurrentRelativePath] = useState('');
+  const [parentRelativePath, setParentRelativePath] = useState<string | null>(null);
+  const [entries, setEntries] = useState<ProjectFileEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [warning, setWarning] = useState('');
+  const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set());
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Ref to track the current request generation; incremented to cancel stale requests
+  const requestGenRef = useRef(0);
+
+  // Track the path segments for breadcrumb navigation
+  const breadcrumbs = useMemo(() => {
+    if (!currentRelativePath) return [];
+    const parts = currentRelativePath.split('/').filter(Boolean);
+    return parts.map((part, index) => ({
+      name: part,
+      path: parts.slice(0, index + 1).join('/'),
+    }));
+  }, [currentRelativePath]);
+
+  const browseDirectory = useCallback(
+    async (relativePath?: string) => {
+      // Increment the generation counter so any previously in-flight request
+      // knows it has been superseded and should not update state.
+      const generation = ++requestGenRef.current;
+      const isCancelled = () => requestGenRef.current !== generation;
+
+      setLoading(true);
+      setError('');
+      setWarning('');
+      setSearchQuery('');
+
+      try {
+        const result = await apiPost<BrowseResult>('/api/fs/browse-project-files', {
+          projectPath,
+          relativePath: relativePath || '',
+        });
+
+        if (isCancelled()) return;
+
+        if (result.success) {
+          setCurrentRelativePath(result.currentRelativePath);
+          setParentRelativePath(result.parentRelativePath);
+          setEntries(result.entries);
+          setWarning(result.warning || '');
+        } else {
+          setError(result.error || 'Failed to browse directory');
+        }
+      } catch (err) {
+        if (isCancelled()) return;
+        setError(err instanceof Error ? err.message : 'Failed to load directory contents');
+      } finally {
+        if (!isCancelled()) {
+          setLoading(false);
+        }
+      }
+    },
+    [projectPath]
+  );
+
+  // Reset state when dialog opens/closes
+  useEffect(() => {
+    if (open) {
+      setSelectedPaths(new Set());
+      setSearchQuery('');
+      browseDirectory();
+    } else {
+      // Invalidate any in-flight request so it won't clobber the cleared state
+      requestGenRef.current++;
+      setCurrentRelativePath('');
+      setParentRelativePath(null);
+      setEntries([]);
+      setError('');
+      setWarning('');
+      setSelectedPaths(new Set());
+      setSearchQuery('');
+    }
+  }, [open, browseDirectory]);
+
+  const handleNavigateInto = useCallback(
+    (entry: ProjectFileEntry) => {
+      if (entry.isDirectory) {
+        browseDirectory(entry.relativePath);
+      }
+    },
+    [browseDirectory]
+  );
+
+  const handleGoBack = useCallback(() => {
+    if (parentRelativePath !== null) {
+      browseDirectory(parentRelativePath || undefined);
+    }
+  }, [parentRelativePath, browseDirectory]);
+
+  const handleGoToRoot = useCallback(() => {
+    browseDirectory();
+  }, [browseDirectory]);
+
+  const handleBreadcrumbClick = useCallback(
+    (path: string) => {
+      browseDirectory(path);
+    },
+    [browseDirectory]
+  );
+
+  const handleToggleSelect = useCallback((entry: ProjectFileEntry) => {
+    setSelectedPaths((prev) => {
+      const next = new Set(prev);
+      if (next.has(entry.relativePath)) {
+        next.delete(entry.relativePath);
+      } else {
+        next.add(entry.relativePath);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleConfirmSelection = useCallback(() => {
+    const paths = Array.from(selectedPaths);
+    if (paths.length > 0) {
+      onSelect(paths);
+      onOpenChange(false);
+    }
+  }, [selectedPaths, onSelect, onOpenChange]);
+
+  // Check if a path is already configured
+  const isAlreadyConfigured = useCallback(
+    (relativePath: string) => {
+      return existingFiles.includes(relativePath);
+    },
+    [existingFiles]
+  );
+
+  // Filter entries based on search query
+  const filteredEntries = useMemo(() => {
+    if (!searchQuery.trim()) return entries;
+    const query = searchQuery.toLowerCase();
+    return entries.filter((entry) => entry.name.toLowerCase().includes(query));
+  }, [entries, searchQuery]);
+
+  // Handle Command/Ctrl+Enter keyboard shortcut
+  useEffect(() => {
+    if (!open) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        if (selectedPaths.size > 0 && !loading) {
+          handleConfirmSelection();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [open, selectedPaths, loading, handleConfirmSelection]);
+
+  const selectedCount = selectedPaths.size;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-popover border-border max-w-2xl max-h-[80vh] overflow-hidden flex flex-col p-4 focus:outline-none focus-visible:outline-none">
+        <DialogHeader className="pb-1">
+          <DialogTitle className="flex items-center gap-2 text-base">
+            <FolderOpen className="w-4 h-4 text-brand-500" />
+            {title}
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground text-xs">
+            {description}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-2 min-h-[300px] flex-1 overflow-hidden py-1">
+          {/* Navigation bar */}
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleGoBack}
+              className="h-7 w-7 shrink-0"
+              disabled={loading || parentRelativePath === null}
+              aria-label="Go back"
+            >
+              <ArrowLeft className="w-4 h-4" />
+            </Button>
+
+            {/* Breadcrumb path */}
+            <div className="flex items-center gap-1 min-w-0 flex-1 h-8 px-3 rounded-md border border-input bg-background/50 overflow-x-auto scrollbar-none">
+              <button
+                onClick={handleGoToRoot}
+                className={cn(
+                  'text-xs font-mono shrink-0 transition-colors',
+                  currentRelativePath
+                    ? 'text-muted-foreground hover:text-foreground'
+                    : 'text-foreground font-medium'
+                )}
+                disabled={loading}
+              >
+                Project Root
+              </button>
+              {breadcrumbs.map((crumb) => (
+                <span key={crumb.path} className="flex items-center gap-1 shrink-0">
+                  <ChevronRight className="w-3 h-3 text-muted-foreground/50" />
+                  <button
+                    onClick={() => handleBreadcrumbClick(crumb.path)}
+                    className={cn(
+                      'text-xs font-mono truncate max-w-[150px] transition-colors',
+                      crumb.path === currentRelativePath
+                        ? 'text-foreground font-medium'
+                        : 'text-muted-foreground hover:text-foreground'
+                    )}
+                    disabled={loading}
+                  >
+                    {crumb.name}
+                  </button>
+                </span>
+              ))}
+            </div>
+          </div>
+
+          {/* Search filter */}
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
+            <Input
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Filter files and directories..."
+              className="h-8 text-xs pl-8 pr-8"
+              disabled={loading}
+            />
+            {searchQuery && (
+              <button
+                onClick={() => setSearchQuery('')}
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+
+          {/* Selected items indicator */}
+          {selectedCount > 0 && (
+            <div className="flex items-center gap-2 px-3 py-1.5 rounded-md bg-brand-500/10 border border-brand-500/20 text-xs">
+              <Check className="w-3.5 h-3.5 text-brand-500" />
+              <span className="text-brand-500 font-medium">
+                {selectedCount} {selectedCount === 1 ? 'item' : 'items'} selected
+              </span>
+              <button
+                onClick={() => setSelectedPaths(new Set())}
+                className="ml-auto text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Clear
+              </button>
+            </div>
+          )}
+
+          {/* File/directory list */}
+          <div className="flex-1 overflow-y-auto border border-sidebar-border rounded-md scrollbar-styled">
+            {loading && (
+              <div className="flex items-center justify-center h-full p-4">
+                <div className="text-xs text-muted-foreground">Loading...</div>
+              </div>
+            )}
+
+            {error && (
+              <div className="flex items-center justify-center h-full p-4">
+                <div className="text-xs text-destructive">{error}</div>
+              </div>
+            )}
+
+            {warning && (
+              <div className="p-2 bg-yellow-500/10 border border-yellow-500/30 rounded-md mb-1">
+                <div className="text-xs text-yellow-500">{warning}</div>
+              </div>
+            )}
+
+            {!loading && !error && filteredEntries.length === 0 && (
+              <div className="flex items-center justify-center h-full p-4">
+                <div className="text-xs text-muted-foreground">
+                  {searchQuery ? 'No matching files or directories' : 'This directory is empty'}
+                </div>
+              </div>
+            )}
+
+            {!loading && !error && filteredEntries.length > 0 && (
+              <div className="divide-y divide-sidebar-border">
+                {filteredEntries.map((entry) => {
+                  const isSelected = selectedPaths.has(entry.relativePath);
+                  const isConfigured = isAlreadyConfigured(entry.relativePath);
+
+                  return (
+                    <div
+                      key={entry.relativePath}
+                      className={cn(
+                        'w-full flex items-center gap-2 px-2 py-1.5 transition-colors text-left group',
+                        isConfigured
+                          ? 'opacity-50'
+                          : isSelected
+                            ? 'bg-brand-500/10'
+                            : 'hover:bg-sidebar-accent/10'
+                      )}
+                    >
+                      {/* Checkbox for selection */}
+                      <Checkbox
+                        checked={isSelected}
+                        onCheckedChange={() => handleToggleSelect(entry)}
+                        disabled={isConfigured}
+                        className="shrink-0"
+                        aria-label={`Select ${entry.name}`}
+                      />
+
+                      {/* Icon */}
+                      {entry.isDirectory ? (
+                        <Folder className="w-4 h-4 text-brand-500 shrink-0" />
+                      ) : (
+                        <FileCode className="w-4 h-4 text-muted-foreground/60 shrink-0" />
+                      )}
+
+                      {/* File/directory name */}
+                      <span
+                        className="flex-1 truncate text-xs font-mono cursor-pointer"
+                        onClick={() => {
+                          if (!isConfigured) {
+                            handleToggleSelect(entry);
+                          }
+                        }}
+                      >
+                        {entry.name}
+                      </span>
+
+                      {/* Already configured badge */}
+                      {isConfigured && (
+                        <span className="text-[10px] text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded shrink-0">
+                          Already added
+                        </span>
+                      )}
+
+                      {/* Navigate into directory button */}
+                      {entry.isDirectory && (
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleNavigateInto(entry);
+                          }}
+                          className="opacity-60 sm:opacity-0 sm:group-hover:opacity-100 p-0.5 rounded hover:bg-accent/50 transition-all shrink-0"
+                          title={`Open ${entry.name}`}
+                        >
+                          <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />
+                        </button>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          <div className="text-[10px] text-muted-foreground">
+            Select files or directories to copy into new worktrees. Directories are copied
+            recursively. Click the arrow to browse into a directory.
+          </div>
+        </div>
+
+        <DialogFooter className="border-t border-border pt-3 gap-2 mt-1">
+          <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            onClick={handleConfirmSelection}
+            disabled={selectedCount === 0 || loading}
+            title={`Add ${selectedCount} selected items (${isMac ? '⌘' : 'Ctrl'}+Enter)`}
+          >
+            <Check className="w-3.5 h-3.5 mr-1.5" />
+            Add {selectedCount > 0 ? `${selectedCount} ` : ''}
+            {selectedCount === 1 ? 'Item' : 'Items'}
+            <KbdGroup className="ml-1">
+              <Kbd>{isMac ? '⌘' : 'Ctrl'}</Kbd>
+              <Kbd>↵</Kbd>
+            </KbdGroup>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/dialogs/sandbox-rejection-screen.tsx b/temp_repo/apps/ui/src/components/dialogs/sandbox-rejection-screen.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ad16fc01d8ba2ef805358811cba3d8263c0b099b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/dialogs/sandbox-rejection-screen.tsx
@@ -0,0 +1,53 @@
+/**
+ * Sandbox Rejection Screen
+ *
+ * Shown in web mode when user denies the sandbox risk confirmation.
+ * Prompts them to either restart the app in a container or reload to try again.
+ */
+
+import { ShieldX, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export function SandboxRejectionScreen() {
+  const handleReload = () => {
+    // Clear the rejection state and reload
+    sessionStorage.removeItem('automaker-sandbox-denied');
+    window.location.reload();
+  };
+
+  return (
+    <div className="min-h-full bg-background flex items-center justify-center p-4">
+      <div className="max-w-md w-full text-center space-y-6">
+        <div className="flex justify-center">
+          <div className="rounded-full bg-destructive/10 p-4">
+            <ShieldX className="w-12 h-12 text-destructive" />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <h1 className="text-2xl font-semibold">Access Denied</h1>
+          <p className="text-muted-foreground">
+            You declined to accept the risks of running Automaker outside a sandbox environment.
+          </p>
+        </div>
+
+        <p className="text-sm text-muted-foreground">
+          For safer operation, consider running Automaker in Docker. See the README for
+          instructions.
+        </p>
+
+        <div className="pt-2">
+          <Button
+            variant="outline"
+            onClick={handleReload}
+            className="gap-2"
+            data-testid="sandbox-retry"
+          >
+            <RefreshCw className="w-4 h-4" />
+            Reload &amp; Try Again
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/dialogs/sandbox-risk-dialog.tsx b/temp_repo/apps/ui/src/components/dialogs/sandbox-risk-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b42b102132e7bdae21976fa6fbe4be9b2a109be4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/dialogs/sandbox-risk-dialog.tsx
@@ -0,0 +1,134 @@
+/**
+ * Sandbox Risk Confirmation Dialog
+ *
+ * Shows when the app is running outside a containerized environment.
+ * Users must acknowledge the risks before proceeding.
+ */
+
+import { useState } from 'react';
+import { ShieldAlert } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+interface SandboxRiskDialogProps {
+  open: boolean;
+  onConfirm: (skipInFuture: boolean) => void;
+  onDeny: () => void;
+}
+
+export function SandboxRiskDialog({ open, onConfirm, onDeny }: SandboxRiskDialogProps) {
+  const [skipInFuture, setSkipInFuture] = useState(false);
+
+  const handleConfirm = () => {
+    onConfirm(skipInFuture);
+    // Reset checkbox state after confirmation
+    setSkipInFuture(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={() => {}}>
+      <DialogContent
+        className="bg-popover border-border max-w-lg flex flex-col"
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onEscapeKeyDown={(e) => e.preventDefault()}
+        showCloseButton={false}
+      >
+        <DialogHeader className="shrink-0">
+          <DialogTitle className="flex items-center gap-2 text-destructive">
+            <ShieldAlert className="w-6 h-6 shrink-0" />
+            Sandbox Environment Not Detected
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto min-h-0 -mx-6 px-6">
+          <DialogDescription asChild>
+            <div className="space-y-4 pt-2 pb-2">
+              <p className="text-muted-foreground">
+                <strong>Warning:</strong> This application is running outside of a containerized
+                sandbox environment. AI agents will have direct access to your filesystem and can
+                execute commands on your system.
+              </p>
+
+              <div className="bg-destructive/10 border border-destructive/20 rounded-lg p-4 space-y-2">
+                <p className="text-sm font-medium text-destructive">Potential Risks:</p>
+                <ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
+                  <li>Agents can read, modify, or delete files on your system</li>
+                  <li>Agents can execute arbitrary commands and install software</li>
+                  <li>Agents can access environment variables and credentials</li>
+                  <li>Unintended side effects from agent actions may affect your system</li>
+                </ul>
+              </div>
+
+              <p className="text-sm text-muted-foreground">
+                For safer operation, consider running Automaker in Docker. See the README for
+                instructions.
+              </p>
+
+              <div className="bg-muted/50 border border-border rounded-lg p-4 space-y-2">
+                <p className="text-sm font-medium text-foreground">
+                  Already running in Docker? Try these troubleshooting steps:
+                </p>
+                <ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
+                  <li>
+                    Ensure <code className="bg-muted px-1 rounded">IS_CONTAINERIZED=true</code> is
+                    set in your docker-compose environment
+                  </li>
+                  <li>
+                    Verify the server container has the environment variable:{' '}
+                    <code className="bg-muted px-1 rounded">
+                      docker exec automaker-server printenv IS_CONTAINERIZED
+                    </code>
+                  </li>
+                  <li>Rebuild and restart containers if you recently changed the configuration</li>
+                  <li>
+                    Check the server logs for startup messages:{' '}
+                    <code className="bg-muted px-1 rounded">docker-compose logs server</code>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </DialogDescription>
+        </div>
+
+        <DialogFooter className="flex-col gap-4 sm:flex-col pt-4 shrink-0 border-t border-border mt-4">
+          <div className="flex items-center space-x-2 self-start">
+            <Checkbox
+              id="skip-sandbox-warning"
+              checked={skipInFuture}
+              onCheckedChange={(checked) => setSkipInFuture(checked === true)}
+              data-testid="sandbox-skip-checkbox"
+            />
+            <Label
+              htmlFor="skip-sandbox-warning"
+              className="text-sm text-muted-foreground cursor-pointer"
+            >
+              Do not show this warning again
+            </Label>
+          </div>
+          <div className="flex gap-2 sm:gap-2 w-full sm:justify-end">
+            <Button variant="outline" onClick={onDeny} className="px-4" data-testid="sandbox-deny">
+              Deny &amp; Exit
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleConfirm}
+              className="px-4"
+              data-testid="sandbox-confirm"
+            >
+              <ShieldAlert className="w-4 h-4 mr-2" />I Accept the Risks
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/dialogs/workspace-picker-modal.tsx b/temp_repo/apps/ui/src/components/dialogs/workspace-picker-modal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9a54f7ab30d4c3817d6e82a2459652b8ac983eec
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/dialogs/workspace-picker-modal.tsx
@@ -0,0 +1,115 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Folder, FolderOpen, AlertCircle } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { useWorkspaceDirectories } from '@/hooks/queries';
+
+interface WorkspaceDirectory {
+  name: string;
+  path: string;
+}
+
+interface WorkspacePickerModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSelect: (path: string, name: string) => void;
+}
+
+export function WorkspacePickerModal({ open, onOpenChange, onSelect }: WorkspacePickerModalProps) {
+  // React Query hook - only fetch when modal is open
+  const { data: directories = [], isLoading, error, refetch } = useWorkspaceDirectories(open);
+
+  const handleSelect = (dir: WorkspaceDirectory) => {
+    onSelect(dir.path, dir.name);
+  };
+
+  const errorMessage = error instanceof Error ? error.message : null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-card border-border max-w-lg max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-foreground">
+            <FolderOpen className="w-5 h-5 text-brand-500" />
+            Select Project
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            Choose a project from your workspace directory
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto py-4 min-h-[200px]">
+          {isLoading && (
+            <div className="flex flex-col items-center justify-center h-full gap-3">
+              <Spinner size="xl" />
+              <p className="text-sm text-muted-foreground">Loading projects...</p>
+            </div>
+          )}
+
+          {errorMessage && !isLoading && (
+            <div className="flex flex-col items-center justify-center h-full gap-3 text-center px-4">
+              <div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center">
+                <AlertCircle className="w-6 h-6 text-destructive" />
+              </div>
+              <p className="text-sm text-destructive">{errorMessage}</p>
+              <Button variant="secondary" size="sm" onClick={() => refetch()} className="mt-2">
+                Try Again
+              </Button>
+            </div>
+          )}
+
+          {!isLoading && !errorMessage && directories.length === 0 && (
+            <div className="flex flex-col items-center justify-center h-full gap-3 text-center px-4">
+              <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center">
+                <Folder className="w-6 h-6 text-muted-foreground" />
+              </div>
+              <p className="text-sm text-muted-foreground">
+                No projects found in workspace directory
+              </p>
+            </div>
+          )}
+
+          {!isLoading && !errorMessage && directories.length > 0 && (
+            <div className="space-y-2">
+              {directories.map((dir) => (
+                <button
+                  key={dir.path}
+                  onClick={() => handleSelect(dir)}
+                  className="w-full flex items-center gap-3 p-3 rounded-lg border border-border bg-card hover:bg-card/70 hover:border-brand-500/50 transition-all duration-200 text-left group"
+                  data-testid={`workspace-dir-${dir.name}`}
+                >
+                  <div className="w-10 h-10 rounded-lg bg-muted border border-border flex items-center justify-center group-hover:border-brand-500/50 transition-colors shrink-0">
+                    <Folder className="w-5 h-5 text-muted-foreground group-hover:text-brand-500 transition-colors" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium text-foreground truncate group-hover:text-brand-500 transition-colors">
+                      {dir.name}
+                    </p>
+                    <p className="text-xs text-muted-foreground/70 truncate">{dir.path}</p>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            className="text-muted-foreground hover:text-foreground hover:bg-accent"
+          >
+            Cancel
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/icons/editor-icons.tsx b/temp_repo/apps/ui/src/components/icons/editor-icons.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a4537d5f4f4b44ad330e7c700bdb34aaf49b3e21
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/icons/editor-icons.tsx
@@ -0,0 +1,220 @@
+import type { ComponentType, ComponentProps } from 'react';
+import { FolderOpen } from 'lucide-react';
+
+type IconProps = ComponentProps<'svg'>;
+type IconComponent = ComponentType<IconProps>;
+
+const ANTIGRAVITY_COMMANDS = ['antigravity', 'agy'] as const;
+const [PRIMARY_ANTIGRAVITY_COMMAND, LEGACY_ANTIGRAVITY_COMMAND] = ANTIGRAVITY_COMMANDS;
+
+/**
+ * Cursor editor logo icon - from LobeHub icons
+ */
+export function CursorIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M22.106 5.68L12.5.135a.998.998 0 00-.998 0L1.893 5.68a.84.84 0 00-.419.726v11.186c0 .3.16.577.42.727l9.607 5.547a.999.999 0 00.998 0l9.608-5.547a.84.84 0 00.42-.727V6.407a.84.84 0 00-.42-.726zm-.603 1.176L12.228 22.92c-.063.108-.228.064-.228-.061V12.34a.59.59 0 00-.295-.51l-9.11-5.26c-.107-.062-.063-.228.062-.228h18.55c.264 0 .428.286.296.514z" />
+    </svg>
+  );
+}
+
+/**
+ * VS Code editor logo icon
+ */
+export function VSCodeIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
+    </svg>
+  );
+}
+
+/**
+ * VS Code Insiders editor logo icon (same as VS Code)
+ */
+export function VSCodeInsidersIcon(props: IconProps) {
+  return <VSCodeIcon {...props} />;
+}
+
+/**
+ * Kiro editor logo icon (VS Code fork)
+ */
+export function KiroIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M6.594.016A7.006 7.006 0 0 0 .742 3.875a6.996 6.996 0 0 0-.726 2.793C.004 6.878 0 9.93.004 16.227c.004 8.699.008 9.265.031 9.476.113.93.324 1.652.707 2.422a6.918 6.918 0 0 0 3.172 3.148c.75.372 1.508.59 2.398.692.227.027.77.027 9.688.027 8.945 0 9.457 0 9.688-.027.917-.106 1.66-.32 2.437-.707a6.918 6.918 0 0 0 3.148-3.172c.372-.75.59-1.508.692-2.398.027-.227.027-.77.027-9.665 0-9.976.004-9.53-.07-10.03a6.993 6.993 0 0 0-3.024-4.798 6.427 6.427 0 0 0-.757-.445 7.06 7.06 0 0 0-2.774-.734c-.328-.02-18.437-.02-18.773 0Zm10.789 5.406a7.556 7.556 0 0 1 6.008 3.805c.148.257.406.796.52 1.085.394 1 .632 2.157.769 3.75.035.38.05 1.965.023 2.407-.125 2.168-.625 4.183-1.515 6.078a9.77 9.77 0 0 1-.801 1.437c-.93 1.305-2.32 2.332-3.48 2.57-.895.184-1.602-.1-2.048-.827a3.42 3.42 0 0 1-.25-.528c-.035-.097-.062-.129-.086-.09-.003.008-.09.075-.191.153-.95.722-2.02 1.175-3.059 1.293-.273.03-.859.023-1.085-.016-.715-.121-1.286-.441-1.649-.93a2.563 2.563 0 0 1-.328-.632c-.117-.36-.156-.813-.117-1.227.054-.55.226-1.184.484-1.766a.48.48 0 0 0 .043-.117 2.11 2.11 0 0 0-.137.055c-.363.16-.898.305-1.308.351-.844.098-1.426-.14-1.715-.699-.106-.203-.149-.39-.16-.676-.008-.261.008-.43.066-.656.059-.23.121-.367.403-.89.382-.72.492-.946.636-1.348.328-.899.48-1.723.688-3.754.148-1.469.254-2.14.433-2.766.028-.09.078-.277.114-.414.796-3.074 3.113-5.183 6.148-5.601.129-.016.309-.04.399-.047.238-.016.96-.02 1.195 0Zm0 0" />
+      <path d="M16.754 11.336a.815.815 0 0 0-.375.219c-.176.18-.293.441-.356.804-.039.235-.058.602-.039.868.028.406.082.64.204.894.128.262.304.426.546.496.106.031.383.031.5 0 .422-.113.703-.531.801-1.191a4.822 4.822 0 0 0-.012-.95c-.062-.378-.183-.675-.359-.863a.808.808 0 0 0-.648-.293.804.804 0 0 0-.262.016ZM20.375 11.328a1.01 1.01 0 0 0-.363.188c-.164.144-.293.402-.364.718-.05.23-.07.426-.07.743 0 .32.02.511.07.742.11.496.352.808.688.898.121.031.379.031.5 0 .402-.105.68-.5.781-1.11.035-.198.047-.648.024-.87-.063-.63-.293-1.059-.649-1.23a1.513 1.513 0 0 0-.219-.079 1.362 1.362 0 0 0-.398 0Zm0 0" />
+    </svg>
+  );
+}
+
+/**
+ * Zed editor logo icon (from Simple Icons)
+ */
+export function ZedIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M2.25 1.5a.75.75 0 0 0-.75.75v16.5H0V2.25A2.25 2.25 0 0 1 2.25 0h20.095c1.002 0 1.504 1.212.795 1.92L10.764 14.298h3.486V12.75h1.5v1.922a1.125 1.125 0 0 1-1.125 1.125H9.264l-2.578 2.578h11.689V9h1.5v9.375a1.5 1.5 0 0 1-1.5 1.5H5.185L2.562 22.5H21.75a.75.75 0 0 0 .75-.75V5.25H24v16.5A2.25 2.25 0 0 1 21.75 24H1.655C.653 24 .151 22.788.86 22.08L13.19 9.75H9.75v1.5h-1.5V9.375A1.125 1.125 0 0 1 9.375 8.25h5.314l2.625-2.625H5.625V15h-1.5V5.625a1.5 1.5 0 0 1 1.5-1.5h13.19L21.438 1.5z" />
+    </svg>
+  );
+}
+
+/**
+ * Sublime Text editor logo icon
+ */
+export function SublimeTextIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M20.953.004a.397.397 0 0 0-.18.045L3.473 8.63a.397.397 0 0 0-.033.69l4.873 3.33-5.26 2.882a.397.397 0 0 0-.006.692l17.3 9.73a.397.397 0 0 0 .593-.344V15.094a.397.397 0 0 0-.203-.346l-4.917-2.763 5.233-2.725a.397.397 0 0 0 .207-.348V.397a.397.397 0 0 0-.307-.393z" />
+    </svg>
+  );
+}
+
+/**
+ * macOS Finder icon
+ */
+export function FinderIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M2.5 3A2.5 2.5 0 0 0 0 5.5v13A2.5 2.5 0 0 0 2.5 21h19a2.5 2.5 0 0 0 2.5-2.5v-13A2.5 2.5 0 0 0 21.5 3h-19zM7 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm10 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm-9 6c0-.276.336-.5.75-.5h6.5c.414 0 .75.224.75.5v1c0 .828-1.343 2.5-4 2.5s-4-1.672-4-2.5v-1z" />
+    </svg>
+  );
+}
+
+/**
+ * Windsurf editor logo icon (by Codeium) - from LobeHub icons
+ */
+export function WindsurfIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M23.78 5.004h-.228a2.187 2.187 0 00-2.18 2.196v4.912c0 .98-.804 1.775-1.76 1.775a1.818 1.818 0 01-1.472-.773L13.168 5.95a2.197 2.197 0 00-1.81-.95c-1.134 0-2.154.972-2.154 2.173v4.94c0 .98-.797 1.775-1.76 1.775-.57 0-1.136-.289-1.472-.773L.408 5.098C.282 4.918 0 5.007 0 5.228v4.284c0 .216.066.426.188.604l5.475 7.889c.324.466.8.812 1.351.938 1.377.316 2.645-.754 2.645-2.117V11.89c0-.98.787-1.775 1.76-1.775h.002c.586 0 1.135.288 1.472.773l4.972 7.163a2.15 2.15 0 001.81.95c1.158 0 2.151-.973 2.151-2.173v-4.939c0-.98.787-1.775 1.76-1.775h.194c.122 0 .22-.1.22-.222V5.225a.221.221 0 00-.22-.222z"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Trae editor logo icon (by ByteDance) - from LobeHub icons
+ */
+export function TraeIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M24 20.541H3.428v-3.426H0V3.4h24V20.54zM3.428 17.115h17.144V6.827H3.428v10.288zm8.573-5.196l-2.425 2.424-2.424-2.424 2.424-2.424 2.425 2.424zm6.857-.001l-2.424 2.423-2.425-2.423 2.425-2.425 2.424 2.425z" />
+    </svg>
+  );
+}
+
+/**
+ * JetBrains Rider logo icon
+ */
+export function RiderIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M0 0v24h24V0zm7.031 3.113A4.063 4.063 0 0 1 9.72 4.14a3.23 3.23 0 0 1 .84 2.28A3.16 3.16 0 0 1 8.4 9.54l2.46 3.6H8.28L6.12 9.9H4.38v3.24H2.16V3.12c1.61-.004 3.281.009 4.871-.007zm5.509.007h3.96c3.18 0 5.34 2.16 5.34 5.04 0 2.82-2.16 5.04-5.34 5.04h-3.96zm4.069 1.976c-.607.01-1.235.004-1.849.004v6.06h1.74a2.882 2.882 0 0 0 3.06-3 2.897 2.897 0 0 0-2.951-3.064zM4.319 5.1v2.88H6.6c1.08 0 1.68-.6 1.68-1.44 0-.96-.66-1.44-1.74-1.44zM2.16 19.5h9V21h-9Z" />
+    </svg>
+  );
+}
+
+/**
+ * JetBrains WebStorm logo icon
+ */
+export function WebStormIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M0 0v24h24V0H0zm17.889 2.889c1.444 0 2.667.444 3.667 1.278l-1.111 1.667c-.889-.611-1.722-1-2.556-1s-1.278.389-1.278.889v.056c0 .667.444.889 2.111 1.333 2 .556 3.111 1.278 3.111 3v.056c0 2-1.5 3.111-3.611 3.111-1.5-.056-3-.611-4.167-1.667l1.278-1.556c.889.722 1.833 1.222 2.944 1.222.889 0 1.389-.333 1.389-.944v-.056c0-.556-.333-.833-2-1.278-2-.5-3.222-1.056-3.222-3.056v-.056c0-1.833 1.444-3 3.444-3zm-16.111.222h2.278l1.5 5.778 1.722-5.778h1.667l1.667 5.778 1.5-5.778h2.333l-2.833 9.944H9.723L8.112 7.277l-1.667 5.778H4.612L1.779 3.111zm.5 16.389h9V21h-9v-1.5z" />
+    </svg>
+  );
+}
+
+/**
+ * Xcode logo icon
+ */
+export function XcodeIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M19.06 5.3327c.4517-.1936.7744-.2581 1.097-.1936.5163.1291.7744.5163.968.7098.1936.3872.9034.7744 1.2261.8389.2581.0645.7098-.6453 1.0325-1.2906.3227-.5808.5163-1.3552.4517-1.5488-.0645-.1936-.968-.5808-1.1616-.5808-.1291 0-.3872.1291-.8389.0645-.4517-.0645-.9034-.5808-1.1616-.968-.4517-.6453-1.097-1.0325-1.6778-1.3552-.6453-.3227-1.3552-.5163-2.065-.6453-1.0325-.2581-2.065-.4517-3.0975-.3227-.5808.0645-1.2906.1291-1.8069.3227-.0645 0-.1936.1936-.0645.1936s.5808.0645.5808.0645-.5807.1292-.5807.2583c0 .1291.0645.1291.1291.1291.0645 0 1.4842-.0645 2.065 0 .6453.1291 1.3552.4517 1.8069 1.2261.7744 1.4197.4517 2.7749.2581 3.2266-.968 2.1295-8.6472 15.2294-9.0344 16.1328-.3873.9034-.5163 1.4842.5807 2.065s1.6778.3227 2.0005-.0645c.3872-.5163 7.0339-17.1654 9.2925-18.2624zm-3.6138 8.7117h1.5488c1.0325 0 1.2261.5163 1.2261.7098.0645.5163-.1936 1.1616-1.2261 1.1616h-.968l.7744 1.2906c.4517.7744.2581 1.1616 0 1.4197-.3872.3872-1.2261.3872-1.6778-.4517l-.9034-1.5488c-.6453 1.4197-1.2906 2.9684-2.065 4.7753h4.0009c1.9359 0 3.5492-1.6133 3.5492-3.5492V6.5588c-.0645-.1291-.1936-.0645-.2581 0-.3872.4517-1.4842 2.0004-4.001 7.4856zm-9.8087 8.0019h-.3227c-2.3231 0-4.1945-1.8714-4.1945-4.1945V7.0105c0-2.3231 1.8714-4.1945 4.1945-4.1945h9.3571c-.1936-.1936-.968-.5163-1.7423-.4517-.3227 0-.968.1291-1.3552-.1291-.3872-.3227-.3227-.5163-.9034-.5163H4.9277c-2.6458 0-4.7753 2.1295-4.7753 4.7753v11.7447c0 2.6458 2.1295 4.7753 4.4527 4.7108.6452 0 .8388-.5162 1.0324-.9034zM20.4152 6.9459v10.9058c0 2.3231-1.8714 4.1945-4.1945 4.1945H11.897s-.3872 1.0325.8389 1.0325h3.8719c2.6458 0 4.7753-2.1295 4.7753-4.7753V8.8173c.0646-.9034-.7098-1.4842-.9679-1.8714zm-18.5851.0646v10.8413c0 1.9359 1.6133 3.5492 3.5492 3.5492h.5808c0-.0645.7744-1.4197 2.4522-4.2591.1936-.3872.4517-.7744.7098-1.2261H4.4114c-.5808 0-.9034-.3872-.968-.7098-.1291-.5163.1936-1.1616.9034-1.1616h2.3877l3.033-5.2916s-.7098-1.2906-.9034-1.6133c-.2582-.4517-.1291-.9034.129-1.1615.3872-.3872 1.0325-.5808 1.6778.4517l.2581.3872.2581-.3872c.5808-.8389.968-.7744 1.2906-.7098.5163.1291.8389.7098.3872 1.6133L8.864 14.0444h1.3552c.4517-.7744.9034-1.5488 1.3552-2.3877-.0645-.3227-.1291-.7098-.0645-1.0325.0645-.5163.3227-.968.6453-1.3552l.3872.6453c1.2261-2.1295 2.1295-3.9364 2.3877-4.6463.1291-.3872.3227-1.1616.1291-1.8069H5.3794c-2.0005.0001-3.5493 1.6134-3.5493 3.5494zM4.605 17.7872c0-.0645.7744-1.4197.7744-1.4197 1.2261-.3227 1.8069.4517 1.8714.5163 0 0-.8389 1.4842-1.097 1.7423s-.5808.3227-.9034.2581c-.5164-.129-.839-.6453-.6454-1.097z" />
+    </svg>
+  );
+}
+
+/**
+ * Android Studio logo icon
+ */
+export function AndroidStudioIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M19.2693 10.3368c-.3321 0-.6026.2705-.6026.6031v9.8324h-1.7379l-3.3355-6.9396c.476-.5387.6797-1.286.5243-2.0009a2.2862 2.2862 0 0 0-1.2893-1.6248v-.8124c.0121-.2871-.1426-.5787-.4043-.7407-.1391-.0825-.2884-.1234-.4402-.1234a.8478.8478 0 0 0-.4318.1182c-.2701.1671-.4248.4587-.4123.7662l-.0003.721c-1.0149.3668-1.6619 1.4153-1.4867 2.5197a2.282 2.282 0 0 0 .5916 1.2103l-3.2096 6.9064H4.0928c-1.0949-.007-1.9797-.8948-1.9832-1.9896V5.016c-.0055 1.1024.8836 2.0006 1.9859 2.0062a2.024 2.024 0 0 0 .1326-.0037h14.7453s2.5343-.2189 2.8619 1.5392c-.2491.0287-.4449.2321-.4449.4889 0 .7115-.5791 1.2901-1.3028 1.2901h-.8183zM17.222 22.5366c.2347.4837.0329 1.066-.4507 1.3007-.1296.0629-.2666.0895-.4018.0927a.9738.9738 0 0 1-.3194-.0455c-.024-.0078-.046-.0209-.0694-.0305a.9701.9701 0 0 1-.2277-.1321c-.0247-.0192-.0495-.038-.0724-.0598-.0825-.0783-.1574-.1672-.21-.2757l-1.2554-2.6143-1.5585-3.2452a.7725.7725 0 0 0-.6995-.4443h-.0024a.792.792 0 0 0-.7083.4443l-1.5109 3.2452-1.2321 2.6464a.9722.9722 0 0 1-.7985.5795c-.0626.0053-.1238-.0024-.185-.0087-.0344-.0036-.069-.0053-.1025-.0124-.0489-.0103-.0954-.0278-.142-.0452-.0301-.0113-.0613-.0197-.0901-.0339-.0496-.0244-.0948-.0565-.1397-.0889-.0217-.0156-.0457-.0275-.0662-.045a.9862.9862 0 0 1-.1695-.1844.9788.9788 0 0 1-.0708-.9852l.8469-1.8223 3.2676-7.0314a1.7964 1.7964 0 0 1-.7072-1.1637c-.1555-.9799.5129-1.9003 1.4928-2.0559V9.3946a.3542.3542 0 0 1 .1674-.3155.3468.3468 0 0 1 .3541 0 .354.354 0 0 1 .1674.3155v1.159l.0129.0064a1.8028 1.8028 0 0 1 1.2878 1.378 1.7835 1.7835 0 0 1-.6439 1.7836l3.3889 7.0507.8481 1.7643zM12.9841 12.306c.0042-.6081-.4854-1.1044-1.0935-1.1085a1.1204 1.1204 0 0 0-.7856.3219 1.101 1.101 0 0 0-.323.7716c-.0042.6081.4854 1.1044 1.0935 1.1085h.0077c.6046 0 1.0967-.488 1.1009-1.0935zm-1.027 5.2768c-.1119.0005-.2121.0632-.2571.1553l-1.4127 3.0342h3.3733l-1.4564-3.0328a.274.274 0 0 0-.2471-.1567zm8.1432-6.7459l-.0129-.0001h-.8177a.103.103 0 0 0-.103.103v12.9103a.103.103 0 0 0 .0966.103h.8435c.9861-.0035 1.7836-.804 1.7836-1.79V9.0468c0 .9887-.8014 1.7901-1.7901 1.7901zM2.6098 5.0161v.019c.0039.816.6719 1.483 1.4874 1.4869a12.061 12.061 0 0 1 .1309-.0034h1.1286c.1972-1.315.7607-2.525 1.638-3.4859H4.0993c-.9266.0031-1.6971.6401-1.9191 1.4975.2417.0355.4296.235.4296.4859zm6.3381-2.8977L7.9112.3284a.219.219 0 0 1 0-.2189A.2384.2384 0 0 1 8.098 0a.219.219 0 0 1 .1867.1094l1.0496 1.8158a6.4907 6.4907 0 0 1 5.3186 0L15.696.1094a.2189.2189 0 0 1 .3734.2189l-1.0302 1.79c1.6671.9125 2.7974 2.5439 3.0975 4.4018l-12.286-.0014c.3004-1.8572 1.4305-3.488 3.0972-4.4003zm5.3774 2.6202a.515.515 0 0 0 .5271.5028.515.515 0 0 0 .5151-.5151.5213.5213 0 0 0-.8885-.367.5151.5151 0 0 0-.1537.3793zm-5.7178-.0067a.5151.5151 0 0 0 .5207.5095.5086.5086 0 0 0 .367-.1481.5215.5215 0 1 0-.734-.7341.515.515 0 0 0-.1537.3727z" />
+    </svg>
+  );
+}
+
+/**
+ * Google Antigravity IDE logo icon - stylized "A" arch shape
+ */
+export function AntigravityIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 1C11 1 9.5 3 8 7c-1.5 4-3 8.5-4 11.5-.5 1.5-.3 2.8.5 3.3.8.5 2 .2 3-.8.8-.8 1.3-2 1.8-3.2.3-.8.8-1.3 1.5-1.3h2.4c.7 0 1.2.5 1.5 1.3.5 1.2 1 2.4 1.8 3.2 1 1 2.2 1.3 3 .8.8-.5 1-1.8.5-3.3-1-3-2.5-7.5-4-11.5C14.5 3 13 1 12 1zm0 5c.8 2 2 5.5 3 8.5H9c1-3 2.2-6.5 3-8.5z"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Get the appropriate icon component for an editor command
+ */
+export function getEditorIcon(command: string): IconComponent {
+  // Handle direct CLI commands
+  const cliIcons: Record<string, IconComponent> = {
+    cursor: CursorIcon,
+    code: VSCodeIcon,
+    'code-insiders': VSCodeInsidersIcon,
+    kido: KiroIcon,
+    zed: ZedIcon,
+    subl: SublimeTextIcon,
+    windsurf: WindsurfIcon,
+    trae: TraeIcon,
+    rider: RiderIcon,
+    webstorm: WebStormIcon,
+    xed: XcodeIcon,
+    studio: AndroidStudioIcon,
+    [PRIMARY_ANTIGRAVITY_COMMAND]: AntigravityIcon,
+    [LEGACY_ANTIGRAVITY_COMMAND]: AntigravityIcon,
+    open: FinderIcon,
+    explorer: FolderOpen,
+    'xdg-open': FolderOpen,
+  };
+
+  // Check direct match first
+  if (cliIcons[command]) {
+    return cliIcons[command];
+  }
+
+  // Handle 'open' commands (macOS) - both 'open -a AppName' and 'open "/path/to/App.app"'
+  if (command.startsWith('open')) {
+    const cmdLower = command.toLowerCase();
+    if (cmdLower.includes('cursor')) return CursorIcon;
+    if (cmdLower.includes('visual studio code - insiders')) return VSCodeInsidersIcon;
+    if (cmdLower.includes('visual studio code')) return VSCodeIcon;
+    if (cmdLower.includes('kiro')) return KiroIcon;
+    if (cmdLower.includes('zed')) return ZedIcon;
+    if (cmdLower.includes('sublime')) return SublimeTextIcon;
+    if (cmdLower.includes('windsurf')) return WindsurfIcon;
+    if (cmdLower.includes('trae')) return TraeIcon;
+    if (cmdLower.includes('rider')) return RiderIcon;
+    if (cmdLower.includes('webstorm')) return WebStormIcon;
+    if (cmdLower.includes('xcode')) return XcodeIcon;
+    if (cmdLower.includes('android studio')) return AndroidStudioIcon;
+    if (cmdLower.includes('antigravity')) return AntigravityIcon;
+    // If just 'open' without app name, it's Finder
+    if (command === 'open') return FinderIcon;
+  }
+
+  return FolderOpen;
+}
diff --git a/temp_repo/apps/ui/src/components/icons/terminal-icons.tsx b/temp_repo/apps/ui/src/components/icons/terminal-icons.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..38e8a47d94900d524b90b733a1f1513a5b04c427
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/icons/terminal-icons.tsx
@@ -0,0 +1,213 @@
+import type { ComponentType, ComponentProps } from 'react';
+import { Terminal } from 'lucide-react';
+
+type IconProps = ComponentProps<'svg'>;
+type IconComponent = ComponentType<IconProps>;
+
+/**
+ * iTerm2 logo icon
+ */
+export function ITerm2Icon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M2.586 0a2.56 2.56 0 00-2.56 2.56v18.88A2.56 2.56 0 002.586 24h18.88a2.56 2.56 0 002.56-2.56V2.56A2.56 2.56 0 0021.466 0H2.586zm8.143 4.027h2.543v15.946h-2.543V4.027zm-3.816 0h2.544v15.946H6.913V4.027zm7.633 0h2.543v15.946h-2.543V4.027z" />
+    </svg>
+  );
+}
+
+/**
+ * Warp terminal logo icon
+ */
+export function WarpIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M9.2 4.8L7.6 7.6 4.8 5.6l1.6-2.8L9.2 4.8zm5.6 0l1.6 2.8 2.8-2-1.6-2.8-2.8 2zM2.4 12l2.8 1.6L3.6 16 .8 14.4 2.4 12zm19.2 0l1.6 2.4-2.8 1.6-1.6-2.4 2.8-1.6zM7.6 16.4l1.6 2.8-2.8 2-1.6-2.8 2.8-2zm8.8 0l2.8 2-1.6 2.8-2.8-2 1.6-2.8zM12 0L8.4 2 12 4l3.6-2L12 0zm0 20l-3.6 2 3.6 2 3.6-2-3.6-2z" />
+    </svg>
+  );
+}
+
+/**
+ * Ghostty terminal logo icon
+ */
+export function GhosttyIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M12 2C6.48 2 2 6.48 2 12v8c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-8c0-5.52-4.48-10-10-10zm-3.5 12a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm7 0a1.5 1.5 0 110-3 1.5 1.5 0 010 3zM12 19c-1.5 0-3-.5-4-1.5v-1c2 1 6 1 8 0v1c-1 1-2.5 1.5-4 1.5z" />
+    </svg>
+  );
+}
+
+/**
+ * Alacritty terminal logo icon
+ */
+export function AlacrittyIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M12 0L1.608 21.6h3.186l1.46-3.032h11.489l1.46 3.032h3.189L12 0zm0 7.29l3.796 7.882H8.204L12 7.29z" />
+    </svg>
+  );
+}
+
+/**
+ * WezTerm terminal logo icon
+ */
+export function WezTermIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M2 4h20v16H2V4zm2 2v12h16V6H4zm2 2h12v2H6V8zm0 4h8v2H6v-2z" />
+    </svg>
+  );
+}
+
+/**
+ * Kitty terminal logo icon
+ */
+export function KittyIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M3.5 7.5L1 5V2.5L3.5 5V7.5zM20.5 7.5L23 5V2.5L20.5 5V7.5zM12 4L6 8v8l6 4 6-4V8l-6-4zm0 2l4 2.67v5.33L12 16.67 8 14V8.67L12 6z" />
+    </svg>
+  );
+}
+
+/**
+ * Hyper terminal logo icon
+ */
+export function HyperIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M11.857 23.995v-7.125H6.486l5.765-10.856-.363-1.072L7.803.001 0 12.191h5.75L0 23.995h11.857zm.286 0h5.753l5.679-11.804h-5.679l5.679-11.804L17.896.388l-5.753 11.803h5.753L12.143 24z" />
+    </svg>
+  );
+}
+
+/**
+ * Tabby terminal logo icon
+ */
+export function TabbyIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M12 2L4 6v12l8 4 8-4V6l-8-4zm0 2l6 3v10l-6 3-6-3V7l6-3z" />
+    </svg>
+  );
+}
+
+/**
+ * Rio terminal logo icon
+ */
+export function RioIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" />
+    </svg>
+  );
+}
+
+/**
+ * Windows Terminal logo icon
+ */
+export function WindowsTerminalIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M8.165 6L0 9.497v5.006L8.165 18l.413-.206v-4.025L3.197 12l5.381-1.769V6.206L8.165 6zm7.67 0l-.413.206v4.025L20.803 12l-5.381 1.769v4.025l.413.206L24 14.503V9.497L15.835 6z" />
+    </svg>
+  );
+}
+
+/**
+ * PowerShell logo icon
+ */
+export function PowerShellIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M23.181 2.974c.568 0 .923.463.792 1.035l-3.659 15.982c-.13.572-.697 1.035-1.265 1.035H.819c-.568 0-.923-.463-.792-1.035L3.686 4.009c.13-.572.697-1.035 1.265-1.035h18.23zM8.958 16.677c0 .334.276.611.611.611h3.673a.615.615 0 00.611-.611.615.615 0 00-.611-.611h-3.673a.615.615 0 00-.611.611zm5.126-7.016L9.025 14.72c-.241.241-.241.63 0 .872.241.241.63.241.872 0l5.059-5.059c.241-.241.241-.63 0-.872l-5.059-5.059c-.241-.241-.63-.241-.872 0-.241.241-.241.63 0 .872l5.059 5.059c-.334.334-.334.334 0 0z" />
+    </svg>
+  );
+}
+
+/**
+ * Command Prompt (cmd) logo icon
+ */
+export function CmdIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M2 4h20v16H2V4zm2 2v12h16V6H4zm2.5 1.5l3 3-3 3L5 12l3-3zm5.5 5h6v1.5h-6V12z" />
+    </svg>
+  );
+}
+
+/**
+ * Git Bash logo icon
+ */
+export function GitBashIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M23.546 10.93L13.067.452c-.604-.603-1.582-.603-2.188 0L8.708 2.627l2.76 2.76c.645-.215 1.379-.07 1.889.441.516.515.658 1.258.438 1.9l2.658 2.66c.645-.223 1.387-.078 1.9.435.721.72.721 1.884 0 2.604-.719.719-1.881.719-2.6 0-.539-.541-.674-1.337-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348.713.721.713 1.883 0 2.6-.719.721-1.889.721-2.609 0-.719-.719-.719-1.879 0-2.598.182-.18.387-.316.605-.406V8.835c-.217-.091-.424-.222-.6-.401-.545-.545-.676-1.342-.396-2.009L7.636 3.7.45 10.881c-.6.605-.6 1.584 0 2.189l10.48 10.477c.604.604 1.582.604 2.186 0l10.43-10.43c.605-.603.605-1.582 0-2.187" />
+    </svg>
+  );
+}
+
+/**
+ * GNOME Terminal logo icon
+ */
+export function GnomeTerminalIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M2 4a2 2 0 00-2 2v12a2 2 0 002 2h20a2 2 0 002-2V6a2 2 0 00-2-2H2zm0 2h20v12H2V6zm2 2v2h2V8H4zm4 0v2h12V8H8zm-4 4v2h2v-2H4zm4 0v2h8v-2H8z" />
+    </svg>
+  );
+}
+
+/**
+ * Konsole logo icon
+ */
+export function KonsoleIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M3 3h18a2 2 0 012 2v14a2 2 0 01-2 2H3a2 2 0 01-2-2V5a2 2 0 012-2zm0 2v14h18V5H3zm2 2l4 4-4 4V7zm6 6h8v2h-8v-2z" />
+    </svg>
+  );
+}
+
+/**
+ * macOS Terminal logo icon
+ */
+export function MacOSTerminalIcon(props: IconProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M3 4a2 2 0 00-2 2v12a2 2 0 002 2h18a2 2 0 002-2V6a2 2 0 00-2-2H3zm0 2h18v12H3V6zm2 2l5 4-5 4V8zm7 6h7v2h-7v-2z" />
+    </svg>
+  );
+}
+
+/**
+ * Get the appropriate icon component for a terminal ID
+ */
+export function getTerminalIcon(terminalId: string): IconComponent {
+  const terminalIcons: Record<string, IconComponent> = {
+    iterm2: ITerm2Icon,
+    warp: WarpIcon,
+    ghostty: GhosttyIcon,
+    alacritty: AlacrittyIcon,
+    wezterm: WezTermIcon,
+    kitty: KittyIcon,
+    hyper: HyperIcon,
+    tabby: TabbyIcon,
+    rio: RioIcon,
+    'windows-terminal': WindowsTerminalIcon,
+    powershell: PowerShellIcon,
+    cmd: CmdIcon,
+    'git-bash': GitBashIcon,
+    'gnome-terminal': GnomeTerminalIcon,
+    konsole: KonsoleIcon,
+    'terminal-macos': MacOSTerminalIcon,
+    // Linux terminals - use generic terminal icon
+    'xfce4-terminal': Terminal,
+    tilix: Terminal,
+    terminator: Terminal,
+    foot: Terminal,
+    xterm: Terminal,
+  };
+
+  return terminalIcons[terminalId] ?? Terminal;
+}
diff --git a/temp_repo/apps/ui/src/components/layout/index.ts b/temp_repo/apps/ui/src/components/layout/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bfed62466e9a915c72e33a1a0b196aba050b4f9c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/index.ts
@@ -0,0 +1 @@
+export { Sidebar } from './sidebar';
diff --git a/temp_repo/apps/ui/src/components/layout/project-switcher/components/edit-project-dialog.tsx b/temp_repo/apps/ui/src/components/layout/project-switcher/components/edit-project-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..70ada5ee70684dd932871d425a01169fdf990401
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/project-switcher/components/edit-project-dialog.tsx
@@ -0,0 +1,204 @@
+import { useState, useRef } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Upload, X, ImageIcon } from 'lucide-react';
+import { useAppStore } from '@/store/app-store';
+import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import type { Project } from '@/lib/electron';
+import { IconPicker } from './icon-picker';
+import { toast } from 'sonner';
+
+interface EditProjectDialogProps {
+  project: Project;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function EditProjectDialog({ project, open, onOpenChange }: EditProjectDialogProps) {
+  const { setProjectName, setProjectIcon, setProjectCustomIcon } = useAppStore();
+  const [name, setName] = useState(project.name);
+  const [icon, setIcon] = useState<string | null>(project.icon || null);
+  const [customIconPath, setCustomIconPath] = useState<string | null>(
+    project.customIconPath || null
+  );
+  const [isUploadingIcon, setIsUploadingIcon] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleSave = () => {
+    if (name.trim() !== project.name) {
+      setProjectName(project.id, name.trim());
+    }
+    if (icon !== project.icon) {
+      setProjectIcon(project.id, icon);
+    }
+    if (customIconPath !== project.customIconPath) {
+      setProjectCustomIcon(project.id, customIconPath);
+    }
+    onOpenChange(false);
+  };
+
+  const handleCustomIconUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // Validate file type
+    const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+    if (!validTypes.includes(file.type)) {
+      toast.error(
+        `Invalid file type: ${file.type || 'unknown'}. Please use JPG, PNG, GIF or WebP.`
+      );
+      return;
+    }
+
+    // Validate file size (max 5MB for icons - allows animated GIFs)
+    const maxSize = 5 * 1024 * 1024;
+    if (file.size > maxSize) {
+      toast.error(
+        `File too large (${(file.size / 1024 / 1024).toFixed(2)} MB). Maximum size is 5 MB.`
+      );
+      return;
+    }
+
+    setIsUploadingIcon(true);
+    try {
+      // Convert to base64
+      const reader = new FileReader();
+      reader.onload = async () => {
+        const base64Data = reader.result as string;
+        const result = await getHttpApiClient().saveImageToTemp(
+          base64Data,
+          `project-icon-${file.name}`,
+          file.type,
+          project.path
+        );
+
+        if (result.success && result.path) {
+          setCustomIconPath(result.path);
+          // Clear the Lucide icon when custom icon is set
+          setIcon(null);
+          toast.success('Icon uploaded successfully');
+        } else {
+          toast.error('Failed to upload icon');
+        }
+        setIsUploadingIcon(false);
+      };
+      reader.onerror = () => {
+        toast.error('Failed to read file');
+        setIsUploadingIcon(false);
+      };
+      reader.readAsDataURL(file);
+    } catch {
+      toast.error('Failed to upload icon');
+      setIsUploadingIcon(false);
+    }
+  };
+
+  const handleRemoveCustomIcon = () => {
+    setCustomIconPath(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Edit Project</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4 overflow-y-auto flex-1 min-h-0">
+          {/* Project Name */}
+          <div className="space-y-2">
+            <Label htmlFor="project-name">Project Name</Label>
+            <Input
+              id="project-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Enter project name"
+            />
+          </div>
+
+          {/* Icon Picker */}
+          <div className="space-y-2">
+            <Label>Project Icon</Label>
+            <p className="text-xs text-muted-foreground mb-2">
+              Choose a preset icon or upload a custom image
+            </p>
+
+            {/* Custom Icon Upload */}
+            <div className="mb-4">
+              <div className="flex items-center gap-3">
+                {customIconPath ? (
+                  <div className="relative">
+                    <img
+                      src={getAuthenticatedImageUrl(customIconPath, project.path)}
+                      alt="Custom project icon"
+                      className="w-12 h-12 rounded-lg object-cover border border-border"
+                    />
+                    <button
+                      type="button"
+                      onClick={handleRemoveCustomIcon}
+                      className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center hover:bg-destructive/90"
+                    >
+                      <X className="w-3 h-3" />
+                    </button>
+                  </div>
+                ) : (
+                  <div className="w-12 h-12 rounded-lg border border-dashed border-border flex items-center justify-center bg-accent/30">
+                    <ImageIcon className="w-5 h-5 text-muted-foreground" />
+                  </div>
+                )}
+                <div className="flex-1">
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/jpeg,image/png,image/gif,image/webp"
+                    onChange={handleCustomIconUpload}
+                    className="hidden"
+                    id="custom-icon-upload-dialog"
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={isUploadingIcon}
+                    className="gap-1.5"
+                  >
+                    <Upload className="w-3.5 h-3.5" />
+                    {isUploadingIcon ? 'Uploading...' : 'Upload Custom Icon'}
+                  </Button>
+                  <p className="text-xs text-muted-foreground mt-1">
+                    PNG, JPG, GIF or WebP. Max 5MB.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Preset Icon Picker - only show if no custom icon */}
+            {!customIconPath && <IconPicker selectedIcon={icon} onSelectIcon={setIcon} />}
+          </div>
+        </div>
+
+        <DialogFooter className="flex-shrink-0">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={!name.trim()}>
+            Save Changes
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/project-switcher/components/icon-picker.tsx b/temp_repo/apps/ui/src/components/layout/project-switcher/components/icon-picker.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4c243fe691169306f0323a486954f31f6c27076e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/project-switcher/components/icon-picker.tsx
@@ -0,0 +1,522 @@
+import { useState } from 'react';
+import { X, Search } from 'lucide-react';
+import * as LucideIcons from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Input } from '@/components/ui/input';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+interface IconPickerProps {
+  selectedIcon: string | null;
+  onSelectIcon: (icon: string | null) => void;
+}
+
+// Comprehensive list of project-related icons from Lucide
+// Organized by category for easier browsing
+const POPULAR_ICONS = [
+  // Folders & Files
+  'Folder',
+  'FolderOpen',
+  'FolderCode',
+  'FolderGit',
+  'FolderKanban',
+  'FolderTree',
+  'FolderInput',
+  'FolderOutput',
+  'FolderPlus',
+  'File',
+  'FileCode',
+  'FileText',
+  'FileJson',
+  'FileImage',
+  'FileVideo',
+  'FileAudio',
+  'FileSpreadsheet',
+  'Files',
+  'Archive',
+
+  // Code & Development
+  'Code',
+  'Code2',
+  'Braces',
+  'Brackets',
+  'Terminal',
+  'TerminalSquare',
+  'Command',
+  'GitBranch',
+  'GitCommit',
+  'GitMerge',
+  'GitPullRequest',
+  'GitCompare',
+  'GitFork',
+  'GitHub',
+  'Gitlab',
+  'Bitbucket',
+  'Vscode',
+
+  // Packages & Containers
+  'Package',
+  'PackageSearch',
+  'PackageCheck',
+  'PackageX',
+  'Box',
+  'Boxes',
+  'Container',
+
+  // UI & Design
+  'Layout',
+  'LayoutGrid',
+  'LayoutList',
+  'LayoutDashboard',
+  'LayoutTemplate',
+  'Layers',
+  'Layers2',
+  'Layers3',
+  'Blocks',
+  'Component',
+  'Palette',
+  'Paintbrush',
+  'Brush',
+  'PenTool',
+  'Ruler',
+  'Grid',
+  'Grid3x3',
+  'Square',
+  'RectangleHorizontal',
+  'RectangleVertical',
+  'Circle',
+
+  // Tools & Settings
+  'Cog',
+  'Settings',
+  'Settings2',
+  'Wrench',
+  'Hammer',
+  'Screwdriver',
+  'WrenchIcon',
+  'Tool',
+  'ScrewdriverWrench',
+  'Sliders',
+  'SlidersHorizontal',
+  'Filter',
+  'FilterX',
+
+  // Technology & Infrastructure
+  'Server',
+  'ServerCrash',
+  'ServerCog',
+  'Database',
+  'DatabaseBackup',
+  'CloudUpload',
+  'CloudDownload',
+  'CloudOff',
+  'Globe',
+  'Globe2',
+  'Network',
+  'Wifi',
+  'WifiOff',
+  'Router',
+  'Cpu',
+  'MemoryStick',
+  'HardDrive',
+  'HardDriveIcon',
+  'CircuitBoard',
+  'Microchip',
+  'Monitor',
+  'MonitorSpeaker',
+  'Laptop',
+  'Smartphone',
+  'Tablet',
+  'Mouse',
+  'Keyboard',
+  'Headphones',
+  'Printer',
+  'Scanner',
+
+  // Workflow & Process
+  'Workflow',
+  'Zap',
+  'Rocket',
+  'Flame',
+  'Lightning',
+  'Bolt',
+  'Target',
+  'Flag',
+  'FlagTriangleRight',
+  'CheckCircle',
+  'CheckCircle2',
+  'XCircle',
+  'AlertCircle',
+  'Info',
+  'HelpCircle',
+  'Clock',
+  'Timer',
+  'Stopwatch',
+  'Calendar',
+  'CalendarDays',
+  'CalendarCheck',
+  'CalendarClock',
+
+  // Security & Access
+  'Shield',
+  'ShieldCheck',
+  'ShieldAlert',
+  'ShieldOff',
+  'Lock',
+  'Unlock',
+  'Key',
+  'KeyRound',
+  'Eye',
+  'EyeOff',
+  'User',
+  'Users',
+  'UserCheck',
+  'UserX',
+  'UserPlus',
+  'UserCog',
+
+  // Business & Finance
+  'Briefcase',
+  'Building',
+  'Building2',
+  'Store',
+  'ShoppingCart',
+  'ShoppingBag',
+  'CreditCard',
+  'Wallet',
+  'DollarSign',
+  'Euro',
+  'PoundSterling',
+  'Yen',
+  'Coins',
+  'Receipt',
+  'ChartBar',
+  'ChartLine',
+  'ChartPie',
+  'TrendingUp',
+  'TrendingDown',
+  'Activity',
+  'BarChart',
+  'LineChart',
+  'PieChart',
+
+  // Communication & Media
+  'MessageSquare',
+  'MessageCircle',
+  'Mail',
+  'MailOpen',
+  'Send',
+  'Inbox',
+  'Phone',
+  'PhoneCall',
+  'Video',
+  'VideoOff',
+  'Camera',
+  'CameraOff',
+  'Image',
+  'ImageIcon',
+  'Film',
+  'Music',
+  'Mic',
+  'MicOff',
+  'Volume',
+  'Volume2',
+  'VolumeX',
+  'Radio',
+  'Podcast',
+
+  // Social & Community
+  'Heart',
+  'HeartHandshake',
+  'Star',
+  'StarOff',
+  'ThumbsUp',
+  'ThumbsDown',
+  'Share',
+  'Share2',
+  'Link',
+  'Link2',
+  'ExternalLink',
+  'AtSign',
+  'Hash',
+  'Hashtag',
+  'Tag',
+  'Tags',
+
+  // Navigation & Location
+  'Compass',
+  'Map',
+  'MapPin',
+  'Navigation',
+  'Navigation2',
+  'Route',
+  'Plane',
+  'Car',
+  'Bike',
+  'Ship',
+  'Train',
+  'Bus',
+
+  // Science & Education
+  'FlaskConical',
+  'FlaskRound',
+  'Beaker',
+  'TestTube',
+  'TestTube2',
+  'Microscope',
+  'Atom',
+  'Brain',
+  'GraduationCap',
+  'Book',
+  'BookOpen',
+  'BookMarked',
+  'Library',
+  'School',
+  'University',
+
+  // Food & Health
+  'Coffee',
+  'Utensils',
+  'UtensilsCrossed',
+  'Apple',
+  'Cherry',
+  'Cookie',
+  'Cake',
+  'Pizza',
+  'Beer',
+  'Wine',
+  'HeartPulse',
+  'Dumbbell',
+  'Running',
+
+  // Nature & Weather
+  'Tree',
+  'TreePine',
+  'Leaf',
+  'Flower',
+  'Flower2',
+  'Sun',
+  'Moon',
+  'CloudRain',
+  'CloudSnow',
+  'CloudLightning',
+  'Droplet',
+  'Wind',
+  'Snowflake',
+  'Umbrella',
+
+  // Objects & Symbols
+  'Puzzle',
+  'PuzzleIcon',
+  'Gamepad',
+  'Gamepad2',
+  'Dice',
+  'Dice1',
+  'Dice6',
+  'Gem',
+  'Crown',
+  'Trophy',
+  'Medal',
+  'Award',
+  'Gift',
+  'GiftIcon',
+  'Bell',
+  'BellOff',
+  'BellRing',
+  'Home',
+  'House',
+  'DoorOpen',
+  'DoorClosed',
+  'Window',
+  'Lightbulb',
+  'LightbulbOff',
+  'Candle',
+  'Flashlight',
+  'FlashlightOff',
+  'Battery',
+  'BatteryFull',
+  'BatteryLow',
+  'BatteryCharging',
+  'Plug',
+  'PlugZap',
+  'Power',
+  'PowerOff',
+
+  // Arrows & Directions
+  'ArrowRight',
+  'ArrowLeft',
+  'ArrowUp',
+  'ArrowDown',
+  'ArrowUpRight',
+  'ArrowDownRight',
+  'ArrowDownLeft',
+  'ArrowUpLeft',
+  'ChevronRight',
+  'ChevronLeft',
+  'ChevronUp',
+  'ChevronDown',
+  'Move',
+  'MoveUp',
+  'MoveDown',
+  'MoveLeft',
+  'MoveRight',
+  'RotateCw',
+  'RotateCcw',
+  'RefreshCw',
+  'RefreshCcw',
+
+  // Shapes & Symbols
+  'Diamond',
+  'Pentagon',
+  'Cross',
+  'Plus',
+  'Minus',
+  'X',
+  'Check',
+  'Divide',
+  'Equal',
+  'Infinity',
+  'Percent',
+
+  // Miscellaneous
+  'Bot',
+  'Wand',
+  'Wand2',
+  'Magic',
+  'Stars',
+  'Comet',
+  'Satellite',
+  'SatelliteDish',
+  'Radar',
+  'RadarIcon',
+  'Scan',
+  'ScanLine',
+  'QrCode',
+  'Barcode',
+  'ScanSearch',
+  'Search',
+  'SearchX',
+  'ZoomIn',
+  'ZoomOut',
+  'Maximize',
+  'Minimize',
+  'Maximize2',
+  'Minimize2',
+  'Expand',
+  'Shrink',
+  'Copy',
+  'CopyCheck',
+  'Clipboard',
+  'ClipboardCheck',
+  'ClipboardCopy',
+  'ClipboardList',
+  'ClipboardPaste',
+  'Scissors',
+  'Cut',
+  'FileEdit',
+  'Pen',
+  'Pencil',
+  'Eraser',
+  'Trash',
+  'Trash2',
+  'Delete',
+  'ArchiveRestore',
+  'Download',
+  'Upload',
+  'Save',
+  'SaveAll',
+  'FilePlus',
+  'FileMinus',
+  'FileX',
+  'FileCheck',
+  'FileQuestion',
+  'FileWarning',
+  'FileSearch',
+  'FolderSearch',
+  'FolderX',
+  'FolderCheck',
+  'FolderMinus',
+  'FolderSync',
+  'FolderUp',
+  'FolderDown',
+];
+
+export function IconPicker({ selectedIcon, onSelectIcon }: IconPickerProps) {
+  const [search, setSearch] = useState('');
+
+  const filteredIcons = POPULAR_ICONS.filter((icon) =>
+    icon.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const getIconComponent = (iconName: string) => {
+    return (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[
+      iconName
+    ];
+  };
+
+  return (
+    <div className="space-y-3">
+      {/* Search */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search icons..."
+          className="pl-9"
+        />
+      </div>
+
+      {/* Selected Icon Display */}
+      {selectedIcon && (
+        <div className="flex items-center gap-2 p-2 rounded-md bg-accent/50 border border-border">
+          <div className="flex items-center gap-2 flex-1">
+            {(() => {
+              const IconComponent = getIconComponent(selectedIcon);
+              return IconComponent ? <IconComponent className="w-5 h-5 text-brand-500" /> : null;
+            })()}
+            <span className="text-sm font-medium">{selectedIcon}</span>
+          </div>
+          <button
+            onClick={() => onSelectIcon(null)}
+            className="p-1 hover:bg-background rounded transition-colors"
+            title="Clear icon"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+      )}
+
+      {/* Icons Grid */}
+      <ScrollArea className="h-96 rounded-md border">
+        <div className="grid grid-cols-6 gap-1 p-2">
+          {filteredIcons.map((iconName) => {
+            const IconComponent = getIconComponent(iconName);
+            if (!IconComponent) return null;
+
+            const isSelected = selectedIcon === iconName;
+
+            return (
+              <button
+                key={iconName}
+                onClick={() => onSelectIcon(iconName)}
+                className={cn(
+                  'aspect-square rounded-md flex items-center justify-center',
+                  'transition-all duration-150',
+                  'hover:bg-accent hover:scale-110',
+                  isSelected
+                    ? 'bg-brand-500/20 border-2 border-brand-500'
+                    : 'border border-transparent'
+                )}
+                title={iconName}
+              >
+                <IconComponent
+                  className={cn('w-5 h-5', isSelected ? 'text-brand-500' : 'text-foreground')}
+                />
+              </button>
+            );
+          })}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/project-switcher/components/index.ts b/temp_repo/apps/ui/src/components/layout/project-switcher/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..86073ca18ef8d5054dd7cdfcb4b2af28eb338cba
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/project-switcher/components/index.ts
@@ -0,0 +1,4 @@
+export { ProjectSwitcherItem } from './project-switcher-item';
+export { ProjectContextMenu } from './project-context-menu';
+export { EditProjectDialog } from './edit-project-dialog';
+export { IconPicker } from './icon-picker';
diff --git a/temp_repo/apps/ui/src/components/layout/project-switcher/components/notification-bell.tsx b/temp_repo/apps/ui/src/components/layout/project-switcher/components/notification-bell.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..747a9010bc1f118545be3665809895a69c52a7ec
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/project-switcher/components/notification-bell.tsx
@@ -0,0 +1,199 @@
+/**
+ * Notification Bell - Bell icon with unread count and popover
+ */
+
+import { useCallback } from 'react';
+import { Bell, Check, Trash2, AlertCircle } from 'lucide-react';
+import { useNavigate } from '@tanstack/react-router';
+import { useNotificationsStore } from '@/store/notifications-store';
+import { useLoadNotifications, useNotificationEvents } from '@/hooks/use-notification-events';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import type { Notification } from '@automaker/types';
+import { cn, formatRelativeTime } from '@/lib/utils';
+
+interface NotificationBellProps {
+  projectPath: string | null;
+}
+
+export function NotificationBell({ projectPath }: NotificationBellProps) {
+  const navigate = useNavigate();
+  const {
+    notifications,
+    unreadCount,
+    isPopoverOpen,
+    setPopoverOpen,
+    markAsRead,
+    dismissNotification,
+  } = useNotificationsStore();
+
+  // Load notifications and subscribe to events
+  useLoadNotifications(projectPath);
+  useNotificationEvents(projectPath);
+
+  const handleMarkAsRead = useCallback(
+    async (notificationId: string) => {
+      if (!projectPath) return;
+
+      // Optimistic update
+      markAsRead(notificationId);
+
+      // Sync with server
+      const api = getHttpApiClient();
+      await api.notifications.markAsRead(projectPath, notificationId);
+    },
+    [projectPath, markAsRead]
+  );
+
+  const handleDismiss = useCallback(
+    async (notificationId: string) => {
+      if (!projectPath) return;
+
+      // Optimistic update
+      dismissNotification(notificationId);
+
+      // Sync with server
+      const api = getHttpApiClient();
+      await api.notifications.dismiss(projectPath, notificationId);
+    },
+    [projectPath, dismissNotification]
+  );
+
+  const handleNotificationClick = useCallback(
+    (notification: Notification) => {
+      // Mark as read
+      handleMarkAsRead(notification.id);
+      setPopoverOpen(false);
+
+      // Navigate to the relevant view based on notification type
+      if (notification.featureId) {
+        navigate({
+          to: '/board',
+          search: {
+            featureId: notification.featureId,
+            projectPath: notification.projectPath || undefined,
+          },
+        });
+      }
+    },
+    [handleMarkAsRead, setPopoverOpen, navigate]
+  );
+
+  const handleViewAll = useCallback(() => {
+    setPopoverOpen(false);
+    navigate({ to: '/notifications' });
+  }, [setPopoverOpen, navigate]);
+
+  const getNotificationIcon = (type: string) => {
+    switch (type) {
+      case 'feature_waiting_approval':
+        return <Bell className="h-4 w-4 text-yellow-500" />;
+      case 'feature_verified':
+        return <Check className="h-4 w-4 text-green-500" />;
+      case 'spec_regeneration_complete':
+        return <Check className="h-4 w-4 text-blue-500" />;
+      case 'feature_error':
+        return <AlertCircle className="h-4 w-4 text-red-500" />;
+      case 'auto_mode_error':
+        return <AlertCircle className="h-4 w-4 text-red-500" />;
+      default:
+        return <Bell className="h-4 w-4" />;
+    }
+  };
+
+  // Show recent 3 notifications in popover
+  const recentNotifications = notifications.slice(0, 3);
+
+  if (!projectPath) {
+    return null;
+  }
+
+  return (
+    <Popover open={isPopoverOpen} onOpenChange={setPopoverOpen}>
+      <PopoverTrigger asChild>
+        <button
+          className={cn(
+            'relative flex items-center justify-center w-8 h-8 rounded-md',
+            'hover:bg-accent transition-colors',
+            'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2'
+          )}
+          title="Notifications"
+        >
+          <Bell className="h-4 w-4" />
+          {unreadCount > 0 && (
+            <span className="absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+              {unreadCount > 99 ? '99+' : unreadCount}
+            </span>
+          )}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 p-0" align="start" side="right">
+        <div className="flex items-center justify-between px-4 py-3 border-b">
+          <h4 className="font-medium text-sm">Notifications</h4>
+          {unreadCount > 0 && (
+            <span className="text-xs text-muted-foreground">{unreadCount} unread</span>
+          )}
+        </div>
+
+        {recentNotifications.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-8 px-4">
+            <Bell className="h-8 w-8 text-muted-foreground/50 mb-2" />
+            <p className="text-sm text-muted-foreground">No notifications</p>
+          </div>
+        ) : (
+          <div className="max-h-[300px] overflow-y-auto">
+            {recentNotifications.map((notification) => (
+              <div
+                key={notification.id}
+                className={cn(
+                  'flex items-start gap-3 px-4 py-3 cursor-pointer hover:bg-accent/50 border-b last:border-b-0',
+                  !notification.read && 'bg-primary/5'
+                )}
+                onClick={() => handleNotificationClick(notification)}
+              >
+                <div className="flex-shrink-0 mt-0.5">{getNotificationIcon(notification.type)}</div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-1.5">
+                    <p className="text-sm font-medium truncate">{notification.title}</p>
+                    {!notification.read && (
+                      <span className="h-1.5 w-1.5 rounded-full bg-primary flex-shrink-0" />
+                    )}
+                  </div>
+                  <p className="text-xs text-muted-foreground line-clamp-2 mt-0.5">
+                    {notification.message}
+                  </p>
+                  <p className="text-[10px] text-muted-foreground mt-1">
+                    {formatRelativeTime(new Date(notification.createdAt))}
+                  </p>
+                </div>
+                <div className="flex-shrink-0 flex flex-col gap-1">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDismiss(notification.id);
+                    }}
+                    title="Dismiss"
+                  >
+                    <Trash2 className="h-3 w-3" />
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {notifications.length > 0 && (
+          <div className="border-t px-4 py-2">
+            <Button variant="ghost" size="sm" className="w-full text-xs" onClick={handleViewAll}>
+              View all notifications
+            </Button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/project-switcher/components/project-context-menu.tsx b/temp_repo/apps/ui/src/components/layout/project-switcher/components/project-context-menu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..eb0540c11f7a8321acafc299d75347a462924471
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/project-switcher/components/project-context-menu.tsx
@@ -0,0 +1,581 @@
+import { useEffect, useRef, useState, memo, useCallback, useMemo } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { Edit2, Trash2, Palette, ChevronRight, Moon, Sun, Monitor, LogOut } from 'lucide-react';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import { type ThemeMode, useAppStore } from '@/store/app-store';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+import type { Project } from '@/lib/electron';
+import {
+  PROJECT_DARK_THEMES,
+  PROJECT_LIGHT_THEMES,
+  THEME_SUBMENU_CONSTANTS,
+} from '@/components/layout/sidebar/constants';
+import { useThemePreview } from '@/components/layout/sidebar/hooks';
+
+/**
+ * Constant representing the "use global theme" option.
+ * An empty string is used to indicate that no project-specific theme is set.
+ */
+const USE_GLOBAL_THEME = '' as const;
+
+/**
+ * Z-index values for context menu layering.
+ * Ensures proper stacking order when menus overlap.
+ */
+const Z_INDEX = {
+  /** Base z-index for the main context menu */
+  CONTEXT_MENU: 100,
+  /** Higher z-index for theme submenu to appear above parent menu */
+  THEME_SUBMENU: 101,
+} as const;
+
+/**
+ * Represents a selectable theme option in the theme submenu.
+ * Uses ThemeMode from app-store for type safety.
+ */
+interface ThemeOption {
+  /** The theme mode value (e.g., 'dark', 'light', 'dracula') */
+  value: ThemeMode;
+  /** Display label for the theme option */
+  label: string;
+  /** Lucide icon component to display alongside the label */
+  icon: LucideIcon;
+  /** CSS color value for the icon */
+  color: string;
+}
+
+/**
+ * Props for the ThemeButton component.
+ * Defines the interface for rendering individual theme selection buttons.
+ */
+interface ThemeButtonProps {
+  /** The theme option data to display */
+  option: ThemeOption;
+  /** Whether this theme is currently selected */
+  isSelected: boolean;
+  /** Handler for pointer enter events (used for preview) */
+  onPointerEnter: () => void;
+  /** Handler for pointer leave events (used to clear preview) */
+  onPointerLeave: (e: React.PointerEvent) => void;
+  /** Handler for click events (used to select theme) */
+  onClick: (e: React.MouseEvent) => void;
+}
+
+/**
+ * A reusable button component for individual theme options.
+ * Implements hover preview and selection functionality.
+ * Memoized to prevent unnecessary re-renders when parent state changes.
+ */
+const ThemeButton = memo(function ThemeButton({
+  option,
+  isSelected,
+  onPointerEnter,
+  onPointerLeave,
+  onClick,
+}: ThemeButtonProps) {
+  const Icon = option.icon;
+  return (
+    <button
+      type="button"
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
+      onClick={onClick}
+      className={cn(
+        'w-full flex items-center gap-1.5 px-2 py-1.5 rounded-md',
+        'text-xs text-left',
+        'hover:bg-accent transition-colors',
+        'focus:outline-none focus:bg-accent',
+        isSelected && 'bg-accent'
+      )}
+      data-testid={`project-theme-${option.value}`}
+    >
+      <Icon className="w-3.5 h-3.5" style={{ color: option.color }} />
+      <span>{option.label}</span>
+    </button>
+  );
+});
+
+/**
+ * Props for the ThemeColumn component.
+ * Defines the interface for rendering a column of related theme options (e.g., dark or light themes).
+ */
+interface ThemeColumnProps {
+  /** Column header title (e.g., "Dark", "Light") */
+  title: string;
+  /** Icon to display in the column header */
+  icon: LucideIcon;
+  /** Array of theme options to display in this column */
+  themes: ThemeOption[];
+  /** Currently selected theme value, or null if using global theme */
+  selectedTheme: ThemeMode | null;
+  /** Handler called when user hovers over a theme option for preview */
+  onPreviewEnter: (value: ThemeMode) => void;
+  /** Handler called when user stops hovering over a theme option */
+  onPreviewLeave: (e: React.PointerEvent) => void;
+  /** Handler called when user clicks to select a theme */
+  onSelect: (value: ThemeMode) => void;
+}
+
+/**
+ * A reusable column component for displaying themed options.
+ * Renders a group of related themes (e.g., all dark themes or all light themes)
+ * with a header and scrollable list of ThemeButton components.
+ * Memoized to prevent unnecessary re-renders.
+ */
+const ThemeColumn = memo(function ThemeColumn({
+  title,
+  icon: Icon,
+  themes,
+  selectedTheme,
+  onPreviewEnter,
+  onPreviewLeave,
+  onSelect,
+}: ThemeColumnProps) {
+  return (
+    <div className="flex-1">
+      <div className="flex items-center gap-1.5 px-2 py-1.5 text-xs font-medium text-muted-foreground">
+        <Icon className="w-3 h-3" />
+        {title}
+      </div>
+      <div className="space-y-0.5">
+        {themes.map((option) => (
+          <ThemeButton
+            key={option.value}
+            option={option}
+            isSelected={selectedTheme === option.value}
+            onPointerEnter={() => onPreviewEnter(option.value)}
+            onPointerLeave={onPreviewLeave}
+            onClick={(e) => {
+              e.stopPropagation();
+              onSelect(option.value);
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+/**
+ * Props for the ProjectContextMenu component.
+ * Defines the interface for the project right-click context menu.
+ */
+interface ProjectContextMenuProps {
+  /** The project this context menu is for */
+  project: Project;
+  /** Screen coordinates where the context menu should appear */
+  position: { x: number; y: number };
+  /** Callback to close the context menu */
+  onClose: () => void;
+  /** Callback when user selects "Edit Name & Icon" option */
+  onEdit: (project: Project) => void;
+}
+
+/**
+ * A context menu component for project-specific actions.
+ *
+ * Provides options for:
+ * - Editing project name and icon
+ * - Setting project-specific theme (with live preview on hover)
+ * - Removing project from the workspace
+ *
+ * Features viewport-aware positioning for the theme submenu to prevent
+ * overflow, and implements delayed hover handling to improve UX when
+ * navigating between the trigger button and submenu.
+ *
+ * @param props - Component props
+ * @returns The rendered context menu or null if not visible
+ */
+export function ProjectContextMenu({
+  project,
+  position,
+  onClose,
+  onEdit,
+}: ProjectContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const {
+    moveProjectToTrash,
+    removeProject,
+    theme: globalTheme,
+    setProjectTheme,
+    setPreviewTheme,
+  } = useAppStore();
+  const [showRemoveDialog, setShowRemoveDialog] = useState(false);
+  const [showRemoveFromAutomakerDialog, setShowRemoveFromAutomakerDialog] = useState(false);
+  const [showThemeSubmenu, setShowThemeSubmenu] = useState(false);
+  const themeSubmenuRef = useRef<HTMLDivElement>(null);
+  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const { handlePreviewEnter, handlePreviewLeave } = useThemePreview({ setPreviewTheme });
+
+  // Handler to open theme submenu and cancel any pending close
+  const handleThemeMenuEnter = useCallback(() => {
+    // Cancel any pending close timeout
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    setShowThemeSubmenu(true);
+  }, []);
+
+  // Handler to close theme submenu with a small delay
+  // This prevents the submenu from closing when mouse crosses the gap between trigger and submenu
+  const handleThemeMenuLeave = useCallback(() => {
+    // Add a small delay before closing to allow mouse to reach submenu
+    closeTimeoutRef.current = setTimeout(() => {
+      setShowThemeSubmenu(false);
+      setPreviewTheme(null);
+    }, 100); // 100ms delay is enough to cross the gap
+  }, [setPreviewTheme]);
+
+  /**
+   * Calculates theme submenu position to prevent viewport overflow.
+   *
+   * This memoized calculation determines the optimal vertical position and maximum
+   * height for the theme submenu based on the current viewport dimensions and
+   * the trigger button's position.
+   *
+   * @returns Object containing:
+   *   - top: Vertical offset from default position (negative values shift submenu up)
+   *   - maxHeight: Maximum height constraint to prevent overflow with scrolling
+   */
+  const submenuPosition = useMemo(() => {
+    const { ESTIMATED_SUBMENU_HEIGHT, COLLISION_PADDING, THEME_BUTTON_OFFSET } =
+      THEME_SUBMENU_CONSTANTS;
+
+    const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 800;
+
+    // Calculate where the submenu's bottom edge would be if positioned normally
+    const submenuBottomY = position.y + THEME_BUTTON_OFFSET + ESTIMATED_SUBMENU_HEIGHT;
+
+    // Check if submenu would overflow bottom of viewport
+    const wouldOverflowBottom = submenuBottomY > viewportHeight - COLLISION_PADDING;
+
+    // If it would overflow, calculate how much to shift it up
+    if (wouldOverflowBottom) {
+      // Calculate the offset needed to align submenu bottom with viewport bottom minus padding
+      const overflowAmount = submenuBottomY - (viewportHeight - COLLISION_PADDING);
+      return {
+        top: -overflowAmount,
+        maxHeight: Math.min(ESTIMATED_SUBMENU_HEIGHT, viewportHeight - COLLISION_PADDING * 2),
+      };
+    }
+
+    // Default: submenu opens at top of parent (aligned with the theme button)
+    return {
+      top: 0,
+      maxHeight: Math.min(
+        ESTIMATED_SUBMENU_HEIGHT,
+        viewportHeight - position.y - THEME_BUTTON_OFFSET - COLLISION_PADDING
+      ),
+    };
+  }, [position.y]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (event: globalThis.MouseEvent) => {
+      // Don't close if a confirmation dialog is open (dialog is in a portal)
+      if (showRemoveDialog || showRemoveFromAutomakerDialog) return;
+
+      if (menuRef.current && !menuRef.current.contains(event.target as globalThis.Node)) {
+        setPreviewTheme(null);
+        onClose();
+      }
+    };
+
+    const handleEscape = (event: globalThis.KeyboardEvent) => {
+      // Don't close if a confirmation dialog is open (let the dialog handle escape)
+      if (showRemoveDialog || showRemoveFromAutomakerDialog) return;
+
+      if (event.key === 'Escape') {
+        setPreviewTheme(null);
+        onClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [onClose, setPreviewTheme, showRemoveDialog, showRemoveFromAutomakerDialog]);
+
+  const handleEdit = () => {
+    onEdit(project);
+  };
+
+  const handleRemove = () => {
+    setShowRemoveDialog(true);
+  };
+
+  const handleThemeSelect = useCallback(
+    (value: ThemeMode | typeof USE_GLOBAL_THEME) => {
+      // Clear any pending close timeout to prevent race conditions
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+
+      // Close menu first
+      setShowThemeSubmenu(false);
+      onClose();
+
+      // Then apply theme changes
+      setPreviewTheme(null);
+      const isUsingGlobal = value === USE_GLOBAL_THEME;
+      // Only set project theme - don't change global theme
+      // The UI uses getEffectiveTheme() which handles: previewTheme ?? projectTheme ?? globalTheme
+      setProjectTheme(project.id, isUsingGlobal ? null : value);
+    },
+    [onClose, project.id, setPreviewTheme, setProjectTheme]
+  );
+
+  const handleConfirmRemove = useCallback(() => {
+    moveProjectToTrash(project.id);
+    toast.success('Project removed', {
+      description: `${project.name} has been removed from your projects list`,
+    });
+  }, [moveProjectToTrash, project.id, project.name]);
+
+  const handleDialogClose = useCallback(
+    (isOpen: boolean) => {
+      setShowRemoveDialog(isOpen);
+      // Close the context menu when dialog closes (whether confirmed or cancelled)
+      // This prevents the context menu from reappearing after dialog interaction
+      if (!isOpen) {
+        // Always close the context menu when dialog closes
+        onClose();
+      }
+    },
+    [onClose]
+  );
+
+  const handleRemoveFromAutomaker = () => {
+    setShowRemoveFromAutomakerDialog(true);
+  };
+
+  const handleConfirmRemoveFromAutomaker = useCallback(() => {
+    removeProject(project.id);
+    toast.success('Project removed from Automaker', {
+      description: `${project.name} has been removed. The folder remains on disk.`,
+    });
+  }, [removeProject, project.id, project.name]);
+
+  const handleRemoveFromAutomakerDialogClose = useCallback(
+    (isOpen: boolean) => {
+      setShowRemoveFromAutomakerDialog(isOpen);
+      if (!isOpen) {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+
+  return (
+    <>
+      {/* Hide context menu when confirm dialog is open */}
+      {!showRemoveDialog && !showRemoveFromAutomakerDialog && (
+        <div
+          ref={menuRef}
+          className={cn(
+            'fixed min-w-48 rounded-lg',
+            'bg-popover text-popover-foreground',
+            'border border-border shadow-lg',
+            'animate-in fade-in zoom-in-95 duration-100'
+          )}
+          style={{
+            top: position.y,
+            left: position.x,
+            zIndex: Z_INDEX.CONTEXT_MENU,
+          }}
+          data-testid="project-context-menu"
+        >
+          <div className="p-1">
+            <button
+              onClick={handleEdit}
+              className={cn(
+                'w-full flex items-center gap-2 px-3 py-2 rounded-md',
+                'text-sm font-medium text-left',
+                'hover:bg-accent transition-colors',
+                'focus:outline-none focus:bg-accent'
+              )}
+              data-testid="edit-project-button"
+            >
+              <Edit2 className="w-4 h-4" />
+              <span>Edit Name & Icon</span>
+            </button>
+
+            {/* Theme Submenu Trigger */}
+            <div
+              className="relative"
+              onMouseEnter={handleThemeMenuEnter}
+              onMouseLeave={handleThemeMenuLeave}
+            >
+              <button
+                onClick={() => setShowThemeSubmenu(!showThemeSubmenu)}
+                className={cn(
+                  'w-full flex items-center gap-2 px-3 py-2 rounded-md',
+                  'text-sm font-medium text-left',
+                  'hover:bg-accent transition-colors',
+                  'focus:outline-none focus:bg-accent'
+                )}
+                data-testid="theme-project-button"
+              >
+                <Palette className="w-4 h-4" />
+                <span className="flex-1">Project Theme</span>
+                {project.theme && (
+                  <span className="text-[10px] text-muted-foreground capitalize">
+                    {project.theme}
+                  </span>
+                )}
+                <ChevronRight className="w-4 h-4 text-muted-foreground" />
+              </button>
+
+              {/* Theme Submenu */}
+              {showThemeSubmenu && (
+                <div
+                  ref={themeSubmenuRef}
+                  className={cn(
+                    'absolute left-full ml-1 min-w-[420px] rounded-lg',
+                    'bg-popover text-popover-foreground',
+                    'border border-border shadow-lg',
+                    'animate-in fade-in zoom-in-95 duration-100'
+                  )}
+                  style={{
+                    zIndex: Z_INDEX.THEME_SUBMENU,
+                    top: `${submenuPosition.top}px`,
+                  }}
+                  data-testid="project-theme-submenu"
+                  onMouseEnter={handleThemeMenuEnter}
+                  onMouseLeave={handleThemeMenuLeave}
+                >
+                  <div className="p-2">
+                    {/* Use Global Option */}
+                    <button
+                      type="button"
+                      onPointerEnter={() => handlePreviewEnter(globalTheme)}
+                      onPointerLeave={handlePreviewLeave}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleThemeSelect(USE_GLOBAL_THEME);
+                      }}
+                      className={cn(
+                        'w-full flex items-center gap-2 px-3 py-2 rounded-md',
+                        'text-sm font-medium text-left',
+                        'hover:bg-accent transition-colors',
+                        'focus:outline-none focus:bg-accent',
+                        !project.theme && 'bg-accent'
+                      )}
+                      data-testid="project-theme-global"
+                    >
+                      <Monitor className="w-4 h-4" />
+                      <span>Use Global</span>
+                      <span className="text-[10px] text-muted-foreground ml-1 capitalize">
+                        ({globalTheme})
+                      </span>
+                    </button>
+
+                    <div className="h-px bg-border my-2" />
+
+                    {/* Two Column Layout - Using reusable ThemeColumn component */}
+                    {/* Dynamic max height with scroll for viewport overflow handling */}
+                    <div
+                      className="flex gap-2 overflow-y-auto scrollbar-styled"
+                      style={{
+                        maxHeight: `${Math.max(0, submenuPosition.maxHeight - THEME_SUBMENU_CONSTANTS.SUBMENU_HEADER_HEIGHT)}px`,
+                      }}
+                    >
+                      <ThemeColumn
+                        title="Dark"
+                        icon={Moon}
+                        themes={PROJECT_DARK_THEMES as ThemeOption[]}
+                        selectedTheme={project.theme as ThemeMode | null}
+                        onPreviewEnter={handlePreviewEnter}
+                        onPreviewLeave={handlePreviewLeave}
+                        onSelect={handleThemeSelect}
+                      />
+                      <ThemeColumn
+                        title="Light"
+                        icon={Sun}
+                        themes={PROJECT_LIGHT_THEMES as ThemeOption[]}
+                        selectedTheme={project.theme as ThemeMode | null}
+                        onPreviewEnter={handlePreviewEnter}
+                        onPreviewLeave={handlePreviewLeave}
+                        onSelect={handleThemeSelect}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <button
+              onClick={handleRemove}
+              className={cn(
+                'w-full flex items-center gap-2 px-3 py-2 rounded-md',
+                'text-sm font-medium text-left',
+                'text-destructive hover:bg-destructive/10',
+                'transition-colors',
+                'focus:outline-none focus:bg-destructive/10'
+              )}
+              data-testid="remove-project-button"
+            >
+              <Trash2 className="w-4 h-4" />
+              <span>Move to Trash</span>
+            </button>
+
+            <button
+              onClick={handleRemoveFromAutomaker}
+              className={cn(
+                'w-full flex items-center gap-2 px-3 py-2 rounded-md',
+                'text-sm font-medium text-left',
+                'text-muted-foreground hover:text-foreground hover:bg-accent',
+                'transition-colors',
+                'focus:outline-none focus:bg-accent'
+              )}
+              data-testid="remove-from-automaker-button"
+            >
+              <LogOut className="w-4 h-4" />
+              <span>Remove from Automaker</span>
+            </button>
+          </div>
+        </div>
+      )}
+
+      <ConfirmDialog
+        open={showRemoveDialog}
+        onOpenChange={handleDialogClose}
+        onConfirm={handleConfirmRemove}
+        title="Move to Trash"
+        description={`Are you sure you want to move "${project.name}" to Trash? You can restore it later from the Recycle Bin.`}
+        icon={Trash2}
+        iconClassName="text-destructive"
+        confirmText="Move to Trash"
+        confirmVariant="destructive"
+      />
+
+      <ConfirmDialog
+        open={showRemoveFromAutomakerDialog}
+        onOpenChange={handleRemoveFromAutomakerDialogClose}
+        onConfirm={handleConfirmRemoveFromAutomaker}
+        title="Remove from Automaker"
+        description={`Remove "${project.name}" from Automaker? The folder will remain on disk and can be re-added later by opening it.`}
+        icon={LogOut}
+        iconClassName="text-muted-foreground"
+        confirmText="Remove from Automaker"
+        confirmVariant="secondary"
+      />
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/project-switcher/components/project-switcher-item.tsx b/temp_repo/apps/ui/src/components/layout/project-switcher/components/project-switcher-item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..645f79a0ae9921129ea572467cf1a191e64773ca
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/project-switcher/components/project-switcher-item.tsx
@@ -0,0 +1,124 @@
+import { useState } from 'react';
+import { Folder, LucideIcon } from 'lucide-react';
+import * as LucideIcons from 'lucide-react';
+import { cn, sanitizeForTestId } from '@/lib/utils';
+import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
+import type { Project } from '@/lib/electron';
+
+interface ProjectSwitcherItemProps {
+  project: Project;
+  isActive: boolean;
+  hotkeyIndex?: number; // 0-9 for hotkeys 1-9, 0
+  onClick: () => void;
+  onContextMenu: (event: React.MouseEvent) => void;
+}
+
+export function ProjectSwitcherItem({
+  project,
+  isActive,
+  hotkeyIndex,
+  onClick,
+  onContextMenu,
+}: ProjectSwitcherItemProps) {
+  const [imageError, setImageError] = useState(false);
+
+  // Convert index to hotkey label: 0 -> "1", 1 -> "2", ..., 8 -> "9", 9 -> "0"
+  const hotkeyLabel =
+    hotkeyIndex !== undefined && hotkeyIndex >= 0 && hotkeyIndex <= 9
+      ? hotkeyIndex === 9
+        ? '0'
+        : String(hotkeyIndex + 1)
+      : undefined;
+  // Get the icon component from lucide-react
+  const getIconComponent = (): LucideIcon => {
+    if (project.icon && project.icon in LucideIcons) {
+      return (LucideIcons as unknown as Record<string, LucideIcon>)[project.icon];
+    }
+    return Folder;
+  };
+
+  const IconComponent = getIconComponent();
+  const hasCustomIcon = !!project.customIconPath && !imageError;
+
+  // Combine project.id with sanitized name for uniqueness and readability
+  // Format: project-switcher-{id}-{sanitizedName}
+  const testId = `project-switcher-${project.id}-${sanitizeForTestId(project.name)}`;
+
+  return (
+    <button
+      onClick={onClick}
+      onContextMenu={onContextMenu}
+      data-testid={testId}
+      className={cn(
+        'group w-full aspect-square rounded-xl flex items-center justify-center relative overflow-hidden',
+        'transition-all duration-200 ease-out',
+        isActive
+          ? [
+              // Active: Premium gradient with glow
+              'bg-gradient-to-r from-brand-500/20 via-brand-500/15 to-brand-600/10',
+              'border border-brand-500/30',
+              'shadow-md shadow-brand-500/10',
+            ]
+          : [
+              // Inactive: Subtle hover state
+              'hover:bg-accent/50',
+              'border border-transparent hover:border-border/40',
+              'hover:shadow-sm',
+            ],
+        'hover:scale-105 active:scale-95'
+      )}
+      title={project.name}
+    >
+      {hasCustomIcon ? (
+        <img
+          src={getAuthenticatedImageUrl(project.customIconPath!, project.path)}
+          alt={project.name}
+          className={cn(
+            'w-8 h-8 rounded-lg object-cover transition-all duration-200',
+            isActive ? 'ring-1 ring-brand-500/50' : 'group-hover:scale-110'
+          )}
+          onError={() => setImageError(true)}
+        />
+      ) : (
+        <IconComponent
+          className={cn(
+            'w-6 h-6 transition-all duration-200',
+            isActive
+              ? 'text-brand-500 drop-shadow-sm'
+              : 'text-muted-foreground group-hover:text-brand-400 group-hover:scale-110'
+          )}
+        />
+      )}
+
+      {/* Tooltip on hover */}
+      <span
+        className={cn(
+          'absolute left-full ml-3 px-2.5 py-1.5 rounded-lg',
+          'bg-popover text-popover-foreground text-xs font-medium',
+          'border border-border shadow-lg',
+          'opacity-0 group-hover:opacity-100',
+          'transition-all duration-200 whitespace-nowrap z-50',
+          'translate-x-1 group-hover:translate-x-0 pointer-events-none'
+        )}
+      >
+        {project.name}
+      </span>
+
+      {/* Hotkey badge */}
+      {hotkeyLabel && (
+        <span
+          className={cn(
+            'absolute bottom-0.5 right-0.5 min-w-[16px] h-4 px-1',
+            'flex items-center justify-center',
+            'text-[10px] font-medium rounded',
+            'bg-muted/80 text-muted-foreground',
+            'border border-border/50',
+            'pointer-events-none'
+          )}
+        >
+          {hotkeyLabel}
+        </span>
+      )}
+    </button>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/project-switcher/index.ts b/temp_repo/apps/ui/src/components/layout/project-switcher/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f540a4f646dcfd12174b796c7a8d94a0e7e01341
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/project-switcher/index.ts
@@ -0,0 +1 @@
+export { ProjectSwitcher } from './project-switcher';
diff --git a/temp_repo/apps/ui/src/components/layout/project-switcher/project-switcher.tsx b/temp_repo/apps/ui/src/components/layout/project-switcher/project-switcher.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..503aa9c398ea710c7ebe4777916c0a605ecb80f9
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/project-switcher/project-switcher.tsx
@@ -0,0 +1,549 @@
+import { useState, useCallback, useEffect, startTransition } from 'react';
+import { Plus, Bug, FolderOpen, BookOpen } from 'lucide-react';
+import { useNavigate, useLocation } from '@tanstack/react-router';
+import { cn, isMac } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import { useOSDetection } from '@/hooks/use-os-detection';
+import { ProjectSwitcherItem } from './components/project-switcher-item';
+import { ProjectContextMenu } from './components/project-context-menu';
+import { EditProjectDialog } from './components/edit-project-dialog';
+import { NotificationBell } from './components/notification-bell';
+import { NewProjectModal } from '@/components/dialogs/new-project-modal';
+import { OnboardingDialog } from '@/components/layout/sidebar/dialogs';
+import { useProjectCreation } from '@/components/layout/sidebar/hooks';
+import {
+  MACOS_ELECTRON_TOP_PADDING_CLASS,
+  SIDEBAR_FEATURE_FLAGS,
+} from '@/components/layout/sidebar/constants';
+import type { Project } from '@/lib/electron';
+import { getElectronAPI, isElectron } from '@/lib/electron';
+import { initializeProject, hasAppSpec, hasAutomakerDir } from '@/lib/project-init';
+import { toast } from 'sonner';
+import { CreateSpecDialog } from '@/components/views/spec-view/dialogs';
+import type { FeatureCount } from '@/components/views/spec-view/types';
+
+function getOSAbbreviation(os: string): string {
+  switch (os) {
+    case 'mac':
+      return 'M';
+    case 'windows':
+      return 'W';
+    case 'linux':
+      return 'L';
+    default:
+      return '?';
+  }
+}
+
+export function ProjectSwitcher() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { hideWiki } = SIDEBAR_FEATURE_FLAGS;
+  const isWikiActive = location.pathname === '/wiki';
+  const projects = useAppStore((s) => s.projects);
+  const currentProject = useAppStore((s) => s.currentProject);
+  const setCurrentProject = useAppStore((s) => s.setCurrentProject);
+  const upsertAndSetCurrentProject = useAppStore((s) => s.upsertAndSetCurrentProject);
+  const specCreatingForProject = useAppStore((s) => s.specCreatingForProject);
+  const setSpecCreatingForProject = useAppStore((s) => s.setSpecCreatingForProject);
+  const [contextMenuProject, setContextMenuProject] = useState<Project | null>(null);
+  const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | null>(
+    null
+  );
+  const [editDialogProject, setEditDialogProject] = useState<Project | null>(null);
+
+  // Setup dialog state for opening existing projects
+  const [showSetupDialog, setShowSetupDialog] = useState(false);
+  const [setupProjectPath, setSetupProjectPath] = useState<string | null>(null);
+  const [projectOverview, setProjectOverview] = useState('');
+  const [generateFeatures, setGenerateFeatures] = useState(true);
+  const [analyzeProject, setAnalyzeProject] = useState(true);
+  const [featureCount, setFeatureCount] = useState<FeatureCount>(50);
+
+  // Derive isCreatingSpec from store state
+  const isCreatingSpec = specCreatingForProject !== null;
+
+  // Version info
+  const appVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0';
+  const { os } = useOSDetection();
+  const appMode = import.meta.env.VITE_APP_MODE || '?';
+  const versionSuffix = `${getOSAbbreviation(os)}${appMode}`;
+
+  // Project creation state and handlers
+  const {
+    showNewProjectModal,
+    setShowNewProjectModal,
+    isCreatingProject,
+    showOnboardingDialog,
+    setShowOnboardingDialog,
+    newProjectName,
+    handleCreateBlankProject,
+    handleCreateFromTemplate,
+    handleCreateFromCustomUrl,
+  } = useProjectCreation({
+    upsertAndSetCurrentProject,
+  });
+
+  const handleContextMenu = (project: Project, event: React.MouseEvent) => {
+    event.preventDefault();
+    setContextMenuProject(project);
+    setContextMenuPosition({ x: event.clientX, y: event.clientY });
+  };
+
+  const handleCloseContextMenu = () => {
+    setContextMenuProject(null);
+    setContextMenuPosition(null);
+  };
+
+  const handleEditProject = (project: Project) => {
+    setEditDialogProject(project);
+    handleCloseContextMenu();
+  };
+
+  const handleProjectClick = useCallback(
+    async (project: Project) => {
+      if (project.id === currentProject?.id) {
+        navigate({ to: '/board' });
+        return;
+      }
+      try {
+        // Ensure .automaker directory structure exists before switching
+        await initializeProject(project.path);
+      } catch (error) {
+        console.error('Failed to initialize project during switch:', error);
+        // Continue with switch even if initialization fails -
+        // the project may already be initialized
+      }
+      // Wrap in startTransition to let React batch the project switch and
+      // navigation into a single low-priority update. Without this, the two
+      // synchronous calls fire separate renders where currentProject points
+      // to the new project but per-project state (worktrees, features) is
+      // still stale, causing a cascade of effects and store mutations that
+      // can trigger React error #185 (maximum update depth exceeded).
+      startTransition(() => {
+        setCurrentProject(project);
+        // Navigate to board view when switching projects
+        navigate({ to: '/board' });
+      });
+    },
+    [currentProject?.id, setCurrentProject, navigate]
+  );
+
+  const handleNewProject = () => {
+    // Open the new project modal
+    setShowNewProjectModal(true);
+  };
+
+  const handleOnboardingSkip = () => {
+    setShowOnboardingDialog(false);
+    navigate({ to: '/board' });
+  };
+
+  const handleBugReportClick = useCallback(() => {
+    const api = getElectronAPI();
+    api.openExternalLink('https://github.com/AutoMaker-Org/automaker/issues');
+  }, []);
+
+  const handleWikiClick = useCallback(() => {
+    navigate({ to: '/wiki' });
+  }, [navigate]);
+
+  /**
+   * Opens the system folder selection dialog and initializes the selected project.
+   */
+  const handleOpenFolder = useCallback(async () => {
+    const api = getElectronAPI();
+    const result = await api.openDirectory();
+
+    if (!result.canceled && result.filePaths[0]) {
+      const path = result.filePaths[0];
+      // Extract folder name from path (works on both Windows and Mac/Linux)
+      const name = path.split(/[/\\]/).filter(Boolean).pop() || 'Untitled Project';
+
+      try {
+        // Check if this is a brand new project (no .automaker directory)
+        const hadAutomakerDir = await hasAutomakerDir(path);
+
+        // Initialize the .automaker directory structure
+        const initResult = await initializeProject(path);
+
+        if (!initResult.success) {
+          toast.error('Failed to initialize project', {
+            description: initResult.error || 'Unknown error occurred',
+          });
+          return;
+        }
+
+        // Upsert project and set as current (handles both create and update cases)
+        // Theme handling (trashed project recovery or undefined for global) is done by the store
+        upsertAndSetCurrentProject(path, name);
+
+        // Check if app_spec.txt exists
+        const specExists = await hasAppSpec(path);
+
+        if (!hadAutomakerDir && !specExists) {
+          // This is a brand new project - show setup dialog
+          setSetupProjectPath(path);
+          setShowSetupDialog(true);
+          toast.success('Project opened', {
+            description: `Opened ${name}. Let's set up your app specification!`,
+          });
+        } else if (initResult.createdFiles && initResult.createdFiles.length > 0) {
+          toast.success(initResult.isNewProject ? 'Project initialized' : 'Project updated', {
+            description: `Set up ${initResult.createdFiles.length} file(s) in .automaker`,
+          });
+        } else {
+          toast.success('Project opened', {
+            description: `Opened ${name}`,
+          });
+        }
+
+        // Navigate to board view
+        navigate({ to: '/board' });
+      } catch (error) {
+        console.error('Failed to open project:', error);
+        toast.error('Failed to open project', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    }
+  }, [upsertAndSetCurrentProject, navigate]);
+
+  // Handler for creating initial spec from the setup dialog
+  const handleCreateInitialSpec = useCallback(async () => {
+    if (!setupProjectPath) return;
+
+    setSpecCreatingForProject(setupProjectPath);
+    setShowSetupDialog(false);
+
+    try {
+      const api = getElectronAPI();
+      if (!api.specRegeneration) {
+        toast.error('Spec regeneration not available');
+        setSpecCreatingForProject(null);
+        return;
+      }
+      await api.specRegeneration.create(
+        setupProjectPath,
+        projectOverview,
+        generateFeatures,
+        analyzeProject,
+        featureCount
+      );
+    } catch (error) {
+      console.error('Failed to generate spec:', error);
+      toast.error('Failed to generate spec', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+      setSpecCreatingForProject(null);
+    }
+  }, [
+    setupProjectPath,
+    projectOverview,
+    generateFeatures,
+    analyzeProject,
+    featureCount,
+    setSpecCreatingForProject,
+  ]);
+
+  const handleSkipSetup = useCallback(() => {
+    setShowSetupDialog(false);
+    setSetupProjectPath(null);
+  }, []);
+
+  // Keyboard shortcuts for project switching (1-9, 0)
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Ignore if user is typing in an input, textarea, or contenteditable
+      const target = event.target as HTMLElement;
+      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+        return;
+      }
+
+      // Ignore if modifier keys are pressed (except for standalone number keys)
+      if (event.ctrlKey || event.metaKey || event.altKey) {
+        return;
+      }
+
+      // Map key to project index: "1" -> 0, "2" -> 1, ..., "9" -> 8, "0" -> 9
+      const key = event.key;
+      let projectIndex: number | null = null;
+
+      if (key >= '1' && key <= '9') {
+        projectIndex = parseInt(key, 10) - 1; // "1" -> 0, "9" -> 8
+      } else if (key === '0') {
+        projectIndex = 9; // "0" -> 9
+      }
+
+      if (projectIndex !== null && projectIndex < projects.length) {
+        const targetProject = projects[projectIndex];
+        if (targetProject && targetProject.id !== currentProject?.id) {
+          handleProjectClick(targetProject);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [projects, currentProject, handleProjectClick]);
+
+  return (
+    <>
+      <aside
+        className={cn(
+          'flex-shrink-0 flex flex-col w-16 z-50 relative',
+          // Glass morphism background with gradient
+          'bg-gradient-to-b from-sidebar/95 via-sidebar/85 to-sidebar/90 backdrop-blur-2xl',
+          // Premium border with subtle glow
+          'border-r border-border/60 shadow-[1px_0_20px_-5px_rgba(0,0,0,0.1)]'
+        )}
+        data-testid="project-switcher"
+      >
+        {/* Automaker Logo and Version */}
+        <div
+          className={cn(
+            'flex flex-col items-center pb-2 px-2',
+            isMac && isElectron() ? MACOS_ELECTRON_TOP_PADDING_CLASS : 'pt-3'
+          )}
+        >
+          <button
+            onClick={() => navigate({ to: '/dashboard' })}
+            className="group flex flex-col items-center gap-0.5"
+            title="Go to Dashboard"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 256 256"
+              role="img"
+              aria-label="Automaker Logo"
+              className="size-10 group-hover:rotate-12 transition-transform duration-300 ease-out"
+            >
+              <defs>
+                <linearGradient
+                  id="bg-switcher"
+                  x1="0"
+                  y1="0"
+                  x2="256"
+                  y2="256"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop offset="0%" style={{ stopColor: 'var(--brand-400)' }} />
+                  <stop offset="100%" style={{ stopColor: 'var(--brand-600)' }} />
+                </linearGradient>
+              </defs>
+              <rect x="16" y="16" width="224" height="224" rx="56" fill="url(#bg-switcher)" />
+              <g
+                fill="none"
+                stroke="#FFFFFF"
+                strokeWidth="20"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M92 92 L52 128 L92 164" />
+                <path d="M144 72 L116 184" />
+                <path d="M164 92 L204 128 L164 164" />
+              </g>
+            </svg>
+            <span className="text-[0.625rem] text-muted-foreground leading-none font-medium">
+              v{appVersion} {versionSuffix}
+            </span>
+          </button>
+
+          {/* Notification Bell */}
+          <div className="flex justify-center mt-2">
+            <NotificationBell projectPath={currentProject?.path ?? null} />
+          </div>
+          <div className="w-full h-px bg-border mt-3" />
+        </div>
+
+        {/* Projects List */}
+        <div className="flex-1 overflow-y-auto pt-1 pb-3 px-2 space-y-2">
+          {projects.map((project, index) => (
+            <ProjectSwitcherItem
+              key={project.id}
+              project={project}
+              isActive={currentProject?.id === project.id}
+              hotkeyIndex={index < 10 ? index : undefined}
+              onClick={() => handleProjectClick(project)}
+              onContextMenu={(e) => handleContextMenu(project, e)}
+            />
+          ))}
+
+          {/* Horizontal rule and Add Project Button - only show if there are projects */}
+          {projects.length > 0 && (
+            <>
+              <div className="w-full h-px bg-border my-2" />
+              <button
+                onClick={handleNewProject}
+                className={cn(
+                  'w-full aspect-square rounded-xl flex items-center justify-center',
+                  'transition-all duration-200 ease-out',
+                  'text-muted-foreground hover:text-foreground',
+                  'hover:bg-accent/50 border border-transparent hover:border-border/40',
+                  'hover:shadow-sm hover:scale-105 active:scale-95'
+                )}
+                title="New Project"
+                data-testid="new-project-button"
+              >
+                <Plus className="w-5 h-5" />
+              </button>
+              <button
+                onClick={handleOpenFolder}
+                className={cn(
+                  'w-full aspect-square rounded-xl flex items-center justify-center',
+                  'transition-all duration-200 ease-out',
+                  'text-muted-foreground hover:text-foreground',
+                  'hover:bg-accent/50 border border-transparent hover:border-border/40',
+                  'hover:shadow-sm hover:scale-105 active:scale-95'
+                )}
+                title="Open Project"
+                data-testid="open-project-button"
+              >
+                <FolderOpen className="w-5 h-5" />
+              </button>
+            </>
+          )}
+
+          {/* Add Project Button - when no projects, show without rule */}
+          {projects.length === 0 && (
+            <>
+              <button
+                onClick={handleNewProject}
+                className={cn(
+                  'w-full aspect-square rounded-xl flex items-center justify-center',
+                  'transition-all duration-200 ease-out',
+                  'text-muted-foreground hover:text-foreground',
+                  'hover:bg-accent/50 border border-transparent hover:border-border/40',
+                  'hover:shadow-sm hover:scale-105 active:scale-95'
+                )}
+                title="New Project"
+                data-testid="new-project-button"
+              >
+                <Plus className="w-5 h-5" />
+              </button>
+              <button
+                onClick={handleOpenFolder}
+                className={cn(
+                  'w-full aspect-square rounded-xl flex items-center justify-center',
+                  'transition-all duration-200 ease-out',
+                  'text-muted-foreground hover:text-foreground',
+                  'hover:bg-accent/50 border border-transparent hover:border-border/40',
+                  'hover:shadow-sm hover:scale-105 active:scale-95'
+                )}
+                title="Open Project"
+                data-testid="open-project-button"
+              >
+                <FolderOpen className="w-5 h-5" />
+              </button>
+            </>
+          )}
+        </div>
+
+        {/* Wiki and Bug Report Buttons at the very bottom */}
+        <div className="p-2 border-t border-border/40 space-y-2">
+          {/* Wiki Button */}
+          {!hideWiki && (
+            <button
+              onClick={handleWikiClick}
+              className={cn(
+                'w-full aspect-square rounded-xl flex items-center justify-center',
+                'transition-all duration-200 ease-out',
+                isWikiActive
+                  ? [
+                      'bg-gradient-to-r from-brand-500/20 via-brand-500/15 to-brand-600/10',
+                      'text-foreground',
+                      'border border-brand-500/30',
+                      'shadow-md shadow-brand-500/10',
+                    ]
+                  : [
+                      'text-muted-foreground hover:text-foreground',
+                      'hover:bg-accent/50 border border-transparent hover:border-border/40',
+                      'hover:shadow-sm hover:scale-105 active:scale-95',
+                    ]
+              )}
+              title="Wiki"
+              data-testid="wiki-button"
+            >
+              <BookOpen
+                className={cn('w-5 h-5', isWikiActive && 'text-brand-500 drop-shadow-sm')}
+              />
+            </button>
+          )}
+          {/* Bug Report Button */}
+          <button
+            onClick={handleBugReportClick}
+            className={cn(
+              'w-full aspect-square rounded-xl flex items-center justify-center',
+              'transition-all duration-200 ease-out',
+              'text-muted-foreground hover:text-foreground',
+              'hover:bg-accent/50 border border-transparent hover:border-border/40',
+              'hover:shadow-sm hover:scale-105 active:scale-95'
+            )}
+            title="Report Bug / Feature Request"
+            data-testid="bug-report-button"
+          >
+            <Bug className="w-5 h-5" />
+          </button>
+        </div>
+      </aside>
+
+      {/* Context Menu */}
+      {contextMenuProject && contextMenuPosition && (
+        <ProjectContextMenu
+          project={contextMenuProject}
+          position={contextMenuPosition}
+          onClose={handleCloseContextMenu}
+          onEdit={handleEditProject}
+        />
+      )}
+
+      {/* Edit Project Dialog */}
+      {editDialogProject && (
+        <EditProjectDialog
+          project={editDialogProject}
+          open={!!editDialogProject}
+          onOpenChange={(open) => !open && setEditDialogProject(null)}
+        />
+      )}
+
+      {/* New Project Modal */}
+      <NewProjectModal
+        open={showNewProjectModal}
+        onOpenChange={setShowNewProjectModal}
+        onCreateBlankProject={handleCreateBlankProject}
+        onCreateFromTemplate={handleCreateFromTemplate}
+        onCreateFromCustomUrl={handleCreateFromCustomUrl}
+        isCreating={isCreatingProject}
+      />
+
+      {/* Onboarding Dialog */}
+      <OnboardingDialog
+        open={showOnboardingDialog}
+        onOpenChange={setShowOnboardingDialog}
+        newProjectName={newProjectName}
+        onSkip={handleOnboardingSkip}
+        onGenerateSpec={handleOnboardingSkip}
+      />
+
+      {/* Setup Dialog for Open Project */}
+      <CreateSpecDialog
+        open={showSetupDialog}
+        onOpenChange={setShowSetupDialog}
+        projectOverview={projectOverview}
+        onProjectOverviewChange={setProjectOverview}
+        generateFeatures={generateFeatures}
+        onGenerateFeaturesChange={setGenerateFeatures}
+        analyzeProject={analyzeProject}
+        onAnalyzeProjectChange={setAnalyzeProject}
+        featureCount={featureCount}
+        onFeatureCountChange={setFeatureCount}
+        onCreateSpec={handleCreateInitialSpec}
+        onSkip={handleSkipSetup}
+        isCreatingSpec={isCreatingSpec}
+        showSkipButton={true}
+        title="Set Up Your Project"
+        description="We didn't find an app_spec.txt file. Let us help you generate your app_spec.txt to help describe your project for our system. We'll analyze your project's tech stack and create a comprehensive specification."
+      />
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/components/automaker-logo.tsx b/temp_repo/apps/ui/src/components/layout/sidebar/components/automaker-logo.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9f47fffe01bad344ed5023ce0deca579332e655b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/components/automaker-logo.tsx
@@ -0,0 +1,151 @@
+import type { NavigateOptions } from '@tanstack/react-router';
+import { cn } from '@/lib/utils';
+import { useOSDetection } from '@/hooks/use-os-detection';
+
+interface AutomakerLogoProps {
+  sidebarOpen: boolean;
+  navigate: (opts: NavigateOptions) => void;
+}
+
+function getOSAbbreviation(os: string): string {
+  switch (os) {
+    case 'mac':
+      return 'M';
+    case 'windows':
+      return 'W';
+    case 'linux':
+      return 'L';
+    default:
+      return '?';
+  }
+}
+
+export function AutomakerLogo({ sidebarOpen, navigate }: AutomakerLogoProps) {
+  const appVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0';
+  const { os } = useOSDetection();
+  const appMode = import.meta.env.VITE_APP_MODE || '?';
+  const versionSuffix = `${getOSAbbreviation(os)}${appMode}`;
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-3 titlebar-no-drag cursor-pointer group',
+        !sidebarOpen && 'flex-col gap-1'
+      )}
+      onClick={() => navigate({ to: '/overview' })}
+      data-testid="logo-button"
+    >
+      {/* Collapsed logo - only shown when sidebar is closed */}
+      <div
+        className={cn(
+          'relative flex flex-col items-center justify-center rounded-lg gap-0.5',
+          sidebarOpen ? 'hidden' : 'flex'
+        )}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 256 256"
+          role="img"
+          aria-label="Automaker Logo"
+          className="size-8 group-hover:rotate-12 transition-transform duration-300 ease-out"
+        >
+          <defs>
+            <linearGradient
+              id="bg-collapsed"
+              x1="0"
+              y1="0"
+              x2="256"
+              y2="256"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0%" style={{ stopColor: 'var(--brand-400)' }} />
+              <stop offset="100%" style={{ stopColor: 'var(--brand-600)' }} />
+            </linearGradient>
+            <filter id="iconShadow-collapsed" x="-20%" y="-20%" width="140%" height="140%">
+              <feDropShadow
+                dx="0"
+                dy="4"
+                stdDeviation="4"
+                floodColor="#000000"
+                floodOpacity="0.25"
+              />
+            </filter>
+          </defs>
+          <rect x="16" y="16" width="224" height="224" rx="56" fill="url(#bg-collapsed)" />
+          <g
+            fill="none"
+            stroke="#FFFFFF"
+            strokeWidth="20"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            filter="url(#iconShadow-collapsed)"
+          >
+            <path d="M92 92 L52 128 L92 164" />
+            <path d="M144 72 L116 184" />
+            <path d="M164 92 L204 128 L164 164" />
+          </g>
+        </svg>
+        <span className="text-[0.625rem] text-muted-foreground leading-none font-medium">
+          v{appVersion} {versionSuffix}
+        </span>
+      </div>
+
+      {/* Expanded logo - shown when sidebar is open */}
+      {sidebarOpen && (
+        <div className="flex flex-col">
+          <div className="flex items-center gap-1">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 256 256"
+              role="img"
+              aria-label="automaker"
+              className="h-8 w-8 lg:h-[36.8px] lg:w-[36.8px] shrink-0 group-hover:rotate-12 transition-transform duration-300 ease-out"
+            >
+              <defs>
+                <linearGradient
+                  id="bg-expanded"
+                  x1="0"
+                  y1="0"
+                  x2="256"
+                  y2="256"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop offset="0%" style={{ stopColor: 'var(--brand-400)' }} />
+                  <stop offset="100%" style={{ stopColor: 'var(--brand-600)' }} />
+                </linearGradient>
+                <filter id="iconShadow-expanded" x="-20%" y="-20%" width="140%" height="140%">
+                  <feDropShadow
+                    dx="0"
+                    dy="4"
+                    stdDeviation="4"
+                    floodColor="#000000"
+                    floodOpacity="0.25"
+                  />
+                </filter>
+              </defs>
+              <rect x="16" y="16" width="224" height="224" rx="56" fill="url(#bg-expanded)" />
+              <g
+                fill="none"
+                stroke="#FFFFFF"
+                strokeWidth="20"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                filter="url(#iconShadow-expanded)"
+              >
+                <path d="M92 92 L52 128 L92 164" />
+                <path d="M144 72 L116 184" />
+                <path d="M164 92 L204 128 L164 164" />
+              </g>
+            </svg>
+            <span className="font-bold text-foreground text-xl lg:text-[1.7rem] tracking-tight leading-none translate-y-[-2px]">
+              automaker<span className="text-brand-500">.</span>
+            </span>
+          </div>
+          <span className="text-[0.625rem] text-muted-foreground leading-none font-medium ml-9 lg:ml-[38.8px]">
+            v{appVersion} {versionSuffix}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/components/bug-report-button.tsx b/temp_repo/apps/ui/src/components/layout/sidebar/components/bug-report-button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8139dc55945a192f04cd873cf1e4ade5e73d1439
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/components/bug-report-button.tsx
@@ -0,0 +1,33 @@
+import { Bug } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useCallback } from 'react';
+import { getElectronAPI } from '@/lib/electron';
+
+interface BugReportButtonProps {
+  sidebarExpanded: boolean;
+}
+
+export function BugReportButton({ sidebarExpanded }: BugReportButtonProps) {
+  const handleBugReportClick = useCallback(() => {
+    const api = getElectronAPI();
+    api.openExternalLink('https://github.com/AutoMaker-Org/automaker/issues');
+  }, []);
+
+  return (
+    <button
+      onClick={handleBugReportClick}
+      className={cn(
+        'titlebar-no-drag px-3 py-2.5 rounded-xl',
+        'text-muted-foreground hover:text-foreground hover:bg-accent/80',
+        'border border-transparent hover:border-border/40',
+        'transition-all duration-200 ease-out',
+        'hover:scale-[1.02] active:scale-[0.97]',
+        sidebarExpanded && 'absolute right-3'
+      )}
+      title="Report Bug / Feature Request"
+      data-testid={sidebarExpanded ? 'bug-report-link' : 'bug-report-link-collapsed'}
+    >
+      <Bug className="w-4 h-4" />
+    </button>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/components/collapse-toggle-button.tsx b/temp_repo/apps/ui/src/components/layout/sidebar/components/collapse-toggle-button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2a503fc573e08fa43af8c945c66310ad9bc1e37c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/components/collapse-toggle-button.tsx
@@ -0,0 +1,68 @@
+import { PanelLeft, PanelLeftClose } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { formatShortcut } from '@/store/app-store';
+import { useIsCompact } from '@/hooks/use-media-query';
+
+interface CollapseToggleButtonProps {
+  sidebarOpen: boolean;
+  toggleSidebar: () => void;
+  shortcut: string;
+}
+
+export function CollapseToggleButton({
+  sidebarOpen,
+  toggleSidebar,
+  shortcut,
+}: CollapseToggleButtonProps) {
+  const isCompact = useIsCompact();
+
+  // Hide when in compact mode (mobile menu is shown in board header)
+  if (isCompact) {
+    return null;
+  }
+
+  return (
+    <button
+      onClick={toggleSidebar}
+      className={cn(
+        'flex absolute top-[40px] -right-3.5 z-9999',
+        'group/toggle items-center justify-center w-7 h-7 rounded-full',
+        // Glass morphism button
+        'bg-card/95 backdrop-blur-sm border border-border/80',
+        // Premium shadow with glow on hover
+        'shadow-lg shadow-black/5 hover:shadow-xl hover:shadow-brand-500/10',
+        'text-muted-foreground hover:text-brand-500 hover:bg-accent/80',
+        'hover:border-brand-500/30',
+        'transition-all duration-200 ease-out titlebar-no-drag',
+        'hover:scale-110 active:scale-90'
+      )}
+      data-testid="sidebar-collapse-button"
+    >
+      {sidebarOpen ? (
+        <PanelLeftClose className="w-3.5 h-3.5 pointer-events-none transition-transform duration-200" />
+      ) : (
+        <PanelLeft className="w-3.5 h-3.5 pointer-events-none transition-transform duration-200" />
+      )}
+      {/* Tooltip */}
+      <div
+        className={cn(
+          'absolute left-full ml-3 px-2.5 py-1.5 rounded-lg',
+          'bg-popover text-popover-foreground text-xs font-medium',
+          'border border-border shadow-lg',
+          'opacity-0 group-hover/toggle:opacity-100 transition-all duration-200',
+          'whitespace-nowrap z-50 pointer-events-none',
+          'translate-x-1 group-hover/toggle:translate-x-0'
+        )}
+        data-testid="sidebar-toggle-tooltip"
+      >
+        {sidebarOpen ? 'Collapse sidebar' : 'Expand sidebar'}{' '}
+        <span
+          className="ml-1.5 px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground"
+          data-testid="sidebar-toggle-shortcut"
+        >
+          {formatShortcut(shortcut, true)}
+        </span>
+      </div>
+    </button>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/components/index.ts b/temp_repo/apps/ui/src/components/layout/sidebar/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fa44cf8966201fe0a7e9c711cc1b69f650260166
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/components/index.ts
@@ -0,0 +1,11 @@
+export { SortableProjectItem } from './sortable-project-item';
+export { ThemeMenuItem } from './theme-menu-item';
+export { BugReportButton } from './bug-report-button';
+export { CollapseToggleButton } from './collapse-toggle-button';
+export { AutomakerLogo } from './automaker-logo';
+export { SidebarHeader } from './sidebar-header';
+export { ProjectActions } from './project-actions';
+export { SidebarNavigation } from './sidebar-navigation';
+export { ProjectSelectorWithOptions } from './project-selector-with-options';
+export { SidebarFooter } from './sidebar-footer';
+export { MobileSidebarToggle } from './mobile-sidebar-toggle';
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/components/mobile-sidebar-toggle.tsx b/temp_repo/apps/ui/src/components/layout/sidebar/components/mobile-sidebar-toggle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f79400a194bac64bcff80841bd8d3a45cd688156
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/components/mobile-sidebar-toggle.tsx
@@ -0,0 +1,42 @@
+import { PanelLeft } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import { useIsCompact } from '@/hooks/use-media-query';
+
+/**
+ * Floating toggle button for mobile that completely hides/shows the sidebar.
+ * Positioned at the left-center of the screen.
+ * Only visible on compact/mobile screens when the sidebar is hidden.
+ */
+export function MobileSidebarToggle() {
+  const isCompact = useIsCompact();
+  const { mobileSidebarHidden, toggleMobileSidebarHidden } = useAppStore();
+
+  // Only show on compact screens when sidebar is hidden
+  if (!isCompact || !mobileSidebarHidden) {
+    return null;
+  }
+
+  return (
+    <button
+      onClick={toggleMobileSidebarHidden}
+      className={cn(
+        'fixed left-0 top-1/2 -translate-y-1/2 z-50',
+        'flex items-center justify-center',
+        'w-8 h-12 rounded-r-lg',
+        // Glass morphism background
+        'bg-card/95 backdrop-blur-sm border border-l-0 border-border/80',
+        // Shadow and hover effects
+        'shadow-lg shadow-black/10 hover:shadow-xl hover:shadow-brand-500/10',
+        'text-muted-foreground hover:text-brand-500 hover:bg-accent/80',
+        'hover:border-brand-500/30',
+        'transition-all duration-200 ease-out',
+        'hover:w-10 active:scale-95'
+      )}
+      aria-label="Show sidebar"
+      data-testid="mobile-sidebar-toggle"
+    >
+      <PanelLeft className="w-4 h-4 pointer-events-none" />
+    </button>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/components/project-actions.tsx b/temp_repo/apps/ui/src/components/layout/sidebar/components/project-actions.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4ef09d5a58e06a5aa1b67180ecba1276f4c3fa47
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/components/project-actions.tsx
@@ -0,0 +1,91 @@
+import { Plus, FolderOpen, Recycle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { formatShortcut } from '@/store/app-store';
+import type { TrashedProject } from '@/lib/electron';
+
+interface ProjectActionsProps {
+  setShowNewProjectModal: (show: boolean) => void;
+  handleOpenFolder: () => void;
+  setShowTrashDialog: (show: boolean) => void;
+  trashedProjects: TrashedProject[];
+  shortcuts: {
+    openProject: string;
+  };
+}
+
+export function ProjectActions({
+  setShowNewProjectModal,
+  handleOpenFolder,
+  setShowTrashDialog,
+  trashedProjects,
+  shortcuts,
+}: ProjectActionsProps) {
+  return (
+    <div className="flex items-center gap-2.5 titlebar-no-drag px-3 mt-5">
+      <button
+        onClick={() => setShowNewProjectModal(true)}
+        className={cn(
+          'group flex items-center justify-center flex-1 px-3 py-2.5 rounded-xl',
+          'relative overflow-hidden',
+          'text-muted-foreground hover:text-foreground',
+          // Glass background with gradient on hover
+          'bg-accent/20 hover:bg-gradient-to-br hover:from-brand-500/15 hover:to-brand-600/10',
+          'border border-border/40 hover:border-brand-500/30',
+          // Premium shadow
+          'shadow-sm hover:shadow-md hover:shadow-brand-500/5',
+          'transition-all duration-200 ease-out',
+          'hover:scale-[1.02] active:scale-[0.97]'
+        )}
+        title="New Project"
+        data-testid="new-project-button"
+      >
+        <Plus className="w-4 h-4 shrink-0 transition-transform duration-200 group-hover:rotate-90 group-hover:text-brand-500" />
+        <span className="ml-2 text-sm font-medium block whitespace-nowrap">New</span>
+      </button>
+      <button
+        onClick={handleOpenFolder}
+        className={cn(
+          'group flex items-center justify-center flex-1 px-3 py-2.5 rounded-xl',
+          'relative overflow-hidden',
+          'text-muted-foreground hover:text-foreground',
+          // Glass background
+          'bg-accent/20 hover:bg-accent/40',
+          'border border-border/40 hover:border-border/60',
+          'shadow-sm hover:shadow-md',
+          'transition-all duration-200 ease-out',
+          'hover:scale-[1.02] active:scale-[0.97]'
+        )}
+        title={`Open Folder (${shortcuts.openProject})`}
+        data-testid="open-project-button"
+      >
+        <FolderOpen className="w-4 h-4 shrink-0 transition-transform duration-200 group-hover:scale-110" />
+        <span className="flex items-center justify-center min-w-5 h-5 px-1.5 text-[10px] font-mono rounded-md bg-muted/80 text-muted-foreground ml-2">
+          {formatShortcut(shortcuts.openProject, true)}
+        </span>
+      </button>
+      <button
+        onClick={() => setShowTrashDialog(true)}
+        className={cn(
+          'group flex items-center justify-center px-3 h-[42px] rounded-xl',
+          'relative',
+          'text-muted-foreground hover:text-destructive',
+          // Subtle background that turns red on hover
+          'bg-accent/20 hover:bg-destructive/15',
+          'border border-border/40 hover:border-destructive/40',
+          'shadow-sm hover:shadow-md hover:shadow-destructive/10',
+          'transition-all duration-200 ease-out',
+          'hover:scale-[1.02] active:scale-[0.97]'
+        )}
+        title="Recycle Bin"
+        data-testid="trash-button"
+      >
+        <Recycle className="size-4 shrink-0 transition-transform duration-200 group-hover:rotate-12" />
+        {trashedProjects.length > 0 && (
+          <span className="absolute -top-1.5 -right-1.5 z-10 flex items-center justify-center min-w-4 h-4 px-1 text-[9px] font-bold rounded-full bg-red-500 text-white shadow-md ring-1 ring-red-600/50">
+            {trashedProjects.length > 9 ? '9+' : trashedProjects.length}
+          </span>
+        )}
+      </button>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/components/project-selector-with-options.tsx b/temp_repo/apps/ui/src/components/layout/sidebar/components/project-selector-with-options.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a1c6f8c5fdb18f44597078cfb450ab4e82494115
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/components/project-selector-with-options.tsx
@@ -0,0 +1,430 @@
+import { useCallback, startTransition } from 'react';
+import {
+  Folder,
+  ChevronDown,
+  MoreVertical,
+  Palette,
+  Monitor,
+  Moon,
+  Sun,
+  Undo2,
+  Redo2,
+  RotateCcw,
+  Trash2,
+  Search,
+  LogOut,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { formatShortcut, type ThemeMode, useAppStore } from '@/store/app-store';
+import { initializeProject } from '@/lib/project-init';
+import { toast } from 'sonner';
+import type { Project } from '@/lib/electron';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+} from '@/components/ui/dropdown-menu';
+import { DndContext, closestCenter } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { SortableProjectItem, ThemeMenuItem } from './';
+import { PROJECT_DARK_THEMES, PROJECT_LIGHT_THEMES, THEME_SUBMENU_CONSTANTS } from '../constants';
+import { useProjectPicker, useDragAndDrop, useProjectTheme } from '../hooks';
+import { useKeyboardShortcutsConfig } from '@/hooks/use-keyboard-shortcuts';
+
+/**
+ * Props for the ProjectSelectorWithOptions component.
+ * Defines the interface for the project selector dropdown with additional options menu.
+ */
+interface ProjectSelectorWithOptionsProps {
+  /** Whether the sidebar is currently expanded */
+  sidebarOpen: boolean;
+  /** Whether the project picker dropdown is currently open */
+  isProjectPickerOpen: boolean;
+  /** Callback to control the project picker dropdown open state */
+  setIsProjectPickerOpen: (value: boolean | ((prev: boolean) => boolean)) => void;
+  /** Callback to show the delete project confirmation dialog */
+  setShowDeleteProjectDialog: (show: boolean) => void;
+  /** Callback to show the remove from automaker confirmation dialog */
+  setShowRemoveFromAutomakerDialog: (show: boolean) => void;
+}
+
+/**
+ * A project selector component with search, drag-and-drop reordering, and options menu.
+ *
+ * Features:
+ * - Searchable dropdown for quick project switching
+ * - Drag-and-drop reordering of projects
+ * - Project-specific theme selection with live preview
+ * - Project history navigation (previous/next)
+ * - Option to move project to trash
+ *
+ * The component uses viewport-aware positioning via THEME_SUBMENU_CONSTANTS
+ * for consistent submenu behavior across the application.
+ *
+ * @param props - Component props
+ * @returns The rendered project selector or null if sidebar is closed or no projects exist
+ */
+export function ProjectSelectorWithOptions({
+  sidebarOpen,
+  isProjectPickerOpen,
+  setIsProjectPickerOpen,
+  setShowDeleteProjectDialog,
+  setShowRemoveFromAutomakerDialog,
+}: ProjectSelectorWithOptionsProps) {
+  const projects = useAppStore((s) => s.projects);
+  const currentProject = useAppStore((s) => s.currentProject);
+  const projectHistory = useAppStore((s) => s.projectHistory);
+  const setCurrentProject = useAppStore((s) => s.setCurrentProject);
+  const reorderProjects = useAppStore((s) => s.reorderProjects);
+  const cyclePrevProject = useAppStore((s) => s.cyclePrevProject);
+  const cycleNextProject = useAppStore((s) => s.cycleNextProject);
+  const clearProjectHistory = useAppStore((s) => s.clearProjectHistory);
+
+  const shortcuts = useKeyboardShortcutsConfig();
+  // Wrap setCurrentProject to initialize .automaker in background while switching
+  const setCurrentProjectWithInit = useCallback(
+    (p: Project) => {
+      if (p.id === currentProject?.id) {
+        return;
+      }
+      // Fire-and-forget: initialize .automaker directory structure in background
+      // so the project switch is not blocked by filesystem operations
+      initializeProject(p.path).catch((error) => {
+        console.error('Failed to initialize project during switch:', error);
+        toast.error('Failed to initialize project .automaker', {
+          description: error instanceof Error ? error.message : String(error),
+        });
+      });
+      // Switch project immediately for instant UI response
+      startTransition(() => {
+        setCurrentProject(p);
+      });
+    },
+    [currentProject?.id, setCurrentProject]
+  );
+
+  const {
+    projectSearchQuery,
+    setProjectSearchQuery,
+    selectedProjectIndex,
+    projectSearchInputRef,
+    scrollContainerRef,
+    filteredProjects,
+  } = useProjectPicker({
+    projects,
+    currentProject,
+    isProjectPickerOpen,
+    setIsProjectPickerOpen,
+    setCurrentProject: setCurrentProjectWithInit,
+  });
+
+  const { sensors, handleDragEnd } = useDragAndDrop({ projects, reorderProjects });
+
+  const { globalTheme, setProjectTheme, setPreviewTheme, handlePreviewEnter, handlePreviewLeave } =
+    useProjectTheme();
+
+  const handleSelectProject = useCallback(
+    (p: Project) => {
+      setCurrentProjectWithInit(p);
+      setIsProjectPickerOpen(false);
+    },
+    [setCurrentProjectWithInit, setIsProjectPickerOpen]
+  );
+
+  if (!sidebarOpen || projects.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="px-3 mt-3 flex items-center gap-2.5">
+      <DropdownMenu open={isProjectPickerOpen} onOpenChange={setIsProjectPickerOpen}>
+        <DropdownMenuTrigger asChild>
+          <button
+            className={cn(
+              'flex-1 flex items-center justify-between px-3.5 py-3 rounded-xl',
+              // Premium glass background
+              'bg-gradient-to-br from-accent/40 to-accent/20',
+              'hover:from-accent/50 hover:to-accent/30',
+              'border border-border/50 hover:border-border/70',
+              // Subtle inner shadow
+              'shadow-sm shadow-black/5',
+              'text-foreground titlebar-no-drag min-w-0',
+              'transition-all duration-200 ease-out',
+              isProjectPickerOpen &&
+                'from-brand-500/10 to-brand-600/5 border-brand-500/30 ring-2 ring-brand-500/20 shadow-lg shadow-brand-500/5'
+            )}
+            data-testid="project-selector"
+          >
+            <div className="flex items-center gap-2.5 flex-1 min-w-0">
+              <Folder className="h-4 w-4 text-brand-500 shrink-0" />
+              <span className="text-sm font-medium truncate">
+                {currentProject?.name || 'Select Project'}
+              </span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <span
+                className="hidden sm:flex items-center justify-center min-w-5 h-5 px-1.5 text-[10px] font-mono rounded-md bg-muted text-muted-foreground"
+                data-testid="project-picker-shortcut"
+              >
+                {formatShortcut(shortcuts.projectPicker, true)}
+              </span>
+              <ChevronDown
+                className={cn(
+                  'h-4 w-4 text-muted-foreground shrink-0 transition-transform duration-200',
+                  isProjectPickerOpen && 'rotate-180'
+                )}
+              />
+            </div>
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          className="w-72 bg-popover/95 backdrop-blur-xl border-border shadow-xl p-1.5"
+          align="start"
+          data-testid="project-picker-dropdown"
+        >
+          {/* Search input */}
+          <div className="px-1 pb-2">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+              <input
+                ref={projectSearchInputRef}
+                type="text"
+                placeholder="Search projects..."
+                value={projectSearchQuery}
+                onChange={(e) => setProjectSearchQuery(e.target.value)}
+                className={cn(
+                  'w-full h-8 pl-8 pr-3 text-sm rounded-lg',
+                  'border border-border bg-background/50',
+                  'text-foreground placeholder:text-muted-foreground',
+                  'focus:outline-none focus:ring-1 focus:ring-brand-500/30 focus:border-brand-500/50',
+                  'transition-all duration-200'
+                )}
+                data-testid="project-search-input"
+              />
+            </div>
+          </div>
+
+          {filteredProjects.length === 0 ? (
+            <div className="px-2 py-6 text-center text-sm text-muted-foreground">
+              No projects found
+            </div>
+          ) : (
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragEnd={handleDragEnd}
+            >
+              <SortableContext
+                items={filteredProjects.map((p) => p.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                <div
+                  ref={scrollContainerRef}
+                  className="space-y-0.5 max-h-64 overflow-y-auto overflow-x-hidden scroll-smooth scrollbar-styled"
+                >
+                  {filteredProjects.map((project, index) => (
+                    <SortableProjectItem
+                      key={project.id}
+                      project={project}
+                      currentProjectId={currentProject?.id}
+                      isHighlighted={index === selectedProjectIndex}
+                      onSelect={handleSelectProject}
+                    />
+                  ))}
+                </div>
+              </SortableContext>
+            </DndContext>
+          )}
+
+          {/* Keyboard hint */}
+          <div className="px-2 pt-2 mt-1.5 border-t border-border/50">
+            <p className="text-[10px] text-muted-foreground text-center tracking-wide">
+              <span className="text-foreground/60">↑↓</span> navigate{' '}
+              <span className="mx-1 text-foreground/30">|</span>{' '}
+              <span className="text-foreground/60">↵</span> select{' '}
+              <span className="mx-1 text-foreground/30">|</span>{' '}
+              <span className="text-foreground/60">esc</span> close
+            </p>
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* Project Options Menu */}
+      {currentProject && (
+        <DropdownMenu
+          onOpenChange={(open) => {
+            // Clear preview theme when the menu closes
+            if (!open) {
+              setPreviewTheme(null);
+            }
+          }}
+        >
+          <DropdownMenuTrigger asChild>
+            <button
+              className={cn(
+                'flex items-center justify-center w-[42px] h-[42px] rounded-lg',
+                'text-muted-foreground hover:text-foreground',
+                'bg-transparent hover:bg-accent/60',
+                'border border-border/50 hover:border-border',
+                'transition-all duration-200 ease-out titlebar-no-drag'
+              )}
+              title="Project options"
+              data-testid="project-options-menu"
+            >
+              <MoreVertical className="w-4 h-4" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56 bg-popover/95 backdrop-blur-xl">
+            {/* Project Theme Submenu */}
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger data-testid="project-theme-trigger">
+                <Palette className="w-4 h-4 mr-2" />
+                <span className="flex-1">Project Theme</span>
+                {currentProject.theme && (
+                  <span className="text-[10px] text-muted-foreground ml-2 capitalize">
+                    {currentProject.theme}
+                  </span>
+                )}
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent
+                className="w-[420px] bg-popover/95 backdrop-blur-xl"
+                data-testid="project-theme-menu"
+                collisionPadding={THEME_SUBMENU_CONSTANTS.COLLISION_PADDING}
+                onPointerLeave={() => {
+                  // Clear preview theme when leaving the dropdown
+                  setPreviewTheme(null);
+                }}
+              >
+                <DropdownMenuRadioGroup
+                  value={currentProject.theme || ''}
+                  onValueChange={(value) => {
+                    if (currentProject) {
+                      setPreviewTheme(null);
+                      // Only set project theme - don't change global theme
+                      // The UI uses getEffectiveTheme() which handles: previewTheme ?? projectTheme ?? globalTheme
+                      setProjectTheme(
+                        currentProject.id,
+                        value === '' ? null : (value as ThemeMode)
+                      );
+                    }
+                  }}
+                >
+                  <div
+                    onPointerEnter={() => handlePreviewEnter(globalTheme)}
+                    onPointerLeave={() => setPreviewTheme(null)}
+                  >
+                    <DropdownMenuRadioItem
+                      value=""
+                      data-testid="project-theme-global"
+                      className="mx-2"
+                    >
+                      <Monitor className="w-4 h-4 mr-2" />
+                      <span>Use Global</span>
+                      <span className="text-[10px] text-muted-foreground ml-1 capitalize">
+                        ({globalTheme})
+                      </span>
+                    </DropdownMenuRadioItem>
+                  </div>
+                  <DropdownMenuSeparator />
+                  {/* Two Column Layout */}
+                  {/* Max height with scroll to ensure all themes are visible when menu is near screen edge */}
+                  <div className="flex gap-2 p-2 max-h-[60vh] overflow-y-auto scrollbar-styled">
+                    {/* Dark Themes Column */}
+                    <div className="flex-1">
+                      <div className="flex items-center gap-1.5 px-2 py-1.5 text-xs font-medium text-muted-foreground">
+                        <Moon className="w-3 h-3" />
+                        Dark
+                      </div>
+                      <div className="space-y-0.5">
+                        {PROJECT_DARK_THEMES.map((option) => (
+                          <ThemeMenuItem
+                            key={option.value}
+                            option={option}
+                            onPreviewEnter={handlePreviewEnter}
+                            onPreviewLeave={handlePreviewLeave}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                    {/* Light Themes Column */}
+                    <div className="flex-1">
+                      <div className="flex items-center gap-1.5 px-2 py-1.5 text-xs font-medium text-muted-foreground">
+                        <Sun className="w-3 h-3" />
+                        Light
+                      </div>
+                      <div className="space-y-0.5">
+                        {PROJECT_LIGHT_THEMES.map((option) => (
+                          <ThemeMenuItem
+                            key={option.value}
+                            option={option}
+                            onPreviewEnter={handlePreviewEnter}
+                            onPreviewLeave={handlePreviewLeave}
+                          />
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </DropdownMenuRadioGroup>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+
+            {/* Project History Section */}
+            {projectHistory.length > 1 && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuLabel className="text-xs text-muted-foreground">
+                  Project History
+                </DropdownMenuLabel>
+                <DropdownMenuItem onClick={cyclePrevProject} data-testid="cycle-prev-project">
+                  <Undo2 className="w-4 h-4 mr-2" />
+                  <span className="flex-1">Previous</span>
+                  <span className="text-[10px] font-mono text-muted-foreground ml-2">
+                    {formatShortcut(shortcuts.cyclePrevProject, true)}
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={cycleNextProject} data-testid="cycle-next-project">
+                  <Redo2 className="w-4 h-4 mr-2" />
+                  <span className="flex-1">Next</span>
+                  <span className="text-[10px] font-mono text-muted-foreground ml-2">
+                    {formatShortcut(shortcuts.cycleNextProject, true)}
+                  </span>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={clearProjectHistory} data-testid="clear-project-history">
+                  <RotateCcw className="w-4 h-4 mr-2" />
+                  <span>Clear history</span>
+                </DropdownMenuItem>
+              </>
+            )}
+
+            {/* Remove / Trash Section */}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={() => setShowRemoveFromAutomakerDialog(true)}
+              className="text-muted-foreground focus:text-foreground"
+              data-testid="remove-from-automaker"
+            >
+              <LogOut className="w-4 h-4 mr-2" />
+              <span>Remove from Automaker</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => setShowDeleteProjectDialog(true)}
+              className="text-destructive focus:text-destructive focus:bg-destructive/10"
+              data-testid="move-project-to-trash"
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              <span>Move to Trash</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/components/sidebar-footer.tsx b/temp_repo/apps/ui/src/components/layout/sidebar/components/sidebar-footer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..666d233932a768574a93f333e5b61f47b302839e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/components/sidebar-footer.tsx
@@ -0,0 +1,360 @@
+import { useCallback } from 'react';
+import type { NavigateOptions } from '@tanstack/react-router';
+import { cn } from '@/lib/utils';
+import { formatShortcut } from '@/store/app-store';
+import { Activity, Settings, BookOpen, MessageSquare, ExternalLink } from 'lucide-react';
+import { useOSDetection } from '@/hooks/use-os-detection';
+import { getElectronAPI } from '@/lib/electron';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+function getOSAbbreviation(os: string): string {
+  switch (os) {
+    case 'mac':
+      return 'M';
+    case 'windows':
+      return 'W';
+    case 'linux':
+      return 'L';
+    default:
+      return '?';
+  }
+}
+
+interface SidebarFooterProps {
+  sidebarOpen: boolean;
+  isActiveRoute: (id: string) => boolean;
+  navigate: (opts: NavigateOptions) => void;
+  hideRunningAgents: boolean;
+  hideWiki: boolean;
+  runningAgentsCount: number;
+  shortcuts: {
+    settings: string;
+  };
+}
+
+export function SidebarFooter({
+  sidebarOpen,
+  isActiveRoute,
+  navigate,
+  hideRunningAgents,
+  hideWiki,
+  runningAgentsCount,
+  shortcuts,
+}: SidebarFooterProps) {
+  const appVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0';
+  const { os } = useOSDetection();
+  const appMode = import.meta.env.VITE_APP_MODE || '?';
+  const versionSuffix = `${getOSAbbreviation(os)}${appMode}`;
+
+  const handleWikiClick = useCallback(() => {
+    navigate({ to: '/wiki' });
+  }, [navigate]);
+
+  const handleFeedbackClick = useCallback(() => {
+    try {
+      const api = getElectronAPI();
+      api.openExternalLink('https://github.com/AutoMaker-Org/automaker/issues');
+    } catch {
+      // Fallback for non-Electron environments (SSR, web browser)
+      window.open('https://github.com/AutoMaker-Org/automaker/issues', '_blank');
+    }
+  }, []);
+
+  // Collapsed state
+  if (!sidebarOpen) {
+    return (
+      <div
+        className={cn(
+          'shrink-0 border-t border-border/40',
+          'bg-gradient-to-t from-background/10 via-sidebar/50 to-transparent'
+        )}
+      >
+        <div className="flex flex-col items-center py-2 px-2 gap-1">
+          {/* Running Agents */}
+          {!hideRunningAgents && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => navigate({ to: '/running-agents' })}
+                  className={cn(
+                    'relative flex items-center justify-center w-10 h-10 rounded-xl',
+                    'transition-all duration-200 ease-out titlebar-no-drag',
+                    isActiveRoute('running-agents')
+                      ? [
+                          'bg-gradient-to-r from-brand-500/20 via-brand-500/15 to-brand-600/10',
+                          'text-foreground border border-brand-500/30',
+                          'shadow-md shadow-brand-500/10',
+                        ]
+                      : [
+                          'text-muted-foreground hover:text-foreground',
+                          'hover:bg-accent/50 border border-transparent hover:border-border/40',
+                        ]
+                  )}
+                  data-testid="running-agents-link"
+                >
+                  <Activity
+                    className={cn(
+                      'w-[18px] h-[18px]',
+                      isActiveRoute('running-agents') && 'text-brand-500'
+                    )}
+                  />
+                  {runningAgentsCount > 0 && (
+                    <span
+                      className={cn(
+                        'absolute -top-1 -right-1 flex items-center justify-center',
+                        'min-w-4 h-4 px-1 text-[9px] font-bold rounded-full',
+                        'bg-brand-500 text-white shadow-sm'
+                      )}
+                    >
+                      {runningAgentsCount > 99 ? '99' : runningAgentsCount}
+                    </span>
+                  )}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right" sideOffset={8}>
+                Running Agents
+                {runningAgentsCount > 0 && (
+                  <span className="ml-2 px-1.5 py-0.5 bg-brand-500 text-white rounded-full text-[10px]">
+                    {runningAgentsCount}
+                  </span>
+                )}
+              </TooltipContent>
+            </Tooltip>
+          )}
+
+          {/* Settings */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={() => navigate({ to: '/settings' })}
+                className={cn(
+                  'flex items-center justify-center w-10 h-10 rounded-xl',
+                  'transition-all duration-200 ease-out titlebar-no-drag',
+                  isActiveRoute('settings')
+                    ? [
+                        'bg-gradient-to-r from-brand-500/20 via-brand-500/15 to-brand-600/10',
+                        'text-foreground border border-brand-500/30',
+                        'shadow-md shadow-brand-500/10',
+                      ]
+                    : [
+                        'text-muted-foreground hover:text-foreground',
+                        'hover:bg-accent/50 border border-transparent hover:border-border/40',
+                      ]
+                )}
+                data-testid="settings-button"
+              >
+                <Settings
+                  className={cn('w-[18px] h-[18px]', isActiveRoute('settings') && 'text-brand-500')}
+                />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right" sideOffset={8}>
+              Global Settings
+              <span className="ml-2 px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
+                {formatShortcut(shortcuts.settings, true)}
+              </span>
+            </TooltipContent>
+          </Tooltip>
+
+          {/* Documentation */}
+          {!hideWiki && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={handleWikiClick}
+                  className={cn(
+                    'flex items-center justify-center w-10 h-10 rounded-xl',
+                    'text-muted-foreground hover:text-foreground',
+                    'hover:bg-accent/50 border border-transparent hover:border-border/40',
+                    'transition-all duration-200 ease-out titlebar-no-drag'
+                  )}
+                  data-testid="documentation-button"
+                >
+                  <BookOpen className="w-[18px] h-[18px]" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right" sideOffset={8}>
+                Documentation
+              </TooltipContent>
+            </Tooltip>
+          )}
+
+          {/* Feedback */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={handleFeedbackClick}
+                className={cn(
+                  'flex items-center justify-center w-10 h-10 rounded-xl',
+                  'text-muted-foreground hover:text-foreground',
+                  'hover:bg-accent/50 border border-transparent hover:border-border/40',
+                  'transition-all duration-200 ease-out titlebar-no-drag'
+                )}
+                data-testid="feedback-button"
+              >
+                <MessageSquare className="w-[18px] h-[18px]" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right" sideOffset={8}>
+              Feedback
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+    );
+  }
+
+  // Expanded state
+  return (
+    <div
+      className={cn(
+        'shrink-0',
+        // Top border with gradient fade
+        'border-t border-border/40',
+        // Elevated background for visual separation
+        'bg-gradient-to-t from-background/10 via-sidebar/50 to-transparent'
+      )}
+    >
+      {/* Running Agents Link */}
+      {!hideRunningAgents && (
+        <div className="px-3 py-0.5">
+          <button
+            onClick={() => navigate({ to: '/running-agents' })}
+            className={cn(
+              'group flex items-center w-full px-3 py-2 rounded-lg relative overflow-hidden titlebar-no-drag',
+              'transition-all duration-200 ease-out',
+              isActiveRoute('running-agents')
+                ? [
+                    'bg-gradient-to-r from-brand-500/20 via-brand-500/15 to-brand-600/10',
+                    'text-foreground font-medium',
+                    'border border-brand-500/30',
+                    'shadow-sm shadow-brand-500/10',
+                  ]
+                : [
+                    'text-muted-foreground hover:text-foreground',
+                    'hover:bg-accent/50',
+                    'border border-transparent hover:border-border/40',
+                  ]
+            )}
+            data-testid="running-agents-link"
+          >
+            <Activity
+              className={cn(
+                'w-[18px] h-[18px] shrink-0 transition-all duration-200',
+                isActiveRoute('running-agents')
+                  ? 'text-brand-500 drop-shadow-sm'
+                  : 'group-hover:text-brand-400'
+              )}
+            />
+            <span className="ml-3 text-sm flex-1 text-left">Running Agents</span>
+            {runningAgentsCount > 0 && (
+              <span
+                className={cn(
+                  'flex items-center justify-center',
+                  'min-w-5 h-5 px-1.5 text-[10px] font-bold rounded-full',
+                  'bg-brand-500 text-white shadow-sm',
+                  isActiveRoute('running-agents') && 'bg-brand-600'
+                )}
+                data-testid="running-agents-count"
+              >
+                {runningAgentsCount > 99 ? '99' : runningAgentsCount}
+              </span>
+            )}
+          </button>
+        </div>
+      )}
+
+      {/* Settings Link */}
+      <div className="px-3 py-0.5">
+        <button
+          onClick={() => navigate({ to: '/settings' })}
+          className={cn(
+            'group flex items-center w-full px-3 py-2 rounded-lg relative overflow-hidden titlebar-no-drag',
+            'transition-all duration-200 ease-out',
+            isActiveRoute('settings')
+              ? [
+                  'bg-gradient-to-r from-brand-500/20 via-brand-500/15 to-brand-600/10',
+                  'text-foreground font-medium',
+                  'border border-brand-500/30',
+                  'shadow-sm shadow-brand-500/10',
+                ]
+              : [
+                  'text-muted-foreground hover:text-foreground',
+                  'hover:bg-accent/50',
+                  'border border-transparent hover:border-border/40',
+                ]
+          )}
+          data-testid="settings-button"
+        >
+          <Settings
+            className={cn(
+              'w-[18px] h-[18px] shrink-0 transition-all duration-200',
+              isActiveRoute('settings')
+                ? 'text-brand-500 drop-shadow-sm'
+                : 'group-hover:text-brand-400'
+            )}
+          />
+          <span className="ml-3 text-sm flex-1 text-left">Settings</span>
+          <span
+            className={cn(
+              'flex items-center justify-center min-w-5 h-5 px-1.5 text-[10px] font-mono rounded transition-all duration-200',
+              isActiveRoute('settings')
+                ? 'bg-brand-500/20 text-brand-400'
+                : 'bg-muted text-muted-foreground group-hover:bg-accent'
+            )}
+            data-testid="shortcut-settings"
+          >
+            {formatShortcut(shortcuts.settings, true)}
+          </span>
+        </button>
+      </div>
+
+      {/* Separator */}
+      <div className="h-px bg-border/40 mx-3 my-2" />
+
+      {/* Documentation Link */}
+      {!hideWiki && (
+        <div className="px-3 py-0.5">
+          <button
+            onClick={handleWikiClick}
+            className={cn(
+              'group flex items-center w-full px-3 py-1.5 rounded-md titlebar-no-drag',
+              'text-muted-foreground/70 hover:text-foreground',
+              'hover:bg-accent/30',
+              'transition-all duration-200 ease-out'
+            )}
+            data-testid="documentation-button"
+          >
+            <BookOpen className="w-4 h-4 shrink-0" />
+            <span className="ml-2.5 text-xs">Documentation</span>
+          </button>
+        </div>
+      )}
+
+      {/* Feedback Link */}
+      <div className="px-3 pt-0.5">
+        <button
+          onClick={handleFeedbackClick}
+          className={cn(
+            'group flex items-center w-full px-3 py-1.5 rounded-md titlebar-no-drag',
+            'text-muted-foreground/70 hover:text-foreground',
+            'hover:bg-accent/30',
+            'transition-all duration-200 ease-out'
+          )}
+          data-testid="feedback-button"
+        >
+          <MessageSquare className="w-4 h-4 shrink-0" />
+          <span className="ml-2.5 text-xs">Feedback</span>
+          <ExternalLink className="w-3 h-3 ml-auto text-muted-foreground/50" />
+        </button>
+      </div>
+
+      {/* Version */}
+      <div className="px-6 py-1.5 text-center">
+        <span className="text-[9px] text-muted-foreground/40">
+          v{appVersion} {versionSuffix}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx b/temp_repo/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..514265f65abad7aa1922852ad5bb63be5c0a06a6
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx
@@ -0,0 +1,457 @@
+import { useState, useCallback, startTransition } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { ChevronsUpDown, Folder, Plus, FolderOpen, LogOut } from 'lucide-react';
+import * as LucideIcons from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+import { cn, isMac } from '@/lib/utils';
+import { formatShortcut } from '@/store/app-store';
+import { isElectron, type Project } from '@/lib/electron';
+import { initializeProject } from '@/lib/project-init';
+import { MACOS_ELECTRON_TOP_PADDING_CLASS } from '../constants';
+import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
+import { useAppStore } from '@/store/app-store';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+interface SidebarHeaderProps {
+  sidebarOpen: boolean;
+  currentProject: Project | null;
+  onNewProject: () => void;
+  onOpenFolder: () => void;
+  onProjectContextMenu: (project: Project, event: React.MouseEvent) => void;
+  setShowRemoveFromAutomakerDialog: (show: boolean) => void;
+}
+
+export function SidebarHeader({
+  sidebarOpen,
+  currentProject,
+  onNewProject,
+  onOpenFolder,
+  onProjectContextMenu,
+  setShowRemoveFromAutomakerDialog,
+}: SidebarHeaderProps) {
+  const navigate = useNavigate();
+  const projects = useAppStore((s) => s.projects);
+  const setCurrentProject = useAppStore((s) => s.setCurrentProject);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const handleLogoClick = useCallback(() => {
+    navigate({ to: '/overview' });
+  }, [navigate]);
+
+  const handleProjectSelect = useCallback(
+    async (project: Project) => {
+      if (project.id === currentProject?.id) {
+        setDropdownOpen(false);
+        navigate({ to: '/board' });
+        return;
+      }
+      try {
+        // Ensure .automaker directory structure exists before switching
+        await initializeProject(project.path);
+      } catch (error) {
+        console.error('Failed to initialize project during switch:', error);
+        // Continue with switch even if initialization fails -
+        // the project may already be initialized
+      }
+
+      // Batch project switch + navigation to prevent multi-render cascades.
+      startTransition(() => {
+        setCurrentProject(project);
+        setDropdownOpen(false);
+        navigate({ to: '/board' });
+      });
+    },
+    [currentProject?.id, setCurrentProject, navigate]
+  );
+
+  const getIconComponent = (project: Project): LucideIcon => {
+    if (project.icon && project.icon in LucideIcons) {
+      return (LucideIcons as unknown as Record<string, LucideIcon>)[project.icon];
+    }
+    return Folder;
+  };
+
+  const renderProjectIcon = (project: Project, size: 'sm' | 'md' = 'md') => {
+    const IconComponent = getIconComponent(project);
+    const sizeClasses = size === 'sm' ? 'w-6 h-6' : 'w-8 h-8';
+    const iconSizeClasses = size === 'sm' ? 'w-4 h-4' : 'w-5 h-5';
+
+    if (project.customIconPath) {
+      return (
+        <img
+          src={getAuthenticatedImageUrl(project.customIconPath, project.path)}
+          alt={project.name}
+          className={cn(sizeClasses, 'rounded-lg object-cover ring-1 ring-border/50')}
+        />
+      );
+    }
+
+    return (
+      <div
+        className={cn(
+          sizeClasses,
+          'rounded-lg bg-brand-500/10 border border-brand-500/20 flex items-center justify-center'
+        )}
+      >
+        <IconComponent className={cn(iconSizeClasses, 'text-brand-500')} />
+      </div>
+    );
+  };
+
+  // Collapsed state - show logo only
+  if (!sidebarOpen) {
+    return (
+      <div
+        className={cn(
+          'shrink-0 flex flex-col items-center relative px-2 pt-3 pb-2',
+          isMac && isElectron() && MACOS_ELECTRON_TOP_PADDING_CLASS
+        )}
+      >
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              onClick={handleLogoClick}
+              className="group flex flex-col items-center"
+              data-testid="logo-button"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 256 256"
+                role="img"
+                aria-label="Automaker Logo"
+                className="size-8 group-hover:rotate-12 transition-transform duration-300 ease-out"
+              >
+                <defs>
+                  <linearGradient
+                    id="bg-collapsed"
+                    x1="0"
+                    y1="0"
+                    x2="256"
+                    y2="256"
+                    gradientUnits="userSpaceOnUse"
+                  >
+                    <stop offset="0%" style={{ stopColor: 'var(--brand-400)' }} />
+                    <stop offset="100%" style={{ stopColor: 'var(--brand-600)' }} />
+                  </linearGradient>
+                </defs>
+                <rect x="16" y="16" width="224" height="224" rx="56" fill="url(#bg-collapsed)" />
+                <g
+                  fill="none"
+                  stroke="#FFFFFF"
+                  strokeWidth="20"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M92 92 L52 128 L92 164" />
+                  <path d="M144 72 L116 184" />
+                  <path d="M164 92 L204 128 L164 164" />
+                </g>
+              </svg>
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="right" sideOffset={8}>
+            Go to Dashboard
+          </TooltipContent>
+        </Tooltip>
+
+        {/* Collapsed project icon with dropdown */}
+        {currentProject && (
+          <>
+            <div className="w-full h-px bg-border/40 my-2" />
+            <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      onContextMenu={(e) => onProjectContextMenu(currentProject, e)}
+                      className="p-1 rounded-lg hover:bg-accent/50 transition-colors"
+                      data-testid="collapsed-project-button"
+                    >
+                      {renderProjectIcon(currentProject)}
+                    </button>
+                  </DropdownMenuTrigger>
+                </TooltipTrigger>
+                <TooltipContent side="right" sideOffset={8}>
+                  {currentProject.name}
+                </TooltipContent>
+              </Tooltip>
+              <DropdownMenuContent
+                align="start"
+                side="right"
+                sideOffset={8}
+                className="w-64"
+                data-testid="collapsed-project-dropdown-content"
+              >
+                <div className="px-2 py-1.5">
+                  <span className="text-xs font-medium text-muted-foreground">Projects</span>
+                </div>
+                {projects.map((project, index) => {
+                  const isActive = currentProject?.id === project.id;
+                  const hotkeyLabel = index < 9 ? `${index + 1}` : index === 9 ? '0' : undefined;
+
+                  return (
+                    <DropdownMenuItem
+                      key={project.id}
+                      onClick={() => handleProjectSelect(project)}
+                      onContextMenu={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setDropdownOpen(false);
+                        onProjectContextMenu(project, e);
+                      }}
+                      className="flex items-center gap-3 cursor-pointer"
+                      data-testid={`collapsed-project-item-${project.id}`}
+                    >
+                      {renderProjectIcon(project, 'sm')}
+                      <span
+                        className={cn(
+                          'flex-1 truncate',
+                          isActive && 'font-semibold text-foreground'
+                        )}
+                      >
+                        {project.name}
+                      </span>
+                      {hotkeyLabel && (
+                        <span className="text-xs text-muted-foreground">
+                          {formatShortcut(`Cmd+${hotkeyLabel}`, true)}
+                        </span>
+                      )}
+                    </DropdownMenuItem>
+                  );
+                })}
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={() => {
+                    setDropdownOpen(false);
+                    onNewProject();
+                  }}
+                  className="cursor-pointer"
+                  data-testid="collapsed-new-project-dropdown-item"
+                >
+                  <Plus className="w-4 h-4 mr-2" />
+                  <span>New Project</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => {
+                    setDropdownOpen(false);
+                    onOpenFolder();
+                  }}
+                  className="cursor-pointer"
+                  data-testid="collapsed-open-project-dropdown-item"
+                >
+                  <FolderOpen className="w-4 h-4 mr-2" />
+                  <span>Open Project</span>
+                </DropdownMenuItem>
+                {currentProject && (
+                  <>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem
+                      onClick={() => {
+                        setDropdownOpen(false);
+                        setShowRemoveFromAutomakerDialog(true);
+                      }}
+                      className="cursor-pointer text-muted-foreground focus:text-foreground"
+                      data-testid="collapsed-remove-from-automaker-dropdown-item"
+                    >
+                      <LogOut className="w-4 h-4 mr-2" />
+                      <span>Remove from Automaker</span>
+                    </DropdownMenuItem>
+                  </>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </>
+        )}
+      </div>
+    );
+  }
+
+  // Expanded state - show logo + project dropdown
+  return (
+    <div
+      className={cn(
+        'shrink-0 flex flex-col relative px-3 pt-3 pb-2',
+        isMac && isElectron() && MACOS_ELECTRON_TOP_PADDING_CLASS
+      )}
+    >
+      {/* Header with logo and project dropdown */}
+      <div className="flex items-center gap-3">
+        {/* Logo */}
+        <button
+          onClick={handleLogoClick}
+          className="group flex items-center shrink-0 titlebar-no-drag"
+          title="Go to Dashboard"
+          data-testid="logo-button"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 256 256"
+            role="img"
+            aria-label="Automaker Logo"
+            className="h-8 w-8 group-hover:rotate-12 transition-transform duration-300 ease-out"
+          >
+            <defs>
+              <linearGradient
+                id="bg-header"
+                x1="0"
+                y1="0"
+                x2="256"
+                y2="256"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop offset="0%" style={{ stopColor: 'var(--brand-400)' }} />
+                <stop offset="100%" style={{ stopColor: 'var(--brand-600)' }} />
+              </linearGradient>
+            </defs>
+            <rect x="16" y="16" width="224" height="224" rx="56" fill="url(#bg-header)" />
+            <g
+              fill="none"
+              stroke="#FFFFFF"
+              strokeWidth="20"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M92 92 L52 128 L92 164" />
+              <path d="M144 72 L116 184" />
+              <path d="M164 92 L204 128 L164 164" />
+            </g>
+          </svg>
+        </button>
+
+        {/* Project Dropdown */}
+        {currentProject ? (
+          <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+            <DropdownMenuTrigger asChild>
+              <button
+                className={cn(
+                  'flex-1 flex items-center gap-2 px-2 py-1.5 rounded-lg min-w-0',
+                  'hover:bg-accent/50 transition-colors titlebar-no-drag',
+                  'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1'
+                )}
+                onContextMenu={(e) => onProjectContextMenu(currentProject, e)}
+                data-testid="project-dropdown-trigger"
+              >
+                {renderProjectIcon(currentProject, 'sm')}
+                <span className="flex-1 text-sm font-semibold text-foreground truncate text-left">
+                  {currentProject.name}
+                </span>
+                <ChevronsUpDown className="w-4 h-4 text-muted-foreground shrink-0" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="start"
+              side="bottom"
+              sideOffset={8}
+              className="w-64"
+              data-testid="project-dropdown-content"
+            >
+              <div className="px-2 py-1.5">
+                <span className="text-xs font-medium text-muted-foreground">Projects</span>
+              </div>
+              {projects.map((project, index) => {
+                const isActive = currentProject?.id === project.id;
+                const hotkeyLabel = index < 9 ? `${index + 1}` : index === 9 ? '0' : undefined;
+
+                return (
+                  <DropdownMenuItem
+                    key={project.id}
+                    onClick={() => handleProjectSelect(project)}
+                    onContextMenu={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setDropdownOpen(false);
+                      onProjectContextMenu(project, e);
+                    }}
+                    className="flex items-center gap-3 cursor-pointer"
+                    data-testid={`project-item-${project.id}`}
+                  >
+                    {renderProjectIcon(project, 'sm')}
+                    <span
+                      className={cn('flex-1 truncate', isActive && 'font-semibold text-foreground')}
+                    >
+                      {project.name}
+                    </span>
+                    {hotkeyLabel && (
+                      <span className="text-xs text-muted-foreground">
+                        {formatShortcut(`Cmd+${hotkeyLabel}`, true)}
+                      </span>
+                    )}
+                  </DropdownMenuItem>
+                );
+              })}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={() => {
+                  setDropdownOpen(false);
+                  onNewProject();
+                }}
+                className="cursor-pointer"
+                data-testid="new-project-dropdown-item"
+              >
+                <Plus className="w-4 h-4 mr-2" />
+                <span>New Project</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => {
+                  setDropdownOpen(false);
+                  onOpenFolder();
+                }}
+                className="cursor-pointer"
+                data-testid="open-project-dropdown-item"
+              >
+                <FolderOpen className="w-4 h-4 mr-2" />
+                <span>Open Project</span>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={() => {
+                  setDropdownOpen(false);
+                  setShowRemoveFromAutomakerDialog(true);
+                }}
+                className="cursor-pointer text-muted-foreground focus:text-foreground"
+                data-testid="remove-from-automaker-dropdown-item"
+              >
+                <LogOut className="w-4 h-4 mr-2" />
+                <span>Remove from Automaker</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : (
+          <div className="flex-1 flex items-center gap-2">
+            <button
+              onClick={onNewProject}
+              className={cn(
+                'flex items-center gap-2 px-3 py-1.5 rounded-lg',
+                'text-sm text-muted-foreground hover:text-foreground',
+                'hover:bg-accent/50 transition-colors titlebar-no-drag'
+              )}
+              data-testid="new-project-button"
+            >
+              <Plus className="w-4 h-4" />
+              <span>New Project</span>
+            </button>
+            <button
+              onClick={onOpenFolder}
+              className={cn(
+                'flex items-center gap-2 px-3 py-1.5 rounded-lg',
+                'text-sm text-muted-foreground hover:text-foreground',
+                'hover:bg-accent/50 transition-colors titlebar-no-drag'
+              )}
+              data-testid="open-project-button"
+            >
+              <FolderOpen className="w-4 h-4" />
+              <span>Open</span>
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx b/temp_repo/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2380cc5928c7823887dc56957a1c312649d36964
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx
@@ -0,0 +1,397 @@
+import { useCallback, useEffect, useRef } from 'react';
+import type { NavigateOptions } from '@tanstack/react-router';
+import { ChevronDown, Wrench, Github, Folder } from 'lucide-react';
+import * as LucideIcons from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+import { cn, isMac } from '@/lib/utils';
+import { isElectron } from '@/lib/electron';
+import { MACOS_ELECTRON_TOP_PADDING_CLASS } from '../constants';
+import { formatShortcut, useAppStore } from '@/store/app-store';
+import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
+import type { NavSection } from '../types';
+import type { Project } from '@/lib/electron';
+import type { SidebarStyle } from '@automaker/types';
+import { Spinner } from '@/components/ui/spinner';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+// Map section labels to icons
+const sectionIcons: Record<string, React.ComponentType<{ className?: string }>> = {
+  Tools: Wrench,
+  GitHub: Github,
+};
+
+interface SidebarNavigationProps {
+  currentProject: Project | null;
+  sidebarOpen: boolean;
+  sidebarStyle: SidebarStyle;
+  navSections: NavSection[];
+  isActiveRoute: (id: string) => boolean;
+  navigate: (opts: NavigateOptions) => void;
+  onScrollStateChange?: (canScrollDown: boolean) => void;
+}
+
+export function SidebarNavigation({
+  currentProject,
+  sidebarOpen,
+  sidebarStyle,
+  navSections,
+  isActiveRoute,
+  navigate,
+  onScrollStateChange,
+}: SidebarNavigationProps) {
+  const navRef = useRef<HTMLElement>(null);
+
+  // Get collapsed state from store (persisted across restarts)
+  const { collapsedNavSections, setCollapsedNavSections, toggleNavSection } = useAppStore();
+
+  // Initialize collapsed state when sections change (e.g., GitHub section appears)
+  // Only set defaults for sections that don't have a persisted state
+  useEffect(() => {
+    let hasNewSections = false;
+    const updated = { ...collapsedNavSections };
+
+    navSections.forEach((section) => {
+      if (section.collapsible && section.label && !(section.label in updated)) {
+        updated[section.label] = section.defaultCollapsed ?? false;
+        hasNewSections = true;
+      }
+    });
+
+    if (hasNewSections) {
+      setCollapsedNavSections(updated);
+    }
+  }, [navSections, collapsedNavSections, setCollapsedNavSections]);
+
+  // Check scroll state
+  const checkScrollState = useCallback(() => {
+    if (!navRef.current || !onScrollStateChange) return;
+    const { scrollTop, scrollHeight, clientHeight } = navRef.current;
+    const canScrollDown = scrollTop + clientHeight < scrollHeight - 10;
+    onScrollStateChange(canScrollDown);
+  }, [onScrollStateChange]);
+
+  // Monitor scroll state
+  useEffect(() => {
+    checkScrollState();
+    const nav = navRef.current;
+    if (!nav) return;
+
+    nav.addEventListener('scroll', checkScrollState);
+    const resizeObserver = new ResizeObserver(checkScrollState);
+    resizeObserver.observe(nav);
+
+    return () => {
+      nav.removeEventListener('scroll', checkScrollState);
+      resizeObserver.disconnect();
+    };
+  }, [checkScrollState, collapsedNavSections]);
+
+  // Filter sections: always show non-project sections, only show project sections when project exists
+  const visibleSections = navSections.filter((section) => {
+    // Always show Dashboard (first section with no label)
+    if (!section.label && section.items.some((item) => item.id === 'overview')) {
+      return true;
+    }
+    // Show other sections only when project is selected
+    return !!currentProject;
+  });
+
+  // Get the icon component for the current project
+  const getProjectIcon = (): LucideIcon => {
+    if (currentProject?.icon && currentProject.icon in LucideIcons) {
+      return (LucideIcons as unknown as Record<string, LucideIcon>)[currentProject.icon];
+    }
+    return Folder;
+  };
+
+  const ProjectIcon = getProjectIcon();
+  const hasCustomIcon = !!currentProject?.customIconPath;
+
+  return (
+    <nav
+      ref={navRef}
+      className={cn(
+        'flex-1 overflow-y-auto scrollbar-hide px-3 pb-2',
+        // Add top padding in discord mode since there's no header
+        // Extra padding for macOS Electron to avoid traffic light overlap
+        sidebarStyle === 'discord'
+          ? isMac && isElectron()
+            ? MACOS_ELECTRON_TOP_PADDING_CLASS
+            : 'pt-3'
+          : 'mt-1'
+      )}
+    >
+      {/* Project name display for classic/discord mode */}
+      {sidebarStyle === 'discord' && currentProject && sidebarOpen && (
+        <div className="mb-3">
+          <div className="flex items-center gap-2.5 px-3 py-2">
+            {hasCustomIcon ? (
+              <img
+                src={getAuthenticatedImageUrl(currentProject.customIconPath!, currentProject.path)}
+                alt={currentProject.name}
+                className="w-5 h-5 rounded object-cover"
+              />
+            ) : (
+              <ProjectIcon className="w-5 h-5 text-brand-500 shrink-0" />
+            )}
+            <span className="text-sm font-medium text-foreground truncate">
+              {currentProject.name}
+            </span>
+          </div>
+          <div className="h-px bg-border/40 mx-1 mt-1" />
+        </div>
+      )}
+
+      {/* Navigation sections */}
+      {visibleSections.map((section, sectionIdx) => {
+        const isCollapsed = section.label ? collapsedNavSections[section.label] : false;
+        const isCollapsible = section.collapsible && section.label && sidebarOpen;
+
+        const SectionIcon = section.label ? sectionIcons[section.label] : null;
+
+        return (
+          <div key={sectionIdx} className={sectionIdx > 0 && sidebarOpen ? 'mt-4' : ''}>
+            {/* Section Label - clickable if collapsible (expanded sidebar) */}
+            {section.label && sidebarOpen && (
+              <button
+                onClick={() => isCollapsible && toggleNavSection(section.label!)}
+                className={cn(
+                  'group flex items-center w-full px-3 py-1.5 mb-1 rounded-md',
+                  'transition-all duration-200 ease-out',
+                  isCollapsible
+                    ? [
+                        'cursor-pointer',
+                        'hover:bg-accent/50 hover:text-foreground',
+                        'border border-transparent hover:border-border/40',
+                      ]
+                    : 'cursor-default'
+                )}
+                disabled={!isCollapsible}
+              >
+                <span
+                  className={cn(
+                    'text-[10px] font-semibold uppercase tracking-widest transition-colors duration-200',
+                    isCollapsible
+                      ? 'text-muted-foreground/70 group-hover:text-foreground'
+                      : 'text-muted-foreground/70'
+                  )}
+                >
+                  {section.label}
+                </span>
+                {isCollapsible && (
+                  <ChevronDown
+                    className={cn(
+                      'w-3 h-3 ml-auto transition-all duration-200',
+                      isCollapsed
+                        ? '-rotate-90 text-muted-foreground/50 group-hover:text-muted-foreground'
+                        : 'text-muted-foreground/50 group-hover:text-muted-foreground'
+                    )}
+                  />
+                )}
+              </button>
+            )}
+
+            {/* Section icon with dropdown (collapsed sidebar) */}
+            {section.label && !sidebarOpen && SectionIcon && section.collapsible && isCollapsed && (
+              <DropdownMenu>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        className={cn(
+                          'group flex items-center justify-center w-full py-2 rounded-lg',
+                          'text-muted-foreground hover:text-foreground',
+                          'hover:bg-accent/50 border border-transparent hover:border-border/40',
+                          'transition-all duration-200 ease-out'
+                        )}
+                      >
+                        <SectionIcon className="w-[18px] h-[18px]" />
+                      </button>
+                    </DropdownMenuTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent side="right" sideOffset={8}>
+                    {section.label}
+                  </TooltipContent>
+                </Tooltip>
+                <DropdownMenuContent side="right" align="start" sideOffset={8} className="w-48">
+                  {section.items.map((item) => {
+                    const ItemIcon = item.icon;
+                    return (
+                      <DropdownMenuItem
+                        key={item.id}
+                        onClick={() => navigate({ to: `/${item.id}` as unknown as '/' })}
+                        className="flex items-center gap-2 cursor-pointer"
+                      >
+                        <ItemIcon className="w-4 h-4" />
+                        <span>{item.label}</span>
+                        {item.shortcut && (
+                          <span className="ml-auto text-[10px] font-mono text-muted-foreground">
+                            {formatShortcut(item.shortcut, true)}
+                          </span>
+                        )}
+                      </DropdownMenuItem>
+                    );
+                  })}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+
+            {/* Separator for sections without label (visual separation) */}
+            {!section.label && sectionIdx > 0 && sidebarOpen && (
+              <div className="h-px bg-border/40 mx-3 mb-3"></div>
+            )}
+            {(section.label || sectionIdx > 0) && !sidebarOpen && (
+              <div className="h-px bg-border/30 mx-2 my-1.5"></div>
+            )}
+
+            {/* Nav Items - show when section is expanded, or when sidebar is collapsed and section doesn't use dropdown */}
+            {!isCollapsed && (
+              <div className="space-y-1">
+                {section.items.map((item) => {
+                  const isActive = isActiveRoute(item.id);
+                  const Icon = item.icon;
+
+                  return (
+                    <button
+                      key={item.id}
+                      onClick={() => {
+                        // Cast to the router's path type; item.id is constrained to known routes
+                        navigate({ to: `/${item.id}` as unknown as '/' });
+                      }}
+                      className={cn(
+                        'group flex items-center w-full px-3 py-2 rounded-lg relative overflow-hidden titlebar-no-drag',
+                        'transition-all duration-200 ease-out',
+                        isActive
+                          ? [
+                              // Active: Premium gradient with glow
+                              'bg-gradient-to-r from-brand-500/20 via-brand-500/15 to-brand-600/10',
+                              'text-foreground font-medium',
+                              'border border-brand-500/30',
+                              'shadow-sm shadow-brand-500/10',
+                            ]
+                          : [
+                              // Inactive: Subtle hover state
+                              'text-muted-foreground hover:text-foreground',
+                              'hover:bg-accent/50',
+                              'border border-transparent hover:border-border/40',
+                            ],
+                        sidebarOpen ? 'justify-start' : 'justify-center'
+                      )}
+                      title={!sidebarOpen ? item.label : undefined}
+                      data-testid={`nav-${item.id}`}
+                    >
+                      <div className="relative">
+                        {item.isLoading ? (
+                          <Spinner
+                            size="sm"
+                            className={cn(
+                              'shrink-0',
+                              isActive ? 'text-brand-500' : 'text-muted-foreground'
+                            )}
+                          />
+                        ) : (
+                          <Icon
+                            className={cn(
+                              'w-[18px] h-[18px] shrink-0 transition-all duration-200',
+                              isActive
+                                ? 'text-brand-500 drop-shadow-sm'
+                                : 'group-hover:text-brand-400'
+                            )}
+                          />
+                        )}
+                        {/* Count badge for collapsed state */}
+                        {!sidebarOpen && item.count !== undefined && item.count > 0 && (
+                          <span
+                            className={cn(
+                              'absolute -top-1.5 -right-1.5 flex items-center justify-center',
+                              'min-w-4 h-4 px-0.5 text-[9px] font-bold rounded-full',
+                              'bg-primary text-primary-foreground shadow-sm',
+                              'animate-in fade-in zoom-in duration-200'
+                            )}
+                          >
+                            {item.count > 99 ? '99' : item.count}
+                          </span>
+                        )}
+                      </div>
+                      <span
+                        className={cn(
+                          'ml-3 text-sm flex-1 text-left',
+                          sidebarOpen ? 'block' : 'hidden'
+                        )}
+                      >
+                        {item.label}
+                      </span>
+                      {/* Count badge */}
+                      {item.count !== undefined && item.count > 0 && sidebarOpen && (
+                        <span
+                          className={cn(
+                            'flex items-center justify-center',
+                            'min-w-5 h-5 px-1.5 text-[10px] font-bold rounded-full',
+                            'bg-primary text-primary-foreground shadow-sm',
+                            'animate-in fade-in zoom-in duration-200'
+                          )}
+                          data-testid={`count-${item.id}`}
+                        >
+                          {item.count > 99 ? '99+' : item.count}
+                        </span>
+                      )}
+                      {item.shortcut && sidebarOpen && !item.count && (
+                        <span
+                          className={cn(
+                            'flex items-center justify-center min-w-5 h-5 px-1.5 text-[10px] font-mono rounded transition-all duration-200',
+                            isActive
+                              ? 'bg-brand-500/20 text-brand-400'
+                              : 'bg-muted text-muted-foreground group-hover:bg-accent'
+                          )}
+                          data-testid={`shortcut-${item.id}`}
+                        >
+                          {formatShortcut(item.shortcut, true)}
+                        </span>
+                      )}
+                      {/* Tooltip for collapsed state */}
+                      {!sidebarOpen && (
+                        <span
+                          className={cn(
+                            'absolute left-full ml-3 px-2.5 py-1.5 rounded-md',
+                            'bg-popover text-popover-foreground text-sm',
+                            'border border-border shadow-lg',
+                            'opacity-0 group-hover:opacity-100',
+                            'transition-all duration-200 whitespace-nowrap z-50',
+                            'translate-x-1 group-hover:translate-x-0'
+                          )}
+                          data-testid={`sidebar-tooltip-${item.label.toLowerCase()}`}
+                        >
+                          {item.label}
+                          {item.shortcut && (
+                            <span className="ml-2 px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono text-muted-foreground">
+                              {formatShortcut(item.shortcut, true)}
+                            </span>
+                          )}
+                        </span>
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        );
+      })}
+
+      {/* Placeholder when no project is selected */}
+      {!currentProject && sidebarOpen && (
+        <div className="flex items-center justify-center px-4 py-8">
+          <p className="text-muted-foreground text-xs text-center">
+            Select or create a project to continue
+          </p>
+        </div>
+      )}
+    </nav>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/components/sortable-project-item.tsx b/temp_repo/apps/ui/src/components/layout/sidebar/components/sortable-project-item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d217bf9a5e0a733e7bdc92ceec94a223ddf0c583
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/components/sortable-project-item.tsx
@@ -0,0 +1,60 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Folder, Check, GripVertical } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { SortableProjectItemProps } from '../types';
+
+export function SortableProjectItem({
+  project,
+  currentProjectId,
+  isHighlighted,
+  onSelect,
+}: SortableProjectItemProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: project.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'flex items-center gap-2 px-2.5 py-2 rounded-lg cursor-pointer transition-all duration-200',
+        'text-muted-foreground hover:text-foreground hover:bg-accent/80',
+        isDragging && 'bg-accent shadow-lg scale-[1.02]',
+        isHighlighted && 'bg-brand-500/10 text-foreground ring-1 ring-brand-500/20'
+      )}
+      data-testid={`project-option-${project.id}`}
+      onClick={() => onSelect(project)}
+    >
+      {/* Drag Handle */}
+      <button
+        {...attributes}
+        {...listeners}
+        className="p-0.5 rounded-md hover:bg-accent/50 cursor-grab active:cursor-grabbing transition-colors"
+        data-testid={`project-drag-handle-${project.id}`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <GripVertical className="h-3.5 w-3.5 text-muted-foreground/60" />
+      </button>
+
+      {/* Project content */}
+      <div className="flex items-center gap-2.5 flex-1 min-w-0">
+        <Folder
+          className={cn(
+            'h-4 w-4 shrink-0',
+            currentProjectId === project.id ? 'text-brand-500' : 'text-muted-foreground'
+          )}
+        />
+        <span className="flex-1 truncate text-sm font-medium">{project.name}</span>
+        {currentProjectId === project.id && <Check className="h-4 w-4 text-brand-500 shrink-0" />}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/components/theme-menu-item.tsx b/temp_repo/apps/ui/src/components/layout/sidebar/components/theme-menu-item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e213c5261e37a88c8918ca32db8eb8ac0bfbce9d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/components/theme-menu-item.tsx
@@ -0,0 +1,23 @@
+import { memo } from 'react';
+import { DropdownMenuRadioItem } from '@/components/ui/dropdown-menu';
+import type { ThemeMenuItemProps } from '../types';
+
+export const ThemeMenuItem = memo(function ThemeMenuItem({
+  option,
+  onPreviewEnter,
+  onPreviewLeave,
+}: ThemeMenuItemProps) {
+  const Icon = option.icon;
+  return (
+    <DropdownMenuRadioItem
+      value={option.value}
+      data-testid={`project-theme-${option.value}`}
+      className="text-xs py-1.5"
+      onPointerEnter={() => onPreviewEnter(option.value)}
+      onPointerLeave={onPreviewLeave}
+    >
+      <Icon className="w-3.5 h-3.5 mr-1.5" style={{ color: option.color }} />
+      <span>{option.label}</span>
+    </DropdownMenuRadioItem>
+  );
+});
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/constants.ts b/temp_repo/apps/ui/src/components/layout/sidebar/constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9ab38cffd965e48c85ccfabeed85a53bd4227222
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/constants.ts
@@ -0,0 +1,60 @@
+import { darkThemes, lightThemes } from '@/config/theme-options';
+
+/**
+ * Tailwind class for top padding on macOS Electron to avoid overlapping with traffic light window controls.
+ * This padding is applied conditionally when running on macOS in Electron.
+ */
+export const MACOS_ELECTRON_TOP_PADDING_CLASS = 'pt-[38px]';
+
+/**
+ * Shared constants for theme submenu positioning and layout.
+ * Used across project-context-menu and project-selector-with-options components
+ * to ensure consistent viewport-aware positioning and styling.
+ */
+export const THEME_SUBMENU_CONSTANTS = {
+  /**
+   * Estimated total height of the theme submenu content in pixels.
+   * Includes all theme options, headers, padding, and "Use Global" button.
+   */
+  ESTIMATED_SUBMENU_HEIGHT: 620,
+
+  /**
+   * Padding from viewport edges to prevent submenu overflow.
+   * Applied to both top and bottom edges when calculating available space.
+   */
+  COLLISION_PADDING: 32,
+
+  /**
+   * Vertical offset from context menu top to the "Project Theme" button.
+   * Used for calculating submenu position relative to trigger button.
+   */
+  THEME_BUTTON_OFFSET: 50,
+
+  /**
+   * Height reserved for submenu header area (includes "Use Global" button and separator).
+   * Subtracted from maxHeight to get scrollable content area height.
+   */
+  SUBMENU_HEADER_HEIGHT: 80,
+} as const;
+
+export const PROJECT_DARK_THEMES = darkThemes.map((opt) => ({
+  value: opt.value,
+  label: opt.label,
+  icon: opt.Icon,
+  color: opt.color,
+}));
+
+export const PROJECT_LIGHT_THEMES = lightThemes.map((opt) => ({
+  value: opt.value,
+  label: opt.label,
+  icon: opt.Icon,
+  color: opt.color,
+}));
+
+export const SIDEBAR_FEATURE_FLAGS = {
+  hideTerminal: import.meta.env.VITE_HIDE_TERMINAL === 'true',
+  hideWiki: import.meta.env.VITE_HIDE_WIKI === 'true',
+  hideRunningAgents: import.meta.env.VITE_HIDE_RUNNING_AGENTS === 'true',
+  hideContext: import.meta.env.VITE_HIDE_CONTEXT === 'true',
+  hideSpecEditor: import.meta.env.VITE_HIDE_SPEC_EDITOR === 'true',
+} as const;
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/dialogs/index.ts b/temp_repo/apps/ui/src/components/layout/sidebar/dialogs/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b9235df538c2da512465b8b2cd8819683ad95a4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/dialogs/index.ts
@@ -0,0 +1,2 @@
+export { TrashDialog } from './trash-dialog';
+export { OnboardingDialog } from './onboarding-dialog';
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/dialogs/onboarding-dialog.tsx b/temp_repo/apps/ui/src/components/layout/sidebar/dialogs/onboarding-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7af6ea08b3040f089cad71e0901b660c797693c9
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/dialogs/onboarding-dialog.tsx
@@ -0,0 +1,135 @@
+import { useRef } from 'react';
+import { Rocket, CheckCircle2, Zap, FileText, Sparkles, ArrowRight } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+
+interface OnboardingDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  newProjectName: string;
+  onSkip: () => void;
+  onGenerateSpec: () => void;
+}
+
+export function OnboardingDialog({
+  open,
+  onOpenChange,
+  newProjectName,
+  onSkip,
+  onGenerateSpec,
+}: OnboardingDialogProps) {
+  // Track if we're closing because user clicked "Generate App Spec"
+  // to avoid incorrectly calling onSkip
+  const isGeneratingRef = useRef(false);
+
+  const handleGenerateSpec = () => {
+    isGeneratingRef.current = true;
+    onGenerateSpec();
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(isOpen) => {
+        if (!isOpen && !isGeneratingRef.current) {
+          // Only call onSkip when user dismisses dialog (escape, click outside, or skip button)
+          // NOT when they click "Generate App Spec"
+          onSkip();
+        }
+        isGeneratingRef.current = false;
+        onOpenChange(isOpen);
+      }}
+    >
+      <DialogContent className="max-w-2xl bg-popover/95 backdrop-blur-xl">
+        <DialogHeader>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="flex items-center justify-center w-12 h-12 rounded-full bg-brand-500/10 border border-brand-500/20 shrink-0">
+              <Rocket className="w-6 h-6 text-brand-500" />
+            </div>
+            <div className="min-w-0 flex-1">
+              <DialogTitle className="text-2xl truncate">Welcome to {newProjectName}!</DialogTitle>
+              <DialogDescription className="text-muted-foreground mt-1">
+                Your new project is ready. Let&apos;s get you started.
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <div className="space-y-6 py-6">
+          {/* Main explanation */}
+          <div className="space-y-3">
+            <p className="text-sm text-foreground leading-relaxed">
+              Would you like to auto-generate your <strong>app_spec.txt</strong>? This file helps
+              describe your project and is used to pre-populate your backlog with features to work
+              on.
+            </p>
+          </div>
+
+          {/* Benefits list */}
+          <div className="space-y-3 rounded-xl bg-muted/30 border border-border/50 p-4">
+            <div className="flex items-start gap-3">
+              <CheckCircle2 className="w-5 h-5 text-brand-500 shrink-0 mt-0.5" />
+              <div>
+                <p className="text-sm font-medium text-foreground">Pre-populate your backlog</p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Automatically generate features based on your project specification
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <Zap className="w-5 h-5 text-brand-500 shrink-0 mt-0.5" />
+              <div>
+                <p className="text-sm font-medium text-foreground">Better AI assistance</p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Help AI agents understand your project structure and tech stack
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <FileText className="w-5 h-5 text-brand-500 shrink-0 mt-0.5" />
+              <div>
+                <p className="text-sm font-medium text-foreground">Project documentation</p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Keep a clear record of your project&apos;s capabilities and features
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Info box */}
+          <div className="rounded-xl bg-brand-500/5 border border-brand-500/10 p-3">
+            <p className="text-xs text-muted-foreground leading-relaxed">
+              <strong className="text-foreground">Tip:</strong> You can always generate or edit your
+              app_spec.txt later from the Spec Editor in the sidebar.
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button
+            variant="ghost"
+            onClick={onSkip}
+            className="text-muted-foreground hover:text-foreground"
+          >
+            Skip for now
+          </Button>
+          <Button
+            onClick={handleGenerateSpec}
+            className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-white border-0"
+          >
+            <Sparkles className="w-4 h-4 mr-2" />
+            Generate App Spec
+            <ArrowRight className="w-4 h-4 ml-2" />
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/dialogs/trash-dialog.tsx b/temp_repo/apps/ui/src/components/layout/sidebar/dialogs/trash-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a26837da8b05f1f74ddea1280cde04b1e745cff4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/dialogs/trash-dialog.tsx
@@ -0,0 +1,181 @@
+import { useState } from 'react';
+import { X, Trash2, Undo2 } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { DeleteConfirmDialog } from '@/components/ui/delete-confirm-dialog';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+import type { TrashedProject } from '@/lib/electron';
+
+interface TrashDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  trashedProjects: TrashedProject[];
+  activeTrashId: string | null;
+  handleRestoreProject: (id: string) => void;
+  handleDeleteProjectFromDisk: (project: TrashedProject) => void;
+  deleteTrashedProject: (id: string) => void;
+  handleEmptyTrash: () => void;
+  isEmptyingTrash: boolean;
+}
+
+export function TrashDialog({
+  open,
+  onOpenChange,
+  trashedProjects,
+  activeTrashId,
+  handleRestoreProject,
+  handleDeleteProjectFromDisk,
+  deleteTrashedProject,
+  handleEmptyTrash,
+  isEmptyingTrash,
+}: TrashDialogProps) {
+  // Confirmation dialog state (managed internally to avoid prop drilling)
+  const [deleteFromDiskProject, setDeleteFromDiskProject] = useState<TrashedProject | null>(null);
+  const [showEmptyTrashConfirm, setShowEmptyTrashConfirm] = useState(false);
+
+  // Reset confirmation dialog state when main dialog closes
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      setDeleteFromDiskProject(null);
+      setShowEmptyTrashConfirm(false);
+    }
+    onOpenChange(isOpen);
+  };
+
+  const onDeleteFromDiskClick = (project: TrashedProject) => {
+    setDeleteFromDiskProject(project);
+  };
+
+  const onConfirmDeleteFromDisk = () => {
+    if (deleteFromDiskProject) {
+      handleDeleteProjectFromDisk(deleteFromDiskProject);
+      setDeleteFromDiskProject(null);
+    }
+  };
+
+  const onEmptyTrashClick = () => {
+    setShowEmptyTrashConfirm(true);
+  };
+
+  const onConfirmEmptyTrash = () => {
+    handleEmptyTrash();
+    setShowEmptyTrashConfirm(false);
+  };
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        <DialogContent className="bg-popover/95 backdrop-blur-xl border-border max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>Recycle Bin</DialogTitle>
+            <DialogDescription className="text-muted-foreground">
+              Restore projects to the sidebar or delete their folders using your system Trash.
+            </DialogDescription>
+          </DialogHeader>
+
+          {trashedProjects.length === 0 ? (
+            <p className="text-sm text-muted-foreground">Recycle bin is empty.</p>
+          ) : (
+            <div className="space-y-3 max-h-[360px] overflow-y-auto pr-1">
+              {trashedProjects.map((project) => (
+                <div
+                  key={project.id}
+                  className="flex items-start justify-between gap-3 rounded-lg border border-border bg-card/50 p-4"
+                >
+                  <div className="space-y-1 min-w-0">
+                    <p className="text-sm font-medium text-foreground truncate">{project.name}</p>
+                    <p className="text-xs text-muted-foreground break-all">{project.path}</p>
+                    <p className="text-[11px] text-muted-foreground/80">
+                      Trashed {new Date(project.trashedAt).toLocaleString()}
+                    </p>
+                  </div>
+                  <div className="flex flex-col gap-2 shrink-0">
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => handleRestoreProject(project.id)}
+                      data-testid={`restore-project-${project.id}`}
+                    >
+                      <Undo2 className="h-3.5 w-3.5 mr-1.5" />
+                      Restore
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="destructive"
+                      onClick={() => onDeleteFromDiskClick(project)}
+                      disabled={activeTrashId === project.id}
+                      data-testid={`delete-project-disk-${project.id}`}
+                    >
+                      <Trash2 className="h-3.5 w-3.5 mr-1.5" />
+                      {activeTrashId === project.id ? 'Deleting...' : 'Delete from disk'}
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="text-muted-foreground hover:text-foreground"
+                      onClick={() => deleteTrashedProject(project.id)}
+                      data-testid={`remove-project-${project.id}`}
+                    >
+                      <X className="h-3.5 w-3.5 mr-1.5" />
+                      Remove from list
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          <DialogFooter className="flex justify-between">
+            <Button variant="ghost" onClick={() => onOpenChange(false)}>
+              Close
+            </Button>
+            {trashedProjects.length > 0 && (
+              <Button
+                variant="outline"
+                onClick={onEmptyTrashClick}
+                disabled={isEmptyingTrash}
+                data-testid="empty-trash"
+              >
+                {isEmptyingTrash ? 'Clearing...' : 'Empty Recycle Bin'}
+              </Button>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete from disk confirmation dialog */}
+      {deleteFromDiskProject && (
+        <DeleteConfirmDialog
+          open
+          onOpenChange={(isOpen) => !isOpen && setDeleteFromDiskProject(null)}
+          onConfirm={onConfirmDeleteFromDisk}
+          title={`Delete "${deleteFromDiskProject.name}" from disk?`}
+          description="This sends the folder to your system Trash."
+          confirmText="Delete from disk"
+          testId="delete-from-disk-confirm-dialog"
+          confirmTestId="confirm-delete-from-disk-button"
+        />
+      )}
+
+      {/* Empty trash confirmation dialog */}
+      <ConfirmDialog
+        open={showEmptyTrashConfirm}
+        onOpenChange={setShowEmptyTrashConfirm}
+        onConfirm={onConfirmEmptyTrash}
+        title="Empty Recycle Bin"
+        description="Clear all projects from recycle bin? This does not delete folders from disk."
+        confirmText="Empty"
+        confirmVariant="destructive"
+        icon={Trash2}
+        iconClassName="text-destructive"
+      />
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/hooks/index.ts b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ca6ce898ef6092bfc5f75c156337af0d7045cca9
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/index.ts
@@ -0,0 +1,12 @@
+export { useThemePreview } from './use-theme-preview';
+export { useSidebarAutoCollapse } from './use-sidebar-auto-collapse';
+export { useDragAndDrop } from './use-drag-and-drop';
+export { useRunningAgents } from './use-running-agents';
+export { useTrashOperations } from './use-trash-operations';
+export { useProjectPicker } from './use-project-picker';
+export { useSpecRegeneration } from './use-spec-regeneration';
+export { useNavigation } from './use-navigation';
+export { useProjectCreation } from './use-project-creation';
+export { useSetupDialog } from './use-setup-dialog';
+export { useProjectTheme } from './use-project-theme';
+export { useUnviewedValidations } from './use-unviewed-validations';
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-drag-and-drop.ts b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-drag-and-drop.ts
new file mode 100644
index 0000000000000000000000000000000000000000..570264a4b8706a35318b70566add270d73c6d602
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-drag-and-drop.ts
@@ -0,0 +1,41 @@
+import { useCallback } from 'react';
+import { useSensors, useSensor, PointerSensor, type DragEndEvent } from '@dnd-kit/core';
+import type { Project } from '@/lib/electron';
+
+interface UseDragAndDropProps {
+  projects: Project[];
+  reorderProjects: (oldIndex: number, newIndex: number) => void;
+}
+
+export function useDragAndDrop({ projects, reorderProjects }: UseDragAndDropProps) {
+  // Sensors for drag-and-drop
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5, // Small distance to start drag
+      },
+    })
+  );
+
+  // Handle drag end for reordering projects
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+
+      if (over && active.id !== over.id) {
+        const oldIndex = projects.findIndex((p) => p.id === active.id);
+        const newIndex = projects.findIndex((p) => p.id === over.id);
+
+        if (oldIndex !== -1 && newIndex !== -1) {
+          reorderProjects(oldIndex, newIndex);
+        }
+      }
+    },
+    [projects, reorderProjects]
+  );
+
+  return {
+    sensors,
+    handleDragEnd,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-navigation.ts b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-navigation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42ab2efbf08b8d965ef0a634105b7e8ee0eafc2a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-navigation.ts
@@ -0,0 +1,339 @@
+import { useMemo, useState, useEffect } from 'react';
+import type { NavigateOptions } from '@tanstack/react-router';
+import {
+  FileText,
+  Folder,
+  LayoutGrid,
+  Bot,
+  BookOpen,
+  Terminal,
+  CircleDot,
+  GitPullRequest,
+  Lightbulb,
+  Brain,
+  Network,
+  Bell,
+  Settings,
+  Home,
+} from 'lucide-react';
+import type { NavSection, NavItem } from '../types';
+import type { KeyboardShortcut } from '@/hooks/use-keyboard-shortcuts';
+import type { Project } from '@/lib/electron';
+import { getElectronAPI } from '@/lib/electron';
+
+interface UseNavigationProps {
+  shortcuts: {
+    toggleSidebar: string;
+    openProject: string;
+    projectPicker: string;
+    cyclePrevProject: string;
+    cycleNextProject: string;
+    spec: string;
+    context: string;
+    memory: string;
+    board: string;
+    graph: string;
+    agent: string;
+    terminal: string;
+    settings: string;
+    projectSettings: string;
+    ideation: string;
+    githubIssues: string;
+    githubPrs: string;
+    notifications: string;
+  };
+  hideSpecEditor: boolean;
+  hideContext: boolean;
+  hideTerminal: boolean;
+  currentProject: Project | null;
+  projects: Project[];
+  projectHistory: string[];
+  navigate: (opts: NavigateOptions) => void;
+  toggleSidebar: () => void;
+  handleOpenFolder: () => void;
+  cyclePrevProject: () => void;
+  cycleNextProject: () => void;
+  /** Count of unviewed validations to show on GitHub Issues nav item */
+  unviewedValidationsCount?: number;
+  /** Count of unread notifications to show on Notifications nav item */
+  unreadNotificationsCount?: number;
+  /** Whether spec generation is currently running for the current project */
+  isSpecGenerating?: boolean;
+}
+
+export function useNavigation({
+  shortcuts,
+  hideSpecEditor,
+  hideContext,
+  hideTerminal,
+  currentProject,
+  projects: _projects,
+  projectHistory,
+  navigate,
+  toggleSidebar,
+  handleOpenFolder,
+  cyclePrevProject,
+  cycleNextProject,
+  unviewedValidationsCount,
+  unreadNotificationsCount,
+  isSpecGenerating,
+}: UseNavigationProps) {
+  // Track if current project has a GitHub remote
+  const [hasGitHubRemote, setHasGitHubRemote] = useState(false);
+
+  useEffect(() => {
+    async function checkGitHubRemote() {
+      if (!currentProject?.path) {
+        setHasGitHubRemote(false);
+        return;
+      }
+
+      try {
+        const api = getElectronAPI();
+        if (api.github) {
+          const result = await api.github.checkRemote(currentProject.path);
+          setHasGitHubRemote(result.success && result.hasGitHubRemote === true);
+        }
+      } catch {
+        setHasGitHubRemote(false);
+      }
+    }
+
+    checkGitHubRemote();
+  }, [currentProject?.path]);
+
+  // Build navigation sections
+  const navSections: NavSection[] = useMemo(() => {
+    const allToolsItems: NavItem[] = [
+      {
+        id: 'ideation',
+        label: 'Ideation',
+        icon: Lightbulb,
+        shortcut: shortcuts.ideation,
+      },
+      {
+        id: 'spec',
+        label: 'Spec Editor',
+        icon: FileText,
+        shortcut: shortcuts.spec,
+        isLoading: isSpecGenerating,
+      },
+      {
+        id: 'context',
+        label: 'Context',
+        icon: BookOpen,
+        shortcut: shortcuts.context,
+      },
+      {
+        id: 'memory',
+        label: 'Memory',
+        icon: Brain,
+        shortcut: shortcuts.memory,
+      },
+    ];
+
+    // Filter out hidden items
+    const visibleToolsItems = allToolsItems.filter((item) => {
+      if (item.id === 'spec' && hideSpecEditor) {
+        return false;
+      }
+      if (item.id === 'context' && hideContext) {
+        return false;
+      }
+      return true;
+    });
+
+    // Build project items - Terminal and File Editor are conditionally included
+    const projectItems: NavItem[] = [
+      {
+        id: 'board',
+        label: 'Kanban Board',
+        icon: LayoutGrid,
+        shortcut: shortcuts.board,
+      },
+      {
+        id: 'graph',
+        label: 'Graph View',
+        icon: Network,
+        shortcut: shortcuts.graph,
+      },
+      {
+        id: 'file-editor',
+        label: 'File Editor',
+        icon: Folder,
+      },
+      {
+        id: 'agent',
+        label: 'Agent Runner',
+        icon: Bot,
+        shortcut: shortcuts.agent,
+      },
+    ];
+
+    // Add Terminal to Project section if not hidden
+    if (!hideTerminal) {
+      projectItems.push({
+        id: 'terminal',
+        label: 'Terminal',
+        icon: Terminal,
+        shortcut: shortcuts.terminal,
+      });
+    }
+
+    const sections: NavSection[] = [
+      // Dashboard - standalone at top (links to projects overview)
+      {
+        label: '',
+        items: [
+          {
+            id: 'overview',
+            label: 'Dashboard',
+            icon: Home,
+          },
+        ],
+      },
+      // Project section - expanded by default
+      {
+        label: 'Project',
+        items: projectItems,
+        collapsible: true,
+        defaultCollapsed: false,
+      },
+      // Tools section - collapsed by default
+      {
+        label: 'Tools',
+        items: visibleToolsItems,
+        collapsible: true,
+        defaultCollapsed: true,
+      },
+    ];
+
+    // Add GitHub section if project has a GitHub remote
+    if (hasGitHubRemote) {
+      sections.push({
+        label: 'GitHub',
+        items: [
+          {
+            id: 'github-issues',
+            label: 'Issues',
+            icon: CircleDot,
+            shortcut: shortcuts.githubIssues,
+            count: unviewedValidationsCount,
+          },
+          {
+            id: 'github-prs',
+            label: 'Pull Requests',
+            icon: GitPullRequest,
+            shortcut: shortcuts.githubPrs,
+          },
+        ],
+        collapsible: true,
+        defaultCollapsed: true,
+      });
+    }
+
+    // Add Notifications and Project Settings as a standalone section (no label for visual separation)
+    sections.push({
+      label: '',
+      items: [
+        {
+          id: 'notifications',
+          label: 'Notifications',
+          icon: Bell,
+          shortcut: shortcuts.notifications,
+          count: unreadNotificationsCount,
+        },
+        {
+          id: 'project-settings',
+          label: 'Project Settings',
+          icon: Settings,
+          shortcut: shortcuts.projectSettings,
+        },
+      ],
+    });
+
+    return sections;
+  }, [
+    shortcuts,
+    hideSpecEditor,
+    hideContext,
+    hideTerminal,
+    hasGitHubRemote,
+    unviewedValidationsCount,
+    unreadNotificationsCount,
+    isSpecGenerating,
+  ]);
+
+  // Build keyboard shortcuts for navigation
+  const navigationShortcuts: KeyboardShortcut[] = useMemo(() => {
+    const shortcutsList: KeyboardShortcut[] = [];
+
+    // Sidebar toggle shortcut - always available
+    shortcutsList.push({
+      key: shortcuts.toggleSidebar,
+      action: () => toggleSidebar(),
+      description: 'Toggle sidebar',
+    });
+
+    // Open project shortcut - opens the folder selection dialog directly
+    shortcutsList.push({
+      key: shortcuts.openProject,
+      action: () => handleOpenFolder(),
+      description: 'Open folder selection dialog',
+    });
+
+    // Project cycling shortcuts - only when we have project history
+    if (projectHistory.length > 1) {
+      shortcutsList.push({
+        key: shortcuts.cyclePrevProject,
+        action: () => cyclePrevProject(),
+        description: 'Cycle to previous project (MRU)',
+      });
+      shortcutsList.push({
+        key: shortcuts.cycleNextProject,
+        action: () => cycleNextProject(),
+        description: 'Cycle to next project (LRU)',
+      });
+    }
+
+    // Only enable nav shortcuts if there's a current project
+    if (currentProject) {
+      navSections.forEach((section) => {
+        section.items.forEach((item) => {
+          if (item.shortcut) {
+            shortcutsList.push({
+              key: item.shortcut,
+              // Cast to router path type; ids are constrained to known routes
+              action: () => navigate({ to: `/${item.id}` as unknown as '/' }),
+              description: `Navigate to ${item.label}`,
+            });
+          }
+        });
+      });
+
+      // Add global settings shortcut
+      shortcutsList.push({
+        key: shortcuts.settings,
+        action: () => navigate({ to: '/settings' }),
+        description: 'Navigate to Global Settings',
+      });
+    }
+
+    return shortcutsList;
+  }, [
+    shortcuts,
+    currentProject,
+    navigate,
+    toggleSidebar,
+    handleOpenFolder,
+    projectHistory.length,
+    cyclePrevProject,
+    cycleNextProject,
+    navSections,
+  ]);
+
+  return {
+    navSections,
+    navigationShortcuts,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-project-creation.ts b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-project-creation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ea73f63a69decef5fca382147a63b6d0b6185f3d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-project-creation.ts
@@ -0,0 +1,267 @@
+import { useState, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { getElectronAPI } from '@/lib/electron';
+
+const logger = createLogger('ProjectCreation');
+import { initializeProject } from '@/lib/project-init';
+import { toast } from 'sonner';
+import type { StarterTemplate } from '@/lib/templates';
+import type { Project } from '@/lib/electron';
+
+interface UseProjectCreationProps {
+  upsertAndSetCurrentProject: (path: string, name: string) => Project;
+}
+
+export function useProjectCreation({ upsertAndSetCurrentProject }: UseProjectCreationProps) {
+  // Modal state
+  const [showNewProjectModal, setShowNewProjectModal] = useState(false);
+  const [isCreatingProject, setIsCreatingProject] = useState(false);
+
+  // Onboarding state
+  const [showOnboardingDialog, setShowOnboardingDialog] = useState(false);
+  const [newProjectName, setNewProjectName] = useState('');
+  const [newProjectPath, setNewProjectPath] = useState('');
+
+  /**
+   * Common logic for all project creation flows
+   */
+  const finalizeProjectCreation = useCallback(
+    async (projectPath: string, projectName: string) => {
+      try {
+        // Initialize .automaker directory structure
+        await initializeProject(projectPath);
+
+        // Write initial app_spec.txt with proper XML structure
+        // Note: Must follow XML format as defined in apps/server/src/lib/app-spec-format.ts
+        const api = getElectronAPI();
+        await api.writeFile(
+          `${projectPath}/.automaker/app_spec.txt`,
+          `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    Describe your project here. This file will be analyzed by an AI agent
+    to understand your project structure and tech stack.
+  </overview>
+
+  <technology_stack>
+    <!-- The AI agent will fill this in after analyzing your project -->
+  </technology_stack>
+
+  <core_capabilities>
+    <!-- List core features and capabilities -->
+  </core_capabilities>
+
+  <implemented_features>
+    <!-- The AI agent will populate this based on code analysis -->
+  </implemented_features>
+</project_specification>`
+        );
+
+        // Let the store handle theme (trashed project recovery or undefined for global)
+        upsertAndSetCurrentProject(projectPath, projectName);
+
+        setShowNewProjectModal(false);
+
+        // Show onboarding dialog for new project
+        setNewProjectName(projectName);
+        setNewProjectPath(projectPath);
+        setShowOnboardingDialog(true);
+
+        toast.success('Project created successfully');
+      } catch (error) {
+        logger.error('Failed to finalize project:', error);
+        toast.error('Failed to initialize project', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+        throw error;
+      }
+    },
+    [upsertAndSetCurrentProject]
+  );
+
+  /**
+   * Create a blank project with .automaker structure
+   */
+  const handleCreateBlankProject = useCallback(
+    async (projectName: string, parentDir: string) => {
+      setIsCreatingProject(true);
+      try {
+        const api = getElectronAPI();
+        const projectPath = `${parentDir}/${projectName}`;
+
+        // Create project directory
+        await api.mkdir(projectPath);
+
+        // Finalize project setup
+        await finalizeProjectCreation(projectPath, projectName);
+      } catch (error) {
+        logger.error('Failed to create blank project:', error);
+        toast.error('Failed to create project', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      } finally {
+        setIsCreatingProject(false);
+      }
+    },
+    [finalizeProjectCreation]
+  );
+
+  /**
+   * Create project from a starter template
+   */
+  const handleCreateFromTemplate = useCallback(
+    async (template: StarterTemplate, projectName: string, parentDir: string) => {
+      setIsCreatingProject(true);
+      try {
+        const api = getElectronAPI();
+
+        // Clone template repository
+        if (!api.templates) {
+          throw new Error('Templates API is not available');
+        }
+        const cloneResult = await api.templates.clone(template.repoUrl, projectName, parentDir);
+        if (!cloneResult.success) {
+          throw new Error(cloneResult.error || 'Failed to clone template');
+        }
+        const projectPath = cloneResult.projectPath!;
+
+        // Initialize .automaker directory structure
+        await initializeProject(projectPath);
+
+        // Write app_spec.txt with template-specific info
+        await api.writeFile(
+          `${projectPath}/.automaker/app_spec.txt`,
+          `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    This project was created from the "${template.name}" starter template.
+    ${template.description}
+  </overview>
+
+  <technology_stack>
+    ${template.techStack.map((tech) => `<technology>${tech}</technology>`).join('\n    ')}
+  </technology_stack>
+
+  <core_capabilities>
+    ${template.features.map((feature) => `<capability>${feature}</capability>`).join('\n    ')}
+  </core_capabilities>
+
+  <implemented_features>
+    <!-- The AI agent will populate this based on code analysis -->
+  </implemented_features>
+</project_specification>`
+        );
+
+        // Let the store handle theme (trashed project recovery or undefined for global)
+        upsertAndSetCurrentProject(projectPath, projectName);
+        setShowNewProjectModal(false);
+        setNewProjectName(projectName);
+        setNewProjectPath(projectPath);
+        setShowOnboardingDialog(true);
+
+        toast.success('Project created from template', {
+          description: `Created ${projectName} from ${template.name}`,
+        });
+      } catch (error) {
+        logger.error('Failed to create from template:', error);
+        toast.error('Failed to create project from template', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      } finally {
+        setIsCreatingProject(false);
+      }
+    },
+    [upsertAndSetCurrentProject]
+  );
+
+  /**
+   * Create project from a custom GitHub URL
+   */
+  const handleCreateFromCustomUrl = useCallback(
+    async (repoUrl: string, projectName: string, parentDir: string) => {
+      setIsCreatingProject(true);
+      try {
+        const api = getElectronAPI();
+
+        // Clone custom repository
+        if (!api.templates) {
+          throw new Error('Templates API is not available');
+        }
+        const cloneResult = await api.templates.clone(repoUrl, projectName, parentDir);
+        if (!cloneResult.success) {
+          throw new Error(cloneResult.error || 'Failed to clone repository');
+        }
+        const projectPath = cloneResult.projectPath!;
+
+        // Initialize .automaker directory structure
+        await initializeProject(projectPath);
+
+        // Write app_spec.txt with custom URL info
+        await api.writeFile(
+          `${projectPath}/.automaker/app_spec.txt`,
+          `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    This project was cloned from ${repoUrl}.
+    The AI agent will analyze the project structure.
+  </overview>
+
+  <technology_stack>
+    <!-- The AI agent will fill this in after analyzing your project -->
+  </technology_stack>
+
+  <core_capabilities>
+    <!-- List core features and capabilities -->
+  </core_capabilities>
+
+  <implemented_features>
+    <!-- The AI agent will populate this based on code analysis -->
+  </implemented_features>
+</project_specification>`
+        );
+
+        // Let the store handle theme (trashed project recovery or undefined for global)
+        upsertAndSetCurrentProject(projectPath, projectName);
+        setShowNewProjectModal(false);
+        setNewProjectName(projectName);
+        setNewProjectPath(projectPath);
+        setShowOnboardingDialog(true);
+
+        toast.success('Project created from repository', {
+          description: `Created ${projectName} from ${repoUrl}`,
+        });
+      } catch (error) {
+        logger.error('Failed to create from custom URL:', error);
+        toast.error('Failed to create project from URL', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      } finally {
+        setIsCreatingProject(false);
+      }
+    },
+    [upsertAndSetCurrentProject]
+  );
+
+  return {
+    // Modal state
+    showNewProjectModal,
+    setShowNewProjectModal,
+    isCreatingProject,
+
+    // Onboarding state
+    showOnboardingDialog,
+    setShowOnboardingDialog,
+    newProjectName,
+    setNewProjectName,
+    newProjectPath,
+    setNewProjectPath,
+
+    // Handlers
+    handleCreateBlankProject,
+    handleCreateFromTemplate,
+    handleCreateFromCustomUrl,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f518a4ef8a5e7252300db319afbc21778fbb4a8d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-project-picker.ts
@@ -0,0 +1,149 @@
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import type { Project } from '@/lib/electron';
+
+interface UseProjectPickerProps {
+  projects: Project[];
+  currentProject: Project | null;
+  isProjectPickerOpen: boolean;
+  setIsProjectPickerOpen: (value: boolean | ((prev: boolean) => boolean)) => void;
+  setCurrentProject: (project: Project) => void | Promise<void>;
+}
+
+export function useProjectPicker({
+  projects,
+  currentProject,
+  isProjectPickerOpen,
+  setIsProjectPickerOpen,
+  setCurrentProject,
+}: UseProjectPickerProps) {
+  const [projectSearchQuery, setProjectSearchQuery] = useState('');
+  const [selectedProjectIndex, setSelectedProjectIndex] = useState(0);
+  const projectSearchInputRef = useRef<HTMLInputElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  // Filtered projects based on search query
+  const filteredProjects = useMemo(() => {
+    if (!projectSearchQuery.trim()) {
+      return projects;
+    }
+    const query = projectSearchQuery.toLowerCase();
+    return projects.filter((project) => project.name.toLowerCase().includes(query));
+  }, [projects, projectSearchQuery]);
+
+  // Helper function to scroll to a specific project
+  const scrollToProject = useCallback((projectId: string) => {
+    if (!scrollContainerRef.current) return;
+
+    const element = scrollContainerRef.current.querySelector(
+      `[data-testid="project-option-${projectId}"]`
+    );
+
+    if (element) {
+      element.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+      });
+    }
+  }, []);
+
+  // On open/close, handle search query reset and focus
+  useEffect(() => {
+    if (isProjectPickerOpen) {
+      // Focus search input after DOM renders
+      requestAnimationFrame(() => {
+        projectSearchInputRef.current?.focus();
+      });
+    } else {
+      // Reset search when closing
+      setProjectSearchQuery('');
+    }
+  }, [isProjectPickerOpen]);
+
+  // Update selection when search query changes (while picker is open)
+  useEffect(() => {
+    if (!isProjectPickerOpen) {
+      setSelectedProjectIndex(0);
+      return;
+    }
+
+    if (projectSearchQuery.trim()) {
+      // When searching, reset to first result
+      setSelectedProjectIndex(0);
+    } else {
+      // When not searching (e.g., on open or search cleared), find and select the current project
+      const currentIndex = currentProject
+        ? filteredProjects.findIndex((p) => p.id === currentProject.id)
+        : -1;
+      setSelectedProjectIndex(currentIndex !== -1 ? currentIndex : 0);
+    }
+  }, [isProjectPickerOpen, projectSearchQuery, filteredProjects, currentProject]);
+
+  // Scroll to highlighted item when selection changes
+  useEffect(() => {
+    if (!isProjectPickerOpen) return;
+
+    const targetProject = filteredProjects[selectedProjectIndex];
+    if (targetProject) {
+      // Use requestAnimationFrame to ensure DOM is rendered before scrolling
+      requestAnimationFrame(() => {
+        scrollToProject(targetProject.id);
+      });
+    }
+  }, [selectedProjectIndex, isProjectPickerOpen, filteredProjects, scrollToProject]);
+
+  // Handle selecting the currently highlighted project
+  const selectHighlightedProject = useCallback(async () => {
+    if (filteredProjects.length > 0 && selectedProjectIndex < filteredProjects.length) {
+      await setCurrentProject(filteredProjects[selectedProjectIndex]);
+      setIsProjectPickerOpen(false);
+    }
+  }, [filteredProjects, selectedProjectIndex, setCurrentProject, setIsProjectPickerOpen]);
+
+  // Handle keyboard events when project picker is open
+  useEffect(() => {
+    if (!isProjectPickerOpen) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsProjectPickerOpen(false);
+      } else if (event.key === 'Enter') {
+        event.preventDefault();
+        selectHighlightedProject().catch(() => {
+          /* Error already logged upstream */
+        });
+      } else if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        setSelectedProjectIndex((prev) => (prev < filteredProjects.length - 1 ? prev + 1 : prev));
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        setSelectedProjectIndex((prev) => (prev > 0 ? prev - 1 : prev));
+      } else if (event.key.toLowerCase() === 'p' && !event.metaKey && !event.ctrlKey) {
+        // Toggle off when P is pressed (not with modifiers) while dropdown is open
+        // Only if not typing in the search input
+        if (document.activeElement !== projectSearchInputRef.current) {
+          event.preventDefault();
+          setIsProjectPickerOpen(false);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [
+    isProjectPickerOpen,
+    selectHighlightedProject,
+    filteredProjects.length,
+    setIsProjectPickerOpen,
+  ]);
+
+  return {
+    projectSearchQuery,
+    setProjectSearchQuery,
+    selectedProjectIndex,
+    setSelectedProjectIndex,
+    projectSearchInputRef,
+    scrollContainerRef,
+    filteredProjects,
+    selectHighlightedProject,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-project-theme.ts b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-project-theme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b80e605dccab5137873fcdd479efde7f6940faeb
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-project-theme.ts
@@ -0,0 +1,25 @@
+import { useAppStore } from '@/store/app-store';
+import { useThemePreview } from './use-theme-preview';
+
+/**
+ * Hook that manages project theme state and preview handlers
+ */
+export function useProjectTheme() {
+  // Get theme-related values from store
+  const { theme: globalTheme, setTheme, setProjectTheme, setPreviewTheme } = useAppStore();
+
+  // Get debounced preview handlers
+  const { handlePreviewEnter, handlePreviewLeave } = useThemePreview({ setPreviewTheme });
+
+  return {
+    // Theme state
+    globalTheme,
+    setTheme,
+    setProjectTheme,
+    setPreviewTheme,
+
+    // Preview handlers
+    handlePreviewEnter,
+    handlePreviewLeave,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-running-agents.ts b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-running-agents.ts
new file mode 100644
index 0000000000000000000000000000000000000000..964e6f3f8a940236c7f6bd4ee8830a8f4c8b4b52
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-running-agents.ts
@@ -0,0 +1,132 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { getElectronAPI } from '@/lib/electron';
+
+const logger = createLogger('RunningAgents');
+
+export function useRunningAgents() {
+  const [runningAgentsCount, setRunningAgentsCount] = useState(0);
+  const fetchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Fetch running agents count function - used for initial load and event-driven updates
+  const fetchRunningAgentsCount = useCallback(async () => {
+    try {
+      const api = getElectronAPI();
+      if (api.runningAgents) {
+        logger.debug('Fetching running agents count');
+        const result = await api.runningAgents.getAll();
+        if (result.success && result.runningAgents) {
+          logger.debug('Running agents count fetched', {
+            count: result.runningAgents.length,
+          });
+          setRunningAgentsCount(result.runningAgents.length);
+        } else {
+          logger.debug('Running agents count fetch returned empty/failed', {
+            success: result.success,
+          });
+        }
+      } else {
+        logger.debug('Running agents API not available');
+      }
+    } catch (error) {
+      logger.error('Error fetching running agents count:', error);
+    }
+  }, []);
+
+  // Debounced fetch to avoid excessive API calls from frequent events
+  const debouncedFetchRunningAgentsCount = useCallback(() => {
+    if (fetchTimeoutRef.current) {
+      clearTimeout(fetchTimeoutRef.current);
+    }
+    fetchTimeoutRef.current = setTimeout(() => {
+      fetchRunningAgentsCount();
+    }, 300);
+  }, [fetchRunningAgentsCount]);
+
+  // Subscribe to auto-mode events to update running agents count in real-time
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api.autoMode) {
+      logger.debug('Auto mode API not available for running agents hook');
+      // If autoMode is not available, still fetch initial count
+      fetchRunningAgentsCount();
+      return;
+    }
+
+    // Initial fetch on mount
+    fetchRunningAgentsCount();
+
+    const unsubscribe = api.autoMode.onEvent((event) => {
+      logger.debug('Auto mode event for running agents hook', {
+        type: event.type,
+      });
+      // When a feature starts, completes, or errors, refresh the count
+      if (
+        event.type === 'auto_mode_feature_complete' ||
+        event.type === 'auto_mode_error' ||
+        event.type === 'auto_mode_feature_start'
+      ) {
+        fetchRunningAgentsCount();
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [fetchRunningAgentsCount]);
+
+  // Subscribe to backlog plan events to update running agents count
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api.backlogPlan) return;
+
+    fetchRunningAgentsCount();
+
+    const unsubscribe = api.backlogPlan.onEvent(() => {
+      fetchRunningAgentsCount();
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [fetchRunningAgentsCount]);
+
+  // Subscribe to spec regeneration events to update running agents count
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api.specRegeneration) return;
+
+    fetchRunningAgentsCount();
+
+    const unsubscribe = api.specRegeneration.onEvent((event) => {
+      logger.debug('Spec regeneration event for running agents hook', {
+        type: event.type,
+      });
+      // When spec regeneration completes or errors, refresh immediately
+      if (event.type === 'spec_regeneration_complete' || event.type === 'spec_regeneration_error') {
+        fetchRunningAgentsCount();
+      }
+      // For progress events, use debounced fetch to avoid excessive calls
+      else if (event.type === 'spec_regeneration_progress') {
+        debouncedFetchRunningAgentsCount();
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [fetchRunningAgentsCount, debouncedFetchRunningAgentsCount]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (fetchTimeoutRef.current) {
+        clearTimeout(fetchTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    runningAgentsCount,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-setup-dialog.ts b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-setup-dialog.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a9fde54f05310c4941f29e86dc417dd0dc3129d7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-setup-dialog.ts
@@ -0,0 +1,150 @@
+import { useState, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { getElectronAPI } from '@/lib/electron';
+
+const logger = createLogger('SetupDialog');
+import { toast } from 'sonner';
+import type { FeatureCount } from '@/components/views/spec-view/types';
+
+interface UseSetupDialogProps {
+  setSpecCreatingForProject: (path: string | null) => void;
+  newProjectPath: string;
+  setNewProjectName: (name: string) => void;
+  setNewProjectPath: (path: string) => void;
+  setShowOnboardingDialog: (show: boolean) => void;
+}
+
+export function useSetupDialog({
+  setSpecCreatingForProject,
+  newProjectPath,
+  setNewProjectName,
+  setNewProjectPath,
+  setShowOnboardingDialog,
+}: UseSetupDialogProps) {
+  // Setup dialog state
+  const [showSetupDialog, setShowSetupDialog] = useState(false);
+  const [setupProjectPath, setSetupProjectPath] = useState('');
+  const [projectOverview, setProjectOverview] = useState('');
+  const [generateFeatures, setGenerateFeatures] = useState(true);
+  const [analyzeProject, setAnalyzeProject] = useState(true);
+  const [featureCount, setFeatureCount] = useState<FeatureCount>(50);
+
+  /**
+   * Handle creating initial spec for new project
+   */
+  const handleCreateInitialSpec = useCallback(async () => {
+    if (!setupProjectPath || !projectOverview.trim()) return;
+
+    // Set store state immediately so the loader shows up right away
+    setSpecCreatingForProject(setupProjectPath);
+    setShowSetupDialog(false);
+
+    try {
+      const api = getElectronAPI();
+      if (!api.specRegeneration) {
+        toast.error('Spec regeneration not available');
+        setSpecCreatingForProject(null);
+        return;
+      }
+
+      const result = await api.specRegeneration.create(
+        setupProjectPath,
+        projectOverview.trim(),
+        generateFeatures,
+        analyzeProject,
+        generateFeatures ? featureCount : undefined // only pass maxFeatures if generating features
+      );
+
+      if (!result.success) {
+        logger.error('Failed to start spec creation:', result.error);
+        setSpecCreatingForProject(null);
+        toast.error('Failed to create specification', {
+          description: result.error,
+        });
+      } else {
+        // Show processing toast to inform user
+        toast.info('Generating app specification...', {
+          description: "This may take a minute. You'll be notified when complete.",
+        });
+      }
+      // If successful, we'll wait for the events to update the state
+    } catch (error) {
+      logger.error('Failed to create spec:', error);
+      setSpecCreatingForProject(null);
+      toast.error('Failed to create specification', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    }
+  }, [
+    setupProjectPath,
+    projectOverview,
+    generateFeatures,
+    analyzeProject,
+    featureCount,
+    setSpecCreatingForProject,
+  ]);
+
+  /**
+   * Handle skipping setup
+   */
+  const handleSkipSetup = useCallback(() => {
+    setShowSetupDialog(false);
+    setProjectOverview('');
+    setSetupProjectPath('');
+
+    // Clear onboarding state if we came from onboarding
+    if (newProjectPath) {
+      setNewProjectName('');
+      setNewProjectPath('');
+    }
+
+    toast.info('Setup skipped', {
+      description: 'You can set up your app_spec.txt later from the Spec view.',
+    });
+  }, [newProjectPath, setNewProjectName, setNewProjectPath]);
+
+  /**
+   * Handle onboarding dialog - generate spec
+   */
+  const handleOnboardingGenerateSpec = useCallback(() => {
+    setShowOnboardingDialog(false);
+    // Navigate to the setup dialog flow
+    setSetupProjectPath(newProjectPath);
+    setProjectOverview('');
+    setShowSetupDialog(true);
+  }, [newProjectPath, setShowOnboardingDialog]);
+
+  /**
+   * Handle onboarding dialog - skip
+   */
+  const handleOnboardingSkip = useCallback(() => {
+    setShowOnboardingDialog(false);
+    setNewProjectName('');
+    setNewProjectPath('');
+    toast.info('You can generate your app_spec.txt anytime from the Spec view', {
+      description: 'Your project is ready to use!',
+    });
+  }, [setShowOnboardingDialog, setNewProjectName, setNewProjectPath]);
+
+  return {
+    // State
+    showSetupDialog,
+    setShowSetupDialog,
+    setupProjectPath,
+    setSetupProjectPath,
+    projectOverview,
+    setProjectOverview,
+    generateFeatures,
+    setGenerateFeatures,
+    analyzeProject,
+    setAnalyzeProject,
+    featureCount,
+    setFeatureCount,
+
+    // Handlers
+    handleCreateInitialSpec,
+    handleSkipSetup,
+    handleOnboardingGenerateSpec,
+    handleOnboardingSkip,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-sidebar-auto-collapse.ts b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-sidebar-auto-collapse.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fc5faba237321db15d289247e146aab99ba8087c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-sidebar-auto-collapse.ts
@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react';
+
+interface UseSidebarAutoCollapseProps {
+  sidebarOpen: boolean;
+  toggleSidebar: () => void;
+}
+
+export function useSidebarAutoCollapse({
+  sidebarOpen,
+  toggleSidebar,
+}: UseSidebarAutoCollapseProps) {
+  const isMountedRef = useRef(false);
+
+  // Auto-collapse sidebar on small screens
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(max-width: 1024px)'); // lg breakpoint
+
+    const handleResize = () => {
+      if (mediaQuery.matches && sidebarOpen) {
+        // Auto-collapse on small screens
+        toggleSidebar();
+      }
+    };
+
+    // Check on mount only
+    if (!isMountedRef.current) {
+      isMountedRef.current = true;
+      handleResize();
+    }
+
+    // Listen for changes
+    mediaQuery.addEventListener('change', handleResize);
+    return () => mediaQuery.removeEventListener('change', handleResize);
+  }, [sidebarOpen, toggleSidebar]);
+
+  // Update Electron window minWidth when sidebar state changes
+  // This ensures the window can't be resized smaller than what the kanban board needs
+  useEffect(() => {
+    const electronAPI = (
+      window as unknown as {
+        electronAPI?: { updateMinWidth?: (expanded: boolean) => Promise<void> };
+      }
+    ).electronAPI;
+    if (electronAPI?.updateMinWidth) {
+      electronAPI.updateMinWidth(sidebarOpen);
+    }
+  }, [sidebarOpen]);
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-spec-regeneration.ts b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-spec-regeneration.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9dc9c6698d4b8439f8f5856d32bfe8bedbab8b15
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-spec-regeneration.ts
@@ -0,0 +1,82 @@
+import { useEffect } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { toast } from 'sonner';
+
+const logger = createLogger('SpecRegeneration');
+import { getElectronAPI } from '@/lib/electron';
+import type { SpecRegenerationEvent } from '@/types/electron';
+
+interface UseSpecRegenerationProps {
+  creatingSpecProjectPath: string | null;
+  setupProjectPath: string;
+  setSpecCreatingForProject: (path: string | null) => void;
+  setShowSetupDialog: (show: boolean) => void;
+  setProjectOverview: (overview: string) => void;
+  setSetupProjectPath: (path: string) => void;
+  setNewProjectName: (name: string) => void;
+  setNewProjectPath: (path: string) => void;
+}
+
+export function useSpecRegeneration({
+  creatingSpecProjectPath,
+  setupProjectPath,
+  setSpecCreatingForProject,
+  setShowSetupDialog,
+  setProjectOverview,
+  setSetupProjectPath,
+  setNewProjectName,
+  setNewProjectPath,
+}: UseSpecRegenerationProps) {
+  // Subscribe to spec regeneration events
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api.specRegeneration) return;
+
+    const unsubscribe = api.specRegeneration.onEvent((event: SpecRegenerationEvent) => {
+      logger.debug('Spec regeneration event:', event.type, 'for project:', event.projectPath);
+
+      // Only handle events for the project we're currently setting up
+      if (event.projectPath !== creatingSpecProjectPath && event.projectPath !== setupProjectPath) {
+        logger.debug('Ignoring event - not for project being set up');
+        return;
+      }
+
+      if (event.type === 'spec_regeneration_complete') {
+        // Only show toast if we're in active creation flow (not regular regeneration)
+        const isCreationFlow = creatingSpecProjectPath !== null;
+
+        setSpecCreatingForProject(null);
+        setShowSetupDialog(false);
+        setProjectOverview('');
+        setSetupProjectPath('');
+        // Clear onboarding state if we came from onboarding
+        setNewProjectName('');
+        setNewProjectPath('');
+
+        if (isCreationFlow) {
+          toast.success('App specification created', {
+            description: 'Your project is now set up and ready to go!',
+          });
+        }
+      } else if (event.type === 'spec_regeneration_error') {
+        setSpecCreatingForProject(null);
+        toast.error('Failed to create specification', {
+          description: event.error,
+        });
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [
+    creatingSpecProjectPath,
+    setupProjectPath,
+    setSpecCreatingForProject,
+    setShowSetupDialog,
+    setProjectOverview,
+    setSetupProjectPath,
+    setNewProjectName,
+    setNewProjectPath,
+  ]);
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-theme-preview.ts b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-theme-preview.ts
new file mode 100644
index 0000000000000000000000000000000000000000..46c25e93b6c74f2a445df92c5f8f184b9688357e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-theme-preview.ts
@@ -0,0 +1,53 @@
+import { useRef, useCallback, useEffect } from 'react';
+import type { ThemeMode } from '@/store/app-store';
+
+interface UseThemePreviewProps {
+  setPreviewTheme: (theme: ThemeMode | null) => void;
+}
+
+export function useThemePreview({ setPreviewTheme }: UseThemePreviewProps) {
+  // Debounced preview theme handlers to prevent excessive re-renders
+  const previewTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handlePreviewEnter = useCallback(
+    (value: string) => {
+      // Clear any pending timeout
+      if (previewTimeoutRef.current) {
+        clearTimeout(previewTimeoutRef.current);
+      }
+      // Small delay to debounce rapid hover changes
+      previewTimeoutRef.current = setTimeout(() => {
+        setPreviewTheme(value as ThemeMode);
+      }, 16); // ~1 frame delay
+    },
+    [setPreviewTheme]
+  );
+
+  const handlePreviewLeave = useCallback(
+    (e: React.PointerEvent) => {
+      const relatedTarget = e.relatedTarget as HTMLElement;
+      if (!relatedTarget?.closest('[data-testid^="project-theme-"]')) {
+        // Clear any pending timeout
+        if (previewTimeoutRef.current) {
+          clearTimeout(previewTimeoutRef.current);
+        }
+        setPreviewTheme(null);
+      }
+    },
+    [setPreviewTheme]
+  );
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (previewTimeoutRef.current) {
+        clearTimeout(previewTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    handlePreviewEnter,
+    handlePreviewLeave,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-trash-operations.ts b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-trash-operations.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d539ddbeaac2fec9d29bb6810560f2e24509415b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-trash-operations.ts
@@ -0,0 +1,91 @@
+import { useState, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { toast } from 'sonner';
+
+const logger = createLogger('TrashOperations');
+import { getElectronAPI, type TrashedProject } from '@/lib/electron';
+
+interface UseTrashOperationsProps {
+  restoreTrashedProject: (projectId: string) => void;
+  deleteTrashedProject: (projectId: string) => void;
+  emptyTrash: () => void;
+}
+
+export function useTrashOperations({
+  restoreTrashedProject,
+  deleteTrashedProject,
+  emptyTrash,
+}: UseTrashOperationsProps) {
+  const [activeTrashId, setActiveTrashId] = useState<string | null>(null);
+  const [isEmptyingTrash, setIsEmptyingTrash] = useState(false);
+
+  const handleRestoreProject = useCallback(
+    (projectId: string) => {
+      try {
+        restoreTrashedProject(projectId);
+        toast.success('Project restored', {
+          description: 'Added back to your project list.',
+        });
+      } catch (error) {
+        logger.error('Failed to restore project:', error);
+        toast.error('Failed to restore project', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    },
+    [restoreTrashedProject]
+  );
+
+  const handleDeleteProjectFromDisk = useCallback(
+    async (trashedProject: TrashedProject) => {
+      setActiveTrashId(trashedProject.id);
+      try {
+        const api = getElectronAPI();
+        if (!api.trashItem) {
+          throw new Error('System Trash is not available in this build.');
+        }
+
+        const result = await api.trashItem(trashedProject.path);
+        if (!result.success) {
+          throw new Error(result.error || 'Failed to delete project folder');
+        }
+
+        deleteTrashedProject(trashedProject.id);
+        toast.success('Project folder sent to system Trash', {
+          description: trashedProject.path,
+        });
+      } catch (error) {
+        logger.error('Failed to delete project from disk:', error);
+        toast.error('Failed to delete project folder', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      } finally {
+        setActiveTrashId(null);
+      }
+    },
+    [deleteTrashedProject]
+  );
+
+  const handleEmptyTrash = useCallback(() => {
+    setIsEmptyingTrash(true);
+    try {
+      emptyTrash();
+      toast.success('Recycle bin cleared');
+    } catch (error) {
+      logger.error('Failed to empty trash:', error);
+      toast.error('Failed to clear recycle bin', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsEmptyingTrash(false);
+    }
+  }, [emptyTrash]);
+
+  return {
+    activeTrashId,
+    isEmptyingTrash,
+    handleRestoreProject,
+    handleDeleteProjectFromDisk,
+    handleEmptyTrash,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-unviewed-validations.ts b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-unviewed-validations.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e7020d9a1d40d1c9200f091e535ea2e893308bcb
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/hooks/use-unviewed-validations.ts
@@ -0,0 +1,85 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { getElectronAPI } from '@/lib/electron';
+
+const logger = createLogger('UnviewedValidations');
+import type { Project, StoredValidation } from '@/lib/electron';
+
+/**
+ * Hook to track the count of unviewed (fresh) issue validations for a project.
+ * Also provides a function to decrement the count when a validation is viewed.
+ */
+export function useUnviewedValidations(currentProject: Project | null) {
+  const [count, setCount] = useState(0);
+  const projectPathRef = useRef<string | null>(null);
+
+  // Keep project path in ref for use in async functions
+  useEffect(() => {
+    projectPathRef.current = currentProject?.path ?? null;
+  }, [currentProject?.path]);
+
+  // Fetch and update count from server
+  const fetchUnviewedCount = useCallback(async () => {
+    const projectPath = projectPathRef.current;
+    if (!projectPath) return;
+
+    try {
+      const api = getElectronAPI();
+      if (api.github?.getValidations) {
+        const result = await api.github.getValidations(projectPath);
+        if (result.success && result.validations) {
+          const unviewed = result.validations.filter((v: StoredValidation) => {
+            if (v.viewedAt) return false;
+            // Check if not stale (< 24 hours)
+            const hoursSince = (Date.now() - new Date(v.validatedAt).getTime()) / (1000 * 60 * 60);
+            return hoursSince <= 24;
+          });
+          // Only update count if we're still on the same project (guard against race condition)
+          if (projectPathRef.current === projectPath) {
+            setCount(unviewed.length);
+          }
+        }
+      }
+    } catch (err) {
+      logger.error('Failed to load count:', err);
+    }
+  }, []);
+
+  // Load initial count and subscribe to events
+  useEffect(() => {
+    if (!currentProject?.path) {
+      setCount(0);
+      return;
+    }
+
+    // Load initial count
+    fetchUnviewedCount();
+
+    // Subscribe to validation events to update count
+    const api = getElectronAPI();
+    if (api.github?.onValidationEvent) {
+      const unsubscribe = api.github.onValidationEvent((event) => {
+        if (event.projectPath === currentProject.path) {
+          if (event.type === 'issue_validation_complete') {
+            // New validation completed - refresh count from server for consistency
+            fetchUnviewedCount();
+          } else if (event.type === 'issue_validation_viewed') {
+            // Validation was viewed - refresh count from server for consistency
+            fetchUnviewedCount();
+          }
+        }
+      });
+      return () => unsubscribe();
+    }
+  }, [currentProject?.path, fetchUnviewedCount]);
+
+  // Function to decrement count when a validation is viewed
+  const decrementCount = useCallback(() => {
+    setCount((prev) => Math.max(0, prev - 1));
+  }, []);
+
+  // Expose refreshCount as an alias to fetchUnviewedCount for external use
+  const refreshCount = fetchUnviewedCount;
+
+  return { count, decrementCount, refreshCount };
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/index.ts b/temp_repo/apps/ui/src/components/layout/sidebar/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bfed62466e9a915c72e33a1a0b196aba050b4f9c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/index.ts
@@ -0,0 +1 @@
+export { Sidebar } from './sidebar';
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/sidebar.tsx b/temp_repo/apps/ui/src/components/layout/sidebar/sidebar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ae9f03de8105bf9d9234513951a563cb117103b5
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/sidebar.tsx
@@ -0,0 +1,555 @@
+import { useState, useCallback, useEffect, startTransition } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { useNavigate, useLocation } from '@tanstack/react-router';
+import { PanelLeftClose, ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import { useNotificationsStore } from '@/store/notifications-store';
+import { useKeyboardShortcuts, useKeyboardShortcutsConfig } from '@/hooks/use-keyboard-shortcuts';
+import { getElectronAPI } from '@/lib/electron';
+import { initializeProject, hasAppSpec, hasAutomakerDir } from '@/lib/project-init';
+import { toast } from 'sonner';
+import { useIsCompact } from '@/hooks/use-media-query';
+import type { Project } from '@/lib/electron';
+
+// Sidebar components
+import {
+  SidebarNavigation,
+  CollapseToggleButton,
+  MobileSidebarToggle,
+  SidebarHeader,
+  SidebarFooter,
+} from './components';
+import { SIDEBAR_FEATURE_FLAGS } from './constants';
+import {
+  useSidebarAutoCollapse,
+  useRunningAgents,
+  useSpecRegeneration,
+  useNavigation,
+  useProjectCreation,
+  useSetupDialog,
+  useTrashOperations,
+  useUnviewedValidations,
+} from './hooks';
+import { TrashDialog, OnboardingDialog } from './dialogs';
+
+// Reuse dialogs from project-switcher
+import { ProjectContextMenu } from '../project-switcher/components/project-context-menu';
+import { EditProjectDialog } from '../project-switcher/components/edit-project-dialog';
+
+// Import shared dialogs
+import { DeleteProjectDialog } from '@/components/views/settings-view/components/delete-project-dialog';
+import { RemoveFromAutomakerDialog } from '@/components/views/settings-view/components/remove-from-automaker-dialog';
+import { NewProjectModal } from '@/components/dialogs/new-project-modal';
+import { CreateSpecDialog } from '@/components/views/spec-view/dialogs';
+
+const logger = createLogger('Sidebar');
+
+export function Sidebar() {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const {
+    projects,
+    trashedProjects,
+    currentProject,
+    sidebarOpen,
+    sidebarStyle,
+    mobileSidebarHidden,
+    projectHistory,
+    upsertAndSetCurrentProject,
+    toggleSidebar,
+    toggleMobileSidebarHidden,
+    restoreTrashedProject,
+    deleteTrashedProject,
+    emptyTrash,
+    cyclePrevProject,
+    cycleNextProject,
+    moveProjectToTrash,
+    removeProject,
+    specCreatingForProject,
+    setSpecCreatingForProject,
+    setCurrentProject,
+  } = useAppStore();
+
+  const isCompact = useIsCompact();
+
+  // Environment variable flags for hiding sidebar items
+  const { hideTerminal, hideRunningAgents, hideContext, hideSpecEditor, hideWiki } =
+    SIDEBAR_FEATURE_FLAGS;
+
+  // Get customizable keyboard shortcuts
+  const shortcuts = useKeyboardShortcutsConfig();
+
+  // Get unread notifications count
+  const unreadNotificationsCount = useNotificationsStore((s) => s.unreadCount);
+
+  // State for context menu
+  const [contextMenuProject, setContextMenuProject] = useState<Project | null>(null);
+  const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | null>(
+    null
+  );
+  const [editDialogProject, setEditDialogProject] = useState<Project | null>(null);
+
+  // State for delete project confirmation dialog
+  const [showDeleteProjectDialog, setShowDeleteProjectDialog] = useState(false);
+  // State for remove from automaker confirmation dialog
+  const [showRemoveFromAutomakerDialog, setShowRemoveFromAutomakerDialog] = useState(false);
+
+  // State for trash dialog
+  const [showTrashDialog, setShowTrashDialog] = useState(false);
+
+  // Project creation state and handlers
+  const {
+    showNewProjectModal,
+    setShowNewProjectModal,
+    isCreatingProject,
+    showOnboardingDialog,
+    setShowOnboardingDialog,
+    newProjectName,
+    setNewProjectName,
+    newProjectPath,
+    setNewProjectPath,
+    handleCreateBlankProject,
+    handleCreateFromTemplate,
+    handleCreateFromCustomUrl,
+  } = useProjectCreation({
+    upsertAndSetCurrentProject,
+  });
+
+  // Setup dialog state and handlers
+  const {
+    showSetupDialog,
+    setShowSetupDialog,
+    setupProjectPath,
+    setSetupProjectPath,
+    projectOverview,
+    setProjectOverview,
+    generateFeatures,
+    setGenerateFeatures,
+    analyzeProject,
+    setAnalyzeProject,
+    featureCount,
+    setFeatureCount,
+    handleCreateInitialSpec,
+    handleSkipSetup,
+    handleOnboardingGenerateSpec,
+    handleOnboardingSkip,
+  } = useSetupDialog({
+    setSpecCreatingForProject,
+    newProjectPath,
+    setNewProjectName,
+    setNewProjectPath,
+    setShowOnboardingDialog,
+  });
+
+  // Derive isCreatingSpec from store state
+  const isCreatingSpec = specCreatingForProject !== null;
+  const creatingSpecProjectPath = specCreatingForProject;
+  // Check if the current project is specifically the one generating spec
+  const isCurrentProjectGeneratingSpec =
+    specCreatingForProject !== null && specCreatingForProject === currentProject?.path;
+
+  // Auto-collapse sidebar on small screens
+  useSidebarAutoCollapse({ sidebarOpen, toggleSidebar });
+
+  // Running agents count
+  const { runningAgentsCount } = useRunningAgents();
+
+  // Unviewed validations count
+  const { count: unviewedValidationsCount } = useUnviewedValidations(currentProject);
+
+  // Trash operations
+  const {
+    activeTrashId,
+    isEmptyingTrash,
+    handleRestoreProject,
+    handleDeleteProjectFromDisk,
+    handleEmptyTrash,
+  } = useTrashOperations({
+    restoreTrashedProject,
+    deleteTrashedProject,
+    emptyTrash,
+  });
+
+  // Spec regeneration events
+  useSpecRegeneration({
+    creatingSpecProjectPath,
+    setupProjectPath,
+    setSpecCreatingForProject,
+    setShowSetupDialog,
+    setProjectOverview,
+    setSetupProjectPath,
+    setNewProjectName,
+    setNewProjectPath,
+  });
+
+  // Context menu handlers
+  const handleContextMenu = useCallback((project: Project, event: React.MouseEvent) => {
+    event.preventDefault();
+    setContextMenuProject(project);
+    setContextMenuPosition({ x: event.clientX, y: event.clientY });
+  }, []);
+
+  const handleCloseContextMenu = useCallback(() => {
+    setContextMenuProject(null);
+    setContextMenuPosition(null);
+  }, []);
+
+  const handleEditProject = useCallback(
+    (project: Project) => {
+      setEditDialogProject(project);
+      handleCloseContextMenu();
+    },
+    [handleCloseContextMenu]
+  );
+
+  /**
+   * Opens the system folder selection dialog and initializes the selected project.
+   */
+  const handleOpenFolder = useCallback(async () => {
+    const api = getElectronAPI();
+    const result = await api.openDirectory();
+
+    if (!result.canceled && result.filePaths[0]) {
+      const path = result.filePaths[0];
+      const name = path.split(/[/\\]/).filter(Boolean).pop() || 'Untitled Project';
+
+      try {
+        const hadAutomakerDir = await hasAutomakerDir(path);
+        const initResult = await initializeProject(path);
+
+        if (!initResult.success) {
+          toast.error('Failed to initialize project', {
+            description: initResult.error || 'Unknown error occurred',
+          });
+          return;
+        }
+
+        upsertAndSetCurrentProject(path, name);
+        const specExists = await hasAppSpec(path);
+
+        if (!hadAutomakerDir && !specExists) {
+          setSetupProjectPath(path);
+          setShowSetupDialog(true);
+          toast.success('Project opened', {
+            description: `Opened ${name}. Let's set up your app specification!`,
+          });
+        } else if (initResult.createdFiles && initResult.createdFiles.length > 0) {
+          toast.success(initResult.isNewProject ? 'Project initialized' : 'Project updated', {
+            description: `Set up ${initResult.createdFiles.length} file(s) in .automaker`,
+          });
+        } else {
+          toast.success('Project opened', {
+            description: `Opened ${name}`,
+          });
+        }
+
+        navigate({ to: '/board' });
+      } catch (error) {
+        logger.error('Failed to open project:', error);
+        toast.error('Failed to open project', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    }
+  }, [upsertAndSetCurrentProject, navigate, setSetupProjectPath, setShowSetupDialog]);
+
+  const handleNewProject = useCallback(() => {
+    setShowNewProjectModal(true);
+  }, [setShowNewProjectModal]);
+
+  // Navigation sections and keyboard shortcuts
+  const { navSections, navigationShortcuts } = useNavigation({
+    shortcuts,
+    hideSpecEditor,
+    hideContext,
+    hideTerminal,
+    currentProject,
+    projects,
+    projectHistory,
+    navigate,
+    toggleSidebar,
+    handleOpenFolder,
+    cyclePrevProject,
+    cycleNextProject,
+    unviewedValidationsCount,
+    unreadNotificationsCount,
+    isSpecGenerating: isCurrentProjectGeneratingSpec,
+  });
+
+  // Register keyboard shortcuts
+  useKeyboardShortcuts(navigationShortcuts);
+
+  const switchProjectSafely = useCallback(
+    async (targetProject: Project) => {
+      // Ensure .automaker directory structure exists before switching
+      const initResult = await initializeProject(targetProject.path);
+      if (!initResult.success) {
+        logger.error('Failed to initialize project during switch:', initResult.error);
+        toast.warning(
+          `Could not fully initialize project: ${initResult.error ?? 'Unknown error'}. Some features may not work correctly.`
+        );
+        // Continue with switch despite init failure — project may already be partially initialized
+      }
+
+      // Batch project switch + navigation to prevent multi-render cascades.
+      startTransition(() => {
+        setCurrentProject(targetProject);
+        navigate({ to: '/board' });
+      });
+    },
+    [setCurrentProject, navigate]
+  );
+
+  // Keyboard shortcuts for project switching (1-9, 0)
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement;
+      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+        return;
+      }
+
+      if (event.ctrlKey || event.metaKey || event.altKey) {
+        return;
+      }
+
+      const key = event.key;
+      let projectIndex: number | null = null;
+
+      if (key >= '1' && key <= '9') {
+        projectIndex = parseInt(key, 10) - 1;
+      } else if (key === '0') {
+        projectIndex = 9;
+      }
+
+      if (projectIndex !== null && projectIndex < projects.length) {
+        const targetProject = projects[projectIndex];
+        if (targetProject && targetProject.id !== currentProject?.id) {
+          void switchProjectSafely(targetProject);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [projects, currentProject, switchProjectSafely]);
+
+  const isActiveRoute = (id: string) => {
+    const routePath = id === 'welcome' ? '/' : `/${id}`;
+    return location.pathname === routePath;
+  };
+
+  // Track if nav can scroll down
+  const [canScrollDown, setCanScrollDown] = useState(false);
+
+  // Check if sidebar should be completely hidden on mobile
+  const shouldHideSidebar = isCompact && mobileSidebarHidden;
+
+  return (
+    <>
+      {/* Floating toggle to show sidebar on mobile when hidden */}
+      <MobileSidebarToggle />
+
+      {/* Mobile backdrop overlay */}
+      {sidebarOpen && !shouldHideSidebar && (
+        <div
+          className="fixed inset-0 bg-black/50 z-20 lg:hidden"
+          onClick={toggleSidebar}
+          data-testid="sidebar-backdrop"
+        />
+      )}
+
+      <aside
+        className={cn(
+          'flex-shrink-0 flex flex-col z-30',
+          // Glass morphism background with gradient
+          'bg-gradient-to-b from-sidebar/95 via-sidebar/85 to-sidebar/90 backdrop-blur-2xl',
+          // Premium border with subtle glow
+          'border-r border-border/60 shadow-[1px_0_20px_-5px_rgba(0,0,0,0.1)]',
+          // Smooth width transition
+          'transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]',
+          // Mobile: completely hidden when mobileSidebarHidden is true
+          shouldHideSidebar && 'hidden',
+          // Width based on state
+          !shouldHideSidebar &&
+            (sidebarOpen
+              ? 'fixed inset-y-0 left-0 w-[17rem] lg:relative lg:w-[17rem]'
+              : 'relative w-14')
+        )}
+        data-testid="sidebar"
+      >
+        <CollapseToggleButton
+          sidebarOpen={sidebarOpen}
+          toggleSidebar={toggleSidebar}
+          shortcut={shortcuts.toggleSidebar}
+        />
+
+        {/* Floating hide button on right edge - only visible on compact screens when sidebar is collapsed */}
+        {!sidebarOpen && isCompact && (
+          <button
+            onClick={toggleMobileSidebarHidden}
+            className={cn(
+              'absolute -right-6 top-1/2 -translate-y-1/2 z-40',
+              'flex items-center justify-center w-6 h-10 rounded-r-lg',
+              'bg-card/95 backdrop-blur-sm border border-l-0 border-border/80',
+              'text-muted-foreground hover:text-brand-500 hover:bg-accent/80',
+              'shadow-lg hover:shadow-xl hover:shadow-brand-500/10',
+              'transition-all duration-200',
+              'hover:w-8 active:scale-95'
+            )}
+            aria-label="Hide sidebar"
+            data-testid="sidebar-mobile-hide"
+          >
+            <PanelLeftClose className="w-3.5 h-3.5" />
+          </button>
+        )}
+
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* Only show header in unified mode - in discord mode, ProjectSwitcher has the logo */}
+          {sidebarStyle === 'unified' && (
+            <SidebarHeader
+              sidebarOpen={sidebarOpen}
+              currentProject={currentProject}
+              onNewProject={handleNewProject}
+              onOpenFolder={handleOpenFolder}
+              onProjectContextMenu={handleContextMenu}
+              setShowRemoveFromAutomakerDialog={setShowRemoveFromAutomakerDialog}
+            />
+          )}
+
+          <SidebarNavigation
+            currentProject={currentProject}
+            sidebarOpen={sidebarOpen}
+            sidebarStyle={sidebarStyle}
+            navSections={navSections}
+            isActiveRoute={isActiveRoute}
+            navigate={navigate}
+            onScrollStateChange={setCanScrollDown}
+          />
+        </div>
+
+        {/* Scroll indicator - shows there's more content below */}
+        {canScrollDown && (
+          <div
+            className={cn(
+              'relative flex justify-center py-2 border-t border-border/30',
+              'bg-gradient-to-t from-background via-background/95 to-transparent',
+              '-mt-8 pt-8',
+              'pointer-events-none'
+            )}
+          >
+            <div className="pointer-events-auto flex flex-col items-center gap-0.5">
+              <ChevronDown
+                className={cn(
+                  'w-4 h-4 text-brand-500/70 animate-bounce',
+                  sidebarOpen ? 'block' : 'w-3 h-3'
+                )}
+              />
+              {sidebarOpen && (
+                <span className="text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wide">
+                  Scroll
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+
+        <SidebarFooter
+          sidebarOpen={sidebarOpen}
+          isActiveRoute={isActiveRoute}
+          navigate={navigate}
+          hideRunningAgents={hideRunningAgents}
+          hideWiki={hideWiki}
+          runningAgentsCount={runningAgentsCount}
+          shortcuts={{ settings: shortcuts.settings }}
+        />
+
+        <TrashDialog
+          open={showTrashDialog}
+          onOpenChange={setShowTrashDialog}
+          trashedProjects={trashedProjects}
+          activeTrashId={activeTrashId}
+          handleRestoreProject={handleRestoreProject}
+          handleDeleteProjectFromDisk={handleDeleteProjectFromDisk}
+          deleteTrashedProject={deleteTrashedProject}
+          handleEmptyTrash={handleEmptyTrash}
+          isEmptyingTrash={isEmptyingTrash}
+        />
+
+        {/* New Project Setup Dialog */}
+        <CreateSpecDialog
+          open={showSetupDialog}
+          onOpenChange={setShowSetupDialog}
+          projectOverview={projectOverview}
+          onProjectOverviewChange={setProjectOverview}
+          generateFeatures={generateFeatures}
+          onGenerateFeaturesChange={setGenerateFeatures}
+          analyzeProject={analyzeProject}
+          onAnalyzeProjectChange={setAnalyzeProject}
+          featureCount={featureCount}
+          onFeatureCountChange={setFeatureCount}
+          onCreateSpec={handleCreateInitialSpec}
+          onSkip={handleSkipSetup}
+          isCreatingSpec={isCreatingSpec}
+          showSkipButton={true}
+          title="Set Up Your Project"
+          description="We didn't find an app_spec.txt file. Let us help you generate your app_spec.txt to help describe your project for our system. We'll analyze your project's tech stack and create a comprehensive specification."
+        />
+
+        <OnboardingDialog
+          open={showOnboardingDialog}
+          onOpenChange={setShowOnboardingDialog}
+          newProjectName={newProjectName}
+          onSkip={handleOnboardingSkip}
+          onGenerateSpec={handleOnboardingGenerateSpec}
+        />
+
+        {/* Delete Project Confirmation Dialog */}
+        <DeleteProjectDialog
+          open={showDeleteProjectDialog}
+          onOpenChange={setShowDeleteProjectDialog}
+          project={currentProject}
+          onConfirm={moveProjectToTrash}
+        />
+
+        {/* Remove from Automaker Confirmation Dialog */}
+        <RemoveFromAutomakerDialog
+          open={showRemoveFromAutomakerDialog}
+          onOpenChange={setShowRemoveFromAutomakerDialog}
+          project={currentProject}
+          onConfirm={removeProject}
+        />
+
+        {/* New Project Modal */}
+        <NewProjectModal
+          open={showNewProjectModal}
+          onOpenChange={setShowNewProjectModal}
+          onCreateBlankProject={handleCreateBlankProject}
+          onCreateFromTemplate={handleCreateFromTemplate}
+          onCreateFromCustomUrl={handleCreateFromCustomUrl}
+          isCreating={isCreatingProject}
+        />
+      </aside>
+
+      {/* Context Menu */}
+      {contextMenuProject && contextMenuPosition && (
+        <ProjectContextMenu
+          project={contextMenuProject}
+          position={contextMenuPosition}
+          onClose={handleCloseContextMenu}
+          onEdit={handleEditProject}
+        />
+      )}
+
+      {/* Edit Project Dialog */}
+      {editDialogProject && (
+        <EditProjectDialog
+          project={editDialogProject}
+          open={!!editDialogProject}
+          onOpenChange={(open) => !open && setEditDialogProject(null)}
+        />
+      )}
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/layout/sidebar/types.ts b/temp_repo/apps/ui/src/components/layout/sidebar/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..937e28fa5020804bca93ba1cb626e836c159e28d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/layout/sidebar/types.ts
@@ -0,0 +1,40 @@
+import type { Project } from '@/lib/electron';
+import type React from 'react';
+
+export interface NavSection {
+  label?: string;
+  items: NavItem[];
+  /** Whether this section can be collapsed */
+  collapsible?: boolean;
+  /** Whether this section should start collapsed */
+  defaultCollapsed?: boolean;
+}
+
+export interface NavItem {
+  id: string;
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  shortcut?: string;
+  /** Optional count badge to display next to the nav item */
+  count?: number;
+  /** Whether this nav item is in a loading state (shows spinner) */
+  isLoading?: boolean;
+}
+
+export interface SortableProjectItemProps {
+  project: Project;
+  currentProjectId: string | undefined;
+  isHighlighted: boolean;
+  onSelect: (project: Project) => void | Promise<void>;
+}
+
+export interface ThemeMenuItemProps {
+  option: {
+    value: string;
+    label: string;
+    icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
+    color: string;
+  };
+  onPreviewEnter: (value: string) => void;
+  onPreviewLeave: (e: React.PointerEvent) => void;
+}
diff --git a/temp_repo/apps/ui/src/components/session-manager.tsx b/temp_repo/apps/ui/src/components/session-manager.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b7a1dec0ed2c5af58f7d5bcce8a0272a3c97203a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/session-manager.tsx
@@ -0,0 +1,615 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { useQueryClient } from '@tanstack/react-query';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+const logger = createLogger('SessionManager');
+import { Button } from '@/components/ui/button';
+import { HotkeyButton } from '@/components/ui/hotkey-button';
+import { Input } from '@/components/ui/input';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Plus,
+  MessageSquare,
+  Archive,
+  Trash2,
+  Edit2,
+  Check,
+  X,
+  ArchiveRestore,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn, pathsEqual } from '@/lib/utils';
+import type { SessionListItem } from '@/types/electron';
+import { useKeyboardShortcutsConfig } from '@/hooks/use-keyboard-shortcuts';
+import { getElectronAPI } from '@/lib/electron';
+import { useSessions } from '@/hooks/queries';
+import { queryKeys } from '@/lib/query-keys';
+import { DeleteSessionDialog } from '@/components/dialogs/delete-session-dialog';
+import { DeleteAllArchivedSessionsDialog } from '@/components/dialogs/delete-all-archived-sessions-dialog';
+
+// Random session name generator
+const adjectives = [
+  'Swift',
+  'Bright',
+  'Clever',
+  'Dynamic',
+  'Eager',
+  'Focused',
+  'Gentle',
+  'Happy',
+  'Inventive',
+  'Jolly',
+  'Keen',
+  'Lively',
+  'Mighty',
+  'Noble',
+  'Optimal',
+  'Peaceful',
+  'Quick',
+  'Radiant',
+  'Smart',
+  'Tranquil',
+  'Unique',
+  'Vibrant',
+  'Wise',
+  'Zealous',
+];
+
+const nouns = [
+  'Agent',
+  'Builder',
+  'Coder',
+  'Developer',
+  'Explorer',
+  'Forge',
+  'Garden',
+  'Helper',
+  'Innovator',
+  'Journey',
+  'Kernel',
+  'Lighthouse',
+  'Mission',
+  'Navigator',
+  'Oracle',
+  'Project',
+  'Quest',
+  'Runner',
+  'Spark',
+  'Task',
+  'Unicorn',
+  'Voyage',
+  'Workshop',
+];
+
+function generateRandomSessionName(): string {
+  const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
+  const noun = nouns[Math.floor(Math.random() * nouns.length)];
+  const number = Math.floor(Math.random() * 100);
+  return `${adjective} ${noun} ${number}`;
+}
+
+interface SessionManagerProps {
+  currentSessionId: string | null;
+  onSelectSession: (sessionId: string | null) => void;
+  projectPath: string;
+  workingDirectory?: string; // Current worktree path for scoping sessions
+  isCurrentSessionThinking?: boolean;
+  onQuickCreateRef?: React.MutableRefObject<(() => Promise<void>) | null>;
+}
+
+export function SessionManager({
+  currentSessionId,
+  onSelectSession,
+  projectPath,
+  workingDirectory,
+  isCurrentSessionThinking = false,
+  onQuickCreateRef,
+}: SessionManagerProps) {
+  const shortcuts = useKeyboardShortcutsConfig();
+  const queryClient = useQueryClient();
+  const [activeTab, setActiveTab] = useState<'active' | 'archived'>('active');
+  const [editingSessionId, setEditingSessionId] = useState<string | null>(null);
+  const [editingName, setEditingName] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
+  const [newSessionName, setNewSessionName] = useState('');
+  const [runningSessions, setRunningSessions] = useState<Set<string>>(new Set());
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [sessionToDelete, setSessionToDelete] = useState<SessionListItem | null>(null);
+  const [isDeleteAllArchivedDialogOpen, setIsDeleteAllArchivedDialogOpen] = useState(false);
+
+  // Use React Query for sessions list - always include archived, filter client-side
+  const { data: sessions = [], refetch: refetchSessions } = useSessions(true);
+
+  // Ref to track if we've done the initial running sessions check
+  const hasCheckedInitialRef = useRef(false);
+
+  // Check running state for all sessions
+  const checkRunningSessions = useCallback(async (sessionList: SessionListItem[]) => {
+    const api = getElectronAPI();
+    if (!api?.agent) return;
+
+    const runningIds = new Set<string>();
+
+    // Check each session's running state
+    for (const session of sessionList) {
+      try {
+        const result = await api.agent.getHistory(session.id);
+        if (result.success && result.isRunning) {
+          runningIds.add(session.id);
+        }
+      } catch (err) {
+        // Ignore errors for individual session checks
+        logger.warn(`Failed to check running state for ${session.id}:`, err);
+      }
+    }
+
+    setRunningSessions(runningIds);
+  }, []);
+
+  // Helper to invalidate sessions cache and refetch
+  const invalidateSessions = useCallback(async () => {
+    await queryClient.invalidateQueries({ queryKey: queryKeys.sessions.all(true) });
+    // Also check running state after invalidation
+    const result = await refetchSessions();
+    if (result.data) {
+      await checkRunningSessions(result.data);
+    }
+    return result;
+  }, [queryClient, refetchSessions, checkRunningSessions]);
+
+  // Check running state on initial load (runs only once when sessions first load)
+  useEffect(() => {
+    if (sessions.length > 0 && !hasCheckedInitialRef.current) {
+      hasCheckedInitialRef.current = true;
+      checkRunningSessions(sessions);
+    }
+  }, [sessions, checkRunningSessions]);
+
+  // Periodically check running state for sessions (useful for detecting when agents finish)
+  useEffect(() => {
+    // Only poll if there are running sessions
+    if (runningSessions.size === 0 && !isCurrentSessionThinking) return;
+
+    const interval = setInterval(async () => {
+      if (sessions.length > 0) {
+        await checkRunningSessions(sessions);
+      }
+    }, 3000); // Check every 3 seconds
+
+    return () => clearInterval(interval);
+  }, [sessions, runningSessions.size, isCurrentSessionThinking, checkRunningSessions]);
+
+  // Effective working directory for session creation (worktree path or project path)
+  const effectiveWorkingDirectory = workingDirectory || projectPath;
+
+  // Create new session with random name
+  const handleCreateSession = async () => {
+    const api = getElectronAPI();
+    if (!api?.sessions) return;
+
+    const sessionName = newSessionName.trim() || generateRandomSessionName();
+
+    const result = await api.sessions.create(sessionName, projectPath, effectiveWorkingDirectory);
+
+    if (result.success && result.session?.id) {
+      setNewSessionName('');
+      setIsCreating(false);
+      // Select the new session immediately before invalidating the cache to avoid
+      // a race condition where the cache re-render resets the selected session.
+      onSelectSession(result.session.id);
+      await invalidateSessions();
+    }
+  };
+
+  // Create new session directly with a random name (one-click)
+  const handleQuickCreateSession = useCallback(async () => {
+    const api = getElectronAPI();
+    if (!api?.sessions) return;
+
+    const sessionName = generateRandomSessionName();
+
+    const result = await api.sessions.create(sessionName, projectPath, effectiveWorkingDirectory);
+
+    if (result.success && result.session?.id) {
+      // Select the new session immediately before invalidating the cache to avoid
+      // a race condition where the cache re-render resets the selected session.
+      onSelectSession(result.session.id);
+      await invalidateSessions();
+    }
+  }, [effectiveWorkingDirectory, projectPath, invalidateSessions, onSelectSession]);
+
+  // Expose the quick create function via ref for keyboard shortcuts
+  useEffect(() => {
+    if (onQuickCreateRef) {
+      onQuickCreateRef.current = handleQuickCreateSession;
+    }
+    return () => {
+      if (onQuickCreateRef) {
+        onQuickCreateRef.current = null;
+      }
+    };
+  }, [onQuickCreateRef, handleQuickCreateSession]);
+
+  // Rename session
+  const handleRenameSession = async (sessionId: string) => {
+    const api = getElectronAPI();
+    if (!editingName.trim() || !api?.sessions) return;
+
+    const result = await api.sessions.update(sessionId, editingName, undefined);
+
+    if (result.success) {
+      setEditingSessionId(null);
+      setEditingName('');
+      await invalidateSessions();
+    }
+  };
+
+  // Archive session
+  const handleArchiveSession = async (sessionId: string) => {
+    const api = getElectronAPI();
+    if (!api?.sessions) {
+      logger.error('[SessionManager] Sessions API not available');
+      return;
+    }
+
+    try {
+      const result = await api.sessions.archive(sessionId);
+      if (result.success) {
+        // If the archived session was currently selected, deselect it
+        if (currentSessionId === sessionId) {
+          onSelectSession(null);
+        }
+        await invalidateSessions();
+      } else {
+        logger.error('[SessionManager] Archive failed:', result.error);
+      }
+    } catch (error) {
+      logger.error('[SessionManager] Archive error:', error);
+    }
+  };
+
+  // Unarchive session
+  const handleUnarchiveSession = async (sessionId: string) => {
+    const api = getElectronAPI();
+    if (!api?.sessions) {
+      logger.error('[SessionManager] Sessions API not available');
+      return;
+    }
+
+    try {
+      const result = await api.sessions.unarchive(sessionId);
+      if (result.success) {
+        await invalidateSessions();
+      } else {
+        logger.error('[SessionManager] Unarchive failed:', result.error);
+      }
+    } catch (error) {
+      logger.error('[SessionManager] Unarchive error:', error);
+    }
+  };
+
+  // Open delete session dialog
+  const handleDeleteSession = (session: SessionListItem) => {
+    setSessionToDelete(session);
+    setIsDeleteDialogOpen(true);
+  };
+
+  // Confirm delete session
+  const confirmDeleteSession = async (sessionId: string) => {
+    const api = getElectronAPI();
+    if (!api?.sessions) return;
+
+    const result = await api.sessions.delete(sessionId);
+    if (result.success) {
+      const refetchResult = await invalidateSessions();
+      if (currentSessionId === sessionId) {
+        // Switch to another session using fresh data, excluding the deleted session
+        // Filter to sessions within the same worktree to avoid jumping to a different worktree
+        const freshSessions = refetchResult?.data ?? [];
+        const activeSessionsList = freshSessions.filter((s) => {
+          if (s.isArchived || s.id === sessionId) return false;
+          const sessionDir = s.workingDirectory || s.projectPath;
+          return pathsEqual(sessionDir, effectiveWorkingDirectory);
+        });
+        if (activeSessionsList.length > 0) {
+          onSelectSession(activeSessionsList[0].id);
+        } else {
+          onSelectSession(null);
+        }
+      }
+    }
+    setSessionToDelete(null);
+  };
+
+  // Delete all archived sessions
+  const handleDeleteAllArchivedSessions = async () => {
+    const api = getElectronAPI();
+    if (!api?.sessions) return;
+
+    // Delete each archived session
+    for (const session of archivedSessions) {
+      await api.sessions.delete(session.id);
+    }
+
+    await invalidateSessions();
+    setIsDeleteAllArchivedDialogOpen(false);
+  };
+
+  // Filter sessions by current working directory (worktree scoping)
+  const scopedSessions = sessions.filter((s) => {
+    const sessionDir = s.workingDirectory || s.projectPath;
+    // Match sessions whose workingDirectory matches the current effective directory
+    // Use pathsEqual for cross-platform path normalization (trailing slashes, separators)
+    return pathsEqual(sessionDir, effectiveWorkingDirectory);
+  });
+
+  const activeSessions = scopedSessions.filter((s) => !s.isArchived);
+  const archivedSessions = scopedSessions.filter((s) => s.isArchived);
+  const displayedSessions = activeTab === 'active' ? activeSessions : archivedSessions;
+
+  return (
+    <Card className="h-full flex flex-col rounded-none">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between mb-4">
+          <CardTitle>Agent Sessions</CardTitle>
+          <HotkeyButton
+            variant="default"
+            size="sm"
+            onClick={() => {
+              // Switch to active tab if on archived tab
+              if (activeTab === 'archived') {
+                setActiveTab('active');
+              }
+              handleQuickCreateSession();
+            }}
+            hotkey={shortcuts.newSession}
+            hotkeyActive={false}
+            data-testid="new-session-button"
+            title={`New Session (${shortcuts.newSession})`}
+          >
+            <Plus className="w-4 h-4 mr-1" />
+            New
+          </HotkeyButton>
+        </div>
+
+        <Tabs
+          value={activeTab}
+          onValueChange={(value) => setActiveTab(value as 'active' | 'archived')}
+          className="w-full"
+        >
+          <TabsList className="w-full">
+            <TabsTrigger value="active" className="flex-1">
+              <MessageSquare className="w-4 h-4 mr-2" />
+              Active ({activeSessions.length})
+            </TabsTrigger>
+            <TabsTrigger value="archived" className="flex-1">
+              <Archive className="w-4 h-4 mr-2" />
+              Archived ({archivedSessions.length})
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </CardHeader>
+
+      <CardContent className="flex-1 overflow-y-auto space-y-2" data-testid="session-list">
+        {/* Create new session */}
+        {isCreating && (
+          <div className="p-3 border rounded-lg bg-muted/50">
+            <div className="flex gap-2">
+              <Input
+                placeholder="Session name..."
+                value={newSessionName}
+                onChange={(e) => setNewSessionName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') handleCreateSession();
+                  if (e.key === 'Escape') {
+                    setIsCreating(false);
+                    setNewSessionName('');
+                  }
+                }}
+                autoFocus
+              />
+              <Button size="sm" onClick={handleCreateSession}>
+                <Check className="w-4 h-4" />
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => {
+                  setIsCreating(false);
+                  setNewSessionName('');
+                }}
+              >
+                <X className="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Delete All Archived button - shown at the top of archived sessions */}
+        {activeTab === 'archived' && archivedSessions.length > 0 && (
+          <div className="pb-2 border-b mb-2">
+            <Button
+              variant="destructive"
+              size="sm"
+              className="w-full"
+              onClick={() => setIsDeleteAllArchivedDialogOpen(true)}
+              data-testid="delete-all-archived-sessions-button"
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              Delete All Archived Sessions
+            </Button>
+          </div>
+        )}
+
+        {/* Session list */}
+        {displayedSessions.map((session) => (
+          <div
+            key={session.id}
+            className={cn(
+              'p-3 border rounded-lg cursor-pointer transition-colors hover:bg-accent/50',
+              currentSessionId === session.id && 'bg-primary/10 border-primary',
+              session.isArchived && 'opacity-60'
+            )}
+            onClick={() => !session.isArchived && onSelectSession(session.id)}
+            data-testid={`session-item-${session.id}`}
+          >
+            <div className="flex items-start justify-between gap-2">
+              <div className="flex-1 min-w-0">
+                {editingSessionId === session.id ? (
+                  <div className="flex gap-2 mb-2">
+                    <Input
+                      value={editingName}
+                      onChange={(e) => setEditingName(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') handleRenameSession(session.id);
+                        if (e.key === 'Escape') {
+                          setEditingSessionId(null);
+                          setEditingName('');
+                        }
+                      }}
+                      onClick={(e) => e.stopPropagation()}
+                      autoFocus
+                      className="h-7"
+                    />
+                    <Button
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRenameSession(session.id);
+                      }}
+                      className="h-7"
+                    >
+                      <Check className="w-3 h-3" />
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setEditingSessionId(null);
+                        setEditingName('');
+                      }}
+                      className="h-7"
+                    >
+                      <X className="w-3 h-3" />
+                    </Button>
+                  </div>
+                ) : (
+                  <>
+                    <div className="flex items-center gap-2 mb-1">
+                      {/* Show loading indicator if this session is running (either current session thinking or any session in runningSessions) */}
+                      {(currentSessionId === session.id && isCurrentSessionThinking) ||
+                      runningSessions.has(session.id) ? (
+                        <Spinner size="sm" className="shrink-0" />
+                      ) : (
+                        <MessageSquare className="w-4 h-4 text-muted-foreground shrink-0" />
+                      )}
+                      <h3 className="font-medium truncate">{session.name}</h3>
+                      {((currentSessionId === session.id && isCurrentSessionThinking) ||
+                        runningSessions.has(session.id)) && (
+                        <span className="text-xs text-primary bg-primary/10 px-2 py-0.5 rounded-full">
+                          thinking...
+                        </span>
+                      )}
+                    </div>
+                    {session.preview && (
+                      <p className="text-xs text-muted-foreground truncate">{session.preview}</p>
+                    )}
+                    <div className="flex items-center gap-2 mt-2">
+                      <span className="text-xs text-muted-foreground">
+                        {session.messageCount} messages
+                      </span>
+                      <span className="text-xs text-muted-foreground">·</span>
+                      <span className="text-xs text-muted-foreground">
+                        {new Date(session.updatedAt).toLocaleDateString()}
+                      </span>
+                    </div>
+                  </>
+                )}
+              </div>
+
+              {/* Actions */}
+              {!session.isArchived && (
+                <div className="flex gap-1" onClick={(e) => e.stopPropagation()}>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => {
+                      setEditingSessionId(session.id);
+                      setEditingName(session.name);
+                    }}
+                    className="h-7 w-7 p-0"
+                  >
+                    <Edit2 className="w-3 h-3" />
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => handleArchiveSession(session.id)}
+                    className="h-7 w-7 p-0"
+                    data-testid={`archive-session-${session.id}`}
+                  >
+                    <Archive className="w-3 h-3" />
+                  </Button>
+                </div>
+              )}
+
+              {session.isArchived && (
+                <div className="flex gap-1" onClick={(e) => e.stopPropagation()}>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => handleUnarchiveSession(session.id)}
+                    className="h-7 w-7 p-0"
+                  >
+                    <ArchiveRestore className="w-3 h-3" />
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => handleDeleteSession(session)}
+                    className="h-7 w-7 p-0 text-destructive"
+                    data-testid={`delete-session-${session.id}`}
+                  >
+                    <Trash2 className="w-3 h-3" />
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+
+        {displayedSessions.length === 0 && (
+          <div className="text-center py-8 text-muted-foreground">
+            <MessageSquare className="w-12 h-12 mx-auto mb-2 opacity-50" />
+            <p className="text-sm">
+              {activeTab === 'active' ? 'No active sessions' : 'No archived sessions'}
+            </p>
+            <p className="text-xs">
+              {activeTab === 'active'
+                ? 'Create your first session to get started'
+                : 'Archive sessions to see them here'}
+            </p>
+          </div>
+        )}
+      </CardContent>
+
+      {/* Delete Session Confirmation Dialog */}
+      <DeleteSessionDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+        session={sessionToDelete}
+        onConfirm={confirmDeleteSession}
+      />
+
+      {/* Delete All Archived Sessions Confirmation Dialog */}
+      <DeleteAllArchivedSessionsDialog
+        open={isDeleteAllArchivedDialogOpen}
+        onOpenChange={setIsDeleteAllArchivedDialogOpen}
+        archivedCount={archivedSessions.length}
+        onConfirm={handleDeleteAllArchivedSessions}
+      />
+    </Card>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/shared/font-selector.tsx b/temp_repo/apps/ui/src/components/shared/font-selector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..34f346fc1f5d5c0b6fe6fe23981763d9146d0d0d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/shared/font-selector.tsx
@@ -0,0 +1,47 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { DEFAULT_FONT_VALUE } from '@/config/ui-font-options';
+
+interface FontOption {
+  value: string;
+  label: string;
+}
+
+interface FontSelectorProps {
+  id: string;
+  value: string;
+  options: readonly FontOption[];
+  placeholder: string;
+  onChange: (value: string) => void;
+}
+
+/**
+ * Reusable font selector component with live preview styling
+ */
+export function FontSelector({ id, value, options, placeholder, onChange }: FontSelectorProps) {
+  return (
+    <Select value={value} onValueChange={onChange}>
+      <SelectTrigger id={id} className="w-full">
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            <span
+              style={{
+                fontFamily: option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
+              }}
+            >
+              {option.label}
+            </span>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/shared/index.ts b/temp_repo/apps/ui/src/components/shared/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..796a945db51e960c466f3e4d100734c1d38e4cb4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/shared/index.ts
@@ -0,0 +1,10 @@
+// Model Override Components
+export { ModelOverrideTrigger, type ModelOverrideTriggerProps } from './model-override-trigger';
+export {
+  useModelOverride,
+  type UseModelOverrideOptions,
+  type UseModelOverrideResult,
+} from './use-model-override';
+
+// Font Components
+export { FontSelector } from './font-selector';
diff --git a/temp_repo/apps/ui/src/components/shared/model-override-trigger.tsx b/temp_repo/apps/ui/src/components/shared/model-override-trigger.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6071831f770004276736dadedd34fc1ffeef19b3
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/shared/model-override-trigger.tsx
@@ -0,0 +1,117 @@
+import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import type { ModelAlias, CursorModelId, PhaseModelKey, PhaseModelEntry } from '@automaker/types';
+import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
+
+/**
+ * Normalize PhaseModelEntry or string to PhaseModelEntry
+ */
+function normalizeEntry(entry: PhaseModelEntry | string): PhaseModelEntry {
+  if (typeof entry === 'string') {
+    return { model: entry as ModelAlias | CursorModelId };
+  }
+  return entry;
+}
+
+export interface ModelOverrideTriggerProps {
+  /** Current effective model entry (from global settings or explicit override) */
+  currentModelEntry: PhaseModelEntry;
+  /** Callback when user selects override */
+  onModelChange: (entry: PhaseModelEntry | null) => void;
+  /** Optional: which phase this is for (shows global default) */
+  phase?: PhaseModelKey;
+  /** Size variants for different contexts */
+  size?: 'sm' | 'md' | 'lg';
+  /** Show as icon-only or with label */
+  variant?: 'icon' | 'button' | 'inline';
+  /** Whether the model is currently overridden from global */
+  isOverridden?: boolean;
+  /** Optional class name */
+  className?: string;
+}
+
+export function ModelOverrideTrigger({
+  currentModelEntry,
+  onModelChange,
+  phase,
+  size = 'sm',
+  variant = 'icon',
+  isOverridden = false,
+  className,
+}: ModelOverrideTriggerProps) {
+  const { phaseModels } = useAppStore();
+
+  const handleChange = (entry: PhaseModelEntry) => {
+    // If the new entry matches the global default, clear the override
+    // Otherwise, set it as override
+    if (phase) {
+      const globalDefault = phaseModels[phase];
+      const normalizedGlobal = normalizeEntry(globalDefault);
+
+      // Compare models, thinking levels, and provider IDs
+      const modelsMatch = entry.model === normalizedGlobal.model;
+      const thinkingMatch =
+        (entry.thinkingLevel || 'none') === (normalizedGlobal.thinkingLevel || 'none');
+      const providerMatch = entry.providerId === normalizedGlobal.providerId;
+
+      if (modelsMatch && thinkingMatch && providerMatch) {
+        onModelChange(null); // Clear override
+      } else {
+        onModelChange(entry); // Set override
+      }
+    } else {
+      onModelChange(entry);
+    }
+  };
+
+  // Size classes for icon variant
+  const sizeClasses = {
+    sm: 'h-6 w-6',
+    md: 'h-8 w-8',
+    lg: 'h-10 w-10',
+  };
+
+  // For icon variant, wrap PhaseModelSelector and hide text/chevron with CSS
+  if (variant === 'icon') {
+    return (
+      <div className={cn('relative inline-block', className)}>
+        <div className="relative [&_button>span]:hidden [&_button>svg:last-child]:hidden [&_button]:p-0 [&_button]:min-w-0 [&_button]:w-auto [&_button]:h-auto [&_button]:border-0 [&_button]:bg-transparent">
+          <PhaseModelSelector
+            value={currentModelEntry}
+            onChange={handleChange}
+            compact
+            triggerClassName={cn(
+              'relative rounded-md',
+              'transition-colors duration-150',
+              'text-muted-foreground hover:text-foreground',
+              'hover:bg-accent/50',
+              sizeClasses[size],
+              className
+            )}
+            disabled={false}
+            align="end"
+          />
+        </div>
+        {isOverridden && (
+          <div className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-brand-500 rounded-full z-10 pointer-events-none" />
+        )}
+      </div>
+    );
+  }
+
+  // For button and inline variants, use PhaseModelSelector in compact mode
+  return (
+    <div className={cn('relative', className)}>
+      <PhaseModelSelector
+        value={currentModelEntry}
+        onChange={handleChange}
+        compact
+        triggerClassName={variant === 'button' ? className : undefined}
+        disabled={false}
+      />
+      {isOverridden && (
+        <div className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-brand-500 rounded-full z-10" />
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/shared/use-model-override.ts b/temp_repo/apps/ui/src/components/shared/use-model-override.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4d591752cf6b15f7148e19afb0c139bbc54eb3fc
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/shared/use-model-override.ts
@@ -0,0 +1,109 @@
+import { useState, useCallback, useMemo } from 'react';
+import { useAppStore } from '@/store/app-store';
+import type { ModelId, PhaseModelKey, PhaseModelEntry } from '@automaker/types';
+import { DEFAULT_PHASE_MODELS } from '@automaker/types';
+
+export interface UseModelOverrideOptions {
+  /** Which phase this override is for */
+  phase: PhaseModelKey;
+  /** Initial override value (optional) */
+  initialOverride?: PhaseModelEntry | null;
+}
+
+export interface UseModelOverrideResult {
+  /** The effective model entry (override or global default) */
+  effectiveModelEntry: PhaseModelEntry;
+  /** The effective model string (for backward compatibility with APIs that only accept strings) */
+  effectiveModel: ModelId;
+  /** Whether the model is currently overridden */
+  isOverridden: boolean;
+  /** Set a model override */
+  setOverride: (entry: PhaseModelEntry | null) => void;
+  /** Clear the override and use global default */
+  clearOverride: () => void;
+  /** The global default for this phase */
+  globalDefault: PhaseModelEntry;
+  /** The current override value (null if not overridden) */
+  override: PhaseModelEntry | null;
+}
+
+/**
+ * Normalize PhaseModelEntry or string to PhaseModelEntry
+ * Handles undefined/null gracefully (e.g., when phaseModels from server settings
+ * is missing a recently-added phase key)
+ */
+function normalizeEntry(entry: PhaseModelEntry | string | undefined | null): PhaseModelEntry {
+  if (!entry) {
+    return { model: 'claude-sonnet' as ModelId };
+  }
+  if (typeof entry === 'string') {
+    return { model: entry as ModelId };
+  }
+  return entry;
+}
+
+/**
+ * Hook for managing model overrides per phase
+ *
+ * Provides a simple way to allow users to override the global phase model
+ * for a specific run or context. Now supports PhaseModelEntry with thinking levels.
+ *
+ * @example
+ * ```tsx
+ * function EnhanceDialog() {
+ *   const { effectiveModelEntry, isOverridden, setOverride, clearOverride } = useModelOverride({
+ *     phase: 'enhancementModel',
+ *   });
+ *
+ *   return (
+ *     <ModelOverrideTrigger
+ *       currentModelEntry={effectiveModelEntry}
+ *       onModelChange={setOverride}
+ *       phase="enhancementModel"
+ *       isOverridden={isOverridden}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export function useModelOverride({
+  phase,
+  initialOverride = null,
+}: UseModelOverrideOptions): UseModelOverrideResult {
+  const { phaseModels } = useAppStore();
+  const [override, setOverrideState] = useState<PhaseModelEntry | null>(
+    initialOverride ? normalizeEntry(initialOverride) : null
+  );
+
+  // Normalize global default to PhaseModelEntry, with fallback to DEFAULT_PHASE_MODELS
+  // This handles cases where settings haven't been migrated to include new phase models
+  const globalDefault = normalizeEntry(phaseModels[phase] ?? DEFAULT_PHASE_MODELS[phase]);
+
+  const effectiveModelEntry = useMemo(() => {
+    return override ?? globalDefault;
+  }, [override, globalDefault]);
+
+  const effectiveModel = useMemo(() => {
+    return effectiveModelEntry.model;
+  }, [effectiveModelEntry]);
+
+  const isOverridden = override !== null;
+
+  const setOverride = useCallback((entry: PhaseModelEntry | null) => {
+    setOverrideState(entry ? normalizeEntry(entry) : null);
+  }, []);
+
+  const clearOverride = useCallback(() => {
+    setOverrideState(null);
+  }, []);
+
+  return {
+    effectiveModelEntry,
+    effectiveModel,
+    isOverridden,
+    setOverride,
+    clearOverride,
+    globalDefault,
+    override,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/splash-screen.tsx b/temp_repo/apps/ui/src/components/splash-screen.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..602b697f26d75502a175f6ba02f4e4d7fdbabfd2
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/splash-screen.tsx
@@ -0,0 +1,282 @@
+import { useEffect, useState, useMemo } from 'react';
+
+const TOTAL_DURATION = 2300; // Total animation duration in ms (tightened from 4000)
+const LOGO_ENTER_DURATION = 500; // Tightened from 1200
+const PARTICLES_ENTER_DELAY = 100; // Tightened from 400
+const EXIT_START = 1800; // Adjusted for shorter duration
+
+interface Particle {
+  id: number;
+  x: number;
+  y: number;
+  size: number;
+  delay: number;
+  angle: number;
+  distance: number;
+  opacity: number;
+  floatDuration: number;
+}
+
+function generateParticles(count: number): Particle[] {
+  return Array.from({ length: count }, (_, i) => {
+    const angle = (i / count) * 360 + Math.random() * 30;
+    const distance = 60 + Math.random() * 80; // Increased spread
+    return {
+      id: i,
+      x: Math.cos((angle * Math.PI) / 180) * distance,
+      y: Math.sin((angle * Math.PI) / 180) * distance,
+      size: 3 + Math.random() * 6, // Slightly smaller range for more subtle look
+      delay: Math.random() * 400,
+      angle,
+      distance: 300 + Math.random() * 200,
+      opacity: 0.4 + Math.random() * 0.6,
+      floatDuration: 3000 + Math.random() * 4000,
+    };
+  });
+}
+
+export function SplashScreen({ onComplete }: { onComplete: () => void }) {
+  const [phase, setPhase] = useState<'enter' | 'hold' | 'exit' | 'done'>('enter');
+
+  const particles = useMemo(() => generateParticles(50), []);
+
+  useEffect(() => {
+    const timers: NodeJS.Timeout[] = [];
+
+    // Phase transitions
+    timers.push(setTimeout(() => setPhase('hold'), LOGO_ENTER_DURATION));
+    timers.push(setTimeout(() => setPhase('exit'), EXIT_START));
+    timers.push(
+      setTimeout(() => {
+        setPhase('done');
+        onComplete();
+      }, TOTAL_DURATION)
+    );
+
+    return () => timers.forEach(clearTimeout);
+  }, [onComplete]);
+
+  if (phase === 'done') return null;
+
+  return (
+    <div
+      className={`
+        fixed inset-0 z-[9999] flex items-center justify-center
+        bg-background
+        transition-opacity duration-500 ease-out
+        ${phase === 'exit' ? 'opacity-0' : 'opacity-100'}
+      `}
+      style={{
+        pointerEvents: phase === 'exit' ? 'none' : 'auto',
+      }}
+    >
+      <style>{`
+        @keyframes spin-slow {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        @keyframes spin-slow-reverse {
+          from { transform: rotate(360deg); }
+          to { transform: rotate(0deg); }
+        }
+        @keyframes float {
+          0%, 100% { transform: translate(0, 0); }
+          50% { transform: translate(6px, -6px); }
+        }
+      `}</style>
+
+      {/* Subtle gradient background */}
+      <div
+        className="absolute inset-0 opacity-30"
+        style={{
+          background: 'radial-gradient(circle at center, var(--brand-500) 0%, transparent 70%)',
+        }}
+      />
+
+      {/* Particle container 1 - Clockwise */}
+      <div
+        className="absolute inset-0 flex items-center justify-center overflow-hidden"
+        style={{ animation: 'spin-slow 60s linear infinite' }}
+      >
+        {particles.slice(0, 25).map((particle) => (
+          <div
+            key={particle.id}
+            className="absolute"
+            style={{
+              transform:
+                phase === 'exit'
+                  ? `translate(${Math.cos((particle.angle * Math.PI) / 180) * particle.distance}px, ${Math.sin((particle.angle * Math.PI) / 180) * particle.distance}px)`
+                  : `translate(${particle.x}px, ${particle.y}px)`,
+              transition:
+                phase === 'enter'
+                  ? `all 600ms ease-out ${PARTICLES_ENTER_DELAY + particle.delay}ms`
+                  : phase === 'exit'
+                    ? `all 800ms cubic-bezier(0.4, 0, 1, 1) ${particle.delay * 0.3}ms`
+                    : 'all 300ms ease-out',
+            }}
+          >
+            <div
+              className="rounded-full"
+              style={{
+                width: particle.size,
+                height: particle.size,
+                background: `linear-gradient(135deg, var(--brand-400), var(--brand-600))`,
+                boxShadow: `0 0 ${particle.size * 2}px var(--brand-500)`,
+                opacity: phase === 'enter' ? 0 : phase === 'hold' ? particle.opacity : 0,
+                transform: phase === 'exit' ? 'scale(0)' : 'scale(1)',
+                animation: `float ${particle.floatDuration}ms ease-in-out infinite`,
+                transition: 'opacity 300ms ease-out, transform 300ms ease-out',
+              }}
+            />
+          </div>
+        ))}
+      </div>
+
+      {/* Particle container 2 - Counter-Clockwise */}
+      <div
+        className="absolute inset-0 flex items-center justify-center overflow-hidden"
+        style={{ animation: 'spin-slow-reverse 75s linear infinite' }}
+      >
+        {particles.slice(25).map((particle) => (
+          <div
+            key={particle.id}
+            className="absolute"
+            style={{
+              transform:
+                phase === 'exit'
+                  ? `translate(${Math.cos((particle.angle * Math.PI) / 180) * particle.distance}px, ${Math.sin((particle.angle * Math.PI) / 180) * particle.distance}px)`
+                  : `translate(${particle.x}px, ${particle.y}px)`,
+              transition:
+                phase === 'enter'
+                  ? `all 600ms ease-out ${PARTICLES_ENTER_DELAY + particle.delay}ms`
+                  : phase === 'exit'
+                    ? `all 800ms cubic-bezier(0.4, 0, 1, 1) ${particle.delay * 0.3}ms`
+                    : 'all 300ms ease-out',
+            }}
+          >
+            <div
+              className="rounded-full"
+              style={{
+                width: particle.size,
+                height: particle.size,
+                background: `linear-gradient(135deg, var(--brand-400), var(--brand-600))`,
+                boxShadow: `0 0 ${particle.size * 2}px var(--brand-500)`,
+                opacity: phase === 'enter' ? 0 : phase === 'hold' ? particle.opacity : 0,
+                transform: phase === 'exit' ? 'scale(0)' : 'scale(1)',
+                animation: `float ${particle.floatDuration}ms ease-in-out infinite`,
+                animationDelay: `${particle.delay}ms`,
+                transition: 'opacity 300ms ease-out, transform 300ms ease-out',
+              }}
+            />
+          </div>
+        ))}
+      </div>
+
+      {/* Logo container */}
+      <div
+        className="relative z-10"
+        style={{
+          opacity: phase === 'enter' ? 0 : phase === 'exit' ? 0 : 1,
+          transform:
+            phase === 'enter'
+              ? 'scale(0.3) rotate(-20deg)'
+              : phase === 'exit'
+                ? 'scale(2.5) translateY(-100px)'
+                : 'scale(1) rotate(0deg)',
+          transition:
+            phase === 'enter'
+              ? `all ${LOGO_ENTER_DURATION}ms cubic-bezier(0.34, 1.56, 0.64, 1)`
+              : phase === 'exit'
+                ? 'all 600ms cubic-bezier(0.4, 0, 1, 1)'
+                : 'all 300ms ease-out',
+        }}
+      >
+        {/* Glow effect behind logo */}
+        <div
+          className="absolute inset-0 blur-3xl"
+          style={{
+            background: 'radial-gradient(circle, var(--brand-500) 0%, transparent 70%)',
+            transform: 'scale(2.5)',
+            opacity: phase === 'hold' ? 0.6 : 0,
+            transition: 'opacity 500ms ease-out',
+          }}
+        />
+
+        {/* The logo */}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 256 256"
+          role="img"
+          aria-label="Automaker Logo"
+          className="relative z-10"
+          style={{
+            width: 120,
+            height: 120,
+            filter: 'drop-shadow(0 0 30px var(--brand-500))',
+          }}
+        >
+          <defs>
+            <linearGradient
+              id="splash-bg"
+              x1="0"
+              y1="0"
+              x2="256"
+              y2="256"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0%" style={{ stopColor: 'var(--brand-400)' }} />
+              <stop offset="100%" style={{ stopColor: 'var(--brand-600)' }} />
+            </linearGradient>
+            <filter id="splash-shadow" x="-20%" y="-20%" width="140%" height="140%">
+              <feDropShadow
+                dx="0"
+                dy="4"
+                stdDeviation="4"
+                floodColor="#000000"
+                floodOpacity="0.25"
+              />
+            </filter>
+          </defs>
+          <rect x="16" y="16" width="224" height="224" rx="56" fill="url(#splash-bg)" />
+          <g
+            fill="none"
+            stroke="#FFFFFF"
+            strokeWidth="20"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            filter="url(#splash-shadow)"
+          >
+            <path d="M92 92 L52 128 L92 164" />
+            <path d="M144 72 L116 184" />
+            <path d="M164 92 L204 128 L164 164" />
+          </g>
+        </svg>
+      </div>
+
+      {/* Automaker text that fades in below the logo */}
+      <div
+        className="absolute flex items-center gap-1"
+        style={{
+          top: 'calc(50% + 80px)',
+          opacity: phase === 'enter' ? 0 : phase === 'exit' ? 0 : 1,
+          transform:
+            phase === 'enter'
+              ? 'translateY(20px)'
+              : phase === 'exit'
+                ? 'translateY(-30px) scale(1.2)'
+                : 'translateY(0)',
+          transition:
+            phase === 'enter'
+              ? `all 600ms ease-out ${LOGO_ENTER_DURATION - 200}ms`
+              : phase === 'exit'
+                ? 'all 500ms cubic-bezier(0.4, 0, 1, 1)'
+                : 'all 300ms ease-out',
+        }}
+      >
+        <span className="font-bold text-foreground text-4xl tracking-tight leading-none">
+          automaker<span className="text-brand-500">.</span>
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/accordion.tsx b/temp_repo/apps/ui/src/components/ui/accordion.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3cb256b3db71b3aab479435fdeffcd4706e8e309
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/accordion.tsx
@@ -0,0 +1,228 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+
+import * as React from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+type AccordionType = 'single' | 'multiple';
+
+interface AccordionContextValue {
+  type: AccordionType;
+  value: string | string[];
+  onValueChange: (value: string) => void;
+  collapsible?: boolean;
+}
+
+const AccordionContext = React.createContext<AccordionContextValue | null>(null);
+
+interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  type?: 'single' | 'multiple';
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  collapsible?: boolean;
+}
+
+const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  (
+    {
+      type = 'single',
+      value,
+      defaultValue,
+      onValueChange,
+      collapsible = false,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = React.useState<string | string[]>(() => {
+      if (value !== undefined) return value;
+      if (defaultValue !== undefined) return defaultValue;
+      return type === 'single' ? '' : [];
+    });
+
+    const currentValue = value !== undefined ? value : internalValue;
+
+    const handleValueChange = React.useCallback(
+      (itemValue: string) => {
+        let newValue: string | string[];
+
+        if (type === 'single') {
+          if (currentValue === itemValue && collapsible) {
+            newValue = '';
+          } else if (currentValue === itemValue && !collapsible) {
+            return;
+          } else {
+            newValue = itemValue;
+          }
+        } else {
+          const currentArray = Array.isArray(currentValue)
+            ? currentValue
+            : [currentValue].filter(Boolean);
+          if (currentArray.includes(itemValue)) {
+            newValue = currentArray.filter((v) => v !== itemValue);
+          } else {
+            newValue = [...currentArray, itemValue];
+          }
+        }
+
+        if (value === undefined) {
+          setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+      },
+      [type, currentValue, collapsible, value, onValueChange]
+    );
+
+    const contextValue = React.useMemo(
+      () => ({
+        type,
+        value: currentValue,
+        onValueChange: handleValueChange,
+        collapsible,
+      }),
+      [type, currentValue, handleValueChange, collapsible]
+    );
+
+    return (
+      <AccordionContext.Provider value={contextValue}>
+        <div ref={ref} data-slot="accordion" className={cn('w-full', className)} {...props}>
+          {children}
+        </div>
+      </AccordionContext.Provider>
+    );
+  }
+);
+Accordion.displayName = 'Accordion';
+
+interface AccordionItemContextValue {
+  value: string;
+  isOpen: boolean;
+}
+
+const AccordionItemContext = React.createContext<AccordionItemContextValue | null>(null);
+
+interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+
+const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
+  ({ className, value, children, ...props }, ref) => {
+    const accordionContext = React.useContext(AccordionContext);
+
+    if (!accordionContext) {
+      throw new Error('AccordionItem must be used within an Accordion');
+    }
+
+    const isOpen = Array.isArray(accordionContext.value)
+      ? accordionContext.value.includes(value)
+      : accordionContext.value === value;
+
+    const contextValue = React.useMemo(() => ({ value, isOpen }), [value, isOpen]);
+
+    return (
+      <AccordionItemContext.Provider value={contextValue}>
+        <div
+          ref={ref}
+          data-slot="accordion-item"
+          data-state={isOpen ? 'open' : 'closed'}
+          className={cn('border-b border-border', className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </AccordionItemContext.Provider>
+    );
+  }
+);
+AccordionItem.displayName = 'AccordionItem';
+
+interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+const AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionTriggerProps>(
+  ({ className, children, ...props }, ref) => {
+    const accordionContext = React.useContext(AccordionContext);
+    const itemContext = React.useContext(AccordionItemContext);
+
+    if (!accordionContext || !itemContext) {
+      throw new Error('AccordionTrigger must be used within an AccordionItem');
+    }
+
+    const { onValueChange } = accordionContext;
+    const { value, isOpen } = itemContext;
+
+    return (
+      <div data-slot="accordion-header" className="flex">
+        <button
+          ref={ref}
+          type="button"
+          data-slot="accordion-trigger"
+          data-state={isOpen ? 'open' : 'closed'}
+          aria-expanded={isOpen}
+          onClick={() => onValueChange(value)}
+          className={cn(
+            'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+        </button>
+      </div>
+    );
+  }
+);
+AccordionTrigger.displayName = 'AccordionTrigger';
+
+interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const AccordionContent = React.forwardRef<HTMLDivElement, AccordionContentProps>(
+  ({ className, children, ...props }, ref) => {
+    const itemContext = React.useContext(AccordionItemContext);
+    const contentRef = React.useRef<HTMLDivElement>(null);
+    const [height, setHeight] = React.useState<number | undefined>(undefined);
+
+    if (!itemContext) {
+      throw new Error('AccordionContent must be used within an AccordionItem');
+    }
+
+    const { isOpen } = itemContext;
+
+    React.useEffect(() => {
+      if (contentRef.current) {
+        const resizeObserver = new ResizeObserver((entries) => {
+          for (const entry of entries) {
+            setHeight(entry.contentRect.height);
+          }
+        });
+        resizeObserver.observe(contentRef.current);
+        return () => resizeObserver.disconnect();
+      }
+    }, []);
+
+    return (
+      <div
+        data-slot="accordion-content"
+        data-state={isOpen ? 'open' : 'closed'}
+        className="overflow-hidden text-sm transition-all duration-200 ease-out"
+        style={{
+          height: isOpen ? (height !== undefined ? `${height}px` : 'auto') : 0,
+          opacity: isOpen ? 1 : 0,
+        }}
+        {...props}
+      >
+        <div ref={contentRef}>
+          <div ref={ref} className={cn('pb-4 pt-0', className)}>
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+AccordionContent.displayName = 'AccordionContent';
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/temp_repo/apps/ui/src/components/ui/ansi-output.tsx b/temp_repo/apps/ui/src/components/ui/ansi-output.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..83b3c4abd021898006c92b2e11d0ba449ef5601f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/ansi-output.tsx
@@ -0,0 +1,276 @@
+import { useMemo } from 'react';
+import { cn } from '@/lib/utils';
+
+interface AnsiOutputProps {
+  text: string;
+  className?: string;
+}
+
+// ANSI color codes to CSS color mappings
+const ANSI_COLORS: Record<number, string> = {
+  // Standard colors
+  30: '#6b7280', // Black (use gray for visibility on dark bg)
+  31: '#ef4444', // Red
+  32: '#22c55e', // Green
+  33: '#eab308', // Yellow
+  34: '#3b82f6', // Blue
+  35: '#a855f7', // Magenta
+  36: '#06b6d4', // Cyan
+  37: '#d1d5db', // White
+  // Bright colors
+  90: '#9ca3af', // Bright Black (Gray)
+  91: '#f87171', // Bright Red
+  92: '#4ade80', // Bright Green
+  93: '#facc15', // Bright Yellow
+  94: '#60a5fa', // Bright Blue
+  95: '#c084fc', // Bright Magenta
+  96: '#22d3ee', // Bright Cyan
+  97: '#ffffff', // Bright White
+};
+
+const ANSI_BG_COLORS: Record<number, string> = {
+  40: 'transparent',
+  41: '#ef4444',
+  42: '#22c55e',
+  43: '#eab308',
+  44: '#3b82f6',
+  45: '#a855f7',
+  46: '#06b6d4',
+  47: '#f3f4f6',
+  // Bright backgrounds
+  100: '#374151',
+  101: '#f87171',
+  102: '#4ade80',
+  103: '#facc15',
+  104: '#60a5fa',
+  105: '#c084fc',
+  106: '#22d3ee',
+  107: '#ffffff',
+};
+
+interface TextSegment {
+  text: string;
+  style: {
+    color?: string;
+    backgroundColor?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+    textDecoration?: string;
+  };
+}
+
+/**
+ * Strip hyperlink escape sequences (OSC 8)
+ * Format: ESC]8;;url ESC\ text ESC]8;; ESC\
+ */
+function stripHyperlinks(text: string): string {
+  // Remove OSC 8 hyperlink sequences
+  // eslint-disable-next-line no-control-regex
+  return text.replace(/\x1b\]8;;[^\x07\x1b]*(?:\x07|\x1b\\)/g, '');
+}
+
+/**
+ * Strip other OSC sequences (title, etc.)
+ */
+function stripOtherOSC(text: string): string {
+  // Remove OSC sequences (ESC ] ... BEL or ESC ] ... ST)
+  // eslint-disable-next-line no-control-regex
+  return text.replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, '');
+}
+
+function parseAnsi(text: string): TextSegment[] {
+  // Pre-process: strip hyperlinks and other OSC sequences
+  let processedText = stripHyperlinks(text);
+  processedText = stripOtherOSC(processedText);
+
+  const segments: TextSegment[] = [];
+
+  // Match ANSI escape sequences: ESC[...m (SGR - Select Graphic Rendition)
+  // Also handle ESC[K (erase line) and other CSI sequences by stripping them
+  // The ESC character can be \x1b, \033, \u001b
+  // eslint-disable-next-line no-control-regex
+  const ansiRegex = /\x1b\[([0-9;]*)([a-zA-Z])/g;
+
+  let currentStyle: TextSegment['style'] = {};
+  let lastIndex = 0;
+  let match;
+
+  while ((match = ansiRegex.exec(processedText)) !== null) {
+    // Add text before this escape sequence
+    if (match.index > lastIndex) {
+      const content = processedText.slice(lastIndex, match.index);
+      if (content) {
+        segments.push({ text: content, style: { ...currentStyle } });
+      }
+    }
+
+    const params = match[1];
+    const command = match[2];
+
+    // Only process 'm' command (SGR - graphics/color)
+    // Ignore other commands like K (erase), H (cursor), J (clear), etc.
+    if (command === 'm') {
+      // Parse the escape sequence codes
+      const codes = params ? params.split(';').map((c) => parseInt(c, 10) || 0) : [0];
+
+      for (let i = 0; i < codes.length; i++) {
+        const code = codes[i];
+
+        if (code === 0) {
+          // Reset all attributes
+          currentStyle = {};
+        } else if (code === 1) {
+          // Bold
+          currentStyle.fontWeight = 'bold';
+        } else if (code === 2) {
+          // Dim/faint
+          currentStyle.color = 'var(--muted-foreground)';
+        } else if (code === 3) {
+          // Italic
+          currentStyle.fontStyle = 'italic';
+        } else if (code === 4) {
+          // Underline
+          currentStyle.textDecoration = 'underline';
+        } else if (code === 22) {
+          // Normal intensity (not bold, not dim)
+          currentStyle.fontWeight = undefined;
+        } else if (code === 23) {
+          // Not italic
+          currentStyle.fontStyle = undefined;
+        } else if (code === 24) {
+          // Not underlined
+          currentStyle.textDecoration = undefined;
+        } else if (code === 38) {
+          // Extended foreground color
+          if (codes[i + 1] === 5 && codes[i + 2] !== undefined) {
+            // 256 color mode: 38;5;n
+            const colorIndex = codes[i + 2];
+            currentStyle.color = get256Color(colorIndex);
+            i += 2;
+          } else if (codes[i + 1] === 2 && codes[i + 4] !== undefined) {
+            // RGB mode: 38;2;r;g;b
+            const r = codes[i + 2];
+            const g = codes[i + 3];
+            const b = codes[i + 4];
+            currentStyle.color = `rgb(${r}, ${g}, ${b})`;
+            i += 4;
+          }
+        } else if (code === 48) {
+          // Extended background color
+          if (codes[i + 1] === 5 && codes[i + 2] !== undefined) {
+            // 256 color mode: 48;5;n
+            const colorIndex = codes[i + 2];
+            currentStyle.backgroundColor = get256Color(colorIndex);
+            i += 2;
+          } else if (codes[i + 1] === 2 && codes[i + 4] !== undefined) {
+            // RGB mode: 48;2;r;g;b
+            const r = codes[i + 2];
+            const g = codes[i + 3];
+            const b = codes[i + 4];
+            currentStyle.backgroundColor = `rgb(${r}, ${g}, ${b})`;
+            i += 4;
+          }
+        } else if (ANSI_COLORS[code]) {
+          // Standard foreground color (30-37, 90-97)
+          currentStyle.color = ANSI_COLORS[code];
+        } else if (ANSI_BG_COLORS[code]) {
+          // Standard background color (40-47, 100-107)
+          currentStyle.backgroundColor = ANSI_BG_COLORS[code];
+        } else if (code === 39) {
+          // Default foreground
+          currentStyle.color = undefined;
+        } else if (code === 49) {
+          // Default background
+          currentStyle.backgroundColor = undefined;
+        }
+      }
+    }
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  // Add remaining text after last escape sequence
+  if (lastIndex < processedText.length) {
+    const content = processedText.slice(lastIndex);
+    if (content) {
+      segments.push({ text: content, style: { ...currentStyle } });
+    }
+  }
+
+  // If no segments were created (no ANSI codes), return the whole text
+  if (segments.length === 0 && processedText) {
+    segments.push({ text: processedText, style: {} });
+  }
+
+  return segments;
+}
+
+/**
+ * Convert 256-color palette index to CSS color
+ */
+function get256Color(index: number): string {
+  // 0-15: Standard colors
+  if (index < 16) {
+    const standardColors = [
+      '#000000',
+      '#cd0000',
+      '#00cd00',
+      '#cdcd00',
+      '#0000ee',
+      '#cd00cd',
+      '#00cdcd',
+      '#e5e5e5',
+      '#7f7f7f',
+      '#ff0000',
+      '#00ff00',
+      '#ffff00',
+      '#5c5cff',
+      '#ff00ff',
+      '#00ffff',
+      '#ffffff',
+    ];
+    return standardColors[index];
+  }
+
+  // 16-231: 6x6x6 color cube
+  if (index < 232) {
+    const n = index - 16;
+    const b = n % 6;
+    const g = Math.floor(n / 6) % 6;
+    const r = Math.floor(n / 36);
+    const toHex = (v: number) => (v === 0 ? 0 : 55 + v * 40);
+    return `rgb(${toHex(r)}, ${toHex(g)}, ${toHex(b)})`;
+  }
+
+  // 232-255: Grayscale
+  const gray = 8 + (index - 232) * 10;
+  return `rgb(${gray}, ${gray}, ${gray})`;
+}
+
+export function AnsiOutput({ text, className }: AnsiOutputProps) {
+  const segments = useMemo(() => parseAnsi(text), [text]);
+
+  return (
+    <pre
+      className={cn(
+        'font-mono text-xs whitespace-pre-wrap break-words text-muted-foreground',
+        className
+      )}
+    >
+      {segments.map((segment, index) => (
+        <span
+          key={index}
+          style={{
+            color: segment.style.color,
+            backgroundColor: segment.style.backgroundColor,
+            fontWeight: segment.style.fontWeight,
+            fontStyle: segment.style.fontStyle,
+            textDecoration: segment.style.textDecoration,
+          }}
+        >
+          {segment.text}
+        </span>
+      ))}
+    </pre>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/app-error-boundary.tsx b/temp_repo/apps/ui/src/components/ui/app-error-boundary.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d1886c826c954d60097f5b8c02cbe062108412de
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/app-error-boundary.tsx
@@ -0,0 +1,205 @@
+import { Component, type ReactNode, type ErrorInfo } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+
+const logger = createLogger('AppErrorBoundary');
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  isCrashLoop: boolean;
+}
+
+/** Key used to track recent crash timestamps for crash loop detection */
+const CRASH_TIMESTAMPS_KEY = 'automaker-crash-timestamps';
+/** Number of crashes within the time window that constitutes a crash loop */
+const CRASH_LOOP_THRESHOLD = 3;
+/** Time window in ms for crash loop detection (30 seconds) */
+const CRASH_LOOP_WINDOW_MS = 30_000;
+
+/**
+ * Root-level error boundary for the entire application.
+ *
+ * Catches uncaught React errors that would otherwise show TanStack Router's
+ * default "Something went wrong!" screen with a raw error message.
+ *
+ * Provides a user-friendly error screen with a reload button to recover.
+ * This is especially important for transient errors during initial app load
+ * (e.g., race conditions during auth/hydration on fresh browser sessions).
+ *
+ * Includes crash loop detection: if the app crashes 3+ times within 30 seconds,
+ * the UI cache is automatically cleared to break loops caused by stale cached
+ * worktree paths or other corrupt persisted state.
+ */
+export class AppErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null, isCrashLoop: false };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<State> {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    logger.error('Uncaught application error:', {
+      error: error.message,
+      stack: error.stack,
+      componentStack: errorInfo.componentStack,
+    });
+
+    // Track crash timestamps to detect crash loops.
+    // If the app crashes multiple times in quick succession, it's likely due to
+    // stale cached data (e.g., worktree paths that no longer exist on disk).
+    try {
+      const now = Date.now();
+      const raw = sessionStorage.getItem(CRASH_TIMESTAMPS_KEY);
+      const timestamps: number[] = raw ? JSON.parse(raw) : [];
+      timestamps.push(now);
+      // Keep only timestamps within the detection window
+      const recent = timestamps.filter((t) => now - t < CRASH_LOOP_WINDOW_MS);
+      sessionStorage.setItem(CRASH_TIMESTAMPS_KEY, JSON.stringify(recent));
+
+      if (recent.length >= CRASH_LOOP_THRESHOLD) {
+        logger.error(
+          `Crash loop detected (${recent.length} crashes in ${CRASH_LOOP_WINDOW_MS}ms) — clearing UI cache`
+        );
+        // Auto-clear the UI cache to break the loop
+        localStorage.removeItem('automaker-ui-cache');
+        sessionStorage.removeItem(CRASH_TIMESTAMPS_KEY);
+        this.setState({ isCrashLoop: true });
+      }
+    } catch {
+      // Storage may be unavailable — ignore
+    }
+  }
+
+  handleReload = () => {
+    window.location.reload();
+  };
+
+  handleClearCacheAndReload = () => {
+    // Clear the UI cache store that persists worktree selections and other UI state.
+    // This breaks crash loops caused by stale worktree paths that no longer exist on disk.
+    try {
+      localStorage.removeItem('automaker-ui-cache');
+    } catch {
+      // localStorage may be unavailable in some contexts
+    }
+    window.location.reload();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          className="flex h-screen w-full flex-col items-center justify-center gap-6 bg-background p-6 text-foreground"
+          data-testid="app-error-boundary"
+        >
+          {/* Logo matching the app shell in index.html */}
+          <svg
+            className="h-14 w-14 opacity-90"
+            viewBox="0 0 256 256"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <rect
+              className="fill-foreground/[0.08]"
+              x="16"
+              y="16"
+              width="224"
+              height="224"
+              rx="56"
+            />
+            <g
+              className="stroke-foreground/70"
+              fill="none"
+              strokeWidth="20"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M92 92 L52 128 L92 164" />
+              <path d="M144 72 L116 184" />
+              <path d="M164 92 L204 128 L164 164" />
+            </g>
+          </svg>
+
+          <div className="text-center space-y-2">
+            <h1 className="text-xl font-semibold">Something went wrong</h1>
+            <p className="text-sm text-muted-foreground max-w-md">
+              {this.state.isCrashLoop
+                ? 'The application crashed repeatedly, likely due to stale cached data. The cache has been cleared automatically. Reload to continue.'
+                : 'The application encountered an unexpected error. This is usually temporary and can be resolved by reloading the page.'}
+            </p>
+          </div>
+
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={this.handleReload}
+              className="inline-flex items-center gap-2 rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <svg
+                className="h-4 w-4"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+              >
+                <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                <path d="M3 3v5h5" />
+                <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+                <path d="M16 21h5v-5" />
+              </svg>
+              Reload Page
+            </button>
+
+            <button
+              type="button"
+              onClick={this.handleClearCacheAndReload}
+              className="inline-flex items-center gap-2 rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-muted-foreground shadow-sm transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <svg
+                className="h-4 w-4"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+              >
+                <path d="M3 6h18" />
+                <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+                <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+              </svg>
+              Clear Cache &amp; Reload
+            </button>
+          </div>
+
+          {/* Collapsible technical details for debugging */}
+          {this.state.error && (
+            <details className="text-xs text-muted-foreground max-w-lg w-full">
+              <summary className="cursor-pointer hover:text-foreground text-center">
+                Technical details
+              </summary>
+              <pre className="mt-2 p-3 bg-muted/50 rounded-md text-left overflow-auto max-h-32 border border-border">
+                {this.state.error.stack || this.state.error.message}
+              </pre>
+            </details>
+          )}
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/temp_repo/apps/ui/src/components/ui/autocomplete.tsx b/temp_repo/apps/ui/src/components/ui/autocomplete.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c12aa0731852f1bed43133d6b09e47c2492fdbb3
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/autocomplete.tsx
@@ -0,0 +1,205 @@
+import * as React from 'react';
+import { Check, ChevronsUpDown, LucideIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+
+export interface AutocompleteOption {
+  value: string;
+  label?: string;
+  badge?: string;
+  isDefault?: boolean;
+}
+
+interface AutocompleteProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: (string | AutocompleteOption)[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  className?: string;
+  disabled?: boolean;
+  error?: boolean;
+  icon?: LucideIcon;
+  allowCreate?: boolean;
+  createLabel?: (value: string) => string;
+  'data-testid'?: string;
+  itemTestIdPrefix?: string;
+}
+
+function normalizeOption(opt: string | AutocompleteOption): AutocompleteOption {
+  if (typeof opt === 'string') {
+    return { value: opt, label: opt };
+  }
+  return { ...opt, label: opt.label ?? opt.value };
+}
+
+export function Autocomplete({
+  value,
+  onChange,
+  options,
+  placeholder = 'Select an option...',
+  searchPlaceholder = 'Search...',
+  emptyMessage = 'No results found.',
+  className,
+  disabled = false,
+  error = false,
+  icon: Icon,
+  allowCreate = false,
+  createLabel = (v) => `Create "${v}"`,
+  'data-testid': testId,
+  itemTestIdPrefix = 'option',
+}: AutocompleteProps) {
+  const [open, setOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState('');
+  const [triggerWidth, setTriggerWidth] = React.useState<number>(0);
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+
+  const normalizedOptions = React.useMemo(() => options.map(normalizeOption), [options]);
+
+  // Update trigger width when component mounts or value changes
+  React.useEffect(() => {
+    if (triggerRef.current) {
+      const updateWidth = () => {
+        setTriggerWidth(triggerRef.current?.offsetWidth || 0);
+      };
+
+      updateWidth();
+
+      const resizeObserver = new ResizeObserver(updateWidth);
+      resizeObserver.observe(triggerRef.current);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [value]);
+
+  // Filter options based on input
+  const filteredOptions = React.useMemo(() => {
+    if (!inputValue) return normalizedOptions;
+    const lower = inputValue.toLowerCase();
+    return normalizedOptions.filter(
+      (opt) => opt.value.toLowerCase().includes(lower) || opt.label?.toLowerCase().includes(lower)
+    );
+  }, [normalizedOptions, inputValue]);
+
+  // Check if user typed a new value that doesn't exist
+  const isNewValue =
+    allowCreate &&
+    inputValue.trim() &&
+    !normalizedOptions.some((opt) => opt.value.toLowerCase() === inputValue.toLowerCase());
+
+  // Get display value
+  const displayValue = React.useMemo(() => {
+    if (!value) return null;
+    const found = normalizedOptions.find((opt) => opt.value === value);
+    return found?.label ?? value;
+  }, [value, normalizedOptions]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          ref={triggerRef}
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            'w-full justify-between',
+            Icon && 'font-mono text-sm',
+            error && 'border-destructive focus-visible:ring-destructive',
+            className
+          )}
+          data-testid={testId}
+        >
+          <span className="flex items-center gap-2 truncate">
+            {Icon && <Icon className="w-4 h-4 shrink-0 text-muted-foreground" />}
+            {displayValue || placeholder}
+          </span>
+          <ChevronsUpDown className="opacity-50 shrink-0" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="p-0"
+        style={{
+          width: Math.max(triggerWidth, 200),
+        }}
+        data-testid={testId ? `${testId}-list` : undefined}
+        onWheel={(e) => e.stopPropagation()}
+        onTouchMove={(e) => e.stopPropagation()}
+      >
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder={searchPlaceholder}
+            className="h-9"
+            value={inputValue}
+            onValueChange={setInputValue}
+          />
+          <CommandList>
+            <CommandEmpty>
+              {isNewValue ? (
+                <div className="py-2 px-3 text-sm">
+                  Press enter to create <code className="bg-muted px-1 rounded">{inputValue}</code>
+                </div>
+              ) : (
+                emptyMessage
+              )}
+            </CommandEmpty>
+            <CommandGroup>
+              {/* Show "Create new" option if typing a new value */}
+              {isNewValue && (
+                <CommandItem
+                  value={inputValue}
+                  onSelect={() => {
+                    onChange(inputValue);
+                    setInputValue('');
+                    setOpen(false);
+                  }}
+                  className="text-[var(--status-success)]"
+                  data-testid={`${itemTestIdPrefix}-create-new`}
+                >
+                  {Icon && <Icon className="w-4 h-4 mr-2" />}
+                  {createLabel(inputValue)}
+                  <span className="ml-auto text-xs text-muted-foreground">(new)</span>
+                </CommandItem>
+              )}
+              {filteredOptions.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={(currentValue) => {
+                    onChange(currentValue === value ? '' : currentValue);
+                    setInputValue('');
+                    setOpen(false);
+                  }}
+                  data-testid={`${itemTestIdPrefix}-${option.value.toLowerCase().replace(/[\s/\\]+/g, '-')}`}
+                >
+                  {Icon && <Icon className="w-4 h-4 mr-2" />}
+                  {option.label}
+                  <Check
+                    className={cn('ml-auto', value === option.value ? 'opacity-100' : 'opacity-0')}
+                  />
+                  {option.badge && (
+                    <span className="ml-2 text-xs text-muted-foreground">({option.badge})</span>
+                  )}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/badge.tsx b/temp_repo/apps/ui/src/components/ui/badge.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f1a425bcbfc86caa38766961340628b06ee8e446
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/badge.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 shadow-sm',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'border-transparent bg-destructive text-white hover:bg-destructive/90',
+        outline: 'text-foreground border-border bg-background/50 backdrop-blur-sm',
+        // Semantic status variants using CSS variables
+        success:
+          'border-transparent bg-[var(--status-success-bg)] text-[var(--status-success)] border border-[var(--status-success)]/30',
+        warning:
+          'border-transparent bg-[var(--status-warning-bg)] text-[var(--status-warning)] border border-[var(--status-warning)]/30',
+        error:
+          'border-transparent bg-[var(--status-error-bg)] text-[var(--status-error)] border border-[var(--status-error)]/30',
+        info: 'border-transparent bg-[var(--status-info-bg)] text-[var(--status-info)] border border-[var(--status-info)]/30',
+        // Muted variants for subtle indication
+        muted: 'border-border/50 bg-muted/50 text-muted-foreground',
+        brand: 'border-transparent bg-brand-500/15 text-brand-500 border border-brand-500/30',
+      },
+      size: {
+        default: 'px-2.5 py-0.5 text-xs',
+        sm: 'px-2 py-0.5 text-[10px]',
+        lg: 'px-3 py-1 text-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, size, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant, size }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
diff --git a/temp_repo/apps/ui/src/components/ui/branch-autocomplete.tsx b/temp_repo/apps/ui/src/components/ui/branch-autocomplete.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..db9fdbca848f775636e9e35490af329542d7977c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/branch-autocomplete.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { GitBranch } from 'lucide-react';
+import { Autocomplete, AutocompleteOption } from '@/components/ui/autocomplete';
+
+interface BranchAutocompleteProps {
+  value: string;
+  onChange: (value: string) => void;
+  branches: string[];
+  branchCardCounts?: Record<string, number>; // Map of branch name to unarchived card count
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  error?: boolean;
+  allowCreate?: boolean; // Whether to allow creating new branches (default: true)
+  emptyMessage?: string; // Message shown when no branches match the search
+  'data-testid'?: string;
+}
+
+export function BranchAutocomplete({
+  value,
+  onChange,
+  branches,
+  branchCardCounts,
+  placeholder = 'Select a branch...',
+  className,
+  disabled = false,
+  error = false,
+  allowCreate = true,
+  emptyMessage = 'No branches found.',
+  'data-testid': testId,
+}: BranchAutocompleteProps) {
+  // Always include "main" at the top of suggestions
+  const branchOptions: AutocompleteOption[] = React.useMemo(() => {
+    const branchSet = new Set(['main', ...branches]);
+    return Array.from(branchSet).map((branch) => {
+      const cardCount = branchCardCounts?.[branch];
+      // Show card count if available, otherwise show "default" for main branch only
+      const badge =
+        branchCardCounts !== undefined
+          ? String(cardCount ?? 0)
+          : branch === 'main'
+            ? 'default'
+            : undefined;
+
+      return {
+        value: branch,
+        label: branch,
+        badge,
+      };
+    });
+  }, [branches, branchCardCounts]);
+
+  return (
+    <Autocomplete
+      value={value}
+      onChange={onChange}
+      options={branchOptions}
+      placeholder={placeholder}
+      searchPlaceholder={allowCreate ? 'Search or type new branch...' : 'Search branches...'}
+      emptyMessage={emptyMessage}
+      className={className}
+      disabled={disabled}
+      error={error}
+      icon={GitBranch}
+      allowCreate={allowCreate}
+      createLabel={(v) => `Create "${v}"`}
+      data-testid={testId}
+      itemTestIdPrefix="branch-option"
+    />
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/breadcrumb.tsx b/temp_repo/apps/ui/src/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f8f23e56eb13480563b799cf43ded471ddf586d0
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : 'a';
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn('hover:text-foreground transition-colors', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('text-foreground font-normal', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};
diff --git a/temp_repo/apps/ui/src/components/ui/button.tsx b/temp_repo/apps/ui/src/components/ui/button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..683d123753baa5d1ccdd085e36a62bbe7ab3bd6b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/button.tsx
@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+import { Spinner, type SpinnerVariant } from '@/components/ui/spinner';
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 cursor-pointer disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive active:scale-[0.98]",
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow-md hover:shadow-primary/25',
+        destructive:
+          'bg-destructive text-white shadow-sm hover:bg-destructive/90 hover:shadow-md hover:shadow-destructive/25 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline active:scale-100',
+        'animated-outline': 'relative overflow-hidden rounded-xl hover:bg-transparent shadow-none',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+/** Button variants that have colored backgrounds requiring foreground spinner color */
+const COLORED_BACKGROUND_VARIANTS = new Set<string>(['default', 'destructive']);
+
+/** Get spinner variant based on button variant - use foreground for colored backgrounds */
+function getSpinnerVariant(
+  buttonVariant: VariantProps<typeof buttonVariants>['variant']
+): SpinnerVariant {
+  const variant = buttonVariant ?? 'default';
+  if (COLORED_BACKGROUND_VARIANTS.has(variant)) {
+    return 'foreground';
+  }
+  // outline, secondary, ghost, link, animated-outline use standard backgrounds
+  return 'primary';
+}
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  loading = false,
+  disabled,
+  children,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    loading?: boolean;
+  }) {
+  const isDisabled = disabled || loading;
+  const spinnerVariant = getSpinnerVariant(variant);
+
+  // Special handling for animated-outline variant
+  if (variant === 'animated-outline' && !asChild) {
+    return (
+      <button
+        className={cn(
+          buttonVariants({ variant, size }),
+          'group p-[1px]', // Force 1px padding for the gradient border, group for hover animation
+          className
+        )}
+        data-slot="button"
+        disabled={isDisabled}
+        {...props}
+      >
+        {/* Animated rotating gradient border - only animates on hover for GPU efficiency */}
+        <span className="absolute inset-[-1000%] animated-outline-gradient opacity-75 transition-opacity duration-300 group-hover:animate-[spin_3s_linear_infinite] group-hover:opacity-100" />
+
+        {/* Inner content container */}
+        <span
+          className={cn(
+            'animated-outline-inner inline-flex h-full w-full cursor-pointer items-center justify-center gap-2 rounded-[10px] px-4 py-1 text-sm font-medium backdrop-blur-3xl transition-all duration-200',
+            size === 'sm' && 'px-3 text-xs gap-1.5',
+            size === 'lg' && 'px-8',
+            size === 'icon' && 'p-0 gap-0'
+          )}
+        >
+          {loading && <Spinner size="sm" variant={spinnerVariant} />}
+          {children}
+        </span>
+      </button>
+    );
+  }
+
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      disabled={isDisabled}
+      {...props}
+    >
+      {loading && <Spinner size="sm" variant={spinnerVariant} />}
+      {children}
+    </Comp>
+  );
+}
+
+export { Button, buttonVariants };
diff --git a/temp_repo/apps/ui/src/components/ui/card.tsx b/temp_repo/apps/ui/src/components/ui/card.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..86963f11506866bb5fe258a52d717fe576f667ca
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/card.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+interface CardProps extends React.ComponentProps<'div'> {
+  gradient?: boolean;
+}
+
+function Card({ className, gradient = false, ...props }: CardProps) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-1 rounded-xl border border-white/10 backdrop-blur-md py-6',
+        // Premium layered shadow
+        'shadow-[0_1px_2px_rgba(0,0,0,0.05),0_4px_6px_rgba(0,0,0,0.05),0_10px_20px_rgba(0,0,0,0.04)]',
+        // Gradient border option
+        gradient &&
+          'relative before:absolute before:inset-0 before:rounded-xl before:p-[1px] before:bg-gradient-to-br before:from-white/20 before:to-transparent before:pointer-events-none before:-z-10',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold tracking-tight', className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm leading-relaxed', className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="card-content" className={cn('px-6', className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center gap-3 px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
diff --git a/temp_repo/apps/ui/src/components/ui/category-autocomplete.tsx b/temp_repo/apps/ui/src/components/ui/category-autocomplete.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d46249a1268ed2ef522b2b3077e41bcd3ec5493e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/category-autocomplete.tsx
@@ -0,0 +1,43 @@
+import { Tag } from 'lucide-react';
+import { Autocomplete } from '@/components/ui/autocomplete';
+
+interface CategoryAutocompleteProps {
+  value: string;
+  onChange: (value: string) => void;
+  suggestions: string[];
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  error?: boolean;
+  'data-testid'?: string;
+}
+
+export function CategoryAutocomplete({
+  value,
+  onChange,
+  suggestions,
+  placeholder = 'Select or type a category...',
+  className,
+  disabled = false,
+  error = false,
+  'data-testid': testId,
+}: CategoryAutocompleteProps) {
+  return (
+    <Autocomplete
+      value={value}
+      onChange={onChange}
+      options={suggestions}
+      placeholder={placeholder}
+      searchPlaceholder="Search or type new category..."
+      emptyMessage="No category found."
+      className={className}
+      disabled={disabled}
+      error={error}
+      icon={Tag}
+      allowCreate
+      createLabel={(v) => `Create "${v}"`}
+      data-testid={testId}
+      itemTestIdPrefix="category-option"
+    />
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/checkbox.tsx b/temp_repo/apps/ui/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..77e6aaead7cedf497f432982e5825ad1f14ae614
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/checkbox.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+interface CheckboxProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'checked' | 'defaultChecked'
+> {
+  checked?: boolean | 'indeterminate';
+  defaultChecked?: boolean | 'indeterminate';
+  onCheckedChange?: (checked: boolean) => void;
+  required?: boolean;
+}
+
+const CheckboxRoot = CheckboxPrimitive.Root as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLButtonElement>
+>;
+
+const CheckboxIndicator = CheckboxPrimitive.Indicator as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLSpanElement>
+>;
+
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+  ({ className, onCheckedChange, children: _children, ...props }, ref) => (
+    <CheckboxRoot
+      ref={ref}
+      className={cn(
+        'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground hover:border-primary/80',
+        className
+      )}
+      onCheckedChange={(checked) => {
+        // Handle indeterminate state by treating it as false for consumers expecting boolean
+        if (onCheckedChange) {
+          onCheckedChange(checked === true);
+        }
+      }}
+      {...props}
+    >
+      <CheckboxIndicator className={cn('flex items-center justify-center text-current')}>
+        <Check className="h-4 w-4" />
+      </CheckboxIndicator>
+    </CheckboxRoot>
+  )
+);
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/temp_repo/apps/ui/src/components/ui/codemirror-diff-view.tsx b/temp_repo/apps/ui/src/components/ui/codemirror-diff-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..703bf0b422c1e685831da924aace71928e7efaf6
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/codemirror-diff-view.tsx
@@ -0,0 +1,220 @@
+/**
+ * CodeMirror-based unified diff viewer.
+ *
+ * Uses @codemirror/merge's `unifiedMergeView` extension to display a
+ * syntax-highlighted inline diff between the original and modified file content.
+ * The viewer is read-only and collapses unchanged regions.
+ */
+
+import { useMemo, useRef, useEffect } from 'react';
+import { EditorView } from '@codemirror/view';
+import { EditorState, type Extension } from '@codemirror/state';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+import { unifiedMergeView } from '@codemirror/merge';
+import { getLanguageExtension } from '@/lib/codemirror-languages';
+import { reconstructFilesFromDiff } from '@/lib/diff-utils';
+import { cn } from '@/lib/utils';
+
+// Reuse the same syntax highlighting from the code editor
+const syntaxColors = HighlightStyle.define([
+  { tag: t.keyword, color: 'var(--chart-4, oklch(0.7 0.15 280))' },
+  { tag: t.string, color: 'var(--chart-1, oklch(0.646 0.222 41.116))' },
+  { tag: t.number, color: 'var(--chart-3, oklch(0.7 0.15 150))' },
+  { tag: t.bool, color: 'var(--chart-4, oklch(0.7 0.15 280))' },
+  { tag: t.null, color: 'var(--chart-4, oklch(0.7 0.15 280))' },
+  { tag: t.comment, color: 'var(--muted-foreground)', fontStyle: 'italic' },
+  { tag: t.propertyName, color: 'var(--chart-2, oklch(0.6 0.118 184.704))' },
+  { tag: t.variableName, color: 'var(--chart-2, oklch(0.6 0.118 184.704))' },
+  { tag: t.function(t.variableName), color: 'var(--primary)' },
+  { tag: t.typeName, color: 'var(--chart-5, oklch(0.65 0.2 30))' },
+  { tag: t.className, color: 'var(--chart-5, oklch(0.65 0.2 30))' },
+  { tag: t.definition(t.variableName), color: 'var(--chart-2, oklch(0.6 0.118 184.704))' },
+  { tag: t.operator, color: 'var(--muted-foreground)' },
+  { tag: t.bracket, color: 'var(--muted-foreground)' },
+  { tag: t.punctuation, color: 'var(--muted-foreground)' },
+  { tag: t.attributeName, color: 'var(--chart-5, oklch(0.65 0.2 30))' },
+  { tag: t.attributeValue, color: 'var(--chart-1, oklch(0.646 0.222 41.116))' },
+  { tag: t.tagName, color: 'var(--chart-4, oklch(0.7 0.15 280))' },
+  { tag: t.heading, color: 'var(--foreground)', fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.link, color: 'var(--primary)', textDecoration: 'underline' },
+  { tag: t.content, color: 'var(--foreground)' },
+  { tag: t.regexp, color: 'var(--chart-1, oklch(0.646 0.222 41.116))' },
+  { tag: t.meta, color: 'var(--muted-foreground)' },
+]);
+
+const diffViewTheme = EditorView.theme(
+  {
+    '&': {
+      fontSize: '12px',
+      fontFamily:
+        'var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace)',
+      backgroundColor: 'var(--background)',
+      color: 'var(--foreground)',
+    },
+    '.cm-scroller': {
+      overflow: 'auto',
+      fontFamily:
+        'var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace)',
+    },
+    '.cm-content': {
+      padding: '0',
+      minHeight: 'auto',
+    },
+    '.cm-line': {
+      padding: '0 0.5rem',
+    },
+    '&.cm-focused': {
+      outline: 'none',
+    },
+    '.cm-gutters': {
+      backgroundColor: 'transparent',
+      color: 'var(--muted-foreground)',
+      border: 'none',
+      borderRight: '1px solid var(--border)',
+      paddingRight: '0.25rem',
+    },
+    '.cm-lineNumbers .cm-gutterElement': {
+      minWidth: '3rem',
+      textAlign: 'right',
+      paddingRight: '0.5rem',
+      fontSize: '11px',
+    },
+
+    // --- GitHub-style diff colors (dark mode) ---
+
+    // Added/changed lines: green background
+    '&.cm-merge-b .cm-changedLine': {
+      backgroundColor: 'rgba(46, 160, 67, 0.15)',
+    },
+    // Highlighted text within added/changed lines: stronger green
+    '&.cm-merge-b .cm-changedText': {
+      background: 'rgba(46, 160, 67, 0.4)',
+    },
+
+    // Deleted chunk container: red background
+    '.cm-deletedChunk': {
+      backgroundColor: 'rgba(248, 81, 73, 0.1)',
+      paddingLeft: '6px',
+    },
+    // Individual deleted lines within the chunk
+    '.cm-deletedChunk .cm-deletedLine': {
+      backgroundColor: 'rgba(248, 81, 73, 0.15)',
+    },
+    // Highlighted text within deleted lines: stronger red
+    '.cm-deletedChunk .cm-deletedText': {
+      background: 'rgba(248, 81, 73, 0.4)',
+    },
+    // Remove strikethrough from deleted text (GitHub doesn't use it)
+    '.cm-insertedLine, .cm-deletedLine, .cm-deletedLine del': {
+      textDecoration: 'none',
+    },
+
+    // Gutter markers for changed lines (green bar)
+    '&.cm-merge-b .cm-changedLineGutter': {
+      background: '#3fb950',
+    },
+    // Gutter markers for deleted lines (red bar)
+    '.cm-deletedLineGutter': {
+      background: '#f85149',
+    },
+
+    // Collapse button styling
+    '.cm-collapsedLines': {
+      color: 'var(--muted-foreground)',
+      backgroundColor: 'var(--muted)',
+      borderTop: '1px solid var(--border)',
+      borderBottom: '1px solid var(--border)',
+      cursor: 'pointer',
+      padding: '2px 8px',
+      fontSize: '11px',
+    },
+
+    // Selection styling
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+      backgroundColor: 'oklch(0.55 0.25 265 / 0.3)',
+    },
+  },
+  { dark: true }
+);
+
+interface CodeMirrorDiffViewProps {
+  /** The unified diff text for a single file */
+  fileDiff: string;
+  /** File path for language detection */
+  filePath: string;
+  /** Max height of the diff view (CSS value) */
+  maxHeight?: string;
+  className?: string;
+}
+
+export function CodeMirrorDiffView({
+  fileDiff,
+  filePath,
+  maxHeight = '400px',
+  className,
+}: CodeMirrorDiffViewProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+
+  const { oldContent, newContent } = useMemo(() => reconstructFilesFromDiff(fileDiff), [fileDiff]);
+
+  const extensions = useMemo(() => {
+    const exts: Extension[] = [
+      EditorView.darkTheme.of(true),
+      diffViewTheme,
+      syntaxHighlighting(syntaxColors),
+      EditorView.editable.of(false),
+      EditorState.readOnly.of(true),
+      EditorView.lineWrapping,
+      unifiedMergeView({
+        original: oldContent,
+        highlightChanges: true,
+        gutter: true,
+        syntaxHighlightDeletions: true,
+        mergeControls: false,
+        collapseUnchanged: { margin: 3, minSize: 4 },
+      }),
+    ];
+
+    const langExt = getLanguageExtension(filePath);
+    if (langExt) {
+      exts.push(langExt);
+    }
+
+    return exts;
+  }, [oldContent, filePath]);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    // Clean up previous view
+    if (viewRef.current) {
+      viewRef.current.destroy();
+      viewRef.current = null;
+    }
+
+    const state = EditorState.create({
+      doc: newContent,
+      extensions,
+    });
+
+    const view = new EditorView({
+      state,
+      parent: containerRef.current,
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, [newContent, extensions]);
+
+  return (
+    <div ref={containerRef} className={cn('overflow-auto', className)} style={{ maxHeight }} />
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/collapsible.tsx b/temp_repo/apps/ui/src/components/ui/collapsible.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9605c4e41abfd8be42dbe550dce8851d9ae41151
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/temp_repo/apps/ui/src/components/ui/command.tsx b/temp_repo/apps/ui/src/components/ui/command.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6c582d0dd1a7788e46d8bdfc9d7616f4a833bde8
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/command.tsx
@@ -0,0 +1,166 @@
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn('overflow-hidden p-0', className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        // Mobile touch scrolling support
+        'touch-pan-y overscroll-contain',
+        // iOS Safari momentum scrolling
+        '[&]:[-webkit-overflow-scrolling:touch]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn('bg-border -mx-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/temp_repo/apps/ui/src/components/ui/confirm-dialog.tsx b/temp_repo/apps/ui/src/components/ui/confirm-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..28570d1abac6b150c83f52f5e66988a544bc09e7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/confirm-dialog.tsx
@@ -0,0 +1,83 @@
+import type { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { HotkeyButton } from '@/components/ui/hotkey-button';
+
+interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  title: string;
+  description: string;
+  /** Optional icon to show in the title */
+  icon?: LucideIcon;
+  /** Icon color class. Defaults to "text-primary" */
+  iconClassName?: string;
+  /** Optional content to show between description and buttons */
+  children?: ReactNode;
+  /** Text for the confirm button. Defaults to "Confirm" */
+  confirmText?: string;
+  /** Text for the cancel button. Defaults to "Cancel" */
+  cancelText?: string;
+  /** Variant for the confirm button. Defaults to "default" */
+  confirmVariant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+}
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  title,
+  description,
+  icon: Icon,
+  iconClassName = 'text-primary',
+  children,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  confirmVariant = 'default',
+}: ConfirmDialogProps) {
+  const handleConfirm = () => {
+    onConfirm();
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-popover border-border max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {Icon && <Icon className={`w-5 h-5 ${iconClassName}`} />}
+            {title}
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground">{description}</DialogDescription>
+        </DialogHeader>
+
+        {children}
+
+        <DialogFooter className="gap-2 sm:gap-2 pt-4">
+          <Button variant="ghost" onClick={() => onOpenChange(false)} className="px-4">
+            {cancelText}
+          </Button>
+          <HotkeyButton
+            variant={confirmVariant}
+            onClick={handleConfirm}
+            hotkey={{ key: 'Enter', cmdCtrl: true }}
+            hotkeyActive={open}
+            className="px-4"
+          >
+            {Icon && <Icon className="w-4 h-4 mr-2" />}
+            {confirmText}
+          </HotkeyButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/count-up-timer.tsx b/temp_repo/apps/ui/src/components/ui/count-up-timer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dec7461e9f08b3a899c50ac3ca4e756f336284ee
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/count-up-timer.tsx
@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react';
+import { Clock } from 'lucide-react';
+
+interface CountUpTimerProps {
+  startedAt: string; // ISO timestamp string
+  className?: string;
+}
+
+/**
+ * Formats elapsed time in MM:SS format
+ * @param seconds - Total elapsed seconds
+ * @returns Formatted string like "00:00", "01:30", "59:59", etc.
+ */
+function formatElapsedTime(seconds: number): string {
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+
+  const paddedMinutes = minutes.toString().padStart(2, '0');
+  const paddedSeconds = remainingSeconds.toString().padStart(2, '0');
+
+  return `${paddedMinutes}:${paddedSeconds}`;
+}
+
+/**
+ * CountUpTimer component that displays elapsed time since a given start time
+ * Updates every second to show the current elapsed time in MM:SS format
+ */
+export function CountUpTimer({ startedAt, className = '' }: CountUpTimerProps) {
+  const [elapsedSeconds, setElapsedSeconds] = useState(0);
+
+  useEffect(() => {
+    // Calculate initial elapsed time
+    const startTime = new Date(startedAt).getTime();
+
+    const calculateElapsed = () => {
+      const now = Date.now();
+      const elapsed = Math.floor((now - startTime) / 1000);
+      return Math.max(0, elapsed); // Ensure non-negative
+    };
+
+    // Set initial value
+    setElapsedSeconds(calculateElapsed());
+
+    // Update every second
+    const interval = setInterval(() => {
+      setElapsedSeconds(calculateElapsed());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [startedAt]);
+
+  return (
+    <div
+      className={`flex items-center gap-1 text-xs text-muted-foreground ${className}`}
+      data-testid="count-up-timer"
+    >
+      <Clock className="w-3 h-3" />
+      <span data-testid="timer-display">{formatElapsedTime(elapsedSeconds)}</span>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/delete-confirm-dialog.tsx b/temp_repo/apps/ui/src/components/ui/delete-confirm-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dd9fc5e7fe4326d5ac880ee0823e2307fd471cd3
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/delete-confirm-dialog.tsx
@@ -0,0 +1,83 @@
+import { Trash2 } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { HotkeyButton } from '@/components/ui/hotkey-button';
+import type { ReactNode } from 'react';
+
+interface DeleteConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  title: string;
+  description: string;
+  /** Optional content to show between description and buttons (e.g., item preview card) */
+  children?: ReactNode;
+  /** Text for the confirm button. Defaults to "Delete" */
+  confirmText?: string;
+  /** Test ID for the dialog */
+  testId?: string;
+  /** Test ID for the confirm button */
+  confirmTestId?: string;
+}
+
+export function DeleteConfirmDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  title,
+  description,
+  children,
+  confirmText = 'Delete',
+  testId = 'delete-confirm-dialog',
+  confirmTestId = 'confirm-delete-button',
+}: DeleteConfirmDialogProps) {
+  const handleConfirm = () => {
+    onConfirm();
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-popover border-border max-w-md" data-testid={testId}>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Trash2 className="w-5 h-5 text-destructive" />
+            {title}
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground">{description}</DialogDescription>
+        </DialogHeader>
+
+        {children}
+
+        <DialogFooter className="gap-2 sm:gap-2 pt-4">
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            className="px-4"
+            data-testid="cancel-delete-button"
+          >
+            Cancel
+          </Button>
+          <HotkeyButton
+            variant="destructive"
+            onClick={handleConfirm}
+            data-testid={confirmTestId}
+            hotkey={{ key: 'Enter', cmdCtrl: true }}
+            hotkeyActive={open}
+            className="px-4"
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            {confirmText}
+          </HotkeyButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/dependency-selector.tsx b/temp_repo/apps/ui/src/components/ui/dependency-selector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d2a51e742261b101b636159b9d1f9e82bcd6c7f5
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/dependency-selector.tsx
@@ -0,0 +1,245 @@
+import * as React from 'react';
+import { ChevronsUpDown, X, GitBranch, ArrowUp, ArrowDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Badge } from '@/components/ui/badge';
+import { wouldCreateCircularDependency } from '@automaker/dependency-resolver';
+import type { Feature } from '@automaker/types';
+
+interface DependencySelectorProps {
+  /** The current feature being edited (null for add mode) */
+  currentFeatureId?: string;
+  /** Selected feature IDs */
+  value: string[];
+  /** Callback when selection changes */
+  onChange: (ids: string[]) => void;
+  /** All available features to select from */
+  features: Feature[];
+  /** Type of dependency - 'parent' means features this depends on, 'child' means features that depend on this */
+  type: 'parent' | 'child';
+  /** Placeholder text */
+  placeholder?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Test ID for testing */
+  'data-testid'?: string;
+}
+
+export function DependencySelector({
+  currentFeatureId,
+  value,
+  onChange,
+  features,
+  type,
+  placeholder,
+  disabled = false,
+  'data-testid': testId,
+}: DependencySelectorProps) {
+  const [open, setOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState('');
+  const [triggerWidth, setTriggerWidth] = React.useState<number>(0);
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+
+  // Update trigger width when component mounts or value changes
+  React.useEffect(() => {
+    if (triggerRef.current) {
+      const updateWidth = () => {
+        setTriggerWidth(triggerRef.current?.offsetWidth || 0);
+      };
+
+      updateWidth();
+
+      const resizeObserver = new ResizeObserver(updateWidth);
+      resizeObserver.observe(triggerRef.current);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [value]);
+
+  // Get display label for a feature
+  const getFeatureLabel = (feature: Feature): string => {
+    if (feature.title && feature.title.trim()) {
+      return feature.title;
+    }
+    // Truncate description to 50 chars
+    const desc = feature.description || '';
+    return desc.length > 50 ? desc.slice(0, 47) + '...' : desc;
+  };
+
+  // Filter out current feature and already selected features from options
+  const availableFeatures = React.useMemo(() => {
+    return features.filter((f) => {
+      // Don't show current feature
+      if (currentFeatureId && f.id === currentFeatureId) return false;
+      // Don't show already selected features
+      if (value.includes(f.id)) return false;
+      return true;
+    });
+  }, [features, currentFeatureId, value]);
+
+  // Filter by search input
+  const filteredFeatures = React.useMemo(() => {
+    if (!inputValue) return availableFeatures;
+    const lower = inputValue.toLowerCase();
+    return availableFeatures.filter((f) => {
+      const label = getFeatureLabel(f).toLowerCase();
+      return label.includes(lower) || f.id.toLowerCase().includes(lower);
+    });
+  }, [availableFeatures, inputValue]);
+
+  // Check if selecting a feature would create a circular dependency
+  const wouldCreateCycle = React.useCallback(
+    (featureId: string): boolean => {
+      if (!currentFeatureId) return false;
+
+      // For parent dependencies: we're adding featureId to currentFeature.dependencies
+      // This would create a cycle if featureId already depends on currentFeatureId
+      if (type === 'parent') {
+        return wouldCreateCircularDependency(features, featureId, currentFeatureId);
+      }
+
+      // For child dependencies: we're adding currentFeatureId to featureId.dependencies
+      // This would create a cycle if currentFeatureId already depends on featureId
+      return wouldCreateCircularDependency(features, currentFeatureId, featureId);
+    },
+    [features, currentFeatureId, type]
+  );
+
+  // Get selected features for display
+  const selectedFeatures = React.useMemo(() => {
+    return value
+      .map((id) => features.find((f) => f.id === id))
+      .filter((f): f is Feature => f !== undefined);
+  }, [value, features]);
+
+  const handleSelect = (featureId: string) => {
+    if (!value.includes(featureId)) {
+      onChange([...value, featureId]);
+    }
+    setInputValue('');
+  };
+
+  const handleRemove = (featureId: string) => {
+    onChange(value.filter((id) => id !== featureId));
+  };
+
+  const defaultPlaceholder =
+    type === 'parent' ? 'Select parent dependencies...' : 'Select child dependencies...';
+
+  const Icon = type === 'parent' ? ArrowUp : ArrowDown;
+
+  return (
+    <div className="space-y-2">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            ref={triggerRef}
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={disabled}
+            className={cn('w-full justify-between min-h-[40px]')}
+            data-testid={testId}
+          >
+            <span className="flex items-center gap-2 truncate text-muted-foreground">
+              <Icon className="w-4 h-4 shrink-0" />
+              {placeholder || defaultPlaceholder}
+            </span>
+            <ChevronsUpDown className="opacity-50 shrink-0" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="p-0"
+          style={{
+            width: Math.max(triggerWidth, 300),
+          }}
+          data-testid={testId ? `${testId}-list` : undefined}
+          onWheel={(e) => e.stopPropagation()}
+          onTouchMove={(e) => e.stopPropagation()}
+        >
+          <Command shouldFilter={false}>
+            <CommandInput
+              placeholder="Search features..."
+              className="h-9"
+              value={inputValue}
+              onValueChange={setInputValue}
+            />
+            <CommandList>
+              <CommandEmpty>No features found.</CommandEmpty>
+              <CommandGroup>
+                {filteredFeatures.map((feature) => {
+                  const willCreateCycle = wouldCreateCycle(feature.id);
+                  const label = getFeatureLabel(feature);
+
+                  return (
+                    <CommandItem
+                      key={feature.id}
+                      value={feature.id}
+                      onSelect={() => {
+                        if (!willCreateCycle) {
+                          handleSelect(feature.id);
+                        }
+                      }}
+                      disabled={willCreateCycle}
+                      className={cn(willCreateCycle && 'opacity-50 cursor-not-allowed')}
+                      data-testid={`${testId}-option-${feature.id}`}
+                    >
+                      <GitBranch className="w-4 h-4 mr-2 text-muted-foreground" />
+                      <span className="flex-1 truncate">{label}</span>
+                      {willCreateCycle && (
+                        <span className="ml-2 text-xs text-destructive">(circular)</span>
+                      )}
+                      {feature.status && (
+                        <Badge variant="outline" className="ml-2 text-xs">
+                          {feature.status}
+                        </Badge>
+                      )}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      {/* Selected items as badges */}
+      {selectedFeatures.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {selectedFeatures.map((feature) => (
+            <Badge
+              key={feature.id}
+              variant="secondary"
+              className="flex items-center gap-1 pr-1 text-xs"
+            >
+              <span className="truncate max-w-[150px]">{getFeatureLabel(feature)}</span>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleRemove(feature.id);
+                }}
+                className="ml-1 rounded-full hover:bg-muted-foreground/20 p-0.5"
+                disabled={disabled}
+              >
+                <X className="w-3 h-3" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/description-image-dropzone.tsx b/temp_repo/apps/ui/src/components/ui/description-image-dropzone.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..de76ffcf6738865f8c93cfc24e2527f11d8c5358
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/description-image-dropzone.tsx
@@ -0,0 +1,549 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { cn } from '@/lib/utils';
+
+const logger = createLogger('DescriptionImageDropZone');
+import { ImageIcon, X, FileText } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { Textarea } from '@/components/ui/textarea';
+import { getElectronAPI } from '@/lib/electron';
+import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
+import { useAppStore, type FeatureImagePath, type FeatureTextFilePath } from '@/store/app-store';
+import {
+  sanitizeFilename,
+  fileToBase64,
+  fileToText,
+  isTextFile,
+  isImageFile,
+  validateTextFile,
+  getTextFileMimeType,
+  generateFileId,
+  ACCEPTED_IMAGE_TYPES,
+  ACCEPTED_TEXT_EXTENSIONS,
+  DEFAULT_MAX_FILE_SIZE,
+  DEFAULT_MAX_TEXT_FILE_SIZE,
+  formatFileSize,
+} from '@/lib/image-utils';
+
+// Map to store preview data by image ID (persisted across component re-mounts)
+export type ImagePreviewMap = Map<string, string>;
+
+// Re-export for convenience
+export type { FeatureImagePath, FeatureTextFilePath };
+
+interface DescriptionImageDropZoneProps {
+  value: string;
+  onChange: (value: string) => void;
+  images: FeatureImagePath[];
+  onImagesChange: (images: FeatureImagePath[]) => void;
+  textFiles?: FeatureTextFilePath[];
+  onTextFilesChange?: (textFiles: FeatureTextFilePath[]) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  maxFiles?: number;
+  maxFileSize?: number; // in bytes, default 10MB
+  // Optional: pass preview map from parent to persist across tab switches
+  previewMap?: ImagePreviewMap;
+  onPreviewMapChange?: (map: ImagePreviewMap) => void;
+  autoFocus?: boolean;
+  error?: boolean; // Show error state with red border
+}
+
+export function DescriptionImageDropZone({
+  value,
+  onChange,
+  images,
+  onImagesChange,
+  textFiles = [],
+  onTextFilesChange,
+  placeholder = 'Describe the feature...',
+  className,
+  disabled = false,
+  maxFiles = 5,
+  maxFileSize = DEFAULT_MAX_FILE_SIZE,
+  previewMap,
+  onPreviewMapChange,
+  autoFocus = false,
+  error = false,
+}: DescriptionImageDropZoneProps) {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  // Use parent-provided preview map if available, otherwise use local state
+  const [localPreviewImages, setLocalPreviewImages] = useState<Map<string, string>>(
+    () => new Map()
+  );
+
+  // Determine which preview map to use - prefer parent-controlled state
+  const previewImages = previewMap !== undefined ? previewMap : localPreviewImages;
+  const setPreviewImages = useCallback(
+    (updater: Map<string, string> | ((prev: Map<string, string>) => Map<string, string>)) => {
+      if (onPreviewMapChange) {
+        const currentMap = previewMap !== undefined ? previewMap : localPreviewImages;
+        const newMap = typeof updater === 'function' ? updater(currentMap) : updater;
+        onPreviewMapChange(newMap);
+      } else {
+        setLocalPreviewImages((prev) => {
+          const newMap = typeof updater === 'function' ? updater(prev) : updater;
+          return newMap;
+        });
+      }
+    },
+    [onPreviewMapChange, previewMap, localPreviewImages]
+  );
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const currentProject = useAppStore((state) => state.currentProject);
+
+  // Construct server URL for loading saved images
+  const getImageServerUrl = useCallback(
+    (imagePath: string): string => {
+      const projectPath = currentProject?.path || '';
+      return getAuthenticatedImageUrl(imagePath, projectPath);
+    },
+    [currentProject?.path]
+  );
+
+  const saveImageToTemp = useCallback(
+    async (base64Data: string, filename: string, mimeType: string): Promise<string | null> => {
+      try {
+        const api = getElectronAPI();
+        // Check if saveImageToTemp method exists
+        if (!api.saveImageToTemp) {
+          // Fallback path when saveImageToTemp is not available
+          logger.info('Using fallback path for image');
+          return `.automaker/images/${Date.now()}_${filename}`;
+        }
+
+        // Get projectPath from the store if available
+        const projectPath = currentProject?.path;
+        const result = await api.saveImageToTemp(base64Data, filename, mimeType, projectPath);
+        if (result.success && result.path) {
+          return result.path;
+        }
+        logger.error('Failed to save image:', result.error);
+        return null;
+      } catch (error) {
+        logger.error('Error saving image:', error);
+        return null;
+      }
+    },
+    [currentProject?.path]
+  );
+
+  const processFiles = useCallback(
+    async (files: FileList) => {
+      if (disabled || isProcessing) return;
+
+      setIsProcessing(true);
+      const newImages: FeatureImagePath[] = [];
+      const newTextFiles: FeatureTextFilePath[] = [];
+      const newPreviews = new Map(previewImages);
+      const errors: string[] = [];
+
+      // Calculate total current files
+      const currentTotalFiles = images.length + textFiles.length;
+
+      for (const file of Array.from(files)) {
+        // Check if it's a text file
+        if (isTextFile(file)) {
+          const validation = validateTextFile(file, DEFAULT_MAX_TEXT_FILE_SIZE);
+          if (!validation.isValid) {
+            errors.push(validation.error!);
+            continue;
+          }
+
+          // Check if we've reached max files
+          const totalFiles = newImages.length + newTextFiles.length + currentTotalFiles;
+          if (totalFiles >= maxFiles) {
+            errors.push(`Maximum ${maxFiles} files allowed.`);
+            break;
+          }
+
+          try {
+            const content = await fileToText(file);
+            const sanitizedName = sanitizeFilename(file.name);
+            const textFilePath: FeatureTextFilePath = {
+              id: generateFileId(),
+              path: '', // Text files don't need to be saved to disk
+              filename: sanitizedName,
+              mimeType: getTextFileMimeType(file.name),
+              content,
+            };
+            newTextFiles.push(textFilePath);
+          } catch {
+            errors.push(`${file.name}: Failed to read text file.`);
+          }
+        }
+        // Check if it's an image file
+        else if (isImageFile(file)) {
+          // Validate file size
+          if (file.size > maxFileSize) {
+            const maxSizeMB = maxFileSize / (1024 * 1024);
+            errors.push(`${file.name}: File too large. Maximum size is ${maxSizeMB}MB.`);
+            continue;
+          }
+
+          // Check if we've reached max files
+          const totalFiles = newImages.length + newTextFiles.length + currentTotalFiles;
+          if (totalFiles >= maxFiles) {
+            errors.push(`Maximum ${maxFiles} files allowed.`);
+            break;
+          }
+
+          try {
+            const base64 = await fileToBase64(file);
+            const sanitizedName = sanitizeFilename(file.name);
+            const tempPath = await saveImageToTemp(base64, sanitizedName, file.type);
+
+            if (tempPath) {
+              const imageId = `img-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+              const imagePathRef: FeatureImagePath = {
+                id: imageId,
+                path: tempPath,
+                filename: sanitizedName,
+                mimeType: file.type,
+              };
+              newImages.push(imagePathRef);
+              // Store preview for display
+              newPreviews.set(imageId, base64);
+            } else {
+              errors.push(`${file.name}: Failed to save image.`);
+            }
+          } catch {
+            errors.push(`${file.name}: Failed to process image.`);
+          }
+        } else {
+          errors.push(`${file.name}: Unsupported file type. Use images, .txt, or .md files.`);
+        }
+      }
+
+      if (errors.length > 0) {
+        logger.warn('File upload errors:', errors);
+      }
+
+      if (newImages.length > 0) {
+        onImagesChange([...images, ...newImages]);
+        setPreviewImages(newPreviews);
+      }
+
+      if (newTextFiles.length > 0 && onTextFilesChange) {
+        onTextFilesChange([...textFiles, ...newTextFiles]);
+      }
+
+      setIsProcessing(false);
+    },
+    [
+      disabled,
+      isProcessing,
+      images,
+      textFiles,
+      maxFiles,
+      maxFileSize,
+      onImagesChange,
+      onTextFilesChange,
+      previewImages,
+      saveImageToTemp,
+      setPreviewImages,
+    ]
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragOver(false);
+
+      if (disabled) return;
+
+      const files = e.dataTransfer.files;
+      if (files.length > 0) {
+        processFiles(files);
+      }
+    },
+    [disabled, processFiles]
+  );
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!disabled) {
+        setIsDragOver(true);
+      }
+    },
+    [disabled]
+  );
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  }, []);
+
+  const handleFileSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (files && files.length > 0) {
+        processFiles(files);
+      }
+      // Reset the input so the same file can be selected again
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    },
+    [processFiles]
+  );
+
+  const handleBrowseClick = useCallback(() => {
+    if (!disabled && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, [disabled]);
+
+  const removeImage = useCallback(
+    (imageId: string) => {
+      onImagesChange(images.filter((img) => img.id !== imageId));
+      setPreviewImages((prev) => {
+        const newMap = new Map(prev);
+        newMap.delete(imageId);
+        return newMap;
+      });
+    },
+    [images, onImagesChange, setPreviewImages]
+  );
+
+  const removeTextFile = useCallback(
+    (fileId: string) => {
+      if (onTextFilesChange) {
+        onTextFilesChange(textFiles.filter((file) => file.id !== fileId));
+      }
+    },
+    [textFiles, onTextFilesChange]
+  );
+
+  // Handle paste events to detect and process images from clipboard
+  // Works across all OS (Windows, Linux, macOS)
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent) => {
+      if (disabled || isProcessing) return;
+
+      const clipboardItems = e.clipboardData?.items;
+      if (!clipboardItems) return;
+
+      const imageFiles: File[] = [];
+
+      // Iterate through clipboard items to find images
+      for (let i = 0; i < clipboardItems.length; i++) {
+        const item = clipboardItems[i];
+
+        // Check if the item is an image
+        if (item.type.startsWith('image/')) {
+          const file = item.getAsFile();
+          if (file) {
+            // Generate a filename for pasted images since they don't have one
+            const extension = item.type.split('/')[1] || 'png';
+            const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+            const renamedFile = new File([file], `pasted-image-${timestamp}.${extension}`, {
+              type: file.type,
+            });
+            imageFiles.push(renamedFile);
+          }
+        }
+      }
+
+      // If we found images, process them and prevent default paste behavior
+      if (imageFiles.length > 0) {
+        e.preventDefault();
+
+        // Create a FileList-like object from the array
+        const dataTransfer = new DataTransfer();
+        imageFiles.forEach((file) => dataTransfer.items.add(file));
+        processFiles(dataTransfer.files);
+      }
+      // If no images found, let the default paste behavior happen (paste text)
+    },
+    [disabled, isProcessing, processFiles]
+  );
+
+  return (
+    <div className={cn('relative', className)}>
+      {/* Hidden file input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        accept={[...ACCEPTED_IMAGE_TYPES, ...ACCEPTED_TEXT_EXTENSIONS].join(',')}
+        onChange={handleFileSelect}
+        className="hidden"
+        disabled={disabled}
+        data-testid="description-file-input"
+      />
+
+      {/* Drop zone wrapper */}
+      <div
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        className={cn('relative rounded-md transition-all duration-200', {
+          'ring-2 ring-blue-400 ring-offset-2 ring-offset-background': isDragOver && !disabled,
+        })}
+      >
+        {/* Drag overlay */}
+        {isDragOver && !disabled && (
+          <div
+            className="absolute inset-0 z-10 flex items-center justify-center rounded-md bg-blue-500/20 border-2 border-dashed border-blue-400 pointer-events-none"
+            data-testid="drop-overlay"
+          >
+            <div className="flex flex-col items-center gap-2 text-blue-400">
+              <ImageIcon className="w-8 h-8" />
+              <span className="text-sm font-medium">Drop files here</span>
+            </div>
+          </div>
+        )}
+
+        {/* Textarea */}
+        <Textarea
+          placeholder={placeholder}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onPaste={handlePaste}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          aria-invalid={error}
+          className={cn('min-h-[120px]', isProcessing && 'opacity-50 pointer-events-none')}
+          data-testid="feature-description-input"
+        />
+      </div>
+
+      {/* Hint text */}
+      <p className="text-xs text-muted-foreground mt-1">
+        Paste, drag and drop files, or{' '}
+        <button
+          type="button"
+          onClick={handleBrowseClick}
+          className="text-primary hover:text-primary/80 underline"
+          disabled={disabled || isProcessing}
+        >
+          browse
+        </button>{' '}
+        to attach context (images, .txt, .md)
+      </p>
+
+      {/* Processing indicator */}
+      {isProcessing && (
+        <div className="flex items-center gap-2 mt-2 text-sm text-muted-foreground">
+          <Spinner size="sm" />
+          <span>Processing files...</span>
+        </div>
+      )}
+
+      {/* File previews (images and text files) */}
+      {(images.length > 0 || textFiles.length > 0) && (
+        <div className="mt-3 space-y-2" data-testid="description-file-previews">
+          <div className="flex items-center justify-between">
+            <p className="text-xs font-medium text-foreground">
+              {images.length + textFiles.length} file
+              {images.length + textFiles.length > 1 ? 's' : ''} attached
+            </p>
+            <button
+              type="button"
+              onClick={() => {
+                onImagesChange([]);
+                setPreviewImages(new Map());
+                if (onTextFilesChange) {
+                  onTextFilesChange([]);
+                }
+              }}
+              className="text-xs text-muted-foreground hover:text-foreground"
+              disabled={disabled}
+            >
+              Clear all
+            </button>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {/* Image previews */}
+            {images.map((image) => (
+              <div
+                key={image.id}
+                className="relative group rounded-md border border-muted bg-muted/50 overflow-hidden"
+                data-testid={`description-image-preview-${image.id}`}
+              >
+                {/* Image thumbnail or placeholder */}
+                <div className="w-16 h-16 flex items-center justify-center bg-zinc-800">
+                  {previewImages.has(image.id) ? (
+                    <img
+                      src={previewImages.get(image.id)}
+                      alt={image.filename}
+                      className="max-w-full max-h-full object-contain"
+                    />
+                  ) : (
+                    <img
+                      src={getImageServerUrl(image.path)}
+                      alt={image.filename}
+                      className="max-w-full max-h-full object-contain"
+                      onError={(e) => {
+                        // If image fails to load, hide it
+                        (e.target as HTMLImageElement).style.display = 'none';
+                      }}
+                    />
+                  )}
+                </div>
+                {/* Remove button */}
+                {!disabled && (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      removeImage(image.id);
+                    }}
+                    className="absolute top-0.5 right-0.5 p-0.5 rounded-full bg-destructive text-destructive-foreground opacity-0 group-hover:opacity-100 transition-opacity"
+                    data-testid={`remove-description-image-${image.id}`}
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                )}
+                {/* Filename tooltip on hover */}
+                <div className="absolute bottom-0 left-0 right-0 bg-black/60 px-1 py-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <p className="text-[10px] text-white truncate">{image.filename}</p>
+                </div>
+              </div>
+            ))}
+            {/* Text file previews */}
+            {textFiles.map((file) => (
+              <div
+                key={file.id}
+                className="relative group rounded-md border border-muted bg-muted/50 overflow-hidden"
+                data-testid={`description-text-file-preview-${file.id}`}
+              >
+                {/* Text file icon */}
+                <div className="w-16 h-16 flex items-center justify-center bg-zinc-800">
+                  <FileText className="w-6 h-6 text-muted-foreground" />
+                </div>
+                {/* Remove button */}
+                {!disabled && (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      removeTextFile(file.id);
+                    }}
+                    className="absolute top-0.5 right-0.5 p-0.5 rounded-full bg-destructive text-destructive-foreground opacity-0 group-hover:opacity-100 transition-opacity"
+                    data-testid={`remove-description-text-file-${file.id}`}
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                )}
+                {/* Filename and size tooltip on hover */}
+                <div className="absolute bottom-0 left-0 right-0 bg-black/60 px-1 py-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <p className="text-[10px] text-white truncate">{file.filename}</p>
+                  <p className="text-[9px] text-white/70">{formatFileSize(file.content.length)}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/dialog.tsx b/temp_repo/apps/ui/src/components/ui/dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..95d7dd153da1d44a62500b818bb21e789f102bc6
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/dialog.tsx
@@ -0,0 +1,233 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+// Type-safe wrappers for Radix UI primitives (React 19 compatibility)
+const DialogContentPrimitive = DialogPrimitive.Content as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const DialogClosePrimitive = DialogPrimitive.Close as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLButtonElement>
+>;
+
+const DialogTitlePrimitive = DialogPrimitive.Title as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLHeadingElement>
+>;
+
+const DialogDescriptionPrimitive = DialogPrimitive.Description as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
+    children?: React.ReactNode;
+    className?: string;
+    title?: string;
+  } & React.RefAttributes<HTMLParagraphElement>
+>;
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+const DialogOverlayPrimitive = DialogPrimitive.Overlay as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay> & {
+  className?: string;
+}) {
+  return (
+    <DialogOverlayPrimitive
+      data-slot="dialog-overlay"
+      className={cn(
+        'fixed inset-0 z-50 bg-black/60 backdrop-blur-sm',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'duration-200',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export type DialogContentProps = Omit<
+  React.ComponentProps<typeof DialogPrimitive.Content>,
+  'ref'
+> & {
+  showCloseButton?: boolean;
+  compact?: boolean;
+  /** When true, the default sm:max-w-2xl is not applied, allowing className to set max-width. */
+  noDefaultMaxWidth?: boolean;
+};
+
+const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
+  (
+    {
+      className,
+      children,
+      showCloseButton = true,
+      compact = false,
+      noDefaultMaxWidth = false,
+      ...props
+    },
+    ref
+  ) => {
+    // Check if className contains a custom max-width (fallback heuristic)
+    const hasCustomMaxWidth =
+      noDefaultMaxWidth || (typeof className === 'string' && className.includes('max-w-'));
+
+    return (
+      <DialogPortal data-slot="dialog-portal">
+        <DialogOverlay />
+        <DialogContentPrimitive
+          ref={ref}
+          data-slot="dialog-content"
+          className={cn(
+            'fixed left-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',
+            'top-[calc(50%_+_(env(safe-area-inset-top,0px)_-_env(safe-area-inset-bottom,0px))_/_2)]',
+            'flex flex-col w-full max-w-[calc(100%-2rem)]',
+            'max-h-[calc(100dvh_-_4rem_-_env(safe-area-inset-top,0px)_-_env(safe-area-inset-bottom,0px))]',
+            'bg-card border border-border rounded-xl shadow-2xl',
+            // Premium shadow
+            'shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)]',
+            // Animations - smoother with scale
+            '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',
+            'data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]',
+            'duration-200',
+            compact
+              ? 'max-w-[min(56rem,calc(100%-2rem))] p-4'
+              : !hasCustomMaxWidth
+                ? 'sm:max-w-2xl p-6'
+                : 'p-6',
+            className
+          )}
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <DialogClosePrimitive
+              data-slot="dialog-close"
+              className={cn(
+                'absolute z-10 rounded-lg opacity-60 transition-all duration-200 cursor-pointer',
+                'hover:opacity-100 hover:bg-muted',
+                'focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none',
+                'disabled:pointer-events-none disabled:cursor-not-allowed',
+                '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
+                'p-2 min-w-[2.5rem] min-h-[2.5rem] flex items-center justify-center',
+                compact ? 'top-2 right-2' : 'top-3 right-3'
+              )}
+            >
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </DialogClosePrimitive>
+          )}
+        </DialogContentPrimitive>
+      </DialogPortal>
+    );
+  }
+);
+
+DialogContent.displayName = 'DialogContent';
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end mt-6', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title> & {
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <DialogTitlePrimitive
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold tracking-tight', className)}
+      {...props}
+    >
+      {children}
+    </DialogTitlePrimitive>
+  );
+}
+
+function DialogDescription({
+  className,
+  children,
+  title,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description> & {
+  children?: React.ReactNode;
+  className?: string;
+  title?: string;
+}) {
+  return (
+    <DialogDescriptionPrimitive
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground text-sm leading-relaxed', className)}
+      title={title}
+      {...props}
+    >
+      {children}
+    </DialogDescriptionPrimitive>
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/temp_repo/apps/ui/src/components/ui/dropdown-menu.tsx b/temp_repo/apps/ui/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ad1cd8368ea248dbe63fceea60e4dd0aa480bbd7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,298 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+// Type-safe wrappers for Radix UI primitives (React 19 compatibility)
+const DropdownMenuTriggerPrimitive =
+  DropdownMenuPrimitive.Trigger as React.ForwardRefExoticComponent<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger> & {
+      children?: React.ReactNode;
+      asChild?: boolean;
+    } & React.RefAttributes<HTMLButtonElement>
+  >;
+
+const DropdownMenuSubTriggerPrimitive =
+  DropdownMenuPrimitive.SubTrigger as React.ForwardRefExoticComponent<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+      children?: React.ReactNode;
+      className?: string;
+    } & React.RefAttributes<HTMLDivElement>
+  >;
+
+const DropdownMenuRadioGroupPrimitive =
+  DropdownMenuPrimitive.RadioGroup as React.ForwardRefExoticComponent<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup> & {
+      children?: React.ReactNode;
+    } & React.RefAttributes<HTMLDivElement>
+  >;
+
+const DropdownMenuItemPrimitive = DropdownMenuPrimitive.Item as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.HTMLAttributes<HTMLDivElement> &
+    React.RefAttributes<HTMLDivElement>
+>;
+
+const DropdownMenuRadioItemPrimitive =
+  DropdownMenuPrimitive.RadioItem as React.ForwardRefExoticComponent<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+      children?: React.ReactNode;
+      className?: string;
+    } & React.HTMLAttributes<HTMLDivElement> &
+      React.RefAttributes<HTMLDivElement>
+  >;
+
+const DropdownMenuLabelPrimitive = DropdownMenuPrimitive.Label as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const DropdownMenuCheckboxItemPrimitive =
+  DropdownMenuPrimitive.CheckboxItem as React.ForwardRefExoticComponent<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+      children?: React.ReactNode;
+      className?: string;
+    } & React.RefAttributes<HTMLDivElement>
+  >;
+
+const DropdownMenuItemIndicatorPrimitive =
+  DropdownMenuPrimitive.ItemIndicator as React.ForwardRefExoticComponent<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.ItemIndicator> & {
+      children?: React.ReactNode;
+    } & React.RefAttributes<HTMLSpanElement>
+  >;
+
+const DropdownMenuSeparatorPrimitive =
+  DropdownMenuPrimitive.Separator as React.ForwardRefExoticComponent<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
+      className?: string;
+    } & React.RefAttributes<HTMLDivElement>
+  >;
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+function DropdownMenuTrigger({
+  children,
+  asChild,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger> & {
+  children?: React.ReactNode;
+  asChild?: boolean;
+}) {
+  return (
+    <DropdownMenuTriggerPrimitive asChild={asChild} {...props}>
+      {children}
+    </DropdownMenuTriggerPrimitive>
+  );
+}
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+function DropdownMenuRadioGroup({
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup> & { children?: React.ReactNode }) {
+  return <DropdownMenuRadioGroupPrimitive {...props}>{children}</DropdownMenuRadioGroupPrimitive>;
+}
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuSubTriggerPrimitive
+    ref={ref}
+    className={cn(
+      'flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent hover:bg-accent',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuSubTriggerPrimitive>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
+    className?: string;
+  }
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.SubContent
+      ref={ref}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    className?: string;
+  }
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    children?: React.ReactNode;
+  } & React.HTMLAttributes<HTMLDivElement>
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuItemPrimitive
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed hover:bg-accent',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </DropdownMenuItemPrimitive>
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+    className?: string;
+    children?: React.ReactNode;
+  }
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuCheckboxItemPrimitive
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed hover:bg-accent',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicatorPrimitive>
+        <Check className="h-4 w-4" />
+      </DropdownMenuItemIndicatorPrimitive>
+    </span>
+    {children}
+  </DropdownMenuCheckboxItemPrimitive>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+    children?: React.ReactNode;
+  } & React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuRadioItemPrimitive
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed hover:bg-accent',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicatorPrimitive>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuItemIndicatorPrimitive>
+    </span>
+    {children}
+  </DropdownMenuRadioItemPrimitive>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuLabelPrimitive
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+    {...props}
+  >
+    {children}
+  </DropdownMenuLabelPrimitive>
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
+    className?: string;
+  }
+>(({ className, ...props }, ref) => (
+  <DropdownMenuSeparatorPrimitive
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest text-brand-400/70', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
diff --git a/temp_repo/apps/ui/src/components/ui/error-state.tsx b/temp_repo/apps/ui/src/components/ui/error-state.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3ac336af63eb07e0da180b2ce2a0c78bbd6aaef5
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/error-state.tsx
@@ -0,0 +1,36 @@
+import { CircleDot, RefreshCw } from 'lucide-react';
+import { Button } from './button';
+
+interface ErrorStateProps {
+  /** Error message to display */
+  error: string;
+  /** Title for the error state (default: "Failed to Load") */
+  title?: string;
+  /** Callback when retry button is clicked */
+  onRetry?: () => void;
+  /** Text for the retry button (default: "Try Again") */
+  retryText?: string;
+}
+
+export function ErrorState({
+  error,
+  title = 'Failed to Load',
+  onRetry,
+  retryText = 'Try Again',
+}: ErrorStateProps) {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
+      <div className="p-4 rounded-full bg-destructive/10 mb-4">
+        <CircleDot className="h-12 w-12 text-destructive" />
+      </div>
+      <h2 className="text-lg font-medium mb-2">{title}</h2>
+      <p className="text-muted-foreground max-w-md mb-4">{error}</p>
+      {onRetry && (
+        <Button variant="outline" onClick={onRetry}>
+          <RefreshCw className="h-4 w-4 mr-2" />
+          {retryText}
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/feature-image-upload.tsx b/temp_repo/apps/ui/src/components/ui/feature-image-upload.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..23837cc1613a3e9a9b533918337833e3ad262e3c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/feature-image-upload.tsx
@@ -0,0 +1,270 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { cn } from '@/lib/utils';
+
+const logger = createLogger('FeatureImageUpload');
+import { ImageIcon, X } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import {
+  fileToBase64,
+  generateImageId,
+  ACCEPTED_IMAGE_TYPES,
+  DEFAULT_MAX_FILE_SIZE,
+  DEFAULT_MAX_FILES,
+  validateImageFile,
+} from '@/lib/image-utils';
+
+export interface FeatureImage {
+  id: string;
+  data: string; // base64 encoded
+  mimeType: string;
+  filename: string;
+  size: number;
+}
+
+interface FeatureImageUploadProps {
+  images: FeatureImage[];
+  onImagesChange: (images: FeatureImage[]) => void;
+  maxFiles?: number;
+  maxFileSize?: number; // in bytes, default 10MB
+  className?: string;
+  disabled?: boolean;
+}
+
+export function FeatureImageUpload({
+  images,
+  onImagesChange,
+  maxFiles = DEFAULT_MAX_FILES,
+  maxFileSize = DEFAULT_MAX_FILE_SIZE,
+  className,
+  disabled = false,
+}: FeatureImageUploadProps) {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const processFiles = useCallback(
+    async (files: FileList) => {
+      if (disabled || isProcessing) return;
+
+      setIsProcessing(true);
+      const newImages: FeatureImage[] = [];
+      const errors: string[] = [];
+
+      for (const file of Array.from(files)) {
+        // Validate file
+        const validation = validateImageFile(file, maxFileSize);
+        if (!validation.isValid) {
+          errors.push(validation.error!);
+          continue;
+        }
+
+        // Check if we've reached max files
+        if (newImages.length + images.length >= maxFiles) {
+          errors.push(`Maximum ${maxFiles} images allowed.`);
+          break;
+        }
+
+        try {
+          const base64 = await fileToBase64(file);
+          const imageAttachment: FeatureImage = {
+            id: generateImageId(),
+            data: base64,
+            mimeType: file.type,
+            filename: file.name,
+            size: file.size,
+          };
+          newImages.push(imageAttachment);
+        } catch {
+          errors.push(`${file.name}: Failed to process image.`);
+        }
+      }
+
+      if (errors.length > 0) {
+        logger.warn('Image upload errors:', errors);
+      }
+
+      if (newImages.length > 0) {
+        onImagesChange([...images, ...newImages]);
+      }
+
+      setIsProcessing(false);
+    },
+    [disabled, isProcessing, images, maxFiles, maxFileSize, onImagesChange]
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragOver(false);
+
+      if (disabled) return;
+
+      const files = e.dataTransfer.files;
+      if (files.length > 0) {
+        processFiles(files);
+      }
+    },
+    [disabled, processFiles]
+  );
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!disabled) {
+        setIsDragOver(true);
+      }
+    },
+    [disabled]
+  );
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  }, []);
+
+  const handleFileSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (files && files.length > 0) {
+        processFiles(files);
+      }
+      // Reset the input so the same file can be selected again
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    },
+    [processFiles]
+  );
+
+  const handleBrowseClick = useCallback(() => {
+    if (!disabled && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, [disabled]);
+
+  const removeImage = useCallback(
+    (imageId: string) => {
+      onImagesChange(images.filter((img) => img.id !== imageId));
+    },
+    [images, onImagesChange]
+  );
+
+  const clearAllImages = useCallback(() => {
+    onImagesChange([]);
+  }, [onImagesChange]);
+
+  return (
+    <div className={cn('relative', className)}>
+      {/* Hidden file input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        accept={ACCEPTED_IMAGE_TYPES.join(',')}
+        onChange={handleFileSelect}
+        className="hidden"
+        disabled={disabled}
+        data-testid="feature-image-input"
+      />
+
+      {/* Drop zone */}
+      <div
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onClick={handleBrowseClick}
+        className={cn(
+          'relative rounded-lg border-2 border-dashed transition-all duration-200 cursor-pointer',
+          {
+            'border-blue-400 bg-blue-50 dark:bg-blue-950/20': isDragOver && !disabled,
+            'border-muted-foreground/25': !isDragOver && !disabled,
+            'border-muted-foreground/10 opacity-50 cursor-not-allowed': disabled,
+            'hover:border-blue-400 hover:bg-blue-50/50 dark:hover:bg-blue-950/10':
+              !disabled && !isDragOver,
+          }
+        )}
+        data-testid="feature-image-dropzone"
+      >
+        <div className="flex flex-col items-center justify-center p-4 text-center">
+          <div
+            className={cn(
+              'rounded-full p-2 mb-2',
+              isDragOver && !disabled ? 'bg-blue-100 dark:bg-blue-900/30' : 'bg-muted'
+            )}
+          >
+            {isProcessing ? (
+              <Spinner size="md" />
+            ) : (
+              <ImageIcon className="h-5 w-5 text-muted-foreground" />
+            )}
+          </div>
+          <p className="text-sm text-muted-foreground">
+            {isDragOver && !disabled ? 'Drop images here' : 'Click or drag images here'}
+          </p>
+          <p className="text-xs text-muted-foreground mt-1">
+            Up to {maxFiles} images, max {Math.round(maxFileSize / (1024 * 1024))}MB each
+          </p>
+        </div>
+      </div>
+
+      {/* Image previews */}
+      {images.length > 0 && (
+        <div className="mt-3 space-y-2" data-testid="feature-image-previews">
+          <div className="flex items-center justify-between">
+            <p className="text-xs font-medium text-foreground">
+              {images.length} image{images.length > 1 ? 's' : ''} selected
+            </p>
+            <button
+              type="button"
+              onClick={clearAllImages}
+              className="text-xs text-muted-foreground hover:text-foreground"
+              disabled={disabled}
+            >
+              Clear all
+            </button>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {images.map((image) => (
+              <div
+                key={image.id}
+                className="relative group rounded-md border border-muted bg-muted/50 overflow-hidden"
+                data-testid={`feature-image-preview-${image.id}`}
+              >
+                {/* Image thumbnail */}
+                <div className="w-16 h-16 flex items-center justify-center">
+                  <img
+                    src={image.data}
+                    alt={image.filename}
+                    className="max-w-full max-h-full object-contain"
+                  />
+                </div>
+                {/* Remove button */}
+                {!disabled && (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      removeImage(image.id);
+                    }}
+                    className="absolute top-0.5 right-0.5 p-0.5 rounded-full bg-destructive text-destructive-foreground opacity-0 group-hover:opacity-100 transition-opacity"
+                    data-testid={`remove-image-${image.id}`}
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                )}
+                {/* Filename tooltip on hover */}
+                <div className="absolute bottom-0 left-0 right-0 bg-black/60 px-1 py-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <p className="text-[10px] text-white truncate">{image.filename}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/git-diff-panel.tsx b/temp_repo/apps/ui/src/components/ui/git-diff-panel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fd673592682fea5cc142faca012408e077fd39b7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/git-diff-panel.tsx
@@ -0,0 +1,961 @@
+import { useState, useMemo, useCallback } from 'react';
+import { cn } from '@/lib/utils';
+import {
+  File,
+  FileText,
+  FilePlus,
+  FileX,
+  FilePen,
+  ChevronDown,
+  ChevronRight,
+  RefreshCw,
+  GitBranch,
+  GitMerge,
+  AlertCircle,
+  Plus,
+  Minus,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { TruncatedFilePath } from '@/components/ui/truncated-file-path';
+import { CodeMirrorDiffView } from '@/components/ui/codemirror-diff-view';
+import { Button } from './button';
+import { useWorktreeDiffs, useGitDiffs } from '@/hooks/queries';
+import { getElectronAPI } from '@/lib/electron';
+import { toast } from 'sonner';
+import { parseDiff, splitDiffByFile } from '@/lib/diff-utils';
+import type { ParsedFileDiff } from '@/lib/diff-utils';
+import type { FileStatus, MergeStateInfo } from '@/types/electron';
+
+interface GitDiffPanelProps {
+  projectPath: string;
+  featureId: string;
+  className?: string;
+  /** Whether to show the panel in a compact/minimized state initially */
+  compact?: boolean;
+  /** Whether worktrees are enabled - if false, shows diffs from main project */
+  useWorktrees?: boolean;
+  /** Whether to show stage/unstage controls for each file */
+  enableStaging?: boolean;
+  /** The worktree path to use for staging operations (required when enableStaging is true) */
+  worktreePath?: string;
+}
+
+const getFileIcon = (status: string) => {
+  switch (status) {
+    case 'A':
+    case '?':
+      return <FilePlus className="w-4 h-4 text-green-500" />;
+    case 'D':
+      return <FileX className="w-4 h-4 text-red-500" />;
+    case 'M':
+    case 'U':
+      return <FilePen className="w-4 h-4 text-amber-500" />;
+    case 'R':
+    case 'C':
+      return <File className="w-4 h-4 text-blue-500" />;
+    default:
+      return <FileText className="w-4 h-4 text-muted-foreground" />;
+  }
+};
+
+const getStatusBadgeColor = (status: string) => {
+  switch (status) {
+    case 'A':
+    case '?':
+      return 'bg-green-500/20 text-green-400 border-green-500/30';
+    case 'D':
+      return 'bg-red-500/20 text-red-400 border-red-500/30';
+    case 'M':
+    case 'U':
+      return 'bg-amber-500/20 text-amber-400 border-amber-500/30';
+    case 'R':
+    case 'C':
+      return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+    default:
+      return 'bg-muted text-muted-foreground border-border';
+  }
+};
+
+const getStatusDisplayName = (status: string) => {
+  switch (status) {
+    case 'A':
+      return 'Added';
+    case '?':
+      return 'Untracked';
+    case 'D':
+      return 'Deleted';
+    case 'M':
+      return 'Modified';
+    case 'U':
+      return 'Updated';
+    case 'R':
+      return 'Renamed';
+    case 'C':
+      return 'Copied';
+    default:
+      return 'Changed';
+  }
+};
+
+/**
+ * Determine the staging state of a file based on its indexStatus and workTreeStatus
+ */
+function getStagingState(file: FileStatus): 'staged' | 'unstaged' | 'partial' {
+  const idx = file.indexStatus ?? ' ';
+  const wt = file.workTreeStatus ?? ' ';
+
+  // Untracked files
+  if (idx === '?' && wt === '?') return 'unstaged';
+
+  const hasIndexChanges = idx !== ' ' && idx !== '?';
+  const hasWorkTreeChanges = wt !== ' ' && wt !== '?';
+
+  if (hasIndexChanges && hasWorkTreeChanges) return 'partial';
+  if (hasIndexChanges) return 'staged';
+  return 'unstaged';
+}
+
+function StagingBadge({ state }: { state: 'staged' | 'unstaged' | 'partial' }) {
+  if (state === 'staged') {
+    return (
+      <span className="text-[10px] px-1.5 py-0.5 rounded border font-medium bg-green-500/15 text-green-400 border-green-500/30">
+        Staged
+      </span>
+    );
+  }
+  if (state === 'partial') {
+    return (
+      <span className="text-[10px] px-1.5 py-0.5 rounded border font-medium bg-amber-500/15 text-amber-400 border-amber-500/30">
+        Partial
+      </span>
+    );
+  }
+  return (
+    <span className="text-[10px] px-1.5 py-0.5 rounded border font-medium bg-muted text-muted-foreground border-border">
+      Unstaged
+    </span>
+  );
+}
+
+function MergeBadge({ mergeType }: { mergeType?: string }) {
+  if (!mergeType) return null;
+
+  const label = (() => {
+    switch (mergeType) {
+      case 'both-modified':
+        return 'Both Modified';
+      case 'added-by-us':
+        return 'Added by Us';
+      case 'added-by-them':
+        return 'Added by Them';
+      case 'deleted-by-us':
+        return 'Deleted by Us';
+      case 'deleted-by-them':
+        return 'Deleted by Them';
+      case 'both-added':
+        return 'Both Added';
+      case 'both-deleted':
+        return 'Both Deleted';
+      case 'merged':
+        return 'Merged';
+      default:
+        return 'Merge';
+    }
+  })();
+
+  return (
+    <span className="text-[10px] px-1.5 py-0.5 rounded border font-medium bg-purple-500/15 text-purple-400 border-purple-500/30 inline-flex items-center gap-1">
+      <GitMerge className="w-2.5 h-2.5" />
+      {label}
+    </span>
+  );
+}
+
+function MergeStateBanner({ mergeState }: { mergeState: MergeStateInfo }) {
+  // Completed merge commit (HEAD is a merge)
+  if (mergeState.isMergeCommit && !mergeState.isMerging) {
+    return (
+      <div className="mx-4 mt-3 flex items-start gap-2 p-3 rounded-md bg-purple-500/10 border border-purple-500/20">
+        <GitMerge className="w-4 h-4 text-purple-500 mt-0.5 flex-shrink-0" />
+        <div className="text-sm">
+          <span className="font-medium text-purple-400">Merge commit</span>
+          <span className="text-purple-400/80 ml-1">
+            &mdash; {mergeState.mergeAffectedFiles.length} file
+            {mergeState.mergeAffectedFiles.length !== 1 ? 's' : ''} changed in merge
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  // In-progress merge/rebase/cherry-pick
+  const operationLabel =
+    mergeState.mergeOperationType === 'cherry-pick'
+      ? 'Cherry-pick'
+      : mergeState.mergeOperationType === 'rebase'
+        ? 'Rebase'
+        : 'Merge';
+
+  return (
+    <div className="mx-4 mt-3 flex items-start gap-2 p-3 rounded-md bg-purple-500/10 border border-purple-500/20">
+      <GitMerge className="w-4 h-4 text-purple-500 mt-0.5 flex-shrink-0" />
+      <div className="text-sm">
+        <span className="font-medium text-purple-400">{operationLabel} in progress</span>
+        {mergeState.conflictFiles.length > 0 ? (
+          <span className="text-purple-400/80 ml-1">
+            &mdash; {mergeState.conflictFiles.length} file
+            {mergeState.conflictFiles.length !== 1 ? 's' : ''} with conflicts
+          </span>
+        ) : mergeState.isCleanMerge ? (
+          <span className="text-purple-400/80 ml-1">
+            &mdash; Clean merge, {mergeState.mergeAffectedFiles.length} file
+            {mergeState.mergeAffectedFiles.length !== 1 ? 's' : ''} affected
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function FileDiffSection({
+  fileDiff,
+  rawDiff,
+  isExpanded,
+  onToggle,
+  fileStatus,
+  enableStaging,
+  onStage,
+  onUnstage,
+  isStagingFile,
+}: {
+  fileDiff: ParsedFileDiff;
+  /** Raw unified diff string for this file, used by CodeMirror merge view */
+  rawDiff?: string;
+  isExpanded: boolean;
+  onToggle: () => void;
+  fileStatus?: FileStatus;
+  enableStaging?: boolean;
+  onStage?: (filePath: string) => void;
+  onUnstage?: (filePath: string) => void;
+  isStagingFile?: boolean;
+}) {
+  const additions = fileDiff.additions;
+  const deletions = fileDiff.deletions;
+
+  const stagingState = fileStatus ? getStagingState(fileStatus) : undefined;
+
+  const isMergeFile = fileStatus?.isMergeAffected;
+
+  return (
+    <div
+      className={cn(
+        'border rounded-lg overflow-hidden',
+        isMergeFile ? 'border-purple-500/40' : 'border-border'
+      )}
+    >
+      <div
+        className={cn(
+          'w-full px-3 py-2 flex flex-col gap-1 text-left transition-colors sm:flex-row sm:items-center sm:gap-2',
+          isMergeFile ? 'bg-purple-500/5 hover:bg-purple-500/10' : 'bg-card hover:bg-accent/50'
+        )}
+      >
+        {/* File name row */}
+        <button onClick={onToggle} className="flex items-center gap-2 flex-1 min-w-0 text-left">
+          {isExpanded ? (
+            <ChevronDown className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+          ) : (
+            <ChevronRight className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+          )}
+          {isMergeFile ? (
+            <GitMerge className="w-4 h-4 text-purple-500 flex-shrink-0" />
+          ) : fileStatus ? (
+            getFileIcon(fileStatus.status)
+          ) : (
+            <FileText className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+          )}
+          <TruncatedFilePath
+            path={fileDiff.filePath}
+            className="flex-1 text-sm font-mono text-foreground"
+          />
+        </button>
+        {/* Indicators & staging row */}
+        <div className="flex items-center gap-2 flex-shrink-0 pl-6 sm:pl-0">
+          {fileStatus?.isMergeAffected && <MergeBadge mergeType={fileStatus.mergeType} />}
+          {enableStaging && stagingState && <StagingBadge state={stagingState} />}
+          {fileDiff.isNew && (
+            <span className="text-xs px-1.5 py-0.5 rounded bg-green-500/20 text-green-400">
+              new
+            </span>
+          )}
+          {fileDiff.isDeleted && (
+            <span className="text-xs px-1.5 py-0.5 rounded bg-red-500/20 text-red-400">
+              deleted
+            </span>
+          )}
+          {fileDiff.isRenamed && (
+            <span className="text-xs px-1.5 py-0.5 rounded bg-blue-500/20 text-blue-400">
+              renamed
+            </span>
+          )}
+          {additions > 0 && <span className="text-xs text-green-400">+{additions}</span>}
+          {deletions > 0 && <span className="text-xs text-red-400">-{deletions}</span>}
+          {enableStaging && onStage && onUnstage && (
+            <div className="flex items-center gap-1 ml-1">
+              {isStagingFile ? (
+                <Spinner size="sm" />
+              ) : stagingState === 'staged' || stagingState === 'partial' ? (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 px-2 text-xs"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onUnstage(fileDiff.filePath);
+                  }}
+                  title="Unstage file"
+                >
+                  <Minus className="w-3 h-3 mr-1" />
+                  Unstage
+                </Button>
+              ) : (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 px-2 text-xs"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onStage(fileDiff.filePath);
+                  }}
+                  title="Stage file"
+                >
+                  <Plus className="w-3 h-3 mr-1" />
+                  Stage
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+      {isExpanded && rawDiff && (
+        <div className="bg-background border-t border-border">
+          <CodeMirrorDiffView fileDiff={rawDiff} filePath={fileDiff.filePath} maxHeight="400px" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function GitDiffPanel({
+  projectPath,
+  featureId,
+  className,
+  compact = true,
+  useWorktrees = false,
+  enableStaging = false,
+  worktreePath,
+}: GitDiffPanelProps) {
+  const [isExpanded, setIsExpanded] = useState(!compact);
+  const [expandedFiles, setExpandedFiles] = useState<Set<string>>(new Set());
+  const [stagingInProgress, setStagingInProgress] = useState<Set<string>>(new Set());
+
+  // Use worktree diffs hook when worktrees are enabled and panel is expanded
+  // Pass undefined for featureId when not using worktrees to disable the query
+  const {
+    data: worktreeDiffsData,
+    isLoading: isLoadingWorktree,
+    error: worktreeError,
+    refetch: refetchWorktree,
+  } = useWorktreeDiffs(
+    useWorktrees && isExpanded ? projectPath : undefined,
+    useWorktrees && isExpanded ? featureId : undefined
+  );
+
+  // Use git diffs hook when worktrees are disabled and panel is expanded
+  const {
+    data: gitDiffsData,
+    isLoading: isLoadingGit,
+    error: gitError,
+    refetch: refetchGit,
+  } = useGitDiffs(projectPath, !useWorktrees && isExpanded);
+
+  // Select the appropriate data based on useWorktrees prop
+  const diffsData = useWorktrees ? worktreeDiffsData : gitDiffsData;
+  const isLoading = useWorktrees ? isLoadingWorktree : isLoadingGit;
+  const queryError = useWorktrees ? worktreeError : gitError;
+
+  // Extract files, diff content, and merge state from the data
+  // Use useMemo to stabilize the files array reference to prevent unnecessary re-renders
+  const files = useMemo(() => diffsData?.files ?? [], [diffsData?.files]);
+  const diffContent = diffsData?.diff ?? '';
+  const mergeState: MergeStateInfo | undefined = diffsData?.mergeState;
+  const error = queryError
+    ? queryError instanceof Error
+      ? queryError.message
+      : 'Failed to load diffs'
+    : null;
+
+  // Refetch function
+  const loadDiffs = useWorktrees ? refetchWorktree : refetchGit;
+
+  // Build a map from file path to FileStatus for quick lookup
+  const fileStatusMap = useMemo(() => {
+    const map = new Map<string, FileStatus>();
+    for (const file of files) {
+      map.set(file.path, file);
+    }
+    return map;
+  }, [files]);
+
+  const parsedDiffs = useMemo(() => {
+    const diffs = parseDiff(diffContent);
+    // Sort: merge-affected files first, then preserve original order
+    if (mergeState?.isMerging || mergeState?.isMergeCommit) {
+      const mergeSet = new Set(mergeState.mergeAffectedFiles);
+      diffs.sort((a, b) => {
+        const aIsMerge =
+          mergeSet.has(a.filePath) || (fileStatusMap.get(a.filePath)?.isMergeAffected ?? false);
+        const bIsMerge =
+          mergeSet.has(b.filePath) || (fileStatusMap.get(b.filePath)?.isMergeAffected ?? false);
+        if (aIsMerge && !bIsMerge) return -1;
+        if (!aIsMerge && bIsMerge) return 1;
+        return 0;
+      });
+    }
+    return diffs;
+  }, [diffContent, mergeState, fileStatusMap]);
+
+  // Build a map from file path to raw diff string for CodeMirror merge view
+  const fileDiffMap = useMemo(() => {
+    const map = new Map<string, string>();
+    const perFileDiffs = splitDiffByFile(diffContent);
+    for (const entry of perFileDiffs) {
+      map.set(entry.filePath, entry.diff);
+    }
+    return map;
+  }, [diffContent]);
+
+  const toggleFile = (filePath: string) => {
+    setExpandedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(filePath)) {
+        next.delete(filePath);
+      } else {
+        next.add(filePath);
+      }
+      return next;
+    });
+  };
+
+  const expandAllFiles = () => {
+    setExpandedFiles(new Set(parsedDiffs.map((d) => d.filePath)));
+  };
+
+  const collapseAllFiles = () => {
+    setExpandedFiles(new Set());
+  };
+
+  // Shared helper that encapsulates all staging/unstaging logic
+  const executeStagingAction = useCallback(
+    async (
+      action: 'stage' | 'unstage',
+      paths: string[],
+      successMessage: string,
+      failurePrefix: string,
+      onStart: () => void,
+      onFinally: () => void
+    ) => {
+      onStart();
+      if (!worktreePath && !projectPath) {
+        toast.error(failurePrefix, {
+          description: 'No project or worktree path configured',
+        });
+        onFinally();
+        return;
+      }
+      try {
+        const api = getElectronAPI();
+        let result: { success: boolean; error?: string } | undefined;
+
+        if (useWorktrees && worktreePath) {
+          if (!api.worktree?.stageFiles) {
+            toast.error(failurePrefix, {
+              description: 'Worktree stage API not available',
+            });
+            return;
+          }
+          result = await api.worktree.stageFiles(worktreePath, paths, action);
+        } else if (!useWorktrees) {
+          if (!api.git?.stageFiles) {
+            toast.error(failurePrefix, { description: 'Git stage API not available' });
+            return;
+          }
+          result = await api.git.stageFiles(projectPath, paths, action);
+        }
+
+        if (!result) {
+          toast.error(failurePrefix, { description: 'Stage API not available' });
+          return;
+        }
+
+        if (!result.success) {
+          toast.error(failurePrefix, { description: result.error });
+          return;
+        }
+
+        // Refetch diffs to reflect the new staging state
+        await loadDiffs();
+        toast.success(successMessage, paths.length === 1 ? { description: paths[0] } : undefined);
+      } catch (err) {
+        toast.error(failurePrefix, {
+          description: err instanceof Error ? err.message : 'Unknown error',
+        });
+      } finally {
+        onFinally();
+      }
+    },
+    [worktreePath, projectPath, useWorktrees, loadDiffs]
+  );
+
+  // Stage/unstage a single file
+  const handleStageFile = useCallback(
+    async (filePath: string) => {
+      if (enableStaging && useWorktrees && !worktreePath) {
+        toast.error('Failed to stage file', {
+          description: 'worktreePath required when useWorktrees is enabled',
+        });
+        return;
+      }
+      await executeStagingAction(
+        'stage',
+        [filePath],
+        'File staged',
+        'Failed to stage file',
+        () => setStagingInProgress((prev) => new Set(prev).add(filePath)),
+        () =>
+          setStagingInProgress((prev) => {
+            const next = new Set(prev);
+            next.delete(filePath);
+            return next;
+          })
+      );
+    },
+    [worktreePath, useWorktrees, enableStaging, executeStagingAction]
+  );
+
+  // Unstage a single file
+  const handleUnstageFile = useCallback(
+    async (filePath: string) => {
+      if (enableStaging && useWorktrees && !worktreePath) {
+        toast.error('Failed to unstage file', {
+          description: 'worktreePath required when useWorktrees is enabled',
+        });
+        return;
+      }
+      await executeStagingAction(
+        'unstage',
+        [filePath],
+        'File unstaged',
+        'Failed to unstage file',
+        () => setStagingInProgress((prev) => new Set(prev).add(filePath)),
+        () =>
+          setStagingInProgress((prev) => {
+            const next = new Set(prev);
+            next.delete(filePath);
+            return next;
+          })
+      );
+    },
+    [worktreePath, useWorktrees, enableStaging, executeStagingAction]
+  );
+
+  const handleStageAll = useCallback(async () => {
+    const allPaths = files.map((f) => f.path);
+    if (allPaths.length === 0) return;
+    if (enableStaging && useWorktrees && !worktreePath) {
+      toast.error('Failed to stage all files', {
+        description: 'worktreePath required when useWorktrees is enabled',
+      });
+      return;
+    }
+    await executeStagingAction(
+      'stage',
+      allPaths,
+      'All files staged',
+      'Failed to stage all files',
+      () => setStagingInProgress(new Set(allPaths)),
+      () => setStagingInProgress(new Set())
+    );
+  }, [worktreePath, useWorktrees, enableStaging, files, executeStagingAction]);
+
+  const handleUnstageAll = useCallback(async () => {
+    const stagedFiles = files.filter((f) => {
+      const state = getStagingState(f);
+      return state === 'staged' || state === 'partial';
+    });
+    const allPaths = stagedFiles.map((f) => f.path);
+    if (allPaths.length === 0) return;
+    if (enableStaging && useWorktrees && !worktreePath) {
+      toast.error('Failed to unstage all files', {
+        description: 'worktreePath required when useWorktrees is enabled',
+      });
+      return;
+    }
+    await executeStagingAction(
+      'unstage',
+      allPaths,
+      'All files unstaged',
+      'Failed to unstage all files',
+      () => setStagingInProgress(new Set(allPaths)),
+      () => setStagingInProgress(new Set())
+    );
+  }, [worktreePath, useWorktrees, enableStaging, files, executeStagingAction]);
+
+  // Compute merge summary
+  const mergeSummary = useMemo(() => {
+    const mergeFiles = files.filter((f) => f.isMergeAffected);
+    if (mergeFiles.length === 0) return null;
+    return {
+      total: mergeFiles.length,
+      conflicted: mergeFiles.filter(
+        (f) => f.mergeType === 'both-modified' || f.mergeType === 'both-added'
+      ).length,
+    };
+  }, [files]);
+
+  // Compute staging summary
+  const stagingSummary = useMemo(() => {
+    if (!enableStaging) return null;
+    let staged = 0;
+    let partial = 0;
+    let unstaged = 0;
+    for (const file of files) {
+      const state = getStagingState(file);
+      if (state === 'staged') staged++;
+      else if (state === 'unstaged') unstaged++;
+      else partial++;
+    }
+    return { staged, partial, unstaged, total: files.length };
+  }, [enableStaging, files]);
+
+  // Total stats (pre-computed by shared parseDiff)
+  const totalAdditions = parsedDiffs.reduce((acc, file) => acc + file.additions, 0);
+  const totalDeletions = parsedDiffs.reduce((acc, file) => acc + file.deletions, 0);
+
+  return (
+    <div
+      className={cn(
+        'rounded-xl border border-border bg-card backdrop-blur-sm overflow-hidden',
+        className
+      )}
+      data-testid="git-diff-panel"
+    >
+      {/* Header */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full px-4 py-3 flex items-center justify-between bg-card hover:bg-accent/50 transition-colors text-left flex-shrink-0"
+        data-testid="git-diff-panel-toggle"
+      >
+        <div className="flex items-center gap-2">
+          {isExpanded ? (
+            <ChevronDown className="w-4 h-4 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="w-4 h-4 text-muted-foreground" />
+          )}
+          <GitBranch className="w-4 h-4 text-brand-500" />
+          <span className="font-medium text-sm text-foreground">Git Changes</span>
+        </div>
+        <div className="flex items-center gap-3 text-xs">
+          {!isExpanded && files.length > 0 && (
+            <>
+              <span className="text-muted-foreground">
+                {files.length} {files.length === 1 ? 'file' : 'files'}
+              </span>
+              {totalAdditions > 0 && <span className="text-green-400">+{totalAdditions}</span>}
+              {totalDeletions > 0 && <span className="text-red-400">-{totalDeletions}</span>}
+            </>
+          )}
+        </div>
+      </button>
+
+      {/* Content */}
+      {isExpanded && (
+        <div className="border-t border-border">
+          {isLoading ? (
+            <div className="flex items-center justify-center gap-2 py-8 text-muted-foreground">
+              <Spinner size="md" />
+              <span className="text-sm">Loading changes...</span>
+            </div>
+          ) : error ? (
+            <div className="flex flex-col items-center justify-center gap-2 py-8 text-muted-foreground">
+              <AlertCircle className="w-5 h-5 text-amber-500" />
+              <span className="text-sm">{error}</span>
+              <Button variant="ghost" size="sm" onClick={() => void loadDiffs()} className="mt-2">
+                <RefreshCw className="w-4 h-4 mr-2" />
+                Retry
+              </Button>
+            </div>
+          ) : files.length === 0 ? (
+            <div className="flex items-center justify-center gap-2 py-8 text-muted-foreground">
+              <span className="text-sm">No changes detected</span>
+            </div>
+          ) : (
+            <div>
+              {/* Merge state banner */}
+              {(mergeState?.isMerging || mergeState?.isMergeCommit) && (
+                <MergeStateBanner mergeState={mergeState} />
+              )}
+
+              {/* Summary bar */}
+              <div className="p-4 pb-2 border-b border-border-glass">
+                <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                  <div className="flex items-center gap-4 flex-wrap">
+                    {(() => {
+                      // Group files by status
+                      const statusGroups = files.reduce(
+                        (acc, file) => {
+                          const status = file.status;
+                          if (!acc[status]) {
+                            acc[status] = {
+                              count: 0,
+                              statusText: getStatusDisplayName(status),
+                              files: [],
+                            };
+                          }
+                          acc[status].count += 1;
+                          acc[status].files.push(file.path);
+                          return acc;
+                        },
+                        {} as Record<string, { count: number; statusText: string; files: string[] }>
+                      );
+
+                      const groups = Object.entries(statusGroups).map(([status, group]) => (
+                        <div
+                          key={status}
+                          className="flex items-center gap-1.5"
+                          title={group.files.join('\n')}
+                          data-testid={`git-status-group-${status.toLowerCase()}`}
+                        >
+                          {getFileIcon(status)}
+                          <span
+                            className={cn(
+                              'text-xs px-1.5 py-0.5 rounded border font-medium',
+                              getStatusBadgeColor(status)
+                            )}
+                          >
+                            {group.count} {group.statusText}
+                          </span>
+                        </div>
+                      ));
+
+                      // Add merge group indicator if merge files exist
+                      if (mergeSummary) {
+                        groups.unshift(
+                          <div
+                            key="merge"
+                            className="flex items-center gap-1.5"
+                            data-testid="git-status-group-merge"
+                          >
+                            <GitMerge className="w-4 h-4 text-purple-500" />
+                            <span className="text-xs px-1.5 py-0.5 rounded border font-medium bg-purple-500/20 text-purple-400 border-purple-500/30">
+                              {mergeSummary.total} Merge
+                            </span>
+                          </div>
+                        );
+                      }
+
+                      return groups;
+                    })()}
+                  </div>
+                  <div className="flex items-center gap-1 flex-wrap">
+                    {enableStaging && stagingSummary && (
+                      <>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={handleStageAll}
+                          className="text-xs h-7"
+                          disabled={
+                            stagingInProgress.size > 0 ||
+                            (stagingSummary.unstaged === 0 && stagingSummary.partial === 0)
+                          }
+                        >
+                          <Plus className="w-3 h-3 mr-1" />
+                          Stage All
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={handleUnstageAll}
+                          className="text-xs h-7"
+                          disabled={
+                            stagingInProgress.size > 0 ||
+                            (stagingSummary.staged === 0 && stagingSummary.partial === 0)
+                          }
+                        >
+                          <Minus className="w-3 h-3 mr-1" />
+                          Unstage All
+                        </Button>
+                      </>
+                    )}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={expandAllFiles}
+                      className="text-xs h-7"
+                    >
+                      Expand All
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={collapseAllFiles}
+                      className="text-xs h-7"
+                    >
+                      Collapse All
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => void loadDiffs()}
+                      className="text-xs h-7"
+                    >
+                      <RefreshCw className="w-3 h-3 mr-1" />
+                      Refresh
+                    </Button>
+                  </div>
+                </div>
+
+                {/* Stats */}
+                <div className="flex items-center gap-4 text-sm mt-2 flex-wrap">
+                  <span className="text-muted-foreground">
+                    {files.length} {files.length === 1 ? 'file' : 'files'} changed
+                  </span>
+                  {totalAdditions > 0 && (
+                    <span className="text-green-400">+{totalAdditions} additions</span>
+                  )}
+                  {totalDeletions > 0 && (
+                    <span className="text-red-400">-{totalDeletions} deletions</span>
+                  )}
+                  {enableStaging && stagingSummary && (
+                    <span className="text-muted-foreground">
+                      {stagingSummary.partial > 0
+                        ? `(${stagingSummary.staged} staged, ${stagingSummary.partial} partial, ${stagingSummary.unstaged} unstaged)`
+                        : `(${stagingSummary.staged} staged, ${stagingSummary.unstaged} unstaged)`}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              {/* File diffs */}
+              <div className="p-4 space-y-3">
+                {parsedDiffs.map((fileDiff) => (
+                  <FileDiffSection
+                    key={fileDiff.filePath}
+                    fileDiff={fileDiff}
+                    rawDiff={fileDiffMap.get(fileDiff.filePath)}
+                    isExpanded={expandedFiles.has(fileDiff.filePath)}
+                    onToggle={() => toggleFile(fileDiff.filePath)}
+                    fileStatus={fileStatusMap.get(fileDiff.filePath)}
+                    enableStaging={enableStaging}
+                    onStage={enableStaging ? handleStageFile : undefined}
+                    onUnstage={enableStaging ? handleUnstageFile : undefined}
+                    isStagingFile={stagingInProgress.has(fileDiff.filePath)}
+                  />
+                ))}
+                {/* Fallback for files that have no diff content (shouldn't happen after fix, but safety net) */}
+                {files.length > 0 && parsedDiffs.length === 0 && (
+                  <div className="space-y-2">
+                    {files.map((file) => {
+                      const stagingState = getStagingState(file);
+                      const isFileMerge = file.isMergeAffected;
+                      return (
+                        <div
+                          key={file.path}
+                          className={cn(
+                            'border rounded-lg overflow-hidden',
+                            isFileMerge ? 'border-purple-500/40' : 'border-border'
+                          )}
+                        >
+                          <div
+                            className={cn(
+                              'w-full px-3 py-2 flex flex-col gap-1 text-left sm:flex-row sm:items-center sm:gap-2',
+                              isFileMerge ? 'bg-purple-500/5 hover:bg-purple-500/10' : 'bg-card'
+                            )}
+                          >
+                            {/* File name row */}
+                            <div className="flex items-center gap-2 flex-1 min-w-0">
+                              {isFileMerge ? (
+                                <GitMerge className="w-4 h-4 text-purple-500 flex-shrink-0" />
+                              ) : (
+                                getFileIcon(file.status)
+                              )}
+                              <TruncatedFilePath
+                                path={file.path}
+                                className="flex-1 text-sm font-mono text-foreground"
+                              />
+                            </div>
+                            {/* Indicators & staging row */}
+                            <div className="flex items-center gap-2 flex-shrink-0 pl-6 sm:pl-0">
+                              {isFileMerge && <MergeBadge mergeType={file.mergeType} />}
+                              {enableStaging && <StagingBadge state={stagingState} />}
+                              <span
+                                className={cn(
+                                  'text-xs px-1.5 py-0.5 rounded border font-medium',
+                                  getStatusBadgeColor(file.status)
+                                )}
+                              >
+                                {getStatusDisplayName(file.status)}
+                              </span>
+                              {enableStaging && (
+                                <div className="flex items-center gap-1 ml-1">
+                                  {stagingInProgress.has(file.path) ? (
+                                    <Spinner size="sm" />
+                                  ) : stagingState === 'staged' || stagingState === 'partial' ? (
+                                    <Button
+                                      variant="ghost"
+                                      size="sm"
+                                      className="h-6 px-2 text-xs"
+                                      onClick={() => void handleUnstageFile(file.path)}
+                                      title="Unstage file"
+                                    >
+                                      <Minus className="w-3 h-3 mr-1" />
+                                      Unstage
+                                    </Button>
+                                  ) : (
+                                    <Button
+                                      variant="ghost"
+                                      size="sm"
+                                      className="h-6 px-2 text-xs"
+                                      onClick={() => void handleStageFile(file.path)}
+                                      title="Stage file"
+                                    >
+                                      <Plus className="w-3 h-3 mr-1" />
+                                      Stage
+                                    </Button>
+                                  )}
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                          <div className="px-4 py-3 text-sm text-muted-foreground bg-background border-t border-border">
+                            {file.status === '?' ? (
+                              <span>New file - content preview not available</span>
+                            ) : file.status === 'D' ? (
+                              <span>File deleted</span>
+                            ) : (
+                              <span>Diff content not available</span>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/header-actions-panel.tsx b/temp_repo/apps/ui/src/components/ui/header-actions-panel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1795dcb526b1fb97ebbb7e46f2dae0fa77b1a2cb
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/header-actions-panel.tsx
@@ -0,0 +1,106 @@
+import { createPortal } from 'react-dom';
+import { X, Menu } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+interface HeaderActionsPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * A slide-out panel for header actions on tablet and below.
+ * Shows as a right-side panel that slides in from the right edge.
+ * On desktop (lg+), this component is hidden and children should be rendered inline.
+ */
+export function HeaderActionsPanel({
+  isOpen,
+  onClose,
+  title = 'Actions',
+  children,
+}: HeaderActionsPanelProps) {
+  // Use portal to render outside parent stacking contexts (backdrop-blur creates stacking context)
+  const panelContent = (
+    <>
+      {/* Mobile backdrop overlay - only shown when isOpen is true on tablet/mobile */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-[60] lg:hidden"
+          onClick={onClose}
+          data-testid="header-actions-backdrop"
+        />
+      )}
+
+      {/* Actions panel */}
+      <div
+        className={cn(
+          // Mobile: fixed position overlay with slide transition from right
+          'fixed inset-y-0 right-0 w-72 z-[70]',
+          'transition-transform duration-200 ease-out',
+          // Hide on mobile when closed, show when open
+          isOpen ? 'translate-x-0' : 'translate-x-full',
+          // Desktop: hidden entirely (actions shown inline in header)
+          'lg:hidden',
+          'flex flex-col',
+          'border-l border-border/50',
+          'bg-gradient-to-b from-card/95 via-card/90 to-card/85 backdrop-blur-xl'
+        )}
+      >
+        {/* Panel header with close button */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border/50">
+          <span className="text-sm font-semibold text-foreground">{title}</span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClose}
+            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+            aria-label="Close actions panel"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+
+        {/* Panel content */}
+        <div className="flex-1 overflow-y-auto p-4 space-y-3">{children}</div>
+      </div>
+    </>
+  );
+
+  // Render to document.body to escape stacking context
+  if (typeof document !== 'undefined') {
+    return createPortal(panelContent, document.body);
+  }
+
+  return panelContent;
+}
+
+interface HeaderActionsPanelTriggerProps {
+  isOpen: boolean;
+  onToggle: () => void;
+  className?: string;
+}
+
+/**
+ * Toggle button for the HeaderActionsPanel.
+ * Only visible on tablet and below (lg:hidden).
+ */
+export function HeaderActionsPanelTrigger({
+  isOpen,
+  onToggle,
+  className,
+}: HeaderActionsPanelTriggerProps) {
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={onToggle}
+      className={cn('h-8 w-8 p-0 text-muted-foreground hover:text-foreground lg:hidden', className)}
+      aria-label={isOpen ? 'Close actions menu' : 'Open actions menu'}
+      data-testid="header-actions-panel-trigger"
+    >
+      {isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+    </Button>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/hotkey-button.tsx b/temp_repo/apps/ui/src/components/ui/hotkey-button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d81d81dd603e7307d44dcfa5f614e2a56fe98a0d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/hotkey-button.tsx
@@ -0,0 +1,290 @@
+import React, { useEffect, useCallback, useRef } from 'react';
+import { Button, buttonVariants } from './button';
+import { cn } from '@/lib/utils';
+import type { VariantProps } from 'class-variance-authority';
+
+export interface HotkeyConfig {
+  /** The key to trigger the hotkey (e.g., "Enter", "s", "n") */
+  key: string;
+  /** Whether the Cmd/Ctrl modifier is required */
+  cmdCtrl?: boolean;
+  /** Whether the Shift modifier is required */
+  shift?: boolean;
+  /** Whether the Alt/Option modifier is required */
+  alt?: boolean;
+  /** Custom display label for the hotkey (overrides auto-generated label) */
+  label?: string;
+}
+
+export interface HotkeyButtonProps
+  extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
+  /** Hotkey configuration - can be a simple key string or a full config object */
+  hotkey?: string | HotkeyConfig;
+  /** Whether to show the hotkey indicator badge */
+  showHotkeyIndicator?: boolean;
+  /** Whether the hotkey listener is active (registers keyboard listener). Set to false if hotkey is already handled elsewhere. */
+  hotkeyActive?: boolean;
+  /** Optional scope element ref - hotkey will only work when this element is visible */
+  scopeRef?: React.RefObject<HTMLElement | null>;
+  /** Callback when hotkey is triggered */
+  onHotkeyTrigger?: () => void;
+  /** Whether to use the Slot component for composition */
+  asChild?: boolean;
+}
+
+/**
+ * Get the modifier key symbol based on platform
+ */
+function getModifierSymbol(isMac: boolean): string {
+  return isMac ? '⌘' : 'Ctrl';
+}
+
+/**
+ * Parse hotkey config into a normalized format
+ */
+function parseHotkeyConfig(hotkey: string | HotkeyConfig): HotkeyConfig {
+  if (typeof hotkey === 'string') {
+    return { key: hotkey };
+  }
+  return hotkey;
+}
+
+/**
+ * Generate the display label for the hotkey
+ */
+function getHotkeyDisplayLabel(config: HotkeyConfig, isMac: boolean): React.ReactNode {
+  if (config.label) {
+    return config.label;
+  }
+
+  const parts: React.ReactNode[] = [];
+
+  if (config.cmdCtrl) {
+    parts.push(
+      <span key="mod" className="leading-none flex items-center justify-center">
+        {getModifierSymbol(isMac)}
+      </span>
+    );
+  }
+
+  if (config.shift) {
+    parts.push(
+      <span key="shift" className="leading-none flex items-center justify-center">
+        ⇧
+      </span>
+    );
+  }
+
+  if (config.alt) {
+    parts.push(
+      <span key="alt" className="leading-none flex items-center justify-center">
+        {isMac ? '⌥' : 'Alt'}
+      </span>
+    );
+  }
+
+  // Convert key to display format
+  let keyDisplay = config.key;
+  switch (config.key.toLowerCase()) {
+    case 'enter':
+      keyDisplay = '↵';
+      break;
+    case 'escape':
+    case 'esc':
+      keyDisplay = 'Esc';
+      break;
+    case 'arrowup':
+      keyDisplay = '↑';
+      break;
+    case 'arrowdown':
+      keyDisplay = '↓';
+      break;
+    case 'arrowleft':
+      keyDisplay = '←';
+      break;
+    case 'arrowright':
+      keyDisplay = '→';
+      break;
+    case 'backspace':
+      keyDisplay = '⌫';
+      break;
+    case 'delete':
+      keyDisplay = '⌦';
+      break;
+    case 'tab':
+      keyDisplay = '⇥';
+      break;
+    case ' ':
+      keyDisplay = 'Space';
+      break;
+    default:
+      // Capitalize single letters
+      if (config.key.length === 1) {
+        keyDisplay = config.key.toUpperCase();
+      }
+  }
+
+  parts.push(
+    <span key="key" className="leading-none flex items-center justify-center">
+      {keyDisplay}
+    </span>
+  );
+
+  return <span className="inline-flex items-center gap-1.5">{parts}</span>;
+}
+
+/**
+ * Check if an element is a form input
+ */
+function isInputElement(element: Element | null): boolean {
+  if (!element) return false;
+
+  const tagName = element.tagName.toLowerCase();
+  if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
+    return true;
+  }
+
+  if (element.getAttribute('contenteditable') === 'true') {
+    return true;
+  }
+
+  const role = element.getAttribute('role');
+  if (role === 'textbox' || role === 'searchbox' || role === 'combobox') {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * A button component that supports keyboard hotkeys
+ *
+ * Features:
+ * - Automatic hotkey listening when mounted
+ * - Visual hotkey indicator badge
+ * - Support for modifier keys (Cmd/Ctrl, Shift, Alt)
+ * - Respects focus context (doesn't trigger when typing in inputs)
+ * - Scoped activation via scopeRef
+ */
+export function HotkeyButton({
+  hotkey,
+  showHotkeyIndicator = true,
+  hotkeyActive = true,
+  scopeRef,
+  onHotkeyTrigger,
+  onClick,
+  disabled,
+  children,
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: HotkeyButtonProps) {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [isMac, setIsMac] = React.useState(true);
+
+  // Detect platform on mount
+  useEffect(() => {
+    setIsMac(navigator.platform.toLowerCase().includes('mac'));
+  }, []);
+
+  const config = hotkey ? parseHotkeyConfig(hotkey) : null;
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!config || !hotkeyActive || disabled) return;
+
+      // Don't trigger when typing in inputs (unless explicitly scoped or using cmdCtrl modifier)
+      // cmdCtrl shortcuts like Cmd+Enter should work even in inputs as they're intentional submit actions
+      if (!scopeRef && !config.cmdCtrl && isInputElement(document.activeElement)) {
+        return;
+      }
+
+      // Check modifier keys
+      const cmdCtrlPressed = event.metaKey || event.ctrlKey;
+      const shiftPressed = event.shiftKey;
+      const altPressed = event.altKey;
+
+      // Validate modifier requirements
+      if (config.cmdCtrl && !cmdCtrlPressed) return;
+      if (!config.cmdCtrl && cmdCtrlPressed) return;
+      if (config.shift && !shiftPressed) return;
+      if (!config.shift && shiftPressed) return;
+      if (config.alt && !altPressed) return;
+      if (!config.alt && altPressed) return;
+
+      // Check if the key matches
+      if (event.key.toLowerCase() !== config.key.toLowerCase()) return;
+
+      // If scoped, check that the scope element is visible
+      if (scopeRef && scopeRef.current) {
+        const scopeEl = scopeRef.current;
+        const isVisible =
+          scopeEl.offsetParent !== null || getComputedStyle(scopeEl).display !== 'none';
+        if (!isVisible) return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      // Trigger the click handler or custom onHotkeyTrigger
+      if (onHotkeyTrigger) {
+        onHotkeyTrigger();
+      } else if (onClick) {
+        onClick(event as unknown as React.MouseEvent<HTMLButtonElement>);
+      } else if (buttonRef.current) {
+        buttonRef.current.click();
+      }
+    },
+    [config, hotkeyActive, disabled, scopeRef, onHotkeyTrigger, onClick]
+  );
+
+  // Set up global key listener
+  useEffect(() => {
+    if (!config || !hotkeyActive) return;
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [config, hotkeyActive, handleKeyDown]);
+
+  // Render the hotkey indicator
+  const hotkeyIndicator =
+    config && showHotkeyIndicator ? (
+      <span
+        className="px-2 py-0.5 text-[10px] font-mono rounded bg-primary-foreground/10 border border-primary-foreground/20 inline-flex items-center gap-1.5"
+        data-testid="hotkey-indicator"
+      >
+        {getHotkeyDisplayLabel(config, isMac)}
+      </span>
+    ) : null;
+
+  return (
+    <Button
+      ref={buttonRef}
+      variant={variant}
+      size={size}
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(className)}
+      asChild={asChild}
+      {...props}
+    >
+      {typeof children === 'string' ? (
+        <>
+          {children}
+          {hotkeyIndicator}
+        </>
+      ) : (
+        <>
+          {children}
+          {hotkeyIndicator}
+        </>
+      )}
+    </Button>
+  );
+}
+
+export { getHotkeyDisplayLabel, parseHotkeyConfig };
diff --git a/temp_repo/apps/ui/src/components/ui/image-drop-zone.tsx b/temp_repo/apps/ui/src/components/ui/image-drop-zone.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dcaf892dd440bf7dbfa9a9ba575195cc9425bd30
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/image-drop-zone.tsx
@@ -0,0 +1,287 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { cn } from '@/lib/utils';
+
+const logger = createLogger('ImageDropZone');
+import { ImageIcon, X } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import type { ImageAttachment } from '@/store/app-store';
+import {
+  fileToBase64,
+  generateImageId,
+  formatFileSize,
+  validateImageFile,
+  ACCEPTED_IMAGE_TYPES,
+  DEFAULT_MAX_FILE_SIZE,
+  DEFAULT_MAX_FILES,
+} from '@/lib/image-utils';
+
+interface ImageDropZoneProps {
+  onImagesSelected: (images: ImageAttachment[]) => void;
+  maxFiles?: number;
+  maxFileSize?: number; // in bytes, default 10MB
+  className?: string;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  images?: ImageAttachment[]; // Optional controlled images prop
+}
+
+export function ImageDropZone({
+  onImagesSelected,
+  maxFiles = DEFAULT_MAX_FILES,
+  maxFileSize = DEFAULT_MAX_FILE_SIZE,
+  className,
+  children,
+  disabled = false,
+  images,
+}: ImageDropZoneProps) {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [internalImages, setInternalImages] = useState<ImageAttachment[]>([]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Use controlled images if provided, otherwise use internal state
+  const selectedImages = images ?? internalImages;
+
+  // Update images - for controlled mode, just call the callback; for uncontrolled, also update internal state
+  const updateImages = useCallback(
+    (newImages: ImageAttachment[]) => {
+      if (images === undefined) {
+        setInternalImages(newImages);
+      }
+      onImagesSelected(newImages);
+    },
+    [images, onImagesSelected]
+  );
+
+  const processFiles = useCallback(
+    async (files: FileList) => {
+      if (disabled || isProcessing) return;
+
+      setIsProcessing(true);
+      const newImages: ImageAttachment[] = [];
+      const errors: string[] = [];
+
+      for (const file of Array.from(files)) {
+        // Validate file
+        const validation = validateImageFile(file, maxFileSize);
+        if (!validation.isValid) {
+          errors.push(validation.error!);
+          continue;
+        }
+
+        // Check if we've reached max files
+        if (newImages.length + selectedImages.length >= maxFiles) {
+          errors.push(`Maximum ${maxFiles} images allowed.`);
+          break;
+        }
+
+        try {
+          const base64 = await fileToBase64(file);
+          const imageAttachment: ImageAttachment = {
+            id: generateImageId(),
+            data: base64,
+            mimeType: file.type,
+            filename: file.name,
+            size: file.size,
+          };
+          newImages.push(imageAttachment);
+        } catch {
+          errors.push(`${file.name}: Failed to process image.`);
+        }
+      }
+
+      if (errors.length > 0) {
+        logger.warn('Image upload errors:', errors);
+      }
+
+      if (newImages.length > 0) {
+        const allImages = [...selectedImages, ...newImages];
+        updateImages(allImages);
+      }
+
+      setIsProcessing(false);
+    },
+    [disabled, isProcessing, maxFiles, maxFileSize, selectedImages, updateImages]
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragOver(false);
+
+      if (disabled) return;
+
+      const files = e.dataTransfer.files;
+      if (files.length > 0) {
+        processFiles(files);
+      }
+    },
+    [disabled, processFiles]
+  );
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!disabled) {
+        setIsDragOver(true);
+      }
+    },
+    [disabled]
+  );
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  }, []);
+
+  const handleFileSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const files = e.target.files;
+      if (files && files.length > 0) {
+        processFiles(files);
+      }
+      // Reset the input so the same file can be selected again
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    },
+    [processFiles]
+  );
+
+  const handleBrowseClick = useCallback(() => {
+    if (!disabled && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, [disabled]);
+
+  const removeImage = useCallback(
+    (imageId: string) => {
+      const updated = selectedImages.filter((img) => img.id !== imageId);
+      updateImages(updated);
+    },
+    [selectedImages, updateImages]
+  );
+
+  const clearAllImages = useCallback(() => {
+    updateImages([]);
+  }, [updateImages]);
+
+  return (
+    <div className={cn('relative', className)}>
+      {/* Hidden file input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        accept={ACCEPTED_IMAGE_TYPES.join(',')}
+        onChange={handleFileSelect}
+        className="hidden"
+        disabled={disabled}
+      />
+
+      {/* Drop zone */}
+      <div
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        className={cn('relative rounded-lg border-2 border-dashed transition-all duration-200', {
+          'border-blue-400 bg-blue-50 dark:bg-blue-950/20': isDragOver && !disabled,
+          'border-muted-foreground/25': !isDragOver && !disabled,
+          'border-muted-foreground/10 opacity-50 cursor-not-allowed': disabled,
+          'hover:border-blue-400 hover:bg-blue-50/50 dark:hover:bg-blue-950/10':
+            !disabled && !isDragOver,
+        })}
+      >
+        {children || (
+          <div className="flex flex-col items-center justify-center p-6 text-center">
+            <div
+              className={cn(
+                'rounded-full p-3 mb-4',
+                isDragOver && !disabled ? 'bg-blue-100 dark:bg-blue-900/30' : 'bg-muted'
+              )}
+            >
+              {isProcessing ? (
+                <Spinner size="lg" />
+              ) : (
+                <ImageIcon className="h-6 w-6 text-muted-foreground" />
+              )}
+            </div>
+            <p className="text-sm font-medium text-foreground mb-1">
+              {isDragOver && !disabled
+                ? 'Drop your images here'
+                : 'Drag images here or click to browse'}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              {maxFiles > 1 ? `Up to ${maxFiles} images` : '1 image'}, max{' '}
+              {Math.round(maxFileSize / (1024 * 1024))}MB each
+            </p>
+            {!disabled && (
+              <button
+                onClick={handleBrowseClick}
+                className="mt-2 text-xs text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+                disabled={isProcessing}
+              >
+                Browse files
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Image previews */}
+      {selectedImages.length > 0 && (
+        <div className="mt-3 space-y-2">
+          <div className="flex items-center justify-between">
+            <p className="text-xs font-medium text-foreground">
+              {selectedImages.length} image{selectedImages.length > 1 ? 's' : ''} selected
+            </p>
+            <button
+              onClick={clearAllImages}
+              className="text-xs text-muted-foreground hover:text-foreground"
+              disabled={disabled}
+            >
+              Clear all
+            </button>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {selectedImages.map((image) => (
+              <div
+                key={image.id}
+                className="relative group rounded-md border border-muted bg-muted/50 p-2 flex items-center space-x-2"
+              >
+                {/* Image thumbnail */}
+                <div className="w-8 h-8 rounded overflow-hidden bg-muted shrink-0">
+                  <img
+                    src={image.data}
+                    alt={image.filename}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                {/* Image info */}
+                <div className="min-w-0 flex-1">
+                  <p className="text-xs font-medium text-foreground truncate">{image.filename}</p>
+                  {image.size !== undefined && (
+                    <p className="text-xs text-muted-foreground">{formatFileSize(image.size)}</p>
+                  )}
+                </div>
+                {/* Remove button */}
+                {!disabled && image.id && (
+                  <button
+                    onClick={() => removeImage(image.id!)}
+                    className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-full hover:bg-destructive hover:text-destructive-foreground text-muted-foreground"
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/input.tsx b/temp_repo/apps/ui/src/components/ui/input.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a757fa17199ac5df4fc3b1d91c3c20fe4dda46ca
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/input.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+interface InputProps extends React.ComponentProps<'input'> {
+  startAddon?: React.ReactNode;
+  endAddon?: React.ReactNode;
+}
+
+function Input({ className, type, startAddon, endAddon, ...props }: InputProps) {
+  const hasAddons = startAddon || endAddon;
+
+  const inputElement = (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground/60 selection:bg-primary selection:text-primary-foreground bg-input border-border h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        // Inner shadow for depth
+        'shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)]',
+        // Animated focus ring
+        'transition-[color,box-shadow,border-color] duration-200 ease-out',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 aria-invalid:border-destructive',
+        // Adjust padding for addons
+        startAddon && 'pl-0',
+        endAddon && 'pr-0',
+        hasAddons && 'border-0 shadow-none focus-visible:ring-0',
+        className
+      )}
+      {...props}
+    />
+  );
+
+  if (!hasAddons) {
+    return inputElement;
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center h-9 w-full rounded-md border border-border bg-input shadow-xs',
+        'shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)]',
+        'transition-[box-shadow,border-color] duration-200 ease-out',
+        'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+        'has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed',
+        'has-[input[aria-invalid]]:ring-destructive/20 has-[input[aria-invalid]]:border-destructive'
+      )}
+    >
+      {startAddon && (
+        <span className="flex items-center justify-center px-3 text-muted-foreground text-sm">
+          {startAddon}
+        </span>
+      )}
+      {inputElement}
+      {endAddon && (
+        <span className="flex items-center justify-center px-3 text-muted-foreground text-sm">
+          {endAddon}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export { Input };
diff --git a/temp_repo/apps/ui/src/components/ui/json-syntax-editor.tsx b/temp_repo/apps/ui/src/components/ui/json-syntax-editor.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..236b265a8e0b3e1c7aac83e0035adc1b2f710e4c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/json-syntax-editor.tsx
@@ -0,0 +1,140 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { StreamLanguage } from '@codemirror/language';
+import { javascript } from '@codemirror/legacy-modes/mode/javascript';
+import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+import { cn } from '@/lib/utils';
+
+interface JsonSyntaxEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  readOnly?: boolean;
+  'data-testid'?: string;
+}
+
+// Syntax highlighting using CSS variables for theme compatibility
+const syntaxColors = HighlightStyle.define([
+  // Property names (keys)
+  { tag: t.propertyName, color: 'var(--chart-2, oklch(0.6 0.118 184.704))' },
+
+  // Strings (values)
+  { tag: t.string, color: 'var(--chart-1, oklch(0.646 0.222 41.116))' },
+
+  // Numbers
+  { tag: t.number, color: 'var(--chart-3, oklch(0.7 0.15 150))' },
+
+  // Booleans and null
+  { tag: t.bool, color: 'var(--chart-4, oklch(0.7 0.15 280))' },
+  { tag: t.null, color: 'var(--chart-4, oklch(0.7 0.15 280))' },
+  { tag: t.keyword, color: 'var(--chart-4, oklch(0.7 0.15 280))' },
+
+  // Brackets and punctuation
+  { tag: t.bracket, color: 'var(--muted-foreground)' },
+  { tag: t.punctuation, color: 'var(--muted-foreground)' },
+
+  // Default text
+  { tag: t.content, color: 'var(--foreground)' },
+]);
+
+// Editor theme using CSS variables
+const editorTheme = EditorView.theme({
+  '&': {
+    height: '100%',
+    fontSize: '0.8125rem',
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+    backgroundColor: 'transparent',
+    color: 'var(--foreground)',
+  },
+  '.cm-scroller': {
+    overflow: 'auto',
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+  },
+  '.cm-content': {
+    padding: '0.75rem',
+    minHeight: '100%',
+    caretColor: 'var(--primary)',
+  },
+  '.cm-cursor, .cm-dropCursor': {
+    borderLeftColor: 'var(--primary)',
+  },
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+    backgroundColor: 'oklch(0.55 0.25 265 / 0.3)',
+  },
+  '.cm-activeLine': {
+    backgroundColor: 'var(--accent)',
+    opacity: '0.3',
+  },
+  '.cm-line': {
+    padding: '0 0.25rem',
+  },
+  '&.cm-focused': {
+    outline: 'none',
+  },
+  '.cm-gutters': {
+    backgroundColor: 'transparent',
+    color: 'var(--muted-foreground)',
+    border: 'none',
+    paddingRight: '0.5rem',
+  },
+  '.cm-lineNumbers .cm-gutterElement': {
+    minWidth: '2.5rem',
+    textAlign: 'right',
+    paddingRight: '0.5rem',
+  },
+  '.cm-placeholder': {
+    color: 'var(--muted-foreground)',
+    fontStyle: 'italic',
+  },
+});
+
+// JavaScript language in JSON mode
+const jsonLanguage = StreamLanguage.define(javascript);
+
+// Combine all extensions
+const extensions: Extension[] = [jsonLanguage, syntaxHighlighting(syntaxColors), editorTheme];
+
+export function JsonSyntaxEditor({
+  value,
+  onChange,
+  placeholder,
+  className,
+  minHeight = '300px',
+  maxHeight,
+  readOnly = false,
+  'data-testid': testId,
+}: JsonSyntaxEditorProps) {
+  return (
+    <div
+      className={cn('w-full rounded-lg border border-border bg-muted/30', className)}
+      style={{ minHeight }}
+      data-testid={testId}
+    >
+      <CodeMirror
+        value={value}
+        onChange={onChange}
+        extensions={extensions}
+        theme="none"
+        placeholder={placeholder}
+        height={maxHeight}
+        minHeight={minHeight}
+        readOnly={readOnly}
+        className="[&_.cm-editor]:min-h-[inherit]"
+        basicSetup={{
+          lineNumbers: true,
+          foldGutter: true,
+          highlightActiveLine: true,
+          highlightSelectionMatches: true,
+          autocompletion: false,
+          bracketMatching: true,
+          indentOnInput: true,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/kbd.tsx b/temp_repo/apps/ui/src/components/ui/kbd.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..670a38726e5748d1a970dab0339d66b31630e07b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/kbd.tsx
@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils';
+
+function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
+        "[&_svg:not([class*='size-'])]:size-3",
+        'in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="kbd-group"
+      className={cn('inline-flex items-center gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+export { Kbd, KbdGroup };
diff --git a/temp_repo/apps/ui/src/components/ui/keyboard-map.tsx b/temp_repo/apps/ui/src/components/ui/keyboard-map.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cc5c76bdcf1de07bc6a9fcc132f60f78ab071e07
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/keyboard-map.tsx
@@ -0,0 +1,699 @@
+import * as React from 'react';
+import {
+  useAppStore,
+  DEFAULT_KEYBOARD_SHORTCUTS,
+  parseShortcut,
+  formatShortcut,
+} from '@/store/app-store';
+import type { KeyboardShortcuts } from '@/store/app-store';
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { CheckCircle2, X, RotateCcw, Edit2 } from 'lucide-react';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+// Detect if running on Mac
+const isMac =
+  typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+
+// Keyboard layout - US QWERTY
+const KEYBOARD_ROWS = [
+  // Number row
+  [
+    { key: '`', label: '`', width: 1 },
+    { key: '1', label: '1', width: 1 },
+    { key: '2', label: '2', width: 1 },
+    { key: '3', label: '3', width: 1 },
+    { key: '4', label: '4', width: 1 },
+    { key: '5', label: '5', width: 1 },
+    { key: '6', label: '6', width: 1 },
+    { key: '7', label: '7', width: 1 },
+    { key: '8', label: '8', width: 1 },
+    { key: '9', label: '9', width: 1 },
+    { key: '0', label: '0', width: 1 },
+    { key: '-', label: '-', width: 1 },
+    { key: '=', label: '=', width: 1 },
+  ],
+  // Top letter row
+  [
+    { key: 'Q', label: 'Q', width: 1 },
+    { key: 'W', label: 'W', width: 1 },
+    { key: 'E', label: 'E', width: 1 },
+    { key: 'R', label: 'R', width: 1 },
+    { key: 'T', label: 'T', width: 1 },
+    { key: 'Y', label: 'Y', width: 1 },
+    { key: 'U', label: 'U', width: 1 },
+    { key: 'I', label: 'I', width: 1 },
+    { key: 'O', label: 'O', width: 1 },
+    { key: 'P', label: 'P', width: 1 },
+    { key: '[', label: '[', width: 1 },
+    { key: ']', label: ']', width: 1 },
+    { key: '\\', label: '\\', width: 1 },
+  ],
+  // Home row
+  [
+    { key: 'A', label: 'A', width: 1 },
+    { key: 'S', label: 'S', width: 1 },
+    { key: 'D', label: 'D', width: 1 },
+    { key: 'F', label: 'F', width: 1 },
+    { key: 'G', label: 'G', width: 1 },
+    { key: 'H', label: 'H', width: 1 },
+    { key: 'J', label: 'J', width: 1 },
+    { key: 'K', label: 'K', width: 1 },
+    { key: 'L', label: 'L', width: 1 },
+    { key: ';', label: ';', width: 1 },
+    { key: "'", label: "'", width: 1 },
+  ],
+  // Bottom letter row
+  [
+    { key: 'Z', label: 'Z', width: 1 },
+    { key: 'X', label: 'X', width: 1 },
+    { key: 'C', label: 'C', width: 1 },
+    { key: 'V', label: 'V', width: 1 },
+    { key: 'B', label: 'B', width: 1 },
+    { key: 'N', label: 'N', width: 1 },
+    { key: 'M', label: 'M', width: 1 },
+    { key: ',', label: ',', width: 1 },
+    { key: '.', label: '.', width: 1 },
+    { key: '/', label: '/', width: 1 },
+  ],
+];
+
+// Map shortcut names to human-readable labels
+const SHORTCUT_LABELS: Record<keyof KeyboardShortcuts, string> = {
+  board: 'Kanban Board',
+  graph: 'Graph View',
+  agent: 'Agent Runner',
+  spec: 'Spec Editor',
+  context: 'Context',
+  memory: 'Memory',
+  settings: 'Settings',
+  projectSettings: 'Project Settings',
+  terminal: 'Terminal',
+  ideation: 'Ideation',
+  notifications: 'Notifications',
+  githubIssues: 'GitHub Issues',
+  githubPrs: 'Pull Requests',
+  toggleSidebar: 'Toggle Sidebar',
+  addFeature: 'Add Feature',
+  addContextFile: 'Add Context File',
+  startNext: 'Start Next',
+  newSession: 'New Session',
+  openProject: 'Open Project',
+  projectPicker: 'Project Picker',
+  cyclePrevProject: 'Prev Project',
+  cycleNextProject: 'Next Project',
+  splitTerminalRight: 'Split Right',
+  splitTerminalDown: 'Split Down',
+  closeTerminal: 'Close Terminal',
+  newTerminalTab: 'New Tab',
+};
+
+// Categorize shortcuts for color coding
+const SHORTCUT_CATEGORIES: Record<keyof KeyboardShortcuts, 'navigation' | 'ui' | 'action'> = {
+  board: 'navigation',
+  graph: 'navigation',
+  agent: 'navigation',
+  spec: 'navigation',
+  context: 'navigation',
+  memory: 'navigation',
+  settings: 'navigation',
+  projectSettings: 'navigation',
+  terminal: 'navigation',
+  ideation: 'navigation',
+  notifications: 'navigation',
+  githubIssues: 'navigation',
+  githubPrs: 'navigation',
+  toggleSidebar: 'ui',
+  addFeature: 'action',
+  addContextFile: 'action',
+  startNext: 'action',
+  newSession: 'action',
+  openProject: 'action',
+  projectPicker: 'action',
+  cyclePrevProject: 'action',
+  cycleNextProject: 'action',
+  splitTerminalRight: 'action',
+  splitTerminalDown: 'action',
+  closeTerminal: 'action',
+  newTerminalTab: 'action',
+};
+
+// Category colors
+const CATEGORY_COLORS = {
+  navigation: {
+    bg: 'bg-blue-500/20',
+    border: 'border-blue-500/50',
+    text: 'text-blue-400',
+    label: 'Navigation',
+  },
+  ui: {
+    bg: 'bg-purple-500/20',
+    border: 'border-purple-500/50',
+    text: 'text-purple-400',
+    label: 'UI Controls',
+  },
+  action: {
+    bg: 'bg-green-500/20',
+    border: 'border-green-500/50',
+    text: 'text-green-400',
+    label: 'Actions',
+  },
+};
+
+interface KeyboardMapProps {
+  onKeySelect?: (key: string) => void;
+  selectedKey?: string | null;
+  className?: string;
+}
+
+export function KeyboardMap({ onKeySelect, selectedKey, className }: KeyboardMapProps) {
+  const { keyboardShortcuts } = useAppStore();
+
+  // Merge with defaults to ensure new shortcuts are always shown
+  const mergedShortcuts = React.useMemo(
+    () => ({
+      ...DEFAULT_KEYBOARD_SHORTCUTS,
+      ...keyboardShortcuts,
+    }),
+    [keyboardShortcuts]
+  );
+
+  // Create a reverse map: base key -> list of shortcut names (including info about modifiers)
+  const keyToShortcuts = React.useMemo(() => {
+    const map: Record<string, Array<{ name: keyof KeyboardShortcuts; hasModifiers: boolean }>> = {};
+    (Object.entries(mergedShortcuts) as [keyof KeyboardShortcuts, string][]).forEach(
+      ([shortcutName, shortcutStr]) => {
+        if (!shortcutStr) return; // Skip undefined shortcuts
+        const parsed = parseShortcut(shortcutStr);
+        const normalizedKey = parsed.key.toUpperCase();
+        const hasModifiers = !!(parsed.shift || parsed.cmdCtrl || parsed.alt);
+        if (!map[normalizedKey]) {
+          map[normalizedKey] = [];
+        }
+        map[normalizedKey].push({ name: shortcutName, hasModifiers });
+      }
+    );
+    return map;
+  }, [mergedShortcuts]);
+
+  const renderKey = (keyDef: { key: string; label: string; width: number }) => {
+    const normalizedKey = keyDef.key.toUpperCase();
+    const shortcutInfos = keyToShortcuts[normalizedKey] || [];
+    const shortcuts = shortcutInfos.map((s) => s.name);
+    const isBound = shortcuts.length > 0;
+    const isSelected = selectedKey?.toUpperCase() === normalizedKey;
+    const isModified = shortcuts.some((s) => mergedShortcuts[s] !== DEFAULT_KEYBOARD_SHORTCUTS[s]);
+
+    // Get category for coloring (use first shortcut's category if multiple)
+    const category = shortcuts.length > 0 ? SHORTCUT_CATEGORIES[shortcuts[0]] : null;
+    const colors = category ? CATEGORY_COLORS[category] : null;
+
+    const keyElement = (
+      <button
+        key={keyDef.key}
+        onClick={() => onKeySelect?.(keyDef.key)}
+        className={cn(
+          'relative flex flex-col items-center justify-center rounded-lg border transition-all',
+          'h-12 min-w-11 py-1',
+          keyDef.width > 1 && `w-[${keyDef.width * 2.75}rem]`,
+          // Base styles
+          !isBound && 'bg-sidebar-accent/10 border-sidebar-border hover:bg-sidebar-accent/20',
+          // Bound key styles
+          isBound && colors && `${colors.bg} ${colors.border} hover:brightness-110`,
+          // Selected state
+          isSelected && 'ring-2 ring-brand-500 ring-offset-2 ring-offset-background',
+          // Modified indicator
+          isModified && 'ring-1 ring-yellow-500/50'
+        )}
+        data-testid={`keyboard-key-${keyDef.key}`}
+      >
+        {/* Key label - always at top */}
+        <span
+          className={cn(
+            'text-sm font-mono font-bold leading-none',
+            isBound && colors ? colors.text : 'text-muted-foreground'
+          )}
+        >
+          {keyDef.label}
+        </span>
+        {/* Shortcut label - always takes up space to maintain consistent height */}
+        <span
+          className={cn(
+            'text-[9px] leading-tight text-center px-0.5 truncate max-w-full h-3 mt-0.5',
+            isBound && shortcuts.length > 0
+              ? colors
+                ? colors.text
+                : 'text-muted-foreground'
+              : 'opacity-0'
+          )}
+        >
+          {
+            isBound && shortcuts.length > 0
+              ? shortcuts.length === 1
+                ? (SHORTCUT_LABELS[shortcuts[0]]?.split(' ')[0] ?? shortcuts[0])
+                : `${shortcuts.length}x`
+              : '\u00A0' // Non-breaking space to maintain height
+          }
+        </span>
+        {isModified && (
+          <span className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-yellow-500" />
+        )}
+      </button>
+    );
+
+    // Wrap in tooltip if bound
+    if (isBound) {
+      return (
+        <Tooltip key={keyDef.key}>
+          <TooltipTrigger asChild>{keyElement}</TooltipTrigger>
+          <TooltipContent side="top" className="max-w-xs">
+            <div className="space-y-1">
+              {shortcuts.map((shortcut) => {
+                const shortcutStr = mergedShortcuts[shortcut];
+                const displayShortcut = formatShortcut(shortcutStr, true);
+                return (
+                  <div key={shortcut} className="flex items-center gap-2">
+                    <span
+                      className={cn(
+                        'w-2 h-2 rounded-full',
+                        SHORTCUT_CATEGORIES[shortcut] &&
+                          CATEGORY_COLORS[SHORTCUT_CATEGORIES[shortcut]]
+                          ? CATEGORY_COLORS[SHORTCUT_CATEGORIES[shortcut]].bg.replace('/20', '')
+                          : 'bg-muted-foreground'
+                      )}
+                    />
+                    <span className="text-sm">{SHORTCUT_LABELS[shortcut] ?? shortcut}</span>
+                    <kbd className="text-xs font-mono bg-sidebar-accent/30 px-1 rounded">
+                      {displayShortcut}
+                    </kbd>
+                    {mergedShortcuts[shortcut] !== DEFAULT_KEYBOARD_SHORTCUTS[shortcut] && (
+                      <span className="text-xs text-yellow-400">(custom)</span>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </TooltipContent>
+        </Tooltip>
+      );
+    }
+
+    return keyElement;
+  };
+
+  return (
+    <div className={cn('space-y-4', className)} data-testid="keyboard-map">
+      {/* Legend */}
+      <div className="flex flex-wrap gap-4 justify-center text-xs">
+        {Object.entries(CATEGORY_COLORS).map(([key, colors]) => (
+          <div key={key} className="flex items-center gap-2">
+            <div className={cn('w-4 h-4 rounded border', colors.bg, colors.border)} />
+            <span className={colors.text}>{colors.label}</span>
+          </div>
+        ))}
+        <div className="flex items-center gap-2">
+          <div className="w-4 h-4 rounded bg-sidebar-accent/10 border border-sidebar-border" />
+          <span className="text-muted-foreground">Available</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 rounded-full bg-yellow-500" />
+          <span className="text-yellow-400">Modified</span>
+        </div>
+      </div>
+
+      {/* Keyboard layout */}
+      <div className="flex flex-col items-center gap-1.5 p-4 rounded-xl bg-sidebar-accent/5 border border-sidebar-border">
+        {KEYBOARD_ROWS.map((row, rowIndex) => (
+          <div key={rowIndex} className="flex gap-1.5 justify-center">
+            {row.map(renderKey)}
+          </div>
+        ))}
+      </div>
+
+      {/* Stats */}
+      <div className="flex justify-center gap-6 text-xs text-muted-foreground">
+        <span>
+          <strong className="text-foreground">{Object.keys(keyboardShortcuts).length}</strong>{' '}
+          shortcuts configured
+        </span>
+        <span>
+          <strong className="text-foreground">{Object.keys(keyToShortcuts).length}</strong> keys in
+          use
+        </span>
+        <span>
+          <strong className="text-foreground">
+            {KEYBOARD_ROWS.flat().length - Object.keys(keyToShortcuts).length}
+          </strong>{' '}
+          keys available
+        </span>
+      </div>
+    </div>
+  );
+}
+
+// Full shortcut reference panel with editing capability
+interface ShortcutReferencePanelProps {
+  editable?: boolean;
+}
+
+export function ShortcutReferencePanel({ editable = false }: ShortcutReferencePanelProps) {
+  const { keyboardShortcuts, setKeyboardShortcut, resetKeyboardShortcuts } = useAppStore();
+  const [editingShortcut, setEditingShortcut] = React.useState<keyof KeyboardShortcuts | null>(
+    null
+  );
+  const [keyValue, setKeyValue] = React.useState('');
+  const [modifiers, setModifiers] = React.useState({ shift: false, cmdCtrl: false, alt: false });
+  const [shortcutError, setShortcutError] = React.useState<string | null>(null);
+
+  // Merge with defaults to ensure new shortcuts are always shown
+  const mergedShortcuts = React.useMemo(
+    () => ({
+      ...DEFAULT_KEYBOARD_SHORTCUTS,
+      ...keyboardShortcuts,
+    }),
+    [keyboardShortcuts]
+  );
+
+  const groupedShortcuts = React.useMemo(() => {
+    const groups: Record<
+      string,
+      Array<{ key: keyof KeyboardShortcuts; label: string; value: string }>
+    > = {
+      navigation: [],
+      ui: [],
+      action: [],
+    };
+
+    (Object.entries(SHORTCUT_CATEGORIES) as [keyof KeyboardShortcuts, string][]).forEach(
+      ([shortcut, category]) => {
+        groups[category].push({
+          key: shortcut,
+          label: SHORTCUT_LABELS[shortcut] ?? shortcut,
+          value: mergedShortcuts[shortcut],
+        });
+      }
+    );
+
+    return groups;
+  }, [mergedShortcuts]);
+
+  // Build the full shortcut string from key + modifiers
+  const buildShortcutString = React.useCallback((key: string, mods: typeof modifiers) => {
+    const parts: string[] = [];
+    if (mods.cmdCtrl) parts.push(isMac ? 'Cmd' : 'Ctrl');
+    if (mods.alt) parts.push(isMac ? 'Opt' : 'Alt');
+    if (mods.shift) parts.push('Shift');
+    parts.push(key.toUpperCase());
+    return parts.join('+');
+  }, []);
+
+  // Check for conflicts with other shortcuts
+  const checkConflict = React.useCallback(
+    (shortcutStr: string, currentKey: keyof KeyboardShortcuts) => {
+      const conflict = Object.entries(mergedShortcuts).find(
+        ([k, v]) => k !== currentKey && v?.toUpperCase() === shortcutStr.toUpperCase()
+      );
+      return conflict
+        ? (SHORTCUT_LABELS[conflict[0] as keyof KeyboardShortcuts] ?? conflict[0])
+        : null;
+    },
+    [mergedShortcuts]
+  );
+
+  const handleStartEdit = (key: keyof KeyboardShortcuts) => {
+    const currentValue = mergedShortcuts[key];
+    const parsed = parseShortcut(currentValue);
+    setEditingShortcut(key);
+    setKeyValue(parsed.key);
+    setModifiers({
+      shift: parsed.shift || false,
+      cmdCtrl: parsed.cmdCtrl || false,
+      alt: parsed.alt || false,
+    });
+    setShortcutError(null);
+  };
+
+  const handleSaveShortcut = () => {
+    if (!editingShortcut || shortcutError || !keyValue) return;
+    const shortcutStr = buildShortcutString(keyValue, modifiers);
+    setKeyboardShortcut(editingShortcut, shortcutStr);
+    setEditingShortcut(null);
+    setKeyValue('');
+    setModifiers({ shift: false, cmdCtrl: false, alt: false });
+    setShortcutError(null);
+  };
+
+  const handleCancelEdit = () => {
+    setEditingShortcut(null);
+    setKeyValue('');
+    setModifiers({ shift: false, cmdCtrl: false, alt: false });
+    setShortcutError(null);
+  };
+
+  const handleKeyChange = (value: string, currentKey: keyof KeyboardShortcuts) => {
+    setKeyValue(value);
+    // Check for conflicts with full shortcut string
+    if (!value) {
+      setShortcutError('Key cannot be empty');
+    } else {
+      const shortcutStr = buildShortcutString(value, modifiers);
+      const conflictLabel = checkConflict(shortcutStr, currentKey);
+      if (conflictLabel) {
+        setShortcutError(`Already used by "${conflictLabel}"`);
+      } else {
+        setShortcutError(null);
+      }
+    }
+  };
+
+  const handleModifierChange = (
+    modifier: keyof typeof modifiers,
+    checked: boolean,
+    currentKey: keyof KeyboardShortcuts
+  ) => {
+    // Enforce single modifier: when checking, uncheck all others (radio-button behavior)
+    const newModifiers = checked
+      ? { shift: false, cmdCtrl: false, alt: false, [modifier]: true }
+      : { ...modifiers, [modifier]: false };
+
+    setModifiers(newModifiers);
+
+    // Recheck for conflicts
+    if (keyValue) {
+      const shortcutStr = buildShortcutString(keyValue, newModifiers);
+      const conflictLabel = checkConflict(shortcutStr, currentKey);
+      if (conflictLabel) {
+        setShortcutError(`Already used by "${conflictLabel}"`);
+      } else {
+        setShortcutError(null);
+      }
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !shortcutError && keyValue) {
+      handleSaveShortcut();
+    } else if (e.key === 'Escape') {
+      handleCancelEdit();
+    }
+  };
+
+  const handleResetShortcut = (key: keyof KeyboardShortcuts) => {
+    setKeyboardShortcut(key, DEFAULT_KEYBOARD_SHORTCUTS[key]);
+  };
+
+  return (
+    <div className="space-y-4" data-testid="shortcut-reference-panel">
+      {editable && (
+        <div className="flex justify-end">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => resetKeyboardShortcuts()}
+            className="gap-2 text-xs"
+            data-testid="reset-all-shortcuts-button"
+          >
+            <RotateCcw className="w-3 h-3" />
+            Reset All to Defaults
+          </Button>
+        </div>
+      )}
+      {Object.entries(groupedShortcuts).map(([category, shortcuts]) => {
+        const colors = CATEGORY_COLORS[category as keyof typeof CATEGORY_COLORS];
+        return (
+          <div key={category} className="space-y-2">
+            <h4 className={cn('text-sm font-semibold', colors.text)}>{colors.label}</h4>
+            <div className="grid grid-cols-2 gap-2">
+              {shortcuts.map(({ key, label, value }) => {
+                const isModified = mergedShortcuts[key] !== DEFAULT_KEYBOARD_SHORTCUTS[key];
+                const isEditing = editingShortcut === key;
+
+                return (
+                  <div
+                    key={key}
+                    className={cn(
+                      'flex items-center justify-between p-2 rounded-lg bg-sidebar-accent/10 border transition-colors',
+                      isEditing ? 'border-brand-500' : 'border-sidebar-border',
+                      editable && !isEditing && 'hover:bg-sidebar-accent/20 cursor-pointer'
+                    )}
+                    onClick={() => editable && !isEditing && handleStartEdit(key)}
+                    data-testid={`shortcut-row-${key}`}
+                  >
+                    <span className="text-sm text-foreground">{label}</span>
+                    <div className="flex items-center gap-2">
+                      {isEditing ? (
+                        <div
+                          className="flex items-center gap-2"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          {/* Modifier checkboxes */}
+                          <div className="flex items-center gap-1.5 text-xs">
+                            <div className="flex items-center gap-1">
+                              <Checkbox
+                                id={`mod-cmd-${key}`}
+                                checked={modifiers.cmdCtrl}
+                                onCheckedChange={(checked) =>
+                                  handleModifierChange('cmdCtrl', !!checked, key)
+                                }
+                                className="h-3.5 w-3.5"
+                              />
+                              <Label
+                                htmlFor={`mod-cmd-${key}`}
+                                className="text-xs text-muted-foreground cursor-pointer"
+                              >
+                                {isMac ? '⌘' : 'Ctrl'}
+                              </Label>
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <Checkbox
+                                id={`mod-alt-${key}`}
+                                checked={modifiers.alt}
+                                onCheckedChange={(checked) =>
+                                  handleModifierChange('alt', !!checked, key)
+                                }
+                                className="h-3.5 w-3.5"
+                              />
+                              <Label
+                                htmlFor={`mod-alt-${key}`}
+                                className="text-xs text-muted-foreground cursor-pointer"
+                              >
+                                {isMac ? '⌥' : 'Alt'}
+                              </Label>
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <Checkbox
+                                id={`mod-shift-${key}`}
+                                checked={modifiers.shift}
+                                onCheckedChange={(checked) =>
+                                  handleModifierChange('shift', !!checked, key)
+                                }
+                                className="h-3.5 w-3.5"
+                              />
+                              <Label
+                                htmlFor={`mod-shift-${key}`}
+                                className="text-xs text-muted-foreground cursor-pointer"
+                              >
+                                ⇧
+                              </Label>
+                            </div>
+                          </div>
+                          <span className="text-muted-foreground">+</span>
+                          <Input
+                            value={keyValue}
+                            onChange={(e) => handleKeyChange(e.target.value, key)}
+                            onKeyDown={handleKeyDown}
+                            className={cn(
+                              'w-12 h-7 text-center font-mono text-xs uppercase',
+                              shortcutError && 'border-red-500 focus-visible:ring-red-500'
+                            )}
+                            placeholder="Key"
+                            maxLength={1}
+                            autoFocus
+                            data-testid={`edit-shortcut-input-${key}`}
+                          />
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="h-7 w-7 p-0 hover:bg-green-500/20 hover:text-green-400"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleSaveShortcut();
+                            }}
+                            disabled={!!shortcutError || !keyValue}
+                            data-testid={`save-shortcut-${key}`}
+                          >
+                            <CheckCircle2 className="w-4 h-4" />
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            className="h-7 w-7 p-0 hover:bg-red-500/20 hover:text-red-400"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleCancelEdit();
+                            }}
+                            data-testid={`cancel-shortcut-${key}`}
+                          >
+                            <X className="w-4 h-4" />
+                          </Button>
+                        </div>
+                      ) : (
+                        <>
+                          <kbd
+                            className={cn(
+                              'px-2 py-1 text-xs font-mono rounded border',
+                              colors.bg,
+                              colors.border,
+                              colors.text
+                            )}
+                          >
+                            {formatShortcut(value, true)}
+                          </kbd>
+                          {isModified && editable && (
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <Button
+                                  size="sm"
+                                  variant="ghost"
+                                  className="h-6 w-6 p-0 hover:bg-yellow-500/20 hover:text-yellow-400"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleResetShortcut(key);
+                                  }}
+                                  data-testid={`reset-shortcut-${key}`}
+                                >
+                                  <RotateCcw className="w-3 h-3" />
+                                </Button>
+                              </TooltipTrigger>
+                              <TooltipContent side="top">
+                                Reset to default ({DEFAULT_KEYBOARD_SHORTCUTS[key]})
+                              </TooltipContent>
+                            </Tooltip>
+                          )}
+                          {isModified && !editable && (
+                            <span className="w-2 h-2 rounded-full bg-yellow-500" />
+                          )}
+                          {editable && !isModified && (
+                            <Edit2 className="w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100" />
+                          )}
+                        </>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            {editingShortcut &&
+              shortcutError &&
+              SHORTCUT_CATEGORIES[editingShortcut] === category && (
+                <p className="text-xs text-red-400 mt-1">{shortcutError}</p>
+              )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/label.tsx b/temp_repo/apps/ui/src/components/ui/label.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9722260ed102afed0f7e3af01cef10b698d35305
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/label.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+import { cn } from '@/lib/utils';
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/temp_repo/apps/ui/src/components/ui/loading-state.tsx b/temp_repo/apps/ui/src/components/ui/loading-state.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..60695e4cced21d236d43f5932015ca0b6c2e8e32
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/loading-state.tsx
@@ -0,0 +1,15 @@
+import { Spinner } from '@/components/ui/spinner';
+
+interface LoadingStateProps {
+  /** Optional custom message to display below the spinner */
+  message?: string;
+}
+
+export function LoadingState({ message }: LoadingStateProps) {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center">
+      <Spinner size="xl" />
+      {message && <p className="mt-4 text-sm font-medium text-primary">{message}</p>}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/log-viewer.tsx b/temp_repo/apps/ui/src/components/ui/log-viewer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2f338f2d3318e4b25c10c822d4a4e33c76960f0f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/log-viewer.tsx
@@ -0,0 +1,765 @@
+import { useState, useMemo, useRef } from 'react';
+import {
+  ChevronDown,
+  ChevronRight,
+  MessageSquare,
+  Wrench,
+  Zap,
+  AlertCircle,
+  CheckCircle2,
+  AlertTriangle,
+  Bug,
+  Info,
+  FileOutput,
+  Brain,
+  Eye,
+  Pencil,
+  Terminal,
+  Search,
+  ListTodo,
+  Layers,
+  X,
+  Filter,
+  Circle,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import {
+  parseLogOutput,
+  getLogTypeColors,
+  shouldCollapseByDefault,
+  type LogEntry,
+  type LogEntryType,
+  type ToolCategory,
+} from '@/lib/log-parser';
+
+interface LogViewerProps {
+  output: string;
+  className?: string;
+}
+
+const getLogIcon = (type: LogEntryType) => {
+  switch (type) {
+    case 'prompt':
+      return <MessageSquare className="w-4 h-4" />;
+    case 'tool_call':
+      return <Wrench className="w-4 h-4" />;
+    case 'tool_result':
+      return <FileOutput className="w-4 h-4" />;
+    case 'phase':
+      return <Zap className="w-4 h-4" />;
+    case 'error':
+      return <AlertCircle className="w-4 h-4" />;
+    case 'success':
+      return <CheckCircle2 className="w-4 h-4" />;
+    case 'warning':
+      return <AlertTriangle className="w-4 h-4" />;
+    case 'thinking':
+      return <Brain className="w-4 h-4" />;
+    case 'debug':
+      return <Bug className="w-4 h-4" />;
+    default:
+      return <Info className="w-4 h-4" />;
+  }
+};
+
+/**
+ * Returns a tool-specific icon based on the tool category
+ */
+const getToolCategoryIcon = (category: ToolCategory | undefined) => {
+  switch (category) {
+    case 'read':
+      return <Eye className="w-4 h-4" />;
+    case 'edit':
+      return <Pencil className="w-4 h-4" />;
+    case 'write':
+      return <FileOutput className="w-4 h-4" />;
+    case 'bash':
+      return <Terminal className="w-4 h-4" />;
+    case 'search':
+      return <Search className="w-4 h-4" />;
+    case 'todo':
+      return <ListTodo className="w-4 h-4" />;
+    case 'task':
+      return <Layers className="w-4 h-4" />;
+    default:
+      return <Wrench className="w-4 h-4" />;
+  }
+};
+
+/**
+ * Returns color classes for a tool category
+ */
+const getToolCategoryColor = (category: ToolCategory | undefined): string => {
+  switch (category) {
+    case 'read':
+      return 'text-blue-400 bg-blue-500/10 border-blue-500/30';
+    case 'edit':
+      return 'text-amber-400 bg-amber-500/10 border-amber-500/30';
+    case 'write':
+      return 'text-emerald-400 bg-emerald-500/10 border-emerald-500/30';
+    case 'bash':
+      return 'text-purple-400 bg-purple-500/10 border-purple-500/30';
+    case 'search':
+      return 'text-cyan-400 bg-cyan-500/10 border-cyan-500/30';
+    case 'todo':
+      return 'text-green-400 bg-green-500/10 border-green-500/30';
+    case 'task':
+      return 'text-indigo-400 bg-indigo-500/10 border-indigo-500/30';
+    default:
+      return 'text-muted-foreground bg-muted/30 border-border';
+  }
+};
+
+/**
+ * Interface for parsed todo items from TodoWrite tool
+ */
+interface TodoItem {
+  content: string;
+  status: 'pending' | 'in_progress' | 'completed';
+  activeForm?: string;
+}
+
+/**
+ * Parses TodoWrite JSON content and extracts todo items
+ */
+function parseTodoContent(content: string): TodoItem[] | null {
+  try {
+    // Find the JSON object in the content
+    const jsonMatch = content.match(/\{[\s\S]*"todos"[\s\S]*\}/);
+    if (!jsonMatch) return null;
+
+    const parsed = JSON.parse(jsonMatch[0]) as { todos?: TodoItem[] };
+    if (!parsed.todos || !Array.isArray(parsed.todos)) return null;
+
+    return parsed.todos;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Renders a list of todo items with status icons and colors
+ */
+function TodoListRenderer({ todos }: { todos: TodoItem[] }) {
+  const getStatusIcon = (status: TodoItem['status']) => {
+    switch (status) {
+      case 'completed':
+        return <CheckCircle2 className="w-4 h-4 text-emerald-400" />;
+      case 'in_progress':
+        return <Spinner size="sm" />;
+      case 'pending':
+        return <Circle className="w-4 h-4 text-muted-foreground/70" />;
+      default:
+        return <Circle className="w-4 h-4 text-muted-foreground/70" />;
+    }
+  };
+
+  const getStatusColor = (status: TodoItem['status']) => {
+    switch (status) {
+      case 'completed':
+        return 'text-emerald-300 line-through opacity-70';
+      case 'in_progress':
+        return 'text-amber-300';
+      case 'pending':
+        return 'text-muted-foreground';
+      default:
+        return 'text-muted-foreground';
+    }
+  };
+
+  const getStatusBadge = (status: TodoItem['status']) => {
+    switch (status) {
+      case 'completed':
+        return (
+          <span className="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400 ml-auto">
+            Done
+          </span>
+        );
+      case 'in_progress':
+        return (
+          <span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/20 text-amber-400 ml-auto">
+            In Progress
+          </span>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="space-y-1">
+      {todos.map((todo, index) => (
+        <div
+          key={index}
+          className={cn(
+            'flex items-start gap-2 p-2 rounded-md transition-colors',
+            todo.status === 'in_progress' && 'bg-amber-500/5 border border-amber-500/20',
+            todo.status === 'completed' && 'bg-emerald-500/5',
+            todo.status === 'pending' && 'bg-muted/30'
+          )}
+        >
+          <div className="mt-0.5 flex-shrink-0">{getStatusIcon(todo.status)}</div>
+          <div className="flex-1 min-w-0">
+            <p className={cn('text-sm', getStatusColor(todo.status))}>{todo.content}</p>
+            {todo.status === 'in_progress' && todo.activeForm && (
+              <p className="text-xs text-amber-400/70 mt-0.5 italic">{todo.activeForm}</p>
+            )}
+          </div>
+          {getStatusBadge(todo.status)}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface LogEntryItemProps {
+  entry: LogEntry;
+  isExpanded: boolean;
+  onToggle: () => void;
+}
+
+function LogEntryItem({ entry, isExpanded, onToggle }: LogEntryItemProps) {
+  const colors = getLogTypeColors(entry.type);
+  const hasContent = entry.content.length > 100;
+
+  // For tool_call entries, use tool-specific styling
+  const isToolCall = entry.type === 'tool_call';
+  const toolCategory = entry.metadata?.toolCategory;
+  const toolCategoryColors = isToolCall ? getToolCategoryColor(toolCategory) : '';
+
+  // Check if this is a TodoWrite entry and parse the todos
+  const isTodoWrite = entry.metadata?.toolName === 'TodoWrite';
+  const parsedTodos = useMemo(() => {
+    if (!isTodoWrite) return null;
+    return parseTodoContent(entry.content);
+  }, [isTodoWrite, entry.content]);
+
+  // Get the appropriate icon based on entry type and tool category
+  const icon = isToolCall ? getToolCategoryIcon(toolCategory) : getLogIcon(entry.type);
+
+  // Get collapsed preview text - prefer smart summary for tool calls
+  const collapsedPreview = useMemo(() => {
+    if (isExpanded) return '';
+
+    // Use smart summary if available
+    if (entry.metadata?.summary) {
+      return entry.metadata.summary;
+    }
+
+    // Fallback to truncated content
+    return entry.content.slice(0, 80) + (entry.content.length > 80 ? '...' : '');
+  }, [isExpanded, entry.metadata?.summary, entry.content]);
+
+  // Format content - detect and highlight JSON
+  const formattedContent = useMemo(() => {
+    let content = entry.content;
+
+    // For tool_call entries, remove redundant "Tool: X" and "Input:" prefixes
+    // since we already show the tool name in the header badge
+    if (isToolCall) {
+      // Remove "🔧 Tool: ToolName\n" or "Tool: ToolName\n" prefix
+      content = content.replace(/^(?:🔧\s*)?Tool:\s*\w+\s*\n?/i, '');
+      // Remove standalone "Input:" label (keep the JSON that follows)
+      content = content.replace(/^Input:\s*\n?/i, '');
+      content = content.trim();
+    }
+
+    // For summary entries, remove the <summary> and </summary> tags
+    if (entry.title === 'Summary') {
+      content = content.replace(/^<summary>\s*/i, '');
+      content = content.replace(/\s*<\/summary>\s*$/i, '');
+      content = content.trim();
+    }
+
+    // Try to find and format JSON blocks
+    const jsonRegex = /(\{[\s\S]*?\}|\[[\s\S]*?\])/g;
+    let lastIndex = 0;
+    const parts: { type: 'text' | 'json'; content: string }[] = [];
+
+    let match;
+    while ((match = jsonRegex.exec(content)) !== null) {
+      // Add text before JSON
+      if (match.index > lastIndex) {
+        parts.push({
+          type: 'text',
+          content: content.slice(lastIndex, match.index),
+        });
+      }
+
+      // Try to parse and format JSON
+      try {
+        const parsed = JSON.parse(match[1]);
+        parts.push({
+          type: 'json',
+          content: JSON.stringify(parsed, null, 2),
+        });
+      } catch {
+        // Not valid JSON, treat as text
+        parts.push({ type: 'text', content: match[1] });
+      }
+
+      lastIndex = match.index + match[1].length;
+    }
+
+    // Add remaining text
+    if (lastIndex < content.length) {
+      parts.push({ type: 'text', content: content.slice(lastIndex) });
+    }
+
+    return parts.length > 0 ? parts : [{ type: 'text' as const, content }];
+  }, [entry.content, entry.title, isToolCall]);
+
+  // Get colors - use tool category colors for tool_call entries
+  const colorParts = toolCategoryColors.split(' ');
+  const textColor = isToolCall ? colorParts[0] || 'text-muted-foreground' : colors.text;
+  const bgColor = isToolCall ? colorParts[1] || 'bg-muted/30' : colors.bg;
+  const borderColor = isToolCall ? colorParts[2] || 'border-border' : colors.border;
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg border transition-all duration-200',
+        bgColor,
+        borderColor,
+        'hover:brightness-110'
+      )}
+      data-testid={`log-entry-${entry.type}`}
+    >
+      <button
+        onClick={onToggle}
+        className="w-full px-3 py-2 flex items-center gap-2 text-left"
+        data-testid={`log-entry-toggle-${entry.id}`}
+      >
+        {hasContent ? (
+          isExpanded ? (
+            <ChevronDown className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+          ) : (
+            <ChevronRight className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+          )
+        ) : (
+          <span className="w-4 flex-shrink-0" />
+        )}
+
+        <span
+          className={cn(
+            'flex-shrink-0',
+            isToolCall ? toolCategoryColors.split(' ')[0] : colors.icon
+          )}
+        >
+          {icon}
+        </span>
+
+        <span
+          className={cn(
+            'text-xs font-medium px-2 py-0.5 rounded-full flex-shrink-0',
+            isToolCall ? toolCategoryColors : colors.badge
+          )}
+          data-testid="log-entry-badge"
+        >
+          {entry.title}
+        </span>
+
+        <span className="text-xs text-muted-foreground truncate flex-1 ml-2">
+          {collapsedPreview}
+        </span>
+      </button>
+
+      {(isExpanded || !hasContent) && (
+        <div className="px-4 pb-3 pt-1" data-testid={`log-entry-content-${entry.id}`}>
+          {/* Render TodoWrite entries with special formatting */}
+          {parsedTodos ? (
+            <TodoListRenderer todos={parsedTodos} />
+          ) : (
+            <div className="font-mono text-xs space-y-1">
+              {formattedContent.map((part, index) => (
+                <div key={index}>
+                  {part.type === 'json' ? (
+                    <pre className="bg-muted/50 rounded p-2 overflow-x-auto scrollbar-styled text-xs text-primary">
+                      {part.content}
+                    </pre>
+                  ) : (
+                    <pre className={cn('whitespace-pre-wrap break-words', textColor)}>
+                      {part.content}
+                    </pre>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ToolCategoryStats {
+  read: number;
+  edit: number;
+  write: number;
+  bash: number;
+  search: number;
+  todo: number;
+  task: number;
+  other: number;
+}
+
+export function LogViewer({ output, className }: LogViewerProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [searchQuery, setSearchQuery] = useState('');
+  const [hiddenTypes, setHiddenTypes] = useState<Set<LogEntryType>>(new Set());
+  const [hiddenCategories, setHiddenCategories] = useState<Set<ToolCategory>>(new Set());
+  // Track if user has "Expand All" mode active - new entries will auto-expand when this is true
+  const [expandAllMode, setExpandAllMode] = useState(false);
+
+  // Parse entries and compute initial expanded state together
+  const { entries, initialExpandedIds } = useMemo(() => {
+    const parsedEntries = parseLogOutput(output);
+    const toExpand: string[] = [];
+
+    parsedEntries.forEach((entry) => {
+      // If entry should NOT collapse by default, mark it for expansion
+      if (!shouldCollapseByDefault(entry)) {
+        toExpand.push(entry.id);
+      }
+    });
+
+    return {
+      entries: parsedEntries,
+      initialExpandedIds: new Set(toExpand),
+    };
+  }, [output]);
+
+  // Merge initial expanded IDs with user-toggled ones
+  // Use a ref to track if we've applied initial state
+  const appliedInitialRef = useRef<Set<string>>(new Set());
+
+  // Apply initial expanded state for new entries
+  // Also auto-expand all entries when expandAllMode is active
+  const effectiveExpandedIds = useMemo(() => {
+    const result = new Set(expandedIds);
+
+    // If expand all mode is active, expand all filtered entries
+    if (expandAllMode) {
+      entries.forEach((entry) => {
+        result.add(entry.id);
+      });
+    } else {
+      // Otherwise, only auto-expand entries based on initial state (shouldCollapseByDefault)
+      initialExpandedIds.forEach((id) => {
+        if (!appliedInitialRef.current.has(id)) {
+          appliedInitialRef.current.add(id);
+          result.add(id);
+        }
+      });
+    }
+
+    return result;
+  }, [expandedIds, initialExpandedIds, expandAllMode, entries]);
+
+  // Calculate stats for tool categories
+  const stats = useMemo(() => {
+    const toolCalls = entries.filter((e) => e.type === 'tool_call');
+    const byCategory: ToolCategoryStats = {
+      read: 0,
+      edit: 0,
+      write: 0,
+      bash: 0,
+      search: 0,
+      todo: 0,
+      task: 0,
+      other: 0,
+    };
+
+    toolCalls.forEach((tc) => {
+      const cat = tc.metadata?.toolCategory || 'other';
+      byCategory[cat]++;
+    });
+
+    return {
+      total: toolCalls.length,
+      byCategory,
+      errors: entries.filter((e) => e.type === 'error').length,
+    };
+  }, [entries]);
+
+  // Filter entries based on search and hidden types/categories
+  const filteredEntries = useMemo(() => {
+    return entries.filter((entry) => {
+      // Filter by hidden types
+      if (hiddenTypes.has(entry.type)) return false;
+
+      // Filter by hidden tool categories (for tool_call entries)
+      if (entry.type === 'tool_call' && entry.metadata?.toolCategory) {
+        if (hiddenCategories.has(entry.metadata.toolCategory)) return false;
+      }
+
+      // Filter by search query
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        return (
+          entry.content.toLowerCase().includes(query) ||
+          entry.title.toLowerCase().includes(query) ||
+          entry.metadata?.toolName?.toLowerCase().includes(query) ||
+          entry.metadata?.summary?.toLowerCase().includes(query) ||
+          entry.metadata?.filePath?.toLowerCase().includes(query)
+        );
+      }
+
+      return true;
+    });
+  }, [entries, hiddenTypes, hiddenCategories, searchQuery]);
+
+  const toggleEntry = (id: string) => {
+    // When user manually collapses an entry, turn off expand all mode
+    if (effectiveExpandedIds.has(id)) {
+      setExpandAllMode(false);
+    }
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const expandAll = () => {
+    // Enable expand all mode so new entries will also be expanded
+    setExpandAllMode(true);
+    setExpandedIds(new Set(filteredEntries.map((e) => e.id)));
+  };
+
+  const collapseAll = () => {
+    // Disable expand all mode when collapsing all
+    setExpandAllMode(false);
+    setExpandedIds(new Set());
+  };
+
+  const toggleTypeFilter = (type: LogEntryType) => {
+    setHiddenTypes((prev) => {
+      const next = new Set(prev);
+      if (next.has(type)) {
+        next.delete(type);
+      } else {
+        next.add(type);
+      }
+      return next;
+    });
+  };
+
+  const toggleCategoryFilter = (category: ToolCategory) => {
+    setHiddenCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(category)) {
+        next.delete(category);
+      } else {
+        next.add(category);
+      }
+      return next;
+    });
+  };
+
+  const clearFilters = () => {
+    setSearchQuery('');
+    setHiddenTypes(new Set());
+    setHiddenCategories(new Set());
+  };
+
+  const hasActiveFilters = searchQuery || hiddenTypes.size > 0 || hiddenCategories.size > 0;
+
+  if (entries.length === 0) {
+    return (
+      <div className="flex items-center justify-center p-8 text-muted-foreground">
+        <div className="text-center">
+          <Info className="w-8 h-8 mx-auto mb-2 opacity-50" />
+          <p className="text-sm">No log entries yet. Logs will appear here as the process runs.</p>
+          {output && output.trim() && (
+            <div className="mt-4 p-3 bg-muted/50 rounded text-xs font-mono text-left max-h-40 overflow-auto scrollbar-styled">
+              <pre className="whitespace-pre-wrap">{output}</pre>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Count entries by type
+  const typeCounts = entries.reduce(
+    (acc, entry) => {
+      acc[entry.type] = (acc[entry.type] || 0) + 1;
+      return acc;
+    },
+    {} as Record<string, number>
+  );
+
+  // Tool categories to display in stats bar
+  const toolCategoryLabels: { key: ToolCategory; label: string }[] = [
+    { key: 'read', label: 'Read' },
+    { key: 'edit', label: 'Edit' },
+    { key: 'write', label: 'Write' },
+    { key: 'bash', label: 'Bash' },
+    { key: 'search', label: 'Search' },
+    { key: 'todo', label: 'Todo' },
+    { key: 'task', label: 'Task' },
+    { key: 'other', label: 'Other' },
+  ];
+
+  return (
+    <div className={cn('flex flex-col', className)}>
+      {/* Sticky header with search, stats, and filters */}
+      {/* Use -top-4 to compensate for parent's p-4 padding, pt-4 to restore visual spacing */}
+      <div className="sticky -top-4 z-10 bg-popover/95 backdrop-blur-sm pt-4 pb-2 space-y-2 -mx-4 px-4">
+        {/* Search bar */}
+        <div className="flex items-center gap-2 px-1" data-testid="log-search-bar">
+          <div className="relative flex-1">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/70" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search logs..."
+              className="w-full pl-8 pr-8 py-1.5 text-xs bg-muted/50 border border-border rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-ring"
+              data-testid="log-search-input"
+            />
+            {searchQuery && (
+              <button
+                onClick={() => setSearchQuery('')}
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                data-testid="log-search-clear"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            )}
+          </div>
+          {hasActiveFilters && (
+            <button
+              onClick={clearFilters}
+              className="text-xs text-muted-foreground hover:text-foreground px-2 py-1 rounded hover:bg-muted transition-colors flex items-center gap-1"
+              data-testid="log-clear-filters"
+            >
+              <X className="w-3 h-3" />
+              Clear Filters
+            </button>
+          )}
+        </div>
+
+        {/* Tool category stats bar */}
+        {stats.total > 0 && (
+          <div className="flex items-center gap-1 px-1 flex-wrap" data-testid="log-stats-bar">
+            <span className="text-xs text-muted-foreground/70 mr-1">
+              <Wrench className="w-3 h-3 inline mr-1" />
+              {stats.total} tools:
+            </span>
+            {toolCategoryLabels.map(({ key, label }) => {
+              const count = stats.byCategory[key];
+              if (count === 0) return null;
+              const isHidden = hiddenCategories.has(key);
+              const colorClasses = getToolCategoryColor(key);
+              return (
+                <button
+                  key={key}
+                  onClick={() => toggleCategoryFilter(key)}
+                  className={cn(
+                    'text-xs px-2 py-0.5 rounded-full border transition-all flex items-center gap-1',
+                    colorClasses,
+                    isHidden && 'opacity-40 line-through'
+                  )}
+                  title={isHidden ? `Show ${label} tools` : `Hide ${label} tools`}
+                  data-testid={`log-category-filter-${key}`}
+                >
+                  {getToolCategoryIcon(key)}
+                  <span>{count}</span>
+                </button>
+              );
+            })}
+            {stats.errors > 0 && (
+              <span className="text-xs px-2 py-0.5 rounded-full bg-red-500/10 text-red-400 border border-red-500/30 flex items-center gap-1">
+                <AlertCircle className="w-3 h-3" />
+                {stats.errors}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Header with type filters and controls */}
+        <div className="flex items-center justify-between px-1" data-testid="log-viewer-header">
+          <div className="flex items-center gap-1 flex-wrap">
+            <Filter className="w-3 h-3 text-muted-foreground/70 mr-1" />
+            {Object.entries(typeCounts).map(([type, count]) => {
+              const colors = getLogTypeColors(type as LogEntryType);
+              const isHidden = hiddenTypes.has(type as LogEntryType);
+              return (
+                <button
+                  key={type}
+                  onClick={() => toggleTypeFilter(type as LogEntryType)}
+                  className={cn(
+                    'text-xs px-2 py-0.5 rounded-full transition-all',
+                    colors.badge,
+                    isHidden && 'opacity-40 line-through'
+                  )}
+                  title={isHidden ? `Show ${type}` : `Hide ${type}`}
+                  data-testid={`log-type-filter-${type}`}
+                >
+                  {type}: {count}
+                </button>
+              );
+            })}
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="text-xs text-muted-foreground/70">
+              {filteredEntries.length}/{entries.length}
+            </span>
+            <button
+              onClick={expandAll}
+              className={cn(
+                'text-xs px-2 py-1 rounded transition-colors',
+                expandAllMode
+                  ? 'text-primary bg-primary/20 hover:bg-primary/30'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted'
+              )}
+              data-testid="log-expand-all"
+              title={
+                expandAllMode ? 'Expand All (Active - new items will auto-expand)' : 'Expand All'
+              }
+            >
+              Expand All{expandAllMode ? ' (On)' : ''}
+            </button>
+            <button
+              onClick={collapseAll}
+              className="text-xs text-muted-foreground hover:text-foreground px-2 py-1 rounded hover:bg-muted transition-colors"
+              data-testid="log-collapse-all"
+            >
+              Collapse All
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Log entries */}
+      <div className="space-y-2 mt-2" data-testid="log-entries-container">
+        {filteredEntries.length === 0 ? (
+          <div className="text-center py-4 text-muted-foreground text-sm">
+            No entries match your filters.
+            {hasActiveFilters && (
+              <button onClick={clearFilters} className="ml-2 text-primary hover:underline">
+                Clear filters
+              </button>
+            )}
+          </div>
+        ) : (
+          filteredEntries.map((entry) => (
+            <LogEntryItem
+              key={entry.id}
+              entry={entry}
+              isExpanded={effectiveExpandedIds.has(entry.id)}
+              onToggle={() => toggleEntry(entry.id)}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/markdown.tsx b/temp_repo/apps/ui/src/components/ui/markdown.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ff7facbf1110be3fa4a75d626582e7eea02263be
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/markdown.tsx
@@ -0,0 +1,145 @@
+import ReactMarkdown, { Components } from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
+import remarkGfm from 'remark-gfm';
+import { cn } from '@/lib/utils';
+import { Square, CheckSquare } from 'lucide-react';
+
+interface MarkdownProps {
+  children: string;
+  className?: string;
+}
+
+/**
+ * Renders a tasks code block as a proper task list with checkboxes
+ */
+function TasksBlock({ content }: { content: string }) {
+  const lines = content.split('\n');
+
+  return (
+    <div className="my-4 space-y-1">
+      {lines.map((line, idx) => {
+        const trimmed = line.trim();
+
+        // Check for phase/section headers (## Phase 1: ...)
+        const headerMatch = trimmed.match(/^##\s+(.+)$/);
+        if (headerMatch) {
+          return (
+            <div key={idx} className="text-foreground font-semibold mt-4 mb-2 text-sm">
+              {headerMatch[1]}
+            </div>
+          );
+        }
+
+        // Check for task items (- [ ] or - [x])
+        const taskMatch = trimmed.match(/^-\s*\[([ xX])\]\s*(.+)$/);
+        if (taskMatch) {
+          const isChecked = taskMatch[1].toLowerCase() === 'x';
+          const taskText = taskMatch[2];
+
+          return (
+            <div key={idx} className="flex items-start gap-2 py-1">
+              {isChecked ? (
+                <CheckSquare className="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0" />
+              ) : (
+                <Square className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+              )}
+              <span
+                className={cn(
+                  'text-sm',
+                  isChecked ? 'text-muted-foreground line-through' : 'text-foreground-secondary'
+                )}
+              >
+                {taskText}
+              </span>
+            </div>
+          );
+        }
+
+        // Empty lines
+        if (!trimmed) {
+          return <div key={idx} className="h-2" />;
+        }
+
+        // Other content (render as-is)
+        return (
+          <div key={idx} className="text-sm text-foreground-secondary">
+            {trimmed}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * Custom components for ReactMarkdown
+ */
+const markdownComponents: Components = {
+  // Handle code blocks - special case for 'tasks' language
+  code({ className, children }) {
+    const match = /language-(\w+)/.exec(className || '');
+    const language = match ? match[1] : '';
+    const content = String(children).replace(/\n$/, '');
+
+    // Special handling for tasks code blocks
+    if (language === 'tasks') {
+      return <TasksBlock content={content} />;
+    }
+
+    // Regular code (inline or block)
+    return <code className={className}>{children}</code>;
+  },
+};
+
+/**
+ * Reusable Markdown component for rendering markdown content
+ * Theme-aware styling that adapts to all predefined themes
+ * Supports raw HTML elements including images
+ */
+export function Markdown({ children, className }: MarkdownProps) {
+  return (
+    <div
+      className={cn(
+        'prose prose-sm prose-invert max-w-none',
+        // Headings
+        '[&_h1]:text-xl [&_h1]:text-foreground [&_h1]:font-semibold [&_h1]:mt-4 [&_h1]:mb-2',
+        '[&_h2]:text-lg [&_h2]:text-foreground [&_h2]:font-semibold [&_h2]:mt-4 [&_h2]:mb-2',
+        '[&_h3]:text-base [&_h3]:text-foreground [&_h3]:font-semibold [&_h3]:mt-3 [&_h3]:mb-2',
+        '[&_h4]:text-sm [&_h4]:text-foreground [&_h4]:font-semibold [&_h4]:mt-2 [&_h4]:mb-1',
+        // Paragraphs
+        '[&_p]:text-foreground-secondary [&_p]:leading-relaxed [&_p]:my-2',
+        // Lists
+        '[&_ul]:my-2 [&_ul]:pl-4 [&_ol]:my-2 [&_ol]:pl-4',
+        '[&_li]:text-foreground-secondary [&_li]:my-0.5',
+        // Code
+        '[&_code]:text-chart-2 [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-sm',
+        '[&_pre]:bg-card [&_pre]:border [&_pre]:border-border [&_pre]:rounded-lg [&_pre]:my-2 [&_pre]:p-3 [&_pre]:overflow-x-auto',
+        '[&_pre_code]:bg-transparent [&_pre_code]:p-0',
+        // Strong/Bold
+        '[&_strong]:text-foreground [&_strong]:font-semibold',
+        // Links
+        '[&_a]:text-brand-500 [&_a]:no-underline hover:[&_a]:underline',
+        // Blockquotes
+        '[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground [&_blockquote]:italic [&_blockquote]:my-2',
+        // Horizontal rules
+        '[&_hr]:border-border [&_hr]:my-4',
+        // Images
+        '[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-2 [&_img]:border [&_img]:border-border',
+        // Tables
+        '[&_table]:w-full [&_table]:border-collapse [&_table]:my-4',
+        '[&_th]:border [&_th]:border-border [&_th]:bg-muted [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:text-foreground [&_th]:font-semibold',
+        '[&_td]:border [&_td]:border-border [&_td]:px-3 [&_td]:py-2 [&_td]:text-foreground-secondary',
+        className
+      )}
+    >
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeRaw, rehypeSanitize]}
+        components={markdownComponents}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/path-input.tsx b/temp_repo/apps/ui/src/components/ui/path-input.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c748d86721ed0da3bff5a53a7cca132bc86bd379
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/path-input.tsx
@@ -0,0 +1,442 @@
+import { useEffect, Fragment, FocusEvent, KeyboardEvent, MouseEvent } from 'react';
+import { useState, useRef, useCallback, useMemo } from 'react';
+import { Home, ArrowLeft, Pencil, ArrowRight, Search, Folder, File, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Kbd } from '@/components/ui/kbd';
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+} from '@/components/ui/command';
+import { cn } from '@/lib/utils';
+
+interface BreadcrumbSegment {
+  name: string;
+  path: string;
+  isLast: boolean;
+}
+
+function parseBreadcrumbs(path: string): BreadcrumbSegment[] {
+  if (!path) return [];
+
+  // Handle root path on Unix-like systems
+  if (path === '/') {
+    return [{ name: '/', path: '/', isLast: true }];
+  }
+
+  const segments = path.split(/[/\\]/).filter(Boolean);
+  const isWindows = segments[0]?.includes(':');
+
+  return segments.map((segment, index) => {
+    let fullPath: string;
+
+    if (isWindows) {
+      const pathParts = segments.slice(0, index + 1);
+      if (index === 0) {
+        fullPath = `${pathParts[0]}\\`;
+      } else {
+        fullPath = pathParts.join('\\');
+      }
+    } else {
+      fullPath = '/' + segments.slice(0, index + 1).join('/');
+    }
+
+    return {
+      name: segment,
+      path: fullPath,
+      isLast: index === segments.length - 1,
+    };
+  });
+}
+
+interface FileSystemEntry {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+}
+
+interface PathInputProps {
+  /** Current resolved path */
+  currentPath: string;
+  /** Parent path for back navigation (null if at root) */
+  parentPath: string | null;
+  /** Whether the component is in a loading state */
+  loading?: boolean;
+  /** Whether there's an error (shows input mode and red border when true) */
+  error?: boolean;
+  /** Placeholder text for the input field */
+  placeholder?: string;
+  /** Placeholder text for the search input field */
+  searchPlaceholder?: string;
+  /** Called when user navigates to a path (via breadcrumb click, enter key, or navigation buttons) */
+  onNavigate: (path: string) => void;
+  /** Called when user clicks home button (navigates to home directory) */
+  onHome: () => void;
+  /** Additional className for the container */
+  className?: string;
+  /** List of files and directories in current path for search functionality */
+  entries?: FileSystemEntry[];
+  /** Called when user selects an entry from search results */
+  onSelectEntry?: (entry: FileSystemEntry) => void;
+}
+
+function PathInput({
+  currentPath,
+  parentPath,
+  loading = false,
+  error,
+  placeholder = 'Paste or type a full path (e.g., /home/user/projects/myapp)',
+  searchPlaceholder = 'Search...',
+  onNavigate,
+  onHome,
+  className,
+  entries = [],
+  onSelectEntry,
+}: PathInputProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [pathInput, setPathInput] = useState(currentPath);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Sync pathInput with currentPath when it changes externally
+  useEffect(() => {
+    if (!isEditing) {
+      setPathInput(currentPath);
+    }
+  }, [currentPath, isEditing]);
+
+  // Focus input when error occurs or entering edit mode
+  useEffect(() => {
+    if ((error || isEditing) && inputRef.current) {
+      inputRef.current.focus();
+      if (error) {
+        inputRef.current.select();
+      }
+    }
+  }, [error, isEditing]);
+
+  const handleGoToParent = useCallback(() => {
+    if (parentPath) {
+      onNavigate(parentPath);
+    }
+  }, [parentPath, onNavigate]);
+
+  const handleBreadcrumbClick = useCallback(
+    (path: string) => {
+      onNavigate(path);
+    },
+    [onNavigate]
+  );
+
+  const handleStartEditing = useCallback(() => {
+    setIsEditing(true);
+  }, []);
+
+  const handleInputBlur = useCallback(
+    (e: FocusEvent) => {
+      // Check if focus is moving to another element within this component
+      if (containerRef.current?.contains(e.relatedTarget)) {
+        return;
+      }
+      if (pathInput !== currentPath) {
+        setPathInput(currentPath);
+      }
+      setIsEditing(false);
+    },
+    [pathInput, currentPath]
+  );
+
+  const handleGoToPath = useCallback(() => {
+    const trimmedPath = pathInput.trim();
+    if (trimmedPath) {
+      onNavigate(trimmedPath);
+      setIsEditing(false);
+    }
+  }, [pathInput, onNavigate]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        handleGoToPath();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        setPathInput(currentPath);
+        setIsEditing(false);
+        inputRef.current?.blur();
+      }
+    },
+    [handleGoToPath, currentPath]
+  );
+
+  // Handle click on the path container to start editing
+  const handleContainerClick = useCallback(
+    (e: MouseEvent) => {
+      // Don't trigger if clicking on a button or already editing
+      if (
+        isEditing ||
+        isSearchOpen ||
+        (e.target as HTMLElement).closest('button') ||
+        (e.target as HTMLElement).closest('a')
+      ) {
+        return;
+      }
+      setIsEditing(true);
+    },
+    [isEditing, isSearchOpen]
+  );
+
+  const handleSelectEntry = useCallback(
+    (entry: FileSystemEntry) => {
+      if (onSelectEntry) {
+        onSelectEntry(entry);
+      }
+      setIsSearchOpen(false);
+    },
+    [onSelectEntry]
+  );
+
+  // Global keyboard shortcut to activate search (/)
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: globalThis.KeyboardEvent) => {
+      // Activate search with '/' key (unless in an input field or contenteditable)
+      if (
+        e.key === '/' &&
+        !isEditing &&
+        !isSearchOpen &&
+        entries.length > 0 &&
+        !(e.target as HTMLElement).matches('input, textarea, [contenteditable="true"]')
+      ) {
+        e.preventDefault();
+        setIsSearchOpen(true);
+      }
+      // Close search with Escape key
+      if (e.key === 'Escape' && isSearchOpen) {
+        e.preventDefault();
+        e.stopPropagation(); // Stop propagation so parent modal doesn't close
+        setIsSearchOpen(false);
+      }
+    };
+
+    // Use capture phase to intercept ESC before parent modal handlers
+    // This allows us to close search first, then let ESC bubble to close modal on second press
+    window.addEventListener('keydown', handleGlobalKeyDown, true);
+    return () => window.removeEventListener('keydown', handleGlobalKeyDown, true);
+  }, [isEditing, isSearchOpen, entries.length]);
+
+  // Close search when clicking outside
+  useEffect(() => {
+    if (!isSearchOpen) return;
+
+    const handleClickOutside = (e: globalThis.MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (containerRef.current && !containerRef.current.contains(target)) {
+        setIsSearchOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isSearchOpen]);
+
+  const breadcrumbs = useMemo(() => parseBreadcrumbs(currentPath), [currentPath]);
+
+  const entryItems = useMemo(
+    () =>
+      entries.map((entry) => (
+        <CommandItem key={entry.path} value={entry.name} onSelect={() => handleSelectEntry(entry)}>
+          {entry.isDirectory ? (
+            <Folder className="w-3.5 h-3.5 text-brand-500 mr-2" />
+          ) : (
+            <File className="w-3.5 h-3.5 text-muted-foreground mr-2" />
+          )}
+          <span className="flex-1 truncate font-mono text-xs">{entry.name}</span>
+        </CommandItem>
+      )),
+    [entries, handleSelectEntry]
+  );
+
+  const showBreadcrumbs = currentPath && !isEditing && !loading && !error;
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn('flex items-center gap-2', className)}
+      role="navigation"
+      aria-label="Path navigation"
+    >
+      {/* Navigation buttons */}
+      <div className="flex items-center gap-1 shrink-0">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onHome}
+          className="h-7 w-7"
+          disabled={loading}
+          aria-label="Go to home directory"
+        >
+          <Home className="w-4 h-4" />
+        </Button>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleGoToParent}
+          className="h-7 w-7"
+          disabled={loading || !parentPath}
+          aria-label="Go to parent directory"
+        >
+          <ArrowLeft className="w-4 h-4" />
+        </Button>
+      </div>
+
+      {/* Path display / input */}
+      <div className="flex-1 relative min-w-0">
+        {/* Search Popover - positioned to overlap the input */}
+        {isSearchOpen && (
+          <div className="absolute inset-0 z-50">
+            <div className="relative w-full h-full">
+              <div className="absolute inset-0 bg-popover border border-border rounded-md shadow-lg">
+                <Command className="h-auto max-h-[300px]">
+                  <div className="flex items-center gap-2 px-3 **:data-[slot=command-input-wrapper]:border-0 **:data-[slot=command-input-wrapper]:px-0">
+                    <CommandInput
+                      autoFocus
+                      placeholder={searchPlaceholder}
+                      className="h-8 flex-1"
+                    />
+                    <div className="flex items-center gap-1 shrink-0 ml-auto">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => setIsSearchOpen(false)}
+                        className="h-6 w-6 text-muted-foreground hover:text-foreground"
+                        aria-label="Close search"
+                      >
+                        <X className="w-3.5 h-3.5" />
+                      </Button>
+                      <Kbd className="hidden py-0.5 sm:inline-block">ESC</Kbd>
+                    </div>
+                  </div>
+                  <CommandList className="scrollbar-styled">
+                    <CommandEmpty>No files or directories found</CommandEmpty>
+                    <CommandGroup>{entryItems}</CommandGroup>
+                  </CommandList>
+                </Command>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div
+          onClick={handleContainerClick}
+          className={cn(
+            'flex items-center gap-2 min-w-0 h-8 px-3 rounded-md border bg-background/50 transition-colors',
+            error
+              ? 'border-destructive focus-within:border-destructive'
+              : 'border-input focus-within:border-ring focus-within:ring-1 focus-within:ring-ring',
+            !isEditing && !error && 'cursor-text hover:border-ring/50'
+          )}
+        >
+          {showBreadcrumbs ? (
+            <>
+              <Breadcrumb className="flex-1 min-w-0 overflow-hidden">
+                <BreadcrumbList className="flex-nowrap overflow-x-auto scrollbar-none">
+                  {breadcrumbs.map((crumb) => (
+                    <Fragment key={crumb.path}>
+                      <BreadcrumbItem className="shrink-0">
+                        {crumb.isLast ? (
+                          <BreadcrumbPage className="font-mono text-xs font-medium truncate max-w-[200px]">
+                            {crumb.name}
+                          </BreadcrumbPage>
+                        ) : (
+                          <BreadcrumbLink
+                            href="#"
+                            onClick={(e) => {
+                              e.preventDefault();
+                              handleBreadcrumbClick(crumb.path);
+                            }}
+                            className="font-mono text-xs text-muted-foreground hover:text-foreground transition-colors truncate max-w-[150px]"
+                          >
+                            {crumb.name}
+                          </BreadcrumbLink>
+                        )}
+                      </BreadcrumbItem>
+                      {!crumb.isLast && (
+                        <BreadcrumbSeparator className="[&>svg]:size-3.5 shrink-0" />
+                      )}
+                    </Fragment>
+                  ))}
+                </BreadcrumbList>
+              </Breadcrumb>
+              <div className="flex items-center gap-0.5 shrink-0">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setIsSearchOpen(true)}
+                  className="h-6 w-6 text-muted-foreground hover:text-foreground"
+                  aria-label="Search files and directories"
+                  title="Search files and directories"
+                  disabled={loading || entries.length === 0}
+                >
+                  <Search className="w-3.5 h-3.5" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleStartEditing}
+                  className="h-6 w-6 text-muted-foreground hover:text-foreground"
+                  aria-label="Edit path"
+                >
+                  <Pencil className="w-3.5 h-3.5" />
+                </Button>
+              </div>
+            </>
+          ) : (
+            <>
+              <Input
+                ref={inputRef}
+                type="text"
+                placeholder={placeholder}
+                value={pathInput}
+                onChange={(e) => setPathInput(e.target.value)}
+                onKeyDown={handleKeyDown}
+                onBlur={handleInputBlur}
+                className="flex-1 font-mono text-xs h-7 px-0 border-0 shadow-none focus-visible:ring-0 bg-transparent"
+                data-testid="path-input"
+                disabled={loading}
+                aria-label="Path input"
+                aria-invalid={error}
+              />
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleGoToPath}
+                disabled={!pathInput.trim() || loading}
+                className="h-6 w-6 shrink-0"
+                aria-label="Go to path"
+              >
+                <ArrowRight className="w-3.5 h-3.5" />
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { PathInput, parseBreadcrumbs };
+export type { PathInputProps, BreadcrumbSegment, FileSystemEntry };
diff --git a/temp_repo/apps/ui/src/components/ui/popover.tsx b/temp_repo/apps/ui/src/components/ui/popover.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7ebcc2d731391b8b69d7c7c651021eea878eb00c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/popover.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/lib/utils';
+
+// Type-safe wrappers for Radix UI primitives (React 19 compatibility)
+const PopoverTriggerPrimitive = PopoverPrimitive.Trigger as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> & {
+    children?: React.ReactNode;
+    asChild?: boolean;
+  } & React.RefAttributes<HTMLButtonElement>
+>;
+
+const PopoverContentPrimitive = PopoverPrimitive.Content as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  children,
+  asChild,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger> & {
+  children?: React.ReactNode;
+  asChild?: boolean;
+}) {
+  return (
+    <PopoverTriggerPrimitive data-slot="popover-trigger" asChild={asChild} {...props}>
+      {children}
+    </PopoverTriggerPrimitive>
+  );
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content> & {
+  className?: string;
+}) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverContentPrimitive
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/temp_repo/apps/ui/src/components/ui/provider-icon.tsx b/temp_repo/apps/ui/src/components/ui/provider-icon.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..637fd812ed4b557c099b2b64320f5be8cbdc95b0
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/provider-icon.tsx
@@ -0,0 +1,642 @@
+import type { ComponentType, ImgHTMLAttributes, SVGProps } from 'react';
+import { cn } from '@/lib/utils';
+import type { AgentModel, ModelProvider } from '@automaker/types';
+import { getProviderFromModel } from '@/lib/utils';
+
+const PROVIDER_ICON_KEYS = {
+  anthropic: 'anthropic',
+  openai: 'openai',
+  openrouter: 'openrouter',
+  cursor: 'cursor',
+  gemini: 'gemini',
+  grok: 'grok',
+  opencode: 'opencode',
+  deepseek: 'deepseek',
+  qwen: 'qwen',
+  nova: 'nova',
+  meta: 'meta',
+  mistral: 'mistral',
+  minimax: 'minimax',
+  glm: 'glm',
+  bigpickle: 'bigpickle',
+  copilot: 'copilot',
+} as const;
+
+type ProviderIconKey = keyof typeof PROVIDER_ICON_KEYS;
+
+interface ProviderIconDefinition {
+  viewBox: string;
+  path: string;
+  fillRule?: 'nonzero' | 'evenodd';
+  fill?: string;
+}
+
+const PROVIDER_ICON_DEFINITIONS: Record<ProviderIconKey, ProviderIconDefinition> = {
+  anthropic: {
+    viewBox: '0 0 248 248',
+    // Official Claude logo from claude.ai favicon
+    path: 'M52.4285 162.873L98.7844 136.879L99.5485 134.602L98.7844 133.334H96.4921L88.7237 132.862L62.2346 132.153L39.3113 131.207L17.0249 130.026L11.4214 128.844L6.2 121.873L6.7094 118.447L11.4214 115.257L18.171 115.847L33.0711 116.911L55.485 118.447L71.6586 119.392L95.728 121.873H99.5485L100.058 120.337L98.7844 119.392L97.7656 118.447L74.5877 102.732L49.4995 86.1905L36.3823 76.62L29.3779 71.7757L25.8121 67.2858L24.2839 57.3608L30.6515 50.2716L39.3113 50.8623L41.4763 51.4531L50.2636 58.1879L68.9842 72.7209L93.4357 90.6804L97.0015 93.6343L98.4374 92.6652L98.6571 91.9801L97.0015 89.2625L83.757 65.2772L69.621 40.8192L63.2534 30.6579L61.5978 24.632C60.9565 22.1032 60.579 20.0111 60.579 17.4246L67.8381 7.49965L71.9133 6.19995L81.7193 7.49965L85.7946 11.0443L91.9074 24.9865L101.714 46.8451L116.996 76.62L121.453 85.4816L123.873 93.6343L124.764 96.1155H126.292V94.6976L127.566 77.9197L129.858 57.3608L132.15 30.8942L132.915 23.4505L136.608 14.4708L143.994 9.62643L149.725 12.344L154.437 19.0788L153.8 23.4505L150.998 41.6463L145.522 70.1215L141.957 89.2625H143.994L146.414 86.7813L156.093 74.0206L172.266 53.698L179.398 45.6635L187.803 36.802L193.152 32.5484H203.34L210.726 43.6549L207.415 55.1159L196.972 68.3492L188.312 79.5739L175.896 96.2095L168.191 109.585L168.882 110.689L170.738 110.53L198.755 104.504L213.91 101.787L231.994 98.7149L240.144 102.496L241.036 106.395L237.852 114.311L218.495 119.037L195.826 123.645L162.07 131.592L161.696 131.893L162.137 132.547L177.36 133.925L183.855 134.279H199.774L229.447 136.524L237.215 141.605L241.8 147.867L241.036 152.711L229.065 158.737L213.019 154.956L175.45 145.977L162.587 142.787H160.805V143.85L171.502 154.366L191.242 172.089L215.82 195.011L217.094 200.682L213.91 205.172L210.599 204.699L188.949 188.394L180.544 181.069L161.696 165.118H160.422V166.772L164.752 173.152L187.803 207.771L188.949 218.405L187.294 221.832L181.308 223.959L174.813 222.777L161.187 203.754L147.305 182.486L136.098 163.345L134.745 164.2L128.075 235.42L125.019 239.082L117.887 241.8L111.902 237.31L108.718 229.984L111.902 215.452L115.722 196.547L118.779 181.541L121.58 162.873L123.291 156.636L123.14 156.219L121.773 156.449L107.699 175.752L86.304 204.699L69.3663 222.777L65.291 224.431L58.2867 220.768L58.9235 214.27L62.8713 208.48L86.304 178.705L100.44 160.155L109.551 149.507L109.462 147.967L108.959 147.924L46.6977 188.512L35.6182 189.93L30.7788 185.44L31.4156 178.115L33.7079 175.752L52.4285 162.873Z',
+    fill: '#d97757',
+  },
+  openai: {
+    viewBox: '0 0 158.7128 157.296',
+    path: 'M60.8734,57.2556v-14.9432c0-1.2586.4722-2.2029,1.5728-2.8314l30.0443-17.3023c4.0899-2.3593,8.9662-3.4599,13.9988-3.4599,18.8759,0,30.8307,14.6289,30.8307,30.2006,0,1.1007,0,2.3593-.158,3.6178l-31.1446-18.2467c-1.8872-1.1006-3.7754-1.1006-5.6629,0l-39.4812,22.9651ZM131.0276,115.4561v-35.7074c0-2.2028-.9446-3.7756-2.8318-4.8763l-39.481-22.9651,12.8982-7.3934c1.1007-.6285,2.0453-.6285,3.1458,0l30.0441,17.3024c8.6523,5.0341,14.4708,15.7296,14.4708,26.1107,0,11.9539-7.0769,22.965-18.2461,27.527v.0021ZM51.593,83.9964l-12.8982-7.5497c-1.1007-.6285-1.5728-1.5728-1.5728-2.8314v-34.6048c0-16.8303,12.8982-29.5722,30.3585-29.5722,6.607,0,12.7403,2.2029,17.9324,6.1349l-30.987,17.9324c-1.8871,1.1007-2.8314,2.6735-2.8314,4.8764v45.6159l-.0014-.0015ZM79.3562,100.0403l-18.4829-10.3811v-22.0209l18.4829-10.3811,18.4812,10.3811v22.0209l-18.4812,10.3811ZM91.2319,147.8591c-6.607,0-12.7403-2.2031-17.9324-6.1344l30.9866-17.9333c1.8872-1.1005,2.8318-2.6728,2.8318-4.8759v-45.616l13.0564,7.5498c1.1005.6285,1.5723,1.5728,1.5723,2.8314v34.6051c0,16.8297-13.0564,29.5723-30.5147,29.5723v.001ZM53.9522,112.7822l-30.0443-17.3024c-8.652-5.0343-14.471-15.7296-14.471-26.1107,0-12.1119,7.2356-22.9652,18.403-27.5272v35.8634c0,2.2028.9443,3.7756,2.8314,4.8763l39.3248,22.8068-12.8982,7.3938c-1.1007.6287-2.045.6287-3.1456,0ZM52.2229,138.5791c-17.7745,0-30.8306-13.3713-30.8306-29.8871,0-1.2585.1578-2.5169.3143-3.7754l30.987,17.9323c1.8871,1.1005,3.7757,1.1005,5.6628,0l39.4811-22.807v14.9435c0,1.2585-.4721,2.2021-1.5728,2.8308l-30.0443,17.3025c-4.0898,2.359-8.9662,3.4605-13.9989,3.4605h.0014ZM91.2319,157.296c19.0327,0,34.9188-13.5272,38.5383-31.4594,17.6164-4.562,28.9425-21.0779,28.9425-37.908,0-11.0112-4.719-21.7066-13.2133-29.4143.7867-3.3035,1.2595-6.607,1.2595-9.909,0-22.4929-18.2471-39.3247-39.3251-39.3247-4.2461,0-8.3363.6285-12.4262,2.045-7.0792-6.9213-16.8318-11.3254-27.5271-11.3254-19.0331,0-34.9191,13.5268-38.5384,31.4591C11.3255,36.0212,0,52.5373,0,69.3675c0,11.0112,4.7184,21.7065,13.2125,29.4142-.7865,3.3035-1.2586,6.6067-1.2586,9.9092,0,22.4923,18.2466,39.3241,39.3248,39.3241,4.2462,0,8.3362-.6277,12.426-2.0441,7.0776,6.921,16.8302,11.3251,27.5271,11.3251Z',
+    fill: '#74aa9c',
+  },
+  openrouter: {
+    viewBox: '0 0 24 24',
+    // OpenRouter logo from Simple Icons
+    path: 'M16.778 1.844v1.919q-.569-.026-1.138-.032-.708-.008-1.415.037c-1.93.126-4.023.728-6.149 2.237-2.911 2.066-2.731 1.95-4.14 2.75-.396.223-1.342.574-2.185.798-.841.225-1.753.333-1.751.333v4.229s.768.108 1.61.333c.842.224 1.789.575 2.185.799 1.41.798 1.228.683 4.14 2.75 2.126 1.509 4.22 2.11 6.148 2.236.88.058 1.716.041 2.555.005v1.918l7.222-4.168-7.222-4.17v2.176c-.86.038-1.611.065-2.278.021-1.364-.09-2.417-.357-3.979-1.465-2.244-1.593-2.866-2.027-3.68-2.508.889-.518 1.449-.906 3.822-2.59 1.56-1.109 2.614-1.377 3.978-1.466.667-.044 1.418-.017 2.278.02v2.176L24 6.014Z',
+    fill: '#94A3B8',
+  },
+  cursor: {
+    viewBox: '0 0 512 512',
+    // Official Cursor logo - hexagonal shape with triangular wedge
+    path: 'M415.035 156.35l-151.503-87.4695c-4.865-2.8094-10.868-2.8094-15.733 0l-151.4969 87.4695c-4.0897 2.362-6.6146 6.729-6.6146 11.459v176.383c0 4.73 2.5249 9.097 6.6146 11.458l151.5039 87.47c4.865 2.809 10.868 2.809 15.733 0l151.504-87.47c4.089-2.361 6.614-6.728 6.614-11.458v-176.383c0-4.73-2.525-9.097-6.614-11.459zm-9.516 18.528l-146.255 253.32c-.988 1.707-3.599 1.01-3.599-.967v-165.872c0-3.314-1.771-6.379-4.644-8.044l-143.645-82.932c-1.707-.988-1.01-3.599.968-3.599h292.509c4.154 0 6.75 4.503 4.673 8.101h-.007z',
+    fill: '#5E9EFF',
+  },
+  gemini: {
+    viewBox: '0 0 192 192',
+    // Official Google Gemini sparkle logo from gemini.google.com
+    path: 'M164.93 86.68c-13.56-5.84-25.42-13.84-35.6-24.01-10.17-10.17-18.18-22.04-24.01-35.6-2.23-5.19-4.04-10.54-5.42-16.02C99.45 9.26 97.85 8 96 8s-3.45 1.26-3.9 3.05c-1.38 5.48-3.18 10.81-5.42 16.02-5.84 13.56-13.84 25.43-24.01 35.6-10.17 10.16-22.04 18.17-35.6 24.01-5.19 2.23-10.54 4.04-16.02 5.42C9.26 92.55 8 94.15 8 96s1.26 3.45 3.05 3.9c5.48 1.38 10.81 3.18 16.02 5.42 13.56 5.84 25.42 13.84 35.6 24.01 10.17 10.17 18.18 22.04 24.01 35.6 2.24 5.2 4.04 10.54 5.42 16.02A4.03 4.03 0 0 0 96 184c1.85 0 3.45-1.26 3.9-3.05 1.38-5.48 3.18-10.81 5.42-16.02 5.84-13.56 13.84-25.42 24.01-35.6 10.17-10.17 22.04-18.18 35.6-24.01 5.2-2.24 10.54-4.04 16.02-5.42A4.03 4.03 0 0 0 184 96c0-1.85-1.26-3.45-3.05-3.9-5.48-1.38-10.81-3.18-16.02-5.42',
+  },
+  grok: {
+    viewBox: '0 0 512 509.641',
+    // Official Grok/xAI logo - stylized symbol from grok.com
+    path: 'M213.235 306.019l178.976-180.002v.169l51.695-51.763c-.924 1.32-1.86 2.605-2.785 3.89-39.281 54.164-58.46 80.649-43.07 146.922l-.09-.101c10.61 45.11-.744 95.137-37.398 131.836-46.216 46.306-120.167 56.611-181.063 14.928l42.462-19.675c38.863 15.278 81.392 8.57 111.947-22.03 30.566-30.6 37.432-75.159 22.065-112.252-2.92-7.025-11.67-8.795-17.792-4.263l-124.947 92.341zm-25.786 22.437l-.033.034L68.094 435.217c7.565-10.429 16.957-20.294 26.327-30.149 26.428-27.803 52.653-55.359 36.654-94.302-21.422-52.112-8.952-113.177 30.724-152.898 41.243-41.254 101.98-51.661 152.706-30.758 11.23 4.172 21.016 10.114 28.638 15.639l-42.359 19.584c-39.44-16.563-84.629-5.299-112.207 22.313-37.298 37.308-44.84 102.003-1.128 143.81z',
+  },
+  opencode: {
+    viewBox: '0 0 512 512',
+    // Official OpenCode favicon - geometric icon from opencode.ai
+    path: 'M384 416H128V96H384V416ZM320 160H192V352H320V160Z',
+    fillRule: 'evenodd',
+    fill: '#6366F1',
+  },
+  deepseek: {
+    viewBox: '0 0 24 24',
+    // Official DeepSeek logo - whale icon from lobehub/lobe-icons
+    path: 'M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z',
+  },
+  qwen: {
+    viewBox: '0 0 24 24',
+    // Official Qwen logo - geometric star from lobehub/lobe-icons
+    path: 'M12.604 1.34c.393.69.784 1.382 1.174 2.075a.18.18 0 00.157.091h5.552c.174 0 .322.11.446.327l1.454 2.57c.19.337.24.478.024.837-.26.43-.513.864-.76 1.3l-.367.658c-.106.196-.223.28-.04.512l2.652 4.637c.172.301.111.494-.043.77-.437.785-.882 1.564-1.335 2.34-.159.272-.352.375-.68.37-.777-.016-1.552-.01-2.327.016a.099.099 0 00-.081.05 575.097 575.097 0 01-2.705 4.74c-.169.293-.38.363-.725.364-.997.003-2.002.004-3.017.002a.537.537 0 01-.465-.271l-1.335-2.323a.09.09 0 00-.083-.049H4.982c-.285.03-.553-.001-.805-.092l-1.603-2.77a.543.543 0 01-.002-.54l1.207-2.12a.198.198 0 000-.197 550.951 550.951 0 01-1.875-3.272l-.79-1.395c-.16-.31-.173-.496.095-.965.465-.813.927-1.625 1.387-2.436.132-.234.304-.334.584-.335a338.3 338.3 0 012.589-.001.124.124 0 00.107-.063l2.806-4.895a.488.488 0 01.422-.246c.524-.001 1.053 0 1.583-.006L11.704 1c.341-.003.724.032.9.34zm-3.432.403a.06.06 0 00-.052.03L6.254 6.788a.157.157 0 01-.135.078H3.253c-.056 0-.07.025-.041.074l5.81 10.156c.025.042.013.062-.034.063l-2.795.015a.218.218 0 00-.2.116l-1.32 2.31c-.044.078-.021.118.068.118l5.716.008c.046 0 .08.02.104.061l1.403 2.454c.046.081.092.082.139 0l5.006-8.76.783-1.382a.055.055 0 01.096 0l1.424 2.53a.122.122 0 00.107.062l2.763-.02a.04.04 0 00.035-.02.041.041 0 000-.04l-2.9-5.086a.108.108 0 010-.113l.293-.507 1.12-1.977c.024-.041.012-.062-.035-.062H9.2c-.059 0-.073-.026-.043-.077l1.434-2.505a.107.107 0 000-.114L9.225 1.774a.06.06 0 00-.053-.031zm6.29 8.02c.046 0 .058.02.034.06l-.832 1.465-2.613 4.585a.056.056 0 01-.05.029.058.058 0 01-.05-.029L8.498 9.841c-.02-.034-.01-.052.028-.054l.216-.012 6.722-.012z',
+  },
+  nova: {
+    viewBox: '0 0 33 32',
+    // Official Amazon Nova logo from lobehub/lobe-icons
+    path: 'm17.865 23.28 1.533 1.543c.07.07.092.175.055.267l-2.398 6.118A1.24 1.24 0 0 1 15.9 32c-.51 0-.969-.315-1.155-.793l-3.451-8.804-5.582 5.617a.246.246 0 0 1-.35 0l-1.407-1.415a.25.25 0 0 1 0-.352l6.89-6.932a1.3 1.3 0 0 1 .834-.398 1.25 1.25 0 0 1 1.232.79l2.992 7.63 1.557-3.977a.248.248 0 0 1 .408-.085zm8.224-19.3-5.583 5.617-3.45-8.805a1.24 1.24 0 0 0-1.43-.762c-.414.092-.744.407-.899.805l-2.38 6.072a.25.25 0 0 0 .055.267l1.533 1.543c.127.127.34.082.407-.085L15.9 4.655l2.991 7.629a1.24 1.24 0 0 0 2.035.425l6.922-6.965a.25.25 0 0 0 0-.352L26.44 3.977a.246.246 0 0 0-.35 0zM8.578 17.566l-3.953-1.567 7.582-3.01c.49-.195.815-.685.785-1.24a1.3 1.3 0 0 0-.395-.84l-6.886-6.93a.246.246 0 0 0-.35 0L3.954 5.395a.25.25 0 0 0 0 .353l5.583 5.617-8.75 3.472a1.25 1.25 0 0 0 0 2.325l6.079 2.412a.24.24 0 0 0 .266-.055l1.533-1.542a.25.25 0 0 0-.085-.41zm22.434-2.73-6.08-2.412a.24.24 0 0 0-.265.055l-1.533 1.542a.25.25 0 0 0 .084.41L27.172 16l-7.583 3.01a1.255 1.255 0 0 0-.785 1.24c.018.317.172.614.395.84l6.89 6.931a.246.246 0 0 0 .35 0l1.406-1.415a.25.25 0 0 0 0-.352l-5.582-5.617 8.75-3.472a1.25 1.25 0 0 0 0-2.325z',
+    fill: '#FF9900',
+  },
+  // Meta and Mistral use custom standalone SVG components
+  // These placeholder entries prevent TypeScript errors
+  meta: {
+    viewBox: '0 0 24 24',
+    path: '',
+  },
+  mistral: {
+    viewBox: '0 0 24 24',
+    path: '',
+  },
+  minimax: {
+    viewBox: '0 0 24 24',
+    // Official MiniMax logo from lobehub/lobe-icons
+    path: 'M16.278 2c1.156 0 2.093.927 2.093 2.07v12.501a.74.74 0 00.744.709.74.74 0 00.743-.709V9.099a2.06 2.06 0 012.071-2.049A2.06 2.06 0 0124 9.1v6.561a.649.649 0 01-.652.645.649.649 0 01-.653-.645V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v7.472a2.037 2.037 0 01-2.048 2.026 2.037 2.037 0 01-2.048-2.026v-12.5a.785.785 0 00-.788-.753.785.785 0 00-.789.752l-.001 15.904A2.037 2.037 0 0113.441 22a2.037 2.037 0 01-2.048-2.026V18.04c0-.356.292-.645.652-.645.36 0 .652.289.652.645v1.934c0 .263.142.506.372.638.23.131.514.131.744 0a.734.734 0 00.372-.638V4.07c0-1.143.937-2.07 2.093-2.07zm-5.674 0c1.156 0 2.093.927 2.093 2.07v11.523a.648.648 0 01-.652.645.648.648 0 01-.652-.645V4.07a.785.785 0 00-.789-.78.785.785 0 00-.789.78v14.013a2.06 2.06 0 01-2.07 2.048 2.06 2.06 0 01-2.071-2.048V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v3.8a2.06 2.06 0 01-2.071 2.049A2.06 2.06 0 010 12.9v-1.378c0-.357.292-.646.652-.646.36 0 .653.29.653.646V12.9c0 .418.343.757.766.757s.766-.339.766-.757V9.099a2.06 2.06 0 012.07-2.048 2.06 2.06 0 012.071 2.048v8.984c0 .419.343.758.767.758.423 0 .766-.339.766-.758V4.07c0-1.143.937-2.07 2.093-2.07z',
+  },
+  glm: {
+    viewBox: '0 0 24 24',
+    // Official Z.ai/GLM logo from lobehub/lobe-icons (GLM/Zhipu provider)
+    path: 'M12.105 2L9.927 4.953H.653L2.83 2h9.276zM23.254 19.048L21.078 22h-9.242l2.174-2.952h9.244zM24 2L9.264 22H0L14.736 2H24z',
+    fill: '#3B82F6', // z.ai brand blue
+  },
+  bigpickle: {
+    viewBox: '0 0 24 24',
+    // Big Pickle logo - stylized shape with dots
+    path: 'M8 4c-2.21 0-4 1.79-4 4v8c0 2.21 1.79 4 4 4h8c2.21 0 4-1.79 4-4V8c0-2.21-1.79-4-4-4H8zm0 2h8c1.103 0 2 .897 2 2v8c0 1.103-.897 2-2 2H8c-1.103 0-2-.897-2-2V8c0-1.103.897-2 2-2zm2 3a1 1 0 100 2 1 1 0 000-2zm4 0a1 1 0 100 2 1 1 0 000-2zm-4 4a1 1 0 100 2 1 1 0 000-2zm4 0a1 1 0 100 2 1 1 0 000-2z',
+    fill: '#4ADE80',
+  },
+  copilot: {
+    viewBox: '0 0 98 96',
+    // Official GitHub Octocat logo mark (theme-aware via currentColor)
+    path: 'M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z',
+  },
+};
+
+export interface ProviderIconProps extends Omit<SVGProps<SVGSVGElement>, 'viewBox'> {
+  provider: ProviderIconKey;
+  title?: string;
+}
+
+export function ProviderIcon({ provider, title, className, ...props }: ProviderIconProps) {
+  const definition = PROVIDER_ICON_DEFINITIONS[provider];
+  const {
+    role,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-hidden': ariaHidden,
+    ...rest
+  } = props;
+  const hasAccessibleLabel = Boolean(title || ariaLabel || ariaLabelledby);
+
+  return (
+    <svg
+      viewBox={definition.viewBox}
+      className={cn('inline-block', className)}
+      role={role ?? (hasAccessibleLabel ? 'img' : 'presentation')}
+      aria-hidden={ariaHidden ?? !hasAccessibleLabel}
+      focusable="false"
+      {...rest}
+    >
+      {title && <title>{title}</title>}
+      <path
+        d={definition.path}
+        fill={definition.fill || 'currentColor'}
+        fillRule={definition.fillRule}
+      />
+    </svg>
+  );
+}
+
+export function AnthropicIcon(props: Omit<ProviderIconProps, 'provider'>) {
+  return <ProviderIcon provider={PROVIDER_ICON_KEYS.anthropic} {...props} />;
+}
+
+export function OpenAIIcon(props: Omit<ProviderIconProps, 'provider'>) {
+  return <ProviderIcon provider={PROVIDER_ICON_KEYS.openai} {...props} />;
+}
+
+export function OpenRouterIcon(props: Omit<ProviderIconProps, 'provider'>) {
+  return <ProviderIcon provider={PROVIDER_ICON_KEYS.openrouter} {...props} />;
+}
+
+export function CursorIcon(props: Omit<ProviderIconProps, 'provider'>) {
+  return <ProviderIcon provider={PROVIDER_ICON_KEYS.cursor} {...props} />;
+}
+
+const GEMINI_ICON_URL = new URL('../../assets/icons/gemini-icon.svg', import.meta.url).toString();
+const GEMINI_ICON_ALT = 'Gemini';
+
+type GeminiIconProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> & {
+  title?: string;
+};
+
+export function GeminiIcon({ title, className, ...props }: GeminiIconProps) {
+  const {
+    role,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-hidden': ariaHidden,
+    ...rest
+  } = props;
+  const hasAccessibleLabel = Boolean(title || ariaLabel || ariaLabelledby);
+  const fallbackAlt = hasAccessibleLabel ? (title ?? ariaLabel ?? GEMINI_ICON_ALT) : '';
+
+  return (
+    <img
+      src={GEMINI_ICON_URL}
+      className={cn('inline-block', className)}
+      role={role ?? (hasAccessibleLabel ? 'img' : 'presentation')}
+      aria-hidden={ariaHidden ?? !hasAccessibleLabel}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      alt={fallbackAlt}
+      {...rest}
+    />
+  );
+}
+
+export function CopilotIcon(props: Omit<ProviderIconProps, 'provider'>) {
+  return <ProviderIcon provider={PROVIDER_ICON_KEYS.copilot} {...props} />;
+}
+
+export function GrokIcon(props: Omit<ProviderIconProps, 'provider'>) {
+  return <ProviderIcon provider={PROVIDER_ICON_KEYS.grok} {...props} />;
+}
+
+export function OpenCodeIcon(props: Omit<ProviderIconProps, 'provider'>) {
+  return <ProviderIcon provider={PROVIDER_ICON_KEYS.opencode} {...props} />;
+}
+
+export function DeepSeekIcon({
+  className,
+  title,
+  ...props
+}: {
+  className?: string;
+  title?: string;
+}) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <path
+        d="M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 01-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 00-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 01-.465.137 9.597 9.597 0 00-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 001.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 011.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 01.415-.287.302.302 0 01.2.288.306.306 0 01-.31.307.303.303 0 01-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 01-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 01.016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 01-.254-.078c-.11-.054-.2-.19-.114-.358.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z"
+        fill="#4D6BFE"
+      />
+    </svg>
+  );
+}
+
+export function QwenIcon({ className, title, ...props }: { className?: string; title?: string }) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <defs>
+        <linearGradient id="qwen-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" style={{ stopColor: '#6336E7', stopOpacity: 0.84 }} />
+          <stop offset="100%" style={{ stopColor: '#6F69F7', stopOpacity: 0.84 }} />
+        </linearGradient>
+      </defs>
+      <path
+        d="M12.604 1.34c.393.69.784 1.382 1.174 2.075a.18.18 0 00.157.091h5.552c.174 0 .322.11.446.327l1.454 2.57c.19.337.24.478.024.837-.26.43-.513.864-.76 1.3l-.367.658c-.106.196-.223.28-.04.512l2.652 4.637c.172.301.111.494-.043.77-.437.785-.882 1.564-1.335 2.34-.159.272-.352.375-.68.37-.777-.016-1.552-.01-2.327.016a.099.099 0 00-.081.05 575.097 575.097 0 01-2.705 4.74c-.169.293-.38.363-.725.364-.997.003-2.002.004-3.017.002a.537.537 0 01-.465-.271l-1.335-2.323a.09.09 0 00-.083-.049H4.982c-.285.03-.553-.001-.805-.092l-1.603-2.77a.543.543 0 01-.002-.54l1.207-2.12a.198.198 0 000-.197 550.951 550.951 0 01-1.875-3.272l-.79-1.395c-.16-.31-.173-.496.095-.965.465-.813.927-1.625 1.387-2.436.132-.234.304-.334.584-.335a338.3 338.3 0 012.589-.001.124.124 0 00.107-.063l2.806-4.895a.488.488 0 01.422-.246c.524-.001 1.053 0 1.583-.006L11.704 1c.341-.003.724.032.9.34zm-3.432.403a.06.06 0 00-.052.03L6.254 6.788a.157.157 0 01-.135.078H3.253c-.056 0-.07.025-.041.074l5.81 10.156c.025.042.013.062-.034.063l-2.795.015a.218.218 0 00-.2.116l-1.32 2.31c-.044.078-.021.118.068.118l5.716.008c.046 0 .08.02.104.061l1.403 2.454c.046.081.092.082.139 0l5.006-8.76.783-1.382a.055.055 0 01.096 0l1.424 2.53a.122.122 0 00.107.062l2.763-.02a.04.04 0 00.035-.02.041.041 0 000-.04l-2.9-5.086a.108.108 0 010-.113l.293-.507 1.12-1.977c.024-.041.012-.062-.035-.062H9.2c-.059 0-.073-.026-.043-.077l1.434-2.505a.107.107 0 000-.114L9.225 1.774a.06.06 0 00-.053-.031zm6.29 8.02c.046 0 .058.02.034.06l-.832 1.465-2.613 4.585a.056.056 0 01-.05.029.058.058 0 01-.05-.029L8.498 9.841c-.02-.034-.01-.052.028-.054l.216-.012 6.722-.012z"
+        fill="url(#qwen-gradient)"
+      />
+    </svg>
+  );
+}
+
+export function NovaIcon({ className, title, ...props }: { className?: string; title?: string }) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 33 32"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <path
+        d="m17.865 23.28 1.533 1.543c.07.07.092.175.055.267l-2.398 6.118A1.24 1.24 0 0 1 15.9 32c-.51 0-.969-.315-1.155-.793l-3.451-8.804-5.582 5.617a.246.246 0 0 1-.35 0l-1.407-1.415a.25.25 0 0 1 0-.352l6.89-6.932a1.3 1.3 0 0 1 .834-.398 1.25 1.25 0 0 1 1.232.79l2.992 7.63 1.557-3.977a.248.248 0 0 1 .408-.085zm8.224-19.3-5.583 5.617-3.45-8.805a1.24 1.24 0 0 0-1.43-.762c-.414.092-.744.407-.899.805l-2.38 6.072a.25.25 0 0 0 .055.267l1.533 1.543c.127.127.34.082.407-.085L15.9 4.655l2.991 7.629a1.24 1.24 0 0 0 2.035.425l6.922-6.965a.25.25 0 0 0 0-.352L26.44 3.977a.246.246 0 0 0-.35 0zM8.578 17.566l-3.953-1.567 7.582-3.01c.49-.195.815-.685.785-1.24a1.3 1.3 0 0 0-.395-.84l-6.886-6.93a.246.246 0 0 0-.35 0L3.954 5.395a.25.25 0 0 0 0 .353l5.583 5.617-8.75 3.472a1.25 1.25 0 0 0 0 2.325l6.079 2.412a.24.24 0 0 0 .266-.055l1.533-1.542a.25.25 0 0 0-.085-.41zm22.434-2.73-6.08-2.412a.24.24 0 0 0-.265.055l-1.533 1.542a.25.25 0 0 0 .084.41L27.172 16l-7.583 3.01a1.255 1.255 0 0 0-.785 1.24c.018.317.172.614.395.84l6.89 6.931a.246.246 0 0 0 .35 0l1.406-1.415a.25.25 0 0 0 0-.352l-5.582-5.617 8.75-3.472a1.25 1.25 0 0 0 0-2.325z"
+        fill="#FF9900"
+      />
+    </svg>
+  );
+}
+
+export function MistralIcon({
+  className,
+  title,
+  ...props
+}: {
+  className?: string;
+  title?: string;
+}) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <path d="M3.428 3.4h3.429v3.428H3.428V3.4zm13.714 0h3.43v3.428h-3.43V3.4z" fill="gold" />
+      <path
+        d="M3.428 6.828h6.857v3.429H3.429V6.828zm10.286 0h6.857v3.429h-6.857V6.828z"
+        fill="#FFAF00"
+      />
+      <path d="M3.428 10.258h17.144v3.428H3.428v-3.428z" fill="#FF8205" />
+      <path
+        d="M3.428 13.686h3.429v3.428H3.428v-3.428zm6.858 0h3.429v3.428h-3.429v-3.428zm6.856 0h3.43v3.428h-3.43v-3.428z"
+        fill="#FA500F"
+      />
+      <path d="M0 17.114h10.286v3.429H0v-3.429zm13.714 0H24v3.429H13.714v-3.429z" fill="#E10500" />
+    </svg>
+  );
+}
+
+export function MetaIcon({ className, title, ...props }: { className?: string; title?: string }) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <path
+        d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
+        fill="#1877F2"
+      />
+    </svg>
+  );
+}
+
+export function MiniMaxIcon({
+  className,
+  title,
+  ...props
+}: {
+  className?: string;
+  title?: string;
+}) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <path
+        d="M16.278 2c1.156 0 2.093.927 2.093 2.07v12.501a.74.74 0 00.744.709.74.74 0 00.743-.709V9.099a2.06 2.06 0 012.071-2.049A2.06 2.06 0 0124 9.1v6.561a.649.649 0 01-.652.645.649.649 0 01-.653-.645V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v7.472a2.037 2.037 0 01-2.048 2.026 2.037 2.037 0 01-2.048-2.026v-12.5a.785.785 0 00-.788-.753.785.785 0 00-.789.752l-.001 15.904A2.037 2.037 0 0113.441 22a2.037 2.037 0 01-2.048-2.026V18.04c0-.356.292-.645.652-.645.36 0 .652.289.652.645v1.934c0 .263.142.506.372.638.23.131.514.131.744 0a.734.734 0 00.372-.638V4.07c0-1.143.937-2.07 2.093-2.07zm-5.674 0c1.156 0 2.093.927 2.093 2.07v11.523a.648.648 0 01-.652.645.648.648 0 01-.652-.645V4.07a.785.785 0 00-.789-.78.785.785 0 00-.789.78v14.013a2.06 2.06 0 01-2.07 2.048 2.06 2.06 0 01-2.071-2.048V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v3.8a2.06 2.06 0 01-2.071 2.049A2.06 2.06 0 010 12.9v-1.378c0-.357.292-.646.652-.646.36 0 .653.29.653.646V12.9c0 .418.343.757.766.757s.766-.339.766-.757V9.099a2.06 2.06 0 012.07-2.048 2.06 2.06 0 012.071 2.048v8.984c0 .419.343.758.767.758.423 0 .766-.339.766-.758V4.07c0-1.143.937-2.07 2.093-2.07z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function GlmIcon({ className, title, ...props }: { className?: string; title?: string }) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <path
+        d="M12.105 2L9.927 4.953H.653L2.83 2h9.276zM23.254 19.048L21.078 22h-9.242l2.174-2.952h9.244zM24 2L9.264 22H0L14.736 2H24z"
+        fill="#3B82F6"
+      />
+    </svg>
+  );
+}
+
+// Z.ai icon is the same as GLM (Zhipu AI)
+export const ZaiIcon = GlmIcon;
+
+export function BigPickleIcon({
+  className,
+  title,
+  ...props
+}: {
+  className?: string;
+  title?: string;
+}) {
+  const hasAccessibleLabel = Boolean(title);
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={cn('inline-block', className)}
+      role={hasAccessibleLabel ? 'img' : 'presentation'}
+      aria-hidden={!hasAccessibleLabel}
+      focusable="false"
+      {...props}
+    >
+      {title && <title>{title}</title>}
+      <path
+        d="M8 4c-2.21 0-4 1.79-4 4v8c0 2.21 1.79 4 4 4h8c2.21 0 4-1.79 4-4V8c0-2.21-1.79-4-4-4H8zm0 2h8c1.103 0 2 .897 2 2v8c0 1.103-.897 2-2 2H8c-1.103 0-2-.897-2-2V8c0-1.103.897-2 2-2zm2 3a1 1 0 100 2 1 1 0 000-2zm4 0a1 1 0 100 2 1 1 0 000-2zm-4 4a1 1 0 100 2 1 1 0 000-2zm4 0a1 1 0 100 2 1 1 0 000-2z"
+        fill="#4ADE80"
+      />
+    </svg>
+  );
+}
+
+export const PROVIDER_ICON_COMPONENTS: Record<
+  ModelProvider,
+  ComponentType<{ className?: string }>
+> = {
+  claude: AnthropicIcon,
+  cursor: CursorIcon,
+  codex: OpenAIIcon,
+  opencode: OpenCodeIcon,
+  gemini: GeminiIcon,
+  copilot: CopilotIcon,
+};
+
+/**
+ * Get the underlying model icon based on the model string
+ * For Cursor models, detects whether it's Claude, GPT, Gemini, Grok, or Cursor-specific
+ */
+function getUnderlyingModelIcon(model?: AgentModel | string): ProviderIconKey {
+  if (!model) return 'anthropic';
+
+  const modelStr = typeof model === 'string' ? model.toLowerCase() : model;
+
+  // Check for Amazon Bedrock models first (amazon-bedrock/...)
+  if (modelStr.startsWith('openrouter/')) {
+    return 'openrouter';
+  }
+
+  // Check for Amazon Bedrock models first (amazon-bedrock/...)
+  if (modelStr.startsWith('amazon-bedrock/')) {
+    // Bedrock-hosted models - detect the specific provider
+    if (modelStr.includes('anthropic') || modelStr.includes('claude')) {
+      return 'anthropic';
+    }
+    if (modelStr.includes('deepseek')) {
+      return 'deepseek';
+    }
+    if (modelStr.includes('nova')) {
+      return 'nova';
+    }
+    if (modelStr.includes('meta') || modelStr.includes('llama')) {
+      return 'meta';
+    }
+    if (modelStr.includes('mistral')) {
+      return 'mistral';
+    }
+    if (modelStr.includes('qwen')) {
+      return 'qwen';
+    }
+    // Default for unknown Bedrock models
+    return 'opencode';
+  }
+
+  // Check for native OpenCode models (opencode/...)
+  if (modelStr.startsWith('opencode/')) {
+    // Native OpenCode models - check specific model types
+    if (modelStr.includes('big-pickle')) {
+      return 'bigpickle';
+    }
+    if (modelStr.includes('grok')) {
+      return 'grok';
+    }
+    if (modelStr.includes('glm')) {
+      return 'glm';
+    }
+    if (modelStr.includes('gpt-5-nano') || modelStr.includes('nano')) {
+      return 'openai'; // GPT-5 Nano uses OpenAI icon
+    }
+    if (modelStr.includes('minimax')) {
+      return 'minimax';
+    }
+    // Default for other OpenCode models
+    return 'opencode';
+  }
+
+  // Check for dynamic OpenCode provider models (provider/model format)
+  // e.g., zai-coding-plan/glm-4.5, github-copilot/gpt-4o, google/gemini-2.5-pro
+  // Only handle strings with exactly one slash (not URLs or paths)
+  if (!modelStr.includes('://')) {
+    const slashIndex = modelStr.indexOf('/');
+    if (slashIndex !== -1 && slashIndex === modelStr.lastIndexOf('/')) {
+      const providerName = modelStr.slice(0, slashIndex);
+      const modelName = modelStr.slice(slashIndex + 1);
+
+      // Skip if either part is empty
+      if (providerName && modelName) {
+        // Check model name for known patterns
+        if (modelName.includes('glm')) {
+          return 'glm';
+        }
+        if (
+          modelName.includes('claude') ||
+          modelName.includes('sonnet') ||
+          modelName.includes('opus')
+        ) {
+          return 'anthropic';
+        }
+        if (modelName.includes('gpt') || modelName.includes('o1') || modelName.includes('o3')) {
+          return 'openai';
+        }
+        if (modelName.includes('gemini')) {
+          return 'gemini';
+        }
+        if (modelName.includes('grok')) {
+          return 'grok';
+        }
+        if (modelName.includes('deepseek')) {
+          return 'deepseek';
+        }
+        if (modelName.includes('llama')) {
+          return 'meta';
+        }
+        if (modelName.includes('qwen')) {
+          return 'qwen';
+        }
+        if (modelName.includes('mistral')) {
+          return 'mistral';
+        }
+        // Check provider name for hints
+        if (providerName.includes('google')) {
+          return 'gemini';
+        }
+        if (providerName.includes('anthropic')) {
+          return 'anthropic';
+        }
+        if (providerName.includes('openai')) {
+          return 'openai';
+        }
+        if (providerName.includes('openrouter')) {
+          return 'openrouter';
+        }
+        if (providerName.includes('xai')) {
+          return 'grok';
+        }
+        // Default for unknown dynamic models
+        return 'opencode';
+      }
+    }
+  }
+
+  // Check for ClaudeCompatibleProvider model patterns (GLM, MiniMax, etc.)
+  // These are model IDs like "GLM-4.5-Air", "GLM-4.7", "MiniMax-M2.1"
+  if (modelStr.includes('glm')) {
+    return 'glm';
+  }
+  if (modelStr.includes('minimax')) {
+    return 'minimax';
+  }
+
+  // Check for Cursor-specific models with underlying providers
+  if (modelStr.includes('sonnet') || modelStr.includes('opus') || modelStr.includes('claude')) {
+    return 'anthropic';
+  }
+  if (modelStr.includes('gpt-') || modelStr.includes('codex')) {
+    return 'openai';
+  }
+  if (modelStr.includes('gemini')) {
+    return 'gemini';
+  }
+  if (modelStr.includes('grok')) {
+    return 'grok';
+  }
+  // GitHub Copilot models
+  if (modelStr.includes('copilot')) {
+    return 'copilot';
+  }
+  // Cursor models - canonical format includes 'cursor-' prefix
+  // Also support legacy IDs for backward compatibility
+  if (
+    modelStr.includes('cursor') ||
+    modelStr === 'auto' ||
+    modelStr === 'composer-1' ||
+    modelStr === 'cursor-auto' ||
+    modelStr === 'cursor-composer-1'
+  ) {
+    return 'cursor';
+  }
+
+  // Default based on provider
+  const provider = getProviderFromModel(model);
+  if (provider === 'codex') return 'openai';
+  if (provider === 'cursor') return 'cursor';
+  if (provider === 'opencode') return 'opencode';
+  if (provider === 'copilot') return 'copilot';
+  return 'anthropic';
+}
+
+export function getProviderIconForModel(
+  model?: AgentModel | string
+): ComponentType<{ className?: string }> {
+  const iconKey = getUnderlyingModelIcon(model);
+
+  const iconMap: Record<ProviderIconKey, ComponentType<{ className?: string }>> = {
+    anthropic: AnthropicIcon,
+    openai: OpenAIIcon,
+    openrouter: OpenRouterIcon,
+    cursor: CursorIcon,
+    gemini: GeminiIcon,
+    grok: GrokIcon,
+    opencode: OpenCodeIcon,
+    deepseek: DeepSeekIcon,
+    qwen: QwenIcon,
+    nova: NovaIcon,
+    meta: MetaIcon,
+    mistral: MistralIcon,
+    minimax: MiniMaxIcon,
+    glm: GlmIcon,
+    bigpickle: BigPickleIcon,
+    copilot: CopilotIcon,
+  };
+
+  return iconMap[iconKey] || AnthropicIcon;
+}
diff --git a/temp_repo/apps/ui/src/components/ui/radio-group.tsx b/temp_repo/apps/ui/src/components/ui/radio-group.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..901b0887e9e6b19f6982356ba42289da09a8b3e0
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/radio-group.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />;
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
diff --git a/temp_repo/apps/ui/src/components/ui/scroll-area.tsx b/temp_repo/apps/ui/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d3dd5cd23a5c49ebe0c1a865ec0778342d5dcf9f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/scroll-area.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '@/lib/utils';
+
+// Type-safe wrappers for Radix UI primitives (React 19 compatibility)
+const ScrollAreaRootPrimitive = ScrollAreaPrimitive.Root as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const ScrollAreaViewportPrimitive = ScrollAreaPrimitive.Viewport as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const ScrollAreaScrollbarPrimitive =
+  ScrollAreaPrimitive.Scrollbar as React.ForwardRefExoticComponent<
+    React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar> & {
+      children?: React.ReactNode;
+      className?: string;
+    } & React.RefAttributes<HTMLDivElement>
+  >;
+
+const ScrollAreaThumbPrimitive = ScrollAreaPrimitive.Thumb as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Thumb> & {
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const ScrollArea = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaRootPrimitive
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaViewportPrimitive className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaViewportPrimitive>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaRootPrimitive>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaScrollbarPrimitive
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaThumbPrimitive className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbarPrimitive>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/temp_repo/apps/ui/src/components/ui/select.tsx b/temp_repo/apps/ui/src/components/ui/select.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b7bae346a1a02cf940d2063fe1cce009a1b7f0d1
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/select.tsx
@@ -0,0 +1,163 @@
+'use client';
+
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
+    /** Content to display below the item text in the dropdown only (not shown in trigger). */
+    description?: React.ReactNode;
+  }
+>(({ className, children, description, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    {description ? (
+      <div className="flex flex-col items-start w-full min-w-0">
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+        {description}
+      </div>
+    ) : (
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    )}
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
diff --git a/temp_repo/apps/ui/src/components/ui/sheet.tsx b/temp_repo/apps/ui/src/components/ui/sheet.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fe58101ebeea22946a3f550c5bd5407915a34d44
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/sheet.tsx
@@ -0,0 +1,158 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+interface SheetOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+  forceMount?: true;
+}
+
+const SheetOverlay = ({ className, ...props }: SheetOverlayProps) => {
+  const Overlay = SheetPrimitive.Overlay as React.ComponentType<
+    SheetOverlayProps & { 'data-slot': string }
+  >;
+  return (
+    <Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className
+      )}
+      {...props}
+    />
+  );
+};
+
+interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  forceMount?: true;
+  onEscapeKeyDown?: (event: KeyboardEvent) => void;
+  onPointerDownOutside?: (event: PointerEvent) => void;
+  onInteractOutside?: (event: Event) => void;
+}
+
+const SheetContent = ({ className, children, side = 'right', ...props }: SheetContentProps) => {
+  const Content = SheetPrimitive.Content as React.ComponentType<
+    SheetContentProps & { 'data-slot': string }
+  >;
+  const Close = SheetPrimitive.Close as React.ComponentType<{
+    className: string;
+    children: React.ReactNode;
+    'data-slot'?: string;
+    style?: React.CSSProperties;
+  }>;
+
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <Content
+        data-slot="sheet-content"
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          side === 'right' &&
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          side === 'left' &&
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          side === 'top' &&
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          side === 'bottom' &&
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <Close
+          data-slot="sheet-close"
+          className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+          style={{
+            top: 'max(1rem, calc(env(safe-area-inset-top, 0px) + 0.5rem))',
+          }}
+        >
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </Close>
+      </Content>
+    </SheetPortal>
+  );
+};
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+interface SheetTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+
+const SheetTitle = ({ className, ...props }: SheetTitleProps) => {
+  const Title = SheetPrimitive.Title as React.ComponentType<
+    SheetTitleProps & { 'data-slot': string }
+  >;
+  return (
+    <Title
+      data-slot="sheet-title"
+      className={cn('text-foreground font-semibold', className)}
+      {...props}
+    />
+  );
+};
+
+interface SheetDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}
+
+const SheetDescription = ({ className, ...props }: SheetDescriptionProps) => {
+  const Description = SheetPrimitive.Description as React.ComponentType<
+    SheetDescriptionProps & { 'data-slot': string }
+  >;
+  return (
+    <Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+};
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
diff --git a/temp_repo/apps/ui/src/components/ui/shell-syntax-editor.tsx b/temp_repo/apps/ui/src/components/ui/shell-syntax-editor.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c405309ac408348f5128e7fa7ee8af801cc0ae9c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/shell-syntax-editor.tsx
@@ -0,0 +1,141 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { StreamLanguage } from '@codemirror/language';
+import { shell } from '@codemirror/legacy-modes/mode/shell';
+import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+import { cn } from '@/lib/utils';
+
+interface ShellSyntaxEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  'data-testid'?: string;
+}
+
+// Syntax highlighting using CSS variables for theme compatibility
+const syntaxColors = HighlightStyle.define([
+  // Keywords (if, then, else, fi, for, while, do, done, case, esac, etc.)
+  { tag: t.keyword, color: 'var(--chart-4, oklch(0.7 0.15 280))' },
+
+  // Strings (single and double quoted)
+  { tag: t.string, color: 'var(--chart-1, oklch(0.646 0.222 41.116))' },
+
+  // Comments
+  { tag: t.comment, color: 'var(--muted-foreground)', fontStyle: 'italic' },
+
+  // Variables ($VAR, ${VAR})
+  { tag: t.variableName, color: 'var(--chart-2, oklch(0.6 0.118 184.704))' },
+
+  // Operators
+  { tag: t.operator, color: 'var(--muted-foreground)' },
+
+  // Numbers
+  { tag: t.number, color: 'var(--chart-3, oklch(0.7 0.15 150))' },
+
+  // Function names / commands
+  { tag: t.function(t.variableName), color: 'var(--primary)' },
+  { tag: t.attributeName, color: 'var(--chart-5, oklch(0.65 0.2 30))' },
+
+  // Default text
+  { tag: t.content, color: 'var(--foreground)' },
+]);
+
+// Editor theme using CSS variables
+const editorTheme = EditorView.theme({
+  '&': {
+    height: '100%',
+    fontSize: '0.875rem',
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+    backgroundColor: 'transparent',
+    color: 'var(--foreground)',
+  },
+  '.cm-scroller': {
+    overflow: 'auto',
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+  },
+  '.cm-content': {
+    padding: '0.75rem',
+    minHeight: '100%',
+    caretColor: 'var(--primary)',
+  },
+  '.cm-cursor, .cm-dropCursor': {
+    borderLeftColor: 'var(--primary)',
+  },
+  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+    backgroundColor: 'oklch(0.55 0.25 265 / 0.3)',
+  },
+  '.cm-activeLine': {
+    backgroundColor: 'transparent',
+  },
+  '.cm-line': {
+    padding: '0 0.25rem',
+  },
+  '&.cm-focused': {
+    outline: 'none',
+  },
+  '.cm-gutters': {
+    backgroundColor: 'transparent',
+    color: 'var(--muted-foreground)',
+    border: 'none',
+    paddingRight: '0.5rem',
+  },
+  '.cm-lineNumbers .cm-gutterElement': {
+    minWidth: '2rem',
+    textAlign: 'right',
+    paddingRight: '0.5rem',
+  },
+  '.cm-placeholder': {
+    color: 'var(--muted-foreground)',
+    fontStyle: 'italic',
+  },
+});
+
+// Combine all extensions
+const extensions: Extension[] = [
+  StreamLanguage.define(shell),
+  syntaxHighlighting(syntaxColors),
+  editorTheme,
+];
+
+export function ShellSyntaxEditor({
+  value,
+  onChange,
+  placeholder,
+  className,
+  minHeight = '200px',
+  maxHeight,
+  'data-testid': testId,
+}: ShellSyntaxEditorProps) {
+  return (
+    <div
+      className={cn('w-full rounded-lg border border-border bg-background', className)}
+      style={{ minHeight }}
+      data-testid={testId}
+    >
+      <CodeMirror
+        value={value}
+        onChange={onChange}
+        extensions={extensions}
+        theme="none"
+        placeholder={placeholder}
+        height={maxHeight}
+        minHeight={minHeight}
+        className="[&_.cm-editor]:min-h-[inherit]"
+        basicSetup={{
+          lineNumbers: true,
+          foldGutter: false,
+          highlightActiveLine: true,
+          highlightSelectionMatches: true,
+          autocompletion: false,
+          bracketMatching: true,
+          indentOnInput: true,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/skeleton.tsx b/temp_repo/apps/ui/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0efc029aafe6a01cba87520e7f34585036ad1f15
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/skeleton.tsx
@@ -0,0 +1,18 @@
+/**
+ * Skeleton Components
+ *
+ * Loading placeholder components for content that's being fetched.
+ */
+
+import { cn } from '@/lib/utils';
+
+interface SkeletonPulseProps {
+  className?: string;
+}
+
+/**
+ * Pulsing skeleton placeholder for loading states
+ */
+export function SkeletonPulse({ className }: SkeletonPulseProps) {
+  return <div className={cn('animate-pulse bg-muted/50 rounded', className)} />;
+}
diff --git a/temp_repo/apps/ui/src/components/ui/slider.tsx b/temp_repo/apps/ui/src/components/ui/slider.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1d7a80f3b201bad0958b52605d01f3c71bcd07c5
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/slider.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { cn } from '@/lib/utils';
+
+// Type-safe wrappers for Radix UI primitives (React 19 compatibility)
+const SliderRootPrimitive = SliderPrimitive.Root as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLSpanElement>
+>;
+
+const SliderTrackPrimitive = SliderPrimitive.Track as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Track> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLSpanElement>
+>;
+
+const SliderRangePrimitive = SliderPrimitive.Range as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Range> & {
+    className?: string;
+  } & React.RefAttributes<HTMLSpanElement>
+>;
+
+const SliderThumbPrimitive = SliderPrimitive.Thumb as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Thumb> & {
+    className?: string;
+  } & React.RefAttributes<HTMLSpanElement>
+>;
+
+interface SliderProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'defaultValue' | 'dir'> {
+  value?: number[];
+  defaultValue?: number[];
+  onValueChange?: (value: number[]) => void;
+  onValueCommit?: (value: number[]) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  orientation?: 'horizontal' | 'vertical';
+  dir?: 'ltr' | 'rtl';
+  inverted?: boolean;
+  minStepsBetweenThumbs?: number;
+}
+
+const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(({ className, ...props }, ref) => (
+  <SliderRootPrimitive
+    ref={ref}
+    className={cn('relative flex w-full touch-none select-none items-center', className)}
+    {...props}
+  >
+    <SliderTrackPrimitive className="slider-track relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted cursor-pointer">
+      <SliderRangePrimitive className="slider-range absolute h-full bg-primary" />
+    </SliderTrackPrimitive>
+    <SliderThumbPrimitive className="slider-thumb block h-4 w-4 rounded-full border border-border bg-card shadow transition-colors cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed hover:bg-accent" />
+  </SliderRootPrimitive>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
diff --git a/temp_repo/apps/ui/src/components/ui/spinner.tsx b/temp_repo/apps/ui/src/components/ui/spinner.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5cf93056065e5b8ccff741288753f549aa910fab
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/spinner.tsx
@@ -0,0 +1,43 @@
+import { Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SpinnerVariant = 'primary' | 'foreground' | 'muted';
+
+const sizeClasses: Record<SpinnerSize, string> = {
+  xs: 'h-3 w-3',
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+  xl: 'h-8 w-8',
+};
+
+const variantClasses: Record<SpinnerVariant, string> = {
+  primary: 'text-primary',
+  foreground: 'text-primary-foreground',
+  muted: 'text-muted-foreground',
+};
+
+interface SpinnerProps {
+  /** Size of the spinner */
+  size?: SpinnerSize;
+  /** Color variant - use 'foreground' when on primary backgrounds */
+  variant?: SpinnerVariant;
+  /** Additional class names */
+  className?: string;
+}
+
+/**
+ * Themed spinner component using the primary brand color.
+ * Use this for all loading indicators throughout the app for consistency.
+ * Use variant='foreground' when placing on primary-colored backgrounds.
+ */
+export function Spinner({ size = 'md', variant = 'primary', className }: SpinnerProps) {
+  return (
+    <Loader2
+      className={cn(sizeClasses[size], 'animate-spin', variantClasses[variant], className)}
+      aria-hidden="true"
+      data-testid="spinner"
+    />
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/switch.tsx b/temp_repo/apps/ui/src/components/ui/switch.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..47b2bc5184d1161b5a70e826d469cad629d24bda
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+import { cn } from '@/lib/utils';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-5 w-5 rounded-full bg-foreground shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
diff --git a/temp_repo/apps/ui/src/components/ui/tabs.tsx b/temp_repo/apps/ui/src/components/ui/tabs.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1ae10b19d5911148a1dbb6fbff4c4a68f52420bc
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/tabs.tsx
@@ -0,0 +1,118 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '@/lib/utils';
+
+// Type-safe wrappers for Radix UI primitives (React 19 compatibility)
+const TabsRootPrimitive = TabsPrimitive.Root as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const TabsListPrimitive = TabsPrimitive.List as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const TabsTriggerPrimitive = TabsPrimitive.Trigger as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLButtonElement>
+>;
+
+const TabsContentPrimitive = TabsPrimitive.Content as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
+    children?: React.ReactNode;
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+function Tabs({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root> & {
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <TabsRootPrimitive data-slot="tabs" className={cn('flex flex-col gap-2', className)} {...props}>
+      {children}
+    </TabsRootPrimitive>
+  );
+}
+
+function TabsList({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> & {
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <TabsListPrimitive
+      data-slot="tabs-list"
+      className={cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px] border border-border',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </TabsListPrimitive>
+  );
+}
+
+function TabsTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger> & {
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <TabsTriggerPrimitive
+      data-slot="tabs-trigger"
+      className={cn(
+        'inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all duration-200 cursor-pointer',
+        'text-foreground/70 hover:text-foreground hover:bg-accent',
+        'data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-md data-[state=active]:border-primary/50',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:outline-1',
+        'disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed',
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </TabsTriggerPrimitive>
+  );
+}
+
+function TabsContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content> & {
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <TabsContentPrimitive
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    >
+      {children}
+    </TabsContentPrimitive>
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/temp_repo/apps/ui/src/components/ui/task-progress-panel.tsx b/temp_repo/apps/ui/src/components/ui/task-progress-panel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6ed4029570a62afb63eda612b39da8d4f0fd0e08
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/task-progress-panel.tsx
@@ -0,0 +1,335 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { cn } from '@/lib/utils';
+
+const logger = createLogger('TaskProgressPanel');
+import { Check, Circle, ChevronDown, ChevronRight, FileCode } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getElectronAPI } from '@/lib/electron';
+import type { AutoModeEvent } from '@/types/electron';
+import type { Feature, ParsedTask } from '@automaker/types';
+import { Badge } from '@/components/ui/badge';
+
+interface TaskInfo {
+  id: string;
+  description: string;
+  status: 'pending' | 'in_progress' | 'completed';
+  filePath?: string;
+  phase?: string;
+}
+
+interface TaskProgressPanelProps {
+  featureId: string;
+  projectPath?: string;
+  className?: string;
+  /** Whether the panel starts expanded (default: true) */
+  defaultExpanded?: boolean;
+}
+
+export function TaskProgressPanel({
+  featureId,
+  projectPath,
+  className,
+  defaultExpanded = true,
+}: TaskProgressPanelProps) {
+  const [tasks, setTasks] = useState<TaskInfo[]>([]);
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const [isLoading, setIsLoading] = useState(true);
+  const [, setCurrentTaskId] = useState<string | null>(null);
+
+  // Load initial tasks from feature's planSpec
+  const loadInitialTasks = useCallback(async () => {
+    if (!projectPath) {
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.features) {
+        setIsLoading(false);
+        return;
+      }
+
+      const result = await api.features.get(projectPath, featureId);
+      const feature = (result as { success: boolean; feature?: Feature }).feature;
+      if (result.success && feature?.planSpec?.tasks) {
+        const planSpec = feature.planSpec;
+        const planTasks = planSpec.tasks; // Already guarded by the if condition above
+        const currentId = planSpec.currentTaskId;
+
+        // Convert planSpec tasks to TaskInfo using their persisted status
+        // planTasks is guaranteed to be defined due to the if condition check
+        const initialTasks: TaskInfo[] = (planTasks as ParsedTask[]).map((t: ParsedTask) => ({
+          id: t.id,
+          description: t.description,
+          filePath: t.filePath,
+          phase: t.phase,
+          status:
+            t.id === currentId
+              ? ('in_progress' as const)
+              : (t.status as TaskInfo['status']) || ('pending' as const),
+        }));
+
+        setTasks(initialTasks);
+        setCurrentTaskId(currentId || null);
+      }
+    } catch (error) {
+      logger.error('Failed to load initial tasks:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [featureId, projectPath]);
+
+  // Load initial state on mount
+  useEffect(() => {
+    loadInitialTasks();
+  }, [loadInitialTasks]);
+
+  // Listen to task events for real-time updates
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.autoMode) return;
+
+    const unsubscribe = api.autoMode.onEvent((event: AutoModeEvent) => {
+      // Only handle events for this feature
+      if (!('featureId' in event) || event.featureId !== featureId) return;
+
+      switch (event.type) {
+        case 'auto_mode_task_started':
+          if ('taskId' in event && 'taskDescription' in event) {
+            const taskEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_started' }>;
+            setCurrentTaskId(taskEvent.taskId);
+
+            setTasks((prev) => {
+              // Check if task already exists
+              const existingIndex = prev.findIndex((t) => t.id === taskEvent.taskId);
+
+              if (existingIndex !== -1) {
+                // Update only the started task to in_progress
+                // Do NOT assume previous tasks are completed - rely on actual task_complete events
+                return prev.map((t) => {
+                  if (t.id === taskEvent.taskId) {
+                    return { ...t, status: 'in_progress' as const };
+                  }
+                  return t;
+                });
+              }
+
+              // Add new task if it doesn't exist (fallback)
+              return [
+                ...prev,
+                {
+                  id: taskEvent.taskId,
+                  description: taskEvent.taskDescription,
+                  status: 'in_progress' as const,
+                },
+              ];
+            });
+          }
+          break;
+
+        case 'auto_mode_task_complete':
+          if ('taskId' in event) {
+            const taskEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_complete' }>;
+            setTasks((prev) =>
+              prev.map((t) =>
+                t.id === taskEvent.taskId ? { ...t, status: 'completed' as const } : t
+              )
+            );
+            setCurrentTaskId(null);
+          }
+          break;
+
+        case 'auto_mode_task_status':
+          if ('taskId' in event && 'status' in event) {
+            const taskEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_status' }>;
+            setTasks((prev) =>
+              prev.map((t) =>
+                t.id === taskEvent.taskId
+                  ? { ...t, status: taskEvent.status as TaskInfo['status'] }
+                  : t
+              )
+            );
+            if (taskEvent.status === 'in_progress') {
+              setCurrentTaskId(taskEvent.taskId);
+            } else if (taskEvent.status === 'completed') {
+              setCurrentTaskId((current) => (current === taskEvent.taskId ? null : current));
+            }
+          }
+          break;
+      }
+    });
+
+    return unsubscribe;
+  }, [featureId]);
+
+  const completedCount = tasks.filter((t) => t.status === 'completed').length;
+  const totalCount = tasks.length;
+  const progressPercent = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
+
+  if (isLoading || tasks.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'group rounded-lg border bg-card/50 shadow-sm overflow-hidden transition-all duration-200',
+        className
+      )}
+    >
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between px-3 py-2.5 bg-muted/10 hover:bg-muted/20 transition-colors"
+      >
+        <div className="flex items-center gap-3">
+          <div
+            className={cn(
+              'flex h-8 w-8 items-center justify-center rounded-lg border shadow-sm transition-colors',
+              isExpanded ? 'bg-background border-border' : 'bg-muted border-transparent'
+            )}
+          >
+            {isExpanded ? (
+              <ChevronDown className="h-4 w-4 text-foreground/70" />
+            ) : (
+              <ChevronRight className="h-4 w-4 text-muted-foreground" />
+            )}
+          </div>
+          <div className="flex flex-col items-start gap-0.5">
+            <h3 className="font-semibold text-sm tracking-tight">Execution Plan</h3>
+            <span className="text-[10px] text-muted-foreground uppercase tracking-wider font-medium">
+              {completedCount} of {totalCount} tasks completed
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* Circular Progress (Mini) */}
+          <div className="relative h-8 w-8 flex items-center justify-center">
+            <svg className="h-full w-full -rotate-90 text-muted/20" viewBox="0 0 24 24">
+              <circle
+                className="text-muted/20"
+                cx="12"
+                cy="12"
+                r="10"
+                strokeWidth="3"
+                fill="none"
+                stroke="currentColor"
+              />
+              <circle
+                className="text-primary transition-all duration-500 ease-in-out"
+                cx="12"
+                cy="12"
+                r="10"
+                strokeWidth="3"
+                fill="none"
+                stroke="currentColor"
+                strokeDasharray={63}
+                strokeDashoffset={63 - (63 * progressPercent) / 100}
+                strokeLinecap="round"
+              />
+            </svg>
+            <span className="absolute text-[9px] font-bold">{progressPercent}%</span>
+          </div>
+        </div>
+      </button>
+
+      <div
+        className={cn(
+          'grid transition-all duration-300 ease-in-out',
+          isExpanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
+        )}
+      >
+        <div className="overflow-hidden">
+          <div className="p-4 pt-2 relative max-h-[200px] overflow-y-auto scrollbar-visible">
+            {/* Vertical Connector Line */}
+            <div className="absolute left-[2.35rem] top-4 bottom-8 w-px bg-linear-to-b from-border/80 via-border/40 to-transparent" />
+
+            <div className="space-y-5">
+              {tasks.map((task, _index) => {
+                const isActive = task.status === 'in_progress';
+                const isCompleted = task.status === 'completed';
+                const isPending = task.status === 'pending';
+
+                return (
+                  <div
+                    key={task.id}
+                    className={cn(
+                      'relative flex gap-4 group/item transition-all duration-300',
+                      isPending && 'opacity-60 hover:opacity-100'
+                    )}
+                  >
+                    {/* Icon Status */}
+                    <div
+                      className={cn(
+                        'relative z-10 flex h-7 w-7 items-center justify-center rounded-full border shadow-sm transition-all duration-300',
+                        isCompleted &&
+                          'bg-green-500/10 border-green-500/20 text-green-600 dark:text-green-400',
+                        isActive &&
+                          'bg-primary border-primary text-primary-foreground ring-4 ring-primary/10 scale-110',
+                        isPending && 'bg-muted border-border text-muted-foreground'
+                      )}
+                    >
+                      {isCompleted && <Check className="h-3.5 w-3.5" />}
+                      {isActive && <Spinner size="xs" variant="foreground" />}
+                      {isPending && <Circle className="h-2 w-2 fill-current opacity-50" />}
+                    </div>
+
+                    {/* Task Content */}
+                    <div
+                      className={cn(
+                        'flex-1 pt-1 min-w-0 transition-all',
+                        isActive && 'translate-x-1'
+                      )}
+                    >
+                      <div className="flex flex-col gap-1.5">
+                        <div className="flex items-center justify-between gap-4">
+                          <p
+                            className={cn(
+                              'text-sm font-medium leading-none truncate pr-4',
+                              isCompleted &&
+                                'text-muted-foreground line-through decoration-border/60',
+                              isActive && 'text-primary font-semibold'
+                            )}
+                          >
+                            {task.description}
+                          </p>
+                          {isActive && (
+                            <Badge
+                              variant="outline"
+                              className="h-5 px-1.5 text-[10px] bg-primary/5 text-primary border-primary/20 animate-pulse"
+                            >
+                              Active
+                            </Badge>
+                          )}
+                        </div>
+
+                        {(task.filePath || isActive) && (
+                          <div className="flex items-center gap-2 text-xs text-muted-foreground font-mono">
+                            {task.filePath ? (
+                              <>
+                                <FileCode className="h-3 w-3 opacity-70" />
+                                <span className="truncate opacity-80 hover:opacity-100 transition-opacity">
+                                  {task.filePath}
+                                </span>
+                              </>
+                            ) : (
+                              <span className="h-3 block" /> /* Spacer */
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/test-logs-panel.tsx b/temp_repo/apps/ui/src/components/ui/test-logs-panel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dd2e4c683a3ff1bc6a0e0227159e1108258c189b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/test-logs-panel.tsx
@@ -0,0 +1,426 @@
+'use client';
+
+import { useEffect, useRef, useCallback, useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { Button } from '@/components/ui/button';
+import {
+  Terminal,
+  ArrowDown,
+  Square,
+  RefreshCw,
+  AlertCircle,
+  Clock,
+  GitBranch,
+  CheckCircle2,
+  XCircle,
+  FlaskConical,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { XtermLogViewer, type XtermLogViewerRef } from '@/components/ui/xterm-log-viewer';
+import { useTestLogs } from '@/hooks/use-test-logs';
+import { useIsMobile } from '@/hooks/use-media-query';
+import type { TestRunStatus } from '@/types/electron';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface TestLogsPanelProps {
+  /** Whether the panel is open */
+  open: boolean;
+  /** Callback when the panel is closed */
+  onClose: () => void;
+  /** Path to the worktree to show test logs for */
+  worktreePath: string | null;
+  /** Branch name for display */
+  branch?: string;
+  /** Specific session ID to fetch logs for (optional) */
+  sessionId?: string;
+  /** Callback to stop the running tests */
+  onStopTests?: () => void;
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+/**
+ * Get status indicator based on test run status
+ */
+function getStatusIndicator(status: TestRunStatus | null): {
+  text: string;
+  className: string;
+  icon?: React.ReactNode;
+} {
+  switch (status) {
+    case 'running':
+      return {
+        text: 'Running',
+        className: 'bg-blue-500/10 text-blue-500',
+        icon: <span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse" />,
+      };
+    case 'pending':
+      return {
+        text: 'Pending',
+        className: 'bg-amber-500/10 text-amber-500',
+        icon: <Clock className="w-3 h-3" />,
+      };
+    case 'passed':
+      return {
+        text: 'Passed',
+        className: 'bg-green-500/10 text-green-500',
+        icon: <CheckCircle2 className="w-3 h-3" />,
+      };
+    case 'failed':
+      return {
+        text: 'Failed',
+        className: 'bg-red-500/10 text-red-500',
+        icon: <XCircle className="w-3 h-3" />,
+      };
+    case 'cancelled':
+      return {
+        text: 'Cancelled',
+        className: 'bg-yellow-500/10 text-yellow-500',
+        icon: <AlertCircle className="w-3 h-3" />,
+      };
+    case 'error':
+      return {
+        text: 'Error',
+        className: 'bg-red-500/10 text-red-500',
+        icon: <AlertCircle className="w-3 h-3" />,
+      };
+    default:
+      return {
+        text: 'Idle',
+        className: 'bg-muted text-muted-foreground',
+      };
+  }
+}
+
+/**
+ * Format duration in milliseconds to human-readable string
+ */
+function formatDuration(ms: number | null): string | null {
+  if (ms === null) return null;
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  const minutes = Math.floor(ms / 60000);
+  const seconds = ((ms % 60000) / 1000).toFixed(0);
+  return `${minutes}m ${seconds}s`;
+}
+
+/**
+ * Format timestamp to localized time string
+ */
+function formatTime(timestamp: string | null): string | null {
+  if (!timestamp) return null;
+  try {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString();
+  } catch {
+    return null;
+  }
+}
+
+// ============================================================================
+// Inner Content Component
+// ============================================================================
+
+interface TestLogsPanelContentProps {
+  worktreePath: string | null;
+  branch?: string;
+  sessionId?: string;
+  onStopTests?: () => void;
+}
+
+function TestLogsPanelContent({
+  worktreePath,
+  branch,
+  sessionId,
+  onStopTests,
+}: TestLogsPanelContentProps) {
+  const xtermRef = useRef<XtermLogViewerRef>(null);
+  const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
+  const lastLogsLengthRef = useRef(0);
+  const lastSessionIdRef = useRef<string | null>(null);
+
+  const {
+    logs,
+    isLoading,
+    error,
+    status,
+    sessionId: currentSessionId,
+    command,
+    testFile,
+    startedAt,
+    exitCode,
+    duration,
+    isRunning,
+    fetchLogs,
+  } = useTestLogs({
+    worktreePath,
+    sessionId,
+    autoSubscribe: true,
+  });
+
+  // Write logs to xterm when they change
+  useEffect(() => {
+    if (!xtermRef.current || !logs) return;
+
+    // If session changed, reset the terminal and write all content
+    if (lastSessionIdRef.current !== currentSessionId) {
+      lastSessionIdRef.current = currentSessionId;
+      lastLogsLengthRef.current = 0;
+      xtermRef.current.write(logs);
+      lastLogsLengthRef.current = logs.length;
+      return;
+    }
+
+    // If logs got shorter (e.g., cleared), rewrite all
+    if (logs.length < lastLogsLengthRef.current) {
+      xtermRef.current.write(logs);
+      lastLogsLengthRef.current = logs.length;
+      return;
+    }
+
+    // Append only the new content
+    if (logs.length > lastLogsLengthRef.current) {
+      const newContent = logs.slice(lastLogsLengthRef.current);
+      xtermRef.current.append(newContent);
+      lastLogsLengthRef.current = logs.length;
+    }
+  }, [logs, currentSessionId]);
+
+  // Reset auto-scroll when session changes
+  useEffect(() => {
+    if (currentSessionId !== lastSessionIdRef.current) {
+      setAutoScrollEnabled(true);
+      lastLogsLengthRef.current = 0;
+    }
+  }, [currentSessionId]);
+
+  // Scroll to bottom handler
+  const scrollToBottom = useCallback(() => {
+    xtermRef.current?.scrollToBottom();
+    setAutoScrollEnabled(true);
+  }, []);
+
+  const statusIndicator = getStatusIndicator(status);
+  const formattedStartTime = formatTime(startedAt);
+  const formattedDuration = formatDuration(duration);
+  const lineCount = logs ? logs.split('\n').length : 0;
+
+  return (
+    <>
+      {/* Header */}
+      <DialogHeader className="shrink-0 px-4 py-3 border-b border-border/50 pr-12 dialog-compact-header-mobile">
+        <div className="flex items-center justify-between">
+          <DialogTitle className="flex items-center gap-2 text-base">
+            <FlaskConical className="w-4 h-4 text-primary" />
+            <span>Test Runner</span>
+            {status && (
+              <span
+                className={cn(
+                  'inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium',
+                  statusIndicator.className
+                )}
+              >
+                {statusIndicator.icon}
+                {statusIndicator.text}
+              </span>
+            )}
+            {formattedDuration && !isRunning && (
+              <span className="text-xs text-muted-foreground font-mono">{formattedDuration}</span>
+            )}
+          </DialogTitle>
+          <div className="flex items-center gap-1.5">
+            {isRunning && onStopTests && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2.5 text-xs text-destructive hover:text-destructive hover:bg-destructive/10"
+                onClick={onStopTests}
+              >
+                <Square className="w-3 h-3 mr-1.5 fill-current" />
+                Stop
+              </Button>
+            )}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0"
+              onClick={() => fetchLogs()}
+              title="Refresh logs"
+            >
+              {isLoading ? <Spinner size="xs" /> : <RefreshCw className="w-3.5 h-3.5" />}
+            </Button>
+          </div>
+        </div>
+
+        {/* Info bar */}
+        <div className="flex items-center gap-3 mt-2 text-xs text-muted-foreground">
+          {branch && (
+            <span className="inline-flex items-center gap-1.5">
+              <GitBranch className="w-3 h-3" />
+              <span className="font-medium text-foreground/80">{branch}</span>
+            </span>
+          )}
+          {command && (
+            <span className="inline-flex items-center gap-1.5">
+              <span className="text-muted-foreground/60">Command</span>
+              <span className="font-mono text-primary truncate max-w-[200px]">{command}</span>
+            </span>
+          )}
+          {testFile && (
+            <span className="inline-flex items-center gap-1.5">
+              <span className="text-muted-foreground/60">File</span>
+              <span className="font-mono truncate max-w-[150px]">{testFile}</span>
+            </span>
+          )}
+          {formattedStartTime && (
+            <span className="inline-flex items-center gap-1.5">
+              <Clock className="w-3 h-3" />
+              {formattedStartTime}
+            </span>
+          )}
+        </div>
+      </DialogHeader>
+
+      {/* Error displays */}
+      {error && (
+        <div className="shrink-0 px-4 py-2 bg-destructive/5 border-b border-destructive/20">
+          <div className="flex items-center gap-2 text-xs text-destructive">
+            <AlertCircle className="w-3.5 h-3.5 shrink-0" />
+            <span>{error}</span>
+          </div>
+        </div>
+      )}
+
+      {/* Log content area */}
+      <div className="flex-1 min-h-0 overflow-hidden bg-zinc-950" data-testid="test-logs-content">
+        {isLoading && !logs ? (
+          <div className="flex items-center justify-center h-full min-h-[300px] text-muted-foreground">
+            <Spinner size="md" className="mr-2" />
+            <span className="text-sm">Loading logs...</span>
+          </div>
+        ) : !logs && !isRunning && !status ? (
+          <div className="flex flex-col items-center justify-center h-full min-h-[300px] text-muted-foreground p-8">
+            <Terminal className="w-10 h-10 mb-3 opacity-20" />
+            <p className="text-sm">No test run active</p>
+            <p className="text-xs mt-1 opacity-60">Start a test run to see logs here</p>
+          </div>
+        ) : isRunning && !logs ? (
+          <div className="flex flex-col items-center justify-center h-full min-h-[300px] text-muted-foreground p-8">
+            <Spinner size="xl" className="mb-3" />
+            <p className="text-sm">Waiting for output...</p>
+            <p className="text-xs mt-1 opacity-60">Logs will appear as tests generate output</p>
+          </div>
+        ) : (
+          <XtermLogViewer
+            ref={xtermRef}
+            className="h-full"
+            minHeight={280}
+            autoScroll={autoScrollEnabled}
+            onScrollAwayFromBottom={() => setAutoScrollEnabled(false)}
+            onScrollToBottom={() => setAutoScrollEnabled(true)}
+          />
+        )}
+      </div>
+
+      {/* Footer status bar */}
+      <div className="shrink-0 flex items-center justify-between px-4 py-2 bg-muted/30 border-t border-border/50 text-xs text-muted-foreground">
+        <div className="flex items-center gap-3">
+          <span className="font-mono">{lineCount > 0 ? `${lineCount} lines` : 'No output'}</span>
+          {exitCode !== null && (
+            <span className={cn('font-mono', exitCode === 0 ? 'text-green-500' : 'text-red-500')}>
+              Exit: {exitCode}
+            </span>
+          )}
+        </div>
+        {!autoScrollEnabled && logs && (
+          <button
+            onClick={scrollToBottom}
+            className="inline-flex items-center gap-1.5 px-2 py-1 rounded hover:bg-muted transition-colors text-primary"
+          >
+            <ArrowDown className="w-3 h-3" />
+            Scroll to bottom
+          </button>
+        )}
+        {autoScrollEnabled && logs && (
+          <span className="inline-flex items-center gap-1.5 opacity-60">
+            <ArrowDown className="w-3 h-3" />
+            Auto-scroll
+          </span>
+        )}
+      </div>
+    </>
+  );
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+/**
+ * Panel component for displaying test runner logs with ANSI color rendering
+ * and real-time streaming support.
+ *
+ * Features:
+ * - Real-time log streaming via WebSocket
+ * - Full ANSI color code rendering via xterm.js
+ * - Auto-scroll to bottom (can be paused by scrolling up)
+ * - Test status indicators (pending, running, passed, failed, etc.)
+ * - Dialog on desktop, Sheet on mobile
+ * - Quick actions (stop tests, refresh logs)
+ */
+export function TestLogsPanel({
+  open,
+  onClose,
+  worktreePath,
+  branch,
+  sessionId,
+  onStopTests,
+}: TestLogsPanelProps) {
+  const isMobile = useIsMobile();
+
+  if (!worktreePath) return null;
+
+  // Mobile: use Sheet (bottom drawer)
+  if (isMobile) {
+    return (
+      <Sheet open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+        <SheetContent side="bottom" className="h-[80vh] p-0 flex flex-col">
+          <SheetHeader className="sr-only">
+            <SheetTitle>Test Logs</SheetTitle>
+          </SheetHeader>
+          <TestLogsPanelContent
+            worktreePath={worktreePath}
+            branch={branch}
+            sessionId={sessionId}
+            onStopTests={onStopTests}
+          />
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  // Desktop: use Dialog
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent
+        className="w-full h-full max-w-full max-h-full sm:w-[70vw] sm:max-w-[900px] sm:max-h-[85vh] sm:h-auto sm:rounded-xl rounded-none flex flex-col gap-0 p-0 overflow-hidden dialog-fullscreen-mobile"
+        data-testid="test-logs-panel"
+        compact
+      >
+        <TestLogsPanelContent
+          worktreePath={worktreePath}
+          branch={branch}
+          sessionId={sessionId}
+          onStopTests={onStopTests}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/textarea.tsx b/temp_repo/apps/ui/src/components/ui/textarea.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..008ff138892727c582bb668d9be438dcc3e22381
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'placeholder:text-muted-foreground/60 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-border min-h-[80px] w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm resize-none',
+        // Inner shadow for depth
+        'shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)]',
+        // Animated focus ring
+        'transition-[color,box-shadow,border-color] duration-200 ease-out',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };
diff --git a/temp_repo/apps/ui/src/components/ui/tooltip.tsx b/temp_repo/apps/ui/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..84f43d1bf50f0b73501e34f38043166b6c777c29
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/tooltip.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '@/lib/utils';
+
+// Type-safe wrappers for Radix UI primitives (React 19 compatibility)
+const TooltipTriggerPrimitive = TooltipPrimitive.Trigger as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger> & {
+    children?: React.ReactNode;
+    asChild?: boolean;
+  } & React.RefAttributes<HTMLButtonElement>
+>;
+
+const TooltipContentPrimitive = TooltipPrimitive.Content as React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    className?: string;
+  } & React.RefAttributes<HTMLDivElement>
+>;
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+function TooltipTrigger({
+  children,
+  asChild,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger> & {
+  children?: React.ReactNode;
+  asChild?: boolean;
+}) {
+  return (
+    <TooltipTriggerPrimitive asChild={asChild} {...props}>
+      {children}
+    </TooltipTriggerPrimitive>
+  );
+}
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    className?: string;
+  }
+>(({ className, sideOffset = 6, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipContentPrimitive
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 overflow-hidden rounded-lg border border-border bg-popover px-3 py-1.5 text-xs font-medium text-popover-foreground',
+        // Premium shadow
+        'shadow-lg shadow-black/10',
+        // Faster, snappier animations
+        'animate-in fade-in-0 zoom-in-95 duration-150',
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-100',
+        // Slide from edge
+        'data-[side=bottom]:slide-in-from-top-1',
+        'data-[side=left]:slide-in-from-right-1',
+        'data-[side=right]:slide-in-from-left-1',
+        'data-[side=top]:slide-in-from-bottom-1',
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/temp_repo/apps/ui/src/components/ui/truncated-file-path.tsx b/temp_repo/apps/ui/src/components/ui/truncated-file-path.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6be81df9f27a5b33de0641a8e3ee34fc4fc0dd4a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/truncated-file-path.tsx
@@ -0,0 +1,40 @@
+import { cn } from '@/lib/utils';
+
+interface TruncatedFilePathProps {
+  /** The full file path to display */
+  path: string;
+  /** Additional CSS class names */
+  className?: string;
+}
+
+/**
+ * Renders a file path with middle truncation.
+ *
+ * When the path is too long to fit in its container, the middle portion
+ * (directory path) is truncated with an ellipsis while preserving both
+ * the beginning of the path and the filename at the end.
+ *
+ * Example: "src/components/...dialog.tsx" instead of "src/components/views/boa..."
+ */
+export function TruncatedFilePath({ path, className }: TruncatedFilePathProps) {
+  const lastSlash = path.lastIndexOf('/');
+
+  // If there's no directory component, just render with normal truncation
+  if (lastSlash === -1) {
+    return (
+      <span className={cn('truncate', className)} title={path}>
+        {path}
+      </span>
+    );
+  }
+
+  const dirPart = path.slice(0, lastSlash + 1); // includes trailing slash
+  const filePart = path.slice(lastSlash + 1);
+
+  return (
+    <span className={cn('flex min-w-0', className)} title={path}>
+      <span className="truncate shrink">{dirPart}</span>
+      <span className="shrink-0 whitespace-nowrap">{filePart}</span>
+    </span>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/xml-syntax-editor.tsx b/temp_repo/apps/ui/src/components/ui/xml-syntax-editor.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6f9aac33307dd7a17c4da5ed6b8f4510964f0741
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/xml-syntax-editor.tsx
@@ -0,0 +1,70 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { xml } from '@codemirror/lang-xml';
+import { EditorView } from '@codemirror/view';
+import { cn } from '@/lib/utils';
+
+interface XmlSyntaxEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  'data-testid'?: string;
+}
+
+// Simple editor theme - inherits text color from parent
+const editorTheme = EditorView.theme({
+  '&': {
+    height: '100%',
+    fontSize: '0.875rem',
+    backgroundColor: 'transparent',
+  },
+  '.cm-scroller': {
+    overflow: 'auto',
+  },
+  '.cm-content': {
+    padding: '1rem',
+    minHeight: '100%',
+  },
+  '.cm-activeLine': {
+    backgroundColor: 'transparent',
+  },
+  '.cm-line': {
+    padding: '0',
+  },
+  '&.cm-focused': {
+    outline: 'none',
+  },
+  '.cm-gutters': {
+    display: 'none',
+  },
+});
+
+export function XmlSyntaxEditor({
+  value,
+  onChange,
+  placeholder,
+  className,
+  'data-testid': testId,
+}: XmlSyntaxEditorProps) {
+  return (
+    <div className={cn('w-full h-full', className)} data-testid={testId}>
+      <CodeMirror
+        value={value}
+        onChange={onChange}
+        extensions={[xml(), editorTheme]}
+        theme="none"
+        placeholder={placeholder}
+        className="h-full [&_.cm-editor]:h-full [&_.cm-content]:text-foreground"
+        basicSetup={{
+          lineNumbers: false,
+          foldGutter: false,
+          highlightActiveLine: false,
+          highlightSelectionMatches: false,
+          autocompletion: false,
+          bracketMatching: true,
+          indentOnInput: true,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/ui/xterm-log-viewer.tsx b/temp_repo/apps/ui/src/components/ui/xterm-log-viewer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fb2dde63c75c959f16698fd3bf30d75b18741d47
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/ui/xterm-log-viewer.tsx
@@ -0,0 +1,320 @@
+import { useEffect, useRef, useCallback, useState, forwardRef, useImperativeHandle } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { getTerminalTheme, getTerminalFontFamily } from '@/config/terminal-themes';
+
+// Types for dynamically imported xterm modules
+type XTerminal = InstanceType<typeof import('@xterm/xterm').Terminal>;
+type XFitAddon = InstanceType<typeof import('@xterm/addon-fit').FitAddon>;
+
+export interface XtermLogViewerRef {
+  /** Append content to the log viewer */
+  append: (content: string) => void;
+  /** Clear all content */
+  clear: () => void;
+  /** Scroll to the bottom */
+  scrollToBottom: () => void;
+  /** Write content (replaces all content) */
+  write: (content: string) => void;
+}
+
+export interface XtermLogViewerProps {
+  /** Initial content to display */
+  initialContent?: string;
+  /** Font size in pixels (uses terminal settings if not provided) */
+  fontSize?: number;
+  /** Whether to auto-scroll to bottom when new content is added (default: true) */
+  autoScroll?: boolean;
+  /** Custom class name for the container */
+  className?: string;
+  /** Minimum height for the container */
+  minHeight?: number;
+  /** Callback when user scrolls away from bottom */
+  onScrollAwayFromBottom?: () => void;
+  /** Callback when user scrolls to bottom */
+  onScrollToBottom?: () => void;
+}
+
+/**
+ * A read-only terminal log viewer using xterm.js for perfect ANSI color rendering.
+ * Use this component when you need to display terminal output with ANSI escape codes.
+ */
+export const XtermLogViewer = forwardRef<XtermLogViewerRef, XtermLogViewerProps>(
+  (
+    {
+      initialContent,
+      fontSize,
+      autoScroll = true,
+      className,
+      minHeight = 300,
+      onScrollAwayFromBottom,
+      onScrollToBottom,
+    },
+    ref
+  ) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const xtermRef = useRef<XTerminal | null>(null);
+    const fitAddonRef = useRef<XFitAddon | null>(null);
+    const [isReady, setIsReady] = useState(false);
+    const autoScrollRef = useRef(autoScroll);
+    const pendingContentRef = useRef<string[]>([]);
+
+    // Get theme and font settings from store
+    const getEffectiveTheme = useAppStore((state) => state.getEffectiveTheme);
+    const effectiveTheme = getEffectiveTheme();
+    const terminalFontFamily = useAppStore((state) => state.terminalState.fontFamily);
+    const terminalFontSize = useAppStore((state) => state.terminalState.defaultFontSize);
+
+    // Use prop if provided, otherwise use store value, fallback to 13
+    const effectiveFontSize = fontSize ?? terminalFontSize ?? 13;
+
+    // Track system dark mode for "system" theme
+    const [systemIsDark, setSystemIsDark] = useState(() => {
+      if (typeof window !== 'undefined') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches;
+      }
+      return true;
+    });
+
+    useEffect(() => {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const handleChange = (e: MediaQueryListEvent) => setSystemIsDark(e.matches);
+      mediaQuery.addEventListener('change', handleChange);
+      return () => mediaQuery.removeEventListener('change', handleChange);
+    }, []);
+
+    const resolvedTheme =
+      effectiveTheme === 'system' ? (systemIsDark ? 'dark' : 'light') : effectiveTheme;
+
+    // Update autoScroll ref when prop changes
+    useEffect(() => {
+      autoScrollRef.current = autoScroll;
+    }, [autoScroll]);
+
+    // Initialize xterm
+    useEffect(() => {
+      if (!containerRef.current) return;
+
+      let mounted = true;
+
+      const initTerminal = async () => {
+        const [{ Terminal }, { FitAddon }] = await Promise.all([
+          import('@xterm/xterm'),
+          import('@xterm/addon-fit'),
+        ]);
+        await import('@xterm/xterm/css/xterm.css');
+
+        if (!mounted || !containerRef.current) return;
+
+        const terminalTheme = getTerminalTheme(resolvedTheme);
+
+        // Get font settings from store at initialization time
+        const terminalState = useAppStore.getState().terminalState;
+        const fontFamily = getTerminalFontFamily(terminalState.fontFamily);
+        const initFontSize = fontSize ?? terminalState.defaultFontSize ?? 13;
+
+        const terminal = new Terminal({
+          cursorBlink: false,
+          cursorStyle: 'underline',
+          cursorInactiveStyle: 'none',
+          fontSize: initFontSize,
+          fontFamily,
+          lineHeight: 1.2,
+          theme: terminalTheme,
+          disableStdin: true, // Read-only mode
+          scrollback: 10000,
+          convertEol: true,
+        });
+
+        const fitAddon = new FitAddon();
+        terminal.loadAddon(fitAddon);
+
+        terminal.open(containerRef.current);
+
+        // Try to load WebGL addon for better performance
+        try {
+          const { WebglAddon } = await import('@xterm/addon-webgl');
+          const webglAddon = new WebglAddon();
+          webglAddon.onContextLoss(() => webglAddon.dispose());
+          terminal.loadAddon(webglAddon);
+        } catch {
+          // WebGL not available, continue with canvas renderer
+        }
+
+        // Wait for layout to stabilize then fit
+        requestAnimationFrame(() => {
+          if (mounted && containerRef.current) {
+            try {
+              fitAddon.fit();
+            } catch {
+              // Ignore fit errors during initialization
+            }
+          }
+        });
+
+        xtermRef.current = terminal;
+        fitAddonRef.current = fitAddon;
+        setIsReady(true);
+
+        // Write initial content if provided
+        if (initialContent) {
+          terminal.write(initialContent);
+        }
+
+        // Write any pending content that was queued before terminal was ready
+        if (pendingContentRef.current.length > 0) {
+          pendingContentRef.current.forEach((content) => terminal.write(content));
+          pendingContentRef.current = [];
+        }
+      };
+
+      initTerminal();
+
+      return () => {
+        mounted = false;
+        if (xtermRef.current) {
+          xtermRef.current.dispose();
+          xtermRef.current = null;
+        }
+        fitAddonRef.current = null;
+        setIsReady(false);
+      };
+      // Only run once on mount - intentionally excluding deps to prevent re-initialization
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Update theme when it changes
+    useEffect(() => {
+      if (xtermRef.current && isReady) {
+        const terminalTheme = getTerminalTheme(resolvedTheme);
+        xtermRef.current.options.theme = terminalTheme;
+      }
+    }, [resolvedTheme, isReady]);
+
+    // Update font size when it changes
+    useEffect(() => {
+      if (xtermRef.current && isReady) {
+        xtermRef.current.options.fontSize = effectiveFontSize;
+        fitAddonRef.current?.fit();
+      }
+    }, [effectiveFontSize, isReady]);
+
+    // Update font family when it changes
+    useEffect(() => {
+      if (xtermRef.current && isReady) {
+        xtermRef.current.options.fontFamily = getTerminalFontFamily(terminalFontFamily);
+        fitAddonRef.current?.fit();
+      }
+    }, [terminalFontFamily, isReady]);
+
+    // Handle resize
+    useEffect(() => {
+      if (!containerRef.current || !isReady) return;
+
+      const handleResize = () => {
+        if (fitAddonRef.current && containerRef.current) {
+          const rect = containerRef.current.getBoundingClientRect();
+          if (rect.width > 0 && rect.height > 0) {
+            try {
+              fitAddonRef.current.fit();
+            } catch {
+              // Ignore fit errors
+            }
+          }
+        }
+      };
+
+      const resizeObserver = new ResizeObserver(handleResize);
+      resizeObserver.observe(containerRef.current);
+      window.addEventListener('resize', handleResize);
+
+      return () => {
+        resizeObserver.disconnect();
+        window.removeEventListener('resize', handleResize);
+      };
+    }, [isReady]);
+
+    // Monitor scroll position
+    useEffect(() => {
+      if (!isReady || !containerRef.current) return;
+
+      const viewport = containerRef.current.querySelector('.xterm-viewport') as HTMLElement | null;
+      if (!viewport) return;
+
+      const checkScroll = () => {
+        const { scrollTop, scrollHeight, clientHeight } = viewport;
+        const isAtBottom = scrollHeight - scrollTop - clientHeight <= 10;
+
+        if (isAtBottom) {
+          autoScrollRef.current = true;
+          onScrollToBottom?.();
+        } else {
+          autoScrollRef.current = false;
+          onScrollAwayFromBottom?.();
+        }
+      };
+
+      viewport.addEventListener('scroll', checkScroll, { passive: true });
+      return () => viewport.removeEventListener('scroll', checkScroll);
+    }, [isReady, onScrollAwayFromBottom, onScrollToBottom]);
+
+    // Expose methods via ref
+    const append = useCallback((content: string) => {
+      if (xtermRef.current) {
+        xtermRef.current.write(content);
+        if (autoScrollRef.current) {
+          xtermRef.current.scrollToBottom();
+        }
+      } else {
+        // Queue content if terminal isn't ready yet
+        pendingContentRef.current.push(content);
+      }
+    }, []);
+
+    const clear = useCallback(() => {
+      if (xtermRef.current) {
+        xtermRef.current.clear();
+      }
+    }, []);
+
+    const scrollToBottom = useCallback(() => {
+      if (xtermRef.current) {
+        xtermRef.current.scrollToBottom();
+        autoScrollRef.current = true;
+      }
+    }, []);
+
+    const write = useCallback((content: string) => {
+      if (xtermRef.current) {
+        xtermRef.current.reset();
+        xtermRef.current.write(content);
+        if (autoScrollRef.current) {
+          xtermRef.current.scrollToBottom();
+        }
+      } else {
+        pendingContentRef.current = [content];
+      }
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+      append,
+      clear,
+      scrollToBottom,
+      write,
+    }));
+
+    const terminalTheme = getTerminalTheme(resolvedTheme);
+
+    return (
+      <div
+        ref={containerRef}
+        className={className}
+        style={{
+          minHeight,
+          backgroundColor: terminalTheme.background,
+        }}
+      />
+    );
+  }
+);
+
+XtermLogViewer.displayName = 'XtermLogViewer';
diff --git a/temp_repo/apps/ui/src/components/usage-popover.tsx b/temp_repo/apps/ui/src/components/usage-popover.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..049a142adf785d052e3374ca435a03fcaf9e8d80
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/usage-popover.tsx
@@ -0,0 +1,1015 @@
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { RefreshCw, AlertTriangle, CheckCircle, XCircle, Clock, ExternalLink } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { useSetupStore } from '@/store/setup-store';
+import { AnthropicIcon, OpenAIIcon, ZaiIcon, GeminiIcon } from '@/components/ui/provider-icon';
+import { useClaudeUsage, useCodexUsage, useZaiUsage, useGeminiUsage } from '@/hooks/queries';
+import {
+  getExpectedWeeklyPacePercentage,
+  getExpectedCodexPacePercentage,
+  getPaceStatusLabel,
+} from '@/store/utils/usage-utils';
+
+// Error codes for distinguishing failure modes
+const ERROR_CODES = {
+  API_BRIDGE_UNAVAILABLE: 'API_BRIDGE_UNAVAILABLE',
+  AUTH_ERROR: 'AUTH_ERROR',
+  NOT_AVAILABLE: 'NOT_AVAILABLE',
+  TRUST_PROMPT: 'TRUST_PROMPT',
+  UNKNOWN: 'UNKNOWN',
+} as const;
+
+type ErrorCode = (typeof ERROR_CODES)[keyof typeof ERROR_CODES];
+
+type UsageError = {
+  code: ErrorCode;
+  message: string;
+};
+
+const CLAUDE_SESSION_WINDOW_HOURS = 5;
+
+// Helper to format reset time for Codex/z.ai (unix timestamp in seconds or milliseconds)
+function formatResetTime(unixTimestamp: number, isMilliseconds = false): string {
+  const date = new Date(isMilliseconds ? unixTimestamp : unixTimestamp * 1000);
+  const now = new Date();
+  const diff = date.getTime() - now.getTime();
+
+  // Guard against past timestamps: clamp negative diffs to a friendly fallback
+  if (diff <= 0) {
+    return 'Resets now';
+  }
+
+  if (diff < 3600000) {
+    const mins = Math.max(0, Math.ceil(diff / 60000));
+    return `Resets in ${mins}m`;
+  }
+  if (diff < 86400000) {
+    const hours = Math.max(0, Math.floor(diff / 3600000));
+    const mins = Math.max(0, Math.ceil((diff % 3600000) / 60000));
+    return `Resets in ${hours}h ${mins > 0 ? `${mins}m` : ''}`;
+  }
+  return `Resets ${date.toLocaleDateString()} at ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+}
+
+// Helper to format window duration for Codex
+function getCodexWindowLabel(durationMins: number): { title: string; subtitle: string } {
+  if (durationMins < 60) {
+    return { title: `${durationMins}min Window`, subtitle: 'Rate limit' };
+  }
+  if (durationMins < 1440) {
+    const hours = Math.round(durationMins / 60);
+    return { title: `${hours}h Window`, subtitle: 'Rate limit' };
+  }
+  const days = Math.round(durationMins / 1440);
+  return { title: `${days}d Window`, subtitle: 'Rate limit' };
+}
+
+// Helper to format large numbers with K/M suffixes
+function formatNumber(num: number): string {
+  if (num >= 1_000_000_000) {
+    return `${(num / 1_000_000_000).toFixed(1)}B`;
+  }
+  if (num >= 1_000_000) {
+    return `${(num / 1_000_000).toFixed(1)}M`;
+  }
+  if (num >= 1_000) {
+    return `${(num / 1_000).toFixed(1)}K`;
+  }
+  return num.toLocaleString();
+}
+
+export function UsagePopover() {
+  const claudeAuthStatus = useSetupStore((state) => state.claudeAuthStatus);
+  const codexAuthStatus = useSetupStore((state) => state.codexAuthStatus);
+  const zaiAuthStatus = useSetupStore((state) => state.zaiAuthStatus);
+  const geminiAuthStatus = useSetupStore((state) => state.geminiAuthStatus);
+
+  const [open, setOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState<'claude' | 'codex' | 'zai' | 'gemini'>('claude');
+  // Track whether the user has manually selected a tab so we don't override their choice
+  const userHasSelected = useRef(false);
+
+  // Check authentication status — use explicit boolean coercion so hooks never
+  // receive undefined for their `enabled` parameter during auth-loading
+  const isClaudeAuthenticated = !!claudeAuthStatus?.authenticated;
+  const isCodexAuthenticated = !!codexAuthStatus?.authenticated;
+  const isZaiAuthenticated = !!zaiAuthStatus?.authenticated;
+  const isGeminiAuthenticated = !!geminiAuthStatus?.authenticated;
+
+  // Use React Query hooks for usage data
+  // Only enable polling when popover is open AND the tab is active
+  const {
+    data: claudeUsage,
+    isLoading: claudeLoading,
+    error: claudeQueryError,
+    dataUpdatedAt: claudeUsageLastUpdated,
+    refetch: refetchClaude,
+  } = useClaudeUsage(open && activeTab === 'claude' && isClaudeAuthenticated);
+
+  const {
+    data: codexUsage,
+    isLoading: codexLoading,
+    error: codexQueryError,
+    dataUpdatedAt: codexUsageLastUpdated,
+    refetch: refetchCodex,
+  } = useCodexUsage(open && activeTab === 'codex' && isCodexAuthenticated);
+
+  const {
+    data: zaiUsage,
+    isLoading: zaiLoading,
+    error: zaiQueryError,
+    dataUpdatedAt: zaiUsageLastUpdated,
+    refetch: refetchZai,
+  } = useZaiUsage(open && activeTab === 'zai' && isZaiAuthenticated);
+
+  const {
+    data: geminiUsage,
+    isLoading: geminiLoading,
+    error: geminiQueryError,
+    dataUpdatedAt: geminiUsageLastUpdated,
+    refetch: refetchGemini,
+  } = useGeminiUsage(open && activeTab === 'gemini' && isGeminiAuthenticated);
+
+  // Parse errors into structured format
+  const claudeError = useMemo((): UsageError | null => {
+    if (!claudeQueryError) return null;
+    const message =
+      claudeQueryError instanceof Error ? claudeQueryError.message : String(claudeQueryError);
+    // Detect trust prompt error
+    const isTrustPrompt = message.includes('Trust prompt') || message.includes('folder permission');
+    if (isTrustPrompt) {
+      return { code: ERROR_CODES.TRUST_PROMPT, message };
+    }
+    if (message.includes('API bridge')) {
+      return { code: ERROR_CODES.API_BRIDGE_UNAVAILABLE, message };
+    }
+    return { code: ERROR_CODES.AUTH_ERROR, message };
+  }, [claudeQueryError]);
+
+  const codexError = useMemo((): UsageError | null => {
+    if (!codexQueryError) return null;
+    const message =
+      codexQueryError instanceof Error ? codexQueryError.message : String(codexQueryError);
+    if (message.includes('not available') || message.includes('does not provide')) {
+      return { code: ERROR_CODES.NOT_AVAILABLE, message };
+    }
+    if (message.includes('API bridge')) {
+      return { code: ERROR_CODES.API_BRIDGE_UNAVAILABLE, message };
+    }
+    return { code: ERROR_CODES.AUTH_ERROR, message };
+  }, [codexQueryError]);
+
+  const zaiError = useMemo((): UsageError | null => {
+    if (!zaiQueryError) return null;
+    const message = zaiQueryError instanceof Error ? zaiQueryError.message : String(zaiQueryError);
+    if (message.includes('not configured') || message.includes('API token')) {
+      return { code: ERROR_CODES.NOT_AVAILABLE, message };
+    }
+    if (message.includes('API bridge')) {
+      return { code: ERROR_CODES.API_BRIDGE_UNAVAILABLE, message };
+    }
+    return { code: ERROR_CODES.AUTH_ERROR, message };
+  }, [zaiQueryError]);
+
+  const geminiError = useMemo((): UsageError | null => {
+    if (!geminiQueryError) return null;
+    const message =
+      geminiQueryError instanceof Error ? geminiQueryError.message : String(geminiQueryError);
+    if (message.includes('not configured') || message.includes('not authenticated')) {
+      return { code: ERROR_CODES.NOT_AVAILABLE, message };
+    }
+    if (message.includes('API bridge')) {
+      return { code: ERROR_CODES.API_BRIDGE_UNAVAILABLE, message };
+    }
+    return { code: ERROR_CODES.AUTH_ERROR, message };
+  }, [geminiQueryError]);
+
+  // Determine which tab to show by default.
+  // Only apply the default when the popover opens (open transitions to true) and the user has
+  // not yet made a manual selection during this session.  This prevents auth-flag re-renders from
+  // overriding a tab the user explicitly clicked.
+  useEffect(() => {
+    if (!open) {
+      // Reset the user-selection guard each time the popover closes so the next open always gets
+      // a fresh default.
+      userHasSelected.current = false;
+      return;
+    }
+
+    // The user already picked a tab – respect their choice.
+    if (userHasSelected.current) {
+      return;
+    }
+
+    // Pick the first available provider in priority order.
+    if (isClaudeAuthenticated) {
+      setActiveTab('claude');
+    } else if (isCodexAuthenticated) {
+      setActiveTab('codex');
+    } else if (isZaiAuthenticated) {
+      setActiveTab('zai');
+    } else if (isGeminiAuthenticated) {
+      setActiveTab('gemini');
+    }
+  }, [
+    open,
+    isClaudeAuthenticated,
+    isCodexAuthenticated,
+    isZaiAuthenticated,
+    isGeminiAuthenticated,
+  ]);
+
+  // Check if data is stale (older than 2 minutes)
+  const isClaudeStale = useMemo(() => {
+    return !claudeUsageLastUpdated || Date.now() - claudeUsageLastUpdated > 2 * 60 * 1000;
+  }, [claudeUsageLastUpdated]);
+
+  const isCodexStale = useMemo(() => {
+    return !codexUsageLastUpdated || Date.now() - codexUsageLastUpdated > 2 * 60 * 1000;
+  }, [codexUsageLastUpdated]);
+
+  const isZaiStale = useMemo(() => {
+    return !zaiUsageLastUpdated || Date.now() - zaiUsageLastUpdated > 2 * 60 * 1000;
+  }, [zaiUsageLastUpdated]);
+
+  const isGeminiStale = useMemo(() => {
+    return !geminiUsageLastUpdated || Date.now() - geminiUsageLastUpdated > 2 * 60 * 1000;
+  }, [geminiUsageLastUpdated]);
+
+  // Derived status color/icon helper
+  const getStatusInfo = (percentage: number) => {
+    if (percentage >= 75) return { color: 'text-red-500', icon: XCircle, bg: 'bg-red-500' };
+    if (percentage >= 50)
+      return { color: 'text-orange-500', icon: AlertTriangle, bg: 'bg-orange-500' };
+    return { color: 'text-green-500', icon: CheckCircle, bg: 'bg-green-500' };
+  };
+
+  // Helper component for the progress bar with optional pace indicator
+  const ProgressBar = ({
+    percentage,
+    colorClass,
+    pacePercentage,
+  }: {
+    percentage: number;
+    colorClass: string;
+    pacePercentage?: number | null;
+  }) => (
+    <div className="relative h-2 w-full bg-secondary/50 rounded-full overflow-hidden">
+      <div
+        className={cn('h-full transition-all duration-500', colorClass)}
+        style={{ width: `${Math.min(percentage, 100)}%` }}
+      />
+      {pacePercentage != null && pacePercentage > 0 && pacePercentage < 100 && (
+        <div
+          className="absolute top-0 h-full w-0.5 bg-foreground/60"
+          style={{ left: `${pacePercentage}%` }}
+          title={`Expected: ${Math.round(pacePercentage)}%`}
+        />
+      )}
+    </div>
+  );
+
+  const UsageCard = ({
+    title,
+    subtitle,
+    percentage,
+    resetText,
+    isPrimary = false,
+    stale = false,
+    pacePercentage,
+  }: {
+    title: string;
+    subtitle: string;
+    percentage: number;
+    resetText?: string;
+    isPrimary?: boolean;
+    stale?: boolean;
+    pacePercentage?: number | null;
+  }) => {
+    const isValidPercentage =
+      typeof percentage === 'number' && !isNaN(percentage) && isFinite(percentage);
+    const safePercentage = isValidPercentage ? percentage : 0;
+
+    const status = getStatusInfo(safePercentage);
+    const StatusIcon = status.icon;
+    const paceLabel =
+      isValidPercentage && pacePercentage != null
+        ? getPaceStatusLabel(safePercentage, pacePercentage)
+        : null;
+
+    return (
+      <div
+        className={cn(
+          'rounded-xl border bg-card/50 p-4 transition-opacity',
+          isPrimary ? 'border-border/60 shadow-sm' : 'border-border/40',
+          (stale || !isValidPercentage) && 'opacity-50'
+        )}
+      >
+        <div className="flex items-start justify-between mb-3">
+          <div>
+            <h4 className={cn('font-semibold', isPrimary ? 'text-sm' : 'text-xs')}>{title}</h4>
+            <p className="text-[10px] text-muted-foreground">{subtitle}</p>
+          </div>
+          {isValidPercentage ? (
+            <div className="flex items-center gap-1.5">
+              <StatusIcon className={cn('w-3.5 h-3.5', status.color)} />
+              <span
+                className={cn(
+                  'font-mono font-bold',
+                  status.color,
+                  isPrimary ? 'text-base' : 'text-sm'
+                )}
+              >
+                {Math.round(safePercentage)}%
+              </span>
+            </div>
+          ) : (
+            <span className="text-xs text-muted-foreground">N/A</span>
+          )}
+        </div>
+        <ProgressBar
+          percentage={safePercentage}
+          colorClass={isValidPercentage ? status.bg : 'bg-muted-foreground/30'}
+          pacePercentage={pacePercentage}
+        />
+        <div className="mt-2 flex items-center justify-between">
+          {paceLabel ? (
+            <p
+              className={cn(
+                'text-[10px] font-medium',
+                safePercentage > (pacePercentage ?? 0) ? 'text-orange-500' : 'text-green-500'
+              )}
+            >
+              {paceLabel}
+            </p>
+          ) : (
+            <div />
+          )}
+          {resetText && (
+            <p className="text-xs text-muted-foreground flex items-center gap-1">
+              <Clock className="w-3 h-3" />
+              {resetText}
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  // Calculate max percentage for header button
+  const claudeSessionPercentage = claudeUsage?.sessionPercentage || 0;
+
+  const zaiMaxPercentage = zaiUsage?.quotaLimits
+    ? Math.max(
+        zaiUsage.quotaLimits.tokens?.usedPercent || 0,
+        zaiUsage.quotaLimits.mcp?.usedPercent || 0
+      )
+    : 0;
+
+  // Gemini quota from Google Cloud API (if available)
+  // Default to 0 when usedPercent is not available to avoid a misleading full-red indicator
+  const geminiMaxPercentage = geminiUsage?.usedPercent ?? 0;
+
+  const getProgressBarColor = (percentage: number) => {
+    if (percentage >= 80) return 'bg-red-500';
+    if (percentage >= 50) return 'bg-yellow-500';
+    return 'bg-green-500';
+  };
+
+  const codexPrimaryWindowMinutes = codexUsage?.rateLimits?.primary?.windowDurationMins ?? null;
+  const codexSecondaryWindowMinutes = codexUsage?.rateLimits?.secondary?.windowDurationMins ?? null;
+  const codexWindowMinutes =
+    codexSecondaryWindowMinutes && codexPrimaryWindowMinutes
+      ? Math.min(codexPrimaryWindowMinutes, codexSecondaryWindowMinutes)
+      : (codexSecondaryWindowMinutes ?? codexPrimaryWindowMinutes);
+  const codexWindowUsage =
+    codexWindowMinutes === codexSecondaryWindowMinutes
+      ? codexUsage?.rateLimits?.secondary?.usedPercent
+      : codexUsage?.rateLimits?.primary?.usedPercent;
+
+  // Determine which provider icon and percentage to show based on active tab
+  const indicatorInfo =
+    activeTab === 'claude'
+      ? {
+          icon: AnthropicIcon,
+          percentage: claudeSessionPercentage,
+          isStale: isClaudeStale,
+          title: `Session usage (${CLAUDE_SESSION_WINDOW_HOURS}h window)`,
+        }
+      : activeTab === 'codex'
+        ? {
+            icon: OpenAIIcon,
+            percentage: codexWindowUsage ?? 0,
+            isStale: isCodexStale,
+          }
+        : activeTab === 'zai'
+          ? {
+              icon: ZaiIcon,
+              percentage: zaiMaxPercentage,
+              isStale: isZaiStale,
+              title: `Usage (z.ai)`,
+            }
+          : activeTab === 'gemini'
+            ? {
+                icon: GeminiIcon,
+                percentage: geminiMaxPercentage,
+                isStale: isGeminiStale,
+                title: `Usage (Gemini)`,
+              }
+            : null;
+
+  const statusColor = indicatorInfo ? getStatusInfo(indicatorInfo.percentage).color : '';
+  const ProviderIcon = indicatorInfo?.icon;
+
+  const trigger = (
+    <Button variant="ghost" size="sm" className="h-9 gap-2 bg-secondary border border-border px-3">
+      {(claudeUsage || codexUsage || zaiUsage || geminiUsage) && ProviderIcon && (
+        <ProviderIcon className={cn('w-4 h-4', statusColor)} />
+      )}
+      <span className="text-sm font-medium">Usage</span>
+      {(claudeUsage || codexUsage || zaiUsage || geminiUsage) && indicatorInfo && (
+        <div
+          title={indicatorInfo.title}
+          className={cn(
+            'h-1.5 w-16 bg-muted-foreground/20 rounded-full overflow-hidden transition-opacity',
+            indicatorInfo.isStale && 'opacity-60'
+          )}
+        >
+          <div
+            className={cn(
+              'h-full transition-all duration-500',
+              getProgressBarColor(indicatorInfo.percentage)
+            )}
+            style={{ width: `${Math.min(indicatorInfo.percentage, 100)}%` }}
+          />
+        </div>
+      )}
+    </Button>
+  );
+
+  // Determine which tabs to show
+  const showClaudeTab = isClaudeAuthenticated;
+  const showCodexTab = isCodexAuthenticated;
+  const showZaiTab = isZaiAuthenticated;
+  const showGeminiTab = isGeminiAuthenticated;
+  const tabCount = [showClaudeTab, showCodexTab, showZaiTab, showGeminiTab].filter(Boolean).length;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent
+        className="w-80 p-0 overflow-hidden bg-background/95 backdrop-blur-xl border-border shadow-2xl"
+        align="end"
+        sideOffset={8}
+      >
+        <Tabs
+          value={activeTab}
+          onValueChange={(v) => {
+            userHasSelected.current = true;
+            setActiveTab(v as 'claude' | 'codex' | 'zai' | 'gemini');
+          }}
+        >
+          {/* Tabs Header */}
+          {tabCount > 1 && (
+            <TabsList
+              className={cn(
+                'grid w-full rounded-none border-b border-border/50',
+                tabCount === 2 && 'grid-cols-2',
+                tabCount === 3 && 'grid-cols-3',
+                tabCount === 4 && 'grid-cols-4'
+              )}
+            >
+              {showClaudeTab && (
+                <TabsTrigger value="claude" className="gap-2">
+                  <AnthropicIcon className="w-3.5 h-3.5" />
+                  Claude
+                </TabsTrigger>
+              )}
+              {showCodexTab && (
+                <TabsTrigger value="codex" className="gap-2">
+                  <OpenAIIcon className="w-3.5 h-3.5" />
+                  Codex
+                </TabsTrigger>
+              )}
+              {showZaiTab && (
+                <TabsTrigger value="zai" className="gap-2">
+                  <ZaiIcon className="w-3.5 h-3.5" />
+                  z.ai
+                </TabsTrigger>
+              )}
+              {showGeminiTab && (
+                <TabsTrigger value="gemini" className="gap-2">
+                  <GeminiIcon className="w-3.5 h-3.5" />
+                  Gemini
+                </TabsTrigger>
+              )}
+            </TabsList>
+          )}
+
+          {/* Claude Tab Content */}
+          <TabsContent value="claude" className="m-0">
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-3 border-b border-border/50 bg-secondary/10">
+              <div className="flex items-center gap-2">
+                <AnthropicIcon className="w-4 h-4" />
+                <span className="text-sm font-semibold">Claude Usage</span>
+              </div>
+              {claudeError && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className={cn('h-6 w-6', claudeLoading && 'opacity-80')}
+                  onClick={() => !claudeLoading && refetchClaude()}
+                >
+                  <RefreshCw className="w-3.5 h-3.5" />
+                </Button>
+              )}
+            </div>
+
+            {/* Content */}
+            <div className="p-4 space-y-4">
+              {claudeError ? (
+                <div className="flex flex-col items-center justify-center py-6 text-center space-y-3">
+                  <AlertTriangle className="w-8 h-8 text-yellow-500/80" />
+                  <div className="space-y-1 flex flex-col items-center">
+                    <p className="text-sm font-medium">{claudeError.message}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {claudeError.code === ERROR_CODES.API_BRIDGE_UNAVAILABLE ? (
+                        'Ensure the Electron bridge is running or restart the app'
+                      ) : claudeError.code === ERROR_CODES.TRUST_PROMPT ? (
+                        <>
+                          Run <code className="font-mono bg-muted px-1 rounded">claude</code> in
+                          your terminal and approve access to continue
+                        </>
+                      ) : (
+                        <>
+                          Make sure Claude CLI is installed and authenticated via{' '}
+                          <code className="font-mono bg-muted px-1 rounded">claude login</code>
+                        </>
+                      )}
+                    </p>
+                  </div>
+                </div>
+              ) : !claudeUsage ? (
+                <div className="flex flex-col items-center justify-center py-8 space-y-2">
+                  <Spinner size="lg" />
+                  <p className="text-xs text-muted-foreground">Loading usage data...</p>
+                </div>
+              ) : (
+                <>
+                  <UsageCard
+                    title="Session Usage"
+                    subtitle="5-hour rolling window"
+                    percentage={claudeUsage.sessionPercentage}
+                    resetText={claudeUsage.sessionResetText}
+                    isPrimary={true}
+                    stale={isClaudeStale}
+                  />
+
+                  <div className="grid grid-cols-2 gap-3">
+                    <UsageCard
+                      title="Sonnet"
+                      subtitle="Weekly"
+                      percentage={claudeUsage.sonnetWeeklyPercentage}
+                      resetText={claudeUsage.sonnetResetText}
+                      stale={isClaudeStale}
+                      pacePercentage={getExpectedWeeklyPacePercentage(claudeUsage.weeklyResetTime)}
+                    />
+                    <UsageCard
+                      title="Weekly"
+                      subtitle="All models"
+                      percentage={claudeUsage.weeklyPercentage}
+                      resetText={claudeUsage.weeklyResetText}
+                      stale={isClaudeStale}
+                      pacePercentage={getExpectedWeeklyPacePercentage(claudeUsage.weeklyResetTime)}
+                    />
+                  </div>
+
+                  {claudeUsage.costLimit && claudeUsage.costLimit > 0 && (
+                    <UsageCard
+                      title="Extra Usage"
+                      subtitle={`${claudeUsage.costUsed ?? 0} / ${claudeUsage.costLimit} ${claudeUsage.costCurrency ?? ''}`}
+                      percentage={
+                        claudeUsage.costLimit > 0
+                          ? ((claudeUsage.costUsed ?? 0) / claudeUsage.costLimit) * 100
+                          : 0
+                      }
+                      stale={isClaudeStale}
+                    />
+                  )}
+                </>
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="flex items-center justify-between px-4 py-2 bg-secondary/10 border-t border-border/50">
+              <a
+                href="https://status.claude.com"
+                target="_blank"
+                rel="noreferrer"
+                className="text-[10px] text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
+              >
+                Claude Status <ExternalLink className="w-2.5 h-2.5" />
+              </a>
+              <span className="text-[10px] text-muted-foreground">Updates every minute</span>
+            </div>
+          </TabsContent>
+
+          {/* Codex Tab Content */}
+          <TabsContent value="codex" className="m-0">
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-3 border-b border-border/50 bg-secondary/10">
+              <div className="flex items-center gap-2">
+                <OpenAIIcon className="w-4 h-4" />
+                <span className="text-sm font-semibold">Codex Usage</span>
+              </div>
+              {codexError && codexError.code !== ERROR_CODES.NOT_AVAILABLE && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className={cn('h-6 w-6', codexLoading && 'opacity-80')}
+                  onClick={() => !codexLoading && refetchCodex()}
+                >
+                  <RefreshCw className="w-3.5 h-3.5" />
+                </Button>
+              )}
+            </div>
+
+            {/* Content */}
+            <div className="p-4 space-y-4">
+              {codexError ? (
+                <div className="flex flex-col items-center justify-center py-6 text-center space-y-3">
+                  <AlertTriangle className="w-8 h-8 text-yellow-500/80" />
+                  <div className="space-y-1 flex flex-col items-center">
+                    <p className="text-sm font-medium">
+                      {codexError.code === ERROR_CODES.NOT_AVAILABLE
+                        ? 'Usage not available'
+                        : codexError.message}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {codexError.code === ERROR_CODES.API_BRIDGE_UNAVAILABLE ? (
+                        'Ensure the Electron bridge is running or restart the app'
+                      ) : codexError.code === ERROR_CODES.NOT_AVAILABLE ? (
+                        <>
+                          Codex CLI doesn't provide usage statistics. Check{' '}
+                          <a
+                            href="https://platform.openai.com/usage"
+                            target="_blank"
+                            rel="noreferrer"
+                            className="underline hover:text-foreground"
+                          >
+                            OpenAI dashboard
+                          </a>{' '}
+                          for usage details.
+                        </>
+                      ) : (
+                        <>
+                          Make sure Codex CLI is installed and authenticated via{' '}
+                          <code className="font-mono bg-muted px-1 rounded">codex login</code>
+                        </>
+                      )}
+                    </p>
+                  </div>
+                </div>
+              ) : !codexUsage ? (
+                <div className="flex flex-col items-center justify-center py-8 space-y-2">
+                  <Spinner size="lg" />
+                  <p className="text-xs text-muted-foreground">Loading usage data...</p>
+                </div>
+              ) : codexUsage.rateLimits ? (
+                <>
+                  {codexUsage.rateLimits.primary && (
+                    <UsageCard
+                      title={
+                        getCodexWindowLabel(codexUsage.rateLimits.primary.windowDurationMins).title
+                      }
+                      subtitle={
+                        getCodexWindowLabel(codexUsage.rateLimits.primary.windowDurationMins)
+                          .subtitle
+                      }
+                      percentage={codexUsage.rateLimits.primary.usedPercent}
+                      resetText={formatResetTime(codexUsage.rateLimits.primary.resetsAt)}
+                      isPrimary={true}
+                      stale={isCodexStale}
+                      pacePercentage={getExpectedCodexPacePercentage(
+                        codexUsage.rateLimits.primary.resetsAt,
+                        codexUsage.rateLimits.primary.windowDurationMins
+                      )}
+                    />
+                  )}
+
+                  {codexUsage.rateLimits.secondary && (
+                    <UsageCard
+                      title={
+                        getCodexWindowLabel(codexUsage.rateLimits.secondary.windowDurationMins)
+                          .title
+                      }
+                      subtitle={
+                        getCodexWindowLabel(codexUsage.rateLimits.secondary.windowDurationMins)
+                          .subtitle
+                      }
+                      percentage={codexUsage.rateLimits.secondary.usedPercent}
+                      resetText={formatResetTime(codexUsage.rateLimits.secondary.resetsAt)}
+                      stale={isCodexStale}
+                      pacePercentage={getExpectedCodexPacePercentage(
+                        codexUsage.rateLimits.secondary.resetsAt,
+                        codexUsage.rateLimits.secondary.windowDurationMins
+                      )}
+                    />
+                  )}
+
+                  {codexUsage.rateLimits.planType && (
+                    <div className="rounded-xl border border-border/40 bg-secondary/20 p-3">
+                      <p className="text-xs text-muted-foreground">
+                        Plan:{' '}
+                        <span className="text-foreground font-medium">
+                          {codexUsage.rateLimits.planType.charAt(0).toUpperCase() +
+                            codexUsage.rateLimits.planType.slice(1)}
+                        </span>
+                      </p>
+                    </div>
+                  )}
+                </>
+              ) : (
+                <div className="flex flex-col items-center justify-center py-6 text-center">
+                  <AlertTriangle className="w-8 h-8 text-yellow-500/80" />
+                  <p className="text-sm font-medium mt-3">No usage data available</p>
+                </div>
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="flex items-center justify-between px-4 py-2 bg-secondary/10 border-t border-border/50">
+              <a
+                href="https://platform.openai.com/usage"
+                target="_blank"
+                rel="noreferrer"
+                className="text-[10px] text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
+              >
+                OpenAI Dashboard <ExternalLink className="w-2.5 h-2.5" />
+              </a>
+              <span className="text-[10px] text-muted-foreground">Updates every minute</span>
+            </div>
+          </TabsContent>
+
+          {/* z.ai Tab Content */}
+          <TabsContent value="zai" className="m-0">
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-3 border-b border-border/50 bg-secondary/10">
+              <div className="flex items-center gap-2">
+                <ZaiIcon className="w-4 h-4" />
+                <span className="text-sm font-semibold">z.ai Usage</span>
+              </div>
+              {zaiError && zaiError.code !== ERROR_CODES.NOT_AVAILABLE && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className={cn('h-6 w-6', zaiLoading && 'opacity-80')}
+                  onClick={() => !zaiLoading && refetchZai()}
+                >
+                  <RefreshCw className="w-3.5 h-3.5" />
+                </Button>
+              )}
+            </div>
+
+            {/* Content */}
+            <div className="p-4 space-y-4">
+              {zaiError ? (
+                <div className="flex flex-col items-center justify-center py-6 text-center space-y-3">
+                  <AlertTriangle className="w-8 h-8 text-yellow-500/80" />
+                  <div className="space-y-1 flex flex-col items-center">
+                    <p className="text-sm font-medium">
+                      {zaiError.code === ERROR_CODES.NOT_AVAILABLE
+                        ? 'z.ai not configured'
+                        : zaiError.message}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {zaiError.code === ERROR_CODES.API_BRIDGE_UNAVAILABLE ? (
+                        'Ensure the Electron bridge is running or restart the app'
+                      ) : zaiError.code === ERROR_CODES.NOT_AVAILABLE ? (
+                        <>
+                          Set <code className="font-mono bg-muted px-1 rounded">Z_AI_API_KEY</code>{' '}
+                          environment variable to enable z.ai usage tracking
+                        </>
+                      ) : (
+                        <>Check your z.ai API key configuration</>
+                      )}
+                    </p>
+                  </div>
+                </div>
+              ) : !zaiUsage ? (
+                <div className="flex flex-col items-center justify-center py-8 space-y-2">
+                  <Spinner size="lg" />
+                  <p className="text-xs text-muted-foreground">Loading usage data...</p>
+                </div>
+              ) : zaiUsage.quotaLimits &&
+                (zaiUsage.quotaLimits.tokens || zaiUsage.quotaLimits.mcp) ? (
+                <>
+                  {zaiUsage.quotaLimits.tokens && (
+                    <UsageCard
+                      title="Token Quota"
+                      subtitle={`${formatNumber(zaiUsage.quotaLimits.tokens.used)} / ${formatNumber(zaiUsage.quotaLimits.tokens.limit)} tokens`}
+                      percentage={zaiUsage.quotaLimits.tokens.usedPercent}
+                      resetText={
+                        zaiUsage.quotaLimits.tokens.nextResetTime
+                          ? formatResetTime(zaiUsage.quotaLimits.tokens.nextResetTime, true)
+                          : undefined
+                      }
+                      isPrimary={true}
+                      stale={isZaiStale}
+                    />
+                  )}
+
+                  {zaiUsage.quotaLimits.mcp && (
+                    <UsageCard
+                      title="MCP Quota"
+                      subtitle={`${formatNumber(zaiUsage.quotaLimits.mcp.used)} / ${formatNumber(zaiUsage.quotaLimits.mcp.limit)} calls`}
+                      percentage={zaiUsage.quotaLimits.mcp.usedPercent}
+                      resetText={
+                        zaiUsage.quotaLimits.mcp.nextResetTime
+                          ? formatResetTime(zaiUsage.quotaLimits.mcp.nextResetTime, true)
+                          : undefined
+                      }
+                      stale={isZaiStale}
+                    />
+                  )}
+
+                  {zaiUsage.quotaLimits.planType && zaiUsage.quotaLimits.planType !== 'unknown' && (
+                    <div className="rounded-xl border border-border/40 bg-secondary/20 p-3">
+                      <p className="text-xs text-muted-foreground">
+                        Plan:{' '}
+                        <span className="text-foreground font-medium">
+                          {zaiUsage.quotaLimits.planType.charAt(0).toUpperCase() +
+                            zaiUsage.quotaLimits.planType.slice(1)}
+                        </span>
+                      </p>
+                    </div>
+                  )}
+                </>
+              ) : (
+                <div className="flex flex-col items-center justify-center py-6 text-center">
+                  <AlertTriangle className="w-8 h-8 text-yellow-500/80" />
+                  <p className="text-sm font-medium mt-3">No usage data available</p>
+                </div>
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="flex items-center justify-between px-4 py-2 bg-secondary/10 border-t border-border/50">
+              <a
+                href="https://z.ai"
+                target="_blank"
+                rel="noreferrer"
+                className="text-[10px] text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
+              >
+                z.ai <ExternalLink className="w-2.5 h-2.5" />
+              </a>
+              <span className="text-[10px] text-muted-foreground">Updates every minute</span>
+            </div>
+          </TabsContent>
+
+          {/* Gemini Tab Content */}
+          <TabsContent value="gemini" className="m-0">
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-3 border-b border-border/50 bg-secondary/10">
+              <div className="flex items-center gap-2">
+                <GeminiIcon className="w-4 h-4" />
+                <span className="text-sm font-semibold">Gemini Usage</span>
+              </div>
+              {geminiError && geminiError.code !== ERROR_CODES.NOT_AVAILABLE && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className={cn('h-6 w-6', geminiLoading && 'opacity-80')}
+                  onClick={() => !geminiLoading && refetchGemini()}
+                >
+                  <RefreshCw className="w-3.5 h-3.5" />
+                </Button>
+              )}
+            </div>
+
+            {/* Content */}
+            <div className="p-4 space-y-4">
+              {geminiError ? (
+                <div className="flex flex-col items-center justify-center py-6 text-center space-y-3">
+                  <AlertTriangle className="w-8 h-8 text-yellow-500/80" />
+                  <div className="space-y-1 flex flex-col items-center">
+                    <p className="text-sm font-medium">
+                      {geminiError.code === ERROR_CODES.NOT_AVAILABLE
+                        ? 'Gemini not configured'
+                        : geminiError.message}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {geminiError.code === ERROR_CODES.API_BRIDGE_UNAVAILABLE ? (
+                        'Ensure the Electron bridge is running or restart the app'
+                      ) : geminiError.code === ERROR_CODES.NOT_AVAILABLE ? (
+                        <>
+                          Run{' '}
+                          <code className="font-mono bg-muted px-1 rounded">gemini auth login</code>{' '}
+                          to authenticate with your Google account
+                        </>
+                      ) : (
+                        <>Check your Gemini CLI configuration</>
+                      )}
+                    </p>
+                  </div>
+                </div>
+              ) : !geminiUsage ? (
+                <div className="flex flex-col items-center justify-center py-8 space-y-2">
+                  <Spinner size="lg" />
+                  <p className="text-xs text-muted-foreground">Loading usage data...</p>
+                </div>
+              ) : geminiUsage.authenticated ? (
+                <>
+                  {/* Show Flash and Pro quota tiers */}
+                  {geminiUsage.flashQuota || geminiUsage.proQuota ? (
+                    <div className="grid grid-cols-2 gap-3">
+                      {geminiUsage.flashQuota && (
+                        <UsageCard
+                          title="Flash"
+                          subtitle="Flash models"
+                          percentage={geminiUsage.flashQuota.usedPercent}
+                          resetText={geminiUsage.flashQuota.resetText}
+                          stale={isGeminiStale}
+                        />
+                      )}
+                      {geminiUsage.proQuota && (
+                        <UsageCard
+                          title="Pro"
+                          subtitle="Pro models"
+                          percentage={geminiUsage.proQuota.usedPercent}
+                          resetText={geminiUsage.proQuota.resetText}
+                          stale={isGeminiStale}
+                        />
+                      )}
+                    </div>
+                  ) : (
+                    <>
+                      {/* No quota data available - show connected status */}
+                      <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+                        <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                          <CheckCircle className="w-5 h-5 text-emerald-500" />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <p className="text-sm font-medium text-emerald-400">Connected</p>
+                          <p className="text-xs text-emerald-400/70 mt-0.5">
+                            Authenticated via{' '}
+                            <span className="font-mono">
+                              {geminiUsage.authMethod === 'cli_login'
+                                ? 'CLI Login'
+                                : geminiUsage.authMethod === 'api_key_env'
+                                  ? 'API Key (Environment)'
+                                  : geminiUsage.authMethod === 'api_key'
+                                    ? 'API Key'
+                                    : 'Unknown'}
+                            </span>
+                          </p>
+                        </div>
+                      </div>
+
+                      <div className="rounded-xl border border-border/40 bg-secondary/20 p-3">
+                        <p className="text-xs text-muted-foreground">
+                          {geminiUsage.error ? (
+                            <>Quota API: {geminiUsage.error}</>
+                          ) : (
+                            <>No usage yet or quota data unavailable</>
+                          )}
+                        </p>
+                      </div>
+                    </>
+                  )}
+                </>
+              ) : (
+                <div className="flex flex-col items-center justify-center py-6 text-center">
+                  <AlertTriangle className="w-8 h-8 text-yellow-500/80" />
+                  <p className="text-sm font-medium mt-3">Not authenticated</p>
+                  <p className="text-xs text-muted-foreground mt-1">
+                    Run <code className="font-mono bg-muted px-1 rounded">gemini auth login</code>{' '}
+                    to authenticate
+                  </p>
+                </div>
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="flex items-center justify-between px-4 py-2 bg-secondary/10 border-t border-border/50">
+              <a
+                href="https://ai.google.dev"
+                target="_blank"
+                rel="noreferrer"
+                className="text-[10px] text-muted-foreground hover:text-foreground flex items-center gap-1 transition-colors"
+              >
+                Google AI <ExternalLink className="w-2.5 h-2.5" />
+              </a>
+              <span className="text-[10px] text-muted-foreground">Updates every minute</span>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-tools-view.tsx b/temp_repo/apps/ui/src/components/views/agent-tools-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..254f4e2df60c2c10aa4daab7fde1e9eeb43162a3
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-tools-view.tsx
@@ -0,0 +1,434 @@
+import { useState, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { useAppStore } from '@/store/app-store';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Terminal, CheckCircle, XCircle, Play, File, Pencil, Wrench } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { getElectronAPI } from '@/lib/electron';
+
+const logger = createLogger('AgentToolsView');
+
+interface ToolResult {
+  success: boolean;
+  output?: string;
+  error?: string;
+  timestamp: Date;
+}
+
+export function AgentToolsView() {
+  const { currentProject } = useAppStore();
+  const api = getElectronAPI();
+
+  // Read File Tool State
+  const [readFilePath, setReadFilePath] = useState('');
+  const [readFileResult, setReadFileResult] = useState<ToolResult | null>(null);
+  const [isReadingFile, setIsReadingFile] = useState(false);
+
+  // Write File Tool State
+  const [writeFilePath, setWriteFilePath] = useState('');
+  const [writeFileContent, setWriteFileContent] = useState('');
+  const [writeFileResult, setWriteFileResult] = useState<ToolResult | null>(null);
+  const [isWritingFile, setIsWritingFile] = useState(false);
+
+  // Terminal Tool State
+  const [terminalCommand, setTerminalCommand] = useState('ls');
+  const [terminalResult, setTerminalResult] = useState<ToolResult | null>(null);
+  const [isRunningCommand, setIsRunningCommand] = useState(false);
+
+  // Execute Read File
+  const handleReadFile = useCallback(async () => {
+    if (!readFilePath.trim()) return;
+
+    setIsReadingFile(true);
+    setReadFileResult(null);
+
+    try {
+      // Simulate agent requesting file read
+      logger.info(`[Agent Tool] Requesting to read file: ${readFilePath}`);
+
+      const result = await api.readFile(readFilePath);
+
+      if (result.success) {
+        setReadFileResult({
+          success: true,
+          output: result.content,
+          timestamp: new Date(),
+        });
+        logger.info(`[Agent Tool] File read successful: ${readFilePath}`);
+      } else {
+        setReadFileResult({
+          success: false,
+          error: result.error || 'Failed to read file',
+          timestamp: new Date(),
+        });
+        logger.info(`[Agent Tool] File read failed: ${result.error}`);
+      }
+    } catch (error) {
+      setReadFileResult({
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error',
+        timestamp: new Date(),
+      });
+    } finally {
+      setIsReadingFile(false);
+    }
+  }, [readFilePath, api]);
+
+  // Execute Write File
+  const handleWriteFile = useCallback(async () => {
+    if (!writeFilePath.trim() || !writeFileContent.trim()) return;
+
+    setIsWritingFile(true);
+    setWriteFileResult(null);
+
+    try {
+      // Simulate agent requesting file write
+      logger.info(`[Agent Tool] Requesting to write file: ${writeFilePath}`);
+
+      const result = await api.writeFile(writeFilePath, writeFileContent);
+
+      if (result.success) {
+        setWriteFileResult({
+          success: true,
+          output: `File written successfully: ${writeFilePath}`,
+          timestamp: new Date(),
+        });
+        logger.info(`[Agent Tool] File write successful: ${writeFilePath}`);
+      } else {
+        setWriteFileResult({
+          success: false,
+          error: result.error || 'Failed to write file',
+          timestamp: new Date(),
+        });
+        logger.info(`[Agent Tool] File write failed: ${result.error}`);
+      }
+    } catch (error) {
+      setWriteFileResult({
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error',
+        timestamp: new Date(),
+      });
+    } finally {
+      setIsWritingFile(false);
+    }
+  }, [writeFilePath, writeFileContent, api]);
+
+  // Execute Terminal Command
+  const handleRunCommand = useCallback(async () => {
+    if (!terminalCommand.trim()) return;
+
+    setIsRunningCommand(true);
+    setTerminalResult(null);
+
+    try {
+      // Terminal command simulation for demonstration purposes
+      logger.info(`[Agent Tool] Simulating command: ${terminalCommand}`);
+
+      // Simulated outputs for common commands (preview mode)
+      // In production, the agent executes commands via Claude SDK
+      const simulatedOutputs: Record<string, string> = {
+        ls: 'app_spec.txt\nfeatures\nnode_modules\npackage.json\nsrc\ntests\ntsconfig.json',
+        pwd: currentProject?.path || '/Users/demo/project',
+        'echo hello': 'hello',
+        whoami: 'automaker-agent',
+        date: new Date().toString(),
+        'cat package.json': '{\n  "name": "demo-project",\n  "version": "1.0.0"\n}',
+      };
+
+      // Simulate command execution delay
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      const output =
+        simulatedOutputs[terminalCommand.toLowerCase()] ||
+        `[Preview] ${terminalCommand}\n(Terminal commands are executed by the agent during feature implementation)`;
+
+      setTerminalResult({
+        success: true,
+        output: output,
+        timestamp: new Date(),
+      });
+      logger.info(`[Agent Tool] Command executed successfully: ${terminalCommand}`);
+    } catch (error) {
+      setTerminalResult({
+        success: false,
+        error: error instanceof Error ? error.message : 'Unknown error',
+        timestamp: new Date(),
+      });
+    } finally {
+      setIsRunningCommand(false);
+    }
+  }, [terminalCommand, currentProject]);
+
+  if (!currentProject) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="agent-tools-no-project">
+        <div className="text-center">
+          <Wrench className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
+          <h2 className="text-xl font-semibold mb-2">No Project Selected</h2>
+          <p className="text-muted-foreground">Open or create a project to test agent tools.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden content-bg" data-testid="agent-tools-view">
+      {/* Header */}
+      <div className="flex items-center gap-3 p-4 border-b border-border bg-glass backdrop-blur-md">
+        <Wrench className="w-5 h-5 text-primary" />
+        <div>
+          <h1 className="text-xl font-bold">Agent Tools</h1>
+          <p className="text-sm text-muted-foreground">
+            Test file system and terminal tools for {currentProject.name}
+          </p>
+        </div>
+      </div>
+
+      {/* Tools Grid */}
+      <div className="flex-1 overflow-y-auto p-4">
+        <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
+          {/* Read File Tool */}
+          <Card data-testid="read-file-tool">
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <File className="w-5 h-5 text-blue-500" />
+                <CardTitle className="text-lg">Read File</CardTitle>
+              </div>
+              <CardDescription>Agent requests to read a file from the filesystem</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="read-file-path">File Path</Label>
+                <Input
+                  id="read-file-path"
+                  placeholder="/path/to/file.txt"
+                  value={readFilePath}
+                  onChange={(e) => setReadFilePath(e.target.value)}
+                  data-testid="read-file-path-input"
+                />
+              </div>
+              <Button
+                onClick={handleReadFile}
+                disabled={isReadingFile || !readFilePath.trim()}
+                className="w-full"
+                data-testid="read-file-button"
+              >
+                {isReadingFile ? (
+                  <>
+                    <Spinner size="sm" className="mr-2" />
+                    Reading...
+                  </>
+                ) : (
+                  <>
+                    <Play className="w-4 h-4 mr-2" />
+                    Execute Read
+                  </>
+                )}
+              </Button>
+
+              {/* Result */}
+              {readFileResult && (
+                <div
+                  className={cn(
+                    'p-3 rounded-md border',
+                    readFileResult.success
+                      ? 'bg-green-500/10 border-green-500/20'
+                      : 'bg-red-500/10 border-red-500/20'
+                  )}
+                  data-testid="read-file-result"
+                >
+                  <div className="flex items-center gap-2 mb-2">
+                    {readFileResult.success ? (
+                      <CheckCircle className="w-4 h-4 text-green-500" />
+                    ) : (
+                      <XCircle className="w-4 h-4 text-red-500" />
+                    )}
+                    <span className="text-sm font-medium">
+                      {readFileResult.success ? 'Success' : 'Failed'}
+                    </span>
+                  </div>
+                  <pre className="text-xs overflow-auto max-h-40 whitespace-pre-wrap">
+                    {readFileResult.success ? readFileResult.output : readFileResult.error}
+                  </pre>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Write File Tool */}
+          <Card data-testid="write-file-tool">
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <Pencil className="w-5 h-5 text-green-500" />
+                <CardTitle className="text-lg">Write File</CardTitle>
+              </div>
+              <CardDescription>Agent requests to write content to a file</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="write-file-path">File Path</Label>
+                <Input
+                  id="write-file-path"
+                  placeholder="/path/to/file.txt"
+                  value={writeFilePath}
+                  onChange={(e) => setWriteFilePath(e.target.value)}
+                  data-testid="write-file-path-input"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="write-file-content">Content</Label>
+                <textarea
+                  id="write-file-content"
+                  placeholder="File content..."
+                  value={writeFileContent}
+                  onChange={(e) => setWriteFileContent(e.target.value)}
+                  className="w-full min-h-[100px] px-3 py-2 text-sm rounded-md border border-input bg-background resize-y"
+                  data-testid="write-file-content-input"
+                />
+              </div>
+              <Button
+                onClick={handleWriteFile}
+                disabled={isWritingFile || !writeFilePath.trim() || !writeFileContent.trim()}
+                className="w-full"
+                data-testid="write-file-button"
+              >
+                {isWritingFile ? (
+                  <>
+                    <Spinner size="sm" className="mr-2" />
+                    Writing...
+                  </>
+                ) : (
+                  <>
+                    <Play className="w-4 h-4 mr-2" />
+                    Execute Write
+                  </>
+                )}
+              </Button>
+
+              {/* Result */}
+              {writeFileResult && (
+                <div
+                  className={cn(
+                    'p-3 rounded-md border',
+                    writeFileResult.success
+                      ? 'bg-green-500/10 border-green-500/20'
+                      : 'bg-red-500/10 border-red-500/20'
+                  )}
+                  data-testid="write-file-result"
+                >
+                  <div className="flex items-center gap-2 mb-2">
+                    {writeFileResult.success ? (
+                      <CheckCircle className="w-4 h-4 text-green-500" />
+                    ) : (
+                      <XCircle className="w-4 h-4 text-red-500" />
+                    )}
+                    <span className="text-sm font-medium">
+                      {writeFileResult.success ? 'Success' : 'Failed'}
+                    </span>
+                  </div>
+                  <pre className="text-xs overflow-auto max-h-40 whitespace-pre-wrap">
+                    {writeFileResult.success ? writeFileResult.output : writeFileResult.error}
+                  </pre>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Terminal Tool */}
+          <Card data-testid="terminal-tool">
+            <CardHeader>
+              <div className="flex items-center gap-2">
+                <Terminal className="w-5 h-5 text-purple-500" />
+                <CardTitle className="text-lg">Run Terminal</CardTitle>
+              </div>
+              <CardDescription>Agent requests to execute a terminal command</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="terminal-command">Command</Label>
+                <Input
+                  id="terminal-command"
+                  placeholder="ls -la"
+                  value={terminalCommand}
+                  onChange={(e) => setTerminalCommand(e.target.value)}
+                  data-testid="terminal-command-input"
+                />
+              </div>
+              <Button
+                onClick={handleRunCommand}
+                disabled={isRunningCommand || !terminalCommand.trim()}
+                className="w-full"
+                data-testid="run-terminal-button"
+              >
+                {isRunningCommand ? (
+                  <>
+                    <Spinner size="sm" className="mr-2" />
+                    Running...
+                  </>
+                ) : (
+                  <>
+                    <Play className="w-4 h-4 mr-2" />
+                    Execute Command
+                  </>
+                )}
+              </Button>
+
+              {/* Result */}
+              {terminalResult && (
+                <div
+                  className={cn(
+                    'p-3 rounded-md border',
+                    terminalResult.success
+                      ? 'bg-green-500/10 border-green-500/20'
+                      : 'bg-red-500/10 border-red-500/20'
+                  )}
+                  data-testid="terminal-result"
+                >
+                  <div className="flex items-center gap-2 mb-2">
+                    {terminalResult.success ? (
+                      <CheckCircle className="w-4 h-4 text-green-500" />
+                    ) : (
+                      <XCircle className="w-4 h-4 text-red-500" />
+                    )}
+                    <span className="text-sm font-medium">
+                      {terminalResult.success ? 'Success' : 'Failed'}
+                    </span>
+                  </div>
+                  <pre className="text-xs overflow-auto max-h-40 whitespace-pre-wrap font-mono bg-black/50 text-green-400 p-2 rounded">
+                    $ {terminalCommand}
+                    {'\n'}
+                    {terminalResult.success ? terminalResult.output : terminalResult.error}
+                  </pre>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Tool Log Section */}
+        <Card className="mt-6" data-testid="tool-log">
+          <CardHeader>
+            <CardTitle className="text-lg">Tool Execution Log</CardTitle>
+            <CardDescription>View agent tool requests and responses</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2 text-sm">
+              <p className="text-muted-foreground">
+                Open your browser&apos;s developer console to see detailed agent tool logs.
+              </p>
+              <ul className="list-disc list-inside space-y-1 text-muted-foreground">
+                <li>Read File - Agent requests file content from filesystem</li>
+                <li>Write File - Agent writes content to specified path</li>
+                <li>Run Terminal - Agent executes shell commands</li>
+              </ul>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view.tsx b/temp_repo/apps/ui/src/components/views/agent-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..967cafd44c9fd0fd8fd6f23df8c157b4b19e2361
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view.tsx
@@ -0,0 +1,305 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { useElectronAgent } from '@/hooks/use-electron-agent';
+import { SessionManager } from '@/components/session-manager';
+
+// Extracted hooks
+import {
+  useAgentScroll,
+  useFileAttachments,
+  useAgentShortcuts,
+  useAgentSession,
+} from './agent-view/hooks';
+
+// Extracted components
+import { NoProjectState, AgentHeader, ChatArea } from './agent-view/components';
+import { AgentInputArea } from './agent-view/input-area';
+
+/** Tailwind lg breakpoint in pixels */
+const LG_BREAKPOINT = 1024;
+
+export function AgentView() {
+  const { currentProject, getCurrentWorktree } = useAppStore();
+  const [input, setInput] = useState('');
+  const [currentTool, setCurrentTool] = useState<string | null>(null);
+
+  // Get the current worktree to scope sessions and agent working directory
+  const currentWorktree = currentProject ? getCurrentWorktree(currentProject.path) : null;
+  const effectiveWorkingDirectory = currentWorktree?.path || currentProject?.path;
+  // Initialize session manager state - starts as true to match SSR
+  // Then updates on mount based on actual screen size to prevent hydration mismatch
+  const [showSessionManager, setShowSessionManager] = useState(true);
+
+  // Update session manager visibility based on screen size after mount and on resize
+  useEffect(() => {
+    const updateVisibility = () => {
+      const isDesktop = window.innerWidth >= LG_BREAKPOINT;
+      setShowSessionManager(isDesktop);
+    };
+
+    // Set initial value
+    updateVisibility();
+
+    // Listen for resize events
+    window.addEventListener('resize', updateVisibility);
+    return () => window.removeEventListener('resize', updateVisibility);
+  }, []);
+
+  // Input ref for auto-focus
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  // Ref for quick create session function from SessionManager
+  const quickCreateSessionRef = useRef<(() => Promise<void>) | null>(null);
+  // Guard to prevent concurrent invocations of handleCreateSessionFromEmptyState
+  const createSessionInFlightRef = useRef(false);
+
+  // Session management hook - scoped to current worktree
+  // Also handles model selection persistence per session
+  const { currentSessionId, handleSelectSession, modelSelection, setModelSelection } =
+    useAgentSession({
+      projectPath: currentProject?.path,
+      workingDirectory: effectiveWorkingDirectory,
+    });
+
+  // Use the Electron agent hook (only if we have a session)
+  const {
+    messages,
+    isProcessing,
+    isConnected,
+    sendMessage,
+    clearHistory,
+    stopExecution,
+    serverQueue,
+    addToServerQueue,
+    removeFromServerQueue,
+    clearServerQueue,
+  } = useElectronAgent({
+    sessionId: currentSessionId || '',
+    workingDirectory: effectiveWorkingDirectory,
+    model: modelSelection.model,
+    thinkingLevel: modelSelection.thinkingLevel,
+    onToolUse: (toolName) => {
+      setCurrentTool(toolName);
+      setTimeout(() => setCurrentTool(null), 2000);
+    },
+  });
+
+  // File attachments hook
+  const fileAttachments = useFileAttachments({
+    isProcessing,
+    isConnected,
+  });
+
+  // Scroll management hook
+  const { messagesContainerRef, handleScroll } = useAgentScroll({
+    messagesLength: messages.length,
+    currentSessionId,
+  });
+
+  // Keyboard shortcuts hook
+  useAgentShortcuts({
+    currentProject,
+    quickCreateSessionRef,
+  });
+
+  // Handle send message
+  const handleSend = useCallback(async () => {
+    const {
+      selectedImages,
+      selectedTextFiles,
+      setSelectedImages,
+      setSelectedTextFiles,
+      setShowImageDropZone,
+    } = fileAttachments;
+
+    if (!input.trim() && selectedImages.length === 0 && selectedTextFiles.length === 0) return;
+
+    const messageContent = input;
+    const messageImages = selectedImages;
+    const messageTextFiles = selectedTextFiles;
+
+    setInput('');
+    setSelectedImages([]);
+    setSelectedTextFiles([]);
+    setShowImageDropZone(false);
+
+    // If already processing, add to server queue instead
+    if (isProcessing) {
+      await addToServerQueue(messageContent, messageImages, messageTextFiles);
+    } else {
+      await sendMessage(messageContent, messageImages, messageTextFiles);
+    }
+  }, [input, fileAttachments, isProcessing, sendMessage, addToServerQueue]);
+
+  const handleClearChat = async () => {
+    if (!confirm('Are you sure you want to clear this conversation?')) return;
+    await clearHistory();
+  };
+
+  // Handle creating a new session from empty state.
+  // On mobile the SessionManager may be unmounted (hidden), clearing the ref.
+  // In that case, show it first and wait for the component to mount and
+  // re-populate quickCreateSessionRef before invoking it.
+  //
+  // A single requestAnimationFrame isn't always sufficient — React concurrent
+  // mode or slow devices may not have committed the SessionManager mount by
+  // the next frame. We use a double-RAF with a short retry loop to wait more
+  // robustly for the ref to be populated.
+  const handleCreateSessionFromEmptyState = useCallback(async () => {
+    if (createSessionInFlightRef.current) return;
+    createSessionInFlightRef.current = true;
+    try {
+      let createFn = quickCreateSessionRef.current;
+      if (!createFn) {
+        // SessionManager is likely unmounted on mobile — show it so it mounts
+        setShowSessionManager(true);
+        // Wait for mount: double RAF + retry loop (handles concurrent mode & slow devices)
+        const MAX_RETRIES = 5;
+        for (let i = 0; i < MAX_RETRIES; i++) {
+          await new Promise<void>((r) =>
+            requestAnimationFrame(() => requestAnimationFrame(() => r()))
+          );
+          createFn = quickCreateSessionRef.current;
+          if (createFn) break;
+          // Small delay between retries to give React time to commit
+          if (i < MAX_RETRIES - 1) {
+            await new Promise<void>((r) => setTimeout(r, 50));
+            createFn = quickCreateSessionRef.current;
+            if (createFn) break;
+          }
+        }
+      }
+      if (createFn) {
+        await createFn();
+      } else {
+        console.warn(
+          '[AgentView] quickCreateSessionRef was not populated after retries — SessionManager may not have mounted'
+        );
+      }
+    } finally {
+      createSessionInFlightRef.current = false;
+    }
+  }, []);
+
+  // Auto-focus input when session is selected/changed
+  useEffect(() => {
+    if (currentSessionId && inputRef.current) {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 200);
+    }
+  }, [currentSessionId]);
+
+  // Auto-close session manager on mobile when a session is selected
+  useEffect(() => {
+    if (currentSessionId && typeof window !== 'undefined' && window.innerWidth < 1024) {
+      setShowSessionManager(false);
+    }
+  }, [currentSessionId]);
+
+  // Show welcome message if no messages yet
+  const displayMessages =
+    messages.length === 0
+      ? [
+          {
+            id: 'welcome',
+            role: 'assistant' as const,
+            content:
+              "Hello! I'm the Automaker Agent. I can help you build software autonomously. I can read and modify files in this project, run commands, and execute tests. What would you like to create today?",
+            timestamp: new Date().toISOString(),
+          },
+        ]
+      : messages;
+
+  if (!currentProject) {
+    return <NoProjectState />;
+  }
+
+  return (
+    <div className="flex-1 flex overflow-hidden bg-background" data-testid="agent-view">
+      {/* Mobile backdrop overlay for Session Manager */}
+      {showSessionManager && currentProject && (
+        <div
+          className="fixed inset-0 bg-black/50 z-20 lg:hidden"
+          onClick={() => setShowSessionManager(false)}
+          data-testid="session-manager-backdrop"
+        />
+      )}
+
+      {/* Session Manager Sidebar */}
+      {showSessionManager && currentProject && (
+        <div className="fixed inset-y-0 left-0 w-72 z-30 pt-[env(safe-area-inset-top,0px)] lg:pt-0 lg:relative lg:w-80 lg:z-auto border-r border-border shrink-0 bg-card">
+          <SessionManager
+            currentSessionId={currentSessionId}
+            onSelectSession={handleSelectSession}
+            projectPath={currentProject.path}
+            workingDirectory={effectiveWorkingDirectory}
+            isCurrentSessionThinking={isProcessing}
+            onQuickCreateRef={quickCreateSessionRef}
+          />
+        </div>
+      )}
+
+      {/* Chat Area */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Header */}
+        <AgentHeader
+          projectName={currentProject.name}
+          currentSessionId={currentSessionId}
+          isConnected={isConnected}
+          isProcessing={isProcessing}
+          currentTool={currentTool}
+          messagesCount={messages.length}
+          showSessionManager={showSessionManager}
+          onToggleSessionManager={() => setShowSessionManager(!showSessionManager)}
+          onClearChat={handleClearChat}
+          worktreeBranch={currentWorktree?.branch}
+        />
+
+        {/* Messages */}
+        <ChatArea
+          currentSessionId={currentSessionId}
+          messages={displayMessages}
+          isProcessing={isProcessing}
+          showSessionManager={showSessionManager}
+          messagesContainerRef={messagesContainerRef}
+          onScroll={handleScroll}
+          onShowSessionManager={() => setShowSessionManager(true)}
+          onCreateSession={handleCreateSessionFromEmptyState}
+        />
+
+        {/* Input Area */}
+        {currentSessionId && (
+          <AgentInputArea
+            input={input}
+            onInputChange={setInput}
+            onSend={handleSend}
+            onStop={stopExecution}
+            modelSelection={modelSelection}
+            onModelSelect={setModelSelection}
+            isProcessing={isProcessing}
+            isConnected={isConnected}
+            selectedImages={fileAttachments.selectedImages}
+            selectedTextFiles={fileAttachments.selectedTextFiles}
+            showImageDropZone={fileAttachments.showImageDropZone}
+            isDragOver={fileAttachments.isDragOver}
+            onImagesSelected={fileAttachments.handleImagesSelected}
+            onToggleImageDropZone={fileAttachments.toggleImageDropZone}
+            onRemoveImage={fileAttachments.removeImage}
+            onRemoveTextFile={fileAttachments.removeTextFile}
+            onClearAllFiles={fileAttachments.clearAllFiles}
+            onDragEnter={fileAttachments.handleDragEnter}
+            onDragLeave={fileAttachments.handleDragLeave}
+            onDragOver={fileAttachments.handleDragOver}
+            onDrop={fileAttachments.handleDrop}
+            onPaste={fileAttachments.handlePaste}
+            serverQueue={serverQueue}
+            onRemoveFromQueue={removeFromServerQueue}
+            onClearQueue={clearServerQueue}
+            inputRef={inputRef}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/components/agent-header.tsx b/temp_repo/apps/ui/src/components/views/agent-view/components/agent-header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a1e7aa696b93a1180679393100ae5f791df3bc61
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/components/agent-header.tsx
@@ -0,0 +1,89 @@
+import { Bot, PanelLeftClose, PanelLeft, Wrench, Trash2, GitBranch } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface AgentHeaderProps {
+  projectName: string;
+  currentSessionId: string | null;
+  isConnected: boolean;
+  isProcessing: boolean;
+  currentTool: string | null;
+  messagesCount: number;
+  showSessionManager: boolean;
+  onToggleSessionManager: () => void;
+  onClearChat: () => void;
+  worktreeBranch?: string;
+}
+
+export function AgentHeader({
+  projectName,
+  currentSessionId,
+  isConnected,
+  isProcessing,
+  currentTool,
+  messagesCount,
+  showSessionManager,
+  onToggleSessionManager,
+  onClearChat,
+  worktreeBranch,
+}: AgentHeaderProps) {
+  return (
+    <div className="flex items-center justify-between gap-2 px-3 py-3 sm:px-6 sm:py-4 border-b border-border bg-card/50 backdrop-blur-sm">
+      <div className="flex items-center gap-2 sm:gap-4 min-w-0">
+        <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
+          <Bot className="w-5 h-5 text-primary" />
+        </div>
+        <div className="min-w-0">
+          <h1 className="text-lg font-semibold text-foreground">AI Agent</h1>
+          <div className="flex items-center gap-2 text-sm text-muted-foreground min-w-0">
+            <span className="truncate">
+              {projectName}
+              {currentSessionId && !isConnected && ' - Connecting...'}
+            </span>
+            {worktreeBranch && (
+              <span className="inline-flex items-center gap-1 text-xs bg-muted/50 px-2 py-0.5 rounded-full border border-border shrink-0">
+                <GitBranch className="w-3 h-3 shrink-0" />
+                <span className="max-w-[100px] sm:max-w-[180px] truncate">{worktreeBranch}</span>
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Status indicators & actions */}
+      <div className="flex items-center gap-1 sm:gap-3 shrink-0">
+        {currentTool && (
+          <div className="hidden sm:flex items-center gap-2 text-xs text-muted-foreground bg-muted/50 px-3 py-1.5 rounded-full border border-border">
+            <Wrench className="w-3 h-3 text-primary" />
+            <span className="font-medium">{currentTool}</span>
+          </div>
+        )}
+        {currentSessionId && messagesCount > 0 && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClearChat}
+            disabled={isProcessing}
+            aria-label="Clear chat"
+            className="text-muted-foreground hover:text-foreground h-8 w-8 p-0 sm:w-auto sm:px-3"
+          >
+            <Trash2 className="w-4 h-4 sm:mr-2" />
+            <span className="hidden sm:inline">Clear</span>
+          </Button>
+        )}
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onToggleSessionManager}
+          className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+          aria-label={showSessionManager ? 'Hide sessions panel' : 'Show sessions panel'}
+        >
+          {showSessionManager ? (
+            <PanelLeftClose className="w-4 h-4" />
+          ) : (
+            <PanelLeft className="w-4 h-4" />
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/components/chat-area.tsx b/temp_repo/apps/ui/src/components/views/agent-view/components/chat-area.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a7a732fec1b35cbff279b3cb5f0db19f8e7f3522
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/components/chat-area.tsx
@@ -0,0 +1,53 @@
+import type { ImageAttachment } from '@/store/app-store';
+import { MessageList } from './message-list';
+import { NoSessionState } from './empty-states';
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: string;
+  isError?: boolean;
+  images?: ImageAttachment[];
+}
+
+interface ChatAreaProps {
+  currentSessionId: string | null;
+  messages: Message[];
+  isProcessing: boolean;
+  showSessionManager: boolean;
+  messagesContainerRef: React.RefObject<HTMLDivElement | null>;
+  onScroll: () => void;
+  onShowSessionManager: () => void;
+  onCreateSession?: () => void;
+}
+
+export function ChatArea({
+  currentSessionId,
+  messages,
+  isProcessing,
+  showSessionManager,
+  messagesContainerRef,
+  onScroll,
+  onShowSessionManager,
+  onCreateSession,
+}: ChatAreaProps) {
+  if (!currentSessionId) {
+    return (
+      <NoSessionState
+        showSessionManager={showSessionManager}
+        onShowSessionManager={onShowSessionManager}
+        onCreateSession={onCreateSession}
+      />
+    );
+  }
+
+  return (
+    <MessageList
+      messages={messages}
+      isProcessing={isProcessing}
+      messagesContainerRef={messagesContainerRef}
+      onScroll={onScroll}
+    />
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/components/empty-states.tsx b/temp_repo/apps/ui/src/components/views/agent-view/components/empty-states.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3385acfcb42f6e52a1e5697de9e60bbe8ca858a2
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/components/empty-states.tsx
@@ -0,0 +1,67 @@
+import { Sparkles, Bot, PanelLeft, Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export function NoProjectState() {
+  return (
+    <div
+      className="flex-1 flex items-center justify-center bg-background"
+      data-testid="agent-view-no-project"
+    >
+      <div className="text-center max-w-md">
+        <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-6">
+          <Sparkles className="w-8 h-8 text-primary" />
+        </div>
+        <h2 className="text-xl font-semibold mb-3 text-foreground">No Project Selected</h2>
+        <p className="text-muted-foreground leading-relaxed">
+          Open or create a project to start working with the AI agent.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+interface NoSessionStateProps {
+  showSessionManager: boolean;
+  onShowSessionManager: () => void;
+  onCreateSession?: () => void;
+}
+
+export function NoSessionState({
+  showSessionManager,
+  onShowSessionManager,
+  onCreateSession,
+}: NoSessionStateProps) {
+  return (
+    <div
+      className="flex-1 flex items-center justify-center bg-background"
+      data-testid="no-session-placeholder"
+    >
+      <div className="text-center max-w-md">
+        <div className="w-16 h-16 rounded-2xl bg-muted/50 flex items-center justify-center mx-auto mb-6">
+          <Bot className="w-8 h-8 text-muted-foreground" />
+        </div>
+        <h2 className="text-lg font-semibold mb-3 text-foreground">No Session Selected</h2>
+        <p className="text-sm text-muted-foreground mb-6 leading-relaxed">
+          Create or select a session to start chatting with the AI agent
+        </p>
+        <div className="flex items-center justify-center gap-3">
+          {onCreateSession && (
+            <Button
+              onClick={onCreateSession}
+              variant="default"
+              className="gap-2"
+              data-testid="empty-state-new-session-button"
+            >
+              <Plus className="w-4 h-4" />
+              New Session
+            </Button>
+          )}
+          <Button onClick={onShowSessionManager} variant="outline" className="gap-2">
+            <PanelLeft className="w-4 h-4" />
+            {showSessionManager ? 'View' : 'Show'} Sessions
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/components/index.ts b/temp_repo/apps/ui/src/components/views/agent-view/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c7d3e30c9fa296ef8b897cbbb82e3b1e8d55f37e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/components/index.ts
@@ -0,0 +1,6 @@
+export { ThinkingIndicator } from './thinking-indicator';
+export { NoProjectState, NoSessionState } from './empty-states';
+export { MessageBubble } from './message-bubble';
+export { MessageList } from './message-list';
+export { AgentHeader } from './agent-header';
+export { ChatArea } from './chat-area';
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/components/message-bubble.tsx b/temp_repo/apps/ui/src/components/views/agent-view/components/message-bubble.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a8eddfad1a0239775d7b0f13aca91cda0f736acd
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/components/message-bubble.tsx
@@ -0,0 +1,129 @@
+import { Bot, User, ImageIcon, AlertCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Markdown } from '@/components/ui/markdown';
+import type { ImageAttachment } from '@/store/app-store';
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: string;
+  images?: ImageAttachment[];
+  isError?: boolean;
+}
+
+interface MessageBubbleProps {
+  message: Message;
+}
+
+export function MessageBubble({ message }: MessageBubbleProps) {
+  const isError = message.isError && message.role === 'assistant';
+
+  return (
+    <div
+      className={cn(
+        'flex gap-4 max-w-4xl',
+        message.role === 'user' ? 'flex-row-reverse ml-auto' : ''
+      )}
+    >
+      {/* Avatar */}
+      <div
+        className={cn(
+          'w-9 h-9 rounded-xl flex items-center justify-center shrink-0 shadow-sm',
+          isError
+            ? 'bg-red-500/10 ring-1 ring-red-500/20'
+            : message.role === 'assistant'
+              ? 'bg-primary/10 ring-1 ring-primary/20'
+              : 'bg-muted ring-1 ring-border'
+        )}
+      >
+        {isError ? (
+          <AlertCircle className="w-4 h-4 text-red-500" />
+        ) : message.role === 'assistant' ? (
+          <Bot className="w-4 h-4 text-primary" />
+        ) : (
+          <User className="w-4 h-4 text-muted-foreground" />
+        )}
+      </div>
+
+      {/* Message Bubble */}
+      <div
+        className={cn(
+          'flex-1 max-w-[85%] rounded-2xl px-4 py-3 shadow-sm',
+          isError
+            ? 'bg-red-500/10 border border-red-500/30'
+            : message.role === 'user'
+              ? 'bg-primary text-primary-foreground'
+              : 'bg-card border border-border'
+        )}
+      >
+        {message.role === 'assistant' ? (
+          <Markdown
+            className={cn(
+              'text-sm prose-p:leading-relaxed prose-headings:text-foreground prose-strong:text-foreground prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded',
+              isError
+                ? 'text-red-600 dark:text-red-400 prose-code:text-red-600 dark:prose-code:text-red-400 prose-code:bg-red-500/10'
+                : 'text-foreground prose-code:text-primary prose-code:bg-muted'
+            )}
+          >
+            {message.content}
+          </Markdown>
+        ) : (
+          <p className="text-sm whitespace-pre-wrap leading-relaxed">{message.content}</p>
+        )}
+
+        {/* Display attached images for user messages */}
+        {message.role === 'user' && message.images && message.images.length > 0 && (
+          <div className="mt-3 space-y-2">
+            <div className="flex items-center gap-1.5 text-xs text-primary-foreground/80">
+              <ImageIcon className="w-3 h-3" />
+              <span>
+                {message.images.length} image
+                {message.images.length > 1 ? 's' : ''} attached
+              </span>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {message.images.map((image, index) => {
+                // Construct proper data URL from base64 data and mime type
+                const dataUrl = image.data.startsWith('data:')
+                  ? image.data
+                  : `data:${image.mimeType || 'image/png'};base64,${image.data}`;
+                return (
+                  <div
+                    key={image.id || `img-${index}`}
+                    className="relative group rounded-lg overflow-hidden border border-primary-foreground/20 bg-primary-foreground/10"
+                  >
+                    <img
+                      src={dataUrl}
+                      alt={image.filename || `Attached image ${index + 1}`}
+                      className="w-20 h-20 object-cover hover:opacity-90 transition-opacity"
+                    />
+                    <div className="absolute bottom-0 left-0 right-0 bg-black/50 px-1.5 py-0.5 text-[9px] text-white truncate">
+                      {image.filename || `Image ${index + 1}`}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        <p
+          className={cn(
+            'text-[11px] mt-2 font-medium',
+            isError
+              ? 'text-red-500/70'
+              : message.role === 'user'
+                ? 'text-primary-foreground/70'
+                : 'text-muted-foreground'
+          )}
+        >
+          {new Date(message.timestamp).toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit',
+          })}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/components/message-list.tsx b/temp_repo/apps/ui/src/components/views/agent-view/components/message-list.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5bb030f43ee33c1e80d3cbbda5d43d94a931f7ad
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/components/message-list.tsx
@@ -0,0 +1,41 @@
+import type { ImageAttachment } from '@/store/app-store';
+import { MessageBubble } from './message-bubble';
+import { ThinkingIndicator } from './thinking-indicator';
+
+interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: string;
+  images?: ImageAttachment[];
+}
+
+interface MessageListProps {
+  messages: Message[];
+  isProcessing: boolean;
+  messagesContainerRef: React.RefObject<HTMLDivElement | null>;
+  onScroll: () => void;
+}
+
+export function MessageList({
+  messages,
+  isProcessing,
+  messagesContainerRef,
+  onScroll,
+}: MessageListProps) {
+  return (
+    <div
+      ref={messagesContainerRef}
+      className="flex-1 overflow-y-auto px-6 py-6 space-y-6 scroll-smooth"
+      data-testid="message-list"
+      onScroll={onScroll}
+    >
+      {messages.map((message) => (
+        <MessageBubble key={message.id} message={message} />
+      ))}
+
+      {/* Thinking Indicator */}
+      {isProcessing && <ThinkingIndicator />}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/components/thinking-indicator.tsx b/temp_repo/apps/ui/src/components/views/agent-view/components/thinking-indicator.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ff2965d5cba5ad49b51ceed09ffdd192f5721bd5
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/components/thinking-indicator.tsx
@@ -0,0 +1,18 @@
+import { Bot } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+
+export function ThinkingIndicator() {
+  return (
+    <div className="flex gap-4 max-w-4xl">
+      <div className="w-9 h-9 rounded-xl bg-primary/10 ring-1 ring-primary/20 flex items-center justify-center shrink-0 shadow-sm">
+        <Bot className="w-4 h-4 text-primary" />
+      </div>
+      <div className="bg-card border border-border rounded-2xl px-4 py-3 shadow-sm">
+        <div className="flex items-center gap-3">
+          <Spinner size="sm" />
+          <span className="text-sm text-muted-foreground">Thinking...</span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/hooks/index.ts b/temp_repo/apps/ui/src/components/views/agent-view/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..48c3c9712ec2b1b0e5a51332a99ffbdfa9b0eb55
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/hooks/index.ts
@@ -0,0 +1,4 @@
+export { useAgentScroll } from './use-agent-scroll';
+export { useFileAttachments } from './use-file-attachments';
+export { useAgentShortcuts } from './use-agent-shortcuts';
+export { useAgentSession } from './use-agent-session';
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/hooks/use-agent-scroll.ts b/temp_repo/apps/ui/src/components/views/agent-view/hooks/use-agent-scroll.ts
new file mode 100644
index 0000000000000000000000000000000000000000..709738a5080c5f7a749e7d3ea92fbe8715e1671f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/hooks/use-agent-scroll.ts
@@ -0,0 +1,78 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+
+interface UseAgentScrollOptions {
+  messagesLength: number;
+  currentSessionId: string | null;
+}
+
+interface UseAgentScrollResult {
+  messagesContainerRef: React.RefObject<HTMLDivElement | null>;
+  isUserAtBottom: boolean;
+  handleScroll: () => void;
+  scrollToBottom: (behavior?: ScrollBehavior) => void;
+}
+
+export function useAgentScroll({
+  messagesLength,
+  currentSessionId,
+}: UseAgentScrollOptions): UseAgentScrollResult {
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+  const [isUserAtBottom, setIsUserAtBottom] = useState(true);
+
+  // Scroll position detection
+  const checkIfUserIsAtBottom = useCallback(() => {
+    const container = messagesContainerRef.current;
+    if (!container) return;
+
+    const threshold = 50; // 50px threshold for "near bottom"
+    const isAtBottom =
+      container.scrollHeight - container.scrollTop - container.clientHeight <= threshold;
+
+    setIsUserAtBottom(isAtBottom);
+  }, []);
+
+  // Scroll to bottom function
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
+    const container = messagesContainerRef.current;
+    if (!container) return;
+
+    container.scrollTo({
+      top: container.scrollHeight,
+      behavior: behavior,
+    });
+  }, []);
+
+  // Handle scroll events
+  const handleScroll = useCallback(() => {
+    checkIfUserIsAtBottom();
+  }, [checkIfUserIsAtBottom]);
+
+  // Auto-scroll effect when messages change
+  useEffect(() => {
+    // Only auto-scroll if user was already at bottom
+    if (isUserAtBottom && messagesLength > 0) {
+      // Use a small delay to ensure DOM is updated
+      setTimeout(() => {
+        scrollToBottom('smooth');
+      }, 100);
+    }
+  }, [messagesLength, isUserAtBottom, scrollToBottom]);
+
+  // Initial scroll to bottom when session changes
+  useEffect(() => {
+    if (currentSessionId && messagesLength > 0) {
+      // Scroll immediately without animation when switching sessions
+      setTimeout(() => {
+        scrollToBottom('auto');
+        setIsUserAtBottom(true);
+      }, 100);
+    }
+  }, [currentSessionId, scrollToBottom, messagesLength]);
+
+  return {
+    messagesContainerRef,
+    isUserAtBottom,
+    handleScroll,
+    scrollToBottom,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/hooks/use-agent-session.ts b/temp_repo/apps/ui/src/components/views/agent-view/hooks/use-agent-session.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f4c2d2a047ef97d621d268ab9ae1d53cb85811ca
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/hooks/use-agent-session.ts
@@ -0,0 +1,144 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import type { PhaseModelEntry } from '@automaker/types';
+import { useAppStore } from '@/store/app-store';
+import { useShallow } from 'zustand/react/shallow';
+
+const logger = createLogger('AgentSession');
+
+// Default model selection when none is persisted
+const DEFAULT_MODEL_SELECTION: PhaseModelEntry = { model: 'claude-sonnet' };
+
+interface UseAgentSessionOptions {
+  projectPath: string | undefined;
+  workingDirectory?: string; // Current worktree path for per-worktree session persistence
+}
+
+interface UseAgentSessionResult {
+  currentSessionId: string | null;
+  handleSelectSession: (sessionId: string | null) => void;
+  // Model selection persistence
+  modelSelection: PhaseModelEntry;
+  setModelSelection: (model: PhaseModelEntry) => void;
+}
+
+export function useAgentSession({
+  projectPath,
+  workingDirectory,
+}: UseAgentSessionOptions): UseAgentSessionResult {
+  const {
+    setLastSelectedSession,
+    getLastSelectedSession,
+    setAgentModelForSession,
+    getAgentModelForSession,
+  } = useAppStore(
+    useShallow((state) => ({
+      setLastSelectedSession: state.setLastSelectedSession,
+      getLastSelectedSession: state.getLastSelectedSession,
+      setAgentModelForSession: state.setAgentModelForSession,
+      getAgentModelForSession: state.getAgentModelForSession,
+    }))
+  );
+  const [currentSessionId, setCurrentSessionId] = useState<string | null>(null);
+  const [modelSelection, setModelSelectionState] =
+    useState<PhaseModelEntry>(DEFAULT_MODEL_SELECTION);
+
+  // Track if initial session has been loaded
+  const initialSessionLoadedRef = useRef(false);
+
+  // Use workingDirectory as the persistence key so sessions are scoped per worktree
+  const persistenceKey = workingDirectory || projectPath;
+
+  /**
+   * Fetch persisted model for sessionId and update local state, or fall back to default.
+   */
+  const restoreModelForSession = useCallback(
+    (sessionId: string) => {
+      const persistedModel = getAgentModelForSession(sessionId);
+      if (persistedModel) {
+        logger.debug('Restoring model selection for session:', sessionId, persistedModel);
+        setModelSelectionState(persistedModel);
+      } else {
+        setModelSelectionState(DEFAULT_MODEL_SELECTION);
+      }
+    },
+    [getAgentModelForSession]
+  );
+
+  // Handle session selection with persistence
+  const handleSelectSession = useCallback(
+    (sessionId: string | null) => {
+      setCurrentSessionId(sessionId);
+      // Persist the selection for this worktree/project
+      if (persistenceKey) {
+        setLastSelectedSession(persistenceKey, sessionId);
+      }
+      // Restore model selection for this session if available
+      if (sessionId) {
+        restoreModelForSession(sessionId);
+      }
+    },
+    [persistenceKey, setLastSelectedSession, restoreModelForSession]
+  );
+
+  // Wrapper for setModelSelection that also persists
+  const setModelSelection = useCallback(
+    (model: PhaseModelEntry) => {
+      setModelSelectionState(model);
+      // Persist model selection for current session.
+      // If currentSessionId is null (no active session), we only update local state
+      // and skip persistence — this is intentional because the model picker should be
+      // disabled (or hidden) in the UI whenever there is no active session, so this
+      // path is only reached if the UI allows selection before a session is established.
+      if (currentSessionId) {
+        setAgentModelForSession(currentSessionId, model);
+      }
+    },
+    [currentSessionId, setAgentModelForSession]
+  );
+
+  // Track the previous persistence key to detect actual changes
+  const prevPersistenceKeyRef = useRef(persistenceKey);
+
+  // Restore last selected session when switching to Agent view or when worktree changes
+  useEffect(() => {
+    // Detect if persistenceKey actually changed (worktree/project switch)
+    const persistenceKeyChanged = prevPersistenceKeyRef.current !== persistenceKey;
+
+    if (persistenceKeyChanged) {
+      // Reset state when switching worktree/project
+      prevPersistenceKeyRef.current = persistenceKey;
+      initialSessionLoadedRef.current = false;
+      setCurrentSessionId(null);
+      setModelSelectionState(DEFAULT_MODEL_SELECTION);
+
+      if (!persistenceKey) {
+        // No project, nothing to restore
+        return;
+      }
+    }
+
+    if (!persistenceKey) {
+      return;
+    }
+
+    // Only restore once per persistence key
+    if (initialSessionLoadedRef.current) return;
+    initialSessionLoadedRef.current = true;
+
+    const lastSessionId = getLastSelectedSession(persistenceKey);
+    if (lastSessionId) {
+      logger.debug('Restoring last selected session:', lastSessionId);
+      setCurrentSessionId(lastSessionId);
+      // Also restore model selection for this session
+      restoreModelForSession(lastSessionId);
+    }
+  }, [persistenceKey, getLastSelectedSession, restoreModelForSession]);
+
+  return {
+    currentSessionId,
+    handleSelectSession,
+    modelSelection,
+    setModelSelection,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/hooks/use-agent-shortcuts.ts b/temp_repo/apps/ui/src/components/views/agent-view/hooks/use-agent-shortcuts.ts
new file mode 100644
index 0000000000000000000000000000000000000000..00fd5a5ee83fac64da9e4b379626885ff93d5d72
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/hooks/use-agent-shortcuts.ts
@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+import {
+  useKeyboardShortcuts,
+  useKeyboardShortcutsConfig,
+  type KeyboardShortcut,
+} from '@/hooks/use-keyboard-shortcuts';
+
+interface UseAgentShortcutsOptions {
+  currentProject: { path: string; name: string } | null;
+  quickCreateSessionRef: React.MutableRefObject<(() => Promise<void>) | null>;
+}
+
+export function useAgentShortcuts({
+  currentProject,
+  quickCreateSessionRef,
+}: UseAgentShortcutsOptions): void {
+  const shortcuts = useKeyboardShortcutsConfig();
+
+  // Keyboard shortcuts for agent view
+  const agentShortcuts: KeyboardShortcut[] = useMemo(() => {
+    const shortcutsList: KeyboardShortcut[] = [];
+
+    // New session shortcut - only when in agent view with a project
+    if (currentProject) {
+      shortcutsList.push({
+        key: shortcuts.newSession,
+        action: () => {
+          if (quickCreateSessionRef.current) {
+            quickCreateSessionRef.current();
+          }
+        },
+        description: 'Create new session',
+      });
+    }
+
+    return shortcutsList;
+  }, [currentProject, shortcuts, quickCreateSessionRef]);
+
+  // Register keyboard shortcuts
+  useKeyboardShortcuts(agentShortcuts);
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/hooks/use-file-attachments.ts b/temp_repo/apps/ui/src/components/views/agent-view/hooks/use-file-attachments.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ee37d749c4a4e4c85fbfdfa96337803991e5c94e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/hooks/use-file-attachments.ts
@@ -0,0 +1,291 @@
+import { useState, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import type { ImageAttachment, TextFileAttachment } from '@/store/app-store';
+
+const logger = createLogger('FileAttachments');
+import {
+  fileToBase64,
+  generateImageId,
+  generateFileId,
+  validateImageFile,
+  validateTextFile,
+  isTextFile,
+  isImageFile,
+  fileToText,
+  getTextFileMimeType,
+  DEFAULT_MAX_FILE_SIZE,
+  DEFAULT_MAX_FILES,
+} from '@/lib/image-utils';
+
+interface UseFileAttachmentsOptions {
+  isProcessing: boolean;
+  isConnected: boolean;
+}
+
+interface UseFileAttachmentsResult {
+  selectedImages: ImageAttachment[];
+  selectedTextFiles: TextFileAttachment[];
+  showImageDropZone: boolean;
+  isDragOver: boolean;
+  handleImagesSelected: (images: ImageAttachment[]) => void;
+  toggleImageDropZone: () => void;
+  processDroppedFiles: (files: FileList) => Promise<void>;
+  removeImage: (imageId: string) => void;
+  removeTextFile: (fileId: string) => void;
+  handleDragEnter: (e: React.DragEvent) => void;
+  handleDragLeave: (e: React.DragEvent) => void;
+  handleDragOver: (e: React.DragEvent) => void;
+  handleDrop: (e: React.DragEvent) => Promise<void>;
+  handlePaste: (e: React.ClipboardEvent) => Promise<void>;
+  clearAllFiles: () => void;
+  setSelectedImages: React.Dispatch<React.SetStateAction<ImageAttachment[]>>;
+  setSelectedTextFiles: React.Dispatch<React.SetStateAction<TextFileAttachment[]>>;
+  setShowImageDropZone: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export function useFileAttachments({
+  isProcessing,
+  isConnected,
+}: UseFileAttachmentsOptions): UseFileAttachmentsResult {
+  const [selectedImages, setSelectedImages] = useState<ImageAttachment[]>([]);
+  const [selectedTextFiles, setSelectedTextFiles] = useState<TextFileAttachment[]>([]);
+  const [showImageDropZone, setShowImageDropZone] = useState(false);
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const handleImagesSelected = useCallback((images: ImageAttachment[]) => {
+    setSelectedImages(images);
+  }, []);
+
+  const toggleImageDropZone = useCallback(() => {
+    setShowImageDropZone((prev) => !prev);
+  }, []);
+
+  // Process dropped files (images and text files)
+  const processDroppedFiles = useCallback(
+    async (files: FileList) => {
+      if (isProcessing) return;
+
+      const newImages: ImageAttachment[] = [];
+      const newTextFiles: TextFileAttachment[] = [];
+      const errors: string[] = [];
+
+      for (const file of Array.from(files)) {
+        // Check if it's a text file
+        if (isTextFile(file)) {
+          const validation = validateTextFile(file);
+          if (!validation.isValid) {
+            errors.push(validation.error!);
+            continue;
+          }
+
+          // Check if we've reached max files
+          const totalFiles =
+            newImages.length +
+            selectedImages.length +
+            newTextFiles.length +
+            selectedTextFiles.length;
+          if (totalFiles >= DEFAULT_MAX_FILES) {
+            errors.push(`Maximum ${DEFAULT_MAX_FILES} files allowed.`);
+            break;
+          }
+
+          try {
+            const content = await fileToText(file);
+            const textFileAttachment: TextFileAttachment = {
+              id: generateFileId(),
+              content,
+              mimeType: getTextFileMimeType(file.name),
+              filename: file.name,
+              size: file.size,
+            };
+            newTextFiles.push(textFileAttachment);
+          } catch {
+            errors.push(`${file.name}: Failed to read text file.`);
+          }
+        }
+        // Check if it's an image file
+        else if (isImageFile(file)) {
+          const validation = validateImageFile(file, DEFAULT_MAX_FILE_SIZE);
+          if (!validation.isValid) {
+            errors.push(validation.error!);
+            continue;
+          }
+
+          // Check if we've reached max files
+          const totalFiles =
+            newImages.length +
+            selectedImages.length +
+            newTextFiles.length +
+            selectedTextFiles.length;
+          if (totalFiles >= DEFAULT_MAX_FILES) {
+            errors.push(`Maximum ${DEFAULT_MAX_FILES} files allowed.`);
+            break;
+          }
+
+          try {
+            const base64 = await fileToBase64(file);
+            const imageAttachment: ImageAttachment = {
+              id: generateImageId(),
+              data: base64,
+              mimeType: file.type,
+              filename: file.name,
+              size: file.size,
+            };
+            newImages.push(imageAttachment);
+          } catch {
+            errors.push(`${file.name}: Failed to process image.`);
+          }
+        } else {
+          errors.push(`${file.name}: Unsupported file type. Use images, .txt, or .md files.`);
+        }
+      }
+
+      if (errors.length > 0) {
+        logger.warn('File upload errors:', errors);
+      }
+
+      if (newImages.length > 0) {
+        setSelectedImages((prev) => [...prev, ...newImages]);
+      }
+
+      if (newTextFiles.length > 0) {
+        setSelectedTextFiles((prev) => [...prev, ...newTextFiles]);
+      }
+    },
+    [isProcessing, selectedImages, selectedTextFiles]
+  );
+
+  // Remove individual image
+  const removeImage = useCallback((imageId: string) => {
+    setSelectedImages((prev) => prev.filter((img) => img.id !== imageId));
+  }, []);
+
+  // Remove individual text file
+  const removeTextFile = useCallback((fileId: string) => {
+    setSelectedTextFiles((prev) => prev.filter((file) => file.id !== fileId));
+  }, []);
+
+  // Clear all files
+  const clearAllFiles = useCallback(() => {
+    setSelectedImages([]);
+    setSelectedTextFiles([]);
+  }, []);
+
+  // Drag and drop handlers
+  const handleDragEnter = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (isProcessing || !isConnected) return;
+
+      // Check if dragged items contain files
+      if (e.dataTransfer.types.includes('Files')) {
+        setIsDragOver(true);
+      }
+    },
+    [isProcessing, isConnected]
+  );
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Only set dragOver to false if we're leaving the input container
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX;
+    const y = e.clientY;
+
+    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+      setIsDragOver(false);
+    }
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDrop = useCallback(
+    async (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragOver(false);
+
+      if (isProcessing || !isConnected) return;
+
+      // Check if we have files
+      const files = e.dataTransfer.files;
+      if (files && files.length > 0) {
+        processDroppedFiles(files);
+        return;
+      }
+
+      // Handle file paths (from screenshots or other sources)
+      const items = e.dataTransfer.items;
+      if (items && items.length > 0) {
+        for (let i = 0; i < items.length; i++) {
+          const item = items[i];
+          if (item.kind === 'file') {
+            const file = item.getAsFile();
+            if (file) {
+              const dataTransfer = new DataTransfer();
+              dataTransfer.items.add(file);
+              processDroppedFiles(dataTransfer.files);
+            }
+          }
+        }
+      }
+    },
+    [isProcessing, isConnected, processDroppedFiles]
+  );
+
+  const handlePaste = useCallback(
+    async (e: React.ClipboardEvent) => {
+      // Check if clipboard contains files
+      const items = e.clipboardData?.items;
+      if (items) {
+        const files: File[] = [];
+
+        for (let i = 0; i < items.length; i++) {
+          const item = items[i];
+
+          if (item.kind === 'file') {
+            const file = item.getAsFile();
+            if (file && file.type.startsWith('image/')) {
+              e.preventDefault(); // Prevent default paste of file path
+              files.push(file);
+            }
+          }
+        }
+
+        if (files.length > 0) {
+          const dataTransfer = new DataTransfer();
+          files.forEach((file) => dataTransfer.items.add(file));
+          await processDroppedFiles(dataTransfer.files);
+        }
+      }
+    },
+    [processDroppedFiles]
+  );
+
+  return {
+    selectedImages,
+    selectedTextFiles,
+    showImageDropZone,
+    isDragOver,
+    handleImagesSelected,
+    toggleImageDropZone,
+    processDroppedFiles,
+    removeImage,
+    removeTextFile,
+    handleDragEnter,
+    handleDragLeave,
+    handleDragOver,
+    handleDrop,
+    handlePaste,
+    clearAllFiles,
+    setSelectedImages,
+    setSelectedTextFiles,
+    setShowImageDropZone,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/input-area/agent-input-area.tsx b/temp_repo/apps/ui/src/components/views/agent-view/input-area/agent-input-area.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c04cf87ff655cb724d58cd48f4b25554bdb9a326
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/input-area/agent-input-area.tsx
@@ -0,0 +1,133 @@
+import { ImageDropZone } from '@/components/ui/image-drop-zone';
+import type { ImageAttachment, TextFileAttachment } from '@/store/app-store';
+import type { PhaseModelEntry } from '@automaker/types';
+import { FilePreview } from './file-preview';
+import { QueueDisplay } from './queue-display';
+import { InputControls } from './input-controls';
+
+interface QueueItem {
+  id: string;
+  message: string;
+  imagePaths?: string[];
+}
+
+interface AgentInputAreaProps {
+  input: string;
+  onInputChange: (value: string) => void;
+  onSend: () => void;
+  onStop: () => void;
+  /** Current model selection (model + optional thinking level) */
+  modelSelection: PhaseModelEntry;
+  /** Callback when model is selected */
+  onModelSelect: (entry: PhaseModelEntry) => void;
+  isProcessing: boolean;
+  isConnected: boolean;
+  // File attachments
+  selectedImages: ImageAttachment[];
+  selectedTextFiles: TextFileAttachment[];
+  showImageDropZone: boolean;
+  isDragOver: boolean;
+  onImagesSelected: (images: ImageAttachment[]) => void;
+  onToggleImageDropZone: () => void;
+  onRemoveImage: (imageId: string) => void;
+  onRemoveTextFile: (fileId: string) => void;
+  onClearAllFiles: () => void;
+  onDragEnter: (e: React.DragEvent) => void;
+  onDragLeave: (e: React.DragEvent) => void;
+  onDragOver: (e: React.DragEvent) => void;
+  onDrop: (e: React.DragEvent) => Promise<void>;
+  onPaste: (e: React.ClipboardEvent) => Promise<void>;
+  // Queue
+  serverQueue: QueueItem[];
+  onRemoveFromQueue: (id: string) => void;
+  onClearQueue: () => void;
+  // Refs
+  inputRef?: React.RefObject<HTMLTextAreaElement | null>;
+}
+
+export function AgentInputArea({
+  input,
+  onInputChange,
+  onSend,
+  onStop,
+  modelSelection,
+  onModelSelect,
+  isProcessing,
+  isConnected,
+  selectedImages,
+  selectedTextFiles,
+  showImageDropZone,
+  isDragOver,
+  onImagesSelected,
+  onToggleImageDropZone,
+  onRemoveImage,
+  onRemoveTextFile,
+  onClearAllFiles,
+  onDragEnter,
+  onDragLeave,
+  onDragOver,
+  onDrop,
+  onPaste,
+  serverQueue,
+  onRemoveFromQueue,
+  onClearQueue,
+  inputRef,
+}: AgentInputAreaProps) {
+  const hasFiles = selectedImages.length > 0 || selectedTextFiles.length > 0;
+
+  return (
+    <div className="border-t border-border p-4 bg-card/50 backdrop-blur-sm">
+      {/* Image Drop Zone (when visible) */}
+      {showImageDropZone && (
+        <ImageDropZone
+          onImagesSelected={onImagesSelected}
+          images={selectedImages}
+          maxFiles={5}
+          className="mb-4"
+          disabled={!isConnected}
+        />
+      )}
+
+      {/* Queued Prompts List */}
+      <QueueDisplay
+        serverQueue={serverQueue}
+        onRemoveFromQueue={onRemoveFromQueue}
+        onClearQueue={onClearQueue}
+      />
+
+      {/* Selected Files Preview - only show when ImageDropZone is hidden */}
+      {!showImageDropZone && (
+        <FilePreview
+          selectedImages={selectedImages}
+          selectedTextFiles={selectedTextFiles}
+          isProcessing={isProcessing}
+          onRemoveImage={onRemoveImage}
+          onRemoveTextFile={onRemoveTextFile}
+          onClearAll={onClearAllFiles}
+        />
+      )}
+
+      {/* Input Controls */}
+      <InputControls
+        input={input}
+        onInputChange={onInputChange}
+        onSend={onSend}
+        onStop={onStop}
+        onToggleImageDropZone={onToggleImageDropZone}
+        onPaste={onPaste}
+        modelSelection={modelSelection}
+        onModelSelect={onModelSelect}
+        isProcessing={isProcessing}
+        isConnected={isConnected}
+        hasFiles={hasFiles}
+        isDragOver={isDragOver}
+        showImageDropZone={showImageDropZone}
+        onDragEnter={onDragEnter}
+        onDragLeave={onDragLeave}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+        inputRef={inputRef}
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/input-area/file-preview.tsx b/temp_repo/apps/ui/src/components/views/agent-view/input-area/file-preview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a77d66e24583911342a2eb3ef99026438d483eef
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/input-area/file-preview.tsx
@@ -0,0 +1,103 @@
+import { X, FileText } from 'lucide-react';
+import type { ImageAttachment, TextFileAttachment } from '@/store/app-store';
+import { formatFileSize } from '@/lib/image-utils';
+
+interface FilePreviewProps {
+  selectedImages: ImageAttachment[];
+  selectedTextFiles: TextFileAttachment[];
+  isProcessing: boolean;
+  onRemoveImage: (imageId: string) => void;
+  onRemoveTextFile: (fileId: string) => void;
+  onClearAll: () => void;
+}
+
+export function FilePreview({
+  selectedImages,
+  selectedTextFiles,
+  isProcessing,
+  onRemoveImage,
+  onRemoveTextFile,
+  onClearAll,
+}: FilePreviewProps) {
+  const totalFiles = selectedImages.length + selectedTextFiles.length;
+
+  if (totalFiles === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mb-4 space-y-2">
+      <div className="flex items-center justify-between">
+        <p className="text-xs font-medium text-foreground">
+          {totalFiles} file{totalFiles > 1 ? 's' : ''} attached
+        </p>
+        <button
+          onClick={onClearAll}
+          className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          Clear all
+        </button>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        {/* Image attachments */}
+        {selectedImages.map((image) => (
+          <div
+            key={image.id}
+            className="group relative rounded-lg border border-border bg-muted/30 p-2 flex items-center gap-2 hover:border-primary/30 transition-colors"
+          >
+            {/* Image thumbnail */}
+            <div className="w-8 h-8 rounded-md overflow-hidden bg-muted flex-shrink-0">
+              <img src={image.data} alt={image.filename} className="w-full h-full object-cover" />
+            </div>
+            {/* Image info */}
+            <div className="min-w-0 flex-1">
+              <p className="text-xs font-medium text-foreground truncate max-w-24">
+                {image.filename}
+              </p>
+              {image.size !== undefined && (
+                <p className="text-[10px] text-muted-foreground">{formatFileSize(image.size)}</p>
+              )}
+            </div>
+            {/* Remove button */}
+            {image.id && (
+              <button
+                onClick={() => onRemoveImage(image.id!)}
+                className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-full hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
+                disabled={isProcessing}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            )}
+          </div>
+        ))}
+        {/* Text file attachments */}
+        {selectedTextFiles.map((file) => (
+          <div
+            key={file.id}
+            className="group relative rounded-lg border border-border bg-muted/30 p-2 flex items-center gap-2 hover:border-primary/30 transition-colors"
+          >
+            {/* File icon */}
+            <div className="w-8 h-8 rounded-md bg-muted flex-shrink-0 flex items-center justify-center">
+              <FileText className="w-4 h-4 text-muted-foreground" />
+            </div>
+            {/* File info */}
+            <div className="min-w-0 flex-1">
+              <p className="text-xs font-medium text-foreground truncate max-w-24">
+                {file.filename}
+              </p>
+              <p className="text-[10px] text-muted-foreground">{formatFileSize(file.size)}</p>
+            </div>
+            {/* Remove button */}
+            <button
+              onClick={() => onRemoveTextFile(file.id)}
+              className="opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-full hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
+              disabled={isProcessing}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/input-area/index.ts b/temp_repo/apps/ui/src/components/views/agent-view/input-area/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ab5ccfb8f2ad19a4f02ae8a751e6b2367f9a3941
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/input-area/index.ts
@@ -0,0 +1,4 @@
+export { AgentInputArea } from './agent-input-area';
+export { FilePreview } from './file-preview';
+export { QueueDisplay } from './queue-display';
+export { InputControls } from './input-controls';
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/input-area/input-controls.tsx b/temp_repo/apps/ui/src/components/views/agent-view/input-area/input-controls.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..06d391af73d8d6ba76cf3cb1e6ca1cd642a44227
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/input-area/input-controls.tsx
@@ -0,0 +1,193 @@
+import { useRef, useCallback, useEffect } from 'react';
+import { Send, Paperclip, Square, ListOrdered } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+import { AgentModelSelector } from '../shared/agent-model-selector';
+import type { PhaseModelEntry } from '@automaker/types';
+
+interface InputControlsProps {
+  input: string;
+  onInputChange: (value: string) => void;
+  onSend: () => void;
+  onStop: () => void;
+  onToggleImageDropZone: () => void;
+  onPaste: (e: React.ClipboardEvent) => Promise<void>;
+  /** Current model selection (model + optional thinking level) */
+  modelSelection: PhaseModelEntry;
+  /** Callback when model is selected */
+  onModelSelect: (entry: PhaseModelEntry) => void;
+  isProcessing: boolean;
+  isConnected: boolean;
+  hasFiles: boolean;
+  isDragOver: boolean;
+  showImageDropZone: boolean;
+  // Drag handlers
+  onDragEnter: (e: React.DragEvent) => void;
+  onDragLeave: (e: React.DragEvent) => void;
+  onDragOver: (e: React.DragEvent) => void;
+  onDrop: (e: React.DragEvent) => Promise<void>;
+  // Refs
+  inputRef?: React.RefObject<HTMLTextAreaElement | null>;
+}
+
+export function InputControls({
+  input,
+  onInputChange,
+  onSend,
+  onStop,
+  onToggleImageDropZone,
+  onPaste,
+  modelSelection,
+  onModelSelect,
+  isProcessing,
+  isConnected,
+  hasFiles,
+  isDragOver,
+  showImageDropZone,
+  onDragEnter,
+  onDragLeave,
+  onDragOver,
+  onDrop,
+  inputRef: externalInputRef,
+}: InputControlsProps) {
+  const internalInputRef = useRef<HTMLTextAreaElement>(null);
+  const inputRef = externalInputRef || internalInputRef;
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      onSend();
+    }
+  };
+
+  const adjustTextareaHeight = useCallback(() => {
+    const textarea = inputRef.current;
+    if (!textarea) return;
+    textarea.style.height = 'auto';
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }, [inputRef]);
+
+  useEffect(() => {
+    adjustTextareaHeight();
+  }, [input, adjustTextareaHeight]);
+
+  const canSend = (input.trim() || hasFiles) && isConnected;
+
+  return (
+    <>
+      {/* Text Input and Controls */}
+      <div
+        className={cn(
+          'flex flex-col gap-2 transition-all duration-200 rounded-xl p-1',
+          isDragOver && 'bg-primary/5 ring-2 ring-primary/30'
+        )}
+        onDragEnter={onDragEnter}
+        onDragLeave={onDragLeave}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+      >
+        {/* Textarea - full width on mobile */}
+        <div className="relative w-full">
+          <Textarea
+            ref={inputRef}
+            placeholder={
+              isDragOver
+                ? 'Drop your files here...'
+                : isProcessing
+                  ? 'Type to queue another prompt...'
+                  : 'Describe what you want to build...'
+            }
+            value={input}
+            onChange={(e) => onInputChange(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onPaste={onPaste}
+            disabled={!isConnected}
+            data-testid="agent-input"
+            rows={1}
+            className={cn(
+              'min-h-11 w-full bg-background border-border rounded-xl pl-4 pr-4 sm:pr-20 text-sm transition-all resize-none max-h-36 overflow-y-auto py-2.5',
+              'focus:ring-2 focus:ring-primary/20 focus:border-primary/50',
+              hasFiles && 'border-primary/30',
+              isDragOver && 'border-primary bg-primary/5'
+            )}
+          />
+          {hasFiles && !isDragOver && (
+            <div className="hidden sm:block absolute right-3 top-1/2 -translate-y-1/2 text-xs bg-primary text-primary-foreground px-2 py-0.5 rounded-full font-medium">
+              files attached
+            </div>
+          )}
+          {isDragOver && (
+            <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1.5 text-xs text-primary font-medium">
+              <Paperclip className="w-3 h-3" />
+              Drop here
+            </div>
+          )}
+        </div>
+
+        {/* Controls row - responsive layout */}
+        <div className="flex items-center gap-2 flex-wrap">
+          {/* Model Selector */}
+          <AgentModelSelector
+            value={modelSelection}
+            onChange={onModelSelect}
+            disabled={!isConnected}
+          />
+
+          {/* File Attachment Button */}
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={onToggleImageDropZone}
+            disabled={!isConnected}
+            className={cn(
+              'h-11 w-11 rounded-xl border-border shrink-0',
+              showImageDropZone && 'bg-primary/10 text-primary border-primary/30',
+              hasFiles && 'border-primary/30 text-primary'
+            )}
+            title="Attach files (images, .txt, .md)"
+          >
+            <Paperclip className="w-4 h-4" />
+          </Button>
+
+          {/* Spacer to push action buttons to the right */}
+          <div className="flex-1" />
+
+          {/* Stop Button (only when processing) */}
+          {isProcessing && (
+            <Button
+              onClick={onStop}
+              disabled={!isConnected}
+              className="h-11 px-4 rounded-xl shrink-0"
+              variant="destructive"
+              data-testid="stop-agent"
+              title="Stop generation"
+            >
+              <Square className="w-4 h-4 fill-current" />
+            </Button>
+          )}
+
+          {/* Send / Queue Button */}
+          <Button
+            onClick={onSend}
+            disabled={!canSend}
+            className="h-11 px-4 rounded-xl shrink-0"
+            variant={isProcessing ? 'outline' : 'default'}
+            data-testid="send-message"
+            title={isProcessing ? 'Add to queue' : 'Send message'}
+          >
+            {isProcessing ? <ListOrdered className="w-4 h-4" /> : <Send className="w-4 h-4" />}
+          </Button>
+        </div>
+      </div>
+
+      {/* Keyboard hint */}
+      <p className="text-[11px] text-muted-foreground mt-2 text-center hidden sm:block">
+        Press <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-medium">Enter</kbd> to
+        send,{' '}
+        <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-medium">Shift+Enter</kbd>{' '}
+        for new line
+      </p>
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/input-area/queue-display.tsx b/temp_repo/apps/ui/src/components/views/agent-view/input-area/queue-display.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..db11954eaa4f4bdca9ea2ba45a07397b31cf8a64
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/input-area/queue-display.tsx
@@ -0,0 +1,60 @@
+import { X } from 'lucide-react';
+
+interface QueueItem {
+  id: string;
+  message: string;
+  imagePaths?: string[];
+}
+
+interface QueueDisplayProps {
+  serverQueue: QueueItem[];
+  onRemoveFromQueue: (id: string) => void;
+  onClearQueue: () => void;
+}
+
+export function QueueDisplay({ serverQueue, onRemoveFromQueue, onClearQueue }: QueueDisplayProps) {
+  if (serverQueue.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mb-4 space-y-2">
+      <div className="flex items-center justify-between">
+        <p className="text-xs font-medium text-muted-foreground">
+          {serverQueue.length} prompt{serverQueue.length > 1 ? 's' : ''} queued
+        </p>
+        <button
+          onClick={onClearQueue}
+          className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          Clear all
+        </button>
+      </div>
+      <div className="space-y-1.5">
+        {serverQueue.map((item, index) => (
+          <div
+            key={item.id}
+            className="group flex items-center gap-2 text-sm bg-muted/50 rounded-lg px-3 py-2 border border-border"
+          >
+            <span className="text-xs text-muted-foreground font-medium min-w-[1.5rem]">
+              {index + 1}.
+            </span>
+            <span className="flex-1 truncate text-foreground">{item.message}</span>
+            {item.imagePaths && item.imagePaths.length > 0 && (
+              <span className="text-xs text-muted-foreground">
+                +{item.imagePaths.length} file{item.imagePaths.length > 1 ? 's' : ''}
+              </span>
+            )}
+            <button
+              onClick={() => onRemoveFromQueue(item.id)}
+              className="opacity-0 group-hover:opacity-100 p-1 hover:bg-destructive/10 hover:text-destructive rounded transition-all"
+              title="Remove from queue"
+            >
+              <X className="w-3 h-3" />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/shared/agent-model-selector.tsx b/temp_repo/apps/ui/src/components/views/agent-view/shared/agent-model-selector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d55339a4a6bfde0ccf7c1c24179c74ae09315cca
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/shared/agent-model-selector.tsx
@@ -0,0 +1,25 @@
+/**
+ * Re-export PhaseModelSelector in compact mode for use in agent chat view.
+ * This ensures we have a single source of truth for model selection logic.
+ */
+
+import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
+import type { PhaseModelEntry } from '@automaker/types';
+
+// Re-export types for convenience
+export type { PhaseModelEntry };
+
+interface AgentModelSelectorProps {
+  /** Current model selection (model + optional thinking level) */
+  value: PhaseModelEntry;
+  /** Callback when model is selected */
+  onChange: (entry: PhaseModelEntry) => void;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+export function AgentModelSelector({ value, onChange, disabled }: AgentModelSelectorProps) {
+  return (
+    <PhaseModelSelector value={value} onChange={onChange} disabled={disabled} compact align="end" />
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/shared/constants.ts b/temp_repo/apps/ui/src/components/views/agent-view/shared/constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6663e6adb4cbd053568f6676d23e69485d71dc82
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/shared/constants.ts
@@ -0,0 +1,9 @@
+// Agent view constants
+
+export const WELCOME_MESSAGE = {
+  id: 'welcome',
+  role: 'assistant' as const,
+  content:
+    "Hello! I'm the Automaker Agent. I can help you build software autonomously. I can read and modify files in this project, run commands, and execute tests. What would you like to create today?",
+  timestamp: new Date().toISOString(),
+};
diff --git a/temp_repo/apps/ui/src/components/views/agent-view/shared/index.ts b/temp_repo/apps/ui/src/components/views/agent-view/shared/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d1435da1f222a4ae4857670779f77cc8e36a0210
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/agent-view/shared/index.ts
@@ -0,0 +1,2 @@
+export { AgentModelSelector } from './agent-model-selector';
+export * from './constants';
diff --git a/temp_repo/apps/ui/src/components/views/analysis-view.tsx b/temp_repo/apps/ui/src/components/views/analysis-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8d74c71c3a7057bf386eaeb78c13eea6506f3ea6
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/analysis-view.tsx
@@ -0,0 +1,969 @@
+import { useCallback, useState } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { useQueryClient } from '@tanstack/react-query';
+import { useAppStore, FileTreeNode, ProjectAnalysis, Feature } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import {
+  Folder,
+  FolderOpen,
+  File,
+  ChevronRight,
+  ChevronDown,
+  Search,
+  RefreshCw,
+  BarChart3,
+  FileCode,
+  FileText,
+  CheckCircle,
+  AlertCircle,
+  ListChecks,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn, generateUUID } from '@/lib/utils';
+
+const logger = createLogger('AnalysisView');
+
+const IGNORE_PATTERNS = [
+  'node_modules',
+  '.git',
+  '.next',
+  'dist',
+  'build',
+  '.DS_Store',
+  '*.log',
+  '.cache',
+  'coverage',
+  '__pycache__',
+  '.pytest_cache',
+  '.venv',
+  'venv',
+  '.env',
+];
+
+const shouldIgnore = (name: string) => {
+  return IGNORE_PATTERNS.some((pattern) => {
+    if (pattern.startsWith('*')) {
+      return name.endsWith(pattern.slice(1));
+    }
+    return name === pattern;
+  });
+};
+
+const getExtension = (filename: string): string => {
+  const parts = filename.split('.');
+  return parts.length > 1 ? parts.pop() || '' : '';
+};
+
+export function AnalysisView() {
+  const {
+    currentProject,
+    projectAnalysis,
+    isAnalyzing,
+    setProjectAnalysis,
+    setIsAnalyzing,
+    clearAnalysis,
+  } = useAppStore();
+
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+  const [isGeneratingSpec, setIsGeneratingSpec] = useState(false);
+  const [specGenerated, setSpecGenerated] = useState(false);
+  const [specError, setSpecError] = useState<string | null>(null);
+  const [isGeneratingFeatureList, setIsGeneratingFeatureList] = useState(false);
+  const [featureListGenerated, setFeatureListGenerated] = useState(false);
+  const [featureListError, setFeatureListError] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+
+  // Recursively scan directory
+  const scanDirectory = useCallback(
+    async (path: string, depth: number = 0): Promise<FileTreeNode[]> => {
+      if (depth > 10) return []; // Prevent infinite recursion
+
+      const api = getElectronAPI();
+      try {
+        const result = await api.readdir(path);
+        if (!result.success || !result.entries) return [];
+
+        const nodes: FileTreeNode[] = [];
+        const entries = result.entries.filter((e) => !shouldIgnore(e.name));
+
+        for (const entry of entries) {
+          const fullPath = `${path}/${entry.name}`;
+          const node: FileTreeNode = {
+            name: entry.name,
+            path: fullPath,
+            isDirectory: entry.isDirectory,
+            extension: entry.isFile ? getExtension(entry.name) : undefined,
+          };
+
+          if (entry.isDirectory) {
+            // Recursively scan subdirectories
+            node.children = await scanDirectory(fullPath, depth + 1);
+          }
+
+          nodes.push(node);
+        }
+
+        // Sort: directories first, then files alphabetically
+        nodes.sort((a, b) => {
+          if (a.isDirectory && !b.isDirectory) return -1;
+          if (!a.isDirectory && b.isDirectory) return 1;
+          return a.name.localeCompare(b.name);
+        });
+
+        return nodes;
+      } catch (error) {
+        logger.error('Failed to scan directory:', path, error);
+        return [];
+      }
+    },
+    []
+  );
+
+  // Count files and directories
+  const countNodes = (
+    nodes: FileTreeNode[]
+  ): { files: number; dirs: number; byExt: Record<string, number> } => {
+    let files = 0;
+    let dirs = 0;
+    const byExt: Record<string, number> = {};
+
+    const traverse = (items: FileTreeNode[]) => {
+      for (const item of items) {
+        if (item.isDirectory) {
+          dirs++;
+          if (item.children) traverse(item.children);
+        } else {
+          files++;
+          if (item.extension) {
+            byExt[item.extension] = (byExt[item.extension] || 0) + 1;
+          } else {
+            byExt['(no extension)'] = (byExt['(no extension)'] || 0) + 1;
+          }
+        }
+      }
+    };
+
+    traverse(nodes);
+    return { files, dirs, byExt };
+  };
+
+  // Run the analysis
+  const runAnalysis = useCallback(async () => {
+    if (!currentProject) return;
+
+    setIsAnalyzing(true);
+    clearAnalysis();
+
+    try {
+      const fileTree = await scanDirectory(currentProject.path);
+      const counts = countNodes(fileTree);
+
+      const analysis: ProjectAnalysis = {
+        fileTree,
+        totalFiles: counts.files,
+        totalDirectories: counts.dirs,
+        filesByExtension: counts.byExt,
+        analyzedAt: new Date().toISOString(),
+      };
+
+      setProjectAnalysis(analysis);
+    } catch (error) {
+      logger.error('Analysis failed:', error);
+    } finally {
+      setIsAnalyzing(false);
+    }
+  }, [currentProject, setIsAnalyzing, clearAnalysis, scanDirectory, setProjectAnalysis]);
+
+  // Generate app_spec.txt from analysis
+  const generateSpec = useCallback(async () => {
+    if (!currentProject || !projectAnalysis) return;
+
+    setIsGeneratingSpec(true);
+    setSpecError(null);
+    setSpecGenerated(false);
+
+    try {
+      const api = getElectronAPI();
+
+      // Read key files to understand the project better
+      const fileContents: Record<string, string> = {};
+      const keyFiles = ['package.json', 'README.md', 'tsconfig.json'];
+
+      // Collect file paths from analysis
+      const collectFilePaths = (
+        nodes: FileTreeNode[],
+        maxDepth: number = 3,
+        currentDepth: number = 0
+      ): string[] => {
+        const paths: string[] = [];
+        for (const node of nodes) {
+          if (!node.isDirectory) {
+            paths.push(node.path);
+          } else if (node.children && currentDepth < maxDepth) {
+            paths.push(...collectFilePaths(node.children, maxDepth, currentDepth + 1));
+          }
+        }
+        return paths;
+      };
+
+      collectFilePaths(projectAnalysis.fileTree);
+
+      // Try to read key configuration files
+      for (const keyFile of keyFiles) {
+        const filePath = `${currentProject.path}/${keyFile}`;
+        const exists = await api.exists(filePath);
+        if (exists) {
+          const result = await api.readFile(filePath);
+          if (result.success && result.content) {
+            fileContents[keyFile] = result.content;
+          }
+        }
+      }
+
+      // Detect project type and tech stack
+      const detectTechStack = () => {
+        const stack: string[] = [];
+        const extensions = projectAnalysis.filesByExtension;
+
+        // Check package.json for dependencies
+        if (fileContents['package.json']) {
+          try {
+            const pkg = JSON.parse(fileContents['package.json']);
+            if (pkg.dependencies?.react || pkg.dependencies?.['react-dom']) stack.push('React');
+            if (pkg.dependencies?.next) stack.push('Next.js');
+            if (pkg.dependencies?.vue) stack.push('Vue');
+            if (pkg.dependencies?.angular) stack.push('Angular');
+            if (pkg.dependencies?.express) stack.push('Express');
+            if (pkg.dependencies?.electron) stack.push('Electron');
+            if (pkg.devDependencies?.typescript || pkg.dependencies?.typescript)
+              stack.push('TypeScript');
+            if (pkg.devDependencies?.tailwindcss || pkg.dependencies?.tailwindcss)
+              stack.push('Tailwind CSS');
+            if (pkg.devDependencies?.playwright || pkg.dependencies?.playwright)
+              stack.push('Playwright');
+            if (pkg.devDependencies?.jest || pkg.dependencies?.jest) stack.push('Jest');
+          } catch {
+            // Ignore JSON parse errors
+          }
+        }
+
+        // Detect by file extensions
+        if (extensions['ts'] || extensions['tsx']) stack.push('TypeScript');
+        if (extensions['py']) stack.push('Python');
+        if (extensions['go']) stack.push('Go');
+        if (extensions['rs']) stack.push('Rust');
+        if (extensions['java']) stack.push('Java');
+        if (extensions['css'] || extensions['scss'] || extensions['sass']) stack.push('CSS/SCSS');
+
+        // Remove duplicates
+        return [...new Set(stack)];
+      };
+
+      // Get project name from package.json or folder name
+      const getProjectName = () => {
+        if (fileContents['package.json']) {
+          try {
+            const pkg = JSON.parse(fileContents['package.json']);
+            if (pkg.name) return pkg.name;
+          } catch {
+            // Ignore JSON parse errors
+          }
+        }
+        // Fall back to folder name
+        return currentProject.name;
+      };
+
+      // Get project description from package.json or README
+      const getProjectDescription = () => {
+        if (fileContents['package.json']) {
+          try {
+            const pkg = JSON.parse(fileContents['package.json']);
+            if (pkg.description) return pkg.description;
+          } catch {
+            // Ignore JSON parse errors
+          }
+        }
+        if (fileContents['README.md']) {
+          // Extract first paragraph from README
+          const lines = fileContents['README.md'].split('\n');
+          for (const line of lines) {
+            const trimmed = line.trim();
+            if (
+              trimmed &&
+              !trimmed.startsWith('#') &&
+              !trimmed.startsWith('!') &&
+              trimmed.length > 20
+            ) {
+              return trimmed.substring(0, 200);
+            }
+          }
+        }
+        return 'A software project';
+      };
+
+      // Group files by directory for structure analysis
+      const analyzeStructure = () => {
+        const structure: string[] = [];
+        const topLevelDirs = projectAnalysis.fileTree
+          .filter((n: FileTreeNode) => n.isDirectory)
+          .map((n: FileTreeNode) => n.name);
+
+        for (const dir of topLevelDirs) {
+          structure.push(`      <directory name="${dir}" />`);
+        }
+        return structure.join('\n');
+      };
+
+      const projectName = getProjectName();
+      const description = getProjectDescription();
+      const techStack = detectTechStack();
+
+      // Generate the spec content
+      // Note: Must follow XML format as defined in apps/server/src/lib/app-spec-format.ts
+      const specContent = `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    ${description}
+  </overview>
+
+  <technology_stack>
+    <languages>
+${Object.entries(projectAnalysis.filesByExtension)
+  .filter(([ext]: [string, number]) =>
+    ['ts', 'tsx', 'js', 'jsx', 'py', 'go', 'rs', 'java', 'cpp', 'c'].includes(ext)
+  )
+  .sort((a: [string, number], b: [string, number]) => b[1] - a[1])
+  .slice(0, 5)
+  .map(([ext, count]: [string, number]) => `      <language ext=".${ext}" count="${count}" />`)
+  .join('\n')}
+    </languages>
+    <frameworks>
+${techStack.map((tech) => `      <framework>${tech}</framework>`).join('\n')}
+    </frameworks>
+  </technology_stack>
+
+  <project_structure>
+    <total_files>${projectAnalysis.totalFiles}</total_files>
+    <total_directories>${projectAnalysis.totalDirectories}</total_directories>
+    <top_level_structure>
+${analyzeStructure()}
+    </top_level_structure>
+  </project_structure>
+
+  <file_breakdown>
+${Object.entries(projectAnalysis.filesByExtension)
+  .sort((a: [string, number], b: [string, number]) => b[1] - a[1])
+  .slice(0, 10)
+  .map(
+    ([ext, count]: [string, number]) =>
+      `    <extension type="${ext.startsWith('(') ? ext : '.' + ext}" count="${count}" />`
+  )
+  .join('\n')}
+  </file_breakdown>
+
+  <analyzed_at>${projectAnalysis.analyzedAt}</analyzed_at>
+</project_specification>
+`;
+
+      // Write the spec file
+      const specPath = `${currentProject.path}/.automaker/app_spec.txt`;
+      const writeResult = await api.writeFile(specPath, specContent);
+
+      if (writeResult.success) {
+        setSpecGenerated(true);
+      } else {
+        setSpecError(writeResult.error || 'Failed to write spec file');
+      }
+    } catch (error) {
+      logger.error('Failed to generate spec:', error);
+      setSpecError(error instanceof Error ? error.message : 'Failed to generate spec');
+    } finally {
+      setIsGeneratingSpec(false);
+    }
+  }, [currentProject, projectAnalysis]);
+
+  // Generate features from analysis and save to .automaker/features folder
+  const generateFeatureList = useCallback(async () => {
+    if (!currentProject || !projectAnalysis) return;
+
+    setIsGeneratingFeatureList(true);
+    setFeatureListError(null);
+    setFeatureListGenerated(false);
+
+    try {
+      const api = getElectronAPI();
+
+      // Read key files to understand the project
+      const fileContents: Record<string, string> = {};
+      const keyFiles = ['package.json', 'README.md'];
+
+      // Try to read key configuration files
+      for (const keyFile of keyFiles) {
+        const filePath = `${currentProject.path}/${keyFile}`;
+        const exists = await api.exists(filePath);
+        if (exists) {
+          const result = await api.readFile(filePath);
+          if (result.success && result.content) {
+            fileContents[keyFile] = result.content;
+          }
+        }
+      }
+
+      // Collect file paths from analysis
+      const collectFilePaths = (nodes: FileTreeNode[]): string[] => {
+        const paths: string[] = [];
+        for (const node of nodes) {
+          if (!node.isDirectory) {
+            paths.push(node.path);
+          } else if (node.children) {
+            paths.push(...collectFilePaths(node.children));
+          }
+        }
+        return paths;
+      };
+
+      const allFilePaths = collectFilePaths(projectAnalysis.fileTree);
+
+      // Analyze directories and files to detect features
+      interface DetectedFeature {
+        category: string;
+        description: string;
+        passes: boolean;
+      }
+
+      const detectedFeatures: DetectedFeature[] = [];
+
+      // Detect features based on project structure and files
+      const detectFeatures = () => {
+        const extensions = projectAnalysis.filesByExtension;
+        const topLevelDirs = projectAnalysis.fileTree
+          .filter((n: FileTreeNode) => n.isDirectory)
+          .map((n: FileTreeNode) => n.name.toLowerCase());
+        const topLevelFiles = projectAnalysis.fileTree
+          .filter((n: FileTreeNode) => !n.isDirectory)
+          .map((n: FileTreeNode) => n.name.toLowerCase());
+
+        // Check for test directories and files
+        const hasTests =
+          topLevelDirs.includes('tests') ||
+          topLevelDirs.includes('test') ||
+          topLevelDirs.includes('__tests__') ||
+          allFilePaths.some((p) => p.includes('.spec.') || p.includes('.test.'));
+
+        if (hasTests) {
+          detectedFeatures.push({
+            category: 'Testing',
+            description: 'Automated test suite',
+            passes: true,
+          });
+        }
+
+        // Check for components directory (UI components)
+        const hasComponents =
+          topLevelDirs.includes('components') ||
+          allFilePaths.some((p) => p.toLowerCase().includes('/components/'));
+
+        if (hasComponents) {
+          detectedFeatures.push({
+            category: 'UI/Design',
+            description: 'Component-based UI architecture',
+            passes: true,
+          });
+        }
+
+        // Check for src directory (organized source code)
+        if (topLevelDirs.includes('src')) {
+          detectedFeatures.push({
+            category: 'Project Structure',
+            description: 'Organized source code structure',
+            passes: true,
+          });
+        }
+
+        // Check package.json for dependencies and detect features
+        if (fileContents['package.json']) {
+          try {
+            const pkg = JSON.parse(fileContents['package.json']);
+
+            // React/Next.js app detection
+            if (pkg.dependencies?.react || pkg.dependencies?.['react-dom']) {
+              detectedFeatures.push({
+                category: 'Frontend',
+                description: 'React-based user interface',
+                passes: true,
+              });
+            }
+
+            if (pkg.dependencies?.next) {
+              detectedFeatures.push({
+                category: 'Framework',
+                description: 'Next.js framework integration',
+                passes: true,
+              });
+            }
+
+            // TypeScript support
+            if (
+              pkg.devDependencies?.typescript ||
+              pkg.dependencies?.typescript ||
+              extensions['ts'] ||
+              extensions['tsx']
+            ) {
+              detectedFeatures.push({
+                category: 'Developer Experience',
+                description: 'TypeScript type safety',
+                passes: true,
+              });
+            }
+
+            // Tailwind CSS
+            if (pkg.devDependencies?.tailwindcss || pkg.dependencies?.tailwindcss) {
+              detectedFeatures.push({
+                category: 'UI/Design',
+                description: 'Tailwind CSS styling',
+                passes: true,
+              });
+            }
+
+            // ESLint/Prettier (code quality)
+            if (pkg.devDependencies?.eslint || pkg.devDependencies?.prettier) {
+              detectedFeatures.push({
+                category: 'Developer Experience',
+                description: 'Code quality tools',
+                passes: true,
+              });
+            }
+
+            // Electron (desktop app)
+            if (pkg.dependencies?.electron || pkg.devDependencies?.electron) {
+              detectedFeatures.push({
+                category: 'Platform',
+                description: 'Electron desktop application',
+                passes: true,
+              });
+            }
+
+            // Playwright testing
+            if (pkg.devDependencies?.playwright || pkg.devDependencies?.['@playwright/test']) {
+              detectedFeatures.push({
+                category: 'Testing',
+                description: 'Playwright end-to-end testing',
+                passes: true,
+              });
+            }
+          } catch {
+            // Ignore JSON parse errors
+          }
+        }
+
+        // Check for documentation
+        if (topLevelFiles.includes('readme.md') || topLevelDirs.includes('docs')) {
+          detectedFeatures.push({
+            category: 'Documentation',
+            description: 'Project documentation',
+            passes: true,
+          });
+        }
+
+        // Check for CI/CD configuration
+        const hasCICD =
+          topLevelDirs.includes('.github') ||
+          topLevelFiles.includes('.gitlab-ci.yml') ||
+          topLevelFiles.includes('.travis.yml');
+
+        if (hasCICD) {
+          detectedFeatures.push({
+            category: 'DevOps',
+            description: 'CI/CD pipeline configuration',
+            passes: true,
+          });
+        }
+
+        // Check for API routes (Next.js API or Express)
+        const hasAPIRoutes = allFilePaths.some(
+          (p) => p.includes('/api/') || p.includes('/routes/') || p.includes('/endpoints/')
+        );
+
+        if (hasAPIRoutes) {
+          detectedFeatures.push({
+            category: 'Backend',
+            description: 'API endpoints',
+            passes: true,
+          });
+        }
+
+        // Check for state management
+        const hasStateManagement = allFilePaths.some(
+          (p) =>
+            p.includes('/store/') ||
+            p.includes('/stores/') ||
+            p.includes('/redux/') ||
+            p.includes('/context/')
+        );
+
+        if (hasStateManagement) {
+          detectedFeatures.push({
+            category: 'Architecture',
+            description: 'State management system',
+            passes: true,
+          });
+        }
+
+        // Check for configuration files
+        if (topLevelFiles.includes('tsconfig.json') || topLevelFiles.includes('package.json')) {
+          detectedFeatures.push({
+            category: 'Configuration',
+            description: 'Project configuration files',
+            passes: true,
+          });
+        }
+      };
+
+      detectFeatures();
+
+      // If no features were detected, add a default feature
+      if (detectedFeatures.length === 0) {
+        detectedFeatures.push({
+          category: 'Core',
+          description: 'Basic project structure',
+          passes: true,
+        });
+      }
+
+      // Create each feature using the features API
+      if (!api.features) {
+        throw new Error('Features API not available');
+      }
+
+      for (const detectedFeature of detectedFeatures) {
+        const newFeature: Feature = {
+          id: generateUUID(),
+          category: detectedFeature.category,
+          description: detectedFeature.description,
+          status: 'backlog',
+          steps: [],
+        };
+        await api.features.create(currentProject.path, newFeature);
+      }
+
+      // Invalidate React Query cache to sync UI
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.features.all(currentProject.path),
+      });
+
+      setFeatureListGenerated(true);
+    } catch (error) {
+      logger.error('Failed to generate feature list:', error);
+      setFeatureListError(
+        error instanceof Error ? error.message : 'Failed to generate feature list'
+      );
+    } finally {
+      setIsGeneratingFeatureList(false);
+    }
+  }, [currentProject, projectAnalysis, queryClient]);
+
+  // Toggle folder expansion
+  const toggleFolder = (path: string) => {
+    const newExpanded = new Set(expandedFolders);
+    if (expandedFolders.has(path)) {
+      newExpanded.delete(path);
+    } else {
+      newExpanded.add(path);
+    }
+    setExpandedFolders(newExpanded);
+  };
+
+  // Render file tree node
+  const renderNode = (node: FileTreeNode, depth: number = 0) => {
+    const isExpanded = expandedFolders.has(node.path);
+
+    return (
+      <div key={node.path} data-testid={`analysis-node-${node.name}`}>
+        <div
+          className={cn(
+            'flex items-center gap-2 py-1 px-2 rounded cursor-pointer hover:bg-muted/50 text-sm'
+          )}
+          style={{ paddingLeft: `${depth * 16 + 8}px` }}
+          onClick={() => {
+            if (node.isDirectory) {
+              toggleFolder(node.path);
+            }
+          }}
+        >
+          {node.isDirectory ? (
+            <>
+              {isExpanded ? (
+                <ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
+              ) : (
+                <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
+              )}
+              {isExpanded ? (
+                <FolderOpen className="w-4 h-4 text-primary shrink-0" />
+              ) : (
+                <Folder className="w-4 h-4 text-primary shrink-0" />
+              )}
+            </>
+          ) : (
+            <>
+              <span className="w-4" />
+              <File className="w-4 h-4 text-muted-foreground shrink-0" />
+            </>
+          )}
+          <span className="truncate">{node.name}</span>
+          {node.extension && (
+            <span className="text-xs text-muted-foreground ml-auto">.{node.extension}</span>
+          )}
+        </div>
+        {node.isDirectory && isExpanded && node.children && (
+          <div>{node.children.map((child: FileTreeNode) => renderNode(child, depth + 1))}</div>
+        )}
+      </div>
+    );
+  };
+
+  if (!currentProject) {
+    return (
+      <div
+        className="flex-1 flex items-center justify-center"
+        data-testid="analysis-view-no-project"
+      >
+        <p className="text-muted-foreground">No project selected</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden content-bg" data-testid="analysis-view">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-white/10 bg-zinc-950/50 backdrop-blur-md">
+        <div className="flex items-center gap-3">
+          <Search className="w-5 h-5 text-muted-foreground" />
+          <div>
+            <h1 className="text-xl font-bold">Project Analysis</h1>
+            <p className="text-sm text-muted-foreground">{currentProject.name}</p>
+          </div>
+        </div>
+        <Button onClick={runAnalysis} disabled={isAnalyzing} data-testid="analyze-project-button">
+          {isAnalyzing ? (
+            <>
+              <Spinner size="sm" className="mr-2" />
+              Analyzing...
+            </>
+          ) : (
+            <>
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Analyze Project
+            </>
+          )}
+        </Button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-hidden p-4">
+        {!projectAnalysis && !isAnalyzing ? (
+          <div className="flex flex-col items-center justify-center h-full text-center">
+            <Search className="w-16 h-16 text-muted-foreground/50 mb-4" />
+            <h2 className="text-lg font-semibold mb-2">No Analysis Yet</h2>
+            <p className="text-sm text-muted-foreground mb-4 max-w-md">
+              Click &quot;Analyze Project&quot; to scan your codebase and get insights about its
+              structure.
+            </p>
+            <Button onClick={runAnalysis} data-testid="analyze-project-button-empty">
+              <Search className="w-4 h-4 mr-2" />
+              Start Analysis
+            </Button>
+          </div>
+        ) : isAnalyzing ? (
+          <div className="flex flex-col items-center justify-center h-full">
+            <Spinner size="xl" className="mb-4" />
+            <p className="text-muted-foreground">Scanning project files...</p>
+          </div>
+        ) : projectAnalysis ? (
+          <div className="flex gap-4 h-full overflow-hidden">
+            {/* Stats Panel */}
+            <div className="w-80 shrink-0 overflow-y-auto space-y-4">
+              <Card data-testid="analysis-stats">
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm flex items-center gap-2">
+                    <BarChart3 className="w-4 h-4" />
+                    Statistics
+                  </CardTitle>
+                  <CardDescription>
+                    Analyzed {new Date(projectAnalysis.analyzedAt).toLocaleString()}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  <div className="flex justify-between">
+                    <span className="text-sm text-muted-foreground">Total Files</span>
+                    <span className="font-medium" data-testid="total-files">
+                      {projectAnalysis.totalFiles}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm text-muted-foreground">Total Directories</span>
+                    <span className="font-medium" data-testid="total-directories">
+                      {projectAnalysis.totalDirectories}
+                    </span>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card data-testid="files-by-extension">
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm flex items-center gap-2">
+                    <FileCode className="w-4 h-4" />
+                    Files by Extension
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    {Object.entries(projectAnalysis.filesByExtension)
+                      .sort((a: [string, number], b: [string, number]) => b[1] - a[1])
+                      .slice(0, 15)
+                      .map(([ext, count]: [string, number]) => (
+                        <div key={ext} className="flex justify-between text-sm">
+                          <span className="text-muted-foreground font-mono">
+                            {ext.startsWith('(') ? ext : `.${ext}`}
+                          </span>
+                          <span>{count}</span>
+                        </div>
+                      ))}
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Generate Spec Card */}
+              <Card data-testid="generate-spec-card">
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm flex items-center gap-2">
+                    <FileText className="w-4 h-4" />
+                    Generate Specification
+                  </CardTitle>
+                  <CardDescription>Create app_spec.txt from analysis</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  <p className="text-sm text-muted-foreground">
+                    Generate a project specification file based on the analyzed codebase structure
+                    and detected technologies.
+                  </p>
+                  <Button
+                    onClick={generateSpec}
+                    disabled={isGeneratingSpec}
+                    className="w-full"
+                    data-testid="generate-spec-button"
+                  >
+                    {isGeneratingSpec ? (
+                      <>
+                        <Spinner size="sm" className="mr-2" />
+                        Generating...
+                      </>
+                    ) : (
+                      <>
+                        <FileText className="w-4 h-4 mr-2" />
+                        Generate Spec
+                      </>
+                    )}
+                  </Button>
+                  {specGenerated && (
+                    <div
+                      className="flex items-center gap-2 text-sm text-green-500"
+                      data-testid="spec-generated-success"
+                    >
+                      <CheckCircle className="w-4 h-4" />
+                      <span>app_spec.txt created successfully!</span>
+                    </div>
+                  )}
+                  {specError && (
+                    <div
+                      className="flex items-center gap-2 text-sm text-red-500"
+                      data-testid="spec-generated-error"
+                    >
+                      <AlertCircle className="w-4 h-4" />
+                      <span>{specError}</span>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+
+              {/* Generate Feature List Card */}
+              <Card data-testid="generate-feature-list-card">
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm flex items-center gap-2">
+                    <ListChecks className="w-4 h-4" />
+                    Generate Feature List
+                  </CardTitle>
+                  <CardDescription>Create features from analysis</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  <p className="text-sm text-muted-foreground">
+                    Automatically detect and generate a feature list based on the analyzed codebase
+                    structure, dependencies, and project configuration.
+                  </p>
+                  <Button
+                    onClick={generateFeatureList}
+                    disabled={isGeneratingFeatureList}
+                    className="w-full"
+                    data-testid="generate-feature-list-button"
+                  >
+                    {isGeneratingFeatureList ? (
+                      <>
+                        <Spinner size="sm" className="mr-2" />
+                        Generating...
+                      </>
+                    ) : (
+                      <>
+                        <ListChecks className="w-4 h-4 mr-2" />
+                        Generate Feature List
+                      </>
+                    )}
+                  </Button>
+                  {featureListGenerated && (
+                    <div
+                      className="flex items-center gap-2 text-sm text-green-500"
+                      data-testid="feature-list-generated-success"
+                    >
+                      <CheckCircle className="w-4 h-4" />
+                      <span>Features created successfully!</span>
+                    </div>
+                  )}
+                  {featureListError && (
+                    <div
+                      className="flex items-center gap-2 text-sm text-red-500"
+                      data-testid="feature-list-generated-error"
+                    >
+                      <AlertCircle className="w-4 h-4" />
+                      <span>{featureListError}</span>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* File Tree */}
+            <Card className="flex-1 overflow-hidden">
+              <CardHeader className="pb-2 border-b">
+                <CardTitle className="text-sm flex items-center gap-2">
+                  <Folder className="w-4 h-4" />
+                  File Tree
+                </CardTitle>
+                <CardDescription>
+                  {projectAnalysis.totalFiles} files in {projectAnalysis.totalDirectories}{' '}
+                  directories
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="p-0 overflow-y-auto h-full" data-testid="analysis-file-tree">
+                <div className="p-2">
+                  {projectAnalysis.fileTree.map((node: FileTreeNode) => renderNode(node))}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view.tsx b/temp_repo/apps/ui/src/components/views/board-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8268ca411385918580529b46d706d170a3dcfc6d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view.tsx
@@ -0,0 +1,2530 @@
+import { useEffect, useState, useCallback, useMemo, useRef, startTransition } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import type { PointerEvent as ReactPointerEvent } from 'react';
+import {
+  DndContext,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  rectIntersection,
+  pointerWithin,
+  type CollisionDetection,
+  type Collision,
+} from '@dnd-kit/core';
+
+// Custom pointer sensor that ignores drag events from within dialogs
+class DialogAwarePointerSensor extends PointerSensor {
+  static activators = [
+    {
+      eventName: 'onPointerDown' as const,
+      handler: ({ nativeEvent: event }: ReactPointerEvent) => {
+        // Don't start drag if the event originated from inside a dialog
+        if ((event.target as Element)?.closest?.('[role="dialog"]')) {
+          return false;
+        }
+        return true;
+      },
+    },
+  ];
+}
+import { useAppStore, Feature, type ModelAlias, type ThinkingLevel } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import type {
+  BacklogPlanResult,
+  FeatureStatusWithPipeline,
+  FeatureTemplate,
+  ReasoningEffort,
+} from '@automaker/types';
+import { pathsEqual } from '@/lib/utils';
+import { initializeProject } from '@/lib/project-init';
+import { toast } from 'sonner';
+import {
+  BoardBackgroundModal,
+  PRCommentResolutionDialog,
+  type PRCommentResolutionPRInfo,
+} from '@/components/dialogs';
+import { useShallow } from 'zustand/react/shallow';
+import { useAutoMode } from '@/hooks/use-auto-mode';
+import { resolveModelString } from '@automaker/model-resolver';
+import { useWindowState } from '@/hooks/use-window-state';
+// Board-view specific imports
+import { BoardHeader } from './board-view/board-header';
+import { KanbanBoard } from './board-view/kanban-board';
+import {
+  AddFeatureDialog,
+  AgentOutputModal,
+  BacklogPlanDialog,
+  CompletedFeaturesModal,
+  ArchiveAllVerifiedDialog,
+  DeleteCompletedFeatureDialog,
+  DependencyLinkDialog,
+  DuplicateCountDialog,
+  EditFeatureDialog,
+  FollowUpDialog,
+  PlanApprovalDialog,
+  MergeRebaseDialog,
+  QuickAddDialog,
+  ChangePRNumberDialog,
+} from './board-view/dialogs';
+import type { DependencyLinkType } from './board-view/dialogs';
+import { PipelineSettingsDialog } from './board-view/dialogs/pipeline-settings-dialog';
+import { CreateWorktreeDialog } from './board-view/dialogs/create-worktree-dialog';
+import { DeleteWorktreeDialog } from './board-view/dialogs/delete-worktree-dialog';
+import { CommitWorktreeDialog } from './board-view/dialogs/commit-worktree-dialog';
+import { CreatePRDialog } from './board-view/dialogs/create-pr-dialog';
+import { CreateBranchDialog } from './board-view/dialogs/create-branch-dialog';
+import { WorktreePanel } from './board-view/worktree-panel';
+import type {
+  PRInfo,
+  WorktreeInfo,
+  MergeConflictInfo,
+  BranchSwitchConflictInfo,
+  StashPopConflictInfo,
+  StashApplyConflictInfo,
+} from './board-view/worktree-panel/types';
+import { BoardErrorBoundary } from './board-view/board-error-boundary';
+import { COLUMNS, getColumnsWithPipeline, isBacklogLikeStatus } from './board-view/constants';
+import {
+  useBoardFeatures,
+  useBoardDragDrop,
+  useBoardActions,
+  useBoardKeyboardShortcuts,
+  useBoardColumnFeatures,
+  useBoardEffects,
+  useBoardBackground,
+  useBoardPersistence,
+  useFollowUpState,
+  useSelectionMode,
+  useListViewState,
+} from './board-view/hooks';
+import { SelectionActionBar, ListView } from './board-view/components';
+import { MassEditDialog, BranchConflictDialog } from './board-view/dialogs';
+import type { BranchConflictData } from './board-view/dialogs';
+import { InitScriptIndicator } from './board-view/init-script-indicator';
+import { useInitScriptEvents } from '@/hooks/use-init-script-events';
+import { usePipelineConfig } from '@/hooks/queries';
+import { useQueryClient } from '@tanstack/react-query';
+import { queryKeys } from '@/lib/query-keys';
+import { useAutoModeQueryInvalidation } from '@/hooks/use-query-invalidation';
+import { useUpdateGlobalSettings } from '@/hooks/mutations/use-settings-mutations';
+import { forceSyncSettingsToServer } from '@/hooks/use-settings-sync';
+
+// Stable empty array to avoid infinite loop in selector
+const EMPTY_WORKTREES: ReturnType<ReturnType<typeof useAppStore.getState>['getWorktrees']> = [];
+
+const logger = createLogger('Board');
+
+interface BoardViewProps {
+  /** Feature ID from URL parameter - if provided, opens output modal for this feature on load */
+  initialFeatureId?: string;
+  /** Project path from URL parameter - if provided, switches to this project before handling deep link */
+  initialProjectPath?: string;
+}
+
+export function BoardView({ initialFeatureId, initialProjectPath }: BoardViewProps) {
+  const {
+    currentProject,
+    defaultSkipTests,
+    specCreatingForProject,
+    setSpecCreatingForProject,
+    pendingPlanApproval,
+    setPendingPlanApproval,
+    updateFeature,
+    batchUpdateFeatures,
+    setCurrentWorktree,
+    getWorktrees,
+    setWorktrees,
+    planUseSelectedWorktreeBranch,
+    addFeatureUseSelectedWorktreeBranch,
+    isPrimaryWorktreeBranch,
+    getPrimaryWorktreeBranch,
+    setPipelineConfig,
+    featureTemplates,
+    defaultSortNewestCardOnTop,
+    upsertAndSetCurrentProject,
+  } = useAppStore(
+    useShallow((state) => ({
+      currentProject: state.currentProject,
+      defaultSkipTests: state.defaultSkipTests,
+      specCreatingForProject: state.specCreatingForProject,
+      setSpecCreatingForProject: state.setSpecCreatingForProject,
+      pendingPlanApproval: state.pendingPlanApproval,
+      setPendingPlanApproval: state.setPendingPlanApproval,
+      updateFeature: state.updateFeature,
+      batchUpdateFeatures: state.batchUpdateFeatures,
+      setCurrentWorktree: state.setCurrentWorktree,
+      getWorktrees: state.getWorktrees,
+      setWorktrees: state.setWorktrees,
+      planUseSelectedWorktreeBranch: state.planUseSelectedWorktreeBranch,
+      addFeatureUseSelectedWorktreeBranch: state.addFeatureUseSelectedWorktreeBranch,
+      isPrimaryWorktreeBranch: state.isPrimaryWorktreeBranch,
+      getPrimaryWorktreeBranch: state.getPrimaryWorktreeBranch,
+      setPipelineConfig: state.setPipelineConfig,
+      featureTemplates: state.featureTemplates,
+      defaultSortNewestCardOnTop: state.defaultSortNewestCardOnTop,
+      upsertAndSetCurrentProject: state.upsertAndSetCurrentProject,
+    }))
+  );
+  // Also get keyboard shortcuts for the add feature shortcut
+  const keyboardShortcuts = useAppStore((state) => state.keyboardShortcuts);
+  // Fetch pipeline config via React Query
+  const { data: pipelineConfig } = usePipelineConfig(currentProject?.path);
+  const queryClient = useQueryClient();
+
+  // Subscribe to auto mode events for React Query cache invalidation
+  useAutoModeQueryInvalidation(currentProject?.path);
+  // Subscribe to worktreePanelVisibleByProject to trigger re-renders when it changes
+  const worktreePanelVisibleByProject = useAppStore((state) => state.worktreePanelVisibleByProject);
+  // Subscribe to showInitScriptIndicatorByProject to trigger re-renders when it changes
+  useAppStore((state) => state.showInitScriptIndicatorByProject);
+  const getShowInitScriptIndicator = useAppStore((state) => state.getShowInitScriptIndicator);
+  const getDefaultDeleteBranch = useAppStore((state) => state.getDefaultDeleteBranch);
+  const {
+    features: hookFeatures,
+    isLoading,
+    persistedCategories,
+    loadFeatures,
+    saveCategory,
+  } = useBoardFeatures({ currentProject });
+  const [editingFeature, setEditingFeature] = useState<Feature | null>(null);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [showQuickAddDialog, setShowQuickAddDialog] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  const [showOutputModal, setShowOutputModal] = useState(false);
+  const [outputFeature, setOutputFeature] = useState<Feature | null>(null);
+  const [featuresWithContext, setFeaturesWithContext] = useState<Set<string>>(new Set());
+  const [showArchiveAllVerifiedDialog, setShowArchiveAllVerifiedDialog] = useState(false);
+  const [showBoardBackgroundModal, setShowBoardBackgroundModal] = useState(false);
+  const [showCompletedModal, setShowCompletedModal] = useState(false);
+  const [deleteCompletedFeature, setDeleteCompletedFeature] = useState<Feature | null>(null);
+  // State for viewing plan in read-only mode
+  const [viewPlanFeature, setViewPlanFeature] = useState<Feature | null>(null);
+
+  // State for spawn task mode
+  const [spawnParentFeature, setSpawnParentFeature] = useState<Feature | null>(null);
+
+  // State for duplicate as child multiple times dialog
+  const [duplicateMultipleFeature, setDuplicateMultipleFeature] = useState<Feature | null>(null);
+
+  // Worktree dialog states
+  const [showCreateWorktreeDialog, setShowCreateWorktreeDialog] = useState(false);
+  const [showDeleteWorktreeDialog, setShowDeleteWorktreeDialog] = useState(false);
+  const [showCommitWorktreeDialog, setShowCommitWorktreeDialog] = useState(false);
+  const [showCreatePRDialog, setShowCreatePRDialog] = useState(false);
+  const [showChangePRNumberDialog, setShowChangePRNumberDialog] = useState(false);
+  const [showCreateBranchDialog, setShowCreateBranchDialog] = useState(false);
+  const [showMergeRebaseDialog, setShowMergeRebaseDialog] = useState(false);
+  const [showPRCommentDialog, setShowPRCommentDialog] = useState(false);
+  const [prCommentDialogPRInfo, setPRCommentDialogPRInfo] =
+    useState<PRCommentResolutionPRInfo | null>(null);
+  const [selectedWorktreeForAction, setSelectedWorktreeForAction] = useState<WorktreeInfo | null>(
+    null
+  );
+  const [worktreeRefreshKey, setWorktreeRefreshKey] = useState(0);
+
+  // Branch conflict dialog state (for branch switch and stash pop conflicts)
+  const [branchConflictData, setBranchConflictData] = useState<BranchConflictData | null>(null);
+  const [showBranchConflictDialog, setShowBranchConflictDialog] = useState(false);
+
+  // Backlog plan dialog state
+  const [showPlanDialog, setShowPlanDialog] = useState(false);
+  const [pendingBacklogPlan, setPendingBacklogPlan] = useState<BacklogPlanResult | null>(null);
+  const [isGeneratingPlan, setIsGeneratingPlan] = useState(false);
+
+  // Pipeline settings dialog state
+  const [showPipelineSettings, setShowPipelineSettings] = useState(false);
+
+  // Follow-up state hook
+  const {
+    showFollowUpDialog,
+    followUpFeature,
+    followUpPrompt,
+    followUpImagePaths,
+    followUpPreviewMap,
+    followUpPromptHistory,
+    setShowFollowUpDialog,
+    setFollowUpFeature,
+    setFollowUpPrompt,
+    setFollowUpImagePaths,
+    setFollowUpPreviewMap,
+    handleFollowUpDialogChange,
+    addToPromptHistory,
+  } = useFollowUpState();
+
+  // Selection mode hook for mass editing
+  const {
+    isSelectionMode,
+    selectionTarget,
+    selectedFeatureIds,
+    selectedCount,
+    toggleSelectionMode,
+    toggleFeatureSelection,
+    selectAll,
+    clearSelection,
+    exitSelectionMode,
+  } = useSelectionMode();
+  const [showMassEditDialog, setShowMassEditDialog] = useState(false);
+
+  // View mode state (kanban vs list)
+  const { viewMode, setViewMode, isListView, sortConfig, setSortColumn } = useListViewState();
+
+  // Search filter for Kanban cards
+  const [searchQuery, setSearchQuery] = useState('');
+  // Plan approval loading state
+  const [isPlanApprovalLoading, setIsPlanApprovalLoading] = useState(false);
+  // Derive spec creation state from store - check if current project is the one being created
+  const isCreatingSpec = specCreatingForProject === currentProject?.path;
+  const creatingSpecProjectPath = specCreatingForProject ?? undefined;
+
+  const checkContextExists = useCallback(
+    async (featureId: string): Promise<boolean> => {
+      if (!currentProject) return false;
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode?.contextExists) {
+          return false;
+        }
+
+        const result = await api.autoMode.contextExists(currentProject.path, featureId);
+
+        return result.success && result.exists === true;
+      } catch (error) {
+        logger.error('Error checking context:', error);
+        return false;
+      }
+    },
+    [currentProject]
+  );
+
+  // Use board effects hook
+  useBoardEffects({
+    currentProject,
+    specCreatingForProject,
+    setSpecCreatingForProject,
+    checkContextExists,
+    features: hookFeatures,
+    isLoading,
+    featuresWithContext,
+    setFeaturesWithContext,
+  });
+
+  // Handle deep link project switching - if URL includes a projectPath that differs from
+  // the current project, switch to the target project first. The feature/worktree deep link
+  // effect below will fire naturally once the project switch triggers a features reload.
+  const handledProjectPathRef = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    if (!initialProjectPath || handledProjectPathRef.current === initialProjectPath) {
+      return;
+    }
+
+    // Check if we're already on the correct project
+    if (currentProject?.path && pathsEqual(currentProject.path, initialProjectPath)) {
+      handledProjectPathRef.current = initialProjectPath;
+      return;
+    }
+
+    handledProjectPathRef.current = initialProjectPath;
+
+    const switchProject = async () => {
+      try {
+        const initResult = await initializeProject(initialProjectPath);
+        if (!initResult.success) {
+          logger.warn(
+            `Deep link: failed to initialize project "${initialProjectPath}":`,
+            initResult.error
+          );
+          toast.error('Failed to open project from link', {
+            description: initResult.error || 'Unknown error',
+          });
+          return;
+        }
+
+        // Derive project name from path basename
+        const projectName =
+          initialProjectPath.split(/[/\\]/).filter(Boolean).pop() || initialProjectPath;
+        logger.info(`Deep link: switching to project "${projectName}" at ${initialProjectPath}`);
+        upsertAndSetCurrentProject(initialProjectPath, projectName);
+      } catch (error) {
+        logger.error('Deep link: project switch failed:', error);
+        toast.error('Failed to switch project', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    };
+
+    switchProject();
+  }, [initialProjectPath, currentProject?.path, upsertAndSetCurrentProject]);
+
+  // Handle initial feature ID from URL - switch to the correct worktree and open output modal
+  // Uses a ref to track which featureId has been handled to prevent re-opening
+  // when the component re-renders but initialFeatureId hasn't changed.
+  // We read worktrees from the store reactively so this effect re-runs once worktrees load.
+  const handledFeatureIdRef = useRef<string | undefined>(undefined);
+
+  // Reset the handled ref whenever initialFeatureId changes (including to undefined),
+  // so navigating to the same featureId again after clearing works correctly.
+  useEffect(() => {
+    handledFeatureIdRef.current = undefined;
+  }, [initialFeatureId]);
+  const deepLinkWorktrees = useAppStore(
+    useCallback(
+      (s) =>
+        currentProject?.path
+          ? (s.worktreesByProject[currentProject.path] ?? EMPTY_WORKTREES)
+          : EMPTY_WORKTREES,
+      [currentProject?.path]
+    )
+  );
+
+  // Track how many render cycles we've waited for worktrees during a deep link.
+  // If the Zustand store never gets populated (e.g., WorktreePanel hasn't mounted,
+  // useWorktrees setting is off, or the worktree query failed), we stop waiting
+  // after a threshold and open the modal without switching worktree.
+  const deepLinkRetryCountRef = useRef(0);
+  // Reset retry count when the feature ID changes
+  useEffect(() => {
+    deepLinkRetryCountRef.current = 0;
+  }, [initialFeatureId]);
+
+  useEffect(() => {
+    if (
+      !initialFeatureId ||
+      handledFeatureIdRef.current === initialFeatureId ||
+      isLoading ||
+      !hookFeatures.length ||
+      !currentProject?.path
+    ) {
+      return;
+    }
+
+    const feature = hookFeatures.find((f) => f.id === initialFeatureId);
+    if (!feature) return;
+
+    // Resolve worktrees: prefer the Zustand store (reactive), but fall back to
+    // the React Query cache if the store hasn't been populated yet. The store is
+    // only synced by the WorktreePanel's useWorktrees hook, which may not have
+    // rendered yet during a deep link cold start. Reading the query cache directly
+    // avoids an indefinite wait that hangs the app on the loading screen.
+    let resolvedWorktrees = deepLinkWorktrees;
+    if (resolvedWorktrees.length === 0 && currentProject.path) {
+      const cachedData = queryClient.getQueryData(queryKeys.worktrees.all(currentProject.path)) as
+        | { worktrees?: WorktreeInfo[] }
+        | undefined;
+      if (cachedData?.worktrees && cachedData.worktrees.length > 0) {
+        resolvedWorktrees = cachedData.worktrees as typeof deepLinkWorktrees;
+      }
+    }
+
+    // If the feature has a branch and worktrees aren't available yet, wait briefly.
+    // After enough retries, proceed without switching worktree to avoid hanging.
+    const MAX_DEEP_LINK_RETRIES = 10;
+    if (feature.branchName && resolvedWorktrees.length === 0) {
+      deepLinkRetryCountRef.current++;
+      if (deepLinkRetryCountRef.current < MAX_DEEP_LINK_RETRIES) {
+        return; // Worktrees not loaded yet - effect will re-run when they load
+      }
+      // Exceeded retry limit — proceed without worktree switch to avoid hanging
+      logger.warn(
+        `Deep link: worktrees not available after ${MAX_DEEP_LINK_RETRIES} retries, ` +
+          `opening feature ${initialFeatureId} without switching worktree`
+      );
+    }
+
+    // Switch to the correct worktree based on the feature's branchName.
+    // IMPORTANT: Wrap in startTransition to batch the Zustand store update with
+    // any concurrent React state updates. Without this, the synchronous store
+    // mutation cascades through useAutoMode → refreshStatus → setAutoModeRunning,
+    // which can trigger React error #185 on mobile Safari/PWA crash loops.
+    if (feature.branchName && resolvedWorktrees.length > 0) {
+      const targetWorktree = resolvedWorktrees.find((w) => w.branch === feature.branchName);
+      if (targetWorktree) {
+        const currentWt = useAppStore.getState().getCurrentWorktree(currentProject.path);
+        const isAlreadySelected = targetWorktree.isMain
+          ? currentWt?.path === null
+          : currentWt?.path === targetWorktree.path;
+        if (!isAlreadySelected) {
+          logger.info(
+            `Deep link: switching to worktree "${targetWorktree.branch}" for feature ${initialFeatureId}`
+          );
+          startTransition(() => {
+            setCurrentWorktree(
+              currentProject.path,
+              targetWorktree.isMain ? null : targetWorktree.path,
+              targetWorktree.branch
+            );
+          });
+        }
+      }
+    } else if (!feature.branchName && resolvedWorktrees.length > 0) {
+      // Feature has no branch - should be on the main worktree
+      const currentWt = useAppStore.getState().getCurrentWorktree(currentProject.path);
+      if (currentWt?.path !== null && currentWt !== null) {
+        const mainWorktree = resolvedWorktrees.find((w) => w.isMain);
+        if (mainWorktree) {
+          logger.info(
+            `Deep link: switching to main worktree for unassigned feature ${initialFeatureId}`
+          );
+          startTransition(() => {
+            setCurrentWorktree(currentProject.path, null, mainWorktree.branch);
+          });
+        }
+      }
+    }
+
+    logger.info(`Opening output modal for feature from URL: ${initialFeatureId}`);
+    setOutputFeature(feature);
+    setShowOutputModal(true);
+    handledFeatureIdRef.current = initialFeatureId;
+  }, [
+    initialFeatureId,
+    isLoading,
+    hookFeatures,
+    currentProject?.path,
+    deepLinkWorktrees,
+    queryClient,
+    setCurrentWorktree,
+    setOutputFeature,
+    setShowOutputModal,
+  ]);
+
+  // Load pipeline config when project changes
+  useEffect(() => {
+    if (!currentProject?.path) return;
+
+    const loadPipelineConfig = async () => {
+      try {
+        const api = getHttpApiClient();
+        const result = await api.pipeline.getConfig(currentProject.path);
+        if (result.success && result.config) {
+          setPipelineConfig(currentProject.path, result.config);
+        }
+      } catch (error) {
+        logger.error('Failed to load pipeline config:', error);
+      }
+    };
+
+    loadPipelineConfig();
+  }, [currentProject?.path, setPipelineConfig]);
+
+  // Window state hook for compact dialog mode
+  const { isMaximized } = useWindowState();
+
+  // Init script events hook - subscribe to worktree init script events
+  useInitScriptEvents(currentProject?.path ?? null);
+
+  // Keyboard shortcuts hook will be initialized after actions hook
+
+  // Prevent hydration issues
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  const sensors = useSensors(
+    useSensor(DialogAwarePointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    })
+  );
+
+  // Get unique categories from existing features AND persisted categories for autocomplete suggestions
+  const categorySuggestions = useMemo(() => {
+    const featureCategories = hookFeatures.map((f) => f.category).filter(Boolean);
+    // Merge feature categories with persisted categories
+    const allCategories = [...featureCategories, ...persistedCategories];
+    return [...new Set(allCategories)].sort();
+  }, [hookFeatures, persistedCategories]);
+
+  // Branch suggestions for the branch autocomplete
+  // Shows all local branches as suggestions, but users can type any new branch name
+  // When the feature is started, a worktree will be created if needed
+  const [branchSuggestions, setBranchSuggestions] = useState<string[]>([]);
+
+  // Fetch branches when project changes or worktrees are created/modified
+  useEffect(() => {
+    const fetchBranches = async () => {
+      if (!currentProject) {
+        setBranchSuggestions([]);
+        return;
+      }
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.listBranches) {
+          setBranchSuggestions([]);
+          return;
+        }
+
+        const result = await api.worktree.listBranches(currentProject.path);
+        if (result.success && result.result?.branches) {
+          const localBranches = result.result.branches
+            .filter((b) => !b.isRemote)
+            .map((b) => b.name);
+          setBranchSuggestions(localBranches);
+        }
+      } catch (error) {
+        logger.error('Error fetching branches:', error);
+        setBranchSuggestions([]);
+      }
+    };
+
+    fetchBranches();
+  }, [currentProject, worktreeRefreshKey]);
+
+  // Custom collision detection that prioritizes specific drop targets (cards, worktrees) over columns
+  const collisionDetectionStrategy = useCallback((args: Parameters<CollisionDetection>[0]) => {
+    const pointerCollisions = pointerWithin(args);
+
+    // Priority 1: Specific drop targets (cards for dependency links, worktrees)
+    // These need to be detected even if they are inside a column
+    const specificTargetCollisions = pointerCollisions.filter((collision: Collision) => {
+      const id = String(collision.id);
+      return id.startsWith('card-drop-') || id.startsWith('worktree-drop-');
+    });
+
+    if (specificTargetCollisions.length > 0) {
+      return specificTargetCollisions;
+    }
+
+    // Priority 2: Columns (including column headers and pipeline columns)
+    const columnCollisions = pointerCollisions.filter((collision: Collision) => {
+      const colId = String(collision.id);
+      // Direct column ID match (e.g. 'backlog', 'in_progress')
+      if (COLUMNS.some((col) => col.id === colId)) return true;
+      // Column header droppable (e.g. 'column-header-backlog')
+      if (colId.startsWith('column-header-')) {
+        const baseId = colId.replace('column-header-', '');
+        return COLUMNS.some((col) => col.id === baseId) || baseId.startsWith('pipeline_');
+      }
+      // Pipeline column IDs (e.g. 'pipeline_tests')
+      if (colId.startsWith('pipeline_')) return true;
+      return false;
+    });
+
+    // If we found a column collision, use that
+    if (columnCollisions.length > 0) {
+      return columnCollisions;
+    }
+
+    // Priority 3: Fallback to rectangle intersection
+    return rectIntersection(args);
+  }, []);
+
+  // Use persistence hook
+  const { persistFeatureCreate, persistFeatureUpdate, persistFeatureDelete } = useBoardPersistence({
+    currentProject,
+  });
+
+  // Shared helper: batch-reset branch assignment and persist for each affected feature.
+  // Used when worktrees are deleted or branches are removed during merge.
+  const batchResetBranchFeatures = useCallback(
+    (branchName: string) => {
+      const affectedIds = hookFeatures.filter((f) => f.branchName === branchName).map((f) => f.id);
+      if (affectedIds.length === 0) return;
+      const updates: Partial<Feature> = { branchName: undefined };
+      batchUpdateFeatures(affectedIds, updates);
+      for (const id of affectedIds) {
+        persistFeatureUpdate(id, updates).catch((err: unknown) => {
+          console.error(
+            `[batchResetBranchFeatures] Failed to persist update for feature ${id}:`,
+            err
+          );
+        });
+      }
+    },
+    [hookFeatures, batchUpdateFeatures, persistFeatureUpdate]
+  );
+
+  // Memoize the removed worktrees handler to prevent infinite loops
+  const handleRemovedWorktrees = useCallback(
+    (removedWorktrees: Array<{ path: string; branch: string }>) => {
+      for (const { branch } of removedWorktrees) {
+        batchResetBranchFeatures(branch);
+      }
+    },
+    [batchResetBranchFeatures]
+  );
+
+  const currentProjectPath = currentProject?.path;
+
+  // Get current worktree info (path/branch) for filtering features.
+  // Subscribe to the selected project's current worktree value directly so worktree
+  // switches trigger an immediate re-render and instant kanban/list re-filtering.
+  const currentWorktreeInfo = useAppStore(
+    useCallback(
+      (s) => (currentProjectPath ? (s.currentWorktreeByProject[currentProjectPath] ?? null) : null),
+      [currentProjectPath]
+    )
+  );
+  const currentWorktreePath = currentWorktreeInfo?.path ?? null;
+
+  // Select worktrees for the current project directly from the store.
+  // Using a project-scoped selector prevents re-renders when OTHER projects'
+  // worktrees change (the old selector subscribed to the entire worktreesByProject
+  // object, causing unnecessary re-renders that cascaded into selectedWorktree →
+  // useAutoMode → refreshStatus → setAutoModeRunning → store update → re-render loop
+  // that could trigger React error #185 on initial project open).
+  const worktrees = useAppStore(
+    useCallback(
+      (s) =>
+        currentProjectPath
+          ? (s.worktreesByProject[currentProjectPath] ?? EMPTY_WORKTREES)
+          : EMPTY_WORKTREES,
+      [currentProjectPath]
+    )
+  );
+
+  // Get the branch for the currently selected worktree
+  // Find the worktree that matches the current selection, or use main worktree
+  //
+  // IMPORTANT: Stabilize the returned object reference using a ref to prevent
+  // cascading re-renders during project switches. The spread `{ ...found, ... }`
+  // creates a new object every time, even when the underlying data is identical.
+  // Without stabilization, the new reference propagates to useAutoMode and other
+  // consumers, contributing to the re-render cascade that triggers React error #185.
+  const prevSelectedWorktreeRef = useRef<WorktreeInfo | undefined>(undefined);
+  const selectedWorktree = useMemo((): WorktreeInfo | undefined => {
+    let found;
+    let usedFallback = false;
+    if (currentWorktreePath === null) {
+      // Primary worktree selected - find the main worktree
+      found = worktrees.find((w) => w.isMain);
+    } else {
+      // Specific worktree selected - find it by path
+      found = worktrees.find((w) => !w.isMain && pathsEqual(w.path, currentWorktreePath));
+      // If the selected worktree no longer exists (e.g. just deleted),
+      // fall back to main to prevent rendering with undefined worktree.
+      // onDeleted will call setCurrentWorktree(…, null) to reset properly.
+      if (!found) {
+        found = worktrees.find((w) => w.isMain);
+        usedFallback = true;
+      }
+    }
+    if (!found) {
+      prevSelectedWorktreeRef.current = undefined;
+      return undefined;
+    }
+    // Ensure all required WorktreeInfo fields are present
+    const result: WorktreeInfo = {
+      ...found,
+      isCurrent:
+        found.isCurrent ??
+        (usedFallback
+          ? found.isMain // treat main as current during the transient fallback render
+          : currentWorktreePath !== null
+            ? pathsEqual(found.path, currentWorktreePath)
+            : found.isMain),
+      hasWorktree: found.hasWorktree ?? true,
+    };
+    // Return the previous reference if the key fields haven't changed,
+    // preventing downstream hooks from seeing a "new" worktree on every render.
+    const prev = prevSelectedWorktreeRef.current;
+    if (
+      prev &&
+      prev.path === result.path &&
+      prev.branch === result.branch &&
+      prev.isMain === result.isMain &&
+      prev.isCurrent === result.isCurrent &&
+      prev.hasWorktree === result.hasWorktree
+    ) {
+      return prev;
+    }
+    prevSelectedWorktreeRef.current = result;
+    return result;
+  }, [worktrees, currentWorktreePath]);
+
+  // Auto mode hook - pass current worktree to get worktree-specific state
+  // Must be after selectedWorktree is defined
+  const autoMode = useAutoMode(selectedWorktree);
+
+  const refreshBoardState = useCallback(async () => {
+    if (!currentProject) return;
+
+    const projectPath = currentProject.path;
+    const beforeFeatures = (
+      queryClient.getQueryData(queryKeys.features.all(projectPath)) as Feature[] | undefined
+    )?.length;
+    const beforeWorktrees = (
+      queryClient.getQueryData(queryKeys.worktrees.all(projectPath)) as
+        | { worktrees?: unknown[] }
+        | undefined
+    )?.worktrees?.length;
+    const beforeRunningAgents = (
+      queryClient.getQueryData(queryKeys.runningAgents.all()) as { count?: number } | undefined
+    )?.count;
+    const beforeAutoModeRunning = autoMode.isRunning;
+
+    try {
+      await Promise.all([
+        queryClient.refetchQueries({ queryKey: queryKeys.features.all(projectPath) }),
+        queryClient.refetchQueries({ queryKey: queryKeys.runningAgents.all() }),
+        queryClient.refetchQueries({ queryKey: queryKeys.worktrees.all(projectPath) }),
+        autoMode.refreshStatus(),
+      ]);
+
+      const afterFeatures = (
+        queryClient.getQueryData(queryKeys.features.all(projectPath)) as Feature[] | undefined
+      )?.length;
+      const afterWorktrees = (
+        queryClient.getQueryData(queryKeys.worktrees.all(projectPath)) as
+          | { worktrees?: unknown[] }
+          | undefined
+      )?.worktrees?.length;
+      const afterRunningAgents = (
+        queryClient.getQueryData(queryKeys.runningAgents.all()) as { count?: number } | undefined
+      )?.count;
+      const afterAutoModeRunning = autoMode.isRunning;
+
+      if (
+        beforeFeatures !== afterFeatures ||
+        beforeWorktrees !== afterWorktrees ||
+        beforeRunningAgents !== afterRunningAgents ||
+        beforeAutoModeRunning !== afterAutoModeRunning
+      ) {
+        logger.info('[Board] Refresh detected state mismatch', {
+          features: { before: beforeFeatures, after: afterFeatures },
+          worktrees: { before: beforeWorktrees, after: afterWorktrees },
+          runningAgents: { before: beforeRunningAgents, after: afterRunningAgents },
+          autoModeRunning: { before: beforeAutoModeRunning, after: afterAutoModeRunning },
+        });
+      }
+    } catch (error) {
+      logger.error('[Board] Failed to refresh board state:', error);
+      toast.error('Failed to refresh board state');
+    }
+  }, [autoMode, currentProject, queryClient]);
+  // Get runningTasks from the hook (scoped to current project/worktree)
+  const runningAutoTasks = autoMode.runningTasks;
+  // Get worktree-specific maxConcurrency from the hook
+  const maxConcurrency = autoMode.maxConcurrency;
+  // Get worktree-specific setter
+  const setMaxConcurrencyForWorktree = useAppStore((state) => state.setMaxConcurrencyForWorktree);
+  // Mutation to persist maxConcurrency to server settings
+  const updateGlobalSettings = useUpdateGlobalSettings({ showSuccessToast: false });
+
+  // Get the current branch from the selected worktree (not from store which may be stale)
+  const currentWorktreeBranch = selectedWorktree?.branch ?? null;
+
+  // Get the branch for the currently selected worktree (for defaulting new features)
+  // Use the branch from selectedWorktree, or fall back to main worktree's branch
+  const selectedWorktreeBranch =
+    currentWorktreeBranch || worktrees.find((w) => w.isMain)?.branch || 'main';
+
+  // Aggregate running auto tasks across all worktrees for this project.
+  // IMPORTANT: Use a derived selector with shallow equality instead of subscribing
+  // to the raw autoModeByWorktree object. The raw subscription caused the entire
+  // BoardView to re-render on EVERY auto-mode state change (any worktree), which
+  // during worktree switches cascaded through DndContext/KanbanBoard and triggered
+  // React error #185 (maximum update depth exceeded), crashing the board view.
+  const runningAutoTasksAllWorktrees = useAppStore(
+    useShallow((state) => {
+      if (!currentProject?.id) return [] as string[];
+      const prefix = `${currentProject.id}::`;
+      const tasks: string[] = [];
+      for (const [key, worktreeState] of Object.entries(state.autoModeByWorktree)) {
+        if (key.startsWith(prefix) && worktreeState.runningTasks) {
+          for (const task of worktreeState.runningTasks) {
+            tasks.push(task);
+          }
+        }
+      }
+      return tasks;
+    })
+  );
+
+  // Get in-progress features for keyboard shortcuts (needed before actions hook)
+  // Must be after runningAutoTasks is defined
+  const inProgressFeaturesForShortcuts = useMemo(() => {
+    return hookFeatures.filter((f) => {
+      const isRunning = runningAutoTasks.includes(f.id);
+      return isRunning || f.status === 'in_progress';
+    });
+  }, [hookFeatures, runningAutoTasks]);
+
+  // Calculate unarchived card counts per branch
+  const branchCardCounts = useMemo(() => {
+    // Use primary worktree branch as default for features without branchName
+    const primaryBranch = worktrees.find((w) => w.isMain)?.branch || 'main';
+    return hookFeatures.reduce(
+      (counts, feature) => {
+        if (feature.status !== 'completed') {
+          const branch = feature.branchName ?? primaryBranch;
+          counts[branch] = (counts[branch] || 0) + 1;
+        }
+        return counts;
+      },
+      {} as Record<string, number>
+    );
+  }, [hookFeatures, worktrees]);
+
+  // Recovery handler for BoardErrorBoundary: reset worktree selection to main
+  // so the board can re-render without the stale worktree state that caused the crash.
+  // Wrapped in startTransition to batch with concurrent React updates and avoid
+  // triggering another cascade during recovery.
+  const handleBoardRecover = useCallback(() => {
+    if (!currentProject) return;
+    const mainWorktree = worktrees.find((w) => w.isMain);
+    const mainBranch = mainWorktree?.branch || 'main';
+    startTransition(() => {
+      setCurrentWorktree(currentProject.path, null, mainBranch);
+    });
+  }, [currentProject, worktrees, setCurrentWorktree]);
+
+  // Helper function to add and select a worktree
+  const addAndSelectWorktree = useCallback(
+    (worktreeResult: { path: string; branch: string }) => {
+      if (!currentProject) return;
+
+      const currentWorktrees = getWorktrees(currentProject.path);
+      const existingWorktree = currentWorktrees.find((w) => w.branch === worktreeResult.branch);
+
+      // Only add if it doesn't already exist (to avoid duplicates)
+      if (!existingWorktree) {
+        const newWorktreeInfo = {
+          path: worktreeResult.path,
+          branch: worktreeResult.branch,
+          isMain: false,
+          isCurrent: false,
+          hasWorktree: true,
+        };
+        setWorktrees(currentProject.path, [...currentWorktrees, newWorktreeInfo]);
+      }
+      // Select the worktree (whether it existed or was just added)
+      setCurrentWorktree(currentProject.path, worktreeResult.path, worktreeResult.branch);
+    },
+    [currentProject, getWorktrees, setWorktrees, setCurrentWorktree]
+  );
+
+  // Extract all action handlers into a hook
+  const {
+    handleAddFeature,
+    handleUpdateFeature,
+    handleDeleteFeature,
+    handleStartImplementation,
+    handleVerifyFeature,
+    handleResumeFeature,
+    handleManualVerify,
+    handleMoveBackToInProgress,
+    handleOpenFollowUp,
+    handleSendFollowUp,
+    handleCompleteFeature,
+    handleUnarchiveFeature,
+    handleViewOutput,
+    handleOutputModalNumberKeyPress,
+    handleForceStopFeature,
+    handleStartNextFeatures,
+    handleArchiveAllVerified,
+    handleDuplicateFeature,
+    handleDuplicateAsChildMultiple,
+  } = useBoardActions({
+    currentProject,
+    features: hookFeatures,
+    runningAutoTasks: runningAutoTasksAllWorktrees,
+    loadFeatures,
+    persistFeatureCreate,
+    persistFeatureUpdate,
+    persistFeatureDelete,
+    saveCategory,
+    setEditingFeature,
+    setShowOutputModal,
+    setOutputFeature,
+    followUpFeature,
+    followUpPrompt,
+    followUpImagePaths,
+    setFollowUpFeature,
+    setFollowUpPrompt,
+    setFollowUpImagePaths,
+    setFollowUpPreviewMap,
+    setShowFollowUpDialog,
+    inProgressFeaturesForShortcuts,
+    outputFeature,
+    projectPath: currentProject?.path || null,
+    onWorktreeCreated: () => setWorktreeRefreshKey((k) => k + 1),
+    onWorktreeAutoSelect: addAndSelectWorktree,
+    currentWorktreeBranch,
+    stopFeature: autoMode.stopFeature,
+  });
+
+  // Handler for bulk updating multiple features
+  const handleBulkUpdate = useCallback(
+    async (updates: Partial<Feature>, workMode: 'current' | 'auto' | 'custom') => {
+      if (!currentProject || selectedFeatureIds.size === 0) return;
+
+      try {
+        // Determine final branch name based on work mode:
+        // - 'current': Use selected worktree branch if available, otherwise undefined (work on main)
+        // - 'auto': Auto-generate branch name based on current branch
+        // - 'custom': Use the provided branch name
+        let finalBranchName: string | undefined;
+
+        if (workMode === 'current') {
+          // If a worktree is selected, use its branch; otherwise work on main (undefined = no branch assignment)
+          finalBranchName = currentWorktreeBranch || undefined;
+        } else if (workMode === 'auto') {
+          // Auto-generate a branch name based on primary branch (main/master) and timestamp
+          // Always use primary branch to avoid nested feature/feature/... paths
+          const baseBranch = getPrimaryWorktreeBranch(currentProject.path) || 'main';
+          const timestamp = Date.now();
+          const randomSuffix = Math.random().toString(36).substring(2, 6);
+          finalBranchName = `feature/${baseBranch}-${timestamp}-${randomSuffix}`;
+        } else {
+          // Custom mode - use provided branch name
+          finalBranchName = updates.branchName || undefined;
+        }
+
+        // Create worktree for 'auto' or 'custom' modes when we have a branch name
+        if ((workMode === 'auto' || workMode === 'custom') && finalBranchName) {
+          try {
+            const electronApi = getElectronAPI();
+            if (electronApi?.worktree?.create) {
+              const result = await electronApi.worktree.create(
+                currentProject.path,
+                finalBranchName
+              );
+              if (result.success && result.worktree) {
+                logger.info(
+                  `Worktree for branch "${finalBranchName}" ${
+                    result.worktree?.isNew ? 'created' : 'already exists'
+                  }`
+                );
+                // Auto-select the worktree when creating/using it for bulk update
+                addAndSelectWorktree(result.worktree);
+                // Refresh worktree list in UI
+                setWorktreeRefreshKey((k) => k + 1);
+              } else if (!result.success) {
+                logger.error(
+                  `Failed to create worktree for branch "${finalBranchName}":`,
+                  result.error
+                );
+                toast.error('Failed to create worktree', {
+                  description: result.error || 'An error occurred',
+                });
+                return; // Don't proceed with update if worktree creation failed
+              }
+            }
+          } catch (error) {
+            logger.error('Error creating worktree:', error);
+            toast.error('Failed to create worktree', {
+              description: error instanceof Error ? error.message : 'An error occurred',
+            });
+            return; // Don't proceed with update if worktree creation failed
+          }
+        }
+
+        // Use the final branch name in updates
+        const finalUpdates = {
+          ...updates,
+          branchName: finalBranchName,
+        };
+
+        const api = getHttpApiClient();
+        const featureIds = Array.from(selectedFeatureIds);
+        const result = await api.features.bulkUpdate(currentProject.path, featureIds, finalUpdates);
+
+        if (result.success) {
+          // Invalidate React Query cache to refetch features with server-updated values
+          loadFeatures();
+          toast.success(`Updated ${result.updatedCount} features`);
+          exitSelectionMode();
+        } else {
+          toast.error('Failed to update some features', {
+            description: `${result.failedCount} features failed to update`,
+          });
+        }
+      } catch (error) {
+        logger.error('Bulk update failed:', error);
+        toast.error('Failed to update features');
+      }
+    },
+    [
+      currentProject,
+      selectedFeatureIds,
+      loadFeatures,
+      exitSelectionMode,
+      getPrimaryWorktreeBranch,
+      addAndSelectWorktree,
+      currentWorktreeBranch,
+      setWorktreeRefreshKey,
+    ]
+  );
+
+  // Handler for bulk deleting multiple features
+  const handleBulkDelete = useCallback(async () => {
+    if (!currentProject || selectedFeatureIds.size === 0) return;
+
+    try {
+      const api = getHttpApiClient();
+      const featureIds = Array.from(selectedFeatureIds);
+      const result = await api.features.bulkDelete(currentProject.path, featureIds);
+
+      const successfullyDeletedIds =
+        result.results?.filter((r) => r.success).map((r) => r.featureId) ?? [];
+
+      if (successfullyDeletedIds.length > 0) {
+        // Delete from local state without calling the API again
+        successfullyDeletedIds.forEach((featureId) => {
+          useAppStore.getState().removeFeature(featureId);
+        });
+        toast.success(`Deleted ${successfullyDeletedIds.length} features`);
+      }
+
+      if (result.failedCount && result.failedCount > 0) {
+        toast.error('Failed to delete some features', {
+          description: `${result.failedCount} features failed to delete`,
+        });
+      }
+
+      // Exit selection mode and reload if the operation was at least partially processed.
+      if (result.results) {
+        exitSelectionMode();
+        loadFeatures();
+      } else if (!result.success) {
+        toast.error('Failed to delete features', { description: result.error });
+      }
+    } catch (error) {
+      logger.error('Bulk delete failed:', error);
+      toast.error('Failed to delete features');
+    }
+  }, [currentProject, selectedFeatureIds, exitSelectionMode, loadFeatures]);
+
+  // Get selected features for mass edit dialog
+  const selectedFeatures = useMemo(() => {
+    return hookFeatures.filter((f) => selectedFeatureIds.has(f.id));
+  }, [hookFeatures, selectedFeatureIds]);
+
+  // Get backlog feature IDs in current branch for "Select All"
+  const allSelectableFeatureIds = useMemo(() => {
+    return hookFeatures
+      .filter((f) => {
+        // Only backlog features
+        if (f.status !== 'backlog') return false;
+
+        // Filter by current worktree branch
+        const featureBranch = f.branchName;
+        if (!featureBranch) {
+          // No branch assigned - only selectable on primary worktree
+          return currentWorktreePath === null;
+        }
+        if (currentWorktreeBranch === null) {
+          // Viewing main but branch hasn't been initialized
+          return currentProject?.path
+            ? isPrimaryWorktreeBranch(currentProject.path, featureBranch)
+            : false;
+        }
+        // Match by branch name
+        return featureBranch === currentWorktreeBranch;
+      })
+      .map((f) => f.id);
+  }, [
+    hookFeatures,
+    currentWorktreePath,
+    currentWorktreeBranch,
+    currentProject?.path,
+    isPrimaryWorktreeBranch,
+  ]);
+
+  // Get waiting_approval feature IDs in current branch for "Select All"
+  const allSelectableWaitingApprovalFeatureIds = useMemo(() => {
+    return hookFeatures
+      .filter((f) => {
+        // Only waiting_approval features
+        if (f.status !== 'waiting_approval') return false;
+
+        // Filter by current worktree branch
+        const featureBranch = f.branchName;
+        if (!featureBranch) {
+          // No branch assigned - only selectable on primary worktree
+          return currentWorktreePath === null;
+        }
+        if (currentWorktreeBranch === null) {
+          // Viewing main but branch hasn't been initialized
+          return currentProject?.path
+            ? isPrimaryWorktreeBranch(currentProject.path, featureBranch)
+            : false;
+        }
+        // Match by branch name
+        return featureBranch === currentWorktreeBranch;
+      })
+      .map((f) => f.id);
+  }, [
+    hookFeatures,
+    currentWorktreePath,
+    currentWorktreeBranch,
+    currentProject?.path,
+    isPrimaryWorktreeBranch,
+  ]);
+
+  // Handler for bulk verifying multiple features
+  const handleBulkVerify = useCallback(async () => {
+    if (!currentProject || selectedFeatureIds.size === 0) return;
+
+    try {
+      const api = getHttpApiClient();
+      const featureIds = Array.from(selectedFeatureIds);
+      const updates = { status: 'verified' as const };
+
+      // Use bulk update API for efficient batch processing
+      const result = await api.features.bulkUpdate(currentProject.path, featureIds, updates);
+
+      if (result.success) {
+        // Invalidate React Query cache to refetch features with server-updated values
+        loadFeatures();
+        toast.success(`Verified ${result.updatedCount} features`);
+        exitSelectionMode();
+      } else {
+        toast.error('Failed to verify some features', {
+          description: `${result.failedCount} features failed to verify`,
+        });
+      }
+    } catch (error) {
+      logger.error('Bulk verify failed:', error);
+      toast.error('Failed to verify features');
+    }
+  }, [currentProject, selectedFeatureIds, loadFeatures, exitSelectionMode]);
+
+  // Helper that creates a feature and immediately starts it (used by conflict handlers and the Make button)
+  const handleAddAndStartFeature = useCallback(
+    async (featureData: Parameters<typeof handleAddFeature>[0]): Promise<string | null> => {
+      let createdFeatureId: string | null = null;
+      try {
+        // Create feature directly with in_progress status to avoid brief backlog flash
+        const createdFeature = await handleAddFeature({
+          ...featureData,
+          initialStatus: 'in_progress',
+        });
+        createdFeatureId = createdFeature?.id ?? null;
+      } catch (error) {
+        logger.error('Failed to create feature:', error);
+        toast.error('Failed to create feature', {
+          description: error instanceof Error ? error.message : 'An error occurred',
+        });
+        return null;
+      }
+
+      const latestFeatures = useAppStore.getState().features;
+      const newFeature = createdFeatureId
+        ? latestFeatures.find((f) => f.id === createdFeatureId)
+        : undefined;
+
+      if (newFeature) {
+        try {
+          await handleStartImplementation(newFeature);
+        } catch (startError) {
+          logger.error('Failed to start implementation for feature:', startError);
+          toast.error('Failed to start feature implementation', {
+            description: startError instanceof Error ? startError.message : 'An error occurred',
+          });
+        }
+      } else {
+        logger.error('Could not find newly created feature to start it automatically.');
+        toast.error('Failed to auto-start feature', {
+          description: 'The feature was created but could not be started automatically.',
+        });
+      }
+
+      return createdFeatureId;
+    },
+    [handleAddFeature, handleStartImplementation]
+  );
+
+  // Handler for Quick Add - creates a feature with minimal data using defaults
+  const handleQuickAdd = useCallback(
+    async (
+      description: string,
+      modelEntry: {
+        model: string;
+        thinkingLevel?: string;
+        reasoningEffort?: string;
+        providerId?: string;
+      }
+    ) => {
+      // Generate a title from the first line of the description
+      const title = description.split('\n')[0].substring(0, 100);
+
+      await handleAddFeature({
+        title,
+        description,
+        category: '',
+        images: [],
+        imagePaths: [],
+        skipTests: defaultSkipTests,
+        model: resolveModelString(modelEntry.model) as ModelAlias,
+        thinkingLevel: (modelEntry.thinkingLevel as ThinkingLevel) || 'none',
+        reasoningEffort: modelEntry.reasoningEffort as ReasoningEffort,
+        providerId: modelEntry.providerId,
+        branchName: addFeatureUseSelectedWorktreeBranch ? selectedWorktreeBranch : undefined,
+        priority: 2,
+        planningMode: useAppStore.getState().defaultPlanningMode ?? 'skip',
+        requirePlanApproval: useAppStore.getState().defaultRequirePlanApproval ?? false,
+        dependencies: [],
+        workMode: addFeatureUseSelectedWorktreeBranch ? 'custom' : 'current',
+      });
+    },
+    [
+      handleAddFeature,
+      defaultSkipTests,
+      addFeatureUseSelectedWorktreeBranch,
+      selectedWorktreeBranch,
+    ]
+  );
+
+  // Handler for Quick Add & Start - creates and immediately starts a feature
+  const handleQuickAddAndStart = useCallback(
+    async (
+      description: string,
+      modelEntry: {
+        model: string;
+        thinkingLevel?: string;
+        reasoningEffort?: string;
+        providerId?: string;
+      }
+    ) => {
+      // Generate a title from the first line of the description
+      const title = description.split('\n')[0].substring(0, 100);
+
+      await handleAddAndStartFeature({
+        title,
+        description,
+        category: '',
+        images: [],
+        imagePaths: [],
+        skipTests: defaultSkipTests,
+        model: resolveModelString(modelEntry.model) as ModelAlias,
+        thinkingLevel: (modelEntry.thinkingLevel as ThinkingLevel) || 'none',
+        reasoningEffort: modelEntry.reasoningEffort as ReasoningEffort,
+        providerId: modelEntry.providerId,
+        branchName: addFeatureUseSelectedWorktreeBranch ? selectedWorktreeBranch : undefined,
+        priority: 2,
+        planningMode: useAppStore.getState().defaultPlanningMode ?? 'skip',
+        requirePlanApproval: useAppStore.getState().defaultRequirePlanApproval ?? false,
+        dependencies: [],
+        workMode: addFeatureUseSelectedWorktreeBranch ? 'custom' : 'current',
+        initialStatus: 'in_progress',
+      });
+    },
+    [
+      handleAddAndStartFeature,
+      defaultSkipTests,
+      addFeatureUseSelectedWorktreeBranch,
+      selectedWorktreeBranch,
+    ]
+  );
+
+  // Handler for template selection - creates a feature from a template
+  const handleTemplateSelect = useCallback(
+    async (template: FeatureTemplate) => {
+      const modelEntry = template.model ||
+        useAppStore.getState().defaultFeatureModel || { model: 'claude-opus' };
+
+      // Start the template immediately (same behavior as clicking "Make")
+      await handleQuickAddAndStart(template.prompt, modelEntry);
+    },
+    [handleQuickAddAndStart]
+  );
+
+  // Handler for managing PR comments - opens the PR Comment Resolution dialog
+  const handleAddressPRComments = useCallback((worktree: WorktreeInfo, prInfo: PRInfo) => {
+    setPRCommentDialogPRInfo({
+      number: prInfo.number,
+      title: prInfo.title,
+      // Pass the worktree's branch so features are created on the correct worktree
+      headRefName: worktree.branch,
+      // Pass the PR URL so features are created with prUrl set
+      url: prInfo.url,
+    });
+    setShowPRCommentDialog(true);
+  }, []);
+
+  // Handler for auto-addressing PR comments - immediately creates and starts a feature task
+  const handleAutoAddressPRComments = useCallback(
+    async (worktree: WorktreeInfo, prInfo: PRInfo) => {
+      if (!prInfo.number) {
+        toast.error('Cannot address PR comments', {
+          description: 'No PR number available for this worktree.',
+        });
+        return;
+      }
+
+      const featureData = {
+        title: `Address PR #${prInfo.number} Review Comments`,
+        category: 'Maintenance',
+        description: `Read the review requests on PR #${prInfo.number} and address any feedback the best you can.`,
+        images: [],
+        imagePaths: [],
+        skipTests: defaultSkipTests,
+        model: resolveModelString('opus'),
+        thinkingLevel: 'none' as const,
+        branchName: worktree.branch,
+        workMode: 'custom' as const,
+        priority: 1,
+        planningMode: 'skip' as const,
+        requirePlanApproval: false,
+        dependencies: [],
+      };
+
+      const createdFeatureId = await handleAddAndStartFeature(featureData);
+
+      // Set prUrl on the created feature if the PR has a URL
+      if (prInfo.url && createdFeatureId) {
+        updateFeature(createdFeatureId, { prUrl: prInfo.url });
+        try {
+          await persistFeatureUpdate(createdFeatureId, { prUrl: prInfo.url });
+        } catch (error) {
+          logger.error('Failed to persist PR URL on created feature:', error);
+        }
+      }
+    },
+    [handleAddAndStartFeature, defaultSkipTests, updateFeature, persistFeatureUpdate]
+  );
+
+  // Handler for resolving conflicts - opens dialog to select remote branch, then creates a feature
+  const handleResolveConflicts = useCallback((worktree: WorktreeInfo) => {
+    setSelectedWorktreeForAction(worktree);
+    setShowMergeRebaseDialog(true);
+  }, []);
+
+  // Handler called when merge/rebase fails due to conflicts and user wants to create a feature to resolve them
+  const handleCreateMergeConflictResolutionFeature = useCallback(
+    async (conflictInfo: MergeConflictInfo) => {
+      const isRebase = conflictInfo.operationType === 'rebase';
+      const isCherryPick = conflictInfo.operationType === 'cherry-pick';
+      const conflictFilesInfo =
+        conflictInfo.conflictFiles && conflictInfo.conflictFiles.length > 0
+          ? `\n\nConflicting files:\n${conflictInfo.conflictFiles.map((f) => `- ${f}`).join('\n')}`
+          : '';
+
+      let description: string;
+      let title: string;
+
+      if (isRebase) {
+        description = `Fetch the latest changes from ${conflictInfo.sourceBranch} and rebase the current branch (${conflictInfo.targetBranch}) onto ${conflictInfo.sourceBranch}. Use "git fetch" followed by "git rebase ${conflictInfo.sourceBranch}" to replay commits on top of the remote branch for a linear history. If rebase conflicts arise, resolve them one commit at a time using "git rebase --continue" after fixing each conflict. After completing the rebase, ensure the code compiles and tests pass.${conflictFilesInfo}`;
+        title = `Rebase & Resolve Conflicts: ${conflictInfo.targetBranch} onto ${conflictInfo.sourceBranch}`;
+      } else if (isCherryPick) {
+        description = `Resolve cherry-pick conflicts when cherry-picking commits from "${conflictInfo.sourceBranch}" into "${conflictInfo.targetBranch}". The cherry-pick was attempted but encountered conflicts that need to be resolved manually. Cherry-pick the commits again using "git cherry-pick <commit-hashes>", resolve any conflicts, then use "git cherry-pick --continue" after fixing each conflict. After completing the cherry-pick, ensure the code compiles and tests pass.${conflictFilesInfo}`;
+        title = `Resolve Cherry-Pick Conflicts: ${conflictInfo.sourceBranch} → ${conflictInfo.targetBranch}`;
+      } else {
+        description = `Resolve merge conflicts when merging "${conflictInfo.sourceBranch}" into "${conflictInfo.targetBranch}". The merge was started but encountered conflicts that need to be resolved manually. After resolving all conflicts, ensure the code compiles and tests pass, then complete the merge by committing the resolved changes.${conflictFilesInfo}`;
+        title = `Resolve Merge Conflicts: ${conflictInfo.sourceBranch} → ${conflictInfo.targetBranch}`;
+      }
+
+      const featureData = {
+        title,
+        category: 'Maintenance',
+        description,
+        images: [],
+        imagePaths: [],
+        skipTests: defaultSkipTests,
+        model: resolveModelString('opus'),
+        thinkingLevel: 'none' as const,
+        branchName: conflictInfo.targetBranch,
+        workMode: 'custom' as const, // Use the target branch where conflicts need to be resolved
+        priority: 1, // High priority for conflict resolution
+        planningMode: 'skip' as const,
+        requirePlanApproval: false,
+      };
+
+      await handleAddAndStartFeature(featureData);
+    },
+    [handleAddAndStartFeature, defaultSkipTests]
+  );
+
+  // Handler called when branch switch stash reapply causes merge conflicts.
+  // Shows a dialog to let the user choose between manual or AI resolution.
+  const handleBranchSwitchConflict = useCallback((conflictInfo: BranchSwitchConflictInfo) => {
+    setBranchConflictData({ type: 'branch-switch', info: conflictInfo });
+    setShowBranchConflictDialog(true);
+  }, []);
+
+  // Handler called when checkout fails AND the stash-pop restoration produces merge conflicts.
+  // Shows a dialog to let the user choose between manual or AI resolution.
+  const handleStashPopConflict = useCallback((conflictInfo: StashPopConflictInfo) => {
+    setBranchConflictData({ type: 'stash-pop', info: conflictInfo });
+    setShowBranchConflictDialog(true);
+  }, []);
+
+  // Handler called when the user selects "Resolve with AI" from the branch conflict dialog.
+  // Creates and starts the AI-assisted conflict resolution feature task.
+  const handleBranchConflictResolveWithAI = useCallback(
+    async (conflictData: BranchConflictData) => {
+      if (conflictData.type === 'branch-switch') {
+        const conflictInfo = conflictData.info;
+        const description = `Resolve merge conflicts that occurred when switching from "${conflictInfo.previousBranch}" to "${conflictInfo.branchName}". Local changes were stashed before switching and reapplying them caused conflicts. Please resolve all merge conflicts, ensure the code compiles and tests pass.`;
+
+        const featureData = {
+          title: `Resolve Stash Conflicts: switch to ${conflictInfo.branchName}`,
+          category: 'Maintenance',
+          description,
+          images: [],
+          imagePaths: [],
+          skipTests: defaultSkipTests,
+          model: resolveModelString('opus'),
+          thinkingLevel: 'none' as const,
+          branchName: conflictInfo.branchName,
+          workMode: 'custom' as const,
+          priority: 1,
+          planningMode: 'skip' as const,
+          requirePlanApproval: false,
+        };
+
+        await handleAddAndStartFeature(featureData);
+      } else {
+        const conflictInfo = conflictData.info;
+        const description =
+          `Resolve merge conflicts that occurred when attempting to switch to branch "${conflictInfo.branchName}". ` +
+          `The checkout failed and, while restoring the previously stashed local changes, git reported merge conflicts. ` +
+          `${conflictInfo.stashPopConflictMessage} ` +
+          `Please review all conflicted files, resolve the conflicts, ensure the code compiles and tests pass, ` +
+          `then re-attempt the branch switch.`;
+
+        const featureData = {
+          title: `Resolve Stash-Pop Conflicts: branch switch to ${conflictInfo.branchName}`,
+          category: 'Maintenance',
+          description,
+          images: [],
+          imagePaths: [],
+          skipTests: defaultSkipTests,
+          model: resolveModelString('opus'),
+          thinkingLevel: 'none' as const,
+          branchName: conflictInfo.branchName,
+          workMode: 'custom' as const,
+          priority: 1,
+          planningMode: 'skip' as const,
+          requirePlanApproval: false,
+        };
+
+        await handleAddAndStartFeature(featureData);
+      }
+    },
+    [handleAddAndStartFeature, defaultSkipTests]
+  );
+
+  // Handler called when stash apply/pop results in merge conflicts and user wants AI resolution
+  const handleStashApplyConflict = useCallback(
+    async (conflictInfo: StashApplyConflictInfo) => {
+      const operationLabel = conflictInfo.operation === 'pop' ? 'popping' : 'applying';
+      const conflictFilesList =
+        conflictInfo.conflictFiles.length > 0
+          ? `\n\nConflicted files:\n${conflictInfo.conflictFiles.map((f) => `- ${f}`).join('\n')}`
+          : '';
+
+      const description =
+        `Resolve merge conflicts that occurred when ${operationLabel} stash "${conflictInfo.stashRef}" ` +
+        `on branch "${conflictInfo.branchName}". ` +
+        `The stash was ${conflictInfo.operation === 'pop' ? 'popped' : 'applied'} but resulted in merge conflicts ` +
+        `that need to be resolved. Please review all conflicted files, resolve the conflicts, ` +
+        `ensure the code compiles and tests pass, then commit the resolved changes.` +
+        conflictFilesList;
+
+      const featureData = {
+        title: `Resolve Stash Apply Conflicts: ${conflictInfo.stashRef} on ${conflictInfo.branchName}`,
+        category: 'Maintenance',
+        description,
+        images: [],
+        imagePaths: [],
+        skipTests: defaultSkipTests,
+        model: resolveModelString('opus'),
+        thinkingLevel: 'none' as const,
+        branchName: conflictInfo.branchName,
+        workMode: 'custom' as const,
+        priority: 1, // High priority for conflict resolution
+        planningMode: 'skip' as const,
+        requirePlanApproval: false,
+      };
+
+      await handleAddAndStartFeature(featureData);
+    },
+    [handleAddAndStartFeature, defaultSkipTests]
+  );
+
+  // NOTE: Auto mode polling loop has been moved to the backend.
+  // The frontend now just toggles the backend's auto loop via API calls.
+  // See use-auto-mode.ts for the start/stop logic that calls the backend.
+
+  // Listen for backlog plan events (for background generation)
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.backlogPlan) return;
+
+    const unsubscribe = api.backlogPlan.onEvent((data: unknown) => {
+      const event = data as { type: string; result?: BacklogPlanResult; error?: string };
+      if (event.type === 'backlog_plan_complete') {
+        setIsGeneratingPlan(false);
+        if (event.result && event.result.changes?.length > 0) {
+          setPendingBacklogPlan(event.result);
+          toast.success('Plan ready! Click to review.', {
+            duration: 10000,
+            action: {
+              label: 'Review',
+              onClick: () => setShowPlanDialog(true),
+            },
+          });
+        } else {
+          toast.info('No changes generated. Try again with a different prompt.');
+        }
+      } else if (event.type === 'backlog_plan_error') {
+        setIsGeneratingPlan(false);
+        toast.error(`Plan generation failed: ${event.error}`);
+      }
+    });
+
+    return unsubscribe;
+  }, []);
+
+  // Load any saved plan from disk when opening the board
+  useEffect(() => {
+    if (!currentProject || pendingBacklogPlan) return;
+
+    let isActive = true;
+    const loadSavedPlan = async () => {
+      const api = getElectronAPI();
+      if (!api?.backlogPlan) return;
+
+      const result = await api.backlogPlan.status(currentProject.path);
+      if (
+        isActive &&
+        result.success &&
+        result.savedPlan?.result &&
+        result.savedPlan.result.changes?.length > 0
+      ) {
+        setPendingBacklogPlan(result.savedPlan.result);
+      }
+    };
+
+    loadSavedPlan();
+    return () => {
+      isActive = false;
+    };
+  }, [currentProject, pendingBacklogPlan]);
+
+  // Use keyboard shortcuts hook (after actions hook)
+  useBoardKeyboardShortcuts({
+    features: hookFeatures,
+    runningAutoTasks,
+    onAddFeature: () => setShowAddDialog(true),
+    onStartNextFeatures: handleStartNextFeatures,
+    onViewOutput: handleViewOutput,
+  });
+
+  // Use drag and drop hook
+  const {
+    activeFeature,
+    handleDragStart,
+    handleDragEnd,
+    pendingDependencyLink,
+    clearPendingDependencyLink,
+  } = useBoardDragDrop({
+    features: hookFeatures,
+    currentProject,
+    runningAutoTasks: runningAutoTasksAllWorktrees,
+    persistFeatureUpdate,
+    handleStartImplementation,
+    stopFeature: autoMode.stopFeature,
+  });
+
+  // Handle dependency link creation
+  const handleCreateDependencyLink = useCallback(
+    async (linkType: DependencyLinkType) => {
+      if (!pendingDependencyLink || !currentProject) return;
+
+      const { draggedFeature, targetFeature } = pendingDependencyLink;
+
+      if (linkType === 'parent') {
+        // Dragged feature depends on target (target is parent)
+        // Add targetFeature.id to draggedFeature.dependencies
+        const currentDeps = draggedFeature.dependencies || [];
+        if (!currentDeps.includes(targetFeature.id)) {
+          const newDeps = [...currentDeps, targetFeature.id];
+          updateFeature(draggedFeature.id, { dependencies: newDeps });
+          await persistFeatureUpdate(draggedFeature.id, { dependencies: newDeps });
+          toast.success('Dependency link created', {
+            description: `"${draggedFeature.description.slice(0, 30)}..." now depends on "${targetFeature.description.slice(0, 30)}..."`,
+          });
+        }
+      } else {
+        // Target feature depends on dragged (dragged is parent)
+        // Add draggedFeature.id to targetFeature.dependencies
+        const currentDeps = targetFeature.dependencies || [];
+        if (!currentDeps.includes(draggedFeature.id)) {
+          const newDeps = [...currentDeps, draggedFeature.id];
+          updateFeature(targetFeature.id, { dependencies: newDeps });
+          await persistFeatureUpdate(targetFeature.id, { dependencies: newDeps });
+          toast.success('Dependency link created', {
+            description: `"${targetFeature.description.slice(0, 30)}..." now depends on "${draggedFeature.description.slice(0, 30)}..."`,
+          });
+        }
+      }
+
+      clearPendingDependencyLink();
+    },
+    [
+      pendingDependencyLink,
+      currentProject,
+      updateFeature,
+      persistFeatureUpdate,
+      clearPendingDependencyLink,
+    ]
+  );
+
+  // Use background hook for visual settings (background image, opacity, etc.)
+  const { backgroundSettings, backgroundImageStyle } = useBoardBackground({
+    currentProject,
+  });
+
+  // Use column features hook
+  const { getColumnFeatures, completedFeatures } = useBoardColumnFeatures({
+    features: hookFeatures,
+    runningAutoTasks,
+    runningAutoTasksAllWorktrees,
+    searchQuery,
+    currentWorktreePath,
+    currentWorktreeBranch,
+    projectPath: currentProject?.path || null,
+    sortNewestCardOnTop: defaultSortNewestCardOnTop,
+  });
+
+  // Build columnFeaturesMap for ListView
+  // pipelineConfig is now from usePipelineConfig React Query hook at the top
+  const columnFeaturesMap = useMemo(() => {
+    const columns = getColumnsWithPipeline(pipelineConfig ?? null);
+    const map: Record<string, typeof hookFeatures> = {};
+    for (const column of columns) {
+      map[column.id] = getColumnFeatures(column.id as FeatureStatusWithPipeline);
+    }
+    return map;
+  }, [pipelineConfig, getColumnFeatures]);
+
+  // Find feature for pending plan approval
+  const pendingApprovalFeature = useMemo(() => {
+    if (!pendingPlanApproval) return null;
+    return hookFeatures.find((f) => f.id === pendingPlanApproval.featureId) || null;
+  }, [pendingPlanApproval, hookFeatures]);
+
+  // Handle plan approval
+  const handlePlanApprove = useCallback(
+    async (editedPlan?: string) => {
+      if (!pendingPlanApproval || !currentProject) return;
+
+      const featureId = pendingPlanApproval.featureId;
+      setIsPlanApprovalLoading(true);
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode?.approvePlan) {
+          throw new Error('Plan approval API not available');
+        }
+
+        const result = await api.autoMode.approvePlan(
+          pendingPlanApproval.projectPath,
+          pendingPlanApproval.featureId,
+          true,
+          editedPlan
+        );
+
+        if (result.success) {
+          // Immediately update local feature state to hide "Approve Plan" button
+          // Get current feature to preserve version
+          const currentFeature = hookFeatures.find((f) => f.id === featureId);
+          updateFeature(featureId, {
+            planSpec: {
+              status: 'approved',
+              content: editedPlan || pendingPlanApproval.planContent,
+              version: currentFeature?.planSpec?.version || 1,
+              approvedAt: new Date().toISOString(),
+              reviewedByUser: true,
+            },
+          });
+          // Reload features from server to ensure sync
+          loadFeatures();
+        } else {
+          logger.error('Failed to approve plan:', result.error);
+        }
+      } catch (error) {
+        logger.error('Error approving plan:', error);
+      } finally {
+        setIsPlanApprovalLoading(false);
+        setPendingPlanApproval(null);
+      }
+    },
+    [
+      pendingPlanApproval,
+      currentProject,
+      setPendingPlanApproval,
+      updateFeature,
+      loadFeatures,
+      hookFeatures,
+    ]
+  );
+
+  // Handle plan rejection
+  const handlePlanReject = useCallback(
+    async (feedback?: string) => {
+      if (!pendingPlanApproval || !currentProject) return;
+
+      const featureId = pendingPlanApproval.featureId;
+      setIsPlanApprovalLoading(true);
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode?.approvePlan) {
+          throw new Error('Plan approval API not available');
+        }
+
+        const result = await api.autoMode.approvePlan(
+          pendingPlanApproval.projectPath,
+          pendingPlanApproval.featureId,
+          false,
+          undefined,
+          feedback
+        );
+
+        if (result.success) {
+          // Immediately update local feature state
+          // Get current feature to preserve version
+          const currentFeature = hookFeatures.find((f) => f.id === featureId);
+          updateFeature(featureId, {
+            status: 'backlog',
+            planSpec: {
+              status: 'rejected',
+              content: pendingPlanApproval.planContent,
+              version: currentFeature?.planSpec?.version || 1,
+              reviewedByUser: true,
+            },
+          });
+          // Reload features from server to ensure sync
+          loadFeatures();
+        } else {
+          logger.error('Failed to reject plan:', result.error);
+        }
+      } catch (error) {
+        logger.error('Error rejecting plan:', error);
+      } finally {
+        setIsPlanApprovalLoading(false);
+        setPendingPlanApproval(null);
+      }
+    },
+    [
+      pendingPlanApproval,
+      currentProject,
+      setPendingPlanApproval,
+      updateFeature,
+      loadFeatures,
+      hookFeatures,
+    ]
+  );
+
+  // Handle opening approval dialog from feature card button
+  const handleOpenApprovalDialog = useCallback(
+    (feature: Feature) => {
+      if (!feature.planSpec?.content || !currentProject) return;
+
+      // Determine the planning mode for approval (skip should never have a plan requiring approval)
+      const mode = feature.planningMode;
+      const approvalMode: 'lite' | 'spec' | 'full' =
+        mode === 'lite' || mode === 'spec' || mode === 'full' ? mode : 'spec';
+
+      // Re-open the approval dialog with the feature's plan data
+      setPendingPlanApproval({
+        featureId: feature.id,
+        projectPath: currentProject.path,
+        planContent: feature.planSpec.content,
+        planningMode: approvalMode,
+      });
+    },
+    [currentProject, setPendingPlanApproval]
+  );
+
+  if (!currentProject) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="board-view-no-project">
+        <p className="text-muted-foreground">No project selected</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex-1 flex flex-col overflow-hidden content-bg relative"
+      data-testid="board-view"
+    >
+      {/* Header */}
+      <BoardHeader
+        projectPath={currentProject.path}
+        maxConcurrency={maxConcurrency}
+        runningAgentsCount={runningAutoTasks.length}
+        onConcurrencyChange={(newMaxConcurrency) => {
+          if (currentProject) {
+            // If selectedWorktree is undefined or it's the main worktree, branchName will be null.
+            // Otherwise, use the branch name.
+            const branchName = selectedWorktree?.isMain === false ? selectedWorktree.branch : null;
+            setMaxConcurrencyForWorktree(currentProject.id, branchName, newMaxConcurrency);
+
+            // Persist to server settings so capacity checks use the correct value
+            const worktreeKey = `${currentProject.id}::${branchName ?? '__main__'}`;
+            updateGlobalSettings.mutate({
+              autoModeByWorktree: {
+                [worktreeKey]: { maxConcurrency: newMaxConcurrency },
+              },
+            });
+
+            // Also update backend if auto mode is running.
+            // Use restartWithConcurrency to avoid toggle flickering - it restarts
+            // the backend without toggling isRunning off/on in the UI.
+            if (autoMode.isRunning) {
+              autoMode.restartWithConcurrency().catch((error) => {
+                logger.error('[AutoMode] Failed to restart with new concurrency:', error);
+              });
+            }
+          }
+        }}
+        isAutoModeRunning={autoMode.isRunning}
+        onAutoModeToggle={(enabled) => {
+          if (enabled) {
+            autoMode.start().catch((error) => {
+              logger.error('[AutoMode] Failed to start:', error);
+              toast.error('Failed to start auto mode', {
+                description: error instanceof Error ? error.message : 'Unknown error',
+              });
+            });
+          } else {
+            autoMode.stop().catch((error) => {
+              logger.error('[AutoMode] Failed to stop:', error);
+              toast.error('Failed to stop auto mode', {
+                description: error instanceof Error ? error.message : 'Unknown error',
+              });
+            });
+          }
+        }}
+        onOpenPlanDialog={() => setShowPlanDialog(true)}
+        hasPendingPlan={Boolean(pendingBacklogPlan)}
+        onOpenPendingPlan={() => setShowPlanDialog(true)}
+        isMounted={isMounted}
+        searchQuery={searchQuery}
+        onSearchChange={setSearchQuery}
+        isCreatingSpec={isCreatingSpec}
+        creatingSpecProjectPath={creatingSpecProjectPath}
+        onShowBoardBackground={() => setShowBoardBackgroundModal(true)}
+        onRefreshBoard={refreshBoardState}
+        viewMode={viewMode}
+        onViewModeChange={setViewMode}
+      />
+
+      {/* BoardErrorBoundary catches render errors during worktree switches (e.g. React
+          error #185 re-render cascades on mobile Safari PWA) and provides a recovery UI
+          that resets to main branch instead of crashing the entire page. */}
+      <BoardErrorBoundary onRecover={handleBoardRecover}>
+        {/* DndContext wraps both WorktreePanel and main content area to enable drag-to-worktree */}
+        <DndContext
+          sensors={sensors}
+          collisionDetection={collisionDetectionStrategy}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+        >
+          {/* Worktree Panel - conditionally rendered based on visibility setting */}
+          {(worktreePanelVisibleByProject[currentProject.path] ?? true) && (
+            <WorktreePanel
+              refreshTrigger={worktreeRefreshKey}
+              projectPath={currentProject.path}
+              onCreateWorktree={() => setShowCreateWorktreeDialog(true)}
+              onDeleteWorktree={(worktree) => {
+                setSelectedWorktreeForAction(worktree);
+                setShowDeleteWorktreeDialog(true);
+              }}
+              onCommit={(worktree) => {
+                setSelectedWorktreeForAction(worktree);
+                setShowCommitWorktreeDialog(true);
+              }}
+              onCreatePR={(worktree) => {
+                setSelectedWorktreeForAction(worktree);
+                setShowCreatePRDialog(true);
+              }}
+              onChangePRNumber={(worktree) => {
+                setSelectedWorktreeForAction(worktree);
+                setShowChangePRNumberDialog(true);
+              }}
+              onCreateBranch={(worktree) => {
+                setSelectedWorktreeForAction(worktree);
+                setShowCreateBranchDialog(true);
+              }}
+              onAddressPRComments={handleAddressPRComments}
+              onAutoAddressPRComments={handleAutoAddressPRComments}
+              onResolveConflicts={handleResolveConflicts}
+              onCreateMergeConflictResolutionFeature={handleCreateMergeConflictResolutionFeature}
+              onBranchSwitchConflict={handleBranchSwitchConflict}
+              onStashPopConflict={handleStashPopConflict}
+              onStashApplyConflict={handleStashApplyConflict}
+              onBranchDeletedDuringMerge={(branchName) => {
+                batchResetBranchFeatures(branchName);
+                setWorktreeRefreshKey((k) => k + 1);
+              }}
+              onRemovedWorktrees={handleRemovedWorktrees}
+              runningFeatureIds={runningAutoTasksAllWorktrees}
+              branchCardCounts={branchCardCounts}
+              features={hookFeatures.map((f) => ({
+                id: f.id,
+                branchName: f.branchName,
+              }))}
+            />
+          )}
+
+          {/* Main Content Area */}
+          <div className="flex-1 flex flex-col overflow-hidden">
+            {/* View Content - Kanban Board or List View */}
+            {isListView ? (
+              <ListView
+                columnFeaturesMap={columnFeaturesMap}
+                allFeatures={hookFeatures}
+                sortConfig={sortConfig}
+                onSortChange={setSortColumn}
+                actionHandlers={{
+                  onEdit: (feature) => setEditingFeature(feature),
+                  onDelete: (featureId) => handleDeleteFeature(featureId),
+                  onViewOutput: handleViewOutput,
+                  onVerify: handleVerifyFeature,
+                  onResume: handleResumeFeature,
+                  onForceStop: handleForceStopFeature,
+                  onManualVerify: handleManualVerify,
+                  onFollowUp: handleOpenFollowUp,
+                  onImplement: handleStartImplementation,
+                  onComplete: handleCompleteFeature,
+                  onViewPlan: (feature) => setViewPlanFeature(feature),
+                  onApprovePlan: handleOpenApprovalDialog,
+                  onSpawnTask: (feature) => {
+                    setSpawnParentFeature(feature);
+                    setShowAddDialog(true);
+                  },
+                  onDuplicate: (feature) => handleDuplicateFeature(feature, false),
+                  onDuplicateAsChild: (feature) => handleDuplicateFeature(feature, true),
+                  onDuplicateAsChildMultiple: (feature) => setDuplicateMultipleFeature(feature),
+                }}
+                runningAutoTasks={runningAutoTasksAllWorktrees}
+                pipelineConfig={pipelineConfig}
+                onAddFeature={() => setShowAddDialog(true)}
+                onQuickAdd={() => setShowQuickAddDialog(true)}
+                onTemplateSelect={handleTemplateSelect}
+                templates={featureTemplates}
+                isSelectionMode={isSelectionMode}
+                selectedFeatureIds={selectedFeatureIds}
+                onToggleFeatureSelection={toggleFeatureSelection}
+                onRowClick={(feature) => {
+                  // Running features should always show logs, even if status is
+                  // stale (still 'backlog'/'ready'/'interrupted' during race window)
+                  const isRunning = runningAutoTasksAllWorktrees.includes(feature.id);
+                  if (isBacklogLikeStatus(feature.status) && !isRunning) {
+                    setEditingFeature(feature);
+                  } else {
+                    handleViewOutput(feature);
+                  }
+                }}
+                sortNewestCardOnTop={defaultSortNewestCardOnTop}
+                className="transition-opacity duration-200"
+              />
+            ) : (
+              <KanbanBoard
+                activeFeature={activeFeature}
+                getColumnFeatures={getColumnFeatures}
+                backgroundImageStyle={backgroundImageStyle}
+                backgroundSettings={backgroundSettings}
+                onEdit={(feature) => setEditingFeature(feature)}
+                onDelete={(featureId) => handleDeleteFeature(featureId)}
+                onViewOutput={handleViewOutput}
+                onVerify={handleVerifyFeature}
+                onResume={handleResumeFeature}
+                onForceStop={handleForceStopFeature}
+                onManualVerify={handleManualVerify}
+                onMoveBackToInProgress={handleMoveBackToInProgress}
+                onFollowUp={handleOpenFollowUp}
+                onComplete={handleCompleteFeature}
+                onImplement={handleStartImplementation}
+                onViewPlan={(feature) => setViewPlanFeature(feature)}
+                onApprovePlan={handleOpenApprovalDialog}
+                onSpawnTask={(feature) => {
+                  setSpawnParentFeature(feature);
+                  setShowAddDialog(true);
+                }}
+                onDuplicate={(feature) => handleDuplicateFeature(feature, false)}
+                onDuplicateAsChild={(feature) => handleDuplicateFeature(feature, true)}
+                onDuplicateAsChildMultiple={(feature) => setDuplicateMultipleFeature(feature)}
+                featuresWithContext={featuresWithContext}
+                runningAutoTasks={runningAutoTasksAllWorktrees}
+                onArchiveAllVerified={() => setShowArchiveAllVerifiedDialog(true)}
+                onAddFeature={() => setShowAddDialog(true)}
+                onQuickAdd={() => setShowQuickAddDialog(true)}
+                onTemplateSelect={handleTemplateSelect}
+                templates={featureTemplates}
+                addFeatureShortcut={keyboardShortcuts.addFeature}
+                onShowCompletedModal={() => setShowCompletedModal(true)}
+                completedCount={completedFeatures.length}
+                pipelineConfig={pipelineConfig ?? null}
+                onOpenPipelineSettings={() => setShowPipelineSettings(true)}
+                isSelectionMode={isSelectionMode}
+                selectionTarget={selectionTarget}
+                selectedFeatureIds={selectedFeatureIds}
+                onToggleFeatureSelection={toggleFeatureSelection}
+                onToggleSelectionMode={toggleSelectionMode}
+                isDragging={activeFeature !== null}
+                onAiSuggest={() => setShowPlanDialog(true)}
+                className="transition-opacity duration-200"
+              />
+            )}
+          </div>
+        </DndContext>
+      </BoardErrorBoundary>
+
+      {/* Selection Action Bar */}
+      {isSelectionMode && (
+        <SelectionActionBar
+          selectedCount={selectedCount}
+          totalCount={
+            selectionTarget === 'waiting_approval'
+              ? allSelectableWaitingApprovalFeatureIds.length
+              : allSelectableFeatureIds.length
+          }
+          onEdit={selectionTarget === 'backlog' ? () => setShowMassEditDialog(true) : undefined}
+          onDelete={selectionTarget === 'backlog' ? handleBulkDelete : undefined}
+          onVerify={selectionTarget === 'waiting_approval' ? handleBulkVerify : undefined}
+          onClear={clearSelection}
+          onSelectAll={() =>
+            selectAll(
+              selectionTarget === 'waiting_approval'
+                ? allSelectableWaitingApprovalFeatureIds
+                : allSelectableFeatureIds
+            )
+          }
+          mode={selectionTarget === 'waiting_approval' ? 'waiting_approval' : 'backlog'}
+        />
+      )}
+
+      {/* Mass Edit Dialog */}
+      <MassEditDialog
+        open={showMassEditDialog}
+        onClose={() => setShowMassEditDialog(false)}
+        selectedFeatures={selectedFeatures}
+        onApply={handleBulkUpdate}
+        branchSuggestions={branchSuggestions}
+        branchCardCounts={branchCardCounts}
+        currentBranch={currentWorktreeBranch || undefined}
+        projectPath={currentProject?.path}
+      />
+
+      {/* Board Background Modal */}
+      <BoardBackgroundModal
+        open={showBoardBackgroundModal}
+        onOpenChange={setShowBoardBackgroundModal}
+      />
+
+      {/* Completed Features Modal */}
+      <CompletedFeaturesModal
+        open={showCompletedModal}
+        onOpenChange={setShowCompletedModal}
+        completedFeatures={completedFeatures}
+        onUnarchive={handleUnarchiveFeature}
+        onDelete={(feature) => setDeleteCompletedFeature(feature)}
+      />
+
+      {/* Delete Completed Feature Confirmation Dialog */}
+      <DeleteCompletedFeatureDialog
+        feature={deleteCompletedFeature}
+        onClose={() => setDeleteCompletedFeature(null)}
+        onConfirm={async () => {
+          if (deleteCompletedFeature) {
+            await handleDeleteFeature(deleteCompletedFeature.id);
+            setDeleteCompletedFeature(null);
+          }
+        }}
+      />
+
+      {/* Add Feature Dialog */}
+      <AddFeatureDialog
+        open={showAddDialog}
+        onOpenChange={(open) => {
+          setShowAddDialog(open);
+          if (!open) {
+            setSpawnParentFeature(null);
+          }
+        }}
+        onAdd={handleAddFeature}
+        onAddAndStart={handleAddAndStartFeature}
+        categorySuggestions={categorySuggestions}
+        branchSuggestions={branchSuggestions}
+        branchCardCounts={branchCardCounts}
+        defaultSkipTests={defaultSkipTests}
+        defaultBranch={selectedWorktreeBranch}
+        currentBranch={currentWorktreeBranch || undefined}
+        isMaximized={isMaximized}
+        parentFeature={spawnParentFeature}
+        allFeatures={hookFeatures}
+        projectPath={currentProject?.path}
+        // When setting is enabled and a non-main worktree is selected, pass its branch to default to 'custom' work mode
+        selectedNonMainWorktreeBranch={
+          addFeatureUseSelectedWorktreeBranch && currentWorktreePath !== null
+            ? currentWorktreeBranch || undefined
+            : undefined
+        }
+        // When the worktree setting is disabled, force 'current' branch mode
+        forceCurrentBranchMode={!addFeatureUseSelectedWorktreeBranch}
+      />
+
+      {/* Quick Add Dialog */}
+      <QuickAddDialog
+        open={showQuickAddDialog}
+        onOpenChange={setShowQuickAddDialog}
+        onAdd={handleQuickAdd}
+        onAddAndStart={handleQuickAddAndStart}
+      />
+
+      {/* Dependency Link Dialog */}
+      <DependencyLinkDialog
+        open={Boolean(pendingDependencyLink)}
+        onOpenChange={(open) => !open && clearPendingDependencyLink()}
+        draggedFeature={pendingDependencyLink?.draggedFeature || null}
+        targetFeature={pendingDependencyLink?.targetFeature || null}
+        onLink={handleCreateDependencyLink}
+      />
+
+      {/* Edit Feature Dialog */}
+      <EditFeatureDialog
+        feature={editingFeature}
+        onClose={() => setEditingFeature(null)}
+        onUpdate={handleUpdateFeature}
+        categorySuggestions={categorySuggestions}
+        branchSuggestions={branchSuggestions}
+        branchCardCounts={branchCardCounts}
+        currentBranch={currentWorktreeBranch || undefined}
+        isMaximized={isMaximized}
+        allFeatures={hookFeatures}
+        projectPath={currentProject?.path}
+      />
+
+      {/* Agent Output Modal */}
+      <AgentOutputModal
+        open={showOutputModal}
+        onClose={() => {
+          setShowOutputModal(false);
+          handledFeatureIdRef.current = undefined;
+        }}
+        featureDescription={outputFeature?.description || ''}
+        featureId={outputFeature?.id || ''}
+        featureStatus={outputFeature?.status}
+        onNumberKeyPress={handleOutputModalNumberKeyPress}
+        branchName={outputFeature?.branchName}
+      />
+
+      {/* Duplicate as Child Multiple Times Dialog */}
+      <DuplicateCountDialog
+        open={duplicateMultipleFeature !== null}
+        onOpenChange={(open) => {
+          if (!open) setDuplicateMultipleFeature(null);
+        }}
+        onConfirm={async (count) => {
+          if (duplicateMultipleFeature) {
+            await handleDuplicateAsChildMultiple(duplicateMultipleFeature, count);
+            setDuplicateMultipleFeature(null);
+          }
+        }}
+        featureTitle={duplicateMultipleFeature?.title || duplicateMultipleFeature?.description}
+      />
+
+      {/* Archive All Verified Dialog */}
+      <ArchiveAllVerifiedDialog
+        open={showArchiveAllVerifiedDialog}
+        onOpenChange={setShowArchiveAllVerifiedDialog}
+        verifiedCount={getColumnFeatures('verified').length}
+        onConfirm={async () => {
+          await handleArchiveAllVerified();
+          setShowArchiveAllVerifiedDialog(false);
+        }}
+      />
+
+      {/* Pipeline Settings Dialog */}
+      <PipelineSettingsDialog
+        open={showPipelineSettings}
+        onClose={() => setShowPipelineSettings(false)}
+        projectPath={currentProject.path}
+        pipelineConfig={pipelineConfig ?? null}
+        onSave={async (config) => {
+          const api = getHttpApiClient();
+          const result = await api.pipeline.saveConfig(currentProject.path, config);
+          if (!result.success) {
+            throw new Error(result.error || 'Failed to save pipeline config');
+          }
+          // Invalidate React Query cache to refetch updated config
+          queryClient.invalidateQueries({
+            queryKey: queryKeys.pipeline.config(currentProject.path),
+          });
+          // Also update Zustand for backward compatibility
+          setPipelineConfig(currentProject.path, config);
+        }}
+      />
+
+      {/* Follow-Up Prompt Dialog */}
+      <FollowUpDialog
+        open={showFollowUpDialog}
+        onOpenChange={handleFollowUpDialogChange}
+        feature={followUpFeature}
+        prompt={followUpPrompt}
+        imagePaths={followUpImagePaths}
+        previewMap={followUpPreviewMap}
+        onPromptChange={setFollowUpPrompt}
+        onImagePathsChange={setFollowUpImagePaths}
+        onPreviewMapChange={setFollowUpPreviewMap}
+        onSend={handleSendFollowUp}
+        isMaximized={isMaximized}
+        promptHistory={followUpPromptHistory}
+        onHistoryAdd={addToPromptHistory}
+      />
+
+      {/* Backlog Plan Dialog */}
+      <BacklogPlanDialog
+        open={showPlanDialog}
+        onClose={() => setShowPlanDialog(false)}
+        projectPath={currentProject.path}
+        onPlanApplied={loadFeatures}
+        pendingPlanResult={pendingBacklogPlan}
+        setPendingPlanResult={setPendingBacklogPlan}
+        isGeneratingPlan={isGeneratingPlan}
+        setIsGeneratingPlan={setIsGeneratingPlan}
+        currentBranch={planUseSelectedWorktreeBranch ? selectedWorktreeBranch : undefined}
+      />
+
+      {/* Plan Approval Dialog */}
+      <PlanApprovalDialog
+        open={pendingPlanApproval !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setPendingPlanApproval(null);
+          }
+        }}
+        feature={pendingApprovalFeature}
+        planContent={pendingPlanApproval?.planContent || ''}
+        onApprove={handlePlanApprove}
+        onReject={handlePlanReject}
+        isLoading={isPlanApprovalLoading}
+      />
+
+      {/* View Plan Dialog (read-only) */}
+      {viewPlanFeature && viewPlanFeature.planSpec?.content && (
+        <PlanApprovalDialog
+          open={true}
+          onOpenChange={(open) => !open && setViewPlanFeature(null)}
+          feature={viewPlanFeature}
+          planContent={viewPlanFeature.planSpec.content}
+          onApprove={() => setViewPlanFeature(null)}
+          onReject={() => setViewPlanFeature(null)}
+          viewOnly={true}
+        />
+      )}
+
+      {/* Create Worktree Dialog */}
+      <CreateWorktreeDialog
+        open={showCreateWorktreeDialog}
+        onOpenChange={setShowCreateWorktreeDialog}
+        projectPath={currentProject.path}
+        onCreated={(newWorktree) => {
+          // Add the new worktree to the store immediately to avoid race condition
+          // when deriving currentWorktreeBranch for filtering
+          const currentWorktrees = getWorktrees(currentProject.path);
+          const newWorktreeInfo = {
+            path: newWorktree.path,
+            branch: newWorktree.branch,
+            isMain: false,
+            isCurrent: false,
+            hasWorktree: true,
+          };
+          setWorktrees(currentProject.path, [...currentWorktrees, newWorktreeInfo]);
+
+          // Now set the current worktree with both path and branch
+          setCurrentWorktree(currentProject.path, newWorktree.path, newWorktree.branch);
+
+          // Trigger refresh to get full worktree details (hasChanges, etc.)
+          setWorktreeRefreshKey((k) => k + 1);
+        }}
+      />
+
+      {/* Delete Worktree Dialog */}
+      <DeleteWorktreeDialog
+        open={showDeleteWorktreeDialog}
+        onOpenChange={setShowDeleteWorktreeDialog}
+        projectPath={currentProject.path}
+        worktree={selectedWorktreeForAction}
+        affectedFeatureCount={
+          selectedWorktreeForAction
+            ? hookFeatures.filter((f) => f.branchName === selectedWorktreeForAction.branch).length
+            : 0
+        }
+        defaultDeleteBranch={getDefaultDeleteBranch(currentProject.path)}
+        onDeleted={(deletedWorktree, _deletedBranch) => {
+          // 1. Reset current worktree to main FIRST. This must happen
+          //    BEFORE removing from the list to ensure downstream hooks
+          //    (useAutoMode, useBoardFeatures) see a valid worktree and
+          //    never try to render the deleted worktree.
+          const mainBranch = worktrees.find((w) => w.isMain)?.branch || 'main';
+          setCurrentWorktree(currentProject.path, null, mainBranch);
+
+          // 2. Immediately remove the deleted worktree from the store's
+          //    worktree list so the UI never renders a stale tab/dropdown
+          //    item that can be clicked and cause a crash.
+          const remainingWorktrees = worktrees.filter(
+            (w) => !pathsEqual(w.path, deletedWorktree.path)
+          );
+          setWorktrees(currentProject.path, remainingWorktrees);
+
+          // 3. Cancel any in-flight worktree queries, then optimistically
+          //    update the React Query cache so the worktree disappears
+          //    from the dropdown immediately. Cancelling first prevents a
+          //    pending refetch from overwriting our optimistic update with
+          //    stale server data.
+          const worktreeQueryKey = queryKeys.worktrees.all(currentProject.path);
+          void queryClient.cancelQueries({ queryKey: worktreeQueryKey });
+          queryClient.setQueryData(
+            worktreeQueryKey,
+            (
+              old:
+                | {
+                    worktrees: WorktreeInfo[];
+                    removedWorktrees: Array<{ path: string; branch: string }>;
+                  }
+                | undefined
+            ) => {
+              if (!old) return old;
+              return {
+                ...old,
+                worktrees: old.worktrees.filter(
+                  (w: WorktreeInfo) => !pathsEqual(w.path, deletedWorktree.path)
+                ),
+              };
+            }
+          );
+
+          // 4. Batch-reset features assigned to the deleted worktree in one
+          //    store mutation to avoid N individual updateFeature calls that
+          //    cascade into React error #185.
+          batchResetBranchFeatures(deletedWorktree.branch);
+
+          // 5. Schedule a deferred refetch to reconcile with the server.
+          //    The server has already completed the deletion, so this
+          //    refetch will return data without the deleted worktree.
+          //    This protects against stale in-flight polling responses
+          //    that may slip through the cancelQueries window and
+          //    overwrite the optimistic update above.
+          const projectPathForRefetch = currentProject.path;
+          setTimeout(() => {
+            queryClient.invalidateQueries({
+              queryKey: queryKeys.worktrees.all(projectPathForRefetch),
+            });
+          }, 1500);
+
+          setSelectedWorktreeForAction(null);
+
+          // 6. Force-sync settings immediately so the reset worktree
+          //    selection is persisted before any potential page reload.
+          //    Without this, the debounced sync (1s) may not complete
+          //    in time and the stale worktree path survives in
+          //    server settings, causing the deleted worktree to
+          //    reappear on next load.
+          forceSyncSettingsToServer().then((ok) => {
+            if (!ok) {
+              logger.warn(
+                'forceSyncSettingsToServer failed after worktree deletion; stale path may reappear on reload'
+              );
+            }
+          });
+        }}
+      />
+
+      {/* Merge & Rebase Dialog */}
+      <MergeRebaseDialog
+        open={showMergeRebaseDialog}
+        onOpenChange={setShowMergeRebaseDialog}
+        worktree={selectedWorktreeForAction}
+        onCreateConflictResolutionFeature={handleCreateMergeConflictResolutionFeature}
+      />
+
+      {/* Branch Switch / Stash Pop Conflict Dialog */}
+      <BranchConflictDialog
+        open={showBranchConflictDialog}
+        onOpenChange={setShowBranchConflictDialog}
+        conflictData={branchConflictData}
+        onResolveWithAI={handleBranchConflictResolveWithAI}
+      />
+
+      {/* Commit Worktree Dialog */}
+      <CommitWorktreeDialog
+        open={showCommitWorktreeDialog}
+        onOpenChange={setShowCommitWorktreeDialog}
+        worktree={selectedWorktreeForAction}
+        onCommitted={() => {
+          setWorktreeRefreshKey((k) => k + 1);
+          setSelectedWorktreeForAction(null);
+        }}
+      />
+
+      {/* Create PR Dialog */}
+      <CreatePRDialog
+        open={showCreatePRDialog}
+        onOpenChange={setShowCreatePRDialog}
+        worktree={selectedWorktreeForAction}
+        projectPath={currentProject?.path || null}
+        defaultBaseBranch={selectedWorktreeBranch}
+        onCreated={(prUrl) => {
+          // If a PR was created and we have the worktree branch, update all features on that branch with the PR URL
+          if (prUrl && selectedWorktreeForAction?.branch) {
+            const branchName = selectedWorktreeForAction.branch;
+            const featuresToUpdate = hookFeatures.filter((f) => f.branchName === branchName);
+
+            // Update local state synchronously
+            featuresToUpdate.forEach((feature) => {
+              updateFeature(feature.id, { prUrl });
+            });
+
+            // Persist changes asynchronously and in parallel
+            Promise.all(
+              featuresToUpdate.map((feature) => persistFeatureUpdate(feature.id, { prUrl }))
+            ).catch((err) => logger.error('Error in handleMove:', err));
+          }
+          setWorktreeRefreshKey((k) => k + 1);
+          setSelectedWorktreeForAction(null);
+        }}
+      />
+
+      {/* Change PR Number Dialog */}
+      <ChangePRNumberDialog
+        open={showChangePRNumberDialog}
+        onOpenChange={setShowChangePRNumberDialog}
+        worktree={selectedWorktreeForAction}
+        projectPath={currentProject?.path || null}
+        onChanged={() => {
+          setWorktreeRefreshKey((k) => k + 1);
+          setSelectedWorktreeForAction(null);
+        }}
+      />
+
+      {/* Create Branch Dialog */}
+      <CreateBranchDialog
+        open={showCreateBranchDialog}
+        onOpenChange={setShowCreateBranchDialog}
+        worktree={selectedWorktreeForAction}
+        onCreated={() => {
+          setWorktreeRefreshKey((k) => k + 1);
+          setSelectedWorktreeForAction(null);
+        }}
+      />
+
+      {/* PR Comment Resolution Dialog */}
+      {prCommentDialogPRInfo && (
+        <PRCommentResolutionDialog
+          open={showPRCommentDialog}
+          onOpenChange={(open) => {
+            setShowPRCommentDialog(open);
+            if (!open) setPRCommentDialogPRInfo(null);
+          }}
+          pr={prCommentDialogPRInfo}
+        />
+      )}
+
+      {/* Init Script Indicator - floating overlay for worktree init script status */}
+      {getShowInitScriptIndicator(currentProject.path) && (
+        <InitScriptIndicator projectPath={currentProject.path} />
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/board-controls.tsx b/temp_repo/apps/ui/src/components/views/board-view/board-controls.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2baa7cebc74d90d5c0a03fd111ec732ed001d557
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/board-controls.tsx
@@ -0,0 +1,39 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { ImageIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface BoardControlsProps {
+  isMounted: boolean;
+  onShowBoardBackground: () => void;
+}
+
+export function BoardControls({ isMounted, onShowBoardBackground }: BoardControlsProps) {
+  if (!isMounted) return null;
+
+  const buttonClass = cn(
+    'inline-flex h-8 items-center justify-center rounded-md px-2 text-sm font-medium transition-all duration-200 cursor-pointer',
+    'text-muted-foreground hover:text-foreground hover:bg-accent',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+    'border border-border'
+  );
+
+  return (
+    <div className="flex items-center gap-2">
+      {/* Board Background Button */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={onShowBoardBackground}
+            className={buttonClass}
+            data-testid="board-background-button"
+          >
+            <ImageIcon className="w-4 h-4" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Board Background Settings</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/board-error-boundary.tsx b/temp_repo/apps/ui/src/components/views/board-view/board-error-boundary.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..98bfb25404c6dd6792c69d62e836074a377d31a8
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/board-error-boundary.tsx
@@ -0,0 +1,74 @@
+import { Component, type ReactNode, type ErrorInfo } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { AlertCircle, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+const logger = createLogger('BoardErrorBoundary');
+
+interface Props {
+  children: ReactNode;
+  /** Called when the user clicks "Recover" - should reset worktree to main */
+  onRecover?: () => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Error boundary for the board's content area (WorktreePanel + KanbanBoard/ListView).
+ *
+ * Catches render errors caused by stale worktree state during worktree switches
+ * (e.g. re-render cascades that trigger React error #185 on mobile Safari PWA).
+ * Instead of crashing the entire page, this shows a recovery UI that resets
+ * the worktree selection to main and retries rendering.
+ */
+export class BoardErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    logger.error('Board content crashed:', {
+      error: error.message,
+      stack: error.stack,
+      componentStack: errorInfo.componentStack,
+    });
+  }
+
+  handleRecover = () => {
+    this.setState({ hasError: false, error: null });
+    this.props.onRecover?.();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex-1 flex flex-col items-center justify-center gap-4 p-6 text-center">
+          <div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center">
+            <AlertCircle className="w-6 h-6 text-destructive" />
+          </div>
+          <div className="space-y-2">
+            <h3 className="text-lg font-semibold text-foreground">Board crashed</h3>
+            <p className="text-sm text-muted-foreground max-w-sm">
+              A rendering error occurred, possibly during a worktree switch. Click recover to reset
+              to the main branch and retry.
+            </p>
+          </div>
+          <Button variant="outline" size="sm" onClick={this.handleRecover} className="gap-2">
+            <RefreshCw className="w-4 h-4" />
+            Recover
+          </Button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/board-header.tsx b/temp_repo/apps/ui/src/components/views/board-view/board-header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4a6bb8340edbac7162dd28aaebd21d6f4b6295a5
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/board-header.tsx
@@ -0,0 +1,283 @@
+import { useCallback, useState } from 'react';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Wand2, GitBranch, ClipboardCheck, RefreshCw } from 'lucide-react';
+import { UsagePopover } from '@/components/usage-popover';
+import { useAppStore } from '@/store/app-store';
+import { useSetupStore } from '@/store/setup-store';
+import { useIsTablet } from '@/hooks/use-media-query';
+import { AutoModeSettingsPopover } from './dialogs/auto-mode-settings-popover';
+import { WorktreeSettingsPopover } from './dialogs/worktree-settings-popover';
+import { PlanSettingsPopover } from './dialogs/plan-settings-popover';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { BoardSearchBar } from './board-search-bar';
+import { BoardControls } from './board-controls';
+import { ViewToggle, type ViewMode } from './components';
+import { HeaderMobileMenu } from './header-mobile-menu';
+
+export type { ViewMode };
+
+interface BoardHeaderProps {
+  projectPath: string;
+  maxConcurrency: number;
+  runningAgentsCount: number;
+  onConcurrencyChange: (value: number) => void;
+  isAutoModeRunning: boolean;
+  onAutoModeToggle: (enabled: boolean) => void;
+  onOpenPlanDialog: () => void;
+  hasPendingPlan?: boolean;
+  onOpenPendingPlan?: () => void;
+  isMounted: boolean;
+  // Search bar props
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  isCreatingSpec: boolean;
+  creatingSpecProjectPath?: string;
+  // Board controls props
+  onShowBoardBackground: () => void;
+  onRefreshBoard: () => Promise<void>;
+  // View toggle props
+  viewMode: ViewMode;
+  onViewModeChange: (mode: ViewMode) => void;
+}
+
+// Shared styles for header control containers
+const controlContainerClass =
+  'flex items-center gap-1.5 px-3 h-8 rounded-md bg-secondary border border-border';
+
+export function BoardHeader({
+  projectPath,
+  maxConcurrency,
+  runningAgentsCount,
+  onConcurrencyChange,
+  isAutoModeRunning,
+  onAutoModeToggle,
+  onOpenPlanDialog,
+  hasPendingPlan,
+  onOpenPendingPlan,
+  isMounted,
+  searchQuery,
+  onSearchChange,
+  isCreatingSpec,
+  creatingSpecProjectPath,
+  onShowBoardBackground,
+  onRefreshBoard,
+  viewMode,
+  onViewModeChange,
+}: BoardHeaderProps) {
+  const claudeAuthStatus = useSetupStore((state) => state.claudeAuthStatus);
+  const skipVerificationInAutoMode = useAppStore((state) => state.skipVerificationInAutoMode);
+  const setSkipVerificationInAutoMode = useAppStore((state) => state.setSkipVerificationInAutoMode);
+  const planUseSelectedWorktreeBranch = useAppStore((state) => state.planUseSelectedWorktreeBranch);
+  const setPlanUseSelectedWorktreeBranch = useAppStore(
+    (state) => state.setPlanUseSelectedWorktreeBranch
+  );
+  const addFeatureUseSelectedWorktreeBranch = useAppStore(
+    (state) => state.addFeatureUseSelectedWorktreeBranch
+  );
+  const setAddFeatureUseSelectedWorktreeBranch = useAppStore(
+    (state) => state.setAddFeatureUseSelectedWorktreeBranch
+  );
+  const codexAuthStatus = useSetupStore((state) => state.codexAuthStatus);
+  const zaiAuthStatus = useSetupStore((state) => state.zaiAuthStatus);
+  const geminiAuthStatus = useSetupStore((state) => state.geminiAuthStatus);
+
+  // Worktree panel visibility (per-project)
+  const worktreePanelVisibleByProject = useAppStore((state) => state.worktreePanelVisibleByProject);
+  const setWorktreePanelVisible = useAppStore((state) => state.setWorktreePanelVisible);
+  const isWorktreePanelVisible = worktreePanelVisibleByProject[projectPath] ?? true;
+
+  const handleWorktreePanelToggle = useCallback(
+    async (visible: boolean) => {
+      // Update local store
+      setWorktreePanelVisible(projectPath, visible);
+
+      // Persist to server
+      try {
+        const httpClient = getHttpApiClient();
+        await httpClient.settings.updateProject(projectPath, {
+          worktreePanelVisible: visible,
+        });
+      } catch (error) {
+        console.error('Failed to persist worktree panel visibility:', error);
+      }
+    },
+    [projectPath, setWorktreePanelVisible]
+  );
+
+  const isClaudeCliVerified = !!claudeAuthStatus?.authenticated;
+  const showClaudeUsage = isClaudeCliVerified;
+
+  // Codex usage tracking visibility logic
+  // Show if Codex is authenticated (CLI or API key)
+  const showCodexUsage = !!codexAuthStatus?.authenticated;
+
+  // z.ai usage tracking visibility logic
+  const showZaiUsage = !!zaiAuthStatus?.authenticated;
+
+  // Gemini usage tracking visibility logic
+  const showGeminiUsage = !!geminiAuthStatus?.authenticated;
+
+  // State for mobile actions panel
+  const [showActionsPanel, setShowActionsPanel] = useState(false);
+  const [isRefreshingBoard, setIsRefreshingBoard] = useState(false);
+
+  const isTablet = useIsTablet();
+
+  const handleRefreshBoard = useCallback(async () => {
+    if (isRefreshingBoard) return;
+    setIsRefreshingBoard(true);
+    try {
+      await onRefreshBoard();
+    } finally {
+      setIsRefreshingBoard(false);
+    }
+  }, [isRefreshingBoard, onRefreshBoard]);
+
+  return (
+    <div className="flex items-center justify-between gap-5 px-4 py-2 sm:p-4 border-b border-border bg-glass backdrop-blur-md">
+      <div className="flex items-center gap-4">
+        <BoardSearchBar
+          searchQuery={searchQuery}
+          onSearchChange={onSearchChange}
+          isCreatingSpec={isCreatingSpec}
+          creatingSpecProjectPath={creatingSpecProjectPath}
+          currentProjectPath={projectPath}
+        />
+        {isMounted && <ViewToggle viewMode={viewMode} onViewModeChange={onViewModeChange} />}
+        <BoardControls isMounted={isMounted} onShowBoardBackground={onShowBoardBackground} />
+      </div>
+      <div className="flex gap-4 items-center">
+        {isMounted && !isTablet && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="secondary"
+                size="icon-sm"
+                onClick={handleRefreshBoard}
+                disabled={isRefreshingBoard}
+                aria-label="Refresh board state from server"
+              >
+                <RefreshCw className={isRefreshingBoard ? 'w-4 h-4 animate-spin' : 'w-4 h-4'} />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">Refresh board state from server</TooltipContent>
+          </Tooltip>
+        )}
+        {/* Usage Popover - show if any provider is authenticated, only on desktop */}
+        {isMounted &&
+          !isTablet &&
+          (showClaudeUsage || showCodexUsage || showZaiUsage || showGeminiUsage) && (
+            <UsagePopover />
+          )}
+
+        {/* Tablet/Mobile view: show hamburger menu with all controls */}
+        {isMounted && isTablet && (
+          <HeaderMobileMenu
+            isOpen={showActionsPanel}
+            onToggle={() => setShowActionsPanel(!showActionsPanel)}
+            isWorktreePanelVisible={isWorktreePanelVisible}
+            onWorktreePanelToggle={handleWorktreePanelToggle}
+            maxConcurrency={maxConcurrency}
+            runningAgentsCount={runningAgentsCount}
+            onConcurrencyChange={onConcurrencyChange}
+            isAutoModeRunning={isAutoModeRunning}
+            onAutoModeToggle={onAutoModeToggle}
+            skipVerificationInAutoMode={skipVerificationInAutoMode}
+            onSkipVerificationChange={setSkipVerificationInAutoMode}
+            onOpenPlanDialog={onOpenPlanDialog}
+            showClaudeUsage={showClaudeUsage}
+            showCodexUsage={showCodexUsage}
+            showZaiUsage={showZaiUsage}
+            showGeminiUsage={showGeminiUsage}
+          />
+        )}
+
+        {/* Desktop view: show full controls */}
+        {/* Worktrees Toggle - only show after mount to prevent hydration issues */}
+        {isMounted && !isTablet && (
+          <div className={controlContainerClass} data-testid="worktrees-toggle-container">
+            <GitBranch className="w-4 h-4 text-muted-foreground" />
+            <Label
+              htmlFor="worktrees-toggle"
+              className="text-xs font-medium cursor-pointer whitespace-nowrap"
+            >
+              Worktree Bar
+            </Label>
+            <Switch
+              id="worktrees-toggle"
+              checked={isWorktreePanelVisible}
+              onCheckedChange={handleWorktreePanelToggle}
+              data-testid="worktrees-toggle"
+            />
+            <WorktreeSettingsPopover
+              addFeatureUseSelectedWorktreeBranch={addFeatureUseSelectedWorktreeBranch}
+              onAddFeatureUseSelectedWorktreeBranchChange={setAddFeatureUseSelectedWorktreeBranch}
+            />
+          </div>
+        )}
+
+        {/* Auto Mode Toggle - only show after mount to prevent hydration issues */}
+        {isMounted && !isTablet && (
+          <div className={controlContainerClass} data-testid="auto-mode-toggle-container">
+            <Label
+              htmlFor="auto-mode-toggle"
+              className="text-xs font-medium cursor-pointer whitespace-nowrap"
+            >
+              Auto Mode
+            </Label>
+            <span
+              className="text-[10px] font-medium text-muted-foreground bg-muted/60 px-1.5 py-0.5 rounded"
+              data-testid="auto-mode-max-concurrency"
+              title="Max concurrent agents"
+            >
+              {maxConcurrency}
+            </span>
+            <Switch
+              id="auto-mode-toggle"
+              checked={isAutoModeRunning}
+              onCheckedChange={onAutoModeToggle}
+              data-testid="auto-mode-toggle"
+            />
+            <AutoModeSettingsPopover
+              skipVerificationInAutoMode={skipVerificationInAutoMode}
+              onSkipVerificationChange={setSkipVerificationInAutoMode}
+              maxConcurrency={maxConcurrency}
+              runningAgentsCount={runningAgentsCount}
+              onConcurrencyChange={onConcurrencyChange}
+            />
+          </div>
+        )}
+
+        {/* Plan Button with Settings - only show on desktop, tablet/mobile has it in the panel */}
+        {isMounted && !isTablet && (
+          <div className={controlContainerClass} data-testid="plan-button-container">
+            {hasPendingPlan && (
+              <button
+                onClick={onOpenPendingPlan || onOpenPlanDialog}
+                className="flex items-center gap-1.5 text-emerald-500 hover:text-emerald-400 transition-colors"
+                data-testid="plan-review-button"
+              >
+                <ClipboardCheck className="w-4 h-4" />
+              </button>
+            )}
+            <button
+              onClick={onOpenPlanDialog}
+              className="flex items-center gap-1.5 hover:text-foreground transition-colors"
+              data-testid="plan-backlog-button"
+            >
+              <Wand2 className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium">Plan</span>
+            </button>
+            <PlanSettingsPopover
+              planUseSelectedWorktreeBranch={planUseSelectedWorktreeBranch}
+              onPlanUseSelectedWorktreeBranchChange={setPlanUseSelectedWorktreeBranch}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/board-search-bar.tsx b/temp_repo/apps/ui/src/components/views/board-view/board-search-bar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ed4be40289b014787000362c9327e048a2a738c3
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/board-search-bar.tsx
@@ -0,0 +1,87 @@
+import { useRef, useEffect } from 'react';
+import { Input } from '@/components/ui/input';
+import { Search, X } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+
+interface BoardSearchBarProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  isCreatingSpec: boolean;
+  creatingSpecProjectPath?: string;
+  currentProjectPath?: string;
+}
+
+export function BoardSearchBar({
+  searchQuery,
+  onSearchChange,
+  isCreatingSpec,
+  creatingSpecProjectPath,
+  currentProjectPath,
+}: BoardSearchBarProps) {
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  // Focus search input when "/" is pressed
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Only focus if not typing in an input/textarea
+      if (
+        e.key === '/' &&
+        !(e.target instanceof HTMLInputElement) &&
+        !(e.target instanceof HTMLTextAreaElement)
+      ) {
+        e.preventDefault();
+        searchInputRef.current?.focus();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  return (
+    <div className="relative max-w-md flex-1 flex items-center gap-2">
+      <div className="relative flex-1">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+        <Input
+          ref={searchInputRef}
+          type="text"
+          placeholder="Search features by keyword..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="pl-9 pr-12 border-border"
+          data-testid="kanban-search-input"
+        />
+        {searchQuery ? (
+          <button
+            onClick={() => onSearchChange('')}
+            className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-sm hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
+            data-testid="kanban-search-clear"
+            aria-label="Clear search"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        ) : (
+          <span
+            className="absolute right-2 top-1/2 -translate-y-1/2 px-1.5 py-0.5 text-[10px] font-mono rounded bg-brand-500/10 border border-brand-500/30 text-brand-400/70"
+            data-testid="kanban-search-hotkey"
+          >
+            /
+          </span>
+        )}
+      </div>
+      {/* Spec Creation Loading Badge */}
+      {isCreatingSpec && currentProjectPath === creatingSpecProjectPath && (
+        <div
+          className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-brand-500/10 border border-brand-500/20 shrink-0"
+          title="Creating App Specification"
+          data-testid="spec-creation-badge"
+        >
+          <Spinner size="xs" className="shrink-0" />
+          <span className="text-xs font-medium text-brand-500 whitespace-nowrap">
+            Creating spec
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/add-feature-button.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/add-feature-button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..abf3527046cfbba46d3da2a5522947bfd9c3b547
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/add-feature-button.tsx
@@ -0,0 +1,188 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Plus, ChevronDown, Zap, FileText } from 'lucide-react';
+import type { FeatureTemplate } from '@automaker/types';
+import { cn } from '@/lib/utils';
+
+interface AddFeatureButtonProps {
+  /** Handler for the primary "Add Feature" action (opens full dialog) */
+  onAddFeature: () => void;
+  /** Handler for Quick Add submission */
+  onQuickAdd: () => void;
+  /** Handler for template selection */
+  onTemplateSelect: (template: FeatureTemplate) => void;
+  /** Available templates (filtered to enabled ones) */
+  templates: FeatureTemplate[];
+  /** Whether to show as a small icon button or full button */
+  compact?: boolean;
+  /** Whether the button should take full width */
+  fullWidth?: boolean;
+  /** Additional className */
+  className?: string;
+  /** Test ID prefix */
+  testIdPrefix?: string;
+  /** Shortcut text to display (optional) */
+  shortcut?: string;
+}
+
+export function AddFeatureButton({
+  onAddFeature,
+  onQuickAdd,
+  onTemplateSelect,
+  templates,
+  compact = false,
+  fullWidth = false,
+  className,
+  testIdPrefix = 'add-feature',
+  shortcut,
+}: AddFeatureButtonProps) {
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  // Filter to only enabled templates and sort by order
+  const enabledTemplates = templates
+    .filter((t) => t.enabled !== false)
+    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+
+  const handleTemplateClick = (template: FeatureTemplate) => {
+    setDropdownOpen(false);
+    onTemplateSelect(template);
+  };
+
+  if (compact) {
+    // Compact mode: Three small icon segments
+    return (
+      <div className={cn('flex', className)}>
+        {/* Segment 1: Add Feature */}
+        <Button
+          variant="default"
+          size="sm"
+          className="h-6 w-6 p-0 rounded-r-none"
+          onClick={onAddFeature}
+          title="Add Feature"
+          data-testid={`${testIdPrefix}-button`}
+        >
+          <Plus className="w-3.5 h-3.5" />
+        </Button>
+        {/* Segment 2: Quick Add */}
+        <Button
+          variant="default"
+          size="sm"
+          className="h-6 w-6 p-0 rounded-none border-l border-primary-foreground/20"
+          onClick={onQuickAdd}
+          title="Quick Add"
+          data-testid={`${testIdPrefix}-quick-add-button`}
+        >
+          <Zap className="w-3 h-3" />
+        </Button>
+        {/* Segment 3: Templates dropdown */}
+        {enabledTemplates.length > 0 && (
+          <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="default"
+                size="sm"
+                className="h-6 w-4 p-0 rounded-l-none border-l border-primary-foreground/20"
+                title="Templates"
+                data-testid={`${testIdPrefix}-dropdown-trigger`}
+              >
+                <ChevronDown className="w-3 h-3" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" sideOffset={4}>
+              {enabledTemplates.map((template) => (
+                <DropdownMenuItem
+                  key={template.id}
+                  onClick={() => handleTemplateClick(template)}
+                  data-testid={`template-menu-item-${template.id}`}
+                >
+                  <FileText className="w-4 h-4 mr-2" />
+                  <span className="truncate max-w-[200px]">{template.name}</span>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </div>
+    );
+  }
+
+  // Full mode: Three-segment button
+  return (
+    <div className={cn('flex justify-center', fullWidth && 'w-full', className)}>
+      {/* Segment 1: Add Feature */}
+      <Button
+        variant="default"
+        size="sm"
+        className={cn('h-8 text-xs px-3 rounded-r-none', fullWidth && 'flex-1')}
+        onClick={onAddFeature}
+        data-testid={`${testIdPrefix}-button`}
+      >
+        <Plus className="w-3.5 h-3.5 mr-1.5" />
+        Add Feature
+        {shortcut && (
+          <span className="ml-auto pl-2 text-[10px] font-mono opacity-70 bg-black/20 px-1 py-0.5 rounded">
+            {shortcut}
+          </span>
+        )}
+      </Button>
+      {/* Segment 2: Quick Add */}
+      <Button
+        variant="default"
+        size="sm"
+        className={cn(
+          'h-8 text-xs px-2.5 rounded-none border-l border-primary-foreground/20',
+          fullWidth && 'flex-shrink-0'
+        )}
+        onClick={onQuickAdd}
+        data-testid={`${testIdPrefix}-quick-add-button`}
+      >
+        <Zap className="w-3.5 h-3.5 mr-1" />
+        Quick
+      </Button>
+      {/* Segment 3: Templates dropdown */}
+      <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="default"
+            size="sm"
+            className={cn(
+              'h-8 rounded-l-none border-l border-primary-foreground/20',
+              enabledTemplates.length > 0 ? 'px-1.5' : 'w-7 p-0',
+              fullWidth && 'flex-shrink-0'
+            )}
+            aria-label="Templates"
+            title="Templates"
+            data-testid={`${testIdPrefix}-dropdown-trigger`}
+          >
+            <FileText className="w-3.5 h-3.5 mr-0.5" />
+            <ChevronDown className="w-2.5 h-2.5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" sideOffset={4}>
+          {enabledTemplates.length > 0 ? (
+            enabledTemplates.map((template) => (
+              <DropdownMenuItem
+                key={template.id}
+                onClick={() => handleTemplateClick(template)}
+                data-testid={`template-menu-item-${template.id}`}
+              >
+                <FileText className="w-4 h-4 mr-2" />
+                <span className="truncate max-w-[200px]">{template.name}</span>
+              </DropdownMenuItem>
+            ))
+          ) : (
+            <DropdownMenuItem disabled className="text-muted-foreground">
+              No templates configured
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/empty-state-card.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/empty-state-card.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..30ccdefc92cc4e85200bda2db0f39ccc8795bfef
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/empty-state-card.tsx
@@ -0,0 +1,120 @@
+import { memo } from 'react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Kbd } from '@/components/ui/kbd';
+import { formatShortcut } from '@/store/app-store';
+import { getEmptyStateConfig, type EmptyStateConfig } from '../constants';
+import { Lightbulb, Play, Clock, CheckCircle2, Sparkles, Wand2 } from 'lucide-react';
+
+const ICON_MAP = {
+  lightbulb: Lightbulb,
+  play: Play,
+  clock: Clock,
+  check: CheckCircle2,
+  sparkles: Sparkles,
+} as const;
+
+interface EmptyStateCardProps {
+  columnId: string;
+  columnTitle?: string;
+  /** Keyboard shortcut for adding features (from settings) */
+  addFeatureShortcut?: string;
+  /** Whether the column is empty due to active filters */
+  isFilteredEmpty?: boolean;
+  /** Whether we're in read-only mode (hide actions) */
+  isReadOnly?: boolean;
+  /** Called when user clicks "Use AI Suggestions" */
+  onAiSuggest?: () => void;
+  /** Card opacity (matches board settings) */
+  opacity?: number;
+  /** Enable glassmorphism effect */
+  glassmorphism?: boolean;
+  /** Custom config override for pipeline steps */
+  customConfig?: Partial<EmptyStateConfig>;
+}
+
+export const EmptyStateCard = memo(function EmptyStateCard({
+  columnId,
+  addFeatureShortcut,
+  isFilteredEmpty = false,
+  isReadOnly = false,
+  onAiSuggest,
+  customConfig,
+}: EmptyStateCardProps) {
+  // Get base config and merge with custom overrides
+  const baseConfig = getEmptyStateConfig(columnId);
+  const config: EmptyStateConfig = { ...baseConfig, ...customConfig };
+
+  const IconComponent = ICON_MAP[config.icon];
+  const showActions = !isReadOnly && !isFilteredEmpty;
+  const showShortcut = columnId === 'backlog' && addFeatureShortcut && showActions;
+
+  // Action button handler
+  const handlePrimaryAction = () => {
+    if (!config.primaryAction) return;
+    if (config.primaryAction.actionType === 'ai-suggest') {
+      onAiSuggest?.();
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'w-full h-full min-h-[200px] flex-1',
+        'flex flex-col items-center justify-center',
+        'text-center px-4',
+        'transition-all duration-300 ease-out',
+        'animate-in fade-in duration-300',
+        'group'
+      )}
+      data-testid={`empty-state-card-${columnId}`}
+    >
+      {/* Icon */}
+      <div className="mb-3 text-muted-foreground/30">
+        <IconComponent className="w-8 h-8" />
+      </div>
+
+      {/* Title */}
+      <h4 className="font-medium text-sm text-muted-foreground/50 mb-1">
+        {isFilteredEmpty ? 'No Matching Items' : config.title}
+      </h4>
+
+      {/* Description */}
+      <p className="text-xs text-muted-foreground/40 leading-relaxed max-w-[180px]">
+        {isFilteredEmpty ? 'No features match your current filters.' : config.description}
+      </p>
+
+      {/* Keyboard shortcut hint for backlog */}
+      {showShortcut && (
+        <div className="flex items-center gap-1.5 mt-3 text-muted-foreground/40">
+          <span className="text-xs">Press</span>
+          <Kbd className="bg-muted/30 border-0 px-1.5 py-0.5 text-[10px] text-muted-foreground/50">
+            {formatShortcut(addFeatureShortcut, true)}
+          </Kbd>
+          <span className="text-xs">to add</span>
+        </div>
+      )}
+
+      {/* AI Suggest action for backlog */}
+      {showActions && config.primaryAction && config.primaryAction.actionType === 'ai-suggest' && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="mt-4 h-7 text-xs text-muted-foreground/50 hover:text-muted-foreground/70"
+          onClick={handlePrimaryAction}
+          data-testid={`empty-state-primary-action-${columnId}`}
+        >
+          <Wand2 className="w-3 h-3 mr-1.5" />
+          {config.primaryAction.label}
+        </Button>
+      )}
+
+      {/* Filtered empty state hint */}
+      {isFilteredEmpty && (
+        <p className="text-[10px] mt-2 text-muted-foreground/30 italic">
+          Clear filters to see all items
+        </p>
+      )}
+    </div>
+  );
+});
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/index.ts b/temp_repo/apps/ui/src/components/views/board-view/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e5aa1ea9665ea1d4ef85c6feacf9dca49b9f2db9
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/index.ts
@@ -0,0 +1,34 @@
+export { KanbanCard } from './kanban-card/kanban-card';
+export { KanbanColumn } from './kanban-column';
+export { SelectionActionBar } from './selection-action-bar';
+export { EmptyStateCard } from './empty-state-card';
+export { ViewToggle, type ViewMode } from './view-toggle';
+
+// List view components
+export {
+  ListHeader,
+  LIST_COLUMNS,
+  getColumnById,
+  getColumnWidth,
+  getColumnAlign,
+  ListRow,
+  getFeatureSortValue,
+  sortFeatures,
+  ListView,
+  getFlatFeatures,
+  getTotalFeatureCount,
+  RowActions,
+  createRowActionHandlers,
+  StatusBadge,
+  getStatusLabel,
+  getStatusOrder,
+} from './list-view';
+export type {
+  ListHeaderProps,
+  ListRowProps,
+  ListViewProps,
+  ListViewActionHandlers,
+  RowActionsProps,
+  RowActionHandlers,
+  StatusBadgeProps,
+} from './list-view';
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/agent-info-panel.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/agent-info-panel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..551fcb6adc449e96008112e74f01d25553b8328c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/agent-info-panel.tsx
@@ -0,0 +1,705 @@
+import { memo, useEffect, useState, useMemo, useRef } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { Feature, ThinkingLevel, ReasoningEffort, ParsedTask } from '@/store/app-store';
+import { getProviderFromModel } from '@/lib/utils';
+import { parseAgentContext, formatModelName, DEFAULT_MODEL } from '@/lib/agent-context-parser';
+import { cn } from '@/lib/utils';
+import type { AutoModeEvent } from '@/types/electron';
+import { Brain, ListTodo, Sparkles, Expand, CheckCircle2, Circle, Wrench } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getElectronAPI } from '@/lib/electron';
+import { SummaryDialog } from './summary-dialog';
+import { getProviderIconForModel } from '@/components/ui/provider-icon';
+import { useFeature, useAgentOutput } from '@/hooks/queries';
+import { queryKeys } from '@/lib/query-keys';
+import { getFirstNonEmptySummary } from '@/lib/summary-selection';
+import { useAppStore } from '@/store/app-store';
+import { isMobileDevice } from '@/lib/mobile-detect';
+
+// Global concurrency control for mobile mount staggering.
+// When many AgentInfoPanel instances mount simultaneously (e.g., worktree switch
+// with 50+ cards), we spread queries over a wider window and cap how many
+// panels can be querying concurrently to prevent mobile Safari crashes.
+//
+// The mechanism works in two layers:
+// 1. Random delay (0-6s) - spreads mount times so not all panels try to query at once
+// 2. Concurrency slots (max 4) - even after the delay, only N panels can query simultaneously
+//
+// Instance tracking ensures the queue resets if all panels unmount (e.g., navigation).
+const MOBILE_MAX_CONCURRENT_QUERIES = 4;
+const MOBILE_STAGGER_WINDOW_MS = 6000; // 6s window (vs previous 2s)
+let activeMobileQueryCount = 0;
+let pendingMobileQueue: Array<() => void> = [];
+let mountedPanelCount = 0;
+
+function acquireMobileQuerySlot(): Promise<void> {
+  if (!isMobileDevice) return Promise.resolve();
+  if (activeMobileQueryCount < MOBILE_MAX_CONCURRENT_QUERIES) {
+    activeMobileQueryCount++;
+    return Promise.resolve();
+  }
+  return new Promise<void>((resolve) => {
+    pendingMobileQueue.push(() => {
+      activeMobileQueryCount++;
+      resolve();
+    });
+  });
+}
+
+function releaseMobileQuerySlot(): void {
+  if (!isMobileDevice) return;
+  activeMobileQueryCount = Math.max(0, activeMobileQueryCount - 1);
+  const next = pendingMobileQueue.shift();
+  if (next) next();
+}
+
+function trackPanelMount(): void {
+  if (!isMobileDevice) return;
+  mountedPanelCount++;
+}
+
+function trackPanelUnmount(): void {
+  if (!isMobileDevice) return;
+  mountedPanelCount = Math.max(0, mountedPanelCount - 1);
+  // If all panels unmounted (e.g., navigated away from board or worktree switch),
+  // reset the queue to prevent stale state from blocking future mounts.
+  if (mountedPanelCount === 0) {
+    activeMobileQueryCount = 0;
+    // Drain any pending callbacks so their Promises resolve (components already unmounted)
+    const pending = pendingMobileQueue;
+    pendingMobileQueue = [];
+    for (const cb of pending) cb();
+  }
+}
+
+/**
+ * Formats thinking level for compact display
+ */
+function formatThinkingLevel(level: ThinkingLevel | undefined): string {
+  if (!level || level === 'none') return '';
+  const labels: Record<ThinkingLevel, string> = {
+    none: '',
+    low: 'Low',
+    medium: 'Med',
+    high: 'High',
+    ultrathink: 'Ultra',
+    adaptive: 'Adaptive',
+  };
+  return labels[level];
+}
+
+/**
+ * Formats reasoning effort for compact display
+ */
+function formatReasoningEffort(effort: ReasoningEffort | undefined): string {
+  if (!effort || effort === 'none') return '';
+  const labels: Record<ReasoningEffort, string> = {
+    none: '',
+    minimal: 'Min',
+    low: 'Low',
+    medium: 'Med',
+    high: 'High',
+    xhigh: 'XHigh',
+  };
+  return labels[effort];
+}
+
+interface AgentInfoPanelProps {
+  feature: Feature;
+  projectPath: string;
+  contextContent?: string;
+  summary?: string;
+  isActivelyRunning?: boolean;
+}
+
+export const AgentInfoPanel = memo(function AgentInfoPanel({
+  feature,
+  projectPath,
+  contextContent,
+  summary,
+  isActivelyRunning,
+}: AgentInfoPanelProps) {
+  const queryClient = useQueryClient();
+  const [isSummaryDialogOpen, setIsSummaryDialogOpen] = useState(false);
+  const [isTodosExpanded, setIsTodosExpanded] = useState(false);
+
+  // Track mounted panel count for global queue reset on full unmount
+  useEffect(() => {
+    trackPanelMount();
+    return () => trackPanelUnmount();
+  }, []);
+
+  // Get providers from store for provider-aware model name display
+  // This allows formatModelName to show provider-specific model names (e.g., "GLM 4.7" instead of "Sonnet 4.5")
+  // when a feature was executed using a Claude-compatible provider
+  const claudeCompatibleProviders = useAppStore((state) => state.claudeCompatibleProviders);
+
+  // Memoize the format options to avoid recreating the object on every render
+  const modelFormatOptions = useMemo(
+    () => ({
+      providerId: feature.providerId,
+      claudeCompatibleProviders,
+    }),
+    [feature.providerId, claudeCompatibleProviders]
+  );
+
+  // Track real-time task status updates from WebSocket events
+  const [taskStatusMap, setTaskStatusMap] = useState<
+    Map<string, 'pending' | 'in_progress' | 'completed'>
+  >(new Map());
+  // Track real-time task summary updates from WebSocket events
+  const [taskSummaryMap, setTaskSummaryMap] = useState<Map<string, string | null>>(new Map());
+  // Track last WebSocket event timestamp to know if we're receiving real-time updates
+  const [lastWsEventTimestamp, setLastWsEventTimestamp] = useState<number | null>(null);
+
+  // Determine if we should poll for updates
+  const shouldFetchData = feature.status !== 'backlog' && feature.status !== 'merge_conflict';
+
+  // On mobile, stagger initial per-card queries to prevent a mount storm.
+  // When a worktree loads with many cards, all AgentInfoPanel instances mount
+  // simultaneously. Without staggering, each card fires useFeature + useAgentOutput
+  // queries at the same time, creating 60-100+ concurrent API calls that crash
+  // mobile Safari. Actively running cards fetch immediately (priority data);
+  // other cards defer by a random delay AND wait for a concurrency slot.
+  // The stagger window is 6s (vs previous 2s) to spread load for worktrees
+  // with 50+ features. The concurrency limiter caps active queries to 4 at a time,
+  // preventing the burst that overwhelms mobile Safari's connection handling.
+  const [mountReady, setMountReady] = useState(!isMobileDevice || !!isActivelyRunning);
+  useEffect(() => {
+    if (mountReady) return;
+    let cancelled = false;
+    const delay = Math.random() * MOBILE_STAGGER_WINDOW_MS;
+    const timer = setTimeout(() => {
+      // After the random delay, also wait for a concurrency slot
+      acquireMobileQuerySlot().then(() => {
+        if (!cancelled) {
+          setMountReady(true);
+          // Release the slot after a brief window to let the initial queries fire
+          // and return, preventing all slots from being held indefinitely
+          setTimeout(releaseMobileQuerySlot, 3000);
+        } else {
+          releaseMobileQuerySlot();
+        }
+      });
+    }, delay);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [mountReady]);
+
+  const queryEnabled = shouldFetchData && mountReady;
+
+  // Track whether we're receiving WebSocket events (within threshold)
+  // Use a state to trigger re-renders when the WebSocket connection becomes stale
+  const [isReceivingWsEvents, setIsReceivingWsEvents] = useState(false);
+  const wsEventTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // WebSocket activity threshold in ms - if no events within this time, consider WS inactive
+  const WS_ACTIVITY_THRESHOLD = 10000;
+
+  // Update isReceivingWsEvents when we get new WebSocket events
+  useEffect(() => {
+    if (lastWsEventTimestamp !== null) {
+      // We just received an event, mark as active
+      setIsReceivingWsEvents(true);
+
+      // Clear any existing timeout
+      if (wsEventTimeoutRef.current) {
+        clearTimeout(wsEventTimeoutRef.current);
+      }
+
+      // Set a timeout to mark as inactive if no new events
+      wsEventTimeoutRef.current = setTimeout(() => {
+        setIsReceivingWsEvents(false);
+      }, WS_ACTIVITY_THRESHOLD);
+    }
+
+    return () => {
+      if (wsEventTimeoutRef.current) {
+        clearTimeout(wsEventTimeoutRef.current);
+      }
+    };
+  }, [lastWsEventTimestamp]);
+
+  // Polling interval logic:
+  // - If receiving WebSocket events: use longer interval (10s) as a fallback
+  // - If not receiving WebSocket events but in_progress: use normal interval (3s)
+  // - Otherwise: no polling
+  const pollingInterval = useMemo((): number | false => {
+    if (!(isActivelyRunning || feature.status === 'in_progress')) {
+      return false;
+    }
+    // If receiving WebSocket events, use longer polling interval as fallback
+    if (isReceivingWsEvents) {
+      return WS_ACTIVITY_THRESHOLD;
+    }
+    // Default polling interval
+    return 3000;
+  }, [isActivelyRunning, feature.status, isReceivingWsEvents]);
+
+  // Fetch fresh feature data for planSpec (store data can be stale for task progress)
+  const { data: freshFeature } = useFeature(projectPath, feature.id, {
+    enabled: queryEnabled && !contextContent,
+    pollingInterval,
+  });
+
+  // Fetch agent output for parsing
+  const { data: agentOutputContent } = useAgentOutput(projectPath, feature.id, {
+    enabled: queryEnabled && !contextContent,
+    pollingInterval,
+  });
+
+  // On mount, ensure feature and agent output queries are fresh.
+  // This handles the worktree switch scenario where cards unmount when filtered out
+  // and remount when the user switches back. Without this, the React Query cache
+  // may serve stale data for the individual feature query, causing the todo list
+  // to appear empty until the next polling cycle.
+  //
+  // IMPORTANT: Only invalidate if the cached data EXISTS and is STALE.
+  // During worktree switches, ALL cards in the new worktree remount simultaneously.
+  // If every card fires invalidateQueries(), it creates a query storm (40-100+
+  // concurrent invalidations) that overwhelms React's rendering pipeline on mobile
+  // Safari/PWA, causing crashes. The key insight: if a query has NEVER been fetched
+  // (no dataUpdatedAt), there's nothing stale to invalidate — the useFeature/
+  // useAgentOutput hooks will fetch fresh data when their `enabled` flag is true.
+  // We only need to invalidate when cached data exists but is outdated.
+  //
+  // On mobile, skip mount-time invalidation entirely. The staggered useFeature/
+  // useAgentOutput queries already fetch fresh data — invalidation is redundant
+  // and creates the exact query storm we're trying to prevent. The stale threshold
+  // is also higher on mobile (30s vs 10s) to further reduce unnecessary refetches
+  // during the settling period after a worktree switch.
+  useEffect(() => {
+    if (queryEnabled && projectPath && feature.id && !contextContent) {
+      // On mobile, skip mount-time invalidation — the useFeature/useAgentOutput
+      // hooks will handle the initial fetch after the stagger delay.
+      if (isMobileDevice) return;
+
+      const MOUNT_STALE_THRESHOLD = 10_000; // 10s — skip invalidation if data is fresh
+      const now = Date.now();
+
+      const featureQuery = queryClient.getQueryState(
+        queryKeys.features.single(projectPath, feature.id)
+      );
+      const agentOutputQuery = queryClient.getQueryState(
+        queryKeys.features.agentOutput(projectPath, feature.id)
+      );
+
+      // Only invalidate queries that have cached data AND are stale.
+      // Skip if the query has never been fetched (dataUpdatedAt is undefined) —
+      // the useFeature/useAgentOutput hooks will handle the initial fetch.
+      if (featureQuery?.dataUpdatedAt && now - featureQuery.dataUpdatedAt > MOUNT_STALE_THRESHOLD) {
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.features.single(projectPath, feature.id),
+        });
+      }
+      if (
+        agentOutputQuery?.dataUpdatedAt &&
+        now - agentOutputQuery.dataUpdatedAt > MOUNT_STALE_THRESHOLD
+      ) {
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.features.agentOutput(projectPath, feature.id),
+        });
+      }
+    }
+    // Runs when mount staggering completes (queryEnabled becomes true) or on initial mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [queryEnabled, feature.id, projectPath]);
+
+  // Parse agent output into agentInfo
+  const agentInfo = useMemo(() => {
+    if (contextContent) {
+      return parseAgentContext(contextContent);
+    }
+    if (agentOutputContent) {
+      return parseAgentContext(agentOutputContent);
+    }
+    return null;
+  }, [contextContent, agentOutputContent]);
+
+  // Prefer freshly fetched feature summary over potentially stale list data.
+  const effectiveSummary =
+    getFirstNonEmptySummary(freshFeature?.summary, feature.summary, summary, agentInfo?.summary) ??
+    undefined;
+
+  // Fresh planSpec data from API (more accurate than store data for task progress)
+  const freshPlanSpec = useMemo(() => {
+    if (!freshFeature?.planSpec) return null;
+    return {
+      tasks: freshFeature.planSpec.tasks,
+      tasksCompleted: freshFeature.planSpec.tasksCompleted || 0,
+      currentTaskId: freshFeature.planSpec.currentTaskId,
+    };
+  }, [freshFeature?.planSpec]);
+
+  // Derive effective todos from planSpec.tasks when available, fallback to agentInfo.todos
+  // Uses freshPlanSpec (from API) for accurate progress, with taskStatusMap for real-time updates
+  const isFeatureFinished = feature.status === 'waiting_approval' || feature.status === 'verified';
+  const effectiveTodos = useMemo((): {
+    content: string;
+    status: 'pending' | 'in_progress' | 'completed';
+    summary?: string | null;
+  }[] => {
+    // Use freshPlanSpec if available (fetched from API), fallback to store's feature.planSpec
+    const planSpec = freshPlanSpec?.tasks?.length ? freshPlanSpec : feature.planSpec;
+
+    // First priority: use planSpec.tasks if available (modern approach)
+    if (planSpec?.tasks && planSpec.tasks.length > 0) {
+      const completedCount = planSpec.tasksCompleted || 0;
+      const currentTaskId = planSpec.currentTaskId;
+
+      return planSpec.tasks.map((task: ParsedTask, index: number) => {
+        // When feature is finished (waiting_approval/verified), finalize task display:
+        // - in_progress tasks → completed (agent was working on them when it finished)
+        // - pending tasks stay pending (they were never started)
+        // - completed tasks stay completed
+        // This matches server-side behavior in feature-state-manager.ts
+        if (isFeatureFinished) {
+          const finalStatus =
+            task.status === 'in_progress' || task.status === 'failed' ? 'completed' : task.status;
+          return {
+            content: task.description,
+            status: (finalStatus || 'completed') as 'pending' | 'in_progress' | 'completed',
+            summary: task.summary,
+          };
+        }
+
+        // Use real-time status from WebSocket events if available
+        const realtimeStatus = taskStatusMap.get(task.id);
+        const realtimeSummary = taskSummaryMap.get(task.id);
+
+        // Calculate status: WebSocket status > index-based status > task.status
+        let effectiveStatus: 'pending' | 'in_progress' | 'completed';
+        if (realtimeStatus) {
+          effectiveStatus = realtimeStatus;
+        } else if (index < completedCount) {
+          effectiveStatus = 'completed';
+        } else if (task.id === currentTaskId) {
+          effectiveStatus = 'in_progress';
+        } else {
+          // Fallback to task.status if available, otherwise pending
+          effectiveStatus =
+            task.status === 'completed'
+              ? 'completed'
+              : task.status === 'in_progress'
+                ? 'in_progress'
+                : 'pending';
+        }
+
+        return {
+          content: task.description,
+          status: effectiveStatus,
+          summary: taskSummaryMap.has(task.id) ? realtimeSummary : task.summary,
+        };
+      });
+    }
+    // Fallback: use parsed agentInfo.todos from agent-output.md
+    return agentInfo?.todos || [];
+  }, [
+    freshPlanSpec,
+    feature.planSpec,
+    agentInfo?.todos,
+    taskStatusMap,
+    taskSummaryMap,
+    isFeatureFinished,
+  ]);
+
+  // Listen to WebSocket events for real-time task status updates
+  // This ensures the Kanban card shows the same progress as the Agent Output modal
+  // Listen for ANY in-progress feature with planSpec tasks, not just isCurrentAutoTask
+  const hasPlanSpecTasks =
+    (freshPlanSpec?.tasks?.length ?? 0) > 0 || (feature.planSpec?.tasks?.length ?? 0) > 0;
+  const shouldListenToEvents = feature.status === 'in_progress' && hasPlanSpecTasks;
+
+  useEffect(() => {
+    if (!shouldListenToEvents) return;
+
+    const api = getElectronAPI();
+    if (!api?.autoMode) return;
+
+    const unsubscribe = api.autoMode.onEvent((event: AutoModeEvent) => {
+      // Only handle events for this feature
+      if (!('featureId' in event) || event.featureId !== feature.id) return;
+
+      // Update timestamp for any event related to this feature
+      setLastWsEventTimestamp(Date.now());
+
+      switch (event.type) {
+        case 'auto_mode_task_started':
+          if ('taskId' in event) {
+            const taskEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_started' }>;
+            setTaskStatusMap((prev) => {
+              const newMap = new Map(prev);
+              // Mark current task as in_progress
+              newMap.set(taskEvent.taskId, 'in_progress');
+              return newMap;
+            });
+          }
+          break;
+
+        case 'auto_mode_task_complete':
+          if ('taskId' in event) {
+            const taskEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_complete' }>;
+            setTaskStatusMap((prev) => {
+              const newMap = new Map(prev);
+              newMap.set(taskEvent.taskId, 'completed');
+              return newMap;
+            });
+
+            if ('summary' in event) {
+              setTaskSummaryMap((prev) => {
+                const newMap = new Map(prev);
+                // Allow empty string (reset) or non-empty string to be set
+                const summary =
+                  typeof event.summary === 'string' && event.summary.trim().length > 0
+                    ? event.summary
+                    : null;
+                newMap.set(taskEvent.taskId, summary);
+                return newMap;
+              });
+            }
+          }
+          break;
+      }
+    });
+
+    return unsubscribe;
+  }, [feature.id, shouldListenToEvents]);
+
+  // Model/Preset Info for Backlog Cards
+  if (feature.status === 'backlog' || feature.status === 'merge_conflict') {
+    const provider = getProviderFromModel(feature.model);
+    const isCodex = provider === 'codex';
+    const isClaude = provider === 'claude';
+
+    return (
+      <div className="mb-3 space-y-2 overflow-hidden">
+        <div className="flex items-center gap-2 text-[11px] flex-wrap">
+          <div className="flex items-center gap-1 text-[var(--status-info)]">
+            {(() => {
+              const ProviderIcon = getProviderIconForModel(feature.model);
+              return <ProviderIcon className="w-3 h-3" />;
+            })()}
+            <span className="font-medium">
+              {formatModelName(feature.model ?? DEFAULT_MODEL, modelFormatOptions)}
+            </span>
+          </div>
+          {isClaude && feature.thinkingLevel && feature.thinkingLevel !== 'none' ? (
+            <div className="flex items-center gap-1 text-purple-400">
+              <Brain className="w-3 h-3" />
+              <span className="font-medium">
+                {formatThinkingLevel(feature.thinkingLevel as ThinkingLevel)}
+              </span>
+            </div>
+          ) : null}
+          {isCodex && feature.reasoningEffort && feature.reasoningEffort !== 'none' ? (
+            <div className="flex items-center gap-1 text-purple-400">
+              <Brain className="w-3 h-3" />
+              <span className="font-medium">
+                {formatReasoningEffort(feature.reasoningEffort as ReasoningEffort)}
+              </span>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+
+  // Agent Info Panel for non-backlog cards
+  // Show panel if we have agentInfo OR planSpec.tasks (for spec/full mode)
+  // OR if the feature has effective todos from any source (handles initial mount after worktree switch)
+  // OR if the feature is actively running (ensures panel stays visible during execution)
+  // Note: hasPlanSpecTasks is already defined above and includes freshPlanSpec
+  // (The backlog case was already handled above and returned early)
+  if (
+    agentInfo ||
+    hasPlanSpecTasks ||
+    effectiveTodos.length > 0 ||
+    isActivelyRunning ||
+    effectiveSummary
+  ) {
+    return (
+      <>
+        <div className="mb-3 space-y-2 overflow-hidden">
+          {/* Model & Phase */}
+          <div className="flex items-center gap-2 text-[11px] flex-wrap">
+            <div className="flex items-center gap-1 text-[var(--status-info)]">
+              {(() => {
+                const ProviderIcon = getProviderIconForModel(feature.model);
+                return <ProviderIcon className="w-3 h-3" />;
+              })()}
+              <span className="font-medium">
+                {formatModelName(feature.model ?? DEFAULT_MODEL, modelFormatOptions)}
+              </span>
+            </div>
+            {agentInfo?.currentPhase && (
+              <div
+                className={cn(
+                  'px-1.5 py-0.5 rounded-md text-[10px] font-medium',
+                  agentInfo.currentPhase === 'planning' &&
+                    'bg-[var(--status-info-bg)] text-[var(--status-info)]',
+                  agentInfo.currentPhase === 'action' &&
+                    'bg-[var(--status-warning-bg)] text-[var(--status-warning)]',
+                  agentInfo.currentPhase === 'verification' &&
+                    'bg-[var(--status-success-bg)] text-[var(--status-success)]'
+                )}
+              >
+                {agentInfo.currentPhase}
+              </div>
+            )}
+          </div>
+
+          {/* Task List Progress */}
+          {effectiveTodos.length > 0 && (
+            <div className="space-y-1">
+              <div className="flex items-center gap-1 text-[10px] text-muted-foreground/70">
+                <ListTodo className="w-3 h-3" />
+                <span>
+                  {effectiveTodos.filter((t) => t.status === 'completed').length}/
+                  {effectiveTodos.length} tasks
+                </span>
+              </div>
+              <div
+                className={cn(
+                  'space-y-0.5 overflow-y-auto',
+                  isTodosExpanded ? 'max-h-40' : 'max-h-16'
+                )}
+              >
+                {(isTodosExpanded ? effectiveTodos : effectiveTodos.slice(0, 3)).map(
+                  (todo, idx) => (
+                    <div key={idx} className="flex flex-col gap-0.5">
+                      <div className="flex items-center gap-1.5 text-[10px]">
+                        {todo.status === 'completed' ? (
+                          <CheckCircle2 className="w-2.5 h-2.5 text-[var(--status-success)] shrink-0" />
+                        ) : todo.status === 'in_progress' ? (
+                          <Spinner size="xs" className="w-2.5 h-2.5 shrink-0" />
+                        ) : (
+                          <Circle className="w-2.5 h-2.5 text-muted-foreground/50 shrink-0" />
+                        )}
+                        <span
+                          className={cn(
+                            'break-words hyphens-auto line-clamp-2 leading-relaxed',
+                            todo.status === 'completed' && 'text-muted-foreground/60 line-through',
+                            todo.status === 'in_progress' && 'text-[var(--status-warning)]',
+                            todo.status === 'pending' && 'text-muted-foreground/80'
+                          )}
+                        >
+                          {todo.content}
+                        </span>
+                      </div>
+                      {todo.summary && isTodosExpanded && (
+                        <div className="pl-4 text-[9px] text-muted-foreground/50 italic break-words line-clamp-2">
+                          {todo.summary}
+                        </div>
+                      )}
+                    </div>
+                  )
+                )}
+                {effectiveTodos.length > 3 && (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setIsTodosExpanded(!isTodosExpanded);
+                    }}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    onMouseDown={(e) => e.stopPropagation()}
+                    className="text-[10px] text-muted-foreground/60 pl-4 hover:text-muted-foreground transition-colors cursor-pointer"
+                  >
+                    {isTodosExpanded ? 'Show less' : `+${effectiveTodos.length - 3} more`}
+                  </button>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Summary for waiting_approval, verified, and pipeline steps */}
+          {(feature.status === 'waiting_approval' ||
+            feature.status === 'verified' ||
+            (typeof feature.status === 'string' && feature.status.startsWith('pipeline_'))) && (
+            <div className="space-y-1.5">
+              {effectiveSummary && (
+                <div className="space-y-1.5 pt-2 border-t border-border/30 overflow-hidden">
+                  <div className="flex items-center justify-between gap-2">
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setIsSummaryDialogOpen(true);
+                      }}
+                      onPointerDown={(e) => e.stopPropagation()}
+                      onMouseDown={(e) => e.stopPropagation()}
+                      className="flex items-center gap-1 text-[10px] text-[var(--status-success)] min-w-0 hover:opacity-80 transition-opacity cursor-pointer"
+                      title="View full summary"
+                    >
+                      <Sparkles className="w-3 h-3 shrink-0" />
+                      <span className="truncate font-medium">Summary</span>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setIsSummaryDialogOpen(true);
+                      }}
+                      onPointerDown={(e) => e.stopPropagation()}
+                      onMouseDown={(e) => e.stopPropagation()}
+                      className="p-0.5 rounded-md hover:bg-muted/80 transition-colors text-muted-foreground/60 hover:text-muted-foreground shrink-0"
+                      title="View full summary"
+                      data-testid={`expand-summary-${feature.id}`}
+                    >
+                      <Expand className="w-3 h-3" />
+                    </button>
+                  </div>
+                  <p
+                    className="text-[10px] text-muted-foreground/70 line-clamp-3 break-words hyphens-auto leading-relaxed overflow-hidden select-text cursor-text"
+                    onPointerDown={(e) => e.stopPropagation()}
+                    onMouseDown={(e) => e.stopPropagation()}
+                  >
+                    {effectiveSummary}
+                  </p>
+                </div>
+              )}
+              {!effectiveSummary && (agentInfo?.toolCallCount ?? 0) > 0 && (
+                <div className="flex items-center gap-2 text-[10px] text-muted-foreground/60 pt-2 border-t border-border/30">
+                  <span className="flex items-center gap-1">
+                    <Wrench className="w-2.5 h-2.5" />
+                    {agentInfo?.toolCallCount ?? 0} tool calls
+                  </span>
+                  {effectiveTodos.length > 0 && (
+                    <span className="flex items-center gap-1">
+                      <CheckCircle2 className="w-2.5 h-2.5 text-[var(--status-success)]" />
+                      {effectiveTodos.filter((t) => t.status === 'completed').length} tasks done
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        {/* SummaryDialog must be rendered alongside the expand button */}
+        <SummaryDialog
+          feature={feature}
+          agentInfo={agentInfo}
+          summary={effectiveSummary}
+          isOpen={isSummaryDialogOpen}
+          onOpenChange={setIsSummaryDialogOpen}
+          projectPath={projectPath}
+        />
+      </>
+    );
+  }
+
+  // Always render SummaryDialog (even if no agentInfo yet)
+  // This ensures the dialog can be opened from the expand button
+  return (
+    <SummaryDialog
+      feature={feature}
+      agentInfo={agentInfo}
+      summary={effectiveSummary}
+      isOpen={isSummaryDialogOpen}
+      onOpenChange={setIsSummaryDialogOpen}
+      projectPath={projectPath}
+    />
+  );
+});
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/card-actions.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/card-actions.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..66d4554394f6fe2b990ba75b2cb3ca53be8145c5
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/card-actions.tsx
@@ -0,0 +1,475 @@
+// @ts-nocheck - optional callback prop typing with feature status narrowing
+import { memo } from 'react';
+import { Feature } from '@/store/app-store';
+import { Button } from '@/components/ui/button';
+import {
+  Edit,
+  PlayCircle,
+  RotateCcw,
+  StopCircle,
+  CheckCircle2,
+  FileText,
+  Eye,
+  Wand2,
+  Archive,
+} from 'lucide-react';
+
+interface CardActionsProps {
+  feature: Feature;
+  isCurrentAutoTask: boolean;
+  /** Whether this feature is tracked as a running task (may be true even before status updates to in_progress) */
+  isRunningTask?: boolean;
+  hasContext?: boolean;
+  shortcutKey?: string;
+  isSelectionMode?: boolean;
+  onEdit: () => void;
+  onViewOutput?: () => void;
+  onVerify?: () => void;
+  onResume?: () => void;
+  onForceStop?: () => void;
+  onManualVerify?: () => void;
+  onFollowUp?: () => void;
+  onImplement?: () => void;
+  onComplete?: () => void;
+  onViewPlan?: () => void;
+  onApprovePlan?: () => void;
+}
+
+export const CardActions = memo(function CardActions({
+  feature,
+  isCurrentAutoTask,
+  isRunningTask = false,
+  hasContext = false,
+  shortcutKey,
+  isSelectionMode = false,
+  onEdit,
+  onViewOutput,
+  onVerify,
+  onResume,
+  onForceStop,
+  onManualVerify,
+  onFollowUp,
+  onImplement,
+  onComplete,
+  onViewPlan,
+  onApprovePlan,
+}: CardActionsProps) {
+  const showBacklogLogsButton = hasContext && !!onViewOutput;
+
+  // Hide all actions when in selection mode
+  if (isSelectionMode) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-1.5 -mx-3 -mb-3 px-3 pb-3">
+      {isCurrentAutoTask && (
+        <>
+          {/* Approve Plan button - PRIORITY: shows even when agent is "running" (paused for approval) */}
+          {feature.planSpec?.status === 'generated' && onApprovePlan && (
+            <Button
+              variant="default"
+              size="sm"
+              className="flex-1 min-w-0 h-7 text-[11px] bg-purple-600 hover:bg-purple-700 text-white animate-pulse"
+              onClick={(e) => {
+                e.stopPropagation();
+                onApprovePlan();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`approve-plan-running-${feature.id}`}
+            >
+              <FileText className="w-3 h-3 mr-1 shrink-0" />
+              <span className="truncate">Approve Plan</span>
+            </Button>
+          )}
+          {onViewOutput && (
+            <Button
+              variant="secondary"
+              size="sm"
+              className="flex-1 h-7 text-[11px]"
+              onClick={(e) => {
+                e.stopPropagation();
+                onViewOutput();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`view-output-${feature.id}`}
+            >
+              <FileText className="w-3 h-3 mr-1 shrink-0" />
+              <span className="truncate">Logs</span>
+              {shortcutKey && (
+                <span
+                  className="ml-1.5 px-1 py-0.5 text-[9px] font-mono rounded bg-foreground/10"
+                  data-testid={`shortcut-key-${feature.id}`}
+                >
+                  {shortcutKey}
+                </span>
+              )}
+            </Button>
+          )}
+          {onForceStop && (
+            <Button
+              variant="destructive"
+              size="sm"
+              className="h-7 text-[11px] px-2 shrink-0"
+              onClick={(e) => {
+                e.stopPropagation();
+                onForceStop();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`force-stop-${feature.id}`}
+            >
+              <StopCircle className="w-3 h-3" />
+            </Button>
+          )}
+        </>
+      )}
+      {!isCurrentAutoTask &&
+        (feature.status === 'in_progress' ||
+          (typeof feature.status === 'string' && feature.status.startsWith('pipeline_'))) && (
+          <>
+            {/* When feature is in_progress with no error and onForceStop is available,
+                it means the agent is starting/running but hasn't been added to runningAutoTasks yet.
+                Show Stop button instead of Verify/Resume to avoid confusing UI during this race window. */}
+            {!feature.error && onForceStop ? (
+              <>
+                {onViewOutput && (
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    className="flex-1 h-7 text-[11px]"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onViewOutput();
+                    }}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    data-testid={`view-output-${feature.id}`}
+                  >
+                    <FileText className="w-3 h-3 mr-1 shrink-0" />
+                    <span className="truncate">Logs</span>
+                    {shortcutKey && (
+                      <span
+                        className="ml-1.5 px-1 py-0.5 text-[9px] font-mono rounded bg-foreground/10"
+                        data-testid={`shortcut-key-${feature.id}`}
+                      >
+                        {shortcutKey}
+                      </span>
+                    )}
+                  </Button>
+                )}
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  className="h-7 text-[11px] px-2 shrink-0"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onForceStop();
+                  }}
+                  onPointerDown={(e) => e.stopPropagation()}
+                  data-testid={`force-stop-${feature.id}`}
+                >
+                  <StopCircle className="w-3 h-3" />
+                </Button>
+              </>
+            ) : (
+              <>
+                {/* Approve Plan button - shows when plan is generated and waiting for approval */}
+                {feature.planSpec?.status === 'generated' && onApprovePlan && (
+                  <Button
+                    variant="default"
+                    size="sm"
+                    className="flex-1 h-7 text-[11px] bg-purple-600 hover:bg-purple-700 text-white animate-pulse"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onApprovePlan();
+                    }}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    data-testid={`approve-plan-${feature.id}`}
+                  >
+                    <FileText className="w-3 h-3 mr-1" />
+                    Approve Plan
+                  </Button>
+                )}
+                {feature.skipTests && onManualVerify ? (
+                  <Button
+                    variant="default"
+                    size="sm"
+                    className="flex-1 h-7 text-[11px]"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onManualVerify();
+                    }}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    data-testid={`manual-verify-${feature.id}`}
+                  >
+                    <CheckCircle2 className="w-3 h-3 mr-1" />
+                    Verify
+                  </Button>
+                ) : onResume ? (
+                  <Button
+                    variant="default"
+                    size="sm"
+                    className="flex-1 h-7 text-[11px] bg-[var(--status-success)] hover:bg-[var(--status-success)]/90"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onResume();
+                    }}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    data-testid={`resume-feature-${feature.id}`}
+                  >
+                    <RotateCcw className="w-3 h-3 mr-1" />
+                    Resume
+                  </Button>
+                ) : onVerify ? (
+                  <Button
+                    variant="default"
+                    size="sm"
+                    className="flex-1 h-7 text-[11px] bg-[var(--status-success)] hover:bg-[var(--status-success)]/90"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onVerify();
+                    }}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    data-testid={`verify-feature-${feature.id}`}
+                  >
+                    <CheckCircle2 className="w-3 h-3 mr-1" />
+                    Verify
+                  </Button>
+                ) : null}
+                {onViewOutput && !feature.skipTests && (
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    className="h-7 text-[11px] px-2"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onViewOutput();
+                    }}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    data-testid={`view-output-${feature.id}`}
+                  >
+                    <FileText className="w-3 h-3" />
+                  </Button>
+                )}
+              </>
+            )}
+          </>
+        )}
+      {!isCurrentAutoTask && feature.status === 'verified' && (
+        <>
+          {/* Logs button */}
+          {onViewOutput && (
+            <Button
+              variant="secondary"
+              size="sm"
+              className="flex-1 h-7 text-xs min-w-0"
+              onClick={(e) => {
+                e.stopPropagation();
+                onViewOutput();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`view-output-verified-${feature.id}`}
+            >
+              <FileText className="w-3 h-3 mr-1 shrink-0" />
+              <span className="truncate">Logs</span>
+            </Button>
+          )}
+          {/* Complete button */}
+          {onComplete && (
+            <Button
+              variant="default"
+              size="sm"
+              className="flex-1 h-7 text-xs min-w-0 bg-brand-500 hover:bg-brand-600"
+              onClick={(e) => {
+                e.stopPropagation();
+                onComplete();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`complete-${feature.id}`}
+            >
+              <Archive className="w-3 h-3 mr-1 shrink-0" />
+              <span className="truncate">Complete</span>
+            </Button>
+          )}
+        </>
+      )}
+      {!isCurrentAutoTask && feature.status === 'waiting_approval' && (
+        <>
+          {/* Refine prompt button */}
+          {onFollowUp && (
+            <Button
+              variant="secondary"
+              size="sm"
+              className="flex-1 h-7 text-[11px] min-w-0"
+              onClick={(e) => {
+                e.stopPropagation();
+                onFollowUp();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`follow-up-${feature.id}`}
+            >
+              <Wand2 className="w-3 h-3 mr-1 shrink-0" />
+              <span className="truncate">Refine</span>
+            </Button>
+          )}
+          {/* Show Verify button if PR was created (changes are committed), otherwise show Mark as Verified button */}
+          {feature.prUrl && onManualVerify ? (
+            <Button
+              variant="default"
+              size="sm"
+              className="flex-1 h-7 text-[11px]"
+              onClick={(e) => {
+                e.stopPropagation();
+                onManualVerify();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`verify-${feature.id}`}
+            >
+              <CheckCircle2 className="w-3 h-3 mr-1" />
+              Verify
+            </Button>
+          ) : onManualVerify ? (
+            <Button
+              variant="default"
+              size="sm"
+              className="flex-1 h-7 text-[11px]"
+              onClick={(e) => {
+                e.stopPropagation();
+                onManualVerify();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`mark-as-verified-${feature.id}`}
+            >
+              <CheckCircle2 className="w-3 h-3 mr-1" />
+              Mark as Verified
+            </Button>
+          ) : null}
+        </>
+      )}
+      {/* Running task with stale status: feature is tracked as running but status hasn't updated yet.
+          Show Logs/Stop controls instead of Make to avoid confusing UI. */}
+      {!isCurrentAutoTask &&
+        isRunningTask &&
+        (feature.status === 'backlog' ||
+          feature.status === 'merge_conflict' ||
+          feature.status === 'interrupted' ||
+          feature.status === 'ready') && (
+          <>
+            {onViewOutput && (
+              <Button
+                variant="secondary"
+                size="sm"
+                className="flex-1 h-7 text-[11px]"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onViewOutput();
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`view-output-${feature.id}`}
+              >
+                <FileText className="w-3 h-3 mr-1 shrink-0" />
+                <span className="truncate">Logs</span>
+                {shortcutKey && (
+                  <span
+                    className="ml-1.5 px-1 py-0.5 text-[9px] font-mono rounded bg-foreground/10"
+                    data-testid={`shortcut-key-${feature.id}`}
+                  >
+                    {shortcutKey}
+                  </span>
+                )}
+              </Button>
+            )}
+            {onForceStop && (
+              <Button
+                variant="destructive"
+                size="sm"
+                className="h-7 text-[11px] px-2 shrink-0"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onForceStop();
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`force-stop-${feature.id}`}
+              >
+                <StopCircle className="w-3 h-3" />
+              </Button>
+            )}
+          </>
+        )}
+      {!isCurrentAutoTask &&
+        !isRunningTask &&
+        (feature.status === 'backlog' ||
+          feature.status === 'merge_conflict' ||
+          feature.status === 'interrupted' ||
+          feature.status === 'ready') && (
+          <>
+            <Button
+              variant="secondary"
+              size="sm"
+              className="flex-1 h-7 text-xs"
+              onClick={(e) => {
+                e.stopPropagation();
+                onEdit();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`edit-backlog-${feature.id}`}
+            >
+              <Edit className="w-3 h-3 mr-1" />
+              Edit
+            </Button>
+            {showBacklogLogsButton && (
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7 text-xs px-2"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onViewOutput();
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`view-output-backlog-${feature.id}`}
+                title="View Logs"
+              >
+                <FileText className="w-3 h-3" />
+              </Button>
+            )}
+            {feature.planSpec?.content && onViewPlan && (
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-7 text-xs px-2"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onViewPlan();
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`view-plan-${feature.id}`}
+                title="View Plan"
+              >
+                <Eye className="w-3 h-3" />
+              </Button>
+            )}
+            {onImplement && (
+              <Button
+                variant="default"
+                size="sm"
+                className="flex-1 h-7 text-xs"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onImplement();
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`make-${feature.id}`}
+              >
+                {feature.status === 'merge_conflict' ? (
+                  <RotateCcw className="w-3 h-3 mr-1" />
+                ) : (
+                  <PlayCircle className="w-3 h-3 mr-1" />
+                )}
+                {feature.status === 'merge_conflict' ? 'Restart' : 'Make'}
+              </Button>
+            )}
+          </>
+        )}
+    </div>
+  );
+});
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/card-badges.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/card-badges.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ad35b378ccc91dd3fa6314fb00b87869594329c9
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/card-badges.tsx
@@ -0,0 +1,330 @@
+// @ts-nocheck - badge component prop variations with conditional rendering
+import { memo, useEffect, useMemo, useState } from 'react';
+import { Feature, useAppStore } from '@/store/app-store';
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import {
+  AlertCircle,
+  AlertTriangle,
+  Lock,
+  Hand,
+  Sparkles,
+  SkipForward,
+  FileCheck,
+} from 'lucide-react';
+import { getBlockingDependencies } from '@automaker/dependency-resolver';
+import { useShallow } from 'zustand/react/shallow';
+import { usePipelineConfig } from '@/hooks/queries/use-pipeline';
+
+/** Uniform badge style for all card badges */
+const uniformBadgeClass =
+  'inline-flex items-center justify-center w-6 h-6 rounded-md border-[1.5px]';
+
+interface CardBadgesProps {
+  feature: Feature;
+}
+
+/**
+ * CardBadges - Shows error badges below the card header
+ * Note: Merge conflict badge is aligned with the top badge row for visual consistency
+ */
+export const CardBadges = memo(function CardBadges({ feature }: CardBadgesProps) {
+  const showMergeConflict = feature.status === 'merge_conflict';
+  const mergeConflictOffsetClass = feature.priority ? 'left-9' : 'left-2';
+  if (!feature.error && !showMergeConflict) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Merge conflict badge */}
+      {showMergeConflict && (
+        <div className={cn('absolute top-2 z-10', mergeConflictOffsetClass)}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={cn(
+                  uniformBadgeClass,
+                  'bg-[var(--status-warning-bg)] border-[var(--status-warning)]/40 text-[var(--status-warning)]'
+                )}
+                data-testid={`merge-conflict-badge-${feature.id}`}
+              >
+                <AlertTriangle className="w-3.5 h-3.5" />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="text-xs max-w-[250px]">
+              <p>Merge Conflict: automatic merge failed and requires manual resolution</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      )}
+
+      {/* Error badge */}
+      {feature.error && (
+        <div className="flex flex-wrap items-center gap-1.5 px-3 pt-1.5 min-h-[24px]">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={cn(
+                  uniformBadgeClass,
+                  'bg-[var(--status-error-bg)] border-[var(--status-error)]/40 text-[var(--status-error)]'
+                )}
+                data-testid={`error-badge-${feature.id}`}
+              >
+                <AlertCircle className="w-3.5 h-3.5" />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="text-xs max-w-[250px]">
+              <p>{feature.error}</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      )}
+    </>
+  );
+});
+
+interface PriorityBadgesProps {
+  feature: Feature;
+  projectPath?: string;
+}
+
+export const PriorityBadges = memo(function PriorityBadges({
+  feature,
+  projectPath,
+}: PriorityBadgesProps) {
+  const { enableDependencyBlocking, features } = useAppStore(
+    useShallow((state) => ({
+      enableDependencyBlocking: state.enableDependencyBlocking,
+      features: state.features,
+    }))
+  );
+  const [currentTime, setCurrentTime] = useState(() => Date.now());
+
+  // Fetch pipeline config to check if there are pipelines to exclude
+  const { data: pipelineConfig } = usePipelineConfig(projectPath);
+
+  // Calculate blocking dependencies (if feature is in backlog and has incomplete dependencies)
+  const blockingDependencies = useMemo(() => {
+    if (!enableDependencyBlocking || feature.status !== 'backlog') {
+      return [];
+    }
+    return getBlockingDependencies(feature, features);
+  }, [enableDependencyBlocking, feature, features]);
+
+  const isJustFinished = useMemo(() => {
+    if (!feature.justFinishedAt || feature.status !== 'waiting_approval' || feature.error) {
+      return false;
+    }
+    const finishedTime = new Date(feature.justFinishedAt).getTime();
+    const twoMinutes = 2 * 60 * 1000;
+    return currentTime - finishedTime < twoMinutes;
+  }, [feature.justFinishedAt, feature.status, feature.error, currentTime]);
+
+  useEffect(() => {
+    if (!feature.justFinishedAt || feature.status !== 'waiting_approval') {
+      return;
+    }
+
+    const finishedTime = new Date(feature.justFinishedAt).getTime();
+    const twoMinutes = 2 * 60 * 1000;
+    const timeRemaining = twoMinutes - (currentTime - finishedTime);
+
+    if (timeRemaining <= 0) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setCurrentTime(Date.now());
+    }, 1000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [feature.justFinishedAt, feature.status, currentTime]);
+
+  const isBlocked =
+    blockingDependencies.length > 0 && !feature.error && feature.status === 'backlog';
+  const showManualVerification =
+    feature.skipTests && !feature.error && feature.status === 'backlog';
+
+  // Check if feature has excluded pipeline steps
+  const excludedStepCount = feature.excludedPipelineSteps?.length || 0;
+  const totalPipelineSteps = pipelineConfig?.steps?.length || 0;
+  const hasPipelineExclusions =
+    excludedStepCount > 0 && totalPipelineSteps > 0 && feature.status === 'backlog';
+  const allPipelinesExcluded = hasPipelineExclusions && excludedStepCount >= totalPipelineSteps;
+
+  const showPlanApproval = feature.planSpec?.status === 'generated';
+
+  const showBadges =
+    feature.priority ||
+    showManualVerification ||
+    isBlocked ||
+    isJustFinished ||
+    hasPipelineExclusions ||
+    showPlanApproval;
+
+  if (!showBadges) {
+    return null;
+  }
+
+  return (
+    <div className="absolute top-2 left-2 flex items-center gap-1">
+      {/* Priority badge */}
+      {feature.priority && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                uniformBadgeClass,
+                feature.priority === 1 &&
+                  'bg-[var(--status-error-bg)] border-[var(--status-error)]/40 text-[var(--status-error)]',
+                feature.priority === 2 &&
+                  'bg-[var(--status-warning-bg)] border-[var(--status-warning)]/40 text-[var(--status-warning)]',
+                feature.priority === 3 &&
+                  'bg-[var(--status-info-bg)] border-[var(--status-info)]/40 text-[var(--status-info)]'
+              )}
+              data-testid={`priority-badge-${feature.id}`}
+            >
+              <span className="font-bold text-xs">
+                {feature.priority === 1 ? 'H' : feature.priority === 2 ? 'M' : 'L'}
+              </span>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" className="text-xs">
+            <p>
+              {feature.priority === 1
+                ? 'High Priority'
+                : feature.priority === 2
+                  ? 'Medium Priority'
+                  : 'Low Priority'}
+            </p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+
+      {/* Manual verification badge */}
+      {showManualVerification && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                uniformBadgeClass,
+                'bg-[var(--status-warning-bg)] border-[var(--status-warning)]/40 text-[var(--status-warning)]'
+              )}
+              data-testid={`skip-tests-badge-${feature.id}`}
+            >
+              <Hand className="w-3.5 h-3.5" />
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" className="text-xs">
+            <p>Manual verification required</p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+
+      {/* Blocked badge */}
+      {isBlocked && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                uniformBadgeClass,
+                'bg-orange-500/20 border-orange-500/50 text-orange-500'
+              )}
+              data-testid={`blocked-badge-${feature.id}`}
+            >
+              <Lock className="w-3.5 h-3.5" />
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" className="text-xs max-w-[250px]">
+            <p className="font-medium mb-1">
+              Blocked by {blockingDependencies.length} incomplete{' '}
+              {blockingDependencies.length === 1 ? 'dependency' : 'dependencies'}
+            </p>
+            <p className="text-muted-foreground">
+              {blockingDependencies
+                .map((depId) => {
+                  const dep = features.find((f) => f.id === depId);
+                  return dep?.description || depId;
+                })
+                .join(', ')}
+            </p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+
+      {/* Just Finished badge */}
+      {isJustFinished && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                uniformBadgeClass,
+                'bg-[var(--status-success-bg)] border-[var(--status-success)]/40 text-[var(--status-success)] animate-pulse'
+              )}
+              data-testid={`just-finished-badge-${feature.id}`}
+            >
+              <Sparkles className="w-3.5 h-3.5" />
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" className="text-xs">
+            <p>Agent just finished working on this feature</p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+
+      {/* Plan approval badge */}
+      {showPlanApproval && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                uniformBadgeClass,
+                'bg-purple-500/20 border-purple-500/50 text-purple-500 animate-pulse'
+              )}
+              data-testid={`plan-approval-badge-${feature.id}`}
+            >
+              <FileCheck className="w-3.5 h-3.5" />
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" className="text-xs max-w-[250px]">
+            <p>Plan ready for review - click or tap to approve</p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+
+      {/* Pipeline exclusion badge */}
+      {hasPipelineExclusions && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                uniformBadgeClass,
+                allPipelinesExcluded
+                  ? 'bg-violet-500/20 border-violet-500/50 text-violet-500'
+                  : 'bg-violet-500/10 border-violet-500/30 text-violet-400'
+              )}
+              data-testid={`pipeline-exclusion-badge-${feature.id}`}
+            >
+              <SkipForward className="w-3.5 h-3.5" />
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="bottom" className="text-xs max-w-[250px]">
+            <p className="font-medium mb-1">
+              {allPipelinesExcluded
+                ? 'All pipelines skipped'
+                : `${excludedStepCount} of ${totalPipelineSteps} pipeline${totalPipelineSteps !== 1 ? 's' : ''} skipped`}
+            </p>
+            <p className="text-muted-foreground">
+              {allPipelinesExcluded
+                ? 'This feature will skip all custom pipeline steps'
+                : 'Some custom pipeline steps will be skipped for this feature'}
+            </p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  );
+});
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/card-content-sections.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/card-content-sections.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1846c3a5ca0f0189f61338ff9114e5ea34234c9e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/card-content-sections.tsx
@@ -0,0 +1,55 @@
+// @ts-nocheck - content section prop typing with feature data extraction
+import { memo } from 'react';
+import { Feature } from '@/store/app-store';
+import { GitBranch, GitPullRequest, ExternalLink } from 'lucide-react';
+
+interface CardContentSectionsProps {
+  feature: Feature;
+  useWorktrees: boolean;
+}
+
+export const CardContentSections = memo(function CardContentSections({
+  feature,
+  useWorktrees,
+}: CardContentSectionsProps) {
+  return (
+    <>
+      {/* Target Branch Display */}
+      {useWorktrees && feature.branchName && (
+        <div className="mb-2 flex items-center gap-1.5 text-[11px] text-muted-foreground">
+          <GitBranch className="w-3 h-3 shrink-0" />
+          <span className="font-mono truncate" title={feature.branchName}>
+            {feature.branchName}
+          </span>
+        </div>
+      )}
+
+      {/* PR URL Display */}
+      {typeof feature.prUrl === 'string' &&
+        /^https?:\/\//i.test(feature.prUrl) &&
+        (() => {
+          const prNumber = feature.prUrl.split('/').pop();
+          return (
+            <div className="mb-2">
+              <a
+                href={feature.prUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(e) => e.stopPropagation()}
+                onPointerDown={(e) => e.stopPropagation()}
+                className="inline-flex items-center gap-1.5 text-[11px] text-purple-500 hover:text-purple-400 transition-colors"
+                title={feature.prUrl}
+                data-testid={`pr-url-${feature.id}`}
+              >
+                <GitPullRequest className="w-3 h-3 shrink-0" />
+                <span className="truncate max-w-[150px]">
+                  {prNumber ? `Pull Request #${prNumber}` : 'Pull Request'}
+                </span>
+                <ExternalLink className="w-2.5 h-2.5 shrink-0" />
+              </a>
+            </div>
+          );
+        })()}
+    </>
+  );
+});
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/card-header.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/card-header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..745a91971f5f10d6581864ef889504edf1b4d24e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/card-header.tsx
@@ -0,0 +1,566 @@
+import { memo, useState, useMemo } from 'react';
+import type { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
+import { Feature } from '@/store/app-store';
+import { cn } from '@/lib/utils';
+import { CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  GripVertical,
+  Edit,
+  Trash2,
+  FileText,
+  MoreVertical,
+  ChevronDown,
+  ChevronUp,
+  GitFork,
+  Copy,
+  Repeat,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { CountUpTimer } from '@/components/ui/count-up-timer';
+import { formatModelName, DEFAULT_MODEL } from '@/lib/agent-context-parser';
+import { DeleteConfirmDialog } from '@/components/ui/delete-confirm-dialog';
+import { getProviderIconForModel } from '@/components/ui/provider-icon';
+import { useAppStore } from '@/store/app-store';
+
+function DuplicateMenuItems({
+  onDuplicate,
+  onDuplicateAsChild,
+  onDuplicateAsChildMultiple,
+}: {
+  onDuplicate?: () => void;
+  onDuplicateAsChild?: () => void;
+  onDuplicateAsChildMultiple?: () => void;
+}) {
+  if (!onDuplicate) return null;
+
+  // When there's no sub-child action, render a simple menu item (no DropdownMenuSub wrapper)
+  if (!onDuplicateAsChild) {
+    return (
+      <DropdownMenuItem
+        onClick={(e) => {
+          e.stopPropagation();
+          onDuplicate();
+        }}
+        className="text-xs"
+      >
+        <Copy className="w-3 h-3 mr-2" />
+        Duplicate
+      </DropdownMenuItem>
+    );
+  }
+
+  // Split-button pattern: main click duplicates immediately, disclosure arrow shows submenu
+  return (
+    <DropdownMenuSub>
+      <div className="flex items-center">
+        <DropdownMenuItem
+          onClick={(e) => {
+            e.stopPropagation();
+            onDuplicate();
+          }}
+          className="flex-1 pr-0 rounded-r-none text-xs"
+        >
+          <Copy className="w-3 h-3 mr-2" />
+          Duplicate
+        </DropdownMenuItem>
+        <DropdownMenuSubTrigger className="px-1 rounded-l-none border-l border-border/30 h-8 text-xs" />
+      </div>
+      <DropdownMenuSubContent>
+        <DropdownMenuItem
+          onClick={(e) => {
+            e.stopPropagation();
+            onDuplicateAsChild();
+          }}
+          className="text-xs"
+        >
+          <GitFork className="w-3 h-3 mr-2" />
+          Duplicate as Child
+        </DropdownMenuItem>
+        {onDuplicateAsChildMultiple && (
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              onDuplicateAsChildMultiple();
+            }}
+            className="text-xs"
+          >
+            <Repeat className="w-3 h-3 mr-2" />
+            Duplicate as Child ×N
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+  );
+}
+
+interface CardHeaderProps {
+  feature: Feature;
+  isDraggable: boolean;
+  isCurrentAutoTask: boolean;
+  isSelectionMode?: boolean;
+  hasContext?: boolean;
+  onEdit: () => void;
+  onDelete: () => void;
+  onViewOutput?: () => void;
+  onSpawnTask?: () => void;
+  onDuplicate?: () => void;
+  onDuplicateAsChild?: () => void;
+  onDuplicateAsChildMultiple?: () => void;
+  dragHandleListeners?: DraggableSyntheticListeners;
+  dragHandleAttributes?: DraggableAttributes;
+}
+
+export const CardHeaderSection = memo(function CardHeaderSection({
+  feature,
+  isDraggable,
+  isCurrentAutoTask,
+  isSelectionMode = false,
+  hasContext = false,
+  onEdit,
+  onDelete,
+  onViewOutput,
+  onSpawnTask,
+  onDuplicate,
+  onDuplicateAsChild,
+  onDuplicateAsChildMultiple,
+  dragHandleListeners,
+  dragHandleAttributes,
+}: CardHeaderProps) {
+  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const showBacklogLogsButton = hasContext && !!onViewOutput;
+
+  // Get providers from store for provider-aware model name display
+  // This allows formatModelName to show provider-specific model names (e.g., "GLM 4.7" instead of "Sonnet 4.5")
+  // when a feature was executed using a Claude-compatible provider
+  const claudeCompatibleProviders = useAppStore((state) => state.claudeCompatibleProviders);
+
+  // Memoize the format options to avoid recreating the object on every render
+  const modelFormatOptions = useMemo(
+    () => ({
+      providerId: feature.providerId,
+      claudeCompatibleProviders,
+    }),
+    [feature.providerId, claudeCompatibleProviders]
+  );
+
+  const handleDeleteClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsDeleteDialogOpen(true);
+  };
+
+  const handleConfirmDelete = () => {
+    onDelete();
+  };
+
+  return (
+    <CardHeader className="p-3 pb-2 block">
+      {/* Running task header */}
+      {isCurrentAutoTask && !isSelectionMode && (
+        <div className="absolute top-2 right-2 flex items-center gap-1">
+          <div className="flex items-center justify-center gap-2 bg-[var(--status-in-progress)]/15 border border-[var(--status-in-progress)]/50 rounded-md px-2 py-0.5">
+            <Spinner size="xs" />
+            {typeof feature.startedAt === 'string' && (
+              <CountUpTimer
+                startedAt={feature.startedAt}
+                className="text-[var(--status-in-progress)] text-[10px]"
+              />
+            )}
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0 hover:bg-muted/80 rounded-md"
+                onClick={(e) => e.stopPropagation()}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`menu-running-${feature.id}`}
+              >
+                <MoreVertical className="w-3.5 h-3.5 text-muted-foreground" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-36">
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onEdit();
+                }}
+                data-testid={`edit-running-${feature.id}`}
+                className="text-xs"
+              >
+                <Edit className="w-3 h-3 mr-2" />
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onSpawnTask?.();
+                }}
+                data-testid={`spawn-running-${feature.id}`}
+                className="text-xs"
+              >
+                <GitFork className="w-3 h-3 mr-2" />
+                Spawn Sub-Task
+              </DropdownMenuItem>
+              <DuplicateMenuItems
+                onDuplicate={onDuplicate}
+                onDuplicateAsChild={onDuplicateAsChild}
+                onDuplicateAsChildMultiple={onDuplicateAsChildMultiple}
+              />
+              {/* Model info in dropdown */}
+              {(() => {
+                const ProviderIcon = getProviderIconForModel(feature.model);
+                return (
+                  <div className="px-2 py-1.5 text-[10px] text-muted-foreground border-t mt-1 pt-1.5">
+                    <div className="flex items-center gap-1">
+                      <ProviderIcon className="w-3 h-3" />
+                      <span>
+                        {formatModelName(feature.model ?? DEFAULT_MODEL, modelFormatOptions)}
+                      </span>
+                    </div>
+                  </div>
+                );
+              })()}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
+
+      {/* Backlog header (also handles 'interrupted' and 'ready' statuses that display in backlog column) */}
+      {!isCurrentAutoTask &&
+        !isSelectionMode &&
+        (feature.status === 'backlog' ||
+          feature.status === 'merge_conflict' ||
+          feature.status === 'interrupted' ||
+          feature.status === 'ready') && (
+          <div className="absolute top-2 right-2 flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-foreground"
+              onClick={(e) => {
+                e.stopPropagation();
+                onSpawnTask?.();
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`spawn-backlog-${feature.id}`}
+              title="Spawn Sub-Task"
+            >
+              <GitFork className="w-4 h-4" />
+            </Button>
+            {showBacklogLogsButton && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-foreground"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onViewOutput?.();
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`logs-backlog-${feature.id}`}
+                title="Logs"
+              >
+                <FileText className="w-4 h-4" />
+              </Button>
+            )}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-destructive"
+              onClick={handleDeleteClick}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`delete-backlog-${feature.id}`}
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+            {/* Only render overflow menu when there are actionable items */}
+            {onDuplicate && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 w-6 p-0 hover:bg-muted/80 rounded-md"
+                    onClick={(e) => e.stopPropagation()}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    data-testid={`menu-backlog-${feature.id}`}
+                  >
+                    <MoreVertical className="w-3.5 h-3.5 text-muted-foreground" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-40">
+                  <DuplicateMenuItems
+                    onDuplicate={onDuplicate}
+                    onDuplicateAsChild={onDuplicateAsChild}
+                    onDuplicateAsChildMultiple={onDuplicateAsChildMultiple}
+                  />
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </div>
+        )}
+
+      {/* Waiting approval / Verified header */}
+      {!isCurrentAutoTask &&
+        !isSelectionMode &&
+        (feature.status === 'waiting_approval' || feature.status === 'verified') && (
+          <>
+            <div className="absolute top-2 right-2 flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-foreground"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onEdit();
+                }}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`edit-${
+                  feature.status === 'waiting_approval' ? 'waiting' : 'verified'
+                }-${feature.id}`}
+                title="Edit"
+              >
+                <Edit className="w-4 h-4" />
+              </Button>
+              {onViewOutput && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-foreground"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onViewOutput();
+                  }}
+                  onPointerDown={(e) => e.stopPropagation()}
+                  data-testid={`logs-${
+                    feature.status === 'waiting_approval' ? 'waiting' : 'verified'
+                  }-${feature.id}`}
+                  title="Logs"
+                >
+                  <FileText className="w-4 h-4" />
+                </Button>
+              )}
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-destructive"
+                onClick={handleDeleteClick}
+                onPointerDown={(e) => e.stopPropagation()}
+                data-testid={`delete-${
+                  feature.status === 'waiting_approval' ? 'waiting' : 'verified'
+                }-${feature.id}`}
+                title="Delete"
+              >
+                <Trash2 className="w-4 h-4" />
+              </Button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 w-6 p-0 hover:bg-muted/80 rounded-md"
+                    onClick={(e) => e.stopPropagation()}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    data-testid={`menu-${
+                      feature.status === 'waiting_approval' ? 'waiting' : 'verified'
+                    }-${feature.id}`}
+                  >
+                    <MoreVertical className="w-3.5 h-3.5 text-muted-foreground" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-40">
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onSpawnTask?.();
+                    }}
+                    data-testid={`spawn-${
+                      feature.status === 'waiting_approval' ? 'waiting' : 'verified'
+                    }-${feature.id}`}
+                    className="text-xs"
+                  >
+                    <GitFork className="w-3 h-3 mr-2" />
+                    Spawn Sub-Task
+                  </DropdownMenuItem>
+                  <DuplicateMenuItems
+                    onDuplicate={onDuplicate}
+                    onDuplicateAsChild={onDuplicateAsChild}
+                    onDuplicateAsChildMultiple={onDuplicateAsChildMultiple}
+                  />
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </>
+        )}
+
+      {/* In progress header */}
+      {!isCurrentAutoTask && feature.status === 'in_progress' && (
+        <>
+          <div className="absolute top-2 right-2 flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 w-6 p-0 hover:bg-white/10 text-muted-foreground hover:text-destructive"
+              onClick={handleDeleteClick}
+              onPointerDown={(e) => e.stopPropagation()}
+              data-testid={`delete-feature-${feature.id}`}
+              title="Delete"
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 w-6 p-0 hover:bg-muted/80 rounded-md"
+                  onClick={(e) => e.stopPropagation()}
+                  onPointerDown={(e) => e.stopPropagation()}
+                  data-testid={`menu-${feature.id}`}
+                >
+                  <MoreVertical className="w-3.5 h-3.5 text-muted-foreground" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-36">
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit();
+                  }}
+                  data-testid={`edit-feature-${feature.id}`}
+                  className="text-xs"
+                >
+                  <Edit className="w-3 h-3 mr-2" />
+                  Edit
+                </DropdownMenuItem>
+                {onViewOutput && (
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onViewOutput();
+                    }}
+                    data-testid={`view-logs-${feature.id}`}
+                    className="text-xs"
+                  >
+                    <FileText className="w-3 h-3 mr-2" />
+                    View Logs
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onSpawnTask?.();
+                  }}
+                  data-testid={`spawn-feature-${feature.id}`}
+                  className="text-xs"
+                >
+                  <GitFork className="w-3 h-3 mr-2" />
+                  Spawn Sub-Task
+                </DropdownMenuItem>
+                <DuplicateMenuItems
+                  onDuplicate={onDuplicate}
+                  onDuplicateAsChild={onDuplicateAsChild}
+                  onDuplicateAsChildMultiple={onDuplicateAsChildMultiple}
+                />
+                {/* Model info in dropdown */}
+                {(() => {
+                  const ProviderIcon = getProviderIconForModel(feature.model);
+                  return (
+                    <div className="px-2 py-1.5 text-[10px] text-muted-foreground border-t mt-1 pt-1.5">
+                      <div className="flex items-center gap-1">
+                        <ProviderIcon className="w-3 h-3" />
+                        <span>
+                          {formatModelName(feature.model ?? DEFAULT_MODEL, modelFormatOptions)}
+                        </span>
+                      </div>
+                    </div>
+                  );
+                })()}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </>
+      )}
+
+      {/* Title and description */}
+      <div className="flex items-start gap-2">
+        {isDraggable && (
+          <div
+            className="-ml-2 -mt-1 p-2 touch-none cursor-grab active:cursor-grabbing opacity-40 hover:opacity-70 transition-opacity"
+            data-testid={`drag-handle-${feature.id}`}
+            {...dragHandleAttributes}
+            {...dragHandleListeners}
+          >
+            <GripVertical className="w-3.5 h-3.5 text-muted-foreground" />
+          </div>
+        )}
+        <div className="flex-1 min-w-0 overflow-hidden">
+          {feature.titleGenerating && !feature.title ? (
+            <div className="flex items-center gap-1.5 mb-1">
+              <Spinner size="xs" />
+              <span className="text-xs text-muted-foreground italic">Generating title...</span>
+            </div>
+          ) : feature.title ? (
+            <CardTitle className="text-sm font-semibold text-foreground mb-1 line-clamp-2">
+              {feature.title}
+            </CardTitle>
+          ) : null}
+          <CardDescription
+            className={cn(
+              'text-xs leading-snug break-words hyphens-auto overflow-hidden text-muted-foreground',
+              !isDescriptionExpanded && 'line-clamp-3'
+            )}
+          >
+            {feature.description || feature.summary || feature.id}
+          </CardDescription>
+          {(feature.description || feature.summary || '').length > 100 && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsDescriptionExpanded(!isDescriptionExpanded);
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+              className="flex items-center gap-0.5 text-[10px] text-muted-foreground/70 hover:text-muted-foreground mt-1.5 transition-colors"
+              data-testid={`toggle-description-${feature.id}`}
+            >
+              {isDescriptionExpanded ? (
+                <>
+                  <ChevronUp className="w-3 h-3" />
+                  <span>Less</span>
+                </>
+              ) : (
+                <>
+                  <ChevronDown className="w-3 h-3" />
+                  <span>More</span>
+                </>
+              )}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Delete Confirmation Dialog */}
+      <DeleteConfirmDialog
+        open={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+        onConfirm={handleConfirmDelete}
+        title="Delete Feature"
+        description="Are you sure you want to delete this feature? This action cannot be undone."
+        testId="delete-confirmation-dialog"
+        confirmTestId="confirm-delete-button"
+      />
+    </CardHeader>
+  );
+});
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/index.ts b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a8b7a36a5fb72fda0b4c00248af3a4799a4e97f1
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/index.ts
@@ -0,0 +1,7 @@
+export { AgentInfoPanel } from './agent-info-panel';
+export { CardActions } from './card-actions';
+export { CardBadges, PriorityBadges } from './card-badges';
+export { CardContentSections } from './card-content-sections';
+export { CardHeaderSection } from './card-header';
+export { KanbanCard } from './kanban-card';
+export { SummaryDialog } from './summary-dialog';
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/kanban-card.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/kanban-card.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e36c5165efab3ec56010b2041696407ba809740d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/kanban-card.tsx
@@ -0,0 +1,346 @@
+// @ts-nocheck - dnd-kit draggable/droppable ref combination type incompatibilities
+import React, { memo, useLayoutEffect, useState, useCallback } from 'react';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { cn } from '@/lib/utils';
+import { Card, CardContent } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Feature, useAppStore } from '@/store/app-store';
+import { useShallow } from 'zustand/react/shallow';
+import { CardBadges, PriorityBadges } from './card-badges';
+import { CardHeaderSection } from './card-header';
+import { CardContentSections } from './card-content-sections';
+import { AgentInfoPanel } from './agent-info-panel';
+import { CardActions } from './card-actions';
+
+function getCardBorderStyle(enabled: boolean, opacity: number): React.CSSProperties {
+  if (!enabled) {
+    return { borderWidth: '0px', borderColor: 'transparent' };
+  }
+  if (opacity !== 100) {
+    return {
+      borderWidth: '1px',
+      borderColor: `color-mix(in oklch, var(--border) ${opacity}%, transparent)`,
+    };
+  }
+  return {};
+}
+
+function getCursorClass(
+  isOverlay: boolean | undefined,
+  isDraggable: boolean,
+  isSelectionMode: boolean
+): string {
+  if (isSelectionMode) return 'cursor-pointer';
+  if (isOverlay) return 'cursor-grabbing';
+  // Drag cursor is now only on the drag handle, not the full card
+  return 'cursor-default';
+}
+
+interface KanbanCardProps {
+  feature: Feature;
+  onEdit: () => void;
+  onDelete: () => void;
+  onViewOutput?: () => void;
+  onVerify?: () => void;
+  onResume?: () => void;
+  onForceStop?: () => void;
+  onManualVerify?: () => void;
+  onMoveBackToInProgress?: () => void;
+  onFollowUp?: () => void;
+  onImplement?: () => void;
+  onComplete?: () => void;
+  onViewPlan?: () => void;
+  onApprovePlan?: () => void;
+  onSpawnTask?: () => void;
+  onDuplicate?: () => void;
+  onDuplicateAsChild?: () => void;
+  onDuplicateAsChildMultiple?: () => void;
+  hasContext?: boolean;
+  isCurrentAutoTask?: boolean;
+  shortcutKey?: string;
+  contextContent?: string;
+  summary?: string;
+  opacity?: number;
+  glassmorphism?: boolean;
+  cardBorderEnabled?: boolean;
+  cardBorderOpacity?: number;
+  isOverlay?: boolean;
+  reduceEffects?: boolean;
+  // Selection mode props
+  isSelectionMode?: boolean;
+  isSelected?: boolean;
+  onToggleSelect?: () => void;
+  selectionTarget?: 'backlog' | 'waiting_approval' | null;
+}
+
+export const KanbanCard = memo(function KanbanCard({
+  feature,
+  onEdit,
+  onDelete,
+  onViewOutput,
+  onVerify,
+  onResume,
+  onForceStop,
+  onManualVerify,
+  onMoveBackToInProgress: _onMoveBackToInProgress,
+  onFollowUp,
+  onImplement,
+  onComplete,
+  onViewPlan,
+  onApprovePlan,
+  onSpawnTask,
+  onDuplicate,
+  onDuplicateAsChild,
+  onDuplicateAsChildMultiple,
+  hasContext,
+  isCurrentAutoTask,
+  shortcutKey,
+  contextContent,
+  summary,
+  opacity = 100,
+  glassmorphism = true,
+  cardBorderEnabled = true,
+  cardBorderOpacity = 100,
+  isOverlay,
+  reduceEffects = false,
+  isSelectionMode = false,
+  isSelected = false,
+  onToggleSelect,
+  selectionTarget = null,
+}: KanbanCardProps) {
+  const { useWorktrees, currentProject } = useAppStore(
+    useShallow((state) => ({
+      useWorktrees: state.useWorktrees,
+      currentProject: state.currentProject,
+    }))
+  );
+  // A card should display as "actively running" if it's in the runningAutoTasks list
+  // AND in an execution-compatible status. However, there's a race window where a feature
+  // is tracked as running (in runningAutoTasks) but its disk/UI status hasn't caught up yet
+  // (still 'backlog', 'ready', or 'interrupted'). In this case, we still want to show
+  // running controls (Logs/Stop) and animated border, but not the full "actively running"
+  // state that gates all UI behavior.
+  const isInExecutionState =
+    feature.status === 'in_progress' ||
+    (typeof feature.status === 'string' && feature.status.startsWith('pipeline_'));
+  const isActivelyRunning = !!isCurrentAutoTask && isInExecutionState;
+  // isRunningWithStaleStatus: feature is tracked as running but status hasn't updated yet.
+  // This happens during the timing gap between when the server starts a feature and when
+  // the UI receives the status update. Show running UI to prevent "Make" button flash.
+  const isRunningWithStaleStatus =
+    !!isCurrentAutoTask &&
+    !isInExecutionState &&
+    (feature.status === 'backlog' ||
+      feature.status === 'merge_conflict' ||
+      feature.status === 'ready' ||
+      feature.status === 'interrupted');
+  // Show running visual treatment for both fully confirmed and stale-status running tasks
+  const showRunningVisuals = isActivelyRunning || isRunningWithStaleStatus;
+  const [isLifted, setIsLifted] = useState(false);
+
+  useLayoutEffect(() => {
+    if (isOverlay) {
+      requestAnimationFrame(() => {
+        setIsLifted(true);
+      });
+    }
+  }, [isOverlay]);
+
+  const isDraggable =
+    !isSelectionMode &&
+    !isRunningWithStaleStatus &&
+    (feature.status === 'backlog' ||
+      feature.status === 'merge_conflict' ||
+      feature.status === 'interrupted' ||
+      feature.status === 'ready' ||
+      feature.status === 'waiting_approval' ||
+      feature.status === 'verified' ||
+      feature.status.startsWith('pipeline_') ||
+      (feature.status === 'in_progress' && !isCurrentAutoTask));
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDraggableRef,
+    isDragging,
+  } = useDraggable({
+    id: feature.id,
+    disabled: !isDraggable || isOverlay || isSelectionMode,
+  });
+
+  // Make the card a drop target for creating dependency links
+  // All non-completed cards can be link targets to allow flexible dependency creation
+  // (completed features are excluded as they're already done)
+  const isDroppable = !isOverlay && feature.status !== 'completed' && !isSelectionMode;
+  const { setNodeRef: setDroppableRef, isOver } = useDroppable({
+    id: `card-drop-${feature.id}`,
+    disabled: !isDroppable,
+    data: {
+      type: 'card',
+      featureId: feature.id,
+    },
+  });
+
+  // Combine refs for both draggable and droppable
+  const setNodeRef = useCallback(
+    (node: HTMLElement | null) => {
+      setDraggableRef(node);
+      setDroppableRef(node);
+    },
+    [setDraggableRef, setDroppableRef]
+  );
+
+  const dndStyle = {
+    opacity: isDragging ? 0.5 : undefined,
+  };
+
+  const cardStyle = getCardBorderStyle(cardBorderEnabled, cardBorderOpacity);
+
+  // Only allow selection for features matching the selection target
+  const isSelectable =
+    isSelectionMode &&
+    (feature.status === selectionTarget ||
+      (selectionTarget === 'backlog' && feature.status === 'merge_conflict'));
+
+  const wrapperClasses = cn(
+    'relative select-none outline-none transition-transform duration-200 ease-out',
+    getCursorClass(isOverlay, isDraggable, isSelectable),
+    isOverlay && isLifted && 'scale-105 rotate-1 z-50',
+    // Visual feedback when another card is being dragged over this one
+    isOver && !isDragging && 'ring-2 ring-primary ring-offset-2 ring-offset-background scale-[1.02]'
+  );
+
+  const isInteractive = !isDragging && !isOverlay;
+  const hasError = feature.error && !isCurrentAutoTask;
+
+  const innerCardClasses = cn(
+    'kanban-card-content h-full relative',
+    reduceEffects ? 'shadow-none' : 'shadow-sm',
+    'transition-all duration-200 ease-out',
+    // Disable hover translate for running cards to prevent gap showing gradient
+    isInteractive &&
+      !reduceEffects &&
+      !showRunningVisuals &&
+      'hover:-translate-y-0.5 hover:shadow-md hover:shadow-black/10 bg-transparent',
+    !glassmorphism && 'backdrop-blur-[0px]!',
+    !showRunningVisuals &&
+      cardBorderEnabled &&
+      (cardBorderOpacity === 100 ? 'border-border/50' : 'border'),
+    hasError && 'border-[var(--status-error)] border-2 shadow-[var(--status-error-bg)] shadow-lg',
+    isSelected && isSelectable && 'ring-2 ring-brand-500 ring-offset-1 ring-offset-background'
+  );
+
+  const handleCardClick = (e: React.MouseEvent) => {
+    if (isSelectable && onToggleSelect) {
+      e.preventDefault();
+      e.stopPropagation();
+      onToggleSelect();
+    }
+  };
+
+  const renderCardContent = () => (
+    <Card
+      style={showRunningVisuals ? undefined : cardStyle}
+      className={innerCardClasses}
+      onDoubleClick={isSelectionMode ? undefined : onEdit}
+      onClick={handleCardClick}
+    >
+      {/* Background overlay with opacity */}
+      {(!isDragging || isOverlay) && (
+        <div
+          className={cn(
+            'absolute inset-0 rounded-xl bg-card -z-10',
+            glassmorphism && 'backdrop-blur-sm'
+          )}
+          style={{ opacity: opacity / 100 }}
+        />
+      )}
+
+      {/* Status Badges Row */}
+      <CardBadges feature={feature} />
+
+      {/* Category row with selection checkbox */}
+      <div className="px-3 pt-3 flex items-center gap-2">
+        {isSelectable && !isOverlay && (
+          <Checkbox
+            checked={isSelected}
+            onCheckedChange={() => onToggleSelect?.()}
+            className="h-4 w-4 border-2 data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 shrink-0"
+            onClick={(e) => e.stopPropagation()}
+          />
+        )}
+        <span className="text-[11px] text-muted-foreground/70 font-medium">{feature.category}</span>
+      </div>
+
+      {/* Priority and Manual Verification badges */}
+      <PriorityBadges feature={feature} projectPath={currentProject?.path} />
+
+      {/* Card Header */}
+      <CardHeaderSection
+        feature={feature}
+        isDraggable={isDraggable}
+        isCurrentAutoTask={isActivelyRunning}
+        isSelectionMode={isSelectionMode}
+        hasContext={hasContext}
+        onEdit={onEdit}
+        onDelete={onDelete}
+        onViewOutput={onViewOutput}
+        onSpawnTask={onSpawnTask}
+        onDuplicate={onDuplicate}
+        onDuplicateAsChild={onDuplicateAsChild}
+        onDuplicateAsChildMultiple={onDuplicateAsChildMultiple}
+        dragHandleListeners={isDraggable ? listeners : undefined}
+        dragHandleAttributes={isDraggable ? attributes : undefined}
+      />
+
+      <CardContent className="px-3 pt-0 pb-0">
+        {/* Content Sections */}
+        <CardContentSections feature={feature} useWorktrees={useWorktrees} />
+
+        {/* Agent Info Panel */}
+        <AgentInfoPanel
+          feature={feature}
+          projectPath={currentProject?.path ?? ''}
+          contextContent={contextContent}
+          summary={summary}
+          isActivelyRunning={isActivelyRunning}
+        />
+
+        {/* Actions */}
+        <CardActions
+          feature={feature}
+          isCurrentAutoTask={isActivelyRunning}
+          isRunningTask={!!isCurrentAutoTask}
+          hasContext={hasContext}
+          shortcutKey={shortcutKey}
+          isSelectionMode={isSelectionMode}
+          onEdit={onEdit}
+          onViewOutput={onViewOutput}
+          onVerify={onVerify}
+          onResume={onResume}
+          onForceStop={onForceStop}
+          onManualVerify={onManualVerify}
+          onFollowUp={onFollowUp}
+          onImplement={onImplement}
+          onComplete={onComplete}
+          onViewPlan={onViewPlan}
+          onApprovePlan={onApprovePlan}
+        />
+      </CardContent>
+    </Card>
+  );
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={dndStyle}
+      className={wrapperClasses}
+      data-testid={`kanban-card-${feature.id}`}
+    >
+      {showRunningVisuals ? (
+        <div className="animated-border-wrapper">{renderCardContent()}</div>
+      ) : (
+        renderCardContent()
+      )}
+    </div>
+  );
+});
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/summary-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/summary-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7b6629cf0bf47d58956f9f81dd7de2679cb782e0
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-card/summary-dialog.tsx
@@ -0,0 +1,328 @@
+import { useMemo, useState, useRef, useEffect } from 'react';
+import type { Feature } from '@/store/app-store';
+import type { AgentTaskInfo } from '@/lib/agent-context-parser';
+import {
+  parseAllPhaseSummaries,
+  isAccumulatedSummary,
+  type PhaseSummaryEntry,
+} from '@/lib/log-parser';
+import { getFirstNonEmptySummary } from '@/lib/summary-selection';
+import { useAgentOutput } from '@/hooks/queries';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Markdown } from '@/components/ui/markdown';
+import { LogViewer } from '@/components/ui/log-viewer';
+import { Sparkles, Layers, FileText, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+
+interface SummaryDialogProps {
+  feature: Feature;
+  agentInfo: AgentTaskInfo | null;
+  summary?: string;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectPath?: string;
+}
+
+type ViewMode = 'summary' | 'output';
+
+/**
+ * Renders a single phase entry card with header and content.
+ * Extracted for better separation of concerns and readability.
+ */
+function PhaseEntryCard({
+  entry,
+  index,
+  totalPhases,
+  hasMultiplePhases,
+  isActive,
+  onClick,
+}: {
+  entry: PhaseSummaryEntry;
+  index: number;
+  totalPhases: number;
+  hasMultiplePhases: boolean;
+  isActive?: boolean;
+  onClick?: () => void;
+}) {
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (onClick && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'p-4 bg-card rounded-lg border border-border/50 transition-all',
+        isActive && 'ring-2 ring-primary/50 border-primary/50',
+        onClick && 'cursor-pointer'
+      )}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+    >
+      {/* Phase header - styled to stand out */}
+      <div className="flex items-center gap-2 mb-3 pb-2 border-b border-border/30">
+        <span className="text-sm font-semibold text-primary">{entry.phaseName}</span>
+        {hasMultiplePhases && (
+          <span className="text-xs text-muted-foreground">
+            Step {index + 1} of {totalPhases}
+          </span>
+        )}
+      </div>
+      {/* Phase content */}
+      <Markdown>{entry.content || 'No summary available'}</Markdown>
+    </div>
+  );
+}
+
+/**
+ * Step navigator component for multi-phase summaries
+ */
+function StepNavigator({
+  phaseEntries,
+  activeIndex,
+  onIndexChange,
+}: {
+  phaseEntries: PhaseSummaryEntry[];
+  activeIndex: number;
+  onIndexChange: (index: number) => void;
+}) {
+  if (phaseEntries.length <= 1) return null;
+
+  return (
+    <div className="flex items-center gap-2 p-2 bg-muted/50 rounded-lg shrink-0">
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-7 w-7 p-0"
+        onClick={() => onIndexChange(Math.max(0, activeIndex - 1))}
+        disabled={activeIndex === 0}
+      >
+        <ChevronLeft className="w-4 h-4" />
+      </Button>
+
+      <div className="flex items-center gap-1 overflow-x-auto">
+        {phaseEntries.map((entry, index) => (
+          <button
+            key={`step-nav-${index}`}
+            onClick={() => onIndexChange(index)}
+            className={cn(
+              'px-2.5 py-1 rounded-md text-xs font-medium transition-all whitespace-nowrap',
+              index === activeIndex
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+            )}
+          >
+            {entry.phaseName}
+          </button>
+        ))}
+      </div>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-7 w-7 p-0"
+        onClick={() => onIndexChange(Math.min(phaseEntries.length - 1, activeIndex + 1))}
+        disabled={activeIndex === phaseEntries.length - 1}
+      >
+        <ChevronRight className="w-4 h-4" />
+      </Button>
+    </div>
+  );
+}
+
+export function SummaryDialog({
+  feature,
+  agentInfo,
+  summary,
+  isOpen,
+  onOpenChange,
+  projectPath,
+}: SummaryDialogProps) {
+  const [viewMode, setViewMode] = useState<ViewMode>('summary');
+  const [activePhaseIndex, setActivePhaseIndex] = useState(0);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Prefer explicitly provided summary (can come from fresh per-feature query),
+  // then fall back to feature/agent-info summaries.
+  const rawSummary = getFirstNonEmptySummary(summary, feature.summary, agentInfo?.summary);
+
+  // Normalize null to undefined for parser helpers that expect string | undefined
+  const normalizedSummary = rawSummary ?? undefined;
+
+  // Memoize the parsed phases to avoid re-parsing on every render
+  const phaseEntries = useMemo(
+    () => parseAllPhaseSummaries(normalizedSummary),
+    [normalizedSummary]
+  );
+
+  // Memoize the multi-phase check
+  const hasMultiplePhases = useMemo(
+    () => isAccumulatedSummary(normalizedSummary),
+    [normalizedSummary]
+  );
+
+  // Fetch agent output
+  const { data: agentOutput = '', isLoading: isLoadingOutput } = useAgentOutput(
+    projectPath || '',
+    feature.id,
+    {
+      enabled: isOpen && !!projectPath && viewMode === 'output',
+    }
+  );
+
+  // Reset active phase index when summary changes
+  useEffect(() => {
+    setActivePhaseIndex(0);
+  }, [normalizedSummary]);
+
+  // Scroll to active phase when it changes or when normalizedSummary changes
+  useEffect(() => {
+    if (contentRef.current && hasMultiplePhases) {
+      const phaseCards = contentRef.current.querySelectorAll('[data-phase-index]');
+      // Ensure index is within bounds
+      const safeIndex = Math.min(activePhaseIndex, phaseCards.length - 1);
+      const targetCard = phaseCards[safeIndex];
+      if (targetCard) {
+        targetCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }
+  }, [activePhaseIndex, hasMultiplePhases, normalizedSummary]);
+
+  // Determine the dialog title based on number of phases
+  const dialogTitle = hasMultiplePhases
+    ? `Pipeline Summary (${phaseEntries.length} steps)`
+    : 'Implementation Summary';
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="max-w-4xl max-h-[80vh] overflow-hidden flex flex-col select-text"
+        data-testid={`summary-dialog-${feature.id}`}
+        onPointerDown={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+        onDoubleClick={(e) => e.stopPropagation()}
+      >
+        <DialogHeader>
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 pr-10">
+            <DialogTitle className="flex items-center gap-2">
+              {hasMultiplePhases ? (
+                <Layers className="w-5 h-5 text-[var(--status-success)]" />
+              ) : (
+                <Sparkles className="w-5 h-5 text-[var(--status-success)]" />
+              )}
+              {dialogTitle}
+            </DialogTitle>
+
+            {/* View mode tabs */}
+            <div className="flex items-center gap-1 bg-muted rounded-lg p-1">
+              <button
+                onClick={() => setViewMode('summary')}
+                className={cn(
+                  'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all whitespace-nowrap',
+                  viewMode === 'summary'
+                    ? 'bg-primary/20 text-primary shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                )}
+              >
+                <Sparkles className="w-3.5 h-3.5" />
+                Summary
+              </button>
+              <button
+                onClick={() => setViewMode('output')}
+                className={cn(
+                  'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all whitespace-nowrap',
+                  viewMode === 'output'
+                    ? 'bg-primary/20 text-primary shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                )}
+              >
+                <FileText className="w-3.5 h-3.5" />
+                Output
+              </button>
+            </div>
+          </div>
+          <DialogDescription
+            className="text-sm"
+            title={feature.description || feature.summary || ''}
+          >
+            {(() => {
+              const displayText = feature.description || feature.summary || 'No description';
+              return displayText.length > 100 ? `${displayText.slice(0, 100)}...` : displayText;
+            })()}
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Step navigator for multi-phase summaries */}
+        {viewMode === 'summary' && hasMultiplePhases && (
+          <StepNavigator
+            phaseEntries={phaseEntries}
+            activeIndex={activePhaseIndex}
+            onIndexChange={setActivePhaseIndex}
+          />
+        )}
+
+        {/* Content area */}
+        {viewMode === 'summary' ? (
+          <div ref={contentRef} className="flex-1 overflow-y-auto space-y-4">
+            {phaseEntries.length > 0 ? (
+              phaseEntries.map((entry, index) => (
+                <div key={`phase-${index}-${entry.phaseName}`} data-phase-index={index}>
+                  <PhaseEntryCard
+                    entry={entry}
+                    index={index}
+                    totalPhases={phaseEntries.length}
+                    hasMultiplePhases={hasMultiplePhases}
+                    isActive={hasMultiplePhases && index === activePhaseIndex}
+                    onClick={hasMultiplePhases ? () => setActivePhaseIndex(index) : undefined}
+                  />
+                </div>
+              ))
+            ) : (
+              <div className="p-4 bg-card rounded-lg border border-border/50">
+                <Markdown>No summary available</Markdown>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="flex-1 min-h-0 overflow-y-auto bg-popover border border-border/50 rounded-lg p-4 font-mono text-xs">
+            {isLoadingOutput ? (
+              <div className="flex items-center justify-center h-full text-muted-foreground">
+                <Spinner size="lg" className="mr-2" />
+                Loading output...
+              </div>
+            ) : !agentOutput ? (
+              <div className="flex items-center justify-center h-full text-muted-foreground">
+                No agent output available.
+              </div>
+            ) : (
+              <LogViewer output={agentOutput} />
+            )}
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            data-testid="close-summary-button"
+          >
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/kanban-column.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-column.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5a89b46df8064bb2ca6e48808a078841fb9113a7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/kanban-column.tsx
@@ -0,0 +1,129 @@
+import { memo } from 'react';
+import { useDroppable } from '@dnd-kit/core';
+import { cn } from '@/lib/utils';
+import type { CSSProperties, ReactNode, Ref, UIEvent } from 'react';
+
+interface KanbanColumnProps {
+  id: string;
+  title: string;
+  colorClass: string;
+  count: number;
+  children: ReactNode;
+  headerAction?: ReactNode;
+  /** Floating action button at the bottom of the column */
+  footerAction?: ReactNode;
+  opacity?: number;
+  showBorder?: boolean;
+  hideScrollbar?: boolean;
+  /** Custom width in pixels. If not provided, defaults to 288px (w-72) */
+  width?: number;
+  contentRef?: Ref<HTMLDivElement>;
+  onScroll?: (event: UIEvent<HTMLDivElement>) => void;
+  contentClassName?: string;
+  contentStyle?: CSSProperties;
+  disableItemSpacing?: boolean;
+}
+
+export const KanbanColumn = memo(function KanbanColumn({
+  id,
+  title,
+  colorClass,
+  count,
+  children,
+  headerAction,
+  footerAction,
+  opacity = 100,
+  showBorder = true,
+  hideScrollbar = false,
+  width,
+  contentRef,
+  onScroll,
+  contentClassName,
+  contentStyle,
+  disableItemSpacing = false,
+}: KanbanColumnProps) {
+  const { setNodeRef, isOver: isColumnOver } = useDroppable({ id });
+  // Also make the header explicitly a drop target so dragging to the top of the column works
+  const { setNodeRef: setHeaderDropRef, isOver: isHeaderOver } = useDroppable({
+    id: `column-header-${id}`,
+  });
+  const isOver = isColumnOver || isHeaderOver;
+
+  // Use inline style for width if provided, otherwise use default w-72
+  const widthStyle = width ? { width: `${width}px`, flexShrink: 0 } : undefined;
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        'relative flex flex-col h-full rounded-xl',
+        // Only transition ring/shadow for drag-over effect, not width
+        'transition-[box-shadow,ring] duration-200',
+        !width && 'w-72', // Only apply w-72 if no custom width
+        showBorder && 'border border-border/60',
+        isOver && 'ring-2 ring-primary/30 ring-offset-1 ring-offset-background'
+      )}
+      style={widthStyle}
+      data-testid={`kanban-column-${id}`}
+    >
+      {/* Background layer with opacity */}
+      <div
+        className={cn(
+          'absolute inset-0 rounded-xl backdrop-blur-sm transition-colors duration-200',
+          isOver ? 'bg-accent/80' : 'bg-card/80'
+        )}
+        style={{ opacity: opacity / 100 }}
+      />
+
+      {/* Column Header - also registered as a drop target so dragging to the header area works */}
+      <div
+        ref={setHeaderDropRef}
+        className={cn(
+          'relative z-10 flex items-center gap-3 px-3 py-2.5',
+          showBorder && 'border-b border-border/40'
+        )}
+      >
+        <div className={cn('w-2.5 h-2.5 rounded-full shrink-0', colorClass)} />
+        <h3 className="font-semibold text-sm text-foreground/90 flex-1 tracking-tight whitespace-nowrap">
+          {title}
+        </h3>
+        {headerAction}
+        <span className="text-xs font-medium text-muted-foreground/80 bg-muted/50 px-2 py-0.5 rounded-md tabular-nums">
+          {count}
+        </span>
+      </div>
+
+      {/* Column Content */}
+      <div
+        className={cn(
+          'relative z-10 flex-1 overflow-y-auto p-2',
+          !disableItemSpacing && 'space-y-2.5',
+          hideScrollbar &&
+            '[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]',
+          // Smooth scrolling
+          'scroll-smooth',
+          // Add padding at bottom if there's a footer action (less on mobile to reduce blank space)
+          footerAction && 'pb-12 sm:pb-14',
+          contentClassName
+        )}
+        ref={contentRef}
+        onScroll={onScroll}
+        style={contentStyle}
+      >
+        {children}
+      </div>
+
+      {/* Floating Footer Action */}
+      {footerAction && (
+        <div className="absolute bottom-0 left-0 right-0 z-20 p-2 bg-gradient-to-t from-card/95 via-card/80 to-transparent pt-4 sm:pt-6">
+          {footerAction}
+        </div>
+      )}
+
+      {/* Drop zone indicator when dragging over */}
+      {isOver && (
+        <div className="absolute inset-0 rounded-xl bg-primary/5 pointer-events-none z-5 border-2 border-dashed border-primary/20" />
+      )}
+    </div>
+  );
+});
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/list-view/index.ts b/temp_repo/apps/ui/src/components/views/board-view/components/list-view/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6f7e7ac3d199f8ee307064b71ad730a21c0a156c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/list-view/index.ts
@@ -0,0 +1,20 @@
+export {
+  ListHeader,
+  LIST_COLUMNS,
+  getColumnById,
+  getColumnWidth,
+  getColumnAlign,
+} from './list-header';
+export type { ListHeaderProps } from './list-header';
+
+export { ListRow, getFeatureSortValue, sortFeatures } from './list-row';
+export type { ListRowProps } from './list-row';
+
+export { ListView, getFlatFeatures, getTotalFeatureCount } from './list-view';
+export type { ListViewProps, ListViewActionHandlers } from './list-view';
+
+export { RowActions, createRowActionHandlers } from './row-actions';
+export type { RowActionsProps, RowActionHandlers } from './row-actions';
+
+export { StatusBadge, getStatusLabel, getStatusOrder } from './status-badge';
+export type { StatusBadgeProps } from './status-badge';
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/list-view/list-header.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/list-view/list-header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1c874cafd86b200842f0f3364198b85e9cc947e3
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/list-view/list-header.tsx
@@ -0,0 +1,293 @@
+import { memo, useCallback } from 'react';
+import { ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { SortColumn, SortConfig, SortDirection } from '../../hooks/use-list-view-state';
+
+/**
+ * Column definition for the list header
+ */
+interface ColumnDef {
+  id: SortColumn;
+  label: string;
+  /** Whether this column is sortable */
+  sortable?: boolean;
+  /** Minimum width for the column */
+  minWidth?: string;
+  /** Width class for the column */
+  width?: string;
+  /** Alignment of the column content */
+  align?: 'left' | 'center' | 'right';
+  /** Additional className for the column */
+  className?: string;
+}
+
+/**
+ * Default column definitions for the list view
+ */
+export const LIST_COLUMNS: ColumnDef[] = [
+  {
+    id: 'title',
+    label: 'Title',
+    sortable: true,
+    width: 'flex-1',
+    minWidth: 'min-w-0',
+    align: 'left',
+  },
+  {
+    id: 'priority',
+    label: 'Priority',
+    sortable: true,
+    width: 'w-20',
+    minWidth: 'min-w-[60px]',
+    align: 'center',
+  },
+];
+
+export interface ListHeaderProps {
+  /** Current sort configuration */
+  sortConfig: SortConfig;
+  /** Callback when a sortable column is clicked */
+  onSortChange: (column: SortColumn) => void;
+  /** Whether to show a checkbox column for selection */
+  showCheckbox?: boolean;
+  /** Whether all items are selected (for checkbox state) */
+  allSelected?: boolean;
+  /** Whether some but not all items are selected */
+  someSelected?: boolean;
+  /** Callback when the select all checkbox is clicked */
+  onSelectAll?: () => void;
+  /** Custom column definitions (defaults to LIST_COLUMNS) */
+  columns?: ColumnDef[];
+  /** Additional className for the header */
+  className?: string;
+}
+
+/**
+ * SortIcon displays the current sort state for a column
+ */
+function SortIcon({ column, sortConfig }: { column: SortColumn; sortConfig: SortConfig }) {
+  if (sortConfig.column !== column) {
+    // Not sorted by this column - show neutral indicator
+    return (
+      <ChevronsUpDown className="w-3.5 h-3.5 text-muted-foreground/50 group-hover:text-muted-foreground transition-colors" />
+    );
+  }
+
+  // Currently sorted by this column
+  if (sortConfig.direction === 'asc') {
+    return <ChevronUp className="w-3.5 h-3.5 text-foreground" />;
+  }
+
+  return <ChevronDown className="w-3.5 h-3.5 text-foreground" />;
+}
+
+/**
+ * SortableColumnHeader renders a clickable header cell that triggers sorting
+ */
+const SortableColumnHeader = memo(function SortableColumnHeader({
+  column,
+  sortConfig,
+  onSortChange,
+}: {
+  column: ColumnDef;
+  sortConfig: SortConfig;
+  onSortChange: (column: SortColumn) => void;
+}) {
+  const handleClick = useCallback(() => {
+    onSortChange(column.id);
+  }, [column.id, onSortChange]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onSortChange(column.id);
+      }
+    },
+    [column.id, onSortChange]
+  );
+
+  const isSorted = sortConfig.column === column.id;
+  const sortDirection: SortDirection | undefined = isSorted ? sortConfig.direction : undefined;
+
+  return (
+    <div
+      role="columnheader"
+      aria-sort={isSorted ? (sortDirection === 'asc' ? 'ascending' : 'descending') : 'none'}
+      tabIndex={0}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        'group flex items-center gap-1.5 px-3 py-2 text-xs font-medium text-muted-foreground',
+        'cursor-pointer select-none transition-colors duration-200',
+        'hover:text-foreground hover:bg-accent/50 rounded-md',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
+        column.width,
+        column.minWidth,
+        column.width !== 'flex-1' && 'shrink-0',
+        column.align === 'center' && 'justify-center',
+        column.align === 'right' && 'justify-end',
+        isSorted && 'text-foreground',
+        column.className
+      )}
+      data-testid={`list-header-${column.id}`}
+    >
+      <span className="whitespace-nowrap truncate">{column.label}</span>
+      <SortIcon column={column.id} sortConfig={sortConfig} />
+    </div>
+  );
+});
+
+/**
+ * StaticColumnHeader renders a non-sortable header cell
+ */
+const StaticColumnHeader = memo(function StaticColumnHeader({ column }: { column: ColumnDef }) {
+  return (
+    <div
+      role="columnheader"
+      className={cn(
+        'flex items-center px-3 py-2 text-xs font-medium text-muted-foreground',
+        column.width,
+        column.minWidth,
+        column.width !== 'flex-1' && 'shrink-0',
+        column.align === 'center' && 'justify-center',
+        column.align === 'right' && 'justify-end',
+        column.className
+      )}
+      data-testid={`list-header-${column.id}`}
+    >
+      <span className="whitespace-nowrap truncate">{column.label}</span>
+    </div>
+  );
+});
+
+/**
+ * ListHeader displays the header row for the list view table with sortable columns.
+ *
+ * Features:
+ * - Clickable column headers for sorting
+ * - Visual sort direction indicators (chevron up/down)
+ * - Keyboard accessible (Tab + Enter/Space to sort)
+ * - ARIA attributes for screen readers
+ * - Optional checkbox column for bulk selection
+ * - Customizable column definitions
+ *
+ * @example
+ * ```tsx
+ * const { sortConfig, setSortColumn } = useListViewState();
+ *
+ * <ListHeader
+ *   sortConfig={sortConfig}
+ *   onSortChange={setSortColumn}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With selection support
+ * <ListHeader
+ *   sortConfig={sortConfig}
+ *   onSortChange={setSortColumn}
+ *   showCheckbox
+ *   allSelected={allSelected}
+ *   someSelected={someSelected}
+ *   onSelectAll={handleSelectAll}
+ * />
+ * ```
+ */
+export const ListHeader = memo(function ListHeader({
+  sortConfig,
+  onSortChange,
+  showCheckbox = false,
+  allSelected = false,
+  someSelected = false,
+  onSelectAll,
+  columns = LIST_COLUMNS,
+  className,
+}: ListHeaderProps) {
+  return (
+    <div
+      role="row"
+      className={cn(
+        'flex items-center w-full border-b border-border bg-muted/30',
+        'sticky top-0 z-10 backdrop-blur-sm',
+        className
+      )}
+      data-testid="list-header"
+    >
+      {/* Checkbox column for selection */}
+      {showCheckbox && (
+        <div
+          role="columnheader"
+          className="flex items-center justify-center w-10 px-2 py-2 shrink-0"
+        >
+          <input
+            type="checkbox"
+            checked={allSelected}
+            ref={(el) => {
+              if (el) {
+                el.indeterminate = someSelected && !allSelected;
+              }
+            }}
+            onChange={onSelectAll}
+            className={cn(
+              'h-4 w-4 rounded border-border text-primary cursor-pointer',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1'
+            )}
+            aria-label={allSelected ? 'Deselect all' : 'Select all'}
+            data-testid="list-header-select-all"
+          />
+        </div>
+      )}
+
+      {/* Column headers */}
+      {columns.map((column) =>
+        column.sortable !== false ? (
+          <SortableColumnHeader
+            key={column.id}
+            column={column}
+            sortConfig={sortConfig}
+            onSortChange={onSortChange}
+          />
+        ) : (
+          <StaticColumnHeader key={column.id} column={column} />
+        )
+      )}
+
+      {/* Actions column (placeholder for row action buttons) */}
+      <div
+        role="columnheader"
+        className="w-[80px] px-3 py-2 text-xs font-medium text-muted-foreground shrink-0"
+        aria-label="Actions"
+        data-testid="list-header-actions"
+      >
+        <span className="sr-only">Actions</span>
+      </div>
+    </div>
+  );
+});
+
+/**
+ * Helper function to get a column definition by ID
+ */
+export function getColumnById(columnId: SortColumn): ColumnDef | undefined {
+  return LIST_COLUMNS.find((col) => col.id === columnId);
+}
+
+/**
+ * Helper function to get column width class for consistent styling in rows
+ */
+export function getColumnWidth(columnId: SortColumn): string {
+  const column = getColumnById(columnId);
+  return cn(column?.width, column?.minWidth);
+}
+
+/**
+ * Helper function to get column alignment class
+ */
+export function getColumnAlign(columnId: SortColumn): string {
+  const column = getColumnById(columnId);
+  if (column?.align === 'center') return 'justify-center text-center';
+  if (column?.align === 'right') return 'justify-end text-right';
+  return '';
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/list-view/list-row.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/list-view/list-row.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..409d88a46510b4237514f7778c5ddbfc42834733
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/list-view/list-row.tsx
@@ -0,0 +1,451 @@
+// @ts-nocheck - BaseFeature index signature causes property access type errors
+import { memo, useCallback, useState, useEffect } from 'react';
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { AlertCircle, Lock, Hand, Sparkles, FileText, FileCheck } from 'lucide-react';
+import type { Feature } from '@/store/app-store';
+import { RowActions, type RowActionHandlers } from './row-actions';
+import { getColumnWidth, getColumnAlign } from './list-header';
+
+export interface ListRowProps {
+  /** The feature to display */
+  feature: Feature;
+  /** Action handlers for the row */
+  handlers: RowActionHandlers;
+  /** Whether this feature is the current auto task (agent is running) */
+  isCurrentAutoTask?: boolean;
+  /** Whether the row is selected */
+  isSelected?: boolean;
+  /** Whether to show the checkbox for selection */
+  showCheckbox?: boolean;
+  /** Callback when the row selection is toggled */
+  onToggleSelect?: () => void;
+  /** Callback when the row is clicked */
+  onClick?: () => void;
+  /** Blocking dependency feature IDs */
+  blockingDependencies?: string[];
+  /** Additional className for custom styling */
+  className?: string;
+}
+
+/**
+ * IndicatorBadges shows small indicator icons for special states (error, blocked, manual verification, just finished)
+ */
+const IndicatorBadges = memo(function IndicatorBadges({
+  feature,
+  blockingDependencies = [],
+  isCurrentAutoTask,
+}: {
+  feature: Feature;
+  blockingDependencies?: string[];
+  isCurrentAutoTask?: boolean;
+}) {
+  const hasError = feature.error && !isCurrentAutoTask;
+  const isBlocked =
+    blockingDependencies.length > 0 && !feature.error && feature.status === 'backlog';
+  const showManualVerification =
+    feature.skipTests && !feature.error && feature.status === 'backlog';
+  const hasPlan = feature.planSpec?.content;
+
+  // Check if just finished (within 2 minutes) - uses timer to auto-expire
+  const [isJustFinished, setIsJustFinished] = useState(false);
+
+  useEffect(() => {
+    if (!feature.justFinishedAt || feature.status !== 'waiting_approval' || feature.error) {
+      setIsJustFinished(false);
+      return;
+    }
+
+    const finishedTime = new Date(feature.justFinishedAt).getTime();
+    const twoMinutes = 2 * 60 * 1000;
+    const elapsed = Date.now() - finishedTime;
+
+    if (elapsed >= twoMinutes) {
+      setIsJustFinished(false);
+      return;
+    }
+
+    // Set as just finished
+    setIsJustFinished(true);
+
+    // Set a timeout to clear the "just finished" state when 2 minutes have passed
+    const remainingTime = twoMinutes - elapsed;
+    const timeoutId = setTimeout(() => {
+      setIsJustFinished(false);
+    }, remainingTime);
+
+    return () => clearTimeout(timeoutId);
+  }, [feature.justFinishedAt, feature.status, feature.error]);
+
+  const badges: Array<{
+    key: string;
+    icon: typeof AlertCircle;
+    tooltip: string;
+    colorClass: string;
+    bgClass: string;
+    borderClass: string;
+    animate?: boolean;
+  }> = [];
+
+  if (hasError) {
+    badges.push({
+      key: 'error',
+      icon: AlertCircle,
+      tooltip: feature.error || 'Error',
+      colorClass: 'text-[var(--status-error)]',
+      bgClass: 'bg-[var(--status-error)]/15',
+      borderClass: 'border-[var(--status-error)]/30',
+    });
+  }
+
+  if (isBlocked) {
+    badges.push({
+      key: 'blocked',
+      icon: Lock,
+      tooltip: `Blocked by ${blockingDependencies.length} incomplete ${blockingDependencies.length === 1 ? 'dependency' : 'dependencies'}`,
+      colorClass: 'text-orange-500',
+      bgClass: 'bg-orange-500/15',
+      borderClass: 'border-orange-500/30',
+    });
+  }
+
+  if (showManualVerification) {
+    badges.push({
+      key: 'manual',
+      icon: Hand,
+      tooltip: 'Manual verification required',
+      colorClass: 'text-[var(--status-warning)]',
+      bgClass: 'bg-[var(--status-warning)]/15',
+      borderClass: 'border-[var(--status-warning)]/30',
+    });
+  }
+
+  if (feature.planSpec?.status === 'generated') {
+    badges.push({
+      key: 'plan-approval',
+      icon: FileCheck,
+      tooltip: 'Plan ready for review - tap to approve',
+      colorClass: 'text-purple-500',
+      bgClass: 'bg-purple-500/15',
+      borderClass: 'border-purple-500/30',
+      animate: true,
+    });
+  } else if (hasPlan) {
+    badges.push({
+      key: 'plan',
+      icon: FileText,
+      tooltip: 'Has implementation plan',
+      colorClass: 'text-[var(--status-info)]',
+      bgClass: 'bg-[var(--status-info)]/15',
+      borderClass: 'border-[var(--status-info)]/30',
+    });
+  }
+
+  if (isJustFinished) {
+    badges.push({
+      key: 'just-finished',
+      icon: Sparkles,
+      tooltip: 'Agent just finished working on this feature',
+      colorClass: 'text-[var(--status-success)]',
+      bgClass: 'bg-[var(--status-success)]/15',
+      borderClass: 'border-[var(--status-success)]/30',
+      animate: true,
+    });
+  }
+
+  if (badges.length === 0) return null;
+
+  return (
+    <div className="flex items-center gap-1 ml-2">
+      {badges.map((badge) => (
+        <Tooltip key={badge.key}>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                'inline-flex items-center justify-center w-5 h-5 rounded border',
+                badge.colorClass,
+                badge.bgClass,
+                badge.borderClass,
+                badge.animate && 'animate-pulse'
+              )}
+              data-testid={`list-row-badge-${badge.key}`}
+            >
+              <badge.icon className="w-3 h-3" />
+            </div>
+          </TooltipTrigger>
+          <TooltipContent side="top" className="text-xs max-w-[250px]">
+            <p>{badge.tooltip}</p>
+          </TooltipContent>
+        </Tooltip>
+      ))}
+    </div>
+  );
+});
+
+/**
+ * ListRow displays a single feature row in the list view table.
+ *
+ * Features:
+ * - Displays feature data in columns matching ListHeader
+ * - Hover state with highlight and action buttons
+ * - Click handler for opening feature details
+ * - Animated border for currently running auto task
+ * - Status badge with appropriate colors
+ * - Priority indicator
+ * - Indicator badges for errors, blocked state, manual verification, etc.
+ * - Selection checkbox for bulk operations
+ *
+ * @example
+ * ```tsx
+ * <ListRow
+ *   feature={feature}
+ *   handlers={{
+ *     onEdit: () => handleEdit(feature.id),
+ *     onDelete: () => handleDelete(feature.id),
+ *     // ... other handlers
+ *   }}
+ *   onClick={() => handleViewDetails(feature)}
+ * />
+ * ```
+ */
+export const ListRow = memo(function ListRow({
+  feature,
+  handlers,
+  isCurrentAutoTask = false,
+  isSelected = false,
+  showCheckbox = false,
+  onToggleSelect,
+  onClick,
+  blockingDependencies = [],
+  className,
+}: ListRowProps) {
+  // A row should display as "actively running" if it's in the runningAutoTasks list
+  // AND in an execution-compatible status. However, there's a race window where a feature
+  // is tracked as running but its status hasn't caught up yet (still 'backlog', 'ready',
+  // or 'interrupted'). We handle this with isRunningWithStaleStatus.
+  const isInExecutionState =
+    feature.status === 'in_progress' ||
+    (typeof feature.status === 'string' && feature.status.startsWith('pipeline_'));
+  const isActivelyRunning = isCurrentAutoTask && isInExecutionState;
+  // Feature is tracked as running but status hasn't updated yet - show running UI
+  const isRunningWithStaleStatus =
+    isCurrentAutoTask &&
+    !isInExecutionState &&
+    (feature.status === 'backlog' ||
+      feature.status === 'ready' ||
+      feature.status === 'interrupted');
+  const showRunningVisuals = isActivelyRunning || isRunningWithStaleStatus;
+
+  const handleRowClick = useCallback(
+    (e: React.MouseEvent) => {
+      // Don't trigger row click if clicking on checkbox or actions
+      if ((e.target as HTMLElement).closest('[data-testid^="row-actions"]')) {
+        return;
+      }
+      if ((e.target as HTMLElement).closest('input[type="checkbox"]')) {
+        return;
+      }
+      onClick?.();
+    },
+    [onClick]
+  );
+
+  const handleCheckboxChange = useCallback(() => {
+    onToggleSelect?.();
+  }, [onToggleSelect]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onClick?.();
+      }
+    },
+    [onClick]
+  );
+
+  const hasError = feature.error && !isCurrentAutoTask;
+
+  const rowContent = (
+    <div
+      role="row"
+      tabIndex={onClick ? 0 : undefined}
+      onClick={handleRowClick}
+      onKeyDown={onClick ? handleKeyDown : undefined}
+      className={cn(
+        'group flex items-center w-full border-b border-border/50',
+        'transition-colors duration-200',
+        onClick && 'cursor-pointer',
+        'hover:bg-accent/50',
+        isSelected && 'bg-accent/70',
+        hasError && 'bg-[var(--status-error)]/5 hover:bg-[var(--status-error)]/10',
+        className
+      )}
+      data-testid={`list-row-${feature.id}`}
+    >
+      {/* Checkbox column */}
+      {showCheckbox && (
+        <div role="cell" className="flex items-center justify-center w-10 px-2 py-2 shrink-0">
+          <input
+            type="checkbox"
+            checked={isSelected}
+            onChange={handleCheckboxChange}
+            className={cn(
+              'h-4 w-4 rounded border-border text-primary cursor-pointer',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1'
+            )}
+            aria-label={`Select ${feature.title || feature.description}`}
+            data-testid={`list-row-checkbox-${feature.id}`}
+          />
+        </div>
+      )}
+
+      {/* Title column - full width with margin for actions */}
+      <div
+        role="cell"
+        className={cn(
+          'flex items-center pl-3 pr-0 py-2 gap-0',
+          getColumnWidth('title'),
+          getColumnAlign('title')
+        )}
+      >
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center">
+            <span
+              className={cn(
+                'text-sm font-medium truncate',
+                feature.titleGenerating && !feature.title && 'animate-pulse text-muted-foreground'
+              )}
+              title={feature.title || feature.description}
+            >
+              {feature.title || feature.description}
+            </span>
+            <IndicatorBadges
+              feature={feature}
+              blockingDependencies={blockingDependencies}
+              isCurrentAutoTask={isCurrentAutoTask}
+            />
+          </div>
+          {/* Show description as subtitle if title exists and is different */}
+          {feature.title && feature.title !== feature.description && (
+            <p
+              className="text-xs text-muted-foreground truncate mt-0.5"
+              title={feature.description}
+            >
+              {feature.description}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Priority column */}
+      <div
+        role="cell"
+        className={cn(
+          'flex items-center pl-0 pr-3 py-2 shrink-0',
+          getColumnWidth('priority'),
+          getColumnAlign('priority')
+        )}
+        data-testid={`list-row-priority-${feature.id}`}
+      >
+        {feature.priority ? (
+          <span
+            className={cn(
+              'inline-flex items-center justify-center w-6 h-6 rounded-md border-[1.5px] font-bold text-xs',
+              feature.priority === 1 &&
+                'bg-[var(--status-error-bg)] border-[var(--status-error)]/40 text-[var(--status-error)]',
+              feature.priority === 2 &&
+                'bg-[var(--status-warning-bg)] border-[var(--status-warning)]/40 text-[var(--status-warning)]',
+              feature.priority === 3 &&
+                'bg-[var(--status-info-bg)] border-[var(--status-info)]/40 text-[var(--status-info)]'
+            )}
+            title={
+              feature.priority === 1
+                ? 'High Priority'
+                : feature.priority === 2
+                  ? 'Medium Priority'
+                  : 'Low Priority'
+            }
+          >
+            {feature.priority === 1 ? 'H' : feature.priority === 2 ? 'M' : 'L'}
+          </span>
+        ) : (
+          <span className="text-muted-foreground text-xs">-</span>
+        )}
+      </div>
+
+      {/* Actions column */}
+      <div role="cell" className="flex items-center justify-end px-3 py-2 w-[80px] shrink-0">
+        <RowActions
+          feature={feature}
+          handlers={handlers}
+          isCurrentAutoTask={isActivelyRunning}
+          isRunningTask={!!isCurrentAutoTask}
+        />
+      </div>
+    </div>
+  );
+
+  // Wrap with animated border for currently running auto task (including stale status)
+  if (showRunningVisuals) {
+    return <div className="animated-border-wrapper-row">{rowContent}</div>;
+  }
+
+  return rowContent;
+});
+
+/**
+ * Helper function to get feature sort value for a column
+ */
+export function getFeatureSortValue(
+  feature: Feature,
+  column: 'title' | 'status' | 'category' | 'priority' | 'createdAt' | 'updatedAt'
+): string | number | Date {
+  switch (column) {
+    case 'title':
+      return (feature.title || feature.description).toLowerCase();
+    case 'status':
+      return feature.status;
+    case 'category':
+      return (feature.category || '').toLowerCase();
+    case 'priority':
+      return feature.priority || 999; // No priority sorts last
+    case 'createdAt': {
+      if (feature.createdAt) return new Date(feature.createdAt);
+      // Fallback: extract timestamp from feature ID (e.g., "feature-1772299989679-185nwyp5kc7")
+      const match = feature.id.match(/^feature-(\d+)-/);
+      if (match) return new Date(parseInt(match[1], 10));
+      return new Date(0);
+    }
+    case 'updatedAt':
+      return feature.updatedAt ? new Date(feature.updatedAt) : new Date(0);
+    default:
+      return '';
+  }
+}
+
+/**
+ * Helper function to sort features by a column
+ */
+export function sortFeatures(
+  features: Feature[],
+  column: 'title' | 'status' | 'category' | 'priority' | 'createdAt' | 'updatedAt',
+  direction: 'asc' | 'desc'
+): Feature[] {
+  return [...features].sort((a, b) => {
+    const aValue = getFeatureSortValue(a, column);
+    const bValue = getFeatureSortValue(b, column);
+
+    let comparison = 0;
+
+    if (aValue instanceof Date && bValue instanceof Date) {
+      comparison = aValue.getTime() - bValue.getTime();
+    } else if (typeof aValue === 'number' && typeof bValue === 'number') {
+      comparison = aValue - bValue;
+    } else {
+      comparison = String(aValue).localeCompare(String(bValue));
+    }
+
+    return direction === 'asc' ? comparison : -comparison;
+  });
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/list-view/list-view.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/list-view/list-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..94bd422686d8458f93175efc921b9150a57fe215
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/list-view/list-view.tsx
@@ -0,0 +1,542 @@
+import { memo, useMemo, useCallback, useState } from 'react';
+import { ChevronDown, ChevronRight, Plus } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { getBlockingDependencies } from '@automaker/dependency-resolver';
+import { useAppStore, formatShortcut } from '@/store/app-store';
+import type { Feature } from '@/store/app-store';
+import type { PipelineConfig, FeatureStatusWithPipeline, FeatureTemplate } from '@automaker/types';
+import { ListHeader } from './list-header';
+import { ListRow, sortFeatures } from './list-row';
+import { createRowActionHandlers, type RowActionHandlers } from './row-actions';
+import { getStatusOrder } from './status-badge';
+import { getColumnsWithPipeline } from '../../constants';
+import { AddFeatureButton } from '../add-feature-button';
+import type { SortConfig, SortColumn } from '../../hooks/use-list-view-state';
+
+/** Empty set constant to avoid creating new instances on each render */
+const EMPTY_SET = new Set<string>();
+
+/**
+ * Status group configuration for the list view
+ */
+interface StatusGroup {
+  id: FeatureStatusWithPipeline;
+  title: string;
+  colorClass: string;
+  features: Feature[];
+}
+
+/**
+ * Props for action handlers passed from the parent board view
+ */
+export interface ListViewActionHandlers {
+  onEdit: (feature: Feature) => void;
+  onDelete: (featureId: string) => void;
+  onViewOutput?: (feature: Feature) => void;
+  onVerify?: (feature: Feature) => void;
+  onResume?: (feature: Feature) => void;
+  onForceStop?: (feature: Feature) => void;
+  onManualVerify?: (feature: Feature) => void;
+  onFollowUp?: (feature: Feature) => void;
+  onImplement?: (feature: Feature) => void;
+  onComplete?: (feature: Feature) => void;
+  onViewPlan?: (feature: Feature) => void;
+  onApprovePlan?: (feature: Feature) => void;
+  onSpawnTask?: (feature: Feature) => void;
+  onDuplicate?: (feature: Feature) => void;
+  onDuplicateAsChild?: (feature: Feature) => void;
+  onDuplicateAsChildMultiple?: (feature: Feature) => void;
+}
+
+export interface ListViewProps {
+  /** Map of column/status ID to features in that column */
+  columnFeaturesMap: Record<string, Feature[]>;
+  /** All features (for dependency checking) */
+  allFeatures: Feature[];
+  /** Current sort configuration */
+  sortConfig: SortConfig;
+  /** Callback when sort column is changed */
+  onSortChange: (column: SortColumn) => void;
+  /** When true, always sort by most recent (createdAt desc), overriding the current sort config */
+  sortNewestCardOnTop?: boolean;
+  /** Action handlers for rows */
+  actionHandlers: ListViewActionHandlers;
+  /** Set of feature IDs that are currently running */
+  runningAutoTasks: string[];
+  /** Pipeline configuration for custom statuses */
+  pipelineConfig?: PipelineConfig | null;
+  /** Callback to add a new feature */
+  onAddFeature?: () => void;
+  /** Callback for quick add */
+  onQuickAdd?: () => void;
+  /** Callback for template selection */
+  onTemplateSelect?: (template: FeatureTemplate) => void;
+  /** Available feature templates */
+  templates?: FeatureTemplate[];
+  /** Whether selection mode is enabled */
+  isSelectionMode?: boolean;
+  /** Set of selected feature IDs */
+  selectedFeatureIds?: Set<string>;
+  /** Callback when a feature's selection is toggled */
+  onToggleFeatureSelection?: (featureId: string) => void;
+  /** Callback when the row is clicked */
+  onRowClick?: (feature: Feature) => void;
+  /** Additional className for custom styling */
+  className?: string;
+}
+
+/**
+ * StatusGroupHeader displays the header for a status group with collapse toggle
+ */
+const StatusGroupHeader = memo(function StatusGroupHeader({
+  group,
+  isExpanded,
+  onToggle,
+}: {
+  group: StatusGroup;
+  isExpanded: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      className={cn(
+        'flex items-center gap-2 w-full px-3 py-2 text-left',
+        'bg-muted/50 hover:bg-muted/70 transition-colors duration-200',
+        'border-b border-border/50',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset'
+      )}
+      aria-expanded={isExpanded}
+      data-testid={`list-group-header-${group.id}`}
+    >
+      {/* Collapse indicator */}
+      <span className="text-muted-foreground">
+        {isExpanded ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
+      </span>
+
+      {/* Status color indicator */}
+      <span
+        className={cn('w-2.5 h-2.5 rounded-full shrink-0', group.colorClass)}
+        aria-hidden="true"
+      />
+
+      {/* Group title */}
+      <span className="font-medium text-sm">{group.title}</span>
+
+      {/* Feature count */}
+      <span className="text-xs text-muted-foreground">({group.features.length})</span>
+    </button>
+  );
+});
+
+/**
+ * EmptyState displays a message when there are no features
+ */
+const EmptyState = memo(function EmptyState({
+  onAddFeature,
+  onQuickAdd,
+  onTemplateSelect,
+  templates,
+  shortcut,
+}: {
+  onAddFeature?: () => void;
+  onQuickAdd?: () => void;
+  onTemplateSelect?: (template: FeatureTemplate) => void;
+  templates?: FeatureTemplate[];
+  shortcut?: string;
+}) {
+  // Only show AddFeatureButton if all required handlers are provided
+  const canShowSplitButton = onAddFeature && onQuickAdd && onTemplateSelect;
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center justify-center py-16 px-4',
+        'text-center text-muted-foreground'
+      )}
+      data-testid="list-view-empty"
+    >
+      <p className="text-sm mb-4">No features to display</p>
+      {canShowSplitButton ? (
+        <AddFeatureButton
+          onAddFeature={onAddFeature}
+          onQuickAdd={onQuickAdd}
+          onTemplateSelect={onTemplateSelect}
+          templates={templates || []}
+          shortcut={shortcut}
+          testIdPrefix="list-view-empty-add-feature"
+        />
+      ) : onAddFeature ? (
+        <Button variant="default" size="sm" onClick={onAddFeature}>
+          <Plus className="w-4 h-4 mr-2" />
+          Add Feature
+        </Button>
+      ) : null}
+    </div>
+  );
+});
+
+/**
+ * ListView displays features in a table format grouped by status.
+ *
+ * Features:
+ * - Groups features by status (backlog, in_progress, waiting_approval, verified, pipeline steps)
+ * - Collapsible status groups
+ * - Sortable columns (title, status, category, priority, dates)
+ * - Inline row actions with hover state
+ * - Selection support for bulk operations
+ * - Animated border for currently running features
+ * - Keyboard accessible
+ *
+ * The component receives features grouped by status via columnFeaturesMap
+ * and applies the current sort configuration within each group.
+ *
+ * @example
+ * ```tsx
+ * const { sortConfig, setSortColumn } = useListViewState();
+ * const { columnFeaturesMap } = useBoardColumnFeatures({ features, ... });
+ *
+ * <ListView
+ *   columnFeaturesMap={columnFeaturesMap}
+ *   allFeatures={features}
+ *   sortConfig={sortConfig}
+ *   onSortChange={setSortColumn}
+ *   actionHandlers={{
+ *     onEdit: handleEdit,
+ *     onDelete: handleDelete,
+ *     // ...
+ *   }}
+ *   runningAutoTasks={runningAutoTasks}
+ *   pipelineConfig={pipelineConfig}
+ *   onAddFeature={handleAddFeature}
+ * />
+ * ```
+ */
+export const ListView = memo(function ListView({
+  columnFeaturesMap,
+  allFeatures,
+  sortConfig,
+  onSortChange,
+  actionHandlers,
+  runningAutoTasks,
+  pipelineConfig = null,
+  onAddFeature,
+  onQuickAdd,
+  onTemplateSelect,
+  templates = [],
+  isSelectionMode = false,
+  selectedFeatureIds = EMPTY_SET,
+  onToggleFeatureSelection,
+  onRowClick,
+  className,
+  sortNewestCardOnTop = false,
+}: ListViewProps) {
+  // Track collapsed state for each status group
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set());
+
+  // Get the keyboard shortcut for adding features
+  const keyboardShortcuts = useAppStore((state) => state.keyboardShortcuts);
+  const addFeatureShortcut = keyboardShortcuts.addFeature || 'N';
+
+  // Effective sort config: when sortNewestCardOnTop is enabled, sort by createdAt desc
+  const effectiveSortConfig: SortConfig = useMemo(
+    () => (sortNewestCardOnTop ? { column: 'createdAt', direction: 'desc' } : sortConfig),
+    [sortNewestCardOnTop, sortConfig]
+  );
+
+  // Generate status groups from columnFeaturesMap
+  const statusGroups = useMemo<StatusGroup[]>(() => {
+    // Effective sort config: when sortNewestCardOnTop is enabled, sort by createdAt desc
+    const effectiveSortConfig: SortConfig = sortNewestCardOnTop
+      ? { column: 'createdAt', direction: 'desc' }
+      : sortConfig;
+
+    const columns = getColumnsWithPipeline(pipelineConfig);
+    const groups: StatusGroup[] = [];
+
+    for (const column of columns) {
+      const features = columnFeaturesMap[column.id] || [];
+      if (features.length > 0) {
+        // Sort features within the group according to effective sort config
+        const sortedFeatures = sortFeatures(
+          features,
+          effectiveSortConfig.column,
+          effectiveSortConfig.direction
+        );
+
+        groups.push({
+          id: column.id as FeatureStatusWithPipeline,
+          title: column.title,
+          colorClass: column.colorClass,
+          features: sortedFeatures,
+        });
+      }
+    }
+
+    // Sort groups by status order
+    return groups.sort((a, b) => getStatusOrder(a.id) - getStatusOrder(b.id));
+  }, [columnFeaturesMap, pipelineConfig, sortNewestCardOnTop, sortConfig]);
+
+  // Calculate total feature count
+  const totalFeatures = useMemo(
+    () => statusGroups.reduce((sum, group) => sum + group.features.length, 0),
+    [statusGroups]
+  );
+
+  // Toggle group collapse state
+  const toggleGroup = useCallback((groupId: string) => {
+    setCollapsedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupId)) {
+        next.delete(groupId);
+      } else {
+        next.add(groupId);
+      }
+      return next;
+    });
+  }, []);
+
+  // Create row action handlers for a feature
+  const createHandlers = useCallback(
+    (feature: Feature): RowActionHandlers => {
+      return createRowActionHandlers(feature.id, {
+        editFeature: (id) => {
+          const f = allFeatures.find((f) => f.id === id);
+          if (f) actionHandlers.onEdit(f);
+        },
+        deleteFeature: (id) => actionHandlers.onDelete(id),
+        viewOutput: actionHandlers.onViewOutput
+          ? (id) => {
+              const f = allFeatures.find((f) => f.id === id);
+              if (f) actionHandlers.onViewOutput?.(f);
+            }
+          : undefined,
+        verifyFeature: actionHandlers.onVerify
+          ? (id) => {
+              const f = allFeatures.find((f) => f.id === id);
+              if (f) actionHandlers.onVerify?.(f);
+            }
+          : undefined,
+        resumeFeature: actionHandlers.onResume
+          ? (id) => {
+              const f = allFeatures.find((f) => f.id === id);
+              if (f) actionHandlers.onResume?.(f);
+            }
+          : undefined,
+        forceStop: actionHandlers.onForceStop
+          ? (id) => {
+              const f = allFeatures.find((f) => f.id === id);
+              if (f) actionHandlers.onForceStop?.(f);
+            }
+          : undefined,
+        manualVerify: actionHandlers.onManualVerify
+          ? (id) => {
+              const f = allFeatures.find((f) => f.id === id);
+              if (f) actionHandlers.onManualVerify?.(f);
+            }
+          : undefined,
+        followUp: actionHandlers.onFollowUp
+          ? (id) => {
+              const f = allFeatures.find((f) => f.id === id);
+              if (f) actionHandlers.onFollowUp?.(f);
+            }
+          : undefined,
+        implement: actionHandlers.onImplement
+          ? (id) => {
+              const f = allFeatures.find((f) => f.id === id);
+              if (f) actionHandlers.onImplement?.(f);
+            }
+          : undefined,
+        complete: actionHandlers.onComplete
+          ? (id) => {
+              const f = allFeatures.find((f) => f.id === id);
+              if (f) actionHandlers.onComplete?.(f);
+            }
+          : undefined,
+        viewPlan: actionHandlers.onViewPlan
+          ? (id) => {
+              const f = allFeatures.find((f) => f.id === id);
+              if (f) actionHandlers.onViewPlan?.(f);
+            }
+          : undefined,
+        approvePlan: actionHandlers.onApprovePlan
+          ? (id) => {
+              const f = allFeatures.find((f) => f.id === id);
+              if (f) actionHandlers.onApprovePlan?.(f);
+            }
+          : undefined,
+        spawnTask: actionHandlers.onSpawnTask
+          ? (id) => {
+              const f = allFeatures.find((f) => f.id === id);
+              if (f) actionHandlers.onSpawnTask?.(f);
+            }
+          : undefined,
+        duplicate: actionHandlers.onDuplicate
+          ? (id) => {
+              const f = allFeatures.find((f) => f.id === id);
+              if (f) actionHandlers.onDuplicate?.(f);
+            }
+          : undefined,
+        duplicateAsChild: actionHandlers.onDuplicateAsChild
+          ? (id) => {
+              const f = allFeatures.find((f) => f.id === id);
+              if (f) actionHandlers.onDuplicateAsChild?.(f);
+            }
+          : undefined,
+        duplicateAsChildMultiple: actionHandlers.onDuplicateAsChildMultiple
+          ? (id) => {
+              const f = allFeatures.find((f) => f.id === id);
+              if (f) actionHandlers.onDuplicateAsChildMultiple?.(f);
+            }
+          : undefined,
+      });
+    },
+    [actionHandlers, allFeatures]
+  );
+
+  // Get blocking dependencies for a feature
+  const getBlockingDeps = useCallback(
+    (feature: Feature): string[] => {
+      return getBlockingDependencies(feature, allFeatures);
+    },
+    [allFeatures]
+  );
+
+  // Calculate selection state for header checkbox
+  const selectionState = useMemo(() => {
+    if (!isSelectionMode || totalFeatures === 0) {
+      return { allSelected: false, someSelected: false };
+    }
+    const selectedCount = selectedFeatureIds.size;
+    return {
+      allSelected: selectedCount === totalFeatures && selectedCount > 0,
+      someSelected: selectedCount > 0 && selectedCount < totalFeatures,
+    };
+  }, [isSelectionMode, totalFeatures, selectedFeatureIds]);
+
+  // Handle select all toggle
+  const handleSelectAll = useCallback(() => {
+    if (!onToggleFeatureSelection) return;
+
+    // If all selected, deselect all; otherwise select all
+    if (selectionState.allSelected) {
+      // Clear all selections
+      selectedFeatureIds.forEach((id) => onToggleFeatureSelection(id));
+    } else {
+      // Select all features that aren't already selected
+      for (const group of statusGroups) {
+        for (const feature of group.features) {
+          if (!selectedFeatureIds.has(feature.id)) {
+            onToggleFeatureSelection(feature.id);
+          }
+        }
+      }
+    }
+  }, [onToggleFeatureSelection, selectionState.allSelected, selectedFeatureIds, statusGroups]);
+
+  // Show empty state if no features
+  if (totalFeatures === 0) {
+    return (
+      <div className={cn('flex flex-col h-full bg-background', className)} data-testid="list-view">
+        <EmptyState
+          onAddFeature={onAddFeature}
+          onQuickAdd={onQuickAdd}
+          onTemplateSelect={onTemplateSelect}
+          templates={templates}
+          shortcut={formatShortcut(addFeatureShortcut, true)}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn('flex flex-col h-full bg-background', className)}
+      role="table"
+      aria-label="Features list"
+      data-testid="list-view"
+    >
+      {/* Table header */}
+      <ListHeader
+        sortConfig={effectiveSortConfig}
+        onSortChange={onSortChange}
+        showCheckbox={isSelectionMode}
+        allSelected={selectionState.allSelected}
+        someSelected={selectionState.someSelected}
+        onSelectAll={handleSelectAll}
+      />
+
+      {/* Table body with status groups */}
+      <div className="flex-1 overflow-y-auto" role="rowgroup">
+        {statusGroups.map((group) => {
+          const isExpanded = !collapsedGroups.has(group.id);
+
+          return (
+            <div
+              key={group.id}
+              className="border-b border-border/30"
+              data-testid={`list-group-${group.id}`}
+            >
+              {/* Group header */}
+              <StatusGroupHeader
+                group={group}
+                isExpanded={isExpanded}
+                onToggle={() => toggleGroup(group.id)}
+              />
+
+              {/* Group rows */}
+              {isExpanded && (
+                <div role="rowgroup">
+                  {group.features.map((feature) => (
+                    <ListRow
+                      key={feature.id}
+                      feature={feature}
+                      handlers={createHandlers(feature)}
+                      isCurrentAutoTask={runningAutoTasks.includes(feature.id)}
+                      isSelected={selectedFeatureIds.has(feature.id)}
+                      showCheckbox={isSelectionMode}
+                      onToggleSelect={() => onToggleFeatureSelection?.(feature.id)}
+                      onClick={() => onRowClick?.(feature)}
+                      blockingDependencies={getBlockingDeps(feature)}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Footer with Add Feature button, styled like board view */}
+      {onAddFeature && onQuickAdd && onTemplateSelect && (
+        <div className="border-t border-border px-4 py-2">
+          <AddFeatureButton
+            onAddFeature={onAddFeature}
+            onQuickAdd={onQuickAdd}
+            onTemplateSelect={onTemplateSelect}
+            templates={templates}
+            fullWidth
+            shortcut={formatShortcut(addFeatureShortcut, true)}
+            testIdPrefix="list-view-add-feature"
+          />
+        </div>
+      )}
+    </div>
+  );
+});
+
+/**
+ * Helper to get all features from the columnFeaturesMap as a flat array
+ */
+export function getFlatFeatures(columnFeaturesMap: Record<string, Feature[]>): Feature[] {
+  return Object.values(columnFeaturesMap).flat();
+}
+
+/**
+ * Helper to count total features across all groups
+ */
+export function getTotalFeatureCount(columnFeaturesMap: Record<string, Feature[]>): number {
+  return Object.values(columnFeaturesMap).reduce((sum, features) => sum + features.length, 0);
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/list-view/row-actions.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/list-view/row-actions.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..755ed017af358d93f1f8f9737ac61c1044e02122
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/list-view/row-actions.tsx
@@ -0,0 +1,944 @@
+import { memo, useCallback, useState } from 'react';
+import {
+  MoreHorizontal,
+  Edit,
+  Trash2,
+  PlayCircle,
+  RotateCcw,
+  StopCircle,
+  CheckCircle2,
+  FileText,
+  Eye,
+  Wand2,
+  Archive,
+  GitBranch,
+  GitFork,
+  ExternalLink,
+  Copy,
+  Repeat,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import type { Feature } from '@/store/app-store';
+import { isBacklogLikeStatus } from '../../constants';
+
+/**
+ * Action handler types for row actions
+ */
+export interface RowActionHandlers {
+  onEdit: () => void;
+  onDelete: () => void;
+  onViewOutput?: () => void;
+  onVerify?: () => void;
+  onResume?: () => void;
+  onForceStop?: () => void;
+  onManualVerify?: () => void;
+  onFollowUp?: () => void;
+  onImplement?: () => void;
+  onComplete?: () => void;
+  onViewPlan?: () => void;
+  onApprovePlan?: () => void;
+  onSpawnTask?: () => void;
+  onDuplicate?: () => void;
+  onDuplicateAsChild?: () => void;
+  onDuplicateAsChildMultiple?: () => void;
+}
+
+export interface RowActionsProps {
+  /** The feature for this row */
+  feature: Feature;
+  /** Action handlers */
+  handlers: RowActionHandlers;
+  /** Whether this feature is the current auto task (agent is running) */
+  isCurrentAutoTask?: boolean;
+  /** Whether this feature is tracked as a running task (may be true even before status updates to in_progress) */
+  isRunningTask?: boolean;
+  /** Whether the dropdown menu is open */
+  isOpen?: boolean;
+  /** Callback when the dropdown open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Additional className for custom styling */
+  className?: string;
+}
+
+/**
+ * MenuItem is a helper component for dropdown menu items with consistent styling
+ */
+const MenuItem = memo(function MenuItem({
+  icon: Icon,
+  label,
+  onClick,
+  variant = 'default',
+  disabled = false,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  onClick: () => void;
+  variant?: 'default' | 'destructive' | 'primary' | 'success' | 'warning';
+  disabled?: boolean;
+}) {
+  const variantClasses = {
+    default: '',
+    destructive: 'text-destructive focus:text-destructive focus:bg-destructive/10',
+    primary: 'text-primary focus:text-primary focus:bg-primary/10',
+    success:
+      'text-[var(--status-success)] focus:text-[var(--status-success)] focus:bg-[var(--status-success)]/10',
+    warning:
+      'text-[var(--status-waiting)] focus:text-[var(--status-waiting)] focus:bg-[var(--status-waiting)]/10',
+  };
+
+  return (
+    <DropdownMenuItem
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
+      }}
+      disabled={disabled}
+      className={cn('gap-2', variantClasses[variant])}
+    >
+      <Icon className="w-4 h-4" />
+      <span>{label}</span>
+    </DropdownMenuItem>
+  );
+});
+
+/**
+ * Get the primary action for quick access button based on feature status
+ */
+function getPrimaryAction(
+  feature: Feature,
+  handlers: RowActionHandlers,
+  isCurrentAutoTask: boolean,
+  isRunningTask: boolean = false
+): {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  onClick: () => void;
+  variant?: 'default' | 'destructive' | 'primary' | 'success' | 'warning';
+} | null {
+  // Running task - force stop is primary
+  if (isCurrentAutoTask) {
+    if (handlers.onForceStop) {
+      return {
+        icon: StopCircle,
+        label: 'Stop',
+        onClick: handlers.onForceStop,
+        variant: 'destructive',
+      };
+    }
+    return null;
+  }
+
+  // Running task with stale status - show stop instead of Make
+  // This handles the race window where the feature is tracked as running
+  // but status hasn't updated to in_progress yet
+  if (
+    isRunningTask &&
+    (feature.status === 'backlog' ||
+      feature.status === 'merge_conflict' ||
+      feature.status === 'ready' ||
+      feature.status === 'interrupted') &&
+    handlers.onForceStop
+  ) {
+    return {
+      icon: StopCircle,
+      label: 'Stop',
+      onClick: handlers.onForceStop,
+      variant: 'destructive',
+    };
+  }
+
+  // Backlog-like statuses - implement/restart is primary
+  if (
+    (feature.status === 'backlog' || feature.status === 'merge_conflict') &&
+    handlers.onImplement
+  ) {
+    return {
+      icon: feature.status === 'merge_conflict' ? RotateCcw : PlayCircle,
+      label: feature.status === 'merge_conflict' ? 'Restart' : 'Make',
+      onClick: handlers.onImplement,
+      variant: 'primary',
+    };
+  }
+
+  // In progress with no error - agent is starting/running but not yet in runningAutoTasks.
+  // Show Stop button immediately instead of Verify/Resume during this race window.
+  if (feature.status === 'in_progress' && !feature.error && handlers.onForceStop) {
+    return {
+      icon: StopCircle,
+      label: 'Stop',
+      onClick: handlers.onForceStop,
+      variant: 'destructive',
+    };
+  }
+
+  // In progress with plan approval pending
+  if (
+    feature.status === 'in_progress' &&
+    feature.planSpec?.status === 'generated' &&
+    handlers.onApprovePlan
+  ) {
+    return {
+      icon: FileText,
+      label: 'Approve',
+      onClick: handlers.onApprovePlan,
+      variant: 'warning',
+    };
+  }
+
+  // In progress - resume is primary
+  if (feature.status === 'in_progress' && handlers.onResume) {
+    return {
+      icon: RotateCcw,
+      label: 'Resume',
+      onClick: handlers.onResume,
+      variant: 'success',
+    };
+  }
+
+  // Waiting approval - verify is primary
+  if (feature.status === 'waiting_approval' && handlers.onManualVerify) {
+    return {
+      icon: CheckCircle2,
+      label: 'Verify',
+      onClick: handlers.onManualVerify,
+      variant: 'success',
+    };
+  }
+
+  // Verified - complete is primary
+  if (feature.status === 'verified' && handlers.onComplete) {
+    return {
+      icon: Archive,
+      label: 'Complete',
+      onClick: handlers.onComplete,
+      variant: 'primary',
+    };
+  }
+
+  return null;
+}
+
+/**
+ * Get secondary actions for inline display based on feature status
+ */
+function getSecondaryActions(
+  feature: Feature,
+  handlers: RowActionHandlers
+): Array<{
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  onClick: () => void;
+}> {
+  const actions = [];
+
+  // Refine action for waiting_approval status
+  if (feature.status === 'waiting_approval' && handlers.onFollowUp) {
+    actions.push({
+      icon: Wand2,
+      label: 'Refine',
+      onClick: handlers.onFollowUp,
+    });
+  }
+
+  return actions;
+}
+
+/**
+ * RowActions provides an inline action menu for list view rows.
+ *
+ * Features:
+ * - Quick access button for primary action (Make, Resume, Verify, etc.)
+ * - Dropdown menu with all available actions
+ * - Context-aware actions based on feature status
+ * - Support for running task actions (view logs, force stop)
+ * - Keyboard accessible (focus, Enter/Space to open)
+ *
+ * Actions by status:
+ * - Backlog: Edit, Delete, Make (implement), View Plan, Spawn Sub-Task
+ * - In Progress: View Logs, Resume, Approve Plan, Manual Verify, Edit, Spawn Sub-Task, Delete
+ * - Waiting Approval: Refine (inline secondary), Verify, View Logs, View PR, Edit, Spawn Sub-Task, Delete
+ * - Verified: View Logs, View PR, View Branch, Complete, Edit, Spawn Sub-Task, Delete
+ * - Running (auto task): View Logs, Approve Plan, Edit, Spawn Sub-Task, Force Stop
+ * - Pipeline statuses: View Logs, Edit, Spawn Sub-Task, Delete
+ *
+ * @example
+ * ```tsx
+ * <RowActions
+ *   feature={feature}
+ *   handlers={{
+ *     onEdit: () => handleEdit(feature.id),
+ *     onDelete: () => handleDelete(feature.id),
+ *     onImplement: () => handleImplement(feature.id),
+ *     // ... other handlers
+ *   }}
+ * />
+ * ```
+ */
+export const RowActions = memo(function RowActions({
+  feature,
+  handlers,
+  isCurrentAutoTask = false,
+  isRunningTask = false,
+  isOpen,
+  onOpenChange,
+  className,
+}: RowActionsProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+
+  // Use controlled or uncontrolled state
+  const open = isOpen ?? internalOpen;
+  const setOpen = useCallback(
+    (value: boolean) => {
+      if (onOpenChange) {
+        onOpenChange(value);
+      } else {
+        setInternalOpen(value);
+      }
+    },
+    [onOpenChange]
+  );
+
+  const handleOpenChange = useCallback(
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+    },
+    [setOpen]
+  );
+
+  const primaryAction = getPrimaryAction(feature, handlers, isCurrentAutoTask, isRunningTask);
+  const secondaryActions = getSecondaryActions(feature, handlers);
+
+  // Helper to close menu after action
+  const withClose = useCallback(
+    (handler: () => void) => () => {
+      setOpen(false);
+      handler();
+    },
+    [setOpen]
+  );
+
+  return (
+    <div
+      className={cn('flex items-center gap-1', className)}
+      onClick={(e) => e.stopPropagation()}
+      data-testid={`row-actions-${feature.id}`}
+    >
+      {/* Primary action quick button */}
+      {primaryAction && (
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className={cn(
+            'h-7 w-7',
+            primaryAction.variant === 'destructive' &&
+              'hover:bg-destructive/10 hover:text-destructive',
+            primaryAction.variant === 'primary' && 'hover:bg-primary/10 hover:text-primary',
+            primaryAction.variant === 'success' &&
+              'hover:bg-[var(--status-success)]/10 hover:text-[var(--status-success)]',
+            primaryAction.variant === 'warning' &&
+              'hover:bg-[var(--status-waiting)]/10 hover:text-[var(--status-waiting)]'
+          )}
+          onClick={(e) => {
+            e.stopPropagation();
+            primaryAction.onClick();
+          }}
+          title={primaryAction.label}
+          data-testid={`row-action-primary-${feature.id}`}
+        >
+          <primaryAction.icon className="w-4 h-4" />
+        </Button>
+      )}
+
+      {/* Secondary action buttons */}
+      {secondaryActions.map((action, index) => (
+        <Button
+          key={`secondary-action-${index}`}
+          variant="ghost"
+          size="icon-sm"
+          className={cn('h-7 w-7', 'text-muted-foreground', 'hover:bg-muted hover:text-foreground')}
+          onClick={(e) => {
+            e.stopPropagation();
+            action.onClick();
+          }}
+          title={action.label}
+          data-testid={`row-action-secondary-${feature.id}-${action.label.toLowerCase()}`}
+        >
+          <action.icon className="w-4 h-4" />
+        </Button>
+      ))}
+
+      {/* Dropdown menu */}
+      <DropdownMenu open={open} onOpenChange={handleOpenChange}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="h-7 w-7 text-muted-foreground hover:text-foreground"
+            data-testid={`row-actions-trigger-${feature.id}`}
+          >
+            <MoreHorizontal className="w-4 h-4" />
+            <span className="sr-only">Open actions menu</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-48">
+          {/* Running task actions */}
+          {isCurrentAutoTask && (
+            <>
+              {handlers.onViewOutput && (
+                <MenuItem
+                  icon={FileText}
+                  label="View Logs"
+                  onClick={withClose(handlers.onViewOutput)}
+                />
+              )}
+              {feature.planSpec?.status === 'generated' && handlers.onApprovePlan && (
+                <MenuItem
+                  icon={FileText}
+                  label="Approve Plan"
+                  onClick={withClose(handlers.onApprovePlan)}
+                  variant="warning"
+                />
+              )}
+              <MenuItem icon={Edit} label="Edit" onClick={withClose(handlers.onEdit)} />
+              {handlers.onSpawnTask && (
+                <MenuItem
+                  icon={GitFork}
+                  label="Spawn Sub-Task"
+                  onClick={withClose(handlers.onSpawnTask)}
+                />
+              )}
+              {handlers.onForceStop && (
+                <>
+                  <DropdownMenuSeparator />
+                  <MenuItem
+                    icon={StopCircle}
+                    label="Force Stop"
+                    onClick={withClose(handlers.onForceStop)}
+                    variant="destructive"
+                  />
+                </>
+              )}
+            </>
+          )}
+
+          {/* Running task with stale status - the feature is tracked as running but its
+              persisted status hasn't caught up yet during WebSocket/cache sync delays.
+              These features are placed in the in_progress column by useBoardColumnFeatures
+              (hooks/use-board-column-features.ts) but no other menu block matches their
+              stale status, so we provide running-appropriate actions here. */}
+          {!isCurrentAutoTask && isRunningTask && isBacklogLikeStatus(feature.status) && (
+            <>
+              {handlers.onViewOutput && (
+                <MenuItem
+                  icon={FileText}
+                  label="View Logs"
+                  onClick={withClose(handlers.onViewOutput)}
+                />
+              )}
+              <MenuItem icon={Edit} label="Edit" onClick={withClose(handlers.onEdit)} />
+              {handlers.onSpawnTask && (
+                <MenuItem
+                  icon={GitFork}
+                  label="Spawn Sub-Task"
+                  onClick={withClose(handlers.onSpawnTask)}
+                />
+              )}
+              {handlers.onForceStop && (
+                <>
+                  <DropdownMenuSeparator />
+                  <MenuItem
+                    icon={StopCircle}
+                    label="Force Stop"
+                    onClick={withClose(handlers.onForceStop)}
+                    variant="destructive"
+                  />
+                </>
+              )}
+            </>
+          )}
+
+          {/* Backlog actions */}
+          {!isCurrentAutoTask &&
+            !isRunningTask &&
+            (feature.status === 'backlog' || feature.status === 'merge_conflict') && (
+              <>
+                <MenuItem icon={Edit} label="Edit" onClick={withClose(handlers.onEdit)} />
+                {handlers.onViewOutput && (
+                  <MenuItem
+                    icon={FileText}
+                    label="View Logs"
+                    onClick={withClose(handlers.onViewOutput)}
+                  />
+                )}
+                {feature.planSpec?.content && handlers.onViewPlan && (
+                  <MenuItem icon={Eye} label="View Plan" onClick={withClose(handlers.onViewPlan)} />
+                )}
+                {handlers.onImplement && (
+                  <MenuItem
+                    icon={feature.status === 'merge_conflict' ? RotateCcw : PlayCircle}
+                    label={feature.status === 'merge_conflict' ? 'Restart' : 'Make'}
+                    onClick={withClose(handlers.onImplement)}
+                    variant="primary"
+                  />
+                )}
+                {handlers.onSpawnTask && (
+                  <MenuItem
+                    icon={GitFork}
+                    label="Spawn Sub-Task"
+                    onClick={withClose(handlers.onSpawnTask)}
+                  />
+                )}
+                {handlers.onDuplicate && (
+                  <DropdownMenuSub>
+                    <div className="flex items-center">
+                      <DropdownMenuItem
+                        onClick={withClose(handlers.onDuplicate)}
+                        className="flex-1 pr-0 rounded-r-none"
+                      >
+                        <Copy className="w-4 h-4 mr-2" />
+                        Duplicate
+                      </DropdownMenuItem>
+                      {handlers.onDuplicateAsChild && (
+                        <DropdownMenuSubTrigger className="px-1 rounded-l-none border-l border-border/30 h-8" />
+                      )}
+                    </div>
+                    {handlers.onDuplicateAsChild && (
+                      <DropdownMenuSubContent>
+                        <MenuItem
+                          icon={GitFork}
+                          label="Duplicate as Child"
+                          onClick={withClose(handlers.onDuplicateAsChild)}
+                        />
+                        {handlers.onDuplicateAsChildMultiple && (
+                          <MenuItem
+                            icon={Repeat}
+                            label="Duplicate as Child ×N"
+                            onClick={withClose(handlers.onDuplicateAsChildMultiple)}
+                          />
+                        )}
+                      </DropdownMenuSubContent>
+                    )}
+                  </DropdownMenuSub>
+                )}
+                <DropdownMenuSeparator />
+                <MenuItem
+                  icon={Trash2}
+                  label="Delete"
+                  onClick={withClose(handlers.onDelete)}
+                  variant="destructive"
+                />
+              </>
+            )}
+
+          {/* In Progress actions - starting/running (no error, force stop available) - mirrors running task actions */}
+          {!isCurrentAutoTask &&
+            feature.status === 'in_progress' &&
+            !feature.error &&
+            handlers.onForceStop && (
+              <>
+                {handlers.onViewOutput && (
+                  <MenuItem
+                    icon={FileText}
+                    label="View Logs"
+                    onClick={withClose(handlers.onViewOutput)}
+                  />
+                )}
+                {feature.planSpec?.status === 'generated' && handlers.onApprovePlan && (
+                  <MenuItem
+                    icon={FileText}
+                    label="Approve Plan"
+                    onClick={withClose(handlers.onApprovePlan)}
+                    variant="warning"
+                  />
+                )}
+                <MenuItem icon={Edit} label="Edit" onClick={withClose(handlers.onEdit)} />
+                {handlers.onSpawnTask && (
+                  <MenuItem
+                    icon={GitFork}
+                    label="Spawn Sub-Task"
+                    onClick={withClose(handlers.onSpawnTask)}
+                  />
+                )}
+                {handlers.onForceStop && (
+                  <>
+                    <DropdownMenuSeparator />
+                    <MenuItem
+                      icon={StopCircle}
+                      label="Force Stop"
+                      onClick={withClose(handlers.onForceStop)}
+                      variant="destructive"
+                    />
+                  </>
+                )}
+              </>
+            )}
+
+          {/* In Progress actions - interrupted/error state */}
+          {!isCurrentAutoTask &&
+            feature.status === 'in_progress' &&
+            !(!feature.error && handlers.onForceStop) && (
+              <>
+                {handlers.onViewOutput && (
+                  <MenuItem
+                    icon={FileText}
+                    label="View Logs"
+                    onClick={withClose(handlers.onViewOutput)}
+                  />
+                )}
+                {feature.planSpec?.status === 'generated' && handlers.onApprovePlan && (
+                  <MenuItem
+                    icon={FileText}
+                    label="Approve Plan"
+                    onClick={withClose(handlers.onApprovePlan)}
+                    variant="warning"
+                  />
+                )}
+                {feature.skipTests && handlers.onManualVerify ? (
+                  <MenuItem
+                    icon={CheckCircle2}
+                    label="Verify"
+                    onClick={withClose(handlers.onManualVerify)}
+                    variant="success"
+                  />
+                ) : handlers.onResume ? (
+                  <MenuItem
+                    icon={RotateCcw}
+                    label="Resume"
+                    onClick={withClose(handlers.onResume)}
+                    variant="success"
+                  />
+                ) : null}
+                <DropdownMenuSeparator />
+                <MenuItem icon={Edit} label="Edit" onClick={withClose(handlers.onEdit)} />
+                {handlers.onSpawnTask && (
+                  <MenuItem
+                    icon={GitFork}
+                    label="Spawn Sub-Task"
+                    onClick={withClose(handlers.onSpawnTask)}
+                  />
+                )}
+                {handlers.onDuplicate && (
+                  <DropdownMenuSub>
+                    <div className="flex items-center">
+                      <DropdownMenuItem
+                        onClick={withClose(handlers.onDuplicate)}
+                        className="flex-1 pr-0 rounded-r-none"
+                      >
+                        <Copy className="w-4 h-4 mr-2" />
+                        Duplicate
+                      </DropdownMenuItem>
+                      {handlers.onDuplicateAsChild && (
+                        <DropdownMenuSubTrigger className="px-1 rounded-l-none border-l border-border/30 h-8" />
+                      )}
+                    </div>
+                    {handlers.onDuplicateAsChild && (
+                      <DropdownMenuSubContent>
+                        <MenuItem
+                          icon={GitFork}
+                          label="Duplicate as Child"
+                          onClick={withClose(handlers.onDuplicateAsChild)}
+                        />
+                        {handlers.onDuplicateAsChildMultiple && (
+                          <MenuItem
+                            icon={Repeat}
+                            label="Duplicate as Child ×N"
+                            onClick={withClose(handlers.onDuplicateAsChildMultiple)}
+                          />
+                        )}
+                      </DropdownMenuSubContent>
+                    )}
+                  </DropdownMenuSub>
+                )}
+                <MenuItem
+                  icon={Trash2}
+                  label="Delete"
+                  onClick={withClose(handlers.onDelete)}
+                  variant="destructive"
+                />
+              </>
+            )}
+
+          {/* Waiting Approval actions */}
+          {!isCurrentAutoTask && feature.status === 'waiting_approval' && (
+            <>
+              {handlers.onViewOutput && (
+                <MenuItem
+                  icon={FileText}
+                  label="View Logs"
+                  onClick={withClose(handlers.onViewOutput)}
+                />
+              )}
+              {handlers.onFollowUp && (
+                <MenuItem icon={Wand2} label="Refine" onClick={withClose(handlers.onFollowUp)} />
+              )}
+              {feature.prUrl && (
+                <MenuItem
+                  icon={ExternalLink}
+                  label="View PR"
+                  onClick={withClose(() => window.open(feature.prUrl, '_blank'))}
+                />
+              )}
+              {handlers.onManualVerify && (
+                <MenuItem
+                  icon={CheckCircle2}
+                  label={feature.prUrl ? 'Verify' : 'Mark as Verified'}
+                  onClick={withClose(handlers.onManualVerify)}
+                  variant="success"
+                />
+              )}
+              <DropdownMenuSeparator />
+              <MenuItem icon={Edit} label="Edit" onClick={withClose(handlers.onEdit)} />
+              {handlers.onSpawnTask && (
+                <MenuItem
+                  icon={GitFork}
+                  label="Spawn Sub-Task"
+                  onClick={withClose(handlers.onSpawnTask)}
+                />
+              )}
+              {handlers.onDuplicate && (
+                <DropdownMenuSub>
+                  <div className="flex items-center">
+                    <DropdownMenuItem
+                      onClick={withClose(handlers.onDuplicate)}
+                      className="flex-1 pr-0 rounded-r-none"
+                    >
+                      <Copy className="w-4 h-4 mr-2" />
+                      Duplicate
+                    </DropdownMenuItem>
+                    {handlers.onDuplicateAsChild && (
+                      <DropdownMenuSubTrigger className="px-1 rounded-l-none border-l border-border/30 h-8" />
+                    )}
+                  </div>
+                  {handlers.onDuplicateAsChild && (
+                    <DropdownMenuSubContent>
+                      <MenuItem
+                        icon={GitFork}
+                        label="Duplicate as Child"
+                        onClick={withClose(handlers.onDuplicateAsChild)}
+                      />
+                      {handlers.onDuplicateAsChildMultiple && (
+                        <MenuItem
+                          icon={Repeat}
+                          label="Duplicate as Child ×N"
+                          onClick={withClose(handlers.onDuplicateAsChildMultiple)}
+                        />
+                      )}
+                    </DropdownMenuSubContent>
+                  )}
+                </DropdownMenuSub>
+              )}
+              <MenuItem
+                icon={Trash2}
+                label="Delete"
+                onClick={withClose(handlers.onDelete)}
+                variant="destructive"
+              />
+            </>
+          )}
+
+          {/* Verified actions */}
+          {!isCurrentAutoTask && feature.status === 'verified' && (
+            <>
+              {handlers.onViewOutput && (
+                <MenuItem
+                  icon={FileText}
+                  label="View Logs"
+                  onClick={withClose(handlers.onViewOutput)}
+                />
+              )}
+              {feature.prUrl && (
+                <MenuItem
+                  icon={ExternalLink}
+                  label="View PR"
+                  onClick={withClose(() => window.open(feature.prUrl, '_blank'))}
+                />
+              )}
+              {feature.worktree && (
+                <MenuItem
+                  icon={GitBranch}
+                  label="View Branch"
+                  onClick={withClose(() => {})}
+                  disabled
+                />
+              )}
+              {handlers.onComplete && (
+                <MenuItem
+                  icon={Archive}
+                  label="Complete"
+                  onClick={withClose(handlers.onComplete)}
+                  variant="primary"
+                />
+              )}
+              <DropdownMenuSeparator />
+              <MenuItem icon={Edit} label="Edit" onClick={withClose(handlers.onEdit)} />
+              {handlers.onSpawnTask && (
+                <MenuItem
+                  icon={GitFork}
+                  label="Spawn Sub-Task"
+                  onClick={withClose(handlers.onSpawnTask)}
+                />
+              )}
+              {handlers.onDuplicate && (
+                <DropdownMenuSub>
+                  <div className="flex items-center">
+                    <DropdownMenuItem
+                      onClick={withClose(handlers.onDuplicate)}
+                      className="flex-1 pr-0 rounded-r-none"
+                    >
+                      <Copy className="w-4 h-4 mr-2" />
+                      Duplicate
+                    </DropdownMenuItem>
+                    {handlers.onDuplicateAsChild && (
+                      <DropdownMenuSubTrigger className="px-1 rounded-l-none border-l border-border/30 h-8" />
+                    )}
+                  </div>
+                  {handlers.onDuplicateAsChild && (
+                    <DropdownMenuSubContent>
+                      <MenuItem
+                        icon={GitFork}
+                        label="Duplicate as Child"
+                        onClick={withClose(handlers.onDuplicateAsChild)}
+                      />
+                      {handlers.onDuplicateAsChildMultiple && (
+                        <MenuItem
+                          icon={Repeat}
+                          label="Duplicate as Child ×N"
+                          onClick={withClose(handlers.onDuplicateAsChildMultiple)}
+                        />
+                      )}
+                    </DropdownMenuSubContent>
+                  )}
+                </DropdownMenuSub>
+              )}
+              <MenuItem
+                icon={Trash2}
+                label="Delete"
+                onClick={withClose(handlers.onDelete)}
+                variant="destructive"
+              />
+            </>
+          )}
+
+          {/* Pipeline status actions (generic fallback) */}
+          {!isCurrentAutoTask && feature.status.startsWith('pipeline_') && (
+            <>
+              {handlers.onViewOutput && (
+                <MenuItem
+                  icon={FileText}
+                  label="View Logs"
+                  onClick={withClose(handlers.onViewOutput)}
+                />
+              )}
+              <MenuItem icon={Edit} label="Edit" onClick={withClose(handlers.onEdit)} />
+              {handlers.onSpawnTask && (
+                <MenuItem
+                  icon={GitFork}
+                  label="Spawn Sub-Task"
+                  onClick={withClose(handlers.onSpawnTask)}
+                />
+              )}
+              {handlers.onDuplicate && (
+                <DropdownMenuSub>
+                  <div className="flex items-center">
+                    <DropdownMenuItem
+                      onClick={withClose(handlers.onDuplicate)}
+                      className="flex-1 pr-0 rounded-r-none"
+                    >
+                      <Copy className="w-4 h-4 mr-2" />
+                      Duplicate
+                    </DropdownMenuItem>
+                    {handlers.onDuplicateAsChild && (
+                      <DropdownMenuSubTrigger className="px-1 rounded-l-none border-l border-border/30 h-8" />
+                    )}
+                  </div>
+                  {handlers.onDuplicateAsChild && (
+                    <DropdownMenuSubContent>
+                      <MenuItem
+                        icon={GitFork}
+                        label="Duplicate as Child"
+                        onClick={withClose(handlers.onDuplicateAsChild)}
+                      />
+                      {handlers.onDuplicateAsChildMultiple && (
+                        <MenuItem
+                          icon={Repeat}
+                          label="Duplicate as Child ×N"
+                          onClick={withClose(handlers.onDuplicateAsChildMultiple)}
+                        />
+                      )}
+                    </DropdownMenuSubContent>
+                  )}
+                </DropdownMenuSub>
+              )}
+              <DropdownMenuSeparator />
+              <MenuItem
+                icon={Trash2}
+                label="Delete"
+                onClick={withClose(handlers.onDelete)}
+                variant="destructive"
+              />
+            </>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+});
+
+/**
+ * Helper function to create action handlers from common patterns
+ */
+export function createRowActionHandlers(
+  featureId: string,
+  actions: {
+    editFeature?: (id: string) => void;
+    deleteFeature?: (id: string) => void;
+    viewOutput?: (id: string) => void;
+    verifyFeature?: (id: string) => void;
+    resumeFeature?: (id: string) => void;
+    forceStop?: (id: string) => void;
+    manualVerify?: (id: string) => void;
+    followUp?: (id: string) => void;
+    implement?: (id: string) => void;
+    complete?: (id: string) => void;
+    viewPlan?: (id: string) => void;
+    approvePlan?: (id: string) => void;
+    spawnTask?: (id: string) => void;
+    duplicate?: (id: string) => void;
+    duplicateAsChild?: (id: string) => void;
+    duplicateAsChildMultiple?: (id: string) => void;
+  }
+): RowActionHandlers {
+  return {
+    onEdit: () => actions.editFeature?.(featureId),
+    onDelete: () => actions.deleteFeature?.(featureId),
+    onViewOutput: actions.viewOutput ? () => actions.viewOutput!(featureId) : undefined,
+    onVerify: actions.verifyFeature ? () => actions.verifyFeature!(featureId) : undefined,
+    onResume: actions.resumeFeature ? () => actions.resumeFeature!(featureId) : undefined,
+    onForceStop: actions.forceStop ? () => actions.forceStop!(featureId) : undefined,
+    onManualVerify: actions.manualVerify ? () => actions.manualVerify!(featureId) : undefined,
+    onFollowUp: actions.followUp ? () => actions.followUp!(featureId) : undefined,
+    onImplement: actions.implement ? () => actions.implement!(featureId) : undefined,
+    onComplete: actions.complete ? () => actions.complete!(featureId) : undefined,
+    onViewPlan: actions.viewPlan ? () => actions.viewPlan!(featureId) : undefined,
+    onApprovePlan: actions.approvePlan ? () => actions.approvePlan!(featureId) : undefined,
+    onSpawnTask: actions.spawnTask ? () => actions.spawnTask!(featureId) : undefined,
+    onDuplicate: actions.duplicate ? () => actions.duplicate!(featureId) : undefined,
+    onDuplicateAsChild: actions.duplicateAsChild
+      ? () => actions.duplicateAsChild!(featureId)
+      : undefined,
+    onDuplicateAsChildMultiple: actions.duplicateAsChildMultiple
+      ? () => actions.duplicateAsChildMultiple!(featureId)
+      : undefined,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/list-view/status-badge.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/list-view/status-badge.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6732aa3662cdb7149d8ad32b609949b5c0bbfb40
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/list-view/status-badge.tsx
@@ -0,0 +1,225 @@
+import { memo, useMemo } from 'react';
+import { cn } from '@/lib/utils';
+import { COLUMNS, isPipelineStatus } from '../../constants';
+import type { FeatureStatusWithPipeline, PipelineConfig } from '@automaker/types';
+
+/**
+ * Status display configuration
+ */
+interface StatusDisplay {
+  label: string;
+  colorClass: string;
+  bgClass: string;
+  borderClass: string;
+}
+
+/**
+ * Base status display configurations using CSS variables
+ */
+const BASE_STATUS_DISPLAY: Record<string, StatusDisplay> = {
+  backlog: {
+    label: 'Backlog',
+    colorClass: 'text-[var(--status-backlog)]',
+    bgClass: 'bg-[var(--status-backlog)]/15',
+    borderClass: 'border-[var(--status-backlog)]/30',
+  },
+  merge_conflict: {
+    label: 'Merge Conflict',
+    colorClass: 'text-[var(--status-warning)]',
+    bgClass: 'bg-[var(--status-warning)]/15',
+    borderClass: 'border-[var(--status-warning)]/30',
+  },
+  in_progress: {
+    label: 'In Progress',
+    colorClass: 'text-[var(--status-in-progress)]',
+    bgClass: 'bg-[var(--status-in-progress)]/15',
+    borderClass: 'border-[var(--status-in-progress)]/30',
+  },
+  waiting_approval: {
+    label: 'Waiting Approval',
+    colorClass: 'text-[var(--status-waiting)]',
+    bgClass: 'bg-[var(--status-waiting)]/15',
+    borderClass: 'border-[var(--status-waiting)]/30',
+  },
+  verified: {
+    label: 'Verified',
+    colorClass: 'text-[var(--status-success)]',
+    bgClass: 'bg-[var(--status-success)]/15',
+    borderClass: 'border-[var(--status-success)]/30',
+  },
+};
+
+/**
+ * Get display configuration for a pipeline status
+ */
+function getPipelineStatusDisplay(
+  status: string,
+  pipelineConfig: PipelineConfig | null
+): StatusDisplay | null {
+  if (!isPipelineStatus(status) || !pipelineConfig?.steps) {
+    return null;
+  }
+
+  const stepId = status.replace('pipeline_', '');
+  const step = pipelineConfig.steps.find((s) => s.id === stepId);
+
+  if (!step) {
+    return null;
+  }
+
+  // Extract the color variable from the colorClass (e.g., "bg-[var(--status-in-progress)]")
+  // and use it for the badge styling
+  const colorVar = step.colorClass?.match(/var\(([^)]+)\)/)?.[1] || '--status-in-progress';
+
+  return {
+    label: step.name || 'Pipeline Step',
+    colorClass: `text-[var(${colorVar})]`,
+    bgClass: `bg-[var(${colorVar})]/15`,
+    borderClass: `border-[var(${colorVar})]/30`,
+  };
+}
+
+/**
+ * Get the display configuration for a status
+ */
+function getStatusDisplay(
+  status: FeatureStatusWithPipeline,
+  pipelineConfig: PipelineConfig | null
+): StatusDisplay {
+  // Check for pipeline status first
+  if (isPipelineStatus(status)) {
+    const pipelineDisplay = getPipelineStatusDisplay(status, pipelineConfig);
+    if (pipelineDisplay) {
+      return pipelineDisplay;
+    }
+    // Fallback for unknown pipeline status
+    return {
+      label: status.replace('pipeline_', '').replace(/_/g, ' '),
+      colorClass: 'text-[var(--status-in-progress)]',
+      bgClass: 'bg-[var(--status-in-progress)]/15',
+      borderClass: 'border-[var(--status-in-progress)]/30',
+    };
+  }
+
+  // Check base status
+  const baseDisplay = BASE_STATUS_DISPLAY[status];
+  if (baseDisplay) {
+    return baseDisplay;
+  }
+
+  // Try to find from COLUMNS constant
+  const column = COLUMNS.find((c) => c.id === status);
+  if (column) {
+    return {
+      label: column.title,
+      colorClass: 'text-muted-foreground',
+      bgClass: 'bg-muted/50',
+      borderClass: 'border-border/50',
+    };
+  }
+
+  // Fallback for unknown status
+  return {
+    label: status.replace(/_/g, ' '),
+    colorClass: 'text-muted-foreground',
+    bgClass: 'bg-muted/50',
+    borderClass: 'border-border/50',
+  };
+}
+
+export interface StatusBadgeProps {
+  /** The status to display */
+  status: FeatureStatusWithPipeline;
+  /** Optional pipeline configuration for custom pipeline steps */
+  pipelineConfig?: PipelineConfig | null;
+  /** Size variant for the badge */
+  size?: 'sm' | 'default' | 'lg';
+  /** Additional className for custom styling */
+  className?: string;
+}
+
+/**
+ * StatusBadge displays a feature status as a colored chip/badge for use in the list view table.
+ *
+ * Features:
+ * - Displays status with appropriate color based on status type
+ * - Supports base statuses (backlog, in_progress, waiting_approval, verified)
+ * - Supports pipeline statuses with custom colors from pipeline configuration
+ * - Size variants (sm, default, lg)
+ * - Uses CSS variables for consistent theming
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <StatusBadge status="backlog" />
+ *
+ * // With pipeline configuration
+ * <StatusBadge status="pipeline_review" pipelineConfig={pipelineConfig} />
+ *
+ * // Small size
+ * <StatusBadge status="verified" size="sm" />
+ * ```
+ */
+export const StatusBadge = memo(function StatusBadge({
+  status,
+  pipelineConfig = null,
+  size = 'default',
+  className,
+}: StatusBadgeProps) {
+  const display = useMemo(() => getStatusDisplay(status, pipelineConfig), [status, pipelineConfig]);
+
+  const sizeClasses = {
+    sm: 'px-1.5 py-0.5 text-[10px]',
+    default: 'px-2 py-0.5 text-xs',
+    lg: 'px-2.5 py-1 text-sm',
+  };
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-full border font-medium whitespace-nowrap',
+        'transition-colors duration-200',
+        sizeClasses[size],
+        display.colorClass,
+        display.bgClass,
+        display.borderClass,
+        className
+      )}
+      data-testid={`status-badge-${status}`}
+    >
+      {display.label}
+    </span>
+  );
+});
+
+/**
+ * Helper function to get the status label without rendering the badge
+ * Useful for sorting or filtering operations
+ */
+export function getStatusLabel(
+  status: FeatureStatusWithPipeline,
+  pipelineConfig: PipelineConfig | null = null
+): string {
+  return getStatusDisplay(status, pipelineConfig).label;
+}
+
+/**
+ * Helper function to get the status order for sorting
+ * Returns a numeric value representing the status position in the workflow
+ */
+export function getStatusOrder(status: FeatureStatusWithPipeline): number {
+  const baseOrder: Record<string, number> = {
+    backlog: 0,
+    merge_conflict: 0,
+    in_progress: 1,
+    waiting_approval: 2,
+    verified: 3,
+  };
+
+  if (isPipelineStatus(status)) {
+    // Pipeline statuses come after in_progress but before waiting_approval
+    return 1.5;
+  }
+
+  return baseOrder[status] ?? 0;
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/selection-action-bar.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/selection-action-bar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e773488e4e22fdd93b377566e47995961b0bb3aa
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/selection-action-bar.tsx
@@ -0,0 +1,245 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Pencil, X, CheckSquare, Trash2, CheckCircle2, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+export type SelectionActionMode = 'backlog' | 'waiting_approval';
+
+interface SelectionActionBarProps {
+  selectedCount: number;
+  totalCount: number;
+  onEdit?: () => void;
+  onDelete?: () => void;
+  onVerify?: () => Promise<void> | void;
+  onClear: () => void;
+  onSelectAll: () => void;
+  mode?: SelectionActionMode;
+}
+
+export function SelectionActionBar({
+  selectedCount,
+  totalCount,
+  onEdit,
+  onDelete,
+  onVerify,
+  onClear,
+  onSelectAll,
+  mode = 'backlog',
+}: SelectionActionBarProps) {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [showVerifyDialog, setShowVerifyDialog] = useState(false);
+  const [isVerifying, setIsVerifying] = useState(false);
+
+  const allSelected = selectedCount === totalCount && totalCount > 0;
+
+  const handleDeleteClick = () => {
+    setShowDeleteDialog(true);
+  };
+
+  const handleConfirmDelete = () => {
+    setShowDeleteDialog(false);
+    onDelete?.();
+  };
+
+  const handleVerifyClick = () => {
+    if (!onVerify) return;
+    setShowVerifyDialog(true);
+  };
+
+  const handleConfirmVerify = async () => {
+    if (!onVerify) {
+      setShowVerifyDialog(false);
+      return;
+    }
+    setIsVerifying(true);
+    try {
+      await onVerify();
+    } finally {
+      setIsVerifying(false);
+      setShowVerifyDialog(false);
+    }
+  };
+
+  return (
+    <>
+      <div
+        className={cn(
+          'fixed bottom-6 left-1/2 -translate-x-1/2 z-50',
+          'flex items-center gap-3 px-4 py-3 rounded-xl',
+          'bg-background/95 backdrop-blur-sm border border-border shadow-lg',
+          'animate-in slide-in-from-bottom-4 fade-in duration-200'
+        )}
+        data-testid="selection-action-bar"
+      >
+        <span className="text-sm font-medium text-foreground">
+          {selectedCount === 0
+            ? mode === 'waiting_approval'
+              ? 'Select features to verify'
+              : 'Select features to edit'
+            : `${selectedCount} feature${selectedCount !== 1 ? 's' : ''} selected`}
+        </span>
+
+        <div className="h-4 w-px bg-border" />
+
+        <div className="flex items-center gap-2">
+          {mode === 'backlog' && (
+            <>
+              <Button
+                variant="default"
+                size="sm"
+                onClick={onEdit}
+                disabled={selectedCount === 0}
+                className="h-8 bg-brand-500 hover:bg-brand-600 disabled:opacity-50"
+                data-testid="selection-edit-button"
+              >
+                <Pencil className="w-4 h-4 mr-1.5" />
+                Edit Selected
+              </Button>
+
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleDeleteClick}
+                disabled={selectedCount === 0}
+                className="h-8 text-destructive hover:text-destructive hover:bg-destructive/10 disabled:opacity-50"
+                data-testid="selection-delete-button"
+              >
+                <Trash2 className="w-4 h-4 mr-1.5" />
+                Delete
+              </Button>
+            </>
+          )}
+
+          {mode === 'waiting_approval' && (
+            <Button
+              variant="default"
+              size="sm"
+              onClick={handleVerifyClick}
+              disabled={selectedCount === 0 || !onVerify}
+              className="h-8 bg-green-600 hover:bg-green-700 disabled:opacity-50"
+              data-testid="selection-verify-button"
+            >
+              <CheckCircle2 className="w-4 h-4 mr-1.5" />
+              Verify Selected
+            </Button>
+          )}
+
+          {!allSelected && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onSelectAll}
+              className="h-8"
+              data-testid="selection-select-all-button"
+            >
+              <CheckSquare className="w-4 h-4 mr-1.5" />
+              Select All ({totalCount})
+            </Button>
+          )}
+
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClear}
+            className="h-8 text-muted-foreground hover:text-foreground"
+            data-testid="selection-clear-button"
+          >
+            <X className="w-4 h-4 mr-1.5" />
+            Clear
+          </Button>
+        </div>
+      </div>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <DialogContent data-testid="bulk-delete-confirmation-dialog">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-destructive">
+              <Trash2 className="w-5 h-5" />
+              Delete Selected Features?
+            </DialogTitle>
+            <DialogDescription>
+              Are you sure you want to permanently delete {selectedCount} feature
+              {selectedCount !== 1 ? 's' : ''}?
+              <span className="block mt-2 text-destructive font-medium">
+                This action cannot be undone.
+              </span>
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setShowDeleteDialog(false)}
+              data-testid="cancel-bulk-delete-button"
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleConfirmDelete}
+              data-testid="confirm-bulk-delete-button"
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Verify Confirmation Dialog */}
+      <Dialog
+        open={showVerifyDialog}
+        onOpenChange={(open) => {
+          if (!isVerifying) setShowVerifyDialog(open);
+        }}
+      >
+        <DialogContent data-testid="bulk-verify-confirmation-dialog">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-green-600">
+              <CheckCircle2 className="w-5 h-5" />
+              Verify Selected Features?
+            </DialogTitle>
+            <DialogDescription>
+              Are you sure you want to mark {selectedCount} feature
+              {selectedCount !== 1 ? 's' : ''} as verified?
+              <span className="block mt-2 text-muted-foreground">
+                This will move them to the Verified column.
+              </span>
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => setShowVerifyDialog(false)}
+              disabled={isVerifying}
+              data-testid="cancel-bulk-verify-button"
+            >
+              Cancel
+            </Button>
+            <Button
+              className="bg-green-600 hover:bg-green-700"
+              onClick={handleConfirmVerify}
+              disabled={isVerifying || !onVerify}
+              data-testid="confirm-bulk-verify-button"
+            >
+              {isVerifying ? (
+                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+              ) : (
+                <CheckCircle2 className="w-4 h-4 mr-2" />
+              )}
+              {isVerifying ? 'Verifying...' : 'Verify'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/components/view-toggle.tsx b/temp_repo/apps/ui/src/components/views/board-view/components/view-toggle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3b6a938b0ba64e1c5f2d1e4082f85b4cbbfa1dda
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/components/view-toggle.tsx
@@ -0,0 +1,62 @@
+import { LayoutGrid, List } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export type ViewMode = 'kanban' | 'list';
+
+interface ViewToggleProps {
+  viewMode: ViewMode;
+  onViewModeChange: (mode: ViewMode) => void;
+  className?: string;
+}
+
+/**
+ * A segmented control component for switching between kanban (grid) and list views.
+ * Uses icons to represent each view mode with clear visual feedback.
+ */
+export function ViewToggle({ viewMode, onViewModeChange, className }: ViewToggleProps) {
+  return (
+    <div
+      className={cn(
+        'inline-flex h-8 items-center rounded-md bg-muted p-[3px] border border-border',
+        className
+      )}
+      role="tablist"
+      aria-label="View mode"
+    >
+      <button
+        role="tab"
+        aria-selected={viewMode === 'kanban'}
+        aria-label="Kanban view"
+        onClick={() => onViewModeChange('kanban')}
+        className={cn(
+          'inline-flex h-[calc(100%-1px)] items-center justify-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium transition-all duration-200 cursor-pointer',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          viewMode === 'kanban'
+            ? 'bg-primary text-primary-foreground shadow-md'
+            : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+        )}
+        data-testid="view-toggle-kanban"
+      >
+        <LayoutGrid className="w-4 h-4" />
+        <span className="sr-only">Kanban</span>
+      </button>
+      <button
+        role="tab"
+        aria-selected={viewMode === 'list'}
+        aria-label="List view"
+        onClick={() => onViewModeChange('list')}
+        className={cn(
+          'inline-flex h-[calc(100%-1px)] items-center justify-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium transition-all duration-200 cursor-pointer',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          viewMode === 'list'
+            ? 'bg-primary text-primary-foreground shadow-md'
+            : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+        )}
+        data-testid="view-toggle-list"
+      >
+        <List className="w-4 h-4" />
+        <span className="sr-only">List</span>
+      </button>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/constants.ts b/temp_repo/apps/ui/src/components/views/board-view/constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8ec071d85e2f50e2d94b5640e9e301b86dc37766
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/constants.ts
@@ -0,0 +1,174 @@
+import type { Feature } from '@/store/app-store';
+import type { PipelineConfig, FeatureStatusWithPipeline } from '@automaker/types';
+
+export type ColumnId = Feature['status'];
+
+/**
+ * Empty state configuration for each column type
+ */
+export interface EmptyStateConfig {
+  title: string;
+  description: string;
+  icon: 'lightbulb' | 'play' | 'clock' | 'check' | 'sparkles';
+  shortcutKey?: string; // Keyboard shortcut label (e.g., 'N', 'A')
+  shortcutHint?: string; // Human-readable shortcut hint
+  primaryAction?: {
+    label: string;
+    actionType: 'ai-suggest' | 'none';
+  };
+}
+
+/**
+ * Default empty state configurations per column type
+ */
+export const EMPTY_STATE_CONFIGS: Record<string, EmptyStateConfig> = {
+  backlog: {
+    title: 'Ready for Ideas',
+    description:
+      'Add your first feature idea to get started using the button below, or let AI help generate ideas.',
+    icon: 'lightbulb',
+    shortcutHint: 'Press',
+    primaryAction: {
+      label: 'Use AI Suggestions',
+      actionType: 'none',
+    },
+  },
+  in_progress: {
+    title: 'Nothing in Progress',
+    description: 'Drag a feature from the backlog here or click implement to start working on it.',
+    icon: 'play',
+  },
+  waiting_approval: {
+    title: 'No Items Awaiting Approval',
+    description: 'Features will appear here after implementation is complete and need your review.',
+    icon: 'clock',
+  },
+  verified: {
+    title: 'No Verified Features',
+    description: 'Approved features will appear here. They can then be completed and archived.',
+    icon: 'check',
+  },
+  // Pipeline step default configuration
+  pipeline_default: {
+    title: 'Pipeline Step Empty',
+    description: 'Features will flow through this step during the automated pipeline process.',
+    icon: 'sparkles',
+  },
+};
+
+/**
+ * Get empty state config for a column, with fallback for pipeline columns
+ */
+export function getEmptyStateConfig(columnId: string): EmptyStateConfig {
+  if (columnId.startsWith('pipeline_')) {
+    return EMPTY_STATE_CONFIGS.pipeline_default;
+  }
+  return EMPTY_STATE_CONFIGS[columnId] || EMPTY_STATE_CONFIGS.default;
+}
+
+export interface Column {
+  id: FeatureStatusWithPipeline;
+  title: string;
+  colorClass: string;
+  isPipelineStep?: boolean;
+  pipelineStepId?: string;
+}
+
+// Base columns (start)
+const BASE_COLUMNS: Column[] = [
+  { id: 'backlog', title: 'Backlog', colorClass: 'bg-[var(--status-backlog)]' },
+  {
+    id: 'in_progress',
+    title: 'In Progress',
+    colorClass: 'bg-[var(--status-in-progress)]',
+  },
+];
+
+// End columns (after pipeline)
+const END_COLUMNS: Column[] = [
+  {
+    id: 'waiting_approval',
+    title: 'Waiting Approval',
+    colorClass: 'bg-[var(--status-waiting)]',
+  },
+  {
+    id: 'verified',
+    title: 'Verified',
+    colorClass: 'bg-[var(--status-success)]',
+  },
+];
+
+// Static COLUMNS for backwards compatibility (no pipeline)
+export const COLUMNS: Column[] = [...BASE_COLUMNS, ...END_COLUMNS];
+
+/**
+ * Generate columns including pipeline steps
+ */
+export function getColumnsWithPipeline(pipelineConfig: PipelineConfig | null): Column[] {
+  const pipelineSteps = pipelineConfig?.steps || [];
+
+  if (pipelineSteps.length === 0) {
+    return COLUMNS;
+  }
+
+  // Sort steps by order
+  const sortedSteps = [...pipelineSteps].sort((a, b) => a.order - b.order);
+
+  // Convert pipeline steps to columns (filter out invalid steps)
+  const pipelineColumns: Column[] = sortedSteps
+    .filter((step) => step && step.id) // Only include valid steps with an id
+    .map((step) => ({
+      id: `pipeline_${step.id}` as FeatureStatusWithPipeline,
+      title: step.name || 'Pipeline Step',
+      colorClass: step.colorClass || 'bg-[var(--status-in-progress)]',
+      isPipelineStep: true,
+      pipelineStepId: step.id,
+    }));
+
+  return [...BASE_COLUMNS, ...pipelineColumns, ...END_COLUMNS];
+}
+
+/**
+ * Get the index where pipeline columns should be inserted
+ * (after in_progress, before waiting_approval)
+ */
+export function getPipelineInsertIndex(): number {
+  return BASE_COLUMNS.length;
+}
+
+/**
+ * Statuses that display in the backlog column because they don't have dedicated columns:
+ * - 'backlog': Default state for new features
+ * - 'ready': Feature has an approved plan, waiting for execution
+ * - 'interrupted': Feature execution was aborted (user stopped it, server restart)
+ * - 'merge_conflict': Automatic merge failed, user must resolve conflicts
+ *
+ * Used to determine row click behavior and menu actions when a feature is running
+ * but its status hasn't updated yet (race condition during WebSocket/cache sync).
+ * See use-board-column-features.ts for the column assignment logic.
+ */
+export function isBacklogLikeStatus(status: string): boolean {
+  return (
+    status === 'backlog' ||
+    status === 'ready' ||
+    status === 'interrupted' ||
+    status === 'merge_conflict'
+  );
+}
+
+/**
+ * Check if a status is a pipeline status
+ */
+export function isPipelineStatus(status: string): boolean {
+  return status.startsWith('pipeline_');
+}
+
+/**
+ * Extract step ID from a pipeline status
+ */
+export function getStepIdFromStatus(status: string): string | null {
+  if (!isPipelineStatus(status)) {
+    return null;
+  }
+  return status.replace('pipeline_', '');
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/add-edit-pipeline-step-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/add-edit-pipeline-step-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c2eec445dfe2d8857156b5ed8862f8d21e56c5b8
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/add-edit-pipeline-step-dialog.tsx
@@ -0,0 +1,254 @@
+import { useState, useRef, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Upload } from 'lucide-react';
+import { toast } from 'sonner';
+import type { PipelineStep } from '@automaker/types';
+import { cn } from '@/lib/utils';
+import { STEP_TEMPLATES } from './pipeline-step-templates';
+
+// Color options for pipeline columns
+const COLOR_OPTIONS = [
+  { value: 'bg-blue-500/20', label: 'Blue', preview: 'bg-blue-500' },
+  { value: 'bg-purple-500/20', label: 'Purple', preview: 'bg-purple-500' },
+  { value: 'bg-green-500/20', label: 'Green', preview: 'bg-green-500' },
+  { value: 'bg-orange-500/20', label: 'Orange', preview: 'bg-orange-500' },
+  { value: 'bg-red-500/20', label: 'Red', preview: 'bg-red-500' },
+  { value: 'bg-pink-500/20', label: 'Pink', preview: 'bg-pink-500' },
+  { value: 'bg-cyan-500/20', label: 'Cyan', preview: 'bg-cyan-500' },
+  { value: 'bg-amber-500/20', label: 'Amber', preview: 'bg-amber-500' },
+  { value: 'bg-indigo-500/20', label: 'Indigo', preview: 'bg-indigo-500' },
+];
+
+interface AddEditPipelineStepDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (step: Omit<PipelineStep, 'id' | 'createdAt' | 'updatedAt'> & { id?: string }) => void;
+  existingStep?: PipelineStep | null;
+  defaultOrder: number;
+}
+
+export function AddEditPipelineStepDialog({
+  open,
+  onClose,
+  onSave,
+  existingStep,
+  defaultOrder,
+}: AddEditPipelineStepDialogProps) {
+  const isEditing = !!existingStep;
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [name, setName] = useState('');
+  const [instructions, setInstructions] = useState('');
+  const [colorClass, setColorClass] = useState(COLOR_OPTIONS[0].value);
+  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null);
+
+  // Reset form when dialog opens/closes or existingStep changes
+  useEffect(() => {
+    if (open) {
+      if (existingStep) {
+        setName(existingStep.name);
+        setInstructions(existingStep.instructions);
+        setColorClass(existingStep.colorClass);
+        setSelectedTemplate(null);
+      } else {
+        setName('');
+        setInstructions('');
+        setColorClass(COLOR_OPTIONS[defaultOrder % COLOR_OPTIONS.length].value);
+        setSelectedTemplate(null);
+      }
+    }
+  }, [open, existingStep, defaultOrder]);
+
+  const handleTemplateClick = (templateId: string) => {
+    const template = STEP_TEMPLATES.find((t) => t.id === templateId);
+    if (template) {
+      setName(template.name);
+      setInstructions(template.instructions);
+      setColorClass(template.colorClass);
+      setSelectedTemplate(templateId);
+      toast.success(`Loaded "${template.name}" template`);
+    }
+  };
+
+  const handleFileUpload = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    try {
+      const content = await file.text();
+      setInstructions(content);
+      toast.success('Instructions loaded from file');
+    } catch {
+      toast.error('Failed to load file');
+    }
+
+    // Reset the input so the same file can be selected again
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleSave = () => {
+    if (!name.trim()) {
+      toast.error('Step name is required');
+      return;
+    }
+
+    if (!instructions.trim()) {
+      toast.error('Step instructions are required');
+      return;
+    }
+
+    onSave({
+      id: existingStep?.id,
+      name: name.trim(),
+      instructions: instructions.trim(),
+      colorClass,
+      order: existingStep?.order ?? defaultOrder,
+    });
+
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
+        {/* Hidden file input for loading instructions from .md files */}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".md,.txt"
+          className="hidden"
+          onChange={handleFileInputChange}
+        />
+
+        <DialogHeader>
+          <DialogTitle>{isEditing ? 'Edit Pipeline Step' : 'Add Pipeline Step'}</DialogTitle>
+          <DialogDescription>
+            {isEditing
+              ? 'Modify the step configuration below.'
+              : 'Configure a new step for your pipeline. Choose a template to get started quickly, or create from scratch.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto py-4 space-y-6">
+          {/* Template Quick Start - Only show for new steps */}
+          {!isEditing && (
+            <div className="space-y-3">
+              <Label className="text-sm font-medium">Quick Start from Template</Label>
+              <div className="flex flex-wrap gap-2">
+                {STEP_TEMPLATES.map((template) => (
+                  <button
+                    key={template.id}
+                    type="button"
+                    onClick={() => handleTemplateClick(template.id)}
+                    className={cn(
+                      'flex items-center gap-2 px-3 py-2 rounded-lg border transition-all text-sm',
+                      selectedTemplate === template.id
+                        ? 'border-primary bg-primary/10 ring-1 ring-primary'
+                        : 'border-border hover:border-primary/50 hover:bg-muted/50'
+                    )}
+                  >
+                    <div
+                      className={cn('w-2 h-2 rounded-full', template.colorClass.replace('/20', ''))}
+                    />
+                    {template.name}
+                  </button>
+                ))}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Click a template to pre-fill the form, then customize as needed.
+              </p>
+            </div>
+          )}
+
+          {/* Divider */}
+          {!isEditing && <div className="border-t" />}
+
+          {/* Step Name */}
+          <div className="space-y-2">
+            <Label htmlFor="step-name">
+              Step Name <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="step-name"
+              placeholder="e.g., Code Review, Testing, Documentation"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              autoFocus={isEditing}
+            />
+          </div>
+
+          {/* Color Selection */}
+          <div className="space-y-2">
+            <Label>Column Color</Label>
+            <div className="flex flex-wrap gap-2">
+              {COLOR_OPTIONS.map((color) => (
+                <button
+                  key={color.value}
+                  type="button"
+                  className={cn(
+                    'w-8 h-8 rounded-full transition-all',
+                    color.preview,
+                    colorClass === color.value
+                      ? 'ring-2 ring-offset-2 ring-primary'
+                      : 'opacity-60 hover:opacity-100'
+                  )}
+                  onClick={() => setColorClass(color.value)}
+                  title={color.label}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* Agent Instructions */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="step-instructions">
+                Agent Instructions <span className="text-destructive">*</span>
+              </Label>
+              <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={handleFileUpload}>
+                <Upload className="h-3 w-3 mr-1" />
+                Load from file
+              </Button>
+            </div>
+            <Textarea
+              id="step-instructions"
+              placeholder="Instructions for the agent to follow during this pipeline step. Use markdown formatting for best results."
+              value={instructions}
+              onChange={(e) => setInstructions(e.target.value)}
+              rows={10}
+              className="font-mono text-sm"
+            />
+            <p className="text-xs text-muted-foreground">
+              These instructions will be sent to the agent when this step runs. Be specific about
+              what you want the agent to review, check, or modify.
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave}>{isEditing ? 'Update Step' : 'Add to Pipeline'}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..92a61f67fb59b56e8939697a75c9c71192c25ff2
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/add-feature-dialog.tsx
@@ -0,0 +1,771 @@
+// @ts-nocheck - feature data building with conditional fields and model type inference
+import { useState, useEffect, useRef } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { HotkeyButton } from '@/components/ui/hotkey-button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { CategoryAutocomplete } from '@/components/ui/category-autocomplete';
+import { DependencySelector } from '@/components/ui/dependency-selector';
+import {
+  DescriptionImageDropZone,
+  FeatureImagePath as DescriptionImagePath,
+  FeatureTextFilePath as DescriptionTextFilePath,
+  ImagePreviewMap,
+} from '@/components/ui/description-image-dropzone';
+import { Play, Cpu, FolderKanban, Settings2 } from 'lucide-react';
+import { useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import { cn, normalizeModelEntry } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import type { ThinkingLevel, PlanningMode, Feature, FeatureImage } from '@/store/types';
+import type { ReasoningEffort, PhaseModelEntry, AgentModel } from '@automaker/types';
+import { normalizeThinkingLevelForModel, getThinkingLevelsForModel } from '@automaker/types';
+import {
+  PrioritySelector,
+  WorkModeSelector,
+  PlanningModeSelect,
+  AncestorContextSection,
+  EnhanceWithAI,
+  EnhancementHistoryButton,
+  PipelineExclusionControls,
+  type BaseHistoryEntry,
+} from '../shared';
+import type { WorkMode } from '../shared';
+import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import {
+  getAncestors,
+  formatAncestorContextForPrompt,
+  type AncestorContext,
+} from '@automaker/dependency-resolver';
+
+/**
+ * Determines the default work mode based on global settings and current worktree selection.
+ *
+ * Priority:
+ * 1. If forceCurrentBranchMode is true, always defaults to 'current' (work on current branch)
+ * 2. If a non-main worktree is selected in the board header, defaults to 'custom' (use that branch)
+ * 3. If useWorktrees global setting is enabled, defaults to 'auto' (automatic worktree creation)
+ * 4. Otherwise, defaults to 'current' (work on current branch without isolation)
+ */
+const getDefaultWorkMode = (
+  useWorktrees: boolean,
+  selectedNonMainWorktreeBranch?: string,
+  forceCurrentBranchMode?: boolean
+): WorkMode => {
+  // If force current branch mode is enabled (worktree setting is off), always use 'current'
+  if (forceCurrentBranchMode) {
+    return 'current';
+  }
+  // If a non-main worktree is selected, default to 'custom' mode with that branch
+  if (selectedNonMainWorktreeBranch) {
+    return 'custom';
+  }
+  // Otherwise, respect the global worktree setting
+  return useWorktrees ? 'auto' : 'current';
+};
+
+type FeatureData = {
+  title: string;
+  category: string;
+  description: string;
+  images: FeatureImage[];
+  imagePaths: DescriptionImagePath[];
+  textFilePaths: DescriptionTextFilePath[];
+  skipTests: boolean;
+  model: AgentModel;
+  thinkingLevel: ThinkingLevel;
+  reasoningEffort: ReasoningEffort;
+  providerId?: string;
+  branchName: string;
+  priority: number;
+  planningMode: PlanningMode;
+  requirePlanApproval: boolean;
+  dependencies?: string[];
+  childDependencies?: string[]; // Feature IDs that should depend on this feature
+  excludedPipelineSteps?: string[]; // Pipeline step IDs to skip for this feature
+  workMode: WorkMode;
+};
+
+interface AddFeatureDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAdd: (feature: FeatureData) => void;
+  onAddAndStart?: (feature: FeatureData) => void;
+  categorySuggestions: string[];
+  branchSuggestions: string[];
+  branchCardCounts?: Record<string, number>;
+  defaultSkipTests: boolean;
+  defaultBranch?: string;
+  currentBranch?: string;
+  isMaximized: boolean;
+  parentFeature?: Feature | null;
+  allFeatures?: Feature[];
+  /**
+   * Path to the current project for loading pipeline config.
+   */
+  projectPath?: string;
+  /**
+   * When a non-main worktree is selected in the board header, this will be set to that worktree's branch.
+   * When set, the dialog will default to 'custom' work mode with this branch pre-filled.
+   */
+  selectedNonMainWorktreeBranch?: string;
+  /**
+   * When true, forces the dialog to default to 'current' work mode (work on current branch).
+   * This is used when the "Default to worktree mode" setting is disabled.
+   */
+  forceCurrentBranchMode?: boolean;
+  /**
+   * Pre-filled title for the feature (e.g., from a GitHub issue).
+   */
+  prefilledTitle?: string;
+  /**
+   * Pre-filled description for the feature (e.g., from a GitHub issue).
+   */
+  prefilledDescription?: string;
+  /**
+   * Pre-filled category for the feature (e.g., 'From GitHub').
+   */
+  prefilledCategory?: string;
+}
+
+/**
+ * A single entry in the description history
+ */
+interface DescriptionHistoryEntry extends BaseHistoryEntry {
+  description: string;
+}
+
+export function AddFeatureDialog({
+  open,
+  onOpenChange,
+  onAdd,
+  onAddAndStart,
+  categorySuggestions,
+  branchSuggestions,
+  branchCardCounts,
+  defaultSkipTests,
+  defaultBranch = 'main',
+  currentBranch,
+  isMaximized,
+  parentFeature = null,
+  allFeatures = [],
+  projectPath,
+  selectedNonMainWorktreeBranch,
+  forceCurrentBranchMode,
+  prefilledTitle,
+  prefilledDescription,
+  prefilledCategory,
+}: AddFeatureDialogProps) {
+  const isSpawnMode = !!parentFeature;
+  const navigate = useNavigate();
+  const [workMode, setWorkMode] = useState<WorkMode>('current');
+
+  // Form state
+  const [title, setTitle] = useState('');
+  const [category, setCategory] = useState('');
+  const [description, setDescription] = useState('');
+  const [images, setImages] = useState<FeatureImage[]>([]);
+  const [imagePaths, setImagePaths] = useState<DescriptionImagePath[]>([]);
+  const [textFilePaths, setTextFilePaths] = useState<DescriptionTextFilePath[]>([]);
+  const [skipTests, setSkipTests] = useState(false);
+  const [branchName, setBranchName] = useState('');
+  const [priority, setPriority] = useState(2);
+
+  // Model selection state
+  const [modelEntry, setModelEntry] = useState<PhaseModelEntry>({ model: 'claude-opus' });
+
+  // Planning mode state
+  const [planningMode, setPlanningMode] = useState<PlanningMode>('skip');
+  const [requirePlanApproval, setRequirePlanApproval] = useState(false);
+
+  // UI state
+  const [previewMap, setPreviewMap] = useState<ImagePreviewMap>(() => new Map());
+  const [descriptionError, setDescriptionError] = useState(false);
+
+  // Description history state
+  const [descriptionHistory, setDescriptionHistory] = useState<DescriptionHistoryEntry[]>([]);
+
+  // Spawn mode state
+  const [ancestors, setAncestors] = useState<AncestorContext[]>([]);
+  const [selectedAncestorIds, setSelectedAncestorIds] = useState<Set<string>>(new Set());
+
+  // Dependency selection state (not in spawn mode)
+  const [parentDependencies, setParentDependencies] = useState<string[]>([]);
+  const [childDependencies, setChildDependencies] = useState<string[]>([]);
+
+  // Pipeline exclusion state
+  const [excludedPipelineSteps, setExcludedPipelineSteps] = useState<string[]>([]);
+
+  // Get defaults from store
+  const {
+    defaultPlanningMode,
+    defaultRequirePlanApproval,
+    useWorktrees,
+    defaultFeatureModel,
+    defaultThinkingLevel,
+    currentProject,
+  } = useAppStore();
+
+  // Use project-level default feature model if set, otherwise fall back to global
+  const effectiveDefaultFeatureModel = currentProject?.defaultFeatureModel ?? defaultFeatureModel;
+
+  // Track previous open state to detect when dialog opens
+  const wasOpenRef = useRef(false);
+
+  // Sync defaults only when dialog opens (transitions from closed to open)
+  useEffect(() => {
+    const justOpened = open && !wasOpenRef.current;
+    wasOpenRef.current = open;
+
+    if (justOpened) {
+      // Initialize with prefilled values if provided, otherwise use defaults
+      setTitle(prefilledTitle ?? '');
+      setDescription(prefilledDescription ?? '');
+      setCategory(prefilledCategory ?? '');
+
+      setSkipTests(defaultSkipTests);
+      // When a non-main worktree is selected, use its branch name for custom mode
+      // Otherwise, use the default branch
+      setBranchName(selectedNonMainWorktreeBranch || defaultBranch || '');
+      setWorkMode(
+        getDefaultWorkMode(useWorktrees, selectedNonMainWorktreeBranch, forceCurrentBranchMode)
+      );
+      setPlanningMode(defaultPlanningMode);
+      setRequirePlanApproval(defaultRequirePlanApproval);
+
+      // Apply defaultThinkingLevel from settings to the model entry.
+      // This ensures the "Quick-Select Defaults" thinking level setting is respected
+      // even when the user doesn't change the model in the dropdown.
+      const modelId =
+        typeof effectiveDefaultFeatureModel.model === 'string'
+          ? effectiveDefaultFeatureModel.model
+          : '';
+      const availableLevels = getThinkingLevelsForModel(modelId);
+      const effectiveThinkingLevel = availableLevels.includes(defaultThinkingLevel)
+        ? defaultThinkingLevel
+        : availableLevels[0];
+      setModelEntry({
+        ...effectiveDefaultFeatureModel,
+        thinkingLevel: effectiveThinkingLevel,
+      });
+
+      // Initialize description history (empty for new feature)
+      setDescriptionHistory([]);
+
+      // Initialize ancestors for spawn mode
+      if (parentFeature) {
+        const ancestorList = getAncestors(parentFeature, allFeatures);
+        setAncestors(ancestorList);
+        setSelectedAncestorIds(new Set([parentFeature.id]));
+      } else {
+        setAncestors([]);
+        setSelectedAncestorIds(new Set());
+      }
+
+      // Reset dependency selections
+      setParentDependencies([]);
+      setChildDependencies([]);
+
+      // Reset pipeline exclusions (all pipelines enabled by default)
+      setExcludedPipelineSteps([]);
+    }
+  }, [
+    open,
+    defaultSkipTests,
+    defaultBranch,
+    defaultPlanningMode,
+    defaultRequirePlanApproval,
+    effectiveDefaultFeatureModel,
+    defaultThinkingLevel,
+    useWorktrees,
+    selectedNonMainWorktreeBranch,
+    forceCurrentBranchMode,
+    parentFeature,
+    allFeatures,
+    prefilledTitle,
+    prefilledDescription,
+    prefilledCategory,
+  ]);
+
+  // Clear requirePlanApproval when planning mode is skip (lite supports approval)
+  useEffect(() => {
+    if (planningMode === 'skip') {
+      setRequirePlanApproval(false);
+    }
+  }, [planningMode]);
+
+  const handleModelChange = (entry: PhaseModelEntry) => {
+    const modelId = typeof entry.model === 'string' ? entry.model : '';
+    const normalizedThinkingLevel = normalizeThinkingLevelForModel(modelId, entry.thinkingLevel);
+
+    setModelEntry({ ...entry, thinkingLevel: normalizedThinkingLevel });
+  };
+
+  const buildFeatureData = (): FeatureData | null => {
+    if (!description.trim()) {
+      setDescriptionError(true);
+      return null;
+    }
+
+    if (workMode === 'custom' && !branchName.trim()) {
+      toast.error('Please select a branch name');
+      return null;
+    }
+
+    const finalCategory = category || 'Uncategorized';
+    const normalizedEntry = normalizeModelEntry(modelEntry);
+
+    // For 'current' mode, use empty string (work on current branch)
+    // For 'auto' mode, use empty string (will be auto-generated in use-board-actions)
+    // For 'custom' mode, use the specified branch name
+    const finalBranchName = workMode === 'custom' ? branchName || '' : '';
+
+    // Build final description with ancestor context in spawn mode
+    let finalDescription = description;
+    if (isSpawnMode && parentFeature && selectedAncestorIds.size > 0) {
+      const parentContext: AncestorContext = {
+        id: parentFeature.id,
+        title: parentFeature.title,
+        description: parentFeature.description,
+        spec: parentFeature.spec,
+        summary: parentFeature.summary,
+        depth: -1,
+      };
+
+      const allAncestorsWithParent = [parentContext, ...ancestors];
+      const contextText = formatAncestorContextForPrompt(
+        allAncestorsWithParent,
+        selectedAncestorIds
+      );
+
+      if (contextText) {
+        finalDescription = `${contextText}\n\n---\n\n## Task Description\n\n${description}`;
+      }
+    }
+
+    // Determine final dependencies
+    // In spawn mode, use parent feature as dependency
+    // Otherwise, use manually selected parent dependencies
+    const finalDependencies =
+      isSpawnMode && parentFeature
+        ? [parentFeature.id]
+        : parentDependencies.length > 0
+          ? parentDependencies
+          : undefined;
+
+    return {
+      title,
+      category: finalCategory,
+      description: finalDescription,
+      images,
+      imagePaths,
+      textFilePaths,
+      skipTests,
+      model: normalizedEntry.model,
+      thinkingLevel: normalizedEntry.thinkingLevel,
+      reasoningEffort: normalizedEntry.reasoningEffort,
+      providerId: normalizedEntry.providerId,
+      branchName: finalBranchName,
+      priority,
+      planningMode,
+      requirePlanApproval,
+      dependencies: finalDependencies,
+      childDependencies: childDependencies.length > 0 ? childDependencies : undefined,
+      excludedPipelineSteps: excludedPipelineSteps.length > 0 ? excludedPipelineSteps : undefined,
+      workMode,
+    };
+  };
+
+  const resetForm = () => {
+    setTitle('');
+    setCategory('');
+    setDescription('');
+    setImages([]);
+    setImagePaths([]);
+    setTextFilePaths([]);
+    setSkipTests(defaultSkipTests);
+    // When a non-main worktree is selected, use its branch name for custom mode
+    setBranchName(selectedNonMainWorktreeBranch || '');
+    setPriority(2);
+    // Apply defaultThinkingLevel to the model entry (same logic as dialog open)
+    const resetModelId =
+      typeof effectiveDefaultFeatureModel.model === 'string'
+        ? effectiveDefaultFeatureModel.model
+        : '';
+    const resetAvailableLevels = getThinkingLevelsForModel(resetModelId);
+    const resetThinkingLevel = resetAvailableLevels.includes(defaultThinkingLevel)
+      ? defaultThinkingLevel
+      : resetAvailableLevels[0];
+    setModelEntry({
+      ...effectiveDefaultFeatureModel,
+      thinkingLevel: resetThinkingLevel,
+    });
+    setWorkMode(
+      getDefaultWorkMode(useWorktrees, selectedNonMainWorktreeBranch, forceCurrentBranchMode)
+    );
+    setPlanningMode(defaultPlanningMode);
+    setRequirePlanApproval(defaultRequirePlanApproval);
+    setPreviewMap(new Map());
+    setDescriptionError(false);
+    setDescriptionHistory([]);
+    setParentDependencies([]);
+    setChildDependencies([]);
+    setExcludedPipelineSteps([]);
+    onOpenChange(false);
+  };
+
+  const handleAction = (actionFn?: (data: FeatureData) => void) => {
+    if (!actionFn) return;
+    const featureData = buildFeatureData();
+    if (!featureData) return;
+    actionFn(featureData);
+    resetForm();
+  };
+
+  const handleAdd = () => handleAction(onAdd);
+  const handleAddAndStart = () => handleAction(onAddAndStart);
+
+  const handleDialogClose = (open: boolean) => {
+    onOpenChange(open);
+    if (!open) {
+      setPreviewMap(new Map());
+      setDescriptionError(false);
+    }
+  };
+
+  // Shared card styling
+  const cardClass = 'rounded-lg border border-border/50 bg-muted/30 p-4 space-y-3';
+  const sectionHeaderClass = 'flex items-center gap-2 text-sm font-medium text-foreground';
+
+  return (
+    <Dialog open={open} onOpenChange={handleDialogClose}>
+      <DialogContent
+        compact={!isMaximized}
+        data-testid="add-feature-dialog"
+        onPointerDownOutside={(e: CustomEvent) => {
+          const target = e.target as HTMLElement;
+          if (target.closest('[data-testid="category-autocomplete-list"]')) {
+            e.preventDefault();
+          }
+        }}
+        onInteractOutside={(e: CustomEvent) => {
+          const target = e.target as HTMLElement;
+          if (target.closest('[data-testid="category-autocomplete-list"]')) {
+            e.preventDefault();
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>{isSpawnMode ? 'Spawn Sub-Task' : 'Add New Feature'}</DialogTitle>
+          <DialogDescription>
+            {isSpawnMode
+              ? `Create a sub-task that depends on "${parentFeature?.title || parentFeature?.description.slice(0, 50)}..."`
+              : 'Create a new feature card for the Kanban board.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4 space-y-4 overflow-y-auto flex-1 min-h-0">
+          {/* Ancestor Context Section - only in spawn mode */}
+          {isSpawnMode && parentFeature && (
+            <AncestorContextSection
+              parentFeature={{
+                id: parentFeature.id,
+                title: parentFeature.title,
+                description: parentFeature.description,
+                spec: parentFeature.spec,
+                summary: parentFeature.summary,
+              }}
+              ancestors={ancestors}
+              selectedAncestorIds={selectedAncestorIds}
+              onSelectionChange={setSelectedAncestorIds}
+            />
+          )}
+
+          {/* Task Details Section */}
+          <div className={cardClass}>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="description">Description</Label>
+                {/* Version History Button */}
+                <EnhancementHistoryButton
+                  history={descriptionHistory}
+                  currentValue={description}
+                  onRestore={setDescription}
+                  valueAccessor={(entry) => entry.description}
+                  title="Version History"
+                  restoreMessage="Description restored from history"
+                />
+              </div>
+              <DescriptionImageDropZone
+                value={description}
+                onChange={(value) => {
+                  setDescription(value);
+                  if (value.trim()) setDescriptionError(false);
+                }}
+                images={imagePaths}
+                onImagesChange={setImagePaths}
+                textFiles={textFilePaths}
+                onTextFilesChange={setTextFilePaths}
+                placeholder="Describe the feature..."
+                previewMap={previewMap}
+                onPreviewMapChange={setPreviewMap}
+                autoFocus
+                error={descriptionError}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="title">Title (optional)</Label>
+              <Input
+                id="title"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Leave blank to auto-generate"
+              />
+            </div>
+
+            {/* Enhancement Section */}
+            <EnhanceWithAI
+              value={description}
+              onChange={setDescription}
+              onHistoryAdd={({ mode, originalText, enhancedText }) => {
+                const timestamp = new Date().toISOString();
+                setDescriptionHistory((prev) => {
+                  const newHistory = [...prev];
+                  // Add original text first (so user can restore to pre-enhancement state)
+                  // Only add if it's different from the last entry to avoid duplicates
+                  const lastEntry = prev[prev.length - 1];
+                  if (!lastEntry || lastEntry.description !== originalText) {
+                    newHistory.push({
+                      description: originalText,
+                      timestamp,
+                      source: prev.length === 0 ? 'initial' : 'edit',
+                    });
+                  }
+                  // Add enhanced text
+                  newHistory.push({
+                    description: enhancedText,
+                    timestamp,
+                    source: 'enhance',
+                    enhancementMode: mode,
+                  });
+                  return newHistory;
+                });
+              }}
+            />
+          </div>
+
+          {/* AI & Execution Section */}
+          <div className={cardClass}>
+            <div className="flex items-center justify-between">
+              <div className={sectionHeaderClass}>
+                <Cpu className="w-4 h-4 text-muted-foreground" />
+                <span>AI & Execution</span>
+              </div>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      onOpenChange(false);
+                      navigate({ to: '/settings', search: { view: 'defaults' } });
+                    }}
+                    className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    <Settings2 className="w-3.5 h-3.5" />
+                    <span>Edit Defaults</span>
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Change default model and planning settings for new features</p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">Model</Label>
+              <PhaseModelSelector
+                value={modelEntry}
+                onChange={handleModelChange}
+                compact
+                align="end"
+              />
+            </div>
+
+            <div className="grid gap-3 grid-cols-2">
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">Planning</Label>
+                <PlanningModeSelect
+                  mode={planningMode}
+                  onModeChange={setPlanningMode}
+                  testIdPrefix="add-feature-planning"
+                  compact
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">Options</Label>
+                <div className="flex flex-col gap-2 pt-1">
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      id="add-feature-skip-tests"
+                      checked={!skipTests}
+                      onCheckedChange={(checked) => setSkipTests(!checked)}
+                      data-testid="add-feature-skip-tests-checkbox"
+                    />
+                    <Label
+                      htmlFor="add-feature-skip-tests"
+                      className="text-xs font-normal cursor-pointer"
+                    >
+                      Run tests
+                    </Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      id="add-feature-require-approval"
+                      checked={requirePlanApproval}
+                      onCheckedChange={(checked) => setRequirePlanApproval(!!checked)}
+                      disabled={planningMode === 'skip'}
+                      data-testid="add-feature-planning-require-approval-checkbox"
+                    />
+                    <Label
+                      htmlFor="add-feature-require-approval"
+                      className={cn(
+                        'text-xs font-normal',
+                        planningMode === 'skip'
+                          ? 'cursor-not-allowed text-muted-foreground'
+                          : 'cursor-pointer'
+                      )}
+                    >
+                      Require approval
+                    </Label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Organization Section */}
+          <div className={cardClass}>
+            <div className={sectionHeaderClass}>
+              <FolderKanban className="w-4 h-4 text-muted-foreground" />
+              <span>Organization</span>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">Category</Label>
+                <CategoryAutocomplete
+                  value={category}
+                  onChange={setCategory}
+                  suggestions={categorySuggestions}
+                  placeholder="e.g., Core, UI, API"
+                  data-testid="feature-category-input"
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">Priority</Label>
+                <PrioritySelector
+                  selectedPriority={priority}
+                  onPrioritySelect={setPriority}
+                  testIdPrefix="priority"
+                />
+              </div>
+            </div>
+
+            {/* Work Mode Selector */}
+            <div className="pt-2">
+              <WorkModeSelector
+                workMode={workMode}
+                onWorkModeChange={setWorkMode}
+                branchName={branchName}
+                onBranchNameChange={setBranchName}
+                branchSuggestions={branchSuggestions}
+                branchCardCounts={branchCardCounts}
+                currentBranch={currentBranch}
+                testIdPrefix="feature-work-mode"
+              />
+            </div>
+
+            {/* Dependencies - only show when not in spawn mode */}
+            {!isSpawnMode && allFeatures.length > 0 && (
+              <div className="pt-2 space-y-3">
+                <div className="space-y-1.5">
+                  <Label className="text-xs text-muted-foreground">
+                    Parent Dependencies (this feature depends on)
+                  </Label>
+                  <DependencySelector
+                    value={parentDependencies}
+                    onChange={setParentDependencies}
+                    features={allFeatures}
+                    type="parent"
+                    placeholder="Select features this depends on..."
+                    data-testid="add-feature-parent-deps"
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs text-muted-foreground">
+                    Child Dependencies (features that depend on this)
+                  </Label>
+                  <DependencySelector
+                    value={childDependencies}
+                    onChange={setChildDependencies}
+                    features={allFeatures}
+                    type="child"
+                    placeholder="Select features that will depend on this..."
+                    data-testid="add-feature-child-deps"
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Pipeline Exclusion Controls */}
+            <div className="pt-2">
+              <PipelineExclusionControls
+                projectPath={projectPath}
+                excludedPipelineSteps={excludedPipelineSteps}
+                onExcludedStepsChange={setExcludedPipelineSteps}
+                testIdPrefix="add-feature-pipeline"
+              />
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          {onAddAndStart && (
+            <Button
+              onClick={handleAddAndStart}
+              variant="secondary"
+              data-testid="confirm-add-and-start-feature"
+              disabled={workMode === 'custom' && !branchName.trim()}
+            >
+              <Play className="w-4 h-4 mr-2" />
+              Make
+            </Button>
+          )}
+          <HotkeyButton
+            onClick={handleAdd}
+            hotkey={{ key: 'Enter', cmdCtrl: true }}
+            hotkeyActive={open}
+            data-testid="confirm-add-feature"
+            disabled={workMode === 'custom' && !branchName.trim()}
+          >
+            {isSpawnMode ? 'Spawn Task' : 'Add Feature'}
+          </HotkeyButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/agent-output-modal.constants.ts b/temp_repo/apps/ui/src/components/views/board-view/dialogs/agent-output-modal.constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ab66b65d79bda593fedbdd8aebda34037f94f47a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/agent-output-modal.constants.ts
@@ -0,0 +1,41 @@
+/**
+ * Constants for AgentOutputModal component
+ * Centralizes magic numbers, timeouts, and configuration values
+ */
+
+export const MODAL_CONSTANTS = {
+  // Auto-scroll threshold for detecting when user is at bottom
+  AUTOSCROLL_THRESHOLD: 50,
+
+  // Delay for closing modal after successful completion
+  MODAL_CLOSE_DELAY_MS: 1500,
+
+  // Modal height constraints for different viewports
+  HEIGHT_CONSTRAINTS: {
+    MOBILE_MAX_DVH: '85dvh',
+    SMALL_MAX_VH: '80vh',
+    TABLET_MAX_VH: '85vh',
+  },
+
+  // Modal width constraints for different viewports
+  WIDTH_CONSTRAINTS: {
+    MOBILE_MAX_CALC: 'calc(100% - 2rem)',
+    SMALL_MAX_VW: '60vw',
+    TABLET_MAX_VW: '90vw',
+    TABLET_MAX_WIDTH: '1200px',
+  },
+
+  // View modes
+  VIEW_MODES: {
+    SUMMARY: 'summary',
+    PARSED: 'parsed',
+    RAW: 'raw',
+    CHANGES: 'changes',
+  } as const,
+
+  // Component heights (complete Tailwind class fragments for template interpolation)
+  COMPONENT_HEIGHTS: {
+    SMALL_MIN: 'sm:min-h-[200px]',
+    SMALL_MAX: 'sm:max-h-[60vh]',
+  },
+} as const;
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/agent-output-modal.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/agent-output-modal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..03639d75ec11a4a32176214537e7d6a1a1431ba4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/agent-output-modal.tsx
@@ -0,0 +1,702 @@
+import { useEffect, useRef, useState, useMemo } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { List, FileText, GitBranch, ClipboardList, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getElectronAPI } from '@/lib/electron';
+import { LogViewer } from '@/components/ui/log-viewer';
+import { GitDiffPanel } from '@/components/ui/git-diff-panel';
+import { TaskProgressPanel } from '@/components/ui/task-progress-panel';
+import { Markdown } from '@/components/ui/markdown';
+import { useAppStore } from '@/store/app-store';
+import {
+  extractSummary,
+  parseAllPhaseSummaries,
+  isAccumulatedSummary,
+  type PhaseSummaryEntry,
+} from '@/lib/log-parser';
+import { getFirstNonEmptySummary } from '@/lib/summary-selection';
+import { useAgentOutput, useFeature } from '@/hooks/queries';
+import { cn } from '@/lib/utils';
+import { MODAL_CONSTANTS } from '@/components/views/board-view/dialogs/agent-output-modal.constants';
+import type { AutoModeEvent } from '@/types/electron';
+import type { BacklogPlanEvent } from '@automaker/types';
+
+interface AgentOutputModalProps {
+  open: boolean;
+  onClose: () => void;
+  featureDescription: string;
+  featureId: string;
+  /** The status of the feature - used to determine if spinner should be shown */
+  featureStatus?: string;
+  /** Called when a number key (0-9) is pressed while the modal is open */
+  onNumberKeyPress?: (key: string) => void;
+  /** Project path - if not provided, falls back to window.__currentProject for backward compatibility */
+  projectPath?: string;
+  /** Branch name for the feature worktree - used when viewing changes */
+  branchName?: string;
+}
+
+type ViewMode = (typeof MODAL_CONSTANTS.VIEW_MODES)[keyof typeof MODAL_CONSTANTS.VIEW_MODES];
+
+/**
+ * Renders a single phase entry card with header and content.
+ */
+function PhaseEntryCard({
+  entry,
+  index,
+  totalPhases,
+  hasMultiplePhases,
+  isActive,
+  onClick,
+}: {
+  entry: PhaseSummaryEntry;
+  index: number;
+  totalPhases: number;
+  hasMultiplePhases: boolean;
+  isActive?: boolean;
+  onClick?: () => void;
+}) {
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (onClick && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'p-4 bg-card rounded-lg border border-border/50 transition-all',
+        isActive && 'ring-2 ring-primary/50 border-primary/50',
+        onClick && 'cursor-pointer'
+      )}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+    >
+      <div className="flex items-center gap-2 mb-3 pb-2 border-b border-border/30">
+        <span className="text-sm font-semibold text-primary">{entry.phaseName}</span>
+        {hasMultiplePhases && (
+          <span className="text-xs text-muted-foreground">
+            Step {index + 1} of {totalPhases}
+          </span>
+        )}
+      </div>
+      <Markdown>{entry.content || 'No summary available'}</Markdown>
+    </div>
+  );
+}
+
+/**
+ * Step navigator component for multi-phase summaries
+ */
+function StepNavigator({
+  phaseEntries,
+  activeIndex,
+  onIndexChange,
+}: {
+  phaseEntries: PhaseSummaryEntry[];
+  activeIndex: number;
+  onIndexChange: (index: number) => void;
+}) {
+  if (phaseEntries.length <= 1) return null;
+
+  return (
+    <div className="flex items-center gap-2 p-2 bg-muted/50 rounded-lg shrink-0">
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-7 w-7 p-0"
+        onClick={() => onIndexChange(Math.max(0, activeIndex - 1))}
+        disabled={activeIndex === 0}
+      >
+        <ChevronLeft className="w-4 h-4" />
+      </Button>
+
+      <div className="flex items-center gap-1 overflow-x-auto">
+        {phaseEntries.map((entry, index) => (
+          <button
+            key={`step-nav-${index}`}
+            onClick={() => onIndexChange(index)}
+            className={cn(
+              'px-2.5 py-1 rounded-md text-xs font-medium transition-all whitespace-nowrap',
+              index === activeIndex
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+            )}
+          >
+            {entry.phaseName}
+          </button>
+        ))}
+      </div>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-7 w-7 p-0"
+        onClick={() => onIndexChange(Math.min(phaseEntries.length - 1, activeIndex + 1))}
+        disabled={activeIndex === phaseEntries.length - 1}
+      >
+        <ChevronRight className="w-4 h-4" />
+      </Button>
+    </div>
+  );
+}
+
+export function AgentOutputModal({
+  open,
+  onClose,
+  featureDescription,
+  featureId,
+  featureStatus,
+  onNumberKeyPress,
+  projectPath: projectPathProp,
+  branchName,
+}: AgentOutputModalProps) {
+  const isBacklogPlan = featureId.startsWith('backlog-plan:');
+
+  // Resolve project path - prefer prop, fallback to window.__currentProject
+  const resolvedProjectPath = projectPathProp || window.__currentProject?.path || undefined;
+
+  // Track view mode state
+  const [viewMode, setViewMode] = useState<ViewMode | null>(null);
+  const [streamedContent, setStreamedContent] = useState<string>('');
+
+  // Use React Query for initial output loading
+  const {
+    data: initialOutput = '',
+    isLoading,
+    refetch: refetchAgentOutput,
+  } = useAgentOutput(resolvedProjectPath, featureId, {
+    enabled: open && !!resolvedProjectPath,
+  });
+
+  // Fetch feature data to access the server-side accumulated summary.
+  // Also used to show fresh description/status instead of potentially stale props
+  // (e.g. when opening via deep link from a notification click).
+  const { data: feature, refetch: refetchFeature } = useFeature(resolvedProjectPath, featureId, {
+    enabled: open && !!resolvedProjectPath && !isBacklogPlan,
+  });
+
+  // Prefer fresh data from server over potentially stale props passed at open time.
+  const resolvedDescription = feature?.description ?? featureDescription;
+  const resolvedStatus = feature?.status ?? featureStatus;
+  const resolvedBranchName = feature?.branchName ?? branchName;
+
+  // Reset streamed content when modal opens or featureId changes
+  useEffect(() => {
+    if (open) {
+      setStreamedContent('');
+    }
+  }, [open, featureId]);
+
+  // Combine initial output from query with streamed content from WebSocket
+  const output = initialOutput + streamedContent;
+
+  // Extract summary from output (client-side fallback)
+  const extractedSummary = useMemo(() => extractSummary(output), [output]);
+
+  // Prefer server-side accumulated summary (handles pipeline step accumulation),
+  // fall back to client-side extraction from raw output.
+  const summary = getFirstNonEmptySummary(feature?.summary, extractedSummary);
+
+  // Normalize null to undefined for parser helpers that expect string | undefined
+  const normalizedSummary = summary ?? undefined;
+
+  // Parse summary into phases for multi-step navigation
+  const phaseEntries = useMemo(
+    () => parseAllPhaseSummaries(normalizedSummary),
+    [normalizedSummary]
+  );
+  const hasMultiplePhases = useMemo(
+    () => isAccumulatedSummary(normalizedSummary),
+    [normalizedSummary]
+  );
+  const [activePhaseIndex, setActivePhaseIndex] = useState(0);
+
+  // Reset active phase index when summary changes
+  useEffect(() => {
+    setActivePhaseIndex(0);
+  }, [normalizedSummary]);
+
+  // Determine the effective view mode - default to summary if available, otherwise parsed
+  const effectiveViewMode =
+    viewMode ?? (summary ? MODAL_CONSTANTS.VIEW_MODES.SUMMARY : MODAL_CONSTANTS.VIEW_MODES.PARSED);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const autoScrollRef = useRef(true);
+  const useWorktrees = useAppStore((state) => state.useWorktrees);
+
+  // Force a fresh fetch when opening to avoid showing stale cached summaries.
+  useEffect(() => {
+    if (!open || !resolvedProjectPath || !featureId) return;
+    if (!isBacklogPlan) {
+      void refetchFeature();
+    }
+    void refetchAgentOutput();
+  }, [open, resolvedProjectPath, featureId, isBacklogPlan, refetchFeature, refetchAgentOutput]);
+
+  // Auto-scroll to bottom when output changes
+  useEffect(() => {
+    if (autoScrollRef.current && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [output]);
+
+  // Auto-scroll to bottom when summary changes (for pipeline step accumulation)
+  const summaryScrollRef = useRef<HTMLDivElement>(null);
+  const [summaryAutoScroll, setSummaryAutoScroll] = useState(true);
+
+  // Auto-scroll summary panel to bottom when summary is updated
+  useEffect(() => {
+    if (summaryAutoScroll && summaryScrollRef.current && normalizedSummary) {
+      summaryScrollRef.current.scrollTop = summaryScrollRef.current.scrollHeight;
+    }
+  }, [normalizedSummary, summaryAutoScroll]);
+
+  // Handle scroll to detect if user scrolled up in summary panel
+  const handleSummaryScroll = () => {
+    if (!summaryScrollRef.current) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = summaryScrollRef.current;
+    const isAtBottom =
+      scrollHeight - scrollTop - clientHeight < MODAL_CONSTANTS.AUTOSCROLL_THRESHOLD;
+    setSummaryAutoScroll(isAtBottom);
+  };
+
+  // Scroll to active phase when it changes or when summary changes
+  useEffect(() => {
+    if (summaryScrollRef.current && hasMultiplePhases) {
+      const phaseCards = summaryScrollRef.current.querySelectorAll('[data-phase-index]');
+      // Ensure index is within bounds
+      const safeIndex = Math.min(activePhaseIndex, phaseCards.length - 1);
+      const targetCard = phaseCards[safeIndex];
+      if (targetCard) {
+        targetCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }
+  }, [activePhaseIndex, hasMultiplePhases, normalizedSummary]);
+
+  // Listen to auto mode events and update output
+  useEffect(() => {
+    if (!open) return;
+
+    const api = getElectronAPI();
+    if (!api?.autoMode || isBacklogPlan) return;
+
+    console.log('[AgentOutputModal] Subscribing to events for featureId:', featureId);
+
+    const unsubscribe = api.autoMode.onEvent((event) => {
+      console.log(
+        '[AgentOutputModal] Received event:',
+        event.type,
+        'featureId:',
+        'featureId' in event ? event.featureId : 'none',
+        'modalFeatureId:',
+        featureId
+      );
+
+      // Filter events for this specific feature only (skip events without featureId)
+      if ('featureId' in event && event.featureId !== featureId) {
+        console.log('[AgentOutputModal] Skipping event - featureId mismatch');
+        return;
+      }
+
+      let newContent = '';
+
+      switch (event.type) {
+        case 'auto_mode_progress':
+          newContent = event.content || '';
+          break;
+        case 'auto_mode_tool': {
+          const toolName = event.tool || 'Unknown Tool';
+          const toolInput = event.input ? JSON.stringify(event.input, null, 2) : '';
+          newContent = `\n🔧 Tool: ${toolName}\n${toolInput ? `Input: ${toolInput}\n` : ''}`;
+          break;
+        }
+        case 'auto_mode_phase': {
+          const phaseEmoji =
+            event.phase === 'planning' ? '📋' : event.phase === 'action' ? '⚡' : '✅';
+          newContent = `\n${phaseEmoji} ${event.message}\n`;
+          break;
+        }
+        case 'auto_mode_error':
+          newContent = `\n❌ Error: ${event.error}\n`;
+          break;
+        case 'auto_mode_ultrathink_preparation': {
+          // Format thinking level preparation information
+          let prepContent = `\n🧠 Ultrathink Preparation\n`;
+
+          if (event.warnings && event.warnings.length > 0) {
+            prepContent += `\n⚠️ Warnings:\n`;
+            event.warnings.forEach((warning: string) => {
+              prepContent += `  • ${warning}\n`;
+            });
+          }
+
+          if (event.recommendations && event.recommendations.length > 0) {
+            prepContent += `\n💡 Recommendations:\n`;
+            event.recommendations.forEach((rec: string) => {
+              prepContent += `  • ${rec}\n`;
+            });
+          }
+
+          if (event.estimatedCost !== undefined) {
+            prepContent += `\n💰 Estimated Cost: ~$${event.estimatedCost.toFixed(
+              2
+            )} per execution\n`;
+          }
+
+          if (event.estimatedTime) {
+            prepContent += `\n⏱️ Estimated Time: ${event.estimatedTime}\n`;
+          }
+
+          newContent = prepContent;
+          break;
+        }
+        case 'planning_started': {
+          // Show when planning mode begins
+          if ('mode' in event && 'message' in event) {
+            const modeLabel =
+              event.mode === 'lite' ? 'Lite' : event.mode === 'spec' ? 'Spec' : 'Full';
+            newContent = `\n📋 Planning Mode: ${modeLabel}\n${event.message}\n`;
+          }
+          break;
+        }
+        case 'plan_approval_required':
+          // Show when plan requires approval
+          if ('planningMode' in event) {
+            newContent = `\n⏸️ Plan generated - waiting for your approval...\n`;
+          }
+          break;
+        case 'plan_approved':
+          // Show when plan is manually approved
+          if ('hasEdits' in event) {
+            newContent = event.hasEdits
+              ? `\n✅ Plan approved (with edits) - continuing to implementation...\n`
+              : `\n✅ Plan approved - continuing to implementation...\n`;
+          }
+          break;
+        case 'plan_auto_approved':
+          // Show when plan is auto-approved
+          newContent = `\n✅ Plan auto-approved - continuing to implementation...\n`;
+          break;
+        case 'plan_revision_requested': {
+          // Show when user requests plan revision
+          if ('planVersion' in event) {
+            const revisionEvent = event as Extract<
+              AutoModeEvent,
+              { type: 'plan_revision_requested' }
+            >;
+            newContent = `\n🔄 Revising plan based on your feedback (v${revisionEvent.planVersion})...\n`;
+          }
+          break;
+        }
+        case 'auto_mode_task_started': {
+          // Show when a task starts
+          if ('taskId' in event && 'taskDescription' in event) {
+            const taskEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_started' }>;
+            newContent = `\n▶ Starting ${taskEvent.taskId}: ${taskEvent.taskDescription}\n`;
+          }
+          break;
+        }
+        case 'auto_mode_task_complete': {
+          // Show task completion progress
+          if ('taskId' in event && 'tasksCompleted' in event && 'tasksTotal' in event) {
+            const taskEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_complete' }>;
+            newContent = `\n✓ ${taskEvent.taskId} completed (${taskEvent.tasksCompleted}/${taskEvent.tasksTotal})\n`;
+          }
+          break;
+        }
+        case 'auto_mode_phase_complete': {
+          // Show phase completion for full mode
+          if ('phaseNumber' in event) {
+            const phaseEvent = event as Extract<
+              AutoModeEvent,
+              { type: 'auto_mode_phase_complete' }
+            >;
+            newContent = `\n🏁 Phase ${phaseEvent.phaseNumber} complete\n`;
+          }
+          break;
+        }
+        case 'auto_mode_feature_complete': {
+          const emoji = event.passes ? '✅' : '⚠️';
+          newContent = `\n${emoji} Task completed: ${event.message}\n`;
+
+          // Close the modal when the feature is verified (passes = true)
+          if (event.passes) {
+            // Small delay to show the completion message before closing
+            setTimeout(() => {
+              onClose();
+            }, 1500);
+          }
+          break;
+        }
+      }
+
+      if (newContent) {
+        // Append new content from WebSocket to streamed content
+        setStreamedContent((prev) => prev + newContent);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [open, featureId, isBacklogPlan, onClose]);
+
+  // Listen to backlog plan events and update output
+  useEffect(() => {
+    if (!open || !isBacklogPlan) return;
+
+    const api = getElectronAPI();
+    if (!api?.backlogPlan) return;
+
+    const unsubscribe = api.backlogPlan.onEvent((data: unknown) => {
+      const event = data as BacklogPlanEvent;
+      if (!event?.type) return;
+
+      let newContent = '';
+      switch (event.type) {
+        case 'backlog_plan_progress':
+          newContent = `\n🧭 ${event.content || 'Backlog plan progress update'}\n`;
+          break;
+        case 'backlog_plan_error':
+          newContent = `\n❌ Backlog plan error: ${event.error || 'Unknown error'}\n`;
+          break;
+        case 'backlog_plan_complete':
+          newContent = `\n✅ Backlog plan completed\n`;
+          break;
+        default:
+          newContent = `\nℹ️ ${event.type}\n`;
+          break;
+      }
+
+      if (newContent) {
+        setStreamedContent((prev) => prev + newContent);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [open, isBacklogPlan]);
+
+  // Handle scroll to detect if user scrolled up
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const isAtBottom =
+      scrollHeight - scrollTop - clientHeight < MODAL_CONSTANTS.AUTOSCROLL_THRESHOLD;
+    autoScrollRef.current = isAtBottom;
+  };
+
+  // Handle number key presses while modal is open
+  useEffect(() => {
+    if (!open || !onNumberKeyPress) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Check if a number key (0-9) was pressed without modifiers
+      if (!event.ctrlKey && !event.altKey && !event.metaKey && /^[0-9]$/.test(event.key)) {
+        event.preventDefault();
+        onNumberKeyPress(event.key);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, onNumberKeyPress]);
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent
+        className="w-full max-h-[85dvh] max-w-[calc(100%-2rem)] sm:w-[60vw] sm:max-w-[60vw] sm:max-h-[80vh] md:w-[90vw] md:max-w-[1200px] md:max-h-[85vh] rounded-xl flex flex-col"
+        data-testid="agent-output-modal"
+      >
+        <DialogHeader className="shrink-0">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 pr-10">
+            <DialogTitle className="flex items-center gap-2">
+              {resolvedStatus !== 'verified' && resolvedStatus !== 'waiting_approval' && (
+                <Spinner size="md" />
+              )}
+              Agent Output
+            </DialogTitle>
+            <div className="flex items-center gap-1 bg-muted rounded-lg p-1 overflow-x-auto">
+              {summary && (
+                <button
+                  onClick={() => setViewMode('summary')}
+                  className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all whitespace-nowrap ${
+                    effectiveViewMode === 'summary'
+                      ? 'bg-primary/20 text-primary shadow-sm'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                  }`}
+                  data-testid="view-mode-summary"
+                >
+                  <ClipboardList className="w-3.5 h-3.5" />
+                  Summary
+                </button>
+              )}
+              <button
+                onClick={() => setViewMode('parsed')}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all whitespace-nowrap ${
+                  effectiveViewMode === 'parsed'
+                    ? 'bg-primary/20 text-primary shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                }`}
+                data-testid="view-mode-parsed"
+              >
+                <List className="w-3.5 h-3.5" />
+                Logs
+              </button>
+              <button
+                onClick={() => setViewMode('changes')}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all whitespace-nowrap ${
+                  effectiveViewMode === 'changes'
+                    ? 'bg-primary/20 text-primary shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                }`}
+                data-testid="view-mode-changes"
+              >
+                <GitBranch className="w-3.5 h-3.5" />
+                Changes
+              </button>
+              <button
+                onClick={() => setViewMode('raw')}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all whitespace-nowrap ${
+                  effectiveViewMode === 'raw'
+                    ? 'bg-primary/20 text-primary shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                }`}
+                data-testid="view-mode-raw"
+              >
+                <FileText className="w-3.5 h-3.5" />
+                Raw
+              </button>
+            </div>
+          </div>
+          <DialogDescription
+            className="mt-1 max-h-24 overflow-y-auto wrap-break-word"
+            data-testid="agent-output-description"
+          >
+            {resolvedDescription}
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Task Progress Panel - shows when tasks are being executed */}
+        {!isBacklogPlan && (
+          <TaskProgressPanel
+            featureId={featureId}
+            projectPath={resolvedProjectPath}
+            className="shrink-0 mx-3 my-2"
+          />
+        )}
+
+        {effectiveViewMode === 'changes' ? (
+          <div
+            className={`flex-1 min-h-0 ${MODAL_CONSTANTS.COMPONENT_HEIGHTS.SMALL_MIN} ${MODAL_CONSTANTS.COMPONENT_HEIGHTS.SMALL_MAX} overflow-y-auto scrollbar-visible`}
+          >
+            {resolvedProjectPath ? (
+              <GitDiffPanel
+                projectPath={resolvedProjectPath}
+                featureId={resolvedBranchName || featureId}
+                compact={false}
+                useWorktrees={useWorktrees}
+                className="border-0 rounded-lg"
+              />
+            ) : (
+              <div className="flex items-center justify-center h-full text-muted-foreground">
+                <Spinner size="lg" className="mr-2" />
+                Loading...
+              </div>
+            )}
+          </div>
+        ) : effectiveViewMode === 'summary' && summary ? (
+          <>
+            {/* Step navigator for multi-phase summaries */}
+            {hasMultiplePhases && (
+              <StepNavigator
+                phaseEntries={phaseEntries}
+                activeIndex={activePhaseIndex}
+                onIndexChange={setActivePhaseIndex}
+              />
+            )}
+
+            <div
+              ref={summaryScrollRef}
+              onScroll={handleSummaryScroll}
+              className="flex-1 min-h-0 sm:min-h-[200px] sm:max-h-[60vh] overflow-y-auto scrollbar-visible space-y-4 p-1"
+            >
+              {hasMultiplePhases ? (
+                // Multi-phase: render individual phase cards
+                phaseEntries.map((entry, index) => (
+                  <div key={`phase-${index}-${entry.phaseName}`} data-phase-index={index}>
+                    <PhaseEntryCard
+                      entry={entry}
+                      index={index}
+                      totalPhases={phaseEntries.length}
+                      hasMultiplePhases={hasMultiplePhases}
+                      isActive={index === activePhaseIndex}
+                      onClick={() => setActivePhaseIndex(index)}
+                    />
+                  </div>
+                ))
+              ) : (
+                // Single phase: render as markdown
+                <div className="bg-card border border-border/50 rounded-lg p-4">
+                  <Markdown>{summary}</Markdown>
+                </div>
+              )}
+            </div>
+
+            <div className="text-xs text-muted-foreground text-center shrink-0">
+              {summaryAutoScroll
+                ? 'Auto-scrolling enabled'
+                : 'Scroll to bottom to enable auto-scroll'}
+            </div>
+          </>
+        ) : (
+          <>
+            <div
+              ref={scrollRef}
+              onScroll={handleScroll}
+              className={`flex-1 min-h-0 ${MODAL_CONSTANTS.COMPONENT_HEIGHTS.SMALL_MIN} ${MODAL_CONSTANTS.COMPONENT_HEIGHTS.SMALL_MAX} overflow-y-auto bg-popover border border-border/50 rounded-lg p-4 font-mono text-xs scrollbar-visible`}
+            >
+              {isLoading && !output ? (
+                <div className="flex items-center justify-center h-full text-muted-foreground">
+                  <Spinner size="lg" className="mr-2" />
+                  Loading output...
+                </div>
+              ) : !output ? (
+                <div className="flex items-center justify-center h-full text-muted-foreground">
+                  No output yet. The agent will stream output here as it works.
+                </div>
+              ) : effectiveViewMode === 'parsed' ? (
+                <LogViewer output={output} />
+              ) : (
+                <div className="whitespace-pre-wrap wrap-break-word text-foreground/80">
+                  {output}
+                </div>
+              )}
+            </div>
+
+            <div className="text-xs text-muted-foreground text-center shrink-0">
+              {autoScrollRef.current
+                ? 'Auto-scrolling enabled'
+                : 'Scroll to bottom to enable auto-scroll'}
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/archive-all-verified-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/archive-all-verified-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b4048c53d0045114fb835bab5de5a80b7e4a8cd3
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/archive-all-verified-dialog.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Archive } from 'lucide-react';
+
+interface ArchiveAllVerifiedDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  verifiedCount: number;
+  onConfirm: () => void;
+}
+
+export function ArchiveAllVerifiedDialog({
+  open,
+  onOpenChange,
+  verifiedCount,
+  onConfirm,
+}: ArchiveAllVerifiedDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-testid="archive-all-verified-dialog">
+        <DialogHeader>
+          <DialogTitle>Archive All Verified Features</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to archive all verified features? They will be moved to the
+            archive box.
+            {verifiedCount > 0 && (
+              <span className="block mt-2 text-yellow-500">
+                {verifiedCount} feature(s) will be archived.
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button variant="default" onClick={onConfirm} data-testid="confirm-archive-all-verified">
+            <Archive className="w-4 h-4 mr-2" />
+            Complete All
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/auto-mode-settings-popover.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/auto-mode-settings-popover.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6928206e2ca85f3c381166d3e82aae2be6d258e4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/auto-mode-settings-popover.tsx
@@ -0,0 +1,95 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Slider } from '@/components/ui/slider';
+import { FastForward, Bot, Settings2 } from 'lucide-react';
+
+interface AutoModeSettingsPopoverProps {
+  skipVerificationInAutoMode: boolean;
+  onSkipVerificationChange: (value: boolean) => void;
+  maxConcurrency: number;
+  runningAgentsCount: number;
+  onConcurrencyChange: (value: number) => void;
+}
+
+export function AutoModeSettingsPopover({
+  skipVerificationInAutoMode,
+  onSkipVerificationChange,
+  maxConcurrency,
+  runningAgentsCount,
+  onConcurrencyChange,
+}: AutoModeSettingsPopoverProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          className="p-1 rounded hover:bg-accent/50 transition-colors"
+          title="Auto Mode Settings"
+          data-testid="auto-mode-settings-button"
+        >
+          <Settings2 className="w-4 h-4 text-muted-foreground" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-72" align="end" sideOffset={8}>
+        <div className="space-y-4">
+          <div>
+            <h4 className="font-medium text-sm mb-1">Auto Mode Settings</h4>
+            <p className="text-xs text-muted-foreground">
+              Configure auto mode execution and agent concurrency.
+            </p>
+          </div>
+
+          {/* Max Concurrent Agents */}
+          <div className="space-y-2 p-2 rounded-md bg-secondary/50">
+            <div className="flex items-center gap-2">
+              <Bot className="w-4 h-4 text-brand-500 shrink-0" />
+              <Label className="text-xs font-medium">Max Concurrent Agents</Label>
+              <span className="ml-auto text-xs text-muted-foreground">
+                {runningAgentsCount}/{maxConcurrency}
+              </span>
+            </div>
+            <div className="flex items-center gap-3">
+              <Slider
+                value={[maxConcurrency]}
+                onValueChange={(value) => onConcurrencyChange(value[0])}
+                min={1}
+                max={10}
+                step={1}
+                className="flex-1"
+                data-testid="concurrency-slider"
+              />
+              <span className="text-xs font-medium min-w-[2ch] text-right">{maxConcurrency}</span>
+            </div>
+            <p className="text-[10px] text-muted-foreground">
+              Higher values process more features in parallel but use more API resources.
+            </p>
+          </div>
+
+          {/* Skip Verification Setting */}
+          <div className="flex items-center justify-between gap-3 p-2 rounded-md bg-secondary/50">
+            <div className="flex items-center gap-2 flex-1 min-w-0">
+              <FastForward className="w-4 h-4 text-brand-500 shrink-0" />
+              <Label
+                htmlFor="skip-verification-toggle"
+                className="text-xs font-medium cursor-pointer"
+              >
+                Skip verification requirement
+              </Label>
+            </div>
+            <Switch
+              id="skip-verification-toggle"
+              checked={skipVerificationInAutoMode}
+              onCheckedChange={onSkipVerificationChange}
+              data-testid="skip-verification-toggle"
+            />
+          </div>
+
+          <p className="text-[10px] text-muted-foreground leading-relaxed">
+            When enabled, auto mode will grab features even if their dependencies are not verified,
+            as long as they are not currently running.
+          </p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/backlog-plan-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/backlog-plan-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..54cd34e5bd0a9e51d7072b68faab8092730e80a7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/backlog-plan-dialog.tsx
@@ -0,0 +1,494 @@
+import { useEffect, useState, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Wand2, Check, Plus, Pencil, Trash2, ChevronDown, ChevronRight } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getElectronAPI } from '@/lib/electron';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import type {
+  BacklogPlanResult,
+  BacklogChange,
+  ModelAlias,
+  CursorModelId,
+  PhaseModelEntry,
+} from '@automaker/types';
+import { ModelOverrideTrigger } from '@/components/shared/model-override-trigger';
+import { useAppStore } from '@/store/app-store';
+
+/**
+ * Normalize PhaseModelEntry or string to PhaseModelEntry
+ */
+function normalizeEntry(entry: PhaseModelEntry | string | undefined | null): PhaseModelEntry {
+  if (!entry) {
+    return { model: 'claude-sonnet' as ModelAlias };
+  }
+  if (typeof entry === 'string') {
+    return { model: entry as ModelAlias | CursorModelId };
+  }
+  return entry;
+}
+
+interface BacklogPlanDialogProps {
+  open: boolean;
+  onClose: () => void;
+  projectPath: string;
+  onPlanApplied?: () => void;
+  // Props for background generation
+  pendingPlanResult: BacklogPlanResult | null;
+  setPendingPlanResult: (result: BacklogPlanResult | null) => void;
+  isGeneratingPlan: boolean;
+  setIsGeneratingPlan: (generating: boolean) => void;
+  // Branch to use for created features (defaults to 'main' when applying)
+  currentBranch?: string;
+}
+
+type DialogMode = 'input' | 'review' | 'applying';
+
+export function BacklogPlanDialog({
+  open,
+  onClose,
+  projectPath,
+  onPlanApplied,
+  pendingPlanResult,
+  setPendingPlanResult,
+  isGeneratingPlan,
+  setIsGeneratingPlan,
+  currentBranch,
+}: BacklogPlanDialogProps) {
+  const logger = createLogger('BacklogPlanDialog');
+  const [mode, setMode] = useState<DialogMode>('input');
+  const [prompt, setPrompt] = useState('');
+  const [expandedChanges, setExpandedChanges] = useState<Set<number>>(new Set());
+  const [selectedChanges, setSelectedChanges] = useState<Set<number>>(new Set());
+  const [modelOverride, setModelOverride] = useState<PhaseModelEntry | null>(null);
+
+  const { phaseModels } = useAppStore();
+
+  // Set mode based on whether we have a pending result
+  useEffect(() => {
+    if (open) {
+      if (pendingPlanResult) {
+        setMode('review');
+        // Select all changes by default
+        setSelectedChanges(new Set(pendingPlanResult.changes.map((_, i) => i)));
+        setExpandedChanges(new Set());
+      } else {
+        setMode('input');
+      }
+    }
+  }, [open, pendingPlanResult]);
+
+  const handleGenerate = useCallback(async () => {
+    if (!prompt.trim()) {
+      toast.error('Please enter a prompt describing the changes you want');
+      return;
+    }
+
+    const api = getElectronAPI();
+    if (!api?.backlogPlan) {
+      logger.warn('Backlog plan API not available');
+      toast.error('API not available');
+      return;
+    }
+
+    // Start generation in background
+    logger.debug('Starting backlog plan generation', {
+      projectPath,
+      promptLength: prompt.length,
+      hasModelOverride: Boolean(modelOverride),
+    });
+    setIsGeneratingPlan(true);
+
+    // Use model override if set, otherwise use global default (extract model string from PhaseModelEntry)
+    const effectiveModelEntry = modelOverride || normalizeEntry(phaseModels.backlogPlanningModel);
+    const effectiveModel = effectiveModelEntry.model;
+    const result = await api.backlogPlan.generate(
+      projectPath,
+      prompt,
+      effectiveModel,
+      currentBranch
+    );
+    if (!result.success) {
+      logger.error('Backlog plan generation failed to start', {
+        error: result.error,
+        projectPath,
+      });
+      setIsGeneratingPlan(false);
+      toast.error(result.error || 'Failed to start plan generation');
+      return;
+    }
+
+    // Show toast and close dialog - generation runs in background
+    logger.debug('Backlog plan generation started', {
+      projectPath,
+      model: effectiveModel,
+    });
+    toast.info('Generating plan... This will be ready soon!', {
+      duration: 3000,
+    });
+    setPrompt('');
+    onClose();
+  }, [
+    logger,
+    projectPath,
+    prompt,
+    modelOverride,
+    phaseModels,
+    setIsGeneratingPlan,
+    onClose,
+    currentBranch,
+  ]);
+
+  const handleApply = useCallback(async () => {
+    if (!pendingPlanResult) return;
+
+    // Filter to only selected changes
+    const selectedChangesList = pendingPlanResult.changes.filter((_, index) =>
+      selectedChanges.has(index)
+    );
+
+    if (selectedChangesList.length === 0) {
+      toast.error('Please select at least one change to apply');
+      return;
+    }
+
+    const api = getElectronAPI();
+    if (!api?.backlogPlan) {
+      toast.error('API not available');
+      return;
+    }
+
+    setMode('applying');
+
+    // Create a filtered plan result with only selected changes
+    const filteredPlanResult: BacklogPlanResult = {
+      ...pendingPlanResult,
+      changes: selectedChangesList,
+      // Filter dependency updates to only include those for selected features
+      dependencyUpdates:
+        pendingPlanResult.dependencyUpdates?.filter((update) => {
+          const isDeleting = selectedChangesList.some(
+            (c) => c.type === 'delete' && c.featureId === update.featureId
+          );
+          return !isDeleting;
+        }) || [],
+    };
+
+    const result = await api.backlogPlan.apply(
+      projectPath,
+      filteredPlanResult,
+      currentBranch ?? 'main'
+    );
+    if (result.success) {
+      toast.success(`Applied ${result.appliedChanges?.length || 0} changes`);
+      setPendingPlanResult(null);
+      onPlanApplied?.();
+      onClose();
+    } else {
+      toast.error(result.error || 'Failed to apply plan');
+      setMode('review');
+    }
+  }, [
+    projectPath,
+    pendingPlanResult,
+    selectedChanges,
+    setPendingPlanResult,
+    onPlanApplied,
+    onClose,
+    currentBranch,
+  ]);
+
+  const handleDiscard = useCallback(async () => {
+    setPendingPlanResult(null);
+    setMode('input');
+
+    const api = getElectronAPI();
+    if (api?.backlogPlan) {
+      await api.backlogPlan.clear(projectPath);
+    }
+  }, [setPendingPlanResult, projectPath]);
+
+  const toggleChangeExpanded = (index: number) => {
+    setExpandedChanges((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  };
+
+  const toggleChangeSelected = (index: number) => {
+    setSelectedChanges((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  };
+
+  const toggleAllChanges = () => {
+    if (!pendingPlanResult) return;
+    if (selectedChanges.size === pendingPlanResult.changes.length) {
+      setSelectedChanges(new Set());
+    } else {
+      setSelectedChanges(new Set(pendingPlanResult.changes.map((_, i) => i)));
+    }
+  };
+
+  const getChangeIcon = (type: BacklogChange['type']) => {
+    switch (type) {
+      case 'add':
+        return <Plus className="w-4 h-4 text-green-500" />;
+      case 'update':
+        return <Pencil className="w-4 h-4 text-yellow-500" />;
+      case 'delete':
+        return <Trash2 className="w-4 h-4 text-red-500" />;
+    }
+  };
+
+  const getChangeLabel = (change: BacklogChange) => {
+    switch (change.type) {
+      case 'add':
+        return change.feature?.title || 'New Feature';
+      case 'update':
+        return `Update: ${change.featureId}`;
+      case 'delete':
+        return `Delete: ${change.featureId}`;
+    }
+  };
+
+  const renderContent = () => {
+    switch (mode) {
+      case 'input':
+        return (
+          <div className="space-y-4">
+            <div className="text-sm text-muted-foreground">
+              Describe the changes you want to make across your features. The AI will analyze your
+              current feature list and propose additions, updates, deletions, or restructuring.
+            </div>
+            <Textarea
+              placeholder="e.g., Refactor onboarding into smaller features, add a dashboard feature that depends on authentication, and remove the legacy tour task."
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              className="min-h-[150px] resize-none"
+              autoFocus
+            />
+            <div className="text-xs text-muted-foreground">
+              The AI will automatically handle dependency graph updates when adding or removing
+              features.
+            </div>
+            {isGeneratingPlan && (
+              <div className="flex items-center gap-2 text-sm text-muted-foreground bg-muted/50 rounded-lg p-3">
+                <Spinner size="sm" />A plan is currently being generated in the background...
+              </div>
+            )}
+          </div>
+        );
+
+      case 'review': {
+        if (!pendingPlanResult) return null;
+
+        const additions = pendingPlanResult.changes.filter((c) => c.type === 'add');
+        const updates = pendingPlanResult.changes.filter((c) => c.type === 'update');
+        const deletions = pendingPlanResult.changes.filter((c) => c.type === 'delete');
+        const allSelected = selectedChanges.size === pendingPlanResult.changes.length;
+        const someSelected = selectedChanges.size > 0 && !allSelected;
+
+        return (
+          <div className="space-y-4">
+            {/* Summary */}
+            <div className="rounded-lg border bg-muted/30 p-4">
+              <h4 className="font-medium mb-2">Summary</h4>
+              <p className="text-sm text-muted-foreground">{pendingPlanResult.summary}</p>
+            </div>
+
+            {/* Stats */}
+            <div className="flex gap-4 text-sm">
+              {additions.length > 0 && (
+                <span className="flex items-center gap-1 text-green-600">
+                  <Plus className="w-4 h-4" /> {additions.length} additions
+                </span>
+              )}
+              {updates.length > 0 && (
+                <span className="flex items-center gap-1 text-yellow-600">
+                  <Pencil className="w-4 h-4" /> {updates.length} updates
+                </span>
+              )}
+              {deletions.length > 0 && (
+                <span className="flex items-center gap-1 text-red-600">
+                  <Trash2 className="w-4 h-4" /> {deletions.length} deletions
+                </span>
+              )}
+            </div>
+
+            {/* Select all */}
+            <div className="flex items-center gap-2 pb-2 border-b">
+              <Checkbox
+                id="select-all"
+                checked={allSelected}
+                // @ts-expect-error - indeterminate is valid but not in types
+                indeterminate={someSelected}
+                onCheckedChange={toggleAllChanges}
+              />
+              <label htmlFor="select-all" className="text-sm font-medium cursor-pointer">
+                {allSelected ? 'Deselect all' : 'Select all'} ({selectedChanges.size}/
+                {pendingPlanResult.changes.length})
+              </label>
+            </div>
+
+            {/* Changes list */}
+            <div className="max-h-[300px] overflow-y-auto space-y-2">
+              {pendingPlanResult.changes.map((change, index) => (
+                <div
+                  key={index}
+                  className={cn(
+                    'rounded-lg border p-3',
+                    change.type === 'add' && 'border-green-500/30 bg-green-500/5',
+                    change.type === 'update' && 'border-yellow-500/30 bg-yellow-500/5',
+                    change.type === 'delete' && 'border-red-500/30 bg-red-500/5',
+                    !selectedChanges.has(index) && 'opacity-50'
+                  )}
+                >
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      checked={selectedChanges.has(index)}
+                      onCheckedChange={() => toggleChangeSelected(index)}
+                    />
+                    <button
+                      className="flex-1 flex items-center gap-2 text-left"
+                      onClick={() => toggleChangeExpanded(index)}
+                    >
+                      {expandedChanges.has(index) ? (
+                        <ChevronDown className="w-4 h-4 text-muted-foreground" />
+                      ) : (
+                        <ChevronRight className="w-4 h-4 text-muted-foreground" />
+                      )}
+                      {getChangeIcon(change.type)}
+                      <span className="font-medium text-sm">{getChangeLabel(change)}</span>
+                    </button>
+                  </div>
+
+                  {expandedChanges.has(index) && (
+                    <div className="mt-3 pl-10 space-y-2 text-sm">
+                      <p className="text-muted-foreground">{change.reason}</p>
+                      {change.feature && (
+                        <div className="rounded bg-background/50 p-2 text-xs font-mono">
+                          {change.feature.description && (
+                            <p className="text-foreground">{change.feature.description}</p>
+                          )}
+                          {change.feature.dependencies &&
+                            change.feature.dependencies.length > 0 && (
+                              <p className="text-muted-foreground mt-1">
+                                Dependencies: {change.feature.dependencies.join(', ')}
+                              </p>
+                            )}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      }
+
+      case 'applying':
+        return (
+          <div className="flex flex-col items-center justify-center py-12">
+            <Spinner size="xl" className="mb-4" />
+            <p className="text-muted-foreground">Applying changes...</p>
+          </div>
+        );
+    }
+  };
+
+  // Get effective model entry (override or global default)
+  const effectiveModelEntry = modelOverride || normalizeEntry(phaseModels.backlogPlanningModel);
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Wand2 className="w-5 h-5 text-primary" />
+            {mode === 'review' ? 'Review Plan' : 'Plan Feature Changes'}
+          </DialogTitle>
+          <DialogDescription>
+            {mode === 'review'
+              ? 'Select which changes to apply to your features'
+              : 'Use AI to add, update, remove, or restructure your features'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4 overflow-y-auto">{renderContent()}</div>
+
+        <DialogFooter>
+          {mode === 'input' && (
+            <>
+              <div className="flex items-center gap-2 mr-auto">
+                <span className="text-xs text-muted-foreground">Model:</span>
+                <ModelOverrideTrigger
+                  currentModelEntry={effectiveModelEntry}
+                  onModelChange={setModelOverride}
+                  phase="backlogPlanningModel"
+                  size="sm"
+                  variant="button"
+                  isOverridden={modelOverride !== null}
+                />
+              </div>
+              <Button variant="outline" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button onClick={handleGenerate} disabled={!prompt.trim() || isGeneratingPlan}>
+                {isGeneratingPlan ? (
+                  <>
+                    <Spinner size="sm" className="mr-2" />
+                    Generating...
+                  </>
+                ) : (
+                  <>
+                    <Wand2 className="w-4 h-4 mr-2" />
+                    Apply Changes
+                  </>
+                )}
+              </Button>
+            </>
+          )}
+
+          {mode === 'review' && (
+            <>
+              <Button variant="outline" onClick={handleDiscard}>
+                Discard
+              </Button>
+              <Button variant="outline" onClick={onClose}>
+                Review Later
+              </Button>
+              <Button onClick={handleApply} disabled={selectedChanges.size === 0}>
+                <Check className="w-4 h-4 mr-2" />
+                Apply {selectedChanges.size} Change{selectedChanges.size !== 1 ? 's' : ''}
+              </Button>
+            </>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/branch-conflict-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/branch-conflict-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b20cfedff0f0a0f2273beb956162d61fe09d930b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/branch-conflict-dialog.tsx
@@ -0,0 +1,143 @@
+/**
+ * Dialog shown when a branch switch or stash-pop operation results in merge conflicts.
+ * Presents the user with two options:
+ * 1. Resolve Manually - leaves conflict markers in place
+ * 2. Resolve with AI - creates a feature task for AI-powered conflict resolution
+ *
+ * This dialog ensures the user can choose how to handle the conflict instead of
+ * automatically creating and starting an AI task.
+ */
+
+import { useCallback } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { AlertTriangle, Wrench, Sparkles } from 'lucide-react';
+import { toast } from 'sonner';
+import type { BranchSwitchConflictInfo, StashPopConflictInfo } from '../worktree-panel/types';
+
+export type BranchConflictType = 'branch-switch' | 'stash-pop';
+
+export type BranchConflictData =
+  | { type: 'branch-switch'; info: BranchSwitchConflictInfo }
+  | { type: 'stash-pop'; info: StashPopConflictInfo };
+
+interface BranchConflictDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  conflictData: BranchConflictData | null;
+  onResolveWithAI?: (conflictData: BranchConflictData) => void;
+}
+
+export function BranchConflictDialog({
+  open,
+  onOpenChange,
+  conflictData,
+  onResolveWithAI,
+}: BranchConflictDialogProps) {
+  const handleResolveManually = useCallback(() => {
+    toast.info('Conflict markers left in place', {
+      description: 'Edit the conflicting files to resolve conflicts manually.',
+      duration: 6000,
+    });
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  const handleResolveWithAI = useCallback(() => {
+    if (!conflictData || !onResolveWithAI) return;
+
+    onResolveWithAI(conflictData);
+    onOpenChange(false);
+  }, [conflictData, onResolveWithAI, onOpenChange]);
+
+  if (!conflictData) return null;
+
+  const isBranchSwitch = conflictData.type === 'branch-switch';
+  const branchName = isBranchSwitch ? conflictData.info.branchName : conflictData.info.branchName;
+
+  const description = isBranchSwitch ? (
+    <>
+      Merge conflicts occurred when switching from{' '}
+      <code className="font-mono bg-muted px-1 rounded">
+        {(conflictData.info as BranchSwitchConflictInfo).previousBranch}
+      </code>{' '}
+      to <code className="font-mono bg-muted px-1 rounded">{branchName}</code>. Local changes were
+      stashed before switching and reapplying them caused conflicts.
+    </>
+  ) : (
+    <>
+      The branch switch to <code className="font-mono bg-muted px-1 rounded">{branchName}</code>{' '}
+      failed and restoring the previously stashed local changes resulted in merge conflicts.
+    </>
+  );
+
+  const title = isBranchSwitch
+    ? 'Branch Switch Conflicts Detected'
+    : 'Stash Restore Conflicts Detected';
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[520px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="w-5 h-5 text-orange-500" />
+            {title}
+          </DialogTitle>
+          <DialogDescription asChild>
+            <div className="space-y-3">
+              <span className="block">{description}</span>
+
+              {!isBranchSwitch &&
+                (conflictData.info as StashPopConflictInfo).stashPopConflictMessage && (
+                  <div className="flex items-start gap-2 p-3 rounded-md bg-orange-500/10 border border-orange-500/20">
+                    <AlertTriangle className="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" />
+                    <span className="text-orange-500 text-sm">
+                      {(conflictData.info as StashPopConflictInfo).stashPopConflictMessage}
+                    </span>
+                  </div>
+                )}
+
+              <div className="mt-2 p-3 rounded-md bg-muted/50 border border-border">
+                <p className="text-sm text-muted-foreground font-medium mb-2">
+                  Choose how to resolve:
+                </p>
+                <ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
+                  <li>
+                    <strong>Resolve with AI</strong> &mdash; Creates a task to analyze and resolve
+                    conflicts automatically
+                  </li>
+                  <li>
+                    <strong>Resolve Manually</strong> &mdash; Leaves conflict markers in place for
+                    you to edit directly
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleResolveManually}>
+            <Wrench className="w-4 h-4 mr-2" />
+            Resolve Manually
+          </Button>
+          {onResolveWithAI && (
+            <Button
+              onClick={handleResolveWithAI}
+              className="bg-purple-600 hover:bg-purple-700 text-white"
+            >
+              <Sparkles className="w-4 h-4 mr-2" />
+              Resolve with AI
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/change-pr-number-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/change-pr-number-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2c461eb2c1596f0369da47036e7860082a19a049
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/change-pr-number-dialog.tsx
@@ -0,0 +1,197 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { GitPullRequest } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getElectronAPI } from '@/lib/electron';
+import { toast } from 'sonner';
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  pr?: {
+    number: number;
+    url: string;
+    title: string;
+    state: string;
+    createdAt: string;
+  };
+}
+
+interface ChangePRNumberDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  projectPath: string | null;
+  onChanged: () => void;
+}
+
+export function ChangePRNumberDialog({
+  open,
+  onOpenChange,
+  worktree,
+  projectPath,
+  onChanged,
+}: ChangePRNumberDialogProps) {
+  const [prNumberInput, setPrNumberInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Initialize with current PR number when dialog opens
+  useEffect(() => {
+    if (open && worktree?.pr?.number) {
+      setPrNumberInput(String(worktree.pr.number));
+    } else if (open) {
+      setPrNumberInput('');
+    }
+    setError(null);
+  }, [open, worktree]);
+
+  const handleSubmit = useCallback(async () => {
+    if (!worktree) return;
+
+    const trimmed = prNumberInput.trim();
+    if (!/^\d+$/.test(trimmed)) {
+      setError('Please enter a valid positive PR number');
+      return;
+    }
+    const prNumber = Number(trimmed);
+    if (prNumber <= 0) {
+      setError('Please enter a valid positive PR number');
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.updatePRNumber) {
+        setError('Worktree API not available');
+        return;
+      }
+
+      const result = await api.worktree.updatePRNumber(
+        worktree.path,
+        prNumber,
+        projectPath || undefined
+      );
+
+      if (result.success) {
+        const prInfo = result.result?.prInfo;
+        toast.success('PR tracking updated', {
+          description: prInfo?.title
+            ? `Now tracking PR #${prNumber}: ${prInfo.title}`
+            : `Now tracking PR #${prNumber}`,
+        });
+        onOpenChange(false);
+        onChanged();
+      } else {
+        setError(result.error || 'Failed to update PR number');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update PR number');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [worktree, prNumberInput, projectPath, onOpenChange, onChanged]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && !isLoading) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [isLoading, handleSubmit]
+  );
+
+  if (!worktree) return null;
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(isOpen) => {
+        if (!isLoading) {
+          onOpenChange(isOpen);
+        }
+      }}
+    >
+      <DialogContent className="sm:max-w-[400px]" onKeyDown={handleKeyDown}>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitPullRequest className="w-5 h-5" />
+            Change Tracked PR Number
+          </DialogTitle>
+          <DialogDescription>
+            Update which pull request number is tracked for{' '}
+            <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code>.
+            {worktree.pr && (
+              <span className="block mt-1 text-xs">
+                Currently tracking PR #{worktree.pr.number}
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-2 space-y-3">
+          <div className="space-y-2">
+            <Label htmlFor="pr-number">Pull Request Number</Label>
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground text-sm">#</span>
+              <Input
+                id="pr-number"
+                type="text"
+                inputMode="numeric"
+                placeholder="e.g. 42"
+                value={prNumberInput}
+                onChange={(e) => {
+                  setPrNumberInput(e.target.value);
+                  setError(null);
+                }}
+                disabled={isLoading}
+                autoFocus
+                className="flex-1"
+              />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Enter the GitHub PR number to associate with this worktree. The PR info will be
+              fetched from GitHub if available.
+            </p>
+          </div>
+
+          {error && <p className="text-sm text-destructive">{error}</p>}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={isLoading || !prNumberInput.trim()}>
+            {isLoading ? (
+              <>
+                <Spinner size="xs" className="mr-2" />
+                Updating...
+              </>
+            ) : (
+              <>
+                <GitPullRequest className="w-4 h-4 mr-2" />
+                Update PR
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/cherry-pick-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/cherry-pick-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8f49bf71ebbc5e1b77ac0423c07b05bc25fd63f7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/cherry-pick-dialog.tsx
@@ -0,0 +1,784 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  GitCommit,
+  AlertTriangle,
+  Wrench,
+  User,
+  Clock,
+  Copy,
+  Check,
+  Cherry,
+  ChevronDown,
+  ChevronRight,
+  FileText,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import type { WorktreeInfo, MergeConflictInfo } from '../worktree-panel/types';
+
+export interface CherryPickConflictInfo {
+  commitHashes: string[];
+  targetBranch: string;
+  targetWorktreePath: string;
+}
+
+interface RemoteInfo {
+  name: string;
+  url: string;
+  branches: Array<{
+    name: string;
+    fullRef: string;
+  }>;
+}
+
+interface CommitInfo {
+  hash: string;
+  shortHash: string;
+  author: string;
+  authorEmail: string;
+  date: string;
+  subject: string;
+  body: string;
+  files: string[];
+}
+
+interface CherryPickDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  onCherryPicked: () => void;
+  onCreateConflictResolutionFeature?: (conflictInfo: MergeConflictInfo) => void;
+}
+
+function formatRelativeDate(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSecs = Math.floor(diffMs / 1000);
+  const diffMins = Math.floor(diffSecs / 60);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  const diffWeeks = Math.floor(diffDays / 7);
+  const diffMonths = Math.floor(diffDays / 30);
+
+  if (diffSecs < 60) return 'just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  if (diffWeeks < 5) return `${diffWeeks}w ago`;
+  if (diffMonths < 12) return `${diffMonths}mo ago`;
+  return date.toLocaleDateString();
+}
+
+function CopyHashButton({ hash }: { hash: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(hash);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast.error('Failed to copy hash');
+    }
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="inline-flex items-center gap-1 font-mono text-[11px] bg-muted hover:bg-muted/80 px-1.5 py-0.5 rounded cursor-pointer transition-colors"
+      title={`Copy full hash: ${hash}`}
+    >
+      {copied ? (
+        <Check className="w-2.5 h-2.5 text-green-500" />
+      ) : (
+        <Copy className="w-2.5 h-2.5 text-muted-foreground" />
+      )}
+      <span className="text-muted-foreground">{hash.slice(0, 7)}</span>
+    </button>
+  );
+}
+
+type Step = 'select-branch' | 'select-commits' | 'conflict';
+
+export function CherryPickDialog({
+  open,
+  onOpenChange,
+  worktree,
+  onCherryPicked,
+  onCreateConflictResolutionFeature,
+}: CherryPickDialogProps) {
+  // Step management
+  const [step, setStep] = useState<Step>('select-branch');
+
+  // Branch selection state
+  const [remotes, setRemotes] = useState<RemoteInfo[]>([]);
+  const [localBranches, setLocalBranches] = useState<string[]>([]);
+  const [selectedRemote, setSelectedRemote] = useState<string>('');
+  const [selectedBranch, setSelectedBranch] = useState<string>('');
+  const [loadingBranches, setLoadingBranches] = useState(false);
+
+  // Commits state
+  const [commits, setCommits] = useState<CommitInfo[]>([]);
+  const [selectedCommitHashes, setSelectedCommitHashes] = useState<Set<string>>(new Set());
+  const [expandedCommits, setExpandedCommits] = useState<Set<string>>(new Set());
+  const [loadingCommits, setLoadingCommits] = useState(false);
+  const [loadingMoreCommits, setLoadingMoreCommits] = useState(false);
+  const [commitsError, setCommitsError] = useState<string | null>(null);
+  const [commitLimit, setCommitLimit] = useState(30);
+  const [hasMoreCommits, setHasMoreCommits] = useState(false);
+
+  // Ref to track the latest fetchCommits request and ignore stale responses
+  const fetchCommitsRequestRef = useRef(0);
+
+  // Cherry-pick state
+  const [isCherryPicking, setIsCherryPicking] = useState(false);
+
+  // Conflict state
+  const [conflictInfo, setConflictInfo] = useState<CherryPickConflictInfo | null>(null);
+
+  // All available branch options for the current remote selection
+  const branchOptions =
+    selectedRemote === '__local__'
+      ? localBranches.filter((b) => b !== worktree?.branch)
+      : (remotes.find((r) => r.name === selectedRemote)?.branches || []).map((b) => b.fullRef);
+
+  // Reset state when dialog opens
+  useEffect(() => {
+    if (open) {
+      setStep('select-branch');
+      setSelectedRemote('');
+      setSelectedBranch('');
+      setCommits([]);
+      setSelectedCommitHashes(new Set());
+      setExpandedCommits(new Set());
+      setConflictInfo(null);
+      setCommitsError(null);
+      setCommitLimit(30);
+      setHasMoreCommits(false);
+      setLoadingBranches(false);
+    }
+  }, [open]);
+
+  // Fetch remotes and local branches when dialog opens
+  useEffect(() => {
+    if (!open || !worktree) return;
+
+    let mounted = true;
+
+    const fetchBranchData = async () => {
+      setLoadingBranches(true);
+      try {
+        const api = getHttpApiClient();
+
+        // Fetch remotes and local branches in parallel
+        const [remotesResult, branchesResult] = await Promise.all([
+          api.worktree.listRemotes(worktree.path),
+          api.worktree.listBranches(worktree.path, false),
+        ]);
+
+        if (!mounted) return;
+
+        if (remotesResult.success && remotesResult.result) {
+          setRemotes(remotesResult.result.remotes);
+          // Default to first remote if available, otherwise local
+          if (remotesResult.result.remotes.length > 0) {
+            setSelectedRemote(remotesResult.result.remotes[0].name);
+          } else {
+            setSelectedRemote('__local__');
+          }
+        }
+
+        if (branchesResult.success && branchesResult.result) {
+          const branches = branchesResult.result.branches
+            .filter(
+              (b: { isRemote: boolean; name: string }) => !b.isRemote && b.name !== worktree.branch
+            )
+            .map((b: { name: string }) => b.name);
+          setLocalBranches(branches);
+        }
+      } catch (err) {
+        if (!mounted) return;
+        console.error('Failed to fetch branch data:', err);
+      } finally {
+        if (mounted) {
+          setLoadingBranches(false);
+        }
+      }
+    };
+
+    fetchBranchData();
+
+    return () => {
+      mounted = false;
+    };
+  }, [open, worktree]);
+
+  // Fetch commits when branch is selected
+  const fetchCommits = useCallback(
+    async (limit: number = 30, append: boolean = false) => {
+      if (!worktree || !selectedBranch) return;
+
+      // Increment the request counter and capture the current request ID
+      const requestId = ++fetchCommitsRequestRef.current;
+
+      if (append) {
+        setLoadingMoreCommits(true);
+      } else {
+        setLoadingCommits(true);
+        setCommitsError(null);
+        setCommits([]);
+        setSelectedCommitHashes(new Set());
+      }
+
+      try {
+        const api = getHttpApiClient();
+        const result = await api.worktree.getBranchCommitLog(worktree.path, selectedBranch, limit);
+
+        // Ignore stale responses from superseded requests
+        if (requestId !== fetchCommitsRequestRef.current) return;
+
+        if (result.success && result.result) {
+          setCommits(result.result.commits);
+          // If we got exactly the limit, there may be more commits
+          setHasMoreCommits(result.result.commits.length >= limit);
+        } else if (!append) {
+          setCommitsError(result.error || 'Failed to load commits');
+        }
+      } catch (err) {
+        // Ignore stale responses from superseded requests
+        if (requestId !== fetchCommitsRequestRef.current) return;
+        if (!append) {
+          setCommitsError(err instanceof Error ? err.message : 'Failed to load commits');
+        }
+      } finally {
+        // Only update loading state if this is still the current request
+        if (requestId === fetchCommitsRequestRef.current) {
+          setLoadingCommits(false);
+          setLoadingMoreCommits(false);
+        }
+      }
+    },
+    [worktree, selectedBranch]
+  );
+
+  // Handle proceeding from branch selection to commit selection
+  const handleProceedToCommits = useCallback(() => {
+    if (!selectedBranch) return;
+    setStep('select-commits');
+    fetchCommits(commitLimit);
+  }, [selectedBranch, fetchCommits, commitLimit]);
+
+  // Handle loading more commits
+  const handleLoadMore = useCallback(() => {
+    const newLimit = Math.min(commitLimit + 30, 100);
+    setCommitLimit(newLimit);
+    fetchCommits(newLimit, true);
+  }, [commitLimit, fetchCommits]);
+
+  // Toggle commit selection
+  const toggleCommitSelection = useCallback((hash: string) => {
+    setSelectedCommitHashes((prev) => {
+      const next = new Set(prev);
+      if (next.has(hash)) {
+        next.delete(hash);
+      } else {
+        next.add(hash);
+      }
+      return next;
+    });
+  }, []);
+
+  // Toggle commit file list expansion
+  const toggleCommitExpanded = useCallback((hash: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setExpandedCommits((prev) => {
+      const next = new Set(prev);
+      if (next.has(hash)) {
+        next.delete(hash);
+      } else {
+        next.add(hash);
+      }
+      return next;
+    });
+  }, []);
+
+  // Handle cherry-pick execution
+  const handleCherryPick = useCallback(async () => {
+    if (!worktree || selectedCommitHashes.size === 0) return;
+
+    setIsCherryPicking(true);
+    try {
+      const api = getHttpApiClient();
+      // Order commits from oldest to newest (reverse of display order)
+      // so they're applied in chronological order
+      const orderedHashes = commits
+        .filter((c) => selectedCommitHashes.has(c.hash))
+        .reverse()
+        .map((c) => c.hash);
+
+      const result = await api.worktree.cherryPick(worktree.path, orderedHashes);
+
+      if (result.success) {
+        toast.success(`Cherry-picked ${orderedHashes.length} commit(s)`, {
+          description: `Successfully applied to ${worktree.branch}`,
+        });
+        onCherryPicked();
+        onOpenChange(false);
+      } else {
+        // Check for conflicts
+        const errorMessage = result.error || '';
+        const hasConflicts = errorMessage.toLowerCase().includes('conflict') || result.hasConflicts;
+
+        if (hasConflicts && onCreateConflictResolutionFeature) {
+          setConflictInfo({
+            commitHashes: orderedHashes,
+            targetBranch: worktree.branch,
+            targetWorktreePath: worktree.path,
+          });
+          setStep('conflict');
+          toast.error('Cherry-pick conflicts detected', {
+            description: 'The cherry-pick was aborted due to conflicts. No changes were applied.',
+          });
+        } else {
+          toast.error('Cherry-pick failed', {
+            description: result.error,
+          });
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      const hasConflicts =
+        errorMessage.toLowerCase().includes('conflict') ||
+        errorMessage.toLowerCase().includes('cherry-pick failed');
+
+      if (hasConflicts && onCreateConflictResolutionFeature) {
+        const orderedHashes = commits
+          .filter((c) => selectedCommitHashes.has(c.hash))
+          .reverse()
+          .map((c) => c.hash);
+        setConflictInfo({
+          commitHashes: orderedHashes,
+          targetBranch: worktree.branch,
+          targetWorktreePath: worktree.path,
+        });
+        setStep('conflict');
+        toast.error('Cherry-pick conflicts detected', {
+          description: 'The cherry-pick was aborted due to conflicts. No changes were applied.',
+        });
+      } else {
+        toast.error('Cherry-pick failed', {
+          description: errorMessage,
+        });
+      }
+    } finally {
+      setIsCherryPicking(false);
+    }
+  }, [
+    worktree,
+    selectedCommitHashes,
+    commits,
+    onCherryPicked,
+    onOpenChange,
+    onCreateConflictResolutionFeature,
+  ]);
+
+  // Handle creating a conflict resolution feature
+  const handleCreateConflictResolutionFeature = useCallback(() => {
+    if (conflictInfo && onCreateConflictResolutionFeature) {
+      onCreateConflictResolutionFeature({
+        sourceBranch: selectedBranch,
+        targetBranch: conflictInfo.targetBranch,
+        targetWorktreePath: conflictInfo.targetWorktreePath,
+        operationType: 'cherry-pick',
+      });
+      onOpenChange(false);
+    }
+  }, [conflictInfo, selectedBranch, onCreateConflictResolutionFeature, onOpenChange]);
+
+  if (!worktree) return null;
+
+  // Conflict resolution UI
+  if (step === 'conflict' && conflictInfo) {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="w-5 h-5 text-orange-500" />
+              Cherry-Pick Conflicts Detected
+            </DialogTitle>
+            <DialogDescription asChild>
+              <div className="space-y-4">
+                <span className="block">
+                  There are conflicts when cherry-picking commits from{' '}
+                  <code className="font-mono bg-muted px-1 rounded">{selectedBranch}</code> into{' '}
+                  <code className="font-mono bg-muted px-1 rounded">
+                    {conflictInfo.targetBranch}
+                  </code>
+                  .
+                </span>
+
+                <div className="flex items-start gap-2 p-3 rounded-md bg-orange-500/10 border border-orange-500/20">
+                  <AlertTriangle className="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" />
+                  <span className="text-orange-500 text-sm">
+                    The cherry-pick could not be completed automatically. You can create a feature
+                    task to resolve the conflicts in the{' '}
+                    <code className="font-mono bg-muted px-0.5 rounded">
+                      {conflictInfo.targetBranch}
+                    </code>{' '}
+                    branch.
+                  </span>
+                </div>
+
+                <div className="mt-2 p-3 rounded-md bg-muted/50 border border-border">
+                  <p className="text-sm text-muted-foreground">
+                    This will create a high-priority feature task that will:
+                  </p>
+                  <ul className="text-sm text-muted-foreground mt-2 list-disc list-inside space-y-1">
+                    <li>
+                      Cherry-pick the selected commit(s) from{' '}
+                      <code className="font-mono bg-muted px-0.5 rounded">{selectedBranch}</code>
+                    </li>
+                    <li>Resolve any cherry-pick conflicts</li>
+                    <li>Ensure the code compiles and tests pass</li>
+                  </ul>
+                </div>
+              </div>
+            </DialogDescription>
+          </DialogHeader>
+
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setStep('select-commits')}>
+              Back
+            </Button>
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleCreateConflictResolutionFeature}
+              className="bg-purple-600 hover:bg-purple-700 text-white"
+            >
+              <Wrench className="w-4 h-4 mr-2" />
+              Create Resolve Conflicts Feature
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // Step 2: Select commits
+  if (step === 'select-commits') {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="w-full h-full max-w-full max-h-full sm:w-[90vw] sm:max-w-[640px] sm:max-h-[85dvh] sm:h-auto sm:rounded-xl rounded-none flex flex-col dialog-fullscreen-mobile">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Cherry className="w-5 h-5 text-foreground" />
+              Cherry Pick Commits
+            </DialogTitle>
+            <DialogDescription>
+              Select commits from{' '}
+              <code className="font-mono bg-muted px-1 rounded">{selectedBranch}</code> to apply to{' '}
+              <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code>
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 sm:min-h-[400px] sm:max-h-[60vh] overflow-y-auto scrollbar-visible -mx-6 -mb-6">
+            <div className="h-full px-6 pb-6">
+              {loadingCommits && (
+                <div className="flex items-center justify-center py-12">
+                  <Spinner size="md" />
+                  <span className="ml-2 text-sm text-muted-foreground">Loading commits...</span>
+                </div>
+              )}
+
+              {commitsError && (
+                <div className="flex items-center justify-center py-12">
+                  <p className="text-sm text-destructive">{commitsError}</p>
+                </div>
+              )}
+
+              {!loadingCommits && !commitsError && commits.length === 0 && (
+                <div className="flex items-center justify-center py-12">
+                  <p className="text-sm text-muted-foreground">No commits found on this branch</p>
+                </div>
+              )}
+
+              {!loadingCommits && !commitsError && commits.length > 0 && (
+                <div className="space-y-0.5 mt-2">
+                  {commits.map((commit, index) => {
+                    const isSelected = selectedCommitHashes.has(commit.hash);
+                    const isExpanded = expandedCommits.has(commit.hash);
+                    const hasFiles = commit.files && commit.files.length > 0;
+                    return (
+                      <div
+                        key={commit.hash}
+                        className={cn(
+                          'group relative rounded-md transition-colors',
+                          isSelected
+                            ? 'bg-primary/10 border border-primary/30'
+                            : 'border border-transparent',
+                          index === 0 && !isSelected && 'bg-muted/30'
+                        )}
+                      >
+                        <div
+                          onClick={() => toggleCommitSelection(commit.hash)}
+                          className={cn(
+                            'flex gap-3 py-2.5 px-3 cursor-pointer rounded-md transition-colors',
+                            !isSelected && 'hover:bg-muted/50'
+                          )}
+                        >
+                          {/* Checkbox */}
+                          <div className="flex items-start pt-1 shrink-0">
+                            <Checkbox
+                              checked={isSelected}
+                              onCheckedChange={() => toggleCommitSelection(commit.hash)}
+                              onClick={(e) => e.stopPropagation()}
+                              className="mt-0.5"
+                            />
+                          </div>
+
+                          {/* Commit content */}
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-start justify-between gap-2">
+                              <p className="text-sm font-medium leading-snug break-words">
+                                {commit.subject}
+                              </p>
+                              <CopyHashButton hash={commit.hash} />
+                            </div>
+                            {commit.body && (
+                              <p className="text-xs text-muted-foreground mt-1 whitespace-pre-wrap break-words line-clamp-2">
+                                {commit.body}
+                              </p>
+                            )}
+                            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1.5 text-xs text-muted-foreground">
+                              <span className="inline-flex items-center gap-1">
+                                <User className="w-3 h-3" />
+                                {commit.author}
+                              </span>
+                              <span className="inline-flex items-center gap-1">
+                                <Clock className="w-3 h-3" />
+                                <time
+                                  dateTime={commit.date}
+                                  title={new Date(commit.date).toLocaleString()}
+                                >
+                                  {formatRelativeDate(commit.date)}
+                                </time>
+                              </span>
+                              {hasFiles && (
+                                <button
+                                  onClick={(e) => toggleCommitExpanded(commit.hash, e)}
+                                  className="inline-flex items-center gap-1 hover:text-foreground transition-colors cursor-pointer"
+                                >
+                                  {isExpanded ? (
+                                    <ChevronDown className="w-3 h-3" />
+                                  ) : (
+                                    <ChevronRight className="w-3 h-3" />
+                                  )}
+                                  <FileText className="w-3 h-3" />
+                                  {commit.files.length} file{commit.files.length !== 1 ? 's' : ''}
+                                </button>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Expanded file list */}
+                        {isExpanded && hasFiles && (
+                          <div className="border-t mx-3 px-3 py-2 bg-muted/30 rounded-b-md ml-8">
+                            <div className="space-y-0.5">
+                              {commit.files.map((file) => (
+                                <div
+                                  key={file}
+                                  className="flex items-center gap-2 text-xs text-muted-foreground py-0.5"
+                                >
+                                  <FileText className="w-3 h-3 shrink-0" />
+                                  <span className="font-mono break-all">{file}</span>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+
+                  {/* Load More button */}
+                  {hasMoreCommits && commitLimit < 100 && (
+                    <div className="flex justify-center pt-3 pb-1">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleLoadMore();
+                        }}
+                        disabled={loadingMoreCommits}
+                        className="text-xs text-muted-foreground hover:text-foreground"
+                      >
+                        {loadingMoreCommits ? (
+                          <>
+                            <Spinner size="sm" className="mr-2" />
+                            Loading...
+                          </>
+                        ) : (
+                          <>
+                            <ChevronDown className="w-3.5 h-3.5 mr-1.5" />
+                            Load More Commits
+                          </>
+                        )}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <DialogFooter className="mt-4 pt-4 border-t">
+            <Button
+              variant="ghost"
+              onClick={() => {
+                setStep('select-branch');
+                setSelectedBranch('');
+              }}
+            >
+              Back
+            </Button>
+            <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={isCherryPicking}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleCherryPick}
+              disabled={selectedCommitHashes.size === 0 || isCherryPicking}
+            >
+              {isCherryPicking ? (
+                <>
+                  <Spinner size="sm" variant="foreground" className="mr-2" />
+                  Cherry Picking...
+                </>
+              ) : (
+                <>
+                  <Cherry className="w-4 h-4 mr-2" />
+                  Cherry Pick
+                  {selectedCommitHashes.size > 0 ? ` (${selectedCommitHashes.size})` : ''}
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // Step 1: Select branch (and optionally remote)
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Cherry className="w-5 h-5 text-foreground" />
+            Cherry Pick
+          </DialogTitle>
+          <DialogDescription asChild>
+            <div className="space-y-4">
+              <span className="block">
+                Select a branch to cherry-pick commits from into{' '}
+                <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code>
+              </span>
+
+              {loadingBranches ? (
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Spinner size="sm" />
+                  Loading branches...
+                </div>
+              ) : (
+                <>
+                  {/* Remote selector - only show if there are remotes */}
+                  {remotes.length > 0 && (
+                    <div className="space-y-2">
+                      <Label className="text-sm text-foreground">Source</Label>
+                      <Select
+                        value={selectedRemote}
+                        onValueChange={(value) => {
+                          setSelectedRemote(value);
+                          setSelectedBranch('');
+                        }}
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Select source..." />
+                        </SelectTrigger>
+                        <SelectContent className="text-foreground">
+                          <SelectItem value="__local__">Local Branches</SelectItem>
+                          {remotes.map((remote) => (
+                            <SelectItem key={remote.name} value={remote.name}>
+                              {remote.name} ({remote.url})
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+
+                  {/* Branch selector */}
+                  <div className="space-y-2">
+                    <Label className="text-sm text-foreground">Branch</Label>
+                    {branchOptions.length === 0 ? (
+                      <p className="text-sm text-muted-foreground">No other branches available</p>
+                    ) : (
+                      <Select value={selectedBranch} onValueChange={setSelectedBranch}>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Select a branch..." />
+                        </SelectTrigger>
+                        <SelectContent className="text-foreground">
+                          {branchOptions.map((branch) => (
+                            <SelectItem key={branch} value={branch}>
+                              {branch}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleProceedToCommits} disabled={!selectedBranch || loadingBranches}>
+            <GitCommit className="w-4 h-4 mr-2" />
+            View Commits
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/commit-worktree-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/commit-worktree-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..10ed992b26c2121ea4526f03b2740f534bc825b6
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/commit-worktree-dialog.tsx
@@ -0,0 +1,1016 @@
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  GitCommit,
+  GitMerge,
+  Sparkles,
+  FilePlus,
+  FileX,
+  FilePen,
+  FileText,
+  File,
+  ChevronDown,
+  ChevronRight,
+  Upload,
+  RefreshCw,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getElectronAPI } from '@/lib/electron';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import { useAppStore } from '@/store/app-store';
+import { resolveModelString } from '@automaker/model-resolver';
+import { cn } from '@/lib/utils';
+import { TruncatedFilePath } from '@/components/ui/truncated-file-path';
+import { ModelOverrideTrigger, useModelOverride } from '@/components/shared';
+import type { FileStatus, MergeStateInfo } from '@/types/electron';
+import { parseDiff, type ParsedFileDiff } from '@/lib/diff-utils';
+
+interface RemoteInfo {
+  name: string;
+  url: string;
+}
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface CommitWorktreeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  onCommitted: () => void;
+}
+
+const getFileIcon = (status: string) => {
+  switch (status) {
+    case 'A':
+    case '?':
+      return <FilePlus className="w-3.5 h-3.5 text-green-500 flex-shrink-0" />;
+    case 'D':
+      return <FileX className="w-3.5 h-3.5 text-red-500 flex-shrink-0" />;
+    case 'M':
+    case 'U':
+      return <FilePen className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />;
+    case 'R':
+    case 'C':
+      return <File className="w-3.5 h-3.5 text-blue-500 flex-shrink-0" />;
+    default:
+      return <FileText className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />;
+  }
+};
+
+const getStatusLabel = (status: string) => {
+  switch (status) {
+    case 'A':
+      return 'Added';
+    case '?':
+      return 'Untracked';
+    case 'D':
+      return 'Deleted';
+    case 'M':
+      return 'Modified';
+    case 'U':
+      return 'Updated';
+    case 'R':
+      return 'Renamed';
+    case 'C':
+      return 'Copied';
+    default:
+      return 'Changed';
+  }
+};
+
+const getStatusBadgeColor = (status: string) => {
+  switch (status) {
+    case 'A':
+    case '?':
+      return 'bg-green-500/20 text-green-400 border-green-500/30';
+    case 'D':
+      return 'bg-red-500/20 text-red-400 border-red-500/30';
+    case 'M':
+    case 'U':
+      return 'bg-amber-500/20 text-amber-400 border-amber-500/30';
+    case 'R':
+    case 'C':
+      return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+    default:
+      return 'bg-muted text-muted-foreground border-border';
+  }
+};
+
+const getMergeTypeLabel = (mergeType?: string) => {
+  switch (mergeType) {
+    case 'both-modified':
+      return 'Both Modified';
+    case 'added-by-us':
+      return 'Added by Us';
+    case 'added-by-them':
+      return 'Added by Them';
+    case 'deleted-by-us':
+      return 'Deleted by Us';
+    case 'deleted-by-them':
+      return 'Deleted by Them';
+    case 'both-added':
+      return 'Both Added';
+    case 'both-deleted':
+      return 'Both Deleted';
+    default:
+      return 'Merge';
+  }
+};
+
+function DiffLine({
+  type,
+  content,
+  lineNumber,
+}: {
+  type: 'context' | 'addition' | 'deletion' | 'header';
+  content: string;
+  lineNumber?: { old?: number; new?: number };
+}) {
+  const bgClass = {
+    context: 'bg-transparent',
+    addition: 'bg-green-500/10',
+    deletion: 'bg-red-500/10',
+    header: 'bg-blue-500/10',
+  };
+
+  const textClass = {
+    context: 'text-foreground-secondary',
+    addition: 'text-green-400',
+    deletion: 'text-red-400',
+    header: 'text-blue-400',
+  };
+
+  const prefix = {
+    context: ' ',
+    addition: '+',
+    deletion: '-',
+    header: '',
+  };
+
+  if (type === 'header') {
+    return (
+      <div className={cn('px-2 py-1 font-mono text-xs', bgClass[type], textClass[type])}>
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('flex font-mono text-xs', bgClass[type])}>
+      <span className="w-10 flex-shrink-0 text-right pr-1.5 text-muted-foreground select-none border-r border-border-glass text-[10px]">
+        {lineNumber?.old ?? ''}
+      </span>
+      <span className="w-10 flex-shrink-0 text-right pr-1.5 text-muted-foreground select-none border-r border-border-glass text-[10px]">
+        {lineNumber?.new ?? ''}
+      </span>
+      <span className={cn('w-4 flex-shrink-0 text-center select-none', textClass[type])}>
+        {prefix[type]}
+      </span>
+      <span className={cn('flex-1 px-1.5 whitespace-pre-wrap break-all', textClass[type])}>
+        {content || '\u00A0'}
+      </span>
+    </div>
+  );
+}
+
+export function CommitWorktreeDialog({
+  open,
+  onOpenChange,
+  worktree,
+  onCommitted,
+}: CommitWorktreeDialogProps) {
+  const [message, setMessage] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const enableAiCommitMessages = useAppStore((state) => state.enableAiCommitMessages);
+
+  // Commit message model override
+  const commitModelOverride = useModelOverride({ phase: 'commitMessageModel' });
+  const { effectiveModel: commitEffectiveModel, effectiveModelEntry: commitEffectiveModelEntry } =
+    commitModelOverride;
+
+  // File selection state
+  const [files, setFiles] = useState<FileStatus[]>([]);
+  const [diffContent, setDiffContent] = useState('');
+  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set());
+  const [expandedFile, setExpandedFile] = useState<string | null>(null);
+  const [isLoadingDiffs, setIsLoadingDiffs] = useState(false);
+  const [mergeState, setMergeState] = useState<MergeStateInfo | undefined>(undefined);
+
+  // Push after commit state
+  const [pushAfterCommit, setPushAfterCommit] = useState(false);
+  const [remotes, setRemotes] = useState<RemoteInfo[]>([]);
+  const [selectedRemote, setSelectedRemote] = useState<string>('');
+  const [isLoadingRemotes, setIsLoadingRemotes] = useState(false);
+  const [isPushing, setIsPushing] = useState(false);
+  const [remotesFetched, setRemotesFetched] = useState(false);
+  const [remotesFetchError, setRemotesFetchError] = useState<string | null>(null);
+  // Track whether the commit already succeeded so retries can skip straight to push
+  const [commitSucceeded, setCommitSucceeded] = useState(false);
+
+  // Parse diffs
+  const parsedDiffs = useMemo(() => parseDiff(diffContent), [diffContent]);
+
+  // Create a map of file path to parsed diff for quick lookup
+  const diffsByFile = useMemo(() => {
+    const map = new Map<string, ParsedFileDiff>();
+    for (const diff of parsedDiffs) {
+      map.set(diff.filePath, diff);
+    }
+    return map;
+  }, [parsedDiffs]);
+
+  // Fetch remotes when push option is enabled
+  const fetchRemotesForWorktree = useCallback(
+    async (worktreePath: string, signal?: { cancelled: boolean }) => {
+      setIsLoadingRemotes(true);
+      setRemotesFetchError(null);
+      try {
+        const api = getElectronAPI();
+        if (api?.worktree?.listRemotes) {
+          const result = await api.worktree.listRemotes(worktreePath);
+          if (signal?.cancelled) return;
+          setRemotesFetched(true);
+          if (result.success && result.result) {
+            const remoteInfos = result.result.remotes.map((r) => ({
+              name: r.name,
+              url: r.url,
+            }));
+            setRemotes(remoteInfos);
+            // Auto-select 'origin' if available, otherwise first remote
+            if (remoteInfos.length > 0) {
+              const defaultRemote = remoteInfos.find((r) => r.name === 'origin') || remoteInfos[0];
+              setSelectedRemote(defaultRemote.name);
+            }
+          }
+        } else {
+          // API not available — mark fetch as complete with an error so the UI
+          // shows feedback instead of remaining in an empty/loading state.
+          setRemotesFetchError('Remote listing not available');
+          setRemotesFetched(true);
+          return;
+        }
+      } catch (err) {
+        if (signal?.cancelled) return;
+        // Don't mark as successfully fetched — show an error with retry instead
+        setRemotesFetchError(err instanceof Error ? err.message : 'Failed to fetch remotes');
+        console.warn('Failed to fetch remotes:', err);
+      } finally {
+        if (!signal?.cancelled) setIsLoadingRemotes(false);
+      }
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (pushAfterCommit && worktree && !remotesFetched && !remotesFetchError) {
+      const signal = { cancelled: false };
+      fetchRemotesForWorktree(worktree.path, signal);
+      return () => {
+        signal.cancelled = true;
+      };
+    }
+  }, [pushAfterCommit, worktree, remotesFetched, remotesFetchError, fetchRemotesForWorktree]);
+
+  // Load diffs when dialog opens
+  useEffect(() => {
+    if (open && worktree) {
+      setIsLoadingDiffs(true);
+      setFiles([]);
+      setDiffContent('');
+      setSelectedFiles(new Set());
+      setExpandedFile(null);
+      setMergeState(undefined);
+      // Reset push state
+      setPushAfterCommit(false);
+      setRemotes([]);
+      setSelectedRemote('');
+      setIsPushing(false);
+      setRemotesFetched(false);
+      setRemotesFetchError(null);
+      setCommitSucceeded(false);
+
+      let cancelled = false;
+
+      const loadDiffs = async () => {
+        try {
+          const api = getElectronAPI();
+          if (api?.git?.getDiffs) {
+            const result = await api.git.getDiffs(worktree.path);
+            if (result.success) {
+              const fileList = result.files ?? [];
+              // Sort merge-affected files first when a merge is in progress
+              if (result.mergeState?.isMerging) {
+                const mergeSet = new Set(result.mergeState.mergeAffectedFiles);
+                fileList.sort((a, b) => {
+                  const aIsMerge = mergeSet.has(a.path) || (a.isMergeAffected ?? false);
+                  const bIsMerge = mergeSet.has(b.path) || (b.isMergeAffected ?? false);
+                  if (aIsMerge && !bIsMerge) return -1;
+                  if (!aIsMerge && bIsMerge) return 1;
+                  return 0;
+                });
+              }
+              if (!cancelled) setFiles(fileList);
+              if (!cancelled) setDiffContent(result.diff ?? '');
+              if (!cancelled) setMergeState(result.mergeState);
+              // If any files are already staged, pre-select only staged files
+              // Otherwise select all files by default
+              const stagedFiles = fileList.filter((f) => {
+                const idx = f.indexStatus ?? ' ';
+                return idx !== ' ' && idx !== '?';
+              });
+              if (!cancelled) {
+                if (stagedFiles.length > 0) {
+                  // Also include untracked files that are staged (A status)
+                  setSelectedFiles(new Set(stagedFiles.map((f) => f.path)));
+                } else {
+                  setSelectedFiles(new Set(fileList.map((f) => f.path)));
+                }
+              }
+            } else {
+              const errorMsg = result.error ?? 'Failed to load diffs';
+              console.warn('Failed to load diffs for commit dialog:', errorMsg);
+              if (!cancelled) {
+                setError(errorMsg);
+                toast.error(errorMsg);
+              }
+            }
+          }
+        } catch (err) {
+          console.error('Failed to load diffs for commit dialog:', err);
+          if (!cancelled) {
+            const errorMsg = err instanceof Error ? err.message : 'Failed to load diffs';
+            setError(errorMsg);
+            toast.error(errorMsg);
+          }
+        } finally {
+          if (!cancelled) setIsLoadingDiffs(false);
+        }
+      };
+
+      loadDiffs();
+
+      return () => {
+        cancelled = true;
+      };
+    }
+  }, [open, worktree]);
+
+  const handleToggleFile = useCallback((filePath: string) => {
+    setSelectedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(filePath)) {
+        next.delete(filePath);
+      } else {
+        next.add(filePath);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleToggleAll = useCallback(() => {
+    setSelectedFiles((prev) => {
+      if (prev.size === files.length) {
+        return new Set();
+      }
+      return new Set(files.map((f) => f.path));
+    });
+  }, [files]);
+
+  const handleFileClick = useCallback((filePath: string) => {
+    setExpandedFile((prev) => (prev === filePath ? null : filePath));
+  }, []);
+
+  /** Shared push helper — returns true if the push succeeded */
+  const performPush = async (
+    api: ReturnType<typeof getElectronAPI>,
+    worktreePath: string,
+    remoteName: string
+  ): Promise<boolean> => {
+    if (!api?.worktree?.push) {
+      toast.error('Push API not available');
+      return false;
+    }
+    setIsPushing(true);
+    try {
+      const pushResult = await api.worktree.push(worktreePath, false, remoteName);
+      if (pushResult.success && pushResult.result) {
+        toast.success('Pushed to remote', {
+          description: pushResult.result.message,
+        });
+        return true;
+      } else {
+        toast.error(pushResult.error || 'Failed to push to remote');
+        return false;
+      }
+    } catch (pushErr) {
+      toast.error(pushErr instanceof Error ? pushErr.message : 'Failed to push to remote');
+      return false;
+    } finally {
+      setIsPushing(false);
+    }
+  };
+
+  const handleCommit = async () => {
+    if (!worktree) return;
+
+    const api = getElectronAPI();
+
+    // If commit already succeeded on a previous attempt, skip straight to push (or close if no push needed)
+    if (commitSucceeded) {
+      if (pushAfterCommit && selectedRemote) {
+        const ok = await performPush(api, worktree.path, selectedRemote);
+        if (ok) {
+          onCommitted();
+          onOpenChange(false);
+          setMessage('');
+        }
+      } else {
+        onCommitted();
+        onOpenChange(false);
+        setMessage('');
+      }
+      return;
+    }
+
+    if (!message.trim() || selectedFiles.size === 0) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      if (!api?.worktree?.commit) {
+        setError('Worktree API not available');
+        return;
+      }
+
+      // Pass selected files if not all files are selected
+      const filesToCommit =
+        selectedFiles.size === files.length ? undefined : Array.from(selectedFiles);
+
+      const result = await api.worktree.commit(worktree.path, message, filesToCommit);
+
+      if (result.success && result.result) {
+        if (result.result.committed) {
+          setCommitSucceeded(true);
+          toast.success('Changes committed', {
+            description: `Commit ${result.result.commitHash} on ${result.result.branch}`,
+          });
+
+          // Push after commit if enabled
+          let pushSucceeded = false;
+          if (pushAfterCommit && selectedRemote) {
+            pushSucceeded = await performPush(api, worktree.path, selectedRemote);
+          }
+
+          // Only close the dialog when no push was requested or the push completed successfully.
+          // If push failed, keep the dialog open so the user can retry.
+          if (!pushAfterCommit || pushSucceeded) {
+            onCommitted();
+            onOpenChange(false);
+            setMessage('');
+          } else {
+            // Commit succeeded but push failed — notify parent of commit but keep dialog open for retry
+            onCommitted();
+          }
+        } else {
+          toast.info('No changes to commit', {
+            description: result.result.message,
+          });
+        }
+      } else {
+        setError(result.error || 'Failed to commit changes');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to commit');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // When the commit succeeded but push failed, allow retrying the push without
+  // requiring a commit message or file selection.
+  const isPushRetry = commitSucceeded && pushAfterCommit && !isPushing;
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (
+      e.key === 'Enter' &&
+      (e.metaKey || e.ctrlKey) &&
+      !isLoading &&
+      !isPushing &&
+      !isGenerating
+    ) {
+      if (isPushRetry) {
+        // Push retry only needs a selected remote
+        if (selectedRemote) {
+          handleCommit();
+        }
+      } else if (
+        message.trim() &&
+        selectedFiles.size > 0 &&
+        !(pushAfterCommit && !selectedRemote)
+      ) {
+        handleCommit();
+      }
+    }
+  };
+
+  // Generate AI commit message
+  const generateCommitMessage = useCallback(async () => {
+    if (!worktree) return;
+
+    setIsGenerating(true);
+    try {
+      const resolvedCommitModel = resolveModelString(commitEffectiveModel);
+      const api = getHttpApiClient();
+      const result = await api.worktree.generateCommitMessage(
+        worktree.path,
+        resolvedCommitModel,
+        commitEffectiveModelEntry?.thinkingLevel,
+        commitEffectiveModelEntry?.providerId
+      );
+
+      if (result.success && result.message) {
+        setMessage(result.message);
+      } else {
+        console.warn('Failed to generate commit message:', result.error);
+        toast.error('Failed to generate commit message', {
+          description: result.error || 'Unknown error',
+        });
+      }
+    } catch (err) {
+      console.warn('Error generating commit message:', err);
+      toast.error('Failed to generate commit message', {
+        description: err instanceof Error ? err.message : 'Unknown error',
+      });
+    } finally {
+      setIsGenerating(false);
+    }
+  }, [worktree, commitEffectiveModel, commitEffectiveModelEntry]);
+
+  // Keep a stable ref to generateCommitMessage so the open-dialog effect
+  // doesn't re-fire (and erase user edits) when the model override changes.
+  const generateCommitMessageRef = useRef(generateCommitMessage);
+  useEffect(() => {
+    generateCommitMessageRef.current = generateCommitMessage;
+  });
+
+  // Generate AI commit message when dialog opens (if enabled)
+  useEffect(() => {
+    if (open && worktree) {
+      // Reset state
+      setMessage('');
+      setError(null);
+
+      if (!enableAiCommitMessages) {
+        return;
+      }
+
+      generateCommitMessageRef.current();
+    }
+  }, [open, worktree, enableAiCommitMessages]);
+
+  if (!worktree) return null;
+
+  const allSelected = selectedFiles.size === files.length && files.length > 0;
+
+  // Prevent the dialog from being dismissed while a push or generation is in progress.
+  // Overlay clicks and Escape key both route through onOpenChange(false); we
+  // intercept those here so the UI stays open until the operation completes.
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen && (isLoading || isPushing || isGenerating)) {
+      // Ignore close requests during an active commit, push, or generation.
+      return;
+    }
+    onOpenChange(nextOpen);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-[700px] max-h-[85vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitCommit className="w-5 h-5" />
+            Commit Changes
+          </DialogTitle>
+          <DialogDescription>
+            Commit changes in the{' '}
+            <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code> worktree.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3 py-2 min-h-0 flex-1 overflow-hidden">
+          {/* Merge state banner */}
+          {mergeState?.isMerging && (
+            <div className="flex items-start gap-2 p-3 rounded-md bg-purple-500/10 border border-purple-500/20">
+              <GitMerge className="w-4 h-4 text-purple-500 mt-0.5 flex-shrink-0" />
+              <div className="text-sm">
+                <span className="font-medium text-purple-400">
+                  {mergeState.mergeOperationType === 'cherry-pick'
+                    ? 'Cherry-pick'
+                    : mergeState.mergeOperationType === 'rebase'
+                      ? 'Rebase'
+                      : 'Merge'}{' '}
+                  in progress
+                </span>
+                {mergeState.conflictFiles.length > 0 ? (
+                  <span className="text-purple-400/80 ml-1">
+                    &mdash; {mergeState.conflictFiles.length} file
+                    {mergeState.conflictFiles.length !== 1 ? 's' : ''} with conflicts
+                  </span>
+                ) : mergeState.isCleanMerge ? (
+                  <span className="text-purple-400/80 ml-1">
+                    &mdash; Clean merge, {mergeState.mergeAffectedFiles.length} file
+                    {mergeState.mergeAffectedFiles.length !== 1 ? 's' : ''} affected
+                  </span>
+                ) : null}
+              </div>
+            </div>
+          )}
+
+          {/* File Selection */}
+          <div className="flex flex-col min-h-0">
+            <div className="flex items-center justify-between mb-1.5">
+              <Label className="text-sm font-medium flex items-center gap-2">
+                Files to commit
+                {isLoadingDiffs ? (
+                  <Spinner size="sm" />
+                ) : (
+                  <span className="text-xs text-muted-foreground font-normal">
+                    ({selectedFiles.size}/{files.length} selected)
+                  </span>
+                )}
+              </Label>
+              {files.length > 0 && (
+                <button
+                  onClick={handleToggleAll}
+                  className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {allSelected ? 'Deselect all' : 'Select all'}
+                </button>
+              )}
+            </div>
+
+            {isLoadingDiffs ? (
+              <div className="flex items-center justify-center py-6 text-muted-foreground border border-border rounded-lg">
+                <Spinner size="sm" className="mr-2" />
+                <span className="text-sm">Loading changes...</span>
+              </div>
+            ) : files.length === 0 ? (
+              <div className="flex items-center justify-center py-6 text-muted-foreground border border-border rounded-lg">
+                <span className="text-sm">No changes detected</span>
+              </div>
+            ) : (
+              <div className="border border-border rounded-lg overflow-hidden max-h-[300px] overflow-y-auto scrollbar-visible">
+                {files.map((file) => {
+                  const isChecked = selectedFiles.has(file.path);
+                  const isExpanded = expandedFile === file.path;
+                  const fileDiff = diffsByFile.get(file.path);
+                  const additions = fileDiff?.additions ?? 0;
+                  const deletions = fileDiff?.deletions ?? 0;
+                  // Determine staging state from index/worktree status
+                  const idx = file.indexStatus ?? ' ';
+                  const wt = file.workTreeStatus ?? ' ';
+                  const isStaged = idx !== ' ' && idx !== '?';
+                  const isUnstaged = wt !== ' ' && wt !== '?';
+                  const isUntracked = idx === '?' && wt === '?';
+                  const isMergeFile =
+                    file.isMergeAffected ||
+                    (mergeState?.mergeAffectedFiles?.includes(file.path) ?? false);
+
+                  return (
+                    <div
+                      key={file.path}
+                      className={cn(
+                        'border-b last:border-b-0',
+                        isMergeFile ? 'border-purple-500/30' : 'border-border'
+                      )}
+                    >
+                      <div
+                        className={cn(
+                          'flex items-center gap-2 px-3 py-1.5 transition-colors group',
+                          isMergeFile
+                            ? 'bg-purple-500/5 hover:bg-purple-500/10'
+                            : 'hover:bg-accent/50',
+                          isExpanded && (isMergeFile ? 'bg-purple-500/10' : 'bg-accent/30')
+                        )}
+                      >
+                        {/* Checkbox */}
+                        <Checkbox
+                          checked={isChecked}
+                          onCheckedChange={() => handleToggleFile(file.path)}
+                          className="flex-shrink-0"
+                        />
+
+                        {/* Clickable file row to show diff */}
+                        <button
+                          onClick={() => handleFileClick(file.path)}
+                          className="flex items-center gap-2 flex-1 min-w-0 text-left"
+                        >
+                          {isExpanded ? (
+                            <ChevronDown className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+                          ) : (
+                            <ChevronRight className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+                          )}
+                          {isMergeFile ? (
+                            <GitMerge className="w-3.5 h-3.5 text-purple-500 flex-shrink-0" />
+                          ) : (
+                            getFileIcon(file.status)
+                          )}
+                          <TruncatedFilePath
+                            path={file.path}
+                            className="text-xs font-mono flex-1 text-foreground"
+                          />
+                          {isMergeFile && (
+                            <span className="text-[10px] px-1.5 py-0.5 rounded border font-medium flex-shrink-0 bg-purple-500/15 text-purple-400 border-purple-500/30 inline-flex items-center gap-0.5">
+                              <GitMerge className="w-2.5 h-2.5" />
+                              {getMergeTypeLabel(file.mergeType)}
+                            </span>
+                          )}
+                          <span
+                            className={cn(
+                              'text-[10px] px-1.5 py-0.5 rounded border font-medium flex-shrink-0',
+                              getStatusBadgeColor(file.status)
+                            )}
+                          >
+                            {getStatusLabel(file.status)}
+                          </span>
+                          {isStaged && !isUnstaged && !isUntracked && (
+                            <span className="text-[10px] px-1 py-0.5 rounded border font-medium flex-shrink-0 bg-green-500/15 text-green-400 border-green-500/30">
+                              Staged
+                            </span>
+                          )}
+                          {isStaged && isUnstaged && (
+                            <span className="text-[10px] px-1 py-0.5 rounded border font-medium flex-shrink-0 bg-amber-500/15 text-amber-400 border-amber-500/30">
+                              Partial
+                            </span>
+                          )}
+                          {additions > 0 && (
+                            <span className="text-[10px] text-green-400 flex-shrink-0">
+                              +{additions}
+                            </span>
+                          )}
+                          {deletions > 0 && (
+                            <span className="text-[10px] text-red-400 flex-shrink-0">
+                              -{deletions}
+                            </span>
+                          )}
+                        </button>
+                      </div>
+
+                      {/* Expanded diff view */}
+                      {isExpanded && fileDiff && (
+                        <div className="bg-background border-t border-border max-h-[200px] overflow-y-auto scrollbar-visible">
+                          {fileDiff.hunks.map((hunk, hunkIndex) => (
+                            <div
+                              key={hunkIndex}
+                              className="border-b border-border-glass last:border-b-0"
+                            >
+                              {hunk.lines.map((line, lineIndex) => (
+                                <DiffLine
+                                  key={lineIndex}
+                                  type={line.type}
+                                  content={line.content}
+                                  lineNumber={line.lineNumber}
+                                />
+                              ))}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                      {isExpanded && !fileDiff && (
+                        <div className="px-4 py-3 text-xs text-muted-foreground bg-background border-t border-border">
+                          {file.status === '?' ? (
+                            <span>New file - diff preview not available</span>
+                          ) : file.status === 'D' ? (
+                            <span>File deleted</span>
+                          ) : (
+                            <span>Diff content not available</span>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          {/* Commit Message */}
+          <div className="grid gap-1.5">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="commit-message" className="flex items-center gap-2">
+                Commit Message
+                {isGenerating && (
+                  <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                    <Sparkles className="w-3 h-3 animate-pulse" />
+                    Generating...
+                  </span>
+                )}
+              </Label>
+              <div className="flex items-center gap-1">
+                {enableAiCommitMessages && (
+                  <>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={generateCommitMessage}
+                      disabled={isGenerating || isLoading}
+                      className="h-6 px-2 text-xs"
+                      title="Regenerate commit message"
+                    >
+                      {isGenerating ? (
+                        <Spinner size="xs" className="mr-1" />
+                      ) : (
+                        <RefreshCw className="w-3 h-3 mr-1" />
+                      )}
+                      Regenerate
+                    </Button>
+                    <ModelOverrideTrigger
+                      currentModelEntry={commitModelOverride.effectiveModelEntry}
+                      onModelChange={commitModelOverride.setOverride}
+                      phase="commitMessageModel"
+                      isOverridden={commitModelOverride.isOverridden}
+                      size="sm"
+                      variant="icon"
+                    />
+                  </>
+                )}
+              </div>
+            </div>
+            <Textarea
+              id="commit-message"
+              placeholder={
+                isGenerating ? 'Generating commit message...' : 'Describe your changes...'
+              }
+              value={message}
+              onChange={(e) => {
+                setMessage(e.target.value);
+                setError(null);
+              }}
+              onKeyDown={handleKeyDown}
+              className="min-h-[80px] font-mono text-sm"
+              autoFocus
+              disabled={isGenerating}
+            />
+            {error && <p className="text-sm text-destructive">{error}</p>}
+          </div>
+
+          {/* Push after commit option */}
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="push-after-commit"
+                checked={pushAfterCommit}
+                onCheckedChange={(checked) => setPushAfterCommit(checked === true)}
+              />
+              <Label
+                htmlFor="push-after-commit"
+                className="text-sm font-medium cursor-pointer flex items-center gap-1.5"
+              >
+                <Upload className="w-3.5 h-3.5" />
+                Push to remote after commit
+              </Label>
+            </div>
+
+            {pushAfterCommit && (
+              <div className="ml-6 flex flex-col gap-1.5">
+                {isLoadingRemotes || (!remotesFetched && !remotesFetchError) ? (
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Spinner size="sm" />
+                    <span>Loading remotes...</span>
+                  </div>
+                ) : remotesFetchError ? (
+                  <div className="flex items-center gap-2 text-sm text-destructive">
+                    <span>Failed to load remotes.</span>
+                    <button
+                      className="text-xs underline hover:text-foreground transition-colors"
+                      onClick={() => {
+                        if (worktree) {
+                          setRemotesFetchError(null);
+                        }
+                      }}
+                    >
+                      Retry
+                    </button>
+                  </div>
+                ) : remotes.length === 0 && remotesFetched ? (
+                  <p className="text-sm text-muted-foreground">
+                    No remotes configured for this repository.
+                  </p>
+                ) : remotes.length > 0 ? (
+                  <div className="flex items-center gap-2">
+                    <Label
+                      htmlFor="remote-select"
+                      className="text-xs text-muted-foreground whitespace-nowrap"
+                    >
+                      Remote:
+                    </Label>
+                    <Select value={selectedRemote} onValueChange={setSelectedRemote}>
+                      <SelectTrigger id="remote-select" className="h-8 text-xs flex-1">
+                        <SelectValue placeholder="Select remote" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {remotes.map((remote) => (
+                          <SelectItem
+                            key={remote.name}
+                            value={remote.name}
+                            description={
+                              <span className="text-xs text-muted-foreground truncate w-full block">
+                                {remote.url}
+                              </span>
+                            }
+                          >
+                            <span className="font-medium">{remote.name}</span>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                ) : null}
+              </div>
+            )}
+          </div>
+
+          <p className="text-xs text-muted-foreground">
+            Press <kbd className="px-1 py-0.5 bg-muted rounded text-xs">Cmd/Ctrl+Enter</kbd> to
+            commit{pushAfterCommit ? ' & push' : ''}
+          </p>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => onOpenChange(false)}
+            disabled={isLoading || isPushing || isGenerating}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleCommit}
+            disabled={
+              isLoading ||
+              isPushing ||
+              isGenerating ||
+              (isPushRetry
+                ? !selectedRemote
+                : !message.trim() ||
+                  selectedFiles.size === 0 ||
+                  (pushAfterCommit && !selectedRemote))
+            }
+          >
+            {isLoading || isPushing ? (
+              <>
+                <Spinner size="sm" className="mr-2" />
+                {isPushing ? 'Pushing...' : 'Committing...'}
+              </>
+            ) : isPushRetry ? (
+              <>
+                <Upload className="w-4 h-4 mr-2" />
+                Retry Push
+              </>
+            ) : (
+              <>
+                {pushAfterCommit ? (
+                  <Upload className="w-4 h-4 mr-2" />
+                ) : (
+                  <GitCommit className="w-4 h-4 mr-2" />
+                )}
+                {pushAfterCommit ? 'Commit & Push' : 'Commit'}
+                {selectedFiles.size > 0 && selectedFiles.size < files.length
+                  ? ` (${selectedFiles.size} file${selectedFiles.size > 1 ? 's' : ''})`
+                  : ''}
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/completed-features-modal.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/completed-features-modal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e8d9ca537e41f2f142e12bc9381918c3ce53816f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/completed-features-modal.tsx
@@ -0,0 +1,114 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { ArchiveRestore, Trash2 } from 'lucide-react';
+import { Feature } from '@/store/app-store';
+import { extractImplementationSummary } from '@/lib/log-parser';
+import { getFirstNonEmptySummary } from '@/lib/summary-selection';
+
+interface CompletedFeaturesModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  completedFeatures: Feature[];
+  onUnarchive: (feature: Feature) => void;
+  onDelete: (feature: Feature) => void;
+}
+
+export function CompletedFeaturesModal({
+  open,
+  onOpenChange,
+  completedFeatures,
+  onUnarchive,
+  onDelete,
+}: CompletedFeaturesModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="max-w-6xl max-h-[90vh] flex flex-col"
+        data-testid="completed-features-modal"
+      >
+        <DialogHeader>
+          <DialogTitle>Completed Features</DialogTitle>
+          <DialogDescription>
+            {completedFeatures.length === 0
+              ? 'No completed features yet.'
+              : `${completedFeatures.length} completed feature${
+                  completedFeatures.length > 1 ? 's' : ''
+                }`}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex-1 overflow-y-auto py-4">
+          {completedFeatures.length === 0 ? (
+            <div className="text-center text-muted-foreground py-8">
+              <ArchiveRestore className="w-12 h-12 mx-auto mb-4 opacity-50" />
+              <p>No completed features</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+              {completedFeatures.map((feature) => {
+                const implementationSummary = extractImplementationSummary(feature.summary);
+                const displayText = getFirstNonEmptySummary(
+                  implementationSummary,
+                  feature.summary,
+                  feature.description,
+                  feature.id
+                );
+
+                return (
+                  <Card
+                    key={feature.id}
+                    className="flex flex-col"
+                    data-testid={`completed-card-${feature.id}`}
+                  >
+                    <CardHeader className="p-3 pb-2 flex-1">
+                      <CardTitle className="text-sm leading-tight line-clamp-3">
+                        {displayText ?? feature.id}
+                      </CardTitle>
+                      <CardDescription className="text-xs mt-1 truncate">
+                        {feature.category || 'Uncategorized'}
+                      </CardDescription>
+                    </CardHeader>
+                    <div className="p-3 pt-0 flex gap-2">
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        className="flex-1 h-7 text-xs"
+                        onClick={() => onUnarchive(feature)}
+                        data-testid={`unarchive-${feature.id}`}
+                      >
+                        <ArchiveRestore className="w-3 h-3 mr-1" />
+                        Restore
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive"
+                        onClick={() => onDelete(feature)}
+                        data-testid={`delete-completed-${feature.id}`}
+                        title="Delete"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </Card>
+                );
+              })}
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/create-branch-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/create-branch-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9c22e801d8f62f0f53483a4297ebededda956d84
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/create-branch-dialog.tsx
@@ -0,0 +1,467 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/command';
+import { getElectronAPI } from '@/lib/electron';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import { Check, ChevronsUpDown, GitBranchPlus, Globe, RefreshCw } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import {
+  StashConfirmDialog,
+  type UncommittedChangesInfo,
+  type StashConfirmAction,
+} from './stash-confirm-dialog';
+import { type BranchInfo } from '../worktree-panel/types';
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+const logger = createLogger('CreateBranchDialog');
+
+interface CreateBranchDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  onCreated: () => void;
+}
+
+export function CreateBranchDialog({
+  open,
+  onOpenChange,
+  worktree,
+  onCreated,
+}: CreateBranchDialogProps) {
+  const [branchName, setBranchName] = useState('');
+  const [baseBranch, setBaseBranch] = useState('');
+  const [branches, setBranches] = useState<BranchInfo[]>([]);
+  const [isLoadingBranches, setIsLoadingBranches] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [isChecking, setIsChecking] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [baseBranchPopoverOpen, setBaseBranchPopoverOpen] = useState(false);
+  const baseBranchTriggerRef = useRef<HTMLButtonElement>(null);
+  const [baseBranchTriggerWidth, setBaseBranchTriggerWidth] = useState<number>(0);
+
+  // Stash confirmation state
+  const [showStashConfirm, setShowStashConfirm] = useState(false);
+  const [uncommittedChanges, setUncommittedChanges] = useState<UncommittedChangesInfo | null>(null);
+
+  // Keep a ref in sync with baseBranch so fetchBranches can read the latest value
+  // without needing it in its dependency array (which would cause re-fetch loops)
+  const baseBranchRef = useRef<string>(baseBranch);
+  useEffect(() => {
+    baseBranchRef.current = baseBranch;
+  }, [baseBranch]);
+
+  const fetchBranches = useCallback(async () => {
+    if (!worktree) return;
+
+    setIsLoadingBranches(true);
+
+    try {
+      const api = getHttpApiClient();
+      const result = await api.worktree.listBranches(worktree.path, true);
+
+      if (result.success && result.result) {
+        setBranches(result.result.branches);
+        // Only set the default base branch if no branch is currently selected,
+        // or if the currently selected branch is no longer present in the fetched list
+        const branchNames = result.result.branches.map((b: BranchInfo) => b.name);
+        const currentBaseBranch = baseBranchRef.current;
+        if (!currentBaseBranch || !branchNames.includes(currentBaseBranch)) {
+          if (result.result.currentBranch) {
+            setBaseBranch(result.result.currentBranch);
+          }
+        }
+      }
+    } catch (err) {
+      logger.error('Failed to fetch branches:', err);
+    } finally {
+      setIsLoadingBranches(false);
+    }
+  }, [worktree]);
+
+  // Reset state and fetch branches when dialog opens
+  useEffect(() => {
+    if (open) {
+      setBranchName('');
+      setBaseBranch('');
+      // Update the ref synchronously so fetchBranches() sees the cleared value
+      // immediately, rather than the stale value from the previous open.
+      baseBranchRef.current = '';
+      setError(null);
+      setBranches([]);
+      setBaseBranchPopoverOpen(false);
+      setShowStashConfirm(false);
+      setUncommittedChanges(null);
+      setIsChecking(false);
+      fetchBranches();
+    }
+  }, [open, fetchBranches]);
+
+  // Track trigger width for popover sizing
+  useEffect(() => {
+    const el = baseBranchTriggerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => {
+      setBaseBranchTriggerWidth(el.offsetWidth);
+    });
+    observer.observe(el);
+    setBaseBranchTriggerWidth(el.offsetWidth);
+    return () => observer.disconnect();
+  }, [baseBranchPopoverOpen]);
+
+  /**
+   * Execute the actual branch creation, optionally with stash handling
+   */
+  const doCreate = useCallback(
+    async (stashChanges: boolean) => {
+      if (!worktree || !branchName.trim()) return;
+
+      setIsCreating(true);
+      setError(null);
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.checkoutBranch) {
+          toast.error('Branch API not available');
+          setIsCreating(false);
+          return;
+        }
+
+        const selectedBase = baseBranch || undefined;
+        const result = await api.worktree.checkoutBranch(
+          worktree.path,
+          branchName.trim(),
+          selectedBase,
+          stashChanges,
+          true // includeUntracked
+        );
+
+        if (result.success && result.result) {
+          // Check if there were conflicts from stash reapply
+          if (result.result.hasConflicts) {
+            toast.warning('Branch created with conflicts', {
+              description: result.result.message,
+              duration: 8000,
+            });
+          } else {
+            const desc = result.result.stashedChanges
+              ? 'Local changes were stashed and reapplied'
+              : undefined;
+            toast.success(result.result.message, { description: desc });
+          }
+          onCreated();
+          onOpenChange(false);
+        } else {
+          setError(result.error || 'Failed to create branch');
+        }
+      } catch (err) {
+        logger.error('Create branch failed:', err);
+        setError('Failed to create branch');
+      } finally {
+        setIsCreating(false);
+        setShowStashConfirm(false);
+      }
+    },
+    [worktree, branchName, baseBranch, onCreated, onOpenChange]
+  );
+
+  /**
+   * Handle the initial "Create Branch" click.
+   * Checks for uncommitted changes first and shows confirmation if needed.
+   */
+  const handleCreate = async () => {
+    // Guard against concurrent invocations during the async pre-check or creation
+    if (isCreating || isChecking) return;
+    if (!worktree || !branchName.trim()) return;
+
+    // Basic validation
+    const invalidChars = /[\s~^:?*[\]\\]/;
+    if (invalidChars.test(branchName)) {
+      setError('Branch name contains invalid characters');
+      return;
+    }
+
+    setError(null);
+    setIsChecking(true);
+
+    // Check for uncommitted changes before proceeding
+    try {
+      const api = getHttpApiClient();
+      const changesResult = await api.worktree.checkChanges(worktree.path);
+
+      if (changesResult.success && changesResult.result?.hasChanges) {
+        // Show the stash confirmation dialog
+        setUncommittedChanges({
+          staged: changesResult.result.staged,
+          unstaged: changesResult.result.unstaged,
+          untracked: changesResult.result.untracked,
+          totalFiles: changesResult.result.totalFiles,
+        });
+        setIsChecking(false);
+        setShowStashConfirm(true);
+        return;
+      }
+    } catch (err) {
+      // If we can't check for changes, proceed without stashing
+      logger.warn('Failed to check for uncommitted changes, proceeding without stash:', err);
+    }
+
+    setIsChecking(false);
+
+    // No changes detected, proceed directly
+    doCreate(false);
+  };
+
+  /**
+   * Handle the user's decision in the stash confirmation dialog
+   */
+  const handleStashConfirmAction = useCallback(
+    (action: StashConfirmAction) => {
+      switch (action) {
+        case 'stash-and-proceed':
+          doCreate(true);
+          break;
+        case 'proceed-without-stash':
+          doCreate(false);
+          break;
+        case 'cancel':
+          setShowStashConfirm(false);
+          break;
+      }
+    },
+    [doCreate]
+  );
+
+  // Separate local and remote branches
+  const localBranches = useMemo(() => branches.filter((b) => !b.isRemote), [branches]);
+  const remoteBranches = useMemo(() => branches.filter((b) => b.isRemote), [branches]);
+
+  // Display label for the selected base branch
+  const baseBranchDisplayLabel = useMemo(() => {
+    if (!baseBranch) return null;
+    const found = branches.find((b) => b.name === baseBranch);
+    if (!found) return baseBranch;
+    return found.isCurrent ? `${found.name} (current)` : found.name;
+  }, [baseBranch, branches]);
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <GitBranchPlus className="w-5 h-5" />
+              Create New Branch
+            </DialogTitle>
+            <DialogDescription>Create a new branch from a base branch</DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor="branch-name">Branch Name</Label>
+              <Input
+                id="branch-name"
+                placeholder="feature/my-new-feature"
+                value={branchName}
+                onChange={(e) => {
+                  setBranchName(e.target.value);
+                  setError(null);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && branchName.trim() && !isCreating && !isChecking) {
+                    handleCreate();
+                  }
+                }}
+                disabled={isCreating || isChecking}
+                autoFocus
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="base-branch">Base Branch</Label>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={fetchBranches}
+                  disabled={isLoadingBranches || isCreating}
+                  className="h-6 px-2 text-xs"
+                >
+                  {isLoadingBranches ? (
+                    <Spinner size="xs" className="mr-1" />
+                  ) : (
+                    <RefreshCw className="w-3 h-3 mr-1" />
+                  )}
+                  Refresh
+                </Button>
+              </div>
+              {isLoadingBranches && branches.length === 0 ? (
+                <div className="flex items-center justify-center py-3 border rounded-md border-input">
+                  <Spinner size="sm" className="mr-2" />
+                  <span className="text-sm text-muted-foreground">Loading branches...</span>
+                </div>
+              ) : (
+                <Popover open={baseBranchPopoverOpen} onOpenChange={setBaseBranchPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      id="base-branch"
+                      ref={baseBranchTriggerRef}
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={baseBranchPopoverOpen}
+                      disabled={isCreating}
+                      className="w-full justify-between font-normal"
+                    >
+                      <span className="truncate text-sm">
+                        {baseBranchDisplayLabel ?? (
+                          <span className="text-muted-foreground">Select base branch</span>
+                        )}
+                      </span>
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    className="p-0"
+                    style={{ width: Math.max(baseBranchTriggerWidth, 200) }}
+                    onWheel={(e) => e.stopPropagation()}
+                    onTouchMove={(e) => e.stopPropagation()}
+                  >
+                    <Command shouldFilter={true}>
+                      <CommandInput placeholder="Filter branches..." className="h-9" />
+                      <CommandList>
+                        <CommandEmpty>No matching branches</CommandEmpty>
+                        {localBranches.length > 0 && (
+                          <CommandGroup heading="Local Branches">
+                            {localBranches.map((branch) => (
+                              <CommandItem
+                                key={branch.name}
+                                value={branch.name}
+                                onSelect={(value) => {
+                                  setBaseBranch(value);
+                                  setBaseBranchPopoverOpen(false);
+                                }}
+                              >
+                                <Check
+                                  className={cn(
+                                    'mr-2 h-4 w-4 shrink-0',
+                                    baseBranch === branch.name ? 'opacity-100' : 'opacity-0'
+                                  )}
+                                />
+                                <span className={cn('truncate', branch.isCurrent && 'font-medium')}>
+                                  {branch.name}
+                                </span>
+                                {branch.isCurrent && (
+                                  <span className="ml-1.5 text-xs text-muted-foreground shrink-0">
+                                    (current)
+                                  </span>
+                                )}
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        )}
+                        {remoteBranches.length > 0 && (
+                          <>
+                            {localBranches.length > 0 && <CommandSeparator />}
+                            <CommandGroup heading="Remote Branches">
+                              {remoteBranches.map((branch) => (
+                                <CommandItem
+                                  key={branch.name}
+                                  value={branch.name}
+                                  onSelect={(value) => {
+                                    setBaseBranch(value);
+                                    setBaseBranchPopoverOpen(false);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      'mr-2 h-4 w-4 shrink-0',
+                                      baseBranch === branch.name ? 'opacity-100' : 'opacity-0'
+                                    )}
+                                  />
+                                  <Globe className="mr-1.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                                  <span className="truncate">{branch.name}</span>
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </>
+                        )}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              )}
+            </div>
+
+            {error && <p className="text-sm text-destructive">{error}</p>}
+          </div>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={isCreating || isChecking}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleCreate}
+              disabled={!branchName.trim() || isCreating || isChecking}
+            >
+              {isCreating ? (
+                <>
+                  <Spinner size="sm" className="mr-2" />
+                  Creating...
+                </>
+              ) : isChecking ? (
+                <>
+                  <Spinner size="sm" className="mr-2" />
+                  Checking...
+                </>
+              ) : (
+                'Create Branch'
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Stash confirmation dialog - shown when uncommitted changes are detected */}
+      <StashConfirmDialog
+        open={showStashConfirm}
+        onOpenChange={setShowStashConfirm}
+        operationDescription={`create branch '${branchName.trim()}'`}
+        changesInfo={uncommittedChanges}
+        onConfirm={handleStashConfirmAction}
+        isLoading={isCreating}
+      />
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/create-pr-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/create-pr-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4fe05a38c17cc7dd012e21f4fde6b179463e78ce
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/create-pr-dialog.tsx
@@ -0,0 +1,810 @@
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { BranchAutocomplete } from '@/components/ui/branch-autocomplete';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  GitPullRequest,
+  ExternalLink,
+  Sparkles,
+  RefreshCw,
+  Maximize2,
+  Minimize2,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getElectronAPI } from '@/lib/electron';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import { useWorktreeBranches } from '@/hooks/queries';
+import { ModelOverrideTrigger, useModelOverride } from '@/components/shared';
+import { resolveModelString } from '@automaker/model-resolver';
+
+interface RemoteInfo {
+  name: string;
+  url: string;
+  branches?: string[];
+}
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface CreatePRDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  projectPath: string | null;
+  onCreated: (prUrl?: string) => void;
+  /** Default base branch for the PR (defaults to 'main' if not provided) */
+  defaultBaseBranch?: string;
+}
+
+export function CreatePRDialog({
+  open,
+  onOpenChange,
+  worktree,
+  projectPath,
+  onCreated,
+  defaultBaseBranch = 'main',
+}: CreatePRDialogProps) {
+  const [title, setTitle] = useState('');
+  const [body, setBody] = useState('');
+  const [baseBranch, setBaseBranch] = useState(defaultBaseBranch);
+  const [commitMessage, setCommitMessage] = useState('');
+  const [isDraft, setIsDraft] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [prUrl, setPrUrl] = useState<string | null>(null);
+  const [browserUrl, setBrowserUrl] = useState<string | null>(null);
+  const [showBrowserFallback, setShowBrowserFallback] = useState(false);
+  // Track whether an operation completed that warrants a refresh
+  const operationCompletedRef = useRef(false);
+
+  // Remote selection state
+  const [remotes, setRemotes] = useState<RemoteInfo[]>([]);
+  const [selectedRemote, setSelectedRemote] = useState<string>('');
+  // Target remote: which remote to create the PR against (may differ from push remote)
+  const [selectedTargetRemote, setSelectedTargetRemote] = useState<string>('');
+  const [isLoadingRemotes, setIsLoadingRemotes] = useState(false);
+  // Keep a ref in sync with selectedRemote so fetchRemotes can read the latest value
+  // without needing it in its dependency array (which would cause re-fetch loops)
+  const selectedRemoteRef = useRef<string>(selectedRemote);
+  const selectedTargetRemoteRef = useRef<string>(selectedTargetRemote);
+  useEffect(() => {
+    selectedRemoteRef.current = selectedRemote;
+  }, [selectedRemote]);
+  useEffect(() => {
+    selectedTargetRemoteRef.current = selectedTargetRemote;
+  }, [selectedTargetRemote]);
+
+  // Generate description state
+  const [isGeneratingDescription, setIsGeneratingDescription] = useState(false);
+  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
+
+  // PR description model override
+  const prDescriptionModelOverride = useModelOverride({ phase: 'prDescriptionModel' });
+
+  // Use React Query for branch fetching - only enabled when dialog is open
+  const { data: branchesData, isLoading: isLoadingBranches } = useWorktreeBranches(
+    open ? worktree?.path : undefined,
+    true // Include remote branches for PR base branch selection
+  );
+
+  // Determine if push remote selection is needed:
+  // Show when there are unpushed commits, no remote tracking branch, or uncommitted changes
+  // (uncommitted changes will be committed first, then pushed)
+  const branchHasRemote = branchesData?.hasRemoteBranch ?? false;
+  const branchAheadCount = branchesData?.aheadCount ?? 0;
+  const needsPush = !branchHasRemote || branchAheadCount > 0 || !!worktree?.hasChanges;
+
+  // Determine the active remote to scope branches to.
+  // For multi-remote: use the selected target remote.
+  // For single remote: automatically scope to that remote.
+  const activeRemote = useMemo(() => {
+    if (remotes.length === 1) return remotes[0].name;
+    if (selectedTargetRemote) return selectedTargetRemote;
+    return '';
+  }, [remotes, selectedTargetRemote]);
+
+  // Filter branches by the active remote and strip remote prefixes for display.
+  // Returns display names (e.g. "main") without remote prefix.
+  // Also builds a map from display name → full ref (e.g. "origin/main") for PR creation.
+  const { branches, branchFullRefMap } = useMemo(() => {
+    if (!branchesData?.branches)
+      return { branches: [], branchFullRefMap: new Map<string, string>() };
+
+    const refMap = new Map<string, string>();
+
+    // If we have an active remote with branch info from the remotes endpoint, use that as the source
+    const activeRemoteInfo = activeRemote
+      ? remotes.find((r) => r.name === activeRemote)
+      : undefined;
+
+    if (activeRemoteInfo?.branches && activeRemoteInfo.branches.length > 0) {
+      // Use the remote's branch list — these are already short names (e.g. "main")
+      const filteredBranches = activeRemoteInfo.branches
+        .filter((branchName) => {
+          // Exclude the current worktree branch
+          return branchName !== worktree?.branch;
+        })
+        .map((branchName) => {
+          // Map display name to full ref
+          const fullRef = `${activeRemote}/${branchName}`;
+          refMap.set(branchName, fullRef);
+          return branchName;
+        });
+
+      return { branches: filteredBranches, branchFullRefMap: refMap };
+    }
+
+    // Fallback: if no remote info available, use the branches from the branches endpoint
+    // Filter and strip prefixes
+    const seen = new Set<string>();
+    const filteredBranches: string[] = [];
+
+    for (const b of branchesData.branches) {
+      // Skip the current worktree branch
+      if (b.name === worktree?.branch) continue;
+
+      if (b.isRemote) {
+        // Remote branch: check if it belongs to the active remote
+        const slashIndex = b.name.indexOf('/');
+        if (slashIndex === -1) continue;
+
+        const remoteName = b.name.substring(0, slashIndex);
+        const branchName = b.name.substring(slashIndex + 1);
+
+        // If we have an active remote, only include branches from that remote
+        if (activeRemote && remoteName !== activeRemote) continue;
+
+        // Strip the remote prefix for display
+        if (!seen.has(branchName)) {
+          seen.add(branchName);
+          filteredBranches.push(branchName);
+          refMap.set(branchName, b.name);
+        }
+      } else {
+        // Local branch — only include if it has a remote counterpart on the active remote
+        // or if no active remote is set (no remotes at all)
+        if (!activeRemote) {
+          if (!seen.has(b.name)) {
+            seen.add(b.name);
+            filteredBranches.push(b.name);
+            refMap.set(b.name, b.name);
+          }
+        }
+        // When active remote is set, skip local-only branches — the remote version
+        // will be included from the remote branches above
+      }
+    }
+
+    return { branches: filteredBranches, branchFullRefMap: refMap };
+  }, [branchesData?.branches, worktree?.branch, activeRemote, remotes]);
+
+  // When branches change (e.g. target remote changed), reset base branch if current selection is no longer valid
+  useEffect(() => {
+    if (branches.length > 0 && baseBranch && !branches.includes(baseBranch)) {
+      // Current base branch is not in the filtered list — pick the best match
+      // Strip any existing remote prefix from the current base branch for comparison
+      const strippedBaseBranch = baseBranch.includes('/')
+        ? baseBranch.substring(baseBranch.indexOf('/') + 1)
+        : baseBranch;
+
+      // Check if the stripped version exists in the list
+      if (branches.includes(strippedBaseBranch)) {
+        setBaseBranch(strippedBaseBranch);
+      } else {
+        const mainBranch = branches.find((b) => b === 'main' || b === 'master');
+        setBaseBranch(mainBranch || branches[0]);
+      }
+    }
+  }, [branches, baseBranch]);
+
+  // Fetch remotes when dialog opens
+  const fetchRemotes = useCallback(async () => {
+    if (!worktree) return;
+
+    setIsLoadingRemotes(true);
+
+    try {
+      const api = getHttpApiClient();
+      const result = await api.worktree.listRemotes(worktree.path);
+
+      if (result.success && result.result) {
+        const remoteInfos: RemoteInfo[] = result.result.remotes.map(
+          (r: { name: string; url: string; branches?: { name: string }[] }) => ({
+            name: r.name,
+            url: r.url,
+            branches: r.branches?.map((b: { name: string }) => b.name) || [],
+          })
+        );
+        setRemotes(remoteInfos);
+
+        // Preserve existing push remote selection if it's still valid; otherwise fall back to 'origin' or first remote
+        if (remoteInfos.length > 0) {
+          const remoteNames = remoteInfos.map((r) => r.name);
+          const currentSelection = selectedRemoteRef.current;
+          const currentSelectionStillExists =
+            currentSelection !== '' && remoteNames.includes(currentSelection);
+          if (!currentSelectionStillExists) {
+            const defaultRemote = remoteInfos.find((r) => r.name === 'origin') || remoteInfos[0];
+            setSelectedRemote(defaultRemote.name);
+          }
+
+          // Preserve existing target remote selection if it's still valid
+          const currentTargetSelection = selectedTargetRemoteRef.current;
+          const currentTargetStillExists =
+            currentTargetSelection !== '' && remoteNames.includes(currentTargetSelection);
+          if (!currentTargetStillExists) {
+            // Default target remote: 'upstream' if it exists (fork workflow), otherwise same as push remote
+            const defaultTarget =
+              remoteInfos.find((r) => r.name === 'upstream') ||
+              remoteInfos.find((r) => r.name === 'origin') ||
+              remoteInfos[0];
+            setSelectedTargetRemote(defaultTarget.name);
+          }
+        }
+      }
+    } catch {
+      // Silently fail - remotes selector will just not show
+    } finally {
+      setIsLoadingRemotes(false);
+    }
+  }, [worktree]);
+
+  useEffect(() => {
+    if (open && worktree) {
+      fetchRemotes();
+    }
+  }, [open, worktree, fetchRemotes]);
+
+  // Common state reset function to avoid duplication
+  const resetState = useCallback(() => {
+    setTitle('');
+    setBody('');
+    setCommitMessage('');
+    setBaseBranch(defaultBaseBranch);
+    setIsDraft(false);
+    setError(null);
+    setPrUrl(null);
+    setBrowserUrl(null);
+    setShowBrowserFallback(false);
+    setRemotes([]);
+    setSelectedRemote('');
+    setSelectedTargetRemote('');
+    setIsGeneratingDescription(false);
+    setIsDescriptionExpanded(false);
+    operationCompletedRef.current = false;
+  }, [defaultBaseBranch]);
+
+  // Reset state when dialog opens or worktree changes
+  useEffect(() => {
+    // Reset all state on both open and close
+    resetState();
+  }, [open, worktree?.path, resetState]);
+
+  const handleGenerateDescription = async () => {
+    if (!worktree) return;
+
+    setIsGeneratingDescription(true);
+
+    try {
+      const api = getHttpApiClient();
+      // Resolve the display name to the actual branch name for the API
+      const resolvedRef = branchFullRefMap.get(baseBranch) || baseBranch;
+      // Only strip the remote prefix if the resolved ref differs from the original
+      // (indicating it was resolved from a full ref like "origin/main").
+      // This preserves local branch names that contain slashes (e.g. "release/1.0").
+      const branchNameForApi =
+        resolvedRef !== baseBranch && resolvedRef.includes('/')
+          ? resolvedRef.substring(resolvedRef.indexOf('/') + 1)
+          : resolvedRef;
+      const result = await api.worktree.generatePRDescription(
+        worktree.path,
+        branchNameForApi,
+        resolveModelString(prDescriptionModelOverride.effectiveModel),
+        prDescriptionModelOverride.effectiveModelEntry.thinkingLevel,
+        prDescriptionModelOverride.effectiveModelEntry.providerId
+      );
+
+      if (result.success) {
+        if (result.title) {
+          setTitle(result.title);
+        }
+        if (result.body) {
+          setBody(result.body);
+        }
+        toast.success('PR description generated');
+      } else {
+        toast.error('Failed to generate description', {
+          description: result.error || 'Unknown error',
+        });
+      }
+    } catch (err) {
+      toast.error('Failed to generate description', {
+        description: err instanceof Error ? err.message : 'Unknown error',
+      });
+    } finally {
+      setIsGeneratingDescription(false);
+    }
+  };
+
+  const handleCreate = async () => {
+    if (!worktree) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.createPR) {
+        setError('Worktree API not available');
+        return;
+      }
+      // Resolve the display branch name to the full ref for the API call.
+      // The baseBranch state holds the display name (e.g. "main"), but the API
+      // may need the short name without the remote prefix. We pass the display name
+      // since the backend handles branch resolution. However, if the full ref is
+      // available, we can use it for more precise targeting.
+      const resolvedBaseBranch = branchFullRefMap.get(baseBranch) || baseBranch;
+      // Only strip the remote prefix if the resolved ref differs from the original
+      // (indicating it was resolved from a full ref like "origin/main").
+      // This preserves local branch names that contain slashes (e.g. "release/1.0").
+      const baseBranchForApi =
+        resolvedBaseBranch !== baseBranch && resolvedBaseBranch.includes('/')
+          ? resolvedBaseBranch.substring(resolvedBaseBranch.indexOf('/') + 1)
+          : resolvedBaseBranch;
+
+      const result = await api.worktree.createPR(worktree.path, {
+        projectPath: projectPath || undefined,
+        commitMessage: commitMessage || undefined,
+        prTitle: title || worktree.branch,
+        prBody: body || `Changes from branch ${worktree.branch}`,
+        baseBranch: baseBranchForApi,
+        draft: isDraft,
+        remote: selectedRemote || undefined,
+        targetRemote: remotes.length > 1 ? selectedTargetRemote || undefined : undefined,
+      });
+
+      if (result.success && result.result) {
+        if (result.result.prCreated && result.result.prUrl) {
+          setPrUrl(result.result.prUrl);
+          // Mark operation as completed for refresh on close
+          operationCompletedRef.current = true;
+
+          // Show different message based on whether PR already existed
+          if (result.result.prAlreadyExisted) {
+            toast.success('Pull request found!', {
+              description: `PR already exists for ${result.result.branch}`,
+              action: {
+                label: 'View PR',
+                onClick: () => window.open(result.result!.prUrl!, '_blank', 'noopener,noreferrer'),
+              },
+            });
+          } else {
+            toast.success('Pull request created!', {
+              description: `PR created from ${result.result.branch}`,
+              action: {
+                label: 'View PR',
+                onClick: () => window.open(result.result!.prUrl!, '_blank', 'noopener,noreferrer'),
+              },
+            });
+          }
+          // Don't call onCreated() here - keep dialog open to show success message
+          // onCreated() will be called when user closes the dialog
+        } else {
+          // Branch was pushed successfully
+          const prError = result.result.prError;
+          const hasBrowserUrl = !!result.result.browserUrl;
+
+          // Check if we should show browser fallback
+          if (!result.result.prCreated && hasBrowserUrl) {
+            // If gh CLI is not available, show browser fallback UI
+            if (prError === 'gh_cli_not_available' || !result.result.ghCliAvailable) {
+              setBrowserUrl(result.result.browserUrl ?? null);
+              setShowBrowserFallback(true);
+              // Mark operation as completed - branch was pushed successfully
+              operationCompletedRef.current = true;
+              toast.success('Branch pushed', {
+                description: result.result.committed
+                  ? `Commit ${result.result.commitHash} pushed to ${result.result.branch}`
+                  : `Branch ${result.result.branch} pushed`,
+              });
+              // Don't call onCreated() here - we want to keep the dialog open to show the browser URL
+              setIsLoading(false);
+              return; // Don't close dialog, show browser fallback UI
+            }
+
+            // gh CLI is available but failed - show error with browser option
+            if (prError) {
+              // Parse common gh CLI errors for better messages
+              let errorMessage = prError;
+              if (prError.includes('No commits between')) {
+                errorMessage =
+                  'No new commits to create PR. Make sure your branch has changes compared to the base branch.';
+              } else if (prError.includes('already exists')) {
+                errorMessage = 'A pull request already exists for this branch.';
+              } else if (prError.includes('not logged in') || prError.includes('auth')) {
+                errorMessage = "GitHub CLI not authenticated. Run 'gh auth login' in terminal.";
+              }
+
+              // Show error but also provide browser option
+              setBrowserUrl(result.result.browserUrl ?? null);
+              setShowBrowserFallback(true);
+              // Mark operation as completed - branch was pushed even though PR creation failed
+              operationCompletedRef.current = true;
+              toast.error('PR creation failed', {
+                description: errorMessage,
+                duration: 8000,
+              });
+              // Don't call onCreated() here - we want to keep the dialog open to show the browser URL
+              setIsLoading(false);
+              return;
+            }
+          }
+
+          // Show success toast for push
+          toast.success('Branch pushed', {
+            description: result.result.committed
+              ? `Commit ${result.result.commitHash} pushed to ${result.result.branch}`
+              : `Branch ${result.result.branch} pushed`,
+          });
+
+          // No browser URL available, just close
+          if (!result.result.prCreated) {
+            if (!hasBrowserUrl) {
+              toast.info('PR not created', {
+                description:
+                  'Could not determine repository URL. GitHub CLI (gh) may not be installed or authenticated.',
+                duration: 8000,
+              });
+            }
+          }
+          onCreated();
+          onOpenChange(false);
+        }
+      } else {
+        setError(result.error || 'Failed to create pull request');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create PR');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    // Only call onCreated() if an actual operation completed
+    // This prevents unnecessary refreshes when user cancels
+    if (operationCompletedRef.current) {
+      // Pass the PR URL if one was created
+      onCreated(prUrl || undefined);
+    }
+    onOpenChange(false);
+    // State reset is handled by useEffect when open becomes false
+  };
+
+  if (!worktree) return null;
+
+  const shouldShowBrowserFallback = showBrowserFallback && browserUrl;
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[550px] max-h-[85vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitPullRequest className="w-5 h-5" />
+            Create Pull Request
+          </DialogTitle>
+          <DialogDescription className="break-words">
+            {worktree.hasChanges ? 'Push changes and create' : 'Create'} a pull request from{' '}
+            <code className="font-mono bg-muted px-1 rounded break-all">{worktree.branch}</code>
+          </DialogDescription>
+        </DialogHeader>
+
+        {prUrl ? (
+          <div className="py-6 text-center space-y-4">
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-500/10">
+              <GitPullRequest className="w-8 h-8 text-green-500" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold">Pull Request Created!</h3>
+              <p className="text-sm text-muted-foreground mt-1">Your PR is ready for review</p>
+            </div>
+            <div className="flex gap-2 justify-center">
+              <Button
+                onClick={() => window.open(prUrl, '_blank', 'noopener,noreferrer')}
+                className="gap-2"
+              >
+                <ExternalLink className="w-4 h-4" />
+                View Pull Request
+              </Button>
+              <Button variant="outline" onClick={handleClose}>
+                Close
+              </Button>
+            </div>
+          </div>
+        ) : shouldShowBrowserFallback ? (
+          <div className="py-6 text-center space-y-4">
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-500/10">
+              <GitPullRequest className="w-8 h-8 text-blue-500" />
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold">Branch Pushed!</h3>
+              <p className="text-sm text-muted-foreground mt-1">
+                Your changes have been pushed to GitHub.
+                <br />
+                Click below to create a pull request in your browser.
+              </p>
+            </div>
+            <div className="space-y-3">
+              <Button
+                onClick={() => {
+                  if (browserUrl) {
+                    window.open(browserUrl, '_blank', 'noopener,noreferrer');
+                  }
+                }}
+                className="gap-2 w-full"
+                size="lg"
+              >
+                <ExternalLink className="w-4 h-4" />
+                Create PR in Browser
+              </Button>
+              <div className="p-2 bg-muted rounded text-xs break-all font-mono">{browserUrl}</div>
+              <p className="text-xs text-muted-foreground">
+                Tip: Install the GitHub CLI (<code className="bg-muted px-1 rounded">gh</code>) to
+                create PRs directly from the app
+              </p>
+              <DialogFooter className="mt-4">
+                <Button variant="outline" onClick={handleClose}>
+                  Close
+                </Button>
+              </DialogFooter>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="grid gap-4 py-4 overflow-y-auto min-h-0 flex-1">
+              {worktree.hasChanges && (
+                <div className="grid gap-2">
+                  <Label htmlFor="commit-message">
+                    Commit Message <span className="text-muted-foreground">(optional)</span>
+                  </Label>
+                  <Input
+                    id="commit-message"
+                    placeholder="Leave empty to auto-generate"
+                    value={commitMessage}
+                    onChange={(e) => setCommitMessage(e.target.value)}
+                    className="font-mono text-sm"
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    {worktree.changedFilesCount} uncommitted file(s) will be committed
+                  </p>
+                </div>
+              )}
+
+              <div className="grid gap-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="pr-title">PR Title</Label>
+                  <div className="flex items-center gap-1">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleGenerateDescription}
+                      disabled={isGeneratingDescription || isLoading}
+                      className="h-6 px-2 text-xs"
+                      title={
+                        worktree.hasChanges
+                          ? 'Generate title and description from commits and uncommitted changes'
+                          : 'Generate title and description from commits'
+                      }
+                    >
+                      {isGeneratingDescription ? (
+                        <>
+                          <Spinner size="xs" className="mr-1" />
+                          Generating...
+                        </>
+                      ) : (
+                        <>
+                          <Sparkles className="w-3 h-3 mr-1" />
+                          Generate with AI
+                        </>
+                      )}
+                    </Button>
+                    <ModelOverrideTrigger
+                      currentModelEntry={prDescriptionModelOverride.effectiveModelEntry}
+                      onModelChange={prDescriptionModelOverride.setOverride}
+                      phase="prDescriptionModel"
+                      isOverridden={prDescriptionModelOverride.isOverridden}
+                      size="sm"
+                      variant="icon"
+                    />
+                  </div>
+                </div>
+                <Input
+                  id="pr-title"
+                  placeholder={worktree.branch}
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                />
+              </div>
+
+              <div className="grid gap-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="pr-body">Description</Label>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setIsDescriptionExpanded(!isDescriptionExpanded)}
+                    className="h-6 px-2 text-xs"
+                    title={isDescriptionExpanded ? 'Collapse description' : 'Expand description'}
+                  >
+                    {isDescriptionExpanded ? (
+                      <Minimize2 className="w-3 h-3" />
+                    ) : (
+                      <Maximize2 className="w-3 h-3" />
+                    )}
+                  </Button>
+                </div>
+                <Textarea
+                  id="pr-body"
+                  placeholder="Describe the changes in this PR..."
+                  value={body}
+                  onChange={(e) => setBody(e.target.value)}
+                  className={isDescriptionExpanded ? 'min-h-[300px]' : 'min-h-[80px]'}
+                />
+              </div>
+
+              <div className="flex flex-col gap-4">
+                {/* Push remote selector - only show when multiple remotes and there are commits to push */}
+                {remotes.length > 1 && needsPush && (
+                  <div className="grid gap-2">
+                    <div className="flex items-center justify-between">
+                      <Label htmlFor="remote-select">Push to Remote</Label>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={fetchRemotes}
+                        disabled={isLoadingRemotes}
+                        className="h-6 px-2 text-xs"
+                      >
+                        {isLoadingRemotes ? (
+                          <Spinner size="xs" className="mr-1" />
+                        ) : (
+                          <RefreshCw className="w-3 h-3 mr-1" />
+                        )}
+                        Refresh
+                      </Button>
+                    </div>
+                    <Select value={selectedRemote} onValueChange={setSelectedRemote}>
+                      <SelectTrigger id="remote-select">
+                        <SelectValue placeholder="Select a remote" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {remotes.map((remote) => (
+                          <SelectItem
+                            key={remote.name}
+                            value={remote.name}
+                            description={
+                              <span className="text-xs text-muted-foreground truncate max-w-[300px]">
+                                {remote.url}
+                              </span>
+                            }
+                          >
+                            <span className="font-medium">{remote.name}</span>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+
+                {/* Target remote selector - which remote to create PR against */}
+                {remotes.length > 1 && (
+                  <div className="grid gap-2">
+                    <Label htmlFor="target-remote-select">Create PR Against</Label>
+                    <Select value={selectedTargetRemote} onValueChange={setSelectedTargetRemote}>
+                      <SelectTrigger id="target-remote-select">
+                        <SelectValue placeholder="Select target remote" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {remotes.map((remote) => (
+                          <SelectItem
+                            key={remote.name}
+                            value={remote.name}
+                            description={
+                              <span className="text-xs text-muted-foreground truncate max-w-[300px]">
+                                {remote.url}
+                              </span>
+                            }
+                          >
+                            <span className="font-medium">{remote.name}</span>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-xs text-muted-foreground">
+                      The remote repository where the pull request will be created
+                    </p>
+                  </div>
+                )}
+
+                <div className="grid gap-2">
+                  <Label htmlFor="base-branch">Base Remote Branch</Label>
+                  <BranchAutocomplete
+                    value={baseBranch}
+                    onChange={setBaseBranch}
+                    branches={branches}
+                    placeholder="Select base branch..."
+                    disabled={isLoadingBranches || isLoadingRemotes}
+                    allowCreate={false}
+                    emptyMessage={
+                      activeRemote
+                        ? `No branches found on remote "${activeRemote}".`
+                        : 'No matching branches found.'
+                    }
+                    data-testid="base-branch-autocomplete"
+                  />
+                </div>
+                <div className="flex items-end">
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="draft"
+                      checked={isDraft}
+                      onCheckedChange={(checked) => setIsDraft(checked === true)}
+                    />
+                    <Label htmlFor="draft" className="cursor-pointer">
+                      Create as draft
+                    </Label>
+                  </div>
+                </div>
+              </div>
+
+              {error && <p className="text-sm text-destructive">{error}</p>}
+            </div>
+
+            <DialogFooter className="shrink-0 pt-2 border-t">
+              <Button variant="ghost" onClick={handleClose} disabled={isLoading}>
+                Cancel
+              </Button>
+              <Button onClick={handleCreate} disabled={isLoading}>
+                {isLoading ? (
+                  <>
+                    <Spinner size="sm" className="mr-2" />
+                    Creating...
+                  </>
+                ) : (
+                  <>
+                    <GitPullRequest className="w-4 h-4 mr-2" />
+                    Create PR
+                  </>
+                )}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/create-worktree-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/create-worktree-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e14e3301b956a080c3dd6acc8f0a165919af8acb
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/create-worktree-dialog.tsx
@@ -0,0 +1,617 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  GitBranch,
+  AlertCircle,
+  ChevronDown,
+  ChevronRight,
+  Globe,
+  RefreshCw,
+  Cloud,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getElectronAPI } from '@/lib/electron';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { BranchAutocomplete } from '@/components/ui/branch-autocomplete';
+import { toast } from 'sonner';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+/**
+ * Qualify a branch name with a remote prefix when appropriate.
+ * Returns undefined when branch is empty, and avoids double-prefixing.
+ */
+function qualifyRemoteBranch(remote: string, branch?: string): string | undefined {
+  const trimmed = branch?.trim();
+  if (!trimmed) return undefined;
+  if (remote === 'local') return trimmed;
+  if (trimmed.startsWith(`${remote}/`)) return trimmed;
+  return `${remote}/${trimmed}`;
+}
+
+/**
+ * Parse git/worktree error messages and return user-friendly versions
+ */
+function parseWorktreeError(error: string): { title: string; description?: string } {
+  const errorLower = error.toLowerCase();
+
+  // Worktree already exists
+  if (errorLower.includes('already exists') && errorLower.includes('worktree')) {
+    return {
+      title: 'A worktree with this name already exists',
+      description: 'Try a different branch name or delete the existing worktree first.',
+    };
+  }
+
+  // Branch already checked out in another worktree
+  if (
+    errorLower.includes('already checked out') ||
+    errorLower.includes('is already used by worktree')
+  ) {
+    return {
+      title: 'This branch is already in use',
+      description: 'The branch is checked out in another worktree. Use a different branch name.',
+    };
+  }
+
+  // Branch name conflicts with existing branch
+  if (errorLower.includes('already exists') && errorLower.includes('branch')) {
+    return {
+      title: 'A branch with this name already exists',
+      description: 'The worktree will use the existing branch, or try a different name.',
+    };
+  }
+
+  // Not a git repository
+  if (errorLower.includes('not a git repository')) {
+    return {
+      title: 'Not a git repository',
+      description: 'Initialize git in this project first with "git init".',
+    };
+  }
+
+  // Lock file exists (another git operation in progress)
+  if (errorLower.includes('.lock') || errorLower.includes('lock file')) {
+    return {
+      title: 'Another git operation is in progress',
+      description: 'Wait for it to complete or remove stale lock files.',
+    };
+  }
+
+  // Permission denied
+  if (errorLower.includes('permission denied') || errorLower.includes('access denied')) {
+    return {
+      title: 'Permission denied',
+      description: 'Check file permissions for the project directory.',
+    };
+  }
+
+  // Default: return original error but cleaned up
+  return {
+    title: error.replace(/^(fatal|error):\s*/i, '').split('\n')[0],
+  };
+}
+
+interface CreatedWorktreeInfo {
+  path: string;
+  branch: string;
+}
+
+interface CreateWorktreeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectPath: string;
+  onCreated: (worktree: CreatedWorktreeInfo) => void;
+}
+
+export function CreateWorktreeDialog({
+  open,
+  onOpenChange,
+  projectPath,
+  onCreated,
+}: CreateWorktreeDialogProps) {
+  const [branchName, setBranchName] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<{ title: string; description?: string } | null>(null);
+
+  // Base branch selection state
+  const [showBaseBranch, setShowBaseBranch] = useState(false);
+  const [baseBranch, setBaseBranch] = useState('');
+  const [isLoadingBranches, setIsLoadingBranches] = useState(false);
+  const [availableBranches, setAvailableBranches] = useState<
+    Array<{ name: string; isRemote: boolean }>
+  >([]);
+  // When the branch list fetch fails, store a message to show the user and
+  // allow free-form branch entry via allowCreate as a fallback.
+  const [branchFetchError, setBranchFetchError] = useState<string | null>(null);
+
+  // Remote selection state
+  const [selectedRemote, setSelectedRemote] = useState<string>('local');
+  const [availableRemotes, setAvailableRemotes] = useState<Array<{ name: string; url: string }>>(
+    []
+  );
+  const [remoteBranches, setRemoteBranches] = useState<
+    Map<string, Array<{ name: string; fullRef: string }>>
+  >(new Map());
+
+  // AbortController ref so in-flight branch fetches can be cancelled when the dialog closes
+  const branchFetchAbortRef = useRef<AbortController | null>(null);
+
+  // Fetch available branches and remotes when the base branch section is expanded
+  const fetchBranches = useCallback(
+    async (signal?: AbortSignal) => {
+      if (!projectPath) return;
+
+      setIsLoadingBranches(true);
+      try {
+        const api = getHttpApiClient();
+
+        // Fetch both branches and remotes in parallel
+        const [branchResult, remotesResult] = await Promise.all([
+          api.worktree.listBranches(projectPath, true, signal),
+          api.worktree.listRemotes(projectPath),
+        ]);
+
+        // If the fetch was aborted while awaiting, bail out to avoid stale state writes
+        if (signal?.aborted) return;
+
+        // Process branches
+        if (branchResult.success && branchResult.result) {
+          setBranchFetchError(null);
+          setAvailableBranches(
+            branchResult.result.branches.map((b: { name: string; isRemote: boolean }) => ({
+              name: b.name,
+              isRemote: b.isRemote,
+            }))
+          );
+        } else {
+          // API returned success: false — treat as an error
+          const message =
+            branchResult.error || 'Failed to load branches. You can type a branch name manually.';
+          setBranchFetchError(message);
+          setAvailableBranches([{ name: 'main', isRemote: false }]);
+        }
+
+        // Process remotes
+        if (remotesResult.success && remotesResult.result) {
+          const remotes = remotesResult.result.remotes;
+          setAvailableRemotes(
+            remotes.map((r: { name: string; url: string; branches: unknown[] }) => ({
+              name: r.name,
+              url: r.url,
+            }))
+          );
+
+          // Build remote branches map for filtering
+          const branchesMap = new Map<string, Array<{ name: string; fullRef: string }>>();
+          remotes.forEach(
+            (r: {
+              name: string;
+              url: string;
+              branches: Array<{ name: string; fullRef: string }>;
+            }) => {
+              branchesMap.set(r.name, r.branches || []);
+            }
+          );
+          setRemoteBranches(branchesMap);
+        }
+      } catch (err) {
+        // If aborted, don't update state
+        if (signal?.aborted) return;
+
+        const message =
+          err instanceof Error
+            ? err.message
+            : 'Failed to load branches. You can type a branch name manually.';
+        setBranchFetchError(message);
+        // Provide 'main' as a safe fallback so the autocomplete is not empty,
+        // and enable free-form entry (allowCreate) so the user can still type
+        // any branch name when the remote list is unavailable.
+        setAvailableBranches([{ name: 'main', isRemote: false }]);
+        setAvailableRemotes([]);
+        setRemoteBranches(new Map());
+      } finally {
+        if (!signal?.aborted) {
+          setIsLoadingBranches(false);
+        }
+      }
+    },
+    [projectPath]
+  );
+
+  // Fetch branches when the base branch section is expanded
+  useEffect(() => {
+    if (open && showBaseBranch) {
+      // Abort any previous in-flight fetch
+      branchFetchAbortRef.current?.abort();
+      const controller = new AbortController();
+      branchFetchAbortRef.current = controller;
+      fetchBranches(controller.signal);
+    }
+    return () => {
+      branchFetchAbortRef.current?.abort();
+      branchFetchAbortRef.current = null;
+    };
+  }, [open, showBaseBranch, fetchBranches]);
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      // Abort any in-flight branch fetch to prevent stale writes
+      branchFetchAbortRef.current?.abort();
+      branchFetchAbortRef.current = null;
+
+      setBranchName('');
+      setBaseBranch('');
+      setShowBaseBranch(false);
+      setError(null);
+      setAvailableBranches([]);
+      setBranchFetchError(null);
+      setIsLoadingBranches(false);
+      setSelectedRemote('local');
+      setAvailableRemotes([]);
+      setRemoteBranches(new Map());
+    }
+  }, [open]);
+
+  // Build branch name list for the autocomplete, filtered by selected remote
+  const branchNames = useMemo(() => {
+    // If "local" is selected, show only local branches
+    if (selectedRemote === 'local') {
+      return availableBranches.filter((b) => !b.isRemote).map((b) => b.name);
+    }
+
+    // If a specific remote is selected, show only branches from that remote (without remote prefix)
+    const remoteBranchList = remoteBranches.get(selectedRemote);
+    if (remoteBranchList) {
+      return remoteBranchList.map((b) => b.name);
+    }
+
+    // Fallback: filter from available branches by remote prefix, stripping the prefix for display
+    const prefix = `${selectedRemote}/`;
+    return availableBranches
+      .filter((b) => b.isRemote && b.name.startsWith(prefix))
+      .map((b) => b.name.substring(prefix.length));
+  }, [availableBranches, selectedRemote, remoteBranches]);
+
+  // Determine if the selected base branch is a remote branch.
+  // When a remote is selected in the source dropdown, the branch is always remote.
+  // Also detect manually entered remote-style names (e.g. "origin/feature")
+  // so the UI shows the "Remote branch — will fetch latest" hint even when
+  // the branch isn't in the fetched availableBranches list.
+  const isRemoteBaseBranch = useMemo(() => {
+    if (!baseBranch) return false;
+    // If the branch list couldn't be fetched, availableBranches is a fallback
+    // and may not reflect reality — suppress the remote hint to avoid misleading the user.
+    if (branchFetchError) return false;
+    // If a remote is explicitly selected, the branch is remote
+    if (selectedRemote !== 'local') return true;
+    // Check fetched branch list first
+    const knownRemote = availableBranches.some((b) => b.name === baseBranch && b.isRemote);
+    if (knownRemote) return true;
+    // Heuristic: if the branch contains '/' and isn't a known local branch,
+    // treat it as a remote ref (e.g. "origin/main")
+    if (baseBranch.includes('/')) {
+      const isKnownLocal = availableBranches.some((b) => b.name === baseBranch && !b.isRemote);
+      return !isKnownLocal;
+    }
+    return false;
+  }, [baseBranch, availableBranches, branchFetchError, selectedRemote]);
+
+  const handleCreate = async () => {
+    if (!branchName.trim()) {
+      setError({ title: 'Branch name is required' });
+      return;
+    }
+
+    // Validate branch name (git-compatible)
+    const validBranchRegex = /^[a-zA-Z0-9._/-]+$/;
+    if (!validBranchRegex.test(branchName)) {
+      setError({
+        title: 'Invalid branch name',
+        description: 'Use only letters, numbers, dots, underscores, hyphens, and slashes.',
+      });
+      return;
+    }
+
+    // Validate baseBranch using the same allowed-character check as branchName to prevent
+    // shell-special characters or invalid git ref names from reaching the API.
+    const trimmedBaseBranch = baseBranch.trim();
+    if (trimmedBaseBranch && !validBranchRegex.test(trimmedBaseBranch)) {
+      setError({
+        title: 'Invalid base branch name',
+        description: 'Use only letters, numbers, dots, underscores, hyphens, and slashes.',
+      });
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.create) {
+        setError({ title: 'Worktree API not available' });
+        return;
+      }
+
+      // Pass the validated baseBranch if one was selected (otherwise defaults to HEAD).
+      // When a remote is selected, prepend the remote name to form the full ref
+      // (e.g. "main" with remote "origin" becomes "origin/main").
+      const effectiveBaseBranch = qualifyRemoteBranch(selectedRemote, trimmedBaseBranch);
+      const result = await api.worktree.create(projectPath, branchName, effectiveBaseBranch);
+
+      if (result.success && result.worktree) {
+        const baseDesc = effectiveBaseBranch ? ` from ${effectiveBaseBranch}` : '';
+        const commitInfo = result.worktree.baseCommitHash
+          ? ` (${result.worktree.baseCommitHash})`
+          : '';
+
+        // Show sync result feedback
+        const syncResult = result.worktree.syncResult;
+        if (syncResult?.diverged) {
+          // Branch had diverged — warn the user
+          toast.warning(`Worktree created for branch "${result.worktree.branch}"`, {
+            description: `${syncResult.message}`,
+            duration: 8000,
+          });
+        } else if (syncResult && !syncResult.synced && syncResult.message) {
+          // Sync was attempted but failed (network error, etc.)
+          toast.warning(`Worktree created for branch "${result.worktree.branch}"`, {
+            description: `Created with local copy. ${syncResult.message}`,
+            duration: 6000,
+          });
+        } else {
+          // Normal success — include commit info if available
+          toast.success(`Worktree created for branch "${result.worktree.branch}"`, {
+            description: result.worktree.isNew
+              ? `New branch created${baseDesc}${commitInfo}`
+              : `Using existing branch${commitInfo}`,
+          });
+        }
+
+        onCreated({ path: result.worktree.path, branch: result.worktree.branch });
+        onOpenChange(false);
+        setBranchName('');
+        setBaseBranch('');
+      } else {
+        setError(parseWorktreeError(result.error || 'Failed to create worktree'));
+      }
+    } catch (err) {
+      setError(
+        parseWorktreeError(err instanceof Error ? err.message : 'Failed to create worktree')
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !isLoading && branchName.trim()) {
+      handleCreate();
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[480px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitBranch className="w-5 h-5" />
+            Create New Worktree
+          </DialogTitle>
+          <DialogDescription>
+            Create a new git worktree with its own branch. This allows you to work on multiple
+            features in parallel.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="branch-name">Branch Name</Label>
+            <Input
+              id="branch-name"
+              placeholder="feature/my-new-feature"
+              value={branchName}
+              onChange={(e) => {
+                setBranchName(e.target.value);
+                setError(null);
+              }}
+              onKeyDown={handleKeyDown}
+              className="font-mono text-sm"
+              autoFocus
+            />
+          </div>
+
+          {/* Base Branch Section - collapsible */}
+          <div className="grid gap-2">
+            <button
+              type="button"
+              onClick={() => setShowBaseBranch(!showBaseBranch)}
+              className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors w-fit"
+            >
+              {showBaseBranch ? (
+                <ChevronDown className="w-3.5 h-3.5" />
+              ) : (
+                <ChevronRight className="w-3.5 h-3.5" />
+              )}
+              <span>Base Branch</span>
+              {baseBranch && !showBaseBranch && (
+                <code className="bg-muted px-1.5 py-0.5 rounded text-xs font-mono ml-1">
+                  {qualifyRemoteBranch(selectedRemote, baseBranch) ?? baseBranch}
+                </code>
+              )}
+            </button>
+
+            {showBaseBranch && (
+              <div className="grid gap-2 pl-1">
+                <div className="flex items-center justify-between">
+                  <p className="text-xs text-muted-foreground">
+                    Select a local or remote branch as the starting point
+                  </p>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      branchFetchAbortRef.current?.abort();
+                      const controller = new AbortController();
+                      branchFetchAbortRef.current = controller;
+                      void fetchBranches(controller.signal);
+                    }}
+                    disabled={isLoadingBranches}
+                    className="h-6 px-2 text-xs"
+                  >
+                    {isLoadingBranches ? (
+                      <Spinner size="xs" className="mr-1" />
+                    ) : (
+                      <RefreshCw className="w-3 h-3 mr-1" />
+                    )}
+                    Refresh
+                  </Button>
+                </div>
+
+                {branchFetchError && (
+                  <div className="flex items-center gap-1.5 text-xs text-destructive">
+                    <AlertCircle className="w-3 h-3 flex-shrink-0" />
+                    <span>Could not load branches: {branchFetchError}</span>
+                  </div>
+                )}
+
+                {/* Remote Selector */}
+                <div className="grid gap-1.5">
+                  <Label htmlFor="remote-select" className="text-xs text-muted-foreground">
+                    Source
+                  </Label>
+                  <Select
+                    value={selectedRemote}
+                    onValueChange={(value) => {
+                      setSelectedRemote(value);
+                      // Clear base branch when switching remotes
+                      setBaseBranch('');
+                    }}
+                    disabled={isLoadingBranches}
+                  >
+                    <SelectTrigger id="remote-select" className="h-8">
+                      <SelectValue placeholder="Select source..." />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="local">
+                        <div className="flex items-center gap-2">
+                          <GitBranch className="w-3.5 h-3.5" />
+                          <span>Local Branches</span>
+                        </div>
+                      </SelectItem>
+                      {availableRemotes.map((remote) => (
+                        <SelectItem key={remote.name} value={remote.name}>
+                          <div className="flex items-center gap-2">
+                            <Cloud className="w-3.5 h-3.5" />
+                            <span>{remote.name}</span>
+                            {remote.url && (
+                              <span className="text-xs text-muted-foreground truncate max-w-[150px]">
+                                ({remote.url})
+                              </span>
+                            )}
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <BranchAutocomplete
+                  value={baseBranch}
+                  onChange={(value) => {
+                    setBaseBranch(value);
+                    setError(null);
+                  }}
+                  branches={branchNames}
+                  placeholder={
+                    selectedRemote === 'local'
+                      ? 'Select local branch (default: HEAD)...'
+                      : `Select branch from ${selectedRemote}...`
+                  }
+                  disabled={isLoadingBranches}
+                  allowCreate={!!branchFetchError || selectedRemote === 'local'}
+                />
+
+                {isRemoteBaseBranch && (
+                  <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                    <Globe className="w-3 h-3" />
+                    <span>Remote branch — will fetch latest before creating worktree</span>
+                  </div>
+                )}
+                {!isRemoteBaseBranch && baseBranch && !branchFetchError && (
+                  <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                    <RefreshCw className="w-3 h-3" />
+                    <span>Will sync with remote tracking branch if available</span>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {error && (
+            <div className="flex items-start gap-2 p-3 rounded-md bg-destructive/10 border border-destructive/20">
+              <AlertCircle className="w-4 h-4 text-destructive mt-0.5 flex-shrink-0" />
+              <div className="space-y-1">
+                <p className="text-sm font-medium text-destructive">{error.title}</p>
+                {error.description && (
+                  <p className="text-xs text-destructive/80">{error.description}</p>
+                )}
+              </div>
+            </div>
+          )}
+
+          <div className="text-xs text-muted-foreground space-y-1">
+            <p>Examples:</p>
+            <ul className="list-disc list-inside pl-2 space-y-0.5">
+              <li>
+                <code className="bg-muted px-1 rounded">feature/user-auth</code>
+              </li>
+              <li>
+                <code className="bg-muted px-1 rounded">fix/login-bug</code>
+              </li>
+              <li>
+                <code className="bg-muted px-1 rounded">hotfix/security-patch</code>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button onClick={handleCreate} disabled={isLoading || !branchName.trim()}>
+            {isLoading ? (
+              <>
+                <Spinner size="sm" className="mr-2" />
+                {baseBranch.trim() ? 'Syncing & Creating...' : 'Creating...'}
+              </>
+            ) : (
+              <>
+                <GitBranch className="w-4 h-4 mr-2" />
+                Create Worktree
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/delete-all-verified-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/delete-all-verified-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7c2f933820234ae75c85ce4cf2f56a97801d642f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/delete-all-verified-dialog.tsx
@@ -0,0 +1,55 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Trash2 } from 'lucide-react';
+
+interface DeleteAllVerifiedDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  verifiedCount: number;
+  onConfirm: () => void;
+}
+
+export function DeleteAllVerifiedDialog({
+  open,
+  onOpenChange,
+  verifiedCount,
+  onConfirm,
+}: DeleteAllVerifiedDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-testid="delete-all-verified-dialog">
+        <DialogHeader>
+          <DialogTitle>Delete All Verified Features</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete all verified features? This action cannot be undone.
+            {verifiedCount > 0 && (
+              <span className="block mt-2 text-yellow-500">
+                {verifiedCount} feature(s) will be deleted.
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            data-testid="confirm-delete-all-verified"
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            Delete All
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/delete-completed-feature-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/delete-completed-feature-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7ed7e3578f0f87c75dc4079ba10de466bcb926c5
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/delete-completed-feature-dialog.tsx
@@ -0,0 +1,61 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Trash2 } from 'lucide-react';
+import { Feature } from '@/store/app-store';
+
+interface DeleteCompletedFeatureDialogProps {
+  feature: Feature | null;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export function DeleteCompletedFeatureDialog({
+  feature,
+  onClose,
+  onConfirm,
+}: DeleteCompletedFeatureDialogProps) {
+  if (!feature) return null;
+
+  return (
+    <Dialog open={!!feature} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent data-testid="delete-completed-confirmation-dialog">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 text-destructive">
+            <Trash2 className="w-5 h-5" />
+            Delete Feature
+          </DialogTitle>
+          <DialogDescription>
+            Are you sure you want to permanently delete this feature?
+            <span className="block mt-2 font-medium text-foreground">
+              &quot;{feature.description?.slice(0, 100)}
+              {(feature.description?.length ?? 0) > 100 ? '...' : ''}&quot;
+            </span>
+            <span className="block mt-2 text-destructive font-medium">
+              This action cannot be undone.
+            </span>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="ghost" onClick={onClose} data-testid="cancel-delete-completed-button">
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            data-testid="confirm-delete-completed-button"
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/delete-worktree-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/delete-worktree-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..050e2dbad23b8bc35e7627bf4d5fde4bbbc2e870
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/delete-worktree-dialog.tsx
@@ -0,0 +1,175 @@
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Trash2, AlertTriangle, FileWarning } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getElectronAPI } from '@/lib/electron';
+import { toast } from 'sonner';
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface DeleteWorktreeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectPath: string;
+  worktree: WorktreeInfo | null;
+  onDeleted: (deletedWorktree: WorktreeInfo, deletedBranch: boolean) => void;
+  /** Number of features assigned to this worktree's branch */
+  affectedFeatureCount?: number;
+  /** Default value for the "delete branch" checkbox */
+  defaultDeleteBranch?: boolean;
+}
+
+export function DeleteWorktreeDialog({
+  open,
+  onOpenChange,
+  projectPath,
+  worktree,
+  onDeleted,
+  affectedFeatureCount = 0,
+  defaultDeleteBranch = false,
+}: DeleteWorktreeDialogProps) {
+  const [deleteBranch, setDeleteBranch] = useState(defaultDeleteBranch);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Reset deleteBranch to default when dialog opens
+  useEffect(() => {
+    if (open) {
+      setDeleteBranch(defaultDeleteBranch);
+    }
+  }, [open, defaultDeleteBranch]);
+
+  const handleDelete = async () => {
+    if (!worktree) return;
+
+    setIsLoading(true);
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.delete) {
+        toast.error('Worktree API not available');
+        return;
+      }
+      const result = await api.worktree.delete(projectPath, worktree.path, deleteBranch);
+
+      if (result.success) {
+        toast.success(`Worktree deleted`, {
+          description: deleteBranch
+            ? `Branch "${worktree.branch}" was also deleted`
+            : `Branch "${worktree.branch}" was kept`,
+        });
+        // Close the dialog first, then notify the parent.
+        // This ensures the dialog unmounts before the parent
+        // triggers potentially heavy state updates (feature branch
+        // resets, worktree refresh), reducing concurrent re-renders
+        // that can cascade into React error #185.
+        onOpenChange(false);
+        setDeleteBranch(false);
+        try {
+          onDeleted(worktree, deleteBranch);
+        } catch (error) {
+          // Prevent errors in onDeleted from propagating to the error boundary
+          console.error('onDeleted callback failed:', error);
+        }
+      } else {
+        toast.error('Failed to delete worktree', {
+          description: result.error,
+        });
+      }
+    } catch (err) {
+      toast.error('Failed to delete worktree', {
+        description: err instanceof Error ? err.message : 'Unknown error',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (!worktree) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Trash2 className="w-5 h-5 text-destructive" />
+            Delete Worktree
+          </DialogTitle>
+          <DialogDescription className="space-y-3">
+            <span>
+              Are you sure you want to delete the worktree for branch{' '}
+              <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code>?
+            </span>
+
+            {affectedFeatureCount > 0 && (
+              <div className="flex items-start gap-2 p-3 rounded-md bg-orange-500/10 border border-orange-500/20 mt-2">
+                <FileWarning className="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" />
+                <span className="text-orange-500 text-sm">
+                  {affectedFeatureCount} feature{affectedFeatureCount !== 1 ? 's' : ''}{' '}
+                  {affectedFeatureCount !== 1 ? 'are' : 'is'} assigned to this branch.{' '}
+                  {affectedFeatureCount !== 1 ? 'They' : 'It'} will be unassigned and moved to the
+                  main worktree.
+                </span>
+              </div>
+            )}
+
+            {worktree.hasChanges && (
+              <div className="flex items-start gap-2 p-3 rounded-md bg-yellow-500/10 border border-yellow-500/20 mt-2">
+                <AlertTriangle className="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" />
+                <span className="text-yellow-500 text-sm">
+                  This worktree has {worktree.changedFilesCount} uncommitted change(s). These will
+                  be lost if you proceed.
+                </span>
+              </div>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex items-center space-x-2 py-4">
+          <Checkbox
+            id="delete-branch"
+            checked={deleteBranch}
+            onCheckedChange={(checked) => setDeleteBranch(checked === true)}
+          />
+          <Label htmlFor="delete-branch" className="text-sm cursor-pointer">
+            Also delete the branch{' '}
+            <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code>
+          </Label>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={handleDelete} disabled={isLoading}>
+            {isLoading ? (
+              <>
+                <Spinner size="sm" className="mr-2" />
+                Deleting...
+              </>
+            ) : (
+              <>
+                <Trash2 className="w-4 h-4 mr-2" />
+                Delete
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/dependency-link-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/dependency-link-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c86b41f9fd94168f745bc4a6bfd227688e7619d6
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/dependency-link-dialog.tsx
@@ -0,0 +1,143 @@
+'use client';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { ArrowDown, ArrowUp, Link2, X } from 'lucide-react';
+import type { Feature } from '@/store/app-store';
+import { cn } from '@/lib/utils';
+import { StatusBadge } from '../components';
+import type { FeatureStatusWithPipeline } from '@automaker/types';
+
+export type DependencyLinkType = 'parent' | 'child';
+
+interface DependencyLinkDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  draggedFeature: Feature | null;
+  targetFeature: Feature | null;
+  onLink: (linkType: DependencyLinkType) => void;
+}
+
+export function DependencyLinkDialog({
+  open,
+  onOpenChange,
+  draggedFeature,
+  targetFeature,
+  onLink,
+}: DependencyLinkDialogProps) {
+  if (!draggedFeature || !targetFeature) return null;
+
+  // Check if a dependency relationship already exists
+  const draggedDependsOnTarget =
+    Array.isArray(draggedFeature.dependencies) &&
+    draggedFeature.dependencies.includes(targetFeature.id);
+  const targetDependsOnDragged =
+    Array.isArray(targetFeature.dependencies) &&
+    targetFeature.dependencies.includes(draggedFeature.id);
+  const existingLink = draggedDependsOnTarget || targetDependsOnDragged;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-testid="dependency-link-dialog" className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Link2 className="w-5 h-5" />
+            Link Features
+          </DialogTitle>
+          <DialogDescription>
+            Create a dependency relationship between these features.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4 space-y-4">
+          {/* Dragged feature */}
+          <div className="p-3 rounded-lg border bg-muted/30">
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-xs text-muted-foreground">Dragged Feature</span>
+              <StatusBadge status={draggedFeature.status as FeatureStatusWithPipeline} size="sm" />
+            </div>
+            <div className="text-sm font-medium line-clamp-3 break-words">
+              {draggedFeature.description}
+            </div>
+            <div className="text-xs text-muted-foreground/70 mt-1">{draggedFeature.category}</div>
+          </div>
+
+          {/* Arrow indicating direction */}
+          <div className="flex justify-center">
+            <ArrowDown className="w-5 h-5 text-muted-foreground" />
+          </div>
+
+          {/* Target feature */}
+          <div className="p-3 rounded-lg border bg-muted/30">
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-xs text-muted-foreground">Target Feature</span>
+              <StatusBadge status={targetFeature.status as FeatureStatusWithPipeline} size="sm" />
+            </div>
+            <div className="text-sm font-medium line-clamp-3 break-words">
+              {targetFeature.description}
+            </div>
+            <div className="text-xs text-muted-foreground/70 mt-1">{targetFeature.category}</div>
+          </div>
+
+          {/* Existing link warning */}
+          {existingLink && (
+            <div className="p-3 rounded-lg border border-yellow-500/50 bg-yellow-500/10 text-sm text-yellow-600 dark:text-yellow-400">
+              {draggedDependsOnTarget
+                ? 'The dragged feature already depends on the target feature.'
+                : 'The target feature already depends on the dragged feature.'}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="flex flex-col gap-2 sm:flex-col sm:!justify-start">
+          {/* Set as Parent - top */}
+          <Button
+            variant="default"
+            onClick={() => onLink('child')}
+            disabled={draggedDependsOnTarget}
+            className={cn('w-full', draggedDependsOnTarget && 'opacity-50 cursor-not-allowed')}
+            title={
+              draggedDependsOnTarget
+                ? 'This would create a circular dependency'
+                : 'Make target feature depend on dragged (dragged is parent)'
+            }
+            data-testid="link-as-parent"
+          >
+            <ArrowUp className="w-4 h-4 mr-2" />
+            Set as Parent
+            <span className="text-xs ml-1 opacity-70">(target depends on this)</span>
+          </Button>
+          {/* Set as Child - middle */}
+          <Button
+            variant="default"
+            onClick={() => onLink('parent')}
+            disabled={targetDependsOnDragged}
+            className={cn('w-full', targetDependsOnDragged && 'opacity-50 cursor-not-allowed')}
+            title={
+              targetDependsOnDragged
+                ? 'This would create a circular dependency'
+                : 'Make dragged feature depend on target (target is parent)'
+            }
+            data-testid="link-as-child"
+          >
+            <ArrowDown className="w-4 h-4 mr-2" />
+            Set as Child
+            <span className="text-xs ml-1 opacity-70">(depends on target)</span>
+          </Button>
+          {/* Cancel - bottom */}
+          <Button variant="outline" onClick={() => onOpenChange(false)} className="w-full">
+            <X className="w-4 h-4 mr-2" />
+            Cancel
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/dependency-tree-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/dependency-tree-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f31323b32c871b5c7f043364c8ff10ed655c813c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/dependency-tree-dialog.tsx
@@ -0,0 +1,211 @@
+// @ts-nocheck - dependency tree visualization with recursive feature relationships
+import { useState, useEffect } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Feature } from '@/store/app-store';
+import { AlertCircle, CheckCircle2, Circle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface DependencyTreeDialogProps {
+  open: boolean;
+  onClose: () => void;
+  feature: Feature | null;
+  allFeatures: Feature[];
+}
+
+export function DependencyTreeDialog({
+  open,
+  onClose,
+  feature,
+  allFeatures,
+}: DependencyTreeDialogProps) {
+  const [dependencyTree, setDependencyTree] = useState<{
+    dependencies: Feature[];
+    dependents: Feature[];
+  }>({ dependencies: [], dependents: [] });
+
+  useEffect(() => {
+    if (!feature) return;
+
+    // Find features this depends on
+    const dependencies = (feature.dependencies || [])
+      .map((depId) => allFeatures.find((f) => f.id === depId))
+      .filter((f): f is Feature => f !== undefined);
+
+    // Find features that depend on this one
+    const dependents = allFeatures.filter((f) => f.dependencies?.includes(feature.id));
+
+    setDependencyTree({ dependencies, dependents });
+  }, [feature, allFeatures]);
+
+  if (!feature) return null;
+
+  const getStatusIcon = (status: Feature['status']) => {
+    switch (status) {
+      case 'completed':
+      case 'verified':
+        return <CheckCircle2 className="w-4 h-4 text-green-500" />;
+      case 'in_progress':
+      case 'waiting_approval':
+        return <Circle className="w-4 h-4 text-blue-500 fill-blue-500/20" />;
+      default:
+        return <Circle className="w-4 h-4 text-muted-foreground/50" />;
+    }
+  };
+
+  const getPriorityBadge = (priority?: number) => {
+    if (!priority) return null;
+    return (
+      <span
+        className={cn(
+          'text-xs px-1.5 py-0.5 rounded font-medium',
+          priority === 1 && 'bg-red-500/20 text-red-500',
+          priority === 2 && 'bg-yellow-500/20 text-yellow-500',
+          priority === 3 && 'bg-blue-500/20 text-blue-500'
+        )}
+      >
+        P{priority}
+      </span>
+    );
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="max-w-xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Dependency Tree</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6 mt-4">
+          {/* Current Feature */}
+          <div className="border-2 border-primary rounded-lg p-4 bg-primary/5">
+            <div className="flex items-center gap-3 mb-2">
+              {getStatusIcon(feature.status)}
+              <h3 className="font-semibold text-sm">Current Feature</h3>
+              {getPriorityBadge(feature.priority)}
+            </div>
+            <p className="text-sm text-muted-foreground">{feature.description}</p>
+            <p className="text-xs text-muted-foreground/70 mt-2">Category: {feature.category}</p>
+          </div>
+
+          {/* Dependencies (what this feature needs) */}
+          <div>
+            <div className="flex items-center gap-2 mb-3">
+              <h3 className="font-semibold text-sm">
+                Dependencies ({dependencyTree.dependencies.length})
+              </h3>
+              <span className="text-xs text-muted-foreground">This feature requires:</span>
+            </div>
+
+            {dependencyTree.dependencies.length === 0 ? (
+              <div className="text-sm text-muted-foreground/70 italic border border-dashed rounded-lg p-4 text-center">
+                No dependencies - this feature can be started independently
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {dependencyTree.dependencies.map((dep) => (
+                  <div
+                    key={dep.id}
+                    className={cn(
+                      'border rounded-lg p-3 transition-colors',
+                      dep.status === 'completed' || dep.status === 'verified'
+                        ? 'bg-green-500/5 border-green-500/20'
+                        : 'bg-muted/30 border-border'
+                    )}
+                  >
+                    <div className="flex items-center gap-3 mb-1">
+                      {getStatusIcon(dep.status)}
+                      <span className="text-sm font-medium flex-1">
+                        {dep.description.slice(0, 100)}
+                        {dep.description.length > 100 && '...'}
+                      </span>
+                      {getPriorityBadge(dep.priority)}
+                    </div>
+                    <div className="flex items-center gap-3 ml-7">
+                      <span className="text-xs text-muted-foreground">{dep.category}</span>
+                      <span
+                        className={cn(
+                          'text-xs px-2 py-0.5 rounded-full',
+                          dep.status === 'completed' || dep.status === 'verified'
+                            ? 'bg-green-500/20 text-green-600'
+                            : dep.status === 'in_progress'
+                              ? 'bg-blue-500/20 text-blue-600'
+                              : 'bg-muted text-muted-foreground'
+                        )}
+                      >
+                        {(dep.status || 'backlog').replace(/_/g, ' ')}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Dependents (what depends on this feature) */}
+          <div>
+            <div className="flex items-center gap-2 mb-3">
+              <h3 className="font-semibold text-sm">
+                Dependents ({dependencyTree.dependents.length})
+              </h3>
+              <span className="text-xs text-muted-foreground">Features blocked by this:</span>
+            </div>
+
+            {dependencyTree.dependents.length === 0 ? (
+              <div className="text-sm text-muted-foreground/70 italic border border-dashed rounded-lg p-4 text-center">
+                No dependents - no other features are waiting on this one
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {dependencyTree.dependents.map((dependent) => (
+                  <div key={dependent.id} className="border rounded-lg p-3 bg-muted/30">
+                    <div className="flex items-center gap-3 mb-1">
+                      {getStatusIcon(dependent.status)}
+                      <span className="text-sm font-medium flex-1">
+                        {dependent.description.slice(0, 100)}
+                        {dependent.description.length > 100 && '...'}
+                      </span>
+                      {getPriorityBadge(dependent.priority)}
+                    </div>
+                    <div className="flex items-center gap-3 ml-7">
+                      <span className="text-xs text-muted-foreground">{dependent.category}</span>
+                      <span
+                        className={cn(
+                          'text-xs px-2 py-0.5 rounded-full',
+                          dependent.status === 'completed' || dependent.status === 'verified'
+                            ? 'bg-green-500/20 text-green-600'
+                            : dependent.status === 'in_progress'
+                              ? 'bg-blue-500/20 text-blue-600'
+                              : 'bg-muted text-muted-foreground'
+                        )}
+                      >
+                        {(dependent.status || 'backlog').replace(/_/g, ' ')}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Warning for incomplete dependencies */}
+          {dependencyTree.dependencies.some(
+            (d) => d.status !== 'completed' && d.status !== 'verified'
+          ) && (
+            <div className="flex items-start gap-3 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
+              <AlertCircle className="w-5 h-5 text-yellow-600 shrink-0 mt-0.5" />
+              <div className="text-sm">
+                <p className="font-medium text-yellow-700 dark:text-yellow-500">
+                  Incomplete Dependencies
+                </p>
+                <p className="text-yellow-600 dark:text-yellow-400 mt-1">
+                  This feature has dependencies that aren't completed yet. Consider completing them
+                  first for a smoother implementation.
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/discard-worktree-changes-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/discard-worktree-changes-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..72b77204272c4c5ab22e4bdb0d306d891f745507
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/discard-worktree-changes-dialog.tsx
@@ -0,0 +1,508 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Undo2,
+  FilePlus,
+  FileX,
+  FilePen,
+  FileText,
+  File,
+  ChevronDown,
+  ChevronRight,
+  AlertTriangle,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getElectronAPI } from '@/lib/electron';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import { TruncatedFilePath } from '@/components/ui/truncated-file-path';
+import type { FileStatus } from '@/types/electron';
+import { parseDiff, type ParsedFileDiff } from '@/lib/diff-utils';
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface DiscardWorktreeChangesDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  onDiscarded: () => void;
+}
+
+const getFileIcon = (status: string) => {
+  switch (status) {
+    case 'A':
+    case '?':
+      return <FilePlus className="w-3.5 h-3.5 text-green-500 flex-shrink-0" />;
+    case 'D':
+      return <FileX className="w-3.5 h-3.5 text-red-500 flex-shrink-0" />;
+    case 'M':
+    case 'U':
+      return <FilePen className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />;
+    case 'R':
+    case 'C':
+      return <File className="w-3.5 h-3.5 text-blue-500 flex-shrink-0" />;
+    default:
+      return <FileText className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />;
+  }
+};
+
+const getStatusLabel = (status: string) => {
+  switch (status) {
+    case 'A':
+      return 'Added';
+    case '?':
+      return 'Untracked';
+    case 'D':
+      return 'Deleted';
+    case 'M':
+      return 'Modified';
+    case 'U':
+      return 'Updated';
+    case 'R':
+      return 'Renamed';
+    case 'C':
+      return 'Copied';
+    default:
+      return 'Changed';
+  }
+};
+
+const getStatusBadgeColor = (status: string) => {
+  switch (status) {
+    case 'A':
+    case '?':
+      return 'bg-green-500/20 text-green-400 border-green-500/30';
+    case 'D':
+      return 'bg-red-500/20 text-red-400 border-red-500/30';
+    case 'M':
+    case 'U':
+      return 'bg-amber-500/20 text-amber-400 border-amber-500/30';
+    case 'R':
+    case 'C':
+      return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+    default:
+      return 'bg-muted text-muted-foreground border-border';
+  }
+};
+
+const bgClass = {
+  context: 'bg-transparent',
+  addition: 'bg-green-500/10',
+  deletion: 'bg-red-500/10',
+  header: 'bg-blue-500/10',
+};
+
+const textClass = {
+  context: 'text-foreground-secondary',
+  addition: 'text-green-400',
+  deletion: 'text-red-400',
+  header: 'text-blue-400',
+};
+
+const prefix = {
+  context: ' ',
+  addition: '+',
+  deletion: '-',
+  header: '',
+};
+
+function DiffLine({
+  type,
+  content,
+  lineNumber,
+}: {
+  type: 'context' | 'addition' | 'deletion' | 'header';
+  content: string;
+  lineNumber?: { old?: number; new?: number };
+}) {
+  if (type === 'header') {
+    return (
+      <div className={cn('px-2 py-1 font-mono text-xs', bgClass[type], textClass[type])}>
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('flex font-mono text-xs', bgClass[type])}>
+      <span className="w-10 flex-shrink-0 text-right pr-1.5 text-muted-foreground select-none border-r border-border-glass text-[10px]">
+        {lineNumber?.old ?? ''}
+      </span>
+      <span className="w-10 flex-shrink-0 text-right pr-1.5 text-muted-foreground select-none border-r border-border-glass text-[10px]">
+        {lineNumber?.new ?? ''}
+      </span>
+      <span className={cn('w-4 flex-shrink-0 text-center select-none', textClass[type])}>
+        {prefix[type]}
+      </span>
+      <span className={cn('flex-1 px-1.5 whitespace-pre-wrap break-all', textClass[type])}>
+        {content || '\u00A0'}
+      </span>
+    </div>
+  );
+}
+
+export function DiscardWorktreeChangesDialog({
+  open,
+  onOpenChange,
+  worktree,
+  onDiscarded,
+}: DiscardWorktreeChangesDialogProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // File selection state
+  const [files, setFiles] = useState<FileStatus[]>([]);
+  const [diffContent, setDiffContent] = useState('');
+  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set());
+  const [expandedFile, setExpandedFile] = useState<string | null>(null);
+  const [isLoadingDiffs, setIsLoadingDiffs] = useState(false);
+
+  // Parse diffs
+  const parsedDiffs = useMemo(() => parseDiff(diffContent), [diffContent]);
+
+  // Create a map of file path to parsed diff for quick lookup
+  const diffsByFile = useMemo(() => {
+    const map = new Map<string, ParsedFileDiff>();
+    for (const diff of parsedDiffs) {
+      map.set(diff.filePath, diff);
+    }
+    return map;
+  }, [parsedDiffs]);
+
+  // Load diffs when dialog opens
+  useEffect(() => {
+    if (open && worktree) {
+      setIsLoadingDiffs(true);
+      setFiles([]);
+      setDiffContent('');
+      setSelectedFiles(new Set());
+      setExpandedFile(null);
+      setError(null);
+
+      let cancelled = false;
+
+      const loadDiffs = async () => {
+        try {
+          const api = getElectronAPI();
+          if (api?.git?.getDiffs) {
+            const result = await api.git.getDiffs(worktree.path);
+            if (result.success) {
+              const fileList = result.files ?? [];
+              if (!cancelled) setError(null);
+              if (!cancelled) setFiles(fileList);
+              if (!cancelled) setDiffContent(result.diff ?? '');
+              if (!cancelled) setSelectedFiles(new Set());
+            } else {
+              if (!cancelled) setError(result.error || 'Failed to fetch diffs');
+            }
+          } else {
+            if (!cancelled) setError('Diff API unavailable');
+          }
+        } catch (err) {
+          if (cancelled) return;
+          console.warn('Failed to load diffs for discard dialog:', err);
+          setError(err instanceof Error ? err.message : String(err));
+        } finally {
+          if (!cancelled) setIsLoadingDiffs(false);
+        }
+      };
+
+      loadDiffs();
+
+      return () => {
+        cancelled = true;
+      };
+    }
+  }, [open, worktree]);
+
+  const handleToggleFile = useCallback((filePath: string) => {
+    setSelectedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(filePath)) {
+        next.delete(filePath);
+      } else {
+        next.add(filePath);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleToggleAll = useCallback(() => {
+    setSelectedFiles((prev) => {
+      if (prev.size === files.length) {
+        return new Set();
+      }
+      return new Set(files.map((f) => f.path));
+    });
+  }, [files]);
+
+  const handleFileClick = useCallback((filePath: string) => {
+    setExpandedFile((prev) => (prev === filePath ? null : filePath));
+  }, []);
+
+  const handleDiscard = async () => {
+    if (!worktree || selectedFiles.size === 0) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const api = getHttpApiClient();
+
+      // Pass selected files if not all files are selected
+      const filesToDiscard =
+        selectedFiles.size === files.length ? undefined : Array.from(selectedFiles);
+
+      const result = await api.worktree.discardChanges(worktree.path, filesToDiscard);
+
+      if (result.success && result.result) {
+        if (result.result.discarded) {
+          const fileCount = filesToDiscard ? filesToDiscard.length : selectedFiles.size;
+          toast.success('Changes discarded', {
+            description: `Discarded ${fileCount} ${fileCount === 1 ? 'file' : 'files'} in ${worktree.branch}`,
+          });
+          onDiscarded();
+          onOpenChange(false);
+        } else {
+          toast.info('No changes to discard', {
+            description: result.result.message,
+          });
+        }
+      } else {
+        setError(result.error || 'Failed to discard changes');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to discard changes');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (!worktree) return null;
+
+  const allSelected = selectedFiles.size === files.length && files.length > 0;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[700px] max-h-[85vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Undo2 className="w-5 h-5 text-destructive" />
+            Discard Changes
+          </DialogTitle>
+          <DialogDescription>
+            Select which changes to discard in the{' '}
+            <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code> worktree.
+            This action cannot be undone.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3 py-2 min-h-0 flex-1 overflow-hidden">
+          {/* File Selection */}
+          <div className="flex flex-col min-h-0">
+            <div className="flex items-center justify-between mb-1.5">
+              <Label className="text-sm font-medium flex items-center gap-2">
+                Files to discard
+                {isLoadingDiffs ? (
+                  <Spinner size="sm" />
+                ) : (
+                  <span className="text-xs text-muted-foreground font-normal">
+                    ({selectedFiles.size}/{files.length} selected)
+                  </span>
+                )}
+              </Label>
+              {files.length > 0 && (
+                <button
+                  type="button"
+                  onClick={handleToggleAll}
+                  className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {allSelected ? 'Deselect all' : 'Select all'}
+                </button>
+              )}
+            </div>
+
+            {isLoadingDiffs ? (
+              <div className="flex items-center justify-center py-6 text-muted-foreground border border-border rounded-lg">
+                <Spinner size="sm" className="mr-2" />
+                <span className="text-sm">Loading changes...</span>
+              </div>
+            ) : files.length === 0 ? (
+              <div className="flex items-center justify-center py-6 text-muted-foreground border border-border rounded-lg">
+                <span className="text-sm">No changes detected</span>
+              </div>
+            ) : (
+              <div className="border border-border rounded-lg overflow-hidden max-h-[300px] overflow-y-auto scrollbar-visible">
+                {files.map((file) => {
+                  const isChecked = selectedFiles.has(file.path);
+                  const isExpanded = expandedFile === file.path;
+                  const fileDiff = diffsByFile.get(file.path);
+                  const additions = fileDiff
+                    ? fileDiff.hunks.reduce(
+                        (acc, hunk) => acc + hunk.lines.filter((l) => l.type === 'addition').length,
+                        0
+                      )
+                    : 0;
+                  const deletions = fileDiff
+                    ? fileDiff.hunks.reduce(
+                        (acc, hunk) => acc + hunk.lines.filter((l) => l.type === 'deletion').length,
+                        0
+                      )
+                    : 0;
+
+                  const fileButtonId = `file-btn-${file.path.replace(/[^a-zA-Z0-9]/g, '-')}`;
+
+                  return (
+                    <div key={file.path} className="border-b border-border last:border-b-0">
+                      <div
+                        className={cn(
+                          'flex items-center gap-2 px-3 py-1.5 hover:bg-accent/50 transition-colors group',
+                          isExpanded && 'bg-accent/30'
+                        )}
+                      >
+                        {/* Checkbox */}
+                        <Checkbox
+                          checked={isChecked}
+                          onCheckedChange={() => handleToggleFile(file.path)}
+                          className="flex-shrink-0"
+                          aria-labelledby={fileButtonId}
+                        />
+
+                        {/* Clickable file row to show diff */}
+                        <button
+                          id={fileButtonId}
+                          type="button"
+                          onClick={() => handleFileClick(file.path)}
+                          aria-expanded={isExpanded}
+                          className="flex items-center gap-2 flex-1 min-w-0 text-left"
+                        >
+                          {isExpanded ? (
+                            <ChevronDown className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+                          ) : (
+                            <ChevronRight className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+                          )}
+                          {getFileIcon(file.status)}
+                          <TruncatedFilePath
+                            path={file.path}
+                            className="text-xs font-mono flex-1 text-foreground"
+                          />
+                          <span
+                            className={cn(
+                              'text-[10px] px-1.5 py-0.5 rounded border font-medium flex-shrink-0',
+                              getStatusBadgeColor(file.status)
+                            )}
+                          >
+                            {getStatusLabel(file.status)}
+                          </span>
+                          {additions > 0 && (
+                            <span className="text-[10px] text-green-400 flex-shrink-0">
+                              +{additions}
+                            </span>
+                          )}
+                          {deletions > 0 && (
+                            <span className="text-[10px] text-red-400 flex-shrink-0">
+                              -{deletions}
+                            </span>
+                          )}
+                        </button>
+                      </div>
+
+                      {/* Expanded diff view */}
+                      {isExpanded && fileDiff && (
+                        <div className="bg-background border-t border-border max-h-[200px] overflow-y-auto scrollbar-visible">
+                          {fileDiff.hunks.map((hunk, hunkIndex) => (
+                            <div
+                              key={hunkIndex}
+                              className="border-b border-border-glass last:border-b-0"
+                            >
+                              {hunk.lines.map((line, lineIndex) => (
+                                <DiffLine
+                                  key={lineIndex}
+                                  type={line.type}
+                                  content={line.content}
+                                  lineNumber={line.lineNumber}
+                                />
+                              ))}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                      {isExpanded && !fileDiff && (
+                        <div className="px-4 py-3 text-xs text-muted-foreground bg-background border-t border-border">
+                          {file.status === '?' ? (
+                            <span>New file - diff preview not available</span>
+                          ) : file.status === 'D' ? (
+                            <span>File deleted</span>
+                          ) : (
+                            <span>Diff content not available</span>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          {/* Warning message */}
+          <div className="flex items-start gap-2 p-3 rounded-lg bg-destructive/10 border border-destructive/20">
+            <AlertTriangle className="w-4 h-4 text-destructive flex-shrink-0 mt-0.5" />
+            <p className="text-xs text-destructive">
+              This will permanently discard the selected changes. Staged changes will be unstaged,
+              modifications to tracked files will be reverted, and untracked files will be deleted.
+              This action cannot be undone.
+            </p>
+          </div>
+
+          {error && <p className="text-sm text-destructive">{error}</p>}
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleDiscard}
+            disabled={isLoading || selectedFiles.size === 0}
+          >
+            {isLoading ? (
+              <>
+                <Spinner size="sm" className="mr-2" />
+                Discarding...
+              </>
+            ) : (
+              <>
+                <Undo2 className="w-4 h-4 mr-2" />
+                Discard
+                {selectedFiles.size > 0 && selectedFiles.size < files.length
+                  ? ` (${selectedFiles.size} file${selectedFiles.size > 1 ? 's' : ''})`
+                  : selectedFiles.size > 0
+                    ? ` All (${selectedFiles.size} file${selectedFiles.size > 1 ? 's' : ''})`
+                    : ''}
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/duplicate-count-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/duplicate-count-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c1d39544ffdb0da9d5f33749a898e254f6adb05
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/duplicate-count-dialog.tsx
@@ -0,0 +1,110 @@
+import { useState, useEffect } from 'react';
+import { Copy } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { HotkeyButton } from '@/components/ui/hotkey-button';
+import { Input } from '@/components/ui/input';
+
+interface DuplicateCountDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: (count: number) => void;
+  featureTitle?: string;
+}
+
+export function DuplicateCountDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  featureTitle,
+}: DuplicateCountDialogProps) {
+  const [count, setCount] = useState(2);
+
+  // Reset count when dialog opens
+  useEffect(() => {
+    if (open) {
+      setCount(2);
+    }
+  }, [open]);
+
+  const handleConfirm = () => {
+    if (count >= 1 && count <= 50) {
+      onConfirm(count);
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-popover border-border max-w-sm">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Copy className="w-5 h-5 text-primary" />
+            Duplicate as Child ×N
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            Creates a chain of duplicates where each is a child of the previous, so they execute
+            sequentially.
+            {featureTitle && (
+              <span className="block mt-1 text-xs">
+                Source: <span className="font-medium">{featureTitle}</span>
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-2">
+          <label htmlFor="duplicate-count" className="text-sm text-muted-foreground mb-2 block">
+            Number of copies
+          </label>
+          <Input
+            id="duplicate-count"
+            type="number"
+            min={1}
+            max={50}
+            value={count}
+            onChange={(e) => {
+              const val = parseInt(e.target.value, 10);
+              if (!isNaN(val)) {
+                setCount(Math.min(50, Math.max(1, val)));
+              }
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                handleConfirm();
+              }
+            }}
+            className="w-full"
+            autoFocus
+          />
+          <p className="text-xs text-muted-foreground mt-1.5">Enter a number between 1 and 50</p>
+        </div>
+
+        <DialogFooter className="gap-2 sm:gap-2 pt-2">
+          <Button variant="ghost" onClick={() => onOpenChange(false)} className="px-4">
+            Cancel
+          </Button>
+          <HotkeyButton
+            variant="default"
+            onClick={handleConfirm}
+            hotkey={{ key: 'Enter', cmdCtrl: true }}
+            hotkeyActive={open}
+            className="px-4"
+            disabled={count < 1 || count > 50}
+          >
+            <Copy className="w-4 h-4 mr-2" />
+            Create {count} {count === 1 ? 'Copy' : 'Copies'}
+          </HotkeyButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/edit-feature-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/edit-feature-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dde58c612d8dcb158af84e2bd18319c76f9d1139
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/edit-feature-dialog.tsx
@@ -0,0 +1,653 @@
+// @ts-nocheck - form state management with partial feature updates and validation
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { HotkeyButton } from '@/components/ui/hotkey-button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { CategoryAutocomplete } from '@/components/ui/category-autocomplete';
+import { DependencySelector } from '@/components/ui/dependency-selector';
+import {
+  DescriptionImageDropZone,
+  FeatureImagePath as DescriptionImagePath,
+  FeatureTextFilePath as DescriptionTextFilePath,
+  ImagePreviewMap,
+} from '@/components/ui/description-image-dropzone';
+import { GitBranch, Cpu, FolderKanban, Settings2 } from 'lucide-react';
+import { useNavigate } from '@tanstack/react-router';
+import { toast } from 'sonner';
+import { cn, migrateModelId, normalizeModelEntry } from '@/lib/utils';
+import { Feature, ModelAlias, ThinkingLevel, PlanningMode } from '@/store/app-store';
+import type { ReasoningEffort, PhaseModelEntry, DescriptionHistoryEntry } from '@automaker/types';
+import {
+  PrioritySelector,
+  WorkModeSelector,
+  PlanningModeSelect,
+  EnhanceWithAI,
+  EnhancementHistoryButton,
+  PipelineExclusionControls,
+  type EnhancementMode,
+} from '../shared';
+import type { WorkMode } from '../shared';
+import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { DependencyTreeDialog } from './dependency-tree-dialog';
+
+interface EditFeatureDialogProps {
+  feature: Feature | null;
+  onClose: () => void;
+  onUpdate: (
+    featureId: string,
+    updates: {
+      title: string;
+      category: string;
+      description: string;
+      skipTests: boolean;
+      model: ModelAlias;
+      thinkingLevel: ThinkingLevel;
+      reasoningEffort: ReasoningEffort;
+      providerId?: string;
+      imagePaths: DescriptionImagePath[];
+      textFilePaths: DescriptionTextFilePath[];
+      branchName: string; // Can be empty string to use current branch
+      priority: number;
+      planningMode: PlanningMode;
+      requirePlanApproval: boolean;
+      dependencies?: string[];
+      childDependencies?: string[]; // Feature IDs that should depend on this feature
+      excludedPipelineSteps?: string[]; // Pipeline step IDs to skip for this feature
+    },
+    descriptionHistorySource?: 'enhance' | 'edit',
+    enhancementMode?: EnhancementMode,
+    preEnhancementDescription?: string
+  ) => void;
+  categorySuggestions: string[];
+  branchSuggestions: string[];
+  branchCardCounts?: Record<string, number>; // Map of branch name to unarchived card count
+  currentBranch?: string;
+  isMaximized: boolean;
+  allFeatures: Feature[];
+  projectPath?: string;
+}
+
+export function EditFeatureDialog({
+  feature,
+  onClose,
+  onUpdate,
+  categorySuggestions,
+  branchSuggestions,
+  branchCardCounts,
+  currentBranch,
+  isMaximized,
+  allFeatures,
+  projectPath,
+}: EditFeatureDialogProps) {
+  const navigate = useNavigate();
+  const [editingFeature, setEditingFeature] = useState<Feature | null>(feature);
+  // Derive initial workMode from feature's branchName
+  const [workMode, setWorkMode] = useState<WorkMode>(() => {
+    // If feature has a branchName, it's using 'custom' mode
+    // Otherwise, it's on 'current' branch (no worktree isolation)
+    return feature?.branchName ? 'custom' : 'current';
+  });
+  const [editFeaturePreviewMap, setEditFeaturePreviewMap] = useState<ImagePreviewMap>(
+    () => new Map()
+  );
+  const [showDependencyTree, setShowDependencyTree] = useState(false);
+  const [planningMode, setPlanningMode] = useState<PlanningMode>(feature?.planningMode ?? 'skip');
+  const [requirePlanApproval, setRequirePlanApproval] = useState(
+    feature?.requirePlanApproval ?? false
+  );
+
+  // Model selection state - migrate legacy model IDs to canonical format
+  const [modelEntry, setModelEntry] = useState<PhaseModelEntry>(() =>
+    normalizeModelEntry({
+      model: migrateModelId(feature?.model) || 'claude-opus',
+      thinkingLevel: feature?.thinkingLevel || 'none',
+      reasoningEffort: feature?.reasoningEffort || 'none',
+      providerId: feature?.providerId,
+    })
+  );
+
+  // Track the source of description changes for history
+  const [descriptionChangeSource, setDescriptionChangeSource] = useState<
+    { source: 'enhance'; mode: EnhancementMode } | 'edit' | null
+  >(null);
+  // Track the original description when the dialog opened for comparison
+  const [originalDescription, setOriginalDescription] = useState(feature?.description ?? '');
+  // Track the description before enhancement (so it can be restored)
+  const [preEnhancementDescription, setPreEnhancementDescription] = useState<string | null>(null);
+  // Local history state for real-time display (combines persisted + session history)
+  const [localHistory, setLocalHistory] = useState<DescriptionHistoryEntry[]>(
+    feature?.descriptionHistory ?? []
+  );
+
+  // Dependency state
+  const [parentDependencies, setParentDependencies] = useState<string[]>(
+    feature?.dependencies ?? []
+  );
+  // Child dependencies are features that have this feature in their dependencies
+  const [childDependencies, setChildDependencies] = useState<string[]>(() => {
+    if (!feature) return [];
+    return allFeatures.filter((f) => f.dependencies?.includes(feature.id)).map((f) => f.id);
+  });
+  // Track original child dependencies to detect changes
+  const [originalChildDependencies, setOriginalChildDependencies] = useState<string[]>(() => {
+    if (!feature) return [];
+    return allFeatures.filter((f) => f.dependencies?.includes(feature.id)).map((f) => f.id);
+  });
+
+  // Pipeline exclusion state
+  const [excludedPipelineSteps, setExcludedPipelineSteps] = useState<string[]>(
+    feature?.excludedPipelineSteps ?? []
+  );
+
+  useEffect(() => {
+    setEditingFeature(feature);
+    if (feature) {
+      setPlanningMode(feature.planningMode ?? 'skip');
+      setRequirePlanApproval(feature.requirePlanApproval ?? false);
+      // Derive workMode from feature's branchName
+      setWorkMode(feature.branchName ? 'custom' : 'current');
+      // Reset history tracking state
+      setOriginalDescription(feature.description ?? '');
+      setDescriptionChangeSource(null);
+      setPreEnhancementDescription(null);
+      setLocalHistory(feature.descriptionHistory ?? []);
+      // Reset model entry - migrate legacy model IDs
+      setModelEntry(
+        normalizeModelEntry({
+          model: migrateModelId(feature.model) || 'claude-opus',
+          thinkingLevel: feature.thinkingLevel || 'none',
+          reasoningEffort: feature.reasoningEffort || 'none',
+          providerId: feature.providerId,
+        })
+      );
+      // Reset dependency state
+      setParentDependencies(feature.dependencies ?? []);
+      const childDeps = allFeatures
+        .filter((f) => f.dependencies?.includes(feature.id))
+        .map((f) => f.id);
+      setChildDependencies(childDeps);
+      setOriginalChildDependencies(childDeps);
+      // Reset pipeline exclusion state
+      setExcludedPipelineSteps(feature.excludedPipelineSteps ?? []);
+    } else {
+      setEditFeaturePreviewMap(new Map());
+      setDescriptionChangeSource(null);
+      setPreEnhancementDescription(null);
+      setLocalHistory([]);
+      setParentDependencies([]);
+      setChildDependencies([]);
+      setOriginalChildDependencies([]);
+      setExcludedPipelineSteps([]);
+    }
+  }, [feature, allFeatures]);
+
+  // Clear requirePlanApproval when planning mode is skip (lite supports approval)
+  useEffect(() => {
+    if (planningMode === 'skip') {
+      setRequirePlanApproval(false);
+    }
+  }, [planningMode]);
+
+  const handleModelChange = (entry: PhaseModelEntry) => {
+    setModelEntry(entry);
+  };
+
+  const handleUpdate = () => {
+    if (!editingFeature) return;
+
+    // Validate branch selection for custom mode
+    const isBranchSelectorEnabled =
+      editingFeature.status === 'backlog' || editingFeature.status === 'merge_conflict';
+    if (isBranchSelectorEnabled && workMode === 'custom' && !editingFeature.branchName?.trim()) {
+      toast.error('Please select a branch name');
+      return;
+    }
+
+    const normalizedEntry = normalizeModelEntry(modelEntry);
+
+    // For 'current' mode, use empty string (work on current branch)
+    // For 'auto' mode, use empty string (will be auto-generated in use-board-actions)
+    // For 'custom' mode, use the specified branch name
+    const finalBranchName = workMode === 'custom' ? editingFeature.branchName || '' : '';
+
+    // Check if child dependencies changed
+    const childDepsChanged =
+      childDependencies.length !== originalChildDependencies.length ||
+      childDependencies.some((id) => !originalChildDependencies.includes(id)) ||
+      originalChildDependencies.some((id) => !childDependencies.includes(id));
+
+    const updates = {
+      title: editingFeature.title ?? '',
+      category: editingFeature.category,
+      description: editingFeature.description,
+      skipTests: editingFeature.skipTests ?? false,
+      model: normalizedEntry.model,
+      thinkingLevel: normalizedEntry.thinkingLevel,
+      reasoningEffort: normalizedEntry.reasoningEffort,
+      providerId: normalizedEntry.providerId,
+      imagePaths: editingFeature.imagePaths ?? [],
+      textFilePaths: editingFeature.textFilePaths ?? [],
+      branchName: finalBranchName,
+      priority: editingFeature.priority ?? 2,
+      planningMode,
+      requirePlanApproval,
+      workMode,
+      dependencies: parentDependencies,
+      childDependencies: childDepsChanged ? childDependencies : undefined,
+      excludedPipelineSteps: excludedPipelineSteps.length > 0 ? excludedPipelineSteps : undefined,
+    };
+
+    // Determine if description changed and what source to use
+    const descriptionChanged = editingFeature.description !== originalDescription;
+    let historySource: 'enhance' | 'edit' | undefined;
+    let historyEnhancementMode: 'improve' | 'technical' | 'simplify' | 'acceptance' | undefined;
+
+    if (descriptionChanged && descriptionChangeSource) {
+      if (descriptionChangeSource === 'edit') {
+        historySource = 'edit';
+      } else {
+        historySource = 'enhance';
+        historyEnhancementMode = descriptionChangeSource.mode;
+      }
+    }
+
+    onUpdate(
+      editingFeature.id,
+      updates,
+      historySource,
+      historyEnhancementMode,
+      preEnhancementDescription ?? undefined
+    );
+    setEditFeaturePreviewMap(new Map());
+    onClose();
+  };
+
+  const handleDialogClose = (open: boolean) => {
+    if (!open) {
+      onClose();
+    }
+  };
+
+  if (!editingFeature) {
+    return null;
+  }
+
+  // Shared card styling
+  const cardClass = 'rounded-lg border border-border/50 bg-muted/30 p-4 space-y-3';
+  const sectionHeaderClass = 'flex items-center gap-2 text-sm font-medium text-foreground';
+
+  return (
+    <Dialog open={!!editingFeature} onOpenChange={handleDialogClose}>
+      <DialogContent
+        compact={!isMaximized}
+        data-testid="edit-feature-dialog"
+        onPointerDownOutside={(e: CustomEvent) => {
+          const target = e.target as HTMLElement;
+          if (target.closest('[data-testid="category-autocomplete-list"]')) {
+            e.preventDefault();
+          }
+        }}
+        onInteractOutside={(e: CustomEvent) => {
+          const target = e.target as HTMLElement;
+          if (target.closest('[data-testid="category-autocomplete-list"]')) {
+            e.preventDefault();
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Edit Feature</DialogTitle>
+          <DialogDescription>Modify the feature details.</DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4 space-y-4 overflow-y-auto flex-1 min-h-0">
+          {/* Task Details Section */}
+          <div className={cardClass}>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="edit-description">Description</Label>
+                {/* Version History Button - uses local history for real-time updates */}
+                <EnhancementHistoryButton
+                  history={localHistory}
+                  currentValue={editingFeature.description}
+                  onRestore={(description) => {
+                    setEditingFeature((prev) => (prev ? { ...prev, description } : prev));
+                    setDescriptionChangeSource('edit');
+                  }}
+                  valueAccessor={(entry) => entry.description}
+                  title="Version History"
+                  restoreMessage="Description restored from history"
+                />
+              </div>
+              <DescriptionImageDropZone
+                value={editingFeature.description}
+                onChange={(value) => {
+                  setEditingFeature({
+                    ...editingFeature,
+                    description: value,
+                  });
+                  // Track that this change was a manual edit (unless already enhanced)
+                  if (!descriptionChangeSource || descriptionChangeSource === 'edit') {
+                    setDescriptionChangeSource('edit');
+                  }
+                }}
+                images={editingFeature.imagePaths ?? []}
+                onImagesChange={(images) =>
+                  setEditingFeature({
+                    ...editingFeature,
+                    imagePaths: images,
+                  })
+                }
+                textFiles={editingFeature.textFilePaths ?? []}
+                onTextFilesChange={(textFiles) =>
+                  setEditingFeature({
+                    ...editingFeature,
+                    textFilePaths: textFiles,
+                  })
+                }
+                placeholder="Describe the feature..."
+                previewMap={editFeaturePreviewMap}
+                onPreviewMapChange={setEditFeaturePreviewMap}
+                data-testid="edit-feature-description"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="edit-title">Title (optional)</Label>
+              <Input
+                id="edit-title"
+                value={editingFeature.title ?? ''}
+                onChange={(e) =>
+                  setEditingFeature({
+                    ...editingFeature,
+                    title: e.target.value,
+                  })
+                }
+                placeholder="Leave blank to auto-generate"
+                data-testid="edit-feature-title"
+              />
+            </div>
+
+            {/* Enhancement Section */}
+            <EnhanceWithAI
+              value={editingFeature.description}
+              onChange={(enhanced) =>
+                setEditingFeature((prev) => (prev ? { ...prev, description: enhanced } : prev))
+              }
+              onHistoryAdd={({ mode, originalText, enhancedText }) => {
+                setDescriptionChangeSource({ source: 'enhance', mode });
+                setPreEnhancementDescription(originalText);
+
+                // Update local history for real-time display
+                const timestamp = new Date().toISOString();
+                setLocalHistory((prev) => {
+                  const newHistory = [...prev];
+                  // Add original text first (so user can restore to pre-enhancement state)
+                  const lastEntry = prev[prev.length - 1];
+                  if (!lastEntry || lastEntry.description !== originalText) {
+                    newHistory.push({
+                      description: originalText,
+                      timestamp,
+                      source: prev.length === 0 ? 'initial' : 'edit',
+                    });
+                  }
+                  // Add enhanced text
+                  newHistory.push({
+                    description: enhancedText,
+                    timestamp,
+                    source: 'enhance',
+                    enhancementMode: mode,
+                  });
+                  return newHistory;
+                });
+              }}
+            />
+          </div>
+
+          {/* AI & Execution Section */}
+          <div className={cardClass}>
+            <div className="flex items-center justify-between">
+              <div className={sectionHeaderClass}>
+                <Cpu className="w-4 h-4 text-muted-foreground" />
+                <span>AI & Execution</span>
+              </div>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      onClose();
+                      navigate({ to: '/settings', search: { view: 'defaults' } });
+                    }}
+                    className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    <Settings2 className="w-3.5 h-3.5" />
+                    <span>Edit Defaults</span>
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Change default model and planning settings for new features</p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+
+            <div className="space-y-1.5">
+              <Label className="text-xs text-muted-foreground">Model</Label>
+              <PhaseModelSelector
+                value={modelEntry}
+                onChange={handleModelChange}
+                compact
+                align="end"
+              />
+            </div>
+
+            <div className="grid gap-3 grid-cols-2">
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">Planning</Label>
+                <PlanningModeSelect
+                  mode={planningMode}
+                  onModeChange={setPlanningMode}
+                  testIdPrefix="edit-feature-planning"
+                  compact
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">Options</Label>
+                <div className="flex flex-col gap-2 pt-1">
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      id="edit-feature-skip-tests"
+                      checked={!(editingFeature.skipTests ?? false)}
+                      onCheckedChange={(checked) =>
+                        setEditingFeature({ ...editingFeature, skipTests: !checked })
+                      }
+                      data-testid="edit-feature-skip-tests-checkbox"
+                    />
+                    <Label
+                      htmlFor="edit-feature-skip-tests"
+                      className="text-xs font-normal cursor-pointer"
+                    >
+                      Run tests
+                    </Label>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      id="edit-feature-require-approval"
+                      checked={requirePlanApproval}
+                      onCheckedChange={(checked) => setRequirePlanApproval(!!checked)}
+                      disabled={planningMode === 'skip'}
+                      data-testid="edit-feature-require-approval-checkbox"
+                    />
+                    <Label
+                      htmlFor="edit-feature-require-approval"
+                      className={cn(
+                        'text-xs font-normal',
+                        planningMode === 'skip'
+                          ? 'cursor-not-allowed text-muted-foreground'
+                          : 'cursor-pointer'
+                      )}
+                    >
+                      Require approval
+                    </Label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Organization Section */}
+          <div className={cardClass}>
+            <div className={sectionHeaderClass}>
+              <FolderKanban className="w-4 h-4 text-muted-foreground" />
+              <span>Organization</span>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">Category</Label>
+                <CategoryAutocomplete
+                  value={editingFeature.category}
+                  onChange={(value) =>
+                    setEditingFeature({
+                      ...editingFeature,
+                      category: value,
+                    })
+                  }
+                  suggestions={categorySuggestions}
+                  placeholder="e.g., Core, UI, API"
+                  data-testid="edit-feature-category"
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">Priority</Label>
+                <PrioritySelector
+                  selectedPriority={editingFeature.priority ?? 2}
+                  onPrioritySelect={(priority) =>
+                    setEditingFeature({
+                      ...editingFeature,
+                      priority,
+                    })
+                  }
+                  testIdPrefix="edit-priority"
+                />
+              </div>
+            </div>
+
+            {/* Work Mode Selector */}
+            <div className="pt-2">
+              <WorkModeSelector
+                workMode={workMode}
+                onWorkModeChange={setWorkMode}
+                branchName={editingFeature.branchName ?? ''}
+                onBranchNameChange={(value) =>
+                  setEditingFeature({
+                    ...editingFeature,
+                    branchName: value,
+                  })
+                }
+                branchSuggestions={branchSuggestions}
+                branchCardCounts={branchCardCounts}
+                currentBranch={currentBranch}
+                disabled={
+                  editingFeature.status !== 'backlog' && editingFeature.status !== 'merge_conflict'
+                }
+                testIdPrefix="edit-feature-work-mode"
+              />
+            </div>
+
+            {/* Dependencies */}
+            {allFeatures.length > 1 && (
+              <div className="pt-2 space-y-3">
+                <div className="space-y-1.5">
+                  <Label className="text-xs text-muted-foreground">
+                    Parent Dependencies (this feature depends on)
+                  </Label>
+                  <DependencySelector
+                    currentFeatureId={editingFeature.id}
+                    value={parentDependencies}
+                    onChange={setParentDependencies}
+                    features={allFeatures}
+                    type="parent"
+                    placeholder="Select features this depends on..."
+                    data-testid="edit-feature-parent-deps"
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs text-muted-foreground">
+                    Child Dependencies (features that depend on this)
+                  </Label>
+                  <DependencySelector
+                    currentFeatureId={editingFeature.id}
+                    value={childDependencies}
+                    onChange={setChildDependencies}
+                    features={allFeatures}
+                    type="child"
+                    placeholder="Select features that depend on this..."
+                    data-testid="edit-feature-child-deps"
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Pipeline Exclusion Controls */}
+            <div className="pt-2">
+              <PipelineExclusionControls
+                projectPath={projectPath}
+                excludedPipelineSteps={excludedPipelineSteps}
+                onExcludedStepsChange={setExcludedPipelineSteps}
+                testIdPrefix="edit-feature-pipeline"
+              />
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="sm:!justify-between">
+          <Button
+            variant="outline"
+            onClick={() => setShowDependencyTree(true)}
+            className="gap-2 h-10"
+          >
+            <GitBranch className="w-4 h-4" />
+            View Dependency Tree
+          </Button>
+          <div className="flex gap-2">
+            <Button variant="ghost" onClick={onClose}>
+              Cancel
+            </Button>
+            <HotkeyButton
+              onClick={handleUpdate}
+              hotkey={{ key: 'Enter', cmdCtrl: true }}
+              hotkeyActive={!!editingFeature}
+              data-testid="confirm-edit-feature"
+              disabled={
+                (editingFeature.status === 'backlog' ||
+                  editingFeature.status === 'merge_conflict') &&
+                workMode === 'custom' &&
+                !editingFeature.branchName?.trim()
+              }
+            >
+              Save Changes
+            </HotkeyButton>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+
+      <DependencyTreeDialog
+        open={showDependencyTree}
+        onClose={() => setShowDependencyTree(false)}
+        feature={editingFeature}
+        allFeatures={allFeatures}
+      />
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/event-content-formatter.ts b/temp_repo/apps/ui/src/components/views/board-view/dialogs/event-content-formatter.ts
new file mode 100644
index 0000000000000000000000000000000000000000..38c92f335c8e97ab931b7fabb8f227eb3c9ba169
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/event-content-formatter.ts
@@ -0,0 +1,138 @@
+/**
+ * Event content formatting utilities for AgentOutputModal
+ * Extracts the complex switch statement logic from the main component
+ */
+
+import type { AutoModeEvent } from '@/types/electron';
+import type { BacklogPlanEvent } from '@automaker/types';
+
+/**
+ * Format auto mode event content for display
+ */
+export function formatAutoModeEventContent(event: AutoModeEvent): string {
+  switch (event.type) {
+    case 'auto_mode_progress':
+      return event.content || '';
+
+    case 'auto_mode_tool': {
+      const toolName = event.tool || 'Unknown Tool';
+      const toolInput = event.input ? JSON.stringify(event.input, null, 2) : '';
+      return `\n🔧 Tool: ${toolName}\n${toolInput ? `Input: ${toolInput}\n` : ''}`;
+    }
+
+    case 'auto_mode_phase': {
+      const phaseEmoji = event.phase === 'planning' ? '📋' : event.phase === 'action' ? '⚡' : '✅';
+      return `\n${phaseEmoji} ${event.message}\n`;
+    }
+
+    case 'auto_mode_error':
+      return `\n❌ Error: ${event.error}\n`;
+
+    case 'auto_mode_ultrathink_preparation':
+      return formatUltrathinkPreparation(event);
+
+    case 'planning_started': {
+      if ('mode' in event && 'message' in event) {
+        const modeLabel = event.mode === 'lite' ? 'Lite' : event.mode === 'spec' ? 'Spec' : 'Full';
+        return `\n📋 Planning Mode: ${modeLabel}\n${event.message}\n`;
+      }
+      return '';
+    }
+
+    case 'plan_approval_required':
+      return '\n⏸️ Plan generated - waiting for your approval...\n';
+
+    case 'plan_approved':
+      return event.hasEdits
+        ? '\n✅ Plan approved (with edits) - continuing to implementation...\n'
+        : '\n✅ Plan approved - continuing to implementation...\n';
+
+    case 'plan_auto_approved':
+      return '\n✅ Plan auto-approved - continuing to implementation...\n';
+
+    case 'plan_revision_requested': {
+      const revisionEvent = event as Extract<AutoModeEvent, { type: 'plan_revision_requested' }>;
+      return `\n🔄 Revising plan based on your feedback (v${revisionEvent.planVersion})...\n`;
+    }
+
+    case 'auto_mode_task_started': {
+      const taskEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_started' }>;
+      return `\n▶ Starting ${taskEvent.taskId}: ${taskEvent.taskDescription}\n`;
+    }
+
+    case 'auto_mode_task_complete': {
+      const taskEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_complete' }>;
+      return `\n✓ ${taskEvent.taskId} completed (${taskEvent.tasksCompleted}/${taskEvent.tasksTotal})\n`;
+    }
+
+    case 'auto_mode_phase_complete': {
+      const phaseEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_phase_complete' }>;
+      return `\n🏁 Phase ${phaseEvent.phaseNumber} complete\n`;
+    }
+
+    case 'auto_mode_feature_complete': {
+      const emoji = event.passes ? '✅' : '⚠️';
+      return `\n${emoji} Task completed: ${event.message}\n`;
+    }
+
+    default:
+      return '';
+  }
+}
+
+/**
+ * Format backlog plan event content for display
+ */
+export function formatBacklogPlanEventContent(event: BacklogPlanEvent): string {
+  switch (event.type) {
+    case 'backlog_plan_progress':
+      return `\n🧭 ${event.content || 'Backlog plan progress update'}\n`;
+
+    case 'backlog_plan_error':
+      return `\n❌ Backlog plan error: ${event.error || 'Unknown error'}\n`;
+
+    case 'backlog_plan_complete':
+      return '\n✅ Backlog plan completed\n';
+
+    default:
+      return `\nℹ️ ${event.type}\n`;
+  }
+}
+
+/**
+ * Format ultrathink preparation details
+ */
+function formatUltrathinkPreparation(
+  event: AutoModeEvent & {
+    warnings?: string[];
+    recommendations?: string[];
+    estimatedCost?: number;
+    estimatedTime?: string;
+  }
+): string {
+  let prepContent = '\n🧠 Ultrathink Preparation\n';
+
+  if (event.warnings && event.warnings.length > 0) {
+    prepContent += '\n⚠️ Warnings:\n';
+    event.warnings.forEach((warning: string) => {
+      prepContent += `  • ${warning}\n`;
+    });
+  }
+
+  if (event.recommendations && event.recommendations.length > 0) {
+    prepContent += '\n💡 Recommendations:\n';
+    event.recommendations.forEach((rec: string) => {
+      prepContent += `  • ${rec}\n`;
+    });
+  }
+
+  if (event.estimatedCost !== undefined) {
+    prepContent += `\n💰 Estimated Cost: ~$${event.estimatedCost.toFixed(2)} per execution\n`;
+  }
+
+  if (event.estimatedTime) {
+    prepContent += `\n⏱️ Estimated Time: ${event.estimatedTime}\n`;
+  }
+
+  return prepContent;
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/export-features-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/export-features-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2f7ed8a414d13f741e157973a9459c7e3cc4dca3
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/export-features-dialog.tsx
@@ -0,0 +1,196 @@
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Download, FileJson, FileText } from 'lucide-react';
+import { toast } from 'sonner';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import type { Feature } from '@/store/app-store';
+
+type ExportFormat = 'json' | 'yaml';
+
+interface ExportFeaturesDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectPath: string;
+  features: Feature[];
+  selectedFeatureIds?: string[];
+}
+
+export function ExportFeaturesDialog({
+  open,
+  onOpenChange,
+  projectPath,
+  features,
+  selectedFeatureIds,
+}: ExportFeaturesDialogProps) {
+  const [format, setFormat] = useState<ExportFormat>('json');
+  const [includeHistory, setIncludeHistory] = useState(true);
+  const [includePlanSpec, setIncludePlanSpec] = useState(true);
+  const [isExporting, setIsExporting] = useState(false);
+
+  // Determine which features to export
+  const featuresToExport =
+    selectedFeatureIds && selectedFeatureIds.length > 0
+      ? features.filter((f) => selectedFeatureIds.includes(f.id))
+      : features;
+
+  // Reset state when dialog opens
+  useEffect(() => {
+    if (open) {
+      setFormat('json');
+      setIncludeHistory(true);
+      setIncludePlanSpec(true);
+    }
+  }, [open]);
+
+  const handleExport = async () => {
+    setIsExporting(true);
+    try {
+      const api = getHttpApiClient();
+      const result = await api.features.export(projectPath, {
+        featureIds: selectedFeatureIds,
+        format,
+        includeHistory,
+        includePlanSpec,
+        prettyPrint: true,
+      });
+
+      if (!result.success || !result.data) {
+        toast.error(result.error || 'Failed to export features');
+        return;
+      }
+
+      // Create a blob and trigger download
+      const mimeType = format === 'json' ? 'application/json' : 'application/x-yaml';
+      const blob = new Blob([result.data], { type: mimeType });
+      const url = URL.createObjectURL(blob);
+
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = result.filename || `features-export.${format}`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+
+      toast.success(`Exported ${featuresToExport.length} feature(s) to ${format.toUpperCase()}`);
+      onOpenChange(false);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to export features');
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-testid="export-features-dialog">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Download className="w-5 h-5" />
+            Export Features
+          </DialogTitle>
+          <DialogDescription>
+            Export {featuresToExport.length} feature(s) to a file for backup or sharing with other
+            projects.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4 space-y-4">
+          {/* Format Selection */}
+          <div className="space-y-2">
+            <Label>Export Format</Label>
+            <Select value={format} onValueChange={(v) => setFormat(v as ExportFormat)}>
+              <SelectTrigger data-testid="export-format-select">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="json">
+                  <div className="flex items-center gap-2">
+                    <FileJson className="w-4 h-4" />
+                    <span>JSON</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="yaml">
+                  <div className="flex items-center gap-2">
+                    <FileText className="w-4 h-4" />
+                    <span>YAML</span>
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Options */}
+          <div className="space-y-3">
+            <Label>Options</Label>
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="include-history"
+                  checked={includeHistory}
+                  onCheckedChange={(checked) => setIncludeHistory(!!checked)}
+                  data-testid="export-include-history"
+                />
+                <Label htmlFor="include-history" className="text-sm font-normal cursor-pointer">
+                  Include description history
+                </Label>
+              </div>
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="include-plan-spec"
+                  checked={includePlanSpec}
+                  onCheckedChange={(checked) => setIncludePlanSpec(!!checked)}
+                  data-testid="export-include-plan-spec"
+                />
+                <Label htmlFor="include-plan-spec" className="text-sm font-normal cursor-pointer">
+                  Include plan specifications
+                </Label>
+              </div>
+            </div>
+          </div>
+
+          {/* Features to Export Preview */}
+          {featuresToExport.length > 0 && featuresToExport.length <= 10 && (
+            <div className="space-y-2">
+              <Label className="text-muted-foreground">Features to export</Label>
+              <div className="max-h-32 overflow-y-auto rounded-md border border-border/50 bg-muted/30 p-2 text-sm">
+                {featuresToExport.map((f) => (
+                  <div key={f.id} className="py-1 px-2 truncate text-muted-foreground">
+                    {f.title || f.description.slice(0, 50)}...
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={isExporting}>
+            Cancel
+          </Button>
+          <Button onClick={handleExport} disabled={isExporting} data-testid="confirm-export">
+            <Download className="w-4 h-4 mr-2" />
+            {isExporting ? 'Exporting...' : 'Export'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/follow-up-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/follow-up-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f249ff973c74db694a4afc91eceae7dcf82db5cc
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/follow-up-dialog.tsx
@@ -0,0 +1,170 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { HotkeyButton } from '@/components/ui/hotkey-button';
+import {
+  DescriptionImageDropZone,
+  FeatureImagePath as DescriptionImagePath,
+  ImagePreviewMap,
+} from '@/components/ui/description-image-dropzone';
+import { MessageSquare } from 'lucide-react';
+import { Feature } from '@/store/app-store';
+import { EnhanceWithAI, EnhancementHistoryButton, type BaseHistoryEntry } from '../shared';
+
+/**
+ * A single entry in the follow-up prompt history
+ */
+export interface FollowUpHistoryEntry extends BaseHistoryEntry {
+  prompt: string;
+}
+
+interface FollowUpDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  feature: Feature | null;
+  prompt: string;
+  imagePaths: DescriptionImagePath[];
+  previewMap: ImagePreviewMap;
+  onPromptChange: (prompt: string) => void;
+  onImagePathsChange: (paths: DescriptionImagePath[]) => void;
+  onPreviewMapChange: (map: ImagePreviewMap) => void;
+  onSend: () => void;
+  isMaximized: boolean;
+  /** History of prompt versions for restoration */
+  promptHistory?: FollowUpHistoryEntry[];
+  /** Callback to add a new entry to prompt history */
+  onHistoryAdd?: (entry: FollowUpHistoryEntry) => void;
+}
+
+export function FollowUpDialog({
+  open,
+  onOpenChange,
+  feature,
+  prompt,
+  imagePaths,
+  previewMap,
+  onPromptChange,
+  onImagePathsChange,
+  onPreviewMapChange,
+  onSend,
+  isMaximized,
+  promptHistory = [],
+  onHistoryAdd,
+}: FollowUpDialogProps) {
+  const handleClose = (openState: boolean) => {
+    if (!openState) {
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent
+        compact={!isMaximized}
+        data-testid="follow-up-dialog"
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if ((e.metaKey || e.ctrlKey) && e.key === 'Enter' && prompt.trim()) {
+            e.preventDefault();
+            onSend();
+          }
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Follow-Up Prompt</DialogTitle>
+          <DialogDescription>
+            Send additional instructions to continue working on this feature.
+            {feature && (
+              <span className="block mt-2 text-primary">
+                Feature: {feature.description.slice(0, 100)}
+                {feature.description.length > 100 ? '...' : ''}
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4 overflow-y-auto flex-1 min-h-0">
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="follow-up-prompt">Instructions</Label>
+              {/* Version History Button */}
+              <EnhancementHistoryButton
+                history={promptHistory}
+                currentValue={prompt}
+                onRestore={onPromptChange}
+                valueAccessor={(entry) => entry.prompt}
+                title="Prompt History"
+                restoreMessage="Prompt restored from history"
+              />
+            </div>
+            <DescriptionImageDropZone
+              value={prompt}
+              onChange={onPromptChange}
+              images={imagePaths}
+              onImagesChange={onImagePathsChange}
+              placeholder="Describe what needs to be fixed or changed..."
+              previewMap={previewMap}
+              onPreviewMapChange={onPreviewMapChange}
+            />
+          </div>
+
+          {/* Enhancement Section */}
+          <EnhanceWithAI
+            value={prompt}
+            onChange={onPromptChange}
+            onHistoryAdd={({ mode, originalText, enhancedText }) => {
+              const timestamp = new Date().toISOString();
+              // Add original text first (so user can restore to pre-enhancement state)
+              // Only add if it's different from the last history entry
+              const lastEntry = promptHistory[promptHistory.length - 1];
+              if (!lastEntry || lastEntry.prompt !== originalText) {
+                onHistoryAdd?.({
+                  prompt: originalText,
+                  timestamp,
+                  source: promptHistory.length === 0 ? 'initial' : 'edit',
+                });
+              }
+              // Add enhanced text
+              onHistoryAdd?.({
+                prompt: enhancedText,
+                timestamp,
+                source: 'enhance',
+                enhancementMode: mode,
+              });
+            }}
+          />
+
+          <p className="text-xs text-muted-foreground">
+            The agent will continue from where it left off, using the existing context. You can
+            attach screenshots to help explain the issue.
+          </p>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            onClick={() => {
+              onOpenChange(false);
+            }}
+          >
+            Cancel
+          </Button>
+          <HotkeyButton
+            onClick={onSend}
+            disabled={!prompt.trim()}
+            hotkey={{ key: 'Enter', cmdCtrl: true }}
+            hotkeyActive={open}
+            data-testid="confirm-follow-up"
+          >
+            <MessageSquare className="w-4 h-4 mr-2" />
+            Send Follow-Up
+          </HotkeyButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/git-pull-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/git-pull-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..edbf4f02a07c52b2cc57da16ca5d8e744bce383f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/git-pull-dialog.tsx
@@ -0,0 +1,698 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import {
+  Download,
+  AlertTriangle,
+  Archive,
+  CheckCircle2,
+  XCircle,
+  FileWarning,
+  Wrench,
+  Sparkles,
+  GitMerge,
+  GitCommitHorizontal,
+  FileText,
+  Settings,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { Checkbox } from '@/components/ui/checkbox';
+import { getElectronAPI } from '@/lib/electron';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import type { MergeConflictInfo } from '../worktree-panel/types';
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+type PullPhase =
+  | 'checking' // Initial check for local changes
+  | 'local-changes' // Local changes detected, asking user what to do
+  | 'pulling' // Actively pulling (with or without stash)
+  | 'success' // Pull completed successfully
+  | 'merge-complete' // Pull resulted in a merge (not fast-forward, no conflicts)
+  | 'conflict' // Merge conflicts detected
+  | 'error'; // Something went wrong
+
+interface PullResult {
+  branch?: string;
+  remote?: string;
+  pulled?: boolean;
+  message?: string;
+  hasLocalChanges?: boolean;
+  localChangedFiles?: string[];
+  hasConflicts?: boolean;
+  conflictSource?: 'pull' | 'stash';
+  conflictFiles?: string[];
+  stashed?: boolean;
+  stashRestored?: boolean;
+  stashRecoveryFailed?: boolean;
+  isMerge?: boolean;
+  isFastForward?: boolean;
+  mergeAffectedFiles?: string[];
+}
+
+interface GitPullDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  remote?: string;
+  onPulled?: () => void;
+  onCreateConflictResolutionFeature?: (conflictInfo: MergeConflictInfo) => void;
+  /** Called when user chooses to commit the merge — opens the commit dialog */
+  onCommitMerge?: (worktree: { path: string; branch: string; isMain: boolean }) => void;
+}
+
+export function GitPullDialog({
+  open,
+  onOpenChange,
+  worktree,
+  remote,
+  onPulled,
+  onCreateConflictResolutionFeature,
+  onCommitMerge,
+}: GitPullDialogProps) {
+  const [phase, setPhase] = useState<PullPhase>('checking');
+  const [pullResult, setPullResult] = useState<PullResult | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [rememberChoice, setRememberChoice] = useState(false);
+  const [showMergeFiles, setShowMergeFiles] = useState(false);
+
+  const mergePostAction = useAppStore((s) => s.mergePostAction);
+  const setMergePostAction = useAppStore((s) => s.setMergePostAction);
+
+  /**
+   * Determine the appropriate phase after a successful pull.
+   * If the pull resulted in a merge (not fast-forward) and no conflicts,
+   * check user preference before deciding whether to show merge prompt.
+   */
+  const handleSuccessfulPull = useCallback(
+    (result: PullResult) => {
+      setPullResult(result);
+
+      if (result.isMerge && !result.hasConflicts) {
+        // Merge happened — check user preference
+        if (mergePostAction === 'commit') {
+          // User preference: auto-commit
+          setPhase('success');
+          onPulled?.();
+          // Auto-trigger commit dialog
+          if (worktree && onCommitMerge) {
+            onCommitMerge(worktree);
+            onOpenChange(false);
+          }
+        } else if (mergePostAction === 'manual') {
+          // User preference: manual review
+          setPhase('success');
+          onPulled?.();
+        } else {
+          // No preference — show merge prompt; onPulled will be called from the
+          // user-action handlers (handleCommitMerge / handleMergeManually) once
+          // the user makes their choice, consistent with the conflict phase.
+          setPhase('merge-complete');
+        }
+      } else {
+        setPhase('success');
+        onPulled?.();
+      }
+    },
+    [mergePostAction, worktree, onCommitMerge, onPulled, onOpenChange]
+  );
+
+  const checkForLocalChanges = useCallback(async () => {
+    if (!worktree) return;
+
+    setPhase('checking');
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.pull) {
+        setErrorMessage('Pull API not available');
+        setPhase('error');
+        return;
+      }
+
+      // Call pull without stashIfNeeded to just check status
+      const result = await api.worktree.pull(worktree.path, remote);
+
+      if (!result.success) {
+        setErrorMessage(result.error || 'Failed to pull');
+        setPhase('error');
+        return;
+      }
+
+      if (result.result?.hasLocalChanges) {
+        // Local changes detected - ask user what to do
+        setPullResult(result.result);
+        setPhase('local-changes');
+      } else if (result.result?.pulled !== undefined) {
+        // No local changes, pull went through (or already up to date)
+        handleSuccessfulPull(result.result);
+      } else {
+        // Unexpected response: success but no recognizable fields
+        setPullResult(result.result ?? null);
+        setErrorMessage('Unexpected pull response');
+        setPhase('error');
+      }
+    } catch (err) {
+      setErrorMessage(err instanceof Error ? err.message : 'Failed to check for changes');
+      setPhase('error');
+    }
+  }, [worktree, remote, handleSuccessfulPull]);
+
+  // Keep a ref to the latest checkForLocalChanges to break the circular dependency
+  // between the "reset/start" effect and the callback chain. Without this, any
+  // change in onPulled (passed from the parent) would recreate handleSuccessfulPull
+  // → checkForLocalChanges → re-trigger the effect while the dialog is already open,
+  // causing the pull flow to restart unintentionally.
+  const checkForLocalChangesRef = useRef(checkForLocalChanges);
+  useEffect(() => {
+    checkForLocalChangesRef.current = checkForLocalChanges;
+  });
+
+  // Reset state when dialog opens and start the initial pull check.
+  // Depends only on `open` and `worktree` — NOT on `checkForLocalChanges` —
+  // so that parent callback re-creations don't restart the pull flow mid-flight.
+  useEffect(() => {
+    if (open && worktree) {
+      setPhase('checking');
+      setPullResult(null);
+      setErrorMessage(null);
+      setRememberChoice(false);
+      setShowMergeFiles(false);
+      // Start the initial check using the ref so we always call the latest version
+      // without making it a dependency of this effect.
+      checkForLocalChangesRef.current();
+    }
+  }, [open, worktree]);
+
+  const handlePullWithStash = useCallback(async () => {
+    if (!worktree) return;
+
+    setPhase('pulling');
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.pull) {
+        setErrorMessage('Pull API not available');
+        setPhase('error');
+        return;
+      }
+
+      // Call pull with stashIfNeeded
+      const result = await api.worktree.pull(worktree.path, remote, true);
+
+      if (!result.success) {
+        setErrorMessage(result.error || 'Failed to pull');
+        setPhase('error');
+        return;
+      }
+
+      setPullResult(result.result || null);
+
+      if (result.result?.hasConflicts) {
+        setPhase('conflict');
+      } else if (result.result?.pulled) {
+        handleSuccessfulPull(result.result);
+      } else {
+        // Unrecognized response: no pulled flag and no conflicts
+        console.warn('handlePullWithStash: unrecognized response', result.result);
+        setErrorMessage('Unexpected pull response');
+        setPhase('error');
+      }
+    } catch (err) {
+      setErrorMessage(err instanceof Error ? err.message : 'Failed to pull');
+      setPhase('error');
+    }
+  }, [worktree, remote, handleSuccessfulPull]);
+
+  const handleResolveWithAI = useCallback(() => {
+    if (!worktree || !pullResult || !onCreateConflictResolutionFeature) return;
+
+    const effectiveRemote = pullResult.remote || remote;
+    const branch = pullResult.branch ?? worktree.branch;
+    const conflictInfo: MergeConflictInfo = {
+      sourceBranch: `${effectiveRemote || 'origin'}/${branch}`,
+      targetBranch: branch,
+      targetWorktreePath: worktree.path,
+      conflictFiles: pullResult.conflictFiles || [],
+      operationType: 'merge',
+    };
+
+    onCreateConflictResolutionFeature(conflictInfo);
+    onOpenChange(false);
+  }, [worktree, pullResult, remote, onCreateConflictResolutionFeature, onOpenChange]);
+
+  const handleCommitMerge = useCallback(() => {
+    if (!worktree || !onCommitMerge) {
+      // No handler available — show feedback and bail without persisting preference
+      toast.error('Commit merge is not available', {
+        description: 'The commit merge action is not configured for this context.',
+        duration: 4000,
+      });
+      return;
+    }
+    if (rememberChoice) {
+      setMergePostAction('commit');
+    }
+    onPulled?.();
+    onCommitMerge(worktree);
+    onOpenChange(false);
+  }, [rememberChoice, setMergePostAction, worktree, onCommitMerge, onPulled, onOpenChange]);
+
+  const handleMergeManually = useCallback(() => {
+    if (rememberChoice) {
+      setMergePostAction('manual');
+    }
+    toast.info('Merge left for manual review', {
+      description: 'Review the merged files and commit when ready.',
+      duration: 5000,
+    });
+    onPulled?.();
+    onOpenChange(false);
+  }, [rememberChoice, setMergePostAction, onPulled, onOpenChange]);
+
+  const handleClose = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  if (!worktree) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[520px]">
+        {/* Checking Phase */}
+        {phase === 'checking' && (
+          <>
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2">
+                <Download className="w-5 h-5" />
+                Pull Changes
+              </DialogTitle>
+              <DialogDescription>
+                Checking for local changes on{' '}
+                <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code>...
+              </DialogDescription>
+            </DialogHeader>
+            <div className="flex items-center justify-center py-8">
+              <Spinner size="md" />
+              <span className="ml-3 text-sm text-muted-foreground">
+                Fetching remote and checking status...
+              </span>
+            </div>
+          </>
+        )}
+
+        {/* Local Changes Detected Phase */}
+        {phase === 'local-changes' && (
+          <>
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2">
+                <AlertTriangle className="w-5 h-5 text-amber-500" />
+                Local Changes Detected
+              </DialogTitle>
+              <DialogDescription asChild>
+                <div className="space-y-3">
+                  <span className="block">
+                    You have uncommitted changes on{' '}
+                    <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code> that
+                    need to be handled before pulling.
+                  </span>
+
+                  {pullResult?.localChangedFiles && pullResult.localChangedFiles.length > 0 && (
+                    <div className="border border-border rounded-lg overflow-hidden max-h-[200px] overflow-y-auto scrollbar-visible">
+                      {pullResult.localChangedFiles.map((file) => (
+                        <div
+                          key={file}
+                          className="flex items-center gap-2 px-3 py-1.5 text-xs font-mono border-b border-border last:border-b-0 hover:bg-accent/30"
+                        >
+                          <FileWarning className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />
+                          <span className="truncate">{file}</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="flex items-start gap-2 p-3 rounded-md bg-blue-500/10 border border-blue-500/20">
+              <Archive className="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" />
+              <span className="text-blue-500 text-sm">
+                Your changes will be automatically stashed before pulling and restored afterward. If
+                restoring causes conflicts, you&apos;ll be able to resolve them.
+              </span>
+            </div>
+
+            <DialogFooter>
+              <Button variant="ghost" onClick={handleClose}>
+                Cancel
+              </Button>
+              <Button onClick={handlePullWithStash}>
+                <Archive className="w-4 h-4 mr-2" />
+                Stash & Pull
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+
+        {/* Pulling Phase */}
+        {phase === 'pulling' && (
+          <>
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2">
+                <Download className="w-5 h-5 animate-pulse" />
+                Pulling Changes
+              </DialogTitle>
+              <DialogDescription>
+                {pullResult?.hasLocalChanges
+                  ? 'Stashing changes, pulling from remote, and restoring your changes...'
+                  : 'Pulling latest changes from remote...'}
+              </DialogDescription>
+            </DialogHeader>
+            <div className="flex items-center justify-center py-8">
+              <Spinner size="md" />
+              <span className="ml-3 text-sm text-muted-foreground">This may take a moment...</span>
+            </div>
+          </>
+        )}
+
+        {/* Success Phase */}
+        {phase === 'success' && (
+          <>
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2">
+                <CheckCircle2 className="w-5 h-5 text-green-500" />
+                Pull Complete
+              </DialogTitle>
+              <DialogDescription asChild>
+                <div className="space-y-2">
+                  <span className="block">
+                    {pullResult?.message || 'Changes pulled successfully'}
+                  </span>
+
+                  {pullResult?.stashed &&
+                    pullResult?.stashRestored &&
+                    !pullResult?.stashRecoveryFailed && (
+                      <div className="flex items-start gap-2 p-3 rounded-md bg-green-500/10 border border-green-500/20">
+                        <Archive className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
+                        <span className="text-green-600 dark:text-green-400 text-sm">
+                          Your stashed changes have been restored successfully.
+                        </span>
+                      </div>
+                    )}
+
+                  {pullResult?.stashed &&
+                    (!pullResult?.stashRestored || pullResult?.stashRecoveryFailed) && (
+                      <div className="flex items-start gap-2 p-3 rounded-md bg-amber-500/10 border border-amber-500/20">
+                        <AlertTriangle className="w-4 h-4 text-amber-500 mt-0.5 flex-shrink-0" />
+                        <span className="text-amber-600 dark:text-amber-400 text-sm">
+                          {pullResult?.message ??
+                            'Stash could not be restored. Your changes remain in the stash.'}
+                        </span>
+                      </div>
+                    )}
+                </div>
+              </DialogDescription>
+            </DialogHeader>
+
+            <DialogFooter>
+              <Button onClick={handleClose}>Done</Button>
+            </DialogFooter>
+          </>
+        )}
+
+        {/* Merge Complete Phase — post-merge prompt */}
+        {phase === 'merge-complete' && (
+          <>
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2">
+                <GitMerge className="w-5 h-5 text-purple-500" />
+                Merge Complete
+              </DialogTitle>
+              <DialogDescription asChild>
+                <div className="space-y-3">
+                  <span className="block">
+                    Pull resulted in a merge on{' '}
+                    <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code>
+                    {pullResult?.mergeAffectedFiles && pullResult.mergeAffectedFiles.length > 0 && (
+                      <span>
+                        {' '}
+                        affecting {pullResult.mergeAffectedFiles.length} file
+                        {pullResult.mergeAffectedFiles.length !== 1 ? 's' : ''}
+                      </span>
+                    )}
+                    . How would you like to proceed?
+                  </span>
+
+                  {pullResult?.mergeAffectedFiles && pullResult.mergeAffectedFiles.length > 0 && (
+                    <div>
+                      <button
+                        onClick={() => setShowMergeFiles(!showMergeFiles)}
+                        className="text-xs text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1"
+                      >
+                        <FileText className="w-3 h-3" />
+                        {showMergeFiles ? 'Hide' : 'Show'} affected files (
+                        {pullResult.mergeAffectedFiles.length})
+                      </button>
+                      {showMergeFiles && (
+                        <div className="mt-1.5 border border-border rounded-lg overflow-hidden max-h-[150px] overflow-y-auto scrollbar-visible">
+                          {pullResult.mergeAffectedFiles.map((file) => (
+                            <div
+                              key={file}
+                              className="flex items-center gap-2 px-3 py-1.5 text-xs font-mono border-b border-border last:border-b-0 hover:bg-accent/30"
+                            >
+                              <GitMerge className="w-3 h-3 text-purple-500 flex-shrink-0" />
+                              <span className="truncate">{file}</span>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {pullResult?.stashed &&
+                    pullResult?.stashRestored &&
+                    !pullResult?.stashRecoveryFailed && (
+                      <div className="flex items-start gap-2 p-3 rounded-md bg-green-500/10 border border-green-500/20">
+                        <Archive className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
+                        <span className="text-green-600 dark:text-green-400 text-sm">
+                          Your stashed changes have been restored successfully.
+                        </span>
+                      </div>
+                    )}
+
+                  <div className="mt-2 p-3 rounded-md bg-muted/50 border border-border">
+                    <p className="text-sm text-muted-foreground font-medium mb-2">
+                      Choose how to proceed:
+                    </p>
+                    <ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
+                      <li>
+                        <strong>Commit Merge</strong> &mdash; Open the commit dialog with a merge
+                        commit message
+                      </li>
+                      <li>
+                        <strong>Review Manually</strong> &mdash; Leave the working tree as-is for
+                        manual review
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </DialogDescription>
+            </DialogHeader>
+
+            {/* Remember choice option */}
+            <div className="flex items-center gap-2 px-1">
+              <label className="flex items-center gap-2 text-xs text-muted-foreground cursor-pointer">
+                <Checkbox
+                  checked={rememberChoice}
+                  onCheckedChange={(checked) => setRememberChoice(checked === true)}
+                  className="rounded border-border"
+                />
+                <Settings className="w-3 h-3" />
+                Remember my choice for future merges
+              </label>
+              {(rememberChoice || mergePostAction) && (
+                <span className="text-xs text-muted-foreground ml-auto flex items-center gap-2">
+                  <span className="opacity-70">
+                    Current:{' '}
+                    {mergePostAction === 'commit'
+                      ? 'auto-commit'
+                      : mergePostAction === 'manual'
+                        ? 'manual review'
+                        : 'ask every time'}
+                  </span>
+                  <button
+                    onClick={() => {
+                      setMergePostAction(null);
+                      setRememberChoice(false);
+                    }}
+                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    Reset preference
+                  </button>
+                </span>
+              )}
+            </div>
+
+            <DialogFooter className={cn('flex-col sm:flex-row gap-2')}>
+              <Button variant="outline" onClick={handleMergeManually} className="w-full sm:w-auto">
+                <FileText className="w-4 h-4 mr-2" />
+                Review Manually
+              </Button>
+              {worktree && onCommitMerge && (
+                <Button
+                  onClick={handleCommitMerge}
+                  className="w-full sm:w-auto bg-purple-600 hover:bg-purple-700 text-white"
+                >
+                  <GitCommitHorizontal className="w-4 h-4 mr-2" />
+                  Commit Merge
+                </Button>
+              )}
+            </DialogFooter>
+          </>
+        )}
+
+        {/* Conflict Phase */}
+        {phase === 'conflict' && (
+          <>
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2">
+                <AlertTriangle className="w-5 h-5 text-orange-500" />
+                Merge Conflicts Detected
+              </DialogTitle>
+              <DialogDescription asChild>
+                <div className="space-y-3">
+                  <span className="block">
+                    {pullResult?.conflictSource === 'stash'
+                      ? 'Pull succeeded but reapplying your stashed changes resulted in merge conflicts.'
+                      : 'The pull resulted in merge conflicts that need to be resolved.'}
+                  </span>
+
+                  {pullResult?.conflictFiles && pullResult.conflictFiles.length > 0 && (
+                    <div className="space-y-1.5">
+                      <span className="text-sm font-medium text-foreground">
+                        Conflicting files ({pullResult.conflictFiles.length}):
+                      </span>
+                      <div className="border border-border rounded-lg overflow-hidden max-h-[200px] overflow-y-auto scrollbar-visible">
+                        {pullResult.conflictFiles.map((file) => (
+                          <div
+                            key={file}
+                            className="flex items-center gap-2 px-3 py-1.5 text-xs font-mono border-b border-border last:border-b-0 hover:bg-accent/30"
+                          >
+                            <XCircle className="w-3.5 h-3.5 text-red-500 flex-shrink-0" />
+                            <span className="truncate">{file}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="mt-2 p-3 rounded-md bg-muted/50 border border-border">
+                    <p className="text-sm text-muted-foreground font-medium mb-2">
+                      Choose how to resolve:
+                    </p>
+                    <ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
+                      <li>
+                        <strong>Resolve with AI</strong> &mdash; Creates a task to analyze and
+                        resolve conflicts automatically
+                      </li>
+                      <li>
+                        <strong>Resolve Manually</strong> &mdash; Leaves conflict markers in place
+                        for you to edit directly
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </DialogDescription>
+            </DialogHeader>
+
+            <DialogFooter>
+              <Button
+                variant="outline"
+                onClick={() => {
+                  toast.info('Conflict markers left in place', {
+                    description: 'Edit the conflicting files to resolve conflicts manually.',
+                    duration: 6000,
+                  });
+                  onPulled?.();
+                  handleClose();
+                }}
+              >
+                <Wrench className="w-4 h-4 mr-2" />
+                Resolve Manually
+              </Button>
+              {onCreateConflictResolutionFeature && (
+                <Button
+                  onClick={handleResolveWithAI}
+                  className="bg-purple-600 hover:bg-purple-700 text-white"
+                >
+                  <Sparkles className="w-4 h-4 mr-2" />
+                  Resolve with AI
+                </Button>
+              )}
+            </DialogFooter>
+          </>
+        )}
+
+        {/* Error Phase */}
+        {phase === 'error' && (
+          <>
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2">
+                <XCircle className="w-5 h-5 text-destructive" />
+                Pull Failed
+              </DialogTitle>
+              <DialogDescription asChild>
+                <div className="space-y-2">
+                  <span className="block">
+                    Failed to pull changes for{' '}
+                    <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code>.
+                  </span>
+
+                  {errorMessage && (
+                    <div
+                      className={cn(
+                        'flex items-start gap-2 p-3 rounded-md',
+                        'bg-destructive/10 border border-destructive/20'
+                      )}
+                    >
+                      <AlertTriangle className="w-4 h-4 text-destructive mt-0.5 flex-shrink-0" />
+                      <span className="text-destructive text-sm break-words">{errorMessage}</span>
+                    </div>
+                  )}
+                </div>
+              </DialogDescription>
+            </DialogHeader>
+
+            <DialogFooter>
+              <Button variant="ghost" onClick={handleClose}>
+                Close
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setErrorMessage(null);
+                  checkForLocalChanges();
+                }}
+              >
+                Retry
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/import-features-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/import-features-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d0fce1e8b90eeb803037b3b54ba5952416ec01d4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/import-features-dialog.tsx
@@ -0,0 +1,474 @@
+import { useState, useEffect, useRef } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { CategoryAutocomplete } from '@/components/ui/category-autocomplete';
+import { Upload, AlertTriangle, CheckCircle2, XCircle, FileJson, FileText } from 'lucide-react';
+import { toast } from 'sonner';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { cn } from '@/lib/utils';
+
+interface ConflictInfo {
+  featureId: string;
+  title?: string;
+  existingTitle?: string;
+  hasConflict: boolean;
+}
+
+interface ImportResult {
+  success: boolean;
+  featureId?: string;
+  importedAt: string;
+  warnings?: string[];
+  errors?: string[];
+  wasOverwritten?: boolean;
+}
+
+interface ImportFeaturesDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectPath: string;
+  categorySuggestions: string[];
+  onImportComplete?: () => void;
+}
+
+type ImportStep = 'upload' | 'review' | 'result';
+
+export function ImportFeaturesDialog({
+  open,
+  onOpenChange,
+  projectPath,
+  categorySuggestions,
+  onImportComplete,
+}: ImportFeaturesDialogProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [step, setStep] = useState<ImportStep>('upload');
+  const [fileData, setFileData] = useState<string>('');
+  const [fileName, setFileName] = useState<string>('');
+  const [fileFormat, setFileFormat] = useState<'json' | 'yaml' | null>(null);
+
+  // Options
+  const [overwrite, setOverwrite] = useState(false);
+  const [targetCategory, setTargetCategory] = useState('');
+
+  // Conflict check results
+  const [conflicts, setConflicts] = useState<ConflictInfo[]>([]);
+  const [isCheckingConflicts, setIsCheckingConflicts] = useState(false);
+
+  // Import results
+  const [importResults, setImportResults] = useState<ImportResult[]>([]);
+  const [isImporting, setIsImporting] = useState(false);
+
+  // Parse error
+  const [parseError, setParseError] = useState<string>('');
+
+  // Reset state when dialog opens
+  useEffect(() => {
+    if (open) {
+      setStep('upload');
+      setFileData('');
+      setFileName('');
+      setFileFormat(null);
+      setOverwrite(false);
+      setTargetCategory('');
+      setConflicts([]);
+      setImportResults([]);
+      setParseError('');
+    }
+  }, [open]);
+
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // Check file extension
+    const ext = file.name.split('.').pop()?.toLowerCase();
+    if (ext !== 'json' && ext !== 'yaml' && ext !== 'yml') {
+      setParseError('Please select a JSON or YAML file');
+      return;
+    }
+
+    try {
+      const content = await file.text();
+      setFileData(content);
+      setFileName(file.name);
+      setFileFormat(ext === 'yml' ? 'yaml' : (ext as 'json' | 'yaml'));
+      setParseError('');
+
+      // Check for conflicts
+      await checkConflicts(content);
+    } catch {
+      setParseError('Failed to read file');
+    }
+
+    // Reset input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const checkConflicts = async (data: string) => {
+    setIsCheckingConflicts(true);
+    try {
+      const api = getHttpApiClient();
+      const result = await api.features.checkConflicts(projectPath, data);
+
+      if (!result.success) {
+        setParseError(result.error || 'Failed to parse import file');
+        setConflicts([]);
+        return;
+      }
+
+      setConflicts(result.conflicts || []);
+      setStep('review');
+    } catch (error) {
+      setParseError(error instanceof Error ? error.message : 'Failed to check conflicts');
+    } finally {
+      setIsCheckingConflicts(false);
+    }
+  };
+
+  const handleImport = async () => {
+    setIsImporting(true);
+    try {
+      const api = getHttpApiClient();
+      const result = await api.features.import(projectPath, fileData, {
+        overwrite,
+        targetCategory: targetCategory || undefined,
+      });
+
+      if (!result.success && result.failedCount === result.results?.length) {
+        toast.error(result.error || 'Failed to import features');
+        return;
+      }
+
+      setImportResults(result.results || []);
+      setStep('result');
+
+      const successCount = result.importedCount || 0;
+      const failCount = result.failedCount || 0;
+
+      if (failCount === 0) {
+        toast.success(`Successfully imported ${successCount} feature(s)`);
+      } else if (successCount > 0) {
+        toast.warning(`Imported ${successCount} feature(s), ${failCount} failed`);
+      } else {
+        toast.error(`Failed to import features`);
+      }
+
+      onImportComplete?.();
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to import features');
+    } finally {
+      setIsImporting(false);
+    }
+  };
+
+  const handleDrop = async (event: React.DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const file = event.dataTransfer.files[0];
+    if (!file) return;
+
+    const ext = file.name.split('.').pop()?.toLowerCase();
+    if (ext !== 'json' && ext !== 'yaml' && ext !== 'yml') {
+      setParseError('Please drop a JSON or YAML file');
+      return;
+    }
+
+    try {
+      const content = await file.text();
+      setFileData(content);
+      setFileName(file.name);
+      setFileFormat(ext === 'yml' ? 'yaml' : (ext as 'json' | 'yaml'));
+      setParseError('');
+
+      await checkConflicts(content);
+    } catch {
+      setParseError('Failed to read file');
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const conflictingFeatures = conflicts.filter((c) => c.hasConflict);
+  const hasConflicts = conflictingFeatures.length > 0;
+
+  const renderUploadStep = () => (
+    <div className="py-4 space-y-4">
+      {/* Drop Zone */}
+      <div
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        className={cn(
+          'border-2 border-dashed rounded-lg p-8 text-center transition-colors cursor-pointer',
+          'hover:border-primary/50 hover:bg-muted/30',
+          parseError ? 'border-destructive/50' : 'border-border'
+        )}
+        onClick={() => fileInputRef.current?.click()}
+        data-testid="import-drop-zone"
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".json,.yaml,.yml"
+          onChange={handleFileSelect}
+          className="hidden"
+        />
+        <div className="flex flex-col items-center gap-3">
+          <Upload className="w-8 h-8 text-muted-foreground" />
+          <div className="text-sm">
+            <span className="text-primary font-medium">Click to upload</span>
+            <span className="text-muted-foreground"> or drag and drop</span>
+          </div>
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <FileJson className="w-3.5 h-3.5" />
+            <span>JSON</span>
+            <span>or</span>
+            <FileText className="w-3.5 h-3.5" />
+            <span>YAML</span>
+          </div>
+        </div>
+      </div>
+
+      {parseError && (
+        <div className="flex items-center gap-2 text-sm text-destructive">
+          <XCircle className="w-4 h-4" />
+          {parseError}
+        </div>
+      )}
+
+      {isCheckingConflicts && (
+        <div className="text-sm text-muted-foreground text-center">Analyzing file...</div>
+      )}
+    </div>
+  );
+
+  const renderReviewStep = () => (
+    <div className="py-4 space-y-4">
+      {/* File Info */}
+      <div className="flex items-center gap-2 p-3 rounded-md border border-border/50 bg-muted/30">
+        {fileFormat === 'json' ? (
+          <FileJson className="w-5 h-5 text-muted-foreground" />
+        ) : (
+          <FileText className="w-5 h-5 text-muted-foreground" />
+        )}
+        <div className="flex-1 truncate">
+          <div className="text-sm font-medium">{fileName}</div>
+          <div className="text-xs text-muted-foreground">
+            {conflicts.length} feature(s) to import
+          </div>
+        </div>
+      </div>
+
+      {/* Conflict Warning */}
+      {hasConflicts && (
+        <div className="flex items-start gap-2 p-3 rounded-md border border-warning/50 bg-warning/10">
+          <AlertTriangle className="w-5 h-5 text-warning shrink-0 mt-0.5" />
+          <div className="space-y-1">
+            <div className="text-sm font-medium text-warning">
+              {conflictingFeatures.length} conflict(s) detected
+            </div>
+            <div className="text-xs text-muted-foreground">
+              The following features already exist in this project:
+            </div>
+            <ul className="text-xs text-muted-foreground list-disc list-inside max-h-24 overflow-y-auto">
+              {conflictingFeatures.map((c) => (
+                <li key={c.featureId} className="truncate">
+                  {c.existingTitle || c.featureId}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+
+      {/* Options */}
+      <div className="space-y-3">
+        <Label>Import Options</Label>
+
+        {hasConflicts && (
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="overwrite"
+              checked={overwrite}
+              onCheckedChange={(checked) => setOverwrite(!!checked)}
+              data-testid="import-overwrite"
+            />
+            <Label htmlFor="overwrite" className="text-sm font-normal cursor-pointer">
+              Overwrite existing features with same ID
+            </Label>
+          </div>
+        )}
+
+        <div className="space-y-1.5">
+          <Label className="text-xs text-muted-foreground">
+            Target Category (optional - override imported categories)
+          </Label>
+          <CategoryAutocomplete
+            value={targetCategory}
+            onChange={setTargetCategory}
+            suggestions={categorySuggestions}
+            placeholder="Keep original categories"
+            data-testid="import-target-category"
+          />
+        </div>
+      </div>
+
+      {/* Features Preview */}
+      <div className="space-y-2">
+        <Label className="text-muted-foreground">Features to import</Label>
+        <div className="max-h-40 overflow-y-auto rounded-md border border-border/50 bg-muted/30 p-2 text-sm">
+          {conflicts.map((c) => (
+            <div
+              key={c.featureId}
+              className={cn(
+                'py-1 px-2 flex items-center gap-2',
+                c.hasConflict && !overwrite ? 'text-warning' : 'text-muted-foreground'
+              )}
+            >
+              {c.hasConflict ? (
+                overwrite ? (
+                  <CheckCircle2 className="w-3.5 h-3.5 text-primary shrink-0" />
+                ) : (
+                  <AlertTriangle className="w-3.5 h-3.5 text-warning shrink-0" />
+                )
+              ) : (
+                <CheckCircle2 className="w-3.5 h-3.5 text-primary shrink-0" />
+              )}
+              <span className="truncate">{c.title || c.featureId}</span>
+              {c.hasConflict && !overwrite && (
+                <span className="text-xs text-warning">(will skip)</span>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderResultStep = () => {
+    const successResults = importResults.filter((r) => r.success);
+    const failedResults = importResults.filter((r) => !r.success);
+
+    return (
+      <div className="py-4 space-y-4">
+        {/* Summary */}
+        <div className="flex items-center gap-4 justify-center">
+          {successResults.length > 0 && (
+            <div className="flex items-center gap-2 text-primary">
+              <CheckCircle2 className="w-5 h-5" />
+              <span className="font-medium">{successResults.length} imported</span>
+            </div>
+          )}
+          {failedResults.length > 0 && (
+            <div className="flex items-center gap-2 text-destructive">
+              <XCircle className="w-5 h-5" />
+              <span className="font-medium">{failedResults.length} failed</span>
+            </div>
+          )}
+        </div>
+
+        {/* Results List */}
+        <div className="max-h-60 overflow-y-auto rounded-md border border-border/50 bg-muted/30 p-2 text-sm space-y-1">
+          {importResults.map((result, idx) => (
+            <div
+              key={idx}
+              className={cn(
+                'py-1.5 px-2 rounded',
+                result.success ? 'text-foreground' : 'text-destructive bg-destructive/10'
+              )}
+            >
+              <div className="flex items-center gap-2">
+                {result.success ? (
+                  <CheckCircle2 className="w-3.5 h-3.5 text-primary shrink-0" />
+                ) : (
+                  <XCircle className="w-3.5 h-3.5 text-destructive shrink-0" />
+                )}
+                <span className="truncate">{result.featureId || `Feature ${idx + 1}`}</span>
+                {result.wasOverwritten && (
+                  <span className="text-xs text-muted-foreground">(overwritten)</span>
+                )}
+              </div>
+              {result.warnings && result.warnings.length > 0 && (
+                <div className="mt-1 pl-5 text-xs text-warning">
+                  {result.warnings.map((w, i) => (
+                    <div key={i}>{w}</div>
+                  ))}
+                </div>
+              )}
+              {result.errors && result.errors.length > 0 && (
+                <div className="mt-1 pl-5 text-xs text-destructive">
+                  {result.errors.map((e, i) => (
+                    <div key={i}>{e}</div>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-testid="import-features-dialog">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Upload className="w-5 h-5" />
+            Import Features
+          </DialogTitle>
+          <DialogDescription>
+            {step === 'upload' && 'Import features from a JSON or YAML export file.'}
+            {step === 'review' && 'Review and configure import options.'}
+            {step === 'result' && 'Import completed.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        {step === 'upload' && renderUploadStep()}
+        {step === 'review' && renderReviewStep()}
+        {step === 'result' && renderResultStep()}
+
+        <DialogFooter>
+          {step === 'upload' && (
+            <Button variant="ghost" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+          )}
+          {step === 'review' && (
+            <>
+              <Button variant="ghost" onClick={() => setStep('upload')}>
+                Back
+              </Button>
+              <Button onClick={handleImport} disabled={isImporting} data-testid="confirm-import">
+                <Upload className="w-4 h-4 mr-2" />
+                {isImporting
+                  ? 'Importing...'
+                  : `Import ${hasConflicts && !overwrite ? conflicts.filter((c) => !c.hasConflict).length : conflicts.length} Feature(s)`}
+              </Button>
+            </>
+          )}
+          {step === 'result' && (
+            <Button onClick={() => onOpenChange(false)} data-testid="close-import">
+              Done
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/index.ts b/temp_repo/apps/ui/src/components/views/board-view/dialogs/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..80775196e9ad9da1c817baf411127cb6b209720a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/index.ts
@@ -0,0 +1,38 @@
+export { AddFeatureDialog } from './add-feature-dialog';
+export { QuickAddDialog } from './quick-add-dialog';
+export { AgentOutputModal } from './agent-output-modal';
+export { BacklogPlanDialog } from './backlog-plan-dialog';
+export { CompletedFeaturesModal } from './completed-features-modal';
+export { ArchiveAllVerifiedDialog } from './archive-all-verified-dialog';
+export { DeleteCompletedFeatureDialog } from './delete-completed-feature-dialog';
+export { DependencyLinkDialog, type DependencyLinkType } from './dependency-link-dialog';
+export { DuplicateCountDialog } from './duplicate-count-dialog';
+export { DiscardWorktreeChangesDialog } from './discard-worktree-changes-dialog';
+export { EditFeatureDialog } from './edit-feature-dialog';
+export { FollowUpDialog, type FollowUpHistoryEntry } from './follow-up-dialog';
+export { MergeWorktreeDialog, type MergeConflictInfo } from './merge-worktree-dialog';
+export { PlanApprovalDialog } from './plan-approval-dialog';
+export { MassEditDialog } from './mass-edit-dialog';
+export { MergeRebaseDialog, type PullStrategy } from './merge-rebase-dialog';
+export { PushToRemoteDialog } from './push-to-remote-dialog';
+export { SelectRemoteDialog, type SelectRemoteOperation } from './select-remote-dialog';
+export { ViewCommitsDialog } from './view-commits-dialog';
+export { ViewWorktreeChangesDialog } from './view-worktree-changes-dialog';
+export { ExportFeaturesDialog } from './export-features-dialog';
+export { ImportFeaturesDialog } from './import-features-dialog';
+export { StashChangesDialog } from './stash-changes-dialog';
+export { ViewStashesDialog } from './view-stashes-dialog';
+export { StashApplyConflictDialog } from './stash-apply-conflict-dialog';
+export { CherryPickDialog } from './cherry-pick-dialog';
+export { GitPullDialog } from './git-pull-dialog';
+export { ChangePRNumberDialog } from './change-pr-number-dialog';
+export {
+  BranchConflictDialog,
+  type BranchConflictData,
+  type BranchConflictType,
+} from './branch-conflict-dialog';
+export {
+  StashConfirmDialog,
+  type UncommittedChangesInfo,
+  type StashConfirmAction,
+} from './stash-confirm-dialog';
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/mass-edit-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/mass-edit-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b39e942ad5ffb1128521d42aa0eb8f3fc0239986
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/mass-edit-dialog.tsx
@@ -0,0 +1,404 @@
+import { useState, useEffect, useMemo } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { AlertCircle } from 'lucide-react';
+import { Feature, ModelAlias, ThinkingLevel, PlanningMode } from '@/store/app-store';
+import {
+  TestingTabContent,
+  PrioritySelect,
+  PlanningModeSelect,
+  WorkModeSelector,
+  PipelineExclusionControls,
+} from '../shared';
+import type { WorkMode } from '../shared';
+import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
+import type { PhaseModelEntry } from '@automaker/types';
+import { cn, normalizeModelEntry } from '@/lib/utils';
+
+interface MassEditDialogProps {
+  open: boolean;
+  onClose: () => void;
+  selectedFeatures: Feature[];
+  onApply: (updates: Partial<Feature>, workMode: WorkMode) => Promise<void>;
+  branchSuggestions: string[];
+  branchCardCounts?: Record<string, number>;
+  currentBranch?: string;
+  projectPath?: string;
+}
+
+interface ApplyState {
+  model: boolean;
+  thinkingLevel: boolean;
+  planningMode: boolean;
+  requirePlanApproval: boolean;
+  priority: boolean;
+  skipTests: boolean;
+  branchName: boolean;
+  excludedPipelineSteps: boolean;
+}
+
+function getMixedValues(features: Feature[]): Record<string, boolean> {
+  if (features.length === 0) return {};
+  const first = features[0];
+  const firstExcludedSteps = JSON.stringify(first.excludedPipelineSteps || []);
+  return {
+    model: !features.every((f) => f.model === first.model),
+    thinkingLevel: !features.every((f) => f.thinkingLevel === first.thinkingLevel),
+    planningMode: !features.every((f) => f.planningMode === first.planningMode),
+    requirePlanApproval: !features.every(
+      (f) => f.requirePlanApproval === first.requirePlanApproval
+    ),
+    priority: !features.every((f) => f.priority === first.priority),
+    skipTests: !features.every((f) => f.skipTests === first.skipTests),
+    branchName: !features.every((f) => f.branchName === first.branchName),
+    excludedPipelineSteps: !features.every(
+      (f) => JSON.stringify(f.excludedPipelineSteps || []) === firstExcludedSteps
+    ),
+  };
+}
+
+function getInitialValue<T>(features: Feature[], key: keyof Feature, defaultValue: T): T {
+  if (features.length === 0) return defaultValue;
+  return (features[0][key] as T) ?? defaultValue;
+}
+
+interface FieldWrapperProps {
+  label: string;
+  isMixed: boolean;
+  willApply: boolean;
+  onApplyChange: (apply: boolean) => void;
+  children: React.ReactNode;
+}
+
+function FieldWrapper({ label, isMixed, willApply, onApplyChange, children }: FieldWrapperProps) {
+  return (
+    <div
+      className={cn(
+        'p-3 rounded-lg border transition-colors',
+        willApply ? 'border-brand-500/50 bg-brand-500/5' : 'border-border bg-muted/20'
+      )}
+    >
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <Checkbox
+            checked={willApply}
+            onCheckedChange={(checked) => onApplyChange(!!checked)}
+            className="data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500"
+          />
+          <Label
+            className="text-sm font-medium cursor-pointer"
+            onClick={() => onApplyChange(!willApply)}
+          >
+            {label}
+          </Label>
+        </div>
+        {isMixed && (
+          <span className="flex items-center gap-1 text-xs text-amber-500">
+            <AlertCircle className="w-3 h-3" />
+            Mixed values
+          </span>
+        )}
+      </div>
+      <div className={cn(!willApply && 'opacity-50 pointer-events-none')}>{children}</div>
+    </div>
+  );
+}
+
+export function MassEditDialog({
+  open,
+  onClose,
+  selectedFeatures,
+  onApply,
+  branchSuggestions,
+  branchCardCounts,
+  currentBranch,
+  projectPath,
+}: MassEditDialogProps) {
+  const [isApplying, setIsApplying] = useState(false);
+
+  // Track which fields to apply
+  const [applyState, setApplyState] = useState<ApplyState>({
+    model: false,
+    thinkingLevel: false,
+    planningMode: false,
+    requirePlanApproval: false,
+    priority: false,
+    skipTests: false,
+    branchName: false,
+    excludedPipelineSteps: false,
+  });
+
+  // Field values
+  const [model, setModel] = useState<ModelAlias>('claude-sonnet');
+  const [thinkingLevel, setThinkingLevel] = useState<ThinkingLevel>('none');
+  const [providerId, setProviderId] = useState<string | undefined>(undefined);
+  const [planningMode, setPlanningMode] = useState<PlanningMode>('skip');
+  const [requirePlanApproval, setRequirePlanApproval] = useState(false);
+  const [priority, setPriority] = useState(2);
+  const [skipTests, setSkipTests] = useState(false);
+
+  // Work mode and branch name state
+  const [workMode, setWorkMode] = useState<WorkMode>(() => {
+    // Derive initial work mode from first selected feature's branchName
+    if (selectedFeatures.length > 0 && selectedFeatures[0].branchName) {
+      return 'custom';
+    }
+    return 'current';
+  });
+  const [branchName, setBranchName] = useState(() => {
+    return getInitialValue(selectedFeatures, 'branchName', '') as string;
+  });
+
+  // Pipeline exclusion state
+  const [excludedPipelineSteps, setExcludedPipelineSteps] = useState<string[]>(() => {
+    return getInitialValue(selectedFeatures, 'excludedPipelineSteps', []) as string[];
+  });
+
+  // Calculate mixed values
+  const mixedValues = useMemo(() => getMixedValues(selectedFeatures), [selectedFeatures]);
+
+  // Reset state when dialog opens with new features
+  useEffect(() => {
+    if (open && selectedFeatures.length > 0) {
+      setApplyState({
+        model: false,
+        thinkingLevel: false,
+        planningMode: false,
+        requirePlanApproval: false,
+        priority: false,
+        skipTests: false,
+        branchName: false,
+        excludedPipelineSteps: false,
+      });
+      setModel(getInitialValue(selectedFeatures, 'model', 'claude-sonnet') as ModelAlias);
+      setThinkingLevel(getInitialValue(selectedFeatures, 'thinkingLevel', 'none') as ThinkingLevel);
+      setProviderId(
+        getInitialValue(selectedFeatures, 'providerId', undefined) as string | undefined
+      );
+      setPlanningMode(getInitialValue(selectedFeatures, 'planningMode', 'skip') as PlanningMode);
+      setRequirePlanApproval(getInitialValue(selectedFeatures, 'requirePlanApproval', false));
+      setPriority(getInitialValue(selectedFeatures, 'priority', 2));
+      setSkipTests(getInitialValue(selectedFeatures, 'skipTests', false));
+      // Reset work mode and branch name
+      const initialBranchName = getInitialValue(selectedFeatures, 'branchName', '') as string;
+      setBranchName(initialBranchName);
+      setWorkMode(initialBranchName ? 'custom' : 'current');
+      // Reset pipeline exclusions
+      setExcludedPipelineSteps(
+        getInitialValue(selectedFeatures, 'excludedPipelineSteps', []) as string[]
+      );
+    }
+  }, [open, selectedFeatures]);
+
+  // Clear requirePlanApproval when planning mode is skip (lite supports approval)
+  useEffect(() => {
+    if (planningMode === 'skip') {
+      setRequirePlanApproval(false);
+    }
+  }, [planningMode]);
+
+  const handleApply = async () => {
+    const updates: Partial<Feature> = {};
+
+    if (applyState.model || applyState.thinkingLevel) {
+      const normalizedEntry = normalizeModelEntry({
+        model,
+        thinkingLevel,
+        providerId,
+      });
+
+      if (applyState.model) {
+        updates.model = normalizedEntry.model;
+        updates.providerId = normalizedEntry.providerId;
+      }
+
+      if (applyState.thinkingLevel) {
+        updates.thinkingLevel = normalizedEntry.thinkingLevel;
+      }
+    }
+
+    if (applyState.planningMode) updates.planningMode = planningMode;
+    if (applyState.requirePlanApproval) updates.requirePlanApproval = requirePlanApproval;
+    if (applyState.priority) updates.priority = priority;
+    if (applyState.skipTests) updates.skipTests = skipTests;
+    if (applyState.branchName) {
+      // For 'current' mode, use empty string (work on current branch)
+      // For 'auto' mode, use empty string (will be auto-generated)
+      // For 'custom' mode, use the specified branch name
+      updates.branchName = workMode === 'custom' ? branchName : '';
+    }
+    if (applyState.excludedPipelineSteps) {
+      updates.excludedPipelineSteps =
+        excludedPipelineSteps.length > 0 ? excludedPipelineSteps : undefined;
+    }
+
+    if (Object.keys(updates).length === 0) {
+      onClose();
+      return;
+    }
+
+    setIsApplying(true);
+    try {
+      await onApply(updates, workMode);
+      onClose();
+    } finally {
+      setIsApplying(false);
+    }
+  };
+
+  const hasAnyApply = Object.values(applyState).some(Boolean);
+
+  return (
+    <Dialog open={open} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-2xl" data-testid="mass-edit-dialog">
+        <DialogHeader>
+          <DialogTitle>Edit {selectedFeatures.length} Features</DialogTitle>
+          <DialogDescription>
+            Select which settings to apply to all selected features.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4 pr-4 space-y-4 max-h-[60vh] overflow-y-auto">
+          {/* Model Selector */}
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">AI Model</Label>
+            <p className="text-xs text-muted-foreground mb-2">
+              Select a specific model configuration
+            </p>
+            <PhaseModelSelector
+              value={{ model, thinkingLevel, providerId }}
+              onChange={(entry: PhaseModelEntry) => {
+                setModel(entry.model as ModelAlias);
+                setThinkingLevel(entry.thinkingLevel || 'none');
+                setProviderId(entry.providerId);
+                // Auto-enable model and thinking level for apply state
+                setApplyState((prev) => ({
+                  ...prev,
+                  model: true,
+                  thinkingLevel: true,
+                }));
+              }}
+              compact
+            />
+          </div>
+
+          {/* Separator */}
+          <div className="border-t border-border" />
+
+          {/* Planning Mode */}
+          <FieldWrapper
+            label="Planning Mode"
+            isMixed={mixedValues.planningMode || mixedValues.requirePlanApproval}
+            willApply={applyState.planningMode || applyState.requirePlanApproval}
+            onApplyChange={(apply) =>
+              setApplyState((prev) => ({
+                ...prev,
+                planningMode: apply,
+                requirePlanApproval: apply,
+              }))
+            }
+          >
+            <PlanningModeSelect
+              mode={planningMode}
+              onModeChange={(newMode) => {
+                setPlanningMode(newMode);
+                // Auto-suggest approval based on mode, but user can override
+                setRequirePlanApproval(newMode === 'spec' || newMode === 'full');
+              }}
+              requireApproval={requirePlanApproval}
+              onRequireApprovalChange={setRequirePlanApproval}
+              testIdPrefix="mass-edit-planning"
+            />
+          </FieldWrapper>
+
+          {/* Priority */}
+          <FieldWrapper
+            label="Priority"
+            isMixed={mixedValues.priority}
+            willApply={applyState.priority}
+            onApplyChange={(apply) => setApplyState((prev) => ({ ...prev, priority: apply }))}
+          >
+            <PrioritySelect
+              selectedPriority={priority}
+              onPrioritySelect={setPriority}
+              testIdPrefix="mass-edit-priority"
+            />
+          </FieldWrapper>
+
+          {/* Testing */}
+          <FieldWrapper
+            label="Testing"
+            isMixed={mixedValues.skipTests}
+            willApply={applyState.skipTests}
+            onApplyChange={(apply) => setApplyState((prev) => ({ ...prev, skipTests: apply }))}
+          >
+            <TestingTabContent
+              skipTests={skipTests}
+              onSkipTestsChange={setSkipTests}
+              testIdPrefix="mass-edit"
+            />
+          </FieldWrapper>
+
+          {/* Branch / Work Mode */}
+          <FieldWrapper
+            label="Branch / Work Mode"
+            isMixed={mixedValues.branchName}
+            willApply={applyState.branchName}
+            onApplyChange={(apply) => setApplyState((prev) => ({ ...prev, branchName: apply }))}
+          >
+            <WorkModeSelector
+              workMode={workMode}
+              onWorkModeChange={setWorkMode}
+              branchName={branchName}
+              onBranchNameChange={setBranchName}
+              branchSuggestions={branchSuggestions}
+              branchCardCounts={branchCardCounts}
+              currentBranch={currentBranch}
+              testIdPrefix="mass-edit-work-mode"
+            />
+          </FieldWrapper>
+
+          {/* Pipeline Exclusion */}
+          <FieldWrapper
+            label="Pipeline Steps"
+            isMixed={mixedValues.excludedPipelineSteps}
+            willApply={applyState.excludedPipelineSteps}
+            onApplyChange={(apply) =>
+              setApplyState((prev) => ({ ...prev, excludedPipelineSteps: apply }))
+            }
+          >
+            <PipelineExclusionControls
+              projectPath={projectPath}
+              excludedPipelineSteps={excludedPipelineSteps}
+              onExcludedStepsChange={setExcludedPipelineSteps}
+              testIdPrefix="mass-edit-pipeline"
+            />
+          </FieldWrapper>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={onClose} disabled={isApplying}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleApply}
+            disabled={!hasAnyApply || isApplying}
+            loading={isApplying}
+            data-testid="mass-edit-apply-button"
+          >
+            Apply to {selectedFeatures.length} Features
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/merge-rebase-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/merge-rebase-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..44f573000e9b4db5be013bc7f70c7e01ddc105c6
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/merge-rebase-dialog.tsx
@@ -0,0 +1,645 @@
+import { useState, useEffect, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import {
+  GitMerge,
+  RefreshCw,
+  AlertTriangle,
+  GitBranch,
+  Wrench,
+  Sparkles,
+  XCircle,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import type { WorktreeInfo, MergeConflictInfo } from '../worktree-panel/types';
+
+export type PullStrategy = 'merge' | 'rebase';
+
+type DialogStep = 'select' | 'executing' | 'conflict' | 'success';
+
+interface ConflictState {
+  conflictFiles: string[];
+  remoteBranch: string;
+  strategy: PullStrategy;
+}
+
+interface RemoteBranch {
+  name: string;
+  fullRef: string;
+}
+
+interface RemoteInfo {
+  name: string;
+  url: string;
+  branches: RemoteBranch[];
+}
+
+const logger = createLogger('MergeRebaseDialog');
+
+interface MergeRebaseDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  onCreateConflictResolutionFeature?: (conflictInfo: MergeConflictInfo) => void;
+}
+
+export function MergeRebaseDialog({
+  open,
+  onOpenChange,
+  worktree,
+  onCreateConflictResolutionFeature,
+}: MergeRebaseDialogProps) {
+  const [remotes, setRemotes] = useState<RemoteInfo[]>([]);
+  const [selectedRemote, setSelectedRemote] = useState<string>('');
+  const [selectedBranch, setSelectedBranch] = useState<string>('');
+  const [selectedStrategy, setSelectedStrategy] = useState<PullStrategy>('merge');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [step, setStep] = useState<DialogStep>('select');
+  const [conflictState, setConflictState] = useState<ConflictState | null>(null);
+
+  // Fetch remotes when dialog opens
+  useEffect(() => {
+    if (open && worktree) {
+      fetchRemotes();
+    }
+  }, [open, worktree]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      setSelectedRemote('');
+      setSelectedBranch('');
+      setSelectedStrategy('merge');
+      setError(null);
+      setStep('select');
+      setConflictState(null);
+    }
+  }, [open]);
+
+  // Auto-select default remote and branch when remotes are loaded
+  useEffect(() => {
+    if (remotes.length > 0 && !selectedRemote) {
+      // Default to 'origin' if available, otherwise first remote
+      const defaultRemote = remotes.find((r) => r.name === 'origin') || remotes[0];
+      setSelectedRemote(defaultRemote.name);
+
+      // Try to select a matching branch name or default to main/master
+      if (defaultRemote.branches.length > 0 && worktree) {
+        const matchingBranch = defaultRemote.branches.find((b) => b.name === worktree.branch);
+        const mainBranch = defaultRemote.branches.find(
+          (b) => b.name === 'main' || b.name === 'master'
+        );
+        const defaultBranch = matchingBranch || mainBranch || defaultRemote.branches[0];
+        setSelectedBranch(defaultBranch.fullRef);
+      }
+    }
+  }, [remotes, selectedRemote, worktree]);
+
+  // Update selected branch when remote changes
+  useEffect(() => {
+    if (selectedRemote && remotes.length > 0 && worktree) {
+      const remote = remotes.find((r) => r.name === selectedRemote);
+      if (remote && remote.branches.length > 0) {
+        // Try to select a matching branch name or default to main/master
+        const matchingBranch = remote.branches.find((b) => b.name === worktree.branch);
+        const mainBranch = remote.branches.find((b) => b.name === 'main' || b.name === 'master');
+        const defaultBranch = matchingBranch || mainBranch || remote.branches[0];
+        setSelectedBranch(defaultBranch.fullRef);
+      } else {
+        setSelectedBranch('');
+      }
+    }
+  }, [selectedRemote, remotes, worktree]);
+
+  const fetchRemotes = async () => {
+    if (!worktree) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const api = getHttpApiClient();
+      const result = await api.worktree.listRemotes(worktree.path);
+
+      if (result.success && result.result) {
+        setRemotes(result.result.remotes);
+        if (result.result.remotes.length === 0) {
+          setError('No remotes found in this repository');
+        }
+      } else {
+        setError(result.error || 'Failed to fetch remotes');
+      }
+    } catch (err) {
+      logger.error('Failed to fetch remotes:', err);
+      setError('Failed to fetch remotes');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleRefresh = async () => {
+    if (!worktree) return;
+
+    setIsRefreshing(true);
+    setError(null);
+
+    try {
+      const api = getHttpApiClient();
+      const result = await api.worktree.listRemotes(worktree.path);
+
+      if (result.success && result.result) {
+        setRemotes(result.result.remotes);
+        toast.success('Remotes refreshed');
+      } else {
+        toast.error(result.error || 'Failed to refresh remotes');
+      }
+    } catch (err) {
+      logger.error('Failed to refresh remotes:', err);
+      toast.error('Failed to refresh remotes');
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const handleExecuteOperation = useCallback(async () => {
+    if (!worktree || !selectedBranch) return;
+
+    setStep('executing');
+
+    try {
+      const api = getHttpApiClient();
+
+      if (selectedStrategy === 'rebase') {
+        // Attempt the rebase operation - the rebase service fetches from the remote
+        // before rebasing to ensure we have up-to-date refs
+        const result = await api.worktree.rebase(worktree.path, selectedBranch, selectedRemote);
+
+        if (result.success) {
+          toast.success(`Rebased onto ${selectedBranch}`, {
+            description: result.result?.message || 'Rebase completed successfully',
+          });
+          setStep('success');
+          onOpenChange(false);
+        } else if (result.hasConflicts) {
+          // Rebase had conflicts - show conflict resolution UI
+          setConflictState({
+            conflictFiles: result.conflictFiles || [],
+            remoteBranch: selectedBranch,
+            strategy: 'rebase',
+          });
+          setStep('conflict');
+        } else {
+          toast.error('Rebase failed', {
+            description: result.error || 'Unknown error',
+          });
+          setStep('select');
+        }
+      } else {
+        // Merge strategy - merge the selected remote branch into the current branch.
+        // selectedBranch may be a full ref (e.g. refs/remotes/origin/main); normalize to short name
+        // for 'git pull <remote> <branch>'.
+        let remoteBranchShortName = selectedBranch;
+        const remotePrefix = `refs/remotes/${selectedRemote}/`;
+        if (selectedBranch.startsWith(remotePrefix)) {
+          remoteBranchShortName = selectedBranch.slice(remotePrefix.length);
+        } else if (selectedBranch.startsWith(`${selectedRemote}/`)) {
+          remoteBranchShortName = selectedBranch.slice(selectedRemote.length + 1);
+        } else if (selectedBranch.startsWith('refs/heads/')) {
+          remoteBranchShortName = selectedBranch.slice('refs/heads/'.length);
+        } else if (selectedBranch.startsWith('refs/')) {
+          remoteBranchShortName = selectedBranch.slice('refs/'.length);
+        }
+        const result = await api.worktree.pull(
+          worktree.path,
+          selectedRemote,
+          true,
+          remoteBranchShortName
+        );
+
+        if (result.success && result.result) {
+          if (result.result.hasConflicts) {
+            // Pull had conflicts
+            setConflictState({
+              conflictFiles: result.result.conflictFiles || [],
+              remoteBranch: selectedBranch,
+              strategy: 'merge',
+            });
+            setStep('conflict');
+          } else {
+            toast.success(`Merged ${selectedBranch}`, {
+              description: result.result.message || 'Merge completed successfully',
+            });
+            setStep('success');
+            onOpenChange(false);
+          }
+        } else {
+          // Check for conflict indicators in error
+          const errorMessage = result.error || '';
+          const hasConflicts =
+            errorMessage.toLowerCase().includes('conflict') || errorMessage.includes('CONFLICT');
+
+          if (hasConflicts) {
+            setConflictState({
+              conflictFiles: [],
+              remoteBranch: selectedBranch,
+              strategy: 'merge',
+            });
+            setStep('conflict');
+          } else {
+            // Non-conflict failure - show conflict resolution UI so user can choose
+            // how to handle it (resolve manually or with AI) rather than auto-creating a task
+            setConflictState({
+              conflictFiles: [],
+              remoteBranch: selectedBranch,
+              strategy: 'merge',
+            });
+            setStep('conflict');
+          }
+        }
+      }
+    } catch (err) {
+      logger.error('Failed to execute operation:', err);
+
+      // Show conflict resolution UI so user can choose how to handle it
+      setConflictState({
+        conflictFiles: [],
+        remoteBranch: selectedBranch,
+        strategy: selectedStrategy,
+      });
+      setStep('conflict');
+    }
+  }, [worktree, selectedBranch, selectedStrategy, selectedRemote, onOpenChange]);
+
+  const handleResolveWithAI = useCallback(() => {
+    if (!worktree || !conflictState) return;
+
+    if (onCreateConflictResolutionFeature) {
+      const conflictInfo: MergeConflictInfo = {
+        sourceBranch: conflictState.remoteBranch,
+        targetBranch: worktree.branch,
+        targetWorktreePath: worktree.path,
+        conflictFiles: conflictState.conflictFiles,
+        operationType: conflictState.strategy,
+      };
+
+      onCreateConflictResolutionFeature(conflictInfo);
+    }
+
+    onOpenChange(false);
+  }, [worktree, conflictState, onCreateConflictResolutionFeature, onOpenChange]);
+
+  const handleResolveManually = useCallback(() => {
+    toast.info('Conflict markers left in place', {
+      description: 'Edit the conflicting files to resolve conflicts manually.',
+      duration: 6000,
+    });
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  const selectedRemoteData = remotes.find((r) => r.name === selectedRemote);
+  const branches = selectedRemoteData?.branches || [];
+
+  if (!worktree) return null;
+
+  // Conflict resolution UI
+  if (step === 'conflict' && conflictState) {
+    const isRebase = conflictState.strategy === 'rebase';
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-[520px]">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="w-5 h-5 text-orange-500" />
+              {isRebase ? 'Rebase' : 'Merge'} Conflicts Detected
+            </DialogTitle>
+            <DialogDescription asChild>
+              <div className="space-y-4">
+                <span className="block">
+                  {isRebase ? (
+                    <>
+                      Conflicts detected when rebasing{' '}
+                      <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code>{' '}
+                      onto{' '}
+                      <code className="font-mono bg-muted px-1 rounded">
+                        {conflictState.remoteBranch}
+                      </code>
+                      . The rebase was aborted and no changes were applied.
+                    </>
+                  ) : (
+                    <>
+                      Conflicts detected when merging{' '}
+                      <code className="font-mono bg-muted px-1 rounded">
+                        {conflictState.remoteBranch}
+                      </code>{' '}
+                      into{' '}
+                      <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code>.
+                    </>
+                  )}
+                </span>
+
+                {conflictState.conflictFiles.length > 0 && (
+                  <div className="space-y-1.5">
+                    <span className="text-sm font-medium text-foreground">
+                      Conflicting files ({conflictState.conflictFiles.length}):
+                    </span>
+                    <div className="border border-border rounded-lg overflow-hidden max-h-[200px] overflow-y-auto scrollbar-visible">
+                      {conflictState.conflictFiles.map((file) => (
+                        <div
+                          key={file}
+                          className="flex items-center gap-2 px-3 py-1.5 text-xs font-mono border-b border-border last:border-b-0 hover:bg-accent/30"
+                        >
+                          <XCircle className="w-3.5 h-3.5 text-red-500 flex-shrink-0" />
+                          <span className="truncate">{file}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                <div className="mt-2 p-3 rounded-md bg-muted/50 border border-border">
+                  <p className="text-sm text-muted-foreground font-medium mb-2">
+                    Choose how to resolve:
+                  </p>
+                  <ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
+                    <li>
+                      <strong>Resolve with AI</strong> &mdash; Creates a task to{' '}
+                      {isRebase ? 'rebase and ' : ''}resolve conflicts automatically
+                    </li>
+                    <li>
+                      <strong>Resolve Manually</strong> &mdash;{' '}
+                      {isRebase
+                        ? 'Leaves the branch unchanged for you to rebase manually'
+                        : 'Leaves conflict markers in place for you to edit directly'}
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </DialogDescription>
+          </DialogHeader>
+
+          <DialogFooter>
+            <Button
+              variant="ghost"
+              onClick={() => {
+                setStep('select');
+                setConflictState(null);
+              }}
+            >
+              Back
+            </Button>
+            <Button variant="outline" onClick={handleResolveManually}>
+              <Wrench className="w-4 h-4 mr-2" />
+              Resolve Manually
+            </Button>
+            <Button
+              onClick={handleResolveWithAI}
+              className="bg-purple-600 hover:bg-purple-700 text-white"
+            >
+              <Sparkles className="w-4 h-4 mr-2" />
+              Resolve with AI
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // Executing phase
+  if (step === 'executing') {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              {selectedStrategy === 'rebase' ? (
+                <GitBranch className="w-5 h-5 text-blue-500 animate-pulse" />
+              ) : (
+                <GitMerge className="w-5 h-5 text-purple-500 animate-pulse" />
+              )}
+              {selectedStrategy === 'rebase' ? 'Rebasing...' : 'Merging...'}
+            </DialogTitle>
+            <DialogDescription>
+              {selectedStrategy === 'rebase'
+                ? `Rebasing ${worktree.branch} onto ${selectedBranch}...`
+                : `Merging ${selectedBranch} into ${worktree.branch}...`}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex items-center justify-center py-8">
+            <Spinner size="md" />
+            <span className="ml-3 text-sm text-muted-foreground">This may take a moment...</span>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // Selection UI
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitMerge className="w-5 h-5 text-purple-500" />
+            Merge & Rebase
+          </DialogTitle>
+          <DialogDescription>
+            Select a remote branch to merge or rebase with{' '}
+            <span className="font-mono text-foreground">
+              {worktree?.branch || 'current branch'}
+            </span>
+          </DialogDescription>
+        </DialogHeader>
+
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <Spinner size="lg" />
+          </div>
+        ) : error ? (
+          <div className="flex flex-col items-center gap-4 py-6">
+            <div className="flex items-center gap-2 text-destructive">
+              <AlertTriangle className="w-5 h-5" />
+              <span className="text-sm">{error}</span>
+            </div>
+            <Button variant="outline" size="sm" onClick={fetchRemotes}>
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Retry
+            </Button>
+          </div>
+        ) : (
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="remote-select">Remote</Label>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleRefresh}
+                  disabled={isRefreshing}
+                  className="h-6 px-2 text-xs"
+                >
+                  {isRefreshing ? (
+                    <Spinner size="xs" className="mr-1" />
+                  ) : (
+                    <RefreshCw className="w-3 h-3 mr-1" />
+                  )}
+                  Refresh
+                </Button>
+              </div>
+              <Select value={selectedRemote} onValueChange={setSelectedRemote}>
+                <SelectTrigger id="remote-select">
+                  <SelectValue placeholder="Select a remote" />
+                </SelectTrigger>
+                <SelectContent>
+                  {remotes.map((remote) => (
+                    <SelectItem
+                      key={remote.name}
+                      value={remote.name}
+                      description={
+                        <span className="text-xs text-muted-foreground truncate max-w-[300px]">
+                          {remote.url}
+                        </span>
+                      }
+                    >
+                      <span className="font-medium">{remote.name}</span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="branch-select">Branch</Label>
+              <Select
+                value={selectedBranch}
+                onValueChange={setSelectedBranch}
+                disabled={!selectedRemote || branches.length === 0}
+              >
+                <SelectTrigger id="branch-select">
+                  <SelectValue placeholder="Select a branch" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>{selectedRemote} branches</SelectLabel>
+                    {branches.map((branch) => (
+                      <SelectItem key={branch.fullRef} value={branch.fullRef}>
+                        {branch.name}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              {selectedRemote && branches.length === 0 && (
+                <p className="text-sm text-muted-foreground">No branches found for this remote</p>
+              )}
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="strategy-select">Strategy</Label>
+              <Select
+                value={selectedStrategy}
+                onValueChange={(value) => setSelectedStrategy(value as PullStrategy)}
+              >
+                <SelectTrigger id="strategy-select">
+                  <SelectValue placeholder="Select a strategy" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem
+                    value="merge"
+                    description={
+                      <span className="text-xs text-muted-foreground">
+                        Creates a merge commit preserving history
+                      </span>
+                    }
+                  >
+                    <span className="flex items-center gap-2">
+                      <GitMerge className="w-3.5 h-3.5 text-purple-500" />
+                      <span className="font-medium">Merge</span>
+                    </span>
+                  </SelectItem>
+                  <SelectItem
+                    value="rebase"
+                    description={
+                      <span className="text-xs text-muted-foreground">
+                        Replays commits on top for linear history
+                      </span>
+                    }
+                  >
+                    <span className="flex items-center gap-2">
+                      <GitBranch className="w-3.5 h-3.5 text-blue-500" />
+                      <span className="font-medium">Rebase</span>
+                    </span>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {selectedBranch && (
+              <div className="mt-2 p-3 rounded-md bg-muted/50 border border-border">
+                <p className="text-sm text-muted-foreground">
+                  This will attempt to{' '}
+                  {selectedStrategy === 'rebase' ? (
+                    <>
+                      rebase <span className="font-mono text-foreground">{worktree?.branch}</span>{' '}
+                      onto <span className="font-mono text-foreground">{selectedBranch}</span>
+                    </>
+                  ) : (
+                    <>
+                      merge <span className="font-mono text-foreground">{selectedBranch}</span> into{' '}
+                      <span className="font-mono text-foreground">{worktree?.branch}</span>
+                    </>
+                  )}
+                  . If conflicts arise, you can choose to resolve them manually or with AI.
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleExecuteOperation}
+            disabled={!selectedBranch || isLoading}
+            className="bg-purple-600 hover:bg-purple-700 text-white"
+          >
+            {selectedStrategy === 'rebase' ? (
+              <>
+                <GitBranch className="w-4 h-4 mr-2" />
+                Rebase
+              </>
+            ) : (
+              <>
+                <GitMerge className="w-4 h-4 mr-2" />
+                Merge
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/merge-worktree-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/merge-worktree-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d4b3adcd76494d36dbcf81d635bfb8606e9a9b88
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/merge-worktree-dialog.tsx
@@ -0,0 +1,369 @@
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { GitMerge, AlertTriangle, Trash2, Wrench, Sparkles, XCircle } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getElectronAPI } from '@/lib/electron';
+import { toast } from 'sonner';
+import { BranchAutocomplete } from '@/components/ui/branch-autocomplete';
+import type { WorktreeInfo, BranchInfo, MergeConflictInfo } from '../worktree-panel/types';
+
+export type { MergeConflictInfo } from '../worktree-panel/types';
+
+interface MergeWorktreeDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectPath: string;
+  worktree: WorktreeInfo | null;
+  /** Called when integration is successful. integratedWorktree indicates the integrated worktree and deletedBranch indicates if the branch was also deleted. */
+  onIntegrated: (integratedWorktree: WorktreeInfo, deletedBranch: boolean) => void;
+  onCreateConflictResolutionFeature?: (conflictInfo: MergeConflictInfo) => void;
+}
+
+export function MergeWorktreeDialog({
+  open,
+  onOpenChange,
+  projectPath,
+  worktree,
+  onIntegrated,
+  onCreateConflictResolutionFeature,
+}: MergeWorktreeDialogProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [targetBranch, setTargetBranch] = useState('main');
+  const [availableBranches, setAvailableBranches] = useState<string[]>([]);
+  const [loadingBranches, setLoadingBranches] = useState(false);
+  const [deleteWorktreeAndBranch, setDeleteWorktreeAndBranch] = useState(false);
+  const [mergeConflict, setMergeConflict] = useState<MergeConflictInfo | null>(null);
+
+  // Fetch available branches when dialog opens
+  useEffect(() => {
+    if (open && worktree && projectPath) {
+      setLoadingBranches(true);
+      const api = getElectronAPI();
+      if (api?.worktree?.listBranches) {
+        api.worktree
+          .listBranches(projectPath, false)
+          .then((result) => {
+            if (result.success && result.result?.branches) {
+              // Filter out the source branch (can't merge into itself) and remote branches
+              const branches = result.result.branches
+                .filter((b: BranchInfo) => !b.isRemote && b.name !== worktree.branch)
+                .map((b: BranchInfo) => b.name);
+              setAvailableBranches(branches);
+            }
+          })
+          .catch((err) => {
+            console.error('Failed to fetch branches:', err);
+          })
+          .finally(() => {
+            setLoadingBranches(false);
+          });
+      } else {
+        setLoadingBranches(false);
+      }
+    }
+  }, [open, worktree, projectPath]);
+
+  // Reset state when dialog opens
+  useEffect(() => {
+    if (open) {
+      setIsLoading(false);
+      setTargetBranch('main');
+      setDeleteWorktreeAndBranch(false);
+      setMergeConflict(null);
+    }
+  }, [open]);
+
+  const handleMerge = async () => {
+    if (!worktree) return;
+
+    setIsLoading(true);
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.mergeFeature) {
+        toast.error('Worktree API not available');
+        return;
+      }
+
+      // Pass branchName, worktreePath, targetBranch, and options to the API
+      const result = await api.worktree.mergeFeature(
+        projectPath,
+        worktree.branch,
+        worktree.path,
+        targetBranch,
+        { deleteWorktreeAndBranch }
+      );
+
+      if (result.success) {
+        const description = deleteWorktreeAndBranch
+          ? `Branch "${worktree.branch}" has been integrated into "${targetBranch}" and the worktree and branch were deleted`
+          : `Branch "${worktree.branch}" has been integrated into "${targetBranch}"`;
+        toast.success(`Branch integrated into ${targetBranch}`, { description });
+        onIntegrated(worktree, deleteWorktreeAndBranch);
+        onOpenChange(false);
+      } else {
+        // Check if the error indicates merge conflicts
+        const errorMessage = result.error || '';
+        const hasConflicts =
+          errorMessage.toLowerCase().includes('conflict') ||
+          errorMessage.toLowerCase().includes('merge failed') ||
+          errorMessage.includes('CONFLICT') ||
+          result.hasConflicts;
+
+        if (hasConflicts) {
+          // Set merge conflict state to show the conflict resolution UI
+          setMergeConflict({
+            sourceBranch: worktree.branch,
+            targetBranch: targetBranch,
+            targetWorktreePath: projectPath, // The merge happens in the target branch's worktree
+            conflictFiles: result.conflictFiles || [],
+            operationType: 'merge',
+          });
+          toast.error('Integrate conflicts detected', {
+            description: 'Choose how to resolve the conflicts below.',
+          });
+        } else {
+          toast.error('Failed to integrate branch', {
+            description: result.error,
+          });
+        }
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      // Check if the error indicates merge conflicts
+      const hasConflicts =
+        errorMessage.toLowerCase().includes('conflict') ||
+        errorMessage.toLowerCase().includes('merge failed') ||
+        errorMessage.includes('CONFLICT');
+
+      if (hasConflicts) {
+        setMergeConflict({
+          sourceBranch: worktree.branch,
+          targetBranch: targetBranch,
+          targetWorktreePath: projectPath,
+          conflictFiles: [],
+          operationType: 'merge',
+        });
+        toast.error('Integrate conflicts detected', {
+          description: 'Choose how to resolve the conflicts below.',
+        });
+      } else {
+        toast.error('Failed to integrate branch', {
+          description: errorMessage,
+        });
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleResolveWithAI = () => {
+    if (mergeConflict && onCreateConflictResolutionFeature) {
+      onCreateConflictResolutionFeature(mergeConflict);
+      onOpenChange(false);
+    }
+  };
+
+  const handleResolveManually = () => {
+    toast.info('Conflict markers left in place', {
+      description: 'Edit the conflicting files to resolve conflicts manually.',
+      duration: 6000,
+    });
+    onOpenChange(false);
+  };
+
+  if (!worktree) return null;
+
+  // Show conflict resolution UI if there are merge conflicts
+  if (mergeConflict) {
+    return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-[520px]">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="w-5 h-5 text-orange-500" />
+              Integrate Conflicts Detected
+            </DialogTitle>
+            <DialogDescription asChild>
+              <div className="space-y-4">
+                <span className="block">
+                  There are conflicts when integrating{' '}
+                  <code className="font-mono bg-muted px-1 rounded">
+                    {mergeConflict.sourceBranch}
+                  </code>{' '}
+                  into{' '}
+                  <code className="font-mono bg-muted px-1 rounded">
+                    {mergeConflict.targetBranch}
+                  </code>
+                  .
+                </span>
+
+                {mergeConflict.conflictFiles && mergeConflict.conflictFiles.length > 0 && (
+                  <div className="space-y-1.5">
+                    <span className="text-sm font-medium text-foreground">
+                      Conflicting files ({mergeConflict.conflictFiles.length}):
+                    </span>
+                    <div className="border border-border rounded-lg overflow-hidden max-h-[200px] overflow-y-auto scrollbar-visible">
+                      {mergeConflict.conflictFiles.map((file) => (
+                        <div
+                          key={file}
+                          className="flex items-center gap-2 px-3 py-1.5 text-xs font-mono border-b border-border last:border-b-0 hover:bg-accent/30"
+                        >
+                          <XCircle className="w-3.5 h-3.5 text-red-500 flex-shrink-0" />
+                          <span className="truncate">{file}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                <div className="mt-2 p-3 rounded-md bg-muted/50 border border-border">
+                  <p className="text-sm text-muted-foreground font-medium mb-2">
+                    Choose how to resolve:
+                  </p>
+                  <ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
+                    <li>
+                      <strong>Resolve with AI</strong> &mdash; Creates a task to analyze and resolve
+                      conflicts automatically
+                    </li>
+                    <li>
+                      <strong>Resolve Manually</strong> &mdash; Leaves conflict markers in place for
+                      you to edit directly
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </DialogDescription>
+          </DialogHeader>
+
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setMergeConflict(null)}>
+              Back
+            </Button>
+            <Button variant="outline" onClick={handleResolveManually}>
+              <Wrench className="w-4 h-4 mr-2" />
+              Resolve Manually
+            </Button>
+            {onCreateConflictResolutionFeature && (
+              <Button
+                onClick={handleResolveWithAI}
+                className="bg-purple-600 hover:bg-purple-700 text-white"
+              >
+                <Sparkles className="w-4 h-4 mr-2" />
+                Resolve with AI
+              </Button>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitMerge className="w-5 h-5 text-green-600" />
+            Integrate Branch
+          </DialogTitle>
+          <DialogDescription asChild>
+            <div className="space-y-4">
+              <span className="block">
+                Integrate <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code>{' '}
+                into:
+              </span>
+
+              <div className="space-y-2">
+                <Label htmlFor="target-branch" className="text-sm text-foreground">
+                  Target Branch
+                </Label>
+                {loadingBranches ? (
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Spinner size="sm" />
+                    Loading branches...
+                  </div>
+                ) : (
+                  <BranchAutocomplete
+                    value={targetBranch}
+                    onChange={setTargetBranch}
+                    branches={availableBranches}
+                    placeholder="Select target branch..."
+                    data-testid="merge-target-branch"
+                  />
+                )}
+              </div>
+
+              {worktree.hasChanges && (
+                <div className="flex items-start gap-2 p-3 rounded-md bg-yellow-500/10 border border-yellow-500/20">
+                  <AlertTriangle className="w-4 h-4 text-yellow-500 mt-0.5 flex-shrink-0" />
+                  <span className="text-yellow-500 text-sm">
+                    This worktree has {worktree.changedFilesCount} uncommitted change(s). Please
+                    commit or discard them before integrating.
+                  </span>
+                </div>
+              )}
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex items-center space-x-2 py-2">
+          <Checkbox
+            id="delete-worktree-branch"
+            checked={deleteWorktreeAndBranch}
+            onCheckedChange={(checked) => setDeleteWorktreeAndBranch(checked === true)}
+          />
+          <Label
+            htmlFor="delete-worktree-branch"
+            className="text-sm cursor-pointer flex items-center gap-1.5"
+          >
+            <Trash2 className="w-3.5 h-3.5 text-destructive" />
+            Delete worktree and branch after integrating
+          </Label>
+        </div>
+
+        {deleteWorktreeAndBranch && (
+          <div className="flex items-start gap-2 p-3 rounded-md bg-orange-500/10 border border-orange-500/20">
+            <AlertTriangle className="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" />
+            <span className="text-orange-500 text-sm">
+              The worktree and branch will be permanently deleted. Any features assigned to this
+              branch will be unassigned.
+            </span>
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleMerge}
+            disabled={worktree.hasChanges || !targetBranch || loadingBranches || isLoading}
+            className="bg-green-600 hover:bg-green-700 text-white"
+          >
+            {isLoading ? (
+              <>
+                <Spinner size="sm" variant="foreground" className="mr-2" />
+                Integrating...
+              </>
+            ) : (
+              <>
+                <GitMerge className="w-4 h-4 mr-2" />
+                Integrate
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-settings-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-settings-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ec10487dd9715d0a569026d53171089edd9bbd93
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-settings-dialog.tsx
@@ -0,0 +1,270 @@
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Plus, Trash2, ChevronUp, ChevronDown, Pencil } from 'lucide-react';
+import { toast } from 'sonner';
+import type { PipelineConfig, PipelineStep } from '@automaker/types';
+import { cn } from '@/lib/utils';
+import { AddEditPipelineStepDialog } from './add-edit-pipeline-step-dialog';
+
+interface PipelineSettingsDialogProps {
+  open: boolean;
+  onClose: () => void;
+  projectPath: string;
+  pipelineConfig: PipelineConfig | null;
+  onSave: (config: PipelineConfig) => Promise<void>;
+}
+
+export function PipelineSettingsDialog({
+  open,
+  onClose,
+  projectPath: _projectPath,
+  pipelineConfig,
+  onSave,
+}: PipelineSettingsDialogProps) {
+  // Filter and validate steps to ensure all required properties exist
+  const validateSteps = (steps: PipelineStep[] | undefined): PipelineStep[] => {
+    if (!Array.isArray(steps)) return [];
+    return steps.filter(
+      (step): step is PipelineStep =>
+        step != null &&
+        typeof step.id === 'string' &&
+        typeof step.name === 'string' &&
+        typeof step.instructions === 'string'
+    );
+  };
+
+  const [steps, setSteps] = useState<PipelineStep[]>(() => validateSteps(pipelineConfig?.steps));
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Sub-dialog state
+  const [addEditDialogOpen, setAddEditDialogOpen] = useState(false);
+  const [editingStep, setEditingStep] = useState<PipelineStep | null>(null);
+
+  // Sync steps when dialog opens or pipelineConfig changes
+  useEffect(() => {
+    if (open) {
+      setSteps(validateSteps(pipelineConfig?.steps));
+    }
+  }, [open, pipelineConfig]);
+
+  const sortedSteps = [...steps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+
+  const handleAddStep = () => {
+    setEditingStep(null);
+    setAddEditDialogOpen(true);
+  };
+
+  const handleEditStep = (step: PipelineStep) => {
+    setEditingStep(step);
+    setAddEditDialogOpen(true);
+  };
+
+  const handleDeleteStep = (stepId: string) => {
+    const newSteps = steps.filter((s) => s.id !== stepId);
+    // Reorder remaining steps
+    newSteps.forEach((s, index) => {
+      s.order = index;
+    });
+    setSteps(newSteps);
+  };
+
+  const handleMoveStep = (stepId: string, direction: 'up' | 'down') => {
+    const stepIndex = sortedSteps.findIndex((s) => s.id === stepId);
+    if (
+      (direction === 'up' && stepIndex === 0) ||
+      (direction === 'down' && stepIndex === sortedSteps.length - 1)
+    ) {
+      return;
+    }
+
+    const newSteps = [...sortedSteps];
+    const targetIndex = direction === 'up' ? stepIndex - 1 : stepIndex + 1;
+
+    // Swap orders
+    const temp = newSteps[stepIndex].order;
+    newSteps[stepIndex].order = newSteps[targetIndex].order;
+    newSteps[targetIndex].order = temp;
+
+    setSteps(newSteps);
+  };
+
+  const handleSaveStep = (
+    stepData: Omit<PipelineStep, 'id' | 'createdAt' | 'updatedAt'> & { id?: string }
+  ) => {
+    const now = new Date().toISOString();
+
+    if (stepData.id) {
+      // Update existing step
+      setSteps((prev) =>
+        prev.map((s) =>
+          s.id === stepData.id
+            ? {
+                ...s,
+                name: stepData.name,
+                instructions: stepData.instructions,
+                colorClass: stepData.colorClass,
+                updatedAt: now,
+              }
+            : s
+        )
+      );
+    } else {
+      // Add new step
+      const newStep: PipelineStep = {
+        id: `step_${Date.now().toString(36)}_${Math.random().toString(36).substring(2, 8)}`,
+        name: stepData.name,
+        instructions: stepData.instructions,
+        colorClass: stepData.colorClass,
+        order: steps.length,
+        createdAt: now,
+        updatedAt: now,
+      };
+      setSteps((prev) => [...prev, newStep]);
+    }
+  };
+
+  const handleSaveConfig = async () => {
+    setIsSubmitting(true);
+    try {
+      const sortedEffectiveSteps = [...steps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+      const config: PipelineConfig = {
+        version: 1,
+        steps: sortedEffectiveSteps.map((s, index) => ({ ...s, order: index })),
+      };
+      await onSave(config);
+      toast.success('Pipeline configuration saved');
+      onClose();
+    } catch {
+      toast.error('Failed to save pipeline configuration');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+        <DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
+          <DialogHeader>
+            <DialogTitle>Pipeline Settings</DialogTitle>
+            <DialogDescription>
+              Configure custom pipeline steps that run after a feature completes "In Progress". Each
+              step will automatically prompt the agent with its instructions.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex-1 overflow-y-auto py-4 space-y-4">
+            {/* Steps List */}
+            {sortedSteps.length > 0 ? (
+              <div className="space-y-2">
+                {sortedSteps.map((step, index) => (
+                  <div
+                    key={step.id}
+                    className="flex items-center gap-2 p-3 border rounded-lg bg-muted/30"
+                  >
+                    <div className="flex flex-col gap-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-5 w-5"
+                        onClick={() => handleMoveStep(step.id, 'up')}
+                        disabled={index === 0}
+                      >
+                        <ChevronUp className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-5 w-5"
+                        onClick={() => handleMoveStep(step.id, 'down')}
+                        disabled={index === sortedSteps.length - 1}
+                      >
+                        <ChevronDown className="h-3 w-3" />
+                      </Button>
+                    </div>
+
+                    <div
+                      className={cn(
+                        'w-3 h-8 rounded',
+                        (step.colorClass || 'bg-blue-500/20').replace('/20', '')
+                      )}
+                    />
+
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">{step.name || 'Unnamed Step'}</div>
+                      <div className="text-xs text-muted-foreground truncate">
+                        {(step.instructions || '').substring(0, 100)}
+                        {(step.instructions || '').length > 100 ? '...' : ''}
+                      </div>
+                    </div>
+
+                    <div className="flex items-center gap-1">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7"
+                        onClick={() => handleEditStep(step)}
+                      >
+                        <Pencil className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-destructive hover:text-destructive"
+                        onClick={() => handleDeleteStep(step.id)}
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8 text-muted-foreground">
+                <p>No pipeline steps configured.</p>
+                <p className="text-sm">
+                  Add steps to create a custom workflow after features complete.
+                </p>
+              </div>
+            )}
+
+            {/* Add Step Button */}
+            <Button variant="outline" className="w-full" onClick={handleAddStep}>
+              <Plus className="h-4 w-4 mr-2" />
+              Add Pipeline Step
+            </Button>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button onClick={handleSaveConfig} disabled={isSubmitting}>
+              {isSubmitting ? 'Saving...' : 'Save Pipeline'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Sub-dialog for adding/editing steps */}
+      <AddEditPipelineStepDialog
+        open={addEditDialogOpen}
+        onClose={() => {
+          setAddEditDialogOpen(false);
+          setEditingStep(null);
+        }}
+        onSave={handleSaveStep}
+        existingStep={editingStep}
+        defaultOrder={steps.length}
+      />
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/code-review.ts b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/code-review.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d4ab14b136278110e44f7e05008d0d2d7471cff2
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/code-review.ts
@@ -0,0 +1,94 @@
+export const codeReviewTemplate = {
+  id: 'code-review',
+  name: 'Code Review',
+  colorClass: 'bg-blue-500/20',
+  instructions: `## Code Review & Update
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODE ⚠️
+
+**THIS IS NOT OPTIONAL. AFTER REVIEWING, YOU MUST MODIFY THE CODE WITH YOUR FINDINGS.**
+
+This step has TWO mandatory phases:
+1. **REVIEW** the code (identify issues)
+2. **UPDATE** the code (fix the issues you found)
+
+**You cannot complete this step by only reviewing. You MUST make code changes based on your review findings.**
+
+---
+
+### Phase 1: Review Phase
+Perform a thorough code review of the changes made in this feature. Focus on:
+
+#### Code Quality
+- **Readability**: Is the code easy to understand? Are variable/function names descriptive?
+- **Maintainability**: Will this code be easy to modify in the future?
+- **DRY Principle**: Is there any duplicated code that should be abstracted?
+- **Single Responsibility**: Do functions and classes have a single, clear purpose?
+
+#### Best Practices
+- Follow established patterns and conventions used in the codebase
+- Ensure proper error handling is in place
+- Check for appropriate logging where needed
+- Verify that magic numbers/strings are replaced with named constants
+
+#### Performance
+- Identify any potential performance bottlenecks
+- Check for unnecessary re-renders (React) or redundant computations
+- Ensure efficient data structures are used
+
+#### Testing
+- Verify that new code has appropriate test coverage
+- Check that edge cases are handled
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW MODIFY THE CODE BASED ON YOUR REVIEW FINDINGS.**
+
+**This is not optional. Every issue you identify must be addressed with code changes.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Fix Issues Immediately**: For every issue you found during review:
+   - ✅ Refactor code for better readability
+   - ✅ Extract duplicated code into reusable functions
+   - ✅ Improve variable/function names for clarity
+   - ✅ Add missing error handling
+   - ✅ Replace magic numbers/strings with named constants
+   - ✅ Optimize performance bottlenecks
+   - ✅ Fix any code quality issues you identify
+   - ✅ **MAKE THE ACTUAL CODE CHANGES - DO NOT JUST DOCUMENT THEM**
+
+2. **Apply All Improvements**: Don't just identify problems - fix them in code:
+   - ✅ Improve code structure and organization
+   - ✅ Enhance error handling and logging
+   - ✅ Optimize performance where possible
+   - ✅ Ensure consistency with codebase patterns
+   - ✅ Add or improve comments where needed
+   - ✅ **MODIFY THE FILES DIRECTLY WITH YOUR IMPROVEMENTS**
+
+3. **For Complex Issues**: If you encounter issues that require significant refactoring:
+   - ✅ Make the improvements you can make safely
+   - ✅ Document remaining issues with clear explanations
+   - ✅ Provide specific suggestions for future improvements
+   - ✅ **STILL MAKE AS MANY CODE CHANGES AS POSSIBLE**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A summary of issues found during review
+- **A detailed list of ALL code changes and improvements made (this proves you updated the code)**
+- Any remaining issues that need attention (if applicable)
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Reviewing without updating is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST modify the code files directly with your improvements.**
+**You MUST show evidence of code changes in your summary.**
+**This step is only complete when code has been updated.**`,
+};
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/commit.ts b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/commit.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8908706e298f2bcfe8ea8d812cde3089a71d7ef7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/commit.ts
@@ -0,0 +1,150 @@
+export const commitTemplate = {
+  id: 'commit',
+  name: 'Commit Changes',
+  colorClass: 'bg-purple-500/20',
+  instructions: `## Commit Changes Step
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST COMMIT ALL CHANGES USING CONVENTIONAL COMMIT FORMAT ⚠️
+
+**THIS IS NOT OPTIONAL. YOU MUST CREATE AND EXECUTE A GIT COMMIT WITH ALL CHANGES.**
+
+This step requires you to:
+1. **REVIEW** all changes made in this feature
+2. **CREATE** a conventional commit message
+3. **EXECUTE** the git commit command
+
+**You cannot complete this step by only reviewing changes. You MUST execute the git commit command.**
+
+---
+
+### Phase 1: Review Phase
+Review all changes made in this feature:
+
+- Review all modified files using \`git status\` and \`git diff\`
+- Identify the scope and nature of changes
+- Determine the appropriate conventional commit type
+- Identify any breaking changes that need to be documented
+
+---
+
+### Phase 2: Commit Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW CREATE AND EXECUTE A GIT COMMIT WITH ALL CHANGES.**
+
+**This is not optional. You must stage all changes and commit them using conventional commit format.**
+
+#### Conventional Commit Format
+
+Follow this format for your commit message:
+
+\`\`\`
+<type>(<scope>): <subject>
+
+<body>
+
+<footer>
+\`\`\`
+
+#### Commit Types (choose the most appropriate):
+
+- **feat**: A new feature
+- **fix**: A bug fix
+- **docs**: Documentation only changes
+- **style**: Code style changes (formatting, missing semicolons, etc.)
+- **refactor**: Code refactoring without changing functionality
+- **perf**: Performance improvements
+- **test**: Adding or updating tests
+- **chore**: Changes to build process, dependencies, or tooling
+- **ci**: Changes to CI configuration
+- **build**: Changes to build system or dependencies
+
+#### Scope (optional but recommended):
+- Component/module name (e.g., \`ui\`, \`server\`, \`auth\`)
+- Feature area (e.g., \`board\`, \`pipeline\`, \`agent\`)
+- Package name (e.g., \`@automaker/types\`)
+
+#### Subject:
+- Use imperative mood: "add" not "added" or "adds"
+- First letter lowercase
+- No period at the end
+- Maximum 72 characters
+
+#### Body (optional but recommended for significant changes):
+- Explain the "what" and "why" of the change
+- Reference related issues or PRs
+- Separate from subject with blank line
+- Wrap at 72 characters
+
+#### Footer (optional):
+- Breaking changes: \`BREAKING CHANGE: <description>\`
+- Issue references: \`Closes #123\`, \`Fixes #456\`
+
+#### Action Steps (You MUST complete these):
+
+1. **Stage All Changes** - PREPARE FOR COMMIT:
+   - ✅ Run \`git add .\` or \`git add -A\` to stage all changes
+   - ✅ Verify staged changes with \`git status\`
+   - ✅ Ensure all relevant changes are staged
+
+2. **Create Commit Message** - FOLLOW CONVENTIONAL COMMIT FORMAT:
+   - ✅ Determine the appropriate commit type based on changes
+   - ✅ Identify the scope (component/module/feature)
+   - ✅ Write a clear, imperative subject line
+   - ✅ Add a body explaining the changes (if significant)
+   - ✅ Include breaking changes in footer if applicable
+   - ✅ Reference related issues if applicable
+
+3. **Execute Commit** - COMMIT THE CHANGES:
+   - ✅ Run \`git commit -m "<type>(<scope>): <subject>" -m "<body>"\` or use a multi-line commit message
+   - ✅ Verify the commit was created with \`git log -1\`
+   - ✅ **EXECUTE THE ACTUAL GIT COMMIT COMMAND**
+
+#### Example Commit Messages:
+
+\`\`\`
+feat(ui): add pipeline step commit template
+
+Add a new pipeline step template for committing changes using
+conventional commit format. This ensures all commits follow
+a consistent pattern for better changelog generation.
+
+Closes #123
+\`\`\`
+
+\`\`\`
+fix(server): resolve agent session timeout issue
+
+The agent session was timing out prematurely due to incorrect
+WebSocket heartbeat configuration. Updated heartbeat interval
+to match server expectations.
+
+Fixes #456
+\`\`\`
+
+\`\`\`
+refactor(pipeline): extract step template logic
+
+Extract step template loading and validation into separate
+utility functions to improve code organization and testability.
+\`\`\`
+
+---
+
+### Summary Required
+After completing BOTH review AND commit phases, provide:
+- A summary of all changes that were committed
+- **The exact commit message that was used (this proves you executed the commit)**
+- The commit hash (if available)
+- Any notes about the commit (breaking changes, related issues, etc.)
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Reviewing changes without committing is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST stage all changes and execute a git commit command.**
+**You MUST use conventional commit format for the commit message.**
+**You MUST show evidence of the commit execution in your summary.**
+**This step is only complete when changes have been committed to git.**`,
+};
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/documentation.ts b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/documentation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..79fd48a66b8724ac096b0702b747e476ab1a708a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/documentation.ts
@@ -0,0 +1,77 @@
+export const documentationTemplate = {
+  id: 'documentation',
+  name: 'Documentation',
+  colorClass: 'bg-amber-500/20',
+  instructions: `## Documentation Step
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODE WITH DOCUMENTATION ⚠️
+
+**THIS IS NOT OPTIONAL. YOU MUST ADD/UPDATE DOCUMENTATION IN THE CODEBASE.**
+
+This step requires you to:
+1. **REVIEW** what needs documentation
+2. **UPDATE** the code by adding/updating documentation files and code comments
+
+**You cannot complete this step by only identifying what needs documentation. You MUST add the documentation directly to the codebase.**
+
+---
+
+### Phase 1: Review Phase
+Identify what documentation is needed:
+
+- Review new functions, classes, and modules
+- Identify new or modified API endpoints
+- Check for missing README updates
+- Identify changelog entries needed
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW ADD/UPDATE DOCUMENTATION IN THE CODEBASE.**
+
+**This is not optional. You must modify files to add documentation.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Code Documentation** - UPDATE THE CODE FILES:
+   - ✅ Add/update JSDoc or docstrings for new functions and classes
+   - ✅ Document complex algorithms or business logic
+   - ✅ Add inline comments for non-obvious code
+   - ✅ **MODIFY THE SOURCE FILES DIRECTLY WITH DOCUMENTATION**
+
+2. **API Documentation** - UPDATE API DOCUMENTATION FILES:
+   - ✅ Document any new or modified API endpoints
+   - ✅ Include request/response examples
+   - ✅ Document error responses
+   - ✅ **UPDATE THE API DOCUMENTATION FILES DIRECTLY**
+
+3. **README Updates** - UPDATE THE README FILE:
+   - ✅ Update README if new setup steps are required
+   - ✅ Document any new environment variables
+   - ✅ Update architecture diagrams if applicable
+   - ✅ **MODIFY THE README FILE DIRECTLY**
+
+4. **Changelog** - UPDATE THE CHANGELOG FILE:
+   - ✅ Document notable changes for the changelog
+   - ✅ Include breaking changes if any
+   - ✅ **UPDATE THE CHANGELOG FILE DIRECTLY**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A summary of documentation needs identified
+- **A detailed list of ALL documentation files and code comments added/updated (this proves you updated the code)**
+- Specific files modified with documentation
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Identifying documentation needs without adding documentation is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST modify the code files directly to add documentation.**
+**You MUST show evidence of documentation changes in your summary.**
+**This step is only complete when documentation has been added to the codebase.**`,
+};
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/index.ts b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e7b23fd3a27d018b014b1f11cdf664cb319c7676
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/index.ts
@@ -0,0 +1,30 @@
+import { codeReviewTemplate } from './code-review';
+import { securityReviewTemplate } from './security-review';
+import { uxReviewTemplate } from './ux-review';
+import { testingTemplate } from './testing';
+import { documentationTemplate } from './documentation';
+import { optimizationTemplate } from './optimization';
+import { commitTemplate } from './commit';
+
+export interface PipelineStepTemplate {
+  id: string;
+  name: string;
+  colorClass: string;
+  instructions: string;
+}
+
+export const STEP_TEMPLATES: PipelineStepTemplate[] = [
+  codeReviewTemplate,
+  securityReviewTemplate,
+  uxReviewTemplate,
+  testingTemplate,
+  documentationTemplate,
+  optimizationTemplate,
+  commitTemplate,
+];
+
+// Helper to get template color class
+export const getTemplateColorClass = (templateId: string): string => {
+  const template = STEP_TEMPLATES.find((t) => t.id === templateId);
+  return template?.colorClass || 'bg-blue-500/20';
+};
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/optimization.ts b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/optimization.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a0aa45f8bac2fe689419aea6f595f50ccc0dd79e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/optimization.ts
@@ -0,0 +1,103 @@
+export const optimizationTemplate = {
+  id: 'optimization',
+  name: 'Performance',
+  colorClass: 'bg-cyan-500/20',
+  instructions: `## Performance Optimization Step
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODE WITH OPTIMIZATIONS ⚠️
+
+**THIS IS NOT OPTIONAL. AFTER IDENTIFYING OPTIMIZATION OPPORTUNITIES, YOU MUST UPDATE THE CODE.**
+
+This step has TWO mandatory phases:
+1. **REVIEW** the code for performance issues (identify bottlenecks)
+2. **UPDATE** the code with optimizations (fix the performance issues)
+
+**You cannot complete this step by only identifying performance issues. You MUST modify the code to optimize it.**
+
+---
+
+### Phase 1: Review Phase
+Identify performance bottlenecks and optimization opportunities:
+
+#### Code Performance
+- Identify slow algorithms (O(n²) → O(n log n), etc.)
+- Find unnecessary computations or redundant operations
+- Identify inefficient loops and iterations
+- Check for inappropriate data structures
+
+#### Memory Usage
+- Check for memory leaks
+- Identify memory-intensive operations
+- Check for proper cleanup of resources
+
+#### Database/API
+- Identify slow database queries (N+1 queries, missing indexes)
+- Find opportunities for caching
+- Identify API calls that could be batched
+
+#### Frontend (if applicable)
+- Identify bundle size issues
+- Find render performance problems
+- Identify opportunities for lazy loading
+- Find expensive computations that need memoization
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW MODIFY THE CODE TO APPLY OPTIMIZATIONS.**
+
+**This is not optional. Every performance issue you identify must be addressed with code changes.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Optimize Code Performance** - UPDATE THE CODE:
+   - ✅ Optimize slow algorithms (O(n²) → O(n log n), etc.)
+   - ✅ Remove unnecessary computations or redundant operations
+   - ✅ Optimize loops and iterations
+   - ✅ Use appropriate data structures
+   - ✅ **MODIFY THE SOURCE FILES DIRECTLY WITH OPTIMIZATIONS**
+
+2. **Fix Memory Issues** - UPDATE THE CODE:
+   - ✅ Fix memory leaks
+   - ✅ Optimize memory-intensive operations
+   - ✅ Ensure proper cleanup of resources
+   - ✅ **MAKE THE ACTUAL CODE CHANGES**
+
+3. **Optimize Database/API** - UPDATE THE CODE:
+   - ✅ Optimize database queries (add indexes, reduce N+1 queries)
+   - ✅ Implement caching where appropriate
+   - ✅ Batch API calls when possible
+   - ✅ **MODIFY THE DATABASE/API CODE DIRECTLY**
+
+4. **Optimize Frontend** (if applicable) - UPDATE THE CODE:
+   - ✅ Minimize bundle size
+   - ✅ Optimize render performance
+   - ✅ Implement lazy loading where appropriate
+   - ✅ Use memoization for expensive computations
+   - ✅ **MODIFY THE FRONTEND CODE DIRECTLY**
+
+5. **Profile and Measure**:
+   - ✅ Profile the code to verify bottlenecks are fixed
+   - ✅ Measure improvements achieved
+   - ✅ **DOCUMENT THE PERFORMANCE IMPROVEMENTS**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A summary of performance issues identified
+- **A detailed list of ALL optimizations applied to the code (this proves you updated the code)**
+- Performance improvements achieved (with metrics if possible)
+- Any remaining optimization opportunities
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Identifying performance issues without optimizing the code is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST modify the code files directly with optimizations.**
+**You MUST show evidence of optimization changes in your summary.**
+**This step is only complete when code has been optimized.**`,
+};
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/security-review.ts b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/security-review.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d38045f2d7d4c2176d1de70aa7d7369659add5c1
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/security-review.ts
@@ -0,0 +1,114 @@
+export const securityReviewTemplate = {
+  id: 'security-review',
+  name: 'Security Review',
+  colorClass: 'bg-red-500/20',
+  instructions: `## Security Review & Update
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODE TO FIX SECURITY ISSUES ⚠️
+
+**THIS IS NOT OPTIONAL. AFTER REVIEWING FOR SECURITY ISSUES, YOU MUST FIX THEM IN THE CODE.**
+
+This step has TWO mandatory phases:
+1. **REVIEW** the code for security vulnerabilities (identify issues)
+2. **UPDATE** the code to fix vulnerabilities (secure the code)
+
+**You cannot complete this step by only identifying security issues. You MUST modify the code to fix them.**
+
+**Security vulnerabilities left unfixed are unacceptable. You must address them with code changes.**
+
+---
+
+### Phase 1: Review Phase
+Perform a comprehensive security audit of the changes made in this feature. Check for vulnerabilities in the following areas:
+
+#### Input Validation & Sanitization
+- Verify all user inputs are properly validated and sanitized
+- Check for SQL injection vulnerabilities
+- Check for XSS (Cross-Site Scripting) vulnerabilities
+- Ensure proper encoding of output data
+
+#### Authentication & Authorization
+- Verify authentication checks are in place where needed
+- Ensure authorization logic correctly restricts access
+- Check for privilege escalation vulnerabilities
+- Verify session management is secure
+
+#### Data Protection
+- Ensure sensitive data is not logged or exposed
+- Check that secrets/credentials are not hardcoded
+- Verify proper encryption is used for sensitive data
+- Check for secure transmission of data (HTTPS, etc.)
+
+#### Common Vulnerabilities (OWASP Top 10)
+- Injection flaws
+- Broken authentication
+- Sensitive data exposure
+- XML External Entities (XXE)
+- Broken access control
+- Security misconfiguration
+- Cross-Site Scripting (XSS)
+- Insecure deserialization
+- Using components with known vulnerabilities
+- Insufficient logging & monitoring
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW MODIFY THE CODE TO FIX ALL SECURITY VULNERABILITIES.**
+
+**This is not optional. Every security issue you identify must be fixed with code changes.**
+
+**Security vulnerabilities cannot be left unfixed. You must address them immediately.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Fix Vulnerabilities Immediately** - UPDATE THE CODE:
+   - ✅ Add input validation and sanitization where missing
+   - ✅ Fix SQL injection vulnerabilities by using parameterized queries
+   - ✅ Fix XSS vulnerabilities by properly encoding output
+   - ✅ Add authentication/authorization checks where needed
+   - ✅ Remove hardcoded secrets and credentials
+   - ✅ Implement proper encryption for sensitive data
+   - ✅ Fix broken access control
+   - ✅ Add security headers and configurations
+   - ✅ Fix any other security vulnerabilities you find
+   - ✅ **MODIFY THE SOURCE FILES DIRECTLY TO FIX SECURITY ISSUES**
+
+2. **Apply Security Best Practices** - UPDATE THE CODE:
+   - ✅ Implement proper input validation on all user inputs
+   - ✅ Ensure all outputs are properly encoded
+   - ✅ Add authentication checks to protected routes/endpoints
+   - ✅ Implement proper authorization logic
+   - ✅ Remove or secure any exposed sensitive data
+   - ✅ Add security logging and monitoring
+   - ✅ Update dependencies with known vulnerabilities
+   - ✅ **MAKE THE ACTUAL CODE CHANGES - DO NOT JUST DOCUMENT THEM**
+
+3. **For Complex Security Issues** - UPDATE THE CODE:
+   - ✅ Fix what you can fix safely
+   - ✅ Document critical security issues with severity levels
+   - ✅ Provide specific remediation steps for complex issues
+   - ✅ Add security-related comments explaining protections in place
+   - ✅ **STILL MAKE AS MANY SECURITY FIXES AS POSSIBLE**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A security assessment summary of vulnerabilities found
+- **A detailed list of ALL security fixes applied to the code (this proves you updated the code)**
+- Any remaining security concerns that need attention (if applicable)
+- Severity levels for any unfixed issues
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Reviewing security without fixing vulnerabilities is INCOMPLETE, UNACCEPTABLE, and DANGEROUS.**
+
+**You MUST modify the code files directly to fix security issues.**
+**You MUST show evidence of security fixes in your summary.**
+**This step is only complete when security vulnerabilities have been fixed in the code.**
+**Security issues cannot be left as documentation - they must be fixed.**`,
+};
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/testing.ts b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/testing.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c1d3967c348419a6eacef6ad0826fde7cd147433
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/testing.ts
@@ -0,0 +1,81 @@
+export const testingTemplate = {
+  id: 'testing',
+  name: 'Testing',
+  colorClass: 'bg-green-500/20',
+  instructions: `## Testing Step
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODEBASE WITH TESTS ⚠️
+
+**THIS IS NOT OPTIONAL. YOU MUST WRITE AND ADD TESTS TO THE CODEBASE.**
+
+This step requires you to:
+1. **REVIEW** what needs testing
+2. **UPDATE** the codebase by writing and adding test files
+
+**You cannot complete this step by only identifying what needs testing. You MUST create test files and write tests.**
+
+---
+
+### Phase 1: Review Phase
+Identify what needs test coverage:
+
+- Review new functions, methods, and classes
+- Identify new API endpoints
+- Check for edge cases that need testing
+- Identify integration points that need testing
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW WRITE AND ADD TESTS TO THE CODEBASE.**
+
+**This is not optional. You must create test files and write actual test code.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Write Unit Tests** - CREATE TEST FILES:
+   - ✅ Write unit tests for all new functions and methods
+   - ✅ Ensure edge cases are covered
+   - ✅ Test error handling paths
+   - ✅ Aim for high code coverage on new code
+   - ✅ **CREATE TEST FILES AND WRITE THE ACTUAL TEST CODE**
+
+2. **Write Integration Tests** - CREATE TEST FILES:
+   - ✅ Test interactions between components/modules
+   - ✅ Verify API endpoints work correctly
+   - ✅ Test database operations if applicable
+   - ✅ **CREATE INTEGRATION TEST FILES AND WRITE THE ACTUAL TEST CODE**
+
+3. **Ensure Test Quality** - WRITE QUALITY TESTS:
+   - ✅ Tests should be readable and well-documented
+   - ✅ Each test should have a clear purpose
+   - ✅ Use descriptive test names that explain the scenario
+   - ✅ Follow the Arrange-Act-Assert pattern
+   - ✅ **WRITE COMPLETE, FUNCTIONAL TESTS**
+
+4. **Run Tests** - VERIFY TESTS WORK:
+   - ✅ Run the full test suite and ensure all new tests pass
+   - ✅ Verify no existing tests are broken
+   - ✅ Check that test coverage meets project standards
+   - ✅ **FIX ANY FAILING TESTS**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A summary of testing needs identified
+- **A detailed list of ALL test files created and tests written (this proves you updated the codebase)**
+- Test coverage metrics achieved
+- Any issues found during testing and how they were resolved
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Identifying what needs testing without writing tests is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST create test files and write actual test code.**
+**You MUST show evidence of test files created in your summary.**
+**This step is only complete when tests have been written and added to the codebase.**`,
+};
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/ux-review.ts b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/ux-review.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a57f7fd701220823dfd91e458b32cc8ab8e41816
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/pipeline-step-templates/ux-review.ts
@@ -0,0 +1,116 @@
+export const uxReviewTemplate = {
+  id: 'ux-reviewer',
+  name: 'User Experience',
+  colorClass: 'bg-purple-500/20',
+  instructions: `## User Experience Review & Update
+
+# ⚠️ CRITICAL REQUIREMENT: YOU MUST UPDATE THE CODE TO IMPROVE UX ⚠️
+
+**THIS IS NOT OPTIONAL. AFTER REVIEWING THE USER EXPERIENCE, YOU MUST UPDATE THE CODE.**
+
+This step has TWO mandatory phases:
+1. **REVIEW** the user experience (identify UX issues)
+2. **UPDATE** the code to improve UX (fix the issues you found)
+
+**You cannot complete this step by only reviewing UX. You MUST modify the code to improve the user experience.**
+
+---
+
+### Phase 1: Review Phase
+Review the changes made in this feature from a user experience and design perspective. Focus on creating an exceptional user experience.
+
+#### User-Centered Design
+- **User Goals**: Does this feature solve a real user problem?
+- **Clarity**: Is the interface clear and easy to understand?
+- **Simplicity**: Can the feature be simplified without losing functionality?
+- **Consistency**: Does it follow existing design patterns and conventions?
+
+#### Visual Design & Hierarchy
+- **Layout**: Is the visual hierarchy clear? Does important information stand out?
+- **Spacing**: Is there appropriate whitespace and grouping?
+- **Typography**: Is text readable with proper sizing and contrast?
+- **Color**: Does color usage support functionality and meet accessibility standards?
+
+#### Accessibility (WCAG 2.1)
+- **Keyboard Navigation**: Can all functionality be accessed via keyboard?
+- **Screen Readers**: Are ARIA labels and semantic HTML used appropriately?
+- **Color Contrast**: Does text meet WCAG AA standards (4.5:1 for body, 3:1 for large)?
+- **Focus Indicators**: Are focus states visible and clear?
+- **Touch Targets**: Are interactive elements at least 44x44px on mobile?
+
+#### Responsive Design
+- **Mobile Experience**: Does it work well on small screens?
+- **Touch Targets**: Are buttons and links easy to tap?
+- **Content Adaptation**: Does content adapt appropriately to different screen sizes?
+- **Navigation**: Is navigation accessible and intuitive on mobile?
+
+#### User Feedback & States
+- **Loading States**: Are loading indicators shown for async operations?
+- **Error States**: Are error messages clear and actionable?
+- **Empty States**: Do empty states guide users on what to do next?
+- **Success States**: Are successful actions clearly confirmed?
+
+#### Performance & Perceived Performance
+- **Loading Speed**: Does the feature load quickly?
+- **Skeleton Screens**: Are skeleton screens used for better perceived performance?
+- **Optimistic Updates**: Can optimistic UI updates improve perceived speed?
+- **Micro-interactions**: Do animations and transitions enhance the experience?
+
+---
+
+### Phase 2: Update Phase - ⚠️ MANDATORY ACTION REQUIRED ⚠️
+
+**YOU MUST NOW MODIFY THE CODE TO IMPROVE THE USER EXPERIENCE.**
+
+**This is not optional. Every UX issue you identify must be addressed with code changes.**
+
+#### Action Steps (You MUST complete these):
+
+1. **Fix UX Issues Immediately** - UPDATE THE CODE:
+   - ✅ Improve visual hierarchy and layout
+   - ✅ Fix spacing and typography issues
+   - ✅ Add missing ARIA labels and semantic HTML
+   - ✅ Fix color contrast issues
+   - ✅ Add or improve focus indicators
+   - ✅ Ensure touch targets meet size requirements
+   - ✅ Add missing loading, error, empty, and success states
+   - ✅ Improve responsive design for mobile
+   - ✅ Add keyboard navigation support
+   - ✅ Fix any accessibility issues
+   - ✅ **MODIFY THE UI COMPONENT FILES DIRECTLY WITH UX IMPROVEMENTS**
+
+2. **Apply UX Improvements** - UPDATE THE CODE:
+   - ✅ Refactor components for better clarity and simplicity
+   - ✅ Improve visual design and spacing
+   - ✅ Enhance accessibility features
+   - ✅ Add user feedback mechanisms (loading, error, success states)
+   - ✅ Optimize for mobile and responsive design
+   - ✅ Improve micro-interactions and animations
+   - ✅ Ensure consistency with design system
+   - ✅ **MAKE THE ACTUAL CODE CHANGES - DO NOT JUST DOCUMENT THEM**
+
+3. **For Complex UX Issues** - UPDATE THE CODE:
+   - ✅ Make the improvements you can make safely
+   - ✅ Document UX considerations and recommendations
+   - ✅ Provide specific suggestions for major UX improvements
+   - ✅ **STILL MAKE AS MANY UX IMPROVEMENTS AS POSSIBLE**
+
+---
+
+### Summary Required
+After completing BOTH review AND update phases, provide:
+- A summary of UX issues found during review
+- **A detailed list of ALL UX improvements made to the code (this proves you updated the code)**
+- Any remaining UX considerations that need attention (if applicable)
+- Recommendations for future UX enhancements
+
+---
+
+# ⚠️ FINAL REMINDER ⚠️
+
+**Reviewing UX without updating the code is INCOMPLETE and UNACCEPTABLE.**
+
+**You MUST modify the UI component files directly with UX improvements.**
+**You MUST show evidence of UX code changes in your summary.**
+**This step is only complete when code has been updated to improve the user experience.**`,
+};
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/plan-approval-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/plan-approval-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bbbafdd716c91a2dba38152ca0448e0d70e09124
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/plan-approval-dialog.tsx
@@ -0,0 +1,247 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { PlanContentViewer } from './plan-content-viewer';
+import { Label } from '@/components/ui/label';
+import { Feature } from '@/store/app-store';
+import { Check, RefreshCw, Edit2, Eye } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+
+interface PlanApprovalDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  feature: Feature | null;
+  planContent: string;
+  onApprove: (editedPlan?: string) => void;
+  onReject: (feedback?: string) => void;
+  isLoading?: boolean;
+  viewOnly?: boolean;
+}
+
+export function PlanApprovalDialog({
+  open,
+  onOpenChange,
+  feature,
+  planContent,
+  onApprove,
+  onReject,
+  isLoading = false,
+  viewOnly = false,
+}: PlanApprovalDialogProps) {
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editedPlan, setEditedPlan] = useState(planContent);
+  const [showRejectFeedback, setShowRejectFeedback] = useState(false);
+  const [rejectFeedback, setRejectFeedback] = useState('');
+  const [showFullDescription, setShowFullDescription] = useState(false);
+
+  const DESCRIPTION_LIMIT = 250;
+  const TITLE_LIMIT = 50;
+
+  // Reset state when dialog opens or plan content changes
+  useEffect(() => {
+    if (open) {
+      setEditedPlan(planContent);
+      setIsEditMode(false);
+      setShowRejectFeedback(false);
+      setRejectFeedback('');
+      setShowFullDescription(false);
+    }
+  }, [open, planContent]);
+
+  const handleApprove = () => {
+    // Only pass edited plan if it was modified
+    const wasEdited = editedPlan !== planContent;
+    onApprove(wasEdited ? editedPlan : undefined);
+  };
+
+  const handleReject = () => {
+    if (showRejectFeedback) {
+      onReject(rejectFeedback.trim() || undefined);
+    } else {
+      setShowRejectFeedback(true);
+    }
+  };
+
+  const handleCancelReject = () => {
+    setShowRejectFeedback(false);
+    setRejectFeedback('');
+  };
+
+  const handleClose = (open: boolean) => {
+    if (!open && !isLoading) {
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent
+        className="w-full h-full max-w-full max-h-full sm:w-[90vw] sm:max-w-[900px] sm:max-h-[85dvh] sm:h-auto sm:rounded-xl rounded-none flex flex-col dialog-fullscreen-mobile"
+        data-testid="plan-approval-dialog"
+      >
+        <DialogHeader>
+          <DialogTitle>
+            {viewOnly ? 'View Plan' : 'Review Plan'}
+            {feature?.title && feature.title.length <= TITLE_LIMIT && (
+              <span className="font-normal text-muted-foreground"> - {feature.title}</span>
+            )}
+          </DialogTitle>
+          <DialogDescription>
+            {viewOnly
+              ? 'View the generated plan for this feature.'
+              : 'Review the generated plan before implementation begins.'}
+            {feature && (
+              <span className="block mt-2 text-primary">
+                Feature:{' '}
+                {showFullDescription || feature.description.length <= DESCRIPTION_LIMIT
+                  ? feature.description
+                  : `${feature.description.slice(0, DESCRIPTION_LIMIT)}...`}
+                {feature.description.length > DESCRIPTION_LIMIT && (
+                  <button
+                    type="button"
+                    onClick={() => setShowFullDescription(!showFullDescription)}
+                    className="ml-1 text-muted-foreground hover:text-foreground underline text-sm"
+                  >
+                    {showFullDescription ? 'show less' : 'show more'}
+                  </button>
+                )}
+              </span>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-hidden flex flex-col min-h-0">
+          {/* Mode Toggle - Only show when not in viewOnly mode */}
+          {!viewOnly && (
+            <div className="flex items-center justify-between mb-3">
+              <Label className="text-sm text-muted-foreground">
+                {isEditMode ? 'Edit Mode' : 'View Mode'}
+              </Label>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setIsEditMode(!isEditMode)}
+                disabled={isLoading}
+              >
+                {isEditMode ? (
+                  <>
+                    <Eye className="w-4 h-4 mr-2" />
+                    View
+                  </>
+                ) : (
+                  <>
+                    <Edit2 className="w-4 h-4 mr-2" />
+                    Edit
+                  </>
+                )}
+              </Button>
+            </div>
+          )}
+
+          {/* Plan Content */}
+          <div className="flex-1 overflow-y-auto sm:max-h-[60vh] border border-border rounded-lg">
+            {isEditMode && !viewOnly ? (
+              <Textarea
+                value={editedPlan}
+                onChange={(e) => setEditedPlan(e.target.value)}
+                className="min-h-[200px] sm:min-h-[400px] h-full w-full border-0 rounded-lg resize-none font-mono text-sm"
+                placeholder="Enter plan content..."
+                disabled={isLoading}
+              />
+            ) : (
+              <PlanContentViewer content={editedPlan || ''} className="p-4" />
+            )}
+          </div>
+
+          {/* Revision Feedback Section - Only show when not in viewOnly mode */}
+          {showRejectFeedback && !viewOnly && (
+            <div className="mt-4 space-y-2">
+              <Label htmlFor="reject-feedback">What changes would you like?</Label>
+              <Textarea
+                id="reject-feedback"
+                value={rejectFeedback}
+                onChange={(e) => setRejectFeedback(e.target.value)}
+                placeholder="Describe the changes you'd like to see in the plan..."
+                className="min-h-[80px]"
+                disabled={isLoading}
+              />
+              <p className="text-xs text-muted-foreground">
+                Leave empty to cancel the feature, or provide feedback to regenerate the plan.
+              </p>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="flex-shrink-0 gap-2 flex-col sm:flex-row">
+          {viewOnly ? (
+            <Button
+              variant="ghost"
+              onClick={() => onOpenChange(false)}
+              className="w-full sm:w-auto"
+            >
+              Close
+            </Button>
+          ) : showRejectFeedback ? (
+            <>
+              <Button
+                variant="ghost"
+                onClick={handleCancelReject}
+                disabled={isLoading}
+                className="w-full sm:w-auto"
+              >
+                Back
+              </Button>
+              <Button
+                variant="secondary"
+                onClick={handleReject}
+                disabled={isLoading}
+                className="w-full sm:w-auto"
+              >
+                {isLoading ? (
+                  <Spinner size="sm" className="mr-2" />
+                ) : (
+                  <RefreshCw className="w-4 h-4 mr-2" />
+                )}
+                {rejectFeedback.trim() ? 'Revise Plan' : 'Cancel Feature'}
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                variant="outline"
+                onClick={handleReject}
+                disabled={isLoading}
+                className="w-full sm:w-auto order-2 sm:order-1"
+              >
+                <RefreshCw className="w-4 h-4 mr-2" />
+                Request Changes
+              </Button>
+              <Button
+                onClick={handleApprove}
+                disabled={isLoading}
+                className="bg-green-600 hover:bg-green-700 text-white w-full sm:w-auto order-1 sm:order-2"
+              >
+                {isLoading ? (
+                  <Spinner size="sm" variant="foreground" className="mr-2" />
+                ) : (
+                  <Check className="w-4 h-4 mr-2" />
+                )}
+                Approve Plan
+              </Button>
+            </>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/plan-content-viewer.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/plan-content-viewer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dd90b0f4244abf91b7f421e8cef916061ce5f792
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/plan-content-viewer.tsx
@@ -0,0 +1,216 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { ChevronDown, ChevronRight, Wrench } from 'lucide-react';
+import { Markdown } from '@/components/ui/markdown';
+import { cn } from '@/lib/utils';
+
+interface ToolCall {
+  tool: string;
+  input: string;
+}
+
+interface ParsedPlanContent {
+  toolCalls: ToolCall[];
+  planMarkdown: string;
+}
+
+/**
+ * Parses plan content to separate tool calls from the actual plan/specification markdown.
+ * Tool calls appear at the beginning (exploration phase), followed by the plan markdown.
+ */
+function parsePlanContent(content: string): ParsedPlanContent {
+  const lines = content.split('\n');
+  const toolCalls: ToolCall[] = [];
+  let planStartIndex = -1;
+
+  let currentTool: string | null = null;
+  let currentInput: string[] = [];
+  let inJsonBlock = false;
+  let braceDepth = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const trimmed = line.trim();
+
+    // Check if this line starts the actual plan/spec (markdown heading)
+    // Plans typically start with # or ## headings
+    if (
+      !inJsonBlock &&
+      (trimmed.match(/^#{1,3}\s+\S/) || // Markdown headings (including emoji like ## ✅ Plan)
+        trimmed.startsWith('---') || // Horizontal rule often used as separator
+        trimmed.match(/^\*\*\S/)) // Bold text starting a section
+    ) {
+      // Flush any active tool call before starting the plan
+      if (currentTool && currentInput.length > 0) {
+        toolCalls.push({
+          tool: currentTool,
+          input: currentInput.join('\n').trim(),
+        });
+        currentTool = null;
+        currentInput = [];
+      }
+      planStartIndex = i;
+      break;
+    }
+
+    // Detect tool call start (supports tool names with dots/hyphens like web.run, file-read)
+    const toolMatch = trimmed.match(/^(?:🔧\s*)?Tool:\s*([^\s]+)/i);
+    if (toolMatch && !inJsonBlock) {
+      // Save previous tool call if exists
+      if (currentTool && currentInput.length > 0) {
+        toolCalls.push({
+          tool: currentTool,
+          input: currentInput.join('\n').trim(),
+        });
+      }
+      currentTool = toolMatch[1];
+      currentInput = [];
+      continue;
+    }
+
+    // Detect Input: line
+    if (trimmed.startsWith('Input:') && currentTool) {
+      const inputContent = trimmed.replace(/^Input:\s*/, '');
+      if (inputContent) {
+        currentInput.push(inputContent);
+        // Check if JSON starts
+        if (inputContent.includes('{')) {
+          braceDepth =
+            (inputContent.match(/\{/g) || []).length - (inputContent.match(/\}/g) || []).length;
+          inJsonBlock = braceDepth > 0;
+        }
+      }
+      continue;
+    }
+
+    // If we're collecting input for a tool
+    if (currentTool) {
+      if (inJsonBlock) {
+        currentInput.push(line);
+        braceDepth += (trimmed.match(/\{/g) || []).length - (trimmed.match(/\}/g) || []).length;
+        if (braceDepth <= 0) {
+          inJsonBlock = false;
+          // Save tool call
+          toolCalls.push({
+            tool: currentTool,
+            input: currentInput.join('\n').trim(),
+          });
+          currentTool = null;
+          currentInput = [];
+        }
+      } else if (trimmed.startsWith('{')) {
+        // JSON block starting
+        currentInput.push(line);
+        braceDepth = (trimmed.match(/\{/g) || []).length - (trimmed.match(/\}/g) || []).length;
+        inJsonBlock = braceDepth > 0;
+        if (!inJsonBlock) {
+          // Single-line JSON
+          toolCalls.push({
+            tool: currentTool,
+            input: currentInput.join('\n').trim(),
+          });
+          currentTool = null;
+          currentInput = [];
+        }
+      } else if (trimmed === '') {
+        // Empty line might end the tool call section
+        if (currentInput.length > 0) {
+          toolCalls.push({
+            tool: currentTool,
+            input: currentInput.join('\n').trim(),
+          });
+          currentTool = null;
+          currentInput = [];
+        }
+      }
+    }
+  }
+
+  // Save any remaining tool call
+  if (currentTool && currentInput.length > 0) {
+    toolCalls.push({
+      tool: currentTool,
+      input: currentInput.join('\n').trim(),
+    });
+  }
+
+  // Extract plan markdown
+  let planMarkdown = '';
+  if (planStartIndex >= 0) {
+    planMarkdown = lines.slice(planStartIndex).join('\n').trim();
+  } else if (toolCalls.length === 0) {
+    // No tool calls found, treat entire content as markdown
+    planMarkdown = content.trim();
+  }
+
+  return { toolCalls, planMarkdown };
+}
+
+interface PlanContentViewerProps {
+  content: string;
+  className?: string;
+}
+
+export function PlanContentViewer({ content, className }: PlanContentViewerProps) {
+  const [showToolCalls, setShowToolCalls] = useState(false);
+
+  const { toolCalls, planMarkdown } = useMemo(() => parsePlanContent(content), [content]);
+
+  if (!content || !content.trim()) {
+    return (
+      <div className={cn('text-muted-foreground text-center py-8', className)}>
+        No plan content available.
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {/* Tool Calls Section - Collapsed by default */}
+      {toolCalls.length > 0 && (
+        <div className="border border-border rounded-lg overflow-hidden">
+          <button
+            onClick={() => setShowToolCalls(!showToolCalls)}
+            className="w-full px-4 py-2 flex items-center gap-2 bg-muted/30 hover:bg-muted/50 transition-colors text-left"
+          >
+            {showToolCalls ? (
+              <ChevronDown className="w-4 h-4 text-muted-foreground" />
+            ) : (
+              <ChevronRight className="w-4 h-4 text-muted-foreground" />
+            )}
+            <Wrench className="w-4 h-4 text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">
+              Exploration ({toolCalls.length} tool call{toolCalls.length !== 1 ? 's' : ''})
+            </span>
+          </button>
+
+          {showToolCalls && (
+            <div className="p-3 space-y-2 bg-muted/10 max-h-[300px] overflow-y-auto">
+              {toolCalls.map((tc, idx) => (
+                <div key={idx} className="text-xs font-mono">
+                  <div className="text-cyan-400 mb-1">Tool: {tc.tool}</div>
+                  <pre className="bg-muted/50 rounded p-2 overflow-x-auto text-foreground-secondary whitespace-pre-wrap">
+                    {tc.input}
+                  </pre>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Plan/Specification Content - Main focus */}
+      {planMarkdown ? (
+        <div className="min-h-[200px]">
+          <Markdown>{planMarkdown}</Markdown>
+        </div>
+      ) : toolCalls.length > 0 ? (
+        <div className="text-muted-foreground text-center py-8 border border-dashed border-border rounded-lg">
+          <p className="text-sm">No specification content found.</p>
+          <p className="text-xs mt-1">The plan appears to only contain exploration tool calls.</p>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/plan-settings-popover.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/plan-settings-popover.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..00c32d9c9a00095764144d23da99c319a09faa68
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/plan-settings-popover.tsx
@@ -0,0 +1,61 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { GitBranch, Settings2 } from 'lucide-react';
+
+interface PlanSettingsPopoverProps {
+  planUseSelectedWorktreeBranch: boolean;
+  onPlanUseSelectedWorktreeBranchChange: (value: boolean) => void;
+}
+
+export function PlanSettingsPopover({
+  planUseSelectedWorktreeBranch,
+  onPlanUseSelectedWorktreeBranchChange,
+}: PlanSettingsPopoverProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          className="p-1 rounded hover:bg-accent/50 transition-colors"
+          title="Plan Settings"
+          data-testid="plan-settings-button"
+        >
+          <Settings2 className="w-4 h-4 text-muted-foreground" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-72" align="end" sideOffset={8}>
+        <div className="space-y-3">
+          <div>
+            <h4 className="font-medium text-sm mb-1">Plan Settings</h4>
+            <p className="text-xs text-muted-foreground">
+              Configure how Plan creates and organizes features.
+            </p>
+          </div>
+
+          <div className="flex items-center justify-between gap-3 p-2 rounded-md bg-secondary/50">
+            <div className="flex items-center gap-2 flex-1 min-w-0">
+              <GitBranch className="w-4 h-4 text-brand-500 shrink-0" />
+              <Label
+                htmlFor="plan-worktree-branch-toggle"
+                className="text-xs font-medium cursor-pointer"
+              >
+                Default to worktree mode
+              </Label>
+            </div>
+            <Switch
+              id="plan-worktree-branch-toggle"
+              checked={planUseSelectedWorktreeBranch}
+              onCheckedChange={onPlanUseSelectedWorktreeBranchChange}
+              data-testid="plan-worktree-branch-toggle"
+            />
+          </div>
+
+          <p className="text-[10px] text-muted-foreground leading-relaxed">
+            Planned features will automatically use isolated worktrees, keeping changes separate
+            from your main branch until you're ready to merge.
+          </p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/post-merge-prompt-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/post-merge-prompt-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..141832da6cb7b456b5fa9a4b50a5ab483bc5bbb2
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/post-merge-prompt-dialog.tsx
@@ -0,0 +1,190 @@
+/**
+ * Post-Merge Prompt Dialog
+ *
+ * Shown after a pull or stash apply results in a clean merge (no conflicts).
+ * Presents the user with two options:
+ * 1. Commit the merge — automatically stage all merge-result files and open commit dialog
+ * 2. Merge manually — leave the working tree as-is for manual review
+ *
+ * The user's choice can be persisted as a preference to avoid repeated prompts.
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { GitMerge, GitCommitHorizontal, FileText, Settings } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export type MergePostAction = 'commit' | 'manual' | null;
+
+interface PostMergePromptDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Branch name where the merge happened */
+  branchName: string;
+  /** Number of files affected by the merge */
+  mergeFileCount: number;
+  /** List of files affected by the merge */
+  mergeAffectedFiles?: string[];
+  /** Called when the user chooses to commit the merge */
+  onCommitMerge: () => void;
+  /** Called when the user chooses to handle the merge manually */
+  onMergeManually: () => void;
+  /** Current saved preference (null = ask every time) */
+  savedPreference?: MergePostAction;
+  /** Called when the user changes the preference */
+  onSavePreference?: (preference: MergePostAction) => void;
+}
+
+export function PostMergePromptDialog({
+  open,
+  onOpenChange,
+  branchName,
+  mergeFileCount,
+  mergeAffectedFiles,
+  onCommitMerge,
+  onMergeManually,
+  savedPreference,
+  onSavePreference,
+}: PostMergePromptDialogProps) {
+  const [rememberChoice, setRememberChoice] = useState(false);
+  const [showFiles, setShowFiles] = useState(false);
+
+  // Reset transient state each time the dialog is opened
+  useEffect(() => {
+    if (open) {
+      setRememberChoice(false);
+      setShowFiles(false);
+    }
+  }, [open]);
+
+  const handleCommitMerge = useCallback(() => {
+    if (rememberChoice && onSavePreference) {
+      onSavePreference('commit');
+    }
+    onCommitMerge();
+    onOpenChange(false);
+  }, [rememberChoice, onSavePreference, onCommitMerge, onOpenChange]);
+
+  const handleMergeManually = useCallback(() => {
+    if (rememberChoice && onSavePreference) {
+      onSavePreference('manual');
+    }
+    onMergeManually();
+    onOpenChange(false);
+  }, [rememberChoice, onSavePreference, onMergeManually, onOpenChange]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[520px] w-full max-w-full sm:rounded-xl rounded-none dialog-fullscreen-mobile">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitMerge className="w-5 h-5 text-purple-500" />
+            Merge Complete
+          </DialogTitle>
+          <DialogDescription asChild>
+            <div className="space-y-3">
+              <span className="block">
+                A merge was successfully completed on{' '}
+                <code className="font-mono bg-muted px-1 rounded">{branchName}</code>
+                {mergeFileCount > 0 && (
+                  <span>
+                    {' '}
+                    affecting {mergeFileCount} file{mergeFileCount !== 1 ? 's' : ''}
+                  </span>
+                )}
+                . How would you like to proceed?
+              </span>
+
+              {mergeAffectedFiles && mergeAffectedFiles.length > 0 && (
+                <div>
+                  <button
+                    onClick={() => setShowFiles(!showFiles)}
+                    className="text-xs text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1"
+                  >
+                    <FileText className="w-3 h-3" />
+                    {showFiles ? 'Hide' : 'Show'} affected files ({mergeAffectedFiles.length})
+                  </button>
+                  {showFiles && (
+                    <div className="mt-1.5 border border-border rounded-lg overflow-hidden max-h-[150px] overflow-y-auto scrollbar-visible">
+                      {mergeAffectedFiles.map((file) => (
+                        <div
+                          key={file}
+                          className="flex items-center gap-2 px-3 py-1.5 text-xs font-mono border-b border-border last:border-b-0 hover:bg-accent/30"
+                        >
+                          <GitMerge className="w-3 h-3 text-purple-500 flex-shrink-0" />
+                          <span className="truncate">{file}</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+
+              <div className="mt-2 p-3 rounded-md bg-muted/50 border border-border">
+                <p className="text-sm text-muted-foreground font-medium mb-2">
+                  Choose how to proceed:
+                </p>
+                <ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
+                  <li>
+                    <strong>Commit Merge</strong> &mdash; Stage all merge files and open the commit
+                    dialog with a pre-populated merge commit message
+                  </li>
+                  <li>
+                    <strong>Review Manually</strong> &mdash; Leave the working tree as-is so you can
+                    review changes and commit at your own pace
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Remember choice option */}
+        {onSavePreference && (
+          <div className="flex items-center gap-2 px-1">
+            <label className="flex items-center gap-2 text-xs text-muted-foreground cursor-pointer">
+              <Checkbox
+                checked={rememberChoice}
+                onCheckedChange={(checked) => setRememberChoice(checked)}
+                className="rounded border-border"
+              />
+              <Settings className="w-3 h-3" />
+              Remember my choice for future merges
+            </label>
+            {savedPreference && (
+              <button
+                onClick={() => onSavePreference(null)}
+                className="text-xs text-muted-foreground hover:text-foreground transition-colors ml-auto"
+              >
+                Reset preference
+              </button>
+            )}
+          </div>
+        )}
+
+        <DialogFooter className={cn('flex-col sm:flex-row gap-2')}>
+          <Button variant="outline" onClick={handleMergeManually} className="w-full sm:w-auto">
+            <FileText className="w-4 h-4 mr-2" />
+            Review Manually
+          </Button>
+          <Button
+            onClick={handleCommitMerge}
+            className="w-full sm:w-auto bg-purple-600 hover:bg-purple-700 text-white"
+          >
+            <GitCommitHorizontal className="w-4 h-4 mr-2" />
+            Commit Merge
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/push-to-remote-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/push-to-remote-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..712d97576448e3eefe0ae7a6b9c3fa966a18ac4c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/push-to-remote-dialog.tsx
@@ -0,0 +1,449 @@
+import { useState, useEffect, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { getErrorMessage } from '@/lib/utils';
+import { toast } from 'sonner';
+import { Upload, RefreshCw, AlertTriangle, Sparkles, Plus, Link } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import type { WorktreeInfo } from '../worktree-panel/types';
+
+interface RemoteInfo {
+  name: string;
+  url: string;
+}
+
+const logger = createLogger('PushToRemoteDialog');
+
+interface PushToRemoteDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  onConfirm: (worktree: WorktreeInfo, remote: string) => void;
+}
+
+export function PushToRemoteDialog({
+  open,
+  onOpenChange,
+  worktree,
+  onConfirm,
+}: PushToRemoteDialogProps) {
+  const [remotes, setRemotes] = useState<RemoteInfo[]>([]);
+  const [selectedRemote, setSelectedRemote] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Add remote form state
+  const [showAddRemoteForm, setShowAddRemoteForm] = useState(false);
+  const [newRemoteName, setNewRemoteName] = useState('origin');
+  const [newRemoteUrl, setNewRemoteUrl] = useState('');
+  const [isAddingRemote, setIsAddingRemote] = useState(false);
+  const [addRemoteError, setAddRemoteError] = useState<string | null>(null);
+
+  /**
+   * Transforms API remote data to RemoteInfo format
+   */
+  const transformRemoteData = useCallback(
+    (remotes: Array<{ name: string; url: string }>): RemoteInfo[] => {
+      return remotes.map((r) => ({
+        name: r.name,
+        url: r.url,
+      }));
+    },
+    []
+  );
+
+  /**
+   * Updates remotes state and hides add form if remotes exist
+   */
+  const updateRemotesState = useCallback((remoteInfos: RemoteInfo[]) => {
+    setRemotes(remoteInfos);
+    if (remoteInfos.length > 0) {
+      setShowAddRemoteForm(false);
+    }
+  }, []);
+
+  const fetchRemotes = useCallback(async () => {
+    if (!worktree) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const api = getHttpApiClient();
+      const result = await api.worktree.listRemotes(worktree.path);
+
+      if (result.success && result.result) {
+        const remoteInfos = transformRemoteData(result.result.remotes);
+        updateRemotesState(remoteInfos);
+      } else {
+        setError(result.error || 'Failed to fetch remotes');
+      }
+    } catch (err) {
+      logger.error('Failed to fetch remotes:', err);
+      setError(getErrorMessage(err));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [worktree, transformRemoteData, updateRemotesState]);
+
+  // Fetch remotes when dialog opens
+  useEffect(() => {
+    if (open && worktree) {
+      fetchRemotes();
+    }
+  }, [open, worktree, fetchRemotes]);
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      setSelectedRemote('');
+      setError(null);
+      setShowAddRemoteForm(false);
+      setNewRemoteName('origin');
+      setNewRemoteUrl('');
+      setAddRemoteError(null);
+    }
+  }, [open]);
+
+  // Auto-select default remote when remotes are loaded
+  useEffect(() => {
+    if (remotes.length > 0 && !selectedRemote) {
+      // Default to 'origin' if available, otherwise first remote
+      const defaultRemote = remotes.find((r) => r.name === 'origin') || remotes[0];
+      setSelectedRemote(defaultRemote.name);
+    }
+  }, [remotes, selectedRemote]);
+
+  // Show add remote form when no remotes (but not when there's an error)
+  useEffect(() => {
+    if (!isLoading && remotes.length === 0 && !error) {
+      setShowAddRemoteForm(true);
+    }
+  }, [isLoading, remotes.length, error]);
+
+  const handleRefresh = async () => {
+    if (!worktree) return;
+
+    setIsRefreshing(true);
+    setError(null);
+
+    try {
+      const api = getHttpApiClient();
+      const result = await api.worktree.listRemotes(worktree.path);
+
+      if (result.success && result.result) {
+        const remoteInfos = transformRemoteData(result.result.remotes);
+        updateRemotesState(remoteInfos);
+        toast.success('Remotes refreshed');
+      } else {
+        toast.error(result.error || 'Failed to refresh remotes');
+      }
+    } catch (err) {
+      logger.error('Failed to refresh remotes:', err);
+      toast.error(getErrorMessage(err));
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const handleAddRemote = async () => {
+    if (!worktree || !newRemoteName.trim() || !newRemoteUrl.trim()) return;
+
+    setIsAddingRemote(true);
+    setAddRemoteError(null);
+
+    try {
+      const api = getHttpApiClient();
+      const result = await api.worktree.addRemote(
+        worktree.path,
+        newRemoteName.trim(),
+        newRemoteUrl.trim()
+      );
+
+      if (result.success && result.result) {
+        toast.success(result.result.message);
+        // Add the new remote to the list and select it
+        const newRemote: RemoteInfo = {
+          name: result.result.remoteName,
+          url: result.result.remoteUrl,
+        };
+        setRemotes((prev) => [...prev, newRemote]);
+        setSelectedRemote(newRemote.name);
+        setShowAddRemoteForm(false);
+        setNewRemoteName('origin');
+        setNewRemoteUrl('');
+      } else {
+        setAddRemoteError(result.error || 'Failed to add remote');
+      }
+    } catch (err) {
+      logger.error('Failed to add remote:', err);
+      setAddRemoteError(getErrorMessage(err));
+    } finally {
+      setIsAddingRemote(false);
+    }
+  };
+
+  const handleConfirm = () => {
+    if (!worktree || !selectedRemote) return;
+    onConfirm(worktree, selectedRemote);
+    onOpenChange(false);
+  };
+
+  const renderAddRemoteForm = () => (
+    <div className="grid gap-4 py-4">
+      <div className="flex items-center gap-2 text-muted-foreground mb-2">
+        <Link className="w-4 h-4" />
+        <span className="text-sm">
+          {remotes.length === 0
+            ? 'No remotes found. Add a remote to push your branch.'
+            : 'Add a new remote'}
+        </span>
+      </div>
+
+      <div className="grid gap-2">
+        <Label htmlFor="remote-name">Remote Name</Label>
+        <Input
+          id="remote-name"
+          placeholder="origin"
+          value={newRemoteName}
+          onChange={(e) => {
+            setNewRemoteName(e.target.value);
+            setAddRemoteError(null);
+          }}
+          disabled={isAddingRemote}
+        />
+      </div>
+
+      <div className="grid gap-2">
+        <Label htmlFor="remote-url">Remote URL</Label>
+        <Input
+          id="remote-url"
+          placeholder="https://github.com/user/repo.git"
+          value={newRemoteUrl}
+          onChange={(e) => {
+            setNewRemoteUrl(e.target.value);
+            setAddRemoteError(null);
+          }}
+          onKeyDown={(e) => {
+            if (
+              e.key === 'Enter' &&
+              newRemoteName.trim() &&
+              newRemoteUrl.trim() &&
+              !isAddingRemote
+            ) {
+              handleAddRemote();
+            }
+          }}
+          disabled={isAddingRemote}
+        />
+        <p className="text-xs text-muted-foreground">
+          Supports HTTPS, SSH (git@github.com:user/repo.git), or git:// URLs
+        </p>
+      </div>
+
+      {addRemoteError && (
+        <div className="flex items-center gap-2 text-destructive">
+          <AlertTriangle className="w-4 h-4" />
+          <span className="text-sm">{addRemoteError}</span>
+        </div>
+      )}
+    </div>
+  );
+
+  const renderRemoteSelector = () => (
+    <div className="grid gap-4 py-4">
+      <div className="grid gap-2">
+        <div className="flex items-center justify-between">
+          <Label htmlFor="remote-select">Select Remote</Label>
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setShowAddRemoteForm(true)}
+              className="h-6 px-2 text-xs"
+            >
+              <Plus className="w-3 h-3 mr-1" />
+              Add
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleRefresh}
+              disabled={isRefreshing}
+              className="h-6 px-2 text-xs"
+            >
+              {isRefreshing ? (
+                <Spinner size="xs" className="mr-1" />
+              ) : (
+                <RefreshCw className="w-3 h-3 mr-1" />
+              )}
+              Refresh
+            </Button>
+          </div>
+        </div>
+        <Select value={selectedRemote} onValueChange={setSelectedRemote}>
+          <SelectTrigger id="remote-select">
+            <SelectValue placeholder="Select a remote" />
+          </SelectTrigger>
+          <SelectContent>
+            {remotes.map((remote) => (
+              <SelectItem
+                key={remote.name}
+                value={remote.name}
+                description={
+                  <span className="text-xs text-muted-foreground truncate max-w-[300px]">
+                    {remote.url}
+                  </span>
+                }
+              >
+                <span className="font-medium">{remote.name}</span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {selectedRemote && (
+        <div className="mt-2 p-3 rounded-md bg-muted/50 border border-border">
+          <p className="text-sm text-muted-foreground">
+            This will create a new remote branch{' '}
+            <span className="font-mono text-foreground">
+              {selectedRemote}/{worktree?.branch}
+            </span>{' '}
+            and set up tracking.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+
+  const renderFooter = () => {
+    if (showAddRemoteForm) {
+      return (
+        <DialogFooter>
+          {remotes.length > 0 && (
+            <Button
+              variant="outline"
+              onClick={() => setShowAddRemoteForm(false)}
+              disabled={isAddingRemote}
+            >
+              Back
+            </Button>
+          )}
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isAddingRemote}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleAddRemote}
+            disabled={!newRemoteName.trim() || !newRemoteUrl.trim() || isAddingRemote}
+          >
+            {isAddingRemote ? (
+              <>
+                <Spinner size="sm" className="mr-2" />
+                Adding...
+              </>
+            ) : (
+              <>
+                <Plus className="w-4 h-4 mr-2" />
+                Add Remote
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      );
+    }
+
+    return (
+      <DialogFooter>
+        <Button variant="outline" onClick={() => onOpenChange(false)}>
+          Cancel
+        </Button>
+        <Button onClick={handleConfirm} disabled={!selectedRemote || isLoading}>
+          <Upload className="w-4 h-4 mr-2" />
+          Push to {selectedRemote || 'Remote'}
+        </Button>
+      </DialogFooter>
+    );
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[450px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {showAddRemoteForm ? (
+              <>
+                <Plus className="w-5 h-5 text-primary" />
+                Add Remote
+              </>
+            ) : (
+              <>
+                <Upload className="w-5 h-5 text-primary" />
+                Push New Branch to Remote
+                <span className="inline-flex items-center gap-1 text-xs font-medium bg-primary/10 text-primary px-2 py-0.5 rounded-full ml-2">
+                  <Sparkles className="w-3 h-3" />
+                  new
+                </span>
+              </>
+            )}
+          </DialogTitle>
+          <DialogDescription>
+            {showAddRemoteForm ? (
+              <>Add a remote repository to push your changes to.</>
+            ) : (
+              <>
+                Push{' '}
+                <span className="font-mono text-foreground">
+                  {worktree?.branch || 'current branch'}
+                </span>{' '}
+                to a remote repository for the first time.
+              </>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <Spinner size="lg" />
+          </div>
+        ) : error && !showAddRemoteForm ? (
+          <div className="flex flex-col items-center gap-4 py-6">
+            <div className="flex items-center gap-2 text-destructive">
+              <AlertTriangle className="w-5 h-5" />
+              <span className="text-sm">{error}</span>
+            </div>
+            <Button variant="outline" size="sm" onClick={fetchRemotes}>
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Retry
+            </Button>
+          </div>
+        ) : showAddRemoteForm ? (
+          renderAddRemoteForm()
+        ) : (
+          renderRemoteSelector()
+        )}
+
+        {renderFooter()}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/quick-add-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/quick-add-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d55311b484feb72a0d9755f680ee3c8208dea2f4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/quick-add-dialog.tsx
@@ -0,0 +1,139 @@
+import { useState, useRef, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { HotkeyButton } from '@/components/ui/hotkey-button';
+import { Textarea } from '@/components/ui/textarea';
+import { Play, Plus } from 'lucide-react';
+import type { PhaseModelEntry } from '@automaker/types';
+import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
+import { useAppStore } from '@/store/app-store';
+
+interface QuickAddDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAdd: (description: string, modelEntry: PhaseModelEntry) => void;
+  onAddAndStart: (description: string, modelEntry: PhaseModelEntry) => void;
+}
+
+export function QuickAddDialog({ open, onOpenChange, onAdd, onAddAndStart }: QuickAddDialogProps) {
+  const [description, setDescription] = useState('');
+  const [descriptionError, setDescriptionError] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Get default feature model from store
+  const defaultFeatureModel = useAppStore((s) => s.defaultFeatureModel);
+  const currentProject = useAppStore((s) => s.currentProject);
+
+  // Use project-level default feature model if set, otherwise fall back to global
+  const effectiveDefaultFeatureModel = currentProject?.defaultFeatureModel ?? defaultFeatureModel;
+
+  const [modelEntry, setModelEntry] = useState<PhaseModelEntry>(
+    effectiveDefaultFeatureModel || { model: 'claude-opus' }
+  );
+
+  // Reset form when dialog opens (in useEffect to avoid state mutation during render)
+  useEffect(() => {
+    if (open) {
+      setDescription('');
+      setDescriptionError(false);
+      setModelEntry(effectiveDefaultFeatureModel || { model: 'claude-opus' });
+    }
+  }, [open, effectiveDefaultFeatureModel]);
+
+  const handleSubmit = (actionFn: (description: string, modelEntry: PhaseModelEntry) => void) => {
+    if (!description.trim()) {
+      setDescriptionError(true);
+      textareaRef.current?.focus();
+      return;
+    }
+
+    actionFn(description.trim(), modelEntry);
+    setDescription('');
+    setDescriptionError(false);
+    onOpenChange(false);
+  };
+
+  const handleAdd = () => handleSubmit(onAdd);
+  const handleAddAndStart = () => handleSubmit(onAddAndStart);
+
+  const handleDescriptionChange = (value: string) => {
+    setDescription(value);
+    if (value.trim()) {
+      setDescriptionError(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        compact
+        className="sm:max-w-md"
+        data-testid="quick-add-dialog"
+        onOpenAutoFocus={(e) => {
+          e.preventDefault();
+          textareaRef.current?.focus();
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Quick Add Feature</DialogTitle>
+          <DialogDescription>
+            Create a new feature with minimal configuration. All other settings use defaults.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4 space-y-4">
+          {/* Description Input */}
+          <div className="space-y-2">
+            <label htmlFor="quick-add-description" className="text-sm font-medium">
+              Description
+            </label>
+            <Textarea
+              ref={textareaRef}
+              id="quick-add-description"
+              value={description}
+              onChange={(e) => handleDescriptionChange(e.target.value)}
+              placeholder="Describe what you want to build..."
+              className={
+                descriptionError ? 'border-destructive focus-visible:ring-destructive' : ''
+              }
+              rows={3}
+              data-testid="quick-add-description-input"
+            />
+            {descriptionError && (
+              <p className="text-xs text-destructive">Description is required</p>
+            )}
+          </div>
+
+          {/* Model Selection */}
+          <PhaseModelSelector value={modelEntry} onChange={setModelEntry} compact align="end" />
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button variant="secondary" onClick={handleAdd} data-testid="quick-add-button">
+            <Plus className="w-4 h-4 mr-2" />
+            Add
+          </Button>
+          <HotkeyButton
+            onClick={handleAddAndStart}
+            hotkey={{ key: 'Enter', cmdCtrl: true }}
+            hotkeyActive={open}
+            data-testid="quick-add-and-start-button"
+          >
+            <Play className="w-4 h-4 mr-2" />
+            Make
+          </HotkeyButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/select-remote-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/select-remote-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1f8e934cf7108ee523ba1674da8306e449a1a1e4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/select-remote-dialog.tsx
@@ -0,0 +1,276 @@
+import { useState, useEffect, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { getErrorMessage } from '@/lib/utils';
+import { Download, Upload, RefreshCw, AlertTriangle } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import type { WorktreeInfo } from '../worktree-panel/types';
+
+interface RemoteInfo {
+  name: string;
+  url: string;
+}
+
+const logger = createLogger('SelectRemoteDialog');
+
+export type SelectRemoteOperation = 'pull' | 'push';
+
+interface SelectRemoteDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  operation: SelectRemoteOperation;
+  onConfirm: (worktree: WorktreeInfo, remote: string) => void;
+}
+
+export function SelectRemoteDialog({
+  open,
+  onOpenChange,
+  worktree,
+  operation,
+  onConfirm,
+}: SelectRemoteDialogProps) {
+  const [remotes, setRemotes] = useState<RemoteInfo[]>([]);
+  const [selectedRemote, setSelectedRemote] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchRemotes = useCallback(async () => {
+    if (!worktree) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const api = getHttpApiClient();
+      const result = await api.worktree.listRemotes(worktree.path);
+
+      if (result.success && result.result) {
+        const remoteInfos = result.result.remotes.map((r: { name: string; url: string }) => ({
+          name: r.name,
+          url: r.url,
+        }));
+        setRemotes(remoteInfos);
+        setSelectedRemote((prev) => {
+          if (prev && remoteInfos.some((r) => r.name === prev)) {
+            return prev;
+          }
+          return remoteInfos.find((r) => r.name === 'origin')?.name ?? remoteInfos[0]?.name ?? '';
+        });
+      } else {
+        setError(result.error || 'Failed to fetch remotes');
+      }
+    } catch (err) {
+      logger.error('Failed to fetch remotes:', err);
+      setError(getErrorMessage(err));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [worktree]);
+
+  // Fetch remotes when dialog opens
+  useEffect(() => {
+    if (open && worktree) {
+      fetchRemotes();
+    }
+  }, [open, worktree, fetchRemotes]);
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      setSelectedRemote('');
+      setError(null);
+    }
+  }, [open]);
+
+  // Auto-select default remote when remotes are loaded
+  useEffect(() => {
+    if (remotes.length > 0 && !selectedRemote) {
+      // Default to 'origin' if available, otherwise first remote
+      const defaultRemote = remotes.find((r) => r.name === 'origin') || remotes[0];
+      setSelectedRemote(defaultRemote.name);
+    }
+  }, [remotes, selectedRemote]);
+
+  const handleRefresh = async () => {
+    if (!worktree) return;
+
+    setIsRefreshing(true);
+    setError(null);
+
+    try {
+      const api = getHttpApiClient();
+      const result = await api.worktree.listRemotes(worktree.path);
+
+      if (result.success && result.result) {
+        const remoteInfos = result.result.remotes.map((r: { name: string; url: string }) => ({
+          name: r.name,
+          url: r.url,
+        }));
+        setRemotes(remoteInfos);
+        setSelectedRemote((prev) => {
+          if (prev && remoteInfos.some((r) => r.name === prev)) {
+            return prev;
+          }
+          return remoteInfos.find((r) => r.name === 'origin')?.name ?? remoteInfos[0]?.name ?? '';
+        });
+      } else {
+        setError(result.error || 'Failed to refresh remotes');
+      }
+    } catch (err) {
+      logger.error('Failed to refresh remotes:', err);
+      setError(getErrorMessage(err));
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const handleConfirm = () => {
+    if (!worktree || !selectedRemote) return;
+    onConfirm(worktree, selectedRemote);
+    onOpenChange(false);
+  };
+
+  const isPull = operation === 'pull';
+  const Icon = isPull ? Download : Upload;
+  const title = isPull ? 'Pull from Remote' : 'Push to Remote';
+  const actionLabel = isPull
+    ? `Pull from ${selectedRemote || 'Remote'}`
+    : `Push to ${selectedRemote || 'Remote'}`;
+  const description = isPull ? (
+    <>
+      Select a remote to pull changes into{' '}
+      <span className="font-mono text-foreground">{worktree?.branch || 'current branch'}</span>
+    </>
+  ) : (
+    <>
+      Select a remote to push{' '}
+      <span className="font-mono text-foreground">{worktree?.branch || 'current branch'}</span> to
+    </>
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[450px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Icon className="w-5 h-5 text-primary" />
+            {title}
+          </DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <Spinner size="lg" />
+          </div>
+        ) : error ? (
+          <div className="flex flex-col items-center gap-4 py-6">
+            <div className="flex items-center gap-2 text-destructive">
+              <AlertTriangle className="w-5 h-5" />
+              <span className="text-sm">{error}</span>
+            </div>
+            <Button variant="outline" size="sm" onClick={fetchRemotes}>
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Retry
+            </Button>
+          </div>
+        ) : (
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="remote-select">Select Remote</Label>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleRefresh}
+                  disabled={isRefreshing}
+                  className="h-6 px-2 text-xs"
+                >
+                  {isRefreshing ? (
+                    <Spinner size="xs" className="mr-1" />
+                  ) : (
+                    <RefreshCw className="w-3 h-3 mr-1" />
+                  )}
+                  Refresh
+                </Button>
+              </div>
+              <Select value={selectedRemote} onValueChange={setSelectedRemote}>
+                <SelectTrigger id="remote-select">
+                  <SelectValue placeholder="Select a remote" />
+                </SelectTrigger>
+                <SelectContent>
+                  {remotes.map((remote) => (
+                    <SelectItem
+                      key={remote.name}
+                      value={remote.name}
+                      description={
+                        <span className="text-xs text-muted-foreground truncate max-w-[300px]">
+                          {remote.url}
+                        </span>
+                      }
+                    >
+                      <span className="font-medium">{remote.name}</span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {selectedRemote && (
+              <div className="mt-2 p-3 rounded-md bg-muted/50 border border-border">
+                <p className="text-sm text-muted-foreground">
+                  {isPull ? (
+                    <>
+                      This will pull changes from{' '}
+                      <span className="font-mono text-foreground">
+                        {selectedRemote}/{worktree?.branch}
+                      </span>{' '}
+                      into your local branch.
+                    </>
+                  ) : (
+                    <>
+                      This will push your local changes to{' '}
+                      <span className="font-mono text-foreground">
+                        {selectedRemote}/{worktree?.branch}
+                      </span>
+                      .
+                    </>
+                  )}
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleConfirm} disabled={!selectedRemote || isLoading}>
+            <Icon className="w-4 h-4 mr-2" />
+            {actionLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/stash-apply-conflict-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/stash-apply-conflict-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fd882ecbfade7edffa1c8501971c94b56d19d8e0
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/stash-apply-conflict-dialog.tsx
@@ -0,0 +1,128 @@
+/**
+ * Dialog shown when a stash apply/pop operation results in merge conflicts.
+ * Presents the user with two options:
+ * 1. Resolve Manually - leaves conflict markers in place
+ * 2. Resolve with AI - creates a feature task for AI-powered conflict resolution
+ */
+
+import { useCallback } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { AlertTriangle, XCircle, Wrench, Sparkles } from 'lucide-react';
+import { toast } from 'sonner';
+import type { StashApplyConflictInfo } from '../worktree-panel/types';
+
+interface StashApplyConflictDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  conflictInfo: StashApplyConflictInfo | null;
+  onResolveWithAI?: (conflictInfo: StashApplyConflictInfo) => void;
+}
+
+export function StashApplyConflictDialog({
+  open,
+  onOpenChange,
+  conflictInfo,
+  onResolveWithAI,
+}: StashApplyConflictDialogProps) {
+  const handleResolveManually = useCallback(() => {
+    toast.info('Conflict markers left in place', {
+      description: 'Edit the conflicting files to resolve conflicts manually.',
+      duration: 6000,
+    });
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  const handleResolveWithAI = useCallback(() => {
+    if (!conflictInfo || !onResolveWithAI) return;
+
+    onResolveWithAI(conflictInfo);
+    onOpenChange(false);
+  }, [conflictInfo, onResolveWithAI, onOpenChange]);
+
+  if (!conflictInfo) return null;
+
+  const operationLabel = conflictInfo.operation === 'pop' ? 'popped' : 'applied';
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[520px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="w-5 h-5 text-orange-500" />
+            Merge Conflicts Detected
+          </DialogTitle>
+          <DialogDescription asChild>
+            <div className="space-y-3">
+              <span className="block">
+                Stash{' '}
+                <code className="font-mono bg-muted px-1 rounded">{conflictInfo.stashRef}</code> was{' '}
+                {operationLabel} on branch{' '}
+                <code className="font-mono bg-muted px-1 rounded">{conflictInfo.branchName}</code>{' '}
+                but resulted in merge conflicts.
+              </span>
+
+              {conflictInfo.conflictFiles.length > 0 && (
+                <div className="space-y-1.5">
+                  <span className="text-sm font-medium text-foreground">
+                    Conflicting files ({conflictInfo.conflictFiles.length}):
+                  </span>
+                  <div className="border border-border rounded-lg overflow-hidden max-h-[200px] overflow-y-auto scrollbar-visible">
+                    {conflictInfo.conflictFiles.map((file) => (
+                      <div
+                        key={file}
+                        className="flex items-center gap-2 px-3 py-1.5 text-xs font-mono border-b border-border last:border-b-0 hover:bg-accent/30"
+                      >
+                        <XCircle className="w-3.5 h-3.5 text-red-500 flex-shrink-0" />
+                        <span className="truncate">{file}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              <div className="mt-2 p-3 rounded-md bg-muted/50 border border-border">
+                <p className="text-sm text-muted-foreground font-medium mb-2">
+                  Choose how to resolve:
+                </p>
+                <ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
+                  <li>
+                    <strong>Resolve with AI</strong> &mdash; Creates a task to analyze and resolve
+                    conflicts automatically
+                  </li>
+                  <li>
+                    <strong>Resolve Manually</strong> &mdash; Leaves conflict markers in place for
+                    you to edit directly
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleResolveManually}>
+            <Wrench className="w-4 h-4 mr-2" />
+            Resolve Manually
+          </Button>
+          {onResolveWithAI && (
+            <Button
+              onClick={handleResolveWithAI}
+              className="bg-purple-600 hover:bg-purple-700 text-white"
+            >
+              <Sparkles className="w-4 h-4 mr-2" />
+              Resolve with AI
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/stash-changes-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/stash-changes-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..30508f717eee53e3202ddc75dfaadaff0b4f4ac1
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/stash-changes-dialog.tsx
@@ -0,0 +1,552 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Archive,
+  FilePlus,
+  FileX,
+  FilePen,
+  FileText,
+  File,
+  ChevronDown,
+  ChevronRight,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import { TruncatedFilePath } from '@/components/ui/truncated-file-path';
+import type { FileStatus } from '@/types/electron';
+import { parseDiff, type ParsedFileDiff } from '@/lib/diff-utils';
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface StashChangesDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  onStashed?: () => void;
+}
+
+const getFileIcon = (status: string) => {
+  switch (status) {
+    case 'A':
+    case '?':
+      return <FilePlus className="w-3.5 h-3.5 text-green-500 flex-shrink-0" />;
+    case 'D':
+      return <FileX className="w-3.5 h-3.5 text-red-500 flex-shrink-0" />;
+    case 'M':
+    case 'U':
+      return <FilePen className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />;
+    case 'R':
+    case 'C':
+      return <File className="w-3.5 h-3.5 text-blue-500 flex-shrink-0" />;
+    default:
+      return <FileText className="w-3.5 h-3.5 text-muted-foreground flex-shrink-0" />;
+  }
+};
+
+const getStatusLabel = (status: string) => {
+  switch (status) {
+    case 'A':
+      return 'Added';
+    case '?':
+      return 'Untracked';
+    case 'D':
+      return 'Deleted';
+    case 'M':
+      return 'Modified';
+    case 'U':
+      return 'Updated';
+    case 'R':
+      return 'Renamed';
+    case 'C':
+      return 'Copied';
+    default:
+      return 'Changed';
+  }
+};
+
+const getStatusBadgeColor = (status: string) => {
+  switch (status) {
+    case 'A':
+    case '?':
+      return 'bg-green-500/20 text-green-400 border-green-500/30';
+    case 'D':
+      return 'bg-red-500/20 text-red-400 border-red-500/30';
+    case 'M':
+    case 'U':
+      return 'bg-amber-500/20 text-amber-400 border-amber-500/30';
+    case 'R':
+    case 'C':
+      return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+    default:
+      return 'bg-muted text-muted-foreground border-border';
+  }
+};
+
+// parseDiff is imported from @/lib/diff-utils
+
+function DiffLine({
+  type,
+  content,
+  lineNumber,
+}: {
+  type: 'context' | 'addition' | 'deletion' | 'header';
+  content: string;
+  lineNumber?: { old?: number; new?: number };
+}) {
+  const bgClass = {
+    context: 'bg-transparent',
+    addition: 'bg-green-500/10',
+    deletion: 'bg-red-500/10',
+    header: 'bg-blue-500/10',
+  };
+
+  const textClass = {
+    context: 'text-foreground-secondary',
+    addition: 'text-green-400',
+    deletion: 'text-red-400',
+    header: 'text-blue-400',
+  };
+
+  const prefix = {
+    context: ' ',
+    addition: '+',
+    deletion: '-',
+    header: '',
+  };
+
+  if (type === 'header') {
+    return (
+      <div className={cn('px-2 py-1 font-mono text-xs', bgClass[type], textClass[type])}>
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('flex font-mono text-xs', bgClass[type])}>
+      <span className="w-10 flex-shrink-0 text-right pr-1.5 text-muted-foreground select-none border-r border-border-glass text-[10px]">
+        {lineNumber?.old ?? ''}
+      </span>
+      <span className="w-10 flex-shrink-0 text-right pr-1.5 text-muted-foreground select-none border-r border-border-glass text-[10px]">
+        {lineNumber?.new ?? ''}
+      </span>
+      <span className={cn('w-4 flex-shrink-0 text-center select-none', textClass[type])}>
+        {prefix[type]}
+      </span>
+      <span className={cn('flex-1 px-1.5 whitespace-pre-wrap break-all', textClass[type])}>
+        {content || '\u00A0'}
+      </span>
+    </div>
+  );
+}
+
+export function StashChangesDialog({
+  open,
+  onOpenChange,
+  worktree,
+  onStashed,
+}: StashChangesDialogProps) {
+  const [message, setMessage] = useState('');
+  const [isStashing, setIsStashing] = useState(false);
+
+  // File selection state
+  const [files, setFiles] = useState<FileStatus[]>([]);
+  const [diffContent, setDiffContent] = useState('');
+  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(new Set());
+  const [expandedFile, setExpandedFile] = useState<string | null>(null);
+  const [isLoadingDiffs, setIsLoadingDiffs] = useState(false);
+  const [loadDiffsError, setLoadDiffsError] = useState<string | null>(null);
+
+  // Parse diffs
+  const parsedDiffs = useMemo(() => parseDiff(diffContent), [diffContent]);
+
+  // Create a map of file path to parsed diff for quick lookup
+  const diffsByFile = useMemo(() => {
+    const map = new Map<string, ParsedFileDiff>();
+    for (const diff of parsedDiffs) {
+      map.set(diff.filePath, diff);
+    }
+    return map;
+  }, [parsedDiffs]);
+
+  const loadDiffs = useCallback(
+    async (cancelled: { current: boolean }) => {
+      setIsLoadingDiffs(true);
+      setLoadDiffsError(null);
+      setFiles([]);
+      setDiffContent('');
+      setSelectedFiles(new Set());
+      setExpandedFile(null);
+      try {
+        const api = getHttpApiClient();
+        const result = await api.git.getDiffs(worktree!.path);
+        if (result.success) {
+          const fileList = result.files ?? [];
+          if (!cancelled.current) setFiles(fileList);
+          if (!cancelled.current) setDiffContent(result.diff ?? '');
+          // Select all files by default
+          if (!cancelled.current)
+            setSelectedFiles(new Set(fileList.map((f: FileStatus) => f.path)));
+        } else if (!cancelled.current) {
+          setLoadDiffsError(result.error ?? 'Failed to load diffs');
+        }
+      } catch (err) {
+        console.warn('Failed to load diffs for stash dialog:', err);
+        if (!cancelled.current) {
+          setLoadDiffsError(err instanceof Error ? err.message : 'Failed to load changes');
+        }
+      } finally {
+        if (!cancelled.current) setIsLoadingDiffs(false);
+      }
+    },
+    [worktree]
+  );
+
+  // Load diffs when dialog opens
+  useEffect(() => {
+    if (open && worktree) {
+      const cancelled = { current: false };
+      loadDiffs(cancelled);
+      return () => {
+        cancelled.current = true;
+      };
+    }
+  }, [open, worktree, loadDiffs]);
+
+  const handleToggleFile = useCallback((filePath: string) => {
+    setSelectedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(filePath)) {
+        next.delete(filePath);
+      } else {
+        next.add(filePath);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleToggleAll = useCallback(() => {
+    setSelectedFiles((prev) => {
+      if (prev.size === files.length) {
+        return new Set();
+      }
+      return new Set(files.map((f) => f.path));
+    });
+  }, [files]);
+
+  const handleFileClick = useCallback((filePath: string) => {
+    setExpandedFile((prev) => (prev === filePath ? null : filePath));
+  }, []);
+
+  const handleStash = useCallback(async () => {
+    if (!worktree || selectedFiles.size === 0) return;
+
+    setIsStashing(true);
+    try {
+      const api = getHttpApiClient();
+
+      // Pass selected files if not all files are selected
+      const filesToStash =
+        selectedFiles.size === files.length ? undefined : Array.from(selectedFiles);
+
+      const result = await api.worktree.stashPush(
+        worktree.path,
+        message.trim() || undefined,
+        filesToStash
+      );
+
+      if (result.success && result.result) {
+        if (result.result.stashed) {
+          toast.success('Changes stashed', {
+            description: result.result.message || 'Your changes have been stashed',
+          });
+          setMessage('');
+          onOpenChange(false);
+          onStashed?.();
+        } else {
+          toast.info('No changes to stash');
+        }
+      } else {
+        toast.error('Failed to stash changes', {
+          description: result.error || 'Unknown error',
+        });
+      }
+    } catch (err) {
+      toast.error('Failed to stash changes', {
+        description: err instanceof Error ? err.message : 'Unknown error',
+      });
+    } finally {
+      setIsStashing(false);
+    }
+  }, [worktree, selectedFiles, files.length, message, onOpenChange, onStashed]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !isStashing && selectedFiles.size > 0) {
+        e.preventDefault();
+        handleStash();
+      }
+    },
+    [isStashing, selectedFiles.size, handleStash]
+  );
+
+  if (!worktree) return null;
+
+  const allSelected = selectedFiles.size === files.length && files.length > 0;
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) {
+          setMessage('');
+        }
+        onOpenChange(isOpen);
+      }}
+    >
+      <DialogContent
+        className="sm:max-w-[700px] max-h-[85vh] flex flex-col"
+        onKeyDown={handleKeyDown}
+      >
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Archive className="w-5 h-5" />
+            Stash Changes
+          </DialogTitle>
+          <DialogDescription>
+            Stash uncommitted changes on{' '}
+            <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-3 py-2 min-h-0 flex-1 overflow-hidden">
+          {/* File Selection */}
+          <div className="flex flex-col min-h-0">
+            <div className="flex items-center justify-between mb-1.5">
+              <Label className="text-sm font-medium flex items-center gap-2">
+                Files to stash
+                {isLoadingDiffs ? (
+                  <Spinner size="sm" />
+                ) : (
+                  <span className="text-xs text-muted-foreground font-normal">
+                    ({selectedFiles.size}/{files.length} selected)
+                  </span>
+                )}
+              </Label>
+              {files.length > 0 && (
+                <button
+                  onClick={handleToggleAll}
+                  className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {allSelected ? 'Deselect all' : 'Select all'}
+                </button>
+              )}
+            </div>
+
+            {isLoadingDiffs ? (
+              <div className="flex items-center justify-center py-6 text-muted-foreground border border-border rounded-lg">
+                <Spinner size="sm" className="mr-2" />
+                <span className="text-sm">Loading changes...</span>
+              </div>
+            ) : loadDiffsError ? (
+              <div className="flex flex-col items-center justify-center py-6 gap-2 border border-border rounded-lg">
+                <span className="text-sm text-destructive">Failed to load changes</span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    const cancelled = { current: false };
+                    loadDiffs(cancelled);
+                  }}
+                >
+                  Retry
+                </Button>
+              </div>
+            ) : files.length === 0 ? (
+              <div className="flex items-center justify-center py-6 text-muted-foreground border border-border rounded-lg">
+                <span className="text-sm">No changes detected</span>
+              </div>
+            ) : (
+              <div className="border border-border rounded-lg overflow-hidden max-h-[300px] overflow-y-auto scrollbar-visible">
+                {files.map((file) => {
+                  const isChecked = selectedFiles.has(file.path);
+                  const isExpanded = expandedFile === file.path;
+                  const fileDiff = diffsByFile.get(file.path);
+                  const additions = fileDiff
+                    ? fileDiff.hunks.reduce(
+                        (acc, hunk) => acc + hunk.lines.filter((l) => l.type === 'addition').length,
+                        0
+                      )
+                    : 0;
+                  const deletions = fileDiff
+                    ? fileDiff.hunks.reduce(
+                        (acc, hunk) => acc + hunk.lines.filter((l) => l.type === 'deletion').length,
+                        0
+                      )
+                    : 0;
+
+                  return (
+                    <div key={file.path} className="border-b border-border last:border-b-0">
+                      <div
+                        className={cn(
+                          'flex items-center gap-2 px-3 py-1.5 hover:bg-accent/50 transition-colors group',
+                          isExpanded && 'bg-accent/30'
+                        )}
+                      >
+                        {/* Checkbox */}
+                        <Checkbox
+                          checked={isChecked}
+                          onCheckedChange={() => handleToggleFile(file.path)}
+                          className="flex-shrink-0"
+                        />
+
+                        {/* Clickable file row to show diff */}
+                        <button
+                          onClick={() => handleFileClick(file.path)}
+                          className="flex items-center gap-2 flex-1 min-w-0 text-left"
+                        >
+                          {isExpanded ? (
+                            <ChevronDown className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+                          ) : (
+                            <ChevronRight className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+                          )}
+                          {getFileIcon(file.status)}
+                          <TruncatedFilePath
+                            path={file.path}
+                            className="text-xs font-mono flex-1 text-foreground"
+                          />
+                          <span
+                            className={cn(
+                              'text-[10px] px-1.5 py-0.5 rounded border font-medium flex-shrink-0',
+                              getStatusBadgeColor(file.status)
+                            )}
+                          >
+                            {getStatusLabel(file.status)}
+                          </span>
+                          {additions > 0 && (
+                            <span className="text-[10px] text-green-400 flex-shrink-0">
+                              +{additions}
+                            </span>
+                          )}
+                          {deletions > 0 && (
+                            <span className="text-[10px] text-red-400 flex-shrink-0">
+                              -{deletions}
+                            </span>
+                          )}
+                        </button>
+                      </div>
+
+                      {/* Expanded diff view */}
+                      {isExpanded && fileDiff && (
+                        <div className="bg-background border-t border-border max-h-[200px] overflow-y-auto scrollbar-visible">
+                          {fileDiff.hunks.map((hunk, hunkIndex) => (
+                            <div
+                              key={hunkIndex}
+                              className="border-b border-border-glass last:border-b-0"
+                            >
+                              {hunk.lines.map((line, lineIndex) => (
+                                <DiffLine
+                                  key={lineIndex}
+                                  type={line.type}
+                                  content={line.content}
+                                  lineNumber={line.lineNumber}
+                                />
+                              ))}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                      {isExpanded && !fileDiff && (
+                        <div className="px-4 py-3 text-xs text-muted-foreground bg-background border-t border-border">
+                          {file.status === '?' ? (
+                            <span>New file - diff preview not available</span>
+                          ) : file.status === 'D' ? (
+                            <span>File deleted</span>
+                          ) : (
+                            <span>Diff content not available</span>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          {/* Stash Message */}
+          <div className="space-y-2">
+            <label htmlFor="stash-message" className="text-sm font-medium">
+              Stash message <span className="text-muted-foreground">(optional)</span>
+            </label>
+            <Input
+              id="stash-message"
+              placeholder="e.g., Work in progress on login page"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              disabled={isStashing}
+              autoFocus
+            />
+            <p className="text-xs text-muted-foreground">
+              A descriptive message helps identify this stash later. Press{' '}
+              <kbd className="px-1 py-0.5 text-[10px] bg-muted rounded border">
+                {typeof navigator !== 'undefined' &&
+                (
+                  (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData
+                    ?.platform ||
+                  navigator.platform ||
+                  ''
+                ).includes('Mac')
+                  ? '⌘'
+                  : 'Ctrl'}
+                +Enter
+              </kbd>{' '}
+              to stash.
+            </p>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isStashing}>
+            Cancel
+          </Button>
+          <Button onClick={handleStash} disabled={isStashing || selectedFiles.size === 0}>
+            {isStashing ? (
+              <>
+                <Spinner size="xs" className="mr-2" />
+                Stashing...
+              </>
+            ) : (
+              <>
+                <Archive className="w-4 h-4 mr-2" />
+                Stash
+                {selectedFiles.size > 0 && selectedFiles.size < files.length
+                  ? ` (${selectedFiles.size} file${selectedFiles.size > 1 ? 's' : ''})`
+                  : ' Changes'}
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/stash-confirm-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/stash-confirm-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f88ed5721f511adbd01f1332bdca3267b7fea0f4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/stash-confirm-dialog.tsx
@@ -0,0 +1,185 @@
+/**
+ * Dialog shown when uncommitted changes are detected before a branch operation.
+ * Presents the user with options to:
+ * 1. Stash and proceed - stash changes, perform the operation, then restore
+ * 2. Proceed without stashing - discard local changes and proceed
+ * 3. Cancel - abort the operation
+ *
+ * Displays a summary of affected files (staged, unstaged, untracked) so the
+ * user can make an informed decision.
+ */
+
+import { useCallback } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { AlertTriangle, Archive, XCircle, FileEdit, FilePlus, FileQuestion } from 'lucide-react';
+
+export interface UncommittedChangesInfo {
+  staged: string[];
+  unstaged: string[];
+  untracked: string[];
+  totalFiles: number;
+}
+
+export type StashConfirmAction = 'stash-and-proceed' | 'proceed-without-stash' | 'cancel';
+
+interface StashConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** The branch operation being attempted (e.g., "switch to feature/xyz" or "create feature/xyz") */
+  operationDescription: string;
+  /** Summary of uncommitted changes */
+  changesInfo: UncommittedChangesInfo | null;
+  /** Called with the user's decision */
+  onConfirm: (action: StashConfirmAction) => void;
+  /** Whether the operation is currently in progress */
+  isLoading?: boolean;
+}
+
+export function StashConfirmDialog({
+  open,
+  onOpenChange,
+  operationDescription,
+  changesInfo,
+  onConfirm,
+  isLoading = false,
+}: StashConfirmDialogProps) {
+  const handleStashAndProceed = useCallback(() => {
+    onConfirm('stash-and-proceed');
+  }, [onConfirm]);
+
+  const handleProceedWithoutStash = useCallback(() => {
+    onConfirm('proceed-without-stash');
+  }, [onConfirm]);
+
+  const handleCancel = useCallback(() => {
+    onConfirm('cancel');
+    onOpenChange(false);
+  }, [onConfirm, onOpenChange]);
+
+  if (!changesInfo) return null;
+
+  const { staged, unstaged, untracked } = changesInfo;
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isLoading && onOpenChange(isOpen)}>
+      <DialogContent className="sm:max-w-[520px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="w-5 h-5 text-amber-500" />
+            Uncommitted Changes Detected
+          </DialogTitle>
+          <DialogDescription asChild>
+            <div className="space-y-3">
+              <span className="block">
+                You have uncommitted changes that may be affected when you{' '}
+                <strong>{operationDescription}</strong>.
+              </span>
+
+              {/* File summary */}
+              <div className="space-y-2">
+                {staged.length > 0 && (
+                  <FileSection
+                    icon={<FileEdit className="w-3.5 h-3.5 text-green-500" />}
+                    label="Staged"
+                    files={staged}
+                  />
+                )}
+                {unstaged.length > 0 && (
+                  <FileSection
+                    icon={<XCircle className="w-3.5 h-3.5 text-orange-500" />}
+                    label="Unstaged"
+                    files={unstaged}
+                  />
+                )}
+                {untracked.length > 0 && (
+                  <FileSection
+                    icon={<FilePlus className="w-3.5 h-3.5 text-blue-500" />}
+                    label="Untracked"
+                    files={untracked}
+                  />
+                )}
+              </div>
+
+              <div className="mt-2 p-3 rounded-md bg-muted/50 border border-border">
+                <p className="text-sm text-muted-foreground font-medium mb-2">
+                  Choose how to proceed:
+                </p>
+                <ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
+                  <li>
+                    <strong>Stash & Proceed</strong> &mdash; Saves your changes, performs the
+                    operation, then restores them
+                  </li>
+                  <li>
+                    <strong>Proceed Without Stashing</strong> &mdash; Carries your uncommitted
+                    changes into the new branch as-is
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter className="flex-col sm:flex-row gap-2">
+          <Button variant="outline" onClick={handleCancel} disabled={isLoading}>
+            Cancel
+          </Button>
+          <Button variant="secondary" onClick={handleProceedWithoutStash} disabled={isLoading}>
+            <FileQuestion className="w-4 h-4 mr-2" />
+            Proceed Without Stashing
+          </Button>
+          <Button onClick={handleStashAndProceed} disabled={isLoading}>
+            <Archive className="w-4 h-4 mr-2" />
+            Stash & Proceed
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/** Renders a collapsible section of files with a category label */
+function FileSection({
+  icon,
+  label,
+  files,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  files: string[];
+}) {
+  const maxDisplay = 5;
+  const displayFiles = files.slice(0, maxDisplay);
+  const remaining = files.length - maxDisplay;
+
+  return (
+    <div className="space-y-1">
+      <span className="flex items-center gap-1.5 text-sm font-medium text-foreground">
+        {icon}
+        {label} ({files.length})
+      </span>
+      <div className="border border-border rounded-lg overflow-hidden max-h-[120px] overflow-y-auto scrollbar-visible">
+        {displayFiles.map((file) => (
+          <div
+            key={file}
+            className="flex items-center px-3 py-1 text-xs font-mono border-b border-border last:border-b-0 hover:bg-accent/30"
+          >
+            <span className="truncate">{file}</span>
+          </div>
+        ))}
+        {remaining > 0 && (
+          <div className="px-3 py-1 text-xs text-muted-foreground border-b border-border last:border-b-0">
+            ...and {remaining} more {remaining === 1 ? 'file' : 'files'}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/view-commits-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/view-commits-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b44398708851fd60b10fe95c0ab9aea8013dad5e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/view-commits-dialog.tsx
@@ -0,0 +1,325 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  GitCommit,
+  User,
+  Clock,
+  Copy,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  FileText,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface CommitInfo {
+  hash: string;
+  shortHash: string;
+  author: string;
+  authorEmail: string;
+  date: string;
+  subject: string;
+  body: string;
+  files: string[];
+}
+
+interface ViewCommitsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+}
+
+function formatRelativeDate(dateStr: string): string {
+  if (!dateStr) return 'unknown date';
+  const date = new Date(dateStr);
+  if (isNaN(date.getTime())) return 'unknown date';
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSecs = Math.floor(diffMs / 1000);
+  const diffMins = Math.floor(diffSecs / 60);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  const diffWeeks = Math.floor(diffDays / 7);
+  const diffMonths = Math.floor(diffDays / 30);
+
+  if (diffSecs < 60) return 'just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  if (diffWeeks < 5) return `${diffWeeks}w ago`;
+  if (diffMonths < 12) return `${diffMonths}mo ago`;
+  return date.toLocaleDateString();
+}
+
+function CopyHashButton({ hash }: { hash: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(hash);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast.error('Failed to copy hash');
+    }
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="inline-flex items-center gap-1 font-mono text-[11px] bg-muted hover:bg-muted/80 px-1.5 py-0.5 rounded cursor-pointer transition-colors"
+      title={`Copy full hash: ${hash}`}
+    >
+      {copied ? (
+        <Check className="w-2.5 h-2.5 text-green-500" />
+      ) : (
+        <Copy className="w-2.5 h-2.5 text-muted-foreground" />
+      )}
+      <span className="text-muted-foreground">{hash.slice(0, 7)}</span>
+    </button>
+  );
+}
+
+function CommitEntryItem({
+  commit,
+  index,
+  isLast,
+}: {
+  commit: CommitInfo;
+  index: number;
+  isLast: boolean;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const hasFiles = commit.files && commit.files.length > 0;
+
+  return (
+    <div
+      className={cn('group relative rounded-md transition-colors', index === 0 && 'bg-muted/30')}
+    >
+      <div className="flex gap-3 py-2.5 px-3 hover:bg-muted/50 transition-colors rounded-md">
+        {/* Timeline dot and line */}
+        <div className="flex flex-col items-center pt-1.5 shrink-0">
+          <div
+            className={cn(
+              'w-2 h-2 rounded-full border-2',
+              index === 0 ? 'border-primary bg-primary' : 'border-muted-foreground/40 bg-background'
+            )}
+          />
+          {!isLast && <div className="w-px flex-1 bg-border mt-1" />}
+        </div>
+
+        {/* Commit content */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            <p className="text-sm font-medium leading-snug break-words">{commit.subject}</p>
+            <CopyHashButton hash={commit.hash} />
+          </div>
+          {commit.body && (
+            <p className="text-xs text-muted-foreground mt-1 whitespace-pre-wrap break-words line-clamp-3">
+              {commit.body}
+            </p>
+          )}
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1.5 text-xs text-muted-foreground">
+            <span className="inline-flex items-center gap-1">
+              <User className="w-3 h-3" />
+              {commit.author}
+            </span>
+            <span className="inline-flex items-center gap-1">
+              <Clock className="w-3 h-3" />
+              <time dateTime={commit.date} title={new Date(commit.date).toLocaleString()}>
+                {formatRelativeDate(commit.date)}
+              </time>
+            </span>
+            {hasFiles && (
+              <button
+                onClick={() => setExpanded(!expanded)}
+                className="inline-flex items-center gap-1 hover:text-foreground transition-colors cursor-pointer"
+              >
+                {expanded ? (
+                  <ChevronDown className="w-3 h-3" />
+                ) : (
+                  <ChevronRight className="w-3 h-3" />
+                )}
+                <FileText className="w-3 h-3" />
+                {commit.files.length} file{commit.files.length !== 1 ? 's' : ''}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Expanded file list */}
+      {expanded && hasFiles && (
+        <div className="border-t px-3 py-2 bg-muted/30">
+          <div className="space-y-0.5">
+            {commit.files.map((file) => (
+              <div
+                key={file}
+                className="flex items-center gap-2 text-xs text-muted-foreground py-0.5"
+              >
+                <FileText className="w-3 h-3 shrink-0" />
+                <span className="font-mono break-all">{file}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const INITIAL_COMMIT_LIMIT = 30;
+const LOAD_MORE_INCREMENT = 30;
+const MAX_COMMIT_LIMIT = 100;
+
+export function ViewCommitsDialog({ open, onOpenChange, worktree }: ViewCommitsDialogProps) {
+  const [commits, setCommits] = useState<CommitInfo[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [limit, setLimit] = useState(INITIAL_COMMIT_LIMIT);
+  const [hasMore, setHasMore] = useState(false);
+
+  const fetchCommits = useCallback(
+    async (fetchLimit: number, isLoadMore = false) => {
+      if (isLoadMore) {
+        setIsLoadingMore(true);
+      } else {
+        setIsLoading(true);
+        setError(null);
+        setCommits([]);
+      }
+
+      try {
+        const api = getHttpApiClient();
+        const result = await api.worktree.getCommitLog(worktree!.path, fetchLimit);
+
+        if (result.success && result.result) {
+          // Ensure each commit has a files array (backwards compat if server hasn't been rebuilt)
+          const fetchedCommits = result.result.commits.map((c: CommitInfo) => ({
+            ...c,
+            files: c.files || [],
+          }));
+          setCommits(fetchedCommits);
+          // If we got back exactly as many commits as we requested, there may be more
+          setHasMore(fetchedCommits.length === fetchLimit && fetchLimit < MAX_COMMIT_LIMIT);
+        } else {
+          setError(result.error || 'Failed to load commits');
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load commits');
+      } finally {
+        setIsLoading(false);
+        setIsLoadingMore(false);
+      }
+    },
+    [worktree]
+  );
+
+  useEffect(() => {
+    if (!open || !worktree) return;
+    setLimit(INITIAL_COMMIT_LIMIT);
+    setHasMore(false);
+    fetchCommits(INITIAL_COMMIT_LIMIT);
+  }, [open, worktree, fetchCommits]);
+
+  const handleLoadMore = () => {
+    const newLimit = Math.min(limit + LOAD_MORE_INCREMENT, MAX_COMMIT_LIMIT);
+    setLimit(newLimit);
+    fetchCommits(newLimit, true);
+  };
+
+  if (!worktree) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-full h-full max-w-full max-h-full sm:w-[90vw] sm:max-w-[640px] sm:max-h-[85dvh] sm:h-auto sm:rounded-xl rounded-none flex flex-col dialog-fullscreen-mobile">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitCommit className="w-5 h-5" />
+            Commit History
+          </DialogTitle>
+          <DialogDescription>
+            Recent commits on{' '}
+            <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 min-h-0 sm:min-h-[400px] sm:max-h-[60vh] overflow-y-auto scrollbar-visible -mx-6 -mb-6">
+          <div className="h-full px-6 pb-6">
+            {isLoading && (
+              <div className="flex items-center justify-center py-12">
+                <Spinner size="md" />
+                <span className="ml-2 text-sm text-muted-foreground">Loading commits...</span>
+              </div>
+            )}
+
+            {error && (
+              <div className="flex items-center justify-center py-12">
+                <p className="text-sm text-destructive">{error}</p>
+              </div>
+            )}
+
+            {!isLoading && !error && commits.length === 0 && (
+              <div className="flex items-center justify-center py-12">
+                <p className="text-sm text-muted-foreground">No commits found</p>
+              </div>
+            )}
+
+            {!isLoading && !error && commits.length > 0 && (
+              <div className="space-y-0.5 mt-2">
+                {commits.map((commit, index) => (
+                  <CommitEntryItem
+                    key={commit.hash}
+                    commit={commit}
+                    index={index}
+                    isLast={index === commits.length - 1 && !hasMore}
+                  />
+                ))}
+                {hasMore && (
+                  <div className="flex justify-center pt-3 pb-1">
+                    <button
+                      onClick={handleLoadMore}
+                      disabled={isLoadingMore}
+                      className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer px-4 py-2 rounded-md hover:bg-muted/50"
+                    >
+                      {isLoadingMore ? (
+                        <>
+                          <Spinner size="sm" />
+                          Loading more commits...
+                        </>
+                      ) : (
+                        <>
+                          <ChevronDown className="w-4 h-4" />
+                          Load more commits
+                        </>
+                      )}
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/view-stashes-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/view-stashes-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..73dbebee116ea879ae9b91584ca447834aae432f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/view-stashes-dialog.tsx
@@ -0,0 +1,435 @@
+import { useEffect, useState, useCallback } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import {
+  Archive,
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  FileText,
+  GitBranch,
+  Play,
+  Trash2,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import { StashApplyConflictDialog } from './stash-apply-conflict-dialog';
+import type { StashApplyConflictInfo } from '../worktree-panel/types';
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface StashEntry {
+  index: number;
+  message: string;
+  branch: string;
+  date: string;
+  files: string[];
+}
+
+interface ViewStashesDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  onStashApplied?: () => void;
+  onStashApplyConflict?: (conflictInfo: StashApplyConflictInfo) => void;
+}
+
+function formatRelativeDate(dateStr: string): string {
+  const date = new Date(dateStr);
+  if (isNaN(date.getTime())) return 'Unknown date';
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSecs = Math.floor(diffMs / 1000);
+  const diffMins = Math.floor(diffSecs / 60);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  const diffWeeks = Math.floor(diffDays / 7);
+  const diffMonths = Math.floor(diffDays / 30);
+
+  if (diffSecs < 60) return 'just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  if (diffWeeks < 5) return `${diffWeeks}w ago`;
+  if (diffMonths < 12) return `${diffMonths}mo ago`;
+  return date.toLocaleDateString();
+}
+
+function StashEntryItem({
+  stash,
+  onApply,
+  onPop,
+  onDrop,
+  isApplying,
+  isDropping,
+}: {
+  stash: StashEntry;
+  onApply: (index: number) => void;
+  onPop: (index: number) => void;
+  onDrop: (index: number) => void;
+  isApplying: boolean;
+  isDropping: boolean;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const isBusy = isApplying || isDropping;
+  const hasFiles = stash.files && stash.files.length > 0;
+
+  // Clean up the stash message for display
+  const displayMessage =
+    stash.message.replace(/^(WIP on|On) [^:]+:\s*[a-f0-9]+\s*/, '').trim() || stash.message;
+
+  return (
+    <div
+      className={cn(
+        'group relative rounded-md border bg-card transition-colors',
+        'hover:border-primary/30'
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-start gap-3 p-3">
+        {/* Stash icon (static) */}
+        <div className="flex items-center pt-0.5 text-muted-foreground">
+          <Archive className="w-3.5 h-3.5" />
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            <div className="min-w-0">
+              <p className="text-sm font-medium leading-snug break-words">{displayMessage}</p>
+              <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1.5 text-xs text-muted-foreground">
+                <span className="inline-flex items-center gap-1 font-mono bg-muted px-1.5 py-0.5 rounded text-[10px]">
+                  stash@{'{' + stash.index + '}'}
+                </span>
+                {stash.branch && (
+                  <span className="inline-flex items-center gap-1">
+                    <GitBranch className="w-3 h-3" />
+                    {stash.branch}
+                  </span>
+                )}
+                <span className="inline-flex items-center gap-1">
+                  <Clock className="w-3 h-3" />
+                  <time
+                    dateTime={stash.date}
+                    title={
+                      !isNaN(new Date(stash.date).getTime())
+                        ? new Date(stash.date).toLocaleString()
+                        : stash.date
+                    }
+                  >
+                    {formatRelativeDate(stash.date)}
+                  </time>
+                </span>
+                {hasFiles && (
+                  <button
+                    onClick={() => setExpanded(!expanded)}
+                    className="inline-flex items-center gap-1 hover:text-foreground transition-colors cursor-pointer"
+                    aria-expanded={expanded}
+                    aria-label={`${expanded ? 'Collapse' : 'Expand'} file list, ${stash.files.length} file${stash.files.length !== 1 ? 's' : ''}`}
+                  >
+                    {expanded ? (
+                      <ChevronDown className="w-3 h-3" />
+                    ) : (
+                      <ChevronRight className="w-3 h-3" />
+                    )}
+                    <FileText className="w-3 h-3" />
+                    {stash.files.length} file{stash.files.length !== 1 ? 's' : ''}
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {/* Action buttons */}
+            <div className="flex items-center gap-1 shrink-0">
+              <Button
+                size="sm"
+                variant="outline"
+                className="h-7 text-xs px-2"
+                onClick={() => onApply(stash.index)}
+                disabled={isBusy}
+                title="Apply stash (keep in stash list)"
+              >
+                {isApplying ? <Spinner size="xs" /> : <Play className="w-3 h-3 mr-1" />}
+                Apply
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                className="h-7 text-xs px-2"
+                onClick={() => onPop(stash.index)}
+                disabled={isBusy}
+                title="Pop stash (apply and remove from stash list)"
+              >
+                {isApplying ? <Spinner size="xs" /> : 'Pop'}
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                className="h-7 w-7 p-0 text-destructive hover:text-destructive"
+                onClick={() => onDrop(stash.index)}
+                disabled={isBusy}
+                title="Delete this stash"
+              >
+                {isDropping ? <Spinner size="xs" /> : <Trash2 className="w-3 h-3" />}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Expanded file list */}
+      {expanded && hasFiles && (
+        <div className="border-t px-3 py-2 bg-muted/30">
+          <div className="space-y-0.5">
+            {stash.files.map((file) => (
+              <div
+                key={file}
+                className="flex items-center gap-2 text-xs text-muted-foreground py-0.5"
+              >
+                <FileText className="w-3 h-3 shrink-0" />
+                <span className="font-mono break-all">{file}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ViewStashesDialog({
+  open,
+  onOpenChange,
+  worktree,
+  onStashApplied,
+  onStashApplyConflict,
+}: ViewStashesDialogProps) {
+  const [stashes, setStashes] = useState<StashEntry[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [applyingIndex, setApplyingIndex] = useState<number | null>(null);
+  const [droppingIndex, setDroppingIndex] = useState<number | null>(null);
+  const [conflictDialogOpen, setConflictDialogOpen] = useState(false);
+  const [conflictInfo, setConflictInfo] = useState<StashApplyConflictInfo | null>(null);
+
+  const fetchStashes = useCallback(async () => {
+    if (!worktree) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const api = getHttpApiClient();
+      const result = await api.worktree.stashList(worktree.path);
+
+      if (result.success && result.result) {
+        setStashes(result.result.stashes);
+      } else {
+        setError(result.error || 'Failed to load stashes');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load stashes');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [worktree]);
+
+  useEffect(() => {
+    if (open && worktree) {
+      fetchStashes();
+    }
+    if (!open) {
+      setStashes([]);
+      setError(null);
+    }
+  }, [open, worktree, fetchStashes]);
+
+  const handleApply = async (stashIndex: number) => {
+    if (!worktree) return;
+
+    setApplyingIndex(stashIndex);
+    try {
+      const api = getHttpApiClient();
+      const result = await api.worktree.stashApply(worktree.path, stashIndex, false);
+
+      if (result.success && result.result) {
+        if (result.result.hasConflicts) {
+          const info: StashApplyConflictInfo = {
+            worktreePath: worktree.path,
+            branchName: worktree.branch,
+            stashRef: `stash@{${stashIndex}}`,
+            operation: 'apply',
+            conflictFiles: result.result.conflictFiles || [],
+          };
+          setConflictInfo(info);
+          setConflictDialogOpen(true);
+          onStashApplied?.();
+        } else {
+          toast.success('Stash applied');
+          onStashApplied?.();
+        }
+      } else {
+        toast.error('Failed to apply stash', {
+          description: result.error || 'Unknown error',
+        });
+      }
+    } catch (err) {
+      toast.error('Failed to apply stash', {
+        description: err instanceof Error ? err.message : 'Unknown error',
+      });
+    } finally {
+      setApplyingIndex(null);
+    }
+  };
+
+  const handlePop = async (stashIndex: number) => {
+    if (!worktree) return;
+
+    setApplyingIndex(stashIndex);
+    try {
+      const api = getHttpApiClient();
+      const result = await api.worktree.stashApply(worktree.path, stashIndex, true);
+
+      if (result.success && result.result) {
+        if (result.result.hasConflicts) {
+          const info: StashApplyConflictInfo = {
+            worktreePath: worktree.path,
+            branchName: worktree.branch,
+            stashRef: `stash@{${stashIndex}}`,
+            operation: 'pop',
+            conflictFiles: result.result.conflictFiles || [],
+          };
+          setConflictInfo(info);
+          setConflictDialogOpen(true);
+        } else {
+          toast.success('Stash popped', {
+            description: 'Changes applied and stash removed.',
+          });
+        }
+        // Refresh the stash list since the stash was removed
+        await fetchStashes();
+        onStashApplied?.();
+      } else {
+        toast.error('Failed to pop stash', {
+          description: result.error || 'Unknown error',
+        });
+      }
+    } catch (err) {
+      toast.error('Failed to pop stash', {
+        description: err instanceof Error ? err.message : 'Unknown error',
+      });
+    } finally {
+      setApplyingIndex(null);
+    }
+  };
+
+  const handleDrop = async (stashIndex: number) => {
+    if (!worktree) return;
+
+    setDroppingIndex(stashIndex);
+    try {
+      const api = getHttpApiClient();
+      const result = await api.worktree.stashDrop(worktree.path, stashIndex);
+
+      if (result.success) {
+        toast.success('Stash deleted');
+        // Refresh the stash list
+        await fetchStashes();
+      } else {
+        toast.error('Failed to delete stash', {
+          description: result.error || 'Unknown error',
+        });
+      }
+    } catch (err) {
+      toast.error('Failed to delete stash', {
+        description: err instanceof Error ? err.message : 'Unknown error',
+      });
+    } finally {
+      setDroppingIndex(null);
+    }
+  };
+
+  if (!worktree) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-full h-full max-w-full max-h-full sm:w-[90vw] sm:max-w-[640px] sm:max-h-[85dvh] sm:h-auto sm:rounded-xl rounded-none flex flex-col dialog-fullscreen-mobile">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Archive className="w-5 h-5" />
+            Stashes
+          </DialogTitle>
+          <DialogDescription>
+            Stashed changes in{' '}
+            <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 sm:min-h-[300px] sm:max-h-[60vh] overflow-y-auto scrollbar-visible -mx-6 -mb-6">
+          <div className="h-full px-6 pb-6">
+            {isLoading && (
+              <div className="flex items-center justify-center py-12">
+                <Spinner size="md" />
+                <span className="ml-2 text-sm text-muted-foreground">Loading stashes...</span>
+              </div>
+            )}
+
+            {error && (
+              <div className="flex items-center justify-center py-12">
+                <p className="text-sm text-destructive">{error}</p>
+              </div>
+            )}
+
+            {!isLoading && !error && stashes.length === 0 && (
+              <div className="flex flex-col items-center justify-center py-12 gap-2">
+                <Archive className="w-8 h-8 text-muted-foreground/50" />
+                <p className="text-sm text-muted-foreground">No stashes found</p>
+                <p className="text-xs text-muted-foreground">
+                  Use &quot;Stash Changes&quot; to save your uncommitted changes
+                </p>
+              </div>
+            )}
+
+            {!isLoading && !error && stashes.length > 0 && (
+              <div className="space-y-2 mt-2">
+                {stashes.map((stash) => (
+                  <StashEntryItem
+                    key={stash.index}
+                    stash={stash}
+                    onApply={handleApply}
+                    onPop={handlePop}
+                    onDrop={handleDrop}
+                    isApplying={applyingIndex === stash.index}
+                    isDropping={droppingIndex === stash.index}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+
+      {/* Stash Apply Conflict Resolution Dialog */}
+      <StashApplyConflictDialog
+        open={conflictDialogOpen}
+        onOpenChange={setConflictDialogOpen}
+        conflictInfo={conflictInfo}
+        onResolveWithAI={onStashApplyConflict}
+      />
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/view-worktree-changes-dialog.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/view-worktree-changes-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f57dc871630d6bf972c41bdca58693506de430f9
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/view-worktree-changes-dialog.tsx
@@ -0,0 +1,73 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { FileText } from 'lucide-react';
+import { GitDiffPanel } from '@/components/ui/git-diff-panel';
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+interface ViewWorktreeChangesDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  worktree: WorktreeInfo | null;
+  projectPath: string;
+}
+
+export function ViewWorktreeChangesDialog({
+  open,
+  onOpenChange,
+  worktree,
+  projectPath,
+}: ViewWorktreeChangesDialogProps) {
+  if (!worktree) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-full h-full max-w-full max-h-full sm:w-[90vw] sm:max-w-[900px] sm:max-h-[85dvh] sm:h-auto sm:rounded-xl rounded-none flex flex-col dialog-fullscreen-mobile">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <FileText className="w-5 h-5" />
+            View Changes
+          </DialogTitle>
+          <DialogDescription>
+            Changes in the{' '}
+            <code className="font-mono bg-muted px-1 rounded">{worktree.branch}</code> worktree.
+            {worktree.changedFilesCount !== undefined && worktree.changedFilesCount > 0 && (
+              <span className="ml-1">
+                ({worktree.changedFilesCount} file
+                {worktree.changedFilesCount > 1 ? 's' : ''} changed)
+              </span>
+            )}
+            <span className="ml-1 text-xs text-muted-foreground">
+              — Use the Stage/Unstage buttons to prepare files for commit.
+            </span>
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 min-h-0 overflow-y-auto scrollbar-visible -mx-6 -mb-6">
+          <div className="h-full px-6 pb-6">
+            <GitDiffPanel
+              projectPath={projectPath}
+              featureId={worktree.branch}
+              useWorktrees={true}
+              compact={false}
+              enableStaging={true}
+              worktreePath={worktree.path}
+              className="mt-4"
+            />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/dialogs/worktree-settings-popover.tsx b/temp_repo/apps/ui/src/components/views/board-view/dialogs/worktree-settings-popover.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..442cdf620bb4158fc49d5dc3e51b713193471d15
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/dialogs/worktree-settings-popover.tsx
@@ -0,0 +1,61 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { GitBranch, Settings2 } from 'lucide-react';
+
+interface WorktreeSettingsPopoverProps {
+  addFeatureUseSelectedWorktreeBranch: boolean;
+  onAddFeatureUseSelectedWorktreeBranchChange: (value: boolean) => void;
+}
+
+export function WorktreeSettingsPopover({
+  addFeatureUseSelectedWorktreeBranch,
+  onAddFeatureUseSelectedWorktreeBranchChange,
+}: WorktreeSettingsPopoverProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          className="p-1 rounded hover:bg-accent/50 transition-colors"
+          title="Worktree Settings"
+          data-testid="worktree-settings-button"
+        >
+          <Settings2 className="w-4 h-4 text-muted-foreground" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-72" align="end" sideOffset={8}>
+        <div className="space-y-3">
+          <div>
+            <h4 className="font-medium text-sm mb-1">Worktree Settings</h4>
+            <p className="text-xs text-muted-foreground">
+              Configure how worktrees affect feature creation.
+            </p>
+          </div>
+
+          <div className="flex items-center justify-between gap-3 p-2 rounded-md bg-secondary/50">
+            <div className="flex items-center gap-2 flex-1 min-w-0">
+              <GitBranch className="w-4 h-4 text-brand-500 shrink-0" />
+              <Label
+                htmlFor="worktree-branch-toggle"
+                className="text-xs font-medium cursor-pointer"
+              >
+                Default to worktree mode
+              </Label>
+            </div>
+            <Switch
+              id="worktree-branch-toggle"
+              checked={addFeatureUseSelectedWorktreeBranch}
+              onCheckedChange={onAddFeatureUseSelectedWorktreeBranchChange}
+              data-testid="worktree-branch-toggle"
+            />
+          </div>
+
+          <p className="text-[10px] text-muted-foreground leading-relaxed">
+            New features will automatically use isolated worktrees, keeping changes separate from
+            your main branch until you're ready to merge.
+          </p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/header-mobile-menu.tsx b/temp_repo/apps/ui/src/components/views/board-view/header-mobile-menu.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3eed7c0e7f2776026975293073a487661d3f7644
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/header-mobile-menu.tsx
@@ -0,0 +1,188 @@
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { Slider } from '@/components/ui/slider';
+import {
+  HeaderActionsPanel,
+  HeaderActionsPanelTrigger,
+} from '@/components/ui/header-actions-panel';
+import { Bot, Wand2, GitBranch, Zap, FastForward } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { MobileUsageBar } from './mobile-usage-bar';
+
+interface HeaderMobileMenuProps {
+  // Panel visibility
+  isOpen: boolean;
+  onToggle: () => void;
+  // Worktree panel visibility
+  isWorktreePanelVisible: boolean;
+  onWorktreePanelToggle: (visible: boolean) => void;
+  // Concurrency control
+  maxConcurrency: number;
+  runningAgentsCount: number;
+  onConcurrencyChange: (value: number) => void;
+  // Auto mode
+  isAutoModeRunning: boolean;
+  onAutoModeToggle: (enabled: boolean) => void;
+  skipVerificationInAutoMode: boolean;
+  onSkipVerificationChange: (value: boolean) => void;
+  // Plan button
+  onOpenPlanDialog: () => void;
+  // Usage bar visibility
+  showClaudeUsage: boolean;
+  showCodexUsage: boolean;
+  showZaiUsage?: boolean;
+  showGeminiUsage?: boolean;
+}
+
+export function HeaderMobileMenu({
+  isOpen,
+  onToggle,
+  isWorktreePanelVisible,
+  onWorktreePanelToggle,
+  maxConcurrency,
+  runningAgentsCount,
+  onConcurrencyChange,
+  isAutoModeRunning,
+  onAutoModeToggle,
+  skipVerificationInAutoMode,
+  onSkipVerificationChange,
+  onOpenPlanDialog,
+  showClaudeUsage,
+  showCodexUsage,
+  showZaiUsage = false,
+  showGeminiUsage = false,
+}: HeaderMobileMenuProps) {
+  return (
+    <>
+      <HeaderActionsPanelTrigger isOpen={isOpen} onToggle={onToggle} />
+      <HeaderActionsPanel isOpen={isOpen} onClose={onToggle} title="Board Controls">
+        {/* Usage Bar - show if any provider is authenticated */}
+        {(showClaudeUsage || showCodexUsage || showZaiUsage || showGeminiUsage) && (
+          <div className="space-y-2">
+            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+              Usage
+            </span>
+            <MobileUsageBar
+              showClaudeUsage={showClaudeUsage}
+              showCodexUsage={showCodexUsage}
+              showZaiUsage={showZaiUsage}
+              showGeminiUsage={showGeminiUsage}
+            />
+          </div>
+        )}
+
+        {/* Controls Section */}
+        <div className="space-y-1">
+          <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+            Controls
+          </span>
+
+          {/* Auto Mode Section */}
+          <div className="rounded-lg border border-border/50 overflow-hidden">
+            {/* Auto Mode Toggle */}
+            <div
+              className="flex items-center justify-between p-3 cursor-pointer hover:bg-accent/50 transition-colors"
+              onClick={() => onAutoModeToggle(!isAutoModeRunning)}
+              data-testid="mobile-auto-mode-toggle-container"
+            >
+              <div className="flex items-center gap-2">
+                <Zap
+                  className={cn(
+                    'w-4 h-4',
+                    isAutoModeRunning ? 'text-yellow-500' : 'text-muted-foreground'
+                  )}
+                />
+                <span className="text-sm font-medium">Auto Mode</span>
+              </div>
+              <Switch
+                id="mobile-auto-mode-toggle"
+                checked={isAutoModeRunning}
+                onCheckedChange={onAutoModeToggle}
+                onClick={(e) => e.stopPropagation()}
+                data-testid="mobile-auto-mode-toggle"
+              />
+            </div>
+
+            {/* Skip Verification Toggle */}
+            <div
+              className="flex items-center justify-between p-3 pl-9 cursor-pointer hover:bg-accent/50 border-t border-border/30 transition-colors"
+              onClick={() => onSkipVerificationChange(!skipVerificationInAutoMode)}
+              data-testid="mobile-skip-verification-toggle-container"
+            >
+              <div className="flex items-center gap-2">
+                <FastForward className="w-4 h-4 text-muted-foreground" />
+                <span className="text-sm text-muted-foreground">Skip Verification</span>
+              </div>
+              <Switch
+                id="mobile-skip-verification-toggle"
+                checked={skipVerificationInAutoMode}
+                onCheckedChange={onSkipVerificationChange}
+                onClick={(e) => e.stopPropagation()}
+                data-testid="mobile-skip-verification-toggle"
+              />
+            </div>
+
+            {/* Concurrency Control */}
+            <div
+              className="p-3 pl-9 border-t border-border/30"
+              data-testid="mobile-concurrency-control"
+            >
+              <div className="flex items-center gap-2 mb-3">
+                <Bot className="w-4 h-4 text-muted-foreground" />
+                <span className="text-sm text-muted-foreground">Max Agents</span>
+                <span
+                  className="text-sm text-muted-foreground ml-auto"
+                  data-testid="mobile-concurrency-value"
+                >
+                  {runningAgentsCount}/{maxConcurrency}
+                </span>
+              </div>
+              <Slider
+                value={[maxConcurrency]}
+                onValueChange={(value) => onConcurrencyChange(value[0])}
+                min={1}
+                max={10}
+                step={1}
+                className="w-full"
+                data-testid="mobile-concurrency-slider"
+              />
+            </div>
+          </div>
+
+          {/* Worktrees Toggle */}
+          <div
+            className="flex items-center justify-between p-3 cursor-pointer hover:bg-accent/50 rounded-lg border border-border/50 transition-colors"
+            onClick={() => onWorktreePanelToggle(!isWorktreePanelVisible)}
+            data-testid="mobile-worktrees-toggle-container"
+          >
+            <div className="flex items-center gap-2">
+              <GitBranch className="w-4 h-4 text-muted-foreground" />
+              <span className="text-sm font-medium">Worktree Bar</span>
+            </div>
+            <Switch
+              id="mobile-worktrees-toggle"
+              checked={isWorktreePanelVisible}
+              onCheckedChange={onWorktreePanelToggle}
+              onClick={(e) => e.stopPropagation()}
+              data-testid="mobile-worktrees-toggle"
+            />
+          </div>
+
+          {/* Plan Button */}
+          <Button
+            variant="outline"
+            className="w-full justify-start"
+            onClick={() => {
+              onOpenPlanDialog();
+              onToggle();
+            }}
+            data-testid="mobile-plan-button"
+          >
+            <Wand2 className="w-4 h-4 mr-2" />
+            Plan
+          </Button>
+        </div>
+      </HeaderActionsPanel>
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/hooks/index.ts b/temp_repo/apps/ui/src/components/views/board-view/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c4c61a14ba18721bf68feda2b36fa6133a7dece1
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/hooks/index.ts
@@ -0,0 +1,11 @@
+export { useBoardFeatures } from './use-board-features';
+export { useBoardDragDrop } from './use-board-drag-drop';
+export { useBoardActions } from './use-board-actions';
+export { useBoardKeyboardShortcuts } from './use-board-keyboard-shortcuts';
+export { useBoardColumnFeatures } from './use-board-column-features';
+export { useBoardEffects } from './use-board-effects';
+export { useBoardBackground } from './use-board-background';
+export { useBoardPersistence } from './use-board-persistence';
+export { useFollowUpState } from './use-follow-up-state';
+export { useSelectionMode, type SelectionTarget } from './use-selection-mode';
+export { useListViewState } from './use-list-view-state';
diff --git a/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-actions.ts b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-actions.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2188b9f2a8c5dab1c67b1b111cbcbc956c763aae
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-actions.ts
@@ -0,0 +1,1357 @@
+// @ts-nocheck - feature update logic with partial updates and image/file handling
+import { useCallback } from 'react';
+import {
+  Feature,
+  FeatureImage,
+  ModelAlias,
+  ThinkingLevel,
+  PlanningMode,
+  useAppStore,
+} from '@/store/app-store';
+import type { ReasoningEffort } from '@automaker/types';
+import { FeatureImagePath as DescriptionImagePath } from '@/components/ui/description-image-dropzone';
+import { getElectronAPI } from '@/lib/electron';
+import { isConnectionError, handleServerOffline, getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import { useVerifyFeature, useResumeFeature } from '@/hooks/mutations';
+import { truncateDescription } from '@/lib/utils';
+import { getBlockingDependencies } from '@automaker/dependency-resolver';
+import { createLogger } from '@automaker/utils/logger';
+import {
+  markFeatureTransitioning,
+  unmarkFeatureTransitioning,
+} from '@/lib/feature-transition-state';
+
+const logger = createLogger('BoardActions');
+
+const MAX_DUPLICATES = 50;
+
+function normalizeFeatureBranchName(branchName?: string | null): string | undefined {
+  if (!branchName) return undefined;
+  let normalized = branchName.trim();
+  if (!normalized) return undefined;
+
+  normalized = normalized.replace(/^refs\/heads\//, '');
+  normalized = normalized.replace(/^refs\/remotes\/[^/]+\//, '');
+  normalized = normalized.replace(/^(origin|upstream)\//, '');
+
+  return normalized || undefined;
+}
+
+/**
+ * Removes a running task from all worktrees for a given project.
+ * Used when stopping features to ensure the task is removed from all worktree contexts,
+ * not just the current one.
+ */
+function removeRunningTaskFromAllWorktrees(projectId: string, featureId: string): void {
+  const store = useAppStore.getState();
+  const prefix = `${projectId}::`;
+  for (const [key, worktreeState] of Object.entries(store.autoModeByWorktree)) {
+    if (key.startsWith(prefix) && worktreeState.runningTasks?.includes(featureId)) {
+      const branchPart = key.slice(prefix.length);
+      const branch = branchPart === '__main__' ? null : branchPart;
+      store.removeRunningTask(projectId, branch, featureId);
+    }
+  }
+}
+
+interface UseBoardActionsProps {
+  currentProject: { path: string; id: string } | null;
+  features: Feature[];
+  runningAutoTasks: string[];
+  loadFeatures: () => Promise<void>;
+  persistFeatureCreate: (feature: Feature) => Promise<void>;
+  persistFeatureUpdate: (
+    featureId: string,
+    updates: Partial<Feature>,
+    descriptionHistorySource?: 'enhance' | 'edit',
+    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer',
+    preEnhancementDescription?: string
+  ) => Promise<void>;
+  persistFeatureDelete: (featureId: string) => Promise<void>;
+  saveCategory: (category: string) => Promise<void>;
+  setEditingFeature: (feature: Feature | null) => void;
+  setShowOutputModal: (show: boolean) => void;
+  setOutputFeature: (feature: Feature | null) => void;
+  followUpFeature: Feature | null;
+  followUpPrompt: string;
+  followUpImagePaths: DescriptionImagePath[];
+  setFollowUpFeature: (feature: Feature | null) => void;
+  setFollowUpPrompt: (prompt: string) => void;
+  setFollowUpImagePaths: (paths: DescriptionImagePath[]) => void;
+  setFollowUpPreviewMap: (map: Map<string, string>) => void;
+  setShowFollowUpDialog: (show: boolean) => void;
+  inProgressFeaturesForShortcuts: Feature[];
+  outputFeature: Feature | null;
+  projectPath: string | null;
+  onWorktreeCreated?: () => void;
+  onWorktreeAutoSelect?: (worktree: { path: string; branch: string }) => void;
+  currentWorktreeBranch: string | null; // Branch name of the selected worktree for filtering
+  stopFeature: (featureId: string) => Promise<boolean>; // Passed from parent's useAutoMode to avoid duplicate subscription
+}
+
+export function useBoardActions({
+  currentProject,
+  features,
+  runningAutoTasks,
+  loadFeatures,
+  persistFeatureCreate,
+  persistFeatureUpdate,
+  persistFeatureDelete,
+  saveCategory,
+  setEditingFeature,
+  setShowOutputModal,
+  setOutputFeature,
+  followUpFeature,
+  followUpPrompt,
+  followUpImagePaths,
+  setFollowUpFeature,
+  setFollowUpPrompt,
+  setFollowUpImagePaths,
+  setFollowUpPreviewMap,
+  setShowFollowUpDialog,
+  inProgressFeaturesForShortcuts,
+  outputFeature,
+  projectPath,
+  onWorktreeCreated,
+  onWorktreeAutoSelect,
+  currentWorktreeBranch,
+  stopFeature,
+}: UseBoardActionsProps) {
+  // IMPORTANT: Use individual selectors instead of bare useAppStore() to prevent
+  // subscribing to the entire store. Bare useAppStore() causes the host component
+  // (BoardView) to re-render on EVERY store change, which cascades through effects
+  // and triggers React error #185 (maximum update depth exceeded).
+  const addFeature = useAppStore((s) => s.addFeature);
+  const updateFeature = useAppStore((s) => s.updateFeature);
+  const removeFeature = useAppStore((s) => s.removeFeature);
+  const worktreesEnabled = useAppStore((s) => s.useWorktrees);
+  const enableDependencyBlocking = useAppStore((s) => s.enableDependencyBlocking);
+  const skipVerificationInAutoMode = useAppStore((s) => s.skipVerificationInAutoMode);
+  const isPrimaryWorktreeBranch = useAppStore((s) => s.isPrimaryWorktreeBranch);
+  const getPrimaryWorktreeBranch = useAppStore((s) => s.getPrimaryWorktreeBranch);
+
+  // React Query mutations for feature operations
+  const verifyFeatureMutation = useVerifyFeature(currentProject?.path ?? '');
+  const resumeFeatureMutation = useResumeFeature(currentProject?.path ?? '');
+
+  // Worktrees are created when adding/editing features with a branch name
+  // This ensures the worktree exists before the feature starts execution
+
+  const handleAddFeature = useCallback(
+    async (featureData: {
+      title: string;
+      category: string;
+      description: string;
+      images: FeatureImage[];
+      imagePaths: DescriptionImagePath[];
+      skipTests: boolean;
+      model: ModelAlias;
+      thinkingLevel: ThinkingLevel;
+      reasoningEffort?: ReasoningEffort;
+      providerId?: string;
+      branchName: string;
+      priority: number;
+      planningMode: PlanningMode;
+      requirePlanApproval: boolean;
+      dependencies?: string[];
+      childDependencies?: string[]; // Feature IDs that should depend on this feature
+      workMode?: 'current' | 'auto' | 'custom';
+      initialStatus?: 'backlog' | 'in_progress'; // Skip backlog flash when creating & starting immediately
+    }) => {
+      const workMode = featureData.workMode || 'current';
+
+      // For auto worktree mode, we need a title for the branch name.
+      // If no title provided, generate one from the description first.
+      let titleForBranch = featureData.title;
+      let titleWasGenerated = false;
+
+      if (workMode === 'auto' && !featureData.title.trim() && featureData.description.trim()) {
+        // Generate title first so we can use it for the branch name
+        const api = getElectronAPI();
+        if (api?.features?.generateTitle) {
+          try {
+            const result = await api.features.generateTitle(featureData.description);
+            if (result.success && result.title) {
+              titleForBranch = result.title;
+              titleWasGenerated = true;
+            }
+          } catch (error) {
+            logger.error('Error generating title for branch name:', error);
+          }
+        }
+        // If title generation failed, fall back to first part of description
+        if (!titleForBranch.trim()) {
+          titleForBranch = featureData.description.substring(0, 60);
+        }
+      }
+
+      // Determine final branch name based on work mode:
+      // - 'current': Use current worktree's branch (or undefined if on main)
+      // - 'auto': Auto-generate branch name based on feature title
+      // - 'custom': Use the provided branch name
+      let finalBranchName: string | undefined;
+
+      if (workMode === 'current') {
+        // Work directly on current branch - use the current worktree's branch if not on main
+        // This ensures features created on a non-main worktree are associated with that worktree
+        finalBranchName = normalizeFeatureBranchName(currentWorktreeBranch);
+      } else if (workMode === 'auto') {
+        // Auto-generate a branch name based on feature title and timestamp
+        // Create a slug from the title: lowercase, replace non-alphanumeric with hyphens
+        const titleSlug =
+          titleForBranch
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-') // Replace non-alphanumeric sequences with hyphens
+            .substring(0, 50) // Limit length first
+            .replace(/^-|-$/g, '') || 'untitled'; // Then remove leading/trailing hyphens, with fallback
+        const randomSuffix = Math.random().toString(36).substring(2, 6);
+        finalBranchName = `feature/${titleSlug}-${randomSuffix}`;
+      } else {
+        // Custom mode - use provided branch name
+        finalBranchName = normalizeFeatureBranchName(featureData.branchName);
+      }
+
+      // Create worktree for 'auto' or 'custom' modes when we have a branch name
+      if ((workMode === 'auto' || workMode === 'custom') && finalBranchName && currentProject) {
+        try {
+          const api = getElectronAPI();
+          if (api?.worktree?.create) {
+            const result = await api.worktree.create(currentProject.path, finalBranchName);
+            if (result.success && result.worktree) {
+              logger.info(
+                `Worktree for branch "${finalBranchName}" ${
+                  result.worktree?.isNew ? 'created' : 'already exists'
+                }`
+              );
+              // Auto-select the worktree when creating a feature for it
+              onWorktreeAutoSelect?.({
+                path: result.worktree.path,
+                branch: result.worktree.branch,
+              });
+              // Refresh worktree list in UI
+              onWorktreeCreated?.();
+            } else if (!result.success) {
+              logger.error(
+                `Failed to create worktree for branch "${finalBranchName}":`,
+                result.error
+              );
+              toast.error('Failed to create worktree', {
+                description: result.error || 'An error occurred',
+              });
+            }
+          }
+        } catch (error) {
+          logger.error('Error creating worktree:', error);
+          toast.error('Failed to create worktree', {
+            description: error instanceof Error ? error.message : 'An error occurred',
+          });
+        }
+      }
+
+      // Check if we need to generate a title (only if we didn't already generate it for the branch name)
+      const needsTitleGeneration =
+        !titleWasGenerated && !featureData.title.trim() && featureData.description.trim();
+
+      const {
+        initialStatus: requestedStatus,
+        workMode: _workMode,
+        childDependencies,
+        ...restFeatureData
+      } = featureData;
+      const initialStatus = requestedStatus || 'backlog';
+      const newFeatureData = {
+        ...restFeatureData,
+        title: titleWasGenerated ? titleForBranch : featureData.title,
+        titleGenerating: needsTitleGeneration,
+        status: initialStatus,
+        branchName: finalBranchName,
+        dependencies: featureData.dependencies || [],
+        createdAt: new Date().toISOString(),
+        ...(initialStatus === 'in_progress' ? { startedAt: new Date().toISOString() } : {}),
+      };
+      const createdFeature = addFeature(newFeatureData);
+      // Must await to ensure feature exists on server before user can drag it
+      try {
+        await persistFeatureCreate(createdFeature);
+      } catch (error) {
+        // Remove the feature from state if server creation failed (e.g., duplicate title)
+        removeFeature(createdFeature.id);
+        throw error;
+      }
+      saveCategory(featureData.category);
+
+      // Handle child dependencies - update other features to depend on this new feature
+      if (childDependencies && childDependencies.length > 0) {
+        for (const childId of childDependencies) {
+          const childFeature = features.find((f) => f.id === childId);
+          if (childFeature) {
+            const childDeps = childFeature.dependencies || [];
+            if (!childDeps.includes(createdFeature.id)) {
+              const newDeps = [...childDeps, createdFeature.id];
+              updateFeature(childId, { dependencies: newDeps });
+              persistFeatureUpdate(childId, { dependencies: newDeps });
+            }
+          }
+        }
+      }
+
+      // Generate title in the background if needed (non-blocking)
+      if (needsTitleGeneration) {
+        const api = getElectronAPI();
+        if (api?.features?.generateTitle) {
+          api.features
+            .generateTitle(featureData.description, projectPath ?? undefined)
+            .then((result) => {
+              if (result.success && result.title) {
+                const titleUpdates = {
+                  title: result.title,
+                  titleGenerating: false,
+                };
+                updateFeature(createdFeature.id, titleUpdates);
+                persistFeatureUpdate(createdFeature.id, titleUpdates);
+              } else {
+                // Clear generating flag even if failed
+                const titleUpdates = { titleGenerating: false };
+                updateFeature(createdFeature.id, titleUpdates);
+                persistFeatureUpdate(createdFeature.id, titleUpdates);
+              }
+            })
+            .catch((error) => {
+              logger.error('Error generating title:', error);
+              // Clear generating flag on error
+              const titleUpdates = { titleGenerating: false };
+              updateFeature(createdFeature.id, titleUpdates);
+              persistFeatureUpdate(createdFeature.id, titleUpdates);
+            });
+        }
+      }
+
+      return createdFeature;
+    },
+    [
+      addFeature,
+      removeFeature,
+      persistFeatureCreate,
+      persistFeatureUpdate,
+      updateFeature,
+      saveCategory,
+      currentProject,
+      projectPath,
+      onWorktreeCreated,
+      onWorktreeAutoSelect,
+      features,
+      currentWorktreeBranch,
+    ]
+  );
+
+  const handleUpdateFeature = useCallback(
+    async (
+      featureId: string,
+      updates: {
+        title: string;
+        category: string;
+        description: string;
+        skipTests: boolean;
+        model: ModelAlias;
+        thinkingLevel: ThinkingLevel;
+        reasoningEffort: ReasoningEffort;
+        imagePaths: DescriptionImagePath[];
+        branchName: string;
+        priority: number;
+        planningMode?: PlanningMode;
+        requirePlanApproval?: boolean;
+        workMode?: 'current' | 'auto' | 'custom';
+        dependencies?: string[];
+        childDependencies?: string[]; // Feature IDs that should depend on this feature
+      },
+      descriptionHistorySource?: 'enhance' | 'edit',
+      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer',
+      preEnhancementDescription?: string
+    ) => {
+      const workMode = updates.workMode || 'current';
+
+      // For auto worktree mode, we need a title for the branch name.
+      // If no title provided, generate one from the description first.
+      let titleForBranch = updates.title;
+      let titleWasGenerated = false;
+
+      if (workMode === 'auto' && !updates.title.trim() && updates.description.trim()) {
+        // Generate title first so we can use it for the branch name
+        const api = getElectronAPI();
+        if (api?.features?.generateTitle) {
+          try {
+            const result = await api.features.generateTitle(updates.description);
+            if (result.success && result.title) {
+              titleForBranch = result.title;
+              titleWasGenerated = true;
+            }
+          } catch (error) {
+            logger.error('Error generating title for branch name:', error);
+          }
+        }
+        // If title generation failed, fall back to first part of description
+        if (!titleForBranch.trim()) {
+          titleForBranch = updates.description.substring(0, 60);
+        }
+      }
+
+      // Determine final branch name based on work mode
+      let finalBranchName: string | undefined;
+
+      if (workMode === 'current') {
+        // Work directly on current branch - use the current worktree's branch if not on main
+        // This ensures features updated on a non-main worktree are associated with that worktree
+        finalBranchName = normalizeFeatureBranchName(currentWorktreeBranch);
+      } else if (workMode === 'auto') {
+        // Preserve existing branch name if one exists (avoid orphaning worktrees on edit)
+        if (updates.branchName?.trim()) {
+          finalBranchName = normalizeFeatureBranchName(updates.branchName);
+        } else {
+          // Auto-generate a branch name based on feature title
+          // Create a slug from the title: lowercase, replace non-alphanumeric with hyphens
+          const titleSlug =
+            titleForBranch
+              .toLowerCase()
+              .replace(/[^a-z0-9]+/g, '-') // Replace non-alphanumeric sequences with hyphens
+              .substring(0, 50) // Limit length first
+              .replace(/^-|-$/g, '') || 'untitled'; // Then remove leading/trailing hyphens, with fallback
+          const randomSuffix = Math.random().toString(36).substring(2, 6);
+          finalBranchName = `feature/${titleSlug}-${randomSuffix}`;
+        }
+      } else {
+        finalBranchName = normalizeFeatureBranchName(updates.branchName);
+      }
+
+      // Create worktree for 'auto' or 'custom' modes when we have a branch name
+      if ((workMode === 'auto' || workMode === 'custom') && finalBranchName && currentProject) {
+        try {
+          const api = getElectronAPI();
+          if (api?.worktree?.create) {
+            const result = await api.worktree.create(currentProject.path, finalBranchName);
+            if (result.success) {
+              logger.info(
+                `Worktree for branch "${finalBranchName}" ${
+                  result.worktree?.isNew ? 'created' : 'already exists'
+                }`
+              );
+              // Refresh worktree list in UI
+              onWorktreeCreated?.();
+            } else {
+              logger.error(
+                `Failed to create worktree for branch "${finalBranchName}":`,
+                result.error
+              );
+              toast.error('Failed to create worktree', {
+                description: result.error || 'An error occurred',
+              });
+            }
+          }
+        } catch (error) {
+          logger.error('Error creating worktree:', error);
+          toast.error('Failed to create worktree', {
+            description: error instanceof Error ? error.message : 'An error occurred',
+          });
+        }
+      }
+
+      // Separate child dependencies from the main updates (they affect other features)
+      const { childDependencies, ...restUpdates } = updates;
+
+      const finalUpdates = {
+        ...restUpdates,
+        title: titleWasGenerated ? titleForBranch : updates.title,
+        branchName: finalBranchName,
+      };
+
+      updateFeature(featureId, finalUpdates);
+      persistFeatureUpdate(
+        featureId,
+        finalUpdates,
+        descriptionHistorySource,
+        enhancementMode,
+        preEnhancementDescription
+      );
+
+      // Handle child dependency changes
+      // This updates other features' dependencies arrays
+      if (childDependencies !== undefined) {
+        // Find current child dependencies (features that have this feature in their dependencies)
+        const currentChildDeps = features
+          .filter((f) => f.dependencies?.includes(featureId))
+          .map((f) => f.id);
+
+        // Find features to add this feature as a dependency (new child deps)
+        const toAdd = childDependencies.filter((id) => !currentChildDeps.includes(id));
+        // Find features to remove this feature as a dependency (removed child deps)
+        const toRemove = currentChildDeps.filter((id) => !childDependencies.includes(id));
+
+        // Add this feature as a dependency to new child features
+        for (const childId of toAdd) {
+          const childFeature = features.find((f) => f.id === childId);
+          if (childFeature) {
+            const childDeps = childFeature.dependencies || [];
+            if (!childDeps.includes(featureId)) {
+              const newDeps = [...childDeps, featureId];
+              updateFeature(childId, { dependencies: newDeps });
+              persistFeatureUpdate(childId, { dependencies: newDeps });
+            }
+          }
+        }
+
+        // Remove this feature as a dependency from removed child features
+        for (const childId of toRemove) {
+          const childFeature = features.find((f) => f.id === childId);
+          if (childFeature) {
+            const childDeps = childFeature.dependencies || [];
+            const newDeps = childDeps.filter((depId) => depId !== featureId);
+            updateFeature(childId, { dependencies: newDeps });
+            persistFeatureUpdate(childId, { dependencies: newDeps });
+          }
+        }
+      }
+
+      if (updates.category) {
+        saveCategory(updates.category);
+      }
+      setEditingFeature(null);
+    },
+    [
+      updateFeature,
+      persistFeatureUpdate,
+      saveCategory,
+      setEditingFeature,
+      currentProject,
+      onWorktreeCreated,
+      features,
+      currentWorktreeBranch,
+    ]
+  );
+
+  const handleDeleteFeature = useCallback(
+    async (featureId: string) => {
+      const feature = features.find((f) => f.id === featureId);
+      if (!feature) return;
+
+      const isRunning = runningAutoTasks.includes(featureId);
+
+      if (isRunning) {
+        try {
+          await stopFeature(featureId);
+          // Remove from all worktrees
+          if (currentProject) {
+            removeRunningTaskFromAllWorktrees(currentProject.id, featureId);
+          }
+          toast.success('Agent stopped', {
+            description: `Stopped and deleted: ${truncateDescription(feature.description)}`,
+          });
+        } catch (error) {
+          logger.error('Error stopping feature before delete:', error);
+          toast.error('Failed to stop agent', {
+            description: 'The feature will still be deleted.',
+          });
+        }
+      }
+
+      if (feature.imagePaths && feature.imagePaths.length > 0) {
+        try {
+          const api = getElectronAPI();
+          for (const imagePathObj of feature.imagePaths) {
+            try {
+              await api.deleteFile(imagePathObj.path);
+              logger.info(`Deleted image: ${imagePathObj.path}`);
+            } catch (error) {
+              logger.error(`Failed to delete image ${imagePathObj.path}:`, error);
+            }
+          }
+        } catch (error) {
+          logger.error(`Error deleting images for feature ${featureId}:`, error);
+        }
+      }
+
+      removeFeature(featureId);
+      await persistFeatureDelete(featureId);
+    },
+    [features, runningAutoTasks, stopFeature, removeFeature, persistFeatureDelete, currentProject]
+  );
+
+  const handleRunFeature = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) {
+        throw new Error('No project selected');
+      }
+
+      const api = getElectronAPI();
+      if (!api?.autoMode) {
+        throw new Error('Auto mode API not available');
+      }
+
+      // Server derives workDir from feature.branchName at execution time
+      const result = await api.autoMode.runFeature(
+        currentProject.path,
+        feature.id,
+        worktreesEnabled
+        // No worktreePath - server derives from feature.branchName
+      );
+
+      if (result.success) {
+        logger.info('Feature run started successfully, branch:', feature.branchName || 'default');
+      } else {
+        // Throw error so caller can handle rollback
+        throw new Error(result.error || 'Failed to start feature');
+      }
+    },
+    [currentProject, worktreesEnabled]
+  );
+
+  const handleStartImplementation = useCallback(
+    async (feature: Feature) => {
+      // Note: No concurrency limit check here. Manual feature starts should never
+      // be blocked by the auto mode concurrency limit. The concurrency limit only
+      // governs how many features the auto-loop picks up automatically.
+
+      // Check for blocking dependencies and show warning if enabled
+      if (enableDependencyBlocking) {
+        const blockingDeps = getBlockingDependencies(feature, features);
+        if (blockingDeps.length > 0) {
+          const depDescriptions = blockingDeps
+            .map((depId) => {
+              const dep = features.find((f) => f.id === depId);
+              return dep ? truncateDescription(dep.description, 40) : depId;
+            })
+            .join(', ');
+
+          toast.warning('Starting feature with incomplete dependencies', {
+            description: `This feature depends on: ${depDescriptions}`,
+          });
+        }
+      }
+
+      // Skip status update if feature was already created with in_progress status
+      // (e.g., via "Make" button which creates directly as in_progress to avoid backlog flash)
+      const alreadyInProgress = feature.status === 'in_progress';
+
+      if (!alreadyInProgress) {
+        const updates = {
+          status: 'in_progress' as const,
+          startedAt: new Date().toISOString(),
+        };
+        updateFeature(feature.id, updates);
+
+        try {
+          // Must await to ensure feature status is persisted before starting agent
+          await persistFeatureUpdate(feature.id, updates);
+        } catch (error) {
+          // Rollback to backlog if persist fails (e.g., server offline)
+          logger.error('Failed to update feature status, rolling back to backlog:', error);
+          const rollbackUpdates = {
+            status: 'backlog' as const,
+            startedAt: undefined,
+          };
+          updateFeature(feature.id, rollbackUpdates);
+          persistFeatureUpdate(feature.id, rollbackUpdates).catch((persistError) => {
+            logger.error('Failed to persist rollback:', persistError);
+          });
+
+          if (isConnectionError(error)) {
+            handleServerOffline();
+            return false;
+          }
+
+          toast.error('Failed to start feature', {
+            description:
+              error instanceof Error ? error.message : 'Server may be offline. Please try again.',
+          });
+          return false;
+        }
+      }
+
+      try {
+        logger.info('Feature moved to in_progress, starting agent...');
+        await handleRunFeature(feature);
+        return true;
+      } catch (error) {
+        // Rollback to backlog if run fails
+        logger.error('Failed to start feature, rolling back to backlog:', error);
+        const rollbackUpdates = {
+          status: 'backlog' as const,
+          startedAt: undefined,
+        };
+        updateFeature(feature.id, rollbackUpdates);
+
+        // Also persist the rollback so it survives page refresh
+        persistFeatureUpdate(feature.id, rollbackUpdates).catch((persistError) => {
+          logger.error('Failed to persist rollback:', persistError);
+        });
+
+        // If server is offline (connection refused), redirect to login page
+        if (isConnectionError(error)) {
+          handleServerOffline();
+          return false;
+        }
+
+        toast.error('Failed to start feature', {
+          description:
+            error instanceof Error ? error.message : 'Server may be offline. Please try again.',
+        });
+        return false;
+      }
+    },
+    [enableDependencyBlocking, features, updateFeature, persistFeatureUpdate, handleRunFeature]
+  );
+
+  const handleVerifyFeature = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+      try {
+        const result = await verifyFeatureMutation.mutateAsync(feature.id);
+        if (result.passes) {
+          // persistFeatureUpdate handles the optimistic RQ cache update internally
+          persistFeatureUpdate(feature.id, {
+            status: 'verified',
+            justFinishedAt: undefined,
+          });
+          toast.success('Verification passed', {
+            description: `Verified: ${truncateDescription(feature.description)}`,
+          });
+        } else {
+          toast.error('Verification failed', {
+            description: `Tests did not pass for: ${truncateDescription(feature.description)}`,
+          });
+        }
+      } catch {
+        // Error toast is already shown by the mutation's onError handler
+      }
+    },
+    [currentProject, verifyFeatureMutation, persistFeatureUpdate]
+  );
+
+  const handleResumeFeature = useCallback(
+    async (feature: Feature) => {
+      logger.info('handleResumeFeature called for feature:', feature.id);
+      if (!currentProject) {
+        logger.error('No current project');
+        return;
+      }
+      resumeFeatureMutation.mutate({ featureId: feature.id, useWorktrees: worktreesEnabled });
+    },
+    [currentProject, resumeFeatureMutation, worktreesEnabled]
+  );
+
+  const handleManualVerify = useCallback(
+    (feature: Feature) => {
+      persistFeatureUpdate(feature.id, {
+        status: 'verified',
+        justFinishedAt: undefined,
+      });
+      toast.success('Feature verified', {
+        description: `Marked as verified: ${truncateDescription(feature.description)}`,
+      });
+    },
+    [persistFeatureUpdate]
+  );
+
+  const handleMoveBackToInProgress = useCallback(
+    (feature: Feature) => {
+      const updates = {
+        status: 'in_progress' as const,
+        startedAt: new Date().toISOString(),
+      };
+      persistFeatureUpdate(feature.id, updates);
+      toast.info('Feature moved back', {
+        description: `Moved back to In Progress: ${truncateDescription(feature.description)}`,
+      });
+    },
+    [persistFeatureUpdate]
+  );
+
+  const handleOpenFollowUp = useCallback(
+    (feature: Feature) => {
+      setFollowUpFeature(feature);
+      setFollowUpPrompt('');
+      setFollowUpImagePaths([]);
+      setShowFollowUpDialog(true);
+    },
+    [setFollowUpFeature, setFollowUpPrompt, setFollowUpImagePaths, setShowFollowUpDialog]
+  );
+
+  const handleSendFollowUp = useCallback(async () => {
+    if (!currentProject || !followUpFeature || !followUpPrompt.trim()) return;
+
+    const featureId = followUpFeature.id;
+    const featureDescription = followUpFeature.description;
+    const previousStatus = followUpFeature.status;
+
+    const api = getElectronAPI();
+    if (!api?.autoMode?.followUpFeature) {
+      logger.error('Follow-up feature API not available');
+      toast.error('Follow-up not available', {
+        description: 'This feature is not available in the current version.',
+      });
+      return;
+    }
+
+    const updates = {
+      status: 'in_progress' as const,
+      startedAt: new Date().toISOString(),
+      justFinishedAt: undefined,
+    };
+    updateFeature(featureId, updates);
+
+    try {
+      await persistFeatureUpdate(featureId, updates);
+
+      setShowFollowUpDialog(false);
+      setFollowUpFeature(null);
+      setFollowUpPrompt('');
+      setFollowUpImagePaths([]);
+      setFollowUpPreviewMap(new Map());
+
+      toast.success('Follow-up started', {
+        description: `Continuing work on: ${truncateDescription(featureDescription)}`,
+      });
+
+      const imagePaths = followUpImagePaths.map((img) => img.path);
+      // Server derives workDir from feature.branchName at execution time
+      const result = await api.autoMode.followUpFeature(
+        currentProject.path,
+        followUpFeature.id,
+        followUpPrompt,
+        imagePaths,
+        worktreesEnabled
+      );
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to send follow-up');
+      }
+    } catch (error) {
+      // Rollback to previous status if follow-up fails
+      logger.error('Error sending follow-up, rolling back:', error);
+      const rollbackUpdates = {
+        status: previousStatus as 'backlog' | 'in_progress' | 'waiting_approval' | 'verified',
+        startedAt: undefined,
+      };
+      updateFeature(featureId, rollbackUpdates);
+
+      // If server is offline (connection refused), redirect to login page
+      if (isConnectionError(error)) {
+        handleServerOffline();
+        return;
+      }
+
+      toast.error('Failed to send follow-up', {
+        description:
+          error instanceof Error ? error.message : 'Server may be offline. Please try again.',
+      });
+    }
+  }, [
+    currentProject,
+    followUpFeature,
+    followUpPrompt,
+    followUpImagePaths,
+    updateFeature,
+    persistFeatureUpdate,
+    setShowFollowUpDialog,
+    setFollowUpFeature,
+    setFollowUpPrompt,
+    setFollowUpImagePaths,
+    setFollowUpPreviewMap,
+    worktreesEnabled,
+  ]);
+
+  const handleCommitFeature = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode?.commitFeature) {
+          logger.error('Commit feature API not available');
+          toast.error('Commit not available', {
+            description: 'This feature is not available in the current version.',
+          });
+          return;
+        }
+
+        // Server derives workDir from feature.branchName
+        const result = await api.autoMode.commitFeature(
+          currentProject.path,
+          feature.id
+          // No worktreePath - server derives from feature.branchName
+        );
+
+        if (result.success) {
+          persistFeatureUpdate(feature.id, { status: 'verified' });
+          toast.success('Feature committed', {
+            description: `Committed and verified: ${truncateDescription(feature.description)}`,
+          });
+          // Refresh worktree selector to update commit counts
+          onWorktreeCreated?.();
+        } else {
+          logger.error('Failed to commit feature:', result.error);
+          toast.error('Failed to commit feature', {
+            description: result.error || 'An error occurred',
+          });
+          await loadFeatures();
+        }
+      } catch (error) {
+        logger.error('Error committing feature:', error);
+        toast.error('Failed to commit feature', {
+          description: error instanceof Error ? error.message : 'An error occurred',
+        });
+        await loadFeatures();
+      }
+    },
+    [currentProject, persistFeatureUpdate, loadFeatures, onWorktreeCreated]
+  );
+
+  const handleMergeFeature = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.mergeFeature) {
+          logger.error('Worktree API not available');
+          toast.error('Merge not available', {
+            description: 'This feature is not available in the current version.',
+          });
+          return;
+        }
+
+        const result = await api.worktree.mergeFeature(currentProject.path, feature.id);
+
+        if (result.success) {
+          await loadFeatures();
+          toast.success('Feature merged', {
+            description: `Changes merged to main branch: ${truncateDescription(
+              feature.description
+            )}`,
+          });
+        } else {
+          logger.error('Failed to merge feature:', result.error);
+          toast.error('Failed to merge feature', {
+            description: result.error || 'An error occurred',
+          });
+        }
+      } catch (error) {
+        logger.error('Error merging feature:', error);
+        toast.error('Failed to merge feature', {
+          description: error instanceof Error ? error.message : 'An error occurred',
+        });
+      }
+    },
+    [currentProject, loadFeatures]
+  );
+
+  const handleCompleteFeature = useCallback(
+    (feature: Feature) => {
+      persistFeatureUpdate(feature.id, { status: 'completed' as const });
+      toast.success('Feature completed', {
+        description: `Archived: ${truncateDescription(feature.description)}`,
+      });
+    },
+    [persistFeatureUpdate]
+  );
+
+  const handleUnarchiveFeature = useCallback(
+    (feature: Feature) => {
+      // Determine the branch to restore to:
+      // - If the feature had a branch assigned, keep it (preserves worktree context)
+      // - If no branch was assigned, it will show on the primary worktree
+      const featureBranch = feature.branchName;
+      const branchLabel = featureBranch ?? 'primary worktree';
+
+      // Check if the feature will be visible on the current worktree view
+      const willBeVisibleOnCurrentView = !featureBranch
+        ? !currentWorktreeBranch ||
+          (projectPath ? isPrimaryWorktreeBranch(projectPath, currentWorktreeBranch) : true)
+        : featureBranch === currentWorktreeBranch;
+
+      persistFeatureUpdate(feature.id, { status: 'verified' as const });
+
+      if (willBeVisibleOnCurrentView) {
+        toast.success('Feature restored', {
+          description: `Moved back to verified: ${truncateDescription(feature.description)}`,
+        });
+      } else {
+        toast.success('Feature restored', {
+          description: `Moved back to verified on branch "${branchLabel}": ${truncateDescription(feature.description)}`,
+        });
+      }
+    },
+    [persistFeatureUpdate, currentWorktreeBranch, projectPath, isPrimaryWorktreeBranch]
+  );
+
+  const handleViewOutput = useCallback(
+    (feature: Feature) => {
+      setOutputFeature(feature);
+      setShowOutputModal(true);
+    },
+    [setOutputFeature, setShowOutputModal]
+  );
+
+  const handleOutputModalNumberKeyPress = useCallback(
+    (key: string) => {
+      const index = key === '0' ? 9 : parseInt(key, 10) - 1;
+      const targetFeature = inProgressFeaturesForShortcuts[index];
+
+      if (!targetFeature) {
+        return;
+      }
+
+      if (targetFeature.id === outputFeature?.id) {
+        setShowOutputModal(false);
+      } else {
+        setOutputFeature(targetFeature);
+      }
+    },
+    [inProgressFeaturesForShortcuts, outputFeature?.id, setShowOutputModal, setOutputFeature]
+  );
+
+  const handleForceStopFeature = useCallback(
+    async (feature: Feature) => {
+      // Mark this feature as transitioning so WebSocket-driven query invalidation
+      // (useAutoModeQueryInvalidation) skips redundant cache invalidations while
+      // persistFeatureUpdate is handling the optimistic update. Without this guard,
+      // auto_mode_error / auto_mode_stopped WS events race with the optimistic
+      // update and cause cache flip-flops that cascade through useBoardColumnFeatures,
+      // triggering React error #185 on mobile.
+      markFeatureTransitioning(feature.id);
+      try {
+        await stopFeature(feature.id);
+
+        const targetStatus =
+          feature.skipTests && feature.status === 'waiting_approval'
+            ? 'waiting_approval'
+            : 'backlog';
+
+        // Remove the running task from ALL worktrees for this project.
+        // stopFeature only removes from its scoped worktree (branchName),
+        // but the feature may be tracked under a different worktree branch.
+        // Without this, runningAutoTasksAllWorktrees still contains the feature
+        // and the board column logic forces it into in_progress.
+        if (currentProject) {
+          removeRunningTaskFromAllWorktrees(currentProject.id, feature.id);
+        }
+
+        if (targetStatus !== feature.status) {
+          // persistFeatureUpdate handles the optimistic RQ cache update, the
+          // Zustand store update (on server response), and the final cache
+          // invalidation internally — no need for separate queryClient.setQueryData
+          // or moveFeature calls which would cause redundant re-renders.
+          await persistFeatureUpdate(feature.id, { status: targetStatus });
+        }
+
+        toast.success('Agent stopped', {
+          description:
+            targetStatus === 'waiting_approval'
+              ? `Stopped commit - returned to waiting approval: ${truncateDescription(
+                  feature.description
+                )}`
+              : `Stopped working on: ${truncateDescription(feature.description)}`,
+        });
+      } catch (error) {
+        logger.error('Error stopping feature:', error);
+        toast.error('Failed to stop agent', {
+          description: error instanceof Error ? error.message : 'An error occurred',
+        });
+      } finally {
+        // Delay unmarking so the refetch triggered by persistFeatureUpdate's
+        // invalidateQueries() has time to settle before WS-driven invalidations
+        // are allowed through again. Without this, a WS event arriving during
+        // the refetch window would trigger a conflicting invalidation.
+        setTimeout(() => unmarkFeatureTransitioning(feature.id), 500);
+      }
+    },
+    [stopFeature, persistFeatureUpdate, currentProject]
+  );
+
+  const handleStartNextFeatures = useCallback(async () => {
+    // Filter backlog features by the currently selected worktree branch
+    // This ensures "G" only starts features from the filtered list
+    const primaryBranch = projectPath ? getPrimaryWorktreeBranch(projectPath) : null;
+    const backlogFeatures = features.filter((f) => {
+      if (f.status !== 'backlog') return false;
+
+      // Determine the feature's branch (default to primary branch if not set)
+      const featureBranch = f.branchName || primaryBranch || 'main';
+
+      // If no worktree is selected (currentWorktreeBranch is null or matches primary),
+      // show features with no branch or primary branch
+      if (
+        !currentWorktreeBranch ||
+        (projectPath && isPrimaryWorktreeBranch(projectPath, currentWorktreeBranch))
+      ) {
+        return (
+          !f.branchName || (projectPath && isPrimaryWorktreeBranch(projectPath, featureBranch))
+        );
+      }
+
+      // Otherwise, only show features matching the selected worktree branch
+      return featureBranch === currentWorktreeBranch;
+    });
+
+    const availableSlots = useAppStore.getState().maxConcurrency - runningAutoTasks.length;
+
+    if (availableSlots <= 0) {
+      toast.error('Concurrency limit reached', {
+        description: 'Wait for a task to complete or increase the concurrency limit.',
+      });
+      return;
+    }
+
+    if (backlogFeatures.length === 0) {
+      const isOnPrimaryBranch =
+        !currentWorktreeBranch ||
+        (projectPath && isPrimaryWorktreeBranch(projectPath, currentWorktreeBranch));
+      toast.info('Backlog empty', {
+        description: !isOnPrimaryBranch
+          ? `No features in backlog for branch "${currentWorktreeBranch}".`
+          : 'No features in backlog to start.',
+      });
+      return;
+    }
+
+    // Sort by priority (lower number = higher priority, priority 1 is highest)
+    // Features with blocking dependencies are sorted to the end
+    const sortedBacklog = [...backlogFeatures].sort((a, b) => {
+      const aBlocked =
+        enableDependencyBlocking && !skipVerificationInAutoMode
+          ? getBlockingDependencies(a, features).length > 0
+          : false;
+      const bBlocked =
+        enableDependencyBlocking && !skipVerificationInAutoMode
+          ? getBlockingDependencies(b, features).length > 0
+          : false;
+
+      // Blocked features go to the end
+      if (aBlocked && !bBlocked) return 1;
+      if (!aBlocked && bBlocked) return -1;
+
+      // Within same blocked/unblocked group, sort by priority
+      return (a.priority || 999) - (b.priority || 999);
+    });
+
+    // Find the first feature without blocking dependencies
+    const featureToStart = sortedBacklog.find((f) => {
+      if (!enableDependencyBlocking || skipVerificationInAutoMode) return true;
+      return getBlockingDependencies(f, features).length === 0;
+    });
+
+    if (!featureToStart) {
+      toast.info('No eligible features', {
+        description:
+          'All backlog features have unmet dependencies. Complete their dependencies first (or enable "Skip verification requirement" in Auto Mode settings).',
+      });
+      return;
+    }
+
+    // Start only one feature per keypress (user must press again for next)
+    // Simplified: No worktree creation on client - server derives workDir from feature.branchName
+    await handleStartImplementation(featureToStart);
+  }, [
+    features,
+    runningAutoTasks,
+    handleStartImplementation,
+    currentWorktreeBranch,
+    projectPath,
+    isPrimaryWorktreeBranch,
+    getPrimaryWorktreeBranch,
+    enableDependencyBlocking,
+    skipVerificationInAutoMode,
+  ]);
+
+  const handleArchiveAllVerified = useCallback(async () => {
+    const verifiedFeatures = features.filter((f) => f.status === 'verified');
+    if (verifiedFeatures.length === 0) return;
+
+    // Optimistically update all features in the UI immediately
+    for (const feature of verifiedFeatures) {
+      updateFeature(feature.id, { status: 'completed' as const });
+    }
+
+    // Stop any running features in parallel (non-blocking for the UI)
+    const runningVerified = verifiedFeatures.filter((f) => runningAutoTasks.includes(f.id));
+    if (runningVerified.length > 0) {
+      await Promise.allSettled(
+        runningVerified.map((feature) =>
+          stopFeature(feature.id).catch((error) => {
+            logger.error('Error stopping feature before archive:', error);
+          })
+        )
+      );
+      // Remove from all worktrees
+      if (currentProject) {
+        for (const feature of runningVerified) {
+          removeRunningTaskFromAllWorktrees(currentProject.id, feature.id);
+        }
+      }
+    }
+
+    // Use bulk update API for a single server request instead of N individual calls
+    try {
+      if (currentProject) {
+        const api = getHttpApiClient();
+        const featureIds = verifiedFeatures.map((f) => f.id);
+        const result = await api.features.bulkUpdate(currentProject.path, featureIds, {
+          status: 'completed' as const,
+        });
+
+        if (result.success) {
+          // Refresh features from server to sync React Query cache
+          loadFeatures();
+          toast.success('All verified features archived', {
+            description: `Archived ${verifiedFeatures.length} feature(s).`,
+          });
+        } else {
+          logger.error('Bulk archive failed:', result);
+          // Reload features to sync state with server
+          loadFeatures();
+        }
+      }
+    } catch (error) {
+      logger.error('Failed to bulk archive features:', error);
+      // Reload features to sync state with server on error
+      loadFeatures();
+    }
+  }, [features, runningAutoTasks, stopFeature, updateFeature, currentProject, loadFeatures]);
+
+  const handleDuplicateFeature = useCallback(
+    async (feature: Feature, asChild: boolean = false) => {
+      // Copy all feature data, stripping id, status (handled by create), and runtime/state fields.
+      // Also strip initialStatus and workMode which are transient creation parameters that
+      // should not carry over to duplicates (initialStatus: 'in_progress' would cause
+      // the duplicate to immediately appear in "In Progress" instead of "Backlog").
+      const {
+        id: _id,
+        status: _status,
+        initialStatus: _initialStatus,
+        workMode: _workMode,
+        startedAt: _startedAt,
+        error: _error,
+        summary: _summary,
+        spec: _spec,
+        passes: _passes,
+        planSpec: _planSpec,
+        descriptionHistory: _descriptionHistory,
+        titleGenerating: _titleGenerating,
+        ...featureData
+      } = feature;
+      const duplicatedFeatureData = {
+        ...featureData,
+        // If duplicating as child, set source as dependency; otherwise keep existing
+        ...(asChild && { dependencies: [feature.id] }),
+      };
+
+      // Reuse the existing handleAddFeature logic
+      await handleAddFeature(duplicatedFeatureData);
+
+      toast.success(asChild ? 'Duplicated as child' : 'Feature duplicated', {
+        description: `Created copy of: ${truncateDescription(feature.description || feature.title || '')}`,
+      });
+    },
+    [handleAddFeature]
+  );
+
+  const handleDuplicateAsChildMultiple = useCallback(
+    async (feature: Feature, count: number) => {
+      // Guard: reject non-positive counts
+      if (count <= 0) {
+        toast.error('Invalid duplicate count', {
+          description: 'Count must be a positive number.',
+        });
+        return;
+      }
+
+      // Cap count to prevent runaway API calls
+      const effectiveCount = Math.min(count, MAX_DUPLICATES);
+
+      // Create a chain of duplicates, each a child of the previous, so they execute sequentially
+      let parentFeature = feature;
+      let successCount = 0;
+
+      for (let i = 0; i < effectiveCount; i++) {
+        const {
+          id: _id,
+          status: _status,
+          initialStatus: _initialStatus,
+          workMode: _workMode,
+          startedAt: _startedAt,
+          error: _error,
+          summary: _summary,
+          spec: _spec,
+          passes: _passes,
+          planSpec: _planSpec,
+          descriptionHistory: _descriptionHistory,
+          titleGenerating: _titleGenerating,
+          ...featureData
+        } = parentFeature;
+
+        const duplicatedFeatureData = {
+          ...featureData,
+          // Each duplicate depends on the previous one in the chain
+          dependencies: [parentFeature.id],
+        };
+
+        try {
+          const newFeature = await handleAddFeature(duplicatedFeatureData);
+
+          // Use the returned feature directly as the parent for the next iteration,
+          // avoiding a fragile assumption that the newest feature is the last item in the store
+          if (newFeature) {
+            parentFeature = newFeature;
+          }
+          successCount++;
+        } catch (error) {
+          const errorMessage = error instanceof Error ? error.message : String(error);
+          toast.error(
+            `Failed after creating ${successCount} of ${effectiveCount} duplicate${effectiveCount !== 1 ? 's' : ''}`,
+            {
+              description: errorMessage,
+            }
+          );
+          return;
+        }
+      }
+
+      if (successCount === effectiveCount) {
+        toast.success(`Created ${successCount} chained duplicate${successCount !== 1 ? 's' : ''}`, {
+          description: `Created ${successCount} sequential ${successCount !== 1 ? 'copies' : 'copy'} of: ${truncateDescription(feature.description || feature.title || '')}`,
+        });
+      } else {
+        toast.info(
+          `Partially created ${successCount} of ${effectiveCount} chained duplicate${effectiveCount !== 1 ? 's' : ''}`,
+          {
+            description: `Created ${successCount} sequential ${successCount !== 1 ? 'copies' : 'copy'} of: ${truncateDescription(feature.description || feature.title || '')}`,
+          }
+        );
+      }
+    },
+    [handleAddFeature]
+  );
+
+  return {
+    handleAddFeature,
+    handleUpdateFeature,
+    handleDeleteFeature,
+    handleStartImplementation,
+    handleVerifyFeature,
+    handleResumeFeature,
+    handleManualVerify,
+    handleMoveBackToInProgress,
+    handleOpenFollowUp,
+    handleSendFollowUp,
+    handleCommitFeature,
+    handleMergeFeature,
+    handleCompleteFeature,
+    handleUnarchiveFeature,
+    handleViewOutput,
+    handleOutputModalNumberKeyPress,
+    handleForceStopFeature,
+    handleStartNextFeatures,
+    handleArchiveAllVerified,
+    handleDuplicateFeature,
+    handleDuplicateAsChildMultiple,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-background.ts b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-background.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f14f6f1d61339b7ad8973518d288b701172d9b51
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-background.ts
@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+import { useAppStore, defaultBackgroundSettings } from '@/store/app-store';
+import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
+
+interface UseBoardBackgroundProps {
+  currentProject: { path: string; id: string } | null;
+}
+
+export function useBoardBackground({ currentProject }: UseBoardBackgroundProps) {
+  const boardBackgroundByProject = useAppStore((state) => state.boardBackgroundByProject);
+
+  // Get background settings for current project
+  const backgroundSettings = useMemo(() => {
+    const perProjectSettings = currentProject
+      ? boardBackgroundByProject[currentProject.path]
+      : null;
+    return perProjectSettings || defaultBackgroundSettings;
+  }, [currentProject, boardBackgroundByProject]);
+
+  // Build background image style if image exists
+  const backgroundImageStyle = useMemo(() => {
+    if (!backgroundSettings.imagePath || !currentProject) {
+      return {};
+    }
+
+    const imageUrl = getAuthenticatedImageUrl(
+      backgroundSettings.imagePath,
+      currentProject.path,
+      backgroundSettings.imageVersion
+    );
+
+    return {
+      backgroundImage: `url(${imageUrl})`,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+    } as React.CSSProperties;
+  }, [backgroundSettings, currentProject]);
+
+  return {
+    backgroundSettings,
+    backgroundImageStyle,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-column-features.ts b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-column-features.ts
new file mode 100644
index 0000000000000000000000000000000000000000..82965e95d87fab3a97ba75d372ed4e2139c20af4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-column-features.ts
@@ -0,0 +1,479 @@
+// @ts-nocheck - column filtering logic with dependency resolution and status mapping
+import { useMemo, useCallback, useEffect } from 'react';
+import { Feature, useAppStore } from '@/store/app-store';
+import {
+  createFeatureMap,
+  getBlockingDependenciesFromMap,
+  resolveDependencies,
+} from '@automaker/dependency-resolver';
+
+type ColumnId = Feature['status'];
+
+/**
+ * Extract creation time from a feature, falling back to the timestamp
+ * embedded in the feature ID (format: feature-{timestamp}-{random}).
+ */
+function getFeatureCreatedTime(feature: Feature): number {
+  if (feature.createdAt) {
+    return new Date(feature.createdAt).getTime();
+  }
+  // Fallback: extract timestamp from feature ID (e.g., "feature-1772299989679-185nwyp5kc7")
+  const match = feature.id.match(/^feature-(\d+)-/);
+  if (match) {
+    return parseInt(match[1], 10);
+  }
+  return 0;
+}
+
+/**
+ * Sort features newest-first while respecting dependency ordering.
+ *
+ * Groups features into dependency chains and sorts the chains by the newest
+ * feature in each chain (descending). Within each chain, dependencies appear
+ * before their dependents (topological order preserved).
+ *
+ * Features without any dependency relationships are treated as single-item chains
+ * and sorted by their own creation time.
+ */
+function sortNewestWithDependencies(features: Feature[]): Feature[] {
+  if (features.length <= 1) return features;
+
+  const featureMap = new Map(features.map((f) => [f.id, f]));
+  const featureSet = new Set(features.map((f) => f.id));
+
+  // Build adjacency: parent -> children (dependency -> dependents) scoped to this list
+  const childrenOf = new Map<string, string[]>();
+  const parentOf = new Map<string, string[]>();
+  for (const f of features) {
+    childrenOf.set(f.id, []);
+    parentOf.set(f.id, []);
+  }
+  for (const f of features) {
+    for (const depId of f.dependencies || []) {
+      if (featureSet.has(depId)) {
+        childrenOf.get(depId)!.push(f.id);
+        parentOf.get(f.id)!.push(depId);
+      }
+    }
+  }
+
+  // Find connected components (dependency chains/groups)
+  const visited = new Set<string>();
+  const components: string[][] = [];
+
+  function collectComponent(startId: string): string[] {
+    const component: string[] = [];
+    const stack = [startId];
+    while (stack.length > 0) {
+      const id = stack.pop()!;
+      if (visited.has(id)) continue;
+      visited.add(id);
+      component.push(id);
+      // Traverse both directions to find full connected component
+      for (const childId of childrenOf.get(id) || []) {
+        if (!visited.has(childId)) stack.push(childId);
+      }
+      for (const pid of parentOf.get(id) || []) {
+        if (!visited.has(pid)) stack.push(pid);
+      }
+    }
+    return component;
+  }
+
+  for (const f of features) {
+    if (!visited.has(f.id)) {
+      components.push(collectComponent(f.id));
+    }
+  }
+
+  // For each component, find the newest feature time (used to sort components)
+  // and produce a topological ordering within the component
+  const sortedComponents: { newestTime: number; ordered: Feature[] }[] = [];
+
+  for (const component of components) {
+    let newestTime = 0;
+    for (const id of component) {
+      const t = getFeatureCreatedTime(featureMap.get(id)!);
+      if (t > newestTime) newestTime = t;
+    }
+
+    // Topological sort within component (dependencies first)
+    // Use the existing order from `features` as a stable fallback
+    const componentSet = new Set(component);
+    const inDegree = new Map<string, number>();
+    for (const id of component) {
+      let deg = 0;
+      for (const pid of parentOf.get(id) || []) {
+        if (componentSet.has(pid)) deg++;
+      }
+      inDegree.set(id, deg);
+    }
+
+    const queue: Feature[] = [];
+    for (const id of component) {
+      if (inDegree.get(id) === 0) {
+        queue.push(featureMap.get(id)!);
+      }
+    }
+    // Within same level, sort newest first
+    queue.sort((a, b) => getFeatureCreatedTime(b) - getFeatureCreatedTime(a));
+
+    const ordered: Feature[] = [];
+    while (queue.length > 0) {
+      const current = queue.shift()!;
+      ordered.push(current);
+      for (const childId of childrenOf.get(current.id) || []) {
+        if (!componentSet.has(childId)) continue;
+        const newDeg = (inDegree.get(childId) || 1) - 1;
+        inDegree.set(childId, newDeg);
+        if (newDeg === 0) {
+          queue.push(featureMap.get(childId)!);
+          queue.sort((a, b) => getFeatureCreatedTime(b) - getFeatureCreatedTime(a));
+        }
+      }
+    }
+
+    // Append any remaining (circular deps) at end
+    for (const id of component) {
+      if (!ordered.some((f) => f.id === id)) {
+        ordered.push(featureMap.get(id)!);
+      }
+    }
+
+    sortedComponents.push({ newestTime, ordered });
+  }
+
+  // Sort components by newest feature time (descending)
+  sortedComponents.sort((a, b) => b.newestTime - a.newestTime);
+
+  // Flatten: each component's internal order is preserved
+  return sortedComponents.flatMap((c) => c.ordered);
+}
+
+interface UseBoardColumnFeaturesProps {
+  features: Feature[];
+  runningAutoTasks: string[];
+  runningAutoTasksAllWorktrees: string[]; // Running tasks across ALL worktrees (prevents backlog flash during event timing gaps)
+  searchQuery: string;
+  currentWorktreePath: string | null; // Currently selected worktree path
+  currentWorktreeBranch: string | null; // Branch name of the selected worktree (null = main)
+  projectPath: string | null; // Main project path (for main worktree)
+  sortNewestCardOnTop?: boolean; // When true, sort cards by most recent (createdAt desc) in all columns
+}
+
+export function useBoardColumnFeatures({
+  features,
+  runningAutoTasks,
+  runningAutoTasksAllWorktrees,
+  searchQuery,
+  currentWorktreePath,
+  currentWorktreeBranch,
+  projectPath,
+  sortNewestCardOnTop = false,
+}: UseBoardColumnFeaturesProps) {
+  // Get recently completed features from store for race condition protection
+  const recentlyCompletedFeatures = useAppStore((state) => state.recentlyCompletedFeatures);
+  const clearRecentlyCompletedFeatures = useAppStore(
+    (state) => state.clearRecentlyCompletedFeatures
+  );
+
+  // Clear recently completed features when the cache refreshes with updated statuses.
+  //
+  // RACE CONDITION SCENARIO THIS PREVENTS:
+  // 1. Feature completes on server -> status becomes 'verified'/'completed' on disk
+  // 2. Server emits auto_mode_feature_complete event
+  // 3. Frontend receives event -> removes feature from runningTasks, adds to recentlyCompletedFeatures
+  // 4. React Query invalidates features query, triggers async refetch
+  // 5. RACE: Before refetch completes, component may re-render with stale cache data
+  //    where status='backlog' and feature is no longer in runningTasks
+  // 6. This hook prevents the feature from appearing in backlog during that window
+  //
+  // When the refetch completes with fresh data (status='verified'/'completed'),
+  // this effect clears the recentlyCompletedFeatures set since it's no longer needed.
+  // Clear recently completed features when the cache refreshes with updated statuses.
+  // IMPORTANT: Only depend on `features` (not `recentlyCompletedFeatures`) to avoid a
+  // re-trigger loop where clearing the set creates a new reference that re-fires this effect.
+  // Read recentlyCompletedFeatures from the store directly to get the latest value without
+  // subscribing to it as a dependency.
+  useEffect(() => {
+    const currentRecentlyCompleted = useAppStore.getState().recentlyCompletedFeatures;
+    if (currentRecentlyCompleted.size === 0) return;
+
+    const hasUpdatedStatus = Array.from(currentRecentlyCompleted).some((featureId) => {
+      const feature = features.find((f) => f.id === featureId);
+      return feature && (feature.status === 'verified' || feature.status === 'completed');
+    });
+
+    if (hasUpdatedStatus) {
+      clearRecentlyCompletedFeatures();
+    }
+  }, [features, clearRecentlyCompletedFeatures]);
+
+  // Memoize column features to prevent unnecessary re-renders
+  const columnFeaturesMap = useMemo(() => {
+    // Use a more flexible type to support dynamic pipeline statuses
+    const map: Record<string, Feature[]> = {
+      backlog: [],
+      in_progress: [],
+      waiting_approval: [],
+      verified: [],
+      completed: [], // Completed features are shown in the archive modal, not as a column
+    };
+    const featureMap = createFeatureMap(features);
+    const runningTaskIds = new Set(runningAutoTasks);
+    // Track ALL running tasks across all worktrees to prevent features from
+    // briefly appearing in backlog during the timing gap between when the server
+    // starts executing a feature and when the UI receives the event/status update.
+    const allRunningTaskIds = new Set(runningAutoTasksAllWorktrees);
+    // Get recently completed features for additional race condition protection
+    // These features should not appear in backlog even if cache has stale status
+    const recentlyCompleted = recentlyCompletedFeatures;
+
+    // Filter features by search query (case-insensitive)
+    const normalizedQuery = searchQuery.toLowerCase().trim();
+    const filteredFeatures = normalizedQuery
+      ? features.filter(
+          (f) =>
+            f.description.toLowerCase().includes(normalizedQuery) ||
+            f.category?.toLowerCase().includes(normalizedQuery)
+        )
+      : features;
+
+    // Determine the effective worktree path and branch for filtering
+    // If currentWorktreePath is null, we're on the main worktree
+    // Use the branch name from the selected worktree
+    // If we're selecting main (currentWorktreePath is null), currentWorktreeBranch
+    // should contain the main branch's actual name, defaulting to "main"
+    // If we're selecting a non-main worktree but can't find it, currentWorktreeBranch is null
+    // In that case, we can't do branch-based filtering, so we'll handle it specially below
+    const effectiveBranch = currentWorktreeBranch;
+
+    filteredFeatures.forEach((f) => {
+      // If feature has a running agent, always show it in "in_progress"
+      const isRunning = runningTaskIds.has(f.id);
+
+      // Check if feature matches the current worktree by branchName
+      // Features without branchName are considered unassigned (show only on primary worktree)
+      const featureBranch = f.branchName;
+
+      let matchesWorktree: boolean;
+      if (!featureBranch) {
+        // No branch assigned - show only on primary worktree
+        const isViewingPrimary = currentWorktreePath === null;
+        matchesWorktree = isViewingPrimary;
+      } else if (effectiveBranch === null) {
+        // We're viewing main but branch hasn't been initialized yet
+        // (worktrees disabled or haven't loaded yet).
+        // Show features assigned to primary worktree's branch.
+        if (projectPath) {
+          const worktrees = useAppStore.getState().worktreesByProject[projectPath] ?? [];
+          if (worktrees.length === 0) {
+            // Worktrees not loaded yet - fallback to showing features on common default branches
+            // This prevents features from disappearing during initial load
+            matchesWorktree =
+              featureBranch === 'main' || featureBranch === 'master' || featureBranch === 'develop';
+          } else {
+            matchesWorktree = useAppStore
+              .getState()
+              .isPrimaryWorktreeBranch(projectPath, featureBranch);
+          }
+        } else {
+          matchesWorktree = false;
+        }
+      } else {
+        // Match by branch name
+        matchesWorktree = featureBranch === effectiveBranch;
+      }
+
+      // Use the feature's status (fallback to backlog for unknown statuses)
+      const status = f.status || 'backlog';
+
+      // IMPORTANT:
+      // Historically, we forced "running" features into in_progress so they never disappeared
+      // during stale reload windows. With pipelines, a feature can legitimately be running while
+      // its status is `pipeline_*`, so we must respect that status to render it in the right column.
+      // NOTE: runningAutoTasks is already worktree-scoped, so if a feature is in runningAutoTasks,
+      // it's already running for the current worktree. However, we still need to check matchesWorktree
+      // to ensure the feature's branchName matches the current worktree's branch.
+      if (isRunning) {
+        // If feature is running but doesn't match worktree, it might be a timing issue where
+        // the feature was started for a different worktree. Still show it if it's running to
+        // prevent disappearing features, but log a warning.
+        if (!matchesWorktree) {
+          // This can happen if:
+          // 1. Feature was started for a different worktree (bug)
+          // 2. Timing issue where branchName hasn't been set yet
+          // 3. User switched worktrees while feature was starting
+          // Still show it in in_progress to prevent it from disappearing
+          console.debug(
+            `Feature ${f.id} is running but branchName (${featureBranch}) doesn't match current worktree branch (${effectiveBranch}) - showing anyway to prevent disappearing`
+          );
+          map.in_progress.push(f);
+          return;
+        }
+
+        if (status.startsWith('pipeline_')) {
+          if (!map[status]) map[status] = [];
+          map[status].push(f);
+          return;
+        }
+
+        // If it's running and has a known non-backlog status, keep it in that status.
+        // Otherwise, fallback to in_progress as the "active work" column.
+        if (status !== 'backlog' && map[status]) {
+          map[status].push(f);
+        } else {
+          map.in_progress.push(f);
+        }
+        return;
+      }
+
+      // Not running (on this worktree): place by status (and worktree filter)
+      // Filter all items by worktree, including backlog
+      // This ensures backlog items with a branch assigned only show in that branch
+      //
+      // 'merge_conflict', 'ready', and 'interrupted' are backlog-lane statuses that don't
+      // have dedicated columns:
+      // - 'merge_conflict': Automatic merge failed; user must resolve conflicts before restart
+      // - 'ready': Feature has an approved plan, waiting to be picked up for execution
+      // - 'interrupted': Feature execution was aborted (e.g., user stopped it, server restart)
+      // Both display in the backlog column and need the same allRunningTaskIds race-condition
+      // protection as 'backlog' to prevent briefly flashing in backlog when already executing.
+      if (
+        status === 'backlog' ||
+        status === 'merge_conflict' ||
+        status === 'ready' ||
+        status === 'interrupted'
+      ) {
+        // IMPORTANT: Check if this feature is running on ANY worktree before placing in backlog.
+        // This prevents a race condition where the feature has started executing on the server
+        // (and is tracked in a different worktree's running list) but the disk status hasn't
+        // been updated yet or the UI hasn't received the worktree-scoped event.
+        // In that case, the feature would briefly flash in the backlog column.
+        if (allRunningTaskIds.has(f.id)) {
+          // Feature is running somewhere - show in in_progress if it matches this worktree,
+          // otherwise skip it (it will appear on the correct worktree's board)
+          if (matchesWorktree) {
+            map.in_progress.push(f);
+          }
+        } else if (recentlyCompleted.has(f.id)) {
+          // Feature recently completed - skip placing in backlog to prevent race condition
+          // where stale cache has status='backlog' but feature actually completed.
+          // The feature will be placed correctly once the cache refreshes.
+          // Log for debugging (can remove after verification)
+          console.debug(
+            `Feature ${f.id} recently completed - skipping backlog placement during cache refresh`
+          );
+        } else if (matchesWorktree) {
+          map.backlog.push(f);
+        }
+      } else if (map[status]) {
+        // Only show if matches current worktree or has no worktree assigned
+        if (matchesWorktree) {
+          map[status].push(f);
+        }
+      } else if (status.startsWith('pipeline_')) {
+        // Handle pipeline statuses - initialize array if needed
+        if (matchesWorktree) {
+          if (!map[status]) {
+            map[status] = [];
+          }
+          map[status].push(f);
+        }
+      } else {
+        // Unknown status - apply same allRunningTaskIds protection and default to backlog
+        if (allRunningTaskIds.has(f.id)) {
+          if (matchesWorktree) {
+            map.in_progress.push(f);
+          }
+        } else if (matchesWorktree) {
+          map.backlog.push(f);
+        }
+      }
+    });
+
+    // Apply dependency-aware sorting to backlog
+    // This ensures features appear in dependency order (dependencies before dependents)
+    // Within the same dependency level, features are sorted by priority
+    if (map.backlog.length > 0) {
+      const { orderedFeatures } = resolveDependencies(map.backlog);
+
+      // Get all features to check blocking dependencies against
+      const enableDependencyBlocking = useAppStore.getState().enableDependencyBlocking;
+
+      // Sort blocked features to the end of the backlog
+      // This keeps the dependency order within each group (unblocked/blocked)
+      if (enableDependencyBlocking) {
+        const unblocked: Feature[] = [];
+        const blocked: Feature[] = [];
+
+        for (const f of orderedFeatures) {
+          if (getBlockingDependenciesFromMap(f, featureMap).length > 0) {
+            blocked.push(f);
+          } else {
+            unblocked.push(f);
+          }
+        }
+
+        if (sortNewestCardOnTop) {
+          // Sort each group newest-first while keeping dependency chains nested
+          map.backlog = [
+            ...sortNewestWithDependencies(unblocked),
+            ...sortNewestWithDependencies(blocked),
+          ];
+        } else {
+          map.backlog = [...unblocked, ...blocked];
+        }
+      } else {
+        if (sortNewestCardOnTop) {
+          map.backlog = sortNewestWithDependencies(orderedFeatures);
+        } else {
+          map.backlog = orderedFeatures;
+        }
+      }
+    }
+
+    // Apply newest-on-top sorting to non-backlog columns when enabled
+    // (Backlog is handled above with dependency-aware sorting)
+    if (sortNewestCardOnTop) {
+      for (const columnId of Object.keys(map)) {
+        if (columnId === 'backlog') continue;
+        map[columnId] = [...map[columnId]].sort((a, b) => {
+          const aTime = getFeatureCreatedTime(a);
+          const bTime = getFeatureCreatedTime(b);
+          return bTime - aTime; // desc: newest first
+        });
+      }
+    }
+
+    return map;
+  }, [
+    features,
+    runningAutoTasks,
+    runningAutoTasksAllWorktrees,
+    searchQuery,
+    currentWorktreePath,
+    currentWorktreeBranch,
+    projectPath,
+    recentlyCompletedFeatures,
+    sortNewestCardOnTop,
+  ]);
+
+  const getColumnFeatures = useCallback(
+    (columnId: ColumnId) => {
+      return columnFeaturesMap[columnId] || [];
+    },
+    [columnFeaturesMap]
+  );
+
+  // Memoize completed features for the archive modal
+  const completedFeatures = useMemo(() => {
+    return features.filter((f) => f.status === 'completed');
+  }, [features]);
+
+  return {
+    columnFeaturesMap,
+    getColumnFeatures,
+    completedFeatures,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-drag-drop.ts b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-drag-drop.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cd0cc1e5765b1054c3c8f78f080821b2bc03f502
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-drag-drop.ts
@@ -0,0 +1,359 @@
+import { useState, useCallback, useEffect } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { DragStartEvent, DragEndEvent } from '@dnd-kit/core';
+import { Feature } from '@/store/app-store';
+import { useAppStore } from '@/store/app-store';
+import { toast } from 'sonner';
+import { COLUMNS, ColumnId } from '../constants';
+
+const logger = createLogger('BoardDragDrop');
+
+export interface PendingDependencyLink {
+  draggedFeature: Feature;
+  targetFeature: Feature;
+}
+
+interface UseBoardDragDropProps {
+  features: Feature[];
+  currentProject: { path: string; id: string } | null;
+  runningAutoTasks: string[];
+  persistFeatureUpdate: (featureId: string, updates: Partial<Feature>) => Promise<void>;
+  handleStartImplementation: (feature: Feature) => Promise<boolean>;
+  stopFeature: (featureId: string) => Promise<boolean>;
+}
+
+export function useBoardDragDrop({
+  features,
+  currentProject: _currentProject,
+  runningAutoTasks,
+  persistFeatureUpdate,
+  handleStartImplementation,
+  stopFeature,
+}: UseBoardDragDropProps) {
+  const [activeFeature, setActiveFeature] = useState<Feature | null>(null);
+  const [pendingDependencyLink, setPendingDependencyLink] = useState<PendingDependencyLink | null>(
+    null
+  );
+  // IMPORTANT: Use individual selectors instead of bare useAppStore() to prevent
+  // subscribing to the entire store. Bare useAppStore() causes the host component
+  // (BoardView) to re-render on EVERY store change, which cascades through effects
+  // and triggers React error #185 (maximum update depth exceeded).
+  const updateFeature = useAppStore((s) => s.updateFeature);
+
+  // Note: getOrCreateWorktreeForFeature removed - worktrees are now created server-side
+  // at execution time based on feature.branchName
+
+  // Clear stale activeFeature when features list changes (e.g. during worktree switches).
+  // Without this, the DragOverlay in KanbanBoard can try to render a feature from
+  // a previous worktree, causing property access crashes.
+  useEffect(() => {
+    setActiveFeature((current) => {
+      if (!current) return null;
+      // If the active feature is no longer in the features list, clear it
+      const stillExists = features.some((f) => f.id === current.id);
+      return stillExists ? current : null;
+    });
+  }, [features]);
+
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      const { active } = event;
+      const feature = features.find((f) => f.id === active.id);
+      if (feature) {
+        setActiveFeature(feature);
+      }
+    },
+    [features]
+  );
+
+  // Clear pending dependency link
+  const clearPendingDependencyLink = useCallback(() => {
+    setPendingDependencyLink(null);
+  }, []);
+
+  const handleDragEnd = useCallback(
+    async (event: DragEndEvent) => {
+      const { active, over } = event;
+      setActiveFeature(null);
+
+      if (!over) return;
+
+      const featureId = active.id as string;
+      const overId = over.id as string;
+
+      // Find the feature being dragged
+      const draggedFeature = features.find((f) => f.id === featureId);
+      if (!draggedFeature) return;
+
+      // Check if this is a running task (non-skipTests, TDD)
+      const isRunningTask = runningAutoTasks.includes(featureId);
+
+      // Check if dropped on another card (for creating dependency links)
+      if (overId.startsWith('card-drop-')) {
+        const cardData = over.data.current as {
+          type: string;
+          featureId: string;
+        };
+
+        if (cardData?.type === 'card') {
+          const targetFeatureId = cardData.featureId;
+
+          // Don't link to self
+          if (targetFeatureId === featureId) {
+            return;
+          }
+
+          const targetFeature = features.find((f) => f.id === targetFeatureId);
+          if (!targetFeature) return;
+
+          // Don't allow linking completed features (they're already done)
+          if (draggedFeature.status === 'completed' || targetFeature.status === 'completed') {
+            toast.error('Cannot link features', {
+              description: 'Completed features cannot be linked.',
+            });
+            return;
+          }
+
+          // Set pending dependency link to trigger dialog
+          setPendingDependencyLink({
+            draggedFeature,
+            targetFeature,
+          });
+          return;
+        }
+      }
+
+      // Check if dropped on a worktree tab
+      if (overId.startsWith('worktree-drop-')) {
+        // Handle dropping on a worktree - change the feature's branchName
+        const worktreeData = over.data.current as {
+          type: string;
+          branch: string;
+          path: string;
+          isMain: boolean;
+        };
+
+        if (worktreeData?.type === 'worktree') {
+          // Don't allow moving running tasks to a different worktree
+          if (isRunningTask) {
+            logger.debug('Cannot move running feature to different worktree');
+            toast.error('Cannot move feature', {
+              description: 'This feature is currently running and cannot be moved.',
+            });
+            return;
+          }
+
+          const targetBranch = worktreeData.branch;
+          const currentBranch = draggedFeature.branchName;
+
+          // For main worktree, set branchName to undefined to indicate it should use main
+          // For other worktrees, set branchName to the target branch
+          const newBranchName: string | undefined = worktreeData.isMain ? undefined : targetBranch;
+
+          // If already on the same branch, nothing to do
+          // For main worktree: feature with null/undefined branchName is already on main
+          // For other worktrees: compare branch names directly
+          const isAlreadyOnTarget = worktreeData.isMain
+            ? !currentBranch // null or undefined means already on main
+            : currentBranch === targetBranch;
+
+          if (isAlreadyOnTarget) {
+            return;
+          }
+
+          // Update feature's branchName
+          updateFeature(featureId, { branchName: newBranchName });
+          await persistFeatureUpdate(featureId, { branchName: newBranchName });
+
+          const branchDisplay = worktreeData.isMain ? targetBranch : targetBranch;
+          toast.success('Feature moved to branch', {
+            description: `Moved to ${branchDisplay}: ${draggedFeature.description.slice(0, 40)}${draggedFeature.description.length > 40 ? '...' : ''}`,
+          });
+          return;
+        }
+      }
+
+      // Determine if dragging is allowed based on status
+      // Running in_progress features CAN be dragged to backlog (stops the agent)
+      // but cannot be dragged to other columns
+
+      let targetStatus: ColumnId | null = null;
+
+      // Normalize the over ID: strip 'column-header-' prefix if the card was dropped
+      // directly onto the column header droppable zone (e.g. 'column-header-backlog' → 'backlog')
+      const effectiveOverId = overId.startsWith('column-header-')
+        ? overId.replace('column-header-', '')
+        : overId;
+
+      // Check if we dropped on a column
+      const column = COLUMNS.find((c) => c.id === effectiveOverId);
+      if (column) {
+        targetStatus = column.id;
+      } else if (effectiveOverId.startsWith('pipeline_')) {
+        // Pipeline step column (not in static COLUMNS list)
+        targetStatus = effectiveOverId as ColumnId;
+      } else {
+        // Dropped on another feature - find its column
+        const overFeature = features.find((f) => f.id === effectiveOverId);
+        if (overFeature) {
+          targetStatus = overFeature.status;
+        }
+      }
+
+      if (!targetStatus) return;
+
+      // Same column, nothing to do
+      if (targetStatus === draggedFeature.status) return;
+
+      // Handle different drag scenarios
+      // Note: persistFeatureUpdate handles optimistic RQ cache update internally,
+      // so no separate moveFeature() call is needed.
+      if (draggedFeature.status === 'backlog' || draggedFeature.status === 'merge_conflict') {
+        // From backlog
+        if (targetStatus === 'in_progress') {
+          // Use helper function to handle concurrency check and start implementation
+          // Server will derive workDir from feature.branchName
+          await handleStartImplementation(draggedFeature);
+        } else {
+          persistFeatureUpdate(featureId, { status: targetStatus });
+        }
+      } else if (draggedFeature.status === 'waiting_approval') {
+        // waiting_approval features can be dragged to verified for manual verification
+        // NOTE: This check must come BEFORE skipTests check because waiting_approval
+        // features often have skipTests=true, and we want status-based handling first
+        if (targetStatus === 'verified') {
+          // Clear justFinishedAt timestamp when manually verifying via drag
+          persistFeatureUpdate(featureId, {
+            status: 'verified',
+            justFinishedAt: undefined,
+          });
+          toast.success('Feature verified', {
+            description: `Manually verified: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? '...' : ''}`,
+          });
+        } else if (targetStatus === 'backlog') {
+          // Allow moving waiting_approval cards back to backlog
+          // Clear justFinishedAt timestamp when moving back to backlog
+          persistFeatureUpdate(featureId, {
+            status: 'backlog',
+            justFinishedAt: undefined,
+          });
+          toast.info('Feature moved to backlog', {
+            description: `Moved to Backlog: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? '...' : ''}`,
+          });
+        }
+      } else if (draggedFeature.status === 'in_progress') {
+        // Handle in_progress features being moved
+        if (targetStatus === 'backlog') {
+          // If the feature is currently running, stop it first
+          if (isRunningTask) {
+            try {
+              const stopped = await stopFeature(featureId);
+              if (stopped) {
+                logger.info('Stopped running feature via drag to backlog:', featureId);
+              } else {
+                logger.warn('Feature was not running by the time stop was requested:', featureId);
+              }
+            } catch (error) {
+              logger.error('Error stopping feature during drag to backlog:', error);
+              toast.error('Failed to stop agent', {
+                description: 'The feature will still be moved to backlog.',
+              });
+            }
+          }
+          persistFeatureUpdate(featureId, { status: 'backlog' });
+          toast.info(
+            isRunningTask
+              ? 'Agent stopped and feature moved to backlog'
+              : 'Feature moved to backlog',
+            {
+              description: `Moved to Backlog: ${draggedFeature.description.slice(
+                0,
+                50
+              )}${draggedFeature.description.length > 50 ? '...' : ''}`,
+            }
+          );
+        } else if (isRunningTask) {
+          // Running features can only be dragged to backlog, not other columns
+          logger.debug('Cannot drag running feature to', targetStatus);
+          toast.error('Cannot move running feature', {
+            description: 'Stop the agent first or drag to Backlog to stop and move.',
+          });
+          return;
+        } else if (targetStatus === 'verified' && draggedFeature.skipTests) {
+          // Manual verify via drag (only for skipTests features)
+          persistFeatureUpdate(featureId, { status: 'verified' });
+          toast.success('Feature verified', {
+            description: `Marked as verified: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? '...' : ''}`,
+          });
+        }
+      } else if (draggedFeature.skipTests) {
+        // skipTests feature being moved between verified and waiting_approval
+        if (targetStatus === 'waiting_approval' && draggedFeature.status === 'verified') {
+          // Move verified feature back to waiting_approval
+          persistFeatureUpdate(featureId, { status: 'waiting_approval' });
+          toast.info('Feature moved back', {
+            description: `Moved back to Waiting Approval: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? '...' : ''}`,
+          });
+        } else if (targetStatus === 'backlog') {
+          // Allow moving skipTests cards back to backlog (from verified)
+          persistFeatureUpdate(featureId, { status: 'backlog' });
+          toast.info('Feature moved to backlog', {
+            description: `Moved to Backlog: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? '...' : ''}`,
+          });
+        }
+      } else if (draggedFeature.status === 'verified') {
+        // Handle verified TDD (non-skipTests) features being moved back
+        if (targetStatus === 'waiting_approval') {
+          // Move verified feature back to waiting_approval
+          persistFeatureUpdate(featureId, { status: 'waiting_approval' });
+          toast.info('Feature moved back', {
+            description: `Moved back to Waiting Approval: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? '...' : ''}`,
+          });
+        } else if (targetStatus === 'backlog') {
+          // Allow moving verified cards back to backlog
+          persistFeatureUpdate(featureId, { status: 'backlog' });
+          toast.info('Feature moved to backlog', {
+            description: `Moved to Backlog: ${draggedFeature.description.slice(
+              0,
+              50
+            )}${draggedFeature.description.length > 50 ? '...' : ''}`,
+          });
+        }
+      }
+    },
+    [
+      features,
+      runningAutoTasks,
+      updateFeature,
+      persistFeatureUpdate,
+      handleStartImplementation,
+      stopFeature,
+    ]
+  );
+
+  return {
+    activeFeature,
+    handleDragStart,
+    handleDragEnd,
+    pendingDependencyLink,
+    clearPendingDependencyLink,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-effects.ts b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-effects.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ae63d38764d7ba11d0dde9b7467abf753d3923e2
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-effects.ts
@@ -0,0 +1,149 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { getElectronAPI } from '@/lib/electron';
+import { createLogger } from '@automaker/utils/logger';
+import type { Feature } from '@/store/app-store';
+
+const logger = createLogger('BoardEffects');
+
+interface UseBoardEffectsProps {
+  currentProject: { path: string; id: string; name?: string } | null;
+  specCreatingForProject: string | null;
+  setSpecCreatingForProject: (path: string | null) => void;
+  checkContextExists: (featureId: string) => Promise<boolean>;
+  features: Feature[];
+  isLoading: boolean;
+  featuresWithContext: Set<string>;
+  setFeaturesWithContext: (set: Set<string>) => void;
+}
+
+export function useBoardEffects({
+  currentProject,
+  specCreatingForProject,
+  setSpecCreatingForProject,
+  checkContextExists,
+  features,
+  isLoading,
+  featuresWithContext,
+  setFeaturesWithContext,
+}: UseBoardEffectsProps) {
+  // Keep a ref to the current featuresWithContext for use in event handlers
+  const featuresWithContextRef = useRef(featuresWithContext);
+  useEffect(() => {
+    featuresWithContextRef.current = featuresWithContext;
+  }, [featuresWithContext]);
+  // Make current project available globally for modal
+  useEffect(() => {
+    if (currentProject) {
+      window.__currentProject = currentProject;
+    }
+    return () => {
+      window.__currentProject = null;
+    };
+  }, [currentProject]);
+
+  // Subscribe to spec regeneration events to clear creating state on completion
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api.specRegeneration) return;
+
+    const unsubscribe = api.specRegeneration.onEvent((event) => {
+      logger.info('Spec regeneration event:', event.type, 'for project:', event.projectPath);
+
+      if (event.projectPath !== specCreatingForProject) {
+        return;
+      }
+
+      if (event.type === 'spec_regeneration_complete') {
+        setSpecCreatingForProject(null);
+      } else if (event.type === 'spec_regeneration_error') {
+        setSpecCreatingForProject(null);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [specCreatingForProject, setSpecCreatingForProject]);
+
+  // Note: Running tasks sync is now handled by useAutoMode hook in BoardView
+  // which correctly handles worktree/branch scoping.
+
+  // Build a stable fingerprint of feature IDs + statuses so context checks
+  // only re-run when the set of features or their statuses actually change,
+  // not on every React Query refetch that produces a new array reference.
+  const featuresFingerprint = useMemo(() => {
+    return features
+      .map((f) => `${f.id}:${f.status}`)
+      .sort()
+      .join(',');
+  }, [features]);
+
+  // Keep a ref to the latest features array for use inside the effect
+  const featuresRef = useRef(features);
+  useEffect(() => {
+    featuresRef.current = features;
+  }, [features]);
+
+  // Check which features have context files
+  useEffect(() => {
+    const checkAllContexts = async () => {
+      const currentFeatures = featuresRef.current;
+      const featuresWithPotentialContext = currentFeatures.filter(
+        (f) =>
+          f.status === 'backlog' ||
+          f.status === 'merge_conflict' ||
+          f.status === 'ready' ||
+          f.status === 'interrupted' ||
+          f.status === 'in_progress' ||
+          f.status === 'waiting_approval' ||
+          f.status === 'verified' ||
+          (typeof f.status === 'string' && f.status.startsWith('pipeline_'))
+      );
+      const contextChecks = await Promise.all(
+        featuresWithPotentialContext.map(async (f) => ({
+          id: f.id,
+          hasContext: await checkContextExists(f.id),
+        }))
+      );
+
+      const newSet = new Set<string>();
+      contextChecks.forEach(({ id, hasContext }) => {
+        if (hasContext) {
+          newSet.add(id);
+        }
+      });
+
+      setFeaturesWithContext(newSet);
+    };
+
+    if (featuresFingerprint && !isLoading) {
+      checkAllContexts();
+    }
+  }, [featuresFingerprint, isLoading, checkContextExists, setFeaturesWithContext]);
+
+  // Re-check context when a feature stops, completes, or errors
+  // This ensures hasContext is updated even if the features array doesn't change
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.autoMode) return;
+
+    const unsubscribe = api.autoMode.onEvent(async (event) => {
+      // When a feature stops (error/abort) or completes, re-check its context
+      if (
+        (event.type === 'auto_mode_error' || event.type === 'auto_mode_feature_complete') &&
+        event.featureId
+      ) {
+        const hasContext = await checkContextExists(event.featureId);
+        if (hasContext) {
+          const newSet = new Set(featuresWithContextRef.current);
+          newSet.add(event.featureId);
+          setFeaturesWithContext(newSet);
+        }
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [checkContextExists, setFeaturesWithContext]);
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-features.ts b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-features.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9444723456d793d19b5319fdba123d0612a3f1fb
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-features.ts
@@ -0,0 +1,179 @@
+/**
+ * Board Features Hook
+ *
+ * React Query-based hook for managing features on the board view.
+ * Handles feature loading, categories, and auto-mode event notifications.
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import { useQueryClient, useIsRestoring } from '@tanstack/react-query';
+import { useAppStore } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import { toast } from 'sonner';
+import { createLogger } from '@automaker/utils/logger';
+import { useFeatures } from '@/hooks/queries';
+import { queryKeys } from '@/lib/query-keys';
+
+const logger = createLogger('BoardFeatures');
+
+interface UseBoardFeaturesProps {
+  currentProject: { path: string; id: string } | null;
+}
+
+export function useBoardFeatures({ currentProject }: UseBoardFeaturesProps) {
+  const queryClient = useQueryClient();
+  const [persistedCategories, setPersistedCategories] = useState<string[]>([]);
+
+  // Track whether React Query's IDB persistence layer is still restoring.
+  // During the restore window (~100-500ms on mobile), queries report
+  // isLoading=true because no data is in the cache yet. We suppress
+  // the full-screen spinner during this period to avoid a visible flash
+  // on PWA memory-eviction cold starts.
+  const isRestoring = useIsRestoring();
+
+  // Use React Query for features
+  const { data: features = [], isLoading: isQueryLoading } = useFeatures(currentProject?.path);
+
+  // Don't report loading while IDB cache restore is in progress —
+  // features will appear momentarily once the restore completes.
+  const isLoading = isQueryLoading && !isRestoring;
+
+  // Load persisted categories from file
+  const loadCategories = useCallback(async () => {
+    if (!currentProject) return;
+
+    try {
+      const api = getElectronAPI();
+      const result = await api.readFile(`${currentProject.path}/.automaker/categories.json`);
+
+      if (result.success && result.content) {
+        const parsed = JSON.parse(result.content);
+        if (Array.isArray(parsed)) {
+          setPersistedCategories(parsed);
+        }
+      } else {
+        setPersistedCategories([]);
+      }
+    } catch {
+      setPersistedCategories([]);
+    }
+  }, [currentProject]);
+
+  // Save a new category to the persisted categories file
+  const saveCategory = useCallback(
+    async (category: string) => {
+      if (!currentProject || !category.trim()) return;
+
+      try {
+        const api = getElectronAPI();
+        let categories: string[] = [...persistedCategories];
+
+        if (!categories.includes(category)) {
+          categories.push(category);
+          categories.sort();
+
+          await api.writeFile(
+            `${currentProject.path}/.automaker/categories.json`,
+            JSON.stringify(categories, null, 2)
+          );
+
+          setPersistedCategories(categories);
+        }
+      } catch (error) {
+        logger.error('Failed to save category:', error);
+      }
+    },
+    [currentProject, persistedCategories]
+  );
+
+  // Subscribe to auto mode events for notifications (ding sound, toasts)
+  // Note: Query invalidation is handled by useAutoModeQueryInvalidation in the root.
+  // Note: removeRunningTask is handled by useAutoMode — do NOT duplicate it here,
+  // as duplicate Zustand mutations cause re-render cascades (React error #185).
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.autoMode || !currentProject) return;
+
+    const projectPath = currentProject.path;
+
+    const unsubscribe = api.autoMode.onEvent((event) => {
+      // Check if event is for the current project by matching projectPath
+      const eventProjectPath = ('projectPath' in event && event.projectPath) as string | undefined;
+      if (eventProjectPath && eventProjectPath !== projectPath) {
+        return;
+      }
+
+      if (event.type === 'auto_mode_feature_complete') {
+        // Play ding sound when feature is done (unless muted)
+        const { muteDoneSound } = useAppStore.getState();
+        if (!muteDoneSound) {
+          const audio = new Audio('/sounds/ding.mp3');
+          audio.play().catch((err) => logger.warn('Could not play ding sound:', err));
+        }
+      } else if (event.type === 'auto_mode_error') {
+        // Show error toast (removeRunningTask is handled by useAutoMode, not here)
+        const isAuthError =
+          event.errorType === 'authentication' ||
+          (event.error &&
+            (event.error.includes('Authentication failed') ||
+              event.error.includes('Invalid API key')));
+
+        if (isAuthError) {
+          toast.error('Authentication Failed', {
+            description:
+              "Your API key is invalid or expired. Please check Settings or run 'claude login' in terminal.",
+            duration: 10000,
+          });
+        } else {
+          toast.error('Agent encountered an error', {
+            description: event.error || 'Check the logs for details',
+          });
+        }
+      }
+    });
+
+    return unsubscribe;
+  }, [currentProject]);
+
+  // Check for interrupted features on mount
+  useEffect(() => {
+    if (!currentProject) return;
+
+    const checkInterrupted = async () => {
+      const api = getElectronAPI();
+      if (api.autoMode?.resumeInterrupted) {
+        try {
+          await api.autoMode.resumeInterrupted(currentProject.path);
+          logger.info('Checked for interrupted features');
+        } catch (error) {
+          logger.warn('Failed to check for interrupted features:', error);
+        }
+      }
+    };
+
+    checkInterrupted();
+  }, [currentProject]);
+
+  // Load persisted categories on mount/project change
+  useEffect(() => {
+    loadCategories();
+  }, [loadCategories]);
+
+  // Clear categories when project changes
+  useEffect(() => {
+    setPersistedCategories([]);
+  }, [currentProject?.path]);
+
+  return {
+    features,
+    isLoading,
+    persistedCategories,
+    loadFeatures: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: queryKeys.features.all(currentProject?.path ?? ''),
+      });
+    },
+    loadCategories,
+    saveCategory,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-keyboard-shortcuts.ts b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-keyboard-shortcuts.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8978d591fab3b0328fb11f37085f190d62b8fb9f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-keyboard-shortcuts.ts
@@ -0,0 +1,78 @@
+import { useMemo, useRef, useEffect } from 'react';
+import {
+  useKeyboardShortcuts,
+  useKeyboardShortcutsConfig,
+  KeyboardShortcut,
+} from '@/hooks/use-keyboard-shortcuts';
+import { Feature } from '@/store/app-store';
+
+interface UseBoardKeyboardShortcutsProps {
+  features: Feature[];
+  runningAutoTasks: string[];
+  onAddFeature: () => void;
+  onStartNextFeatures: () => void;
+  onViewOutput: (feature: Feature) => void;
+}
+
+export function useBoardKeyboardShortcuts({
+  features,
+  runningAutoTasks,
+  onAddFeature,
+  onStartNextFeatures,
+  onViewOutput,
+}: UseBoardKeyboardShortcutsProps) {
+  const shortcuts = useKeyboardShortcutsConfig();
+
+  // Get in-progress features for keyboard shortcuts (memoized for shortcuts)
+  const inProgressFeaturesForShortcuts = useMemo(() => {
+    return features.filter((f) => {
+      const isRunning = runningAutoTasks.includes(f.id);
+      return isRunning || f.status === 'in_progress';
+    });
+  }, [features, runningAutoTasks]);
+
+  // Ref to hold the start next callback (to avoid dependency issues)
+  const startNextFeaturesRef = useRef<() => void>(() => {});
+
+  // Update ref when callback changes
+  useEffect(() => {
+    startNextFeaturesRef.current = onStartNextFeatures;
+  }, [onStartNextFeatures]);
+
+  // Keyboard shortcuts for this view
+  const boardShortcuts: KeyboardShortcut[] = useMemo(() => {
+    const shortcutsList: KeyboardShortcut[] = [
+      {
+        key: shortcuts.addFeature,
+        action: onAddFeature,
+        description: 'Add new feature',
+      },
+      {
+        key: shortcuts.startNext,
+        action: () => startNextFeaturesRef.current(),
+        description: 'Start next features from backlog',
+      },
+    ];
+
+    // Add shortcuts for in-progress cards (1-9 and 0 for 10th)
+    inProgressFeaturesForShortcuts.slice(0, 10).forEach((feature, index) => {
+      // Keys 1-9 for first 9 cards, 0 for 10th card
+      const key = index === 9 ? '0' : String(index + 1);
+      shortcutsList.push({
+        key,
+        action: () => {
+          onViewOutput(feature);
+        },
+        description: `View output for in-progress card ${index + 1}`,
+      });
+    });
+
+    return shortcutsList;
+  }, [inProgressFeaturesForShortcuts, shortcuts, onAddFeature, onViewOutput]);
+
+  useKeyboardShortcuts(boardShortcuts);
+
+  return {
+    inProgressFeaturesForShortcuts,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-persistence.ts b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-persistence.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3794d885cece9d50d4aee4ad7dfe2c37eff2885d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-board-persistence.ts
@@ -0,0 +1,243 @@
+import { useCallback } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import type { Feature as ApiFeature } from '@automaker/types';
+import { Feature } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import { useAppStore } from '@/store/app-store';
+import { createLogger } from '@automaker/utils/logger';
+import { queryKeys } from '@/lib/query-keys';
+
+const logger = createLogger('BoardPersistence');
+
+interface UseBoardPersistenceProps {
+  currentProject: { path: string; id: string } | null;
+}
+
+export function useBoardPersistence({ currentProject }: UseBoardPersistenceProps) {
+  // IMPORTANT: Use individual selector instead of bare useAppStore() to prevent
+  // subscribing to the entire store. Bare useAppStore() causes the host component
+  // (BoardView) to re-render on EVERY store change, which cascades through effects
+  // and triggers React error #185 (maximum update depth exceeded).
+  const updateFeature = useAppStore((s) => s.updateFeature);
+  const queryClient = useQueryClient();
+
+  // Persist feature update to API (replaces saveFeatures)
+  const persistFeatureUpdate = useCallback(
+    async (
+      featureId: string,
+      updates: Partial<Feature>,
+      descriptionHistorySource?: 'enhance' | 'edit',
+      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer',
+      preEnhancementDescription?: string
+    ) => {
+      if (!currentProject) return;
+
+      // Cancel any in-flight refetches to prevent them from overwriting our optimistic update.
+      // Without this, a slow background refetch (e.g., from a prior create/invalidate) can
+      // resolve after setQueryData and overwrite the cache with stale data.
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.features.all(currentProject.path),
+        exact: true,
+      });
+
+      // Capture previous cache snapshot for rollback on error
+      const previousFeatures = queryClient.getQueryData<Feature[]>(
+        queryKeys.features.all(currentProject.path)
+      );
+
+      // Optimistically update React Query cache for immediate board refresh
+      // This ensures status changes (e.g., restoring archived features) are reflected immediately
+      queryClient.setQueryData<Feature[]>(
+        queryKeys.features.all(currentProject.path),
+        (existing) => {
+          if (!existing) return existing;
+          return existing.map((f) => (f.id === featureId ? { ...f, ...updates } : f));
+        }
+      );
+
+      try {
+        const api = getElectronAPI();
+        if (!api.features) {
+          logger.error('Features API not available');
+          // Rollback optimistic update since we can't persist
+          if (previousFeatures) {
+            queryClient.setQueryData(queryKeys.features.all(currentProject.path), previousFeatures);
+          }
+          return;
+        }
+
+        logger.info('Calling API features.update', { featureId, updates });
+        const result = await api.features.update(
+          currentProject.path,
+          featureId,
+          updates,
+          descriptionHistorySource,
+          enhancementMode,
+          preEnhancementDescription
+        );
+        logger.info('API features.update result', {
+          success: result.success,
+          feature: result.feature,
+        });
+        if (result.success && result.feature) {
+          const updatedFeature = result.feature as Feature;
+          updateFeature(updatedFeature.id, updatedFeature as Partial<Feature>);
+          // Update cache with server-confirmed feature before invalidating
+          queryClient.setQueryData<Feature[]>(
+            queryKeys.features.all(currentProject.path),
+            (features) => {
+              if (!features) return features;
+              return features.map((feature) =>
+                feature.id === updatedFeature.id ? { ...feature, ...updatedFeature } : feature
+              );
+            }
+          );
+          // Invalidate React Query cache to sync UI
+          queryClient.invalidateQueries({
+            queryKey: queryKeys.features.all(currentProject.path),
+          });
+        } else if (!result.success) {
+          logger.error('API features.update failed', result);
+          // Rollback optimistic update on failure
+          if (previousFeatures) {
+            queryClient.setQueryData(queryKeys.features.all(currentProject.path), previousFeatures);
+          }
+          queryClient.invalidateQueries({
+            queryKey: queryKeys.features.all(currentProject.path),
+          });
+        }
+      } catch (error) {
+        logger.error('Failed to persist feature update:', error);
+        // Rollback optimistic update on error
+        if (previousFeatures) {
+          queryClient.setQueryData(queryKeys.features.all(currentProject.path), previousFeatures);
+        }
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.features.all(currentProject.path),
+        });
+      }
+    },
+    [currentProject, updateFeature, queryClient]
+  );
+
+  // Persist feature creation to API
+  // Throws on failure so callers can handle it (e.g., remove the feature from state)
+  const persistFeatureCreate = useCallback(
+    async (feature: Feature) => {
+      if (!currentProject) return;
+
+      const api = getElectronAPI();
+      if (!api.features) {
+        throw new Error('Features API not available');
+      }
+
+      // Cancel any in-flight refetches to prevent them from overwriting our optimistic update
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.features.all(currentProject.path),
+        exact: true,
+      });
+
+      // Capture previous cache snapshot for synchronous rollback on error
+      const previousFeatures = queryClient.getQueryData<Feature[]>(
+        queryKeys.features.all(currentProject.path)
+      );
+
+      // Optimistically add to React Query cache for immediate board refresh
+      queryClient.setQueryData<Feature[]>(
+        queryKeys.features.all(currentProject.path),
+        (existing) => (existing ? [...existing, feature] : [feature])
+      );
+
+      try {
+        const result = await api.features.create(currentProject.path, feature as ApiFeature);
+        if (result.success && result.feature) {
+          updateFeature(result.feature.id, result.feature as Partial<Feature>);
+          // Update cache with server-confirmed feature before invalidating
+          queryClient.setQueryData<Feature[]>(
+            queryKeys.features.all(currentProject.path),
+            (features) => {
+              if (!features) return features;
+              return features.map((f) =>
+                f.id === result.feature!.id ? { ...f, ...(result.feature as Feature) } : f
+              );
+            }
+          );
+        } else if (!result.success) {
+          throw new Error(result.error || 'Failed to create feature on server');
+        }
+        // Always invalidate to sync with server state
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.features.all(currentProject.path),
+        });
+      } catch (error) {
+        logger.error('Failed to persist feature creation:', error);
+        // Rollback optimistic update synchronously on error
+        if (previousFeatures) {
+          queryClient.setQueryData(queryKeys.features.all(currentProject.path), previousFeatures);
+        }
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.features.all(currentProject.path),
+        });
+        throw error;
+      }
+    },
+    [currentProject, updateFeature, queryClient]
+  );
+
+  // Persist feature deletion to API
+  const persistFeatureDelete = useCallback(
+    async (featureId: string) => {
+      if (!currentProject) return;
+
+      // Cancel any in-flight refetches to prevent them from overwriting our optimistic update
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.features.all(currentProject.path),
+        exact: true,
+      });
+
+      // Optimistically remove from React Query cache for immediate board refresh
+      const previousFeatures = queryClient.getQueryData<Feature[]>(
+        queryKeys.features.all(currentProject.path)
+      );
+      queryClient.setQueryData<Feature[]>(
+        queryKeys.features.all(currentProject.path),
+        (existing) => (existing ? existing.filter((f) => f.id !== featureId) : existing)
+      );
+
+      const api = getElectronAPI();
+      if (!api.features) {
+        // Rollback optimistic deletion since we can't persist
+        queryClient.setQueryData(queryKeys.features.all(currentProject.path), previousFeatures);
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.features.all(currentProject.path),
+        });
+        throw new Error('Features API not available');
+      }
+
+      try {
+        await api.features.delete(currentProject.path, featureId);
+        // Invalidate to sync with server state
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.features.all(currentProject.path),
+        });
+      } catch (error) {
+        logger.error('Failed to persist feature deletion:', error);
+        // Rollback optimistic update on error
+        if (previousFeatures) {
+          queryClient.setQueryData(queryKeys.features.all(currentProject.path), previousFeatures);
+        }
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.features.all(currentProject.path),
+        });
+        throw error;
+      }
+    },
+    [currentProject, queryClient]
+  );
+
+  return {
+    persistFeatureCreate,
+    persistFeatureUpdate,
+    persistFeatureDelete,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/hooks/use-follow-up-state.ts b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-follow-up-state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5dd972b9bb1594180be05dc42c758cecfaca167e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-follow-up-state.ts
@@ -0,0 +1,67 @@
+import { useState, useCallback } from 'react';
+import { Feature } from '@/store/app-store';
+import {
+  FeatureImagePath as DescriptionImagePath,
+  ImagePreviewMap,
+} from '@/components/ui/description-image-dropzone';
+import type { FollowUpHistoryEntry } from '../dialogs/follow-up-dialog';
+
+/**
+ * Custom hook for managing follow-up dialog state including prompt history
+ */
+export function useFollowUpState() {
+  const [showFollowUpDialog, setShowFollowUpDialog] = useState(false);
+  const [followUpFeature, setFollowUpFeature] = useState<Feature | null>(null);
+  const [followUpPrompt, setFollowUpPrompt] = useState('');
+  const [followUpImagePaths, setFollowUpImagePaths] = useState<DescriptionImagePath[]>([]);
+  const [followUpPreviewMap, setFollowUpPreviewMap] = useState<ImagePreviewMap>(() => new Map());
+  const [followUpPromptHistory, setFollowUpPromptHistory] = useState<FollowUpHistoryEntry[]>([]);
+
+  const resetFollowUpState = useCallback(() => {
+    setShowFollowUpDialog(false);
+    setFollowUpFeature(null);
+    setFollowUpPrompt('');
+    setFollowUpImagePaths([]);
+    setFollowUpPreviewMap(new Map());
+    setFollowUpPromptHistory([]);
+  }, []);
+
+  const handleFollowUpDialogChange = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        resetFollowUpState();
+      } else {
+        setShowFollowUpDialog(open);
+      }
+    },
+    [resetFollowUpState]
+  );
+
+  /**
+   * Adds a new entry to the prompt history
+   */
+  const addToPromptHistory = useCallback((entry: FollowUpHistoryEntry) => {
+    setFollowUpPromptHistory((prev) => [...prev, entry]);
+  }, []);
+
+  return {
+    // State
+    showFollowUpDialog,
+    followUpFeature,
+    followUpPrompt,
+    followUpImagePaths,
+    followUpPreviewMap,
+    followUpPromptHistory,
+    // Setters
+    setShowFollowUpDialog,
+    setFollowUpFeature,
+    setFollowUpPrompt,
+    setFollowUpImagePaths,
+    setFollowUpPreviewMap,
+    setFollowUpPromptHistory,
+    // Helpers
+    resetFollowUpState,
+    handleFollowUpDialogChange,
+    addToPromptHistory,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/hooks/use-list-view-state.ts b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-list-view-state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5d9bca763085748d6cc192bf0e05ef14a16126ff
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-list-view-state.ts
@@ -0,0 +1,223 @@
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { getJSON, setJSON } from '@/lib/storage';
+import type { ViewMode } from '../components/view-toggle';
+
+// Re-export ViewMode for convenience
+export type { ViewMode };
+
+/** Columns that can be sorted in the list view */
+export type SortColumn = 'title' | 'status' | 'category' | 'priority' | 'createdAt' | 'updatedAt';
+
+/** Sort direction */
+export type SortDirection = 'asc' | 'desc';
+
+/** Sort configuration */
+export interface SortConfig {
+  column: SortColumn;
+  direction: SortDirection;
+}
+
+/** Persisted state for the list view */
+interface ListViewPersistedState {
+  viewMode: ViewMode;
+  sortConfig: SortConfig;
+}
+
+/** Storage key for list view preferences */
+const STORAGE_KEY = 'automaker:list-view-state';
+
+/** Default sort configuration */
+const DEFAULT_SORT_CONFIG: SortConfig = {
+  column: 'createdAt',
+  direction: 'desc',
+};
+
+/** Default persisted state */
+const DEFAULT_STATE: ListViewPersistedState = {
+  viewMode: 'kanban',
+  sortConfig: DEFAULT_SORT_CONFIG,
+};
+
+/**
+ * Validates and returns a valid ViewMode, defaulting to 'kanban' if invalid
+ */
+function validateViewMode(value: unknown): ViewMode {
+  if (value === 'kanban' || value === 'list') {
+    return value;
+  }
+  return 'kanban';
+}
+
+/**
+ * Validates and returns a valid SortColumn, defaulting to 'createdAt' if invalid
+ */
+function validateSortColumn(value: unknown): SortColumn {
+  const validColumns: SortColumn[] = [
+    'title',
+    'status',
+    'category',
+    'priority',
+    'createdAt',
+    'updatedAt',
+  ];
+  if (typeof value === 'string' && validColumns.includes(value as SortColumn)) {
+    return value as SortColumn;
+  }
+  return 'createdAt';
+}
+
+/**
+ * Validates and returns a valid SortDirection, defaulting to 'desc' if invalid
+ */
+function validateSortDirection(value: unknown): SortDirection {
+  if (value === 'asc' || value === 'desc') {
+    return value;
+  }
+  return 'desc';
+}
+
+/**
+ * Load persisted state from localStorage with validation
+ */
+function loadPersistedState(): ListViewPersistedState {
+  const stored = getJSON<Partial<ListViewPersistedState>>(STORAGE_KEY);
+
+  if (!stored) {
+    return DEFAULT_STATE;
+  }
+
+  return {
+    viewMode: validateViewMode(stored.viewMode),
+    sortConfig: {
+      column: validateSortColumn(stored.sortConfig?.column),
+      direction: validateSortDirection(stored.sortConfig?.direction),
+    },
+  };
+}
+
+/**
+ * Save state to localStorage
+ */
+function savePersistedState(state: ListViewPersistedState): void {
+  setJSON(STORAGE_KEY, state);
+}
+
+export interface UseListViewStateReturn {
+  /** Current view mode (kanban or list) */
+  viewMode: ViewMode;
+  /** Set the view mode */
+  setViewMode: (mode: ViewMode) => void;
+  /** Toggle between kanban and list views */
+  toggleViewMode: () => void;
+  /** Whether the current view is list mode */
+  isListView: boolean;
+  /** Whether the current view is kanban mode */
+  isKanbanView: boolean;
+  /** Current sort configuration */
+  sortConfig: SortConfig;
+  /** Set the sort column (toggles direction if same column) */
+  setSortColumn: (column: SortColumn) => void;
+  /** Set the full sort configuration */
+  setSortConfig: (config: SortConfig) => void;
+  /** Reset sort to default */
+  resetSort: () => void;
+}
+
+/**
+ * Hook for managing list view state including view mode, sorting, and localStorage persistence.
+ *
+ * Features:
+ * - View mode toggle between kanban and list views
+ * - Sort configuration with column and direction
+ * - Automatic persistence to localStorage
+ * - Validated state restoration on mount
+ *
+ * @example
+ * ```tsx
+ * const { viewMode, setViewMode, sortConfig, setSortColumn } = useListViewState();
+ *
+ * // Toggle view mode
+ * <ViewToggle viewMode={viewMode} onViewModeChange={setViewMode} />
+ *
+ * // Sort by column (clicking same column toggles direction)
+ * <TableHeader onClick={() => setSortColumn('title')}>Title</TableHeader>
+ * ```
+ */
+export function useListViewState(): UseListViewStateReturn {
+  // Initialize state from localStorage
+  const [viewMode, setViewModeState] = useState<ViewMode>(() => loadPersistedState().viewMode);
+  const [sortConfig, setSortConfigState] = useState<SortConfig>(
+    () => loadPersistedState().sortConfig
+  );
+
+  // Derived state
+  const isListView = viewMode === 'list';
+  const isKanbanView = viewMode === 'kanban';
+
+  // Persist state changes to localStorage
+  useEffect(() => {
+    savePersistedState({ viewMode, sortConfig });
+  }, [viewMode, sortConfig]);
+
+  // Set view mode
+  const setViewMode = useCallback((mode: ViewMode) => {
+    setViewModeState(mode);
+  }, []);
+
+  // Toggle between kanban and list views
+  const toggleViewMode = useCallback(() => {
+    setViewModeState((prev) => (prev === 'kanban' ? 'list' : 'kanban'));
+  }, []);
+
+  // Set sort column - toggles direction if same column is clicked
+  const setSortColumn = useCallback((column: SortColumn) => {
+    setSortConfigState((prev) => {
+      if (prev.column === column) {
+        // Toggle direction if same column
+        return {
+          column,
+          direction: prev.direction === 'asc' ? 'desc' : 'asc',
+        };
+      }
+      // New column - default to descending for dates, ascending for others
+      const defaultDirection: SortDirection =
+        column === 'createdAt' || column === 'updatedAt' ? 'desc' : 'asc';
+      return { column, direction: defaultDirection };
+    });
+  }, []);
+
+  // Set full sort configuration
+  const setSortConfig = useCallback((config: SortConfig) => {
+    setSortConfigState(config);
+  }, []);
+
+  // Reset sort to default
+  const resetSort = useCallback(() => {
+    setSortConfigState(DEFAULT_SORT_CONFIG);
+  }, []);
+
+  return useMemo(
+    () => ({
+      viewMode,
+      setViewMode,
+      toggleViewMode,
+      isListView,
+      isKanbanView,
+      sortConfig,
+      setSortColumn,
+      setSortConfig,
+      resetSort,
+    }),
+    [
+      viewMode,
+      setViewMode,
+      toggleViewMode,
+      isListView,
+      isKanbanView,
+      sortConfig,
+      setSortColumn,
+      setSortConfig,
+      resetSort,
+    ]
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/hooks/use-selection-mode.ts b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-selection-mode.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e81dca1091e84cb52e7955438f63026060873f02
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/hooks/use-selection-mode.ts
@@ -0,0 +1,91 @@
+import { useState, useCallback, useEffect } from 'react';
+
+export type SelectionTarget = 'backlog' | 'waiting_approval' | null;
+
+interface UseSelectionModeReturn {
+  isSelectionMode: boolean;
+  selectionTarget: SelectionTarget;
+  selectedFeatureIds: Set<string>;
+  selectedCount: number;
+  toggleSelectionMode: (target?: SelectionTarget) => void;
+  toggleFeatureSelection: (featureId: string) => void;
+  selectAll: (featureIds: string[]) => void;
+  clearSelection: () => void;
+  isFeatureSelected: (featureId: string) => boolean;
+  exitSelectionMode: () => void;
+}
+
+export function useSelectionMode(): UseSelectionModeReturn {
+  const [selectionTarget, setSelectionTarget] = useState<SelectionTarget>(null);
+  const [selectedFeatureIds, setSelectedFeatureIds] = useState<Set<string>>(new Set());
+
+  const isSelectionMode = selectionTarget !== null;
+
+  const toggleSelectionMode = useCallback((target: SelectionTarget = 'backlog') => {
+    setSelectionTarget((prev) => {
+      if (prev === target) {
+        // Exiting selection mode - clear selection
+        setSelectedFeatureIds(new Set());
+        return null;
+      }
+      // Switching to a different target or entering selection mode
+      setSelectedFeatureIds(new Set());
+      return target;
+    });
+  }, []);
+
+  const exitSelectionMode = useCallback(() => {
+    setSelectionTarget(null);
+    setSelectedFeatureIds(new Set());
+  }, []);
+
+  const toggleFeatureSelection = useCallback((featureId: string) => {
+    setSelectedFeatureIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(featureId)) {
+        next.delete(featureId);
+      } else {
+        next.add(featureId);
+      }
+      return next;
+    });
+  }, []);
+
+  const selectAll = useCallback((featureIds: string[]) => {
+    setSelectedFeatureIds(new Set(featureIds));
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    setSelectedFeatureIds(new Set());
+  }, []);
+
+  const isFeatureSelected = useCallback(
+    (featureId: string) => selectedFeatureIds.has(featureId),
+    [selectedFeatureIds]
+  );
+
+  // Handle Escape key to exit selection mode
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isSelectionMode) {
+        exitSelectionMode();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isSelectionMode, exitSelectionMode]);
+
+  return {
+    isSelectionMode,
+    selectionTarget,
+    selectedFeatureIds,
+    selectedCount: selectedFeatureIds.size,
+    toggleSelectionMode,
+    toggleFeatureSelection,
+    selectAll,
+    clearSelection,
+    isFeatureSelected,
+    exitSelectionMode,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/init-script-indicator.tsx b/temp_repo/apps/ui/src/components/views/board-view/init-script-indicator.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..97a997bc7dfa0864f1e5c5684c2559517f629b0a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/init-script-indicator.tsx
@@ -0,0 +1,210 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Terminal, Check, X, ChevronDown, ChevronUp } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { useAppStore, type InitScriptState } from '@/store/app-store';
+import { AnsiOutput } from '@/components/ui/ansi-output';
+
+interface InitScriptIndicatorProps {
+  projectPath: string;
+}
+
+interface SingleIndicatorProps {
+  stateKey: string;
+  state: InitScriptState;
+  onDismiss: (key: string) => void;
+  isOnlyOne: boolean; // Whether this is the only indicator shown
+  autoDismiss: boolean; // Whether to auto-dismiss after completion
+}
+
+function SingleIndicator({
+  stateKey,
+  state,
+  onDismiss,
+  isOnlyOne,
+  autoDismiss,
+}: SingleIndicatorProps) {
+  const [showLogs, setShowLogs] = useState(false);
+  const logsEndRef = useRef<HTMLDivElement>(null);
+
+  const { status, output, branch, error } = state;
+
+  // Auto-scroll to bottom when new output arrives
+  useEffect(() => {
+    if (showLogs && logsEndRef.current) {
+      logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [output, showLogs]);
+
+  // Auto-expand logs when script starts (only if it's the only one or running)
+  useEffect(() => {
+    if (status === 'running' && isOnlyOne) {
+      setShowLogs(true);
+    }
+  }, [status, isOnlyOne]);
+
+  // Auto-dismiss after completion (5 seconds)
+  useEffect(() => {
+    if (autoDismiss && (status === 'success' || status === 'failed')) {
+      const timer = setTimeout(() => {
+        onDismiss(stateKey);
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [status, autoDismiss, stateKey, onDismiss]);
+
+  if (status === 'idle') return null;
+
+  return (
+    <div
+      className={cn(
+        'bg-card border border-border rounded-lg shadow-lg',
+        'min-w-[350px] max-w-[500px]',
+        'animate-in slide-in-from-right-5 duration-200'
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between p-3 border-b border-border/50">
+        <div className="flex items-center gap-2">
+          {status === 'running' && <Spinner size="sm" />}
+          {status === 'success' && <Check className="w-4 h-4 text-green-500" />}
+          {status === 'failed' && <X className="w-4 h-4 text-red-500" />}
+          <span className="font-medium text-sm">
+            Init Script{' '}
+            {status === 'running' ? 'Running' : status === 'success' ? 'Completed' : 'Failed'}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => setShowLogs(!showLogs)}
+            className="p-1 hover:bg-accent rounded transition-colors"
+            title={showLogs ? 'Hide logs' : 'Show logs'}
+          >
+            {showLogs ? (
+              <ChevronDown className="w-4 h-4 text-muted-foreground" />
+            ) : (
+              <ChevronUp className="w-4 h-4 text-muted-foreground" />
+            )}
+          </button>
+          {status !== 'running' && (
+            <button
+              onClick={() => onDismiss(stateKey)}
+              className="p-1 hover:bg-accent rounded transition-colors"
+              title="Dismiss"
+            >
+              <X className="w-4 h-4 text-muted-foreground" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Branch info */}
+      <div className="px-3 py-2 text-xs text-muted-foreground flex items-center gap-2">
+        <Terminal className="w-3.5 h-3.5" />
+        <span>Branch: {branch}</span>
+      </div>
+
+      {/* Logs (collapsible) */}
+      {showLogs && (
+        <div className="border-t border-border/50">
+          <div className="p-3 max-h-[300px] overflow-y-auto">
+            {output.length > 0 ? (
+              <AnsiOutput text={output.join('')} />
+            ) : (
+              <div className="text-xs text-muted-foreground/60 text-center py-2">
+                {status === 'running' ? 'Waiting for output...' : 'No output'}
+              </div>
+            )}
+            {error && <div className="mt-2 text-red-500 text-xs font-medium">Error: {error}</div>}
+            <div ref={logsEndRef} />
+          </div>
+        </div>
+      )}
+
+      {/* Status bar for completed states */}
+      {status !== 'running' && (
+        <div
+          className={cn(
+            'px-3 py-2 text-xs',
+            status === 'success' ? 'bg-green-500/10 text-green-600' : 'bg-red-500/10 text-red-600'
+          )}
+        >
+          {status === 'success'
+            ? 'Initialization completed successfully'
+            : 'Initialization failed - worktree is still usable'}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function InitScriptIndicator({ projectPath }: InitScriptIndicatorProps) {
+  const getInitScriptStatesForProject = useAppStore((s) => s.getInitScriptStatesForProject);
+  const clearInitScriptState = useAppStore((s) => s.clearInitScriptState);
+  const getAutoDismissInitScriptIndicator = useAppStore((s) => s.getAutoDismissInitScriptIndicator);
+  const [dismissedKeys, setDismissedKeys] = useState<Set<string>>(new Set());
+
+  // Get auto-dismiss setting
+  const autoDismiss = getAutoDismissInitScriptIndicator(projectPath);
+
+  // Get all init script states for this project
+  const allStates = getInitScriptStatesForProject(projectPath);
+
+  // Filter out dismissed and idle states
+  const activeStates = allStates.filter(
+    ({ key, state }) => !dismissedKeys.has(key) && state.status !== 'idle'
+  );
+
+  // Reset dismissed keys when a new script starts for a branch
+  useEffect(() => {
+    const runningKeys = allStates
+      .filter(({ state }) => state.status === 'running')
+      .map(({ key }) => key);
+
+    if (runningKeys.length > 0) {
+      setDismissedKeys((prev) => {
+        const newSet = new Set(prev);
+        runningKeys.forEach((key) => newSet.delete(key));
+        return newSet;
+      });
+    }
+  }, [allStates]);
+
+  const handleDismiss = useCallback(
+    (key: string) => {
+      setDismissedKeys((prev) => new Set(prev).add(key));
+      // Extract branch from key (format: "projectPath::branch")
+      const branch = key.split('::')[1];
+      if (branch) {
+        // Clear state after a delay to allow for future scripts
+        setTimeout(() => {
+          clearInitScriptState(projectPath, branch);
+        }, 100);
+      }
+    },
+    [projectPath, clearInitScriptState]
+  );
+
+  if (activeStates.length === 0) return null;
+
+  return (
+    <div
+      className={cn(
+        'fixed bottom-4 right-4 z-50 flex flex-col gap-2',
+        'max-h-[calc(100dvh-120px)] overflow-y-auto',
+        'scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent'
+      )}
+    >
+      {activeStates.map(({ key, state }) => (
+        <SingleIndicator
+          key={key}
+          stateKey={key}
+          state={state}
+          onDismiss={handleDismiss}
+          isOnlyOne={activeStates.length === 1}
+          autoDismiss={autoDismiss}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/kanban-board.tsx b/temp_repo/apps/ui/src/components/views/board-view/kanban-board.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f3b1c603441fa5a45e4d31bc842db65365dc5df7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/kanban-board.tsx
@@ -0,0 +1,727 @@
+import {
+  memo,
+  useMemo,
+  useRef,
+  useState,
+  useCallback,
+  useEffect,
+  type RefObject,
+  type ReactNode,
+  type UIEvent,
+} from 'react';
+import { DragOverlay } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { Button } from '@/components/ui/button';
+import { KanbanColumn, KanbanCard, EmptyStateCard } from './components';
+import { Feature, useAppStore, formatShortcut } from '@/store/app-store';
+import {
+  Archive,
+  Settings2,
+  CheckSquare,
+  GripVertical,
+  Plus,
+  CheckCircle2,
+  Zap,
+} from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useResponsiveKanban } from '@/hooks/use-responsive-kanban';
+import { getColumnsWithPipeline, type ColumnId } from './constants';
+import type { PipelineConfig, FeatureTemplate } from '@automaker/types';
+import { AddFeatureButton } from './components/add-feature-button';
+import { cn } from '@/lib/utils';
+interface KanbanBoardProps {
+  activeFeature: Feature | null;
+  getColumnFeatures: (columnId: ColumnId) => Feature[];
+  backgroundImageStyle: React.CSSProperties;
+  backgroundSettings: {
+    columnOpacity: number;
+    columnBorderEnabled: boolean;
+    hideScrollbar: boolean;
+    cardOpacity: number;
+    cardGlassmorphism: boolean;
+    cardBorderEnabled: boolean;
+    cardBorderOpacity: number;
+  };
+  onEdit: (feature: Feature) => void;
+  onDelete: (featureId: string) => void;
+  onViewOutput: (feature: Feature) => void;
+  onVerify: (feature: Feature) => void;
+  onResume: (feature: Feature) => void;
+  onForceStop: (feature: Feature) => void;
+  onManualVerify: (feature: Feature) => void;
+  onMoveBackToInProgress: (feature: Feature) => void;
+  onFollowUp: (feature: Feature) => void;
+  onComplete: (feature: Feature) => void;
+  onImplement: (feature: Feature) => void;
+  onViewPlan: (feature: Feature) => void;
+  onApprovePlan: (feature: Feature) => void;
+  onSpawnTask?: (feature: Feature) => void;
+  onDuplicate?: (feature: Feature) => void;
+  onDuplicateAsChild?: (feature: Feature) => void;
+  onDuplicateAsChildMultiple?: (feature: Feature) => void;
+  featuresWithContext: Set<string>;
+  runningAutoTasks: string[];
+  onArchiveAllVerified: () => void;
+  onAddFeature: () => void;
+  onQuickAdd: () => void;
+  onTemplateSelect: (template: FeatureTemplate) => void;
+  templates: FeatureTemplate[];
+  addFeatureShortcut?: string;
+  onShowCompletedModal: () => void;
+  completedCount: number;
+  pipelineConfig: PipelineConfig | null;
+  onOpenPipelineSettings?: () => void;
+  // Selection mode props
+  isSelectionMode?: boolean;
+  selectionTarget?: 'backlog' | 'waiting_approval' | null;
+  selectedFeatureIds?: Set<string>;
+  onToggleFeatureSelection?: (featureId: string) => void;
+  onToggleSelectionMode?: (target?: 'backlog' | 'waiting_approval') => void;
+  // Empty state action props
+  onAiSuggest?: () => void;
+  /** Whether currently dragging (hides empty states during drag) */
+  isDragging?: boolean;
+  /** Whether the board is in read-only mode */
+  isReadOnly?: boolean;
+  /** Additional className for custom styling (e.g., transition classes) */
+  className?: string;
+}
+
+const KANBAN_VIRTUALIZATION_THRESHOLD = 40;
+const KANBAN_CARD_ESTIMATED_HEIGHT_PX = 220;
+const KANBAN_CARD_GAP_PX = 10;
+const KANBAN_OVERSCAN_COUNT = 6;
+const VIRTUALIZATION_MEASURE_EPSILON_PX = 1;
+const REDUCED_CARD_OPACITY_PERCENT = 85;
+
+type VirtualListItem = { id: string };
+
+interface VirtualListState<Item extends VirtualListItem> {
+  contentRef: RefObject<HTMLDivElement | null>;
+  onScroll: (event: UIEvent<HTMLDivElement>) => void;
+  itemIds: string[];
+  visibleItems: Item[];
+  totalHeight: number;
+  offsetTop: number;
+  startIndex: number;
+  shouldVirtualize: boolean;
+  registerItem: (id: string) => (node: HTMLDivElement | null) => void;
+}
+
+interface VirtualizedListProps<Item extends VirtualListItem> {
+  items: Item[];
+  isDragging: boolean;
+  estimatedItemHeight: number;
+  itemGap: number;
+  overscan: number;
+  virtualizationThreshold: number;
+  children: (state: VirtualListState<Item>) => ReactNode;
+}
+
+function findIndexForOffset(itemEnds: number[], offset: number): number {
+  let low = 0;
+  let high = itemEnds.length - 1;
+  let result = itemEnds.length;
+
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+    if (itemEnds[mid] >= offset) {
+      result = mid;
+      high = mid - 1;
+    } else {
+      low = mid + 1;
+    }
+  }
+
+  return Math.min(result, itemEnds.length - 1);
+}
+
+// Virtualize long columns while keeping full DOM during drag interactions.
+function VirtualizedList<Item extends VirtualListItem>({
+  items,
+  isDragging,
+  estimatedItemHeight,
+  itemGap,
+  overscan,
+  virtualizationThreshold,
+  children,
+}: VirtualizedListProps<Item>) {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const measurementsRef = useRef<Map<string, number>>(new Map());
+  const scrollRafRef = useRef<number | null>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewportHeight, setViewportHeight] = useState(0);
+  const [measureVersion, setMeasureVersion] = useState(0);
+
+  const itemIds = useMemo(() => items.map((item) => item.id), [items]);
+  const shouldVirtualize = !isDragging && items.length >= virtualizationThreshold;
+
+  const itemSizes = useMemo(() => {
+    return items.map((item) => {
+      const measured = measurementsRef.current.get(item.id);
+      const resolvedHeight = measured ?? estimatedItemHeight;
+      return resolvedHeight + itemGap;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items, estimatedItemHeight, itemGap, measureVersion]);
+
+  const itemStarts = useMemo(() => {
+    let offset = 0;
+    return itemSizes.map((size) => {
+      const start = offset;
+      offset += size;
+      return start;
+    });
+  }, [itemSizes]);
+
+  const itemEnds = useMemo(() => {
+    return itemStarts.map((start, index) => start + itemSizes[index]);
+  }, [itemStarts, itemSizes]);
+
+  const totalHeight = itemEnds.length > 0 ? itemEnds[itemEnds.length - 1] : 0;
+
+  const { startIndex, endIndex, offsetTop } = useMemo(() => {
+    if (!shouldVirtualize || items.length === 0) {
+      return { startIndex: 0, endIndex: items.length, offsetTop: 0 };
+    }
+
+    const firstVisible = findIndexForOffset(itemEnds, scrollTop);
+    const lastVisible = findIndexForOffset(itemEnds, scrollTop + viewportHeight);
+    const overscannedStart = Math.max(0, firstVisible - overscan);
+    const overscannedEnd = Math.min(items.length, lastVisible + overscan + 1);
+
+    return {
+      startIndex: overscannedStart,
+      endIndex: overscannedEnd,
+      offsetTop: itemStarts[overscannedStart] ?? 0,
+    };
+  }, [shouldVirtualize, items.length, itemEnds, itemStarts, overscan, scrollTop, viewportHeight]);
+
+  const visibleItems = shouldVirtualize ? items.slice(startIndex, endIndex) : items;
+
+  const onScroll = useCallback((event: UIEvent<HTMLDivElement>) => {
+    const target = event.currentTarget;
+    if (scrollRafRef.current !== null) {
+      cancelAnimationFrame(scrollRafRef.current);
+    }
+    scrollRafRef.current = requestAnimationFrame(() => {
+      setScrollTop(target.scrollTop);
+      scrollRafRef.current = null;
+    });
+  }, []);
+
+  const registerItem = useCallback(
+    (id: string) => (node: HTMLDivElement | null) => {
+      if (!node || !shouldVirtualize) return;
+      const measuredHeight = node.getBoundingClientRect().height;
+      const previousHeight = measurementsRef.current.get(id);
+      if (
+        previousHeight === undefined ||
+        Math.abs(previousHeight - measuredHeight) > VIRTUALIZATION_MEASURE_EPSILON_PX
+      ) {
+        measurementsRef.current.set(id, measuredHeight);
+        setMeasureVersion((value) => value + 1);
+      }
+    },
+    [shouldVirtualize]
+  );
+
+  useEffect(() => {
+    const container = contentRef.current;
+    if (!container || typeof window === 'undefined') return;
+
+    const updateHeight = () => {
+      setViewportHeight(container.clientHeight);
+    };
+
+    updateHeight();
+
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', updateHeight);
+      return () => window.removeEventListener('resize', updateHeight);
+    }
+
+    const observer = new ResizeObserver(() => updateHeight());
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!shouldVirtualize) return;
+    const currentIds = new Set(items.map((item) => item.id));
+    for (const id of measurementsRef.current.keys()) {
+      if (!currentIds.has(id)) {
+        measurementsRef.current.delete(id);
+      }
+    }
+  }, [items, shouldVirtualize]);
+
+  useEffect(() => {
+    return () => {
+      if (scrollRafRef.current !== null) {
+        cancelAnimationFrame(scrollRafRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      {children({
+        contentRef,
+        onScroll,
+        itemIds,
+        visibleItems,
+        totalHeight,
+        offsetTop,
+        startIndex,
+        shouldVirtualize,
+        registerItem,
+      })}
+    </>
+  );
+}
+
+// Stable empty Set to use as default prop value. Using `new Set()` inline in
+// the destructuring creates a new reference on every render, defeating memo.
+const EMPTY_FEATURE_IDS = new Set<string>();
+
+export const KanbanBoard = memo(function KanbanBoard({
+  activeFeature,
+  getColumnFeatures,
+  backgroundImageStyle,
+  backgroundSettings,
+  onEdit,
+  onDelete,
+  onViewOutput,
+  onVerify,
+  onResume,
+  onForceStop,
+  onManualVerify,
+  onMoveBackToInProgress,
+  onFollowUp,
+  onComplete,
+  onImplement,
+  onViewPlan,
+  onApprovePlan,
+  onSpawnTask,
+  onDuplicate,
+  onDuplicateAsChild,
+  onDuplicateAsChildMultiple,
+  featuresWithContext,
+  runningAutoTasks,
+  onArchiveAllVerified,
+  onAddFeature,
+  onQuickAdd,
+  onTemplateSelect,
+  templates,
+  addFeatureShortcut: addFeatureShortcutProp,
+  onShowCompletedModal,
+  completedCount,
+  pipelineConfig,
+  onOpenPipelineSettings,
+  isSelectionMode = false,
+  selectionTarget = null,
+  selectedFeatureIds = EMPTY_FEATURE_IDS,
+  onToggleFeatureSelection,
+  onToggleSelectionMode,
+  onAiSuggest,
+  isDragging = false,
+  isReadOnly = false,
+  className,
+}: KanbanBoardProps) {
+  // Generate columns including pipeline steps
+  const columns = useMemo(() => getColumnsWithPipeline(pipelineConfig), [pipelineConfig]);
+
+  // Get the keyboard shortcut for adding features
+  const keyboardShortcuts = useAppStore((state) => state.keyboardShortcuts);
+  const addFeatureShortcut = addFeatureShortcutProp || keyboardShortcuts.addFeature || 'N';
+
+  // Use responsive column widths based on window size
+  // containerStyle handles centering and ensures columns fit without horizontal scroll in Electron
+  const { columnWidth, containerStyle } = useResponsiveKanban(columns.length);
+
+  return (
+    <div
+      className={cn(
+        'flex-1 overflow-x-auto px-5 pt-2 sm:pt-4 pb-0 sm:pb-4 relative',
+        'transition-opacity duration-200',
+        className
+      )}
+      style={backgroundImageStyle}
+    >
+      <div className="h-full pt-1 pb-0 sm:pb-1" style={containerStyle}>
+        {columns.map((column) => {
+          const columnFeatures = getColumnFeatures(column.id as ColumnId);
+          return (
+            <VirtualizedList
+              key={column.id}
+              items={columnFeatures}
+              isDragging={isDragging}
+              estimatedItemHeight={KANBAN_CARD_ESTIMATED_HEIGHT_PX}
+              itemGap={KANBAN_CARD_GAP_PX}
+              overscan={KANBAN_OVERSCAN_COUNT}
+              virtualizationThreshold={KANBAN_VIRTUALIZATION_THRESHOLD}
+            >
+              {({
+                contentRef,
+                onScroll,
+                itemIds,
+                visibleItems,
+                totalHeight,
+                offsetTop,
+                startIndex,
+                shouldVirtualize,
+                registerItem,
+              }) => (
+                <KanbanColumn
+                  id={column.id}
+                  title={column.title}
+                  colorClass={column.colorClass}
+                  count={columnFeatures.length}
+                  width={columnWidth}
+                  opacity={backgroundSettings.columnOpacity}
+                  showBorder={backgroundSettings.columnBorderEnabled}
+                  hideScrollbar={backgroundSettings.hideScrollbar}
+                  contentRef={contentRef}
+                  onScroll={shouldVirtualize ? onScroll : undefined}
+                  disableItemSpacing={shouldVirtualize}
+                  contentClassName="perf-contain"
+                  headerAction={
+                    column.id === 'verified' ? (
+                      <div className="flex items-center gap-1">
+                        {columnFeatures.length > 0 && (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-6 w-6 p-0"
+                                onClick={onArchiveAllVerified}
+                                data-testid="archive-all-verified-button"
+                              >
+                                <CheckCircle2 className="w-3.5 h-3.5" />
+                              </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              <p>Complete All</p>
+                            </TooltipContent>
+                          </Tooltip>
+                        )}
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-6 w-6 p-0 relative"
+                              onClick={onShowCompletedModal}
+                              data-testid="completed-features-button"
+                            >
+                              <Archive className="w-3.5 h-3.5 text-muted-foreground" />
+                              {completedCount > 0 && (
+                                <span className="absolute -top-1 -right-1 bg-brand-500 text-white text-[8px] font-bold rounded-full w-3.5 h-3.5 flex items-center justify-center">
+                                  {completedCount > 99 ? '99+' : completedCount}
+                                </span>
+                              )}
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Completed Features ({completedCount})</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
+                    ) : column.id === 'backlog' ? (
+                      <div className="flex items-center gap-1">
+                        <div className="flex items-center">
+                          <Button
+                            variant="default"
+                            size="sm"
+                            className="h-6 w-6 p-0 rounded-r-none"
+                            onClick={onAddFeature}
+                            title="Add Feature"
+                            data-testid="add-feature-button"
+                          >
+                            <Plus className="w-3.5 h-3.5" />
+                          </Button>
+                          <Button
+                            variant="default"
+                            size="sm"
+                            className="h-6 w-6 p-0 rounded-l-none border-l border-primary-foreground/20"
+                            onClick={onQuickAdd}
+                            title="Quick Add Feature"
+                            data-testid="quick-add-feature-button"
+                          >
+                            <Zap className="w-3.5 h-3.5" />
+                          </Button>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className={`h-6 px-2 text-xs ${selectionTarget === 'backlog' ? 'text-primary bg-primary/10' : 'text-muted-foreground hover:text-foreground'}`}
+                          onClick={() => onToggleSelectionMode?.('backlog')}
+                          title={
+                            selectionTarget === 'backlog'
+                              ? 'Switch to Drag Mode'
+                              : 'Select Multiple'
+                          }
+                          data-testid="selection-mode-button"
+                        >
+                          {selectionTarget === 'backlog' ? (
+                            <>
+                              <GripVertical className="w-3.5 h-3.5 mr-1" />
+                              Drag
+                            </>
+                          ) : (
+                            <>
+                              <CheckSquare className="w-3.5 h-3.5 mr-1" />
+                              Select
+                            </>
+                          )}
+                        </Button>
+                      </div>
+                    ) : column.id === 'waiting_approval' ? (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className={`h-6 px-2 text-xs ${selectionTarget === 'waiting_approval' ? 'text-primary bg-primary/10' : 'text-muted-foreground hover:text-foreground'}`}
+                        onClick={() => onToggleSelectionMode?.('waiting_approval')}
+                        title={
+                          selectionTarget === 'waiting_approval'
+                            ? 'Switch to Drag Mode'
+                            : 'Select Multiple'
+                        }
+                        data-testid="waiting-approval-selection-mode-button"
+                      >
+                        {selectionTarget === 'waiting_approval' ? (
+                          <>
+                            <GripVertical className="w-3.5 h-3.5 mr-1" />
+                            Drag
+                          </>
+                        ) : (
+                          <>
+                            <CheckSquare className="w-3.5 h-3.5 mr-1" />
+                            Select
+                          </>
+                        )}
+                      </Button>
+                    ) : column.id === 'in_progress' ? (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+                        onClick={onOpenPipelineSettings}
+                        title="Pipeline Settings"
+                        data-testid="pipeline-settings-button"
+                      >
+                        <Settings2 className="w-3.5 h-3.5" />
+                      </Button>
+                    ) : column.isPipelineStep ? (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+                        onClick={onOpenPipelineSettings}
+                        title="Edit Pipeline Step"
+                        data-testid="edit-pipeline-step-button"
+                      >
+                        <Settings2 className="w-3.5 h-3.5" />
+                      </Button>
+                    ) : undefined
+                  }
+                  footerAction={
+                    column.id === 'backlog' ? (
+                      <AddFeatureButton
+                        onAddFeature={onAddFeature}
+                        onQuickAdd={onQuickAdd}
+                        onTemplateSelect={onTemplateSelect}
+                        templates={templates}
+                        fullWidth
+                        shortcut={formatShortcut(addFeatureShortcut, true)}
+                      />
+                    ) : undefined
+                  }
+                >
+                  {(() => {
+                    const reduceEffects = shouldVirtualize;
+                    const effectiveCardOpacity = reduceEffects
+                      ? Math.min(backgroundSettings.cardOpacity, REDUCED_CARD_OPACITY_PERCENT)
+                      : backgroundSettings.cardOpacity;
+                    const effectiveGlassmorphism =
+                      backgroundSettings.cardGlassmorphism && !reduceEffects;
+
+                    return (
+                      <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
+                        {/* Empty state card when column has no features */}
+                        {columnFeatures.length === 0 && !isDragging && (
+                          <EmptyStateCard
+                            columnId={column.id}
+                            columnTitle={column.title}
+                            addFeatureShortcut={addFeatureShortcut}
+                            isReadOnly={isReadOnly}
+                            onAiSuggest={column.id === 'backlog' ? onAiSuggest : undefined}
+                            opacity={effectiveCardOpacity}
+                            glassmorphism={effectiveGlassmorphism}
+                            customConfig={
+                              column.isPipelineStep
+                                ? {
+                                    title: `${column.title} Empty`,
+                                    description: `Features will appear here during the ${column.title.toLowerCase()} phase of the pipeline.`,
+                                  }
+                                : undefined
+                            }
+                          />
+                        )}
+                        {shouldVirtualize ? (
+                          <div className="relative" style={{ height: totalHeight }}>
+                            <div
+                              className="absolute left-0 right-0"
+                              style={{ transform: `translateY(${offsetTop}px)` }}
+                            >
+                              {visibleItems.map((feature, index) => {
+                                const absoluteIndex = startIndex + index;
+                                let shortcutKey: string | undefined;
+                                if (column.id === 'in_progress' && absoluteIndex < 10) {
+                                  shortcutKey =
+                                    absoluteIndex === 9 ? '0' : String(absoluteIndex + 1);
+                                }
+                                return (
+                                  <div
+                                    key={feature.id}
+                                    ref={registerItem(feature.id)}
+                                    style={{ marginBottom: `${KANBAN_CARD_GAP_PX}px` }}
+                                  >
+                                    <KanbanCard
+                                      feature={feature}
+                                      onEdit={() => onEdit(feature)}
+                                      onDelete={() => onDelete(feature.id)}
+                                      onViewOutput={() => onViewOutput(feature)}
+                                      onVerify={() => onVerify(feature)}
+                                      onResume={() => onResume(feature)}
+                                      onForceStop={() => onForceStop(feature)}
+                                      onManualVerify={() => onManualVerify(feature)}
+                                      onMoveBackToInProgress={() => onMoveBackToInProgress(feature)}
+                                      onFollowUp={() => onFollowUp(feature)}
+                                      onComplete={() => onComplete(feature)}
+                                      onImplement={() => onImplement(feature)}
+                                      onViewPlan={() => onViewPlan(feature)}
+                                      onApprovePlan={() => onApprovePlan(feature)}
+                                      onSpawnTask={() => onSpawnTask?.(feature)}
+                                      onDuplicate={() => onDuplicate?.(feature)}
+                                      onDuplicateAsChild={() => onDuplicateAsChild?.(feature)}
+                                      onDuplicateAsChildMultiple={
+                                        onDuplicateAsChildMultiple
+                                          ? () => onDuplicateAsChildMultiple(feature)
+                                          : undefined
+                                      }
+                                      hasContext={featuresWithContext.has(feature.id)}
+                                      isCurrentAutoTask={runningAutoTasks.includes(feature.id)}
+                                      shortcutKey={shortcutKey}
+                                      opacity={effectiveCardOpacity}
+                                      glassmorphism={effectiveGlassmorphism}
+                                      cardBorderEnabled={backgroundSettings.cardBorderEnabled}
+                                      cardBorderOpacity={backgroundSettings.cardBorderOpacity}
+                                      reduceEffects={reduceEffects}
+                                      isSelectionMode={isSelectionMode}
+                                      selectionTarget={selectionTarget}
+                                      isSelected={selectedFeatureIds.has(feature.id)}
+                                      onToggleSelect={() => onToggleFeatureSelection?.(feature.id)}
+                                    />
+                                  </div>
+                                );
+                              })}
+                            </div>
+                          </div>
+                        ) : (
+                          columnFeatures.map((feature, index) => {
+                            let shortcutKey: string | undefined;
+                            if (column.id === 'in_progress' && index < 10) {
+                              shortcutKey = index === 9 ? '0' : String(index + 1);
+                            }
+                            return (
+                              <KanbanCard
+                                key={feature.id}
+                                feature={feature}
+                                onEdit={() => onEdit(feature)}
+                                onDelete={() => onDelete(feature.id)}
+                                onViewOutput={() => onViewOutput(feature)}
+                                onVerify={() => onVerify(feature)}
+                                onResume={() => onResume(feature)}
+                                onForceStop={() => onForceStop(feature)}
+                                onManualVerify={() => onManualVerify(feature)}
+                                onMoveBackToInProgress={() => onMoveBackToInProgress(feature)}
+                                onFollowUp={() => onFollowUp(feature)}
+                                onComplete={() => onComplete(feature)}
+                                onImplement={() => onImplement(feature)}
+                                onViewPlan={() => onViewPlan(feature)}
+                                onApprovePlan={() => onApprovePlan(feature)}
+                                onSpawnTask={() => onSpawnTask?.(feature)}
+                                onDuplicate={() => onDuplicate?.(feature)}
+                                onDuplicateAsChild={() => onDuplicateAsChild?.(feature)}
+                                onDuplicateAsChildMultiple={
+                                  onDuplicateAsChildMultiple
+                                    ? () => onDuplicateAsChildMultiple(feature)
+                                    : undefined
+                                }
+                                hasContext={featuresWithContext.has(feature.id)}
+                                isCurrentAutoTask={runningAutoTasks.includes(feature.id)}
+                                shortcutKey={shortcutKey}
+                                opacity={effectiveCardOpacity}
+                                glassmorphism={effectiveGlassmorphism}
+                                cardBorderEnabled={backgroundSettings.cardBorderEnabled}
+                                cardBorderOpacity={backgroundSettings.cardBorderOpacity}
+                                reduceEffects={reduceEffects}
+                                isSelectionMode={isSelectionMode}
+                                selectionTarget={selectionTarget}
+                                isSelected={selectedFeatureIds.has(feature.id)}
+                                onToggleSelect={() => onToggleFeatureSelection?.(feature.id)}
+                              />
+                            );
+                          })
+                        )}
+                      </SortableContext>
+                    );
+                  })()}
+                </KanbanColumn>
+              )}
+            </VirtualizedList>
+          );
+        })}
+      </div>
+
+      <DragOverlay
+        dropAnimation={{
+          duration: 200,
+          easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',
+        }}
+      >
+        {activeFeature && (
+          <div style={{ width: `${columnWidth}px` }}>
+            <KanbanCard
+              feature={activeFeature}
+              isOverlay
+              onEdit={() => {}}
+              onDelete={() => {}}
+              onViewOutput={() => {}}
+              onVerify={() => {}}
+              onResume={() => {}}
+              onForceStop={() => {}}
+              onManualVerify={() => {}}
+              onMoveBackToInProgress={() => {}}
+              onFollowUp={() => {}}
+              onImplement={() => {}}
+              onComplete={() => {}}
+              onViewPlan={() => {}}
+              onApprovePlan={() => {}}
+              onSpawnTask={() => {}}
+              hasContext={featuresWithContext.has(activeFeature.id)}
+              isCurrentAutoTask={runningAutoTasks.includes(activeFeature.id)}
+              opacity={backgroundSettings.cardOpacity}
+              glassmorphism={backgroundSettings.cardGlassmorphism}
+              cardBorderEnabled={backgroundSettings.cardBorderEnabled}
+              cardBorderOpacity={backgroundSettings.cardBorderOpacity}
+            />
+          </div>
+        )}
+      </DragOverlay>
+    </div>
+  );
+});
diff --git a/temp_repo/apps/ui/src/components/views/board-view/mobile-usage-bar.tsx b/temp_repo/apps/ui/src/components/views/board-view/mobile-usage-bar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c6bfada0f74f4b560fea592cbd7ddd8b88b06569
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/mobile-usage-bar.tsx
@@ -0,0 +1,468 @@
+import { useEffect, useCallback, useState, type ComponentType, type ReactNode } from 'react';
+import { RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Spinner } from '@/components/ui/spinner';
+import { getElectronAPI } from '@/lib/electron';
+import { useAppStore } from '@/store/app-store';
+import { AnthropicIcon, OpenAIIcon, ZaiIcon, GeminiIcon } from '@/components/ui/provider-icon';
+import {
+  getExpectedWeeklyPacePercentage,
+  getExpectedCodexPacePercentage,
+  getPaceStatusLabel,
+} from '@/store/utils/usage-utils';
+
+interface MobileUsageBarProps {
+  showClaudeUsage: boolean;
+  showCodexUsage: boolean;
+  showZaiUsage?: boolean;
+  showGeminiUsage?: boolean;
+}
+
+// Helper to get progress bar color based on percentage
+function getProgressBarColor(percentage: number): string {
+  if (percentage >= 80) return 'bg-red-500';
+  if (percentage >= 50) return 'bg-yellow-500';
+  return 'bg-green-500';
+}
+
+// Helper to format large numbers with K/M suffixes
+function formatNumber(num: number): string {
+  if (num >= 1_000_000_000) {
+    return `${(num / 1_000_000_000).toFixed(1)}B`;
+  }
+  if (num >= 1_000_000) {
+    return `${(num / 1_000_000).toFixed(1)}M`;
+  }
+  if (num >= 1_000) {
+    return `${(num / 1_000).toFixed(1)}K`;
+  }
+  return num.toLocaleString();
+}
+
+// Helper to format reset time
+function formatResetTime(unixTimestamp: number, isMilliseconds = false): string {
+  const date = new Date(isMilliseconds ? unixTimestamp : unixTimestamp * 1000);
+  const now = new Date();
+  const diff = date.getTime() - now.getTime();
+
+  // Handle past timestamps (negative diff)
+  if (diff <= 0) {
+    return 'Resetting soon';
+  }
+
+  if (diff < 3600000) {
+    const mins = Math.ceil(diff / 60000);
+    return `Resets in ${mins}m`;
+  }
+  if (diff < 86400000) {
+    const hours = Math.floor(diff / 3600000);
+    const mins = Math.ceil((diff % 3600000) / 60000);
+    return `Resets in ${hours}h${mins > 0 ? ` ${mins}m` : ''}`;
+  }
+  return `Resets ${date.toLocaleDateString()}`;
+}
+
+// Individual usage bar component
+function UsageBar({
+  label,
+  percentage,
+  isStale,
+  details,
+  resetText,
+  pacePercentage,
+}: {
+  label: string;
+  percentage: number;
+  isStale: boolean;
+  details?: string;
+  resetText?: string;
+  pacePercentage?: number | null;
+}) {
+  const paceLabel = pacePercentage != null ? getPaceStatusLabel(percentage, pacePercentage) : null;
+
+  return (
+    <div className="mt-1.5 first:mt-0">
+      <div className="flex items-center justify-between mb-0.5">
+        <span className="text-[10px] uppercase tracking-wider text-muted-foreground font-medium">
+          {label}
+        </span>
+        <span
+          className={cn(
+            'text-[10px] font-mono font-bold',
+            percentage >= 80
+              ? 'text-red-500'
+              : percentage >= 50
+                ? 'text-yellow-500'
+                : 'text-green-500'
+          )}
+        >
+          {Math.round(percentage)}%
+        </span>
+      </div>
+      <div
+        className={cn(
+          'relative h-1 w-full bg-muted-foreground/10 rounded-full overflow-hidden transition-opacity',
+          isStale && 'opacity-60'
+        )}
+      >
+        <div
+          className={cn('h-full transition-all duration-500', getProgressBarColor(percentage))}
+          style={{ width: `${Math.min(percentage, 100)}%` }}
+        />
+        {pacePercentage != null && pacePercentage > 0 && pacePercentage < 100 && (
+          <div
+            className="absolute top-0 h-full w-0.5 bg-foreground/60"
+            style={{ left: `${pacePercentage}%` }}
+            title={`Expected: ${Math.round(pacePercentage)}%`}
+          />
+        )}
+      </div>
+      {(details || resetText || paceLabel) && (
+        <div className="flex items-center justify-between mt-0.5">
+          {paceLabel ? (
+            <span
+              className={cn(
+                'text-[9px]',
+                percentage > (pacePercentage ?? 0) ? 'text-orange-500' : 'text-green-500'
+              )}
+            >
+              {paceLabel}
+            </span>
+          ) : details ? (
+            <span className="text-[9px] text-muted-foreground">{details}</span>
+          ) : (
+            <span />
+          )}
+          {resetText && (
+            <span className="text-[9px] text-muted-foreground ml-auto">{resetText}</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Container for a provider's usage info
+function UsageItem({
+  icon: Icon,
+  label,
+  isLoading,
+  onRefresh,
+  children,
+}: {
+  icon: ComponentType<{ className?: string }>;
+  label: string;
+  isLoading: boolean;
+  onRefresh: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <div className="px-2 py-2">
+      <div className="flex items-center justify-between mb-1.5">
+        <div className="flex items-center gap-2">
+          <Icon className="w-4 h-4 text-muted-foreground shrink-0" />
+          <span className="text-sm font-semibold">{label}</span>
+        </div>
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onRefresh();
+          }}
+          className="p-1 rounded hover:bg-accent/50 transition-colors"
+          title="Refresh usage"
+        >
+          {isLoading ? (
+            <Spinner size="xs" />
+          ) : (
+            <RefreshCw className="w-3.5 h-3.5 text-muted-foreground" />
+          )}
+        </button>
+      </div>
+      <div className="pl-6 space-y-2">{children}</div>
+    </div>
+  );
+}
+
+export function MobileUsageBar({
+  showClaudeUsage,
+  showCodexUsage,
+  showZaiUsage = false,
+  showGeminiUsage = false,
+}: MobileUsageBarProps) {
+  const { claudeUsage, claudeUsageLastUpdated, setClaudeUsage } = useAppStore();
+  const { codexUsage, codexUsageLastUpdated, setCodexUsage } = useAppStore();
+  const { zaiUsage, zaiUsageLastUpdated, setZaiUsage } = useAppStore();
+  const { geminiUsage, geminiUsageLastUpdated, setGeminiUsage } = useAppStore();
+  const [isClaudeLoading, setIsClaudeLoading] = useState(false);
+  const [isCodexLoading, setIsCodexLoading] = useState(false);
+  const [isZaiLoading, setIsZaiLoading] = useState(false);
+  const [isGeminiLoading, setIsGeminiLoading] = useState(false);
+
+  // Check if data is stale (older than 2 minutes)
+  const isClaudeStale =
+    !claudeUsageLastUpdated || Date.now() - claudeUsageLastUpdated > 2 * 60 * 1000;
+  const isCodexStale = !codexUsageLastUpdated || Date.now() - codexUsageLastUpdated > 2 * 60 * 1000;
+  const isZaiStale = !zaiUsageLastUpdated || Date.now() - zaiUsageLastUpdated > 2 * 60 * 1000;
+  const isGeminiStale =
+    !geminiUsageLastUpdated || Date.now() - geminiUsageLastUpdated > 2 * 60 * 1000;
+
+  const fetchClaudeUsage = useCallback(async () => {
+    setIsClaudeLoading(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.claude) return;
+      const data = await api.claude.getUsage();
+      if (!('error' in data)) {
+        setClaudeUsage(data);
+      }
+    } catch {
+      // Silently fail - usage display is optional
+    } finally {
+      setIsClaudeLoading(false);
+    }
+  }, [setClaudeUsage]);
+
+  const fetchCodexUsage = useCallback(async () => {
+    setIsCodexLoading(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.codex) return;
+      const data = await api.codex.getUsage();
+      if (!('error' in data)) {
+        setCodexUsage(data);
+      }
+    } catch {
+      // Silently fail - usage display is optional
+    } finally {
+      setIsCodexLoading(false);
+    }
+  }, [setCodexUsage]);
+
+  const fetchZaiUsage = useCallback(async () => {
+    setIsZaiLoading(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.zai) return;
+      const data = await api.zai.getUsage();
+      if (!('error' in data)) {
+        setZaiUsage(data);
+      }
+    } catch {
+      // Silently fail - usage display is optional
+    } finally {
+      setIsZaiLoading(false);
+    }
+  }, [setZaiUsage]);
+
+  const fetchGeminiUsage = useCallback(async () => {
+    setIsGeminiLoading(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.gemini) return;
+      const data = await api.gemini.getUsage();
+      if (!('error' in data)) {
+        setGeminiUsage(data, Date.now());
+      }
+    } catch {
+      // Silently fail - usage display is optional
+    } finally {
+      setIsGeminiLoading(false);
+    }
+  }, [setGeminiUsage]);
+
+  const getCodexWindowLabel = (durationMins: number) => {
+    if (durationMins < 60) return `${durationMins}m Window`;
+    if (durationMins < 1440) return `${Math.round(durationMins / 60)}h Window`;
+    return `${Math.round(durationMins / 1440)}d Window`;
+  };
+
+  // Auto-fetch on mount if data is stale
+  useEffect(() => {
+    if (showClaudeUsage && isClaudeStale) {
+      fetchClaudeUsage();
+    }
+  }, [showClaudeUsage, isClaudeStale, fetchClaudeUsage]);
+
+  useEffect(() => {
+    if (showCodexUsage && isCodexStale) {
+      fetchCodexUsage();
+    }
+  }, [showCodexUsage, isCodexStale, fetchCodexUsage]);
+
+  useEffect(() => {
+    if (showZaiUsage && isZaiStale) {
+      fetchZaiUsage();
+    }
+  }, [showZaiUsage, isZaiStale, fetchZaiUsage]);
+
+  useEffect(() => {
+    if (showGeminiUsage && isGeminiStale) {
+      fetchGeminiUsage();
+    }
+  }, [showGeminiUsage, isGeminiStale, fetchGeminiUsage]);
+
+  // Don't render if there's nothing to show
+  if (!showClaudeUsage && !showCodexUsage && !showZaiUsage && !showGeminiUsage) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2 py-1" data-testid="mobile-usage-bar">
+      {showClaudeUsage && (
+        <UsageItem
+          icon={AnthropicIcon}
+          label="Claude"
+          isLoading={isClaudeLoading}
+          onRefresh={fetchClaudeUsage}
+        >
+          {claudeUsage ? (
+            <>
+              <UsageBar
+                label="Session"
+                percentage={claudeUsage.sessionPercentage}
+                isStale={isClaudeStale}
+              />
+              <UsageBar
+                label="Weekly"
+                percentage={claudeUsage.weeklyPercentage}
+                isStale={isClaudeStale}
+                pacePercentage={getExpectedWeeklyPacePercentage(claudeUsage.weeklyResetTime)}
+              />
+            </>
+          ) : (
+            <p className="text-[10px] text-muted-foreground italic">Loading usage data...</p>
+          )}
+        </UsageItem>
+      )}
+
+      {showCodexUsage && (
+        <UsageItem
+          icon={OpenAIIcon}
+          label="Codex"
+          isLoading={isCodexLoading}
+          onRefresh={fetchCodexUsage}
+        >
+          {codexUsage?.rateLimits ? (
+            <>
+              {codexUsage.rateLimits.primary && (
+                <UsageBar
+                  label={getCodexWindowLabel(codexUsage.rateLimits.primary.windowDurationMins)}
+                  percentage={codexUsage.rateLimits.primary.usedPercent}
+                  isStale={isCodexStale}
+                  pacePercentage={getExpectedCodexPacePercentage(
+                    codexUsage.rateLimits.primary.resetsAt,
+                    codexUsage.rateLimits.primary.windowDurationMins
+                  )}
+                />
+              )}
+              {codexUsage.rateLimits.secondary && (
+                <UsageBar
+                  label={getCodexWindowLabel(codexUsage.rateLimits.secondary.windowDurationMins)}
+                  percentage={codexUsage.rateLimits.secondary.usedPercent}
+                  isStale={isCodexStale}
+                  pacePercentage={getExpectedCodexPacePercentage(
+                    codexUsage.rateLimits.secondary.resetsAt,
+                    codexUsage.rateLimits.secondary.windowDurationMins
+                  )}
+                />
+              )}
+            </>
+          ) : (
+            <p className="text-[10px] text-muted-foreground italic">Loading usage data...</p>
+          )}
+        </UsageItem>
+      )}
+
+      {showZaiUsage && (
+        <UsageItem icon={ZaiIcon} label="z.ai" isLoading={isZaiLoading} onRefresh={fetchZaiUsage}>
+          {zaiUsage?.quotaLimits && (zaiUsage.quotaLimits.tokens || zaiUsage.quotaLimits.mcp) ? (
+            <>
+              {zaiUsage.quotaLimits.tokens && (
+                <UsageBar
+                  label="Tokens"
+                  percentage={zaiUsage.quotaLimits.tokens.usedPercent}
+                  isStale={isZaiStale}
+                  details={`${formatNumber(zaiUsage.quotaLimits.tokens.used)} / ${formatNumber(zaiUsage.quotaLimits.tokens.limit)}`}
+                  resetText={
+                    zaiUsage.quotaLimits.tokens.nextResetTime
+                      ? formatResetTime(zaiUsage.quotaLimits.tokens.nextResetTime, true)
+                      : undefined
+                  }
+                />
+              )}
+              {zaiUsage.quotaLimits.mcp && (
+                <UsageBar
+                  label="MCP"
+                  percentage={zaiUsage.quotaLimits.mcp.usedPercent}
+                  isStale={isZaiStale}
+                  details={`${formatNumber(zaiUsage.quotaLimits.mcp.used)} / ${formatNumber(zaiUsage.quotaLimits.mcp.limit)} calls`}
+                  resetText={
+                    zaiUsage.quotaLimits.mcp.nextResetTime
+                      ? formatResetTime(zaiUsage.quotaLimits.mcp.nextResetTime, true)
+                      : undefined
+                  }
+                />
+              )}
+            </>
+          ) : zaiUsage ? (
+            <p className="text-[10px] text-muted-foreground italic">No usage data from z.ai API</p>
+          ) : (
+            <p className="text-[10px] text-muted-foreground italic">Loading usage data...</p>
+          )}
+        </UsageItem>
+      )}
+
+      {showGeminiUsage && (
+        <UsageItem
+          icon={GeminiIcon}
+          label="Gemini"
+          isLoading={isGeminiLoading}
+          onRefresh={fetchGeminiUsage}
+        >
+          {geminiUsage ? (
+            geminiUsage.authenticated ? (
+              geminiUsage.flashQuota || geminiUsage.proQuota ? (
+                <>
+                  {geminiUsage.flashQuota && (
+                    <UsageBar
+                      label="Flash"
+                      percentage={geminiUsage.flashQuota.usedPercent}
+                      isStale={isGeminiStale}
+                      resetText={geminiUsage.flashQuota.resetText}
+                    />
+                  )}
+                  {geminiUsage.proQuota && (
+                    <UsageBar
+                      label="Pro"
+                      percentage={geminiUsage.proQuota.usedPercent}
+                      isStale={isGeminiStale}
+                      resetText={geminiUsage.proQuota.resetText}
+                    />
+                  )}
+                </>
+              ) : (
+                <div className="text-[10px]">
+                  <p className="text-green-500 font-medium">
+                    Connected via{' '}
+                    {geminiUsage.authMethod === 'cli_login'
+                      ? 'CLI Login'
+                      : geminiUsage.authMethod === 'api_key'
+                        ? 'API Key'
+                        : geminiUsage.authMethod}
+                  </p>
+                  <p className="text-muted-foreground italic mt-0.5">
+                    {geminiUsage.error || 'No usage yet'}
+                  </p>
+                </div>
+              )
+            ) : (
+              <p className="text-[10px] text-yellow-500">Not authenticated</p>
+            )
+          ) : (
+            <p className="text-[10px] text-muted-foreground italic">Loading usage data...</p>
+          )}
+        </UsageItem>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/ancestor-context-section.tsx b/temp_repo/apps/ui/src/components/views/board-view/shared/ancestor-context-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c0a4029322520e9c84774f8c05f3cbf9ba5d48f1
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/ancestor-context-section.tsx
@@ -0,0 +1,211 @@
+import { useState } from 'react';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { ChevronDown, ChevronRight, Users, CheckCircle2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { AncestorContext } from '@automaker/dependency-resolver';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+
+interface ParentFeatureContext {
+  id: string;
+  title?: string;
+  description: string;
+  spec?: string;
+  summary?: string;
+}
+
+interface AncestorContextSectionProps {
+  parentFeature: ParentFeatureContext;
+  ancestors: AncestorContext[];
+  selectedAncestorIds: Set<string>;
+  onSelectionChange: (ids: Set<string>) => void;
+}
+
+export function AncestorContextSection({
+  parentFeature,
+  ancestors,
+  selectedAncestorIds,
+  onSelectionChange,
+}: AncestorContextSectionProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+
+  const toggleExpanded = (id: string) => {
+    const newExpanded = new Set(expandedIds);
+    if (newExpanded.has(id)) {
+      newExpanded.delete(id);
+    } else {
+      newExpanded.add(id);
+    }
+    setExpandedIds(newExpanded);
+  };
+
+  const toggleSelected = (id: string) => {
+    const newSelected = new Set(selectedAncestorIds);
+    if (newSelected.has(id)) {
+      newSelected.delete(id);
+    } else {
+      newSelected.add(id);
+    }
+    onSelectionChange(newSelected);
+  };
+
+  const selectAll = () => {
+    const allIds = new Set([parentFeature.id, ...ancestors.map((a) => a.id)]);
+    onSelectionChange(allIds);
+  };
+
+  const selectNone = () => {
+    onSelectionChange(new Set());
+  };
+
+  // Combine parent and ancestors into a single list
+  const allAncestorItems: Array<
+    (AncestorContext | ParentFeatureContext) & { isParent: boolean; depth: number }
+  > = [
+    { ...parentFeature, depth: -1, isParent: true },
+    ...ancestors.map((a) => ({ ...a, isParent: false })),
+  ];
+
+  const totalCount = allAncestorItems.length;
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Users className="w-4 h-4 text-muted-foreground" />
+          <Label className="text-sm font-medium">Ancestor Context</Label>
+          <span className="text-xs text-muted-foreground">
+            ({selectedAncestorIds.size}/{totalCount} selected)
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={selectAll}
+            className="h-6 px-2 text-xs"
+          >
+            All
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={selectNone}
+            className="h-6 px-2 text-xs"
+          >
+            None
+          </Button>
+        </div>
+      </div>
+
+      <p className="text-xs text-muted-foreground">
+        The parent task context will be included to help the AI understand the background.
+        Additional ancestors can optionally be included for more context.
+      </p>
+
+      <div className="space-y-1 max-h-[200px] overflow-y-auto border rounded-lg p-2 bg-muted/20">
+        {allAncestorItems.map((item) => {
+          const isSelected = selectedAncestorIds.has(item.id);
+          const isExpanded = expandedIds.has(item.id);
+          const hasContent =
+            item.description ||
+            ('spec' in item && item.spec) ||
+            ('summary' in item && item.summary);
+          const displayTitle =
+            item.title ||
+            item.description.slice(0, 50) + (item.description.length > 50 ? '...' : '');
+
+          return (
+            <Collapsible key={item.id} open={isExpanded}>
+              <div
+                className={cn(
+                  'flex items-start gap-2 p-2 rounded-md transition-colors',
+                  item.isParent
+                    ? isSelected
+                      ? 'bg-[var(--status-success-bg)] border border-[var(--status-success)]/30'
+                      : 'bg-muted/30 border border-border hover:bg-muted/50'
+                    : isSelected
+                      ? 'bg-primary/10'
+                      : 'hover:bg-muted/50'
+                )}
+                style={{ marginLeft: item.isParent ? 0 : `${item.depth * 12}px` }}
+              >
+                <Checkbox
+                  id={`ancestor-${item.id}`}
+                  checked={isSelected}
+                  onCheckedChange={() => toggleSelected(item.id)}
+                  className="mt-0.5"
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-1">
+                    {hasContent && (
+                      <CollapsibleTrigger asChild>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          className="h-5 w-5 p-0"
+                          onClick={() => toggleExpanded(item.id)}
+                        >
+                          {isExpanded ? (
+                            <ChevronDown className="w-3 h-3" />
+                          ) : (
+                            <ChevronRight className="w-3 h-3" />
+                          )}
+                        </Button>
+                      </CollapsibleTrigger>
+                    )}
+                    <label
+                      htmlFor={`ancestor-${item.id}`}
+                      className="text-sm font-medium cursor-pointer truncate flex-1"
+                    >
+                      {displayTitle}
+                    </label>
+                    {item.isParent && (
+                      <span className="ml-2 inline-flex items-center gap-1 text-xs text-[var(--status-success)] font-medium">
+                        <CheckCircle2 className="w-3 h-3" />
+                        Completed Parent
+                      </span>
+                    )}
+                  </div>
+
+                  <CollapsibleContent>
+                    <div className="mt-2 space-y-2 text-xs text-muted-foreground pl-5">
+                      {item.description && (
+                        <div>
+                          <span className="font-medium text-foreground">Description:</span>
+                          <p className="mt-0.5 line-clamp-3">{item.description}</p>
+                        </div>
+                      )}
+                      {'spec' in item && item.spec && (
+                        <div>
+                          <span className="font-medium text-foreground">Specification:</span>
+                          <p className="mt-0.5 line-clamp-3">{item.spec}</p>
+                        </div>
+                      )}
+                      {'summary' in item && item.summary && (
+                        <div>
+                          <span className="font-medium text-foreground">Summary:</span>
+                          <p className="mt-0.5 line-clamp-3">{item.summary}</p>
+                        </div>
+                      )}
+                    </div>
+                  </CollapsibleContent>
+                </div>
+              </div>
+            </Collapsible>
+          );
+        })}
+
+        {ancestors.length === 0 && (
+          <p className="text-xs text-muted-foreground text-center py-2">
+            Parent task has no additional ancestors
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/branch-selector.tsx b/temp_repo/apps/ui/src/components/views/board-view/shared/branch-selector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..359017d8c9c782dcf3293b570226764cedb73498
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/branch-selector.tsx
@@ -0,0 +1,90 @@
+'use client';
+
+import { Label } from '@/components/ui/label';
+import { BranchAutocomplete } from '@/components/ui/branch-autocomplete';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+
+interface BranchSelectorProps {
+  useCurrentBranch: boolean;
+  onUseCurrentBranchChange: (useCurrent: boolean) => void;
+  branchName: string;
+  onBranchNameChange: (branchName: string) => void;
+  branchSuggestions: string[];
+  branchCardCounts?: Record<string, number>; // Map of branch name to unarchived card count
+  currentBranch?: string;
+  disabled?: boolean;
+  testIdPrefix?: string;
+}
+
+export function BranchSelector({
+  useCurrentBranch,
+  onUseCurrentBranchChange,
+  branchName,
+  onBranchNameChange,
+  branchSuggestions,
+  branchCardCounts,
+  currentBranch,
+  disabled = false,
+  testIdPrefix = 'branch',
+}: BranchSelectorProps) {
+  // Validate: if "other branch" is selected, branch name is required
+  const isBranchRequired = !useCurrentBranch;
+  const hasError = isBranchRequired && !branchName.trim();
+
+  return (
+    <div className="space-y-2">
+      <Label id={`${testIdPrefix}-label`}>Target Branch</Label>
+      <RadioGroup
+        value={useCurrentBranch ? 'current' : 'other'}
+        onValueChange={(value: string) => onUseCurrentBranchChange(value === 'current')}
+        disabled={disabled}
+        data-testid={`${testIdPrefix}-radio-group`}
+        aria-labelledby={`${testIdPrefix}-label`}
+      >
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="current" id={`${testIdPrefix}-current`} />
+          <Label htmlFor={`${testIdPrefix}-current`} className="font-normal cursor-pointer">
+            Use current selected branch
+            {currentBranch && <span className="text-muted-foreground ml-1">({currentBranch})</span>}
+          </Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <RadioGroupItem value="other" id={`${testIdPrefix}-other`} />
+          <Label htmlFor={`${testIdPrefix}-other`} className="font-normal cursor-pointer">
+            Other branch
+          </Label>
+        </div>
+      </RadioGroup>
+      {!useCurrentBranch && (
+        <div className="ml-6 space-y-1">
+          <BranchAutocomplete
+            value={branchName}
+            onChange={onBranchNameChange}
+            branches={branchSuggestions}
+            branchCardCounts={branchCardCounts}
+            placeholder="Select or create branch..."
+            data-testid={`${testIdPrefix}-input`}
+            disabled={disabled}
+            error={hasError}
+          />
+          {hasError && (
+            <p className="text-xs text-destructive">
+              Branch name is required when "Other branch" is selected.
+            </p>
+          )}
+        </div>
+      )}
+      {disabled ? (
+        <p className="text-xs text-muted-foreground">
+          Branch cannot be changed after work has started.
+        </p>
+      ) : (
+        <p className="text-xs text-muted-foreground">
+          {useCurrentBranch
+            ? 'Work will be done in the currently selected branch. A worktree will be created if needed.'
+            : 'Work will be done in this branch. A worktree will be created if needed.'}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/enhancement/enhance-with-ai.tsx b/temp_repo/apps/ui/src/components/views/board-view/shared/enhancement/enhance-with-ai.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8ab1bb502ae5ed2952422fd540f7708372038582
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/enhancement/enhance-with-ai.tsx
@@ -0,0 +1,174 @@
+import { useState } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Sparkles, ChevronDown, ChevronRight } from 'lucide-react';
+import { toast } from 'sonner';
+import { getElectronAPI } from '@/lib/electron';
+import { ModelOverrideTrigger, useModelOverride } from '@/components/shared';
+import {
+  EnhancementMode,
+  ENHANCEMENT_MODE_LABELS,
+  REWRITE_MODES,
+  ADDITIVE_MODES,
+  isAdditiveMode,
+} from './enhancement-constants';
+import { useAppStore } from '@/store/app-store';
+
+const logger = createLogger('EnhanceWithAI');
+
+interface EnhanceWithAIProps {
+  /** Current text value to enhance */
+  value: string;
+  /** Callback when text is enhanced */
+  onChange: (enhancedText: string) => void;
+  /** Optional callback to track enhancement in history */
+  onHistoryAdd?: (entry: {
+    mode: EnhancementMode;
+    originalText: string;
+    enhancedText: string;
+  }) => void;
+  /** Disable the enhancement feature */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * Reusable "Enhance with AI" component
+ *
+ * Provides AI-powered text enhancement with multiple modes:
+ * - Improve Clarity
+ * - Add Technical Details
+ * - Simplify
+ * - Add Acceptance Criteria
+ * - User Experience
+ *
+ * Used in Add Feature, Edit Feature, and Follow-Up dialogs.
+ */
+export function EnhanceWithAI({
+  value,
+  onChange,
+  onHistoryAdd,
+  disabled = false,
+  className,
+}: EnhanceWithAIProps) {
+  const [isEnhancing, setIsEnhancing] = useState(false);
+  const [enhancementMode, setEnhancementMode] = useState<EnhancementMode>('improve');
+  const [enhanceOpen, setEnhanceOpen] = useState(false);
+
+  // Get current project path for per-project Claude API profile
+  const currentProjectPath = useAppStore((state) => state.currentProject?.path);
+
+  // Enhancement model override
+  const enhancementOverride = useModelOverride({ phase: 'enhancementModel' });
+
+  const handleEnhance = async () => {
+    if (!value.trim() || isEnhancing || disabled) return;
+
+    setIsEnhancing(true);
+    try {
+      const api = getElectronAPI();
+      const result = await api.enhancePrompt?.enhance(
+        value,
+        enhancementMode,
+        enhancementOverride.effectiveModel,
+        enhancementOverride.effectiveModelEntry.thinkingLevel,
+        currentProjectPath
+      );
+
+      if (result?.success && result.enhancedText) {
+        const originalText = value;
+        // For additive modes, prepend the original description above the AI-generated content
+        const enhancedText = isAdditiveMode(enhancementMode)
+          ? `${originalText.trim()}\n\n${result.enhancedText.trim()}`
+          : result.enhancedText;
+        onChange(enhancedText);
+
+        // Track in history if callback provided (includes original for restoration)
+        onHistoryAdd?.({ mode: enhancementMode, originalText, enhancedText });
+
+        toast.success('Enhanced successfully!');
+      } else {
+        toast.error(result?.error || 'Failed to enhance');
+      }
+    } catch (error) {
+      logger.error('Enhancement failed:', error);
+      toast.error('Failed to enhance');
+    } finally {
+      setIsEnhancing(false);
+    }
+  };
+
+  return (
+    <Collapsible open={enhanceOpen} onOpenChange={setEnhanceOpen} className={className}>
+      <CollapsibleTrigger asChild>
+        <button
+          className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors w-full py-1"
+          disabled={disabled}
+        >
+          {enhanceOpen ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
+          <Sparkles className="w-4 h-4" />
+          <span>Enhance with AI</span>
+        </button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="pt-3">
+        <div className="flex flex-wrap items-center gap-2 pl-6">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm" className="h-8 text-xs" disabled={disabled}>
+                {ENHANCEMENT_MODE_LABELS[enhancementMode]}
+                <ChevronDown className="w-3 h-3 ml-1" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuLabel>Rewrite</DropdownMenuLabel>
+              {REWRITE_MODES.map((mode) => (
+                <DropdownMenuItem key={mode} onClick={() => setEnhancementMode(mode)}>
+                  {ENHANCEMENT_MODE_LABELS[mode]}
+                </DropdownMenuItem>
+              ))}
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>Append Details</DropdownMenuLabel>
+              {ADDITIVE_MODES.map((mode) => (
+                <DropdownMenuItem key={mode} onClick={() => setEnhancementMode(mode)}>
+                  {ENHANCEMENT_MODE_LABELS[mode]}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <Button
+            type="button"
+            variant="default"
+            size="sm"
+            className="h-8 text-xs"
+            onClick={handleEnhance}
+            disabled={!value.trim() || isEnhancing || disabled}
+            loading={isEnhancing}
+          >
+            <Sparkles className="w-3 h-3 mr-1" />
+            Enhance
+          </Button>
+
+          <ModelOverrideTrigger
+            currentModelEntry={enhancementOverride.effectiveModelEntry}
+            onModelChange={enhancementOverride.setOverride}
+            phase="enhancementModel"
+            isOverridden={enhancementOverride.isOverridden}
+            size="sm"
+            variant="icon"
+          />
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/enhancement/enhancement-constants.ts b/temp_repo/apps/ui/src/components/views/board-view/shared/enhancement/enhancement-constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e0db0ca48b6e848a24a55029dfd0cca81dfef03c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/enhancement/enhancement-constants.ts
@@ -0,0 +1,31 @@
+import type { EnhancementMode } from '@automaker/types';
+export type { EnhancementMode } from '@automaker/types';
+
+/** Labels for enhancement modes displayed in the UI */
+export const ENHANCEMENT_MODE_LABELS: Record<EnhancementMode, string> = {
+  improve: 'Improve Clarity',
+  technical: 'Add Technical Details',
+  simplify: 'Simplify',
+  acceptance: 'Add Acceptance Criteria',
+  'ux-reviewer': 'User Experience',
+};
+
+/** Descriptions for enhancement modes (for tooltips/accessibility) */
+export const ENHANCEMENT_MODE_DESCRIPTIONS: Record<EnhancementMode, string> = {
+  improve: 'Make the prompt clearer and more concise',
+  technical: 'Add implementation details and specifications',
+  simplify: 'Reduce complexity while keeping the core intent',
+  acceptance: 'Add specific acceptance criteria and test cases',
+  'ux-reviewer': 'Add user experience considerations and flows',
+};
+
+/** Modes that rewrite/replace the entire description */
+export const REWRITE_MODES: EnhancementMode[] = ['improve', 'simplify'];
+
+/** Modes that append additional content below the original description */
+export const ADDITIVE_MODES: EnhancementMode[] = ['technical', 'acceptance', 'ux-reviewer'];
+
+/** Check if a mode appends content rather than replacing */
+export function isAdditiveMode(mode: EnhancementMode): boolean {
+  return ADDITIVE_MODES.includes(mode);
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/enhancement/enhancement-history-button.tsx b/temp_repo/apps/ui/src/components/views/board-view/shared/enhancement/enhancement-history-button.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bf31fde792f6d3272f5a16ba93900c5d4d9e5a07
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/enhancement/enhancement-history-button.tsx
@@ -0,0 +1,136 @@
+import { useState, useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { History } from 'lucide-react';
+import { toast } from 'sonner';
+import { EnhancementMode, ENHANCEMENT_MODE_LABELS } from './enhancement-constants';
+
+/**
+ * Base interface for history entries
+ */
+export interface BaseHistoryEntry {
+  timestamp: string;
+  source: 'initial' | 'enhance' | 'edit';
+  enhancementMode?: EnhancementMode;
+}
+
+interface EnhancementHistoryButtonProps<T extends BaseHistoryEntry> {
+  /** Array of history entries */
+  history: T[];
+  /** Current value to compare against for highlighting */
+  currentValue: string;
+  /** Callback when a history entry is restored */
+  onRestore: (value: string) => void;
+  /** Function to extract the text value from a history entry */
+  valueAccessor: (entry: T) => string;
+  /** Title for the history popover (e.g., "Version History", "Prompt History") */
+  title?: string;
+  /** Message shown when restoring an entry */
+  restoreMessage?: string;
+}
+
+/**
+ * Reusable history button component for enhancement-related history
+ *
+ * Displays a popover with a list of historical versions that can be restored.
+ * Used in edit-feature-dialog and follow-up-dialog for description/prompt history.
+ */
+export function EnhancementHistoryButton<T extends BaseHistoryEntry>({
+  history,
+  currentValue,
+  onRestore,
+  valueAccessor,
+  title = 'Version History',
+  restoreMessage = 'Restored from history',
+}: EnhancementHistoryButtonProps<T>) {
+  const [showHistory, setShowHistory] = useState(false);
+
+  // Memoize reversed history to avoid creating new array on every render
+  // NOTE: This hook MUST be called before any early returns to follow Rules of Hooks
+  const reversedHistory = useMemo(() => [...history].reverse(), [history]);
+
+  // Early return AFTER all hooks are called
+  if (history.length === 0) {
+    return null;
+  }
+
+  const getSourceLabel = (entry: T): string => {
+    if (entry.source === 'initial') {
+      return 'Original';
+    }
+    if (entry.source === 'enhance') {
+      const mode = entry.enhancementMode ?? 'improve';
+      const label = ENHANCEMENT_MODE_LABELS[mode as EnhancementMode] ?? mode;
+      return `Enhanced (${label})`;
+    }
+    return 'Edited';
+  };
+
+  const formatDate = (timestamp: string): string => {
+    const date = new Date(timestamp);
+    return date.toLocaleDateString(undefined, {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <Popover open={showHistory} onOpenChange={setShowHistory}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-7 gap-1.5 text-xs text-muted-foreground"
+        >
+          <History className="w-3.5 h-3.5" />
+          History ({history.length})
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 p-0" align="end">
+        <div className="p-3 border-b">
+          <h4 className="font-medium text-sm">{title}</h4>
+          <p className="text-xs text-muted-foreground mt-1">Click a version to restore it</p>
+        </div>
+        <div className="max-h-64 overflow-y-auto p-2 space-y-1">
+          {reversedHistory.map((entry, index) => {
+            const value = valueAccessor(entry);
+            const isCurrentVersion = value === currentValue;
+            const sourceLabel = getSourceLabel(entry);
+            const formattedDate = formatDate(entry.timestamp);
+
+            return (
+              <button
+                key={`${entry.timestamp}-${index}`}
+                onClick={() => {
+                  onRestore(value);
+                  setShowHistory(false);
+                  toast.success(restoreMessage);
+                }}
+                className={`w-full text-left p-2 rounded-md hover:bg-muted transition-colors ${
+                  isCurrentVersion ? 'bg-muted/50 border border-primary/20' : ''
+                }`}
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <span className="text-xs font-medium">{sourceLabel}</span>
+                  <span className="text-xs text-muted-foreground">{formattedDate}</span>
+                </div>
+                <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
+                  {value.slice(0, 100)}
+                  {value.length > 100 ? '...' : ''}
+                </p>
+                {isCurrentVersion && (
+                  <span className="text-xs text-primary font-medium mt-1 block">
+                    Current version
+                  </span>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/enhancement/index.ts b/temp_repo/apps/ui/src/components/views/board-view/shared/enhancement/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..80db9beb14f500554a70739a2e6c6c7daa723c7b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/enhancement/index.ts
@@ -0,0 +1,3 @@
+export * from './enhancement-constants';
+export * from './enhance-with-ai';
+export * from './enhancement-history-button';
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/index.ts b/temp_repo/apps/ui/src/components/views/board-view/shared/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f8da6b08cec159050a55f92df545edb607cd2448
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/index.ts
@@ -0,0 +1,14 @@
+export * from './model-constants';
+export * from './model-selector';
+export * from './thinking-level-selector';
+export * from './reasoning-effort-selector';
+export * from './testing-tab-content';
+export * from './priority-selector';
+export * from './priority-select';
+export * from './branch-selector';
+export * from './planning-mode-selector';
+export * from './planning-mode-select';
+export * from './ancestor-context-section';
+export * from './work-mode-selector';
+export * from './enhancement';
+export * from './pipeline-exclusion-controls';
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/model-constants.ts b/temp_repo/apps/ui/src/components/views/board-view/shared/model-constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2816e5564cefe4430fdc3d2884adf503d08ce2b5
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/model-constants.ts
@@ -0,0 +1,224 @@
+import type { ModelProvider, ThinkingLevel, ReasoningEffort } from '@automaker/types';
+import {
+  CURSOR_MODEL_MAP,
+  CODEX_MODEL_MAP,
+  OPENCODE_MODELS as OPENCODE_MODEL_CONFIGS,
+  GEMINI_MODEL_MAP,
+  COPILOT_MODEL_MAP,
+} from '@automaker/types';
+import { Brain, Zap, Scale, Cpu, Rocket, Sparkles } from 'lucide-react';
+import {
+  AnthropicIcon,
+  CursorIcon,
+  OpenAIIcon,
+  OpenCodeIcon,
+  GeminiIcon,
+  CopilotIcon,
+} from '@/components/ui/provider-icon';
+
+export type ModelOption = {
+  id: string; // All model IDs use canonical prefixed format (e.g., "claude-sonnet", "cursor-auto")
+  label: string;
+  description: string;
+  badge?: string;
+  provider: ModelProvider;
+  hasThinking?: boolean;
+};
+
+/**
+ * Claude models with canonical prefixed IDs
+ * UI displays short labels but stores full canonical IDs
+ */
+export const CLAUDE_MODELS: ModelOption[] = [
+  {
+    id: 'claude-haiku', // Canonical prefixed ID
+    label: 'Claude Haiku',
+    description: 'Fast and efficient for simple tasks.',
+    badge: 'Speed',
+    provider: 'claude',
+  },
+  {
+    id: 'claude-sonnet', // Canonical prefixed ID
+    label: 'Claude Sonnet',
+    description: 'Balanced performance with strong reasoning.',
+    badge: 'Balanced',
+    provider: 'claude',
+  },
+  {
+    id: 'claude-opus', // Canonical prefixed ID
+    label: 'Claude Opus',
+    description: 'Most capable model for complex work.',
+    badge: 'Premium',
+    provider: 'claude',
+  },
+];
+
+/**
+ * Cursor models derived from CURSOR_MODEL_MAP
+ * IDs already have 'cursor-' prefix in the canonical format
+ */
+export const CURSOR_MODELS: ModelOption[] = Object.entries(CURSOR_MODEL_MAP).map(
+  ([id, config]) => ({
+    id, // Already prefixed in canonical format
+    label: config.label,
+    description: config.description,
+    provider: 'cursor' as ModelProvider,
+    hasThinking: config.hasThinking,
+  })
+);
+
+/**
+ * Codex/OpenAI models
+ * Official models from https://developers.openai.com/codex/models/
+ */
+export const CODEX_MODELS: ModelOption[] = [
+  {
+    id: CODEX_MODEL_MAP.gpt52Codex,
+    label: 'GPT-5.2-Codex',
+    description: 'Most advanced agentic coding model for complex software engineering.',
+    badge: 'Premium',
+    provider: 'codex',
+    hasThinking: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt51CodexMax,
+    label: 'GPT-5.1-Codex-Max',
+    description: 'Optimized for long-horizon, agentic coding tasks in Codex.',
+    badge: 'Premium',
+    provider: 'codex',
+    hasThinking: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt51CodexMini,
+    label: 'GPT-5.1-Codex-Mini',
+    description: 'Smaller, more cost-effective version for faster workflows.',
+    badge: 'Speed',
+    provider: 'codex',
+    hasThinking: false,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt52,
+    label: 'GPT-5.2',
+    description: 'Best general agentic model for tasks across industries and domains.',
+    badge: 'Balanced',
+    provider: 'codex',
+    hasThinking: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt51,
+    label: 'GPT-5.1',
+    description: 'Great for coding and agentic tasks across domains.',
+    badge: 'Balanced',
+    provider: 'codex',
+    hasThinking: true,
+  },
+];
+
+/**
+ * OpenCode models derived from OPENCODE_MODEL_CONFIGS
+ */
+export const OPENCODE_MODELS: ModelOption[] = OPENCODE_MODEL_CONFIGS.map((config) => ({
+  id: config.id,
+  label: config.label,
+  description: config.description,
+  badge: config.tier === 'free' ? 'Free' : config.tier === 'premium' ? 'Premium' : undefined,
+  provider: config.provider as ModelProvider,
+}));
+
+/**
+ * Gemini models derived from GEMINI_MODEL_MAP
+ * Model IDs already have 'gemini-' prefix (like Cursor models)
+ */
+export const GEMINI_MODELS: ModelOption[] = Object.entries(GEMINI_MODEL_MAP).map(
+  ([id, config]) => ({
+    id, // IDs already have gemini- prefix (e.g., 'gemini-2.5-flash')
+    label: config.label,
+    description: config.description,
+    badge: config.supportsThinking ? 'Thinking' : 'Speed',
+    provider: 'gemini' as ModelProvider,
+    hasThinking: config.supportsThinking,
+  })
+);
+
+/**
+ * Copilot models derived from COPILOT_MODEL_MAP
+ * Model IDs already have 'copilot-' prefix
+ */
+export const COPILOT_MODELS: ModelOption[] = Object.entries(COPILOT_MODEL_MAP).map(
+  ([id, config]) => ({
+    id, // IDs already have copilot- prefix (e.g., 'copilot-gpt-4o')
+    label: config.label,
+    description: config.description,
+    badge: config.supportsVision ? 'Vision' : 'Standard',
+    provider: 'copilot' as ModelProvider,
+    hasThinking: false,
+  })
+);
+
+/**
+ * All available models (Claude + Cursor + Codex + OpenCode + Gemini + Copilot)
+ */
+export const ALL_MODELS: ModelOption[] = [
+  ...CLAUDE_MODELS,
+  ...CURSOR_MODELS,
+  ...CODEX_MODELS,
+  ...OPENCODE_MODELS,
+  ...GEMINI_MODELS,
+  ...COPILOT_MODELS,
+];
+
+export const THINKING_LEVELS: ThinkingLevel[] = [
+  'none',
+  'low',
+  'medium',
+  'high',
+  'ultrathink',
+  'adaptive',
+];
+
+export const THINKING_LEVEL_LABELS: Record<ThinkingLevel, string> = {
+  none: 'None',
+  low: 'Low',
+  medium: 'Med',
+  high: 'High',
+  ultrathink: 'Ultra',
+  adaptive: 'Adaptive',
+};
+
+/**
+ * Reasoning effort levels for Codex/OpenAI models
+ * All models support reasoning effort levels
+ */
+export const REASONING_EFFORT_LEVELS: ReasoningEffort[] = [
+  'none',
+  'minimal',
+  'low',
+  'medium',
+  'high',
+  'xhigh',
+];
+
+export const REASONING_EFFORT_LABELS: Record<ReasoningEffort, string> = {
+  none: 'None',
+  minimal: 'Min',
+  low: 'Low',
+  medium: 'Med',
+  high: 'High',
+  xhigh: 'XHigh',
+};
+
+// Profile icon mapping
+export const PROFILE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  Brain,
+  Zap,
+  Scale,
+  Cpu,
+  Rocket,
+  Sparkles,
+  Anthropic: AnthropicIcon,
+  Cursor: CursorIcon,
+  Codex: OpenAIIcon,
+  OpenCode: OpenCodeIcon,
+  Gemini: GeminiIcon,
+  Copilot: CopilotIcon,
+};
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/model-selector.tsx b/temp_repo/apps/ui/src/components/views/board-view/shared/model-selector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..861f647b6d6ffa9ca3ff674fb981ce05691b7444
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/model-selector.tsx
@@ -0,0 +1,574 @@
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Brain, AlertTriangle } from 'lucide-react';
+import { AnthropicIcon, CursorIcon, OpenAIIcon, OpenCodeIcon } from '@/components/ui/provider-icon';
+import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import { useSetupStore } from '@/store/setup-store';
+import { getModelProvider } from '@automaker/types';
+import type { ModelProvider, CursorModelId } from '@automaker/types';
+import { CLAUDE_MODELS, CURSOR_MODELS, OPENCODE_MODELS, ModelOption } from './model-constants';
+import { useEffect, useRef } from 'react';
+import { Spinner } from '@/components/ui/spinner';
+import { useOpencodeModels } from '@/hooks/queries';
+
+interface ModelSelectorProps {
+  selectedModel: string; // Can be ModelAlias or "cursor-{id}"
+  onModelSelect: (model: string) => void;
+  testIdPrefix?: string;
+}
+
+export function ModelSelector({
+  selectedModel,
+  onModelSelect,
+  testIdPrefix = 'model-select',
+}: ModelSelectorProps) {
+  const {
+    enabledCursorModels,
+    cursorDefaultModel,
+    codexModels,
+    codexModelsLoading,
+    codexModelsError,
+    fetchCodexModels,
+    disabledProviders,
+    enabledOpencodeModels,
+    opencodeDefaultModel,
+    enabledDynamicModelIds,
+    opencodeModelsLoading,
+    fetchOpencodeModels,
+  } = useAppStore();
+  const { cursorCliStatus, codexCliStatus } = useSetupStore();
+
+  // Use React Query for OpenCode models so changes in settings are reflected immediately
+  const {
+    data: dynamicOpencodeModelsList = [],
+    isLoading: dynamicOpencodeLoading,
+    error: dynamicOpencodeError,
+    refetch: refetchOpencodeModels,
+  } = useOpencodeModels();
+
+  const selectedProvider = getModelProvider(selectedModel);
+
+  // Check if Cursor CLI is available
+  const isCursorAvailable = cursorCliStatus?.installed && cursorCliStatus?.auth?.authenticated;
+
+  // Check if Codex CLI is available
+  // @ts-expect-error - codexCliStatus uses CliStatus type but should use CodexCliStatus which has auth
+  const isCodexAvailable = codexCliStatus?.installed && codexCliStatus?.auth?.authenticated;
+
+  // Fetch Codex models on mount
+  useEffect(() => {
+    if (isCodexAvailable && codexModels.length === 0 && !codexModelsLoading) {
+      fetchCodexModels();
+    }
+  }, [isCodexAvailable, codexModels.length, codexModelsLoading, fetchCodexModels]);
+
+  // Track whether we've already attempted to fetch OpenCode models to avoid repeated retries
+  const opencodeFetchTriedRef = useRef(false);
+
+  // Fetch OpenCode models on mount if not already loaded (only once per mount)
+  const isOpencodeEnabled = !disabledProviders.includes('opencode');
+  useEffect(() => {
+    if (
+      isOpencodeEnabled &&
+      !opencodeModelsLoading &&
+      !dynamicOpencodeLoading &&
+      dynamicOpencodeModelsList.length === 0 &&
+      !opencodeFetchTriedRef.current
+    ) {
+      opencodeFetchTriedRef.current = true;
+      fetchOpencodeModels();
+    }
+  }, [
+    isOpencodeEnabled,
+    opencodeModelsLoading,
+    dynamicOpencodeLoading,
+    dynamicOpencodeModelsList.length,
+    fetchOpencodeModels,
+  ]);
+
+  // Transform codex models from store to ModelOption format
+  const dynamicCodexModels: ModelOption[] = codexModels.map((model) => {
+    // Infer badge based on tier
+    let badge: string | undefined;
+    if (model.tier === 'premium') badge = 'Premium';
+    else if (model.tier === 'basic') badge = 'Speed';
+    else if (model.tier === 'standard') badge = 'Balanced';
+
+    return {
+      id: model.id,
+      label: model.label,
+      description: model.description,
+      badge,
+      provider: 'codex' as ModelProvider,
+      hasThinking: model.hasThinking,
+    };
+  });
+
+  // Filter static OpenCode models based on enabled models from global settings
+  const filteredStaticOpencodeModels = OPENCODE_MODELS.filter((model) =>
+    (enabledOpencodeModels as string[]).includes(model.id)
+  );
+
+  // Filter dynamic OpenCode models based on enabled dynamic model IDs
+  const filteredDynamicOpencodeModels: ModelOption[] = dynamicOpencodeModelsList
+    .filter((model) => enabledDynamicModelIds.includes(model.id))
+    .map((model) => ({
+      id: model.id,
+      label: model.name,
+      description: model.description,
+      provider: 'opencode' as ModelProvider,
+    }));
+
+  // Combined OpenCode models (static + dynamic), deduplicating by model name
+  // Static IDs use dash format (opencode-glm-5-free), dynamic use slash format (opencode/glm-5-free)
+  const normalizeModelName = (id: string): string => {
+    if (id.startsWith('opencode-')) return id.slice('opencode-'.length);
+    if (id.startsWith('opencode/')) return id.slice('opencode/'.length);
+    return id;
+  };
+  const staticModelNames = new Set(
+    filteredStaticOpencodeModels.map((m) => normalizeModelName(m.id))
+  );
+  const uniqueDynamicModels = filteredDynamicOpencodeModels.filter(
+    (m) => !staticModelNames.has(normalizeModelName(m.id))
+  );
+  const allOpencodeModels = [...filteredStaticOpencodeModels, ...uniqueDynamicModels];
+
+  // Filter Cursor models based on enabled models from global settings
+  const filteredCursorModels = CURSOR_MODELS.filter((model) => {
+    // enabledCursorModels stores CursorModelIds which may or may not have "cursor-" prefix
+    // (e.g., 'auto', 'sonnet-4.5' without prefix, but 'cursor-gpt-5.2' with prefix)
+    // CURSOR_MODELS always has the "cursor-" prefix added in model-constants.ts
+    // Check both the full ID (for GPT models) and the unprefixed version (for non-GPT models)
+    const unprefixedId = model.id.startsWith('cursor-') ? model.id.slice(7) : model.id;
+    return (
+      enabledCursorModels.includes(model.id as CursorModelId) ||
+      enabledCursorModels.includes(unprefixedId as CursorModelId)
+    );
+  });
+
+  const handleProviderChange = (provider: ModelProvider) => {
+    if (provider === 'cursor' && selectedProvider !== 'cursor') {
+      // Switch to Cursor's default model (from global settings)
+      // cursorDefaultModel is now canonical (e.g., 'cursor-auto'), so use directly
+      onModelSelect(cursorDefaultModel);
+    } else if (provider === 'codex' && selectedProvider !== 'codex') {
+      // Switch to Codex's default model (use isDefault flag from dynamic models)
+      const defaultModel = codexModels.find((m) => m.isDefault);
+      const defaultModelId = defaultModel?.id || codexModels[0]?.id || 'codex-gpt-5.2-codex';
+      onModelSelect(defaultModelId);
+    } else if (provider === 'claude' && selectedProvider !== 'claude') {
+      // Switch to Claude's default model (canonical format)
+      onModelSelect('claude-sonnet');
+    } else if (provider === 'opencode' && selectedProvider !== 'opencode') {
+      // Switch to OpenCode's default model (prefer configured default if it is actually enabled)
+      const isDefaultModelAvailable =
+        opencodeDefaultModel && allOpencodeModels.some((m) => m.id === opencodeDefaultModel);
+      const defaultModelId = isDefaultModelAvailable
+        ? opencodeDefaultModel
+        : allOpencodeModels[0]?.id;
+      if (defaultModelId) {
+        onModelSelect(defaultModelId);
+      }
+    }
+  };
+
+  // Check which providers are disabled
+  const isClaudeDisabled = disabledProviders.includes('claude');
+  const isCursorDisabled = disabledProviders.includes('cursor');
+  const isCodexDisabled = disabledProviders.includes('codex');
+  const isOpencodeDisabled = disabledProviders.includes('opencode');
+
+  // Count available providers
+  const availableProviders = [
+    !isClaudeDisabled && 'claude',
+    !isCursorDisabled && 'cursor',
+    !isCodexDisabled && 'codex',
+    !isOpencodeDisabled && 'opencode',
+  ].filter(Boolean) as ModelProvider[];
+
+  return (
+    <div className="space-y-4">
+      {/* Provider Selection */}
+      {availableProviders.length > 1 && (
+        <div className="space-y-2">
+          <Label>AI Provider</Label>
+          <div className="flex gap-2">
+            {!isClaudeDisabled && (
+              <button
+                type="button"
+                onClick={() => handleProviderChange('claude')}
+                className={cn(
+                  'flex-1 px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-center gap-2',
+                  selectedProvider === 'claude'
+                    ? 'bg-primary text-primary-foreground border-primary'
+                    : 'bg-background hover:bg-accent border-border'
+                )}
+                data-testid={`${testIdPrefix}-provider-claude`}
+              >
+                <AnthropicIcon className="w-4 h-4" />
+                Claude
+              </button>
+            )}
+            {!isCursorDisabled && (
+              <button
+                type="button"
+                onClick={() => handleProviderChange('cursor')}
+                className={cn(
+                  'flex-1 px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-center gap-2',
+                  selectedProvider === 'cursor'
+                    ? 'bg-primary text-primary-foreground border-primary'
+                    : 'bg-background hover:bg-accent border-border'
+                )}
+                data-testid={`${testIdPrefix}-provider-cursor`}
+              >
+                <CursorIcon className="w-4 h-4" />
+                Cursor CLI
+              </button>
+            )}
+            {!isCodexDisabled && (
+              <button
+                type="button"
+                onClick={() => handleProviderChange('codex')}
+                className={cn(
+                  'flex-1 px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-center gap-2',
+                  selectedProvider === 'codex'
+                    ? 'bg-primary text-primary-foreground border-primary'
+                    : 'bg-background hover:bg-accent border-border'
+                )}
+                data-testid={`${testIdPrefix}-provider-codex`}
+              >
+                <OpenAIIcon className="w-4 h-4" />
+                Codex CLI
+              </button>
+            )}
+            {!isOpencodeDisabled && (
+              <button
+                type="button"
+                onClick={() => handleProviderChange('opencode')}
+                className={cn(
+                  'flex-1 px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-center gap-2',
+                  selectedProvider === 'opencode'
+                    ? 'bg-primary text-primary-foreground border-primary'
+                    : 'bg-background hover:bg-accent border-border'
+                )}
+                data-testid={`${testIdPrefix}-provider-opencode`}
+              >
+                <OpenCodeIcon className="w-4 h-4" />
+                OpenCode
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Claude Models */}
+      {selectedProvider === 'claude' && !isClaudeDisabled && (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <Label className="flex items-center gap-2">
+              <Brain className="w-4 h-4 text-primary" />
+              Claude Model
+            </Label>
+            <span className="text-[11px] px-2 py-0.5 rounded-full border border-primary/40 text-primary">
+              Native SDK
+            </span>
+          </div>
+          <div className="flex gap-2 flex-wrap">
+            {CLAUDE_MODELS.map((option) => {
+              const isSelected = selectedModel === option.id;
+              const shortName = option.label.replace('Claude ', '');
+              return (
+                <button
+                  key={option.id}
+                  type="button"
+                  onClick={() => onModelSelect(option.id)}
+                  title={option.description}
+                  className={cn(
+                    'flex-1 min-w-[80px] px-3 py-2 rounded-md border text-sm font-medium transition-colors',
+                    isSelected
+                      ? 'bg-primary text-primary-foreground border-primary'
+                      : 'bg-background hover:bg-accent border-input'
+                  )}
+                  data-testid={`${testIdPrefix}-${option.id}`}
+                >
+                  {shortName}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Cursor Models */}
+      {selectedProvider === 'cursor' && !isCursorDisabled && (
+        <div className="space-y-3">
+          {/* Warning when Cursor CLI is not available */}
+          {!isCursorAvailable && (
+            <div className="flex items-start gap-2 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20">
+              <AlertTriangle className="w-4 h-4 text-amber-400 mt-0.5 shrink-0" />
+              <div className="text-sm text-amber-400">
+                Cursor CLI is not installed or authenticated. Configure it in Settings → AI
+                Providers.
+              </div>
+            </div>
+          )}
+
+          <div className="flex items-center justify-between">
+            <Label className="flex items-center gap-2">
+              <CursorIcon className="w-4 h-4 text-primary" />
+              Cursor Model
+            </Label>
+            <span className="text-[11px] px-2 py-0.5 rounded-full border border-amber-500/40 text-amber-600 dark:text-amber-400">
+              CLI
+            </span>
+          </div>
+          <div className="flex flex-col gap-2">
+            {filteredCursorModels.length === 0 ? (
+              <div className="text-sm text-muted-foreground p-3 border border-dashed rounded-md text-center">
+                No Cursor models enabled. Enable models in Settings → AI Providers.
+              </div>
+            ) : (
+              filteredCursorModels.map((option) => {
+                const isSelected = selectedModel === option.id;
+                return (
+                  <button
+                    key={option.id}
+                    type="button"
+                    onClick={() => onModelSelect(option.id)}
+                    title={option.description}
+                    className={cn(
+                      'w-full px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-between',
+                      isSelected
+                        ? 'bg-primary text-primary-foreground border-primary'
+                        : 'bg-background hover:bg-accent border-border'
+                    )}
+                    data-testid={`${testIdPrefix}-${option.id}`}
+                  >
+                    <span>{option.label}</span>
+                    <div className="flex gap-1">
+                      {option.hasThinking && (
+                        <Badge
+                          variant="outline"
+                          className={cn(
+                            'text-xs',
+                            isSelected
+                              ? 'border-primary-foreground/50 text-primary-foreground'
+                              : 'border-amber-500/50 text-amber-600 dark:text-amber-400'
+                          )}
+                        >
+                          Thinking
+                        </Badge>
+                      )}
+                    </div>
+                  </button>
+                );
+              })
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Codex Models */}
+      {selectedProvider === 'codex' && !isCodexDisabled && (
+        <div className="space-y-3">
+          {/* Warning when Codex CLI is not available */}
+          {!isCodexAvailable && (
+            <div className="flex items-start gap-2 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20">
+              <AlertTriangle className="w-4 h-4 text-amber-400 mt-0.5 shrink-0" />
+              <div className="text-sm text-amber-400">
+                Codex CLI is not installed or authenticated. Configure it in Settings → AI
+                Providers.
+              </div>
+            </div>
+          )}
+
+          <div className="flex items-center justify-between">
+            <Label className="flex items-center gap-2">
+              <OpenAIIcon className="w-4 h-4 text-primary" />
+              Codex Model
+            </Label>
+            <span className="text-[11px] px-2 py-0.5 rounded-full border border-emerald-500/40 text-emerald-600 dark:text-emerald-400">
+              CLI
+            </span>
+          </div>
+
+          {/* Loading state */}
+          {codexModelsLoading && dynamicCodexModels.length === 0 && (
+            <div className="flex items-center justify-center gap-2 p-6 text-sm text-muted-foreground">
+              <Spinner size="sm" />
+              Loading models...
+            </div>
+          )}
+
+          {/* Error state */}
+          {codexModelsError && !codexModelsLoading && (
+            <div className="flex items-start gap-2 p-3 rounded-lg bg-red-500/10 border border-red-500/20">
+              <AlertTriangle className="w-4 h-4 text-red-400 mt-0.5 shrink-0" />
+              <div className="space-y-1">
+                <div className="text-sm text-red-400">Failed to load Codex models</div>
+                <button
+                  type="button"
+                  onClick={() => fetchCodexModels(true)}
+                  className="text-xs text-red-400 underline hover:no-underline"
+                >
+                  Retry
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Model list */}
+          {!codexModelsLoading && !codexModelsError && dynamicCodexModels.length === 0 && (
+            <div className="text-sm text-muted-foreground p-3 border border-dashed rounded-md text-center">
+              No Codex models available
+            </div>
+          )}
+
+          {!codexModelsLoading && dynamicCodexModels.length > 0 && (
+            <div className="flex flex-col gap-2">
+              {dynamicCodexModels.map((option) => {
+                const isSelected = selectedModel === option.id;
+                return (
+                  <button
+                    key={option.id}
+                    type="button"
+                    onClick={() => onModelSelect(option.id)}
+                    title={option.description}
+                    className={cn(
+                      'w-full px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-between',
+                      isSelected
+                        ? 'bg-primary text-primary-foreground border-primary'
+                        : 'bg-background hover:bg-accent border-border'
+                    )}
+                    data-testid={`${testIdPrefix}-${option.id}`}
+                  >
+                    <span>{option.label}</span>
+                    <div className="flex gap-1">
+                      {option.hasThinking && (
+                        <Badge
+                          variant="outline"
+                          className={cn(
+                            'text-xs',
+                            isSelected
+                              ? 'border-primary-foreground/50 text-primary-foreground'
+                              : 'border-emerald-500/50 text-emerald-600 dark:text-emerald-400'
+                          )}
+                        >
+                          Thinking
+                        </Badge>
+                      )}
+                      {option.badge && (
+                        <Badge
+                          variant="outline"
+                          className={cn(
+                            'text-xs',
+                            isSelected
+                              ? 'border-primary-foreground/50 text-primary-foreground'
+                              : 'border-muted-foreground/50 text-muted-foreground'
+                          )}
+                        >
+                          {option.badge}
+                        </Badge>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* OpenCode Models */}
+      {selectedProvider === 'opencode' && !isOpencodeDisabled && (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <Label className="flex items-center gap-2">
+              <OpenCodeIcon className="w-4 h-4 text-primary" />
+              OpenCode Model
+            </Label>
+            <span className="text-[11px] px-2 py-0.5 rounded-full border border-violet-500/40 text-violet-600 dark:text-violet-400">
+              CLI
+            </span>
+          </div>
+
+          {/* Loading state */}
+          {(opencodeModelsLoading || dynamicOpencodeLoading) && allOpencodeModels.length === 0 && (
+            <div className="flex items-center justify-center gap-2 p-6 text-sm text-muted-foreground">
+              <Spinner size="sm" />
+              Loading models...
+            </div>
+          )}
+
+          {/* Error state */}
+          {dynamicOpencodeError && !dynamicOpencodeLoading && (
+            <div className="flex items-start gap-2 p-3 rounded-lg bg-red-500/10 border border-red-500/20">
+              <AlertTriangle className="w-4 h-4 text-red-400 mt-0.5 shrink-0" />
+              <div className="space-y-1">
+                <div className="text-sm text-red-400">Failed to load OpenCode models</div>
+                <button
+                  type="button"
+                  onClick={() => refetchOpencodeModels()}
+                  className="text-xs text-red-400 underline hover:no-underline"
+                >
+                  Retry
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Empty state */}
+          {!opencodeModelsLoading &&
+            !dynamicOpencodeLoading &&
+            !dynamicOpencodeError &&
+            allOpencodeModels.length === 0 && (
+              <div className="text-sm text-muted-foreground p-3 border border-dashed rounded-md text-center">
+                No OpenCode models enabled. Enable models in Settings → AI Providers.
+              </div>
+            )}
+
+          {/* Model list */}
+          {!opencodeModelsLoading && !dynamicOpencodeLoading && allOpencodeModels.length > 0 && (
+            <div className="flex flex-col gap-2">
+              {allOpencodeModels.map((option) => {
+                const isSelected = selectedModel === option.id;
+                return (
+                  <button
+                    key={option.id}
+                    type="button"
+                    onClick={() => onModelSelect(option.id)}
+                    title={option.description}
+                    className={cn(
+                      'w-full px-3 py-2 rounded-md border text-sm font-medium transition-colors flex items-center justify-between',
+                      isSelected
+                        ? 'bg-primary text-primary-foreground border-primary'
+                        : 'bg-background hover:bg-accent border-border'
+                    )}
+                    data-testid={`${testIdPrefix}-${option.id}`}
+                  >
+                    <span>{option.label}</span>
+                    {option.badge && (
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          'text-xs',
+                          isSelected
+                            ? 'border-primary-foreground/50 text-primary-foreground'
+                            : 'border-muted-foreground/50 text-muted-foreground'
+                        )}
+                      >
+                        {option.badge}
+                      </Badge>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/pipeline-exclusion-controls.tsx b/temp_repo/apps/ui/src/components/views/board-view/shared/pipeline-exclusion-controls.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bc2da027aa778fb611325e09f4f594df4ba51c01
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/pipeline-exclusion-controls.tsx
@@ -0,0 +1,113 @@
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { GitBranch, Workflow } from 'lucide-react';
+import { usePipelineConfig } from '@/hooks/queries/use-pipeline';
+import { cn } from '@/lib/utils';
+
+interface PipelineExclusionControlsProps {
+  projectPath: string | undefined;
+  excludedPipelineSteps: string[];
+  onExcludedStepsChange: (excludedSteps: string[]) => void;
+  testIdPrefix?: string;
+  disabled?: boolean;
+}
+
+/**
+ * Component for selecting which custom pipeline steps should be excluded for a feature.
+ * Each pipeline step is shown as a toggleable switch, defaulting to enabled (included).
+ * Disabling a step adds it to the exclusion list.
+ */
+export function PipelineExclusionControls({
+  projectPath,
+  excludedPipelineSteps,
+  onExcludedStepsChange,
+  testIdPrefix = 'pipeline-exclusion',
+  disabled = false,
+}: PipelineExclusionControlsProps) {
+  const { data: pipelineConfig, isLoading } = usePipelineConfig(projectPath);
+
+  // Sort steps by order
+  const sortedSteps = [...(pipelineConfig?.steps || [])].sort((a, b) => a.order - b.order);
+
+  // If no pipeline steps exist or loading, don't render anything
+  if (isLoading || sortedSteps.length === 0) {
+    return null;
+  }
+
+  const toggleStep = (stepId: string) => {
+    const isCurrentlyExcluded = excludedPipelineSteps.includes(stepId);
+    if (isCurrentlyExcluded) {
+      // Remove from exclusions (enable the step)
+      onExcludedStepsChange(excludedPipelineSteps.filter((id) => id !== stepId));
+    } else {
+      // Add to exclusions (disable the step)
+      onExcludedStepsChange([...excludedPipelineSteps, stepId]);
+    }
+  };
+
+  const allExcluded = sortedSteps.every((step) => excludedPipelineSteps.includes(step.id));
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <Workflow className="w-4 h-4 text-muted-foreground" />
+        <Label className="text-sm font-medium">Custom Pipeline Steps</Label>
+      </div>
+
+      <div className="space-y-2">
+        {sortedSteps.map((step) => {
+          const isIncluded = !excludedPipelineSteps.includes(step.id);
+          return (
+            <div
+              key={step.id}
+              className={cn(
+                'flex items-center justify-between gap-3 px-3 py-2 rounded-md border',
+                isIncluded
+                  ? 'border-border/50 bg-muted/30'
+                  : 'border-border/30 bg-muted/10 opacity-60'
+              )}
+            >
+              <div className="flex items-center gap-2 min-w-0 flex-1">
+                <div
+                  className={cn(
+                    'w-2 h-2 rounded-full flex-shrink-0',
+                    step.colorClass || 'bg-gray-400'
+                  )}
+                  style={{
+                    backgroundColor: step.colorClass?.startsWith('#') ? step.colorClass : undefined,
+                  }}
+                />
+                <span
+                  className={cn(
+                    'text-sm truncate',
+                    isIncluded ? 'text-foreground' : 'text-muted-foreground'
+                  )}
+                >
+                  {step.name}
+                </span>
+              </div>
+              <Switch
+                checked={isIncluded}
+                onCheckedChange={() => toggleStep(step.id)}
+                disabled={disabled}
+                data-testid={`${testIdPrefix}-step-${step.id}`}
+                aria-label={`${isIncluded ? 'Disable' : 'Enable'} ${step.name} pipeline step`}
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      {allExcluded && (
+        <p className="text-xs text-muted-foreground flex items-center gap-1.5">
+          <GitBranch className="w-3.5 h-3.5" />
+          All pipeline steps disabled. Feature will skip directly to verification.
+        </p>
+      )}
+
+      <p className="text-xs text-muted-foreground">
+        Enabled steps will run after implementation. Disable steps to skip them for this feature.
+      </p>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/planning-mode-select.tsx b/temp_repo/apps/ui/src/components/views/board-view/shared/planning-mode-select.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e197eee9bf0fdd9cf9653c24cd40f92f18ad45a8
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/planning-mode-select.tsx
@@ -0,0 +1,161 @@
+import { Zap, ClipboardList, FileText, ScrollText } from 'lucide-react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+import type { PlanningMode } from '@automaker/types';
+
+interface PlanningModeSelectProps {
+  mode: PlanningMode;
+  onModeChange: (mode: PlanningMode) => void;
+  requireApproval?: boolean;
+  onRequireApprovalChange?: (require: boolean) => void;
+  testIdPrefix?: string;
+  className?: string;
+  disabled?: boolean;
+  /** If true, only renders the dropdown without description or checkbox */
+  compact?: boolean;
+}
+
+const modes = [
+  {
+    value: 'skip' as const,
+    label: 'Skip',
+    description: 'Direct implementation, no upfront planning',
+    icon: Zap,
+    color: 'text-emerald-500',
+  },
+  {
+    value: 'lite' as const,
+    label: 'Lite',
+    description: 'Think through approach, create task list',
+    icon: ClipboardList,
+    color: 'text-blue-500',
+  },
+  {
+    value: 'spec' as const,
+    label: 'Spec',
+    description: 'Generate spec with acceptance criteria',
+    icon: FileText,
+    color: 'text-purple-500',
+  },
+  {
+    value: 'full' as const,
+    label: 'Full',
+    description: 'Comprehensive spec with phased plan',
+    icon: ScrollText,
+    color: 'text-amber-500',
+  },
+];
+
+/**
+ * PlanningModeSelect - Compact dropdown selector for planning modes
+ *
+ * A lightweight alternative to PlanningModeSelector for contexts where
+ * spec management UI is not needed (e.g., mass edit, bulk operations).
+ *
+ * Shows icon + label in dropdown, with description text below.
+ * Does not include spec generation, approval, or require-approval checkbox.
+ *
+ * @example
+ * ```tsx
+ * <PlanningModeSelect
+ *   mode={planningMode}
+ *   onModeChange={(mode) => {
+ *     setPlanningMode(mode);
+ *     setRequireApproval(mode === 'spec' || mode === 'full');
+ *   }}
+ *   testIdPrefix="mass-edit-planning"
+ * />
+ * ```
+ */
+export function PlanningModeSelect({
+  mode,
+  onModeChange,
+  requireApproval,
+  onRequireApprovalChange,
+  testIdPrefix = 'planning-mode',
+  className,
+  disabled = false,
+  compact = false,
+}: PlanningModeSelectProps) {
+  const selectedMode = modes.find((m) => m.value === mode);
+
+  // Disable approval checkbox for skip mode (lite supports approval)
+  const isApprovalDisabled = disabled || mode === 'skip';
+
+  const selectDropdown = (
+    <Select
+      value={mode}
+      onValueChange={(value: string) => onModeChange(value as PlanningMode)}
+      disabled={disabled}
+    >
+      <SelectTrigger className="h-9" data-testid={`${testIdPrefix}-select-trigger`}>
+        <SelectValue>
+          {selectedMode && (
+            <div className="flex items-center gap-2">
+              <selectedMode.icon className={cn('h-4 w-4', selectedMode.color)} />
+              <span>{selectedMode.label}</span>
+            </div>
+          )}
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {modes.map((m) => {
+          const Icon = m.icon;
+          return (
+            <SelectItem
+              key={m.value}
+              value={m.value}
+              data-testid={`${testIdPrefix}-option-${m.value}`}
+            >
+              <div className="flex items-center gap-2">
+                <Icon className={cn('h-3.5 w-3.5', m.color)} />
+                <span>{m.label}</span>
+              </div>
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+
+  // Compact mode - just the dropdown
+  if (compact) {
+    return <div className={className}>{selectDropdown}</div>;
+  }
+
+  // Full mode with description and optional checkbox
+  return (
+    <div className={cn('space-y-2', className)}>
+      {selectDropdown}
+      {selectedMode && <p className="text-xs text-muted-foreground">{selectedMode.description}</p>}
+      {onRequireApprovalChange && (
+        <div className="flex items-center gap-2 pt-1">
+          <Checkbox
+            id={`${testIdPrefix}-require-approval`}
+            checked={requireApproval && !isApprovalDisabled}
+            onCheckedChange={(checked) => onRequireApprovalChange(!!checked)}
+            disabled={isApprovalDisabled}
+            data-testid={`${testIdPrefix}-require-approval-checkbox`}
+          />
+          <Label
+            htmlFor={`${testIdPrefix}-require-approval`}
+            className={cn(
+              'text-sm font-normal',
+              isApprovalDisabled ? 'cursor-not-allowed text-muted-foreground' : 'cursor-pointer'
+            )}
+          >
+            Require plan approval before execution
+          </Label>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/planning-mode-selector.tsx b/temp_repo/apps/ui/src/components/views/board-view/shared/planning-mode-selector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c9bb5db2d666f40afa7c0039ce503266a824b70
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/planning-mode-selector.tsx
@@ -0,0 +1,346 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  Zap,
+  ClipboardList,
+  FileText,
+  ScrollText,
+  Check,
+  Eye,
+  RefreshCw,
+  Sparkles,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { cn } from '@/lib/utils';
+import type { PlanSpec } from '@/store/app-store';
+
+export type PlanningMode = 'skip' | 'lite' | 'spec' | 'full';
+
+// Re-export for backwards compatibility
+export type { ParsedTask, PlanSpec } from '@/store/app-store';
+
+interface PlanningModeSelectorProps {
+  mode: PlanningMode;
+  onModeChange: (mode: PlanningMode) => void;
+  requireApproval?: boolean;
+  onRequireApprovalChange?: (require: boolean) => void;
+  planSpec?: PlanSpec;
+  onGenerateSpec?: () => void;
+  onApproveSpec?: () => void;
+  onRejectSpec?: () => void;
+  onViewSpec?: () => void;
+  isGenerating?: boolean;
+  featureDescription?: string; // For auto-generation context
+  testIdPrefix?: string;
+  compact?: boolean; // For use in dialogs vs settings
+}
+
+const modes = [
+  {
+    value: 'skip' as const,
+    label: 'Skip',
+    description: 'Direct implementation, no upfront planning',
+    icon: Zap,
+    color: 'text-emerald-500',
+    bgColor: 'bg-emerald-500/10',
+    borderColor: 'border-emerald-500/30',
+    badge: 'Default',
+  },
+  {
+    value: 'lite' as const,
+    label: 'Lite',
+    description: 'Think through approach, create task list',
+    icon: ClipboardList,
+    color: 'text-blue-500',
+    bgColor: 'bg-blue-500/10',
+    borderColor: 'border-blue-500/30',
+  },
+  {
+    value: 'spec' as const,
+    label: 'Spec',
+    description: 'Generate spec with acceptance criteria',
+    icon: FileText,
+    color: 'text-purple-500',
+    bgColor: 'bg-purple-500/10',
+    borderColor: 'border-purple-500/30',
+    badge: 'Approval Required',
+  },
+  {
+    value: 'full' as const,
+    label: 'Full',
+    description: 'Comprehensive spec with phased plan',
+    icon: ScrollText,
+    color: 'text-amber-500',
+    bgColor: 'bg-amber-500/10',
+    borderColor: 'border-amber-500/30',
+    badge: 'Approval Required',
+  },
+];
+
+export function PlanningModeSelector({
+  mode,
+  onModeChange,
+  requireApproval,
+  onRequireApprovalChange,
+  planSpec,
+  onGenerateSpec,
+  onApproveSpec,
+  onRejectSpec,
+  onViewSpec,
+  isGenerating = false,
+  featureDescription,
+  testIdPrefix = 'planning',
+  compact = false,
+}: PlanningModeSelectorProps) {
+  const [showPreview, setShowPreview] = useState(false);
+  const selectedMode = modes.find((m) => m.value === mode);
+  const requiresApproval = mode === 'spec' || mode === 'full';
+  const canGenerate = requiresApproval && featureDescription?.trim() && !isGenerating;
+  const hasSpec = planSpec && planSpec.content;
+
+  return (
+    <div className="space-y-4">
+      {/* Header with icon */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div
+            className={cn(
+              'w-8 h-8 rounded-lg flex items-center justify-center',
+              selectedMode?.bgColor || 'bg-muted'
+            )}
+          >
+            {selectedMode && <selectedMode.icon className={cn('h-4 w-4', selectedMode.color)} />}
+          </div>
+          <div>
+            <Label className="text-sm font-medium">Planning Mode</Label>
+            <p className="text-xs text-muted-foreground">
+              Choose how much upfront planning before implementation
+            </p>
+          </div>
+        </div>
+
+        {/* Quick action buttons when spec/full mode */}
+        {requiresApproval && hasSpec && (
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" size="sm" onClick={onViewSpec} className="h-7 px-2">
+              <Eye className="h-3.5 w-3.5 mr-1" />
+              View
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* Mode Selection Cards */}
+      <div className={cn('grid gap-2', compact ? 'grid-cols-2' : 'grid-cols-2 sm:grid-cols-4')}>
+        {modes.map((m) => {
+          const isSelected = mode === m.value;
+          const Icon = m.icon;
+          return (
+            <button
+              key={m.value}
+              type="button"
+              onClick={() => onModeChange(m.value)}
+              data-testid={`${testIdPrefix}-mode-${m.value}`}
+              className={cn(
+                'flex flex-col items-center gap-2 p-3 rounded-xl cursor-pointer transition-all duration-200',
+                'border-2 hover:border-primary/50',
+                isSelected
+                  ? cn('border-primary', m.bgColor)
+                  : 'border-border/50 bg-card/50 hover:bg-accent/30'
+              )}
+            >
+              <div
+                className={cn(
+                  'w-10 h-10 rounded-full flex items-center justify-center transition-colors',
+                  isSelected ? m.bgColor : 'bg-muted'
+                )}
+              >
+                <Icon
+                  className={cn(
+                    'h-5 w-5 transition-colors',
+                    isSelected ? m.color : 'text-muted-foreground'
+                  )}
+                />
+              </div>
+              <div className="text-center">
+                <div className="flex items-center justify-center gap-1">
+                  <span
+                    className={cn(
+                      'font-medium text-sm',
+                      isSelected ? 'text-foreground' : 'text-muted-foreground'
+                    )}
+                  >
+                    {m.label}
+                  </span>
+                  {m.badge && (
+                    <span
+                      className={cn(
+                        'text-[9px] px-1 py-0.5 rounded font-medium',
+                        m.badge === 'Default'
+                          ? 'bg-emerald-500/15 text-emerald-500'
+                          : 'bg-amber-500/15 text-amber-500'
+                      )}
+                    >
+                      {m.badge === 'Default' ? 'Default' : 'Review'}
+                    </span>
+                  )}
+                </div>
+                {!compact && (
+                  <p className="text-[10px] text-muted-foreground mt-0.5 line-clamp-2">
+                    {m.description}
+                  </p>
+                )}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Require Approval Checkbox - Only show when mode !== 'skip' */}
+      {mode !== 'skip' && onRequireApprovalChange && (
+        <div className="flex items-center gap-2 mt-3 pt-3 border-t border-border">
+          <Checkbox
+            id="require-approval"
+            checked={requireApproval}
+            onCheckedChange={(checked) => onRequireApprovalChange(checked === true)}
+            data-testid={`${testIdPrefix}-require-approval-checkbox`}
+          />
+          <Label
+            htmlFor="require-approval"
+            className="text-sm text-muted-foreground cursor-pointer"
+          >
+            Manually approve plan before implementation
+          </Label>
+        </div>
+      )}
+
+      {/* Spec Preview/Actions Panel - Only for spec/full modes */}
+      {requiresApproval && (
+        <div
+          className={cn(
+            'rounded-xl border transition-all duration-300',
+            planSpec?.status === 'approved'
+              ? 'border-emerald-500/30 bg-emerald-500/5'
+              : planSpec?.status === 'generated'
+                ? 'border-amber-500/30 bg-amber-500/5'
+                : 'border-border/50 bg-muted/30'
+          )}
+        >
+          <div className="p-4 space-y-3">
+            {/* Status indicator */}
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                {isGenerating ? (
+                  <>
+                    <Spinner size="sm" />
+                    <span className="text-sm text-muted-foreground">
+                      Generating {mode === 'full' ? 'comprehensive spec' : 'spec'}...
+                    </span>
+                  </>
+                ) : planSpec?.status === 'approved' ? (
+                  <>
+                    <Check className="h-4 w-4 text-emerald-500" />
+                    <span className="text-sm text-emerald-500 font-medium">Spec Approved</span>
+                  </>
+                ) : planSpec?.status === 'generated' ? (
+                  <>
+                    <Eye className="h-4 w-4 text-amber-500" />
+                    <span className="text-sm text-amber-500 font-medium">
+                      Spec Ready for Review
+                    </span>
+                  </>
+                ) : (
+                  <>
+                    <Sparkles className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm text-muted-foreground">
+                      Spec will be generated when feature starts
+                    </span>
+                  </>
+                )}
+              </div>
+
+              {/* Auto-generate toggle area */}
+              {!planSpec?.status && canGenerate && onGenerateSpec && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={onGenerateSpec}
+                  disabled={isGenerating}
+                  className="h-7"
+                >
+                  <Sparkles className="h-3.5 w-3.5 mr-1" />
+                  Pre-generate
+                </Button>
+              )}
+            </div>
+
+            {/* Spec content preview */}
+            {hasSpec && (
+              <div className="space-y-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowPreview(!showPreview)}
+                  className="w-full justify-between h-8 px-2"
+                >
+                  <span className="text-xs text-muted-foreground">
+                    {showPreview ? 'Hide Preview' : 'Show Preview'}
+                  </span>
+                  <Eye className="h-3.5 w-3.5" />
+                </Button>
+
+                {showPreview && (
+                  <div className="rounded-lg bg-background/80 border border-border/50 p-3 max-h-48 overflow-y-auto">
+                    <pre className="text-xs text-muted-foreground whitespace-pre-wrap font-mono">
+                      {planSpec.content}
+                    </pre>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Action buttons when spec is generated */}
+            {planSpec?.status === 'generated' && (
+              <div className="flex items-center gap-2 pt-2 border-t border-border/30">
+                <Button variant="outline" size="sm" onClick={onRejectSpec} className="flex-1">
+                  Request Changes
+                </Button>
+                <Button
+                  size="sm"
+                  onClick={onApproveSpec}
+                  className="flex-1 bg-emerald-500 hover:bg-emerald-600 text-white"
+                >
+                  <Check className="h-3.5 w-3.5 mr-1" />
+                  Approve Spec
+                </Button>
+              </div>
+            )}
+
+            {/* Regenerate option when approved */}
+            {planSpec?.status === 'approved' && onGenerateSpec && (
+              <div className="flex items-center justify-end pt-2 border-t border-border/30">
+                <Button variant="ghost" size="sm" onClick={onGenerateSpec} className="h-7">
+                  <RefreshCw className="h-3.5 w-3.5 mr-1" />
+                  Regenerate
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Info text for non-approval modes */}
+      {!requiresApproval && (
+        <p className="text-xs text-muted-foreground bg-muted/30 rounded-lg p-3">
+          {mode === 'skip'
+            ? 'The agent will start implementing immediately without creating a plan or spec.'
+            : "The agent will create a planning outline before implementing, but won't wait for approval."}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/priority-select.tsx b/temp_repo/apps/ui/src/components/views/board-view/shared/priority-select.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..834dacabe714443287adaf9b5509dcb4da814dbd
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/priority-select.tsx
@@ -0,0 +1,112 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { AlertCircle, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface PrioritySelectProps {
+  selectedPriority: number;
+  onPrioritySelect: (priority: number) => void;
+  testIdPrefix?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+const priorities = [
+  {
+    value: 1,
+    label: 'High',
+    description: 'Urgent, needs immediate attention',
+    icon: ChevronUp,
+    color: 'text-red-500',
+    bgColor: 'bg-red-500/10',
+  },
+  {
+    value: 2,
+    label: 'Medium',
+    description: 'Normal priority, standard workflow',
+    icon: AlertCircle,
+    color: 'text-yellow-500',
+    bgColor: 'bg-yellow-500/10',
+  },
+  {
+    value: 3,
+    label: 'Low',
+    description: 'Can wait, not time-sensitive',
+    icon: ChevronDown,
+    color: 'text-blue-500',
+    bgColor: 'bg-blue-500/10',
+  },
+];
+
+/**
+ * PrioritySelect - Compact dropdown selector for feature priority
+ *
+ * A lightweight alternative to PrioritySelector for contexts where
+ * space is limited (e.g., mass edit, bulk operations).
+ *
+ * Shows icon + priority level in dropdown, with description below.
+ *
+ * @example
+ * ```tsx
+ * <PrioritySelect
+ *   selectedPriority={priority}
+ *   onPrioritySelect={setPriority}
+ *   testIdPrefix="mass-edit-priority"
+ * />
+ * ```
+ */
+export function PrioritySelect({
+  selectedPriority,
+  onPrioritySelect,
+  testIdPrefix = 'priority',
+  className,
+  disabled = false,
+}: PrioritySelectProps) {
+  const selectedPriorityObj = priorities.find((p) => p.value === selectedPriority);
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <Select
+        value={selectedPriority.toString()}
+        onValueChange={(value: string) => onPrioritySelect(parseInt(value, 10))}
+        disabled={disabled}
+      >
+        <SelectTrigger className="h-9" data-testid={`${testIdPrefix}-select-trigger`}>
+          <SelectValue>
+            {selectedPriorityObj && (
+              <div className="flex items-center gap-2">
+                <selectedPriorityObj.icon className={cn('h-4 w-4', selectedPriorityObj.color)} />
+                <span>{selectedPriorityObj.label}</span>
+              </div>
+            )}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {priorities.map((p) => {
+            const Icon = p.icon;
+            return (
+              <SelectItem
+                key={p.value}
+                value={p.value.toString()}
+                data-testid={`${testIdPrefix}-option-${p.label.toLowerCase()}`}
+              >
+                <div className="flex items-center gap-2">
+                  <Icon className={cn('h-3.5 w-3.5', p.color)} />
+                  <span>{p.label}</span>
+                </div>
+              </SelectItem>
+            );
+          })}
+        </SelectContent>
+      </Select>
+      {selectedPriorityObj && (
+        <p className="text-xs text-muted-foreground">{selectedPriorityObj.description}</p>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/priority-selector.tsx b/temp_repo/apps/ui/src/components/views/board-view/shared/priority-selector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8f63880164c9542d21237f8ee3bea68e9e2a4062
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/priority-selector.tsx
@@ -0,0 +1,57 @@
+import { cn } from '@/lib/utils';
+
+interface PrioritySelectorProps {
+  selectedPriority: number;
+  onPrioritySelect: (priority: number) => void;
+  testIdPrefix?: string;
+}
+
+export function PrioritySelector({
+  selectedPriority,
+  onPrioritySelect,
+  testIdPrefix = 'priority',
+}: PrioritySelectorProps) {
+  return (
+    <div className="flex gap-2">
+      <button
+        type="button"
+        onClick={() => onPrioritySelect(1)}
+        className={cn(
+          'flex-1 px-2 sm:px-3 py-2 rounded-md text-xs sm:text-sm font-medium transition-colors',
+          selectedPriority === 1
+            ? 'bg-red-500/20 text-red-500 border-2 border-red-500/50'
+            : 'bg-muted/50 text-muted-foreground border border-border hover:bg-muted'
+        )}
+        data-testid={`${testIdPrefix}-high-button`}
+      >
+        High
+      </button>
+      <button
+        type="button"
+        onClick={() => onPrioritySelect(2)}
+        className={cn(
+          'flex-1 px-2 sm:px-3 py-2 rounded-md text-xs sm:text-sm font-medium transition-colors',
+          selectedPriority === 2
+            ? 'bg-yellow-500/20 text-yellow-500 border-2 border-yellow-500/50'
+            : 'bg-muted/50 text-muted-foreground border border-border hover:bg-muted'
+        )}
+        data-testid={`${testIdPrefix}-medium-button`}
+      >
+        Medium
+      </button>
+      <button
+        type="button"
+        onClick={() => onPrioritySelect(3)}
+        className={cn(
+          'flex-1 px-2 sm:px-3 py-2 rounded-md text-xs sm:text-sm font-medium transition-colors',
+          selectedPriority === 3
+            ? 'bg-blue-500/20 text-blue-500 border-2 border-blue-500/50'
+            : 'bg-muted/50 text-muted-foreground border border-border hover:bg-muted'
+        )}
+        data-testid={`${testIdPrefix}-low-button`}
+      >
+        Low
+      </button>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/reasoning-effort-selector.tsx b/temp_repo/apps/ui/src/components/views/board-view/shared/reasoning-effort-selector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..33011cfc20a86a745a63d802061bdc8fa4553a9f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/reasoning-effort-selector.tsx
@@ -0,0 +1,47 @@
+import { Label } from '@/components/ui/label';
+import { Brain } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { ReasoningEffort } from '@automaker/types';
+import { REASONING_EFFORT_LEVELS, REASONING_EFFORT_LABELS } from './model-constants';
+
+interface ReasoningEffortSelectorProps {
+  selectedEffort: ReasoningEffort;
+  onEffortSelect: (effort: ReasoningEffort) => void;
+  testIdPrefix?: string;
+}
+
+export function ReasoningEffortSelector({
+  selectedEffort,
+  onEffortSelect,
+  testIdPrefix = 'reasoning-effort',
+}: ReasoningEffortSelectorProps) {
+  return (
+    <div className="space-y-2 pt-2 border-t border-border">
+      <Label className="flex items-center gap-2 text-sm">
+        <Brain className="w-3.5 h-3.5 text-muted-foreground" />
+        Reasoning Effort
+      </Label>
+      <div className="flex gap-2 flex-wrap">
+        {REASONING_EFFORT_LEVELS.map((effort) => (
+          <button
+            key={effort}
+            type="button"
+            onClick={() => onEffortSelect(effort)}
+            className={cn(
+              'flex-1 px-3 py-2 rounded-md border text-sm font-medium transition-colors min-w-[60px]',
+              selectedEffort === effort
+                ? 'bg-primary text-primary-foreground border-primary'
+                : 'bg-background hover:bg-accent border-input'
+            )}
+            data-testid={`${testIdPrefix}-${effort}`}
+          >
+            {REASONING_EFFORT_LABELS[effort]}
+          </button>
+        ))}
+      </div>
+      <p className="text-xs text-muted-foreground">
+        Higher efforts give more reasoning tokens for complex problems.
+      </p>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/testing-tab-content.tsx b/temp_repo/apps/ui/src/components/views/board-view/shared/testing-tab-content.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1e6139f47398aeaefe27f40cfdcc936b20581608
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/testing-tab-content.tsx
@@ -0,0 +1,40 @@
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { FlaskConical } from 'lucide-react';
+
+interface TestingTabContentProps {
+  skipTests: boolean;
+  onSkipTestsChange: (skipTests: boolean) => void;
+  testIdPrefix?: string;
+}
+
+export function TestingTabContent({
+  skipTests,
+  onSkipTestsChange,
+  testIdPrefix = '',
+}: TestingTabContentProps) {
+  const checkboxId = testIdPrefix ? `${testIdPrefix}-skip-tests` : 'skip-tests';
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center space-x-2">
+        <Checkbox
+          id={checkboxId}
+          checked={!skipTests}
+          onCheckedChange={(checked) => onSkipTestsChange(checked !== true)}
+          data-testid={`${testIdPrefix ? testIdPrefix + '-' : ''}skip-tests-checkbox`}
+        />
+        <div className="flex items-center gap-2">
+          <Label htmlFor={checkboxId} className="text-sm cursor-pointer">
+            Enable automated testing
+          </Label>
+          <FlaskConical className="w-3.5 h-3.5 text-muted-foreground" />
+        </div>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        When enabled, the agent will use Playwright to verify the feature works correctly before
+        marking it as verified. When disabled, manual verification will be required.
+      </p>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/thinking-level-selector.tsx b/temp_repo/apps/ui/src/components/views/board-view/shared/thinking-level-selector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3a69d58796820d5d662adfdd062901c6fa425f6b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/thinking-level-selector.tsx
@@ -0,0 +1,56 @@
+import { Label } from '@/components/ui/label';
+import { Brain } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { ThinkingLevel } from '@/store/app-store';
+import { THINKING_LEVEL_LABELS } from './model-constants';
+import { getThinkingLevelsForModel } from '@automaker/types';
+
+interface ThinkingLevelSelectorProps {
+  selectedLevel: ThinkingLevel;
+  onLevelSelect: (level: ThinkingLevel) => void;
+  testIdPrefix?: string;
+  /** Model ID is required for correct thinking level filtering.
+   *  Without it, adaptive thinking won't be available for Opus 4.6. */
+  model?: string;
+}
+
+export function ThinkingLevelSelector({
+  selectedLevel,
+  onLevelSelect,
+  testIdPrefix = 'thinking-level',
+  model,
+}: ThinkingLevelSelectorProps) {
+  const levels = getThinkingLevelsForModel(model || '');
+
+  return (
+    <div className="space-y-2 pt-2 border-t border-border">
+      <Label className="flex items-center gap-2 text-sm">
+        <Brain className="w-3.5 h-3.5 text-muted-foreground" />
+        Thinking Level
+      </Label>
+      <div className="flex gap-2 flex-wrap">
+        {levels.map((level) => (
+          <button
+            key={level}
+            type="button"
+            onClick={() => onLevelSelect(level)}
+            className={cn(
+              'flex-1 px-3 py-2 rounded-md border text-sm font-medium transition-colors min-w-[60px]',
+              selectedLevel === level
+                ? 'bg-primary text-primary-foreground border-primary'
+                : 'bg-background hover:bg-accent border-input'
+            )}
+            data-testid={`${testIdPrefix}-${level}`}
+          >
+            {THINKING_LEVEL_LABELS[level]}
+          </button>
+        ))}
+      </div>
+      <p className="text-xs text-muted-foreground">
+        {levels.includes('adaptive')
+          ? 'Adaptive thinking lets the model decide how much reasoning to use.'
+          : 'Higher levels give more time to reason through complex problems.'}
+      </p>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/shared/work-mode-selector.tsx b/temp_repo/apps/ui/src/components/views/board-view/shared/work-mode-selector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b2e7c274d472fcfbf662bdb9e15ea1541cbe2f42
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/shared/work-mode-selector.tsx
@@ -0,0 +1,163 @@
+'use client';
+
+import { Label } from '@/components/ui/label';
+import { BranchAutocomplete } from '@/components/ui/branch-autocomplete';
+import { GitBranch, GitFork, Pencil } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export type WorkMode = 'current' | 'auto' | 'custom';
+
+interface WorkModeSelectorProps {
+  workMode: WorkMode;
+  onWorkModeChange: (mode: WorkMode) => void;
+  branchName: string;
+  onBranchNameChange: (branchName: string) => void;
+  branchSuggestions: string[];
+  branchCardCounts?: Record<string, number>;
+  currentBranch?: string;
+  disabled?: boolean;
+  testIdPrefix?: string;
+}
+
+const WORK_MODES = [
+  {
+    value: 'current' as const,
+    label: 'Current Branch',
+    description: 'Work directly on the selected branch',
+    icon: GitBranch,
+  },
+  {
+    value: 'auto' as const,
+    label: 'Auto Worktree',
+    description: 'Create isolated worktree automatically',
+    icon: GitFork,
+  },
+  {
+    value: 'custom' as const,
+    label: 'Custom Branch',
+    description: 'Specify a branch name',
+    icon: Pencil,
+  },
+];
+
+export function WorkModeSelector({
+  workMode,
+  onWorkModeChange,
+  branchName,
+  onBranchNameChange,
+  branchSuggestions,
+  branchCardCounts,
+  currentBranch,
+  disabled = false,
+  testIdPrefix = 'work-mode',
+}: WorkModeSelectorProps) {
+  const hasError = workMode === 'custom' && !branchName.trim();
+
+  return (
+    <div className="space-y-3">
+      <Label id={`${testIdPrefix}-label`}>Work Mode</Label>
+
+      <div className="grid grid-cols-3 gap-2">
+        {WORK_MODES.map((mode) => {
+          const isSelected = workMode === mode.value;
+          const Icon = mode.icon;
+          return (
+            <button
+              key={mode.value}
+              type="button"
+              onClick={() => !disabled && onWorkModeChange(mode.value)}
+              disabled={disabled}
+              data-testid={`${testIdPrefix}-${mode.value}`}
+              className={cn(
+                'flex flex-col items-center gap-1.5 p-3 rounded-lg cursor-pointer transition-all duration-200',
+                'border-2 hover:border-primary/50',
+                isSelected
+                  ? 'border-primary bg-primary/10'
+                  : 'border-border/50 bg-card/50 hover:bg-accent/30',
+                disabled && 'opacity-50 cursor-not-allowed'
+              )}
+            >
+              <div
+                className={cn(
+                  'w-8 h-8 rounded-full flex items-center justify-center transition-colors',
+                  isSelected ? 'bg-primary/20' : 'bg-muted'
+                )}
+              >
+                <Icon
+                  className={cn(
+                    'h-4 w-4 transition-colors',
+                    isSelected ? 'text-primary' : 'text-muted-foreground'
+                  )}
+                />
+              </div>
+              <span
+                className={cn(
+                  'font-medium text-xs text-center',
+                  isSelected ? 'text-foreground' : 'text-muted-foreground'
+                )}
+              >
+                {mode.label}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Description text based on selected mode */}
+      <p className="text-xs text-muted-foreground">
+        {workMode === 'current' && (
+          <>
+            Work will be done directly on{' '}
+            {currentBranch ? (
+              <span className="font-medium">{currentBranch}</span>
+            ) : (
+              'the current branch'
+            )}
+            . No isolation.
+          </>
+        )}
+        {workMode === 'auto' && (
+          <>
+            A new worktree will be created automatically based on{' '}
+            {currentBranch ? (
+              <span className="font-medium">{currentBranch}</span>
+            ) : (
+              'the current branch'
+            )}{' '}
+            when this card is created.
+          </>
+        )}
+        {workMode === 'custom' && (
+          <>Specify a branch name below. A worktree will be created if it doesn't exist.</>
+        )}
+      </p>
+
+      {/* Branch input for custom mode */}
+      {workMode === 'custom' && (
+        <div className="space-y-1">
+          <BranchAutocomplete
+            value={branchName}
+            onChange={onBranchNameChange}
+            branches={branchSuggestions}
+            branchCardCounts={branchCardCounts}
+            placeholder="Select or create branch..."
+            data-testid={`${testIdPrefix}-branch-input`}
+            disabled={disabled}
+            error={hasError}
+          />
+          {hasError && (
+            <p className="text-xs text-destructive">
+              Branch name is required for custom branch mode.
+            </p>
+          )}
+        </div>
+      )}
+
+      {disabled && (
+        <p className="text-xs text-muted-foreground italic">
+          Work mode cannot be changed after work has started.
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/branch-switch-dropdown.tsx b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/branch-switch-dropdown.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0a28eff8d91d0d4889a265b72b300258490e8e3d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/branch-switch-dropdown.tsx
@@ -0,0 +1,163 @@
+import { useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuLabel,
+} from '@/components/ui/dropdown-menu';
+import { GitBranch, GitBranchPlus, Check, Search, Globe } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import type { WorktreeInfo, BranchInfo } from '../types';
+
+interface BranchSwitchDropdownProps {
+  worktree: WorktreeInfo;
+  isSelected: boolean;
+  branches: BranchInfo[];
+  filteredBranches: BranchInfo[];
+  branchFilter: string;
+  isLoadingBranches: boolean;
+  isSwitching: boolean;
+  /** When true, renders as a standalone button (not attached to another element) */
+  standalone?: boolean;
+  onOpenChange: (open: boolean) => void;
+  onFilterChange: (value: string) => void;
+  onSwitchBranch: (worktree: WorktreeInfo, branchName: string) => void;
+  onCreateBranch: (worktree: WorktreeInfo) => void;
+}
+
+export function BranchSwitchDropdown({
+  worktree,
+  isSelected,
+  filteredBranches,
+  branchFilter,
+  isLoadingBranches,
+  isSwitching,
+  standalone = false,
+  onOpenChange,
+  onFilterChange,
+  onSwitchBranch,
+  onCreateBranch,
+}: BranchSwitchDropdownProps) {
+  // Separate local and remote branches, filtering out bare remotes without a branch
+  const { localBranches, remoteBranches } = useMemo(() => {
+    const local: BranchInfo[] = [];
+    const remote: BranchInfo[] = [];
+    for (const branch of filteredBranches) {
+      if (branch.isRemote) {
+        // Skip bare remote refs without a branch name (e.g. "origin" by itself)
+        if (!branch.name.includes('/')) continue;
+        remote.push(branch);
+      } else {
+        local.push(branch);
+      }
+    }
+    return { localBranches: local, remoteBranches: remote };
+  }, [filteredBranches]);
+
+  const renderBranchItem = (branch: BranchInfo) => {
+    const isCurrent = branch.name === worktree.branch;
+    return (
+      <DropdownMenuItem
+        key={branch.name}
+        onClick={() => onSwitchBranch(worktree, branch.name)}
+        disabled={isSwitching || isCurrent}
+        className="text-xs font-mono"
+      >
+        {isCurrent ? (
+          <Check className="w-3.5 h-3.5 mr-2 flex-shrink-0" />
+        ) : branch.isRemote ? (
+          <Globe className="w-3.5 h-3.5 mr-2 flex-shrink-0 text-muted-foreground" />
+        ) : (
+          <span className="w-3.5 mr-2 flex-shrink-0" />
+        )}
+        <span className="truncate">{branch.name}</span>
+      </DropdownMenuItem>
+    );
+  };
+
+  return (
+    <DropdownMenu onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant={standalone ? 'outline' : isSelected ? 'default' : 'outline'}
+          size="sm"
+          className={cn(
+            'h-7 w-7 p-0',
+            !standalone && 'rounded-none border-r-0',
+            standalone && 'h-8 w-8 shrink-0',
+            !standalone && isSelected && 'bg-primary text-primary-foreground',
+            !standalone && !isSelected && 'bg-secondary/50 hover:bg-secondary'
+          )}
+          title="Switch branch"
+        >
+          <GitBranch className={standalone ? 'w-3.5 h-3.5' : 'w-3 h-3'} />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-72">
+        <DropdownMenuLabel className="text-xs">Switch Branch</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <div className="px-2 py-1.5">
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
+            <Input
+              placeholder="Filter branches..."
+              value={branchFilter}
+              onChange={(e) => onFilterChange(e.target.value)}
+              onKeyDown={(e) => e.stopPropagation()}
+              onKeyUp={(e) => e.stopPropagation()}
+              onKeyPress={(e) => e.stopPropagation()}
+              className="h-7 pl-7 text-base md:text-xs"
+              autoFocus
+            />
+          </div>
+        </div>
+        <DropdownMenuSeparator />
+        <div className="max-h-[300px] overflow-y-auto overflow-x-hidden">
+          {isLoadingBranches ? (
+            <DropdownMenuItem disabled className="text-xs">
+              <Spinner size="xs" className="mr-2" />
+              Loading branches...
+            </DropdownMenuItem>
+          ) : filteredBranches.length === 0 ? (
+            <DropdownMenuItem disabled className="text-xs">
+              {branchFilter ? 'No matching branches' : 'No branches found'}
+            </DropdownMenuItem>
+          ) : (
+            <>
+              {/* Local branches */}
+              {localBranches.length > 0 && (
+                <>
+                  <DropdownMenuLabel className="text-[10px] text-muted-foreground uppercase tracking-wider px-2 py-1">
+                    Local
+                  </DropdownMenuLabel>
+                  {localBranches.map(renderBranchItem)}
+                </>
+              )}
+
+              {/* Remote branches */}
+              {remoteBranches.length > 0 && (
+                <>
+                  {localBranches.length > 0 && <DropdownMenuSeparator />}
+                  <DropdownMenuLabel className="text-[10px] text-muted-foreground uppercase tracking-wider px-2 py-1">
+                    Remote
+                  </DropdownMenuLabel>
+                  {remoteBranches.map(renderBranchItem)}
+                </>
+              )}
+            </>
+          )}
+        </div>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => onCreateBranch(worktree)} className="text-xs">
+          <GitBranchPlus className="w-3.5 h-3.5 mr-2" />
+          Create New Branch...
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/dev-server-logs-panel.tsx b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/dev-server-logs-panel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c2ef48d8b94bba1b1b1eb5f694da1339d780e7c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/dev-server-logs-panel.tsx
@@ -0,0 +1,300 @@
+import { useEffect, useRef, useCallback, useState, useMemo } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import {
+  Terminal,
+  ArrowDown,
+  ExternalLink,
+  Square,
+  RefreshCw,
+  AlertCircle,
+  Clock,
+  GitBranch,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { XtermLogViewer, type XtermLogViewerRef } from '@/components/ui/xterm-log-viewer';
+import { useDevServerLogs } from '../hooks/use-dev-server-logs';
+import type { WorktreeInfo } from '../types';
+
+interface DevServerLogsPanelProps {
+  /** Whether the panel is open */
+  open: boolean;
+  /** Callback when the panel is closed */
+  onClose: () => void;
+  /** The worktree to show logs for */
+  worktree: WorktreeInfo | null;
+  /** Callback to stop the dev server */
+  onStopDevServer?: (worktree: WorktreeInfo) => void;
+  /** Callback to open the dev server URL in browser */
+  onOpenDevServerUrl?: (worktree: WorktreeInfo) => void;
+}
+
+/**
+ * Panel component for displaying dev server logs with ANSI color rendering
+ * and auto-scroll functionality.
+ *
+ * Features:
+ * - Real-time log streaming via WebSocket
+ * - Full ANSI color code rendering via xterm.js
+ * - Auto-scroll to bottom (can be paused by scrolling up)
+ * - Server status indicators
+ * - Quick actions (stop server, open in browser)
+ */
+export function DevServerLogsPanel({
+  open,
+  onClose,
+  worktree,
+  onStopDevServer,
+  onOpenDevServerUrl,
+}: DevServerLogsPanelProps) {
+  const xtermRef = useRef<XtermLogViewerRef>(null);
+  const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
+  const lastLogsLengthRef = useRef(0);
+  const lastWorktreePathRef = useRef<string | null>(null);
+
+  const {
+    logs,
+    logsVersion,
+    didTrim,
+    isRunning,
+    isLoading,
+    error,
+    port,
+    url,
+    startedAt,
+    exitCode,
+    serverError,
+    fetchLogs,
+  } = useDevServerLogs({
+    worktreePath: open ? (worktree?.path ?? null) : null,
+    autoSubscribe: open,
+  });
+
+  // Write logs to xterm when they change
+  useEffect(() => {
+    if (!xtermRef.current || !logs) return;
+
+    // If worktree changed, reset the terminal and write all content
+    if (lastWorktreePathRef.current !== worktree?.path) {
+      lastWorktreePathRef.current = worktree?.path ?? null;
+      lastLogsLengthRef.current = 0;
+      xtermRef.current.write(logs);
+      lastLogsLengthRef.current = logs.length;
+      return;
+    }
+
+    // If logs got shorter (e.g., cleared) or buffer was trimmed (content shifted),
+    // do a full rewrite so the terminal stays in sync
+    if (logs.length < lastLogsLengthRef.current || didTrim) {
+      xtermRef.current.write(logs);
+      lastLogsLengthRef.current = logs.length;
+      return;
+    }
+
+    // Append only the new content
+    if (logs.length > lastLogsLengthRef.current) {
+      const newContent = logs.slice(lastLogsLengthRef.current);
+      xtermRef.current.append(newContent);
+      lastLogsLengthRef.current = logs.length;
+    }
+  }, [logs, logsVersion, didTrim, worktree?.path]);
+
+  // Reset when panel opens with a new worktree
+  useEffect(() => {
+    if (open) {
+      setAutoScrollEnabled(true);
+      if (worktree?.path !== lastWorktreePathRef.current) {
+        lastLogsLengthRef.current = 0;
+      }
+    }
+  }, [open, worktree?.path]);
+
+  // Scroll to bottom handler
+  const scrollToBottom = useCallback(() => {
+    xtermRef.current?.scrollToBottom();
+    setAutoScrollEnabled(true);
+  }, []);
+
+  // Format the started time
+  const formatStartedAt = useCallback((timestamp: string | null) => {
+    if (!timestamp) return null;
+    try {
+      const date = new Date(timestamp);
+      return date.toLocaleTimeString();
+    } catch {
+      return null;
+    }
+  }, []);
+
+  const lineCount = useMemo(() => {
+    if (!logs) return 0;
+    // Count newlines directly instead of allocating a split array
+    let count = 1;
+    for (let i = 0; i < logs.length; i++) {
+      if (logs.charCodeAt(i) === 10) count++;
+    }
+    return count;
+  }, [logs]);
+
+  if (!worktree) return null;
+
+  const formattedStartTime = formatStartedAt(startedAt);
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent
+        className="w-full h-full max-w-full max-h-full sm:w-[70vw] sm:max-w-[900px] sm:max-h-[85vh] sm:h-auto sm:rounded-xl rounded-none flex flex-col gap-0 p-0 overflow-hidden dialog-fullscreen-mobile"
+        data-testid="dev-server-logs-panel"
+        compact
+      >
+        {/* Compact Header */}
+        <DialogHeader className="shrink-0 px-4 py-3 border-b border-border/50 pr-12 dialog-compact-header-mobile">
+          <div className="flex items-center justify-between">
+            <DialogTitle className="flex items-center gap-2 text-base">
+              <Terminal className="w-4 h-4 text-primary" />
+              <span>Dev Server</span>
+              {isRunning ? (
+                <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-green-500/10 text-green-500 text-xs font-medium">
+                  <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
+                  Running
+                </span>
+              ) : exitCode !== null ? (
+                <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-red-500/10 text-red-500 text-xs font-medium">
+                  <AlertCircle className="w-3 h-3" />
+                  Stopped ({exitCode})
+                </span>
+              ) : null}
+            </DialogTitle>
+            <div className="flex items-center gap-1.5">
+              {isRunning && url && onOpenDevServerUrl && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 px-2.5 text-xs"
+                  onClick={() => onOpenDevServerUrl(worktree)}
+                >
+                  <ExternalLink className="w-3.5 h-3.5 mr-1.5" />
+                  Open
+                </Button>
+              )}
+              {isRunning && onStopDevServer && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 px-2.5 text-xs text-destructive hover:text-destructive hover:bg-destructive/10"
+                  onClick={() => onStopDevServer(worktree)}
+                >
+                  <Square className="w-3 h-3 mr-1.5 fill-current" />
+                  Stop
+                </Button>
+              )}
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 w-7 p-0"
+                onClick={() => fetchLogs()}
+                title="Refresh logs"
+              >
+                {isLoading ? <Spinner size="xs" /> : <RefreshCw className="w-3.5 h-3.5" />}
+              </Button>
+            </div>
+          </div>
+
+          {/* Info bar - more compact */}
+          <div className="flex items-center gap-3 mt-2 text-xs text-muted-foreground">
+            <span className="inline-flex items-center gap-1.5">
+              <GitBranch className="w-3 h-3" />
+              <span className="font-medium text-foreground/80">{worktree.branch}</span>
+            </span>
+            {port && (
+              <span className="inline-flex items-center gap-1.5">
+                <span className="text-muted-foreground/60">Port</span>
+                <span className="font-mono text-primary">{port}</span>
+              </span>
+            )}
+            {formattedStartTime && (
+              <span className="inline-flex items-center gap-1.5">
+                <Clock className="w-3 h-3" />
+                {formattedStartTime}
+              </span>
+            )}
+          </div>
+        </DialogHeader>
+
+        {/* Error displays - inline */}
+        {(error || serverError) && (
+          <div className="shrink-0 px-4 py-2 bg-destructive/5 border-b border-destructive/20">
+            {error && (
+              <div className="flex items-center gap-2 text-xs text-destructive">
+                <AlertCircle className="w-3.5 h-3.5 shrink-0" />
+                <span>{error}</span>
+              </div>
+            )}
+            {serverError && (
+              <div className="flex items-center gap-2 text-xs text-destructive">
+                <AlertCircle className="w-3.5 h-3.5 shrink-0" />
+                <span>Server error: {serverError}</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Log content area - fills remaining space */}
+        <div
+          className="flex-1 min-h-0 overflow-hidden bg-zinc-950"
+          data-testid="dev-server-logs-content"
+        >
+          {isLoading && !logs ? (
+            <div className="flex items-center justify-center h-full min-h-[300px] text-muted-foreground">
+              <Spinner size="md" className="mr-2" />
+              <span className="text-sm">Loading logs...</span>
+            </div>
+          ) : !logs && !isRunning ? (
+            <div className="flex flex-col items-center justify-center h-full min-h-[300px] text-muted-foreground p-8">
+              <Terminal className="w-10 h-10 mb-3 opacity-20" />
+              <p className="text-sm">No dev server running</p>
+              <p className="text-xs mt-1 opacity-60">Start a dev server to see logs here</p>
+            </div>
+          ) : !logs ? (
+            <div className="flex flex-col items-center justify-center h-full min-h-[300px] text-muted-foreground p-8">
+              <Spinner size="xl" className="mb-3" />
+              <p className="text-sm">Waiting for output...</p>
+              <p className="text-xs mt-1 opacity-60">
+                Logs will appear as the server generates output
+              </p>
+            </div>
+          ) : (
+            <XtermLogViewer
+              ref={xtermRef}
+              className="h-full"
+              minHeight={280}
+              autoScroll={autoScrollEnabled}
+              onScrollAwayFromBottom={() => setAutoScrollEnabled(false)}
+              onScrollToBottom={() => setAutoScrollEnabled(true)}
+            />
+          )}
+        </div>
+
+        {/* Footer status bar */}
+        <div className="shrink-0 flex items-center justify-between px-4 py-2 bg-muted/30 border-t border-border/50 text-xs text-muted-foreground">
+          <span className="font-mono">{lineCount > 0 ? `${lineCount} lines` : 'No output'}</span>
+          {!autoScrollEnabled && logs && (
+            <button
+              onClick={scrollToBottom}
+              className="inline-flex items-center gap-1.5 px-2 py-1 rounded hover:bg-muted transition-colors text-primary"
+            >
+              <ArrowDown className="w-3 h-3" />
+              Scroll to bottom
+            </button>
+          )}
+          {autoScrollEnabled && logs && (
+            <span className="inline-flex items-center gap-1.5 opacity-60">
+              <ArrowDown className="w-3 h-3" />
+              Auto-scroll
+            </span>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/index.ts b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..60e46b9c98edcf19e644811cf8fe88ab6184634f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/index.ts
@@ -0,0 +1,16 @@
+export { BranchSwitchDropdown } from './branch-switch-dropdown';
+export { DevServerLogsPanel } from './dev-server-logs-panel';
+export { WorktreeActionsDropdown } from './worktree-actions-dropdown';
+export { WorktreeDropdown } from './worktree-dropdown';
+export type { WorktreeDropdownProps } from './worktree-dropdown';
+export { WorktreeDropdownItem } from './worktree-dropdown-item';
+export type { WorktreeDropdownItemProps } from './worktree-dropdown-item';
+export {
+  truncateBranchName,
+  getPRBadgeStyles,
+  getChangesBadgeStyles,
+  getTestStatusStyles,
+} from './worktree-indicator-utils';
+export type { TestStatus } from './worktree-indicator-utils';
+export { WorktreeMobileDropdown } from './worktree-mobile-dropdown';
+export { WorktreeTab } from './worktree-tab';
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/tooltip-wrapper.tsx b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/tooltip-wrapper.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..40988894d500e03cd0f00cede93868b27ab309c7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/tooltip-wrapper.tsx
@@ -0,0 +1,42 @@
+import type { ReactElement, ReactNode } from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+interface TooltipWrapperProps {
+  /** The element to wrap with a tooltip */
+  children: ReactElement;
+  /** The content to display in the tooltip */
+  tooltipContent: ReactNode;
+  /** Whether to show the tooltip (if false, renders children without tooltip) */
+  showTooltip: boolean;
+  /** The side where the tooltip should appear */
+  side?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+/**
+ * A reusable wrapper that conditionally adds a tooltip to its children.
+ * When showTooltip is false, it renders the children directly without any tooltip.
+ * This is useful for adding tooltips to disabled elements that need to show
+ * a reason for being disabled.
+ */
+export function TooltipWrapper({
+  children,
+  tooltipContent,
+  showTooltip,
+  side = 'left',
+}: TooltipWrapperProps) {
+  if (!showTooltip) {
+    return children;
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        {/* The div wrapper is necessary for tooltips to work on disabled elements */}
+        <div>{children}</div>
+      </TooltipTrigger>
+      <TooltipContent side={side}>
+        <p>{tooltipContent}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-actions-dropdown.tsx b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-actions-dropdown.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..20960b8b98b5bcecefd97be3c02961a5f00e1fee
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-actions-dropdown.tsx
@@ -0,0 +1,1463 @@
+import { useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuLabel,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from '@/components/ui/dropdown-menu';
+import {
+  Trash2,
+  MoreHorizontal,
+  GitBranch,
+  GitCommit,
+  GitPullRequest,
+  Download,
+  Upload,
+  Play,
+  Square,
+  Globe,
+  MessageSquare,
+  GitMerge,
+  AlertCircle,
+  RefreshCw,
+  Copy,
+  Eye,
+  ScrollText,
+  CloudOff,
+  Terminal,
+  SquarePlus,
+  SplitSquareHorizontal,
+  Undo2,
+  Zap,
+  FlaskConical,
+  History,
+  Archive,
+  Cherry,
+  AlertTriangle,
+  XCircle,
+  CheckCircle,
+  Settings2,
+  ArrowLeftRight,
+  Check,
+  Hash,
+  Sparkles,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import { Spinner } from '@/components/ui/spinner';
+import type {
+  WorktreeInfo,
+  DevServerInfo,
+  PRInfo,
+  GitRepoStatus,
+  TestSessionInfo,
+  MergeConflictInfo,
+} from '../types';
+import { TooltipWrapper } from './tooltip-wrapper';
+import { useAvailableEditors, useEffectiveDefaultEditor } from '../hooks/use-available-editors';
+import {
+  useAvailableTerminals,
+  useEffectiveDefaultTerminal,
+} from '../hooks/use-available-terminals';
+import { getEditorIcon } from '@/components/icons/editor-icons';
+import { getTerminalIcon } from '@/components/icons/terminal-icons';
+import { useAppStore } from '@/store/app-store';
+import type { TerminalScript } from '@/components/views/project-settings-view/terminal-scripts-constants';
+
+interface WorktreeActionsDropdownProps {
+  worktree: WorktreeInfo;
+  isSelected: boolean;
+  aheadCount: number;
+  behindCount: number;
+  hasRemoteBranch: boolean;
+  isPulling: boolean;
+  isPushing: boolean;
+  isStartingAnyDevServer: boolean;
+  isDevServerStarting: boolean;
+  isDevServerRunning: boolean;
+  devServerInfo?: DevServerInfo;
+  gitRepoStatus: GitRepoStatus;
+  /** When true, git repo status is still being loaded */
+  isLoadingGitStatus?: boolean;
+  /** When true, renders as a standalone button (not attached to another element) */
+  standalone?: boolean;
+  /** Whether auto mode is running for this worktree */
+  isAutoModeRunning?: boolean;
+  /** Whether a test command is configured in project settings */
+  hasTestCommand?: boolean;
+  /** Whether tests are being started for this worktree */
+  isStartingTests?: boolean;
+  /** Whether tests are currently running for this worktree */
+  isTestRunning?: boolean;
+  /** Active test session info for this worktree */
+  testSessionInfo?: TestSessionInfo;
+  /** List of available remotes for this worktree (used to show remote submenu) */
+  remotes?: Array<{ name: string; url: string }>;
+  /** The name of the remote that the current branch is tracking (e.g. "origin"), if any */
+  trackingRemote?: string;
+  onOpenChange: (open: boolean) => void;
+  onPull: (worktree: WorktreeInfo) => void;
+  onPush: (worktree: WorktreeInfo) => void;
+  onPushNewBranch: (worktree: WorktreeInfo) => void;
+  /** Pull from a specific remote, bypassing the remote selection dialog */
+  onPullWithRemote?: (worktree: WorktreeInfo, remote: string) => void;
+  /** Push to a specific remote, bypassing the remote selection dialog */
+  onPushWithRemote?: (worktree: WorktreeInfo, remote: string) => void;
+  onOpenInEditor: (worktree: WorktreeInfo, editorCommand?: string) => void;
+  onOpenInIntegratedTerminal: (worktree: WorktreeInfo, mode?: 'tab' | 'split') => void;
+  onOpenInExternalTerminal: (worktree: WorktreeInfo, terminalId?: string) => void;
+  onViewChanges: (worktree: WorktreeInfo) => void;
+  onViewCommits: (worktree: WorktreeInfo) => void;
+  onDiscardChanges: (worktree: WorktreeInfo) => void;
+  onCommit: (worktree: WorktreeInfo) => void;
+  onCreatePR: (worktree: WorktreeInfo) => void;
+  onChangePRNumber?: (worktree: WorktreeInfo) => void;
+  onAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
+  onAutoAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
+  onResolveConflicts: (worktree: WorktreeInfo) => void;
+  onDeleteWorktree: (worktree: WorktreeInfo) => void;
+  onStartDevServer: (worktree: WorktreeInfo) => void;
+  onStopDevServer: (worktree: WorktreeInfo) => void;
+  onOpenDevServerUrl: (worktree: WorktreeInfo) => void;
+  onViewDevServerLogs: (worktree: WorktreeInfo) => void;
+  onRunInitScript: (worktree: WorktreeInfo) => void;
+  onToggleAutoMode?: (worktree: WorktreeInfo) => void;
+  onMerge: (worktree: WorktreeInfo) => void;
+  /** Start running tests for this worktree */
+  onStartTests?: (worktree: WorktreeInfo) => void;
+  /** Stop running tests for this worktree */
+  onStopTests?: (worktree: WorktreeInfo) => void;
+  /** View test logs for this worktree */
+  onViewTestLogs?: (worktree: WorktreeInfo) => void;
+  /** Stash changes for this worktree */
+  onStashChanges?: (worktree: WorktreeInfo) => void;
+  /** View stashes for this worktree */
+  onViewStashes?: (worktree: WorktreeInfo) => void;
+  /** Cherry-pick commits from another branch */
+  onCherryPick?: (worktree: WorktreeInfo) => void;
+  /** Abort an in-progress merge/rebase/cherry-pick */
+  onAbortOperation?: (worktree: WorktreeInfo) => void;
+  /** Continue an in-progress merge/rebase/cherry-pick after resolving conflicts */
+  onContinueOperation?: (worktree: WorktreeInfo) => void;
+  /** Create a feature to resolve merge/rebase/cherry-pick conflicts with AI */
+  onCreateConflictResolutionFeature?: (conflictInfo: MergeConflictInfo) => void;
+  hasInitScript: boolean;
+  /** Terminal quick scripts configured for the project */
+  terminalScripts?: TerminalScript[];
+  /** Callback to run a terminal quick script in a new terminal session */
+  onRunTerminalScript?: (worktree: WorktreeInfo, command: string) => void;
+  /** Callback to open the script editor UI */
+  onEditScripts?: () => void;
+  /** Whether sync is in progress */
+  isSyncing?: boolean;
+  /** Sync (pull + push) callback */
+  onSync?: (worktree: WorktreeInfo) => void;
+  /** Sync with a specific remote */
+  onSyncWithRemote?: (worktree: WorktreeInfo, remote: string) => void;
+  /** Set tracking branch to a specific remote */
+  onSetTracking?: (worktree: WorktreeInfo, remote: string) => void;
+  /** List of remote names that have a branch matching the current branch name */
+  remotesWithBranch?: string[];
+  /** Available worktrees for swapping into this slot (non-main only) */
+  availableWorktreesForSwap?: WorktreeInfo[];
+  /** The slot index for this tab in the pinned list (0-based, excluding main) */
+  slotIndex?: number;
+  /** Callback when user swaps this slot to a different worktree */
+  onSwapWorktree?: (slotIndex: number, newBranch: string) => void;
+  /** List of currently pinned branch names (to show which are pinned in the swap dropdown) */
+  pinnedBranches?: string[];
+}
+
+/**
+ * A remote item that either renders as a split-button with "Set as Tracking Branch"
+ * sub-action, or a plain menu item if onSetTracking is not provided.
+ */
+function RemoteActionMenuItem({
+  remote,
+  icon: Icon,
+  trackingRemote,
+  isDisabled,
+  isGitOpsAvailable,
+  onAction,
+  onSetTracking,
+}: {
+  remote: { name: string; url: string };
+  icon: typeof Download;
+  trackingRemote?: string;
+  isDisabled: boolean;
+  isGitOpsAvailable: boolean;
+  onAction: () => void;
+  onSetTracking?: () => void;
+}) {
+  if (onSetTracking) {
+    return (
+      <DropdownMenuSub key={remote.name}>
+        <div className="flex items-center">
+          <DropdownMenuItem
+            onClick={onAction}
+            disabled={isDisabled || !isGitOpsAvailable}
+            className="text-xs flex-1 pr-0 rounded-r-none"
+          >
+            <Icon className="w-3.5 h-3.5 mr-2" />
+            {remote.name}
+            {trackingRemote === remote.name && (
+              <span className="ml-auto text-[10px] bg-muted text-muted-foreground px-1.5 py-0.5 rounded mr-2">
+                tracking
+              </span>
+            )}
+          </DropdownMenuItem>
+          <DropdownMenuSubTrigger
+            className="text-xs px-1 rounded-l-none border-l border-border/30 h-8"
+            disabled={!isGitOpsAvailable}
+          />
+        </div>
+        <DropdownMenuSubContent>
+          <DropdownMenuItem
+            onClick={onSetTracking}
+            disabled={!isGitOpsAvailable}
+            className="text-xs"
+          >
+            <GitBranch className="w-3.5 h-3.5 mr-2" />
+            Set as Tracking Branch
+          </DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+    );
+  }
+
+  return (
+    <DropdownMenuItem
+      key={remote.name}
+      onClick={onAction}
+      disabled={isDisabled || !isGitOpsAvailable}
+      className="text-xs"
+    >
+      <Icon className="w-3.5 h-3.5 mr-2" />
+      {remote.name}
+      <span className="ml-auto text-[10px] text-muted-foreground max-w-[100px] truncate">
+        {remote.url}
+      </span>
+    </DropdownMenuItem>
+  );
+}
+
+export function WorktreeActionsDropdown({
+  worktree,
+  isSelected,
+  aheadCount,
+  behindCount,
+  hasRemoteBranch,
+  isPulling,
+  isPushing,
+  isStartingAnyDevServer,
+  isDevServerStarting,
+  isDevServerRunning,
+  devServerInfo,
+  gitRepoStatus,
+  isLoadingGitStatus = false,
+  standalone = false,
+  isAutoModeRunning = false,
+  hasTestCommand = false,
+  isStartingTests = false,
+  isTestRunning = false,
+  testSessionInfo,
+  remotes,
+  trackingRemote,
+  onOpenChange,
+  onPull,
+  onPush,
+  onPushNewBranch,
+  onPullWithRemote,
+  onPushWithRemote,
+  onOpenInEditor,
+  onOpenInIntegratedTerminal,
+  onOpenInExternalTerminal,
+  onViewChanges,
+  onViewCommits,
+  onDiscardChanges,
+  onCommit,
+  onCreatePR,
+  onChangePRNumber,
+  onAddressPRComments,
+  onAutoAddressPRComments,
+  onResolveConflicts,
+  onDeleteWorktree,
+  onStartDevServer,
+  onStopDevServer,
+  onOpenDevServerUrl,
+  onViewDevServerLogs,
+  onRunInitScript,
+  onToggleAutoMode,
+  onMerge,
+  onStartTests,
+  onStopTests,
+  onViewTestLogs,
+  onStashChanges,
+  onViewStashes,
+  onCherryPick,
+  onAbortOperation,
+  onContinueOperation,
+  onCreateConflictResolutionFeature,
+  hasInitScript,
+  terminalScripts,
+  onRunTerminalScript,
+  onEditScripts,
+  isSyncing = false,
+  onSync,
+  onSyncWithRemote,
+  onSetTracking,
+  remotesWithBranch,
+  availableWorktreesForSwap,
+  slotIndex,
+  onSwapWorktree,
+  pinnedBranches,
+}: WorktreeActionsDropdownProps) {
+  // Get available editors for the "Open In" submenu
+  const { editors } = useAvailableEditors();
+
+  // Use shared hook for effective default editor
+  const effectiveDefaultEditor = useEffectiveDefaultEditor(editors);
+
+  // Get other editors (excluding the default) for the submenu
+  const otherEditors = editors.filter((e) => e.command !== effectiveDefaultEditor?.command);
+
+  // Get icon component for the effective editor (avoid IIFE in JSX)
+  const DefaultEditorIcon = effectiveDefaultEditor
+    ? getEditorIcon(effectiveDefaultEditor.command)
+    : null;
+
+  // Get available terminals for the "Open In Terminal" submenu
+  const { terminals } = useAvailableTerminals();
+
+  // Use shared hook for effective default terminal (null = integrated terminal)
+  const effectiveDefaultTerminal = useEffectiveDefaultTerminal(terminals);
+
+  // Get the user's preferred mode for opening terminals (new tab vs split)
+  const openTerminalMode = useAppStore((s) => s.terminalState.openTerminalMode);
+
+  // Get icon component for the effective terminal
+  const DefaultTerminalIcon = effectiveDefaultTerminal
+    ? getTerminalIcon(effectiveDefaultTerminal.id)
+    : Terminal;
+
+  // Check if there's a PR associated with this worktree from stored metadata
+  const hasPR = !!worktree.pr;
+
+  // Check git operations availability
+  const canPerformGitOps = gitRepoStatus.isGitRepo && gitRepoStatus.hasCommits;
+  // While git status is loading, treat git ops as unavailable to avoid stale state enabling actions
+  const isGitOpsAvailable = !isLoadingGitStatus && canPerformGitOps;
+  const gitOpsDisabledReason = isLoadingGitStatus
+    ? 'Checking git status...'
+    : !gitRepoStatus.isGitRepo
+      ? 'Not a git repository'
+      : !gitRepoStatus.hasCommits
+        ? 'Repository has no commits yet'
+        : null;
+
+  // Check if the branch exists on remotes other than the tracking remote.
+  // This indicates the branch was pushed to a different remote than the one being tracked,
+  // so the ahead/behind counts may be misleading.
+  const otherRemotesWithBranch = useMemo(() => {
+    if (!remotesWithBranch || remotesWithBranch.length === 0) return [];
+    if (!trackingRemote) return remotesWithBranch;
+    return remotesWithBranch.filter((r) => r !== trackingRemote);
+  }, [remotesWithBranch, trackingRemote]);
+
+  // True when branch exists on a different remote but NOT on the tracking remote
+  const isOnDifferentRemote =
+    otherRemotesWithBranch.length > 0 &&
+    trackingRemote &&
+    !remotesWithBranch?.includes(trackingRemote);
+
+  // Determine if the changes/PR section has any visible items
+  // Show Create PR when no existing PR is linked
+  const showCreatePR = !hasPR;
+  const showPRInfo = hasPR && !!worktree.pr;
+  const hasChangesSectionContent =
+    worktree.hasChanges || showCreatePR || showPRInfo || !!(onStashChanges || onViewStashes);
+
+  // Determine if the destructive/bottom section has any visible items
+  const hasDestructiveSectionContent = worktree.hasChanges || !worktree.isMain;
+
+  // Pre-compute PR info for the PR submenu (avoids an IIFE in JSX)
+  const prInfo = useMemo<PRInfo | null>(() => {
+    if (!showPRInfo || !worktree.pr) return null;
+    return {
+      number: worktree.pr.number,
+      title: worktree.pr.title,
+      url: worktree.pr.url,
+      state: worktree.pr.state,
+      author: '',
+      body: '',
+      comments: [],
+      reviewComments: [],
+    };
+  }, [showPRInfo, worktree.pr]);
+
+  const viewDevServerLogsItem = (
+    <DropdownMenuItem onClick={() => onViewDevServerLogs(worktree)} className="text-xs">
+      <ScrollText className="w-3.5 h-3.5 mr-2" />
+      View Dev Server Logs
+    </DropdownMenuItem>
+  );
+
+  return (
+    <DropdownMenu onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant={standalone ? 'outline' : isSelected ? 'default' : 'outline'}
+          size="sm"
+          className={cn(
+            'h-7 w-7 p-0',
+            !standalone && 'rounded-l-none',
+            standalone && 'h-8 w-8 shrink-0',
+            !standalone && isSelected && 'bg-primary text-primary-foreground',
+            !standalone && !isSelected && 'bg-secondary/50 hover:bg-secondary'
+          )}
+        >
+          <MoreHorizontal className="w-3.5 h-3.5" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-56">
+        {/* Conflict indicator and actions when merge/rebase/cherry-pick is in progress */}
+        {worktree.hasConflicts && (
+          <>
+            <DropdownMenuLabel className="text-xs flex items-center gap-2 text-red-600 dark:text-red-400">
+              <AlertTriangle className="w-3.5 h-3.5" />
+              {worktree.conflictType === 'merge'
+                ? 'Merge'
+                : worktree.conflictType === 'rebase'
+                  ? 'Rebase'
+                  : worktree.conflictType === 'cherry-pick'
+                    ? 'Cherry-pick'
+                    : 'Operation'}{' '}
+              Conflicts
+              {worktree.conflictFiles && worktree.conflictFiles.length > 0 && (
+                <span className="ml-auto text-[10px] bg-red-500/20 text-red-600 dark:text-red-400 px-1.5 py-0.5 rounded">
+                  {worktree.conflictFiles.length} file
+                  {worktree.conflictFiles.length !== 1 ? 's' : ''}
+                </span>
+              )}
+            </DropdownMenuLabel>
+            {onAbortOperation && (
+              <DropdownMenuItem
+                onClick={() => onAbortOperation(worktree)}
+                className="text-xs text-destructive focus:text-destructive"
+              >
+                <XCircle className="w-3.5 h-3.5 mr-2" />
+                Abort{' '}
+                {worktree.conflictType === 'merge'
+                  ? 'Merge'
+                  : worktree.conflictType === 'rebase'
+                    ? 'Rebase'
+                    : worktree.conflictType === 'cherry-pick'
+                      ? 'Cherry-pick'
+                      : 'Operation'}
+              </DropdownMenuItem>
+            )}
+            {onContinueOperation && (
+              <DropdownMenuItem
+                onClick={() => onContinueOperation(worktree)}
+                className="text-xs text-green-600 focus:text-green-700"
+              >
+                <CheckCircle className="w-3.5 h-3.5 mr-2" />
+                Continue{' '}
+                {worktree.conflictType === 'merge'
+                  ? 'Merge'
+                  : worktree.conflictType === 'rebase'
+                    ? 'Rebase'
+                    : worktree.conflictType === 'cherry-pick'
+                      ? 'Cherry-pick'
+                      : 'Operation'}
+              </DropdownMenuItem>
+            )}
+            {onCreateConflictResolutionFeature && (
+              <DropdownMenuItem
+                onClick={() =>
+                  onCreateConflictResolutionFeature({
+                    sourceBranch: worktree.conflictSourceBranch ?? worktree.branch,
+                    targetBranch: worktree.branch,
+                    targetWorktreePath: worktree.path,
+                    conflictFiles: worktree.conflictFiles,
+                    operationType: worktree.conflictType,
+                  })
+                }
+                className="text-xs text-purple-500 focus:text-purple-600"
+              >
+                <Sparkles className="w-3.5 h-3.5 mr-2" />
+                Resolve with AI
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuSeparator />
+          </>
+        )}
+        {/* Loading indicator while git status is being determined */}
+        {isLoadingGitStatus && (
+          <>
+            <DropdownMenuLabel className="text-xs flex items-center gap-2 text-muted-foreground">
+              <Spinner size="xs" variant="muted" />
+              Checking git status...
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        {/* Warning label when git operations are not available (only show once loaded) */}
+        {!isLoadingGitStatus && !isGitOpsAvailable && (
+          <>
+            <DropdownMenuLabel className="text-xs flex items-center gap-2 text-amber-600 dark:text-amber-400">
+              <AlertCircle className="w-3.5 h-3.5" />
+              {gitOpsDisabledReason}
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        {/* Auto Mode toggle */}
+        {onToggleAutoMode && (
+          <>
+            {isAutoModeRunning ? (
+              <DropdownMenuItem onClick={() => onToggleAutoMode(worktree)} className="text-xs">
+                <span className="flex items-center mr-2">
+                  <Zap className="w-3.5 h-3.5 text-yellow-500" />
+                  <span className="ml-1.5 h-2 w-2 rounded-full bg-green-500 animate-pulse" />
+                </span>
+                Stop Auto Mode
+              </DropdownMenuItem>
+            ) : (
+              <DropdownMenuItem onClick={() => onToggleAutoMode(worktree)} className="text-xs">
+                <Zap className="w-3.5 h-3.5 mr-2" />
+                Start Auto Mode
+              </DropdownMenuItem>
+            )}
+          </>
+        )}
+        {isDevServerRunning ? (
+          <>
+            <DropdownMenuLabel className="text-xs flex items-center gap-2">
+              <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+              {devServerInfo?.urlDetected === false
+                ? 'Dev Server Starting...'
+                : `Dev Server Running (:${devServerInfo?.port})`}
+            </DropdownMenuLabel>
+            {devServerInfo != null &&
+              devServerInfo.port != null &&
+              devServerInfo.urlDetected !== false && (
+                <DropdownMenuItem
+                  onClick={() => onOpenDevServerUrl(worktree)}
+                  className="text-xs"
+                  aria-label={`Open dev server on port ${devServerInfo.port} in browser`}
+                >
+                  <Globe className="w-3.5 h-3.5 mr-2" aria-hidden="true" />
+                  Open in Browser
+                </DropdownMenuItem>
+              )}
+            {/* Stop Dev Server - split button: click main area to stop, chevron for view logs */}
+            <DropdownMenuSub>
+              <div className="flex items-center">
+                <DropdownMenuItem
+                  onClick={() => onStopDevServer(worktree)}
+                  className="text-xs flex-1 pr-0 rounded-r-none text-destructive focus:text-destructive"
+                >
+                  <Square className="w-3.5 h-3.5 mr-2" />
+                  Stop Dev Server
+                </DropdownMenuItem>
+                <DropdownMenuSubTrigger className="text-xs px-1 rounded-l-none border-l border-border/30 h-8" />
+              </div>
+              <DropdownMenuSubContent>{viewDevServerLogsItem}</DropdownMenuSubContent>
+            </DropdownMenuSub>
+            <DropdownMenuSeparator />
+          </>
+        ) : (
+          <>
+            {/* Start Dev Server - split button: click main area to start, chevron for view logs */}
+            <DropdownMenuSub>
+              <div className="flex items-center">
+                <DropdownMenuItem
+                  onClick={() => onStartDevServer(worktree)}
+                  disabled={isStartingAnyDevServer || isDevServerStarting}
+                  className="text-xs flex-1 pr-0 rounded-r-none"
+                >
+                  <Play
+                    className={cn(
+                      'w-3.5 h-3.5 mr-2',
+                      (isStartingAnyDevServer || isDevServerStarting) && 'animate-pulse'
+                    )}
+                  />
+                  {isStartingAnyDevServer || isDevServerStarting
+                    ? 'Starting...'
+                    : 'Start Dev Server'}
+                </DropdownMenuItem>
+                <DropdownMenuSubTrigger
+                  className={cn(
+                    'text-xs px-1 rounded-l-none border-l border-border/30 h-8',
+                    (isStartingAnyDevServer || isDevServerStarting) &&
+                      'opacity-50 cursor-not-allowed'
+                  )}
+                  disabled={isStartingAnyDevServer || isDevServerStarting}
+                />
+              </div>
+              <DropdownMenuSubContent>{viewDevServerLogsItem}</DropdownMenuSubContent>
+            </DropdownMenuSub>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        {/* Test Runner section - only show when test command is configured */}
+        {hasTestCommand && onStartTests && (
+          <>
+            {isTestRunning ? (
+              <>
+                <DropdownMenuLabel className="text-xs flex items-center gap-2">
+                  <span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
+                  Tests Running
+                </DropdownMenuLabel>
+                {onViewTestLogs && (
+                  <DropdownMenuItem onClick={() => onViewTestLogs(worktree)} className="text-xs">
+                    <ScrollText className="w-3.5 h-3.5 mr-2" />
+                    View Test Logs
+                  </DropdownMenuItem>
+                )}
+                {onStopTests && (
+                  <DropdownMenuItem
+                    onClick={() => onStopTests(worktree)}
+                    className="text-xs text-destructive focus:text-destructive"
+                  >
+                    <Square className="w-3.5 h-3.5 mr-2" />
+                    Stop Tests
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuSeparator />
+              </>
+            ) : (
+              <>
+                <DropdownMenuItem
+                  onClick={() => onStartTests(worktree)}
+                  disabled={isStartingTests}
+                  className="text-xs"
+                >
+                  <FlaskConical
+                    className={cn('w-3.5 h-3.5 mr-2', isStartingTests && 'animate-pulse')}
+                  />
+                  {isStartingTests ? 'Starting Tests...' : 'Run Tests'}
+                </DropdownMenuItem>
+                {onViewTestLogs && testSessionInfo && (
+                  <DropdownMenuItem onClick={() => onViewTestLogs(worktree)} className="text-xs">
+                    <ScrollText className="w-3.5 h-3.5 mr-2" />
+                    View Last Test Results
+                    {testSessionInfo.status === 'passed' && (
+                      <span className="ml-auto text-[10px] bg-green-500/20 text-green-600 px-1.5 py-0.5 rounded">
+                        passed
+                      </span>
+                    )}
+                    {testSessionInfo.status === 'failed' && (
+                      <span className="ml-auto text-[10px] bg-red-500/20 text-red-600 px-1.5 py-0.5 rounded">
+                        failed
+                      </span>
+                    )}
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuSeparator />
+              </>
+            )}
+          </>
+        )}
+        {/* Open in editor - split button: click main area for default, chevron for other options */}
+        {effectiveDefaultEditor && (
+          <DropdownMenuSub>
+            <div className="flex items-center">
+              {/* Main clickable area - opens in default editor */}
+              <DropdownMenuItem
+                onClick={() => onOpenInEditor(worktree, effectiveDefaultEditor.command)}
+                className="text-xs flex-1 pr-0 rounded-r-none"
+              >
+                {DefaultEditorIcon && <DefaultEditorIcon className="w-3.5 h-3.5 mr-2" />}
+                Open in {effectiveDefaultEditor.name}
+              </DropdownMenuItem>
+              {/* Chevron trigger for submenu with other editors and Copy Path */}
+              <DropdownMenuSubTrigger className="text-xs px-1 rounded-l-none border-l border-border/30 h-8" />
+            </div>
+            <DropdownMenuSubContent>
+              {/* Other editors */}
+              {otherEditors.map((editor) => {
+                const EditorIcon = getEditorIcon(editor.command);
+                return (
+                  <DropdownMenuItem
+                    key={editor.command}
+                    onClick={() => onOpenInEditor(worktree, editor.command)}
+                    className="text-xs"
+                  >
+                    <EditorIcon className="w-3.5 h-3.5 mr-2" />
+                    {editor.name}
+                  </DropdownMenuItem>
+                );
+              })}
+              {otherEditors.length > 0 && <DropdownMenuSeparator />}
+              <DropdownMenuItem
+                onClick={async () => {
+                  try {
+                    await navigator.clipboard.writeText(worktree.path);
+                    toast.success('Path copied to clipboard');
+                  } catch {
+                    toast.error('Failed to copy path to clipboard');
+                  }
+                }}
+                className="text-xs"
+              >
+                <Copy className="w-3.5 h-3.5 mr-2" />
+                Copy Path
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        )}
+        {/* Open in terminal - always show with integrated + external options */}
+        <DropdownMenuSub>
+          <div className="flex items-center">
+            {/* Main clickable area - opens in default terminal (integrated or external) */}
+            <DropdownMenuItem
+              onClick={() => {
+                if (effectiveDefaultTerminal) {
+                  // External terminal is the default
+                  onOpenInExternalTerminal(worktree, effectiveDefaultTerminal.id);
+                } else {
+                  // Integrated terminal is the default - use user's preferred mode
+                  const mode = openTerminalMode === 'newTab' ? 'tab' : 'split';
+                  onOpenInIntegratedTerminal(worktree, mode);
+                }
+              }}
+              className="text-xs flex-1 pr-0 rounded-r-none"
+            >
+              <DefaultTerminalIcon className="w-3.5 h-3.5 mr-2" />
+              Open in {effectiveDefaultTerminal?.name ?? 'Terminal'}
+            </DropdownMenuItem>
+            {/* Chevron trigger for submenu with all terminals */}
+            <DropdownMenuSubTrigger className="text-xs px-1 rounded-l-none border-l border-border/30 h-8" />
+          </div>
+          <DropdownMenuSubContent>
+            {/* Automaker Terminal - with submenu for new tab vs split */}
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger className="text-xs">
+                <Terminal className="w-3.5 h-3.5 mr-2" />
+                Terminal
+                {!effectiveDefaultTerminal && (
+                  <span className="ml-auto mr-2 text-[10px] text-muted-foreground">(default)</span>
+                )}
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem
+                  onClick={() => onOpenInIntegratedTerminal(worktree, 'tab')}
+                  className="text-xs"
+                >
+                  <SquarePlus className="w-3.5 h-3.5 mr-2" />
+                  New Tab
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => onOpenInIntegratedTerminal(worktree, 'split')}
+                  className="text-xs"
+                >
+                  <SplitSquareHorizontal className="w-3.5 h-3.5 mr-2" />
+                  Split
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+            {/* External terminals */}
+            {terminals.length > 0 && <DropdownMenuSeparator />}
+            {terminals.map((terminal) => {
+              const TerminalIcon = getTerminalIcon(terminal.id);
+              const isDefault = terminal.id === effectiveDefaultTerminal?.id;
+              return (
+                <DropdownMenuItem
+                  key={terminal.id}
+                  onClick={() => onOpenInExternalTerminal(worktree, terminal.id)}
+                  className="text-xs"
+                >
+                  <TerminalIcon className="w-3.5 h-3.5 mr-2" />
+                  {terminal.name}
+                  {isDefault && (
+                    <span className="ml-auto text-[10px] text-muted-foreground">(default)</span>
+                  )}
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        {/* Scripts submenu - consolidates init script and terminal quick scripts */}
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger className="text-xs">
+            <ScrollText className="w-3.5 h-3.5 mr-2" />
+            Scripts
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent className="w-52">
+            {/* Re-run Init Script - always shown for non-main worktrees, disabled when no init script configured or no handler */}
+            {!worktree.isMain && (
+              <>
+                <DropdownMenuItem
+                  onClick={() => onRunInitScript(worktree)}
+                  className="text-xs"
+                  disabled={!hasInitScript}
+                >
+                  <RefreshCw className="w-3.5 h-3.5 mr-2" />
+                  Re-run Init Script
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+              </>
+            )}
+            {/* Terminal quick scripts */}
+            {terminalScripts && terminalScripts.length > 0 ? (
+              terminalScripts.map((script) => (
+                <DropdownMenuItem
+                  key={script.id}
+                  onClick={() => onRunTerminalScript?.(worktree, script.command)}
+                  className="text-xs"
+                  disabled={!onRunTerminalScript}
+                >
+                  <Play className="w-3.5 h-3.5 mr-2 shrink-0" />
+                  <span className="truncate">{script.name}</span>
+                </DropdownMenuItem>
+              ))
+            ) : (
+              <DropdownMenuItem disabled className="text-xs text-muted-foreground">
+                No scripts configured
+              </DropdownMenuItem>
+            )}
+            {/* Divider before Edit Commands & Scripts */}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={() => onEditScripts?.()}
+              className="text-xs"
+              disabled={!onEditScripts}
+            >
+              <Settings2 className="w-3.5 h-3.5 mr-2" />
+              Edit Commands & Scripts
+            </DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <TooltipWrapper showTooltip={!!gitOpsDisabledReason} tooltipContent={gitOpsDisabledReason}>
+          {remotes && remotes.length > 1 && onPullWithRemote ? (
+            // Multiple remotes - show split button: click main area to pull (default behavior),
+            // chevron opens submenu showing individual remotes to pull from
+            <DropdownMenuSub>
+              <div className="flex items-center">
+                <DropdownMenuItem
+                  onClick={() => isGitOpsAvailable && onPull(worktree)}
+                  disabled={isPulling || !isGitOpsAvailable}
+                  className={cn(
+                    'text-xs flex-1 pr-0 rounded-r-none',
+                    !isGitOpsAvailable && 'opacity-50 cursor-not-allowed'
+                  )}
+                >
+                  <Download className={cn('w-3.5 h-3.5 mr-2', isPulling && 'animate-pulse')} />
+                  {isPulling ? 'Pulling...' : 'Pull'}
+                  {!isGitOpsAvailable && (
+                    <AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
+                  )}
+                  {isGitOpsAvailable && !isOnDifferentRemote && behindCount > 0 && (
+                    <span className="ml-auto text-[10px] bg-muted px-1.5 py-0.5 rounded">
+                      {behindCount} behind
+                    </span>
+                  )}
+                  {isGitOpsAvailable && isOnDifferentRemote && (
+                    <span className="ml-auto inline-flex items-center gap-0.5 text-[10px] bg-blue-500/20 text-blue-600 dark:text-blue-400 px-1.5 py-0.5 rounded">
+                      <Globe className="w-2.5 h-2.5" />
+                      on {otherRemotesWithBranch.join(', ')}
+                    </span>
+                  )}
+                </DropdownMenuItem>
+                <DropdownMenuSubTrigger
+                  className={cn(
+                    'text-xs px-1 rounded-l-none border-l border-border/30 h-8',
+                    (!isGitOpsAvailable || isPulling) && 'opacity-50 cursor-not-allowed'
+                  )}
+                  disabled={!isGitOpsAvailable || isPulling}
+                />
+              </div>
+              <DropdownMenuSubContent>
+                <DropdownMenuLabel className="text-xs text-muted-foreground font-normal">
+                  Pull from remote
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                {remotes.map((remote) => (
+                  <RemoteActionMenuItem
+                    key={remote.name}
+                    remote={remote}
+                    icon={Download}
+                    trackingRemote={trackingRemote}
+                    isDisabled={isPulling}
+                    isGitOpsAvailable={isGitOpsAvailable}
+                    onAction={() => isGitOpsAvailable && onPullWithRemote(worktree, remote.name)}
+                    onSetTracking={
+                      onSetTracking
+                        ? () => isGitOpsAvailable && onSetTracking(worktree, remote.name)
+                        : undefined
+                    }
+                  />
+                ))}
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          ) : (
+            // Single remote or no remotes - show simple menu item
+            <DropdownMenuItem
+              onClick={() => isGitOpsAvailable && onPull(worktree)}
+              disabled={isPulling || !isGitOpsAvailable}
+              className={cn('text-xs', !isGitOpsAvailable && 'opacity-50 cursor-not-allowed')}
+            >
+              <Download className={cn('w-3.5 h-3.5 mr-2', isPulling && 'animate-pulse')} />
+              {isPulling ? 'Pulling...' : 'Pull'}
+              {!isGitOpsAvailable && (
+                <AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
+              )}
+              {isGitOpsAvailable && !isOnDifferentRemote && behindCount > 0 && (
+                <span className="ml-auto text-[10px] bg-muted px-1.5 py-0.5 rounded">
+                  {behindCount} behind
+                </span>
+              )}
+              {isGitOpsAvailable && isOnDifferentRemote && (
+                <span className="ml-auto inline-flex items-center gap-0.5 text-[10px] bg-blue-500/20 text-blue-600 dark:text-blue-400 px-1.5 py-0.5 rounded">
+                  <Globe className="w-2.5 h-2.5" />
+                  on {otherRemotesWithBranch.join(', ')}
+                </span>
+              )}
+            </DropdownMenuItem>
+          )}
+        </TooltipWrapper>
+        <TooltipWrapper showTooltip={!!gitOpsDisabledReason} tooltipContent={gitOpsDisabledReason}>
+          {remotes && remotes.length > 1 && onPushWithRemote ? (
+            // Multiple remotes - show split button: click main area for default push behavior,
+            // chevron opens submenu showing individual remotes to push to
+            <DropdownMenuSub>
+              <div className="flex items-center">
+                <DropdownMenuItem
+                  onClick={() => {
+                    if (!isGitOpsAvailable) return;
+                    if (!hasRemoteBranch) {
+                      onPushNewBranch(worktree);
+                    } else {
+                      onPush(worktree);
+                    }
+                  }}
+                  disabled={
+                    isPushing ||
+                    (hasRemoteBranch && !isOnDifferentRemote && aheadCount === 0) ||
+                    !isGitOpsAvailable
+                  }
+                  className={cn(
+                    'text-xs flex-1 pr-0 rounded-r-none',
+                    !isGitOpsAvailable && 'opacity-50 cursor-not-allowed'
+                  )}
+                >
+                  <Upload className={cn('w-3.5 h-3.5 mr-2', isPushing && 'animate-pulse')} />
+                  {isPushing ? 'Pushing...' : 'Push'}
+                  {!isGitOpsAvailable && (
+                    <AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
+                  )}
+                  {isGitOpsAvailable && !hasRemoteBranch && (
+                    <span className="ml-auto inline-flex items-center gap-0.5 text-[10px] bg-amber-500/20 text-amber-600 dark:text-amber-400 px-1.5 py-0.5 rounded">
+                      <CloudOff className="w-2.5 h-2.5" />
+                      local only
+                    </span>
+                  )}
+                  {isGitOpsAvailable && hasRemoteBranch && isOnDifferentRemote && (
+                    <span className="ml-auto inline-flex items-center gap-0.5 text-[10px] bg-blue-500/20 text-blue-600 dark:text-blue-400 px-1.5 py-0.5 rounded">
+                      <Globe className="w-2.5 h-2.5" />
+                      on {otherRemotesWithBranch.join(', ')}
+                    </span>
+                  )}
+                  {isGitOpsAvailable &&
+                    hasRemoteBranch &&
+                    !isOnDifferentRemote &&
+                    aheadCount > 0 && (
+                      <span className="ml-auto text-[10px] bg-primary/20 text-primary px-1.5 py-0.5 rounded">
+                        {aheadCount} ahead
+                      </span>
+                    )}
+                  {isGitOpsAvailable &&
+                    hasRemoteBranch &&
+                    !isOnDifferentRemote &&
+                    trackingRemote && (
+                      <span
+                        className={cn(
+                          'text-[10px] bg-muted text-muted-foreground px-1.5 py-0.5 rounded',
+                          aheadCount > 0 ? 'ml-1' : 'ml-auto'
+                        )}
+                      >
+                        {trackingRemote}
+                      </span>
+                    )}
+                </DropdownMenuItem>
+                <DropdownMenuSubTrigger
+                  className={cn(
+                    'text-xs px-1 rounded-l-none border-l border-border/30 h-8',
+                    (!isGitOpsAvailable || isPushing) && 'opacity-50 cursor-not-allowed'
+                  )}
+                  disabled={!isGitOpsAvailable || isPushing}
+                />
+              </div>
+              <DropdownMenuSubContent>
+                <DropdownMenuLabel className="text-xs text-muted-foreground font-normal">
+                  Push to remote
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                {remotes.map((remote) => (
+                  <RemoteActionMenuItem
+                    key={remote.name}
+                    remote={remote}
+                    icon={Upload}
+                    trackingRemote={trackingRemote}
+                    isDisabled={isPushing}
+                    isGitOpsAvailable={isGitOpsAvailable}
+                    onAction={() => isGitOpsAvailable && onPushWithRemote(worktree, remote.name)}
+                    onSetTracking={
+                      onSetTracking
+                        ? () => isGitOpsAvailable && onSetTracking(worktree, remote.name)
+                        : undefined
+                    }
+                  />
+                ))}
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          ) : (
+            // Single remote or no remotes - show simple menu item
+            <DropdownMenuItem
+              onClick={() => {
+                if (!isGitOpsAvailable) return;
+                if (!hasRemoteBranch) {
+                  onPushNewBranch(worktree);
+                } else {
+                  onPush(worktree);
+                }
+              }}
+              disabled={
+                isPushing ||
+                (hasRemoteBranch && !isOnDifferentRemote && aheadCount === 0) ||
+                !isGitOpsAvailable
+              }
+              className={cn('text-xs', !isGitOpsAvailable && 'opacity-50 cursor-not-allowed')}
+            >
+              <Upload className={cn('w-3.5 h-3.5 mr-2', isPushing && 'animate-pulse')} />
+              {isPushing ? 'Pushing...' : 'Push'}
+              {!isGitOpsAvailable && (
+                <AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
+              )}
+              {isGitOpsAvailable && !hasRemoteBranch && (
+                <span className="ml-auto inline-flex items-center gap-0.5 text-[10px] bg-amber-500/20 text-amber-600 dark:text-amber-400 px-1.5 py-0.5 rounded">
+                  <CloudOff className="w-2.5 h-2.5" />
+                  local only
+                </span>
+              )}
+              {isGitOpsAvailable && hasRemoteBranch && isOnDifferentRemote && (
+                <span className="ml-auto inline-flex items-center gap-0.5 text-[10px] bg-blue-500/20 text-blue-600 dark:text-blue-400 px-1.5 py-0.5 rounded">
+                  <Globe className="w-2.5 h-2.5" />
+                  on {otherRemotesWithBranch.join(', ')}
+                </span>
+              )}
+              {isGitOpsAvailable && hasRemoteBranch && !isOnDifferentRemote && aheadCount > 0 && (
+                <span className="ml-auto text-[10px] bg-primary/20 text-primary px-1.5 py-0.5 rounded">
+                  {aheadCount} ahead
+                </span>
+              )}
+              {isGitOpsAvailable && hasRemoteBranch && !isOnDifferentRemote && trackingRemote && (
+                <span
+                  className={cn(
+                    'text-[10px] bg-muted text-muted-foreground px-1.5 py-0.5 rounded',
+                    aheadCount > 0 ? 'ml-1' : 'ml-auto'
+                  )}
+                >
+                  {trackingRemote}
+                </span>
+              )}
+            </DropdownMenuItem>
+          )}
+        </TooltipWrapper>
+        {onSync && (
+          <TooltipWrapper
+            showTooltip={!!gitOpsDisabledReason}
+            tooltipContent={gitOpsDisabledReason}
+          >
+            {remotes && remotes.length > 1 && onSyncWithRemote ? (
+              <DropdownMenuSub>
+                <div className="flex items-center">
+                  <DropdownMenuItem
+                    onClick={() => isGitOpsAvailable && onSync(worktree)}
+                    disabled={isSyncing || !isGitOpsAvailable}
+                    className={cn(
+                      'text-xs flex-1 pr-0 rounded-r-none',
+                      !isGitOpsAvailable && 'opacity-50 cursor-not-allowed'
+                    )}
+                  >
+                    <RefreshCw className={cn('w-3.5 h-3.5 mr-2', isSyncing && 'animate-spin')} />
+                    {isSyncing ? 'Syncing...' : 'Sync'}
+                    {!isGitOpsAvailable && (
+                      <AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
+                    )}
+                  </DropdownMenuItem>
+                  <DropdownMenuSubTrigger
+                    className={cn(
+                      'text-xs px-1 rounded-l-none border-l border-border/30 h-8',
+                      (!isGitOpsAvailable || isSyncing) && 'opacity-50 cursor-not-allowed'
+                    )}
+                    disabled={!isGitOpsAvailable || isSyncing}
+                  />
+                </div>
+                <DropdownMenuSubContent>
+                  <DropdownMenuLabel className="text-xs text-muted-foreground font-normal">
+                    Sync with remote
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  {remotes.map((remote) => (
+                    <DropdownMenuItem
+                      key={`sync-${remote.name}`}
+                      onClick={() => isGitOpsAvailable && onSyncWithRemote(worktree, remote.name)}
+                      disabled={isSyncing || !isGitOpsAvailable}
+                      className="text-xs"
+                    >
+                      <RefreshCw className="w-3.5 h-3.5 mr-2" />
+                      {remote.name}
+                      <span className="ml-auto text-[10px] text-muted-foreground max-w-[100px] truncate">
+                        {remote.url}
+                      </span>
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            ) : (
+              <DropdownMenuItem
+                onClick={() => isGitOpsAvailable && onSync(worktree)}
+                disabled={isSyncing || !isGitOpsAvailable}
+                className={cn('text-xs', !isGitOpsAvailable && 'opacity-50 cursor-not-allowed')}
+              >
+                <RefreshCw className={cn('w-3.5 h-3.5 mr-2', isSyncing && 'animate-spin')} />
+                {isSyncing ? 'Syncing...' : 'Sync'}
+                {!isGitOpsAvailable && (
+                  <AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
+                )}
+              </DropdownMenuItem>
+            )}
+          </TooltipWrapper>
+        )}
+        <TooltipWrapper showTooltip={!!gitOpsDisabledReason} tooltipContent={gitOpsDisabledReason}>
+          <DropdownMenuItem
+            onClick={() => isGitOpsAvailable && onResolveConflicts(worktree)}
+            disabled={!isGitOpsAvailable}
+            className={cn(
+              'text-xs text-purple-500 focus:text-purple-600',
+              !isGitOpsAvailable && 'opacity-50 cursor-not-allowed'
+            )}
+          >
+            <GitMerge className="w-3.5 h-3.5 mr-2" />
+            Merge & Rebase
+            {!isGitOpsAvailable && (
+              <AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
+            )}
+          </DropdownMenuItem>
+        </TooltipWrapper>
+        {!worktree.isMain && (
+          <TooltipWrapper
+            showTooltip={!!gitOpsDisabledReason}
+            tooltipContent={gitOpsDisabledReason}
+          >
+            <DropdownMenuItem
+              onClick={() => isGitOpsAvailable && onMerge(worktree)}
+              disabled={!isGitOpsAvailable}
+              className={cn(
+                'text-xs text-green-600 focus:text-green-700',
+                !isGitOpsAvailable && 'opacity-50 cursor-not-allowed'
+              )}
+            >
+              <GitMerge className="w-3.5 h-3.5 mr-2" />
+              Integrate Branch
+              {!isGitOpsAvailable && (
+                <AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
+              )}
+            </DropdownMenuItem>
+          </TooltipWrapper>
+        )}
+        {/* View Commits - split button when Cherry Pick is available:
+            click main area to view commits directly, chevron opens sub-menu with Cherry Pick */}
+        {onCherryPick ? (
+          <DropdownMenuSub>
+            <TooltipWrapper
+              showTooltip={!!gitOpsDisabledReason}
+              tooltipContent={gitOpsDisabledReason}
+            >
+              <div className="flex items-center">
+                {/* Main clickable area - opens commit history directly */}
+                <DropdownMenuItem
+                  onClick={() => isGitOpsAvailable && onViewCommits(worktree)}
+                  disabled={!isGitOpsAvailable}
+                  className={cn(
+                    'text-xs flex-1 pr-0 rounded-r-none',
+                    !isGitOpsAvailable && 'opacity-50 cursor-not-allowed'
+                  )}
+                >
+                  <History className="w-3.5 h-3.5 mr-2" />
+                  View Commits
+                  {!isGitOpsAvailable && (
+                    <AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
+                  )}
+                </DropdownMenuItem>
+                {/* Chevron trigger for sub-menu containing Cherry Pick */}
+                <DropdownMenuSubTrigger
+                  disabled={!isGitOpsAvailable}
+                  className={cn(
+                    'text-xs px-1 rounded-l-none border-l border-border/30 h-8',
+                    !isGitOpsAvailable && 'opacity-50 cursor-not-allowed'
+                  )}
+                />
+              </div>
+            </TooltipWrapper>
+            <DropdownMenuSubContent>
+              {/* Cherry-pick commits from another branch */}
+              <DropdownMenuItem
+                onClick={() => isGitOpsAvailable && onCherryPick(worktree)}
+                disabled={!isGitOpsAvailable}
+                className={cn('text-xs', !isGitOpsAvailable && 'opacity-50 cursor-not-allowed')}
+              >
+                <Cherry className="w-3.5 h-3.5 mr-2" />
+                Cherry Pick
+                {!isGitOpsAvailable && (
+                  <AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
+                )}
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        ) : (
+          <TooltipWrapper
+            showTooltip={!!gitOpsDisabledReason}
+            tooltipContent={gitOpsDisabledReason}
+          >
+            <DropdownMenuItem
+              onClick={() => isGitOpsAvailable && onViewCommits(worktree)}
+              disabled={!isGitOpsAvailable}
+              className={cn('text-xs', !isGitOpsAvailable && 'opacity-50 cursor-not-allowed')}
+            >
+              <History className="w-3.5 h-3.5 mr-2" />
+              View Commits
+              {!isGitOpsAvailable && (
+                <AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
+              )}
+            </DropdownMenuItem>
+          </TooltipWrapper>
+        )}
+        {(hasChangesSectionContent || hasDestructiveSectionContent) && <DropdownMenuSeparator />}
+
+        {/* View Changes split button - main action views changes directly, chevron reveals stash options.
+            Only render when at least one action is meaningful:
+            - worktree.hasChanges: View Changes action is available
+            - (worktree.hasChanges && onStashChanges): Create Stash action is possible
+            - onViewStashes: viewing existing stashes is possible */}
+        {/* View Changes split button - show submenu only when there are non-duplicate sub-actions */}
+        {worktree.hasChanges && (onStashChanges || onViewStashes) ? (
+          <DropdownMenuSub>
+            <div className="flex items-center">
+              {/* Main clickable area - view changes (primary action) */}
+              <DropdownMenuItem
+                onClick={() => onViewChanges(worktree)}
+                className="text-xs flex-1 pr-0 rounded-r-none"
+              >
+                <Eye className="w-3.5 h-3.5 mr-2" />
+                View Changes
+              </DropdownMenuItem>
+              {/* Chevron trigger for submenu with stash options */}
+              <DropdownMenuSubTrigger className="text-xs px-1 rounded-l-none border-l border-border/30 h-8" />
+            </div>
+            <DropdownMenuSubContent>
+              {onStashChanges && (
+                <TooltipWrapper
+                  showTooltip={!isGitOpsAvailable}
+                  tooltipContent={gitOpsDisabledReason}
+                >
+                  <DropdownMenuItem
+                    onClick={() => {
+                      if (!isGitOpsAvailable) return;
+                      onStashChanges(worktree);
+                    }}
+                    disabled={!isGitOpsAvailable}
+                    className={cn('text-xs', !isGitOpsAvailable && 'opacity-50 cursor-not-allowed')}
+                  >
+                    <Archive className="w-3.5 h-3.5 mr-2" />
+                    Create Stash
+                    {!isGitOpsAvailable && (
+                      <AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
+                    )}
+                  </DropdownMenuItem>
+                </TooltipWrapper>
+              )}
+              {onViewStashes && (
+                <DropdownMenuItem onClick={() => onViewStashes(worktree)} className="text-xs">
+                  <Eye className="w-3.5 h-3.5 mr-2" />
+                  View Stashes
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        ) : worktree.hasChanges ? (
+          <DropdownMenuItem onClick={() => onViewChanges(worktree)} className="text-xs">
+            <Eye className="w-3.5 h-3.5 mr-2" />
+            View Changes
+          </DropdownMenuItem>
+        ) : onViewStashes ? (
+          <DropdownMenuItem onClick={() => onViewStashes(worktree)} className="text-xs">
+            <Eye className="w-3.5 h-3.5 mr-2" />
+            View Stashes
+          </DropdownMenuItem>
+        ) : null}
+        {worktree.hasChanges && (
+          <TooltipWrapper
+            showTooltip={!!gitOpsDisabledReason}
+            tooltipContent={gitOpsDisabledReason}
+          >
+            <DropdownMenuItem
+              onClick={() => isGitOpsAvailable && onCommit(worktree)}
+              disabled={!isGitOpsAvailable}
+              className={cn('text-xs', !isGitOpsAvailable && 'opacity-50 cursor-not-allowed')}
+            >
+              <GitCommit className="w-3.5 h-3.5 mr-2" />
+              Commit Changes
+              {!isGitOpsAvailable && (
+                <AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
+              )}
+            </DropdownMenuItem>
+          </TooltipWrapper>
+        )}
+        {/* Show PR option when there is no existing PR (showCreatePR === !hasPR) */}
+        {showCreatePR && (
+          <TooltipWrapper
+            showTooltip={!!gitOpsDisabledReason}
+            tooltipContent={gitOpsDisabledReason}
+          >
+            <DropdownMenuItem
+              onClick={() => isGitOpsAvailable && onCreatePR(worktree)}
+              disabled={!isGitOpsAvailable}
+              className={cn('text-xs', !isGitOpsAvailable && 'opacity-50 cursor-not-allowed')}
+            >
+              <GitPullRequest className="w-3.5 h-3.5 mr-2" />
+              Create Pull Request
+              {!isGitOpsAvailable && (
+                <AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
+              )}
+            </DropdownMenuItem>
+          </TooltipWrapper>
+        )}
+        {/* Show PR info with Address Comments in sub-menu if PR exists */}
+        {prInfo && worktree.pr && (
+          <DropdownMenuSub>
+            <div className="flex items-center">
+              {/* Main clickable area - opens PR in browser */}
+              <DropdownMenuItem
+                onClick={() => {
+                  window.open(worktree.pr!.url, '_blank', 'noopener,noreferrer');
+                }}
+                className="text-xs flex-1 pr-0 rounded-r-none"
+              >
+                <GitPullRequest className="w-3 h-3 mr-2" />
+                PR #{worktree.pr.number}
+                <span
+                  className={cn(
+                    'ml-auto mr-1 text-[10px] px-1.5 py-0.5 rounded uppercase',
+                    worktree.pr.state === 'MERGED'
+                      ? 'bg-purple-500/20 text-purple-600'
+                      : worktree.pr.state === 'CLOSED'
+                        ? 'bg-gray-500/20 text-gray-500'
+                        : 'bg-green-500/20 text-green-600'
+                  )}
+                >
+                  {worktree.pr.state}
+                </span>
+              </DropdownMenuItem>
+              {/* Chevron trigger for submenu with PR actions */}
+              <DropdownMenuSubTrigger className="text-xs px-1 rounded-l-none border-l border-border/30 h-8" />
+            </div>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem
+                onClick={() => onAddressPRComments(worktree, prInfo)}
+                className="text-xs text-blue-500 focus:text-blue-600"
+              >
+                <MessageSquare className="w-3.5 h-3.5 mr-2" />
+                Manage PR Comments
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => onAutoAddressPRComments(worktree, prInfo)}
+                className="text-xs text-blue-500 focus:text-blue-600"
+              >
+                <Zap className="w-3.5 h-3.5 mr-2" />
+                Address PR Comments
+              </DropdownMenuItem>
+              {onChangePRNumber && (
+                <DropdownMenuItem onClick={() => onChangePRNumber(worktree)} className="text-xs">
+                  <Hash className="w-3.5 h-3.5 mr-2" />
+                  Change PR Number
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        )}
+        {hasChangesSectionContent && hasDestructiveSectionContent && <DropdownMenuSeparator />}
+        {worktree.hasChanges && (
+          <TooltipWrapper
+            showTooltip={!!gitOpsDisabledReason}
+            tooltipContent={gitOpsDisabledReason}
+          >
+            <DropdownMenuItem
+              onClick={() => isGitOpsAvailable && onDiscardChanges(worktree)}
+              disabled={!isGitOpsAvailable}
+              className={cn(
+                'text-xs text-destructive focus:text-destructive',
+                !isGitOpsAvailable && 'opacity-50 cursor-not-allowed'
+              )}
+            >
+              <Undo2 className="w-3.5 h-3.5 mr-2" />
+              Discard Changes
+              {!isGitOpsAvailable && (
+                <AlertCircle className="w-3 h-3 ml-auto text-muted-foreground" />
+              )}
+            </DropdownMenuItem>
+          </TooltipWrapper>
+        )}
+        {/* Swap Worktree submenu - only shown for non-main slots when there are other worktrees to swap to */}
+        {!worktree.isMain &&
+          availableWorktreesForSwap &&
+          availableWorktreesForSwap.length > 1 &&
+          slotIndex !== undefined &&
+          onSwapWorktree && (
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger className="text-xs">
+                <ArrowLeftRight className="w-3.5 h-3.5 mr-2" />
+                Swap Worktree
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent className="w-64 max-h-80 overflow-y-auto">
+                {availableWorktreesForSwap
+                  .filter((wt) => wt.branch !== worktree.branch)
+                  .map((wt) => {
+                    const isPinned = pinnedBranches?.includes(wt.branch);
+                    return (
+                      <DropdownMenuItem
+                        key={wt.path}
+                        onSelect={() => onSwapWorktree(slotIndex, wt.branch)}
+                        className="flex items-center gap-2 cursor-pointer font-mono text-xs"
+                      >
+                        <span className="truncate flex-1">{wt.branch}</span>
+                        {isPinned && <Check className="w-3 h-3 shrink-0 text-muted-foreground" />}
+                      </DropdownMenuItem>
+                    );
+                  })}
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          )}
+        {!worktree.isMain && (
+          <DropdownMenuItem
+            onClick={() => onDeleteWorktree(worktree)}
+            className="text-xs text-destructive focus:text-destructive"
+          >
+            <Trash2 className="w-3.5 h-3.5 mr-2" />
+            Delete Worktree
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-dropdown-item.tsx b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-dropdown-item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e549d4904bb8460ed233dbe8dada465542daf0af
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-dropdown-item.tsx
@@ -0,0 +1,229 @@
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Check, CircleDot, Globe, GitPullRequest, FlaskConical, AlertTriangle } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import type { WorktreeInfo, DevServerInfo, TestSessionInfo } from '../types';
+import {
+  truncateBranchName,
+  getPRBadgeStyles,
+  getChangesBadgeStyles,
+  getConflictBadgeStyles,
+  getConflictTypeLabel,
+  getTestStatusStyles,
+} from './worktree-indicator-utils';
+
+/**
+ * Maximum characters for branch name before truncation in dropdown items.
+ * Set to 28 to accommodate longer names in the wider dropdown menu while
+ * still fitting comfortably with all status indicators.
+ */
+const MAX_ITEM_BRANCH_NAME_LENGTH = 28;
+
+export interface WorktreeDropdownItemProps {
+  /** The worktree to display */
+  worktree: WorktreeInfo;
+  /** Whether this worktree is currently selected */
+  isSelected: boolean;
+  /** Whether this worktree has running features/processes */
+  isRunning: boolean;
+  /** Number of cards associated with this worktree's branch */
+  cardCount?: number;
+  /** Whether the dev server is running for this worktree */
+  devServerRunning?: boolean;
+  /** Whether the dev server is starting for this worktree */
+  devServerStarting?: boolean;
+  /** Dev server information if running */
+  devServerInfo?: DevServerInfo;
+  /** Whether auto-mode is running for this worktree */
+  isAutoModeRunning?: boolean;
+  /** Whether tests are running for this worktree */
+  isTestRunning?: boolean;
+  /** Test session info for this worktree */
+  testSessionInfo?: TestSessionInfo;
+  /** Callback when the worktree is selected */
+  onSelect: () => void;
+}
+
+/**
+ * A dropdown menu item component for displaying an individual worktree entry.
+ *
+ * Features:
+ * - Selection indicator (checkmark when selected)
+ * - Running status indicator (spinner)
+ * - Branch name with tooltip for long names
+ * - Main branch badge
+ * - Dev server status indicator
+ * - Auto mode indicator
+ * - Test status indicator
+ * - Card count badge
+ * - Uncommitted changes indicator
+ * - PR status badge
+ */
+export function WorktreeDropdownItem({
+  worktree,
+  isSelected,
+  isRunning,
+  cardCount,
+  devServerRunning,
+  devServerStarting,
+  devServerInfo,
+  isAutoModeRunning = false,
+  isTestRunning = false,
+  testSessionInfo,
+  onSelect,
+}: WorktreeDropdownItemProps) {
+  const { hasChanges, changedFilesCount, pr } = worktree;
+
+  // Truncate long branch names using shared utility
+  const { truncated: truncatedBranch, isTruncated: isBranchNameTruncated } = truncateBranchName(
+    worktree.branch,
+    MAX_ITEM_BRANCH_NAME_LENGTH
+  );
+
+  const branchNameElement = (
+    <span className={cn('font-mono text-xs truncate', isSelected && 'font-medium')}>
+      {truncatedBranch}
+    </span>
+  );
+
+  return (
+    <DropdownMenuItem
+      onSelect={onSelect}
+      className={cn('flex items-center gap-2 cursor-pointer pr-2', isSelected && 'bg-accent')}
+      aria-current={isSelected ? 'true' : undefined}
+    >
+      <div className="flex items-center gap-2 flex-1 min-w-0">
+        {/* Selection indicator */}
+        {isSelected ? (
+          <Check className="w-3.5 h-3.5 shrink-0 text-primary" />
+        ) : (
+          <div className="w-3.5 h-3.5 shrink-0" />
+        )}
+
+        {/* Running indicator */}
+        {isRunning && <Spinner size="xs" className="shrink-0" />}
+
+        {/* Branch name with optional tooltip */}
+        {isBranchNameTruncated ? (
+          <Tooltip>
+            <TooltipTrigger asChild>{branchNameElement}</TooltipTrigger>
+            <TooltipContent>
+              <p className="font-mono text-xs">{worktree.branch}</p>
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          branchNameElement
+        )}
+
+        {/* Main badge */}
+        {worktree.isMain && (
+          <span className="text-[10px] px-1 py-0.5 rounded bg-muted text-muted-foreground shrink-0">
+            main
+          </span>
+        )}
+      </div>
+
+      {/* Right side indicators - ordered consistently with dropdown trigger */}
+      <div className="flex items-center gap-1.5 shrink-0">
+        {/* Card count badge */}
+        {cardCount !== undefined && cardCount > 0 && (
+          <span className="inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded bg-background/80 text-foreground border border-border">
+            {cardCount}
+          </span>
+        )}
+
+        {/* Uncommitted changes indicator */}
+        {hasChanges && (
+          <span
+            className={cn(
+              'inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border',
+              getChangesBadgeStyles()
+            )}
+            title={`${changedFilesCount ?? 'Some'} uncommitted file${changedFilesCount !== 1 ? 's' : ''}`}
+          >
+            <CircleDot className="w-2.5 h-2.5 mr-0.5" />
+            {changedFilesCount ?? '!'}
+          </span>
+        )}
+
+        {/* Dev server indicator - hidden when URL detection explicitly failed */}
+        {devServerRunning && devServerInfo?.urlDetected !== false && (
+          <span
+            className="inline-flex items-center justify-center h-4 w-4 text-green-500"
+            title={`Dev server running on port ${devServerInfo?.port}`}
+          >
+            <Globe className="w-3 h-3" />
+          </span>
+        )}
+
+        {/* Dev server starting indicator */}
+        {devServerStarting && (
+          <span
+            className="inline-flex items-center justify-center h-4 w-4 text-amber-500"
+            title="Dev server starting..."
+          >
+            <Spinner size="xs" variant="primary" />
+          </span>
+        )}
+
+        {/* Test running indicator */}
+        {isTestRunning && (
+          <span
+            className="inline-flex items-center justify-center h-4 w-4 text-blue-500"
+            title="Tests Running"
+          >
+            <FlaskConical className="w-3 h-3 animate-pulse" />
+          </span>
+        )}
+
+        {/* Last test result indicator (when not running) */}
+        {!isTestRunning && testSessionInfo && (
+          <span
+            className={cn(
+              'inline-flex items-center justify-center h-4 w-4',
+              getTestStatusStyles(testSessionInfo.status)
+            )}
+            title={`Last test: ${testSessionInfo.status}`}
+          >
+            <FlaskConical className="w-3 h-3" />
+          </span>
+        )}
+
+        {/* Auto mode indicator */}
+        {isAutoModeRunning && (
+          <span className="flex items-center justify-center h-4 px-0.5" title="Auto Mode Running">
+            <span className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
+          </span>
+        )}
+
+        {/* Conflict indicator */}
+        {worktree.hasConflicts && (
+          <span
+            className={cn(
+              'inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border',
+              getConflictBadgeStyles()
+            )}
+            title={`${getConflictTypeLabel(worktree.conflictType)} conflicts${worktree.conflictFiles?.length ? ` (${worktree.conflictFiles.length} files)` : ''}`}
+          >
+            <AlertTriangle className="w-2.5 h-2.5 mr-0.5" />
+            {getConflictTypeLabel(worktree.conflictType)}
+          </span>
+        )}
+
+        {/* PR indicator */}
+        {pr && (
+          <span
+            className={cn(
+              'inline-flex items-center gap-0.5 h-4 px-1 text-[10px] font-medium rounded border',
+              getPRBadgeStyles(pr.state)
+            )}
+            title={`PR #${pr.number}: ${pr.title}`}
+          >
+            <GitPullRequest className="w-2.5 h-2.5" />#{pr.number}
+          </span>
+        )}
+      </div>
+    </DropdownMenuItem>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-dropdown.tsx b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-dropdown.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..315f225e4dd23f4eb2170ee1c894cdb808c0cfd7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-dropdown.tsx
@@ -0,0 +1,628 @@
+import { useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuGroup,
+} from '@/components/ui/dropdown-menu';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import {
+  GitBranch,
+  ChevronDown,
+  CircleDot,
+  Globe,
+  GitPullRequest,
+  FlaskConical,
+  AlertTriangle,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import type {
+  WorktreeInfo,
+  BranchInfo,
+  DevServerInfo,
+  PRInfo,
+  GitRepoStatus,
+  TestSessionInfo,
+  MergeConflictInfo,
+} from '../types';
+import { WorktreeDropdownItem } from './worktree-dropdown-item';
+import { BranchSwitchDropdown } from './branch-switch-dropdown';
+import { WorktreeActionsDropdown } from './worktree-actions-dropdown';
+import {
+  truncateBranchName,
+  getPRBadgeStyles,
+  getChangesBadgeStyles,
+  getConflictBadgeStyles,
+  getConflictTypeLabel,
+  getTestStatusStyles,
+} from './worktree-indicator-utils';
+
+export interface WorktreeDropdownProps {
+  /** List of all worktrees to display in the dropdown */
+  worktrees: WorktreeInfo[];
+  /** Function to check if a worktree is currently selected */
+  isWorktreeSelected: (worktree: WorktreeInfo) => boolean;
+  /** Function to check if a worktree has running features/processes */
+  hasRunningFeatures: (worktree: WorktreeInfo) => boolean;
+  /** Whether worktree activation is in progress */
+  isActivating: boolean;
+  /** Map of branch names to card counts */
+  branchCardCounts?: Record<string, number>;
+  /** Function to check if dev server is running for a worktree */
+  isDevServerRunning: (worktree: WorktreeInfo) => boolean;
+  /** Function to check if dev server is starting for a worktree */
+  isDevServerStarting: (worktree: WorktreeInfo) => boolean;
+  /** Function to get dev server info for a worktree */
+  getDevServerInfo: (worktree: WorktreeInfo) => DevServerInfo | undefined;
+  /** Function to check if auto-mode is running for a worktree */
+  isAutoModeRunningForWorktree: (worktree: WorktreeInfo) => boolean;
+  /** Function to check if tests are running for a worktree */
+  isTestRunningForWorktree: (worktree: WorktreeInfo) => boolean;
+  /** Function to get test session info for a worktree */
+  getTestSessionInfo: (worktree: WorktreeInfo) => TestSessionInfo | undefined;
+  /** Callback when a worktree is selected */
+  onSelectWorktree: (worktree: WorktreeInfo) => void;
+
+  // Branch switching props
+  branches: BranchInfo[];
+  filteredBranches: BranchInfo[];
+  branchFilter: string;
+  isLoadingBranches: boolean;
+  isSwitching: boolean;
+  onBranchDropdownOpenChange: (worktree: WorktreeInfo) => (open: boolean) => void;
+  onBranchFilterChange: (value: string) => void;
+  onSwitchBranch: (worktree: WorktreeInfo, branchName: string) => void;
+  onCreateBranch: (worktree: WorktreeInfo) => void;
+
+  // Action dropdown props
+  isPulling: boolean;
+  isPushing: boolean;
+  isStartingAnyDevServer: boolean;
+  aheadCount: number;
+  behindCount: number;
+  hasRemoteBranch: boolean;
+  /** The name of the remote that the current branch is tracking (e.g. "origin"), if any */
+  trackingRemote?: string;
+  /** Per-worktree tracking remote lookup */
+  getTrackingRemote?: (worktreePath: string) => string | undefined;
+  gitRepoStatus: GitRepoStatus;
+  hasTestCommand: boolean;
+  isStartingTests: boolean;
+  hasInitScript: boolean;
+  onActionsDropdownOpenChange: (worktree: WorktreeInfo) => (open: boolean) => void;
+  onPull: (worktree: WorktreeInfo) => void;
+  onPush: (worktree: WorktreeInfo) => void;
+  onPushNewBranch: (worktree: WorktreeInfo) => void;
+  onOpenInEditor: (worktree: WorktreeInfo, editorCommand?: string) => void;
+  onOpenInIntegratedTerminal: (worktree: WorktreeInfo, mode?: 'tab' | 'split') => void;
+  onOpenInExternalTerminal: (worktree: WorktreeInfo, terminalId?: string) => void;
+  onViewChanges: (worktree: WorktreeInfo) => void;
+  onViewCommits: (worktree: WorktreeInfo) => void;
+  onDiscardChanges: (worktree: WorktreeInfo) => void;
+  onCommit: (worktree: WorktreeInfo) => void;
+  onCreatePR: (worktree: WorktreeInfo) => void;
+  onChangePRNumber?: (worktree: WorktreeInfo) => void;
+  onAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
+  onAutoAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
+  onResolveConflicts: (worktree: WorktreeInfo) => void;
+  onMerge: (worktree: WorktreeInfo) => void;
+  onDeleteWorktree: (worktree: WorktreeInfo) => void;
+  onStartDevServer: (worktree: WorktreeInfo) => void;
+  onStopDevServer: (worktree: WorktreeInfo) => void;
+  onOpenDevServerUrl: (worktree: WorktreeInfo) => void;
+  onViewDevServerLogs: (worktree: WorktreeInfo) => void;
+  onRunInitScript: (worktree: WorktreeInfo) => void;
+  onToggleAutoMode: (worktree: WorktreeInfo) => void;
+  onStartTests: (worktree: WorktreeInfo) => void;
+  onStopTests: (worktree: WorktreeInfo) => void;
+  onViewTestLogs: (worktree: WorktreeInfo) => void;
+  /** Stash changes for this worktree */
+  onStashChanges?: (worktree: WorktreeInfo) => void;
+  /** View stashes for this worktree */
+  onViewStashes?: (worktree: WorktreeInfo) => void;
+  /** Cherry-pick commits from another branch */
+  onCherryPick?: (worktree: WorktreeInfo) => void;
+  /** Abort an in-progress merge/rebase/cherry-pick */
+  onAbortOperation?: (worktree: WorktreeInfo) => void;
+  /** Continue an in-progress merge/rebase/cherry-pick after resolving conflicts */
+  onContinueOperation?: (worktree: WorktreeInfo) => void;
+  /** Create a feature to resolve merge/rebase/cherry-pick conflicts with AI */
+  onCreateConflictResolutionFeature?: (conflictInfo: MergeConflictInfo) => void;
+  /** Remotes cache: maps worktree path to list of remotes */
+  remotesCache?: Record<string, Array<{ name: string; url: string }>>;
+  /** Pull from a specific remote, bypassing the remote selection dialog */
+  onPullWithRemote?: (worktree: WorktreeInfo, remote: string) => void;
+  /** Push to a specific remote, bypassing the remote selection dialog */
+  onPushWithRemote?: (worktree: WorktreeInfo, remote: string) => void;
+  /** Terminal quick scripts configured for the project */
+  terminalScripts?: import('@/components/views/project-settings-view/terminal-scripts-constants').TerminalScript[];
+  /** Callback to run a terminal quick script in a new terminal session */
+  onRunTerminalScript?: (worktree: WorktreeInfo, command: string) => void;
+  /** Callback to open the script editor UI */
+  onEditScripts?: () => void;
+  /** Whether sync is in progress */
+  isSyncing?: boolean;
+  /** Sync (pull + push) callback */
+  onSync?: (worktree: WorktreeInfo) => void;
+  /** Sync with a specific remote */
+  onSyncWithRemote?: (worktree: WorktreeInfo, remote: string) => void;
+  /** Set tracking branch to a specific remote */
+  onSetTracking?: (worktree: WorktreeInfo, remote: string) => void;
+  /** List of remote names that have a branch matching the current branch name */
+  remotesWithBranch?: string[];
+  /** When false, the trigger button uses a subdued style instead of the primary highlight. Defaults to true. */
+  highlightTrigger?: boolean;
+}
+
+/**
+ * Maximum characters for branch name before truncation in the dropdown trigger.
+ * Set to 24 to keep the trigger compact while showing enough context for identification.
+ */
+const MAX_TRIGGER_BRANCH_NAME_LENGTH = 24;
+
+/**
+ * A dropdown component for displaying and switching between worktrees.
+ * Used when there are 3+ worktrees to avoid horizontal tab wrapping.
+ *
+ * Features:
+ * - Compact dropdown trigger showing current worktree with indicators
+ * - Grouped display (main branch + worktrees)
+ * - Full status indicators (PR, dev server, auto mode, changes)
+ * - Branch switch dropdown integration
+ * - Actions dropdown integration
+ * - Tooltip for truncated branch names
+ */
+export function WorktreeDropdown({
+  worktrees,
+  isWorktreeSelected,
+  hasRunningFeatures,
+  isActivating,
+  branchCardCounts,
+  isDevServerRunning,
+  isDevServerStarting,
+  getDevServerInfo,
+  isAutoModeRunningForWorktree,
+  isTestRunningForWorktree,
+  getTestSessionInfo,
+  onSelectWorktree,
+  // Branch switching props
+  branches,
+  filteredBranches,
+  branchFilter,
+  isLoadingBranches,
+  isSwitching,
+  onBranchDropdownOpenChange,
+  onBranchFilterChange,
+  onSwitchBranch,
+  onCreateBranch,
+  // Action dropdown props
+  isPulling,
+  isPushing,
+  isStartingAnyDevServer,
+  aheadCount,
+  behindCount,
+  hasRemoteBranch,
+  trackingRemote,
+  getTrackingRemote,
+  gitRepoStatus,
+  hasTestCommand,
+  isStartingTests,
+  hasInitScript,
+  onActionsDropdownOpenChange,
+  onPull,
+  onPush,
+  onPushNewBranch,
+  onOpenInEditor,
+  onOpenInIntegratedTerminal,
+  onOpenInExternalTerminal,
+  onViewChanges,
+  onViewCommits,
+  onDiscardChanges,
+  onCommit,
+  onCreatePR,
+  onChangePRNumber,
+  onAddressPRComments,
+  onAutoAddressPRComments,
+  onResolveConflicts,
+  onMerge,
+  onDeleteWorktree,
+  onStartDevServer,
+  onStopDevServer,
+  onOpenDevServerUrl,
+  onViewDevServerLogs,
+  onRunInitScript,
+  onToggleAutoMode,
+  onStartTests,
+  onStopTests,
+  onViewTestLogs,
+  onStashChanges,
+  onViewStashes,
+  onCherryPick,
+  onAbortOperation,
+  onContinueOperation,
+  onCreateConflictResolutionFeature,
+  remotesCache,
+  onPullWithRemote,
+  onPushWithRemote,
+  terminalScripts,
+  onRunTerminalScript,
+  onEditScripts,
+  isSyncing = false,
+  onSync,
+  onSyncWithRemote,
+  onSetTracking,
+  remotesWithBranch,
+  highlightTrigger = true,
+}: WorktreeDropdownProps) {
+  // Find the currently selected worktree to display in the trigger
+  const selectedWorktree = worktrees.find((w) => isWorktreeSelected(w));
+  const displayBranch =
+    selectedWorktree?.branch ??
+    (worktrees.length > 0 ? `+${worktrees.length} more` : 'Select worktree');
+  const { truncated: truncatedBranch, isTruncated: isBranchNameTruncated } = truncateBranchName(
+    displayBranch,
+    MAX_TRIGGER_BRANCH_NAME_LENGTH
+  );
+
+  // Separate main worktree from others for grouping
+  const mainWorktree = worktrees.find((w) => w.isMain);
+  const otherWorktrees = worktrees.filter((w) => !w.isMain);
+
+  // Get status info for selected worktree - memoized to prevent unnecessary recalculations
+  const selectedStatus = useMemo(() => {
+    if (!selectedWorktree) {
+      return {
+        devServerRunning: false,
+        devServerStarting: false,
+        devServerInfo: undefined,
+        autoModeRunning: false,
+        isRunning: false,
+        testRunning: false,
+        testSessionInfo: undefined,
+      };
+    }
+    return {
+      devServerRunning: isDevServerRunning(selectedWorktree),
+      devServerStarting: isDevServerStarting(selectedWorktree),
+      devServerInfo: getDevServerInfo(selectedWorktree),
+      autoModeRunning: isAutoModeRunningForWorktree(selectedWorktree),
+      isRunning: hasRunningFeatures(selectedWorktree),
+      testRunning: isTestRunningForWorktree(selectedWorktree),
+      testSessionInfo: getTestSessionInfo(selectedWorktree),
+    };
+  }, [
+    selectedWorktree,
+    isDevServerRunning,
+    isDevServerStarting,
+    getDevServerInfo,
+    isAutoModeRunningForWorktree,
+    hasRunningFeatures,
+    isTestRunningForWorktree,
+    getTestSessionInfo,
+  ]);
+
+  // Build trigger button with all indicators - memoized for performance
+  const triggerButton = useMemo(
+    () => (
+      <Button
+        variant={selectedWorktree && highlightTrigger ? 'default' : 'outline'}
+        size="sm"
+        className={cn(
+          'h-7 px-3 gap-1.5 font-mono text-xs min-w-0',
+          selectedWorktree &&
+            highlightTrigger &&
+            'bg-primary text-primary-foreground border-r-0 rounded-l-md rounded-r-none',
+          selectedWorktree &&
+            !highlightTrigger &&
+            'bg-secondary/50 hover:bg-secondary border-r-0 rounded-l-md rounded-r-none',
+          !selectedWorktree && 'bg-secondary/50 hover:bg-secondary rounded-md'
+        )}
+        disabled={isActivating}
+      >
+        {/* Running/Activating indicator */}
+        {(selectedStatus.isRunning || isActivating) && (
+          <Spinner
+            size="xs"
+            className="shrink-0"
+            variant={selectedWorktree && highlightTrigger ? 'foreground' : 'primary'}
+          />
+        )}
+
+        {/* Branch icon */}
+        <GitBranch className="w-3.5 h-3.5 shrink-0" />
+
+        {/* Branch name with optional tooltip */}
+        <span className="truncate max-w-[150px]">{truncatedBranch}</span>
+
+        {/* Card count badge */}
+        {selectedWorktree &&
+          branchCardCounts?.[selectedWorktree.branch] !== undefined &&
+          branchCardCounts[selectedWorktree.branch] > 0 && (
+            <span className="inline-flex items-center justify-center h-4 min-w-4 px-1 text-[10px] font-medium rounded bg-background/80 text-foreground border border-border shrink-0">
+              {branchCardCounts[selectedWorktree.branch]}
+            </span>
+          )}
+
+        {/* Uncommitted changes indicator */}
+        {selectedWorktree?.hasChanges && (
+          <span
+            className={cn(
+              'inline-flex items-center justify-center h-4 min-w-4 px-1 text-[10px] font-medium rounded border shrink-0',
+              getChangesBadgeStyles()
+            )}
+          >
+            <CircleDot className="w-2.5 h-2.5 mr-0.5" />
+            {selectedWorktree.changedFilesCount ?? '!'}
+          </span>
+        )}
+
+        {/* Dev server indicator - only shown when port is confirmed detected */}
+        {selectedStatus.devServerRunning && selectedStatus.devServerInfo?.urlDetected !== false && (
+          <span
+            className="inline-flex items-center justify-center h-4 w-4 text-green-500 shrink-0"
+            title={`Dev server running on port ${selectedStatus.devServerInfo?.port}`}
+          >
+            <Globe className="w-3 h-3" />
+          </span>
+        )}
+
+        {/* Dev server starting indicator */}
+        {selectedStatus.devServerStarting && (
+          <span
+            className="inline-flex items-center justify-center h-4 w-4 text-amber-500 shrink-0"
+            title="Dev server starting..."
+          >
+            <Spinner size="xs" variant="primary" />
+          </span>
+        )}
+
+        {/* Test running indicator */}
+        {selectedStatus.testRunning && (
+          <span
+            className="inline-flex items-center justify-center h-4 w-4 text-blue-500 shrink-0"
+            title="Tests Running"
+          >
+            <FlaskConical className="w-3 h-3 animate-pulse" />
+          </span>
+        )}
+
+        {/* Last test result indicator (when not running) */}
+        {!selectedStatus.testRunning && selectedStatus.testSessionInfo && (
+          <span
+            className={cn(
+              'inline-flex items-center justify-center h-4 w-4 shrink-0',
+              getTestStatusStyles(selectedStatus.testSessionInfo.status)
+            )}
+            title={`Last test: ${selectedStatus.testSessionInfo.status}`}
+          >
+            <FlaskConical className="w-3 h-3" />
+          </span>
+        )}
+
+        {/* Auto mode indicator */}
+        {selectedStatus.autoModeRunning && (
+          <span
+            className="flex items-center justify-center h-4 px-0.5 shrink-0"
+            title="Auto Mode Running"
+          >
+            <span className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
+          </span>
+        )}
+
+        {/* Conflict indicator */}
+        {selectedWorktree?.hasConflicts && (
+          <span
+            className={cn(
+              'inline-flex items-center justify-center h-4 min-w-4 px-1 text-[10px] font-medium rounded border shrink-0',
+              getConflictBadgeStyles()
+            )}
+            title={`${getConflictTypeLabel(selectedWorktree.conflictType)} conflicts detected`}
+          >
+            <AlertTriangle className="w-2.5 h-2.5 mr-0.5" />
+            {getConflictTypeLabel(selectedWorktree.conflictType)}
+          </span>
+        )}
+
+        {/* PR badge */}
+        {selectedWorktree?.pr && (
+          <span
+            className={cn(
+              'inline-flex items-center gap-0.5 h-4 px-1 text-[10px] font-medium rounded border shrink-0',
+              getPRBadgeStyles(selectedWorktree.pr.state)
+            )}
+          >
+            <GitPullRequest className="w-2.5 h-2.5" />#{selectedWorktree.pr.number}
+          </span>
+        )}
+
+        {/* Dropdown chevron */}
+        <ChevronDown className="w-3 h-3 shrink-0 ml-auto" />
+      </Button>
+    ),
+    [
+      isActivating,
+      selectedStatus,
+      truncatedBranch,
+      selectedWorktree,
+      branchCardCounts,
+      highlightTrigger,
+    ]
+  );
+
+  // Wrap trigger button with dropdown trigger first to ensure ref is passed correctly
+  const dropdownTrigger = <DropdownMenuTrigger asChild>{triggerButton}</DropdownMenuTrigger>;
+
+  const triggerWithTooltip = isBranchNameTruncated ? (
+    <Tooltip>
+      <TooltipTrigger asChild>{dropdownTrigger}</TooltipTrigger>
+      <TooltipContent>
+        <p className="font-mono text-xs">{displayBranch}</p>
+      </TooltipContent>
+    </Tooltip>
+  ) : (
+    dropdownTrigger
+  );
+
+  return (
+    <div className="flex items-center">
+      <DropdownMenu>
+        {triggerWithTooltip}
+        <DropdownMenuContent
+          align="start"
+          className="w-80 max-h-96 overflow-y-auto"
+          aria-label="Worktree selection"
+        >
+          {/* Main worktree section */}
+          {mainWorktree && (
+            <>
+              <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
+                Main Branch
+              </DropdownMenuLabel>
+              <WorktreeDropdownItem
+                worktree={mainWorktree}
+                isSelected={isWorktreeSelected(mainWorktree)}
+                isRunning={hasRunningFeatures(mainWorktree)}
+                cardCount={branchCardCounts?.[mainWorktree.branch]}
+                devServerRunning={isDevServerRunning(mainWorktree)}
+                devServerStarting={isDevServerStarting(mainWorktree)}
+                devServerInfo={getDevServerInfo(mainWorktree)}
+                isAutoModeRunning={isAutoModeRunningForWorktree(mainWorktree)}
+                isTestRunning={isTestRunningForWorktree(mainWorktree)}
+                testSessionInfo={getTestSessionInfo(mainWorktree)}
+                onSelect={() => onSelectWorktree(mainWorktree)}
+              />
+            </>
+          )}
+
+          {/* Other worktrees section */}
+          {otherWorktrees.length > 0 && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
+                Worktrees ({otherWorktrees.length})
+              </DropdownMenuLabel>
+              <DropdownMenuGroup>
+                {otherWorktrees.map((worktree) => (
+                  <WorktreeDropdownItem
+                    key={worktree.path}
+                    worktree={worktree}
+                    isSelected={isWorktreeSelected(worktree)}
+                    isRunning={hasRunningFeatures(worktree)}
+                    cardCount={branchCardCounts?.[worktree.branch]}
+                    devServerRunning={isDevServerRunning(worktree)}
+                    devServerStarting={isDevServerStarting(worktree)}
+                    devServerInfo={getDevServerInfo(worktree)}
+                    isAutoModeRunning={isAutoModeRunningForWorktree(worktree)}
+                    isTestRunning={isTestRunningForWorktree(worktree)}
+                    testSessionInfo={getTestSessionInfo(worktree)}
+                    onSelect={() => onSelectWorktree(worktree)}
+                  />
+                ))}
+              </DropdownMenuGroup>
+            </>
+          )}
+
+          {/* Empty state */}
+          {worktrees.length === 0 && (
+            <div className="px-2 py-4 text-center text-sm text-muted-foreground">
+              No worktrees available
+            </div>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {/* Branch switch dropdown for main branch (only when main is selected) */}
+      {selectedWorktree?.isMain && (
+        <BranchSwitchDropdown
+          worktree={selectedWorktree}
+          isSelected={highlightTrigger}
+          branches={branches}
+          filteredBranches={filteredBranches}
+          branchFilter={branchFilter}
+          isLoadingBranches={isLoadingBranches}
+          isSwitching={isSwitching}
+          onOpenChange={onBranchDropdownOpenChange(selectedWorktree)}
+          onFilterChange={onBranchFilterChange}
+          onSwitchBranch={onSwitchBranch}
+          onCreateBranch={onCreateBranch}
+        />
+      )}
+
+      {/* Actions dropdown for the selected worktree */}
+      {selectedWorktree && (
+        <WorktreeActionsDropdown
+          worktree={selectedWorktree}
+          isSelected={highlightTrigger}
+          aheadCount={aheadCount}
+          behindCount={behindCount}
+          hasRemoteBranch={hasRemoteBranch}
+          trackingRemote={
+            getTrackingRemote ? getTrackingRemote(selectedWorktree.path) : trackingRemote
+          }
+          isPulling={isPulling}
+          isPushing={isPushing}
+          isStartingAnyDevServer={isStartingAnyDevServer}
+          isDevServerStarting={isDevServerStarting(selectedWorktree)}
+          isDevServerRunning={isDevServerRunning(selectedWorktree)}
+          devServerInfo={getDevServerInfo(selectedWorktree)}
+          gitRepoStatus={gitRepoStatus}
+          isLoadingGitStatus={isLoadingBranches}
+          isAutoModeRunning={isAutoModeRunningForWorktree(selectedWorktree)}
+          hasTestCommand={hasTestCommand}
+          isStartingTests={isStartingTests}
+          isTestRunning={isTestRunningForWorktree(selectedWorktree)}
+          testSessionInfo={getTestSessionInfo(selectedWorktree)}
+          remotes={remotesCache?.[selectedWorktree.path]}
+          onOpenChange={onActionsDropdownOpenChange(selectedWorktree)}
+          onPull={onPull}
+          onPush={onPush}
+          onPushNewBranch={onPushNewBranch}
+          onPullWithRemote={onPullWithRemote}
+          onPushWithRemote={onPushWithRemote}
+          onOpenInEditor={onOpenInEditor}
+          onOpenInIntegratedTerminal={onOpenInIntegratedTerminal}
+          onOpenInExternalTerminal={onOpenInExternalTerminal}
+          onViewChanges={onViewChanges}
+          onViewCommits={onViewCommits}
+          onDiscardChanges={onDiscardChanges}
+          onCommit={onCommit}
+          onCreatePR={onCreatePR}
+          onChangePRNumber={onChangePRNumber}
+          onAddressPRComments={onAddressPRComments}
+          onAutoAddressPRComments={onAutoAddressPRComments}
+          onResolveConflicts={onResolveConflicts}
+          onMerge={onMerge}
+          onDeleteWorktree={onDeleteWorktree}
+          onStartDevServer={onStartDevServer}
+          onStopDevServer={onStopDevServer}
+          onOpenDevServerUrl={onOpenDevServerUrl}
+          onViewDevServerLogs={onViewDevServerLogs}
+          onRunInitScript={onRunInitScript}
+          onToggleAutoMode={onToggleAutoMode}
+          onStartTests={onStartTests}
+          onStopTests={onStopTests}
+          onViewTestLogs={onViewTestLogs}
+          onStashChanges={onStashChanges}
+          onViewStashes={onViewStashes}
+          onCherryPick={onCherryPick}
+          onAbortOperation={onAbortOperation}
+          onContinueOperation={onContinueOperation}
+          onCreateConflictResolutionFeature={onCreateConflictResolutionFeature}
+          hasInitScript={hasInitScript}
+          terminalScripts={terminalScripts}
+          onRunTerminalScript={onRunTerminalScript}
+          onEditScripts={onEditScripts}
+          isSyncing={isSyncing}
+          onSync={onSync}
+          onSyncWithRemote={onSyncWithRemote}
+          onSetTracking={onSetTracking}
+          remotesWithBranch={remotesWithBranch}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-indicator-utils.ts b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-indicator-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2c67659ce1b71294ce1cd12fbb4c0cc888beaf3f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-indicator-utils.ts
@@ -0,0 +1,94 @@
+/**
+ * Shared utility functions for worktree indicator styling and formatting.
+ * These utilities ensure consistent appearance across WorktreeTab, WorktreeDropdown,
+ * and WorktreeDropdownItem components.
+ */
+
+import type { PRInfo } from '../types';
+
+/**
+ * Truncates a branch name if it exceeds the maximum length.
+ * @param branchName - The full branch name
+ * @param maxLength - Maximum characters before truncation
+ * @returns Object with truncated name and whether truncation occurred
+ */
+export function truncateBranchName(
+  branchName: string,
+  maxLength: number
+): { truncated: string; isTruncated: boolean } {
+  const isTruncated = branchName.length > maxLength;
+  const truncated = isTruncated ? `${branchName.slice(0, maxLength)}...` : branchName;
+  return { truncated, isTruncated };
+}
+
+/**
+ * Returns the appropriate CSS classes for a PR badge based on PR state.
+ * @param state - The PR state (OPEN, MERGED, or CLOSED)
+ * @returns CSS class string for the badge
+ */
+export function getPRBadgeStyles(state: PRInfo['state']): string {
+  switch (state) {
+    case 'OPEN':
+      return 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/30';
+    case 'MERGED':
+      return 'bg-purple-500/15 text-purple-600 dark:text-purple-400 border-purple-500/30';
+    case 'CLOSED':
+    default:
+      return 'bg-rose-500/15 text-rose-600 dark:text-rose-400 border-rose-500/30';
+  }
+}
+
+/**
+ * Returns the CSS classes for the uncommitted changes badge.
+ * This is a constant style used across all worktree components.
+ */
+export function getChangesBadgeStyles(): string {
+  return 'bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30';
+}
+
+/**
+ * Returns the CSS classes for the conflict indicator badge.
+ * Uses red/destructive colors to indicate merge/rebase/cherry-pick conflicts.
+ */
+export function getConflictBadgeStyles(): string {
+  return 'bg-red-500/20 text-red-600 dark:text-red-400 border-red-500/30';
+}
+
+/**
+ * Returns a human-readable label for the conflict type.
+ */
+export function getConflictTypeLabel(conflictType?: 'merge' | 'rebase' | 'cherry-pick'): string {
+  switch (conflictType) {
+    case 'merge':
+      return 'Merge';
+    case 'rebase':
+      return 'Rebase';
+    case 'cherry-pick':
+      return 'Cherry-pick';
+    default:
+      return 'Conflict';
+  }
+}
+
+/** Possible test session status values */
+export type TestStatus = 'pending' | 'running' | 'passed' | 'failed' | 'cancelled';
+
+/**
+ * Returns the CSS classes for a test status indicator based on test result.
+ * @param status - The test session status
+ * @returns CSS class string for the indicator color
+ */
+export function getTestStatusStyles(status: TestStatus): string {
+  switch (status) {
+    case 'passed':
+      return 'text-green-500';
+    case 'failed':
+      return 'text-red-500';
+    case 'running':
+      return 'text-blue-500';
+    case 'pending':
+    case 'cancelled':
+    default:
+      return 'text-muted-foreground';
+  }
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-mobile-dropdown.tsx b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-mobile-dropdown.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..58836952d3646ac3028ef16db5f040809b7733cd
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-mobile-dropdown.tsx
@@ -0,0 +1,126 @@
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { GitBranch, ChevronDown, CircleDot, Check, Globe } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import type { WorktreeInfo, DevServerInfo } from '../types';
+
+interface WorktreeMobileDropdownProps {
+  worktrees: WorktreeInfo[];
+  isWorktreeSelected: (worktree: WorktreeInfo) => boolean;
+  hasRunningFeatures: (worktree: WorktreeInfo) => boolean;
+  isDevServerRunning: (worktree: WorktreeInfo) => boolean;
+  isDevServerStarting: (worktree: WorktreeInfo) => boolean;
+  getDevServerInfo: (worktree: WorktreeInfo) => DevServerInfo | undefined;
+  isActivating: boolean;
+  branchCardCounts?: Record<string, number>;
+  onSelectWorktree: (worktree: WorktreeInfo) => void;
+}
+
+export function WorktreeMobileDropdown({
+  worktrees,
+  isWorktreeSelected,
+  hasRunningFeatures,
+  isDevServerRunning,
+  isDevServerStarting,
+  getDevServerInfo,
+  isActivating,
+  branchCardCounts,
+  onSelectWorktree,
+}: WorktreeMobileDropdownProps) {
+  // Find the currently selected worktree to display in the trigger
+  const selectedWorktree = worktrees.find((w) => isWorktreeSelected(w));
+  const displayBranch = selectedWorktree?.branch || 'Select branch';
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 px-3 gap-2 font-mono text-xs bg-secondary/50 hover:bg-secondary flex-1 min-w-0"
+          disabled={isActivating}
+        >
+          <GitBranch className="w-3.5 h-3.5 shrink-0" />
+          <span className="truncate">{displayBranch}</span>
+          {isActivating ? (
+            <Spinner size="xs" className="shrink-0" />
+          ) : (
+            <ChevronDown className="w-3 h-3 shrink-0 ml-auto" />
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-64 max-h-80 overflow-y-auto">
+        <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
+          Branches & Worktrees
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {worktrees.map((worktree) => {
+          const isSelected = isWorktreeSelected(worktree);
+          const isRunning = hasRunningFeatures(worktree);
+          const devServerRunning = isDevServerRunning(worktree);
+          const devServerStarting = isDevServerStarting(worktree);
+          const devServerInfo = getDevServerInfo(worktree);
+          const cardCount = branchCardCounts?.[worktree.branch];
+          const hasChanges = worktree.hasChanges;
+          const changedFilesCount = worktree.changedFilesCount;
+
+          return (
+            <DropdownMenuItem
+              key={worktree.path}
+              onClick={() => onSelectWorktree(worktree)}
+              className={cn('flex items-center gap-2 cursor-pointer', isSelected && 'bg-accent')}
+            >
+              <div className="flex items-center gap-2 flex-1 min-w-0">
+                {isSelected ? (
+                  <Check className="w-3.5 h-3.5 shrink-0 text-primary" />
+                ) : (
+                  <div className="w-3.5 h-3.5 shrink-0" />
+                )}
+                {isRunning && <Spinner size="xs" className="shrink-0" />}
+                <span className={cn('font-mono text-xs truncate', isSelected && 'font-medium')}>
+                  {worktree.branch}
+                </span>
+                {worktree.isMain && (
+                  <span className="text-[10px] px-1 py-0.5 rounded bg-muted text-muted-foreground shrink-0">
+                    main
+                  </span>
+                )}
+              </div>
+              <div className="flex items-center gap-1.5 shrink-0">
+                {cardCount !== undefined && cardCount > 0 && (
+                  <span className="inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded bg-background/80 text-foreground border border-border">
+                    {cardCount}
+                  </span>
+                )}
+                {hasChanges && (
+                  <span
+                    className={cn(
+                      'inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border',
+                      'bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30'
+                    )}
+                    title={`${changedFilesCount ?? 'Some'} uncommitted file${changedFilesCount !== 1 ? 's' : ''}`}
+                  >
+                    <CircleDot className="w-2.5 h-2.5 mr-0.5" />
+                    {changedFilesCount ?? '!'}
+                  </span>
+                )}
+                {devServerRunning && devServerInfo?.urlDetected === true && (
+                  <Globe className="w-3 h-3 text-green-500" />
+                )}
+                {devServerStarting && <Spinner size="xs" variant="muted" />}
+              </div>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..20354ca66e1a8db3ab255924425fd49945088672
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/components/worktree-tab.tsx
@@ -0,0 +1,603 @@
+import type { JSX } from 'react';
+import { Button } from '@/components/ui/button';
+import { Globe, CircleDot, GitPullRequest, AlertTriangle } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useDroppable } from '@dnd-kit/core';
+import type {
+  WorktreeInfo,
+  BranchInfo,
+  DevServerInfo,
+  PRInfo,
+  GitRepoStatus,
+  TestSessionInfo,
+  MergeConflictInfo,
+} from '../types';
+import { BranchSwitchDropdown } from './branch-switch-dropdown';
+import { WorktreeActionsDropdown } from './worktree-actions-dropdown';
+import { getConflictBadgeStyles, getConflictTypeLabel } from './worktree-indicator-utils';
+
+interface WorktreeTabProps {
+  worktree: WorktreeInfo;
+  cardCount?: number; // Number of unarchived cards for this branch
+  hasChanges?: boolean; // Whether the worktree has uncommitted changes
+  changedFilesCount?: number; // Number of files with uncommitted changes
+  isSelected: boolean;
+  isRunning: boolean;
+  isActivating: boolean;
+  isDevServerRunning: boolean;
+  devServerInfo?: DevServerInfo;
+  branches: BranchInfo[];
+  filteredBranches: BranchInfo[];
+  branchFilter: string;
+  isLoadingBranches: boolean;
+  isSwitching: boolean;
+  isPulling: boolean;
+  isPushing: boolean;
+  isStartingAnyDevServer: boolean;
+  isDevServerStarting: boolean;
+  aheadCount: number;
+  behindCount: number;
+  hasRemoteBranch: boolean;
+  /** The name of the remote that the current branch is tracking (e.g. "origin"), if any */
+  trackingRemote?: string;
+  gitRepoStatus: GitRepoStatus;
+  /** Whether auto mode is running for this worktree */
+  isAutoModeRunning?: boolean;
+  /** Whether tests are being started for this worktree */
+  isStartingTests?: boolean;
+  /** Whether tests are currently running for this worktree */
+  isTestRunning?: boolean;
+  /** Active test session info for this worktree */
+  testSessionInfo?: TestSessionInfo;
+  onSelectWorktree: (worktree: WorktreeInfo) => void;
+  onBranchDropdownOpenChange: (open: boolean) => void;
+  onActionsDropdownOpenChange: (open: boolean) => void;
+  onBranchFilterChange: (value: string) => void;
+  onSwitchBranch: (worktree: WorktreeInfo, branchName: string) => void;
+  onCreateBranch: (worktree: WorktreeInfo) => void;
+  onPull: (worktree: WorktreeInfo) => void;
+  onPush: (worktree: WorktreeInfo) => void;
+  onPushNewBranch: (worktree: WorktreeInfo) => void;
+  onOpenInEditor: (worktree: WorktreeInfo, editorCommand?: string) => void;
+  onOpenInIntegratedTerminal: (worktree: WorktreeInfo, mode?: 'tab' | 'split') => void;
+  onOpenInExternalTerminal: (worktree: WorktreeInfo, terminalId?: string) => void;
+  onViewChanges: (worktree: WorktreeInfo) => void;
+  onViewCommits: (worktree: WorktreeInfo) => void;
+  onDiscardChanges: (worktree: WorktreeInfo) => void;
+  onCommit: (worktree: WorktreeInfo) => void;
+  onCreatePR: (worktree: WorktreeInfo) => void;
+  onChangePRNumber?: (worktree: WorktreeInfo) => void;
+  onAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
+  onAutoAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
+  onResolveConflicts: (worktree: WorktreeInfo) => void;
+  onMerge: (worktree: WorktreeInfo) => void;
+  onDeleteWorktree: (worktree: WorktreeInfo) => void;
+  onStartDevServer: (worktree: WorktreeInfo) => void;
+  onStopDevServer: (worktree: WorktreeInfo) => void;
+  onOpenDevServerUrl: (worktree: WorktreeInfo) => void;
+  onViewDevServerLogs: (worktree: WorktreeInfo) => void;
+  onRunInitScript: (worktree: WorktreeInfo) => void;
+  onToggleAutoMode?: (worktree: WorktreeInfo) => void;
+  /** Start running tests for this worktree */
+  onStartTests?: (worktree: WorktreeInfo) => void;
+  /** Stop running tests for this worktree */
+  onStopTests?: (worktree: WorktreeInfo) => void;
+  /** View test logs for this worktree */
+  onViewTestLogs?: (worktree: WorktreeInfo) => void;
+  /** Stash changes for this worktree */
+  onStashChanges?: (worktree: WorktreeInfo) => void;
+  /** View stashes for this worktree */
+  onViewStashes?: (worktree: WorktreeInfo) => void;
+  /** Cherry-pick commits from another branch */
+  onCherryPick?: (worktree: WorktreeInfo) => void;
+  /** Abort an in-progress merge/rebase/cherry-pick */
+  onAbortOperation?: (worktree: WorktreeInfo) => void;
+  /** Continue an in-progress merge/rebase/cherry-pick after resolving conflicts */
+  onContinueOperation?: (worktree: WorktreeInfo) => void;
+  /** Create a feature to resolve merge/rebase/cherry-pick conflicts with AI */
+  onCreateConflictResolutionFeature?: (conflictInfo: MergeConflictInfo) => void;
+  hasInitScript: boolean;
+  /** Whether a test command is configured in project settings */
+  hasTestCommand?: boolean;
+  /** List of available remotes for this worktree (used to show remote submenu) */
+  remotes?: Array<{ name: string; url: string }>;
+  /** Pull from a specific remote, bypassing the remote selection dialog */
+  onPullWithRemote?: (worktree: WorktreeInfo, remote: string) => void;
+  /** Push to a specific remote, bypassing the remote selection dialog */
+  onPushWithRemote?: (worktree: WorktreeInfo, remote: string) => void;
+  /** Terminal quick scripts configured for the project */
+  terminalScripts?: import('@/components/views/project-settings-view/terminal-scripts-constants').TerminalScript[];
+  /** Callback to run a terminal quick script in a new terminal session */
+  onRunTerminalScript?: (worktree: WorktreeInfo, command: string) => void;
+  /** Callback to open the script editor UI */
+  onEditScripts?: () => void;
+  /** Whether sync is in progress */
+  isSyncing?: boolean;
+  /** Sync (pull + push) callback */
+  onSync?: (worktree: WorktreeInfo) => void;
+  /** Sync with a specific remote */
+  onSyncWithRemote?: (worktree: WorktreeInfo, remote: string) => void;
+  /** Set tracking branch to a specific remote */
+  onSetTracking?: (worktree: WorktreeInfo, remote: string) => void;
+  /** List of remote names that have a branch matching the current branch name */
+  remotesWithBranch?: string[];
+  /** Available worktrees for swapping into this slot (non-main only) */
+  availableWorktreesForSwap?: WorktreeInfo[];
+  /** The slot index for this tab in the pinned list (0-based, excluding main) */
+  slotIndex?: number;
+  /** Callback when user swaps this slot to a different worktree */
+  onSwapWorktree?: (slotIndex: number, newBranch: string) => void;
+  /** List of currently pinned branch names (to show which are pinned in the swap dropdown) */
+  pinnedBranches?: string[];
+}
+
+export function WorktreeTab({
+  worktree,
+  cardCount,
+  hasChanges,
+  changedFilesCount,
+  isSelected,
+  isRunning,
+  isActivating,
+  isDevServerRunning,
+  devServerInfo,
+  branches,
+  filteredBranches,
+  branchFilter,
+  isLoadingBranches,
+  isSwitching,
+  isPulling,
+  isPushing,
+  isStartingAnyDevServer,
+  isDevServerStarting,
+  aheadCount,
+  behindCount,
+  hasRemoteBranch,
+  trackingRemote,
+  gitRepoStatus,
+  isAutoModeRunning = false,
+  isStartingTests = false,
+  isTestRunning = false,
+  testSessionInfo,
+  onSelectWorktree,
+  onBranchDropdownOpenChange,
+  onActionsDropdownOpenChange,
+  onBranchFilterChange,
+  onSwitchBranch,
+  onCreateBranch,
+  onPull,
+  onPush,
+  onPushNewBranch,
+  onOpenInEditor,
+  onOpenInIntegratedTerminal,
+  onOpenInExternalTerminal,
+  onViewChanges,
+  onViewCommits,
+  onDiscardChanges,
+  onCommit,
+  onCreatePR,
+  onChangePRNumber,
+  onAddressPRComments,
+  onAutoAddressPRComments,
+  onResolveConflicts,
+  onMerge,
+  onDeleteWorktree,
+  onStartDevServer,
+  onStopDevServer,
+  onOpenDevServerUrl,
+  onViewDevServerLogs,
+  onRunInitScript,
+  onToggleAutoMode,
+  onStartTests,
+  onStopTests,
+  onViewTestLogs,
+  onStashChanges,
+  onViewStashes,
+  onCherryPick,
+  onAbortOperation,
+  onContinueOperation,
+  onCreateConflictResolutionFeature,
+  hasInitScript,
+  hasTestCommand = false,
+  remotes,
+  onPullWithRemote,
+  onPushWithRemote,
+  terminalScripts,
+  onRunTerminalScript,
+  onEditScripts,
+  isSyncing = false,
+  onSync,
+  onSyncWithRemote,
+  onSetTracking,
+  remotesWithBranch,
+  availableWorktreesForSwap,
+  slotIndex,
+  onSwapWorktree,
+  pinnedBranches,
+}: WorktreeTabProps) {
+  // Make the worktree tab a drop target for feature cards
+  const { setNodeRef, isOver } = useDroppable({
+    id: `worktree-drop-${worktree.branch}`,
+    data: {
+      type: 'worktree',
+      branch: worktree.branch,
+      path: worktree.path,
+      isMain: worktree.isMain,
+    },
+  });
+  let prBadge: JSX.Element | null = null;
+  if (worktree.pr) {
+    const prState = worktree.pr.state?.toLowerCase() ?? 'open';
+    const prStateClasses = (() => {
+      // When selected (active tab), use high contrast solid background (paper-like)
+      if (isSelected) {
+        return 'bg-background text-foreground border-transparent shadow-sm';
+      }
+
+      // When not selected, use the colored variants
+      switch (prState) {
+        case 'open':
+        case 'reopened':
+          return 'bg-emerald-500/15 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 border-emerald-500/30 dark:border-emerald-500/40 hover:bg-emerald-500/25';
+        case 'draft':
+          return 'bg-amber-500/15 dark:bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30 dark:border-amber-500/40 hover:bg-amber-500/25';
+        case 'merged':
+          return 'bg-purple-500/15 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400 border-purple-500/30 dark:border-purple-500/40 hover:bg-purple-500/25';
+        case 'closed':
+          return 'bg-rose-500/15 dark:bg-rose-500/20 text-rose-600 dark:text-rose-400 border-rose-500/30 dark:border-rose-500/40 hover:bg-rose-500/25';
+        default:
+          return 'bg-muted text-muted-foreground border-border/60 hover:bg-muted/80';
+      }
+    })();
+
+    const prLabel = `Pull Request #${worktree.pr.number}, ${prState}${worktree.pr.title ? `: ${worktree.pr.title}` : ''}`;
+
+    // Helper to get status icon color for the selected state
+    const getStatusColorClass = () => {
+      if (!isSelected) return '';
+      switch (prState) {
+        case 'open':
+        case 'reopened':
+          return 'text-emerald-600 dark:text-emerald-500';
+        case 'draft':
+          return 'text-amber-600 dark:text-amber-500';
+        case 'merged':
+          return 'text-purple-600 dark:text-purple-500';
+        case 'closed':
+          return 'text-rose-600 dark:text-rose-500';
+        default:
+          return 'text-muted-foreground';
+      }
+    };
+
+    prBadge = (
+      <span
+        role="button"
+        tabIndex={0}
+        className={cn(
+          'ml-1.5 inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 text-[10px] font-medium transition-colors',
+          'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 focus:ring-offset-background',
+          'cursor-pointer hover:opacity-80 active:opacity-70',
+          prStateClasses
+        )}
+        title={`${prLabel} - Click to open`}
+        aria-label={`${prLabel} - Click to open pull request`}
+        onClick={(e) => {
+          e.stopPropagation(); // Prevent triggering worktree selection
+          if (worktree.pr?.url) {
+            window.open(worktree.pr.url, '_blank', 'noopener,noreferrer');
+          }
+        }}
+        onKeyDown={(e) => {
+          // Prevent event from bubbling to parent button
+          e.stopPropagation();
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (worktree.pr?.url) {
+              window.open(worktree.pr.url, '_blank', 'noopener,noreferrer');
+            }
+          }
+        }}
+      >
+        <GitPullRequest className={cn('w-3 h-3', getStatusColorClass())} aria-hidden="true" />
+        <span aria-hidden="true" className={isSelected ? 'text-foreground font-semibold' : ''}>
+          PR #{worktree.pr.number}
+        </span>
+        <span className={cn('capitalize', getStatusColorClass())} aria-hidden="true">
+          {prState}
+        </span>
+      </span>
+    );
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        'flex items-center rounded-md transition-all duration-150',
+        isOver && 'ring-2 ring-primary ring-offset-2 ring-offset-background scale-105'
+      )}
+    >
+      {worktree.isMain ? (
+        <>
+          <Button
+            variant={isSelected ? 'default' : 'outline'}
+            size="sm"
+            className={cn(
+              'h-7 px-3 text-xs font-mono gap-1.5 border-r-0 rounded-l-md rounded-r-none',
+              isSelected && 'bg-primary text-primary-foreground',
+              !isSelected && 'bg-secondary/50 hover:bg-secondary'
+            )}
+            onClick={() => onSelectWorktree(worktree)}
+            disabled={isActivating}
+            title={`Click to preview ${worktree.branch}`}
+            aria-label={worktree.branch}
+            data-testid={`worktree-branch-${worktree.branch}`}
+          >
+            {isRunning && <Spinner size="xs" variant={isSelected ? 'foreground' : 'primary'} />}
+            {isActivating && !isRunning && (
+              <Spinner size="xs" variant={isSelected ? 'foreground' : 'primary'} />
+            )}
+            {worktree.branch}
+            {cardCount !== undefined && cardCount > 0 && (
+              <span className="inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded bg-background/80 text-foreground border border-border">
+                {cardCount}
+              </span>
+            )}
+            {hasChanges && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span
+                    className={cn(
+                      'inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border',
+                      isSelected
+                        ? 'bg-amber-500 text-amber-950 border-amber-400'
+                        : 'bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30'
+                    )}
+                  >
+                    <CircleDot className="w-2.5 h-2.5 mr-0.5" />
+                    {changedFilesCount ?? '!'}
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>
+                    {changedFilesCount ?? 'Some'} uncommitted file
+                    {changedFilesCount !== 1 ? 's' : ''}
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            )}
+            {worktree.hasConflicts && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span
+                    className={cn(
+                      'inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border',
+                      isSelected ? 'bg-red-500 text-white border-red-400' : getConflictBadgeStyles()
+                    )}
+                  >
+                    <AlertTriangle className="w-2.5 h-2.5 mr-0.5" />
+                    {getConflictTypeLabel(worktree.conflictType)}
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>
+                    {getConflictTypeLabel(worktree.conflictType)} conflicts detected
+                    {worktree.conflictFiles && worktree.conflictFiles.length > 0
+                      ? ` (${worktree.conflictFiles.length} file${worktree.conflictFiles.length !== 1 ? 's' : ''})`
+                      : ''}
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            )}
+            {prBadge}
+          </Button>
+          <BranchSwitchDropdown
+            worktree={worktree}
+            isSelected={isSelected}
+            branches={branches}
+            filteredBranches={filteredBranches}
+            branchFilter={branchFilter}
+            isLoadingBranches={isLoadingBranches}
+            isSwitching={isSwitching}
+            onOpenChange={onBranchDropdownOpenChange}
+            onFilterChange={onBranchFilterChange}
+            onSwitchBranch={onSwitchBranch}
+            onCreateBranch={onCreateBranch}
+          />
+        </>
+      ) : (
+        <Button
+          variant={isSelected ? 'default' : 'outline'}
+          size="sm"
+          className={cn(
+            'h-7 px-3 text-xs font-mono gap-1.5 rounded-l-md rounded-r-none border-r-0',
+            isSelected && 'bg-primary text-primary-foreground',
+            !isSelected && 'bg-secondary/50 hover:bg-secondary',
+            !worktree.hasWorktree && !isSelected && 'opacity-70'
+          )}
+          onClick={() => onSelectWorktree(worktree)}
+          disabled={isActivating}
+          title={
+            worktree.hasWorktree
+              ? "Click to switch to this worktree's branch"
+              : 'Click to switch to this branch'
+          }
+        >
+          {isRunning && <Spinner size="xs" variant={isSelected ? 'foreground' : 'primary'} />}
+          {isActivating && !isRunning && (
+            <Spinner size="xs" variant={isSelected ? 'foreground' : 'primary'} />
+          )}
+          {worktree.branch}
+          {cardCount !== undefined && cardCount > 0 && (
+            <span className="inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded bg-background/80 text-foreground border border-border">
+              {cardCount}
+            </span>
+          )}
+          {hasChanges && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span
+                  className={cn(
+                    'inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border',
+                    isSelected
+                      ? 'bg-amber-500 text-amber-950 border-amber-400'
+                      : 'bg-amber-500/20 text-amber-600 dark:text-amber-400 border-amber-500/30'
+                  )}
+                >
+                  <CircleDot className="w-2.5 h-2.5 mr-0.5" />
+                  {changedFilesCount ?? '!'}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>
+                  {changedFilesCount ?? 'Some'} uncommitted file
+                  {changedFilesCount !== 1 ? 's' : ''}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          )}
+          {worktree.hasConflicts && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span
+                  className={cn(
+                    'inline-flex items-center justify-center h-4 min-w-[1rem] px-1 text-[10px] font-medium rounded border',
+                    isSelected ? 'bg-red-500 text-white border-red-400' : getConflictBadgeStyles()
+                  )}
+                >
+                  <AlertTriangle className="w-2.5 h-2.5 mr-0.5" />
+                  {getConflictTypeLabel(worktree.conflictType)}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>
+                  {getConflictTypeLabel(worktree.conflictType)} conflicts detected
+                  {worktree.conflictFiles && worktree.conflictFiles.length > 0
+                    ? ` (${worktree.conflictFiles.length} file${worktree.conflictFiles.length !== 1 ? 's' : ''})`
+                    : ''}
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          )}
+          {prBadge}
+        </Button>
+      )}
+
+      {isDevServerRunning && devServerInfo?.urlDetected !== false && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant={isSelected ? 'default' : 'outline'}
+              size="sm"
+              className={cn(
+                'h-7 w-7 p-0 rounded-none border-r-0',
+                isSelected && 'bg-primary text-primary-foreground',
+                !isSelected && 'bg-secondary/50 hover:bg-secondary',
+                'text-green-500'
+              )}
+              onClick={() => onOpenDevServerUrl(worktree)}
+              aria-label={`Open dev server on port ${devServerInfo?.port} in browser`}
+            >
+              <Globe className="w-3 h-3" aria-hidden="true" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Open dev server (:{devServerInfo?.port})</p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+
+      {isAutoModeRunning && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span
+              className={cn(
+                'flex items-center justify-center h-7 px-1.5 rounded-none border-r-0',
+                isSelected ? 'bg-primary text-primary-foreground' : 'bg-secondary/50'
+              )}
+            >
+              <span className="h-2 w-2 rounded-full bg-green-500 animate-pulse" />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Auto Mode Running</p>
+          </TooltipContent>
+        </Tooltip>
+      )}
+
+      <WorktreeActionsDropdown
+        worktree={worktree}
+        isSelected={isSelected}
+        aheadCount={aheadCount}
+        behindCount={behindCount}
+        hasRemoteBranch={hasRemoteBranch}
+        trackingRemote={trackingRemote}
+        isPulling={isPulling}
+        isPushing={isPushing}
+        isStartingAnyDevServer={isStartingAnyDevServer}
+        isDevServerStarting={isDevServerStarting}
+        isDevServerRunning={isDevServerRunning}
+        devServerInfo={devServerInfo}
+        gitRepoStatus={gitRepoStatus}
+        isLoadingGitStatus={isLoadingBranches}
+        isAutoModeRunning={isAutoModeRunning}
+        hasTestCommand={hasTestCommand}
+        isStartingTests={isStartingTests}
+        isTestRunning={isTestRunning}
+        testSessionInfo={testSessionInfo}
+        remotes={remotes}
+        onOpenChange={onActionsDropdownOpenChange}
+        onPull={onPull}
+        onPush={onPush}
+        onPushNewBranch={onPushNewBranch}
+        onPullWithRemote={onPullWithRemote}
+        onPushWithRemote={onPushWithRemote}
+        onOpenInEditor={onOpenInEditor}
+        onOpenInIntegratedTerminal={onOpenInIntegratedTerminal}
+        onOpenInExternalTerminal={onOpenInExternalTerminal}
+        onViewChanges={onViewChanges}
+        onViewCommits={onViewCommits}
+        onDiscardChanges={onDiscardChanges}
+        onCommit={onCommit}
+        onCreatePR={onCreatePR}
+        onChangePRNumber={onChangePRNumber}
+        onAddressPRComments={onAddressPRComments}
+        onAutoAddressPRComments={onAutoAddressPRComments}
+        onResolveConflicts={onResolveConflicts}
+        onMerge={onMerge}
+        onDeleteWorktree={onDeleteWorktree}
+        onStartDevServer={onStartDevServer}
+        onStopDevServer={onStopDevServer}
+        onOpenDevServerUrl={onOpenDevServerUrl}
+        onViewDevServerLogs={onViewDevServerLogs}
+        onRunInitScript={onRunInitScript}
+        onToggleAutoMode={onToggleAutoMode}
+        onStartTests={onStartTests}
+        onStopTests={onStopTests}
+        onViewTestLogs={onViewTestLogs}
+        onStashChanges={onStashChanges}
+        onViewStashes={onViewStashes}
+        onCherryPick={onCherryPick}
+        onAbortOperation={onAbortOperation}
+        onContinueOperation={onContinueOperation}
+        onCreateConflictResolutionFeature={onCreateConflictResolutionFeature}
+        hasInitScript={hasInitScript}
+        terminalScripts={terminalScripts}
+        onRunTerminalScript={onRunTerminalScript}
+        onEditScripts={onEditScripts}
+        isSyncing={isSyncing}
+        onSync={onSync}
+        onSyncWithRemote={onSyncWithRemote}
+        onSetTracking={onSetTracking}
+        remotesWithBranch={remotesWithBranch}
+        availableWorktreesForSwap={availableWorktreesForSwap}
+        slotIndex={slotIndex}
+        onSwapWorktree={onSwapWorktree}
+        pinnedBranches={pinnedBranches}
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/index.ts b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4f7c0c6a33d1ccde2197aa3cde3b70ab1dc37a32
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/index.ts
@@ -0,0 +1,7 @@
+export { useWorktrees } from './use-worktrees';
+export { useDevServers } from './use-dev-servers';
+export { useDevServerLogs } from './use-dev-server-logs';
+export { useBranches } from './use-branches';
+export { useWorktreeActions } from './use-worktree-actions';
+export { useRunningFeatures } from './use-running-features';
+export { useAvailableEditors, useEffectiveDefaultEditor } from './use-available-editors';
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-available-editors.ts b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-available-editors.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ef756ff99fe386736172ae5f569c2ba99f07b081
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-available-editors.ts
@@ -0,0 +1,85 @@
+import { useMemo, useCallback } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { useAppStore } from '@/store/app-store';
+import { useAvailableEditors as useAvailableEditorsQuery } from '@/hooks/queries';
+import { queryKeys } from '@/lib/query-keys';
+import type { EditorInfo } from '@automaker/types';
+
+// Re-export EditorInfo for convenience
+export type { EditorInfo };
+
+/**
+ * Hook for fetching and managing available editors
+ *
+ * Uses React Query for data fetching with caching.
+ * Provides a refresh function that clears server cache and re-detects editors.
+ */
+export function useAvailableEditors() {
+  const queryClient = useQueryClient();
+  const { data: editors = [], isLoading } = useAvailableEditorsQuery();
+
+  /**
+   * Mutation to refresh editors by clearing the server cache and re-detecting
+   * Use this when the user has installed/uninstalled editors
+   */
+  const { mutate: refreshMutate, isPending: isRefreshing } = useMutation({
+    mutationFn: async () => {
+      const api = getElectronAPI();
+      if (!api.worktree) {
+        throw new Error('Worktree API not available');
+      }
+      const result = await api.worktree.refreshEditors();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to refresh editors');
+      }
+      return result.result?.editors ?? [];
+    },
+    onSuccess: (newEditors) => {
+      // Update the cache with new editors
+      queryClient.setQueryData(queryKeys.worktrees.editors(), newEditors);
+    },
+  });
+
+  const refresh = useCallback(() => {
+    refreshMutate();
+  }, [refreshMutate]);
+
+  return {
+    editors,
+    isLoading,
+    isRefreshing,
+    refresh,
+    // Convenience property: has multiple editors (for deciding whether to show submenu)
+    hasMultipleEditors: editors.length > 1,
+    // The first editor is the "default" one
+    defaultEditor: editors[0] ?? null,
+  };
+}
+
+/**
+ * Hook to get the effective default editor based on user settings
+ * Falls back to: Cursor > VS Code > first available editor
+ */
+export function useEffectiveDefaultEditor(editors: EditorInfo[]): EditorInfo | null {
+  const defaultEditorCommand = useAppStore((s) => s.defaultEditorCommand);
+
+  return useMemo(() => {
+    if (editors.length === 0) return null;
+
+    // If user has a saved preference and it exists in available editors, use it
+    if (defaultEditorCommand) {
+      const found = editors.find((e) => e.command === defaultEditorCommand);
+      if (found) return found;
+    }
+
+    // Auto-detect: prefer Cursor, then VS Code, then first available
+    const cursor = editors.find((e) => e.command === 'cursor');
+    if (cursor) return cursor;
+
+    const vscode = editors.find((e) => e.command === 'code');
+    if (vscode) return vscode;
+
+    return editors[0];
+  }, [editors, defaultEditorCommand]);
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-available-terminals.ts b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-available-terminals.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b719183d9637543b5cbd3a9104307e039cb7c44f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-available-terminals.ts
@@ -0,0 +1,99 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { getElectronAPI } from '@/lib/electron';
+import { useAppStore } from '@/store/app-store';
+import type { TerminalInfo } from '@automaker/types';
+
+const logger = createLogger('AvailableTerminals');
+
+// Re-export TerminalInfo for convenience
+export type { TerminalInfo };
+
+export function useAvailableTerminals() {
+  const [terminals, setTerminals] = useState<TerminalInfo[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const fetchAvailableTerminals = useCallback(async () => {
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.getAvailableTerminals) {
+        setIsLoading(false);
+        return;
+      }
+      const result = await api.worktree.getAvailableTerminals();
+      if (result.success && result.result?.terminals) {
+        setTerminals(result.result.terminals);
+      }
+    } catch (error) {
+      logger.error('Failed to fetch available terminals:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  /**
+   * Refresh terminals by clearing the server cache and re-detecting
+   * Use this when the user has installed/uninstalled terminals
+   */
+  const refresh = useCallback(async () => {
+    setIsRefreshing(true);
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.refreshTerminals) {
+        // Fallback to regular fetch if refresh not available
+        await fetchAvailableTerminals();
+        return;
+      }
+      const result = await api.worktree.refreshTerminals();
+      if (result.success && result.result?.terminals) {
+        setTerminals(result.result.terminals);
+        logger.info(`Terminal cache refreshed, found ${result.result.terminals.length} terminals`);
+      }
+    } catch (error) {
+      logger.error('Failed to refresh terminals:', error);
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [fetchAvailableTerminals]);
+
+  useEffect(() => {
+    fetchAvailableTerminals();
+  }, [fetchAvailableTerminals]);
+
+  return {
+    terminals,
+    isLoading,
+    isRefreshing,
+    refresh,
+    // Convenience property: has external terminals available
+    hasExternalTerminals: terminals.length > 0,
+    // The first terminal is the "default" one (highest priority)
+    defaultTerminal: terminals[0] ?? null,
+  };
+}
+
+/**
+ * Hook to get the effective default terminal based on user settings
+ * Returns null if user prefers integrated terminal (defaultTerminalId is null)
+ * Falls back to: user preference > first available external terminal
+ */
+export function useEffectiveDefaultTerminal(terminals: TerminalInfo[]): TerminalInfo | null {
+  const defaultTerminalId = useAppStore((s) => s.defaultTerminalId);
+
+  return useMemo(() => {
+    // If user hasn't set a preference (null/undefined), they prefer integrated terminal
+    if (defaultTerminalId == null) {
+      return null;
+    }
+
+    // If user has set a preference, find it in available terminals
+    if (defaultTerminalId) {
+      const found = terminals.find((t) => t.id === defaultTerminalId);
+      if (found) return found;
+    }
+
+    // If the saved preference doesn't exist anymore, fall back to first available
+    return terminals[0] ?? null;
+  }, [terminals, defaultTerminalId]);
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-branches.ts b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-branches.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4b756acdb97cb6b57120e551feadeee4f2b99ea1
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-branches.ts
@@ -0,0 +1,134 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { useWorktreeBranches } from '@/hooks/queries';
+import type { GitRepoStatus } from '../types';
+
+/** Explicit return type for the useBranches hook */
+export interface UseBranchesReturn {
+  branches: Array<{ name: string; isCurrent: boolean; isRemote: boolean }>;
+  filteredBranches: Array<{ name: string; isCurrent: boolean; isRemote: boolean }>;
+  aheadCount: number;
+  behindCount: number;
+  hasRemoteBranch: boolean;
+  /**
+   * @deprecated Use {@link getTrackingRemote}(worktreePath) instead — this value
+   * only reflects the last-queried worktree and is unreliable when multiple panels
+   * share the hook.
+   */
+  trackingRemote: string | undefined;
+  /** Per-worktree tracking remote lookup — avoids stale values when multiple panels share the hook */
+  getTrackingRemote: (worktreePath: string) => string | undefined;
+  /** List of remote names that have a branch matching the current branch name */
+  remotesWithBranch: string[];
+  isLoadingBranches: boolean;
+  branchFilter: string;
+  setBranchFilter: (filter: string) => void;
+  resetBranchFilter: () => void;
+  fetchBranches: (worktreePath: string) => void;
+  /** Prune cached tracking-remote entries for worktree paths that no longer exist */
+  pruneStaleEntries: (activePaths: Set<string>) => void;
+  gitRepoStatus: GitRepoStatus;
+}
+
+/**
+ * Hook for managing branch data with React Query
+ *
+ * Uses useWorktreeBranches for data fetching while maintaining
+ * the current interface for backward compatibility. Tracks which
+ * worktree path is currently being viewed and fetches branches on demand.
+ */
+export function useBranches(): UseBranchesReturn {
+  const [currentWorktreePath, setCurrentWorktreePath] = useState<string | undefined>();
+  const [branchFilter, setBranchFilter] = useState('');
+
+  const {
+    data: branchData,
+    isLoading: isLoadingBranches,
+    refetch,
+  } = useWorktreeBranches(currentWorktreePath, true);
+
+  const branches = branchData?.branches ?? [];
+  const aheadCount = branchData?.aheadCount ?? 0;
+  const behindCount = branchData?.behindCount ?? 0;
+  const hasRemoteBranch = branchData?.hasRemoteBranch ?? false;
+  const trackingRemote = branchData?.trackingRemote;
+  const remotesWithBranch = branchData?.remotesWithBranch ?? [];
+
+  // Per-worktree tracking remote cache: keeps results from previous fetchBranches()
+  // calls so multiple WorktreePanel instances don't all share a single stale value.
+  const trackingRemoteByPathRef = useRef<Record<string, string | undefined>>({});
+
+  // Update cache whenever query data changes for the current path
+  useEffect(() => {
+    if (currentWorktreePath && branchData) {
+      trackingRemoteByPathRef.current[currentWorktreePath] = branchData.trackingRemote;
+    }
+  }, [currentWorktreePath, branchData]);
+
+  const getTrackingRemote = useCallback(
+    (worktreePath: string): string | undefined => {
+      // If asking about the currently active query path, use fresh data
+      if (worktreePath === currentWorktreePath) {
+        return trackingRemote;
+      }
+      // Otherwise fall back to the cached value from a previous fetch
+      return trackingRemoteByPathRef.current[worktreePath];
+    },
+    [currentWorktreePath, trackingRemote]
+  );
+
+  // Use conservative defaults (false) until data is confirmed
+  // This prevents the UI from assuming git capabilities before the query completes
+  const gitRepoStatus: GitRepoStatus = {
+    isGitRepo: branchData?.isGitRepo ?? false,
+    hasCommits: branchData?.hasCommits ?? false,
+  };
+
+  const fetchBranches = useCallback(
+    (worktreePath: string) => {
+      if (worktreePath === currentWorktreePath) {
+        // Same path - just refetch to get latest data
+        refetch();
+      } else {
+        // Different path - update the tracked path (triggers new query)
+        setCurrentWorktreePath(worktreePath);
+      }
+    },
+    [currentWorktreePath, refetch]
+  );
+
+  const resetBranchFilter = useCallback(() => {
+    setBranchFilter('');
+  }, []);
+
+  /** Remove cached tracking-remote entries for worktree paths that no longer exist. */
+  const pruneStaleEntries = useCallback((activePaths: Set<string>) => {
+    const cache = trackingRemoteByPathRef.current;
+    for (const key of Object.keys(cache)) {
+      if (!activePaths.has(key)) {
+        delete cache[key];
+      }
+    }
+  }, []);
+
+  const filteredBranches = branches.filter((b) =>
+    b.name.toLowerCase().includes(branchFilter.toLowerCase())
+  );
+
+  return {
+    branches,
+    filteredBranches,
+    aheadCount,
+    behindCount,
+    hasRemoteBranch,
+    trackingRemote,
+    getTrackingRemote,
+    remotesWithBranch,
+    isLoadingBranches,
+    branchFilter,
+    setBranchFilter,
+    resetBranchFilter,
+    fetchBranches,
+    pruneStaleEntries,
+    gitRepoStatus,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-default-editor.ts b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-default-editor.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b074800122c05d79470dfbe6c0b607195135022
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-default-editor.ts
@@ -0,0 +1,32 @@
+import { useState, useEffect, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { getElectronAPI } from '@/lib/electron';
+
+const logger = createLogger('DefaultEditor');
+
+export function useDefaultEditor() {
+  const [defaultEditorName, setDefaultEditorName] = useState<string>('Editor');
+
+  const fetchDefaultEditor = useCallback(async () => {
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.getDefaultEditor) {
+        return;
+      }
+      const result = await api.worktree.getDefaultEditor();
+      if (result.success && result.result?.editorName) {
+        setDefaultEditorName(result.result.editorName);
+      }
+    } catch (error) {
+      logger.error('Failed to fetch default editor:', error);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchDefaultEditor();
+  }, [fetchDefaultEditor]);
+
+  return {
+    defaultEditorName,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-server-logs.ts b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-server-logs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..797f55c43ca2c52fe6829fbc2e151fe227f540f0
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-server-logs.ts
@@ -0,0 +1,327 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { getElectronAPI } from '@/lib/electron';
+import { pathsEqual } from '@/lib/utils';
+
+const logger = createLogger('DevServerLogs');
+
+// Maximum log buffer size (characters) - matches server-side MAX_SCROLLBACK_SIZE
+const MAX_LOG_BUFFER_SIZE = 50_000; // ~50KB
+
+export interface DevServerLogState {
+  /** The log content (buffered + live) */
+  logs: string;
+  /** Incremented whenever logs content changes (including trim+shift) */
+  logsVersion: number;
+  /** True when the latest append caused head truncation */
+  didTrim: boolean;
+  /** Whether the server is currently running */
+  isRunning: boolean;
+  /** Whether initial logs are being fetched */
+  isLoading: boolean;
+  /** Error message if fetching logs failed */
+  error: string | null;
+  /** Server port (if running) */
+  port: number | null;
+  /** Server URL (if running) */
+  url: string | null;
+  /** Timestamp when the server started */
+  startedAt: string | null;
+  /** Exit code (if server stopped) */
+  exitCode: number | null;
+  /** Error message from server (if stopped with error) */
+  serverError: string | null;
+}
+
+interface UseDevServerLogsOptions {
+  /** Path to the worktree to monitor logs for */
+  worktreePath: string | null;
+  /** Whether to automatically subscribe to log events (default: true) */
+  autoSubscribe?: boolean;
+}
+
+/**
+ * Hook to subscribe to dev server log events and manage log state.
+ *
+ * This hook:
+ * 1. Fetches initial buffered logs from the server
+ * 2. Subscribes to WebSocket events for real-time log streaming
+ * 3. Handles server started/stopped events
+ * 4. Provides log state for rendering in a panel
+ *
+ * @example
+ * ```tsx
+ * const { logs, isRunning, isLoading } = useDevServerLogs({
+ *   worktreePath: '/path/to/worktree'
+ * });
+ * ```
+ */
+export function useDevServerLogs({ worktreePath, autoSubscribe = true }: UseDevServerLogsOptions) {
+  const [state, setState] = useState<DevServerLogState>({
+    logs: '',
+    logsVersion: 0,
+    didTrim: false,
+    isRunning: false,
+    isLoading: false,
+    error: null,
+    port: null,
+    url: null,
+    startedAt: null,
+    exitCode: null,
+    serverError: null,
+  });
+
+  // Keep track of whether we've fetched initial logs
+  const hasFetchedInitialLogs = useRef(false);
+
+  // Buffer for batching rapid output events into fewer setState calls.
+  // Content accumulates here and is flushed via requestAnimationFrame,
+  // ensuring at most one React re-render per animation frame (~60fps max).
+  // A fallback setTimeout ensures the buffer is flushed even when RAF is
+  // throttled (e.g., when the tab is in the background).
+  const pendingOutputRef = useRef('');
+  const rafIdRef = useRef<number | null>(null);
+  const timerIdRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const resetPendingOutput = useCallback(() => {
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = null;
+    }
+    if (timerIdRef.current !== null) {
+      clearTimeout(timerIdRef.current);
+      timerIdRef.current = null;
+    }
+    pendingOutputRef.current = '';
+  }, []);
+
+  /**
+   * Fetch buffered logs from the server
+   */
+  const fetchLogs = useCallback(async () => {
+    if (!worktreePath) return;
+
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.getDevServerLogs) {
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: 'Dev server logs API not available',
+        }));
+        return;
+      }
+
+      const result = await api.worktree.getDevServerLogs(worktreePath);
+
+      if (result.success && result.result) {
+        setState((prev) => ({
+          ...prev,
+          logs: result.result!.logs,
+          isRunning: true,
+          isLoading: false,
+          port: result.result!.port,
+          url: result.result!.url,
+          startedAt: result.result!.startedAt,
+          error: null,
+        }));
+        hasFetchedInitialLogs.current = true;
+      } else {
+        // Server might not be running - this is not necessarily an error
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          isRunning: false,
+          error: result.error || null,
+        }));
+      }
+    } catch (error) {
+      logger.error('Failed to fetch dev server logs:', error);
+      setState((prev) => ({
+        ...prev,
+        isLoading: false,
+        error: error instanceof Error ? error.message : 'Failed to fetch logs',
+      }));
+    }
+  }, [worktreePath]);
+
+  /**
+   * Clear logs and reset state
+   */
+  const clearLogs = useCallback(() => {
+    resetPendingOutput();
+    setState({
+      logs: '',
+      logsVersion: 0,
+      didTrim: false,
+      isRunning: false,
+      isLoading: false,
+      error: null,
+      port: null,
+      url: null,
+      startedAt: null,
+      exitCode: null,
+      serverError: null,
+    });
+    hasFetchedInitialLogs.current = false;
+  }, [resetPendingOutput]);
+
+  const flushPendingOutput = useCallback(() => {
+    // Clear both scheduling handles to prevent duplicate flushes
+    rafIdRef.current = null;
+    if (timerIdRef.current !== null) {
+      clearTimeout(timerIdRef.current);
+      timerIdRef.current = null;
+    }
+    const content = pendingOutputRef.current;
+    if (!content) return;
+    pendingOutputRef.current = '';
+
+    setState((prev) => {
+      const combined = prev.logs + content;
+      const didTrim = combined.length > MAX_LOG_BUFFER_SIZE;
+      let newLogs = combined;
+      if (didTrim) {
+        const slicePoint = combined.length - MAX_LOG_BUFFER_SIZE;
+        // Find the next newline after the slice point to avoid cutting a line in half
+        const firstNewlineIndex = combined.indexOf('\n', slicePoint);
+        newLogs = combined.slice(firstNewlineIndex > -1 ? firstNewlineIndex + 1 : slicePoint);
+      }
+      return {
+        ...prev,
+        logs: newLogs,
+        didTrim,
+        logsVersion: prev.logsVersion + 1,
+      };
+    });
+  }, []);
+
+  /**
+   * Append content to logs, enforcing a maximum buffer size to prevent
+   * unbounded memory growth and progressive UI lag.
+   *
+   * Uses requestAnimationFrame to batch rapid output events into at most
+   * one React state update per frame, preventing excessive re-renders.
+   * A fallback setTimeout(250ms) ensures the buffer is flushed even when
+   * RAF is throttled (e.g., when the tab is in the background).
+   * If the pending buffer reaches MAX_LOG_BUFFER_SIZE, flushes immediately
+   * to prevent unbounded memory growth.
+   */
+  const appendLogs = useCallback(
+    (content: string) => {
+      pendingOutputRef.current += content;
+
+      // Flush immediately if buffer has reached the size limit
+      if (pendingOutputRef.current.length >= MAX_LOG_BUFFER_SIZE) {
+        flushPendingOutput();
+        return;
+      }
+
+      // Schedule a RAF flush if not already scheduled
+      if (rafIdRef.current === null) {
+        rafIdRef.current = requestAnimationFrame(flushPendingOutput);
+      }
+
+      // Schedule a fallback timer flush if not already scheduled,
+      // to handle cases where RAF is throttled (background tab)
+      if (timerIdRef.current === null) {
+        timerIdRef.current = setTimeout(flushPendingOutput, 250);
+      }
+    },
+    [flushPendingOutput]
+  );
+
+  // Clean up pending RAF on unmount to prevent state updates after unmount
+  useEffect(() => {
+    return () => {
+      resetPendingOutput();
+    };
+  }, [resetPendingOutput]);
+
+  // Fetch initial logs when worktreePath changes
+  useEffect(() => {
+    if (worktreePath && autoSubscribe) {
+      hasFetchedInitialLogs.current = false;
+      fetchLogs();
+    } else {
+      clearLogs();
+    }
+  }, [worktreePath, autoSubscribe, fetchLogs, clearLogs]);
+
+  // Subscribe to WebSocket events
+  useEffect(() => {
+    if (!worktreePath || !autoSubscribe) return;
+
+    const api = getElectronAPI();
+    if (!api?.worktree?.onDevServerLogEvent) {
+      logger.warn('Dev server log event API not available');
+      return;
+    }
+
+    const unsubscribe = api.worktree.onDevServerLogEvent((event) => {
+      // Filter events to only handle those for our worktree
+      if (!pathsEqual(event.payload.worktreePath, worktreePath)) return;
+
+      switch (event.type) {
+        case 'dev-server:started': {
+          resetPendingOutput();
+          const { payload } = event;
+          logger.info('Dev server started:', payload);
+          setState((prev) => ({
+            ...prev,
+            isRunning: true,
+            port: payload.port,
+            url: payload.url,
+            startedAt: payload.timestamp,
+            exitCode: null,
+            serverError: null,
+            // Clear logs on restart
+            logs: '',
+          }));
+          hasFetchedInitialLogs.current = false;
+          break;
+        }
+        case 'dev-server:output': {
+          const { payload } = event;
+          // Append the new output to existing logs
+          if (payload.content) {
+            appendLogs(payload.content);
+          }
+          break;
+        }
+        case 'dev-server:stopped': {
+          const { payload } = event;
+          logger.info('Dev server stopped:', payload);
+          setState((prev) => ({
+            ...prev,
+            isRunning: false,
+            exitCode: payload.exitCode,
+            serverError: payload.error ?? null,
+          }));
+          break;
+        }
+        case 'dev-server:url-detected': {
+          const { payload } = event;
+          logger.info('Dev server URL detected:', payload);
+          setState((prev) => ({
+            ...prev,
+            url: payload.url,
+            port: payload.port,
+          }));
+          break;
+        }
+      }
+    });
+
+    return unsubscribe;
+  }, [worktreePath, autoSubscribe, appendLogs, resetPendingOutput]);
+
+  return {
+    ...state,
+    fetchLogs,
+    clearLogs,
+    appendLogs,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-servers.ts b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-servers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ccf2caa9e07c5e7dda33af12786ff3c4ba6aead4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-dev-servers.ts
@@ -0,0 +1,607 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { getElectronAPI } from '@/lib/electron';
+import { normalizePath } from '@/lib/utils';
+import { toast } from 'sonner';
+import type { DevServerInfo, WorktreeInfo } from '../types';
+import { useEventRecencyStore } from '@/hooks/use-event-recency';
+
+const logger = createLogger('DevServers');
+
+// Timeout (ms) for port detection before showing a warning to the user
+const PORT_DETECTION_TIMEOUT_MS = 30_000;
+// Interval (ms) for periodic state reconciliation with the backend.
+// 30 seconds is sufficient since WebSocket events handle real-time updates;
+// reconciliation is only a fallback for missed events (PWA restart, WS gaps).
+// The previous 5-second interval added unnecessary HTTP pressure.
+const STATE_RECONCILE_INTERVAL_MS = 30_000;
+
+interface UseDevServersOptions {
+  projectPath: string;
+}
+
+/**
+ * Helper to build the browser-accessible dev server URL by rewriting the hostname
+ * to match the current window's hostname (supports remote access).
+ * Returns null if the URL is invalid or uses an unsupported protocol.
+ */
+function buildDevServerBrowserUrl(serverUrl: string): string | null {
+  try {
+    const devServerUrl = new URL(serverUrl);
+    // Security: Only allow http/https protocols
+    if (devServerUrl.protocol !== 'http:' && devServerUrl.protocol !== 'https:') {
+      return null;
+    }
+    devServerUrl.hostname = window.location.hostname;
+    return devServerUrl.toString();
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Show a toast notification for a detected dev server URL.
+ * Extracted to avoid duplication between event handler and reconciliation paths.
+ */
+function showUrlDetectedToast(url: string, port: number): void {
+  const browserUrl = buildDevServerBrowserUrl(url);
+  toast.success(`Dev server running on port ${port}`, {
+    description: browserUrl ? browserUrl : url,
+    action: browserUrl
+      ? {
+          label: 'Open in Browser',
+          onClick: () => {
+            window.open(browserUrl, '_blank', 'noopener,noreferrer');
+          },
+        }
+      : undefined,
+    duration: 8000,
+  });
+}
+
+export function useDevServers({ projectPath }: UseDevServersOptions) {
+  const [isStartingAnyDevServer, setIsStartingAnyDevServer] = useState(false);
+  const [startingServers, setStartingServers] = useState<Set<string>>(new Set());
+  const [runningDevServers, setRunningDevServers] = useState<Map<string, DevServerInfo>>(new Map());
+
+  // Track which worktrees have had their url-detected toast shown to prevent re-triggering
+  const toastShownForRef = useRef<Set<string>>(new Set());
+
+  // Track port detection timeouts per worktree key
+  const portDetectionTimers = useRef<Map<string, NodeJS.Timeout>>(new Map());
+
+  // Track whether initial fetch has completed to avoid reconciliation race
+  const initialFetchDone = useRef(false);
+
+  /**
+   * Clear a port detection timeout for a given key
+   */
+  const clearPortDetectionTimer = useCallback((key: string) => {
+    const timer = portDetectionTimers.current.get(key);
+    if (timer) {
+      clearTimeout(timer);
+      portDetectionTimers.current.delete(key);
+    }
+  }, []);
+
+  /**
+   * Start a port detection timeout for a server that hasn't detected its URL yet.
+   * After PORT_DETECTION_TIMEOUT_MS, if still undetected, show a warning toast
+   * and attempt to reconcile state with the backend.
+   */
+  const startPortDetectionTimer = useCallback(
+    (key: string) => {
+      // Clear any existing timer for this key
+      clearPortDetectionTimer(key);
+
+      const timer = setTimeout(async () => {
+        portDetectionTimers.current.delete(key);
+
+        // Check if the server is still in undetected state.
+        // Use a setState-updater-as-reader to access the latest state snapshot,
+        // but keep the updater pure (no side effects, just reads).
+        let needsReconciliation = false;
+        setRunningDevServers((prev) => {
+          const server = prev.get(key);
+          needsReconciliation = !!server && !server.urlDetected;
+          return prev; // no state change
+        });
+
+        if (!needsReconciliation) return;
+
+        logger.warn(`Port detection timeout for ${key} after ${PORT_DETECTION_TIMEOUT_MS}ms`);
+
+        // Try to reconcile with backend - the server may have detected the URL
+        // but the WebSocket event was missed
+        try {
+          const api = getElectronAPI();
+          if (!api?.worktree?.listDevServers) return;
+          const result = await api.worktree.listDevServers();
+          if (result.success && result.result?.servers) {
+            const backendServer = result.result.servers.find(
+              (s) => normalizePath(s.worktreePath) === key
+            );
+            if (backendServer && backendServer.urlDetected) {
+              // Backend has detected the URL - update our state
+              logger.info(`Port detection reconciled from backend for ${key}`);
+              setRunningDevServers((prev) => {
+                const next = new Map(prev);
+                next.set(key, {
+                  ...backendServer,
+                  urlDetected: true,
+                });
+                return next;
+              });
+              if (!toastShownForRef.current.has(key)) {
+                toastShownForRef.current.add(key);
+                showUrlDetectedToast(backendServer.url, backendServer.port);
+              }
+              return;
+            }
+
+            if (!backendServer) {
+              // Server is no longer running on the backend - remove from state
+              logger.info(`Server ${key} no longer running on backend, removing from state`);
+              setRunningDevServers((prev) => {
+                if (!prev.has(key)) return prev;
+                const next = new Map(prev);
+                next.delete(key);
+                return next;
+              });
+              toastShownForRef.current.delete(key);
+              return;
+            }
+          }
+        } catch (error) {
+          logger.error('Failed to reconcile port detection:', error);
+        }
+
+        // If we get here, the backend also hasn't detected the URL - show warning
+        toast.warning('Port detection is taking longer than expected', {
+          description:
+            'The dev server may be slow to start, or the port output format is not recognized.',
+          action: {
+            label: 'Retry',
+            onClick: () => {
+              // Use ref to get the latest startPortDetectionTimer, avoiding stale closure
+              startPortDetectionTimerRef.current(key);
+            },
+          },
+          duration: 10000,
+        });
+      }, PORT_DETECTION_TIMEOUT_MS);
+
+      portDetectionTimers.current.set(key, timer);
+    },
+    [clearPortDetectionTimer]
+  );
+
+  // Ref to hold the latest startPortDetectionTimer callback, avoiding stale closures
+  // in long-lived callbacks like toast action handlers
+  const startPortDetectionTimerRef = useRef(startPortDetectionTimer);
+  startPortDetectionTimerRef.current = startPortDetectionTimer;
+
+  const fetchDevServers = useCallback(async () => {
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.listDevServers) {
+        return;
+      }
+      const result = await api.worktree.listDevServers();
+      if (result.success && result.result?.servers) {
+        const serversMap = new Map<string, DevServerInfo>();
+        for (const server of result.result.servers) {
+          const key = normalizePath(server.worktreePath);
+          serversMap.set(key, {
+            ...server,
+            urlDetected: server.urlDetected ?? true,
+          });
+          // Mark already-detected servers as having shown the toast
+          // so we don't re-trigger on initial load
+          if (server.urlDetected !== false) {
+            toastShownForRef.current.add(key);
+            // Clear any pending detection timer since URL is already detected
+            clearPortDetectionTimer(key);
+          } else {
+            // Server running but URL not yet detected - start timeout
+            startPortDetectionTimer(key);
+          }
+        }
+        setRunningDevServers(serversMap);
+      }
+      initialFetchDone.current = true;
+    } catch (error) {
+      logger.error('Failed to fetch dev servers:', error);
+      initialFetchDone.current = true;
+    }
+  }, [clearPortDetectionTimer, startPortDetectionTimer]);
+
+  useEffect(() => {
+    fetchDevServers();
+  }, [fetchDevServers]);
+
+  // Periodic state reconciliation: poll backend to catch missed WebSocket events
+  // This handles edge cases like PWA restart, WebSocket reconnection gaps, etc.
+  useEffect(() => {
+    const reconcile = async () => {
+      if (!initialFetchDone.current) return;
+      // Skip reconciliation when the tab/panel is not visible to avoid
+      // unnecessary API calls while the user isn't looking at the panel.
+      if (document.hidden) return;
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.listDevServers) return;
+
+        const result = await api.worktree.listDevServers();
+        if (!result.success || !result.result?.servers) return;
+
+        const backendServers = new Map<string, (typeof result.result.servers)[number]>();
+        for (const server of result.result.servers) {
+          backendServers.set(normalizePath(server.worktreePath), server);
+        }
+
+        // Collect side-effect actions in a local array so the setState updater
+        // remains pure. Side effects are executed after the state update.
+        const sideEffects: Array<() => void> = [];
+
+        setRunningDevServers((prev) => {
+          let changed = false;
+          const next = new Map(prev);
+
+          // Add or update servers from backend
+          for (const [key, server] of backendServers) {
+            const existing = next.get(key);
+            if (!existing) {
+              // Server running on backend but not in our state - add it
+              sideEffects.push(() => logger.info(`Reconciliation: adding missing server ${key}`));
+              next.set(key, {
+                ...server,
+                urlDetected: server.urlDetected ?? true,
+              });
+              if (server.urlDetected !== false) {
+                sideEffects.push(() => {
+                  toastShownForRef.current.add(key);
+                  clearPortDetectionTimer(key);
+                });
+              } else {
+                sideEffects.push(() => startPortDetectionTimer(key));
+              }
+              changed = true;
+            } else if (!existing.urlDetected && server.urlDetected) {
+              // URL was detected on backend but we missed the event - update
+              sideEffects.push(() => {
+                logger.info(`Reconciliation: URL detected for ${key}`);
+                clearPortDetectionTimer(key);
+                if (!toastShownForRef.current.has(key)) {
+                  toastShownForRef.current.add(key);
+                  showUrlDetectedToast(server.url, server.port);
+                }
+              });
+              next.set(key, {
+                ...server,
+                urlDetected: true,
+              });
+              changed = true;
+            } else if (
+              existing.urlDetected &&
+              server.urlDetected &&
+              (existing.port !== server.port || existing.url !== server.url)
+            ) {
+              // Port or URL changed between sessions - update
+              sideEffects.push(() => logger.info(`Reconciliation: port/URL changed for ${key}`));
+              next.set(key, {
+                ...server,
+                urlDetected: true,
+              });
+              changed = true;
+            }
+          }
+
+          // Remove servers from our state that are no longer on the backend
+          for (const [key] of next) {
+            if (!backendServers.has(key)) {
+              sideEffects.push(() => {
+                logger.info(`Reconciliation: removing stale server ${key}`);
+                toastShownForRef.current.delete(key);
+                clearPortDetectionTimer(key);
+              });
+              next.delete(key);
+              changed = true;
+            }
+          }
+
+          return changed ? next : prev;
+        });
+
+        // Execute side effects outside the updater
+        for (const fn of sideEffects) fn();
+      } catch (error) {
+        // Reconciliation failures are non-critical - just log and continue
+        logger.debug('State reconciliation failed:', error);
+      }
+    };
+
+    const intervalId = setInterval(reconcile, STATE_RECONCILE_INTERVAL_MS);
+    return () => clearInterval(intervalId);
+  }, [clearPortDetectionTimer, startPortDetectionTimer]);
+
+  // Record global events so smart polling knows WebSocket is healthy.
+  // Without this, dev-server events don't suppress polling intervals,
+  // causing all queries (features, worktrees, running-agents) to poll
+  // at their default rates even though the WebSocket is actively connected.
+  const recordGlobalEvent = useEventRecencyStore((state) => state.recordGlobalEvent);
+
+  // Subscribe to all dev server lifecycle events for reactive state updates
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.worktree?.onDevServerLogEvent) return;
+
+    const unsubscribe = api.worktree.onDevServerLogEvent((event) => {
+      // Record that WS is alive (but only for lifecycle events, not output -
+      // output fires too frequently and would trigger unnecessary store updates)
+      if (event.type !== 'dev-server:output') {
+        recordGlobalEvent();
+      }
+
+      if (event.type === 'dev-server:starting') {
+        const { worktreePath } = event.payload;
+        const key = normalizePath(worktreePath);
+        setStartingServers((prev) => {
+          const next = new Set(prev);
+          next.add(key);
+          return next;
+        });
+        logger.info(`Dev server starting for ${worktreePath} (reactive update)`);
+      } else if (event.type === 'dev-server:url-detected') {
+        const { worktreePath, url, port } = event.payload;
+        const key = normalizePath(worktreePath);
+        // Clear the port detection timeout since URL was successfully detected
+        clearPortDetectionTimer(key);
+        let didUpdate = false;
+        setRunningDevServers((prev) => {
+          const existing = prev.get(key);
+          // If the server isn't in our state yet (e.g., race condition on first load
+          // where url-detected arrives before fetchDevServers completes), create the entry
+          if (!existing) {
+            const next = new Map(prev);
+            next.set(key, {
+              worktreePath,
+              url,
+              port,
+              urlDetected: true,
+            });
+            didUpdate = true;
+            return next;
+          }
+          // Avoid updating if already detected with same url/port
+          if (existing.urlDetected && existing.url === url && existing.port === port) return prev;
+          const next = new Map(prev);
+          next.set(key, {
+            ...existing,
+            url,
+            port,
+            urlDetected: true,
+          });
+          didUpdate = true;
+          return next;
+        });
+        if (didUpdate) {
+          logger.info(`Dev server URL detected for ${worktreePath}: ${url} (port ${port})`);
+          // Only show toast on the transition from undetected → detected (not on re-renders/polls)
+          if (!toastShownForRef.current.has(key)) {
+            toastShownForRef.current.add(key);
+            showUrlDetectedToast(url, port);
+          }
+        }
+      } else if (event.type === 'dev-server:stopped') {
+        // Reactively remove the server from state when it stops
+        const { worktreePath } = event.payload;
+        const key = normalizePath(worktreePath);
+        // Clear any pending port detection timeout
+        clearPortDetectionTimer(key);
+        setRunningDevServers((prev) => {
+          if (!prev.has(key)) return prev;
+          const next = new Map(prev);
+          next.delete(key);
+          return next;
+        });
+        // Clear the toast tracking so a fresh detection will show a new toast
+        toastShownForRef.current.delete(key);
+        logger.info(`Dev server stopped for ${worktreePath} (reactive update)`);
+      } else if (event.type === 'dev-server:started') {
+        // Reactively add/update the server when it starts
+        const { worktreePath, port, url } = event.payload;
+        const key = normalizePath(worktreePath);
+
+        // Remove from starting set
+        setStartingServers((prev) => {
+          if (!prev.has(key)) return prev;
+          const next = new Set(prev);
+          next.delete(key);
+          return next;
+        });
+
+        // Clear previous toast tracking for this key so a new detection triggers a fresh toast
+        toastShownForRef.current.delete(key);
+        setRunningDevServers((prev) => {
+          const next = new Map(prev);
+          next.set(key, {
+            worktreePath,
+            port,
+            url,
+            urlDetected: false,
+          });
+          return next;
+        });
+        // Start port detection timeout for the new server
+        startPortDetectionTimer(key);
+      }
+    });
+
+    return unsubscribe;
+  }, [clearPortDetectionTimer, startPortDetectionTimer, recordGlobalEvent]);
+
+  // Cleanup all port detection timers on unmount
+  useEffect(() => {
+    const timers = portDetectionTimers.current;
+    return () => {
+      for (const timer of timers.values()) {
+        clearTimeout(timer);
+      }
+      timers.clear();
+    };
+  }, []);
+
+  const getWorktreeKey = useCallback(
+    (worktree: WorktreeInfo) => {
+      const path = worktree.isMain ? projectPath : worktree.path;
+      return path ? normalizePath(path) : path;
+    },
+    [projectPath]
+  );
+
+  const handleStartDevServer = useCallback(
+    async (worktree: WorktreeInfo) => {
+      if (isStartingAnyDevServer) return;
+      setIsStartingAnyDevServer(true);
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.startDevServer) {
+          toast.error('Start dev server API not available');
+          return;
+        }
+
+        const targetPath = worktree.isMain ? projectPath : worktree.path;
+        const result = await api.worktree.startDevServer(projectPath, targetPath);
+
+        if (result.success && result.result) {
+          const key = normalizePath(targetPath);
+          // Clear toast tracking so the new port detection shows a fresh toast
+          toastShownForRef.current.delete(key);
+          setRunningDevServers((prev) => {
+            const next = new Map(prev);
+            next.set(key, {
+              worktreePath: result.result!.worktreePath,
+              port: result.result!.port,
+              url: result.result!.url,
+              urlDetected: false,
+            });
+            return next;
+          });
+          // Start port detection timeout
+          startPortDetectionTimer(key);
+          toast.success('Dev server started, detecting port...', {
+            description: 'Logs are now visible in the dev server panel.',
+          });
+        } else {
+          toast.error(result.error || 'Failed to start dev server', {
+            description: 'Check the dev server logs panel for details.',
+          });
+        }
+      } catch (error) {
+        logger.error('Start dev server failed:', error);
+        toast.error('Failed to start dev server', {
+          description: error instanceof Error ? error.message : undefined,
+        });
+      } finally {
+        setIsStartingAnyDevServer(false);
+      }
+    },
+    [isStartingAnyDevServer, projectPath, startPortDetectionTimer]
+  );
+
+  const handleStopDevServer = useCallback(
+    async (worktree: WorktreeInfo) => {
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.stopDevServer) {
+          toast.error('Stop dev server API not available');
+          return;
+        }
+
+        const targetPath = worktree.isMain ? projectPath : worktree.path;
+        const result = await api.worktree.stopDevServer(targetPath);
+
+        if (result.success) {
+          const key = normalizePath(targetPath);
+          // Clear port detection timeout
+          clearPortDetectionTimer(key);
+          setRunningDevServers((prev) => {
+            const next = new Map(prev);
+            next.delete(key);
+            return next;
+          });
+          // Clear toast tracking so future restarts get a fresh toast
+          toastShownForRef.current.delete(key);
+          toast.success(result.result?.message || 'Dev server stopped');
+        } else {
+          toast.error(result.error || 'Failed to stop dev server');
+        }
+      } catch (error) {
+        logger.error('Stop dev server failed:', error);
+        toast.error('Failed to stop dev server');
+      }
+    },
+    [projectPath, clearPortDetectionTimer]
+  );
+
+  const handleOpenDevServerUrl = useCallback(
+    (worktree: WorktreeInfo) => {
+      const serverInfo = runningDevServers.get(getWorktreeKey(worktree));
+      if (!serverInfo) {
+        logger.warn('No dev server info found for worktree:', getWorktreeKey(worktree));
+        toast.error('Dev server not found', {
+          description: 'The dev server may have stopped. Try starting it again.',
+        });
+        return;
+      }
+
+      const browserUrl = buildDevServerBrowserUrl(serverInfo.url);
+      if (!browserUrl) {
+        logger.error('Invalid dev server URL:', serverInfo.url);
+        toast.error('Invalid dev server URL', {
+          description: 'The server returned an unsupported URL protocol.',
+        });
+        return;
+      }
+
+      window.open(browserUrl, '_blank', 'noopener,noreferrer');
+    },
+    [runningDevServers, getWorktreeKey]
+  );
+
+  const isDevServerRunning = useCallback(
+    (worktree: WorktreeInfo) => {
+      return runningDevServers.has(getWorktreeKey(worktree));
+    },
+    [runningDevServers, getWorktreeKey]
+  );
+
+  const isDevServerStarting = useCallback(
+    (worktree: WorktreeInfo) => {
+      return startingServers.has(getWorktreeKey(worktree));
+    },
+    [startingServers, getWorktreeKey]
+  );
+
+  const getDevServerInfo = useCallback(
+    (worktree: WorktreeInfo) => {
+      return runningDevServers.get(getWorktreeKey(worktree));
+    },
+    [runningDevServers, getWorktreeKey]
+  );
+
+  return {
+    isStartingAnyDevServer,
+    runningDevServers,
+    getWorktreeKey,
+    isDevServerRunning,
+    isDevServerStarting,
+    getDevServerInfo,
+    handleStartDevServer,
+    handleStopDevServer,
+    handleOpenDevServerUrl,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-running-features.ts b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-running-features.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b00de694088731fdf665fd65d277d3d282733b33
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-running-features.ts
@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+import type { WorktreeInfo, FeatureInfo } from '../types';
+
+interface UseRunningFeaturesOptions {
+  runningFeatureIds: string[];
+  features: FeatureInfo[];
+}
+
+export function useRunningFeatures({ runningFeatureIds, features }: UseRunningFeaturesOptions) {
+  const hasRunningFeatures = useCallback(
+    (worktree: WorktreeInfo) => {
+      if (runningFeatureIds.length === 0) return false;
+
+      return runningFeatureIds.some((featureId) => {
+        const feature = features.find((f) => f.id === featureId);
+        if (!feature) return false;
+
+        // Match by branchName only (worktreePath is no longer stored)
+        if (feature.branchName) {
+          // Check if branch names match - this handles both main worktree (any primary branch name)
+          // and feature worktrees
+          return worktree.branch === feature.branchName;
+        }
+
+        // No branch assigned - belongs to main worktree
+        return worktree.isMain;
+      });
+    },
+    [runningFeatureIds, features]
+  );
+
+  return {
+    hasRunningFeatures,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-worktree-actions.ts b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-worktree-actions.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b36317a151430c752561e5e770fdbd58eebfc65
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-worktree-actions.ts
@@ -0,0 +1,262 @@
+import { useState, useCallback } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { createLogger } from '@automaker/utils/logger';
+import { getElectronAPI } from '@/lib/electron';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import {
+  useSwitchBranch,
+  usePullWorktree,
+  usePushWorktree,
+  useSyncWorktree,
+  useSetTracking,
+  useOpenInEditor,
+} from '@/hooks/mutations';
+import type { WorktreeInfo } from '../types';
+import type { UncommittedChangesInfo } from '../../dialogs/stash-confirm-dialog';
+
+const logger = createLogger('WorktreeActions');
+
+/** Pending branch switch details, stored while awaiting user confirmation */
+export interface PendingSwitchInfo {
+  worktree: WorktreeInfo;
+  branchName: string;
+  changesInfo: UncommittedChangesInfo;
+}
+
+interface UseWorktreeActionsOptions {
+  /** Callback when merge conflicts occur after branch switch stash reapply */
+  onBranchSwitchConflict?: (info: {
+    worktreePath: string;
+    branchName: string;
+    previousBranch: string;
+  }) => void;
+  /** Callback when checkout fails AND the stash-pop restoration produces merge conflicts */
+  onStashPopConflict?: (info: {
+    worktreePath: string;
+    branchName: string;
+    stashPopConflictMessage: string;
+  }) => void;
+}
+
+export function useWorktreeActions(options?: UseWorktreeActionsOptions) {
+  const navigate = useNavigate();
+  const [isActivating, setIsActivating] = useState(false);
+
+  // Pending branch switch state (waiting for user stash decision)
+  const [pendingSwitch, setPendingSwitch] = useState<PendingSwitchInfo | null>(null);
+
+  // Use React Query mutations
+  const switchBranchMutation = useSwitchBranch({
+    onConflict: options?.onBranchSwitchConflict,
+    onStashPopConflict: options?.onStashPopConflict,
+  });
+  const pullMutation = usePullWorktree();
+  const pushMutation = usePushWorktree();
+  const syncMutation = useSyncWorktree();
+  const setTrackingMutation = useSetTracking();
+  const openInEditorMutation = useOpenInEditor();
+
+  /**
+   * Initiate a branch switch.
+   * First checks for uncommitted changes and, if found, stores the pending
+   * switch so the caller can show a confirmation dialog.
+   */
+  const handleSwitchBranch = useCallback(
+    async (worktree: WorktreeInfo, branchName: string) => {
+      if (switchBranchMutation.isPending || branchName === worktree.branch) return;
+
+      // Check for uncommitted changes before switching
+      try {
+        const api = getHttpApiClient();
+        const changesResult = await api.worktree.checkChanges(worktree.path);
+
+        if (changesResult.success && changesResult.result?.hasChanges) {
+          // Store the pending switch and let the UI show the confirmation dialog
+          setPendingSwitch({
+            worktree,
+            branchName,
+            changesInfo: {
+              staged: changesResult.result.staged,
+              unstaged: changesResult.result.unstaged,
+              untracked: changesResult.result.untracked,
+              totalFiles: changesResult.result.totalFiles,
+            },
+          });
+          return;
+        }
+      } catch (err) {
+        // If we can't check for changes, proceed with the switch (server will auto-stash)
+        logger.warn('Failed to check for uncommitted changes, proceeding with switch:', err);
+      }
+
+      // No changes detected, proceed directly (server still handles stash as safety net)
+      switchBranchMutation.mutate({
+        worktreePath: worktree.path,
+        branchName,
+      });
+    },
+    [switchBranchMutation]
+  );
+
+  /**
+   * Confirm the pending branch switch after the user chooses an action.
+   * The server-side performSwitchBranch always auto-stashes when there are changes,
+   * so when the user chooses "proceed without stashing" we still switch (the server
+   * detects and stashes automatically). When "cancel", we just clear the pending state.
+   */
+  const confirmPendingSwitch = useCallback(
+    (action: 'stash-and-proceed' | 'proceed-without-stash' | 'cancel') => {
+      if (!pendingSwitch) return;
+
+      if (action === 'cancel') {
+        setPendingSwitch(null);
+        return;
+      }
+
+      // Both 'stash-and-proceed' and 'proceed-without-stash' trigger the switch.
+      // The server-side performSwitchBranch handles the stash/pop cycle automatically.
+      // 'proceed-without-stash' means the user is OK with the server's auto-stash behavior.
+      switchBranchMutation.mutate({
+        worktreePath: pendingSwitch.worktree.path,
+        branchName: pendingSwitch.branchName,
+      });
+
+      setPendingSwitch(null);
+    },
+    [pendingSwitch, switchBranchMutation]
+  );
+
+  /** Clear the pending switch without performing any action */
+  const cancelPendingSwitch = useCallback(() => {
+    setPendingSwitch(null);
+  }, []);
+
+  const handlePull = useCallback(
+    async (worktree: WorktreeInfo, remote?: string) => {
+      if (pullMutation.isPending) return;
+      pullMutation.mutate({
+        worktreePath: worktree.path,
+        remote,
+      });
+    },
+    [pullMutation]
+  );
+
+  const handlePush = useCallback(
+    async (worktree: WorktreeInfo, remote?: string) => {
+      if (pushMutation.isPending) return;
+      pushMutation.mutate({
+        worktreePath: worktree.path,
+        remote,
+      });
+    },
+    [pushMutation]
+  );
+
+  const handleSync = useCallback(
+    async (worktree: WorktreeInfo, remote?: string) => {
+      if (syncMutation.isPending) return;
+      syncMutation.mutate({
+        worktreePath: worktree.path,
+        remote,
+      });
+    },
+    [syncMutation]
+  );
+
+  const handleSetTracking = useCallback(
+    async (worktree: WorktreeInfo, remote: string) => {
+      if (setTrackingMutation.isPending) return;
+      setTrackingMutation.mutate({
+        worktreePath: worktree.path,
+        remote,
+      });
+    },
+    [setTrackingMutation]
+  );
+
+  const handleOpenInIntegratedTerminal = useCallback(
+    (worktree: WorktreeInfo, mode?: 'tab' | 'split') => {
+      // Navigate to the terminal view with the worktree path and branch name
+      // The terminal view will handle creating the terminal with the specified cwd
+      // Include nonce to allow opening the same worktree multiple times
+      navigate({
+        to: '/terminal',
+        search: { cwd: worktree.path, branch: worktree.branch, mode, nonce: Date.now() },
+      });
+    },
+    [navigate]
+  );
+
+  const handleRunTerminalScript = useCallback(
+    (worktree: WorktreeInfo, command: string) => {
+      // Navigate to the terminal view with the worktree path, branch, and command to run
+      // The terminal view will create a new terminal and automatically execute the command
+      navigate({
+        to: '/terminal',
+        search: {
+          cwd: worktree.path,
+          branch: worktree.branch,
+          mode: 'tab' as const,
+          nonce: Date.now(),
+          command,
+        },
+      });
+    },
+    [navigate]
+  );
+
+  const handleOpenInEditor = useCallback(
+    async (worktree: WorktreeInfo, editorCommand?: string) => {
+      openInEditorMutation.mutate({
+        worktreePath: worktree.path,
+        editorCommand,
+      });
+    },
+    [openInEditorMutation]
+  );
+
+  const handleOpenInExternalTerminal = useCallback(
+    async (worktree: WorktreeInfo, terminalId?: string) => {
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.openInExternalTerminal) {
+          logger.warn('Open in external terminal API not available');
+          return;
+        }
+        const result = await api.worktree.openInExternalTerminal(worktree.path, terminalId);
+        if (result.success && result.result) {
+          toast.success(result.result.message);
+        } else if (result.error) {
+          toast.error(result.error);
+        }
+      } catch (error) {
+        logger.error('Open in external terminal failed:', error);
+      }
+    },
+    []
+  );
+
+  return {
+    isPulling: pullMutation.isPending,
+    isPushing: pushMutation.isPending,
+    isSyncing: syncMutation.isPending,
+    isSwitching: switchBranchMutation.isPending,
+    isActivating,
+    setIsActivating,
+    handleSwitchBranch,
+    handlePull,
+    handlePush,
+    handleSync,
+    handleSetTracking,
+    handleOpenInIntegratedTerminal,
+    handleRunTerminalScript,
+    handleOpenInEditor,
+    handleOpenInExternalTerminal,
+    // Stash confirmation state for branch switching
+    pendingSwitch,
+    confirmPendingSwitch,
+    cancelPendingSwitch,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-worktrees.ts b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-worktrees.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fb33cafa9d067dd112ec0b055daaac4129628eb8
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/hooks/use-worktrees.ts
@@ -0,0 +1,176 @@
+import { useEffect, useCallback, useRef, startTransition, useMemo } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useAppStore } from '@/store/app-store';
+import { useWorktrees as useWorktreesQuery } from '@/hooks/queries';
+import { queryKeys } from '@/lib/query-keys';
+import { pathsEqual } from '@/lib/utils';
+import type { WorktreeInfo } from '../types';
+
+interface UseWorktreesOptions {
+  projectPath: string;
+  refreshTrigger?: number;
+  onRemovedWorktrees?: (removedWorktrees: Array<{ path: string; branch: string }>) => void;
+}
+
+export function useWorktrees({
+  projectPath,
+  refreshTrigger = 0,
+  onRemovedWorktrees,
+}: UseWorktreesOptions) {
+  const queryClient = useQueryClient();
+
+  const currentWorktree = useAppStore((s) => s.getCurrentWorktree(projectPath));
+  const setCurrentWorktree = useAppStore((s) => s.setCurrentWorktree);
+  const setWorktreesInStore = useAppStore((s) => s.setWorktrees);
+  const useWorktreesEnabled = useAppStore((s) => s.useWorktrees);
+
+  // Use the React Query hook
+  const { data, isLoading, refetch } = useWorktreesQuery(projectPath);
+  const worktrees = useMemo(() => (data?.worktrees ?? []) as WorktreeInfo[], [data?.worktrees]);
+
+  // Sync worktrees to Zustand store when they change.
+  // Use a ref to track the previous worktrees and skip the store update when the
+  // data hasn't structurally changed. Without this check, every React Query refetch
+  // (triggered by WebSocket event invalidations) would update the store even when
+  // the worktree list is identical, causing a cascade of re-renders in BoardView →
+  // selectedWorktree → useAutoMode → refreshStatus that can trigger React error #185.
+  const prevWorktreesJsonRef = useRef<string>('');
+  useEffect(() => {
+    if (worktrees.length > 0) {
+      // Compare serialized worktrees to skip no-op store updates
+      const json = JSON.stringify(worktrees);
+      if (json !== prevWorktreesJsonRef.current) {
+        prevWorktreesJsonRef.current = json;
+        setWorktreesInStore(projectPath, worktrees);
+      }
+    }
+  }, [worktrees, projectPath, setWorktreesInStore]);
+
+  // Handle removed worktrees callback when data changes
+  const prevRemovedWorktreesRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (data?.removedWorktrees && data.removedWorktrees.length > 0) {
+      // Create a stable key to avoid duplicate callbacks
+      const key = JSON.stringify(data.removedWorktrees);
+      if (key !== prevRemovedWorktreesRef.current) {
+        prevRemovedWorktreesRef.current = key;
+        onRemovedWorktrees?.(data.removedWorktrees);
+      }
+    }
+  }, [data?.removedWorktrees, onRemovedWorktrees]);
+
+  // Handle refresh trigger
+  useEffect(() => {
+    if (refreshTrigger > 0) {
+      // Invalidate and refetch to get fresh data including any removed worktrees
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.worktrees.all(projectPath),
+      });
+    }
+  }, [refreshTrigger, projectPath, queryClient]);
+
+  // Use a ref to track the current worktree to avoid running validation
+  // when selection changes (which could cause a race condition with stale worktrees list)
+  const currentWorktreeRef = useRef(currentWorktree);
+  useEffect(() => {
+    currentWorktreeRef.current = currentWorktree;
+  }, [currentWorktree]);
+
+  // Validation effect: only runs when worktrees list changes (not on selection change)
+  // This prevents a race condition where the selection is reset because the
+  // local worktrees state hasn't been updated yet from the async fetch
+  useEffect(() => {
+    if (worktrees.length > 0) {
+      const current = currentWorktreeRef.current;
+      const currentPath = current?.path;
+      const currentWorktreeExists =
+        currentPath === null
+          ? true
+          : worktrees.some((w) => !w.isMain && pathsEqual(w.path, currentPath));
+
+      if (current == null || (currentPath !== null && !currentWorktreeExists)) {
+        // Find the primary worktree and get its branch name
+        // Fallback to "main" only if worktrees haven't loaded yet
+        const mainWorktree = worktrees.find((w) => w.isMain);
+        const mainBranch = mainWorktree?.branch || 'main';
+        // Note: Zustand uses useSyncExternalStore so setCurrentWorktree updates
+        // are flushed synchronously. The real guard against React error #185 is
+        // dependency isolation — currentWorktree is intentionally excluded from
+        // the validation effect deps below (via currentWorktreeRef) so we don't
+        // create a feedback loop. startTransition may still help batch unrelated
+        // React state updates but does NOT defer or prevent Zustand-driven cascades.
+        startTransition(() => {
+          setCurrentWorktree(projectPath, null, mainBranch);
+        });
+      }
+    }
+  }, [worktrees, projectPath, setCurrentWorktree]);
+
+  const currentWorktreePath = currentWorktree?.path ?? null;
+
+  const handleSelectWorktree = useCallback(
+    (worktree: WorktreeInfo) => {
+      // Skip invalidation when re-selecting the already-active worktree
+      const isSameWorktree = worktree.isMain
+        ? currentWorktreePath === null
+        : pathsEqual(worktree.path, currentWorktreePath ?? '');
+
+      if (isSameWorktree) return;
+
+      // Note: Zustand uses useSyncExternalStore so setCurrentWorktree updates are
+      // flushed synchronously — startTransition does NOT prevent Zustand-driven
+      // cascades. The actual protection against React error #185 is dependency
+      // isolation via currentWorktreeRef (currentWorktree is excluded from the
+      // validation effect's dependency array). startTransition may still help
+      // batch unrelated concurrent React state updates but should not be relied
+      // upon for Zustand update ordering.
+      startTransition(() => {
+        setCurrentWorktree(projectPath, worktree.isMain ? null : worktree.path, worktree.branch);
+      });
+
+      // Defer feature query invalidation so the store update and client-side
+      // re-filtering happen in the current render cycle first. The features
+      // list is the same regardless of worktree (filtering is client-side),
+      // so the board updates instantly. The deferred invalidation ensures
+      // feature card details (planSpec, todo lists) are refreshed in the
+      // background without blocking the worktree switch.
+      setTimeout(() => {
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.features.all(projectPath),
+        });
+      }, 100);
+    },
+    [projectPath, setCurrentWorktree, queryClient, currentWorktreePath]
+  );
+
+  // fetchWorktrees for backward compatibility - now just triggers a refetch
+  // The silent option is accepted but not used (React Query handles loading states)
+  // Returns removed worktrees array if any were detected, undefined otherwise
+  const fetchWorktrees = useCallback(
+    async (_options?: {
+      silent?: boolean;
+    }): Promise<Array<{ path: string; branch: string }> | undefined> => {
+      await queryClient.invalidateQueries({
+        queryKey: queryKeys.worktrees.all(projectPath),
+      });
+      const result = await refetch();
+      return result.data?.removedWorktrees;
+    },
+    [projectPath, queryClient, refetch]
+  );
+
+  const selectedWorktree = currentWorktreePath
+    ? worktrees.find((w) => pathsEqual(w.path, currentWorktreePath))
+    : worktrees.find((w) => w.isMain);
+
+  return {
+    isLoading,
+    worktrees,
+    currentWorktree,
+    currentWorktreePath,
+    selectedWorktree,
+    useWorktreesEnabled,
+    fetchWorktrees,
+    handleSelectWorktree,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/index.ts b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..021018f7fbb2f3f93d8976ace88a1057e7c3e9de
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/index.ts
@@ -0,0 +1,8 @@
+export { WorktreePanel } from './worktree-panel';
+export type {
+  WorktreeInfo,
+  BranchInfo,
+  DevServerInfo,
+  FeatureInfo,
+  WorktreePanelProps,
+} from './types';
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/types.ts b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e352e5eb311c3d754019f4180dde5adac3acd11b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/types.ts
@@ -0,0 +1,144 @@
+// Re-export shared types from @automaker/types
+export type { PRState, WorktreePRInfo } from '@automaker/types';
+import type { PRState, WorktreePRInfo } from '@automaker/types';
+
+export interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  isCurrent: boolean;
+  hasWorktree: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+  pr?: WorktreePRInfo;
+  /** Whether a merge, rebase, or cherry-pick is in progress with conflicts */
+  hasConflicts?: boolean;
+  /** Type of conflict operation in progress */
+  conflictType?: 'merge' | 'rebase' | 'cherry-pick';
+  /** List of files with conflicts */
+  conflictFiles?: string[];
+  /** The branch that is the source of the conflict (e.g. the branch being merged in) */
+  conflictSourceBranch?: string;
+}
+
+export interface BranchInfo {
+  name: string;
+  isCurrent: boolean;
+  isRemote: boolean;
+}
+
+export interface GitRepoStatus {
+  isGitRepo: boolean;
+  hasCommits: boolean;
+}
+
+export interface DevServerInfo {
+  worktreePath: string;
+  port: number;
+  url: string;
+  /** Whether the actual URL/port has been detected from server output */
+  urlDetected?: boolean;
+}
+
+export interface TestSessionInfo {
+  sessionId: string;
+  worktreePath: string;
+  /** The test command being run (from project settings) */
+  command: string;
+  status: 'pending' | 'running' | 'passed' | 'failed' | 'cancelled';
+  testFile?: string;
+  startedAt: string;
+  finishedAt?: string;
+  exitCode?: number | null;
+  duration?: number;
+}
+
+export interface FeatureInfo {
+  id: string;
+  branchName?: string;
+}
+
+export interface PRInfo {
+  number: number;
+  title: string;
+  url: string;
+  /** PR state: OPEN, MERGED, or CLOSED */
+  state: PRState;
+  author: string;
+  body: string;
+  comments: Array<{
+    id: number;
+    author: string;
+    body: string;
+    createdAt: string;
+    isReviewComment: boolean;
+  }>;
+  reviewComments: Array<{
+    id: number;
+    author: string;
+    body: string;
+    path?: string;
+    line?: number;
+    createdAt: string;
+    isReviewComment: boolean;
+  }>;
+}
+
+export interface MergeConflictInfo {
+  sourceBranch: string;
+  targetBranch: string;
+  targetWorktreePath: string;
+  /** List of files with conflicts, if available */
+  conflictFiles?: string[];
+  /** Type of operation that caused the conflict */
+  operationType?: 'merge' | 'rebase' | 'cherry-pick';
+}
+
+export interface BranchSwitchConflictInfo {
+  worktreePath: string;
+  branchName: string;
+  previousBranch: string;
+}
+
+/** Info passed when a checkout failure triggers a stash-pop that itself produces conflicts */
+export interface StashPopConflictInfo {
+  worktreePath: string;
+  branchName: string;
+  stashPopConflictMessage: string;
+}
+
+/** Info passed when a stash apply/pop operation results in merge conflicts */
+export interface StashApplyConflictInfo {
+  worktreePath: string;
+  branchName: string;
+  stashRef: string;
+  operation: 'apply' | 'pop';
+  conflictFiles: string[];
+}
+
+export interface WorktreePanelProps {
+  projectPath: string;
+  onCreateWorktree: () => void;
+  onDeleteWorktree: (worktree: WorktreeInfo) => void;
+  onCommit: (worktree: WorktreeInfo) => void;
+  onCreatePR: (worktree: WorktreeInfo) => void;
+  onChangePRNumber?: (worktree: WorktreeInfo) => void;
+  onCreateBranch: (worktree: WorktreeInfo) => void;
+  onAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
+  onAutoAddressPRComments: (worktree: WorktreeInfo, prInfo: PRInfo) => void;
+  onResolveConflicts: (worktree: WorktreeInfo) => void;
+  onCreateMergeConflictResolutionFeature?: (conflictInfo: MergeConflictInfo) => void;
+  /** Called when branch switch stash reapply results in merge conflicts */
+  onBranchSwitchConflict?: (conflictInfo: BranchSwitchConflictInfo) => void;
+  /** Called when checkout fails and the stash-pop restoration itself produces merge conflicts */
+  onStashPopConflict?: (conflictInfo: StashPopConflictInfo) => void;
+  /** Called when stash apply/pop results in merge conflicts and user wants AI resolution */
+  onStashApplyConflict?: (conflictInfo: StashApplyConflictInfo) => void;
+  /** Called when a branch is deleted during merge - features should be reassigned to main */
+  onBranchDeletedDuringMerge?: (branchName: string) => void;
+  onRemovedWorktrees?: (removedWorktrees: Array<{ path: string; branch: string }>) => void;
+  runningFeatureIds?: string[];
+  features?: FeatureInfo[];
+  branchCardCounts?: Record<string, number>; // Map of branch name to unarchived card count
+  refreshTrigger?: number;
+}
diff --git a/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cb7c3f1dd171db9b35d5e026312022955d6c59cd
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx
@@ -0,0 +1,1654 @@
+import { useEffect, useRef, useCallback, useState, useMemo } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { Button } from '@/components/ui/button';
+import { GitBranch, Plus, RefreshCw } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { pathsEqual } from '@/lib/utils';
+import { toast } from 'sonner';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { useIsMobile } from '@/hooks/use-media-query';
+import { useWorktreeInitScript, useProjectSettings } from '@/hooks/queries';
+import { useTestRunnerEvents } from '@/hooks/use-test-runners';
+import { useTestRunnersStore } from '@/store/test-runners-store';
+import { DEFAULT_TERMINAL_SCRIPTS } from '@/components/views/project-settings-view/terminal-scripts-constants';
+import type {
+  TestRunnerStartedEvent,
+  TestRunnerOutputEvent,
+  TestRunnerCompletedEvent,
+} from '@/types/electron';
+import type { WorktreePanelProps, WorktreeInfo, TestSessionInfo } from './types';
+import {
+  useWorktrees,
+  useDevServers,
+  useBranches,
+  useWorktreeActions,
+  useRunningFeatures,
+} from './hooks';
+import {
+  WorktreeTab,
+  WorktreeDropdown,
+  DevServerLogsPanel,
+  WorktreeMobileDropdown,
+  WorktreeActionsDropdown,
+  BranchSwitchDropdown,
+} from './components';
+import { useAppStore } from '@/store/app-store';
+import {
+  ViewWorktreeChangesDialog,
+  ViewCommitsDialog,
+  PushToRemoteDialog,
+  MergeWorktreeDialog,
+  DiscardWorktreeChangesDialog,
+  SelectRemoteDialog,
+  StashChangesDialog,
+  ViewStashesDialog,
+  CherryPickDialog,
+  GitPullDialog,
+} from '../dialogs';
+import { StashConfirmDialog } from '../dialogs/stash-confirm-dialog';
+import type { SelectRemoteOperation } from '../dialogs';
+import { TestLogsPanel } from '@/components/ui/test-logs-panel';
+import { getElectronAPI } from '@/lib/electron';
+
+// Stable empty array to avoid creating a new [] reference on every render
+// when pinnedWorktreeBranchesByProject[projectPath] is undefined
+const EMPTY_BRANCHES: string[] = [];
+
+export function WorktreePanel({
+  projectPath,
+  onCreateWorktree,
+  onDeleteWorktree,
+  onCommit,
+  onCreatePR,
+  onChangePRNumber,
+  onCreateBranch,
+  onAddressPRComments,
+  onAutoAddressPRComments,
+  onResolveConflicts,
+  onCreateMergeConflictResolutionFeature,
+  onBranchSwitchConflict,
+  onStashPopConflict,
+  onStashApplyConflict,
+  onBranchDeletedDuringMerge,
+  onRemovedWorktrees,
+  runningFeatureIds = [],
+  features = [],
+  branchCardCounts,
+  refreshTrigger = 0,
+}: WorktreePanelProps) {
+  const {
+    isLoading,
+    worktrees,
+    currentWorktree,
+    currentWorktreePath,
+    useWorktreesEnabled,
+    fetchWorktrees,
+    handleSelectWorktree,
+  } = useWorktrees({ projectPath, refreshTrigger, onRemovedWorktrees });
+
+  const {
+    isStartingAnyDevServer,
+    isDevServerRunning,
+    isDevServerStarting,
+    getDevServerInfo,
+    handleStartDevServer,
+    handleStopDevServer,
+    handleOpenDevServerUrl,
+  } = useDevServers({ projectPath });
+
+  const {
+    branches,
+    filteredBranches,
+    aheadCount,
+    behindCount,
+    hasRemoteBranch,
+    getTrackingRemote,
+    remotesWithBranch,
+    isLoadingBranches,
+    branchFilter,
+    setBranchFilter,
+    resetBranchFilter,
+    fetchBranches,
+    pruneStaleEntries,
+    gitRepoStatus,
+  } = useBranches();
+
+  const {
+    isPulling,
+    isPushing,
+    isSyncing,
+    isSwitching,
+    isActivating,
+    handleSwitchBranch,
+    handlePull: _handlePull,
+    handlePush,
+    handleSync,
+    handleSetTracking,
+    handleOpenInIntegratedTerminal,
+    handleRunTerminalScript,
+    handleOpenInEditor,
+    handleOpenInExternalTerminal,
+    pendingSwitch,
+    confirmPendingSwitch,
+    cancelPendingSwitch,
+  } = useWorktreeActions({
+    onBranchSwitchConflict: onBranchSwitchConflict,
+    onStashPopConflict: onStashPopConflict,
+  });
+
+  const { hasRunningFeatures } = useRunningFeatures({
+    runningFeatureIds,
+    features,
+  });
+
+  // Pinned worktrees count from store
+  const pinnedWorktreesCount = useAppStore(
+    (state) => state.pinnedWorktreesCountByProject[projectPath] ?? 0
+  );
+  const pinnedWorktreeBranchesRaw = useAppStore(
+    (state) => state.pinnedWorktreeBranchesByProject[projectPath]
+  );
+  const pinnedWorktreeBranches = pinnedWorktreeBranchesRaw ?? EMPTY_BRANCHES;
+  const setPinnedWorktreeBranches = useAppStore((state) => state.setPinnedWorktreeBranches);
+  const swapPinnedWorktreeBranch = useAppStore((state) => state.swapPinnedWorktreeBranch);
+
+  // Resolve pinned worktrees from explicit branch assignments
+  // Shows exactly pinnedWorktreesCount slots, each with a specific worktree.
+  // Main worktree is always slot 0. Other slots can be swapped by the user.
+  const pinnedWorktrees = useMemo(() => {
+    const mainWt = worktrees.find((w) => w.isMain);
+    const otherWts = worktrees.filter((w) => !w.isMain);
+
+    // Slot 0 is always main worktree
+    const result: WorktreeInfo[] = mainWt ? [mainWt] : [];
+
+    // pinnedWorktreesCount represents only non-main worktrees; main is always shown separately
+    const otherSlotCount = Math.max(0, pinnedWorktreesCount);
+
+    if (otherSlotCount > 0 && otherWts.length > 0) {
+      // Use explicit branch assignments if available
+      const assignedBranches = pinnedWorktreeBranches;
+      const usedBranches = new Set<string>();
+
+      for (let i = 0; i < otherSlotCount; i++) {
+        const assignedBranch = assignedBranches[i];
+        let wt: WorktreeInfo | undefined;
+
+        // Try to find the explicitly assigned worktree
+        if (assignedBranch) {
+          wt = otherWts.find((w) => w.branch === assignedBranch && !usedBranches.has(w.branch));
+        }
+
+        // Fall back to next available worktree if assigned one doesn't exist
+        if (!wt) {
+          wt = otherWts.find((w) => !usedBranches.has(w.branch));
+        }
+
+        if (wt) {
+          result.push(wt);
+          usedBranches.add(wt.branch);
+        }
+      }
+    }
+
+    return result;
+  }, [worktrees, pinnedWorktreesCount, pinnedWorktreeBranches]);
+
+  // All non-main worktrees available for swapping into slots
+  const availableWorktreesForSwap = useMemo(() => {
+    return worktrees.filter((w) => !w.isMain);
+  }, [worktrees]);
+
+  // Handle swapping a worktree in a specific slot
+  const handleSwapWorktreeSlot = useCallback(
+    (slotIndex: number, newBranch: string) => {
+      swapPinnedWorktreeBranch(projectPath, slotIndex, newBranch);
+    },
+    [projectPath, swapPinnedWorktreeBranch]
+  );
+
+  // Initialize pinned branch assignments when worktrees change
+  // This ensures new worktrees get default slot assignments
+  // Read store state directly inside the effect to avoid a dependency cycle
+  // (the effect writes to the same state it would otherwise depend on)
+  useEffect(() => {
+    const otherWts = worktrees.filter((w) => !w.isMain);
+    const otherSlotCount = Math.max(0, pinnedWorktreesCount);
+
+    const storedBranches = useAppStore.getState().pinnedWorktreeBranchesByProject[projectPath];
+    if (otherSlotCount > 0 && otherWts.length > 0) {
+      const existing = storedBranches ?? [];
+      if (existing.length < otherSlotCount) {
+        const used = new Set(existing.filter(Boolean));
+        const filled = [...existing];
+        for (const wt of otherWts) {
+          if (filled.length >= otherSlotCount) break;
+          if (!used.has(wt.branch)) {
+            filled.push(wt.branch);
+            used.add(wt.branch);
+          }
+        }
+        if (filled.length > 0) {
+          setPinnedWorktreeBranches(projectPath, filled);
+        }
+      }
+    }
+  }, [worktrees, pinnedWorktreesCount, projectPath, setPinnedWorktreeBranches]);
+
+  // Auto-mode state management using the store
+  // Use separate selectors to avoid creating new object references on each render
+  const autoModeByWorktree = useAppStore((state) => state.autoModeByWorktree);
+  const currentProject = useAppStore((state) => state.currentProject);
+  const setAutoModeRunning = useAppStore((state) => state.setAutoModeRunning);
+  const getMaxConcurrencyForWorktree = useAppStore((state) => state.getMaxConcurrencyForWorktree);
+  // Helper to generate worktree key for auto-mode (inlined to avoid selector issues)
+  const getAutoModeWorktreeKey = useCallback(
+    (projectId: string, branchName: string | null): string => {
+      return `${projectId}::${branchName ?? '__main__'}`;
+    },
+    []
+  );
+
+  // Helper to check if auto-mode is running for a specific worktree
+  const isAutoModeRunningForWorktree = useCallback(
+    (worktree: WorktreeInfo): boolean => {
+      if (!currentProject) return false;
+      const branchName = worktree.isMain ? null : worktree.branch;
+      const key = getAutoModeWorktreeKey(currentProject.id, branchName);
+      return autoModeByWorktree[key]?.isRunning ?? false;
+    },
+    [currentProject, autoModeByWorktree, getAutoModeWorktreeKey]
+  );
+
+  // Handler to toggle auto-mode for a worktree
+  const handleToggleAutoMode = useCallback(
+    async (worktree: WorktreeInfo) => {
+      if (!currentProject) return;
+
+      const api = getHttpApiClient();
+      const branchName = worktree.isMain ? null : worktree.branch;
+      const isRunning = isAutoModeRunningForWorktree(worktree);
+
+      try {
+        if (isRunning) {
+          const result = await api.autoMode.stop(projectPath, branchName);
+          if (result.success) {
+            setAutoModeRunning(currentProject.id, branchName, false);
+            const desc = branchName ? `worktree ${branchName}` : 'main branch';
+            toast.success(`Auto Mode stopped for ${desc}`);
+          } else {
+            toast.error(result.error || 'Failed to stop Auto Mode');
+          }
+        } else {
+          const maxConcurrency = getMaxConcurrencyForWorktree(currentProject.id, branchName);
+          const result = await api.autoMode.start(projectPath, branchName, maxConcurrency);
+          if (result.success) {
+            setAutoModeRunning(currentProject.id, branchName, true, maxConcurrency);
+            const desc = branchName ? `worktree ${branchName}` : 'main branch';
+            toast.success(`Auto Mode started for ${desc}`);
+          } else {
+            toast.error(result.error || 'Failed to start Auto Mode');
+          }
+        }
+      } catch (error) {
+        toast.error('Error toggling Auto Mode');
+        console.error('Auto mode toggle error:', error);
+      }
+    },
+    [
+      currentProject,
+      projectPath,
+      isAutoModeRunningForWorktree,
+      setAutoModeRunning,
+      getMaxConcurrencyForWorktree,
+    ]
+  );
+
+  // Check if init script exists for the project using React Query
+  const { data: initScriptData } = useWorktreeInitScript(projectPath);
+  const hasInitScript = initScriptData?.exists ?? false;
+
+  // Check if test command is configured in project settings
+  const { data: projectSettings } = useProjectSettings(projectPath);
+  const hasTestCommand = !!projectSettings?.testCommand;
+
+  // Get terminal quick scripts from project settings (or fall back to defaults)
+  const terminalScripts = useMemo(() => {
+    const configured = projectSettings?.terminalScripts;
+    if (configured && configured.length > 0) {
+      return configured;
+    }
+    return DEFAULT_TERMINAL_SCRIPTS;
+  }, [projectSettings?.terminalScripts]);
+
+  // Navigate to project settings to edit scripts
+  const navigate = useNavigate();
+  const handleEditScripts = useCallback(() => {
+    navigate({ to: '/project-settings', search: { section: 'commands-scripts' } });
+  }, [navigate]);
+
+  // Test runner state management
+  // Use the test runners store to get global state for all worktrees
+  const testRunnersStore = useTestRunnersStore();
+  const [isStartingTests, setIsStartingTests] = useState(false);
+
+  // Subscribe to test runner events to update store state in real-time
+  // This ensures the UI updates when tests start, output is received, or tests complete
+  useTestRunnerEvents(
+    // onStarted - a new test run has begun
+    useCallback(
+      (event: TestRunnerStartedEvent) => {
+        testRunnersStore.startSession({
+          sessionId: event.sessionId,
+          worktreePath: event.worktreePath,
+          command: event.command,
+          status: 'running',
+          testFile: event.testFile,
+          startedAt: event.timestamp,
+        });
+      },
+      [testRunnersStore]
+    ),
+    // onOutput - test output received
+    useCallback(
+      (event: TestRunnerOutputEvent) => {
+        testRunnersStore.appendOutput(event.sessionId, event.content);
+      },
+      [testRunnersStore]
+    ),
+    // onCompleted - test run finished
+    useCallback(
+      (event: TestRunnerCompletedEvent) => {
+        testRunnersStore.completeSession(
+          event.sessionId,
+          event.status,
+          event.exitCode,
+          event.duration
+        );
+        // Show toast notification for test completion
+        const statusEmoji =
+          event.status === 'passed' ? '✅' : event.status === 'failed' ? '❌' : '⏹️';
+        const statusText =
+          event.status === 'passed' ? 'passed' : event.status === 'failed' ? 'failed' : 'stopped';
+        toast(`${statusEmoji} Tests ${statusText}`, {
+          description: `Exit code: ${event.exitCode ?? 'N/A'}`,
+          duration: 4000,
+        });
+      },
+      [testRunnersStore]
+    )
+  );
+
+  // Test logs panel state
+  const [testLogsPanelOpen, setTestLogsPanelOpen] = useState(false);
+  const [testLogsPanelWorktree, setTestLogsPanelWorktree] = useState<WorktreeInfo | null>(null);
+
+  // Helper to check if tests are running for a specific worktree
+  const isTestRunningForWorktree = useCallback(
+    (worktree: WorktreeInfo): boolean => {
+      return testRunnersStore.isWorktreeRunning(worktree.path);
+    },
+    [testRunnersStore]
+  );
+
+  // Helper to get test session info for a specific worktree
+  const getTestSessionInfo = useCallback(
+    (worktree: WorktreeInfo): TestSessionInfo | undefined => {
+      const session = testRunnersStore.getActiveSession(worktree.path);
+      if (!session) {
+        // Check for completed sessions to show last result
+        const allSessions = Object.values(testRunnersStore.sessions).filter(
+          (s) => s.worktreePath === worktree.path
+        );
+        const lastSession = allSessions.sort(
+          (a, b) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime()
+        )[0];
+        if (lastSession) {
+          return {
+            sessionId: lastSession.sessionId,
+            worktreePath: lastSession.worktreePath,
+            command: lastSession.command,
+            status: lastSession.status as TestSessionInfo['status'],
+            testFile: lastSession.testFile,
+            startedAt: lastSession.startedAt,
+            finishedAt: lastSession.finishedAt,
+            exitCode: lastSession.exitCode,
+            duration: lastSession.duration,
+          };
+        }
+        return undefined;
+      }
+      return {
+        sessionId: session.sessionId,
+        worktreePath: session.worktreePath,
+        command: session.command,
+        status: session.status as TestSessionInfo['status'],
+        testFile: session.testFile,
+        startedAt: session.startedAt,
+        finishedAt: session.finishedAt,
+        exitCode: session.exitCode,
+        duration: session.duration,
+      };
+    },
+    [testRunnersStore]
+  );
+
+  // Handler to start tests for a worktree
+  const handleStartTests = useCallback(
+    async (worktree: WorktreeInfo) => {
+      setIsStartingTests(true);
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.startTests) {
+          toast.error('Test runner API not available');
+          return;
+        }
+
+        const result = await api.worktree.startTests(worktree.path, { projectPath });
+        if (result.success) {
+          toast.success('Tests started', {
+            description: `Running tests in ${worktree.branch}`,
+          });
+        } else {
+          toast.error('Failed to start tests', {
+            description: result.error || 'Unknown error',
+          });
+        }
+      } catch (error) {
+        toast.error('Failed to start tests', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      } finally {
+        setIsStartingTests(false);
+      }
+    },
+    [projectPath]
+  );
+
+  // Handler to stop tests for a worktree
+  const handleStopTests = useCallback(
+    async (worktree: WorktreeInfo) => {
+      try {
+        const session = testRunnersStore.getActiveSession(worktree.path);
+        if (!session) {
+          toast.error('No active test session to stop');
+          return;
+        }
+
+        const api = getElectronAPI();
+        if (!api?.worktree?.stopTests) {
+          toast.error('Test runner API not available');
+          return;
+        }
+
+        const result = await api.worktree.stopTests(session.sessionId);
+        if (result.success) {
+          toast.success('Tests stopped', {
+            description: `Stopped tests in ${worktree.branch}`,
+          });
+        } else {
+          toast.error(result.error || 'Failed to stop tests', {
+            description: result.error || 'Unknown error',
+          });
+        }
+      } catch (error) {
+        toast.error('Failed to stop tests', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    },
+    [testRunnersStore]
+  );
+
+  // Handler to view test logs for a worktree
+  const handleViewTestLogs = useCallback((worktree: WorktreeInfo) => {
+    setTestLogsPanelWorktree(worktree);
+    setTestLogsPanelOpen(true);
+  }, []);
+
+  // Handler to close test logs panel
+  const handleCloseTestLogsPanel = useCallback(() => {
+    setTestLogsPanelOpen(false);
+  }, []);
+
+  // View changes dialog state
+  const [viewChangesDialogOpen, setViewChangesDialogOpen] = useState(false);
+  const [viewChangesWorktree, setViewChangesWorktree] = useState<WorktreeInfo | null>(null);
+
+  // View commits dialog state
+  const [viewCommitsDialogOpen, setViewCommitsDialogOpen] = useState(false);
+  const [viewCommitsWorktree, setViewCommitsWorktree] = useState<WorktreeInfo | null>(null);
+
+  // Discard changes confirmation dialog state
+  const [discardChangesDialogOpen, setDiscardChangesDialogOpen] = useState(false);
+  const [discardChangesWorktree, setDiscardChangesWorktree] = useState<WorktreeInfo | null>(null);
+
+  // Log panel state management
+  const [logPanelOpen, setLogPanelOpen] = useState(false);
+  const [logPanelWorktree, setLogPanelWorktree] = useState<WorktreeInfo | null>(null);
+
+  // Push to remote dialog state
+  const [pushToRemoteDialogOpen, setPushToRemoteDialogOpen] = useState(false);
+  const [pushToRemoteWorktree, setPushToRemoteWorktree] = useState<WorktreeInfo | null>(null);
+
+  // Integrate branch dialog state
+  const [mergeDialogOpen, setMergeDialogOpen] = useState(false);
+  const [mergeWorktree, setMergeWorktree] = useState<WorktreeInfo | null>(null);
+
+  // Select remote dialog state (for pull/push with multiple remotes)
+  const [selectRemoteDialogOpen, setSelectRemoteDialogOpen] = useState(false);
+  const [selectRemoteWorktree, setSelectRemoteWorktree] = useState<WorktreeInfo | null>(null);
+  const [selectRemoteOperation, setSelectRemoteOperation] = useState<SelectRemoteOperation>('pull');
+
+  // Stash dialog states
+  const [stashChangesDialogOpen, setStashChangesDialogOpen] = useState(false);
+  const [stashChangesWorktree, setStashChangesWorktree] = useState<WorktreeInfo | null>(null);
+  const [viewStashesDialogOpen, setViewStashesDialogOpen] = useState(false);
+  const [viewStashesWorktree, setViewStashesWorktree] = useState<WorktreeInfo | null>(null);
+
+  // Cherry-pick dialog states
+  const [cherryPickDialogOpen, setCherryPickDialogOpen] = useState(false);
+  const [cherryPickWorktree, setCherryPickWorktree] = useState<WorktreeInfo | null>(null);
+
+  // Pull dialog states
+  const [pullDialogOpen, setPullDialogOpen] = useState(false);
+  const [pullDialogWorktree, setPullDialogWorktree] = useState<WorktreeInfo | null>(null);
+  const [pullDialogRemote, setPullDialogRemote] = useState<string | undefined>(undefined);
+
+  // Remotes cache: maps worktree path -> list of remotes (fetched when dropdown opens)
+  const [remotesCache, setRemotesCache] = useState<
+    Record<string, Array<{ name: string; url: string }>>
+  >({});
+
+  const isMobile = useIsMobile();
+
+  // NOTE: Periodic polling is handled by React Query's refetchInterval
+  // in hooks/queries/use-worktrees.ts (30s). No separate setInterval needed.
+
+  // Prune stale tracking-remote cache entries and remotes cache when worktrees change
+  useEffect(() => {
+    const activePaths = new Set(worktrees.map((w) => w.path));
+    pruneStaleEntries(activePaths);
+    setRemotesCache((prev) => {
+      const next: typeof prev = {};
+      for (const key of Object.keys(prev)) {
+        if (activePaths.has(key)) {
+          next[key] = prev[key];
+        }
+      }
+      return next;
+    });
+  }, [worktrees, pruneStaleEntries]);
+
+  const isWorktreeSelected = (worktree: WorktreeInfo) => {
+    return worktree.isMain
+      ? currentWorktree === null || currentWorktree === undefined || currentWorktree.path === null
+      : pathsEqual(worktree.path, currentWorktreePath);
+  };
+
+  const handleBranchDropdownOpenChange = (worktree: WorktreeInfo) => (open: boolean) => {
+    if (open) {
+      fetchBranches(worktree.path);
+      resetBranchFilter();
+    }
+  };
+
+  const handleActionsDropdownOpenChange = (worktree: WorktreeInfo) => (open: boolean) => {
+    if (open) {
+      fetchBranches(worktree.path);
+      // Fetch remotes for the submenu when the dropdown opens, but only if not already cached
+      if (!remotesCache[worktree.path]) {
+        const api = getHttpApiClient();
+        api.worktree
+          .listRemotes(worktree.path)
+          .then((result) => {
+            if (result.success && result.result) {
+              setRemotesCache((prev) => ({
+                ...prev,
+                [worktree.path]: result.result!.remotes.map((r) => ({ name: r.name, url: r.url })),
+              }));
+            }
+          })
+          .catch((err) => {
+            console.warn('Failed to fetch remotes for worktree:', err);
+          });
+      }
+    }
+  };
+
+  const handleRunInitScript = useCallback(
+    async (worktree: WorktreeInfo) => {
+      if (!projectPath) return;
+
+      try {
+        const api = getHttpApiClient();
+        const result = await api.worktree.runInitScript(
+          projectPath,
+          worktree.path,
+          worktree.branch
+        );
+
+        if (!result.success) {
+          toast.error('Failed to run init script', {
+            description: result.error,
+          });
+        }
+        // Success feedback will come via WebSocket events (init-started, init-output, init-completed)
+      } catch (error) {
+        toast.error('Failed to run init script', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    },
+    [projectPath]
+  );
+
+  const handleViewChanges = useCallback((worktree: WorktreeInfo) => {
+    setViewChangesWorktree(worktree);
+    setViewChangesDialogOpen(true);
+  }, []);
+
+  const handleViewCommits = useCallback((worktree: WorktreeInfo) => {
+    setViewCommitsWorktree(worktree);
+    setViewCommitsDialogOpen(true);
+  }, []);
+
+  const handleDiscardChanges = useCallback((worktree: WorktreeInfo) => {
+    setDiscardChangesWorktree(worktree);
+    setDiscardChangesDialogOpen(true);
+  }, []);
+
+  const handleDiscardCompleted = useCallback(() => {
+    fetchWorktrees({ silent: true });
+  }, [fetchWorktrees]);
+
+  // Handle stash changes dialog
+  const handleStashChanges = useCallback((worktree: WorktreeInfo) => {
+    setStashChangesWorktree(worktree);
+    setStashChangesDialogOpen(true);
+  }, []);
+
+  const handleStashCompleted = useCallback(() => {
+    fetchWorktrees({ silent: true });
+  }, [fetchWorktrees]);
+
+  // Handle view stashes dialog
+  const handleViewStashes = useCallback((worktree: WorktreeInfo) => {
+    setViewStashesWorktree(worktree);
+    setViewStashesDialogOpen(true);
+  }, []);
+
+  const handleStashApplied = useCallback(() => {
+    fetchWorktrees({ silent: true });
+  }, [fetchWorktrees]);
+
+  // Handle cherry-pick dialog
+  const handleCherryPick = useCallback((worktree: WorktreeInfo) => {
+    setCherryPickWorktree(worktree);
+    setCherryPickDialogOpen(true);
+  }, []);
+
+  const handleCherryPicked = useCallback(() => {
+    fetchWorktrees({ silent: true });
+  }, [fetchWorktrees]);
+
+  // Handle aborting an in-progress merge/rebase/cherry-pick
+  const handleAbortOperation = useCallback(
+    async (worktree: WorktreeInfo) => {
+      try {
+        const api = getHttpApiClient();
+        const result = await api.worktree.abortOperation(worktree.path);
+        if (result.success && result.result) {
+          toast.success(result.result.message || 'Operation aborted successfully');
+          fetchWorktrees({ silent: true });
+        } else {
+          toast.error(result.error || 'Failed to abort operation');
+        }
+      } catch (error) {
+        toast.error('Failed to abort operation', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    },
+    [fetchWorktrees]
+  );
+
+  // Handle continuing an in-progress merge/rebase/cherry-pick after conflict resolution
+  const handleContinueOperation = useCallback(
+    async (worktree: WorktreeInfo) => {
+      try {
+        const api = getHttpApiClient();
+        const result = await api.worktree.continueOperation(worktree.path);
+        if (result.success && result.result) {
+          toast.success(result.result.message || 'Operation continued successfully');
+          fetchWorktrees({ silent: true });
+        } else {
+          toast.error(result.error || 'Failed to continue operation');
+        }
+      } catch (error) {
+        toast.error('Failed to continue operation', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    },
+    [fetchWorktrees]
+  );
+
+  // Handle opening the log panel for a specific worktree
+  const handleViewDevServerLogs = useCallback((worktree: WorktreeInfo) => {
+    setLogPanelWorktree(worktree);
+    setLogPanelOpen(true);
+  }, []);
+
+  // Handle closing the log panel
+  const handleCloseLogPanel = useCallback(() => {
+    setLogPanelOpen(false);
+    // Keep logPanelWorktree set for smooth close animation
+  }, []);
+
+  // Handle opening the push to remote dialog
+  const handlePushNewBranch = useCallback((worktree: WorktreeInfo) => {
+    setPushToRemoteWorktree(worktree);
+    setPushToRemoteDialogOpen(true);
+  }, []);
+
+  // Keep a ref to pullDialogWorktree so handlePullCompleted can access the current
+  // value without including it in the dependency array. If pullDialogWorktree were
+  // a dep of handlePullCompleted, changing it would recreate the callback, which
+  // would propagate into GitPullDialog's onPulled prop and ultimately re-trigger
+  // the pull-check effect inside the dialog (causing the flow to run twice).
+  const pullDialogWorktreeRef = useRef(pullDialogWorktree);
+  useEffect(() => {
+    pullDialogWorktreeRef.current = pullDialogWorktree;
+  }, [pullDialogWorktree]);
+
+  // Handle pull completed - refresh branches and worktrees
+  const handlePullCompleted = useCallback(() => {
+    // Refresh branch data (ahead/behind counts, tracking) and worktree list
+    // after GitPullDialog completes the pull operation
+    if (pullDialogWorktreeRef.current) {
+      fetchBranches(pullDialogWorktreeRef.current.path);
+    }
+    fetchWorktrees({ silent: true });
+  }, [fetchWorktrees, fetchBranches]);
+
+  // Wrapper for onCommit that works with the pull dialog's simpler WorktreeInfo.
+  // Uses the full pullDialogWorktree when available (via ref to avoid making it
+  // a dep that would cascade into handleSuccessfulPull → checkForLocalChanges recreations).
+  const handleCommitMerge = useCallback(
+    (_simpleWorktree: { path: string; branch: string; isMain: boolean }) => {
+      // Prefer the full worktree object we already have (from ref)
+      if (pullDialogWorktreeRef.current) {
+        onCommit(pullDialogWorktreeRef.current);
+      }
+    },
+    [onCommit]
+  );
+
+  // Handle pull with remote selection when multiple remotes exist
+  // Now opens the pull dialog which handles stash management and conflict resolution
+  // If the branch has a tracked remote, pull from it directly (skip the remote selection dialog)
+  const handlePullWithRemoteSelection = useCallback(
+    async (worktree: WorktreeInfo) => {
+      // If the branch already tracks a remote, pull from it directly — no dialog needed
+      const tracked = getTrackingRemote(worktree.path);
+      if (tracked) {
+        setPullDialogRemote(tracked);
+        setPullDialogWorktree(worktree);
+        setPullDialogOpen(true);
+        return;
+      }
+
+      try {
+        const api = getHttpApiClient();
+        const result = await api.worktree.listRemotes(worktree.path);
+
+        if (result.success && result.result && result.result.remotes.length > 1) {
+          // Multiple remotes and no tracking remote - show selection dialog
+          setSelectRemoteWorktree(worktree);
+          setSelectRemoteOperation('pull');
+          setSelectRemoteDialogOpen(true);
+        } else if (result.success && result.result && result.result.remotes.length === 1) {
+          // Exactly one remote - open pull dialog directly with that remote
+          const remoteName = result.result.remotes[0].name;
+          setPullDialogRemote(remoteName);
+          setPullDialogWorktree(worktree);
+          setPullDialogOpen(true);
+        } else {
+          // No remotes - open pull dialog with default
+          setPullDialogRemote(undefined);
+          setPullDialogWorktree(worktree);
+          setPullDialogOpen(true);
+        }
+      } catch {
+        // If listing remotes fails, open pull dialog with default
+        setPullDialogRemote(undefined);
+        setPullDialogWorktree(worktree);
+        setPullDialogOpen(true);
+      }
+    },
+    [getTrackingRemote]
+  );
+
+  // Handle push with remote selection when multiple remotes exist
+  // If the branch has a tracked remote, push to it directly (skip the remote selection dialog)
+  const handlePushWithRemoteSelection = useCallback(
+    async (worktree: WorktreeInfo) => {
+      // If the branch already tracks a remote, push to it directly — no dialog needed
+      const tracked = getTrackingRemote(worktree.path);
+      if (tracked) {
+        handlePush(worktree, tracked);
+        return;
+      }
+
+      try {
+        const api = getHttpApiClient();
+        const result = await api.worktree.listRemotes(worktree.path);
+
+        if (result.success && result.result && result.result.remotes.length > 1) {
+          // Multiple remotes and no tracking remote - show selection dialog
+          setSelectRemoteWorktree(worktree);
+          setSelectRemoteOperation('push');
+          setSelectRemoteDialogOpen(true);
+        } else if (result.success && result.result && result.result.remotes.length === 1) {
+          // Exactly one remote - use it directly
+          const remoteName = result.result.remotes[0].name;
+          handlePush(worktree, remoteName);
+        } else {
+          // No remotes - proceed with default behavior
+          handlePush(worktree);
+        }
+      } catch {
+        // If listing remotes fails, fall back to default behavior
+        handlePush(worktree);
+      }
+    },
+    [handlePush, getTrackingRemote]
+  );
+
+  // Handle confirming remote selection for pull/push
+  const handleConfirmSelectRemote = useCallback(
+    async (worktree: WorktreeInfo, remote: string) => {
+      if (selectRemoteOperation === 'pull') {
+        // Open the pull dialog — let GitPullDialog manage the pull operation
+        // via its useEffect and onPulled callback (handlePullCompleted)
+        setPullDialogRemote(remote);
+        setPullDialogWorktree(worktree);
+        setPullDialogOpen(true);
+      } else {
+        await handlePush(worktree, remote);
+        fetchBranches(worktree.path);
+        fetchWorktrees({ silent: true });
+      }
+    },
+    [selectRemoteOperation, handlePush, fetchBranches, fetchWorktrees]
+  );
+
+  // Handle pull with a specific remote selected from the submenu (bypasses the remote selection dialog)
+  const handlePullWithSpecificRemote = useCallback((worktree: WorktreeInfo, remote: string) => {
+    // Open the pull dialog — let GitPullDialog manage the pull operation
+    // via its useEffect and onPulled callback (handlePullCompleted)
+    setPullDialogRemote(remote);
+    setPullDialogWorktree(worktree);
+    setPullDialogOpen(true);
+  }, []);
+
+  // Handle push to a specific remote selected from the submenu (bypasses the remote selection dialog)
+  const handlePushWithSpecificRemote = useCallback(
+    async (worktree: WorktreeInfo, remote: string) => {
+      await handlePush(worktree, remote);
+      fetchBranches(worktree.path);
+      fetchWorktrees({ silent: true });
+    },
+    [handlePush, fetchBranches, fetchWorktrees]
+  );
+
+  // Handle sync (pull + push) with optional remote selection
+  const handleSyncWithRemoteSelection = useCallback(
+    (worktree: WorktreeInfo) => {
+      handleSync(worktree);
+    },
+    [handleSync]
+  );
+
+  // Handle sync with a specific remote selected from the submenu
+  const handleSyncWithSpecificRemote = useCallback(
+    (worktree: WorktreeInfo, remote: string) => {
+      handleSync(worktree, remote);
+    },
+    [handleSync]
+  );
+
+  // Handle set tracking branch for a specific remote
+  const handleSetTrackingForRemote = useCallback(
+    (worktree: WorktreeInfo, remote: string) => {
+      handleSetTracking(worktree, remote);
+    },
+    [handleSetTracking]
+  );
+
+  // Handle confirming the push to remote dialog
+  const handleConfirmPushToRemote = useCallback(
+    async (worktree: WorktreeInfo, remote: string) => {
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.push) {
+          toast.error('Push API not available');
+          return;
+        }
+        const result = await api.worktree.push(worktree.path, false, remote);
+        if (result.success && result.result) {
+          toast.success(result.result.message);
+          fetchBranches(worktree.path);
+          fetchWorktrees();
+        } else {
+          toast.error(result.error || 'Failed to push changes');
+        }
+      } catch {
+        toast.error('Failed to push changes');
+      }
+    },
+    [fetchBranches, fetchWorktrees]
+  );
+
+  // Handle opening the merge dialog
+  const handleMerge = useCallback((worktree: WorktreeInfo) => {
+    setMergeWorktree(worktree);
+    setMergeDialogOpen(true);
+  }, []);
+
+  // Handle integration completion - refresh worktrees and reassign features if branch was deleted
+  const handleIntegrated = useCallback(
+    (integratedWorktree: WorktreeInfo, deletedBranch: boolean) => {
+      fetchWorktrees();
+      // If the branch was deleted, notify parent to reassign features to main
+      if (deletedBranch && onBranchDeletedDuringMerge) {
+        onBranchDeletedDuringMerge(integratedWorktree.branch);
+      }
+    },
+    [fetchWorktrees, onBranchDeletedDuringMerge]
+  );
+
+  const mainWorktree = worktrees.find((w) => w.isMain);
+
+  // Mobile view: single dropdown for all worktrees
+  if (isMobile) {
+    // Find the currently selected worktree for the actions menu
+    const selectedWorktree = worktrees.find((w) => isWorktreeSelected(w)) || mainWorktree;
+
+    return (
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-glass/50 backdrop-blur-sm">
+        <WorktreeMobileDropdown
+          worktrees={worktrees}
+          isWorktreeSelected={isWorktreeSelected}
+          hasRunningFeatures={hasRunningFeatures}
+          isDevServerRunning={isDevServerRunning}
+          isDevServerStarting={isDevServerStarting}
+          getDevServerInfo={getDevServerInfo}
+          isActivating={isActivating}
+          branchCardCounts={branchCardCounts}
+          onSelectWorktree={handleSelectWorktree}
+        />
+
+        {/* Branch switch dropdown for the selected worktree */}
+        {selectedWorktree && (
+          <BranchSwitchDropdown
+            worktree={selectedWorktree}
+            isSelected={true}
+            standalone={true}
+            branches={branches}
+            filteredBranches={filteredBranches}
+            branchFilter={branchFilter}
+            isLoadingBranches={isLoadingBranches}
+            isSwitching={isSwitching}
+            onOpenChange={handleBranchDropdownOpenChange(selectedWorktree)}
+            onFilterChange={setBranchFilter}
+            onSwitchBranch={handleSwitchBranch}
+            onCreateBranch={onCreateBranch}
+          />
+        )}
+
+        {/* Actions menu for the selected worktree */}
+        {selectedWorktree && (
+          <WorktreeActionsDropdown
+            worktree={selectedWorktree}
+            isSelected={true}
+            standalone={true}
+            aheadCount={aheadCount}
+            behindCount={behindCount}
+            hasRemoteBranch={hasRemoteBranch}
+            trackingRemote={getTrackingRemote(selectedWorktree.path)}
+            isPulling={isPulling}
+            isPushing={isPushing}
+            isStartingAnyDevServer={isStartingAnyDevServer}
+            isDevServerStarting={isDevServerStarting(selectedWorktree)}
+            isDevServerRunning={isDevServerRunning(selectedWorktree)}
+            devServerInfo={getDevServerInfo(selectedWorktree)}
+            gitRepoStatus={gitRepoStatus}
+            isLoadingGitStatus={isLoadingBranches}
+            isAutoModeRunning={isAutoModeRunningForWorktree(selectedWorktree)}
+            hasTestCommand={hasTestCommand}
+            isStartingTests={isStartingTests}
+            isTestRunning={isTestRunningForWorktree(selectedWorktree)}
+            testSessionInfo={getTestSessionInfo(selectedWorktree)}
+            remotes={remotesCache[selectedWorktree.path]}
+            onOpenChange={handleActionsDropdownOpenChange(selectedWorktree)}
+            onPull={handlePullWithRemoteSelection}
+            onPush={handlePushWithRemoteSelection}
+            onPushNewBranch={handlePushNewBranch}
+            onPullWithRemote={handlePullWithSpecificRemote}
+            onPushWithRemote={handlePushWithSpecificRemote}
+            isSyncing={isSyncing}
+            onSync={handleSyncWithRemoteSelection}
+            onSyncWithRemote={handleSyncWithSpecificRemote}
+            onSetTracking={handleSetTrackingForRemote}
+            remotesWithBranch={remotesWithBranch}
+            onOpenInEditor={handleOpenInEditor}
+            onOpenInIntegratedTerminal={handleOpenInIntegratedTerminal}
+            onOpenInExternalTerminal={handleOpenInExternalTerminal}
+            onViewChanges={handleViewChanges}
+            onViewCommits={handleViewCommits}
+            onDiscardChanges={handleDiscardChanges}
+            onCommit={onCommit}
+            onCreatePR={onCreatePR}
+            onChangePRNumber={onChangePRNumber}
+            onAddressPRComments={onAddressPRComments}
+            onAutoAddressPRComments={onAutoAddressPRComments}
+            onResolveConflicts={onResolveConflicts}
+            onMerge={handleMerge}
+            onDeleteWorktree={onDeleteWorktree}
+            onStartDevServer={handleStartDevServer}
+            onStopDevServer={handleStopDevServer}
+            onOpenDevServerUrl={handleOpenDevServerUrl}
+            onViewDevServerLogs={handleViewDevServerLogs}
+            onRunInitScript={handleRunInitScript}
+            onToggleAutoMode={handleToggleAutoMode}
+            onStartTests={handleStartTests}
+            onStopTests={handleStopTests}
+            onViewTestLogs={handleViewTestLogs}
+            onStashChanges={handleStashChanges}
+            onViewStashes={handleViewStashes}
+            onCherryPick={handleCherryPick}
+            onAbortOperation={handleAbortOperation}
+            onContinueOperation={handleContinueOperation}
+            onCreateConflictResolutionFeature={onCreateMergeConflictResolutionFeature}
+            hasInitScript={hasInitScript}
+            terminalScripts={terminalScripts}
+            onRunTerminalScript={handleRunTerminalScript}
+            onEditScripts={handleEditScripts}
+          />
+        )}
+
+        {useWorktreesEnabled && (
+          <>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground shrink-0"
+              onClick={onCreateWorktree}
+              title="Create new worktree"
+            >
+              <Plus className="w-4 h-4" />
+            </Button>
+
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground shrink-0"
+              onClick={async () => {
+                const removedWorktrees = await fetchWorktrees();
+                if (removedWorktrees && removedWorktrees.length > 0 && onRemovedWorktrees) {
+                  onRemovedWorktrees(removedWorktrees);
+                }
+              }}
+              disabled={isLoading}
+              title="Refresh worktrees"
+            >
+              {isLoading ? <Spinner size="xs" /> : <RefreshCw className="w-3.5 h-3.5" />}
+            </Button>
+          </>
+        )}
+
+        {/* View Changes Dialog */}
+        <ViewWorktreeChangesDialog
+          open={viewChangesDialogOpen}
+          onOpenChange={setViewChangesDialogOpen}
+          worktree={viewChangesWorktree}
+          projectPath={projectPath}
+        />
+
+        {/* View Commits Dialog */}
+        <ViewCommitsDialog
+          open={viewCommitsDialogOpen}
+          onOpenChange={setViewCommitsDialogOpen}
+          worktree={viewCommitsWorktree}
+        />
+
+        {/* Discard Changes Dialog */}
+        <DiscardWorktreeChangesDialog
+          open={discardChangesDialogOpen}
+          onOpenChange={setDiscardChangesDialogOpen}
+          worktree={discardChangesWorktree}
+          onDiscarded={handleDiscardCompleted}
+        />
+
+        {/* Stash Changes Dialog */}
+        <StashChangesDialog
+          open={stashChangesDialogOpen}
+          onOpenChange={setStashChangesDialogOpen}
+          worktree={stashChangesWorktree}
+          onStashed={handleStashCompleted}
+        />
+
+        {/* Stash Confirm Dialog for Branch Switching */}
+        <StashConfirmDialog
+          open={!!pendingSwitch}
+          onOpenChange={(isOpen) => {
+            if (!isOpen) cancelPendingSwitch();
+          }}
+          operationDescription={
+            pendingSwitch ? `switch to branch '${pendingSwitch.branchName}'` : ''
+          }
+          changesInfo={pendingSwitch?.changesInfo ?? null}
+          onConfirm={confirmPendingSwitch}
+          isLoading={isSwitching}
+        />
+
+        {/* View Stashes Dialog */}
+        <ViewStashesDialog
+          open={viewStashesDialogOpen}
+          onOpenChange={setViewStashesDialogOpen}
+          worktree={viewStashesWorktree}
+          onStashApplied={handleStashApplied}
+          onStashApplyConflict={onStashApplyConflict}
+        />
+
+        {/* Cherry Pick Dialog */}
+        <CherryPickDialog
+          open={cherryPickDialogOpen}
+          onOpenChange={setCherryPickDialogOpen}
+          worktree={cherryPickWorktree}
+          onCherryPicked={handleCherryPicked}
+          onCreateConflictResolutionFeature={onCreateMergeConflictResolutionFeature}
+        />
+
+        {/* Git Pull Dialog */}
+        <GitPullDialog
+          open={pullDialogOpen}
+          onOpenChange={setPullDialogOpen}
+          worktree={pullDialogWorktree}
+          remote={pullDialogRemote}
+          onPulled={handlePullCompleted}
+          onCreateConflictResolutionFeature={onCreateMergeConflictResolutionFeature}
+          onCommitMerge={handleCommitMerge}
+        />
+
+        {/* Dev Server Logs Panel */}
+        <DevServerLogsPanel
+          open={logPanelOpen}
+          onClose={handleCloseLogPanel}
+          worktree={logPanelWorktree}
+          onStopDevServer={handleStopDevServer}
+          onOpenDevServerUrl={handleOpenDevServerUrl}
+        />
+
+        {/* Push to Remote Dialog */}
+        <PushToRemoteDialog
+          open={pushToRemoteDialogOpen}
+          onOpenChange={setPushToRemoteDialogOpen}
+          worktree={pushToRemoteWorktree}
+          onConfirm={handleConfirmPushToRemote}
+        />
+
+        {/* Select Remote Dialog (for pull/push with multiple remotes) */}
+        <SelectRemoteDialog
+          open={selectRemoteDialogOpen}
+          onOpenChange={setSelectRemoteDialogOpen}
+          worktree={selectRemoteWorktree}
+          operation={selectRemoteOperation}
+          onConfirm={handleConfirmSelectRemote}
+        />
+
+        {/* Integrate Branch Dialog */}
+        <MergeWorktreeDialog
+          open={mergeDialogOpen}
+          onOpenChange={setMergeDialogOpen}
+          projectPath={projectPath}
+          worktree={mergeWorktree}
+          onIntegrated={handleIntegrated}
+          onCreateConflictResolutionFeature={onCreateMergeConflictResolutionFeature}
+        />
+
+        {/* Test Logs Panel */}
+        <TestLogsPanel
+          open={testLogsPanelOpen}
+          onClose={handleCloseTestLogsPanel}
+          worktreePath={testLogsPanelWorktree?.path ?? null}
+          branch={testLogsPanelWorktree?.branch}
+          onStopTests={
+            testLogsPanelWorktree ? () => handleStopTests(testLogsPanelWorktree) : undefined
+          }
+        />
+      </div>
+    );
+  }
+
+  // Desktop view: pinned worktrees as individual tabs (each slot can be swapped)
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 px-4 py-2.5 border-b border-border bg-glass/50 backdrop-blur-sm">
+      <GitBranch className="w-4 h-4 text-muted-foreground shrink-0" />
+      <span className="text-sm text-muted-foreground mr-2 shrink-0">Worktree:</span>
+
+      {/* When only 1 pinned slot (main only) and there are other worktrees,
+          use a compact dropdown to switch between them without highlighting main */}
+      {pinnedWorktreesCount === 0 && availableWorktreesForSwap.length > 0 ? (
+        <WorktreeDropdown
+          worktrees={worktrees}
+          isWorktreeSelected={isWorktreeSelected}
+          hasRunningFeatures={hasRunningFeatures}
+          isActivating={isActivating}
+          branchCardCounts={branchCardCounts}
+          isDevServerRunning={isDevServerRunning}
+          isDevServerStarting={isDevServerStarting}
+          getDevServerInfo={getDevServerInfo}
+          isAutoModeRunningForWorktree={isAutoModeRunningForWorktree}
+          isTestRunningForWorktree={isTestRunningForWorktree}
+          getTestSessionInfo={getTestSessionInfo}
+          onSelectWorktree={handleSelectWorktree}
+          branches={branches}
+          filteredBranches={filteredBranches}
+          branchFilter={branchFilter}
+          isLoadingBranches={isLoadingBranches}
+          isSwitching={isSwitching}
+          onBranchDropdownOpenChange={handleBranchDropdownOpenChange}
+          onBranchFilterChange={setBranchFilter}
+          onSwitchBranch={handleSwitchBranch}
+          onCreateBranch={onCreateBranch}
+          isPulling={isPulling}
+          isPushing={isPushing}
+          isStartingAnyDevServer={isStartingAnyDevServer}
+          aheadCount={aheadCount}
+          behindCount={behindCount}
+          hasRemoteBranch={hasRemoteBranch}
+          getTrackingRemote={getTrackingRemote}
+          gitRepoStatus={gitRepoStatus}
+          hasTestCommand={hasTestCommand}
+          isStartingTests={isStartingTests}
+          hasInitScript={hasInitScript}
+          onActionsDropdownOpenChange={handleActionsDropdownOpenChange}
+          onPull={handlePullWithRemoteSelection}
+          onPush={handlePushWithRemoteSelection}
+          onPushNewBranch={handlePushNewBranch}
+          onPullWithRemote={handlePullWithSpecificRemote}
+          onPushWithRemote={handlePushWithSpecificRemote}
+          remotesCache={remotesCache}
+          onOpenInEditor={handleOpenInEditor}
+          onOpenInIntegratedTerminal={handleOpenInIntegratedTerminal}
+          onOpenInExternalTerminal={handleOpenInExternalTerminal}
+          onViewChanges={handleViewChanges}
+          onViewCommits={handleViewCommits}
+          onDiscardChanges={handleDiscardChanges}
+          onCommit={onCommit}
+          onCreatePR={onCreatePR}
+          onChangePRNumber={onChangePRNumber}
+          onAddressPRComments={onAddressPRComments}
+          onAutoAddressPRComments={onAutoAddressPRComments}
+          onResolveConflicts={onResolveConflicts}
+          onMerge={handleMerge}
+          onDeleteWorktree={onDeleteWorktree}
+          onStartDevServer={handleStartDevServer}
+          onStopDevServer={handleStopDevServer}
+          onOpenDevServerUrl={handleOpenDevServerUrl}
+          onViewDevServerLogs={handleViewDevServerLogs}
+          onRunInitScript={handleRunInitScript}
+          onToggleAutoMode={handleToggleAutoMode}
+          onStartTests={handleStartTests}
+          onStopTests={handleStopTests}
+          onViewTestLogs={handleViewTestLogs}
+          onStashChanges={handleStashChanges}
+          onViewStashes={handleViewStashes}
+          onCherryPick={handleCherryPick}
+          onAbortOperation={handleAbortOperation}
+          onContinueOperation={handleContinueOperation}
+          onCreateConflictResolutionFeature={onCreateMergeConflictResolutionFeature}
+          terminalScripts={terminalScripts}
+          onRunTerminalScript={handleRunTerminalScript}
+          onEditScripts={handleEditScripts}
+          highlightTrigger={false}
+        />
+      ) : pinnedWorktreesCount === 0 ? (
+        /* Only main worktree, no others exist - render main tab without highlight */
+        mainWorktree && (
+          <WorktreeTab
+            worktree={mainWorktree}
+            cardCount={branchCardCounts?.[mainWorktree.branch]}
+            hasChanges={mainWorktree.hasChanges}
+            changedFilesCount={mainWorktree.changedFilesCount}
+            isSelected={false}
+            isRunning={hasRunningFeatures(mainWorktree)}
+            isActivating={isActivating}
+            isDevServerRunning={isDevServerRunning(mainWorktree)}
+            isDevServerStarting={isDevServerStarting(mainWorktree)}
+            devServerInfo={getDevServerInfo(mainWorktree)}
+            branches={branches}
+            filteredBranches={filteredBranches}
+            branchFilter={branchFilter}
+            isLoadingBranches={isLoadingBranches}
+            isSwitching={isSwitching}
+            isPulling={isPulling}
+            isPushing={isPushing}
+            isStartingAnyDevServer={isStartingAnyDevServer}
+            aheadCount={aheadCount}
+            behindCount={behindCount}
+            hasRemoteBranch={hasRemoteBranch}
+            trackingRemote={getTrackingRemote(mainWorktree.path)}
+            gitRepoStatus={gitRepoStatus}
+            isAutoModeRunning={isAutoModeRunningForWorktree(mainWorktree)}
+            isStartingTests={isStartingTests}
+            isTestRunning={isTestRunningForWorktree(mainWorktree)}
+            testSessionInfo={getTestSessionInfo(mainWorktree)}
+            onSelectWorktree={handleSelectWorktree}
+            onBranchDropdownOpenChange={handleBranchDropdownOpenChange(mainWorktree)}
+            onActionsDropdownOpenChange={handleActionsDropdownOpenChange(mainWorktree)}
+            onBranchFilterChange={setBranchFilter}
+            onSwitchBranch={handleSwitchBranch}
+            onCreateBranch={onCreateBranch}
+            onPull={handlePullWithRemoteSelection}
+            onPush={handlePushWithRemoteSelection}
+            onPushNewBranch={handlePushNewBranch}
+            onPullWithRemote={handlePullWithSpecificRemote}
+            onPushWithRemote={handlePushWithSpecificRemote}
+            isSyncing={isSyncing}
+            onSync={handleSyncWithRemoteSelection}
+            onSyncWithRemote={handleSyncWithSpecificRemote}
+            onSetTracking={handleSetTrackingForRemote}
+            remotesWithBranch={remotesWithBranch}
+            remotes={remotesCache[mainWorktree.path]}
+            onOpenInEditor={handleOpenInEditor}
+            onOpenInIntegratedTerminal={handleOpenInIntegratedTerminal}
+            onOpenInExternalTerminal={handleOpenInExternalTerminal}
+            onViewChanges={handleViewChanges}
+            onViewCommits={handleViewCommits}
+            onDiscardChanges={handleDiscardChanges}
+            onCommit={onCommit}
+            onCreatePR={onCreatePR}
+            onChangePRNumber={onChangePRNumber}
+            onAddressPRComments={onAddressPRComments}
+            onAutoAddressPRComments={onAutoAddressPRComments}
+            onResolveConflicts={onResolveConflicts}
+            onMerge={handleMerge}
+            onDeleteWorktree={onDeleteWorktree}
+            onStartDevServer={handleStartDevServer}
+            onStopDevServer={handleStopDevServer}
+            onOpenDevServerUrl={handleOpenDevServerUrl}
+            onViewDevServerLogs={handleViewDevServerLogs}
+            onRunInitScript={handleRunInitScript}
+            onToggleAutoMode={handleToggleAutoMode}
+            onStartTests={handleStartTests}
+            onStopTests={handleStopTests}
+            onViewTestLogs={handleViewTestLogs}
+            onStashChanges={handleStashChanges}
+            onViewStashes={handleViewStashes}
+            onCherryPick={handleCherryPick}
+            onAbortOperation={handleAbortOperation}
+            onContinueOperation={handleContinueOperation}
+            onCreateConflictResolutionFeature={onCreateMergeConflictResolutionFeature}
+            hasInitScript={hasInitScript}
+            hasTestCommand={hasTestCommand}
+            terminalScripts={terminalScripts}
+            onRunTerminalScript={handleRunTerminalScript}
+            onEditScripts={handleEditScripts}
+          />
+        )
+      ) : (
+        /* Multiple pinned slots - show individual tabs */
+        pinnedWorktrees.map((worktree, index) => {
+          const hasOtherWorktrees = worktrees.length > 1;
+          const effectiveIsSelected =
+            isWorktreeSelected(worktree) && (hasOtherWorktrees || !worktree.isMain);
+
+          // Slot index for swap (0-based, excluding main which is always slot 0)
+          const slotIndex = worktree.isMain ? -1 : index - (pinnedWorktrees[0]?.isMain ? 1 : 0);
+
+          return (
+            <WorktreeTab
+              key={worktree.path}
+              worktree={worktree}
+              cardCount={branchCardCounts?.[worktree.branch]}
+              hasChanges={worktree.hasChanges}
+              changedFilesCount={worktree.changedFilesCount}
+              isSelected={effectiveIsSelected}
+              isRunning={hasRunningFeatures(worktree)}
+              isActivating={isActivating}
+              isDevServerRunning={isDevServerRunning(worktree)}
+              isDevServerStarting={isDevServerStarting(worktree)}
+              devServerInfo={getDevServerInfo(worktree)}
+              branches={branches}
+              filteredBranches={filteredBranches}
+              branchFilter={branchFilter}
+              isLoadingBranches={isLoadingBranches}
+              isSwitching={isSwitching}
+              isPulling={isPulling}
+              isPushing={isPushing}
+              isStartingAnyDevServer={isStartingAnyDevServer}
+              aheadCount={aheadCount}
+              behindCount={behindCount}
+              hasRemoteBranch={hasRemoteBranch}
+              trackingRemote={getTrackingRemote(worktree.path)}
+              gitRepoStatus={gitRepoStatus}
+              isAutoModeRunning={isAutoModeRunningForWorktree(worktree)}
+              isStartingTests={isStartingTests}
+              isTestRunning={isTestRunningForWorktree(worktree)}
+              testSessionInfo={getTestSessionInfo(worktree)}
+              onSelectWorktree={handleSelectWorktree}
+              onBranchDropdownOpenChange={handleBranchDropdownOpenChange(worktree)}
+              onActionsDropdownOpenChange={handleActionsDropdownOpenChange(worktree)}
+              onBranchFilterChange={setBranchFilter}
+              onSwitchBranch={handleSwitchBranch}
+              onCreateBranch={onCreateBranch}
+              onPull={handlePullWithRemoteSelection}
+              onPush={handlePushWithRemoteSelection}
+              onPushNewBranch={handlePushNewBranch}
+              onPullWithRemote={handlePullWithSpecificRemote}
+              onPushWithRemote={handlePushWithSpecificRemote}
+              remotes={remotesCache[worktree.path]}
+              onOpenInEditor={handleOpenInEditor}
+              onOpenInIntegratedTerminal={handleOpenInIntegratedTerminal}
+              onOpenInExternalTerminal={handleOpenInExternalTerminal}
+              onViewChanges={handleViewChanges}
+              onViewCommits={handleViewCommits}
+              onDiscardChanges={handleDiscardChanges}
+              onCommit={onCommit}
+              onCreatePR={onCreatePR}
+              onChangePRNumber={onChangePRNumber}
+              onAddressPRComments={onAddressPRComments}
+              onAutoAddressPRComments={onAutoAddressPRComments}
+              onResolveConflicts={onResolveConflicts}
+              onMerge={handleMerge}
+              onDeleteWorktree={onDeleteWorktree}
+              onStartDevServer={handleStartDevServer}
+              onStopDevServer={handleStopDevServer}
+              onOpenDevServerUrl={handleOpenDevServerUrl}
+              onViewDevServerLogs={handleViewDevServerLogs}
+              onRunInitScript={handleRunInitScript}
+              onToggleAutoMode={handleToggleAutoMode}
+              onStartTests={handleStartTests}
+              onStopTests={handleStopTests}
+              onViewTestLogs={handleViewTestLogs}
+              onStashChanges={handleStashChanges}
+              onViewStashes={handleViewStashes}
+              onCherryPick={handleCherryPick}
+              onAbortOperation={handleAbortOperation}
+              onContinueOperation={handleContinueOperation}
+              onCreateConflictResolutionFeature={onCreateMergeConflictResolutionFeature}
+              hasInitScript={hasInitScript}
+              hasTestCommand={hasTestCommand}
+              terminalScripts={terminalScripts}
+              onRunTerminalScript={handleRunTerminalScript}
+              onEditScripts={handleEditScripts}
+              availableWorktreesForSwap={!worktree.isMain ? availableWorktreesForSwap : undefined}
+              slotIndex={slotIndex >= 0 ? slotIndex : undefined}
+              onSwapWorktree={slotIndex >= 0 ? handleSwapWorktreeSlot : undefined}
+              pinnedBranches={pinnedWorktrees.map((w) => w.branch)}
+              isSyncing={isSyncing}
+              onSync={handleSyncWithRemoteSelection}
+              onSyncWithRemote={handleSyncWithSpecificRemote}
+              onSetTracking={handleSetTrackingForRemote}
+            />
+          );
+        })
+      )}
+
+      {/* Create and refresh buttons */}
+      {useWorktreesEnabled && (
+        <>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
+            onClick={onCreateWorktree}
+            title="Create new worktree"
+          >
+            <Plus className="w-4 h-4" />
+          </Button>
+
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
+            onClick={async () => {
+              const removedWorktrees = await fetchWorktrees();
+              if (removedWorktrees && removedWorktrees.length > 0 && onRemovedWorktrees) {
+                onRemovedWorktrees(removedWorktrees);
+              }
+            }}
+            disabled={isLoading}
+            title="Refresh worktrees"
+          >
+            {isLoading ? <Spinner size="xs" /> : <RefreshCw className="w-3.5 h-3.5" />}
+          </Button>
+        </>
+      )}
+
+      {/* View Changes Dialog */}
+      <ViewWorktreeChangesDialog
+        open={viewChangesDialogOpen}
+        onOpenChange={setViewChangesDialogOpen}
+        worktree={viewChangesWorktree}
+        projectPath={projectPath}
+      />
+
+      {/* View Commits Dialog */}
+      <ViewCommitsDialog
+        open={viewCommitsDialogOpen}
+        onOpenChange={setViewCommitsDialogOpen}
+        worktree={viewCommitsWorktree}
+      />
+
+      {/* Discard Changes Dialog */}
+      <DiscardWorktreeChangesDialog
+        open={discardChangesDialogOpen}
+        onOpenChange={setDiscardChangesDialogOpen}
+        worktree={discardChangesWorktree}
+        onDiscarded={handleDiscardCompleted}
+      />
+
+      {/* Dev Server Logs Panel */}
+      <DevServerLogsPanel
+        open={logPanelOpen}
+        onClose={handleCloseLogPanel}
+        worktree={logPanelWorktree}
+        onStopDevServer={handleStopDevServer}
+        onOpenDevServerUrl={handleOpenDevServerUrl}
+      />
+
+      {/* Push to Remote Dialog */}
+      <PushToRemoteDialog
+        open={pushToRemoteDialogOpen}
+        onOpenChange={setPushToRemoteDialogOpen}
+        worktree={pushToRemoteWorktree}
+        onConfirm={handleConfirmPushToRemote}
+      />
+
+      {/* Select Remote Dialog (for pull/push with multiple remotes) */}
+      <SelectRemoteDialog
+        open={selectRemoteDialogOpen}
+        onOpenChange={setSelectRemoteDialogOpen}
+        worktree={selectRemoteWorktree}
+        operation={selectRemoteOperation}
+        onConfirm={handleConfirmSelectRemote}
+      />
+
+      {/* Integrate Branch Dialog */}
+      <MergeWorktreeDialog
+        open={mergeDialogOpen}
+        onOpenChange={setMergeDialogOpen}
+        projectPath={projectPath}
+        worktree={mergeWorktree}
+        onIntegrated={handleIntegrated}
+        onCreateConflictResolutionFeature={onCreateMergeConflictResolutionFeature}
+      />
+
+      {/* Test Logs Panel */}
+      <TestLogsPanel
+        open={testLogsPanelOpen}
+        onClose={handleCloseTestLogsPanel}
+        worktreePath={testLogsPanelWorktree?.path ?? null}
+        branch={testLogsPanelWorktree?.branch}
+        onStopTests={
+          testLogsPanelWorktree ? () => handleStopTests(testLogsPanelWorktree) : undefined
+        }
+      />
+
+      {/* Stash Changes Dialog */}
+      <StashChangesDialog
+        open={stashChangesDialogOpen}
+        onOpenChange={setStashChangesDialogOpen}
+        worktree={stashChangesWorktree}
+        onStashed={handleStashCompleted}
+      />
+
+      {/* Stash Confirm Dialog for Branch Switching */}
+      <StashConfirmDialog
+        open={!!pendingSwitch}
+        onOpenChange={(isOpen) => {
+          if (!isOpen) cancelPendingSwitch();
+        }}
+        operationDescription={pendingSwitch ? `switch to branch '${pendingSwitch.branchName}'` : ''}
+        changesInfo={pendingSwitch?.changesInfo ?? null}
+        onConfirm={confirmPendingSwitch}
+        isLoading={isSwitching}
+      />
+
+      {/* View Stashes Dialog */}
+      <ViewStashesDialog
+        open={viewStashesDialogOpen}
+        onOpenChange={setViewStashesDialogOpen}
+        worktree={viewStashesWorktree}
+        onStashApplied={handleStashApplied}
+        onStashApplyConflict={onStashApplyConflict}
+      />
+
+      {/* Cherry Pick Dialog */}
+      <CherryPickDialog
+        open={cherryPickDialogOpen}
+        onOpenChange={setCherryPickDialogOpen}
+        worktree={cherryPickWorktree}
+        onCherryPicked={handleCherryPicked}
+        onCreateConflictResolutionFeature={onCreateMergeConflictResolutionFeature}
+      />
+
+      {/* Git Pull Dialog */}
+      <GitPullDialog
+        open={pullDialogOpen}
+        onOpenChange={setPullDialogOpen}
+        worktree={pullDialogWorktree}
+        remote={pullDialogRemote}
+        onPulled={handlePullCompleted}
+        onCommitMerge={handleCommitMerge}
+        onCreateConflictResolutionFeature={onCreateMergeConflictResolutionFeature}
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/chat-history.tsx b/temp_repo/apps/ui/src/components/views/chat-history.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ef107d3faf1285729eb5cbfe77154d3bd036d346
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/chat-history.tsx
@@ -0,0 +1,340 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { UIEvent } from 'react';
+import { useAppStore, ChatSession } from '@/store/app-store';
+import { useShallow } from 'zustand/react/shallow';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Plus,
+  MessageSquare,
+  Archive,
+  Trash2,
+  MoreVertical,
+  Search,
+  ChevronLeft,
+  ArchiveRestore,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { Badge } from '@/components/ui/badge';
+
+const CHAT_SESSION_ROW_HEIGHT_PX = 84;
+const CHAT_SESSION_OVERSCAN_COUNT = 6;
+const CHAT_SESSION_LIST_PADDING_PX = 8;
+
+export function ChatHistory() {
+  const {
+    chatSessions,
+    currentProject,
+    currentChatSession,
+    chatHistoryOpen,
+    createChatSession,
+    setCurrentChatSession,
+    archiveChatSession,
+    unarchiveChatSession,
+    deleteChatSession,
+    setChatHistoryOpen,
+  } = useAppStore(
+    useShallow((state) => ({
+      chatSessions: state.chatSessions,
+      currentProject: state.currentProject,
+      currentChatSession: state.currentChatSession,
+      chatHistoryOpen: state.chatHistoryOpen,
+      createChatSession: state.createChatSession,
+      setCurrentChatSession: state.setCurrentChatSession,
+      archiveChatSession: state.archiveChatSession,
+      unarchiveChatSession: state.unarchiveChatSession,
+      deleteChatSession: state.deleteChatSession,
+      setChatHistoryOpen: state.setChatHistoryOpen,
+    }))
+  );
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showArchived, setShowArchived] = useState(false);
+  const listRef = useRef<HTMLDivElement>(null);
+  const scrollRafRef = useRef<number | null>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewportHeight, setViewportHeight] = useState(0);
+
+  const normalizedQuery = searchQuery.trim().toLowerCase();
+  const currentProjectId = currentProject?.id;
+
+  // Filter sessions for current project
+  const projectSessions = useMemo(() => {
+    if (!currentProjectId) return [];
+    return chatSessions.filter((session) => session.projectId === currentProjectId);
+  }, [chatSessions, currentProjectId]);
+
+  // Filter by search query and archived status
+  const filteredSessions = useMemo(() => {
+    return projectSessions.filter((session) => {
+      const matchesSearch = session.title.toLowerCase().includes(normalizedQuery);
+      const matchesArchivedStatus = showArchived ? session.archived : !session.archived;
+      return matchesSearch && matchesArchivedStatus;
+    });
+  }, [projectSessions, normalizedQuery, showArchived]);
+
+  // Sort by most recently updated
+  const sortedSessions = useMemo(() => {
+    return [...filteredSessions].sort(
+      (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+    );
+  }, [filteredSessions]);
+
+  const totalHeight =
+    sortedSessions.length * CHAT_SESSION_ROW_HEIGHT_PX + CHAT_SESSION_LIST_PADDING_PX * 2;
+  const startIndex = Math.max(
+    0,
+    Math.floor(scrollTop / CHAT_SESSION_ROW_HEIGHT_PX) - CHAT_SESSION_OVERSCAN_COUNT
+  );
+  const endIndex = Math.min(
+    sortedSessions.length,
+    Math.ceil((scrollTop + viewportHeight) / CHAT_SESSION_ROW_HEIGHT_PX) +
+      CHAT_SESSION_OVERSCAN_COUNT
+  );
+  const offsetTop = startIndex * CHAT_SESSION_ROW_HEIGHT_PX;
+  const visibleSessions = sortedSessions.slice(startIndex, endIndex);
+
+  const handleScroll = useCallback((event: UIEvent<HTMLDivElement>) => {
+    const target = event.currentTarget;
+    if (scrollRafRef.current !== null) {
+      cancelAnimationFrame(scrollRafRef.current);
+    }
+    scrollRafRef.current = requestAnimationFrame(() => {
+      setScrollTop(target.scrollTop);
+      scrollRafRef.current = null;
+    });
+  }, []);
+
+  useEffect(() => {
+    const container = listRef.current;
+    if (!container || typeof window === 'undefined') return;
+
+    const updateHeight = () => {
+      setViewportHeight(container.clientHeight);
+    };
+
+    updateHeight();
+
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', updateHeight);
+      return () => window.removeEventListener('resize', updateHeight);
+    }
+
+    const observer = new ResizeObserver(() => updateHeight());
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [chatHistoryOpen]);
+
+  useEffect(() => {
+    if (!chatHistoryOpen) return;
+    setScrollTop(0);
+    if (listRef.current) {
+      listRef.current.scrollTop = 0;
+    }
+  }, [chatHistoryOpen, normalizedQuery, showArchived, currentProjectId]);
+
+  useEffect(() => {
+    return () => {
+      if (scrollRafRef.current !== null) {
+        cancelAnimationFrame(scrollRafRef.current);
+      }
+    };
+  }, []);
+
+  if (!currentProjectId) {
+    return null;
+  }
+
+  const handleCreateNewChat = () => {
+    createChatSession();
+  };
+
+  const handleSelectSession = (session: ChatSession) => {
+    setCurrentChatSession(session);
+  };
+
+  const handleArchiveSession = (sessionId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    archiveChatSession(sessionId);
+  };
+
+  const handleUnarchiveSession = (sessionId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    unarchiveChatSession(sessionId);
+  };
+
+  const handleDeleteSession = (sessionId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (confirm('Are you sure you want to delete this chat session?')) {
+      deleteChatSession(sessionId);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col h-full bg-zinc-950/50 backdrop-blur-md border-r border-white/10 transition-all duration-200',
+        chatHistoryOpen ? 'w-80' : 'w-0 overflow-hidden'
+      )}
+    >
+      {chatHistoryOpen && (
+        <>
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 border-b border-white/10">
+            <div className="flex items-center gap-2">
+              <MessageSquare className="w-5 h-5" />
+              <h2 className="font-semibold">Chat History</h2>
+            </div>
+            <Button variant="ghost" size="sm" onClick={() => setChatHistoryOpen(false)}>
+              <ChevronLeft className="w-4 h-4" />
+            </Button>
+          </div>
+
+          {/* New Chat Button */}
+          <div className="p-4 border-b">
+            <Button
+              onClick={handleCreateNewChat}
+              className="w-full justify-start gap-2"
+              variant="outline"
+            >
+              <Plus className="w-4 h-4" />
+              New Chat
+            </Button>
+          </div>
+
+          {/* Search */}
+          <div className="p-4 border-b">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input
+                placeholder="Search chats..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+          </div>
+
+          {/* Archive Toggle */}
+          <div className="px-4 py-2 border-b">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setShowArchived(!showArchived)}
+              className="w-full justify-start gap-2"
+            >
+              {showArchived ? (
+                <ArchiveRestore className="w-4 h-4" />
+              ) : (
+                <Archive className="w-4 h-4" />
+              )}
+              {showArchived ? 'Show Active' : 'Show Archived'}
+              {showArchived && (
+                <Badge variant="outline" className="ml-auto">
+                  {projectSessions.filter((s) => s.archived).length}
+                </Badge>
+              )}
+            </Button>
+          </div>
+
+          {/* Chat Sessions List */}
+          <div
+            className="flex-1 overflow-y-auto perf-contain"
+            ref={listRef}
+            onScroll={handleScroll}
+          >
+            {sortedSessions.length === 0 ? (
+              <div className="p-4 text-center text-muted-foreground">
+                {searchQuery ? (
+                  <>No chats match your search</>
+                ) : showArchived ? (
+                  <>No archived chats</>
+                ) : (
+                  <>No active chats. Create your first chat to get started!</>
+                )}
+              </div>
+            ) : (
+              <div
+                className="relative"
+                style={{
+                  height: totalHeight,
+                  paddingTop: CHAT_SESSION_LIST_PADDING_PX,
+                  paddingBottom: CHAT_SESSION_LIST_PADDING_PX,
+                }}
+              >
+                <div
+                  className="absolute left-0 right-0"
+                  style={{ transform: `translateY(${offsetTop}px)` }}
+                >
+                  {visibleSessions.map((session) => (
+                    <div
+                      key={session.id}
+                      className={cn(
+                        'flex items-center gap-2 p-3 rounded-lg cursor-pointer hover:bg-accent transition-colors group',
+                        currentChatSession?.id === session.id && 'bg-accent'
+                      )}
+                      style={{ height: CHAT_SESSION_ROW_HEIGHT_PX }}
+                      onClick={() => handleSelectSession(session)}
+                    >
+                      <div className="flex-1 min-w-0">
+                        <h3 className="font-medium text-sm truncate">{session.title}</h3>
+                        <p className="text-xs text-muted-foreground truncate">
+                          {session.messages.length} messages
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                          {new Date(session.updatedAt).toLocaleDateString()}
+                        </p>
+                      </div>
+
+                      <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
+                              <MoreVertical className="w-3 h-3" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            {session.archived ? (
+                              <DropdownMenuItem
+                                onClick={(e) => handleUnarchiveSession(session.id, e)}
+                              >
+                                <ArchiveRestore className="w-4 h-4 mr-2" />
+                                Unarchive
+                              </DropdownMenuItem>
+                            ) : (
+                              <DropdownMenuItem
+                                onClick={(e) => handleArchiveSession(session.id, e)}
+                              >
+                                <Archive className="w-4 h-4 mr-2" />
+                                Archive
+                              </DropdownMenuItem>
+                            )}
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem
+                              onClick={(e) => handleDeleteSession(session.id, e)}
+                              className="text-destructive"
+                            >
+                              <Trash2 className="w-4 h-4 mr-2" />
+                              Delete
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/code-view.tsx b/temp_repo/apps/ui/src/components/views/code-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1aa7016508034f39b2d0ee7892d1511eb6971f2a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/code-view.tsx
@@ -0,0 +1,265 @@
+import { useEffect, useState, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { useAppStore } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { File, Folder, FolderOpen, ChevronRight, ChevronDown, Code, RefreshCw } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+
+const logger = createLogger('CodeView');
+
+interface FileTreeNode {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  children?: FileTreeNode[];
+  isExpanded?: boolean;
+}
+
+const IGNORE_PATTERNS = ['node_modules', '.git', '.next', 'dist', 'build', '.DS_Store', '*.log'];
+
+const shouldIgnore = (name: string) => {
+  return IGNORE_PATTERNS.some((pattern) => {
+    if (pattern.startsWith('*')) {
+      return name.endsWith(pattern.slice(1));
+    }
+    return name === pattern;
+  });
+};
+
+export function CodeView() {
+  const { currentProject } = useAppStore();
+  const [fileTree, setFileTree] = useState<FileTreeNode[]>([]);
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [fileContent, setFileContent] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
+
+  // Load directory tree
+  const loadTree = useCallback(async () => {
+    if (!currentProject) return;
+
+    setIsLoading(true);
+    try {
+      const api = getElectronAPI();
+      const result = await api.readdir(currentProject.path);
+
+      if (result.success && result.entries) {
+        const entries = result.entries
+          .filter((e) => !shouldIgnore(e.name))
+          .sort((a, b) => {
+            // Directories first
+            if (a.isDirectory && !b.isDirectory) return -1;
+            if (!a.isDirectory && b.isDirectory) return 1;
+            return a.name.localeCompare(b.name);
+          })
+          .map((e) => ({
+            name: e.name,
+            path: `${currentProject.path}/${e.name}`,
+            isDirectory: e.isDirectory,
+          }));
+
+        setFileTree(entries);
+      }
+    } catch (error) {
+      logger.error('Failed to load file tree:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [currentProject]);
+
+  useEffect(() => {
+    loadTree();
+  }, [loadTree]);
+
+  // Load subdirectory
+  const loadSubdirectory = async (path: string): Promise<FileTreeNode[]> => {
+    try {
+      const api = getElectronAPI();
+      const result = await api.readdir(path);
+
+      if (result.success && result.entries) {
+        return result.entries
+          .filter((e) => !shouldIgnore(e.name))
+          .sort((a, b) => {
+            if (a.isDirectory && !b.isDirectory) return -1;
+            if (!a.isDirectory && b.isDirectory) return 1;
+            return a.name.localeCompare(b.name);
+          })
+          .map((e) => ({
+            name: e.name,
+            path: `${path}/${e.name}`,
+            isDirectory: e.isDirectory,
+          }));
+      }
+    } catch (error) {
+      logger.error('Failed to load subdirectory:', error);
+    }
+    return [];
+  };
+
+  // Load file content
+  const loadFileContent = async (path: string) => {
+    try {
+      const api = getElectronAPI();
+      const result = await api.readFile(path);
+
+      if (result.success && result.content) {
+        setFileContent(result.content);
+        setSelectedFile(path);
+      }
+    } catch (error) {
+      logger.error('Failed to load file:', error);
+    }
+  };
+
+  // Toggle folder expansion
+  const toggleFolder = async (node: FileTreeNode) => {
+    const newExpanded = new Set(expandedFolders);
+
+    if (expandedFolders.has(node.path)) {
+      newExpanded.delete(node.path);
+    } else {
+      newExpanded.add(node.path);
+
+      // Load children if not already loaded
+      if (!node.children) {
+        const children = await loadSubdirectory(node.path);
+        // Update the tree with children
+        const updateTree = (nodes: FileTreeNode[]): FileTreeNode[] => {
+          return nodes.map((n) => {
+            if (n.path === node.path) {
+              return { ...n, children };
+            }
+            if (n.children) {
+              return { ...n, children: updateTree(n.children) };
+            }
+            return n;
+          });
+        };
+        setFileTree(updateTree(fileTree));
+      }
+    }
+
+    setExpandedFolders(newExpanded);
+  };
+
+  // Render file tree node
+  const renderNode = (node: FileTreeNode, depth: number = 0) => {
+    const isExpanded = expandedFolders.has(node.path);
+    const isSelected = selectedFile === node.path;
+
+    return (
+      <div key={node.path}>
+        <div
+          className={cn(
+            'flex items-center gap-2 py-1 px-2 rounded cursor-pointer hover:bg-muted/50',
+            isSelected && 'bg-muted'
+          )}
+          style={{ paddingLeft: `${depth * 16 + 8}px` }}
+          onClick={() => {
+            if (node.isDirectory) {
+              toggleFolder(node);
+            } else {
+              loadFileContent(node.path);
+            }
+          }}
+          data-testid={`file-tree-item-${node.name}`}
+        >
+          {node.isDirectory ? (
+            <>
+              {isExpanded ? (
+                <ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
+              ) : (
+                <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
+              )}
+              {isExpanded ? (
+                <FolderOpen className="w-4 h-4 text-primary shrink-0" />
+              ) : (
+                <Folder className="w-4 h-4 text-primary shrink-0" />
+              )}
+            </>
+          ) : (
+            <>
+              <span className="w-4" />
+              <File className="w-4 h-4 text-muted-foreground shrink-0" />
+            </>
+          )}
+          <span className="text-sm truncate">{node.name}</span>
+        </div>
+        {node.isDirectory && isExpanded && node.children && (
+          <div>{node.children.map((child) => renderNode(child, depth + 1))}</div>
+        )}
+      </div>
+    );
+  };
+
+  if (!currentProject) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="code-view-no-project">
+        <p className="text-muted-foreground">No project selected</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="code-view-loading">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden content-bg" data-testid="code-view">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-white/10 bg-zinc-950/50 backdrop-blur-md">
+        <div className="flex items-center gap-3">
+          <Code className="w-5 h-5 text-muted-foreground" />
+          <div>
+            <h1 className="text-xl font-bold">Code Explorer</h1>
+            <p className="text-sm text-muted-foreground">{currentProject.name}</p>
+          </div>
+        </div>
+        <Button variant="outline" size="sm" onClick={loadTree} data-testid="refresh-tree">
+          <RefreshCw className="w-4 h-4 mr-2" />
+          Refresh
+        </Button>
+      </div>
+
+      {/* Split View */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* File Tree */}
+        <div className="w-64 border-r overflow-y-auto" data-testid="file-tree">
+          <div className="p-2">{fileTree.map((node) => renderNode(node))}</div>
+        </div>
+
+        {/* Code Preview */}
+        <div className="flex-1 overflow-hidden">
+          {selectedFile ? (
+            <div className="h-full flex flex-col">
+              <div className="px-4 py-2 border-b bg-muted/30">
+                <p className="text-sm font-mono text-muted-foreground truncate">
+                  {selectedFile.replace(currentProject.path, '')}
+                </p>
+              </div>
+              <Card className="flex-1 m-4 overflow-hidden">
+                <CardContent className="p-0 h-full">
+                  <pre className="p-4 h-full overflow-auto text-sm font-mono whitespace-pre-wrap">
+                    <code data-testid="code-content">{fileContent}</code>
+                  </pre>
+                </CardContent>
+              </Card>
+            </div>
+          ) : (
+            <div className="flex-1 flex items-center justify-center">
+              <p className="text-muted-foreground">Select a file to view its contents</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/context-view.tsx b/temp_repo/apps/ui/src/components/views/context-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..963c69e09d8ffca04ae309bd8fa696b14cf1f498
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/context-view.tsx
@@ -0,0 +1,1294 @@
+import { useEffect, useState, useCallback, useMemo, useRef } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { useAppStore } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { HotkeyButton } from '@/components/ui/hotkey-button';
+import { Card } from '@/components/ui/card';
+import {
+  HeaderActionsPanel,
+  HeaderActionsPanelTrigger,
+} from '@/components/ui/header-actions-panel';
+import {
+  FileText,
+  Image as ImageIcon,
+  Trash2,
+  Save,
+  Upload,
+  File,
+  BookOpen,
+  Eye,
+  Pencil,
+  FilePlus,
+  FileUp,
+  MoreVertical,
+  ArrowLeft,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { useIsMobile } from '@/hooks/use-media-query';
+import {
+  useKeyboardShortcuts,
+  useKeyboardShortcutsConfig,
+  KeyboardShortcut,
+} from '@/hooks/use-keyboard-shortcuts';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+import { sanitizeFilename, isMarkdownFilename, isImageFilename } from '@/lib/image-utils';
+import { Markdown } from '../ui/markdown';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Textarea } from '@/components/ui/textarea';
+
+const logger = createLogger('ContextView');
+
+// Responsive layout classes
+const FILE_LIST_BASE_CLASSES = 'border-r border-border flex flex-col overflow-hidden';
+const FILE_LIST_DESKTOP_CLASSES = 'w-64';
+const FILE_LIST_EXPANDED_CLASSES = 'flex-1';
+const FILE_LIST_MOBILE_NO_SELECTION_CLASSES = 'w-full border-r-0';
+const FILE_LIST_MOBILE_SELECTION_CLASSES = 'hidden';
+
+const EDITOR_PANEL_BASE_CLASSES = 'flex-1 flex flex-col overflow-hidden';
+const EDITOR_PANEL_MOBILE_HIDDEN_CLASSES = 'hidden';
+
+interface ContextFile {
+  name: string;
+  type: 'text' | 'image';
+  content?: string;
+  path: string;
+  description?: string;
+}
+
+interface ContextMetadata {
+  files: Record<string, { description: string }>;
+}
+
+export function ContextView() {
+  const { currentProject } = useAppStore();
+  const shortcuts = useKeyboardShortcutsConfig();
+  const [contextFiles, setContextFiles] = useState<ContextFile[]>([]);
+  const [selectedFile, setSelectedFile] = useState<ContextFile | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [editedContent, setEditedContent] = useState('');
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+  const [renameFileName, setRenameFileName] = useState('');
+  const [isDropHovering, setIsDropHovering] = useState(false);
+  const [isPreviewMode, setIsPreviewMode] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadingFileName, setUploadingFileName] = useState<string | null>(null);
+
+  // Create Markdown modal state
+  const [isCreateMarkdownOpen, setIsCreateMarkdownOpen] = useState(false);
+  const [newMarkdownName, setNewMarkdownName] = useState('');
+  const [newMarkdownDescription, setNewMarkdownDescription] = useState('');
+  const [newMarkdownContent, setNewMarkdownContent] = useState('');
+
+  // Track files with generating descriptions (async)
+  const [generatingDescriptions, setGeneratingDescriptions] = useState<Set<string>>(new Set());
+
+  // Edit description modal state
+  const [isEditDescriptionOpen, setIsEditDescriptionOpen] = useState(false);
+  const [editDescriptionValue, setEditDescriptionValue] = useState('');
+  const [editDescriptionFileName, setEditDescriptionFileName] = useState('');
+
+  // Actions panel state (for tablet/mobile)
+  const [showActionsPanel, setShowActionsPanel] = useState(false);
+
+  // File input ref for import
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Mobile detection
+  const isMobile = useIsMobile();
+
+  // Keyboard shortcuts for this view
+  const contextShortcuts: KeyboardShortcut[] = useMemo(
+    () => [
+      {
+        key: shortcuts.addContextFile,
+        action: () => setIsCreateMarkdownOpen(true),
+        description: 'Create new markdown file',
+      },
+    ],
+    [shortcuts]
+  );
+  useKeyboardShortcuts(contextShortcuts);
+
+  // Get context directory path for user-added context files
+  const getContextPath = useCallback(() => {
+    if (!currentProject) return null;
+    return `${currentProject.path}/.automaker/context`;
+  }, [currentProject]);
+
+  // Load context metadata
+  const loadMetadata = useCallback(async (): Promise<ContextMetadata> => {
+    const contextPath = getContextPath();
+    if (!contextPath) return { files: {} };
+
+    try {
+      const api = getElectronAPI();
+      const metadataPath = `${contextPath}/context-metadata.json`;
+      const result = await api.readFile(metadataPath);
+      if (result.success && result.content) {
+        return JSON.parse(result.content);
+      }
+    } catch {
+      // Metadata file doesn't exist yet
+    }
+    return { files: {} };
+  }, [getContextPath]);
+
+  // Save context metadata
+  const saveMetadata = useCallback(
+    async (metadata: ContextMetadata) => {
+      const contextPath = getContextPath();
+      if (!contextPath) return;
+
+      try {
+        const api = getElectronAPI();
+        const metadataPath = `${contextPath}/context-metadata.json`;
+        await api.writeFile(metadataPath, JSON.stringify(metadata, null, 2));
+      } catch (error) {
+        logger.error('Failed to save metadata:', error);
+      }
+    },
+    [getContextPath]
+  );
+
+  // Load context files
+  const loadContextFiles = useCallback(async () => {
+    const contextPath = getContextPath();
+    if (!contextPath) return;
+
+    setIsLoading(true);
+    try {
+      const api = getElectronAPI();
+
+      // Ensure context directory exists
+      await api.mkdir(contextPath);
+
+      // Ensure metadata file exists (create empty one if not)
+      const metadataPath = `${contextPath}/context-metadata.json`;
+      const metadataExists = await api.exists(metadataPath);
+      if (!metadataExists) {
+        await api.writeFile(metadataPath, JSON.stringify({ files: {} }, null, 2));
+      }
+
+      // Load metadata for descriptions
+      const metadata = await loadMetadata();
+
+      // Read directory contents
+      const result = await api.readdir(contextPath);
+      if (result.success && result.entries) {
+        const files: ContextFile[] = result.entries
+          .filter(
+            (entry) =>
+              entry.isFile &&
+              entry.name !== 'context-metadata.json' &&
+              (isMarkdownFilename(entry.name) || isImageFilename(entry.name))
+          )
+          .map((entry) => ({
+            name: entry.name,
+            type: isImageFilename(entry.name) ? 'image' : 'text',
+            path: `${contextPath}/${entry.name}`,
+            description: metadata.files[entry.name]?.description,
+          }));
+        setContextFiles(files);
+      }
+    } catch (error) {
+      logger.error('Failed to load context files:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [getContextPath, loadMetadata]);
+
+  useEffect(() => {
+    loadContextFiles();
+  }, [loadContextFiles]);
+
+  // Load selected file content
+  const loadFileContent = useCallback(async (file: ContextFile) => {
+    try {
+      const api = getElectronAPI();
+      const result = await api.readFile(file.path);
+      if (result.success && result.content !== undefined) {
+        setEditedContent(result.content);
+        setSelectedFile({ ...file, content: result.content });
+        setHasChanges(false);
+      }
+    } catch (error) {
+      logger.error('Failed to load file content:', error);
+    }
+  }, []);
+
+  // Select a file
+  const handleSelectFile = (file: ContextFile) => {
+    // Note: Unsaved changes warning could be added here in the future
+    // For now, silently proceed to avoid disrupting mobile UX flow
+    // Set selected file immediately for responsive UI feedback,
+    // then load content asynchronously
+    setSelectedFile(file);
+    setEditedContent(file.content || '');
+    setHasChanges(false);
+    setIsPreviewMode(isMarkdownFilename(file.name));
+    loadFileContent(file);
+  };
+
+  // Save current file
+  const saveFile = async () => {
+    if (!selectedFile) return;
+
+    setIsSaving(true);
+    try {
+      const api = getElectronAPI();
+      await api.writeFile(selectedFile.path, editedContent);
+      setSelectedFile({ ...selectedFile, content: editedContent });
+      setHasChanges(false);
+    } catch (error) {
+      logger.error('Failed to save file:', error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // Handle content change
+  const handleContentChange = (value: string) => {
+    setEditedContent(value);
+    setHasChanges(true);
+  };
+
+  // Generate description for a file
+  const generateDescription = async (
+    filePath: string,
+    fileName: string,
+    isImage: boolean
+  ): Promise<string | undefined> => {
+    try {
+      const httpClient = getHttpApiClient();
+      const result = isImage
+        ? await httpClient.context.describeImage(filePath)
+        : await httpClient.context.describeFile(filePath);
+
+      if (result.success && result.description) {
+        return result.description;
+      }
+
+      const message =
+        result.error || `Automaker couldn't generate a description for “${fileName}”.`;
+      toast.error('Failed to generate description', { description: message });
+    } catch (error) {
+      logger.error('Failed to generate description:', error);
+      const message =
+        error instanceof Error
+          ? error.message
+          : 'An unexpected error occurred while generating the description.';
+      toast.error('Failed to generate description', { description: message });
+    }
+    return undefined;
+  };
+
+  // Generate description in background and update metadata
+  const generateDescriptionAsync = useCallback(
+    async (filePath: string, fileName: string, isImage: boolean) => {
+      // Add to generating set
+      setGeneratingDescriptions((prev) => new Set(prev).add(fileName));
+
+      try {
+        const description = await generateDescription(filePath, fileName, isImage);
+
+        if (description) {
+          const metadata = await loadMetadata();
+          metadata.files[fileName] = { description };
+          await saveMetadata(metadata);
+
+          // Reload files to update UI with new description
+          await loadContextFiles();
+
+          // Also update selectedFile if it's the one that just got described
+          setSelectedFile((current) => {
+            if (current?.name === fileName) {
+              return { ...current, description };
+            }
+            return current;
+          });
+        }
+      } catch (error) {
+        logger.error('Failed to generate description:', error);
+      } finally {
+        // Remove from generating set
+        setGeneratingDescriptions((prev) => {
+          const next = new Set(prev);
+          next.delete(fileName);
+          return next;
+        });
+      }
+    },
+    [loadMetadata, saveMetadata, loadContextFiles]
+  );
+
+  // Upload a file and generate description asynchronously
+  const uploadFile = async (file: globalThis.File) => {
+    const contextPath = getContextPath();
+    if (!contextPath) return;
+
+    setIsUploading(true);
+    setUploadingFileName(file.name);
+
+    try {
+      const api = getElectronAPI();
+      const isImage = isImageFilename(file.name);
+
+      let filePath: string;
+      let fileName: string;
+      let imagePathForDescription: string | undefined;
+
+      if (isImage) {
+        // For images: sanitize filename, store in .automaker/images
+        fileName = sanitizeFilename(file.name);
+
+        // Read file as base64
+        const dataUrl = await new Promise<string>((resolve) => {
+          const reader = new FileReader();
+          reader.onload = (event) => resolve(event.target?.result as string);
+          reader.readAsDataURL(file);
+        });
+
+        // Extract base64 data without the data URL prefix
+        const base64Data = dataUrl.split(',')[1] || dataUrl;
+
+        // Determine mime type from original file
+        const mimeType = file.type || 'image/png';
+
+        // Use saveImageToTemp to properly save as binary file in .automaker/images
+        const saveResult = await api.saveImageToTemp?.(
+          base64Data,
+          fileName,
+          mimeType,
+          currentProject!.path
+        );
+
+        if (!saveResult?.success || !saveResult.path) {
+          throw new Error(saveResult?.error || 'Failed to save image');
+        }
+
+        // The saved image path is used for description
+        imagePathForDescription = saveResult.path;
+
+        // Also save to context directory for display in the UI
+        // (as a data URL for inline display)
+        filePath = `${contextPath}/${fileName}`;
+        await api.writeFile(filePath, dataUrl);
+      } else {
+        // For non-images: keep original behavior
+        fileName = file.name;
+        filePath = `${contextPath}/${fileName}`;
+
+        const content = await new Promise<string>((resolve) => {
+          const reader = new FileReader();
+          reader.onload = (event) => resolve(event.target?.result as string);
+          reader.readAsText(file);
+        });
+
+        await api.writeFile(filePath, content);
+      }
+
+      // Reload files immediately (file appears in list without description)
+      await loadContextFiles();
+
+      // Start description generation in background (don't await)
+      // For images, use the path in the images directory
+      generateDescriptionAsync(imagePathForDescription || filePath, fileName, isImage);
+    } catch (error) {
+      logger.error('Failed to upload file:', error);
+      toast.error('Failed to upload file', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsUploading(false);
+      setUploadingFileName(null);
+    }
+  };
+
+  // Handle file drop
+  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDropHovering(false);
+
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length === 0) return;
+
+    // Process files sequentially
+    for (const file of files) {
+      await uploadFile(file);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDropHovering(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDropHovering(false);
+  };
+
+  // Handle file import via button
+  const handleImportClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+
+    for (const file of Array.from(files)) {
+      await uploadFile(file);
+    }
+
+    // Reset input
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  // Handle create markdown
+  const handleCreateMarkdown = async () => {
+    const contextPath = getContextPath();
+    if (!contextPath || !newMarkdownName.trim()) return;
+
+    try {
+      const api = getElectronAPI();
+      let filename = newMarkdownName.trim();
+
+      // Add .md extension if not provided
+      if (!filename.includes('.')) {
+        filename += '.md';
+      }
+
+      const filePath = `${contextPath}/${filename}`;
+
+      // Write markdown file
+      await api.writeFile(filePath, newMarkdownContent);
+
+      // Save description if provided
+      if (newMarkdownDescription.trim()) {
+        const metadata = await loadMetadata();
+        metadata.files[filename] = { description: newMarkdownDescription.trim() };
+        await saveMetadata(metadata);
+      }
+
+      // Reload files
+      await loadContextFiles();
+
+      // Reset and close modal
+      setIsCreateMarkdownOpen(false);
+      setNewMarkdownName('');
+      setNewMarkdownDescription('');
+      setNewMarkdownContent('');
+    } catch (error) {
+      logger.error('Failed to create markdown:', error);
+      // Close dialog and reset state even on error to avoid stuck dialog
+      setIsCreateMarkdownOpen(false);
+      setNewMarkdownName('');
+      setNewMarkdownDescription('');
+      setNewMarkdownContent('');
+      toast.error('Failed to create markdown file', {
+        description: error instanceof Error ? error.message : 'Unknown error occurred',
+      });
+    }
+  };
+
+  // Delete selected file
+  const handleDeleteFile = async () => {
+    if (!selectedFile) return;
+
+    try {
+      const api = getElectronAPI();
+      await api.deleteFile(selectedFile.path);
+
+      // Remove from metadata
+      const metadata = await loadMetadata();
+      delete metadata.files[selectedFile.name];
+      await saveMetadata(metadata);
+
+      // Refresh file list before closing dialog so UI is updated when dialog dismisses
+      await loadContextFiles();
+
+      setIsDeleteDialogOpen(false);
+      setSelectedFile(null);
+      setEditedContent('');
+      setHasChanges(false);
+    } catch (error) {
+      logger.error('Failed to delete file:', error);
+    }
+  };
+
+  // Rename selected file
+  const handleRenameFile = async () => {
+    const contextPath = getContextPath();
+    if (!selectedFile || !contextPath || !renameFileName.trim()) return;
+
+    const newName = renameFileName.trim();
+    if (newName === selectedFile.name) {
+      setIsRenameDialogOpen(false);
+      return;
+    }
+
+    try {
+      const api = getElectronAPI();
+      const newPath = `${contextPath}/${newName}`;
+
+      // Check if file with new name already exists
+      const exists = await api.exists(newPath);
+      if (exists) {
+        logger.error('A file with this name already exists');
+        return;
+      }
+
+      // Read current file content
+      const result = await api.readFile(selectedFile.path);
+      if (!result.success || result.content === undefined) {
+        logger.error('Failed to read file for rename');
+        return;
+      }
+
+      // Write to new path
+      await api.writeFile(newPath, result.content);
+
+      // Delete old file
+      await api.deleteFile(selectedFile.path);
+
+      // Update metadata
+      const metadata = await loadMetadata();
+      if (metadata.files[selectedFile.name]) {
+        metadata.files[newName] = metadata.files[selectedFile.name];
+        delete metadata.files[selectedFile.name];
+        await saveMetadata(metadata);
+      }
+
+      setIsRenameDialogOpen(false);
+      setRenameFileName('');
+
+      // Reload files and select the renamed file
+      await loadContextFiles();
+
+      // Update selected file with new name and path
+      const renamedFile: ContextFile = {
+        name: newName,
+        type: isImageFilename(newName) ? 'image' : 'text',
+        path: newPath,
+        content: result.content,
+        description: metadata.files[newName]?.description,
+      };
+      setSelectedFile(renamedFile);
+    } catch (error) {
+      logger.error('Failed to rename file:', error);
+    }
+  };
+
+  // Save edited description
+  const handleSaveDescription = async () => {
+    if (!editDescriptionFileName) return;
+
+    try {
+      const metadata = await loadMetadata();
+      metadata.files[editDescriptionFileName] = { description: editDescriptionValue.trim() };
+      await saveMetadata(metadata);
+
+      // Update selected file if it's the one being edited
+      if (selectedFile?.name === editDescriptionFileName) {
+        setSelectedFile({ ...selectedFile, description: editDescriptionValue.trim() });
+      }
+
+      // Reload files to update list
+      await loadContextFiles();
+
+      setIsEditDescriptionOpen(false);
+      setEditDescriptionValue('');
+      setEditDescriptionFileName('');
+    } catch (error) {
+      logger.error('Failed to save description:', error);
+    }
+  };
+
+  // Open edit description dialog
+  const handleEditDescription = (file: ContextFile) => {
+    setEditDescriptionFileName(file.name);
+    setEditDescriptionValue(file.description || '');
+    setIsEditDescriptionOpen(true);
+  };
+
+  // Delete file from list (used by dropdown)
+  const handleDeleteFromList = async (file: ContextFile) => {
+    try {
+      const api = getElectronAPI();
+      await api.deleteFile(file.path);
+
+      // Remove from metadata
+      const metadata = await loadMetadata();
+      delete metadata.files[file.name];
+      await saveMetadata(metadata);
+
+      // Clear selection if this was the selected file
+      if (selectedFile?.path === file.path) {
+        setSelectedFile(null);
+        setEditedContent('');
+        setHasChanges(false);
+      }
+
+      await loadContextFiles();
+    } catch (error) {
+      logger.error('Failed to delete file:', error);
+    }
+  };
+
+  if (!currentProject) {
+    return (
+      <div
+        className="flex-1 flex items-center justify-center"
+        data-testid="context-view-no-project"
+      >
+        <p className="text-muted-foreground">No project selected</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="context-view-loading">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden content-bg" data-testid="context-view">
+      {/* Hidden file input for import */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        className="hidden"
+        onChange={handleFileInputChange}
+        data-testid="file-import-input"
+      />
+
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
+        <div className="flex items-center gap-3">
+          <BookOpen className="w-5 h-5 text-muted-foreground" />
+          <div>
+            <h1 className="text-xl font-bold">Context Files</h1>
+            <p className="text-sm text-muted-foreground">
+              Add context files to include in AI prompts
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {/* Desktop: show actions inline */}
+          <div className="hidden lg:flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleImportClick}
+              disabled={isUploading}
+              data-testid="import-file-button"
+            >
+              <FileUp className="w-4 h-4 mr-2" />
+              Import File
+            </Button>
+            <HotkeyButton
+              size="sm"
+              onClick={() => setIsCreateMarkdownOpen(true)}
+              hotkey={shortcuts.addContextFile}
+              hotkeyActive={false}
+              data-testid="create-markdown-button"
+            >
+              <FilePlus className="w-4 h-4 mr-2" />
+              Create Markdown
+            </HotkeyButton>
+          </div>
+          {/* Tablet/Mobile: show trigger for actions panel */}
+          <HeaderActionsPanelTrigger
+            isOpen={showActionsPanel}
+            onToggle={() => setShowActionsPanel(!showActionsPanel)}
+          />
+        </div>
+      </div>
+
+      {/* Actions Panel (tablet/mobile) */}
+      <HeaderActionsPanel
+        isOpen={showActionsPanel}
+        onClose={() => setShowActionsPanel(false)}
+        title="Context Actions"
+      >
+        <Button
+          variant="outline"
+          className="w-full justify-start"
+          onClick={() => {
+            handleImportClick();
+            setShowActionsPanel(false);
+          }}
+          disabled={isUploading}
+          data-testid="import-file-button-mobile"
+        >
+          <FileUp className="w-4 h-4 mr-2" />
+          Import File
+        </Button>
+        <Button
+          className="w-full justify-start"
+          onClick={() => {
+            setIsCreateMarkdownOpen(true);
+            setShowActionsPanel(false);
+          }}
+          data-testid="create-markdown-button-mobile"
+        >
+          <FilePlus className="w-4 h-4 mr-2" />
+          Create Markdown
+        </Button>
+      </HeaderActionsPanel>
+
+      {/* Main content area with file list and editor */}
+      <div
+        className={cn(
+          'flex-1 flex overflow-hidden relative',
+          isDropHovering && 'ring-2 ring-primary ring-inset'
+        )}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        data-testid="context-drop-zone"
+      >
+        {/* Drop overlay */}
+        {isDropHovering && (
+          <div className="absolute inset-0 bg-primary/10 z-50 flex items-center justify-center pointer-events-none">
+            <div className="flex flex-col items-center text-primary">
+              <Upload className="w-12 h-12 mb-2" />
+              <span className="text-lg font-medium">Drop files to upload</span>
+              <span className="text-sm text-muted-foreground">
+                Files will be analyzed automatically
+              </span>
+            </div>
+          </div>
+        )}
+
+        {/* Uploading overlay */}
+        {isUploading && (
+          <div className="absolute inset-0 bg-background/80 z-50 flex items-center justify-center">
+            <div className="flex flex-col items-center">
+              <Spinner size="xl" className="mb-2" />
+              <span className="text-sm font-medium">Uploading {uploadingFileName}...</span>
+            </div>
+          </div>
+        )}
+
+        {/* Left Panel - File List */}
+        {/* Mobile: Full width, hidden when file is selected (full-screen editor) */}
+        {/* Desktop: Fixed width w-64, expands to fill space when no file selected */}
+        <div
+          className={cn(
+            FILE_LIST_BASE_CLASSES,
+            FILE_LIST_DESKTOP_CLASSES,
+            !selectedFile && FILE_LIST_EXPANDED_CLASSES,
+            isMobile && !selectedFile && FILE_LIST_MOBILE_NO_SELECTION_CLASSES,
+            isMobile && selectedFile && FILE_LIST_MOBILE_SELECTION_CLASSES
+          )}
+        >
+          <div className="p-3 border-b border-border">
+            <h2 className="text-sm font-semibold text-muted-foreground">
+              Context Files ({contextFiles.length})
+            </h2>
+          </div>
+          <div className="flex-1 overflow-y-auto p-2" data-testid="context-file-list">
+            {contextFiles.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-full text-center p-4">
+                <Upload className="w-8 h-8 text-muted-foreground mb-2" />
+                <p className="text-sm text-muted-foreground">
+                  No context files yet.
+                  <br />
+                  Drop files here or use the buttons above.
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-1">
+                {contextFiles.map((file) => {
+                  const isGenerating = generatingDescriptions.has(file.name);
+                  return (
+                    <div
+                      key={file.path}
+                      onClick={() => handleSelectFile(file)}
+                      className={cn(
+                        'group w-full flex items-center gap-2 px-3 py-2 rounded-lg transition-colors cursor-pointer',
+                        selectedFile?.path === file.path
+                          ? 'bg-primary/20 text-foreground border border-primary/30'
+                          : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                      )}
+                      data-testid={`context-file-${file.name}`}
+                    >
+                      {file.type === 'image' ? (
+                        <ImageIcon className="w-4 h-4 flex-shrink-0" />
+                      ) : (
+                        <FileText className="w-4 h-4 flex-shrink-0" />
+                      )}
+                      <div className="min-w-0 flex-1">
+                        <span className="truncate text-sm block">{file.name}</span>
+                        {isGenerating ? (
+                          <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                            <Spinner size="xs" />
+                            Generating description...
+                          </span>
+                        ) : file.description ? (
+                          <span className="truncate text-xs text-muted-foreground block">
+                            {file.description}
+                          </span>
+                        ) : null}
+                      </div>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <button
+                            onClick={(e) => e.stopPropagation()}
+                            className={cn(
+                              'p-1 hover:bg-accent rounded transition-opacity',
+                              isMobile ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                            )}
+                            aria-label={`Actions for ${file.name}`}
+                            aria-haspopup="menu"
+                            data-testid={`context-file-menu-${file.name}`}
+                          >
+                            <MoreVertical className="w-4 h-4" />
+                          </button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem
+                            onClick={() => {
+                              setRenameFileName(file.name);
+                              setSelectedFile(file);
+                              setIsRenameDialogOpen(true);
+                            }}
+                            data-testid={`rename-context-file-${file.name}`}
+                          >
+                            <Pencil className="w-4 h-4 mr-2" />
+                            Rename
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={() => handleDeleteFromList(file)}
+                            className="text-red-500 focus:text-red-500"
+                            data-testid={`delete-context-file-${file.name}`}
+                          >
+                            <Trash2 className="w-4 h-4 mr-2" />
+                            Delete
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right Panel - Editor/Preview */}
+        {/* Mobile: Hidden when no file selected (file list shows full screen) */}
+        <div
+          className={cn(
+            EDITOR_PANEL_BASE_CLASSES,
+            isMobile && !selectedFile && EDITOR_PANEL_MOBILE_HIDDEN_CLASSES
+          )}
+        >
+          {selectedFile ? (
+            <>
+              {/* File toolbar */}
+              <div className="flex items-center justify-between p-3 border-b border-border bg-card">
+                <div className="flex items-center gap-2 min-w-0">
+                  {/* Mobile-only: Back button to return to file list */}
+                  {isMobile && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setSelectedFile(null)}
+                      className="shrink-0 -ml-1"
+                      aria-label="Back"
+                      title="Back"
+                    >
+                      <ArrowLeft className="h-4 w-4" />
+                    </Button>
+                  )}
+                  {selectedFile.type === 'image' ? (
+                    <ImageIcon className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                  ) : (
+                    <FileText className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                  )}
+                  <span className="text-sm font-medium truncate">{selectedFile.name}</span>
+                </div>
+                <div className={cn('flex gap-2', isMobile && 'gap-1')}>
+                  {/* Mobile: Icon-only buttons with aria-labels for accessibility */}
+                  {selectedFile.type === 'text' && isMarkdownFilename(selectedFile.name) && (
+                    <Button
+                      variant={'outline'}
+                      size="sm"
+                      onClick={() => setIsPreviewMode(!isPreviewMode)}
+                      data-testid="toggle-preview-mode"
+                      aria-label={isPreviewMode ? 'Edit' : 'Preview'}
+                      title={isPreviewMode ? 'Edit' : 'Preview'}
+                    >
+                      {isPreviewMode ? (
+                        <>
+                          <Pencil className="w-4 h-4" />
+                          {!isMobile && <span className="ml-2">Edit</span>}
+                        </>
+                      ) : (
+                        <>
+                          <Eye className="w-4 h-4" />
+                          {!isMobile && <span className="ml-2">Preview</span>}
+                        </>
+                      )}
+                    </Button>
+                  )}
+                  {selectedFile.type === 'text' && (
+                    <Button
+                      size="sm"
+                      onClick={saveFile}
+                      disabled={!hasChanges || isSaving}
+                      data-testid="save-context-file"
+                      aria-label="Save"
+                      title="Save"
+                    >
+                      <Save className="w-4 h-4" />
+                      {!isMobile && (
+                        <span className="ml-2">
+                          {isSaving ? 'Saving...' : hasChanges ? 'Save' : 'Saved'}
+                        </span>
+                      )}
+                    </Button>
+                  )}
+                  {/* Desktop-only: Delete button (use dropdown on mobile to save space) */}
+                  {!isMobile && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setIsDeleteDialogOpen(true)}
+                      className="text-red-500 hover:text-red-400 hover:border-red-500/50"
+                      data-testid="delete-context-file"
+                      aria-label="Delete"
+                      title="Delete"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  )}
+                </div>
+              </div>
+
+              {/* Description section */}
+              <div className="px-4 pt-4 pb-2">
+                <div className="bg-muted/50 rounded-lg p-3 border border-border">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="flex-1 min-w-0">
+                      <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                        Description
+                      </span>
+                      {generatingDescriptions.has(selectedFile.name) ? (
+                        <div className="flex items-center gap-2 mt-1 text-sm text-muted-foreground">
+                          <Spinner size="sm" />
+                          <span>Generating description with AI...</span>
+                        </div>
+                      ) : selectedFile.description ? (
+                        <p className="text-sm mt-1">{selectedFile.description}</p>
+                      ) : (
+                        <p className="text-sm text-muted-foreground mt-1 italic">
+                          No description. Click edit to add one.
+                        </p>
+                      )}
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleEditDescription(selectedFile)}
+                      className="flex-shrink-0"
+                      data-testid="edit-description-button"
+                    >
+                      <Pencil className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+
+              {/* Content area */}
+              <div className="flex-1 overflow-hidden px-4 pb-2 sm:pb-4">
+                {selectedFile.type === 'image' ? (
+                  <div
+                    className="h-full flex items-center justify-center bg-card rounded-lg"
+                    data-testid="image-preview"
+                  >
+                    <img
+                      src={editedContent}
+                      alt={selectedFile.name}
+                      className="max-w-full max-h-full object-contain"
+                    />
+                  </div>
+                ) : isPreviewMode ? (
+                  <Card className="h-full overflow-auto p-4" data-testid="markdown-preview">
+                    <Markdown>{editedContent}</Markdown>
+                  </Card>
+                ) : (
+                  <Card className="h-full overflow-hidden">
+                    <textarea
+                      className="w-full h-full p-4 font-mono text-sm bg-transparent resize-none focus:outline-none"
+                      value={editedContent}
+                      onChange={(e) => handleContentChange(e.target.value)}
+                      placeholder="Enter context content here..."
+                      spellCheck={false}
+                      data-testid="context-editor"
+                    />
+                  </Card>
+                )}
+              </div>
+            </>
+          ) : (
+            <div className="flex-1 flex items-center justify-center">
+              <div className="text-center">
+                <File className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
+                <p className="text-foreground-secondary">Select a file to view or edit</p>
+                <p className="text-muted-foreground text-sm mt-1">Or drop files here to add them</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Create Markdown Dialog */}
+      <Dialog open={isCreateMarkdownOpen} onOpenChange={setIsCreateMarkdownOpen}>
+        <DialogContent
+          data-testid="create-markdown-dialog"
+          className="w-[60vw] max-w-[60vw] max-h-[80vh] flex flex-col"
+        >
+          <DialogHeader>
+            <DialogTitle>Create Markdown Context</DialogTitle>
+            <DialogDescription>
+              Create a new markdown file to add context for AI prompts.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4 flex-1 overflow-auto">
+            <div className="space-y-2">
+              <Label htmlFor="markdown-filename">File Name</Label>
+              <Input
+                id="markdown-filename"
+                value={newMarkdownName}
+                onChange={(e) => setNewMarkdownName(e.target.value)}
+                placeholder="context-file.md"
+                data-testid="new-markdown-name"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="markdown-description">
+                Description (for AI to understand the context)
+              </Label>
+              <Input
+                id="markdown-description"
+                value={newMarkdownDescription}
+                onChange={(e) => setNewMarkdownDescription(e.target.value)}
+                placeholder="e.g., Coding style guidelines for this project"
+                data-testid="new-markdown-description"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="markdown-content">Content</Label>
+              <textarea
+                id="markdown-content"
+                value={newMarkdownContent}
+                onChange={(e) => setNewMarkdownContent(e.target.value)}
+                onDrop={async (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+
+                  // Try files first, then items for better compatibility
+                  let files = Array.from(e.dataTransfer.files);
+                  if (files.length === 0 && e.dataTransfer.items) {
+                    const items = Array.from(e.dataTransfer.items);
+                    files = items
+                      .filter((item) => item.kind === 'file')
+                      .map((item) => item.getAsFile())
+                      .filter((f): f is globalThis.File => f !== null);
+                  }
+
+                  const mdFile = files.find((f) => isMarkdownFilename(f.name));
+                  if (mdFile) {
+                    const content = await mdFile.text();
+                    setNewMarkdownContent(content);
+                    if (!newMarkdownName.trim()) {
+                      setNewMarkdownName(mdFile.name);
+                    }
+                  }
+                }}
+                onDragOver={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+                placeholder="Enter your markdown content here..."
+                className="w-full h-60 p-3 font-mono text-sm bg-background border border-border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
+                spellCheck={false}
+                data-testid="new-markdown-content"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsCreateMarkdownOpen(false);
+                setNewMarkdownName('');
+                setNewMarkdownDescription('');
+                setNewMarkdownContent('');
+              }}
+            >
+              Cancel
+            </Button>
+            <HotkeyButton
+              onClick={handleCreateMarkdown}
+              disabled={!newMarkdownName.trim()}
+              hotkey={{ key: 'Enter', cmdCtrl: true }}
+              hotkeyActive={isCreateMarkdownOpen}
+              data-testid="confirm-create-markdown"
+            >
+              Create
+            </HotkeyButton>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+        <DialogContent data-testid="delete-context-dialog">
+          <DialogHeader>
+            <DialogTitle>Delete Context File</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete "{selectedFile?.name}"? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteFile}
+              className="bg-red-600 hover:bg-red-700"
+              data-testid="confirm-delete-file"
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Rename Dialog */}
+      <Dialog open={isRenameDialogOpen} onOpenChange={setIsRenameDialogOpen}>
+        <DialogContent data-testid="rename-context-dialog">
+          <DialogHeader>
+            <DialogTitle>Rename Context File</DialogTitle>
+            <DialogDescription>Enter a new name for "{selectedFile?.name}".</DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <div className="space-y-2">
+              <Label htmlFor="rename-filename">File Name</Label>
+              <Input
+                id="rename-filename"
+                value={renameFileName}
+                onChange={(e) => setRenameFileName(e.target.value)}
+                placeholder="Enter new filename"
+                data-testid="rename-file-input"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && renameFileName.trim()) {
+                    handleRenameFile();
+                  }
+                }}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsRenameDialogOpen(false);
+                setRenameFileName('');
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleRenameFile}
+              disabled={!renameFileName.trim() || renameFileName === selectedFile?.name}
+              data-testid="confirm-rename-file"
+            >
+              Rename
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Description Dialog */}
+      <Dialog open={isEditDescriptionOpen} onOpenChange={setIsEditDescriptionOpen}>
+        <DialogContent data-testid="edit-description-dialog">
+          <DialogHeader>
+            <DialogTitle>Edit Description</DialogTitle>
+            <DialogDescription>
+              Update the description for "{editDescriptionFileName}". This helps AI understand the
+              context.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <div className="space-y-2">
+              <Label htmlFor="edit-description">Description</Label>
+              <Textarea
+                id="edit-description"
+                value={editDescriptionValue}
+                onChange={(e) => setEditDescriptionValue(e.target.value)}
+                placeholder="e.g., API documentation for authentication endpoints..."
+                className="min-h-[100px]"
+                data-testid="edit-description-input"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsEditDescriptionOpen(false);
+                setEditDescriptionValue('');
+                setEditDescriptionFileName('');
+              }}
+            >
+              Cancel
+            </Button>
+            <Button onClick={handleSaveDescription} data-testid="confirm-save-description">
+              Save
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/dashboard-view.tsx b/temp_repo/apps/ui/src/components/views/dashboard-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4c40e3e3d0ea17ef54bbe8c031b54495560cf79e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/dashboard-view.tsx
@@ -0,0 +1,1042 @@
+import { useState, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { useNavigate } from '@tanstack/react-router';
+import { useAppStore } from '@/store/app-store';
+import { useOSDetection } from '@/hooks/use-os-detection';
+import { getElectronAPI, isElectron } from '@/lib/electron';
+import { initializeProject } from '@/lib/project-init';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { isMac } from '@/lib/utils';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { NewProjectModal } from '@/components/dialogs/new-project-modal';
+import { WorkspacePickerModal } from '@/components/dialogs/workspace-picker-modal';
+import type { StarterTemplate } from '@/lib/templates';
+import {
+  FolderOpen,
+  Plus,
+  Folder,
+  Star,
+  Clock,
+  ChevronDown,
+  MessageSquare,
+  MoreVertical,
+  Trash2,
+  Search,
+  X,
+  LayoutDashboard,
+  type LucideIcon,
+} from 'lucide-react';
+import * as LucideIcons from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { Input } from '@/components/ui/input';
+import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+const logger = createLogger('DashboardView');
+
+function getOSAbbreviation(os: string): string {
+  switch (os) {
+    case 'mac':
+      return 'M';
+    case 'windows':
+      return 'W';
+    case 'linux':
+      return 'L';
+    default:
+      return '?';
+  }
+}
+
+function getIconComponent(iconName?: string): LucideIcon {
+  if (iconName && iconName in LucideIcons) {
+    return (LucideIcons as unknown as Record<string, LucideIcon>)[iconName];
+  }
+  return Folder;
+}
+
+export function DashboardView() {
+  const navigate = useNavigate();
+  const { os } = useOSDetection();
+  const appVersion = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0';
+  const appMode = import.meta.env.VITE_APP_MODE || '?';
+  const versionSuffix = `${getOSAbbreviation(os)}${appMode}`;
+
+  const {
+    projects,
+    upsertAndSetCurrentProject,
+    addProject,
+    setCurrentProject,
+    toggleProjectFavorite,
+    moveProjectToTrash,
+  } = useAppStore();
+
+  const [showNewProjectModal, setShowNewProjectModal] = useState(false);
+  const [showWorkspacePicker, setShowWorkspacePicker] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [isOpening, setIsOpening] = useState(false);
+  const [projectToRemove, setProjectToRemove] = useState<{ id: string; name: string } | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Sort projects: favorites first, then by last opened
+  const sortedProjects = [...projects].sort((a, b) => {
+    // Favorites first
+    if (a.isFavorite && !b.isFavorite) return -1;
+    if (!a.isFavorite && b.isFavorite) return 1;
+    // Then by last opened
+    const dateA = a.lastOpened ? new Date(a.lastOpened).getTime() : 0;
+    const dateB = b.lastOpened ? new Date(b.lastOpened).getTime() : 0;
+    return dateB - dateA;
+  });
+
+  // Filter projects based on search query
+  const filteredProjects = sortedProjects.filter((project) => {
+    if (!searchQuery.trim()) return true;
+    const query = searchQuery.toLowerCase();
+    return project.name.toLowerCase().includes(query) || project.path.toLowerCase().includes(query);
+  });
+
+  const favoriteProjects = filteredProjects.filter((p) => p.isFavorite);
+  const recentProjects = filteredProjects.filter((p) => !p.isFavorite);
+
+  /**
+   * Initialize project and navigate to board
+   */
+  const initializeAndOpenProject = useCallback(
+    async (path: string, name: string) => {
+      setIsOpening(true);
+      try {
+        const initResult = await initializeProject(path);
+
+        if (!initResult.success) {
+          // If the project directory doesn't exist, automatically remove it from the project list
+          if (initResult.error?.includes('does not exist')) {
+            const projectToRemove = projects.find((p) => p.path === path);
+            if (projectToRemove) {
+              logger.warn(`[Dashboard] Removing project with non-existent path: ${path}`);
+              moveProjectToTrash(projectToRemove.id);
+              toast.error('Project directory not found', {
+                description: `Removed ${name} from your projects list since the directory no longer exists.`,
+              });
+              return;
+            }
+          }
+
+          toast.error('Failed to initialize project', {
+            description: initResult.error || 'Unknown error occurred',
+          });
+          return;
+        }
+
+        // Theme handling (trashed project recovery or undefined for global) is done by the store
+        upsertAndSetCurrentProject(path, name);
+
+        toast.success('Project opened', {
+          description: `Opened ${name}`,
+        });
+
+        navigate({ to: '/board' });
+      } catch (error) {
+        logger.error('[Dashboard] Failed to open project:', error);
+        toast.error('Failed to open project', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      } finally {
+        setIsOpening(false);
+      }
+    },
+    [projects, upsertAndSetCurrentProject, navigate, moveProjectToTrash]
+  );
+
+  const handleOpenProject = useCallback(async () => {
+    try {
+      const httpClient = getHttpApiClient();
+      const configResult = await httpClient.workspace.getConfig();
+
+      if (configResult.success && configResult.configured) {
+        setShowWorkspacePicker(true);
+      } else {
+        const api = getElectronAPI();
+        const result = await api.openDirectory();
+
+        if (!result.canceled && result.filePaths[0]) {
+          const path = result.filePaths[0];
+          const name = path.split(/[/\\]/).filter(Boolean).pop() || 'Untitled Project';
+          await initializeAndOpenProject(path, name);
+        }
+      }
+    } catch (error) {
+      logger.error('[Dashboard] Failed to check workspace config:', error);
+      const api = getElectronAPI();
+      const result = await api.openDirectory();
+
+      if (!result.canceled && result.filePaths[0]) {
+        const path = result.filePaths[0];
+        const name = path.split(/[/\\]/).filter(Boolean).pop() || 'Untitled Project';
+        await initializeAndOpenProject(path, name);
+      }
+    }
+  }, [initializeAndOpenProject]);
+
+  const handleWorkspaceSelect = useCallback(
+    async (path: string, name: string) => {
+      setShowWorkspacePicker(false);
+      await initializeAndOpenProject(path, name);
+    },
+    [initializeAndOpenProject]
+  );
+
+  const handleProjectClick = useCallback(
+    async (project: { id: string; name: string; path: string }) => {
+      await initializeAndOpenProject(project.path, project.name);
+    },
+    [initializeAndOpenProject]
+  );
+
+  const handleToggleFavorite = useCallback(
+    (e: React.MouseEvent, projectId: string) => {
+      e.stopPropagation();
+      toggleProjectFavorite(projectId);
+    },
+    [toggleProjectFavorite]
+  );
+
+  const handleRemoveProject = useCallback(
+    (e: React.MouseEvent, project: { id: string; name: string }) => {
+      e.stopPropagation();
+      setProjectToRemove(project);
+    },
+    []
+  );
+
+  const handleConfirmRemove = useCallback(() => {
+    if (projectToRemove) {
+      moveProjectToTrash(projectToRemove.id);
+      toast.success('Project removed', {
+        description: `${projectToRemove.name} has been removed from your projects list`,
+      });
+      setProjectToRemove(null);
+    }
+  }, [projectToRemove, moveProjectToTrash]);
+
+  const handleNewProject = () => {
+    setShowNewProjectModal(true);
+  };
+
+  const handleInteractiveMode = () => {
+    navigate({ to: '/interview' });
+  };
+
+  const handleCreateBlankProject = async (projectName: string, parentDir: string) => {
+    setIsCreating(true);
+    try {
+      const api = getElectronAPI();
+      const projectPath = `${parentDir}/${projectName}`;
+
+      const parentExists = await api.exists(parentDir);
+      if (!parentExists) {
+        toast.error('Parent directory does not exist', {
+          description: `Cannot create project in non-existent directory: ${parentDir}`,
+        });
+        return;
+      }
+
+      const parentStat = await api.stat(parentDir);
+      if (parentStat && !parentStat.stats?.isDirectory) {
+        toast.error('Parent path is not a directory', {
+          description: `${parentDir} is not a directory`,
+        });
+        return;
+      }
+
+      const mkdirResult = await api.mkdir(projectPath);
+      if (!mkdirResult.success) {
+        toast.error('Failed to create project directory', {
+          description: mkdirResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      const initResult = await initializeProject(projectPath);
+      if (!initResult.success) {
+        toast.error('Failed to initialize project', {
+          description: initResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      await api.writeFile(
+        `${projectPath}/.automaker/app_spec.txt`,
+        `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    Describe your project here. This file will be analyzed by an AI agent
+    to understand your project structure and tech stack.
+  </overview>
+
+  <technology_stack>
+    <!-- The AI agent will fill this in after analyzing your project -->
+  </technology_stack>
+
+  <core_capabilities>
+    <!-- List core features and capabilities -->
+  </core_capabilities>
+
+  <implemented_features>
+    <!-- The AI agent will populate this based on code analysis -->
+  </implemented_features>
+</project_specification>`
+      );
+
+      const project = {
+        id: `project-${Date.now()}`,
+        name: projectName,
+        path: projectPath,
+        lastOpened: new Date().toISOString(),
+      };
+
+      addProject(project);
+      setCurrentProject(project);
+      setShowNewProjectModal(false);
+
+      toast.success('Project created', {
+        description: `Created ${projectName}`,
+      });
+
+      navigate({ to: '/board' });
+    } catch (error) {
+      logger.error('Failed to create project:', error);
+      toast.error('Failed to create project', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleCreateFromTemplate = async (
+    template: StarterTemplate,
+    projectName: string,
+    parentDir: string
+  ) => {
+    setIsCreating(true);
+    try {
+      const httpClient = getHttpApiClient();
+      const api = getElectronAPI();
+
+      const cloneResult = await httpClient.templates.clone(
+        template.repoUrl,
+        projectName,
+        parentDir
+      );
+      if (!cloneResult.success || !cloneResult.projectPath) {
+        toast.error('Failed to clone template', {
+          description: cloneResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      const projectPath = cloneResult.projectPath;
+      const initResult = await initializeProject(projectPath);
+      if (!initResult.success) {
+        toast.error('Failed to initialize project', {
+          description: initResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      await api.writeFile(
+        `${projectPath}/.automaker/app_spec.txt`,
+        `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    This project was created from the "${template.name}" starter template.
+    ${template.description}
+  </overview>
+
+  <technology_stack>
+    ${template.techStack.map((tech) => `<technology>${tech}</technology>`).join('\n    ')}
+  </technology_stack>
+
+  <core_capabilities>
+    ${template.features.map((feature) => `<capability>${feature}</capability>`).join('\n    ')}
+  </core_capabilities>
+
+  <implemented_features>
+    <!-- The AI agent will populate this based on code analysis -->
+  </implemented_features>
+</project_specification>`
+      );
+
+      const project = {
+        id: `project-${Date.now()}`,
+        name: projectName,
+        path: projectPath,
+        lastOpened: new Date().toISOString(),
+      };
+
+      addProject(project);
+      setCurrentProject(project);
+      setShowNewProjectModal(false);
+
+      toast.success('Project created from template', {
+        description: `Created ${projectName} from ${template.name}`,
+      });
+
+      navigate({ to: '/board' });
+    } catch (error) {
+      logger.error('Failed to create project from template:', error);
+      toast.error('Failed to create project', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleCreateFromCustomUrl = async (
+    repoUrl: string,
+    projectName: string,
+    parentDir: string
+  ) => {
+    setIsCreating(true);
+    try {
+      const httpClient = getHttpApiClient();
+      const api = getElectronAPI();
+
+      const cloneResult = await httpClient.templates.clone(repoUrl, projectName, parentDir);
+      if (!cloneResult.success || !cloneResult.projectPath) {
+        toast.error('Failed to clone repository', {
+          description: cloneResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      const projectPath = cloneResult.projectPath;
+      const initResult = await initializeProject(projectPath);
+      if (!initResult.success) {
+        toast.error('Failed to initialize project', {
+          description: initResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      await api.writeFile(
+        `${projectPath}/.automaker/app_spec.txt`,
+        `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    This project was cloned from ${repoUrl}.
+    The AI agent will analyze the project structure.
+  </overview>
+
+  <technology_stack>
+    <!-- The AI agent will fill this in after analyzing your project -->
+  </technology_stack>
+
+  <core_capabilities>
+    <!-- List core features and capabilities -->
+  </core_capabilities>
+
+  <implemented_features>
+    <!-- The AI agent will populate this based on code analysis -->
+  </implemented_features>
+</project_specification>`
+      );
+
+      const project = {
+        id: `project-${Date.now()}`,
+        name: projectName,
+        path: projectPath,
+        lastOpened: new Date().toISOString(),
+      };
+
+      addProject(project);
+      setCurrentProject(project);
+      setShowNewProjectModal(false);
+
+      toast.success('Project created from repository', {
+        description: `Created ${projectName}`,
+      });
+
+      navigate({ to: '/board' });
+    } catch (error) {
+      logger.error('Failed to create project from custom URL:', error);
+      toast.error('Failed to create project', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const hasProjects = projects.length > 0;
+
+  return (
+    <div className="flex-1 flex flex-col h-full content-bg" data-testid="dashboard-view">
+      {/* Header with logo */}
+      <header className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
+        {/* Electron titlebar drag region */}
+        {isElectron() && (
+          <div
+            className={`absolute top-0 left-0 right-0 h-6 titlebar-drag-region z-40 pointer-events-none ${isMac ? 'pl-20' : ''}`}
+            aria-hidden="true"
+          />
+        )}
+        <div className="px-4 sm:px-8 py-4 flex items-center justify-between">
+          <div
+            className="flex items-center gap-2 sm:gap-3 cursor-pointer group titlebar-no-drag"
+            onClick={() => navigate({ to: '/dashboard' })}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 256 256"
+              role="img"
+              aria-label="Automaker Logo"
+              className="size-8 sm:size-10 group-hover:rotate-12 transition-transform duration-300 ease-out"
+            >
+              <defs>
+                <linearGradient
+                  id="bg-dashboard"
+                  x1="0"
+                  y1="0"
+                  x2="256"
+                  y2="256"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop offset="0%" style={{ stopColor: 'var(--brand-400)' }} />
+                  <stop offset="100%" style={{ stopColor: 'var(--brand-600)' }} />
+                </linearGradient>
+                <filter id="iconShadow-dashboard" x="-20%" y="-20%" width="140%" height="140%">
+                  <feDropShadow
+                    dx="0"
+                    dy="4"
+                    stdDeviation="4"
+                    floodColor="#000000"
+                    floodOpacity="0.25"
+                  />
+                </filter>
+              </defs>
+              <rect x="16" y="16" width="224" height="224" rx="56" fill="url(#bg-dashboard)" />
+              <g
+                fill="none"
+                stroke="#FFFFFF"
+                strokeWidth="20"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                filter="url(#iconShadow-dashboard)"
+              >
+                <path d="M92 92 L52 128 L92 164" />
+                <path d="M144 72 L116 184" />
+                <path d="M164 92 L204 128 L164 164" />
+              </g>
+            </svg>
+            <div className="flex flex-col">
+              <span className="font-bold text-foreground text-xl sm:text-2xl tracking-tight leading-none">
+                automaker<span className="text-brand-500">.</span>
+              </span>
+              <span className="text-xs text-muted-foreground leading-none font-medium mt-1">
+                v{appVersion} {versionSuffix}
+              </span>
+            </div>
+          </div>
+
+          {/* Projects Overview button */}
+          {hasProjects && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => navigate({ to: '/overview' })}
+              className="hidden sm:flex gap-2 titlebar-no-drag"
+              data-testid="projects-overview-button"
+            >
+              <LayoutDashboard className="w-4 h-4" />
+              Overview
+            </Button>
+          )}
+
+          {/* Mobile action buttons in header */}
+          {hasProjects && (
+            <div className="flex sm:hidden gap-2 titlebar-no-drag">
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => navigate({ to: '/overview' })}
+                title="Projects Overview"
+                data-testid="projects-overview-button-mobile"
+              >
+                <LayoutDashboard className="w-4 h-4" />
+              </Button>
+              <Button variant="outline" size="icon" onClick={handleOpenProject}>
+                <FolderOpen className="w-4 h-4" />
+              </Button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    size="icon"
+                    className="bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white"
+                    data-testid="create-new-project-mobile"
+                  >
+                    <Plus className="w-4 h-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-56">
+                  <DropdownMenuItem
+                    onClick={handleNewProject}
+                    data-testid="quick-setup-option-mobile"
+                  >
+                    <Plus className="w-4 h-4 mr-2" />
+                    Quick Setup
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={handleInteractiveMode}>
+                    <MessageSquare className="w-4 h-4 mr-2" />
+                    Interactive Mode
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          )}
+        </div>
+      </header>
+
+      {/* Main content */}
+      <div className="flex-1 overflow-y-auto p-4 sm:p-8">
+        <div className="max-w-6xl mx-auto">
+          {/* No projects - show getting started */}
+          {!hasProjects && (
+            <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
+              <div className="text-center mb-8 sm:mb-12">
+                <h2 className="text-2xl sm:text-3xl font-bold text-foreground mb-3">
+                  Welcome to Automaker
+                </h2>
+                <p className="text-base sm:text-lg text-muted-foreground max-w-xl mx-auto px-2">
+                  Your autonomous AI development studio. Get started by creating a new project or
+                  opening an existing one.
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 max-w-3xl mx-auto">
+                {/* New Project Card */}
+                <div
+                  className="group relative rounded-xl border border-border bg-card/80 backdrop-blur-sm hover:bg-card hover:border-brand-500/30 hover:shadow-xl hover:shadow-brand-500/5 transition-all duration-300 hover:-translate-y-1"
+                  data-testid="new-project-card"
+                >
+                  <div className="absolute inset-0 rounded-xl bg-linear-to-br from-brand-500/5 via-transparent to-purple-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                  <div className="relative p-4 sm:p-6 h-full flex flex-col">
+                    <div className="flex items-start gap-3 sm:gap-4 flex-1">
+                      <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/25 flex items-center justify-center group-hover:scale-105 group-hover:shadow-brand-500/40 transition-all duration-300 shrink-0">
+                        <Plus className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <h3 className="text-lg font-semibold text-foreground mb-1.5">
+                          New Project
+                        </h3>
+                        <p className="text-sm text-muted-foreground leading-relaxed">
+                          Create a new project from scratch with AI-powered development
+                        </p>
+                      </div>
+                    </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          className="w-full mt-4 sm:mt-5 bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white border-0 shadow-md shadow-brand-500/20 hover:shadow-brand-500/30 transition-all"
+                          data-testid="create-new-project"
+                        >
+                          <Plus className="w-4 h-4 mr-2" />
+                          Create Project
+                          <ChevronDown className="w-4 h-4 ml-2" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end" className="w-56">
+                        <DropdownMenuItem
+                          onClick={handleNewProject}
+                          data-testid="quick-setup-option-no-projects"
+                        >
+                          <Plus className="w-4 h-4 mr-2" />
+                          Quick Setup
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={handleInteractiveMode}
+                          data-testid="interactive-mode-option"
+                        >
+                          <MessageSquare className="w-4 h-4 mr-2" />
+                          Interactive Mode
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </div>
+
+                {/* Open Project Card */}
+                <div
+                  className="group relative rounded-xl border border-border bg-card/80 backdrop-blur-sm hover:bg-card hover:border-blue-500/30 hover:shadow-xl hover:shadow-blue-500/5 transition-all duration-300 cursor-pointer hover:-translate-y-1"
+                  onClick={handleOpenProject}
+                  data-testid="open-project-card"
+                >
+                  <div className="absolute inset-0 rounded-xl bg-linear-to-br from-blue-500/5 via-transparent to-cyan-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                  <div className="relative p-4 sm:p-6 h-full flex flex-col">
+                    <div className="flex items-start gap-3 sm:gap-4 flex-1">
+                      <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-muted border border-border flex items-center justify-center group-hover:bg-blue-500/10 group-hover:border-blue-500/30 group-hover:scale-105 transition-all duration-300 shrink-0">
+                        <FolderOpen className="w-5 h-5 sm:w-6 sm:h-6 text-muted-foreground group-hover:text-blue-500 transition-colors duration-300" />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <h3 className="text-lg font-semibold text-foreground mb-1.5">
+                          Open Project
+                        </h3>
+                        <p className="text-sm text-muted-foreground leading-relaxed">
+                          Open an existing project folder to continue working
+                        </p>
+                      </div>
+                    </div>
+                    <Button
+                      variant="secondary"
+                      className="w-full mt-4 sm:mt-5 bg-secondary/80 hover:bg-secondary text-foreground border border-border hover:border-blue-500/30 transition-all"
+                      data-testid="open-existing-project"
+                    >
+                      <FolderOpen className="w-4 h-4 mr-2" />
+                      Browse Folder
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Has projects - show project list */}
+          {hasProjects && (
+            <div className="space-y-6 sm:space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
+              {/* Search and actions header */}
+              <div className="flex items-center justify-between gap-4">
+                <h2 className="text-xl sm:text-2xl font-bold text-foreground">Your Projects</h2>
+                <div className="flex items-center gap-2">
+                  {/* Search input */}
+                  <div className="relative flex-1 sm:flex-none">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+                    <Input
+                      type="text"
+                      placeholder="Search projects..."
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      className="pl-9 pr-8 w-full sm:w-64"
+                      data-testid="project-search-input"
+                    />
+                    {searchQuery && (
+                      <button
+                        onClick={() => setSearchQuery('')}
+                        className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded hover:bg-muted transition-colors"
+                        title="Clear search"
+                      >
+                        <X className="w-4 h-4 text-muted-foreground" />
+                      </button>
+                    )}
+                  </div>
+                  {/* Desktop only buttons */}
+                  <Button variant="outline" onClick={handleOpenProject} className="hidden sm:flex">
+                    <FolderOpen className="w-4 h-4 mr-2" />
+                    Open Folder
+                  </Button>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        className="hidden sm:flex bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white"
+                        data-testid="create-new-project-header"
+                      >
+                        <Plus className="w-4 h-4 mr-2" />
+                        New Project
+                        <ChevronDown className="w-4 h-4 ml-2" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="w-56">
+                      <DropdownMenuItem
+                        onClick={handleNewProject}
+                        data-testid="quick-setup-option-has-projects"
+                      >
+                        <Plus className="w-4 h-4 mr-2" />
+                        Quick Setup
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={handleInteractiveMode}>
+                        <MessageSquare className="w-4 h-4 mr-2" />
+                        Interactive Mode
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </div>
+
+              {/* Favorites section */}
+              {favoriteProjects.length > 0 && (
+                <div>
+                  <div className="flex items-center gap-2 sm:gap-2.5 mb-3 sm:mb-4">
+                    <div className="w-7 h-7 sm:w-8 sm:h-8 rounded-lg bg-yellow-500/10 flex items-center justify-center">
+                      <Star className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-yellow-500 fill-yellow-500" />
+                    </div>
+                    <h3 className="text-base sm:text-lg font-semibold text-foreground">
+                      Favorites
+                    </h3>
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
+                    {favoriteProjects.map((project) => (
+                      <div
+                        key={project.id}
+                        className="group relative rounded-xl border border-yellow-500/30 bg-card/60 backdrop-blur-sm hover:bg-card hover:border-yellow-500/50 hover:shadow-lg hover:shadow-yellow-500/5 transition-all duration-300 cursor-pointer hover:-translate-y-0.5"
+                        onClick={() => handleProjectClick(project)}
+                        data-testid={`project-card-${project.id}`}
+                      >
+                        <div className="absolute inset-0 rounded-xl bg-linear-to-br from-yellow-500/5 to-amber-600/5 opacity-0 group-hover:opacity-100 transition-all duration-300" />
+                        <div className="relative p-3 sm:p-4">
+                          <div className="flex items-start gap-2.5 sm:gap-3">
+                            <div className="w-9 h-9 sm:w-10 sm:h-10 rounded-lg bg-yellow-500/10 border border-yellow-500/30 flex items-center justify-center group-hover:bg-yellow-500/20 transition-all duration-300 shrink-0 overflow-hidden">
+                              {project.customIconPath ? (
+                                <img
+                                  src={getAuthenticatedImageUrl(
+                                    project.customIconPath,
+                                    project.path
+                                  )}
+                                  alt={project.name}
+                                  className="w-full h-full object-cover"
+                                />
+                              ) : (
+                                (() => {
+                                  const IconComponent = getIconComponent(project.icon);
+                                  return (
+                                    <IconComponent className="w-4 h-4 sm:w-5 sm:h-5 text-yellow-500" />
+                                  );
+                                })()
+                              )}
+                            </div>
+                            <div className="flex-1 min-w-0">
+                              <p className="text-sm sm:text-base font-medium text-foreground truncate group-hover:text-yellow-500 transition-colors duration-300">
+                                {project.name}
+                              </p>
+                              <p className="text-xs text-muted-foreground/70 truncate mt-0.5 sm:mt-1">
+                                {project.path}
+                              </p>
+                              {project.lastOpened && (
+                                <p className="text-xs text-muted-foreground mt-1 sm:mt-1.5">
+                                  {new Date(project.lastOpened).toLocaleDateString()}
+                                </p>
+                              )}
+                            </div>
+                            <div className="flex items-center gap-0.5 sm:gap-1">
+                              <button
+                                onClick={(e) => handleToggleFavorite(e, project.id)}
+                                className="p-1 sm:p-1.5 rounded-lg hover:bg-yellow-500/20 transition-colors"
+                                title="Remove from favorites"
+                              >
+                                <Star className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-yellow-500 fill-yellow-500" />
+                              </button>
+                              <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                  <button
+                                    onClick={(e) => e.stopPropagation()}
+                                    className="p-1 sm:p-1.5 rounded-lg hover:bg-muted transition-colors opacity-0 group-hover:opacity-100"
+                                    title="More options"
+                                  >
+                                    <MoreVertical className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-muted-foreground" />
+                                  </button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                  <DropdownMenuItem
+                                    onClick={(e) => handleRemoveProject(e, project)}
+                                    className="text-destructive focus:text-destructive"
+                                  >
+                                    <Trash2 className="w-4 h-4 mr-2" />
+                                    Remove from Automaker
+                                  </DropdownMenuItem>
+                                </DropdownMenuContent>
+                              </DropdownMenu>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Recent projects section */}
+              {recentProjects.length > 0 && (
+                <div>
+                  <div className="flex items-center gap-2 sm:gap-2.5 mb-3 sm:mb-4">
+                    <div className="w-7 h-7 sm:w-8 sm:h-8 rounded-lg bg-muted/50 flex items-center justify-center">
+                      <Clock className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-muted-foreground" />
+                    </div>
+                    <h3 className="text-base sm:text-lg font-semibold text-foreground">
+                      Recent Projects
+                    </h3>
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
+                    {recentProjects.map((project) => (
+                      <div
+                        key={project.id}
+                        className="group relative rounded-xl border border-border bg-card/60 backdrop-blur-sm hover:bg-card hover:border-brand-500/40 hover:shadow-lg hover:shadow-brand-500/5 transition-all duration-300 cursor-pointer hover:-translate-y-0.5"
+                        onClick={() => handleProjectClick(project)}
+                        data-testid={`project-card-${project.id}`}
+                      >
+                        <div className="absolute inset-0 rounded-xl bg-linear-to-br from-brand-500/0 to-purple-600/0 group-hover:from-brand-500/5 group-hover:to-purple-600/5 transition-all duration-300" />
+                        <div className="relative p-3 sm:p-4">
+                          <div className="flex items-start gap-2.5 sm:gap-3">
+                            <div className="w-9 h-9 sm:w-10 sm:h-10 rounded-lg bg-muted/80 border border-border flex items-center justify-center group-hover:bg-brand-500/10 group-hover:border-brand-500/30 transition-all duration-300 shrink-0 overflow-hidden">
+                              {project.customIconPath ? (
+                                <img
+                                  src={getAuthenticatedImageUrl(
+                                    project.customIconPath,
+                                    project.path
+                                  )}
+                                  alt={project.name}
+                                  className="w-full h-full object-cover"
+                                />
+                              ) : (
+                                (() => {
+                                  const IconComponent = getIconComponent(project.icon);
+                                  return (
+                                    <IconComponent className="w-4 h-4 sm:w-5 sm:h-5 text-muted-foreground group-hover:text-brand-500 transition-colors duration-300" />
+                                  );
+                                })()
+                              )}
+                            </div>
+                            <div className="flex-1 min-w-0">
+                              <p className="text-sm sm:text-base font-medium text-foreground truncate group-hover:text-brand-500 transition-colors duration-300">
+                                {project.name}
+                              </p>
+                              <p className="text-xs text-muted-foreground/70 truncate mt-0.5 sm:mt-1">
+                                {project.path}
+                              </p>
+                              {project.lastOpened && (
+                                <p className="text-xs text-muted-foreground mt-1 sm:mt-1.5">
+                                  {new Date(project.lastOpened).toLocaleDateString()}
+                                </p>
+                              )}
+                            </div>
+                            <div className="flex items-center gap-0.5 sm:gap-1">
+                              <button
+                                onClick={(e) => handleToggleFavorite(e, project.id)}
+                                className="p-1 sm:p-1.5 rounded-lg hover:bg-muted transition-colors"
+                                title="Add to favorites"
+                              >
+                                <Star className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-muted-foreground/50 hover:text-yellow-500 transition-colors" />
+                              </button>
+                              <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                  <button
+                                    onClick={(e) => e.stopPropagation()}
+                                    className="p-1 sm:p-1.5 rounded-lg hover:bg-muted transition-colors opacity-0 group-hover:opacity-100"
+                                    title="More options"
+                                  >
+                                    <MoreVertical className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-muted-foreground" />
+                                  </button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                  <DropdownMenuItem
+                                    onClick={(e) => handleRemoveProject(e, project)}
+                                    className="text-destructive focus:text-destructive"
+                                  >
+                                    <Trash2 className="w-4 h-4 mr-2" />
+                                    Remove from Automaker
+                                  </DropdownMenuItem>
+                                </DropdownMenuContent>
+                              </DropdownMenu>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* No search results */}
+              {searchQuery && favoriteProjects.length === 0 && recentProjects.length === 0 && (
+                <div className="text-center py-12">
+                  <div className="w-16 h-16 rounded-full bg-muted/50 flex items-center justify-center mx-auto mb-4">
+                    <Search className="w-8 h-8 text-muted-foreground" />
+                  </div>
+                  <h3 className="text-lg font-medium text-foreground mb-2">No projects found</h3>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    No projects match "{searchQuery}"
+                  </p>
+                  <Button variant="outline" size="sm" onClick={() => setSearchQuery('')}>
+                    Clear search
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Modals */}
+      <NewProjectModal
+        open={showNewProjectModal}
+        onOpenChange={setShowNewProjectModal}
+        onCreateBlankProject={handleCreateBlankProject}
+        onCreateFromTemplate={handleCreateFromTemplate}
+        onCreateFromCustomUrl={handleCreateFromCustomUrl}
+        isCreating={isCreating}
+      />
+
+      <WorkspacePickerModal
+        open={showWorkspacePicker}
+        onOpenChange={setShowWorkspacePicker}
+        onSelect={handleWorkspaceSelect}
+      />
+
+      {/* Remove project confirmation dialog */}
+      <Dialog open={!!projectToRemove} onOpenChange={(open) => !open && setProjectToRemove(null)}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Remove Project</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to remove <strong>{projectToRemove?.name}</strong> from
+              Automaker?
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <p className="text-sm text-muted-foreground">
+              This will only remove the project from your Automaker projects list. The project files
+              on your computer will not be deleted.
+            </p>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setProjectToRemove(null)}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={handleConfirmRemove}>
+              <Trash2 className="w-4 h-4 mr-2" />
+              Remove Project
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Loading overlay */}
+      {isOpening && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm"
+          data-testid="project-opening-overlay"
+        >
+          <div className="flex flex-col items-center gap-4 p-8 rounded-2xl bg-card border border-border shadow-2xl">
+            <Spinner size="xl" />
+            <p className="text-foreground font-medium">Opening project...</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/file-editor-view/components/code-editor.tsx b/temp_repo/apps/ui/src/components/views/file-editor-view/components/code-editor.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a9cbd89cd63214c4d1b6889cb07f5a1c66673bb3
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/file-editor-view/components/code-editor.tsx
@@ -0,0 +1,709 @@
+import { useMemo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import CodeMirror, { type ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import { EditorView, keymap, Decoration, WidgetType } from '@codemirror/view';
+import { Extension, RangeSetBuilder, StateField } from '@codemirror/state';
+import { undo as cmUndo, redo as cmRedo } from '@codemirror/commands';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+import { search, openSearchPanel } from '@codemirror/search';
+
+import { getLanguageExtension } from '@/lib/codemirror-languages';
+import { cn } from '@/lib/utils';
+import { useIsMobile } from '@/hooks/use-media-query';
+import { DEFAULT_FONT_VALUE } from '@/config/ui-font-options';
+
+/** Default monospace font stack used when no custom font is set */
+const DEFAULT_EDITOR_FONT =
+  'var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace)';
+
+/** Get the actual CSS font family value for the editor */
+function getEditorFontFamily(fontValue: string | undefined): string {
+  if (!fontValue || fontValue === DEFAULT_FONT_VALUE) {
+    return DEFAULT_EDITOR_FONT;
+  }
+  return fontValue;
+}
+
+/** Handle exposed by CodeEditor for external control */
+export interface CodeEditorHandle {
+  /** Opens the CodeMirror search panel */
+  openSearch: () => void;
+  /** Focuses the editor */
+  focus: () => void;
+  /** Undoes the last edit */
+  undo: () => void;
+  /** Redoes the last undone edit */
+  redo: () => void;
+  /** Returns the current text selection with line range, or null if nothing is selected */
+  getSelection: () => { text: string; fromLine: number; toLine: number } | null;
+  /** Returns the current editor content (may differ from store if onChange hasn't fired yet) */
+  getValue: () => string | null;
+}
+
+interface CodeEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  filePath: string;
+  readOnly?: boolean;
+  tabSize?: number;
+  wordWrap?: boolean;
+  fontSize?: number;
+  /** CSS font-family value for the editor. Use 'default' or undefined for the theme default mono font. */
+  fontFamily?: string;
+  onCursorChange?: (line: number, col: number) => void;
+  onSave?: () => void;
+  className?: string;
+  /** When true, scrolls the cursor into view (e.g. after virtual keyboard opens) */
+  scrollCursorIntoView?: boolean;
+  /** Raw unified diff string for the file, used to highlight added/removed lines */
+  diffContent?: string | null;
+  /** Fires when the text selection state changes (true = non-empty selection) */
+  onSelectionChange?: (hasSelection: boolean) => void;
+}
+
+/** Get a human-readable language name */
+export function getLanguageName(filePath: string): string {
+  const name = filePath.split('/').pop()?.toLowerCase() || '';
+  const dotIndex = name.lastIndexOf('.');
+  // Files without an extension (no dot, or dotfile with dot at position 0)
+  const ext = dotIndex > 0 ? name.slice(dotIndex + 1) : '';
+
+  if (name === 'dockerfile' || name.startsWith('dockerfile.')) return 'Dockerfile';
+  if (name === 'makefile' || name === 'gnumakefile') return 'Makefile';
+  if (name.startsWith('.env')) return 'Environment';
+  if (name.startsWith('.git') || name.startsWith('.npm') || name.startsWith('.docker'))
+    return 'Config';
+
+  switch (ext) {
+    case 'js':
+    case 'mjs':
+    case 'cjs':
+      return 'JavaScript';
+    case 'jsx':
+      return 'JSX';
+    case 'ts':
+    case 'mts':
+    case 'cts':
+      return 'TypeScript';
+    case 'tsx':
+      return 'TSX';
+    case 'html':
+    case 'htm':
+      return 'HTML';
+    case 'svelte':
+      return 'Svelte';
+    case 'vue':
+      return 'Vue';
+    case 'css':
+      return 'CSS';
+    case 'scss':
+      return 'SCSS';
+    case 'less':
+      return 'Less';
+    case 'json':
+    case 'jsonc':
+    case 'json5':
+      return 'JSON';
+    case 'xml':
+    case 'svg':
+      return 'XML';
+    case 'md':
+    case 'mdx':
+    case 'markdown':
+      return 'Markdown';
+    case 'py':
+    case 'pyx':
+    case 'pyi':
+      return 'Python';
+    case 'java':
+      return 'Java';
+    case 'kt':
+    case 'kts':
+      return 'Kotlin';
+    case 'rs':
+      return 'Rust';
+    case 'c':
+    case 'h':
+      return 'C';
+    case 'cpp':
+    case 'cc':
+    case 'cxx':
+    case 'hpp':
+      return 'C++';
+    case 'go':
+      return 'Go';
+    case 'swift':
+      return 'Swift';
+    case 'rb':
+    case 'erb':
+      return 'Ruby';
+    case 'php':
+      return 'PHP';
+    case 'sh':
+    case 'bash':
+    case 'zsh':
+      return 'Shell';
+    case 'sql':
+      return 'SQL';
+    case 'yaml':
+    case 'yml':
+      return 'YAML';
+    case 'toml':
+      return 'TOML';
+    default:
+      return 'Plain Text';
+  }
+}
+
+// ─── Inline Diff Decorations ─────────────────────────────────────────────
+
+/** Parsed diff info: added line numbers and groups of deleted lines with content */
+interface DiffInfo {
+  addedLines: Set<number>;
+  /**
+   * Groups of consecutive deleted lines keyed by the new-file line number
+   * they appear before. E.g. key=3 means the deleted lines were removed
+   * just before line 3 in the current file.
+   */
+  deletedGroups: Map<number, string[]>;
+}
+
+/** Parse a unified diff to extract added lines and groups of deleted lines */
+function parseUnifiedDiff(diffContent: string): DiffInfo {
+  const addedLines = new Set<number>();
+  const deletedGroups = new Map<number, string[]>();
+  const lines = diffContent.split('\n');
+
+  let currentNewLine = 0;
+  let inHunk = false;
+  let pendingDeletions: string[] = [];
+
+  const flushDeletions = () => {
+    if (pendingDeletions.length > 0) {
+      const existing = deletedGroups.get(currentNewLine);
+      if (existing) {
+        existing.push(...pendingDeletions);
+      } else {
+        deletedGroups.set(currentNewLine, [...pendingDeletions]);
+      }
+      pendingDeletions = [];
+    }
+  };
+
+  for (const line of lines) {
+    // Parse hunk header: @@ -oldStart,oldCount +newStart,newCount @@ ...
+    if (line.startsWith('@@')) {
+      flushDeletions();
+      const match = line.match(/@@ -\d+(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+      if (match) {
+        currentNewLine = parseInt(match[1], 10);
+        inHunk = true;
+      }
+      continue;
+    }
+
+    if (!inHunk) continue;
+
+    // Skip diff header lines
+    if (
+      line.startsWith('--- ') ||
+      line.startsWith('+++ ') ||
+      line.startsWith('diff ') ||
+      line.startsWith('index ')
+    ) {
+      continue;
+    }
+
+    if (line.startsWith('+')) {
+      flushDeletions();
+      addedLines.add(currentNewLine);
+      currentNewLine++;
+    } else if (line.startsWith('-')) {
+      // Accumulate deleted lines to show as a group
+      pendingDeletions.push(line.substring(1));
+    } else if (line.startsWith(' ') || line === '') {
+      flushDeletions();
+      currentNewLine++;
+    }
+  }
+
+  flushDeletions();
+  return { addedLines, deletedGroups };
+}
+
+/** Widget that renders a block of deleted lines inline in the editor */
+class DeletedLinesWidget extends WidgetType {
+  constructor(readonly lines: string[]) {
+    super();
+  }
+
+  toDOM() {
+    const container = document.createElement('div');
+    container.className = 'cm-diff-deleted-widget';
+    container.style.cssText =
+      'background-color: oklch(0.55 0.22 25 / 0.1); border-left: 3px solid oklch(0.55 0.22 25 / 0.5);';
+
+    for (const line of this.lines) {
+      const lineEl = document.createElement('div');
+      lineEl.style.cssText =
+        'text-decoration: line-through; color: oklch(0.55 0.22 25 / 0.8); background-color: oklch(0.55 0.22 25 / 0.15); padding: 0 0.5rem; padding-left: calc(0.5rem - 3px); white-space: pre; font-family: inherit;';
+      lineEl.textContent = line || ' ';
+      container.appendChild(lineEl);
+    }
+
+    return container;
+  }
+
+  eq(other: WidgetType) {
+    if (!(other instanceof DeletedLinesWidget)) return false;
+    return (
+      this.lines.length === other.lines.length && this.lines.every((l, i) => l === other.lines[i])
+    );
+  }
+
+  ignoreEvent() {
+    return true;
+  }
+}
+
+/** Create a CodeMirror extension that decorates lines based on diff */
+function createDiffDecorations(diffContent: string | null | undefined): Extension {
+  if (!diffContent) {
+    return [];
+  }
+
+  const { addedLines, deletedGroups } = parseUnifiedDiff(diffContent);
+  if (addedLines.size === 0 && deletedGroups.size === 0) {
+    return [];
+  }
+
+  const addedLineDecoration = Decoration.line({
+    class: 'cm-diff-added-line',
+    attributes: { style: 'background-color: oklch(0.65 0.2 145 / 0.15);' },
+  });
+
+  const extensions: Extension[] = [];
+
+  // Line decorations for added lines
+  if (addedLines.size > 0) {
+    extensions.push(
+      EditorView.decorations.of((view) => {
+        const builder = new RangeSetBuilder<Decoration>();
+        const doc = view.state.doc;
+
+        for (const lineNum of addedLines) {
+          if (lineNum >= 1 && lineNum <= doc.lines) {
+            const linePos = doc.line(lineNum).from;
+            builder.add(linePos, linePos, addedLineDecoration);
+          }
+        }
+
+        return builder.finish();
+      })
+    );
+  }
+
+  // Widget decorations for deleted line groups.
+  // Block decorations MUST be provided via a StateField (not a plugin/function).
+  if (deletedGroups.size > 0) {
+    const buildDeletedDecorations = (doc: {
+      lines: number;
+      line(n: number): { from: number; to: number };
+    }) => {
+      const builder = new RangeSetBuilder<Decoration>();
+      const positions = [...deletedGroups.keys()].sort((a, b) => a - b);
+
+      for (const pos of positions) {
+        const deletedLines = deletedGroups.get(pos)!;
+        if (pos >= 1 && pos <= doc.lines) {
+          const linePos = doc.line(pos).from;
+          builder.add(
+            linePos,
+            linePos,
+            Decoration.widget({
+              widget: new DeletedLinesWidget(deletedLines),
+              block: true,
+              side: -1,
+            })
+          );
+        } else {
+          const lastLinePos = doc.line(doc.lines).to;
+          builder.add(
+            lastLinePos,
+            lastLinePos,
+            Decoration.widget({
+              widget: new DeletedLinesWidget(deletedLines),
+              block: true,
+              side: 1,
+            })
+          );
+        }
+      }
+
+      return builder.finish();
+    };
+
+    extensions.push(
+      StateField.define({
+        create(state) {
+          return buildDeletedDecorations(state.doc);
+        },
+        update(decorations, tr) {
+          if (tr.docChanged) {
+            return decorations.map(tr.changes);
+          }
+          return decorations;
+        },
+        provide: (f) => EditorView.decorations.from(f),
+      })
+    );
+  }
+
+  return extensions;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+
+// Syntax highlighting using CSS variables for theme compatibility
+const syntaxColors = HighlightStyle.define([
+  { tag: t.keyword, color: 'var(--chart-4, oklch(0.7 0.15 280))' },
+  { tag: t.string, color: 'var(--chart-1, oklch(0.646 0.222 41.116))' },
+  { tag: t.number, color: 'var(--chart-3, oklch(0.7 0.15 150))' },
+  { tag: t.bool, color: 'var(--chart-4, oklch(0.7 0.15 280))' },
+  { tag: t.null, color: 'var(--chart-4, oklch(0.7 0.15 280))' },
+  { tag: t.comment, color: 'var(--muted-foreground)', fontStyle: 'italic' },
+  { tag: t.propertyName, color: 'var(--chart-2, oklch(0.6 0.118 184.704))' },
+  { tag: t.variableName, color: 'var(--chart-2, oklch(0.6 0.118 184.704))' },
+  { tag: t.function(t.variableName), color: 'var(--primary)' },
+  { tag: t.typeName, color: 'var(--chart-5, oklch(0.65 0.2 30))' },
+  { tag: t.className, color: 'var(--chart-5, oklch(0.65 0.2 30))' },
+  { tag: t.definition(t.variableName), color: 'var(--chart-2, oklch(0.6 0.118 184.704))' },
+  { tag: t.operator, color: 'var(--muted-foreground)' },
+  { tag: t.bracket, color: 'var(--muted-foreground)' },
+  { tag: t.punctuation, color: 'var(--muted-foreground)' },
+  { tag: t.attributeName, color: 'var(--chart-5, oklch(0.65 0.2 30))' },
+  { tag: t.attributeValue, color: 'var(--chart-1, oklch(0.646 0.222 41.116))' },
+  { tag: t.tagName, color: 'var(--chart-4, oklch(0.7 0.15 280))' },
+  { tag: t.heading, color: 'var(--foreground)', fontWeight: 'bold' },
+  { tag: t.emphasis, fontStyle: 'italic' },
+  { tag: t.strong, fontWeight: 'bold' },
+  { tag: t.link, color: 'var(--primary)', textDecoration: 'underline' },
+  { tag: t.content, color: 'var(--foreground)' },
+  { tag: t.regexp, color: 'var(--chart-1, oklch(0.646 0.222 41.116))' },
+  { tag: t.meta, color: 'var(--muted-foreground)' },
+]);
+
+export const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(function CodeEditor(
+  {
+    value,
+    onChange,
+    filePath,
+    readOnly = false,
+    tabSize = 2,
+    wordWrap = true,
+    fontSize = 13,
+    fontFamily,
+    onCursorChange,
+    onSave,
+    className,
+    scrollCursorIntoView = false,
+    diffContent,
+    onSelectionChange,
+  },
+  ref
+) {
+  const editorRef = useRef<ReactCodeMirrorRef>(null);
+  const isMobile = useIsMobile();
+
+  // Stable refs for callbacks to avoid frequent extension rebuilds
+  const onSaveRef = useRef(onSave);
+  const onCursorChangeRef = useRef(onCursorChange);
+  const onSelectionChangeRef = useRef(onSelectionChange);
+  const lastHasSelectionRef = useRef(false);
+  useEffect(() => {
+    onSaveRef.current = onSave;
+  }, [onSave]);
+  useEffect(() => {
+    onCursorChangeRef.current = onCursorChange;
+  }, [onCursorChange]);
+  useEffect(() => {
+    onSelectionChangeRef.current = onSelectionChange;
+  }, [onSelectionChange]);
+
+  // Expose imperative methods to parent components
+  useImperativeHandle(
+    ref,
+    () => ({
+      openSearch: () => {
+        if (editorRef.current?.view) {
+          editorRef.current.view.focus();
+          openSearchPanel(editorRef.current.view);
+        }
+      },
+      focus: () => {
+        if (editorRef.current?.view) {
+          editorRef.current.view.focus();
+        }
+      },
+      undo: () => {
+        if (editorRef.current?.view) {
+          editorRef.current.view.focus();
+          cmUndo(editorRef.current.view);
+        }
+      },
+      redo: () => {
+        if (editorRef.current?.view) {
+          editorRef.current.view.focus();
+          cmRedo(editorRef.current.view);
+        }
+      },
+      getSelection: () => {
+        const view = editorRef.current?.view;
+        if (!view) return null;
+        const { from, to } = view.state.selection.main;
+        if (from === to) return null;
+        const text = view.state.sliceDoc(from, to);
+        const fromLine = view.state.doc.lineAt(from).number;
+        const toLine = view.state.doc.lineAt(to).number;
+        return { text, fromLine, toLine };
+      },
+      getValue: () => {
+        const view = editorRef.current?.view;
+        if (!view) return null;
+        return view.state.doc.toString();
+      },
+    }),
+    []
+  );
+
+  // When the virtual keyboard opens on mobile, the container shrinks but the
+  // cursor may be below the new fold. Dispatch a scrollIntoView effect so
+  // CodeMirror re-centres the viewport around the caret.
+  useEffect(() => {
+    if (scrollCursorIntoView && editorRef.current?.view) {
+      const view = editorRef.current.view;
+      // Request CodeMirror to scroll the current selection into view
+      view.dispatch({
+        effects: EditorView.scrollIntoView(view.state.selection.main.head, { y: 'center' }),
+      });
+    }
+  }, [scrollCursorIntoView]);
+
+  // Resolve the effective font family CSS value
+  const resolvedFontFamily = useMemo(() => getEditorFontFamily(fontFamily), [fontFamily]);
+
+  // Build editor theme dynamically based on fontSize, fontFamily, and screen size
+  const editorTheme = useMemo(
+    () =>
+      EditorView.theme({
+        '&': {
+          height: '100%',
+          fontSize: `${fontSize}px`,
+          fontFamily: resolvedFontFamily,
+          backgroundColor: 'transparent',
+          color: 'var(--foreground)',
+        },
+        '.cm-scroller': {
+          overflow: 'auto',
+          fontFamily: resolvedFontFamily,
+        },
+        '.cm-content': {
+          padding: '0.5rem 0',
+          minHeight: '100%',
+          caretColor: 'var(--primary)',
+        },
+        '.cm-cursor, .cm-dropCursor': {
+          borderLeftColor: 'var(--primary)',
+        },
+        '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+          backgroundColor: 'oklch(0.55 0.25 265 / 0.3)',
+        },
+        '.cm-activeLine': {
+          backgroundColor: 'var(--accent)',
+          opacity: '0.3',
+        },
+        '.cm-line': {
+          padding: '0 0.5rem',
+        },
+        '&.cm-focused': {
+          outline: 'none',
+        },
+        '.cm-gutters': {
+          backgroundColor: 'transparent',
+          color: 'var(--muted-foreground)',
+          border: 'none',
+          borderRight: '1px solid var(--border)',
+          paddingRight: '0.25rem',
+        },
+        '.cm-lineNumbers .cm-gutterElement': {
+          minWidth: isMobile ? '1.75rem' : '3rem',
+          textAlign: 'right',
+          paddingRight: isMobile ? '0.25rem' : '0.5rem',
+          fontSize: `${fontSize - 1}px`,
+        },
+        '.cm-foldGutter .cm-gutterElement': {
+          padding: '0 0.25rem',
+        },
+        '.cm-placeholder': {
+          color: 'var(--muted-foreground)',
+          fontStyle: 'italic',
+        },
+        // Search panel styling
+        '.cm-panels': {
+          backgroundColor: 'var(--card)',
+          borderBottom: '1px solid var(--border)',
+        },
+        '.cm-panels-top': {
+          borderBottom: '1px solid var(--border)',
+        },
+        '.cm-search': {
+          backgroundColor: 'var(--card)',
+          padding: '0.5rem 0.75rem',
+          gap: '0.375rem',
+          fontSize: `${fontSize - 1}px`,
+        },
+        '.cm-search input, .cm-search select': {
+          backgroundColor: 'var(--background)',
+          color: 'var(--foreground)',
+          border: '1px solid var(--border)',
+          borderRadius: '0.375rem',
+          padding: '0.25rem 0.5rem',
+          outline: 'none',
+          fontSize: `${fontSize - 1}px`,
+          fontFamily:
+            'var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace)',
+        },
+        '.cm-search input:focus': {
+          borderColor: 'var(--primary)',
+          boxShadow: '0 0 0 1px var(--primary)',
+        },
+        '.cm-search button': {
+          backgroundColor: 'var(--muted)',
+          color: 'var(--foreground)',
+          border: '1px solid var(--border)',
+          borderRadius: '0.375rem',
+          padding: '0.25rem 0.625rem',
+          cursor: 'pointer',
+          fontSize: `${fontSize - 1}px`,
+          transition: 'background-color 0.15s ease',
+        },
+        '.cm-search button:hover': {
+          backgroundColor: 'var(--accent)',
+        },
+        '.cm-search button[name="close"]': {
+          backgroundColor: 'transparent',
+          border: 'none',
+          padding: '0.25rem',
+          borderRadius: '0.25rem',
+          color: 'var(--muted-foreground)',
+        },
+        '.cm-search button[name="close"]:hover': {
+          backgroundColor: 'var(--accent)',
+          color: 'var(--foreground)',
+        },
+        '.cm-search label': {
+          color: 'var(--muted-foreground)',
+          fontSize: `${fontSize - 1}px`,
+        },
+        '.cm-search .cm-textfield': {
+          minWidth: '10rem',
+        },
+        '.cm-searchMatch': {
+          backgroundColor: 'oklch(0.7 0.2 90 / 0.3)',
+          borderRadius: '1px',
+        },
+        '.cm-searchMatch-selected': {
+          backgroundColor: 'oklch(0.6 0.25 265 / 0.4)',
+        },
+      }),
+    [fontSize, resolvedFontFamily, isMobile]
+  );
+
+  // Build extensions list
+  // Uses refs for onSave/onCursorChange to avoid frequent extension rebuilds
+  // when parent passes inline arrow functions
+  const extensions = useMemo(() => {
+    const exts: Extension[] = [
+      syntaxHighlighting(syntaxColors),
+      editorTheme,
+      search(),
+      EditorView.updateListener.of((update) => {
+        if (update.selectionSet) {
+          if (onCursorChangeRef.current) {
+            const pos = update.state.selection.main.head;
+            const line = update.state.doc.lineAt(pos);
+            onCursorChangeRef.current(line.number, pos - line.from + 1);
+          }
+          if (onSelectionChangeRef.current) {
+            const { from, to } = update.state.selection.main;
+            const hasSelection = from !== to;
+            if (hasSelection !== lastHasSelectionRef.current) {
+              lastHasSelectionRef.current = hasSelection;
+              onSelectionChangeRef.current(hasSelection);
+            }
+          }
+        }
+      }),
+    ];
+
+    // Add save keybinding (always register, check ref at call time)
+    exts.push(
+      keymap.of([
+        {
+          key: 'Mod-s',
+          run: () => {
+            onSaveRef.current?.();
+            return true;
+          },
+        },
+      ])
+    );
+
+    // Add word wrap
+    if (wordWrap) {
+      exts.push(EditorView.lineWrapping);
+    }
+
+    // Add tab size
+    exts.push(EditorView.editorAttributes.of({ style: `tab-size: ${tabSize}` }));
+
+    // Add language extension
+    const langExt = getLanguageExtension(filePath);
+    if (langExt) {
+      exts.push(langExt);
+    }
+
+    // Add inline diff decorations if diff content is provided
+    if (diffContent) {
+      exts.push(createDiffDecorations(diffContent));
+    }
+
+    return exts;
+  }, [filePath, wordWrap, tabSize, editorTheme, diffContent]);
+
+  return (
+    <div className={cn('h-full w-full', className)}>
+      <CodeMirror
+        ref={editorRef}
+        value={value}
+        onChange={onChange}
+        extensions={extensions}
+        theme="none"
+        height="100%"
+        readOnly={readOnly}
+        className="h-full [&_.cm-editor]:h-full"
+        basicSetup={{
+          lineNumbers: true,
+          foldGutter: true,
+          highlightActiveLine: true,
+          highlightSelectionMatches: true,
+          autocompletion: false,
+          bracketMatching: true,
+          indentOnInput: true,
+          closeBrackets: true,
+          tabSize,
+        }}
+      />
+    </div>
+  );
+});
diff --git a/temp_repo/apps/ui/src/components/views/file-editor-view/components/editor-settings-form.tsx b/temp_repo/apps/ui/src/components/views/file-editor-view/components/editor-settings-form.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ec330cdff2c5b442cd5efc7c5dc6941bbe04238e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/file-editor-view/components/editor-settings-form.tsx
@@ -0,0 +1,95 @@
+import { RotateCcw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Slider } from '@/components/ui/slider';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { UI_MONO_FONT_OPTIONS, DEFAULT_FONT_VALUE } from '@/config/ui-font-options';
+
+interface EditorSettingsFormProps {
+  editorFontSize: number;
+  setEditorFontSize: (value: number) => void;
+  editorFontFamily: string | null | undefined;
+  setEditorFontFamily: (value: string) => void;
+  editorAutoSave: boolean;
+  setEditorAutoSave: (value: boolean) => void;
+}
+
+export function EditorSettingsForm({
+  editorFontSize,
+  setEditorFontSize,
+  editorFontFamily,
+  setEditorFontFamily,
+  editorAutoSave,
+  setEditorAutoSave,
+}: EditorSettingsFormProps) {
+  return (
+    <>
+      {/* Font Size */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label className="text-xs font-medium">Font Size</Label>
+          <span className="text-xs text-muted-foreground">{editorFontSize}px</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Slider
+            value={[editorFontSize]}
+            min={8}
+            max={32}
+            step={1}
+            onValueChange={([value]) => setEditorFontSize(value)}
+            className="flex-1"
+          />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 shrink-0"
+            onClick={() => setEditorFontSize(13)}
+            disabled={editorFontSize === 13}
+            title="Reset to default"
+          >
+            <RotateCcw className="h-3 w-3" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Font Family */}
+      <div className="space-y-2">
+        <Label className="text-xs font-medium">Font Family</Label>
+        <Select
+          value={editorFontFamily || DEFAULT_FONT_VALUE}
+          onValueChange={(value) => setEditorFontFamily(value)}
+        >
+          <SelectTrigger className="w-full h-8 text-xs">
+            <SelectValue placeholder="Default (Geist Mono)" />
+          </SelectTrigger>
+          <SelectContent>
+            {UI_MONO_FONT_OPTIONS.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                <span
+                  style={{
+                    fontFamily: option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
+                  }}
+                >
+                  {option.label}
+                </span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Auto Save toggle */}
+      <div className="flex items-center justify-between">
+        <Label className="text-xs font-medium">Auto Save</Label>
+        <Switch checked={editorAutoSave} onCheckedChange={setEditorAutoSave} />
+      </div>
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/file-editor-view/components/editor-tabs.tsx b/temp_repo/apps/ui/src/components/views/file-editor-view/components/editor-tabs.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e0c1bc8ed5cc25b9671dd0312b3c73e0cb3491ed
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/file-editor-view/components/editor-tabs.tsx
@@ -0,0 +1,235 @@
+import { useRef, useEffect, useCallback } from 'react';
+import { X, Circle, MoreHorizontal, Save, ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { EditorTab } from '../use-file-editor-store';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+interface EditorTabsProps {
+  tabs: EditorTab[];
+  activeTabId: string | null;
+  onTabSelect: (tabId: string) => void;
+  onTabClose: (tabId: string) => void;
+  onCloseAll: () => void;
+  /** Called when the save button is clicked (mobile only) */
+  onSave?: () => void;
+  /** Whether there are unsaved changes (controls enabled state of save button) */
+  isDirty?: boolean;
+  /** Whether to show the save button in the tab bar (intended for mobile) */
+  showSaveButton?: boolean;
+}
+
+/** Get a file icon color based on extension */
+function getFileColor(fileName: string): string {
+  const name = fileName.toLowerCase();
+
+  // Handle dotfiles and extensionless files by name first
+  if (name.startsWith('.env')) return 'text-yellow-600';
+  if (name === 'dockerfile' || name.startsWith('dockerfile.')) return 'text-blue-300';
+  if (name === 'makefile' || name === 'gnumakefile') return 'text-orange-300';
+  if (name === '.gitignore' || name === '.dockerignore' || name === '.npmignore')
+    return 'text-gray-400';
+
+  const dotIndex = name.lastIndexOf('.');
+  const ext = dotIndex > 0 ? name.slice(dotIndex + 1) : '';
+
+  switch (ext) {
+    case 'ts':
+    case 'tsx':
+      return 'text-blue-400';
+    case 'js':
+    case 'jsx':
+    case 'mjs':
+      return 'text-yellow-400';
+    case 'css':
+    case 'scss':
+    case 'less':
+      return 'text-purple-400';
+    case 'html':
+    case 'htm':
+      return 'text-orange-400';
+    case 'json':
+      return 'text-yellow-300';
+    case 'md':
+    case 'mdx':
+      return 'text-gray-300';
+    case 'py':
+      return 'text-green-400';
+    case 'rs':
+      return 'text-orange-500';
+    case 'go':
+      return 'text-cyan-400';
+    case 'rb':
+      return 'text-red-400';
+    case 'java':
+    case 'kt':
+      return 'text-red-500';
+    case 'sql':
+      return 'text-blue-300';
+    case 'yaml':
+    case 'yml':
+      return 'text-pink-400';
+    case 'toml':
+      return 'text-gray-400';
+    case 'sh':
+    case 'bash':
+    case 'zsh':
+      return 'text-green-300';
+    default:
+      // Very faint dot for unknown file types so it's not confused
+      // with the filled dirty-indicator dot
+      return 'text-muted-foreground/30';
+  }
+}
+
+export function EditorTabs({
+  tabs,
+  activeTabId,
+  onTabSelect,
+  onTabClose,
+  onCloseAll,
+  onSave,
+  isDirty,
+  showSaveButton,
+}: EditorTabsProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const activeTabRef = useRef<HTMLDivElement>(null);
+
+  // Scroll the active tab into view when it changes
+  useEffect(() => {
+    if (activeTabRef.current) {
+      activeTabRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'nearest',
+      });
+    }
+  }, [activeTabId]);
+
+  const scrollBy = useCallback((direction: 'left' | 'right') => {
+    if (!scrollRef.current) return;
+    const amount = direction === 'left' ? -200 : 200;
+    scrollRef.current.scrollBy({ left: amount, behavior: 'smooth' });
+  }, []);
+
+  if (tabs.length === 0) return null;
+
+  return (
+    <div className="flex items-center border-b border-border bg-muted/30" data-testid="editor-tabs">
+      {/* Scroll left arrow */}
+      <button
+        onClick={() => scrollBy('left')}
+        className="shrink-0 p-1 text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+        title="Scroll tabs left"
+      >
+        <ChevronLeft className="w-4 h-4" />
+      </button>
+
+      {/* Scrollable tab area */}
+      <div
+        ref={scrollRef}
+        className="flex items-center overflow-x-auto flex-1 min-w-0 scrollbar-none"
+      >
+        {tabs.map((tab) => {
+          const isActive = tab.id === activeTabId;
+          const fileColor = getFileColor(tab.fileName);
+
+          return (
+            <div
+              key={tab.id}
+              ref={isActive ? activeTabRef : undefined}
+              className={cn(
+                'group flex items-center gap-1.5 px-3 py-1.5 cursor-pointer border-r border-border min-w-0 max-w-[200px] shrink-0 text-sm transition-colors',
+                isActive
+                  ? 'bg-background text-foreground border-b-2 border-b-primary'
+                  : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+              )}
+              onClick={() => onTabSelect(tab.id)}
+              title={tab.filePath}
+            >
+              {/* Dirty indicator */}
+              {tab.isDirty ? (
+                <Circle className="w-2 h-2 shrink-0 fill-current text-primary" />
+              ) : (
+                <span
+                  className={cn('w-2 h-2 rounded-full shrink-0', fileColor.replace('text-', 'bg-'))}
+                />
+              )}
+
+              {/* File name */}
+              <span className="truncate">{tab.fileName}</span>
+
+              {/* Close button */}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onTabClose(tab.id);
+                }}
+                className={cn(
+                  'p-0.5 rounded shrink-0 transition-colors',
+                  'opacity-0 group-hover:opacity-100',
+                  isActive && 'opacity-60',
+                  'hover:bg-accent'
+                )}
+                title="Close"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Scroll right arrow */}
+      <button
+        onClick={() => scrollBy('right')}
+        className="shrink-0 p-1 text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+        title="Scroll tabs right"
+      >
+        <ChevronRight className="w-4 h-4" />
+      </button>
+
+      {/* Tab actions: save button (mobile) + close-all dropdown */}
+      <div className="shrink-0 flex items-center px-1 gap-0.5 border-l border-border">
+        {/* Save button — shown in the tab bar on mobile */}
+        {showSaveButton && onSave && (
+          <button
+            onClick={onSave}
+            disabled={!isDirty}
+            className={cn(
+              'p-1 rounded transition-colors',
+              isDirty
+                ? 'text-primary hover:text-primary hover:bg-muted/50'
+                : 'text-muted-foreground/40 cursor-not-allowed'
+            )}
+            title="Save file (Ctrl+S)"
+            aria-label="Save file"
+          >
+            <Save className="w-4 h-4" />
+          </button>
+        )}
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+              title="Tab actions"
+            >
+              <MoreHorizontal className="w-4 h-4" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-40">
+            <DropdownMenuItem onClick={onCloseAll} className="gap-2 cursor-pointer">
+              <X className="w-4 h-4" />
+              <span>Close All</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/file-editor-view/components/file-tree.tsx b/temp_repo/apps/ui/src/components/views/file-editor-view/components/file-tree.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a45d0cfa05c499554199b63953a4bfde5a6ee57e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/file-editor-view/components/file-tree.tsx
@@ -0,0 +1,1015 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import {
+  File,
+  Folder,
+  FolderOpen,
+  FolderPlus,
+  FilePlus,
+  ChevronRight,
+  ChevronDown,
+  Trash2,
+  Pencil,
+  Eye,
+  EyeOff,
+  RefreshCw,
+  MoreVertical,
+  Copy,
+  ClipboardCopy,
+  FolderInput,
+  FolderOutput,
+  Download,
+  Plus,
+  Minus,
+  AlertTriangle,
+  GripVertical,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  useFileEditorStore,
+  type FileTreeNode,
+  type EnhancedGitFileStatus,
+} from '../use-file-editor-store';
+import { useFileBrowser } from '@/contexts/file-browser-context';
+
+interface FileTreeProps {
+  onFileSelect: (path: string) => void;
+  onCreateFile: (parentPath: string, name: string) => Promise<void>;
+  onCreateFolder: (parentPath: string, name: string) => Promise<void>;
+  onDeleteItem: (path: string, isDirectory: boolean) => Promise<void>;
+  onRenameItem: (oldPath: string, newName: string) => Promise<void>;
+  onCopyPath: (path: string) => void;
+  onRefresh: () => void;
+  onToggleFolder: (path: string) => void;
+  activeFilePath: string | null;
+  onCopyItem?: (sourcePath: string, destinationPath: string) => Promise<void>;
+  onMoveItem?: (sourcePath: string, destinationPath: string) => Promise<void>;
+  onDownloadItem?: (filePath: string) => Promise<void>;
+  onDragDropMove?: (sourcePaths: string[], targetFolderPath: string) => Promise<void>;
+  effectivePath?: string;
+}
+
+/** Get a color class for git status */
+function getGitStatusColor(status: string | undefined): string {
+  if (!status) return '';
+  switch (status) {
+    case 'M':
+      return 'text-yellow-500'; // modified
+    case 'A':
+      return 'text-green-500'; // added/staged
+    case 'D':
+      return 'text-red-500'; // deleted
+    case '?':
+      return 'text-gray-400'; // untracked
+    case '!':
+      return 'text-gray-600'; // ignored
+    case 'S':
+      return 'text-blue-500'; // staged
+    case 'R':
+      return 'text-purple-500'; // renamed
+    case 'C':
+      return 'text-cyan-500'; // copied
+    case 'U':
+      return 'text-orange-500'; // conflicted
+    default:
+      return 'text-muted-foreground';
+  }
+}
+
+/** Get a status label for git status */
+function getGitStatusLabel(status: string | undefined): string {
+  if (!status) return '';
+  switch (status) {
+    case 'M':
+      return 'Modified';
+    case 'A':
+      return 'Added';
+    case 'D':
+      return 'Deleted';
+    case '?':
+      return 'Untracked';
+    case '!':
+      return 'Ignored';
+    case 'S':
+      return 'Staged';
+    case 'R':
+      return 'Renamed';
+    case 'C':
+      return 'Copied';
+    case 'U':
+      return 'Conflicted';
+    default:
+      return status;
+  }
+}
+
+/** Status priority for determining the "dominant" status on a folder (higher = more prominent) */
+const STATUS_PRIORITY: Record<string, number> = {
+  U: 6, // Conflicted - highest priority
+  D: 5, // Deleted
+  A: 4, // Added
+  M: 3, // Modified
+  R: 2, // Renamed
+  C: 2, // Copied
+  S: 1, // Staged
+  '?': 0, // Untracked
+  '!': -1, // Ignored - lowest priority
+};
+
+/** Compute aggregated git status info for a folder from the status maps */
+function computeFolderGitRollup(
+  folderPath: string,
+  gitStatusMap: Map<string, string>,
+  enhancedGitStatusMap: Map<string, EnhancedGitFileStatus>
+): { count: number; dominantStatus: string | null; totalAdded: number; totalRemoved: number } {
+  const prefix = folderPath + '/';
+  let count = 0;
+  let dominantStatus: string | null = null;
+  let dominantPriority = -2;
+  let totalAdded = 0;
+  let totalRemoved = 0;
+
+  for (const [filePath, status] of gitStatusMap) {
+    if (filePath.startsWith(prefix)) {
+      count++;
+      const priority = STATUS_PRIORITY[status] ?? -1;
+      if (priority > dominantPriority) {
+        dominantPriority = priority;
+        dominantStatus = status;
+      }
+      const enhanced = enhancedGitStatusMap.get(filePath);
+      if (enhanced) {
+        totalAdded += enhanced.linesAdded;
+        totalRemoved += enhanced.linesRemoved;
+      }
+    }
+  }
+
+  return { count, dominantStatus, totalAdded, totalRemoved };
+}
+
+/**
+ * Validate a file/folder name for safety.
+ * Rejects names containing path separators, relative path components,
+ * or names that are just dots (which resolve to parent/current directory).
+ */
+function isValidFileName(name: string): boolean {
+  // Reject names containing path separators
+  if (name.includes('/') || name.includes('\\')) return false;
+  // Reject current/parent directory references
+  if (name === '.' || name === '..') return false;
+  // Reject empty or whitespace-only names
+  if (!name.trim()) return false;
+  return true;
+}
+
+/** Inline input for creating/renaming items */
+function InlineInput({
+  defaultValue,
+  onSubmit,
+  onCancel,
+  placeholder,
+}: {
+  defaultValue?: string;
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+  placeholder?: string;
+}) {
+  const [value, setValue] = useState(defaultValue || '');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  // Guard against double-submission: pressing Enter triggers onKeyDown AND may
+  // immediately trigger onBlur (e.g. when the component unmounts after submit).
+  const submittedRef = useRef(false);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+    if (defaultValue) {
+      // Select name without extension for rename.
+      // For dotfiles (e.g. ".gitignore"), lastIndexOf('.') returns 0,
+      // so we fall through to select() which selects the entire name.
+      const dotIndex = defaultValue.lastIndexOf('.');
+      if (dotIndex > 0) {
+        inputRef.current?.setSelectionRange(0, dotIndex);
+      } else {
+        inputRef.current?.select();
+      }
+    }
+  }, [defaultValue]);
+
+  const handleSubmit = useCallback(() => {
+    if (submittedRef.current) return;
+    const trimmed = value.trim();
+    if (!trimmed) {
+      onCancel();
+      return;
+    }
+    if (!isValidFileName(trimmed)) {
+      // Invalid name — surface error, keep editing so the user can fix it
+      setErrorMessage('Invalid name: avoid /, \\, ".", or ".."');
+      inputRef.current?.focus();
+      return;
+    }
+    setErrorMessage(null);
+    submittedRef.current = true;
+    onSubmit(trimmed);
+  }, [value, onSubmit, onCancel]);
+
+  return (
+    <div className="flex flex-col gap-0.5">
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+          if (errorMessage) setErrorMessage(null);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            handleSubmit();
+          } else if (e.key === 'Escape') {
+            onCancel();
+          }
+        }}
+        onBlur={() => {
+          // Prevent duplicate submission if onKeyDown already triggered onSubmit
+          if (submittedRef.current) return;
+          const trimmed = value.trim();
+          if (trimmed && isValidFileName(trimmed)) {
+            submittedRef.current = true;
+            onSubmit(trimmed);
+          }
+          // If the name is empty or invalid, do NOT call onCancel — keep the
+          // input open so the user can correct the value (mirrors handleSubmit).
+          // Optionally re-focus so the user can continue editing.
+          else {
+            inputRef.current?.focus();
+          }
+        }}
+        placeholder={placeholder}
+        className={cn(
+          'text-sm bg-muted border rounded px-1 py-0.5 w-full outline-none focus:border-primary',
+          errorMessage ? 'border-red-500' : 'border-border'
+        )}
+      />
+      {errorMessage && <span className="text-[10px] text-red-500 px-0.5">{errorMessage}</span>}
+    </div>
+  );
+}
+
+/** Single tree node renderer */
+function TreeNode({
+  node,
+  depth,
+  onFileSelect,
+  onCreateFile,
+  onCreateFolder,
+  onDeleteItem,
+  onRenameItem,
+  onCopyPath,
+  onToggleFolder,
+  activeFilePath,
+  gitStatusMap,
+  showHiddenFiles,
+  onCopyItem,
+  onMoveItem,
+  onDownloadItem,
+  onDragDropMove,
+  effectivePath,
+}: {
+  node: FileTreeNode;
+  depth: number;
+  onFileSelect: (path: string) => void;
+  onCreateFile: (parentPath: string, name: string) => Promise<void>;
+  onCreateFolder: (parentPath: string, name: string) => Promise<void>;
+  onDeleteItem: (path: string, isDirectory: boolean) => Promise<void>;
+  onRenameItem: (oldPath: string, newName: string) => Promise<void>;
+  onCopyPath: (path: string) => void;
+  onToggleFolder: (path: string) => void;
+  activeFilePath: string | null;
+  gitStatusMap: Map<string, string>;
+  showHiddenFiles: boolean;
+  onCopyItem?: (sourcePath: string, destinationPath: string) => Promise<void>;
+  onMoveItem?: (sourcePath: string, destinationPath: string) => Promise<void>;
+  onDownloadItem?: (filePath: string) => Promise<void>;
+  onDragDropMove?: (sourcePaths: string[], targetFolderPath: string) => Promise<void>;
+  effectivePath?: string;
+}) {
+  const {
+    expandedFolders,
+    enhancedGitStatusMap,
+    dragState,
+    setDragState,
+    selectedPaths,
+    toggleSelectedPath,
+  } = useFileEditorStore();
+  const { openFileBrowser } = useFileBrowser();
+  const [isCreatingFile, setIsCreatingFile] = useState(false);
+  const [isCreatingFolder, setIsCreatingFolder] = useState(false);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const isExpanded = expandedFolders.has(node.path);
+  const isActive = activeFilePath === node.path;
+  const gitStatus = node.gitStatus || gitStatusMap.get(node.path);
+  const statusColor = getGitStatusColor(gitStatus);
+  const statusLabel = getGitStatusLabel(gitStatus);
+
+  // Enhanced git status info
+  const enhancedStatus = enhancedGitStatusMap.get(node.path);
+  const isConflicted = enhancedStatus?.isConflicted || gitStatus === 'U';
+  const isStaged = enhancedStatus?.isStaged || false;
+  const isUnstaged = enhancedStatus?.isUnstaged || false;
+  const linesAdded = enhancedStatus?.linesAdded || 0;
+  const linesRemoved = enhancedStatus?.linesRemoved || 0;
+  const enhancedLabel = enhancedStatus?.statusLabel || statusLabel;
+
+  // Folder-level git status rollup
+  const folderRollup = useMemo(() => {
+    if (!node.isDirectory) return null;
+    return computeFolderGitRollup(node.path, gitStatusMap, enhancedGitStatusMap);
+  }, [node.isDirectory, node.path, gitStatusMap, enhancedGitStatusMap]);
+
+  // Drag state
+  const isDragging = dragState.draggedPaths.includes(node.path);
+  const isDropTarget = dragState.dropTargetPath === node.path && node.isDirectory;
+  const isSelected = selectedPaths.has(node.path);
+
+  const handleClick = (e: React.MouseEvent) => {
+    // Multi-select with Ctrl/Cmd
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault();
+      toggleSelectedPath(node.path);
+      return;
+    }
+
+    if (node.isDirectory) {
+      onToggleFolder(node.path);
+    } else {
+      onFileSelect(node.path);
+    }
+  };
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setMenuOpen(true);
+  };
+
+  const handleDelete = async () => {
+    const itemType = node.isDirectory ? 'folder' : 'file';
+    const confirmed = window.confirm(
+      `Are you sure you want to delete "${node.name}"? This ${itemType} will be moved to trash.`
+    );
+    if (confirmed) {
+      await onDeleteItem(node.path, node.isDirectory);
+    }
+  };
+
+  const handleCopyName = async () => {
+    try {
+      await navigator.clipboard.writeText(node.name);
+    } catch {
+      // Fallback: silently fail
+    }
+  };
+
+  // Drag handlers
+  const handleDragStart = (e: React.DragEvent) => {
+    e.stopPropagation();
+    const paths = isSelected && selectedPaths.size > 1 ? Array.from(selectedPaths) : [node.path];
+    setDragState({ draggedPaths: paths, dropTargetPath: null });
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/plain', JSON.stringify(paths));
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!node.isDirectory) return;
+
+    // Prevent dropping into self or descendant
+    const dragged = dragState.draggedPaths;
+    const isDescendant = dragged.some((p) => node.path === p || node.path.startsWith(p + '/'));
+    if (isDescendant) {
+      e.dataTransfer.dropEffect = 'none';
+      return;
+    }
+
+    e.dataTransfer.dropEffect = 'move';
+    setDragState({ ...dragState, dropTargetPath: node.path });
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (dragState.dropTargetPath === node.path) {
+      setDragState({ ...dragState, dropTargetPath: null });
+    }
+  };
+
+  const handleDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragState({ draggedPaths: [], dropTargetPath: null });
+
+    if (!node.isDirectory || !onDragDropMove) return;
+
+    try {
+      const data = e.dataTransfer.getData('text/plain');
+      const paths: string[] = JSON.parse(data);
+
+      // Validate: don't drop into self or descendant
+      const isDescendant = paths.some((p) => node.path === p || node.path.startsWith(p + '/'));
+      if (isDescendant) return;
+
+      await onDragDropMove(paths, node.path);
+    } catch {
+      // Invalid drag data
+    }
+  };
+
+  const handleDragEnd = () => {
+    setDragState({ draggedPaths: [], dropTargetPath: null });
+  };
+
+  // Build tooltip with enhanced info
+  let tooltip = node.name;
+  if (node.isDirectory && folderRollup && folderRollup.count > 0) {
+    tooltip += ` (${folderRollup.count} changed file${folderRollup.count !== 1 ? 's' : ''})`;
+    if (folderRollup.totalAdded > 0 || folderRollup.totalRemoved > 0) {
+      tooltip += ` +${folderRollup.totalAdded} -${folderRollup.totalRemoved}`;
+    }
+  } else {
+    if (enhancedLabel) tooltip += ` (${enhancedLabel})`;
+    if (linesAdded > 0 || linesRemoved > 0) {
+      tooltip += ` +${linesAdded} -${linesRemoved}`;
+    }
+  }
+
+  return (
+    <div key={node.path}>
+      {isRenaming ? (
+        <div style={{ paddingLeft: `${depth * 16 + 8}px` }} className="py-0.5 px-2">
+          <InlineInput
+            defaultValue={node.name}
+            onSubmit={async (newName) => {
+              await onRenameItem(node.path, newName);
+              setIsRenaming(false);
+            }}
+            onCancel={() => setIsRenaming(false)}
+          />
+        </div>
+      ) : (
+        <div
+          className={cn(
+            'group flex items-center gap-1.5 py-0.5 px-2 rounded cursor-pointer text-sm hover:bg-muted/50 relative transition-colors',
+            isActive && 'bg-primary/15 text-primary',
+            statusColor && !isActive && statusColor,
+            isConflicted && 'border-l-2 border-orange-500',
+            isDragging && 'opacity-40',
+            isDropTarget && 'bg-primary/20 ring-1 ring-primary/50',
+            isSelected && !isActive && 'bg-muted/70'
+          )}
+          style={{ paddingLeft: `${depth * 16 + 8}px` }}
+          onClick={handleClick}
+          onContextMenu={handleContextMenu}
+          draggable
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onDragEnd={handleDragEnd}
+          data-testid={`file-tree-item-${node.name}`}
+          title={tooltip}
+        >
+          {/* Drag handle indicator (visible on hover) */}
+          <GripVertical className="w-3 h-3 text-muted-foreground/30 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity hidden md:block" />
+
+          {/* Expand/collapse chevron */}
+          {node.isDirectory ? (
+            isExpanded ? (
+              <ChevronDown className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+            ) : (
+              <ChevronRight className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+            )
+          ) : (
+            <span className="w-3.5 shrink-0" />
+          )}
+
+          {/* Icon */}
+          {node.isDirectory ? (
+            isExpanded ? (
+              <FolderOpen className="w-4 h-4 text-primary shrink-0" />
+            ) : (
+              <Folder className="w-4 h-4 text-primary shrink-0" />
+            )
+          ) : isConflicted ? (
+            <AlertTriangle className="w-4 h-4 text-orange-500 shrink-0" />
+          ) : (
+            <File className="w-4 h-4 text-muted-foreground shrink-0" />
+          )}
+
+          {/* Name */}
+          <span className="truncate flex-1">{node.name}</span>
+
+          {/* Folder: modified file count badge and rollup indicator */}
+          {node.isDirectory && folderRollup && folderRollup.count > 0 && (
+            <>
+              <span
+                className="text-[10px] font-medium shrink-0 px-1 py-0 rounded-full bg-muted text-muted-foreground"
+                title={`${folderRollup.count} changed file${folderRollup.count !== 1 ? 's' : ''}`}
+              >
+                {folderRollup.count}
+              </span>
+              <span
+                className={cn('w-1.5 h-1.5 rounded-full shrink-0', {
+                  'bg-yellow-500': folderRollup.dominantStatus === 'M',
+                  'bg-green-500':
+                    folderRollup.dominantStatus === 'A' || folderRollup.dominantStatus === 'S',
+                  'bg-red-500': folderRollup.dominantStatus === 'D',
+                  'bg-gray-400': folderRollup.dominantStatus === '?',
+                  'bg-gray-600': folderRollup.dominantStatus === '!',
+                  'bg-purple-500': folderRollup.dominantStatus === 'R',
+                  'bg-cyan-500': folderRollup.dominantStatus === 'C',
+                  'bg-orange-500': folderRollup.dominantStatus === 'U',
+                })}
+                title={`${folderRollup.dominantStatus ? getGitStatusLabel(folderRollup.dominantStatus) : 'Changed'} (${folderRollup.count})`}
+              />
+            </>
+          )}
+
+          {/* File: diff stats (lines added/removed) shown inline */}
+          {!node.isDirectory && (linesAdded > 0 || linesRemoved > 0) && (
+            <span className="flex items-center gap-1 text-[10px] shrink-0 opacity-70">
+              {linesAdded > 0 && (
+                <span className="flex items-center text-green-600">
+                  <Plus className="w-2.5 h-2.5" />
+                  {linesAdded}
+                </span>
+              )}
+              {linesRemoved > 0 && (
+                <span className="flex items-center text-red-500">
+                  <Minus className="w-2.5 h-2.5" />
+                  {linesRemoved}
+                </span>
+              )}
+            </span>
+          )}
+
+          {/* File: git status indicator - two-tone badge for staged+unstaged */}
+          {!node.isDirectory && gitStatus && (
+            <span className="flex items-center gap-0 shrink-0">
+              {isStaged && isUnstaged ? (
+                // Two-tone badge: staged (green) + unstaged (yellow)
+                <>
+                  <span
+                    className="w-1.5 h-1.5 rounded-l-full bg-green-500"
+                    title="Staged changes"
+                  />
+                  <span
+                    className="w-1.5 h-1.5 rounded-r-full bg-yellow-500"
+                    title="Unstaged changes"
+                  />
+                </>
+              ) : isConflicted ? (
+                <span
+                  className="w-1.5 h-1.5 rounded-full bg-orange-500 animate-pulse"
+                  title="Conflicted"
+                />
+              ) : (
+                <span
+                  className={cn('w-1.5 h-1.5 rounded-full shrink-0', {
+                    'bg-yellow-500': gitStatus === 'M',
+                    'bg-green-500': gitStatus === 'A' || gitStatus === 'S',
+                    'bg-red-500': gitStatus === 'D',
+                    'bg-gray-400': gitStatus === '?',
+                    'bg-gray-600': gitStatus === '!',
+                    'bg-purple-500': gitStatus === 'R',
+                    'bg-cyan-500': gitStatus === 'C',
+                    'bg-orange-500': gitStatus === 'U',
+                  })}
+                  title={enhancedLabel || statusLabel}
+                />
+              )}
+            </span>
+          )}
+
+          {/* Actions dropdown menu (three-dot button) */}
+          <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+            <DropdownMenuTrigger asChild>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+                className={cn(
+                  'p-0.5 rounded shrink-0 hover:bg-accent transition-opacity',
+                  // On mobile (max-md): always visible for touch access
+                  // On desktop (md+): show on hover, focus, or when menu is open
+                  'max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100 focus:opacity-100',
+                  menuOpen && 'opacity-100'
+                )}
+                data-testid={`file-tree-menu-${node.name}`}
+                aria-label={`Actions for ${node.name}`}
+              >
+                <MoreVertical className="w-3.5 h-3.5 text-muted-foreground" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" side="right" className="w-48">
+              {/* Folder-specific: New File / New Folder */}
+              {node.isDirectory && (
+                <>
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (!isExpanded) onToggleFolder(node.path);
+                      setIsCreatingFile(true);
+                    }}
+                    className="gap-2"
+                  >
+                    <FilePlus className="w-4 h-4" />
+                    <span>New File</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (!isExpanded) onToggleFolder(node.path);
+                      setIsCreatingFolder(true);
+                    }}
+                    className="gap-2"
+                  >
+                    <FolderPlus className="w-4 h-4" />
+                    <span>New Folder</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                </>
+              )}
+
+              {/* Copy operations */}
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onCopyPath(node.path);
+                }}
+                className="gap-2"
+              >
+                <ClipboardCopy className="w-4 h-4" />
+                <span>Copy Path</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleCopyName();
+                }}
+                className="gap-2"
+              >
+                <Copy className="w-4 h-4" />
+                <span>Copy Name</span>
+              </DropdownMenuItem>
+
+              <DropdownMenuSeparator />
+
+              {/* Copy To... */}
+              {onCopyItem && (
+                <DropdownMenuItem
+                  onClick={async (e) => {
+                    e.stopPropagation();
+                    try {
+                      const parentPath = node.path.substring(0, node.path.lastIndexOf('/')) || '/';
+                      const destPath = await openFileBrowser({
+                        title: `Copy "${node.name}" To...`,
+                        description: 'Select the destination folder for the copy operation',
+                        initialPath: parentPath,
+                      });
+                      if (destPath) {
+                        await onCopyItem(node.path, destPath);
+                      }
+                    } catch (err) {
+                      console.error('Copy operation failed:', err);
+                    }
+                  }}
+                  className="gap-2"
+                >
+                  <FolderInput className="w-4 h-4" />
+                  <span>Copy To...</span>
+                </DropdownMenuItem>
+              )}
+
+              {/* Move To... */}
+              {onMoveItem && (
+                <DropdownMenuItem
+                  onClick={async (e) => {
+                    e.stopPropagation();
+                    try {
+                      const parentPath = node.path.substring(0, node.path.lastIndexOf('/')) || '/';
+                      const destPath = await openFileBrowser({
+                        title: `Move "${node.name}" To...`,
+                        description: 'Select the destination folder for the move operation',
+                        initialPath: parentPath,
+                      });
+                      if (destPath) {
+                        await onMoveItem(node.path, destPath);
+                      }
+                    } catch (err) {
+                      console.error('Move operation failed:', err);
+                    }
+                  }}
+                  className="gap-2"
+                >
+                  <FolderOutput className="w-4 h-4" />
+                  <span>Move To...</span>
+                </DropdownMenuItem>
+              )}
+
+              {/* Download */}
+              {onDownloadItem && (
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDownloadItem(node.path);
+                  }}
+                  className="gap-2"
+                >
+                  <Download className="w-4 h-4" />
+                  <span>Download{node.isDirectory ? ' as ZIP' : ''}</span>
+                </DropdownMenuItem>
+              )}
+
+              <DropdownMenuSeparator />
+
+              {/* Rename */}
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setIsRenaming(true);
+                }}
+                className="gap-2"
+              >
+                <Pencil className="w-4 h-4" />
+                <span>Rename</span>
+              </DropdownMenuItem>
+
+              {/* Delete */}
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleDelete();
+                }}
+                className="gap-2 text-destructive focus:text-destructive focus:bg-destructive/10"
+              >
+                <Trash2 className="w-4 h-4" />
+                <span>Delete</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
+
+      {/* Children (expanded folder) */}
+      {node.isDirectory && isExpanded && node.children && (
+        <div>
+          {/* Inline create file input */}
+          {isCreatingFile && (
+            <div style={{ paddingLeft: `${(depth + 1) * 16 + 8}px` }} className="py-0.5 px-2">
+              <InlineInput
+                placeholder="filename.ext"
+                onSubmit={async (name) => {
+                  await onCreateFile(node.path, name);
+                  setIsCreatingFile(false);
+                }}
+                onCancel={() => setIsCreatingFile(false)}
+              />
+            </div>
+          )}
+          {/* Inline create folder input */}
+          {isCreatingFolder && (
+            <div style={{ paddingLeft: `${(depth + 1) * 16 + 8}px` }} className="py-0.5 px-2">
+              <InlineInput
+                placeholder="folder-name"
+                onSubmit={async (name) => {
+                  await onCreateFolder(node.path, name);
+                  setIsCreatingFolder(false);
+                }}
+                onCancel={() => setIsCreatingFolder(false)}
+              />
+            </div>
+          )}
+          {(showHiddenFiles
+            ? node.children
+            : node.children.filter((child) => !child.name.startsWith('.'))
+          ).map((child) => (
+            <TreeNode
+              key={child.path}
+              node={child}
+              depth={depth + 1}
+              onFileSelect={onFileSelect}
+              onCreateFile={onCreateFile}
+              onCreateFolder={onCreateFolder}
+              onDeleteItem={onDeleteItem}
+              onRenameItem={onRenameItem}
+              onCopyPath={onCopyPath}
+              onToggleFolder={onToggleFolder}
+              activeFilePath={activeFilePath}
+              gitStatusMap={gitStatusMap}
+              showHiddenFiles={showHiddenFiles}
+              onCopyItem={onCopyItem}
+              onMoveItem={onMoveItem}
+              onDownloadItem={onDownloadItem}
+              onDragDropMove={onDragDropMove}
+              effectivePath={effectivePath}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function FileTree({
+  onFileSelect,
+  onCreateFile,
+  onCreateFolder,
+  onDeleteItem,
+  onRenameItem,
+  onCopyPath,
+  onRefresh,
+  onToggleFolder,
+  activeFilePath,
+  onCopyItem,
+  onMoveItem,
+  onDownloadItem,
+  onDragDropMove,
+  effectivePath,
+}: FileTreeProps) {
+  const {
+    fileTree,
+    showHiddenFiles,
+    setShowHiddenFiles,
+    gitStatusMap,
+    dragState,
+    setDragState,
+    gitBranch,
+  } = useFileEditorStore();
+  const [isCreatingFile, setIsCreatingFile] = useState(false);
+  const [isCreatingFolder, setIsCreatingFolder] = useState(false);
+
+  // Filter hidden files if needed
+  const filteredTree = showHiddenFiles
+    ? fileTree
+    : fileTree.filter((node) => !node.name.startsWith('.'));
+
+  // Handle drop on root area
+  const handleRootDragOver = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      if (effectivePath) {
+        e.dataTransfer.dropEffect = 'move';
+        // Skip redundant state update if already targeting the same path
+        if (dragState.dropTargetPath !== effectivePath) {
+          setDragState({ ...dragState, dropTargetPath: effectivePath });
+        }
+      }
+    },
+    [effectivePath, dragState, setDragState]
+  );
+
+  const handleRootDrop = useCallback(
+    async (e: React.DragEvent) => {
+      e.preventDefault();
+      setDragState({ draggedPaths: [], dropTargetPath: null });
+
+      if (!effectivePath || !onDragDropMove) return;
+
+      try {
+        const data = e.dataTransfer.getData('text/plain');
+        const paths: string[] = JSON.parse(data);
+        await onDragDropMove(paths, effectivePath);
+      } catch {
+        // Invalid drag data
+      }
+    },
+    [effectivePath, onDragDropMove, setDragState]
+  );
+
+  return (
+    <div className="flex flex-col h-full" data-testid="file-tree">
+      {/* Tree toolbar */}
+      <div className="px-2 py-1.5 border-b border-border">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-1.5 min-w-0">
+            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              Explorer
+            </span>
+          </div>
+          <div className="flex items-center gap-0.5">
+            <button
+              onClick={() => setIsCreatingFile(true)}
+              className="p-1 hover:bg-accent rounded"
+              title="New file"
+            >
+              <FilePlus className="w-3.5 h-3.5 text-muted-foreground" />
+            </button>
+            <button
+              onClick={() => setIsCreatingFolder(true)}
+              className="p-1 hover:bg-accent rounded"
+              title="New folder"
+            >
+              <FolderPlus className="w-3.5 h-3.5 text-muted-foreground" />
+            </button>
+            <button
+              onClick={() => setShowHiddenFiles(!showHiddenFiles)}
+              className="p-1 hover:bg-accent rounded"
+              title={showHiddenFiles ? 'Hide dotfiles' : 'Show dotfiles'}
+            >
+              {showHiddenFiles ? (
+                <Eye className="w-3.5 h-3.5 text-muted-foreground" />
+              ) : (
+                <EyeOff className="w-3.5 h-3.5 text-muted-foreground" />
+              )}
+            </button>
+            <button onClick={onRefresh} className="p-1 hover:bg-accent rounded" title="Refresh">
+              <RefreshCw className="w-3.5 h-3.5 text-muted-foreground" />
+            </button>
+          </div>
+        </div>
+        {gitBranch && (
+          <div className="mt-1 min-w-0">
+            <span
+              className="inline-block max-w-full truncate whitespace-nowrap text-[10px] text-primary font-medium px-1 py-0.5 bg-primary/10 rounded"
+              title={gitBranch}
+            >
+              {gitBranch}
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Tree content */}
+      <div
+        className="flex-1 overflow-y-auto py-1"
+        onDragOver={handleRootDragOver}
+        onDrop={handleRootDrop}
+      >
+        {/* Root-level inline creators */}
+        {isCreatingFile && (
+          <div className="py-0.5 px-2" style={{ paddingLeft: '8px' }}>
+            <InlineInput
+              placeholder="filename.ext"
+              onSubmit={async (name) => {
+                await onCreateFile('', name);
+                setIsCreatingFile(false);
+              }}
+              onCancel={() => setIsCreatingFile(false)}
+            />
+          </div>
+        )}
+        {isCreatingFolder && (
+          <div className="py-0.5 px-2" style={{ paddingLeft: '8px' }}>
+            <InlineInput
+              placeholder="folder-name"
+              onSubmit={async (name) => {
+                await onCreateFolder('', name);
+                setIsCreatingFolder(false);
+              }}
+              onCancel={() => setIsCreatingFolder(false)}
+            />
+          </div>
+        )}
+
+        {filteredTree.length === 0 ? (
+          <div className="flex items-center justify-center py-8">
+            <p className="text-xs text-muted-foreground">No files found</p>
+          </div>
+        ) : (
+          filteredTree.map((node) => (
+            <TreeNode
+              key={node.path}
+              node={node}
+              depth={0}
+              onFileSelect={onFileSelect}
+              onCreateFile={onCreateFile}
+              onCreateFolder={onCreateFolder}
+              onDeleteItem={onDeleteItem}
+              onRenameItem={onRenameItem}
+              onCopyPath={onCopyPath}
+              onToggleFolder={onToggleFolder}
+              activeFilePath={activeFilePath}
+              gitStatusMap={gitStatusMap}
+              showHiddenFiles={showHiddenFiles}
+              onCopyItem={onCopyItem}
+              onMoveItem={onMoveItem}
+              onDownloadItem={onDownloadItem}
+              onDragDropMove={onDragDropMove}
+              effectivePath={effectivePath}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/file-editor-view/components/git-detail-panel.tsx b/temp_repo/apps/ui/src/components/views/file-editor-view/components/git-detail-panel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..32adf9c6f45eaf378df4acad7ab8cb433cd49033
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/file-editor-view/components/git-detail-panel.tsx
@@ -0,0 +1,187 @@
+import { useState } from 'react';
+import {
+  GitBranch,
+  GitCommit,
+  User,
+  Clock,
+  Plus,
+  Minus,
+  AlertTriangle,
+  ChevronDown,
+  ChevronUp,
+  FileEdit,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { GitFileDetailsInfo } from '../use-file-editor-store';
+
+interface GitDetailPanelProps {
+  details: GitFileDetailsInfo;
+  filePath: string;
+  onOpenFile?: (path: string) => void;
+}
+
+export function GitDetailPanel({ details, filePath, onOpenFile }: GitDetailPanelProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Don't show anything if there's no meaningful data
+  if (!details.branch && !details.lastCommitHash && !details.statusLabel) {
+    return null;
+  }
+
+  const hasChanges = details.linesAdded > 0 || details.linesRemoved > 0;
+  const commitHashShort = details.lastCommitHash ? details.lastCommitHash.substring(0, 7) : '';
+  const timeAgo = details.lastCommitTimestamp ? formatTimeAgo(details.lastCommitTimestamp) : '';
+
+  return (
+    <div className="border-t border-border bg-muted/20">
+      {/* Collapsed summary bar */}
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between px-3 py-1 text-xs text-muted-foreground hover:bg-muted/40 transition-colors"
+      >
+        <div className="flex items-center gap-3">
+          {/* Branch */}
+          {details.branch && (
+            <span className="flex items-center gap-1">
+              <GitBranch className="w-3 h-3" />
+              <span className="text-primary font-medium">{details.branch}</span>
+            </span>
+          )}
+
+          {/* Status label with visual treatment */}
+          {details.statusLabel && (
+            <span
+              className={cn('px-1.5 py-0.5 rounded text-[10px] font-medium uppercase', {
+                'bg-yellow-500/15 text-yellow-600': details.statusLabel === 'Modified',
+                'bg-green-500/15 text-green-600':
+                  details.statusLabel === 'Added' || details.statusLabel === 'Staged',
+                'bg-red-500/15 text-red-600': details.statusLabel === 'Deleted',
+                'bg-purple-500/15 text-purple-600': details.statusLabel === 'Renamed',
+                'bg-gray-500/15 text-gray-500': details.statusLabel === 'Untracked',
+                'bg-orange-500/15 text-orange-600':
+                  details.statusLabel === 'Conflicted' || details.isConflicted,
+                'bg-blue-500/15 text-blue-600': details.statusLabel === 'Staged + Modified',
+              })}
+            >
+              {details.isConflicted && <AlertTriangle className="w-3 h-3 inline mr-0.5" />}
+              {details.statusLabel}
+            </span>
+          )}
+
+          {/* Staged/unstaged two-tone badge */}
+          {details.isStaged && details.isUnstaged && (
+            <span className="flex items-center gap-0">
+              <span className="w-2 h-2 rounded-l bg-green-500" title="Staged changes" />
+              <span className="w-2 h-2 rounded-r bg-yellow-500" title="Unstaged changes" />
+            </span>
+          )}
+          {details.isStaged && !details.isUnstaged && (
+            <span className="w-2 h-2 rounded bg-green-500" title="Staged" />
+          )}
+          {!details.isStaged && details.isUnstaged && (
+            <span className="w-2 h-2 rounded bg-yellow-500" title="Unstaged" />
+          )}
+
+          {/* Diff stats */}
+          {hasChanges && (
+            <span className="flex items-center gap-1.5">
+              <span className="flex items-center gap-0.5 text-green-600">
+                <Plus className="w-3 h-3" />
+                {details.linesAdded}
+              </span>
+              <span className="flex items-center gap-0.5 text-red-500">
+                <Minus className="w-3 h-3" />
+                {details.linesRemoved}
+              </span>
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {commitHashShort && (
+            <span className="flex items-center gap-1 text-muted-foreground/70">
+              <GitCommit className="w-3 h-3" />
+              {commitHashShort}
+            </span>
+          )}
+          {isExpanded ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
+        </div>
+      </button>
+
+      {/* Expanded details */}
+      {isExpanded && (
+        <div className="px-3 py-2 border-t border-border/50 space-y-1.5 text-xs text-muted-foreground">
+          {/* Last commit info */}
+          {details.lastCommitHash && (
+            <>
+              <div className="flex items-start gap-2">
+                <GitCommit className="w-3.5 h-3.5 mt-0.5 shrink-0" />
+                <div className="min-w-0">
+                  <div className="font-mono text-foreground/80">{commitHashShort}</div>
+                  {details.lastCommitMessage && (
+                    <div className="text-muted-foreground truncate">
+                      {details.lastCommitMessage}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {details.lastCommitAuthor && (
+                <div className="flex items-center gap-2">
+                  <User className="w-3.5 h-3.5 shrink-0" />
+                  <span>{details.lastCommitAuthor}</span>
+                </div>
+              )}
+
+              {timeAgo && (
+                <div className="flex items-center gap-2">
+                  <Clock className="w-3.5 h-3.5 shrink-0" />
+                  <span>{timeAgo}</span>
+                </div>
+              )}
+            </>
+          )}
+
+          {/* Conflict warning with action */}
+          {details.isConflicted && (
+            <div className="flex items-center gap-2 p-2 rounded bg-orange-500/10 border border-orange-500/20 text-orange-600">
+              <AlertTriangle className="w-4 h-4 shrink-0" />
+              <span className="flex-1 font-medium">This file has merge conflicts</span>
+              {onOpenFile && (
+                <button
+                  onClick={() => onOpenFile(filePath)}
+                  className="flex items-center gap-1 px-2 py-0.5 rounded bg-orange-500/20 hover:bg-orange-500/30 text-orange-700 text-[10px] font-medium transition-colors"
+                >
+                  <FileEdit className="w-3 h-3" />
+                  Resolve
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Format an ISO timestamp as a human-readable relative time */
+function formatTimeAgo(isoTimestamp: string): string {
+  try {
+    const date = new Date(isoTimestamp);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffSecs = Math.floor(diffMs / 1000);
+    const diffMins = Math.floor(diffSecs / 60);
+    const diffHours = Math.floor(diffMins / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffSecs < 60) return 'just now';
+    if (diffMins < 60) return `${diffMins} min${diffMins > 1 ? 's' : ''} ago`;
+    if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+    if (diffDays < 30) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+
+    return date.toLocaleDateString();
+  } catch {
+    return '';
+  }
+}
diff --git a/temp_repo/apps/ui/src/components/views/file-editor-view/components/markdown-preview.tsx b/temp_repo/apps/ui/src/components/views/file-editor-view/components/markdown-preview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f41933e36908dd17c6b9cbdec3e3fd2bf15ba105
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/file-editor-view/components/markdown-preview.tsx
@@ -0,0 +1,89 @@
+import { useRef } from 'react';
+import { Columns2, Eye, Code2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Markdown } from '@/components/ui/markdown';
+import type { MarkdownViewMode } from '../use-file-editor-store';
+
+/** Toolbar for switching between editor/preview/split modes */
+export function MarkdownViewToolbar({
+  viewMode,
+  onViewModeChange,
+}: {
+  viewMode: MarkdownViewMode;
+  onViewModeChange: (mode: MarkdownViewMode) => void;
+}) {
+  return (
+    <div className="flex items-center gap-0.5 bg-muted/50 rounded-md p-0.5">
+      <button
+        onClick={() => onViewModeChange('editor')}
+        className={cn(
+          'flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors',
+          viewMode === 'editor'
+            ? 'bg-background text-foreground shadow-sm'
+            : 'text-muted-foreground hover:text-foreground'
+        )}
+        title="Editor only"
+      >
+        <Code2 className="w-3 h-3" />
+        <span>Edit</span>
+      </button>
+      <button
+        onClick={() => onViewModeChange('split')}
+        className={cn(
+          'flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors',
+          viewMode === 'split'
+            ? 'bg-background text-foreground shadow-sm'
+            : 'text-muted-foreground hover:text-foreground'
+        )}
+        title="Split view"
+      >
+        <Columns2 className="w-3 h-3" />
+        <span>Split</span>
+      </button>
+      <button
+        onClick={() => onViewModeChange('preview')}
+        className={cn(
+          'flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors',
+          viewMode === 'preview'
+            ? 'bg-background text-foreground shadow-sm'
+            : 'text-muted-foreground hover:text-foreground'
+        )}
+        title="Preview only"
+      >
+        <Eye className="w-3 h-3" />
+        <span>Preview</span>
+      </button>
+    </div>
+  );
+}
+
+/** Rendered markdown preview panel */
+export function MarkdownPreviewPanel({
+  content,
+  className,
+}: {
+  content: string;
+  className?: string;
+}) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      ref={scrollRef}
+      className={cn('h-full overflow-y-auto bg-background/50 p-6', className)}
+      data-testid="markdown-preview"
+    >
+      <div className="max-w-3xl mx-auto">
+        <Markdown>{content || '*No content to preview*'}</Markdown>
+      </div>
+    </div>
+  );
+}
+
+/** Check if a file is a markdown file */
+export function isMarkdownFile(filePath: string): boolean {
+  const fileName = filePath.split('/').pop() || '';
+  const dotIndex = fileName.lastIndexOf('.');
+  const ext = dotIndex > 0 ? fileName.slice(dotIndex + 1).toLowerCase() : '';
+  return ['md', 'mdx', 'markdown'].includes(ext);
+}
diff --git a/temp_repo/apps/ui/src/components/views/file-editor-view/components/worktree-directory-dropdown.tsx b/temp_repo/apps/ui/src/components/views/file-editor-view/components/worktree-directory-dropdown.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e12b302d85a48df1cbc637345004407ca000f032
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/file-editor-view/components/worktree-directory-dropdown.tsx
@@ -0,0 +1,151 @@
+/**
+ * WorktreeDirectoryDropdown
+ *
+ * A dropdown for the file editor header that allows the user to select which
+ * worktree directory to work from (or the main project directory).
+ *
+ * Reads the current worktree selection from the app store so that when a user
+ * is on a worktree in the board view and then navigates to the file editor,
+ * it defaults to that worktree directory.
+ */
+
+import { useMemo } from 'react';
+import { GitBranch, ChevronDown, Check, FolderRoot } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useAppStore } from '@/store/app-store';
+import { useWorktrees } from '@/hooks/queries';
+import { pathsEqual } from '@/lib/utils';
+
+interface WorktreeDirectoryDropdownProps {
+  projectPath: string;
+}
+
+// Stable empty array to avoid creating a new reference every render when there are no worktrees.
+// Zustand compares selector results by reference; returning `[]` inline (e.g. via `?? []`) creates
+// a new array on every call, causing `forceStoreRerender` to trigger an infinite update loop.
+const EMPTY_WORKTREES: never[] = [];
+
+export function WorktreeDirectoryDropdown({ projectPath }: WorktreeDirectoryDropdownProps) {
+  // Select primitive/stable values directly from the store to prevent infinite re-renders.
+  // Computed selectors that return new arrays/objects on every call (e.g. via `?? []`)
+  // are compared by reference, causing Zustand to force re-renders on every store update.
+  const currentWorktree = useAppStore((s) => s.currentWorktreeByProject[projectPath] ?? null);
+  const setCurrentWorktree = useAppStore((s) => s.setCurrentWorktree);
+  const worktreesInStore = useAppStore((s) => s.worktreesByProject[projectPath] ?? EMPTY_WORKTREES);
+  const useWorktreesEnabled = useAppStore((s) => {
+    const projectOverride = s.useWorktreesByProject[projectPath];
+    return projectOverride !== undefined ? projectOverride : s.useWorktrees;
+  });
+
+  // Fetch worktrees from query
+  const { data } = useWorktrees(projectPath);
+  const worktrees = useMemo(() => data?.worktrees ?? [], [data?.worktrees]);
+
+  // Also consider store worktrees as fallback
+  const effectiveWorktrees = worktrees.length > 0 ? worktrees : worktreesInStore;
+
+  // Don't render if worktrees are not enabled or only the main branch exists
+  if (!useWorktreesEnabled || effectiveWorktrees.length <= 1) {
+    return null;
+  }
+
+  const currentWorktreePath = currentWorktree?.path ?? null;
+  const currentBranch = currentWorktree?.branch ?? 'main';
+
+  // Find main worktree
+  const mainWorktree = effectiveWorktrees.find((w) => w.isMain);
+  const otherWorktrees = effectiveWorktrees.filter((w) => !w.isMain);
+
+  // Determine display name for the selected worktree
+  const selectedIsMain = currentWorktreePath === null;
+  const selectedBranchName = selectedIsMain ? (mainWorktree?.branch ?? 'main') : currentBranch;
+
+  // Truncate long branch names for the trigger button
+  const maxTriggerLength = 20;
+  const displayName =
+    selectedBranchName.length > maxTriggerLength
+      ? `${selectedBranchName.slice(0, maxTriggerLength)}...`
+      : selectedBranchName;
+
+  const handleSelectWorktree = (worktreePath: string | null, branch: string) => {
+    setCurrentWorktree(projectPath, worktreePath, branch);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="gap-1.5 max-w-[200px] text-xs"
+          title={`Working directory: ${selectedBranchName}`}
+        >
+          <GitBranch className="w-3.5 h-3.5 shrink-0" />
+          <span className="truncate">{displayName}</span>
+          <ChevronDown className="w-3 h-3 shrink-0 opacity-50" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-[240px]">
+        <DropdownMenuLabel className="text-xs text-muted-foreground">
+          Working Directory
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+
+        {/* Main directory */}
+        {mainWorktree && (
+          <DropdownMenuItem
+            onClick={() => handleSelectWorktree(null, mainWorktree.branch)}
+            className="gap-2"
+          >
+            <FolderRoot className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
+            <div className="flex-1 min-w-0">
+              <span className="truncate block text-sm">{mainWorktree.branch}</span>
+              <span className="text-xs text-muted-foreground">Main directory</span>
+            </div>
+            {selectedIsMain && <Check className="w-3.5 h-3.5 shrink-0 text-primary" />}
+          </DropdownMenuItem>
+        )}
+
+        {/* Worktree directories */}
+        {otherWorktrees.length > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Worktrees
+            </DropdownMenuLabel>
+            {otherWorktrees.map((wt) => {
+              const isSelected =
+                currentWorktreePath !== null && pathsEqual(wt.path, currentWorktreePath);
+              return (
+                <DropdownMenuItem
+                  key={wt.path}
+                  onClick={() => handleSelectWorktree(wt.path, wt.branch)}
+                  className="gap-2"
+                >
+                  <GitBranch className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
+                  <div className="flex-1 min-w-0">
+                    <span className="truncate block text-sm">{wt.branch}</span>
+                    {wt.hasChanges && (
+                      <span className="text-xs text-amber-500">
+                        {wt.changedFilesCount ?? ''} change{wt.changedFilesCount !== 1 ? 's' : ''}
+                      </span>
+                    )}
+                  </div>
+                  {isSelected && <Check className="w-3.5 h-3.5 shrink-0 text-primary" />}
+                </DropdownMenuItem>
+              );
+            })}
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/file-editor-view/file-editor-dirty-utils.ts b/temp_repo/apps/ui/src/components/views/file-editor-view/file-editor-dirty-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..95d266e4b471f10d14297e7f88c7746c883ffa23
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/file-editor-view/file-editor-dirty-utils.ts
@@ -0,0 +1,25 @@
+/**
+ * Normalize line endings to `\n` so that comparisons match CodeMirror's
+ * internal representation. CodeMirror always converts `\r\n` and `\r` to
+ * `\n`, so raw disk content with Windows/old-Mac line endings would
+ * otherwise cause a false dirty state.
+ */
+export function normalizeLineEndings(text: string): string {
+  return text.indexOf('\r') !== -1 ? text.replace(/\r\n?/g, '\n') : text;
+}
+
+export function computeIsDirty(content: string, originalContent: string): boolean {
+  return normalizeLineEndings(content) !== normalizeLineEndings(originalContent);
+}
+
+export function updateTabWithContent<
+  T extends { originalContent: string; content: string; isDirty: boolean },
+>(tab: T, content: string): T {
+  return { ...tab, content, isDirty: computeIsDirty(content, tab.originalContent) };
+}
+
+export function markTabAsSaved<
+  T extends { originalContent: string; content: string; isDirty: boolean },
+>(tab: T, content: string): T {
+  return { ...tab, content, originalContent: content, isDirty: false };
+}
diff --git a/temp_repo/apps/ui/src/components/views/file-editor-view/file-editor-view.tsx b/temp_repo/apps/ui/src/components/views/file-editor-view/file-editor-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b7b975040a67c013454c97a9fe6b679d89c1d2cb
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/file-editor-view/file-editor-view.tsx
@@ -0,0 +1,1868 @@
+import { useEffect, useCallback, useRef, useState, useMemo } from 'react';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import {
+  FileCode2,
+  Save,
+  FileWarning,
+  Binary,
+  Circle,
+  PanelLeftOpen,
+  Search,
+  Undo2,
+  Redo2,
+  Settings,
+  Diff,
+  FolderKanban,
+} from 'lucide-react';
+import { createLogger } from '@automaker/utils/logger';
+import { resolveModelString } from '@automaker/model-resolver';
+import { useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from '@tanstack/react-router';
+import { useAppStore } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import { cn, generateUUID, pathsEqual } from '@/lib/utils';
+import { queryKeys } from '@/lib/query-keys';
+import { useIsMobile } from '@/hooks/use-media-query';
+import { useVirtualKeyboardResize } from '@/hooks/use-virtual-keyboard-resize';
+import { Button } from '@/components/ui/button';
+import {
+  HeaderActionsPanel,
+  HeaderActionsPanelTrigger,
+} from '@/components/ui/header-actions-panel';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+
+import { toast } from 'sonner';
+import {
+  useFileEditorStore,
+  type FileTreeNode,
+  type EnhancedGitFileStatus,
+} from './use-file-editor-store';
+import { normalizeLineEndings } from './file-editor-dirty-utils';
+import { FileTree } from './components/file-tree';
+import { CodeEditor, getLanguageName, type CodeEditorHandle } from './components/code-editor';
+import { EditorTabs } from './components/editor-tabs';
+import { EditorSettingsForm } from './components/editor-settings-form';
+import {
+  MarkdownPreviewPanel,
+  MarkdownViewToolbar,
+  isMarkdownFile,
+} from './components/markdown-preview';
+import { WorktreeDirectoryDropdown } from './components/worktree-directory-dropdown';
+import { GitDetailPanel } from './components/git-detail-panel';
+import { AddFeatureDialog } from '@/components/views/board-view/dialogs';
+
+const logger = createLogger('FileEditorView');
+
+// Files with these extensions are considered binary
+const BINARY_EXTENSIONS = new Set([
+  'png',
+  'jpg',
+  'jpeg',
+  'gif',
+  'bmp',
+  'ico',
+  'svg',
+  'webp',
+  'avif',
+  'mp3',
+  'mp4',
+  'wav',
+  'ogg',
+  'webm',
+  'avi',
+  'mov',
+  'flac',
+  'zip',
+  'tar',
+  'gz',
+  'bz2',
+  'xz',
+  '7z',
+  'rar',
+  'pdf',
+  'doc',
+  'docx',
+  'xls',
+  'xlsx',
+  'ppt',
+  'pptx',
+  'exe',
+  'dll',
+  'so',
+  'dylib',
+  'bin',
+  'dat',
+  'woff',
+  'woff2',
+  'ttf',
+  'otf',
+  'eot',
+  'sqlite',
+  'db',
+]);
+
+function isBinaryFile(filePath: string): boolean {
+  // Extract the filename from the full path first, then get the extension.
+  // Using split('/').pop() ensures we don't confuse dots in directory names
+  // with the file extension. Files without an extension (no dot after the
+  // last slash) correctly return '' here.
+  const fileName = filePath.split('/').pop() || '';
+  const dotIndex = fileName.lastIndexOf('.');
+  // No dot found, or dot is at index 0 (dotfile like ".gitignore") → no extension
+  if (dotIndex <= 0) return false;
+  const ext = fileName.slice(dotIndex + 1).toLowerCase();
+  return BINARY_EXTENSIONS.has(ext);
+}
+
+interface FileEditorViewProps {
+  initialPath?: string;
+}
+
+export function FileEditorView({ initialPath }: FileEditorViewProps) {
+  const { currentProject, defaultSkipTests, getCurrentWorktree, worktreesByProject } =
+    useAppStore();
+  const currentWorktree = useAppStore((s) =>
+    currentProject?.path ? (s.currentWorktreeByProject[currentProject.path] ?? null) : null
+  );
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  // Read persisted editor font settings from app store
+  const editorFontSize = useAppStore((s) => s.editorFontSize);
+  const editorFontFamily = useAppStore((s) => s.editorFontFamily);
+  const setEditorFontSize = useAppStore((s) => s.setEditorFontSize);
+  const setEditorFontFamily = useAppStore((s) => s.setEditorFontFamily);
+  // Auto-save settings
+  const editorAutoSave = useAppStore((s) => s.editorAutoSave);
+  const editorAutoSaveDelay = useAppStore((s) => s.editorAutoSaveDelay);
+  const setEditorAutoSave = useAppStore((s) => s.setEditorAutoSave);
+  const store = useFileEditorStore();
+  const isMobile = useIsMobile();
+  const loadedProjectRef = useRef<string | null>(null);
+  const refreshTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const editorRef = useRef<CodeEditorHandle>(null);
+  const autoSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [showActionsPanel, setShowActionsPanel] = useState(false);
+  const [hasEditorSelection, setHasEditorSelection] = useState(false);
+  const [showAddFeatureDialog, setShowAddFeatureDialog] = useState(false);
+  const [featureSelectionContext, setFeatureSelectionContext] = useState<string | undefined>();
+
+  // Derive the effective working path from the current worktree selection.
+  // When a worktree is selected (path is non-null), use the worktree path;
+  // otherwise fall back to the main project path.
+  const effectivePath = useMemo(() => {
+    if (!currentProject?.path) return null;
+    return currentWorktree?.path ?? currentProject.path;
+  }, [currentProject?.path, currentWorktree?.path]);
+
+  // Track virtual keyboard height on mobile to prevent content from being hidden
+  const { keyboardHeight, isKeyboardOpen } = useVirtualKeyboardResize();
+
+  const {
+    tabs,
+    activeTabId,
+    markdownViewMode,
+    mobileBrowserVisible,
+    tabSize,
+    wordWrap,
+    maxFileSize,
+    openTab,
+    closeTab,
+    closeAllTabs,
+    setActiveTab,
+    markTabSaved,
+    refreshTabContent,
+    setMarkdownViewMode,
+    setMobileBrowserVisible,
+    activeFileGitDetails,
+    gitBranch,
+    showInlineDiff,
+    setShowInlineDiff,
+    activeFileDiff,
+  } = store;
+
+  const activeTab = tabs.find((t) => t.id === activeTabId) || null;
+
+  // ─── Load File Tree ──────────────────────────────────────────
+  const loadTree = useCallback(
+    async (basePath?: string, options?: { preserveExpanded?: boolean }) => {
+      const treePath = basePath || effectivePath;
+      if (!treePath) return;
+
+      // Snapshot expanded folders before loading so we can restore them after
+      // (loadTree resets expandedFolders by default on initial load, but
+      // refreshes triggered by file/folder operations should preserve state)
+      const expandedSnapshot = options?.preserveExpanded
+        ? new Set(useFileEditorStore.getState().expandedFolders)
+        : null;
+
+      try {
+        const api = getElectronAPI();
+
+        // Recursive tree builder
+        const buildTree = async (dirPath: string, depth: number = 0): Promise<FileTreeNode[]> => {
+          const result = await api.readdir(dirPath);
+          if (!result.success || !result.entries) return [];
+
+          const nodes: FileTreeNode[] = result.entries
+            .sort((a, b) => {
+              if (a.isDirectory && !b.isDirectory) return -1;
+              if (!a.isDirectory && b.isDirectory) return 1;
+              return a.name.localeCompare(b.name);
+            })
+            .map((entry) => ({
+              name: entry.name,
+              path: `${dirPath}/${entry.name}`,
+              isDirectory: entry.isDirectory,
+            }));
+
+          // Load first level of children for directories (lazy after that)
+          if (depth < 1) {
+            for (const node of nodes) {
+              if (node.isDirectory) {
+                node.children = await buildTree(node.path, depth + 1);
+              }
+            }
+          }
+
+          return nodes;
+        };
+
+        const tree = await buildTree(treePath);
+        const { setFileTree, setExpandedFolders } = useFileEditorStore.getState();
+        setFileTree(tree);
+
+        if (expandedSnapshot !== null) {
+          // Restore previously expanded folders after refresh
+          setExpandedFolders(expandedSnapshot);
+        } else {
+          // Folders are collapsed by default — do not auto-expand any directories
+          setExpandedFolders(new Set());
+        }
+      } catch (error) {
+        logger.error('Failed to load file tree:', error);
+      }
+    },
+    [effectivePath]
+  );
+
+  // ─── Load Git Status ─────────────────────────────────────────
+  const loadGitStatus = useCallback(async () => {
+    if (!effectivePath) return;
+    const { setGitStatusMap, setEnhancedGitStatusMap, setGitBranch } =
+      useFileEditorStore.getState();
+
+    try {
+      const api = getElectronAPI();
+      if (!api.git) return;
+
+      // Load basic diffs (backwards-compatible)
+      const result = await api.git.getDiffs(effectivePath);
+      if (result.success && result.files) {
+        const statusMap = new Map<string, string>();
+        for (const file of result.files) {
+          const fullPath = `${effectivePath}/${file.path}`;
+          // Determine status - prefer workTree, fallback to index
+          let status = file.workTreeStatus || file.indexStatus || file.status;
+          if (status === ' ') status = file.indexStatus || '';
+          if (status) {
+            statusMap.set(fullPath, status);
+          }
+        }
+        setGitStatusMap(statusMap);
+      }
+
+      // Also load enhanced status (with diff stats and staged/unstaged info)
+      try {
+        const enhancedResult = await api.git.getEnhancedStatus(effectivePath);
+        if (enhancedResult.success) {
+          if (enhancedResult.branch) {
+            setGitBranch(enhancedResult.branch);
+          }
+          if (enhancedResult.files) {
+            const enhancedMap = new Map<string, EnhancedGitFileStatus>();
+            for (const file of enhancedResult.files) {
+              const fullPath = `${effectivePath}/${file.path}`;
+              enhancedMap.set(fullPath, {
+                indexStatus: file.indexStatus,
+                workTreeStatus: file.workTreeStatus,
+                isConflicted: file.isConflicted,
+                isStaged: file.isStaged,
+                isUnstaged: file.isUnstaged,
+                linesAdded: file.linesAdded,
+                linesRemoved: file.linesRemoved,
+                statusLabel: file.statusLabel,
+              });
+            }
+            setEnhancedGitStatusMap(enhancedMap);
+          }
+        }
+      } catch {
+        // Enhanced status not available - that's okay
+      }
+    } catch (error) {
+      // Git might not be available - that's okay
+      logger.debug('Git status not available:', error);
+    }
+  }, [effectivePath]);
+
+  // ─── Load subdirectory children lazily ───────────────────────
+  const loadSubdirectory = useCallback(async (dirPath: string): Promise<FileTreeNode[]> => {
+    try {
+      const api = getElectronAPI();
+      const result = await api.readdir(dirPath);
+      if (!result.success || !result.entries) return [];
+
+      const nodes: FileTreeNode[] = result.entries
+        .sort((a, b) => {
+          if (a.isDirectory && !b.isDirectory) return -1;
+          if (!a.isDirectory && b.isDirectory) return 1;
+          return a.name.localeCompare(b.name);
+        })
+        .map((entry) => ({
+          name: entry.name,
+          path: `${dirPath}/${entry.name}`,
+          isDirectory: entry.isDirectory,
+        }));
+
+      // Pre-load first level of children for subdirectories so they can be expanded next
+      for (const node of nodes) {
+        if (node.isDirectory) {
+          try {
+            const subResult = await api.readdir(node.path);
+            if (subResult.success && subResult.entries) {
+              node.children = subResult.entries
+                .sort((a, b) => {
+                  if (a.isDirectory && !b.isDirectory) return -1;
+                  if (!a.isDirectory && b.isDirectory) return 1;
+                  return a.name.localeCompare(b.name);
+                })
+                .map((entry) => ({
+                  name: entry.name,
+                  path: `${node.path}/${entry.name}`,
+                  isDirectory: entry.isDirectory,
+                }));
+            }
+          } catch {
+            // Failed to pre-load children, they'll be loaded on expand
+          }
+        }
+      }
+
+      return nodes;
+    } catch (error) {
+      logger.error('Failed to load subdirectory:', error);
+      return [];
+    }
+  }, []);
+
+  // ─── Handle File Select ──────────────────────────────────────
+  const handleFileSelect = useCallback(
+    async (filePath: string) => {
+      // Check if already open
+      const existing = tabs.find((t) => t.filePath === filePath);
+      if (existing) {
+        setActiveTab(existing.id);
+        // If the tab is showing as dirty, re-read from disk to verify that the
+        // stored content actually differs from what is on disk. This fixes stale
+        // isDirty=true state that can be persisted to localStorage (e.g. the file
+        // was saved externally, or the tab schema changed).
+        // We only do this when the tab IS dirty to avoid a race condition where a
+        // concurrent save clears isDirty and then our stale disk read would wrongly
+        // set it back to true.
+        if (!existing.isBinary && !existing.isTooLarge && existing.isDirty) {
+          try {
+            const api = getElectronAPI();
+            const result = await api.readFile(filePath);
+            if (result.success && result.content !== undefined && !result.content.includes('\0')) {
+              // Re-check isDirty after the async read: a concurrent save may have
+              // already cleared it. Only refresh if the tab is still dirty.
+              const { tabs: currentTabs } = useFileEditorStore.getState();
+              const currentTab = currentTabs.find((t) => t.id === existing.id);
+              if (currentTab?.isDirty) {
+                refreshTabContent(existing.id, result.content);
+              }
+            }
+          } catch {
+            // Non-critical: if we can't re-read the file, keep the persisted state
+          }
+        }
+        return;
+      }
+
+      const fileName = filePath.split('/').pop() || 'untitled';
+
+      // Check if binary
+      if (isBinaryFile(filePath)) {
+        openTab({
+          filePath,
+          fileName,
+          content: '',
+          originalContent: '',
+          isDirty: false,
+          scrollTop: 0,
+          cursorLine: 1,
+          cursorCol: 1,
+          isBinary: true,
+          isTooLarge: false,
+          fileSize: 0,
+        });
+        return;
+      }
+
+      try {
+        const api = getElectronAPI();
+
+        // Check file size first
+        const statResult = await api.stat(filePath);
+        const fileSize = statResult.success && statResult.stats ? statResult.stats.size : 0;
+
+        if (fileSize > maxFileSize) {
+          openTab({
+            filePath,
+            fileName,
+            content: '',
+            originalContent: '',
+            isDirty: false,
+            scrollTop: 0,
+            cursorLine: 1,
+            cursorCol: 1,
+            isBinary: false,
+            isTooLarge: true,
+            fileSize,
+          });
+          return;
+        }
+
+        // Read file content
+        const result = await api.readFile(filePath);
+        if (result.success && result.content !== undefined) {
+          // Check if content looks binary (contains null bytes)
+          if (result.content.includes('\0')) {
+            openTab({
+              filePath,
+              fileName,
+              content: '',
+              originalContent: '',
+              isDirty: false,
+              scrollTop: 0,
+              cursorLine: 1,
+              cursorCol: 1,
+              isBinary: true,
+              isTooLarge: false,
+              fileSize,
+            });
+            return;
+          }
+
+          // Normalize line endings to match CodeMirror's internal representation
+          // (\r\n → \n). This prevents a false dirty state when CodeMirror reports
+          // its already-normalized content back via onChange.
+          const normalizedContent = normalizeLineEndings(result.content);
+          openTab({
+            filePath,
+            fileName,
+            content: normalizedContent,
+            originalContent: normalizedContent,
+            isDirty: false,
+            scrollTop: 0,
+            cursorLine: 1,
+            cursorCol: 1,
+            isBinary: false,
+            isTooLarge: false,
+            fileSize,
+          });
+        }
+      } catch (error) {
+        logger.error('Failed to open file:', error);
+      }
+    },
+    [tabs, setActiveTab, openTab, refreshTabContent, maxFileSize]
+  );
+
+  // ─── Mobile-aware file select ────────────────────────────────
+  const handleMobileFileSelect = useCallback(
+    async (filePath: string) => {
+      await handleFileSelect(filePath);
+      if (isMobile) {
+        setMobileBrowserVisible(false);
+      }
+    },
+    [handleFileSelect, isMobile, setMobileBrowserVisible]
+  );
+
+  // ─── Load File Diff for Inline Display ───────────────────────────────────
+  const loadFileDiff = useCallback(
+    async (filePath: string) => {
+      if (!effectivePath) return;
+      const { setActiveFileDiff } = useFileEditorStore.getState();
+      try {
+        const api = getElectronAPI();
+        if (!api.git?.getFileDiff) return;
+
+        // Get relative path
+        const relativePath = filePath.startsWith(effectivePath)
+          ? filePath.substring(effectivePath.length + 1)
+          : filePath;
+
+        const result = await api.git.getFileDiff(effectivePath, relativePath);
+        if (result.success && result.diff) {
+          setActiveFileDiff(result.diff);
+        } else {
+          setActiveFileDiff(null);
+        }
+      } catch {
+        setActiveFileDiff(null);
+      }
+    },
+    [effectivePath]
+  );
+
+  // ─── Handle Save ─────────────────────────────────────────────
+  const handleSave = useCallback(async () => {
+    // Get fresh state from the store to avoid stale closure issues
+    const {
+      tabs: currentTabs,
+      activeTabId: currentActiveTabId,
+      updateTabContent,
+    } = useFileEditorStore.getState();
+
+    if (!currentActiveTabId) return;
+
+    const tab = currentTabs.find((t) => t.id === currentActiveTabId);
+    if (!tab || !tab.isDirty) return;
+
+    // Get the current editor content directly from CodeMirror to ensure
+    // we save the latest content even if onChange hasn't fired yet
+    const editorContent = editorRef.current?.getValue();
+    const contentToSave = editorContent ?? tab.content;
+
+    // Sync the editor content to the store before saving
+    if (editorContent != null && editorContent !== tab.content) {
+      updateTabContent(tab.id, editorContent);
+    }
+
+    try {
+      const api = getElectronAPI();
+      const result = await api.writeFile(tab.filePath, contentToSave);
+
+      if (result.success) {
+        markTabSaved(tab.id, contentToSave);
+        // Refresh git status and inline diff after save
+        loadGitStatus();
+        if (showInlineDiff) {
+          loadFileDiff(tab.filePath);
+        }
+      } else {
+        logger.error('Failed to save file:', result.error);
+      }
+    } catch (error) {
+      logger.error('Failed to save file:', error);
+    }
+  }, [markTabSaved, loadGitStatus, showInlineDiff, loadFileDiff]);
+
+  // ─── Auto Save: save a specific tab by ID ───────────────────
+  const saveTabById = useCallback(
+    async (tabId: string) => {
+      const { tabs: currentTabs } = useFileEditorStore.getState();
+      const tab = currentTabs.find((t) => t.id === tabId);
+      if (!tab || !tab.isDirty) return;
+
+      try {
+        const api = getElectronAPI();
+        const result = await api.writeFile(tab.filePath, tab.content);
+
+        if (result.success) {
+          markTabSaved(tab.id, tab.content);
+          loadGitStatus();
+          // Refresh inline diff for the saved file if diff is active
+          const { showInlineDiff, activeTabId: currentActive } = useFileEditorStore.getState();
+          if (showInlineDiff && tab.id === currentActive) {
+            loadFileDiff(tab.filePath);
+          }
+        } else {
+          logger.error('Auto-save failed:', result.error);
+        }
+      } catch (error) {
+        logger.error('Auto-save failed:', error);
+      }
+    },
+    [markTabSaved, loadGitStatus, loadFileDiff]
+  );
+
+  // ─── Auto Save: on tab switch ──────────────────────────────
+  const prevActiveTabIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!editorAutoSave) {
+      prevActiveTabIdRef.current = activeTabId;
+      return;
+    }
+
+    const prevTabId = prevActiveTabIdRef.current;
+    prevActiveTabIdRef.current = activeTabId;
+
+    // When switching away from a dirty tab, auto-save it
+    if (prevTabId && prevTabId !== activeTabId) {
+      saveTabById(prevTabId);
+    }
+  }, [activeTabId, editorAutoSave, saveTabById]);
+
+  // ─── Auto Save: after timeout on content change ────────────
+  useEffect(() => {
+    if (!editorAutoSave || !activeTab || !activeTab.isDirty) {
+      // Clear any pending auto-save timer
+      if (autoSaveTimerRef.current) {
+        clearTimeout(autoSaveTimerRef.current);
+        autoSaveTimerRef.current = null;
+      }
+      return;
+    }
+
+    // Debounce: set a timer to save after the configured delay
+    if (autoSaveTimerRef.current) {
+      clearTimeout(autoSaveTimerRef.current);
+    }
+
+    autoSaveTimerRef.current = setTimeout(() => {
+      handleSave();
+      autoSaveTimerRef.current = null;
+    }, editorAutoSaveDelay);
+
+    return () => {
+      if (autoSaveTimerRef.current) {
+        clearTimeout(autoSaveTimerRef.current);
+        autoSaveTimerRef.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- activeTab is accessed for isDirty/content only
+  }, [editorAutoSave, editorAutoSaveDelay, activeTab?.isDirty, activeTab?.content, handleSave]);
+
+  // ─── Handle Search ──────────────────────────────────────────
+  const handleSearch = useCallback(() => {
+    if (editorRef.current) {
+      editorRef.current.openSearch();
+    }
+  }, []);
+
+  // ─── Handle Undo ───────────────────────────────────────────
+  const handleUndo = useCallback(() => {
+    if (editorRef.current) {
+      editorRef.current.undo();
+    }
+  }, []);
+
+  // ─── Handle Redo ───────────────────────────────────────────
+  const handleRedo = useCallback(() => {
+    if (editorRef.current) {
+      editorRef.current.redo();
+    }
+  }, []);
+
+  // ─── Get current branch from selected worktree ────────────
+  const currentBranch = useMemo(() => {
+    if (!currentProject?.path) return '';
+    const currentWorktreeInfo = getCurrentWorktree(currentProject.path);
+    const worktrees = worktreesByProject[currentProject.path] ?? [];
+    const currentWorktreePath = currentWorktreeInfo?.path ?? null;
+
+    const selectedWorktree =
+      currentWorktreePath === null
+        ? worktrees.find((w) => w.isMain)
+        : worktrees.find((w) => !w.isMain && pathsEqual(w.path, currentWorktreePath));
+
+    return selectedWorktree?.branch || worktrees.find((w) => w.isMain)?.branch || '';
+  }, [currentProject?.path, getCurrentWorktree, worktreesByProject]);
+
+  // ─── Create Feature from Selection ─────────────────────────
+  const handleCreateFeatureFromSelection = useCallback(() => {
+    if (!activeTab || !editorRef.current || !effectivePath) return;
+
+    const selection = editorRef.current.getSelection();
+    if (!selection) return;
+
+    // Compute relative path from effectivePath
+    const relativePath = activeTab.filePath.startsWith(effectivePath)
+      ? activeTab.filePath.substring(effectivePath.length + 1)
+      : activeTab.filePath.split('/').pop() || activeTab.filePath;
+
+    // Get language extension for code fence
+    const langName = getLanguageName(activeTab.filePath).toLowerCase();
+    const langMap: Record<string, string> = {
+      javascript: 'js',
+      jsx: 'jsx',
+      typescript: 'ts',
+      tsx: 'tsx',
+      python: 'py',
+      ruby: 'rb',
+      shell: 'sh',
+      'c++': 'cpp',
+      'plain text': '',
+    };
+    const fenceLang = langMap[langName] || langName;
+
+    // Truncate selection to ~200 lines
+    const lines = selection.text.split('\n');
+    const truncated = lines.length > 200;
+    const codeText = truncated ? lines.slice(0, 200).join('\n') + '\n[...]' : selection.text;
+
+    const description = [
+      `**File:** \`${relativePath}\` (Lines ${selection.fromLine}-${selection.toLine})`,
+      '',
+      `\`\`\`${fenceLang}`,
+      codeText,
+      '```',
+      truncated ? `\n*Selection truncated (${lines.length} lines total)*` : '',
+      '',
+      '---',
+      '',
+    ]
+      .filter((line) => line !== undefined)
+      .join('\n');
+
+    setFeatureSelectionContext(description);
+    setShowAddFeatureDialog(true);
+  }, [activeTab, effectivePath]);
+
+  // ─── Handle feature creation from AddFeatureDialog ─────────
+  const handleAddFeatureFromEditor = useCallback(
+    async (featureData: {
+      title: string;
+      category: string;
+      description: string;
+      priority: number;
+      model: string;
+      thinkingLevel: string;
+      reasoningEffort: string;
+      providerId?: string;
+      skipTests: boolean;
+      branchName: string;
+      planningMode: string;
+      requirePlanApproval: boolean;
+      excludedPipelineSteps?: string[];
+      workMode: string;
+      imagePaths?: Array<{ id: string; path: string; description?: string }>;
+      textFilePaths?: Array<{ id: string; path: string; description?: string }>;
+    }) => {
+      if (!currentProject?.path) {
+        toast.error('No project selected');
+        return;
+      }
+
+      try {
+        const api = getElectronAPI();
+        if (api.features?.create) {
+          const feature = {
+            id: `editor-${generateUUID()}`,
+            title: featureData.title,
+            description: featureData.description,
+            category: featureData.category,
+            status: 'backlog' as const,
+            passes: false,
+            priority: featureData.priority,
+            model: resolveModelString(featureData.model),
+            thinkingLevel: featureData.thinkingLevel,
+            reasoningEffort: featureData.reasoningEffort,
+            providerId: featureData.providerId,
+            skipTests: featureData.skipTests,
+            branchName: featureData.workMode === 'current' ? currentBranch : featureData.branchName,
+            planningMode: featureData.planningMode,
+            requirePlanApproval: featureData.requirePlanApproval,
+            excludedPipelineSteps: featureData.excludedPipelineSteps,
+            ...(featureData.imagePaths?.length ? { imagePaths: featureData.imagePaths } : {}),
+            ...(featureData.textFilePaths?.length
+              ? { textFilePaths: featureData.textFilePaths }
+              : {}),
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+          };
+
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const result = await api.features.create(currentProject.path, feature as any);
+          if (result.success) {
+            queryClient.invalidateQueries({
+              queryKey: queryKeys.features.all(currentProject.path),
+            });
+            toast.success(
+              `Created feature: ${featureData.title || featureData.description.slice(0, 50)}`,
+              {
+                action: {
+                  label: 'View Board',
+                  onClick: () => navigate({ to: '/board' }),
+                },
+              }
+            );
+            setShowAddFeatureDialog(false);
+            setFeatureSelectionContext(undefined);
+          } else {
+            toast.error(result.error || 'Failed to create feature');
+          }
+        }
+      } catch (err) {
+        logger.error('Create feature from editor error:', err);
+        toast.error(err instanceof Error ? err.message : 'Failed to create feature');
+      }
+    },
+    [currentProject?.path, currentBranch, queryClient, navigate]
+  );
+
+  // ─── File Operations ─────────────────────────────────────────
+  const handleCreateFile = useCallback(
+    async (parentPath: string, name: string) => {
+      if (!effectivePath) return;
+      const fullPath = parentPath ? `${parentPath}/${name}` : `${effectivePath}/${name}`;
+
+      try {
+        const api = getElectronAPI();
+        await api.writeFile(fullPath, '');
+
+        // If the new file starts with a dot, auto-enable hidden files visibility
+        // so the created file doesn't "disappear" from the tree
+        if (name.startsWith('.')) {
+          const { showHiddenFiles } = useFileEditorStore.getState();
+          if (!showHiddenFiles) {
+            store.setShowHiddenFiles(true);
+          }
+        }
+
+        // Preserve expanded folders so the parent directory stays open after refresh
+        await loadTree(undefined, { preserveExpanded: true });
+        // Open the newly created file (use mobile-aware select on mobile)
+        if (isMobile) {
+          handleMobileFileSelect(fullPath);
+        } else {
+          handleFileSelect(fullPath);
+        }
+      } catch (error) {
+        logger.error('Failed to create file:', error);
+      }
+    },
+    [effectivePath, loadTree, handleFileSelect, handleMobileFileSelect, isMobile, store]
+  );
+
+  const handleCreateFolder = useCallback(
+    async (parentPath: string, name: string) => {
+      if (!effectivePath) return;
+      const fullPath = parentPath ? `${parentPath}/${name}` : `${effectivePath}/${name}`;
+
+      try {
+        const api = getElectronAPI();
+        await api.mkdir(fullPath);
+
+        // If the new folder starts with a dot, auto-enable hidden files visibility
+        // so the created folder doesn't "disappear" from the tree
+        if (name.startsWith('.')) {
+          const { showHiddenFiles } = useFileEditorStore.getState();
+          if (!showHiddenFiles) {
+            store.setShowHiddenFiles(true);
+          }
+        }
+
+        // Preserve expanded folders so the parent directory stays open after refresh
+        await loadTree(undefined, { preserveExpanded: true });
+      } catch (error) {
+        logger.error('Failed to create folder:', error);
+      }
+    },
+    [effectivePath, loadTree, store]
+  );
+
+  const handleDeleteItem = useCallback(
+    async (path: string, _isDirectory: boolean) => {
+      try {
+        const api = getElectronAPI();
+        // Use trashItem if available (safer), fallback to deleteFile
+        if (api.trashItem) {
+          await api.trashItem(path);
+        } else {
+          await api.deleteFile(path);
+        }
+
+        // Close tab if the deleted file is open
+        const tab = tabs.find((t) => t.filePath === path);
+        if (tab) {
+          closeTab(tab.id);
+        }
+
+        // Preserve expanded folders so siblings of the deleted item remain visible
+        await loadTree(undefined, { preserveExpanded: true });
+        loadGitStatus();
+      } catch (error) {
+        logger.error('Failed to delete item:', error);
+      }
+    },
+    [tabs, closeTab, loadTree, loadGitStatus]
+  );
+
+  const handleRenameItem = useCallback(
+    async (oldPath: string, newName: string) => {
+      // Extract the current file/folder name from the old path
+      const oldName = oldPath.split('/').pop() || '';
+
+      // If the name hasn't changed, skip the rename entirely (no-op)
+      if (newName === oldName) return;
+
+      const parentPath = oldPath.substring(0, oldPath.lastIndexOf('/'));
+      const newPath = `${parentPath}/${newName}`;
+
+      try {
+        const api = getElectronAPI();
+
+        // Use the moveItem API for an atomic rename (works for both files and directories)
+        const result = await api.moveItem?.(oldPath, newPath);
+
+        if (result?.success) {
+          // Update the open tab if it was renamed
+          const tab = tabs.find((t) => t.filePath === oldPath);
+          if (tab) {
+            closeTab(tab.id);
+            if (isMobile) {
+              handleMobileFileSelect(newPath);
+            } else {
+              handleFileSelect(newPath);
+            }
+          }
+
+          // If the new name starts with a dot, auto-enable hidden files visibility
+          // so the renamed file doesn't "disappear" from the tree
+          if (newName.startsWith('.')) {
+            const { showHiddenFiles } = useFileEditorStore.getState();
+            if (!showHiddenFiles) {
+              store.setShowHiddenFiles(true);
+            }
+          }
+
+          await loadTree(undefined, { preserveExpanded: true });
+          loadGitStatus();
+        } else {
+          toast.error('Rename failed', { description: result?.error });
+        }
+      } catch (error) {
+        logger.error('Failed to rename item:', error);
+      }
+    },
+    [
+      tabs,
+      closeTab,
+      handleFileSelect,
+      handleMobileFileSelect,
+      isMobile,
+      loadTree,
+      loadGitStatus,
+      store,
+    ]
+  );
+
+  // ─── Handle Copy Item ────────────────────────────────────────
+  const handleCopyItem = useCallback(
+    async (sourcePath: string, destinationPath: string) => {
+      try {
+        const api = getElectronAPI();
+        if (!api.copyItem) {
+          toast.error('Copy not supported');
+          return;
+        }
+
+        // First try without overwrite
+        const result = await api.copyItem(sourcePath, destinationPath);
+        if (!result.success && result.exists) {
+          // Ask for confirmation to overwrite
+          const confirmed = window.confirm(
+            `"${destinationPath.split('/').pop()}" already exists at the destination. Do you want to replace it?`
+          );
+          if (confirmed) {
+            const retryResult = await api.copyItem(sourcePath, destinationPath, true);
+            if (retryResult.success) {
+              toast.success('Copied successfully');
+              await loadTree(undefined, { preserveExpanded: true });
+              loadGitStatus();
+            } else {
+              toast.error('Copy failed', { description: retryResult.error });
+            }
+          }
+        } else if (result.success) {
+          toast.success('Copied successfully');
+          await loadTree(undefined, { preserveExpanded: true });
+          loadGitStatus();
+        } else {
+          toast.error('Copy failed', { description: result.error });
+        }
+      } catch (error) {
+        logger.error('Failed to copy item:', error);
+        toast.error('Copy failed', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    },
+    [loadTree, loadGitStatus]
+  );
+
+  // ─── Handle Move Item ──────────────────────────────────────
+  const handleMoveItem = useCallback(
+    async (sourcePath: string, destinationPath: string) => {
+      try {
+        const api = getElectronAPI();
+        if (!api.moveItem) {
+          toast.error('Move not supported');
+          return;
+        }
+
+        // First try without overwrite
+        const result = await api.moveItem(sourcePath, destinationPath);
+        if (!result.success && result.exists) {
+          // Ask for confirmation to overwrite
+          const confirmed = window.confirm(
+            `"${destinationPath.split('/').pop()}" already exists at the destination. Do you want to replace it?`
+          );
+          if (confirmed) {
+            const retryResult = await api.moveItem(sourcePath, destinationPath, true);
+            if (retryResult.success) {
+              toast.success('Moved successfully');
+              // Update open tabs that point to moved files
+              const tab = tabs.find((t) => t.filePath === sourcePath);
+              if (tab) {
+                closeTab(tab.id);
+                handleFileSelect(destinationPath);
+              }
+              await loadTree(undefined, { preserveExpanded: true });
+              loadGitStatus();
+            } else {
+              toast.error('Move failed', { description: retryResult.error });
+            }
+          }
+        } else if (result.success) {
+          toast.success('Moved successfully');
+          // Update open tabs that point to moved files
+          const tab = tabs.find((t) => t.filePath === sourcePath);
+          if (tab) {
+            closeTab(tab.id);
+            handleFileSelect(destinationPath);
+          }
+          await loadTree(undefined, { preserveExpanded: true });
+          loadGitStatus();
+        } else {
+          toast.error('Move failed', { description: result.error });
+        }
+      } catch (error) {
+        logger.error('Failed to move item:', error);
+        toast.error('Move failed', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    },
+    [tabs, closeTab, handleFileSelect, loadTree, loadGitStatus]
+  );
+
+  // ─── Handle Download Item ──────────────────────────────────
+  const handleDownloadItem = useCallback(async (filePath: string) => {
+    try {
+      const api = getElectronAPI();
+      if (!api.downloadItem) {
+        toast.error('Download not supported');
+        return;
+      }
+      toast.info('Starting download...');
+      await api.downloadItem(filePath);
+      toast.success('Download complete');
+    } catch (error) {
+      logger.error('Failed to download item:', error);
+      toast.error('Download failed', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    }
+  }, []);
+
+  // ─── Handle Drag and Drop Move ─────────────────────────────
+  const handleDragDropMove = useCallback(
+    async (sourcePaths: string[], targetFolderPath: string) => {
+      for (const sourcePath of sourcePaths) {
+        const fileName = sourcePath.split('/').pop() || '';
+        const destinationPath = `${targetFolderPath}/${fileName}`;
+
+        // Prevent moving to the same location
+        const sourceDir = sourcePath.substring(0, sourcePath.lastIndexOf('/'));
+        if (sourceDir === targetFolderPath) continue;
+
+        await handleMoveItem(sourcePath, destinationPath);
+      }
+    },
+    [handleMoveItem]
+  );
+
+  // ─── Load git details for active file ──────────────────────
+  const loadFileGitDetails = useCallback(
+    async (filePath: string) => {
+      if (!effectivePath) return;
+      const { setActiveFileGitDetails } = useFileEditorStore.getState();
+      try {
+        const api = getElectronAPI();
+        if (!api.git?.getDetails) return;
+
+        // Get relative path
+        const relativePath = filePath.startsWith(effectivePath)
+          ? filePath.substring(effectivePath.length + 1)
+          : filePath;
+
+        const result = await api.git.getDetails(effectivePath, relativePath);
+        if (result.success && result.details) {
+          setActiveFileGitDetails(result.details);
+        } else {
+          setActiveFileGitDetails(null);
+        }
+      } catch {
+        setActiveFileGitDetails(null);
+      }
+    },
+    [effectivePath]
+  );
+
+  // Load git details when active tab changes
+  useEffect(() => {
+    if (activeTab && !activeTab.isBinary) {
+      loadFileGitDetails(activeTab.filePath);
+    } else {
+      useFileEditorStore.getState().setActiveFileGitDetails(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- activeTab accessed for specific properties only
+  }, [activeTab?.filePath, activeTab?.isBinary, loadFileGitDetails]);
+
+  // Load file diff when inline diff is enabled and active tab changes
+  useEffect(() => {
+    if (showInlineDiff && activeTab && !activeTab.isBinary && !activeTab.isTooLarge) {
+      loadFileDiff(activeTab.filePath);
+    } else {
+      useFileEditorStore.getState().setActiveFileDiff(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- activeTab accessed for specific properties only
+  }, [
+    showInlineDiff,
+    activeTab?.filePath,
+    activeTab?.isBinary,
+    activeTab?.isTooLarge,
+    loadFileDiff,
+  ]);
+
+  // ─── Handle Cursor Change ────────────────────────────────────
+  // Stable callback to avoid recreating CodeMirror extensions on every render.
+  // Accessing activeTabId from the store directly prevents this callback from
+  // changing every time the active tab switches (which would trigger an infinite
+  // update loop: cursor change → extension rebuild → view update → cursor change).
+  const handleCursorChange = useCallback((line: number, col: number) => {
+    const { activeTabId: currentActiveTabId } = useFileEditorStore.getState();
+    if (currentActiveTabId) {
+      useFileEditorStore.getState().updateTabCursor(currentActiveTabId, line, col);
+    }
+  }, []);
+
+  // ─── Handle Editor Content Change ────────────────────────────
+  // Stable callback to avoid recreating CodeMirror extensions on every render.
+  // Reading activeTabId from getState() keeps the reference identity stable.
+  const handleEditorChange = useCallback((val: string) => {
+    const { activeTabId: currentActiveTabId } = useFileEditorStore.getState();
+    if (currentActiveTabId) {
+      useFileEditorStore.getState().updateTabContent(currentActiveTabId, val);
+    }
+  }, []);
+
+  // ─── Handle Copy Path ────────────────────────────────────────
+  const handleCopyPath = useCallback(async (path: string) => {
+    try {
+      await navigator.clipboard.writeText(path);
+    } catch (error) {
+      logger.error('Failed to copy path to clipboard:', error);
+    }
+  }, []);
+
+  // ─── Handle folder expand (lazy load children) ───────────────
+  const handleToggleFolder = useCallback(
+    async (path: string) => {
+      const { expandedFolders, fileTree } = useFileEditorStore.getState();
+
+      if (!expandedFolders.has(path)) {
+        // Loading children for newly expanded folder
+        const findNode = (nodes: FileTreeNode[]): FileTreeNode | null => {
+          for (const n of nodes) {
+            if (n.path === path) return n;
+            if (n.children) {
+              const found = findNode(n.children);
+              if (found) return found;
+            }
+          }
+          return null;
+        };
+
+        const node = findNode(fileTree);
+        if (node && !node.children) {
+          const children = await loadSubdirectory(path);
+          // Update the tree with loaded children
+          const updateChildren = (nodes: FileTreeNode[]): FileTreeNode[] => {
+            return nodes.map((n) => {
+              if (n.path === path) return { ...n, children };
+              if (n.children) return { ...n, children: updateChildren(n.children) };
+              return n;
+            });
+          };
+          useFileEditorStore.getState().setFileTree(updateChildren(fileTree));
+        }
+      }
+
+      // Access toggleFolder via getState() to avoid capturing a new store reference
+      // on every render, which would make this useCallback's dependency unstable.
+      useFileEditorStore.getState().toggleFolder(path);
+    },
+    [loadSubdirectory]
+  );
+
+  // ─── Initial Load ────────────────────────────────────────────
+  // Reload the file tree and git status when the effective working directory changes
+  // (either from switching projects or switching worktrees)
+  useEffect(() => {
+    if (!effectivePath) return;
+    if (loadedProjectRef.current === effectivePath) return;
+
+    loadedProjectRef.current = effectivePath;
+    loadTree();
+    loadGitStatus();
+
+    // Set up periodic refresh for git status (every 10 seconds)
+    refreshTimerRef.current = setInterval(() => {
+      loadGitStatus();
+    }, 10000);
+
+    return () => {
+      if (refreshTimerRef.current) {
+        clearInterval(refreshTimerRef.current);
+      }
+    };
+  }, [effectivePath, loadTree, loadGitStatus]);
+
+  // ─── Refresh persisted tabs from disk ──────────────────────
+  // After mount, re-read all persisted (non-binary, non-large) tabs from disk
+  // to sync originalContent with the actual file state. This clears stale
+  // isDirty flags caused by external file changes or serialization artifacts.
+  const hasRefreshedTabsRef = useRef(false);
+
+  useEffect(() => {
+    if (!effectivePath || hasRefreshedTabsRef.current) return;
+    const { tabs: currentTabs, refreshTabContent: refresh } = useFileEditorStore.getState();
+    if (currentTabs.length === 0) return;
+
+    hasRefreshedTabsRef.current = true;
+
+    const refreshAll = async () => {
+      const api = getElectronAPI();
+      for (const tab of currentTabs) {
+        if (tab.isBinary || tab.isTooLarge) continue;
+        try {
+          const result = await api.readFile(tab.filePath);
+          if (result.success && result.content !== undefined && !result.content.includes('\0')) {
+            refresh(tab.id, result.content);
+          }
+        } catch {
+          // File may no longer exist — leave tab state as-is
+        }
+      }
+    };
+
+    refreshAll();
+  }, [effectivePath]);
+
+  // Open initial path if provided
+  useEffect(() => {
+    if (initialPath) {
+      if (isMobile) {
+        handleMobileFileSelect(initialPath);
+      } else {
+        handleFileSelect(initialPath);
+      }
+    }
+  }, [initialPath, handleFileSelect, handleMobileFileSelect, isMobile]);
+
+  // ─── Handle Tab Close with Dirty Check ───────────────────────
+  const handleTabClose = useCallback(
+    (tabId: string) => {
+      const tab = tabs.find((t) => t.id === tabId);
+      if (tab?.isDirty) {
+        const shouldClose = window.confirm(
+          `"${tab.fileName}" has unsaved changes. Are you sure you want to close it?`
+        );
+        if (!shouldClose) return;
+      }
+      closeTab(tabId);
+    },
+    [tabs, closeTab]
+  );
+
+  // ─── Handle Close All Tabs with Dirty Check ──────────────────
+  const handleCloseAll = useCallback(() => {
+    const dirtyTabs = tabs.filter((t) => t.isDirty);
+    if (dirtyTabs.length > 0) {
+      const fileList = dirtyTabs.map((t) => `  • ${t.fileName}`).join('\n');
+      const shouldClose = window.confirm(
+        `${dirtyTabs.length} file${dirtyTabs.length > 1 ? 's have' : ' has'} unsaved changes:\n${fileList}\n\nAre you sure you want to close all tabs?`
+      );
+      if (!shouldClose) return;
+    }
+    closeAllTabs();
+  }, [tabs, closeAllTabs]);
+
+  // ─── Rendering ───────────────────────────────────────────────
+  if (!currentProject) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="file-editor-no-project">
+        <p className="text-muted-foreground">No project selected</p>
+      </div>
+    );
+  }
+
+  const isMarkdown = activeTab ? isMarkdownFile(activeTab.filePath) : false;
+  const showPreview = isMarkdown && markdownViewMode !== 'editor';
+  const showEditor = !isMarkdown || markdownViewMode !== 'preview';
+
+  // ─── Editor Panel Content (shared between mobile and desktop) ──
+  const renderEditorPanel = () => (
+    <div className="flex flex-col h-full">
+      {/* Tab bar */}
+      <EditorTabs
+        tabs={tabs}
+        activeTabId={activeTabId}
+        onTabSelect={setActiveTab}
+        onTabClose={handleTabClose}
+        onCloseAll={handleCloseAll}
+        onSave={handleSave}
+        isDirty={activeTab?.isDirty && !activeTab?.isBinary && !activeTab?.isTooLarge}
+        showSaveButton={isMobile && !!activeTab && !activeTab.isBinary && !activeTab.isTooLarge}
+      />
+
+      {/* Editor content */}
+      {activeTab ? (
+        <div className="flex-1 overflow-hidden">
+          {/* Binary file notice */}
+          {activeTab.isBinary && (
+            <div className="flex-1 flex flex-col items-center justify-center gap-4 h-full">
+              <Binary className="w-12 h-12 text-muted-foreground" />
+              <div className="text-center">
+                <p className="text-lg font-medium">Binary File</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  This file cannot be displayed as text.
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Too large file notice */}
+          {activeTab.isTooLarge && (
+            <div className="flex-1 flex flex-col items-center justify-center gap-4 h-full">
+              <FileWarning className="w-12 h-12 text-yellow-500" />
+              <div className="text-center">
+                <p className="text-lg font-medium">File Too Large</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  This file is {(activeTab.fileSize / (1024 * 1024)).toFixed(1)}MB, which exceeds
+                  the {(maxFileSize / (1024 * 1024)).toFixed(0)}MB limit.
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Normal editable file */}
+          {!activeTab.isBinary && !activeTab.isTooLarge && (
+            <>
+              {isMarkdown && showEditor && showPreview ? (
+                // Markdown split view (stacks vertically on mobile)
+                <PanelGroup direction={isMobile ? 'vertical' : 'horizontal'} className="h-full">
+                  <Panel defaultSize={50} minSize={30}>
+                    <CodeEditor
+                      ref={editorRef}
+                      value={activeTab.content}
+                      onChange={handleEditorChange}
+                      filePath={activeTab.filePath}
+                      tabSize={tabSize}
+                      wordWrap={wordWrap}
+                      fontSize={editorFontSize}
+                      fontFamily={editorFontFamily}
+                      onCursorChange={handleCursorChange}
+                      onSave={handleSave}
+                      scrollCursorIntoView={isMobile && isKeyboardOpen}
+                      diffContent={showInlineDiff ? activeFileDiff : null}
+                      onSelectionChange={setHasEditorSelection}
+                    />
+                  </Panel>
+                  <PanelResizeHandle
+                    className={cn(
+                      'transition-colors',
+                      isMobile
+                        ? 'h-1 bg-border hover:bg-primary/50'
+                        : 'w-1 bg-border hover:bg-primary/50'
+                    )}
+                  />
+                  <Panel defaultSize={50} minSize={30}>
+                    <MarkdownPreviewPanel content={activeTab.content} />
+                  </Panel>
+                </PanelGroup>
+              ) : isMarkdown && !showEditor ? (
+                // Markdown preview only
+                <MarkdownPreviewPanel content={activeTab.content} className="h-full" />
+              ) : (
+                // Regular editor (or markdown editor-only mode)
+                <CodeEditor
+                  ref={editorRef}
+                  value={activeTab.content}
+                  onChange={handleEditorChange}
+                  filePath={activeTab.filePath}
+                  tabSize={tabSize}
+                  wordWrap={wordWrap}
+                  fontSize={editorFontSize}
+                  fontFamily={editorFontFamily}
+                  onCursorChange={handleCursorChange}
+                  onSave={handleSave}
+                  scrollCursorIntoView={isMobile && isKeyboardOpen}
+                  diffContent={showInlineDiff ? activeFileDiff : null}
+                  onSelectionChange={setHasEditorSelection}
+                />
+              )}
+            </>
+          )}
+        </div>
+      ) : (
+        // No file open
+        <div className="flex-1 flex flex-col items-center justify-center gap-4 px-4">
+          <FileCode2 className="w-16 h-16 text-muted-foreground/30" />
+          <div className="text-center">
+            <p className="text-muted-foreground">
+              {isMobile
+                ? 'Tap a file from the explorer to start editing'
+                : 'Select a file from the explorer to start editing'}
+            </p>
+            {!isMobile && (
+              <p className="text-xs text-muted-foreground/60 mt-1">
+                Ctrl+S to save &middot; Ctrl+F to search
+              </p>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Git detail panel (shown below editor for active file) */}
+      {activeTab && !activeTab.isBinary && !activeTab.isTooLarge && activeFileGitDetails && (
+        <GitDetailPanel
+          details={activeFileGitDetails}
+          filePath={activeTab.filePath}
+          onOpenFile={handleFileSelect}
+        />
+      )}
+
+      {/* Status bar */}
+      {activeTab && !activeTab.isBinary && !activeTab.isTooLarge && (
+        <div className="flex items-center justify-between px-3 py-1 border-t border-border bg-muted/30 text-xs text-muted-foreground">
+          <div className="flex items-center gap-3">
+            <span>{getLanguageName(activeTab.filePath)}</span>
+            <span>
+              Ln {activeTab.cursorLine}, Col {activeTab.cursorCol}
+            </span>
+            {activeTab.isDirty && (
+              <span className="flex items-center gap-1 text-primary">
+                <Circle className="w-1.5 h-1.5 fill-current" />
+                Modified
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            {gitBranch && (
+              <span className="flex items-center gap-1" title="Current branch">
+                <span className="text-primary">{gitBranch}</span>
+              </span>
+            )}
+            <span>Spaces: {tabSize}</span>
+            {!isMobile && <span>{wordWrap ? 'Wrap' : 'No Wrap'}</span>}
+            <span>UTF-8</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  // ─── File Tree Panel (shared between mobile and desktop) ──
+  const renderFileTree = () => (
+    <FileTree
+      onFileSelect={isMobile ? handleMobileFileSelect : handleFileSelect}
+      onCreateFile={handleCreateFile}
+      onCreateFolder={handleCreateFolder}
+      onDeleteItem={handleDeleteItem}
+      onRenameItem={handleRenameItem}
+      onCopyPath={handleCopyPath}
+      onRefresh={() => {
+        loadTree();
+        loadGitStatus();
+      }}
+      onToggleFolder={handleToggleFolder}
+      activeFilePath={activeTab?.filePath || null}
+      onCopyItem={handleCopyItem}
+      onMoveItem={handleMoveItem}
+      onDownloadItem={handleDownloadItem}
+      onDragDropMove={handleDragDropMove}
+      effectivePath={effectivePath || ''}
+    />
+  );
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden content-bg" data-testid="file-editor-view">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2 sm:p-4 border-b border-border bg-glass backdrop-blur-md">
+        <div className="flex items-center gap-3">
+          {/* Mobile: show browser toggle button when viewing editor */}
+          {isMobile && !mobileBrowserVisible && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setMobileBrowserVisible(true)}
+              className="p-1.5 -ml-1"
+              title="Show file explorer"
+            >
+              <PanelLeftOpen className="w-5 h-5" />
+            </Button>
+          )}
+          <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
+            <FileCode2 className="w-5 h-5 text-primary" />
+          </div>
+          <div>
+            <h1 className="text-lg font-semibold text-foreground">File Editor</h1>
+            <p className="text-sm text-muted-foreground truncate max-w-[150px] md:max-w-none">
+              {currentProject.name}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {/* Worktree directory selector */}
+          {currentProject?.path && <WorktreeDirectoryDropdown projectPath={currentProject.path} />}
+
+          {/* Desktop: Markdown view mode toggle */}
+          {isMarkdown && !(isMobile && mobileBrowserVisible) && (
+            <div className="hidden lg:block">
+              <MarkdownViewToolbar
+                viewMode={markdownViewMode}
+                onViewModeChange={setMarkdownViewMode}
+              />
+            </div>
+          )}
+
+          {/* Desktop: Search button */}
+          {activeTab &&
+            !activeTab.isBinary &&
+            !activeTab.isTooLarge &&
+            !(isMobile && mobileBrowserVisible) && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleSearch}
+                className="hidden lg:flex"
+                title="Search in file (Ctrl+F)"
+              >
+                <Search className="w-4 h-4 mr-2" />
+                Search
+              </Button>
+            )}
+
+          {/* Desktop: Undo / Redo buttons */}
+          {activeTab &&
+            !activeTab.isBinary &&
+            !activeTab.isTooLarge &&
+            !(isMobile && mobileBrowserVisible) && (
+              <div className="hidden lg:flex items-center gap-1">
+                <Button variant="outline" size="icon-sm" onClick={handleUndo} title="Undo (Ctrl+Z)">
+                  <Undo2 className="w-4 h-4" />
+                </Button>
+                <Button
+                  variant="outline"
+                  size="icon-sm"
+                  onClick={handleRedo}
+                  title="Redo (Ctrl+Shift+Z)"
+                >
+                  <Redo2 className="w-4 h-4" />
+                </Button>
+              </div>
+            )}
+
+          {/* Desktop: Save button */}
+          {activeTab &&
+            !activeTab.isBinary &&
+            !activeTab.isTooLarge &&
+            !(isMobile && mobileBrowserVisible) && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleSave}
+                disabled={!activeTab.isDirty}
+                className="hidden lg:flex"
+                title={editorAutoSave ? 'Auto-save enabled (Ctrl+S)' : 'Save file (Ctrl+S)'}
+              >
+                <Save className="w-4 h-4 mr-2" />
+                {editorAutoSave ? 'Auto' : 'Save'}
+              </Button>
+            )}
+
+          {/* Desktop: Inline Diff toggle */}
+          {activeTab &&
+            !activeTab.isBinary &&
+            !activeTab.isTooLarge &&
+            !(isMobile && mobileBrowserVisible) && (
+              <Button
+                variant={showInlineDiff ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => setShowInlineDiff(!showInlineDiff)}
+                className="hidden lg:flex"
+                title={showInlineDiff ? 'Hide git diff highlighting' : 'Show git diff highlighting'}
+              >
+                <Diff className="w-4 h-4 mr-2" />
+                Diff
+              </Button>
+            )}
+
+          {/* Desktop: Create Feature from selection */}
+          {hasEditorSelection &&
+            activeTab &&
+            !activeTab.isBinary &&
+            !activeTab.isTooLarge &&
+            !(isMobile && mobileBrowserVisible) && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleCreateFeatureFromSelection}
+                className="hidden lg:flex"
+                title="Create a board feature from the selected code"
+              >
+                <FolderKanban className="w-4 h-4 mr-2" />
+                Create Feature
+              </Button>
+            )}
+
+          {/* Editor Settings popover */}
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="hidden lg:flex text-muted-foreground hover:text-foreground"
+                title="Editor Settings"
+              >
+                <Settings className="w-4 h-4" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-64 p-3" align="end" side="bottom">
+              <div className="space-y-4">
+                <p className="text-xs font-semibold text-foreground">Editor Settings</p>
+                <EditorSettingsForm
+                  editorFontSize={editorFontSize}
+                  setEditorFontSize={setEditorFontSize}
+                  editorFontFamily={editorFontFamily}
+                  setEditorFontFamily={setEditorFontFamily}
+                  editorAutoSave={editorAutoSave}
+                  setEditorAutoSave={setEditorAutoSave}
+                />
+              </div>
+            </PopoverContent>
+          </Popover>
+
+          {/* Tablet/Mobile: actions panel trigger */}
+          <HeaderActionsPanelTrigger
+            isOpen={showActionsPanel}
+            onToggle={() => setShowActionsPanel(!showActionsPanel)}
+          />
+        </div>
+      </div>
+
+      {/* Actions Panel (tablet/mobile) */}
+      <HeaderActionsPanel
+        isOpen={showActionsPanel}
+        onClose={() => setShowActionsPanel(false)}
+        title="Editor Actions"
+      >
+        {/* Markdown view mode toggle */}
+        {isMarkdown && (
+          <div className="flex flex-col gap-2">
+            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+              View Mode
+            </span>
+            <MarkdownViewToolbar
+              viewMode={markdownViewMode}
+              onViewModeChange={setMarkdownViewMode}
+            />
+          </div>
+        )}
+
+        {/* Search button */}
+        {activeTab && !activeTab.isBinary && !activeTab.isTooLarge && (
+          <Button
+            variant="outline"
+            className="w-full justify-start"
+            onClick={() => {
+              handleSearch();
+              setShowActionsPanel(false);
+            }}
+          >
+            <Search className="w-4 h-4 mr-2" />
+            Search in File
+          </Button>
+        )}
+
+        {/* Undo / Redo buttons */}
+        {activeTab && !activeTab.isBinary && !activeTab.isTooLarge && (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              className="flex-1 justify-start"
+              onClick={() => {
+                handleUndo();
+                setShowActionsPanel(false);
+              }}
+            >
+              <Undo2 className="w-4 h-4 mr-2" />
+              Undo
+            </Button>
+            <Button
+              variant="outline"
+              className="flex-1 justify-start"
+              onClick={() => {
+                handleRedo();
+                setShowActionsPanel(false);
+              }}
+            >
+              <Redo2 className="w-4 h-4 mr-2" />
+              Redo
+            </Button>
+          </div>
+        )}
+
+        {/* Save button */}
+        {activeTab && !activeTab.isBinary && !activeTab.isTooLarge && (
+          <Button
+            variant="outline"
+            className="w-full justify-start"
+            disabled={!activeTab.isDirty}
+            onClick={() => {
+              handleSave();
+              setShowActionsPanel(false);
+            }}
+          >
+            <Save className="w-4 h-4 mr-2" />
+            {editorAutoSave ? 'Save Now (Auto-save on)' : 'Save Changes'}
+          </Button>
+        )}
+
+        {/* Inline Diff toggle */}
+        {activeTab && !activeTab.isBinary && !activeTab.isTooLarge && (
+          <button
+            onClick={() => setShowInlineDiff(!showInlineDiff)}
+            className={cn(
+              'flex items-center gap-2 w-full p-2 rounded-lg border transition-colors text-sm',
+              showInlineDiff
+                ? 'bg-primary/10 border-primary/30 text-primary'
+                : 'bg-muted/30 border-border text-muted-foreground hover:text-foreground'
+            )}
+          >
+            <Diff className="w-4 h-4" />
+            <span>{showInlineDiff ? 'Hide Git Diff' : 'Show Git Diff'}</span>
+          </button>
+        )}
+
+        {/* Create Feature from selection */}
+        {hasEditorSelection && activeTab && !activeTab.isBinary && !activeTab.isTooLarge && (
+          <Button
+            variant="outline"
+            className="w-full justify-start"
+            onClick={() => {
+              handleCreateFeatureFromSelection();
+              setShowActionsPanel(false);
+            }}
+          >
+            <FolderKanban className="w-4 h-4 mr-2" />
+            Create Feature from Selection
+          </Button>
+        )}
+
+        {/* File info */}
+        {activeTab && !activeTab.isBinary && !activeTab.isTooLarge && (
+          <div className="flex flex-col gap-1.5 p-3 rounded-lg bg-muted/30 border border-border">
+            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+              File Info
+            </span>
+            <div className="text-sm text-foreground">{getLanguageName(activeTab.filePath)}</div>
+            <div className="text-xs text-muted-foreground">
+              Ln {activeTab.cursorLine}, Col {activeTab.cursorCol}
+            </div>
+          </div>
+        )}
+
+        {/* Editor Settings */}
+        <div className="flex flex-col gap-3 p-3 rounded-lg bg-muted/30 border border-border">
+          <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            Editor Settings
+          </span>
+          <EditorSettingsForm
+            editorFontSize={editorFontSize}
+            setEditorFontSize={setEditorFontSize}
+            editorFontFamily={editorFontFamily}
+            setEditorFontFamily={setEditorFontFamily}
+            editorAutoSave={editorAutoSave}
+            setEditorAutoSave={setEditorAutoSave}
+          />
+        </div>
+      </HeaderActionsPanel>
+
+      {/* Main content area */}
+      {isMobile ? (
+        // ─── Mobile Layout: full-screen browser or editor ─────────
+        // When the virtual keyboard is open, reduce container height so the
+        // editor content scrolls up and the cursor stays visible above the keyboard.
+        <div
+          className="flex-1 overflow-hidden"
+          style={isKeyboardOpen ? { height: `calc(100% - ${keyboardHeight}px)` } : undefined}
+        >
+          {mobileBrowserVisible ? (
+            // Full-screen file browser on mobile
+            <div className="h-full">{renderFileTree()}</div>
+          ) : (
+            // Full-screen editor on mobile
+            renderEditorPanel()
+          )}
+        </div>
+      ) : (
+        // ─── Desktop Layout: resizable split panels ──────────────
+        <PanelGroup direction="horizontal" className="flex-1">
+          {/* File Browser Panel */}
+          <Panel defaultSize={20} minSize={15} maxSize={40}>
+            {renderFileTree()}
+          </Panel>
+
+          {/* Resize handle */}
+          <PanelResizeHandle className="w-1 bg-border hover:bg-primary/50 transition-colors" />
+
+          {/* Editor Panel */}
+          <Panel defaultSize={80} minSize={40}>
+            {renderEditorPanel()}
+          </Panel>
+        </PanelGroup>
+      )}
+
+      {/* Add Feature Dialog - opened from code selection */}
+      <AddFeatureDialog
+        open={showAddFeatureDialog}
+        onOpenChange={(open) => {
+          setShowAddFeatureDialog(open);
+          if (!open) {
+            setFeatureSelectionContext(undefined);
+          }
+        }}
+        onAdd={handleAddFeatureFromEditor}
+        categorySuggestions={['From Editor']}
+        branchSuggestions={[]}
+        defaultSkipTests={defaultSkipTests}
+        defaultBranch={currentBranch}
+        currentBranch={currentBranch || undefined}
+        isMaximized={false}
+        projectPath={currentProject?.path}
+        prefilledDescription={featureSelectionContext}
+        prefilledCategory="From Editor"
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/file-editor-view/index.ts b/temp_repo/apps/ui/src/components/views/file-editor-view/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ba94898c03641da9c0397a605087366a222ea0fe
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/file-editor-view/index.ts
@@ -0,0 +1 @@
+export { FileEditorView } from './file-editor-view';
diff --git a/temp_repo/apps/ui/src/components/views/file-editor-view/use-file-editor-store.ts b/temp_repo/apps/ui/src/components/views/file-editor-view/use-file-editor-store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ab2902051f4c905a2be617af84f890c8b09436f8
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/file-editor-view/use-file-editor-store.ts
@@ -0,0 +1,451 @@
+import { create } from 'zustand';
+import { persist, type StorageValue } from 'zustand/middleware';
+import {
+  updateTabWithContent,
+  markTabAsSaved,
+  normalizeLineEndings,
+} from './file-editor-dirty-utils';
+
+export interface FileTreeNode {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  children?: FileTreeNode[];
+  /** Git status indicator: M=modified, A=added, D=deleted, ?=untracked, !=ignored, S=staged */
+  gitStatus?: string;
+}
+
+export interface EditorTab {
+  id: string;
+  filePath: string;
+  fileName: string;
+  content: string;
+  originalContent: string;
+  isDirty: boolean;
+  scrollTop: number;
+  cursorLine: number;
+  cursorCol: number;
+  /** Whether the file is binary (non-editable) */
+  isBinary: boolean;
+  /** Whether the file is too large to edit */
+  isTooLarge: boolean;
+  /** File size in bytes */
+  fileSize: number;
+}
+
+export type MarkdownViewMode = 'editor' | 'preview' | 'split';
+
+/** Enhanced git status per file, including diff stats and staged/unstaged info */
+export interface EnhancedGitFileStatus {
+  indexStatus: string;
+  workTreeStatus: string;
+  isConflicted: boolean;
+  isStaged: boolean;
+  isUnstaged: boolean;
+  linesAdded: number;
+  linesRemoved: number;
+  statusLabel: string;
+}
+
+/** Git details for a specific file (shown in detail panel) */
+export interface GitFileDetailsInfo {
+  branch: string;
+  lastCommitHash: string;
+  lastCommitMessage: string;
+  lastCommitAuthor: string;
+  lastCommitTimestamp: string;
+  linesAdded: number;
+  linesRemoved: number;
+  isConflicted: boolean;
+  isStaged: boolean;
+  isUnstaged: boolean;
+  statusLabel: string;
+}
+
+/** Items being dragged in the file tree */
+export interface DragState {
+  /** Paths of items currently being dragged */
+  draggedPaths: string[];
+  /** Path of the current drop target folder */
+  dropTargetPath: string | null;
+}
+
+interface FileEditorState {
+  // File tree state
+  fileTree: FileTreeNode[];
+  expandedFolders: Set<string>;
+  showHiddenFiles: boolean;
+
+  // Editor tabs
+  tabs: EditorTab[];
+  activeTabId: string | null;
+
+  // Markdown preview
+  markdownViewMode: MarkdownViewMode;
+
+  // Mobile layout state
+  /** Whether the file browser is visible on mobile (defaults to true) */
+  mobileBrowserVisible: boolean;
+
+  // Settings
+  tabSize: number;
+  wordWrap: boolean;
+  fontSize: number;
+  /** Maximum file size in bytes before warning (default 1MB) */
+  maxFileSize: number;
+
+  // Git status map: filePath -> status
+  gitStatusMap: Map<string, string>;
+
+  // Enhanced git status: filePath -> enhanced status info
+  enhancedGitStatusMap: Map<string, EnhancedGitFileStatus>;
+
+  // Current branch name
+  gitBranch: string;
+
+  // Git details for the currently active file (loaded on demand)
+  activeFileGitDetails: GitFileDetailsInfo | null;
+
+  // Inline diff display
+  /** Whether to show inline git diffs in the editor */
+  showInlineDiff: boolean;
+  /** The diff content for the active file (raw unified diff) */
+  activeFileDiff: string | null;
+
+  // Drag and drop state
+  dragState: DragState;
+
+  // Selected items for multi-select operations
+  selectedPaths: Set<string>;
+
+  // Actions
+  setFileTree: (tree: FileTreeNode[]) => void;
+  toggleFolder: (path: string) => void;
+  setShowHiddenFiles: (show: boolean) => void;
+  setExpandedFolders: (folders: Set<string>) => void;
+
+  openTab: (tab: Omit<EditorTab, 'id'>) => void;
+  closeTab: (tabId: string) => void;
+  closeAllTabs: () => void;
+  setActiveTab: (tabId: string) => void;
+  updateTabContent: (tabId: string, content: string) => void;
+  markTabSaved: (tabId: string, content: string) => void;
+  updateTabScroll: (tabId: string, scrollTop: number) => void;
+  updateTabCursor: (tabId: string, line: number, col: number) => void;
+  /** Re-sync an existing tab's originalContent and isDirty state from freshly-read disk content */
+  refreshTabContent: (tabId: string, diskContent: string) => void;
+
+  setMarkdownViewMode: (mode: MarkdownViewMode) => void;
+
+  setMobileBrowserVisible: (visible: boolean) => void;
+
+  setTabSize: (size: number) => void;
+  setWordWrap: (wrap: boolean) => void;
+  setFontSize: (size: number) => void;
+
+  setGitStatusMap: (map: Map<string, string>) => void;
+  setEnhancedGitStatusMap: (map: Map<string, EnhancedGitFileStatus>) => void;
+  setGitBranch: (branch: string) => void;
+  setActiveFileGitDetails: (details: GitFileDetailsInfo | null) => void;
+
+  setShowInlineDiff: (show: boolean) => void;
+  setActiveFileDiff: (diff: string | null) => void;
+
+  setDragState: (state: DragState) => void;
+  setSelectedPaths: (paths: Set<string>) => void;
+  toggleSelectedPath: (path: string) => void;
+  clearSelectedPaths: () => void;
+
+  reset: () => void;
+}
+
+const initialState = {
+  fileTree: [] as FileTreeNode[],
+  expandedFolders: new Set<string>(),
+  showHiddenFiles: true,
+  tabs: [] as EditorTab[],
+  activeTabId: null as string | null,
+  markdownViewMode: 'split' as MarkdownViewMode,
+  mobileBrowserVisible: true,
+  tabSize: 2,
+  wordWrap: true,
+  fontSize: 13,
+  maxFileSize: 1024 * 1024, // 1MB
+  gitStatusMap: new Map<string, string>(),
+  enhancedGitStatusMap: new Map<string, EnhancedGitFileStatus>(),
+  gitBranch: '',
+  activeFileGitDetails: null as GitFileDetailsInfo | null,
+  showInlineDiff: false,
+  activeFileDiff: null as string | null,
+  dragState: { draggedPaths: [], dropTargetPath: null } as DragState,
+  selectedPaths: new Set<string>(),
+};
+
+/** Shape of the persisted subset (Sets are stored as arrays for JSON compatibility) */
+interface PersistedFileEditorState {
+  tabs: EditorTab[];
+  activeTabId: string | null;
+  expandedFolders: string[];
+  markdownViewMode: MarkdownViewMode;
+}
+
+const STORE_NAME = 'automaker-file-editor';
+
+export const useFileEditorStore = create<FileEditorState>()(
+  persist(
+    (set, get) => ({
+      ...initialState,
+
+      setFileTree: (tree) => set({ fileTree: tree }),
+
+      toggleFolder: (path) => {
+        const { expandedFolders } = get();
+        const next = new Set(expandedFolders);
+        if (next.has(path)) {
+          next.delete(path);
+        } else {
+          next.add(path);
+        }
+        set({ expandedFolders: next });
+      },
+
+      setShowHiddenFiles: (show) => set({ showHiddenFiles: show }),
+
+      setExpandedFolders: (folders) => set({ expandedFolders: folders }),
+
+      openTab: (tabData) => {
+        const { tabs } = get();
+        // Check if file is already open
+        const existing = tabs.find((t) => t.filePath === tabData.filePath);
+        if (existing) {
+          set({ activeTabId: existing.id });
+          return;
+        }
+
+        const id = `tab-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+        const newTab: EditorTab = { ...tabData, id };
+        let updatedTabs = [...tabs, newTab];
+
+        // Enforce max open tabs – evict the oldest non-dirty tab when over the limit
+        const MAX_TABS = 25;
+        while (updatedTabs.length > MAX_TABS) {
+          const evictIdx = updatedTabs.findIndex((t) => t.id !== id && !t.isDirty);
+          if (evictIdx === -1) break; // all other tabs are dirty, keep them
+          updatedTabs.splice(evictIdx, 1);
+        }
+
+        set({
+          tabs: updatedTabs,
+          activeTabId: id,
+        });
+      },
+
+      closeTab: (tabId) => {
+        const { tabs, activeTabId } = get();
+        const idx = tabs.findIndex((t) => t.id === tabId);
+        if (idx === -1) return;
+
+        const newTabs = tabs.filter((t) => t.id !== tabId);
+        let newActiveId = activeTabId;
+
+        if (activeTabId === tabId) {
+          if (newTabs.length === 0) {
+            newActiveId = null;
+          } else if (idx >= newTabs.length) {
+            newActiveId = newTabs[newTabs.length - 1].id;
+          } else {
+            newActiveId = newTabs[idx].id;
+          }
+        }
+
+        set({ tabs: newTabs, activeTabId: newActiveId });
+      },
+
+      closeAllTabs: () => {
+        set({ tabs: [], activeTabId: null });
+      },
+
+      setActiveTab: (tabId) => set({ activeTabId: tabId }),
+
+      updateTabContent: (tabId, content) => {
+        set({
+          tabs: get().tabs.map((t) => (t.id === tabId ? updateTabWithContent(t, content) : t)),
+        });
+      },
+
+      markTabSaved: (tabId, content) => {
+        set({
+          tabs: get().tabs.map((t) => (t.id === tabId ? markTabAsSaved(t, content) : t)),
+        });
+      },
+
+      refreshTabContent: (tabId, diskContent) => {
+        set({
+          tabs: get().tabs.map((t) => {
+            if (t.id !== tabId) return t;
+            // Normalize line endings so the baseline matches CodeMirror's
+            // internal representation (\r\n → \n). Without this, files with
+            // Windows line endings would always appear dirty.
+            const normalizedDisk = normalizeLineEndings(diskContent);
+            // If the editor content matches the freshly-read disk content, the file
+            // is clean (any previous isDirty was a stale persisted value).
+            // Otherwise keep the user's in-progress edits but update originalContent
+            // so isDirty is calculated against the actual on-disk baseline.
+            const isDirty = normalizeLineEndings(t.content) !== normalizedDisk;
+            return { ...t, originalContent: normalizedDisk, isDirty };
+          }),
+        });
+      },
+
+      updateTabScroll: (tabId, scrollTop) => {
+        set({
+          tabs: get().tabs.map((t) => (t.id === tabId ? { ...t, scrollTop } : t)),
+        });
+      },
+
+      updateTabCursor: (tabId, line, col) => {
+        set({
+          tabs: get().tabs.map((t) =>
+            t.id === tabId ? { ...t, cursorLine: line, cursorCol: col } : t
+          ),
+        });
+      },
+
+      setMarkdownViewMode: (mode) => set({ markdownViewMode: mode }),
+
+      setMobileBrowserVisible: (visible) => set({ mobileBrowserVisible: visible }),
+
+      setTabSize: (size) => set({ tabSize: size }),
+      setWordWrap: (wrap) => set({ wordWrap: wrap }),
+      setFontSize: (size) => set({ fontSize: size }),
+
+      setGitStatusMap: (map) => set({ gitStatusMap: map }),
+      setEnhancedGitStatusMap: (map) => set({ enhancedGitStatusMap: map }),
+      setGitBranch: (branch) => set({ gitBranch: branch }),
+      setActiveFileGitDetails: (details) => set({ activeFileGitDetails: details }),
+
+      setShowInlineDiff: (show) => set({ showInlineDiff: show }),
+      setActiveFileDiff: (diff) => set({ activeFileDiff: diff }),
+
+      setDragState: (state) => set({ dragState: state }),
+      setSelectedPaths: (paths) => set({ selectedPaths: paths }),
+      toggleSelectedPath: (path) => {
+        const { selectedPaths } = get();
+        const next = new Set(selectedPaths);
+        if (next.has(path)) {
+          next.delete(path);
+        } else {
+          next.add(path);
+        }
+        set({ selectedPaths: next });
+      },
+      clearSelectedPaths: () => set({ selectedPaths: new Set() }),
+
+      reset: () => set(initialState),
+    }),
+    {
+      name: STORE_NAME,
+      version: 2,
+      // Only persist tab session state, not transient data (git status, file tree, drag state)
+      partialize: (state) =>
+        ({
+          tabs: state.tabs,
+          activeTabId: state.activeTabId,
+          expandedFolders: state.expandedFolders,
+          markdownViewMode: state.markdownViewMode,
+        }) as unknown as FileEditorState,
+      // Custom storage adapter to handle Set<string> serialization
+      storage: {
+        getItem: (name: string): StorageValue<FileEditorState> | null => {
+          const raw = localStorage.getItem(name);
+          if (!raw) return null;
+          try {
+            const parsed = JSON.parse(raw) as StorageValue<PersistedFileEditorState>;
+            if (!parsed?.state) return null;
+            // Normalize tabs: ensure originalContent is always a string. Tabs persisted
+            // before originalContent was added to the schema have originalContent=undefined,
+            // which causes isDirty=true on any content comparison. Default to content so
+            // the tab starts in a clean state.
+            // Also recalculate isDirty from content vs originalContent rather than trusting
+            // the persisted value, which can become stale (e.g. file saved externally,
+            // CodeMirror normalization, or schema migration).
+            const normalizedTabs = (parsed.state.tabs ?? []).map((tab) => {
+              const originalContent = normalizeLineEndings(
+                tab.originalContent ?? tab.content ?? ''
+              );
+              const content = tab.content ?? '';
+              return {
+                ...tab,
+                originalContent,
+                isDirty: normalizeLineEndings(content) !== originalContent,
+              };
+            });
+            // Convert arrays back to Sets
+            return {
+              ...parsed,
+              state: {
+                ...parsed.state,
+                tabs: normalizedTabs,
+                expandedFolders: new Set(parsed.state.expandedFolders ?? []),
+              },
+            } as unknown as StorageValue<FileEditorState>;
+          } catch {
+            return null;
+          }
+        },
+        setItem: (name: string, value: StorageValue<FileEditorState>): void => {
+          try {
+            const state = value.state as unknown as FileEditorState;
+            // Convert Sets to arrays for JSON serialization
+            const serializable: StorageValue<PersistedFileEditorState> = {
+              ...value,
+              state: {
+                tabs: state.tabs ?? [],
+                activeTabId: state.activeTabId ?? null,
+                expandedFolders: Array.from(state.expandedFolders ?? []),
+                markdownViewMode: state.markdownViewMode ?? 'split',
+              },
+            };
+            localStorage.setItem(name, JSON.stringify(serializable));
+          } catch {
+            // localStorage might be full or disabled
+          }
+        },
+        removeItem: (name: string): void => {
+          try {
+            localStorage.removeItem(name);
+          } catch {
+            // Ignore
+          }
+        },
+      },
+      migrate: (persistedState: unknown, version: number) => {
+        const state = persistedState as Record<string, unknown>;
+        if (version < 1) {
+          // Initial migration: ensure all fields exist
+          state.tabs = state.tabs ?? [];
+          state.activeTabId = state.activeTabId ?? null;
+          state.expandedFolders = state.expandedFolders ?? new Set<string>();
+          state.markdownViewMode = state.markdownViewMode ?? 'split';
+        }
+        // Always ensure each tab has a valid originalContent field.
+        // Tabs persisted before originalContent was added to the schema would have
+        // originalContent=undefined, which causes isDirty=true on any onChange call
+        // (content !== undefined is always true). Fix by defaulting to content so the
+        // tab starts in a clean state; any genuine unsaved changes will be re-detected
+        // when the user next edits the file.
+        if (Array.isArray((state as Record<string, unknown>).tabs)) {
+          (state as Record<string, unknown>).tabs = (
+            (state as Record<string, unknown>).tabs as Array<Record<string, unknown>>
+          ).map((tab: Record<string, unknown>) => {
+            if (tab.originalContent === undefined || tab.originalContent === null) {
+              return { ...tab, originalContent: tab.content ?? '' };
+            }
+            return tab;
+          });
+        }
+        return state as unknown as FileEditorState;
+      },
+    }
+  )
+);
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view.tsx b/temp_repo/apps/ui/src/components/views/github-issues-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..df551609ee6eddf14172ebf42d03be02e47f7c71
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view.tsx
@@ -0,0 +1,513 @@
+// @ts-nocheck - GitHub issues view with issue selection and feature creation flow
+import { useState, useCallback, useMemo } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { CircleDot, RefreshCw, SearchX } from 'lucide-react';
+import { useQueryClient } from '@tanstack/react-query';
+import { getElectronAPI, GitHubIssue, IssueValidationResult } from '@/lib/electron';
+import { useAppStore } from '@/store/app-store';
+import { Button } from '@/components/ui/button';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+import { LoadingState } from '@/components/ui/loading-state';
+import { ErrorState } from '@/components/ui/error-state';
+import { cn, pathsEqual, generateUUID } from '@/lib/utils';
+import { useIsMobile } from '@/hooks/use-media-query';
+import { toast } from 'sonner';
+import { queryKeys } from '@/lib/query-keys';
+import { useGithubIssues, useIssueValidation, useIssuesFilter } from './github-issues-view/hooks';
+import { IssueRow, IssueDetailPanel, IssuesListHeader } from './github-issues-view/components';
+import { ValidationDialog } from './github-issues-view/dialogs';
+import { AddFeatureDialog } from './board-view/dialogs';
+import { formatDate, getFeaturePriority } from './github-issues-view/utils';
+import { resolveModelString } from '@automaker/model-resolver';
+import { useModelOverride } from '@/components/shared';
+import type {
+  ValidateIssueOptions,
+  IssuesFilterState,
+  IssuesStateFilter,
+} from './github-issues-view/types';
+import { DEFAULT_ISSUES_FILTER_STATE } from './github-issues-view/types';
+
+const logger = createLogger('GitHubIssuesView');
+
+export function GitHubIssuesView() {
+  const [selectedIssue, setSelectedIssue] = useState<GitHubIssue | null>(null);
+  const [validationResult, setValidationResult] = useState<IssueValidationResult | null>(null);
+  const [showValidationDialog, setShowValidationDialog] = useState(false);
+  const [showRevalidateConfirm, setShowRevalidateConfirm] = useState(false);
+  const [pendingRevalidateOptions, setPendingRevalidateOptions] =
+    useState<ValidateIssueOptions | null>(null);
+
+  // Add Feature dialog state
+  const [showAddFeatureDialog, setShowAddFeatureDialog] = useState(false);
+  const [createFeatureIssue, setCreateFeatureIssue] = useState<GitHubIssue | null>(null);
+
+  // Filter state
+  const [filterState, setFilterState] = useState<IssuesFilterState>(DEFAULT_ISSUES_FILTER_STATE);
+
+  const { currentProject, getCurrentWorktree, worktreesByProject, defaultSkipTests } =
+    useAppStore();
+  const queryClient = useQueryClient();
+
+  // Model override for validation
+  const validationModelOverride = useModelOverride({ phase: 'validationModel' });
+
+  const isMobile = useIsMobile();
+
+  const { openIssues, closedIssues, loading, refreshing, error, refresh } = useGithubIssues();
+
+  const { validatingIssues, cachedValidations, handleValidateIssue, handleViewCachedValidation } =
+    useIssueValidation({
+      selectedIssue,
+      showValidationDialog,
+      onValidationResultChange: setValidationResult,
+      onShowValidationDialogChange: setShowValidationDialog,
+    });
+
+  // Combine all issues for filtering
+  const allIssues = useMemo(() => [...openIssues, ...closedIssues], [openIssues, closedIssues]);
+
+  // Apply filter to issues - now returns matched issues directly for better performance
+  const filterResult = useIssuesFilter(allIssues, filterState, cachedValidations);
+
+  // Separate filtered issues by state - this is O(n) but now only done once
+  // since filterResult.matchedIssues already contains the filtered issues
+  const { filteredOpenIssues, filteredClosedIssues } = useMemo(() => {
+    const open: typeof openIssues = [];
+    const closed: typeof closedIssues = [];
+    for (const issue of filterResult.matchedIssues) {
+      if (issue.state.toLowerCase() === 'open') {
+        open.push(issue);
+      } else {
+        closed.push(issue);
+      }
+    }
+    return { filteredOpenIssues: open, filteredClosedIssues: closed };
+  }, [filterResult.matchedIssues]);
+
+  // Filter state change handlers
+  const handleStateFilterChange = useCallback((stateFilter: IssuesStateFilter) => {
+    setFilterState((prev) => ({ ...prev, stateFilter }));
+  }, []);
+
+  const handleLabelsChange = useCallback((selectedLabels: string[]) => {
+    setFilterState((prev) => ({ ...prev, selectedLabels }));
+  }, []);
+
+  // Clear all filters to default state
+  const handleClearFilters = useCallback(() => {
+    setFilterState(DEFAULT_ISSUES_FILTER_STATE);
+  }, []);
+
+  // Get current branch from selected worktree
+  const currentBranch = useMemo(() => {
+    if (!currentProject?.path) return '';
+    const currentWorktreeInfo = getCurrentWorktree(currentProject.path);
+    const worktrees = worktreesByProject[currentProject.path] ?? [];
+    const currentWorktreePath = currentWorktreeInfo?.path ?? null;
+
+    const selectedWorktree =
+      currentWorktreePath === null
+        ? worktrees.find((w) => w.isMain)
+        : worktrees.find((w) => !w.isMain && pathsEqual(w.path, currentWorktreePath));
+
+    return selectedWorktree?.branch || worktrees.find((w) => w.isMain)?.branch || '';
+  }, [currentProject?.path, getCurrentWorktree, worktreesByProject]);
+
+  const handleOpenInGitHub = useCallback((url: string) => {
+    const api = getElectronAPI();
+    api.openExternalLink(url);
+  }, []);
+
+  // Build a prefilled description from a GitHub issue for the feature dialog
+  const buildIssueDescription = useCallback(
+    (issue: GitHubIssue) => {
+      const parts = [
+        `**From GitHub Issue #${issue.number}**`,
+        '',
+        issue.body || 'No description provided.',
+      ];
+
+      // Include labels if present
+      if (issue.labels.length > 0) {
+        parts.push('', `**Labels:** ${issue.labels.map((l) => l.name).join(', ')}`);
+      }
+
+      // Include linked PRs info if present
+      if (issue.linkedPRs && issue.linkedPRs.length > 0) {
+        parts.push(
+          '',
+          '**Linked Pull Requests:**',
+          ...issue.linkedPRs.map((pr) => `- #${pr.number}: ${pr.title} (${pr.state})`)
+        );
+      }
+
+      // Include cached validation analysis if available
+      const cached = cachedValidations.get(issue.number);
+      if (cached?.result) {
+        const validation = cached.result;
+        parts.push('', '---', '', '**AI Validation Analysis:**', validation.reasoning);
+        if (validation.suggestedFix) {
+          parts.push('', `**Suggested Approach:**`, validation.suggestedFix);
+        }
+        if (validation.relatedFiles?.length) {
+          parts.push('', '**Related Files:**', ...validation.relatedFiles.map((f) => `- \`${f}\``));
+        }
+      }
+
+      return parts.join('\n');
+    },
+    [cachedValidations]
+  );
+
+  // Memoize the prefilled description to avoid recomputing on every render
+  const prefilledDescription = useMemo(
+    () => (createFeatureIssue ? buildIssueDescription(createFeatureIssue) : undefined),
+    [createFeatureIssue, buildIssueDescription]
+  );
+
+  // Open the Add Feature dialog with pre-filled data from a GitHub issue
+  const handleCreateFeature = useCallback((issue: GitHubIssue) => {
+    setCreateFeatureIssue(issue);
+    setShowAddFeatureDialog(true);
+  }, []);
+
+  // Handle feature creation from the AddFeatureDialog
+  const handleAddFeatureFromIssue = useCallback(
+    async (featureData: {
+      title: string;
+      category: string;
+      description: string;
+      priority: number;
+      model: string;
+      thinkingLevel: string;
+      reasoningEffort: string;
+      skipTests: boolean;
+      branchName: string;
+      planningMode: string;
+      requirePlanApproval: boolean;
+      excludedPipelineSteps?: string[];
+      workMode: string;
+      imagePaths?: Array<{ id: string; path: string; description?: string }>;
+      textFilePaths?: Array<{ id: string; path: string; description?: string }>;
+    }) => {
+      if (!currentProject?.path) {
+        toast.error('No project selected');
+        return;
+      }
+
+      try {
+        const api = getElectronAPI();
+        if (api.features?.create) {
+          const feature = {
+            id: `issue-${createFeatureIssue?.number || 'new'}-${generateUUID()}`,
+            title: featureData.title,
+            description: featureData.description,
+            category: featureData.category,
+            status: 'backlog' as const,
+            passes: false,
+            priority: featureData.priority,
+            model: featureData.model,
+            thinkingLevel: featureData.thinkingLevel,
+            reasoningEffort: featureData.reasoningEffort,
+            providerId: featureData.providerId,
+            skipTests: featureData.skipTests,
+            branchName: featureData.workMode === 'current' ? currentBranch : featureData.branchName,
+            planningMode: featureData.planningMode,
+            requirePlanApproval: featureData.requirePlanApproval,
+            dependencies: [],
+            excludedPipelineSteps: featureData.excludedPipelineSteps,
+            ...(featureData.imagePaths?.length ? { imagePaths: featureData.imagePaths } : {}),
+            ...(featureData.textFilePaths?.length
+              ? { textFilePaths: featureData.textFilePaths }
+              : {}),
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+          };
+
+          const result = await api.features.create(currentProject.path, feature);
+          if (result.success) {
+            queryClient.invalidateQueries({
+              queryKey: queryKeys.features.all(currentProject.path),
+            });
+            toast.success(
+              `Created feature: ${featureData.title || featureData.description.slice(0, 50)}`
+            );
+            setShowAddFeatureDialog(false);
+            setCreateFeatureIssue(null);
+          } else {
+            toast.error(result.error || 'Failed to create feature');
+          }
+        }
+      } catch (err) {
+        logger.error('Create feature from issue error:', err);
+        toast.error(err instanceof Error ? err.message : 'Failed to create feature');
+      }
+    },
+    [currentProject?.path, currentBranch, queryClient, createFeatureIssue]
+  );
+
+  const handleConvertToTask = useCallback(
+    async (issue: GitHubIssue, validation: IssueValidationResult) => {
+      if (!currentProject?.path) {
+        toast.error('No project selected');
+        return;
+      }
+
+      try {
+        const api = getElectronAPI();
+        if (api.features?.create) {
+          // Build description from issue body + validation info
+          const parts = [
+            `**From GitHub Issue #${issue.number}**`,
+            '',
+            issue.body || 'No description provided.',
+            '',
+            '---',
+            '',
+            '**AI Validation Analysis:**',
+            validation.reasoning,
+          ];
+          if (validation.suggestedFix) {
+            parts.push('', `**Suggested Approach:**`, validation.suggestedFix);
+          }
+          if (validation.relatedFiles?.length) {
+            parts.push(
+              '',
+              '**Related Files:**',
+              ...validation.relatedFiles.map((f) => `- \`${f}\``)
+            );
+          }
+          const description = parts.join('\n');
+
+          const feature = {
+            id: `issue-${issue.number}-${generateUUID()}`,
+            title: issue.title,
+            description,
+            category: 'From GitHub',
+            status: 'backlog' as const,
+            passes: false,
+            priority: getFeaturePriority(validation.estimatedComplexity),
+            model: resolveModelString('opus'),
+            thinkingLevel: 'none' as const,
+            branchName: currentBranch,
+            planningMode: 'skip' as const,
+            requirePlanApproval: false,
+            dependencies: [],
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+          };
+
+          const result = await api.features.create(currentProject.path, feature);
+          if (result.success) {
+            // Invalidate React Query cache to sync UI
+            queryClient.invalidateQueries({
+              queryKey: queryKeys.features.all(currentProject.path),
+            });
+            toast.success(`Created task: ${issue.title}`);
+          } else {
+            toast.error(result.error || 'Failed to create task');
+          }
+        }
+      } catch (err) {
+        logger.error('Convert to task error:', err);
+        toast.error(err instanceof Error ? err.message : 'Failed to create task');
+      }
+    },
+    [currentProject?.path, currentBranch, queryClient]
+  );
+
+  if (loading) {
+    return <LoadingState />;
+  }
+
+  if (error) {
+    return <ErrorState error={error} title="Failed to Load Issues" onRetry={refresh} />;
+  }
+
+  const totalIssues = filteredOpenIssues.length + filteredClosedIssues.length;
+  const totalUnfilteredIssues = openIssues.length + closedIssues.length;
+  const isFilteredEmpty =
+    totalIssues === 0 && totalUnfilteredIssues > 0 && filterResult.hasActiveFilter;
+
+  return (
+    <div className="flex-1 flex overflow-hidden">
+      {/* Issues List - hidden on mobile when an issue is selected */}
+      <div
+        className={cn(
+          'flex flex-col overflow-hidden border-r border-border',
+          selectedIssue ? 'w-80' : 'flex-1',
+          isMobile && selectedIssue && 'hidden'
+        )}
+      >
+        {/* Header */}
+        <IssuesListHeader
+          openCount={filteredOpenIssues.length}
+          closedCount={filteredClosedIssues.length}
+          totalOpenCount={openIssues.length}
+          totalClosedCount={closedIssues.length}
+          hasActiveFilter={filterResult.hasActiveFilter}
+          refreshing={refreshing}
+          onRefresh={refresh}
+          compact={!!selectedIssue}
+          filterProps={{
+            stateFilter: filterState.stateFilter,
+            selectedLabels: filterState.selectedLabels,
+            availableLabels: filterResult.availableLabels,
+            onStateFilterChange: handleStateFilterChange,
+            onLabelsChange: handleLabelsChange,
+          }}
+        />
+
+        {/* Issues List */}
+        <div className="flex-1 overflow-auto">
+          {totalIssues === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full text-center p-6">
+              <div className="p-4 rounded-full bg-muted/50 mb-4">
+                {isFilteredEmpty ? (
+                  <SearchX className="h-8 w-8 text-muted-foreground" />
+                ) : (
+                  <CircleDot className="h-8 w-8 text-muted-foreground" />
+                )}
+              </div>
+              <h2 className="text-base font-medium mb-2">
+                {isFilteredEmpty ? 'No Matching Issues' : 'No Issues'}
+              </h2>
+              <p className="text-sm text-muted-foreground mb-4">
+                {isFilteredEmpty
+                  ? 'No issues match your current filters.'
+                  : 'This repository has no issues yet.'}
+              </p>
+              {isFilteredEmpty && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleClearFilters}
+                  className="text-xs"
+                >
+                  Clear Filters
+                </Button>
+              )}
+            </div>
+          ) : (
+            <div className="divide-y divide-border">
+              {/* Open Issues */}
+              {filteredOpenIssues.map((issue) => (
+                <IssueRow
+                  key={issue.number}
+                  issue={issue}
+                  isSelected={selectedIssue?.number === issue.number}
+                  onClick={() => setSelectedIssue(issue)}
+                  onOpenExternal={() => handleOpenInGitHub(issue.url)}
+                  formatDate={formatDate}
+                  cachedValidation={cachedValidations.get(issue.number)}
+                  isValidating={validatingIssues.has(issue.number)}
+                />
+              ))}
+
+              {/* Closed Issues Section */}
+              {filteredClosedIssues.length > 0 && (
+                <>
+                  <div className="px-4 py-2 bg-muted/30 text-xs font-medium text-muted-foreground">
+                    Closed Issues ({filteredClosedIssues.length})
+                  </div>
+                  {filteredClosedIssues.map((issue) => (
+                    <IssueRow
+                      key={issue.number}
+                      issue={issue}
+                      isSelected={selectedIssue?.number === issue.number}
+                      onClick={() => setSelectedIssue(issue)}
+                      onOpenExternal={() => handleOpenInGitHub(issue.url)}
+                      formatDate={formatDate}
+                      cachedValidation={cachedValidations.get(issue.number)}
+                      isValidating={validatingIssues.has(issue.number)}
+                    />
+                  ))}
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Issue Detail Panel */}
+      {selectedIssue && (
+        <IssueDetailPanel
+          issue={selectedIssue}
+          validatingIssues={validatingIssues}
+          cachedValidations={cachedValidations}
+          onValidateIssue={handleValidateIssue}
+          onViewCachedValidation={handleViewCachedValidation}
+          onOpenInGitHub={handleOpenInGitHub}
+          onClose={() => setSelectedIssue(null)}
+          onShowRevalidateConfirm={(options) => {
+            setPendingRevalidateOptions(options);
+            setShowRevalidateConfirm(true);
+          }}
+          onCreateFeature={handleCreateFeature}
+          formatDate={formatDate}
+          modelOverride={validationModelOverride}
+          isMobile={isMobile}
+        />
+      )}
+
+      {/* Validation Dialog */}
+      <ValidationDialog
+        open={showValidationDialog}
+        onOpenChange={setShowValidationDialog}
+        issue={selectedIssue}
+        validationResult={validationResult}
+        onConvertToTask={handleConvertToTask}
+      />
+
+      {/* Add Feature Dialog - opened from issue detail panel */}
+      <AddFeatureDialog
+        open={showAddFeatureDialog}
+        onOpenChange={(open) => {
+          setShowAddFeatureDialog(open);
+          if (!open) {
+            setCreateFeatureIssue(null);
+          }
+        }}
+        onAdd={handleAddFeatureFromIssue}
+        categorySuggestions={['From GitHub']}
+        branchSuggestions={[]}
+        defaultSkipTests={defaultSkipTests}
+        defaultBranch={currentBranch}
+        currentBranch={currentBranch || undefined}
+        isMaximized={false}
+        projectPath={currentProject?.path}
+        prefilledTitle={createFeatureIssue?.title}
+        prefilledDescription={prefilledDescription}
+        prefilledCategory="From GitHub"
+      />
+
+      {/* Revalidate Confirmation Dialog */}
+      <ConfirmDialog
+        open={showRevalidateConfirm}
+        onOpenChange={(open) => {
+          setShowRevalidateConfirm(open);
+          if (!open) {
+            setPendingRevalidateOptions(null);
+          }
+        }}
+        title="Re-validate Issue"
+        description={`Are you sure you want to re-validate issue #${selectedIssue?.number}? This will run a new AI analysis and replace the existing validation result.`}
+        icon={RefreshCw}
+        iconClassName="text-primary"
+        confirmText="Re-validate"
+        onConfirm={() => {
+          if (selectedIssue && pendingRevalidateOptions) {
+            logger.info('Revalidating with options:', {
+              commentsCount: pendingRevalidateOptions.comments?.length ?? 0,
+              linkedPRsCount: pendingRevalidateOptions.linkedPRs?.length ?? 0,
+            });
+            handleValidateIssue(selectedIssue, {
+              ...pendingRevalidateOptions,
+              forceRevalidate: true,
+            });
+          }
+        }}
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/components/comment-item.tsx b/temp_repo/apps/ui/src/components/views/github-issues-view/components/comment-item.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c4a60cda21be406a8e5bb652e02de6308d79bf1d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/components/comment-item.tsx
@@ -0,0 +1,40 @@
+import { User } from 'lucide-react';
+import { Markdown } from '@/components/ui/markdown';
+import type { GitHubComment } from '@/lib/electron';
+import { formatDate } from '../utils';
+
+interface CommentItemProps {
+  comment: GitHubComment;
+}
+
+export function CommentItem({ comment }: CommentItemProps) {
+  return (
+    <div className="p-3 rounded-lg bg-background border border-border">
+      {/* Comment Header */}
+      <div className="flex items-center gap-2 mb-2">
+        {comment.author.avatarUrl ? (
+          <img
+            src={comment.author.avatarUrl}
+            alt={comment.author.login}
+            className="h-6 w-6 rounded-full"
+          />
+        ) : (
+          <div className="h-6 w-6 rounded-full bg-muted flex items-center justify-center">
+            <User className="h-3 w-3 text-muted-foreground" />
+          </div>
+        )}
+        <span className="text-sm font-medium">{comment.author.login}</span>
+        <span className="text-xs text-muted-foreground">
+          commented {formatDate(comment.createdAt)}
+        </span>
+      </div>
+
+      {/* Comment Body */}
+      {comment.body ? (
+        <Markdown className="text-sm">{comment.body}</Markdown>
+      ) : (
+        <p className="text-sm text-muted-foreground italic">No content</p>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/components/index.ts b/temp_repo/apps/ui/src/components/views/github-issues-view/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c2eb35ad4a2e3684d0f332848f424f1ec1eb4523
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/components/index.ts
@@ -0,0 +1,5 @@
+export { IssueRow } from './issue-row';
+export { IssueDetailPanel } from './issue-detail-panel';
+export { IssuesListHeader } from './issues-list-header';
+export { IssuesFilterControls } from './issues-filter-controls';
+export { CommentItem } from './comment-item';
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/components/issue-detail-panel.tsx b/temp_repo/apps/ui/src/components/views/github-issues-view/components/issue-detail-panel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..42f9a579a9c739e4058dd47f2ca07abdd689d287
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/components/issue-detail-panel.tsx
@@ -0,0 +1,427 @@
+import {
+  Circle,
+  CheckCircle2,
+  X,
+  Wand2,
+  ExternalLink,
+  CheckCircle,
+  Clock,
+  GitPullRequest,
+  User,
+  RefreshCw,
+  MessageSquare,
+  ChevronDown,
+  ChevronUp,
+  Plus,
+  ArrowLeft,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Markdown } from '@/components/ui/markdown';
+import { cn } from '@/lib/utils';
+import type { IssueDetailPanelProps } from '../types';
+import { isValidationStale } from '../utils';
+import { ModelOverrideTrigger } from '@/components/shared';
+import { useIssueComments } from '../hooks';
+import { CommentItem } from './comment-item';
+
+export function IssueDetailPanel({
+  issue,
+  validatingIssues,
+  cachedValidations,
+  onValidateIssue,
+  onViewCachedValidation,
+  onOpenInGitHub,
+  onClose,
+  onShowRevalidateConfirm,
+  onCreateFeature,
+  formatDate,
+  modelOverride,
+  isMobile = false,
+}: IssueDetailPanelProps) {
+  const isValidating = validatingIssues.has(issue.number);
+  const cached = cachedValidations.get(issue.number);
+  const isStale = cached ? isValidationStale(cached.validatedAt) : false;
+
+  // Comments state
+  const [commentsExpanded, setCommentsExpanded] = useState(true);
+  const [includeCommentsInAnalysis, setIncludeCommentsInAnalysis] = useState(true);
+  const {
+    comments,
+    totalCount,
+    loading: commentsLoading,
+    loadingMore,
+    hasNextPage,
+    error: commentsError,
+    loadMore,
+  } = useIssueComments(issue.number);
+
+  // Helper to get validation options with comments and linked PRs
+  const getValidationOptions = (forceRevalidate = false) => {
+    return {
+      forceRevalidate,
+      modelEntry: modelOverride.effectiveModelEntry, // Pass the full PhaseModelEntry to preserve thinking level
+      comments: includeCommentsInAnalysis && comments.length > 0 ? comments : undefined,
+      linkedPRs: issue.linkedPRs?.map((pr) => ({
+        number: pr.number,
+        title: pr.title,
+        state: pr.state,
+      })),
+    };
+  };
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden">
+      {/* Detail Header */}
+      <div className="flex items-center justify-between p-3 border-b border-border bg-muted/30 gap-2">
+        <div className="flex items-center gap-2 min-w-0">
+          {isMobile && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClose}
+              className="shrink-0 -ml-1"
+              aria-label="Back"
+              title="Back"
+            >
+              <ArrowLeft className="h-4 w-4" />
+            </Button>
+          )}
+          {issue.state === 'OPEN' ? (
+            <Circle className="h-4 w-4 text-green-500 shrink-0" />
+          ) : (
+            <CheckCircle2 className="h-4 w-4 text-purple-500 shrink-0" />
+          )}
+          <span className="text-sm font-medium truncate">
+            #{issue.number} {issue.title}
+          </span>
+        </div>
+        <div className={cn('flex items-center gap-2 shrink-0', isMobile && 'gap-1')}>
+          {(() => {
+            if (isValidating) {
+              return (
+                <Button variant="default" size="sm" loading>
+                  {isMobile ? '...' : 'Validating...'}
+                </Button>
+              );
+            }
+
+            if (cached && !isStale) {
+              return (
+                <>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => onViewCachedValidation(issue)}
+                    aria-label="View Result"
+                    title="View Result"
+                  >
+                    <CheckCircle className="h-4 w-4 mr-1 text-green-500" />
+                    {!isMobile && 'View Result'}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onShowRevalidateConfirm(getValidationOptions(true))}
+                    title="Re-validate"
+                  >
+                    <RefreshCw className="h-4 w-4" />
+                  </Button>
+                </>
+              );
+            }
+
+            if (cached && isStale) {
+              return (
+                <>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => onViewCachedValidation(issue)}
+                    aria-label="View (stale)"
+                    title="View (stale)"
+                  >
+                    <Clock className="h-4 w-4 mr-1 text-yellow-500" />
+                    {!isMobile && 'View (stale)'}
+                  </Button>
+                  <ModelOverrideTrigger
+                    currentModelEntry={modelOverride.effectiveModelEntry}
+                    onModelChange={modelOverride.setOverride}
+                    phase="validationModel"
+                    isOverridden={modelOverride.isOverridden}
+                    size="sm"
+                    variant="icon"
+                    className="mx-1"
+                  />
+                  <Button
+                    variant="default"
+                    size="sm"
+                    onClick={() => onValidateIssue(issue, getValidationOptions(true))}
+                    aria-label="Re-validate"
+                    title="Re-validate"
+                  >
+                    <Wand2 className="h-4 w-4 mr-1" />
+                    {!isMobile && 'Re-validate'}
+                  </Button>
+                </>
+              );
+            }
+
+            return (
+              <>
+                <ModelOverrideTrigger
+                  currentModelEntry={modelOverride.effectiveModelEntry}
+                  onModelChange={modelOverride.setOverride}
+                  phase="validationModel"
+                  isOverridden={modelOverride.isOverridden}
+                  size="sm"
+                  variant="icon"
+                  className="mr-1"
+                />
+                <Button
+                  variant="default"
+                  size="sm"
+                  onClick={() => onValidateIssue(issue, getValidationOptions())}
+                  aria-label="Validate with AI"
+                  title="Validate with AI"
+                >
+                  <Wand2 className="h-4 w-4 mr-1" />
+                  {!isMobile && 'Validate with AI'}
+                </Button>
+              </>
+            );
+          })()}
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => onCreateFeature(issue)}
+            aria-label="Create Feature"
+            title="Create a new feature to address this issue"
+          >
+            <Plus className={cn('h-4 w-4', !isMobile && 'mr-1')} />
+            {!isMobile && 'Create Feature'}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => onOpenInGitHub(issue.url)}
+            aria-label="Open in GitHub"
+            title="Open in GitHub"
+          >
+            <ExternalLink className="h-4 w-4" />
+            {!isMobile && <span className="ml-1">Open in GitHub</span>}
+          </Button>
+          {!isMobile && (
+            <Button variant="ghost" size="sm" onClick={onClose}>
+              <X className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Issue Detail Content */}
+      <div className={cn('flex-1 overflow-auto', isMobile ? 'p-4' : 'p-6')}>
+        {/* Title */}
+        <h1 className="text-xl font-bold mb-2">{issue.title}</h1>
+
+        {/* Meta info */}
+        <div className="flex items-center gap-3 text-sm text-muted-foreground mb-4">
+          <span
+            className={cn(
+              'px-2 py-0.5 rounded-full text-xs font-medium',
+              issue.state === 'OPEN'
+                ? 'bg-green-500/10 text-green-500'
+                : 'bg-purple-500/10 text-purple-500'
+            )}
+          >
+            {issue.state === 'OPEN' ? 'Open' : 'Closed'}
+          </span>
+          <span>
+            #{issue.number} opened {formatDate(issue.createdAt)} by{' '}
+            <span className="font-medium text-foreground">{issue.author.login}</span>
+          </span>
+        </div>
+
+        {/* Labels */}
+        {issue.labels.length > 0 && (
+          <div className="flex items-center gap-2 mb-4 flex-wrap">
+            {issue.labels.map((label) => (
+              <span
+                key={label.name}
+                className="px-2 py-0.5 text-xs font-medium rounded-full"
+                style={{
+                  backgroundColor: `#${label.color}20`,
+                  color: `#${label.color}`,
+                  border: `1px solid #${label.color}40`,
+                }}
+              >
+                {label.name}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Assignees */}
+        {issue.assignees && issue.assignees.length > 0 && (
+          <div className="flex items-center gap-2 mb-4">
+            <User className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm text-muted-foreground">Assigned to:</span>
+            <div className="flex items-center gap-2">
+              {issue.assignees.map((assignee) => (
+                <span
+                  key={assignee.login}
+                  className="inline-flex items-center gap-1.5 px-2 py-0.5 text-xs font-medium rounded-full bg-blue-500/10 text-blue-500 border border-blue-500/20"
+                >
+                  {assignee.avatarUrl && (
+                    <img
+                      src={assignee.avatarUrl}
+                      alt={assignee.login}
+                      className="h-4 w-4 rounded-full"
+                    />
+                  )}
+                  {assignee.login}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Linked Pull Requests */}
+        {issue.linkedPRs && issue.linkedPRs.length > 0 && (
+          <div className="mb-6 p-3 rounded-lg bg-muted/30 border border-border">
+            <div className="flex items-center gap-2 mb-2">
+              <GitPullRequest className="h-4 w-4 text-purple-500" />
+              <span className="text-sm font-medium">Linked Pull Requests</span>
+            </div>
+            <div className="space-y-2">
+              {issue.linkedPRs.map((pr) => (
+                <div key={pr.number} className="flex items-center justify-between text-sm">
+                  <div className="flex items-center gap-2 min-w-0">
+                    <span
+                      className={cn(
+                        'px-1.5 py-0.5 text-xs font-medium rounded',
+                        pr.state === 'open'
+                          ? 'bg-green-500/10 text-green-500'
+                          : pr.state === 'merged'
+                            ? 'bg-purple-500/10 text-purple-500'
+                            : 'bg-red-500/10 text-red-500'
+                      )}
+                    >
+                      {pr.state === 'open' ? 'Open' : pr.state === 'merged' ? 'Merged' : 'Closed'}
+                    </span>
+                    <span className="text-muted-foreground">#{pr.number}</span>
+                    <span className="truncate">{pr.title}</span>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 px-2 shrink-0"
+                    onClick={() => onOpenInGitHub(pr.url)}
+                  >
+                    <ExternalLink className="h-3 w-3" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Body */}
+        {issue.body ? (
+          <Markdown className="text-sm">{issue.body}</Markdown>
+        ) : (
+          <p className="text-sm text-muted-foreground italic">No description provided.</p>
+        )}
+
+        {/* Comments Section */}
+        <div className="mt-6 p-3 rounded-lg bg-muted/30 border border-border">
+          <div className="flex items-center justify-between">
+            <button
+              className="flex items-center gap-2 text-left"
+              onClick={() => setCommentsExpanded(!commentsExpanded)}
+            >
+              <MessageSquare className="h-4 w-4 text-blue-500" />
+              <span className="text-sm font-medium">
+                Comments {totalCount > 0 && `(${totalCount})`}
+              </span>
+              {commentsLoading && <Spinner size="xs" />}
+              {commentsExpanded ? (
+                <ChevronUp className="h-4 w-4 text-muted-foreground" />
+              ) : (
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+              )}
+            </button>
+            {comments.length > 0 && (
+              <label className="flex items-center gap-2 text-xs text-muted-foreground cursor-pointer">
+                <Checkbox
+                  checked={includeCommentsInAnalysis}
+                  onCheckedChange={setIncludeCommentsInAnalysis}
+                />
+                Include in AI analysis
+              </label>
+            )}
+          </div>
+
+          {commentsExpanded && (
+            <div className="mt-3">
+              {commentsError ? (
+                <p className="text-sm text-red-500">{commentsError}</p>
+              ) : comments.length === 0 && !commentsLoading ? (
+                <p className="text-sm text-muted-foreground italic">No comments yet.</p>
+              ) : (
+                <div className="space-y-3">
+                  {comments.map((comment) => (
+                    <CommentItem key={comment.id} comment={comment} />
+                  ))}
+
+                  {/* Load More Button */}
+                  {hasNextPage && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="w-full"
+                      onClick={loadMore}
+                      loading={loadingMore}
+                    >
+                      {loadingMore ? 'Loading...' : 'Load More Comments'}
+                    </Button>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Create Feature CTA */}
+        {isMobile && (
+          <div className="mt-6 p-4 rounded-lg bg-primary/5 border border-primary/20">
+            <div className="flex items-center gap-2 mb-2">
+              <Plus className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">Create Feature</span>
+            </div>
+            <p className="text-sm text-muted-foreground mb-3">
+              Create a new feature task to address this issue.
+            </p>
+            <Button variant="secondary" onClick={() => onCreateFeature(issue)}>
+              <Plus className="h-4 w-4 mr-2" />
+              Create Feature
+            </Button>
+          </div>
+        )}
+
+        {/* Open in GitHub CTA */}
+        <div className="mt-4 p-4 rounded-lg bg-muted/50 border border-border">
+          <p className="text-sm text-muted-foreground mb-3">
+            View comments, add reactions, and more on GitHub.
+          </p>
+          <Button onClick={() => onOpenInGitHub(issue.url)}>
+            <ExternalLink className="h-4 w-4 mr-2" />
+            View Full Issue on GitHub
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/components/issue-row.tsx b/temp_repo/apps/ui/src/components/views/github-issues-view/components/issue-row.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..01bf831604e68896eb0c7f47fd7ec4ec8a48e3bd
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/components/issue-row.tsx
@@ -0,0 +1,136 @@
+import {
+  Circle,
+  CheckCircle2,
+  ExternalLink,
+  CheckCircle,
+  Sparkles,
+  GitPullRequest,
+  User,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import type { IssueRowProps } from '../types';
+import { isValidationStale } from '../utils';
+
+export function IssueRow({
+  issue,
+  isSelected,
+  onClick,
+  onOpenExternal,
+  formatDate,
+  cachedValidation,
+  isValidating,
+}: IssueRowProps) {
+  // Check if validation exists and calculate staleness
+  const validationHoursSince = cachedValidation
+    ? (Date.now() - new Date(cachedValidation.validatedAt).getTime()) / (1000 * 60 * 60)
+    : null;
+  const isValidationStaleValue =
+    validationHoursSince !== null && isValidationStale(cachedValidation!.validatedAt);
+
+  // Check if validation is unviewed (exists, not stale, not viewed)
+  const hasUnviewedValidation =
+    cachedValidation && !cachedValidation.viewedAt && !isValidationStaleValue;
+
+  // Check if validation has been viewed (exists and was viewed)
+  const hasViewedValidation =
+    cachedValidation && cachedValidation.viewedAt && !isValidationStaleValue;
+
+  return (
+    <div
+      className={cn(
+        'group flex items-start gap-3 p-3 cursor-pointer hover:bg-accent/50 transition-colors',
+        isSelected && 'bg-accent'
+      )}
+      onClick={onClick}
+    >
+      {issue.state === 'OPEN' ? (
+        <Circle className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
+      ) : (
+        <CheckCircle2 className="h-4 w-4 text-purple-500 mt-0.5 flex-shrink-0" />
+      )}
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium truncate">{issue.title}</span>
+        </div>
+
+        <div className="flex items-center gap-2 mt-1 flex-wrap">
+          <span className="text-xs text-muted-foreground">
+            #{issue.number} opened {formatDate(issue.createdAt)} by {issue.author.login}
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2 mt-2 flex-wrap">
+          {/* Labels */}
+          {issue.labels.map((label) => (
+            <span
+              key={label.name}
+              className="px-1.5 py-0.5 text-[10px] font-medium rounded-full"
+              style={{
+                backgroundColor: `#${label.color}20`,
+                color: `#${label.color}`,
+                border: `1px solid #${label.color}40`,
+              }}
+            >
+              {label.name}
+            </span>
+          ))}
+
+          {/* Linked PR indicator */}
+          {issue.linkedPRs && issue.linkedPRs.length > 0 && (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded-full bg-purple-500/10 text-purple-500 border border-purple-500/20">
+              <GitPullRequest className="h-3 w-3" />
+              {issue.linkedPRs.length} PR{issue.linkedPRs.length > 1 ? 's' : ''}
+            </span>
+          )}
+
+          {/* Assignee indicator */}
+          {issue.assignees && issue.assignees.length > 0 && (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded-full bg-blue-500/10 text-blue-500 border border-blue-500/20">
+              <User className="h-3 w-3" />
+              {issue.assignees.map((a) => a.login).join(', ')}
+            </span>
+          )}
+
+          {/* Validating indicator */}
+          {isValidating && (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded-full bg-primary/10 text-primary border border-primary/20 animate-in fade-in duration-200">
+              <Spinner size="xs" />
+              Analyzing...
+            </span>
+          )}
+
+          {/* Unviewed validation indicator */}
+          {!isValidating && hasUnviewedValidation && (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded-full bg-amber-500/10 text-amber-500 border border-amber-500/20 animate-in fade-in duration-200">
+              <Sparkles className="h-3 w-3" />
+              Analysis Ready
+            </span>
+          )}
+
+          {/* Viewed validation indicator */}
+          {!isValidating && hasViewedValidation && (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded-full bg-green-500/10 text-green-500 border border-green-500/20">
+              <CheckCircle className="h-3 w-3" />
+              Validated
+            </span>
+          )}
+        </div>
+      </div>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        className="flex-shrink-0 opacity-0 group-hover:opacity-100"
+        onClick={(e) => {
+          e.stopPropagation();
+          onOpenExternal();
+        }}
+      >
+        <ExternalLink className="h-3.5 w-3.5" />
+      </Button>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/components/issues-filter-controls.tsx b/temp_repo/apps/ui/src/components/views/github-issues-view/components/issues-filter-controls.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..475a32d5ed228c0c5274d5520af0ba171d1a6d80
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/components/issues-filter-controls.tsx
@@ -0,0 +1,191 @@
+import { ChevronDown, Tag, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import type { IssuesStateFilter } from '../types';
+import { ISSUES_STATE_FILTER_OPTIONS } from '../types';
+
+/** Maximum number of labels to display before showing "+N more" in normal layout */
+const VISIBLE_LABELS_LIMIT = 3;
+/** Maximum number of labels to display before showing "+N more" in compact layout */
+const VISIBLE_LABELS_LIMIT_COMPACT = 2;
+
+interface IssuesFilterControlsProps {
+  /** Current state filter value */
+  stateFilter: IssuesStateFilter;
+  /** Currently selected labels */
+  selectedLabels: string[];
+  /** Available labels to choose from (typically from useIssuesFilter result) */
+  availableLabels: string[];
+  /** Callback when state filter changes */
+  onStateFilterChange: (filter: IssuesStateFilter) => void;
+  /** Callback when labels selection changes */
+  onLabelsChange: (labels: string[]) => void;
+  /** Whether the controls are disabled (e.g., during loading) */
+  disabled?: boolean;
+  /** Whether to use compact layout (stacked vertically) */
+  compact?: boolean;
+  /** Additional class name for the container */
+  className?: string;
+}
+
+/** Human-readable labels for state filter options */
+const STATE_FILTER_LABELS: Record<IssuesStateFilter, string> = {
+  open: 'Open',
+  closed: 'Closed',
+  all: 'All',
+};
+
+export function IssuesFilterControls({
+  stateFilter,
+  selectedLabels,
+  availableLabels,
+  onStateFilterChange,
+  onLabelsChange,
+  disabled = false,
+  compact = false,
+  className,
+}: IssuesFilterControlsProps) {
+  /**
+   * Handles toggling a label in the selection.
+   * If the label is already selected, it removes it; otherwise, it adds it.
+   */
+  const handleLabelToggle = (label: string) => {
+    const isSelected = selectedLabels.includes(label);
+    if (isSelected) {
+      onLabelsChange(selectedLabels.filter((l) => l !== label));
+    } else {
+      onLabelsChange([...selectedLabels, label]);
+    }
+  };
+
+  /**
+   * Clears all selected labels.
+   */
+  const handleClearLabels = () => {
+    onLabelsChange([]);
+  };
+
+  const hasSelectedLabels = selectedLabels.length > 0;
+  const hasAvailableLabels = availableLabels.length > 0;
+
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      {/* Filter Controls Row */}
+      <div className="flex items-center gap-2">
+        {/* State Filter Select */}
+        <Select
+          value={stateFilter}
+          onValueChange={(value) => onStateFilterChange(value as IssuesStateFilter)}
+          disabled={disabled}
+        >
+          <SelectTrigger className={cn('h-8 text-sm', compact ? 'w-[90px]' : 'w-[110px]')}>
+            <SelectValue placeholder="State" />
+          </SelectTrigger>
+          <SelectContent>
+            {ISSUES_STATE_FILTER_OPTIONS.map((option) => (
+              <SelectItem key={option} value={option}>
+                {STATE_FILTER_LABELS[option]}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {/* Labels Filter Dropdown */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild disabled={disabled || !hasAvailableLabels}>
+            <Button
+              variant="outline"
+              size="sm"
+              className={cn('h-8 gap-1.5', hasSelectedLabels && 'border-primary/50 bg-primary/5')}
+              disabled={disabled || !hasAvailableLabels}
+            >
+              <Tag className="h-3.5 w-3.5" />
+              <span>Labels</span>
+              {hasSelectedLabels && (
+                <Badge variant="secondary" size="sm" className="ml-1 px-1.5 py-0">
+                  {selectedLabels.length}
+                </Badge>
+              )}
+              <ChevronDown className="h-3.5 w-3.5 opacity-50" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-56 max-h-64 overflow-y-auto">
+            <DropdownMenuLabel className="flex items-center justify-between">
+              <span>Filter by label</span>
+              {hasSelectedLabels && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-5 px-1.5 text-xs text-muted-foreground hover:text-foreground"
+                  onClick={handleClearLabels}
+                >
+                  <X className="h-3 w-3 mr-0.5" />
+                  Clear
+                </Button>
+              )}
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {availableLabels.map((label) => (
+              <DropdownMenuCheckboxItem
+                key={label}
+                checked={selectedLabels.includes(label)}
+                onCheckedChange={() => handleLabelToggle(label)}
+                onSelect={(e) => e.preventDefault()} // Prevent dropdown from closing
+              >
+                {label}
+              </DropdownMenuCheckboxItem>
+            ))}
+            {!hasAvailableLabels && (
+              <div className="px-2 py-1.5 text-sm text-muted-foreground">No labels available</div>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Selected Labels Display - shown on separate row */}
+      {hasSelectedLabels && (
+        <div className="flex items-center gap-1 flex-wrap">
+          {selectedLabels
+            .slice(0, compact ? VISIBLE_LABELS_LIMIT_COMPACT : VISIBLE_LABELS_LIMIT)
+            .map((label) => (
+              <Badge
+                key={label}
+                variant="outline"
+                size="sm"
+                className="gap-1 cursor-pointer hover:bg-destructive/10 hover:border-destructive/50"
+                onClick={() => handleLabelToggle(label)}
+              >
+                {label}
+                <X className="h-2.5 w-2.5" />
+              </Badge>
+            ))}
+          {selectedLabels.length >
+            (compact ? VISIBLE_LABELS_LIMIT_COMPACT : VISIBLE_LABELS_LIMIT) && (
+            <Badge variant="muted" size="sm">
+              +
+              {selectedLabels.length -
+                (compact ? VISIBLE_LABELS_LIMIT_COMPACT : VISIBLE_LABELS_LIMIT)}{' '}
+              more
+            </Badge>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/components/issues-list-header.tsx b/temp_repo/apps/ui/src/components/views/github-issues-view/components/issues-list-header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9d7c49c06510d86855c2a3642c08a22273cdf9b6
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/components/issues-list-header.tsx
@@ -0,0 +1,100 @@
+import { CircleDot, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
+import type { IssuesStateFilter } from '../types';
+import { IssuesFilterControls } from './issues-filter-controls';
+
+interface IssuesListHeaderProps {
+  openCount: number;
+  closedCount: number;
+  /** Total open issues count (unfiltered) - used to show "X of Y" when filtered */
+  totalOpenCount?: number;
+  /** Total closed issues count (unfiltered) - used to show "X of Y" when filtered */
+  totalClosedCount?: number;
+  /** Whether any filter is currently active */
+  hasActiveFilter?: boolean;
+  refreshing: boolean;
+  onRefresh: () => void;
+  /** Whether the list is in compact mode (e.g., when detail panel is open) */
+  compact?: boolean;
+  /** Optional filter state and handlers - when provided, filter controls are rendered */
+  filterProps?: {
+    stateFilter: IssuesStateFilter;
+    selectedLabels: string[];
+    availableLabels: string[];
+    onStateFilterChange: (filter: IssuesStateFilter) => void;
+    onLabelsChange: (labels: string[]) => void;
+  };
+}
+
+export function IssuesListHeader({
+  openCount,
+  closedCount,
+  totalOpenCount,
+  totalClosedCount,
+  hasActiveFilter = false,
+  refreshing,
+  onRefresh,
+  compact = false,
+  filterProps,
+}: IssuesListHeaderProps) {
+  const totalIssues = openCount + closedCount;
+
+  // Format the counts subtitle based on filter state
+  const getCountsSubtitle = () => {
+    if (totalIssues === 0) {
+      return hasActiveFilter ? 'No matching issues' : 'No issues found';
+    }
+
+    // When filters are active and we have total counts, show "X of Y" format
+    if (hasActiveFilter && totalOpenCount !== undefined && totalClosedCount !== undefined) {
+      const openText =
+        openCount === totalOpenCount
+          ? `${openCount} open`
+          : `${openCount} of ${totalOpenCount} open`;
+      const closedText =
+        closedCount === totalClosedCount
+          ? `${closedCount} closed`
+          : `${closedCount} of ${totalClosedCount} closed`;
+      return `${openText}, ${closedText}`;
+    }
+
+    // Default format when no filters active
+    return `${openCount} open, ${closedCount} closed`;
+  };
+
+  return (
+    <div className="border-b border-border">
+      {/* Top row: Title and refresh button */}
+      <div className="flex items-center justify-between p-4 pb-2">
+        <div className="flex items-center gap-3">
+          <div className="p-2 rounded-lg bg-green-500/10">
+            <CircleDot className="h-5 w-5 text-green-500" />
+          </div>
+          <div>
+            <h1 className="text-lg font-bold">Issues</h1>
+            <p className="text-xs text-muted-foreground">{getCountsSubtitle()}</p>
+          </div>
+        </div>
+        <Button variant="outline" size="sm" onClick={onRefresh} disabled={refreshing}>
+          {refreshing ? <Spinner size="sm" /> : <RefreshCw className="h-4 w-4" />}
+        </Button>
+      </div>
+
+      {/* Filter controls row (optional) */}
+      {filterProps && (
+        <div className="px-4 pb-3 pt-1">
+          <IssuesFilterControls
+            stateFilter={filterProps.stateFilter}
+            selectedLabels={filterProps.selectedLabels}
+            availableLabels={filterProps.availableLabels}
+            onStateFilterChange={filterProps.onStateFilterChange}
+            onLabelsChange={filterProps.onLabelsChange}
+            disabled={refreshing}
+            compact={compact}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/constants.ts b/temp_repo/apps/ui/src/components/views/github-issues-view/constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..22a6785a625fd98eddf935f618b246a7778ce03c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/constants.ts
@@ -0,0 +1 @@
+export const VALIDATION_STALENESS_HOURS = 24;
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/dialogs/index.ts b/temp_repo/apps/ui/src/components/views/github-issues-view/dialogs/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..886b09b234894c8c2d6e1a02b1c5286146a94fcf
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/dialogs/index.ts
@@ -0,0 +1 @@
+export { ValidationDialog } from './validation-dialog';
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/dialogs/validation-dialog.tsx b/temp_repo/apps/ui/src/components/views/github-issues-view/dialogs/validation-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..214c0abecf3c1f05635d7d71ca49312553349ab3
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/dialogs/validation-dialog.tsx
@@ -0,0 +1,307 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Markdown } from '@/components/ui/markdown';
+import {
+  CheckCircle2,
+  XCircle,
+  AlertCircle,
+  FileCode,
+  Lightbulb,
+  AlertTriangle,
+  Plus,
+  GitPullRequest,
+  Clock,
+  Wrench,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type {
+  IssueValidationResult,
+  IssueValidationVerdict,
+  IssueValidationConfidence,
+  IssueComplexity,
+  GitHubIssue,
+} from '@/lib/electron';
+
+interface ValidationDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  issue: GitHubIssue | null;
+  validationResult: IssueValidationResult | null;
+  onConvertToTask?: (issue: GitHubIssue, validation: IssueValidationResult) => void;
+}
+
+const verdictConfig: Record<
+  IssueValidationVerdict,
+  { label: string; color: string; bgColor: string; icon: typeof CheckCircle2 }
+> = {
+  valid: {
+    label: 'Valid',
+    color: 'text-green-500',
+    bgColor: 'bg-green-500/10',
+    icon: CheckCircle2,
+  },
+  invalid: {
+    label: 'Invalid',
+    color: 'text-red-500',
+    bgColor: 'bg-red-500/10',
+    icon: XCircle,
+  },
+  needs_clarification: {
+    label: 'Needs Clarification',
+    color: 'text-yellow-500',
+    bgColor: 'bg-yellow-500/10',
+    icon: AlertCircle,
+  },
+};
+
+const confidenceConfig: Record<IssueValidationConfidence, { label: string; color: string }> = {
+  high: { label: 'High Confidence', color: 'text-green-500' },
+  medium: { label: 'Medium Confidence', color: 'text-yellow-500' },
+  low: { label: 'Low Confidence', color: 'text-orange-500' },
+};
+
+const complexityConfig: Record<IssueComplexity, { label: string; color: string }> = {
+  trivial: { label: 'Trivial', color: 'text-green-500' },
+  simple: { label: 'Simple', color: 'text-blue-500' },
+  moderate: { label: 'Moderate', color: 'text-yellow-500' },
+  complex: { label: 'Complex', color: 'text-orange-500' },
+  very_complex: { label: 'Very Complex', color: 'text-red-500' },
+};
+
+export function ValidationDialog({
+  open,
+  onOpenChange,
+  issue,
+  validationResult,
+  onConvertToTask,
+}: ValidationDialogProps) {
+  if (!issue) return null;
+
+  const handleConvertToTask = () => {
+    if (validationResult && onConvertToTask) {
+      onConvertToTask(issue, validationResult);
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">Issue Validation Result</DialogTitle>
+          <DialogDescription>
+            #{issue.number}: {issue.title}
+          </DialogDescription>
+        </DialogHeader>
+
+        {validationResult ? (
+          <div className="space-y-6 py-4">
+            {/* Verdict Badge */}
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                {(() => {
+                  const config = verdictConfig[validationResult.verdict];
+                  const Icon = config.icon;
+                  return (
+                    <>
+                      <div className={cn('p-2 rounded-lg', config.bgColor)}>
+                        <Icon className={cn('h-6 w-6', config.color)} />
+                      </div>
+                      <div>
+                        <p className={cn('text-lg font-semibold', config.color)}>{config.label}</p>
+                        <p
+                          className={cn(
+                            'text-sm',
+                            confidenceConfig[validationResult.confidence].color
+                          )}
+                        >
+                          {confidenceConfig[validationResult.confidence].label}
+                        </p>
+                      </div>
+                    </>
+                  );
+                })()}
+              </div>
+              {validationResult.estimatedComplexity && (
+                <div className="text-right">
+                  <p className="text-xs text-muted-foreground">Estimated Complexity</p>
+                  <p
+                    className={cn(
+                      'text-sm font-medium',
+                      complexityConfig[validationResult.estimatedComplexity].color
+                    )}
+                  >
+                    {complexityConfig[validationResult.estimatedComplexity].label}
+                  </p>
+                </div>
+              )}
+            </div>
+
+            {/* Bug Confirmed Badge */}
+            {validationResult.bugConfirmed && (
+              <div className="flex items-center gap-2 p-3 rounded-lg bg-red-500/10 border border-red-500/20">
+                <AlertTriangle className="h-5 w-5 text-red-500 shrink-0" />
+                <span className="text-sm font-medium text-red-500">Bug Confirmed in Codebase</span>
+              </div>
+            )}
+
+            {/* PR Analysis Section - Show AI's analysis of linked PRs */}
+            {validationResult.prAnalysis && validationResult.prAnalysis.hasOpenPR && (
+              <div
+                className={cn(
+                  'p-3 rounded-lg border',
+                  validationResult.prAnalysis.recommendation === 'wait_for_merge'
+                    ? 'bg-green-500/10 border-green-500/20'
+                    : validationResult.prAnalysis.recommendation === 'pr_needs_work'
+                      ? 'bg-yellow-500/10 border-yellow-500/20'
+                      : 'bg-purple-500/10 border-purple-500/20'
+                )}
+              >
+                <div className="flex items-start gap-2">
+                  {validationResult.prAnalysis.recommendation === 'wait_for_merge' ? (
+                    <Clock className="h-5 w-5 text-green-500 shrink-0 mt-0.5" />
+                  ) : validationResult.prAnalysis.recommendation === 'pr_needs_work' ? (
+                    <Wrench className="h-5 w-5 text-yellow-500 shrink-0 mt-0.5" />
+                  ) : (
+                    <GitPullRequest className="h-5 w-5 text-purple-500 shrink-0 mt-0.5" />
+                  )}
+                  <div className="flex-1">
+                    <span
+                      className={cn(
+                        'text-sm font-medium',
+                        validationResult.prAnalysis.recommendation === 'wait_for_merge'
+                          ? 'text-green-500'
+                          : validationResult.prAnalysis.recommendation === 'pr_needs_work'
+                            ? 'text-yellow-500'
+                            : 'text-purple-500'
+                      )}
+                    >
+                      {validationResult.prAnalysis.recommendation === 'wait_for_merge'
+                        ? 'Fix Ready - Wait for Merge'
+                        : validationResult.prAnalysis.recommendation === 'pr_needs_work'
+                          ? 'PR Needs Work'
+                          : 'Work in Progress'}
+                    </span>
+                    {validationResult.prAnalysis.prNumber && (
+                      <p className="text-xs text-muted-foreground mt-0.5">
+                        PR #{validationResult.prAnalysis.prNumber}
+                        {validationResult.prAnalysis.prFixesIssue && ' appears to fix this issue'}
+                      </p>
+                    )}
+                    {validationResult.prAnalysis.prSummary && (
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {validationResult.prAnalysis.prSummary}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Fallback Work in Progress Badge - Show when there's an open PR but no AI analysis */}
+            {!validationResult.prAnalysis?.hasOpenPR &&
+              issue.linkedPRs?.some((pr) => pr.state === 'open' || pr.state === 'OPEN') && (
+                <div className="flex items-center gap-2 p-3 rounded-lg bg-purple-500/10 border border-purple-500/20">
+                  <GitPullRequest className="h-5 w-5 text-purple-500 shrink-0" />
+                  <div className="flex-1">
+                    <span className="text-sm font-medium text-purple-500">Work in Progress</span>
+                    <p className="text-xs text-muted-foreground mt-0.5">
+                      {issue.linkedPRs
+                        .filter((pr) => pr.state === 'open' || pr.state === 'OPEN')
+                        .map((pr) => `PR #${pr.number}`)
+                        .join(', ')}{' '}
+                      is open for this issue
+                    </p>
+                  </div>
+                </div>
+              )}
+
+            {/* Reasoning */}
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium flex items-center gap-2">
+                <Lightbulb className="h-4 w-4 text-muted-foreground" />
+                Analysis
+              </h4>
+              <div className="bg-muted/30 p-3 rounded-lg border border-border">
+                <Markdown>{validationResult.reasoning}</Markdown>
+              </div>
+            </div>
+
+            {/* Related Files */}
+            {validationResult.relatedFiles && validationResult.relatedFiles.length > 0 && (
+              <div className="space-y-2">
+                <h4 className="text-sm font-medium flex items-center gap-2">
+                  <FileCode className="h-4 w-4 text-muted-foreground" />
+                  Related Files
+                </h4>
+                <div className="space-y-1">
+                  {validationResult.relatedFiles.map((file, index) => (
+                    <div
+                      key={index}
+                      className="text-sm font-mono bg-muted/50 px-2 py-1 rounded text-muted-foreground"
+                    >
+                      {file}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Suggested Fix */}
+            {validationResult.suggestedFix && (
+              <div className="space-y-2">
+                <h4 className="text-sm font-medium">Suggested Approach</h4>
+                <div className="bg-muted/30 p-3 rounded-lg border border-border">
+                  <Markdown>{validationResult.suggestedFix}</Markdown>
+                </div>
+              </div>
+            )}
+
+            {/* Missing Info (for needs_clarification) */}
+            {validationResult.missingInfo && validationResult.missingInfo.length > 0 && (
+              <div className="space-y-2">
+                <h4 className="text-sm font-medium flex items-center gap-2">
+                  <AlertCircle className="h-4 w-4 text-yellow-500" />
+                  Missing Information
+                </h4>
+                <ul className="space-y-1 list-disc list-inside">
+                  {validationResult.missingInfo.map((info, index) => (
+                    <li key={index} className="text-sm text-muted-foreground">
+                      {info}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <AlertCircle className="h-8 w-8 text-muted-foreground mb-4" />
+            <p className="text-sm text-muted-foreground">No validation result available.</p>
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+          {validationResult?.verdict === 'valid' &&
+            onConvertToTask &&
+            validationResult?.prAnalysis?.recommendation !== 'wait_for_merge' && (
+              <Button onClick={handleConvertToTask}>
+                <Plus className="h-4 w-4 mr-2" />
+                Convert to Task
+              </Button>
+            )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/hooks/index.ts b/temp_repo/apps/ui/src/components/views/github-issues-view/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a03332adc1e7ab049f110c37663fa62b2fca6676
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/hooks/index.ts
@@ -0,0 +1,4 @@
+export { useGithubIssues } from './use-github-issues';
+export { useIssueValidation } from './use-issue-validation';
+export { useIssueComments } from './use-issue-comments';
+export { useIssuesFilter } from './use-issues-filter';
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/hooks/use-github-issues.ts b/temp_repo/apps/ui/src/components/views/github-issues-view/hooks/use-github-issues.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a97667f1d273e8703e2658f738b707687dc4f05d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/hooks/use-github-issues.ts
@@ -0,0 +1,29 @@
+/**
+ * GitHub Issues Hook
+ *
+ * React Query-based hook for fetching GitHub issues.
+ */
+
+import { useAppStore } from '@/store/app-store';
+import { useGitHubIssues as useGitHubIssuesQuery } from '@/hooks/queries';
+
+export function useGithubIssues() {
+  const { currentProject } = useAppStore();
+
+  const {
+    data,
+    isLoading: loading,
+    isFetching: refreshing,
+    error,
+    refetch: refresh,
+  } = useGitHubIssuesQuery(currentProject?.path);
+
+  return {
+    openIssues: data?.openIssues ?? [],
+    closedIssues: data?.closedIssues ?? [],
+    loading,
+    refreshing,
+    error: error instanceof Error ? error.message : error ? String(error) : null,
+    refresh,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/hooks/use-issue-comments.ts b/temp_repo/apps/ui/src/components/views/github-issues-view/hooks/use-issue-comments.ts
new file mode 100644
index 0000000000000000000000000000000000000000..44f36ac8768b51f1ef622d80412d2a5a742fdf69
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/hooks/use-issue-comments.ts
@@ -0,0 +1,52 @@
+import { useMemo, useCallback } from 'react';
+import type { GitHubComment } from '@/lib/electron';
+import { useAppStore } from '@/store/app-store';
+import { useGitHubIssueComments } from '@/hooks/queries';
+
+interface UseIssueCommentsResult {
+  comments: GitHubComment[];
+  totalCount: number;
+  loading: boolean;
+  loadingMore: boolean;
+  hasNextPage: boolean;
+  error: string | null;
+  loadMore: () => void;
+  refresh: () => void;
+}
+
+export function useIssueComments(issueNumber: number | null): UseIssueCommentsResult {
+  const { currentProject } = useAppStore();
+
+  // Use React Query infinite query
+  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage, refetch, error } =
+    useGitHubIssueComments(currentProject?.path, issueNumber ?? undefined);
+
+  // Flatten all pages into a single comments array
+  const comments = useMemo(() => {
+    return data?.pages.flatMap((page) => page.comments) ?? [];
+  }, [data?.pages]);
+
+  // Get total count from the first page
+  const totalCount = data?.pages[0]?.totalCount ?? 0;
+
+  const loadMore = useCallback(() => {
+    if (hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  const refresh = useCallback(() => {
+    refetch();
+  }, [refetch]);
+
+  return {
+    comments,
+    totalCount,
+    loading: isLoading,
+    loadingMore: isFetchingNextPage,
+    hasNextPage: hasNextPage ?? false,
+    error: error instanceof Error ? error.message : null,
+    loadMore,
+    refresh,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/hooks/use-issue-validation.ts b/temp_repo/apps/ui/src/components/views/github-issues-view/hooks/use-issue-validation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..be87ebff90c8d85a3f7ef5ad14067ce04eef34fb
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/hooks/use-issue-validation.ts
@@ -0,0 +1,336 @@
+// @ts-nocheck - GitHub issue validation with Electron API integration and async state
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import {
+  getElectronAPI,
+  GitHubIssue,
+  GitHubComment,
+  IssueValidationResult,
+  IssueValidationEvent,
+  StoredValidation,
+} from '@/lib/electron';
+import type { LinkedPRInfo, PhaseModelEntry, ModelId } from '@automaker/types';
+import { useAppStore } from '@/store/app-store';
+import { toast } from 'sonner';
+import { isValidationStale } from '../utils';
+import { useValidateIssue, useMarkValidationViewed } from '@/hooks/mutations';
+
+const logger = createLogger('IssueValidation');
+
+interface UseIssueValidationOptions {
+  selectedIssue: GitHubIssue | null;
+  showValidationDialog: boolean;
+  onValidationResultChange: (result: IssueValidationResult | null) => void;
+  onShowValidationDialogChange: (show: boolean) => void;
+}
+
+export function useIssueValidation({
+  selectedIssue,
+  showValidationDialog,
+  onValidationResultChange,
+  onShowValidationDialogChange,
+}: UseIssueValidationOptions) {
+  const { currentProject, phaseModels, muteDoneSound } = useAppStore();
+  const [validatingIssues, setValidatingIssues] = useState<Set<number>>(new Set());
+  const [cachedValidations, setCachedValidations] = useState<Map<number, StoredValidation>>(
+    new Map()
+  );
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  // React Query mutations
+  const validateIssueMutation = useValidateIssue(currentProject?.path ?? '');
+  const markViewedMutation = useMarkValidationViewed(currentProject?.path ?? '');
+  // Refs for stable event handler (avoids re-subscribing on state changes)
+  const selectedIssueRef = useRef<GitHubIssue | null>(null);
+  const showValidationDialogRef = useRef(false);
+
+  // Keep refs in sync with state for stable event handler
+  useEffect(() => {
+    selectedIssueRef.current = selectedIssue;
+  }, [selectedIssue]);
+
+  useEffect(() => {
+    showValidationDialogRef.current = showValidationDialog;
+  }, [showValidationDialog]);
+
+  // Load cached validations on mount
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadCachedValidations = async () => {
+      if (!currentProject?.path) return;
+
+      try {
+        const api = getElectronAPI();
+        if (api.github?.getValidations) {
+          const result = await api.github.getValidations(currentProject.path);
+          if (isMounted && result.success && result.validations) {
+            const map = new Map<number, StoredValidation>();
+            for (const v of result.validations) {
+              map.set(v.issueNumber, v);
+            }
+            setCachedValidations(map);
+          }
+        }
+      } catch (err) {
+        if (isMounted) {
+          logger.error('Failed to load cached validations:', err);
+        }
+      }
+    };
+
+    loadCachedValidations();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [currentProject?.path]);
+
+  // Load running validations on mount (restore validatingIssues state)
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadRunningValidations = async () => {
+      if (!currentProject?.path) return;
+
+      try {
+        const api = getElectronAPI();
+        if (api.github?.getValidationStatus) {
+          const result = await api.github.getValidationStatus(currentProject.path);
+          if (isMounted && result.success && result.runningIssues) {
+            setValidatingIssues(new Set(result.runningIssues));
+          }
+        }
+      } catch (err) {
+        if (isMounted) {
+          logger.error('Failed to load running validations:', err);
+        }
+      }
+    };
+
+    loadRunningValidations();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [currentProject?.path]);
+
+  // Subscribe to validation events
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api.github?.onValidationEvent) return;
+
+    const handleValidationEvent = (event: IssueValidationEvent) => {
+      // Only handle events for current project
+      if (event.projectPath !== currentProject?.path) return;
+
+      switch (event.type) {
+        case 'issue_validation_start':
+          setValidatingIssues((prev) => new Set([...prev, event.issueNumber]));
+          break;
+
+        case 'issue_validation_complete':
+          setValidatingIssues((prev) => {
+            const next = new Set(prev);
+            next.delete(event.issueNumber);
+            return next;
+          });
+
+          // Update cached validations (use event.model to avoid stale closure race condition)
+          setCachedValidations((prev) => {
+            const next = new Map(prev);
+            next.set(event.issueNumber, {
+              issueNumber: event.issueNumber,
+              issueTitle: event.issueTitle,
+              validatedAt: new Date().toISOString(),
+              model: event.model,
+              result: event.result,
+            });
+            return next;
+          });
+
+          // Show toast notification
+          toast.success(`Issue #${event.issueNumber} validated: ${event.result.verdict}`, {
+            description:
+              event.result.verdict === 'valid'
+                ? 'Issue is ready to be converted to a task'
+                : event.result.verdict === 'invalid'
+                  ? 'Issue may have problems'
+                  : 'Issue needs clarification',
+          });
+
+          // Play audio notification (if not muted)
+          if (!muteDoneSound) {
+            try {
+              if (!audioRef.current) {
+                audioRef.current = new Audio('/sounds/ding.mp3');
+              }
+              audioRef.current.play().catch(() => {
+                // Audio play might fail due to browser restrictions
+              });
+            } catch {
+              // Ignore audio errors
+            }
+          }
+
+          // If validation dialog is open for this issue, update the result
+          if (
+            selectedIssueRef.current?.number === event.issueNumber &&
+            showValidationDialogRef.current
+          ) {
+            onValidationResultChange(event.result);
+          }
+          break;
+
+        case 'issue_validation_error':
+          setValidatingIssues((prev) => {
+            const next = new Set(prev);
+            next.delete(event.issueNumber);
+            return next;
+          });
+          toast.error(`Validation failed for issue #${event.issueNumber}`, {
+            description: event.error,
+          });
+          if (
+            selectedIssueRef.current?.number === event.issueNumber &&
+            showValidationDialogRef.current
+          ) {
+            onShowValidationDialogChange(false);
+          }
+          break;
+      }
+    };
+
+    const unsubscribe = api.github.onValidationEvent(handleValidationEvent);
+    return () => unsubscribe();
+  }, [currentProject?.path, muteDoneSound, onValidationResultChange, onShowValidationDialogChange]);
+
+  // Cleanup audio element on unmount to prevent memory leaks
+  useEffect(() => {
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current = null;
+      }
+    };
+  }, []);
+
+  const handleValidateIssue = useCallback(
+    async (
+      issue: GitHubIssue,
+      options: {
+        forceRevalidate?: boolean;
+        model?: ModelId | PhaseModelEntry; // Accept either model ID (backward compat) or PhaseModelEntry
+        modelEntry?: PhaseModelEntry; // New preferred way to pass model with thinking/reasoning
+        comments?: GitHubComment[];
+        linkedPRs?: LinkedPRInfo[];
+      } = {}
+    ) => {
+      const { forceRevalidate = false, model, modelEntry, comments, linkedPRs } = options;
+
+      if (!currentProject?.path) {
+        toast.error('No project selected');
+        return;
+      }
+
+      // Check if already validating this issue
+      if (validatingIssues.has(issue.number) || validateIssueMutation.isPending) {
+        toast.info(`Validation already in progress for issue #${issue.number}`);
+        return;
+      }
+
+      // Check for cached result - if fresh, show it directly (unless force revalidate)
+      const cached = cachedValidations.get(issue.number);
+      if (cached && !forceRevalidate && !isValidationStale(cached.validatedAt)) {
+        // Show cached result directly
+        onValidationResultChange(cached.result);
+        onShowValidationDialogChange(true);
+        return;
+      }
+
+      // Use provided model override or fall back to phaseModels.validationModel
+      // Extract model string and thinking level from PhaseModelEntry (handles both old string format and new object format)
+      const effectiveModelEntry = modelEntry
+        ? modelEntry
+        : model
+          ? typeof model === 'string'
+            ? { model: model as ModelId }
+            : model
+          : phaseModels.validationModel;
+      const normalizedEntry =
+        typeof effectiveModelEntry === 'string'
+          ? { model: effectiveModelEntry as ModelId }
+          : effectiveModelEntry;
+      const modelToUse = normalizedEntry.model;
+      const thinkingLevelToUse = normalizedEntry.thinkingLevel;
+      const reasoningEffortToUse = normalizedEntry.reasoningEffort;
+      const providerIdToUse = normalizedEntry.providerId;
+
+      // Use mutation to trigger validation (toast is handled by mutation)
+      validateIssueMutation.mutate({
+        issue,
+        model: modelToUse,
+        thinkingLevel: thinkingLevelToUse,
+        reasoningEffort: reasoningEffortToUse,
+        providerId: providerIdToUse,
+        comments,
+        linkedPRs,
+      });
+    },
+    [
+      currentProject?.path,
+      validatingIssues,
+      cachedValidations,
+      phaseModels.validationModel,
+      validateIssueMutation,
+      onValidationResultChange,
+      onShowValidationDialogChange,
+    ]
+  );
+
+  // View cached validation result
+  const handleViewCachedValidation = useCallback(
+    async (issue: GitHubIssue) => {
+      const cached = cachedValidations.get(issue.number);
+      if (cached) {
+        onValidationResultChange(cached.result);
+        onShowValidationDialogChange(true);
+
+        // Mark as viewed if not already viewed
+        if (!cached.viewedAt && currentProject?.path) {
+          markViewedMutation.mutate(issue.number, {
+            onSuccess: () => {
+              // Update local state
+              setCachedValidations((prev) => {
+                const next = new Map(prev);
+                const updated = prev.get(issue.number);
+                if (updated) {
+                  next.set(issue.number, {
+                    ...updated,
+                    viewedAt: new Date().toISOString(),
+                  });
+                }
+                return next;
+              });
+            },
+          });
+        }
+      }
+    },
+    [
+      cachedValidations,
+      currentProject?.path,
+      markViewedMutation,
+      onValidationResultChange,
+      onShowValidationDialogChange,
+    ]
+  );
+
+  return {
+    validatingIssues,
+    cachedValidations,
+    handleValidateIssue,
+    handleViewCachedValidation,
+    isValidating: validateIssueMutation.isPending,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/hooks/use-issues-filter.ts b/temp_repo/apps/ui/src/components/views/github-issues-view/hooks/use-issues-filter.ts
new file mode 100644
index 0000000000000000000000000000000000000000..90a1672929786cbc472f0bc29a6d2fc1f0869750
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/hooks/use-issues-filter.ts
@@ -0,0 +1,241 @@
+import { useMemo } from 'react';
+import type { GitHubIssue, StoredValidation } from '@/lib/electron';
+import type { IssuesFilterState, IssuesFilterResult, IssuesValidationStatus } from '../types';
+import { isValidationStale } from '../utils';
+
+/**
+ * Determines the validation status of an issue based on its cached validation.
+ */
+function getValidationStatus(
+  issueNumber: number,
+  cachedValidations: Map<number, StoredValidation>
+): IssuesValidationStatus | null {
+  const validation = cachedValidations.get(issueNumber);
+  if (!validation) {
+    return 'not_validated';
+  }
+  if (isValidationStale(validation.validatedAt)) {
+    return 'stale';
+  }
+  return 'validated';
+}
+
+/**
+ * Checks if a search query matches an issue's searchable content.
+ * Searches through title and body (case-insensitive).
+ */
+function matchesSearchQuery(issue: GitHubIssue, normalizedQuery: string): boolean {
+  if (!normalizedQuery) return true;
+
+  const titleMatch = issue.title?.toLowerCase().includes(normalizedQuery);
+  const bodyMatch = issue.body?.toLowerCase().includes(normalizedQuery);
+
+  return titleMatch || bodyMatch;
+}
+
+/**
+ * Checks if an issue matches the state filter (open/closed/all).
+ * Note: GitHub CLI returns state in uppercase (OPEN/CLOSED), so we compare case-insensitively.
+ */
+function matchesStateFilter(
+  issue: GitHubIssue,
+  stateFilter: IssuesFilterState['stateFilter']
+): boolean {
+  if (stateFilter === 'all') return true;
+  return issue.state.toLowerCase() === stateFilter;
+}
+
+/**
+ * Checks if an issue matches any of the selected labels.
+ * Returns true if no labels are selected (no filter) or if any selected label matches.
+ */
+function matchesLabels(issue: GitHubIssue, selectedLabels: string[]): boolean {
+  if (selectedLabels.length === 0) return true;
+
+  const issueLabels = issue.labels.map((l) => l.name);
+  return selectedLabels.some((label) => issueLabels.includes(label));
+}
+
+/**
+ * Checks if an issue matches any of the selected assignees.
+ * Returns true if no assignees are selected (no filter) or if any selected assignee matches.
+ */
+function matchesAssignees(issue: GitHubIssue, selectedAssignees: string[]): boolean {
+  if (selectedAssignees.length === 0) return true;
+
+  const issueAssignees = issue.assignees?.map((a) => a.login) ?? [];
+  return selectedAssignees.some((assignee) => issueAssignees.includes(assignee));
+}
+
+/**
+ * Checks if an issue matches any of the selected milestones.
+ * Returns true if no milestones are selected (no filter) or if any selected milestone matches.
+ * Note: GitHub issues may not have milestone data in the current schema, this is a placeholder.
+ */
+function matchesMilestones(issue: GitHubIssue, selectedMilestones: string[]): boolean {
+  if (selectedMilestones.length === 0) return true;
+
+  // GitHub issues in the current schema don't have milestone field
+  // This is a placeholder for future milestone support
+  // For now, issues with no milestone won't match if a milestone filter is active
+  return false;
+}
+
+/**
+ * Checks if an issue matches the validation status filter.
+ */
+function matchesValidationStatus(
+  issue: GitHubIssue,
+  validationStatusFilter: IssuesValidationStatus | null,
+  cachedValidations: Map<number, StoredValidation>
+): boolean {
+  if (!validationStatusFilter) return true;
+
+  const status = getValidationStatus(issue.number, cachedValidations);
+  return status === validationStatusFilter;
+}
+
+/**
+ * Extracts all unique labels from a list of issues.
+ */
+function extractAvailableLabels(issues: GitHubIssue[]): string[] {
+  const labelsSet = new Set<string>();
+  for (const issue of issues) {
+    for (const label of issue.labels) {
+      labelsSet.add(label.name);
+    }
+  }
+  return Array.from(labelsSet).sort();
+}
+
+/**
+ * Extracts all unique assignees from a list of issues.
+ */
+function extractAvailableAssignees(issues: GitHubIssue[]): string[] {
+  const assigneesSet = new Set<string>();
+  for (const issue of issues) {
+    for (const assignee of issue.assignees ?? []) {
+      assigneesSet.add(assignee.login);
+    }
+  }
+  return Array.from(assigneesSet).sort();
+}
+
+/**
+ * Extracts all unique milestones from a list of issues.
+ * Note: Currently returns empty array as milestone is not in the GitHubIssue schema.
+ */
+function extractAvailableMilestones(_issues: GitHubIssue[]): string[] {
+  // GitHub issues in the current schema don't have milestone field
+  // This is a placeholder for future milestone support
+  return [];
+}
+
+/**
+ * Determines if any filter is currently active.
+ */
+function hasActiveFilterCheck(filterState: IssuesFilterState): boolean {
+  const {
+    searchQuery,
+    stateFilter,
+    selectedLabels,
+    selectedAssignees,
+    selectedMilestones,
+    validationStatusFilter,
+  } = filterState;
+
+  // Note: stateFilter 'open' is the default, so we consider it "not active" for UI purposes
+  // Only 'closed' or 'all' are considered active filters
+  const hasStateFilter = stateFilter !== 'open';
+  const hasSearchQuery = searchQuery.trim().length > 0;
+  const hasLabelFilter = selectedLabels.length > 0;
+  const hasAssigneeFilter = selectedAssignees.length > 0;
+  const hasMilestoneFilter = selectedMilestones.length > 0;
+  const hasValidationFilter = validationStatusFilter !== null;
+
+  return (
+    hasSearchQuery ||
+    hasStateFilter ||
+    hasLabelFilter ||
+    hasAssigneeFilter ||
+    hasMilestoneFilter ||
+    hasValidationFilter
+  );
+}
+
+/**
+ * Hook to filter GitHub issues based on the current filter state.
+ *
+ * This hook follows the same pattern as useGraphFilter but is tailored for GitHub issues.
+ * It computes matched issues and extracts available filter options from all issues.
+ *
+ * @param issues - Combined array of all issues (open + closed) to filter
+ * @param filterState - Current filter state including search, labels, assignees, etc.
+ * @param cachedValidations - Map of issue numbers to their cached validation results
+ * @returns Filter result containing matched issue numbers and available filter options
+ */
+export function useIssuesFilter(
+  issues: GitHubIssue[],
+  filterState: IssuesFilterState,
+  cachedValidations: Map<number, StoredValidation> = new Map()
+): IssuesFilterResult {
+  const {
+    searchQuery,
+    stateFilter,
+    selectedLabels,
+    selectedAssignees,
+    selectedMilestones,
+    validationStatusFilter,
+  } = filterState;
+
+  return useMemo(() => {
+    // Extract available options from all issues (for filter dropdown population)
+    const availableLabels = extractAvailableLabels(issues);
+    const availableAssignees = extractAvailableAssignees(issues);
+    const availableMilestones = extractAvailableMilestones(issues);
+
+    // Check if any filter is active
+    const hasActiveFilter = hasActiveFilterCheck(filterState);
+
+    // Normalize search query for case-insensitive matching
+    const normalizedQuery = searchQuery.toLowerCase().trim();
+
+    // Filter issues based on all criteria - return matched issues directly
+    // This eliminates the redundant O(n) filtering operation in the consuming component
+    const matchedIssues: GitHubIssue[] = [];
+
+    for (const issue of issues) {
+      // All conditions must be true for a match
+      const matchesAllFilters =
+        matchesSearchQuery(issue, normalizedQuery) &&
+        matchesStateFilter(issue, stateFilter) &&
+        matchesLabels(issue, selectedLabels) &&
+        matchesAssignees(issue, selectedAssignees) &&
+        matchesMilestones(issue, selectedMilestones) &&
+        matchesValidationStatus(issue, validationStatusFilter, cachedValidations);
+
+      if (matchesAllFilters) {
+        matchedIssues.push(issue);
+      }
+    }
+
+    return {
+      matchedIssues,
+      availableLabels,
+      availableAssignees,
+      availableMilestones,
+      hasActiveFilter,
+      matchedCount: matchedIssues.length,
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- filterState destructured to individual deps
+  }, [
+    issues,
+    searchQuery,
+    stateFilter,
+    selectedLabels,
+    selectedAssignees,
+    selectedMilestones,
+    validationStatusFilter,
+    cachedValidations,
+  ]);
+}
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/types.ts b/temp_repo/apps/ui/src/components/views/github-issues-view/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..200dde982755825708ab7d564d64fe27c4f70f78
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/types.ts
@@ -0,0 +1,153 @@
+import type { GitHubIssue, StoredValidation, GitHubComment } from '@/lib/electron';
+import type { ModelId, LinkedPRInfo, PhaseModelEntry } from '@automaker/types';
+
+// ============================================================================
+// Issues Filter State Types
+// ============================================================================
+
+/**
+ * Available sort columns for issues list
+ */
+export const ISSUES_SORT_COLUMNS = [
+  'title',
+  'created_at',
+  'updated_at',
+  'comments',
+  'number',
+] as const;
+
+export type IssuesSortColumn = (typeof ISSUES_SORT_COLUMNS)[number];
+
+/**
+ * Sort direction options
+ */
+export type IssuesSortDirection = 'asc' | 'desc';
+
+/**
+ * Available issue state filter values
+ */
+export const ISSUES_STATE_FILTER_OPTIONS = ['open', 'closed', 'all'] as const;
+
+export type IssuesStateFilter = (typeof ISSUES_STATE_FILTER_OPTIONS)[number];
+
+/**
+ * Validation status filter values for filtering issues by validation state
+ */
+export const ISSUES_VALIDATION_STATUS_OPTIONS = ['validated', 'not_validated', 'stale'] as const;
+
+export type IssuesValidationStatus = (typeof ISSUES_VALIDATION_STATUS_OPTIONS)[number];
+
+/**
+ * Sort configuration for issues list
+ */
+export interface IssuesSortConfig {
+  column: IssuesSortColumn;
+  direction: IssuesSortDirection;
+}
+
+/**
+ * Main filter state interface for the GitHub Issues view
+ *
+ * This interface defines all filterable/sortable state for the issues list.
+ * It follows the same pattern as GraphFilterState but is tailored for GitHub issues.
+ */
+export interface IssuesFilterState {
+  /** Search query for filtering by issue title or body */
+  searchQuery: string;
+  /** Filter by issue state (open/closed/all) */
+  stateFilter: IssuesStateFilter;
+  /** Filter by selected labels (matches any) */
+  selectedLabels: string[];
+  /** Filter by selected assignees (matches any) */
+  selectedAssignees: string[];
+  /** Filter by selected milestones (matches any) */
+  selectedMilestones: string[];
+  /** Filter by validation status */
+  validationStatusFilter: IssuesValidationStatus | null;
+  /** Current sort configuration */
+  sortConfig: IssuesSortConfig;
+}
+
+/**
+ * Result of applying filters to the issues list
+ */
+export interface IssuesFilterResult {
+  /** Array of GitHubIssue objects that match the current filters */
+  matchedIssues: GitHubIssue[];
+  /** Available labels from all issues (for filter dropdown population) */
+  availableLabels: string[];
+  /** Available assignees from all issues (for filter dropdown population) */
+  availableAssignees: string[];
+  /** Available milestones from all issues (for filter dropdown population) */
+  availableMilestones: string[];
+  /** Whether any filter is currently active */
+  hasActiveFilter: boolean;
+  /** Total count of matched issues */
+  matchedCount: number;
+}
+
+/**
+ * Default values for IssuesFilterState
+ */
+export const DEFAULT_ISSUES_FILTER_STATE: IssuesFilterState = {
+  searchQuery: '',
+  stateFilter: 'open',
+  selectedLabels: [],
+  selectedAssignees: [],
+  selectedMilestones: [],
+  validationStatusFilter: null,
+  sortConfig: {
+    column: 'updated_at',
+    direction: 'desc',
+  },
+};
+
+// ============================================================================
+// Component Props Types
+// ============================================================================
+
+export interface IssueRowProps {
+  issue: GitHubIssue;
+  isSelected: boolean;
+  onClick: () => void;
+  onOpenExternal: () => void;
+  formatDate: (date: string) => string;
+  /** Cached validation for this issue (if any) */
+  cachedValidation?: StoredValidation | null;
+  /** Whether validation is currently running for this issue */
+  isValidating?: boolean;
+}
+
+/** Options for issue validation */
+export interface ValidateIssueOptions {
+  showDialog?: boolean;
+  forceRevalidate?: boolean;
+  /** Include comments in AI analysis */
+  comments?: GitHubComment[];
+  /** Linked pull requests */
+  linkedPRs?: LinkedPRInfo[];
+}
+
+export interface IssueDetailPanelProps {
+  issue: GitHubIssue;
+  validatingIssues: Set<number>;
+  cachedValidations: Map<number, StoredValidation>;
+  onValidateIssue: (issue: GitHubIssue, options?: ValidateIssueOptions) => Promise<void>;
+  onViewCachedValidation: (issue: GitHubIssue) => Promise<void>;
+  onOpenInGitHub: (url: string) => void;
+  onClose: () => void;
+  /** Called when user wants to revalidate - receives the validation options including comments/linkedPRs */
+  onShowRevalidateConfirm: (options: ValidateIssueOptions) => void;
+  /** Called when user wants to create a feature to address this issue */
+  onCreateFeature: (issue: GitHubIssue) => void;
+  formatDate: (date: string) => string;
+  /** Model override state */
+  modelOverride: {
+    effectiveModelEntry: PhaseModelEntry;
+    effectiveModel: ModelId;
+    isOverridden: boolean;
+    setOverride: (entry: PhaseModelEntry | null) => void;
+  };
+  /** Whether the view is in mobile mode - shows back button and full-screen detail */
+  isMobile?: boolean;
+}
diff --git a/temp_repo/apps/ui/src/components/views/github-issues-view/utils.ts b/temp_repo/apps/ui/src/components/views/github-issues-view/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ad3133173f711f0ae2dedc8506a401ab0f23a4d8
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-issues-view/utils.ts
@@ -0,0 +1,33 @@
+import type { IssueComplexity } from '@/lib/electron';
+import { VALIDATION_STALENESS_HOURS } from './constants';
+
+/**
+ * Map issue complexity to feature priority.
+ * Lower complexity issues get higher priority (1 = high, 2 = medium).
+ */
+export function getFeaturePriority(complexity: IssueComplexity | undefined): number {
+  switch (complexity) {
+    case 'trivial':
+    case 'simple':
+      return 1; // High priority for easy wins
+    case 'moderate':
+    case 'complex':
+    case 'very_complex':
+    default:
+      return 2; // Medium priority for larger efforts
+  }
+}
+
+export function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+export function isValidationStale(validatedAt: string): boolean {
+  const hoursSinceValidation = (Date.now() - new Date(validatedAt).getTime()) / (1000 * 60 * 60);
+  return hoursSinceValidation > VALIDATION_STALENESS_HOURS;
+}
diff --git a/temp_repo/apps/ui/src/components/views/github-prs-view.tsx b/temp_repo/apps/ui/src/components/views/github-prs-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6ea53826a19eb2628c7025dcd93d31de695a8ffe
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/github-prs-view.tsx
@@ -0,0 +1,591 @@
+/**
+ * GitHub PRs View
+ *
+ * Displays pull requests using React Query for data fetching.
+ */
+
+import { useState, useCallback } from 'react';
+import {
+  GitPullRequest,
+  RefreshCw,
+  ExternalLink,
+  GitMerge,
+  X,
+  MessageSquare,
+  MoreHorizontal,
+  Zap,
+  ArrowLeft,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getElectronAPI, type GitHubPR } from '@/lib/electron';
+import { useAppStore, type Feature } from '@/store/app-store';
+import { Button } from '@/components/ui/button';
+import { Markdown } from '@/components/ui/markdown';
+import { cn, generateUUID } from '@/lib/utils';
+import { useIsMobile } from '@/hooks/use-media-query';
+import { useGitHubPRs } from '@/hooks/queries';
+import { useCreateFeature } from '@/hooks/mutations/use-feature-mutations';
+import { PRCommentResolutionDialog } from '@/components/dialogs';
+import { resolveModelString } from '@automaker/model-resolver';
+import { toast } from 'sonner';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+export function GitHubPRsView() {
+  const [selectedPR, setSelectedPR] = useState<GitHubPR | null>(null);
+  const [commentDialogPR, setCommentDialogPR] = useState<GitHubPR | null>(null);
+  const { currentProject, getEffectiveUseWorktrees } = useAppStore();
+  const isMobile = useIsMobile();
+
+  const {
+    data,
+    isLoading: loading,
+    isFetching: refreshing,
+    error,
+    refetch,
+  } = useGitHubPRs(currentProject?.path);
+
+  const openPRs = data?.openPRs ?? [];
+  const mergedPRs = data?.mergedPRs ?? [];
+
+  const handleRefresh = useCallback(() => {
+    refetch();
+  }, [refetch]);
+
+  const handleOpenInGitHub = useCallback((url: string) => {
+    const api = getElectronAPI();
+    api.openExternalLink(url);
+  }, []);
+
+  const createFeature = useCreateFeature(currentProject?.path ?? '');
+
+  const handleAutoAddressComments = useCallback(
+    async (pr: GitHubPR) => {
+      if (!pr.number || !currentProject?.path) {
+        toast.error('Cannot address PR comments', {
+          description: 'No PR number or project available.',
+        });
+        return;
+      }
+
+      const featureId = `pr-${pr.number}-${generateUUID()}`;
+      const feature: Feature = {
+        id: featureId,
+        title: `Address PR #${pr.number} Review Comments`,
+        category: 'bug-fix',
+        description: `Read the review requests on PR #${pr.number} and address any feedback the best you can.`,
+        steps: [],
+        status: 'backlog',
+        model: resolveModelString('opus'),
+        thinkingLevel: 'none',
+        planningMode: 'skip',
+        requirePlanApproval: false,
+        dependencies: [],
+        ...(pr.url ? { prUrl: pr.url } : {}),
+        ...(pr.headRefName ? { branchName: pr.headRefName } : {}),
+      };
+
+      try {
+        await createFeature.mutateAsync(feature);
+
+        // Start the feature immediately after creation
+        const api = getElectronAPI();
+        if (api.autoMode?.runFeature) {
+          try {
+            await api.autoMode.runFeature(
+              currentProject.path,
+              featureId,
+              getEffectiveUseWorktrees(currentProject.path)
+            );
+            toast.success('Feature created and started', {
+              description: `Addressing review comments on PR #${pr.number}`,
+            });
+          } catch (runError) {
+            toast.error('Feature created but failed to start', {
+              description:
+                runError instanceof Error
+                  ? runError.message
+                  : 'An error occurred while starting the feature',
+            });
+          }
+        } else {
+          toast.error('Cannot start feature', {
+            description:
+              'Feature API is not available. The feature was created but could not be started.',
+          });
+        }
+      } catch (error) {
+        toast.error('Failed to create feature', {
+          description: error instanceof Error ? error.message : 'An error occurred',
+        });
+      }
+    },
+    [currentProject, createFeature, getEffectiveUseWorktrees]
+  );
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  const getReviewStatus = (pr: GitHubPR) => {
+    if (pr.isDraft) return { label: 'Draft', color: 'text-muted-foreground', bg: 'bg-muted' };
+    switch (pr.reviewDecision) {
+      case 'APPROVED':
+        return { label: 'Approved', color: 'text-green-500', bg: 'bg-green-500/10' };
+      case 'CHANGES_REQUESTED':
+        return { label: 'Changes requested', color: 'text-orange-500', bg: 'bg-orange-500/10' };
+      case 'REVIEW_REQUIRED':
+        return { label: 'Review required', color: 'text-yellow-500', bg: 'bg-yellow-500/10' };
+      default:
+        return null;
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <Spinner size="xl" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
+        <div className="p-4 rounded-full bg-destructive/10 mb-4">
+          <GitPullRequest className="h-12 w-12 text-destructive" />
+        </div>
+        <h2 className="text-lg font-medium mb-2">Failed to Load Pull Requests</h2>
+        <p className="text-muted-foreground max-w-md mb-4">
+          {error instanceof Error ? error.message : 'Failed to fetch pull requests'}
+        </p>
+        <Button variant="outline" onClick={handleRefresh}>
+          <RefreshCw className="h-4 w-4 mr-2" />
+          Try Again
+        </Button>
+      </div>
+    );
+  }
+
+  const totalPRs = openPRs.length + mergedPRs.length;
+
+  return (
+    <div className="flex-1 flex overflow-hidden">
+      {/* PR List - hidden on mobile when a PR is selected */}
+      <div
+        className={cn(
+          'flex flex-col overflow-hidden border-r border-border',
+          selectedPR ? 'w-80' : 'flex-1',
+          isMobile && selectedPR && 'hidden'
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-border">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-blue-500/10">
+              <GitPullRequest className="h-5 w-5 text-blue-500" />
+            </div>
+            <div>
+              <h1 className="text-lg font-bold">Pull Requests</h1>
+              <p className="text-xs text-muted-foreground">
+                {totalPRs === 0
+                  ? 'No pull requests found'
+                  : `${openPRs.length} open, ${mergedPRs.length} merged`}
+              </p>
+            </div>
+          </div>
+          <Button variant="outline" size="sm" onClick={handleRefresh} disabled={refreshing}>
+            {refreshing ? <Spinner size="sm" /> : <RefreshCw className="h-4 w-4" />}
+          </Button>
+        </div>
+
+        {/* PR List */}
+        <div className="flex-1 overflow-auto">
+          {totalPRs === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full text-center p-6">
+              <div className="p-4 rounded-full bg-muted/50 mb-4">
+                <GitPullRequest className="h-8 w-8 text-muted-foreground" />
+              </div>
+              <h2 className="text-base font-medium mb-2">No Pull Requests</h2>
+              <p className="text-sm text-muted-foreground">
+                This repository has no pull requests yet.
+              </p>
+            </div>
+          ) : (
+            <div className="divide-y divide-border">
+              {/* Open PRs */}
+              {openPRs.map((pr) => (
+                <PRRow
+                  key={pr.number}
+                  pr={pr}
+                  isSelected={selectedPR?.number === pr.number}
+                  onClick={() => setSelectedPR(pr)}
+                  onOpenExternal={() => handleOpenInGitHub(pr.url)}
+                  onManageComments={() => setCommentDialogPR(pr)}
+                  onAutoAddressComments={() => handleAutoAddressComments(pr)}
+                  formatDate={formatDate}
+                  getReviewStatus={getReviewStatus}
+                />
+              ))}
+
+              {/* Merged PRs Section */}
+              {mergedPRs.length > 0 && (
+                <>
+                  <div className="px-4 py-2 bg-muted/30 text-xs font-medium text-muted-foreground">
+                    Merged ({mergedPRs.length})
+                  </div>
+                  {mergedPRs.map((pr) => (
+                    <PRRow
+                      key={pr.number}
+                      pr={pr}
+                      isSelected={selectedPR?.number === pr.number}
+                      onClick={() => setSelectedPR(pr)}
+                      onOpenExternal={() => handleOpenInGitHub(pr.url)}
+                      onManageComments={() => setCommentDialogPR(pr)}
+                      onAutoAddressComments={() => handleAutoAddressComments(pr)}
+                      formatDate={formatDate}
+                      getReviewStatus={getReviewStatus}
+                    />
+                  ))}
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* PR Detail Panel */}
+      {selectedPR &&
+        (() => {
+          const reviewStatus = getReviewStatus(selectedPR);
+          return (
+            <div className="flex-1 flex flex-col overflow-hidden">
+              {/* Detail Header */}
+              <div className="flex items-center justify-between p-3 border-b border-border bg-muted/30 gap-2">
+                <div className="flex items-center gap-2 min-w-0">
+                  {isMobile && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setSelectedPR(null)}
+                      className="shrink-0 -ml-1"
+                    >
+                      <ArrowLeft className="h-4 w-4" />
+                    </Button>
+                  )}
+                  {selectedPR.state === 'MERGED' ? (
+                    <GitMerge className="h-4 w-4 text-purple-500 shrink-0" />
+                  ) : (
+                    <GitPullRequest className="h-4 w-4 text-green-500 shrink-0" />
+                  )}
+                  <span className="text-sm font-medium truncate">
+                    #{selectedPR.number} {selectedPR.title}
+                  </span>
+                  {selectedPR.isDraft && (
+                    <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted text-muted-foreground">
+                      Draft
+                    </span>
+                  )}
+                </div>
+                <div className={cn('flex items-center gap-2 shrink-0', isMobile && 'gap-1')}>
+                  {!isMobile && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setCommentDialogPR(selectedPR)}
+                    >
+                      <MessageSquare className="h-4 w-4 mr-1" />
+                      Manage Comments
+                    </Button>
+                  )}
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleOpenInGitHub(selectedPR.url)}
+                  >
+                    <ExternalLink className="h-4 w-4" />
+                    {!isMobile && <span className="ml-1">Open in GitHub</span>}
+                  </Button>
+                  {!isMobile && (
+                    <Button variant="ghost" size="sm" onClick={() => setSelectedPR(null)}>
+                      <X className="h-4 w-4" />
+                    </Button>
+                  )}
+                </div>
+              </div>
+
+              {/* PR Detail Content */}
+              <div className={cn('flex-1 overflow-auto', isMobile ? 'p-4' : 'p-6')}>
+                {/* Title */}
+                <h1 className="text-xl font-bold mb-2">{selectedPR.title}</h1>
+
+                {/* Meta info */}
+                <div className="flex items-center gap-3 text-sm text-muted-foreground mb-4 flex-wrap">
+                  <span
+                    className={cn(
+                      'px-2 py-0.5 rounded-full text-xs font-medium',
+                      selectedPR.state === 'MERGED'
+                        ? 'bg-purple-500/10 text-purple-500'
+                        : selectedPR.isDraft
+                          ? 'bg-muted text-muted-foreground'
+                          : 'bg-green-500/10 text-green-500'
+                    )}
+                  >
+                    {selectedPR.state === 'MERGED'
+                      ? 'Merged'
+                      : selectedPR.isDraft
+                        ? 'Draft'
+                        : 'Open'}
+                  </span>
+                  {reviewStatus && (
+                    <span
+                      className={cn(
+                        'px-2 py-0.5 rounded-full text-xs font-medium',
+                        reviewStatus.bg,
+                        reviewStatus.color
+                      )}
+                    >
+                      {reviewStatus.label}
+                    </span>
+                  )}
+                  <span>
+                    #{selectedPR.number} opened {formatDate(selectedPR.createdAt)} by{' '}
+                    <span className="font-medium text-foreground">{selectedPR.author.login}</span>
+                  </span>
+                </div>
+
+                {/* Branch info */}
+                {selectedPR.headRefName && (
+                  <div className="flex items-center gap-2 mb-4">
+                    <span className="text-xs text-muted-foreground">Branch:</span>
+                    <span className="text-xs font-mono bg-muted px-2 py-0.5 rounded">
+                      {selectedPR.headRefName}
+                    </span>
+                  </div>
+                )}
+
+                {/* Labels */}
+                {selectedPR.labels.length > 0 && (
+                  <div className="flex items-center gap-2 mb-6 flex-wrap">
+                    {selectedPR.labels.map((label) => (
+                      <span
+                        key={label.name}
+                        className="px-2 py-0.5 text-xs font-medium rounded-full"
+                        style={{
+                          backgroundColor: `#${label.color}20`,
+                          color: `#${label.color}`,
+                          border: `1px solid #${label.color}40`,
+                        }}
+                      >
+                        {label.name}
+                      </span>
+                    ))}
+                  </div>
+                )}
+
+                {/* Body */}
+                {selectedPR.body ? (
+                  <Markdown className="text-sm">{selectedPR.body}</Markdown>
+                ) : (
+                  <p className="text-sm text-muted-foreground italic">No description provided.</p>
+                )}
+
+                {/* Review Comments CTA */}
+                <div className="mt-8 p-4 rounded-lg bg-blue-500/5 border border-blue-500/20">
+                  <div className="flex items-center gap-2 mb-2">
+                    <MessageSquare className="h-4 w-4 text-blue-500" />
+                    <span className="text-sm font-medium">Review Comments</span>
+                  </div>
+                  <p className="text-sm text-muted-foreground mb-3">
+                    Manage review comments individually or let AI address all feedback
+                    automatically.
+                  </p>
+                  <div className={cn('flex gap-2', isMobile ? 'flex-col' : 'items-center')}>
+                    <Button variant="outline" onClick={() => setCommentDialogPR(selectedPR)}>
+                      <MessageSquare className="h-4 w-4 mr-2" />
+                      Manage Review Comments
+                    </Button>
+                    <Button variant="outline" onClick={() => handleAutoAddressComments(selectedPR)}>
+                      <Zap className="h-4 w-4 mr-2" />
+                      Address Review Comments
+                    </Button>
+                  </div>
+                </div>
+
+                {/* Open in GitHub CTA */}
+                <div className="mt-4 p-4 rounded-lg bg-muted/50 border border-border">
+                  <p className="text-sm text-muted-foreground mb-3">
+                    View code changes, comments, and reviews on GitHub.
+                  </p>
+                  <Button onClick={() => handleOpenInGitHub(selectedPR.url)}>
+                    <ExternalLink className="h-4 w-4 mr-2" />
+                    View Full PR on GitHub
+                  </Button>
+                </div>
+              </div>
+            </div>
+          );
+        })()}
+
+      {/* PR Comment Resolution Dialog */}
+      {commentDialogPR && (
+        <PRCommentResolutionDialog
+          open={!!commentDialogPR}
+          onOpenChange={(open) => {
+            if (!open) setCommentDialogPR(null);
+          }}
+          pr={commentDialogPR}
+        />
+      )}
+    </div>
+  );
+}
+
+interface PRRowProps {
+  pr: GitHubPR;
+  isSelected: boolean;
+  onClick: () => void;
+  onOpenExternal: () => void;
+  onManageComments: () => void;
+  onAutoAddressComments: () => void;
+  formatDate: (date: string) => string;
+  getReviewStatus: (pr: GitHubPR) => { label: string; color: string; bg: string } | null;
+}
+
+function PRRow({
+  pr,
+  isSelected,
+  onClick,
+  onOpenExternal,
+  onManageComments,
+  onAutoAddressComments,
+  formatDate,
+  getReviewStatus,
+}: PRRowProps) {
+  const reviewStatus = getReviewStatus(pr);
+
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-3 p-3 cursor-pointer hover:bg-accent/50 transition-colors',
+        isSelected && 'bg-accent'
+      )}
+      onClick={onClick}
+    >
+      {pr.state === 'MERGED' ? (
+        <GitMerge className="h-4 w-4 text-purple-500 mt-0.5 shrink-0" />
+      ) : (
+        <GitPullRequest className="h-4 w-4 text-green-500 mt-0.5 shrink-0" />
+      )}
+
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium truncate">{pr.title}</span>
+          {pr.isDraft && (
+            <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted text-muted-foreground shrink-0">
+              Draft
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2 mt-1 flex-wrap">
+          <span className="text-xs text-muted-foreground">
+            #{pr.number} opened {formatDate(pr.createdAt)} by {pr.author.login}
+          </span>
+          {pr.headRefName && (
+            <span className="text-xs text-muted-foreground font-mono bg-muted px-1 rounded">
+              {pr.headRefName}
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2 mt-2 flex-wrap">
+          {/* Review Status */}
+          {reviewStatus && (
+            <span
+              className={cn(
+                'px-1.5 py-0.5 text-[10px] font-medium rounded',
+                reviewStatus.bg,
+                reviewStatus.color
+              )}
+            >
+              {reviewStatus.label}
+            </span>
+          )}
+
+          {/* Labels */}
+          {pr.labels.map((label) => (
+            <span
+              key={label.name}
+              className="px-1.5 py-0.5 text-[10px] font-medium rounded-full"
+              style={{
+                backgroundColor: `#${label.color}20`,
+                color: `#${label.color}`,
+                border: `1px solid #${label.color}40`,
+              }}
+            >
+              {label.name}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* Actions dropdown menu */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="shrink-0 h-7 w-7 p-0"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <MoreHorizontal className="h-3.5 w-3.5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-48">
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              onManageComments();
+            }}
+            className="text-xs text-blue-500 focus:text-blue-600"
+          >
+            <MessageSquare className="h-3.5 w-3.5 mr-2" />
+            Manage PR Comments
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              onAutoAddressComments();
+            }}
+            className="text-xs text-blue-500 focus:text-blue-600"
+          >
+            <Zap className="h-3.5 w-3.5 mr-2" />
+            Address PR Comments
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              onOpenExternal();
+            }}
+            className="text-xs"
+          >
+            <ExternalLink className="h-3.5 w-3.5 mr-2" />
+            Open in GitHub
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/graph-view-page.tsx b/temp_repo/apps/ui/src/components/views/graph-view-page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cba7bb1d158c96e63a44ce488b1063aa61da7f1c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/graph-view-page.tsx
@@ -0,0 +1,668 @@
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { useAppStore, Feature, FeatureImagePath } from '@/store/app-store';
+import { useShallow } from 'zustand/react/shallow';
+import { GraphView } from './graph-view';
+import {
+  EditFeatureDialog,
+  AddFeatureDialog,
+  AgentOutputModal,
+  BacklogPlanDialog,
+} from './board-view/dialogs';
+import { useBoardFeatures, useBoardActions, useBoardPersistence } from './board-view/hooks';
+import { useWorktrees } from './board-view/worktree-panel/hooks';
+import {
+  WorktreeMobileDropdown,
+  BranchSwitchDropdown,
+} from './board-view/worktree-panel/components';
+import type { BranchInfo, WorktreeInfo } from './board-view/worktree-panel/types';
+import { useAutoMode } from '@/hooks/use-auto-mode';
+import { useSwitchBranch } from '@/hooks/mutations';
+import { pathsEqual } from '@/lib/utils';
+import { Spinner } from '@/components/ui/spinner';
+import { getElectronAPI } from '@/lib/electron';
+import { createLogger } from '@automaker/utils/logger';
+import { toast } from 'sonner';
+import type { BacklogPlanResult } from '@automaker/types';
+
+const logger = createLogger('GraphViewPage');
+
+// Stable empty array to avoid infinite loop in selector
+const EMPTY_WORKTREES: ReturnType<ReturnType<typeof useAppStore.getState>['getWorktrees']> = [];
+
+export function GraphViewPage() {
+  const {
+    currentProject,
+    updateFeature,
+    getCurrentWorktree,
+    getWorktrees,
+    setWorktrees,
+    setCurrentWorktree,
+    defaultSkipTests,
+    addFeatureUseSelectedWorktreeBranch,
+    planUseSelectedWorktreeBranch,
+    setPlanUseSelectedWorktreeBranch,
+  } = useAppStore(
+    useShallow((state) => ({
+      currentProject: state.currentProject,
+      updateFeature: state.updateFeature,
+      getCurrentWorktree: state.getCurrentWorktree,
+      getWorktrees: state.getWorktrees,
+      setWorktrees: state.setWorktrees,
+      setCurrentWorktree: state.setCurrentWorktree,
+      defaultSkipTests: state.defaultSkipTests,
+      addFeatureUseSelectedWorktreeBranch: state.addFeatureUseSelectedWorktreeBranch,
+      planUseSelectedWorktreeBranch: state.planUseSelectedWorktreeBranch,
+      setPlanUseSelectedWorktreeBranch: state.setPlanUseSelectedWorktreeBranch,
+    }))
+  );
+
+  // Ensure worktrees are loaded when landing directly on graph view
+  const { handleSelectWorktree } = useWorktrees({ projectPath: currentProject?.path ?? '' });
+
+  const worktreesByProject = useAppStore((s) => s.worktreesByProject);
+  const worktrees = useMemo(
+    () =>
+      currentProject
+        ? (worktreesByProject[currentProject.path] ?? EMPTY_WORKTREES)
+        : EMPTY_WORKTREES,
+    [currentProject, worktreesByProject]
+  );
+
+  // Load features
+  const {
+    features: hookFeatures,
+    isLoading,
+    persistedCategories,
+    loadFeatures,
+    saveCategory,
+  } = useBoardFeatures({ currentProject });
+
+  // Auto mode hook
+  const autoMode = useAutoMode();
+  const runningAutoTasks = autoMode.runningTasks;
+
+  // Search state
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Dialog states
+  const [editingFeature, setEditingFeature] = useState<Feature | null>(null);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [spawnParentFeature, setSpawnParentFeature] = useState<Feature | null>(null);
+  const [showOutputModal, setShowOutputModal] = useState(false);
+  const [outputFeature, setOutputFeature] = useState<Feature | null>(null);
+  const [showPlanDialog, setShowPlanDialog] = useState(false);
+  const [pendingBacklogPlan, setPendingBacklogPlan] = useState<BacklogPlanResult | null>(null);
+  const [isGeneratingPlan, setIsGeneratingPlan] = useState(false);
+
+  // Worktree refresh key
+  const [worktreeRefreshKey, setWorktreeRefreshKey] = useState(0);
+
+  // Get current worktree info
+  const currentWorktreeInfo = currentProject ? getCurrentWorktree(currentProject.path) : null;
+  const currentWorktreePath = currentWorktreeInfo?.path ?? null;
+
+  // Get the branch for the currently selected worktree
+  const selectedWorktree = useMemo(() => {
+    if (currentWorktreePath === null) {
+      return worktrees.find((w) => w.isMain);
+    } else {
+      return worktrees.find((w) => !w.isMain && pathsEqual(w.path, currentWorktreePath));
+    }
+  }, [worktrees, currentWorktreePath]);
+
+  const currentWorktreeBranch = selectedWorktree?.branch ?? null;
+  const selectedWorktreeBranch =
+    currentWorktreeBranch || worktrees.find((w) => w.isMain)?.branch || 'main';
+
+  const repoDefaultBranch = worktrees.find((w) => w.isMain)?.branch;
+
+  // Branch card counts
+  const branchCardCounts = useMemo(() => {
+    return hookFeatures.reduce(
+      (counts, feature) => {
+        if (feature.status !== 'completed') {
+          const branch = (feature.branchName as string | undefined) ?? repoDefaultBranch ?? 'main';
+          counts[branch] = (counts[branch] || 0) + 1;
+        }
+        return counts;
+      },
+      {} as Record<string, number>
+    );
+  }, [hookFeatures, repoDefaultBranch]);
+
+  // Graph worktree selector state
+  const [branches, setBranches] = useState<BranchInfo[]>([]);
+  const [branchFilter, setBranchFilter] = useState('');
+  const [isLoadingBranches, setIsLoadingBranches] = useState(false);
+  const switchBranchMutation = useSwitchBranch();
+  const latestLoadBranchesId = useRef(0);
+
+  const graphWorktrees = useMemo<WorktreeInfo[]>(() => {
+    return worktrees.map((worktree) => ({
+      ...worktree,
+      isCurrent: worktree.isMain
+        ? currentWorktreePath === null
+        : pathsEqual(worktree.path, currentWorktreePath ?? ''),
+      hasWorktree: worktree.hasWorktree ?? true,
+    }));
+  }, [worktrees, currentWorktreePath]);
+
+  const isWorktreeSelected = useCallback(
+    (worktree: WorktreeInfo) => {
+      return worktree.isMain
+        ? currentWorktreePath === null
+        : pathsEqual(worktree.path, currentWorktreePath ?? '');
+    },
+    [currentWorktreePath]
+  );
+
+  const selectedGraphWorktree = useMemo(
+    () => graphWorktrees.find((worktree) => isWorktreeSelected(worktree)) ?? null,
+    [graphWorktrees, isWorktreeSelected]
+  );
+
+  const filteredBranches = useMemo(() => {
+    const query = branchFilter.trim().toLowerCase();
+    if (!query) return branches;
+    return branches.filter((branch) => branch.name.toLowerCase().includes(query));
+  }, [branches, branchFilter]);
+
+  const loadBranchesForWorktree = useCallback(async (worktreePath: string) => {
+    const requestId = ++latestLoadBranchesId.current;
+    setIsLoadingBranches(true);
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.listBranches) {
+        if (requestId === latestLoadBranchesId.current) {
+          setBranches([]);
+          setIsLoadingBranches(false);
+        }
+        return;
+      }
+
+      const result = await api.worktree.listBranches(worktreePath, true);
+      if (requestId !== latestLoadBranchesId.current) return;
+
+      if (!result.success || !result.result?.branches) {
+        setBranches([]);
+        return;
+      }
+
+      setBranches(
+        result.result.branches.map((branch) => ({
+          name: branch.name,
+          isCurrent: branch.isCurrent,
+          isRemote: branch.isRemote,
+        }))
+      );
+    } catch (error) {
+      if (requestId !== latestLoadBranchesId.current) return;
+      logger.error('Error loading branches for graph worktree selector:', error);
+      setBranches([]);
+    } finally {
+      if (requestId === latestLoadBranchesId.current) {
+        setIsLoadingBranches(false);
+      }
+    }
+  }, []);
+
+  const handleGraphSelectWorktree = useCallback(
+    (worktree: WorktreeInfo) => {
+      const matchingWorktree = worktrees.find((candidate) =>
+        worktree.isMain
+          ? candidate.isMain
+          : !candidate.isMain && pathsEqual(candidate.path, worktree.path)
+      );
+
+      if (matchingWorktree) {
+        handleSelectWorktree(matchingWorktree);
+      }
+    },
+    [worktrees, handleSelectWorktree]
+  );
+
+  const handleBranchDropdownOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open || !selectedGraphWorktree) return;
+      setBranchFilter('');
+      loadBranchesForWorktree(selectedGraphWorktree.path);
+    },
+    [selectedGraphWorktree, loadBranchesForWorktree]
+  );
+
+  const handleGraphSwitchBranch = useCallback(
+    (worktree: WorktreeInfo, branchName: string) => {
+      switchBranchMutation.mutate({
+        worktreePath: worktree.path,
+        branchName,
+      });
+    },
+    [switchBranchMutation]
+  );
+
+  const graphWorktreeSelector = useMemo(() => {
+    return (
+      <div className="flex items-center gap-2 w-full sm:w-auto">
+        <WorktreeMobileDropdown
+          worktrees={graphWorktrees}
+          isWorktreeSelected={isWorktreeSelected}
+          hasRunningFeatures={() => false}
+          isDevServerRunning={() => false}
+          isDevServerStarting={() => false}
+          getDevServerInfo={() => undefined}
+          isActivating={false}
+          branchCardCounts={branchCardCounts}
+          onSelectWorktree={handleGraphSelectWorktree}
+        />
+        {selectedGraphWorktree && (
+          <BranchSwitchDropdown
+            worktree={selectedGraphWorktree}
+            isSelected={true}
+            standalone={true}
+            branches={branches}
+            filteredBranches={filteredBranches}
+            branchFilter={branchFilter}
+            isLoadingBranches={isLoadingBranches}
+            isSwitching={switchBranchMutation.isPending}
+            onOpenChange={handleBranchDropdownOpenChange}
+            onFilterChange={setBranchFilter}
+            onSwitchBranch={handleGraphSwitchBranch}
+            onCreateBranch={() => {
+              toast.info('Create branch is available in the board worktree panel.');
+            }}
+          />
+        )}
+      </div>
+    );
+  }, [
+    graphWorktrees,
+    isWorktreeSelected,
+    branchCardCounts,
+    handleGraphSelectWorktree,
+    selectedGraphWorktree,
+    branches,
+    filteredBranches,
+    branchFilter,
+    isLoadingBranches,
+    switchBranchMutation.isPending,
+    handleBranchDropdownOpenChange,
+    handleGraphSwitchBranch,
+  ]);
+
+  // Branch suggestions
+  const [branchSuggestions, setBranchSuggestions] = useState<string[]>([]);
+
+  useEffect(() => {
+    const fetchBranches = async () => {
+      if (!currentProject) {
+        setBranchSuggestions([]);
+        return;
+      }
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.listBranches) {
+          setBranchSuggestions([]);
+          return;
+        }
+
+        const result = await api.worktree.listBranches(currentProject.path);
+        if (result.success && result.result?.branches) {
+          const localBranches = result.result.branches
+            .filter((b) => !b.isRemote)
+            .map((b) => b.name);
+          setBranchSuggestions(localBranches);
+        }
+      } catch (error) {
+        logger.error('Error fetching branches:', error);
+        setBranchSuggestions([]);
+      }
+    };
+
+    fetchBranches();
+  }, [currentProject, worktreeRefreshKey]);
+
+  // Listen for backlog plan events (for background generation)
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.backlogPlan) {
+      logger.debug('Backlog plan API not available for event subscription');
+      return;
+    }
+
+    const unsubscribe = api.backlogPlan.onEvent((data: unknown) => {
+      const event = data as { type: string; result?: BacklogPlanResult; error?: string };
+      logger.debug('Backlog plan event received', {
+        type: event.type,
+        hasResult: Boolean(event.result),
+        hasError: Boolean(event.error),
+      });
+      if (event.type === 'backlog_plan_complete') {
+        setIsGeneratingPlan(false);
+        if (event.result && event.result.changes?.length > 0) {
+          setPendingBacklogPlan(event.result);
+          toast.success('Plan ready! Click to review.', {
+            duration: 10000,
+            action: {
+              label: 'Review',
+              onClick: () => setShowPlanDialog(true),
+            },
+          });
+        } else {
+          toast.info('No changes generated. Try again with a different prompt.');
+        }
+      } else if (event.type === 'backlog_plan_error') {
+        setIsGeneratingPlan(false);
+        toast.error(`Plan generation failed: ${event.error}`);
+      }
+    });
+
+    return unsubscribe;
+  }, []);
+
+  // Load any saved plan from disk when opening the graph view
+  useEffect(() => {
+    if (!currentProject || pendingBacklogPlan) return;
+
+    let isActive = true;
+    const loadSavedPlan = async () => {
+      const api = getElectronAPI();
+      if (!api?.backlogPlan) return;
+
+      const result = await api.backlogPlan.status(currentProject.path);
+      if (
+        isActive &&
+        result.success &&
+        result.savedPlan?.result &&
+        result.savedPlan.result.changes?.length > 0
+      ) {
+        setPendingBacklogPlan(result.savedPlan.result);
+      }
+    };
+
+    loadSavedPlan();
+    return () => {
+      isActive = false;
+    };
+  }, [currentProject, pendingBacklogPlan]);
+
+  // Category suggestions
+  const categorySuggestions = useMemo(() => {
+    const featureCategories = hookFeatures.map((f) => f.category).filter(Boolean);
+    const allCategories = [...featureCategories, ...persistedCategories];
+    return [...new Set(allCategories)].sort();
+  }, [hookFeatures, persistedCategories]);
+
+  // Use persistence hook
+  const { persistFeatureCreate, persistFeatureUpdate, persistFeatureDelete } = useBoardPersistence({
+    currentProject,
+  });
+
+  // Follow-up state (simplified for graph view)
+  const [followUpFeature, setFollowUpFeature] = useState<Feature | null>(null);
+  const [followUpPrompt, setFollowUpPrompt] = useState('');
+  const [followUpImagePaths, setFollowUpImagePaths] = useState<FeatureImagePath[]>([]);
+  const [, setFollowUpPreviewMap] = useState<Map<string, string>>(new Map());
+
+  // In-progress features for shortcuts
+  const inProgressFeaturesForShortcuts = useMemo(() => {
+    return hookFeatures.filter((f) => {
+      const isRunning = runningAutoTasks.includes(f.id);
+      return isRunning || f.status === 'in_progress';
+    });
+  }, [hookFeatures, runningAutoTasks]);
+
+  // Simple feature update handler for graph view (dependencies, etc.)
+  const handleGraphUpdateFeature = useCallback(
+    async (featureId: string, updates: Partial<Feature>) => {
+      logger.info('handleGraphUpdateFeature called', { featureId, updates });
+      updateFeature(featureId, updates);
+      await persistFeatureUpdate(featureId, updates);
+      logger.info('handleGraphUpdateFeature completed');
+    },
+    [updateFeature, persistFeatureUpdate]
+  );
+
+  // Board actions hook
+  const {
+    handleAddFeature,
+    handleUpdateFeature,
+    handleDeleteFeature,
+    handleStartImplementation,
+    handleResumeFeature,
+    handleViewOutput,
+    handleForceStopFeature,
+    handleOutputModalNumberKeyPress,
+  } = useBoardActions({
+    currentProject,
+    features: hookFeatures,
+    runningAutoTasks,
+    loadFeatures,
+    persistFeatureCreate,
+    persistFeatureUpdate,
+    persistFeatureDelete,
+    saveCategory,
+    setEditingFeature,
+    setShowOutputModal,
+    setOutputFeature,
+    followUpFeature,
+    followUpPrompt,
+    followUpImagePaths,
+    setFollowUpFeature,
+    setFollowUpPrompt,
+    setFollowUpImagePaths,
+    setFollowUpPreviewMap,
+    setShowFollowUpDialog: () => {},
+    inProgressFeaturesForShortcuts,
+    outputFeature,
+    projectPath: currentProject?.path || null,
+    onWorktreeCreated: () => setWorktreeRefreshKey((k) => k + 1),
+    onWorktreeAutoSelect: (newWorktree) => {
+      if (!currentProject) return;
+      const currentWorktrees = getWorktrees(currentProject.path);
+      const existingWorktree = currentWorktrees.find((w) => w.branch === newWorktree.branch);
+
+      if (!existingWorktree) {
+        const newWorktreeInfo = {
+          path: newWorktree.path,
+          branch: newWorktree.branch,
+          isMain: false,
+          isCurrent: false,
+          hasWorktree: true,
+        };
+        setWorktrees(currentProject.path, [...currentWorktrees, newWorktreeInfo]);
+      }
+      setCurrentWorktree(currentProject.path, newWorktree.path, newWorktree.branch);
+    },
+    currentWorktreeBranch,
+    stopFeature: autoMode.stopFeature,
+  });
+
+  // Handle add and start feature
+  const handleAddAndStartFeature = useCallback(
+    async (featureData: Parameters<typeof handleAddFeature>[0]) => {
+      const featuresBeforeIds = new Set(useAppStore.getState().features.map((f) => f.id));
+      try {
+        // Create feature directly with in_progress status to avoid brief backlog flash
+        await handleAddFeature({ ...featureData, initialStatus: 'in_progress' });
+      } catch (error) {
+        logger.error('Failed to create feature:', error);
+        toast.error(
+          `Failed to create feature: ${error instanceof Error ? error.message : String(error)}`
+        );
+        return;
+      }
+
+      const latestFeatures = useAppStore.getState().features;
+      const newFeature = latestFeatures.find((f) => !featuresBeforeIds.has(f.id));
+
+      if (newFeature) {
+        try {
+          await handleStartImplementation(newFeature);
+        } catch (startError) {
+          logger.error('Failed to start implementation, rolling back feature status:', startError);
+          // Rollback: revert the newly created feature back to backlog so it isn't stuck in in_progress
+          try {
+            const { updateFeature } = useAppStore.getState();
+            updateFeature(newFeature.id, { status: 'backlog' });
+            // Also persist the rollback so it survives page refresh
+            await persistFeatureUpdate(newFeature.id, { status: 'backlog' });
+            logger.info(`Rolled back feature ${newFeature.id} status to backlog`);
+          } catch (rollbackErr) {
+            logger.error('Failed to rollback feature status:', rollbackErr);
+          }
+          toast.error(
+            `Failed to start feature: ${startError instanceof Error ? startError.message : String(startError)}`
+          );
+        }
+      } else {
+        // Feature was not found in the store after creation — it may have been
+        // persisted but not yet visible in the snapshot. Attempt to locate it
+        // and roll it back so it doesn't remain stuck in 'in_progress'.
+        logger.error(
+          'Newly created feature not found in store after handleAddFeature completed. ' +
+            `Store has ${latestFeatures.length} features, expected a new entry.`
+        );
+        // Best-effort: re-read the store to find any feature still in 'in_progress'
+        // that wasn't in the original set. We must use a fresh snapshot here because
+        // latestFeatures was captured before the async gap and may not contain the new entry.
+        const freshFeatures = useAppStore.getState().features;
+        const stuckFeature = freshFeatures.find(
+          (f) => f.status === 'in_progress' && !featuresBeforeIds.has(f.id)
+        );
+        if (stuckFeature) {
+          try {
+            const { updateFeature } = useAppStore.getState();
+            updateFeature(stuckFeature.id, { status: 'backlog' });
+            await persistFeatureUpdate(stuckFeature.id, { status: 'backlog' });
+            logger.info(`Rolled back orphaned feature ${stuckFeature.id} status to backlog`);
+          } catch (rollbackErr) {
+            logger.error('Failed to rollback orphaned feature status:', rollbackErr);
+          }
+        }
+        toast.error('Feature was created but could not be started. Please try again.');
+      }
+    },
+    [handleAddFeature, handleStartImplementation, persistFeatureUpdate]
+  );
+
+  if (!currentProject) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="graph-view-no-project">
+        <p className="text-muted-foreground">No project selected</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="graph-view-loading">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex-1 flex flex-col overflow-hidden content-bg relative"
+      data-testid="graph-view-page"
+    >
+      {/* Graph View Content */}
+      <GraphView
+        features={hookFeatures}
+        runningAutoTasks={runningAutoTasks}
+        currentWorktreePath={currentWorktreePath}
+        currentWorktreeBranch={currentWorktreeBranch}
+        projectPath={currentProject?.path || null}
+        searchQuery={searchQuery}
+        onSearchQueryChange={setSearchQuery}
+        onEditFeature={(feature) => setEditingFeature(feature)}
+        onViewOutput={handleViewOutput}
+        onStartTask={handleStartImplementation}
+        onStopTask={handleForceStopFeature}
+        onResumeTask={handleResumeFeature}
+        onUpdateFeature={handleGraphUpdateFeature}
+        onSpawnTask={(feature) => {
+          setSpawnParentFeature(feature);
+          setShowAddDialog(true);
+        }}
+        onDeleteTask={(feature) => handleDeleteFeature(feature.id)}
+        onAddFeature={() => setShowAddDialog(true)}
+        onOpenPlanDialog={() => setShowPlanDialog(true)}
+        hasPendingPlan={Boolean(pendingBacklogPlan)}
+        planUseSelectedWorktreeBranch={planUseSelectedWorktreeBranch}
+        onPlanUseSelectedWorktreeBranchChange={setPlanUseSelectedWorktreeBranch}
+        worktreeSelector={graphWorktreeSelector}
+      />
+
+      {/* Edit Feature Dialog */}
+      <EditFeatureDialog
+        feature={editingFeature}
+        onClose={() => setEditingFeature(null)}
+        onUpdate={handleUpdateFeature}
+        categorySuggestions={categorySuggestions}
+        branchSuggestions={branchSuggestions}
+        branchCardCounts={branchCardCounts}
+        currentBranch={currentWorktreeBranch || undefined}
+        isMaximized={false}
+        allFeatures={hookFeatures}
+        projectPath={currentProject?.path}
+      />
+
+      {/* Add Feature Dialog (for spawning) */}
+      <AddFeatureDialog
+        open={showAddDialog}
+        onOpenChange={(open) => {
+          setShowAddDialog(open);
+          if (!open) {
+            setSpawnParentFeature(null);
+          }
+        }}
+        onAdd={handleAddFeature}
+        onAddAndStart={handleAddAndStartFeature}
+        categorySuggestions={categorySuggestions}
+        branchSuggestions={branchSuggestions}
+        branchCardCounts={branchCardCounts}
+        defaultSkipTests={defaultSkipTests}
+        defaultBranch={selectedWorktreeBranch}
+        currentBranch={currentWorktreeBranch || undefined}
+        isMaximized={false}
+        parentFeature={spawnParentFeature}
+        allFeatures={hookFeatures}
+        projectPath={currentProject?.path}
+        // When setting is enabled and a non-main worktree is selected, pass its branch to default to 'custom' work mode
+        selectedNonMainWorktreeBranch={
+          addFeatureUseSelectedWorktreeBranch && currentWorktreePath !== null
+            ? currentWorktreeBranch || undefined
+            : undefined
+        }
+        // When the worktree setting is disabled, force 'current' branch mode
+        forceCurrentBranchMode={!addFeatureUseSelectedWorktreeBranch}
+      />
+
+      {/* Agent Output Modal */}
+      <AgentOutputModal
+        open={showOutputModal}
+        onClose={() => setShowOutputModal(false)}
+        featureDescription={outputFeature?.description || ''}
+        featureId={outputFeature?.id || ''}
+        featureStatus={outputFeature?.status}
+        onNumberKeyPress={handleOutputModalNumberKeyPress}
+        branchName={outputFeature?.branchName}
+      />
+
+      {/* Backlog Plan Dialog */}
+      <BacklogPlanDialog
+        open={showPlanDialog}
+        onClose={() => setShowPlanDialog(false)}
+        projectPath={currentProject.path}
+        onPlanApplied={loadFeatures}
+        pendingPlanResult={pendingBacklogPlan}
+        setPendingPlanResult={setPendingBacklogPlan}
+        isGeneratingPlan={isGeneratingPlan}
+        setIsGeneratingPlan={setIsGeneratingPlan}
+        currentBranch={planUseSelectedWorktreeBranch ? selectedWorktreeBranch : undefined}
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/graph-view/components/dependency-edge.tsx b/temp_repo/apps/ui/src/components/views/graph-view/components/dependency-edge.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..44cac85cea013eba9a9fb39a985cf7a2691f1b10
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/graph-view/components/dependency-edge.tsx
@@ -0,0 +1,240 @@
+import { memo, useState } from 'react';
+import { BaseEdge, getBezierPath, EdgeLabelRenderer } from '@xyflow/react';
+import type { EdgeProps } from '@xyflow/react';
+import { cn } from '@/lib/utils';
+import { Feature } from '@/store/app-store';
+import { Trash2 } from 'lucide-react';
+import { GRAPH_RENDER_MODE_COMPACT, type GraphRenderMode } from '../constants';
+
+export interface DependencyEdgeData {
+  sourceStatus: Feature['status'];
+  targetStatus: Feature['status'];
+  isHighlighted?: boolean;
+  isDimmed?: boolean;
+  onDeleteDependency?: (sourceId: string, targetId: string) => void;
+  renderMode?: GraphRenderMode;
+}
+
+const getEdgeColor = (sourceStatus?: Feature['status'], targetStatus?: Feature['status']) => {
+  // If source is completed/verified, the dependency is satisfied
+  if (sourceStatus === 'completed' || sourceStatus === 'verified') {
+    return 'var(--status-success)';
+  }
+  // If target is in progress, show active color
+  if (targetStatus === 'in_progress') {
+    return 'var(--status-in-progress)';
+  }
+  // If target is blocked (in backlog with incomplete deps)
+  if (targetStatus === 'backlog') {
+    return 'var(--border)';
+  }
+  // Default
+  return 'var(--border)';
+};
+
+export const DependencyEdge = memo(function DependencyEdge(props: EdgeProps) {
+  const {
+    id,
+    source,
+    target,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    data,
+    selected,
+    animated,
+  } = props;
+
+  const [isHovered, setIsHovered] = useState(false);
+  const edgeData = data as DependencyEdgeData | undefined;
+
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    curvature: 0.25,
+  });
+
+  const isHighlighted = edgeData?.isHighlighted ?? false;
+  const isDimmed = edgeData?.isDimmed ?? false;
+  const isCompact = edgeData?.renderMode === GRAPH_RENDER_MODE_COMPACT;
+
+  const edgeColor = isHighlighted
+    ? 'var(--brand-500)'
+    : edgeData
+      ? getEdgeColor(edgeData.sourceStatus, edgeData.targetStatus)
+      : 'var(--border)';
+
+  const isCompleted =
+    edgeData?.sourceStatus === 'completed' || edgeData?.sourceStatus === 'verified';
+  const isInProgress = edgeData?.targetStatus === 'in_progress';
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    console.log('Edge delete button clicked', {
+      source,
+      target,
+      hasCallback: !!edgeData?.onDeleteDependency,
+    });
+    if (edgeData?.onDeleteDependency) {
+      edgeData.onDeleteDependency(source, target);
+    } else {
+      console.error('onDeleteDependency callback is not defined on edge data');
+    }
+  };
+
+  if (isCompact) {
+    return (
+      <>
+        <BaseEdge
+          id={id}
+          path={edgePath}
+          className={cn('transition-opacity duration-200', isDimmed && 'graph-edge-dimmed')}
+          style={{
+            strokeWidth: selected ? 2 : 1.5,
+            stroke: selected ? 'var(--status-error)' : edgeColor,
+            strokeDasharray: isCompleted ? 'none' : '5 5',
+            opacity: isDimmed ? 0.2 : 1,
+          }}
+        />
+        {selected && edgeData?.onDeleteDependency && (
+          <EdgeLabelRenderer>
+            <div
+              style={{
+                position: 'absolute',
+                transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+                pointerEvents: 'auto',
+                zIndex: 1000,
+              }}
+            >
+              <button
+                onClick={handleDelete}
+                className={cn(
+                  'flex items-center justify-center',
+                  'w-6 h-6 rounded-full',
+                  'bg-[var(--status-error)] hover:bg-[var(--status-error)]/80',
+                  'text-white shadow-lg',
+                  'transition-all duration-150',
+                  'hover:scale-110'
+                )}
+                title="Delete dependency"
+              >
+                <Trash2 className="w-3 h-3" />
+              </button>
+            </div>
+          </EdgeLabelRenderer>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {/* Invisible wider path for hover detection */}
+      <path
+        d={edgePath}
+        fill="none"
+        stroke="transparent"
+        strokeWidth={20}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        style={{ cursor: 'pointer' }}
+      />
+
+      {/* Background edge for better visibility */}
+      <BaseEdge
+        id={`${id}-bg`}
+        path={edgePath}
+        style={{
+          strokeWidth: isHighlighted || isHovered ? 6 : 4,
+          stroke: 'var(--background)',
+          opacity: isDimmed ? 0.3 : 1,
+        }}
+      />
+
+      {/* Main edge */}
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        className={cn(
+          'transition-all duration-300',
+          animated && 'animated-edge',
+          isInProgress && 'edge-flowing',
+          isHighlighted && 'graph-edge-highlighted',
+          isDimmed && 'graph-edge-dimmed'
+        )}
+        style={{
+          strokeWidth: isHighlighted ? 4 : isHovered || selected ? 3 : isDimmed ? 1 : 2,
+          stroke: isHovered || selected ? 'var(--status-error)' : edgeColor,
+          strokeDasharray: isCompleted ? 'none' : '5 5',
+          filter: isHighlighted
+            ? 'drop-shadow(0 0 6px var(--brand-500))'
+            : isHovered || selected
+              ? 'drop-shadow(0 0 4px var(--status-error))'
+              : 'none',
+          opacity: isDimmed ? 0.2 : 1,
+        }}
+      />
+
+      {/* Delete button on hover or select */}
+      {(isHovered || selected) && edgeData?.onDeleteDependency && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              pointerEvents: 'auto',
+              zIndex: 1000,
+            }}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          >
+            <button
+              onClick={handleDelete}
+              className={cn(
+                'flex items-center justify-center',
+                'w-6 h-6 rounded-full',
+                'bg-[var(--status-error)] hover:bg-[var(--status-error)]/80',
+                'text-white shadow-lg',
+                'transition-all duration-150',
+                'hover:scale-110'
+              )}
+              title="Delete dependency"
+            >
+              <Trash2 className="w-3 h-3" />
+            </button>
+          </div>
+        </EdgeLabelRenderer>
+      )}
+
+      {/* Animated particles for in-progress edges */}
+      {animated && !isHovered && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              pointerEvents: 'none',
+            }}
+            className="edge-particle"
+          >
+            <div
+              className={cn(
+                'w-2 h-2 rounded-full',
+                isInProgress
+                  ? 'bg-[var(--status-in-progress)] animate-ping'
+                  : 'bg-brand-500 animate-pulse'
+              )}
+            />
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+});
diff --git a/temp_repo/apps/ui/src/components/views/graph-view/components/graph-controls.tsx b/temp_repo/apps/ui/src/components/views/graph-view/components/graph-controls.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2a5adb55ff6c23c945af00ea50a18b2ac01756fc
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/graph-view/components/graph-controls.tsx
@@ -0,0 +1,127 @@
+import { useReactFlow, Panel } from '@xyflow/react';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { ZoomIn, ZoomOut, Maximize2, Lock, Unlock, ArrowRight, ArrowDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface GraphControlsProps {
+  isLocked: boolean;
+  onToggleLock: () => void;
+  onRunLayout: (direction: 'LR' | 'TB') => void;
+  layoutDirection: 'LR' | 'TB';
+}
+
+export function GraphControls({
+  isLocked,
+  onToggleLock,
+  onRunLayout,
+  layoutDirection,
+}: GraphControlsProps) {
+  const { zoomIn, zoomOut, fitView } = useReactFlow();
+
+  return (
+    <Panel position="bottom-left" className="flex flex-col gap-2">
+      <div
+        className="flex flex-col gap-1 p-1.5 rounded-lg backdrop-blur-sm border border-border shadow-lg text-popover-foreground"
+        style={{ backgroundColor: 'color-mix(in oklch, var(--popover) 90%, transparent)' }}
+      >
+        {/* Zoom controls */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0"
+              onClick={() => zoomIn({ duration: 200 })}
+            >
+              <ZoomIn className="w-4 h-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right">Zoom In</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0"
+              onClick={() => zoomOut({ duration: 200 })}
+            >
+              <ZoomOut className="w-4 h-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right">Zoom Out</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 w-8 p-0"
+              onClick={() => fitView({ padding: 0.2, duration: 300 })}
+            >
+              <Maximize2 className="w-4 h-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right">Fit View</TooltipContent>
+        </Tooltip>
+
+        <div className="h-px bg-border my-1" />
+
+        {/* Layout controls */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className={cn(
+                'h-8 w-8 p-0',
+                layoutDirection === 'LR' && 'bg-brand-500/20 text-brand-500'
+              )}
+              onClick={() => onRunLayout('LR')}
+            >
+              <ArrowRight className="w-4 h-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right">Horizontal Layout</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className={cn(
+                'h-8 w-8 p-0',
+                layoutDirection === 'TB' && 'bg-brand-500/20 text-brand-500'
+              )}
+              onClick={() => onRunLayout('TB')}
+            >
+              <ArrowDown className="w-4 h-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right">Vertical Layout</TooltipContent>
+        </Tooltip>
+
+        <div className="h-px bg-border my-1" />
+
+        {/* Lock toggle */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className={cn('h-8 w-8 p-0', isLocked && 'bg-brand-500/20 text-brand-500')}
+              onClick={onToggleLock}
+            >
+              {isLocked ? <Lock className="w-4 h-4" /> : <Unlock className="w-4 h-4" />}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right">{isLocked ? 'Unlock Nodes' : 'Lock Nodes'}</TooltipContent>
+        </Tooltip>
+      </div>
+    </Panel>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/graph-view/components/graph-filter-controls.tsx b/temp_repo/apps/ui/src/components/views/graph-view/components/graph-filter-controls.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..16c9abf64532367e88b8974c6270a4fb28a47109
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/graph-view/components/graph-filter-controls.tsx
@@ -0,0 +1,366 @@
+import { Panel } from '@xyflow/react';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Switch } from '@/components/ui/switch';
+import { Input } from '@/components/ui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import {
+  Filter,
+  X,
+  Eye,
+  EyeOff,
+  ChevronDown,
+  Play,
+  Pause,
+  Clock,
+  CheckCircle2,
+  CircleDot,
+  Search,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import {
+  GraphFilterState,
+  STATUS_FILTER_OPTIONS,
+  StatusFilterValue,
+} from '../hooks/use-graph-filter';
+
+// Status display configuration
+const statusDisplayConfig: Record<
+  StatusFilterValue,
+  { label: string; icon: typeof Play; colorClass: string }
+> = {
+  running: { label: 'Running', icon: Play, colorClass: 'text-[var(--status-in-progress)]' },
+  paused: { label: 'Paused', icon: Pause, colorClass: 'text-[var(--status-warning)]' },
+  backlog: { label: 'Backlog', icon: Clock, colorClass: 'text-muted-foreground' },
+  waiting_approval: {
+    label: 'Waiting Approval',
+    icon: CircleDot,
+    colorClass: 'text-[var(--status-waiting)]',
+  },
+  verified: { label: 'Verified', icon: CheckCircle2, colorClass: 'text-[var(--status-success)]' },
+};
+
+interface GraphFilterControlsProps {
+  filterState: GraphFilterState;
+  availableCategories: string[];
+  hasActiveFilter: boolean;
+  searchQuery: string;
+  onSearchQueryChange: (query: string) => void;
+  onCategoriesChange: (categories: string[]) => void;
+  onStatusesChange: (statuses: string[]) => void;
+  onNegativeFilterChange: (isNegative: boolean) => void;
+  onClearFilters: () => void;
+}
+
+export function GraphFilterControls({
+  filterState,
+  availableCategories,
+  hasActiveFilter,
+  searchQuery,
+  onSearchQueryChange,
+  onCategoriesChange,
+  onStatusesChange,
+  onNegativeFilterChange,
+  onClearFilters,
+}: GraphFilterControlsProps) {
+  const { selectedCategories, selectedStatuses, isNegativeFilter } = filterState;
+
+  const handleCategoryToggle = (category: string) => {
+    if (selectedCategories.includes(category)) {
+      onCategoriesChange(selectedCategories.filter((c) => c !== category));
+    } else {
+      onCategoriesChange([...selectedCategories, category]);
+    }
+  };
+
+  const handleSelectAllCategories = () => {
+    if (selectedCategories.length === availableCategories.length) {
+      onCategoriesChange([]);
+    } else {
+      onCategoriesChange([...availableCategories]);
+    }
+  };
+
+  const handleStatusToggle = (status: string) => {
+    if (selectedStatuses.includes(status)) {
+      onStatusesChange(selectedStatuses.filter((s) => s !== status));
+    } else {
+      onStatusesChange([...selectedStatuses, status]);
+    }
+  };
+
+  const handleSelectAllStatuses = () => {
+    if (selectedStatuses.length === STATUS_FILTER_OPTIONS.length) {
+      onStatusesChange([]);
+    } else {
+      onStatusesChange([...STATUS_FILTER_OPTIONS]);
+    }
+  };
+
+  const categoryButtonLabel =
+    selectedCategories.length === 0
+      ? 'All Categories'
+      : selectedCategories.length === 1
+        ? selectedCategories[0]
+        : `${selectedCategories.length} Categories`;
+
+  const statusButtonLabel =
+    selectedStatuses.length === 0
+      ? 'All Statuses'
+      : selectedStatuses.length === 1
+        ? statusDisplayConfig[selectedStatuses[0] as StatusFilterValue]?.label ||
+          selectedStatuses[0]
+        : `${selectedStatuses.length} Statuses`;
+
+  return (
+    <Panel position="top-left" className="flex items-center gap-2">
+      <div
+        className="flex items-center gap-2 p-2 rounded-lg backdrop-blur-sm border border-border shadow-lg text-popover-foreground"
+        style={{ backgroundColor: 'color-mix(in oklch, var(--popover) 90%, transparent)' }}
+      >
+        {/* Search Input */}
+        <div className="relative">
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
+          <Input
+            type="text"
+            placeholder="Search tasks..."
+            value={searchQuery}
+            onChange={(e) => onSearchQueryChange(e.target.value)}
+            className="h-8 w-48 pl-8 pr-8 text-sm bg-background/50"
+          />
+          {searchQuery && (
+            <button
+              onClick={() => onSearchQueryChange('')}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+              aria-label="Clear search"
+            >
+              <X className="w-3.5 h-3.5" />
+            </button>
+          )}
+        </div>
+
+        {/* Divider */}
+        <div className="h-6 w-px bg-border" />
+
+        {/* Category Filter Dropdown */}
+        <Popover>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={cn(
+                    'h-8 px-2 gap-1.5',
+                    selectedCategories.length > 0 && 'bg-brand-500/20 text-brand-500'
+                  )}
+                >
+                  <Filter className="w-4 h-4" />
+                  <span className="text-xs max-w-[100px] truncate">{categoryButtonLabel}</span>
+                  <ChevronDown className="w-3 h-3 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+            </TooltipTrigger>
+            <TooltipContent>Filter by Category</TooltipContent>
+          </Tooltip>
+          <PopoverContent
+            align="start"
+            className="w-56 p-2"
+            onOpenAutoFocus={(e) => e.preventDefault()}
+          >
+            <div className="space-y-2">
+              <div className="text-xs font-medium text-muted-foreground px-2 py-1">Categories</div>
+
+              {/* Select All option */}
+              <div
+                className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-accent cursor-pointer"
+                onClick={handleSelectAllCategories}
+              >
+                <Checkbox
+                  checked={
+                    selectedCategories.length === availableCategories.length &&
+                    availableCategories.length > 0
+                  }
+                  onCheckedChange={handleSelectAllCategories}
+                />
+                <span className="text-sm font-medium">
+                  {selectedCategories.length === availableCategories.length
+                    ? 'Deselect All'
+                    : 'Select All'}
+                </span>
+              </div>
+
+              <div className="h-px bg-border" />
+
+              {/* Category list */}
+              <div className="max-h-48 overflow-y-auto space-y-0.5">
+                {availableCategories.length === 0 ? (
+                  <div className="text-xs text-muted-foreground px-2 py-2">
+                    No categories available
+                  </div>
+                ) : (
+                  availableCategories.map((category) => (
+                    <div
+                      key={category}
+                      className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-accent cursor-pointer"
+                      onClick={() => handleCategoryToggle(category)}
+                    >
+                      <Checkbox
+                        checked={selectedCategories.includes(category)}
+                        onCheckedChange={() => handleCategoryToggle(category)}
+                      />
+                      <span className="text-sm truncate">{category}</span>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+
+        {/* Status Filter Dropdown */}
+        <Popover>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={cn(
+                    'h-8 px-2 gap-1.5',
+                    selectedStatuses.length > 0 && 'bg-brand-500/20 text-brand-500'
+                  )}
+                >
+                  <CircleDot className="w-4 h-4" />
+                  <span className="text-xs max-w-[120px] truncate">{statusButtonLabel}</span>
+                  <ChevronDown className="w-3 h-3 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+            </TooltipTrigger>
+            <TooltipContent>Filter by Status</TooltipContent>
+          </Tooltip>
+          <PopoverContent
+            align="start"
+            className="w-56 p-2"
+            onOpenAutoFocus={(e) => e.preventDefault()}
+          >
+            <div className="space-y-2">
+              <div className="text-xs font-medium text-muted-foreground px-2 py-1">Status</div>
+
+              {/* Select All option */}
+              <div
+                className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-accent cursor-pointer"
+                onClick={handleSelectAllStatuses}
+              >
+                <Checkbox
+                  checked={selectedStatuses.length === STATUS_FILTER_OPTIONS.length}
+                  onCheckedChange={handleSelectAllStatuses}
+                />
+                <span className="text-sm font-medium">
+                  {selectedStatuses.length === STATUS_FILTER_OPTIONS.length
+                    ? 'Deselect All'
+                    : 'Select All'}
+                </span>
+              </div>
+
+              <div className="h-px bg-border" />
+
+              {/* Status list */}
+              <div className="space-y-0.5">
+                {STATUS_FILTER_OPTIONS.map((status) => {
+                  const config = statusDisplayConfig[status];
+                  const StatusIcon = config.icon;
+                  return (
+                    <div
+                      key={status}
+                      className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-accent cursor-pointer"
+                      onClick={() => handleStatusToggle(status)}
+                    >
+                      <Checkbox
+                        checked={selectedStatuses.includes(status)}
+                        onCheckedChange={() => handleStatusToggle(status)}
+                      />
+                      <StatusIcon className={cn('w-3.5 h-3.5', config.colorClass)} />
+                      <span className="text-sm">{config.label}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+
+        {/* Divider */}
+        <div className="h-6 w-px bg-border" />
+
+        {/* Positive/Negative Filter Toggle */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => onNegativeFilterChange(!isNegativeFilter)}
+                aria-label={
+                  isNegativeFilter
+                    ? 'Switch to show matching nodes'
+                    : 'Switch to hide matching nodes'
+                }
+                aria-pressed={isNegativeFilter}
+                className={cn(
+                  'flex items-center gap-1.5 px-2 py-1 rounded text-xs transition-colors',
+                  isNegativeFilter
+                    ? 'bg-orange-500/20 text-orange-500'
+                    : 'hover:bg-accent text-muted-foreground hover:text-foreground'
+                )}
+              >
+                {isNegativeFilter ? (
+                  <>
+                    <EyeOff className="w-3.5 h-3.5" />
+                    <span>Hide</span>
+                  </>
+                ) : (
+                  <>
+                    <Eye className="w-3.5 h-3.5" />
+                    <span>Show</span>
+                  </>
+                )}
+              </button>
+              <Switch
+                checked={isNegativeFilter}
+                onCheckedChange={onNegativeFilterChange}
+                aria-label="Toggle between show and hide filter modes"
+                className="h-5 w-9 data-[state=checked]:bg-orange-500"
+              />
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>
+            {isNegativeFilter
+              ? 'Negative filter: Highlighting non-matching nodes'
+              : 'Positive filter: Highlighting matching nodes'}
+          </TooltipContent>
+        </Tooltip>
+
+        {/* Clear Filters Button - only show when filters are active */}
+        {hasActiveFilter && (
+          <>
+            <div className="h-6 w-px bg-border" />
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive"
+                  onClick={onClearFilters}
+                  aria-label="Clear all filters"
+                >
+                  <X className="w-4 h-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Clear All Filters</TooltipContent>
+            </Tooltip>
+          </>
+        )}
+      </div>
+    </Panel>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/graph-view/components/graph-legend.tsx b/temp_repo/apps/ui/src/components/views/graph-view/components/graph-legend.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..545378ef0d81f8585e37da18ee17b069756a39ef
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/graph-view/components/graph-legend.tsx
@@ -0,0 +1,65 @@
+import { Panel } from '@xyflow/react';
+import { Clock, Play, Pause, CheckCircle2, Lock, AlertCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const legendItems = [
+  {
+    icon: Clock,
+    label: 'Backlog',
+    colorClass: 'text-muted-foreground',
+    bgClass: 'bg-muted/50',
+  },
+  {
+    icon: Play,
+    label: 'In Progress',
+    colorClass: 'text-[var(--status-in-progress)]',
+    bgClass: 'bg-[var(--status-in-progress)]/20',
+  },
+  {
+    icon: Pause,
+    label: 'Waiting',
+    colorClass: 'text-[var(--status-waiting)]',
+    bgClass: 'bg-[var(--status-warning)]/20',
+  },
+  {
+    icon: CheckCircle2,
+    label: 'Verified',
+    colorClass: 'text-[var(--status-success)]',
+    bgClass: 'bg-[var(--status-success)]/20',
+  },
+  {
+    icon: Lock,
+    label: 'Blocked',
+    colorClass: 'text-orange-500',
+    bgClass: 'bg-orange-500/20',
+  },
+  {
+    icon: AlertCircle,
+    label: 'Error',
+    colorClass: 'text-[var(--status-error)]',
+    bgClass: 'bg-[var(--status-error)]/20',
+  },
+];
+
+export function GraphLegend() {
+  return (
+    <Panel position="bottom-right" className="pointer-events-none">
+      <div
+        className="flex flex-wrap gap-3 p-2 rounded-lg backdrop-blur-sm border border-border shadow-lg pointer-events-auto text-popover-foreground"
+        style={{ backgroundColor: 'color-mix(in oklch, var(--popover) 90%, transparent)' }}
+      >
+        {legendItems.map((item) => {
+          const Icon = item.icon;
+          return (
+            <div key={item.label} className="flex items-center gap-1.5">
+              <div className={cn('p-1 rounded', item.bgClass)}>
+                <Icon className={cn('w-3 h-3', item.colorClass)} />
+              </div>
+              <span className="text-xs text-muted-foreground">{item.label}</span>
+            </div>
+          );
+        })}
+      </div>
+    </Panel>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/graph-view/components/index.ts b/temp_repo/apps/ui/src/components/views/graph-view/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1732f3b6331ac6f2fdda8faab11a449a9f727a74
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/graph-view/components/index.ts
@@ -0,0 +1,5 @@
+export { TaskNode } from './task-node';
+export { DependencyEdge } from './dependency-edge';
+export { GraphControls } from './graph-controls';
+export { GraphLegend } from './graph-legend';
+export { GraphFilterControls } from './graph-filter-controls';
diff --git a/temp_repo/apps/ui/src/components/views/graph-view/components/task-node.tsx b/temp_repo/apps/ui/src/components/views/graph-view/components/task-node.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..98b95c4651379201b28bb017f65f96544d2f8ffc
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/graph-view/components/task-node.tsx
@@ -0,0 +1,505 @@
+import { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import { cn } from '@/lib/utils';
+import {
+  Lock,
+  CheckCircle2,
+  Clock,
+  AlertCircle,
+  Play,
+  Pause,
+  Eye,
+  MoreVertical,
+  GitBranch,
+  Terminal,
+  RotateCcw,
+  GitFork,
+  Trash2,
+} from 'lucide-react';
+import { TaskNodeData } from '../hooks/use-graph-nodes';
+import { GRAPH_RENDER_MODE_COMPACT } from '../constants';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+type TaskNodeProps = NodeProps & {
+  data: TaskNodeData;
+};
+
+const statusConfig = {
+  backlog: {
+    icon: Clock,
+    label: 'Backlog',
+    colorClass: 'text-muted-foreground',
+    borderClass: 'border-border',
+    bgClass: 'bg-card',
+  },
+  in_progress: {
+    icon: Play,
+    label: 'In Progress',
+    colorClass: 'text-[var(--status-in-progress)]',
+    borderClass: 'border-[var(--status-in-progress)]',
+    bgClass: 'bg-[var(--status-in-progress-bg)]',
+  },
+  waiting_approval: {
+    icon: Pause,
+    label: 'Waiting Approval',
+    colorClass: 'text-[var(--status-waiting)]',
+    borderClass: 'border-[var(--status-waiting)]',
+    bgClass: 'bg-[var(--status-warning-bg)]',
+  },
+  verified: {
+    icon: CheckCircle2,
+    label: 'Verified',
+    colorClass: 'text-[var(--status-success)]',
+    borderClass: 'border-[var(--status-success)]',
+    bgClass: 'bg-[var(--status-success-bg)]',
+  },
+};
+
+const priorityConfig = {
+  1: { label: 'High', colorClass: 'bg-[var(--status-error)] text-white' },
+  2: { label: 'Medium', colorClass: 'bg-[var(--status-warning)] text-black' },
+  3: { label: 'Low', colorClass: 'bg-[var(--status-info)] text-white' },
+};
+
+// Helper function to get border style with opacity (like KanbanCard does)
+function getCardBorderStyle(
+  enabled: boolean,
+  opacity: number,
+  borderColor: string
+): React.CSSProperties {
+  if (!enabled) {
+    return { borderWidth: '0px', borderColor: 'transparent' };
+  }
+  if (opacity !== 100) {
+    return {
+      borderWidth: '2px',
+      borderColor: `color-mix(in oklch, ${borderColor} ${opacity}%, transparent)`,
+    };
+  }
+  return { borderWidth: '2px' };
+}
+
+export const TaskNode = memo(function TaskNode({ data, selected }: TaskNodeProps) {
+  // Handle pipeline statuses by treating them like in_progress
+  // Treat completed (archived) as verified for display
+  const status = data.status || 'backlog';
+  const statusKey = status.startsWith('pipeline_')
+    ? 'in_progress'
+    : status === 'completed'
+      ? 'verified'
+      : status;
+  const config = statusConfig[statusKey as keyof typeof statusConfig] || statusConfig.backlog;
+  const StatusIcon = config.icon;
+  const priorityConf = data.priority ? priorityConfig[data.priority as 1 | 2 | 3] : null;
+
+  // Filter highlight states
+  const isMatched = data.isMatched ?? false;
+  const isHighlighted = data.isHighlighted ?? false;
+  const isDimmed = data.isDimmed ?? false;
+
+  // Task is stopped if it's in_progress but not actively running
+  const isStopped = data.status === 'in_progress' && !data.isRunning;
+
+  // Background/theme settings with defaults
+  const cardOpacity = data.cardOpacity ?? 100;
+  const shouldUseGlassmorphism = data.cardGlassmorphism ?? true;
+  const cardBorderEnabled = data.cardBorderEnabled ?? true;
+  const cardBorderOpacity = data.cardBorderOpacity ?? 100;
+  const isCompact = data.renderMode === GRAPH_RENDER_MODE_COMPACT;
+  const glassmorphism = shouldUseGlassmorphism && !isCompact;
+
+  // Get the border color based on status and error state
+  const borderColor = data.error
+    ? 'var(--status-error)'
+    : config.borderClass.includes('border-border')
+      ? 'var(--border)'
+      : config.borderClass.includes('status-in-progress')
+        ? 'var(--status-in-progress)'
+        : config.borderClass.includes('status-waiting')
+          ? 'var(--status-waiting)'
+          : config.borderClass.includes('status-success')
+            ? 'var(--status-success)'
+            : 'var(--border)';
+
+  // Get computed border style
+  const borderStyle = getCardBorderStyle(cardBorderEnabled, cardBorderOpacity, borderColor);
+
+  if (isCompact) {
+    return (
+      <>
+        <Handle
+          id="target"
+          type="target"
+          position={Position.Left}
+          isConnectable={true}
+          className={cn(
+            'w-3 h-3 !bg-border border-2 border-background',
+            'transition-colors duration-200',
+            'hover:!bg-brand-500',
+            isDimmed && 'opacity-30'
+          )}
+        />
+
+        <div
+          className={cn(
+            'min-w-[200px] max-w-[240px] rounded-lg shadow-sm relative',
+            'transition-all duration-200',
+            selected && 'ring-2 ring-brand-500 ring-offset-1 ring-offset-background',
+            isMatched && 'graph-node-matched',
+            isHighlighted && !isMatched && 'graph-node-highlighted',
+            isDimmed && 'graph-node-dimmed'
+          )}
+          style={borderStyle}
+        >
+          <div
+            className="absolute inset-0 rounded-lg bg-card"
+            style={{ opacity: cardOpacity / 100 }}
+          />
+          <div className={cn('relative flex items-center gap-2 px-2.5 py-2', config.bgClass)}>
+            <StatusIcon className={cn('w-3.5 h-3.5', config.colorClass)} />
+            <span className={cn('text-[11px] font-medium', config.colorClass)}>{config.label}</span>
+            {priorityConf && (
+              <span
+                className={cn(
+                  'ml-auto text-[9px] font-bold px-1.5 py-0.5 rounded',
+                  priorityConf.colorClass
+                )}
+              >
+                {data.priority === 1 ? 'H' : data.priority === 2 ? 'M' : 'L'}
+              </span>
+            )}
+          </div>
+          <div className="relative px-2.5 py-2">
+            <p
+              className={cn(
+                'text-xs text-foreground line-clamp-2',
+                data.title ? 'font-medium' : 'font-semibold'
+              )}
+            >
+              {data.title || data.description}
+            </p>
+            {data.title && data.description && (
+              <p className="text-[11px] text-muted-foreground line-clamp-1 mt-1">
+                {data.description}
+              </p>
+            )}
+            {data.isRunning && (
+              <div className="mt-2 flex items-center gap-2 text-[10px] text-muted-foreground">
+                <span className="inline-flex w-1.5 h-1.5 rounded-full bg-[var(--status-in-progress)]" />
+                Running
+              </div>
+            )}
+            {isStopped && (
+              <div className="mt-2 flex items-center gap-2 text-[10px] text-[var(--status-warning)]">
+                <span className="inline-flex w-1.5 h-1.5 rounded-full bg-[var(--status-warning)]" />
+                Paused
+              </div>
+            )}
+          </div>
+        </div>
+
+        <Handle
+          id="source"
+          type="source"
+          position={Position.Right}
+          isConnectable={true}
+          className={cn(
+            'w-3 h-3 !bg-border border-2 border-background',
+            'transition-colors duration-200',
+            'hover:!bg-brand-500',
+            data.status === 'completed' || data.status === 'verified'
+              ? '!bg-[var(--status-success)]'
+              : '',
+            isDimmed && 'opacity-30'
+          )}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      {/* Target handle (left side - receives dependencies) */}
+      <Handle
+        id="target"
+        type="target"
+        position={Position.Left}
+        isConnectable={true}
+        className={cn(
+          'w-3 h-3 !bg-border border-2 border-background',
+          'transition-colors duration-200',
+          'hover:!bg-brand-500',
+          isDimmed && 'opacity-30'
+        )}
+      />
+
+      <div
+        className={cn(
+          'min-w-[240px] max-w-[280px] rounded-xl shadow-md relative',
+          'transition-all duration-300',
+          selected && 'ring-2 ring-brand-500 ring-offset-2 ring-offset-background',
+          data.isRunning && 'animate-pulse-subtle',
+          // Filter highlight states
+          isMatched && 'graph-node-matched',
+          isHighlighted && !isMatched && 'graph-node-highlighted',
+          isDimmed && 'graph-node-dimmed'
+        )}
+        style={borderStyle}
+      >
+        {/* Background layer with opacity control - like KanbanCard */}
+        <div
+          className={cn('absolute inset-0 rounded-xl bg-card', glassmorphism && 'backdrop-blur-sm')}
+          style={{ opacity: cardOpacity / 100 }}
+        />
+        {/* Header with status and actions */}
+        <div
+          className={cn(
+            'relative flex items-center justify-between px-3 py-2 rounded-t-[10px]',
+            config.bgClass
+          )}
+        >
+          <div className="flex items-center gap-2">
+            <StatusIcon className={cn('w-4 h-4', config.colorClass)} />
+            <span className={cn('text-xs font-medium', config.colorClass)}>{config.label}</span>
+          </div>
+
+          <div className="flex items-center gap-1">
+            {/* Priority badge */}
+            {priorityConf && (
+              <span
+                className={cn(
+                  'text-[10px] font-bold px-1.5 py-0.5 rounded',
+                  priorityConf.colorClass
+                )}
+              >
+                {data.priority === 1 ? 'H' : data.priority === 2 ? 'M' : 'L'}
+              </span>
+            )}
+
+            {/* Blocked indicator */}
+            {data.isBlocked && !data.error && data.status === 'backlog' && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="p-1 rounded bg-orange-500/20">
+                    <Lock className="w-3 h-3 text-orange-500" />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="top" className="text-xs max-w-[200px]">
+                  <p>Blocked by {data.blockingDependencies.length} dependencies</p>
+                </TooltipContent>
+              </Tooltip>
+            )}
+
+            {/* Error indicator */}
+            {data.error && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="p-1 rounded bg-[var(--status-error-bg)]">
+                    <AlertCircle className="w-3 h-3 text-[var(--status-error)]" />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="top" className="text-xs max-w-[250px]">
+                  <p>{data.error}</p>
+                </TooltipContent>
+              </Tooltip>
+            )}
+
+            {/* Stopped indicator - task is in_progress but not actively running */}
+            {isStopped && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="p-1 rounded bg-[var(--status-warning-bg)]">
+                    <Pause className="w-3 h-3 text-[var(--status-warning)]" />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="top" className="text-xs max-w-[200px]">
+                  <p>Task paused - click menu to resume</p>
+                </TooltipContent>
+              </Tooltip>
+            )}
+
+            {/* Actions dropdown */}
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className={cn(
+                    'h-7 w-7 p-0 rounded-md',
+                    'bg-background/60 hover:bg-background',
+                    'border border-border/50 hover:border-border',
+                    'shadow-sm',
+                    'transition-all duration-150'
+                  )}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <MoreVertical className="w-4 h-4 text-foreground" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                className="w-44"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <DropdownMenuItem
+                  className="text-xs cursor-pointer"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    data.onViewLogs?.();
+                  }}
+                >
+                  <Terminal className="w-3 h-3 mr-2" />
+                  View Agent Logs
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  className="text-xs cursor-pointer"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    data.onViewDetails?.();
+                  }}
+                >
+                  <Eye className="w-3 h-3 mr-2" />
+                  View Details
+                </DropdownMenuItem>
+                {data.status === 'backlog' && !data.isBlocked && (
+                  <DropdownMenuItem
+                    className="text-xs cursor-pointer"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      data.onStartTask?.();
+                    }}
+                  >
+                    <Play className="w-3 h-3 mr-2" />
+                    Start Task
+                  </DropdownMenuItem>
+                )}
+                {data.isRunning && (
+                  <DropdownMenuItem
+                    className="text-xs text-[var(--status-error)] cursor-pointer"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      data.onStopTask?.();
+                    }}
+                  >
+                    <Pause className="w-3 h-3 mr-2" />
+                    Stop Task
+                  </DropdownMenuItem>
+                )}
+                {isStopped && (
+                  <DropdownMenuItem
+                    className="text-xs text-[var(--status-success)] cursor-pointer"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      data.onResumeTask?.();
+                    }}
+                  >
+                    <RotateCcw className="w-3 h-3 mr-2" />
+                    Resume Task
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuItem
+                  className="text-xs cursor-pointer"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    data.onSpawnTask?.();
+                  }}
+                >
+                  <GitFork className="w-3 h-3 mr-2" />
+                  Spawn Sub-Task
+                </DropdownMenuItem>
+                {!data.isRunning && (
+                  <DropdownMenuItem
+                    className="text-xs text-[var(--status-error)] cursor-pointer"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      data.onDeleteTask?.();
+                    }}
+                  >
+                    <Trash2 className="w-3 h-3 mr-2" />
+                    Delete Task
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="relative px-3 py-2">
+          {/* Category */}
+          <span className="text-[10px] text-muted-foreground font-medium uppercase tracking-wide">
+            {data.category}
+          </span>
+
+          {/* Title */}
+          {data.title && (
+            <h3 className="text-sm font-medium mt-1 line-clamp-1 text-foreground">{data.title}</h3>
+          )}
+
+          {/* Description */}
+          <p
+            className={cn(
+              'text-xs text-muted-foreground line-clamp-2',
+              data.title ? 'mt-1' : 'mt-1 font-medium text-foreground text-sm'
+            )}
+          >
+            {data.description}
+          </p>
+
+          {/* Progress indicator for in-progress tasks */}
+          {data.isRunning && (
+            <div className="mt-2 flex items-center gap-2">
+              <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                <div className="h-full bg-[var(--status-in-progress)] rounded-full animate-progress-indeterminate" />
+              </div>
+              <span className="text-[10px] text-muted-foreground">Running...</span>
+            </div>
+          )}
+
+          {/* Paused indicator for stopped tasks */}
+          {isStopped && (
+            <div className="mt-2 flex items-center gap-2">
+              <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
+                <div className="h-full w-1/2 bg-[var(--status-warning)] rounded-full" />
+              </div>
+              <span className="text-[10px] text-[var(--status-warning)] font-medium">Paused</span>
+            </div>
+          )}
+
+          {/* Branch name if assigned */}
+          {data.branchName && (
+            <div className="mt-2 flex items-center gap-1 text-[10px] text-muted-foreground">
+              <GitBranch className="w-3 h-3" />
+              <span className="truncate">{data.branchName}</span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Source handle (right side - provides to dependents) */}
+      <Handle
+        id="source"
+        type="source"
+        position={Position.Right}
+        isConnectable={true}
+        className={cn(
+          'w-3 h-3 !bg-border border-2 border-background',
+          'transition-colors duration-200',
+          'hover:!bg-brand-500',
+          data.status === 'completed' || data.status === 'verified'
+            ? '!bg-[var(--status-success)]'
+            : '',
+          isDimmed && 'opacity-30'
+        )}
+      />
+    </>
+  );
+});
diff --git a/temp_repo/apps/ui/src/components/views/graph-view/constants.ts b/temp_repo/apps/ui/src/components/views/graph-view/constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d75b6ea82ecb041da1d7d0e11fd60e64f222e698
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/graph-view/constants.ts
@@ -0,0 +1,7 @@
+export const GRAPH_RENDER_MODE_FULL = 'full';
+export const GRAPH_RENDER_MODE_COMPACT = 'compact';
+
+export type GraphRenderMode = typeof GRAPH_RENDER_MODE_FULL | typeof GRAPH_RENDER_MODE_COMPACT;
+
+export const GRAPH_LARGE_NODE_COUNT = 150;
+export const GRAPH_LARGE_EDGE_COUNT = 300;
diff --git a/temp_repo/apps/ui/src/components/views/graph-view/graph-canvas.tsx b/temp_repo/apps/ui/src/components/views/graph-view/graph-canvas.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f971f2efdbe693713195268f9ce0ed0a402f9ded
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/graph-view/graph-canvas.tsx
@@ -0,0 +1,622 @@
+import { useCallback, useState, useEffect, useMemo, useRef, type ReactNode } from 'react';
+import {
+  ReactFlow,
+  Background,
+  BackgroundVariant,
+  MiniMap,
+  Panel,
+  useNodesState,
+  useEdgesState,
+  ReactFlowProvider,
+  useReactFlow,
+  SelectionMode,
+  ConnectionMode,
+  Node,
+  Connection,
+  Edge,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+import { Feature, useAppStore } from '@/store/app-store';
+import { themeOptions } from '@/config/theme-options';
+import {
+  TaskNode,
+  DependencyEdge,
+  GraphControls,
+  GraphLegend,
+  GraphFilterControls,
+} from './components';
+import {
+  useGraphNodes,
+  useGraphLayout,
+  useGraphFilter,
+  type TaskNodeData,
+  type GraphFilterState,
+  type NodeActionCallbacks,
+} from './hooks';
+import { cn } from '@/lib/utils';
+import { useDebounceValue } from 'usehooks-ts';
+import { SearchX, Plus, Wand2, ClipboardCheck } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { PlanSettingsPopover } from '../board-view/dialogs/plan-settings-popover';
+import {
+  GRAPH_LARGE_EDGE_COUNT,
+  GRAPH_LARGE_NODE_COUNT,
+  GRAPH_RENDER_MODE_COMPACT,
+  GRAPH_RENDER_MODE_FULL,
+} from './constants';
+
+// Define custom node and edge types - using any to avoid React Flow's strict typing
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const nodeTypes: any = {
+  task: TaskNode,
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const edgeTypes: any = {
+  dependency: DependencyEdge,
+};
+
+interface BackgroundSettings {
+  cardOpacity: number;
+  cardGlassmorphism: boolean;
+  cardBorderEnabled: boolean;
+  cardBorderOpacity: number;
+}
+
+interface GraphCanvasProps {
+  features: Feature[];
+  runningAutoTasks: string[];
+  searchQuery: string;
+  onSearchQueryChange: (query: string) => void;
+  onNodeDoubleClick?: (featureId: string) => void;
+  nodeActionCallbacks?: NodeActionCallbacks;
+  onCreateDependency?: (sourceId: string, targetId: string) => Promise<boolean>;
+  onAddFeature?: () => void;
+  onOpenPlanDialog?: () => void;
+  hasPendingPlan?: boolean;
+  planUseSelectedWorktreeBranch?: boolean;
+  onPlanUseSelectedWorktreeBranchChange?: (value: boolean) => void;
+  backgroundStyle?: React.CSSProperties;
+  backgroundSettings?: BackgroundSettings;
+  className?: string;
+  projectPath?: string | null;
+  worktreeSelector?: ReactNode;
+}
+
+// Helper to get session storage key for viewport
+const getViewportStorageKey = (projectPath: string) => `graph-viewport:${projectPath}`;
+
+// Helper to save viewport to session storage
+const saveViewportToStorage = (
+  projectPath: string,
+  viewport: { x: number; y: number; zoom: number }
+) => {
+  try {
+    sessionStorage.setItem(getViewportStorageKey(projectPath), JSON.stringify(viewport));
+  } catch {
+    // Ignore storage errors
+  }
+};
+
+// Helper to load viewport from session storage
+const loadViewportFromStorage = (
+  projectPath: string
+): { x: number; y: number; zoom: number } | null => {
+  try {
+    const stored = sessionStorage.getItem(getViewportStorageKey(projectPath));
+    if (stored) {
+      return JSON.parse(stored);
+    }
+  } catch {
+    // Ignore storage errors
+  }
+  return null;
+};
+
+function GraphCanvasInner({
+  features,
+  runningAutoTasks,
+  searchQuery,
+  onSearchQueryChange,
+  onNodeDoubleClick,
+  nodeActionCallbacks,
+  onCreateDependency,
+  onAddFeature,
+  onOpenPlanDialog,
+  hasPendingPlan,
+  planUseSelectedWorktreeBranch,
+  onPlanUseSelectedWorktreeBranchChange,
+  backgroundStyle,
+  backgroundSettings,
+  className,
+  projectPath,
+  worktreeSelector,
+}: GraphCanvasProps) {
+  const [isLocked, setIsLocked] = useState(false);
+  const [layoutDirection, setLayoutDirection] = useState<'LR' | 'TB'>('LR');
+  const { setViewport, getViewport, fitView } = useReactFlow();
+
+  // Refs for tracking layout and viewport state
+  const hasRestoredViewport = useRef(false);
+  const lastProjectPath = useRef(projectPath);
+  const hasInitialLayout = useRef(false);
+  const prevNodeIds = useRef<Set<string>>(new Set());
+  const prevLayoutVersion = useRef<number>(0);
+  const hasLayoutWithEdges = useRef(false);
+
+  // Reset flags when project changes
+  useEffect(() => {
+    if (projectPath !== lastProjectPath.current) {
+      hasRestoredViewport.current = false;
+      hasLayoutWithEdges.current = false;
+      hasInitialLayout.current = false;
+      prevNodeIds.current = new Set();
+      prevLayoutVersion.current = 0;
+      lastProjectPath.current = projectPath;
+    }
+  }, [projectPath]);
+
+  // Determine React Flow color mode based on current theme
+  const effectiveTheme = useAppStore((state) => state.getEffectiveTheme());
+  const [systemColorMode, setSystemColorMode] = useState<'dark' | 'light'>(() => {
+    if (typeof window === 'undefined') return 'dark';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  });
+
+  useEffect(() => {
+    if (effectiveTheme !== 'system') return;
+    if (typeof window === 'undefined') return;
+
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    const update = () => setSystemColorMode(mql.matches ? 'dark' : 'light');
+    update();
+
+    // Safari < 14 fallback
+    if (mql.addEventListener) {
+      mql.addEventListener('change', update);
+      return () => mql.removeEventListener('change', update);
+    }
+    mql.addListener(update);
+    return () => mql.removeListener(update);
+  }, [effectiveTheme]);
+
+  const themeOption = themeOptions.find((t) => t.value === effectiveTheme);
+  const colorMode =
+    effectiveTheme === 'system' ? systemColorMode : themeOption?.isDark ? 'dark' : 'light';
+
+  // Filter state (category, status, and negative toggle are local to graph view)
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [selectedStatuses, setSelectedStatuses] = useState<string[]>([]);
+  const [isNegativeFilter, setIsNegativeFilter] = useState(false);
+
+  // Debounce search query for performance with large graphs
+  const [debouncedSearchQuery] = useDebounceValue(searchQuery, 200);
+
+  // Combined filter state
+  const filterState: GraphFilterState = {
+    searchQuery: debouncedSearchQuery,
+    selectedCategories,
+    selectedStatuses,
+    isNegativeFilter,
+  };
+
+  // Calculate filter results
+  const filterResult = useGraphFilter(features, filterState, runningAutoTasks);
+
+  const estimatedEdgeCount = useMemo(() => {
+    return features.reduce((total, feature) => {
+      const deps = feature.dependencies as string[] | undefined;
+      return total + (deps?.length ?? 0);
+    }, 0);
+  }, [features]);
+
+  const isLargeGraph =
+    features.length >= GRAPH_LARGE_NODE_COUNT || estimatedEdgeCount >= GRAPH_LARGE_EDGE_COUNT;
+  const renderMode = isLargeGraph ? GRAPH_RENDER_MODE_COMPACT : GRAPH_RENDER_MODE_FULL;
+
+  // Transform features to nodes and edges with filter results
+  const { nodes: initialNodes, edges: initialEdges } = useGraphNodes({
+    features,
+    runningAutoTasks,
+    filterResult,
+    actionCallbacks: nodeActionCallbacks,
+    backgroundSettings,
+    renderMode,
+    enableEdgeAnimations: !isLargeGraph,
+  });
+
+  // Apply layout
+  const { layoutedNodes, layoutedEdges, layoutVersion, runLayout } = useGraphLayout({
+    nodes: initialNodes,
+    edges: initialEdges,
+  });
+
+  // React Flow state
+  const [nodes, setNodes, onNodesChange] = useNodesState(layoutedNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(layoutedEdges);
+
+  // Update nodes/edges when features change, but preserve user positions
+  useEffect(() => {
+    const currentNodeIds = new Set(layoutedNodes.map((n) => n.id));
+    const isInitialRender = !hasInitialLayout.current;
+    // Detect if a fresh layout was computed (structure changed)
+    const layoutWasRecomputed = layoutVersion !== prevLayoutVersion.current;
+
+    // Check if there are new nodes that need layout
+    const hasNewNodes = layoutedNodes.some((n) => !prevNodeIds.current.has(n.id));
+
+    if (isInitialRender || layoutWasRecomputed) {
+      // Apply full layout for initial render OR when layout was recomputed due to structure change
+      setNodes(layoutedNodes);
+      setEdges(layoutedEdges);
+      hasInitialLayout.current = true;
+      prevLayoutVersion.current = layoutVersion;
+    } else if (hasNewNodes) {
+      // New nodes added - need to re-layout but try to preserve existing positions
+      setNodes((currentNodes) => {
+        const positionMap = new Map(currentNodes.map((n) => [n.id, n.position]));
+        return layoutedNodes.map((node) => ({
+          ...node,
+          position: positionMap.get(node.id) || node.position,
+        }));
+      });
+      setEdges(layoutedEdges);
+    } else {
+      // No new nodes - just update data without changing positions
+      setNodes((currentNodes) => {
+        const positionMap = new Map(currentNodes.map((n) => [n.id, n.position]));
+        return layoutedNodes.map((node) => ({
+          ...node,
+          position: positionMap.get(node.id) || node.position,
+        }));
+      });
+      // Update edges without triggering re-render of nodes
+      setEdges(layoutedEdges);
+    }
+
+    // Update prev node IDs for next comparison
+    prevNodeIds.current = currentNodeIds;
+
+    // Restore viewport from session storage after initial layout
+    if (isInitialRender && projectPath && !hasRestoredViewport.current) {
+      const savedViewport = loadViewportFromStorage(projectPath);
+      if (savedViewport) {
+        // Use setTimeout to ensure React Flow has finished rendering
+        setTimeout(() => {
+          setViewport(savedViewport, { duration: 0 });
+        }, 50);
+      }
+      hasRestoredViewport.current = true;
+    }
+  }, [layoutedNodes, layoutedEdges, layoutVersion, setNodes, setEdges, projectPath, setViewport]);
+
+  // Force layout recalculation on initial mount when edges are available
+  // This fixes timing issues when navigating directly to the graph route
+  useEffect(() => {
+    // Only run once: when we have nodes and edges but haven't done a layout with edges yet
+    if (!hasLayoutWithEdges.current && layoutedNodes.length > 0 && layoutedEdges.length > 0) {
+      hasLayoutWithEdges.current = true;
+      // Small delay to ensure React Flow is mounted and ready
+      const timeoutId = setTimeout(() => {
+        const { nodes: relayoutedNodes, edges: relayoutedEdges } = runLayout('LR');
+        setNodes(relayoutedNodes);
+        setEdges(relayoutedEdges);
+        fitView({ padding: 0.2, duration: 300 });
+      }, 100);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [layoutedNodes.length, layoutedEdges.length, runLayout, setNodes, setEdges, fitView]);
+
+  // Save viewport when user pans or zooms
+  const handleMoveEnd = useCallback(() => {
+    if (projectPath) {
+      const viewport = getViewport();
+      saveViewportToStorage(projectPath, viewport);
+    }
+  }, [projectPath, getViewport]);
+
+  // Handle layout direction change
+  const handleRunLayout = useCallback(
+    (direction: 'LR' | 'TB') => {
+      setLayoutDirection(direction);
+      const { nodes: relayoutedNodes, edges: relayoutedEdges } = runLayout(direction);
+      setNodes(relayoutedNodes);
+      setEdges(relayoutedEdges);
+      fitView({ padding: 0.2, duration: 300 });
+    },
+    [runLayout, setNodes, setEdges, fitView]
+  );
+
+  // Handle clear all filters
+  const handleClearFilters = useCallback(() => {
+    onSearchQueryChange('');
+    setSelectedCategories([]);
+    setSelectedStatuses([]);
+    setIsNegativeFilter(false);
+  }, [onSearchQueryChange]);
+
+  // Handle node double click
+  const handleNodeDoubleClick = useCallback(
+    (_event: React.MouseEvent, node: Node<TaskNodeData>) => {
+      onNodeDoubleClick?.(node.id);
+    },
+    [onNodeDoubleClick]
+  );
+
+  // Handle edge connection (creating dependencies)
+  const handleConnect = useCallback(
+    async (connection: Connection) => {
+      if (!connection.source || !connection.target) return;
+
+      // In React Flow, dragging from source handle to target handle means:
+      // - source = the node being dragged FROM (the prerequisite/dependency)
+      // - target = the node being dragged TO (the dependent task)
+      await onCreateDependency?.(connection.source, connection.target);
+    },
+    [onCreateDependency]
+  );
+
+  // Allow any connection between different nodes
+  const isValidConnection = useCallback(
+    (connection: Connection | { source: string; target: string }) => {
+      // Don't allow self-connections
+      if (connection.source === connection.target) return false;
+      return true;
+    },
+    []
+  );
+
+  // Handle orientation changes on mobile devices
+  // When rotating from landscape to portrait, the view may incorrectly zoom in
+  // This effect listens for orientation changes and calls fitView to correct the viewport
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    // Track the previous orientation to detect changes
+    let previousWidth = window.innerWidth;
+    let previousHeight = window.innerHeight;
+
+    // Track timeout IDs for cleanup
+    let orientationTimeoutId: ReturnType<typeof setTimeout> | null = null;
+    let resizeTimeoutId: ReturnType<typeof setTimeout> | null = null;
+
+    const handleOrientationChange = () => {
+      // Clear any pending timeout
+      if (orientationTimeoutId) {
+        clearTimeout(orientationTimeoutId);
+      }
+      // Small delay to allow the browser to complete the orientation change
+      orientationTimeoutId = setTimeout(() => {
+        fitView({ padding: 0.2, duration: 300 });
+        orientationTimeoutId = null;
+      }, 100);
+    };
+
+    const handleResize = () => {
+      const currentWidth = window.innerWidth;
+      const currentHeight = window.innerHeight;
+
+      // Detect orientation change by checking if width and height swapped significantly
+      // This happens when device rotates between portrait and landscape
+      const widthDiff = Math.abs(currentWidth - previousHeight);
+      const heightDiff = Math.abs(currentHeight - previousWidth);
+
+      // If the dimensions are close to being swapped (within 100px tolerance)
+      // it's likely an orientation change
+      const isOrientationChange = widthDiff < 100 && heightDiff < 100;
+
+      if (isOrientationChange) {
+        // Clear any pending timeout
+        if (resizeTimeoutId) {
+          clearTimeout(resizeTimeoutId);
+        }
+        // Delay fitView to allow browser to complete the layout
+        resizeTimeoutId = setTimeout(() => {
+          fitView({ padding: 0.2, duration: 300 });
+          resizeTimeoutId = null;
+        }, 150);
+      }
+
+      previousWidth = currentWidth;
+      previousHeight = currentHeight;
+    };
+
+    // Listen for orientation change event (mobile specific)
+    window.addEventListener('orientationchange', handleOrientationChange);
+    // Also listen for resize as a fallback (some browsers don't fire orientationchange)
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('orientationchange', handleOrientationChange);
+      window.removeEventListener('resize', handleResize);
+      // Clear any pending timeouts
+      if (orientationTimeoutId) {
+        clearTimeout(orientationTimeoutId);
+      }
+      if (resizeTimeoutId) {
+        clearTimeout(resizeTimeoutId);
+      }
+    };
+  }, [fitView]);
+
+  // Handle edge deletion (when user presses delete key or uses other deletion methods)
+  const handleEdgesDelete = useCallback(
+    (deletedEdges: Edge[]) => {
+      console.log('onEdgesDelete triggered', deletedEdges);
+      deletedEdges.forEach((edge) => {
+        if (nodeActionCallbacks?.onDeleteDependency) {
+          console.log('Calling onDeleteDependency from onEdgesDelete', {
+            source: edge.source,
+            target: edge.target,
+          });
+          nodeActionCallbacks.onDeleteDependency(edge.source, edge.target);
+        }
+      });
+    },
+    [nodeActionCallbacks]
+  );
+
+  // MiniMap node color based on status
+  const minimapNodeColor = useCallback((node: Node<TaskNodeData>) => {
+    const data = node.data as TaskNodeData | undefined;
+    const status = data?.status;
+    switch (status) {
+      case 'completed':
+      case 'verified':
+        return 'var(--status-success)';
+      case 'in_progress':
+        return 'var(--status-in-progress)';
+      case 'waiting_approval':
+        return 'var(--status-waiting)';
+      default:
+        if (data?.isBlocked) return 'rgb(249, 115, 22)'; // orange-500
+        if (data?.error) return 'var(--status-error)';
+        return 'var(--muted-foreground)';
+    }
+  }, []);
+
+  const shouldRenderVisibleOnly = isLargeGraph;
+
+  return (
+    <div className={cn('w-full h-full', className)} style={backgroundStyle}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={isLocked ? undefined : onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onEdgesDelete={handleEdgesDelete}
+        onNodeDoubleClick={handleNodeDoubleClick}
+        onMoveEnd={handleMoveEnd}
+        onConnect={handleConnect}
+        isValidConnection={isValidConnection}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        colorMode={colorMode}
+        fitView
+        fitViewOptions={{ padding: 0.2 }}
+        minZoom={0.1}
+        maxZoom={2}
+        selectionMode={SelectionMode.Partial}
+        connectionMode={ConnectionMode.Loose}
+        onlyRenderVisibleElements={shouldRenderVisibleOnly}
+        proOptions={{ hideAttribution: true }}
+        className="graph-canvas"
+      >
+        <Background
+          variant={BackgroundVariant.Dots}
+          gap={20}
+          size={1}
+          color="var(--border)"
+          className="opacity-50"
+        />
+
+        <MiniMap
+          nodeColor={minimapNodeColor}
+          nodeStrokeWidth={3}
+          zoomable
+          pannable
+          className="border-border! rounded-lg shadow-lg"
+          style={{ backgroundColor: 'color-mix(in oklch, var(--popover) 90%, transparent)' }}
+        />
+
+        <GraphControls
+          isLocked={isLocked}
+          onToggleLock={() => setIsLocked(!isLocked)}
+          onRunLayout={handleRunLayout}
+          layoutDirection={layoutDirection}
+        />
+
+        <GraphFilterControls
+          filterState={filterState}
+          availableCategories={filterResult.availableCategories}
+          hasActiveFilter={filterResult.hasActiveFilter}
+          searchQuery={searchQuery}
+          onSearchQueryChange={onSearchQueryChange}
+          onCategoriesChange={setSelectedCategories}
+          onStatusesChange={setSelectedStatuses}
+          onNegativeFilterChange={setIsNegativeFilter}
+          onClearFilters={handleClearFilters}
+        />
+
+        <GraphLegend />
+
+        {/* Worktree selector + actions */}
+        <Panel position="top-right" className="mt-14 sm:mt-0">
+          <div className="flex flex-col items-end gap-2">
+            {worktreeSelector}
+            {onOpenPlanDialog && (
+              <div className="flex items-center gap-1.5 rounded-md border border-border bg-secondary/60 px-2 py-1 shadow-sm">
+                {hasPendingPlan && (
+                  <button
+                    onClick={onOpenPlanDialog}
+                    className="flex items-center text-emerald-500 hover:text-emerald-400 transition-colors"
+                    data-testid="graph-plan-review-button"
+                  >
+                    <ClipboardCheck className="w-4 h-4" />
+                  </button>
+                )}
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={onOpenPlanDialog}
+                  className="gap-1.5"
+                  data-testid="graph-plan-button"
+                >
+                  <Wand2 className="w-4 h-4" />
+                  Plan
+                </Button>
+                {onPlanUseSelectedWorktreeBranchChange &&
+                  planUseSelectedWorktreeBranch !== undefined && (
+                    <PlanSettingsPopover
+                      planUseSelectedWorktreeBranch={planUseSelectedWorktreeBranch}
+                      onPlanUseSelectedWorktreeBranchChange={onPlanUseSelectedWorktreeBranchChange}
+                    />
+                  )}
+              </div>
+            )}
+            <Button
+              variant="default"
+              size="sm"
+              onClick={onAddFeature}
+              className="gap-1.5 w-full sm:w-auto"
+            >
+              <Plus className="w-4 h-4" />
+              Add Feature
+            </Button>
+          </div>
+        </Panel>
+
+        {/* Empty state when all nodes are filtered out */}
+        {filterResult.hasActiveFilter && filterResult.matchedNodeIds.size === 0 && (
+          <Panel position="top-center" className="mt-20">
+            <div
+              className="flex flex-col items-center gap-3 p-6 rounded-lg backdrop-blur-sm border border-border shadow-lg text-popover-foreground"
+              style={{ backgroundColor: 'color-mix(in oklch, var(--popover) 95%, transparent)' }}
+            >
+              <SearchX className="w-10 h-10 text-muted-foreground" />
+              <div className="text-center">
+                <p className="text-sm font-medium">No matching tasks</p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Try adjusting your filters or search query
+                </p>
+              </div>
+              <Button variant="outline" size="sm" onClick={handleClearFilters} className="mt-1">
+                Clear Filters
+              </Button>
+            </div>
+          </Panel>
+        )}
+      </ReactFlow>
+    </div>
+  );
+}
+
+// Wrap with provider for hooks to work
+export function GraphCanvas(props: GraphCanvasProps) {
+  return (
+    <ReactFlowProvider>
+      <GraphCanvasInner {...props} />
+    </ReactFlowProvider>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/graph-view/graph-view.tsx b/temp_repo/apps/ui/src/components/views/graph-view/graph-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7a82c8e6b407216291b3d812ac257aa856a1aa3d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/graph-view/graph-view.tsx
@@ -0,0 +1,248 @@
+import { useMemo, useCallback, type ReactNode } from 'react';
+import { Feature, useAppStore } from '@/store/app-store';
+import { GraphCanvas } from './graph-canvas';
+import { useBoardBackground } from '../board-view/hooks';
+import { NodeActionCallbacks } from './hooks';
+import { wouldCreateCircularDependency, dependencyExists } from '@automaker/dependency-resolver';
+import { toast } from 'sonner';
+
+interface GraphViewProps {
+  features: Feature[];
+  runningAutoTasks: string[];
+  currentWorktreePath: string | null;
+  currentWorktreeBranch: string | null;
+  projectPath: string | null;
+  searchQuery: string;
+  onSearchQueryChange: (query: string) => void;
+  onEditFeature: (feature: Feature) => void;
+  onViewOutput: (feature: Feature) => void;
+  onStartTask?: (feature: Feature) => void;
+  onStopTask?: (feature: Feature) => void;
+  onResumeTask?: (feature: Feature) => void;
+  onUpdateFeature?: (featureId: string, updates: Partial<Feature>) => void;
+  onSpawnTask?: (feature: Feature) => void;
+  onDeleteTask?: (feature: Feature) => void;
+  onAddFeature?: () => void;
+  onOpenPlanDialog?: () => void;
+  hasPendingPlan?: boolean;
+  planUseSelectedWorktreeBranch?: boolean;
+  onPlanUseSelectedWorktreeBranchChange?: (value: boolean) => void;
+  worktreeSelector?: ReactNode;
+}
+
+export function GraphView({
+  features,
+  runningAutoTasks,
+  currentWorktreePath,
+  currentWorktreeBranch,
+  projectPath,
+  searchQuery,
+  onSearchQueryChange,
+  onEditFeature,
+  onViewOutput,
+  onStartTask,
+  onStopTask,
+  onResumeTask,
+  onUpdateFeature,
+  onSpawnTask,
+  onDeleteTask,
+  onAddFeature,
+  onOpenPlanDialog,
+  hasPendingPlan,
+  planUseSelectedWorktreeBranch,
+  onPlanUseSelectedWorktreeBranchChange,
+  worktreeSelector,
+}: GraphViewProps) {
+  const currentProject = useAppStore((state) => state.currentProject);
+
+  // Use the same background hook as the board view
+  const { backgroundImageStyle, backgroundSettings } = useBoardBackground({ currentProject });
+
+  // Filter features by current worktree (same logic as board view)
+  const filteredFeatures = useMemo(() => {
+    const effectiveBranch = currentWorktreeBranch;
+
+    return features.filter((f) => {
+      const featureBranch = f.branchName as string | undefined;
+
+      if (!featureBranch) {
+        // No branch assigned - show only on primary worktree
+        return currentWorktreePath === null;
+      } else if (effectiveBranch === null) {
+        // Viewing main but branch not initialized
+        return projectPath
+          ? useAppStore.getState().isPrimaryWorktreeBranch(projectPath, featureBranch)
+          : false;
+      } else {
+        // Match by branch name
+        return featureBranch === effectiveBranch;
+      }
+    });
+  }, [features, currentWorktreePath, currentWorktreeBranch, projectPath]);
+
+  // Handle node double click - edit
+  const handleNodeDoubleClick = useCallback(
+    (featureId: string) => {
+      const feature = features.find((f) => f.id === featureId);
+      if (feature) {
+        onEditFeature(feature);
+      }
+    },
+    [features, onEditFeature]
+  );
+
+  // Handle creating a dependency via edge connection
+  const handleCreateDependency = useCallback(
+    async (sourceId: string, targetId: string): Promise<boolean> => {
+      const targetFeature = features.find((f) => f.id === targetId);
+
+      // Prevent self-dependency
+      if (sourceId === targetId) {
+        toast.error('A task cannot depend on itself');
+        return false;
+      }
+
+      // Check if dependency already exists
+      if (dependencyExists(features, sourceId, targetId)) {
+        toast.info('Dependency already exists');
+        return false;
+      }
+
+      // Check for circular dependency
+      // This checks: if we make targetId depend on sourceId, would it create a cycle?
+      // A cycle would occur if sourceId already depends on targetId (transitively)
+      const wouldCycle = wouldCreateCircularDependency(features, sourceId, targetId);
+      if (wouldCycle) {
+        toast.error('Cannot create circular dependency', {
+          description: 'This would create a dependency cycle',
+        });
+        return false;
+      }
+
+      // Get target feature and update its dependencies
+      if (!targetFeature) {
+        toast.error('Target task not found');
+        return false;
+      }
+
+      const currentDeps = (targetFeature.dependencies as string[] | undefined) || [];
+
+      // Add the dependency
+      onUpdateFeature?.(targetId, {
+        dependencies: [...currentDeps, sourceId],
+      });
+
+      toast.success('Dependency created');
+      return true;
+    },
+    [features, onUpdateFeature]
+  );
+
+  // Node action callbacks for dropdown menu
+  const nodeActionCallbacks: NodeActionCallbacks = useMemo(
+    () => ({
+      onViewLogs: (featureId: string) => {
+        const feature = features.find((f) => f.id === featureId);
+        if (feature) {
+          onViewOutput(feature);
+        }
+      },
+      onViewDetails: (featureId: string) => {
+        const feature = features.find((f) => f.id === featureId);
+        if (feature) {
+          onEditFeature(feature);
+        }
+      },
+      onStartTask: (featureId: string) => {
+        const feature = features.find((f) => f.id === featureId);
+        if (feature) {
+          onStartTask?.(feature);
+        }
+      },
+      onStopTask: (featureId: string) => {
+        const feature = features.find((f) => f.id === featureId);
+        if (feature) {
+          onStopTask?.(feature);
+        }
+      },
+      onResumeTask: (featureId: string) => {
+        const feature = features.find((f) => f.id === featureId);
+        if (feature) {
+          onResumeTask?.(feature);
+        }
+      },
+      onSpawnTask: (featureId: string) => {
+        const feature = features.find((f) => f.id === featureId);
+        if (feature) {
+          onSpawnTask?.(feature);
+        }
+      },
+      onDeleteTask: (featureId: string) => {
+        const feature = features.find((f) => f.id === featureId);
+        if (feature) {
+          onDeleteTask?.(feature);
+        }
+      },
+      onDeleteDependency: (sourceId: string, targetId: string) => {
+        // Find the target feature and remove the source from its dependencies
+        console.log('onDeleteDependency called', { sourceId, targetId });
+        const targetFeature = features.find((f) => f.id === targetId);
+        if (!targetFeature) {
+          console.error('Target feature not found:', targetId);
+          return;
+        }
+
+        const currentDeps = (targetFeature.dependencies as string[] | undefined) || [];
+        console.log('Current dependencies:', currentDeps);
+        const newDeps = currentDeps.filter((depId) => depId !== sourceId);
+        console.log('New dependencies:', newDeps);
+
+        if (onUpdateFeature) {
+          console.log('Calling onUpdateFeature');
+          onUpdateFeature(targetId, {
+            dependencies: newDeps,
+          });
+        } else {
+          console.error('onUpdateFeature is not defined!');
+        }
+
+        toast.success('Dependency removed');
+      },
+    }),
+    [
+      features,
+      onViewOutput,
+      onEditFeature,
+      onStartTask,
+      onStopTask,
+      onResumeTask,
+      onSpawnTask,
+      onDeleteTask,
+      onUpdateFeature,
+    ]
+  );
+
+  return (
+    <div className="flex-1 overflow-hidden relative">
+      <GraphCanvas
+        features={filteredFeatures}
+        runningAutoTasks={runningAutoTasks}
+        searchQuery={searchQuery}
+        onSearchQueryChange={onSearchQueryChange}
+        onNodeDoubleClick={handleNodeDoubleClick}
+        nodeActionCallbacks={nodeActionCallbacks}
+        onCreateDependency={handleCreateDependency}
+        onAddFeature={onAddFeature}
+        onOpenPlanDialog={onOpenPlanDialog}
+        hasPendingPlan={hasPendingPlan}
+        planUseSelectedWorktreeBranch={planUseSelectedWorktreeBranch}
+        onPlanUseSelectedWorktreeBranchChange={onPlanUseSelectedWorktreeBranchChange}
+        worktreeSelector={worktreeSelector}
+        backgroundStyle={backgroundImageStyle}
+        backgroundSettings={backgroundSettings}
+        projectPath={projectPath}
+        className="h-full"
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/graph-view/hooks/index.ts b/temp_repo/apps/ui/src/components/views/graph-view/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..579f583e6f77fff661a5b32eef4091f5edac4578
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/graph-view/hooks/index.ts
@@ -0,0 +1,9 @@
+export {
+  useGraphNodes,
+  type TaskNode,
+  type DependencyEdge,
+  type TaskNodeData,
+  type NodeActionCallbacks,
+} from './use-graph-nodes';
+export { useGraphLayout } from './use-graph-layout';
+export { useGraphFilter, type GraphFilterState, type GraphFilterResult } from './use-graph-filter';
diff --git a/temp_repo/apps/ui/src/components/views/graph-view/hooks/use-graph-filter.ts b/temp_repo/apps/ui/src/components/views/graph-view/hooks/use-graph-filter.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e769e4e3e78212d50d1a892b1858673fab13a935
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/graph-view/hooks/use-graph-filter.ts
@@ -0,0 +1,240 @@
+import { useMemo } from 'react';
+import { Feature } from '@/store/app-store';
+
+export interface GraphFilterState {
+  searchQuery: string;
+  selectedCategories: string[];
+  selectedStatuses: string[];
+  isNegativeFilter: boolean;
+}
+
+// Available status filter values
+export const STATUS_FILTER_OPTIONS = [
+  'running',
+  'paused',
+  'backlog',
+  'waiting_approval',
+  'verified',
+] as const;
+
+export type StatusFilterValue = (typeof STATUS_FILTER_OPTIONS)[number];
+
+export interface GraphFilterResult {
+  matchedNodeIds: Set<string>;
+  highlightedNodeIds: Set<string>;
+  highlightedEdgeIds: Set<string>;
+  availableCategories: string[];
+  hasActiveFilter: boolean;
+}
+
+/**
+ * Traverses up the dependency tree to find all ancestors of a node
+ */
+function getAncestors(
+  featureId: string,
+  featureMap: Map<string, Feature>,
+  visited: Set<string>
+): void {
+  if (visited.has(featureId)) return;
+  visited.add(featureId);
+
+  const feature = featureMap.get(featureId);
+  if (!feature?.dependencies) return;
+
+  const deps = feature.dependencies as string[] | undefined;
+  if (!deps) return;
+
+  for (const depId of deps) {
+    if (featureMap.has(depId)) {
+      getAncestors(depId, featureMap, visited);
+    }
+  }
+}
+
+/**
+ * Traverses down to find all descendants (features that depend on this one)
+ */
+function getDescendants(
+  featureId: string,
+  dependentsMap: Map<string, string[]>,
+  visited: Set<string>
+): void {
+  if (visited.has(featureId)) return;
+  visited.add(featureId);
+
+  const dependents = dependentsMap.get(featureId);
+  if (!dependents || dependents.length === 0) return;
+
+  for (const dependentId of dependents) {
+    getDescendants(dependentId, dependentsMap, visited);
+  }
+}
+
+function buildDependentsMap(features: Feature[]): Map<string, string[]> {
+  const dependentsMap = new Map<string, string[]>();
+
+  for (const feature of features) {
+    const deps = feature.dependencies as string[] | undefined;
+    if (!deps || deps.length === 0) continue;
+
+    for (const depId of deps) {
+      const existing = dependentsMap.get(depId);
+      if (existing) {
+        existing.push(feature.id);
+      } else {
+        dependentsMap.set(depId, [feature.id]);
+      }
+    }
+  }
+
+  return dependentsMap;
+}
+
+/**
+ * Gets all edges in the highlighted path
+ */
+function getHighlightedEdges(highlightedNodeIds: Set<string>, features: Feature[]): Set<string> {
+  const edges = new Set<string>();
+
+  for (const feature of features) {
+    if (!highlightedNodeIds.has(feature.id)) continue;
+    const deps = feature.dependencies as string[] | undefined;
+    if (!deps) continue;
+
+    for (const depId of deps) {
+      if (highlightedNodeIds.has(depId)) {
+        edges.add(`${depId}->${feature.id}`);
+      }
+    }
+  }
+
+  return edges;
+}
+
+/**
+ * Gets the effective status of a feature (accounting for running state)
+ * Treats completed (archived) as verified
+ */
+function getEffectiveStatus(feature: Feature, runningTaskIds: Set<string>): StatusFilterValue {
+  if (feature.status === 'in_progress') {
+    return runningTaskIds.has(feature.id) ? 'running' : 'paused';
+  }
+  // Treat completed (archived) as verified
+  if (feature.status === 'completed') {
+    return 'verified';
+  }
+  return feature.status as StatusFilterValue;
+}
+
+/**
+ * Hook to calculate graph filter results based on search query, categories, statuses, and filter mode
+ */
+export function useGraphFilter(
+  features: Feature[],
+  filterState: GraphFilterState,
+  runningAutoTasks: string[] = []
+): GraphFilterResult {
+  const { searchQuery, selectedCategories, selectedStatuses, isNegativeFilter } = filterState;
+
+  return useMemo(() => {
+    // Extract all unique categories
+    const availableCategories = Array.from(
+      new Set(features.map((f) => f.category).filter(Boolean))
+    ).sort();
+
+    const normalizedQuery = searchQuery.toLowerCase().trim();
+    const runningTaskIds = new Set(runningAutoTasks);
+    const hasSearchQuery = normalizedQuery.length > 0;
+    const hasCategoryFilter = selectedCategories.length > 0;
+    const hasStatusFilter = selectedStatuses.length > 0;
+    const hasActiveFilter =
+      hasSearchQuery || hasCategoryFilter || hasStatusFilter || isNegativeFilter;
+
+    // If no filters active, return empty sets (show all nodes normally)
+    if (!hasActiveFilter) {
+      return {
+        matchedNodeIds: new Set<string>(),
+        highlightedNodeIds: new Set<string>(),
+        highlightedEdgeIds: new Set<string>(),
+        availableCategories,
+        hasActiveFilter: false,
+      };
+    }
+
+    // Find directly matched nodes
+    const matchedNodeIds = new Set<string>();
+    const featureMap = new Map(features.map((f) => [f.id, f]));
+    const dependentsMap = buildDependentsMap(features);
+
+    for (const feature of features) {
+      let matchesSearch = true;
+      let matchesCategory = true;
+      let matchesStatus = true;
+
+      // Check search query match (title or description)
+      if (hasSearchQuery) {
+        const titleMatch = feature.title?.toLowerCase().includes(normalizedQuery);
+        const descMatch = feature.description?.toLowerCase().includes(normalizedQuery);
+        matchesSearch = titleMatch || descMatch;
+      }
+
+      // Check category match
+      if (hasCategoryFilter) {
+        matchesCategory = selectedCategories.includes(feature.category);
+      }
+
+      // Check status match
+      if (hasStatusFilter) {
+        const effectiveStatus = getEffectiveStatus(feature, runningTaskIds);
+        matchesStatus = selectedStatuses.includes(effectiveStatus);
+      }
+
+      // All conditions must be true for a match
+      if (matchesSearch && matchesCategory && matchesStatus) {
+        matchedNodeIds.add(feature.id);
+      }
+    }
+
+    // Apply negative filter if enabled (invert the matched set)
+    let effectiveMatchedIds: Set<string>;
+    if (isNegativeFilter) {
+      effectiveMatchedIds = new Set(
+        features.filter((f) => !matchedNodeIds.has(f.id)).map((f) => f.id)
+      );
+    } else {
+      effectiveMatchedIds = matchedNodeIds;
+    }
+
+    // Calculate full path (ancestors + descendants) for highlighted nodes
+    const highlightedNodeIds = new Set<string>();
+
+    for (const id of effectiveMatchedIds) {
+      // Add the matched node itself
+      highlightedNodeIds.add(id);
+
+      // Add all ancestors (dependencies)
+      getAncestors(id, featureMap, highlightedNodeIds);
+
+      // Add all descendants (dependents)
+      getDescendants(id, dependentsMap, highlightedNodeIds);
+    }
+
+    // Get edges in the highlighted path
+    const highlightedEdgeIds = getHighlightedEdges(highlightedNodeIds, features);
+
+    return {
+      matchedNodeIds: effectiveMatchedIds,
+      highlightedNodeIds,
+      highlightedEdgeIds,
+      availableCategories,
+      hasActiveFilter: true,
+    };
+  }, [
+    features,
+    searchQuery,
+    selectedCategories,
+    selectedStatuses,
+    isNegativeFilter,
+    runningAutoTasks,
+  ]);
+}
diff --git a/temp_repo/apps/ui/src/components/views/graph-view/hooks/use-graph-layout.ts b/temp_repo/apps/ui/src/components/views/graph-view/hooks/use-graph-layout.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e3634bd4f62ca995de2f2833303cf59cb9d3e593
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/graph-view/hooks/use-graph-layout.ts
@@ -0,0 +1,135 @@
+import { useCallback, useMemo, useRef } from 'react';
+import dagre from 'dagre';
+import { TaskNode, DependencyEdge } from './use-graph-nodes';
+
+const NODE_WIDTH = 280;
+const NODE_HEIGHT = 120;
+
+interface UseGraphLayoutProps {
+  nodes: TaskNode[];
+  edges: DependencyEdge[];
+}
+
+/**
+ * Applies dagre layout to position nodes in a hierarchical DAG
+ * Dependencies flow left-to-right
+ */
+export function useGraphLayout({ nodes, edges }: UseGraphLayoutProps) {
+  // Cache the last computed positions to avoid recalculating layout
+  const positionCache = useRef<Map<string, { x: number; y: number }>>(new Map());
+  const lastStructureKey = useRef<string>('');
+  // Track layout version to signal when fresh layout was computed
+  const layoutVersion = useRef<number>(0);
+
+  const getLayoutedElements = useCallback(
+    (
+      inputNodes: TaskNode[],
+      inputEdges: DependencyEdge[],
+      direction: 'LR' | 'TB' = 'LR'
+    ): { nodes: TaskNode[]; edges: DependencyEdge[] } => {
+      const dagreGraph = new dagre.graphlib.Graph();
+      dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+      const isHorizontal = direction === 'LR';
+      dagreGraph.setGraph({
+        rankdir: direction,
+        nodesep: 50,
+        ranksep: 100,
+        marginx: 50,
+        marginy: 50,
+      });
+
+      inputNodes.forEach((node) => {
+        dagreGraph.setNode(node.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
+      });
+
+      inputEdges.forEach((edge) => {
+        dagreGraph.setEdge(edge.source, edge.target);
+      });
+
+      dagre.layout(dagreGraph);
+
+      const layoutedNodes = inputNodes.map((node) => {
+        const nodeWithPosition = dagreGraph.node(node.id);
+        const position = {
+          x: nodeWithPosition.x - NODE_WIDTH / 2,
+          y: nodeWithPosition.y - NODE_HEIGHT / 2,
+        };
+        // Update cache
+        positionCache.current.set(node.id, position);
+        return {
+          ...node,
+          position,
+          targetPosition: isHorizontal ? 'left' : 'top',
+          sourcePosition: isHorizontal ? 'right' : 'bottom',
+        } as TaskNode;
+      });
+
+      return { nodes: layoutedNodes, edges: inputEdges };
+    },
+    []
+  );
+
+  // Create a stable structure key based on node IDs AND edge connections
+  // Layout must recalculate when the dependency graph structure changes
+  const structureKey = useMemo(() => {
+    const nodeIds = nodes
+      .map((n) => n.id)
+      .sort()
+      .join(',');
+    // Include edge structure (source->target pairs) to ensure layout recalculates
+    // when dependencies change, not just when nodes are added/removed
+    const edgeConnections = edges
+      .map((e) => `${e.source}->${e.target}`)
+      .sort()
+      .join(',');
+    return `${nodeIds}|${edgeConnections}`;
+  }, [nodes, edges]);
+
+  // Initial layout - recalculate when graph structure changes (nodes added/removed OR edges/dependencies change)
+  const layoutedElements = useMemo(() => {
+    if (nodes.length === 0) {
+      positionCache.current.clear();
+      lastStructureKey.current = '';
+      return { nodes: [], edges: [], didRelayout: false };
+    }
+
+    // Check if structure changed (nodes added/removed OR dependencies changed)
+    const structureChanged = structureKey !== lastStructureKey.current;
+
+    if (structureChanged) {
+      // Structure changed - run full layout
+      lastStructureKey.current = structureKey;
+      layoutVersion.current += 1;
+      const result = getLayoutedElements(nodes, edges, 'LR');
+      return { ...result, didRelayout: true };
+    } else {
+      // Structure unchanged - preserve cached positions, just update node data
+      const layoutedNodes = nodes.map((node) => {
+        const cachedPosition = positionCache.current.get(node.id);
+        return {
+          ...node,
+          position: cachedPosition || { x: 0, y: 0 },
+          targetPosition: 'left',
+          sourcePosition: 'right',
+        } as TaskNode;
+      });
+      return { nodes: layoutedNodes, edges, didRelayout: false };
+    }
+  }, [nodes, edges, structureKey, getLayoutedElements]);
+
+  // Manual re-layout function
+  const runLayout = useCallback(
+    (direction: 'LR' | 'TB' = 'LR') => {
+      return getLayoutedElements(nodes, edges, direction);
+    },
+    [nodes, edges, getLayoutedElements]
+  );
+
+  return {
+    layoutedNodes: layoutedElements.nodes,
+    layoutedEdges: layoutedElements.edges,
+    layoutVersion: layoutVersion.current,
+    runLayout,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/graph-view/hooks/use-graph-nodes.ts b/temp_repo/apps/ui/src/components/views/graph-view/hooks/use-graph-nodes.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e1a4af87e518e387924aafff577130a7ae923d90
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/graph-view/hooks/use-graph-nodes.ts
@@ -0,0 +1,203 @@
+import { useMemo } from 'react';
+import { Node, Edge } from '@xyflow/react';
+import { Feature } from '@/store/app-store';
+import { createFeatureMap, getBlockingDependenciesFromMap } from '@automaker/dependency-resolver';
+import { GRAPH_RENDER_MODE_FULL, type GraphRenderMode } from '../constants';
+import { GraphFilterResult } from './use-graph-filter';
+
+export interface TaskNodeData extends Feature {
+  // Re-declare properties from BaseFeature that have index signature issues
+  priority?: number;
+  error?: string;
+  branchName?: string;
+  dependencies?: string[];
+  // Task node specific properties
+  isBlocked: boolean;
+  isRunning: boolean;
+  blockingDependencies: string[];
+  // Filter highlight states
+  isMatched?: boolean;
+  isHighlighted?: boolean;
+  isDimmed?: boolean;
+  // Background/theme settings
+  cardOpacity?: number;
+  cardGlassmorphism?: boolean;
+  cardBorderEnabled?: boolean;
+  cardBorderOpacity?: number;
+  // Action callbacks
+  onViewLogs?: () => void;
+  onViewDetails?: () => void;
+  onStartTask?: () => void;
+  onStopTask?: () => void;
+  onResumeTask?: () => void;
+  onSpawnTask?: () => void;
+  onDeleteTask?: () => void;
+  renderMode?: GraphRenderMode;
+}
+
+export type TaskNode = Node<TaskNodeData, 'task'>;
+export type DependencyEdge = Edge<{
+  sourceStatus: Feature['status'];
+  targetStatus: Feature['status'];
+  isHighlighted?: boolean;
+  isDimmed?: boolean;
+  onDeleteDependency?: (sourceId: string, targetId: string) => void;
+  renderMode?: GraphRenderMode;
+}>;
+
+export interface NodeActionCallbacks {
+  onViewLogs?: (featureId: string) => void;
+  onViewDetails?: (featureId: string) => void;
+  onStartTask?: (featureId: string) => void;
+  onStopTask?: (featureId: string) => void;
+  onResumeTask?: (featureId: string) => void;
+  onSpawnTask?: (featureId: string) => void;
+  onDeleteTask?: (featureId: string) => void;
+  onDeleteDependency?: (sourceId: string, targetId: string) => void;
+}
+
+interface BackgroundSettings {
+  cardOpacity: number;
+  cardGlassmorphism: boolean;
+  cardBorderEnabled: boolean;
+  cardBorderOpacity: number;
+}
+
+interface UseGraphNodesProps {
+  features: Feature[];
+  runningAutoTasks: string[];
+  filterResult?: GraphFilterResult;
+  actionCallbacks?: NodeActionCallbacks;
+  backgroundSettings?: BackgroundSettings;
+  renderMode?: GraphRenderMode;
+  enableEdgeAnimations?: boolean;
+}
+
+/**
+ * Transforms features into React Flow nodes and edges
+ * Creates dependency edges based on feature.dependencies array
+ */
+export function useGraphNodes({
+  features,
+  runningAutoTasks,
+  filterResult,
+  actionCallbacks,
+  backgroundSettings,
+  renderMode = GRAPH_RENDER_MODE_FULL,
+  enableEdgeAnimations = true,
+}: UseGraphNodesProps) {
+  const { nodes, edges } = useMemo(() => {
+    const nodeList: TaskNode[] = [];
+    const edgeList: DependencyEdge[] = [];
+    const featureMap = createFeatureMap(features);
+    const runningTaskIds = new Set(runningAutoTasks);
+
+    // Extract filter state
+    const hasActiveFilter = filterResult?.hasActiveFilter ?? false;
+    const matchedNodeIds = filterResult?.matchedNodeIds ?? new Set<string>();
+    const highlightedNodeIds = filterResult?.highlightedNodeIds ?? new Set<string>();
+    const highlightedEdgeIds = filterResult?.highlightedEdgeIds ?? new Set<string>();
+
+    // Create nodes
+    features.forEach((feature) => {
+      const isRunning = runningTaskIds.has(feature.id);
+      const blockingDeps = getBlockingDependenciesFromMap(feature, featureMap);
+
+      // Calculate filter highlight states
+      const isMatched = hasActiveFilter && matchedNodeIds.has(feature.id);
+      const isHighlighted = hasActiveFilter && highlightedNodeIds.has(feature.id);
+      const isDimmed = hasActiveFilter && !highlightedNodeIds.has(feature.id);
+
+      const node: TaskNode = {
+        id: feature.id,
+        type: 'task',
+        position: { x: 0, y: 0 }, // Will be set by layout
+        data: {
+          ...feature,
+          isBlocked: blockingDeps.length > 0,
+          isRunning,
+          blockingDependencies: blockingDeps,
+          // Filter states
+          isMatched,
+          isHighlighted,
+          isDimmed,
+          // Background/theme settings
+          cardOpacity: backgroundSettings?.cardOpacity,
+          cardGlassmorphism: backgroundSettings?.cardGlassmorphism,
+          cardBorderEnabled: backgroundSettings?.cardBorderEnabled,
+          cardBorderOpacity: backgroundSettings?.cardBorderOpacity,
+          renderMode,
+          // Action callbacks (bound to this feature's ID)
+          onViewLogs: actionCallbacks?.onViewLogs
+            ? () => actionCallbacks.onViewLogs!(feature.id)
+            : undefined,
+          onViewDetails: actionCallbacks?.onViewDetails
+            ? () => actionCallbacks.onViewDetails!(feature.id)
+            : undefined,
+          onStartTask: actionCallbacks?.onStartTask
+            ? () => actionCallbacks.onStartTask!(feature.id)
+            : undefined,
+          onStopTask: actionCallbacks?.onStopTask
+            ? () => actionCallbacks.onStopTask!(feature.id)
+            : undefined,
+          onResumeTask: actionCallbacks?.onResumeTask
+            ? () => actionCallbacks.onResumeTask!(feature.id)
+            : undefined,
+          onSpawnTask: actionCallbacks?.onSpawnTask
+            ? () => actionCallbacks.onSpawnTask!(feature.id)
+            : undefined,
+          onDeleteTask: actionCallbacks?.onDeleteTask
+            ? () => actionCallbacks.onDeleteTask!(feature.id)
+            : undefined,
+        },
+      };
+
+      nodeList.push(node);
+
+      // Create edges for dependencies
+      const deps = feature.dependencies as string[] | undefined;
+      if (deps && deps.length > 0) {
+        deps.forEach((depId: string) => {
+          // Only create edge if the dependency exists in current view
+          if (featureMap.has(depId)) {
+            const sourceFeature = featureMap.get(depId)!;
+            const edgeId = `${depId}->${feature.id}`;
+
+            // Calculate edge highlight states
+            const edgeIsHighlighted = hasActiveFilter && highlightedEdgeIds.has(edgeId);
+            const edgeIsDimmed = hasActiveFilter && !highlightedEdgeIds.has(edgeId);
+
+            const edge: DependencyEdge = {
+              id: edgeId,
+              source: depId,
+              target: feature.id,
+              type: 'dependency',
+              animated: enableEdgeAnimations && (isRunning || runningTaskIds.has(depId)),
+              data: {
+                sourceStatus: sourceFeature.status as Feature['status'],
+                targetStatus: feature.status,
+                isHighlighted: edgeIsHighlighted,
+                isDimmed: edgeIsDimmed,
+                onDeleteDependency: actionCallbacks?.onDeleteDependency,
+                renderMode,
+              },
+            };
+            edgeList.push(edge);
+          }
+        });
+      }
+    });
+
+    return { nodes: nodeList, edges: edgeList };
+  }, [
+    features,
+    runningAutoTasks,
+    filterResult,
+    actionCallbacks,
+    backgroundSettings,
+    renderMode,
+    enableEdgeAnimations,
+  ]);
+
+  return { nodes, edges };
+}
diff --git a/temp_repo/apps/ui/src/components/views/graph-view/index.ts b/temp_repo/apps/ui/src/components/views/graph-view/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1cf551d543cfe5955412cf63d80f6ac45b7ef3b5
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/graph-view/index.ts
@@ -0,0 +1,9 @@
+export { GraphView } from './graph-view';
+export { GraphCanvas } from './graph-canvas';
+export { TaskNode, DependencyEdge, GraphControls, GraphLegend } from './components';
+export {
+  useGraphNodes,
+  useGraphLayout,
+  type TaskNode as TaskNodeType,
+  type DependencyEdge as DependencyEdgeType,
+} from './hooks';
diff --git a/temp_repo/apps/ui/src/components/views/ideation-view/components/ideation-dashboard.tsx b/temp_repo/apps/ui/src/components/views/ideation-view/components/ideation-dashboard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8bf6d7bba972113c3210faf345559ff851131772
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/ideation-view/components/ideation-dashboard.tsx
@@ -0,0 +1,525 @@
+/**
+ * IdeationDashboard - Main dashboard showing all generated suggestions
+ * First page users see - shows all ideas ready for accept/reject
+ */
+
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import { AlertCircle, Plus, X, Sparkles, Lightbulb, Trash2 } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+import { useIdeationStore, type GenerationJob } from '@/store/ideation-store';
+import { useAppStore } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import type { AnalysisSuggestion } from '@automaker/types';
+
+// Helper for consistent pluralization of "idea/ideas"
+const pluralizeIdea = (count: number) => `idea${count !== 1 ? 's' : ''}`;
+
+// Helper to map priority to Badge variant
+const getPriorityVariant = (
+  priority: string
+):
+  | 'default'
+  | 'secondary'
+  | 'destructive'
+  | 'outline'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info' => {
+  switch (priority.toLowerCase()) {
+    case 'high':
+      return 'error';
+    case 'medium':
+      return 'warning';
+    case 'low':
+      return 'info';
+    default:
+      return 'secondary';
+  }
+};
+
+interface IdeationDashboardProps {
+  onGenerateIdeas: () => void;
+  onAcceptAllReady?: (isReady: boolean, count: number, handler: () => Promise<void>) => void;
+  onDiscardAllReady?: (isReady: boolean, count: number, handler: () => void) => void;
+}
+
+function SuggestionCard({
+  suggestion,
+  job,
+  onAccept,
+  onRemove,
+  isAdding,
+}: {
+  suggestion: AnalysisSuggestion;
+  job: GenerationJob;
+  onAccept: () => void;
+  onRemove: () => void;
+  isAdding: boolean;
+}) {
+  return (
+    <Card className="group transition-all hover:border-primary/50 hover:shadow-sm">
+      <CardContent className="p-5">
+        <div className="flex items-start gap-4">
+          <div className="flex-1 min-w-0 space-y-3">
+            <div className="flex flex-col gap-2">
+              <div className="flex items-start justify-between gap-4">
+                <h4 className="font-semibold text-base leading-tight">{suggestion.title}</h4>
+              </div>
+              <div className="flex items-center gap-2 flex-wrap">
+                <Badge
+                  variant={getPriorityVariant(suggestion.priority)}
+                  className="text-xs font-medium capitalize"
+                >
+                  {suggestion.priority}
+                </Badge>
+                <Badge
+                  variant="secondary"
+                  className="text-xs text-muted-foreground bg-secondary/40"
+                >
+                  {job.prompt.title}
+                </Badge>
+              </div>
+            </div>
+
+            <p className="text-sm text-muted-foreground leading-relaxed">
+              {suggestion.description}
+            </p>
+
+            {suggestion.rationale && (
+              <div className="relative pl-3 border-l-2 border-primary/20 mt-3 py-1">
+                <p className="text-xs text-muted-foreground/80 italic">{suggestion.rationale}</p>
+              </div>
+            )}
+          </div>
+
+          <div className="flex flex-col gap-2 shrink-0 pt-1">
+            <Button
+              size="sm"
+              onClick={onAccept}
+              disabled={isAdding}
+              className={cn(
+                'w-full gap-1.5 shadow-none transition-all',
+                isAdding ? 'opacity-80' : 'hover:ring-2 hover:ring-primary/20'
+              )}
+            >
+              {isAdding ? (
+                <Spinner size="sm" />
+              ) : (
+                <>
+                  <Plus className="w-4 h-4" />
+                  Accept
+                </>
+              )}
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={onRemove}
+              disabled={isAdding}
+              className="w-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 h-8"
+            >
+              Dismiss
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function GeneratingCard({ job }: { job: GenerationJob }) {
+  const { removeJob } = useIdeationStore();
+  const isError = job.status === 'error';
+
+  return (
+    <Card
+      className={cn(
+        'transition-all',
+        isError ? 'border-destructive/50' : 'border-blue-500/30 bg-blue-50/5 dark:bg-blue-900/5'
+      )}
+    >
+      <CardContent className="p-5">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div
+              className={cn(
+                'w-10 h-10 rounded-full flex items-center justify-center shrink-0',
+                isError ? 'bg-destructive/10 text-destructive' : 'bg-blue-500/10 text-blue-500'
+              )}
+            >
+              {isError ? <AlertCircle className="w-5 h-5" /> : <Spinner size="md" />}
+            </div>
+            <div>
+              <p className="font-medium">{job.prompt.title}</p>
+              <p className="text-sm text-muted-foreground">
+                {isError
+                  ? job.error || 'Failed to generate'
+                  : 'Analyzing codebase and generating ideas...'}
+              </p>
+            </div>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => removeJob(job.id)}
+            className="text-muted-foreground hover:text-destructive"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function TagFilter({
+  tags,
+  tagCounts,
+  selectedTags,
+  onToggleTag,
+}: {
+  tags: string[];
+  tagCounts: Record<string, number>;
+  selectedTags: Set<string>;
+  onToggleTag: (tag: string) => void;
+}) {
+  if (tags.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-2 py-2">
+      {tags.map((tag) => {
+        const isSelected = selectedTags.has(tag);
+        const count = tagCounts[tag] || 0;
+        return (
+          <button
+            key={tag}
+            onClick={() => onToggleTag(tag)}
+            className={cn(
+              'px-3.5 py-1.5 text-sm rounded-full border shadow-sm transition-all flex items-center gap-2',
+              isSelected
+                ? 'bg-primary text-primary-foreground border-primary ring-2 ring-primary/20'
+                : 'bg-card text-muted-foreground border-border hover:border-primary/50 hover:text-foreground hover:bg-accent/50'
+            )}
+          >
+            <span className="font-medium">{tag}</span>
+            <span
+              className={cn(
+                'text-xs py-0.5 px-1.5 rounded-full',
+                isSelected
+                  ? 'bg-primary-foreground/20 text-primary-foreground'
+                  : 'bg-muted text-muted-foreground'
+              )}
+            >
+              {count}
+            </span>
+          </button>
+        );
+      })}
+      {selectedTags.size > 0 && <div className="h-8 w-px bg-border mx-1" />}
+      {selectedTags.size > 0 && (
+        <button
+          onClick={() => selectedTags.forEach((tag) => onToggleTag(tag))}
+          className="px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors font-medium"
+        >
+          Clear filters
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function IdeationDashboard({
+  onGenerateIdeas,
+  onAcceptAllReady,
+  onDiscardAllReady,
+}: IdeationDashboardProps) {
+  const currentProject = useAppStore((s) => s.currentProject);
+  const generationJobs = useIdeationStore((s) => s.generationJobs);
+  const removeSuggestionFromJob = useIdeationStore((s) => s.removeSuggestionFromJob);
+  const [addingId, setAddingId] = useState<string | null>(null);
+  const [isAcceptingAll, setIsAcceptingAll] = useState(false);
+  const [selectedTags, setSelectedTags] = useState<Set<string>>(new Set());
+  const [showDiscardConfirm, setShowDiscardConfirm] = useState(false);
+
+  // Get jobs for current project only (memoized to prevent unnecessary re-renders)
+  const projectJobs = useMemo(
+    () =>
+      currentProject?.path
+        ? generationJobs.filter((job) => job.projectPath === currentProject.path)
+        : [],
+    [generationJobs, currentProject?.path]
+  );
+
+  // Separate jobs by status and compute counts in a single pass
+  const { activeJobs, readyJobs, generatingCount } = useMemo(() => {
+    const active: GenerationJob[] = [];
+    const ready: GenerationJob[] = [];
+    let generating = 0;
+
+    for (const job of projectJobs) {
+      if (job.status === 'generating') {
+        active.push(job);
+        generating++;
+      } else if (job.status === 'error') {
+        active.push(job);
+      } else if (job.status === 'ready' && job.suggestions.length > 0) {
+        ready.push(job);
+      }
+    }
+
+    return { activeJobs: active, readyJobs: ready, generatingCount: generating };
+  }, [projectJobs]);
+
+  // Flatten all suggestions with their parent job
+  const allSuggestions = useMemo(
+    () => readyJobs.flatMap((job) => job.suggestions.map((suggestion) => ({ suggestion, job }))),
+    [readyJobs]
+  );
+
+  // Extract unique tags and counts from all suggestions
+  const { availableTags, tagCounts } = useMemo(() => {
+    const counts: Record<string, number> = {};
+    allSuggestions.forEach(({ job }) => {
+      const tag = job.prompt.title;
+      counts[tag] = (counts[tag] || 0) + 1;
+    });
+    return {
+      availableTags: Object.keys(counts).sort(),
+      tagCounts: counts,
+    };
+  }, [allSuggestions]);
+
+  // Filter suggestions based on selected tags
+  const filteredSuggestions = useMemo(() => {
+    if (selectedTags.size === 0) return allSuggestions;
+    return allSuggestions.filter(({ job }) => selectedTags.has(job.prompt.title));
+  }, [allSuggestions, selectedTags]);
+
+  const handleToggleTag = (tag: string) => {
+    setSelectedTags((prev) => {
+      const next = new Set(prev);
+      if (next.has(tag)) {
+        next.delete(tag);
+      } else {
+        next.add(tag);
+      }
+      return next;
+    });
+  };
+
+  const handleAccept = async (suggestion: AnalysisSuggestion, jobId: string) => {
+    if (!currentProject?.path) {
+      toast.error('No project selected');
+      return;
+    }
+
+    setAddingId(suggestion.id);
+
+    try {
+      const api = getElectronAPI();
+      const result = await api.ideation?.addSuggestionToBoard(currentProject.path, suggestion);
+
+      if (result?.success) {
+        toast.success(`Added "${suggestion.title}" to board`);
+        removeSuggestionFromJob(jobId, suggestion.id);
+      } else {
+        toast.error(result?.error || 'Failed to add to board');
+      }
+    } catch (error) {
+      console.error('Failed to add to board:', error);
+      toast.error((error as Error).message);
+    } finally {
+      setAddingId(null);
+    }
+  };
+
+  const handleRemove = (suggestionId: string, jobId: string) => {
+    removeSuggestionFromJob(jobId, suggestionId);
+    toast.info('Idea removed');
+  };
+
+  // Accept all filtered suggestions
+  const handleAcceptAll = useCallback(async () => {
+    if (!currentProject?.path || filteredSuggestions.length === 0) {
+      return;
+    }
+
+    setIsAcceptingAll(true);
+    const api = getElectronAPI();
+    let successCount = 0;
+    let failCount = 0;
+
+    // Process all filtered suggestions
+    for (const { suggestion, job } of filteredSuggestions) {
+      try {
+        const result = await api.ideation?.addSuggestionToBoard(currentProject.path, suggestion);
+        if (result?.success) {
+          removeSuggestionFromJob(job.id, suggestion.id);
+          successCount++;
+        } else {
+          failCount++;
+        }
+      } catch (error) {
+        console.error('Failed to add suggestion to board:', error);
+        failCount++;
+      }
+    }
+
+    setIsAcceptingAll(false);
+
+    if (successCount > 0 && failCount === 0) {
+      toast.success(`Added ${successCount} ${pluralizeIdea(successCount)} to board`);
+    } else if (successCount > 0 && failCount > 0) {
+      toast.warning(`Added ${successCount} ${pluralizeIdea(successCount)}, ${failCount} failed`);
+    } else {
+      toast.error('Failed to add ideas to board');
+    }
+  }, [currentProject?.path, filteredSuggestions, removeSuggestionFromJob]);
+
+  // Show discard confirmation dialog
+  const handleDiscardAll = useCallback(() => {
+    setShowDiscardConfirm(true);
+  }, []);
+
+  // Actually discard all filtered suggestions
+  const confirmDiscardAll = useCallback(() => {
+    const count = filteredSuggestions.length;
+    for (const { suggestion, job } of filteredSuggestions) {
+      removeSuggestionFromJob(job.id, suggestion.id);
+    }
+    toast.info(`Discarded ${count} ${pluralizeIdea(count)}`);
+  }, [filteredSuggestions, removeSuggestionFromJob]);
+
+  // Common readiness state for bulk operations
+  const bulkActionsReady = filteredSuggestions.length > 0 && !isAcceptingAll && !addingId;
+
+  // Notify parent about accept all readiness
+  useEffect(() => {
+    onAcceptAllReady?.(bulkActionsReady, filteredSuggestions.length, handleAcceptAll);
+  }, [bulkActionsReady, filteredSuggestions.length, handleAcceptAll, onAcceptAllReady]);
+
+  // Notify parent about discard all readiness
+  useEffect(() => {
+    onDiscardAllReady?.(bulkActionsReady, filteredSuggestions.length, handleDiscardAll);
+  }, [bulkActionsReady, filteredSuggestions.length, handleDiscardAll, onDiscardAllReady]);
+
+  const isEmpty = allSuggestions.length === 0 && activeJobs.length === 0;
+
+  return (
+    <div className="flex-1 flex flex-col p-6 overflow-auto">
+      <div className="max-w-3xl w-full mx-auto space-y-4">
+        {/* Status text */}
+        {(generatingCount > 0 || allSuggestions.length > 0) && (
+          <p className="text-sm text-muted-foreground">
+            {generatingCount > 0
+              ? `Generating ${generatingCount} ${pluralizeIdea(generatingCount)}...`
+              : selectedTags.size > 0
+                ? `Showing ${filteredSuggestions.length} of ${allSuggestions.length} ${pluralizeIdea(allSuggestions.length)}`
+                : `${allSuggestions.length} ${pluralizeIdea(allSuggestions.length)} ready for review`}
+          </p>
+        )}
+
+        {/* Tag Filters */}
+        {availableTags.length > 0 && (
+          <TagFilter
+            tags={availableTags}
+            tagCounts={tagCounts}
+            selectedTags={selectedTags}
+            onToggleTag={handleToggleTag}
+          />
+        )}
+
+        {/* Generating/Error Jobs */}
+        {activeJobs.length > 0 && (
+          <div className="space-y-3">
+            {activeJobs.map((job) => (
+              <GeneratingCard key={job.id} job={job} />
+            ))}
+          </div>
+        )}
+
+        {/* Suggestions List */}
+        {filteredSuggestions.length > 0 && (
+          <div className="space-y-3">
+            {filteredSuggestions.map(({ suggestion, job }) => (
+              <SuggestionCard
+                key={suggestion.id}
+                suggestion={suggestion}
+                job={job}
+                onAccept={() => handleAccept(suggestion, job.id)}
+                onRemove={() => handleRemove(suggestion.id, job.id)}
+                isAdding={addingId === suggestion.id}
+              />
+            ))}
+          </div>
+        )}
+
+        {/* No results after filtering */}
+        {filteredSuggestions.length === 0 && allSuggestions.length > 0 && (
+          <Card>
+            <CardContent className="py-8">
+              <div className="text-center text-muted-foreground">
+                <p>No ideas match the selected filters</p>
+                <button
+                  onClick={() => setSelectedTags(new Set())}
+                  className="text-primary hover:underline mt-2"
+                >
+                  Clear filters
+                </button>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Generate More Ideas Button - shown when there are items */}
+        {!isEmpty && (
+          <div className="pt-2">
+            <Button onClick={onGenerateIdeas} variant="outline" className="w-full gap-2">
+              <Lightbulb className="w-4 h-4" />
+              Generate More Ideas
+            </Button>
+          </div>
+        )}
+
+        {/* Empty State */}
+        {isEmpty && (
+          <Card>
+            <CardContent className="py-16">
+              <div className="text-center">
+                <Sparkles className="w-12 h-12 mx-auto text-muted-foreground/50 mb-4" />
+                <h3 className="text-lg font-medium mb-2">No ideas yet</h3>
+                <p className="text-muted-foreground mb-6">
+                  Generate ideas by selecting a category and prompt type
+                </p>
+                <Button onClick={onGenerateIdeas} size="lg" className="gap-2">
+                  <Lightbulb className="w-5 h-5" />
+                  Generate Ideas
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      {/* Discard All Confirmation Dialog */}
+      <ConfirmDialog
+        open={showDiscardConfirm}
+        onOpenChange={setShowDiscardConfirm}
+        onConfirm={confirmDiscardAll}
+        title="Discard All Ideas"
+        description={`Are you sure you want to discard ${filteredSuggestions.length} ${pluralizeIdea(filteredSuggestions.length)}? This cannot be undone.`}
+        icon={Trash2}
+        iconClassName="text-destructive"
+        confirmText="Discard"
+        confirmVariant="destructive"
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/ideation-view/components/ideation-settings-popover.tsx b/temp_repo/apps/ui/src/components/views/ideation-view/components/ideation-settings-popover.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ac3650511ed56aad3d790cbe98fda9e8b0c2faef
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/ideation-view/components/ideation-settings-popover.tsx
@@ -0,0 +1,136 @@
+/**
+ * IdeationSettingsPopover - Configure context sources for idea generation
+ */
+
+import { useMemo } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Settings2, FileText, Brain, LayoutGrid, Lightbulb, ScrollText } from 'lucide-react';
+import { useShallow } from 'zustand/react/shallow';
+import { useIdeationStore } from '@/store/ideation-store';
+import { DEFAULT_IDEATION_CONTEXT_SOURCES, type IdeationContextSources } from '@automaker/types';
+
+interface IdeationSettingsPopoverProps {
+  projectPath: string;
+}
+
+const IDEATION_CONTEXT_OPTIONS: Array<{
+  key: keyof IdeationContextSources;
+  label: string;
+  description: string;
+  icon: typeof FileText;
+}> = [
+  {
+    key: 'useAppSpec',
+    label: 'App Specification',
+    description: 'Overview, capabilities, features',
+    icon: ScrollText,
+  },
+  {
+    key: 'useContextFiles',
+    label: 'Context Files',
+    description: '.automaker/context/*.md|.txt',
+    icon: FileText,
+  },
+  {
+    key: 'useMemoryFiles',
+    label: 'Memory Files',
+    description: '.automaker/memory/*.md',
+    icon: Brain,
+  },
+  {
+    key: 'useExistingFeatures',
+    label: 'Existing Features',
+    description: 'Board features list',
+    icon: LayoutGrid,
+  },
+  {
+    key: 'useExistingIdeas',
+    label: 'Existing Ideas',
+    description: 'Ideation ideas list',
+    icon: Lightbulb,
+  },
+];
+
+/**
+ * Renders a settings popover to toggle per-project ideation context sources.
+ * Merges defaults with stored overrides and persists changes via the ideation store.
+ */
+export function IdeationSettingsPopover({ projectPath }: IdeationSettingsPopoverProps) {
+  const { projectOverrides, setContextSource } = useIdeationStore(
+    useShallow((state) => ({
+      projectOverrides: state.contextSourcesByProject[projectPath],
+      setContextSource: state.setContextSource,
+    }))
+  );
+  const contextSources = useMemo(
+    () => ({ ...DEFAULT_IDEATION_CONTEXT_SOURCES, ...projectOverrides }),
+    [projectOverrides]
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="p-1 border rounded hover:bg-accent/50 transition-colors"
+          title="Generation Settings"
+          aria-label="Generation settings"
+          data-testid="ideation-context-settings-button"
+        >
+          <Settings2 className="w-4 h-4 text-muted-foreground" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80" align="end" sideOffset={8}>
+        <div className="space-y-3">
+          <div>
+            <h4 className="font-medium text-sm mb-1">Generation Settings</h4>
+            <p className="text-xs text-muted-foreground">
+              Configure which context sources are included when generating ideas.
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            {IDEATION_CONTEXT_OPTIONS.map((option) => {
+              const Icon = option.icon;
+              return (
+                <div
+                  key={option.key}
+                  className="flex items-center justify-between gap-3 p-2 rounded-md bg-secondary/50"
+                >
+                  <div className="flex items-center gap-2 flex-1 min-w-0">
+                    <Icon className="w-4 h-4 text-brand-500 shrink-0" />
+                    <div className="min-w-0">
+                      <Label
+                        htmlFor={`ideation-context-toggle-${option.key}`}
+                        className="text-xs font-medium cursor-pointer block"
+                      >
+                        {option.label}
+                      </Label>
+                      <span className="text-[10px] text-muted-foreground truncate block">
+                        {option.description}
+                      </span>
+                    </div>
+                  </div>
+                  <Switch
+                    id={`ideation-context-toggle-${option.key}`}
+                    checked={contextSources[option.key]}
+                    onCheckedChange={(checked) =>
+                      setContextSource(projectPath, option.key, checked)
+                    }
+                    data-testid={`ideation-context-toggle-${option.key}`}
+                  />
+                </div>
+              );
+            })}
+          </div>
+
+          <p className="text-[10px] text-muted-foreground leading-relaxed">
+            Disable sources to generate more focused ideas or reduce context size.
+          </p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/ideation-view/components/prompt-category-grid.tsx b/temp_repo/apps/ui/src/components/views/ideation-view/components/prompt-category-grid.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c09548b07206d14051ad6a040a6ef9e522086a62
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/ideation-view/components/prompt-category-grid.tsx
@@ -0,0 +1,96 @@
+/**
+ * PromptCategoryGrid - Grid of prompt categories to select from
+ */
+
+import {
+  ArrowLeft,
+  Zap,
+  Palette,
+  Code,
+  TrendingUp,
+  Cpu,
+  Shield,
+  Gauge,
+  Accessibility,
+  BarChart3,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { Card, CardContent } from '@/components/ui/card';
+import { useGuidedPrompts } from '@/hooks/use-guided-prompts';
+import type { IdeaCategory } from '@automaker/types';
+
+interface PromptCategoryGridProps {
+  onSelect: (category: IdeaCategory) => void;
+  onBack: () => void;
+}
+
+const iconMap: Record<string, typeof Zap> = {
+  Zap,
+  Palette,
+  Code,
+  TrendingUp,
+  Cpu,
+  Shield,
+  Gauge,
+  Accessibility,
+  BarChart3,
+};
+
+export function PromptCategoryGrid({ onSelect, onBack }: PromptCategoryGridProps) {
+  const { categories, isLoading, error } = useGuidedPrompts();
+
+  return (
+    <div className="flex-1 flex flex-col p-6 overflow-auto">
+      <div className="max-w-4xl w-full mx-auto space-y-4">
+        {/* Back link */}
+        <button
+          onClick={onBack}
+          className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          <span>Back</span>
+        </button>
+
+        {isLoading && (
+          <div className="flex items-center justify-center py-12">
+            <Spinner size="lg" />
+            <span className="ml-2 text-muted-foreground">Loading categories...</span>
+          </div>
+        )}
+        {error && (
+          <div className="text-center py-12 text-destructive">
+            <p>Failed to load categories: {error}</p>
+          </div>
+        )}
+        {!isLoading && !error && (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {categories.map((category) => {
+              const Icon = iconMap[category.icon] || Zap;
+              return (
+                <Card
+                  key={category.id}
+                  className="group cursor-pointer transition-all duration-300 hover:border-primary hover:shadow-lg hover:-translate-y-1"
+                  onClick={() => onSelect(category.id)}
+                >
+                  <CardContent className="p-6">
+                    <div className="flex flex-col items-center text-center gap-4">
+                      <div className="p-4 rounded-2xl bg-primary/10 text-primary group-hover:bg-primary/20 group-hover:scale-110 transition-all duration-300">
+                        <Icon className="w-8 h-8" />
+                      </div>
+                      <div className="space-y-2">
+                        <h3 className="font-semibold text-lg leading-tight group-hover:text-primary transition-colors">
+                          {category.name}
+                        </h3>
+                        <p className="text-muted-foreground text-sm">{category.description}</p>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/ideation-view/components/prompt-list.tsx b/temp_repo/apps/ui/src/components/views/ideation-view/components/prompt-list.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8833bb3036f028318bc04e0984347bfacc76ed83
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/ideation-view/components/prompt-list.tsx
@@ -0,0 +1,177 @@
+/**
+ * PromptList - List of prompts for a specific category
+ */
+
+import { useState, useMemo } from 'react';
+import { ArrowLeft, Lightbulb, CheckCircle2 } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { Card, CardContent } from '@/components/ui/card';
+import { useGuidedPrompts } from '@/hooks/use-guided-prompts';
+import { useIdeationStore } from '@/store/ideation-store';
+import { useAppStore } from '@/store/app-store';
+import { useGenerateIdeationSuggestions } from '@/hooks/mutations';
+import { toast } from 'sonner';
+import type { IdeaCategory, IdeationPrompt } from '@automaker/types';
+
+interface PromptListProps {
+  category: IdeaCategory;
+  onBack: () => void;
+}
+
+export function PromptList({ category, onBack }: PromptListProps) {
+  const currentProject = useAppStore((s) => s.currentProject);
+  const generationJobs = useIdeationStore((s) => s.generationJobs);
+  const setMode = useIdeationStore((s) => s.setMode);
+  const addGenerationJob = useIdeationStore((s) => s.addGenerationJob);
+  const [loadingPromptId, setLoadingPromptId] = useState<string | null>(null);
+  const [startedPrompts, setStartedPrompts] = useState<Set<string>>(new Set());
+
+  // React Query mutation
+  const generateMutation = useGenerateIdeationSuggestions(currentProject?.path ?? '');
+  const {
+    getPromptsByCategory,
+    isLoading: isLoadingPrompts,
+    error: promptsError,
+  } = useGuidedPrompts();
+
+  const prompts = getPromptsByCategory(category);
+
+  // Get jobs for current project only (memoized to prevent unnecessary re-renders)
+  const projectJobs = useMemo(
+    () =>
+      currentProject?.path
+        ? generationJobs.filter((job) => job.projectPath === currentProject.path)
+        : [],
+    [generationJobs, currentProject?.path]
+  );
+
+  // Check which prompts are already generating
+  const generatingPromptIds = useMemo(
+    () => new Set(projectJobs.filter((j) => j.status === 'generating').map((j) => j.prompt.id)),
+    [projectJobs]
+  );
+
+  const handleSelectPrompt = async (prompt: IdeationPrompt) => {
+    if (!currentProject?.path) {
+      toast.error('No project selected');
+      return;
+    }
+
+    if (loadingPromptId || generateMutation.isPending || generatingPromptIds.has(prompt.id)) return;
+
+    setLoadingPromptId(prompt.id);
+
+    // Add a job and navigate to dashboard
+    const jobId = addGenerationJob(currentProject.path, prompt);
+    setStartedPrompts((prev) => new Set(prev).add(prompt.id));
+
+    // Show toast and navigate to dashboard
+    toast.info(`Generating ideas for "${prompt.title}"...`);
+    setMode('dashboard');
+
+    // Start mutation - onSuccess/onError are handled at the hook level to ensure
+    // they fire even after this component unmounts (which happens due to setMode above)
+    generateMutation.mutate(
+      { promptId: prompt.id, category, jobId, promptTitle: prompt.title },
+      {
+        // Optional: reset local loading state if component is still mounted
+        onSettled: () => {
+          setLoadingPromptId(null);
+        },
+      }
+    );
+  };
+
+  return (
+    <div className="flex-1 flex flex-col p-6 overflow-auto">
+      <div className="max-w-3xl w-full mx-auto space-y-4">
+        {/* Back link */}
+        <button
+          onClick={onBack}
+          className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          <span>Back</span>
+        </button>
+
+        <div className="space-y-3">
+          {isLoadingPrompts && (
+            <div className="flex items-center justify-center py-8">
+              <Spinner size="lg" />
+              <span className="ml-2 text-muted-foreground">Loading prompts...</span>
+            </div>
+          )}
+          {promptsError && (
+            <div className="text-center py-8 text-destructive">
+              <p>Failed to load prompts: {promptsError}</p>
+            </div>
+          )}
+          {!isLoadingPrompts &&
+            !promptsError &&
+            prompts.map((prompt) => {
+              const isLoading = loadingPromptId === prompt.id;
+              const isGenerating = generatingPromptIds.has(prompt.id);
+              const isStarted = startedPrompts.has(prompt.id);
+              const isDisabled = loadingPromptId !== null || isGenerating;
+
+              return (
+                <Card
+                  key={prompt.id}
+                  className={`group transition-all duration-300 ${
+                    isDisabled
+                      ? 'opacity-60 cursor-not-allowed bg-muted/50'
+                      : 'cursor-pointer hover:border-primary hover:shadow-md hover:-translate-x-1'
+                  } ${isLoading || isGenerating ? 'border-blue-500/50 ring-1 ring-blue-500/20 bg-blue-50/10' : ''} ${
+                    isStarted && !isGenerating ? 'border-green-500/50 bg-green-50/10' : ''
+                  }`}
+                  onClick={() => !isDisabled && handleSelectPrompt(prompt)}
+                >
+                  <CardContent className="p-5">
+                    <div className="flex items-start gap-5">
+                      <div
+                        className={`p-3 rounded-xl shrink-0 transition-all duration-300 ${
+                          isLoading || isGenerating
+                            ? 'bg-blue-500/10 text-blue-500'
+                            : isStarted
+                              ? 'bg-green-500/10 text-green-500'
+                              : 'bg-primary/10 text-primary group-hover:bg-primary/20 group-hover:scale-110'
+                        }`}
+                      >
+                        {isLoading || isGenerating ? (
+                          <Spinner size="md" />
+                        ) : isStarted ? (
+                          <CheckCircle2 className="w-5 h-5" />
+                        ) : (
+                          <Lightbulb className="w-5 h-5" />
+                        )}
+                      </div>
+                      <div className="flex-1 min-w-0 space-y-1">
+                        <div className="flex items-center justify-between gap-2">
+                          <h3 className="font-semibold text-lg group-hover:text-primary transition-colors">
+                            {prompt.title}
+                          </h3>
+                          {isStarted && !isGenerating && (
+                            <span className="text-xs font-medium text-green-600 bg-green-100 dark:bg-green-900/30 dark:text-green-400 px-2 py-0.5 rounded-full">
+                              Generated
+                            </span>
+                          )}
+                        </div>
+                        <p className="text-muted-foreground text-sm leading-relaxed">
+                          {prompt.description}
+                        </p>
+                        {(isLoading || isGenerating) && (
+                          <p className="text-blue-500 text-sm font-medium animate-pulse pt-1">
+                            Generating ideas...
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              );
+            })}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/ideation-view/index.tsx b/temp_repo/apps/ui/src/components/views/ideation-view/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ec2e251c8756e91fef0ba83a3e0da370df1e9149
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/ideation-view/index.tsx
@@ -0,0 +1,322 @@
+/**
+ * IdeationView - Main view for brainstorming and idea management
+ * Dashboard-first design with Generate Ideas flow
+ */
+
+import { useCallback, useState } from 'react';
+import { useIdeationStore } from '@/store/ideation-store';
+import { useAppStore } from '@/store/app-store';
+import { PromptCategoryGrid } from './components/prompt-category-grid';
+import { PromptList } from './components/prompt-list';
+import { IdeationDashboard } from './components/ideation-dashboard';
+import { useGuidedPrompts } from '@/hooks/use-guided-prompts';
+import { Button } from '@/components/ui/button';
+import { ArrowLeft, ChevronRight, Lightbulb, CheckCheck, Trash2 } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { IdeationSettingsPopover } from './components/ideation-settings-popover';
+import type { IdeaCategory } from '@automaker/types';
+import type { IdeationMode } from '@/store/ideation-store';
+
+// Breadcrumb component - compact inline breadcrumbs
+function IdeationBreadcrumbs({
+  currentMode,
+  selectedCategory,
+  onNavigate,
+}: {
+  currentMode: IdeationMode;
+  selectedCategory: IdeaCategory | null;
+  onNavigate: (mode: IdeationMode, category?: IdeaCategory | null) => void;
+}) {
+  const { getCategoryById } = useGuidedPrompts();
+  const categoryInfo = selectedCategory ? getCategoryById(selectedCategory) : null;
+
+  // On dashboard, no breadcrumbs needed (it's the root)
+  if (currentMode === 'dashboard') {
+    return null;
+  }
+
+  return (
+    <nav className="flex items-center gap-1 text-sm text-muted-foreground">
+      <button
+        onClick={() => onNavigate('dashboard')}
+        className="hover:text-foreground transition-colors"
+      >
+        Dashboard
+      </button>
+      <ChevronRight className="w-3 h-3" />
+      {selectedCategory && categoryInfo ? (
+        <>
+          <button
+            onClick={() => onNavigate('prompts', null)}
+            className="hover:text-foreground transition-colors"
+          >
+            Generate Ideas
+          </button>
+          <ChevronRight className="w-3 h-3" />
+          <span className="text-foreground">{categoryInfo.name}</span>
+        </>
+      ) : (
+        <span className="text-foreground">Generate Ideas</span>
+      )}
+    </nav>
+  );
+}
+
+/**
+ * Header component for the ideation view with navigation, bulk actions, and settings.
+ * Displays breadcrumbs, accept/discard all buttons, and the generate ideas button with settings popover.
+ */
+function IdeationHeader({
+  currentMode,
+  selectedCategory,
+  onNavigate,
+  onGenerateIdeas,
+  onBack,
+  acceptAllReady,
+  acceptAllCount,
+  onAcceptAll,
+  isAcceptingAll,
+  discardAllReady,
+  discardAllCount,
+  onDiscardAll,
+  projectPath,
+}: {
+  currentMode: IdeationMode;
+  selectedCategory: IdeaCategory | null;
+  onNavigate: (mode: IdeationMode, category?: IdeaCategory | null) => void;
+  onGenerateIdeas: () => void;
+  onBack: () => void;
+  acceptAllReady: boolean;
+  acceptAllCount: number;
+  onAcceptAll: () => void;
+  isAcceptingAll: boolean;
+  discardAllReady: boolean;
+  discardAllCount: number;
+  onDiscardAll: () => void;
+  projectPath: string;
+}) {
+  const { getCategoryById } = useGuidedPrompts();
+  const showBackButton = currentMode === 'prompts';
+
+  // Get subtitle text based on current mode
+  const getSubtitle = (): string => {
+    if (currentMode === 'dashboard') {
+      return 'Review and accept generated ideas';
+    }
+    if (currentMode === 'prompts') {
+      if (selectedCategory) {
+        const categoryInfo = getCategoryById(selectedCategory);
+        return `Select a prompt from ${categoryInfo?.name || 'category'}`;
+      }
+      return 'Select a category to generate ideas';
+    }
+    return '';
+  };
+
+  const subtitle = getSubtitle();
+
+  return (
+    <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
+      <div className="flex items-center gap-3">
+        {showBackButton && (
+          <Button variant="ghost" size="icon" onClick={onBack}>
+            <ArrowLeft className="w-5 h-5" />
+          </Button>
+        )}
+        <div>
+          <div className="flex items-center gap-2">
+            <Lightbulb className="w-5 h-5 text-primary" />
+            <h1 className="text-xl font-bold">Ideation</h1>
+          </div>
+          {currentMode === 'dashboard' ? (
+            <p className="text-sm text-muted-foreground">{subtitle}</p>
+          ) : (
+            <IdeationBreadcrumbs
+              currentMode={currentMode}
+              selectedCategory={selectedCategory}
+              onNavigate={onNavigate}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="flex gap-2 items-center">
+        {currentMode === 'dashboard' && discardAllReady && (
+          <Button
+            onClick={onDiscardAll}
+            variant="outline"
+            className="gap-2 text-destructive hover:text-destructive"
+            disabled={isAcceptingAll}
+          >
+            <Trash2 className="w-4 h-4" />
+            Discard All ({discardAllCount})
+          </Button>
+        )}
+        {currentMode === 'dashboard' && acceptAllReady && (
+          <Button
+            onClick={onAcceptAll}
+            variant="outline"
+            className="gap-2"
+            disabled={isAcceptingAll}
+          >
+            {isAcceptingAll ? <Spinner size="sm" /> : <CheckCheck className="w-4 h-4" />}
+            Accept All ({acceptAllCount})
+          </Button>
+        )}
+        <div className="flex items-center gap-3">
+          <Button onClick={onGenerateIdeas} className="gap-2">
+            <Lightbulb className="w-4 h-4" />
+            Generate Ideas
+          </Button>
+          <IdeationSettingsPopover projectPath={projectPath} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Main view for brainstorming and idea management.
+ * Provides a dashboard for reviewing generated ideas and a prompt selection flow
+ * for generating new ideas using AI-powered suggestions.
+ */
+export function IdeationView() {
+  const currentProject = useAppStore((s) => s.currentProject);
+  const { currentMode, selectedCategory, setMode, setCategory } = useIdeationStore();
+
+  // Accept all state
+  const [acceptAllReady, setAcceptAllReady] = useState(false);
+  const [acceptAllCount, setAcceptAllCount] = useState(0);
+  const [acceptAllHandler, setAcceptAllHandler] = useState<(() => Promise<void>) | null>(null);
+  const [isAcceptingAll, setIsAcceptingAll] = useState(false);
+
+  // Discard all state
+  const [discardAllReady, setDiscardAllReady] = useState(false);
+  const [discardAllCount, setDiscardAllCount] = useState(0);
+  const [discardAllHandler, setDiscardAllHandler] = useState<(() => void) | null>(null);
+
+  const handleAcceptAllReady = useCallback(
+    (isReady: boolean, count: number, handler: () => Promise<void>) => {
+      setAcceptAllReady(isReady);
+      setAcceptAllCount(count);
+      setAcceptAllHandler(() => handler);
+    },
+    []
+  );
+
+  const handleAcceptAll = useCallback(async () => {
+    if (acceptAllHandler) {
+      setIsAcceptingAll(true);
+      try {
+        await acceptAllHandler();
+      } finally {
+        setIsAcceptingAll(false);
+      }
+    }
+  }, [acceptAllHandler]);
+
+  const handleDiscardAllReady = useCallback(
+    (isReady: boolean, count: number, handler: () => void) => {
+      setDiscardAllReady(isReady);
+      setDiscardAllCount(count);
+      setDiscardAllHandler(() => handler);
+    },
+    []
+  );
+
+  const handleDiscardAll = useCallback(() => {
+    if (discardAllHandler) {
+      discardAllHandler();
+    }
+  }, [discardAllHandler]);
+
+  const handleNavigate = useCallback(
+    (mode: IdeationMode, category?: IdeaCategory | null) => {
+      setMode(mode);
+      if (category !== undefined) {
+        setCategory(category);
+      } else if (mode !== 'prompts') {
+        setCategory(null);
+      }
+    },
+    [setMode, setCategory]
+  );
+
+  const handleSelectCategory = useCallback(
+    (category: IdeaCategory) => {
+      setCategory(category);
+    },
+    [setCategory]
+  );
+
+  const handleBackFromPrompts = useCallback(() => {
+    // If viewing a category, go back to category grid
+    if (selectedCategory) {
+      setCategory(null);
+      return;
+    }
+    // Otherwise, go back to dashboard
+    setMode('dashboard');
+  }, [selectedCategory, setCategory, setMode]);
+
+  const handleGenerateIdeas = useCallback(() => {
+    setMode('prompts');
+    setCategory(null);
+  }, [setMode, setCategory]);
+
+  if (!currentProject) {
+    return (
+      <div
+        className="flex-1 flex items-center justify-center content-bg"
+        data-testid="ideation-view"
+      >
+        <div className="text-center text-muted-foreground">
+          <p>Open a project to start brainstorming ideas</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex-1 flex flex-col content-bg min-h-0 overflow-hidden"
+      data-testid="ideation-view"
+    >
+      {/* Header with breadcrumbs - always shown */}
+      <IdeationHeader
+        currentMode={currentMode}
+        selectedCategory={selectedCategory}
+        onNavigate={handleNavigate}
+        onGenerateIdeas={handleGenerateIdeas}
+        onBack={handleBackFromPrompts}
+        acceptAllReady={acceptAllReady}
+        acceptAllCount={acceptAllCount}
+        onAcceptAll={handleAcceptAll}
+        isAcceptingAll={isAcceptingAll}
+        discardAllReady={discardAllReady}
+        discardAllCount={discardAllCount}
+        onDiscardAll={handleDiscardAll}
+        projectPath={currentProject.path}
+      />
+
+      {/* Dashboard - main view */}
+      {currentMode === 'dashboard' && (
+        <IdeationDashboard
+          onGenerateIdeas={handleGenerateIdeas}
+          onAcceptAllReady={handleAcceptAllReady}
+          onDiscardAllReady={handleDiscardAllReady}
+        />
+      )}
+
+      {/* Prompts - category selection */}
+      {currentMode === 'prompts' && !selectedCategory && (
+        <PromptCategoryGrid onSelect={handleSelectCategory} onBack={handleBackFromPrompts} />
+      )}
+
+      {/* Prompts - prompt selection within category */}
+      {currentMode === 'prompts' && selectedCategory && (
+        <PromptList category={selectedCategory} onBack={handleBackFromPrompts} />
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/interview-view.tsx b/temp_repo/apps/ui/src/components/views/interview-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f676c7bb3d33ac6d678e233a6b5749678c5c96ea
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/interview-view.tsx
@@ -0,0 +1,619 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { useAppStore, Feature } from '@/store/app-store';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Bot, Send, User, Sparkles, FileText, ArrowLeft, CheckCircle } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn, generateUUID } from '@/lib/utils';
+import { getElectronAPI } from '@/lib/electron';
+import { Markdown } from '@/components/ui/markdown';
+import { useFileBrowser } from '@/contexts/file-browser-context';
+import { toast } from 'sonner';
+import { useNavigate } from '@tanstack/react-router';
+import { getDefaultWorkspaceDirectory, saveLastProjectDirectory } from '@/lib/workspace-config';
+
+const logger = createLogger('InterviewView');
+
+interface InterviewMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+}
+
+interface InterviewState {
+  projectName: string;
+  projectDescription: string;
+  techStack: string[];
+  features: string[];
+  additionalNotes: string;
+}
+
+// Interview questions flow
+const INTERVIEW_QUESTIONS = [
+  {
+    id: 'project-description',
+    question: 'What do you want to build?',
+    hint: 'Describe your project idea in a few sentences',
+    field: 'projectDescription' as const,
+  },
+  {
+    id: 'tech-stack',
+    question: 'What tech stack would you like to use?',
+    hint: 'e.g., React, Next.js, Node.js, Python, etc.',
+    field: 'techStack' as const,
+  },
+  {
+    id: 'core-features',
+    question: 'What are the core features you want to include?',
+    hint: 'List the main functionalities your app should have',
+    field: 'features' as const,
+  },
+  {
+    id: 'additional',
+    question: 'Any additional requirements or preferences?',
+    hint: 'Design preferences, integrations, deployment needs, etc.',
+    field: 'additionalNotes' as const,
+  },
+];
+
+export function InterviewView() {
+  const { addProject, setCurrentProject, setAppSpec } = useAppStore();
+  const { openFileBrowser } = useFileBrowser();
+  const navigate = useNavigate();
+  const [input, setInput] = useState('');
+  const [messages, setMessages] = useState<InterviewMessage[]>([]);
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [interviewData, setInterviewData] = useState<InterviewState>({
+    projectName: '',
+    projectDescription: '',
+    techStack: [],
+    features: [],
+    additionalNotes: '',
+  });
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+  const [generatedSpec, setGeneratedSpec] = useState<string | null>(null);
+  const [projectPath, setProjectPath] = useState('');
+  const [projectName, setProjectName] = useState('');
+  const [showProjectSetup, setShowProjectSetup] = useState(false);
+
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Default parent directory using workspace config utility
+  useEffect(() => {
+    if (projectPath) return;
+
+    let isMounted = true;
+
+    const loadWorkspaceDir = async () => {
+      try {
+        const defaultDir = await getDefaultWorkspaceDirectory();
+
+        if (!isMounted || projectPath) {
+          return;
+        }
+
+        if (defaultDir) {
+          setProjectPath(defaultDir);
+        }
+      } catch (error) {
+        logger.error('Failed to load default workspace directory:', error);
+      }
+    };
+
+    loadWorkspaceDir();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [projectPath]);
+
+  // Initialize with first question
+  useEffect(() => {
+    if (messages.length === 0) {
+      const welcomeMessage: InterviewMessage = {
+        id: 'welcome',
+        role: 'assistant',
+        content: `Hello! I'm here to help you plan your new project. Let's go through a few questions to understand what you want to build.\n\n**${INTERVIEW_QUESTIONS[0].question}**\n\n_${INTERVIEW_QUESTIONS[0].hint}_`,
+        timestamp: new Date(),
+      };
+      setMessages([welcomeMessage]);
+    }
+  }, [messages.length]);
+
+  // Auto-scroll to bottom when messages change
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout | undefined;
+    if (messagesContainerRef.current) {
+      // Use a small delay to ensure DOM is updated
+      timeoutId = setTimeout(() => {
+        if (messagesContainerRef.current) {
+          messagesContainerRef.current.scrollTo({
+            top: messagesContainerRef.current.scrollHeight,
+            behavior: 'smooth',
+          });
+        }
+      }, 100);
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [messages]);
+
+  // Auto-focus input
+  useEffect(() => {
+    if (inputRef.current && !isComplete) {
+      inputRef.current.focus();
+    }
+  }, [currentQuestionIndex, isComplete]);
+
+  const handleSend = useCallback(() => {
+    if (!input.trim() || isGenerating || isComplete) return;
+
+    const userMessage: InterviewMessage = {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      content: input,
+      timestamp: new Date(),
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+
+    // Update interview data based on current question
+    const currentQuestion = INTERVIEW_QUESTIONS[currentQuestionIndex];
+    if (currentQuestion) {
+      setInterviewData((prev) => {
+        const newData = { ...prev };
+        if (currentQuestion.field === 'techStack' || currentQuestion.field === 'features') {
+          // Parse comma-separated values into array
+          newData[currentQuestion.field] = input
+            .split(',')
+            .map((s) => s.trim())
+            .filter(Boolean);
+        } else {
+          (newData as Record<string, string | string[]>)[currentQuestion.field] = input;
+        }
+        return newData;
+      });
+    }
+
+    setInput('');
+
+    // Move to next question or complete
+    const nextIndex = currentQuestionIndex + 1;
+
+    setTimeout(() => {
+      if (nextIndex < INTERVIEW_QUESTIONS.length) {
+        const nextQuestion = INTERVIEW_QUESTIONS[nextIndex];
+        const assistantMessage: InterviewMessage = {
+          id: `assistant-${Date.now()}`,
+          role: 'assistant',
+          content: `Great! **${nextQuestion.question}**\n\n_${nextQuestion.hint}_`,
+          timestamp: new Date(),
+        };
+        setMessages((prev) => [...prev, assistantMessage]);
+        setCurrentQuestionIndex(nextIndex);
+      } else {
+        // All questions answered - generate spec
+        const summaryMessage: InterviewMessage = {
+          id: `assistant-summary-${Date.now()}`,
+          role: 'assistant',
+          content:
+            'Perfect! I have all the information I need. Now let me generate your project specification...',
+          timestamp: new Date(),
+        };
+        setMessages((prev) => [...prev, summaryMessage]);
+        generateSpec({
+          ...interviewData,
+          projectDescription: currentQuestionIndex === 0 ? input : interviewData.projectDescription,
+          techStack:
+            currentQuestionIndex === 1
+              ? input
+                  .split(',')
+                  .map((s) => s.trim())
+                  .filter(Boolean)
+              : interviewData.techStack,
+          features:
+            currentQuestionIndex === 2
+              ? input
+                  .split(',')
+                  .map((s) => s.trim())
+                  .filter(Boolean)
+              : interviewData.features,
+          additionalNotes: currentQuestionIndex === 3 ? input : interviewData.additionalNotes,
+        });
+      }
+    }, 500);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- generateSpec is stable
+  }, [input, isGenerating, isComplete, currentQuestionIndex, interviewData]);
+
+  const generateSpec = useCallback(async (data: InterviewState) => {
+    setIsGenerating(true);
+
+    // Generate a draft app_spec.txt based on the interview responses
+    const spec = generateAppSpec(data);
+
+    // Simulate some processing time for better UX
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+
+    setGeneratedSpec(spec);
+    setIsGenerating(false);
+    setIsComplete(true);
+    setShowProjectSetup(true);
+
+    const completionMessage: InterviewMessage = {
+      id: `assistant-complete-${Date.now()}`,
+      role: 'assistant',
+      content: `I've generated a draft project specification based on our conversation!\n\nPlease provide a project name and choose where to save your project, then click "Create Project" to get started.`,
+      timestamp: new Date(),
+    };
+    setMessages((prev) => [...prev, completionMessage]);
+  }, []);
+
+  const generateAppSpec = (data: InterviewState): string => {
+    const projectName = data.projectDescription
+      .split(' ')
+      .slice(0, 3)
+      .join('-')
+      .toLowerCase()
+      .replace(/[^a-z0-9-]/g, '');
+
+    // Note: Must follow XML format as defined in apps/server/src/lib/app-spec-format.ts
+    return `<project_specification>
+  <project_name>${projectName || 'my-project'}</project_name>
+
+  <overview>
+    ${data.projectDescription}
+  </overview>
+
+  <technology_stack>
+    ${
+      data.techStack.length > 0
+        ? data.techStack.map((tech) => `<technology>${tech}</technology>`).join('\n    ')
+        : '<!-- Define your tech stack -->'
+    }
+  </technology_stack>
+
+  <core_capabilities>
+    ${
+      data.features.length > 0
+        ? data.features.map((feature) => `<capability>${feature}</capability>`).join('\n    ')
+        : '<!-- List core features -->'
+    }
+  </core_capabilities>
+
+  <additional_requirements>
+    ${data.additionalNotes || 'None specified'}
+  </additional_requirements>
+
+  <development_guidelines>
+    <guideline>Write clean, production-quality code</guideline>
+    <guideline>Include proper error handling</guideline>
+    <guideline>Write comprehensive Playwright tests</guideline>
+    <guideline>Ensure all tests pass before marking features complete</guideline>
+  </development_guidelines>
+</project_specification>`;
+  };
+
+  const handleSelectDirectory = async () => {
+    const selectedPath = await openFileBrowser({
+      title: 'Select Base Directory',
+      description: 'Choose the parent directory where your new project will be created',
+      initialPath: projectPath || undefined,
+    });
+
+    if (selectedPath) {
+      setProjectPath(selectedPath);
+      saveLastProjectDirectory(selectedPath);
+    }
+  };
+
+  const handleCreateProject = async () => {
+    if (!projectName || !projectPath || !generatedSpec) return;
+
+    setIsGenerating(true);
+
+    try {
+      saveLastProjectDirectory(projectPath);
+      const api = getElectronAPI();
+      // Use platform-specific path separator
+      const pathSep =
+        typeof window !== 'undefined' && window.electronAPI
+          ? navigator.platform.indexOf('Win') !== -1
+            ? '\\'
+            : '/'
+          : '/';
+      const fullProjectPath = `${projectPath}${pathSep}${projectName}`;
+
+      // Create project directory
+      const mkdirResult = await api.mkdir(fullProjectPath);
+      if (!mkdirResult.success) {
+        toast.error('Failed to create project directory', {
+          description: mkdirResult.error || 'Unknown error occurred',
+        });
+        setIsGenerating(false);
+        return;
+      }
+
+      // Write app_spec.txt with generated content
+      await api.writeFile(`${fullProjectPath}/.automaker/app_spec.txt`, generatedSpec);
+
+      // Create initial feature in the features folder
+      const initialFeature: Feature = {
+        id: generateUUID(),
+        category: 'Core',
+        description: 'Initial project setup',
+        status: 'backlog',
+        skipTests: true,
+        steps: [],
+      };
+
+      if (!api.features) {
+        throw new Error('Features API not available');
+      }
+      await api.features.create(fullProjectPath, initialFeature);
+
+      const project = {
+        id: `project-${Date.now()}`,
+        name: projectName,
+        path: fullProjectPath,
+        lastOpened: new Date().toISOString(),
+      };
+
+      // Update app spec in store
+      setAppSpec(generatedSpec);
+
+      // Add and select the project
+      addProject(project);
+      setCurrentProject(project);
+    } catch (error) {
+      logger.error('Failed to create project:', error);
+      setIsGenerating(false);
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleGoBack = () => {
+    navigate({ to: '/' });
+  };
+
+  return (
+    <div className="flex-1 flex flex-col content-bg min-h-0" data-testid="interview-view">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
+        <div className="flex items-center gap-3">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleGoBack}
+            className="h-8 w-8 p-0"
+            data-testid="interview-back-button"
+          >
+            <ArrowLeft className="w-4 h-4" />
+          </Button>
+          <Sparkles className="w-5 h-5 text-primary" />
+          <div>
+            <h1 className="text-xl font-bold">New Project Interview</h1>
+            <p className="text-sm text-muted-foreground">
+              {isComplete
+                ? 'Specification generated!'
+                : `Question ${currentQuestionIndex + 1} of ${INTERVIEW_QUESTIONS.length}`}
+            </p>
+          </div>
+        </div>
+
+        {/* Progress indicator */}
+        <div className="flex items-center gap-2">
+          {INTERVIEW_QUESTIONS.map((_, index) => (
+            <div
+              key={index}
+              className={cn(
+                'w-2 h-2 rounded-full transition-colors',
+                index < currentQuestionIndex
+                  ? 'bg-green-500'
+                  : index === currentQuestionIndex
+                    ? 'bg-primary'
+                    : 'bg-zinc-700'
+              )}
+            />
+          ))}
+          {isComplete && <CheckCircle className="w-4 h-4 text-green-500 ml-2" />}
+        </div>
+      </div>
+
+      {/* Messages */}
+      <div
+        ref={messagesContainerRef}
+        className="flex-1 overflow-y-auto p-4 space-y-4"
+        data-testid="interview-messages"
+      >
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            className={cn('flex gap-3', message.role === 'user' && 'flex-row-reverse')}
+          >
+            <div
+              className={cn(
+                'w-8 h-8 rounded-full flex items-center justify-center shrink-0',
+                message.role === 'assistant' ? 'bg-primary/10' : 'bg-muted'
+              )}
+            >
+              {message.role === 'assistant' ? (
+                <Bot className="w-4 h-4 text-primary" />
+              ) : (
+                <User className="w-4 h-4" />
+              )}
+            </div>
+            <Card
+              className={cn(
+                'max-w-[80%]',
+                message.role === 'user'
+                  ? 'bg-transparent border border-primary text-foreground'
+                  : 'border border-primary/30 bg-card'
+              )}
+            >
+              <CardContent className="px-3 py-2">
+                {message.role === 'assistant' ? (
+                  <Markdown className="text-sm text-primary prose-headings:text-primary prose-strong:text-primary prose-code:text-primary">
+                    {message.content}
+                  </Markdown>
+                ) : (
+                  <p className="text-sm whitespace-pre-wrap">{message.content}</p>
+                )}
+                <p
+                  className={cn(
+                    'text-xs mt-1',
+                    message.role === 'user' ? 'text-muted-foreground' : 'text-primary/70'
+                  )}
+                >
+                  {message.timestamp.toLocaleTimeString()}
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+        ))}
+
+        {isGenerating && !showProjectSetup && (
+          <div className="flex gap-3">
+            <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
+              <Bot className="w-4 h-4 text-primary" />
+            </div>
+            <Card className="border border-primary/30 bg-card">
+              <CardContent className="p-3">
+                <div className="flex items-center gap-2">
+                  <Spinner size="sm" />
+                  <span className="text-sm text-primary">Generating specification...</span>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+
+        {/* Project Setup Form */}
+        {showProjectSetup && (
+          <div className="mt-6">
+            <Card className="bg-zinc-900/50 border-white/10" data-testid="project-setup-form">
+              <CardContent className="p-6 space-y-4">
+                <div className="flex items-center gap-2 mb-4">
+                  <FileText className="w-5 h-5 text-primary" />
+                  <h3 className="text-lg font-semibold">Create Your Project</h3>
+                </div>
+
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <label htmlFor="project-name" className="text-sm font-medium text-zinc-300">
+                      Project Name
+                    </label>
+                    <Input
+                      id="project-name"
+                      placeholder="my-awesome-project"
+                      value={projectName}
+                      onChange={(e) => setProjectName(e.target.value)}
+                      className="bg-zinc-950/50 border-white/10 text-white placeholder:text-zinc-500"
+                      data-testid="interview-project-name-input"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <label htmlFor="project-path" className="text-sm font-medium text-zinc-300">
+                      Parent Directory
+                    </label>
+                    <div className="flex gap-2">
+                      <Input
+                        id="project-path"
+                        placeholder="/path/to/projects"
+                        value={projectPath}
+                        onChange={(e) => setProjectPath(e.target.value)}
+                        className="flex-1 bg-zinc-950/50 border-white/10 text-white placeholder:text-zinc-500"
+                        data-testid="interview-project-path-input"
+                      />
+                      <Button
+                        variant="secondary"
+                        onClick={handleSelectDirectory}
+                        className="bg-white/5 hover:bg-white/10 text-white border border-white/10"
+                        data-testid="interview-browse-directory"
+                      >
+                        Browse
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* Preview of generated spec */}
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-zinc-300">
+                      Generated Specification Preview
+                    </label>
+                    <div
+                      className="bg-zinc-950/50 border border-white/10 rounded-md p-3 max-h-48 overflow-y-auto"
+                      data-testid="spec-preview"
+                    >
+                      <pre className="text-xs text-zinc-400 whitespace-pre-wrap font-mono">
+                        {generatedSpec}
+                      </pre>
+                    </div>
+                  </div>
+
+                  <Button
+                    onClick={handleCreateProject}
+                    disabled={!projectName || !projectPath || isGenerating}
+                    className="w-full bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-600 text-primary-foreground border-0"
+                    data-testid="interview-create-project"
+                  >
+                    {isGenerating ? (
+                      <>
+                        <Spinner size="sm" variant="foreground" className="mr-2" />
+                        Creating...
+                      </>
+                    ) : (
+                      <>
+                        <CheckCircle className="w-4 h-4 mr-2" />
+                        Create Project
+                      </>
+                    )}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+      </div>
+
+      {/* Input */}
+      {!isComplete && (
+        <div className="border-t p-4">
+          <div className="flex gap-2">
+            <Input
+              ref={inputRef}
+              placeholder="Type your answer..."
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyPress={handleKeyPress}
+              disabled={isGenerating}
+              data-testid="interview-input"
+              className="flex-1"
+            />
+            <Button
+              onClick={handleSend}
+              disabled={!input.trim() || isGenerating}
+              data-testid="interview-send"
+            >
+              <Send className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/logged-out-view.tsx b/temp_repo/apps/ui/src/components/views/logged-out-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b18e3dd1198ebe89cf3e76c395d1632c85e27d38
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/logged-out-view.tsx
@@ -0,0 +1,29 @@
+import { useNavigate } from '@tanstack/react-router';
+import { Button } from '@/components/ui/button';
+import { LogOut } from 'lucide-react';
+
+export function LoggedOutView() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex min-h-full items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md space-y-8">
+        <div className="text-center">
+          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
+            <LogOut className="h-8 w-8 text-primary" />
+          </div>
+          <h1 className="mt-6 text-2xl font-bold tracking-tight">You’ve been logged out</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Your session expired, or the server restarted. Please log in again.
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          <Button className="w-full" onClick={() => navigate({ to: '/login' })}>
+            Go to login
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/login-view.tsx b/temp_repo/apps/ui/src/components/views/login-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..57f91d8fe9880789a51666ecc552fa4e94c64410
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/login-view.tsx
@@ -0,0 +1,473 @@
+/**
+ * Login View - Web mode authentication
+ *
+ * Uses a state machine for clear, maintainable flow:
+ *
+ * States:
+ *   checking_server → server_error (after 5 retries)
+ *   checking_server → awaiting_login (401/unauthenticated)
+ *   checking_server → checking_setup (authenticated)
+ *   awaiting_login → logging_in → login_error | checking_setup
+ *   checking_setup → redirecting
+ */
+
+import { useReducer, useEffect, useRef } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import {
+  login,
+  getHttpApiClient,
+  getServerUrlSync,
+  getApiKey,
+  getSessionToken,
+  initApiKey,
+  waitForApiKeyInit,
+} from '@/lib/http-api-client';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { KeyRound, AlertCircle, RefreshCw, ServerCrash } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { useAuthStore } from '@/store/auth-store';
+import { useSetupStore } from '@/store/setup-store';
+
+// =============================================================================
+// State Machine Types
+// =============================================================================
+
+type State =
+  | { phase: 'checking_server'; attempt: number }
+  | { phase: 'server_error'; message: string }
+  | { phase: 'awaiting_login'; apiKey: string; error: string | null }
+  | { phase: 'logging_in'; apiKey: string }
+  | { phase: 'checking_setup' }
+  | { phase: 'redirecting'; to: string };
+
+type Action =
+  | { type: 'SERVER_CHECK_RETRY'; attempt: number }
+  | { type: 'SERVER_ERROR'; message: string }
+  | { type: 'AUTH_REQUIRED' }
+  | { type: 'AUTH_VALID' }
+  | { type: 'UPDATE_API_KEY'; value: string }
+  | { type: 'SUBMIT_LOGIN' }
+  | { type: 'LOGIN_ERROR'; message: string }
+  | { type: 'REDIRECT'; to: string }
+  | { type: 'RETRY_SERVER_CHECK' };
+
+const initialState: State = { phase: 'checking_server', attempt: 1 };
+
+// =============================================================================
+// State Machine Reducer
+// =============================================================================
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'SERVER_CHECK_RETRY':
+      return { phase: 'checking_server', attempt: action.attempt };
+
+    case 'SERVER_ERROR':
+      return { phase: 'server_error', message: action.message };
+
+    case 'AUTH_REQUIRED':
+      return { phase: 'awaiting_login', apiKey: '', error: null };
+
+    case 'AUTH_VALID':
+      return { phase: 'checking_setup' };
+
+    case 'UPDATE_API_KEY':
+      if (state.phase !== 'awaiting_login') return state;
+      return { ...state, apiKey: action.value };
+
+    case 'SUBMIT_LOGIN':
+      if (state.phase !== 'awaiting_login') return state;
+      return { phase: 'logging_in', apiKey: state.apiKey };
+
+    case 'LOGIN_ERROR':
+      if (state.phase !== 'logging_in') return state;
+      return { phase: 'awaiting_login', apiKey: state.apiKey, error: action.message };
+
+    case 'REDIRECT':
+      return { phase: 'redirecting', to: action.to };
+
+    case 'RETRY_SERVER_CHECK':
+      return { phase: 'checking_server', attempt: 1 };
+
+    default:
+      return state;
+  }
+}
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const MAX_RETRIES = 5;
+const BACKOFF_BASE_MS = 400;
+const NO_STORE_CACHE_MODE: RequestCache = 'no-store';
+
+// =============================================================================
+// Imperative Flow Logic (runs once on mount)
+// =============================================================================
+
+/**
+ * Check auth status without triggering side effects.
+ * Unlike the httpClient methods, this does NOT call handleUnauthorized()
+ * which would navigate us away to /logged-out.
+ *
+ * Supports both:
+ * - Electron mode: Uses X-API-Key header (API key from IPC)
+ * - Web mode: Uses HTTP-only session cookie
+ *
+ * Returns: { authenticated: true } or { authenticated: false }
+ * Throws: on network errors (for retry logic)
+ */
+async function checkAuthStatusSafe(): Promise<{ authenticated: boolean }> {
+  const serverUrl = getServerUrlSync();
+
+  // Wait for API key to be initialized before checking auth
+  // This ensures we have a valid API key to send in the header
+  await waitForApiKeyInit();
+
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  };
+
+  // Electron mode: use API key header
+  const apiKey = getApiKey();
+  if (apiKey) {
+    headers['X-API-Key'] = apiKey;
+  }
+
+  // Add session token header if available (web mode)
+  const sessionToken = getSessionToken();
+  if (sessionToken) {
+    headers['X-Session-Token'] = sessionToken;
+  }
+
+  const response = await fetch(`${serverUrl}/api/auth/status`, {
+    headers,
+    credentials: 'include',
+    signal: AbortSignal.timeout(5000),
+    cache: NO_STORE_CACHE_MODE,
+  });
+
+  // Any response means server is reachable
+  const data = await response.json();
+  return { authenticated: data.authenticated === true };
+}
+
+/**
+ * Check if server is reachable and if we have a valid session.
+ */
+async function checkServerAndSession(
+  dispatch: React.Dispatch<Action>,
+  setAuthState: (state: { isAuthenticated: boolean; authChecked: boolean }) => void,
+  signal?: AbortSignal
+): Promise<void> {
+  for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+    // Return early if the component has unmounted
+    if (signal?.aborted) {
+      return;
+    }
+
+    dispatch({ type: 'SERVER_CHECK_RETRY', attempt });
+
+    try {
+      const result = await checkAuthStatusSafe();
+
+      // Return early if the component has unmounted
+      if (signal?.aborted) {
+        return;
+      }
+
+      if (result.authenticated) {
+        // Server is reachable and we're authenticated
+        setAuthState({ isAuthenticated: true, authChecked: true });
+        dispatch({ type: 'AUTH_VALID' });
+        return;
+      }
+
+      // Server is reachable but we need to login
+      dispatch({ type: 'AUTH_REQUIRED' });
+      return;
+    } catch (error: unknown) {
+      // Network error - server is not reachable
+      console.debug(`Server check attempt ${attempt}/${MAX_RETRIES} failed:`, error);
+
+      if (attempt === MAX_RETRIES) {
+        // Return early if the component has unmounted
+        if (!signal?.aborted) {
+          dispatch({
+            type: 'SERVER_ERROR',
+            message: 'Unable to connect to server. Please check that the server is running.',
+          });
+        }
+        return;
+      }
+
+      // Exponential backoff before retry
+      const backoffMs = BACKOFF_BASE_MS * Math.pow(2, attempt - 1);
+      await new Promise((resolve) => setTimeout(resolve, backoffMs));
+    }
+  }
+}
+
+async function checkSetupStatus(
+  dispatch: React.Dispatch<Action>,
+  signal?: AbortSignal
+): Promise<void> {
+  const httpClient = getHttpApiClient();
+
+  try {
+    const result = await httpClient.settings.getGlobal();
+
+    // Return early if aborted
+    if (signal?.aborted) {
+      return;
+    }
+
+    if (result.success && result.settings) {
+      // Check the setupComplete field from settings
+      // This is set to true when user completes the setup wizard
+      const setupComplete = (result.settings as { setupComplete?: boolean }).setupComplete === true;
+
+      // IMPORTANT: Update the Zustand store BEFORE redirecting
+      // Otherwise __root.tsx routing effect will override our redirect
+      // because it reads setupComplete from the store (which defaults to false)
+      useSetupStore.getState().setSetupComplete(setupComplete);
+
+      dispatch({ type: 'REDIRECT', to: setupComplete ? '/' : '/setup' });
+    } else {
+      // No settings yet = first run = need setup
+      useSetupStore.getState().setSetupComplete(false);
+      dispatch({ type: 'REDIRECT', to: '/setup' });
+    }
+  } catch {
+    // Return early if aborted
+    if (signal?.aborted) {
+      return;
+    }
+    // If we can't get settings, go to setup to be safe
+    useSetupStore.getState().setSetupComplete(false);
+    dispatch({ type: 'REDIRECT', to: '/setup' });
+  }
+}
+
+async function performLogin(
+  apiKey: string,
+  dispatch: React.Dispatch<Action>,
+  setAuthState: (state: { isAuthenticated: boolean; authChecked: boolean }) => void
+): Promise<void> {
+  try {
+    const result = await login(apiKey.trim());
+
+    if (result.success) {
+      setAuthState({ isAuthenticated: true, authChecked: true });
+      dispatch({ type: 'AUTH_VALID' });
+    } else {
+      dispatch({ type: 'LOGIN_ERROR', message: result.error || 'Invalid API key' });
+    }
+  } catch {
+    dispatch({ type: 'LOGIN_ERROR', message: 'Failed to connect to server' });
+  }
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export function LoginView() {
+  const navigate = useNavigate();
+  const setAuthState = useAuthStore((s) => s.setAuthState);
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const retryControllerRef = useRef<AbortController | null>(null);
+
+  // Initialize API key before checking session
+  // This ensures getApiKey() returns a valid value in checkAuthStatusSafe()
+  useEffect(() => {
+    initApiKey().catch((error) => {
+      console.warn('Failed to initialize API key:', error);
+    });
+  }, []);
+
+  // Run initial server/session check on mount.
+  // IMPORTANT: Do not "run once" via a ref guard here.
+  // In React StrictMode (dev), effects mount -> cleanup -> mount.
+  // If we abort in cleanup and also skip the second run, we'll get stuck forever on "Connecting...".
+  useEffect(() => {
+    const controller = new AbortController();
+    checkServerAndSession(dispatch, setAuthState, controller.signal);
+
+    return () => {
+      controller.abort();
+      retryControllerRef.current?.abort();
+    };
+  }, [setAuthState]);
+
+  // When we enter checking_setup phase, check setup status
+  useEffect(() => {
+    if (state.phase === 'checking_setup') {
+      const controller = new AbortController();
+      checkSetupStatus(dispatch, controller.signal);
+
+      return () => {
+        controller.abort();
+      };
+    }
+  }, [state.phase]);
+
+  // When we enter redirecting phase, navigate
+  useEffect(() => {
+    if (state.phase === 'redirecting') {
+      navigate({ to: state.to });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- state.to only accessed when phase is redirecting
+  }, [state.phase, navigate]);
+
+  // Handle login form submission
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (state.phase !== 'awaiting_login' || !state.apiKey.trim()) return;
+
+    dispatch({ type: 'SUBMIT_LOGIN' });
+    performLogin(state.apiKey, dispatch, setAuthState);
+  };
+
+  // Handle retry button for server errors
+  const handleRetry = () => {
+    // Abort any previous retry request
+    retryControllerRef.current?.abort();
+
+    dispatch({ type: 'RETRY_SERVER_CHECK' });
+    const controller = new AbortController();
+    retryControllerRef.current = controller;
+    checkServerAndSession(dispatch, setAuthState, controller.signal);
+  };
+
+  // =============================================================================
+  // Render based on current state
+  // =============================================================================
+
+  // Checking server connectivity
+  if (state.phase === 'checking_server') {
+    return (
+      <div className="flex min-h-full items-center justify-center bg-background p-4">
+        <div className="text-center space-y-4">
+          <Spinner size="xl" className="mx-auto" />
+          <p className="text-sm text-muted-foreground">
+            Connecting to server
+            {state.attempt > 1 ? ` (attempt ${state.attempt}/${MAX_RETRIES})` : '...'}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Server unreachable after retries
+  if (state.phase === 'server_error') {
+    return (
+      <div className="flex min-h-full items-center justify-center bg-background p-4">
+        <div className="w-full max-w-md space-y-6 text-center">
+          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
+            <ServerCrash className="h-8 w-8 text-destructive" />
+          </div>
+          <div className="space-y-2">
+            <h1 className="text-2xl font-bold tracking-tight">Server Unavailable</h1>
+            <p className="text-sm text-muted-foreground">{state.message}</p>
+          </div>
+          <Button onClick={handleRetry} variant="outline" className="gap-2">
+            <RefreshCw className="h-4 w-4" />
+            Retry Connection
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  // Checking setup status after auth
+  if (state.phase === 'checking_setup' || state.phase === 'redirecting') {
+    return (
+      <div className="flex min-h-full items-center justify-center bg-background p-4">
+        <div className="text-center space-y-4">
+          <Spinner size="xl" className="mx-auto" />
+          <p className="text-sm text-muted-foreground">
+            {state.phase === 'checking_setup' ? 'Loading settings...' : 'Redirecting...'}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Login form (awaiting_login or logging_in)
+  const isLoggingIn = state.phase === 'logging_in';
+  const apiKey = state.apiKey;
+  const error = state.phase === 'awaiting_login' ? state.error : null;
+
+  return (
+    <div className="flex min-h-full items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md space-y-8">
+        {/* Header */}
+        <div className="text-center">
+          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
+            <KeyRound className="h-8 w-8 text-primary" />
+          </div>
+          <h1 className="mt-6 text-2xl font-bold tracking-tight">Authentication Required</h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Enter the API key shown in the server console to continue.
+          </p>
+        </div>
+
+        {/* Login Form */}
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="space-y-2">
+            <label htmlFor="apiKey" className="text-sm font-medium">
+              API Key
+            </label>
+            <Input
+              id="apiKey"
+              type="password"
+              placeholder="Enter API key..."
+              value={apiKey}
+              onChange={(e) => dispatch({ type: 'UPDATE_API_KEY', value: e.target.value })}
+              disabled={isLoggingIn}
+              autoFocus
+              className="font-mono"
+              data-testid="login-api-key-input"
+            />
+          </div>
+
+          {error && (
+            <div className="flex items-center gap-2 rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+              <AlertCircle className="h-4 w-4 shrink-0" />
+              <span>{error}</span>
+            </div>
+          )}
+
+          <Button
+            type="submit"
+            className="w-full"
+            disabled={isLoggingIn || !apiKey.trim()}
+            data-testid="login-submit-button"
+          >
+            {isLoggingIn ? (
+              <>
+                <Spinner size="sm" variant="foreground" className="mr-2" />
+                Authenticating...
+              </>
+            ) : (
+              'Login'
+            )}
+          </Button>
+        </form>
+
+        {/* Help Text */}
+        <div className="rounded-lg border bg-muted/50 p-4 text-sm">
+          <p className="font-medium">Where to find the API key:</p>
+          <ol className="mt-2 list-inside list-decimal space-y-1 text-muted-foreground">
+            <li>Look at the server terminal/console output</li>
+            <li>Find the box labeled "API Key for Web Mode Authentication"</li>
+            <li>Copy the UUID displayed there</li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/memory-view.tsx b/temp_repo/apps/ui/src/components/views/memory-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..edac6b9d570c678ba176303755c9354a207d6347
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/memory-view.tsx
@@ -0,0 +1,724 @@
+import { useEffect, useState, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { useAppStore } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import {
+  HeaderActionsPanel,
+  HeaderActionsPanelTrigger,
+} from '@/components/ui/header-actions-panel';
+import {
+  RefreshCw,
+  FileText,
+  Trash2,
+  Save,
+  Brain,
+  Eye,
+  Pencil,
+  FilePlus,
+  MoreVertical,
+  ArrowLeft,
+} from 'lucide-react';
+import { useIsMobile } from '@/hooks/use-media-query';
+import { Spinner } from '@/components/ui/spinner';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
+import { isMarkdownFilename } from '@/lib/image-utils';
+import { Markdown } from '../ui/markdown';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+const logger = createLogger('MemoryView');
+
+// Responsive layout classes
+const FILE_LIST_BASE_CLASSES = 'border-r border-border flex flex-col overflow-hidden';
+const FILE_LIST_DESKTOP_CLASSES = 'w-64';
+const FILE_LIST_EXPANDED_CLASSES = 'flex-1';
+const FILE_LIST_MOBILE_NO_SELECTION_CLASSES = 'w-full border-r-0';
+const FILE_LIST_MOBILE_SELECTION_CLASSES = 'hidden';
+
+const EDITOR_PANEL_BASE_CLASSES = 'flex-1 flex flex-col overflow-hidden';
+const EDITOR_PANEL_MOBILE_HIDDEN_CLASSES = 'hidden';
+
+interface MemoryFile {
+  name: string;
+  content?: string;
+  path: string;
+}
+
+export function MemoryView() {
+  const { currentProject } = useAppStore();
+  const [memoryFiles, setMemoryFiles] = useState<MemoryFile[]>([]);
+  const [selectedFile, setSelectedFile] = useState<MemoryFile | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [editedContent, setEditedContent] = useState('');
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+  const [renameFileName, setRenameFileName] = useState('');
+  const [isPreviewMode, setIsPreviewMode] = useState(true);
+
+  // Create Memory file modal state
+  const [isCreateMemoryOpen, setIsCreateMemoryOpen] = useState(false);
+  const [newMemoryName, setNewMemoryName] = useState('');
+  const [newMemoryContent, setNewMemoryContent] = useState('');
+
+  // Actions panel state (for tablet/mobile)
+  const [showActionsPanel, setShowActionsPanel] = useState(false);
+
+  // Mobile detection
+  const isMobile = useIsMobile();
+
+  // Get memory directory path
+  const getMemoryPath = useCallback(() => {
+    if (!currentProject) return null;
+    return `${currentProject.path}/.automaker/memory`;
+  }, [currentProject]);
+
+  // Load memory files
+  const loadMemoryFiles = useCallback(async () => {
+    const memoryPath = getMemoryPath();
+    if (!memoryPath) return;
+
+    setIsLoading(true);
+    try {
+      const api = getElectronAPI();
+
+      // Ensure memory directory exists
+      await api.mkdir(memoryPath);
+
+      // Read directory contents
+      const result = await api.readdir(memoryPath);
+      if (result.success && result.entries) {
+        const files: MemoryFile[] = result.entries
+          .filter((entry) => entry.isFile && isMarkdownFilename(entry.name))
+          .map((entry) => ({
+            name: entry.name,
+            path: `${memoryPath}/${entry.name}`,
+          }));
+        setMemoryFiles(files);
+      }
+    } catch (error) {
+      logger.error('Failed to load memory files:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [getMemoryPath]);
+
+  useEffect(() => {
+    loadMemoryFiles();
+  }, [loadMemoryFiles]);
+
+  // Load selected file content
+  const loadFileContent = useCallback(async (file: MemoryFile) => {
+    try {
+      const api = getElectronAPI();
+      const result = await api.readFile(file.path);
+      if (result.success && result.content !== undefined) {
+        setEditedContent(result.content);
+        setSelectedFile({ ...file, content: result.content });
+        setHasChanges(false);
+      }
+    } catch (error) {
+      logger.error('Failed to load file content:', error);
+    }
+  }, []);
+
+  // Select a file
+  const handleSelectFile = (file: MemoryFile) => {
+    // Note: Unsaved changes warning could be added here in the future
+    // For now, silently proceed to avoid disrupting mobile UX flow
+    loadFileContent(file);
+    setIsPreviewMode(true);
+  };
+
+  // Save current file
+  const saveFile = async () => {
+    if (!selectedFile) return;
+
+    setIsSaving(true);
+    try {
+      const api = getElectronAPI();
+      await api.writeFile(selectedFile.path, editedContent);
+      setSelectedFile({ ...selectedFile, content: editedContent });
+      setHasChanges(false);
+    } catch (error) {
+      logger.error('Failed to save file:', error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // Handle content change
+  const handleContentChange = (value: string) => {
+    setEditedContent(value);
+    setHasChanges(true);
+  };
+
+  // Handle create memory file
+  const handleCreateMemory = async () => {
+    const memoryPath = getMemoryPath();
+    if (!memoryPath || !newMemoryName.trim()) return;
+
+    try {
+      const api = getElectronAPI();
+      let filename = newMemoryName.trim();
+
+      // Add .md extension if not provided
+      if (!filename.includes('.')) {
+        filename += '.md';
+      }
+
+      const filePath = `${memoryPath}/${filename}`;
+
+      // Write memory file
+      await api.writeFile(filePath, newMemoryContent);
+
+      // Reload files
+      await loadMemoryFiles();
+
+      // Reset and close modal
+      setIsCreateMemoryOpen(false);
+      setNewMemoryName('');
+      setNewMemoryContent('');
+    } catch (error) {
+      logger.error('Failed to create memory file:', error);
+      setIsCreateMemoryOpen(false);
+      setNewMemoryName('');
+      setNewMemoryContent('');
+    }
+  };
+
+  // Delete selected file
+  const handleDeleteFile = async () => {
+    if (!selectedFile) return;
+
+    try {
+      const api = getElectronAPI();
+      await api.deleteFile(selectedFile.path);
+
+      setIsDeleteDialogOpen(false);
+      setSelectedFile(null);
+      setEditedContent('');
+      setHasChanges(false);
+      await loadMemoryFiles();
+    } catch (error) {
+      logger.error('Failed to delete file:', error);
+    }
+  };
+
+  // Rename selected file
+  const handleRenameFile = async () => {
+    const memoryPath = getMemoryPath();
+    if (!selectedFile || !memoryPath || !renameFileName.trim()) return;
+
+    let newName = renameFileName.trim();
+    // Add .md extension if not provided
+    if (!newName.includes('.')) {
+      newName += '.md';
+    }
+
+    if (newName === selectedFile.name) {
+      setIsRenameDialogOpen(false);
+      return;
+    }
+
+    try {
+      const api = getElectronAPI();
+      const newPath = `${memoryPath}/${newName}`;
+
+      // Check if file with new name already exists
+      const exists = await api.exists(newPath);
+      if (exists) {
+        logger.error('A file with this name already exists');
+        return;
+      }
+
+      // Read current file content
+      const result = await api.readFile(selectedFile.path);
+      if (!result.success || result.content === undefined) {
+        logger.error('Failed to read file for rename');
+        return;
+      }
+
+      // Write to new path
+      await api.writeFile(newPath, result.content);
+
+      // Delete old file
+      await api.deleteFile(selectedFile.path);
+
+      setIsRenameDialogOpen(false);
+      setRenameFileName('');
+
+      // Reload files and select the renamed file
+      await loadMemoryFiles();
+
+      // Update selected file with new name and path
+      const renamedFile: MemoryFile = {
+        name: newName,
+        path: newPath,
+        content: result.content,
+      };
+      setSelectedFile(renamedFile);
+    } catch (error) {
+      logger.error('Failed to rename file:', error);
+    }
+  };
+
+  // Delete file from list (used by dropdown)
+  const handleDeleteFromList = async (file: MemoryFile) => {
+    try {
+      const api = getElectronAPI();
+      await api.deleteFile(file.path);
+
+      // Clear selection if this was the selected file
+      if (selectedFile?.path === file.path) {
+        setSelectedFile(null);
+        setEditedContent('');
+        setHasChanges(false);
+      }
+
+      await loadMemoryFiles();
+    } catch (error) {
+      logger.error('Failed to delete file:', error);
+    }
+  };
+
+  if (!currentProject) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="memory-view-no-project">
+        <p className="text-muted-foreground">No project selected</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="memory-view-loading">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden content-bg" data-testid="memory-view">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
+        <div className="flex items-center gap-3">
+          <Brain className="w-5 h-5 text-muted-foreground" />
+          <div>
+            <h1 className="text-xl font-bold">Memory Layer</h1>
+            <p className="text-sm text-muted-foreground">
+              View and edit AI memory files for this project
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {/* Desktop: show actions inline */}
+          <div className="hidden lg:flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={loadMemoryFiles}
+              data-testid="refresh-memory-button"
+            >
+              <RefreshCw className="w-4 h-4 mr-2" />
+              Refresh
+            </Button>
+            <Button
+              size="sm"
+              onClick={() => setIsCreateMemoryOpen(true)}
+              data-testid="create-memory-button"
+            >
+              <FilePlus className="w-4 h-4 mr-2" />
+              Create Memory File
+            </Button>
+          </div>
+          {/* Tablet/Mobile: show trigger for actions panel */}
+          <HeaderActionsPanelTrigger
+            isOpen={showActionsPanel}
+            onToggle={() => setShowActionsPanel(!showActionsPanel)}
+          />
+        </div>
+      </div>
+
+      {/* Actions Panel (tablet/mobile) */}
+      <HeaderActionsPanel
+        isOpen={showActionsPanel}
+        onClose={() => setShowActionsPanel(false)}
+        title="Memory Actions"
+      >
+        <Button
+          variant="outline"
+          className="w-full justify-start"
+          onClick={() => {
+            loadMemoryFiles();
+            setShowActionsPanel(false);
+          }}
+          data-testid="refresh-memory-button-mobile"
+        >
+          <RefreshCw className="w-4 h-4 mr-2" />
+          Refresh
+        </Button>
+        <Button
+          className="w-full justify-start"
+          onClick={() => {
+            setIsCreateMemoryOpen(true);
+            setShowActionsPanel(false);
+          }}
+          data-testid="create-memory-button-mobile"
+        >
+          <FilePlus className="w-4 h-4 mr-2" />
+          Create Memory File
+        </Button>
+      </HeaderActionsPanel>
+
+      {/* Main content area with file list and editor */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Left Panel - File List */}
+        {/* Mobile: Full width, hidden when file is selected (full-screen editor) */}
+        {/* Desktop: Fixed width w-64, expands to fill space when no file selected */}
+        <div
+          className={cn(
+            FILE_LIST_BASE_CLASSES,
+            FILE_LIST_DESKTOP_CLASSES,
+            !selectedFile && FILE_LIST_EXPANDED_CLASSES,
+            isMobile && !selectedFile && FILE_LIST_MOBILE_NO_SELECTION_CLASSES,
+            isMobile && selectedFile && FILE_LIST_MOBILE_SELECTION_CLASSES
+          )}
+        >
+          <div className="p-3 border-b border-border">
+            <h2 className="text-sm font-semibold text-muted-foreground">
+              Memory Files ({memoryFiles.length})
+            </h2>
+          </div>
+          <div className="flex-1 overflow-y-auto p-2" data-testid="memory-file-list">
+            {memoryFiles.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-full text-center p-4">
+                <Brain className="w-8 h-8 text-muted-foreground mb-2" />
+                <p className="text-sm text-muted-foreground">
+                  No memory files yet.
+                  <br />
+                  Create a memory file to get started.
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-1">
+                {memoryFiles.map((file) => (
+                  <div
+                    key={file.path}
+                    onClick={() => handleSelectFile(file)}
+                    className={cn(
+                      'group w-full flex items-center gap-2 px-3 py-2 rounded-lg transition-colors cursor-pointer',
+                      selectedFile?.path === file.path
+                        ? 'bg-primary/20 text-foreground border border-primary/30'
+                        : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                    )}
+                    data-testid={`memory-file-${file.name}`}
+                  >
+                    <FileText className="w-4 h-4 flex-shrink-0" />
+                    <div className="min-w-0 flex-1">
+                      <span className="truncate text-sm block">{file.name}</span>
+                    </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <button
+                          onClick={(e) => e.stopPropagation()}
+                          className="opacity-0 group-hover:opacity-100 p-1 hover:bg-accent rounded transition-opacity"
+                          data-testid={`memory-file-menu-${file.name}`}
+                        >
+                          <MoreVertical className="w-4 h-4" />
+                        </button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                          onClick={() => {
+                            setRenameFileName(file.name);
+                            setSelectedFile(file);
+                            setIsRenameDialogOpen(true);
+                          }}
+                          data-testid={`rename-memory-file-${file.name}`}
+                        >
+                          <Pencil className="w-4 h-4 mr-2" />
+                          Rename
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => handleDeleteFromList(file)}
+                          className="text-red-500 focus:text-red-500"
+                          data-testid={`delete-memory-file-${file.name}`}
+                        >
+                          <Trash2 className="w-4 h-4 mr-2" />
+                          Delete
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Right Panel - Editor/Preview */}
+        {/* Mobile: Hidden when no file selected (file list shows full screen) */}
+        <div
+          className={cn(
+            EDITOR_PANEL_BASE_CLASSES,
+            isMobile && !selectedFile && EDITOR_PANEL_MOBILE_HIDDEN_CLASSES
+          )}
+        >
+          {selectedFile ? (
+            <>
+              {/* File toolbar */}
+              <div className="flex items-center justify-between p-3 border-b border-border bg-card">
+                <div className="flex items-center gap-2 min-w-0">
+                  {/* Mobile-only: Back button to return to file list */}
+                  {isMobile && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setSelectedFile(null)}
+                      className="shrink-0 -ml-1"
+                      aria-label="Back"
+                      title="Back"
+                    >
+                      <ArrowLeft className="h-4 w-4" />
+                    </Button>
+                  )}
+                  <FileText className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                  <span className="text-sm font-medium truncate">{selectedFile.name}</span>
+                </div>
+                <div className={cn('flex gap-2', isMobile && 'gap-1')}>
+                  {/* Mobile: Icon-only buttons with aria-labels for accessibility */}
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setIsPreviewMode(!isPreviewMode)}
+                    data-testid="toggle-preview-mode"
+                    aria-label={isPreviewMode ? 'Edit' : 'Preview'}
+                    title={isPreviewMode ? 'Edit' : 'Preview'}
+                  >
+                    {isPreviewMode ? (
+                      <>
+                        <Pencil className="w-4 h-4" />
+                        {!isMobile && <span className="ml-2">Edit</span>}
+                      </>
+                    ) : (
+                      <>
+                        <Eye className="w-4 h-4" />
+                        {!isMobile && <span className="ml-2">Preview</span>}
+                      </>
+                    )}
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={saveFile}
+                    disabled={!hasChanges || isSaving}
+                    data-testid="save-memory-file"
+                    aria-label="Save"
+                    title="Save"
+                  >
+                    <Save className="w-4 h-4" />
+                    {!isMobile && (
+                      <span className="ml-2">
+                        {isSaving ? 'Saving...' : hasChanges ? 'Save' : 'Saved'}
+                      </span>
+                    )}
+                  </Button>
+                  {/* Desktop-only: Delete button (use dropdown on mobile to save space) */}
+                  {!isMobile && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setIsDeleteDialogOpen(true)}
+                      className="text-red-500 hover:text-red-400 hover:border-red-500/50"
+                      data-testid="delete-memory-file"
+                      aria-label="Delete"
+                      title="Delete"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  )}
+                </div>
+              </div>
+
+              {/* Content area */}
+              <div className="flex-1 overflow-hidden p-4">
+                {isPreviewMode ? (
+                  <Card className="h-full overflow-auto p-4" data-testid="markdown-preview">
+                    <Markdown>{editedContent}</Markdown>
+                  </Card>
+                ) : (
+                  <Card className="h-full overflow-hidden">
+                    <textarea
+                      className="w-full h-full p-4 font-mono text-sm bg-transparent resize-none focus:outline-none"
+                      value={editedContent}
+                      onChange={(e) => handleContentChange(e.target.value)}
+                      placeholder="Enter memory content here..."
+                      spellCheck={false}
+                      data-testid="memory-editor"
+                    />
+                  </Card>
+                )}
+              </div>
+            </>
+          ) : (
+            <div className="flex-1 flex items-center justify-center">
+              <div className="text-center">
+                <Brain className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
+                <p className="text-foreground-secondary">Select a file to view or edit</p>
+                <p className="text-muted-foreground text-sm mt-1">
+                  Memory files help AI agents learn from past interactions
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Create Memory Dialog */}
+      <Dialog open={isCreateMemoryOpen} onOpenChange={setIsCreateMemoryOpen}>
+        <DialogContent
+          data-testid="create-memory-dialog"
+          className="w-[60vw] max-w-[60vw] max-h-[80vh] flex flex-col"
+        >
+          <DialogHeader>
+            <DialogTitle>Create Memory File</DialogTitle>
+            <DialogDescription>
+              Create a new memory file to store learnings and patterns for AI agents.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4 flex-1 overflow-auto">
+            <div className="space-y-2">
+              <Label htmlFor="memory-filename">File Name</Label>
+              <Input
+                id="memory-filename"
+                value={newMemoryName}
+                onChange={(e) => setNewMemoryName(e.target.value)}
+                placeholder="my-learnings.md"
+                data-testid="new-memory-name"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="memory-content">Content</Label>
+              <textarea
+                id="memory-content"
+                value={newMemoryContent}
+                onChange={(e) => setNewMemoryContent(e.target.value)}
+                placeholder="Enter your memory content here..."
+                className="w-full h-60 p-3 font-mono text-sm bg-background border border-border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
+                spellCheck={false}
+                data-testid="new-memory-content"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsCreateMemoryOpen(false);
+                setNewMemoryName('');
+                setNewMemoryContent('');
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleCreateMemory}
+              disabled={!newMemoryName.trim()}
+              data-testid="confirm-create-memory"
+            >
+              Create
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+        <DialogContent data-testid="delete-memory-dialog">
+          <DialogHeader>
+            <DialogTitle>Delete Memory File</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete "{selectedFile?.name}"? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteFile}
+              className="bg-red-600 hover:bg-red-700"
+              data-testid="confirm-delete-file"
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Rename Dialog */}
+      <Dialog open={isRenameDialogOpen} onOpenChange={setIsRenameDialogOpen}>
+        <DialogContent data-testid="rename-memory-dialog">
+          <DialogHeader>
+            <DialogTitle>Rename Memory File</DialogTitle>
+            <DialogDescription>Enter a new name for "{selectedFile?.name}".</DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <div className="space-y-2">
+              <Label htmlFor="rename-filename">File Name</Label>
+              <Input
+                id="rename-filename"
+                value={renameFileName}
+                onChange={(e) => setRenameFileName(e.target.value)}
+                placeholder="Enter new filename"
+                data-testid="rename-file-input"
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && renameFileName.trim()) {
+                    handleRenameFile();
+                  }
+                }}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsRenameDialogOpen(false);
+                setRenameFileName('');
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleRenameFile}
+              disabled={!renameFileName.trim() || renameFileName === selectedFile?.name}
+              data-testid="confirm-rename-file"
+            >
+              Rename
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/notifications-view.tsx b/temp_repo/apps/ui/src/components/views/notifications-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a65c91e9ba767123c6f4ec1dc127c5a4121daa70
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/notifications-view.tsx
@@ -0,0 +1,264 @@
+/**
+ * Notifications View - Full page view for all notifications
+ */
+
+import { useCallback } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { useNotificationsStore } from '@/store/notifications-store';
+import { useLoadNotifications, useNotificationEvents } from '@/hooks/use-notification-events';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardTitle } from '@/components/ui/card';
+import { Bell, Check, CheckCheck, Trash2, ExternalLink, AlertCircle } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { useNavigate } from '@tanstack/react-router';
+import type { Notification } from '@automaker/types';
+import { formatRelativeTime } from '@/lib/utils';
+
+export function NotificationsView() {
+  const { currentProject } = useAppStore();
+  const projectPath = currentProject?.path ?? null;
+  const navigate = useNavigate();
+
+  const {
+    notifications,
+    unreadCount,
+    isLoading,
+    error,
+    markAsRead,
+    dismissNotification,
+    markAllAsRead,
+    dismissAll,
+  } = useNotificationsStore();
+
+  // Load notifications when project changes
+  useLoadNotifications(projectPath);
+
+  // Subscribe to real-time notification events
+  useNotificationEvents(projectPath);
+
+  const handleMarkAsRead = useCallback(
+    async (notificationId: string) => {
+      if (!projectPath) return;
+
+      // Optimistic update
+      markAsRead(notificationId);
+
+      // Sync with server
+      const api = getHttpApiClient();
+      await api.notifications.markAsRead(projectPath, notificationId);
+    },
+    [projectPath, markAsRead]
+  );
+
+  const handleDismiss = useCallback(
+    async (notificationId: string) => {
+      if (!projectPath) return;
+
+      // Optimistic update
+      dismissNotification(notificationId);
+
+      // Sync with server
+      const api = getHttpApiClient();
+      await api.notifications.dismiss(projectPath, notificationId);
+    },
+    [projectPath, dismissNotification]
+  );
+
+  const handleMarkAllAsRead = useCallback(async () => {
+    if (!projectPath) return;
+
+    // Optimistic update
+    markAllAsRead();
+
+    // Sync with server
+    const api = getHttpApiClient();
+    await api.notifications.markAsRead(projectPath);
+  }, [projectPath, markAllAsRead]);
+
+  const handleDismissAll = useCallback(async () => {
+    if (!projectPath) return;
+
+    // Optimistic update
+    dismissAll();
+
+    // Sync with server
+    const api = getHttpApiClient();
+    await api.notifications.dismiss(projectPath);
+  }, [projectPath, dismissAll]);
+
+  const handleNotificationClick = useCallback(
+    (notification: Notification) => {
+      // Mark as read
+      handleMarkAsRead(notification.id);
+
+      // Navigate to the relevant view based on notification type
+      if (notification.featureId) {
+        // Navigate to board view with feature ID and project path to show output
+        navigate({
+          to: '/board',
+          search: {
+            featureId: notification.featureId,
+            projectPath: notification.projectPath || undefined,
+          },
+        });
+      }
+    },
+    [handleMarkAsRead, navigate]
+  );
+
+  const getNotificationIcon = (type: string) => {
+    switch (type) {
+      case 'feature_waiting_approval':
+        return <Bell className="h-5 w-5 text-yellow-500" />;
+      case 'feature_verified':
+        return <Check className="h-5 w-5 text-green-500" />;
+      case 'spec_regeneration_complete':
+        return <Check className="h-5 w-5 text-blue-500" />;
+      case 'agent_complete':
+        return <Check className="h-5 w-5 text-purple-500" />;
+      case 'feature_error':
+        return <AlertCircle className="h-5 w-5 text-red-500" />;
+      case 'auto_mode_error':
+        return <AlertCircle className="h-5 w-5 text-red-500" />;
+      default:
+        return <Bell className="h-5 w-5" />;
+    }
+  };
+
+  if (!projectPath) {
+    return (
+      <div className="flex flex-1 flex-col items-center justify-center p-8">
+        <Bell className="h-12 w-12 text-muted-foreground/50 mb-4" />
+        <p className="text-muted-foreground">Select a project to view notifications</p>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-1 flex-col items-center justify-center p-8">
+        <Spinner size="xl" />
+        <p className="text-muted-foreground mt-4">Loading notifications...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-1 flex-col items-center justify-center p-8">
+        <p className="text-destructive">{error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-1 flex-col p-6 overflow-auto">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold">Notifications</h1>
+          <p className="text-muted-foreground">
+            {unreadCount > 0 ? `${unreadCount} unread` : 'All caught up!'}
+          </p>
+        </div>
+        {notifications.length > 0 && (
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleMarkAllAsRead}
+              disabled={unreadCount === 0}
+            >
+              <CheckCheck className="h-4 w-4 mr-2" />
+              Mark all as read
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleDismissAll}>
+              <Trash2 className="h-4 w-4 mr-2" />
+              Dismiss all
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {notifications.length === 0 ? (
+        <Card className="flex-1">
+          <CardContent className="flex flex-col items-center justify-center h-full min-h-[300px]">
+            <Bell className="h-12 w-12 text-muted-foreground/50 mb-4" />
+            <p className="text-muted-foreground text-lg">No notifications</p>
+            <p className="text-muted-foreground text-sm mt-2">
+              Notifications will appear here when features are ready for review or operations
+              complete.
+            </p>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-3">
+          {notifications.map((notification) => (
+            <Card
+              key={notification.id}
+              className={`transition-colors cursor-pointer hover:bg-accent/50 ${
+                !notification.read ? 'border-primary/50 bg-primary/5' : ''
+              }`}
+              onClick={() => handleNotificationClick(notification)}
+            >
+              <CardContent className="flex items-start gap-4 p-4">
+                <div className="flex-shrink-0 mt-1">{getNotificationIcon(notification.type)}</div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <CardTitle className="text-base">{notification.title}</CardTitle>
+                    {!notification.read && (
+                      <span className="h-2 w-2 rounded-full bg-primary flex-shrink-0" />
+                    )}
+                  </div>
+                  <CardDescription className="mt-1">{notification.message}</CardDescription>
+                  <p className="text-xs text-muted-foreground mt-2">
+                    {formatRelativeTime(new Date(notification.createdAt))}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2 flex-shrink-0">
+                  {!notification.read && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleMarkAsRead(notification.id);
+                      }}
+                      title="Mark as read"
+                    >
+                      <Check className="h-4 w-4" />
+                    </Button>
+                  )}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDismiss(notification.id);
+                    }}
+                    title="Dismiss"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                  {notification.featureId && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleNotificationClick(notification);
+                      }}
+                      title="Go to feature"
+                    >
+                      <ExternalLink className="h-4 w-4" />
+                    </Button>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/overview-view.tsx b/temp_repo/apps/ui/src/components/views/overview-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..581d6aaa6d9e5aa5ede2288bdd7333f7c04459cc
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/overview-view.tsx
@@ -0,0 +1,519 @@
+/**
+ * OverviewView - Multi-project dashboard showing status across all projects
+ *
+ * Provides a unified view of all projects with active features, running agents,
+ * recent completions, and alerts. Quick navigation to any project or feature.
+ */
+
+import { useState, useCallback } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { createLogger } from '@automaker/utils/logger';
+import { useMultiProjectStatus } from '@/hooks/use-multi-project-status';
+import { useAppStore } from '@/store/app-store';
+import { isElectron, getElectronAPI } from '@/lib/electron';
+import { isMac } from '@/lib/utils';
+import { initializeProject } from '@/lib/project-init';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import { Spinner } from '@/components/ui/spinner';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { NewProjectModal } from '@/components/dialogs/new-project-modal';
+import { WorkspacePickerModal } from '@/components/dialogs/workspace-picker-modal';
+import { ProjectStatusCard } from './overview/project-status-card';
+import { RecentActivityFeed } from './overview/recent-activity-feed';
+import { RunningAgentsPanel } from './overview/running-agents-panel';
+import type { StarterTemplate } from '@/lib/templates';
+import {
+  LayoutDashboard,
+  RefreshCw,
+  Folder,
+  FolderOpen,
+  Plus,
+  Activity,
+  CheckCircle2,
+  XCircle,
+  Clock,
+  Bot,
+  Bell,
+} from 'lucide-react';
+
+const logger = createLogger('OverviewView');
+
+export function OverviewView() {
+  const navigate = useNavigate();
+  const { overview, isLoading, error, refresh } = useMultiProjectStatus(15000); // Refresh every 15s
+  const { upsertAndSetCurrentProject } = useAppStore();
+
+  // Modal state
+  const [showNewProjectModal, setShowNewProjectModal] = useState(false);
+  const [showWorkspacePicker, setShowWorkspacePicker] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+
+  const initializeAndOpenProject = useCallback(
+    async (path: string, name: string) => {
+      try {
+        const initResult = await initializeProject(path);
+        if (!initResult.success) {
+          toast.error('Failed to initialize project', {
+            description: initResult.error || 'Unknown error occurred',
+          });
+          return;
+        }
+
+        upsertAndSetCurrentProject(path, name);
+
+        toast.success('Project opened', { description: `Opened ${name}` });
+        navigate({ to: '/board' });
+      } catch (error) {
+        logger.error('[Overview] Failed to open project:', error);
+        toast.error('Failed to open project', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    },
+    [upsertAndSetCurrentProject, navigate]
+  );
+
+  const handleOpenProject = useCallback(async () => {
+    try {
+      const httpClient = getHttpApiClient();
+      const configResult = await httpClient.workspace.getConfig();
+
+      if (configResult.success && configResult.configured) {
+        setShowWorkspacePicker(true);
+      } else {
+        const api = getElectronAPI();
+        const result = await api.openDirectory();
+
+        if (!result.canceled && result.filePaths[0]) {
+          const path = result.filePaths[0];
+          const name = path.split(/[/\\]/).filter(Boolean).pop() || 'Untitled Project';
+          await initializeAndOpenProject(path, name);
+        }
+      }
+    } catch (error) {
+      logger.error('[Overview] Failed to check workspace config:', error);
+      const api = getElectronAPI();
+      const result = await api.openDirectory();
+
+      if (!result.canceled && result.filePaths[0]) {
+        const path = result.filePaths[0];
+        const name = path.split(/[/\\]/).filter(Boolean).pop() || 'Untitled Project';
+        await initializeAndOpenProject(path, name);
+      }
+    }
+  }, [initializeAndOpenProject]);
+
+  const handleWorkspaceSelect = useCallback(
+    async (path: string, name: string) => {
+      setShowWorkspacePicker(false);
+      await initializeAndOpenProject(path, name);
+    },
+    [initializeAndOpenProject]
+  );
+
+  const handleCreateBlankProject = useCallback(
+    async (projectName: string, parentDir: string) => {
+      setIsCreating(true);
+      try {
+        const api = getElectronAPI();
+        const projectPath = `${parentDir}/${projectName}`;
+
+        await api.mkdir(projectPath);
+
+        const initResult = await initializeProject(projectPath);
+        if (!initResult.success) {
+          toast.error('Failed to initialize project', {
+            description: initResult.error || 'Unknown error occurred',
+          });
+          return;
+        }
+
+        await api.writeFile(
+          `${projectPath}/.automaker/app_spec.txt`,
+          `<project_specification>
+  <project_name>${projectName}</project_name>
+  <overview>Describe your project here.</overview>
+  <technology_stack></technology_stack>
+  <core_capabilities></core_capabilities>
+  <implemented_features></implemented_features>
+</project_specification>`
+        );
+
+        upsertAndSetCurrentProject(projectPath, projectName);
+        setShowNewProjectModal(false);
+
+        toast.success('Project created', { description: `Created ${projectName}` });
+        navigate({ to: '/board' });
+      } catch (error) {
+        logger.error('Failed to create project:', error);
+        toast.error('Failed to create project', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      } finally {
+        setIsCreating(false);
+      }
+    },
+    [upsertAndSetCurrentProject, navigate]
+  );
+
+  const handleCreateFromTemplate = useCallback(
+    async (template: StarterTemplate, projectName: string, parentDir: string) => {
+      setIsCreating(true);
+      try {
+        const httpClient = getHttpApiClient();
+        const cloneResult = await httpClient.templates.clone(
+          template.repoUrl,
+          projectName,
+          parentDir
+        );
+
+        if (!cloneResult.success || !cloneResult.projectPath) {
+          toast.error('Failed to clone template', {
+            description: cloneResult.error || 'Unknown error occurred',
+          });
+          return;
+        }
+
+        const initResult = await initializeProject(cloneResult.projectPath);
+        if (!initResult.success) {
+          toast.error('Failed to initialize project', {
+            description: initResult.error || 'Unknown error occurred',
+          });
+          return;
+        }
+
+        upsertAndSetCurrentProject(cloneResult.projectPath, projectName);
+        setShowNewProjectModal(false);
+
+        toast.success('Project created from template', {
+          description: `Created ${projectName} from ${template.name}`,
+        });
+        navigate({ to: '/board' });
+      } catch (error) {
+        logger.error('Failed to create from template:', error);
+        toast.error('Failed to create project', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      } finally {
+        setIsCreating(false);
+      }
+    },
+    [upsertAndSetCurrentProject, navigate]
+  );
+
+  const handleCreateFromCustomUrl = useCallback(
+    async (repoUrl: string, projectName: string, parentDir: string) => {
+      setIsCreating(true);
+      try {
+        const httpClient = getHttpApiClient();
+        const cloneResult = await httpClient.templates.clone(repoUrl, projectName, parentDir);
+
+        if (!cloneResult.success || !cloneResult.projectPath) {
+          toast.error('Failed to clone repository', {
+            description: cloneResult.error || 'Unknown error occurred',
+          });
+          return;
+        }
+
+        const initResult = await initializeProject(cloneResult.projectPath);
+        if (!initResult.success) {
+          toast.error('Failed to initialize project', {
+            description: initResult.error || 'Unknown error occurred',
+          });
+          return;
+        }
+
+        upsertAndSetCurrentProject(cloneResult.projectPath, projectName);
+        setShowNewProjectModal(false);
+
+        toast.success('Project created from repository', { description: `Created ${projectName}` });
+        navigate({ to: '/board' });
+      } catch (error) {
+        logger.error('Failed to create from custom URL:', error);
+        toast.error('Failed to create project', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      } finally {
+        setIsCreating(false);
+      }
+    },
+    [upsertAndSetCurrentProject, navigate]
+  );
+
+  return (
+    <div className="flex-1 flex flex-col h-full content-bg" data-testid="overview-view">
+      {/* Header */}
+      <header className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
+        {/* Electron titlebar drag region */}
+        {isElectron() && (
+          <div
+            className={`absolute top-0 left-0 right-0 h-6 titlebar-drag-region z-40 pointer-events-none ${isMac ? 'pl-20' : ''}`}
+            aria-hidden="true"
+          />
+        )}
+        <div className="px-4 sm:px-8 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-3 titlebar-no-drag">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-lg bg-brand-500/10 flex items-center justify-center">
+                <LayoutDashboard className="w-4 h-4 text-brand-500" />
+              </div>
+              <div>
+                <h1 className="text-lg font-semibold text-foreground">Automaker Dashboard</h1>
+                <p className="text-xs text-muted-foreground">
+                  {overview ? `${overview.aggregate.projectCounts.total} projects` : 'Loading...'}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2 titlebar-no-drag">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={refresh}
+              disabled={isLoading}
+              className="gap-2"
+            >
+              <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
+              Refresh
+            </Button>
+            <Button variant="outline" size="sm" onClick={handleOpenProject} className="gap-2">
+              <FolderOpen className="w-4 h-4" />
+              Open Project
+            </Button>
+            <Button
+              size="sm"
+              onClick={() => setShowNewProjectModal(true)}
+              className="gap-2 bg-brand-500 hover:bg-brand-600 text-white"
+            >
+              <Plus className="w-4 h-4" />
+              New Project
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <div className="flex-1 overflow-y-auto p-4 sm:p-6">
+        {/* Loading state */}
+        {isLoading && !overview && (
+          <div className="flex items-center justify-center h-64">
+            <div className="flex flex-col items-center gap-4">
+              <Spinner size="lg" />
+              <p className="text-sm text-muted-foreground">Loading project overview...</p>
+            </div>
+          </div>
+        )}
+
+        {/* Error state */}
+        {error && !overview && (
+          <div className="flex items-center justify-center h-64">
+            <div className="flex flex-col items-center gap-4 text-center">
+              <div className="w-12 h-12 rounded-full bg-red-500/10 flex items-center justify-center">
+                <XCircle className="w-6 h-6 text-red-500" />
+              </div>
+              <div>
+                <h3 className="font-medium text-foreground mb-1">Failed to load overview</h3>
+                <p className="text-sm text-muted-foreground mb-4">{error}</p>
+                <Button variant="outline" size="sm" onClick={refresh}>
+                  Try again
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Content */}
+        {overview && (
+          <div className="max-w-7xl mx-auto space-y-6">
+            {/* Aggregate stats */}
+            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+              <Card className="bg-card/60">
+                <CardContent className="p-4 flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center">
+                    <Folder className="w-5 h-5 text-muted-foreground" />
+                  </div>
+                  <div>
+                    <p className="text-2xl font-bold text-foreground">
+                      {overview.aggregate.projectCounts.total}
+                    </p>
+                    <p className="text-xs text-muted-foreground">Projects</p>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-card/60">
+                <CardContent className="p-4 flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-lg bg-green-500/10 flex items-center justify-center">
+                    <Activity className="w-5 h-5 text-green-500" />
+                  </div>
+                  <div>
+                    <p className="text-2xl font-bold text-foreground">
+                      {overview.aggregate.featureCounts.running}
+                    </p>
+                    <p className="text-xs text-muted-foreground">Running</p>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-card/60">
+                <CardContent className="p-4 flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-lg bg-yellow-500/10 flex items-center justify-center">
+                    <Clock className="w-5 h-5 text-yellow-500" />
+                  </div>
+                  <div>
+                    <p className="text-2xl font-bold text-foreground">
+                      {overview.aggregate.featureCounts.pending}
+                    </p>
+                    <p className="text-xs text-muted-foreground">Pending</p>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-card/60">
+                <CardContent className="p-4 flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
+                    <CheckCircle2 className="w-5 h-5 text-blue-500" />
+                  </div>
+                  <div>
+                    <p className="text-2xl font-bold text-foreground">
+                      {overview.aggregate.featureCounts.completed}
+                    </p>
+                    <p className="text-xs text-muted-foreground">Completed</p>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-card/60">
+                <CardContent className="p-4 flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-lg bg-red-500/10 flex items-center justify-center">
+                    <XCircle className="w-5 h-5 text-red-500" />
+                  </div>
+                  <div>
+                    <p className="text-2xl font-bold text-foreground">
+                      {overview.aggregate.featureCounts.failed}
+                    </p>
+                    <p className="text-xs text-muted-foreground">Failed</p>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-card/60">
+                <CardContent className="p-4 flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-lg bg-brand-500/10 flex items-center justify-center">
+                    <Bot className="w-5 h-5 text-brand-500" />
+                  </div>
+                  <div>
+                    <p className="text-2xl font-bold text-foreground">
+                      {overview.aggregate.projectsWithAutoModeRunning}
+                    </p>
+                    <p className="text-xs text-muted-foreground">Auto-mode</p>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Main content grid */}
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              {/* Left column: Project cards */}
+              <div className="lg:col-span-2 space-y-4">
+                <div className="flex items-center justify-between">
+                  <h2 className="text-lg font-semibold text-foreground">All Projects</h2>
+                  {overview.aggregate.totalUnreadNotifications > 0 && (
+                    <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                      <Bell className="w-4 h-4" />
+                      {overview.aggregate.totalUnreadNotifications} unread notifications
+                    </div>
+                  )}
+                </div>
+
+                {overview.projects.length === 0 ? (
+                  <Card className="bg-card/60">
+                    <CardContent className="py-12 text-center">
+                      <Folder className="w-12 h-12 mx-auto mb-4 text-muted-foreground opacity-50" />
+                      <h3 className="font-medium text-foreground mb-1">No projects yet</h3>
+                      <p className="text-sm text-muted-foreground mb-4">
+                        Create or open a project to get started
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        Use the sidebar to create or open a project
+                      </p>
+                    </CardContent>
+                  </Card>
+                ) : (
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {overview.projects.map((project) => (
+                      <ProjectStatusCard key={project.projectId} project={project} />
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* Right column: Running agents and activity */}
+              <div className="space-y-4">
+                {/* Running agents */}
+                <Card className="bg-card/60">
+                  <CardHeader className="pb-3">
+                    <CardTitle className="text-base flex items-center gap-2">
+                      <Bot className="w-4 h-4 text-green-500" />
+                      Running Agents
+                      {overview.aggregate.projectsWithAutoModeRunning > 0 && (
+                        <span className="text-xs font-normal text-muted-foreground ml-auto">
+                          {overview.aggregate.projectsWithAutoModeRunning} active
+                        </span>
+                      )}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="pt-0">
+                    <RunningAgentsPanel projects={overview.projects} />
+                  </CardContent>
+                </Card>
+
+                {/* Recent activity */}
+                <Card className="bg-card/60">
+                  <CardHeader className="pb-3">
+                    <CardTitle className="text-base flex items-center gap-2">
+                      <Activity className="w-4 h-4 text-brand-500" />
+                      Recent Activity
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="pt-0">
+                    <RecentActivityFeed activities={overview.recentActivity} maxItems={8} />
+                  </CardContent>
+                </Card>
+              </div>
+            </div>
+
+            {/* Footer timestamp */}
+            <div className="text-center text-xs text-muted-foreground pt-4">
+              Last updated:{' '}
+              {new Date(overview.generatedAt).toLocaleTimeString(undefined, {
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Modals */}
+      <NewProjectModal
+        open={showNewProjectModal}
+        onOpenChange={setShowNewProjectModal}
+        onCreateBlankProject={handleCreateBlankProject}
+        onCreateFromTemplate={handleCreateFromTemplate}
+        onCreateFromCustomUrl={handleCreateFromCustomUrl}
+        isCreating={isCreating}
+      />
+
+      <WorkspacePickerModal
+        open={showWorkspacePicker}
+        onOpenChange={setShowWorkspacePicker}
+        onSelect={handleWorkspaceSelect}
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/overview/project-status-card.tsx b/temp_repo/apps/ui/src/components/views/overview/project-status-card.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a2f2565c50d89fdaa0a5da35d25973ce014087b6
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/overview/project-status-card.tsx
@@ -0,0 +1,207 @@
+/**
+ * ProjectStatusCard - Individual project card for multi-project dashboard
+ *
+ * Displays project health, feature counts, and agent status with quick navigation.
+ */
+
+import { useCallback } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { useAppStore } from '@/store/app-store';
+import { initializeProject } from '@/lib/project-init';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import type { ProjectStatus, ProjectHealthStatus } from '@automaker/types';
+import { Folder, Activity, CheckCircle2, XCircle, Clock, Pause, Bot, Bell } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+
+interface ProjectStatusCardProps {
+  project: ProjectStatus;
+  onProjectClick?: (projectId: string) => void;
+}
+
+const healthStatusConfig: Record<
+  ProjectHealthStatus,
+  { icon: typeof Activity; color: string; label: string; bgColor: string }
+> = {
+  active: {
+    icon: Activity,
+    color: 'text-green-500',
+    label: 'Active',
+    bgColor: 'bg-green-500/10',
+  },
+  idle: {
+    icon: Pause,
+    color: 'text-muted-foreground',
+    label: 'Idle',
+    bgColor: 'bg-muted/50',
+  },
+  waiting: {
+    icon: Clock,
+    color: 'text-yellow-500',
+    label: 'Waiting',
+    bgColor: 'bg-yellow-500/10',
+  },
+  completed: {
+    icon: CheckCircle2,
+    color: 'text-blue-500',
+    label: 'Completed',
+    bgColor: 'bg-blue-500/10',
+  },
+  error: {
+    icon: XCircle,
+    color: 'text-red-500',
+    label: 'Error',
+    bgColor: 'bg-red-500/10',
+  },
+};
+
+export function ProjectStatusCard({ project, onProjectClick }: ProjectStatusCardProps) {
+  const navigate = useNavigate();
+  const { upsertAndSetCurrentProject } = useAppStore();
+
+  const statusConfig = healthStatusConfig[project.healthStatus];
+  const StatusIcon = statusConfig.icon;
+
+  const handleClick = useCallback(async () => {
+    if (onProjectClick) {
+      onProjectClick(project.projectId);
+      return;
+    }
+
+    // Default behavior: navigate to project
+    try {
+      const initResult = await initializeProject(project.projectPath);
+      if (!initResult.success) {
+        toast.error('Failed to open project', {
+          description: initResult.error || 'Unknown error',
+        });
+        return;
+      }
+
+      upsertAndSetCurrentProject(project.projectPath, project.projectName);
+      navigate({ to: '/board' });
+    } catch (error) {
+      toast.error('Failed to open project', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    }
+  }, [project, onProjectClick, upsertAndSetCurrentProject, navigate]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className={cn(
+        'group relative rounded-xl border bg-card/60 backdrop-blur-sm transition-all duration-300 cursor-pointer hover:-translate-y-0.5',
+        project.healthStatus === 'active' && 'border-green-500/30 hover:border-green-500/50',
+        project.healthStatus === 'error' && 'border-red-500/30 hover:border-red-500/50',
+        project.healthStatus === 'waiting' && 'border-yellow-500/30 hover:border-yellow-500/50',
+        project.healthStatus === 'completed' && 'border-blue-500/30 hover:border-blue-500/50',
+        project.healthStatus === 'idle' && 'border-border hover:border-brand-500/40'
+      )}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      aria-label={`Open project ${project.projectName}`}
+      data-testid={`project-status-card-${project.projectId}`}
+    >
+      <div className="p-4">
+        {/* Header */}
+        <div className="flex items-start justify-between gap-3 mb-3">
+          <div className="flex items-center gap-3 min-w-0">
+            <div
+              className={cn(
+                'w-10 h-10 rounded-lg flex items-center justify-center shrink-0 transition-colors',
+                statusConfig.bgColor
+              )}
+            >
+              <Folder className={cn('w-5 h-5', statusConfig.color)} />
+            </div>
+            <div className="min-w-0">
+              <h3 className="font-medium text-foreground truncate group-hover:text-brand-500 transition-colors">
+                {project.projectName}
+              </h3>
+              <p className="text-xs text-muted-foreground truncate">{project.projectPath}</p>
+            </div>
+          </div>
+
+          {/* Status badge */}
+          <div className="flex items-center gap-2 shrink-0">
+            {project.unreadNotificationCount > 0 && (
+              <Badge variant="destructive" className="h-5 px-1.5 text-xs">
+                <Bell className="w-3 h-3 mr-1" />
+                {project.unreadNotificationCount}
+              </Badge>
+            )}
+            <Badge
+              variant="outline"
+              className={cn(
+                'h-6 px-2 text-xs gap-1',
+                statusConfig.color,
+                project.healthStatus === 'active' && 'border-green-500/30 bg-green-500/10',
+                project.healthStatus === 'error' && 'border-red-500/30 bg-red-500/10'
+              )}
+            >
+              <StatusIcon className="w-3 h-3" />
+              {statusConfig.label}
+            </Badge>
+          </div>
+        </div>
+
+        {/* Feature counts */}
+        <div className="flex flex-wrap gap-2 mb-3">
+          {project.featureCounts.running > 0 && (
+            <div className="flex items-center gap-1.5 text-xs px-2 py-1 rounded-md bg-green-500/10 text-green-600 dark:text-green-400">
+              <Activity className="w-3 h-3" />
+              {project.featureCounts.running} running
+            </div>
+          )}
+          {project.featureCounts.pending > 0 && (
+            <div className="flex items-center gap-1.5 text-xs px-2 py-1 rounded-md bg-yellow-500/10 text-yellow-600 dark:text-yellow-400">
+              <Clock className="w-3 h-3" />
+              {project.featureCounts.pending} pending
+            </div>
+          )}
+          {project.featureCounts.completed > 0 && (
+            <div className="flex items-center gap-1.5 text-xs px-2 py-1 rounded-md bg-blue-500/10 text-blue-600 dark:text-blue-400">
+              <CheckCircle2 className="w-3 h-3" />
+              {project.featureCounts.completed} completed
+            </div>
+          )}
+          {project.featureCounts.failed > 0 && (
+            <div className="flex items-center gap-1.5 text-xs px-2 py-1 rounded-md bg-red-500/10 text-red-600 dark:text-red-400">
+              <XCircle className="w-3 h-3" />
+              {project.featureCounts.failed} failed
+            </div>
+          )}
+          {project.featureCounts.verified > 0 && (
+            <div className="flex items-center gap-1.5 text-xs px-2 py-1 rounded-md bg-purple-500/10 text-purple-600 dark:text-purple-400">
+              <CheckCircle2 className="w-3 h-3" />
+              {project.featureCounts.verified} verified
+            </div>
+          )}
+        </div>
+
+        {/* Footer: Total features and auto-mode status */}
+        <div className="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t border-border/50">
+          <span>{project.totalFeatures} total features</span>
+          {project.isAutoModeRunning && (
+            <div className="flex items-center gap-1.5 text-green-500">
+              <Bot className="w-3.5 h-3.5 animate-pulse" />
+              <span className="font-medium">Auto-mode active</span>
+            </div>
+          )}
+          {project.lastActivityAt && !project.isAutoModeRunning && (
+            <span>Last activity: {new Date(project.lastActivityAt).toLocaleDateString()}</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/overview/recent-activity-feed.tsx b/temp_repo/apps/ui/src/components/views/overview/recent-activity-feed.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..321be9e5a5ee6dc4a2a3937d8db5ca0b42e57b58
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/overview/recent-activity-feed.tsx
@@ -0,0 +1,229 @@
+/**
+ * RecentActivityFeed - Timeline of recent activity across all projects
+ *
+ * Shows completed features, failures, and auto-mode events.
+ */
+
+import { useCallback } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { useAppStore } from '@/store/app-store';
+import { initializeProject } from '@/lib/project-init';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import type { RecentActivity, ActivityType, ActivitySeverity } from '@automaker/types';
+import { CheckCircle2, XCircle, Play, Bot, AlertTriangle, Info, Clock } from 'lucide-react';
+
+interface RecentActivityFeedProps {
+  activities: RecentActivity[];
+  maxItems?: number;
+}
+
+const activityTypeConfig: Record<
+  ActivityType,
+  { icon: typeof CheckCircle2; defaultColor: string; label: string }
+> = {
+  feature_created: {
+    icon: Info,
+    defaultColor: 'text-blue-500',
+    label: 'Feature created',
+  },
+  feature_completed: {
+    icon: CheckCircle2,
+    defaultColor: 'text-blue-500',
+    label: 'Feature completed',
+  },
+  feature_verified: {
+    icon: CheckCircle2,
+    defaultColor: 'text-purple-500',
+    label: 'Feature verified',
+  },
+  feature_failed: {
+    icon: XCircle,
+    defaultColor: 'text-red-500',
+    label: 'Feature failed',
+  },
+  feature_started: {
+    icon: Play,
+    defaultColor: 'text-green-500',
+    label: 'Feature started',
+  },
+  auto_mode_started: {
+    icon: Bot,
+    defaultColor: 'text-green-500',
+    label: 'Auto-mode started',
+  },
+  auto_mode_stopped: {
+    icon: Bot,
+    defaultColor: 'text-muted-foreground',
+    label: 'Auto-mode stopped',
+  },
+  ideation_session_started: {
+    icon: Play,
+    defaultColor: 'text-brand-500',
+    label: 'Ideation session started',
+  },
+  ideation_session_ended: {
+    icon: Info,
+    defaultColor: 'text-muted-foreground',
+    label: 'Ideation session ended',
+  },
+  idea_created: {
+    icon: Info,
+    defaultColor: 'text-brand-500',
+    label: 'Idea created',
+  },
+  idea_converted: {
+    icon: CheckCircle2,
+    defaultColor: 'text-green-500',
+    label: 'Idea converted to feature',
+  },
+  notification_created: {
+    icon: AlertTriangle,
+    defaultColor: 'text-yellow-500',
+    label: 'Notification',
+  },
+  project_opened: {
+    icon: Info,
+    defaultColor: 'text-blue-500',
+    label: 'Project opened',
+  },
+};
+
+const severityColors: Record<ActivitySeverity, string> = {
+  info: 'text-blue-500',
+  success: 'text-green-500',
+  warning: 'text-yellow-500',
+  error: 'text-red-500',
+};
+
+function formatRelativeTime(timestamp: string): string {
+  const now = new Date();
+  const date = new Date(timestamp);
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}
+
+export function RecentActivityFeed({ activities, maxItems = 10 }: RecentActivityFeedProps) {
+  const navigate = useNavigate();
+  const { upsertAndSetCurrentProject } = useAppStore();
+
+  const displayActivities = activities.slice(0, maxItems);
+
+  const handleActivityClick = useCallback(
+    async (activity: RecentActivity) => {
+      try {
+        // Get project path from the activity (projectId is actually the path in our data model)
+        const projectPath = (activity.projectPath as string | undefined) || activity.projectId;
+        const projectName = activity.projectName;
+
+        const initResult = await initializeProject(projectPath);
+
+        if (!initResult.success) {
+          toast.error('Failed to initialize project', {
+            description: initResult.error || 'Unknown error',
+          });
+          return;
+        }
+
+        upsertAndSetCurrentProject(projectPath, projectName);
+
+        if (activity.featureId) {
+          // Navigate to the specific feature with project path for deep link handling
+          navigate({
+            to: '/board',
+            search: {
+              featureId: activity.featureId,
+              projectPath: projectPath || undefined,
+            },
+          });
+        } else {
+          navigate({ to: '/board' });
+        }
+      } catch (error) {
+        toast.error('Failed to navigate to activity', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    },
+    [navigate, upsertAndSetCurrentProject]
+  );
+
+  const handleActivityKeyDown = useCallback(
+    (e: React.KeyboardEvent, activity: RecentActivity) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleActivityClick(activity);
+      }
+    },
+    [handleActivityClick]
+  );
+
+  if (displayActivities.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+        <Clock className="w-8 h-8 mb-2 opacity-50" />
+        <p className="text-sm">No recent activity</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      {displayActivities.map((activity) => {
+        const config = activityTypeConfig[activity.type];
+        const Icon = config.icon;
+        const iconColor = severityColors[activity.severity] || config.defaultColor;
+
+        return (
+          <div
+            key={activity.id}
+            role="button"
+            tabIndex={0}
+            className="group flex items-start gap-3 p-2 rounded-lg hover:bg-muted/50 cursor-pointer transition-colors"
+            onClick={() => handleActivityClick(activity)}
+            onKeyDown={(e) => handleActivityKeyDown(e, activity)}
+            aria-label={`${config.label}: ${activity.featureName || activity.message} in ${activity.projectName}`}
+            data-testid={`activity-item-${activity.id}`}
+          >
+            {/* Icon */}
+            <div
+              className={cn(
+                'w-8 h-8 rounded-full flex items-center justify-center shrink-0 mt-0.5',
+                activity.severity === 'error' && 'bg-red-500/10',
+                activity.severity === 'success' && 'bg-green-500/10',
+                activity.severity === 'warning' && 'bg-yellow-500/10',
+                activity.severity === 'info' && 'bg-blue-500/10'
+              )}
+            >
+              <Icon className={cn('w-4 h-4', iconColor)} />
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2">
+                <span className="text-xs font-medium text-muted-foreground">
+                  {activity.projectName}
+                </span>
+                <span className="text-xs text-muted-foreground/50">
+                  {formatRelativeTime(activity.timestamp)}
+                </span>
+              </div>
+              <p className="text-sm text-foreground truncate group-hover:text-brand-500 transition-colors">
+                {activity.featureTitle || activity.description}
+              </p>
+              <p className="text-xs text-muted-foreground truncate mt-0.5">{config.label}</p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/overview/running-agents-panel.tsx b/temp_repo/apps/ui/src/components/views/overview/running-agents-panel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2266f1286239d73957afb9fbbedb3b1ffaeec631
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/overview/running-agents-panel.tsx
@@ -0,0 +1,139 @@
+/**
+ * RunningAgentsPanel - Shows all currently running agents across projects
+ *
+ * Displays active AI agents with their status and quick access to features.
+ */
+
+import { useCallback } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { useAppStore } from '@/store/app-store';
+import { initializeProject } from '@/lib/project-init';
+import { toast } from 'sonner';
+import type { ProjectStatus } from '@automaker/types';
+import { Bot, Activity, GitBranch, ArrowRight } from 'lucide-react';
+
+interface RunningAgentsPanelProps {
+  projects: ProjectStatus[];
+}
+
+interface RunningAgent {
+  projectId: string;
+  projectName: string;
+  projectPath: string;
+  featureCount: number;
+  isAutoMode: boolean;
+  activeBranch?: string;
+}
+
+export function RunningAgentsPanel({ projects }: RunningAgentsPanelProps) {
+  const navigate = useNavigate();
+  const { upsertAndSetCurrentProject } = useAppStore();
+
+  // Extract running agents from projects
+  const runningAgents: RunningAgent[] = projects
+    .filter((p) => p.isAutoModeRunning || p.featureCounts.running > 0)
+    .map((p) => ({
+      projectId: p.projectId,
+      projectName: p.projectName,
+      projectPath: p.projectPath,
+      featureCount: p.featureCounts.running,
+      isAutoMode: p.isAutoModeRunning,
+      activeBranch: p.activeBranch,
+    }));
+
+  const handleAgentClick = useCallback(
+    async (agent: RunningAgent) => {
+      try {
+        const initResult = await initializeProject(agent.projectPath);
+        if (!initResult.success) {
+          toast.error('Failed to open project', {
+            description: initResult.error || 'Unknown error',
+          });
+          return;
+        }
+
+        upsertAndSetCurrentProject(agent.projectPath, agent.projectName);
+        navigate({ to: '/board' });
+      } catch (error) {
+        toast.error('Failed to navigate to agent', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    },
+    [navigate, upsertAndSetCurrentProject]
+  );
+
+  const handleAgentKeyDown = useCallback(
+    (e: React.KeyboardEvent, agent: RunningAgent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleAgentClick(agent);
+      }
+    },
+    [handleAgentClick]
+  );
+
+  if (runningAgents.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+        <Bot className="w-8 h-8 mb-2 opacity-50" />
+        <p className="text-sm">No agents running</p>
+        <p className="text-xs mt-1">Start auto-mode on a project to see activity here</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {runningAgents.map((agent) => (
+        <div
+          key={agent.projectId}
+          role="button"
+          tabIndex={0}
+          className="group flex items-center gap-3 p-3 rounded-lg border border-green-500/20 bg-green-500/5 hover:bg-green-500/10 cursor-pointer transition-all"
+          onClick={() => handleAgentClick(agent)}
+          onKeyDown={(e) => handleAgentKeyDown(e, agent)}
+          aria-label={`View running agent for ${agent.projectName}`}
+          data-testid={`running-agent-${agent.projectId}`}
+        >
+          {/* Animated icon */}
+          <div className="relative w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center shrink-0">
+            <Bot className="w-5 h-5 text-green-500" />
+            <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full animate-pulse" />
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-medium text-foreground truncate group-hover:text-green-500 transition-colors">
+                {agent.projectName}
+              </span>
+              {agent.isAutoMode && (
+                <span className="text-xs px-1.5 py-0.5 rounded bg-green-500/20 text-green-500 font-medium">
+                  Auto
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-2 mt-0.5 text-xs text-muted-foreground">
+              {agent.featureCount > 0 && (
+                <span className="flex items-center gap-1">
+                  <Activity className="w-3 h-3" />
+                  {agent.featureCount} feature{agent.featureCount !== 1 ? 's' : ''} running
+                </span>
+              )}
+              {agent.activeBranch && (
+                <span className="flex items-center gap-1">
+                  <GitBranch className="w-3 h-3" />
+                  {agent.activeBranch}
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* Arrow */}
+          <ArrowRight className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/commands-and-scripts-section.tsx b/temp_repo/apps/ui/src/components/views/project-settings-view/commands-and-scripts-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..851d64d81c89246bd5ba7d1646c9c4916e63a44c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/commands-and-scripts-section.tsx
@@ -0,0 +1,657 @@
+import { useState, useEffect, useCallback, useMemo, useRef, type KeyboardEvent } from 'react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import {
+  Terminal,
+  Save,
+  RotateCcw,
+  Info,
+  X,
+  Play,
+  FlaskConical,
+  ScrollText,
+  Plus,
+  GripVertical,
+  Trash2,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { useProjectSettings } from '@/hooks/queries';
+import { useUpdateProjectSettings } from '@/hooks/mutations';
+import type { Project } from '@/lib/electron';
+import { toast } from 'sonner';
+import { DEFAULT_TERMINAL_SCRIPTS } from './terminal-scripts-constants';
+
+/** Preset dev server commands for quick selection */
+const DEV_SERVER_PRESETS = [
+  { label: 'npm run dev', command: 'npm run dev' },
+  { label: 'yarn dev', command: 'yarn dev' },
+  { label: 'pnpm dev', command: 'pnpm dev' },
+  { label: 'bun dev', command: 'bun dev' },
+  { label: 'npm start', command: 'npm start' },
+  { label: 'cargo watch', command: 'cargo watch -x run' },
+  { label: 'go run', command: 'go run .' },
+] as const;
+
+/** Preset test commands for quick selection */
+const TEST_PRESETS = [
+  { label: 'npm test', command: 'npm test' },
+  { label: 'yarn test', command: 'yarn test' },
+  { label: 'pnpm test', command: 'pnpm test' },
+  { label: 'bun test', command: 'bun test' },
+  { label: 'pytest', command: 'pytest' },
+  { label: 'cargo test', command: 'cargo test' },
+  { label: 'go test', command: 'go test ./...' },
+] as const;
+
+/** Preset scripts for quick addition */
+const SCRIPT_PRESETS = [
+  { name: 'Dev Server', command: 'npm run dev' },
+  { name: 'Build', command: 'npm run build' },
+  { name: 'Test', command: 'npm run test' },
+  { name: 'Lint', command: 'npm run lint' },
+  { name: 'Format', command: 'npm run format' },
+  { name: 'Type Check', command: 'npm run typecheck' },
+  { name: 'Start', command: 'npm start' },
+  { name: 'Clean', command: 'npm run clean' },
+] as const;
+
+interface ScriptEntry {
+  id: string;
+  name: string;
+  command: string;
+}
+
+interface CommandsAndScriptsSectionProps {
+  project: Project;
+}
+
+/** Generate a unique ID for a new script */
+function generateId(): string {
+  return `script-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+}
+
+export function CommandsAndScriptsSection({ project }: CommandsAndScriptsSectionProps) {
+  // Fetch project settings using TanStack Query
+  const { data: projectSettings, isLoading, isError } = useProjectSettings(project.path);
+
+  // Mutation hook for updating project settings
+  const updateSettingsMutation = useUpdateProjectSettings(project.path);
+
+  // ── Commands state ──
+  const [devCommand, setDevCommand] = useState('');
+  const [originalDevCommand, setOriginalDevCommand] = useState('');
+  const [testCommand, setTestCommand] = useState('');
+  const [originalTestCommand, setOriginalTestCommand] = useState('');
+
+  // ── Scripts state ──
+  const [scripts, setScripts] = useState<ScriptEntry[]>([]);
+  const [originalScripts, setOriginalScripts] = useState<ScriptEntry[]>([]);
+
+  // Dragging state for scripts
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+
+  // Track previous project path to detect project switches
+  const prevProjectPathRef = useRef(project.path);
+  // Track whether we've done the initial sync for the current project
+  const isInitializedRef = useRef(false);
+
+  // Sync commands and scripts state when project settings load or project changes
+  useEffect(() => {
+    const projectChanged = prevProjectPathRef.current !== project.path;
+    prevProjectPathRef.current = project.path;
+
+    // Always clear local state on project change to avoid flashing stale data
+    if (projectChanged) {
+      isInitializedRef.current = false;
+      setDevCommand('');
+      setOriginalDevCommand('');
+      setTestCommand('');
+      setOriginalTestCommand('');
+      setScripts([]);
+      setOriginalScripts([]);
+    }
+
+    // Apply project settings only when they are available
+    if (projectSettings) {
+      // Only sync from server if this is the initial load or if there are no unsaved edits.
+      // This prevents background refetches from overwriting in-progress local edits.
+      const isDirty =
+        isInitializedRef.current &&
+        (devCommand !== originalDevCommand ||
+          testCommand !== originalTestCommand ||
+          JSON.stringify(scripts) !== JSON.stringify(originalScripts));
+
+      if (!isInitializedRef.current || !isDirty) {
+        // Commands
+        const dev = projectSettings.devCommand || '';
+        const test = projectSettings.testCommand || '';
+        setDevCommand(dev);
+        setOriginalDevCommand(dev);
+        setTestCommand(test);
+        setOriginalTestCommand(test);
+
+        // Scripts
+        const configured = projectSettings.terminalScripts;
+        const scriptList =
+          configured && configured.length > 0
+            ? configured.map((s) => ({ id: s.id, name: s.name, command: s.command }))
+            : DEFAULT_TERMINAL_SCRIPTS.map((s) => ({ ...s }));
+        setScripts(scriptList);
+        setOriginalScripts(structuredClone(scriptList));
+
+        isInitializedRef.current = true;
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projectSettings, project.path]);
+
+  // ── Change detection ──
+  const hasDevChanges = devCommand !== originalDevCommand;
+  const hasTestChanges = testCommand !== originalTestCommand;
+  const hasCommandChanges = hasDevChanges || hasTestChanges;
+  const hasScriptChanges = useMemo(
+    () => JSON.stringify(scripts) !== JSON.stringify(originalScripts),
+    [scripts, originalScripts]
+  );
+  const hasChanges = hasCommandChanges || hasScriptChanges;
+  const isSaving = updateSettingsMutation.isPending;
+
+  // ── Save all (commands + scripts) ──
+  const handleSave = useCallback(() => {
+    const normalizedDevCommand = devCommand.trim();
+    const normalizedTestCommand = testCommand.trim();
+    const validScripts = scripts.filter((s) => s.name.trim() && s.command.trim());
+    const normalizedScripts = validScripts.map((s) => ({
+      id: s.id,
+      name: s.name.trim(),
+      command: s.command.trim(),
+    }));
+
+    updateSettingsMutation.mutate(
+      {
+        devCommand: normalizedDevCommand || null,
+        testCommand: normalizedTestCommand || null,
+        terminalScripts: normalizedScripts,
+      },
+      {
+        onSuccess: () => {
+          setDevCommand(normalizedDevCommand);
+          setOriginalDevCommand(normalizedDevCommand);
+          setTestCommand(normalizedTestCommand);
+          setOriginalTestCommand(normalizedTestCommand);
+          setScripts(normalizedScripts);
+          setOriginalScripts(structuredClone(normalizedScripts));
+        },
+        onError: (error) => {
+          toast.error('Failed to save settings', {
+            description: error instanceof Error ? error.message : 'An unexpected error occurred',
+          });
+        },
+      }
+    );
+  }, [devCommand, testCommand, scripts, updateSettingsMutation]);
+
+  // ── Reset all ──
+  const handleReset = useCallback(() => {
+    setDevCommand(originalDevCommand);
+    setTestCommand(originalTestCommand);
+    setScripts(structuredClone(originalScripts));
+  }, [originalDevCommand, originalTestCommand, originalScripts]);
+
+  // ── Command handlers ──
+  const handleUseDevPreset = useCallback((command: string) => {
+    setDevCommand(command);
+  }, []);
+
+  const handleUseTestPreset = useCallback((command: string) => {
+    setTestCommand(command);
+  }, []);
+
+  const handleClearDev = useCallback(() => {
+    setDevCommand('');
+  }, []);
+
+  const handleClearTest = useCallback(() => {
+    setTestCommand('');
+  }, []);
+
+  // ── Script handlers ──
+  const handleAddScript = useCallback(() => {
+    setScripts((prev) => [...prev, { id: generateId(), name: '', command: '' }]);
+  }, []);
+
+  const handleAddPreset = useCallback((preset: { name: string; command: string }) => {
+    setScripts((prev) => [
+      ...prev,
+      { id: generateId(), name: preset.name, command: preset.command },
+    ]);
+  }, []);
+
+  const handleRemoveScript = useCallback((index: number) => {
+    setScripts((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+
+  const handleUpdateScript = useCallback(
+    (index: number, field: 'name' | 'command', value: string) => {
+      setScripts((prev) => prev.map((s, i) => (i === index ? { ...s, [field]: value } : s)));
+    },
+    []
+  );
+
+  // Handle keyboard shortcuts (Enter to save)
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' && hasChanges && !isSaving) {
+        e.preventDefault();
+        handleSave();
+      }
+    },
+    [hasChanges, isSaving, handleSave]
+  );
+
+  // ── Drag and drop handlers for script reordering ──
+  const handleDragStart = useCallback((index: number) => {
+    setDraggedIndex(index);
+  }, []);
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent, index: number) => {
+      e.preventDefault();
+      if (draggedIndex === null || draggedIndex === index) return;
+      setDragOverIndex(index);
+    },
+    [draggedIndex]
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      if (draggedIndex !== null && dragOverIndex !== null && draggedIndex !== dragOverIndex) {
+        setScripts((prev) => {
+          const newScripts = [...prev];
+          const [removed] = newScripts.splice(draggedIndex, 1);
+          newScripts.splice(dragOverIndex, 0, removed);
+          return newScripts;
+        });
+      }
+      setDraggedIndex(null);
+      setDragOverIndex(null);
+    },
+    [draggedIndex, dragOverIndex]
+  );
+
+  const handleDragEnd = useCallback((_e: React.DragEvent) => {
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+  }, []);
+
+  // ── Keyboard reorder helpers for accessibility ──
+  const moveScript = useCallback((fromIndex: number, toIndex: number) => {
+    setScripts((prev) => {
+      if (toIndex < 0 || toIndex >= prev.length) return prev;
+      const newScripts = [...prev];
+      const [removed] = newScripts.splice(fromIndex, 1);
+      newScripts.splice(toIndex, 0, removed);
+      return newScripts;
+    });
+  }, []);
+
+  const handleDragHandleKeyDown = useCallback(
+    (e: React.KeyboardEvent, index: number) => {
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        moveScript(index, index - 1);
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        moveScript(index, index + 1);
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        moveScript(index, 0);
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        moveScript(index, scripts.length - 1);
+      }
+    },
+    [moveScript, scripts.length]
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* ── Commands Card ── */}
+      <div
+        className={cn(
+          'rounded-2xl overflow-hidden',
+          'border border-border/50',
+          'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+          'shadow-sm shadow-black/5'
+        )}
+        data-testid="commands-section"
+      >
+        <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <Terminal className="w-5 h-5 text-brand-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">
+              Project Commands
+            </h2>
+          </div>
+          <p className="text-sm text-muted-foreground/80 ml-12">
+            Configure custom commands for development and testing.
+          </p>
+        </div>
+
+        <div className="p-6 space-y-8">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Spinner size="md" />
+            </div>
+          ) : isError ? (
+            <div className="flex items-center justify-center py-8 text-sm text-destructive">
+              Failed to load project settings. Please try again.
+            </div>
+          ) : (
+            <>
+              {/* Dev Server Command Section */}
+              <div className="space-y-4">
+                <div className="flex items-center gap-2">
+                  <Play className="w-4 h-4 text-brand-500" />
+                  <h3 className="text-base font-medium text-foreground">Dev Server</h3>
+                  {hasDevChanges && (
+                    <span className="text-xs text-amber-500 font-medium">(unsaved)</span>
+                  )}
+                </div>
+
+                <div className="space-y-3 pl-6">
+                  <div className="relative">
+                    <Input
+                      id="dev-command"
+                      value={devCommand}
+                      onChange={(e) => setDevCommand(e.target.value)}
+                      onKeyDown={handleKeyDown}
+                      placeholder="e.g., npm run dev, yarn dev, cargo watch"
+                      className="font-mono text-sm pr-8"
+                      data-testid="dev-command-input"
+                    />
+                    {devCommand && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={handleClearDev}
+                        className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+                        aria-label="Clear dev command"
+                      >
+                        <X className="w-3.5 h-3.5" />
+                      </Button>
+                    )}
+                  </div>
+                  <p className="text-xs text-muted-foreground/80">
+                    Leave empty to auto-detect based on your package manager.
+                  </p>
+
+                  {/* Dev Presets */}
+                  <div className="flex flex-wrap gap-1.5">
+                    {DEV_SERVER_PRESETS.map((preset) => (
+                      <Button
+                        key={preset.command}
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleUseDevPreset(preset.command)}
+                        className="text-xs font-mono h-7 px-2"
+                      >
+                        {preset.label}
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              {/* Divider */}
+              <div className="border-t border-border/30" />
+
+              {/* Test Command Section */}
+              <div className="space-y-4">
+                <div className="flex items-center gap-2">
+                  <FlaskConical className="w-4 h-4 text-brand-500" />
+                  <h3 className="text-base font-medium text-foreground">Test Runner</h3>
+                  {hasTestChanges && (
+                    <span className="text-xs text-amber-500 font-medium">(unsaved)</span>
+                  )}
+                </div>
+
+                <div className="space-y-3 pl-6">
+                  <div className="relative">
+                    <Input
+                      id="test-command"
+                      value={testCommand}
+                      onChange={(e) => setTestCommand(e.target.value)}
+                      onKeyDown={handleKeyDown}
+                      placeholder="e.g., npm test, pytest, cargo test"
+                      className="font-mono text-sm pr-8"
+                      data-testid="test-command-input"
+                    />
+                    {testCommand && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={handleClearTest}
+                        className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+                        aria-label="Clear test command"
+                      >
+                        <X className="w-3.5 h-3.5" />
+                      </Button>
+                    )}
+                  </div>
+                  <p className="text-xs text-muted-foreground/80">
+                    Leave empty to auto-detect based on your project structure.
+                  </p>
+
+                  {/* Test Presets */}
+                  <div className="flex flex-wrap gap-1.5">
+                    {TEST_PRESETS.map((preset) => (
+                      <Button
+                        key={preset.command}
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleUseTestPreset(preset.command)}
+                        className="text-xs font-mono h-7 px-2"
+                      >
+                        {preset.label}
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              {/* Auto-detection Info */}
+              <div className="flex items-start gap-3 p-3 rounded-lg bg-accent/20 border border-border/30">
+                <Info className="w-4 h-4 text-brand-500 mt-0.5 shrink-0" />
+                <div className="text-xs text-muted-foreground">
+                  <p className="font-medium text-foreground mb-1">Auto-detection</p>
+                  <p>
+                    When no custom command is set, the system automatically detects your package
+                    manager and test framework based on project files (package.json, Cargo.toml,
+                    go.mod, etc.).
+                  </p>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* ── Terminal Quick Scripts Card ── */}
+      <div
+        className={cn(
+          'rounded-2xl overflow-hidden',
+          'border border-border/50',
+          'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+          'shadow-sm shadow-black/5'
+        )}
+        data-testid="scripts-section"
+      >
+        {/* Header */}
+        <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <ScrollText className="w-5 h-5 text-brand-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">
+              Terminal Quick Scripts
+            </h2>
+          </div>
+          <p className="text-sm text-muted-foreground/80 ml-12">
+            Configure quick-access scripts that appear in the terminal header dropdown. Click any
+            script to run it instantly.
+          </p>
+        </div>
+
+        <div className="p-6 space-y-6">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Spinner size="md" />
+            </div>
+          ) : isError ? (
+            <div className="flex items-center justify-center py-8 text-sm text-destructive">
+              Failed to load project settings. Please try again.
+            </div>
+          ) : (
+            <>
+              {/* Scripts List */}
+              <div className="space-y-2">
+                {scripts.map((script, index) => (
+                  <div
+                    key={script.id}
+                    className={cn(
+                      'flex items-center gap-2 p-2 rounded-lg border border-border/30 bg-accent/10 transition-all',
+                      draggedIndex === index && 'opacity-50',
+                      dragOverIndex === index && 'border-brand-500/50 bg-brand-500/5'
+                    )}
+                    draggable
+                    onDragStart={() => handleDragStart(index)}
+                    onDragOver={(e) => handleDragOver(e, index)}
+                    onDrop={(e) => handleDrop(e)}
+                    onDragEnd={(e) => handleDragEnd(e)}
+                  >
+                    {/* Drag handle - keyboard accessible */}
+                    <div
+                      className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground focus:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 rounded shrink-0 p-0.5"
+                      title="Drag to reorder (or use Arrow keys)"
+                      tabIndex={0}
+                      role="button"
+                      aria-label={`Reorder ${script.name || 'script'}. Use arrow keys to move.`}
+                      onKeyDown={(e) => handleDragHandleKeyDown(e, index)}
+                    >
+                      <GripVertical className="w-4 h-4" />
+                    </div>
+
+                    {/* Script name */}
+                    <Input
+                      value={script.name}
+                      onChange={(e) => handleUpdateScript(index, 'name', e.target.value)}
+                      onKeyDown={handleKeyDown}
+                      placeholder="Script name"
+                      className="h-8 text-sm flex-[0.4] min-w-0"
+                    />
+
+                    {/* Script command */}
+                    <Input
+                      value={script.command}
+                      onChange={(e) => handleUpdateScript(index, 'command', e.target.value)}
+                      onKeyDown={handleKeyDown}
+                      placeholder="Command to run"
+                      className="h-8 text-sm font-mono flex-[0.6] min-w-0"
+                    />
+
+                    {/* Remove button */}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleRemoveScript(index)}
+                      className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive shrink-0"
+                      aria-label={`Remove ${script.name || 'script'}`}
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </Button>
+                  </div>
+                ))}
+
+                {scripts.length === 0 && (
+                  <div className="text-center py-6 text-sm text-muted-foreground">
+                    No scripts configured. Add some below or use a preset.
+                  </div>
+                )}
+              </div>
+
+              {/* Add Script Button */}
+              <Button variant="outline" size="sm" onClick={handleAddScript} className="gap-1.5">
+                <Plus className="w-3.5 h-3.5" />
+                Add Script
+              </Button>
+
+              {/* Divider */}
+              <div className="border-t border-border/30" />
+
+              {/* Presets */}
+              <div className="space-y-3">
+                <h3 className="text-sm font-medium text-foreground">Quick Add Presets</h3>
+                <div className="flex flex-wrap gap-1.5">
+                  {SCRIPT_PRESETS.map((preset) => (
+                    <Button
+                      key={preset.command}
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleAddPreset(preset)}
+                      className="text-xs font-mono h-7 px-2"
+                    >
+                      {preset.command}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Info Box */}
+              <div className="flex items-start gap-3 p-3 rounded-lg bg-accent/20 border border-border/30">
+                <Info className="w-4 h-4 text-brand-500 mt-0.5 shrink-0" />
+                <div className="text-xs text-muted-foreground">
+                  <p className="font-medium text-foreground mb-1">Terminal Quick Scripts</p>
+                  <p>
+                    These scripts appear in the terminal header as a dropdown menu (the{' '}
+                    <ScrollText className="inline-block w-3 h-3 mx-0.5 align-middle" /> icon).
+                    Clicking a script will type the command into the active terminal and press
+                    Enter. Drag to reorder scripts.
+                  </p>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* ── Shared Action Buttons ── */}
+      <div className="flex items-center justify-end gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleReset}
+          disabled={!hasChanges || isSaving}
+          className="gap-1.5"
+        >
+          <RotateCcw className="w-3.5 h-3.5" />
+          Reset
+        </Button>
+        <Button
+          size="sm"
+          onClick={handleSave}
+          disabled={!hasChanges || isSaving}
+          className="gap-1.5"
+        >
+          {isSaving ? <Spinner size="xs" /> : <Save className="w-3.5 h-3.5" />}
+          Save
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/commands-section.tsx b/temp_repo/apps/ui/src/components/views/project-settings-view/commands-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b7cb31380d22562b97a2ab7d4ca4fd69e5dc23d6
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/commands-section.tsx
@@ -0,0 +1,315 @@
+import { useState, useEffect, useCallback, type KeyboardEvent } from 'react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Terminal, Save, RotateCcw, Info, X, Play, FlaskConical } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { useProjectSettings } from '@/hooks/queries';
+import { useUpdateProjectSettings } from '@/hooks/mutations';
+import type { Project } from '@/lib/electron';
+
+/** Preset dev server commands for quick selection */
+const DEV_SERVER_PRESETS = [
+  { label: 'npm run dev', command: 'npm run dev' },
+  { label: 'yarn dev', command: 'yarn dev' },
+  { label: 'pnpm dev', command: 'pnpm dev' },
+  { label: 'bun dev', command: 'bun dev' },
+  { label: 'npm start', command: 'npm start' },
+  { label: 'cargo watch', command: 'cargo watch -x run' },
+  { label: 'go run', command: 'go run .' },
+] as const;
+
+/** Preset test commands for quick selection */
+const TEST_PRESETS = [
+  { label: 'npm test', command: 'npm test' },
+  { label: 'yarn test', command: 'yarn test' },
+  { label: 'pnpm test', command: 'pnpm test' },
+  { label: 'bun test', command: 'bun test' },
+  { label: 'pytest', command: 'pytest' },
+  { label: 'cargo test', command: 'cargo test' },
+  { label: 'go test', command: 'go test ./...' },
+] as const;
+
+interface CommandsSectionProps {
+  project: Project;
+}
+
+export function CommandsSection({ project }: CommandsSectionProps) {
+  // Fetch project settings using TanStack Query
+  const { data: projectSettings, isLoading, isError } = useProjectSettings(project.path);
+
+  // Mutation hook for updating project settings
+  const updateSettingsMutation = useUpdateProjectSettings(project.path);
+
+  // Local state for the input fields
+  const [devCommand, setDevCommand] = useState('');
+  const [originalDevCommand, setOriginalDevCommand] = useState('');
+  const [testCommand, setTestCommand] = useState('');
+  const [originalTestCommand, setOriginalTestCommand] = useState('');
+
+  // Sync local state when project settings load or project changes
+  useEffect(() => {
+    // Reset local state when project changes to avoid showing stale values
+    setDevCommand('');
+    setOriginalDevCommand('');
+    setTestCommand('');
+    setOriginalTestCommand('');
+  }, [project.path]);
+
+  useEffect(() => {
+    if (projectSettings) {
+      const dev = projectSettings.devCommand || '';
+      const test = projectSettings.testCommand || '';
+      setDevCommand(dev);
+      setOriginalDevCommand(dev);
+      setTestCommand(test);
+      setOriginalTestCommand(test);
+    }
+  }, [projectSettings]);
+
+  // Check if there are unsaved changes
+  const hasDevChanges = devCommand !== originalDevCommand;
+  const hasTestChanges = testCommand !== originalTestCommand;
+  const hasChanges = hasDevChanges || hasTestChanges;
+  const isSaving = updateSettingsMutation.isPending;
+
+  // Save all commands
+  const handleSave = useCallback(() => {
+    const normalizedDevCommand = devCommand.trim();
+    const normalizedTestCommand = testCommand.trim();
+
+    updateSettingsMutation.mutate(
+      {
+        devCommand: normalizedDevCommand || null,
+        testCommand: normalizedTestCommand || null,
+      },
+      {
+        onSuccess: () => {
+          setDevCommand(normalizedDevCommand);
+          setOriginalDevCommand(normalizedDevCommand);
+          setTestCommand(normalizedTestCommand);
+          setOriginalTestCommand(normalizedTestCommand);
+        },
+      }
+    );
+  }, [devCommand, testCommand, updateSettingsMutation]);
+
+  // Reset to original values
+  const handleReset = useCallback(() => {
+    setDevCommand(originalDevCommand);
+    setTestCommand(originalTestCommand);
+  }, [originalDevCommand, originalTestCommand]);
+
+  // Use a preset command
+  const handleUseDevPreset = useCallback((command: string) => {
+    setDevCommand(command);
+  }, []);
+
+  const handleUseTestPreset = useCallback((command: string) => {
+    setTestCommand(command);
+  }, []);
+
+  // Clear commands
+  const handleClearDev = useCallback(() => {
+    setDevCommand('');
+  }, []);
+
+  const handleClearTest = useCallback(() => {
+    setTestCommand('');
+  }, []);
+
+  // Handle keyboard shortcuts (Enter to save)
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' && hasChanges && !isSaving) {
+        e.preventDefault();
+        handleSave();
+      }
+    },
+    [hasChanges, isSaving, handleSave]
+  );
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Terminal className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Project Commands</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure custom commands for development and testing.
+        </p>
+      </div>
+
+      <div className="p-6 space-y-8">
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <Spinner size="md" />
+          </div>
+        ) : isError ? (
+          <div className="flex items-center justify-center py-8 text-sm text-destructive">
+            Failed to load project settings. Please try again.
+          </div>
+        ) : (
+          <>
+            {/* Dev Server Command Section */}
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <Play className="w-4 h-4 text-brand-500" />
+                <h3 className="text-base font-medium text-foreground">Dev Server</h3>
+                {hasDevChanges && (
+                  <span className="text-xs text-amber-500 font-medium">(unsaved)</span>
+                )}
+              </div>
+
+              <div className="space-y-3 pl-6">
+                <div className="relative">
+                  <Input
+                    id="dev-command"
+                    value={devCommand}
+                    onChange={(e) => setDevCommand(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="e.g., npm run dev, yarn dev, cargo watch"
+                    className="font-mono text-sm pr-8"
+                    data-testid="dev-command-input"
+                  />
+                  {devCommand && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleClearDev}
+                      className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+                      aria-label="Clear dev command"
+                    >
+                      <X className="w-3.5 h-3.5" />
+                    </Button>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground/80">
+                  Leave empty to auto-detect based on your package manager.
+                </p>
+
+                {/* Dev Presets */}
+                <div className="flex flex-wrap gap-1.5">
+                  {DEV_SERVER_PRESETS.map((preset) => (
+                    <Button
+                      key={preset.command}
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleUseDevPreset(preset.command)}
+                      className="text-xs font-mono h-7 px-2"
+                    >
+                      {preset.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Divider */}
+            <div className="border-t border-border/30" />
+
+            {/* Test Command Section */}
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <FlaskConical className="w-4 h-4 text-brand-500" />
+                <h3 className="text-base font-medium text-foreground">Test Runner</h3>
+                {hasTestChanges && (
+                  <span className="text-xs text-amber-500 font-medium">(unsaved)</span>
+                )}
+              </div>
+
+              <div className="space-y-3 pl-6">
+                <div className="relative">
+                  <Input
+                    id="test-command"
+                    value={testCommand}
+                    onChange={(e) => setTestCommand(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="e.g., npm test, pytest, cargo test"
+                    className="font-mono text-sm pr-8"
+                    data-testid="test-command-input"
+                  />
+                  {testCommand && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={handleClearTest}
+                      className="absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+                      aria-label="Clear test command"
+                    >
+                      <X className="w-3.5 h-3.5" />
+                    </Button>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground/80">
+                  Leave empty to auto-detect based on your project structure.
+                </p>
+
+                {/* Test Presets */}
+                <div className="flex flex-wrap gap-1.5">
+                  {TEST_PRESETS.map((preset) => (
+                    <Button
+                      key={preset.command}
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleUseTestPreset(preset.command)}
+                      className="text-xs font-mono h-7 px-2"
+                    >
+                      {preset.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Auto-detection Info */}
+            <div className="flex items-start gap-3 p-3 rounded-lg bg-accent/20 border border-border/30">
+              <Info className="w-4 h-4 text-brand-500 mt-0.5 shrink-0" />
+              <div className="text-xs text-muted-foreground">
+                <p className="font-medium text-foreground mb-1">Auto-detection</p>
+                <p>
+                  When no custom command is set, the system automatically detects your package
+                  manager and test framework based on project files (package.json, Cargo.toml,
+                  go.mod, etc.).
+                </p>
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex items-center justify-end gap-2 pt-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleReset}
+                disabled={!hasChanges || isSaving}
+                className="gap-1.5"
+              >
+                <RotateCcw className="w-3.5 h-3.5" />
+                Reset
+              </Button>
+              <Button
+                size="sm"
+                onClick={handleSave}
+                disabled={!hasChanges || isSaving}
+                className="gap-1.5"
+              >
+                {isSaving ? <Spinner size="xs" /> : <Save className="w-3.5 h-3.5" />}
+                Save
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/components/project-settings-navigation.tsx b/temp_repo/apps/ui/src/components/views/project-settings-view/components/project-settings-navigation.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8b4addf3b033e31c997ca36074d0030ce5379e0e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/components/project-settings-navigation.tsx
@@ -0,0 +1,122 @@
+import { X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { PROJECT_SETTINGS_NAV_ITEMS } from '../config/navigation';
+import type { ProjectSettingsViewId } from '../hooks/use-project-settings-view';
+
+interface ProjectSettingsNavigationProps {
+  activeSection: ProjectSettingsViewId;
+  onNavigate: (sectionId: ProjectSettingsViewId) => void;
+  isOpen?: boolean;
+  onClose?: () => void;
+}
+
+export function ProjectSettingsNavigation({
+  activeSection,
+  onNavigate,
+  isOpen = true,
+  onClose,
+}: ProjectSettingsNavigationProps) {
+  return (
+    <>
+      {/* Mobile backdrop overlay - only shown when isOpen is true on mobile */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-20 lg:hidden"
+          onClick={onClose}
+          data-testid="project-settings-nav-backdrop"
+        />
+      )}
+
+      {/* Navigation sidebar */}
+      <nav
+        className={cn(
+          // Mobile: fixed position overlay with slide transition from right
+          'fixed inset-y-0 right-0 w-72 z-30',
+          'transition-transform duration-200 ease-out',
+          // Hide on mobile when closed, show when open
+          isOpen ? 'translate-x-0' : 'translate-x-full',
+          // Desktop: relative position in layout, always visible
+          'lg:relative lg:w-64 lg:z-auto lg:translate-x-0',
+          'shrink-0 overflow-y-auto',
+          'border-l border-border/50 lg:border-l-0 lg:border-r',
+          'bg-gradient-to-b from-card/95 via-card/90 to-card/85 backdrop-blur-xl',
+          // Desktop background
+          'lg:from-card/80 lg:via-card/60 lg:to-card/40'
+        )}
+      >
+        {/* Mobile close button */}
+        <div className="lg:hidden flex items-center justify-between px-4 py-3 border-b border-border/50">
+          <span className="text-sm font-semibold text-foreground">Navigation</span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClose}
+            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+            aria-label="Close navigation menu"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+
+        <div className="sticky top-0 p-4 space-y-1">
+          {PROJECT_SETTINGS_NAV_ITEMS.map((item) => {
+            const Icon = item.icon;
+            const isActive = activeSection === item.id;
+            const isDanger = item.id === 'danger';
+
+            return (
+              <button
+                key={item.id}
+                onClick={() => onNavigate(item.id)}
+                className={cn(
+                  'group w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 ease-out text-left relative overflow-hidden',
+                  isActive
+                    ? [
+                        isDanger
+                          ? 'bg-gradient-to-r from-red-500/15 via-red-500/10 to-red-600/5'
+                          : 'bg-gradient-to-r from-brand-500/15 via-brand-500/10 to-brand-600/5',
+                        'text-foreground',
+                        isDanger ? 'border border-red-500/25' : 'border border-brand-500/25',
+                        isDanger ? 'shadow-sm shadow-red-500/5' : 'shadow-sm shadow-brand-500/5',
+                      ]
+                    : [
+                        'text-muted-foreground hover:text-foreground',
+                        'hover:bg-accent/50',
+                        'border border-transparent hover:border-border/40',
+                      ],
+                  'hover:scale-[1.01] active:scale-[0.98]'
+                )}
+              >
+                {/* Active indicator bar */}
+                {isActive && (
+                  <div
+                    className={cn(
+                      'absolute inset-y-0 left-0 w-0.5 rounded-r-full',
+                      isDanger
+                        ? 'bg-gradient-to-b from-red-400 via-red-500 to-red-600'
+                        : 'bg-gradient-to-b from-brand-400 via-brand-500 to-brand-600'
+                    )}
+                  />
+                )}
+                <Icon
+                  className={cn(
+                    'w-4 h-4 shrink-0 transition-all duration-200',
+                    isActive
+                      ? isDanger
+                        ? 'text-red-500'
+                        : 'text-brand-500'
+                      : isDanger
+                        ? 'group-hover:text-red-400 group-hover:scale-110'
+                        : 'group-hover:text-brand-400 group-hover:scale-110'
+                  )}
+                />
+                <span className={cn(isDanger && !isActive && 'text-red-400/70')}>{item.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </nav>
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/config/navigation.ts b/temp_repo/apps/ui/src/components/views/project-settings-view/config/navigation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dda059d4cf8ae9ae628e26c42ae6e7a76c9ebf11
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/config/navigation.ts
@@ -0,0 +1,29 @@
+import type { LucideIcon } from 'lucide-react';
+import {
+  User,
+  GitBranch,
+  Palette,
+  AlertTriangle,
+  Workflow,
+  Database,
+  Terminal,
+  Unlink,
+} from 'lucide-react';
+import type { ProjectSettingsViewId } from '../hooks/use-project-settings-view';
+
+export interface ProjectNavigationItem {
+  id: ProjectSettingsViewId;
+  label: string;
+  icon: LucideIcon;
+}
+
+export const PROJECT_SETTINGS_NAV_ITEMS: ProjectNavigationItem[] = [
+  { id: 'identity', label: 'Identity', icon: User },
+  { id: 'worktrees', label: 'Worktrees', icon: GitBranch },
+  { id: 'commands-scripts', label: 'Commands & Scripts', icon: Terminal },
+  { id: 'theme', label: 'Theme', icon: Palette },
+  { id: 'claude', label: 'Models', icon: Workflow },
+  { id: 'data', label: 'Data', icon: Database },
+  { id: 'orphaned', label: 'Orphaned Features', icon: Unlink },
+  { id: 'danger', label: 'Danger Zone', icon: AlertTriangle },
+];
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/data-management-section.tsx b/temp_repo/apps/ui/src/components/views/project-settings-view/data-management-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f6c6ceec8408c9b0d70b71863eecc072418e2e87
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/data-management-section.tsx
@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Database, Download, Upload } from 'lucide-react';
+import { ExportFeaturesDialog } from '../board-view/dialogs/export-features-dialog';
+import { ImportFeaturesDialog } from '../board-view/dialogs/import-features-dialog';
+import { useBoardFeatures } from '../board-view/hooks';
+import type { Project } from '@/lib/electron';
+
+interface DataManagementSectionProps {
+  project: Project;
+}
+
+export function DataManagementSection({ project }: DataManagementSectionProps) {
+  const [showExportDialog, setShowExportDialog] = useState(false);
+  const [showImportDialog, setShowImportDialog] = useState(false);
+
+  // Fetch features and persisted categories using the existing hook
+  const { features, persistedCategories, loadFeatures } = useBoardFeatures({
+    currentProject: project,
+  });
+
+  return (
+    <>
+      <div
+        className={cn(
+          'rounded-2xl overflow-hidden',
+          'border border-border/50',
+          'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+          'shadow-sm shadow-black/5'
+        )}
+      >
+        <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <Database className="w-5 h-5 text-brand-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">
+              Data Management
+            </h2>
+          </div>
+          <p className="text-sm text-muted-foreground/80 ml-12">
+            Export and import features to backup your data or share with other projects.
+          </p>
+        </div>
+        <div className="p-6 space-y-6">
+          {/* Export Section */}
+          <div className="space-y-3">
+            <div>
+              <h3 className="text-sm font-medium text-foreground">Export Features</h3>
+              <p className="text-xs text-muted-foreground mt-1">
+                Download all features as a JSON or YAML file for backup or sharing.
+              </p>
+            </div>
+            <Button
+              variant="outline"
+              onClick={() => setShowExportDialog(true)}
+              className="gap-2"
+              data-testid="export-features-button"
+            >
+              <Download className="w-4 h-4" />
+              Export Features
+            </Button>
+          </div>
+
+          {/* Separator */}
+          <div className="border-t border-border/50" />
+
+          {/* Import Section */}
+          <div className="space-y-3">
+            <div>
+              <h3 className="text-sm font-medium text-foreground">Import Features</h3>
+              <p className="text-xs text-muted-foreground mt-1">
+                Import features from a previously exported JSON or YAML file.
+              </p>
+            </div>
+            <Button
+              variant="outline"
+              onClick={() => setShowImportDialog(true)}
+              className="gap-2"
+              data-testid="import-features-button"
+            >
+              <Upload className="w-4 h-4" />
+              Import Features
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Export Dialog */}
+      <ExportFeaturesDialog
+        open={showExportDialog}
+        onOpenChange={setShowExportDialog}
+        projectPath={project.path}
+        features={features}
+      />
+
+      {/* Import Dialog */}
+      <ImportFeaturesDialog
+        open={showImportDialog}
+        onOpenChange={setShowImportDialog}
+        projectPath={project.path}
+        categorySuggestions={persistedCategories}
+        onImportComplete={() => {
+          loadFeatures();
+        }}
+      />
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/hooks/index.ts b/temp_repo/apps/ui/src/components/views/project-settings-view/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..023eca9e564eaf0f69af19c69364783082b1af37
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/hooks/index.ts
@@ -0,0 +1 @@
+export { useProjectSettingsView, type ProjectSettingsViewId } from './use-project-settings-view';
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/hooks/use-project-settings-view.ts b/temp_repo/apps/ui/src/components/views/project-settings-view/hooks/use-project-settings-view.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ce2bbcc2279d9744d15696e19571da36b04b15cf
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/hooks/use-project-settings-view.ts
@@ -0,0 +1,32 @@
+import { useState, useCallback } from 'react';
+
+export type ProjectSettingsViewId =
+  | 'identity'
+  | 'theme'
+  | 'worktrees'
+  | 'commands'
+  | 'scripts'
+  | 'commands-scripts'
+  | 'claude'
+  | 'data'
+  | 'orphaned'
+  | 'danger';
+
+interface UseProjectSettingsViewOptions {
+  initialView?: ProjectSettingsViewId;
+}
+
+export function useProjectSettingsView({
+  initialView = 'identity',
+}: UseProjectSettingsViewOptions = {}) {
+  const [activeView, setActiveView] = useState<ProjectSettingsViewId>(initialView);
+
+  const navigateTo = useCallback((viewId: ProjectSettingsViewId) => {
+    setActiveView(viewId);
+  }, []);
+
+  return {
+    activeView,
+    navigateTo,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/index.ts b/temp_repo/apps/ui/src/components/views/project-settings-view/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eece0b0e4c214bd23e87920ed15f61c8776db6c2
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/index.ts
@@ -0,0 +1,10 @@
+export { ProjectSettingsView } from './project-settings-view';
+export { ProjectIdentitySection } from './project-identity-section';
+export { ProjectThemeSection } from './project-theme-section';
+export { WorktreePreferencesSection } from './worktree-preferences-section';
+export { CommandsAndScriptsSection } from './commands-and-scripts-section';
+// Legacy exports kept for backward compatibility
+export { CommandsSection } from './commands-section';
+export { TerminalScriptsSection } from './terminal-scripts-section';
+export { useProjectSettingsView, type ProjectSettingsViewId } from './hooks';
+export { ProjectSettingsNavigation } from './components/project-settings-navigation';
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/orphaned-features-section.tsx b/temp_repo/apps/ui/src/components/views/project-settings-view/orphaned-features-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e0e88d7f047746171f7cb71b20312d6a894733cd
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/orphaned-features-section.tsx
@@ -0,0 +1,658 @@
+import { useState, useCallback, useMemo } from 'react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Unlink,
+  Search,
+  Trash2,
+  GitBranch,
+  ArrowRight,
+  AlertTriangle,
+  CheckSquare,
+  MinusSquare,
+  Square,
+} from 'lucide-react';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import type { Project } from '@/lib/electron';
+import type { Feature } from '@automaker/types';
+
+interface OrphanedFeatureInfo {
+  feature: Feature;
+  missingBranch: string;
+}
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  isCurrent: boolean;
+  hasWorktree: boolean;
+}
+
+interface OrphanedFeaturesSectionProps {
+  project: Project;
+}
+
+export function OrphanedFeaturesSection({ project }: OrphanedFeaturesSectionProps) {
+  const [scanning, setScanning] = useState(false);
+  const [scanned, setScanned] = useState(false);
+  const [orphanedFeatures, setOrphanedFeatures] = useState<OrphanedFeatureInfo[]>([]);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [resolvingIds, setResolvingIds] = useState<Set<string>>(new Set());
+  const [deleteConfirm, setDeleteConfirm] = useState<{
+    featureIds: string[];
+    labels: string[];
+  } | null>(null);
+  const [moveDialog, setMoveDialog] = useState<{
+    featureIds: string[];
+    labels: string[];
+  } | null>(null);
+  const [worktrees, setWorktrees] = useState<WorktreeInfo[]>([]);
+  const [selectedBranch, setSelectedBranch] = useState<string>('__main__');
+  const [loadingWorktrees, setLoadingWorktrees] = useState(false);
+
+  const allSelected = orphanedFeatures.length > 0 && selectedIds.size === orphanedFeatures.length;
+  const someSelected = selectedIds.size > 0 && selectedIds.size < orphanedFeatures.length;
+  const hasSelection = selectedIds.size > 0;
+
+  const selectedLabels = useMemo(() => {
+    return orphanedFeatures
+      .filter((o) => selectedIds.has(o.feature.id))
+      .map((o) => o.feature.title || o.feature.description?.slice(0, 60) || o.feature.id);
+  }, [orphanedFeatures, selectedIds]);
+
+  const toggleSelect = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  const toggleSelectAll = useCallback(() => {
+    if (allSelected) {
+      setSelectedIds(new Set());
+    } else {
+      setSelectedIds(new Set(orphanedFeatures.map((o) => o.feature.id)));
+    }
+  }, [allSelected, orphanedFeatures]);
+
+  const scanForOrphans = useCallback(async () => {
+    setScanning(true);
+    setSelectedIds(new Set());
+    try {
+      const api = getHttpApiClient();
+      const result = await api.features.getOrphaned(project.path);
+      if (result.success && result.orphanedFeatures) {
+        setOrphanedFeatures(result.orphanedFeatures);
+        setScanned(true);
+        if (result.orphanedFeatures.length === 0) {
+          toast.success('No orphaned features found');
+        } else {
+          toast.info(`Found ${result.orphanedFeatures.length} orphaned feature(s)`);
+        }
+      } else {
+        toast.error('Failed to scan for orphaned features', {
+          description: result.error,
+        });
+      }
+    } catch (error) {
+      toast.error('Failed to scan for orphaned features', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setScanning(false);
+    }
+  }, [project.path]);
+
+  const loadWorktrees = useCallback(async () => {
+    setLoadingWorktrees(true);
+    try {
+      const api = getHttpApiClient();
+      const result = await api.worktree.listAll(project.path);
+      if (result.success && result.worktrees) {
+        setWorktrees(result.worktrees);
+      }
+    } catch {
+      // Non-fatal
+    } finally {
+      setLoadingWorktrees(false);
+    }
+  }, [project.path]);
+
+  const resolveOrphan = useCallback(
+    async (
+      featureId: string,
+      action: 'delete' | 'create-worktree' | 'move-to-branch',
+      targetBranch?: string | null
+    ) => {
+      setResolvingIds((prev) => new Set(prev).add(featureId));
+      try {
+        const api = getHttpApiClient();
+        const result = await api.features.resolveOrphaned(
+          project.path,
+          featureId,
+          action,
+          targetBranch
+        );
+        if (result.success) {
+          setOrphanedFeatures((prev) => prev.filter((o) => o.feature.id !== featureId));
+          setSelectedIds((prev) => {
+            const next = new Set(prev);
+            next.delete(featureId);
+            return next;
+          });
+          const messages: Record<string, string> = {
+            deleted: 'Feature deleted',
+            'worktree-created': 'Worktree created successfully',
+            moved: 'Feature moved successfully',
+          };
+          toast.success(messages[result.action ?? action] ?? 'Resolved');
+        } else {
+          toast.error('Failed to resolve orphaned feature', {
+            description: result.error,
+          });
+        }
+      } catch (error) {
+        toast.error('Failed to resolve orphaned feature', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      } finally {
+        setResolvingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(featureId);
+          return next;
+        });
+      }
+    },
+    [project.path]
+  );
+
+  const bulkResolve = useCallback(
+    async (
+      featureIds: string[],
+      action: 'delete' | 'create-worktree' | 'move-to-branch',
+      targetBranch?: string | null
+    ) => {
+      const ids = new Set(featureIds);
+      setResolvingIds((prev) => new Set([...prev, ...ids]));
+      try {
+        const api = getHttpApiClient();
+        const result = await api.features.bulkResolveOrphaned(
+          project.path,
+          featureIds,
+          action,
+          targetBranch
+        );
+        if (result.success || (result.resolvedCount && result.resolvedCount > 0)) {
+          const resolvedIds = new Set(
+            result.results?.filter((r) => r.success).map((r) => r.featureId) ?? featureIds
+          );
+          setOrphanedFeatures((prev) => prev.filter((o) => !resolvedIds.has(o.feature.id)));
+          setSelectedIds((prev) => {
+            const next = new Set(prev);
+            for (const id of resolvedIds) {
+              next.delete(id);
+            }
+            return next;
+          });
+
+          const actionLabel =
+            action === 'delete'
+              ? 'deleted'
+              : action === 'create-worktree'
+                ? 'moved to worktrees'
+                : 'moved';
+          if (result.failedCount && result.failedCount > 0) {
+            toast.warning(
+              `${result.resolvedCount} feature(s) ${actionLabel}, ${result.failedCount} failed`
+            );
+          } else {
+            toast.success(`${result.resolvedCount} feature(s) ${actionLabel}`);
+          }
+        } else {
+          toast.error('Failed to resolve orphaned features', {
+            description: result.error,
+          });
+        }
+      } catch (error) {
+        toast.error('Failed to resolve orphaned features', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      } finally {
+        setResolvingIds((prev) => {
+          const next = new Set(prev);
+          for (const id of featureIds) {
+            next.delete(id);
+          }
+          return next;
+        });
+        setDeleteConfirm(null);
+        setMoveDialog(null);
+      }
+    },
+    [project.path]
+  );
+
+  const openMoveDialog = useCallback(
+    async (featureIds: string[], labels: string[]) => {
+      setMoveDialog({ featureIds, labels });
+      setSelectedBranch('__main__');
+      await loadWorktrees();
+    },
+    [loadWorktrees]
+  );
+
+  const handleMoveConfirm = useCallback(() => {
+    if (!moveDialog) return;
+    const targetBranch = selectedBranch === '__main__' ? null : selectedBranch;
+    if (moveDialog.featureIds.length === 1) {
+      resolveOrphan(moveDialog.featureIds[0], 'move-to-branch', targetBranch);
+    } else {
+      bulkResolve(moveDialog.featureIds, 'move-to-branch', targetBranch);
+    }
+    setMoveDialog(null);
+  }, [moveDialog, selectedBranch, resolveOrphan, bulkResolve]);
+
+  const isBulkResolving = resolvingIds.size > 0;
+
+  return (
+    <>
+      <div
+        className={cn(
+          'rounded-2xl overflow-hidden',
+          'border border-border/50',
+          'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+          'shadow-sm shadow-black/5'
+        )}
+      >
+        {/* Header */}
+        <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-amber-500/20 to-amber-600/10 flex items-center justify-center border border-amber-500/20">
+              <Unlink className="w-5 h-5 text-amber-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">
+              Orphaned Features
+            </h2>
+            {scanned && orphanedFeatures.length > 0 && (
+              <span className="ml-auto inline-flex items-center rounded-full bg-amber-500/15 px-2.5 py-0.5 text-xs font-medium text-amber-500 border border-amber-500/25">
+                {orphanedFeatures.length} found
+              </span>
+            )}
+          </div>
+          <p className="text-sm text-muted-foreground/80 ml-12">
+            Detect features whose git branches no longer exist. You can delete them, create a new
+            worktree, or move them to an existing branch.
+          </p>
+        </div>
+
+        <div className="p-6 space-y-6">
+          {/* Scan Button */}
+          <div className="space-y-3">
+            <div>
+              <h3 className="text-sm font-medium text-foreground">Scan for Orphaned Features</h3>
+              <p className="text-xs text-muted-foreground mt-1">
+                Check all features for missing git branches.
+              </p>
+            </div>
+            <Button
+              variant="outline"
+              onClick={scanForOrphans}
+              loading={scanning}
+              className="gap-2"
+              data-testid="scan-orphaned-features-button"
+            >
+              <Search className="w-4 h-4" />
+              {scanning ? 'Scanning...' : scanned ? 'Rescan' : 'Scan for Orphans'}
+            </Button>
+          </div>
+
+          {/* Results */}
+          {scanned && (
+            <>
+              <div className="border-t border-border/50" />
+
+              {orphanedFeatures.length === 0 ? (
+                <div className="text-center py-6">
+                  <div className="w-12 h-12 mx-auto mb-3 rounded-xl bg-emerald-500/10 flex items-center justify-center">
+                    <GitBranch className="w-6 h-6 text-emerald-500" />
+                  </div>
+                  <p className="text-sm font-medium text-foreground">All clear</p>
+                  <p className="text-xs text-muted-foreground mt-1">
+                    No orphaned features detected.
+                  </p>
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {/* Selection toolbar */}
+                  <div className="flex items-center justify-between gap-3 flex-wrap">
+                    <div className="flex items-center gap-3">
+                      <button
+                        onClick={toggleSelectAll}
+                        className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                        data-testid="select-all-orphans"
+                      >
+                        {allSelected ? (
+                          <CheckSquare className="w-4 h-4 text-brand-500" />
+                        ) : someSelected ? (
+                          <MinusSquare className="w-4 h-4 text-brand-500" />
+                        ) : (
+                          <Square className="w-4 h-4" />
+                        )}
+                        <span>
+                          {allSelected ? 'Deselect all' : `Select all (${orphanedFeatures.length})`}
+                        </span>
+                      </button>
+                      {hasSelection && (
+                        <span className="text-xs text-muted-foreground">
+                          {selectedIds.size} selected
+                        </span>
+                      )}
+                    </div>
+
+                    {/* Bulk actions */}
+                    {hasSelection && (
+                      <div className="flex items-center gap-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => {
+                            const ids = Array.from(selectedIds);
+                            bulkResolve(ids, 'create-worktree');
+                          }}
+                          disabled={isBulkResolving}
+                          className="gap-1.5 text-xs"
+                          data-testid="bulk-create-worktree"
+                        >
+                          <GitBranch className="w-3.5 h-3.5" />
+                          Create Worktrees ({selectedIds.size})
+                        </Button>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => openMoveDialog(Array.from(selectedIds), selectedLabels)}
+                          disabled={isBulkResolving}
+                          className="gap-1.5 text-xs"
+                          data-testid="bulk-move-to-branch"
+                        >
+                          <ArrowRight className="w-3.5 h-3.5" />
+                          Move ({selectedIds.size})
+                        </Button>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() =>
+                            setDeleteConfirm({
+                              featureIds: Array.from(selectedIds),
+                              labels: selectedLabels,
+                            })
+                          }
+                          disabled={isBulkResolving}
+                          className="gap-1.5 text-xs text-destructive hover:text-destructive hover:bg-destructive/10 hover:border-destructive/30"
+                          data-testid="bulk-delete-orphans"
+                        >
+                          <Trash2 className="w-3.5 h-3.5" />
+                          Delete ({selectedIds.size})
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Feature list */}
+                  <div className="space-y-2">
+                    {orphanedFeatures.map(({ feature, missingBranch }) => {
+                      const isResolving = resolvingIds.has(feature.id);
+                      const isSelected = selectedIds.has(feature.id);
+                      return (
+                        <div
+                          key={feature.id}
+                          className={cn(
+                            'rounded-xl border p-4',
+                            'bg-gradient-to-r from-card/60 to-card/40',
+                            'transition-all duration-200',
+                            isResolving && 'opacity-60',
+                            isSelected ? 'border-brand-500/40 bg-brand-500/5' : 'border-border/50'
+                          )}
+                        >
+                          <div className="flex items-start gap-3">
+                            {/* Checkbox */}
+                            <div className="pt-0.5">
+                              <Checkbox
+                                checked={isSelected}
+                                onCheckedChange={() => toggleSelect(feature.id)}
+                                disabled={isResolving}
+                                data-testid={`select-orphan-${feature.id}`}
+                              />
+                            </div>
+
+                            <div className="min-w-0 flex-1">
+                              <p className="text-sm font-medium text-foreground truncate">
+                                {feature.title || feature.description?.slice(0, 80) || feature.id}
+                              </p>
+                              <p className="text-xs text-muted-foreground mt-1 flex items-center gap-1.5">
+                                <AlertTriangle className="w-3 h-3 text-amber-500 shrink-0" />
+                                Missing branch:{' '}
+                                <code className="px-1.5 py-0.5 rounded bg-muted/50 font-mono text-[11px]">
+                                  {missingBranch}
+                                </code>
+                              </p>
+                            </div>
+                          </div>
+
+                          {/* Per-item actions */}
+                          <div className="flex items-center gap-2 mt-3 ml-7 flex-wrap">
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={() => resolveOrphan(feature.id, 'create-worktree')}
+                              disabled={isResolving}
+                              loading={isResolving}
+                              className="gap-1.5 text-xs"
+                              data-testid={`create-worktree-${feature.id}`}
+                            >
+                              <GitBranch className="w-3.5 h-3.5" />
+                              Create Worktree
+                            </Button>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={() =>
+                                openMoveDialog(
+                                  [feature.id],
+                                  [feature.title || feature.description?.slice(0, 60) || feature.id]
+                                )
+                              }
+                              disabled={isResolving}
+                              className="gap-1.5 text-xs"
+                              data-testid={`move-orphan-${feature.id}`}
+                            >
+                              <ArrowRight className="w-3.5 h-3.5" />
+                              Move to Branch
+                            </Button>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={() =>
+                                setDeleteConfirm({
+                                  featureIds: [feature.id],
+                                  labels: [
+                                    feature.title ||
+                                      feature.description?.slice(0, 60) ||
+                                      feature.id,
+                                  ],
+                                })
+                              }
+                              disabled={isResolving}
+                              className="gap-1.5 text-xs text-destructive hover:text-destructive hover:bg-destructive/10 hover:border-destructive/30"
+                              data-testid={`delete-orphan-${feature.id}`}
+                            >
+                              <Trash2 className="w-3.5 h-3.5" />
+                              Delete
+                            </Button>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={!!deleteConfirm} onOpenChange={(open) => !open && setDeleteConfirm(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2 text-destructive">
+              <Trash2 className="w-5 h-5" />
+              Delete{' '}
+              {deleteConfirm && deleteConfirm.featureIds.length > 1
+                ? `${deleteConfirm.featureIds.length} Orphaned Features`
+                : 'Orphaned Feature'}
+            </DialogTitle>
+            <DialogDescription>
+              {deleteConfirm && deleteConfirm.featureIds.length > 1 ? (
+                <>
+                  Are you sure you want to permanently delete these{' '}
+                  {deleteConfirm.featureIds.length} features?
+                  <span className="block mt-2 max-h-32 overflow-y-auto space-y-1">
+                    {deleteConfirm.labels.map((label, i) => (
+                      <span key={i} className="block text-sm font-medium text-foreground">
+                        &bull; {label}
+                      </span>
+                    ))}
+                  </span>
+                </>
+              ) : (
+                <>
+                  Are you sure you want to permanently delete this feature?
+                  <span className="block mt-2 font-medium text-foreground">
+                    &quot;{deleteConfirm?.labels[0]}&quot;
+                  </span>
+                </>
+              )}
+              <span className="block mt-2 text-destructive font-medium">
+                This action cannot be undone.
+              </span>
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setDeleteConfirm(null)}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              loading={isBulkResolving}
+              onClick={() => {
+                if (deleteConfirm) {
+                  if (deleteConfirm.featureIds.length === 1) {
+                    resolveOrphan(deleteConfirm.featureIds[0], 'delete');
+                    setDeleteConfirm(null);
+                  } else {
+                    bulkResolve(deleteConfirm.featureIds, 'delete');
+                  }
+                }
+              }}
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              Delete
+              {deleteConfirm && deleteConfirm.featureIds.length > 1
+                ? ` (${deleteConfirm.featureIds.length})`
+                : ''}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Move to Branch Dialog */}
+      <Dialog open={!!moveDialog} onOpenChange={(open) => !open && setMoveDialog(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <ArrowRight className="w-5 h-5 text-brand-500" />
+              Move to Branch
+            </DialogTitle>
+            <DialogDescription>
+              {moveDialog && moveDialog.featureIds.length > 1 ? (
+                <>
+                  Select where to move {moveDialog.featureIds.length} features. The branch reference
+                  will be updated and the features will be set to pending.
+                </>
+              ) : (
+                <>
+                  Select where to move this feature. The branch reference will be updated and the
+                  feature will be set to pending.
+                </>
+              )}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="py-4">
+            <label className="text-sm font-medium text-foreground mb-2 block">Target Branch</label>
+            <Select
+              value={selectedBranch}
+              onValueChange={setSelectedBranch}
+              disabled={loadingWorktrees}
+            >
+              <SelectTrigger className="w-full" data-testid="move-target-branch-select">
+                <SelectValue placeholder="Select a branch..." />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__main__">Main worktree (clear branch reference)</SelectItem>
+                {worktrees
+                  .filter((w) => !w.isMain && w.branch)
+                  .map((w) => (
+                    <SelectItem key={w.branch} value={w.branch}>
+                      {w.branch}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+            <p className="text-xs text-muted-foreground mt-2">
+              {selectedBranch === '__main__'
+                ? 'The branch reference will be cleared and the feature will use the main worktree.'
+                : `The feature will be associated with the "${selectedBranch}" branch.`}
+            </p>
+          </div>
+
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setMoveDialog(null)}>
+              Cancel
+            </Button>
+            <Button loading={isBulkResolving} onClick={handleMoveConfirm}>
+              <ArrowRight className="w-4 h-4 mr-2" />
+              Move
+              {moveDialog && moveDialog.featureIds.length > 1
+                ? ` (${moveDialog.featureIds.length})`
+                : ''}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/project-bulk-replace-dialog.tsx b/temp_repo/apps/ui/src/components/views/project-settings-view/project-bulk-replace-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e4e0a35040876a6c0b8d58c306f75841efd9b460
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/project-bulk-replace-dialog.tsx
@@ -0,0 +1,413 @@
+import { useState, useMemo } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { ArrowRight, Cloud, Server, Check, AlertCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { Project } from '@/lib/electron';
+import type {
+  PhaseModelKey,
+  PhaseModelEntry,
+  ClaudeCompatibleProvider,
+  ClaudeModelAlias,
+} from '@automaker/types';
+import { DEFAULT_PHASE_MODELS, DEFAULT_GLOBAL_SETTINGS } from '@automaker/types';
+
+interface ProjectBulkReplaceDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  project: Project;
+}
+
+// Phase display names for preview
+const PHASE_LABELS: Record<PhaseModelKey, string> = {
+  enhancementModel: 'Feature Enhancement',
+  fileDescriptionModel: 'File Descriptions',
+  imageDescriptionModel: 'Image Descriptions',
+  commitMessageModel: 'Commit Messages',
+  validationModel: 'GitHub Issue Validation',
+  specGenerationModel: 'App Specification',
+  featureGenerationModel: 'Feature Generation',
+  backlogPlanningModel: 'Backlog Planning',
+  projectAnalysisModel: 'Project Analysis',
+  ideationModel: 'Ideation',
+  memoryExtractionModel: 'Memory Extraction',
+  prDescriptionModel: 'PR Description',
+};
+
+const ALL_PHASES = Object.keys(PHASE_LABELS) as PhaseModelKey[];
+
+// Special key for default feature model (not a phase but included in bulk replace)
+const DEFAULT_FEATURE_MODEL_KEY = '__defaultFeatureModel__' as const;
+type ExtendedPhaseKey = PhaseModelKey | typeof DEFAULT_FEATURE_MODEL_KEY;
+
+// Claude model display names
+const CLAUDE_MODEL_DISPLAY: Record<ClaudeModelAlias, string> = {
+  haiku: 'Claude Haiku',
+  sonnet: 'Claude Sonnet',
+  opus: 'Claude Opus',
+};
+
+export function ProjectBulkReplaceDialog({
+  open,
+  onOpenChange,
+  project,
+}: ProjectBulkReplaceDialogProps) {
+  const {
+    phaseModels,
+    setProjectPhaseModelOverride,
+    claudeCompatibleProviders,
+    defaultFeatureModel,
+    setProjectDefaultFeatureModel,
+  } = useAppStore();
+  const [selectedProvider, setSelectedProvider] = useState<string>('anthropic');
+
+  // Get project-level overrides
+  const projectOverrides = project.phaseModelOverrides || {};
+  const projectDefaultFeatureModel = project.defaultFeatureModel;
+
+  // Get enabled providers
+  const enabledProviders = useMemo(() => {
+    return (claudeCompatibleProviders || []).filter((p) => p.enabled !== false);
+  }, [claudeCompatibleProviders]);
+
+  // Build provider options for the dropdown
+  const providerOptions = useMemo(() => {
+    const options: Array<{ id: string; name: string; isNative: boolean }> = [
+      { id: 'anthropic', name: 'Anthropic Direct', isNative: true },
+    ];
+
+    enabledProviders.forEach((provider) => {
+      options.push({
+        id: provider.id,
+        name: provider.name,
+        isNative: false,
+      });
+    });
+
+    return options;
+  }, [enabledProviders]);
+
+  // Get the selected provider config (if custom)
+  const selectedProviderConfig = useMemo(() => {
+    if (selectedProvider === 'anthropic') return null;
+    return enabledProviders.find((p) => p.id === selectedProvider);
+  }, [selectedProvider, enabledProviders]);
+
+  // Get the Claude model alias from a PhaseModelEntry
+  const getClaudeModelAlias = (entry: PhaseModelEntry): ClaudeModelAlias => {
+    // Check if model string directly matches a Claude alias
+    if (entry.model === 'haiku' || entry.model === 'claude-haiku') return 'haiku';
+    if (entry.model === 'sonnet' || entry.model === 'claude-sonnet') return 'sonnet';
+    if (entry.model === 'opus' || entry.model === 'claude-opus') return 'opus';
+
+    // If it's a provider model, look up the mapping
+    if (entry.providerId) {
+      const provider = enabledProviders.find((p) => p.id === entry.providerId);
+      if (provider) {
+        const model = provider.models?.find((m) => m.id === entry.model);
+        if (model?.mapsToClaudeModel) {
+          return model.mapsToClaudeModel;
+        }
+      }
+    }
+
+    // Default to sonnet
+    return 'sonnet';
+  };
+
+  // Find the model from provider that maps to a specific Claude model
+  const findModelForClaudeAlias = (
+    provider: ClaudeCompatibleProvider | null,
+    claudeAlias: ClaudeModelAlias,
+    key: ExtendedPhaseKey
+  ): PhaseModelEntry => {
+    if (!provider) {
+      // Anthropic Direct - reset to default phase model (includes correct thinking levels)
+      // For default feature model, use the default from global settings
+      if (key === DEFAULT_FEATURE_MODEL_KEY) {
+        return DEFAULT_GLOBAL_SETTINGS.defaultFeatureModel;
+      }
+      return DEFAULT_PHASE_MODELS[key];
+    }
+
+    // Find model that maps to this Claude alias
+    const models = provider.models || [];
+    const match = models.find((m) => m.mapsToClaudeModel === claudeAlias);
+
+    if (match) {
+      return { providerId: provider.id, model: match.id };
+    }
+
+    // Fallback: use first model if no match
+    if (models.length > 0) {
+      return { providerId: provider.id, model: models[0].id };
+    }
+
+    // Ultimate fallback to native Claude model
+    return { model: claudeAlias };
+  };
+
+  // Helper to generate preview item for any entry
+  const generatePreviewItem = (
+    key: ExtendedPhaseKey,
+    label: string,
+    currentEntry: PhaseModelEntry
+  ) => {
+    const claudeAlias = getClaudeModelAlias(currentEntry);
+    const providerConfig: ClaudeCompatibleProvider | null = selectedProviderConfig ?? null;
+    const newEntry = findModelForClaudeAlias(providerConfig, claudeAlias, key);
+
+    // Get display names
+    const getCurrentDisplay = (): string => {
+      if (currentEntry.providerId) {
+        const provider = enabledProviders.find((p) => p.id === currentEntry.providerId);
+        if (provider) {
+          const model = provider.models?.find((m) => m.id === currentEntry.model);
+          return model?.displayName || currentEntry.model;
+        }
+      }
+      return CLAUDE_MODEL_DISPLAY[claudeAlias] || currentEntry.model;
+    };
+
+    const getNewDisplay = (): string => {
+      if (newEntry.providerId && selectedProviderConfig) {
+        const model = selectedProviderConfig.models?.find((m) => m.id === newEntry.model);
+        return model?.displayName || newEntry.model;
+      }
+      return CLAUDE_MODEL_DISPLAY[newEntry.model as ClaudeModelAlias] || newEntry.model;
+    };
+
+    const isChanged =
+      currentEntry.model !== newEntry.model ||
+      currentEntry.providerId !== newEntry.providerId ||
+      currentEntry.thinkingLevel !== newEntry.thinkingLevel;
+
+    return {
+      key,
+      label,
+      claudeAlias,
+      currentDisplay: getCurrentDisplay(),
+      newDisplay: getNewDisplay(),
+      newEntry,
+      isChanged,
+    };
+  };
+
+  // Generate preview of changes
+  const preview = useMemo(() => {
+    // Default feature model entry (first in the list)
+    const globalDefaultFeature = defaultFeatureModel ?? DEFAULT_GLOBAL_SETTINGS.defaultFeatureModel;
+    const currentDefaultFeature = projectDefaultFeatureModel || globalDefaultFeature;
+    const defaultFeaturePreview = generatePreviewItem(
+      DEFAULT_FEATURE_MODEL_KEY,
+      'Default Feature Model',
+      currentDefaultFeature
+    );
+
+    // Phase model entries
+    const phasePreview = ALL_PHASES.map((phase) => {
+      const globalEntry = phaseModels[phase] ?? DEFAULT_PHASE_MODELS[phase];
+      const currentEntry = projectOverrides[phase] || globalEntry;
+      return generatePreviewItem(phase, PHASE_LABELS[phase], currentEntry);
+    });
+
+    return [defaultFeaturePreview, ...phasePreview];
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- generatePreviewItem is stable helper
+  }, [
+    phaseModels,
+    projectOverrides,
+    selectedProviderConfig,
+    enabledProviders,
+    defaultFeatureModel,
+    projectDefaultFeatureModel,
+  ]);
+
+  // Count how many will change
+  const changeCount = preview.filter((p) => p.isChanged).length;
+
+  // Apply the bulk replace as project overrides
+  const handleApply = () => {
+    preview.forEach(({ key, newEntry, isChanged }) => {
+      if (isChanged) {
+        if (key === DEFAULT_FEATURE_MODEL_KEY) {
+          setProjectDefaultFeatureModel(project.id, newEntry);
+        } else {
+          setProjectPhaseModelOverride(project.id, key as PhaseModelKey, newEntry);
+        }
+      }
+    });
+    onOpenChange(false);
+  };
+
+  // Check if provider has all 3 Claude model mappings
+  const providerModelCoverage = useMemo(() => {
+    if (selectedProvider === 'anthropic') {
+      return { hasHaiku: true, hasSonnet: true, hasOpus: true, complete: true };
+    }
+    if (!selectedProviderConfig) {
+      return { hasHaiku: false, hasSonnet: false, hasOpus: false, complete: false };
+    }
+    const models = selectedProviderConfig.models || [];
+    const hasHaiku = models.some((m) => m.mapsToClaudeModel === 'haiku');
+    const hasSonnet = models.some((m) => m.mapsToClaudeModel === 'sonnet');
+    const hasOpus = models.some((m) => m.mapsToClaudeModel === 'opus');
+    return { hasHaiku, hasSonnet, hasOpus, complete: hasHaiku && hasSonnet && hasOpus };
+  }, [selectedProvider, selectedProviderConfig]);
+
+  const providerHasModels =
+    selectedProvider === 'anthropic' ||
+    (selectedProviderConfig && selectedProviderConfig.models?.length > 0);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Bulk Replace Models (Project Override)</DialogTitle>
+          <DialogDescription>
+            Set project-level overrides for all phases to use models from a specific provider. This
+            only affects this project.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4">
+          {/* Provider selector */}
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Target Provider</label>
+            <Select value={selectedProvider} onValueChange={setSelectedProvider}>
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select provider" />
+              </SelectTrigger>
+              <SelectContent>
+                {providerOptions.map((option) => (
+                  <SelectItem key={option.id} value={option.id}>
+                    <div className="flex items-center gap-2">
+                      {option.isNative ? (
+                        <Cloud className="w-4 h-4 text-brand-500" />
+                      ) : (
+                        <Server className="w-4 h-4 text-muted-foreground" />
+                      )}
+                      <span>{option.name}</span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Warning if provider has no models */}
+          {!providerHasModels && (
+            <div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20 text-sm">
+              <div className="flex items-center gap-2 text-yellow-600 dark:text-yellow-400">
+                <AlertCircle className="w-4 h-4" />
+                <span>This provider has no models configured.</span>
+              </div>
+            </div>
+          )}
+
+          {/* Warning if provider doesn't have all 3 mappings */}
+          {providerHasModels && !providerModelCoverage.complete && (
+            <div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20 text-sm">
+              <div className="flex items-center gap-2 text-yellow-600 dark:text-yellow-400">
+                <AlertCircle className="w-4 h-4" />
+                <span>
+                  This provider is missing mappings for:{' '}
+                  {[
+                    !providerModelCoverage.hasHaiku && 'Haiku',
+                    !providerModelCoverage.hasSonnet && 'Sonnet',
+                    !providerModelCoverage.hasOpus && 'Opus',
+                  ]
+                    .filter(Boolean)
+                    .join(', ')}
+                </span>
+              </div>
+            </div>
+          )}
+
+          {/* Preview of changes */}
+          {providerHasModels && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <label className="text-sm font-medium">Preview Changes</label>
+                <span className="text-xs text-muted-foreground">
+                  {changeCount} of {preview.length} will be overridden
+                </span>
+              </div>
+              <div className="border rounded-lg overflow-hidden max-h-[300px] overflow-y-auto">
+                <table className="w-full text-sm">
+                  <thead className="bg-muted/50 sticky top-0">
+                    <tr>
+                      <th className="text-left p-2 font-medium text-muted-foreground">Phase</th>
+                      <th className="text-left p-2 font-medium text-muted-foreground">Current</th>
+                      <th className="p-2"></th>
+                      <th className="text-left p-2 font-medium text-muted-foreground">
+                        New Override
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {preview.map(({ key, label, currentDisplay, newDisplay, isChanged }) => (
+                      <tr
+                        key={key}
+                        className={cn(
+                          'border-t border-border/50',
+                          isChanged ? 'bg-brand-500/5' : 'opacity-50',
+                          key === DEFAULT_FEATURE_MODEL_KEY && 'bg-accent/30'
+                        )}
+                      >
+                        <td className="p-2 font-medium">
+                          {label}
+                          {key === DEFAULT_FEATURE_MODEL_KEY && (
+                            <span className="ml-2 text-[10px] px-1.5 py-0.5 rounded bg-brand-500/20 text-brand-500">
+                              Feature Default
+                            </span>
+                          )}
+                        </td>
+                        <td className="p-2 text-muted-foreground">{currentDisplay}</td>
+                        <td className="p-2 text-center">
+                          {isChanged ? (
+                            <ArrowRight className="w-4 h-4 text-brand-500 inline" />
+                          ) : (
+                            <Check className="w-4 h-4 text-green-500 inline" />
+                          )}
+                        </td>
+                        <td className="p-2">
+                          <span className={cn(isChanged && 'text-brand-500 font-medium')}>
+                            {newDisplay}
+                          </span>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleApply} disabled={!providerHasModels || changeCount === 0}>
+            Apply Overrides ({changeCount})
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/project-claude-section.tsx b/temp_repo/apps/ui/src/components/views/project-settings-view/project-claude-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ceb13b73b66608b4bdf584e4b86b083d718fdddc
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/project-claude-section.tsx
@@ -0,0 +1,151 @@
+import { useAppStore } from '@/store/app-store';
+import { useSetupStore } from '@/store/setup-store';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Bot, Cloud, Server, Globe } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { Project } from '@/lib/electron';
+
+interface ProjectClaudeSectionProps {
+  project: Project;
+}
+
+export function ProjectClaudeSection({ project }: ProjectClaudeSectionProps) {
+  const {
+    claudeApiProfiles,
+    activeClaudeApiProfileId: globalActiveProfileId,
+    disabledProviders,
+    setProjectClaudeApiProfile,
+  } = useAppStore();
+  const { claudeAuthStatus } = useSetupStore();
+
+  // Get project-level override from project
+  const projectActiveProfileId = project.activeClaudeApiProfileId;
+
+  // Determine effective value for display
+  // undefined = use global, null = explicit direct, string = specific profile
+  const selectValue =
+    projectActiveProfileId === undefined
+      ? 'global'
+      : projectActiveProfileId === null
+        ? 'direct'
+        : projectActiveProfileId;
+
+  // Check if Claude is available
+  const isClaudeDisabled = disabledProviders.includes('claude');
+  const hasProfiles = claudeApiProfiles.length > 0;
+  const isClaudeAuthenticated = claudeAuthStatus?.authenticated;
+
+  // Get global profile name for display
+  const globalProfile = globalActiveProfileId
+    ? claudeApiProfiles.find((p) => p.id === globalActiveProfileId)
+    : null;
+  const globalProfileName = globalProfile?.name || 'Direct Anthropic API';
+
+  const handleChange = (value: string) => {
+    // 'global' -> undefined (use global)
+    // 'direct' -> null (explicit direct)
+    // profile id -> string (specific profile)
+    const newValue = value === 'global' ? undefined : value === 'direct' ? null : value;
+    setProjectClaudeApiProfile(project.id, newValue);
+  };
+
+  // Don't render if Claude is disabled or not available
+  if (isClaudeDisabled || (!hasProfiles && !isClaudeAuthenticated)) {
+    return (
+      <div className="text-center py-12 text-muted-foreground">
+        <Bot className="w-12 h-12 mx-auto mb-3 opacity-50" />
+        <p className="text-sm">Claude not configured</p>
+        <p className="text-xs mt-1">
+          Enable Claude and configure providers in global settings to use per-project overrides.
+        </p>
+      </div>
+    );
+  }
+
+  // Get the display text for current selection
+  const getDisplayText = () => {
+    if (selectValue === 'global') {
+      return `Using global setting: ${globalProfileName}`;
+    }
+    if (selectValue === 'direct') {
+      return 'Using direct Anthropic API (API key or Claude Max plan)';
+    }
+    const selectedProfile = claudeApiProfiles.find((p) => p.id === selectValue);
+    return `Using ${selectedProfile?.name || 'custom'} endpoint`;
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Bot className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Claude Provider</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Override the Claude provider for this project only.
+        </p>
+      </div>
+
+      <div className="p-6 space-y-4">
+        <div className="space-y-2">
+          <Label className="text-sm font-medium">Active Provider for This Project</Label>
+          <Select value={selectValue} onValueChange={handleChange}>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Select provider" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="global">
+                <div className="flex items-center gap-2">
+                  <Globe className="w-4 h-4 text-muted-foreground" />
+                  <span>Use Global Setting</span>
+                  <span className="text-xs text-muted-foreground ml-1">({globalProfileName})</span>
+                </div>
+              </SelectItem>
+              <SelectItem value="direct">
+                <div className="flex items-center gap-2">
+                  <Cloud className="w-4 h-4 text-brand-500" />
+                  <span>Direct Anthropic API</span>
+                </div>
+              </SelectItem>
+              {claudeApiProfiles.map((profile) => (
+                <SelectItem key={profile.id} value={profile.id}>
+                  <div className="flex items-center gap-2">
+                    <Server className="w-4 h-4 text-muted-foreground" />
+                    <span>{profile.name}</span>
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <p className="text-xs text-muted-foreground">{getDisplayText()}</p>
+        </div>
+
+        {/* Info about what this affects */}
+        <div className="text-xs text-muted-foreground/70 pt-2 border-t border-border/30">
+          <p>This setting affects all Claude operations for this project including:</p>
+          <ul className="list-disc list-inside mt-1 space-y-0.5">
+            <li>Agent chat and feature implementation</li>
+            <li>Code analysis and suggestions</li>
+            <li>Commit message generation</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/project-identity-section.tsx b/temp_repo/apps/ui/src/components/views/project-settings-view/project-identity-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dcc2fca6e2a94572b0ea7801077333bc71c40b16
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/project-identity-section.tsx
@@ -0,0 +1,225 @@
+import { useState, useRef, useEffect } from 'react';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Palette, Upload, X, ImageIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import { IconPicker } from '@/components/layout/project-switcher/components/icon-picker';
+import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { toast } from 'sonner';
+import type { Project } from '@/lib/electron';
+
+interface ProjectIdentitySectionProps {
+  project: Project;
+}
+
+export function ProjectIdentitySection({ project }: ProjectIdentitySectionProps) {
+  const { setProjectIcon, setProjectName, setProjectCustomIcon } = useAppStore();
+  const [projectName, setProjectNameLocal] = useState(project.name || '');
+  const [projectIcon, setProjectIconLocal] = useState<string | null>(project.icon || null);
+  const [customIconPath, setCustomIconPathLocal] = useState<string | null>(
+    project.customIconPath || null
+  );
+  const [isUploadingIcon, setIsUploadingIcon] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Sync local state when project changes
+  useEffect(() => {
+    setProjectNameLocal(project.name || '');
+    setProjectIconLocal(project.icon || null);
+    setCustomIconPathLocal(project.customIconPath || null);
+  }, [project]);
+
+  // Auto-save when values change
+  const handleNameChange = (name: string) => {
+    setProjectNameLocal(name);
+    if (name.trim() && name.trim() !== project.name) {
+      setProjectName(project.id, name.trim());
+    }
+  };
+
+  const handleIconChange = (icon: string | null) => {
+    setProjectIconLocal(icon);
+    setProjectIcon(project.id, icon);
+  };
+
+  const handleCustomIconChange = (path: string | null) => {
+    setCustomIconPathLocal(path);
+    setProjectCustomIcon(project.id, path);
+    // Clear Lucide icon when custom icon is set
+    if (path) {
+      setProjectIconLocal(null);
+      setProjectIcon(project.id, null);
+    }
+  };
+
+  const handleCustomIconUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // Validate file type
+    const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+    if (!validTypes.includes(file.type)) {
+      toast.error('Invalid file type', {
+        description: 'Please upload a PNG, JPG, GIF, or WebP image.',
+      });
+      return;
+    }
+
+    // Validate file size (max 5MB for icons - allows animated GIFs)
+    if (file.size > 5 * 1024 * 1024) {
+      toast.error('File too large', {
+        description: 'Please upload an image smaller than 5MB.',
+      });
+      return;
+    }
+
+    setIsUploadingIcon(true);
+    try {
+      // Convert to base64
+      const reader = new FileReader();
+      reader.onload = async () => {
+        try {
+          const base64Data = reader.result as string;
+          const result = await getHttpApiClient().saveImageToTemp(
+            base64Data,
+            `project-icon-${file.name}`,
+            file.type,
+            project.path
+          );
+          if (result.success && result.path) {
+            handleCustomIconChange(result.path);
+            toast.success('Icon uploaded successfully');
+          } else {
+            toast.error('Failed to upload icon', {
+              description: result.error || 'Please try again.',
+            });
+          }
+        } catch {
+          toast.error('Failed to upload icon', {
+            description: 'Network error. Please try again.',
+          });
+        } finally {
+          setIsUploadingIcon(false);
+        }
+      };
+      reader.onerror = () => {
+        toast.error('Failed to read file', {
+          description: 'Please try again with a different file.',
+        });
+        setIsUploadingIcon(false);
+      };
+      reader.readAsDataURL(file);
+    } catch {
+      toast.error('Failed to upload icon');
+      setIsUploadingIcon(false);
+    }
+  };
+
+  const handleRemoveCustomIcon = () => {
+    handleCustomIconChange(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Palette className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Project Identity</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Customize how your project appears in the sidebar and project switcher.
+        </p>
+      </div>
+      <div className="p-6 space-y-6">
+        {/* Project Name */}
+        <div className="space-y-2">
+          <Label htmlFor="project-name-settings">Project Name</Label>
+          <Input
+            id="project-name-settings"
+            value={projectName}
+            onChange={(e) => handleNameChange(e.target.value)}
+            placeholder="Enter project name"
+          />
+        </div>
+
+        {/* Project Icon */}
+        <div className="space-y-2">
+          <Label>Project Icon</Label>
+          <p className="text-xs text-muted-foreground mb-2">
+            Choose a preset icon or upload a custom image
+          </p>
+
+          {/* Custom Icon Upload */}
+          <div className="mb-4">
+            <div className="flex items-center gap-3">
+              {customIconPath ? (
+                <div className="relative">
+                  <img
+                    src={getAuthenticatedImageUrl(customIconPath, project.path)}
+                    alt="Custom project icon"
+                    className="w-12 h-12 rounded-lg object-cover border border-border"
+                  />
+                  <button
+                    type="button"
+                    onClick={handleRemoveCustomIcon}
+                    className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center hover:bg-destructive/90"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                </div>
+              ) : (
+                <div className="w-12 h-12 rounded-lg border border-dashed border-border flex items-center justify-center bg-accent/30">
+                  <ImageIcon className="w-5 h-5 text-muted-foreground" />
+                </div>
+              )}
+              <div className="flex-1">
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/jpeg,image/png,image/gif,image/webp"
+                  onChange={handleCustomIconUpload}
+                  className="hidden"
+                  id="custom-icon-upload"
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={isUploadingIcon}
+                  className="gap-1.5"
+                >
+                  <Upload className="w-3.5 h-3.5" />
+                  {isUploadingIcon ? 'Uploading...' : 'Upload Custom Icon'}
+                </Button>
+                <p className="text-xs text-muted-foreground mt-1">
+                  PNG, JPG, GIF or WebP. Max 5MB.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Preset Icon Picker - only show if no custom icon */}
+          {!customIconPath && (
+            <IconPicker selectedIcon={projectIcon} onSelectIcon={handleIconChange} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/project-models-section.tsx b/temp_repo/apps/ui/src/components/views/project-settings-view/project-models-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..65bf95161a24e4219e17e5794cbd7b03c76c5773
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/project-models-section.tsx
@@ -0,0 +1,505 @@
+import { useState } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { Button } from '@/components/ui/button';
+import { Workflow, RotateCcw, Globe, Check, Replace, Sparkles } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { Project } from '@/lib/electron';
+import { PhaseModelSelector } from '@/components/views/settings-view/model-defaults/phase-model-selector';
+import { ProjectBulkReplaceDialog } from './project-bulk-replace-dialog';
+import type { PhaseModelKey, PhaseModelEntry } from '@automaker/types';
+import { DEFAULT_PHASE_MODELS, DEFAULT_GLOBAL_SETTINGS } from '@automaker/types';
+
+interface ProjectModelsSectionProps {
+  project: Project;
+}
+
+interface PhaseConfig {
+  key: PhaseModelKey;
+  label: string;
+  description: string;
+}
+
+const QUICK_TASKS: PhaseConfig[] = [
+  {
+    key: 'enhancementModel',
+    label: 'Feature Enhancement',
+    description: 'Improves feature names and descriptions',
+  },
+  {
+    key: 'fileDescriptionModel',
+    label: 'File Descriptions',
+    description: 'Generates descriptions for context files',
+  },
+  {
+    key: 'imageDescriptionModel',
+    label: 'Image Descriptions',
+    description: 'Analyzes and describes context images',
+  },
+  {
+    key: 'commitMessageModel',
+    label: 'Commit Messages',
+    description: 'Generates git commit messages from diffs',
+  },
+];
+
+const VALIDATION_TASKS: PhaseConfig[] = [
+  {
+    key: 'validationModel',
+    label: 'GitHub Issue Validation',
+    description: 'Validates and improves GitHub issues',
+  },
+];
+
+const GENERATION_TASKS: PhaseConfig[] = [
+  {
+    key: 'specGenerationModel',
+    label: 'App Specification',
+    description: 'Generates full application specifications',
+  },
+  {
+    key: 'featureGenerationModel',
+    label: 'Feature Generation',
+    description: 'Creates features from specifications',
+  },
+  {
+    key: 'backlogPlanningModel',
+    label: 'Backlog Planning',
+    description: 'Reorganizes and prioritizes backlog',
+  },
+  {
+    key: 'projectAnalysisModel',
+    label: 'Project Analysis',
+    description: 'Analyzes project structure for suggestions',
+  },
+  {
+    key: 'ideationModel',
+    label: 'Ideation',
+    description: 'Model for ideation view (generating AI suggestions)',
+  },
+];
+
+const MEMORY_TASKS: PhaseConfig[] = [
+  {
+    key: 'memoryExtractionModel',
+    label: 'Memory Extraction',
+    description: 'Extracts learnings from completed agent sessions',
+  },
+];
+
+/**
+ * Default feature model override section for per-project settings.
+ */
+function FeatureDefaultModelOverrideSection({ project }: { project: Project }) {
+  const {
+    defaultFeatureModel: globalDefaultFeatureModel,
+    setProjectDefaultFeatureModel,
+    claudeCompatibleProviders,
+  } = useAppStore();
+
+  const globalValue: PhaseModelEntry =
+    globalDefaultFeatureModel ?? DEFAULT_GLOBAL_SETTINGS.defaultFeatureModel;
+  const projectOverride = project.defaultFeatureModel;
+  const hasOverride = !!projectOverride;
+  const effectiveValue = projectOverride || globalValue;
+
+  /**
+   * Formats a user-friendly model label using provider metadata when available,
+   * falling back to known Claude aliases or the raw model id.
+   */
+  const getModelDisplayName = (entry: PhaseModelEntry): string => {
+    if (entry.providerId) {
+      const provider = (claudeCompatibleProviders || []).find((p) => p.id === entry.providerId);
+      if (provider) {
+        const model = provider.models?.find((m) => m.id === entry.model);
+        if (model) {
+          return `${model.displayName} (${provider.name})`;
+        }
+      }
+    }
+    // Default to model ID for built-in models (both short aliases and canonical IDs)
+    const modelMap: Record<string, string> = {
+      haiku: 'Claude Haiku',
+      sonnet: 'Claude Sonnet',
+      opus: 'Claude Opus',
+      'claude-haiku': 'Claude Haiku',
+      'claude-sonnet': 'Claude Sonnet',
+      'claude-opus': 'Claude Opus',
+    };
+    return modelMap[entry.model] || entry.model;
+  };
+
+  /**
+   * Clears the project-level model override for this scope.
+   */
+  const handleClearOverride = () => {
+    setProjectDefaultFeatureModel(project.id, null);
+  };
+
+  /**
+   * Sets the project-level model override for this scope.
+   */
+  const handleSetOverride = (entry: PhaseModelEntry) => {
+    setProjectDefaultFeatureModel(project.id, entry);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium text-foreground">Feature Defaults</h3>
+        <p className="text-xs text-muted-foreground">
+          Default model for new feature cards in this project
+        </p>
+      </div>
+      <div className="space-y-3">
+        <div
+          className={cn(
+            'flex items-center justify-between p-4 rounded-xl',
+            'bg-accent/20 border',
+            hasOverride ? 'border-brand-500/30 bg-brand-500/5' : 'border-border/30',
+            'hover:bg-accent/30 transition-colors'
+          )}
+        >
+          <div className="flex-1 pr-4">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-lg bg-brand-500/10 flex items-center justify-center">
+                <Sparkles className="w-4 h-4 text-brand-500" />
+              </div>
+              <h4 className="text-sm font-medium text-foreground">Default Feature Model</h4>
+              {hasOverride ? (
+                <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-brand-500/20 text-brand-500">
+                  Override
+                </span>
+              ) : (
+                <span className="flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted text-muted-foreground">
+                  <Globe className="w-3 h-3" />
+                  Global
+                </span>
+              )}
+            </div>
+            <p className="text-xs text-muted-foreground mt-1 ml-10">
+              Model and thinking level used when creating new feature cards
+            </p>
+            {hasOverride && (
+              <p className="text-xs text-brand-500 mt-1 ml-10">
+                Using: {getModelDisplayName(effectiveValue)}
+              </p>
+            )}
+            {!hasOverride && (
+              <p className="text-xs text-muted-foreground/70 mt-1 ml-10">
+                Using global: {getModelDisplayName(globalValue)}
+              </p>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2">
+            {hasOverride && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleClearOverride}
+                className="h-8 px-2 text-xs text-muted-foreground hover:text-foreground"
+              >
+                <RotateCcw className="w-3.5 h-3.5 mr-1" />
+                Reset
+              </Button>
+            )}
+            <PhaseModelSelector
+              compact
+              value={effectiveValue}
+              onChange={handleSetOverride}
+              align="end"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Renders a single phase override row, showing the effective model
+ * (project override or global default) and wiring selector/reset actions.
+ */
+function PhaseOverrideItem({
+  phase,
+  project,
+  globalValue,
+  projectOverride,
+}: {
+  phase: PhaseConfig;
+  project: Project;
+  globalValue: PhaseModelEntry;
+  projectOverride?: PhaseModelEntry;
+}) {
+  const { setProjectPhaseModelOverride, claudeCompatibleProviders } = useAppStore();
+
+  const hasOverride = !!projectOverride;
+  const effectiveValue = projectOverride || globalValue;
+
+  /**
+   * Formats a user-friendly model label using provider metadata when available,
+   * falling back to known Claude aliases or the raw model id.
+   */
+  const getModelDisplayName = (entry: PhaseModelEntry): string => {
+    if (entry.providerId) {
+      const provider = (claudeCompatibleProviders || []).find((p) => p.id === entry.providerId);
+      if (provider) {
+        const model = provider.models?.find((m) => m.id === entry.model);
+        if (model) {
+          return `${model.displayName} (${provider.name})`;
+        }
+      }
+    }
+    // Default to model ID for built-in models (both short aliases and canonical IDs)
+    const modelMap: Record<string, string> = {
+      haiku: 'Claude Haiku',
+      sonnet: 'Claude Sonnet',
+      opus: 'Claude Opus',
+      'claude-haiku': 'Claude Haiku',
+      'claude-sonnet': 'Claude Sonnet',
+      'claude-opus': 'Claude Opus',
+    };
+    return modelMap[entry.model] || entry.model;
+  };
+
+  /**
+   * Clears the project-level model override for this scope.
+   */
+  const handleClearOverride = () => {
+    setProjectPhaseModelOverride(project.id, phase.key, null);
+  };
+
+  /**
+   * Sets the project-level model override for this scope.
+   */
+  const handleSetOverride = (entry: PhaseModelEntry) => {
+    setProjectPhaseModelOverride(project.id, phase.key, entry);
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between p-4 rounded-xl',
+        'bg-accent/20 border',
+        hasOverride ? 'border-brand-500/30 bg-brand-500/5' : 'border-border/30',
+        'hover:bg-accent/30 transition-colors'
+      )}
+    >
+      <div className="flex-1 pr-4">
+        <div className="flex items-center gap-2">
+          <h4 className="text-sm font-medium text-foreground">{phase.label}</h4>
+          {hasOverride ? (
+            <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-brand-500/20 text-brand-500">
+              Override
+            </span>
+          ) : (
+            <span className="flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded bg-muted text-muted-foreground">
+              <Globe className="w-3 h-3" />
+              Global
+            </span>
+          )}
+        </div>
+        <p className="text-xs text-muted-foreground">{phase.description}</p>
+        {hasOverride && (
+          <p className="text-xs text-brand-500 mt-1">
+            Using: {getModelDisplayName(effectiveValue)}
+          </p>
+        )}
+        {!hasOverride && (
+          <p className="text-xs text-muted-foreground/70 mt-1">
+            Using global: {getModelDisplayName(globalValue)}
+          </p>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2">
+        {hasOverride && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleClearOverride}
+            className="h-8 px-2 text-xs text-muted-foreground hover:text-foreground"
+          >
+            <RotateCcw className="w-3.5 h-3.5 mr-1" />
+            Reset
+          </Button>
+        )}
+        <PhaseModelSelector
+          compact
+          value={effectiveValue}
+          onChange={handleSetOverride}
+          align="end"
+        />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Renders a titled group of phase override rows and resolves each phase's
+ * global default model with a fallback to DEFAULT_PHASE_MODELS.
+ */
+function PhaseGroup({
+  title,
+  subtitle,
+  phases,
+  project,
+}: {
+  title: string;
+  subtitle: string;
+  phases: PhaseConfig[];
+  project: Project;
+}) {
+  const { phaseModels } = useAppStore();
+  const projectOverrides = project.phaseModelOverrides || {};
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium text-foreground">{title}</h3>
+        <p className="text-xs text-muted-foreground">{subtitle}</p>
+      </div>
+      <div className="space-y-3">
+        {phases.map((phase) => (
+          <PhaseOverrideItem
+            key={phase.key}
+            phase={phase}
+            project={project}
+            globalValue={phaseModels[phase.key] ?? DEFAULT_PHASE_MODELS[phase.key]}
+            projectOverride={projectOverrides[phase.key]}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Renders the per-project model overrides UI for all phase models.
+ */
+export function ProjectModelsSection({ project }: ProjectModelsSectionProps) {
+  const { clearAllProjectPhaseModelOverrides, claudeCompatibleProviders } = useAppStore();
+  const [showBulkReplace, setShowBulkReplace] = useState(false);
+
+  // Count how many overrides are set (including defaultFeatureModel)
+  const phaseOverrideCount = Object.keys(project.phaseModelOverrides || {}).length;
+  const hasDefaultFeatureModelOverride = !!project.defaultFeatureModel;
+  const overrideCount = phaseOverrideCount + (hasDefaultFeatureModelOverride ? 1 : 0);
+
+  // Check if there are any enabled ClaudeCompatibleProviders
+  const hasEnabledProviders =
+    claudeCompatibleProviders && claudeCompatibleProviders.some((p) => p.enabled !== false);
+
+  /**
+   * Clears all project-level phase model overrides for this project.
+   */
+  const handleClearAll = () => {
+    clearAllProjectPhaseModelOverrides(project.id);
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      {/* Header */}
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <Workflow className="w-5 h-5 text-brand-500" />
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold text-foreground tracking-tight">
+                Model Overrides
+              </h2>
+              <p className="text-sm text-muted-foreground/80">
+                Override AI models for this project only
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            {hasEnabledProviders && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowBulkReplace(true)}
+                className="gap-2"
+              >
+                <Replace className="w-3.5 h-3.5" />
+                Bulk Replace
+              </Button>
+            )}
+            {overrideCount > 0 && (
+              <Button variant="outline" size="sm" onClick={handleClearAll} className="gap-2">
+                <RotateCcw className="w-3.5 h-3.5" />
+                Reset All ({overrideCount})
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Bulk Replace Dialog */}
+      <ProjectBulkReplaceDialog
+        open={showBulkReplace}
+        onOpenChange={setShowBulkReplace}
+        project={project}
+      />
+
+      {/* Info Banner */}
+      <div className="px-6 pt-6">
+        <div className="p-3 rounded-lg bg-brand-500/5 border border-brand-500/20 text-sm text-muted-foreground">
+          <div className="flex items-center gap-2 mb-1">
+            <Check className="w-4 h-4 text-brand-500" />
+            <span className="font-medium text-foreground">Per-Phase Overrides</span>
+          </div>
+          Override specific phases to use different models for this project. Phases without
+          overrides use the global settings.
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="p-6 space-y-8">
+        {/* Feature Defaults */}
+        <FeatureDefaultModelOverrideSection project={project} />
+
+        {/* Quick Tasks */}
+        <PhaseGroup
+          title="Quick Tasks"
+          subtitle="Fast models recommended for speed and cost savings"
+          phases={QUICK_TASKS}
+          project={project}
+        />
+
+        {/* Validation Tasks */}
+        <PhaseGroup
+          title="Validation Tasks"
+          subtitle="Smart models recommended for accuracy"
+          phases={VALIDATION_TASKS}
+          project={project}
+        />
+
+        {/* Generation Tasks */}
+        <PhaseGroup
+          title="Generation Tasks"
+          subtitle="Powerful models recommended for quality output"
+          phases={GENERATION_TASKS}
+          project={project}
+        />
+
+        {/* Memory Tasks */}
+        <PhaseGroup
+          title="Memory Tasks"
+          subtitle="Fast models recommended for learning extraction"
+          phases={MEMORY_TASKS}
+          project={project}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/project-settings-view.tsx b/temp_repo/apps/ui/src/components/views/project-settings-view/project-settings-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c31ea0ebecaa8f222697f6664f6e1ce03517f677
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/project-settings-view.tsx
@@ -0,0 +1,211 @@
+import { useState, useEffect } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { Settings, FolderOpen, Menu, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ProjectIdentitySection } from './project-identity-section';
+import { ProjectThemeSection } from './project-theme-section';
+import { WorktreePreferencesSection } from './worktree-preferences-section';
+import { CommandsAndScriptsSection } from './commands-and-scripts-section';
+import { ProjectModelsSection } from './project-models-section';
+import { DataManagementSection } from './data-management-section';
+import { OrphanedFeaturesSection } from './orphaned-features-section';
+import { DangerZoneSection } from '../settings-view/danger-zone/danger-zone-section';
+import { DeleteProjectDialog } from '../settings-view/components/delete-project-dialog';
+import { RemoveFromAutomakerDialog } from '../settings-view/components/remove-from-automaker-dialog';
+import { ProjectSettingsNavigation } from './components/project-settings-navigation';
+import { useProjectSettingsView } from './hooks/use-project-settings-view';
+import type { Project as ElectronProject } from '@/lib/electron';
+import { useSearch } from '@tanstack/react-router';
+import type { ProjectSettingsViewId } from './hooks/use-project-settings-view';
+
+// Breakpoint constant for mobile (matches Tailwind lg breakpoint)
+const LG_BREAKPOINT = 1024;
+
+// Convert to the shared types used by components
+interface SettingsProject {
+  id: string;
+  name: string;
+  path: string;
+  theme?: string;
+  icon?: string;
+  customIconPath?: string;
+}
+
+export function ProjectSettingsView() {
+  const { currentProject, moveProjectToTrash, removeProject } = useAppStore();
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [showRemoveFromAutomakerDialog, setShowRemoveFromAutomakerDialog] = useState(false);
+
+  // Read the optional section search param to support deep-linking to a specific section
+  const search = useSearch({ strict: false }) as { section?: ProjectSettingsViewId };
+  // Map legacy 'commands' and 'scripts' IDs to the combined 'commands-scripts' section
+  const resolvedSection: ProjectSettingsViewId | undefined =
+    search.section === 'commands' || search.section === 'scripts'
+      ? 'commands-scripts'
+      : search.section;
+
+  // Use project settings view navigation hook
+  const { activeView, navigateTo } = useProjectSettingsView({
+    initialView: resolvedSection ?? 'identity',
+  });
+
+  // Mobile navigation state - default to showing on desktop, hidden on mobile
+  const [showNavigation, setShowNavigation] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth >= LG_BREAKPOINT;
+    }
+    return true;
+  });
+
+  // Auto-close navigation on mobile when a section is selected
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.innerWidth < LG_BREAKPOINT) {
+      setShowNavigation(false);
+    }
+  }, [activeView]);
+
+  // Handle window resize to show/hide navigation appropriately
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= LG_BREAKPOINT) {
+        setShowNavigation(true);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // Convert electron Project to settings-view Project type
+  const convertProject = (project: ElectronProject | null): SettingsProject | null => {
+    if (!project) return null;
+    return {
+      id: project.id,
+      name: project.name,
+      path: project.path,
+      theme: project.theme,
+      icon: project.icon,
+      customIconPath: project.customIconPath,
+    };
+  };
+
+  const settingsProject = convertProject(currentProject);
+
+  // Render the active section based on current view
+  const renderActiveSection = () => {
+    if (!currentProject) return null;
+
+    switch (activeView) {
+      case 'identity':
+        return <ProjectIdentitySection project={currentProject} />;
+      case 'theme':
+        return <ProjectThemeSection project={currentProject} />;
+      case 'worktrees':
+        return <WorktreePreferencesSection project={currentProject} />;
+      case 'commands':
+      case 'scripts':
+      case 'commands-scripts':
+        return <CommandsAndScriptsSection project={currentProject} />;
+      case 'claude':
+        return <ProjectModelsSection project={currentProject} />;
+      case 'data':
+        return <DataManagementSection project={currentProject} />;
+      case 'orphaned':
+        return <OrphanedFeaturesSection project={currentProject} />;
+      case 'danger':
+        return (
+          <DangerZoneSection
+            project={settingsProject}
+            onDeleteClick={() => setShowDeleteDialog(true)}
+            onRemoveFromAutomakerClick={() => setShowRemoveFromAutomakerDialog(true)}
+          />
+        );
+      default:
+        return <ProjectIdentitySection project={currentProject} />;
+    }
+  };
+
+  // Show message if no project is selected
+  if (!currentProject) {
+    return (
+      <div
+        className="flex-1 flex flex-col overflow-hidden content-bg"
+        data-testid="project-settings-view"
+      >
+        <div className="flex-1 flex items-center justify-center p-8">
+          <div className="text-center max-w-md">
+            <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-muted/50 flex items-center justify-center">
+              <FolderOpen className="w-8 h-8 text-muted-foreground/50" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground mb-2">No Project Selected</h2>
+            <p className="text-sm text-muted-foreground">
+              Select a project from the sidebar to configure project-specific settings.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex-1 flex flex-col overflow-hidden content-bg"
+      data-testid="project-settings-view"
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
+        <div className="flex items-center gap-3">
+          <Settings className="w-5 h-5 text-muted-foreground" />
+          <div>
+            <h1 className="text-xl font-bold">Project Settings</h1>
+            <p className="text-sm text-muted-foreground">
+              Configure settings for {currentProject.name}
+            </p>
+          </div>
+        </div>
+        {/* Mobile menu button - far right */}
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setShowNavigation(!showNavigation)}
+          className="lg:hidden h-8 w-8 p-0"
+          aria-label={showNavigation ? 'Close navigation menu' : 'Open navigation menu'}
+        >
+          {showNavigation ? <X className="w-4 h-4" /> : <Menu className="w-4 h-4" />}
+        </Button>
+      </div>
+
+      {/* Content Area with Sidebar */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Side Navigation */}
+        <ProjectSettingsNavigation
+          activeSection={activeView}
+          onNavigate={navigateTo}
+          isOpen={showNavigation}
+          onClose={() => setShowNavigation(false)}
+        />
+
+        {/* Content Panel - Shows only the active section */}
+        <div className="flex-1 overflow-y-auto p-4 lg:p-8">
+          <div className="max-w-4xl mx-auto">{renderActiveSection()}</div>
+        </div>
+      </div>
+
+      {/* Delete Project Confirmation Dialog */}
+      <DeleteProjectDialog
+        open={showDeleteDialog}
+        onOpenChange={setShowDeleteDialog}
+        project={currentProject}
+        onConfirm={moveProjectToTrash}
+      />
+
+      {/* Remove from Automaker Confirmation Dialog */}
+      <RemoveFromAutomakerDialog
+        open={showRemoveFromAutomakerDialog}
+        onOpenChange={setShowRemoveFromAutomakerDialog}
+        project={currentProject}
+        onConfirm={removeProject}
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/project-theme-section.tsx b/temp_repo/apps/ui/src/components/views/project-settings-view/project-theme-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5f74a81bcf072e7c89c59450b915f44ffd4d3874
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/project-theme-section.tsx
@@ -0,0 +1,358 @@
+import { useState, useEffect } from 'react';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Palette, Moon, Sun, Type } from 'lucide-react';
+import { darkThemes, lightThemes, type Theme } from '@/config/theme-options';
+import {
+  UI_SANS_FONT_OPTIONS,
+  UI_MONO_FONT_OPTIONS,
+  DEFAULT_FONT_VALUE,
+} from '@/config/ui-font-options';
+import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import { FontSelector } from '@/components/shared';
+import type { Project } from '@/lib/electron';
+
+interface ProjectThemeSectionProps {
+  project: Project;
+}
+
+export function ProjectThemeSection({ project }: ProjectThemeSectionProps) {
+  const {
+    theme: globalTheme,
+    fontFamilySans: globalFontSans,
+    fontFamilyMono: globalFontMono,
+    setProjectTheme,
+    setProjectFontSans,
+    setProjectFontMono,
+  } = useAppStore();
+
+  // Theme state
+  const projectTheme = project.theme as Theme | undefined;
+  const hasCustomTheme = projectTheme !== undefined;
+  const effectiveTheme = projectTheme || globalTheme;
+
+  // Determine if current theme is light or dark
+  const isLightTheme = lightThemes.some((t) => t.value === effectiveTheme);
+  const [activeTab, setActiveTab] = useState<'dark' | 'light'>(isLightTheme ? 'light' : 'dark');
+
+  // Helper to validate fonts against available options
+  const isValidSansFont = (font?: string): boolean =>
+    !!font && UI_SANS_FONT_OPTIONS.some((opt) => opt.value === font);
+  const isValidMonoFont = (font?: string): boolean =>
+    !!font && UI_MONO_FONT_OPTIONS.some((opt) => opt.value === font);
+
+  // Helper to get initial font value with validation
+  const getInitialFontValue = (font: string | undefined, validator: (f?: string) => boolean) =>
+    font && validator(font) ? font : DEFAULT_FONT_VALUE;
+
+  // Font local state - tracks what's selected when using custom fonts
+  // Falls back to default if stored font is not in available options
+  const [fontSansLocal, setFontSansLocal] = useState<string>(() =>
+    getInitialFontValue(project.fontFamilySans, isValidSansFont)
+  );
+  const [fontMonoLocal, setFontMonoLocal] = useState<string>(() =>
+    getInitialFontValue(project.fontFamilyMono, isValidMonoFont)
+  );
+
+  // Sync state when project changes
+  useEffect(() => {
+    setFontSansLocal(getInitialFontValue(project.fontFamilySans, isValidSansFont));
+    setFontMonoLocal(getInitialFontValue(project.fontFamilyMono, isValidMonoFont));
+    // Also sync the active tab based on current theme
+    const currentIsLight = lightThemes.some((t) => t.value === (project.theme || globalTheme));
+    setActiveTab(currentIsLight ? 'light' : 'dark');
+  }, [project, globalTheme]);
+
+  // Font state - check if project has custom fonts set
+  const hasCustomFontSans = project.fontFamilySans !== undefined;
+  const hasCustomFontMono = project.fontFamilyMono !== undefined;
+
+  const themesToShow = activeTab === 'dark' ? darkThemes : lightThemes;
+
+  // Theme handlers
+  const handleThemeChange = (theme: Theme) => {
+    setProjectTheme(project.id, theme);
+  };
+
+  const handleUseGlobalTheme = (checked: boolean) => {
+    if (checked) {
+      setProjectTheme(project.id, null);
+    } else {
+      setProjectTheme(project.id, globalTheme);
+    }
+  };
+
+  // Font handlers
+  const handleUseGlobalFontSans = (checked: boolean) => {
+    if (checked) {
+      // Clear project font to use global
+      setProjectFontSans(project.id, null);
+      setFontSansLocal(DEFAULT_FONT_VALUE);
+    } else {
+      // Set explicit project override - use 'default' value to indicate explicit default choice
+      const fontToSet = globalFontSans || DEFAULT_FONT_VALUE;
+      setFontSansLocal(fontToSet);
+      // Store the actual value (including 'default') so hasCustomFontSans stays true
+      setProjectFontSans(project.id, fontToSet);
+    }
+  };
+
+  const handleUseGlobalFontMono = (checked: boolean) => {
+    if (checked) {
+      // Clear project font to use global
+      setProjectFontMono(project.id, null);
+      setFontMonoLocal(DEFAULT_FONT_VALUE);
+    } else {
+      // Set explicit project override - use 'default' value to indicate explicit default choice
+      const fontToSet = globalFontMono || DEFAULT_FONT_VALUE;
+      setFontMonoLocal(fontToSet);
+      // Store the actual value (including 'default') so hasCustomFontMono stays true
+      setProjectFontMono(project.id, fontToSet);
+    }
+  };
+
+  const handleFontSansChange = (value: string) => {
+    setFontSansLocal(value);
+    // Store the actual value (including 'default') - only null clears to use global
+    setProjectFontSans(project.id, value);
+  };
+
+  const handleFontMonoChange = (value: string) => {
+    setFontMonoLocal(value);
+    // Store the actual value (including 'default') - only null clears to use global
+    setProjectFontMono(project.id, value);
+  };
+
+  // Get display label for global font
+  const getGlobalFontSansLabel = () => {
+    if (!globalFontSans) return 'Default (Geist Sans)';
+    const option = UI_SANS_FONT_OPTIONS.find((o) => o.value === globalFontSans);
+    return option?.label || globalFontSans;
+  };
+
+  const getGlobalFontMonoLabel = () => {
+    if (!globalFontMono) return 'Default (Geist Mono)';
+    const option = UI_MONO_FONT_OPTIONS.find((o) => o.value === globalFontMono);
+    return option?.label || globalFontMono;
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Palette className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Theme & Fonts</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Customize the appearance for this project.
+        </p>
+      </div>
+      <div className="p-6 space-y-6">
+        {/* Use Global Theme Toggle */}
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="use-global-theme"
+            checked={!hasCustomTheme}
+            onCheckedChange={handleUseGlobalTheme}
+            className="mt-1"
+            data-testid="use-global-theme-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="use-global-theme"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <Palette className="w-4 h-4 text-brand-500" />
+              Use Global Theme
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              When enabled, this project will use the global theme setting. Disable to set a
+              project-specific theme.
+            </p>
+          </div>
+        </div>
+
+        {/* Theme Selection - only show if not using global theme */}
+        {hasCustomTheme && (
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <Label className="text-foreground font-medium">Project Theme</Label>
+              {/* Dark/Light Tabs */}
+              <div className="flex gap-1 p-1 rounded-lg bg-accent/30">
+                <button
+                  onClick={() => setActiveTab('dark')}
+                  className={cn(
+                    'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200',
+                    activeTab === 'dark'
+                      ? 'bg-brand-500 text-white shadow-sm'
+                      : 'text-muted-foreground hover:text-foreground'
+                  )}
+                >
+                  <Moon className="w-3.5 h-3.5" />
+                  Dark
+                </button>
+                <button
+                  onClick={() => setActiveTab('light')}
+                  className={cn(
+                    'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200',
+                    activeTab === 'light'
+                      ? 'bg-brand-500 text-white shadow-sm'
+                      : 'text-muted-foreground hover:text-foreground'
+                  )}
+                >
+                  <Sun className="w-3.5 h-3.5" />
+                  Light
+                </button>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+              {themesToShow.map(({ value, label, Icon, testId, color }) => {
+                const isActive = effectiveTheme === value;
+                return (
+                  <button
+                    key={value}
+                    onClick={() => handleThemeChange(value)}
+                    className={cn(
+                      'group flex items-center justify-center gap-2.5 px-4 py-3.5 rounded-xl',
+                      'text-sm font-medium transition-all duration-200 ease-out',
+                      isActive
+                        ? [
+                            'bg-gradient-to-br from-brand-500/15 to-brand-600/10',
+                            'border-2 border-brand-500/40',
+                            'text-foreground',
+                            'shadow-md shadow-brand-500/10',
+                          ]
+                        : [
+                            'bg-accent/30 hover:bg-accent/50',
+                            'border border-border/50 hover:border-border',
+                            'text-muted-foreground hover:text-foreground',
+                            'hover:shadow-sm',
+                          ],
+                      'hover:scale-[1.02] active:scale-[0.98]'
+                    )}
+                    data-testid={`project-${testId}`}
+                  >
+                    <Icon className="w-4 h-4 transition-all duration-200" style={{ color }} />
+                    <span>{label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Info when using global theme */}
+        {!hasCustomTheme && (
+          <div className="rounded-xl border border-border/30 bg-muted/30 p-4">
+            <p className="text-sm text-muted-foreground">
+              This project is using the global theme:{' '}
+              <span className="font-medium text-foreground">{globalTheme}</span>
+            </p>
+          </div>
+        )}
+
+        {/* Fonts Section */}
+        <div className="space-y-4 pt-6 border-t border-border/50">
+          <div className="flex items-center gap-2 mb-4">
+            <Type className="w-4 h-4 text-muted-foreground" />
+            <Label className="text-foreground font-medium">Fonts</Label>
+          </div>
+
+          <div className="space-y-4">
+            {/* UI Font */}
+            <div className="space-y-3">
+              <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+                <Checkbox
+                  id="use-global-font-sans"
+                  checked={!hasCustomFontSans}
+                  onCheckedChange={handleUseGlobalFontSans}
+                  className="mt-1"
+                />
+                <div className="flex-1 space-y-1.5">
+                  <Label
+                    htmlFor="use-global-font-sans"
+                    className="text-foreground cursor-pointer font-medium"
+                  >
+                    Use Global UI Font
+                  </Label>
+                  {!hasCustomFontSans && (
+                    <p className="text-xs text-muted-foreground">
+                      Currently using:{' '}
+                      <span className="font-medium">{getGlobalFontSansLabel()}</span>
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {hasCustomFontSans && (
+                <div className="ml-6 space-y-2">
+                  <Label htmlFor="ui-font-select" className="text-sm">
+                    Project UI Font
+                  </Label>
+                  <FontSelector
+                    id="ui-font-select"
+                    value={fontSansLocal}
+                    options={UI_SANS_FONT_OPTIONS}
+                    placeholder="Default (Geist Sans)"
+                    onChange={handleFontSansChange}
+                  />
+                </div>
+              )}
+            </div>
+
+            {/* Code Font */}
+            <div className="space-y-3">
+              <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+                <Checkbox
+                  id="use-global-font-mono"
+                  checked={!hasCustomFontMono}
+                  onCheckedChange={handleUseGlobalFontMono}
+                  className="mt-1"
+                />
+                <div className="flex-1 space-y-1.5">
+                  <Label
+                    htmlFor="use-global-font-mono"
+                    className="text-foreground cursor-pointer font-medium"
+                  >
+                    Use Global Code Font
+                  </Label>
+                  {!hasCustomFontMono && (
+                    <p className="text-xs text-muted-foreground">
+                      Currently using:{' '}
+                      <span className="font-medium">{getGlobalFontMonoLabel()}</span>
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {hasCustomFontMono && (
+                <div className="ml-6 space-y-2">
+                  <Label htmlFor="code-font-select" className="text-sm">
+                    Project Code Font
+                  </Label>
+                  <FontSelector
+                    id="code-font-select"
+                    value={fontMonoLocal}
+                    options={UI_MONO_FONT_OPTIONS}
+                    placeholder="Default (Geist Mono)"
+                    onChange={handleFontMonoChange}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/terminal-scripts-constants.ts b/temp_repo/apps/ui/src/components/views/project-settings-view/terminal-scripts-constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fbd0f1153adc3473bb2b63493ac971b83155344a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/terminal-scripts-constants.ts
@@ -0,0 +1,22 @@
+/**
+ * Shared terminal script constants used by both the settings section
+ * (terminal-scripts-section.tsx) and the terminal header dropdown
+ * (terminal-scripts-dropdown.tsx).
+ *
+ * Centralising the default scripts here ensures both components show
+ * the same fallback list and removes the duplicated definition.
+ */
+
+export interface TerminalScript {
+  id: string;
+  name: string;
+  command: string;
+}
+
+/** Default scripts shown when the user has not configured any custom scripts yet. */
+export const DEFAULT_TERMINAL_SCRIPTS: TerminalScript[] = [
+  { id: 'default-dev', name: 'Dev Server', command: 'npm run dev' },
+  { id: 'default-format', name: 'Format', command: 'npm run format' },
+  { id: 'default-test', name: 'Test', command: 'npm run test' },
+  { id: 'default-lint', name: 'Lint', command: 'npm run lint' },
+];
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/terminal-scripts-section.tsx b/temp_repo/apps/ui/src/components/views/project-settings-view/terminal-scripts-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bf4fc772d781e06117aeaa5ca5a25e3e24c7c0a2
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/terminal-scripts-section.tsx
@@ -0,0 +1,348 @@
+import { useState, useEffect, useCallback, type KeyboardEvent } from 'react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { ScrollText, Save, RotateCcw, Info, Plus, GripVertical, Trash2 } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { useProjectSettings } from '@/hooks/queries';
+import { useUpdateProjectSettings } from '@/hooks/mutations';
+import type { Project } from '@/lib/electron';
+import { DEFAULT_TERMINAL_SCRIPTS } from './terminal-scripts-constants';
+
+/** Preset scripts for quick addition */
+const SCRIPT_PRESETS = [
+  { name: 'Dev Server', command: 'npm run dev' },
+  { name: 'Build', command: 'npm run build' },
+  { name: 'Test', command: 'npm run test' },
+  { name: 'Lint', command: 'npm run lint' },
+  { name: 'Format', command: 'npm run format' },
+  { name: 'Type Check', command: 'npm run typecheck' },
+  { name: 'Start', command: 'npm start' },
+  { name: 'Clean', command: 'npm run clean' },
+] as const;
+
+interface ScriptEntry {
+  id: string;
+  name: string;
+  command: string;
+}
+
+interface TerminalScriptsSectionProps {
+  project: Project;
+}
+
+/** Generate a unique ID for a new script */
+function generateId(): string {
+  return `script-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+}
+
+export function TerminalScriptsSection({ project }: TerminalScriptsSectionProps) {
+  // Fetch project settings using TanStack Query
+  const { data: projectSettings, isLoading, isError } = useProjectSettings(project.path);
+
+  // Mutation hook for updating project settings
+  const updateSettingsMutation = useUpdateProjectSettings(project.path);
+
+  // Local state for scripts
+  const [scripts, setScripts] = useState<ScriptEntry[]>([]);
+  const [originalScripts, setOriginalScripts] = useState<ScriptEntry[]>([]);
+
+  // Dragging state
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+
+  // Reset local state when project changes
+  useEffect(() => {
+    setScripts([]);
+    setOriginalScripts([]);
+  }, [project.path]);
+
+  // Sync local state when project settings load or project path changes.
+  // Including project.path ensures originalScripts is re-populated after a
+  // project switch even if projectSettings is cached from a previous render.
+  useEffect(() => {
+    if (projectSettings) {
+      const configured = projectSettings.terminalScripts;
+      const scriptList =
+        configured && configured.length > 0
+          ? configured.map((s) => ({ id: s.id, name: s.name, command: s.command }))
+          : DEFAULT_TERMINAL_SCRIPTS.map((s) => ({ ...s }));
+      setScripts(scriptList);
+      setOriginalScripts(JSON.parse(JSON.stringify(scriptList)));
+    }
+  }, [projectSettings, project.path]);
+
+  // Check if there are unsaved changes
+  const hasChanges = JSON.stringify(scripts) !== JSON.stringify(originalScripts);
+  const isSaving = updateSettingsMutation.isPending;
+
+  // Save scripts
+  const handleSave = useCallback(() => {
+    // Filter out scripts with empty names or commands
+    const validScripts = scripts.filter((s) => s.name.trim() && s.command.trim());
+    const normalizedScripts = validScripts.map((s) => ({
+      id: s.id,
+      name: s.name.trim(),
+      command: s.command.trim(),
+    }));
+
+    updateSettingsMutation.mutate(
+      { terminalScripts: normalizedScripts },
+      {
+        onSuccess: () => {
+          setScripts(normalizedScripts);
+          setOriginalScripts(JSON.parse(JSON.stringify(normalizedScripts)));
+        },
+      }
+    );
+  }, [scripts, updateSettingsMutation]);
+
+  // Reset to original values
+  const handleReset = useCallback(() => {
+    setScripts(JSON.parse(JSON.stringify(originalScripts)));
+  }, [originalScripts]);
+
+  // Add a new empty script entry
+  const handleAddScript = useCallback(() => {
+    setScripts((prev) => [...prev, { id: generateId(), name: '', command: '' }]);
+  }, []);
+
+  // Add a preset script
+  const handleAddPreset = useCallback((preset: { name: string; command: string }) => {
+    setScripts((prev) => [
+      ...prev,
+      { id: generateId(), name: preset.name, command: preset.command },
+    ]);
+  }, []);
+
+  // Remove a script by index
+  const handleRemoveScript = useCallback((index: number) => {
+    setScripts((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+
+  // Update a script field
+  const handleUpdateScript = useCallback(
+    (index: number, field: 'name' | 'command', value: string) => {
+      setScripts((prev) => prev.map((s, i) => (i === index ? { ...s, [field]: value } : s)));
+    },
+    []
+  );
+
+  // Handle keyboard shortcuts (Enter to save)
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' && hasChanges && !isSaving) {
+        e.preventDefault();
+        handleSave();
+      }
+    },
+    [hasChanges, isSaving, handleSave]
+  );
+
+  // Drag and drop handlers for reordering
+  const handleDragStart = useCallback((index: number) => {
+    setDraggedIndex(index);
+  }, []);
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent, index: number) => {
+      e.preventDefault();
+      if (draggedIndex === null || draggedIndex === index) return;
+      setDragOverIndex(index);
+    },
+    [draggedIndex]
+  );
+
+  // Accept the drop so the browser sets dropEffect correctly (prevents 'none')
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      if (draggedIndex !== null && dragOverIndex !== null && draggedIndex !== dragOverIndex) {
+        setScripts((prev) => {
+          const newScripts = [...prev];
+          const [removed] = newScripts.splice(draggedIndex, 1);
+          newScripts.splice(dragOverIndex, 0, removed);
+          return newScripts;
+        });
+      }
+      setDraggedIndex(null);
+      setDragOverIndex(null);
+    },
+    [draggedIndex, dragOverIndex]
+  );
+
+  const handleDragEnd = useCallback((_e: React.DragEvent) => {
+    // The reorder is already performed in handleDrop. This handler only
+    // needs to reset the drag state (e.g. when the drop was cancelled by
+    // releasing outside a valid target or pressing Escape).
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+  }, []);
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      {/* Header */}
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <ScrollText className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            Terminal Quick Scripts
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure quick-access scripts that appear in the terminal header dropdown. Click any
+          script to run it instantly.
+        </p>
+      </div>
+
+      <div className="p-6 space-y-6">
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <Spinner size="md" />
+          </div>
+        ) : isError ? (
+          <div className="flex items-center justify-center py-8 text-sm text-destructive">
+            Failed to load project settings. Please try again.
+          </div>
+        ) : (
+          <>
+            {/* Scripts List */}
+            <div className="space-y-2">
+              {scripts.map((script, index) => (
+                <div
+                  key={script.id}
+                  className={cn(
+                    'flex items-center gap-2 p-2 rounded-lg border border-border/30 bg-accent/10 transition-all',
+                    draggedIndex === index && 'opacity-50',
+                    dragOverIndex === index && 'border-brand-500/50 bg-brand-500/5'
+                  )}
+                  draggable
+                  onDragStart={() => handleDragStart(index)}
+                  onDragOver={(e) => handleDragOver(e, index)}
+                  onDrop={(e) => handleDrop(e)}
+                  onDragEnd={(e) => handleDragEnd(e)}
+                >
+                  {/* Drag handle */}
+                  <div
+                    className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground shrink-0 p-0.5"
+                    title="Drag to reorder"
+                  >
+                    <GripVertical className="w-4 h-4" />
+                  </div>
+
+                  {/* Script name */}
+                  <Input
+                    value={script.name}
+                    onChange={(e) => handleUpdateScript(index, 'name', e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="Script name"
+                    className="h-8 text-sm flex-[0.4] min-w-0"
+                  />
+
+                  {/* Script command */}
+                  <Input
+                    value={script.command}
+                    onChange={(e) => handleUpdateScript(index, 'command', e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="Command to run"
+                    className="h-8 text-sm font-mono flex-[0.6] min-w-0"
+                  />
+
+                  {/* Remove button */}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleRemoveScript(index)}
+                    className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive shrink-0"
+                    aria-label={`Remove ${script.name || 'script'}`}
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              ))}
+
+              {scripts.length === 0 && (
+                <div className="text-center py-6 text-sm text-muted-foreground">
+                  No scripts configured. Add some below or use a preset.
+                </div>
+              )}
+            </div>
+
+            {/* Add Script Button */}
+            <Button variant="outline" size="sm" onClick={handleAddScript} className="gap-1.5">
+              <Plus className="w-3.5 h-3.5" />
+              Add Script
+            </Button>
+
+            {/* Divider */}
+            <div className="border-t border-border/30" />
+
+            {/* Presets */}
+            <div className="space-y-3">
+              <h3 className="text-sm font-medium text-foreground">Quick Add Presets</h3>
+              <div className="flex flex-wrap gap-1.5">
+                {SCRIPT_PRESETS.map((preset) => (
+                  <Button
+                    key={preset.command}
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleAddPreset(preset)}
+                    className="text-xs font-mono h-7 px-2"
+                  >
+                    {preset.command}
+                  </Button>
+                ))}
+              </div>
+            </div>
+
+            {/* Info Box */}
+            <div className="flex items-start gap-3 p-3 rounded-lg bg-accent/20 border border-border/30">
+              <Info className="w-4 h-4 text-brand-500 mt-0.5 shrink-0" />
+              <div className="text-xs text-muted-foreground">
+                <p className="font-medium text-foreground mb-1">Terminal Quick Scripts</p>
+                <p>
+                  These scripts appear in the terminal header as a dropdown menu (the{' '}
+                  <ScrollText className="inline-block w-3 h-3 mx-0.5 align-middle" /> icon).
+                  Clicking a script will type the command into the active terminal and press Enter.
+                  Drag to reorder scripts.
+                </p>
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex items-center justify-end gap-2 pt-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleReset}
+                disabled={!hasChanges || isSaving}
+                className="gap-1.5"
+              >
+                <RotateCcw className="w-3.5 h-3.5" />
+                Reset
+              </Button>
+              <Button
+                size="sm"
+                onClick={handleSave}
+                disabled={!hasChanges || isSaving}
+                className="gap-1.5"
+              >
+                {isSaving ? <Spinner size="xs" /> : <Save className="w-3.5 h-3.5" />}
+                Save
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/project-settings-view/worktree-preferences-section.tsx b/temp_repo/apps/ui/src/components/views/project-settings-view/worktree-preferences-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..86ce4595c7c85df03fd1eca0e2b68ee1184a1b35
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/project-settings-view/worktree-preferences-section.tsx
@@ -0,0 +1,762 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Slider } from '@/components/ui/slider';
+import { ShellSyntaxEditor } from '@/components/ui/shell-syntax-editor';
+import {
+  GitBranch,
+  Terminal,
+  FileCode,
+  Save,
+  RotateCcw,
+  Trash2,
+  PanelBottomClose,
+  Copy,
+  Plus,
+  FolderOpen,
+  LayoutGrid,
+  Pin,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { apiGet, apiPut, apiDelete } from '@/lib/api-fetch';
+import { toast } from 'sonner';
+import { useAppStore } from '@/store/app-store';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import type { Project } from '@/lib/electron';
+import { ProjectFileSelectorDialog } from '@/components/dialogs/project-file-selector-dialog';
+
+// Stable empty array reference to prevent unnecessary re-renders when no copy files are set
+const EMPTY_FILES: string[] = [];
+
+interface WorktreePreferencesSectionProps {
+  project: Project;
+}
+
+interface InitScriptResponse {
+  success: boolean;
+  exists: boolean;
+  content: string;
+  path: string;
+  error?: string;
+}
+
+export function WorktreePreferencesSection({ project }: WorktreePreferencesSectionProps) {
+  // Use direct store subscriptions (not getter functions) so the component
+  // properly re-renders when these values change in the store.
+  const globalUseWorktrees = useAppStore((s) => s.useWorktrees);
+  const projectUseWorktrees = useAppStore((s) => s.useWorktreesByProject[project.path]);
+  const setProjectUseWorktrees = useAppStore((s) => s.setProjectUseWorktrees);
+  const showIndicator = useAppStore(
+    (s) => s.showInitScriptIndicatorByProject[project.path] ?? true
+  );
+  const setShowInitScriptIndicator = useAppStore((s) => s.setShowInitScriptIndicator);
+  const defaultDeleteBranch = useAppStore(
+    (s) => s.defaultDeleteBranchByProject[project.path] ?? false
+  );
+  const setDefaultDeleteBranch = useAppStore((s) => s.setDefaultDeleteBranch);
+  const autoDismiss = useAppStore(
+    (s) => s.autoDismissInitScriptIndicatorByProject[project.path] ?? true
+  );
+  const setAutoDismissInitScriptIndicator = useAppStore((s) => s.setAutoDismissInitScriptIndicator);
+  // Use a stable empty array reference to prevent new array on every render when
+  // worktreeCopyFilesByProject[project.path] is undefined (not yet loaded).
+  const copyFilesFromStore = useAppStore((s) => s.worktreeCopyFilesByProject[project.path]);
+  const copyFiles = copyFilesFromStore ?? EMPTY_FILES;
+  const setWorktreeCopyFiles = useAppStore((s) => s.setWorktreeCopyFiles);
+
+  // Worktree display settings
+  const pinnedWorktreesCount = useAppStore((s) => s.getPinnedWorktreesCount(project.path));
+  const setPinnedWorktreesCount = useAppStore((s) => s.setPinnedWorktreesCount);
+
+  // Get effective worktrees setting (project override or global fallback)
+  const effectiveUseWorktrees = projectUseWorktrees ?? globalUseWorktrees;
+
+  const [scriptContent, setScriptContent] = useState('');
+  const [originalContent, setOriginalContent] = useState('');
+  const [scriptExists, setScriptExists] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  // Copy files state
+  const [newCopyFilePath, setNewCopyFilePath] = useState('');
+  const [fileSelectorOpen, setFileSelectorOpen] = useState(false);
+
+  // Ref for storing previous slider value for rollback on error
+  const sliderPrevRef = useRef<number | null>(null);
+
+  // Check if there are unsaved changes
+  const hasChanges = scriptContent !== originalContent;
+
+  // Load project settings (including useWorktrees) when project changes
+  useEffect(() => {
+    let isCancelled = false;
+    const currentPath = project.path;
+
+    const loadProjectSettings = async () => {
+      try {
+        const httpClient = getHttpApiClient();
+        const response = await httpClient.settings.getProject(currentPath);
+
+        // Avoid updating state if component unmounted or project changed
+        if (isCancelled) return;
+
+        if (response.success && response.settings) {
+          // Sync useWorktrees to store if it has a value
+          if (response.settings.useWorktrees !== undefined) {
+            setProjectUseWorktrees(currentPath, response.settings.useWorktrees);
+          }
+          // Also sync other settings to store
+          if (response.settings.showInitScriptIndicator !== undefined) {
+            setShowInitScriptIndicator(currentPath, response.settings.showInitScriptIndicator);
+          }
+          if (response.settings.defaultDeleteBranchWithWorktree !== undefined) {
+            setDefaultDeleteBranch(currentPath, response.settings.defaultDeleteBranchWithWorktree);
+          }
+          if (response.settings.autoDismissInitScriptIndicator !== undefined) {
+            setAutoDismissInitScriptIndicator(
+              currentPath,
+              response.settings.autoDismissInitScriptIndicator
+            );
+          }
+          if (response.settings.worktreeCopyFiles !== undefined) {
+            setWorktreeCopyFiles(currentPath, response.settings.worktreeCopyFiles);
+          }
+          if (response.settings.pinnedWorktreesCount !== undefined) {
+            setPinnedWorktreesCount(currentPath, response.settings.pinnedWorktreesCount);
+          }
+        }
+      } catch (error) {
+        if (!isCancelled) {
+          console.error('Failed to load project settings:', error);
+        }
+      }
+    };
+
+    loadProjectSettings();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [
+    project.path,
+    setProjectUseWorktrees,
+    setShowInitScriptIndicator,
+    setDefaultDeleteBranch,
+    setAutoDismissInitScriptIndicator,
+    setWorktreeCopyFiles,
+    setPinnedWorktreesCount,
+  ]);
+
+  // Load init script content when project changes
+  useEffect(() => {
+    let isCancelled = false;
+    const currentPath = project.path;
+
+    const loadInitScript = async () => {
+      setIsLoading(true);
+      try {
+        const response = await apiGet<InitScriptResponse>(
+          `/api/worktree/init-script?projectPath=${encodeURIComponent(currentPath)}`
+        );
+
+        // Avoid updating state if component unmounted or project changed
+        if (isCancelled) return;
+
+        if (response.success) {
+          const content = response.content || '';
+          setScriptContent(content);
+          setOriginalContent(content);
+          setScriptExists(response.exists);
+        }
+      } catch (error) {
+        if (!isCancelled) {
+          console.error('Failed to load init script:', error);
+        }
+      } finally {
+        if (!isCancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    loadInitScript();
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [project.path]);
+
+  // Save script
+  const handleSave = useCallback(async () => {
+    setIsSaving(true);
+    try {
+      const response = await apiPut<{ success: boolean; error?: string }>(
+        '/api/worktree/init-script',
+        {
+          projectPath: project.path,
+          content: scriptContent,
+        }
+      );
+      if (response.success) {
+        setOriginalContent(scriptContent);
+        setScriptExists(true);
+        toast.success('Init script saved');
+      } else {
+        toast.error('Failed to save init script', {
+          description: response.error,
+        });
+      }
+    } catch (error) {
+      console.error('Failed to save init script:', error);
+      toast.error('Failed to save init script');
+    } finally {
+      setIsSaving(false);
+    }
+  }, [project.path, scriptContent]);
+
+  // Reset to original content
+  const handleReset = useCallback(() => {
+    setScriptContent(originalContent);
+  }, [originalContent]);
+
+  // Delete script
+  const handleDelete = useCallback(async () => {
+    setIsDeleting(true);
+    try {
+      const response = await apiDelete<{ success: boolean; error?: string }>(
+        '/api/worktree/init-script',
+        {
+          body: { projectPath: project.path },
+        }
+      );
+      if (response.success) {
+        setScriptContent('');
+        setOriginalContent('');
+        setScriptExists(false);
+        toast.success('Init script deleted');
+      } else {
+        toast.error('Failed to delete init script', {
+          description: response.error,
+        });
+      }
+    } catch (error) {
+      console.error('Failed to delete init script:', error);
+      toast.error('Failed to delete init script');
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [project.path]);
+
+  // Handle content change (no auto-save)
+  const handleContentChange = useCallback((value: string) => {
+    setScriptContent(value);
+  }, []);
+
+  // Add a new file path to copy list
+  const handleAddCopyFile = useCallback(async () => {
+    const trimmed = newCopyFilePath.trim();
+    if (!trimmed) return;
+
+    // Normalize: remove leading ./ or /
+    const normalized = trimmed.replace(/^\.\//, '').replace(/^\//, '');
+    if (!normalized) return;
+
+    // Check for duplicates
+    if (copyFiles.includes(normalized)) {
+      toast.error('File already in list', {
+        description: `"${normalized}" is already configured for copying.`,
+      });
+      return;
+    }
+
+    const prevFiles = copyFiles;
+    const updatedFiles = [...copyFiles, normalized];
+    setWorktreeCopyFiles(project.path, updatedFiles);
+    setNewCopyFilePath('');
+
+    // Persist to server
+    try {
+      const httpClient = getHttpApiClient();
+      await httpClient.settings.updateProject(project.path, {
+        worktreeCopyFiles: updatedFiles,
+      });
+      toast.success('Copy file added', {
+        description: `"${normalized}" will be copied to new worktrees.`,
+      });
+    } catch (error) {
+      // Rollback optimistic update on failure
+      setWorktreeCopyFiles(project.path, prevFiles);
+      setNewCopyFilePath(normalized);
+      console.error('Failed to persist worktreeCopyFiles:', error);
+      toast.error('Failed to save copy files setting');
+    }
+  }, [project.path, newCopyFilePath, copyFiles, setWorktreeCopyFiles]);
+
+  // Remove a file path from copy list
+  const handleRemoveCopyFile = useCallback(
+    async (filePath: string) => {
+      const prevFiles = copyFiles;
+      const updatedFiles = copyFiles.filter((f) => f !== filePath);
+      setWorktreeCopyFiles(project.path, updatedFiles);
+
+      // Persist to server
+      try {
+        const httpClient = getHttpApiClient();
+        await httpClient.settings.updateProject(project.path, {
+          worktreeCopyFiles: updatedFiles,
+        });
+        toast.success('Copy file removed');
+      } catch (error) {
+        // Rollback optimistic update on failure
+        setWorktreeCopyFiles(project.path, prevFiles);
+        console.error('Failed to persist worktreeCopyFiles:', error);
+        toast.error('Failed to save copy files setting');
+      }
+    },
+    [project.path, copyFiles, setWorktreeCopyFiles]
+  );
+
+  // Handle files selected from the file selector dialog
+  const handleFileSelectorSelect = useCallback(
+    async (paths: string[]) => {
+      // Filter out duplicates
+      const newPaths = paths.filter((p) => !copyFiles.includes(p));
+      if (newPaths.length === 0) {
+        toast.info('All selected files are already in the list');
+        return;
+      }
+
+      const prevFiles = copyFiles;
+      const updatedFiles = [...copyFiles, ...newPaths];
+      setWorktreeCopyFiles(project.path, updatedFiles);
+
+      // Persist to server
+      try {
+        const httpClient = getHttpApiClient();
+        await httpClient.settings.updateProject(project.path, {
+          worktreeCopyFiles: updatedFiles,
+        });
+        toast.success(`${newPaths.length} ${newPaths.length === 1 ? 'file' : 'files'} added`, {
+          description: newPaths.map((p) => `"${p}"`).join(', '),
+        });
+      } catch (error) {
+        // Rollback optimistic update on failure
+        setWorktreeCopyFiles(project.path, prevFiles);
+        console.error('Failed to persist worktreeCopyFiles:', error);
+        toast.error('Failed to save copy files setting');
+      }
+    },
+    [project.path, copyFiles, setWorktreeCopyFiles]
+  );
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <GitBranch className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            Worktree Preferences
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure worktree behavior for this project.
+        </p>
+      </div>
+      <div className="p-6 space-y-5">
+        {/* Enable Git Worktree Isolation Toggle */}
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="project-use-worktrees"
+            checked={effectiveUseWorktrees}
+            onCheckedChange={async (checked) => {
+              const value = checked === true;
+              setProjectUseWorktrees(project.path, value);
+              try {
+                const httpClient = getHttpApiClient();
+                await httpClient.settings.updateProject(project.path, {
+                  useWorktrees: value,
+                });
+              } catch (error) {
+                console.error('Failed to persist useWorktrees:', error);
+              }
+            }}
+            className="mt-1"
+            data-testid="project-use-worktrees-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="project-use-worktrees"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <GitBranch className="w-4 h-4 text-brand-500" />
+              Enable Git Worktree Isolation
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              Creates isolated git branches for each feature in this project. When disabled, agents
+              work directly in the main project directory.
+            </p>
+          </div>
+        </div>
+
+        {/* Separator */}
+        <div className="border-t border-border/30" />
+
+        {/* Show Init Script Indicator Toggle */}
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="show-init-script-indicator"
+            checked={showIndicator}
+            onCheckedChange={async (checked) => {
+              const value = checked === true;
+              setShowInitScriptIndicator(project.path, value);
+              // Persist to server
+              try {
+                const httpClient = getHttpApiClient();
+                await httpClient.settings.updateProject(project.path, {
+                  showInitScriptIndicator: value,
+                });
+              } catch (error) {
+                console.error('Failed to persist showInitScriptIndicator:', error);
+              }
+            }}
+            className="mt-1"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="show-init-script-indicator"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <PanelBottomClose className="w-4 h-4 text-brand-500" />
+              Show Init Script Indicator
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              Display a floating panel in the bottom-right corner showing init script execution
+              status and output when a worktree is created.
+            </p>
+          </div>
+        </div>
+
+        {/* Auto-dismiss Init Script Indicator Toggle */}
+        {showIndicator && (
+          <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3 ml-6">
+            <Checkbox
+              id="auto-dismiss-indicator"
+              checked={autoDismiss}
+              onCheckedChange={async (checked) => {
+                const value = checked === true;
+                setAutoDismissInitScriptIndicator(project.path, value);
+                // Persist to server
+                try {
+                  const httpClient = getHttpApiClient();
+                  await httpClient.settings.updateProject(project.path, {
+                    autoDismissInitScriptIndicator: value,
+                  });
+                } catch (error) {
+                  console.error('Failed to persist autoDismissInitScriptIndicator:', error);
+                }
+              }}
+              className="mt-1"
+            />
+            <div className="space-y-1.5">
+              <Label
+                htmlFor="auto-dismiss-indicator"
+                className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+              >
+                Auto-dismiss After Completion
+              </Label>
+              <p className="text-xs text-muted-foreground/80 leading-relaxed">
+                Automatically hide the indicator 5 seconds after the script completes.
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Default Delete Branch Toggle */}
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="default-delete-branch"
+            checked={defaultDeleteBranch}
+            onCheckedChange={async (checked) => {
+              const value = checked === true;
+              setDefaultDeleteBranch(project.path, value);
+              // Persist to server
+              try {
+                const httpClient = getHttpApiClient();
+                await httpClient.settings.updateProject(project.path, {
+                  defaultDeleteBranch: value,
+                });
+              } catch (error) {
+                console.error('Failed to persist defaultDeleteBranch:', error);
+              }
+            }}
+            className="mt-1"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="default-delete-branch"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <Trash2 className="w-4 h-4 text-brand-500" />
+              Delete Branch by Default
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              When deleting a worktree, automatically check the "Also delete the branch" option.
+            </p>
+          </div>
+        </div>
+
+        {/* Separator */}
+        <div className="border-t border-border/30" />
+
+        {/* Worktree Display Settings */}
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <LayoutGrid className="w-4 h-4 text-brand-500" />
+            <Label className="text-foreground font-medium">Display Settings</Label>
+          </div>
+          <p className="text-xs text-muted-foreground/80 leading-relaxed">
+            Control how worktrees are presented in the panel. Pinned worktrees appear as tabs, and
+            remaining worktrees are available in a combined overflow dropdown.
+          </p>
+
+          {/* Pinned Worktrees Count */}
+          <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+            <div className="mt-0.5">
+              <Pin className="w-4 h-4 text-brand-500" />
+            </div>
+            <div className="space-y-2 flex-1">
+              <div className="flex items-center justify-between">
+                <Label
+                  htmlFor="pinned-worktrees-count"
+                  className="text-foreground cursor-pointer font-medium"
+                >
+                  Pinned Worktree Tabs
+                </Label>
+                <span className="text-sm font-medium text-foreground tabular-nums">
+                  {pinnedWorktreesCount}
+                </span>
+              </div>
+              <p className="text-xs text-muted-foreground/80 leading-relaxed">
+                Number of worktree tabs to pin (excluding the main worktree, which is always shown).
+              </p>
+              <Slider
+                id="pinned-worktrees-count"
+                min={0}
+                max={25}
+                step={1}
+                value={[pinnedWorktreesCount]}
+                onValueChange={(value) => {
+                  // Capture previous value before mutation for potential rollback
+                  const prevCount = pinnedWorktreesCount;
+                  // Update local state immediately for visual feedback
+                  const newValue = value[0] ?? pinnedWorktreesCount;
+                  setPinnedWorktreesCount(project.path, newValue);
+                  // Store prev for onValueCommit rollback
+                  sliderPrevRef.current = prevCount;
+                }}
+                onValueCommit={async (value) => {
+                  const newValue = value[0] ?? pinnedWorktreesCount;
+                  const prev = sliderPrevRef.current ?? pinnedWorktreesCount;
+
+                  // Persist to server
+                  try {
+                    const httpClient = getHttpApiClient();
+                    await httpClient.settings.updateProject(project.path, {
+                      pinnedWorktreesCount: newValue,
+                    });
+                  } catch (error) {
+                    console.error('Failed to persist pinnedWorktreesCount:', error);
+                    toast.error('Failed to save pinned worktrees setting');
+                    // Rollback optimistic update using captured previous value
+                    setPinnedWorktreesCount(project.path, prev);
+                  }
+                }}
+                className="w-full"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Separator */}
+        <div className="border-t border-border/30" />
+
+        {/* Copy Files Section */}
+        <div className="space-y-3">
+          <div className="flex items-center gap-2">
+            <Copy className="w-4 h-4 text-brand-500" />
+            <Label className="text-foreground font-medium">Copy Files to Worktrees</Label>
+          </div>
+          <p className="text-xs text-muted-foreground/80 leading-relaxed">
+            Specify files or directories (relative to project root) to automatically copy into new
+            worktrees. Useful for untracked files like{' '}
+            <code className="font-mono text-foreground/60">.env</code>,{' '}
+            <code className="font-mono text-foreground/60">.env.local</code>, or local config files
+            that aren&apos;t committed to git.
+          </p>
+
+          {/* Current file list */}
+          {copyFiles.length > 0 && (
+            <div className="space-y-1.5">
+              {copyFiles.map((filePath) => (
+                <div
+                  key={filePath}
+                  className="flex items-center gap-2 group/item px-3 py-1.5 rounded-lg bg-accent/20 hover:bg-accent/40 transition-colors"
+                >
+                  <FileCode className="w-3.5 h-3.5 text-muted-foreground/60 flex-shrink-0" />
+                  <code className="font-mono text-sm text-foreground/80 flex-1 truncate">
+                    {filePath}
+                  </code>
+                  <button
+                    onClick={() => handleRemoveCopyFile(filePath)}
+                    className="p-0.5 rounded text-muted-foreground/50 hover:bg-destructive/10 hover:text-destructive transition-all flex-shrink-0"
+                    title={`Remove ${filePath}`}
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Add new file input */}
+          <div className="flex items-center gap-2">
+            <Input
+              value={newCopyFilePath}
+              onChange={(e) => setNewCopyFilePath(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  handleAddCopyFile();
+                }
+              }}
+              placeholder=".env, config/local.json, etc."
+              className="flex-1 h-8 text-sm font-mono"
+            />
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleAddCopyFile}
+              disabled={!newCopyFilePath.trim()}
+              className="gap-1.5 h-8"
+            >
+              <Plus className="w-3.5 h-3.5" />
+              Add
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setFileSelectorOpen(true)}
+              className="gap-1.5 h-8"
+            >
+              <FolderOpen className="w-3.5 h-3.5" />
+              Browse
+            </Button>
+          </div>
+
+          {/* File selector dialog */}
+          <ProjectFileSelectorDialog
+            open={fileSelectorOpen}
+            onOpenChange={setFileSelectorOpen}
+            onSelect={handleFileSelectorSelect}
+            projectPath={project.path}
+            existingFiles={copyFiles}
+          />
+        </div>
+
+        {/* Separator */}
+        <div className="border-t border-border/30" />
+
+        {/* Init Script Section */}
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Terminal className="w-4 h-4 text-brand-500" />
+              <Label className="text-foreground font-medium">Initialization Script</Label>
+            </div>
+          </div>
+          <p className="text-xs text-muted-foreground/80 leading-relaxed">
+            Shell commands to run after a worktree is created. Runs once per worktree. Uses Git Bash
+            on Windows for cross-platform compatibility.
+          </p>
+
+          {/* File path indicator */}
+          <div className="flex items-center gap-2 text-xs text-muted-foreground/60">
+            <FileCode className="w-3.5 h-3.5" />
+            <code className="font-mono">.automaker/worktree-init.sh</code>
+            {hasChanges && <span className="text-amber-500 font-medium">(unsaved changes)</span>}
+          </div>
+
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Spinner size="md" />
+            </div>
+          ) : (
+            <>
+              <ShellSyntaxEditor
+                value={scriptContent}
+                onChange={handleContentChange}
+                placeholder={`# Example initialization commands
+npm install
+
+# Or use pnpm
+# pnpm install
+
+# Copy environment file
+# cp .env.example .env`}
+                minHeight="200px"
+                maxHeight="500px"
+                data-testid="init-script-editor"
+              />
+
+              {/* Action buttons */}
+              <div className="flex items-center justify-end gap-2 pt-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleReset}
+                  disabled={!hasChanges || isSaving || isDeleting}
+                  className="gap-1.5"
+                >
+                  <RotateCcw className="w-3.5 h-3.5" />
+                  Reset
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleDelete}
+                  disabled={!scriptExists || isSaving || isDeleting}
+                  className="gap-1.5 text-destructive hover:text-destructive hover:bg-destructive/10"
+                >
+                  {isDeleting ? <Spinner size="xs" /> : <Trash2 className="w-3.5 h-3.5" />}
+                  Delete
+                </Button>
+                <Button
+                  size="sm"
+                  onClick={handleSave}
+                  disabled={!hasChanges || isSaving || isDeleting}
+                  className="gap-1.5"
+                >
+                  {isSaving ? <Spinner size="xs" /> : <Save className="w-3.5 h-3.5" />}
+                  Save
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/running-agents-view.tsx b/temp_repo/apps/ui/src/components/views/running-agents-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bf7ba2f0ffbbd06004e84d85d7fe79449b25332b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/running-agents-view.tsx
@@ -0,0 +1,254 @@
+/**
+ * Running Agents View
+ *
+ * Displays all currently running agents across all projects.
+ * Uses React Query for data fetching with automatic polling.
+ */
+
+import { useState, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { Bot, Folder, RefreshCw, Square, Activity, FileText, Cpu } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getElectronAPI, type RunningAgent } from '@/lib/electron';
+import { useAppStore } from '@/store/app-store';
+import { Button } from '@/components/ui/button';
+import { useNavigate } from '@tanstack/react-router';
+import { AgentOutputModal } from './board-view/dialogs/agent-output-modal';
+import { useRunningAgents } from '@/hooks/queries';
+import { useStopFeature } from '@/hooks/mutations';
+import { getModelDisplayName } from '@/lib/utils';
+
+function formatFeatureId(featureId: string): string {
+  // Strip 'feature-' prefix and timestamp for readability
+  // e.g. 'feature-1772305345138-epit9shpdxl' → 'epit9shpdxl'
+  const match = featureId.match(/^feature-\d+-(.+)$/);
+  if (match) return match[1];
+  // For other patterns like 'backlog-plan:...' or 'spec-generation:...', show as-is
+  return featureId;
+}
+
+export function RunningAgentsView() {
+  const [selectedAgent, setSelectedAgent] = useState<RunningAgent | null>(null);
+  const { setCurrentProject, projects } = useAppStore();
+  const navigate = useNavigate();
+
+  const logger = createLogger('RunningAgentsView');
+
+  // Use React Query for running agents with auto-refresh
+  const { data, isLoading, isFetching, refetch } = useRunningAgents();
+
+  const runningAgents = data?.agents ?? [];
+
+  // Use mutation for stopping features
+  const stopFeature = useStopFeature();
+
+  const handleRefresh = useCallback(() => {
+    refetch();
+  }, [refetch]);
+
+  const handleStopAgent = useCallback(
+    async (agent: RunningAgent) => {
+      const api = getElectronAPI();
+      // Handle backlog plans separately - they use a different API
+      const isBacklogPlan = agent.featureId.startsWith('backlog-plan:');
+      if (isBacklogPlan && api.backlogPlan) {
+        logger.debug('Stopping backlog plan agent', { featureId: agent.featureId });
+        try {
+          await api.backlogPlan.stop();
+        } catch (error) {
+          logger.error('Failed to stop backlog plan', { featureId: agent.featureId, error });
+        } finally {
+          refetch();
+        }
+        return;
+      }
+      // Use mutation for regular features
+      stopFeature.mutate({ featureId: agent.featureId, projectPath: agent.projectPath });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- logger is stable
+    [stopFeature, refetch]
+  );
+
+  const handleNavigateToProject = useCallback(
+    (agent: RunningAgent) => {
+      const project = projects.find((p) => p.path === agent.projectPath);
+      if (project) {
+        logger.debug('Navigating to running agent project', {
+          projectPath: agent.projectPath,
+          featureId: agent.featureId,
+        });
+        setCurrentProject(project);
+        navigate({ to: '/board' });
+      } else {
+        logger.debug('Project not found for running agent', {
+          projectPath: agent.projectPath,
+          featureId: agent.featureId,
+        });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- logger is stable
+    [projects, setCurrentProject, navigate]
+  );
+
+  const handleViewLogs = useCallback((agent: RunningAgent) => {
+    logger.debug('Opening running agent logs', {
+      featureId: agent.featureId,
+      projectPath: agent.projectPath,
+    });
+    setSelectedAgent(agent);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- logger is stable
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <Spinner size="xl" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-3">
+          <div className="p-2 rounded-lg bg-brand-500/10">
+            <Activity className="h-6 w-6 text-brand-500" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold">Running Agents</h1>
+            <p className="text-sm text-muted-foreground">
+              {runningAgents.length === 0
+                ? 'No agents currently running'
+                : `${runningAgents.length} agent${runningAgents.length === 1 ? '' : 's'} running across all projects`}
+            </p>
+          </div>
+        </div>
+        <Button variant="outline" size="sm" onClick={handleRefresh} disabled={isFetching}>
+          {isFetching ? (
+            <Spinner size="sm" className="mr-2" />
+          ) : (
+            <RefreshCw className="h-4 w-4 mr-2" />
+          )}
+          Refresh
+        </Button>
+      </div>
+
+      {/* Content */}
+      {runningAgents.length === 0 ? (
+        <div className="flex-1 flex flex-col items-center justify-center text-center">
+          <div className="p-4 rounded-full bg-muted/50 mb-4">
+            <Bot className="h-12 w-12 text-muted-foreground" />
+          </div>
+          <h2 className="text-lg font-medium mb-2">No Running Agents</h2>
+          <p className="text-muted-foreground max-w-md">
+            Agents will appear here when they are actively working on features. Start an agent from
+            the Kanban board by dragging a feature to "In Progress".
+          </p>
+        </div>
+      ) : (
+        <div className="flex-1 overflow-auto">
+          <div className="space-y-3">
+            {runningAgents.map((agent) => (
+              <div
+                key={`${agent.projectPath}-${agent.featureId}`}
+                className="flex items-center justify-between p-4 rounded-lg border border-border bg-card hover:bg-accent/50 transition-colors"
+              >
+                <div className="flex items-center gap-4 min-w-0">
+                  {/* Status indicator */}
+                  <div className="relative">
+                    <Bot className="h-8 w-8 text-brand-500" />
+                    <span className="absolute -top-1 -right-1 flex h-3 w-3">
+                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+                      <span className="relative inline-flex rounded-full h-3 w-3 bg-green-500" />
+                    </span>
+                  </div>
+
+                  {/* Agent info */}
+                  <div className="min-w-0 flex-1">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <span className="font-medium truncate" title={agent.title || agent.featureId}>
+                        {agent.title || formatFeatureId(agent.featureId)}
+                      </span>
+                      {agent.isAutoMode && (
+                        <span className="px-2 py-0.5 text-[10px] font-medium rounded-full bg-brand-500/10 text-brand-500 border border-brand-500/30">
+                          AUTO
+                        </span>
+                      )}
+                      {agent.model && (
+                        <span className="px-2 py-0.5 text-[10px] font-medium rounded-full bg-purple-500/10 text-purple-500 border border-purple-500/30 flex items-center gap-1">
+                          <Cpu className="h-3 w-3" />
+                          {getModelDisplayName(agent.model)}
+                        </span>
+                      )}
+                    </div>
+                    {agent.description && (
+                      <p
+                        className="text-sm text-muted-foreground truncate max-w-md"
+                        title={agent.description}
+                      >
+                        {agent.description}
+                      </p>
+                    )}
+                    <button
+                      onClick={() => handleNavigateToProject(agent)}
+                      className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      <Folder className="h-3.5 w-3.5" />
+                      <span className="truncate">{agent.projectName}</span>
+                    </button>
+                  </div>
+                </div>
+
+                {/* Actions */}
+                <div className="flex items-center gap-2 shrink-0">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleViewLogs(agent)}
+                    className="text-muted-foreground hover:text-foreground"
+                  >
+                    <FileText className="h-3.5 w-3.5 mr-1.5" />
+                    View Logs
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleNavigateToProject(agent)}
+                    className="text-muted-foreground hover:text-foreground"
+                  >
+                    View Project
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    onClick={() => handleStopAgent(agent)}
+                    disabled={stopFeature.isPending}
+                  >
+                    <Square className="h-3.5 w-3.5 mr-1.5" />
+                    Stop
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Agent Output Modal */}
+      {selectedAgent && (
+        <AgentOutputModal
+          open={true}
+          onClose={() => setSelectedAgent(null)}
+          projectPath={selectedAgent.projectPath}
+          featureDescription={
+            selectedAgent.description || selectedAgent.title || selectedAgent.featureId
+          }
+          featureId={selectedAgent.featureId}
+          featureStatus="running"
+          branchName={selectedAgent.branchName}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view.tsx b/temp_repo/apps/ui/src/components/views/settings-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c5493cfb2e864c10339204db1f9e9a44b0f8f443
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view.tsx
@@ -0,0 +1,259 @@
+import { useState, useEffect } from 'react';
+import { useSearch } from '@tanstack/react-router';
+import { useAppStore } from '@/store/app-store';
+
+import { useSettingsView, type SettingsViewId } from './settings-view/hooks';
+import { NAV_ITEMS } from './settings-view/config/navigation';
+import { SettingsHeader } from './settings-view/components/settings-header';
+import { KeyboardMapDialog } from './settings-view/components/keyboard-map-dialog';
+import { SettingsNavigation } from './settings-view/components/settings-navigation';
+import { ApiKeysSection } from './settings-view/api-keys/api-keys-section';
+import { ModelDefaultsSection } from './settings-view/model-defaults';
+import { AppearanceSection } from './settings-view/appearance/appearance-section';
+import { EditorSection } from './settings-view/editor';
+import { TerminalSection } from './settings-view/terminal/terminal-section';
+import { AudioSection } from './settings-view/audio/audio-section';
+import { KeyboardShortcutsSection } from './settings-view/keyboard-shortcuts/keyboard-shortcuts-section';
+import { FeatureDefaultsSection } from './settings-view/feature-defaults/feature-defaults-section';
+import { WorktreesSection } from './settings-view/worktrees';
+import { AccountSection } from './settings-view/account';
+import { SecuritySection } from './settings-view/security';
+import { DeveloperSection } from './settings-view/developer/developer-section';
+import {
+  ClaudeSettingsTab,
+  CursorSettingsTab,
+  CodexSettingsTab,
+  OpencodeSettingsTab,
+  GeminiSettingsTab,
+  CopilotSettingsTab,
+} from './settings-view/providers';
+import { MCPServersSection } from './settings-view/mcp-servers';
+import { PromptCustomizationSection } from './settings-view/prompts';
+import { EventHooksSection } from './settings-view/event-hooks';
+import { TemplatesSection } from './settings-view/templates/templates-section';
+import { ImportExportDialog } from './settings-view/components/import-export-dialog';
+import type { Theme } from './settings-view/shared/types';
+
+// Breakpoint constant for mobile (matches Tailwind lg breakpoint)
+const LG_BREAKPOINT = 1024;
+
+export function SettingsView() {
+  const {
+    theme,
+    setTheme,
+    defaultSkipTests,
+    setDefaultSkipTests,
+    enableDependencyBlocking,
+    setEnableDependencyBlocking,
+    skipVerificationInAutoMode,
+    setSkipVerificationInAutoMode,
+    enableAiCommitMessages,
+    setEnableAiCommitMessages,
+    useWorktrees,
+    setUseWorktrees,
+    muteDoneSound,
+    setMuteDoneSound,
+    currentProject,
+    defaultPlanningMode,
+    setDefaultPlanningMode,
+    defaultRequirePlanApproval,
+    setDefaultRequirePlanApproval,
+    defaultFeatureModel,
+    setDefaultFeatureModel,
+    promptCustomization,
+    setPromptCustomization,
+    skipSandboxWarning,
+    setSkipSandboxWarning,
+    defaultMaxTurns,
+    setDefaultMaxTurns,
+    featureTemplates,
+    addFeatureTemplate,
+    updateFeatureTemplate,
+    deleteFeatureTemplate,
+    reorderFeatureTemplates,
+  } = useAppStore();
+
+  // Global theme (project-specific themes are managed in Project Settings)
+  const globalTheme = theme as Theme;
+
+  // Get initial view from URL search params
+  const { view: initialView } = useSearch({ from: '/settings' });
+
+  // Use settings view navigation hook
+  const { activeView, navigateTo } = useSettingsView({ initialView });
+
+  // Handle navigation - if navigating to 'providers', default to 'claude-provider'
+  const handleNavigate = (viewId: SettingsViewId) => {
+    if (viewId === 'providers') {
+      navigateTo('claude-provider');
+    } else {
+      navigateTo(viewId);
+    }
+  };
+
+  const [showKeyboardMapDialog, setShowKeyboardMapDialog] = useState(false);
+  const [showImportExportDialog, setShowImportExportDialog] = useState(false);
+
+  // Mobile navigation state - default to showing on desktop, hidden on mobile
+  const [showNavigation, setShowNavigation] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth >= LG_BREAKPOINT;
+    }
+    return true; // Default to showing on SSR
+  });
+
+  // Auto-close navigation on mobile when a section is selected
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.innerWidth < LG_BREAKPOINT) {
+      setShowNavigation(false);
+    }
+  }, [activeView]);
+
+  // Handle window resize to show/hide navigation appropriately
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= LG_BREAKPOINT) {
+        setShowNavigation(true);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // Render the active section based on current view
+  const renderActiveSection = () => {
+    switch (activeView) {
+      case 'claude-provider':
+        return <ClaudeSettingsTab />;
+      case 'cursor-provider':
+        return <CursorSettingsTab />;
+      case 'codex-provider':
+        return <CodexSettingsTab />;
+      case 'opencode-provider':
+        return <OpencodeSettingsTab />;
+      case 'gemini-provider':
+        return <GeminiSettingsTab />;
+      case 'copilot-provider':
+        return <CopilotSettingsTab />;
+      case 'providers':
+      case 'claude': // Backwards compatibility - redirect to claude-provider
+        return <ClaudeSettingsTab />;
+      case 'mcp-servers':
+        return <MCPServersSection />;
+      case 'prompts':
+        return (
+          <PromptCustomizationSection
+            promptCustomization={promptCustomization}
+            onPromptCustomizationChange={setPromptCustomization}
+          />
+        );
+      case 'templates':
+        return (
+          <TemplatesSection
+            templates={featureTemplates}
+            onAddTemplate={addFeatureTemplate}
+            onUpdateTemplate={updateFeatureTemplate}
+            onDeleteTemplate={deleteFeatureTemplate}
+            onReorderTemplates={reorderFeatureTemplates}
+          />
+        );
+      case 'model-defaults':
+        return <ModelDefaultsSection />;
+      case 'appearance':
+        return (
+          <AppearanceSection
+            effectiveTheme={globalTheme}
+            onThemeChange={(newTheme) => setTheme(newTheme as typeof theme)}
+          />
+        );
+      case 'editor':
+        return <EditorSection />;
+      case 'terminal':
+        return <TerminalSection />;
+      case 'keyboard':
+        return (
+          <KeyboardShortcutsSection onOpenKeyboardMap={() => setShowKeyboardMapDialog(true)} />
+        );
+      case 'audio':
+        return (
+          <AudioSection muteDoneSound={muteDoneSound} onMuteDoneSoundChange={setMuteDoneSound} />
+        );
+      case 'event-hooks':
+        return <EventHooksSection />;
+      case 'defaults':
+        return (
+          <FeatureDefaultsSection
+            defaultSkipTests={defaultSkipTests}
+            enableDependencyBlocking={enableDependencyBlocking}
+            skipVerificationInAutoMode={skipVerificationInAutoMode}
+            defaultPlanningMode={defaultPlanningMode}
+            defaultRequirePlanApproval={defaultRequirePlanApproval}
+            enableAiCommitMessages={enableAiCommitMessages}
+            defaultFeatureModel={defaultFeatureModel}
+            defaultMaxTurns={defaultMaxTurns}
+            onDefaultSkipTestsChange={setDefaultSkipTests}
+            onEnableDependencyBlockingChange={setEnableDependencyBlocking}
+            onSkipVerificationInAutoModeChange={setSkipVerificationInAutoMode}
+            onDefaultPlanningModeChange={setDefaultPlanningMode}
+            onDefaultRequirePlanApprovalChange={setDefaultRequirePlanApproval}
+            onEnableAiCommitMessagesChange={setEnableAiCommitMessages}
+            onDefaultFeatureModelChange={setDefaultFeatureModel}
+            onDefaultMaxTurnsChange={setDefaultMaxTurns}
+          />
+        );
+      case 'worktrees':
+        return (
+          <WorktreesSection useWorktrees={useWorktrees} onUseWorktreesChange={setUseWorktrees} />
+        );
+      case 'account':
+        return <AccountSection />;
+      case 'security':
+        return (
+          <SecuritySection
+            skipSandboxWarning={skipSandboxWarning}
+            onSkipSandboxWarningChange={setSkipSandboxWarning}
+          />
+        );
+      case 'developer':
+        return <DeveloperSection />;
+      default:
+        return <ApiKeysSection />;
+    }
+  };
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden content-bg" data-testid="settings-view">
+      {/* Header Section */}
+      <SettingsHeader
+        showNavigation={showNavigation}
+        onToggleNavigation={() => setShowNavigation(!showNavigation)}
+        onImportExportClick={() => setShowImportExportDialog(true)}
+      />
+
+      {/* Content Area with Sidebar */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Side Navigation - Overlay on mobile, sidebar on desktop */}
+        <SettingsNavigation
+          navItems={NAV_ITEMS}
+          activeSection={activeView}
+          currentProject={currentProject}
+          onNavigate={handleNavigate}
+          isOpen={showNavigation}
+          onClose={() => setShowNavigation(false)}
+        />
+
+        {/* Content Panel - Shows only the active section */}
+        <div className="flex-1 overflow-y-auto p-4 lg:p-8">
+          <div className="max-w-4xl mx-auto">{renderActiveSection()}</div>
+        </div>
+      </div>
+
+      {/* Keyboard Map Dialog */}
+      <KeyboardMapDialog open={showKeyboardMapDialog} onOpenChange={setShowKeyboardMapDialog} />
+
+      {/* Import/Export Settings Dialog */}
+      <ImportExportDialog open={showImportExportDialog} onOpenChange={setShowImportExportDialog} />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/account/account-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/account/account-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..de3f877b8b01ef95e0d67f82ae8ea455927f853e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/account/account-section.tsx
@@ -0,0 +1,188 @@
+import { useState } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { toast } from 'sonner';
+import { LogOut, User, Code2, RefreshCw } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { logout } from '@/lib/http-api-client';
+import { useAuthStore } from '@/store/auth-store';
+import { useAppStore } from '@/store/app-store';
+import {
+  useAvailableEditors,
+  useEffectiveDefaultEditor,
+  type EditorInfo,
+} from '@/components/views/board-view/worktree-panel/hooks/use-available-editors';
+import { getEditorIcon } from '@/components/icons/editor-icons';
+
+export function AccountSection() {
+  const navigate = useNavigate();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  // Editor settings
+  const { editors, isLoading: isLoadingEditors, isRefreshing, refresh } = useAvailableEditors();
+  const defaultEditorCommand = useAppStore((s) => s.defaultEditorCommand);
+  const setDefaultEditorCommand = useAppStore((s) => s.setDefaultEditorCommand);
+
+  // Use shared hook for effective default editor
+  const effectiveEditor = useEffectiveDefaultEditor(editors);
+
+  // Normalize Select value: if saved editor isn't found, show 'auto'
+  const hasSavedEditor =
+    !!defaultEditorCommand && editors.some((e: EditorInfo) => e.command === defaultEditorCommand);
+  const selectValue = hasSavedEditor ? defaultEditorCommand : 'auto';
+
+  // Get icon component for the effective editor
+  const EffectiveEditorIcon = effectiveEditor ? getEditorIcon(effectiveEditor.command) : null;
+
+  const handleRefreshEditors = async () => {
+    await refresh();
+    toast.success('Editor list refreshed');
+  };
+
+  const handleLogout = async () => {
+    setIsLoggingOut(true);
+    try {
+      await logout();
+      // Reset auth state
+      useAuthStore.getState().resetAuth();
+      // Navigate to logged out page
+      navigate({ to: '/logged-out' });
+    } catch (error) {
+      console.error('Logout failed:', error);
+      setIsLoggingOut(false);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/80 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm'
+      )}
+    >
+      <div className="p-6 border-b border-border/30 bg-gradient-to-r from-primary/5 via-transparent to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center border border-primary/20">
+            <User className="w-5 h-5 text-primary" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Account</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">Manage your session and account.</p>
+      </div>
+      <div className="p-6 space-y-4">
+        {/* Default IDE */}
+        <div className="flex items-center justify-between gap-4 p-4 rounded-xl bg-muted/30 border border-border/30">
+          <div className="flex items-center gap-3.5 min-w-0">
+            <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-muted/50 to-muted/30 border border-border/30 flex items-center justify-center shrink-0">
+              <Code2 className="w-5 h-5 text-muted-foreground" />
+            </div>
+            <div className="min-w-0">
+              <p className="font-medium text-foreground">Default IDE</p>
+              <p className="text-xs text-muted-foreground/70 mt-0.5">
+                Default IDE to use when opening branches or worktrees
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Select
+              value={selectValue}
+              onValueChange={(value) => setDefaultEditorCommand(value === 'auto' ? null : value)}
+              disabled={isLoadingEditors || isRefreshing || editors.length === 0}
+            >
+              <SelectTrigger className="w-[180px] shrink-0">
+                <SelectValue placeholder="Select editor">
+                  {effectiveEditor ? (
+                    <span className="flex items-center gap-2">
+                      {EffectiveEditorIcon && <EffectiveEditorIcon className="w-4 h-4" />}
+                      {effectiveEditor.name}
+                      {selectValue === 'auto' && (
+                        <span className="text-muted-foreground text-xs">(Auto)</span>
+                      )}
+                    </span>
+                  ) : (
+                    'Select editor'
+                  )}
+                </SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="auto">
+                  <span className="flex items-center gap-2">
+                    <Code2 className="w-4 h-4" />
+                    Auto-detect
+                  </span>
+                </SelectItem>
+                {editors.map((editor: EditorInfo) => {
+                  const Icon = getEditorIcon(editor.command);
+                  return (
+                    <SelectItem key={editor.command} value={editor.command}>
+                      <span className="flex items-center gap-2">
+                        <Icon className="w-4 h-4" />
+                        {editor.name}
+                      </span>
+                    </SelectItem>
+                  );
+                })}
+              </SelectContent>
+            </Select>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleRefreshEditors}
+                  disabled={isRefreshing || isLoadingEditors}
+                  className="shrink-0 h-9 w-9"
+                >
+                  {isRefreshing ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Refresh available editors</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+
+        {/* Logout */}
+        <div className="flex items-center justify-between gap-4 p-4 rounded-xl bg-muted/30 border border-border/30">
+          <div className="flex items-center gap-3.5 min-w-0">
+            <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-muted/50 to-muted/30 border border-border/30 flex items-center justify-center shrink-0">
+              <LogOut className="w-5 h-5 text-muted-foreground" />
+            </div>
+            <div className="min-w-0">
+              <p className="font-medium text-foreground">Log Out</p>
+              <p className="text-xs text-muted-foreground/70 mt-0.5">
+                End your current session and return to the login screen
+              </p>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            onClick={handleLogout}
+            disabled={isLoggingOut}
+            data-testid="logout-button"
+            className={cn(
+              'shrink-0 gap-2',
+              'transition-all duration-200 ease-out',
+              'hover:scale-[1.02] active:scale-[0.98]'
+            )}
+          >
+            <LogOut className="w-4 h-4" />
+            {isLoggingOut ? 'Logging out...' : 'Log Out'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/account/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/account/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ecaeaa49236945212fc7f1cc36014679f1ad45ad
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/account/index.ts
@@ -0,0 +1 @@
+export { AccountSection } from './account-section';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/api-keys/api-key-field.tsx b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/api-key-field.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..61b49a1c1883cc8dade6c4340bd52e5c9faead1a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/api-key-field.tsx
@@ -0,0 +1,118 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { AlertCircle, CheckCircle2, Eye, EyeOff, Zap } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import type { ProviderConfig } from '@/config/api-providers';
+
+interface ApiKeyFieldProps {
+  config: ProviderConfig;
+}
+
+export function ApiKeyField({ config }: ApiKeyFieldProps) {
+  const {
+    label,
+    inputId,
+    placeholder,
+    value,
+    setValue,
+    showValue,
+    setShowValue,
+    hasStoredKey,
+    inputTestId,
+    toggleTestId,
+    testButton,
+    result,
+    resultTestId,
+    resultMessageTestId,
+    descriptionPrefix,
+    descriptionLinkHref,
+    descriptionLinkText,
+    descriptionSuffix,
+  } = config;
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <Label htmlFor={inputId} className="text-foreground">
+          {label}
+        </Label>
+        {hasStoredKey && <CheckCircle2 className="w-4 h-4 text-brand-500" />}
+      </div>
+      <div className="flex gap-2">
+        <div className="relative flex-1">
+          <Input
+            id={inputId}
+            type={showValue ? 'text' : 'password'}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder={placeholder}
+            className="pr-10 bg-input border-border text-foreground placeholder:text-muted-foreground"
+            data-testid={inputTestId}
+          />
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground hover:bg-transparent"
+            onClick={() => setShowValue(!showValue)}
+            data-testid={toggleTestId}
+          >
+            {showValue ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+          </Button>
+        </div>
+        <Button
+          type="button"
+          variant="secondary"
+          onClick={testButton.onClick}
+          disabled={testButton.disabled}
+          className="bg-secondary hover:bg-accent text-secondary-foreground border border-border"
+          data-testid={testButton.testId}
+        >
+          {testButton.loading ? (
+            <>
+              <Spinner size="sm" className="mr-2" />
+              Testing...
+            </>
+          ) : (
+            <>
+              <Zap className="w-4 h-4 mr-2" />
+              Test
+            </>
+          )}
+        </Button>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        {descriptionPrefix}{' '}
+        <a
+          href={descriptionLinkHref}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-brand-500 hover:text-brand-400 hover:underline"
+        >
+          {descriptionLinkText}
+        </a>
+        {descriptionSuffix}
+      </p>
+      {result && (
+        <div
+          className={`flex items-center gap-2 p-3 rounded-lg ${
+            result.success
+              ? 'bg-green-500/10 border border-green-500/20 text-green-400'
+              : 'bg-red-500/10 border border-red-500/20 text-red-400'
+          }`}
+          data-testid={resultTestId}
+        >
+          {result.success ? (
+            <CheckCircle2 className="w-4 h-4" />
+          ) : (
+            <AlertCircle className="w-4 h-4" />
+          )}
+          <span className="text-sm" data-testid={resultMessageTestId}>
+            {result.message}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/api-keys/api-keys-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/api-keys-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9f5fd0ec89fa9df61000e10f3bb811029d4e4efd
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/api-keys-section.tsx
@@ -0,0 +1,201 @@
+import { useAppStore } from '@/store/app-store';
+import { useSetupStore } from '@/store/setup-store';
+import { Button } from '@/components/ui/button';
+import { Key, CheckCircle2, Trash2, Info } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { ApiKeyField } from './api-key-field';
+import { buildProviderConfigs } from '@/config/api-providers';
+import { SecurityNotice } from './security-notice';
+import { useApiKeyManagement } from './hooks/use-api-key-management';
+import { cn } from '@/lib/utils';
+import { useState, useCallback } from 'react';
+import { getElectronAPI } from '@/lib/electron';
+import { toast } from 'sonner';
+
+export function ApiKeysSection() {
+  const { apiKeys, setApiKeys } = useAppStore();
+  const { claudeAuthStatus, setClaudeAuthStatus, setCodexAuthStatus } = useSetupStore();
+  const [isDeletingAnthropicKey, setIsDeletingAnthropicKey] = useState(false);
+  const [isDeletingOpenaiKey, setIsDeletingOpenaiKey] = useState(false);
+
+  const { providerConfigParams, handleSave, saved } = useApiKeyManagement();
+
+  const providerConfigs = buildProviderConfigs(providerConfigParams);
+
+  // Delete Anthropic API key
+  const deleteAnthropicKey = useCallback(async () => {
+    setIsDeletingAnthropicKey(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.deleteApiKey) {
+        toast.error('Delete API not available');
+        return;
+      }
+
+      const result = await api.setup.deleteApiKey('anthropic');
+      if (result.success) {
+        setApiKeys({ ...apiKeys, anthropic: '' });
+        setClaudeAuthStatus({
+          authenticated: false,
+          method: 'none',
+          hasCredentialsFile: claudeAuthStatus?.hasCredentialsFile || false,
+        });
+        toast.success('Anthropic API key deleted');
+      } else {
+        toast.error(result.error || 'Failed to delete API key');
+      }
+    } catch {
+      toast.error('Failed to delete API key');
+    } finally {
+      setIsDeletingAnthropicKey(false);
+    }
+  }, [apiKeys, setApiKeys, claudeAuthStatus, setClaudeAuthStatus]);
+
+  // Delete OpenAI API key
+  const deleteOpenaiKey = useCallback(async () => {
+    setIsDeletingOpenaiKey(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.deleteApiKey) {
+        toast.error('Delete API not available');
+        return;
+      }
+
+      const result = await api.setup.deleteApiKey('openai');
+      if (result.success) {
+        setApiKeys({ ...apiKeys, openai: '' });
+        setCodexAuthStatus({
+          authenticated: false,
+          method: 'none',
+        });
+        toast.success('OpenAI API key deleted');
+      } else {
+        toast.error(result.error || 'Failed to delete API key');
+      }
+    } catch {
+      toast.error('Failed to delete API key');
+    } finally {
+      setIsDeletingOpenaiKey(false);
+    }
+  }, [apiKeys, setApiKeys, setCodexAuthStatus]);
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Key className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">API Keys</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure your AI provider API keys. Keys are stored locally in your browser.
+        </p>
+      </div>
+      <div className="p-6 space-y-6">
+        {/* API Key Fields with contextual info */}
+        {providerConfigs.map((provider) => (
+          <div key={provider.key}>
+            <ApiKeyField config={provider} />
+            {/* Anthropic-specific provider info */}
+            {provider.key === 'anthropic' && (
+              <div className="mt-3 p-3 rounded-lg bg-blue-500/5 border border-blue-500/20">
+                <div className="flex gap-2">
+                  <Info className="w-4 h-4 text-blue-500 flex-shrink-0 mt-0.5" />
+                  <div className="text-xs text-muted-foreground space-y-1">
+                    <p>
+                      <span className="font-medium text-foreground/80">
+                        Using Claude Compatible Providers?
+                      </span>{' '}
+                      Add a provider in <span className="text-blue-500">AI Providers → Claude</span>{' '}
+                      with{' '}
+                      <span className="font-mono text-[10px] bg-muted/50 px-1 rounded">
+                        credentials
+                      </span>{' '}
+                      as the API key source to use this key.
+                    </p>
+                    <p>
+                      For alternative providers (z.AI GLM, MiniMax, OpenRouter), add a provider with{' '}
+                      <span className="font-mono text-[10px] bg-muted/50 px-1 rounded">inline</span>{' '}
+                      key source and enter the provider's API key directly.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+
+        {/* Security Notice */}
+        <SecurityNotice />
+
+        {/* Action Buttons */}
+        <div className="flex flex-wrap items-center gap-3 pt-2">
+          <Button
+            onClick={handleSave}
+            data-testid="save-settings"
+            className={cn(
+              'min-w-[140px] h-10',
+              'bg-gradient-to-r from-brand-500 to-brand-600',
+              'hover:from-brand-600 hover:to-brand-600',
+              'text-white font-medium border-0',
+              'shadow-md shadow-brand-500/20 hover:shadow-lg hover:shadow-brand-500/25',
+              'transition-all duration-200 ease-out',
+              'hover:scale-[1.02] active:scale-[0.98]'
+            )}
+          >
+            {saved ? (
+              <>
+                <CheckCircle2 className="w-4 h-4 mr-2" />
+                Saved!
+              </>
+            ) : (
+              'Save API Keys'
+            )}
+          </Button>
+
+          {apiKeys.anthropic && (
+            <Button
+              onClick={deleteAnthropicKey}
+              disabled={isDeletingAnthropicKey}
+              variant="outline"
+              className="h-10 border-red-500/30 text-red-500 hover:bg-red-500/10 hover:border-red-500/50"
+              data-testid="delete-anthropic-key"
+            >
+              {isDeletingAnthropicKey ? (
+                <Spinner size="sm" className="mr-2" />
+              ) : (
+                <Trash2 className="w-4 h-4 mr-2" />
+              )}
+              Delete Anthropic Key
+            </Button>
+          )}
+
+          {apiKeys.openai && (
+            <Button
+              onClick={deleteOpenaiKey}
+              disabled={isDeletingOpenaiKey}
+              variant="outline"
+              className="h-10 border-red-500/30 text-red-500 hover:bg-red-500/10 hover:border-red-500/50"
+              data-testid="delete-openai-key"
+            >
+              {isDeletingOpenaiKey ? (
+                <Spinner size="sm" className="mr-2" />
+              ) : (
+                <Trash2 className="w-4 h-4 mr-2" />
+              )}
+              Delete OpenAI Key
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/api-keys/authentication-status-display.tsx b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/authentication-status-display.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6f42d9a672ca2e4b79ffee4ea4230cfb6ff29261
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/authentication-status-display.tsx
@@ -0,0 +1,83 @@
+import { Label } from '@/components/ui/label';
+import { CheckCircle2, AlertCircle, Info, Terminal } from 'lucide-react';
+import type { ClaudeAuthStatus } from '@/store/setup-store';
+
+interface AuthenticationStatusDisplayProps {
+  claudeAuthStatus: ClaudeAuthStatus | null;
+  apiKeyStatus: {
+    hasAnthropicKey: boolean;
+    hasGoogleKey: boolean;
+  } | null;
+  apiKeys: {
+    anthropic: string;
+    google: string;
+  };
+}
+
+export function AuthenticationStatusDisplay({
+  claudeAuthStatus,
+  apiKeyStatus,
+  apiKeys,
+}: AuthenticationStatusDisplayProps) {
+  return (
+    <div className="space-y-4 pt-4 border-t border-border">
+      <div className="flex items-center gap-2 mb-3">
+        <Info className="w-4 h-4 text-brand-500" />
+        <Label className="text-foreground font-semibold">
+          Current Authentication Configuration
+        </Label>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {/* Claude Authentication Status */}
+        <div className="p-3 rounded-lg bg-card border border-border">
+          <div className="flex items-center gap-2 mb-1.5">
+            <Terminal className="w-4 h-4 text-brand-500" />
+            <span className="text-sm font-medium text-foreground">Claude (Anthropic)</span>
+          </div>
+          <div className="space-y-1.5 text-xs min-h-12">
+            {claudeAuthStatus?.authenticated ? (
+              <>
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 className="w-3 h-3 text-green-500 shrink-0" />
+                  <span className="text-green-400 font-medium">Authenticated</span>
+                </div>
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <Info className="w-3 h-3 shrink-0" />
+                  <span>
+                    {claudeAuthStatus.method === 'oauth_token'
+                      ? 'Using stored OAuth token (subscription)'
+                      : claudeAuthStatus.method === 'api_key_env'
+                        ? 'Using ANTHROPIC_API_KEY'
+                        : claudeAuthStatus.method === 'api_key'
+                          ? 'Using stored API key'
+                          : claudeAuthStatus.method === 'credentials_file'
+                            ? 'Using credentials file'
+                            : claudeAuthStatus.method === 'cli_authenticated'
+                              ? 'Using Claude CLI authentication'
+                              : `Using ${claudeAuthStatus.method || 'detected'} authentication`}
+                  </span>
+                </div>
+              </>
+            ) : apiKeyStatus?.hasAnthropicKey ? (
+              <div className="flex items-center gap-2 text-blue-400">
+                <Info className="w-3 h-3 shrink-0" />
+                <span>Using environment variable (ANTHROPIC_API_KEY)</span>
+              </div>
+            ) : apiKeys.anthropic ? (
+              <div className="flex items-center gap-2 text-blue-400">
+                <Info className="w-3 h-3 shrink-0" />
+                <span>Using manual API key from settings</span>
+              </div>
+            ) : (
+              <div className="flex items-center gap-1.5 text-yellow-500 py-0.5">
+                <AlertCircle className="w-3 h-3 shrink-0" />
+                <span className="text-xs">Not configured</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/api-keys/claude-usage-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/claude-usage-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d2300c88957f925270d0c16f28f0a444b7a4a835
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/claude-usage-section.tsx
@@ -0,0 +1,186 @@
+import { useMemo } from 'react';
+import { cn } from '@/lib/utils';
+import { useSetupStore } from '@/store/setup-store';
+import { useClaudeUsage } from '@/hooks/queries';
+import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
+import { RefreshCw, AlertCircle } from 'lucide-react';
+
+const CLAUDE_USAGE_TITLE = 'Claude Usage';
+const CLAUDE_USAGE_SUBTITLE = 'Shows usage limits reported by the Claude CLI.';
+const CLAUDE_AUTH_WARNING = 'Authenticate Claude CLI to view usage limits.';
+const CLAUDE_LOGIN_COMMAND = 'claude login';
+const CLAUDE_NO_USAGE_MESSAGE =
+  'Usage limits are not available yet. Try refreshing if this persists.';
+const UPDATED_LABEL = 'Updated';
+const CLAUDE_REFRESH_LABEL = 'Refresh Claude usage';
+const WARNING_THRESHOLD = 75;
+const CAUTION_THRESHOLD = 50;
+const MAX_PERCENTAGE = 100;
+// Using purple/indigo for Claude branding
+const USAGE_COLOR_CRITICAL = 'bg-red-500';
+const USAGE_COLOR_WARNING = 'bg-amber-500';
+const USAGE_COLOR_OK = 'bg-indigo-500';
+
+/**
+ * Get the appropriate color class for a usage percentage
+ */
+function getUsageColor(percentage: number): string {
+  if (percentage >= WARNING_THRESHOLD) {
+    return USAGE_COLOR_CRITICAL;
+  }
+  if (percentage >= CAUTION_THRESHOLD) {
+    return USAGE_COLOR_WARNING;
+  }
+  return USAGE_COLOR_OK;
+}
+
+/**
+ * Individual usage card displaying a usage metric with progress bar
+ */
+function UsageCard({
+  title,
+  subtitle,
+  percentage,
+  resetText,
+}: {
+  title: string;
+  subtitle: string;
+  percentage: number;
+  resetText?: string;
+}) {
+  const safePercentage = Math.min(Math.max(percentage, 0), MAX_PERCENTAGE);
+
+  return (
+    <div className="rounded-xl border border-border/60 bg-card/50 p-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-semibold text-foreground">{title}</p>
+          <p className="text-xs text-muted-foreground">{subtitle}</p>
+        </div>
+        <span className="text-sm font-semibold text-foreground">{Math.round(safePercentage)}%</span>
+      </div>
+      <div className="mt-3 h-2 w-full rounded-full bg-secondary/60">
+        <div
+          className={cn(
+            'h-full rounded-full transition-all duration-300',
+            getUsageColor(safePercentage)
+          )}
+          style={{ width: `${safePercentage}%` }}
+        />
+      </div>
+      {resetText && <p className="mt-2 text-xs text-muted-foreground">{resetText}</p>}
+    </div>
+  );
+}
+
+export function ClaudeUsageSection() {
+  const claudeAuthStatus = useSetupStore((state) => state.claudeAuthStatus);
+
+  const canFetchUsage = !!claudeAuthStatus?.authenticated;
+
+  // Use React Query for data fetching with automatic polling
+  const {
+    data: claudeUsage,
+    isLoading,
+    isFetching,
+    error,
+    dataUpdatedAt,
+    refetch,
+  } = useClaudeUsage(canFetchUsage);
+
+  // If we have usage data, we can show it even if auth status is unsure
+  const hasUsage = !!claudeUsage;
+
+  const lastUpdatedLabel = useMemo(() => {
+    return dataUpdatedAt ? new Date(dataUpdatedAt).toLocaleString() : null;
+  }, [dataUpdatedAt]);
+
+  const errorMessage = error instanceof Error ? error.message : error ? String(error) : null;
+
+  const showAuthWarning =
+    (!canFetchUsage && !hasUsage && !isLoading) ||
+    (errorMessage && errorMessage.includes('Authentication required'));
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-indigo-500/20 to-indigo-600/10 flex items-center justify-center border border-indigo-500/20">
+            <div className="w-5 h-5 rounded-full bg-indigo-500/50" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            {CLAUDE_USAGE_TITLE}
+          </h2>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => refetch()}
+            disabled={isFetching}
+            className="ml-auto h-9 w-9 rounded-lg hover:bg-accent/50"
+            data-testid="refresh-claude-usage"
+            title={CLAUDE_REFRESH_LABEL}
+          >
+            {isFetching ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">{CLAUDE_USAGE_SUBTITLE}</p>
+      </div>
+
+      <div className="p-6 space-y-4">
+        {showAuthWarning && (
+          <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+            <AlertCircle className="w-5 h-5 text-amber-500 mt-0.5" />
+            <div className="text-sm text-amber-400">
+              {CLAUDE_AUTH_WARNING} Run <span className="font-mono">{CLAUDE_LOGIN_COMMAND}</span>.
+            </div>
+          </div>
+        )}
+
+        {errorMessage && !showAuthWarning && (
+          <div className="flex items-start gap-3 p-4 rounded-xl bg-red-500/10 border border-red-500/20">
+            <AlertCircle className="w-5 h-5 text-red-500 mt-0.5" />
+            <div className="text-sm text-red-400">{errorMessage}</div>
+          </div>
+        )}
+
+        {hasUsage && (
+          <div className="grid gap-3 sm:grid-cols-2">
+            <UsageCard
+              title="Session Limit"
+              subtitle="5-hour rolling window"
+              percentage={claudeUsage.sessionPercentage}
+              resetText={claudeUsage.sessionResetText}
+            />
+
+            <UsageCard
+              title="Weekly Limit"
+              subtitle="Resets every Thursday"
+              percentage={claudeUsage.weeklyPercentage}
+              resetText={claudeUsage.weeklyResetText}
+            />
+          </div>
+        )}
+
+        {!hasUsage && !errorMessage && !showAuthWarning && !isLoading && (
+          <div className="rounded-xl border border-border/60 bg-secondary/20 p-4 text-xs text-muted-foreground">
+            {CLAUDE_NO_USAGE_MESSAGE}
+          </div>
+        )}
+
+        {lastUpdatedLabel && (
+          <div className="text-[10px] text-muted-foreground text-right">
+            {UPDATED_LABEL} {lastUpdatedLabel}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/api-keys/hooks/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7b953096af82577d71ec8d7ba70a46598e713c77
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/hooks/index.ts
@@ -0,0 +1 @@
+export { useApiKeyManagement } from './use-api-key-management';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/api-keys/hooks/use-api-key-management.ts b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/hooks/use-api-key-management.ts
new file mode 100644
index 0000000000000000000000000000000000000000..23ccd192484b9350f2470d8125bdeca63a4eec15
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/hooks/use-api-key-management.ts
@@ -0,0 +1,380 @@
+// API key management state with validation and persistence
+import { useState, useEffect } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { createLogger } from '@automaker/utils/logger';
+import { useAppStore } from '@/store/app-store';
+import { useSetupStore, type ZaiAuthMethod } from '@/store/setup-store';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { queryKeys } from '@/lib/query-keys';
+
+const logger = createLogger('ApiKeyManagement');
+import { getElectronAPI } from '@/lib/electron';
+import type { ProviderConfigParams } from '@/config/api-providers';
+
+interface TestResult {
+  success: boolean;
+  message: string;
+}
+
+interface ApiKeyStatus {
+  hasAnthropicKey: boolean;
+  hasGoogleKey: boolean;
+  hasOpenaiKey: boolean;
+  hasZaiKey: boolean;
+}
+
+/** Shape of the configure API response */
+interface ConfigureResponse {
+  success?: boolean;
+  isAvailable?: boolean;
+  error?: string;
+}
+
+/** Shape of a verify API response */
+interface VerifyResponse {
+  success?: boolean;
+  authenticated?: boolean;
+  message?: string;
+  error?: string;
+}
+
+/** Shape of an API key status response from the env check */
+interface ApiKeyStatusResponse {
+  success: boolean;
+  hasAnthropicKey: boolean;
+  hasGoogleKey: boolean;
+  hasOpenaiKey: boolean;
+  hasZaiKey?: boolean;
+}
+
+/**
+ * Custom hook for managing API key state and operations
+ * Handles input values, visibility toggles, connection testing, and saving
+ */
+export function useApiKeyManagement() {
+  const { apiKeys, setApiKeys } = useAppStore();
+  const { setZaiAuthStatus, zaiAuthStatus } = useSetupStore();
+  const queryClient = useQueryClient();
+
+  // API key values
+  const [anthropicKey, setAnthropicKey] = useState<string>(apiKeys.anthropic);
+  const [googleKey, setGoogleKey] = useState<string>(apiKeys.google);
+  const [openaiKey, setOpenaiKey] = useState<string>(apiKeys.openai);
+  const [zaiKey, setZaiKey] = useState<string>(apiKeys.zai);
+
+  // Visibility toggles
+  const [showAnthropicKey, setShowAnthropicKey] = useState(false);
+  const [showGoogleKey, setShowGoogleKey] = useState(false);
+  const [showOpenaiKey, setShowOpenaiKey] = useState(false);
+  const [showZaiKey, setShowZaiKey] = useState(false);
+
+  // Test connection states
+  const [testingConnection, setTestingConnection] = useState(false);
+  const [testResult, setTestResult] = useState<TestResult | null>(null);
+  const [testingGeminiConnection, setTestingGeminiConnection] = useState(false);
+  const [geminiTestResult, setGeminiTestResult] = useState<TestResult | null>(null);
+  const [testingOpenaiConnection, setTestingOpenaiConnection] = useState(false);
+  const [openaiTestResult, setOpenaiTestResult] = useState<TestResult | null>(null);
+  const [testingZaiConnection, setTestingZaiConnection] = useState(false);
+  const [zaiTestResult, setZaiTestResult] = useState<TestResult | null>(null);
+
+  // API key status from environment
+  const [apiKeyStatus, setApiKeyStatus] = useState<ApiKeyStatus | null>(null);
+
+  // Save state
+  const [saved, setSaved] = useState(false);
+
+  // Sync local state with store
+  useEffect(() => {
+    setAnthropicKey(apiKeys.anthropic);
+    setGoogleKey(apiKeys.google);
+    setOpenaiKey(apiKeys.openai);
+    setZaiKey(apiKeys.zai);
+  }, [apiKeys]);
+
+  // Check API key status from environment on mount
+  useEffect(() => {
+    const checkApiKeyStatus = async () => {
+      const api = getElectronAPI();
+      if (api?.setup?.getApiKeys) {
+        try {
+          const status: ApiKeyStatusResponse = await api.setup.getApiKeys();
+          if (status.success) {
+            setApiKeyStatus({
+              hasAnthropicKey: status.hasAnthropicKey,
+              hasGoogleKey: status.hasGoogleKey,
+              hasOpenaiKey: status.hasOpenaiKey,
+              hasZaiKey: status.hasZaiKey || false,
+            });
+          }
+        } catch (error) {
+          logger.error('Failed to check API key status:', error);
+        }
+      }
+    };
+    checkApiKeyStatus();
+  }, []);
+
+  // Test Anthropic/Claude connection
+  const handleTestAnthropicConnection = async (): Promise<void> => {
+    // Validate input first
+    if (!anthropicKey || anthropicKey.trim().length === 0) {
+      setTestResult({
+        success: false,
+        message: 'Please enter an API key to test.',
+      });
+      return;
+    }
+
+    setTestingConnection(true);
+    setTestResult(null);
+
+    try {
+      const api = getHttpApiClient();
+      // Pass the current input value to test unsaved keys
+      const data = await api.setup.verifyClaudeAuth('api_key', anthropicKey);
+
+      if (data.success && data.authenticated) {
+        setTestResult({
+          success: true,
+          message: 'Connection successful! Claude responded.',
+        });
+      } else {
+        setTestResult({
+          success: false,
+          message: data.error || 'Failed to connect to Claude API.',
+        });
+      }
+    } catch {
+      setTestResult({
+        success: false,
+        message: 'Network error. Please check your connection.',
+      });
+    } finally {
+      setTestingConnection(false);
+    }
+  };
+
+  // Test Google/Gemini connection
+  // TODO: Add backend endpoint for Gemini API key verification
+  const handleTestGeminiConnection = async (): Promise<void> => {
+    setTestingGeminiConnection(true);
+    setGeminiTestResult(null);
+
+    // Basic validation - check key format
+    if (!googleKey || googleKey.trim().length < 10) {
+      setGeminiTestResult({
+        success: false,
+        message: 'Please enter a valid API key.',
+      });
+      setTestingGeminiConnection(false);
+      return;
+    }
+
+    // For now, just validate the key format (starts with expected prefix)
+    // Full verification requires a backend endpoint
+    setGeminiTestResult({
+      success: true,
+      message: 'API key saved. Connection test not yet available.',
+    });
+    setTestingGeminiConnection(false);
+  };
+
+  // Test OpenAI/Codex connection
+  const handleTestOpenaiConnection = async (): Promise<void> => {
+    setTestingOpenaiConnection(true);
+    setOpenaiTestResult(null);
+
+    try {
+      const api = getHttpApiClient();
+      const data = await api.setup.verifyCodexAuth('api_key', openaiKey);
+
+      if (data.success && data.authenticated) {
+        setOpenaiTestResult({
+          success: true,
+          message: 'Connection successful! Codex responded.',
+        });
+      } else {
+        setOpenaiTestResult({
+          success: false,
+          message: data.error || 'Failed to connect to OpenAI API.',
+        });
+      }
+    } catch {
+      setOpenaiTestResult({
+        success: false,
+        message: 'Network error. Please check your connection.',
+      });
+    } finally {
+      setTestingOpenaiConnection(false);
+    }
+  };
+
+  // Test z.ai connection
+  const handleTestZaiConnection = async (): Promise<void> => {
+    setTestingZaiConnection(true);
+    setZaiTestResult(null);
+
+    // Validate input first
+    if (!zaiKey || zaiKey.trim().length === 0) {
+      setZaiTestResult({
+        success: false,
+        message: 'Please enter an API key to test.',
+      });
+      setTestingZaiConnection(false);
+      return;
+    }
+
+    try {
+      const api = getElectronAPI();
+      // Use the verify endpoint to test the key without storing it
+      const response: VerifyResponse | undefined = await api.zai?.verify(zaiKey);
+
+      if (response?.success && response?.authenticated) {
+        setZaiTestResult({
+          success: true,
+          message: response.message || 'Connection successful! z.ai API responded.',
+        });
+      } else {
+        setZaiTestResult({
+          success: false,
+          message: response?.error || 'Failed to connect to z.ai API.',
+        });
+      }
+    } catch {
+      setZaiTestResult({
+        success: false,
+        message: 'Network error. Please check your connection.',
+      });
+    } finally {
+      setTestingZaiConnection(false);
+    }
+  };
+
+  // Save API keys
+  const handleSave = async (): Promise<void> => {
+    // Configure z.ai service on the server with the new key
+    if (zaiKey && zaiKey.trim().length > 0) {
+      try {
+        const api = getHttpApiClient();
+        const result: ConfigureResponse = await api.zai.configure(zaiKey.trim());
+
+        if (result.success) {
+          // Only persist to local store after server confirms success
+          setApiKeys({
+            anthropic: anthropicKey,
+            google: googleKey,
+            openai: openaiKey,
+            zai: zaiKey,
+          });
+
+          // Preserve the existing hasEnvApiKey flag from current auth status
+          const currentHasEnvApiKey = zaiAuthStatus?.hasEnvApiKey ?? false;
+
+          // Update z.ai auth status in the store
+          setZaiAuthStatus({
+            authenticated: true,
+            method: 'api_key' as ZaiAuthMethod,
+            hasApiKey: true,
+            hasEnvApiKey: currentHasEnvApiKey,
+          });
+          // Invalidate the z.ai usage query so it refetches with the new key
+          await queryClient.invalidateQueries({ queryKey: queryKeys.usage.zai() });
+          logger.info('z.ai API key configured successfully');
+        } else {
+          // Server config failed - still save other keys but log the issue
+          logger.error('z.ai API key configuration failed on server');
+          setApiKeys({
+            anthropic: anthropicKey,
+            google: googleKey,
+            openai: openaiKey,
+            zai: zaiKey,
+          });
+        }
+      } catch (error) {
+        logger.error('Failed to configure z.ai API key:', error);
+        // Still save other keys even if z.ai config fails
+        setApiKeys({
+          anthropic: anthropicKey,
+          google: googleKey,
+          openai: openaiKey,
+          zai: zaiKey,
+        });
+      }
+    } else {
+      // Save keys (z.ai key is empty/removed)
+      setApiKeys({
+        anthropic: anthropicKey,
+        google: googleKey,
+        openai: openaiKey,
+        zai: zaiKey,
+      });
+
+      // Clear z.ai auth status if key is removed
+      setZaiAuthStatus({
+        authenticated: false,
+        method: 'none' as ZaiAuthMethod,
+        hasApiKey: false,
+        hasEnvApiKey: zaiAuthStatus?.hasEnvApiKey ?? false,
+      });
+      // Invalidate the query to clear any cached data
+      await queryClient.invalidateQueries({ queryKey: queryKeys.usage.zai() });
+    }
+
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  };
+
+  // Build provider config params for buildProviderConfigs
+  const providerConfigParams: ProviderConfigParams = {
+    apiKeys,
+    anthropic: {
+      value: anthropicKey,
+      setValue: setAnthropicKey,
+      show: showAnthropicKey,
+      setShow: setShowAnthropicKey,
+      testing: testingConnection,
+      onTest: handleTestAnthropicConnection,
+      result: testResult,
+    },
+    google: {
+      value: googleKey,
+      setValue: setGoogleKey,
+      show: showGoogleKey,
+      setShow: setShowGoogleKey,
+      testing: testingGeminiConnection,
+      onTest: handleTestGeminiConnection,
+      result: geminiTestResult,
+    },
+    openai: {
+      value: openaiKey,
+      setValue: setOpenaiKey,
+      show: showOpenaiKey,
+      setShow: setShowOpenaiKey,
+      testing: testingOpenaiConnection,
+      onTest: handleTestOpenaiConnection,
+      result: openaiTestResult,
+    },
+    zai: {
+      value: zaiKey,
+      setValue: setZaiKey,
+      show: showZaiKey,
+      setShow: setShowZaiKey,
+      testing: testingZaiConnection,
+      onTest: handleTestZaiConnection,
+      result: zaiTestResult,
+    },
+  };
+
+  return {
+    // Provider config params for buildProviderConfigs
+    providerConfigParams,
+
+    // API key status from environment
+    apiKeyStatus,
+
+    // Save handler and state
+    handleSave,
+    saved,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/api-keys/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0a51c82fef091cc6091fe8a8ced937afaefcc0de
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/index.ts
@@ -0,0 +1,4 @@
+export { ApiKeyField } from './api-key-field';
+export { ApiKeysSection } from './api-keys-section';
+export { AuthenticationStatusDisplay } from './authentication-status-display';
+export { SecurityNotice } from './security-notice';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/api-keys/security-notice.tsx b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/security-notice.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..afbf687b48008b41a04805c45156854ea0b9cc00
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/api-keys/security-notice.tsx
@@ -0,0 +1,21 @@
+import { AlertCircle } from 'lucide-react';
+
+interface SecurityNoticeProps {
+  title?: string;
+  message?: string;
+}
+
+export function SecurityNotice({
+  title = 'Security Notice',
+  message = "API keys are stored in your browser's local storage. Never share your API keys or commit them to version control.",
+}: SecurityNoticeProps) {
+  return (
+    <div className="flex items-start gap-3 p-4 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
+      <AlertCircle className="w-5 h-5 text-yellow-500 mt-0.5 shrink-0" />
+      <div className="text-sm">
+        <p className="font-medium text-yellow-500">{title}</p>
+        <p className="text-yellow-500/80 text-xs mt-1">{message}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/appearance/appearance-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/appearance/appearance-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b6bbbecde19962b6b46afe0ca40df1cb211dde4a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/appearance/appearance-section.tsx
@@ -0,0 +1,344 @@
+import { useState, useEffect } from 'react';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Palette, Moon, Sun, Type, Sparkles, PanelLeft, Columns2, LayoutList } from 'lucide-react';
+import { darkThemes, lightThemes } from '@/config/theme-options';
+import {
+  UI_SANS_FONT_OPTIONS,
+  UI_MONO_FONT_OPTIONS,
+  DEFAULT_FONT_VALUE,
+} from '@/config/ui-font-options';
+import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import { FontSelector } from '@/components/shared';
+import type { Theme } from '../shared/types';
+
+interface AppearanceSectionProps {
+  effectiveTheme: Theme;
+  onThemeChange: (theme: Theme) => void;
+}
+
+export function AppearanceSection({ effectiveTheme, onThemeChange }: AppearanceSectionProps) {
+  const {
+    fontFamilySans,
+    fontFamilyMono,
+    setFontSans,
+    setFontMono,
+    disableSplashScreen,
+    setDisableSplashScreen,
+    sidebarStyle,
+    setSidebarStyle,
+    defaultSortNewestCardOnTop,
+    setDefaultSortNewestCardOnTop,
+  } = useAppStore();
+
+  // Determine if current theme is light or dark
+  const isLightTheme = lightThemes.some((t) => t.value === effectiveTheme);
+  const [activeTab, setActiveTab] = useState<'dark' | 'light'>(isLightTheme ? 'light' : 'dark');
+
+  // Sync active tab when theme changes
+  useEffect(() => {
+    const currentIsLight = lightThemes.some((t) => t.value === effectiveTheme);
+    setActiveTab(currentIsLight ? 'light' : 'dark');
+  }, [effectiveTheme]);
+
+  const themesToShow = activeTab === 'dark' ? darkThemes : lightThemes;
+
+  // Convert null to 'default' for Select component
+  // Also fallback to default if the stored font is not in the available options
+  const isValidSansFont = (font: string | null): boolean => {
+    if (!font) return false;
+    return UI_SANS_FONT_OPTIONS.some((opt) => opt.value === font);
+  };
+  const isValidMonoFont = (font: string | null): boolean => {
+    if (!font) return false;
+    return UI_MONO_FONT_OPTIONS.some((opt) => opt.value === font);
+  };
+  const fontSansValue =
+    fontFamilySans && isValidSansFont(fontFamilySans) ? fontFamilySans : DEFAULT_FONT_VALUE;
+  const fontMonoValue =
+    fontFamilyMono && isValidMonoFont(fontFamilyMono) ? fontFamilyMono : DEFAULT_FONT_VALUE;
+
+  const handleFontSansChange = (value: string) => {
+    setFontSans(value === DEFAULT_FONT_VALUE ? null : value);
+  };
+
+  const handleFontMonoChange = (value: string) => {
+    setFontMono(value === DEFAULT_FONT_VALUE ? null : value);
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Palette className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Appearance</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Customize the look and feel of your application.
+        </p>
+      </div>
+      <div className="p-6 space-y-6">
+        {/* Theme Section */}
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <Label className="text-foreground font-medium">Theme</Label>
+            {/* Dark/Light Tabs */}
+            <div className="flex gap-1 p-1 rounded-lg bg-accent/30">
+              <button
+                onClick={() => setActiveTab('dark')}
+                className={cn(
+                  'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200',
+                  activeTab === 'dark'
+                    ? 'bg-brand-500 text-white shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground'
+                )}
+              >
+                <Moon className="w-3.5 h-3.5" />
+                Dark
+              </button>
+              <button
+                onClick={() => setActiveTab('light')}
+                className={cn(
+                  'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200',
+                  activeTab === 'light'
+                    ? 'bg-brand-500 text-white shadow-sm'
+                    : 'text-muted-foreground hover:text-foreground'
+                )}
+              >
+                <Sun className="w-3.5 h-3.5" />
+                Light
+              </button>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+            {themesToShow.map(({ value, label, Icon, testId, color }) => {
+              const isActive = effectiveTheme === value;
+              return (
+                <button
+                  key={value}
+                  onClick={() => onThemeChange(value)}
+                  className={cn(
+                    'group flex items-center justify-center gap-2.5 px-4 py-3.5 rounded-xl',
+                    'text-sm font-medium transition-all duration-200 ease-out',
+                    isActive
+                      ? [
+                          'bg-gradient-to-br from-brand-500/15 to-brand-600/10',
+                          'border-2 border-brand-500/40',
+                          'text-foreground',
+                          'shadow-md shadow-brand-500/10',
+                        ]
+                      : [
+                          'bg-accent/30 hover:bg-accent/50',
+                          'border border-border/50 hover:border-border',
+                          'text-muted-foreground hover:text-foreground',
+                          'hover:shadow-sm',
+                        ],
+                    'hover:scale-[1.02] active:scale-[0.98]'
+                  )}
+                  data-testid={testId}
+                >
+                  <Icon className="w-4 h-4 transition-all duration-200" style={{ color }} />
+                  <span>{label}</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Fonts Section */}
+        <div className="space-y-4 pt-6 border-t border-border/50">
+          <div className="flex items-center gap-2 mb-4">
+            <Type className="w-4 h-4 text-muted-foreground" />
+            <Label className="text-foreground font-medium">Fonts</Label>
+          </div>
+          <p className="text-xs text-muted-foreground -mt-2 mb-4">
+            Set default fonts for all projects. Individual projects can override these settings.
+          </p>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* UI Font Selector */}
+            <div className="space-y-2">
+              <Label htmlFor="global-ui-font-select" className="text-sm">
+                UI Font
+              </Label>
+              <FontSelector
+                id="global-ui-font-select"
+                value={fontSansValue}
+                options={UI_SANS_FONT_OPTIONS}
+                placeholder="Default (Geist Sans)"
+                onChange={handleFontSansChange}
+              />
+              <p className="text-xs text-muted-foreground">
+                Used for headings, labels, and UI text
+              </p>
+            </div>
+
+            {/* Code Font Selector */}
+            <div className="space-y-2">
+              <Label htmlFor="global-code-font-select" className="text-sm">
+                Code Font
+              </Label>
+              <FontSelector
+                id="global-code-font-select"
+                value={fontMonoValue}
+                options={UI_MONO_FONT_OPTIONS}
+                placeholder="Default (Geist Mono)"
+                onChange={handleFontMonoChange}
+              />
+              <p className="text-xs text-muted-foreground">
+                Used for code blocks and monospaced text
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Splash Screen Section */}
+        <div className="space-y-4 pt-6 border-t border-border/50">
+          <div className="flex items-center gap-2 mb-4">
+            <Sparkles className="w-4 h-4 text-muted-foreground" />
+            <Label className="text-foreground font-medium">Startup</Label>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <Label htmlFor="disable-splash-screen" className="text-sm">
+                Disable Splash Screen
+              </Label>
+              <p className="text-xs text-muted-foreground">
+                Skip the animated splash screen when the app starts
+              </p>
+            </div>
+            <Switch
+              id="disable-splash-screen"
+              checked={disableSplashScreen}
+              onCheckedChange={setDisableSplashScreen}
+            />
+          </div>
+        </div>
+
+        {/* Sidebar Style Section */}
+        <div className="space-y-4 pt-6 border-t border-border/50">
+          <div className="flex items-center gap-2 mb-4">
+            <PanelLeft className="w-4 h-4 text-muted-foreground" />
+            <Label className="text-foreground font-medium">Sidebar Layout</Label>
+          </div>
+          <p className="text-xs text-muted-foreground -mt-2 mb-4">
+            Choose between a modern unified sidebar or classic Discord-style layout with a separate
+            project switcher.
+          </p>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* Unified Sidebar Option */}
+            <button
+              onClick={() => setSidebarStyle('unified')}
+              className={cn(
+                'group flex flex-col items-center gap-3 p-4 rounded-xl',
+                'text-sm font-medium transition-all duration-200 ease-out',
+                sidebarStyle === 'unified'
+                  ? [
+                      'bg-gradient-to-br from-brand-500/15 to-brand-600/10',
+                      'border-2 border-brand-500/40',
+                      'text-foreground',
+                      'shadow-md shadow-brand-500/10',
+                    ]
+                  : [
+                      'bg-accent/30 hover:bg-accent/50',
+                      'border border-border/50 hover:border-border',
+                      'text-muted-foreground hover:text-foreground',
+                      'hover:shadow-sm',
+                    ],
+                'hover:scale-[1.02] active:scale-[0.98]'
+              )}
+              data-testid="sidebar-style-unified"
+            >
+              <PanelLeft
+                className={cn(
+                  'w-8 h-8 transition-all duration-200',
+                  sidebarStyle === 'unified' ? 'text-brand-500' : 'text-muted-foreground'
+                )}
+              />
+              <div className="text-center">
+                <div className="font-medium">Unified</div>
+                <div className="text-xs text-muted-foreground mt-1">
+                  Single sidebar with project dropdown
+                </div>
+              </div>
+            </button>
+
+            {/* Discord-style Sidebar Option */}
+            <button
+              onClick={() => setSidebarStyle('discord')}
+              className={cn(
+                'group flex flex-col items-center gap-3 p-4 rounded-xl',
+                'text-sm font-medium transition-all duration-200 ease-out',
+                sidebarStyle === 'discord'
+                  ? [
+                      'bg-gradient-to-br from-brand-500/15 to-brand-600/10',
+                      'border-2 border-brand-500/40',
+                      'text-foreground',
+                      'shadow-md shadow-brand-500/10',
+                    ]
+                  : [
+                      'bg-accent/30 hover:bg-accent/50',
+                      'border border-border/50 hover:border-border',
+                      'text-muted-foreground hover:text-foreground',
+                      'hover:shadow-sm',
+                    ],
+                'hover:scale-[1.02] active:scale-[0.98]'
+              )}
+              data-testid="sidebar-style-discord"
+            >
+              <Columns2
+                className={cn(
+                  'w-8 h-8 transition-all duration-200',
+                  sidebarStyle === 'discord' ? 'text-brand-500' : 'text-muted-foreground'
+                )}
+              />
+              <div className="text-center">
+                <div className="font-medium">Classic</div>
+                <div className="text-xs text-muted-foreground mt-1">
+                  Separate project switcher + sidebar
+                </div>
+              </div>
+            </button>
+          </div>
+        </div>
+
+        {/* Board Section */}
+        <div className="space-y-4 pt-6 border-t border-border/50">
+          <div className="flex items-center gap-2 mb-4">
+            <LayoutList className="w-4 h-4 text-muted-foreground" />
+            <Label className="text-foreground font-medium">Board</Label>
+          </div>
+
+          <div className="flex items-start justify-between gap-4">
+            <div className="space-y-1 flex-1">
+              <Label htmlFor="default-sort-newest-card-on-top" className="text-sm">
+                Sort Newest First
+              </Label>
+              <p className="text-xs text-muted-foreground">
+                Sort all cards by creation date (newest on top) across all board columns and list
+                view.
+              </p>
+            </div>
+            <Switch
+              id="default-sort-newest-card-on-top"
+              checked={defaultSortNewestCardOnTop}
+              onCheckedChange={setDefaultSortNewestCardOnTop}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/appearance/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/appearance/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9273561e64697ebcbb9ca0cf00dc2dad7defc604
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/appearance/index.ts
@@ -0,0 +1 @@
+export { AppearanceSection } from './appearance-section';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/audio/audio-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/audio/audio-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5a1a178bcc073656771fba6225e6075d59b91d60
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/audio/audio-section.tsx
@@ -0,0 +1,59 @@
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Volume2, VolumeX } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface AudioSectionProps {
+  muteDoneSound: boolean;
+  onMuteDoneSoundChange: (value: boolean) => void;
+}
+
+export function AudioSection({ muteDoneSound, onMuteDoneSoundChange }: AudioSectionProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Volume2 className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Audio</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure audio and notification settings.
+        </p>
+      </div>
+      <div className="p-6 space-y-4">
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="mute-done-sound"
+            checked={muteDoneSound}
+            onCheckedChange={onMuteDoneSoundChange}
+            className="mt-1"
+            data-testid="mute-done-sound-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="mute-done-sound"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <VolumeX className="w-4 h-4 text-brand-500" />
+              Mute notification sound when agents complete
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              When enabled, disables the &quot;ding&quot; sound that plays when an agent completes a
+              feature. The feature will still move to the completed column, but without audio
+              notification.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/audio/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/audio/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a6d19cf6ab73cfa626511524ee58cae2de68edee
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/audio/index.ts
@@ -0,0 +1 @@
+export { AudioSection } from './audio-section';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/claude/claude-md-settings.tsx b/temp_repo/apps/ui/src/components/views/settings-view/claude/claude-md-settings.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6df0cf836795a7ab28357ce4389678ab088dcbd7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/claude/claude-md-settings.tsx
@@ -0,0 +1,110 @@
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { FileCode, Terminal } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface ClaudeMdSettingsProps {
+  autoLoadClaudeMd: boolean;
+  onAutoLoadClaudeMdChange: (enabled: boolean) => void;
+  useClaudeCodeSystemPrompt: boolean;
+  onUseClaudeCodeSystemPromptChange: (enabled: boolean) => void;
+}
+
+/**
+ * ClaudeMdSettings Component
+ *
+ * UI controls for Claude Agent SDK settings including:
+ * - Using Claude Code's built-in system prompt as the base
+ * - Auto-loading of project instructions from .claude/CLAUDE.md files
+ *
+ * Usage:
+ * ```tsx
+ * <ClaudeMdSettings
+ *   autoLoadClaudeMd={autoLoadClaudeMd}
+ *   onAutoLoadClaudeMdChange={setAutoLoadClaudeMd}
+ *   useClaudeCodeSystemPrompt={useClaudeCodeSystemPrompt}
+ *   onUseClaudeCodeSystemPromptChange={setUseClaudeCodeSystemPrompt}
+ * />
+ * ```
+ */
+export function ClaudeMdSettings({
+  autoLoadClaudeMd,
+  onAutoLoadClaudeMdChange,
+  useClaudeCodeSystemPrompt,
+  onUseClaudeCodeSystemPromptChange,
+}: ClaudeMdSettingsProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+      data-testid="claude-md-settings"
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Terminal className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Claude Agent SDK</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure Claude Code system prompt and project instructions.
+        </p>
+      </div>
+      <div className="p-6 space-y-2">
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="use-claude-code-system-prompt"
+            checked={useClaudeCodeSystemPrompt}
+            onCheckedChange={(checked) => onUseClaudeCodeSystemPromptChange(checked === true)}
+            className="mt-1"
+            data-testid="use-claude-code-system-prompt-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="use-claude-code-system-prompt"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <Terminal className="w-4 h-4 text-brand-500" />
+              Use Claude Code System Prompt
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              Use Claude Code&apos;s built-in system prompt as the base for all agent sessions.
+              Automaker&apos;s prompts are appended on top. When disabled, only Automaker&apos;s
+              custom system prompt is used.
+            </p>
+          </div>
+        </div>
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="auto-load-claude-md"
+            checked={autoLoadClaudeMd}
+            onCheckedChange={(checked) => onAutoLoadClaudeMdChange(checked === true)}
+            className="mt-1"
+            data-testid="auto-load-claude-md-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="auto-load-claude-md"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <FileCode className="w-4 h-4 text-brand-500" />
+              Auto-load CLAUDE.md Files
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              Automatically load project instructions from{' '}
+              <code className="text-[10px] px-1 py-0.5 rounded bg-accent/50">
+                .claude/CLAUDE.md
+              </code>{' '}
+              files. When enabled, Claude will read and follow conventions specified in your
+              project&apos;s CLAUDE.md file. Project settings override global settings.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/cli-status/claude-cli-status.tsx b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/claude-cli-status.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..89678ccb4d56c109511345ae70b25a2b9f91a1b8
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/claude-cli-status.tsx
@@ -0,0 +1,337 @@
+import { useState, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { SkeletonPulse } from '@/components/ui/skeleton';
+import { Spinner } from '@/components/ui/spinner';
+import { CheckCircle2, AlertCircle, RefreshCw, XCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { CliStatus } from '../shared/types';
+import type { ClaudeAuthStatus } from '@/store/setup-store';
+import { AnthropicIcon } from '@/components/ui/provider-icon';
+import { getElectronAPI } from '@/lib/electron';
+import { toast } from 'sonner';
+
+interface CliStatusProps {
+  status: CliStatus | null;
+  authStatus?: ClaudeAuthStatus | null;
+  isChecking: boolean;
+  onRefresh: () => void;
+}
+
+function getAuthMethodLabel(method: string): string {
+  switch (method) {
+    case 'oauth_token':
+      return 'OAuth Token (Subscription)';
+    case 'oauth_token_env':
+      return 'OAuth Token (Environment)';
+    case 'api_key':
+      return 'API Key';
+    case 'api_key_env':
+      return 'API Key (Environment)';
+    case 'credentials_file':
+      return 'Credentials File';
+    case 'cli_authenticated':
+      return 'CLI Authentication';
+    default:
+      return method || 'Unknown';
+  }
+}
+
+function ClaudeCliStatusSkeleton() {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <SkeletonPulse className="w-9 h-9 rounded-xl" />
+            <SkeletonPulse className="h-6 w-36" />
+          </div>
+          <SkeletonPulse className="w-9 h-9 rounded-lg" />
+        </div>
+        <div className="ml-12">
+          <SkeletonPulse className="h-4 w-80" />
+        </div>
+      </div>
+      <div className="p-6 space-y-4">
+        {/* Installation status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-40" />
+            <SkeletonPulse className="h-3 w-32" />
+            <SkeletonPulse className="h-3 w-48" />
+          </div>
+        </div>
+        {/* Auth status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-28" />
+            <SkeletonPulse className="h-3 w-36" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ClaudeCliStatus({ status, authStatus, isChecking, onRefresh }: CliStatusProps) {
+  const [isAuthenticating, setIsAuthenticating] = useState(false);
+  const [isDeauthenticating, setIsDeauthenticating] = useState(false);
+
+  const handleSignIn = useCallback(async () => {
+    setIsAuthenticating(true);
+    try {
+      const api = getElectronAPI();
+      // Check if authClaude method exists on the API
+      const authClaude = (api.setup as Record<string, unknown> | undefined)?.authClaude as
+        | (() => Promise<{ success: boolean; error?: string }>)
+        | undefined;
+      if (!authClaude) {
+        toast.error('Authentication Failed', {
+          description: 'Claude authentication is not available',
+        });
+        return;
+      }
+      const result = await authClaude();
+
+      if (result.success) {
+        toast.success('Signed In', {
+          description: 'Successfully authenticated Claude CLI',
+        });
+        onRefresh();
+      } else if (result.error) {
+        toast.error('Authentication Failed', {
+          description: result.error,
+        });
+      }
+    } catch (error) {
+      toast.error('Authentication Failed', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsAuthenticating(false);
+    }
+  }, [onRefresh]);
+
+  const handleSignOut = useCallback(async () => {
+    setIsDeauthenticating(true);
+    try {
+      const api = getElectronAPI();
+      // Check if deauthClaude method exists on the API
+      const deauthClaude = (api.setup as Record<string, unknown> | undefined)?.deauthClaude as
+        | (() => Promise<{ success: boolean; error?: string }>)
+        | undefined;
+      if (!deauthClaude) {
+        toast.error('Sign Out Failed', {
+          description: 'Claude sign out is not available',
+        });
+        return;
+      }
+      const result = await deauthClaude();
+
+      if (result.success) {
+        toast.success('Signed Out', {
+          description: 'Successfully signed out from Claude CLI',
+        });
+        // Refresh status after successful logout
+        onRefresh();
+      } else if (result.error) {
+        toast.error('Sign Out Failed', {
+          description: result.error,
+        });
+      }
+    } catch (error) {
+      toast.error('Sign Out Failed', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsDeauthenticating(false);
+    }
+  }, [onRefresh]);
+
+  if (!status) return <ClaudeCliStatusSkeleton />;
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <AnthropicIcon className="w-5 h-5 text-brand-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">
+              Claude Code CLI
+            </h2>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onRefresh}
+            disabled={isChecking}
+            data-testid="refresh-claude-cli"
+            title="Refresh Claude CLI detection"
+            className={cn(
+              'h-9 w-9 rounded-lg',
+              'hover:bg-accent/50 hover:scale-105',
+              'transition-all duration-200'
+            )}
+          >
+            {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Claude Code CLI provides better performance for long-running tasks, especially with
+          ultrathink.
+        </p>
+      </div>
+      <div className="p-6 space-y-4">
+        {status.success && status.status === 'installed' ? (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+              <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-emerald-400">Claude Code CLI Installed</p>
+                <div className="text-xs text-emerald-400/70 mt-1.5 space-y-0.5">
+                  {status.method && (
+                    <p>
+                      Method: <span className="font-mono">{status.method}</span>
+                    </p>
+                  )}
+                  {status.version && (
+                    <p>
+                      Version: <span className="font-mono">{status.version}</span>
+                    </p>
+                  )}
+                  {status.path && (
+                    <p className="truncate" title={status.path}>
+                      Path: <span className="font-mono text-[10px]">{status.path}</span>
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+            {/* Authentication Status */}
+            {authStatus?.authenticated ? (
+              <div className="flex items-start gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+                <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                  <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-emerald-400">Authenticated</p>
+                  <div className="text-xs text-emerald-400/70 mt-1.5">
+                    <p>
+                      Method:{' '}
+                      <span className="font-mono">{getAuthMethodLabel(authStatus.method)}</span>
+                    </p>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleSignOut}
+                    disabled={isDeauthenticating}
+                    className="mt-3 h-8 text-xs"
+                  >
+                    {isDeauthenticating ? 'Signing Out...' : 'Sign Out'}
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+                <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center border border-amber-500/20 shrink-0 mt-0.5">
+                  <XCircle className="w-5 h-5 text-amber-500" />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-amber-400">Not Authenticated</p>
+                  <p className="text-xs text-amber-400/70 mt-1">
+                    Click Sign In below to get authentication instructions.
+                  </p>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleSignIn}
+                    disabled={isAuthenticating}
+                    className="mt-3 h-8 text-xs"
+                  >
+                    {isAuthenticating ? 'Requesting...' : 'Sign In'}
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            {status.recommendation && (
+              <p className="text-xs text-muted-foreground/70 ml-1">{status.recommendation}</p>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+              <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center border border-amber-500/20 shrink-0 mt-0.5">
+                <AlertCircle className="w-5 h-5 text-amber-500" />
+              </div>
+              <div className="flex-1">
+                <p className="text-sm font-medium text-amber-400">Claude Code CLI Not Detected</p>
+                <p className="text-xs text-amber-400/70 mt-1">
+                  {status.recommendation ||
+                    'Consider installing Claude Code CLI for optimal performance with ultrathink.'}
+                </p>
+              </div>
+            </div>
+            {status.installCommands && (
+              <div className="space-y-3">
+                <p className="text-xs font-medium text-foreground/80">Installation Commands:</p>
+                <div className="space-y-2">
+                  {status.installCommands.npm && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        npm
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.npm}
+                      </code>
+                    </div>
+                  )}
+                  {status.installCommands.macos && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        macOS/Linux
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.macos}
+                      </code>
+                    </div>
+                  )}
+                  {status.installCommands.windows && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        Windows (PowerShell)
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.windows}
+                      </code>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/cli-status/cli-status-card.tsx b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/cli-status-card.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6e57778752e72eaac5e13bd659fe74a99e77d5f4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/cli-status-card.tsx
@@ -0,0 +1,152 @@
+import { Button } from '@/components/ui/button';
+import { CheckCircle2, AlertCircle, RefreshCw } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import type { CliStatus } from '../shared/types';
+
+interface CliStatusCardProps {
+  title: string;
+  description: string;
+  status: CliStatus | null;
+  isChecking: boolean;
+  onRefresh: () => void;
+  refreshTestId: string;
+  icon: React.ComponentType<{ className?: string }>;
+  fallbackRecommendation: string;
+}
+
+export function CliStatusCard({
+  title,
+  description,
+  status,
+  isChecking,
+  onRefresh,
+  refreshTestId,
+  icon: Icon,
+  fallbackRecommendation,
+}: CliStatusCardProps) {
+  if (!status) return null;
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <Icon className="w-5 h-5 text-brand-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">{title}</h2>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onRefresh}
+            disabled={isChecking}
+            data-testid={refreshTestId}
+            title={`Refresh ${title} detection`}
+            className={cn(
+              'h-9 w-9 rounded-lg',
+              'hover:bg-accent/50 hover:scale-105',
+              'transition-all duration-200'
+            )}
+          >
+            {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">{description}</p>
+      </div>
+      <div className="p-6 space-y-4">
+        {status.success && status.status === 'installed' ? (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+              <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-emerald-400">{title} Installed</p>
+                <div className="text-xs text-emerald-400/70 mt-1.5 space-y-0.5">
+                  {status.method && (
+                    <p>
+                      Method: <span className="font-mono">{status.method}</span>
+                    </p>
+                  )}
+                  {status.version && (
+                    <p>
+                      Version: <span className="font-mono">{status.version}</span>
+                    </p>
+                  )}
+                  {status.path && (
+                    <p className="truncate" title={status.path}>
+                      Path: <span className="font-mono text-[10px]">{status.path}</span>
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+            {status.recommendation && (
+              <p className="text-xs text-muted-foreground/70 ml-1">{status.recommendation}</p>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+              <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center border border-amber-500/20 shrink-0 mt-0.5">
+                <AlertCircle className="w-5 h-5 text-amber-500" />
+              </div>
+              <div className="flex-1">
+                <p className="text-sm font-medium text-amber-400">{title} Not Detected</p>
+                <p className="text-xs text-amber-400/70 mt-1">
+                  {status.recommendation || fallbackRecommendation}
+                </p>
+              </div>
+            </div>
+            {status.installCommands && (
+              <div className="space-y-3">
+                <p className="text-xs font-medium text-foreground/80">Installation Commands:</p>
+                <div className="space-y-2">
+                  {status.installCommands.npm && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        npm
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.npm}
+                      </code>
+                    </div>
+                  )}
+                  {status.installCommands.macos && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        macOS/Linux
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.macos}
+                      </code>
+                    </div>
+                  )}
+                  {status.installCommands.windows && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        Windows (PowerShell)
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.windows}
+                      </code>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/cli-status/codex-cli-status.tsx b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/codex-cli-status.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5263ade185c7a85dbc5635e61bbac4d360b3d8fe
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/codex-cli-status.tsx
@@ -0,0 +1,329 @@
+import { useState, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { SkeletonPulse } from '@/components/ui/skeleton';
+import { Spinner } from '@/components/ui/spinner';
+import { CheckCircle2, AlertCircle, RefreshCw, XCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { CliStatus } from '../shared/types';
+import type { CodexAuthStatus } from '@/store/setup-store';
+import { OpenAIIcon } from '@/components/ui/provider-icon';
+import { getElectronAPI } from '@/lib/electron';
+import { toast } from 'sonner';
+
+interface CliStatusProps {
+  status: CliStatus | null;
+  authStatus?: CodexAuthStatus | null;
+  isChecking: boolean;
+  onRefresh: () => void;
+}
+
+function getAuthMethodLabel(method: string): string {
+  switch (method) {
+    case 'api_key':
+      return 'API Key';
+    case 'api_key_env':
+      return 'API Key (Environment)';
+    case 'cli_authenticated':
+    case 'oauth':
+      return 'CLI Authentication';
+    default:
+      return method || 'Unknown';
+  }
+}
+
+function CodexCliStatusSkeleton() {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <SkeletonPulse className="w-9 h-9 rounded-xl" />
+            <SkeletonPulse className="h-6 w-36" />
+          </div>
+          <SkeletonPulse className="w-9 h-9 rounded-lg" />
+        </div>
+        <div className="ml-12">
+          <SkeletonPulse className="h-4 w-80" />
+        </div>
+      </div>
+      <div className="p-6 space-y-4">
+        {/* Installation status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-40" />
+            <SkeletonPulse className="h-3 w-32" />
+            <SkeletonPulse className="h-3 w-48" />
+          </div>
+        </div>
+        {/* Auth status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-28" />
+            <SkeletonPulse className="h-3 w-36" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function CodexCliStatus({ status, authStatus, isChecking, onRefresh }: CliStatusProps) {
+  const [isAuthenticating, setIsAuthenticating] = useState(false);
+  const [isDeauthenticating, setIsDeauthenticating] = useState(false);
+
+  const handleSignIn = useCallback(async () => {
+    setIsAuthenticating(true);
+    try {
+      const api = getElectronAPI();
+      // Check if authCodex method exists on the API
+      const authCodex = (api.setup as Record<string, unknown> | undefined)?.authCodex as
+        | (() => Promise<{ success: boolean; error?: string }>)
+        | undefined;
+      if (!authCodex) {
+        toast.error('Authentication Failed', {
+          description: 'Codex authentication is not available',
+        });
+        return;
+      }
+      const result = await authCodex();
+
+      if (result.success) {
+        toast.success('Signed In', {
+          description: 'Successfully authenticated Codex CLI',
+        });
+        onRefresh();
+      } else if (result.error) {
+        toast.error('Authentication Failed', {
+          description: result.error,
+        });
+      }
+    } catch (error) {
+      toast.error('Authentication Failed', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsAuthenticating(false);
+    }
+  }, [onRefresh]);
+
+  const handleSignOut = useCallback(async () => {
+    setIsDeauthenticating(true);
+    try {
+      const api = getElectronAPI();
+      // Check if deauthCodex method exists on the API
+      const deauthCodex = (api.setup as Record<string, unknown> | undefined)?.deauthCodex as
+        | (() => Promise<{ success: boolean; error?: string }>)
+        | undefined;
+      if (!deauthCodex) {
+        toast.error('Sign Out Failed', {
+          description: 'Codex sign out is not available',
+        });
+        return;
+      }
+      const result = await deauthCodex();
+
+      if (result.success) {
+        toast.success('Signed Out', {
+          description: 'Successfully signed out from Codex CLI',
+        });
+        // Refresh status after successful logout
+        onRefresh();
+      } else if (result.error) {
+        toast.error('Sign Out Failed', {
+          description: result.error,
+        });
+      }
+    } catch (error) {
+      toast.error('Sign Out Failed', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsDeauthenticating(false);
+    }
+  }, [onRefresh]);
+
+  if (!status) return <CodexCliStatusSkeleton />;
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <OpenAIIcon className="w-5 h-5 text-brand-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">Codex CLI</h2>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onRefresh}
+            disabled={isChecking}
+            data-testid="refresh-codex-cli"
+            title="Refresh Codex CLI detection"
+            className={cn(
+              'h-9 w-9 rounded-lg',
+              'hover:bg-accent/50 hover:scale-105',
+              'transition-all duration-200'
+            )}
+          >
+            {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Codex CLI powers OpenAI models for coding and automation workflows.
+        </p>
+      </div>
+      <div className="p-6 space-y-4">
+        {status.success && status.status === 'installed' ? (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+              <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-emerald-400">Codex CLI Installed</p>
+                <div className="text-xs text-emerald-400/70 mt-1.5 space-y-0.5">
+                  {status.method && (
+                    <p>
+                      Method: <span className="font-mono">{status.method}</span>
+                    </p>
+                  )}
+                  {status.version && (
+                    <p>
+                      Version: <span className="font-mono">{status.version}</span>
+                    </p>
+                  )}
+                  {status.path && (
+                    <p className="truncate" title={status.path}>
+                      Path: <span className="font-mono text-[10px]">{status.path}</span>
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+            {/* Authentication Status */}
+            {authStatus?.authenticated ? (
+              <div className="flex items-start gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+                <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                  <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-emerald-400">Authenticated</p>
+                  <div className="text-xs text-emerald-400/70 mt-1.5">
+                    <p>
+                      Method:{' '}
+                      <span className="font-mono">{getAuthMethodLabel(authStatus.method)}</span>
+                    </p>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleSignOut}
+                    disabled={isDeauthenticating}
+                    className="mt-3 h-8 text-xs"
+                  >
+                    {isDeauthenticating ? 'Signing Out...' : 'Sign Out'}
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+                <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center border border-amber-500/20 shrink-0 mt-0.5">
+                  <XCircle className="w-5 h-5 text-amber-500" />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-amber-400">Not Authenticated</p>
+                  <p className="text-xs text-amber-400/70 mt-1">
+                    Click Sign In below to get authentication instructions.
+                  </p>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleSignIn}
+                    disabled={isAuthenticating}
+                    className="mt-3 h-8 text-xs"
+                  >
+                    {isAuthenticating ? 'Requesting...' : 'Sign In'}
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            {status.recommendation && (
+              <p className="text-xs text-muted-foreground/70 ml-1">{status.recommendation}</p>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+              <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center border border-amber-500/20 shrink-0 mt-0.5">
+                <AlertCircle className="w-5 h-5 text-amber-500" />
+              </div>
+              <div className="flex-1">
+                <p className="text-sm font-medium text-amber-400">Codex CLI Not Detected</p>
+                <p className="text-xs text-amber-400/70 mt-1">
+                  {status.recommendation ||
+                    'Install Codex CLI to unlock OpenAI models with tool support.'}
+                </p>
+              </div>
+            </div>
+            {status.installCommands && (
+              <div className="space-y-3">
+                <p className="text-xs font-medium text-foreground/80">Installation Commands:</p>
+                <div className="space-y-2">
+                  {status.installCommands.npm && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        npm
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.npm}
+                      </code>
+                    </div>
+                  )}
+                  {status.installCommands.macos && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        macOS/Linux
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.macos}
+                      </code>
+                    </div>
+                  )}
+                  {status.installCommands.windows && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        Windows (PowerShell)
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.windows}
+                      </code>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/cli-status/copilot-cli-status.tsx b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/copilot-cli-status.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9a1e88178ec870a41ff34ea6faaa55d2dd983e52
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/copilot-cli-status.tsx
@@ -0,0 +1,234 @@
+import { Button } from '@/components/ui/button';
+import { SkeletonPulse } from '@/components/ui/skeleton';
+import { Spinner } from '@/components/ui/spinner';
+import { CheckCircle2, AlertCircle, RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { CliStatus } from '../shared/types';
+import { CopilotIcon } from '@/components/ui/provider-icon';
+import type { CopilotAuthStatus } from '@automaker/types';
+
+// Re-export for backwards compatibility
+export type { CopilotAuthStatus };
+
+function getAuthMethodLabel(method: CopilotAuthStatus['method']): string {
+  switch (method) {
+    case 'oauth':
+      return 'GitHub OAuth';
+    case 'cli':
+      return 'Copilot CLI';
+    default:
+      return method || 'Unknown';
+  }
+}
+
+interface CopilotCliStatusProps {
+  status: CliStatus | null;
+  authStatus?: CopilotAuthStatus | null;
+  isChecking: boolean;
+  onRefresh: () => void;
+}
+
+export function CopilotCliStatusSkeleton() {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <SkeletonPulse className="w-9 h-9 rounded-xl" />
+            <SkeletonPulse className="h-6 w-36" />
+          </div>
+          <SkeletonPulse className="w-9 h-9 rounded-lg" />
+        </div>
+        <div className="ml-12">
+          <SkeletonPulse className="h-4 w-80" />
+        </div>
+      </div>
+      <div className="p-6 space-y-4">
+        {/* Installation status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-40" />
+            <SkeletonPulse className="h-3 w-32" />
+            <SkeletonPulse className="h-3 w-48" />
+          </div>
+        </div>
+        {/* Auth status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-28" />
+            <SkeletonPulse className="h-3 w-36" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function CopilotCliStatus({
+  status,
+  authStatus,
+  isChecking,
+  onRefresh,
+}: CopilotCliStatusProps) {
+  if (!status) return <CopilotCliStatusSkeleton />;
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-violet-500/20 to-violet-600/10 flex items-center justify-center border border-violet-500/20">
+              <CopilotIcon className="w-5 h-5 text-violet-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">
+              GitHub Copilot CLI
+            </h2>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onRefresh}
+            disabled={isChecking}
+            data-testid="refresh-copilot-cli"
+            title="Refresh Copilot CLI detection"
+            aria-label="Refresh Copilot CLI detection"
+            className={cn(
+              'h-9 w-9 rounded-lg',
+              'hover:bg-accent/50 hover:scale-105',
+              'transition-all duration-200'
+            )}
+          >
+            {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          GitHub Copilot CLI provides access to GPT and Claude models via your Copilot subscription.
+        </p>
+      </div>
+      <div className="p-6 space-y-4">
+        {status.success && status.status === 'installed' ? (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+              <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-emerald-400">Copilot CLI Installed</p>
+                <div className="text-xs text-emerald-400/70 mt-1.5 space-y-0.5">
+                  {status.method && (
+                    <p>
+                      Method: <span className="font-mono">{status.method}</span>
+                    </p>
+                  )}
+                  {status.version && (
+                    <p>
+                      Version: <span className="font-mono">{status.version}</span>
+                    </p>
+                  )}
+                  {status.path && (
+                    <p className="truncate" title={status.path}>
+                      Path: <span className="font-mono text-[10px]">{status.path}</span>
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Authentication Status */}
+            {authStatus?.authenticated ? (
+              <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+                <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                  <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-emerald-400">Authenticated</p>
+                  <div className="text-xs text-emerald-400/70 mt-1.5">
+                    {authStatus.method !== 'none' && (
+                      <p>
+                        Method:{' '}
+                        <span className="font-mono">{getAuthMethodLabel(authStatus.method)}</span>
+                      </p>
+                    )}
+                    {authStatus.login && (
+                      <p>
+                        User: <span className="font-mono">{authStatus.login}</span>
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-start gap-3 p-4 rounded-xl bg-red-500/10 border border-red-500/20">
+                <div className="w-10 h-10 rounded-xl bg-red-500/15 flex items-center justify-center border border-red-500/20 shrink-0 mt-0.5">
+                  <AlertCircle className="w-5 h-5 text-red-500" />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-red-400">Authentication Required</p>
+                  {authStatus?.error && (
+                    <p className="text-xs text-red-400/70 mt-1">{authStatus.error}</p>
+                  )}
+                  <p className="text-xs text-red-400/70 mt-2">
+                    Run <code className="font-mono bg-red-500/10 px-1 rounded">gh auth login</code>{' '}
+                    in your terminal to authenticate with GitHub.
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {status.recommendation && (
+              <p className="text-xs text-muted-foreground/70 ml-1">{status.recommendation}</p>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+              <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center border border-amber-500/20 shrink-0 mt-0.5">
+                <AlertCircle className="w-5 h-5 text-amber-500" />
+              </div>
+              <div className="flex-1">
+                <p className="text-sm font-medium text-amber-400">Copilot CLI Not Detected</p>
+                <p className="text-xs text-amber-400/70 mt-1">
+                  {status.recommendation ||
+                    'Install GitHub Copilot CLI to use models via your Copilot subscription.'}
+                </p>
+              </div>
+            </div>
+            {status.installCommands && (
+              <div className="space-y-3">
+                <p className="text-xs font-medium text-foreground/80">Installation Commands:</p>
+                <div className="space-y-2">
+                  {status.installCommands.npm && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        npm
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.npm}
+                      </code>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/cli-status/cursor-cli-status.tsx b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/cursor-cli-status.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..77a0707b6108b4c8dab2298f6d5749812793555d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/cursor-cli-status.tsx
@@ -0,0 +1,417 @@
+import { useState, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { SkeletonPulse } from '@/components/ui/skeleton';
+import { Spinner } from '@/components/ui/spinner';
+import { CheckCircle2, AlertCircle, RefreshCw, XCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { CursorIcon } from '@/components/ui/provider-icon';
+import { getElectronAPI } from '@/lib/electron';
+import { toast } from 'sonner';
+
+interface CursorStatus {
+  installed: boolean;
+  version?: string;
+  authenticated: boolean;
+  method?: string;
+}
+
+interface CursorCliStatusProps {
+  status: CursorStatus | null;
+  isChecking: boolean;
+  onRefresh: () => void;
+}
+
+export function CursorCliStatusSkeleton() {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <SkeletonPulse className="w-9 h-9 rounded-xl" />
+            <SkeletonPulse className="h-6 w-28" />
+          </div>
+          <SkeletonPulse className="w-9 h-9 rounded-lg" />
+        </div>
+        <div className="ml-12">
+          <SkeletonPulse className="h-4 w-72" />
+        </div>
+      </div>
+      <div className="p-6 space-y-4">
+        {/* Installation status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-36" />
+            <SkeletonPulse className="h-3 w-28" />
+          </div>
+        </div>
+        {/* Auth status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-28" />
+            <SkeletonPulse className="h-3 w-32" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function CursorPermissionsSkeleton() {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <SkeletonPulse className="w-9 h-9 rounded-xl" />
+          <div className="text-left">
+            <SkeletonPulse className="h-6 w-32 mb-2" />
+            <SkeletonPulse className="h-4 w-48" />
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <SkeletonPulse className="h-6 w-20 rounded-full" />
+          <SkeletonPulse className="w-5 h-5 rounded" />
+        </div>
+      </div>
+      <div className="p-6 space-y-6">
+        {/* Security Warning skeleton */}
+        <div className="flex items-start gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-5 h-5 rounded shrink-0 mt-0.5" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-32" />
+            <SkeletonPulse className="h-3 w-full" />
+            <SkeletonPulse className="h-3 w-3/4" />
+          </div>
+        </div>
+        {/* Permission Profiles skeleton */}
+        <div className="space-y-3">
+          <SkeletonPulse className="h-4 w-36" />
+          <div className="grid gap-3">
+            {[1, 2].map((i) => (
+              <div key={i} className="p-4 rounded-xl border border-border/30 bg-muted/10">
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1 space-y-2">
+                    <div className="flex items-center gap-2">
+                      <SkeletonPulse className="w-4 h-4 rounded" />
+                      <SkeletonPulse className="h-4 w-24" />
+                      <SkeletonPulse className="h-4 w-12 rounded-full" />
+                    </div>
+                    <SkeletonPulse className="h-3 w-full" />
+                    <SkeletonPulse className="h-3 w-2/3" />
+                    <div className="flex items-center gap-2">
+                      <SkeletonPulse className="h-3 w-20" />
+                      <SkeletonPulse className="h-3 w-1" />
+                      <SkeletonPulse className="h-3 w-20" />
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <SkeletonPulse className="h-8 w-28 rounded-md" />
+                    <SkeletonPulse className="h-8 w-28 rounded-md" />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        {/* Config File Locations skeleton */}
+        <div className="space-y-3">
+          <SkeletonPulse className="h-4 w-40" />
+          <div className="p-4 rounded-xl border border-border/30 bg-muted/10 space-y-2">
+            <div className="flex items-center justify-between">
+              <div className="space-y-1">
+                <SkeletonPulse className="h-4 w-24" />
+                <SkeletonPulse className="h-3 w-48" />
+              </div>
+              <SkeletonPulse className="w-8 h-8 rounded" />
+            </div>
+            <div className="border-t border-border/30 pt-2 space-y-1">
+              <SkeletonPulse className="h-4 w-28" />
+              <SkeletonPulse className="h-3 w-40" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ModelConfigSkeleton() {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <SkeletonPulse className="w-9 h-9 rounded-xl" />
+          <SkeletonPulse className="h-6 w-40" />
+        </div>
+        <div className="ml-12">
+          <SkeletonPulse className="h-4 w-72" />
+        </div>
+      </div>
+      <div className="p-6 space-y-6">
+        {/* Default Model skeleton */}
+        <div className="space-y-2">
+          <SkeletonPulse className="h-4 w-24" />
+          <SkeletonPulse className="h-10 w-full rounded-md" />
+        </div>
+        {/* Available Models skeleton */}
+        <div className="space-y-3">
+          <SkeletonPulse className="h-4 w-32" />
+          <div className="grid gap-3">
+            {[1, 2, 3, 4].map((i) => (
+              <div
+                key={i}
+                className="flex items-center justify-between p-3 rounded-xl border border-border/30 bg-muted/10"
+              >
+                <div className="flex items-center gap-3">
+                  <SkeletonPulse className="w-5 h-5 rounded" />
+                  <div className="space-y-1.5">
+                    <SkeletonPulse className="h-4 w-32" />
+                    <SkeletonPulse className="h-3 w-48" />
+                  </div>
+                </div>
+                <SkeletonPulse className="h-5 w-12 rounded-full" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function CursorCliStatus({ status, isChecking, onRefresh }: CursorCliStatusProps) {
+  const [isAuthenticating, setIsAuthenticating] = useState(false);
+  const [isDeauthenticating, setIsDeauthenticating] = useState(false);
+
+  const handleSignIn = useCallback(async () => {
+    setIsAuthenticating(true);
+    try {
+      const api = getElectronAPI();
+      // Check if authCursor method exists on the API
+      const authCursor = (api?.setup as Record<string, unknown> | undefined)?.authCursor as
+        | (() => Promise<{ success: boolean; error?: string }>)
+        | undefined;
+      if (!authCursor) {
+        toast.error('Authentication Failed', {
+          description: 'Cursor authentication is not available',
+        });
+        return;
+      }
+      const result = await authCursor();
+
+      if (result.success) {
+        toast.success('Signed In', {
+          description: 'Successfully authenticated Cursor CLI',
+        });
+        onRefresh();
+      } else if (result.error) {
+        toast.error('Authentication Failed', {
+          description: result.error,
+        });
+      }
+    } catch (error) {
+      toast.error('Authentication Failed', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsAuthenticating(false);
+    }
+  }, [onRefresh]);
+
+  const handleSignOut = useCallback(async () => {
+    setIsDeauthenticating(true);
+    try {
+      const api = getElectronAPI();
+      // Check if deauthCursor method exists on the API
+      const deauthCursor = (api?.setup as Record<string, unknown> | undefined)?.deauthCursor as
+        | (() => Promise<{ success: boolean; error?: string }>)
+        | undefined;
+      if (!deauthCursor) {
+        toast.error('Sign Out Failed', {
+          description: 'Cursor sign out is not available',
+        });
+        return;
+      }
+      const result = await deauthCursor();
+
+      if (result.success) {
+        toast.success('Signed Out', {
+          description: 'Successfully signed out from Cursor CLI',
+        });
+        // Refresh status after successful logout
+        onRefresh();
+      } else if (result.error) {
+        toast.error('Sign Out Failed', {
+          description: result.error,
+        });
+      }
+    } catch (error) {
+      toast.error('Sign Out Failed', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsDeauthenticating(false);
+    }
+  }, [onRefresh]);
+
+  if (!status) return <CursorCliStatusSkeleton />;
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <CursorIcon className="w-5 h-5 text-brand-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">Cursor CLI</h2>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onRefresh}
+            disabled={isChecking}
+            data-testid="refresh-cursor-cli"
+            title="Refresh Cursor CLI detection"
+            className={cn(
+              'h-9 w-9 rounded-lg',
+              'hover:bg-accent/50 hover:scale-105',
+              'transition-all duration-200'
+            )}
+          >
+            {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Cursor CLI enables AI-powered code editing using Cursor's models.
+        </p>
+      </div>
+      <div className="p-6 space-y-4">
+        {status.installed ? (
+          <div className="space-y-3">
+            {/* Installation Status - Success */}
+            <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+              <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-emerald-400">Cursor CLI Installed</p>
+                <div className="text-xs text-emerald-400/70 mt-1.5 space-y-0.5">
+                  {status.version && (
+                    <p>
+                      Version: <span className="font-mono">{status.version}</span>
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Authentication Status */}
+            {status.authenticated ? (
+              <div className="flex items-start gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+                <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                  <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-emerald-400">Authenticated</p>
+                  <div className="text-xs text-emerald-400/70 mt-1.5">
+                    <p>
+                      Method:{' '}
+                      <span className="font-mono">
+                        {status.method === 'api_key' ? 'API Key' : 'Browser Login'}
+                      </span>
+                    </p>
+                  </div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleSignOut}
+                    disabled={isDeauthenticating}
+                    className="mt-3 h-8 text-xs"
+                  >
+                    {isDeauthenticating ? 'Signing Out...' : 'Sign Out'}
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+                <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center border border-amber-500/20 shrink-0 mt-0.5">
+                  <XCircle className="w-5 h-5 text-amber-500" />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-amber-400">Not Authenticated</p>
+                  <p className="text-xs text-amber-400/70 mt-1">
+                    Click Sign In below to get authentication instructions.
+                  </p>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleSignIn}
+                    disabled={isAuthenticating}
+                    className="mt-3 h-8 text-xs"
+                  >
+                    {isAuthenticating ? 'Requesting...' : 'Sign In'}
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+              <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center border border-amber-500/20 shrink-0 mt-0.5">
+                <AlertCircle className="w-5 h-5 text-amber-500" />
+              </div>
+              <div className="flex-1">
+                <p className="text-sm font-medium text-amber-400">Cursor CLI Not Detected</p>
+                <p className="text-xs text-amber-400/70 mt-1">
+                  Install Cursor CLI to use Cursor models in AutoMaker.
+                </p>
+              </div>
+            </div>
+            <div className="space-y-3">
+              <p className="text-xs font-medium text-foreground/80">Installation:</p>
+              <a
+                href="https://cursor.com/docs/cli"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 text-xs text-brand-400 hover:text-brand-300 transition-colors"
+              >
+                View installation guide →
+              </a>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/cli-status/gemini-cli-status.tsx b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/gemini-cli-status.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5fc3da32e063f3f92460607338b7d8c173e0c93a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/gemini-cli-status.tsx
@@ -0,0 +1,250 @@
+import { Button } from '@/components/ui/button';
+import { SkeletonPulse } from '@/components/ui/skeleton';
+import { Spinner } from '@/components/ui/spinner';
+import { CheckCircle2, AlertCircle, RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { CliStatus } from '../shared/types';
+import { GeminiIcon } from '@/components/ui/provider-icon';
+
+export type GeminiAuthMethod =
+  | 'api_key' // API key authentication
+  | 'google_login' // Google OAuth authentication
+  | 'vertex_ai' // Vertex AI authentication
+  | 'none';
+
+export interface GeminiAuthStatus {
+  authenticated: boolean;
+  method: GeminiAuthMethod;
+  hasApiKey?: boolean;
+  hasEnvApiKey?: boolean;
+  hasCredentialsFile?: boolean;
+  error?: string;
+}
+
+function getAuthMethodLabel(method: GeminiAuthMethod): string {
+  switch (method) {
+    case 'api_key':
+      return 'API Key';
+    case 'google_login':
+      return 'Google OAuth';
+    case 'vertex_ai':
+      return 'Vertex AI';
+    default:
+      return method || 'Unknown';
+  }
+}
+
+interface GeminiCliStatusProps {
+  status: CliStatus | null;
+  authStatus?: GeminiAuthStatus | null;
+  isChecking: boolean;
+  onRefresh: () => void;
+}
+
+export function GeminiCliStatusSkeleton() {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <SkeletonPulse className="w-9 h-9 rounded-xl" />
+            <SkeletonPulse className="h-6 w-36" />
+          </div>
+          <SkeletonPulse className="w-9 h-9 rounded-lg" />
+        </div>
+        <div className="ml-12">
+          <SkeletonPulse className="h-4 w-80" />
+        </div>
+      </div>
+      <div className="p-6 space-y-4">
+        {/* Installation status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-40" />
+            <SkeletonPulse className="h-3 w-32" />
+            <SkeletonPulse className="h-3 w-48" />
+          </div>
+        </div>
+        {/* Auth status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-28" />
+            <SkeletonPulse className="h-3 w-36" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function GeminiCliStatus({
+  status,
+  authStatus,
+  isChecking,
+  onRefresh,
+}: GeminiCliStatusProps) {
+  if (!status) return <GeminiCliStatusSkeleton />;
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500/20 to-blue-600/10 flex items-center justify-center border border-blue-500/20">
+              <GeminiIcon className="w-5 h-5 text-blue-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">Gemini CLI</h2>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onRefresh}
+            disabled={isChecking}
+            data-testid="refresh-gemini-cli"
+            title="Refresh Gemini CLI detection"
+            className={cn(
+              'h-9 w-9 rounded-lg',
+              'hover:bg-accent/50 hover:scale-105',
+              'transition-all duration-200'
+            )}
+          >
+            {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Gemini CLI provides access to Google&apos;s Gemini AI models with thinking capabilities.
+        </p>
+      </div>
+      <div className="p-6 space-y-4">
+        {status.success && status.status === 'installed' ? (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+              <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-emerald-400">Gemini CLI Installed</p>
+                <div className="text-xs text-emerald-400/70 mt-1.5 space-y-0.5">
+                  {status.method && (
+                    <p>
+                      Method: <span className="font-mono">{status.method}</span>
+                    </p>
+                  )}
+                  {status.version && (
+                    <p>
+                      Version: <span className="font-mono">{status.version}</span>
+                    </p>
+                  )}
+                  {status.path && (
+                    <p className="truncate" title={status.path}>
+                      Path: <span className="font-mono text-[10px]">{status.path}</span>
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Authentication Status */}
+            {authStatus?.authenticated ? (
+              <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+                <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                  <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-emerald-400">Authenticated</p>
+                  <div className="text-xs text-emerald-400/70 mt-1.5">
+                    {authStatus.method !== 'none' && (
+                      <p>
+                        Method:{' '}
+                        <span className="font-mono">{getAuthMethodLabel(authStatus.method)}</span>
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-start gap-3 p-4 rounded-xl bg-red-500/10 border border-red-500/20">
+                <div className="w-10 h-10 rounded-xl bg-red-500/15 flex items-center justify-center border border-red-500/20 shrink-0 mt-0.5">
+                  <AlertCircle className="w-5 h-5 text-red-500" />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-red-400">Authentication Failed</p>
+                  {authStatus?.error && (
+                    <p className="text-xs text-red-400/70 mt-1">{authStatus.error}</p>
+                  )}
+                  <p className="text-xs text-red-400/70 mt-2">
+                    Run <code className="font-mono bg-red-500/10 px-1 rounded">gemini</code>{' '}
+                    interactively in your terminal to log in with Google, or set the{' '}
+                    <code className="font-mono bg-red-500/10 px-1 rounded">GEMINI_API_KEY</code>{' '}
+                    environment variable.
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {status.recommendation && (
+              <p className="text-xs text-muted-foreground/70 ml-1">{status.recommendation}</p>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+              <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center border border-amber-500/20 shrink-0 mt-0.5">
+                <AlertCircle className="w-5 h-5 text-amber-500" />
+              </div>
+              <div className="flex-1">
+                <p className="text-sm font-medium text-amber-400">Gemini CLI Not Detected</p>
+                <p className="text-xs text-amber-400/70 mt-1">
+                  {status.recommendation || 'Install Gemini CLI to use Google Gemini models.'}
+                </p>
+              </div>
+            </div>
+            {status.installCommands && (
+              <div className="space-y-3">
+                <p className="text-xs font-medium text-foreground/80">Installation Commands:</p>
+                <div className="space-y-2">
+                  {status.installCommands.npm && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        npm
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.npm}
+                      </code>
+                    </div>
+                  )}
+                  {status.installCommands.macos && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        macOS/Linux
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.macos}
+                      </code>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/cli-status/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a6d7cf8767721200197907ef85be04528f5bf016
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/index.ts
@@ -0,0 +1 @@
+export { ClaudeCliStatus } from './claude-cli-status';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/cli-status/opencode-cli-status.tsx b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/opencode-cli-status.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ec9600838afd9a9cf4cca309026afb9d92cd5ca0
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/cli-status/opencode-cli-status.tsx
@@ -0,0 +1,386 @@
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { SkeletonPulse } from '@/components/ui/skeleton';
+import { Spinner } from '@/components/ui/spinner';
+import { CheckCircle2, AlertCircle, RefreshCw, Bot, Cloud } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { CliStatus } from '../shared/types';
+import { OpenCodeIcon } from '@/components/ui/provider-icon';
+
+export interface OpenCodeProviderInfo {
+  id: string;
+  name: string;
+  authenticated: boolean;
+  authMethod?: 'oauth' | 'api_key';
+}
+
+/**
+ * Provider display configuration
+ */
+const PROVIDER_DISPLAY: Record<string, string> = {
+  copilot: 'GitHub Copilot',
+  'github-copilot': 'GitHub Copilot',
+  anthropic: 'Anthropic',
+  openai: 'OpenAI',
+  openrouter: 'OpenRouter',
+  google: 'Google AI',
+  'amazon-bedrock': 'AWS Bedrock',
+  azure: 'Azure OpenAI',
+  ollama: 'Ollama',
+  lmstudio: 'LM Studio',
+  opencode: 'OpenCode',
+  xai: 'xAI',
+  deepseek: 'DeepSeek',
+};
+
+function getProviderDisplayName(provider: OpenCodeProviderInfo): string {
+  return PROVIDER_DISPLAY[provider.id] || provider.name || provider.id;
+}
+
+export type OpencodeAuthMethod =
+  | 'api_key_env' // ANTHROPIC_API_KEY or other provider env vars
+  | 'api_key' // Manually stored API key
+  | 'oauth' // OAuth authentication
+  | 'config_file' // Config file with credentials
+  | 'none';
+
+export interface OpencodeAuthStatus {
+  authenticated: boolean;
+  method: OpencodeAuthMethod;
+  hasApiKey?: boolean;
+  hasEnvApiKey?: boolean;
+  hasOAuthToken?: boolean;
+  error?: string;
+}
+
+function getAuthMethodLabel(method: OpencodeAuthMethod): string {
+  switch (method) {
+    case 'api_key':
+      return 'API Key';
+    case 'api_key_env':
+      return 'API Key (Environment)';
+    case 'oauth':
+      return 'OAuth Authentication';
+    case 'config_file':
+      return 'Configuration File';
+    default:
+      return method || 'Unknown';
+  }
+}
+
+interface OpencodeCliStatusProps {
+  status: CliStatus | null;
+  authStatus?: OpencodeAuthStatus | null;
+  providers?: OpenCodeProviderInfo[];
+  isChecking: boolean;
+  onRefresh: () => void;
+}
+
+export function OpencodeCliStatusSkeleton() {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <SkeletonPulse className="w-9 h-9 rounded-xl" />
+            <SkeletonPulse className="h-6 w-36" />
+          </div>
+          <SkeletonPulse className="w-9 h-9 rounded-lg" />
+        </div>
+        <div className="ml-12">
+          <SkeletonPulse className="h-4 w-80" />
+        </div>
+      </div>
+      <div className="p-6 space-y-4">
+        {/* Installation status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-40" />
+            <SkeletonPulse className="h-3 w-32" />
+            <SkeletonPulse className="h-3 w-48" />
+          </div>
+        </div>
+        {/* Auth status skeleton */}
+        <div className="flex items-center gap-3 p-4 rounded-xl border border-border/30 bg-muted/10">
+          <SkeletonPulse className="w-10 h-10 rounded-xl" />
+          <div className="flex-1 space-y-2">
+            <SkeletonPulse className="h-4 w-28" />
+            <SkeletonPulse className="h-3 w-36" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function OpencodeModelConfigSkeleton() {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <SkeletonPulse className="w-9 h-9 rounded-xl" />
+          <SkeletonPulse className="h-6 w-40" />
+        </div>
+        <div className="ml-12">
+          <SkeletonPulse className="h-4 w-72" />
+        </div>
+      </div>
+      <div className="p-6 space-y-6">
+        {/* Default Model skeleton */}
+        <div className="space-y-2">
+          <SkeletonPulse className="h-4 w-24" />
+          <SkeletonPulse className="h-10 w-full rounded-md" />
+        </div>
+        {/* Available Models skeleton */}
+        <div className="space-y-3">
+          <SkeletonPulse className="h-4 w-32" />
+          {/* Provider group skeleton */}
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <SkeletonPulse className="w-4 h-4 rounded" />
+              <SkeletonPulse className="h-4 w-20" />
+            </div>
+            <div className="grid gap-2">
+              {[1, 2, 3].map((i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between p-3 rounded-xl border border-border/30 bg-muted/10"
+                >
+                  <div className="flex items-center gap-3">
+                    <SkeletonPulse className="w-5 h-5 rounded" />
+                    <div className="space-y-1.5">
+                      <SkeletonPulse className="h-4 w-32" />
+                      <SkeletonPulse className="h-3 w-48" />
+                    </div>
+                  </div>
+                  <SkeletonPulse className="h-5 w-12 rounded-full" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function OpencodeCliStatus({
+  status,
+  authStatus,
+  providers = [],
+  isChecking,
+  onRefresh,
+}: OpencodeCliStatusProps) {
+  const authenticatedProviders = providers.filter((p) => p.authenticated);
+  if (!status) return <OpencodeCliStatusSkeleton />;
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <OpenCodeIcon className="w-5 h-5 text-brand-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">OpenCode CLI</h2>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onRefresh}
+            disabled={isChecking}
+            data-testid="refresh-opencode-cli"
+            title="Refresh OpenCode CLI detection"
+            className={cn(
+              'h-9 w-9 rounded-lg',
+              'hover:bg-accent/50 hover:scale-105',
+              'transition-all duration-200'
+            )}
+          >
+            {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          OpenCode CLI provides multi-provider AI support with Claude, GPT, and Gemini models.
+        </p>
+      </div>
+      <div className="p-6 space-y-4">
+        {status.success && status.status === 'installed' ? (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+              <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-emerald-400">OpenCode CLI Installed</p>
+                <div className="text-xs text-emerald-400/70 mt-1.5 space-y-0.5">
+                  {status.method && (
+                    <p>
+                      Method: <span className="font-mono">{status.method}</span>
+                    </p>
+                  )}
+                  {status.version && (
+                    <p>
+                      Version: <span className="font-mono">{status.version}</span>
+                    </p>
+                  )}
+                  {status.path && (
+                    <p className="truncate" title={status.path}>
+                      Path: <span className="font-mono text-[10px]">{status.path}</span>
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Authentication Status - consider both direct auth and provider auth */}
+            {authStatus?.authenticated || authenticatedProviders.length > 0 ? (
+              <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+                <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                  <CheckCircle2 className="w-5 h-5 text-emerald-500" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-emerald-400">Authenticated</p>
+                  <div className="text-xs text-emerald-400/70 mt-1.5">
+                    {authStatus?.authenticated && authStatus.method !== 'none' ? (
+                      <p>
+                        Method:{' '}
+                        <span className="font-mono">{getAuthMethodLabel(authStatus.method)}</span>
+                      </p>
+                    ) : authenticatedProviders.length > 0 ? (
+                      <p>
+                        Via {authenticatedProviders.length} connected provider
+                        {authenticatedProviders.length !== 1 ? 's' : ''}
+                      </p>
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-start gap-3 p-4 rounded-xl bg-blue-500/10 border border-blue-500/20">
+                <div className="w-10 h-10 rounded-xl bg-blue-500/15 flex items-center justify-center border border-blue-500/20 shrink-0 mt-0.5">
+                  <Bot className="w-5 h-5 text-blue-500" />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium text-blue-400">OpenCode Free Tier Ready</p>
+                  <p className="text-xs text-blue-400/70 mt-1">
+                    Free OpenCode models work without login. Run{' '}
+                    <code className="font-mono bg-blue-500/10 px-1 rounded">
+                      opencode auth login
+                    </code>{' '}
+                    to connect providers like GitHub Copilot, Google AI, etc.
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {/* Dynamic Providers Connected */}
+            {authenticatedProviders.length > 0 && (
+              <div className="flex items-center gap-3 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20">
+                <div className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center border border-emerald-500/20 shrink-0">
+                  <Cloud className="w-5 h-5 text-emerald-500" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-emerald-400">
+                    {authenticatedProviders.length} Dynamic Provider
+                    {authenticatedProviders.length !== 1 ? 's' : ''} Connected
+                  </p>
+                  <div className="flex flex-wrap gap-1.5 mt-2">
+                    {authenticatedProviders.map((provider) => (
+                      <Badge
+                        key={provider.id}
+                        variant="outline"
+                        className="text-xs bg-emerald-500/10 text-emerald-400 border-emerald-500/30"
+                      >
+                        {getProviderDisplayName(provider)}
+                        {provider.authMethod && (
+                          <span className="ml-1 text-emerald-400/60">
+                            ({provider.authMethod === 'oauth' ? 'OAuth' : 'Key'})
+                          </span>
+                        )}
+                      </Badge>
+                    ))}
+                  </div>
+                  <p className="text-xs text-emerald-400/60 mt-2">
+                    Use{' '}
+                    <code className="font-mono bg-emerald-500/10 px-1 rounded">
+                      opencode auth login
+                    </code>{' '}
+                    to add more providers.
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {status.recommendation && (
+              <p className="text-xs text-muted-foreground/70 ml-1">{status.recommendation}</p>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+              <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center border border-amber-500/20 shrink-0 mt-0.5">
+                <AlertCircle className="w-5 h-5 text-amber-500" />
+              </div>
+              <div className="flex-1">
+                <p className="text-sm font-medium text-amber-400">OpenCode CLI Not Detected</p>
+                <p className="text-xs text-amber-400/70 mt-1">
+                  {status.recommendation || 'Install OpenCode CLI to use multi-provider AI models.'}
+                </p>
+              </div>
+            </div>
+            {status.installCommands && (
+              <div className="space-y-3">
+                <p className="text-xs font-medium text-foreground/80">Installation Commands:</p>
+                <div className="space-y-2">
+                  {status.installCommands.npm && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        npm
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.npm}
+                      </code>
+                    </div>
+                  )}
+                  {status.installCommands.macos && (
+                    <div className="p-3 rounded-xl bg-accent/30 border border-border/50">
+                      <p className="text-[10px] text-muted-foreground mb-1.5 font-medium uppercase tracking-wider">
+                        macOS/Linux
+                      </p>
+                      <code className="text-xs text-foreground/80 font-mono break-all">
+                        {status.installCommands.macos}
+                      </code>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/codex/codex-settings.tsx b/temp_repo/apps/ui/src/components/views/settings-view/codex/codex-settings.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d46f7a05548567e566be3f50a38ccd7a87f67ac2
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/codex/codex-settings.tsx
@@ -0,0 +1,122 @@
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { FileCode, Globe, ImageIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { OpenAIIcon } from '@/components/ui/provider-icon';
+
+interface CodexSettingsProps {
+  autoLoadCodexAgents: boolean;
+  codexEnableWebSearch: boolean;
+  codexEnableImages: boolean;
+  onAutoLoadCodexAgentsChange: (enabled: boolean) => void;
+  onCodexEnableWebSearchChange: (enabled: boolean) => void;
+  onCodexEnableImagesChange: (enabled: boolean) => void;
+}
+
+const CARD_TITLE = 'Codex CLI Settings';
+const CARD_SUBTITLE = 'Configure Codex instructions and capabilities.';
+const AGENTS_TITLE = 'Auto-load AGENTS.md Instructions';
+const AGENTS_DESCRIPTION = 'Automatically inject project instructions from';
+const AGENTS_PATH = '.codex/AGENTS.md';
+const AGENTS_SUFFIX = 'on each Codex run.';
+const WEB_SEARCH_TITLE = 'Enable Web Search';
+const WEB_SEARCH_DESCRIPTION = 'Allow Codex to search the web for current information.';
+const IMAGES_TITLE = 'Enable Image Support';
+const IMAGES_DESCRIPTION = 'Allow Codex to process images attached to prompts.';
+
+export function CodexSettings({
+  autoLoadCodexAgents,
+  codexEnableWebSearch,
+  codexEnableImages,
+  onAutoLoadCodexAgentsChange,
+  onCodexEnableWebSearchChange,
+  onCodexEnableImagesChange,
+}: CodexSettingsProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <OpenAIIcon className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">{CARD_TITLE}</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">{CARD_SUBTITLE}</p>
+      </div>
+      <div className="p-6 space-y-5">
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="auto-load-codex-agents"
+            checked={autoLoadCodexAgents}
+            onCheckedChange={(checked) => onAutoLoadCodexAgentsChange(checked === true)}
+            className="mt-1"
+            data-testid="auto-load-codex-agents-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="auto-load-codex-agents"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <FileCode className="w-4 h-4 text-brand-500" />
+              {AGENTS_TITLE}
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              {AGENTS_DESCRIPTION}{' '}
+              <code className="text-[10px] px-1 py-0.5 rounded bg-accent/50">{AGENTS_PATH}</code>{' '}
+              {AGENTS_SUFFIX}
+            </p>
+          </div>
+        </div>
+
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="codex-enable-web-search"
+            checked={codexEnableWebSearch}
+            onCheckedChange={(checked) => onCodexEnableWebSearchChange(checked === true)}
+            className="mt-1"
+            data-testid="codex-enable-web-search-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="codex-enable-web-search"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <Globe className="w-4 h-4 text-brand-500" />
+              {WEB_SEARCH_TITLE}
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              {WEB_SEARCH_DESCRIPTION}
+            </p>
+          </div>
+        </div>
+
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="codex-enable-images"
+            checked={codexEnableImages}
+            onCheckedChange={(checked) => onCodexEnableImagesChange(checked === true)}
+            className="mt-1"
+            data-testid="codex-enable-images-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="codex-enable-images"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <ImageIcon className="w-4 h-4 text-brand-500" />
+              {IMAGES_TITLE}
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">{IMAGES_DESCRIPTION}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/codex/codex-usage-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/codex/codex-usage-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4c4f96240e998dda2ec3209da9afa88e8bf1f468
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/codex/codex-usage-section.tsx
@@ -0,0 +1,211 @@
+import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
+import { RefreshCw, AlertCircle } from 'lucide-react';
+import { OpenAIIcon } from '@/components/ui/provider-icon';
+import { cn } from '@/lib/utils';
+import {
+  formatCodexPlanType,
+  formatCodexResetTime,
+  getCodexWindowLabel,
+} from '@/lib/codex-usage-format';
+import { useSetupStore } from '@/store/setup-store';
+import { useCodexUsage } from '@/hooks/queries';
+import type { CodexRateLimitWindow } from '@/store/app-store';
+import { getExpectedCodexPacePercentage, getPaceStatusLabel } from '@/store/utils/usage-utils';
+
+const CODEX_USAGE_TITLE = 'Codex Usage';
+const CODEX_USAGE_SUBTITLE = 'Shows usage limits reported by the Codex CLI.';
+const CODEX_AUTH_WARNING = 'Authenticate Codex CLI to view usage limits.';
+const CODEX_LOGIN_COMMAND = 'codex login';
+const CODEX_NO_USAGE_MESSAGE =
+  'Usage limits are not available yet. Try refreshing if this persists.';
+const UPDATED_LABEL = 'Updated';
+const CODEX_REFRESH_LABEL = 'Refresh Codex usage';
+const PLAN_LABEL = 'Plan';
+const WARNING_THRESHOLD = 75;
+const CAUTION_THRESHOLD = 50;
+const MAX_PERCENTAGE = 100;
+const USAGE_COLOR_CRITICAL = 'bg-red-500';
+const USAGE_COLOR_WARNING = 'bg-amber-500';
+const USAGE_COLOR_OK = 'bg-emerald-500';
+
+const isRateLimitWindow = (
+  limitWindow: CodexRateLimitWindow | null
+): limitWindow is CodexRateLimitWindow => Boolean(limitWindow);
+
+export function CodexUsageSection() {
+  const codexAuthStatus = useSetupStore((state) => state.codexAuthStatus);
+
+  const canFetchUsage = !!codexAuthStatus?.authenticated;
+
+  // Use React Query for data fetching with automatic polling
+  const { data: codexUsage, isLoading, isFetching, error, refetch } = useCodexUsage(canFetchUsage);
+
+  const rateLimits = codexUsage?.rateLimits ?? null;
+  const primary = rateLimits?.primary ?? null;
+  const secondary = rateLimits?.secondary ?? null;
+  const planType = rateLimits?.planType ?? null;
+  const rateLimitWindows = [primary, secondary].filter(isRateLimitWindow);
+  const hasMetrics = rateLimitWindows.length > 0;
+  const lastUpdatedLabel = codexUsage?.lastUpdated
+    ? new Date(codexUsage.lastUpdated).toLocaleString()
+    : null;
+  const showAuthWarning = !canFetchUsage && !codexUsage && !isLoading;
+  const errorMessage = error instanceof Error ? error.message : error ? String(error) : null;
+
+  const getUsageColor = (percentage: number) => {
+    if (percentage >= WARNING_THRESHOLD) {
+      return USAGE_COLOR_CRITICAL;
+    }
+    if (percentage >= CAUTION_THRESHOLD) {
+      return USAGE_COLOR_WARNING;
+    }
+    return USAGE_COLOR_OK;
+  };
+
+  const RateLimitCard = ({
+    title,
+    subtitle,
+    window: limitWindow,
+  }: {
+    title: string;
+    subtitle: string;
+    window: CodexRateLimitWindow;
+  }) => {
+    const safePercentage = Math.min(Math.max(limitWindow.usedPercent, 0), MAX_PERCENTAGE);
+    const resetLabel = formatCodexResetTime(limitWindow.resetsAt);
+    const pacePercentage = getExpectedCodexPacePercentage(
+      limitWindow.resetsAt,
+      limitWindow.windowDurationMins
+    );
+    const paceLabel =
+      pacePercentage != null ? getPaceStatusLabel(safePercentage, pacePercentage) : null;
+
+    return (
+      <div className="rounded-xl border border-border/60 bg-card/50 p-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm font-semibold text-foreground">{title}</p>
+            <p className="text-xs text-muted-foreground">{subtitle}</p>
+          </div>
+          <span className="text-sm font-semibold text-foreground">
+            {Math.round(safePercentage)}%
+          </span>
+        </div>
+        <div className="relative mt-3 h-2 w-full rounded-full bg-secondary/60">
+          <div
+            className={cn(
+              'h-full rounded-full transition-all duration-300',
+              getUsageColor(safePercentage)
+            )}
+            style={{ width: `${safePercentage}%` }}
+          />
+          {pacePercentage != null && pacePercentage > 0 && pacePercentage < 100 && (
+            <div
+              className="absolute top-0 h-full w-0.5 bg-foreground/60"
+              style={{ left: `${pacePercentage}%` }}
+              title={`Expected: ${Math.round(pacePercentage)}%`}
+            />
+          )}
+        </div>
+        <div className="mt-2 flex items-center justify-between">
+          {paceLabel ? (
+            <p
+              className={cn(
+                'text-xs font-medium',
+                safePercentage > (pacePercentage ?? 0) ? 'text-orange-500' : 'text-green-500'
+              )}
+            >
+              {paceLabel}
+            </p>
+          ) : (
+            <div />
+          )}
+          {resetLabel && <p className="text-xs text-muted-foreground">{resetLabel}</p>}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <OpenAIIcon className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            {CODEX_USAGE_TITLE}
+          </h2>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => refetch()}
+            disabled={isFetching}
+            className="ml-auto h-9 w-9 rounded-lg hover:bg-accent/50"
+            data-testid="refresh-codex-usage"
+            title={CODEX_REFRESH_LABEL}
+          >
+            {isFetching ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">{CODEX_USAGE_SUBTITLE}</p>
+      </div>
+      <div className="p-6 space-y-4">
+        {showAuthWarning && (
+          <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+            <AlertCircle className="w-5 h-5 text-amber-500 mt-0.5" />
+            <div className="text-sm text-amber-400">
+              {CODEX_AUTH_WARNING} Run <span className="font-mono">{CODEX_LOGIN_COMMAND}</span>.
+            </div>
+          </div>
+        )}
+        {errorMessage && (
+          <div className="flex items-start gap-3 p-4 rounded-xl bg-red-500/10 border border-red-500/20">
+            <AlertCircle className="w-5 h-5 text-red-500 mt-0.5" />
+            <div className="text-sm text-red-400">{errorMessage}</div>
+          </div>
+        )}
+        {hasMetrics && (
+          <div className="grid gap-3 sm:grid-cols-2">
+            {rateLimitWindows.map((limitWindow, index) => {
+              const { title, subtitle } = getCodexWindowLabel(limitWindow.windowDurationMins);
+              return (
+                <RateLimitCard
+                  key={`${title}-${index}`}
+                  title={title}
+                  subtitle={subtitle}
+                  window={limitWindow}
+                />
+              );
+            })}
+          </div>
+        )}
+        {planType && (
+          <div className="rounded-xl border border-border/60 bg-secondary/20 p-4 text-xs text-muted-foreground">
+            <div>
+              {PLAN_LABEL}: <span className="text-foreground">{formatCodexPlanType(planType)}</span>
+            </div>
+          </div>
+        )}
+        {!hasMetrics && !errorMessage && canFetchUsage && !isLoading && (
+          <div className="rounded-xl border border-border/60 bg-secondary/20 p-4 text-xs text-muted-foreground">
+            {CODEX_NO_USAGE_MESSAGE}
+          </div>
+        )}
+        {lastUpdatedLabel && (
+          <div className="text-[10px] text-muted-foreground text-right">
+            {UPDATED_LABEL} {lastUpdatedLabel}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/components/delete-project-dialog.tsx b/temp_repo/apps/ui/src/components/views/settings-view/components/delete-project-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..68ef3a511a8ccc48bd8802812b1d5bdfdf6d0171
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/components/delete-project-dialog.tsx
@@ -0,0 +1,54 @@
+import { Folder } from 'lucide-react';
+import { DeleteConfirmDialog } from '@/components/ui/delete-confirm-dialog';
+import type { Project } from '@/lib/electron';
+
+interface DeleteProjectDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  project: Project | null;
+  onConfirm: (projectId: string) => void;
+}
+
+export function DeleteProjectDialog({
+  open,
+  onOpenChange,
+  project,
+  onConfirm,
+}: DeleteProjectDialogProps) {
+  const handleConfirm = () => {
+    if (project) {
+      onConfirm(project.id);
+    }
+  };
+
+  return (
+    <DeleteConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      onConfirm={handleConfirm}
+      title="Delete Project"
+      description="Are you sure you want to move this project to Trash?"
+      confirmText="Move to Trash"
+      testId="delete-project-dialog"
+      confirmTestId="confirm-delete-project"
+    >
+      {project && (
+        <>
+          <div className="flex items-center gap-3 p-4 rounded-lg bg-sidebar-accent/10 border border-sidebar-border">
+            <div className="w-10 h-10 rounded-lg bg-sidebar-accent/20 border border-sidebar-border flex items-center justify-center shrink-0">
+              <Folder className="w-5 h-5 text-brand-500" />
+            </div>
+            <div className="min-w-0">
+              <p className="font-medium text-foreground truncate">{project.name}</p>
+              <p className="text-xs text-muted-foreground truncate">{project.path}</p>
+            </div>
+          </div>
+
+          <p className="text-sm text-muted-foreground">
+            The folder will remain on disk until you permanently delete it from Trash.
+          </p>
+        </>
+      )}
+    </DeleteConfirmDialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/components/import-export-dialog.tsx b/temp_repo/apps/ui/src/components/views/settings-view/components/import-export-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9472b1fa8d413bc803d9736def28b5797e011fa2
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/components/import-export-dialog.tsx
@@ -0,0 +1,203 @@
+import { useState, useEffect } from 'react';
+import { Copy, Check, AlertCircle, Save } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { JsonSyntaxEditor } from '@/components/ui/json-syntax-editor';
+import { apiGet, apiPut } from '@/lib/api-fetch';
+import { toast } from 'sonner';
+import type { GlobalSettings } from '@automaker/types';
+
+interface ImportExportDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+interface SettingsResponse {
+  success: boolean;
+  settings: GlobalSettings;
+}
+
+export function ImportExportDialog({ open, onOpenChange }: ImportExportDialogProps) {
+  const [jsonValue, setJsonValue] = useState('');
+  const [originalValue, setOriginalValue] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [parseError, setParseError] = useState<string | null>(null);
+
+  // Load current settings when dialog opens
+  useEffect(() => {
+    if (open) {
+      loadSettings();
+    }
+  }, [open]);
+
+  const loadSettings = async () => {
+    setIsLoading(true);
+    try {
+      const response = await apiGet<SettingsResponse>('/api/settings/global');
+      if (response.success) {
+        const formatted = JSON.stringify(response.settings, null, 2);
+        setJsonValue(formatted);
+        setOriginalValue(formatted);
+        setParseError(null);
+      }
+    } catch (error) {
+      toast.error('Failed to load settings');
+      console.error('Failed to load settings:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Validate JSON on change
+  const handleJsonChange = (value: string) => {
+    setJsonValue(value);
+    try {
+      JSON.parse(value);
+      setParseError(null);
+    } catch {
+      setParseError('Invalid JSON syntax');
+    }
+  };
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(jsonValue);
+      setCopied(true);
+      toast.success('Settings copied to clipboard');
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast.error('Failed to copy to clipboard');
+    }
+  };
+
+  const handleSave = async () => {
+    if (parseError) {
+      toast.error('Please fix JSON syntax errors before saving');
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const settings = JSON.parse(jsonValue);
+      const response = await apiPut<SettingsResponse>('/api/settings/global', settings);
+      if (response.success) {
+        const formatted = JSON.stringify(response.settings, null, 2);
+        setJsonValue(formatted);
+        setOriginalValue(formatted);
+        toast.success('Settings saved successfully', {
+          description: 'Your changes have been applied. Some settings may require a refresh.',
+        });
+        onOpenChange(false);
+      }
+    } catch (error) {
+      toast.error('Failed to save settings');
+      console.error('Failed to save settings:', error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleReset = () => {
+    setJsonValue(originalValue);
+    setParseError(null);
+  };
+
+  const hasChanges = jsonValue !== originalValue;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[calc(100%-2rem)] sm:max-w-3xl lg:max-w-4xl max-h-[85vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Import / Export Settings</DialogTitle>
+          <DialogDescription>
+            Copy your settings to transfer to another machine, or paste settings from another
+            installation.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 flex flex-col gap-4 min-h-0 mt-4">
+          {/* Action Buttons */}
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleCopy}
+                disabled={isLoading || !!parseError}
+                className="gap-2"
+              >
+                {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+                {copied ? 'Copied!' : 'Copy'}
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={loadSettings}
+                disabled={isLoading}
+                className="gap-2"
+              >
+                Refresh
+              </Button>
+            </div>
+            <div className="flex items-center gap-2">
+              {hasChanges && (
+                <Button variant="ghost" size="sm" onClick={handleReset} disabled={isSaving}>
+                  Discard
+                </Button>
+              )}
+              <Button
+                variant="default"
+                size="sm"
+                onClick={handleSave}
+                disabled={isLoading || isSaving || !hasChanges || !!parseError}
+                className="gap-2"
+              >
+                <Save className="w-4 h-4" />
+                {isSaving ? 'Saving...' : 'Save Changes'}
+              </Button>
+            </div>
+          </div>
+
+          {/* Error Message */}
+          {parseError && (
+            <div className="flex items-center gap-2 p-3 rounded-lg bg-destructive/10 border border-destructive/20 text-destructive text-sm">
+              <AlertCircle className="w-4 h-4 flex-shrink-0" />
+              <span>{parseError}</span>
+            </div>
+          )}
+
+          {/* JSON Editor */}
+          <div className="flex-1 min-h-0 overflow-hidden">
+            {isLoading ? (
+              <div className="flex items-center justify-center h-full text-muted-foreground">
+                Loading settings...
+              </div>
+            ) : (
+              <JsonSyntaxEditor
+                value={jsonValue}
+                onChange={handleJsonChange}
+                placeholder="Loading settings..."
+                minHeight="350px"
+                maxHeight="450px"
+                data-testid="settings-json-editor"
+              />
+            )}
+          </div>
+
+          {/* Help Text */}
+          <p className="text-xs text-muted-foreground">
+            To import settings, paste the JSON content into the editor and click "Save Changes".
+          </p>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/components/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..154026ae2e6992ca6cc867f3ae076e5fcd881332
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/components/index.ts
@@ -0,0 +1,5 @@
+export { DeleteProjectDialog } from './delete-project-dialog';
+export { RemoveFromAutomakerDialog } from './remove-from-automaker-dialog';
+export { KeyboardMapDialog } from './keyboard-map-dialog';
+export { SettingsHeader } from './settings-header';
+export { SettingsNavigation } from './settings-navigation';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/components/keyboard-map-dialog.tsx b/temp_repo/apps/ui/src/components/views/settings-view/components/keyboard-map-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cdcd72204ef5d03b0667c00957fa212e34f7253a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/components/keyboard-map-dialog.tsx
@@ -0,0 +1,46 @@
+import { Keyboard } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { KeyboardMap, ShortcutReferencePanel } from '@/components/ui/keyboard-map';
+
+interface KeyboardMapDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function KeyboardMapDialog({ open, onOpenChange }: KeyboardMapDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-popover border-border max-w-[calc(100%-2rem)] sm:max-w-3xl lg:max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Keyboard className="w-5 h-5 text-brand-500" />
+            Keyboard Shortcut Map
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            Visual overview of all keyboard shortcuts. Keys in color are bound to shortcuts. Click
+            on any shortcut below to edit it.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto space-y-6 py-4 pl-3 pr-6 pb-6">
+          {/* Visual Keyboard Map */}
+          <KeyboardMap />
+
+          {/* Shortcut Reference - Editable */}
+          <div className="border-t border-border pt-4">
+            <h3 className="text-sm font-semibold text-foreground mb-4">
+              All Shortcuts Reference (Click to Edit)
+            </h3>
+            <ShortcutReferencePanel editable />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/components/remove-from-automaker-dialog.tsx b/temp_repo/apps/ui/src/components/views/settings-view/components/remove-from-automaker-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6303cad96764ef7c7b812057d0ecff513d0b246b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/components/remove-from-automaker-dialog.tsx
@@ -0,0 +1,49 @@
+import { Folder, LogOut } from 'lucide-react';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+import type { Project } from '@/lib/electron';
+
+interface RemoveFromAutomakerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  project: Project | null;
+  onConfirm: (projectId: string) => void;
+}
+
+export function RemoveFromAutomakerDialog({
+  open,
+  onOpenChange,
+  project,
+  onConfirm,
+}: RemoveFromAutomakerDialogProps) {
+  const handleConfirm = () => {
+    if (project) {
+      onConfirm(project.id);
+    }
+  };
+
+  return (
+    <ConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      onConfirm={handleConfirm}
+      title="Remove from Automaker"
+      description="Remove this project from Automaker? The folder will remain on disk and can be re-added later."
+      icon={LogOut}
+      iconClassName="text-muted-foreground"
+      confirmText="Remove from Automaker"
+      confirmVariant="secondary"
+    >
+      {project && (
+        <div className="flex items-center gap-3 p-4 rounded-lg bg-sidebar-accent/10 border border-sidebar-border">
+          <div className="w-10 h-10 rounded-lg bg-sidebar-accent/20 border border-sidebar-border flex items-center justify-center shrink-0">
+            <Folder className="w-5 h-5 text-brand-500" />
+          </div>
+          <div className="min-w-0">
+            <p className="font-medium text-foreground truncate">{project.name}</p>
+            <p className="text-xs text-muted-foreground truncate">{project.path}</p>
+          </div>
+        </div>
+      )}
+    </ConfirmDialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/components/settings-header.tsx b/temp_repo/apps/ui/src/components/views/settings-view/components/settings-header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aebe7cb1207f2f5a74d256916b0e995b1147930c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/components/settings-header.tsx
@@ -0,0 +1,73 @@
+import { Cog, Menu, X, FileJson } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+interface SettingsHeaderProps {
+  title?: string;
+  description?: string;
+  showNavigation?: boolean;
+  onToggleNavigation?: () => void;
+  onImportExportClick?: () => void;
+}
+
+export function SettingsHeader({
+  title = 'Global Settings',
+  description = 'Configure your API keys and preferences',
+  showNavigation,
+  onToggleNavigation,
+  onImportExportClick,
+}: SettingsHeaderProps) {
+  return (
+    <div
+      className={cn(
+        'shrink-0',
+        'border-b border-border/50',
+        'bg-gradient-to-r from-card/90 via-card/70 to-card/80 backdrop-blur-xl'
+      )}
+    >
+      <div className="px-4 py-4 lg:px-8 lg:py-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3 lg:gap-4">
+            <div
+              className={cn(
+                'w-10 h-10 lg:w-12 lg:h-12 rounded-xl lg:rounded-2xl flex items-center justify-center',
+                'bg-gradient-to-br from-brand-500 to-brand-600',
+                'shadow-lg shadow-brand-500/25',
+                'ring-1 ring-white/10'
+              )}
+            >
+              <Cog className="w-5 h-5 lg:w-6 lg:h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-xl lg:text-2xl font-bold text-foreground tracking-tight">
+                {title}
+              </h1>
+              <p className="text-xs lg:text-sm text-muted-foreground/80 mt-0.5">{description}</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            {/* Import/Export button */}
+            {onImportExportClick && (
+              <Button variant="outline" size="sm" onClick={onImportExportClick} className="gap-2">
+                <FileJson className="w-4 h-4" />
+                <span className="hidden sm:inline">Import / Export</span>
+              </Button>
+            )}
+            {/* Mobile menu toggle button - only visible on mobile */}
+            {onToggleNavigation && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onToggleNavigation}
+                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground lg:hidden"
+                aria-label={showNavigation ? 'Close navigation menu' : 'Open navigation menu'}
+              >
+                {showNavigation ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/components/settings-navigation.tsx b/temp_repo/apps/ui/src/components/views/settings-view/components/settings-navigation.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ffe1c12c995f6e2f0888b4575436a6a31e851641
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/components/settings-navigation.tsx
@@ -0,0 +1,281 @@
+import { useState, useEffect } from 'react';
+import { ChevronDown, ChevronRight, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import type { Project } from '@/lib/electron';
+import type { NavigationItem } from '../config/navigation';
+import { GLOBAL_NAV_GROUPS } from '../config/navigation';
+import type { SettingsViewId } from '../hooks/use-settings-view';
+import { useAppStore } from '@/store/app-store';
+import type { ModelProvider } from '@automaker/types';
+
+const PROVIDERS_DROPDOWN_KEY = 'settings-providers-dropdown-open';
+
+// Map navigation item IDs to provider types for checking disabled state
+const NAV_ID_TO_PROVIDER: Record<string, ModelProvider> = {
+  'claude-provider': 'claude',
+  'cursor-provider': 'cursor',
+  'codex-provider': 'codex',
+  'opencode-provider': 'opencode',
+  'gemini-provider': 'gemini',
+  'copilot-provider': 'copilot',
+};
+
+interface SettingsNavigationProps {
+  navItems: NavigationItem[];
+  activeSection: SettingsViewId;
+  currentProject: Project | null;
+  onNavigate: (sectionId: SettingsViewId) => void;
+  isOpen?: boolean;
+  onClose?: () => void;
+}
+
+function NavButton({
+  item,
+  isActive,
+  onNavigate,
+}: {
+  item: NavigationItem;
+  isActive: boolean;
+  onNavigate: (sectionId: SettingsViewId) => void;
+}) {
+  const Icon = item.icon;
+  return (
+    <button
+      key={item.id}
+      onClick={() => onNavigate(item.id)}
+      className={cn(
+        'group w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 ease-out text-left relative overflow-hidden',
+        isActive
+          ? [
+              'bg-gradient-to-r from-brand-500/15 via-brand-500/10 to-brand-600/5',
+              'text-foreground',
+              'border border-brand-500/25',
+              'shadow-sm shadow-brand-500/5',
+            ]
+          : [
+              'text-muted-foreground hover:text-foreground',
+              'hover:bg-accent/50',
+              'border border-transparent hover:border-border/40',
+            ],
+        'hover:scale-[1.01] active:scale-[0.98]'
+      )}
+    >
+      {/* Active indicator bar */}
+      {isActive && (
+        <div className="absolute inset-y-0 left-0 w-0.5 bg-gradient-to-b from-brand-400 via-brand-500 to-brand-600 rounded-r-full" />
+      )}
+      <Icon
+        className={cn(
+          'w-4 h-4 shrink-0 transition-all duration-200',
+          isActive ? 'text-brand-500' : 'group-hover:text-brand-400 group-hover:scale-110'
+        )}
+      />
+      <span className="truncate">{item.label}</span>
+    </button>
+  );
+}
+
+function NavItemWithSubItems({
+  item,
+  activeSection,
+  onNavigate,
+}: {
+  item: NavigationItem;
+  activeSection: SettingsViewId;
+  onNavigate: (sectionId: SettingsViewId) => void;
+}) {
+  const disabledProviders = useAppStore((state) => state.disabledProviders);
+
+  const [isOpen, setIsOpen] = useState(() => {
+    if (typeof window !== 'undefined') {
+      const stored = localStorage.getItem(PROVIDERS_DROPDOWN_KEY);
+      return stored === null ? true : stored === 'true';
+    }
+    return true;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(PROVIDERS_DROPDOWN_KEY, String(isOpen));
+  }, [isOpen]);
+
+  const hasActiveSubItem = item.subItems?.some((subItem) => subItem.id === activeSection) ?? false;
+  const isParentActive = item.id === activeSection;
+  const Icon = item.icon;
+  const ChevronIcon = isOpen ? ChevronDown : ChevronRight;
+
+  return (
+    <div>
+      {/* Parent item - clickable to toggle dropdown */}
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={cn(
+          'group w-full flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 ease-out text-left',
+          'text-muted-foreground hover:text-foreground',
+          'hover:bg-accent/50',
+          'border border-transparent hover:border-border/40',
+          (isParentActive || hasActiveSubItem) && 'text-foreground'
+        )}
+      >
+        <Icon
+          className={cn(
+            'w-4 h-4 shrink-0 transition-all duration-200',
+            isParentActive || hasActiveSubItem ? 'text-brand-500' : 'group-hover:text-brand-400'
+          )}
+        />
+        <span className="truncate flex-1">{item.label}</span>
+        <ChevronIcon
+          className={cn(
+            'w-4 h-4 shrink-0 transition-transform duration-200',
+            'text-muted-foreground/60 group-hover:text-muted-foreground'
+          )}
+        />
+      </button>
+      {/* Sub-items - conditionally displayed */}
+      {item.subItems && isOpen && (
+        <div className="ml-4 mt-1 space-y-1">
+          {item.subItems.map((subItem) => {
+            const SubIcon = subItem.icon;
+            const isSubActive = subItem.id === activeSection;
+            // Check if this provider is disabled
+            const provider = NAV_ID_TO_PROVIDER[subItem.id];
+            const isDisabled = provider && disabledProviders.includes(provider);
+            return (
+              <button
+                key={subItem.id}
+                onClick={() => onNavigate(subItem.id)}
+                className={cn(
+                  'group w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ease-out text-left relative overflow-hidden',
+                  isSubActive
+                    ? [
+                        'bg-gradient-to-r from-brand-500/15 via-brand-500/10 to-brand-600/5',
+                        'text-foreground',
+                        'border border-brand-500/25',
+                        'shadow-sm shadow-brand-500/5',
+                      ]
+                    : [
+                        'text-muted-foreground hover:text-foreground',
+                        'hover:bg-accent/50',
+                        'border border-transparent hover:border-border/40',
+                      ],
+                  'hover:scale-[1.01] active:scale-[0.98]',
+                  // Gray out disabled providers
+                  isDisabled && !isSubActive && 'opacity-40'
+                )}
+              >
+                {/* Active indicator bar */}
+                {isSubActive && (
+                  <div className="absolute inset-y-0 left-0 w-0.5 bg-gradient-to-b from-brand-400 via-brand-500 to-brand-600 rounded-r-full" />
+                )}
+                <SubIcon
+                  className={cn(
+                    'w-4 h-4 shrink-0 transition-all duration-200',
+                    isSubActive
+                      ? 'text-brand-500'
+                      : 'group-hover:text-brand-400 group-hover:scale-110',
+                    // Gray out icon for disabled providers
+                    isDisabled && !isSubActive && 'opacity-60'
+                  )}
+                />
+                <span className="truncate">{subItem.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function SettingsNavigation({
+  activeSection,
+  currentProject: _currentProject,
+  onNavigate,
+  isOpen = true,
+  onClose,
+}: SettingsNavigationProps) {
+  // On mobile, only show when isOpen is true
+  // On desktop (lg+), always show regardless of isOpen
+  // The desktop visibility is handled by CSS, but we need to render on mobile only when open
+
+  return (
+    <>
+      {/* Mobile backdrop overlay - only shown when isOpen is true on mobile */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-20 lg:hidden"
+          onClick={onClose}
+          data-testid="settings-nav-backdrop"
+        />
+      )}
+
+      {/* Navigation sidebar */}
+      <nav
+        className={cn(
+          // Mobile: fixed position overlay with slide transition from right
+          'fixed inset-y-0 right-0 w-72 z-30',
+          'transition-transform duration-200 ease-out',
+          // Hide on mobile when closed, show when open
+          isOpen ? 'translate-x-0' : 'translate-x-full',
+          // Desktop: relative position in layout, always visible
+          'lg:relative lg:w-64 lg:z-auto lg:translate-x-0',
+          'shrink-0 overflow-y-auto',
+          'border-l border-border/50 lg:border-l-0 lg:border-r',
+          'bg-gradient-to-b from-card/95 via-card/90 to-card/85 backdrop-blur-xl',
+          // Desktop background
+          'lg:from-card/80 lg:via-card/60 lg:to-card/40'
+        )}
+      >
+        {/* Mobile close button */}
+        <div className="lg:hidden flex items-center justify-between px-4 py-3 border-b border-border/50">
+          <span className="text-sm font-semibold text-foreground">Navigation</span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClose}
+            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+            aria-label="Close navigation menu"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+
+        <div className="sticky top-0 p-4 space-y-1">
+          {/* Global Settings Groups */}
+          {GLOBAL_NAV_GROUPS.map((group, groupIndex) => (
+            <div key={group.label}>
+              {/* Group divider (except for first group) */}
+              {groupIndex > 0 && <div className="my-3 border-t border-border/50" />}
+
+              {/* Group Label */}
+              <div className="px-3 py-2 text-xs font-semibold text-muted-foreground/70 uppercase tracking-wider">
+                {group.label}
+              </div>
+
+              {/* Group Items */}
+              <div className="space-y-1">
+                {group.items.map((item) =>
+                  item.subItems ? (
+                    <NavItemWithSubItems
+                      key={item.id}
+                      item={item}
+                      activeSection={activeSection}
+                      onNavigate={onNavigate}
+                    />
+                  ) : (
+                    <NavButton
+                      key={item.id}
+                      item={item}
+                      isActive={activeSection === item.id}
+                      onNavigate={onNavigate}
+                    />
+                  )
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </nav>
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/config/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/config/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9591a88df0cff2aed2df227da2423e6bba699b8a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/config/index.ts
@@ -0,0 +1,2 @@
+export { NAV_ITEMS } from './navigation';
+export type { NavigationItem } from './navigation';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/config/navigation.ts b/temp_repo/apps/ui/src/components/views/settings-view/config/navigation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9148e2f2ef3ab98403c2b169ee902288cae160be
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/config/navigation.ts
@@ -0,0 +1,99 @@
+import React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import {
+  Key,
+  Bot,
+  SquareTerminal,
+  Palette,
+  Settings2,
+  Volume2,
+  FlaskConical,
+  Workflow,
+  Plug,
+  MessageSquareText,
+  User,
+  Shield,
+  GitBranch,
+  Code2,
+  Webhook,
+  FileCode2,
+  FileText,
+} from 'lucide-react';
+import {
+  AnthropicIcon,
+  CursorIcon,
+  OpenAIIcon,
+  OpenCodeIcon,
+  GeminiIcon,
+  CopilotIcon,
+} from '@/components/ui/provider-icon';
+import type { SettingsViewId } from '../hooks/use-settings-view';
+
+export interface NavigationItem {
+  id: SettingsViewId;
+  label: string;
+  icon: LucideIcon | React.ComponentType<{ className?: string }>;
+  subItems?: NavigationItem[];
+}
+
+export interface NavigationGroup {
+  label: string;
+  items: NavigationItem[];
+}
+
+// Global settings organized into groups
+export const GLOBAL_NAV_GROUPS: NavigationGroup[] = [
+  {
+    label: 'Model & Prompts',
+    items: [
+      { id: 'defaults', label: 'Feature Defaults', icon: FlaskConical },
+      { id: 'model-defaults', label: 'Model Defaults', icon: Workflow },
+      { id: 'worktrees', label: 'Worktrees', icon: GitBranch },
+      { id: 'prompts', label: 'Prompt Customization', icon: MessageSquareText },
+      { id: 'templates', label: 'Templates', icon: FileText },
+      { id: 'api-keys', label: 'API Keys', icon: Key },
+      {
+        id: 'providers',
+        label: 'AI Providers',
+        icon: Bot,
+        subItems: [
+          { id: 'claude-provider', label: 'Claude', icon: AnthropicIcon },
+          { id: 'cursor-provider', label: 'Cursor', icon: CursorIcon },
+          { id: 'codex-provider', label: 'Codex', icon: OpenAIIcon },
+          { id: 'opencode-provider', label: 'OpenCode', icon: OpenCodeIcon },
+          { id: 'gemini-provider', label: 'Gemini', icon: GeminiIcon },
+          { id: 'copilot-provider', label: 'Copilot', icon: CopilotIcon },
+        ],
+      },
+      { id: 'mcp-servers', label: 'MCP Servers', icon: Plug },
+    ],
+  },
+  {
+    label: 'Interface',
+    items: [
+      { id: 'appearance', label: 'Appearance', icon: Palette },
+      { id: 'editor', label: 'File Editor', icon: FileCode2 },
+      { id: 'terminal', label: 'Terminal', icon: SquareTerminal },
+      { id: 'keyboard', label: 'Keyboard Shortcuts', icon: Settings2 },
+      { id: 'audio', label: 'Audio', icon: Volume2 },
+      { id: 'event-hooks', label: 'Event Hooks', icon: Webhook },
+    ],
+  },
+  {
+    label: 'Account & Security',
+    items: [
+      { id: 'account', label: 'Account', icon: User },
+      { id: 'security', label: 'Security', icon: Shield },
+    ],
+  },
+  {
+    label: 'Advanced',
+    items: [{ id: 'developer', label: 'Developer', icon: Code2 }],
+  },
+];
+
+// Flat list of all global nav items for backwards compatibility
+export const GLOBAL_NAV_ITEMS: NavigationItem[] = GLOBAL_NAV_GROUPS.flatMap((group) => group.items);
+
+// Legacy export for backwards compatibility
+export const NAV_ITEMS: NavigationItem[] = GLOBAL_NAV_ITEMS;
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/danger-zone/danger-zone-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/danger-zone/danger-zone-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3b1de8b56a8cf5b4c88f466c864997d7bb0dfa79
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/danger-zone/danger-zone-section.tsx
@@ -0,0 +1,93 @@
+import { Button } from '@/components/ui/button';
+import { Trash2, Folder, AlertTriangle, LogOut } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { Project } from '../shared/types';
+
+interface DangerZoneSectionProps {
+  project: Project | null;
+  onDeleteClick: () => void;
+  onRemoveFromAutomakerClick?: () => void;
+}
+
+export function DangerZoneSection({
+  project,
+  onDeleteClick,
+  onRemoveFromAutomakerClick,
+}: DangerZoneSectionProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-destructive/30',
+        'bg-gradient-to-br from-destructive/5 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-destructive/5'
+      )}
+    >
+      <div className="p-6 border-b border-destructive/20 bg-gradient-to-r from-destructive/5 via-transparent to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-destructive/20 to-destructive/10 flex items-center justify-center border border-destructive/20">
+            <AlertTriangle className="w-5 h-5 text-destructive" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Danger Zone</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">Destructive project actions.</p>
+      </div>
+      <div className="p-6 space-y-4">
+        {project ? (
+          <>
+            {/* Remove from Automaker */}
+            {onRemoveFromAutomakerClick && (
+              <div className="flex items-start justify-between gap-4 p-4 rounded-xl bg-muted/30 border border-border">
+                <div className="min-w-0">
+                  <p className="font-medium text-foreground">Remove from Automaker</p>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    Remove this project from Automaker without deleting any files from disk. You can
+                    re-add it later by opening the folder.
+                  </p>
+                </div>
+                <Button
+                  variant="secondary"
+                  onClick={onRemoveFromAutomakerClick}
+                  data-testid="remove-from-automaker-button"
+                  className="shrink-0 transition-all duration-200 ease-out hover:scale-[1.02] active:scale-[0.98]"
+                >
+                  <LogOut className="w-4 h-4 mr-2" />
+                  Remove
+                </Button>
+              </div>
+            )}
+
+            {/* Project Delete / Move to Trash */}
+            <div className="flex items-center justify-between gap-4 p-4 rounded-xl bg-destructive/5 border border-destructive/10">
+              <div className="flex items-center gap-3.5 min-w-0">
+                <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500/15 to-brand-600/10 border border-brand-500/20 flex items-center justify-center shrink-0">
+                  <Folder className="w-5 h-5 text-brand-500" />
+                </div>
+                <div className="min-w-0">
+                  <p className="font-medium text-foreground truncate">{project.name}</p>
+                  <p className="text-xs text-muted-foreground/70 truncate mt-0.5">{project.path}</p>
+                </div>
+              </div>
+              <Button
+                variant="destructive"
+                onClick={onDeleteClick}
+                data-testid="delete-project-button"
+                className={cn(
+                  'shrink-0',
+                  'shadow-md shadow-destructive/20 hover:shadow-lg hover:shadow-destructive/25',
+                  'transition-all duration-200 ease-out',
+                  'hover:scale-[1.02] active:scale-[0.98]'
+                )}
+              >
+                <Trash2 className="w-4 h-4 mr-2" />
+                Move to Trash
+              </Button>
+            </div>
+          </>
+        ) : (
+          <p className="text-sm text-muted-foreground/60 text-center py-4">No project selected.</p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/danger-zone/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/danger-zone/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f4426f7ebaac9573385fd13fb156ce0b37f9244f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/danger-zone/index.ts
@@ -0,0 +1 @@
+export { DangerZoneSection } from './danger-zone-section';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/developer/developer-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/developer/developer-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4a36bab3b271ac5ebadb506efda5c4de35664cc0
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/developer/developer-section.tsx
@@ -0,0 +1,122 @@
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Code2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useAppStore, type ServerLogLevel } from '@/store/app-store';
+import { toast } from 'sonner';
+
+const LOG_LEVEL_OPTIONS: { value: ServerLogLevel; label: string; description: string }[] = [
+  { value: 'error', label: 'Error', description: 'Only show error messages' },
+  { value: 'warn', label: 'Warning', description: 'Show warnings and errors' },
+  { value: 'info', label: 'Info', description: 'Show general information (default)' },
+  { value: 'debug', label: 'Debug', description: 'Show all messages including debug' },
+];
+
+// Check if we're in development mode
+const IS_DEV = import.meta.env.DEV;
+
+export function DeveloperSection() {
+  const {
+    serverLogLevel,
+    setServerLogLevel,
+    enableRequestLogging,
+    setEnableRequestLogging,
+    showQueryDevtools,
+    setShowQueryDevtools,
+  } = useAppStore();
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-600/10 flex items-center justify-center border border-purple-500/20">
+            <Code2 className="w-5 h-5 text-purple-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Developer</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Advanced settings for debugging and development.
+        </p>
+      </div>
+      <div className="p-6 space-y-6">
+        {/* Server Log Level */}
+        <div className="space-y-3">
+          <Label className="text-foreground font-medium">Server Log Level</Label>
+          <p className="text-xs text-muted-foreground">
+            Control the verbosity of API server logs. Set to "Error" to only see error messages in
+            the server console.
+          </p>
+          <select
+            value={serverLogLevel}
+            onChange={(e) => {
+              setServerLogLevel(e.target.value as ServerLogLevel);
+              toast.success(`Log level changed to ${e.target.value}`, {
+                description: 'Server logging verbosity updated',
+              });
+            }}
+            className={cn(
+              'w-full px-3 py-2 rounded-lg',
+              'bg-accent/30 border border-border/50',
+              'text-foreground text-sm',
+              'focus:outline-none focus:ring-2 focus:ring-purple-500/30'
+            )}
+          >
+            {LOG_LEVEL_OPTIONS.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label} - {option.description}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        {/* HTTP Request Logging */}
+        <div className="flex items-center justify-between pt-4 border-t border-border/30">
+          <div className="space-y-1">
+            <Label className="text-foreground font-medium">HTTP Request Logging</Label>
+            <p className="text-xs text-muted-foreground">
+              Log all HTTP requests (method, URL, status) to the server console.
+            </p>
+          </div>
+          <Switch
+            checked={enableRequestLogging}
+            onCheckedChange={(checked) => {
+              setEnableRequestLogging(checked);
+              toast.success(checked ? 'Request logging enabled' : 'Request logging disabled', {
+                description: 'HTTP request logging updated',
+              });
+            }}
+          />
+        </div>
+
+        {/* React Query DevTools - only shown in development mode */}
+        {IS_DEV && (
+          <div className="flex items-center justify-between pt-4 border-t border-border/30">
+            <div className="space-y-1">
+              <Label className="text-foreground font-medium">React Query DevTools</Label>
+              <p className="text-xs text-muted-foreground">
+                Show React Query DevTools panel in the bottom-right corner for debugging queries and
+                cache.
+              </p>
+            </div>
+            <Switch
+              checked={showQueryDevtools}
+              onCheckedChange={(checked) => {
+                setShowQueryDevtools(checked);
+                toast.success(checked ? 'Query DevTools enabled' : 'Query DevTools disabled', {
+                  description: 'React Query DevTools visibility updated',
+                });
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/editor/editor-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/editor/editor-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7a4738c355516e9467eff938e2e2789b45483c9e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/editor/editor-section.tsx
@@ -0,0 +1,120 @@
+import { Label } from '@/components/ui/label';
+import { Slider } from '@/components/ui/slider';
+import { Switch } from '@/components/ui/switch';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { FileCode2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import { UI_MONO_FONT_OPTIONS, DEFAULT_FONT_VALUE } from '@/config/ui-font-options';
+
+/**
+ * Editor font options - reuses UI_MONO_FONT_OPTIONS with editor-specific default label
+ *
+ * The 'default' value means "use the default editor font" (Geist Mono / theme default)
+ */
+const EDITOR_FONT_OPTIONS = UI_MONO_FONT_OPTIONS.map((option) => {
+  if (option.value === DEFAULT_FONT_VALUE) {
+    return { value: option.value, label: 'Default (Geist Mono)' };
+  }
+  return option;
+});
+
+export function EditorSection() {
+  const {
+    editorFontSize,
+    editorFontFamily,
+    editorAutoSave,
+    setEditorFontSize,
+    setEditorFontFamily,
+    setEditorAutoSave,
+  } = useAppStore();
+
+  return (
+    <div className="space-y-6">
+      <div
+        className={cn(
+          'rounded-2xl overflow-hidden',
+          'border border-border/50',
+          'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+          'shadow-sm shadow-black/5'
+        )}
+      >
+        <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500/20 to-blue-600/10 flex items-center justify-center border border-blue-500/20">
+              <FileCode2 className="w-5 h-5 text-blue-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">File Editor</h2>
+          </div>
+          <p className="text-sm text-muted-foreground/80 ml-12">
+            Customize the appearance of the built-in file editor.
+          </p>
+        </div>
+        <div className="p-6 space-y-6">
+          {/* Font Family */}
+          <div className="space-y-3">
+            <Label className="text-foreground font-medium">Font Family</Label>
+            <Select
+              value={editorFontFamily || DEFAULT_FONT_VALUE}
+              onValueChange={(value) => {
+                setEditorFontFamily(value);
+              }}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Default (Geist Mono)" />
+              </SelectTrigger>
+              <SelectContent>
+                {EDITOR_FONT_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    <span
+                      style={{
+                        fontFamily: option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
+                      }}
+                    >
+                      {option.label}
+                    </span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Font Size */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-foreground font-medium">Font Size</Label>
+              <span className="text-sm text-muted-foreground">{editorFontSize}px</span>
+            </div>
+            <Slider
+              value={[editorFontSize]}
+              min={8}
+              max={32}
+              step={1}
+              onValueChange={([value]) => setEditorFontSize(value)}
+              className="flex-1"
+            />
+          </div>
+
+          {/* Auto Save */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <Label className="text-foreground font-medium">Auto Save</Label>
+                <p className="text-xs text-muted-foreground/80 mt-0.5">
+                  Automatically save files after changes or when switching tabs
+                </p>
+              </div>
+              <Switch checked={editorAutoSave} onCheckedChange={setEditorAutoSave} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/editor/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/editor/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e85f5861a0d37ea43b6df28564c2ea929b636e37
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/editor/index.ts
@@ -0,0 +1 @@
+export { EditorSection } from './editor-section';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/event-hooks/event-history-view.tsx b/temp_repo/apps/ui/src/components/views/settings-view/event-hooks/event-history-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a1c6bcbaea2146cfd747c21c17f38af8e98b5fc8
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/event-hooks/event-history-view.tsx
@@ -0,0 +1,349 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import {
+  History,
+  RefreshCw,
+  Trash2,
+  Play,
+  ChevronDown,
+  ChevronRight,
+  CheckCircle,
+  XCircle,
+  Clock,
+  AlertCircle,
+} from 'lucide-react';
+import { useAppStore } from '@/store/app-store';
+import type { StoredEventSummary, StoredEvent, EventHookTrigger } from '@automaker/types';
+import { EVENT_HOOK_TRIGGER_LABELS } from '@automaker/types';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+import { toast } from 'sonner';
+
+export function EventHistoryView() {
+  const currentProject = useAppStore((state) => state.currentProject);
+  const projectPath = currentProject?.path;
+  const [events, setEvents] = useState<StoredEventSummary[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [expandedEvent, setExpandedEvent] = useState<string | null>(null);
+  const [expandedEventData, setExpandedEventData] = useState<StoredEvent | null>(null);
+  const [replayingEvent, setReplayingEvent] = useState<string | null>(null);
+  const [clearDialogOpen, setClearDialogOpen] = useState(false);
+
+  const loadEvents = useCallback(async () => {
+    if (!projectPath) return;
+
+    setLoading(true);
+    try {
+      const api = getHttpApiClient();
+      const result = await api.eventHistory.list(projectPath, { limit: 100 });
+      if (result.success && result.events) {
+        setEvents(result.events);
+      }
+    } catch (error) {
+      console.error('Failed to load events:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [projectPath]);
+
+  useEffect(() => {
+    loadEvents();
+  }, [loadEvents]);
+
+  const handleExpand = async (eventId: string) => {
+    if (expandedEvent === eventId) {
+      setExpandedEvent(null);
+      setExpandedEventData(null);
+      return;
+    }
+
+    if (!projectPath) return;
+
+    setExpandedEvent(eventId);
+    try {
+      const api = getHttpApiClient();
+      const result = await api.eventHistory.get(projectPath, eventId);
+      if (result.success && result.event) {
+        setExpandedEventData(result.event);
+      }
+    } catch (error) {
+      console.error('Failed to load event details:', error);
+    }
+  };
+
+  const handleReplay = async (eventId: string) => {
+    if (!projectPath) return;
+
+    setReplayingEvent(eventId);
+    try {
+      const api = getHttpApiClient();
+      const result = await api.eventHistory.replay(projectPath, eventId);
+      if (result.success && result.result) {
+        const { hooksTriggered, hookResults } = result.result;
+        const successCount = hookResults.filter((r) => r.success).length;
+        const failCount = hookResults.filter((r) => !r.success).length;
+
+        if (hooksTriggered === 0) {
+          toast.info('No matching hooks found for this event trigger.');
+        } else if (failCount === 0) {
+          toast.success(`Successfully ran ${successCount} hook(s).`);
+        } else {
+          toast.warning(
+            `Ran ${hooksTriggered} hook(s): ${successCount} succeeded, ${failCount} failed.`
+          );
+        }
+      }
+    } catch (error) {
+      console.error('Failed to replay event:', error);
+      toast.error('Failed to replay event. Check console for details.');
+    } finally {
+      setReplayingEvent(null);
+    }
+  };
+
+  const handleDelete = async (eventId: string) => {
+    if (!projectPath) return;
+
+    try {
+      const api = getHttpApiClient();
+      const result = await api.eventHistory.delete(projectPath, eventId);
+      if (result.success) {
+        setEvents((prev) => prev.filter((e) => e.id !== eventId));
+        if (expandedEvent === eventId) {
+          setExpandedEvent(null);
+          setExpandedEventData(null);
+        }
+      }
+    } catch (error) {
+      console.error('Failed to delete event:', error);
+    }
+  };
+
+  const handleClearAll = async () => {
+    if (!projectPath) return;
+
+    try {
+      const api = getHttpApiClient();
+      const result = await api.eventHistory.clear(projectPath);
+      if (result.success) {
+        setEvents([]);
+        setExpandedEvent(null);
+        setExpandedEventData(null);
+      }
+    } catch (error) {
+      console.error('Failed to clear events:', error);
+    }
+    setClearDialogOpen(false);
+  };
+
+  const getTriggerIcon = (trigger: EventHookTrigger) => {
+    switch (trigger) {
+      case 'feature_created':
+        return <Clock className="w-4 h-4 text-blue-500" />;
+      case 'feature_success':
+        return <CheckCircle className="w-4 h-4 text-green-500" />;
+      case 'feature_error':
+        return <XCircle className="w-4 h-4 text-red-500" />;
+      case 'auto_mode_complete':
+        return <CheckCircle className="w-4 h-4 text-purple-500" />;
+      case 'auto_mode_error':
+        return <AlertCircle className="w-4 h-4 text-orange-500" />;
+      default:
+        return <History className="w-4 h-4 text-muted-foreground" />;
+    }
+  };
+
+  const formatTimestamp = (timestamp: string) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'Just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+  };
+
+  if (!projectPath) {
+    return (
+      <div className="text-center py-8 text-muted-foreground">
+        <History className="w-12 h-12 mx-auto mb-3 opacity-30" />
+        <p className="text-sm">Select a project to view event history</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Header with actions */}
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">
+          {events.length} event{events.length !== 1 ? 's' : ''} recorded
+        </p>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={loadEvents} disabled={loading}>
+            {loading ? (
+              <Spinner size="sm" className="mr-2" />
+            ) : (
+              <RefreshCw className="w-4 h-4 mr-2" />
+            )}
+            Refresh
+          </Button>
+          {events.length > 0 && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-destructive hover:text-destructive"
+              onClick={() => setClearDialogOpen(true)}
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              Clear All
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Events list */}
+      {events.length === 0 ? (
+        <div className="text-center py-8 text-muted-foreground">
+          <History className="w-12 h-12 mx-auto mb-3 opacity-30" />
+          <p className="text-sm">No events recorded yet</p>
+          <p className="text-xs mt-1">
+            Events will appear here when features are created or completed
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {events.map((event) => (
+            <div
+              key={event.id}
+              className={cn(
+                'rounded-lg border bg-background/50',
+                expandedEvent === event.id && 'ring-1 ring-brand-500/30'
+              )}
+            >
+              {/* Event header */}
+              <div
+                className="flex items-center gap-3 p-3 cursor-pointer hover:bg-muted/30 transition-colors"
+                onClick={() => handleExpand(event.id)}
+              >
+                <button className="p-0.5">
+                  {expandedEvent === event.id ? (
+                    <ChevronDown className="w-4 h-4 text-muted-foreground" />
+                  ) : (
+                    <ChevronRight className="w-4 h-4 text-muted-foreground" />
+                  )}
+                </button>
+
+                {getTriggerIcon(event.trigger)}
+
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">
+                    {EVENT_HOOK_TRIGGER_LABELS[event.trigger]}
+                  </p>
+                  {event.featureName && (
+                    <p className="text-xs text-muted-foreground truncate">{event.featureName}</p>
+                  )}
+                </div>
+
+                <span className="text-xs text-muted-foreground">
+                  {formatTimestamp(event.timestamp)}
+                </span>
+
+                {/* Actions */}
+                <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-7 w-7"
+                    onClick={() => handleReplay(event.id)}
+                    disabled={replayingEvent === event.id}
+                    title="Replay event (trigger matching hooks)"
+                  >
+                    <Play
+                      className={cn('w-3.5 h-3.5', replayingEvent === event.id && 'animate-pulse')}
+                    />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-7 w-7 text-destructive hover:text-destructive"
+                    onClick={() => handleDelete(event.id)}
+                    title="Delete event"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Expanded details */}
+              {expandedEvent === event.id && expandedEventData && (
+                <div className="px-4 pb-4 pt-0 border-t border-border/50">
+                  <div className="mt-3 space-y-2 text-xs">
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <span className="text-muted-foreground">Event ID:</span>
+                        <p className="font-mono text-[10px] truncate">{expandedEventData.id}</p>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground">Timestamp:</span>
+                        <p>{new Date(expandedEventData.timestamp).toLocaleString()}</p>
+                      </div>
+                      {expandedEventData.featureId && (
+                        <div>
+                          <span className="text-muted-foreground">Feature ID:</span>
+                          <p className="font-mono text-[10px] truncate">
+                            {expandedEventData.featureId}
+                          </p>
+                        </div>
+                      )}
+                      {expandedEventData.passes !== undefined && (
+                        <div>
+                          <span className="text-muted-foreground">Passed:</span>
+                          <p>{expandedEventData.passes ? 'Yes' : 'No'}</p>
+                        </div>
+                      )}
+                    </div>
+                    {expandedEventData.error && (
+                      <div>
+                        <span className="text-muted-foreground">Error:</span>
+                        <p className="text-red-400 mt-1 p-2 bg-red-500/10 rounded text-[10px] font-mono whitespace-pre-wrap">
+                          {expandedEventData.error}
+                        </p>
+                      </div>
+                    )}
+                    <div>
+                      <span className="text-muted-foreground">Project:</span>
+                      <p className="font-mono text-[10px] truncate">
+                        {expandedEventData.projectPath}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Clear confirmation dialog */}
+      <ConfirmDialog
+        open={clearDialogOpen}
+        onOpenChange={setClearDialogOpen}
+        onConfirm={handleClearAll}
+        title="Clear Event History"
+        description={`This will permanently delete all ${events.length} recorded events. This action cannot be undone.`}
+        icon={Trash2}
+        iconClassName="text-destructive"
+        confirmText="Clear All"
+        confirmVariant="destructive"
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/event-hooks/event-hook-dialog.tsx b/temp_repo/apps/ui/src/components/views/settings-view/event-hooks/event-hook-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ae111181b174e6bdb9b7e36f3253e28d73ca6d53
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/event-hooks/event-hook-dialog.tsx
@@ -0,0 +1,513 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Terminal, Globe, Bell } from 'lucide-react';
+import type {
+  EventHook,
+  EventHookTrigger,
+  EventHookHttpMethod,
+  EventHookShellAction,
+  EventHookHttpAction,
+  EventHookNtfyAction,
+} from '@automaker/types';
+import { EVENT_HOOK_TRIGGER_LABELS } from '@automaker/types';
+import { generateUUID } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import { toast } from 'sonner';
+
+interface EventHookDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editingHook: EventHook | null;
+  onSave: (hook: EventHook) => void;
+}
+
+type ActionType = 'shell' | 'http' | 'ntfy';
+
+const TRIGGER_OPTIONS: EventHookTrigger[] = [
+  'feature_created',
+  'feature_success',
+  'feature_error',
+  'auto_mode_complete',
+  'auto_mode_error',
+];
+
+const HTTP_METHODS: EventHookHttpMethod[] = ['POST', 'GET', 'PUT', 'PATCH'];
+
+const PRIORITY_OPTIONS = [
+  { value: 1, label: 'Min (no sound/vibration)' },
+  { value: 2, label: 'Low' },
+  { value: 3, label: 'Default' },
+  { value: 4, label: 'High' },
+  { value: 5, label: 'Urgent (max)' },
+];
+
+export function EventHookDialog({ open, onOpenChange, editingHook, onSave }: EventHookDialogProps) {
+  const ntfyEndpoints = useAppStore((state) => state.ntfyEndpoints);
+
+  // Form state
+  const [name, setName] = useState('');
+  const [trigger, setTrigger] = useState<EventHookTrigger>('feature_success');
+  const [actionType, setActionType] = useState<ActionType>('shell');
+
+  // Shell action state
+  const [command, setCommand] = useState('');
+  const [timeout, setTimeout] = useState('30000');
+
+  // HTTP action state
+  const [url, setUrl] = useState('');
+  const [method, setMethod] = useState<EventHookHttpMethod>('POST');
+  const [headers, setHeaders] = useState('');
+  const [body, setBody] = useState('');
+
+  // Ntfy action state
+  const [ntfyEndpointId, setNtfyEndpointId] = useState('');
+  const [ntfyTitle, setNtfyTitle] = useState('');
+  const [ntfyBody, setNtfyBody] = useState('');
+  const [ntfyTags, setNtfyTags] = useState('');
+  const [ntfyEmoji, setNtfyEmoji] = useState('');
+  const [ntfyClickUrl, setNtfyClickUrl] = useState('');
+  const [ntfyPriority, setNtfyPriority] = useState<1 | 2 | 3 | 4 | 5>(3);
+
+  // Reset form when dialog opens/closes or editingHook changes
+  useEffect(() => {
+    if (open) {
+      if (editingHook) {
+        // Populate form with existing hook data
+        setName(editingHook.name || '');
+        setTrigger(editingHook.trigger);
+        setActionType(editingHook.action.type as ActionType);
+
+        if (editingHook.action.type === 'shell') {
+          const shellAction = editingHook.action as EventHookShellAction;
+          setCommand(shellAction.command);
+          setTimeout(String(shellAction.timeout || 30000));
+          // Reset other fields
+          resetHttpFields();
+          resetNtfyFields();
+        } else if (editingHook.action.type === 'http') {
+          const httpAction = editingHook.action as EventHookHttpAction;
+          setUrl(httpAction.url);
+          setMethod(httpAction.method);
+          setHeaders(httpAction.headers ? JSON.stringify(httpAction.headers, null, 2) : '');
+          setBody(httpAction.body || '');
+          // Reset other fields
+          resetShellFields();
+          resetNtfyFields();
+        } else if (editingHook.action.type === 'ntfy') {
+          const ntfyAction = editingHook.action as EventHookNtfyAction;
+          setNtfyEndpointId(ntfyAction.endpointId);
+          setNtfyTitle(ntfyAction.title || '');
+          setNtfyBody(ntfyAction.body || '');
+          setNtfyTags(ntfyAction.tags || '');
+          setNtfyEmoji(ntfyAction.emoji || '');
+          setNtfyClickUrl(ntfyAction.clickUrl || '');
+          setNtfyPriority(ntfyAction.priority || 3);
+          // Reset other fields
+          resetShellFields();
+          resetHttpFields();
+        }
+      } else {
+        // Reset to defaults for new hook
+        setName('');
+        setTrigger('feature_success');
+        setActionType('shell');
+        resetShellFields();
+        resetHttpFields();
+        resetNtfyFields();
+      }
+    }
+  }, [open, editingHook]);
+
+  const resetShellFields = () => {
+    setCommand('');
+    setTimeout('30000');
+  };
+
+  const resetHttpFields = () => {
+    setUrl('');
+    setMethod('POST');
+    setHeaders('');
+    setBody('');
+  };
+
+  const resetNtfyFields = () => {
+    setNtfyEndpointId('');
+    setNtfyTitle('');
+    setNtfyBody('');
+    setNtfyTags('');
+    setNtfyEmoji('');
+    setNtfyClickUrl('');
+    setNtfyPriority(3);
+  };
+
+  const handleSave = () => {
+    let action: EventHook['action'];
+
+    if (actionType === 'shell') {
+      action = {
+        type: 'shell',
+        command,
+        timeout: parseInt(timeout, 10) || 30000,
+      };
+    } else if (actionType === 'http') {
+      // Parse headers JSON with error handling
+      let parsedHeaders: Record<string, string> | undefined;
+      if (headers.trim()) {
+        try {
+          parsedHeaders = JSON.parse(headers);
+        } catch {
+          // If JSON is invalid, show error and don't save
+          toast.error('Invalid JSON in Headers field');
+          return;
+        }
+      }
+      action = {
+        type: 'http',
+        url,
+        method,
+        headers: parsedHeaders,
+        body: body.trim() || undefined,
+      };
+    } else {
+      action = {
+        type: 'ntfy',
+        endpointId: ntfyEndpointId,
+        title: ntfyTitle.trim() || undefined,
+        body: ntfyBody.trim() || undefined,
+        tags: ntfyTags.trim() || undefined,
+        emoji: ntfyEmoji.trim() || undefined,
+        clickUrl: ntfyClickUrl.trim() || undefined,
+        priority: ntfyPriority,
+      };
+    }
+
+    const hook: EventHook = {
+      id: editingHook?.id || generateUUID(),
+      name: name.trim() || undefined,
+      trigger,
+      enabled: editingHook?.enabled ?? true,
+      action,
+    };
+
+    onSave(hook);
+  };
+
+  const selectedEndpoint = ntfyEndpoints.find((e) => e.id === ntfyEndpointId);
+
+  const isValid = (() => {
+    if (actionType === 'shell') return command.trim().length > 0;
+    if (actionType === 'http') return url.trim().length > 0;
+    if (actionType === 'ntfy') return Boolean(selectedEndpoint);
+    return false;
+  })();
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg max-h-[85vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{editingHook ? 'Edit Event Hook' : 'Add Event Hook'}</DialogTitle>
+          <DialogDescription>
+            Configure an action to run when a specific event occurs.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* Name (optional) */}
+          <div className="space-y-2">
+            <Label htmlFor="hook-name">Name (optional)</Label>
+            <Input
+              id="hook-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="My notification hook"
+            />
+          </div>
+
+          {/* Trigger selection */}
+          <div className="space-y-2">
+            <Label htmlFor="hook-trigger">Trigger Event</Label>
+            <Select value={trigger} onValueChange={(v) => setTrigger(v as EventHookTrigger)}>
+              <SelectTrigger id="hook-trigger">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {TRIGGER_OPTIONS.map((t) => (
+                  <SelectItem key={t} value={t}>
+                    {EVENT_HOOK_TRIGGER_LABELS[t]}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Action type tabs */}
+          <div className="space-y-2">
+            <Label>Action Type</Label>
+            <Tabs value={actionType} onValueChange={(v) => setActionType(v as ActionType)}>
+              <TabsList className="w-full">
+                <TabsTrigger value="shell" className="flex-1 gap-1">
+                  <Terminal className="w-4 h-4" />
+                  <span className="sr-only sm:inline">Shell</span>
+                </TabsTrigger>
+                <TabsTrigger value="http" className="flex-1 gap-1">
+                  <Globe className="w-4 h-4" />
+                  <span className="sr-only sm:inline">HTTP</span>
+                </TabsTrigger>
+                <TabsTrigger value="ntfy" className="flex-1 gap-1">
+                  <Bell className="w-4 h-4" />
+                  <span className="sr-only sm:inline">Ntfy</span>
+                </TabsTrigger>
+              </TabsList>
+
+              {/* Shell command form */}
+              <TabsContent value="shell" className="space-y-4 mt-4">
+                <div className="space-y-2">
+                  <Label htmlFor="shell-command">Command</Label>
+                  <Textarea
+                    id="shell-command"
+                    value={command}
+                    onChange={(e) => setCommand(e.target.value)}
+                    placeholder='echo "Feature {{featureId}} completed!"'
+                    className="font-mono text-sm"
+                    rows={3}
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    Use {'{{variable}}'} syntax for dynamic values
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="shell-timeout">Timeout (ms)</Label>
+                  <Input
+                    id="shell-timeout"
+                    type="number"
+                    value={timeout}
+                    onChange={(e) => setTimeout(e.target.value)}
+                    placeholder="30000"
+                  />
+                </div>
+              </TabsContent>
+
+              {/* HTTP request form */}
+              <TabsContent value="http" className="space-y-4 mt-4">
+                <div className="space-y-2">
+                  <Label htmlFor="http-url">URL</Label>
+                  <Input
+                    id="http-url"
+                    value={url}
+                    onChange={(e) => setUrl(e.target.value)}
+                    placeholder="https://api.example.com/webhook"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="http-method">Method</Label>
+                  <Select value={method} onValueChange={(v) => setMethod(v as EventHookHttpMethod)}>
+                    <SelectTrigger id="http-method">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {HTTP_METHODS.map((m) => (
+                        <SelectItem key={m} value={m}>
+                          {m}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="http-headers">Headers (JSON, optional)</Label>
+                  <Textarea
+                    id="http-headers"
+                    value={headers}
+                    onChange={(e) => setHeaders(e.target.value)}
+                    placeholder={'{\n  "Authorization": "Bearer {{token}}"\n}'}
+                    className="font-mono text-sm"
+                    rows={3}
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="http-body">Body (JSON, optional)</Label>
+                  <Textarea
+                    id="http-body"
+                    value={body}
+                    onChange={(e) => setBody(e.target.value)}
+                    placeholder={'{\n  "feature": "{{featureId}}",\n  "status": "{{eventType}}"\n}'}
+                    className="font-mono text-sm"
+                    rows={4}
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    Leave empty for default body with all event context
+                  </p>
+                </div>
+              </TabsContent>
+
+              {/* Ntfy notification form */}
+              <TabsContent value="ntfy" className="space-y-4 mt-4">
+                {ntfyEndpoints.length === 0 ? (
+                  <div className="rounded-lg bg-muted/50 p-4 text-center">
+                    <Bell className="w-8 h-8 mx-auto mb-2 text-muted-foreground opacity-50" />
+                    <p className="text-sm text-muted-foreground">No ntfy endpoints configured.</p>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      Add an endpoint in the "Endpoints" tab first.
+                    </p>
+                  </div>
+                ) : (
+                  <>
+                    <div className="space-y-2">
+                      <Label htmlFor="ntfy-endpoint">Endpoint *</Label>
+                      <Select value={ntfyEndpointId} onValueChange={setNtfyEndpointId}>
+                        <SelectTrigger id="ntfy-endpoint">
+                          <SelectValue placeholder="Select an endpoint" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {ntfyEndpoints
+                            .filter((e) => e.enabled)
+                            .map((endpoint) => (
+                              <SelectItem key={endpoint.id} value={endpoint.id}>
+                                {endpoint.name} ({endpoint.topic})
+                              </SelectItem>
+                            ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {selectedEndpoint && (
+                      <div className="rounded-lg bg-muted/30 p-3 text-xs text-muted-foreground">
+                        <p>
+                          <strong>Server:</strong> {selectedEndpoint.serverUrl}
+                        </p>
+                        {selectedEndpoint.defaultTags && (
+                          <p>
+                            <strong>Default Tags:</strong> {selectedEndpoint.defaultTags}
+                          </p>
+                        )}
+                        {selectedEndpoint.defaultEmoji && (
+                          <p>
+                            <strong>Default Emoji:</strong> {selectedEndpoint.defaultEmoji}
+                          </p>
+                        )}
+                      </div>
+                    )}
+
+                    <div className="space-y-2">
+                      <Label htmlFor="ntfy-title">Title (optional)</Label>
+                      <Input
+                        id="ntfy-title"
+                        value={ntfyTitle}
+                        onChange={(e) => setNtfyTitle(e.target.value)}
+                        placeholder="Feature {{featureName}} completed"
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        Defaults to event name. Use {'{{variable}}'} for dynamic values.
+                      </p>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="ntfy-body">Message (optional)</Label>
+                      <Textarea
+                        id="ntfy-body"
+                        value={ntfyBody}
+                        onChange={(e) => setNtfyBody(e.target.value)}
+                        placeholder="Feature {{featureId}} completed at {{timestamp}}"
+                        className="font-mono text-sm"
+                        rows={3}
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        Defaults to event details. Leave empty for auto-generated message.
+                      </p>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="space-y-2">
+                        <Label htmlFor="ntfy-tags">Tags (optional)</Label>
+                        <Input
+                          id="ntfy-tags"
+                          value={ntfyTags}
+                          onChange={(e) => setNtfyTags(e.target.value)}
+                          placeholder="warning,skull"
+                        />
+                      </div>
+
+                      <div className="space-y-2">
+                        <Label htmlFor="ntfy-emoji">Emoji</Label>
+                        <Input
+                          id="ntfy-emoji"
+                          value={ntfyEmoji}
+                          onChange={(e) => setNtfyEmoji(e.target.value)}
+                          placeholder="tada"
+                        />
+                      </div>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="ntfy-click">Click URL (optional)</Label>
+                      <Input
+                        id="ntfy-click"
+                        value={ntfyClickUrl}
+                        onChange={(e) => setNtfyClickUrl(e.target.value)}
+                        placeholder="https://example.com"
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        URL to open when notification is clicked. Defaults to endpoint setting.
+                      </p>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="ntfy-priority">Priority</Label>
+                      <Select
+                        value={String(ntfyPriority)}
+                        onValueChange={(v) => setNtfyPriority(Number(v) as 1 | 2 | 3 | 4 | 5)}
+                      >
+                        <SelectTrigger id="ntfy-priority">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {PRIORITY_OPTIONS.map((opt) => (
+                            <SelectItem key={opt.value} value={String(opt.value)}>
+                              {opt.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </>
+                )}
+              </TabsContent>
+            </Tabs>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={!isValid}>
+            {editingHook ? 'Save Changes' : 'Add Hook'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/event-hooks/event-hooks-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/event-hooks/event-hooks-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..43222cfbede1f3b4efd56332b388c6ddd50432ee
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/event-hooks/event-hooks-section.tsx
@@ -0,0 +1,762 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import {
+  Webhook,
+  Plus,
+  Trash2,
+  Pencil,
+  Terminal,
+  Globe,
+  History,
+  Bell,
+  Server,
+} from 'lucide-react';
+import { useAppStore } from '@/store/app-store';
+import type {
+  EventHook,
+  EventHookTrigger,
+  NtfyEndpointConfig,
+  NtfyAuthenticationType,
+} from '@automaker/types';
+import { EVENT_HOOK_TRIGGER_LABELS } from '@automaker/types';
+import { EventHookDialog } from './event-hook-dialog';
+import { EventHistoryView } from './event-history-view';
+import { toast } from 'sonner';
+import { createLogger } from '@automaker/utils/logger';
+import { generateUUID } from '@/lib/utils';
+
+const logger = createLogger('EventHooks');
+
+type TabType = 'hooks' | 'endpoints' | 'history';
+
+export function EventHooksSection() {
+  const { eventHooks, setEventHooks, ntfyEndpoints, setNtfyEndpoints } = useAppStore();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingHook, setEditingHook] = useState<EventHook | null>(null);
+  const [activeTab, setActiveTab] = useState<TabType>('hooks');
+
+  // Ntfy endpoint dialog state
+  const [endpointDialogOpen, setEndpointDialogOpen] = useState(false);
+  const [editingEndpoint, setEditingEndpoint] = useState<NtfyEndpointConfig | null>(null);
+
+  const handleAddHook = () => {
+    setEditingHook(null);
+    setDialogOpen(true);
+  };
+
+  const handleEditHook = (hook: EventHook) => {
+    setEditingHook(hook);
+    setDialogOpen(true);
+  };
+
+  const handleDeleteHook = async (hookId: string) => {
+    try {
+      await setEventHooks(eventHooks.filter((h) => h.id !== hookId));
+    } catch (error) {
+      logger.error('Failed to delete event hook:', error);
+      toast.error('Failed to delete event hook');
+    }
+  };
+
+  const handleToggleHook = async (hookId: string, enabled: boolean) => {
+    try {
+      await setEventHooks(eventHooks.map((h) => (h.id === hookId ? { ...h, enabled } : h)));
+    } catch (error) {
+      logger.error('Failed to toggle event hook:', error);
+      toast.error('Failed to update event hook');
+    }
+  };
+
+  const handleSaveHook = async (hook: EventHook) => {
+    try {
+      if (editingHook) {
+        // Update existing
+        await setEventHooks(eventHooks.map((h) => (h.id === hook.id ? hook : h)));
+      } else {
+        // Add new
+        await setEventHooks([...eventHooks, hook]);
+      }
+      setDialogOpen(false);
+      setEditingHook(null);
+    } catch (error) {
+      logger.error('Failed to save event hook:', error);
+      toast.error('Failed to save event hook');
+    }
+  };
+
+  // Ntfy endpoint handlers
+  const handleAddEndpoint = () => {
+    setEditingEndpoint(null);
+    setEndpointDialogOpen(true);
+  };
+
+  const handleEditEndpoint = (endpoint: NtfyEndpointConfig) => {
+    setEditingEndpoint(endpoint);
+    setEndpointDialogOpen(true);
+  };
+
+  const handleDeleteEndpoint = async (endpointId: string) => {
+    try {
+      await setNtfyEndpoints(ntfyEndpoints.filter((e) => e.id !== endpointId));
+      toast.success('Endpoint deleted');
+    } catch (error) {
+      logger.error('Failed to delete ntfy endpoint:', error);
+      toast.error('Failed to delete endpoint');
+    }
+  };
+
+  const handleToggleEndpoint = async (endpointId: string, enabled: boolean) => {
+    try {
+      await setNtfyEndpoints(
+        ntfyEndpoints.map((e) => (e.id === endpointId ? { ...e, enabled } : e))
+      );
+    } catch (error) {
+      logger.error('Failed to toggle ntfy endpoint:', error);
+      toast.error('Failed to update endpoint');
+    }
+  };
+
+  const handleSaveEndpoint = async (endpoint: NtfyEndpointConfig) => {
+    try {
+      if (editingEndpoint) {
+        // Update existing
+        await setNtfyEndpoints(ntfyEndpoints.map((e) => (e.id === endpoint.id ? endpoint : e)));
+        toast.success('Endpoint updated');
+      } else {
+        // Add new
+        await setNtfyEndpoints([...ntfyEndpoints, endpoint]);
+        toast.success('Endpoint added');
+      }
+      setEndpointDialogOpen(false);
+      setEditingEndpoint(null);
+    } catch (error) {
+      logger.error('Failed to save ntfy endpoint:', error);
+      toast.error('Failed to save endpoint');
+    }
+  };
+
+  // Group hooks by trigger type for better organization
+  const hooksByTrigger = eventHooks.reduce(
+    (acc, hook) => {
+      if (!acc[hook.trigger]) {
+        acc[hook.trigger] = [];
+      }
+      acc[hook.trigger].push(hook);
+      return acc;
+    },
+    {} as Record<EventHookTrigger, EventHook[]>
+  );
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      {/* Header */}
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <Webhook className="w-5 h-5 text-brand-500" />
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold text-foreground tracking-tight">Event Hooks</h2>
+              <p className="text-sm text-muted-foreground/80">
+                Run custom commands or send notifications when events occur
+              </p>
+            </div>
+          </div>
+          {activeTab === 'hooks' && (
+            <Button onClick={handleAddHook} size="sm" className="gap-2">
+              <Plus className="w-4 h-4" />
+              Add Hook
+            </Button>
+          )}
+          {activeTab === 'endpoints' && (
+            <Button onClick={handleAddEndpoint} size="sm" className="gap-2">
+              <Plus className="w-4 h-4" />
+              Add Endpoint
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as TabType)}>
+        <div className="px-6 pt-4">
+          <TabsList className="grid w-full max-w-sm grid-cols-3">
+            <TabsTrigger value="hooks" className="gap-2">
+              <Webhook className="w-4 h-4" />
+              Hooks
+            </TabsTrigger>
+            <TabsTrigger value="endpoints" className="gap-2">
+              <Bell className="w-4 h-4" />
+              Endpoints
+            </TabsTrigger>
+            <TabsTrigger value="history" className="gap-2">
+              <History className="w-4 h-4" />
+              History
+            </TabsTrigger>
+          </TabsList>
+        </div>
+
+        {/* Hooks Tab */}
+        <TabsContent value="hooks" className="m-0">
+          <div className="p-6 pt-4">
+            {eventHooks.length === 0 ? (
+              <div className="text-center py-8 text-muted-foreground">
+                <Webhook className="w-12 h-12 mx-auto mb-3 opacity-30" />
+                <p className="text-sm">No event hooks configured</p>
+                <p className="text-xs mt-1">
+                  Add hooks to run commands or send webhooks when features complete
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-6">
+                {/* Group by trigger type */}
+                {Object.entries(hooksByTrigger).map(([trigger, hooks]) => (
+                  <div key={trigger} className="space-y-3">
+                    <h3 className="text-sm font-medium text-muted-foreground">
+                      {EVENT_HOOK_TRIGGER_LABELS[trigger as EventHookTrigger]}
+                    </h3>
+                    <div className="space-y-2">
+                      {hooks.map((hook) => (
+                        <HookCard
+                          key={hook.id}
+                          hook={hook}
+                          ntfyEndpoints={ntfyEndpoints}
+                          onEdit={() => handleEditHook(hook)}
+                          onDelete={() => handleDeleteHook(hook.id)}
+                          onToggle={(enabled) => handleToggleHook(hook.id, enabled)}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Variable reference */}
+          <div className="px-6 pb-6">
+            <div className="rounded-lg bg-muted/30 p-4 text-xs text-muted-foreground">
+              <p className="font-medium mb-2">Available variables:</p>
+              <code className="text-[10px] leading-relaxed">
+                {'{{featureId}}'} {'{{featureName}}'} {'{{projectPath}}'} {'{{projectName}}'}{' '}
+                {'{{error}}'} {'{{errorType}}'} {'{{timestamp}}'} {'{{eventType}}'}
+              </code>
+            </div>
+          </div>
+        </TabsContent>
+
+        {/* Endpoints Tab */}
+        <TabsContent value="endpoints" className="m-0">
+          <div className="p-6 pt-4">
+            {ntfyEndpoints.length === 0 ? (
+              <div className="text-center py-8 text-muted-foreground">
+                <Bell className="w-12 h-12 mx-auto mb-3 opacity-30" />
+                <p className="text-sm">No ntfy endpoints configured</p>
+                <p className="text-xs mt-1">Add endpoints to send push notifications via ntfy.sh</p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {ntfyEndpoints.map((endpoint) => (
+                  <EndpointCard
+                    key={endpoint.id}
+                    endpoint={endpoint}
+                    onEdit={() => handleEditEndpoint(endpoint)}
+                    onDelete={() => handleDeleteEndpoint(endpoint.id)}
+                    onToggle={(enabled) => handleToggleEndpoint(endpoint.id, enabled)}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Help text */}
+          <div className="px-6 pb-6">
+            <div className="rounded-lg bg-muted/30 p-4 text-xs text-muted-foreground">
+              <p className="font-medium mb-2">About ntfy.sh:</p>
+              <p className="mb-2">
+                ntfy.sh is a simple pub-sub notification service. Create a topic and subscribe via
+                web, mobile app, or API.
+              </p>
+              <a
+                href="https://ntfy.sh"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-brand-500 hover:underline"
+              >
+                https://ntfy.sh
+              </a>
+            </div>
+          </div>
+        </TabsContent>
+
+        {/* History Tab */}
+        <TabsContent value="history" className="m-0">
+          <div className="p-6 pt-4">
+            <EventHistoryView />
+          </div>
+        </TabsContent>
+      </Tabs>
+
+      {/* Hook Dialog */}
+      <EventHookDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        editingHook={editingHook}
+        onSave={handleSaveHook}
+      />
+
+      {/* Endpoint Dialog */}
+      <NtfyEndpointDialog
+        open={endpointDialogOpen}
+        onOpenChange={setEndpointDialogOpen}
+        editingEndpoint={editingEndpoint}
+        onSave={handleSaveEndpoint}
+      />
+    </div>
+  );
+}
+
+interface HookCardProps {
+  hook: EventHook;
+  ntfyEndpoints: NtfyEndpointConfig[];
+  onEdit: () => void;
+  onDelete: () => void;
+  onToggle: (enabled: boolean) => void;
+}
+
+function HookCard({ hook, ntfyEndpoints, onEdit, onDelete, onToggle }: HookCardProps) {
+  const isShell = hook.action.type === 'shell';
+  const isHttp = hook.action.type === 'http';
+  const isNtfy = hook.action.type === 'ntfy';
+
+  // Get ntfy endpoint name if this is an ntfy hook
+  const ntfyEndpointName = isNtfy
+    ? ntfyEndpoints.find(
+        (e) => e.id === (hook.action as { type: 'ntfy'; endpointId: string }).endpointId
+      )?.name || 'Unknown endpoint'
+    : null;
+
+  // Get icon background and color
+  const iconStyle = isShell
+    ? 'bg-amber-500/10 text-amber-500'
+    : isHttp
+      ? 'bg-blue-500/10 text-blue-500'
+      : 'bg-purple-500/10 text-purple-500';
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-3 p-3 rounded-lg border',
+        'bg-background/50 hover:bg-background/80 transition-colors',
+        !hook.enabled && 'opacity-60'
+      )}
+    >
+      {/* Type icon */}
+      <div className={cn('w-8 h-8 rounded-lg flex items-center justify-center', iconStyle)}>
+        {isShell ? (
+          <Terminal className="w-4 h-4" />
+        ) : isHttp ? (
+          <Globe className="w-4 h-4" />
+        ) : (
+          <Bell className="w-4 h-4" />
+        )}
+      </div>
+
+      {/* Info */}
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium truncate">
+          {hook.name || (isShell ? 'Shell Command' : isHttp ? 'HTTP Webhook' : 'Ntfy Notification')}
+        </p>
+        <p className="text-xs text-muted-foreground truncate">
+          {isShell
+            ? (hook.action as { type: 'shell'; command: string }).command
+            : isHttp
+              ? (hook.action as { type: 'http'; url: string }).url
+              : ntfyEndpointName}
+        </p>
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center gap-2">
+        <Switch checked={hook.enabled} onCheckedChange={onToggle} />
+        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onEdit}>
+          <Pencil className="w-4 h-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 text-destructive hover:text-destructive"
+          onClick={onDelete}
+        >
+          <Trash2 className="w-4 h-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+interface EndpointCardProps {
+  endpoint: NtfyEndpointConfig;
+  onEdit: () => void;
+  onDelete: () => void;
+  onToggle: (enabled: boolean) => void;
+}
+
+function EndpointCard({ endpoint, onEdit, onDelete, onToggle }: EndpointCardProps) {
+  return (
+    <div
+      data-testid="endpoint-card"
+      className={cn(
+        'flex items-center gap-3 p-3 rounded-lg border',
+        'bg-background/50 hover:bg-background/80 transition-colors',
+        !endpoint.enabled && 'opacity-60'
+      )}
+    >
+      {/* Icon */}
+      <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-purple-500/10 text-purple-500">
+        <Server className="w-4 h-4" />
+      </div>
+
+      {/* Info */}
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium truncate">{endpoint.name}</p>
+        <p className="text-xs text-muted-foreground truncate">
+          {endpoint.topic} • {endpoint.serverUrl.replace(/^https?:\/\//, '')}
+        </p>
+      </div>
+
+      {/* Auth badge */}
+      {endpoint.authType !== 'none' && (
+        <div className="text-xs px-2 py-0.5 rounded bg-muted text-muted-foreground">
+          {endpoint.authType === 'basic' ? 'Basic Auth' : 'Token'}
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="flex items-center gap-2">
+        <Switch
+          checked={endpoint.enabled}
+          onCheckedChange={onToggle}
+          aria-label={`${endpoint.enabled ? 'Disable' : 'Enable'} endpoint ${endpoint.name}`}
+        />
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8"
+          onClick={onEdit}
+          aria-label={`Edit endpoint ${endpoint.name}`}
+        >
+          <Pencil className="w-4 h-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 text-destructive hover:text-destructive"
+          onClick={onDelete}
+          aria-label={`Delete endpoint ${endpoint.name}`}
+        >
+          <Trash2 className="w-4 h-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+// Ntfy Endpoint Dialog Component
+interface NtfyEndpointDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editingEndpoint: NtfyEndpointConfig | null;
+  onSave: (endpoint: NtfyEndpointConfig) => void;
+}
+
+function NtfyEndpointDialog({
+  open,
+  onOpenChange,
+  editingEndpoint,
+  onSave,
+}: NtfyEndpointDialogProps) {
+  const [name, setName] = useState('');
+  const [serverUrl, setServerUrl] = useState('https://ntfy.sh');
+  const [topic, setTopic] = useState('');
+  const [authType, setAuthType] = useState<NtfyAuthenticationType>('none');
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [token, setToken] = useState('');
+  const [defaultTags, setDefaultTags] = useState('');
+  const [defaultEmoji, setDefaultEmoji] = useState('');
+  const [defaultClickUrl, setDefaultClickUrl] = useState('');
+  const [enabled, setEnabled] = useState(true);
+
+  // Reset form when dialog opens/closes
+  useEffect(() => {
+    if (open) {
+      if (editingEndpoint) {
+        setName(editingEndpoint.name);
+        setServerUrl(editingEndpoint.serverUrl);
+        setTopic(editingEndpoint.topic);
+        setAuthType(editingEndpoint.authType);
+        setUsername(editingEndpoint.username || '');
+        setPassword(''); // Don't populate password for security
+        setToken(''); // Don't populate token for security
+        setDefaultTags(editingEndpoint.defaultTags || '');
+        setDefaultEmoji(editingEndpoint.defaultEmoji || '');
+        setDefaultClickUrl(editingEndpoint.defaultClickUrl || '');
+        setEnabled(editingEndpoint.enabled);
+      } else {
+        setName('');
+        setServerUrl('https://ntfy.sh');
+        setTopic('');
+        setAuthType('none');
+        setUsername('');
+        setPassword('');
+        setToken('');
+        setDefaultTags('');
+        setDefaultEmoji('');
+        setDefaultClickUrl('');
+        setEnabled(true);
+      }
+    }
+  }, [open, editingEndpoint]);
+
+  const handleSave = () => {
+    const trimmedPassword = password.trim();
+    const trimmedToken = token.trim();
+    const endpoint: NtfyEndpointConfig = {
+      id: editingEndpoint?.id || generateUUID(),
+      name: name.trim(),
+      serverUrl: serverUrl.trim(),
+      topic: topic.trim(),
+      authType,
+      username: authType === 'basic' ? username.trim() : undefined,
+      // Preserve existing secret if input was left blank when editing
+      password:
+        authType === 'basic'
+          ? trimmedPassword || (editingEndpoint ? editingEndpoint.password : undefined)
+          : undefined,
+      token:
+        authType === 'token'
+          ? trimmedToken || (editingEndpoint ? editingEndpoint.token : undefined)
+          : undefined,
+      defaultTags: defaultTags.trim() || undefined,
+      defaultEmoji: defaultEmoji.trim() || undefined,
+      defaultClickUrl: defaultClickUrl.trim() || undefined,
+      enabled,
+    };
+
+    onSave(endpoint);
+  };
+
+  // Validate form
+  const isServerUrlValid = (() => {
+    const trimmed = serverUrl.trim();
+    if (!trimmed) return false;
+    try {
+      const parsed = new URL(trimmed);
+      return parsed.protocol === 'https:' || parsed.protocol === 'http:';
+    } catch {
+      return false;
+    }
+  })();
+  const isValid =
+    name.trim().length > 0 &&
+    isServerUrlValid &&
+    topic.trim().length > 0 &&
+    !topic.includes(' ') &&
+    (authType !== 'basic' ||
+      (username.trim().length > 0 &&
+        (password.trim().length > 0 || Boolean(editingEndpoint?.password)))) &&
+    (authType !== 'token' || token.trim().length > 0 || Boolean(editingEndpoint?.token));
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg max-h-[85vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{editingEndpoint ? 'Edit Ntfy Endpoint' : 'Add Ntfy Endpoint'}</DialogTitle>
+          <DialogDescription>
+            Configure an ntfy.sh server to receive push notifications.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* Name */}
+          <div className="space-y-2">
+            <Label htmlFor="endpoint-name">Name *</Label>
+            <Input
+              id="endpoint-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Personal Phone"
+            />
+          </div>
+
+          {/* Server URL */}
+          <div className="space-y-2">
+            <Label htmlFor="endpoint-server">Server URL</Label>
+            <Input
+              id="endpoint-server"
+              value={serverUrl}
+              onChange={(e) => setServerUrl(e.target.value)}
+              placeholder="https://ntfy.sh"
+            />
+            <p className="text-xs text-muted-foreground">
+              Default is ntfy.sh. Use custom URL for self-hosted servers.
+            </p>
+          </div>
+
+          {/* Topic */}
+          <div className="space-y-2">
+            <Label htmlFor="endpoint-topic">Topic *</Label>
+            <Input
+              id="endpoint-topic"
+              value={topic}
+              onChange={(e) => setTopic(e.target.value)}
+              placeholder="my-automaker-notifications"
+            />
+            <p className="text-xs text-muted-foreground">
+              Topic name (no spaces). This acts like a channel for your notifications.
+            </p>
+          </div>
+
+          {/* Authentication */}
+          <div className="space-y-2">
+            <Label htmlFor="endpoint-auth">Authentication</Label>
+            <Select
+              value={authType}
+              onValueChange={(v) => setAuthType(v as NtfyAuthenticationType)}
+            >
+              <SelectTrigger id="endpoint-auth">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">None (public topic)</SelectItem>
+                <SelectItem value="basic">Username & Password</SelectItem>
+                <SelectItem value="token">Access Token</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Conditional auth fields */}
+          {authType === 'basic' && (
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="endpoint-username">Username</Label>
+                <Input
+                  id="endpoint-username"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  placeholder="username"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="endpoint-password">Password</Label>
+                <Input
+                  id="endpoint-password"
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="password"
+                />
+              </div>
+            </div>
+          )}
+
+          {authType === 'token' && (
+            <div className="space-y-2">
+              <Label htmlFor="endpoint-token">Access Token</Label>
+              <Input
+                id="endpoint-token"
+                type="password"
+                value={token}
+                onChange={(e) => setToken(e.target.value)}
+                placeholder="tk_xxxxxxxxxxxxx"
+              />
+            </div>
+          )}
+
+          {/* Default Tags */}
+          <div className="space-y-2">
+            <Label htmlFor="endpoint-tags">Default Tags (optional)</Label>
+            <Input
+              id="endpoint-tags"
+              value={defaultTags}
+              onChange={(e) => setDefaultTags(e.target.value)}
+              placeholder="warning,skull"
+            />
+            <p className="text-xs text-muted-foreground">
+              Comma-separated tags or emoji shortcodes (e.g., warning, partypopper)
+            </p>
+          </div>
+
+          {/* Default Emoji */}
+          <div className="space-y-2">
+            <Label htmlFor="endpoint-emoji">Default Emoji (optional)</Label>
+            <Input
+              id="endpoint-emoji"
+              value={defaultEmoji}
+              onChange={(e) => setDefaultEmoji(e.target.value)}
+              placeholder="tada"
+            />
+          </div>
+
+          {/* Default Click URL */}
+          <div className="space-y-2">
+            <Label htmlFor="endpoint-click">Default Click URL (optional)</Label>
+            <Input
+              id="endpoint-click"
+              value={defaultClickUrl}
+              onChange={(e) => setDefaultClickUrl(e.target.value)}
+              placeholder="http://localhost:3007"
+            />
+            <p className="text-xs text-muted-foreground">
+              URL to open when notification is clicked. Auto-linked to project/feature if available.
+            </p>
+          </div>
+
+          {/* Enabled toggle */}
+          <div className="flex items-center justify-between">
+            <Label htmlFor="endpoint-enabled">Enabled</Label>
+            <Switch id="endpoint-enabled" checked={enabled} onCheckedChange={setEnabled} />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={!isValid}>
+            {editingEndpoint ? 'Save Changes' : 'Add Endpoint'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/event-hooks/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/event-hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..84163a426dc3a24d9a24a8cfd3ba5a5cbf7f9ddf
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/event-hooks/index.ts
@@ -0,0 +1 @@
+export { EventHooksSection } from './event-hooks-section';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/feature-defaults/feature-defaults-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/feature-defaults/feature-defaults-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..35120aaae6cc028997b2d9a76f1af5a26ca79e14
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/feature-defaults/feature-defaults-section.tsx
@@ -0,0 +1,387 @@
+import { useState, useEffect } from 'react';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import {
+  FlaskConical,
+  TestTube,
+  AlertCircle,
+  Zap,
+  ClipboardList,
+  FileText,
+  ScrollText,
+  ShieldCheck,
+  FastForward,
+  Sparkles,
+  Cpu,
+  RotateCcw,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { PhaseModelEntry } from '@automaker/types';
+import { PhaseModelSelector } from '../model-defaults/phase-model-selector';
+
+type PlanningMode = 'skip' | 'lite' | 'spec' | 'full';
+
+interface FeatureDefaultsSectionProps {
+  defaultSkipTests: boolean;
+  enableDependencyBlocking: boolean;
+  skipVerificationInAutoMode: boolean;
+  defaultPlanningMode: PlanningMode;
+  defaultRequirePlanApproval: boolean;
+  enableAiCommitMessages: boolean;
+  defaultFeatureModel: PhaseModelEntry;
+  defaultMaxTurns: number;
+  onDefaultSkipTestsChange: (value: boolean) => void;
+  onEnableDependencyBlockingChange: (value: boolean) => void;
+  onSkipVerificationInAutoModeChange: (value: boolean) => void;
+  onDefaultPlanningModeChange: (value: PlanningMode) => void;
+  onDefaultRequirePlanApprovalChange: (value: boolean) => void;
+  onEnableAiCommitMessagesChange: (value: boolean) => void;
+  onDefaultFeatureModelChange: (value: PhaseModelEntry) => void;
+  onDefaultMaxTurnsChange: (value: number) => void;
+}
+
+export function FeatureDefaultsSection({
+  defaultSkipTests,
+  enableDependencyBlocking,
+  skipVerificationInAutoMode,
+  defaultPlanningMode,
+  defaultRequirePlanApproval,
+  enableAiCommitMessages,
+  defaultFeatureModel,
+  defaultMaxTurns,
+  onDefaultSkipTestsChange,
+  onEnableDependencyBlockingChange,
+  onSkipVerificationInAutoModeChange,
+  onDefaultPlanningModeChange,
+  onDefaultRequirePlanApprovalChange,
+  onEnableAiCommitMessagesChange,
+  onDefaultFeatureModelChange,
+  onDefaultMaxTurnsChange,
+}: FeatureDefaultsSectionProps) {
+  const [maxTurnsInput, setMaxTurnsInput] = useState(String(defaultMaxTurns));
+
+  // Keep the displayed input in sync if the prop changes after mount
+  // (e.g. when settings are loaded asynchronously or reset from parent)
+  useEffect(() => {
+    setMaxTurnsInput(String(defaultMaxTurns));
+  }, [defaultMaxTurns]);
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <FlaskConical className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Feature Defaults</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure default settings for new features.
+        </p>
+      </div>
+      <div className="p-6 space-y-5">
+        {/* Default Feature Model Setting */}
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <div className="w-10 h-10 mt-0.5 rounded-xl flex items-center justify-center shrink-0 bg-brand-500/10">
+            <Cpu className="w-5 h-5 text-brand-500" />
+          </div>
+          <div className="flex-1 min-w-0 space-y-2">
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+              <Label className="text-foreground font-medium">Default Model</Label>
+              <PhaseModelSelector
+                value={defaultFeatureModel}
+                onChange={onDefaultFeatureModelChange}
+                compact
+                align="end"
+              />
+            </div>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              The default AI model and thinking level used when creating new feature cards.
+            </p>
+          </div>
+        </div>
+
+        {/* Separator */}
+        <div className="border-t border-border/30" />
+
+        {/* Max Turns Setting */}
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <div className="w-10 h-10 mt-0.5 rounded-xl flex items-center justify-center shrink-0 bg-orange-500/10">
+            <RotateCcw className="w-5 h-5 text-orange-500" />
+          </div>
+          <div className="flex-1 min-w-0 space-y-2">
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+              <Label htmlFor="default-max-turns" className="text-foreground font-medium">
+                Max Agent Turns
+              </Label>
+              <Input
+                id="default-max-turns"
+                type="number"
+                min={1}
+                max={2000}
+                step={1}
+                value={maxTurnsInput}
+                onChange={(e) => {
+                  setMaxTurnsInput(e.target.value);
+                }}
+                onBlur={() => {
+                  const value = Number(maxTurnsInput);
+                  if (Number.isInteger(value) && value >= 1 && value <= 2000) {
+                    onDefaultMaxTurnsChange(value);
+                  } else {
+                    // Reset to current valid value if invalid (including decimals like "1.5")
+                    setMaxTurnsInput(String(defaultMaxTurns));
+                  }
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    (e.target as HTMLInputElement).blur();
+                  }
+                }}
+                className="w-[100px] h-8 text-right"
+                data-testid="default-max-turns-input"
+              />
+            </div>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              Maximum number of tool-call round-trips the AI agent can perform per feature. Higher
+              values allow more complex tasks but use more API credits. Default: 1000, Range:
+              1-2000. Supported by Claude and Codex providers.
+            </p>
+          </div>
+        </div>
+
+        {/* Separator */}
+        <div className="border-t border-border/30" />
+
+        {/* Planning Mode Default */}
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <div
+            className={cn(
+              'w-10 h-10 mt-0.5 rounded-xl flex items-center justify-center shrink-0',
+              defaultPlanningMode === 'skip'
+                ? 'bg-emerald-500/10'
+                : defaultPlanningMode === 'lite'
+                  ? 'bg-blue-500/10'
+                  : defaultPlanningMode === 'spec'
+                    ? 'bg-purple-500/10'
+                    : 'bg-amber-500/10'
+            )}
+          >
+            {defaultPlanningMode === 'skip' && <Zap className="w-5 h-5 text-emerald-500" />}
+            {defaultPlanningMode === 'lite' && <ClipboardList className="w-5 h-5 text-blue-500" />}
+            {defaultPlanningMode === 'spec' && <FileText className="w-5 h-5 text-purple-500" />}
+            {defaultPlanningMode === 'full' && <ScrollText className="w-5 h-5 text-amber-500" />}
+          </div>
+          <div className="flex-1 min-w-0 space-y-2">
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+              <Label className="text-foreground font-medium">Default Planning Mode</Label>
+              <Select
+                value={defaultPlanningMode}
+                onValueChange={(v: string) => onDefaultPlanningModeChange(v as PlanningMode)}
+              >
+                <SelectTrigger
+                  className="w-full sm:w-[160px] h-8"
+                  data-testid="default-planning-mode-select"
+                >
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="skip">
+                    <div className="flex items-center gap-2">
+                      <Zap className="h-3.5 w-3.5 text-emerald-500" />
+                      <span>Skip</span>
+                      <span className="text-[10px] text-muted-foreground">(Default)</span>
+                    </div>
+                  </SelectItem>
+                  <SelectItem value="lite">
+                    <div className="flex items-center gap-2">
+                      <ClipboardList className="h-3.5 w-3.5 text-blue-500" />
+                      <span>Lite Planning</span>
+                    </div>
+                  </SelectItem>
+                  <SelectItem value="spec">
+                    <div className="flex items-center gap-2">
+                      <FileText className="h-3.5 w-3.5 text-purple-500" />
+                      <span>Spec (Lite SDD)</span>
+                    </div>
+                  </SelectItem>
+                  <SelectItem value="full">
+                    <div className="flex items-center gap-2">
+                      <ScrollText className="h-3.5 w-3.5 text-amber-500" />
+                      <span>Full (SDD)</span>
+                    </div>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              {defaultPlanningMode === 'skip' &&
+                'Jump straight to implementation without upfront planning.'}
+              {defaultPlanningMode === 'lite' &&
+                'Create a quick planning outline with tasks before building.'}
+              {defaultPlanningMode === 'spec' &&
+                'Generate a specification with acceptance criteria for approval.'}
+              {defaultPlanningMode === 'full' &&
+                'Create comprehensive spec with phased implementation plan.'}
+            </p>
+          </div>
+        </div>
+
+        {/* Require Plan Approval Setting - only show when not skip */}
+        {defaultPlanningMode !== 'skip' && (
+          <>
+            <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+              <Checkbox
+                id="default-require-plan-approval"
+                checked={defaultRequirePlanApproval}
+                onCheckedChange={(checked) => onDefaultRequirePlanApprovalChange(checked === true)}
+                className="mt-1"
+                data-testid="default-require-plan-approval-checkbox"
+              />
+              <div className="space-y-1.5">
+                <Label
+                  htmlFor="default-require-plan-approval"
+                  className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+                >
+                  <ShieldCheck className="w-4 h-4 text-brand-500" />
+                  Require manual plan approval by default
+                </Label>
+                <p className="text-xs text-muted-foreground/80 leading-relaxed">
+                  When enabled, the agent will pause after generating a plan and wait for you to
+                  review, edit, and approve before starting implementation. You can also view the
+                  plan from the feature card.
+                </p>
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* Separator */}
+        <div className="border-t border-border/30" />
+
+        {/* Automated Testing Setting */}
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="default-skip-tests"
+            checked={!defaultSkipTests}
+            onCheckedChange={(checked) => onDefaultSkipTestsChange(checked !== true)}
+            className="mt-1"
+            data-testid="default-skip-tests-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="default-skip-tests"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <TestTube className="w-4 h-4 text-brand-500" />
+              Enable automated testing by default
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              When enabled, new features will use TDD with automated tests. When disabled, features
+              will require manual verification.
+            </p>
+          </div>
+        </div>
+
+        {/* Separator */}
+        <div className="border-t border-border/30" />
+
+        {/* Dependency Blocking Setting */}
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="enable-dependency-blocking"
+            checked={enableDependencyBlocking}
+            onCheckedChange={(checked) => onEnableDependencyBlockingChange(checked === true)}
+            className="mt-1"
+            data-testid="enable-dependency-blocking-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="enable-dependency-blocking"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <AlertCircle className="w-4 h-4 text-brand-500" />
+              Enable Dependency Blocking
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              When enabled, features with incomplete dependencies will show blocked badges and
+              warnings. Auto mode and backlog ordering always respect dependencies regardless of
+              this setting.
+            </p>
+          </div>
+        </div>
+
+        {/* Separator */}
+        <div className="border-t border-border/30" />
+
+        {/* Skip Verification in Auto Mode Setting */}
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="skip-verification-auto-mode"
+            checked={skipVerificationInAutoMode}
+            onCheckedChange={(checked) => onSkipVerificationInAutoModeChange(checked === true)}
+            className="mt-1"
+            data-testid="skip-verification-auto-mode-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="skip-verification-auto-mode"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <FastForward className="w-4 h-4 text-brand-500" />
+              Skip verification in auto mode
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              When enabled, auto mode will grab features even if their dependencies are not
+              verified, as long as they are not currently running. This allows faster pipeline
+              execution without waiting for manual verification.
+            </p>
+          </div>
+        </div>
+
+        {/* Separator */}
+        <div className="border-t border-border/30" />
+
+        {/* AI Commit Messages Setting */}
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="enable-ai-commit-messages"
+            checked={enableAiCommitMessages}
+            onCheckedChange={(checked) => onEnableAiCommitMessagesChange(checked === true)}
+            className="mt-1"
+            data-testid="enable-ai-commit-messages-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="enable-ai-commit-messages"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <Sparkles className="w-4 h-4 text-brand-500" />
+              Generate AI commit messages
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              When enabled, opening the commit dialog will automatically generate a commit message
+              using AI based on your staged or unstaged changes. You can configure the model used in
+              Model Defaults.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/feature-defaults/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/feature-defaults/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..95d0012389662c9819cf74a85133d662b6bd9cbf
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/feature-defaults/index.ts
@@ -0,0 +1 @@
+export { FeatureDefaultsSection } from './feature-defaults-section';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/hooks/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..272358b92ad22df4a52373ecc910b8b034c9c9af
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/hooks/index.ts
@@ -0,0 +1,4 @@
+export { useCliStatus } from './use-cli-status';
+export { useSettingsView, type SettingsViewId } from './use-settings-view';
+export { useCursorStatus, type CursorStatus } from './use-cursor-status';
+export { useCursorPermissions, type PermissionsData } from './use-cursor-permissions';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/hooks/use-cli-status.ts b/temp_repo/apps/ui/src/components/views/settings-view/hooks/use-cli-status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5afaf5f79e97959644efeaa32b51c0f98109cd9a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/hooks/use-cli-status.ts
@@ -0,0 +1,127 @@
+import { useState, useEffect, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { useSetupStore } from '@/store/setup-store';
+
+const logger = createLogger('CliStatus');
+import { getElectronAPI } from '@/lib/electron';
+
+interface CliStatusResult {
+  success: boolean;
+  status?: string;
+  method?: string;
+  version?: string;
+  path?: string;
+  recommendation?: string;
+  installCommands?: {
+    macos?: string;
+    windows?: string;
+    linux?: string;
+    npm?: string;
+  };
+  error?: string;
+}
+
+/**
+ * Custom hook for managing Claude CLI status
+ * Handles checking CLI installation, authentication, and refresh functionality
+ */
+export function useCliStatus() {
+  const { setClaudeAuthStatus } = useSetupStore();
+
+  const [claudeCliStatus, setClaudeCliStatus] = useState<CliStatusResult | null>(null);
+
+  const [isCheckingClaudeCli, setIsCheckingClaudeCli] = useState(false);
+
+  // Refresh Claude auth status from the server
+  const refreshAuthStatus = useCallback(async () => {
+    const api = getElectronAPI();
+    if (!api?.setup?.getClaudeStatus) return;
+
+    try {
+      const result = await api.setup.getClaudeStatus();
+      if (result.success && result.auth) {
+        // Cast to extended type that includes server-added fields
+        const auth = result.auth as typeof result.auth & {
+          oauthTokenValid?: boolean;
+          apiKeyValid?: boolean;
+        };
+        // Map server method names to client method types
+        // Server returns: oauth_token_env, oauth_token, api_key_env, api_key, credentials_file, cli_authenticated, none
+        const validMethods = [
+          'oauth_token_env',
+          'oauth_token',
+          'api_key',
+          'api_key_env',
+          'credentials_file',
+          'cli_authenticated',
+          'none',
+        ] as const;
+        type AuthMethod = (typeof validMethods)[number];
+        const method: AuthMethod = validMethods.includes(auth.method as AuthMethod)
+          ? (auth.method as AuthMethod)
+          : auth.authenticated
+            ? 'api_key'
+            : 'none'; // Default authenticated to api_key, not none
+        const authStatus = {
+          authenticated: auth.authenticated,
+          method,
+          hasCredentialsFile: auth.hasCredentialsFile ?? false,
+          oauthTokenValid:
+            auth.oauthTokenValid || auth.hasStoredOAuthToken || auth.hasEnvOAuthToken,
+          apiKeyValid: auth.apiKeyValid || auth.hasStoredApiKey || auth.hasEnvApiKey,
+          hasEnvOAuthToken: auth.hasEnvOAuthToken,
+          hasEnvApiKey: auth.hasEnvApiKey,
+        };
+        setClaudeAuthStatus(authStatus);
+      }
+    } catch (error) {
+      logger.error('Failed to refresh Claude auth status:', error);
+    }
+  }, [setClaudeAuthStatus]);
+
+  // Check CLI status on mount
+  useEffect(() => {
+    const checkCliStatus = async () => {
+      const api = getElectronAPI();
+
+      // Check Claude CLI
+      if (api?.checkClaudeCli) {
+        try {
+          const status = await api.checkClaudeCli();
+          setClaudeCliStatus(status);
+        } catch (error) {
+          logger.error('Failed to check Claude CLI status:', error);
+        }
+      }
+
+      // Check Claude auth status (re-fetch on mount to ensure persistence)
+      await refreshAuthStatus();
+    };
+
+    checkCliStatus();
+  }, [refreshAuthStatus]);
+
+  // Refresh Claude CLI status and auth status
+  const handleRefreshClaudeCli = useCallback(async () => {
+    setIsCheckingClaudeCli(true);
+    try {
+      const api = getElectronAPI();
+      if (api?.checkClaudeCli) {
+        const status = await api.checkClaudeCli();
+        setClaudeCliStatus(status);
+      }
+      // Also refresh auth status
+      await refreshAuthStatus();
+    } catch (error) {
+      logger.error('Failed to refresh Claude CLI status:', error);
+    } finally {
+      setIsCheckingClaudeCli(false);
+    }
+  }, [refreshAuthStatus]);
+
+  return {
+    claudeCliStatus,
+    isCheckingClaudeCli,
+    handleRefreshClaudeCli,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/hooks/use-cursor-permissions.ts b/temp_repo/apps/ui/src/components/views/settings-view/hooks/use-cursor-permissions.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d641347ba22414d6acc1aee37e54bc65cb479b2e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/hooks/use-cursor-permissions.ts
@@ -0,0 +1,55 @@
+import { useState, useCallback } from 'react';
+import { useCursorPermissionsQuery, type CursorPermissionsData } from '@/hooks/queries';
+import { useApplyCursorProfile, useCopyCursorConfig } from '@/hooks/mutations';
+
+// Re-export for backward compatibility
+export type PermissionsData = CursorPermissionsData;
+
+/**
+ * Custom hook for managing Cursor CLI permissions
+ * Handles loading permissions data, applying profiles, and copying configs
+ */
+export function useCursorPermissions(projectPath?: string) {
+  const [copiedConfig, setCopiedConfig] = useState(false);
+
+  // React Query hooks
+  const permissionsQuery = useCursorPermissionsQuery(projectPath);
+  const applyProfileMutation = useApplyCursorProfile(projectPath);
+  const copyConfigMutation = useCopyCursorConfig();
+
+  // Apply a permission profile
+  const applyProfile = useCallback(
+    (profileId: 'strict' | 'development', scope: 'global' | 'project') => {
+      applyProfileMutation.mutate({ profileId, scope });
+    },
+    [applyProfileMutation]
+  );
+
+  // Copy example config to clipboard
+  const copyConfig = useCallback(
+    (profileId: 'strict' | 'development') => {
+      copyConfigMutation.mutate(profileId, {
+        onSuccess: () => {
+          setCopiedConfig(true);
+          setTimeout(() => setCopiedConfig(false), 2000);
+        },
+      });
+    },
+    [copyConfigMutation]
+  );
+
+  // Load permissions (refetch)
+  const loadPermissions = useCallback(() => {
+    permissionsQuery.refetch();
+  }, [permissionsQuery]);
+
+  return {
+    permissions: permissionsQuery.data ?? null,
+    isLoadingPermissions: permissionsQuery.isLoading,
+    isSavingPermissions: applyProfileMutation.isPending,
+    copiedConfig,
+    loadPermissions,
+    applyProfile,
+    copyConfig,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/hooks/use-cursor-status.ts b/temp_repo/apps/ui/src/components/views/settings-view/hooks/use-cursor-status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6a39f7cadbbb817c8c6f776ee295f9e7a39aa248
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/hooks/use-cursor-status.ts
@@ -0,0 +1,56 @@
+import { useEffect, useMemo, useCallback } from 'react';
+import { useCursorCliStatus } from '@/hooks/queries';
+import { useSetupStore } from '@/store/setup-store';
+
+export interface CursorStatus {
+  installed: boolean;
+  version?: string;
+  authenticated: boolean;
+  method?: string;
+}
+
+/**
+ * Custom hook for managing Cursor CLI status
+ * Uses React Query for data fetching with automatic caching.
+ */
+export function useCursorStatus() {
+  const { setCursorCliStatus } = useSetupStore();
+  const { data: result, isLoading, refetch } = useCursorCliStatus();
+
+  // Transform the API result into the local CursorStatus shape
+  const status = useMemo((): CursorStatus | null => {
+    if (!result) return null;
+    return {
+      installed: result.installed ?? false,
+      version: result.version ?? undefined,
+      authenticated: result.auth?.authenticated ?? false,
+      method: result.auth?.method,
+    };
+  }, [result]);
+
+  // Keep the global setup store in sync with query data
+  useEffect(() => {
+    if (status) {
+      setCursorCliStatus({
+        installed: status.installed,
+        version: status.version,
+        auth: status.authenticated
+          ? {
+              authenticated: true,
+              method: status.method || 'unknown',
+            }
+          : undefined,
+      });
+    }
+  }, [status, setCursorCliStatus]);
+
+  const loadData = useCallback(() => {
+    refetch();
+  }, [refetch]);
+
+  return {
+    status,
+    isLoading,
+    loadData,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts b/temp_repo/apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8726450a82a5955645c548902d61c59c814db11c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts
@@ -0,0 +1,45 @@
+import { useState, useCallback } from 'react';
+
+export type SettingsViewId =
+  | 'api-keys'
+  | 'claude'
+  | 'providers'
+  | 'claude-provider'
+  | 'cursor-provider'
+  | 'codex-provider'
+  | 'opencode-provider'
+  | 'gemini-provider'
+  | 'copilot-provider'
+  | 'mcp-servers'
+  | 'prompts'
+  | 'templates'
+  | 'model-defaults'
+  | 'appearance'
+  | 'editor'
+  | 'terminal'
+  | 'keyboard'
+  | 'audio'
+  | 'event-hooks'
+  | 'defaults'
+  | 'worktrees'
+  | 'account'
+  | 'security'
+  | 'developer'
+  | 'danger';
+
+interface UseSettingsViewOptions {
+  initialView?: SettingsViewId;
+}
+
+export function useSettingsView({ initialView = 'model-defaults' }: UseSettingsViewOptions = {}) {
+  const [activeView, setActiveView] = useState<SettingsViewId>(initialView);
+
+  const navigateTo = useCallback((viewId: SettingsViewId) => {
+    setActiveView(viewId);
+  }, []);
+
+  return {
+    activeView,
+    navigateTo,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/keyboard-shortcuts/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/keyboard-shortcuts/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5db1d7b52cfa8761d5d0c1851fff41283237b772
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/keyboard-shortcuts/index.ts
@@ -0,0 +1 @@
+export { KeyboardShortcutsSection } from './keyboard-shortcuts-section';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/keyboard-shortcuts/keyboard-shortcuts-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/keyboard-shortcuts/keyboard-shortcuts-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1a5c082ed504e940abbc1935ac4a11d83b4ac5e3
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/keyboard-shortcuts/keyboard-shortcuts-section.tsx
@@ -0,0 +1,69 @@
+import { Button } from '@/components/ui/button';
+import { Settings2, Keyboard } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface KeyboardShortcutsSectionProps {
+  onOpenKeyboardMap: () => void;
+}
+
+export function KeyboardShortcutsSection({ onOpenKeyboardMap }: KeyboardShortcutsSectionProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Settings2 className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            Keyboard Shortcuts
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Customize keyboard shortcuts for navigation and actions using the visual keyboard map.
+        </p>
+      </div>
+      <div className="p-6">
+        {/* Centered message directing to keyboard map */}
+        <div className="flex flex-col items-center justify-center py-12 text-center space-y-5">
+          <div className="relative">
+            <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-brand-500/10 to-brand-600/5 flex items-center justify-center border border-brand-500/20">
+              <Keyboard className="w-10 h-10 text-brand-500/60" />
+            </div>
+            <div className="absolute inset-0 bg-brand-500/10 blur-2xl rounded-full -z-10" />
+          </div>
+          <div className="space-y-2 max-w-md">
+            <h3 className="text-lg font-semibold text-foreground">Use the Visual Keyboard Map</h3>
+            <p className="text-sm text-muted-foreground/80">
+              Click the button below to customize your keyboard shortcuts. The visual interface
+              shows all available keys and lets you easily edit shortcuts.
+            </p>
+          </div>
+          <Button
+            variant="default"
+            size="lg"
+            onClick={onOpenKeyboardMap}
+            className={cn(
+              'gap-2.5 mt-2 h-11 px-6',
+              'bg-gradient-to-r from-brand-500 to-brand-600',
+              'hover:from-brand-600 hover:to-brand-600',
+              'text-white font-medium border-0',
+              'shadow-md shadow-brand-500/20 hover:shadow-lg hover:shadow-brand-500/25',
+              'transition-all duration-200 ease-out',
+              'hover:scale-[1.02] active:scale-[0.98]'
+            )}
+          >
+            <Keyboard className="w-5 h-5" />
+            Open Keyboard Map
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/components/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6903ba408e21bc043aaaf2eba6d39b4d5ed50a98
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/components/index.ts
@@ -0,0 +1,3 @@
+export { MCPServerHeader } from './mcp-server-header';
+export { MCPToolsWarning } from './mcp-tools-warning';
+export { MCPServerCard } from './mcp-server-card';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-server-card.tsx b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-server-card.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..752b06e788718adacebe579e4580c2b1db1e5285
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-server-card.tsx
@@ -0,0 +1,170 @@
+import { ChevronDown, ChevronRight, Code, Pencil, Trash2, PlayCircle } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { cn } from '@/lib/utils';
+import type { MCPServerConfig } from '@automaker/types';
+import type { ServerTestState } from '../types';
+import { getServerIcon, getTestStatusIcon, maskSensitiveUrl } from '../utils';
+import { MCPToolsList } from '../mcp-tools-list';
+
+interface MCPServerCardProps {
+  server: MCPServerConfig;
+  testState?: ServerTestState;
+  isExpanded: boolean;
+  onToggleExpanded: () => void;
+  onTest: () => void;
+  onToggleEnabled: () => void;
+  onEditJson: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export function MCPServerCard({
+  server,
+  testState,
+  isExpanded,
+  onToggleExpanded,
+  onTest,
+  onToggleEnabled,
+  onEditJson,
+  onEdit,
+  onDelete,
+}: MCPServerCardProps) {
+  const Icon = getServerIcon(server.type);
+  const hasTools = testState?.tools && testState.tools.length > 0;
+
+  return (
+    <Collapsible open={isExpanded} onOpenChange={onToggleExpanded}>
+      <div
+        className={cn(
+          'rounded-xl border',
+          server.enabled !== false
+            ? 'border-border/50 bg-accent/20'
+            : 'border-border/30 bg-muted/30 opacity-60'
+        )}
+        data-testid={`mcp-server-${server.id}`}
+      >
+        <div className="flex items-center justify-between p-4 gap-2">
+          <div className="flex items-center gap-3 min-w-0 flex-1 overflow-hidden">
+            <CollapsibleTrigger asChild>
+              <button
+                className={cn(
+                  'flex items-center gap-3 text-left min-w-0 flex-1',
+                  hasTools && 'cursor-pointer hover:opacity-80'
+                )}
+                disabled={!hasTools}
+              >
+                {hasTools ? (
+                  isExpanded ? (
+                    <ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
+                  ) : (
+                    <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
+                  )
+                ) : (
+                  <div className="w-4 shrink-0" />
+                )}
+                <div
+                  className={cn(
+                    'w-8 h-8 rounded-lg flex items-center justify-center shrink-0',
+                    server.enabled !== false ? 'bg-brand-500/20' : 'bg-muted'
+                  )}
+                >
+                  <Icon className="w-4 h-4 text-brand-500" />
+                </div>
+                <div className="min-w-0 flex-1 overflow-hidden">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <span className="font-medium text-sm truncate">{server.name}</span>
+                    {testState && getTestStatusIcon(testState.status)}
+                    {testState?.status === 'success' && testState.tools && (
+                      <span className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded whitespace-nowrap">
+                        {testState.tools.length} tool{testState.tools.length !== 1 ? 's' : ''}
+                      </span>
+                    )}
+                  </div>
+                  {server.description && (
+                    <div className="text-xs text-muted-foreground truncate">
+                      {server.description}
+                    </div>
+                  )}
+                  <div className="text-xs text-muted-foreground/60 mt-0.5 truncate">
+                    {server.type === 'stdio'
+                      ? `${server.command}${server.args?.length ? ' ' + server.args.join(' ') : ''}`
+                      : maskSensitiveUrl(server.url || '')}
+                  </div>
+                  {testState?.status === 'error' && testState.error && (
+                    <div className="text-xs text-destructive mt-1 line-clamp-2 break-words">
+                      {testState.error}
+                    </div>
+                  )}
+                </div>
+              </button>
+            </CollapsibleTrigger>
+          </div>
+          <div className="flex items-center gap-2 shrink-0 ml-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onTest}
+              disabled={testState?.status === 'testing' || server.enabled === false}
+              data-testid={`mcp-server-test-${server.id}`}
+              className="h-8 px-2"
+            >
+              {testState?.status === 'testing' ? (
+                <Spinner size="sm" />
+              ) : (
+                <PlayCircle className="w-4 h-4" />
+              )}
+              <span className="ml-1.5 text-xs">Test</span>
+            </Button>
+            <Switch
+              checked={server.enabled !== false}
+              onCheckedChange={onToggleEnabled}
+              data-testid={`mcp-server-toggle-${server.id}`}
+            />
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onEditJson}
+              title="Edit JSON"
+              data-testid={`mcp-server-json-${server.id}`}
+            >
+              <Code className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onEdit}
+              data-testid={`mcp-server-edit-${server.id}`}
+            >
+              <Pencil className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="text-destructive hover:text-destructive"
+              onClick={onDelete}
+              data-testid={`mcp-server-delete-${server.id}`}
+            >
+              <Trash2 className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+        {hasTools && (
+          <CollapsibleContent>
+            <div className="px-4 pb-4 pt-0 ml-7 overflow-hidden">
+              <div className="text-xs font-medium text-muted-foreground mb-2">Available Tools</div>
+              <MCPToolsList
+                tools={testState.tools!}
+                isLoading={testState.status === 'testing'}
+                error={testState.error}
+                className="max-w-full"
+              />
+            </div>
+          </CollapsibleContent>
+        )}
+      </div>
+    </Collapsible>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-server-header.tsx b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-server-header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..69277db59cb28680e1d844d6bb5db3668e6c9016
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-server-header.tsx
@@ -0,0 +1,87 @@
+import { Plug, RefreshCw, Download, Code, FileJson, Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
+
+interface MCPServerHeaderProps {
+  isRefreshing: boolean;
+  hasServers: boolean;
+  onRefresh: () => void;
+  onExport: () => void;
+  onEditAllJson: () => void;
+  onImport: () => void;
+  onAdd: () => void;
+}
+
+export function MCPServerHeader({
+  isRefreshing,
+  hasServers,
+  onRefresh,
+  onExport,
+  onEditAllJson,
+  onImport,
+  onAdd,
+}: MCPServerHeaderProps) {
+  return (
+    <div className="p-6 border-b border-border/50 bg-linear-to-r from-transparent via-accent/5 to-transparent">
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-9 h-9 rounded-xl bg-linear-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <Plug className="w-5 h-5 text-brand-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">MCP Servers</h2>
+          </div>
+          <p className="text-sm text-muted-foreground/80 ml-12">
+            Configure Model Context Protocol servers to extend agent capabilities.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={onRefresh}
+            disabled={isRefreshing}
+            data-testid="refresh-mcp-servers-button"
+          >
+            {isRefreshing ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+          {hasServers && (
+            <>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={onExport}
+                data-testid="export-mcp-servers-button"
+              >
+                <Download className="w-4 h-4 mr-2" />
+                Export
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={onEditAllJson}
+                data-testid="edit-all-json-button"
+              >
+                <Code className="w-4 h-4 mr-2" />
+                Edit JSON
+              </Button>
+            </>
+          )}
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={onImport}
+            data-testid="import-mcp-servers-button"
+          >
+            <FileJson className="w-4 h-4 mr-2" />
+            Import JSON
+          </Button>
+          <Button size="sm" onClick={onAdd} data-testid="add-mcp-server-button">
+            <Plus className="w-4 h-4 mr-2" />
+            Add Server
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-tools-warning.tsx b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-tools-warning.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..019a0bbb293aec696e1e590fddcaddd09df810d4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/components/mcp-tools-warning.tsx
@@ -0,0 +1,25 @@
+import { AlertTriangle } from 'lucide-react';
+import { MAX_RECOMMENDED_TOOLS } from '../constants';
+
+interface MCPToolsWarningProps {
+  totalTools: number;
+}
+
+export function MCPToolsWarning({ totalTools }: MCPToolsWarningProps) {
+  return (
+    <div className="mx-6 mt-4 p-3 rounded-lg border border-yellow-500/50 bg-yellow-500/10">
+      <div className="flex items-start gap-3">
+        <AlertTriangle className="w-5 h-5 text-yellow-500 shrink-0 mt-0.5" />
+        <div className="text-sm">
+          <p className="font-medium text-yellow-600 dark:text-yellow-400">
+            High tool count detected ({totalTools} tools)
+          </p>
+          <p className="text-muted-foreground mt-1">
+            Having more than {MAX_RECOMMENDED_TOOLS} MCP tools may degrade AI model performance.
+            Consider disabling unused servers or removing unnecessary tools.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/constants.ts b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8a41cd8b1974c702aa86349e27e46f56365ad899
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/constants.ts
@@ -0,0 +1,14 @@
+// Patterns that indicate sensitive values in URLs or config
+export const SENSITIVE_PARAM_PATTERNS = [
+  /api[-_]?key/i,
+  /api[-_]?token/i,
+  /auth/i,
+  /token/i,
+  /secret/i,
+  /password/i,
+  /credential/i,
+  /bearer/i,
+];
+
+// Maximum recommended MCP tools before performance degradation
+export const MAX_RECOMMENDED_TOOLS = 80;
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/add-edit-server-dialog.tsx b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/add-edit-server-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce9ed2f586f875abe4f34a361cef618fd3d46950
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/add-edit-server-dialog.tsx
@@ -0,0 +1,161 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { MCPServerConfig } from '@automaker/types';
+import type { ServerFormData, ServerType } from '../types';
+
+interface AddEditServerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editingServer: MCPServerConfig | null;
+  formData: ServerFormData;
+  onFormDataChange: (data: ServerFormData) => void;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+export function AddEditServerDialog({
+  open,
+  onOpenChange,
+  editingServer,
+  formData,
+  onFormDataChange,
+  onSave,
+  onCancel,
+}: AddEditServerDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg" data-testid="mcp-server-dialog">
+        <DialogHeader>
+          <DialogTitle>{editingServer ? 'Edit MCP Server' : 'Add MCP Server'}</DialogTitle>
+          <DialogDescription>
+            Configure an MCP server to extend agent capabilities with custom tools.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4 overflow-y-auto">
+          <div className="space-y-2">
+            <Label htmlFor="server-name">Name</Label>
+            <Input
+              id="server-name"
+              value={formData.name}
+              onChange={(e) => onFormDataChange({ ...formData, name: e.target.value })}
+              placeholder="my-mcp-server"
+              data-testid="mcp-server-name-input"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="server-description">Description (optional)</Label>
+            <Input
+              id="server-description"
+              value={formData.description}
+              onChange={(e) => onFormDataChange({ ...formData, description: e.target.value })}
+              placeholder="What this server provides..."
+              data-testid="mcp-server-description-input"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="server-type">Transport Type</Label>
+            <Select
+              value={formData.type}
+              onValueChange={(value: ServerType) => onFormDataChange({ ...formData, type: value })}
+            >
+              <SelectTrigger id="server-type" data-testid="mcp-server-type-select">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="stdio">Stdio (subprocess)</SelectItem>
+                <SelectItem value="sse">SSE (Server-Sent Events)</SelectItem>
+                <SelectItem value="http">HTTP</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          {formData.type === 'stdio' ? (
+            <>
+              <div className="space-y-2">
+                <Label htmlFor="server-command">Command</Label>
+                <Input
+                  id="server-command"
+                  value={formData.command}
+                  onChange={(e) => onFormDataChange({ ...formData, command: e.target.value })}
+                  placeholder="npx, node, python, etc."
+                  data-testid="mcp-server-command-input"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="server-args">Arguments (space-separated)</Label>
+                <Input
+                  id="server-args"
+                  value={formData.args}
+                  onChange={(e) => onFormDataChange({ ...formData, args: e.target.value })}
+                  placeholder="-y @modelcontextprotocol/server-filesystem"
+                  data-testid="mcp-server-args-input"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="server-env">Environment Variables (JSON, optional)</Label>
+                <Textarea
+                  id="server-env"
+                  value={formData.env}
+                  onChange={(e) => onFormDataChange({ ...formData, env: e.target.value })}
+                  placeholder={'{\n  "API_KEY": "your-key"\n}'}
+                  className="font-mono text-sm h-24"
+                  data-testid="mcp-server-env-input"
+                />
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="space-y-2">
+                <Label htmlFor="server-url">URL</Label>
+                <Input
+                  id="server-url"
+                  value={formData.url}
+                  onChange={(e) => onFormDataChange({ ...formData, url: e.target.value })}
+                  placeholder="https://example.com/mcp"
+                  data-testid="mcp-server-url-input"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="server-headers">Headers (JSON, optional)</Label>
+                <Textarea
+                  id="server-headers"
+                  value={formData.headers}
+                  onChange={(e) => onFormDataChange({ ...formData, headers: e.target.value })}
+                  placeholder={
+                    '{\n  "x-api-key": "your-api-key",\n  "Authorization": "Bearer token"\n}'
+                  }
+                  className="font-mono text-sm h-24"
+                  data-testid="mcp-server-headers-input"
+                />
+              </div>
+            </>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button onClick={onSave} data-testid="mcp-server-save-button">
+            {editingServer ? 'Save Changes' : 'Add Server'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/delete-server-dialog.tsx b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/delete-server-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a49e520f734442e95d19ba0ca58fb279d6f92602
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/delete-server-dialog.tsx
@@ -0,0 +1,42 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+interface DeleteServerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+}
+
+export function DeleteServerDialog({ open, onOpenChange, onConfirm }: DeleteServerDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-testid="mcp-server-delete-dialog">
+        <DialogHeader>
+          <DialogTitle>Delete MCP Server</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete this MCP server? This action cannot be undone.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+            data-testid="mcp-server-confirm-delete-button"
+          >
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/global-json-edit-dialog.tsx b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/global-json-edit-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e5e20c3df857c4e313f1f03aa540e5cc188e262d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/global-json-edit-dialog.tsx
@@ -0,0 +1,82 @@
+import { Code } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+interface GlobalJsonEditDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  jsonValue: string;
+  onJsonValueChange: (value: string) => void;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+export function GlobalJsonEditDialog({
+  open,
+  onOpenChange,
+  jsonValue,
+  onJsonValueChange,
+  onSave,
+  onCancel,
+}: GlobalJsonEditDialogProps) {
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          onCancel();
+        } else {
+          onOpenChange(open);
+        }
+      }}
+    >
+      <DialogContent className="max-w-3xl max-h-[90vh]" data-testid="mcp-global-json-edit-dialog">
+        <DialogHeader>
+          <DialogTitle>Edit All MCP Servers</DialogTitle>
+          <DialogDescription>
+            Edit the full MCP servers configuration. Add, modify, or remove servers directly in
+            JSON. Servers removed from JSON will be deleted.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <Textarea
+            value={jsonValue}
+            onChange={(e) => onJsonValueChange(e.target.value)}
+            placeholder={`{
+  "mcpServers": {
+    "server-name": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-name"]
+    }
+  }
+}`}
+            className="font-mono text-sm h-[50vh] min-h-[300px]"
+            data-testid="mcp-global-json-edit-textarea"
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button
+            onClick={onSave}
+            disabled={!jsonValue.trim()}
+            data-testid="mcp-global-json-edit-save-button"
+          >
+            <Code className="w-4 h-4 mr-2" />
+            Save All
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/import-json-dialog.tsx b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/import-json-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..70057dfc712135d03c2f58b474dd90d5f621833d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/import-json-dialog.tsx
@@ -0,0 +1,69 @@
+import { FileJson } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+interface ImportJsonDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  importJson: string;
+  onImportJsonChange: (value: string) => void;
+  onImport: () => void;
+  onCancel: () => void;
+}
+
+export function ImportJsonDialog({
+  open,
+  onOpenChange,
+  importJson,
+  onImportJsonChange,
+  onImport,
+  onCancel,
+}: ImportJsonDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl" data-testid="mcp-import-dialog">
+        <DialogHeader>
+          <DialogTitle>Import MCP Servers</DialogTitle>
+          <DialogDescription>
+            Paste JSON configuration in Claude Code format. Servers with duplicate names will be
+            skipped.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <Textarea
+            value={importJson}
+            onChange={(e) => onImportJsonChange(e.target.value)}
+            placeholder={`{
+  "mcpServers": {
+    "server-name": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-name"],
+      "type": "stdio"
+    }
+  }
+}`}
+            className="font-mono text-sm h-64"
+            data-testid="mcp-import-textarea"
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button onClick={onImport} disabled={!importJson.trim()} data-testid="mcp-import-button">
+            <FileJson className="w-4 h-4 mr-2" />
+            Import
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2be761bc9ac6e4232b9b35bdad440751856c8f4b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/index.ts
@@ -0,0 +1,6 @@
+export { AddEditServerDialog } from './add-edit-server-dialog';
+export { DeleteServerDialog } from './delete-server-dialog';
+export { ImportJsonDialog } from './import-json-dialog';
+export { JsonEditDialog } from './json-edit-dialog';
+export { GlobalJsonEditDialog } from './global-json-edit-dialog';
+export { SecurityWarningDialog } from './security-warning-dialog';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/json-edit-dialog.tsx b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/json-edit-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..605837c84930774303e3559c826c476f258d65dc
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/json-edit-dialog.tsx
@@ -0,0 +1,77 @@
+import { Code } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import type { MCPServerConfig } from '@automaker/types';
+
+interface JsonEditDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  server: MCPServerConfig | null;
+  jsonValue: string;
+  onJsonValueChange: (value: string) => void;
+  onSave: () => void;
+  onCancel: () => void;
+}
+
+export function JsonEditDialog({
+  open,
+  onOpenChange,
+  server,
+  jsonValue,
+  onJsonValueChange,
+  onSave,
+  onCancel,
+}: JsonEditDialogProps) {
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          onCancel();
+        } else {
+          onOpenChange(open);
+        }
+      }}
+    >
+      <DialogContent className="max-w-2xl" data-testid="mcp-json-edit-dialog">
+        <DialogHeader>
+          <DialogTitle>Edit Server Configuration</DialogTitle>
+          <DialogDescription>
+            Edit the raw JSON configuration for "{server?.name}". Changes will be validated before
+            saving.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="py-4">
+          <Textarea
+            value={jsonValue}
+            onChange={(e) => onJsonValueChange(e.target.value)}
+            placeholder="Server configuration JSON..."
+            className="font-mono text-sm h-80"
+            data-testid="mcp-json-edit-textarea"
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>
+            Cancel
+          </Button>
+          <Button
+            onClick={onSave}
+            disabled={!jsonValue.trim()}
+            data-testid="mcp-json-edit-save-button"
+          >
+            <Code className="w-4 h-4 mr-2" />
+            Save JSON
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/security-warning-dialog.tsx b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/security-warning-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..19d9c7cf0a49211cd3a71db667a98ddf2bfde2d3
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/dialogs/security-warning-dialog.tsx
@@ -0,0 +1,107 @@
+import { ShieldAlert, Terminal, Globe } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+interface SecurityWarningDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  serverType: 'stdio' | 'sse' | 'http';
+  serverName: string;
+  command?: string;
+  args?: string[];
+  url?: string;
+  /** Number of servers being imported (for import dialog) */
+  importCount?: number;
+}
+
+export function SecurityWarningDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  serverType,
+  serverName: _serverName,
+  command,
+  args,
+  url,
+  importCount,
+}: SecurityWarningDialogProps) {
+  const isImport = importCount !== undefined && importCount > 0;
+  const isStdio = serverType === 'stdio';
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg" data-testid="mcp-security-warning-dialog">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <ShieldAlert className="h-5 w-5 text-amber-500" />
+            Security Warning
+          </DialogTitle>
+          <DialogDescription asChild>
+            <div className="space-y-3 pt-2">
+              <p className="font-medium text-foreground">
+                {isImport
+                  ? `You are about to import ${importCount} MCP server${importCount > 1 ? 's' : ''}.`
+                  : 'MCP servers can execute code on your machine.'}
+              </p>
+
+              {!isImport && isStdio && command && (
+                <div className="rounded-md border border-destructive/30 bg-destructive/10 p-3">
+                  <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+                    <Terminal className="h-4 w-4 text-destructive" />
+                    This server will run:
+                  </div>
+                  <code className="mt-1 block break-all text-sm text-muted-foreground">
+                    {command} {args?.join(' ')}
+                  </code>
+                </div>
+              )}
+
+              {!isImport && !isStdio && url && (
+                <div className="rounded-md border border-amber-500/30 bg-amber-500/10 p-3">
+                  <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+                    <Globe className="h-4 w-4 text-amber-500" />
+                    This server will connect to:
+                  </div>
+                  <code className="mt-1 block break-all text-sm text-muted-foreground">{url}</code>
+                </div>
+              )}
+
+              {isImport && (
+                <div className="rounded-md border border-amber-500/30 bg-amber-500/10 p-3">
+                  <p className="text-sm text-foreground">
+                    Each imported server can execute arbitrary commands or connect to external
+                    services. Review the JSON carefully before importing.
+                  </p>
+                </div>
+              )}
+
+              <ul className="list-inside list-disc space-y-1 text-sm text-muted-foreground">
+                <li>Only add servers from sources you trust</li>
+                {isStdio && <li>Stdio servers run with your user privileges</li>}
+                {!isStdio && <li>HTTP/SSE servers can access network resources</li>}
+                <li>Review the {isStdio ? 'command' : 'URL'} before confirming</li>
+              </ul>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={onConfirm} data-testid="mcp-security-confirm-button">
+            I understand, {isImport ? 'import' : 'add'} server
+            {isImport && importCount! > 1 ? 's' : ''}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/hooks/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..abc63400a49eaeab1f5a06a1e68442e458e9c6e8
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/hooks/index.ts
@@ -0,0 +1 @@
+export { useMCPServers } from './use-mcp-servers';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/hooks/use-mcp-servers.ts b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/hooks/use-mcp-servers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4102a69cf906bc0f4dda6db5f5427a4058d0f6b4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/hooks/use-mcp-servers.ts
@@ -0,0 +1,989 @@
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { useAppStore } from '@/store/app-store';
+
+const logger = createLogger('MCPServers');
+import { toast } from 'sonner';
+import type { MCPServerConfig } from '@automaker/types';
+import { syncSettingsToServer, loadMCPServersFromServer } from '@/hooks/use-settings-migration';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import type { ServerFormData, ServerTestState } from '../types';
+import { defaultFormData } from '../types';
+import { MAX_RECOMMENDED_TOOLS } from '../constants';
+import type { ServerType } from '../types';
+
+/** Pending server data waiting for security confirmation */
+interface PendingServerData {
+  type: 'add' | 'import';
+  serverData?: Omit<MCPServerConfig, 'id'>;
+  importServers?: Array<Omit<MCPServerConfig, 'id'>>;
+  serverType: ServerType;
+  command?: string;
+  args?: string[];
+  url?: string;
+}
+
+export function useMCPServers() {
+  const { mcpServers, addMCPServer, updateMCPServer, removeMCPServer } = useAppStore();
+
+  // State
+  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+  const [editingServer, setEditingServer] = useState<MCPServerConfig | null>(null);
+  const [formData, setFormData] = useState<ServerFormData>(defaultFormData);
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+  const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
+  const [importJson, setImportJson] = useState('');
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [serverTestStates, setServerTestStates] = useState<Record<string, ServerTestState>>({});
+  const [expandedServers, setExpandedServers] = useState<Set<string>>(new Set());
+  const [jsonEditServer, setJsonEditServer] = useState<MCPServerConfig | null>(null);
+  const [jsonEditValue, setJsonEditValue] = useState('');
+  const [isGlobalJsonEditOpen, setIsGlobalJsonEditOpen] = useState(false);
+  const [globalJsonValue, setGlobalJsonValue] = useState('');
+  const autoTestedServersRef = useRef<Set<string>>(new Set());
+  const pendingSyncServerIdsRef = useRef<Set<string>>(new Set());
+
+  // Security warning dialog state
+  const [isSecurityWarningOpen, setIsSecurityWarningOpen] = useState(false);
+  const [pendingServerData, setPendingServerData] = useState<PendingServerData | null>(null);
+
+  // Computed values
+  const totalToolsCount = useMemo(() => {
+    let count = 0;
+    for (const server of mcpServers) {
+      if (server.enabled !== false) {
+        const testState = serverTestStates[server.id];
+        if (testState?.status === 'success' && testState.tools) {
+          count += testState.tools.length;
+        }
+      }
+    }
+    return count;
+  }, [mcpServers, serverTestStates]);
+
+  const showToolsWarning = totalToolsCount > MAX_RECOMMENDED_TOOLS;
+
+  // Auto-load MCP servers from settings file on mount
+  useEffect(() => {
+    loadMCPServersFromServer().catch((error) => {
+      logger.error('Failed to load MCP servers on mount:', error);
+    });
+  }, []);
+
+  // Test a single server (extracted for reuse)
+  const testServer = useCallback(async (server: MCPServerConfig, silent = false) => {
+    setServerTestStates((prev) => ({
+      ...prev,
+      [server.id]: { status: 'testing' },
+    }));
+
+    try {
+      const api = getHttpApiClient();
+      const result = await api.mcp.testServer(server.id);
+
+      if (result.success) {
+        setServerTestStates((prev) => ({
+          ...prev,
+          [server.id]: {
+            status: 'success',
+            tools: result.tools,
+            connectionTime: result.connectionTime,
+          },
+        }));
+        // Only auto-expand on manual test, not on auto-test (silent)
+        if (!silent) {
+          setExpandedServers((prev) => new Set([...prev, server.id]));
+          toast.success(
+            `Connected to ${server.name} (${result.tools?.length || 0} tools, ${result.connectionTime}ms)`
+          );
+        }
+      } else {
+        setServerTestStates((prev) => ({
+          ...prev,
+          [server.id]: {
+            status: 'error',
+            error: result.error,
+            connectionTime: result.connectionTime,
+          },
+        }));
+        if (!silent) {
+          toast.error(`Failed to connect: ${result.error}`);
+        }
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      setServerTestStates((prev) => ({
+        ...prev,
+        [server.id]: {
+          status: 'error',
+          error: errorMessage,
+        },
+      }));
+      if (!silent) {
+        toast.error(`Test failed: ${errorMessage}`);
+      }
+    }
+  }, []);
+
+  // Auto-test all enabled servers on mount (skip servers pending sync)
+  useEffect(() => {
+    const enabledServers = mcpServers.filter((s) => s.enabled !== false);
+    const serversToTest = enabledServers.filter(
+      (s) => !autoTestedServersRef.current.has(s.id) && !pendingSyncServerIdsRef.current.has(s.id)
+    );
+
+    if (serversToTest.length > 0) {
+      // Mark all as being tested
+      serversToTest.forEach((s) => autoTestedServersRef.current.add(s.id));
+
+      // Test all servers in parallel (silently - no toast spam)
+      serversToTest.forEach((server) => {
+        testServer(server, true);
+      });
+    }
+  }, [mcpServers, testServer]);
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    try {
+      const success = await loadMCPServersFromServer();
+      if (success) {
+        toast.success('MCP servers refreshed from settings');
+      } else {
+        toast.error('Failed to refresh MCP servers');
+      }
+    } catch {
+      toast.error('Error refreshing MCP servers');
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const handleTestServer = (server: MCPServerConfig) => {
+    testServer(server, false); // false = show toast notifications
+  };
+
+  const toggleServerExpanded = (serverId: string) => {
+    setExpandedServers((prev) => {
+      const next = new Set(prev);
+      if (next.has(serverId)) {
+        next.delete(serverId);
+      } else {
+        next.add(serverId);
+      }
+      return next;
+    });
+  };
+
+  const handleOpenAddDialog = () => {
+    setFormData(defaultFormData);
+    setEditingServer(null);
+    setIsAddDialogOpen(true);
+  };
+
+  const handleOpenEditDialog = (server: MCPServerConfig) => {
+    setFormData({
+      name: server.name,
+      description: server.description || '',
+      type: server.type || 'stdio',
+      command: server.command || '',
+      args: server.args?.join(' ') || '',
+      url: server.url || '',
+      headers: server.headers ? JSON.stringify(server.headers, null, 2) : '',
+      env: server.env ? JSON.stringify(server.env, null, 2) : '',
+    });
+    setEditingServer(server);
+    setIsAddDialogOpen(true);
+  };
+
+  const handleCloseDialog = () => {
+    setIsAddDialogOpen(false);
+    setEditingServer(null);
+    setFormData(defaultFormData);
+  };
+
+  const handleSave = async () => {
+    if (!formData.name.trim()) {
+      toast.error('Server name is required');
+      return;
+    }
+
+    if (formData.type === 'stdio' && !formData.command.trim()) {
+      toast.error('Command is required for stdio servers');
+      return;
+    }
+
+    if ((formData.type === 'sse' || formData.type === 'http') && !formData.url.trim()) {
+      toast.error('URL is required for SSE/HTTP servers');
+      return;
+    }
+
+    // Parse headers if provided
+    let parsedHeaders: Record<string, string> | undefined;
+    if (formData.headers.trim()) {
+      try {
+        parsedHeaders = JSON.parse(formData.headers.trim());
+        if (typeof parsedHeaders !== 'object' || Array.isArray(parsedHeaders)) {
+          toast.error('Headers must be a JSON object');
+          return;
+        }
+      } catch {
+        toast.error('Invalid JSON for headers');
+        return;
+      }
+    }
+
+    // Parse env if provided
+    let parsedEnv: Record<string, string> | undefined;
+    if (formData.env.trim()) {
+      try {
+        parsedEnv = JSON.parse(formData.env.trim());
+        if (typeof parsedEnv !== 'object' || Array.isArray(parsedEnv)) {
+          toast.error('Environment variables must be a JSON object');
+          return;
+        }
+      } catch {
+        toast.error('Invalid JSON for environment variables');
+        return;
+      }
+    }
+
+    const serverData: Omit<MCPServerConfig, 'id'> = {
+      name: formData.name.trim(),
+      description: formData.description.trim() || undefined,
+      type: formData.type,
+      enabled: editingServer?.enabled ?? true,
+    };
+
+    if (formData.type === 'stdio') {
+      serverData.command = formData.command.trim();
+      if (formData.args.trim()) {
+        serverData.args = formData.args.trim().split(/\s+/);
+      }
+      if (parsedEnv) {
+        serverData.env = parsedEnv;
+      }
+    } else {
+      serverData.url = formData.url.trim();
+      if (parsedHeaders) {
+        serverData.headers = parsedHeaders;
+      }
+    }
+
+    // If editing an existing server, save directly (user already approved it)
+    if (editingServer) {
+      const previousData = { ...editingServer };
+      updateMCPServer(editingServer.id, serverData);
+      const syncSuccess = await syncSettingsToServer();
+      if (!syncSuccess) {
+        // Rollback local state on sync failure
+        updateMCPServer(editingServer.id, previousData);
+        toast.error('Failed to save MCP server to disk');
+        return;
+      }
+      toast.success('MCP server updated');
+      handleCloseDialog();
+      return;
+    }
+
+    // For new servers, show security warning first
+    setPendingServerData({
+      type: 'add',
+      serverData,
+      serverType: formData.type,
+      command: formData.type === 'stdio' ? formData.command.trim() : undefined,
+      args:
+        formData.type === 'stdio' && formData.args.trim()
+          ? formData.args.trim().split(/\s+/)
+          : undefined,
+      url: formData.type !== 'stdio' ? formData.url.trim() : undefined,
+    });
+    setIsSecurityWarningOpen(true);
+  };
+
+  /** Called when user confirms the security warning for adding a server */
+  const handleSecurityWarningConfirm = async () => {
+    if (!pendingServerData) return;
+
+    if (pendingServerData.type === 'add' && pendingServerData.serverData) {
+      // Capture existing IDs before adding to find the new server reliably
+      const existingIds = new Set(mcpServers.map((s) => s.id));
+      addMCPServer(pendingServerData.serverData);
+
+      // Find the newly added server by comparing IDs
+      const newServers = useAppStore.getState().mcpServers;
+      const newServer = newServers.find((s) => !existingIds.has(s.id));
+      if (newServer) {
+        pendingSyncServerIdsRef.current.add(newServer.id);
+      }
+
+      const syncSuccess = await syncSettingsToServer();
+
+      // Clear pending sync and trigger auto-test after sync
+      if (newServer) {
+        pendingSyncServerIdsRef.current.delete(newServer.id);
+        if (syncSuccess && newServer.enabled !== false) {
+          testServer(newServer, true);
+        }
+      }
+
+      if (!syncSuccess) {
+        toast.error('Failed to save MCP server to disk');
+        setIsSecurityWarningOpen(false);
+        setPendingServerData(null);
+        return;
+      }
+      toast.success('MCP server added');
+      handleCloseDialog();
+    } else if (pendingServerData.type === 'import' && pendingServerData.importServers) {
+      // Capture existing IDs before adding to find the new servers reliably
+      const existingIds = new Set(mcpServers.map((s) => s.id));
+
+      for (const serverData of pendingServerData.importServers) {
+        addMCPServer(serverData);
+      }
+
+      // Find all newly added servers by comparing IDs
+      const newServers = useAppStore.getState().mcpServers.filter((s) => !existingIds.has(s.id));
+      newServers.forEach((s) => pendingSyncServerIdsRef.current.add(s.id));
+
+      const syncSuccess = await syncSettingsToServer();
+
+      // Clear pending sync and trigger auto-test after sync
+      newServers.forEach((s) => pendingSyncServerIdsRef.current.delete(s.id));
+      if (syncSuccess) {
+        for (const server of newServers) {
+          if (server.enabled !== false) {
+            testServer(server, true);
+          }
+        }
+      }
+
+      if (!syncSuccess) {
+        toast.error('Failed to save MCP servers to disk');
+        setIsSecurityWarningOpen(false);
+        setPendingServerData(null);
+        return;
+      }
+      const count = pendingServerData.importServers.length;
+      toast.success(`Imported ${count} MCP server${count > 1 ? 's' : ''}`);
+      setIsImportDialogOpen(false);
+      setImportJson('');
+    }
+
+    setIsSecurityWarningOpen(false);
+    setPendingServerData(null);
+  };
+
+  const handleToggleEnabled = async (server: MCPServerConfig) => {
+    const wasDisabled = server.enabled === false;
+    const previousEnabled = server.enabled;
+    updateMCPServer(server.id, { enabled: !server.enabled });
+    const syncSuccess = await syncSettingsToServer();
+    if (!syncSuccess) {
+      // Rollback local state on sync failure
+      updateMCPServer(server.id, { enabled: previousEnabled });
+      toast.error('Failed to save settings to disk');
+      return;
+    }
+    toast.success(wasDisabled ? 'Server enabled' : 'Server disabled');
+
+    // Auto-test if server was just enabled
+    if (wasDisabled) {
+      const updatedServer = useAppStore.getState().mcpServers.find((s) => s.id === server.id);
+      if (updatedServer) {
+        testServer(updatedServer, true);
+      }
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    removeMCPServer(id);
+    const syncSuccess = await syncSettingsToServer();
+    setDeleteConfirmId(null);
+    if (!syncSuccess) {
+      toast.error('Failed to save settings to disk');
+      return;
+    }
+    toast.success('MCP server removed');
+  };
+
+  /** Helper to parse a server config into importable format */
+  const parseServerConfig = (
+    name: string,
+    serverConfig: Record<string, unknown>
+  ): Omit<MCPServerConfig, 'id'> | null => {
+    const serverData: Omit<MCPServerConfig, 'id'> = {
+      name,
+      type: (serverConfig.type as ServerType) || 'stdio',
+      enabled: serverConfig.enabled !== false,
+    };
+
+    if (serverConfig.description) {
+      serverData.description = serverConfig.description as string;
+    }
+
+    if (serverData.type === 'stdio') {
+      if (!serverConfig.command) {
+        logger.warn(`Skipping ${name}: no command specified`);
+        return null;
+      }
+
+      const rawCommand = serverConfig.command as string;
+
+      // Support both formats:
+      // 1. Separate command/args: { "command": "npx", "args": ["-y", "package"] }
+      // 2. Inline args (Claude Desktop format): { "command": "npx -y package" }
+      if (Array.isArray(serverConfig.args) && serverConfig.args.length > 0) {
+        serverData.command = rawCommand;
+        serverData.args = serverConfig.args as string[];
+      } else if (rawCommand.includes(' ')) {
+        const parts = rawCommand.match(/(?:[^\s"']+|"[^"]*"|'[^']*')+/g) || [rawCommand];
+        serverData.command = parts[0];
+        if (parts.length > 1) {
+          serverData.args = parts.slice(1).map((arg) => arg.replace(/^["']|["']$/g, ''));
+        }
+      } else {
+        serverData.command = rawCommand;
+      }
+
+      if (typeof serverConfig.env === 'object' && serverConfig.env !== null) {
+        serverData.env = serverConfig.env as Record<string, string>;
+      }
+    } else {
+      if (!serverConfig.url) {
+        logger.warn(`Skipping ${name}: no url specified`);
+        return null;
+      }
+      serverData.url = serverConfig.url as string;
+      if (typeof serverConfig.headers === 'object' && serverConfig.headers !== null) {
+        serverData.headers = serverConfig.headers as Record<string, string>;
+      }
+    }
+
+    return serverData;
+  };
+
+  const handleImportJson = async () => {
+    try {
+      const parsed = JSON.parse(importJson);
+
+      // Support both formats:
+      // 1. Array format (new): { "mcpServers": [...] } or [...]
+      // 2. Object format (legacy): { "mcpServers": {...} } or { "name": {...} }
+      const servers = parsed.mcpServers || parsed;
+
+      const serversToImport: Array<Omit<MCPServerConfig, 'id'>> = [];
+      let skippedCount = 0;
+
+      if (Array.isArray(servers)) {
+        // Array format - each item has name property
+        for (const serverConfig of servers) {
+          if (typeof serverConfig !== 'object' || serverConfig === null) continue;
+
+          const config = serverConfig as Record<string, unknown>;
+          const name = config.name as string;
+
+          if (!name) {
+            logger.warn('Skipping server: no name specified');
+            skippedCount++;
+            continue;
+          }
+
+          // Check if server with this name already exists
+          if (mcpServers.some((s) => s.name === name)) {
+            skippedCount++;
+            continue;
+          }
+
+          const serverData = parseServerConfig(name, config);
+          if (serverData) {
+            serversToImport.push(serverData);
+          } else {
+            skippedCount++;
+          }
+        }
+      } else if (typeof servers === 'object' && servers !== null) {
+        // Object format - name is the key
+        for (const [name, config] of Object.entries(servers)) {
+          if (typeof config !== 'object' || config === null) continue;
+
+          // Check if server with this name already exists
+          if (mcpServers.some((s) => s.name === name)) {
+            skippedCount++;
+            continue;
+          }
+
+          const serverData = parseServerConfig(name, config as Record<string, unknown>);
+          if (serverData) {
+            serversToImport.push(serverData);
+          } else {
+            skippedCount++;
+          }
+        }
+      } else {
+        toast.error('Invalid format: expected array or object with server configurations');
+        return;
+      }
+
+      if (skippedCount > 0) {
+        toast.info(
+          `Skipped ${skippedCount} server${skippedCount > 1 ? 's' : ''} (already exist or invalid)`
+        );
+      }
+
+      if (serversToImport.length === 0) {
+        toast.warning('No new servers to import');
+        return;
+      }
+
+      // Show security warning before importing
+      // Use the first server's type for the warning (most imports are stdio)
+      const firstServer = serversToImport[0];
+      setPendingServerData({
+        type: 'import',
+        importServers: serversToImport,
+        serverType: firstServer.type || 'stdio',
+        command: firstServer.type === 'stdio' ? firstServer.command : undefined,
+        args: firstServer.type === 'stdio' ? firstServer.args : undefined,
+        url: firstServer.type !== 'stdio' ? firstServer.url : undefined,
+      });
+      setIsSecurityWarningOpen(true);
+    } catch (error) {
+      toast.error('Invalid JSON: ' + (error instanceof Error ? error.message : 'Parse error'));
+    }
+  };
+
+  const handleExportJson = () => {
+    // Export as array format with IDs preserved for full fidelity
+    const exportData: Array<Record<string, unknown>> = [];
+
+    for (const server of mcpServers) {
+      const serverConfig: Record<string, unknown> = {
+        id: server.id,
+        name: server.name,
+        type: server.type || 'stdio',
+        enabled: server.enabled ?? true,
+      };
+
+      if (server.description) {
+        serverConfig.description = server.description;
+      }
+
+      if (server.type === 'stdio' || !server.type) {
+        serverConfig.command = server.command;
+        if (server.args?.length) serverConfig.args = server.args;
+        if (server.env && Object.keys(server.env).length > 0) serverConfig.env = server.env;
+      } else {
+        serverConfig.url = server.url;
+        if (server.headers && Object.keys(server.headers).length > 0)
+          serverConfig.headers = server.headers;
+      }
+
+      exportData.push(serverConfig);
+    }
+
+    const json = JSON.stringify({ mcpServers: exportData }, null, 2);
+    navigator.clipboard.writeText(json);
+    toast.success('Copied to clipboard');
+  };
+
+  const handleOpenJsonEdit = (server: MCPServerConfig) => {
+    // Build a clean config object for editing (excluding internal fields like id)
+    const editableConfig: Record<string, unknown> = {
+      name: server.name,
+      type: server.type || 'stdio',
+    };
+
+    if (server.description) {
+      editableConfig.description = server.description;
+    }
+
+    if (server.type === 'stdio' || !server.type) {
+      if (server.command) editableConfig.command = server.command;
+      if (server.args?.length) editableConfig.args = server.args;
+      if (server.env && Object.keys(server.env).length > 0) editableConfig.env = server.env;
+    } else {
+      if (server.url) editableConfig.url = server.url;
+      if (server.headers && Object.keys(server.headers).length > 0) {
+        editableConfig.headers = server.headers;
+      }
+    }
+
+    if (server.enabled === false) {
+      editableConfig.enabled = false;
+    }
+
+    setJsonEditValue(JSON.stringify(editableConfig, null, 2));
+    setJsonEditServer(server);
+  };
+
+  const handleSaveJsonEdit = async () => {
+    if (!jsonEditServer) return;
+
+    try {
+      const parsed = JSON.parse(jsonEditValue);
+
+      if (typeof parsed !== 'object' || Array.isArray(parsed)) {
+        toast.error('Config must be a JSON object');
+        return;
+      }
+
+      // Validate required fields based on type
+      const serverType = parsed.type || 'stdio';
+
+      if (!parsed.name || typeof parsed.name !== 'string') {
+        toast.error('Name is required');
+        return;
+      }
+
+      if (serverType === 'stdio') {
+        if (!parsed.command || typeof parsed.command !== 'string') {
+          toast.error('Command is required for stdio servers');
+          return;
+        }
+      } else if (serverType === 'sse' || serverType === 'http') {
+        if (!parsed.url || typeof parsed.url !== 'string') {
+          toast.error('URL is required for SSE/HTTP servers');
+          return;
+        }
+      }
+
+      // Build update object
+      const updateData: Partial<MCPServerConfig> = {
+        name: parsed.name,
+        type: serverType,
+        description: parsed.description || undefined,
+        enabled: parsed.enabled !== false,
+      };
+
+      if (serverType === 'stdio') {
+        updateData.command = parsed.command;
+        updateData.args = Array.isArray(parsed.args) ? parsed.args : undefined;
+        updateData.env =
+          typeof parsed.env === 'object' && !Array.isArray(parsed.env) ? parsed.env : undefined;
+        // Clear HTTP fields
+        updateData.url = undefined;
+        updateData.headers = undefined;
+      } else {
+        updateData.url = parsed.url;
+        updateData.headers =
+          typeof parsed.headers === 'object' && !Array.isArray(parsed.headers)
+            ? parsed.headers
+            : undefined;
+        // Clear stdio fields
+        updateData.command = undefined;
+        updateData.args = undefined;
+        updateData.env = undefined;
+      }
+
+      updateMCPServer(jsonEditServer.id, updateData);
+      const syncSuccess = await syncSettingsToServer();
+      if (!syncSuccess) {
+        toast.error('Failed to save settings to disk');
+        return;
+      }
+      toast.success('Server configuration updated');
+      setJsonEditServer(null);
+      setJsonEditValue('');
+    } catch (error) {
+      toast.error('Invalid JSON: ' + (error instanceof Error ? error.message : 'Parse error'));
+    }
+  };
+
+  const handleOpenGlobalJsonEdit = () => {
+    // Build the full mcpServers config as array with IDs preserved
+    const exportData: Array<Record<string, unknown>> = [];
+
+    for (const server of mcpServers) {
+      const serverConfig: Record<string, unknown> = {
+        id: server.id,
+        name: server.name,
+        type: server.type || 'stdio',
+        enabled: server.enabled ?? true,
+      };
+
+      if (server.description) {
+        serverConfig.description = server.description;
+      }
+
+      if (server.type === 'stdio' || !server.type) {
+        serverConfig.command = server.command;
+        if (server.args?.length) serverConfig.args = server.args;
+        if (server.env && Object.keys(server.env).length > 0) serverConfig.env = server.env;
+      } else {
+        serverConfig.url = server.url;
+        if (server.headers && Object.keys(server.headers).length > 0) {
+          serverConfig.headers = server.headers;
+        }
+      }
+
+      exportData.push(serverConfig);
+    }
+
+    setGlobalJsonValue(JSON.stringify({ mcpServers: exportData }, null, 2));
+    setIsGlobalJsonEditOpen(true);
+  };
+
+  /** Helper to save array format (with IDs preserved) */
+  const handleSaveGlobalJsonArray = async (
+    serversArray: Array<Record<string, unknown>>
+  ): Promise<boolean> => {
+    // Validate all servers first
+    const names = new Set<string>();
+    for (const serverConfig of serversArray) {
+      const name = serverConfig.name as string;
+      if (!name || typeof name !== 'string') {
+        toast.error('Each server must have a name');
+        return false;
+      }
+      if (names.has(name)) {
+        toast.error(`Duplicate server name found: "${name}"`);
+        return false;
+      }
+      names.add(name);
+
+      const serverType = (serverConfig.type as string) || 'stdio';
+      if (serverType === 'stdio') {
+        if (!serverConfig.command || typeof serverConfig.command !== 'string') {
+          toast.error(`Command is required for "${name}" (stdio)`);
+          return false;
+        }
+      } else if (serverType === 'sse' || serverType === 'http') {
+        if (!serverConfig.url || typeof serverConfig.url !== 'string') {
+          toast.error(`URL is required for "${name}" (${serverType})`);
+          return false;
+        }
+      }
+    }
+
+    // Create maps for matching: by ID first, then by name
+    const existingById = new Map(mcpServers.map((s) => [s.id, s]));
+    const existingByName = new Map(mcpServers.map((s) => [s.name, s]));
+    const processedIds = new Set<string>();
+
+    // Update or add servers
+    for (const serverConfig of serversArray) {
+      const serverType = (serverConfig.type as ServerType) || 'stdio';
+      const serverId = serverConfig.id as string | undefined;
+      const serverName = serverConfig.name as string;
+
+      const serverData: Omit<MCPServerConfig, 'id'> = {
+        name: serverName,
+        type: serverType,
+        description: (serverConfig.description as string) || undefined,
+        enabled: serverConfig.enabled !== false,
+      };
+
+      if (serverType === 'stdio') {
+        serverData.command = serverConfig.command as string;
+        if (Array.isArray(serverConfig.args)) {
+          serverData.args = serverConfig.args as string[];
+        }
+        if (typeof serverConfig.env === 'object' && serverConfig.env !== null) {
+          serverData.env = serverConfig.env as Record<string, string>;
+        }
+      } else {
+        serverData.url = serverConfig.url as string;
+        if (typeof serverConfig.headers === 'object' && serverConfig.headers !== null) {
+          serverData.headers = serverConfig.headers as Record<string, string>;
+        }
+      }
+
+      // Match by ID first (allows renaming), then by name (backward compatibility)
+      const existingServer = serverId ? existingById.get(serverId) : existingByName.get(serverName);
+
+      if (existingServer) {
+        updateMCPServer(existingServer.id, serverData);
+        processedIds.add(existingServer.id);
+      } else {
+        addMCPServer(serverData);
+        // Get the newly added server ID
+        const newServers = useAppStore.getState().mcpServers;
+        const newServer = newServers.find((s) => s.name === serverName);
+        if (newServer) {
+          processedIds.add(newServer.id);
+        }
+      }
+    }
+
+    // Remove servers that are no longer in the JSON
+    for (const server of mcpServers) {
+      if (!processedIds.has(server.id)) {
+        removeMCPServer(server.id);
+      }
+    }
+
+    return true;
+  };
+
+  /** Helper to save object format (legacy Claude Desktop format) */
+  const handleSaveGlobalJsonObject = async (
+    serversObject: Record<string, Record<string, unknown>>
+  ): Promise<boolean> => {
+    // Validate all servers first
+    for (const [name, config] of Object.entries(serversObject)) {
+      if (typeof config !== 'object' || config === null) {
+        toast.error(`Invalid config for "${name}"`);
+        return false;
+      }
+
+      const serverType = (config.type as string) || 'stdio';
+      if (serverType === 'stdio') {
+        if (!config.command || typeof config.command !== 'string') {
+          toast.error(`Command is required for "${name}" (stdio)`);
+          return false;
+        }
+      } else if (serverType === 'sse' || serverType === 'http') {
+        if (!config.url || typeof config.url !== 'string') {
+          toast.error(`URL is required for "${name}" (${serverType})`);
+          return false;
+        }
+      }
+    }
+
+    // Create a map of existing servers by name for updating
+    const existingByName = new Map(mcpServers.map((s) => [s.name, s]));
+    const processedNames = new Set<string>();
+
+    // Update or add servers
+    for (const [name, config] of Object.entries(serversObject)) {
+      const serverType = (config.type as ServerType) || 'stdio';
+
+      const serverData: Omit<MCPServerConfig, 'id'> = {
+        name,
+        type: serverType,
+        description: (config.description as string) || undefined,
+        enabled: config.enabled !== false,
+      };
+
+      if (serverType === 'stdio') {
+        serverData.command = config.command as string;
+        if (Array.isArray(config.args)) {
+          serverData.args = config.args as string[];
+        }
+        if (typeof config.env === 'object' && config.env !== null) {
+          serverData.env = config.env as Record<string, string>;
+        }
+      } else {
+        serverData.url = config.url as string;
+        if (typeof config.headers === 'object' && config.headers !== null) {
+          serverData.headers = config.headers as Record<string, string>;
+        }
+      }
+
+      const existing = existingByName.get(name);
+      if (existing) {
+        updateMCPServer(existing.id, serverData);
+      } else {
+        addMCPServer(serverData);
+      }
+      processedNames.add(name);
+    }
+
+    // Remove servers that are no longer in the JSON
+    for (const server of mcpServers) {
+      if (!processedNames.has(server.name)) {
+        removeMCPServer(server.id);
+      }
+    }
+
+    return true;
+  };
+
+  const handleSaveGlobalJsonEdit = async () => {
+    try {
+      const parsed = JSON.parse(globalJsonValue);
+
+      // Support both formats:
+      // 1. Array format (new, with IDs): { mcpServers: [...] } or [...]
+      // 2. Object format (legacy Claude Desktop): { mcpServers: {...} } or {...}
+      const servers = parsed.mcpServers || parsed;
+
+      let success: boolean;
+      if (Array.isArray(servers)) {
+        // Array format - supports ID matching for renames
+        success = await handleSaveGlobalJsonArray(servers);
+      } else if (typeof servers === 'object' && servers !== null) {
+        // Object format - legacy Claude Desktop compatibility
+        success = await handleSaveGlobalJsonObject(servers);
+      } else {
+        toast.error('Invalid format: expected array or object with server configurations');
+        return;
+      }
+
+      if (!success) {
+        return;
+      }
+
+      const syncSuccess = await syncSettingsToServer();
+      if (!syncSuccess) {
+        toast.error('Failed to save settings to disk');
+        return;
+      }
+      toast.success('MCP servers configuration updated');
+      setIsGlobalJsonEditOpen(false);
+      setGlobalJsonValue('');
+    } catch (error) {
+      toast.error('Invalid JSON: ' + (error instanceof Error ? error.message : 'Parse error'));
+    }
+  };
+
+  return {
+    // Store state
+    mcpServers,
+
+    // Dialog state
+    isAddDialogOpen,
+    setIsAddDialogOpen,
+    editingServer,
+    formData,
+    setFormData,
+    deleteConfirmId,
+    setDeleteConfirmId,
+    isImportDialogOpen,
+    setIsImportDialogOpen,
+    importJson,
+    setImportJson,
+    jsonEditServer,
+    setJsonEditServer,
+    jsonEditValue,
+    setJsonEditValue,
+    isGlobalJsonEditOpen,
+    setIsGlobalJsonEditOpen,
+    globalJsonValue,
+    setGlobalJsonValue,
+
+    // Security warning dialog state
+    isSecurityWarningOpen,
+    setIsSecurityWarningOpen,
+    pendingServerData,
+
+    // UI state
+    isRefreshing,
+    serverTestStates,
+    expandedServers,
+
+    // Computed
+    totalToolsCount,
+    showToolsWarning,
+
+    // Handlers
+    handleRefresh,
+    handleTestServer,
+    toggleServerExpanded,
+    handleOpenAddDialog,
+    handleOpenEditDialog,
+    handleCloseDialog,
+    handleSave,
+    handleToggleEnabled,
+    handleDelete,
+    handleImportJson,
+    handleExportJson,
+    handleOpenJsonEdit,
+    handleSaveJsonEdit,
+    handleOpenGlobalJsonEdit,
+    handleSaveGlobalJsonEdit,
+    handleSecurityWarningConfirm,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..abaff1a6a024d44fed37b4d29c89507d74971e44
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/index.ts
@@ -0,0 +1,2 @@
+export { MCPServersSection } from './mcp-servers-section';
+export { MCPToolsList, type MCPToolDisplay } from './mcp-tools-list';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/mcp-servers-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/mcp-servers-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5c06adbed1f59f983b4662007695b08284a1732e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/mcp-servers-section.tsx
@@ -0,0 +1,195 @@
+import { Plug } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useMCPServers } from './hooks';
+import { MCPServerHeader, MCPToolsWarning, MCPServerCard } from './components';
+import {
+  AddEditServerDialog,
+  DeleteServerDialog,
+  ImportJsonDialog,
+  JsonEditDialog,
+  GlobalJsonEditDialog,
+  SecurityWarningDialog,
+} from './dialogs';
+
+export function MCPServersSection() {
+  const {
+    // Store state
+    mcpServers,
+
+    // Dialog state
+    isAddDialogOpen,
+    setIsAddDialogOpen,
+    editingServer,
+    formData,
+    setFormData,
+    deleteConfirmId,
+    setDeleteConfirmId,
+    isImportDialogOpen,
+    setIsImportDialogOpen,
+    importJson,
+    setImportJson,
+    jsonEditServer,
+    setJsonEditServer,
+    jsonEditValue,
+    setJsonEditValue,
+    isGlobalJsonEditOpen,
+    setIsGlobalJsonEditOpen,
+    globalJsonValue,
+    setGlobalJsonValue,
+
+    // Security warning dialog state
+    isSecurityWarningOpen,
+    setIsSecurityWarningOpen,
+    pendingServerData,
+
+    // UI state
+    isRefreshing,
+    serverTestStates,
+    expandedServers,
+
+    // Computed
+    totalToolsCount,
+    showToolsWarning,
+
+    // Handlers
+    handleRefresh,
+    handleTestServer,
+    toggleServerExpanded,
+    handleOpenAddDialog,
+    handleOpenEditDialog,
+    handleCloseDialog,
+    handleSave,
+    handleToggleEnabled,
+    handleDelete,
+    handleImportJson,
+    handleExportJson,
+    handleOpenJsonEdit,
+    handleSaveJsonEdit,
+    handleOpenGlobalJsonEdit,
+    handleSaveGlobalJsonEdit,
+    handleSecurityWarningConfirm,
+  } = useMCPServers();
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-linear-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <MCPServerHeader
+        isRefreshing={isRefreshing}
+        hasServers={mcpServers.length > 0}
+        onRefresh={handleRefresh}
+        onExport={handleExportJson}
+        onEditAllJson={handleOpenGlobalJsonEdit}
+        onImport={() => setIsImportDialogOpen(true)}
+        onAdd={handleOpenAddDialog}
+      />
+
+      {showToolsWarning && <MCPToolsWarning totalTools={totalToolsCount} />}
+
+      <div className="p-6">
+        {mcpServers.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <Plug className="w-12 h-12 mx-auto mb-3 opacity-50" />
+            <p className="text-sm">No MCP servers configured</p>
+            <p className="text-xs mt-1">Add a server to extend agent capabilities</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {mcpServers.map((server) => (
+              <MCPServerCard
+                key={server.id}
+                server={server}
+                testState={serverTestStates[server.id]}
+                isExpanded={expandedServers.has(server.id)}
+                onToggleExpanded={() => toggleServerExpanded(server.id)}
+                onTest={() => handleTestServer(server)}
+                onToggleEnabled={() => handleToggleEnabled(server)}
+                onEditJson={() => handleOpenJsonEdit(server)}
+                onEdit={() => handleOpenEditDialog(server)}
+                onDelete={() => setDeleteConfirmId(server.id)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Dialogs */}
+      <AddEditServerDialog
+        open={isAddDialogOpen}
+        onOpenChange={setIsAddDialogOpen}
+        editingServer={editingServer}
+        formData={formData}
+        onFormDataChange={setFormData}
+        onSave={handleSave}
+        onCancel={handleCloseDialog}
+      />
+
+      <DeleteServerDialog
+        open={!!deleteConfirmId}
+        onOpenChange={(open) => setDeleteConfirmId(open ? deleteConfirmId : null)}
+        onConfirm={() => deleteConfirmId && handleDelete(deleteConfirmId)}
+      />
+
+      <ImportJsonDialog
+        open={isImportDialogOpen}
+        onOpenChange={setIsImportDialogOpen}
+        importJson={importJson}
+        onImportJsonChange={setImportJson}
+        onImport={handleImportJson}
+        onCancel={() => {
+          setIsImportDialogOpen(false);
+          setImportJson('');
+        }}
+      />
+
+      <JsonEditDialog
+        open={!!jsonEditServer}
+        onOpenChange={(open) => {
+          if (!open) {
+            setJsonEditServer(null);
+            setJsonEditValue('');
+          }
+        }}
+        server={jsonEditServer}
+        jsonValue={jsonEditValue}
+        onJsonValueChange={setJsonEditValue}
+        onSave={handleSaveJsonEdit}
+        onCancel={() => {
+          setJsonEditServer(null);
+          setJsonEditValue('');
+        }}
+      />
+
+      <GlobalJsonEditDialog
+        open={isGlobalJsonEditOpen}
+        onOpenChange={setIsGlobalJsonEditOpen}
+        jsonValue={globalJsonValue}
+        onJsonValueChange={setGlobalJsonValue}
+        onSave={handleSaveGlobalJsonEdit}
+        onCancel={() => {
+          setIsGlobalJsonEditOpen(false);
+          setGlobalJsonValue('');
+        }}
+      />
+
+      <SecurityWarningDialog
+        open={isSecurityWarningOpen}
+        onOpenChange={setIsSecurityWarningOpen}
+        onConfirm={handleSecurityWarningConfirm}
+        serverType={pendingServerData?.serverType || 'stdio'}
+        serverName={pendingServerData?.serverData?.name || ''}
+        command={pendingServerData?.command}
+        args={pendingServerData?.args}
+        url={pendingServerData?.url}
+        importCount={
+          pendingServerData?.type === 'import' ? pendingServerData.importServers?.length : undefined
+        }
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/mcp-tools-list.tsx b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/mcp-tools-list.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bec1f8088f28f15f6895388d19d3fb7b4b5fd70c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/mcp-tools-list.tsx
@@ -0,0 +1,117 @@
+import { useState } from 'react';
+import { ChevronDown, ChevronRight, Wrench } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+
+export interface MCPToolDisplay {
+  name: string;
+  description?: string;
+  inputSchema?: Record<string, unknown>;
+  enabled: boolean;
+}
+
+interface MCPToolsListProps {
+  tools: MCPToolDisplay[];
+  isLoading?: boolean;
+  error?: string;
+  className?: string;
+}
+
+export function MCPToolsList({ tools, isLoading, error, className }: MCPToolsListProps) {
+  const [expandedTools, setExpandedTools] = useState<Set<string>>(new Set());
+
+  const toggleTool = (toolName: string) => {
+    setExpandedTools((prev) => {
+      const next = new Set(prev);
+      if (next.has(toolName)) {
+        next.delete(toolName);
+      } else {
+        next.add(toolName);
+      }
+      return next;
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className={cn('text-sm text-muted-foreground animate-pulse', className)}>
+        Loading tools...
+      </div>
+    );
+  }
+
+  if (error) {
+    return <div className={cn('text-sm text-destructive wrap-break-word', className)}>{error}</div>;
+  }
+
+  if (!tools || tools.length === 0) {
+    return (
+      <div className={cn('text-sm text-muted-foreground italic', className)}>
+        No tools available
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-1 overflow-hidden', className)}>
+      {tools.map((tool) => {
+        const isExpanded = expandedTools.has(tool.name);
+        const hasSchema = tool.inputSchema && Object.keys(tool.inputSchema).length > 0;
+
+        return (
+          <Collapsible key={tool.name} open={isExpanded} onOpenChange={() => toggleTool(tool.name)}>
+            <div
+              className={cn(
+                'rounded-lg border border-border/30 bg-background/50 overflow-hidden',
+                'hover:border-border/50 transition-colors'
+              )}
+            >
+              <CollapsibleTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="w-full justify-start h-auto py-2 px-3 font-normal"
+                >
+                  <div className="flex items-start gap-2 w-full min-w-0 overflow-hidden">
+                    <div className="flex items-center gap-1.5 shrink-0 mt-0.5">
+                      {hasSchema ? (
+                        isExpanded ? (
+                          <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" />
+                        ) : (
+                          <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />
+                        )
+                      ) : (
+                        <div className="w-3.5" />
+                      )}
+                      <Wrench className="w-3.5 h-3.5 text-brand-500" />
+                    </div>
+                    <div className="flex flex-col items-start text-left min-w-0 overflow-hidden flex-1">
+                      <span className="font-medium text-xs truncate max-w-full">{tool.name}</span>
+                      {tool.description && (
+                        <span className="text-xs text-muted-foreground line-clamp-2 wrap-break-word w-full">
+                          {tool.description}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </Button>
+              </CollapsibleTrigger>
+              {hasSchema && (
+                <CollapsibleContent>
+                  <div className="px-3 pb-2 pt-0 overflow-hidden">
+                    <div className="bg-muted/50 rounded p-2 text-xs font-mono overflow-x-auto max-h-48">
+                      <pre className="whitespace-pre-wrap break-all text-[10px] leading-relaxed">
+                        {JSON.stringify(tool.inputSchema, null, 2)}
+                      </pre>
+                    </div>
+                  </div>
+                </CollapsibleContent>
+              )}
+            </div>
+          </Collapsible>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/types.ts b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35494eb11228ade34712b702e5c5b3ab864d686c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/types.ts
@@ -0,0 +1,32 @@
+import type { MCPToolDisplay } from './mcp-tools-list';
+
+export type ServerType = 'stdio' | 'sse' | 'http';
+
+export interface ServerFormData {
+  name: string;
+  description: string;
+  type: ServerType;
+  command: string;
+  args: string;
+  url: string;
+  headers: string; // JSON string for headers
+  env: string; // JSON string for env vars
+}
+
+export const defaultFormData: ServerFormData = {
+  name: '',
+  description: '',
+  type: 'stdio',
+  command: '',
+  args: '',
+  url: '',
+  headers: '',
+  env: '',
+};
+
+export interface ServerTestState {
+  status: 'idle' | 'testing' | 'success' | 'error';
+  tools?: MCPToolDisplay[];
+  error?: string;
+  connectionTime?: number;
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/utils.tsx b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/utils.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..836875562c29b7dd709ab6eca669fe5eb6fa0127
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/mcp-servers/utils.tsx
@@ -0,0 +1,52 @@
+import { Terminal, Globe, CheckCircle2, XCircle } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import type { ServerType, ServerTestState } from './types';
+import { SENSITIVE_PARAM_PATTERNS } from './constants';
+
+/**
+ * Mask sensitive values in URLs (query params with key-like names)
+ */
+export function maskSensitiveUrl(url: string): string {
+  try {
+    const urlObj = new URL(url);
+    const params = new URLSearchParams(urlObj.search);
+    let hasSensitive = false;
+
+    for (const [key] of params.entries()) {
+      if (SENSITIVE_PARAM_PATTERNS.some((pattern) => pattern.test(key))) {
+        params.set(key, '***');
+        hasSensitive = true;
+      }
+    }
+
+    if (hasSensitive) {
+      urlObj.search = params.toString();
+      return urlObj.toString();
+    }
+    return url;
+  } catch {
+    // If URL parsing fails, try simple regex replacement for common patterns
+    return url.replace(
+      /([?&])(api[-_]?key|auth|token|secret|password|credential)=([^&]*)/gi,
+      '$1$2=***'
+    );
+  }
+}
+
+export function getServerIcon(type: ServerType = 'stdio') {
+  if (type === 'stdio') return Terminal;
+  return Globe;
+}
+
+export function getTestStatusIcon(status: ServerTestState['status']) {
+  switch (status) {
+    case 'testing':
+      return <Spinner size="sm" />;
+    case 'success':
+      return <CheckCircle2 className="w-4 h-4 text-green-500" />;
+    case 'error':
+      return <XCircle className="w-4 h-4 text-destructive" />;
+    default:
+      return null;
+  }
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/model-defaults/bulk-replace-dialog.tsx b/temp_repo/apps/ui/src/components/views/settings-view/model-defaults/bulk-replace-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1288eaaaa6927ac21cdf459adfece00e9feddb7c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/model-defaults/bulk-replace-dialog.tsx
@@ -0,0 +1,398 @@
+import { useState, useMemo } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { ArrowRight, Cloud, Server, Check, AlertCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type {
+  PhaseModelKey,
+  PhaseModelEntry,
+  ClaudeCompatibleProvider,
+  ClaudeModelAlias,
+} from '@automaker/types';
+import { DEFAULT_PHASE_MODELS, DEFAULT_GLOBAL_SETTINGS } from '@automaker/types';
+
+interface BulkReplaceDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+// Phase display names for preview
+const PHASE_LABELS: Record<PhaseModelKey, string> = {
+  enhancementModel: 'Feature Enhancement',
+  fileDescriptionModel: 'File Descriptions',
+  imageDescriptionModel: 'Image Descriptions',
+  commitMessageModel: 'Commit Messages',
+  validationModel: 'GitHub Issue Validation',
+  specGenerationModel: 'App Specification',
+  featureGenerationModel: 'Feature Generation',
+  backlogPlanningModel: 'Backlog Planning',
+  projectAnalysisModel: 'Project Analysis',
+  ideationModel: 'Ideation',
+  memoryExtractionModel: 'Memory Extraction',
+  prDescriptionModel: 'PR Description',
+};
+
+const ALL_PHASES = Object.keys(PHASE_LABELS) as PhaseModelKey[];
+
+// Special key for default feature model (not a phase but included in bulk replace)
+const DEFAULT_FEATURE_MODEL_KEY = '__defaultFeatureModel__' as const;
+type ExtendedPhaseKey = PhaseModelKey | typeof DEFAULT_FEATURE_MODEL_KEY;
+
+// Claude model display names
+const CLAUDE_MODEL_DISPLAY: Record<ClaudeModelAlias, string> = {
+  haiku: 'Claude Haiku',
+  sonnet: 'Claude Sonnet',
+  opus: 'Claude Opus',
+};
+
+export function BulkReplaceDialog({ open, onOpenChange }: BulkReplaceDialogProps) {
+  const {
+    phaseModels,
+    setPhaseModel,
+    claudeCompatibleProviders,
+    defaultFeatureModel,
+    setDefaultFeatureModel,
+  } = useAppStore();
+  const [selectedProvider, setSelectedProvider] = useState<string>('anthropic');
+
+  // Get enabled providers
+  const enabledProviders = useMemo(() => {
+    return (claudeCompatibleProviders || []).filter((p) => p.enabled !== false);
+  }, [claudeCompatibleProviders]);
+
+  // Build provider options for the dropdown
+  const providerOptions = useMemo(() => {
+    const options: Array<{ id: string; name: string; isNative: boolean }> = [
+      { id: 'anthropic', name: 'Anthropic Direct', isNative: true },
+    ];
+
+    enabledProviders.forEach((provider) => {
+      options.push({
+        id: provider.id,
+        name: provider.name,
+        isNative: false,
+      });
+    });
+
+    return options;
+  }, [enabledProviders]);
+
+  // Get the selected provider config (if custom)
+  const selectedProviderConfig = useMemo(() => {
+    if (selectedProvider === 'anthropic') return null;
+    return enabledProviders.find((p) => p.id === selectedProvider);
+  }, [selectedProvider, enabledProviders]);
+
+  // Get the Claude model alias from a PhaseModelEntry
+  const getClaudeModelAlias = (entry: PhaseModelEntry): ClaudeModelAlias => {
+    // Check if model string directly matches a Claude alias
+    if (entry.model === 'haiku' || entry.model === 'claude-haiku') return 'haiku';
+    if (entry.model === 'sonnet' || entry.model === 'claude-sonnet') return 'sonnet';
+    if (entry.model === 'opus' || entry.model === 'claude-opus') return 'opus';
+
+    // If it's a provider model, look up the mapping
+    if (entry.providerId) {
+      const provider = enabledProviders.find((p) => p.id === entry.providerId);
+      if (provider) {
+        const model = provider.models?.find((m) => m.id === entry.model);
+        if (model?.mapsToClaudeModel) {
+          return model.mapsToClaudeModel;
+        }
+      }
+    }
+
+    // Default to sonnet
+    return 'sonnet';
+  };
+
+  // Find the model from provider that maps to a specific Claude model
+  const findModelForClaudeAlias = (
+    provider: ClaudeCompatibleProvider | null,
+    claudeAlias: ClaudeModelAlias,
+    key: ExtendedPhaseKey
+  ): PhaseModelEntry => {
+    if (!provider) {
+      // Anthropic Direct - reset to default phase model (includes correct thinking levels)
+      // For default feature model, use the default from global settings
+      if (key === DEFAULT_FEATURE_MODEL_KEY) {
+        return DEFAULT_GLOBAL_SETTINGS.defaultFeatureModel;
+      }
+      return DEFAULT_PHASE_MODELS[key];
+    }
+
+    // Find model that maps to this Claude alias
+    const models = provider.models || [];
+    const match = models.find((m) => m.mapsToClaudeModel === claudeAlias);
+
+    if (match) {
+      return { providerId: provider.id, model: match.id };
+    }
+
+    // Fallback: use first model if no match
+    if (models.length > 0) {
+      return { providerId: provider.id, model: models[0].id };
+    }
+
+    // Ultimate fallback to native Claude model
+    return { model: claudeAlias };
+  };
+
+  // Helper to generate preview item for any entry
+  const generatePreviewItem = (
+    key: ExtendedPhaseKey,
+    label: string,
+    currentEntry: PhaseModelEntry
+  ) => {
+    const claudeAlias = getClaudeModelAlias(currentEntry);
+    const newEntry = findModelForClaudeAlias(selectedProviderConfig ?? null, claudeAlias, key);
+
+    // Get display names
+    const getCurrentDisplay = (): string => {
+      if (currentEntry.providerId) {
+        const provider = enabledProviders.find((p) => p.id === currentEntry.providerId);
+        if (provider) {
+          const model = provider.models?.find((m) => m.id === currentEntry.model);
+          return model?.displayName || currentEntry.model;
+        }
+      }
+      return CLAUDE_MODEL_DISPLAY[claudeAlias] || currentEntry.model;
+    };
+
+    const getNewDisplay = (): string => {
+      if (newEntry.providerId && selectedProviderConfig) {
+        const model = selectedProviderConfig.models?.find((m) => m.id === newEntry.model);
+        return model?.displayName || newEntry.model;
+      }
+      return CLAUDE_MODEL_DISPLAY[newEntry.model as ClaudeModelAlias] || newEntry.model;
+    };
+
+    const isChanged =
+      currentEntry.model !== newEntry.model ||
+      currentEntry.providerId !== newEntry.providerId ||
+      currentEntry.thinkingLevel !== newEntry.thinkingLevel;
+
+    return {
+      key,
+      label,
+      claudeAlias,
+      currentDisplay: getCurrentDisplay(),
+      newDisplay: getNewDisplay(),
+      newEntry,
+      isChanged,
+    };
+  };
+
+  // Generate preview of changes
+  const preview = useMemo(() => {
+    // Default feature model entry (first in the list)
+    const defaultFeatureModelEntry =
+      defaultFeatureModel ?? DEFAULT_GLOBAL_SETTINGS.defaultFeatureModel;
+    const defaultFeaturePreview = generatePreviewItem(
+      DEFAULT_FEATURE_MODEL_KEY,
+      'Default Feature Model',
+      defaultFeatureModelEntry
+    );
+
+    // Phase model entries
+    const phasePreview = ALL_PHASES.map((phase) => {
+      const currentEntry = phaseModels[phase] ?? DEFAULT_PHASE_MODELS[phase];
+      return generatePreviewItem(phase, PHASE_LABELS[phase], currentEntry);
+    });
+
+    return [defaultFeaturePreview, ...phasePreview];
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- generatePreviewItem depends on enabledProviders and selectedProviderConfig, which are already in deps
+  }, [
+    phaseModels,
+    selectedProviderConfig,
+    enabledProviders,
+    defaultFeatureModel,
+    generatePreviewItem,
+  ]);
+
+  // Count how many will change
+  const changeCount = preview.filter((p) => p.isChanged).length;
+
+  // Apply the bulk replace
+  const handleApply = () => {
+    preview.forEach(({ key, newEntry, isChanged }) => {
+      if (isChanged) {
+        if (key === DEFAULT_FEATURE_MODEL_KEY) {
+          setDefaultFeatureModel(newEntry);
+        } else {
+          setPhaseModel(key as PhaseModelKey, newEntry);
+        }
+      }
+    });
+    onOpenChange(false);
+  };
+
+  // Check if provider has all 3 Claude model mappings
+  const providerModelCoverage = useMemo(() => {
+    if (selectedProvider === 'anthropic') {
+      return { hasHaiku: true, hasSonnet: true, hasOpus: true, complete: true };
+    }
+    if (!selectedProviderConfig) {
+      return { hasHaiku: false, hasSonnet: false, hasOpus: false, complete: false };
+    }
+    const models = selectedProviderConfig.models || [];
+    const hasHaiku = models.some((m) => m.mapsToClaudeModel === 'haiku');
+    const hasSonnet = models.some((m) => m.mapsToClaudeModel === 'sonnet');
+    const hasOpus = models.some((m) => m.mapsToClaudeModel === 'opus');
+    return { hasHaiku, hasSonnet, hasOpus, complete: hasHaiku && hasSonnet && hasOpus };
+  }, [selectedProvider, selectedProviderConfig]);
+
+  const providerHasModels =
+    selectedProvider === 'anthropic' ||
+    (selectedProviderConfig && selectedProviderConfig.models?.length > 0);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[calc(100%-2rem)] sm:max-w-2xl max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Bulk Replace Models</DialogTitle>
+          <DialogDescription>
+            Switch all phase models to equivalents from a specific provider. Models are matched by
+            their Claude model mapping (Haiku, Sonnet, Opus).
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4">
+          {/* Provider selector */}
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Target Provider</label>
+            <Select value={selectedProvider} onValueChange={setSelectedProvider}>
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select provider" />
+              </SelectTrigger>
+              <SelectContent>
+                {providerOptions.map((option) => (
+                  <SelectItem key={option.id} value={option.id}>
+                    <div className="flex items-center gap-2">
+                      {option.isNative ? (
+                        <Cloud className="w-4 h-4 text-brand-500" />
+                      ) : (
+                        <Server className="w-4 h-4 text-muted-foreground" />
+                      )}
+                      <span>{option.name}</span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Warning if provider has no models */}
+          {!providerHasModels && (
+            <div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20 text-sm">
+              <div className="flex items-center gap-2 text-yellow-600 dark:text-yellow-400">
+                <AlertCircle className="w-4 h-4" />
+                <span>This provider has no models configured.</span>
+              </div>
+            </div>
+          )}
+
+          {/* Warning if provider doesn't have all 3 mappings */}
+          {providerHasModels && !providerModelCoverage.complete && (
+            <div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20 text-sm">
+              <div className="flex items-center gap-2 text-yellow-600 dark:text-yellow-400">
+                <AlertCircle className="w-4 h-4" />
+                <span>
+                  This provider is missing mappings for:{' '}
+                  {[
+                    !providerModelCoverage.hasHaiku && 'Haiku',
+                    !providerModelCoverage.hasSonnet && 'Sonnet',
+                    !providerModelCoverage.hasOpus && 'Opus',
+                  ]
+                    .filter(Boolean)
+                    .join(', ')}
+                </span>
+              </div>
+            </div>
+          )}
+
+          {/* Preview of changes */}
+          {providerHasModels && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <label className="text-sm font-medium">Preview Changes</label>
+                <span className="text-xs text-muted-foreground">
+                  {changeCount} of {preview.length} will change
+                </span>
+              </div>
+              <div className="border rounded-lg overflow-hidden max-h-[300px] overflow-y-auto">
+                <table className="w-full text-sm">
+                  <thead className="bg-muted/50 sticky top-0">
+                    <tr>
+                      <th className="text-left p-2 font-medium text-muted-foreground">Phase</th>
+                      <th className="text-left p-2 font-medium text-muted-foreground">Current</th>
+                      <th className="p-2"></th>
+                      <th className="text-left p-2 font-medium text-muted-foreground">New</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {preview.map(({ key, label, currentDisplay, newDisplay, isChanged }) => (
+                      <tr
+                        key={key}
+                        className={cn(
+                          'border-t border-border/50',
+                          isChanged ? 'bg-brand-500/5' : 'opacity-50',
+                          key === DEFAULT_FEATURE_MODEL_KEY && 'bg-accent/30'
+                        )}
+                      >
+                        <td className="p-2 font-medium">
+                          {label}
+                          {key === DEFAULT_FEATURE_MODEL_KEY && (
+                            <span className="ml-2 text-[10px] px-1.5 py-0.5 rounded bg-brand-500/20 text-brand-500">
+                              Feature Default
+                            </span>
+                          )}
+                        </td>
+                        <td className="p-2 text-muted-foreground">{currentDisplay}</td>
+                        <td className="p-2 text-center">
+                          {isChanged ? (
+                            <ArrowRight className="w-4 h-4 text-brand-500 inline" />
+                          ) : (
+                            <Check className="w-4 h-4 text-green-500 inline" />
+                          )}
+                        </td>
+                        <td className="p-2">
+                          <span className={cn(isChanged && 'text-brand-500 font-medium')}>
+                            {newDisplay}
+                          </span>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleApply} disabled={!providerHasModels || changeCount === 0}>
+            Apply Changes ({changeCount})
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/model-defaults/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/model-defaults/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d60f3e75ad9d0e0b4e869e800fa4435c89d5d89d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/model-defaults/index.ts
@@ -0,0 +1,2 @@
+export { ModelDefaultsSection } from './model-defaults-section';
+export { PhaseModelSelector } from './phase-model-selector';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/model-defaults/model-defaults-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/model-defaults/model-defaults-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..322c232abfa4156f233f96809ad555e5e64de1e7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/model-defaults/model-defaults-section.tsx
@@ -0,0 +1,359 @@
+import { useState } from 'react';
+import { Workflow, RotateCcw, Replace, Brain } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import { Button } from '@/components/ui/button';
+import { PhaseModelSelector } from './phase-model-selector';
+import { BulkReplaceDialog } from './bulk-replace-dialog';
+import type { PhaseModelKey, PhaseModelEntry, ThinkingLevel } from '@automaker/types';
+import {
+  DEFAULT_PHASE_MODELS,
+  DEFAULT_GLOBAL_SETTINGS,
+  REASONING_EFFORT_LEVELS,
+} from '@automaker/types';
+
+interface PhaseConfig {
+  key: PhaseModelKey;
+  label: string;
+  description: string;
+}
+
+const QUICK_TASKS: PhaseConfig[] = [
+  {
+    key: 'enhancementModel',
+    label: 'Feature Enhancement',
+    description: 'Improves feature names and descriptions',
+  },
+  {
+    key: 'fileDescriptionModel',
+    label: 'File Descriptions',
+    description: 'Generates descriptions for context files',
+  },
+  {
+    key: 'imageDescriptionModel',
+    label: 'Image Descriptions',
+    description: 'Analyzes and describes context images',
+  },
+  {
+    key: 'commitMessageModel',
+    label: 'Commit Messages',
+    description: 'Generates git commit messages from diffs',
+  },
+];
+
+const VALIDATION_TASKS: PhaseConfig[] = [
+  {
+    key: 'validationModel',
+    label: 'GitHub Issue Validation',
+    description: 'Validates and improves GitHub issues',
+  },
+];
+
+const GENERATION_TASKS: PhaseConfig[] = [
+  {
+    key: 'specGenerationModel',
+    label: 'App Specification',
+    description: 'Generates full application specifications',
+  },
+  {
+    key: 'featureGenerationModel',
+    label: 'Feature Generation',
+    description: 'Creates features from specifications',
+  },
+  {
+    key: 'backlogPlanningModel',
+    label: 'Backlog Planning',
+    description: 'Reorganizes and prioritizes backlog',
+  },
+  {
+    key: 'projectAnalysisModel',
+    label: 'Project Analysis',
+    description: 'Analyzes project structure for suggestions',
+  },
+  {
+    key: 'ideationModel',
+    label: 'Ideation',
+    description: 'Model for ideation view (generating AI suggestions)',
+  },
+];
+
+const MEMORY_TASKS: PhaseConfig[] = [
+  {
+    key: 'memoryExtractionModel',
+    label: 'Memory Extraction',
+    description: 'Extracts learnings from completed agent sessions',
+  },
+];
+
+function PhaseGroup({
+  title,
+  subtitle,
+  phases,
+}: {
+  title: string;
+  subtitle: string;
+  phases: PhaseConfig[];
+}) {
+  const { phaseModels, setPhaseModel } = useAppStore();
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium text-foreground">{title}</h3>
+        <p className="text-xs text-muted-foreground">{subtitle}</p>
+      </div>
+      <div className="space-y-3">
+        {phases.map((phase) => (
+          <PhaseModelSelector
+            key={phase.key}
+            label={phase.label}
+            description={phase.description}
+            value={phaseModels[phase.key] ?? DEFAULT_PHASE_MODELS[phase.key]}
+            onChange={(model) => setPhaseModel(phase.key, model)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Default model for new feature cards section.
+ * This is separate from phase models but logically belongs with model configuration.
+ */
+function FeatureDefaultModelSection() {
+  const { defaultFeatureModel, setDefaultFeatureModel } = useAppStore();
+  const defaultValue: PhaseModelEntry =
+    defaultFeatureModel ?? DEFAULT_GLOBAL_SETTINGS.defaultFeatureModel;
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium text-foreground">Feature Defaults</h3>
+        <p className="text-xs text-muted-foreground">
+          Default model for new feature cards when created
+        </p>
+      </div>
+      <div className="space-y-3">
+        <PhaseModelSelector
+          label="Default Feature Model"
+          description="Model and thinking level used when creating new feature cards"
+          value={defaultValue}
+          onChange={setDefaultFeatureModel}
+          align="end"
+        />
+      </div>
+    </div>
+  );
+}
+
+// Thinking level options with descriptions for the settings UI
+const THINKING_LEVEL_OPTIONS: { id: ThinkingLevel; label: string; description: string }[] = [
+  { id: 'none', label: 'None', description: 'No extended thinking' },
+  { id: 'low', label: 'Low', description: 'Light reasoning (1k tokens)' },
+  { id: 'medium', label: 'Medium', description: 'Moderate reasoning (10k tokens)' },
+  { id: 'high', label: 'High', description: 'Deep reasoning (16k tokens)' },
+  { id: 'ultrathink', label: 'Ultra', description: 'Maximum reasoning (32k tokens)' },
+  { id: 'adaptive', label: 'Adaptive', description: 'Model decides reasoning depth' },
+];
+
+/**
+ * Default thinking level / reasoning effort section.
+ * These defaults are applied when selecting a model via the primary button
+ * in the two-stage model selector (i.e. clicking the model name directly).
+ */
+function DefaultThinkingLevelSection() {
+  const {
+    defaultThinkingLevel,
+    setDefaultThinkingLevel,
+    defaultReasoningEffort,
+    setDefaultReasoningEffort,
+  } = useAppStore();
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium text-foreground">Quick-Select Defaults</h3>
+        <p className="text-xs text-muted-foreground">
+          Thinking/reasoning level applied when quick-selecting a model from the dropdown. You can
+          always fine-tune per model via the expand arrow.
+        </p>
+      </div>
+      <div className="space-y-3">
+        {/* Default Thinking Level (Claude models) */}
+        <div
+          className={cn(
+            'flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-4 rounded-xl',
+            'bg-accent/20 border border-border/30',
+            'hover:bg-accent/30 transition-colors'
+          )}
+        >
+          <div className="flex items-center gap-3 flex-1">
+            <div className="w-8 h-8 rounded-lg bg-purple-500/10 flex items-center justify-center shrink-0">
+              <Brain className="w-4 h-4 text-purple-500" />
+            </div>
+            <div className="min-w-0">
+              <h4 className="text-sm font-medium text-foreground">Default Thinking Level</h4>
+              <p className="text-xs text-muted-foreground truncate">
+                Applied to Claude models when quick-selected
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-1 flex-wrap justify-start sm:justify-end">
+            {THINKING_LEVEL_OPTIONS.map((option) => (
+              <button
+                key={option.id}
+                onClick={() => setDefaultThinkingLevel(option.id)}
+                className={cn(
+                  'px-2 py-1 sm:px-2.5 sm:py-1.5 rounded-lg text-xs font-medium transition-all',
+                  'border whitespace-nowrap',
+                  defaultThinkingLevel === option.id
+                    ? 'bg-primary text-primary-foreground border-primary shadow-sm'
+                    : 'bg-background border-border/50 text-muted-foreground hover:bg-accent hover:text-foreground'
+                )}
+                title={option.description}
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Default Reasoning Effort (Codex models) */}
+        <div
+          className={cn(
+            'flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-4 rounded-xl',
+            'bg-accent/20 border border-border/30',
+            'hover:bg-accent/30 transition-colors'
+          )}
+        >
+          <div className="flex items-center gap-3 flex-1">
+            <div className="w-8 h-8 rounded-lg bg-blue-500/10 flex items-center justify-center shrink-0">
+              <Brain className="w-4 h-4 text-blue-500" />
+            </div>
+            <div className="min-w-0">
+              <h4 className="text-sm font-medium text-foreground">Default Reasoning Effort</h4>
+              <p className="text-xs text-muted-foreground truncate">
+                Applied to Codex/OpenAI models when quick-selected
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-1 flex-wrap justify-start sm:justify-end">
+            {REASONING_EFFORT_LEVELS.map((option) => (
+              <button
+                key={option.id}
+                onClick={() => setDefaultReasoningEffort(option.id)}
+                className={cn(
+                  'px-2 py-1 sm:px-2.5 sm:py-1.5 rounded-lg text-xs font-medium transition-all',
+                  'border whitespace-nowrap',
+                  defaultReasoningEffort === option.id
+                    ? 'bg-primary text-primary-foreground border-primary shadow-sm'
+                    : 'bg-background border-border/50 text-muted-foreground hover:bg-accent hover:text-foreground'
+                )}
+                title={option.description}
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ModelDefaultsSection() {
+  const { resetPhaseModels, claudeCompatibleProviders } = useAppStore();
+  const [showBulkReplace, setShowBulkReplace] = useState(false);
+
+  // Check if there are any enabled ClaudeCompatibleProviders
+  const hasEnabledProviders =
+    claudeCompatibleProviders && claudeCompatibleProviders.some((p) => p.enabled !== false);
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      {/* Header */}
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <Workflow className="w-5 h-5 text-brand-500" />
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold text-foreground tracking-tight">
+                Model Defaults
+              </h2>
+              <p className="text-sm text-muted-foreground/80">
+                Configure which AI model to use for each application task
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            {hasEnabledProviders && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowBulkReplace(true)}
+                className="gap-2"
+              >
+                <Replace className="w-3.5 h-3.5" />
+                Bulk Replace
+              </Button>
+            )}
+            <Button variant="outline" size="sm" onClick={resetPhaseModels} className="gap-2">
+              <RotateCcw className="w-3.5 h-3.5" />
+              Reset to Defaults
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Bulk Replace Dialog */}
+      <BulkReplaceDialog open={showBulkReplace} onOpenChange={setShowBulkReplace} />
+
+      {/* Content */}
+      <div className="p-6 space-y-8">
+        {/* Feature Defaults */}
+        <FeatureDefaultModelSection />
+
+        {/* Default Thinking Level / Reasoning Effort */}
+        <DefaultThinkingLevelSection />
+
+        {/* Quick Tasks */}
+        <PhaseGroup
+          title="Quick Tasks"
+          subtitle="Fast models recommended for speed and cost savings"
+          phases={QUICK_TASKS}
+        />
+
+        {/* Validation Tasks */}
+        <PhaseGroup
+          title="Validation Tasks"
+          subtitle="Smart models recommended for accuracy"
+          phases={VALIDATION_TASKS}
+        />
+
+        {/* Generation Tasks */}
+        <PhaseGroup
+          title="Generation Tasks"
+          subtitle="Powerful models recommended for quality output"
+          phases={GENERATION_TASKS}
+        />
+
+        {/* Memory Tasks */}
+        <PhaseGroup
+          title="Memory Tasks"
+          subtitle="Fast models recommended for learning extraction"
+          phases={MEMORY_TASKS}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx b/temp_repo/apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f59f66655dceba55ebb083bfb0cb47103109af59
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/model-defaults/phase-model-selector.tsx
@@ -0,0 +1,2494 @@
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import { useShallow } from 'zustand/react/shallow';
+import { useIsMobile } from '@/hooks/use-media-query';
+import { useOpencodeModels } from '@/hooks/queries';
+import type {
+  ModelAlias,
+  CursorModelId,
+  CodexModelId,
+  OpencodeModelId,
+  GeminiModelId,
+  CopilotModelId,
+  GroupedModel,
+  PhaseModelEntry,
+  ClaudeCompatibleProvider,
+  ProviderModel,
+  ClaudeModelAlias,
+} from '@automaker/types';
+import {
+  STANDALONE_CURSOR_MODELS,
+  getModelGroup,
+  isGroupSelected,
+  getSelectedVariant,
+  codexModelHasThinking,
+  getThinkingLevelsForModel,
+} from '@automaker/types';
+import {
+  CLAUDE_MODELS,
+  CURSOR_MODELS,
+  OPENCODE_MODELS,
+  GEMINI_MODELS,
+  COPILOT_MODELS,
+  THINKING_LEVEL_LABELS,
+  REASONING_EFFORT_LEVELS,
+  REASONING_EFFORT_LABELS,
+  type ModelOption,
+} from '@/components/views/board-view/shared/model-constants';
+import { Check, ChevronsUpDown, Star, ChevronRight, ChevronDown } from 'lucide-react';
+import {
+  AnthropicIcon,
+  CursorIcon,
+  OpenAIIcon,
+  OpenRouterIcon,
+  GlmIcon,
+  MiniMaxIcon,
+  GeminiIcon,
+  CopilotIcon,
+  getProviderIconForModel,
+} from '@/components/ui/provider-icon';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+
+const OPENCODE_CLI_GROUP_LABEL = 'OpenCode CLI';
+const OPENCODE_PROVIDER_FALLBACK = 'opencode';
+const OPENCODE_PROVIDER_WORD_SEPARATOR = '-';
+const OPENCODE_MODEL_ID_SEPARATOR = '/';
+const OPENCODE_SECTION_GROUP_PADDING = 'pt-2';
+
+const OPENCODE_STATIC_PROVIDER_LABELS: Record<string, string> = {
+  [OPENCODE_PROVIDER_FALLBACK]: 'OpenCode (Free)',
+};
+
+const OPENCODE_DYNAMIC_PROVIDER_LABELS: Record<string, string> = {
+  'github-copilot': 'GitHub Copilot',
+  'zai-coding-plan': 'Z.AI Coding Plan',
+  google: 'Google AI',
+  openai: 'OpenAI',
+  openrouter: 'OpenRouter',
+  anthropic: 'Anthropic',
+  xai: 'xAI',
+  deepseek: 'DeepSeek',
+  ollama: 'Ollama (Local)',
+  lmstudio: 'LM Studio (Local)',
+  azure: 'Azure OpenAI',
+  [OPENCODE_PROVIDER_FALLBACK]: 'OpenCode (Free)',
+};
+
+const OPENCODE_DYNAMIC_PROVIDER_ORDER = [
+  'github-copilot',
+  'google',
+  'openai',
+  'openrouter',
+  'anthropic',
+  'xai',
+  'deepseek',
+  'ollama',
+  'lmstudio',
+  'azure',
+  'zai-coding-plan',
+];
+
+const OPENCODE_SECTION_ORDER = ['free', 'dynamic'] as const;
+
+const OPENCODE_SECTION_LABELS: Record<(typeof OPENCODE_SECTION_ORDER)[number], string> = {
+  free: 'Free Tier',
+  dynamic: 'Connected Providers',
+};
+
+const OPENCODE_STATIC_PROVIDER_BY_ID = new Map(
+  OPENCODE_MODELS.map((model) => [model.id, model.provider])
+);
+
+function formatProviderLabel(providerKey: string): string {
+  return providerKey
+    .split(OPENCODE_PROVIDER_WORD_SEPARATOR)
+    .map((word) => (word ? word[0].toUpperCase() + word.slice(1) : word))
+    .join(' ');
+}
+
+function getOpencodeSectionKey(providerKey: string): (typeof OPENCODE_SECTION_ORDER)[number] {
+  if (providerKey === OPENCODE_PROVIDER_FALLBACK) {
+    return 'free';
+  }
+  return 'dynamic';
+}
+
+function getOpencodeGroupLabel(
+  providerKey: string,
+  sectionKey: (typeof OPENCODE_SECTION_ORDER)[number]
+): string {
+  if (sectionKey === 'free') {
+    return OPENCODE_STATIC_PROVIDER_LABELS[providerKey] || 'OpenCode Free Tier';
+  }
+  return OPENCODE_DYNAMIC_PROVIDER_LABELS[providerKey] || formatProviderLabel(providerKey);
+}
+
+interface PhaseModelSelectorProps {
+  /** Label shown in full mode */
+  label?: string;
+  /** Description shown in full mode */
+  description?: string;
+  /** Current model selection */
+  value: PhaseModelEntry;
+  /** Callback when model is selected */
+  onChange: (entry: PhaseModelEntry) => void;
+  /** Compact mode - just shows the button trigger without label/description wrapper */
+  compact?: boolean;
+  /** Custom trigger class name */
+  triggerClassName?: string;
+  /** Popover alignment */
+  align?: 'start' | 'end';
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+export function PhaseModelSelector({
+  label,
+  description,
+  value,
+  onChange,
+  compact = false,
+  triggerClassName,
+  align = 'end',
+  disabled = false,
+}: PhaseModelSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const [expandedGroup, setExpandedGroup] = useState<string | null>(null);
+  const [expandedClaudeModel, setExpandedClaudeModel] = useState<ModelAlias | null>(null);
+  const [expandedCodexModel, setExpandedCodexModel] = useState<CodexModelId | null>(null);
+  const [expandedProviderModel, setExpandedProviderModel] = useState<string | null>(null); // Format: providerId:modelId
+  const commandListRef = useRef<HTMLDivElement>(null);
+  const expandedTriggerRef = useRef<HTMLDivElement>(null);
+  const expandedClaudeTriggerRef = useRef<HTMLDivElement>(null);
+  const expandedCodexTriggerRef = useRef<HTMLDivElement>(null);
+  const expandedProviderTriggerRef = useRef<HTMLDivElement>(null);
+  const {
+    enabledCursorModels,
+    enabledGeminiModels,
+    enabledCopilotModels,
+    enabledOpencodeModels,
+    favoriteModels,
+    toggleFavoriteModel,
+    codexModels,
+    codexModelsLoading,
+    fetchCodexModels,
+    enabledDynamicModelIds,
+    disabledProviders,
+    claudeCompatibleProviders,
+    defaultThinkingLevel: storeDefaultThinkingLevel,
+    defaultReasoningEffort: storeDefaultReasoningEffort,
+  } = useAppStore(
+    useShallow((state) => ({
+      enabledCursorModels: state.enabledCursorModels,
+      enabledGeminiModels: state.enabledGeminiModels,
+      enabledCopilotModels: state.enabledCopilotModels,
+      enabledOpencodeModels: state.enabledOpencodeModels,
+      favoriteModels: state.favoriteModels,
+      toggleFavoriteModel: state.toggleFavoriteModel,
+      codexModels: state.codexModels,
+      codexModelsLoading: state.codexModelsLoading,
+      fetchCodexModels: state.fetchCodexModels,
+      enabledDynamicModelIds: state.enabledDynamicModelIds,
+      disabledProviders: state.disabledProviders,
+      claudeCompatibleProviders: state.claudeCompatibleProviders,
+      defaultThinkingLevel: state.defaultThinkingLevel,
+      defaultReasoningEffort: state.defaultReasoningEffort,
+    }))
+  );
+
+  // Use React Query for OpenCode models so that changes made in the settings tab
+  // (which also uses React Query) are immediately reflected here via the shared cache,
+  // without requiring a page refresh.
+  const { data: dynamicOpencodeModels = [] } = useOpencodeModels();
+
+  // Detect mobile devices to use inline expansion instead of nested popovers
+  const isMobile = useIsMobile();
+
+  // Extract model, provider, and thinking/reasoning levels from value
+  const selectedModel = value.model;
+  const selectedProviderId = value.providerId;
+  const selectedThinkingLevel = value.thinkingLevel || 'none';
+  const selectedReasoningEffort = value.reasoningEffort || 'none';
+
+  // Get enabled providers and their models
+  const enabledProviders = useMemo(() => {
+    return (claudeCompatibleProviders || []).filter((p) => p.enabled !== false);
+  }, [claudeCompatibleProviders]);
+
+  // Fetch Codex models on mount
+  useEffect(() => {
+    if (codexModels.length === 0 && !codexModelsLoading) {
+      fetchCodexModels().catch(() => {
+        // Silently fail - user will see empty Codex section
+      });
+    }
+  }, [codexModels.length, codexModelsLoading, fetchCodexModels]);
+
+  // OpenCode dynamic models are now fetched via React Query (useOpencodeModels above),
+  // which shares a cache with the settings tab. This ensures that newly enabled models
+  // appear in the selector immediately after the settings tab fetches/invalidates the data.
+
+  // Close expanded group when trigger scrolls out of view
+  useEffect(() => {
+    const triggerElement = expandedTriggerRef.current;
+    const listElement = commandListRef.current;
+    if (!triggerElement || !listElement || !expandedGroup) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry.isIntersecting) {
+          setExpandedGroup(null);
+        }
+      },
+      {
+        root: listElement,
+        threshold: 0.1, // Close when less than 10% visible
+      }
+    );
+
+    observer.observe(triggerElement);
+    return () => observer.disconnect();
+  }, [expandedGroup]);
+
+  // Close expanded Claude model popover when trigger scrolls out of view
+  useEffect(() => {
+    const triggerElement = expandedClaudeTriggerRef.current;
+    const listElement = commandListRef.current;
+    if (!triggerElement || !listElement || !expandedClaudeModel) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry.isIntersecting) {
+          setExpandedClaudeModel(null);
+        }
+      },
+      {
+        root: listElement,
+        threshold: 0.1,
+      }
+    );
+
+    observer.observe(triggerElement);
+    return () => observer.disconnect();
+  }, [expandedClaudeModel]);
+
+  // Close expanded Codex model popover when trigger scrolls out of view
+  useEffect(() => {
+    const triggerElement = expandedCodexTriggerRef.current;
+    const listElement = commandListRef.current;
+    if (!triggerElement || !listElement || !expandedCodexModel) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry.isIntersecting) {
+          setExpandedCodexModel(null);
+        }
+      },
+      {
+        root: listElement,
+        threshold: 0.1,
+      }
+    );
+
+    observer.observe(triggerElement);
+    return () => observer.disconnect();
+  }, [expandedCodexModel]);
+
+  // Close expanded provider model popover when trigger scrolls out of view
+  useEffect(() => {
+    const triggerElement = expandedProviderTriggerRef.current;
+    const listElement = commandListRef.current;
+    if (!triggerElement || !listElement || !expandedProviderModel) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry.isIntersecting) {
+          setExpandedProviderModel(null);
+        }
+      },
+      {
+        root: listElement,
+        threshold: 0.1,
+      }
+    );
+
+    observer.observe(triggerElement);
+    return () => observer.disconnect();
+  }, [expandedProviderModel]);
+
+  // Transform dynamic Codex models from store to component format
+  const transformedCodexModels = useMemo(() => {
+    return codexModels.map((model) => ({
+      id: model.id,
+      label: model.label,
+      description: model.description,
+      provider: 'codex' as const,
+      badge: model.tier === 'premium' ? 'Premium' : model.tier === 'basic' ? 'Speed' : undefined,
+    }));
+  }, [codexModels]);
+
+  // Filter Cursor models to only show enabled ones
+  // With canonical IDs, both CURSOR_MODELS and enabledCursorModels use prefixed format
+  const availableCursorModels = CURSOR_MODELS.filter((model) => {
+    return enabledCursorModels.includes(model.id as CursorModelId);
+  });
+
+  // Filter Gemini models to only show enabled ones
+  const availableGeminiModels = GEMINI_MODELS.filter((model) => {
+    return enabledGeminiModels.includes(model.id as GeminiModelId);
+  });
+
+  // Filter Copilot models to only show enabled ones
+  const availableCopilotModels = COPILOT_MODELS.filter((model) => {
+    return enabledCopilotModels.includes(model.id as CopilotModelId);
+  });
+
+  // Helper to find current selected model details
+  const currentModel = useMemo(() => {
+    const claudeModel = CLAUDE_MODELS.find((m) => m.id === selectedModel);
+    if (claudeModel) {
+      // Add thinking level to label if not 'none'
+      const thinkingLabel =
+        selectedThinkingLevel !== 'none'
+          ? ` (${THINKING_LEVEL_LABELS[selectedThinkingLevel]} Thinking)`
+          : '';
+      return {
+        ...claudeModel,
+        label: `${claudeModel.label}${thinkingLabel}`,
+        icon: AnthropicIcon,
+      };
+    }
+
+    // With canonical IDs, direct comparison works
+    const cursorModel = availableCursorModels.find((m) => m.id === selectedModel);
+    if (cursorModel) return { ...cursorModel, icon: CursorIcon };
+
+    // Check if selectedModel is part of a grouped model
+    const group = getModelGroup(selectedModel as CursorModelId);
+    if (group) {
+      const variant = getSelectedVariant(group, selectedModel as CursorModelId);
+      return {
+        id: selectedModel,
+        label: `${group.label} (${variant?.label || 'Unknown'})`,
+        description: group.description,
+        provider: 'cursor' as const,
+        icon: CursorIcon,
+      };
+    }
+
+    // Check Codex models
+    const codexModel = transformedCodexModels.find((m) => m.id === selectedModel);
+    if (codexModel) {
+      const reasoningLabel =
+        selectedReasoningEffort !== 'none'
+          ? ` (${REASONING_EFFORT_LABELS[selectedReasoningEffort]} Reasoning)`
+          : '';
+      return {
+        ...codexModel,
+        label: `${codexModel.label}${reasoningLabel}`,
+        icon: OpenAIIcon,
+      };
+    }
+
+    // Check Gemini models
+    // Note: Gemini CLI doesn't support thinking level configuration
+    const geminiModel = availableGeminiModels.find((m) => m.id === selectedModel);
+    if (geminiModel) {
+      return {
+        ...geminiModel,
+        icon: GeminiIcon,
+      };
+    }
+
+    // Check Copilot models
+    const copilotModel = availableCopilotModels.find((m) => m.id === selectedModel);
+    if (copilotModel) {
+      return {
+        ...copilotModel,
+        icon: CopilotIcon,
+      };
+    }
+
+    // Check OpenCode models (static) - use dynamic icon resolution for provider-specific icons
+    const opencodeModel = OPENCODE_MODELS.find((m) => m.id === selectedModel);
+    if (opencodeModel) return { ...opencodeModel, icon: getProviderIconForModel(opencodeModel.id) };
+
+    // Check dynamic OpenCode models - use dynamic icon resolution for provider-specific icons
+    const dynamicModel = dynamicOpencodeModels.find((m) => m.id === selectedModel);
+    if (dynamicModel) {
+      return {
+        id: dynamicModel.id,
+        label: dynamicModel.name,
+        description: dynamicModel.description,
+        provider: 'opencode' as const,
+        icon: getProviderIconForModel(dynamicModel.id),
+      };
+    }
+
+    // Check ClaudeCompatibleProvider models (when providerId is set)
+    if (selectedProviderId) {
+      const provider = enabledProviders.find((p) => p.id === selectedProviderId);
+      if (provider) {
+        const providerModel = provider.models?.find((m) => m.id === selectedModel);
+        if (providerModel) {
+          // Count providers of same type to determine if we need provider name suffix
+          const sameTypeCount = enabledProviders.filter(
+            (p) => p.providerType === provider.providerType
+          ).length;
+          const suffix = sameTypeCount > 1 ? ` (${provider.name})` : '';
+          // Add thinking level to label if not 'none'
+          const thinkingLabel =
+            selectedThinkingLevel !== 'none'
+              ? ` (${THINKING_LEVEL_LABELS[selectedThinkingLevel]} Thinking)`
+              : '';
+          // Get icon based on provider type
+          const getIconForProviderType = () => {
+            switch (provider.providerType) {
+              case 'glm':
+                return GlmIcon;
+              case 'minimax':
+                return MiniMaxIcon;
+              case 'openrouter':
+                return OpenRouterIcon;
+              default:
+                return getProviderIconForModel(providerModel.id) || OpenRouterIcon;
+            }
+          };
+          return {
+            id: selectedModel,
+            label: `${providerModel.displayName}${suffix}${thinkingLabel}`,
+            description: provider.name,
+            provider: 'claude-compatible' as const,
+            icon: getIconForProviderType(),
+          };
+        }
+      }
+    }
+
+    // Fallback: Check ClaudeCompatibleProvider models by model ID only (when providerId is not set)
+    // This handles cases where features store model ID but not providerId
+    for (const provider of enabledProviders) {
+      const providerModel = provider.models?.find((m) => m.id === selectedModel);
+      if (providerModel) {
+        // Count providers of same type to determine if we need provider name suffix
+        const sameTypeCount = enabledProviders.filter(
+          (p) => p.providerType === provider.providerType
+        ).length;
+        const suffix = sameTypeCount > 1 ? ` (${provider.name})` : '';
+        // Add thinking level to label if not 'none'
+        const thinkingLabel =
+          selectedThinkingLevel !== 'none'
+            ? ` (${THINKING_LEVEL_LABELS[selectedThinkingLevel]} Thinking)`
+            : '';
+        // Get icon based on provider type
+        const getIconForProviderType = () => {
+          switch (provider.providerType) {
+            case 'glm':
+              return GlmIcon;
+            case 'minimax':
+              return MiniMaxIcon;
+            case 'openrouter':
+              return OpenRouterIcon;
+            default:
+              return getProviderIconForModel(providerModel.id) || OpenRouterIcon;
+          }
+        };
+        return {
+          id: selectedModel,
+          label: `${providerModel.displayName}${suffix}${thinkingLabel}`,
+          description: provider.name,
+          provider: 'claude-compatible' as const,
+          icon: getIconForProviderType(),
+        };
+      }
+    }
+
+    return null;
+  }, [
+    selectedModel,
+    selectedProviderId,
+    selectedThinkingLevel,
+    selectedReasoningEffort,
+    availableCursorModels,
+    availableGeminiModels,
+    availableCopilotModels,
+    transformedCodexModels,
+    dynamicOpencodeModels,
+    enabledProviders,
+  ]);
+
+  // Compute grouped vs standalone Cursor models
+  const { groupedModels, standaloneCursorModels } = useMemo(() => {
+    const grouped: GroupedModel[] = [];
+    const standalone: typeof CURSOR_MODELS = [];
+    const seenGroups = new Set<string>();
+
+    availableCursorModels.forEach((model) => {
+      const cursorId = model.id as CursorModelId;
+
+      // Check if this model is standalone
+      if (STANDALONE_CURSOR_MODELS.includes(cursorId)) {
+        standalone.push(model);
+        return;
+      }
+
+      // Check if this model belongs to a group
+      const group = getModelGroup(cursorId);
+      if (group && !seenGroups.has(group.baseId)) {
+        // Filter variants to only include enabled models
+        const enabledVariants = group.variants.filter((v) => enabledCursorModels.includes(v.id));
+        if (enabledVariants.length > 0) {
+          grouped.push({
+            ...group,
+            variants: enabledVariants,
+          });
+          seenGroups.add(group.baseId);
+        }
+      }
+    });
+
+    return { groupedModels: grouped, standaloneCursorModels: standalone };
+  }, [availableCursorModels, enabledCursorModels]);
+
+  // Combine static and dynamic OpenCode models
+  const allOpencodeModels: ModelOption[] = useMemo(() => {
+    // Filter static models by what the user has enabled in Settings → AI Providers
+    const staticModels = OPENCODE_MODELS.filter((model) =>
+      (enabledOpencodeModels as string[]).includes(model.id)
+    );
+
+    // Add dynamic models (convert ModelDefinition to ModelOption)
+    // Only include dynamic models that are enabled by the user
+    const dynamicModelOptions: ModelOption[] = dynamicOpencodeModels
+      .filter((model) => enabledDynamicModelIds.includes(model.id))
+      .map((model) => ({
+        id: model.id,
+        label: model.name,
+        description: model.description,
+        badge: model.tier === 'premium' ? 'Premium' : undefined,
+        provider: 'opencode' as const,
+      }));
+
+    // Merge, avoiding duplicates (static models take precedence)
+    // Static IDs use dash format (opencode-glm-5-free), dynamic use slash format (opencode/glm-5-free)
+    // Normalize both to the model name part for comparison
+    const normalizeModelName = (id: string): string => {
+      if (id.startsWith('opencode-')) return id.slice('opencode-'.length);
+      if (id.startsWith('opencode/')) return id.slice('opencode/'.length);
+      return id;
+    };
+    const staticModelNames = new Set(staticModels.map((m) => normalizeModelName(m.id)));
+    const uniqueDynamic = dynamicModelOptions.filter(
+      (m) => !staticModelNames.has(normalizeModelName(m.id))
+    );
+
+    return [...staticModels, ...uniqueDynamic];
+  }, [enabledOpencodeModels, dynamicOpencodeModels, enabledDynamicModelIds]);
+
+  // Check if providers are disabled (needed for rendering conditions)
+  const isCursorDisabled = disabledProviders.includes('cursor');
+  const isGeminiDisabled = disabledProviders.includes('gemini');
+  const isCopilotDisabled = disabledProviders.includes('copilot');
+
+  // Group models (filtering out disabled providers)
+  const { favorites, claude, codex, gemini, copilot, opencode } = useMemo(() => {
+    const favs: typeof CLAUDE_MODELS = [];
+    const cModels: typeof CLAUDE_MODELS = [];
+    const curModels: typeof CURSOR_MODELS = [];
+    const codModels: typeof transformedCodexModels = [];
+    const gemModels: typeof GEMINI_MODELS = [];
+    const copModels: typeof COPILOT_MODELS = [];
+    const ocModels: ModelOption[] = [];
+
+    const isClaudeDisabled = disabledProviders.includes('claude');
+    const isCodexDisabled = disabledProviders.includes('codex');
+    const isGeminiDisabledInner = disabledProviders.includes('gemini');
+    const isCopilotDisabledInner = disabledProviders.includes('copilot');
+    const isOpencodeDisabled = disabledProviders.includes('opencode');
+
+    // Process Claude Models (skip if provider is disabled)
+    if (!isClaudeDisabled) {
+      CLAUDE_MODELS.forEach((model) => {
+        if (favoriteModels.includes(model.id)) {
+          favs.push(model);
+        } else {
+          cModels.push(model);
+        }
+      });
+    }
+
+    // Process Cursor Models (skip if provider is disabled)
+    if (!isCursorDisabled) {
+      availableCursorModels.forEach((model) => {
+        if (favoriteModels.includes(model.id)) {
+          favs.push(model);
+        } else {
+          curModels.push(model);
+        }
+      });
+    }
+
+    // Process Codex Models (skip if provider is disabled)
+    if (!isCodexDisabled) {
+      transformedCodexModels.forEach((model) => {
+        if (favoriteModels.includes(model.id)) {
+          favs.push(model);
+        } else {
+          codModels.push(model);
+        }
+      });
+    }
+
+    // Process Gemini Models (skip if provider is disabled)
+    if (!isGeminiDisabledInner) {
+      availableGeminiModels.forEach((model) => {
+        if (favoriteModels.includes(model.id)) {
+          favs.push(model);
+        } else {
+          gemModels.push(model);
+        }
+      });
+    }
+
+    // Process Copilot Models (skip if provider is disabled)
+    if (!isCopilotDisabledInner) {
+      availableCopilotModels.forEach((model) => {
+        if (favoriteModels.includes(model.id)) {
+          favs.push(model);
+        } else {
+          copModels.push(model);
+        }
+      });
+    }
+
+    // Process OpenCode Models (skip if provider is disabled)
+    if (!isOpencodeDisabled) {
+      allOpencodeModels.forEach((model) => {
+        if (favoriteModels.includes(model.id)) {
+          favs.push(model);
+        } else {
+          ocModels.push(model);
+        }
+      });
+    }
+
+    return {
+      favorites: favs,
+      claude: cModels,
+      codex: codModels,
+      gemini: gemModels,
+      copilot: copModels,
+      opencode: ocModels,
+    };
+  }, [
+    favoriteModels,
+    availableCursorModels,
+    availableGeminiModels,
+    availableCopilotModels,
+    transformedCodexModels,
+    allOpencodeModels,
+    disabledProviders,
+    isCursorDisabled,
+  ]);
+
+  // Group OpenCode models by model type for better organization
+  const opencodeSections = useMemo(() => {
+    type OpencodeSectionKey = (typeof OPENCODE_SECTION_ORDER)[number];
+    type OpencodeGroup = { key: string; label: string; models: ModelOption[] };
+    type OpencodeSection = {
+      key: OpencodeSectionKey;
+      label: string;
+      showGroupLabels: boolean;
+      groups: OpencodeGroup[];
+    };
+
+    const sections: Record<OpencodeSectionKey, Record<string, OpencodeGroup>> = {
+      free: {},
+      dynamic: {},
+    };
+    const dynamicProviderById = new Map(
+      dynamicOpencodeModels.map((model) => [model.id, model.provider])
+    );
+
+    const resolveProviderKey = (modelId: string): string => {
+      const staticProvider = OPENCODE_STATIC_PROVIDER_BY_ID.get(modelId);
+      if (staticProvider) return staticProvider;
+
+      const dynamicProvider = dynamicProviderById.get(modelId);
+      if (dynamicProvider) return dynamicProvider;
+
+      return modelId.includes(OPENCODE_MODEL_ID_SEPARATOR)
+        ? modelId.split(OPENCODE_MODEL_ID_SEPARATOR)[0]
+        : OPENCODE_PROVIDER_FALLBACK;
+    };
+
+    const addModelToGroup = (
+      sectionKey: OpencodeSectionKey,
+      providerKey: string,
+      model: ModelOption
+    ) => {
+      if (!sections[sectionKey][providerKey]) {
+        sections[sectionKey][providerKey] = {
+          key: providerKey,
+          label: getOpencodeGroupLabel(providerKey, sectionKey),
+          models: [],
+        };
+      }
+      sections[sectionKey][providerKey].models.push(model);
+    };
+
+    opencode.forEach((model) => {
+      const providerKey = resolveProviderKey(model.id);
+      const sectionKey = getOpencodeSectionKey(providerKey);
+      addModelToGroup(sectionKey, providerKey, model);
+    });
+
+    const buildGroupList = (sectionKey: OpencodeSectionKey): OpencodeGroup[] => {
+      const groupMap = sections[sectionKey];
+      const priorityOrder = sectionKey === 'dynamic' ? OPENCODE_DYNAMIC_PROVIDER_ORDER : [];
+      const priorityMap = new Map(priorityOrder.map((provider, index) => [provider, index]));
+
+      return Object.keys(groupMap)
+        .sort((a, b) => {
+          const aPriority = priorityMap.get(a);
+          const bPriority = priorityMap.get(b);
+
+          if (aPriority !== undefined && bPriority !== undefined) {
+            return aPriority - bPriority;
+          }
+          if (aPriority !== undefined) return -1;
+          if (bPriority !== undefined) return 1;
+
+          return groupMap[a].label.localeCompare(groupMap[b].label);
+        })
+        .map((key) => groupMap[key]);
+    };
+
+    const builtSections = OPENCODE_SECTION_ORDER.map((sectionKey) => {
+      const groups = buildGroupList(sectionKey);
+      if (groups.length === 0) return null;
+
+      return {
+        key: sectionKey,
+        label: OPENCODE_SECTION_LABELS[sectionKey],
+        showGroupLabels: sectionKey !== 'free',
+        groups,
+      };
+    }).filter(Boolean) as OpencodeSection[];
+
+    return builtSections;
+  }, [opencode, dynamicOpencodeModels]);
+
+  // Render Codex model item with secondary popover for reasoning effort (only for models that support it)
+  const renderCodexModelItem = (model: (typeof transformedCodexModels)[0]) => {
+    const isSelected = selectedModel === model.id;
+    const isFavorite = favoriteModels.includes(model.id);
+    const hasReasoning = codexModelHasThinking(model.id as CodexModelId);
+    const isExpanded = expandedCodexModel === model.id;
+    const currentReasoning = isSelected ? selectedReasoningEffort : 'none';
+
+    // If model doesn't support reasoning, render as simple selector (like Cursor models)
+    if (!hasReasoning) {
+      return (
+        <CommandItem
+          key={model.id}
+          value={model.label}
+          onSelect={() => {
+            onChange({ model: model.id as CodexModelId });
+            setOpen(false);
+          }}
+          className="group flex items-center justify-between py-2"
+        >
+          <div className="flex items-center gap-3 overflow-hidden">
+            <OpenAIIcon
+              className={cn(
+                'h-4 w-4 shrink-0',
+                isSelected ? 'text-primary' : 'text-muted-foreground'
+              )}
+            />
+            <div className="flex flex-col truncate">
+              <span className={cn('truncate font-medium', isSelected && 'text-primary')}>
+                {model.label}
+              </span>
+              <span className="truncate text-xs text-muted-foreground">{model.description}</span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-1 ml-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn(
+                'h-6 w-6 hover:bg-transparent hover:text-yellow-500 focus:ring-0',
+                isFavorite
+                  ? 'text-yellow-500 opacity-100'
+                  : 'opacity-0 group-hover:opacity-100 text-muted-foreground'
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleFavoriteModel(model.id);
+              }}
+            >
+              <Star className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} />
+            </Button>
+            {isSelected && <Check className="h-4 w-4 text-primary shrink-0" />}
+          </div>
+        </CommandItem>
+      );
+    }
+
+    // Model supports reasoning - two-stage interaction pattern:
+    // Primary zone: selects model with default reasoning effort (medium)
+    // Secondary zone (chevron): expands reasoning effort sub-menu
+
+    // On mobile, render inline expansion instead of nested popover
+    if (isMobile) {
+      return (
+        <div key={model.id}>
+          <CommandItem
+            value={model.label}
+            onSelect={() => {
+              // Primary action: select model with default reasoning effort
+              onChange({
+                model: model.id as CodexModelId,
+                reasoningEffort: storeDefaultReasoningEffort,
+              });
+              setExpandedCodexModel(null);
+              setOpen(false);
+            }}
+            className="group flex items-center justify-between py-2"
+          >
+            <div className="flex items-center gap-3 overflow-hidden">
+              <OpenAIIcon
+                className={cn(
+                  'h-4 w-4 shrink-0',
+                  isSelected ? 'text-primary' : 'text-muted-foreground'
+                )}
+              />
+              <div className="flex flex-col truncate">
+                <span className={cn('truncate font-medium', isSelected && 'text-primary')}>
+                  {model.label}
+                </span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {isSelected && currentReasoning !== 'none'
+                    ? `Reasoning: ${REASONING_EFFORT_LABELS[currentReasoning]}`
+                    : model.description}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-1 ml-2">
+              <Button
+                variant="ghost"
+                size="icon"
+                className={cn(
+                  'h-6 w-6 hover:bg-transparent hover:text-yellow-500 focus:ring-0',
+                  isFavorite
+                    ? 'text-yellow-500 opacity-100'
+                    : 'opacity-0 group-hover:opacity-100 text-muted-foreground'
+                )}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleFavoriteModel(model.id);
+                }}
+              >
+                <Star className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} />
+              </Button>
+              {isSelected && !isExpanded && <Check className="h-4 w-4 text-primary shrink-0" />}
+              {/* Secondary zone: expand reasoning effort sub-menu */}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  setExpandedCodexModel(isExpanded ? null : (model.id as CodexModelId));
+                }}
+                className={cn(
+                  'flex items-center justify-center h-7 w-7 rounded-sm',
+                  'hover:bg-accent/80 transition-colors',
+                  isExpanded && 'bg-accent'
+                )}
+                title="Adjust reasoning effort"
+              >
+                <ChevronDown
+                  className={cn(
+                    'h-4 w-4 text-muted-foreground transition-transform',
+                    isExpanded && 'rotate-180'
+                  )}
+                />
+              </button>
+            </div>
+          </CommandItem>
+
+          {/* Inline reasoning effort options on mobile */}
+          {isExpanded && (
+            <div className="pl-6 pr-2 pb-2 space-y-1">
+              <div className="px-2 py-1 text-xs font-medium text-muted-foreground">
+                Reasoning Effort
+              </div>
+              {REASONING_EFFORT_LEVELS.map((effort) => {
+                const isActiveEffort = isSelected && currentReasoning === effort;
+                return (
+                  <button
+                    key={effort}
+                    onClick={() => {
+                      onChange({
+                        model: model.id as CodexModelId,
+                        reasoningEffort: effort,
+                      });
+                      setExpandedCodexModel(null);
+                      setOpen(false);
+                    }}
+                    className={cn(
+                      'w-full flex items-center justify-between px-2 py-2 rounded-sm text-sm',
+                      'hover:bg-accent cursor-pointer transition-colors',
+                      isActiveEffort
+                        ? 'bg-primary/10 text-primary border border-primary/20'
+                        : 'border border-transparent'
+                    )}
+                  >
+                    <div className="flex flex-col items-start">
+                      <span className={cn('font-medium text-xs', isActiveEffort && 'text-primary')}>
+                        {REASONING_EFFORT_LABELS[effort]}
+                      </span>
+                      <span className="text-[10px] text-muted-foreground">
+                        {effort === 'none' && 'No reasoning capability'}
+                        {effort === 'minimal' && 'Minimal reasoning'}
+                        {effort === 'low' && 'Light reasoning'}
+                        {effort === 'medium' && 'Moderate reasoning'}
+                        {effort === 'high' && 'Deep reasoning'}
+                        {effort === 'xhigh' && 'Maximum reasoning'}
+                      </span>
+                    </div>
+                    {isActiveEffort && <Check className="h-3.5 w-3.5 text-primary" />}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    // Desktop: Two-stage pattern with nested popover for reasoning effort
+    return (
+      <CommandItem
+        key={model.id}
+        value={model.label}
+        onSelect={() => {
+          // Primary action: select model with default reasoning effort
+          onChange({
+            model: model.id as CodexModelId,
+            reasoningEffort: storeDefaultReasoningEffort,
+          });
+          setExpandedCodexModel(null);
+          setOpen(false);
+        }}
+        className="p-0 data-[selected=true]:bg-transparent"
+      >
+        <div
+          className={cn(
+            'w-full group flex items-center justify-between py-2 px-2 rounded-sm cursor-pointer',
+            'hover:bg-accent',
+            isExpanded && 'bg-accent'
+          )}
+        >
+          <div className="flex items-center gap-3 overflow-hidden">
+            <OpenAIIcon
+              className={cn(
+                'h-4 w-4 shrink-0',
+                isSelected ? 'text-primary' : 'text-muted-foreground'
+              )}
+            />
+            <div className="flex flex-col truncate">
+              <span className={cn('truncate font-medium', isSelected && 'text-primary')}>
+                {model.label}
+              </span>
+              <span className="truncate text-xs text-muted-foreground">
+                {isSelected && currentReasoning !== 'none'
+                  ? `Reasoning: ${REASONING_EFFORT_LABELS[currentReasoning]}`
+                  : model.description}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-1 ml-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn(
+                'h-6 w-6 hover:bg-transparent hover:text-yellow-500 focus:ring-0',
+                isFavorite
+                  ? 'text-yellow-500 opacity-100'
+                  : 'opacity-0 group-hover:opacity-100 text-muted-foreground'
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleFavoriteModel(model.id);
+              }}
+            >
+              <Star className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} />
+            </Button>
+            {isSelected && <Check className="h-4 w-4 text-primary shrink-0" />}
+            {/* Secondary zone: expand reasoning effort popover */}
+            <Popover
+              open={isExpanded}
+              modal={false}
+              onOpenChange={(isOpen) => {
+                if (!isOpen) {
+                  setExpandedCodexModel(null);
+                }
+              }}
+            >
+              <PopoverTrigger asChild>
+                <button
+                  ref={
+                    isExpanded
+                      ? (expandedCodexTriggerRef as unknown as React.RefObject<HTMLButtonElement>)
+                      : undefined
+                  }
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setExpandedCodexModel(isExpanded ? null : (model.id as CodexModelId));
+                  }}
+                  className={cn(
+                    'flex items-center justify-center h-7 w-7 rounded-sm',
+                    'hover:bg-accent/80 transition-colors',
+                    isExpanded && 'bg-accent'
+                  )}
+                  title="Adjust reasoning effort"
+                >
+                  <ChevronDown
+                    className={cn(
+                      'h-4 w-4 text-muted-foreground transition-transform',
+                      isExpanded && 'rotate-180'
+                    )}
+                  />
+                </button>
+              </PopoverTrigger>
+              <PopoverContent
+                side="right"
+                align="start"
+                className="w-[220px] p-1"
+                sideOffset={8}
+                collisionPadding={16}
+                onCloseAutoFocus={(e) => e.preventDefault()}
+              >
+                <div className="space-y-1">
+                  <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground border-b border-border/50 mb-1">
+                    Reasoning Effort
+                  </div>
+                  {REASONING_EFFORT_LEVELS.map((effort) => {
+                    const isActiveEffort = isSelected && currentReasoning === effort;
+                    return (
+                      <button
+                        key={effort}
+                        onClick={() => {
+                          onChange({
+                            model: model.id as CodexModelId,
+                            reasoningEffort: effort,
+                          });
+                          setExpandedCodexModel(null);
+                          setOpen(false);
+                        }}
+                        className={cn(
+                          'w-full flex items-center justify-between px-2 py-2 rounded-sm text-sm',
+                          'hover:bg-accent cursor-pointer transition-colors',
+                          isActiveEffort
+                            ? 'bg-primary/10 text-primary border border-primary/20'
+                            : 'border border-transparent'
+                        )}
+                      >
+                        <div className="flex flex-col items-start">
+                          <span className={cn('font-medium', isActiveEffort && 'text-primary')}>
+                            {REASONING_EFFORT_LABELS[effort]}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            {effort === 'none' && 'No reasoning capability'}
+                            {effort === 'minimal' && 'Minimal reasoning'}
+                            {effort === 'low' && 'Light reasoning'}
+                            {effort === 'medium' && 'Moderate reasoning'}
+                            {effort === 'high' && 'Deep reasoning'}
+                            {effort === 'xhigh' && 'Maximum reasoning'}
+                          </span>
+                        </div>
+                        {isActiveEffort && <Check className="h-3.5 w-3.5 text-primary" />}
+                      </button>
+                    );
+                  })}
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
+      </CommandItem>
+    );
+  };
+
+  // Render OpenCode model item (simple selector, no thinking/reasoning options)
+  const renderOpencodeModelItem = (model: (typeof OPENCODE_MODELS)[0]) => {
+    const isSelected = selectedModel === model.id;
+    const isFavorite = favoriteModels.includes(model.id);
+
+    // Get the appropriate icon based on the specific model ID
+    const ProviderIcon = getProviderIconForModel(model.id);
+
+    return (
+      <CommandItem
+        key={model.id}
+        value={model.label}
+        onSelect={() => {
+          onChange({ model: model.id as OpencodeModelId });
+          setOpen(false);
+        }}
+        className="group flex items-center justify-between py-2"
+      >
+        <div className="flex items-center gap-3 overflow-hidden">
+          <ProviderIcon
+            className={cn(
+              'h-4 w-4 shrink-0',
+              isSelected ? 'text-primary' : 'text-muted-foreground'
+            )}
+          />
+          <div className="flex flex-col truncate">
+            <span className={cn('truncate font-medium', isSelected && 'text-primary')}>
+              {model.label}
+            </span>
+            <span className="truncate text-xs text-muted-foreground">{model.description}</span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1 ml-2">
+          {model.badge && (
+            <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground mr-1">
+              {model.badge}
+            </span>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            className={cn(
+              'h-6 w-6 hover:bg-transparent hover:text-yellow-500 focus:ring-0',
+              isFavorite
+                ? 'text-yellow-500 opacity-100'
+                : 'opacity-0 group-hover:opacity-100 text-muted-foreground'
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleFavoriteModel(model.id);
+            }}
+          >
+            <Star className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} />
+          </Button>
+          {isSelected && <Check className="h-4 w-4 text-primary shrink-0" />}
+        </div>
+      </CommandItem>
+    );
+  };
+
+  // Render Gemini model item - simple selector without thinking level
+  // Note: Gemini CLI doesn't support a --thinking-level flag, thinking is model-internal
+  const renderGeminiModelItem = (model: (typeof GEMINI_MODELS)[0]) => {
+    const isSelected = selectedModel === model.id;
+    const isFavorite = favoriteModels.includes(model.id);
+
+    return (
+      <CommandItem
+        key={model.id}
+        value={model.label}
+        onSelect={() => {
+          onChange({ model: model.id as GeminiModelId });
+          setOpen(false);
+        }}
+        className="group flex items-center justify-between py-2"
+      >
+        <div className="flex items-center gap-3 overflow-hidden">
+          <GeminiIcon
+            className={cn(
+              'h-4 w-4 shrink-0',
+              isSelected ? 'text-primary' : 'text-muted-foreground'
+            )}
+          />
+          <div className="flex flex-col truncate">
+            <span className={cn('truncate font-medium', isSelected && 'text-primary')}>
+              {model.label}
+            </span>
+            <span className="truncate text-xs text-muted-foreground">{model.description}</span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1 ml-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            className={cn(
+              'h-6 w-6 hover:bg-transparent hover:text-yellow-500 focus:ring-0',
+              isFavorite
+                ? 'text-yellow-500 opacity-100'
+                : 'opacity-0 group-hover:opacity-100 text-muted-foreground'
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleFavoriteModel(model.id);
+            }}
+          >
+            <Star className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} />
+          </Button>
+          {isSelected && <Check className="h-4 w-4 text-primary shrink-0" />}
+        </div>
+      </CommandItem>
+    );
+  };
+
+  // Render Copilot model item - simple selector without thinking level
+  const renderCopilotModelItem = (model: (typeof COPILOT_MODELS)[0]) => {
+    const isSelected = selectedModel === model.id;
+    const isFavorite = favoriteModels.includes(model.id);
+
+    return (
+      <CommandItem
+        key={model.id}
+        value={model.label}
+        onSelect={() => {
+          onChange({ model: model.id as CopilotModelId });
+          setOpen(false);
+        }}
+        className="group flex items-center justify-between py-2"
+      >
+        <div className="flex items-center gap-3 overflow-hidden">
+          <CopilotIcon
+            className={cn(
+              'h-4 w-4 shrink-0',
+              isSelected ? 'text-primary' : 'text-muted-foreground'
+            )}
+          />
+          <div className="flex flex-col truncate">
+            <span className={cn('truncate font-medium', isSelected && 'text-primary')}>
+              {model.label}
+            </span>
+            <span className="truncate text-xs text-muted-foreground">{model.description}</span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1 ml-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            className={cn(
+              'h-6 w-6 hover:bg-transparent hover:text-yellow-500 focus:ring-0',
+              isFavorite
+                ? 'text-yellow-500 opacity-100'
+                : 'opacity-0 group-hover:opacity-100 text-muted-foreground'
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleFavoriteModel(model.id);
+            }}
+          >
+            <Star className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} />
+          </Button>
+          {isSelected && <Check className="h-4 w-4 text-primary shrink-0" />}
+        </div>
+      </CommandItem>
+    );
+  };
+
+  // Render ClaudeCompatibleProvider model item with thinking level support
+  // Two-stage pattern: primary selects model with default thinking, chevron expands thinking level
+  const renderProviderModelItem = (
+    provider: ClaudeCompatibleProvider,
+    model: ProviderModel,
+    showProviderSuffix: boolean,
+    allMappedModels: ClaudeModelAlias[] = []
+  ) => {
+    const isSelected = selectedModel === model.id && selectedProviderId === provider.id;
+    const expandKey = `${provider.id}:${model.id}`;
+    const isExpanded = expandedProviderModel === expandKey;
+    const currentThinking = isSelected ? selectedThinkingLevel : 'none';
+    const displayName = showProviderSuffix
+      ? `${model.displayName} (${provider.name})`
+      : model.displayName;
+    // Use the user's preferred default, clamped to available levels for this provider model
+    const providerAvailableLevels = getThinkingLevelsForModel(
+      model.mapsToClaudeModel === 'opus' ? 'claude-opus' : model.id || ''
+    );
+    const defaultThinking = providerAvailableLevels.includes(storeDefaultThinkingLevel)
+      ? storeDefaultThinkingLevel
+      : providerAvailableLevels[0];
+
+    // Build description showing all mapped Claude models
+    const modelLabelMap: Record<ClaudeModelAlias, string> = {
+      haiku: 'Haiku',
+      sonnet: 'Sonnet',
+      opus: 'Opus',
+    };
+    // Sort in order: haiku, sonnet, opus for consistent display
+    const sortOrder: ClaudeModelAlias[] = ['haiku', 'sonnet', 'opus'];
+    const sortedMappedModels = [...allMappedModels].sort(
+      (a, b) => sortOrder.indexOf(a) - sortOrder.indexOf(b)
+    );
+    const mappedModelLabel =
+      sortedMappedModels.length > 0
+        ? sortedMappedModels.map((m) => modelLabelMap[m]).join(', ')
+        : 'Claude';
+
+    // Get icon based on provider type, falling back to model-based detection
+    const getProviderTypeIcon = () => {
+      switch (provider.providerType) {
+        case 'glm':
+          return GlmIcon;
+        case 'minimax':
+          return MiniMaxIcon;
+        case 'openrouter':
+          return OpenRouterIcon;
+        default:
+          // For generic/unknown providers, use OpenRouter as a generic "cloud API" icon
+          // unless the model ID has a recognizable pattern
+          return getProviderIconForModel(model.id) || OpenRouterIcon;
+      }
+    };
+    const ProviderIcon = getProviderTypeIcon();
+
+    // On mobile, render inline expansion instead of nested popover
+    if (isMobile) {
+      return (
+        <div key={`${provider.id}-${model.id}`}>
+          <CommandItem
+            value={`${provider.name} ${model.displayName}`}
+            onSelect={() => {
+              // Primary action: select provider model with default thinking level
+              onChange({
+                providerId: provider.id,
+                model: model.id,
+                thinkingLevel: defaultThinking,
+              });
+              setExpandedProviderModel(null);
+              setOpen(false);
+            }}
+            className="group flex items-center justify-between py-2"
+          >
+            <div className="flex items-center gap-3 overflow-hidden">
+              <ProviderIcon
+                className={cn(
+                  'h-4 w-4 shrink-0',
+                  isSelected ? 'text-primary' : 'text-muted-foreground'
+                )}
+              />
+              <div className="flex flex-col truncate">
+                <span className={cn('truncate font-medium', isSelected && 'text-primary')}>
+                  {displayName}
+                </span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {isSelected && currentThinking !== 'none'
+                    ? `Thinking: ${THINKING_LEVEL_LABELS[currentThinking]}`
+                    : `Maps to ${mappedModelLabel}`}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-1 ml-2">
+              {isSelected && !isExpanded && <Check className="h-4 w-4 text-primary shrink-0" />}
+              {/* Secondary zone: expand thinking level sub-menu */}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  setExpandedProviderModel(isExpanded ? null : expandKey);
+                }}
+                className={cn(
+                  'flex items-center justify-center h-7 w-7 rounded-sm',
+                  'hover:bg-accent/80 transition-colors',
+                  isExpanded && 'bg-accent'
+                )}
+                title="Adjust thinking level"
+              >
+                <ChevronDown
+                  className={cn(
+                    'h-4 w-4 text-muted-foreground transition-transform',
+                    isExpanded && 'rotate-180'
+                  )}
+                />
+              </button>
+            </div>
+          </CommandItem>
+
+          {/* Inline thinking level options on mobile */}
+          {isExpanded && (
+            <div className="pl-6 pr-2 pb-2 space-y-1">
+              <div className="px-2 py-1 text-xs font-medium text-muted-foreground">
+                Thinking Level
+              </div>
+              {getThinkingLevelsForModel(
+                model.mapsToClaudeModel === 'opus' ? 'claude-opus' : model.id || ''
+              ).map((level) => {
+                const isActiveLevel = isSelected && currentThinking === level;
+                return (
+                  <button
+                    key={level}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      onChange({
+                        providerId: provider.id,
+                        model: model.id,
+                        thinkingLevel: level,
+                      });
+                      setExpandedProviderModel(null);
+                      setOpen(false);
+                    }}
+                    className={cn(
+                      'w-full flex items-center justify-between px-2 py-2 rounded-sm text-sm',
+                      'hover:bg-accent cursor-pointer transition-colors',
+                      isActiveLevel
+                        ? 'bg-primary/10 text-primary border border-primary/20'
+                        : 'border border-transparent'
+                    )}
+                  >
+                    <div className="flex flex-col items-start">
+                      <span className={cn('font-medium text-xs', isActiveLevel && 'text-primary')}>
+                        {THINKING_LEVEL_LABELS[level]}
+                      </span>
+                      <span className="text-[10px] text-muted-foreground">
+                        {level === 'none' && 'No extended thinking'}
+                        {level === 'low' && 'Light reasoning (1k tokens)'}
+                        {level === 'medium' && 'Moderate reasoning (10k tokens)'}
+                        {level === 'high' && 'Deep reasoning (16k tokens)'}
+                        {level === 'ultrathink' && 'Maximum reasoning (32k tokens)'}
+                        {level === 'adaptive' && 'Model decides reasoning depth'}
+                      </span>
+                    </div>
+                    {isActiveLevel && <Check className="h-3.5 w-3.5 text-primary" />}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    // Desktop: Two-stage pattern with nested popover for thinking level
+    return (
+      <CommandItem
+        key={`${provider.id}-${model.id}`}
+        value={`${provider.name} ${model.displayName}`}
+        onSelect={() => {
+          // Primary action: select provider model with default thinking level
+          onChange({
+            providerId: provider.id,
+            model: model.id,
+            thinkingLevel: defaultThinking,
+          });
+          setExpandedProviderModel(null);
+          setOpen(false);
+        }}
+        className="p-0 data-[selected=true]:bg-transparent"
+      >
+        <div
+          className={cn(
+            'w-full group flex items-center justify-between py-2 px-2 rounded-sm cursor-pointer',
+            'hover:bg-accent',
+            isExpanded && 'bg-accent'
+          )}
+        >
+          <div className="flex items-center gap-3 overflow-hidden">
+            <ProviderIcon
+              className={cn(
+                'h-4 w-4 shrink-0',
+                isSelected ? 'text-primary' : 'text-muted-foreground'
+              )}
+            />
+            <div className="flex flex-col truncate">
+              <span className={cn('truncate font-medium', isSelected && 'text-primary')}>
+                {displayName}
+              </span>
+              <span className="truncate text-xs text-muted-foreground">
+                {isSelected && currentThinking !== 'none'
+                  ? `Thinking: ${THINKING_LEVEL_LABELS[currentThinking]}`
+                  : `Maps to ${mappedModelLabel}`}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-1 ml-2">
+            {isSelected && <Check className="h-4 w-4 text-primary shrink-0" />}
+            {/* Secondary zone: expand thinking level popover */}
+            <Popover
+              open={isExpanded}
+              modal={false}
+              onOpenChange={(isOpen) => {
+                if (!isOpen) {
+                  setExpandedProviderModel(null);
+                }
+              }}
+            >
+              <PopoverTrigger asChild>
+                <button
+                  ref={
+                    isExpanded
+                      ? (expandedProviderTriggerRef as unknown as React.RefObject<HTMLButtonElement>)
+                      : undefined
+                  }
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setExpandedProviderModel(isExpanded ? null : expandKey);
+                  }}
+                  className={cn(
+                    'flex items-center justify-center h-7 w-7 rounded-sm',
+                    'hover:bg-accent/80 transition-colors',
+                    isExpanded && 'bg-accent'
+                  )}
+                  title="Adjust thinking level"
+                >
+                  <ChevronDown
+                    className={cn(
+                      'h-4 w-4 text-muted-foreground transition-transform',
+                      isExpanded && 'rotate-180'
+                    )}
+                  />
+                </button>
+              </PopoverTrigger>
+              <PopoverContent
+                side="right"
+                align="start"
+                className="w-[220px] p-1"
+                sideOffset={8}
+                collisionPadding={16}
+                onCloseAutoFocus={(e) => e.preventDefault()}
+              >
+                <div className="space-y-1">
+                  <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground border-b border-border/50 mb-1">
+                    Thinking Level
+                  </div>
+                  {getThinkingLevelsForModel(
+                    model.mapsToClaudeModel === 'opus' ? 'claude-opus' : model.id || ''
+                  ).map((level) => {
+                    const isActiveLevel = isSelected && currentThinking === level;
+                    return (
+                      <button
+                        key={level}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          e.preventDefault();
+                          onChange({
+                            providerId: provider.id,
+                            model: model.id,
+                            thinkingLevel: level,
+                          });
+                          setExpandedProviderModel(null);
+                          setOpen(false);
+                        }}
+                        className={cn(
+                          'w-full flex items-center justify-between px-2 py-2 rounded-sm text-sm',
+                          'hover:bg-accent cursor-pointer transition-colors',
+                          isActiveLevel
+                            ? 'bg-primary/10 text-primary border border-primary/20'
+                            : 'border border-transparent'
+                        )}
+                      >
+                        <div className="flex flex-col items-start">
+                          <span className={cn('font-medium', isActiveLevel && 'text-primary')}>
+                            {THINKING_LEVEL_LABELS[level]}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            {level === 'none' && 'No extended thinking'}
+                            {level === 'low' && 'Light reasoning (1k tokens)'}
+                            {level === 'medium' && 'Moderate reasoning (10k tokens)'}
+                            {level === 'high' && 'Deep reasoning (16k tokens)'}
+                            {level === 'ultrathink' && 'Maximum reasoning (32k tokens)'}
+                            {level === 'adaptive' && 'Model decides reasoning depth'}
+                          </span>
+                        </div>
+                        {isActiveLevel && <Check className="h-3.5 w-3.5 text-primary" />}
+                      </button>
+                    );
+                  })}
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
+      </CommandItem>
+    );
+  };
+
+  // Render Cursor model item (no thinking level needed)
+  const renderCursorModelItem = (model: (typeof CURSOR_MODELS)[0]) => {
+    // With canonical IDs, store the full prefixed ID
+    const isSelected = selectedModel === model.id;
+    const isFavorite = favoriteModels.includes(model.id);
+
+    return (
+      <CommandItem
+        key={model.id}
+        value={model.label}
+        onSelect={() => {
+          onChange({ model: model.id as CursorModelId });
+          setOpen(false);
+        }}
+        className="group flex items-center justify-between py-2"
+      >
+        <div className="flex items-center gap-3 overflow-hidden">
+          <CursorIcon
+            className={cn(
+              'h-4 w-4 shrink-0',
+              isSelected ? 'text-primary' : 'text-muted-foreground'
+            )}
+          />
+          <div className="flex flex-col truncate">
+            <span className={cn('truncate font-medium', isSelected && 'text-primary')}>
+              {model.label}
+            </span>
+            <span className="truncate text-xs text-muted-foreground">{model.description}</span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1 ml-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            className={cn(
+              'h-6 w-6 hover:bg-transparent hover:text-yellow-500 focus:ring-0',
+              isFavorite
+                ? 'text-yellow-500 opacity-100'
+                : 'opacity-0 group-hover:opacity-100 text-muted-foreground'
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleFavoriteModel(model.id);
+            }}
+          >
+            <Star className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} />
+          </Button>
+          {isSelected && <Check className="h-4 w-4 text-primary shrink-0" />}
+        </div>
+      </CommandItem>
+    );
+  };
+
+  // Render Claude model item with secondary popover for thinking level
+  const renderClaudeModelItem = (model: (typeof CLAUDE_MODELS)[0]) => {
+    const isSelected = selectedModel === model.id;
+    const isFavorite = favoriteModels.includes(model.id);
+    const isExpanded = expandedClaudeModel === model.id;
+    const currentThinking = isSelected ? selectedThinkingLevel : 'none';
+    // Use the user's preferred default thinking level from settings.
+    // For adaptive-only models (Opus 4.6), clamp to a valid level.
+    const availableLevels = getThinkingLevelsForModel(model.id);
+    const defaultThinking = availableLevels.includes(storeDefaultThinkingLevel)
+      ? storeDefaultThinkingLevel
+      : availableLevels[0]; // Fall back to first available (typically 'none')
+
+    // Two-stage interaction pattern:
+    // - Primary zone (model icon + name): selects model with default thinking level
+    // - Secondary zone (chevron arrow): expands thinking level sub-menu
+
+    // On mobile, render inline expansion instead of nested popover
+    if (isMobile) {
+      return (
+        <div key={model.id}>
+          <CommandItem
+            value={model.label}
+            onSelect={() => {
+              // Primary action: select model with its default thinking level
+              onChange({
+                model: model.id as ModelAlias,
+                thinkingLevel: defaultThinking,
+              });
+              setExpandedClaudeModel(null);
+              setOpen(false);
+            }}
+            className="group flex items-center justify-between py-2"
+          >
+            <div className="flex items-center gap-3 overflow-hidden">
+              <AnthropicIcon
+                className={cn(
+                  'h-4 w-4 shrink-0',
+                  isSelected ? 'text-primary' : 'text-muted-foreground'
+                )}
+              />
+              <div className="flex flex-col truncate">
+                <span className={cn('truncate font-medium', isSelected && 'text-primary')}>
+                  {model.label}
+                </span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {isSelected && currentThinking !== 'none'
+                    ? `Thinking: ${THINKING_LEVEL_LABELS[currentThinking]}`
+                    : model.description}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-1 ml-2">
+              <Button
+                variant="ghost"
+                size="icon"
+                className={cn(
+                  'h-6 w-6 hover:bg-transparent hover:text-yellow-500 focus:ring-0',
+                  isFavorite
+                    ? 'text-yellow-500 opacity-100'
+                    : 'opacity-0 group-hover:opacity-100 text-muted-foreground'
+                )}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleFavoriteModel(model.id);
+                }}
+              >
+                <Star className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} />
+              </Button>
+              {isSelected && !isExpanded && <Check className="h-4 w-4 text-primary shrink-0" />}
+              {/* Secondary zone: expand thinking level sub-menu */}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  setExpandedClaudeModel(isExpanded ? null : (model.id as ModelAlias));
+                }}
+                className={cn(
+                  'flex items-center justify-center h-7 w-7 rounded-sm',
+                  'hover:bg-accent/80 transition-colors',
+                  isExpanded && 'bg-accent'
+                )}
+                title="Adjust thinking level"
+              >
+                <ChevronDown
+                  className={cn(
+                    'h-4 w-4 text-muted-foreground transition-transform',
+                    isExpanded && 'rotate-180'
+                  )}
+                />
+              </button>
+            </div>
+          </CommandItem>
+
+          {/* Inline thinking level options on mobile */}
+          {isExpanded && (
+            <div className="pl-6 pr-2 pb-2 space-y-1">
+              <div className="px-2 py-1 text-xs font-medium text-muted-foreground">
+                Thinking Level
+              </div>
+              {getThinkingLevelsForModel(model.id).map((level) => {
+                const isActiveLevel = isSelected && currentThinking === level;
+                return (
+                  <button
+                    key={level}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      onChange({
+                        model: model.id as ModelAlias,
+                        thinkingLevel: level,
+                      });
+                      setExpandedClaudeModel(null);
+                      setOpen(false);
+                    }}
+                    className={cn(
+                      'w-full flex items-center justify-between px-2 py-2 rounded-sm text-sm',
+                      'hover:bg-accent cursor-pointer transition-colors',
+                      isActiveLevel
+                        ? 'bg-primary/10 text-primary border border-primary/20'
+                        : 'border border-transparent'
+                    )}
+                  >
+                    <div className="flex flex-col items-start">
+                      <span className={cn('font-medium text-xs', isActiveLevel && 'text-primary')}>
+                        {THINKING_LEVEL_LABELS[level]}
+                      </span>
+                      <span className="text-[10px] text-muted-foreground">
+                        {level === 'none' && 'No extended thinking'}
+                        {level === 'low' && 'Light reasoning (1k tokens)'}
+                        {level === 'medium' && 'Moderate reasoning (10k tokens)'}
+                        {level === 'high' && 'Deep reasoning (16k tokens)'}
+                        {level === 'ultrathink' && 'Maximum reasoning (32k tokens)'}
+                        {level === 'adaptive' && 'Model decides reasoning depth'}
+                      </span>
+                    </div>
+                    {isActiveLevel && <Check className="h-3.5 w-3.5 text-primary" />}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    // Desktop: Two-stage pattern with nested popover for thinking level
+    // Primary zone: clicking model name/icon area selects the model with default thinking
+    // Secondary zone: clicking chevron arrow opens thinking level popover
+    return (
+      <CommandItem
+        key={model.id}
+        value={model.label}
+        onSelect={() => {
+          // Primary action: select model with default thinking level
+          onChange({
+            model: model.id as ModelAlias,
+            thinkingLevel: defaultThinking,
+          });
+          setExpandedClaudeModel(null);
+          setOpen(false);
+        }}
+        className="p-0 data-[selected=true]:bg-transparent"
+      >
+        <div
+          className={cn(
+            'w-full group flex items-center justify-between py-2 px-2 rounded-sm cursor-pointer',
+            'hover:bg-accent',
+            isExpanded && 'bg-accent'
+          )}
+        >
+          <div className="flex items-center gap-3 overflow-hidden">
+            <AnthropicIcon
+              className={cn(
+                'h-4 w-4 shrink-0',
+                isSelected ? 'text-primary' : 'text-muted-foreground'
+              )}
+            />
+            <div className="flex flex-col truncate">
+              <span className={cn('truncate font-medium', isSelected && 'text-primary')}>
+                {model.label}
+              </span>
+              <span className="truncate text-xs text-muted-foreground">
+                {isSelected && currentThinking !== 'none'
+                  ? `Thinking: ${THINKING_LEVEL_LABELS[currentThinking]}`
+                  : model.description}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-1 ml-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              className={cn(
+                'h-6 w-6 hover:bg-transparent hover:text-yellow-500 focus:ring-0',
+                isFavorite
+                  ? 'text-yellow-500 opacity-100'
+                  : 'opacity-0 group-hover:opacity-100 text-muted-foreground'
+              )}
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleFavoriteModel(model.id);
+              }}
+            >
+              <Star className={cn('h-3.5 w-3.5', isFavorite && 'fill-current')} />
+            </Button>
+            {isSelected && <Check className="h-4 w-4 text-primary shrink-0" />}
+            {/* Secondary zone: expand thinking level popover */}
+            <Popover
+              open={isExpanded}
+              modal={false}
+              onOpenChange={(isOpen) => {
+                if (!isOpen) {
+                  setExpandedClaudeModel(null);
+                }
+              }}
+            >
+              <PopoverTrigger asChild>
+                <button
+                  ref={
+                    isExpanded
+                      ? (expandedClaudeTriggerRef as unknown as React.RefObject<HTMLButtonElement>)
+                      : undefined
+                  }
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setExpandedClaudeModel(isExpanded ? null : (model.id as ModelAlias));
+                  }}
+                  className={cn(
+                    'flex items-center justify-center h-7 w-7 rounded-sm',
+                    'hover:bg-accent/80 transition-colors',
+                    isExpanded && 'bg-accent'
+                  )}
+                  title="Adjust thinking level"
+                >
+                  <ChevronDown
+                    className={cn(
+                      'h-4 w-4 text-muted-foreground transition-transform',
+                      isExpanded && 'rotate-180'
+                    )}
+                  />
+                </button>
+              </PopoverTrigger>
+              <PopoverContent
+                side="right"
+                align="start"
+                className="w-[220px] p-1"
+                sideOffset={8}
+                collisionPadding={16}
+                onCloseAutoFocus={(e) => e.preventDefault()}
+              >
+                <div className="space-y-1">
+                  <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground border-b border-border/50 mb-1">
+                    Thinking Level
+                  </div>
+                  {getThinkingLevelsForModel(model.id).map((level) => {
+                    const isActiveLevel = isSelected && currentThinking === level;
+                    return (
+                      <button
+                        key={level}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          e.preventDefault();
+                          onChange({
+                            model: model.id as ModelAlias,
+                            thinkingLevel: level,
+                          });
+                          setExpandedClaudeModel(null);
+                          setOpen(false);
+                        }}
+                        className={cn(
+                          'w-full flex items-center justify-between px-2 py-2 rounded-sm text-sm',
+                          'hover:bg-accent cursor-pointer transition-colors',
+                          isActiveLevel
+                            ? 'bg-primary/10 text-primary border border-primary/20'
+                            : 'border border-transparent'
+                        )}
+                      >
+                        <div className="flex flex-col items-start">
+                          <span className={cn('font-medium', isActiveLevel && 'text-primary')}>
+                            {THINKING_LEVEL_LABELS[level]}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            {level === 'none' && 'No extended thinking'}
+                            {level === 'low' && 'Light reasoning (1k tokens)'}
+                            {level === 'medium' && 'Moderate reasoning (10k tokens)'}
+                            {level === 'high' && 'Deep reasoning (16k tokens)'}
+                            {level === 'ultrathink' && 'Maximum reasoning (32k tokens)'}
+                            {level === 'adaptive' && 'Model decides reasoning depth'}
+                          </span>
+                        </div>
+                        {isActiveLevel && <Check className="h-3.5 w-3.5 text-primary" />}
+                      </button>
+                    );
+                  })}
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
+      </CommandItem>
+    );
+  };
+
+  // Render a grouped model with secondary popover for variant selection
+  const renderGroupedModelItem = (group: GroupedModel) => {
+    const groupIsSelected = isGroupSelected(group, selectedModel as CursorModelId);
+    const selectedVariant = getSelectedVariant(group, selectedModel as CursorModelId);
+    const isExpanded = expandedGroup === group.baseId;
+
+    const variantTypeLabel =
+      group.variantType === 'compute'
+        ? 'Compute Level'
+        : group.variantType === 'thinking'
+          ? 'Reasoning Mode'
+          : 'Capacity Options';
+
+    // On mobile, render inline expansion instead of nested popover
+    if (isMobile) {
+      return (
+        <div key={group.baseId}>
+          <CommandItem
+            value={group.label}
+            onSelect={() => setExpandedGroup(isExpanded ? null : group.baseId)}
+            className="group flex items-center justify-between py-2"
+          >
+            <div className="flex items-center gap-3 overflow-hidden">
+              <CursorIcon
+                className={cn(
+                  'h-4 w-4 shrink-0',
+                  groupIsSelected ? 'text-primary' : 'text-muted-foreground'
+                )}
+              />
+              <div className="flex flex-col truncate">
+                <span className={cn('truncate font-medium', groupIsSelected && 'text-primary')}>
+                  {group.label}
+                </span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {selectedVariant ? `Selected: ${selectedVariant.label}` : group.description}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-1 ml-2">
+              {groupIsSelected && !isExpanded && (
+                <Check className="h-4 w-4 text-primary shrink-0" />
+              )}
+              <ChevronRight
+                className={cn(
+                  'h-4 w-4 text-muted-foreground transition-transform',
+                  isExpanded && 'rotate-90'
+                )}
+              />
+            </div>
+          </CommandItem>
+
+          {/* Inline variant options on mobile */}
+          {isExpanded && (
+            <div className="pl-6 pr-2 pb-2 space-y-1">
+              <div className="px-2 py-1 text-xs font-medium text-muted-foreground">
+                {variantTypeLabel}
+              </div>
+              {group.variants.map((variant) => (
+                <button
+                  key={variant.id}
+                  onClick={() => {
+                    onChange({ model: variant.id });
+                    setExpandedGroup(null);
+                    setOpen(false);
+                  }}
+                  className={cn(
+                    'w-full flex items-center justify-between px-2 py-2 rounded-sm text-sm',
+                    'hover:bg-accent cursor-pointer transition-colors',
+                    selectedModel === variant.id && 'bg-accent text-accent-foreground'
+                  )}
+                >
+                  <div className="flex flex-col items-start">
+                    <span className="font-medium text-xs">{variant.label}</span>
+                    {variant.description && (
+                      <span className="text-[10px] text-muted-foreground">
+                        {variant.description}
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    {variant.badge && (
+                      <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                        {variant.badge}
+                      </span>
+                    )}
+                    {selectedModel === variant.id && <Check className="h-3.5 w-3.5 text-primary" />}
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    // Desktop: Use nested popover
+    return (
+      <CommandItem
+        key={group.baseId}
+        value={group.label}
+        onSelect={() => setExpandedGroup(isExpanded ? null : group.baseId)}
+        className="p-0 data-[selected=true]:bg-transparent"
+      >
+        <Popover
+          open={isExpanded}
+          modal={false}
+          onOpenChange={(isOpen) => {
+            if (!isOpen) {
+              setExpandedGroup(null);
+            }
+          }}
+        >
+          <PopoverTrigger asChild>
+            <div
+              ref={isExpanded ? expandedTriggerRef : undefined}
+              className={cn(
+                'w-full group flex items-center justify-between py-2 px-2 rounded-sm cursor-pointer',
+                'hover:bg-accent',
+                isExpanded && 'bg-accent'
+              )}
+            >
+              <div className="flex items-center gap-3 overflow-hidden">
+                <CursorIcon
+                  className={cn(
+                    'h-4 w-4 shrink-0',
+                    groupIsSelected ? 'text-primary' : 'text-muted-foreground'
+                  )}
+                />
+                <div className="flex flex-col truncate">
+                  <span className={cn('truncate font-medium', groupIsSelected && 'text-primary')}>
+                    {group.label}
+                  </span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {selectedVariant ? `Selected: ${selectedVariant.label}` : group.description}
+                  </span>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-1 ml-2">
+                {groupIsSelected && <Check className="h-4 w-4 text-primary shrink-0" />}
+                <ChevronRight
+                  className={cn(
+                    'h-4 w-4 text-muted-foreground transition-transform',
+                    isExpanded && 'rotate-90'
+                  )}
+                />
+              </div>
+            </div>
+          </PopoverTrigger>
+          <PopoverContent
+            side="right"
+            align="start"
+            className="w-[220px] p-1"
+            sideOffset={8}
+            collisionPadding={16}
+            onCloseAutoFocus={(e) => e.preventDefault()}
+          >
+            <div className="space-y-1">
+              <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground border-b border-border/50 mb-1">
+                {variantTypeLabel}
+              </div>
+              {group.variants.map((variant) => (
+                <button
+                  key={variant.id}
+                  onClick={() => {
+                    onChange({ model: variant.id });
+                    setExpandedGroup(null);
+                    setOpen(false);
+                  }}
+                  className={cn(
+                    'w-full flex items-center justify-between px-2 py-2 rounded-sm text-sm',
+                    'hover:bg-accent cursor-pointer transition-colors',
+                    selectedModel === variant.id && 'bg-accent text-accent-foreground'
+                  )}
+                >
+                  <div className="flex flex-col items-start">
+                    <span className="font-medium">{variant.label}</span>
+                    {variant.description && (
+                      <span className="text-xs text-muted-foreground">{variant.description}</span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    {variant.badge && (
+                      <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                        {variant.badge}
+                      </span>
+                    )}
+                    {selectedModel === variant.id && <Check className="h-3.5 w-3.5 text-primary" />}
+                  </div>
+                </button>
+              ))}
+            </div>
+          </PopoverContent>
+        </Popover>
+      </CommandItem>
+    );
+  };
+
+  // Compute a short badge label for the active thinking/reasoning level
+  const activeLevelBadge = useMemo(() => {
+    if (selectedThinkingLevel !== 'none') {
+      return { label: THINKING_LEVEL_LABELS[selectedThinkingLevel], type: 'thinking' as const };
+    }
+    if (selectedReasoningEffort !== 'none') {
+      return {
+        label: REASONING_EFFORT_LABELS[selectedReasoningEffort],
+        type: 'reasoning' as const,
+      };
+    }
+    return null;
+  }, [selectedThinkingLevel, selectedReasoningEffort]);
+
+  // Strip the thinking/reasoning parenthetical from the model name for the trigger
+  // since we show it as a separate badge
+  const triggerModelName = useMemo(() => {
+    const label = currentModel?.label || 'Select model...';
+    // Remove " (Med Thinking)", " (High Reasoning)" etc. from label since badge shows it
+    return label.replace(
+      /\s*\((?:None|Low|Med|Medium|High|Ultra|Adaptive|XHigh|Min)\s+(?:Thinking|Reasoning)\)$/i,
+      ''
+    );
+  }, [currentModel?.label]);
+
+  // Compact trigger button (for agent view etc.)
+  const compactTrigger = (
+    <Button
+      variant="outline"
+      role="combobox"
+      aria-expanded={open}
+      disabled={disabled}
+      className={cn(
+        'h-11 gap-1 text-xs font-medium rounded-xl border-border px-2.5',
+        triggerClassName
+      )}
+      data-testid="model-selector"
+    >
+      {currentModel?.icon && <currentModel.icon className="h-4 w-4 text-muted-foreground/70" />}
+      <span className="truncate text-sm">{triggerModelName?.replace('Claude ', '')}</span>
+      {activeLevelBadge && (
+        <span
+          className={cn(
+            'shrink-0 px-1.5 py-0.5 rounded text-[10px] font-semibold leading-none',
+            activeLevelBadge.type === 'thinking'
+              ? 'bg-purple-500/15 text-purple-600 dark:text-purple-400'
+              : 'bg-blue-500/15 text-blue-600 dark:text-blue-400'
+          )}
+        >
+          {activeLevelBadge.label}
+        </span>
+      )}
+      <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+    </Button>
+  );
+
+  // Full trigger button (for settings view)
+  const fullTrigger = (
+    <Button
+      variant="outline"
+      role="combobox"
+      aria-expanded={open}
+      disabled={disabled}
+      className={cn(
+        'w-full sm:w-[280px] justify-between h-11 rounded-xl border-border px-3 bg-background/50 hover:bg-background/80 hover:text-foreground',
+        triggerClassName
+      )}
+    >
+      <div className="flex items-center gap-2 truncate">
+        {currentModel?.icon && <currentModel.icon className="h-4 w-4 text-muted-foreground/70" />}
+        <span className="truncate text-sm">{triggerModelName}</span>
+        {activeLevelBadge && (
+          <span
+            className={cn(
+              'shrink-0 px-1.5 py-0.5 rounded text-[10px] font-semibold leading-none',
+              activeLevelBadge.type === 'thinking'
+                ? 'bg-purple-500/15 text-purple-600 dark:text-purple-400'
+                : 'bg-blue-500/15 text-blue-600 dark:text-blue-400'
+            )}
+          >
+            {activeLevelBadge.label}
+          </span>
+        )}
+      </div>
+      <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
+    </Button>
+  );
+
+  // The popover content (shared between both modes)
+  const popoverContent = (
+    <PopoverContent
+      className="w-[min(calc(100vw-2rem),320px)] p-0"
+      align={isMobile ? 'start' : align}
+      onWheel={(e) => e.stopPropagation()}
+      onTouchMove={(e) => e.stopPropagation()}
+      onPointerDownOutside={(e) => {
+        // Only prevent close if clicking inside a nested popover (thinking level panel)
+        const target = e.target as HTMLElement;
+        if (target.closest('[data-slot="popover-content"]')) {
+          e.preventDefault();
+        }
+      }}
+    >
+      <Command>
+        <CommandInput placeholder="Search models..." />
+        <CommandList
+          ref={commandListRef}
+          className="max-h-[300px] overflow-y-auto overscroll-contain touch-pan-y"
+        >
+          <CommandEmpty>No model found.</CommandEmpty>
+
+          {favorites.length > 0 && (
+            <>
+              <CommandGroup heading="Favorites">
+                {(() => {
+                  const renderedGroups = new Set<string>();
+                  return favorites.map((model) => {
+                    // Check if this favorite is part of a grouped model
+                    if (model.provider === 'cursor') {
+                      const cursorId = model.id as CursorModelId;
+                      const group = getModelGroup(cursorId);
+                      if (group) {
+                        // Skip if we already rendered this group
+                        if (renderedGroups.has(group.baseId)) {
+                          return null;
+                        }
+                        renderedGroups.add(group.baseId);
+                        // Find the group in groupedModels (which has filtered variants)
+                        const filteredGroup = groupedModels.find((g) => g.baseId === group.baseId);
+                        if (filteredGroup) {
+                          return renderGroupedModelItem(filteredGroup);
+                        }
+                      }
+                      // Standalone Cursor model
+                      return renderCursorModelItem(model);
+                    }
+                    // Codex model
+                    if (model.provider === 'codex') {
+                      return renderCodexModelItem(model as (typeof transformedCodexModels)[0]);
+                    }
+                    // Gemini model
+                    if (model.provider === 'gemini') {
+                      return renderGeminiModelItem(model as (typeof GEMINI_MODELS)[0]);
+                    }
+                    // Copilot model
+                    if (model.provider === 'copilot') {
+                      return renderCopilotModelItem(model as (typeof COPILOT_MODELS)[0]);
+                    }
+                    // OpenCode model
+                    if (model.provider === 'opencode') {
+                      return renderOpencodeModelItem(model);
+                    }
+                    // Claude model
+                    return renderClaudeModelItem(model);
+                  });
+                })()}
+              </CommandGroup>
+              <CommandSeparator />
+            </>
+          )}
+
+          {claude.length > 0 && (
+            <CommandGroup heading="Claude Models">
+              {claude.map((model) => renderClaudeModelItem(model))}
+            </CommandGroup>
+          )}
+
+          {/* ClaudeCompatibleProvider Models - each provider as separate group */}
+          {enabledProviders.map((provider) => {
+            if (!provider.models || provider.models.length === 0) return null;
+
+            // Check if we need provider suffix (multiple providers of same type)
+            const sameTypeCount = enabledProviders.filter(
+              (p) => p.providerType === provider.providerType
+            ).length;
+            const showSuffix = sameTypeCount > 1;
+
+            // Group models by ID and collect all mapped Claude models for each
+            const modelsByIdMap = new Map<
+              string,
+              { model: ProviderModel; mappedModels: ClaudeModelAlias[] }
+            >();
+            for (const model of provider.models) {
+              const existing = modelsByIdMap.get(model.id);
+              if (existing) {
+                // Add this mapped model if not already present
+                if (
+                  model.mapsToClaudeModel &&
+                  !existing.mappedModels.includes(model.mapsToClaudeModel)
+                ) {
+                  existing.mappedModels.push(model.mapsToClaudeModel);
+                }
+              } else {
+                // First occurrence of this model ID
+                modelsByIdMap.set(model.id, {
+                  model,
+                  mappedModels: model.mapsToClaudeModel ? [model.mapsToClaudeModel] : [],
+                });
+              }
+            }
+            const uniqueModelsWithMappings = Array.from(modelsByIdMap.values());
+
+            return (
+              <CommandGroup key={provider.id} heading={`${provider.name} (via Claude)`}>
+                {uniqueModelsWithMappings.map(({ model, mappedModels }) =>
+                  renderProviderModelItem(provider, model, showSuffix, mappedModels)
+                )}
+              </CommandGroup>
+            );
+          })}
+
+          {!isCursorDisabled && (groupedModels.length > 0 || standaloneCursorModels.length > 0) && (
+            <CommandGroup heading="Cursor Models">
+              {/* Grouped models with secondary popover */}
+              {groupedModels.map((group) => renderGroupedModelItem(group))}
+              {/* Standalone models */}
+              {standaloneCursorModels.map((model) => renderCursorModelItem(model))}
+            </CommandGroup>
+          )}
+
+          {codex.length > 0 && (
+            <CommandGroup heading="Codex Models">
+              {codex.map((model) => renderCodexModelItem(model))}
+            </CommandGroup>
+          )}
+
+          {!isGeminiDisabled && gemini.length > 0 && (
+            <CommandGroup heading="Gemini Models">
+              {gemini.map((model) => renderGeminiModelItem(model))}
+            </CommandGroup>
+          )}
+
+          {!isCopilotDisabled && copilot.length > 0 && (
+            <CommandGroup heading="Copilot Models">
+              {copilot.map((model) => renderCopilotModelItem(model))}
+            </CommandGroup>
+          )}
+
+          {opencodeSections.length > 0 && (
+            <CommandGroup heading={OPENCODE_CLI_GROUP_LABEL}>
+              {opencodeSections.map((section, _sectionIndex) => (
+                <Fragment key={section.key}>
+                  <div className="px-2 pt-2 text-xs font-medium text-muted-foreground">
+                    {section.label}
+                  </div>
+                  <div
+                    className={cn(
+                      'space-y-2',
+                      section.key === 'dynamic' && OPENCODE_SECTION_GROUP_PADDING
+                    )}
+                  >
+                    {section.groups.map((group) => (
+                      <div key={group.key} className="space-y-1">
+                        {section.showGroupLabels && (
+                          <div className="px-2 py-1 text-xs font-medium text-muted-foreground">
+                            {group.label}
+                          </div>
+                        )}
+                        {group.models.map((model) => renderOpencodeModelItem(model))}
+                      </div>
+                    ))}
+                  </div>
+                </Fragment>
+              ))}
+            </CommandGroup>
+          )}
+        </CommandList>
+      </Command>
+    </PopoverContent>
+  );
+
+  // Compact mode - just the popover with compact trigger
+  if (compact) {
+    return (
+      <Popover open={open} onOpenChange={setOpen} modal={false}>
+        <PopoverTrigger asChild>{compactTrigger}</PopoverTrigger>
+        {popoverContent}
+      </Popover>
+    );
+  }
+
+  // Full mode - with label and description wrapper
+  return (
+    <div
+      className={cn(
+        'flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-4 rounded-xl',
+        'bg-accent/20 border border-border/30',
+        'hover:bg-accent/30 transition-colors'
+      )}
+    >
+      {/* Label and Description */}
+      <div className="w-full min-w-0 sm:flex-1 sm:pr-4">
+        <h4 className="text-sm font-medium text-foreground">{label}</h4>
+        <p className="text-xs text-muted-foreground">{description}</p>
+      </div>
+
+      {/* Model Selection Popover */}
+      <Popover open={open} onOpenChange={setOpen} modal={false}>
+        <PopoverTrigger asChild>{fullTrigger}</PopoverTrigger>
+        {popoverContent}
+      </Popover>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/prompts/components.tsx b/temp_repo/apps/ui/src/components/views/settings-view/prompts/components.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..81eaeb056e79270299107fd57124f47be0544a1b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/prompts/components.tsx
@@ -0,0 +1,159 @@
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+import { Info, AlertTriangle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { PromptCustomization, CustomPrompt } from '@automaker/types';
+import type { BannerConfig, PromptFieldConfig, PromptFieldProps } from './types';
+
+/**
+ * Calculate dynamic minimum height based on content length.
+ * Ensures long prompts have adequate space.
+ */
+export function calculateMinHeight(text: string): string {
+  const lines = text.split('\n').length;
+  const estimatedLines = Math.max(lines, Math.ceil(text.length / 80));
+  const minHeight = Math.min(Math.max(120, estimatedLines * 20), 600);
+  return `${minHeight}px`;
+}
+
+/**
+ * Renders an info or warning banner.
+ */
+export function Banner({ config }: { config: BannerConfig }) {
+  const isWarning = config.type === 'warning';
+  const Icon = isWarning ? AlertTriangle : Info;
+
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-3 p-4 rounded-xl',
+        isWarning
+          ? 'bg-amber-500/10 border border-amber-500/20'
+          : 'bg-blue-500/10 border border-blue-500/20'
+      )}
+    >
+      <Icon
+        className={cn('w-5 h-5 mt-0.5 shrink-0', isWarning ? 'text-amber-500' : 'text-blue-500')}
+      />
+      <div className="space-y-1">
+        <p className="text-sm text-foreground font-medium">{config.title}</p>
+        <p className="text-xs text-muted-foreground/80 leading-relaxed">{config.description}</p>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * PromptField Component
+ *
+ * Shows a prompt with a toggle to switch between default and custom mode.
+ * - Toggle OFF: Shows default prompt in read-only mode
+ * - Toggle ON: Allows editing, custom value is used instead of default
+ *
+ * Custom value is always preserved, even when toggle is OFF.
+ */
+export function PromptField({
+  label,
+  description,
+  defaultValue,
+  customValue,
+  onCustomValueChange,
+  critical = false,
+}: PromptFieldProps) {
+  const isEnabled = customValue?.enabled ?? false;
+  const displayValue = isEnabled ? (customValue?.value ?? defaultValue) : defaultValue;
+  const minHeight = calculateMinHeight(displayValue);
+
+  const handleToggle = (enabled: boolean) => {
+    const value = customValue?.value ?? defaultValue;
+    onCustomValueChange({ value, enabled });
+  };
+
+  const handleTextChange = (newValue: string) => {
+    if (isEnabled) {
+      onCustomValueChange({ value: newValue, enabled: true });
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      {critical && isEnabled && (
+        <div className="flex items-start gap-2 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20">
+          <AlertTriangle className="w-4 h-4 text-amber-500 mt-0.5 shrink-0" />
+          <div className="flex-1">
+            <p className="text-xs font-medium text-amber-500">Critical Prompt</p>
+            <p className="text-xs text-muted-foreground mt-1">
+              This prompt requires a specific output format. Changing it incorrectly may break
+              functionality. Only modify if you understand the expected structure.
+            </p>
+          </div>
+        </div>
+      )}
+      <div className="flex items-center justify-between">
+        <Label htmlFor={label} className="text-sm font-medium">
+          {label}
+        </Label>
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground">{isEnabled ? 'Custom' : 'Default'}</span>
+          <Switch
+            checked={isEnabled}
+            onCheckedChange={handleToggle}
+            className="data-[state=checked]:bg-brand-500"
+          />
+        </div>
+      </div>
+      <Textarea
+        id={label}
+        value={displayValue}
+        onChange={(e) => handleTextChange(e.target.value)}
+        readOnly={!isEnabled}
+        style={{ minHeight }}
+        className={cn(
+          'font-mono text-xs resize-y',
+          !isEnabled && 'cursor-not-allowed bg-muted/50 text-muted-foreground'
+        )}
+      />
+      <p className="text-xs text-muted-foreground">{description}</p>
+    </div>
+  );
+}
+
+/**
+ * Renders a list of prompt fields from configuration.
+ */
+export function PromptFieldList({
+  fields,
+  category,
+  promptCustomization,
+  updatePrompt,
+}: {
+  fields: PromptFieldConfig[];
+  category: keyof PromptCustomization;
+  promptCustomization?: PromptCustomization;
+  updatePrompt: (
+    category: keyof PromptCustomization,
+    field: string,
+    value: CustomPrompt | undefined
+  ) => void;
+}) {
+  return (
+    <>
+      {fields.map((field) => (
+        <PromptField
+          key={field.key}
+          label={field.label}
+          description={field.description}
+          defaultValue={field.defaultValue}
+          customValue={
+            (promptCustomization?.[category] as Record<string, CustomPrompt> | undefined)?.[
+              field.key
+            ]
+          }
+          onCustomValueChange={(value) => updatePrompt(category, field.key, value)}
+          critical={field.critical}
+        />
+      ))}
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/prompts/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/prompts/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fd8d39897afb8f59272b14a8a10108142c8ffb3a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/prompts/index.ts
@@ -0,0 +1 @@
+export { PromptCustomizationSection } from './prompt-customization-section';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/prompts/prompt-customization-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/prompts/prompt-customization-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..38d54631685e95775b7d90fed02be65550720561
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/prompts/prompt-customization-section.tsx
@@ -0,0 +1,176 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { MessageSquareText, RotateCcw, Info } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { PromptCustomization, CustomPrompt } from '@automaker/types';
+import { TAB_CONFIGS } from './tab-configs';
+import { Banner, PromptFieldList } from './components';
+
+interface PromptCustomizationSectionProps {
+  promptCustomization?: PromptCustomization;
+  onPromptCustomizationChange: (customization: PromptCustomization) => void;
+}
+
+/**
+ * PromptCustomizationSection Component
+ *
+ * Allows users to customize AI prompts for different parts of the application:
+ * - Auto Mode (feature implementation)
+ * - Agent Runner (interactive chat)
+ * - Backlog Plan (Kanban planning)
+ * - Enhancement (feature description improvement)
+ * - And many more...
+ */
+export function PromptCustomizationSection({
+  promptCustomization = {},
+  onPromptCustomizationChange,
+}: PromptCustomizationSectionProps) {
+  const [activeTab, setActiveTab] = useState('auto-mode');
+
+  const updatePrompt = (
+    category: keyof PromptCustomization,
+    field: string,
+    value: CustomPrompt | undefined
+  ) => {
+    const updated = {
+      ...promptCustomization,
+      [category]: {
+        ...promptCustomization[category],
+        [field]: value,
+      },
+    };
+    onPromptCustomizationChange(updated);
+  };
+
+  const resetToDefaults = (category: keyof PromptCustomization) => {
+    const updated = {
+      ...promptCustomization,
+      [category]: {},
+    };
+    onPromptCustomizationChange(updated);
+  };
+
+  const resetAllToDefaults = () => {
+    onPromptCustomizationChange({});
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+      data-testid="prompt-customization-section"
+    >
+      {/* Header */}
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <MessageSquareText className="w-5 h-5 text-brand-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">
+              Prompt Customization
+            </h2>
+          </div>
+          <Button variant="outline" size="sm" onClick={resetAllToDefaults} className="gap-2">
+            <RotateCcw className="w-4 h-4" />
+            Reset All to Defaults
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Customize AI prompts for Auto Mode, Agent Runner, and other features.
+        </p>
+      </div>
+
+      {/* Info Banner */}
+      <div className="px-6 pt-6">
+        <div className="flex items-start gap-3 p-4 rounded-xl bg-blue-500/10 border border-blue-500/20">
+          <Info className="w-5 h-5 text-blue-500 mt-0.5 shrink-0" />
+          <div className="space-y-1">
+            <p className="text-sm text-foreground font-medium">How to Customize Prompts</p>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              Toggle the switch to enable custom mode and edit the prompt. When disabled, the
+              default built-in prompt is used. You can use the default as a starting point by
+              enabling the toggle.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="p-6">
+        <Tabs value={activeTab} onValueChange={setActiveTab}>
+          <TabsList className="grid grid-cols-4 gap-1 h-auto w-full bg-transparent p-0">
+            {TAB_CONFIGS.map((tab) => (
+              <TabsTrigger key={tab.id} value={tab.id} className="gap-2">
+                <tab.icon className="w-4 h-4" />
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+          {TAB_CONFIGS.map((tab) => (
+            <TabsContent key={tab.id} value={tab.id} className="space-y-6 mt-6">
+              {/* Tab Header */}
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-sm font-medium text-foreground">{tab.title}</h3>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => resetToDefaults(tab.category)}
+                  className="gap-2"
+                >
+                  <RotateCcw className="w-3 h-3" />
+                  Reset Section
+                </Button>
+              </div>
+
+              {/* Tab Banner */}
+              {tab.banner && <Banner config={tab.banner} />}
+
+              {/* Main Fields */}
+              {tab.fields.length > 0 && (
+                <div className="space-y-4">
+                  <PromptFieldList
+                    fields={tab.fields}
+                    category={tab.category}
+                    promptCustomization={promptCustomization}
+                    updatePrompt={updatePrompt}
+                  />
+                </div>
+              )}
+
+              {/* Sections (for tabs like Auto Mode with grouped fields) */}
+              {tab.sections?.map((section, idx) => (
+                <div key={idx} className="pt-4 border-t border-border/50">
+                  {section.title && (
+                    <h4 className="text-sm font-medium text-muted-foreground mb-4">
+                      {section.title}
+                    </h4>
+                  )}
+                  {section.banner && (
+                    <div className="mb-4">
+                      <Banner config={section.banner} />
+                    </div>
+                  )}
+                  <div className="space-y-4">
+                    <PromptFieldList
+                      fields={section.fields}
+                      category={tab.category}
+                      promptCustomization={promptCustomization}
+                      updatePrompt={updatePrompt}
+                    />
+                  </div>
+                </div>
+              ))}
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/prompts/tab-configs.ts b/temp_repo/apps/ui/src/components/views/settings-view/prompts/tab-configs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2ec58d930ca5cdc2c043f9b15352068ee1cf34a4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/prompts/tab-configs.ts
@@ -0,0 +1,448 @@
+import {
+  MessageSquareText,
+  Bot,
+  KanbanSquare,
+  Sparkles,
+  GitCommitHorizontal,
+  Type,
+  CheckCircle,
+  Lightbulb,
+  FileCode,
+  FileText,
+  Wand2,
+  Cog,
+} from 'lucide-react';
+import {
+  DEFAULT_AUTO_MODE_PROMPTS,
+  DEFAULT_AGENT_PROMPTS,
+  DEFAULT_BACKLOG_PLAN_PROMPTS,
+  DEFAULT_ENHANCEMENT_PROMPTS,
+  DEFAULT_COMMIT_MESSAGE_PROMPTS,
+  DEFAULT_TITLE_GENERATION_PROMPTS,
+  DEFAULT_ISSUE_VALIDATION_PROMPTS,
+  DEFAULT_IDEATION_PROMPTS,
+  DEFAULT_APP_SPEC_PROMPTS,
+  DEFAULT_CONTEXT_DESCRIPTION_PROMPTS,
+  DEFAULT_SUGGESTIONS_PROMPTS,
+  DEFAULT_TASK_EXECUTION_PROMPTS,
+} from '@automaker/prompts';
+import type { TabConfig } from './types';
+
+/**
+ * Configuration for all prompt customization tabs.
+ * Each tab defines its fields, banners, and optional sections.
+ */
+export const TAB_CONFIGS: TabConfig[] = [
+  {
+    id: 'auto-mode',
+    label: 'Auto Mode',
+    icon: Bot,
+    title: 'Auto Mode Prompts',
+    category: 'autoMode',
+    banner: {
+      type: 'info',
+      title: 'Planning Mode Markers',
+      description:
+        'Planning prompts use special markers like [PLAN_GENERATED] and [SPEC_GENERATED] to control the Auto Mode workflow. These markers must be preserved for proper functionality.',
+    },
+    fields: [
+      {
+        key: 'planningLite',
+        label: 'Planning: Lite Mode',
+        description: 'Quick planning outline without approval requirement',
+        defaultValue: DEFAULT_AUTO_MODE_PROMPTS.planningLite,
+        critical: true,
+      },
+      {
+        key: 'planningLiteWithApproval',
+        label: 'Planning: Lite with Approval',
+        description: 'Planning outline that waits for user approval',
+        defaultValue: DEFAULT_AUTO_MODE_PROMPTS.planningLiteWithApproval,
+        critical: true,
+      },
+      {
+        key: 'planningSpec',
+        label: 'Planning: Spec Mode',
+        description: 'Detailed specification with task breakdown',
+        defaultValue: DEFAULT_AUTO_MODE_PROMPTS.planningSpec,
+        critical: true,
+      },
+      {
+        key: 'planningFull',
+        label: 'Planning: Full SDD Mode',
+        description: 'Comprehensive Software Design Document with phased implementation',
+        defaultValue: DEFAULT_AUTO_MODE_PROMPTS.planningFull,
+        critical: true,
+      },
+    ],
+    sections: [
+      {
+        title: 'Template Prompts',
+        banner: {
+          type: 'info',
+          title: 'Template Variables',
+          description:
+            'Template prompts use Handlebars syntax for variable substitution. Available variables include {{featureId}}, {{title}}, {{description}}, etc.',
+        },
+        fields: [
+          {
+            key: 'featurePromptTemplate',
+            label: 'Feature Prompt Template',
+            description:
+              'Template for building feature implementation prompts. Variables: featureId, title, description, spec, imagePaths, dependencies, verificationInstructions',
+            defaultValue: DEFAULT_AUTO_MODE_PROMPTS.featurePromptTemplate,
+          },
+          {
+            key: 'followUpPromptTemplate',
+            label: 'Follow-up Prompt Template',
+            description:
+              'Template for follow-up prompts when resuming work. Variables: featurePrompt, previousContext, followUpInstructions',
+            defaultValue: DEFAULT_AUTO_MODE_PROMPTS.followUpPromptTemplate,
+          },
+          {
+            key: 'continuationPromptTemplate',
+            label: 'Continuation Prompt Template',
+            description:
+              'Template for continuation prompts. Variables: featurePrompt, previousContext',
+            defaultValue: DEFAULT_AUTO_MODE_PROMPTS.continuationPromptTemplate,
+          },
+          {
+            key: 'pipelineStepPromptTemplate',
+            label: 'Pipeline Step Prompt Template',
+            description:
+              'Template for pipeline step execution prompts. Variables: stepName, featurePrompt, previousContext, stepInstructions',
+            defaultValue: DEFAULT_AUTO_MODE_PROMPTS.pipelineStepPromptTemplate,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'agent',
+    label: 'Agent',
+    icon: MessageSquareText,
+    title: 'Agent Runner Prompts',
+    category: 'agent',
+    fields: [
+      {
+        key: 'systemPrompt',
+        label: 'System Prompt',
+        description: "Defines the AI's role and behavior in interactive chat sessions",
+        defaultValue: DEFAULT_AGENT_PROMPTS.systemPrompt,
+      },
+    ],
+  },
+  {
+    id: 'backlog-plan',
+    label: 'Backlog',
+    icon: KanbanSquare,
+    title: 'Backlog Planning Prompts',
+    category: 'backlogPlan',
+    banner: {
+      type: 'warning',
+      title: 'Warning: Critical Prompts',
+      description:
+        'Backlog plan prompts require a strict JSON output format. Modifying these prompts incorrectly can break the backlog planning feature and potentially corrupt your feature data. Only customize if you fully understand the expected output structure.',
+    },
+    fields: [
+      {
+        key: 'systemPrompt',
+        label: 'System Prompt',
+        description:
+          'Defines how the AI modifies the feature backlog (Plan button on Kanban board)',
+        defaultValue: DEFAULT_BACKLOG_PLAN_PROMPTS.systemPrompt,
+        critical: true,
+      },
+      {
+        key: 'userPromptTemplate',
+        label: 'User Prompt Template',
+        description:
+          'Template for the user prompt sent to the AI. Variables: currentFeatures, userRequest',
+        defaultValue: DEFAULT_BACKLOG_PLAN_PROMPTS.userPromptTemplate,
+        critical: true,
+      },
+    ],
+  },
+  {
+    id: 'enhancement',
+    label: 'Enhancement',
+    icon: Sparkles,
+    title: 'Enhancement Prompts',
+    category: 'enhancement',
+    fields: [
+      {
+        key: 'improveSystemPrompt',
+        label: 'Improve Mode',
+        description: 'Transform vague requests into clear, actionable tasks',
+        defaultValue: DEFAULT_ENHANCEMENT_PROMPTS.improveSystemPrompt,
+      },
+      {
+        key: 'technicalSystemPrompt',
+        label: 'Technical Mode',
+        description: 'Add implementation details and technical specifications',
+        defaultValue: DEFAULT_ENHANCEMENT_PROMPTS.technicalSystemPrompt,
+      },
+      {
+        key: 'simplifySystemPrompt',
+        label: 'Simplify Mode',
+        description: 'Make verbose descriptions concise and focused',
+        defaultValue: DEFAULT_ENHANCEMENT_PROMPTS.simplifySystemPrompt,
+      },
+      {
+        key: 'acceptanceSystemPrompt',
+        label: 'Acceptance Criteria Mode',
+        description: 'Add testable acceptance criteria to descriptions',
+        defaultValue: DEFAULT_ENHANCEMENT_PROMPTS.acceptanceSystemPrompt,
+      },
+      {
+        key: 'uxReviewerSystemPrompt',
+        label: 'User Experience Mode',
+        description: 'Review and enhance from a user experience and design perspective',
+        defaultValue: DEFAULT_ENHANCEMENT_PROMPTS.uxReviewerSystemPrompt,
+      },
+    ],
+  },
+  {
+    id: 'commit-message',
+    label: 'Commit',
+    icon: GitCommitHorizontal,
+    title: 'Commit Message Prompts',
+    category: 'commitMessage',
+    fields: [
+      {
+        key: 'systemPrompt',
+        label: 'System Prompt',
+        description:
+          'Instructions for generating git commit messages from diffs. The AI will receive the git diff and generate a conventional commit message.',
+        defaultValue: DEFAULT_COMMIT_MESSAGE_PROMPTS.systemPrompt,
+      },
+    ],
+  },
+  {
+    id: 'title-generation',
+    label: 'Title',
+    icon: Type,
+    title: 'Title Generation Prompts',
+    category: 'titleGeneration',
+    fields: [
+      {
+        key: 'systemPrompt',
+        label: 'System Prompt',
+        description:
+          'Instructions for generating concise, descriptive feature titles from descriptions. Used when auto-generating titles for new features.',
+        defaultValue: DEFAULT_TITLE_GENERATION_PROMPTS.systemPrompt,
+      },
+    ],
+  },
+  {
+    id: 'issue-validation',
+    label: 'Issues',
+    icon: CheckCircle,
+    title: 'Issue Validation Prompts',
+    category: 'issueValidation',
+    banner: {
+      type: 'warning',
+      title: 'Warning: Critical Prompt',
+      description:
+        'The issue validation prompt guides the AI through a structured validation process and expects specific output format. Modifying this prompt incorrectly may affect validation accuracy.',
+    },
+    fields: [
+      {
+        key: 'systemPrompt',
+        label: 'System Prompt',
+        description:
+          'Instructions for validating GitHub issues against the codebase. Guides the AI to determine if issues are valid, invalid, or need clarification.',
+        defaultValue: DEFAULT_ISSUE_VALIDATION_PROMPTS.systemPrompt,
+        critical: true,
+      },
+    ],
+  },
+  {
+    id: 'ideation',
+    label: 'Ideation',
+    icon: Lightbulb,
+    title: 'Ideation Prompts',
+    category: 'ideation',
+    fields: [
+      {
+        key: 'ideationSystemPrompt',
+        label: 'Ideation Chat System Prompt',
+        description:
+          'System prompt for AI-powered ideation chat conversations. Guides the AI to brainstorm and suggest feature ideas.',
+        defaultValue: DEFAULT_IDEATION_PROMPTS.ideationSystemPrompt,
+      },
+      {
+        key: 'suggestionsSystemPrompt',
+        label: 'Suggestions System Prompt',
+        description:
+          'System prompt for generating structured feature suggestions. Used when generating batch suggestions from prompts.',
+        defaultValue: DEFAULT_IDEATION_PROMPTS.suggestionsSystemPrompt,
+        critical: true,
+      },
+    ],
+  },
+  {
+    id: 'app-spec',
+    label: 'App Spec',
+    icon: FileCode,
+    title: 'App Specification Prompts',
+    category: 'appSpec',
+    fields: [
+      {
+        key: 'generateSpecSystemPrompt',
+        label: 'Generate Spec System Prompt',
+        description: 'System prompt for generating project specifications from overview',
+        defaultValue: DEFAULT_APP_SPEC_PROMPTS.generateSpecSystemPrompt,
+      },
+      {
+        key: 'structuredSpecInstructions',
+        label: 'Structured Spec Instructions',
+        description: 'Instructions for structured specification output format',
+        defaultValue: DEFAULT_APP_SPEC_PROMPTS.structuredSpecInstructions,
+        critical: true,
+      },
+      {
+        key: 'generateFeaturesFromSpecPrompt',
+        label: 'Generate Features from Spec',
+        description: 'Prompt for generating features from a project specification',
+        defaultValue: DEFAULT_APP_SPEC_PROMPTS.generateFeaturesFromSpecPrompt,
+        critical: true,
+      },
+    ],
+  },
+  {
+    id: 'context-description',
+    label: 'Context',
+    icon: FileText,
+    title: 'Context Description Prompts',
+    category: 'contextDescription',
+    fields: [
+      {
+        key: 'describeFilePrompt',
+        label: 'Describe File Prompt',
+        description: 'Prompt for generating descriptions of text files added as context',
+        defaultValue: DEFAULT_CONTEXT_DESCRIPTION_PROMPTS.describeFilePrompt,
+      },
+      {
+        key: 'describeImagePrompt',
+        label: 'Describe Image Prompt',
+        description: 'Prompt for generating descriptions of images added as context',
+        defaultValue: DEFAULT_CONTEXT_DESCRIPTION_PROMPTS.describeImagePrompt,
+      },
+    ],
+  },
+  {
+    id: 'suggestions',
+    label: 'Suggestions',
+    icon: Wand2,
+    title: 'Suggestions Prompts',
+    category: 'suggestions',
+    fields: [
+      {
+        key: 'featuresPrompt',
+        label: 'Features Suggestion Prompt',
+        description: 'Prompt for analyzing the project and suggesting new features',
+        defaultValue: DEFAULT_SUGGESTIONS_PROMPTS.featuresPrompt,
+      },
+      {
+        key: 'refactoringPrompt',
+        label: 'Refactoring Suggestion Prompt',
+        description: 'Prompt for identifying refactoring opportunities',
+        defaultValue: DEFAULT_SUGGESTIONS_PROMPTS.refactoringPrompt,
+      },
+      {
+        key: 'securityPrompt',
+        label: 'Security Suggestion Prompt',
+        description: 'Prompt for analyzing security vulnerabilities',
+        defaultValue: DEFAULT_SUGGESTIONS_PROMPTS.securityPrompt,
+      },
+      {
+        key: 'performancePrompt',
+        label: 'Performance Suggestion Prompt',
+        description: 'Prompt for identifying performance issues',
+        defaultValue: DEFAULT_SUGGESTIONS_PROMPTS.performancePrompt,
+      },
+      {
+        key: 'baseTemplate',
+        label: 'Base Template',
+        description: 'Base template applied to all suggestion types',
+        defaultValue: DEFAULT_SUGGESTIONS_PROMPTS.baseTemplate,
+      },
+    ],
+  },
+  {
+    id: 'task-execution',
+    label: 'Tasks',
+    icon: Cog,
+    title: 'Task Execution Prompts',
+    category: 'taskExecution',
+    banner: {
+      type: 'info',
+      title: 'Template Variables',
+      description:
+        'Task execution prompts use Handlebars syntax for variable substitution. Variables include {{taskId}}, {{taskDescription}}, {{completedTasks}}, etc.',
+    },
+    fields: [
+      {
+        key: 'taskPromptTemplate',
+        label: 'Task Prompt Template',
+        description: 'Template for building individual task execution prompts',
+        defaultValue: DEFAULT_TASK_EXECUTION_PROMPTS.taskPromptTemplate,
+      },
+      {
+        key: 'implementationInstructions',
+        label: 'Implementation Instructions',
+        description: 'Instructions appended to feature implementation prompts',
+        defaultValue: DEFAULT_TASK_EXECUTION_PROMPTS.implementationInstructions,
+      },
+      {
+        key: 'playwrightVerificationInstructions',
+        label: 'Playwright Verification Instructions',
+        description: 'Instructions for automated Playwright verification (when enabled)',
+        defaultValue: DEFAULT_TASK_EXECUTION_PROMPTS.playwrightVerificationInstructions,
+      },
+      {
+        key: 'learningExtractionSystemPrompt',
+        label: 'Learning Extraction System Prompt',
+        description: 'System prompt for extracting learnings/ADRs from implementation output',
+        defaultValue: DEFAULT_TASK_EXECUTION_PROMPTS.learningExtractionSystemPrompt,
+        critical: true,
+      },
+      {
+        key: 'learningExtractionUserPromptTemplate',
+        label: 'Learning Extraction User Template',
+        description:
+          'User prompt template for learning extraction. Variables: featureTitle, implementationLog',
+        defaultValue: DEFAULT_TASK_EXECUTION_PROMPTS.learningExtractionUserPromptTemplate,
+        critical: true,
+      },
+      {
+        key: 'planRevisionTemplate',
+        label: 'Plan Revision Template',
+        description:
+          'Template for prompting plan revisions. Variables: planVersion, previousPlan, userFeedback',
+        defaultValue: DEFAULT_TASK_EXECUTION_PROMPTS.planRevisionTemplate,
+      },
+      {
+        key: 'continuationAfterApprovalTemplate',
+        label: 'Continuation After Approval Template',
+        description:
+          'Template for continuation after plan approval. Variables: userFeedback, approvedPlan',
+        defaultValue: DEFAULT_TASK_EXECUTION_PROMPTS.continuationAfterApprovalTemplate,
+      },
+      {
+        key: 'resumeFeatureTemplate',
+        label: 'Resume Feature Template',
+        description:
+          'Template for resuming interrupted features. Variables: featurePrompt, previousContext',
+        defaultValue: DEFAULT_TASK_EXECUTION_PROMPTS.resumeFeatureTemplate,
+      },
+      {
+        key: 'projectAnalysisPrompt',
+        label: 'Project Analysis Prompt',
+        description: 'Prompt for AI-powered project analysis',
+        defaultValue: DEFAULT_TASK_EXECUTION_PROMPTS.projectAnalysisPrompt,
+      },
+    ],
+  },
+];
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/prompts/types.ts b/temp_repo/apps/ui/src/components/views/settings-view/prompts/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bd08722991d5ea3c6aa45bed94ed31b7270ab2ed
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/prompts/types.ts
@@ -0,0 +1,51 @@
+import type { LucideIcon } from 'lucide-react';
+import type { PromptCustomization, CustomPrompt } from '@automaker/types';
+
+/** Props for the PromptField component */
+export interface PromptFieldProps {
+  label: string;
+  description: string;
+  defaultValue: string;
+  customValue?: CustomPrompt;
+  onCustomValueChange: (value: CustomPrompt | undefined) => void;
+  critical?: boolean;
+}
+
+/** Configuration for a single prompt field */
+export interface PromptFieldConfig {
+  key: string;
+  label: string;
+  description: string;
+  defaultValue: string;
+  critical?: boolean;
+}
+
+/** Banner type for tabs */
+export type BannerType = 'info' | 'warning';
+
+/** Configuration for info/warning banners */
+export interface BannerConfig {
+  type: BannerType;
+  title: string;
+  description: string;
+}
+
+/** Configuration for a section within a tab */
+export interface TabSectionConfig {
+  title?: string;
+  banner?: BannerConfig;
+  fields: PromptFieldConfig[];
+}
+
+/** Configuration for a tab with prompt fields */
+export interface TabConfig {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+  title: string;
+  category: keyof PromptCustomization;
+  banner?: BannerConfig;
+  fields: PromptFieldConfig[];
+  /** For tabs with grouped sections (like Auto Mode) */
+  sections?: TabSectionConfig[];
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7d90924e09eb83be7eb77e2e68f0d15b9dadebdb
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab.tsx
@@ -0,0 +1,77 @@
+// @ts-nocheck - Claude settings form with CLI status and authentication state
+import { useAppStore } from '@/store/app-store';
+import { useSetupStore } from '@/store/setup-store';
+import { useCliStatus } from '../hooks/use-cli-status';
+import { ClaudeCliStatus } from '../cli-status/claude-cli-status';
+import { ClaudeMdSettings } from '../claude/claude-md-settings';
+import { ClaudeUsageSection } from '../api-keys/claude-usage-section';
+import { SkillsSection } from './claude-settings-tab/skills-section';
+import { SubagentsSection } from './claude-settings-tab/subagents-section';
+import { ApiProfilesSection } from './claude-settings-tab/api-profiles-section';
+import { ProviderToggle } from './provider-toggle';
+import { Info } from 'lucide-react';
+
+export function ClaudeSettingsTab() {
+  const {
+    apiKeys,
+    autoLoadClaudeMd,
+    setAutoLoadClaudeMd,
+    useClaudeCodeSystemPrompt,
+    setUseClaudeCodeSystemPrompt,
+  } = useAppStore();
+  const { claudeAuthStatus } = useSetupStore();
+
+  // Use CLI status hook
+  const { claudeCliStatus, isCheckingClaudeCli, handleRefreshClaudeCli } = useCliStatus();
+
+  // Hide usage tracking when using API key (only show for Claude Code CLI users)
+  // Also hide on Windows for now (CLI usage command not supported)
+  const isWindows =
+    typeof navigator !== 'undefined' && navigator.platform?.toLowerCase().includes('win');
+  const showUsageTracking = !apiKeys.anthropic && !isWindows;
+
+  return (
+    <div className="space-y-6">
+      {/* Provider Visibility Toggle */}
+      <ProviderToggle provider="claude" providerLabel="Claude" />
+
+      {/* Usage Info */}
+      <div className="flex items-start gap-3 p-4 rounded-xl bg-blue-500/10 border border-blue-500/20">
+        <Info className="w-5 h-5 text-blue-400 shrink-0 mt-0.5" />
+        <div className="text-sm text-blue-400/90">
+          <span className="font-medium">Primary Provider</span>
+          <p className="text-xs text-blue-400/70 mt-1">
+            Claude is used throughout the app including chat, analysis, and agent tasks.
+          </p>
+        </div>
+      </div>
+
+      <ClaudeCliStatus
+        status={claudeCliStatus}
+        authStatus={claudeAuthStatus}
+        isChecking={isCheckingClaudeCli}
+        onRefresh={handleRefreshClaudeCli}
+      />
+
+      {/* Claude-compatible providers */}
+      <ApiProfilesSection />
+
+      <ClaudeMdSettings
+        autoLoadClaudeMd={autoLoadClaudeMd}
+        onAutoLoadClaudeMdChange={setAutoLoadClaudeMd}
+        useClaudeCodeSystemPrompt={useClaudeCodeSystemPrompt}
+        onUseClaudeCodeSystemPromptChange={setUseClaudeCodeSystemPrompt}
+      />
+
+      {/* Skills Configuration */}
+      <SkillsSection />
+
+      {/* Custom Subagents */}
+      <SubagentsSection />
+
+      {showUsageTracking && <ClaudeUsageSection />}
+    </div>
+  );
+}
+
+export default ClaudeSettingsTab;
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/api-profiles-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/api-profiles-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a9b9626377535257d0ea2269c362b45d2214c310
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/api-profiles-section.tsx
@@ -0,0 +1,911 @@
+import { useState } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+import {
+  ChevronDown,
+  Eye,
+  EyeOff,
+  ExternalLink,
+  MoreVertical,
+  Pencil,
+  Plus,
+  Server,
+  Settings2,
+  Trash2,
+  Zap,
+} from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import type {
+  ClaudeCompatibleProvider,
+  ClaudeCompatibleProviderType,
+  ApiKeySource,
+  ProviderModel,
+  ClaudeModelAlias,
+} from '@automaker/types';
+import { CLAUDE_PROVIDER_TEMPLATES } from '@automaker/types';
+import { Badge } from '@/components/ui/badge';
+
+// Generate unique ID for providers
+function generateProviderId(): string {
+  return `provider-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+}
+
+// Mask API key for display (show first 4 + last 4 chars)
+function maskApiKey(key?: string): string {
+  if (!key || key.length <= 8) return '••••••••';
+  return `${key.substring(0, 4)}••••${key.substring(key.length - 4)}`;
+}
+
+// Provider type display names
+const PROVIDER_TYPE_LABELS: Record<ClaudeCompatibleProviderType, string> = {
+  anthropic: 'Anthropic',
+  glm: 'GLM',
+  minimax: 'MiniMax',
+  openrouter: 'OpenRouter',
+  custom: 'Custom',
+};
+
+// Provider type badge colors
+const PROVIDER_TYPE_COLORS: Record<ClaudeCompatibleProviderType, string> = {
+  anthropic: 'bg-brand-500/20 text-brand-500',
+  glm: 'bg-emerald-500/20 text-emerald-500',
+  minimax: 'bg-purple-500/20 text-purple-500',
+  openrouter: 'bg-amber-500/20 text-amber-500',
+  custom: 'bg-zinc-500/20 text-zinc-400',
+};
+
+// Claude model display names
+const CLAUDE_MODEL_LABELS: Record<ClaudeModelAlias, string> = {
+  haiku: 'Claude Haiku',
+  sonnet: 'Claude Sonnet',
+  opus: 'Claude Opus',
+};
+
+interface ModelFormEntry {
+  id: string;
+  displayName: string;
+  mapsToClaudeModel: ClaudeModelAlias;
+}
+
+interface ProviderFormData {
+  name: string;
+  providerType: ClaudeCompatibleProviderType;
+  baseUrl: string;
+  apiKeySource: ApiKeySource;
+  apiKey: string;
+  useAuthToken: boolean;
+  timeoutMs: string; // String for input, convert to number
+  models: ModelFormEntry[];
+  disableNonessentialTraffic: boolean;
+}
+
+const emptyFormData: ProviderFormData = {
+  name: '',
+  providerType: 'custom',
+  baseUrl: '',
+  apiKeySource: 'inline',
+  apiKey: '',
+  useAuthToken: false,
+  timeoutMs: '',
+  models: [],
+  disableNonessentialTraffic: false,
+};
+
+// Provider types that have fixed settings (no need to show toggles)
+const FIXED_SETTINGS_PROVIDERS: ClaudeCompatibleProviderType[] = ['glm', 'minimax'];
+
+// Check if provider type has fixed settings
+function hasFixedSettings(providerType: ClaudeCompatibleProviderType): boolean {
+  return FIXED_SETTINGS_PROVIDERS.includes(providerType);
+}
+
+export function ApiProfilesSection() {
+  const {
+    claudeCompatibleProviders,
+    addClaudeCompatibleProvider,
+    updateClaudeCompatibleProvider,
+    deleteClaudeCompatibleProvider,
+    toggleClaudeCompatibleProviderEnabled,
+  } = useAppStore();
+
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [editingProviderId, setEditingProviderId] = useState<string | null>(null);
+  const [formData, setFormData] = useState<ProviderFormData>(emptyFormData);
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+  const [currentTemplate, setCurrentTemplate] = useState<
+    (typeof CLAUDE_PROVIDER_TEMPLATES)[0] | null
+  >(null);
+  const [showModelMappings, setShowModelMappings] = useState(false);
+
+  const handleOpenAddDialog = (templateName?: string) => {
+    const template = templateName
+      ? CLAUDE_PROVIDER_TEMPLATES.find((t) => t.name === templateName)
+      : undefined;
+
+    if (template) {
+      setFormData({
+        name: template.name,
+        providerType: template.providerType,
+        baseUrl: template.baseUrl,
+        apiKeySource: template.defaultApiKeySource ?? 'inline',
+        apiKey: '',
+        useAuthToken: template.useAuthToken,
+        timeoutMs: template.timeoutMs?.toString() ?? '',
+        models: (template.defaultModels || []).map((m) => ({
+          id: m.id,
+          displayName: m.displayName,
+          mapsToClaudeModel: m.mapsToClaudeModel || 'sonnet',
+        })),
+        disableNonessentialTraffic: template.disableNonessentialTraffic ?? false,
+      });
+      setCurrentTemplate(template);
+    } else {
+      setFormData(emptyFormData);
+      setCurrentTemplate(null);
+    }
+
+    setEditingProviderId(null);
+    setShowApiKey(false);
+    // For fixed providers, hide model mappings by default (they have sensible defaults)
+    setShowModelMappings(template ? !hasFixedSettings(template.providerType) : true);
+    setIsDialogOpen(true);
+  };
+
+  const handleOpenEditDialog = (provider: ClaudeCompatibleProvider) => {
+    // Find matching template by provider type
+    const template = CLAUDE_PROVIDER_TEMPLATES.find(
+      (t) => t.providerType === provider.providerType
+    );
+
+    setFormData({
+      name: provider.name,
+      providerType: provider.providerType,
+      baseUrl: provider.baseUrl,
+      apiKeySource: provider.apiKeySource ?? 'inline',
+      apiKey: provider.apiKey ?? '',
+      useAuthToken: provider.useAuthToken ?? false,
+      timeoutMs: provider.timeoutMs?.toString() ?? '',
+      models: (provider.models || []).map((m) => ({
+        id: m.id,
+        displayName: m.displayName,
+        mapsToClaudeModel: m.mapsToClaudeModel || 'sonnet',
+      })),
+      disableNonessentialTraffic: provider.disableNonessentialTraffic ?? false,
+    });
+    setEditingProviderId(provider.id);
+    setCurrentTemplate(template ?? null);
+    setShowApiKey(false);
+    // For fixed providers, hide model mappings by default when editing
+    setShowModelMappings(!hasFixedSettings(provider.providerType));
+    setIsDialogOpen(true);
+  };
+
+  const handleSave = () => {
+    // For GLM/MiniMax, enforce fixed settings
+    const isFixedProvider = hasFixedSettings(formData.providerType);
+
+    // Convert form models to ProviderModel format
+    const models: ProviderModel[] = formData.models
+      .filter((m) => m.id.trim()) // Only include models with IDs
+      .map((m) => ({
+        id: m.id.trim(),
+        displayName: m.displayName.trim() || m.id.trim(),
+        mapsToClaudeModel: m.mapsToClaudeModel,
+      }));
+
+    // Preserve enabled state when editing, default to true for new providers
+    const existingProvider = editingProviderId
+      ? claudeCompatibleProviders.find((p) => p.id === editingProviderId)
+      : undefined;
+
+    const providerData: ClaudeCompatibleProvider = {
+      id: editingProviderId ?? generateProviderId(),
+      name: formData.name.trim(),
+      providerType: formData.providerType,
+      enabled: existingProvider?.enabled ?? true,
+      baseUrl: formData.baseUrl.trim(),
+      // For fixed providers, always use inline
+      apiKeySource: isFixedProvider ? 'inline' : formData.apiKeySource,
+      // Only include apiKey when source is 'inline'
+      apiKey: isFixedProvider || formData.apiKeySource === 'inline' ? formData.apiKey : undefined,
+      // For fixed providers, always use auth token
+      useAuthToken: isFixedProvider ? true : formData.useAuthToken,
+      timeoutMs: (() => {
+        const parsed = Number(formData.timeoutMs);
+        return Number.isFinite(parsed) ? parsed : undefined;
+      })(),
+      models,
+      // For fixed providers, always disable non-essential
+      disableNonessentialTraffic: isFixedProvider
+        ? true
+        : formData.disableNonessentialTraffic || undefined,
+    };
+
+    if (editingProviderId) {
+      updateClaudeCompatibleProvider(editingProviderId, providerData);
+    } else {
+      addClaudeCompatibleProvider(providerData);
+    }
+
+    setIsDialogOpen(false);
+    setFormData(emptyFormData);
+    setEditingProviderId(null);
+  };
+
+  const handleDelete = (id: string) => {
+    deleteClaudeCompatibleProvider(id);
+    setDeleteConfirmId(null);
+  };
+
+  const handleAddModel = () => {
+    setFormData({
+      ...formData,
+      models: [...formData.models, { id: '', displayName: '', mapsToClaudeModel: 'sonnet' }],
+    });
+  };
+
+  const handleUpdateModel = (index: number, updates: Partial<ModelFormEntry>) => {
+    const newModels = [...formData.models];
+    newModels[index] = { ...newModels[index], ...updates };
+    setFormData({ ...formData, models: newModels });
+  };
+
+  const handleRemoveModel = (index: number) => {
+    setFormData({
+      ...formData,
+      models: formData.models.filter((_, i) => i !== index),
+    });
+  };
+
+  // Check for duplicate provider name (case-insensitive, excluding current provider when editing)
+  const isDuplicateName = claudeCompatibleProviders.some(
+    (p) => p.name.toLowerCase() === formData.name.trim().toLowerCase() && p.id !== editingProviderId
+  );
+
+  // For fixed providers, API key is always required (inline only)
+  // For others, only required when source is 'inline'
+  const isFixedProvider = hasFixedSettings(formData.providerType);
+  const isFormValid =
+    formData.name.trim().length > 0 &&
+    formData.baseUrl.trim().length > 0 &&
+    (isFixedProvider
+      ? formData.apiKey.length > 0
+      : formData.apiKeySource !== 'inline' || formData.apiKey.length > 0) &&
+    !isDuplicateName;
+
+  // Check model coverage
+  const modelCoverage = {
+    hasHaiku: formData.models.some((m) => m.mapsToClaudeModel === 'haiku'),
+    hasSonnet: formData.models.some((m) => m.mapsToClaudeModel === 'sonnet'),
+    hasOpus: formData.models.some((m) => m.mapsToClaudeModel === 'opus'),
+  };
+  const hasAllMappings = modelCoverage.hasHaiku && modelCoverage.hasSonnet && modelCoverage.hasOpus;
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-linear-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 py-4 border-b border-border/50">
+        <div className="flex items-center gap-3">
+          <div className="p-2 rounded-lg bg-brand-500/10">
+            <Server className="w-5 h-5 text-brand-500" />
+          </div>
+          <div>
+            <h3 className="font-semibold text-foreground">Model Providers</h3>
+            <p className="text-xs text-muted-foreground">
+              Configure providers whose models appear in all model selectors
+            </p>
+          </div>
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button size="sm" className="gap-2">
+              <Plus className="w-4 h-4" />
+              Add Provider
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => handleOpenAddDialog()}>
+              <Plus className="w-4 h-4 mr-2" />
+              Custom Provider
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            {CLAUDE_PROVIDER_TEMPLATES.filter((t) => t.providerType !== 'anthropic').map(
+              (template) => (
+                <DropdownMenuItem
+                  key={template.name}
+                  onClick={() => handleOpenAddDialog(template.name)}
+                >
+                  <Zap className="w-4 h-4 mr-2" />
+                  {template.name}
+                </DropdownMenuItem>
+              )
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Content */}
+      <div className="p-6 space-y-4">
+        {/* Info Banner */}
+        <div className="p-3 rounded-lg bg-brand-500/5 border border-brand-500/20 text-sm text-muted-foreground">
+          Models from enabled providers appear in all model dropdowns throughout the app. You can
+          select different models from different providers for each phase.
+        </div>
+
+        {/* Provider List */}
+        {claudeCompatibleProviders.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground border border-dashed border-border/50 rounded-lg">
+            <Server className="w-12 h-12 mx-auto mb-3 opacity-50" />
+            <p className="text-sm">No model providers configured</p>
+            <p className="text-xs mt-1">
+              Add a provider to use alternative Claude-compatible models
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {claudeCompatibleProviders.map((provider) => (
+              <ProviderCard
+                key={provider.id}
+                provider={provider}
+                onEdit={() => handleOpenEditDialog(provider)}
+                onDelete={() => setDeleteConfirmId(provider.id)}
+                onToggleEnabled={() => toggleClaudeCompatibleProviderEnabled(provider.id)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Add/Edit Dialog */}
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="max-w-lg max-h-[85vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>
+              {editingProviderId ? 'Edit Model Provider' : 'Add Model Provider'}
+            </DialogTitle>
+            <DialogDescription>
+              {isFixedProvider
+                ? `Configure ${PROVIDER_TYPE_LABELS[formData.providerType]} endpoint with model mappings to Claude.`
+                : 'Configure a Claude-compatible API endpoint. Models from this provider will appear in all model selectors.'}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            {/* Name */}
+            <div className="space-y-2">
+              <Label htmlFor="provider-name">Provider Name</Label>
+              <Input
+                id="provider-name"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                placeholder="e.g., GLM (Work)"
+                className={isDuplicateName ? 'border-destructive' : ''}
+              />
+              {isDuplicateName && (
+                <p className="text-xs text-destructive">A provider with this name already exists</p>
+              )}
+            </div>
+
+            {/* Provider Type - only for custom providers */}
+            {!isFixedProvider && (
+              <div className="space-y-2">
+                <Label>Provider Type</Label>
+                <Select
+                  value={formData.providerType}
+                  onValueChange={(value: ClaudeCompatibleProviderType) =>
+                    setFormData({ ...formData, providerType: value })
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="Select provider type" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="glm">GLM (z.AI)</SelectItem>
+                    <SelectItem value="minimax">MiniMax</SelectItem>
+                    <SelectItem value="openrouter">OpenRouter</SelectItem>
+                    <SelectItem value="anthropic">Anthropic</SelectItem>
+                    <SelectItem value="custom">Custom</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
+            {/* API Key - always shown first for fixed providers */}
+            <div className="space-y-2">
+              <Label htmlFor="provider-api-key">API Key</Label>
+              <div className="relative">
+                <Input
+                  id="provider-api-key"
+                  type={showApiKey ? 'text' : 'password'}
+                  value={formData.apiKey}
+                  onChange={(e) => setFormData({ ...formData, apiKey: e.target.value })}
+                  placeholder="Enter API key"
+                  className="pr-10"
+                />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground hover:bg-transparent"
+                  onClick={() => setShowApiKey(!showApiKey)}
+                >
+                  {showApiKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </Button>
+              </div>
+              {currentTemplate?.apiKeyUrl && (
+                <a
+                  href={currentTemplate.apiKeyUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1 text-xs text-brand-500 hover:text-brand-400"
+                >
+                  Get API Key from {currentTemplate.name} <ExternalLink className="w-3 h-3" />
+                </a>
+              )}
+            </div>
+
+            {/* Base URL - hidden for fixed providers since it's pre-configured */}
+            {!isFixedProvider && (
+              <div className="space-y-2">
+                <Label htmlFor="provider-base-url">API Base URL</Label>
+                <Input
+                  id="provider-base-url"
+                  value={formData.baseUrl}
+                  onChange={(e) => setFormData({ ...formData, baseUrl: e.target.value })}
+                  placeholder="https://api.example.com/v1"
+                />
+              </div>
+            )}
+
+            {/* Advanced options for non-fixed providers only */}
+            {!isFixedProvider && (
+              <>
+                {/* API Key Source */}
+                <div className="space-y-2">
+                  <Label>API Key Source</Label>
+                  <Select
+                    value={formData.apiKeySource}
+                    onValueChange={(value: ApiKeySource) =>
+                      setFormData({ ...formData, apiKeySource: value })
+                    }
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select API key source" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="inline">Enter key for this provider only</SelectItem>
+                      <SelectItem value="credentials">
+                        Use saved API key (from Settings → API Keys)
+                      </SelectItem>
+                      <SelectItem value="env">
+                        Use environment variable (ANTHROPIC_API_KEY)
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* Use Auth Token */}
+                <div className="flex items-center justify-between py-2">
+                  <div>
+                    <Label htmlFor="use-auth-token" className="font-medium">
+                      Use Auth Token
+                    </Label>
+                    <p className="text-xs text-muted-foreground">
+                      Use ANTHROPIC_AUTH_TOKEN instead of ANTHROPIC_API_KEY
+                    </p>
+                  </div>
+                  <Switch
+                    id="use-auth-token"
+                    checked={formData.useAuthToken}
+                    onCheckedChange={(checked) =>
+                      setFormData({ ...formData, useAuthToken: checked })
+                    }
+                  />
+                </div>
+
+                {/* Disable Non-essential Traffic */}
+                <div className="flex items-center justify-between py-2">
+                  <div>
+                    <Label htmlFor="disable-traffic" className="font-medium">
+                      Disable Non-essential Traffic
+                    </Label>
+                    <p className="text-xs text-muted-foreground">
+                      Sets CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1
+                    </p>
+                  </div>
+                  <Switch
+                    id="disable-traffic"
+                    checked={formData.disableNonessentialTraffic}
+                    onCheckedChange={(checked) =>
+                      setFormData({ ...formData, disableNonessentialTraffic: checked })
+                    }
+                  />
+                </div>
+              </>
+            )}
+
+            {/* Timeout */}
+            <div className="space-y-2">
+              <Label htmlFor="provider-timeout">Timeout (ms)</Label>
+              <Input
+                id="provider-timeout"
+                type="number"
+                value={formData.timeoutMs}
+                onChange={(e) => setFormData({ ...formData, timeoutMs: e.target.value })}
+                placeholder="Optional, e.g., 3000000"
+              />
+            </div>
+
+            {/* Models */}
+            <div className="space-y-3">
+              {/* For fixed providers, show collapsible section */}
+              {isFixedProvider ? (
+                <>
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <Label className="font-medium">Model Mappings</Label>
+                      <p className="text-xs text-muted-foreground">
+                        {formData.models.length} mappings configured (Haiku, Sonnet, Opus)
+                      </p>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setShowModelMappings(!showModelMappings)}
+                      className="gap-2"
+                    >
+                      <Settings2 className="w-4 h-4" />
+                      {showModelMappings ? 'Hide' : 'Customize'}
+                      <ChevronDown
+                        className={cn(
+                          'w-4 h-4 transition-transform',
+                          showModelMappings && 'rotate-180'
+                        )}
+                      />
+                    </Button>
+                  </div>
+
+                  {/* Expanded model mappings for fixed providers */}
+                  {showModelMappings && (
+                    <div className="space-y-2 pt-2">
+                      {formData.models.map((model, index) => (
+                        <div
+                          key={index}
+                          className="flex items-center gap-2 p-3 bg-card/50 rounded-lg border border-border/30"
+                        >
+                          <div className="flex-1 space-y-2">
+                            <div className="grid grid-cols-2 gap-2">
+                              <div className="space-y-1">
+                                <Label className="text-xs text-muted-foreground">Model ID</Label>
+                                <Input
+                                  value={model.id}
+                                  onChange={(e) => handleUpdateModel(index, { id: e.target.value })}
+                                  placeholder="e.g., GLM-4.7"
+                                  className="text-xs h-8"
+                                />
+                              </div>
+                              <div className="space-y-1">
+                                <Label className="text-xs text-muted-foreground">
+                                  Display Name
+                                </Label>
+                                <Input
+                                  value={model.displayName}
+                                  onChange={(e) =>
+                                    handleUpdateModel(index, { displayName: e.target.value })
+                                  }
+                                  placeholder="e.g., GLM 4.7"
+                                  className="text-xs h-8"
+                                />
+                              </div>
+                            </div>
+                            <div className="space-y-1">
+                              <Label className="text-xs text-muted-foreground">
+                                Maps to Claude Model
+                              </Label>
+                              <Select
+                                value={model.mapsToClaudeModel}
+                                onValueChange={(value: ClaudeModelAlias) =>
+                                  handleUpdateModel(index, { mapsToClaudeModel: value })
+                                }
+                              >
+                                <SelectTrigger className="text-xs h-8">
+                                  <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="haiku">Haiku (fast, efficient)</SelectItem>
+                                  <SelectItem value="sonnet">Sonnet (balanced)</SelectItem>
+                                  <SelectItem value="opus">Opus (powerful)</SelectItem>
+                                </SelectContent>
+                              </Select>
+                            </div>
+                          </div>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="shrink-0 text-muted-foreground hover:text-destructive"
+                            onClick={() => handleRemoveModel(index)}
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </Button>
+                        </div>
+                      ))}
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={handleAddModel}
+                        className="w-full"
+                      >
+                        <Plus className="w-4 h-4 mr-1" />
+                        Add Model
+                      </Button>
+                    </div>
+                  )}
+                </>
+              ) : (
+                <>
+                  {/* Non-fixed providers: always show full editing UI */}
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <Label className="font-medium">Model Mappings</Label>
+                      <p className="text-xs text-muted-foreground">
+                        Map provider models to Claude equivalents (Haiku, Sonnet, Opus)
+                      </p>
+                    </div>
+                    <Button type="button" variant="outline" size="sm" onClick={handleAddModel}>
+                      <Plus className="w-4 h-4 mr-1" />
+                      Add Model
+                    </Button>
+                  </div>
+
+                  {/* Coverage warning - only for non-fixed providers */}
+                  {formData.models.length > 0 && !hasAllMappings && (
+                    <div className="p-2 rounded-lg bg-yellow-500/10 border border-yellow-500/20 text-xs text-yellow-600 dark:text-yellow-400">
+                      Missing mappings:{' '}
+                      {[
+                        !modelCoverage.hasHaiku && 'Haiku',
+                        !modelCoverage.hasSonnet && 'Sonnet',
+                        !modelCoverage.hasOpus && 'Opus',
+                      ]
+                        .filter(Boolean)
+                        .join(', ')}
+                    </div>
+                  )}
+
+                  {formData.models.length === 0 ? (
+                    <div className="p-4 border border-dashed border-border/50 rounded-lg text-center text-sm text-muted-foreground">
+                      No models configured. Add models to use with this provider.
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      {formData.models.map((model, index) => (
+                        <div
+                          key={index}
+                          className="flex items-center gap-2 p-3 bg-card/50 rounded-lg border border-border/30"
+                        >
+                          <div className="flex-1 space-y-2">
+                            <div className="grid grid-cols-2 gap-2">
+                              <div className="space-y-1">
+                                <Label className="text-xs text-muted-foreground">Model ID</Label>
+                                <Input
+                                  value={model.id}
+                                  onChange={(e) => handleUpdateModel(index, { id: e.target.value })}
+                                  placeholder="e.g., GLM-4.7"
+                                  className="text-xs h-8"
+                                />
+                              </div>
+                              <div className="space-y-1">
+                                <Label className="text-xs text-muted-foreground">
+                                  Display Name
+                                </Label>
+                                <Input
+                                  value={model.displayName}
+                                  onChange={(e) =>
+                                    handleUpdateModel(index, { displayName: e.target.value })
+                                  }
+                                  placeholder="e.g., GLM 4.7"
+                                  className="text-xs h-8"
+                                />
+                              </div>
+                            </div>
+                            <div className="space-y-1">
+                              <Label className="text-xs text-muted-foreground">
+                                Maps to Claude Model
+                              </Label>
+                              <Select
+                                value={model.mapsToClaudeModel}
+                                onValueChange={(value: ClaudeModelAlias) =>
+                                  handleUpdateModel(index, { mapsToClaudeModel: value })
+                                }
+                              >
+                                <SelectTrigger className="text-xs h-8">
+                                  <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="haiku">Haiku (fast, efficient)</SelectItem>
+                                  <SelectItem value="sonnet">Sonnet (balanced)</SelectItem>
+                                  <SelectItem value="opus">Opus (powerful)</SelectItem>
+                                </SelectContent>
+                              </Select>
+                            </div>
+                          </div>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="shrink-0 text-muted-foreground hover:text-destructive"
+                            onClick={() => handleRemoveModel(index)}
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleSave} disabled={!isFormValid}>
+              {editingProviderId ? 'Save Changes' : 'Add Provider'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={!!deleteConfirmId} onOpenChange={(open) => !open && setDeleteConfirmId(null)}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Delete Provider?</DialogTitle>
+            <DialogDescription>
+              This will permanently delete the provider and its models. Any phase model
+              configurations using these models will need to be updated.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteConfirmId(null)}>
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => deleteConfirmId && handleDelete(deleteConfirmId)}
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+interface ProviderCardProps {
+  provider: ClaudeCompatibleProvider;
+  onEdit: () => void;
+  onDelete: () => void;
+  onToggleEnabled: () => void;
+}
+
+function ProviderCard({ provider, onEdit, onDelete, onToggleEnabled }: ProviderCardProps) {
+  const isEnabled = provider.enabled !== false;
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg border p-4 transition-colors',
+        isEnabled
+          ? 'border-border/50 bg-card/50 hover:border-border'
+          : 'border-border/30 bg-card/30 opacity-60'
+      )}
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <h4 className="font-medium text-foreground truncate">{provider.name}</h4>
+            <Badge
+              variant="secondary"
+              className={cn('text-xs', PROVIDER_TYPE_COLORS[provider.providerType])}
+            >
+              {PROVIDER_TYPE_LABELS[provider.providerType]}
+            </Badge>
+            {!isEnabled && (
+              <Badge variant="secondary" className="text-xs bg-zinc-500/20 text-zinc-400">
+                Disabled
+              </Badge>
+            )}
+          </div>
+          <p className="text-xs text-muted-foreground truncate mt-1">{provider.baseUrl}</p>
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-2 text-xs text-muted-foreground">
+            <span>Key: {maskApiKey(provider.apiKey)}</span>
+            <span>{provider.models?.length || 0} model(s)</span>
+          </div>
+          {/* Show models with their Claude mapping */}
+          {provider.models && provider.models.length > 0 && (
+            <div className="flex flex-wrap gap-1 mt-2">
+              {provider.models.map((model) => (
+                <Badge
+                  key={`${model.id}-${model.mapsToClaudeModel}`}
+                  variant="outline"
+                  className="text-xs"
+                >
+                  <span>{model.displayName || model.id}</span>
+                  {model.mapsToClaudeModel && (
+                    <span className="ml-1 text-muted-foreground">
+                      → {CLAUDE_MODEL_LABELS[model.mapsToClaudeModel]}
+                    </span>
+                  )}
+                </Badge>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Switch checked={isEnabled} onCheckedChange={onToggleEnabled} />
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="shrink-0">
+                <MoreVertical className="w-4 h-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={onEdit}>
+                <Pencil className="w-4 h-4 mr-2" />
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={onDelete}
+                className="text-destructive focus:text-destructive"
+              >
+                <Trash2 className="w-4 h-4 mr-2" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/hooks/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f2f57d04f5a03e5cde2707aefe21204e79ae515a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/hooks/index.ts
@@ -0,0 +1,6 @@
+/**
+ * Hooks barrel export for Claude Settings Tab
+ */
+
+export { useSkillsSettings } from './use-skills-settings';
+export { useSubagents } from './use-subagents';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/hooks/use-skills-settings.ts b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/hooks/use-skills-settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3542b9516ec714d6f9311db2d050b0f7521e8f95
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/hooks/use-skills-settings.ts
@@ -0,0 +1,57 @@
+/**
+ * Skills Settings Hook - Manages Skills configuration state
+ *
+ * Provides state management for enabling/disabling Skills and
+ * configuring which sources to load Skills from (user/project).
+ */
+
+import { useCallback } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { toast } from 'sonner';
+import { useUpdateGlobalSettings } from '@/hooks/mutations';
+
+export function useSkillsSettings() {
+  const enabled = useAppStore((state) => state.enableSkills);
+  const sources = useAppStore((state) => state.skillsSources);
+
+  // React Query mutation (disable default toast)
+  const updateSettingsMutation = useUpdateGlobalSettings({ showSuccessToast: false });
+
+  const updateEnabled = useCallback(
+    (newEnabled: boolean) => {
+      updateSettingsMutation.mutate(
+        { enableSkills: newEnabled },
+        {
+          onSuccess: () => {
+            useAppStore.setState({ enableSkills: newEnabled });
+            toast.success(newEnabled ? 'Skills enabled' : 'Skills disabled');
+          },
+        }
+      );
+    },
+    [updateSettingsMutation]
+  );
+
+  const updateSources = useCallback(
+    (newSources: Array<'user' | 'project'>) => {
+      updateSettingsMutation.mutate(
+        { skillsSources: newSources },
+        {
+          onSuccess: () => {
+            useAppStore.setState({ skillsSources: newSources });
+            toast.success('Skills sources updated');
+          },
+        }
+      );
+    },
+    [updateSettingsMutation]
+  );
+
+  return {
+    enabled,
+    sources,
+    updateEnabled,
+    updateSources,
+    isLoading: updateSettingsMutation.isPending,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/hooks/use-subagents-settings.ts b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/hooks/use-subagents-settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dfc55cd0800c32a6eef4846f2dd97103105e8293
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/hooks/use-subagents-settings.ts
@@ -0,0 +1,57 @@
+/**
+ * Subagents Settings Hook - Manages Subagents configuration state
+ *
+ * Provides state management for enabling/disabling Subagents and
+ * configuring which sources to load Subagents from (user/project).
+ */
+
+import { useCallback } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { toast } from 'sonner';
+import { useUpdateGlobalSettings } from '@/hooks/mutations';
+
+export function useSubagentsSettings() {
+  const enabled = useAppStore((state) => state.enableSubagents);
+  const sources = useAppStore((state) => state.subagentsSources);
+
+  // React Query mutation (disable default toast)
+  const updateSettingsMutation = useUpdateGlobalSettings({ showSuccessToast: false });
+
+  const updateEnabled = useCallback(
+    (newEnabled: boolean) => {
+      updateSettingsMutation.mutate(
+        { enableSubagents: newEnabled },
+        {
+          onSuccess: () => {
+            useAppStore.setState({ enableSubagents: newEnabled });
+            toast.success(newEnabled ? 'Subagents enabled' : 'Subagents disabled');
+          },
+        }
+      );
+    },
+    [updateSettingsMutation]
+  );
+
+  const updateSources = useCallback(
+    (newSources: Array<'user' | 'project'>) => {
+      updateSettingsMutation.mutate(
+        { subagentsSources: newSources },
+        {
+          onSuccess: () => {
+            useAppStore.setState({ subagentsSources: newSources });
+            toast.success('Subagents sources updated');
+          },
+        }
+      );
+    },
+    [updateSettingsMutation]
+  );
+
+  return {
+    enabled,
+    sources,
+    updateEnabled,
+    updateSources,
+    isLoading: updateSettingsMutation.isPending,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/hooks/use-subagents.ts b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/hooks/use-subagents.ts
new file mode 100644
index 0000000000000000000000000000000000000000..475f837809fe1a8c590493c7b09d127de6162dc9
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/hooks/use-subagents.ts
@@ -0,0 +1,76 @@
+/**
+ * Subagents Hook - Manages custom subagent definitions
+ *
+ * Provides read-only view of custom subagent configurations
+ * used for specialized task delegation. Supports:
+ * - Filesystem agents (AGENT.md files in .claude/agents/) - user and project-level (read-only)
+ *
+ * Filesystem agents are discovered via the server API and displayed in the UI.
+ * Agent definitions in settings JSON are used server-side only.
+ */
+
+import { useMemo, useCallback } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useAppStore } from '@/store/app-store';
+import type { AgentDefinition } from '@automaker/types';
+import { useDiscoveredAgents } from '@/hooks/queries';
+import { queryKeys } from '@/lib/query-keys';
+
+export type SubagentScope = 'global' | 'project';
+export type SubagentType = 'filesystem';
+export type FilesystemSource = 'user' | 'project';
+
+export interface SubagentWithScope {
+  name: string;
+  definition: AgentDefinition;
+  scope: SubagentScope;
+  type: SubagentType;
+  source: FilesystemSource;
+  filePath: string;
+}
+
+interface FilesystemAgent {
+  name: string;
+  definition: AgentDefinition;
+  source: FilesystemSource;
+  filePath: string;
+}
+
+export function useSubagents() {
+  const queryClient = useQueryClient();
+  const currentProject = useAppStore((state) => state.currentProject);
+
+  // Use React Query hook for fetching agents
+  const {
+    data: agents = [],
+    isLoading,
+    refetch,
+  } = useDiscoveredAgents(currentProject?.path, ['user', 'project']);
+
+  // Transform agents to SubagentWithScope format
+  const subagentsWithScope = useMemo((): SubagentWithScope[] => {
+    return agents.map(({ name, definition, source, filePath }: FilesystemAgent) => ({
+      name,
+      definition,
+      scope: source === 'user' ? 'global' : 'project',
+      type: 'filesystem' as const,
+      source,
+      filePath,
+    }));
+  }, [agents]);
+
+  // Refresh function that invalidates the query cache
+  const refreshFilesystemAgents = useCallback(async () => {
+    await queryClient.invalidateQueries({
+      queryKey: queryKeys.settings.agents(currentProject?.path ?? ''),
+    });
+    await refetch();
+  }, [queryClient, currentProject?.path, refetch]);
+
+  return {
+    subagentsWithScope,
+    isLoading,
+    hasProject: !!currentProject,
+    refreshFilesystemAgents,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8b79a1f802cc6fa8d3aedaf8df14fc7234a6fe96
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Claude Settings Tab components barrel export
+ */
+
+export { SkillsSection } from './skills-section';
+export { SubagentsSection } from './subagents-section';
+export { SubagentCard } from './subagent-card';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/skills-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/skills-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..856184ad9f8faab7098fe9828d10803aad9241b3
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/skills-section.tsx
@@ -0,0 +1,169 @@
+/**
+ * Skills Section - UI for managing Skills configuration
+ *
+ * Allows users to enable/disable Skills and select which directories
+ * to load Skills from (user ~/.claude/skills/ or project .claude/skills/).
+ */
+
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Checkbox } from '@/components/ui/checkbox';
+import { cn } from '@/lib/utils';
+import { Zap, Globe, FolderOpen, ExternalLink, Sparkles } from 'lucide-react';
+import { useSkillsSettings } from './hooks/use-skills-settings';
+
+export function SkillsSection() {
+  const { enabled, sources, updateEnabled, updateSources, isLoading } = useSkillsSettings();
+
+  const toggleSource = (source: 'user' | 'project') => {
+    if (sources.includes(source)) {
+      updateSources(sources.filter((s: 'user' | 'project') => s !== source));
+    } else {
+      updateSources([...sources, source]);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-linear-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between p-6 border-b border-border/30">
+        <div className="flex items-center gap-4">
+          <div className="w-10 h-10 rounded-xl bg-amber-500/20 flex items-center justify-center">
+            <Zap className="w-5 h-5 text-amber-500" />
+          </div>
+          <div>
+            <h3 className="font-semibold text-base flex items-center gap-2">
+              Skills
+              {enabled && (
+                <span className="text-xs font-normal px-2 py-0.5 rounded-full bg-amber-500/20 text-amber-500">
+                  {sources.length} source{sources.length !== 1 ? 's' : ''} active
+                </span>
+              )}
+            </h3>
+            <p className="text-sm text-muted-foreground mt-0.5">
+              Filesystem-based capabilities Claude invokes autonomously
+            </p>
+          </div>
+        </div>
+        <Switch
+          id="enable-skills"
+          checked={enabled}
+          onCheckedChange={updateEnabled}
+          disabled={isLoading}
+        />
+      </div>
+
+      {/* Content */}
+      <div className="p-6 space-y-4">
+        {/* Sources Selection */}
+        {enabled && (
+          <div className="space-y-3">
+            <Label className="text-xs uppercase tracking-wide text-muted-foreground">
+              Load Skills from
+            </Label>
+            <div className="grid gap-2">
+              {/* User Skills Option */}
+              <label
+                htmlFor="source-user"
+                className={cn(
+                  'flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-all duration-200',
+                  sources.includes('user')
+                    ? 'border-amber-500/50 bg-amber-500/10'
+                    : 'border-border/50 bg-accent/20 hover:bg-accent/30'
+                )}
+              >
+                <Checkbox
+                  id="source-user"
+                  checked={sources.includes('user')}
+                  onCheckedChange={() => toggleSource('user')}
+                  disabled={isLoading}
+                  className="data-[state=checked]:bg-amber-500 data-[state=checked]:border-amber-500"
+                />
+                <div className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center shrink-0">
+                  <Globe className="w-4 h-4 text-muted-foreground" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <span className="text-sm font-medium">User Skills</span>
+                  <span className="block text-xs text-muted-foreground mt-0.5 truncate">
+                    ~/.claude/skills/ — Available across all projects
+                  </span>
+                </div>
+              </label>
+
+              {/* Project Skills Option */}
+              <label
+                htmlFor="source-project"
+                className={cn(
+                  'flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-all duration-200',
+                  sources.includes('project')
+                    ? 'border-amber-500/50 bg-amber-500/10'
+                    : 'border-border/50 bg-accent/20 hover:bg-accent/30'
+                )}
+              >
+                <Checkbox
+                  id="source-project"
+                  checked={sources.includes('project')}
+                  onCheckedChange={() => toggleSource('project')}
+                  disabled={isLoading}
+                  className="data-[state=checked]:bg-amber-500 data-[state=checked]:border-amber-500"
+                />
+                <div className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center shrink-0">
+                  <FolderOpen className="w-4 h-4 text-muted-foreground" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <span className="text-sm font-medium">Project Skills</span>
+                  <span className="block text-xs text-muted-foreground mt-0.5 truncate">
+                    .claude/skills/ — Version-controlled with project
+                  </span>
+                </div>
+              </label>
+            </div>
+          </div>
+        )}
+
+        {/* Help Text */}
+        {enabled && (
+          <div className="rounded-xl border border-border/30 bg-muted/30 p-4 space-y-3">
+            <div className="flex items-start gap-3">
+              <div className="w-6 h-6 rounded-md bg-brand-500/20 flex items-center justify-center shrink-0 mt-0.5">
+                <Sparkles className="w-3.5 h-3.5 text-brand-500" />
+              </div>
+              <div className="text-xs text-muted-foreground space-y-1">
+                <p className="font-medium text-foreground/80">Auto-Discovery</p>
+                <p>
+                  Skills are automatically discovered when agents start. Define skills as{' '}
+                  <code className="text-xs bg-muted px-1 rounded">SKILL.md</code> files.
+                </p>
+              </div>
+            </div>
+            <a
+              href="https://code.claude.com/docs/en/skills"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 text-xs text-brand-500 hover:text-brand-400 transition-colors"
+            >
+              <ExternalLink className="w-3.5 h-3.5" />
+              View Skills documentation
+            </a>
+          </div>
+        )}
+
+        {/* Disabled State Empty Message */}
+        {!enabled && (
+          <div className="text-center py-6 text-muted-foreground">
+            <Zap className="w-10 h-10 mx-auto mb-3 opacity-30" />
+            <p className="text-sm">Skills are disabled</p>
+            <p className="text-xs mt-1">Enable to load filesystem-based capabilities</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/subagent-card.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/subagent-card.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0b4e0371abe9d0cd005d40c0e42eebc3821a3b14
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/subagent-card.tsx
@@ -0,0 +1,138 @@
+/**
+ * Subagent Card - Display card for a single subagent definition
+ *
+ * Shows the subagent's name, description, model, tool count, scope, and type.
+ * Read-only view - agents are managed by editing .md files directly.
+ */
+
+import { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Markdown } from '@/components/ui/markdown';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { cn } from '@/lib/utils';
+import {
+  Globe,
+  FolderOpen,
+  ChevronDown,
+  ChevronRight,
+  Bot,
+  Cpu,
+  Wrench,
+  FileCode,
+} from 'lucide-react';
+import type { SubagentWithScope } from './hooks/use-subagents';
+
+interface SubagentCardProps {
+  agent: SubagentWithScope;
+}
+
+export function SubagentCard({ agent }: SubagentCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { name, definition, scope, filePath } = agent;
+
+  const toolCount = definition.tools?.length ?? 'all';
+  const modelDisplay =
+    definition.model === 'inherit' || !definition.model
+      ? 'Inherit'
+      : definition.model.charAt(0).toUpperCase() + definition.model.slice(1);
+
+  // Scope icon and label
+  const ScopeIcon = scope === 'global' ? Globe : FolderOpen;
+  const scopeLabel = scope === 'global' ? 'User' : 'Project';
+
+  // Model color based on type
+  const getModelColor = () => {
+    const model = definition.model?.toLowerCase();
+    if (model === 'opus') return 'text-violet-500 bg-violet-500/10 border-violet-500/30';
+    if (model === 'sonnet') return 'text-blue-500 bg-blue-500/10 border-blue-500/30';
+    if (model === 'haiku') return 'text-emerald-500 bg-emerald-500/10 border-emerald-500/30';
+    return 'text-muted-foreground bg-muted/50 border-border/50';
+  };
+
+  return (
+    <Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
+      <div
+        className={cn(
+          'rounded-xl border transition-all duration-200',
+          'border-border/50 bg-accent/20',
+          'hover:bg-accent/30 hover:border-border/70'
+        )}
+      >
+        {/* Main Card Content */}
+        <div className="flex items-start gap-3 p-4">
+          {/* Agent Icon */}
+          <div className="w-9 h-9 rounded-lg bg-violet-500/15 flex items-center justify-center shrink-0 mt-0.5">
+            <Bot className="w-4 h-4 text-violet-500" />
+          </div>
+
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            {/* Header Row */}
+            <div className="flex items-center gap-2 flex-wrap">
+              <h4 className="font-medium text-sm">{name}</h4>
+              <Badge
+                variant="outline"
+                size="sm"
+                className={cn('flex items-center gap-1', getModelColor())}
+              >
+                <Cpu className="h-3 w-3" />
+                {modelDisplay}
+              </Badge>
+              <Badge variant="muted" size="sm" className="flex items-center gap-1">
+                <Wrench className="h-3 w-3" />
+                {toolCount === 'all' ? 'All' : toolCount} tools
+              </Badge>
+              <Badge variant="muted" size="sm" className="flex items-center gap-1">
+                <ScopeIcon className="h-3 w-3" />
+                {scopeLabel}
+              </Badge>
+            </div>
+
+            {/* Description */}
+            <p className="text-sm text-muted-foreground mt-1.5 line-clamp-2">
+              {definition.description}
+            </p>
+
+            {/* File Path */}
+            {filePath && (
+              <div className="flex items-center gap-1.5 mt-2 text-xs text-muted-foreground/60">
+                <FileCode className="h-3 w-3" />
+                <span className="font-mono truncate">{filePath}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Expand Button */}
+          <CollapsibleTrigger asChild>
+            <button
+              className={cn(
+                'p-1.5 rounded-md transition-colors shrink-0',
+                'hover:bg-muted/50 text-muted-foreground hover:text-foreground',
+                'cursor-pointer'
+              )}
+              title={isExpanded ? 'Hide prompt' : 'View prompt'}
+            >
+              {isExpanded ? (
+                <ChevronDown className="w-4 h-4" />
+              ) : (
+                <ChevronRight className="w-4 h-4" />
+              )}
+            </button>
+          </CollapsibleTrigger>
+        </div>
+
+        {/* Expandable Prompt Section */}
+        <CollapsibleContent>
+          <div className="px-4 pb-4 pt-0">
+            <div className="ml-12 rounded-lg border border-border/30 bg-muted/30 p-4 overflow-auto max-h-64">
+              <div className="text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wide">
+                System Prompt
+              </div>
+              <Markdown className="text-xs prose-sm">{definition.prompt}</Markdown>
+            </div>
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/subagents-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/subagents-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1632e87aa567fee50c6130ffdf6825fd65605ca5
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/claude-settings-tab/subagents-section.tsx
@@ -0,0 +1,244 @@
+/**
+ * Subagents Section - UI for managing Subagents configuration
+ *
+ * Allows users to enable/disable Subagents and select which directories
+ * to load Subagents from (user ~/.claude/agents/ or project .claude/agents/).
+ *
+ * Displays agents discovered from:
+ * - User-level: ~/.claude/agents/
+ * - Project-level: .claude/agents/
+ */
+
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Checkbox } from '@/components/ui/checkbox';
+import { cn } from '@/lib/utils';
+import { Bot, RefreshCw, Users, ExternalLink, Globe, FolderOpen, Sparkles } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { useSubagents } from './hooks/use-subagents';
+import { useSubagentsSettings } from './hooks/use-subagents-settings';
+import { SubagentCard } from './subagent-card';
+
+export function SubagentsSection() {
+  const {
+    subagentsWithScope,
+    isLoading: isLoadingAgents,
+    refreshFilesystemAgents,
+  } = useSubagents();
+  const {
+    enabled,
+    sources,
+    updateEnabled,
+    updateSources,
+    isLoading: isLoadingSettings,
+  } = useSubagentsSettings();
+
+  const isLoading = isLoadingAgents || isLoadingSettings;
+
+  const handleRefresh = async () => {
+    await refreshFilesystemAgents();
+  };
+
+  const toggleSource = (source: 'user' | 'project') => {
+    if (sources.includes(source)) {
+      updateSources(sources.filter((s: 'user' | 'project') => s !== source));
+    } else {
+      updateSources([...sources, source]);
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-linear-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between p-6 border-b border-border/30">
+        <div className="flex items-center gap-4">
+          <div className="w-10 h-10 rounded-xl bg-violet-500/20 flex items-center justify-center">
+            <Bot className="w-5 h-5 text-violet-500" />
+          </div>
+          <div>
+            <h3 className="font-semibold text-base flex items-center gap-2">
+              Custom Subagents
+              {enabled && subagentsWithScope.length > 0 && (
+                <span className="text-xs font-normal px-2 py-0.5 rounded-full bg-violet-500/20 text-violet-500">
+                  {subagentsWithScope.length} agent{subagentsWithScope.length !== 1 ? 's' : ''}
+                </span>
+              )}
+            </h3>
+            <p className="text-sm text-muted-foreground mt-0.5">
+              Specialized agents Claude delegates to automatically
+            </p>
+          </div>
+        </div>
+        <Switch
+          id="enable-subagents"
+          checked={enabled}
+          onCheckedChange={updateEnabled}
+          disabled={isLoading}
+        />
+      </div>
+
+      {/* Content */}
+      <div className="p-6 space-y-4">
+        {/* Sources Selection */}
+        {enabled && (
+          <div className="space-y-3">
+            <Label className="text-xs uppercase tracking-wide text-muted-foreground">
+              Load Subagents from
+            </Label>
+            <div className="grid gap-2">
+              {/* User Subagents Option */}
+              <label
+                htmlFor="subagent-source-user"
+                className={cn(
+                  'flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-all duration-200',
+                  sources.includes('user')
+                    ? 'border-violet-500/50 bg-violet-500/10'
+                    : 'border-border/50 bg-accent/20 hover:bg-accent/30'
+                )}
+              >
+                <Checkbox
+                  id="subagent-source-user"
+                  checked={sources.includes('user')}
+                  onCheckedChange={() => toggleSource('user')}
+                  disabled={isLoading}
+                  className="data-[state=checked]:bg-violet-500 data-[state=checked]:border-violet-500"
+                />
+                <div className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center shrink-0">
+                  <Globe className="w-4 h-4 text-muted-foreground" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <span className="text-sm font-medium">User Subagents</span>
+                  <span className="block text-xs text-muted-foreground mt-0.5 truncate">
+                    ~/.claude/agents/ — Available across all projects
+                  </span>
+                </div>
+              </label>
+
+              {/* Project Subagents Option */}
+              <label
+                htmlFor="subagent-source-project"
+                className={cn(
+                  'flex items-center gap-3 p-3 rounded-xl border cursor-pointer transition-all duration-200',
+                  sources.includes('project')
+                    ? 'border-violet-500/50 bg-violet-500/10'
+                    : 'border-border/50 bg-accent/20 hover:bg-accent/30'
+                )}
+              >
+                <Checkbox
+                  id="subagent-source-project"
+                  checked={sources.includes('project')}
+                  onCheckedChange={() => toggleSource('project')}
+                  disabled={isLoading}
+                  className="data-[state=checked]:bg-violet-500 data-[state=checked]:border-violet-500"
+                />
+                <div className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center shrink-0">
+                  <FolderOpen className="w-4 h-4 text-muted-foreground" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <span className="text-sm font-medium">Project Subagents</span>
+                  <span className="block text-xs text-muted-foreground mt-0.5 truncate">
+                    .claude/agents/ — Version-controlled with project
+                  </span>
+                </div>
+              </label>
+            </div>
+          </div>
+        )}
+
+        {/* Agents List */}
+        {enabled && (
+          <>
+            {/* Refresh Button */}
+            <div className="flex items-center justify-between">
+              <Label className="text-xs uppercase tracking-wide text-muted-foreground">
+                Discovered Agents
+              </Label>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleRefresh}
+                disabled={isLoading}
+                title="Refresh agents from disk"
+                className="gap-1.5 h-7 px-2 text-xs"
+              >
+                {isLoadingAgents ? <Spinner size="xs" /> : <RefreshCw className="h-3.5 w-3.5" />}
+                Refresh
+              </Button>
+            </div>
+
+            {subagentsWithScope.length === 0 ? (
+              <div className="text-center py-6 text-muted-foreground border border-dashed border-border/50 rounded-xl">
+                <Users className="w-10 h-10 mx-auto mb-2 opacity-30" />
+                <p className="text-sm font-medium">No agents found</p>
+                <p className="text-xs mt-1 max-w-sm mx-auto">
+                  Create <code className="text-xs bg-muted px-1 rounded">.md</code> files in{' '}
+                  {sources.includes('user') && (
+                    <code className="text-xs bg-muted px-1 rounded">~/.claude/agents/</code>
+                  )}
+                  {sources.includes('user') && sources.includes('project') && ' or '}
+                  {sources.includes('project') && (
+                    <code className="text-xs bg-muted px-1 rounded">.claude/agents/</code>
+                  )}
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {subagentsWithScope.map((agent) => (
+                  <SubagentCard
+                    key={`${agent.type}-${agent.source || agent.scope}-${agent.name}`}
+                    agent={agent}
+                  />
+                ))}
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Help Text */}
+        {enabled && (
+          <div className="rounded-xl border border-border/30 bg-muted/30 p-4 space-y-3">
+            <div className="flex items-start gap-3">
+              <div className="w-6 h-6 rounded-md bg-brand-500/20 flex items-center justify-center shrink-0 mt-0.5">
+                <Sparkles className="w-3.5 h-3.5 text-brand-500" />
+              </div>
+              <div className="text-xs text-muted-foreground space-y-1">
+                <p className="font-medium text-foreground/80">Auto-Discovery</p>
+                <p>
+                  Subagents are automatically discovered when agents start. Define agents as{' '}
+                  <code className="text-xs bg-muted px-1 rounded">AGENT.md</code> files or{' '}
+                  <code className="text-xs bg-muted px-1 rounded">agent-name.md</code> files.
+                </p>
+              </div>
+            </div>
+            <a
+              href="https://code.claude.com/docs/en/agents"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 text-xs text-brand-500 hover:text-brand-400 transition-colors"
+            >
+              <ExternalLink className="w-3.5 h-3.5" />
+              View Agents documentation
+            </a>
+          </div>
+        )}
+
+        {/* Disabled State Empty Message */}
+        {!enabled && (
+          <div className="text-center py-6 text-muted-foreground">
+            <Bot className="w-10 h-10 mx-auto mb-3 opacity-30" />
+            <p className="text-sm">Subagents are disabled</p>
+            <p className="text-xs mt-1">Enable to load custom agent definitions</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/codex-model-configuration.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/codex-model-configuration.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c24d75bafd23af8a3aa50209fa7305f96e154e01
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/codex-model-configuration.tsx
@@ -0,0 +1,189 @@
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import { supportsReasoningEffort, type CodexModelId } from '@automaker/types';
+import { OpenAIIcon } from '@/components/ui/provider-icon';
+
+interface CodexModelConfigurationProps {
+  enabledCodexModels: CodexModelId[];
+  codexDefaultModel: CodexModelId;
+  isSaving: boolean;
+  onDefaultModelChange: (model: CodexModelId) => void;
+  onModelToggle: (model: CodexModelId, enabled: boolean) => void;
+}
+
+interface CodexModelInfo {
+  id: CodexModelId;
+  label: string;
+  description: string;
+}
+
+const CODEX_MODEL_INFO: Record<CodexModelId, CodexModelInfo> = {
+  'codex-gpt-5.3-codex': {
+    id: 'codex-gpt-5.3-codex',
+    label: 'GPT-5.3-Codex',
+    description: 'Latest frontier agentic coding model',
+  },
+  'codex-gpt-5.3-codex-spark': {
+    id: 'codex-gpt-5.3-codex-spark',
+    label: 'GPT-5.3-Codex-Spark',
+    description: 'Near-instant real-time coding model, 1000+ tokens/sec',
+  },
+  'codex-gpt-5.2-codex': {
+    id: 'codex-gpt-5.2-codex',
+    label: 'GPT-5.2-Codex',
+    description: 'Frontier agentic coding model',
+  },
+  'codex-gpt-5.1-codex-max': {
+    id: 'codex-gpt-5.1-codex-max',
+    label: 'GPT-5.1-Codex-Max',
+    description: 'Codex-optimized flagship for deep and fast reasoning',
+  },
+  'codex-gpt-5.1-codex-mini': {
+    id: 'codex-gpt-5.1-codex-mini',
+    label: 'GPT-5.1-Codex-Mini',
+    description: 'Optimized for codex. Cheaper, faster, but less capable',
+  },
+  'codex-gpt-5.1-codex': {
+    id: 'codex-gpt-5.1-codex',
+    label: 'GPT-5.1-Codex',
+    description: 'Original GPT-5.1 Codex agentic coding model',
+  },
+  'codex-gpt-5-codex': {
+    id: 'codex-gpt-5-codex',
+    label: 'GPT-5-Codex',
+    description: 'Original GPT-5 Codex model',
+  },
+  'codex-gpt-5-codex-mini': {
+    id: 'codex-gpt-5-codex-mini',
+    label: 'GPT-5-Codex-Mini',
+    description: 'Smaller, cheaper GPT-5 Codex variant',
+  },
+  'codex-gpt-5.2': {
+    id: 'codex-gpt-5.2',
+    label: 'GPT-5.2',
+    description: 'Latest frontier model with improvements across knowledge, reasoning and coding',
+  },
+  'codex-gpt-5.1': {
+    id: 'codex-gpt-5.1',
+    label: 'GPT-5.1',
+    description: 'Great for coding and agentic tasks across domains',
+  },
+  'codex-gpt-5': {
+    id: 'codex-gpt-5',
+    label: 'GPT-5',
+    description: 'Base GPT-5 model via Codex',
+  },
+};
+
+export function CodexModelConfiguration({
+  enabledCodexModels,
+  codexDefaultModel,
+  isSaving,
+  onDefaultModelChange,
+  onModelToggle,
+}: CodexModelConfigurationProps) {
+  const availableModels = Object.values(CODEX_MODEL_INFO);
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <OpenAIIcon className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            Model Configuration
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure which Codex models are available in the feature modal
+        </p>
+      </div>
+      <div className="p-6 space-y-6">
+        <div className="space-y-2">
+          <Label>Default Model</Label>
+          <Select
+            value={codexDefaultModel}
+            onValueChange={(v) => onDefaultModelChange(v as CodexModelId)}
+            disabled={isSaving}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {availableModels.map((model) => (
+                <SelectItem key={model.id} value={model.id}>
+                  <div className="flex items-center gap-2">
+                    <span>{model.label}</span>
+                    {supportsReasoningEffort(model.id) && (
+                      <Badge variant="outline" className="text-xs">
+                        Thinking
+                      </Badge>
+                    )}
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-3">
+          <Label>Available Models</Label>
+          <div className="grid gap-3">
+            {availableModels.map((model) => {
+              const isEnabled = enabledCodexModels.includes(model.id);
+              const isDefault = model.id === codexDefaultModel;
+
+              return (
+                <div
+                  key={model.id}
+                  className="flex items-center justify-between p-3 rounded-xl border border-border/50 bg-card/50 hover:bg-accent/30 transition-colors"
+                >
+                  <div className="flex items-center gap-3">
+                    <Checkbox
+                      checked={isEnabled}
+                      onCheckedChange={(checked) => onModelToggle(model.id, !!checked)}
+                      disabled={isSaving || isDefault}
+                    />
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-medium">{model.label}</span>
+                        {supportsReasoningEffort(model.id) && (
+                          <Badge variant="outline" className="text-xs">
+                            Thinking
+                          </Badge>
+                        )}
+                        {isDefault && (
+                          <Badge variant="secondary" className="text-xs">
+                            Default
+                          </Badge>
+                        )}
+                      </div>
+                      <p className="text-xs text-muted-foreground">{model.description}</p>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/codex-settings-tab.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/codex-settings-tab.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c5649aacf00f26f93ac8c5c0fe25736b01feabef
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/codex-settings-tab.tsx
@@ -0,0 +1,225 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { useSetupStore } from '@/store/setup-store';
+import { CodexCliStatus } from '../cli-status/codex-cli-status';
+import { CodexSettings } from '../codex/codex-settings';
+import { CodexUsageSection } from '../codex/codex-usage-section';
+import { CodexModelConfiguration } from './codex-model-configuration';
+import { ProviderToggle } from './provider-toggle';
+import { getElectronAPI } from '@/lib/electron';
+import { createLogger } from '@automaker/utils/logger';
+import type { CliStatus as SharedCliStatus } from '../shared/types';
+import type { CodexModelId } from '@automaker/types';
+
+const logger = createLogger('CodexSettings');
+
+export function CodexSettingsTab() {
+  const {
+    codexAutoLoadAgents,
+    codexEnableWebSearch,
+    codexEnableImages,
+    enabledCodexModels,
+    codexDefaultModel,
+    setCodexAutoLoadAgents,
+    setCodexEnableWebSearch,
+    setCodexEnableImages,
+    setCodexDefaultModel,
+    toggleCodexModel,
+  } = useAppStore();
+
+  const {
+    codexAuthStatus,
+    codexCliStatus: setupCliStatus,
+    setCodexCliStatus,
+    setCodexAuthStatus,
+  } = useSetupStore();
+
+  const [isCheckingCodexCli, setIsCheckingCodexCli] = useState(false);
+  const [displayCliStatus, setDisplayCliStatus] = useState<SharedCliStatus | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const codexCliStatus: SharedCliStatus | null =
+    displayCliStatus ||
+    (setupCliStatus
+      ? {
+          success: true,
+          status: setupCliStatus.installed ? 'installed' : 'not_installed',
+          method: setupCliStatus.method,
+          version: setupCliStatus.version || undefined,
+          path: setupCliStatus.path || undefined,
+        }
+      : null);
+
+  // Load Codex CLI status and auth status on mount
+  useEffect(() => {
+    const checkCodexStatus = async () => {
+      const api = getElectronAPI();
+      // Check if getCodexStatus method exists on the API (may not be implemented yet)
+      const getCodexStatus = (api?.setup as Record<string, unknown> | undefined)?.getCodexStatus as
+        | (() => Promise<{
+            success: boolean;
+            installed: boolean;
+            version?: string;
+            path?: string;
+            recommendation?: string;
+            installCommands?: { npm?: string; macos?: string; windows?: string };
+            auth?: {
+              authenticated: boolean;
+              method: string;
+              hasApiKey?: boolean;
+            };
+          }>)
+        | undefined;
+      if (getCodexStatus) {
+        try {
+          const result = await getCodexStatus();
+          setDisplayCliStatus({
+            success: result.success,
+            status: result.installed ? 'installed' : 'not_installed',
+            method: result.auth?.method,
+            version: result.version,
+            path: result.path,
+            recommendation: result.recommendation,
+            installCommands: result.installCommands,
+          });
+          setCodexCliStatus({
+            installed: result.installed,
+            version: result.version ?? null,
+            path: result.path ?? null,
+            method: result.auth?.method || 'none',
+          });
+          if (result.auth) {
+            setCodexAuthStatus({
+              authenticated: result.auth.authenticated,
+              method: result.auth.method as
+                | 'cli_authenticated'
+                | 'api_key'
+                | 'api_key_env'
+                | 'none',
+              hasAuthFile: result.auth.method === 'cli_authenticated',
+              hasApiKey: result.auth.hasApiKey,
+            });
+          }
+        } catch (error) {
+          logger.error('Failed to check Codex CLI status:', error);
+        }
+      }
+    };
+    checkCodexStatus();
+  }, [setCodexCliStatus, setCodexAuthStatus]);
+
+  const handleRefreshCodexCli = useCallback(async () => {
+    setIsCheckingCodexCli(true);
+    try {
+      const api = getElectronAPI();
+      // Check if getCodexStatus method exists on the API (may not be implemented yet)
+      const getCodexStatus = (api?.setup as Record<string, unknown> | undefined)?.getCodexStatus as
+        | (() => Promise<{
+            success: boolean;
+            installed: boolean;
+            version?: string;
+            path?: string;
+            recommendation?: string;
+            installCommands?: { npm?: string; macos?: string; windows?: string };
+            auth?: {
+              authenticated: boolean;
+              method: string;
+              hasApiKey?: boolean;
+            };
+          }>)
+        | undefined;
+      if (getCodexStatus) {
+        const result = await getCodexStatus();
+        setDisplayCliStatus({
+          success: result.success,
+          status: result.installed ? 'installed' : 'not_installed',
+          method: result.auth?.method,
+          version: result.version,
+          path: result.path,
+          recommendation: result.recommendation,
+          installCommands: result.installCommands,
+        });
+        setCodexCliStatus({
+          installed: result.installed,
+          version: result.version ?? null,
+          path: result.path ?? null,
+          method: result.auth?.method || 'none',
+        });
+        if (result.auth) {
+          setCodexAuthStatus({
+            authenticated: result.auth.authenticated,
+            method: result.auth.method as 'cli_authenticated' | 'api_key' | 'api_key_env' | 'none',
+            hasAuthFile: result.auth.method === 'cli_authenticated',
+            hasApiKey: result.auth.hasApiKey,
+          });
+        }
+      }
+    } catch (error) {
+      logger.error('Failed to refresh Codex CLI status:', error);
+    } finally {
+      setIsCheckingCodexCli(false);
+    }
+  }, [setCodexCliStatus, setCodexAuthStatus]);
+
+  const handleDefaultModelChange = useCallback(
+    (model: CodexModelId) => {
+      setIsSaving(true);
+      try {
+        setCodexDefaultModel(model);
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [setCodexDefaultModel]
+  );
+
+  const handleModelToggle = useCallback(
+    (model: CodexModelId, enabled: boolean) => {
+      setIsSaving(true);
+      try {
+        toggleCodexModel(model, enabled);
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [toggleCodexModel]
+  );
+
+  const showUsageTracking = codexAuthStatus?.authenticated ?? false;
+  const authStatusToDisplay = codexAuthStatus;
+
+  return (
+    <div className="space-y-6">
+      {/* Provider Visibility Toggle */}
+      <ProviderToggle provider="codex" providerLabel="Codex" />
+
+      <CodexCliStatus
+        status={codexCliStatus}
+        authStatus={authStatusToDisplay}
+        isChecking={isCheckingCodexCli}
+        onRefresh={handleRefreshCodexCli}
+      />
+
+      {showUsageTracking && <CodexUsageSection />}
+
+      <CodexModelConfiguration
+        enabledCodexModels={enabledCodexModels}
+        codexDefaultModel={codexDefaultModel}
+        isSaving={isSaving}
+        onDefaultModelChange={handleDefaultModelChange}
+        onModelToggle={handleModelToggle}
+      />
+
+      <CodexSettings
+        autoLoadCodexAgents={codexAutoLoadAgents}
+        codexEnableWebSearch={codexEnableWebSearch}
+        codexEnableImages={codexEnableImages}
+        onAutoLoadCodexAgentsChange={setCodexAutoLoadAgents}
+        onCodexEnableWebSearchChange={setCodexEnableWebSearch}
+        onCodexEnableImagesChange={setCodexEnableImages}
+      />
+    </div>
+  );
+}
+
+export default CodexSettingsTab;
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/copilot-model-configuration.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/copilot-model-configuration.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f5c35ea56f964dd5c42cbfb5e5988ae2ae7b5db7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/copilot-model-configuration.tsx
@@ -0,0 +1,53 @@
+import type { CopilotModelId } from '@automaker/types';
+import { CopilotIcon } from '@/components/ui/provider-icon';
+import { COPILOT_MODEL_MAP } from '@automaker/types';
+import { BaseModelConfiguration, type BaseModelInfo } from './shared/base-model-configuration';
+
+interface CopilotModelConfigurationProps {
+  enabledCopilotModels: CopilotModelId[];
+  copilotDefaultModel: CopilotModelId;
+  isSaving: boolean;
+  onDefaultModelChange: (model: CopilotModelId) => void;
+  onModelToggle: (model: CopilotModelId, enabled: boolean) => void;
+}
+
+interface CopilotModelInfo extends BaseModelInfo<CopilotModelId> {
+  supportsVision: boolean;
+}
+
+// Build model info from the COPILOT_MODEL_MAP
+const COPILOT_MODELS: CopilotModelInfo[] = Object.entries(COPILOT_MODEL_MAP).map(
+  ([id, config]) => ({
+    id: id as CopilotModelId,
+    label: config.label,
+    description: config.description,
+    supportsVision: config.supportsVision,
+  })
+);
+
+export function CopilotModelConfiguration({
+  enabledCopilotModels,
+  copilotDefaultModel,
+  isSaving,
+  onDefaultModelChange,
+  onModelToggle,
+}: CopilotModelConfigurationProps) {
+  return (
+    <BaseModelConfiguration<CopilotModelId>
+      providerName="Copilot"
+      icon={<CopilotIcon className="w-5 h-5 text-violet-500" />}
+      iconGradient="from-violet-500/20 to-violet-600/10"
+      iconBorder="border-violet-500/20"
+      models={COPILOT_MODELS}
+      enabledModels={enabledCopilotModels}
+      defaultModel={copilotDefaultModel}
+      isSaving={isSaving}
+      onDefaultModelChange={onDefaultModelChange}
+      onModelToggle={onModelToggle}
+      getFeatureBadge={(model) => {
+        const copilotModel = model as CopilotModelInfo;
+        return copilotModel.supportsVision ? { show: true, label: 'Vision' } : null;
+      }}
+    />
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/copilot-settings-tab.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/copilot-settings-tab.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ba88b698e90708a824f69c6f0a26c0966e5fe409
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/copilot-settings-tab.tsx
@@ -0,0 +1,130 @@
+import { useState, useCallback, useMemo } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { useAppStore } from '@/store/app-store';
+import { CopilotCliStatus, CopilotCliStatusSkeleton } from '../cli-status/copilot-cli-status';
+import { CopilotModelConfiguration } from './copilot-model-configuration';
+import { ProviderToggle } from './provider-toggle';
+import { useCopilotCliStatus } from '@/hooks/queries';
+import { queryKeys } from '@/lib/query-keys';
+import type { CliStatus as SharedCliStatus } from '../shared/types';
+import type { CopilotAuthStatus } from '../cli-status/copilot-cli-status';
+import type { CopilotModelId } from '@automaker/types';
+
+export function CopilotSettingsTab() {
+  const queryClient = useQueryClient();
+  const { enabledCopilotModels, copilotDefaultModel, setCopilotDefaultModel, toggleCopilotModel } =
+    useAppStore();
+
+  const [isSaving, setIsSaving] = useState(false);
+
+  // React Query hooks for data fetching
+  const {
+    data: cliStatusData,
+    isLoading: isCheckingCopilotCli,
+    refetch: refetchCliStatus,
+  } = useCopilotCliStatus();
+
+  const isCliInstalled = cliStatusData?.installed ?? false;
+
+  // Transform CLI status to the expected format
+  const cliStatus = useMemo((): SharedCliStatus | null => {
+    if (!cliStatusData) return null;
+    return {
+      success: cliStatusData.success ?? false,
+      status: cliStatusData.installed ? 'installed' : 'not_installed',
+      method: cliStatusData.auth?.method,
+      version: cliStatusData.version,
+      path: cliStatusData.path,
+      recommendation: cliStatusData.recommendation,
+      // Server sends installCommand (singular), transform to expected format
+      installCommands: cliStatusData.installCommand
+        ? { npm: cliStatusData.installCommand }
+        : undefined,
+    };
+  }, [cliStatusData]);
+
+  // Transform auth status to the expected format
+  const authStatus = useMemo((): CopilotAuthStatus | null => {
+    if (!cliStatusData?.auth) return null;
+    return {
+      authenticated: cliStatusData.auth.authenticated,
+      method: (cliStatusData.auth.method as CopilotAuthStatus['method']) || 'none',
+      login: cliStatusData.auth.login,
+      host: cliStatusData.auth.host,
+      error: cliStatusData.auth.error,
+    };
+  }, [cliStatusData]);
+
+  // Refresh all copilot-related queries
+  const handleRefreshCopilotCli = useCallback(async () => {
+    await queryClient.invalidateQueries({ queryKey: queryKeys.cli.copilot() });
+    await refetchCliStatus();
+    toast.success('Copilot CLI refreshed');
+  }, [queryClient, refetchCliStatus]);
+
+  const handleDefaultModelChange = useCallback(
+    (model: CopilotModelId) => {
+      setIsSaving(true);
+      try {
+        setCopilotDefaultModel(model);
+        toast.success('Default model updated');
+      } catch {
+        toast.error('Failed to update default model');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [setCopilotDefaultModel]
+  );
+
+  const handleModelToggle = useCallback(
+    (model: CopilotModelId, enabled: boolean) => {
+      setIsSaving(true);
+      try {
+        toggleCopilotModel(model, enabled);
+      } catch {
+        toast.error('Failed to update models');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [toggleCopilotModel]
+  );
+
+  // Show skeleton only while checking CLI status initially
+  if (!cliStatus && isCheckingCopilotCli) {
+    return (
+      <div className="space-y-6">
+        <CopilotCliStatusSkeleton />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Provider Visibility Toggle */}
+      <ProviderToggle provider="copilot" providerLabel="GitHub Copilot" />
+
+      <CopilotCliStatus
+        status={cliStatus}
+        authStatus={authStatus}
+        isChecking={isCheckingCopilotCli}
+        onRefresh={handleRefreshCopilotCli}
+      />
+
+      {/* Model Configuration - Only show when CLI is installed */}
+      {isCliInstalled && (
+        <CopilotModelConfiguration
+          enabledCopilotModels={enabledCopilotModels}
+          copilotDefaultModel={copilotDefaultModel}
+          isSaving={isSaving}
+          onDefaultModelChange={handleDefaultModelChange}
+          onModelToggle={handleModelToggle}
+        />
+      )}
+    </div>
+  );
+}
+
+export default CopilotSettingsTab;
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/cursor-model-configuration.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/cursor-model-configuration.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6e3f7097e0d1044b7b162218e67a676ca79af57f
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/cursor-model-configuration.tsx
@@ -0,0 +1,129 @@
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Terminal } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { CursorModelId, CursorModelConfig } from '@automaker/types';
+import { CURSOR_MODEL_MAP } from '@automaker/types';
+
+interface CursorModelConfigurationProps {
+  enabledCursorModels: CursorModelId[];
+  cursorDefaultModel: CursorModelId;
+  isSaving: boolean;
+  onDefaultModelChange: (model: CursorModelId) => void;
+  onModelToggle: (model: CursorModelId, enabled: boolean) => void;
+}
+
+export function CursorModelConfiguration({
+  enabledCursorModels,
+  cursorDefaultModel,
+  isSaving,
+  onDefaultModelChange,
+  onModelToggle,
+}: CursorModelConfigurationProps) {
+  // All available models from the model map
+  const availableModels: CursorModelConfig[] = Object.values(CURSOR_MODEL_MAP);
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <Terminal className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            Model Configuration
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure which Cursor models are available in the feature modal
+        </p>
+      </div>
+      <div className="p-6 space-y-6">
+        {/* Default Model */}
+        <div className="space-y-2">
+          <Label>Default Model</Label>
+          <Select
+            value={cursorDefaultModel}
+            onValueChange={(v) => onDefaultModelChange(v as CursorModelId)}
+            disabled={isSaving}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {enabledCursorModels.map((modelId) => {
+                const model = CURSOR_MODEL_MAP[modelId];
+                if (!model) return null;
+                return (
+                  <SelectItem key={modelId} value={modelId}>
+                    <div className="flex items-center gap-2">
+                      <span>{model.label}</span>
+                      {model.hasThinking && (
+                        <Badge variant="outline" className="text-xs">
+                          Thinking
+                        </Badge>
+                      )}
+                    </div>
+                  </SelectItem>
+                );
+              })}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Enabled Models */}
+        <div className="space-y-3">
+          <Label>Available Models</Label>
+          <div className="grid gap-3">
+            {availableModels.map((model) => {
+              const isEnabled = enabledCursorModels.includes(model.id);
+              // With canonical IDs, 'auto' becomes 'cursor-auto'
+              const isAuto = model.id === 'cursor-auto';
+
+              return (
+                <div
+                  key={model.id}
+                  className="flex items-center justify-between p-3 rounded-xl border border-border/50 bg-card/50 hover:bg-accent/30 transition-colors"
+                >
+                  <div className="flex items-center gap-3">
+                    <Checkbox
+                      checked={isEnabled}
+                      onCheckedChange={(checked) => onModelToggle(model.id, !!checked)}
+                      disabled={isSaving || isAuto}
+                    />
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-medium">{model.label}</span>
+                        {model.hasThinking && (
+                          <Badge variant="outline" className="text-xs">
+                            Thinking
+                          </Badge>
+                        )}
+                      </div>
+                      <p className="text-xs text-muted-foreground">{model.description}</p>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/cursor-permissions-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/cursor-permissions-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9def1bda1305b01a9548ec0f2d3a0b570b46e9f4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/cursor-permissions-section.tsx
@@ -0,0 +1,251 @@
+import { useState, useEffect } from 'react';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Shield, ShieldCheck, ShieldAlert, ChevronDown, Copy, Check } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import type { CursorStatus } from '../hooks/use-cursor-status';
+import type { PermissionsData } from '../hooks/use-cursor-permissions';
+
+interface CursorPermissionsSectionProps {
+  status: CursorStatus | null;
+  permissions: PermissionsData | null;
+  isLoadingPermissions: boolean;
+  isSavingPermissions: boolean;
+  copiedConfig: boolean;
+  currentProject?: { path: string } | null;
+  onApplyProfile: (profileId: 'strict' | 'development', scope: 'global' | 'project') => void;
+  onCopyConfig: (profileId: 'strict' | 'development') => void;
+  onLoadPermissions: () => void;
+}
+
+export function CursorPermissionsSection({
+  status,
+  permissions,
+  isLoadingPermissions,
+  isSavingPermissions,
+  copiedConfig,
+  currentProject,
+  onApplyProfile,
+  onCopyConfig,
+  onLoadPermissions,
+}: CursorPermissionsSectionProps) {
+  const [permissionsExpanded, setPermissionsExpanded] = useState(false);
+
+  // Load permissions when section is expanded
+  useEffect(() => {
+    if (permissionsExpanded && status?.installed && !permissions) {
+      onLoadPermissions();
+    }
+  }, [permissionsExpanded, status?.installed, permissions, onLoadPermissions]);
+
+  if (!status?.installed) {
+    return null;
+  }
+
+  return (
+    <Collapsible open={permissionsExpanded} onOpenChange={setPermissionsExpanded}>
+      <div
+        className={cn(
+          'rounded-2xl overflow-hidden',
+          'border border-border/50',
+          'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+          'shadow-sm shadow-black/5'
+        )}
+      >
+        <CollapsibleTrigger className="w-full">
+          <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-amber-500/20 to-amber-600/10 flex items-center justify-center border border-amber-500/20">
+                <Shield className="w-5 h-5 text-amber-500" />
+              </div>
+              <div className="text-left">
+                <h2 className="text-lg font-semibold text-foreground tracking-tight">
+                  CLI Permissions
+                </h2>
+                <p className="text-sm text-muted-foreground/80">Configure what Cursor CLI can do</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              {permissions?.activeProfile && (
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    permissions.activeProfile === 'strict'
+                      ? 'border-green-500/50 text-green-500'
+                      : permissions.activeProfile === 'development'
+                        ? 'border-blue-500/50 text-blue-500'
+                        : 'border-amber-500/50 text-amber-500'
+                  )}
+                >
+                  {permissions.activeProfile === 'strict' && (
+                    <ShieldCheck className="w-3 h-3 mr-1" />
+                  )}
+                  {permissions.activeProfile === 'development' && (
+                    <ShieldAlert className="w-3 h-3 mr-1" />
+                  )}
+                  {permissions.activeProfile}
+                </Badge>
+              )}
+              <ChevronDown
+                className={cn(
+                  'w-5 h-5 text-muted-foreground transition-transform',
+                  permissionsExpanded && 'rotate-180'
+                )}
+              />
+            </div>
+          </div>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent>
+          <div className="p-6 space-y-6">
+            {/* Security Warning */}
+            <div className="flex items-start gap-3 p-4 rounded-xl bg-amber-500/10 border border-amber-500/20">
+              <ShieldAlert className="w-5 h-5 text-amber-400 shrink-0 mt-0.5" />
+              <div className="text-sm text-amber-400/90">
+                <span className="font-medium">Security Notice</span>
+                <p className="text-xs text-amber-400/70 mt-1">
+                  Cursor CLI can execute shell commands based on its permission config. For
+                  overnight automation, consider using the Strict profile to limit what commands can
+                  run.
+                </p>
+              </div>
+            </div>
+
+            {isLoadingPermissions ? (
+              <div className="flex items-center justify-center py-8">
+                <Spinner size="lg" />
+              </div>
+            ) : (
+              <>
+                {/* Permission Profiles */}
+                <div className="space-y-3">
+                  <Label>Permission Profiles</Label>
+                  <div className="grid gap-3">
+                    {permissions?.availableProfiles.map((profile) => (
+                      <div
+                        key={profile.id}
+                        className={cn(
+                          'p-4 rounded-xl border transition-colors',
+                          permissions.activeProfile === profile.id
+                            ? 'border-brand-500/50 bg-brand-500/5'
+                            : 'border-border/50 bg-card/50 hover:bg-accent/30'
+                        )}
+                      >
+                        <div className="flex items-start justify-between gap-4">
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2 mb-1">
+                              {profile.id === 'strict' ? (
+                                <ShieldCheck className="w-4 h-4 text-green-500" />
+                              ) : (
+                                <ShieldAlert className="w-4 h-4 text-blue-500" />
+                              )}
+                              <span className="font-medium">{profile.name}</span>
+                              {permissions.activeProfile === profile.id && (
+                                <Badge variant="secondary" className="text-xs">
+                                  Active
+                                </Badge>
+                              )}
+                            </div>
+                            <p className="text-xs text-muted-foreground mb-2">
+                              {profile.description}
+                            </p>
+                            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                              <span className="text-green-500">
+                                {profile.permissions.allow.length} allowed
+                              </span>
+                              <span className="text-muted-foreground/50">|</span>
+                              <span className="text-red-500">
+                                {profile.permissions.deny.length} denied
+                              </span>
+                            </div>
+                          </div>
+                          <div className="flex flex-col gap-2">
+                            <Button
+                              size="sm"
+                              variant={
+                                permissions.activeProfile === profile.id ? 'secondary' : 'default'
+                              }
+                              disabled={
+                                isSavingPermissions || permissions.activeProfile === profile.id
+                              }
+                              onClick={() =>
+                                onApplyProfile(profile.id as 'strict' | 'development', 'global')
+                              }
+                            >
+                              Apply Globally
+                            </Button>
+                            {currentProject && (
+                              <Button
+                                size="sm"
+                                variant="outline"
+                                disabled={isSavingPermissions}
+                                onClick={() =>
+                                  onApplyProfile(profile.id as 'strict' | 'development', 'project')
+                                }
+                              >
+                                Apply to Project
+                              </Button>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Config File Location */}
+                <div className="space-y-3">
+                  <Label>Config File Locations</Label>
+                  <div className="p-4 rounded-xl border border-border/50 bg-card/30 space-y-2">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <p className="text-sm font-medium">Global Config</p>
+                        <p className="text-xs text-muted-foreground font-mono">
+                          ~/.cursor/cli-config.json
+                        </p>
+                      </div>
+                      <Button size="sm" variant="ghost" onClick={() => onCopyConfig('development')}>
+                        {copiedConfig ? (
+                          <Check className="w-4 h-4" />
+                        ) : (
+                          <Copy className="w-4 h-4" />
+                        )}
+                      </Button>
+                    </div>
+                    <div className="border-t border-border/30 pt-2">
+                      <p className="text-sm font-medium">Project Config</p>
+                      <p className="text-xs text-muted-foreground font-mono">
+                        &lt;project&gt;/.cursor/cli.json
+                      </p>
+                      {permissions?.hasProjectConfig && (
+                        <Badge variant="secondary" className="mt-1 text-xs">
+                          Project override active
+                        </Badge>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Documentation Link */}
+                <div className="text-xs text-muted-foreground">
+                  Learn more about{' '}
+                  <a
+                    href="https://cursor.com/docs/cli/reference/permissions"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-brand-500 hover:underline"
+                  >
+                    Cursor CLI permissions
+                  </a>
+                </div>
+              </>
+            )}
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/cursor-settings-tab.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/cursor-settings-tab.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..408b371e8eb8526966a7e2efdee466954df13040
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/cursor-settings-tab.tsx
@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { useAppStore } from '@/store/app-store';
+import type { CursorModelId } from '@automaker/types';
+import {
+  CursorCliStatus,
+  CursorCliStatusSkeleton,
+  CursorPermissionsSkeleton,
+  ModelConfigSkeleton,
+} from '../cli-status/cursor-cli-status';
+import { useCursorStatus } from '../hooks/use-cursor-status';
+import { useCursorPermissions } from '../hooks/use-cursor-permissions';
+import { CursorPermissionsSection } from './cursor-permissions-section';
+import { CursorModelConfiguration } from './cursor-model-configuration';
+import { ProviderToggle } from './provider-toggle';
+
+export function CursorSettingsTab() {
+  // Global settings from store
+  const {
+    enabledCursorModels,
+    cursorDefaultModel,
+    setCursorDefaultModel,
+    toggleCursorModel,
+    currentProject,
+  } = useAppStore();
+
+  // Custom hooks for data fetching
+  const { status, isLoading, loadData } = useCursorStatus();
+  const {
+    permissions,
+    isLoadingPermissions,
+    isSavingPermissions,
+    copiedConfig,
+    loadPermissions,
+    applyProfile,
+    copyConfig,
+  } = useCursorPermissions(currentProject?.path);
+
+  // Local state for model configuration saving
+  const [isSaving, setIsSaving] = useState(false);
+
+  const handleDefaultModelChange = (model: CursorModelId) => {
+    setIsSaving(true);
+    try {
+      setCursorDefaultModel(model);
+      toast.success('Default model updated');
+    } catch {
+      toast.error('Failed to update default model');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleModelToggle = (model: CursorModelId, enabled: boolean) => {
+    setIsSaving(true);
+    try {
+      toggleCursorModel(model, enabled);
+    } catch {
+      toast.error('Failed to update models');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <CursorCliStatusSkeleton />
+        <CursorPermissionsSkeleton />
+        <ModelConfigSkeleton />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Provider Visibility Toggle */}
+      <ProviderToggle provider="cursor" providerLabel="Cursor" />
+
+      {/* CLI Status */}
+      <CursorCliStatus status={status} isChecking={isLoading} onRefresh={loadData} />
+
+      {/* CLI Permissions Section */}
+      <CursorPermissionsSection
+        status={status}
+        permissions={permissions}
+        isLoadingPermissions={isLoadingPermissions}
+        isSavingPermissions={isSavingPermissions}
+        copiedConfig={copiedConfig}
+        currentProject={currentProject}
+        onApplyProfile={applyProfile}
+        onCopyConfig={copyConfig}
+        onLoadPermissions={loadPermissions}
+      />
+
+      {/* Model Configuration - Always show (global settings) */}
+      {status?.installed && (
+        <CursorModelConfiguration
+          enabledCursorModels={enabledCursorModels}
+          cursorDefaultModel={cursorDefaultModel}
+          isSaving={isSaving}
+          onDefaultModelChange={handleDefaultModelChange}
+          onModelToggle={handleModelToggle}
+        />
+      )}
+    </div>
+  );
+}
+
+export default CursorSettingsTab;
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/gemini-model-configuration.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/gemini-model-configuration.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cce7d8377110bd0932938e614650f4ddbb3726a7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/gemini-model-configuration.tsx
@@ -0,0 +1,51 @@
+import type { GeminiModelId } from '@automaker/types';
+import { GeminiIcon } from '@/components/ui/provider-icon';
+import { GEMINI_MODEL_MAP } from '@automaker/types';
+import { BaseModelConfiguration, type BaseModelInfo } from './shared/base-model-configuration';
+
+interface GeminiModelConfigurationProps {
+  enabledGeminiModels: GeminiModelId[];
+  geminiDefaultModel: GeminiModelId;
+  isSaving: boolean;
+  onDefaultModelChange: (model: GeminiModelId) => void;
+  onModelToggle: (model: GeminiModelId, enabled: boolean) => void;
+}
+
+interface GeminiModelInfo extends BaseModelInfo<GeminiModelId> {
+  supportsThinking: boolean;
+}
+
+// Build model info from the GEMINI_MODEL_MAP
+const GEMINI_MODELS: GeminiModelInfo[] = Object.entries(GEMINI_MODEL_MAP).map(([id, config]) => ({
+  id: id as GeminiModelId,
+  label: config.label,
+  description: config.description,
+  supportsThinking: config.supportsThinking,
+}));
+
+export function GeminiModelConfiguration({
+  enabledGeminiModels,
+  geminiDefaultModel,
+  isSaving,
+  onDefaultModelChange,
+  onModelToggle,
+}: GeminiModelConfigurationProps) {
+  return (
+    <BaseModelConfiguration<GeminiModelId>
+      providerName="Gemini"
+      icon={<GeminiIcon className="w-5 h-5 text-blue-500" />}
+      iconGradient="from-blue-500/20 to-blue-600/10"
+      iconBorder="border-blue-500/20"
+      models={GEMINI_MODELS}
+      enabledModels={enabledGeminiModels}
+      defaultModel={geminiDefaultModel}
+      isSaving={isSaving}
+      onDefaultModelChange={onDefaultModelChange}
+      onModelToggle={onModelToggle}
+      getFeatureBadge={(model) => {
+        const geminiModel = model as GeminiModelInfo;
+        return geminiModel.supportsThinking ? { show: true, label: 'Thinking' } : null;
+      }}
+    />
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/gemini-settings-tab.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/gemini-settings-tab.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4cc4378345b7707353acc5c71df59996270c20de
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/gemini-settings-tab.tsx
@@ -0,0 +1,130 @@
+import { useState, useCallback, useMemo } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { useAppStore } from '@/store/app-store';
+import { GeminiCliStatus, GeminiCliStatusSkeleton } from '../cli-status/gemini-cli-status';
+import { GeminiModelConfiguration } from './gemini-model-configuration';
+import { ProviderToggle } from './provider-toggle';
+import { useGeminiCliStatus } from '@/hooks/queries';
+import { queryKeys } from '@/lib/query-keys';
+import type { CliStatus as SharedCliStatus } from '../shared/types';
+import type { GeminiAuthStatus } from '../cli-status/gemini-cli-status';
+import type { GeminiModelId } from '@automaker/types';
+
+export function GeminiSettingsTab() {
+  const queryClient = useQueryClient();
+  const { enabledGeminiModels, geminiDefaultModel, setGeminiDefaultModel, toggleGeminiModel } =
+    useAppStore();
+
+  const [isSaving, setIsSaving] = useState(false);
+
+  // React Query hooks for data fetching
+  const {
+    data: cliStatusData,
+    isLoading: isCheckingGeminiCli,
+    refetch: refetchCliStatus,
+  } = useGeminiCliStatus();
+
+  const isCliInstalled = cliStatusData?.installed ?? false;
+
+  // Transform CLI status to the expected format
+  const cliStatus = useMemo((): SharedCliStatus | null => {
+    if (!cliStatusData) return null;
+    return {
+      success: cliStatusData.success ?? false,
+      status: cliStatusData.installed ? 'installed' : 'not_installed',
+      method: cliStatusData.auth?.method,
+      version: cliStatusData.version,
+      path: cliStatusData.path,
+      recommendation: cliStatusData.recommendation,
+      // Server sends installCommand (singular), transform to expected format
+      installCommands: cliStatusData.installCommand
+        ? { npm: cliStatusData.installCommand }
+        : cliStatusData.installCommands,
+    };
+  }, [cliStatusData]);
+
+  // Transform auth status to the expected format
+  const authStatus = useMemo((): GeminiAuthStatus | null => {
+    if (!cliStatusData?.auth) return null;
+    return {
+      authenticated: cliStatusData.auth.authenticated,
+      method: (cliStatusData.auth.method as GeminiAuthStatus['method']) || 'none',
+      hasApiKey: cliStatusData.auth.hasApiKey,
+      hasEnvApiKey: cliStatusData.auth.hasEnvApiKey,
+      error: cliStatusData.auth.error,
+    };
+  }, [cliStatusData]);
+
+  // Refresh all gemini-related queries
+  const handleRefreshGeminiCli = useCallback(async () => {
+    await queryClient.invalidateQueries({ queryKey: queryKeys.cli.gemini() });
+    await refetchCliStatus();
+    toast.success('Gemini CLI refreshed');
+  }, [queryClient, refetchCliStatus]);
+
+  const handleDefaultModelChange = useCallback(
+    (model: GeminiModelId) => {
+      setIsSaving(true);
+      try {
+        setGeminiDefaultModel(model);
+        toast.success('Default model updated');
+      } catch {
+        toast.error('Failed to update default model');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [setGeminiDefaultModel]
+  );
+
+  const handleModelToggle = useCallback(
+    (model: GeminiModelId, enabled: boolean) => {
+      setIsSaving(true);
+      try {
+        toggleGeminiModel(model, enabled);
+      } catch {
+        toast.error('Failed to update models');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [toggleGeminiModel]
+  );
+
+  // Show skeleton only while checking CLI status initially
+  if (!cliStatus && isCheckingGeminiCli) {
+    return (
+      <div className="space-y-6">
+        <GeminiCliStatusSkeleton />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Provider Visibility Toggle */}
+      <ProviderToggle provider="gemini" providerLabel="Gemini" />
+
+      <GeminiCliStatus
+        status={cliStatus}
+        authStatus={authStatus}
+        isChecking={isCheckingGeminiCli}
+        onRefresh={handleRefreshGeminiCli}
+      />
+
+      {/* Model Configuration - Only show when CLI is installed */}
+      {isCliInstalled && (
+        <GeminiModelConfiguration
+          enabledGeminiModels={enabledGeminiModels}
+          geminiDefaultModel={geminiDefaultModel}
+          isSaving={isSaving}
+          onDefaultModelChange={handleDefaultModelChange}
+          onModelToggle={handleModelToggle}
+        />
+      )}
+    </div>
+  );
+}
+
+export default GeminiSettingsTab;
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/providers/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fab18b5f6c2192b7683d7482ae01080688ac0fdc
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/index.ts
@@ -0,0 +1,7 @@
+export { ProviderTabs } from './provider-tabs';
+export { ClaudeSettingsTab } from './claude-settings-tab';
+export { CursorSettingsTab } from './cursor-settings-tab';
+export { CodexSettingsTab } from './codex-settings-tab';
+export { OpencodeSettingsTab } from './opencode-settings-tab';
+export { GeminiSettingsTab } from './gemini-settings-tab';
+export { CopilotSettingsTab } from './copilot-settings-tab';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/opencode-model-configuration.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/opencode-model-configuration.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7628f21c4cdc2bf8f4a91fd2517ff2a83619b4f4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/opencode-model-configuration.tsx
@@ -0,0 +1,716 @@
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Terminal, Cloud, Cpu, Brain, Github, KeyRound, ShieldCheck } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { Input } from '@/components/ui/input';
+import type {
+  OpencodeModelId,
+  OpencodeProvider,
+  OpencodeModelConfig,
+  ModelDefinition,
+} from '@automaker/types';
+import { OPENCODE_MODELS, OPENCODE_MODEL_CONFIG_MAP } from '@automaker/types';
+import type { OpenCodeProviderInfo } from '../cli-status/opencode-cli-status';
+import {
+  OpenCodeIcon,
+  AnthropicIcon,
+  OpenRouterIcon,
+  GeminiIcon,
+  OpenAIIcon,
+  GrokIcon,
+  getProviderIconForModel,
+} from '@/components/ui/provider-icon';
+import { useEffect, useMemo, useRef, useState, type ComponentType } from 'react';
+
+interface OpencodeModelConfigurationProps {
+  enabledOpencodeModels: OpencodeModelId[];
+  opencodeDefaultModel: OpencodeModelId;
+  isSaving: boolean;
+  onDefaultModelChange: (model: OpencodeModelId) => void;
+  onModelToggle: (model: OpencodeModelId, enabled: boolean) => void;
+  providers?: OpenCodeProviderInfo[];
+  // Dynamic models
+  dynamicModels: ModelDefinition[];
+  enabledDynamicModelIds: string[];
+  onDynamicModelToggle: (modelId: string, enabled: boolean) => void;
+  isLoadingDynamicModels?: boolean;
+}
+
+/**
+ * Returns the appropriate icon component for a given OpenCode model ID
+ */
+function getModelIcon(modelId: OpencodeModelId): ComponentType<{ className?: string }> {
+  return getProviderIconForModel(modelId);
+}
+
+/**
+ * Returns a formatted provider label for display
+ */
+function getProviderLabel(provider: OpencodeProvider): string {
+  switch (provider) {
+    case 'opencode':
+      return 'OpenCode (Free)';
+    default:
+      return provider;
+  }
+}
+
+/**
+ * Configuration for dynamic provider display
+ */
+const DYNAMIC_PROVIDER_CONFIG: Record<
+  string,
+  { label: string; icon: ComponentType<{ className?: string }> }
+> = {
+  'github-copilot': { label: 'GitHub Copilot', icon: Github },
+  google: { label: 'Google AI', icon: GeminiIcon },
+  openai: { label: 'OpenAI', icon: OpenAIIcon },
+  openrouter: { label: 'OpenRouter', icon: OpenRouterIcon },
+  anthropic: { label: 'Anthropic', icon: AnthropicIcon },
+  opencode: { label: 'OpenCode (Free)', icon: Terminal },
+  ollama: { label: 'Ollama (Local)', icon: Cpu },
+  lmstudio: { label: 'LM Studio (Local)', icon: Cpu },
+  azure: { label: 'Azure OpenAI', icon: Cloud },
+  'amazon-bedrock': { label: 'AWS Bedrock', icon: Cloud },
+  xai: { label: 'xAI', icon: GrokIcon },
+  deepseek: { label: 'DeepSeek', icon: Brain },
+};
+
+function getDynamicProviderConfig(providerId: string) {
+  return (
+    DYNAMIC_PROVIDER_CONFIG[providerId] || {
+      label: providerId.charAt(0).toUpperCase() + providerId.slice(1).replace(/-/g, ' '),
+      icon: Cloud,
+    }
+  );
+}
+
+const OPENCODE_AUTH_METHOD_LABELS: Record<string, string> = {
+  oauth: 'OAuth',
+  api_key: 'Key',
+  api: 'Key',
+  key: 'Key',
+};
+const OPENCODE_AUTH_METHOD_ICONS: Record<string, ComponentType<{ className?: string }>> = {
+  oauth: ShieldCheck,
+  api_key: KeyRound,
+  api: KeyRound,
+  key: KeyRound,
+};
+const OPENCODE_PROVIDER_FILTER_CLEAR_LABEL = 'Clear';
+const OPENCODE_PROVIDER_FILTER_SEARCH_PLACEHOLDER = 'Search models...';
+const OPENCODE_PROVIDER_FILTER_EMPTY_LABEL = 'No models match your filters.';
+const OPENCODE_PROVIDER_FILTER_EMPTY_HINT = 'Try a different search or provider.';
+const OPENCODE_PROVIDER_MODELS_EMPTY_LABEL = 'No models available yet.';
+const OPENCODE_PROVIDER_MODELS_EMPTY_HINT = 'Connect or refresh OpenCode CLI to load models.';
+const OPENCODE_DYNAMIC_MODELS_SECTION_LABEL = 'Dynamic Models (from OpenCode providers)';
+const OPENCODE_SELECT_DYNAMIC_LABEL = 'Select all';
+const OPENCODE_SELECT_STATIC_LABEL = 'Select all';
+const OPENCODE_SELECT_ALL_CONTAINER_CLASS =
+  'flex items-center gap-2 rounded-full border border-border/60 bg-card/60 px-2.5 py-1 text-xs text-muted-foreground';
+
+function formatProviderAuthLabel(provider?: OpenCodeProviderInfo): string | null {
+  if (!provider?.authMethod) return null;
+  return OPENCODE_AUTH_METHOD_LABELS[provider.authMethod] || provider.authMethod;
+}
+
+function getProviderAuthIcon(
+  provider?: OpenCodeProviderInfo
+): ComponentType<{ className?: string }> | null {
+  if (!provider?.authMethod) return null;
+  return OPENCODE_AUTH_METHOD_ICONS[provider.authMethod] || null;
+}
+
+function getDynamicProviderBaseLabel(
+  providerId: string,
+  providerInfo: OpenCodeProviderInfo | undefined
+): string {
+  const providerConfig = getDynamicProviderConfig(providerId);
+  return providerInfo?.name || providerConfig.label;
+}
+
+function getDynamicProviderLabel(
+  providerId: string,
+  providerInfo: OpenCodeProviderInfo | undefined
+): string {
+  const providerConfig = getDynamicProviderConfig(providerId);
+  const baseLabel = providerInfo?.name || providerConfig.label;
+  const authLabel = formatProviderAuthLabel(providerInfo);
+  return authLabel ? `${baseLabel} (${authLabel})` : baseLabel;
+}
+
+function getSelectionState(
+  candidateIds: string[],
+  selectedIds: string[]
+): boolean | 'indeterminate' {
+  if (candidateIds.length === 0) return false;
+  const allSelected = candidateIds.every((modelId) => selectedIds.includes(modelId));
+  if (allSelected) return true;
+  const anySelected = candidateIds.some((modelId) => selectedIds.includes(modelId));
+  return anySelected ? 'indeterminate' : false;
+}
+
+/**
+ * Group dynamic models by their provider
+ */
+function groupDynamicModelsByProvider(
+  models: ModelDefinition[]
+): Record<string, ModelDefinition[]> {
+  return models.reduce(
+    (acc, model) => {
+      const provider = model.provider || 'unknown';
+      if (!acc[provider]) {
+        acc[provider] = [];
+      }
+      acc[provider].push(model);
+      return acc;
+    },
+    {} as Record<string, ModelDefinition[]>
+  );
+}
+
+function matchesDynamicModelQuery(model: ModelDefinition, query: string): boolean {
+  if (!query) return true;
+  const haystack = `${model.name} ${model.description} ${model.id}`.toLowerCase();
+  return haystack.includes(query);
+}
+
+export function OpencodeModelConfiguration({
+  enabledOpencodeModels,
+  opencodeDefaultModel,
+  isSaving,
+  onDefaultModelChange,
+  onModelToggle,
+  providers,
+  dynamicModels,
+  enabledDynamicModelIds,
+  onDynamicModelToggle,
+  isLoadingDynamicModels = false,
+}: OpencodeModelConfigurationProps) {
+  // Determine the free tier models to display.
+  // When dynamic models are available from CLI, use the opencode provider models
+  // from the dynamic list (they reflect the actual currently-available models).
+  // Fall back to the hardcoded OPENCODE_MODELS only when CLI hasn't returned data.
+  const dynamicOpencodeFreeModels = useMemo(() => {
+    const opencodeModelsFromCli = dynamicModels.filter((m) => m.provider === 'opencode');
+    if (opencodeModelsFromCli.length === 0) return null;
+
+    // Convert dynamic ModelDefinition to OpencodeModelConfig for the static section
+    return opencodeModelsFromCli.map(
+      (m): OpencodeModelConfig => ({
+        id: m.id.replace('opencode/', 'opencode-') as OpencodeModelId,
+        label: m.name.replace(/\s*\(Free\)\s*$/, '').replace(/\s*\(OpenCode\)\s*$/, ''),
+        description: m.description,
+        supportsVision: m.supportsVision ?? false,
+        provider: 'opencode' as OpencodeProvider,
+        tier: 'free',
+      })
+    );
+  }, [dynamicModels]);
+
+  // Use dynamically discovered free tier models when available, otherwise hardcoded fallback
+  const effectiveStaticModels = dynamicOpencodeFreeModels ?? OPENCODE_MODELS;
+
+  // Build an effective config map that includes dynamic models (for default model dropdown lookup)
+  const effectiveModelConfigMap = useMemo(() => {
+    const map = { ...OPENCODE_MODEL_CONFIG_MAP };
+    if (dynamicOpencodeFreeModels) {
+      for (const model of dynamicOpencodeFreeModels) {
+        map[model.id] = model;
+      }
+    }
+    return map;
+  }, [dynamicOpencodeFreeModels]);
+
+  // Group static models by provider for organized display
+  const modelsByProvider = effectiveStaticModels.reduce(
+    (acc, model) => {
+      if (!acc[model.provider]) {
+        acc[model.provider] = [];
+      }
+      acc[model.provider].push(model);
+      return acc;
+    },
+    {} as Record<OpencodeProvider, OpencodeModelConfig[]>
+  );
+
+  // Group dynamic models by provider
+  const dynamicModelsByProvider = groupDynamicModelsByProvider(dynamicModels);
+  const authenticatedProviders = (providers || []).filter((provider) => provider.authenticated);
+  const [dynamicProviderFilter, setDynamicProviderFilter] = useState<string | null>(null);
+  const hasInitializedDynamicProviderFilter = useRef(false);
+  const [dynamicProviderSearch, setDynamicProviderSearch] = useState('');
+  const normalizedDynamicSearch = dynamicProviderSearch.trim().toLowerCase();
+  const hasDynamicSearch = normalizedDynamicSearch.length > 0;
+  const allStaticModelIds = effectiveStaticModels.map((model) => model.id);
+  const selectableStaticModelIds = allStaticModelIds.filter(
+    (modelId) => modelId !== opencodeDefaultModel
+  );
+  const staticSelectState = getSelectionState(selectableStaticModelIds, enabledOpencodeModels);
+
+  // Order: Free tier first, then Claude, then others
+  const providerOrder: OpencodeProvider[] = ['opencode'];
+
+  // Dynamic provider order (prioritize commonly used ones)
+  const dynamicProviderOrder = useMemo(
+    () => [
+      'github-copilot',
+      'google',
+      'openai',
+      'openrouter',
+      'anthropic',
+      'xai',
+      'deepseek',
+      'ollama',
+      'lmstudio',
+      'azure',
+      'amazon-bedrock',
+      'opencode', // Skip opencode in dynamic since it's in static
+    ],
+    []
+  );
+
+  const sortedDynamicProviders = useMemo(() => {
+    const providerIndex = (providerId: string) => dynamicProviderOrder.indexOf(providerId);
+    const providerIds = new Set([
+      ...Object.keys(dynamicModelsByProvider),
+      ...(providers || []).map((provider) => provider.id),
+    ]);
+
+    providerIds.delete('opencode'); // Don't show opencode twice
+
+    return Array.from(providerIds).sort((a, b) => {
+      const aIndex = providerIndex(a);
+      const bIndex = providerIndex(b);
+      if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;
+      if (aIndex !== -1) return -1;
+      if (bIndex !== -1) return 1;
+      return a.localeCompare(b);
+    });
+  }, [dynamicModelsByProvider, providers, dynamicProviderOrder]);
+
+  useEffect(() => {
+    if (
+      dynamicProviderFilter &&
+      sortedDynamicProviders.length > 0 &&
+      !sortedDynamicProviders.includes(dynamicProviderFilter)
+    ) {
+      setDynamicProviderFilter(sortedDynamicProviders[0]);
+      return;
+    }
+
+    if (
+      !hasInitializedDynamicProviderFilter.current &&
+      !dynamicProviderFilter &&
+      sortedDynamicProviders.length > 0
+    ) {
+      hasInitializedDynamicProviderFilter.current = true;
+      setDynamicProviderFilter(sortedDynamicProviders[0]);
+    }
+  }, [dynamicProviderFilter, sortedDynamicProviders]);
+
+  const filteredDynamicProviders = useMemo(() => {
+    const baseProviders = dynamicProviderFilter ? [dynamicProviderFilter] : sortedDynamicProviders;
+
+    if (!hasDynamicSearch) {
+      return baseProviders;
+    }
+
+    return baseProviders.filter((providerId) => {
+      const models = dynamicModelsByProvider[providerId] || [];
+      return models.some((model) => matchesDynamicModelQuery(model, normalizedDynamicSearch));
+    });
+  }, [
+    dynamicModelsByProvider,
+    dynamicProviderFilter,
+    hasDynamicSearch,
+    normalizedDynamicSearch,
+    sortedDynamicProviders,
+  ]);
+
+  const hasDynamicProviders = sortedDynamicProviders.length > 0;
+  const showDynamicProviderFilters = sortedDynamicProviders.length > 1;
+  const hasFilteredDynamicProviders = filteredDynamicProviders.length > 0;
+
+  const toggleDynamicProviderFilter = (providerId: string) => {
+    setDynamicProviderFilter((current) => (current === providerId ? current : providerId));
+  };
+
+  const toggleAllStaticModels = (checked: boolean) => {
+    if (checked) {
+      selectableStaticModelIds.forEach((modelId) => {
+        if (!enabledOpencodeModels.includes(modelId)) {
+          onModelToggle(modelId, true);
+        }
+      });
+      return;
+    }
+
+    selectableStaticModelIds.forEach((modelId) => {
+      if (enabledOpencodeModels.includes(modelId)) {
+        onModelToggle(modelId, false);
+      }
+    });
+  };
+
+  const toggleProviderDynamicModels = (modelIds: string[], checked: boolean) => {
+    if (checked) {
+      modelIds.forEach((modelId) => {
+        if (!enabledDynamicModelIds.includes(modelId)) {
+          onDynamicModelToggle(modelId, true);
+        }
+      });
+      return;
+    }
+
+    modelIds.forEach((modelId) => {
+      if (enabledDynamicModelIds.includes(modelId)) {
+        onDynamicModelToggle(modelId, false);
+      }
+    });
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <OpenCodeIcon className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            Model Configuration
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure which OpenCode models are available in the feature modal
+        </p>
+      </div>
+      <div className="p-6 space-y-6">
+        {/* Default Model Selection */}
+        <div className="space-y-2">
+          <Label>Default Model</Label>
+          <Select
+            value={opencodeDefaultModel}
+            onValueChange={(v) => onDefaultModelChange(v as OpencodeModelId)}
+            disabled={isSaving}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {enabledOpencodeModels.map((modelId) => {
+                const model = effectiveModelConfigMap[modelId];
+                if (!model) return null;
+                const ModelIconComponent = getModelIcon(modelId);
+                return (
+                  <SelectItem key={modelId} value={modelId}>
+                    <div className="flex items-center gap-2">
+                      <ModelIconComponent className="w-4 h-4" />
+                      <span>{model.label}</span>
+                    </div>
+                  </SelectItem>
+                );
+              })}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Available Models grouped by provider */}
+        <div className="space-y-4">
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <Label>Available Models</Label>
+            {selectableStaticModelIds.length > 0 && (
+              <div className={OPENCODE_SELECT_ALL_CONTAINER_CLASS}>
+                <Checkbox
+                  checked={staticSelectState}
+                  onCheckedChange={toggleAllStaticModels}
+                  disabled={isSaving}
+                />
+                <span>{OPENCODE_SELECT_STATIC_LABEL}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Static models grouped by provider (Built-in) */}
+          {providerOrder.map((provider) => {
+            const models = modelsByProvider[provider];
+            if (!models || models.length === 0) return null;
+
+            // Use the first model's icon as the provider icon
+            const ProviderIconComponent =
+              models.length > 0 ? getModelIcon(models[0].id) : OpenCodeIcon;
+
+            return (
+              <div key={provider} className="space-y-2">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <ProviderIconComponent className="w-4 h-4" />
+                  <span className="font-medium">{getProviderLabel(provider)}</span>
+                  {provider === 'opencode' && (
+                    <Badge
+                      variant="outline"
+                      className="text-xs bg-green-500/10 text-green-500 border-green-500/30"
+                    >
+                      Free
+                    </Badge>
+                  )}
+                </div>
+                <div className="grid gap-2">
+                  {models.map((model) => {
+                    const isEnabled = enabledOpencodeModels.includes(model.id);
+                    const isDefault = model.id === opencodeDefaultModel;
+
+                    return (
+                      <div
+                        key={model.id}
+                        className="flex items-center justify-between p-3 rounded-xl border border-border/50 bg-card/50 hover:bg-accent/30 transition-colors"
+                      >
+                        <div className="flex items-center gap-3">
+                          <Checkbox
+                            checked={isEnabled}
+                            onCheckedChange={(checked) => onModelToggle(model.id, !!checked)}
+                            disabled={isSaving || isDefault}
+                          />
+                          <div>
+                            <div className="flex items-center gap-2">
+                              <span className="text-sm font-medium">{model.label}</span>
+                              {model.supportsVision && (
+                                <Badge variant="outline" className="text-xs">
+                                  Vision
+                                </Badge>
+                              )}
+                              {model.tier === 'free' && (
+                                <Badge
+                                  variant="outline"
+                                  className="text-xs bg-green-500/10 text-green-500 border-green-500/30"
+                                >
+                                  Free
+                                </Badge>
+                              )}
+                              {isDefault && (
+                                <Badge variant="secondary" className="text-xs">
+                                  Default
+                                </Badge>
+                              )}
+                            </div>
+                            <p className="text-xs text-muted-foreground">{model.description}</p>
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+
+          {/* Dynamic models from OpenCode providers */}
+          {(hasDynamicProviders || isLoadingDynamicModels) && (
+            <>
+              {/* Separator between static and dynamic models */}
+              <div className="border-t border-border/50 my-4" />
+              <div className="flex flex-wrap items-center justify-between gap-2 -mt-2 mb-2">
+                <div className="flex flex-wrap items-center gap-2">
+                  <p className="text-xs text-muted-foreground">
+                    {OPENCODE_DYNAMIC_MODELS_SECTION_LABEL}
+                  </p>
+                  {isLoadingDynamicModels && (
+                    <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                      <Spinner size="xs" />
+                      <span>Discovering...</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {showDynamicProviderFilters && (
+                <div className="space-y-2">
+                  <div className="flex flex-wrap gap-2 rounded-xl border border-border/60 bg-card/40 p-2">
+                    {sortedDynamicProviders.map((providerId) => {
+                      const providerInfo = authenticatedProviders.find(
+                        (provider) => provider.id === providerId
+                      );
+                      const providerLabel = getDynamicProviderBaseLabel(providerId, providerInfo);
+                      const providerConfig = getDynamicProviderConfig(providerId);
+                      const ProviderIcon = providerConfig.icon;
+                      const AuthIcon = getProviderAuthIcon(providerInfo);
+                      const authLabel = formatProviderAuthLabel(providerInfo);
+                      const isActive = dynamicProviderFilter === providerId;
+                      const authBadgeClass = cn(
+                        'inline-flex h-5 w-5 items-center justify-center rounded-full border border-transparent bg-transparent text-muted-foreground/80 transition-colors',
+                        isActive && 'text-accent-foreground'
+                      );
+
+                      return (
+                        <Button
+                          key={providerId}
+                          type="button"
+                          size="sm"
+                          variant="outline"
+                          onClick={() => toggleDynamicProviderFilter(providerId)}
+                          className={cn('text-xs', isActive && 'bg-accent text-accent-foreground')}
+                        >
+                          <span className="flex items-center gap-1.5">
+                            <ProviderIcon className="w-3.5 h-3.5" />
+                            <span>{providerLabel}</span>
+                            {AuthIcon && authLabel && (
+                              <span className={authBadgeClass}>
+                                <AuthIcon className="w-2.5 h-2.5" />
+                                <span className="sr-only">{authLabel}</span>
+                              </span>
+                            )}
+                          </span>
+                        </Button>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+
+              {hasDynamicProviders && (
+                <div className="flex flex-wrap items-center gap-2">
+                  <Input
+                    value={dynamicProviderSearch}
+                    onChange={(event) => setDynamicProviderSearch(event.target.value)}
+                    placeholder={OPENCODE_PROVIDER_FILTER_SEARCH_PLACEHOLDER}
+                    className="h-8 text-xs"
+                  />
+                  {dynamicProviderSearch && (
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => setDynamicProviderSearch('')}
+                      className="text-xs"
+                    >
+                      {OPENCODE_PROVIDER_FILTER_CLEAR_LABEL}
+                    </Button>
+                  )}
+                </div>
+              )}
+
+              {hasDynamicSearch && !hasFilteredDynamicProviders && (
+                <div className="rounded-xl border border-dashed border-border/60 bg-card/40 px-3 py-2 text-xs text-muted-foreground">
+                  <p className="font-medium">{OPENCODE_PROVIDER_FILTER_EMPTY_LABEL}</p>
+                  <p className="mt-1">{OPENCODE_PROVIDER_FILTER_EMPTY_HINT}</p>
+                </div>
+              )}
+
+              {filteredDynamicProviders.map((providerId) => {
+                const models = dynamicModelsByProvider[providerId] || [];
+                const providerConfig = getDynamicProviderConfig(providerId);
+                const providerInfo = authenticatedProviders.find(
+                  (provider) => provider.id === providerId
+                );
+                const providerLabel = getDynamicProviderLabel(providerId, providerInfo);
+                const DynamicProviderIcon = providerConfig.icon;
+                const filteredModels = hasDynamicSearch
+                  ? models.filter((model) =>
+                      matchesDynamicModelQuery(model, normalizedDynamicSearch)
+                    )
+                  : models;
+
+                if (hasDynamicSearch && filteredModels.length === 0) {
+                  return null;
+                }
+
+                return (
+                  <div key={`dynamic-${providerId}`} className="space-y-2">
+                    <div className="flex flex-wrap items-center justify-between gap-2">
+                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <DynamicProviderIcon className="w-4 h-4" />
+                        <span className="font-medium">{providerLabel}</span>
+                        <Badge
+                          variant="outline"
+                          className="text-xs bg-blue-500/10 text-blue-500 border-blue-500/30"
+                        >
+                          Dynamic
+                        </Badge>
+                      </div>
+                      {filteredModels.length > 0 && (
+                        <div className={OPENCODE_SELECT_ALL_CONTAINER_CLASS}>
+                          <Checkbox
+                            checked={getSelectionState(
+                              filteredModels.map((model) => model.id),
+                              enabledDynamicModelIds
+                            )}
+                            onCheckedChange={(checked) =>
+                              toggleProviderDynamicModels(
+                                filteredModels.map((model) => model.id),
+                                checked
+                              )
+                            }
+                            disabled={isSaving}
+                          />
+                          <span>{OPENCODE_SELECT_DYNAMIC_LABEL}</span>
+                        </div>
+                      )}
+                    </div>
+                    <div className="grid gap-2">
+                      {filteredModels.length === 0 ? (
+                        <div className="rounded-xl border border-dashed border-border/60 bg-card/40 px-3 py-2 text-xs text-muted-foreground">
+                          <p className="font-medium">{OPENCODE_PROVIDER_MODELS_EMPTY_LABEL}</p>
+                          <p className="mt-1">{OPENCODE_PROVIDER_MODELS_EMPTY_HINT}</p>
+                        </div>
+                      ) : (
+                        filteredModels.map((model) => {
+                          const isEnabled = enabledDynamicModelIds.includes(model.id);
+
+                          return (
+                            <div
+                              key={model.id}
+                              className="flex items-center justify-between p-3 rounded-xl border border-border/50 bg-card/50 hover:bg-accent/30 transition-colors"
+                            >
+                              <div className="flex items-center gap-3">
+                                <Checkbox
+                                  checked={isEnabled}
+                                  onCheckedChange={(checked) =>
+                                    onDynamicModelToggle(model.id, !!checked)
+                                  }
+                                  disabled={isSaving}
+                                />
+                                <div>
+                                  <div className="flex items-center gap-2">
+                                    <span className="text-sm font-medium">{model.name}</span>
+                                    {model.supportsVision && (
+                                      <Badge variant="outline" className="text-xs">
+                                        Vision
+                                      </Badge>
+                                    )}
+                                  </div>
+                                  <p className="text-xs text-muted-foreground">
+                                    {model.description}
+                                  </p>
+                                </div>
+                              </div>
+                            </div>
+                          );
+                        })
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/opencode-settings-tab.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/opencode-settings-tab.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f4f6542cba30b5340472303717830eaac36119fa
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/opencode-settings-tab.tsx
@@ -0,0 +1,177 @@
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { useAppStore } from '@/store/app-store';
+import { OpencodeCliStatus, OpencodeCliStatusSkeleton } from '../cli-status/opencode-cli-status';
+import { OpencodeModelConfiguration } from './opencode-model-configuration';
+import { ProviderToggle } from './provider-toggle';
+import { useOpencodeCliStatus, useOpencodeProviders, useOpencodeModels } from '@/hooks/queries';
+import { queryKeys } from '@/lib/query-keys';
+import type { CliStatus as SharedCliStatus } from '../shared/types';
+import type { OpencodeModelId } from '@automaker/types';
+import type { OpencodeAuthStatus, OpenCodeProviderInfo } from '../cli-status/opencode-cli-status';
+
+export function OpencodeSettingsTab() {
+  const queryClient = useQueryClient();
+  const {
+    enabledOpencodeModels,
+    opencodeDefaultModel,
+    setOpencodeDefaultModel,
+    toggleOpencodeModel,
+    enabledDynamicModelIds,
+    toggleDynamicModel,
+    setDynamicOpencodeModels,
+  } = useAppStore();
+
+  const [isSaving, setIsSaving] = useState(false);
+
+  // React Query hooks for data fetching
+  const {
+    data: cliStatusData,
+    isLoading: isCheckingOpencodeCli,
+    refetch: refetchCliStatus,
+  } = useOpencodeCliStatus();
+
+  const isCliInstalled = cliStatusData?.installed ?? false;
+
+  const { data: providersData = [], isFetching: isFetchingProviders } = useOpencodeProviders();
+
+  const { data: modelsData = [], isFetching: isFetchingModels } = useOpencodeModels();
+
+  // Sync React Query opencode models data to Zustand store so that the model
+  // selector dropdown (PhaseModelSelector) reflects newly enabled models without
+  // requiring a page refresh. The selector reads from the Zustand store while
+  // this settings tab fetches via React Query — keeping them in sync bridges that gap.
+  useEffect(() => {
+    if (modelsData.length > 0) {
+      setDynamicOpencodeModels(modelsData);
+    }
+  }, [modelsData, setDynamicOpencodeModels]);
+
+  // Transform CLI status to the expected format
+  const cliStatus = useMemo((): SharedCliStatus | null => {
+    if (!cliStatusData) return null;
+    return {
+      success: cliStatusData.success ?? false,
+      status: cliStatusData.installed ? 'installed' : 'not_installed',
+      method: cliStatusData.auth?.method,
+      version: cliStatusData.version,
+      path: cliStatusData.path,
+      recommendation: cliStatusData.recommendation,
+      installCommands: cliStatusData.installCommands,
+    };
+  }, [cliStatusData]);
+
+  // Transform auth status to the expected format
+  const authStatus = useMemo((): OpencodeAuthStatus | null => {
+    if (!cliStatusData?.auth) return null;
+    // Cast auth to include optional error field for type compatibility
+    const auth = cliStatusData.auth as typeof cliStatusData.auth & { error?: string };
+    return {
+      authenticated: auth.authenticated,
+      method: (auth.method as OpencodeAuthStatus['method']) || 'none',
+      hasApiKey: auth.hasApiKey,
+      hasEnvApiKey: auth.hasEnvApiKey,
+      hasOAuthToken: auth.hasOAuthToken,
+      error: auth.error,
+    };
+  }, [cliStatusData]);
+
+  // Refresh all opencode-related queries
+  const handleRefreshOpencodeCli = useCallback(async () => {
+    await Promise.all([
+      queryClient.invalidateQueries({ queryKey: queryKeys.cli.opencode() }),
+      queryClient.invalidateQueries({ queryKey: queryKeys.models.opencodeProviders() }),
+      queryClient.invalidateQueries({ queryKey: queryKeys.models.opencode() }),
+    ]);
+    await refetchCliStatus();
+    toast.success('OpenCode CLI refreshed');
+  }, [queryClient, refetchCliStatus]);
+
+  const handleDefaultModelChange = useCallback(
+    (model: OpencodeModelId) => {
+      setIsSaving(true);
+      try {
+        setOpencodeDefaultModel(model);
+        toast.success('Default model updated');
+      } catch {
+        toast.error('Failed to update default model');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [setOpencodeDefaultModel]
+  );
+
+  const handleModelToggle = useCallback(
+    (model: OpencodeModelId, enabled: boolean) => {
+      setIsSaving(true);
+      try {
+        toggleOpencodeModel(model, enabled);
+      } catch {
+        toast.error('Failed to update models');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [toggleOpencodeModel]
+  );
+
+  const handleDynamicModelToggle = useCallback(
+    (modelId: string, enabled: boolean) => {
+      setIsSaving(true);
+      try {
+        toggleDynamicModel(modelId, enabled);
+      } catch {
+        toast.error('Failed to update dynamic model');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [toggleDynamicModel]
+  );
+
+  // Show skeleton only while checking CLI status initially
+  if (!cliStatus && isCheckingOpencodeCli) {
+    return (
+      <div className="space-y-6">
+        <OpencodeCliStatusSkeleton />
+      </div>
+    );
+  }
+
+  const isLoadingDynamicModels = isFetchingProviders || isFetchingModels;
+
+  return (
+    <div className="space-y-6">
+      {/* Provider Visibility Toggle */}
+      <ProviderToggle provider="opencode" providerLabel="OpenCode" />
+
+      <OpencodeCliStatus
+        status={cliStatus}
+        authStatus={authStatus}
+        providers={providersData as OpenCodeProviderInfo[]}
+        isChecking={isCheckingOpencodeCli}
+        onRefresh={handleRefreshOpencodeCli}
+      />
+
+      {/* Model Configuration - Only show when CLI is installed */}
+      {isCliInstalled && (
+        <OpencodeModelConfiguration
+          enabledOpencodeModels={enabledOpencodeModels}
+          opencodeDefaultModel={opencodeDefaultModel}
+          isSaving={isSaving}
+          onDefaultModelChange={handleDefaultModelChange}
+          onModelToggle={handleModelToggle}
+          providers={providersData as OpenCodeProviderInfo[]}
+          dynamicModels={modelsData}
+          enabledDynamicModelIds={enabledDynamicModelIds}
+          onDynamicModelToggle={handleDynamicModelToggle}
+          isLoadingDynamicModels={isLoadingDynamicModels}
+        />
+      )}
+    </div>
+  );
+}
+
+export default OpencodeSettingsTab;
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/provider-tabs.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/provider-tabs.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..54a1fb8b9fb6fc8c33370715c2bebf0c9f021341
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/provider-tabs.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  AnthropicIcon,
+  CursorIcon,
+  OpenAIIcon,
+  GeminiIcon,
+  OpenCodeIcon,
+  CopilotIcon,
+} from '@/components/ui/provider-icon';
+import { CursorSettingsTab } from './cursor-settings-tab';
+import { ClaudeSettingsTab } from './claude-settings-tab';
+import { CodexSettingsTab } from './codex-settings-tab';
+import { OpencodeSettingsTab } from './opencode-settings-tab';
+import { GeminiSettingsTab } from './gemini-settings-tab';
+import { CopilotSettingsTab } from './copilot-settings-tab';
+
+interface ProviderTabsProps {
+  defaultTab?: 'claude' | 'cursor' | 'codex' | 'opencode' | 'gemini' | 'copilot';
+}
+
+export function ProviderTabs({ defaultTab = 'claude' }: ProviderTabsProps) {
+  return (
+    <Tabs defaultValue={defaultTab} className="w-full">
+      <TabsList className="grid w-full grid-cols-6 mb-6">
+        <TabsTrigger value="claude" className="flex items-center gap-2">
+          <AnthropicIcon className="w-4 h-4" />
+          Claude
+        </TabsTrigger>
+        <TabsTrigger value="cursor" className="flex items-center gap-2">
+          <CursorIcon className="w-4 h-4" />
+          Cursor
+        </TabsTrigger>
+        <TabsTrigger value="codex" className="flex items-center gap-2">
+          <OpenAIIcon className="w-4 h-4" />
+          Codex
+        </TabsTrigger>
+        <TabsTrigger value="opencode" className="flex items-center gap-2">
+          <OpenCodeIcon className="w-4 h-4" />
+          OpenCode
+        </TabsTrigger>
+        <TabsTrigger value="gemini" className="flex items-center gap-2">
+          <GeminiIcon className="w-4 h-4" />
+          Gemini
+        </TabsTrigger>
+        <TabsTrigger value="copilot" className="flex items-center gap-2">
+          <CopilotIcon className="w-4 h-4" />
+          Copilot
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="claude">
+        <ClaudeSettingsTab />
+      </TabsContent>
+
+      <TabsContent value="cursor">
+        <CursorSettingsTab />
+      </TabsContent>
+
+      <TabsContent value="codex">
+        <CodexSettingsTab />
+      </TabsContent>
+
+      <TabsContent value="opencode">
+        <OpencodeSettingsTab />
+      </TabsContent>
+
+      <TabsContent value="gemini">
+        <GeminiSettingsTab />
+      </TabsContent>
+
+      <TabsContent value="copilot">
+        <CopilotSettingsTab />
+      </TabsContent>
+    </Tabs>
+  );
+}
+
+export default ProviderTabs;
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/provider-toggle.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/provider-toggle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e3e35d3d0ac3269b1767cba21c64c8bb335682cc
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/provider-toggle.tsx
@@ -0,0 +1,41 @@
+import { useAppStore } from '@/store/app-store';
+import type { ModelProvider } from '@automaker/types';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { EyeOff, Eye } from 'lucide-react';
+
+interface ProviderToggleProps {
+  provider: ModelProvider;
+  providerLabel: string;
+}
+
+export function ProviderToggle({ provider, providerLabel }: ProviderToggleProps) {
+  const { disabledProviders, toggleProviderDisabled } = useAppStore();
+  const isDisabled = disabledProviders.includes(provider);
+
+  return (
+    <div className="flex items-center justify-between p-4 rounded-xl bg-accent/20 border border-border/30">
+      <div className="flex items-center gap-3">
+        {isDisabled ? (
+          <EyeOff className="w-4 h-4 text-muted-foreground" />
+        ) : (
+          <Eye className="w-4 h-4 text-primary" />
+        )}
+        <div>
+          <Label className="text-sm font-medium">Show {providerLabel} in model dropdowns</Label>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            {isDisabled
+              ? `${providerLabel} models are hidden from all model selectors`
+              : `${providerLabel} models appear in model selection dropdowns`}
+          </p>
+        </div>
+      </div>
+      <Switch
+        checked={!isDisabled}
+        onCheckedChange={(checked) => toggleProviderDisabled(provider, !checked)}
+      />
+    </div>
+  );
+}
+
+export default ProviderToggle;
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/providers/shared/base-model-configuration.tsx b/temp_repo/apps/ui/src/components/views/settings-view/providers/shared/base-model-configuration.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..19352b8a8123ed336a0f881f5a0f33b954d21b81
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/providers/shared/base-model-configuration.tsx
@@ -0,0 +1,183 @@
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import type { ReactNode } from 'react';
+
+/**
+ * Generic model info structure for model configuration components
+ */
+export interface BaseModelInfo<T extends string> {
+  id: T;
+  label: string;
+  description: string;
+}
+
+/**
+ * Badge configuration for feature indicators
+ */
+export interface FeatureBadge {
+  show: boolean;
+  label: string;
+}
+
+/**
+ * Props for the base model configuration component
+ */
+export interface BaseModelConfigurationProps<T extends string> {
+  /** Provider name for display (e.g., "Gemini", "Copilot") */
+  providerName: string;
+  /** Icon component to display in header */
+  icon: ReactNode;
+  /** Icon container gradient classes (e.g., "from-blue-500/20 to-blue-600/10") */
+  iconGradient: string;
+  /** Icon border color class (e.g., "border-blue-500/20") */
+  iconBorder: string;
+  /** List of available models */
+  models: BaseModelInfo<T>[];
+  /** Currently enabled model IDs */
+  enabledModels: T[];
+  /** Currently selected default model */
+  defaultModel: T;
+  /** Whether saving is in progress */
+  isSaving: boolean;
+  /** Callback when default model changes */
+  onDefaultModelChange: (model: T) => void;
+  /** Callback when a model is toggled */
+  onModelToggle: (model: T, enabled: boolean) => void;
+  /** Function to determine if a model should show a feature badge */
+  getFeatureBadge?: (model: BaseModelInfo<T>) => FeatureBadge | null;
+}
+
+/**
+ * Base component for provider model configuration
+ *
+ * Provides a consistent UI for configuring which models are available
+ * and which is the default. Individual provider components can customize
+ * by providing their own icon, colors, and feature badges.
+ */
+export function BaseModelConfiguration<T extends string>({
+  providerName,
+  icon,
+  iconGradient,
+  iconBorder,
+  models,
+  enabledModels,
+  defaultModel,
+  isSaving,
+  onDefaultModelChange,
+  onModelToggle,
+  getFeatureBadge,
+}: BaseModelConfigurationProps<T>) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div
+            className={cn(
+              'w-9 h-9 rounded-xl flex items-center justify-center border',
+              `bg-gradient-to-br ${iconGradient}`,
+              iconBorder
+            )}
+          >
+            {icon}
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            Model Configuration
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure which {providerName} models are available in the feature modal
+        </p>
+      </div>
+      <div className="p-6 space-y-6">
+        <div className="space-y-2">
+          <Label>Default Model</Label>
+          <Select
+            value={defaultModel}
+            onValueChange={(v) => onDefaultModelChange(v as T)}
+            disabled={isSaving}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {models.map((model) => {
+                const badge = getFeatureBadge?.(model);
+                return (
+                  <SelectItem key={model.id} value={model.id}>
+                    <div className="flex items-center gap-2">
+                      <span>{model.label}</span>
+                      {badge?.show && (
+                        <Badge variant="outline" className="text-xs">
+                          {badge.label}
+                        </Badge>
+                      )}
+                    </div>
+                  </SelectItem>
+                );
+              })}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-3">
+          <Label>Available Models</Label>
+          <div className="grid gap-3">
+            {models.map((model) => {
+              const isDefault = model.id === defaultModel;
+              // Default model is always considered enabled
+              const isEnabled = isDefault || enabledModels.includes(model.id);
+              const badge = getFeatureBadge?.(model);
+
+              return (
+                <div
+                  key={model.id}
+                  className="flex items-center justify-between p-3 rounded-xl border border-border/50 bg-card/50 hover:bg-accent/30 transition-colors"
+                >
+                  <div className="flex items-center gap-3">
+                    <Checkbox
+                      checked={isEnabled}
+                      onCheckedChange={(checked) => onModelToggle(model.id, !!checked)}
+                      disabled={isSaving || isDefault}
+                    />
+                    <div>
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-medium">{model.label}</span>
+                        {badge?.show && (
+                          <Badge variant="outline" className="text-xs">
+                            {badge.label}
+                          </Badge>
+                        )}
+                        {isDefault && (
+                          <Badge variant="secondary" className="text-xs">
+                            Default
+                          </Badge>
+                        )}
+                      </div>
+                      <p className="text-xs text-muted-foreground">{model.description}</p>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/security/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/security/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ec871aaad036bbeab4863d1b800d02841394febf
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/security/index.ts
@@ -0,0 +1 @@
+export { SecuritySection } from './security-section';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/security/security-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/security/security-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d384805c7fcb83606d3c0dd213052df20babd0d5
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/security/security-section.tsx
@@ -0,0 +1,71 @@
+import { Shield, AlertTriangle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+
+interface SecuritySectionProps {
+  skipSandboxWarning: boolean;
+  onSkipSandboxWarningChange: (skip: boolean) => void;
+}
+
+export function SecuritySection({
+  skipSandboxWarning,
+  onSkipSandboxWarningChange,
+}: SecuritySectionProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/80 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm'
+      )}
+    >
+      <div className="p-6 border-b border-border/30 bg-gradient-to-r from-primary/5 via-transparent to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center border border-primary/20">
+            <Shield className="w-5 h-5 text-primary" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Security</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure security warnings and protections.
+        </p>
+      </div>
+      <div className="p-6 space-y-4">
+        {/* Sandbox Warning Toggle */}
+        <div className="flex items-center justify-between gap-4 p-4 rounded-xl bg-muted/30 border border-border/30">
+          <div className="flex items-center gap-3.5 min-w-0">
+            <div className="w-11 h-11 rounded-xl bg-gradient-to-br from-amber-500/15 to-amber-600/10 border border-amber-500/20 flex items-center justify-center shrink-0">
+              <AlertTriangle className="w-5 h-5 text-amber-500" />
+            </div>
+            <div className="min-w-0 flex-1">
+              <Label
+                htmlFor="sandbox-warning-toggle"
+                className="font-medium text-foreground cursor-pointer"
+              >
+                Show Sandbox Warning on Startup
+              </Label>
+              <p className="text-xs text-muted-foreground/70 mt-0.5">
+                Display a security warning when not running in a sandboxed environment
+              </p>
+            </div>
+          </div>
+          <Switch
+            id="sandbox-warning-toggle"
+            checked={!skipSandboxWarning}
+            onCheckedChange={(checked) => onSkipSandboxWarningChange(!checked)}
+            data-testid="sandbox-warning-toggle"
+          />
+        </div>
+
+        {/* Info text */}
+        <p className="text-xs text-muted-foreground/60 px-4">
+          When enabled, you&apos;ll see a warning on app startup if you&apos;re not running in a
+          containerized environment (like Docker). This helps remind you to use proper isolation
+          when running AI agents.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/shared/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/shared/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9f0b55053da5a89e830826398d3f944a86ab4bd1
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/shared/index.ts
@@ -0,0 +1,2 @@
+export type { Theme } from '@/config/theme-options';
+export type { CliStatus, KanbanDetailLevel, Project, ApiKeys } from './types';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/shared/types.ts b/temp_repo/apps/ui/src/components/views/settings-view/shared/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b0bdb977df9dd5db4269b8f2b696dbe2116c471a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/shared/types.ts
@@ -0,0 +1,39 @@
+// Shared TypeScript types for settings view components
+// Theme type is now imported from the central theme-options config
+export { type Theme } from '@/config/theme-options';
+
+export interface CliStatus {
+  success: boolean;
+  status?: string;
+  method?: string;
+  version?: string;
+  path?: string;
+  hasApiKey?: boolean;
+  recommendation?: string;
+  installCommands?: {
+    macos?: string;
+    windows?: string;
+    linux?: string;
+    npm?: string;
+  };
+  error?: string;
+}
+
+export type KanbanDetailLevel = 'minimal' | 'standard' | 'detailed';
+
+export interface Project {
+  id: string;
+  name: string;
+  path: string;
+  theme?: string;
+  fontFamilySans?: string;
+  fontFamilyMono?: string;
+  icon?: string;
+  customIconPath?: string;
+}
+
+export interface ApiKeys {
+  anthropic: string;
+  google: string;
+  openai: string;
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/templates/templates-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/templates/templates-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..01845753ef85550a1329ab2f14d24c3faca07387
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/templates/templates-section.tsx
@@ -0,0 +1,431 @@
+import { useState, useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { GripVertical, Plus, Pencil, Trash2, FileText, Lock, MoreHorizontal } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+import type { FeatureTemplate, PhaseModelEntry } from '@automaker/types';
+import { PhaseModelSelector } from '../model-defaults/phase-model-selector';
+import { useAppStore } from '@/store/app-store';
+import { toast } from 'sonner';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+interface TemplatesSectionProps {
+  templates: FeatureTemplate[];
+  onAddTemplate: (template: FeatureTemplate) => Promise<void>;
+  onUpdateTemplate: (id: string, updates: Partial<FeatureTemplate>) => Promise<void>;
+  onDeleteTemplate: (id: string) => Promise<void>;
+  onReorderTemplates: (templateIds: string[]) => Promise<void>;
+}
+
+interface TemplateFormData {
+  name: string;
+  prompt: string;
+  model?: PhaseModelEntry;
+}
+
+const MAX_NAME_LENGTH = 50;
+
+function generateId(): string {
+  return `template-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+
+function SortableTemplateItem({
+  template,
+  onEdit,
+  onToggleEnabled,
+  onDelete,
+}: {
+  template: FeatureTemplate;
+  onEdit: () => void;
+  onToggleEnabled: () => void;
+  onDelete: () => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: template.id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const isEnabled = template.enabled !== false;
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'flex items-center gap-3 p-3 rounded-lg border border-border/50 bg-card/50',
+        'transition-all duration-200',
+        isDragging && 'opacity-50 shadow-lg',
+        !isEnabled && 'opacity-60'
+      )}
+    >
+      {/* Drag Handle */}
+      <button
+        {...attributes}
+        {...listeners}
+        className="cursor-grab active:cursor-grabbing text-muted-foreground hover:text-foreground p-1"
+        data-testid={`template-drag-handle-${template.id}`}
+      >
+        <GripVertical className="w-4 h-4" />
+      </button>
+
+      {/* Template Info */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <FileText className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+          <span className="font-medium truncate">{template.name}</span>
+          {template.isBuiltIn && (
+            <span title="Built-in template">
+              <Lock className="w-3 h-3 text-muted-foreground" />
+            </span>
+          )}
+          {!isEnabled && (
+            <span className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+              Disabled
+            </span>
+          )}
+        </div>
+        <p className="text-xs text-muted-foreground truncate mt-0.5">{template.prompt}</p>
+      </div>
+
+      {/* Actions */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+            <MoreHorizontal className="w-4 h-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onClick={onEdit} data-testid={`template-edit-${template.id}`}>
+            <Pencil className="w-4 h-4 mr-2" />
+            Edit
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={onToggleEnabled}
+            data-testid={`template-toggle-${template.id}`}
+          >
+            <Checkbox checked={isEnabled} className="w-4 h-4 mr-2 pointer-events-none" />
+            {isEnabled ? 'Disable' : 'Enable'}
+          </DropdownMenuItem>
+          {!template.isBuiltIn && (
+            <DropdownMenuItem
+              onClick={onDelete}
+              className="text-destructive focus:text-destructive"
+              data-testid={`template-delete-${template.id}`}
+            >
+              <Trash2 className="w-4 h-4 mr-2" />
+              Delete
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+export function TemplatesSection({
+  templates,
+  onAddTemplate,
+  onUpdateTemplate,
+  onDeleteTemplate,
+  onReorderTemplates,
+}: TemplatesSectionProps) {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingTemplate, setEditingTemplate] = useState<FeatureTemplate | null>(null);
+  const [formData, setFormData] = useState<TemplateFormData>({
+    name: '',
+    prompt: '',
+  });
+  const [nameError, setNameError] = useState(false);
+  const [promptError, setPromptError] = useState(false);
+
+  const defaultFeatureModel = useAppStore((s) => s.defaultFeatureModel);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleAddNew = () => {
+    setEditingTemplate(null);
+    setFormData({
+      name: '',
+      prompt: '',
+      model: undefined,
+    });
+    setNameError(false);
+    setPromptError(false);
+    setDialogOpen(true);
+  };
+
+  const handleEdit = (template: FeatureTemplate) => {
+    setEditingTemplate(template);
+    setFormData({
+      name: template.name,
+      prompt: template.prompt,
+      model: template.model,
+    });
+    setNameError(false);
+    setPromptError(false);
+    setDialogOpen(true);
+  };
+
+  const handleToggleEnabled = async (template: FeatureTemplate) => {
+    await onUpdateTemplate(template.id, { enabled: template.enabled === false ? true : false });
+  };
+
+  const handleDelete = async (template: FeatureTemplate) => {
+    if (template.isBuiltIn) {
+      toast.error('Built-in templates cannot be deleted');
+      return;
+    }
+    await onDeleteTemplate(template.id);
+    toast.success('Template deleted');
+  };
+
+  const handleSave = async () => {
+    // Validate
+    let hasError = false;
+    if (!formData.name.trim()) {
+      setNameError(true);
+      hasError = true;
+    }
+    if (!formData.prompt.trim()) {
+      setPromptError(true);
+      hasError = true;
+    }
+    if (hasError) return;
+
+    if (editingTemplate) {
+      // Update existing
+      await onUpdateTemplate(editingTemplate.id, {
+        name: formData.name.trim(),
+        prompt: formData.prompt.trim(),
+        model: formData.model,
+      });
+      toast.success('Template updated');
+    } else {
+      // Create new
+      const newTemplate: FeatureTemplate = {
+        id: generateId(),
+        name: formData.name.trim(),
+        prompt: formData.prompt.trim(),
+        model: formData.model,
+        isBuiltIn: false,
+        enabled: true,
+        order: Math.max(...templates.map((t) => t.order ?? 0), -1) + 1,
+      };
+      await onAddTemplate(newTemplate);
+      toast.success('Template created');
+    }
+    setDialogOpen(false);
+  };
+
+  // Memoized sorted copy — avoids mutating the Zustand-managed templates array
+  const sortedTemplates = useMemo(
+    () => [...templates].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
+    [templates]
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = sortedTemplates.findIndex((t) => t.id === active.id);
+      const newIndex = sortedTemplates.findIndex((t) => t.id === over.id);
+      const reordered = arrayMove(sortedTemplates, oldIndex, newIndex);
+      onReorderTemplates(reordered.map((t) => t.id));
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+              <FileText className="w-5 h-5 text-brand-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">
+              Feature Templates
+            </h2>
+          </div>
+          <Button
+            variant="default"
+            size="sm"
+            onClick={handleAddNew}
+            data-testid="add-template-button"
+          >
+            <Plus className="w-4 h-4 mr-2" />
+            Add Template
+          </Button>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Create reusable task templates for quick feature creation from the Add Feature dropdown.
+        </p>
+      </div>
+
+      <div className="p-6">
+        {templates.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            <FileText className="w-12 h-12 mx-auto mb-3 opacity-50" />
+            <p className="text-sm">No templates yet</p>
+            <p className="text-xs mt-1">Create your first template to get started</p>
+          </div>
+        ) : (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext
+              items={sortedTemplates.map((t) => t.id)}
+              strategy={verticalListSortingStrategy}
+            >
+              <div className="space-y-2">
+                {sortedTemplates.map((template) => (
+                  <SortableTemplateItem
+                    key={template.id}
+                    template={template}
+                    onEdit={() => handleEdit(template)}
+                    onToggleEnabled={() => handleToggleEnabled(template)}
+                    onDelete={() => handleDelete(template)}
+                  />
+                ))}
+              </div>
+            </SortableContext>
+          </DndContext>
+        )}
+      </div>
+
+      {/* Add/Edit Dialog */}
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="sm:max-w-lg" data-testid="template-dialog">
+          <DialogHeader>
+            <DialogTitle>{editingTemplate ? 'Edit Template' : 'Create Template'}</DialogTitle>
+            <DialogDescription>
+              {editingTemplate
+                ? 'Update the template details below.'
+                : 'Create a new template for quick feature creation.'}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="py-4 space-y-4">
+            {/* Name */}
+            <div className="space-y-2">
+              <Label htmlFor="template-name">
+                Name <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                id="template-name"
+                value={formData.name}
+                onChange={(e) => {
+                  setFormData({ ...formData, name: e.target.value });
+                  if (e.target.value.trim()) setNameError(false);
+                }}
+                placeholder="e.g., Run tests and fix issues"
+                maxLength={MAX_NAME_LENGTH}
+                className={nameError ? 'border-destructive' : ''}
+                data-testid="template-name-input"
+              />
+              <div className="flex justify-between text-xs text-muted-foreground">
+                {nameError && <span className="text-destructive">Name is required</span>}
+                <span className="ml-auto">
+                  {formData.name.length}/{MAX_NAME_LENGTH}
+                </span>
+              </div>
+            </div>
+
+            {/* Prompt */}
+            <div className="space-y-2">
+              <Label htmlFor="template-prompt">
+                Prompt <span className="text-destructive">*</span>
+              </Label>
+              <Textarea
+                id="template-prompt"
+                value={formData.prompt}
+                onChange={(e) => {
+                  setFormData({ ...formData, prompt: e.target.value });
+                  if (e.target.value.trim()) setPromptError(false);
+                }}
+                placeholder="Describe the task the AI should perform..."
+                rows={4}
+                className={promptError ? 'border-destructive' : ''}
+                data-testid="template-prompt-input"
+              />
+              {promptError && <p className="text-xs text-destructive">Prompt is required</p>}
+            </div>
+
+            {/* Model (optional) */}
+            <div className="space-y-2">
+              <Label htmlFor="template-model">Preferred Model (optional)</Label>
+              <PhaseModelSelector
+                value={formData.model ?? defaultFeatureModel}
+                onChange={(entry) => setFormData({ ...formData, model: entry })}
+                compact
+                align="end"
+              />
+              <p className="text-xs text-muted-foreground">
+                If set, this model will be pre-selected when using this template.
+              </p>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleSave} data-testid="template-save-button">
+              {editingTemplate ? 'Save Changes' : 'Create Template'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/terminal/prompt-preview.tsx b/temp_repo/apps/ui/src/components/views/settings-view/terminal/prompt-preview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4315ce5ce6af645b0b6d17293427beb15a18ba99
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/terminal/prompt-preview.tsx
@@ -0,0 +1,283 @@
+/**
+ * Prompt Preview - Shows a live preview of the custom terminal prompt
+ */
+
+import type { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+import type { ThemeMode } from '@automaker/types';
+import { getTerminalTheme } from '@/config/terminal-themes';
+
+interface PromptPreviewProps {
+  format: 'standard' | 'minimal' | 'powerline' | 'starship';
+  theme: ThemeMode;
+  showGitBranch: boolean;
+  showGitStatus: boolean;
+  showUserHost: boolean;
+  showPath: boolean;
+  pathStyle: 'full' | 'short' | 'basename';
+  pathDepth: number;
+  showTime: boolean;
+  showExitStatus: boolean;
+  isOmpTheme?: boolean;
+  promptThemeLabel?: string;
+  className?: string;
+}
+
+export function PromptPreview({
+  format,
+  theme,
+  showGitBranch,
+  showGitStatus,
+  showUserHost,
+  showPath,
+  pathStyle,
+  pathDepth,
+  showTime,
+  showExitStatus,
+  isOmpTheme = false,
+  promptThemeLabel,
+  className,
+}: PromptPreviewProps) {
+  const terminalTheme = getTerminalTheme(theme);
+
+  const formatPath = (inputPath: string) => {
+    let displayPath = inputPath;
+    let prefix = '';
+
+    if (displayPath.startsWith('~/')) {
+      prefix = '~/';
+      displayPath = displayPath.slice(2);
+    } else if (displayPath.startsWith('/')) {
+      prefix = '/';
+      displayPath = displayPath.slice(1);
+    }
+
+    const segments = displayPath.split('/').filter((segment) => segment.length > 0);
+    const depth = Math.max(0, pathDepth);
+    const trimmedSegments = depth > 0 ? segments.slice(-depth) : segments;
+
+    let formattedSegments = trimmedSegments;
+    if (pathStyle === 'basename' && trimmedSegments.length > 0) {
+      formattedSegments = [trimmedSegments[trimmedSegments.length - 1]];
+    } else if (pathStyle === 'short') {
+      formattedSegments = trimmedSegments.map((segment, index) => {
+        if (index < trimmedSegments.length - 1) {
+          return segment.slice(0, 1);
+        }
+        return segment;
+      });
+    }
+
+    const joined = formattedSegments.join('/');
+    if (prefix === '/' && joined.length === 0) {
+      return '/';
+    }
+    if (prefix === '~/' && joined.length === 0) {
+      return '~';
+    }
+    return `${prefix}${joined}`;
+  };
+
+  // Generate preview text based on format
+  const renderPrompt = () => {
+    if (isOmpTheme) {
+      return (
+        <div className="font-mono text-sm leading-relaxed space-y-2">
+          <div style={{ color: terminalTheme.magenta }}>
+            {promptThemeLabel ?? 'Oh My Posh theme'}
+          </div>
+          <div className="text-xs text-muted-foreground">
+            Rendered by the oh-my-posh CLI in the terminal.
+          </div>
+          <div className="text-xs text-muted-foreground">
+            Preview here stays generic to avoid misleading output.
+          </div>
+        </div>
+      );
+    }
+
+    const user = 'user';
+    const host = 'automaker';
+    const path = formatPath('~/projects/automaker');
+    const branch = showGitBranch ? 'main' : null;
+    const dirty = showGitStatus && showGitBranch ? '*' : '';
+    const time = showTime ? '[14:32]' : '';
+    const status = showExitStatus ? '✗ 1' : '';
+
+    const gitInfo = branch ? ` (${branch}${dirty})` : '';
+
+    switch (format) {
+      case 'minimal': {
+        return (
+          <div className="font-mono text-sm leading-relaxed">
+            {showTime && <span style={{ color: terminalTheme.magenta }}>{time} </span>}
+            {showUserHost && (
+              <span style={{ color: terminalTheme.cyan }}>
+                {user}
+                <span style={{ color: terminalTheme.foreground }}>@</span>
+                <span style={{ color: terminalTheme.blue }}>{host}</span>{' '}
+              </span>
+            )}
+            {showPath && <span style={{ color: terminalTheme.yellow }}>{path}</span>}
+            {gitInfo && <span style={{ color: terminalTheme.magenta }}>{gitInfo}</span>}
+            {showExitStatus && <span style={{ color: terminalTheme.red }}> {status}</span>}
+            <span style={{ color: terminalTheme.green }}> $</span>
+            <span className="ml-1 animate-pulse">▊</span>
+          </div>
+        );
+      }
+
+      case 'powerline': {
+        const powerlineSegments: ReactNode[] = [];
+        if (showUserHost) {
+          powerlineSegments.push(
+            <span key="user-host" style={{ color: terminalTheme.cyan }}>
+              [{user}
+              <span style={{ color: terminalTheme.foreground }}>@</span>
+              <span style={{ color: terminalTheme.blue }}>{host}</span>]
+            </span>
+          );
+        }
+        if (showPath) {
+          powerlineSegments.push(
+            <span key="path" style={{ color: terminalTheme.yellow }}>
+              [{path}]
+            </span>
+          );
+        }
+        const powerlineCore = powerlineSegments.flatMap((segment, index) =>
+          index === 0
+            ? [segment]
+            : [
+                <span key={`sep-${index}`} style={{ color: terminalTheme.cyan }}>
+                  ─
+                </span>,
+                segment,
+              ]
+        );
+        const powerlineExtras: ReactNode[] = [];
+        if (gitInfo) {
+          powerlineExtras.push(
+            <span key="git" style={{ color: terminalTheme.magenta }}>
+              {gitInfo}
+            </span>
+          );
+        }
+        if (showTime) {
+          powerlineExtras.push(
+            <span key="time" style={{ color: terminalTheme.magenta }}>
+              {time}
+            </span>
+          );
+        }
+        if (showExitStatus) {
+          powerlineExtras.push(
+            <span key="status" style={{ color: terminalTheme.red }}>
+              {status}
+            </span>
+          );
+        }
+        const powerlineLine: ReactNode[] = [...powerlineCore];
+        if (powerlineExtras.length > 0) {
+          if (powerlineLine.length > 0) {
+            powerlineLine.push(' ');
+          }
+          powerlineLine.push(...powerlineExtras);
+        }
+
+        return (
+          <div className="font-mono text-sm leading-relaxed space-y-1">
+            <div>
+              <span style={{ color: terminalTheme.cyan }}>┌─</span>
+              {powerlineLine}
+            </div>
+            <div>
+              <span style={{ color: terminalTheme.cyan }}>└─</span>
+              <span style={{ color: terminalTheme.green }}>$</span>
+              <span className="ml-1 animate-pulse">▊</span>
+            </div>
+          </div>
+        );
+      }
+
+      case 'starship': {
+        return (
+          <div className="font-mono text-sm leading-relaxed space-y-1">
+            <div>
+              {showTime && <span style={{ color: terminalTheme.magenta }}>{time} </span>}
+              {showUserHost && (
+                <>
+                  <span style={{ color: terminalTheme.cyan }}>{user}</span>
+                  <span style={{ color: terminalTheme.foreground }}>@</span>
+                  <span style={{ color: terminalTheme.blue }}>{host}</span>
+                </>
+              )}
+              {showPath && (
+                <>
+                  <span style={{ color: terminalTheme.foreground }}> in </span>
+                  <span style={{ color: terminalTheme.yellow }}>{path}</span>
+                </>
+              )}
+              {branch && (
+                <>
+                  <span style={{ color: terminalTheme.foreground }}> on </span>
+                  <span style={{ color: terminalTheme.magenta }}>
+                    {branch}
+                    {dirty}
+                  </span>
+                </>
+              )}
+              {showExitStatus && <span style={{ color: terminalTheme.red }}> {status}</span>}
+            </div>
+            <div>
+              <span style={{ color: terminalTheme.green }}>❯</span>
+              <span className="ml-1 animate-pulse">▊</span>
+            </div>
+          </div>
+        );
+      }
+
+      case 'standard':
+      default: {
+        return (
+          <div className="font-mono text-sm leading-relaxed">
+            {showTime && <span style={{ color: terminalTheme.magenta }}>{time} </span>}
+            {showUserHost && (
+              <>
+                <span style={{ color: terminalTheme.cyan }}>[{user}</span>
+                <span style={{ color: terminalTheme.foreground }}>@</span>
+                <span style={{ color: terminalTheme.blue }}>{host}</span>
+                <span style={{ color: terminalTheme.cyan }}>]</span>
+              </>
+            )}
+            {showPath && <span style={{ color: terminalTheme.yellow }}> {path}</span>}
+            {gitInfo && <span style={{ color: terminalTheme.magenta }}>{gitInfo}</span>}
+            {showExitStatus && <span style={{ color: terminalTheme.red }}> {status}</span>}
+            <span style={{ color: terminalTheme.green }}> $</span>
+            <span className="ml-1 animate-pulse">▊</span>
+          </div>
+        );
+      }
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg border p-4',
+        'bg-[var(--terminal-bg)] text-[var(--terminal-fg)]',
+        'shadow-inner',
+        className
+      )}
+      style={
+        {
+          '--terminal-bg': terminalTheme.background,
+          '--terminal-fg': terminalTheme.foreground,
+        } as React.CSSProperties
+      }
+    >
+      <div className="mb-2 text-xs text-muted-foreground opacity-70">Preview</div>
+      {renderPrompt()}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/terminal/prompt-theme-presets.ts b/temp_repo/apps/ui/src/components/views/settings-view/terminal/prompt-theme-presets.ts
new file mode 100644
index 0000000000000000000000000000000000000000..48f0ec474a30257e36a6f233e6c07f30b4e863c4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/terminal/prompt-theme-presets.ts
@@ -0,0 +1,253 @@
+import type { TerminalPromptTheme } from '@automaker/types';
+
+export const PROMPT_THEME_CUSTOM_ID: TerminalPromptTheme = 'custom';
+
+export const OMP_THEME_NAMES = [
+  '1_shell',
+  'M365Princess',
+  'agnoster',
+  'agnoster.minimal',
+  'agnosterplus',
+  'aliens',
+  'amro',
+  'atomic',
+  'atomicBit',
+  'avit',
+  'blue-owl',
+  'blueish',
+  'bubbles',
+  'bubblesextra',
+  'bubblesline',
+  'capr4n',
+  'catppuccin',
+  'catppuccin_frappe',
+  'catppuccin_latte',
+  'catppuccin_macchiato',
+  'catppuccin_mocha',
+  'cert',
+  'chips',
+  'cinnamon',
+  'clean-detailed',
+  'cloud-context',
+  'cloud-native-azure',
+  'cobalt2',
+  'craver',
+  'darkblood',
+  'devious-diamonds',
+  'di4am0nd',
+  'dracula',
+  'easy-term',
+  'emodipt',
+  'emodipt-extend',
+  'fish',
+  'free-ukraine',
+  'froczh',
+  'gmay',
+  'glowsticks',
+  'grandpa-style',
+  'gruvbox',
+  'half-life',
+  'honukai',
+  'hotstick.minimal',
+  'hul10',
+  'hunk',
+  'huvix',
+  'if_tea',
+  'illusi0n',
+  'iterm2',
+  'jandedobbeleer',
+  'jblab_2021',
+  'jonnychipz',
+  'json',
+  'jtracey93',
+  'jv_sitecorian',
+  'kali',
+  'kushal',
+  'lambda',
+  'lambdageneration',
+  'larserikfinholt',
+  'lightgreen',
+  'marcduiker',
+  'markbull',
+  'material',
+  'microverse-power',
+  'mojada',
+  'montys',
+  'mt',
+  'multiverse-neon',
+  'negligible',
+  'neko',
+  'night-owl',
+  'nordtron',
+  'nu4a',
+  'onehalf.minimal',
+  'paradox',
+  'pararussel',
+  'patriksvensson',
+  'peru',
+  'pixelrobots',
+  'plague',
+  'poshmon',
+  'powerlevel10k_classic',
+  'powerlevel10k_lean',
+  'powerlevel10k_modern',
+  'powerlevel10k_rainbow',
+  'powerline',
+  'probua.minimal',
+  'pure',
+  'quick-term',
+  'remk',
+  'robbyrussell',
+  'rudolfs-dark',
+  'rudolfs-light',
+  'sim-web',
+  'slim',
+  'slimfat',
+  'smoothie',
+  'sonicboom_dark',
+  'sonicboom_light',
+  'sorin',
+  'space',
+  'spaceship',
+  'star',
+  'stelbent-compact.minimal',
+  'stelbent.minimal',
+  'takuya',
+  'the-unnamed',
+  'thecyberden',
+  'tiwahu',
+  'tokyo',
+  'tokyonight_storm',
+  'tonybaloney',
+  'uew',
+  'unicorn',
+  'velvet',
+  'wholespace',
+  'wopian',
+  'xtoys',
+  'ys',
+  'zash',
+] as const;
+
+type OmpThemeName = (typeof OMP_THEME_NAMES)[number];
+
+type PromptFormat = 'standard' | 'minimal' | 'powerline' | 'starship';
+
+type PathStyle = 'full' | 'short' | 'basename';
+
+export interface PromptThemeConfig {
+  promptFormat: PromptFormat;
+  showGitBranch: boolean;
+  showGitStatus: boolean;
+  showUserHost: boolean;
+  showPath: boolean;
+  pathStyle: PathStyle;
+  pathDepth: number;
+  showTime: boolean;
+  showExitStatus: boolean;
+}
+
+export interface PromptThemePreset {
+  id: TerminalPromptTheme;
+  label: string;
+  description: string;
+  config: PromptThemeConfig;
+}
+
+const PATH_DEPTH_FULL = 0;
+const PATH_DEPTH_TWO = 2;
+const PATH_DEPTH_THREE = 3;
+
+const POWERLINE_HINTS = ['powerline', 'powerlevel10k', 'agnoster', 'bubbles', 'smoothie'];
+const MINIMAL_HINTS = ['minimal', 'pure', 'slim', 'negligible'];
+const STARSHIP_HINTS = ['spaceship', 'star'];
+const SHORT_PATH_HINTS = ['compact', 'lean', 'slim'];
+const TIME_HINTS = ['time', 'clock'];
+const EXIT_STATUS_HINTS = ['status', 'exit', 'fail', 'error'];
+
+function toPromptThemeId(name: OmpThemeName): TerminalPromptTheme {
+  return `omp-${name}` as TerminalPromptTheme;
+}
+
+function formatLabel(name: string): string {
+  const cleaned = name.replace(/[._-]+/g, ' ').trim();
+  return cleaned
+    .split(' ')
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
+function buildPresetConfig(name: OmpThemeName): PromptThemeConfig {
+  const lower = name.toLowerCase();
+  const isPowerline = POWERLINE_HINTS.some((hint) => lower.includes(hint));
+  const isMinimal = MINIMAL_HINTS.some((hint) => lower.includes(hint));
+  const isStarship = STARSHIP_HINTS.some((hint) => lower.includes(hint));
+  let promptFormat: PromptFormat = 'standard';
+
+  if (isPowerline) {
+    promptFormat = 'powerline';
+  } else if (isMinimal) {
+    promptFormat = 'minimal';
+  } else if (isStarship) {
+    promptFormat = 'starship';
+  }
+
+  const showUserHost = !isMinimal;
+  const showPath = true;
+  const pathStyle: PathStyle = isMinimal ? 'short' : 'full';
+  let pathDepth = isMinimal ? PATH_DEPTH_THREE : PATH_DEPTH_FULL;
+
+  if (SHORT_PATH_HINTS.some((hint) => lower.includes(hint))) {
+    pathDepth = PATH_DEPTH_TWO;
+  }
+
+  if (lower.includes('powerlevel10k')) {
+    pathDepth = PATH_DEPTH_THREE;
+  }
+
+  const showTime = TIME_HINTS.some((hint) => lower.includes(hint));
+  const showExitStatus = EXIT_STATUS_HINTS.some((hint) => lower.includes(hint));
+
+  return {
+    promptFormat,
+    showGitBranch: true,
+    showGitStatus: true,
+    showUserHost,
+    showPath,
+    pathStyle,
+    pathDepth,
+    showTime,
+    showExitStatus,
+  };
+}
+
+export const PROMPT_THEME_PRESETS: PromptThemePreset[] = OMP_THEME_NAMES.map((name) => ({
+  id: toPromptThemeId(name),
+  label: `${formatLabel(name)} (OMP)`,
+  description: 'Oh My Posh theme preset',
+  config: buildPresetConfig(name),
+}));
+
+export function getPromptThemePreset(presetId: TerminalPromptTheme): PromptThemePreset | null {
+  return PROMPT_THEME_PRESETS.find((preset) => preset.id === presetId) ?? null;
+}
+
+export function getMatchingPromptThemeId(config: PromptThemeConfig): TerminalPromptTheme {
+  const match = PROMPT_THEME_PRESETS.find((preset) => {
+    const presetConfig = preset.config;
+    return (
+      presetConfig.promptFormat === config.promptFormat &&
+      presetConfig.showGitBranch === config.showGitBranch &&
+      presetConfig.showGitStatus === config.showGitStatus &&
+      presetConfig.showUserHost === config.showUserHost &&
+      presetConfig.showPath === config.showPath &&
+      presetConfig.pathStyle === config.pathStyle &&
+      presetConfig.pathDepth === config.pathDepth &&
+      presetConfig.showTime === config.showTime &&
+      presetConfig.showExitStatus === config.showExitStatus
+    );
+  });
+
+  return match?.id ?? PROMPT_THEME_CUSTOM_ID;
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/terminal/terminal-config-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/terminal/terminal-config-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ddfd9201da3c789577bbc88afd64a51a5950003d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/terminal/terminal-config-section.tsx
@@ -0,0 +1,662 @@
+/**
+ * Terminal Config Section - Custom terminal configurations with theme synchronization
+ *
+ * This component provides UI for enabling custom terminal prompts that automatically
+ * sync with Automaker's 40 themes. It's an opt-in feature that generates shell configs
+ * in .automaker/terminal/ without modifying user's existing RC files.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Wand2, GitBranch, Info, Plus, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import { toast } from 'sonner';
+import { PromptPreview } from './prompt-preview';
+import type { TerminalPromptTheme } from '@automaker/types';
+import {
+  PROMPT_THEME_CUSTOM_ID,
+  PROMPT_THEME_PRESETS,
+  getMatchingPromptThemeId,
+  getPromptThemePreset,
+  type PromptThemeConfig,
+} from './prompt-theme-presets';
+import { useUpdateGlobalSettings } from '@/hooks/mutations/use-settings-mutations';
+import { useGlobalSettings } from '@/hooks/queries/use-settings';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+
+export function TerminalConfigSection() {
+  const PATH_DEPTH_MIN = 0;
+  const PATH_DEPTH_MAX = 10;
+  const ENV_VAR_UPDATE_DEBOUNCE_MS = 400;
+  const ENV_VAR_ID_PREFIX = 'env';
+  const TERMINAL_RC_FILE_VERSION = 11;
+  const { theme } = useAppStore();
+  const { data: globalSettings } = useGlobalSettings();
+  const updateGlobalSettings = useUpdateGlobalSettings({ showSuccessToast: false });
+  const envVarIdRef = useRef(0);
+  const envVarUpdateTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const createEnvVarEntry = useCallback(
+    (key = '', value = '') => {
+      envVarIdRef.current += 1;
+      return {
+        id: `${ENV_VAR_ID_PREFIX}-${envVarIdRef.current}`,
+        key,
+        value,
+      };
+    },
+    [ENV_VAR_ID_PREFIX]
+  );
+  const [localEnvVars, setLocalEnvVars] = useState<
+    Array<{ id: string; key: string; value: string }>
+  >(() =>
+    Object.entries(globalSettings?.terminalConfig?.customEnvVars || {}).map(([key, value]) =>
+      createEnvVarEntry(key, value)
+    )
+  );
+  const [showEnableConfirm, setShowEnableConfirm] = useState(false);
+
+  const clampPathDepth = (value: number) =>
+    Math.min(PATH_DEPTH_MAX, Math.max(PATH_DEPTH_MIN, value));
+
+  const defaultTerminalConfig = {
+    enabled: false,
+    customPrompt: true,
+    promptFormat: 'standard' as const,
+    promptTheme: PROMPT_THEME_CUSTOM_ID,
+    showGitBranch: true,
+    showGitStatus: true,
+    showUserHost: true,
+    showPath: true,
+    pathStyle: 'full' as const,
+    pathDepth: PATH_DEPTH_MIN,
+    showTime: false,
+    showExitStatus: false,
+    customAliases: '',
+    customEnvVars: {},
+  };
+
+  const terminalConfig = {
+    ...defaultTerminalConfig,
+    ...globalSettings?.terminalConfig,
+    customAliases:
+      globalSettings?.terminalConfig?.customAliases ?? defaultTerminalConfig.customAliases,
+    customEnvVars:
+      globalSettings?.terminalConfig?.customEnvVars ?? defaultTerminalConfig.customEnvVars,
+  };
+
+  const promptThemeConfig: PromptThemeConfig = {
+    promptFormat: terminalConfig.promptFormat,
+    showGitBranch: terminalConfig.showGitBranch,
+    showGitStatus: terminalConfig.showGitStatus,
+    showUserHost: terminalConfig.showUserHost,
+    showPath: terminalConfig.showPath,
+    pathStyle: terminalConfig.pathStyle,
+    pathDepth: terminalConfig.pathDepth,
+    showTime: terminalConfig.showTime,
+    showExitStatus: terminalConfig.showExitStatus,
+  };
+
+  const storedPromptTheme = terminalConfig.promptTheme;
+  const activePromptThemeId =
+    storedPromptTheme === PROMPT_THEME_CUSTOM_ID
+      ? PROMPT_THEME_CUSTOM_ID
+      : (storedPromptTheme ?? getMatchingPromptThemeId(promptThemeConfig));
+  const isOmpTheme =
+    storedPromptTheme !== undefined && storedPromptTheme !== PROMPT_THEME_CUSTOM_ID;
+  const promptThemePreset = isOmpTheme
+    ? getPromptThemePreset(storedPromptTheme as TerminalPromptTheme)
+    : null;
+
+  const applyEnabledUpdate = (enabled: boolean) => {
+    // Ensure all required fields are present
+    const updatedConfig = {
+      enabled,
+      customPrompt: terminalConfig.customPrompt,
+      promptFormat: terminalConfig.promptFormat,
+      showGitBranch: terminalConfig.showGitBranch,
+      showGitStatus: terminalConfig.showGitStatus,
+      showUserHost: terminalConfig.showUserHost,
+      showPath: terminalConfig.showPath,
+      pathStyle: terminalConfig.pathStyle,
+      pathDepth: terminalConfig.pathDepth,
+      showTime: terminalConfig.showTime,
+      showExitStatus: terminalConfig.showExitStatus,
+      promptTheme: terminalConfig.promptTheme ?? PROMPT_THEME_CUSTOM_ID,
+      customAliases: terminalConfig.customAliases,
+      customEnvVars: terminalConfig.customEnvVars,
+      rcFileVersion: TERMINAL_RC_FILE_VERSION,
+    };
+
+    updateGlobalSettings.mutate(
+      { terminalConfig: updatedConfig },
+      {
+        onSuccess: () => {
+          toast.success(
+            enabled ? 'Custom terminal configs enabled' : 'Custom terminal configs disabled',
+            {
+              description: enabled
+                ? 'New terminals will use custom prompts'
+                : '.automaker/terminal/ will be cleaned up',
+            }
+          );
+        },
+        onError: (error) => {
+          console.error('[TerminalConfig] Failed to update settings:', error);
+          toast.error('Failed to update terminal config', {
+            description: error instanceof Error ? error.message : 'Unknown error',
+          });
+        },
+      }
+    );
+  };
+
+  useEffect(() => {
+    setLocalEnvVars(
+      Object.entries(globalSettings?.terminalConfig?.customEnvVars || {}).map(([key, value]) =>
+        createEnvVarEntry(key, value)
+      )
+    );
+  }, [createEnvVarEntry, globalSettings?.terminalConfig?.customEnvVars]);
+
+  useEffect(() => {
+    return () => {
+      if (envVarUpdateTimeoutRef.current) {
+        clearTimeout(envVarUpdateTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleToggleEnabled = async (enabled: boolean) => {
+    if (enabled) {
+      setShowEnableConfirm(true);
+      return;
+    }
+
+    applyEnabledUpdate(false);
+  };
+
+  const handleUpdateConfig = (updates: Partial<typeof terminalConfig>) => {
+    const nextPromptTheme = updates.promptTheme ?? PROMPT_THEME_CUSTOM_ID;
+
+    updateGlobalSettings.mutate(
+      {
+        terminalConfig: {
+          ...terminalConfig,
+          ...updates,
+          promptTheme: nextPromptTheme,
+        },
+      },
+      {
+        onError: (error) => {
+          console.error('[TerminalConfig] Failed to update settings:', error);
+          toast.error('Failed to update terminal config', {
+            description: error instanceof Error ? error.message : 'Unknown error',
+          });
+        },
+      }
+    );
+  };
+
+  const scheduleEnvVarsUpdate = (envVarsObject: Record<string, string>) => {
+    if (envVarUpdateTimeoutRef.current) {
+      clearTimeout(envVarUpdateTimeoutRef.current);
+    }
+    envVarUpdateTimeoutRef.current = setTimeout(() => {
+      handleUpdateConfig({ customEnvVars: envVarsObject });
+    }, ENV_VAR_UPDATE_DEBOUNCE_MS);
+  };
+
+  const handlePromptThemeChange = (themeId: string) => {
+    if (themeId === PROMPT_THEME_CUSTOM_ID) {
+      handleUpdateConfig({ promptTheme: PROMPT_THEME_CUSTOM_ID });
+      return;
+    }
+
+    const preset = getPromptThemePreset(themeId as TerminalPromptTheme);
+    if (!preset) {
+      handleUpdateConfig({ promptTheme: PROMPT_THEME_CUSTOM_ID });
+      return;
+    }
+
+    handleUpdateConfig({
+      ...preset.config,
+      promptTheme: preset.id,
+    });
+  };
+
+  const addEnvVar = () => {
+    setLocalEnvVars([...localEnvVars, createEnvVarEntry()]);
+  };
+
+  const removeEnvVar = (id: string) => {
+    const newVars = localEnvVars.filter((envVar) => envVar.id !== id);
+    setLocalEnvVars(newVars);
+
+    // Update settings
+    const envVarsObject = newVars.reduce(
+      (acc, { key, value }) => {
+        if (key) acc[key] = value;
+        return acc;
+      },
+      {} as Record<string, string>
+    );
+
+    scheduleEnvVarsUpdate(envVarsObject);
+  };
+
+  const updateEnvVar = (id: string, field: 'key' | 'value', newValue: string) => {
+    const newVars = localEnvVars.map((envVar) =>
+      envVar.id === id ? { ...envVar, [field]: newValue } : envVar
+    );
+    setLocalEnvVars(newVars);
+
+    // Validate and update settings (only if key is valid)
+    const envVarsObject = newVars.reduce(
+      (acc, { key, value }) => {
+        // Only include vars with valid keys (alphanumeric + underscore)
+        if (key && /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(key)) {
+          acc[key] = value;
+        }
+        return acc;
+      },
+      {} as Record<string, string>
+    );
+
+    scheduleEnvVarsUpdate(envVarsObject);
+  };
+
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-purple-500/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-purple-500/20 to-purple-600/10 flex items-center justify-center border border-purple-500/20">
+            <Wand2 className="w-5 h-5 text-purple-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">
+            Custom Terminal Configurations
+          </h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Generate custom shell prompts that automatically sync with your app theme. Opt-in feature
+          that creates configs in .automaker/terminal/ without modifying your existing RC files.
+        </p>
+      </div>
+
+      <div className="p-6 space-y-6">
+        {/* Enable Toggle */}
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <Label className="text-foreground font-medium">Enable Custom Configurations</Label>
+            <p className="text-xs text-muted-foreground">
+              Create theme-synced shell configs in .automaker/terminal/
+            </p>
+          </div>
+          <Switch checked={terminalConfig.enabled} onCheckedChange={handleToggleEnabled} />
+        </div>
+
+        {terminalConfig.enabled && (
+          <>
+            {/* Info Box */}
+            <div className="rounded-lg border border-purple-500/20 bg-purple-500/5 p-3 flex gap-2">
+              <Info className="h-4 w-4 text-purple-500 flex-shrink-0 mt-0.5" />
+              <div className="text-xs text-foreground/80">
+                <strong>How it works:</strong> Custom configs are applied to new terminals only.
+                Your ~/.bashrc and ~/.zshrc are still loaded first. Close and reopen terminals to
+                see changes.
+              </div>
+            </div>
+
+            {/* Custom Prompt Toggle */}
+            <div className="flex items-center justify-between">
+              <div className="space-y-1">
+                <Label className="text-foreground font-medium">Custom Prompt</Label>
+                <p className="text-xs text-muted-foreground">
+                  Override default shell prompt with themed version
+                </p>
+              </div>
+              <Switch
+                checked={terminalConfig.customPrompt}
+                onCheckedChange={(checked) => handleUpdateConfig({ customPrompt: checked })}
+              />
+            </div>
+
+            {terminalConfig.customPrompt && (
+              <>
+                {/* Prompt Format */}
+                <div className="space-y-3">
+                  <Label className="text-foreground font-medium">Prompt Theme (Oh My Posh)</Label>
+                  <Select value={activePromptThemeId} onValueChange={handlePromptThemeChange}>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value={PROMPT_THEME_CUSTOM_ID}>
+                        <div className="space-y-0.5">
+                          <div>Custom</div>
+                          <div className="text-xs text-muted-foreground">
+                            Hand-tuned configuration
+                          </div>
+                        </div>
+                      </SelectItem>
+                      {PROMPT_THEME_PRESETS.map((preset) => (
+                        <SelectItem key={preset.id} value={preset.id}>
+                          <div className="space-y-0.5">
+                            <div>{preset.label}</div>
+                            <div className="text-xs text-muted-foreground">
+                              {preset.description}
+                            </div>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {isOmpTheme && (
+                  <div className="rounded-lg border border-emerald-500/20 bg-emerald-500/5 p-3 flex gap-2">
+                    <Info className="h-4 w-4 text-emerald-500 flex-shrink-0 mt-0.5" />
+                    <div className="text-xs text-foreground/80">
+                      <strong>{promptThemePreset?.label ?? 'Oh My Posh theme'}</strong> uses the
+                      oh-my-posh CLI for rendering. Ensure it&apos;s installed for the full theme.
+                      Prompt format and segment toggles are ignored while an OMP theme is selected.
+                    </div>
+                  </div>
+                )}
+
+                <div className="space-y-3">
+                  <Label className="text-foreground font-medium">Prompt Format</Label>
+                  <Select
+                    value={terminalConfig.promptFormat}
+                    onValueChange={(value: 'standard' | 'minimal' | 'powerline' | 'starship') =>
+                      handleUpdateConfig({ promptFormat: value })
+                    }
+                    disabled={isOmpTheme}
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="standard">
+                        <div className="space-y-0.5">
+                          <div>Standard</div>
+                          <div className="text-xs text-muted-foreground">
+                            [user@host] ~/path (main*) $
+                          </div>
+                        </div>
+                      </SelectItem>
+                      <SelectItem value="minimal">
+                        <div className="space-y-0.5">
+                          <div>Minimal</div>
+                          <div className="text-xs text-muted-foreground">~/path (main*) $</div>
+                        </div>
+                      </SelectItem>
+                      <SelectItem value="powerline">
+                        <div className="space-y-0.5">
+                          <div>Powerline</div>
+                          <div className="text-xs text-muted-foreground">
+                            ┌─[user@host]─[~/path]─[main*]
+                          </div>
+                        </div>
+                      </SelectItem>
+                      <SelectItem value="starship">
+                        <div className="space-y-0.5">
+                          <div>Starship-Inspired</div>
+                          <div className="text-xs text-muted-foreground">
+                            user@host in ~/path on main*
+                          </div>
+                        </div>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* Git Info Toggles */}
+                <div className="space-y-4 pl-4 border-l-2 border-border/30">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <GitBranch className="w-4 h-4 text-muted-foreground" />
+                      <Label className="text-sm">Show Git Branch</Label>
+                    </div>
+                    <Switch
+                      checked={terminalConfig.showGitBranch}
+                      onCheckedChange={(checked) => handleUpdateConfig({ showGitBranch: checked })}
+                      disabled={isOmpTheme}
+                    />
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-muted-foreground">*</span>
+                      <Label className="text-sm">Show Git Status (dirty indicator)</Label>
+                    </div>
+                    <Switch
+                      checked={terminalConfig.showGitStatus}
+                      onCheckedChange={(checked) => handleUpdateConfig({ showGitStatus: checked })}
+                      disabled={!terminalConfig.showGitBranch || isOmpTheme}
+                    />
+                  </div>
+                </div>
+
+                {/* Prompt Segments */}
+                <div className="space-y-4 pl-4 border-l-2 border-border/30">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <Wand2 className="w-4 h-4 text-muted-foreground" />
+                      <Label className="text-sm">Show User & Host</Label>
+                    </div>
+                    <Switch
+                      checked={terminalConfig.showUserHost}
+                      onCheckedChange={(checked) => handleUpdateConfig({ showUserHost: checked })}
+                      disabled={isOmpTheme}
+                    />
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-muted-foreground">~/</span>
+                      <Label className="text-sm">Show Path</Label>
+                    </div>
+                    <Switch
+                      checked={terminalConfig.showPath}
+                      onCheckedChange={(checked) => handleUpdateConfig({ showPath: checked })}
+                      disabled={isOmpTheme}
+                    />
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-muted-foreground">⏱</span>
+                      <Label className="text-sm">Show Time</Label>
+                    </div>
+                    <Switch
+                      checked={terminalConfig.showTime}
+                      onCheckedChange={(checked) => handleUpdateConfig({ showTime: checked })}
+                      disabled={isOmpTheme}
+                    />
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-muted-foreground">✗</span>
+                      <Label className="text-sm">Show Exit Status</Label>
+                    </div>
+                    <Switch
+                      checked={terminalConfig.showExitStatus}
+                      onCheckedChange={(checked) => handleUpdateConfig({ showExitStatus: checked })}
+                      disabled={isOmpTheme}
+                    />
+                  </div>
+
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <div className="space-y-2">
+                      <Label className="text-xs text-muted-foreground">Path Style</Label>
+                      <Select
+                        value={terminalConfig.pathStyle}
+                        onValueChange={(value: 'full' | 'short' | 'basename') =>
+                          handleUpdateConfig({ pathStyle: value })
+                        }
+                        disabled={!terminalConfig.showPath || isOmpTheme}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="full">Full</SelectItem>
+                          <SelectItem value="short">Short</SelectItem>
+                          <SelectItem value="basename">Basename</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label className="text-xs text-muted-foreground">Path Depth</Label>
+                      <Input
+                        type="number"
+                        min={PATH_DEPTH_MIN}
+                        max={PATH_DEPTH_MAX}
+                        value={terminalConfig.pathDepth}
+                        onChange={(event) =>
+                          handleUpdateConfig({
+                            pathDepth: clampPathDepth(Number(event.target.value) || 0),
+                          })
+                        }
+                        disabled={!terminalConfig.showPath || isOmpTheme}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Live Preview */}
+                <div className="space-y-3">
+                  <Label className="text-foreground font-medium">Preview</Label>
+                  <PromptPreview
+                    format={terminalConfig.promptFormat}
+                    theme={theme}
+                    showGitBranch={terminalConfig.showGitBranch}
+                    showGitStatus={terminalConfig.showGitStatus}
+                    showUserHost={terminalConfig.showUserHost}
+                    showPath={terminalConfig.showPath}
+                    pathStyle={terminalConfig.pathStyle}
+                    pathDepth={terminalConfig.pathDepth}
+                    showTime={terminalConfig.showTime}
+                    showExitStatus={terminalConfig.showExitStatus}
+                    isOmpTheme={isOmpTheme}
+                    promptThemeLabel={promptThemePreset?.label}
+                  />
+                </div>
+              </>
+            )}
+
+            {/* Custom Aliases */}
+            <div className="space-y-3">
+              <div className="space-y-1">
+                <Label className="text-foreground font-medium">Custom Aliases</Label>
+                <p className="text-xs text-muted-foreground">
+                  Add shell aliases (one per line, e.g., alias ll='ls -la')
+                </p>
+              </div>
+              <Textarea
+                value={terminalConfig.customAliases}
+                onChange={(e) => handleUpdateConfig({ customAliases: e.target.value })}
+                placeholder="# Custom aliases&#10;alias gs='git status'&#10;alias ll='ls -la'&#10;alias ..='cd ..'"
+                className="font-mono text-sm h-32"
+              />
+            </div>
+
+            {/* Custom Environment Variables */}
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <div className="space-y-1">
+                  <Label className="text-foreground font-medium">
+                    Custom Environment Variables
+                  </Label>
+                  <p className="text-xs text-muted-foreground">
+                    Add custom env vars (alphanumeric + underscore only)
+                  </p>
+                </div>
+                <Button variant="outline" size="sm" onClick={addEnvVar} className="h-8 gap-1.5">
+                  <Plus className="w-3.5 h-3.5" />
+                  Add
+                </Button>
+              </div>
+
+              {localEnvVars.length > 0 && (
+                <div className="space-y-2">
+                  {localEnvVars.map((envVar) => (
+                    <div key={envVar.id} className="flex gap-2 items-start">
+                      <Input
+                        value={envVar.key}
+                        onChange={(e) => updateEnvVar(envVar.id, 'key', e.target.value)}
+                        placeholder="VAR_NAME"
+                        className={cn(
+                          'font-mono text-sm flex-1',
+                          envVar.key &&
+                            !/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(envVar.key) &&
+                            'border-destructive'
+                        )}
+                      />
+                      <Input
+                        value={envVar.value}
+                        onChange={(e) => updateEnvVar(envVar.id, 'value', e.target.value)}
+                        placeholder="value"
+                        className="font-mono text-sm flex-[2]"
+                      />
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => removeEnvVar(envVar.id)}
+                        className="h-9 w-9 p-0 text-muted-foreground hover:text-destructive"
+                      >
+                        <X className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+
+      <ConfirmDialog
+        open={showEnableConfirm}
+        onOpenChange={setShowEnableConfirm}
+        title="Enable custom terminal configurations"
+        description="Automaker will generate per-project shell configuration files for your terminal."
+        icon={Info}
+        confirmText="Enable"
+        onConfirm={() => applyEnabledUpdate(true)}
+      >
+        <div className="space-y-3 text-sm text-muted-foreground">
+          <ul className="list-disc space-y-1 pl-5">
+            <li>Creates shell config files in `.automaker/terminal/`</li>
+            <li>Applies prompts and colors that match your app theme</li>
+            <li>Leaves your existing `~/.bashrc` and `~/.zshrc` untouched</li>
+          </ul>
+          <p className="text-xs text-muted-foreground">
+            New terminal sessions will use the custom prompt; existing sessions are unchanged.
+          </p>
+        </div>
+      </ConfirmDialog>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/terminal/terminal-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/terminal/terminal-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0cf81e113a2bec28e7cd192f9cd108e2ef5942d4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/terminal/terminal-section.tsx
@@ -0,0 +1,450 @@
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Slider } from '@/components/ui/slider';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  SquareTerminal,
+  RefreshCw,
+  Terminal,
+  SquarePlus,
+  SplitSquareHorizontal,
+  Palette,
+  Type,
+  X,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useAppStore } from '@/store/app-store';
+import { toast } from 'sonner';
+import { TERMINAL_FONT_OPTIONS } from '@/config/terminal-themes';
+import { DEFAULT_FONT_VALUE } from '@/config/ui-font-options';
+import { useAvailableTerminals } from '@/components/views/board-view/worktree-panel/hooks/use-available-terminals';
+import { getTerminalIcon } from '@/components/icons/terminal-icons';
+import { TerminalConfigSection } from './terminal-config-section';
+
+export function TerminalSection() {
+  const {
+    terminalState,
+    setTerminalDefaultRunScript,
+    setTerminalScreenReaderMode,
+    setTerminalFontFamily,
+    setTerminalScrollbackLines,
+    setTerminalLineHeight,
+    setTerminalDefaultFontSize,
+    defaultTerminalId,
+    setDefaultTerminalId,
+    setOpenTerminalMode,
+    setTerminalBackgroundColor,
+    setTerminalForegroundColor,
+  } = useAppStore();
+
+  const {
+    defaultRunScript,
+    screenReaderMode,
+    fontFamily,
+    scrollbackLines,
+    lineHeight,
+    defaultFontSize,
+    openTerminalMode,
+    customBackgroundColor,
+    customForegroundColor,
+  } = terminalState;
+
+  // Get available external terminals
+  const { terminals, isRefreshing, refresh } = useAvailableTerminals();
+
+  return (
+    <div className="space-y-6">
+      <div
+        className={cn(
+          'rounded-2xl overflow-hidden',
+          'border border-border/50',
+          'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+          'shadow-sm shadow-black/5'
+        )}
+      >
+        <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-green-500/20 to-green-600/10 flex items-center justify-center border border-green-500/20">
+              <SquareTerminal className="w-5 h-5 text-green-500" />
+            </div>
+            <h2 className="text-lg font-semibold text-foreground tracking-tight">Terminal</h2>
+          </div>
+          <p className="text-sm text-muted-foreground/80 ml-12">
+            Customize terminal appearance and behavior. Theme follows your app theme in Appearance
+            settings.
+          </p>
+        </div>
+        <div className="p-6 space-y-6">
+          {/* Default External Terminal */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-foreground font-medium">Default External Terminal</Label>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 w-7 p-0"
+                onClick={refresh}
+                disabled={isRefreshing}
+                title="Refresh available terminals"
+                aria-label="Refresh available terminals"
+              >
+                <RefreshCw className={cn('w-3.5 h-3.5', isRefreshing && 'animate-spin')} />
+              </Button>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Terminal to use when selecting "Open in Terminal" from the worktree menu
+            </p>
+            <Select
+              value={defaultTerminalId ?? 'integrated'}
+              onValueChange={(value) => {
+                setDefaultTerminalId(value === 'integrated' ? null : value);
+                toast.success(
+                  value === 'integrated'
+                    ? 'Integrated terminal set as default'
+                    : 'Default terminal changed'
+                );
+              }}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select a terminal" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="integrated">
+                  <span className="flex items-center gap-2">
+                    <Terminal className="w-4 h-4" />
+                    Integrated Terminal
+                  </span>
+                </SelectItem>
+                {terminals.map((terminal) => {
+                  const TerminalIcon = getTerminalIcon(terminal.id);
+                  return (
+                    <SelectItem key={terminal.id} value={terminal.id}>
+                      <span className="flex items-center gap-2">
+                        <TerminalIcon className="w-4 h-4" />
+                        {terminal.name}
+                      </span>
+                    </SelectItem>
+                  );
+                })}
+              </SelectContent>
+            </Select>
+            {terminals.length === 0 && !isRefreshing && (
+              <p className="text-xs text-muted-foreground italic">
+                No external terminals detected. Click refresh to re-scan.
+              </p>
+            )}
+          </div>
+
+          {/* Default Open Mode */}
+          <div className="space-y-3">
+            <Label className="text-foreground font-medium">Default Open Mode</Label>
+            <p className="text-xs text-muted-foreground">
+              How to open the integrated terminal when using "Open in Terminal" from the worktree
+              menu
+            </p>
+            <Select
+              value={openTerminalMode}
+              onValueChange={(value: 'newTab' | 'split') => {
+                setOpenTerminalMode(value);
+                toast.success(
+                  value === 'newTab'
+                    ? 'New terminals will open in new tabs'
+                    : 'New terminals will split the current tab'
+                );
+              }}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="newTab">
+                  <span className="flex items-center gap-2">
+                    <SquarePlus className="w-4 h-4" />
+                    New Tab
+                  </span>
+                </SelectItem>
+                <SelectItem value="split">
+                  <span className="flex items-center gap-2">
+                    <SplitSquareHorizontal className="w-4 h-4" />
+                    Split Current Tab
+                  </span>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Font Family */}
+          <div className="space-y-3">
+            <Label className="text-foreground font-medium">Font Family</Label>
+            <Select
+              value={fontFamily || DEFAULT_FONT_VALUE}
+              onValueChange={(value) => {
+                setTerminalFontFamily(value);
+                toast.info('Font family changed', {
+                  description: 'Restart terminal for changes to take effect',
+                });
+              }}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Default (Menlo / Monaco)" />
+              </SelectTrigger>
+              <SelectContent>
+                {TERMINAL_FONT_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    <span
+                      style={{
+                        fontFamily: option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
+                      }}
+                    >
+                      {option.label}
+                    </span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Background Color */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-foreground font-medium">Background Color</Label>
+              {customBackgroundColor && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+                  onClick={() => {
+                    setTerminalBackgroundColor(null);
+                    toast.success('Background color reset to theme default');
+                  }}
+                >
+                  <X className="w-3 h-3 mr-1" />
+                  Reset
+                </Button>
+              )}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Override the terminal background color. Leave empty to use the theme default.
+            </p>
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-2 flex-1">
+                <div
+                  className="w-10 h-10 rounded-lg border border-border/50 shadow-sm flex items-center justify-center"
+                  style={{
+                    backgroundColor: customBackgroundColor || 'var(--card)',
+                  }}
+                >
+                  <Palette
+                    className={cn(
+                      'w-5 h-5',
+                      customBackgroundColor ? 'text-white/80' : 'text-muted-foreground'
+                    )}
+                  />
+                </div>
+                <Input
+                  type="color"
+                  value={customBackgroundColor || '#000000'}
+                  onChange={(e) => {
+                    const color = e.target.value;
+                    setTerminalBackgroundColor(color);
+                  }}
+                  className="w-14 h-10 p-1 cursor-pointer bg-transparent border-border/50"
+                  title="Pick a color"
+                />
+                <Input
+                  type="text"
+                  value={customBackgroundColor || ''}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    // Validate hex color format
+                    if (value === '' || /^#[0-9A-Fa-f]{0,6}$/.test(value)) {
+                      if (value === '' || /^#[0-9A-Fa-f]{6}$/.test(value)) {
+                        setTerminalBackgroundColor(value || null);
+                      }
+                    }
+                  }}
+                  placeholder="e.g., #1a1a1a"
+                  className="flex-1 bg-accent/30 border-border/50 font-mono text-sm"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Foreground Color */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-foreground font-medium">Foreground Color</Label>
+              {customForegroundColor && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+                  onClick={() => {
+                    setTerminalForegroundColor(null);
+                    toast.success('Foreground color reset to theme default');
+                  }}
+                >
+                  <X className="w-3 h-3 mr-1" />
+                  Reset
+                </Button>
+              )}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Override the terminal text/foreground color. Leave empty to use the theme default.
+            </p>
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-2 flex-1">
+                <div
+                  className="w-10 h-10 rounded-lg border border-border/50 shadow-sm flex items-center justify-center"
+                  style={{
+                    backgroundColor: customForegroundColor || 'var(--foreground)',
+                  }}
+                >
+                  <Type
+                    className={cn(
+                      'w-5 h-5',
+                      customForegroundColor ? 'text-black/80' : 'text-background'
+                    )}
+                  />
+                </div>
+                <Input
+                  type="color"
+                  value={customForegroundColor || '#ffffff'}
+                  onChange={(e) => {
+                    const color = e.target.value;
+                    setTerminalForegroundColor(color);
+                  }}
+                  className="w-14 h-10 p-1 cursor-pointer bg-transparent border-border/50"
+                  title="Pick a color"
+                />
+                <Input
+                  type="text"
+                  value={customForegroundColor || ''}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    // Validate hex color format
+                    if (value === '' || /^#[0-9A-Fa-f]{0,6}$/.test(value)) {
+                      if (value === '' || /^#[0-9A-Fa-f]{6}$/.test(value)) {
+                        setTerminalForegroundColor(value || null);
+                      }
+                    }
+                  }}
+                  placeholder="e.g., #ffffff"
+                  className="flex-1 bg-accent/30 border-border/50 font-mono text-sm"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Default Font Size */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-foreground font-medium">Default Font Size</Label>
+              <span className="text-sm text-muted-foreground">{defaultFontSize}px</span>
+            </div>
+            <Slider
+              value={[defaultFontSize]}
+              min={8}
+              max={32}
+              step={1}
+              onValueChange={([value]) => setTerminalDefaultFontSize(value)}
+              className="flex-1"
+            />
+          </div>
+
+          {/* Line Height */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-foreground font-medium">Line Height</Label>
+              <span className="text-sm text-muted-foreground">{lineHeight.toFixed(1)}</span>
+            </div>
+            <Slider
+              value={[lineHeight]}
+              min={1.0}
+              max={2.0}
+              step={0.1}
+              onValueChange={([value]) => {
+                setTerminalLineHeight(value);
+              }}
+              onValueCommit={() => {
+                toast.info('Line height changed', {
+                  description: 'Restart terminal for changes to take effect',
+                });
+              }}
+              className="flex-1"
+            />
+          </div>
+
+          {/* Scrollback Lines */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-foreground font-medium">Scrollback Buffer</Label>
+              <span className="text-sm text-muted-foreground">
+                {(scrollbackLines / 1000).toFixed(0)}k lines
+              </span>
+            </div>
+            <Slider
+              value={[scrollbackLines]}
+              min={1000}
+              max={100000}
+              step={1000}
+              onValueChange={([value]) => setTerminalScrollbackLines(value)}
+              onValueCommit={() => {
+                toast.info('Scrollback changed', {
+                  description: 'Restart terminal for changes to take effect',
+                });
+              }}
+              className="flex-1"
+            />
+          </div>
+
+          {/* Default Run Script */}
+          <div className="space-y-3">
+            <Label className="text-foreground font-medium">Default Run Script</Label>
+            <p className="text-xs text-muted-foreground">
+              Command to run automatically when opening a new terminal (e.g., "claude", "codex")
+            </p>
+            <Input
+              value={defaultRunScript}
+              onChange={(e) => setTerminalDefaultRunScript(e.target.value)}
+              placeholder="e.g., claude, codex, npm run dev"
+              className="bg-accent/30 border-border/50"
+            />
+          </div>
+
+          {/* Screen Reader Mode */}
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <Label className="text-foreground font-medium">Screen Reader Mode</Label>
+              <p className="text-xs text-muted-foreground">
+                Enable accessibility mode for screen readers
+              </p>
+            </div>
+            <Switch
+              checked={screenReaderMode}
+              onCheckedChange={(checked) => {
+                setTerminalScreenReaderMode(checked);
+                toast.success(
+                  checked ? 'Screen reader mode enabled' : 'Screen reader mode disabled',
+                  {
+                    description: 'Restart terminal for changes to take effect',
+                  }
+                );
+              }}
+            />
+          </div>
+        </div>
+      </div>
+
+      <TerminalConfigSection />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/worktrees/index.ts b/temp_repo/apps/ui/src/components/views/settings-view/worktrees/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a240bd727bb78827c5954f6f1b9812bb1115fdfd
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/worktrees/index.ts
@@ -0,0 +1 @@
+export { WorktreesSection } from './worktrees-section';
diff --git a/temp_repo/apps/ui/src/components/views/settings-view/worktrees/worktrees-section.tsx b/temp_repo/apps/ui/src/components/views/settings-view/worktrees/worktrees-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..062d2d0d85c07554c32d38f838ad79c0a2c38ba8
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/settings-view/worktrees/worktrees-section.tsx
@@ -0,0 +1,67 @@
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { GitBranch } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface WorktreesSectionProps {
+  useWorktrees: boolean;
+  onUseWorktreesChange: (value: boolean) => void;
+}
+
+export function WorktreesSection({ useWorktrees, onUseWorktreesChange }: WorktreesSectionProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl overflow-hidden',
+        'border border-border/50',
+        'bg-gradient-to-br from-card/90 via-card/70 to-card/80 backdrop-blur-xl',
+        'shadow-sm shadow-black/5'
+      )}
+    >
+      <div className="p-6 border-b border-border/50 bg-gradient-to-r from-transparent via-accent/5 to-transparent">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-600/10 flex items-center justify-center border border-brand-500/20">
+            <GitBranch className="w-5 h-5 text-brand-500" />
+          </div>
+          <h2 className="text-lg font-semibold text-foreground tracking-tight">Worktrees</h2>
+        </div>
+        <p className="text-sm text-muted-foreground/80 ml-12">
+          Configure git worktree isolation for feature development.
+        </p>
+      </div>
+      <div className="p-6 space-y-5">
+        {/* Enable Worktrees Toggle */}
+        <div className="group flex items-start space-x-3 p-3 rounded-xl hover:bg-accent/30 transition-colors duration-200 -mx-3">
+          <Checkbox
+            id="use-worktrees"
+            checked={useWorktrees}
+            onCheckedChange={(checked) => onUseWorktreesChange(checked === true)}
+            className="mt-1"
+            data-testid="use-worktrees-checkbox"
+          />
+          <div className="space-y-1.5">
+            <Label
+              htmlFor="use-worktrees"
+              className="text-foreground cursor-pointer font-medium flex items-center gap-2"
+            >
+              <GitBranch className="w-4 h-4 text-brand-500" />
+              Enable Git Worktree Isolation
+            </Label>
+            <p className="text-xs text-muted-foreground/80 leading-relaxed">
+              Creates isolated git branches for each feature. When disabled, agents work directly in
+              the main project directory.
+            </p>
+          </div>
+        </div>
+
+        {/* Info about project-specific settings */}
+        <div className="rounded-xl border border-border/30 bg-muted/30 p-4">
+          <p className="text-xs text-muted-foreground">
+            Project-specific worktree preferences (init script, delete branch behavior) can be
+            configured in each project's settings via the sidebar.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view.tsx b/temp_repo/apps/ui/src/components/views/setup-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..82a73291fb71d05c1a518b6831a7a7b1a282914a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view.tsx
@@ -0,0 +1,145 @@
+import { createLogger } from '@automaker/utils/logger';
+import { useSetupStore } from '@/store/setup-store';
+import { StepIndicator } from './setup-view/components';
+import {
+  WelcomeStep,
+  ThemeStep,
+  CompleteStep,
+  ProvidersSetupStep,
+  GitHubSetupStep,
+} from './setup-view/steps';
+import { useNavigate } from '@tanstack/react-router';
+
+const logger = createLogger('SetupView');
+
+// Main Setup View
+export function SetupView() {
+  const { currentStep, setCurrentStep, completeSetup } = useSetupStore();
+  const navigate = useNavigate();
+
+  // Simplified steps: welcome, theme, providers (combined), github, complete
+  const steps = ['welcome', 'theme', 'providers', 'github', 'complete'] as const;
+  type StepName = (typeof steps)[number];
+
+  const getStepName = (): StepName => {
+    // Map old step names to new consolidated steps
+    if (currentStep === 'welcome') return 'welcome';
+    if (currentStep === 'theme') return 'theme';
+    if (
+      currentStep === 'claude_detect' ||
+      currentStep === 'claude_auth' ||
+      currentStep === 'cursor' ||
+      currentStep === 'codex' ||
+      currentStep === 'opencode' ||
+      currentStep === 'providers'
+    ) {
+      return 'providers';
+    }
+    if (currentStep === 'github') return 'github';
+    return 'complete';
+  };
+
+  const currentIndex = steps.indexOf(getStepName());
+
+  const handleNext = (from: string) => {
+    logger.debug('[Setup Flow] handleNext called from:', from, 'currentStep:', currentStep);
+    switch (from) {
+      case 'welcome':
+        logger.debug('[Setup Flow] Moving to theme step');
+        setCurrentStep('theme');
+        break;
+      case 'theme':
+        logger.debug('[Setup Flow] Moving to providers step');
+        setCurrentStep('providers');
+        break;
+      case 'providers':
+        logger.debug('[Setup Flow] Moving to github step');
+        setCurrentStep('github');
+        break;
+      case 'github':
+        logger.debug('[Setup Flow] Moving to complete step');
+        setCurrentStep('complete');
+        break;
+    }
+  };
+
+  const handleBack = (from: string) => {
+    logger.debug('[Setup Flow] handleBack called from:', from);
+    switch (from) {
+      case 'theme':
+        setCurrentStep('welcome');
+        break;
+      case 'providers':
+        setCurrentStep('theme');
+        break;
+      case 'github':
+        setCurrentStep('providers');
+        break;
+    }
+  };
+
+  const handleSkipGithub = () => {
+    logger.debug('[Setup Flow] Skipping GitHub setup');
+    setCurrentStep('complete');
+  };
+
+  const handleFinish = () => {
+    logger.debug('[Setup Flow] handleFinish called - completing setup');
+    completeSetup();
+    logger.debug('[Setup Flow] Setup completed, redirecting to dashboard');
+    navigate({ to: '/dashboard' });
+  };
+
+  return (
+    <div className="h-full flex flex-col content-bg" data-testid="setup-view">
+      {/* Header */}
+      <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md titlebar-drag-region">
+        <div className="px-8 py-4">
+          <div className="flex items-center gap-3 titlebar-no-drag">
+            <img src="/logo.png" alt="Automaker" className="w-8 h-8" />
+            <span className="text-lg font-semibold text-foreground">Automaker Setup</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto min-h-0 flex items-center justify-center">
+        <div className="w-full max-w-2xl mx-auto px-8">
+          <div className="mb-8">
+            <StepIndicator currentStep={currentIndex} totalSteps={steps.length} />
+          </div>
+
+          <div>
+            {currentStep === 'welcome' && <WelcomeStep onNext={() => handleNext('welcome')} />}
+
+            {currentStep === 'theme' && (
+              <ThemeStep onNext={() => handleNext('theme')} onBack={() => handleBack('theme')} />
+            )}
+
+            {(currentStep === 'providers' ||
+              currentStep === 'claude_detect' ||
+              currentStep === 'claude_auth' ||
+              currentStep === 'cursor' ||
+              currentStep === 'codex' ||
+              currentStep === 'opencode') && (
+              <ProvidersSetupStep
+                onNext={() => handleNext('providers')}
+                onBack={() => handleBack('providers')}
+              />
+            )}
+
+            {currentStep === 'github' && (
+              <GitHubSetupStep
+                onNext={() => handleNext('github')}
+                onBack={() => handleBack('github')}
+                onSkip={handleSkipGithub}
+              />
+            )}
+
+            {currentStep === 'complete' && <CompleteStep onFinish={handleFinish} />}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/components/auth-method-selector.tsx b/temp_repo/apps/ui/src/components/views/setup-view/components/auth-method-selector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..689689adda4ba66c2e6e3af9886d59f93671b81a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/components/auth-method-selector.tsx
@@ -0,0 +1,76 @@
+import { ReactNode } from 'react';
+
+interface AuthMethodOption {
+  id: string;
+  icon: ReactNode;
+  title: string;
+  description: string;
+  badge: string;
+  badgeColor: string; // e.g., "brand-500", "green-500"
+}
+
+interface AuthMethodSelectorProps {
+  options: AuthMethodOption[];
+  onSelect: (methodId: string) => void;
+}
+
+// Map badge colors to complete Tailwind class names
+const getBadgeClasses = (badgeColor: string) => {
+  const colorMap: Record<string, { border: string; bg: string; text: string }> = {
+    'brand-500': {
+      border: 'hover:border-brand-500/50',
+      bg: 'hover:bg-brand-500/5',
+      text: 'text-brand-500',
+    },
+    'green-500': {
+      border: 'hover:border-green-500/50',
+      bg: 'hover:bg-green-500/5',
+      text: 'text-green-500',
+    },
+    'blue-500': {
+      border: 'hover:border-blue-500/50',
+      bg: 'hover:bg-blue-500/5',
+      text: 'text-blue-500',
+    },
+    'purple-500': {
+      border: 'hover:border-purple-500/50',
+      bg: 'hover:bg-purple-500/5',
+      text: 'text-purple-500',
+    },
+  };
+
+  return (
+    colorMap[badgeColor] || {
+      border: 'hover:border-brand-500/50',
+      bg: 'hover:bg-brand-500/5',
+      text: 'text-brand-500',
+    }
+  );
+};
+
+export function AuthMethodSelector({ options, onSelect }: AuthMethodSelectorProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      {options.map((option) => {
+        const badgeClasses = getBadgeClasses(option.badgeColor);
+        return (
+          <button
+            key={option.id}
+            onClick={() => onSelect(option.id)}
+            className={`p-4 rounded-lg border border-border ${badgeClasses.border} bg-card ${badgeClasses.bg} transition-all text-left`}
+            data-testid={`select-${option.id}-auth`}
+          >
+            <div className="flex items-start gap-3">
+              {option.icon}
+              <div>
+                <p className="font-medium text-foreground">{option.title}</p>
+                <p className="text-sm text-muted-foreground mt-1">{option.description}</p>
+                <p className={`text-xs ${badgeClasses.text} mt-2`}>{option.badge}</p>
+              </div>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/components/cli-installation-card.tsx b/temp_repo/apps/ui/src/components/views/setup-view/components/cli-installation-card.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..de0c3bf9b229d32f38addc96f74a5330534b3d49
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/components/cli-installation-card.tsx
@@ -0,0 +1,85 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Download, AlertCircle } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { CopyableCommandField } from './copyable-command-field';
+import { TerminalOutput } from './terminal-output';
+
+interface CommandInfo {
+  label: string; // e.g., "macOS / Linux"
+  command: string;
+}
+
+interface CliInstallationCardProps {
+  cliName: string;
+  description: string;
+  commands: CommandInfo[];
+  isInstalling: boolean;
+  installProgress: { output: string[] };
+  onInstall: () => void;
+  warningMessage?: string;
+  color?: 'brand' | 'green'; // For different CLI themes
+}
+
+export function CliInstallationCard({
+  cliName,
+  description,
+  commands,
+  isInstalling,
+  installProgress,
+  onInstall,
+  warningMessage,
+  color = 'brand',
+}: CliInstallationCardProps) {
+  const colorClasses = {
+    brand: 'bg-brand-500 hover:bg-brand-600',
+    green: 'bg-green-500 hover:bg-green-600',
+  };
+
+  return (
+    <Card className="bg-card border-border">
+      <CardHeader>
+        <CardTitle className="text-lg flex items-center gap-2">
+          <Download className="w-5 h-5" />
+          Install {cliName}
+        </CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {commands.map((cmd, index) => (
+          <CopyableCommandField key={index} label={cmd.label} command={cmd.command} />
+        ))}
+
+        {isInstalling && <TerminalOutput lines={installProgress.output} />}
+
+        <Button
+          onClick={onInstall}
+          disabled={isInstalling}
+          className={`w-full ${colorClasses[color]} text-white`}
+          data-testid={`install-${cliName.toLowerCase()}-button`}
+        >
+          {isInstalling ? (
+            <>
+              <Spinner size="sm" variant="foreground" className="mr-2" />
+              Installing...
+            </>
+          ) : (
+            <>
+              <Download className="w-4 h-4 mr-2" />
+              Auto Install
+            </>
+          )}
+        </Button>
+
+        {warningMessage && (
+          <div className="p-3 rounded-lg bg-yellow-500/10 border border-yellow-500/20">
+            <div className="flex items-start gap-2">
+              <AlertCircle className="w-4 h-4 text-yellow-500 mt-0.5" />
+              <p className="text-xs text-yellow-600 dark:text-yellow-400">{warningMessage}</p>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/components/copyable-command-field.tsx b/temp_repo/apps/ui/src/components/views/setup-view/components/copyable-command-field.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bc2b05a4213dfae39b9485c2dff1035154d5b803
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/components/copyable-command-field.tsx
@@ -0,0 +1,29 @@
+import { Button } from '@/components/ui/button';
+import { Copy } from 'lucide-react';
+import { toast } from 'sonner';
+
+interface CopyableCommandFieldProps {
+  command: string;
+  label?: string;
+}
+
+export function CopyableCommandField({ command, label }: CopyableCommandFieldProps) {
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(command);
+    toast.success('Command copied to clipboard');
+  };
+
+  return (
+    <div className="space-y-2">
+      {label && <span className="text-sm text-muted-foreground">{label}</span>}
+      <div className="flex items-center gap-2">
+        <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+          {command}
+        </code>
+        <Button variant="ghost" size="icon" onClick={copyToClipboard}>
+          <Copy className="w-4 h-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/components/index.ts b/temp_repo/apps/ui/src/components/views/setup-view/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b5999c2d34f9083a2cd714d4cc8504400c8cd8cd
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/components/index.ts
@@ -0,0 +1,9 @@
+// Re-export all setup-view components for easier imports
+export { StepIndicator } from './step-indicator';
+export { StatusBadge } from './status-badge';
+export { StatusRow } from './status-row';
+export { TerminalOutput } from './terminal-output';
+export { CopyableCommandField } from './copyable-command-field';
+export { CliInstallationCard } from './cli-installation-card';
+export { ReadyStateCard } from './ready-state-card';
+export { AuthMethodSelector } from './auth-method-selector';
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/components/ready-state-card.tsx b/temp_repo/apps/ui/src/components/views/setup-view/components/ready-state-card.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3f55e35d66e0b34f5ce7a6bf321f2f489bd1f639
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/components/ready-state-card.tsx
@@ -0,0 +1,38 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { CheckCircle2 } from 'lucide-react';
+
+interface ReadyStateCardProps {
+  title: string;
+  description: string;
+  variant?: 'success' | 'info';
+}
+
+export function ReadyStateCard({ title, description, variant = 'success' }: ReadyStateCardProps) {
+  const variantClasses = {
+    success: 'bg-green-500/5 border-green-500/20',
+    info: 'bg-blue-500/5 border-blue-500/20',
+  };
+
+  const iconColorClasses = {
+    success: 'bg-green-500/10 text-green-500',
+    info: 'bg-blue-500/10 text-blue-500',
+  };
+
+  return (
+    <Card className={variantClasses[variant]}>
+      <CardContent className="py-6">
+        <div className="flex items-center gap-4">
+          <div
+            className={`w-12 h-12 rounded-full ${iconColorClasses[variant]} flex items-center justify-center`}
+          >
+            <CheckCircle2 className="w-6 h-6" />
+          </div>
+          <div>
+            <p className="font-medium text-foreground">{title}</p>
+            <p className="text-sm text-muted-foreground">{description}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/components/status-badge.tsx b/temp_repo/apps/ui/src/components/views/setup-view/components/status-badge.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..53869d07377871c4a8af41f7d20f4b8aafb250ec
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/components/status-badge.tsx
@@ -0,0 +1,59 @@
+import { CheckCircle2, XCircle, AlertCircle } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+
+interface StatusBadgeProps {
+  status:
+    | 'installed'
+    | 'not_installed'
+    | 'checking'
+    | 'authenticated'
+    | 'not_authenticated'
+    | 'error'
+    | 'unverified';
+  label: string;
+}
+
+export function StatusBadge({ status, label }: StatusBadgeProps) {
+  const getStatusConfig = () => {
+    switch (status) {
+      case 'installed':
+      case 'authenticated':
+        return {
+          icon: <CheckCircle2 className="w-4 h-4" />,
+          className: 'bg-green-500/10 text-green-500 border-green-500/20',
+        };
+      case 'not_installed':
+      case 'not_authenticated':
+        return {
+          icon: <XCircle className="w-4 h-4" />,
+          className: 'bg-red-500/10 text-red-500 border-red-500/20',
+        };
+      case 'error':
+        return {
+          icon: <XCircle className="w-4 h-4" />,
+          className: 'bg-red-500/10 text-red-500 border-red-500/20',
+        };
+      case 'checking':
+        return {
+          icon: <Spinner size="sm" />,
+          className: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20',
+        };
+      case 'unverified':
+        return {
+          icon: <AlertCircle className="w-4 h-4" />,
+          className: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20',
+        };
+    }
+  };
+
+  const config = getStatusConfig();
+
+  return (
+    <div
+      className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border ${config.className}`}
+    >
+      {config.icon}
+      {label}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/components/status-row.tsx b/temp_repo/apps/ui/src/components/views/setup-view/components/status-row.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..159d6e9cd5c9bc0d1847a7b63e652843ac2f0101
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/components/status-row.tsx
@@ -0,0 +1,20 @@
+import { StatusBadge } from './status-badge';
+
+interface StatusRowProps {
+  label: string;
+  status: 'checking' | 'installed' | 'not_installed' | 'authenticated' | 'not_authenticated';
+  statusLabel: string;
+  metadata?: string; // e.g., "(Subscription Token)"
+}
+
+export function StatusRow({ label, status, statusLabel, metadata }: StatusRowProps) {
+  return (
+    <div className="flex items-center justify-between">
+      <span className="text-sm text-foreground">{label}</span>
+      <div className="flex items-center gap-2">
+        <StatusBadge status={status} label={statusLabel} />
+        {metadata && <span className="text-xs text-muted-foreground">{metadata}</span>}
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/components/step-indicator.tsx b/temp_repo/apps/ui/src/components/views/setup-view/components/step-indicator.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6522423387e5c78ddc09fd54b0b559f14efe765e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/components/step-indicator.tsx
@@ -0,0 +1,19 @@
+interface StepIndicatorProps {
+  currentStep: number;
+  totalSteps: number;
+}
+
+export function StepIndicator({ currentStep, totalSteps }: StepIndicatorProps) {
+  return (
+    <div className="flex items-center justify-center gap-2 mb-8">
+      {Array.from({ length: totalSteps }).map((_, index) => (
+        <div
+          key={index}
+          className={`h-2 rounded-full transition-all duration-300 ${
+            index <= currentStep ? 'w-8 bg-brand-500' : 'w-2 bg-muted-foreground/30'
+          }`}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/components/terminal-output.tsx b/temp_repo/apps/ui/src/components/views/setup-view/components/terminal-output.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c7a36bce2d16ea070e68141990c9be920d72e957
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/components/terminal-output.tsx
@@ -0,0 +1,18 @@
+interface TerminalOutputProps {
+  lines: string[];
+}
+
+export function TerminalOutput({ lines }: TerminalOutputProps) {
+  return (
+    <div className="bg-card border border-border rounded-lg p-4 font-mono text-sm max-h-48 overflow-y-auto">
+      {lines.map((line, index) => (
+        <div key={index} className="text-foreground">
+          <span className="text-primary">$</span> {line}
+        </div>
+      ))}
+      {lines.length === 0 && (
+        <div className="text-muted-foreground italic">Waiting for output...</div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/dialogs/index.ts b/temp_repo/apps/ui/src/components/views/setup-view/dialogs/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c762ecfecd6a101bc5bf513d4f3275273c3fb72c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/dialogs/index.ts
@@ -0,0 +1,2 @@
+// Re-export all setup dialog components for easier imports
+// (SetupTokenModal was removed - setup flow now uses inline API key entry)
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/hooks/index.ts b/temp_repo/apps/ui/src/components/views/setup-view/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..23710a301002e2c204ca3d9aa5cb0dde1b248a15
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/hooks/index.ts
@@ -0,0 +1,4 @@
+// Re-export all hooks for easier imports
+export { useCliStatus } from './use-cli-status';
+export { useCliInstallation } from './use-cli-installation';
+export { useTokenSave } from './use-token-save';
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/hooks/use-cli-installation.ts b/temp_repo/apps/ui/src/components/views/setup-view/hooks/use-cli-installation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6e632530e5bf56e83bea44b7274bff33c7471c3e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/hooks/use-cli-installation.ts
@@ -0,0 +1,110 @@
+import { useState, useCallback } from 'react';
+import { toast } from 'sonner';
+import { createLogger } from '@automaker/utils/logger';
+import type { ModelProvider } from '@automaker/types';
+import type { CliStatus } from '@/store/setup-store';
+
+const logger = createLogger('CliInstallation');
+
+interface InstallApiResult {
+  success: boolean;
+  message?: string;
+  error?: string;
+}
+
+interface InstallProgressEvent {
+  cli?: string;
+  data?: string;
+  type?: string;
+}
+
+interface UseCliInstallationOptions {
+  cliType: ModelProvider;
+  installApi: () => Promise<InstallApiResult>;
+  onProgressEvent?: (
+    callback: (progress: InstallProgressEvent) => void
+  ) => (() => void) | undefined;
+  onSuccess?: () => void;
+  getStoreState?: () => CliStatus | null;
+}
+
+export function useCliInstallation({
+  cliType,
+  installApi,
+  onProgressEvent,
+  onSuccess,
+  getStoreState,
+}: UseCliInstallationOptions) {
+  const [isInstalling, setIsInstalling] = useState(false);
+  const [installProgress, setInstallProgress] = useState<{ output: string[] }>({
+    output: [],
+  });
+
+  const install = useCallback(async () => {
+    setIsInstalling(true);
+    setInstallProgress({ output: [] });
+
+    try {
+      let unsubscribe: (() => void) | undefined;
+
+      if (onProgressEvent) {
+        unsubscribe = onProgressEvent((progress: InstallProgressEvent) => {
+          if (progress.cli === cliType) {
+            setInstallProgress((prev) => ({
+              output: [...prev.output, progress.data || progress.type || ''],
+            }));
+          }
+        });
+      }
+
+      const result = await installApi();
+      unsubscribe?.();
+
+      if (result.success) {
+        if (cliType === 'claude' && onSuccess && getStoreState) {
+          // Claude-specific: retry logic to detect installation
+          let retries = 5;
+          let detected = false;
+
+          await new Promise((resolve) => setTimeout(resolve, 1500));
+
+          for (let i = 0; i < retries; i++) {
+            await onSuccess();
+            await new Promise((resolve) => setTimeout(resolve, 300));
+
+            const currentStatus = getStoreState();
+            if (currentStatus?.installed) {
+              detected = true;
+              toast.success(`${cliType} CLI installed and detected successfully`);
+              break;
+            }
+
+            if (i < retries - 1) {
+              await new Promise((resolve) => setTimeout(resolve, 2000 + i * 500));
+            }
+          }
+
+          if (!detected) {
+            toast.success(`${cliType} CLI installation completed`, {
+              description:
+                'The CLI was installed but may need a terminal restart to be detected. You can continue with authentication if you have a token.',
+              duration: 7000,
+            });
+          }
+        } else {
+          toast.success(`${cliType} CLI installed successfully`);
+          onSuccess?.();
+        }
+      } else {
+        toast.error('Installation failed', { description: result.error });
+      }
+    } catch (error) {
+      logger.error(`Failed to install ${cliType}:`, error);
+      toast.error('Installation failed');
+    } finally {
+      setIsInstalling(false);
+    }
+  }, [cliType, installApi, onProgressEvent, onSuccess, getStoreState]);
+
+  return { isInstalling, installProgress, install };
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/hooks/use-cli-status.ts b/temp_repo/apps/ui/src/components/views/setup-view/hooks/use-cli-status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..238c9a7eae079201e3243ef273850719b8f217f6
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/hooks/use-cli-status.ts
@@ -0,0 +1,132 @@
+import { useState, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import type { ModelProvider } from '@automaker/types';
+import type { CliStatus, ClaudeAuthStatus, CodexAuthStatus } from '@/store/setup-store';
+
+interface CliStatusApiResponse {
+  success: boolean;
+  status?: string;
+  installed?: boolean;
+  method?: string;
+  version?: string;
+  path?: string;
+  auth?: {
+    authenticated: boolean;
+    method: string;
+    hasCredentialsFile?: boolean;
+    hasToken?: boolean;
+    hasStoredOAuthToken?: boolean;
+    hasStoredApiKey?: boolean;
+    hasEnvApiKey?: boolean;
+    hasEnvOAuthToken?: boolean;
+    hasCliAuth?: boolean;
+    hasRecentActivity?: boolean;
+    hasAuthFile?: boolean;
+    hasApiKey?: boolean;
+    hasOAuthToken?: boolean;
+  };
+  error?: string;
+}
+
+interface UseCliStatusOptions {
+  cliType: ModelProvider;
+  statusApi: () => Promise<CliStatusApiResponse>;
+  setCliStatus: (status: CliStatus | null) => void;
+  setAuthStatus: (status: ClaudeAuthStatus | CodexAuthStatus | null) => void;
+}
+
+const VALID_AUTH_METHODS = {
+  claude: [
+    'oauth_token_env',
+    'oauth_token',
+    'api_key',
+    'api_key_env',
+    'credentials_file',
+    'cli_authenticated',
+    'none',
+  ],
+  codex: ['cli_authenticated', 'api_key', 'api_key_env', 'none'],
+} as const;
+
+// Create logger outside of the hook to avoid re-creating it on every render
+const logger = createLogger('CliStatus');
+
+export function useCliStatus({
+  cliType,
+  statusApi,
+  setCliStatus,
+  setAuthStatus,
+}: UseCliStatusOptions) {
+  const [isChecking, setIsChecking] = useState(false);
+
+  const checkStatus = useCallback(async () => {
+    logger.info(`Starting status check for ${cliType}...`);
+    setIsChecking(true);
+    try {
+      const result = await statusApi();
+      logger.info(`Raw status result for ${cliType}:`, result);
+
+      if (result.success) {
+        // Handle both response formats:
+        // - Claude API returns {status: 'installed' | 'not_installed'}
+        // - Codex API returns {installed: boolean}
+        const isInstalled =
+          typeof result.installed === 'boolean' ? result.installed : result.status === 'installed';
+        const cliStatus = {
+          installed: isInstalled,
+          path: result.path || null,
+          version: result.version || null,
+          method: result.method || 'none',
+        };
+        logger.info(`CLI Status for ${cliType}:`, cliStatus);
+        setCliStatus(cliStatus);
+
+        if (result.auth) {
+          if (cliType === 'claude') {
+            // Validate method is one of the expected Claude values, default to "none"
+            const validMethods = VALID_AUTH_METHODS.claude;
+            type ClaudeAuthMethod = (typeof validMethods)[number];
+            const method: ClaudeAuthMethod = validMethods.includes(
+              result.auth.method as ClaudeAuthMethod
+            )
+              ? (result.auth.method as ClaudeAuthMethod)
+              : 'none';
+
+            setAuthStatus({
+              authenticated: result.auth.authenticated,
+              method,
+              hasCredentialsFile: false,
+              oauthTokenValid: result.auth.hasStoredOAuthToken || result.auth.hasEnvOAuthToken,
+              apiKeyValid: result.auth.hasStoredApiKey || result.auth.hasEnvApiKey,
+              hasEnvOAuthToken: result.auth.hasEnvOAuthToken,
+              hasEnvApiKey: result.auth.hasEnvApiKey,
+            });
+          } else {
+            // Validate method is one of the expected Codex values, default to "none"
+            const validMethods = VALID_AUTH_METHODS.codex;
+            type CodexAuthMethod = (typeof validMethods)[number];
+            const method: CodexAuthMethod = validMethods.includes(
+              result.auth.method as CodexAuthMethod
+            )
+              ? (result.auth.method as CodexAuthMethod)
+              : 'none';
+
+            setAuthStatus({
+              authenticated: result.auth.authenticated,
+              method,
+              hasAuthFile: result.auth.hasAuthFile ?? false,
+              hasApiKey: result.auth.hasApiKey ?? false,
+              hasEnvApiKey: result.auth.hasEnvApiKey ?? false,
+            });
+          }
+        }
+      }
+    } catch (error) {
+      logger.error(`Failed to check status for ${cliType}:`, error);
+    } finally {
+      setIsChecking(false);
+    }
+  }, [cliType, statusApi, setCliStatus, setAuthStatus]);
+
+  return { isChecking, checkStatus };
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/hooks/use-token-save.ts b/temp_repo/apps/ui/src/components/views/setup-view/hooks/use-token-save.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8168f4454b1579906d2ab6a551380deb620ac054
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/hooks/use-token-save.ts
@@ -0,0 +1,59 @@
+import { useState, useCallback } from 'react';
+import { toast } from 'sonner';
+import { getElectronAPI } from '@/lib/electron';
+import { createLogger } from '@automaker/utils/logger';
+
+const logger = createLogger('TokenSave');
+
+interface UseTokenSaveOptions {
+  provider: string; // e.g., "anthropic_oauth_token", "anthropic", "openai"
+  onSuccess?: () => void;
+}
+
+export function useTokenSave({ provider, onSuccess }: UseTokenSaveOptions) {
+  const [isSaving, setIsSaving] = useState(false);
+
+  const saveToken = useCallback(
+    async (tokenValue: string) => {
+      if (!tokenValue.trim()) {
+        toast.error('Please enter a valid token');
+        return false;
+      }
+
+      setIsSaving(true);
+      try {
+        const api = getElectronAPI();
+        const setupApi = api.setup;
+
+        if (setupApi?.storeApiKey) {
+          const result = await setupApi.storeApiKey(provider, tokenValue);
+          logger.info(`Store result for ${provider}:`, result);
+
+          if (result.success) {
+            const tokenType = provider.includes('oauth') ? 'subscription token' : 'API key';
+            toast.success(`${tokenType} saved successfully`);
+            onSuccess?.();
+            return true;
+          } else {
+            toast.error('Failed to save token', { description: result.error });
+            return false;
+          }
+        } else {
+          // Web mode fallback - just show success
+          toast.success('Token saved');
+          onSuccess?.();
+          return true;
+        }
+      } catch (error) {
+        logger.error(`Failed to save ${provider}:`, error);
+        toast.error('Failed to save token');
+        return false;
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [provider, onSuccess]
+  );
+
+  return { isSaving, saveToken };
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/steps/claude-setup-step.tsx b/temp_repo/apps/ui/src/components/views/setup-view/steps/claude-setup-step.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0b4799d66cc27e5a941f285abdaecf0658d5ab8d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/steps/claude-setup-step.tsx
@@ -0,0 +1,692 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { useSetupStore } from '@/store/setup-store';
+import { useAppStore } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import {
+  CheckCircle2,
+  Key,
+  ArrowRight,
+  ArrowLeft,
+  ExternalLink,
+  Copy,
+  RefreshCw,
+  Download,
+  Info,
+  ShieldCheck,
+  XCircle,
+  Trash2,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { toast } from 'sonner';
+import { StatusBadge, TerminalOutput } from '../components';
+import { useCliStatus, useCliInstallation, useTokenSave } from '../hooks';
+import { AnthropicIcon } from '@/components/ui/provider-icon';
+
+interface ClaudeSetupStepProps {
+  onNext: () => void;
+  onBack: () => void;
+  onSkip: () => void;
+}
+
+type VerificationStatus = 'idle' | 'verifying' | 'verified' | 'error';
+
+// Claude Setup Step
+// Users can either:
+// 1. Have Claude CLI installed and authenticated (verified by running a test query)
+// 2. Provide an Anthropic API key manually
+export function ClaudeSetupStep({ onNext, onBack, onSkip }: ClaudeSetupStepProps) {
+  const {
+    claudeCliStatus,
+    claudeAuthStatus,
+    setClaudeCliStatus,
+    setClaudeAuthStatus,
+    setClaudeInstallProgress,
+  } = useSetupStore();
+  const { setApiKeys, apiKeys } = useAppStore();
+
+  const [apiKey, setApiKey] = useState('');
+
+  // CLI Verification state
+  const [cliVerificationStatus, setCliVerificationStatus] = useState<VerificationStatus>('idle');
+  const [cliVerificationError, setCliVerificationError] = useState<string | null>(null);
+  const [cliAuthType, setCliAuthType] = useState<'oauth' | 'cli' | null>(null);
+
+  // API Key Verification state
+  const [apiKeyVerificationStatus, setApiKeyVerificationStatus] =
+    useState<VerificationStatus>('idle');
+  const [apiKeyVerificationError, setApiKeyVerificationError] = useState<string | null>(null);
+
+  // Delete API Key state
+  const [isDeletingApiKey, setIsDeletingApiKey] = useState(false);
+
+  // Memoize API functions to prevent infinite loops
+  const statusApi = useCallback(
+    () => getElectronAPI().setup?.getClaudeStatus() || Promise.reject(),
+    []
+  );
+
+  const installApi = useCallback(
+    () => getElectronAPI().setup?.installClaude() || Promise.reject(),
+    []
+  );
+
+  const getStoreState = useCallback(() => useSetupStore.getState().claudeCliStatus, []);
+
+  // Use custom hooks
+  const { isChecking, checkStatus } = useCliStatus({
+    cliType: 'claude',
+    statusApi,
+    setCliStatus: setClaudeCliStatus,
+    setAuthStatus: setClaudeAuthStatus,
+  });
+
+  const onInstallSuccess = useCallback(() => {
+    checkStatus();
+  }, [checkStatus]);
+
+  const { isInstalling, installProgress, install } = useCliInstallation({
+    cliType: 'claude',
+    installApi,
+    onProgressEvent: getElectronAPI().setup?.onInstallProgress,
+    onSuccess: onInstallSuccess,
+    getStoreState,
+  });
+
+  const { isSaving: isSavingApiKey, saveToken: saveApiKeyToken } = useTokenSave({
+    provider: 'anthropic',
+    onSuccess: () => {
+      setClaudeAuthStatus({
+        authenticated: true,
+        method: 'api_key',
+        hasCredentialsFile: false,
+        apiKeyValid: true,
+      });
+      setApiKeys({ ...apiKeys, anthropic: apiKey });
+      toast.success('API key saved successfully!');
+    },
+  });
+
+  // Verify CLI authentication by running a test query (uses CLI credentials only, not API key)
+  const verifyCliAuth = useCallback(async () => {
+    setCliVerificationStatus('verifying');
+    setCliVerificationError(null);
+    setCliAuthType(null);
+
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.verifyClaudeAuth) {
+        setCliVerificationStatus('error');
+        setCliVerificationError('Verification API not available');
+        return;
+      }
+
+      // Pass "cli" to verify CLI authentication only (ignores any API key)
+      const result = await api.setup.verifyClaudeAuth('cli');
+
+      // Check for "Limit reached" error - treat as unverified
+      const hasLimitReachedError =
+        result.error?.toLowerCase().includes('limit reached') ||
+        result.error?.toLowerCase().includes('rate limit');
+
+      if (result.authenticated && !hasLimitReachedError) {
+        setCliVerificationStatus('verified');
+        // Store the auth type for displaying specific success message
+        const authType = result.authType === 'oauth' ? 'oauth' : 'cli';
+        setCliAuthType(authType);
+        setClaudeAuthStatus({
+          authenticated: true,
+          method: authType === 'oauth' ? 'oauth_token' : 'cli_authenticated',
+          hasCredentialsFile: claudeAuthStatus?.hasCredentialsFile || false,
+          oauthTokenValid: authType === 'oauth',
+        });
+        // Show specific success message based on auth type
+        if (authType === 'oauth') {
+          toast.success('Claude Code subscription detected and verified!');
+        } else {
+          toast.success('Claude CLI authentication verified!');
+        }
+      } else {
+        setCliVerificationStatus('error');
+        setCliVerificationError(
+          hasLimitReachedError
+            ? 'Rate limit reached. Please try again later.'
+            : result.error || 'Authentication failed'
+        );
+        setClaudeAuthStatus({
+          authenticated: false,
+          method: 'none',
+          hasCredentialsFile: claudeAuthStatus?.hasCredentialsFile || false,
+        });
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Verification failed';
+      // Also check for limit reached in caught errors
+      const isLimitError =
+        errorMessage.toLowerCase().includes('limit reached') ||
+        errorMessage.toLowerCase().includes('rate limit');
+      setCliVerificationStatus('error');
+      setCliVerificationError(
+        isLimitError ? 'Rate limit reached. Please try again later.' : errorMessage
+      );
+    }
+  }, [claudeAuthStatus, setClaudeAuthStatus]);
+
+  // Verify API Key authentication (uses API key only)
+  const verifyApiKeyAuth = useCallback(async () => {
+    setApiKeyVerificationStatus('verifying');
+    setApiKeyVerificationError(null);
+
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.verifyClaudeAuth) {
+        setApiKeyVerificationStatus('error');
+        setApiKeyVerificationError('Verification API not available');
+        return;
+      }
+
+      // Pass "api_key" to verify API key authentication only
+      const result = await api.setup.verifyClaudeAuth('api_key');
+
+      if (result.authenticated) {
+        setApiKeyVerificationStatus('verified');
+        setClaudeAuthStatus({
+          authenticated: true,
+          method: 'api_key',
+          hasCredentialsFile: false,
+          apiKeyValid: true,
+        });
+        toast.success('API key authentication verified!');
+      } else {
+        setApiKeyVerificationStatus('error');
+        setApiKeyVerificationError(result.error || 'Authentication failed');
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Verification failed';
+      setApiKeyVerificationStatus('error');
+      setApiKeyVerificationError(errorMessage);
+    }
+  }, [setClaudeAuthStatus]);
+
+  // Delete API Key
+  const deleteApiKey = useCallback(async () => {
+    setIsDeletingApiKey(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.deleteApiKey) {
+        toast.error('Delete API not available');
+        return;
+      }
+
+      const result = await api.setup.deleteApiKey('anthropic');
+      if (result.success) {
+        // Clear local state
+        setApiKey('');
+        setApiKeys({ ...apiKeys, anthropic: '' });
+        setApiKeyVerificationStatus('idle');
+        setApiKeyVerificationError(null);
+        setClaudeAuthStatus({
+          authenticated: false,
+          method: 'none',
+          hasCredentialsFile: claudeAuthStatus?.hasCredentialsFile || false,
+        });
+        toast.success('API key deleted successfully');
+      } else {
+        toast.error(result.error || 'Failed to delete API key');
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to delete API key';
+      toast.error(errorMessage);
+    } finally {
+      setIsDeletingApiKey(false);
+    }
+  }, [apiKeys, setApiKeys, claudeAuthStatus, setClaudeAuthStatus]);
+
+  // Sync install progress to store
+  useEffect(() => {
+    setClaudeInstallProgress({
+      isInstalling,
+      output: installProgress.output,
+    });
+  }, [isInstalling, installProgress, setClaudeInstallProgress]);
+
+  // Check status on mount
+  useEffect(() => {
+    checkStatus();
+  }, [checkStatus]);
+
+  const copyCommand = (command: string) => {
+    navigator.clipboard.writeText(command);
+    toast.success('Command copied to clipboard');
+  };
+
+  // User is ready if either method is verified
+  const hasApiKey =
+    !!apiKeys.anthropic ||
+    claudeAuthStatus?.method === 'api_key' ||
+    claudeAuthStatus?.method === 'api_key_env';
+  const isCliVerified = cliVerificationStatus === 'verified';
+  const isApiKeyVerified = apiKeyVerificationStatus === 'verified';
+  const isReady = isCliVerified || isApiKeyVerified;
+
+  // Helper to get status badge for CLI
+  const getCliStatusBadge = () => {
+    if (cliVerificationStatus === 'verified') {
+      return <StatusBadge status="authenticated" label="Verified" />;
+    }
+    if (cliVerificationStatus === 'error') {
+      return <StatusBadge status="error" label="Error" />;
+    }
+    if (isChecking) {
+      return <StatusBadge status="checking" label="Checking..." />;
+    }
+    if (claudeCliStatus?.installed) {
+      // Installed but not yet verified - show yellow unverified badge
+      return <StatusBadge status="unverified" label="Unverified" />;
+    }
+    return <StatusBadge status="not_installed" label="Not Installed" />;
+  };
+
+  // Helper to get status badge for API Key
+  const getApiKeyStatusBadge = () => {
+    if (apiKeyVerificationStatus === 'verified') {
+      return <StatusBadge status="authenticated" label="Verified" />;
+    }
+    if (apiKeyVerificationStatus === 'error') {
+      return <StatusBadge status="error" label="Error" />;
+    }
+    if (hasApiKey) {
+      // API key configured but not yet verified - show yellow unverified badge
+      return <StatusBadge status="unverified" label="Unverified" />;
+    }
+    return <StatusBadge status="not_authenticated" label="Not Set" />;
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center mb-8">
+        <div className="w-16 h-16 rounded-xl bg-brand-500/10 flex items-center justify-center mx-auto mb-4">
+          <AnthropicIcon className="w-8 h-8 text-brand-500" />
+        </div>
+        <h2 className="text-2xl font-bold text-foreground mb-2">Claude Code Setup</h2>
+        <p className="text-muted-foreground">Configure for code generation</p>
+      </div>
+
+      {/* Requirements Info */}
+      <Card className="bg-card border-border">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg flex items-center gap-2">
+              <Info className="w-5 h-5" />
+              Authentication Methods
+            </CardTitle>
+            <Button variant="ghost" size="sm" onClick={checkStatus} disabled={isChecking}>
+              {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+            </Button>
+          </div>
+          <CardDescription>
+            Choose one of the following methods to authenticate with Claude:
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Accordion type="single" collapsible className="w-full">
+            {/* Option 1: Claude CLI */}
+            <AccordionItem value="cli" className="border-border">
+              <AccordionTrigger className="hover:no-underline">
+                <div className="flex items-center justify-between w-full pr-4">
+                  <div className="flex items-center gap-3">
+                    <AnthropicIcon
+                      className={`w-5 h-5 ${
+                        cliVerificationStatus === 'verified'
+                          ? 'text-green-500'
+                          : 'text-muted-foreground'
+                      }`}
+                    />
+                    <div className="text-left">
+                      <p className="font-medium text-foreground">Claude CLI</p>
+                      <p className="text-sm text-muted-foreground">Use Claude Code subscription</p>
+                    </div>
+                  </div>
+                  {getCliStatusBadge()}
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="pt-4 space-y-4">
+                {/* CLI Install Section */}
+                {!claudeCliStatus?.installed && (
+                  <div className="space-y-4 p-4 rounded-lg bg-muted/30 border border-border">
+                    <div className="flex items-center gap-2">
+                      <Download className="w-4 h-4 text-muted-foreground" />
+                      <p className="font-medium text-foreground">Install Claude CLI</p>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label className="text-sm text-muted-foreground">macOS / Linux</Label>
+                      <div className="flex items-center gap-2">
+                        <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                          curl -fsSL https://claude.ai/install.sh | bash
+                        </code>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() =>
+                            copyCommand('curl -fsSL https://claude.ai/install.sh | bash')
+                          }
+                        >
+                          <Copy className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label className="text-sm text-muted-foreground">Windows</Label>
+                      <div className="flex items-center gap-2">
+                        <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                          irm https://claude.ai/install.ps1 | iex
+                        </code>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => copyCommand('irm https://claude.ai/install.ps1 | iex')}
+                        >
+                          <Copy className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    </div>
+
+                    {isInstalling && <TerminalOutput lines={installProgress.output} />}
+
+                    <Button
+                      onClick={install}
+                      disabled={isInstalling}
+                      className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                      data-testid="install-claude-button"
+                    >
+                      {isInstalling ? (
+                        <>
+                          <Spinner size="sm" variant="foreground" className="mr-2" />
+                          Installing...
+                        </>
+                      ) : (
+                        <>
+                          <Download className="w-4 h-4 mr-2" />
+                          Auto Install
+                        </>
+                      )}
+                    </Button>
+                  </div>
+                )}
+
+                {/* CLI Version Info */}
+                {claudeCliStatus?.installed && claudeCliStatus?.version && (
+                  <p className="text-sm text-muted-foreground">
+                    Version: {claudeCliStatus.version}
+                  </p>
+                )}
+
+                {/* CLI Verification Status */}
+                {cliVerificationStatus === 'verifying' && (
+                  <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+                    <Spinner size="md" />
+                    <div>
+                      <p className="font-medium text-foreground">Verifying CLI authentication...</p>
+                      <p className="text-sm text-muted-foreground">Running a test query</p>
+                    </div>
+                  </div>
+                )}
+
+                {cliVerificationStatus === 'verified' && (
+                  <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+                    <CheckCircle2 className="w-5 h-5 text-green-500" />
+                    <div>
+                      <p className="font-medium text-foreground">
+                        {cliAuthType === 'oauth'
+                          ? 'Claude Code subscription verified!'
+                          : 'CLI Authentication verified!'}
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        {cliAuthType === 'oauth'
+                          ? 'Your Claude Code subscription is active and ready to use.'
+                          : 'Your Claude CLI is working correctly.'}
+                      </p>
+                    </div>
+                  </div>
+                )}
+
+                {cliVerificationStatus === 'error' && cliVerificationError && (
+                  <div className="flex items-start gap-3 p-4 rounded-lg bg-red-500/10 border border-red-500/20">
+                    <XCircle className="w-5 h-5 text-red-500 shrink-0" />
+                    <div className="flex-1">
+                      <p className="font-medium text-foreground">Verification failed</p>
+                      <p className="text-sm text-red-400 mt-1">{cliVerificationError}</p>
+                      {cliVerificationError.includes('login') && (
+                        <div className="mt-3 p-3 rounded bg-muted/50">
+                          <p className="text-sm text-muted-foreground mb-2">
+                            Run this command in your terminal:
+                          </p>
+                          <div className="flex items-center gap-2">
+                            <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                              claude login
+                            </code>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => copyCommand('claude login')}
+                            >
+                              <Copy className="w-4 h-4" />
+                            </Button>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {/* CLI Verify Button - Hide if CLI is verified */}
+                {cliVerificationStatus !== 'verified' && (
+                  <Button
+                    onClick={verifyCliAuth}
+                    disabled={cliVerificationStatus === 'verifying' || !claudeCliStatus?.installed}
+                    className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                    data-testid="verify-cli-button"
+                  >
+                    {cliVerificationStatus === 'verifying' ? (
+                      <>
+                        <Spinner size="sm" className="mr-2" />
+                        Verifying...
+                      </>
+                    ) : cliVerificationStatus === 'error' ? (
+                      <>
+                        <RefreshCw className="w-4 h-4 mr-2" />
+                        Retry Verification
+                      </>
+                    ) : (
+                      <>
+                        <ShieldCheck className="w-4 h-4 mr-2" />
+                        Verify CLI Authentication
+                      </>
+                    )}
+                  </Button>
+                )}
+              </AccordionContent>
+            </AccordionItem>
+
+            {/* Option 2: API Key */}
+            <AccordionItem value="api-key" className="border-border">
+              <AccordionTrigger className="hover:no-underline">
+                <div className="flex items-center justify-between w-full pr-4">
+                  <div className="flex items-center gap-3">
+                    <Key
+                      className={`w-5 h-5 ${
+                        apiKeyVerificationStatus === 'verified'
+                          ? 'text-green-500'
+                          : 'text-muted-foreground'
+                      }`}
+                    />
+                    <div className="text-left">
+                      <p className="font-medium text-foreground">Anthropic API Key</p>
+                      <p className="text-sm text-muted-foreground">
+                        Pay-per-use with your own API key
+                      </p>
+                    </div>
+                  </div>
+                  {getApiKeyStatusBadge()}
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="pt-4 space-y-4">
+                {/* API Key Input */}
+                <div className="space-y-4 p-4 rounded-lg bg-muted/30 border border-border">
+                  <div className="space-y-2">
+                    <Label htmlFor="anthropic-key" className="text-foreground">
+                      Anthropic API Key
+                    </Label>
+                    <Input
+                      id="anthropic-key"
+                      type="password"
+                      placeholder="sk-ant-..."
+                      value={apiKey}
+                      onChange={(e) => setApiKey(e.target.value)}
+                      className="bg-input border-border text-foreground"
+                      data-testid="anthropic-api-key-input"
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      Don&apos;t have an API key?{' '}
+                      <a
+                        href="https://console.anthropic.com/settings/keys"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-brand-500 hover:underline"
+                      >
+                        Get one from Anthropic Console
+                        <ExternalLink className="w-3 h-3 inline ml-1" />
+                      </a>
+                    </p>
+                  </div>
+
+                  <div className="flex gap-2">
+                    <Button
+                      onClick={() => saveApiKeyToken(apiKey)}
+                      disabled={isSavingApiKey || !apiKey.trim()}
+                      className="flex-1 bg-brand-500 hover:bg-brand-600 text-white"
+                      data-testid="save-anthropic-key-button"
+                    >
+                      {isSavingApiKey ? (
+                        <>
+                          <Spinner size="sm" variant="foreground" className="mr-2" />
+                          Saving...
+                        </>
+                      ) : (
+                        'Save API Key'
+                      )}
+                    </Button>
+                    {hasApiKey && (
+                      <Button
+                        onClick={deleteApiKey}
+                        disabled={isDeletingApiKey}
+                        variant="outline"
+                        className="border-red-500/50 text-red-500 hover:bg-red-500/10 hover:text-red-400"
+                        data-testid="delete-anthropic-key-button"
+                      >
+                        {isDeletingApiKey ? <Spinner size="sm" /> : <Trash2 className="w-4 h-4" />}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+
+                {/* API Key Verification Status */}
+                {apiKeyVerificationStatus === 'verifying' && (
+                  <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+                    <Spinner size="md" />
+                    <div>
+                      <p className="font-medium text-foreground">Verifying API key...</p>
+                      <p className="text-sm text-muted-foreground">Running a test query</p>
+                    </div>
+                  </div>
+                )}
+
+                {apiKeyVerificationStatus === 'verified' && (
+                  <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+                    <CheckCircle2 className="w-5 h-5 text-green-500" />
+                    <div>
+                      <p className="font-medium text-foreground">API Key verified!</p>
+                      <p className="text-sm text-muted-foreground">
+                        Your API key is working correctly.
+                      </p>
+                    </div>
+                  </div>
+                )}
+
+                {apiKeyVerificationStatus === 'error' && apiKeyVerificationError && (
+                  <div className="flex items-start gap-3 p-4 rounded-lg bg-red-500/10 border border-red-500/20">
+                    <XCircle className="w-5 h-5 text-red-500 shrink-0" />
+                    <div className="flex-1">
+                      <p className="font-medium text-foreground">Verification failed</p>
+                      <p className="text-sm text-red-400 mt-1">{apiKeyVerificationError}</p>
+                    </div>
+                  </div>
+                )}
+
+                {/* API Key Verify Button - Hide if API key is verified */}
+                {apiKeyVerificationStatus !== 'verified' && (
+                  <Button
+                    onClick={verifyApiKeyAuth}
+                    disabled={apiKeyVerificationStatus === 'verifying' || !hasApiKey}
+                    className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                    data-testid="verify-api-key-button"
+                  >
+                    {apiKeyVerificationStatus === 'verifying' ? (
+                      <>
+                        <Spinner size="sm" className="mr-2" />
+                        Verifying...
+                      </>
+                    ) : apiKeyVerificationStatus === 'error' ? (
+                      <>
+                        <RefreshCw className="w-4 h-4 mr-2" />
+                        Retry Verification
+                      </>
+                    ) : (
+                      <>
+                        <ShieldCheck className="w-4 h-4 mr-2" />
+                        Verify API Key
+                      </>
+                    )}
+                  </Button>
+                )}
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </CardContent>
+      </Card>
+
+      {/* Navigation */}
+      <div className="flex justify-between pt-4">
+        <Button variant="ghost" onClick={onBack} className="text-muted-foreground">
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          Back
+        </Button>
+        <div className="flex gap-2">
+          <Button variant="ghost" onClick={onSkip} className="text-muted-foreground">
+            Skip for now
+          </Button>
+          <Button
+            onClick={onNext}
+            disabled={!isReady}
+            className="bg-brand-500 hover:bg-brand-600 text-white disabled:opacity-50 disabled:cursor-not-allowed"
+            data-testid="claude-next-button"
+          >
+            Continue
+            <ArrowRight className="w-4 h-4 ml-2" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/steps/cli-setup-step.tsx b/temp_repo/apps/ui/src/components/views/setup-view/steps/cli-setup-step.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..878148a2da51434da2661359532fb757307f6684
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/steps/cli-setup-step.tsx
@@ -0,0 +1,836 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { useAppStore } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import {
+  CheckCircle2,
+  Key,
+  ArrowRight,
+  ArrowLeft,
+  ExternalLink,
+  Copy,
+  RefreshCw,
+  Download,
+  Info,
+  ShieldCheck,
+  XCircle,
+  Trash2,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { toast } from 'sonner';
+import { StatusBadge, TerminalOutput } from '../components';
+import { useCliStatus, useCliInstallation, useTokenSave } from '../hooks';
+import type { ApiKeys } from '@/store/app-store';
+import type { ModelProvider } from '@/store/app-store';
+import type { ProviderKey } from '@/config/api-providers';
+import type {
+  CliStatus,
+  InstallProgress,
+  ClaudeAuthStatus,
+  CodexAuthStatus,
+} from '@/store/setup-store';
+import { PROVIDER_ICON_COMPONENTS } from '@/components/ui/provider-icon';
+
+type VerificationStatus = 'idle' | 'verifying' | 'verified' | 'error';
+
+type CliSetupAuthStatus = ClaudeAuthStatus | CodexAuthStatus;
+
+interface CliStatusApiResponse {
+  success: boolean;
+  status?: 'installed' | 'not_installed';
+  installed?: boolean;
+  method?: string;
+  version?: string;
+  path?: string;
+  auth?: {
+    authenticated: boolean;
+    method: string;
+    hasCredentialsFile?: boolean;
+    hasStoredOAuthToken?: boolean;
+    hasStoredApiKey?: boolean;
+    hasEnvApiKey?: boolean;
+    hasEnvOAuthToken?: boolean;
+    hasAuthFile?: boolean;
+    hasApiKey?: boolean;
+  };
+  error?: string;
+}
+
+interface InstallApiResponse {
+  success: boolean;
+  message?: string;
+  error?: string;
+}
+
+interface CliSetupConfig {
+  cliType: ModelProvider;
+  displayName: string;
+  cliLabel: string;
+  cliDescription: string;
+  apiKeyLabel: string;
+  apiKeyDescription: string;
+  apiKeyProvider: ProviderKey;
+  apiKeyPlaceholder: string;
+  apiKeyDocsUrl: string;
+  apiKeyDocsLabel: string;
+  installCommands: {
+    macos: string;
+    windows: string;
+  };
+  cliLoginCommand: string;
+  testIds: {
+    installButton: string;
+    verifyCliButton: string;
+    verifyApiKeyButton: string;
+    apiKeyInput: string;
+    saveApiKeyButton: string;
+    deleteApiKeyButton: string;
+    nextButton: string;
+  };
+  buildCliAuthStatus: (previous: CliSetupAuthStatus | null) => CliSetupAuthStatus;
+  buildApiKeyAuthStatus: (previous: CliSetupAuthStatus | null) => CliSetupAuthStatus;
+  buildClearedAuthStatus: (previous: CliSetupAuthStatus | null) => CliSetupAuthStatus;
+  statusApi: () => Promise<CliStatusApiResponse>;
+  installApi: () => Promise<InstallApiResponse>;
+  verifyAuthApi: (
+    method: 'cli' | 'api_key',
+    apiKey?: string
+  ) => Promise<{
+    success: boolean;
+    authenticated: boolean;
+    error?: string;
+    details?: string;
+  }>;
+  apiKeyHelpText: string;
+}
+
+interface CliSetupStateHandlers {
+  cliStatus: CliStatus | null;
+  authStatus: CliSetupAuthStatus | null;
+  setCliStatus: (status: CliStatus | null) => void;
+  setAuthStatus: (status: CliSetupAuthStatus | null) => void;
+  setInstallProgress: (progress: Partial<InstallProgress>) => void;
+  getStoreState: () => CliStatus | null;
+}
+
+interface CliSetupStepProps {
+  config: CliSetupConfig;
+  state: CliSetupStateHandlers;
+  onNext: () => void;
+  onBack: () => void;
+  onSkip: () => void;
+}
+
+export function CliSetupStep({ config, state, onNext, onBack, onSkip }: CliSetupStepProps) {
+  const { apiKeys, setApiKeys } = useAppStore();
+  const { cliStatus, authStatus, setCliStatus, setAuthStatus, setInstallProgress, getStoreState } =
+    state;
+
+  const [apiKey, setApiKey] = useState('');
+
+  const [cliVerificationStatus, setCliVerificationStatus] = useState<VerificationStatus>('idle');
+  const [cliVerificationError, setCliVerificationError] = useState<string | null>(null);
+
+  const [apiKeyVerificationStatus, setApiKeyVerificationStatus] =
+    useState<VerificationStatus>('idle');
+  const [apiKeyVerificationError, setApiKeyVerificationError] = useState<string | null>(null);
+
+  const [isDeletingApiKey, setIsDeletingApiKey] = useState(false);
+
+  const statusApi = useCallback(() => config.statusApi(), [config]);
+  const installApi = useCallback(() => config.installApi(), [config]);
+
+  const { isChecking, checkStatus } = useCliStatus({
+    cliType: config.cliType,
+    statusApi,
+    setCliStatus,
+    setAuthStatus,
+  });
+
+  const onInstallSuccess = useCallback(() => {
+    checkStatus();
+  }, [checkStatus]);
+
+  const { isInstalling, installProgress, install } = useCliInstallation({
+    cliType: config.cliType,
+    installApi,
+    onProgressEvent: getElectronAPI().setup?.onInstallProgress,
+    onSuccess: onInstallSuccess,
+    getStoreState,
+  });
+
+  const { isSaving: isSavingApiKey, saveToken: saveApiKeyToken } = useTokenSave({
+    provider: config.apiKeyProvider,
+    onSuccess: () => {
+      setAuthStatus(config.buildApiKeyAuthStatus(authStatus));
+      setApiKeys({ ...apiKeys, [config.apiKeyProvider]: apiKey });
+      toast.success('API key saved successfully!');
+    },
+  });
+
+  const verifyCliAuth = useCallback(async () => {
+    setCliVerificationStatus('verifying');
+    setCliVerificationError(null);
+
+    try {
+      const result = await config.verifyAuthApi('cli');
+
+      const hasLimitOrBillingError =
+        result.error?.toLowerCase().includes('limit reached') ||
+        result.error?.toLowerCase().includes('rate limit') ||
+        result.error?.toLowerCase().includes('credit balance') ||
+        result.error?.toLowerCase().includes('billing');
+
+      if (result.authenticated) {
+        // Auth succeeded - even if rate limited or billing issue
+        setCliVerificationStatus('verified');
+        setAuthStatus(config.buildCliAuthStatus(authStatus));
+
+        if (hasLimitOrBillingError) {
+          // Show warning but keep auth verified
+          toast.warning(result.error || 'Rate limit or billing issue');
+        } else {
+          toast.success(`${config.displayName} CLI authentication verified!`);
+        }
+      } else {
+        // Actual auth failure
+        setCliVerificationStatus('error');
+        // Include detailed error if available
+        const errorDisplay = result.details
+          ? `${result.error}\n\nDetails: ${result.details}`
+          : result.error || 'Authentication failed';
+        setCliVerificationError(errorDisplay);
+        setAuthStatus(config.buildClearedAuthStatus(authStatus));
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Verification failed';
+      setCliVerificationStatus('error');
+      setCliVerificationError(errorMessage);
+    }
+  }, [authStatus, config, setAuthStatus]);
+
+  const verifyApiKeyAuth = useCallback(async () => {
+    setApiKeyVerificationStatus('verifying');
+    setApiKeyVerificationError(null);
+
+    try {
+      const result = await config.verifyAuthApi('api_key', apiKey);
+
+      const hasLimitOrBillingError =
+        result.error?.toLowerCase().includes('limit reached') ||
+        result.error?.toLowerCase().includes('rate limit') ||
+        result.error?.toLowerCase().includes('credit balance') ||
+        result.error?.toLowerCase().includes('billing');
+
+      if (result.authenticated) {
+        // Auth succeeded - even if rate limited or billing issue
+        setApiKeyVerificationStatus('verified');
+        setAuthStatus(config.buildApiKeyAuthStatus(authStatus));
+
+        if (hasLimitOrBillingError) {
+          // Show warning but keep auth verified
+          toast.warning(result.error || 'Rate limit or billing issue');
+        } else {
+          toast.success('API key authentication verified!');
+        }
+      } else {
+        // Actual auth failure
+        setApiKeyVerificationStatus('error');
+        // Include detailed error if available
+        const errorDisplay = result.details
+          ? `${result.error}\n\nDetails: ${result.details}`
+          : result.error || 'Authentication failed';
+        setApiKeyVerificationError(errorDisplay);
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Verification failed';
+      setApiKeyVerificationStatus('error');
+      setApiKeyVerificationError(errorMessage);
+    }
+  }, [authStatus, config, setAuthStatus, apiKey]);
+
+  const deleteApiKey = useCallback(async () => {
+    setIsDeletingApiKey(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.deleteApiKey) {
+        toast.error('Delete API not available');
+        return;
+      }
+
+      const result = await api.setup.deleteApiKey(config.apiKeyProvider);
+      if (result.success) {
+        setApiKey('');
+        setApiKeys({ ...apiKeys, [config.apiKeyProvider]: '' });
+        setApiKeyVerificationStatus('idle');
+        setApiKeyVerificationError(null);
+        setAuthStatus(config.buildClearedAuthStatus(authStatus));
+        toast.success('API key deleted successfully');
+      } else {
+        toast.error(result.error || 'Failed to delete API key');
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to delete API key';
+      toast.error(errorMessage);
+    } finally {
+      setIsDeletingApiKey(false);
+    }
+  }, [apiKeys, authStatus, config, setApiKeys, setAuthStatus]);
+
+  useEffect(() => {
+    setInstallProgress({
+      isInstalling,
+      output: installProgress.output,
+    });
+  }, [isInstalling, installProgress, setInstallProgress]);
+
+  useEffect(() => {
+    checkStatus();
+  }, [checkStatus]);
+
+  const copyCommand = (command: string) => {
+    navigator.clipboard.writeText(command);
+    toast.success('Command copied to clipboard');
+  };
+
+  const hasApiKey =
+    !!(apiKeys as ApiKeys)[config.apiKeyProvider] ||
+    authStatus?.method === 'api_key' ||
+    authStatus?.method === 'api_key_env';
+  const isCliVerified = cliVerificationStatus === 'verified';
+  const isApiKeyVerified = apiKeyVerificationStatus === 'verified';
+  const isReady = isCliVerified || isApiKeyVerified;
+  const ProviderIcon = PROVIDER_ICON_COMPONENTS[config.cliType];
+
+  const getCliStatusBadge = () => {
+    if (cliVerificationStatus === 'verified') {
+      return <StatusBadge status="authenticated" label="Verified" />;
+    }
+    if (cliVerificationStatus === 'error') {
+      return <StatusBadge status="error" label="Error" />;
+    }
+    if (isChecking) {
+      return <StatusBadge status="checking" label="Checking..." />;
+    }
+    if (cliStatus?.installed) {
+      return <StatusBadge status="unverified" label="Unverified" />;
+    }
+    return <StatusBadge status="not_installed" label="Not Installed" />;
+  };
+
+  const getApiKeyStatusBadge = () => {
+    if (apiKeyVerificationStatus === 'verified') {
+      return <StatusBadge status="authenticated" label="Verified" />;
+    }
+    if (apiKeyVerificationStatus === 'error') {
+      return <StatusBadge status="error" label="Error" />;
+    }
+    if (hasApiKey) {
+      return <StatusBadge status="unverified" label="Unverified" />;
+    }
+    return <StatusBadge status="not_authenticated" label="Not Set" />;
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center mb-8">
+        <div className="w-16 h-16 rounded-xl bg-brand-500/10 flex items-center justify-center mx-auto mb-4">
+          <ProviderIcon className="w-8 h-8 text-brand-500" />
+        </div>
+        <h2 className="text-2xl font-bold text-foreground mb-2">{config.displayName} Setup</h2>
+        <p className="text-muted-foreground">Configure authentication for code generation</p>
+      </div>
+
+      <Card className="bg-card border-border">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg flex items-center gap-2">
+              <Info className="w-5 h-5" />
+              Authentication Methods
+            </CardTitle>
+            <Button variant="ghost" size="sm" onClick={checkStatus} disabled={isChecking}>
+              {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+            </Button>
+          </div>
+          <CardDescription>Choose one of the following methods to authenticate:</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Accordion type="single" collapsible className="w-full">
+            <AccordionItem value="cli" className="border-border">
+              <AccordionTrigger className="hover:no-underline">
+                <div className="flex items-center justify-between w-full pr-4">
+                  <div className="flex items-center gap-3">
+                    <ProviderIcon
+                      className={`w-5 h-5 ${
+                        cliVerificationStatus === 'verified'
+                          ? 'text-green-500'
+                          : 'text-muted-foreground'
+                      }`}
+                    />
+                    <div className="text-left">
+                      <p className="font-medium text-foreground">{config.cliLabel}</p>
+                      <p className="text-sm text-muted-foreground">{config.cliDescription}</p>
+                    </div>
+                  </div>
+                  {getCliStatusBadge()}
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="pt-4 space-y-4">
+                {!cliStatus?.installed && (
+                  <div className="space-y-4 p-4 rounded-lg bg-muted/30 border border-border">
+                    <div className="flex items-center gap-2">
+                      <Download className="w-4 h-4 text-muted-foreground" />
+                      <p className="font-medium text-foreground">Install {config.cliLabel}</p>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label className="text-sm text-muted-foreground">macOS / Linux</Label>
+                      <div className="flex items-center gap-2">
+                        <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                          {config.installCommands.macos}
+                        </code>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => copyCommand(config.installCommands.macos)}
+                        >
+                          <Copy className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label className="text-sm text-muted-foreground">Windows</Label>
+                      <div className="flex items-center gap-2">
+                        <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                          {config.installCommands.windows}
+                        </code>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => copyCommand(config.installCommands.windows)}
+                        >
+                          <Copy className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    </div>
+
+                    {isInstalling && <TerminalOutput lines={installProgress.output} />}
+
+                    <Button
+                      onClick={install}
+                      disabled={isInstalling}
+                      className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                      data-testid={config.testIds.installButton}
+                    >
+                      {isInstalling ? (
+                        <>
+                          <Spinner size="sm" variant="foreground" className="mr-2" />
+                          Installing...
+                        </>
+                      ) : (
+                        <>
+                          <Download className="w-4 h-4 mr-2" />
+                          Auto Install
+                        </>
+                      )}
+                    </Button>
+                  </div>
+                )}
+
+                {cliStatus?.installed && cliStatus?.version && (
+                  <p className="text-sm text-muted-foreground">Version: {cliStatus.version}</p>
+                )}
+
+                {cliVerificationStatus === 'verifying' && (
+                  <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+                    <Spinner size="md" />
+                    <div>
+                      <p className="font-medium text-foreground">Verifying CLI authentication...</p>
+                      <p className="text-sm text-muted-foreground">Running a test query</p>
+                    </div>
+                  </div>
+                )}
+
+                {cliVerificationStatus === 'verified' && (
+                  <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+                    <CheckCircle2 className="w-5 h-5 text-green-500" />
+                    <div>
+                      <p className="font-medium text-foreground">CLI Authentication verified!</p>
+                      <p className="text-sm text-muted-foreground">
+                        Your {config.displayName} CLI is working correctly.
+                      </p>
+                    </div>
+                  </div>
+                )}
+
+                {cliVerificationStatus === 'error' && cliVerificationError && (
+                  <div className="flex items-start gap-3 p-4 rounded-lg bg-red-500/10 border border-red-500/20">
+                    <XCircle className="w-5 h-5 text-red-500 shrink-0" />
+                    <div className="flex-1 space-y-2">
+                      <p className="font-medium text-foreground">Verification failed</p>
+                      {(() => {
+                        const parts = cliVerificationError.split('\n\nDetails: ');
+                        const mainError = parts[0];
+                        const details = parts[1];
+                        const errorLower = cliVerificationError.toLowerCase();
+
+                        // Check if this is actually a usage limit issue, not an auth problem
+                        const isUsageLimitIssue =
+                          errorLower.includes('usage limit') ||
+                          errorLower.includes('rate limit') ||
+                          errorLower.includes('limit reached') ||
+                          errorLower.includes('too many requests') ||
+                          errorLower.includes('credit balance') ||
+                          errorLower.includes('billing') ||
+                          errorLower.includes('insufficient credits') ||
+                          errorLower.includes('upgrade to pro');
+
+                        // Categorize error and provide helpful suggestions
+                        // IMPORTANT: Don't suggest re-authentication for usage limits!
+                        const getHelpfulSuggestion = () => {
+                          // Usage limit issue - NOT an authentication problem
+                          if (isUsageLimitIssue) {
+                            return {
+                              title: 'Usage limit issue (not authentication)',
+                              message:
+                                'Your login credentials are working fine. This is a rate limit or billing error.',
+                              action: 'Wait a few minutes and try again, or check your billing',
+                            };
+                          }
+
+                          // Token refresh failures
+                          if (
+                            errorLower.includes('tokenrefresh') ||
+                            errorLower.includes('token refresh')
+                          ) {
+                            return {
+                              title: 'Token refresh failed',
+                              message: 'Your OAuth token needs to be refreshed.',
+                              action: 'Re-authenticate',
+                              command: config.cliLoginCommand,
+                            };
+                          }
+
+                          // Connection/transport issues
+                          if (errorLower.includes('transport channel closed')) {
+                            return {
+                              title: 'Connection issue',
+                              message:
+                                'The connection to the authentication server was interrupted.',
+                              action: 'Try again or re-authenticate',
+                              command: config.cliLoginCommand,
+                            };
+                          }
+
+                          // Invalid API key
+                          if (errorLower.includes('invalid') && errorLower.includes('api key')) {
+                            return {
+                              title: 'Invalid API key',
+                              message: 'Your API key is incorrect or has been revoked.',
+                              action: 'Check your API key or get a new one',
+                            };
+                          }
+
+                          // Expired token
+                          if (errorLower.includes('expired')) {
+                            return {
+                              title: 'Token expired',
+                              message: 'Your authentication token has expired.',
+                              action: 'Re-authenticate',
+                              command: config.cliLoginCommand,
+                            };
+                          }
+
+                          // Authentication required
+                          if (errorLower.includes('login') || errorLower.includes('authenticate')) {
+                            return {
+                              title: 'Authentication required',
+                              message: 'You need to authenticate with your account.',
+                              action: 'Run the login command',
+                              command: config.cliLoginCommand,
+                            };
+                          }
+
+                          return null;
+                        };
+
+                        const suggestion = getHelpfulSuggestion();
+
+                        return (
+                          <>
+                            <p className="text-sm text-red-400">{mainError}</p>
+                            {details && (
+                              <div className="mt-2 p-3 rounded bg-black/20 border border-red-500/20">
+                                <p className="text-xs font-medium text-muted-foreground mb-1">
+                                  Technical details:
+                                </p>
+                                <pre className="text-xs text-red-300 whitespace-pre-wrap font-mono">
+                                  {details}
+                                </pre>
+                              </div>
+                            )}
+                            {suggestion && (
+                              <div className="mt-3 p-3 rounded bg-muted/50 border border-border">
+                                <div className="flex items-start gap-2 mb-2">
+                                  <span className="text-sm font-medium text-foreground">
+                                    💡 {suggestion.title}
+                                  </span>
+                                </div>
+                                <p className="text-sm text-muted-foreground mb-2">
+                                  {suggestion.message}
+                                </p>
+                                {suggestion.command && (
+                                  <>
+                                    <p className="text-xs text-muted-foreground mb-2">
+                                      {suggestion.action}:
+                                    </p>
+                                    <div className="flex items-center gap-2">
+                                      <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                                        {suggestion.command}
+                                      </code>
+                                      <Button
+                                        variant="ghost"
+                                        size="icon"
+                                        onClick={() => copyCommand(suggestion.command)}
+                                      >
+                                        <Copy className="w-4 h-4" />
+                                      </Button>
+                                    </div>
+                                  </>
+                                )}
+                                {!suggestion.command && (
+                                  <p className="text-xs font-medium text-brand-500">
+                                    → {suggestion.action}
+                                  </p>
+                                )}
+                              </div>
+                            )}
+                          </>
+                        );
+                      })()}
+                    </div>
+                  </div>
+                )}
+
+                {cliVerificationStatus !== 'verified' && (
+                  <Button
+                    onClick={verifyCliAuth}
+                    disabled={cliVerificationStatus === 'verifying' || !cliStatus?.installed}
+                    className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                    data-testid={config.testIds.verifyCliButton}
+                  >
+                    {cliVerificationStatus === 'verifying' ? (
+                      <>
+                        <Spinner size="sm" className="mr-2" />
+                        Verifying...
+                      </>
+                    ) : cliVerificationStatus === 'error' ? (
+                      <>
+                        <RefreshCw className="w-4 h-4 mr-2" />
+                        Retry Verification
+                      </>
+                    ) : (
+                      <>
+                        <ShieldCheck className="w-4 h-4 mr-2" />
+                        Verify CLI Authentication
+                      </>
+                    )}
+                  </Button>
+                )}
+              </AccordionContent>
+            </AccordionItem>
+
+            <AccordionItem value="api-key" className="border-border">
+              <AccordionTrigger className="hover:no-underline">
+                <div className="flex items-center justify-between w-full pr-4">
+                  <div className="flex items-center gap-3">
+                    <Key
+                      className={`w-5 h-5 ${
+                        apiKeyVerificationStatus === 'verified'
+                          ? 'text-green-500'
+                          : 'text-muted-foreground'
+                      }`}
+                    />
+                    <div className="text-left">
+                      <p className="font-medium text-foreground">{config.apiKeyLabel}</p>
+                      <p className="text-sm text-muted-foreground">{config.apiKeyDescription}</p>
+                    </div>
+                  </div>
+                  {getApiKeyStatusBadge()}
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="pt-4 space-y-4">
+                <div className="space-y-4 p-4 rounded-lg bg-muted/30 border border-border">
+                  <div className="space-y-2">
+                    <Label htmlFor={config.testIds.apiKeyInput} className="text-foreground">
+                      {config.apiKeyLabel}
+                    </Label>
+                    <Input
+                      id={config.testIds.apiKeyInput}
+                      type="password"
+                      placeholder={config.apiKeyPlaceholder}
+                      value={apiKey}
+                      onChange={(e) => setApiKey(e.target.value)}
+                      className="bg-input border-border text-foreground"
+                      data-testid={config.testIds.apiKeyInput}
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      {config.apiKeyHelpText}{' '}
+                      <a
+                        href={config.apiKeyDocsUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-brand-500 hover:underline"
+                      >
+                        {config.apiKeyDocsLabel}
+                        <ExternalLink className="w-3 h-3 inline ml-1" />
+                      </a>
+                    </p>
+                  </div>
+
+                  <div className="flex gap-2">
+                    <Button
+                      onClick={() => saveApiKeyToken(apiKey)}
+                      disabled={isSavingApiKey || !apiKey.trim()}
+                      className="flex-1 bg-brand-500 hover:bg-brand-600 text-white"
+                      data-testid={config.testIds.saveApiKeyButton}
+                    >
+                      {isSavingApiKey ? (
+                        <>
+                          <Spinner size="sm" variant="foreground" className="mr-2" />
+                          Saving...
+                        </>
+                      ) : (
+                        'Save API Key'
+                      )}
+                    </Button>
+                    {hasApiKey && (
+                      <Button
+                        onClick={deleteApiKey}
+                        disabled={isDeletingApiKey}
+                        variant="outline"
+                        className="border-red-500/50 text-red-500 hover:bg-red-500/10 hover:text-red-400"
+                        data-testid={config.testIds.deleteApiKeyButton}
+                      >
+                        {isDeletingApiKey ? <Spinner size="sm" /> : <Trash2 className="w-4 h-4" />}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+
+                {apiKeyVerificationStatus === 'verifying' && (
+                  <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+                    <Spinner size="md" />
+                    <div>
+                      <p className="font-medium text-foreground">Verifying API key...</p>
+                      <p className="text-sm text-muted-foreground">Running a test query</p>
+                    </div>
+                  </div>
+                )}
+
+                {apiKeyVerificationStatus === 'verified' && (
+                  <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+                    <CheckCircle2 className="w-5 h-5 text-green-500" />
+                    <div>
+                      <p className="font-medium text-foreground">API Key verified!</p>
+                      <p className="text-sm text-muted-foreground">
+                        Your API key is working correctly.
+                      </p>
+                    </div>
+                  </div>
+                )}
+
+                {apiKeyVerificationStatus === 'error' && apiKeyVerificationError && (
+                  <div className="flex items-start gap-3 p-4 rounded-lg bg-red-500/10 border border-red-500/20">
+                    <XCircle className="w-5 h-5 text-red-500 shrink-0" />
+                    <div className="flex-1 space-y-2">
+                      <p className="font-medium text-foreground">Verification failed</p>
+                      {(() => {
+                        const parts = apiKeyVerificationError.split('\n\nDetails: ');
+                        const mainError = parts[0];
+                        const details = parts[1];
+
+                        return (
+                          <>
+                            <p className="text-sm text-red-400">{mainError}</p>
+                            {details && (
+                              <div className="mt-2 p-3 rounded bg-black/20 border border-red-500/20">
+                                <p className="text-xs font-medium text-muted-foreground mb-1">
+                                  Technical details:
+                                </p>
+                                <pre className="text-xs text-red-300 whitespace-pre-wrap font-mono">
+                                  {details}
+                                </pre>
+                              </div>
+                            )}
+                          </>
+                        );
+                      })()}
+                    </div>
+                  </div>
+                )}
+
+                {apiKeyVerificationStatus !== 'verified' && (
+                  <Button
+                    onClick={verifyApiKeyAuth}
+                    disabled={apiKeyVerificationStatus === 'verifying' || !hasApiKey}
+                    className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                    data-testid={config.testIds.verifyApiKeyButton}
+                  >
+                    {apiKeyVerificationStatus === 'verifying' ? (
+                      <>
+                        <Spinner size="sm" className="mr-2" />
+                        Verifying...
+                      </>
+                    ) : apiKeyVerificationStatus === 'error' ? (
+                      <>
+                        <RefreshCw className="w-4 h-4 mr-2" />
+                        Retry Verification
+                      </>
+                    ) : (
+                      <>
+                        <ShieldCheck className="w-4 h-4 mr-2" />
+                        Verify API Key
+                      </>
+                    )}
+                  </Button>
+                )}
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-between pt-4">
+        <Button variant="ghost" onClick={onBack} className="text-muted-foreground">
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          Back
+        </Button>
+        <div className="flex gap-2">
+          <Button variant="ghost" onClick={onSkip} className="text-muted-foreground">
+            Skip for now
+          </Button>
+          <Button
+            onClick={onNext}
+            disabled={!isReady}
+            className="bg-brand-500 hover:bg-brand-600 text-white disabled:opacity-50 disabled:cursor-not-allowed"
+            data-testid={config.testIds.nextButton}
+          >
+            Continue
+            <ArrowRight className="w-4 h-4 ml-2" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/steps/codex-setup-step.tsx b/temp_repo/apps/ui/src/components/views/setup-view/steps/codex-setup-step.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9d7f57509a40c9e2bbb6a8dece99daeeb38eb7a9
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/steps/codex-setup-step.tsx
@@ -0,0 +1,103 @@
+// @ts-nocheck - Codex setup wizard with Electron API integration
+import { useMemo, useCallback } from 'react';
+import { useSetupStore } from '@/store/setup-store';
+import { getElectronAPI } from '@/lib/electron';
+import { CliSetupStep } from './cli-setup-step';
+import type { CodexAuthStatus } from '@/store/setup-store';
+
+interface CodexSetupStepProps {
+  onNext: () => void;
+  onBack: () => void;
+  onSkip: () => void;
+}
+
+export function CodexSetupStep({ onNext, onBack, onSkip }: CodexSetupStepProps) {
+  const {
+    codexCliStatus,
+    codexAuthStatus,
+    setCodexCliStatus,
+    setCodexAuthStatus,
+    setCodexInstallProgress,
+  } = useSetupStore();
+
+  const statusApi = useCallback(
+    () => getElectronAPI().setup?.getCodexStatus() || Promise.reject(),
+    []
+  );
+
+  const installApi = useCallback(
+    () => getElectronAPI().setup?.installCodex() || Promise.reject(),
+    []
+  );
+
+  const verifyAuthApi = useCallback(
+    (method: 'cli' | 'api_key', apiKey?: string) =>
+      getElectronAPI().setup?.verifyCodexAuth(method, apiKey) || Promise.reject(),
+    []
+  );
+
+  const config = useMemo(
+    () => ({
+      cliType: 'codex' as const,
+      displayName: 'Codex',
+      cliLabel: 'Codex CLI',
+      cliDescription: 'Use Codex CLI login',
+      apiKeyLabel: 'OpenAI API Key',
+      apiKeyDescription: 'Optional API key for Codex',
+      apiKeyProvider: 'openai' as const,
+      apiKeyPlaceholder: 'sk-...',
+      apiKeyDocsUrl: 'https://platform.openai.com/api-keys',
+      apiKeyDocsLabel: 'Get one from OpenAI',
+      apiKeyHelpText: "Don't have an API key?",
+      installCommands: {
+        macos: 'npm install -g @openai/codex',
+        windows: 'npm install -g @openai/codex',
+      },
+      cliLoginCommand: 'codex login',
+      testIds: {
+        installButton: 'install-codex-button',
+        verifyCliButton: 'verify-codex-cli-button',
+        verifyApiKeyButton: 'verify-codex-api-key-button',
+        apiKeyInput: 'openai-api-key-input',
+        saveApiKeyButton: 'save-openai-key-button',
+        deleteApiKeyButton: 'delete-openai-key-button',
+        nextButton: 'codex-next-button',
+      },
+      buildCliAuthStatus: (_previous: CodexAuthStatus | null) => ({
+        authenticated: true,
+        method: 'cli_authenticated',
+        hasAuthFile: true,
+      }),
+      buildApiKeyAuthStatus: (_previous: CodexAuthStatus | null) => ({
+        authenticated: true,
+        method: 'api_key',
+        hasApiKey: true,
+      }),
+      buildClearedAuthStatus: (_previous: CodexAuthStatus | null) => ({
+        authenticated: false,
+        method: 'none',
+      }),
+      statusApi,
+      installApi,
+      verifyAuthApi,
+    }),
+    [installApi, statusApi, verifyAuthApi]
+  );
+
+  return (
+    <CliSetupStep
+      config={config}
+      state={{
+        cliStatus: codexCliStatus,
+        authStatus: codexAuthStatus,
+        setCliStatus: setCodexCliStatus,
+        setAuthStatus: setCodexAuthStatus,
+        setInstallProgress: setCodexInstallProgress,
+        getStoreState: () => useSetupStore.getState().codexCliStatus,
+      }}
+      onNext={onNext}
+      onBack={onBack}
+      onSkip={onSkip}
+    />
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/steps/complete-step.tsx b/temp_repo/apps/ui/src/components/views/setup-view/steps/complete-step.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e1884d19be449498990d39367ea6527eacd472be
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/steps/complete-step.tsx
@@ -0,0 +1,34 @@
+import { Button } from '@/components/ui/button';
+import { CheckCircle2, Sparkles } from 'lucide-react';
+
+interface CompleteStepProps {
+  onFinish: () => void;
+}
+
+export function CompleteStep({ onFinish }: CompleteStepProps) {
+  return (
+    <div className="text-center space-y-6">
+      <div className="w-20 h-20 rounded-full bg-linear-to-br from-green-500 to-emerald-600 shadow-lg shadow-green-500/30 flex items-center justify-center mx-auto">
+        <CheckCircle2 className="w-10 h-10 text-white" />
+      </div>
+
+      <div>
+        <h2 className="text-3xl font-bold text-foreground mb-3">Setup Complete!</h2>
+        <p className="text-muted-foreground max-w-md mx-auto">
+          Your development environment is configured. You&apos;re ready to start building with
+          AI-powered assistance.
+        </p>
+      </div>
+
+      <Button
+        size="lg"
+        className="bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white"
+        onClick={onFinish}
+        data-testid="setup-finish-button"
+      >
+        <Sparkles className="w-4 h-4 mr-2" />
+        Start Building
+      </Button>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/steps/cursor-setup-step.tsx b/temp_repo/apps/ui/src/components/views/setup-view/steps/cursor-setup-step.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7f03a8ee165e82784b843de2affb9224d59a6266
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/steps/cursor-setup-step.tsx
@@ -0,0 +1,371 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { useSetupStore } from '@/store/setup-store';
+import { getElectronAPI } from '@/lib/electron';
+import {
+  CheckCircle2,
+  ArrowRight,
+  ArrowLeft,
+  ExternalLink,
+  Copy,
+  RefreshCw,
+  AlertTriangle,
+  XCircle,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { toast } from 'sonner';
+import { StatusBadge } from '../components';
+import { CursorIcon } from '@/components/ui/provider-icon';
+
+const logger = createLogger('CursorSetupStep');
+
+interface CursorSetupStepProps {
+  onNext: () => void;
+  onBack: () => void;
+  onSkip: () => void;
+}
+
+interface CursorCliStatus {
+  installed: boolean;
+  version?: string | null;
+  path?: string | null;
+  auth?: {
+    authenticated: boolean;
+    method: string;
+  };
+  installCommand?: string;
+  loginCommand?: string;
+}
+
+export function CursorSetupStep({ onNext, onBack, onSkip }: CursorSetupStepProps) {
+  const { cursorCliStatus, setCursorCliStatus } = useSetupStore();
+  const [isChecking, setIsChecking] = useState(false);
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const pollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const checkStatus = useCallback(async () => {
+    setIsChecking(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.getCursorStatus) {
+        return;
+      }
+      const result = await api.setup.getCursorStatus();
+      if (result.success) {
+        const status: CursorCliStatus = {
+          installed: result.installed ?? false,
+          version: result.version,
+          path: result.path,
+          auth: result.auth,
+          installCommand: result.installCommand,
+          loginCommand: result.loginCommand,
+        };
+        setCursorCliStatus(status);
+
+        if (result.auth?.authenticated) {
+          toast.success('Cursor CLI is ready!');
+        }
+      }
+    } catch (error) {
+      logger.error('Failed to check Cursor status:', error);
+    } finally {
+      setIsChecking(false);
+    }
+  }, [setCursorCliStatus]);
+
+  useEffect(() => {
+    checkStatus();
+    // Cleanup polling on unmount
+    return () => {
+      if (pollIntervalRef.current) {
+        clearInterval(pollIntervalRef.current);
+      }
+    };
+  }, [checkStatus]);
+
+  const copyCommand = (command: string) => {
+    navigator.clipboard.writeText(command);
+    toast.success('Command copied to clipboard');
+  };
+
+  const handleLogin = async () => {
+    setIsLoggingIn(true);
+
+    try {
+      // Copy login command to clipboard and show instructions
+      const loginCommand = cursorCliStatus?.loginCommand || 'cursor-agent login';
+      await navigator.clipboard.writeText(loginCommand);
+      toast.info('Login command copied! Paste in terminal to authenticate.');
+
+      // Poll for auth status
+      let attempts = 0;
+      const maxAttempts = 60; // 2 minutes with 2s interval
+
+      pollIntervalRef.current = setInterval(async () => {
+        attempts++;
+
+        try {
+          const api = getElectronAPI();
+          if (!api.setup?.getCursorStatus) {
+            return;
+          }
+          const result = await api.setup.getCursorStatus();
+
+          if (result.auth?.authenticated) {
+            if (pollIntervalRef.current) {
+              clearInterval(pollIntervalRef.current);
+              pollIntervalRef.current = null;
+            }
+            setCursorCliStatus({
+              ...cursorCliStatus,
+              installed: result.installed ?? true,
+              version: result.version,
+              path: result.path,
+              auth: result.auth,
+            } as CursorCliStatus);
+            setIsLoggingIn(false);
+            toast.success('Successfully logged in to Cursor!');
+          }
+        } catch {
+          // Ignore polling errors
+        }
+
+        if (attempts >= maxAttempts) {
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+          }
+          setIsLoggingIn(false);
+          toast.error('Login timed out. Please try again.');
+        }
+      }, 2000);
+    } catch (error) {
+      logger.error('Login failed:', error);
+      toast.error('Failed to start login process');
+      setIsLoggingIn(false);
+    }
+  };
+
+  const isReady = cursorCliStatus?.installed && cursorCliStatus?.auth?.authenticated;
+
+  const getStatusBadge = () => {
+    if (isChecking) {
+      return <StatusBadge status="checking" label="Checking..." />;
+    }
+    if (cursorCliStatus?.auth?.authenticated) {
+      return <StatusBadge status="authenticated" label="Ready" />;
+    }
+    if (cursorCliStatus?.installed) {
+      return <StatusBadge status="unverified" label="Not Logged In" />;
+    }
+    return <StatusBadge status="not_installed" label="Not Installed" />;
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center mb-8">
+        <div className="w-16 h-16 rounded-xl bg-cyan-500/10 flex items-center justify-center mx-auto mb-4">
+          <CursorIcon className="w-8 h-8 text-cyan-500" />
+        </div>
+        <h2 className="text-2xl font-bold text-foreground mb-2">Cursor CLI Setup</h2>
+        <p className="text-muted-foreground">Optional - Use Cursor as an AI provider</p>
+      </div>
+
+      {/* Info Banner */}
+      <Card className="bg-cyan-500/10 border-cyan-500/20">
+        <CardContent className="pt-4">
+          <div className="flex items-start gap-3">
+            <AlertTriangle className="w-5 h-5 text-cyan-500 shrink-0 mt-0.5" />
+            <div>
+              <p className="font-medium text-foreground">This step is optional</p>
+              <p className="text-sm text-muted-foreground mt-1">
+                Configure Cursor CLI as an alternative AI provider. You can skip this and use Claude
+                instead, or configure it later in Settings.
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Status Card */}
+      <Card className="bg-card border-border">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg flex items-center gap-2">
+              <CursorIcon className="w-5 h-5" />
+              Cursor CLI Status
+              <Badge variant="outline" className="ml-2">
+                Optional
+              </Badge>
+            </CardTitle>
+            <div className="flex items-center gap-2">
+              {getStatusBadge()}
+              <Button variant="ghost" size="sm" onClick={checkStatus} disabled={isChecking}>
+                {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+              </Button>
+            </div>
+          </div>
+          <CardDescription>
+            {cursorCliStatus?.installed
+              ? cursorCliStatus.auth?.authenticated
+                ? `Authenticated via ${cursorCliStatus.auth.method === 'api_key' ? 'API Key' : 'Browser Login'}${cursorCliStatus.version ? ` (v${cursorCliStatus.version})` : ''}`
+                : 'Installed but not authenticated'
+              : 'Not installed on your system'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Success State */}
+          {isReady && (
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">Cursor CLI is ready!</p>
+                <p className="text-sm text-muted-foreground">
+                  You can use Cursor models for AI tasks.
+                  {cursorCliStatus?.version && (
+                    <span className="ml-1">Version: {cursorCliStatus.version}</span>
+                  )}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Not Installed */}
+          {!cursorCliStatus?.installed && !isChecking && (
+            <div className="space-y-4">
+              <div className="flex items-start gap-3 p-4 rounded-lg bg-muted/30 border border-border">
+                <XCircle className="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <p className="font-medium text-foreground">Cursor CLI not found</p>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    Install the Cursor CLI to use Cursor models.
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+                <p className="font-medium text-foreground text-sm">Install Cursor CLI:</p>
+                <div className="flex items-center gap-2">
+                  <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground overflow-x-auto">
+                    {cursorCliStatus?.installCommand ||
+                      'curl https://cursor.com/install -fsS | bash'}
+                  </code>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() =>
+                      copyCommand(
+                        cursorCliStatus?.installCommand ||
+                          'curl https://cursor.com/install -fsS | bash'
+                      )
+                    }
+                  >
+                    <Copy className="w-4 h-4" />
+                  </Button>
+                </div>
+                <a
+                  href="https://cursor.com/docs/cli"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center text-sm text-brand-500 hover:underline mt-2"
+                >
+                  View installation docs
+                  <ExternalLink className="w-3 h-3 ml-1" />
+                </a>
+              </div>
+            </div>
+          )}
+
+          {/* Installed but not authenticated */}
+          {cursorCliStatus?.installed && !cursorCliStatus?.auth?.authenticated && !isChecking && (
+            <div className="space-y-4">
+              <div className="flex items-start gap-3 p-4 rounded-lg bg-amber-500/10 border border-amber-500/20">
+                <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <p className="font-medium text-foreground">Cursor CLI not authenticated</p>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    Run the login command to authenticate with Cursor.
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+                <p className="text-sm text-muted-foreground">
+                  Run the login command in your terminal, then complete authentication in your
+                  browser:
+                </p>
+                <div className="flex items-center gap-2">
+                  <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                    {cursorCliStatus?.loginCommand || 'cursor-agent login'}
+                  </code>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() =>
+                      copyCommand(cursorCliStatus?.loginCommand || 'cursor-agent login')
+                    }
+                  >
+                    <Copy className="w-4 h-4" />
+                  </Button>
+                </div>
+                <Button
+                  onClick={handleLogin}
+                  disabled={isLoggingIn}
+                  className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                >
+                  {isLoggingIn ? (
+                    <>
+                      <Spinner size="sm" variant="foreground" className="mr-2" />
+                      Waiting for login...
+                    </>
+                  ) : (
+                    'Copy Command & Wait for Login'
+                  )}
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* Loading State */}
+          {isChecking && (
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+              <Spinner size="md" />
+              <div>
+                <p className="font-medium text-foreground">Checking Cursor CLI status...</p>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Navigation */}
+      <div className="flex justify-between pt-4">
+        <Button variant="ghost" onClick={onBack} className="text-muted-foreground">
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          Back
+        </Button>
+        <div className="flex gap-2">
+          <Button variant="ghost" onClick={onSkip} className="text-muted-foreground">
+            {isReady ? 'Skip' : 'Skip for now'}
+          </Button>
+          <Button
+            onClick={onNext}
+            className="bg-brand-500 hover:bg-brand-600 text-white"
+            data-testid="cursor-next-button"
+          >
+            {isReady ? 'Continue' : 'Continue without Cursor'}
+            <ArrowRight className="w-4 h-4 ml-2" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Info note */}
+      <p className="text-xs text-muted-foreground text-center">
+        You can always configure Cursor later in Settings
+      </p>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/steps/github-setup-step.tsx b/temp_repo/apps/ui/src/components/views/setup-view/steps/github-setup-step.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3a20ee24c06738372a63a1b30dbdf9640310fb2e
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/steps/github-setup-step.tsx
@@ -0,0 +1,286 @@
+import { useState, useEffect, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useSetupStore } from '@/store/setup-store';
+import { getElectronAPI } from '@/lib/electron';
+import {
+  CheckCircle2,
+  ArrowRight,
+  ArrowLeft,
+  ExternalLink,
+  Copy,
+  RefreshCw,
+  AlertTriangle,
+  Github,
+  XCircle,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { toast } from 'sonner';
+import { StatusBadge } from '../components';
+
+const logger = createLogger('GitHubSetupStep');
+
+interface GitHubSetupStepProps {
+  onNext: () => void;
+  onBack: () => void;
+  onSkip: () => void;
+}
+
+export function GitHubSetupStep({ onNext, onBack, onSkip }: GitHubSetupStepProps) {
+  const { ghCliStatus, setGhCliStatus } = useSetupStore();
+  const [isChecking, setIsChecking] = useState(false);
+
+  const checkStatus = useCallback(async () => {
+    setIsChecking(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.getGhStatus) {
+        return;
+      }
+      const result = await api.setup.getGhStatus();
+      if (result.success) {
+        setGhCliStatus({
+          installed: result.installed,
+          authenticated: result.authenticated,
+          version: result.version,
+          path: result.path,
+          user: result.user,
+        });
+      }
+    } catch (error) {
+      logger.error('Failed to check gh status:', error);
+    } finally {
+      setIsChecking(false);
+    }
+  }, [setGhCliStatus]);
+
+  useEffect(() => {
+    checkStatus();
+  }, [checkStatus]);
+
+  const copyCommand = (command: string) => {
+    navigator.clipboard.writeText(command);
+    toast.success('Command copied to clipboard');
+  };
+
+  const isReady = ghCliStatus?.installed && ghCliStatus?.authenticated;
+
+  const getStatusBadge = () => {
+    if (isChecking) {
+      return <StatusBadge status="checking" label="Checking..." />;
+    }
+    if (ghCliStatus?.authenticated) {
+      return <StatusBadge status="authenticated" label="Ready" />;
+    }
+    if (ghCliStatus?.installed) {
+      return <StatusBadge status="unverified" label="Not Logged In" />;
+    }
+    return <StatusBadge status="not_installed" label="Not Installed" />;
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center mb-8">
+        <div className="w-16 h-16 rounded-xl bg-zinc-800 flex items-center justify-center mx-auto mb-4">
+          <Github className="w-8 h-8 text-white" />
+        </div>
+        <h2 className="text-2xl font-bold text-foreground mb-2">GitHub CLI Setup</h2>
+        <p className="text-muted-foreground">Optional - Used for creating pull requests</p>
+      </div>
+
+      {/* Info Banner */}
+      <Card className="bg-amber-500/10 border-amber-500/20">
+        <CardContent className="pt-4">
+          <div className="flex items-start gap-3">
+            <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+            <div>
+              <p className="font-medium text-foreground">This step is optional</p>
+              <p className="text-sm text-muted-foreground mt-1">
+                The GitHub CLI allows you to create pull requests directly from the app. Without it,
+                you can still create PRs manually in your browser.
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Status Card */}
+      <Card className="bg-card border-border">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg flex items-center gap-2">
+              <Github className="w-5 h-5" />
+              GitHub CLI Status
+            </CardTitle>
+            <div className="flex items-center gap-2">
+              {getStatusBadge()}
+              <Button variant="ghost" size="sm" onClick={checkStatus} disabled={isChecking}>
+                {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+              </Button>
+            </div>
+          </div>
+          <CardDescription>
+            {ghCliStatus?.installed
+              ? ghCliStatus.authenticated
+                ? `Logged in${ghCliStatus.user ? ` as ${ghCliStatus.user}` : ''}`
+                : 'Installed but not logged in'
+              : 'Not installed on your system'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Success State */}
+          {isReady && (
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">GitHub CLI is ready!</p>
+                <p className="text-sm text-muted-foreground">
+                  You can create pull requests directly from the app.
+                  {ghCliStatus?.version && (
+                    <span className="ml-1">Version: {ghCliStatus.version}</span>
+                  )}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Not Installed */}
+          {!ghCliStatus?.installed && !isChecking && (
+            <div className="space-y-4">
+              <div className="flex items-start gap-3 p-4 rounded-lg bg-muted/30 border border-border">
+                <XCircle className="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <p className="font-medium text-foreground">GitHub CLI not found</p>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    Install the GitHub CLI to enable PR creation from the app.
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+                <p className="font-medium text-foreground text-sm">Installation Commands:</p>
+
+                <div className="space-y-2">
+                  <p className="text-xs text-muted-foreground">macOS (Homebrew)</p>
+                  <div className="flex items-center gap-2">
+                    <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                      brew install gh
+                    </code>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => copyCommand('brew install gh')}
+                    >
+                      <Copy className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <p className="text-xs text-muted-foreground">Windows (winget)</p>
+                  <div className="flex items-center gap-2">
+                    <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                      winget install GitHub.cli
+                    </code>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => copyCommand('winget install GitHub.cli')}
+                    >
+                      <Copy className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <p className="text-xs text-muted-foreground">Linux (apt)</p>
+                  <div className="flex items-center gap-2">
+                    <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground overflow-x-auto">
+                      sudo apt install gh
+                    </code>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => copyCommand('sudo apt install gh')}
+                    >
+                      <Copy className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+
+                <a
+                  href="https://cli.github.com/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center text-sm text-brand-500 hover:underline mt-2"
+                >
+                  View all installation options
+                  <ExternalLink className="w-3 h-3 ml-1" />
+                </a>
+              </div>
+            </div>
+          )}
+
+          {/* Installed but not authenticated */}
+          {ghCliStatus?.installed && !ghCliStatus?.authenticated && !isChecking && (
+            <div className="space-y-4">
+              <div className="flex items-start gap-3 p-4 rounded-lg bg-amber-500/10 border border-amber-500/20">
+                <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <p className="font-medium text-foreground">GitHub CLI not logged in</p>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    Run the login command to authenticate with GitHub.
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-2 p-4 rounded-lg bg-muted/30 border border-border">
+                <p className="text-sm text-muted-foreground">Run this command in your terminal:</p>
+                <div className="flex items-center gap-2">
+                  <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                    gh auth login
+                  </code>
+                  <Button variant="ghost" size="icon" onClick={() => copyCommand('gh auth login')}>
+                    <Copy className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Loading State */}
+          {isChecking && (
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+              <Spinner size="md" />
+              <div>
+                <p className="font-medium text-foreground">Checking GitHub CLI status...</p>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Navigation */}
+      <div className="flex justify-between pt-4">
+        <Button variant="ghost" onClick={onBack} className="text-muted-foreground">
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          Back
+        </Button>
+        <div className="flex gap-2">
+          <Button variant="ghost" onClick={onSkip} className="text-muted-foreground">
+            {isReady ? 'Skip' : 'Skip for now'}
+          </Button>
+          <Button
+            onClick={onNext}
+            className="bg-brand-500 hover:bg-brand-600 text-white"
+            data-testid="github-next-button"
+          >
+            {isReady ? 'Continue' : 'Continue without GitHub CLI'}
+            <ArrowRight className="w-4 h-4 ml-2" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/steps/index.ts b/temp_repo/apps/ui/src/components/views/setup-view/steps/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f6497647650b0aa1a98e5531850a600b797fae18
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/steps/index.ts
@@ -0,0 +1,12 @@
+// Re-export all setup step components for easier imports
+export { WelcomeStep } from './welcome-step';
+export { ThemeStep } from './theme-step';
+export { CompleteStep } from './complete-step';
+export { ProvidersSetupStep } from './providers-setup-step';
+export { GitHubSetupStep } from './github-setup-step';
+
+// Legacy individual step exports (kept for backwards compatibility)
+export { ClaudeSetupStep } from './claude-setup-step';
+export { CursorSetupStep } from './cursor-setup-step';
+export { CodexSetupStep } from './codex-setup-step';
+export { OpencodeSetupStep } from './opencode-setup-step';
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/steps/opencode-setup-step.tsx b/temp_repo/apps/ui/src/components/views/setup-view/steps/opencode-setup-step.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b9d6e28c60ff58c44066493c4cbb4a85fa547c1a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/steps/opencode-setup-step.tsx
@@ -0,0 +1,374 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { useSetupStore } from '@/store/setup-store';
+import { getElectronAPI } from '@/lib/electron';
+import {
+  CheckCircle2,
+  ArrowRight,
+  ArrowLeft,
+  ExternalLink,
+  Copy,
+  RefreshCw,
+  AlertTriangle,
+  XCircle,
+  Terminal,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { toast } from 'sonner';
+import { StatusBadge } from '../components';
+
+const logger = createLogger('OpencodeSetupStep');
+
+interface OpencodeSetupStepProps {
+  onNext: () => void;
+  onBack: () => void;
+  onSkip: () => void;
+}
+
+interface OpencodeCliStatus {
+  installed: boolean;
+  version?: string | null;
+  path?: string | null;
+  auth?: {
+    authenticated: boolean;
+    method: string;
+  };
+  installCommand?: string;
+  loginCommand?: string;
+}
+
+export function OpencodeSetupStep({ onNext, onBack, onSkip }: OpencodeSetupStepProps) {
+  const { opencodeCliStatus, setOpencodeCliStatus } = useSetupStore();
+  const [isChecking, setIsChecking] = useState(false);
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const pollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const checkStatus = useCallback(async () => {
+    setIsChecking(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.getOpencodeStatus) {
+        return;
+      }
+      const result = await api.setup.getOpencodeStatus();
+      if (result.success) {
+        // Derive install command from platform-specific options or use npm fallback
+        const installCommand =
+          result.installCommands?.npm ||
+          result.installCommands?.macos ||
+          result.installCommands?.linux;
+        const status: OpencodeCliStatus = {
+          installed: result.installed ?? false,
+          version: result.version ?? null,
+          path: result.path ?? null,
+          auth: result.auth,
+          installCommand,
+          loginCommand: 'opencode auth login',
+        };
+        setOpencodeCliStatus(status);
+
+        if (result.auth?.authenticated) {
+          toast.success('OpenCode CLI is ready!');
+        }
+      }
+    } catch (error) {
+      logger.error('Failed to check OpenCode status:', error);
+    } finally {
+      setIsChecking(false);
+    }
+  }, [setOpencodeCliStatus]);
+
+  useEffect(() => {
+    checkStatus();
+    // Cleanup polling on unmount
+    return () => {
+      if (pollIntervalRef.current) {
+        clearInterval(pollIntervalRef.current);
+      }
+    };
+  }, [checkStatus]);
+
+  const copyCommand = (command: string) => {
+    navigator.clipboard.writeText(command);
+    toast.success('Command copied to clipboard');
+  };
+
+  const handleLogin = async () => {
+    setIsLoggingIn(true);
+
+    try {
+      // Copy login command to clipboard and show instructions
+      const loginCommand = opencodeCliStatus?.loginCommand || 'opencode auth login';
+      await navigator.clipboard.writeText(loginCommand);
+      toast.info('Login command copied! Paste in terminal to authenticate.');
+
+      // Poll for auth status
+      let attempts = 0;
+      const maxAttempts = 60; // 2 minutes with 2s interval
+
+      pollIntervalRef.current = setInterval(async () => {
+        attempts++;
+
+        try {
+          const api = getElectronAPI();
+          if (!api.setup?.getOpencodeStatus) {
+            return;
+          }
+          const result = await api.setup.getOpencodeStatus();
+
+          if (result.auth?.authenticated) {
+            if (pollIntervalRef.current) {
+              clearInterval(pollIntervalRef.current);
+              pollIntervalRef.current = null;
+            }
+            setOpencodeCliStatus({
+              ...opencodeCliStatus,
+              installed: result.installed ?? true,
+              version: result.version,
+              path: result.path,
+              auth: result.auth,
+            } as OpencodeCliStatus);
+            setIsLoggingIn(false);
+            toast.success('Successfully logged in to OpenCode!');
+          }
+        } catch {
+          // Ignore polling errors
+        }
+
+        if (attempts >= maxAttempts) {
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+          }
+          setIsLoggingIn(false);
+          toast.error('Login timed out. Please try again.');
+        }
+      }, 2000);
+    } catch (error) {
+      logger.error('Login failed:', error);
+      toast.error('Failed to start login process');
+      setIsLoggingIn(false);
+    }
+  };
+
+  const isReady = opencodeCliStatus?.installed && opencodeCliStatus?.auth?.authenticated;
+
+  const getStatusBadge = () => {
+    if (isChecking) {
+      return <StatusBadge status="checking" label="Checking..." />;
+    }
+    if (opencodeCliStatus?.auth?.authenticated) {
+      return <StatusBadge status="authenticated" label="Ready" />;
+    }
+    if (opencodeCliStatus?.installed) {
+      return <StatusBadge status="unverified" label="Not Logged In" />;
+    }
+    return <StatusBadge status="not_installed" label="Not Installed" />;
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center mb-8">
+        <div className="w-16 h-16 rounded-xl bg-green-500/10 flex items-center justify-center mx-auto mb-4">
+          <Terminal className="w-8 h-8 text-green-500" />
+        </div>
+        <h2 className="text-2xl font-bold text-foreground mb-2">OpenCode CLI Setup</h2>
+        <p className="text-muted-foreground">Optional - Use OpenCode as an AI provider</p>
+      </div>
+
+      {/* Info Banner */}
+      <Card className="bg-green-500/10 border-green-500/20">
+        <CardContent className="pt-4">
+          <div className="flex items-start gap-3">
+            <AlertTriangle className="w-5 h-5 text-green-500 shrink-0 mt-0.5" />
+            <div>
+              <p className="font-medium text-foreground">This step is optional</p>
+              <p className="text-sm text-muted-foreground mt-1">
+                Configure OpenCode CLI for access to free tier models and connected providers. You
+                can skip this and use other providers, or configure it later in Settings.
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Status Card */}
+      <Card className="bg-card border-border">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg flex items-center gap-2">
+              <Terminal className="w-5 h-5" />
+              OpenCode CLI Status
+              <Badge variant="outline" className="ml-2">
+                Optional
+              </Badge>
+            </CardTitle>
+            <div className="flex items-center gap-2">
+              {getStatusBadge()}
+              <Button variant="ghost" size="sm" onClick={checkStatus} disabled={isChecking}>
+                {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+              </Button>
+            </div>
+          </div>
+          <CardDescription>
+            {opencodeCliStatus?.installed
+              ? opencodeCliStatus.auth?.authenticated
+                ? `Authenticated via ${opencodeCliStatus.auth.method === 'api_key' ? 'API Key' : 'Browser Login'}${opencodeCliStatus.version ? ` (v${opencodeCliStatus.version})` : ''}`
+                : 'Installed but not authenticated'
+              : 'Not installed on your system'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Success State */}
+          {isReady && (
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">OpenCode CLI is ready!</p>
+                <p className="text-sm text-muted-foreground">
+                  You can use OpenCode models for AI tasks.
+                  {opencodeCliStatus?.version && (
+                    <span className="ml-1">Version: {opencodeCliStatus.version}</span>
+                  )}
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Not Installed */}
+          {!opencodeCliStatus?.installed && !isChecking && (
+            <div className="space-y-4">
+              <div className="flex items-start gap-3 p-4 rounded-lg bg-muted/30 border border-border">
+                <XCircle className="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <p className="font-medium text-foreground">OpenCode CLI not found</p>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    Install the OpenCode CLI to use free tier models and connected providers.
+                  </p>
+                </div>
+              </div>
+
+              <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+                <p className="font-medium text-foreground text-sm">Install OpenCode CLI:</p>
+                <div className="flex items-center gap-2">
+                  <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground overflow-x-auto">
+                    {opencodeCliStatus?.installCommand || 'npm install -g opencode'}
+                  </code>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() =>
+                      copyCommand(opencodeCliStatus?.installCommand || 'npm install -g opencode')
+                    }
+                  >
+                    <Copy className="w-4 h-4" />
+                  </Button>
+                </div>
+                <a
+                  href="https://github.com/opencode-ai/opencode"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center text-sm text-brand-500 hover:underline mt-2"
+                >
+                  View installation docs
+                  <ExternalLink className="w-3 h-3 ml-1" />
+                </a>
+              </div>
+            </div>
+          )}
+
+          {/* Installed but not authenticated */}
+          {opencodeCliStatus?.installed &&
+            !opencodeCliStatus?.auth?.authenticated &&
+            !isChecking && (
+              <div className="space-y-4">
+                <div className="flex items-start gap-3 p-4 rounded-lg bg-amber-500/10 border border-amber-500/20">
+                  <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+                  <div className="flex-1">
+                    <p className="font-medium text-foreground">OpenCode CLI not authenticated</p>
+                    <p className="text-sm text-muted-foreground mt-1">
+                      Run the login command to authenticate with OpenCode.
+                    </p>
+                  </div>
+                </div>
+
+                <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+                  <p className="text-sm text-muted-foreground">
+                    Run the login command in your terminal, then complete authentication in your
+                    browser:
+                  </p>
+                  <div className="flex items-center gap-2">
+                    <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                      {opencodeCliStatus?.loginCommand || 'opencode auth login'}
+                    </code>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() =>
+                        copyCommand(opencodeCliStatus?.loginCommand || 'opencode auth login')
+                      }
+                    >
+                      <Copy className="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <Button
+                    onClick={handleLogin}
+                    disabled={isLoggingIn}
+                    className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                  >
+                    {isLoggingIn ? (
+                      <>
+                        <Spinner size="sm" variant="foreground" className="mr-2" />
+                        Waiting for login...
+                      </>
+                    ) : (
+                      'Copy Command & Wait for Login'
+                    )}
+                  </Button>
+                </div>
+              </div>
+            )}
+
+          {/* Loading State */}
+          {isChecking && (
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+              <Spinner size="md" />
+              <div>
+                <p className="font-medium text-foreground">Checking OpenCode CLI status...</p>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Navigation */}
+      <div className="flex justify-between pt-4">
+        <Button variant="ghost" onClick={onBack} className="text-muted-foreground">
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          Back
+        </Button>
+        <div className="flex gap-2">
+          <Button variant="ghost" onClick={onSkip} className="text-muted-foreground">
+            {isReady ? 'Skip' : 'Skip for now'}
+          </Button>
+          <Button
+            onClick={onNext}
+            className="bg-brand-500 hover:bg-brand-600 text-white"
+            data-testid="opencode-next-button"
+          >
+            {isReady ? 'Continue' : 'Continue without OpenCode'}
+            <ArrowRight className="w-4 h-4 ml-2" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Info note */}
+      <p className="text-xs text-muted-foreground text-center">
+        You can always configure OpenCode later in Settings
+      </p>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/steps/providers-setup-step.tsx b/temp_repo/apps/ui/src/components/views/setup-view/steps/providers-setup-step.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..efec9ea89c059fa791e43690459590ba94bbedf1
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/steps/providers-setup-step.tsx
@@ -0,0 +1,2179 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { useSetupStore } from '@/store/setup-store';
+import { useAppStore } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import {
+  ArrowRight,
+  ArrowLeft,
+  CheckCircle2,
+  Key,
+  ExternalLink,
+  Copy,
+  RefreshCw,
+  Download,
+  XCircle,
+  Trash2,
+  AlertTriangle,
+  Terminal,
+  AlertCircle,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+import {
+  AnthropicIcon,
+  CursorIcon,
+  OpenAIIcon,
+  OpenCodeIcon,
+  GeminiIcon,
+  CopilotIcon,
+} from '@/components/ui/provider-icon';
+import { TerminalOutput } from '../components';
+import { useCliInstallation, useTokenSave } from '../hooks';
+
+interface ProvidersSetupStepProps {
+  onNext: () => void;
+  onBack: () => void;
+}
+
+type ProviderTab = 'claude' | 'cursor' | 'codex' | 'opencode' | 'gemini' | 'copilot';
+
+// ============================================================================
+// Claude Content
+// ============================================================================
+function ClaudeContent() {
+  const {
+    claudeCliStatus,
+    claudeAuthStatus,
+    setClaudeCliStatus,
+    setClaudeAuthStatus,
+    setClaudeInstallProgress,
+    setClaudeIsVerifying,
+  } = useSetupStore();
+  const { setApiKeys, apiKeys } = useAppStore();
+
+  const [apiKey, setApiKey] = useState('');
+  const [isChecking, setIsChecking] = useState(false);
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [verificationError, setVerificationError] = useState<string | null>(null);
+  const [isDeletingApiKey, setIsDeletingApiKey] = useState(false);
+  const hasVerifiedRef = useRef(false);
+
+  const installApi = useCallback(
+    () => getElectronAPI().setup?.installClaude() || Promise.reject(),
+    []
+  );
+  const getStoreState = useCallback(() => useSetupStore.getState().claudeCliStatus, []);
+
+  // Auto-verify CLI authentication
+  const verifyAuth = useCallback(async () => {
+    // Guard against duplicate verification
+    if (hasVerifiedRef.current) {
+      return;
+    }
+
+    setIsVerifying(true);
+    setClaudeIsVerifying(true); // Update store for parent to see
+    setVerificationError(null);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.verifyClaudeAuth) {
+        return;
+      }
+      const result = await api.setup.verifyClaudeAuth('cli');
+      const hasLimitReachedError =
+        result.error?.toLowerCase().includes('limit reached') ||
+        result.error?.toLowerCase().includes('rate limit');
+
+      if (result.authenticated && !hasLimitReachedError) {
+        hasVerifiedRef.current = true;
+        // Use getState() to avoid dependency on claudeAuthStatus
+        const currentAuthStatus = useSetupStore.getState().claudeAuthStatus;
+        setClaudeAuthStatus({
+          authenticated: true,
+          method: 'cli_authenticated',
+          hasCredentialsFile: currentAuthStatus?.hasCredentialsFile || false,
+        });
+        toast.success('Claude CLI authenticated!');
+      } else if (hasLimitReachedError) {
+        setVerificationError('Rate limit reached. Please try again later.');
+      } else if (result.error) {
+        setVerificationError(result.error);
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Verification failed';
+      setVerificationError(errorMessage);
+    } finally {
+      setIsVerifying(false);
+      setClaudeIsVerifying(false); // Update store when done
+    }
+  }, [setClaudeAuthStatus, setClaudeIsVerifying]);
+
+  // Check status and auto-verify
+  const checkStatus = useCallback(async () => {
+    setIsChecking(true);
+    setVerificationError(null);
+    // Reset verification guard to allow fresh verification (for manual refresh)
+    hasVerifiedRef.current = false;
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.getClaudeStatus) return;
+      const result = await api.setup.getClaudeStatus();
+      if (result.success) {
+        setClaudeCliStatus({
+          installed: result.installed ?? false,
+          version: result.version ?? null,
+          path: result.path ?? null,
+          method: 'none',
+        });
+
+        if (result.installed) {
+          toast.success('Claude CLI installed!');
+          // Auto-verify if CLI is installed
+          setIsChecking(false);
+          await verifyAuth();
+          return;
+        }
+      }
+    } catch {
+      // Ignore errors
+    } finally {
+      setIsChecking(false);
+    }
+  }, [setClaudeCliStatus, verifyAuth]);
+
+  const onInstallSuccess = useCallback(() => {
+    hasVerifiedRef.current = false;
+    checkStatus();
+  }, [checkStatus]);
+
+  const { isInstalling, installProgress, install } = useCliInstallation({
+    cliType: 'claude',
+    installApi,
+    onProgressEvent: getElectronAPI().setup?.onInstallProgress,
+    onSuccess: onInstallSuccess,
+    getStoreState,
+  });
+
+  const { isSaving: isSavingApiKey, saveToken: saveApiKeyToken } = useTokenSave({
+    provider: 'anthropic',
+    onSuccess: () => {
+      setClaudeAuthStatus({
+        authenticated: true,
+        method: 'api_key',
+        hasCredentialsFile: false,
+        apiKeyValid: true,
+      });
+      setApiKeys({ ...apiKeys, anthropic: apiKey });
+      toast.success('API key saved successfully!');
+    },
+  });
+
+  const deleteApiKey = useCallback(async () => {
+    setIsDeletingApiKey(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.deleteApiKey) {
+        toast.error('Delete API not available');
+        return;
+      }
+      const result = await api.setup.deleteApiKey('anthropic');
+      if (result.success) {
+        setApiKey('');
+        setApiKeys({ ...apiKeys, anthropic: '' });
+        // Use getState() to avoid dependency on claudeAuthStatus
+        const currentAuthStatus = useSetupStore.getState().claudeAuthStatus;
+        setClaudeAuthStatus({
+          authenticated: false,
+          method: 'none',
+          hasCredentialsFile: currentAuthStatus?.hasCredentialsFile || false,
+        });
+        // Reset verification guard so next check can verify again
+        hasVerifiedRef.current = false;
+        toast.success('API key deleted successfully');
+      }
+    } catch {
+      toast.error('Failed to delete API key');
+    } finally {
+      setIsDeletingApiKey(false);
+    }
+  }, [apiKeys, setApiKeys, setClaudeAuthStatus]);
+
+  useEffect(() => {
+    setClaudeInstallProgress({ isInstalling, output: installProgress.output });
+  }, [isInstalling, installProgress, setClaudeInstallProgress]);
+
+  useEffect(() => {
+    checkStatus();
+  }, [checkStatus]);
+
+  const copyCommand = (command: string) => {
+    navigator.clipboard.writeText(command);
+    toast.success('Command copied to clipboard');
+  };
+
+  const hasApiKey =
+    !!apiKeys.anthropic ||
+    claudeAuthStatus?.method === 'api_key' ||
+    claudeAuthStatus?.method === 'api_key_env';
+
+  const isCliAuthenticated = claudeAuthStatus?.method === 'cli_authenticated';
+  const isReady = claudeCliStatus?.installed && claudeAuthStatus?.authenticated;
+
+  return (
+    <Card className="bg-card border-border">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg flex items-center gap-2">
+            <AnthropicIcon className="w-5 h-5" />
+            Claude CLI Status
+          </CardTitle>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={checkStatus}
+            disabled={isChecking || isVerifying}
+          >
+            {isChecking || isVerifying ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <CardDescription>
+          {claudeCliStatus?.installed
+            ? claudeAuthStatus?.authenticated
+              ? `Authenticated${claudeCliStatus.version ? ` (v${claudeCliStatus.version})` : ''}`
+              : isVerifying
+                ? 'Verifying authentication...'
+                : 'Installed but not authenticated'
+            : 'Not installed on your system'}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Success State - CLI Ready */}
+        {isReady && (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">CLI Installed</p>
+                <p className="text-sm text-muted-foreground">
+                  {claudeCliStatus?.version && `Version: ${claudeCliStatus.version}`}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <p className="font-medium text-foreground">
+                {isCliAuthenticated ? 'CLI Authenticated' : 'API Key Configured'}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Checking/Verifying State */}
+        {(isChecking || isVerifying) && (
+          <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+            <Spinner size="md" />
+            <p className="font-medium text-foreground">
+              {isChecking ? 'Checking Claude CLI status...' : 'Verifying authentication...'}
+            </p>
+          </div>
+        )}
+
+        {/* Not Installed */}
+        {!claudeCliStatus?.installed && !isChecking && !isVerifying && (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <XCircle className="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <p className="font-medium text-foreground">Claude CLI not found</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Install Claude CLI to use Claude Code subscription.
+                </p>
+              </div>
+            </div>
+            <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <p className="font-medium text-foreground text-sm">Install Claude CLI:</p>
+              <div className="space-y-2">
+                <Label className="text-sm text-muted-foreground">macOS / Linux</Label>
+                <div className="flex items-center gap-2">
+                  <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground overflow-x-auto">
+                    curl -fsSL https://claude.ai/install.sh | bash
+                  </code>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => copyCommand('curl -fsSL https://claude.ai/install.sh | bash')}
+                  >
+                    <Copy className="w-4 h-4" />
+                  </Button>
+                </div>
+              </div>
+              {isInstalling && <TerminalOutput lines={installProgress.output} />}
+              <Button
+                onClick={install}
+                disabled={isInstalling}
+                className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+              >
+                {isInstalling ? (
+                  <>
+                    <Spinner size="sm" variant="foreground" className="mr-2" />
+                    Installing...
+                  </>
+                ) : (
+                  <>
+                    <Download className="w-4 h-4 mr-2" />
+                    Auto Install
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Installed but not authenticated */}
+        {claudeCliStatus?.installed &&
+          !claudeAuthStatus?.authenticated &&
+          !isChecking &&
+          !isVerifying && (
+            <div className="space-y-4">
+              {/* Show CLI installed toast */}
+              <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+                <CheckCircle2 className="w-5 h-5 text-green-500" />
+                <div>
+                  <p className="font-medium text-foreground">CLI Installed</p>
+                  <p className="text-sm text-muted-foreground">
+                    {claudeCliStatus?.version && `Version: ${claudeCliStatus.version}`}
+                  </p>
+                </div>
+              </div>
+
+              {/* Error state */}
+              {verificationError && (
+                <div className="flex items-start gap-3 p-4 rounded-lg bg-red-500/10 border border-red-500/20">
+                  <XCircle className="w-5 h-5 text-red-500 shrink-0" />
+                  <div>
+                    <p className="font-medium text-foreground">Authentication failed</p>
+                    <p className="text-sm text-red-400 mt-1">{verificationError}</p>
+                  </div>
+                </div>
+              )}
+
+              {/* Not authenticated warning */}
+              <div className="flex items-start gap-3 p-4 rounded-lg bg-amber-500/10 border border-amber-500/20">
+                <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+                <div className="flex-1">
+                  <p className="font-medium text-foreground">Claude CLI not authenticated</p>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    Run <code className="bg-muted px-1 rounded">claude login</code> in your terminal
+                    or provide an API key below.
+                  </p>
+                </div>
+              </div>
+
+              {/* API Key alternative */}
+              <Accordion type="single" collapsible className="w-full">
+                <AccordionItem value="api-key" className="border-border">
+                  <AccordionTrigger className="hover:no-underline">
+                    <div className="flex items-center gap-3">
+                      <Key className="w-5 h-5 text-muted-foreground" />
+                      <span className="font-medium">Use Anthropic API Key instead</span>
+                    </div>
+                  </AccordionTrigger>
+                  <AccordionContent className="pt-4 space-y-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="anthropic-key" className="text-foreground">
+                        Anthropic API Key
+                      </Label>
+                      <Input
+                        id="anthropic-key"
+                        type="password"
+                        placeholder="sk-ant-..."
+                        value={apiKey}
+                        onChange={(e) => setApiKey(e.target.value)}
+                        className="bg-input border-border text-foreground"
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        Don&apos;t have an API key?{' '}
+                        <a
+                          href="https://console.anthropic.com/settings/keys"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-brand-500 hover:underline"
+                        >
+                          Get one from Anthropic Console
+                          <ExternalLink className="w-3 h-3 inline ml-1" />
+                        </a>
+                      </p>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button
+                        onClick={() => saveApiKeyToken(apiKey)}
+                        disabled={isSavingApiKey || !apiKey.trim()}
+                        className="flex-1 bg-brand-500 hover:bg-brand-600 text-white"
+                      >
+                        {isSavingApiKey ? (
+                          <Spinner size="sm" variant="foreground" />
+                        ) : (
+                          'Save API Key'
+                        )}
+                      </Button>
+                      {hasApiKey && (
+                        <Button
+                          onClick={deleteApiKey}
+                          disabled={isDeletingApiKey}
+                          variant="outline"
+                          className="border-red-500/50 text-red-500 hover:bg-red-500/10"
+                        >
+                          {isDeletingApiKey ? (
+                            <Spinner size="sm" />
+                          ) : (
+                            <Trash2 className="w-4 h-4" />
+                          )}
+                        </Button>
+                      )}
+                    </div>
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </div>
+          )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ============================================================================
+// Cursor Content
+// ============================================================================
+function CursorContent() {
+  const { cursorCliStatus, setCursorCliStatus } = useSetupStore();
+  const [isChecking, setIsChecking] = useState(false);
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const pollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const checkStatus = useCallback(async () => {
+    setIsChecking(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.getCursorStatus) return;
+      const result = await api.setup.getCursorStatus();
+      if (result.success) {
+        setCursorCliStatus({
+          installed: result.installed ?? false,
+          version: result.version,
+          path: result.path,
+          auth: result.auth,
+          installCommand: result.installCommand,
+          loginCommand: result.loginCommand,
+        });
+        if (result.auth?.authenticated) {
+          toast.success('Cursor CLI is ready!');
+        }
+      }
+    } catch {
+      // Ignore errors
+    } finally {
+      setIsChecking(false);
+    }
+  }, [setCursorCliStatus]);
+
+  useEffect(() => {
+    checkStatus();
+    return () => {
+      if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
+    };
+  }, [checkStatus]);
+
+  const copyCommand = (command: string) => {
+    navigator.clipboard.writeText(command);
+    toast.success('Command copied to clipboard');
+  };
+
+  const handleLogin = async () => {
+    setIsLoggingIn(true);
+    try {
+      const loginCommand = cursorCliStatus?.loginCommand || 'cursor-agent login';
+      await navigator.clipboard.writeText(loginCommand);
+      toast.info('Login command copied! Paste in terminal to authenticate.');
+
+      let attempts = 0;
+      pollIntervalRef.current = setInterval(async () => {
+        attempts++;
+        try {
+          const api = getElectronAPI();
+          if (!api.setup?.getCursorStatus) return;
+          const result = await api.setup.getCursorStatus();
+          if (result.auth?.authenticated) {
+            if (pollIntervalRef.current) {
+              clearInterval(pollIntervalRef.current);
+              pollIntervalRef.current = null;
+            }
+            setCursorCliStatus({
+              ...cursorCliStatus,
+              installed: result.installed ?? true,
+              version: result.version,
+              path: result.path,
+              auth: result.auth,
+            });
+            setIsLoggingIn(false);
+            toast.success('Successfully logged in to Cursor!');
+          }
+        } catch {
+          // Ignore
+        }
+        if (attempts >= 60) {
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+          }
+          setIsLoggingIn(false);
+          toast.error('Login timed out. Please try again.');
+        }
+      }, 2000);
+    } catch {
+      toast.error('Failed to start login process');
+      setIsLoggingIn(false);
+    }
+  };
+
+  const isReady = cursorCliStatus?.installed && cursorCliStatus?.auth?.authenticated;
+
+  return (
+    <Card className="bg-card border-border">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg flex items-center gap-2">
+            <CursorIcon className="w-5 h-5" />
+            Cursor CLI Status
+          </CardTitle>
+          <Button variant="ghost" size="sm" onClick={checkStatus} disabled={isChecking}>
+            {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <CardDescription>
+          {cursorCliStatus?.installed
+            ? cursorCliStatus.auth?.authenticated
+              ? `Authenticated${cursorCliStatus.version ? ` (v${cursorCliStatus.version})` : ''}`
+              : 'Installed but not authenticated'
+            : 'Not installed on your system'}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {isReady && (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">CLI Installed</p>
+                <p className="text-sm text-muted-foreground">
+                  {cursorCliStatus?.version && `Version: ${cursorCliStatus.version}`}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <p className="font-medium text-foreground">Authenticated</p>
+            </div>
+          </div>
+        )}
+
+        {!cursorCliStatus?.installed && !isChecking && (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <XCircle className="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <p className="font-medium text-foreground">Cursor CLI not found</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Install Cursor IDE to use Cursor AI agent.
+                </p>
+              </div>
+            </div>
+            <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <p className="font-medium text-foreground text-sm">Install Cursor:</p>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground overflow-x-auto">
+                  {cursorCliStatus?.installCommand || 'npm install -g @anthropic/cursor-agent'}
+                </code>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() =>
+                    copyCommand(
+                      cursorCliStatus?.installCommand || 'npm install -g @anthropic/cursor-agent'
+                    )
+                  }
+                >
+                  <Copy className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {cursorCliStatus?.installed && !cursorCliStatus?.auth?.authenticated && !isChecking && (
+          <div className="space-y-4">
+            {/* Show CLI installed toast */}
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">CLI Installed</p>
+                <p className="text-sm text-muted-foreground">
+                  {cursorCliStatus?.version && `Version: ${cursorCliStatus.version}`}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-3 p-4 rounded-lg bg-amber-500/10 border border-amber-500/20">
+              <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <p className="font-medium text-foreground">Cursor CLI not authenticated</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Run the login command to authenticate.
+                </p>
+              </div>
+            </div>
+            <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <div className="flex items-center gap-2">
+                <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                  {cursorCliStatus?.loginCommand || 'cursor-agent login'}
+                </code>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => copyCommand(cursorCliStatus?.loginCommand || 'cursor-agent login')}
+                >
+                  <Copy className="w-4 h-4" />
+                </Button>
+              </div>
+              <Button
+                onClick={handleLogin}
+                disabled={isLoggingIn}
+                className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+              >
+                {isLoggingIn ? (
+                  <>
+                    <Spinner size="sm" variant="foreground" className="mr-2" />
+                    Waiting for login...
+                  </>
+                ) : (
+                  'Copy Command & Wait for Login'
+                )}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {isChecking && (
+          <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+            <Spinner size="md" />
+            <p className="font-medium text-foreground">Checking Cursor CLI status...</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ============================================================================
+// Codex Content
+// ============================================================================
+function CodexContent() {
+  const { codexCliStatus, codexAuthStatus, setCodexCliStatus, setCodexAuthStatus } =
+    useSetupStore();
+  const { setApiKeys, apiKeys } = useAppStore();
+  const [isChecking, setIsChecking] = useState(false);
+  const [apiKey, setApiKey] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const pollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const checkStatus = useCallback(async () => {
+    setIsChecking(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.getCodexStatus) return;
+      const result = await api.setup.getCodexStatus();
+      if (result.success) {
+        setCodexCliStatus({
+          installed: result.installed ?? false,
+          version: result.version ?? null,
+          path: result.path ?? null,
+          method: 'none',
+        });
+        if (result.auth?.authenticated) {
+          const validMethods = ['api_key_env', 'api_key', 'cli_authenticated', 'none'] as const;
+          type CodexAuthMethod = (typeof validMethods)[number];
+          const method: CodexAuthMethod = validMethods.includes(
+            result.auth.method as CodexAuthMethod
+          )
+            ? (result.auth.method as CodexAuthMethod)
+            : 'cli_authenticated';
+          setCodexAuthStatus({
+            authenticated: true,
+            method,
+          });
+          toast.success('Codex CLI is ready!');
+        }
+      }
+    } catch {
+      // Ignore
+    } finally {
+      setIsChecking(false);
+    }
+  }, [setCodexCliStatus, setCodexAuthStatus]);
+
+  useEffect(() => {
+    checkStatus();
+    return () => {
+      if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
+    };
+  }, [checkStatus]);
+
+  const copyCommand = (command: string) => {
+    navigator.clipboard.writeText(command);
+    toast.success('Command copied to clipboard');
+  };
+
+  const handleSaveApiKey = async () => {
+    if (!apiKey.trim()) return;
+    setIsSaving(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.saveApiKey) {
+        toast.error('Save API not available');
+        return;
+      }
+      const result = await api.setup.saveApiKey('openai', apiKey);
+      if (result.success) {
+        setApiKeys({ ...apiKeys, openai: apiKey });
+        setCodexAuthStatus({ authenticated: true, method: 'api_key' });
+        toast.success('API key saved successfully!');
+      }
+    } catch {
+      toast.error('Failed to save API key');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleLogin = async () => {
+    setIsLoggingIn(true);
+    try {
+      await navigator.clipboard.writeText('codex login');
+      toast.info('Login command copied! Paste in terminal to authenticate.');
+
+      let attempts = 0;
+      pollIntervalRef.current = setInterval(async () => {
+        attempts++;
+        try {
+          const api = getElectronAPI();
+          if (!api.setup?.getCodexStatus) return;
+          const result = await api.setup.getCodexStatus();
+          if (result.auth?.authenticated) {
+            if (pollIntervalRef.current) {
+              clearInterval(pollIntervalRef.current);
+              pollIntervalRef.current = null;
+            }
+            setCodexAuthStatus({ authenticated: true, method: 'cli_authenticated' });
+            setIsLoggingIn(false);
+            toast.success('Successfully logged in to Codex!');
+          }
+        } catch {
+          // Ignore
+        }
+        if (attempts >= 60) {
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+          }
+          setIsLoggingIn(false);
+          toast.error('Login timed out. Please try again.');
+        }
+      }, 2000);
+    } catch {
+      toast.error('Failed to start login process');
+      setIsLoggingIn(false);
+    }
+  };
+
+  const isReady = codexCliStatus?.installed && codexAuthStatus?.authenticated;
+
+  return (
+    <Card className="bg-card border-border">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg flex items-center gap-2">
+            <OpenAIIcon className="w-5 h-5" />
+            Codex CLI Status
+          </CardTitle>
+          <Button variant="ghost" size="sm" onClick={checkStatus} disabled={isChecking}>
+            {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <CardDescription>
+          {codexCliStatus?.installed
+            ? codexAuthStatus?.authenticated
+              ? `Authenticated${codexCliStatus.version ? ` (v${codexCliStatus.version})` : ''}`
+              : 'Installed but not authenticated'
+            : 'Not installed on your system'}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {isReady && (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">CLI Installed</p>
+                <p className="text-sm text-muted-foreground">
+                  {codexCliStatus?.version && `Version: ${codexCliStatus.version}`}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <p className="font-medium text-foreground">
+                {codexAuthStatus?.method === 'api_key' ? 'API Key Configured' : 'Authenticated'}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {!codexCliStatus?.installed && !isChecking && (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <XCircle className="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <p className="font-medium text-foreground">Codex CLI not found</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Install the Codex CLI to use OpenAI models.
+                </p>
+              </div>
+            </div>
+            <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <p className="font-medium text-foreground text-sm">Install Codex CLI:</p>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground overflow-x-auto">
+                  npm install -g @openai/codex
+                </code>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => copyCommand('npm install -g @openai/codex')}
+                >
+                  <Copy className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {codexCliStatus?.installed && !codexAuthStatus?.authenticated && !isChecking && (
+          <div className="space-y-4">
+            {/* Show CLI installed toast */}
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">CLI Installed</p>
+                <p className="text-sm text-muted-foreground">
+                  {codexCliStatus?.version && `Version: ${codexCliStatus.version}`}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-3 p-4 rounded-lg bg-amber-500/10 border border-amber-500/20">
+              <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <p className="font-medium text-foreground">Codex CLI not authenticated</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Run the login command or provide an API key below.
+                </p>
+              </div>
+            </div>
+
+            <Accordion type="single" collapsible className="w-full">
+              <AccordionItem value="cli" className="border-border">
+                <AccordionTrigger className="hover:no-underline">
+                  <div className="flex items-center gap-3">
+                    <Terminal className="w-5 h-5 text-muted-foreground" />
+                    <span className="font-medium">Codex CLI Login</span>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent className="pt-4 space-y-4">
+                  <div className="flex items-center gap-2">
+                    <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                      codex login
+                    </code>
+                    <Button variant="ghost" size="icon" onClick={() => copyCommand('codex login')}>
+                      <Copy className="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <Button
+                    onClick={handleLogin}
+                    disabled={isLoggingIn}
+                    className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                  >
+                    {isLoggingIn ? (
+                      <>
+                        <Spinner size="sm" variant="foreground" className="mr-2" />
+                        Waiting for login...
+                      </>
+                    ) : (
+                      'Copy Command & Wait for Login'
+                    )}
+                  </Button>
+                </AccordionContent>
+              </AccordionItem>
+
+              <AccordionItem value="api-key" className="border-border">
+                <AccordionTrigger className="hover:no-underline">
+                  <div className="flex items-center gap-3">
+                    <Key className="w-5 h-5 text-muted-foreground" />
+                    <span className="font-medium">OpenAI API Key</span>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent className="pt-4 space-y-4">
+                  <div className="space-y-2">
+                    <Input
+                      type="password"
+                      placeholder="sk-..."
+                      value={apiKey}
+                      onChange={(e) => setApiKey(e.target.value)}
+                      className="bg-input border-border text-foreground"
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      <a
+                        href="https://platform.openai.com/api-keys"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-brand-500 hover:underline"
+                      >
+                        Get an API key from OpenAI
+                        <ExternalLink className="w-3 h-3 inline ml-1" />
+                      </a>
+                    </p>
+                  </div>
+                  <Button
+                    onClick={handleSaveApiKey}
+                    disabled={isSaving || !apiKey.trim()}
+                    className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                  >
+                    {isSaving ? <Spinner size="sm" variant="foreground" /> : 'Save API Key'}
+                  </Button>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </div>
+        )}
+
+        {isChecking && (
+          <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+            <Spinner size="md" />
+            <p className="font-medium text-foreground">Checking Codex CLI status...</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ============================================================================
+// OpenCode Content
+// ============================================================================
+function OpencodeContent() {
+  const { opencodeCliStatus, setOpencodeCliStatus } = useSetupStore();
+  const [isChecking, setIsChecking] = useState(false);
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const pollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const checkStatus = useCallback(async () => {
+    setIsChecking(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.getOpencodeStatus) return;
+      const result = await api.setup.getOpencodeStatus();
+      if (result.success) {
+        // Derive install command from platform-specific options or use npm fallback
+        const installCommand =
+          result.installCommands?.npm ||
+          result.installCommands?.macos ||
+          result.installCommands?.linux;
+        setOpencodeCliStatus({
+          installed: result.installed ?? false,
+          version: result.version ?? null,
+          path: result.path ?? null,
+          auth: result.auth,
+          installCommand,
+          loginCommand: 'opencode auth login',
+        });
+        if (result.auth?.authenticated) {
+          toast.success('OpenCode CLI is ready!');
+        }
+      }
+    } catch {
+      // Ignore
+    } finally {
+      setIsChecking(false);
+    }
+  }, [setOpencodeCliStatus]);
+
+  useEffect(() => {
+    checkStatus();
+    return () => {
+      if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
+    };
+  }, [checkStatus]);
+
+  const copyCommand = (command: string) => {
+    navigator.clipboard.writeText(command);
+    toast.success('Command copied to clipboard');
+  };
+
+  const handleLogin = async () => {
+    setIsLoggingIn(true);
+    try {
+      const loginCommand = opencodeCliStatus?.loginCommand || 'opencode auth login';
+      await navigator.clipboard.writeText(loginCommand);
+      toast.info('Login command copied! Paste in terminal to authenticate.');
+
+      let attempts = 0;
+      pollIntervalRef.current = setInterval(async () => {
+        attempts++;
+        try {
+          const api = getElectronAPI();
+          if (!api.setup?.getOpencodeStatus) return;
+          const result = await api.setup.getOpencodeStatus();
+          if (result.auth?.authenticated) {
+            if (pollIntervalRef.current) {
+              clearInterval(pollIntervalRef.current);
+              pollIntervalRef.current = null;
+            }
+            setOpencodeCliStatus({
+              ...opencodeCliStatus,
+              installed: result.installed ?? true,
+              version: result.version,
+              path: result.path,
+              auth: result.auth,
+            });
+            setIsLoggingIn(false);
+            toast.success('Successfully logged in to OpenCode!');
+          }
+        } catch {
+          // Ignore
+        }
+        if (attempts >= 60) {
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+          }
+          setIsLoggingIn(false);
+          toast.error('Login timed out. Please try again.');
+        }
+      }, 2000);
+    } catch {
+      toast.error('Failed to start login process');
+      setIsLoggingIn(false);
+    }
+  };
+
+  const isReady = opencodeCliStatus?.installed && opencodeCliStatus?.auth?.authenticated;
+
+  return (
+    <Card className="bg-card border-border">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg flex items-center gap-2">
+            <OpenCodeIcon className="w-5 h-5" />
+            OpenCode CLI Status
+          </CardTitle>
+          <Button variant="ghost" size="sm" onClick={checkStatus} disabled={isChecking}>
+            {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <CardDescription>
+          {opencodeCliStatus?.installed
+            ? opencodeCliStatus.auth?.authenticated
+              ? `Authenticated${opencodeCliStatus.version ? ` (v${opencodeCliStatus.version})` : ''}`
+              : 'Installed but not authenticated'
+            : 'Not installed on your system'}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {isReady && (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">CLI Installed</p>
+                <p className="text-sm text-muted-foreground">
+                  {opencodeCliStatus?.version && `Version: ${opencodeCliStatus.version}`}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <p className="font-medium text-foreground">Authenticated</p>
+            </div>
+          </div>
+        )}
+
+        {!opencodeCliStatus?.installed && !isChecking && (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <XCircle className="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <p className="font-medium text-foreground">OpenCode CLI not found</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Install the OpenCode CLI for free tier models and connected providers.
+                </p>
+              </div>
+            </div>
+            <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <p className="font-medium text-foreground text-sm">Install OpenCode CLI:</p>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground overflow-x-auto">
+                  {opencodeCliStatus?.installCommand ||
+                    'curl -fsSL https://opencode.ai/install | bash'}
+                </code>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() =>
+                    copyCommand(
+                      opencodeCliStatus?.installCommand ||
+                        'curl -fsSL https://opencode.ai/install | bash'
+                    )
+                  }
+                >
+                  <Copy className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {opencodeCliStatus?.installed && !opencodeCliStatus?.auth?.authenticated && !isChecking && (
+          <div className="space-y-4">
+            {/* Show CLI installed toast */}
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">CLI Installed</p>
+                <p className="text-sm text-muted-foreground">
+                  {opencodeCliStatus?.version && `Version: ${opencodeCliStatus.version}`}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-3 p-4 rounded-lg bg-amber-500/10 border border-amber-500/20">
+              <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <p className="font-medium text-foreground">OpenCode CLI not authenticated</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Run the login command to authenticate.
+                </p>
+              </div>
+            </div>
+            <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <div className="flex items-center gap-2">
+                <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                  {opencodeCliStatus?.loginCommand || 'opencode auth login'}
+                </code>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() =>
+                    copyCommand(opencodeCliStatus?.loginCommand || 'opencode auth login')
+                  }
+                >
+                  <Copy className="w-4 h-4" />
+                </Button>
+              </div>
+              <Button
+                onClick={handleLogin}
+                disabled={isLoggingIn}
+                className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+              >
+                {isLoggingIn ? (
+                  <>
+                    <Spinner size="sm" variant="foreground" className="mr-2" />
+                    Waiting for login...
+                  </>
+                ) : (
+                  'Copy Command & Wait for Login'
+                )}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {isChecking && (
+          <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+            <Spinner size="md" />
+            <p className="font-medium text-foreground">Checking OpenCode CLI status...</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ============================================================================
+// Gemini Content
+// ============================================================================
+function GeminiContent() {
+  const { geminiCliStatus, setGeminiCliStatus } = useSetupStore();
+  const { setApiKeys, apiKeys } = useAppStore();
+  const [isChecking, setIsChecking] = useState(false);
+  const [apiKey, setApiKey] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const pollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const checkStatus = useCallback(async () => {
+    setIsChecking(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.getGeminiStatus) return;
+      const result = await api.setup.getGeminiStatus();
+      if (result.success) {
+        setGeminiCliStatus({
+          installed: result.installed ?? false,
+          version: result.version,
+          path: result.path,
+          auth: result.auth,
+          installCommand: result.installCommand,
+          loginCommand: result.loginCommand,
+        });
+        if (result.auth?.authenticated) {
+          toast.success('Gemini CLI is ready!');
+        }
+      }
+    } catch {
+      // Ignore
+    } finally {
+      setIsChecking(false);
+    }
+  }, [setGeminiCliStatus]);
+
+  useEffect(() => {
+    checkStatus();
+    return () => {
+      if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
+    };
+  }, [checkStatus]);
+
+  const copyCommand = (command: string) => {
+    navigator.clipboard.writeText(command);
+    toast.success('Command copied to clipboard');
+  };
+
+  const handleSaveApiKey = async () => {
+    if (!apiKey.trim()) return;
+    setIsSaving(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.saveApiKey) {
+        toast.error('Save API not available');
+        return;
+      }
+      const result = await api.setup.saveApiKey('google', apiKey);
+      if (result.success) {
+        setApiKeys({ ...apiKeys, google: apiKey });
+        setGeminiCliStatus({
+          ...geminiCliStatus,
+          installed: geminiCliStatus?.installed ?? false,
+          auth: { authenticated: true, method: 'api_key' },
+        });
+        toast.success('API key saved successfully!');
+      }
+    } catch {
+      toast.error('Failed to save API key');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleLogin = async () => {
+    setIsLoggingIn(true);
+    try {
+      const loginCommand = geminiCliStatus?.loginCommand || 'gemini auth login';
+      await navigator.clipboard.writeText(loginCommand);
+      toast.info('Login command copied! Paste in terminal to authenticate.');
+
+      let attempts = 0;
+      pollIntervalRef.current = setInterval(async () => {
+        attempts++;
+        try {
+          const api = getElectronAPI();
+          if (!api.setup?.getGeminiStatus) return;
+          const result = await api.setup.getGeminiStatus();
+          if (result.auth?.authenticated) {
+            if (pollIntervalRef.current) {
+              clearInterval(pollIntervalRef.current);
+              pollIntervalRef.current = null;
+            }
+            setGeminiCliStatus({
+              ...geminiCliStatus,
+              installed: result.installed ?? true,
+              version: result.version,
+              path: result.path,
+              auth: result.auth,
+            });
+            setIsLoggingIn(false);
+            toast.success('Successfully logged in to Gemini!');
+          }
+        } catch {
+          // Ignore
+        }
+        if (attempts >= 60) {
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+          }
+          setIsLoggingIn(false);
+          toast.error('Login timed out. Please try again.');
+        }
+      }, 2000);
+    } catch {
+      toast.error('Failed to start login process');
+      setIsLoggingIn(false);
+    }
+  };
+
+  const isReady = geminiCliStatus?.installed && geminiCliStatus?.auth?.authenticated;
+
+  return (
+    <Card className="bg-card border-border">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg flex items-center gap-2">
+            <GeminiIcon className="w-5 h-5" />
+            Gemini CLI Status
+          </CardTitle>
+          <Button variant="ghost" size="sm" onClick={checkStatus} disabled={isChecking}>
+            {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <CardDescription>
+          {geminiCliStatus?.installed
+            ? geminiCliStatus.auth?.authenticated
+              ? `Authenticated${geminiCliStatus.version ? ` (v${geminiCliStatus.version})` : ''}`
+              : 'Installed but not authenticated'
+            : 'Not installed on your system'}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {isReady && (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">CLI Installed</p>
+                <p className="text-sm text-muted-foreground">
+                  {geminiCliStatus?.version && `Version: ${geminiCliStatus.version}`}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <p className="font-medium text-foreground">Authenticated</p>
+            </div>
+          </div>
+        )}
+
+        {!geminiCliStatus?.installed && !isChecking && (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <XCircle className="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <p className="font-medium text-foreground">Gemini CLI not found</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Install the Gemini CLI to use Google Gemini models.
+                </p>
+              </div>
+            </div>
+            <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <p className="font-medium text-foreground text-sm">Install Gemini CLI:</p>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground overflow-x-auto">
+                  {geminiCliStatus?.installCommand || 'npm install -g @google/gemini-cli'}
+                </code>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() =>
+                    copyCommand(
+                      geminiCliStatus?.installCommand || 'npm install -g @google/gemini-cli'
+                    )
+                  }
+                >
+                  <Copy className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {geminiCliStatus?.installed && !geminiCliStatus?.auth?.authenticated && !isChecking && (
+          <div className="space-y-4">
+            {/* Show CLI installed toast */}
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">CLI Installed</p>
+                <p className="text-sm text-muted-foreground">
+                  {geminiCliStatus?.version && `Version: ${geminiCliStatus.version}`}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-3 p-4 rounded-lg bg-amber-500/10 border border-amber-500/20">
+              <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <p className="font-medium text-foreground">Gemini CLI not authenticated</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Run the login command or provide a Google API key below.
+                </p>
+              </div>
+            </div>
+
+            <Accordion type="single" collapsible className="w-full">
+              <AccordionItem value="cli" className="border-border">
+                <AccordionTrigger className="hover:no-underline">
+                  <div className="flex items-center gap-3">
+                    <Terminal className="w-5 h-5 text-muted-foreground" />
+                    <span className="font-medium">Google OAuth Login</span>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent className="pt-4 space-y-4">
+                  <div className="flex items-center gap-2">
+                    <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                      {geminiCliStatus?.loginCommand || 'gemini auth login'}
+                    </code>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() =>
+                        copyCommand(geminiCliStatus?.loginCommand || 'gemini auth login')
+                      }
+                    >
+                      <Copy className="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <Button
+                    onClick={handleLogin}
+                    disabled={isLoggingIn}
+                    className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                  >
+                    {isLoggingIn ? (
+                      <>
+                        <Spinner size="sm" variant="foreground" className="mr-2" />
+                        Waiting for login...
+                      </>
+                    ) : (
+                      'Copy Command & Wait for Login'
+                    )}
+                  </Button>
+                </AccordionContent>
+              </AccordionItem>
+
+              <AccordionItem value="api-key" className="border-border">
+                <AccordionTrigger className="hover:no-underline">
+                  <div className="flex items-center gap-3">
+                    <Key className="w-5 h-5 text-muted-foreground" />
+                    <span className="font-medium">Google API Key</span>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent className="pt-4 space-y-4">
+                  <div className="space-y-2">
+                    <Input
+                      type="password"
+                      placeholder="AIza..."
+                      value={apiKey}
+                      onChange={(e) => setApiKey(e.target.value)}
+                      className="bg-input border-border text-foreground"
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      <a
+                        href="https://aistudio.google.com/apikey"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-brand-500 hover:underline"
+                      >
+                        Get an API key from Google AI Studio
+                        <ExternalLink className="w-3 h-3 inline ml-1" />
+                      </a>
+                    </p>
+                  </div>
+                  <Button
+                    onClick={handleSaveApiKey}
+                    disabled={isSaving || !apiKey.trim()}
+                    className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+                  >
+                    {isSaving ? <Spinner size="sm" variant="foreground" /> : 'Save API Key'}
+                  </Button>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </div>
+        )}
+
+        {isChecking && (
+          <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+            <Spinner size="md" />
+            <p className="font-medium text-foreground">Checking Gemini CLI status...</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ============================================================================
+// Copilot Content
+// ============================================================================
+function CopilotContent() {
+  const { copilotCliStatus, setCopilotCliStatus } = useSetupStore();
+  const [isChecking, setIsChecking] = useState(false);
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const pollIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const checkStatus = useCallback(async () => {
+    setIsChecking(true);
+    try {
+      const api = getElectronAPI();
+      if (!api.setup?.getCopilotStatus) return;
+      const result = await api.setup.getCopilotStatus();
+      if (result.success) {
+        setCopilotCliStatus({
+          installed: result.installed ?? false,
+          version: result.version,
+          path: result.path,
+          auth: result.auth,
+          installCommand: result.installCommand,
+          loginCommand: result.loginCommand,
+        });
+        if (result.auth?.authenticated) {
+          toast.success('Copilot CLI is ready!');
+        }
+      }
+    } catch {
+      // Ignore
+    } finally {
+      setIsChecking(false);
+    }
+  }, [setCopilotCliStatus]);
+
+  useEffect(() => {
+    checkStatus();
+    return () => {
+      if (pollIntervalRef.current) clearInterval(pollIntervalRef.current);
+    };
+  }, [checkStatus]);
+
+  const copyCommand = (command: string) => {
+    navigator.clipboard.writeText(command);
+    toast.success('Command copied to clipboard');
+  };
+
+  const handleLogin = async () => {
+    setIsLoggingIn(true);
+    try {
+      const loginCommand = copilotCliStatus?.loginCommand || 'gh auth login';
+      await navigator.clipboard.writeText(loginCommand);
+      toast.info('Login command copied! Paste in terminal to authenticate.');
+
+      let attempts = 0;
+      pollIntervalRef.current = setInterval(async () => {
+        attempts++;
+        try {
+          const api = getElectronAPI();
+          if (!api.setup?.getCopilotStatus) return;
+          const result = await api.setup.getCopilotStatus();
+          if (result.auth?.authenticated) {
+            if (pollIntervalRef.current) {
+              clearInterval(pollIntervalRef.current);
+              pollIntervalRef.current = null;
+            }
+            setCopilotCliStatus({
+              ...copilotCliStatus,
+              installed: result.installed ?? true,
+              version: result.version,
+              path: result.path,
+              auth: result.auth,
+            });
+            setIsLoggingIn(false);
+            toast.success('Successfully authenticated with GitHub!');
+          }
+        } catch {
+          // Ignore
+        }
+        if (attempts >= 60) {
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+          }
+          setIsLoggingIn(false);
+          toast.error('Login timed out. Please try again.');
+        }
+      }, 2000);
+    } catch {
+      toast.error('Failed to start login process');
+      setIsLoggingIn(false);
+    }
+  };
+
+  const isReady = copilotCliStatus?.installed && copilotCliStatus?.auth?.authenticated;
+
+  return (
+    <Card className="bg-card border-border">
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg flex items-center gap-2">
+            <CopilotIcon className="w-5 h-5" />
+            GitHub Copilot CLI Status
+          </CardTitle>
+          <Button variant="ghost" size="sm" onClick={checkStatus} disabled={isChecking}>
+            {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
+          </Button>
+        </div>
+        <CardDescription>
+          {copilotCliStatus?.installed
+            ? copilotCliStatus.auth?.authenticated
+              ? `Authenticated${copilotCliStatus.version ? ` (v${copilotCliStatus.version})` : ''}`
+              : 'Installed but not authenticated'
+            : 'Not installed on your system'}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {isReady && (
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">SDK Installed</p>
+                <p className="text-sm text-muted-foreground">
+                  {copilotCliStatus?.version && `Version: ${copilotCliStatus.version}`}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">Authenticated</p>
+                {copilotCliStatus?.auth?.login && (
+                  <p className="text-sm text-muted-foreground">
+                    Logged in as {copilotCliStatus.auth.login}
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {!copilotCliStatus?.installed && !isChecking && (
+          <div className="space-y-4">
+            <div className="flex items-start gap-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <XCircle className="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <p className="font-medium text-foreground">Copilot CLI not found</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Install the GitHub Copilot CLI to use Copilot models.
+                </p>
+              </div>
+            </div>
+            <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <p className="font-medium text-foreground text-sm">Install Copilot CLI:</p>
+              <div className="flex items-center gap-2">
+                <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground overflow-x-auto">
+                  {copilotCliStatus?.installCommand || 'npm install -g @github/copilot'}
+                </code>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() =>
+                    copyCommand(
+                      copilotCliStatus?.installCommand || 'npm install -g @github/copilot'
+                    )
+                  }
+                >
+                  <Copy className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {copilotCliStatus?.installed && !copilotCliStatus?.auth?.authenticated && !isChecking && (
+          <div className="space-y-4">
+            {/* Show SDK installed toast */}
+            <div className="flex items-center gap-3 p-4 rounded-lg bg-green-500/10 border border-green-500/20">
+              <CheckCircle2 className="w-5 h-5 text-green-500" />
+              <div>
+                <p className="font-medium text-foreground">SDK Installed</p>
+                <p className="text-sm text-muted-foreground">
+                  {copilotCliStatus?.version && `Version: ${copilotCliStatus.version}`}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-start gap-3 p-4 rounded-lg bg-amber-500/10 border border-amber-500/20">
+              <AlertTriangle className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <p className="font-medium text-foreground">GitHub not authenticated</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Run the GitHub CLI login command to authenticate.
+                </p>
+              </div>
+            </div>
+            <div className="space-y-3 p-4 rounded-lg bg-muted/30 border border-border">
+              <div className="flex items-center gap-2">
+                <code className="flex-1 bg-muted px-3 py-2 rounded text-sm font-mono text-foreground">
+                  {copilotCliStatus?.loginCommand || 'gh auth login'}
+                </code>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => copyCommand(copilotCliStatus?.loginCommand || 'gh auth login')}
+                >
+                  <Copy className="w-4 h-4" />
+                </Button>
+              </div>
+              <Button
+                onClick={handleLogin}
+                disabled={isLoggingIn}
+                className="w-full bg-brand-500 hover:bg-brand-600 text-white"
+              >
+                {isLoggingIn ? (
+                  <>
+                    <Spinner size="sm" variant="foreground" className="mr-2" />
+                    Waiting for login...
+                  </>
+                ) : (
+                  'Copy Command & Wait for Login'
+                )}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {isChecking && (
+          <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+            <Spinner size="md" />
+            <p className="font-medium text-foreground">Checking Copilot CLI status...</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+export function ProvidersSetupStep({ onNext, onBack }: ProvidersSetupStepProps) {
+  const [activeTab, setActiveTab] = useState<ProviderTab>('claude');
+  const [isInitialChecking, setIsInitialChecking] = useState(true);
+  const hasCheckedRef = useRef(false);
+
+  const {
+    claudeCliStatus,
+    claudeAuthStatus,
+    claudeIsVerifying,
+    cursorCliStatus,
+    codexCliStatus,
+    codexAuthStatus,
+    opencodeCliStatus,
+    geminiCliStatus,
+    copilotCliStatus,
+    setClaudeCliStatus,
+    setCursorCliStatus,
+    setCodexCliStatus,
+    setCodexAuthStatus,
+    setOpencodeCliStatus,
+    setGeminiCliStatus,
+    setCopilotCliStatus,
+  } = useSetupStore();
+
+  // Check all providers on mount
+  const checkAllProviders = useCallback(async () => {
+    const api = getElectronAPI();
+
+    // Check Claude - only check CLI status, let ClaudeContent handle auth verification
+    const checkClaude = async () => {
+      try {
+        if (!api.setup?.getClaudeStatus) return;
+        const result = await api.setup.getClaudeStatus();
+        if (result.success) {
+          setClaudeCliStatus({
+            installed: result.installed ?? false,
+            version: result.version ?? null,
+            path: result.path ?? null,
+            method: 'none',
+          });
+          // Note: Auth verification is handled by ClaudeContent component to avoid duplicate calls
+        }
+      } catch {
+        // Ignore errors
+      }
+    };
+
+    // Check Cursor
+    const checkCursor = async () => {
+      try {
+        if (!api.setup?.getCursorStatus) return;
+        const result = await api.setup.getCursorStatus();
+        if (result.success) {
+          setCursorCliStatus({
+            installed: result.installed ?? false,
+            version: result.version,
+            path: result.path,
+            auth: result.auth,
+            installCommand: result.installCommand,
+            loginCommand: result.loginCommand,
+          });
+        }
+      } catch {
+        // Ignore errors
+      }
+    };
+
+    // Check Codex
+    const checkCodex = async () => {
+      try {
+        if (!api.setup?.getCodexStatus) return;
+        const result = await api.setup.getCodexStatus();
+        if (result.success) {
+          setCodexCliStatus({
+            installed: result.installed ?? false,
+            version: result.version ?? null,
+            path: result.path ?? null,
+            method: 'none',
+          });
+          if (result.auth?.authenticated) {
+            const validMethods = ['api_key_env', 'api_key', 'cli_authenticated', 'none'] as const;
+            type CodexAuthMethodType = (typeof validMethods)[number];
+            const method: CodexAuthMethodType = validMethods.includes(
+              result.auth.method as CodexAuthMethodType
+            )
+              ? (result.auth.method as CodexAuthMethodType)
+              : 'cli_authenticated';
+            setCodexAuthStatus({
+              authenticated: true,
+              method,
+            });
+          }
+        }
+      } catch {
+        // Ignore errors
+      }
+    };
+
+    // Check OpenCode
+    const checkOpencode = async () => {
+      try {
+        if (!api.setup?.getOpencodeStatus) return;
+        const result = await api.setup.getOpencodeStatus();
+        if (result.success) {
+          // Derive install command from platform-specific options or use npm fallback
+          const installCommand =
+            result.installCommands?.npm ||
+            result.installCommands?.macos ||
+            result.installCommands?.linux;
+          setOpencodeCliStatus({
+            installed: result.installed ?? false,
+            version: result.version ?? null,
+            path: result.path ?? null,
+            auth: result.auth,
+            installCommand,
+            loginCommand: 'opencode auth login',
+          });
+        }
+      } catch {
+        // Ignore errors
+      }
+    };
+
+    // Check Gemini
+    const checkGemini = async () => {
+      try {
+        if (!api.setup?.getGeminiStatus) return;
+        const result = await api.setup.getGeminiStatus();
+        if (result.success) {
+          setGeminiCliStatus({
+            installed: result.installed ?? false,
+            version: result.version,
+            path: result.path,
+            auth: result.auth,
+            installCommand: result.installCommand,
+            loginCommand: result.loginCommand,
+          });
+        }
+      } catch {
+        // Ignore errors
+      }
+    };
+
+    // Check Copilot
+    const checkCopilot = async () => {
+      try {
+        if (!api.setup?.getCopilotStatus) return;
+        const result = await api.setup.getCopilotStatus();
+        if (result.success) {
+          setCopilotCliStatus({
+            installed: result.installed ?? false,
+            version: result.version,
+            path: result.path,
+            auth: result.auth,
+            installCommand: result.installCommand,
+            loginCommand: result.loginCommand,
+          });
+        }
+      } catch {
+        // Ignore errors
+      }
+    };
+
+    // Run all checks in parallel
+    await Promise.all([
+      checkClaude(),
+      checkCursor(),
+      checkCodex(),
+      checkOpencode(),
+      checkGemini(),
+      checkCopilot(),
+    ]);
+    setIsInitialChecking(false);
+  }, [
+    setClaudeCliStatus,
+    setCursorCliStatus,
+    setCodexCliStatus,
+    setCodexAuthStatus,
+    setOpencodeCliStatus,
+    setGeminiCliStatus,
+    setCopilotCliStatus,
+  ]);
+
+  useEffect(() => {
+    if (!hasCheckedRef.current) {
+      hasCheckedRef.current = true;
+      checkAllProviders();
+    }
+  }, [checkAllProviders]);
+
+  // Determine status for each provider
+  const isClaudeInstalled = claudeCliStatus?.installed === true;
+  const isClaudeAuthenticated =
+    claudeAuthStatus?.authenticated === true &&
+    (claudeAuthStatus?.method === 'cli_authenticated' ||
+      claudeAuthStatus?.method === 'api_key' ||
+      claudeAuthStatus?.method === 'api_key_env');
+
+  const isCursorInstalled = cursorCliStatus?.installed === true;
+  const isCursorAuthenticated = cursorCliStatus?.auth?.authenticated === true;
+
+  const isCodexInstalled = codexCliStatus?.installed === true;
+  const isCodexAuthenticated = codexAuthStatus?.authenticated === true;
+
+  const isOpencodeInstalled = opencodeCliStatus?.installed === true;
+  const isOpencodeAuthenticated = opencodeCliStatus?.auth?.authenticated === true;
+
+  const isGeminiInstalled = geminiCliStatus?.installed === true;
+  const isGeminiAuthenticated = geminiCliStatus?.auth?.authenticated === true;
+
+  const isCopilotInstalled = copilotCliStatus?.installed === true;
+  const isCopilotAuthenticated = copilotCliStatus?.auth?.authenticated === true;
+
+  const hasAtLeastOneProvider =
+    isClaudeAuthenticated ||
+    isCursorAuthenticated ||
+    isCodexAuthenticated ||
+    isOpencodeAuthenticated ||
+    isGeminiAuthenticated ||
+    isCopilotAuthenticated;
+
+  type ProviderStatus = 'not_installed' | 'installed_not_auth' | 'authenticated' | 'verifying';
+
+  const getProviderStatus = (
+    installed: boolean,
+    authenticated: boolean,
+    isVerifying?: boolean
+  ): ProviderStatus => {
+    if (!installed) return 'not_installed';
+    if (isVerifying) return 'verifying';
+    if (!authenticated) return 'installed_not_auth';
+    return 'authenticated';
+  };
+
+  const providers = [
+    {
+      id: 'claude' as const,
+      label: 'Claude',
+      icon: AnthropicIcon,
+      status: getProviderStatus(isClaudeInstalled, isClaudeAuthenticated, claudeIsVerifying),
+      color: 'text-brand-500',
+    },
+    {
+      id: 'cursor' as const,
+      label: 'Cursor',
+      icon: CursorIcon,
+      status: getProviderStatus(isCursorInstalled, isCursorAuthenticated),
+      color: 'text-blue-500',
+    },
+    {
+      id: 'codex' as const,
+      label: 'Codex',
+      icon: OpenAIIcon,
+      status: getProviderStatus(isCodexInstalled, isCodexAuthenticated),
+      color: 'text-emerald-500',
+    },
+    {
+      id: 'opencode' as const,
+      label: 'OpenCode',
+      icon: OpenCodeIcon,
+      status: getProviderStatus(isOpencodeInstalled, isOpencodeAuthenticated),
+      color: 'text-green-500',
+    },
+    {
+      id: 'gemini' as const,
+      label: 'Gemini',
+      icon: GeminiIcon,
+      status: getProviderStatus(isGeminiInstalled, isGeminiAuthenticated),
+      color: 'text-blue-500',
+    },
+    {
+      id: 'copilot' as const,
+      label: 'Copilot',
+      icon: CopilotIcon,
+      status: getProviderStatus(isCopilotInstalled, isCopilotAuthenticated),
+      color: 'text-violet-500',
+    },
+  ];
+
+  const renderStatusIcon = (status: ProviderStatus) => {
+    switch (status) {
+      case 'authenticated':
+        return (
+          <CheckCircle2 className="w-3 h-3 text-green-500 absolute -top-1 -right-1.5 bg-background rounded-full" />
+        );
+      case 'verifying':
+        return (
+          <Spinner size="xs" className="absolute -top-1 -right-1.5 bg-background rounded-full" />
+        );
+      case 'installed_not_auth':
+        return (
+          <AlertCircle className="w-3 h-3 text-red-500 absolute -top-1 -right-1.5 bg-background rounded-full" />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center mb-6">
+        <h2 className="text-2xl font-bold text-foreground mb-2">AI Provider Setup</h2>
+        <p className="text-muted-foreground">Configure at least one AI provider to continue</p>
+      </div>
+
+      {isInitialChecking && (
+        <div className="flex items-center justify-center gap-2 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
+          <Spinner size="md" />
+          <p className="font-medium text-foreground">Checking provider status...</p>
+        </div>
+      )}
+
+      <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as ProviderTab)}>
+        <TabsList className="grid w-full grid-cols-6 h-auto p-1">
+          {providers.map((provider) => {
+            const Icon = provider.icon;
+            return (
+              <TabsTrigger
+                key={provider.id}
+                value={provider.id}
+                className={cn(
+                  'relative flex flex-col items-center gap-1 py-3 px-2',
+                  'data-[state=active]:bg-muted'
+                )}
+              >
+                <div className="relative">
+                  <Icon
+                    className={cn(
+                      'w-5 h-5',
+                      provider.status === 'authenticated'
+                        ? provider.color
+                        : provider.status === 'verifying'
+                          ? 'text-blue-500'
+                          : provider.status === 'installed_not_auth'
+                            ? 'text-amber-500'
+                            : 'text-muted-foreground'
+                    )}
+                  />
+                  {!isInitialChecking && renderStatusIcon(provider.status)}
+                </div>
+                <span className="text-xs font-medium">{provider.label}</span>
+              </TabsTrigger>
+            );
+          })}
+        </TabsList>
+
+        <div className="mt-6">
+          <TabsContent value="claude" className="mt-0">
+            <ClaudeContent />
+          </TabsContent>
+          <TabsContent value="cursor" className="mt-0">
+            <CursorContent />
+          </TabsContent>
+          <TabsContent value="codex" className="mt-0">
+            <CodexContent />
+          </TabsContent>
+          <TabsContent value="opencode" className="mt-0">
+            <OpencodeContent />
+          </TabsContent>
+          <TabsContent value="gemini" className="mt-0">
+            <GeminiContent />
+          </TabsContent>
+          <TabsContent value="copilot" className="mt-0">
+            <CopilotContent />
+          </TabsContent>
+        </div>
+      </Tabs>
+
+      <div className="flex justify-between pt-4">
+        <Button variant="ghost" onClick={onBack} className="text-muted-foreground">
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          Back
+        </Button>
+        <Button
+          onClick={onNext}
+          className={cn(
+            'bg-brand-500 hover:bg-brand-600 text-white',
+            !hasAtLeastOneProvider && 'opacity-50'
+          )}
+          data-testid="providers-next-button"
+        >
+          {hasAtLeastOneProvider ? 'Continue' : 'Skip for now'}
+          <ArrowRight className="w-4 h-4 ml-2" />
+        </Button>
+      </div>
+
+      {!hasAtLeastOneProvider && (
+        <p className="text-xs text-muted-foreground text-center">
+          You can configure providers later in Settings
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/steps/theme-step.tsx b/temp_repo/apps/ui/src/components/views/setup-view/steps/theme-step.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..36d999f573d97c3e8ffd3c566f2f1fa0ac4ce963
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/steps/theme-step.tsx
@@ -0,0 +1,123 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { ArrowRight, ArrowLeft, Check, Moon, Sun } from 'lucide-react';
+import { darkThemes, lightThemes } from '@/config/theme-options';
+import { useAppStore } from '@/store/app-store';
+import { cn } from '@/lib/utils';
+
+interface ThemeStepProps {
+  onNext: () => void;
+  onBack: () => void;
+}
+
+export function ThemeStep({ onNext, onBack }: ThemeStepProps) {
+  const { theme, setTheme, setPreviewTheme, currentProject, setProjectTheme } = useAppStore();
+  const [activeTab, setActiveTab] = useState<'dark' | 'light'>('dark');
+
+  const handleThemeHover = (themeValue: string) => {
+    setPreviewTheme(themeValue as typeof theme);
+  };
+
+  const handleThemeLeave = () => {
+    setPreviewTheme(null);
+  };
+
+  const handleThemeClick = (themeValue: string) => {
+    setTheme(themeValue as typeof theme);
+    // Clear the current project's theme so it uses the global theme
+    // This ensures "Use Global Theme" is checked and the project inherits the global theme
+    if (currentProject && currentProject.theme !== undefined) {
+      setProjectTheme(currentProject.id, null);
+    }
+    setPreviewTheme(null);
+  };
+
+  const themesToShow = activeTab === 'dark' ? darkThemes : lightThemes;
+
+  return (
+    <div className="space-y-6">
+      <div className="text-center">
+        <h2 className="text-3xl font-bold text-foreground mb-3">Choose Your Theme</h2>
+        <p className="text-muted-foreground max-w-md mx-auto">
+          Pick a theme that suits your style. Hover to preview, click to select.
+        </p>
+      </div>
+
+      {/* Dark/Light Tabs */}
+      <div className="flex justify-center gap-2">
+        <button
+          onClick={() => setActiveTab('dark')}
+          className={cn(
+            'flex items-center gap-2 px-6 py-2.5 rounded-lg font-medium transition-all duration-200',
+            activeTab === 'dark'
+              ? 'bg-brand-500 text-white shadow-lg shadow-brand-500/25'
+              : 'bg-accent/50 text-muted-foreground hover:bg-accent hover:text-foreground'
+          )}
+        >
+          <Moon className="w-4 h-4" />
+          Dark Themes
+        </button>
+        <button
+          onClick={() => setActiveTab('light')}
+          className={cn(
+            'flex items-center gap-2 px-6 py-2.5 rounded-lg font-medium transition-all duration-200',
+            activeTab === 'light'
+              ? 'bg-brand-500 text-white shadow-lg shadow-brand-500/25'
+              : 'bg-accent/50 text-muted-foreground hover:bg-accent hover:text-foreground'
+          )}
+        >
+          <Sun className="w-4 h-4" />
+          Light Themes
+        </button>
+      </div>
+
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+        {themesToShow.map((option) => {
+          const Icon = option.Icon;
+          const isSelected = theme === option.value;
+
+          return (
+            <button
+              key={option.value}
+              data-testid={option.testId}
+              onMouseEnter={() => handleThemeHover(option.value)}
+              onMouseLeave={handleThemeLeave}
+              onClick={() => handleThemeClick(option.value)}
+              className={cn(
+                'relative flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all duration-200',
+                'hover:scale-105 hover:shadow-lg',
+                isSelected
+                  ? 'border-brand-500 bg-brand-500/10'
+                  : 'border-border hover:border-brand-400 bg-card'
+              )}
+            >
+              {isSelected && (
+                <div className="absolute top-2 right-2">
+                  <Check className="w-4 h-4 text-brand-500" />
+                </div>
+              )}
+              <Icon className="w-6 h-6" style={{ color: option.color }} />
+              <span className="text-sm font-medium text-foreground">{option.label}</span>
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="flex justify-between pt-4">
+        <Button variant="ghost" onClick={onBack}>
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          Back
+        </Button>
+        <Button
+          size="lg"
+          className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white"
+          onClick={onNext}
+          data-testid="theme-continue-button"
+        >
+          Continue
+          <ArrowRight className="w-4 h-4 ml-2" />
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/setup-view/steps/welcome-step.tsx b/temp_repo/apps/ui/src/components/views/setup-view/steps/welcome-step.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2f2191a3a675c991c2e60d09f19bfb15b24ccac7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/setup-view/steps/welcome-step.tsx
@@ -0,0 +1,34 @@
+import { Button } from '@/components/ui/button';
+import { ArrowRight } from 'lucide-react';
+
+interface WelcomeStepProps {
+  onNext: () => void;
+}
+
+export function WelcomeStep({ onNext }: WelcomeStepProps) {
+  return (
+    <div className="text-center space-y-6">
+      <div className="flex items-center justify-center mx-auto">
+        <img src="/logo.png" alt="Automaker Logo" className="w-24 h-24" />
+      </div>
+
+      <div>
+        <h2 className="text-3xl font-bold text-foreground mb-3">Welcome to Automaker</h2>
+        <p className="text-muted-foreground max-w-md mx-auto">
+          To get started, we&apos;ll need to verify either claude code cli is installed or you have
+          Anthropic api keys
+        </p>
+      </div>
+
+      <Button
+        size="lg"
+        className="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white"
+        onClick={onNext}
+        data-testid="setup-start-button"
+      >
+        Get Started
+        <ArrowRight className="w-4 h-4 ml-2" />
+      </Button>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view.tsx b/temp_repo/apps/ui/src/components/views/spec-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..29aeb7cdd73cc722826b7e29fa14100cff308cad
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view.tsx
@@ -0,0 +1,240 @@
+import { useState, useCallback } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { Spinner } from '@/components/ui/spinner';
+
+// Extracted hooks
+import { useSpecLoading, useSpecSave, useSpecGeneration, useSpecParser } from './spec-view/hooks';
+
+// Extracted components
+import {
+  SpecHeader,
+  SpecEditor,
+  SpecEmptyState,
+  SpecViewMode,
+  SpecEditMode,
+  SpecModeTabs,
+} from './spec-view/components';
+
+// Extracted dialogs
+import { CreateSpecDialog, RegenerateSpecDialog } from './spec-view/dialogs';
+
+// Types
+import type { SpecViewMode as SpecViewModeType } from './spec-view/types';
+
+export function SpecView() {
+  const { currentProject, appSpec } = useAppStore();
+
+  // View mode state - default to 'view'
+  const [mode, setMode] = useState<SpecViewModeType>('view');
+
+  // Actions panel state (for tablet/mobile)
+  const [showActionsPanel, setShowActionsPanel] = useState(false);
+
+  // Loading state
+  const { isLoading, specExists, isGenerationRunning, loadSpec } = useSpecLoading();
+
+  // Save state
+  const { isSaving, hasChanges, saveSpec, handleChange } = useSpecSave();
+
+  // Parse the spec XML
+  const { isValid: isParseValid, parsedSpec, errors: parseErrors } = useSpecParser(appSpec);
+
+  // Generation state and handlers
+  const {
+    // Dialog visibility
+    showCreateDialog,
+    setShowCreateDialog,
+    showRegenerateDialog,
+    setShowRegenerateDialog,
+
+    // Create state
+    projectOverview,
+    setProjectOverview,
+    isCreating,
+    generateFeatures,
+    setGenerateFeatures,
+    analyzeProjectOnCreate,
+    setAnalyzeProjectOnCreate,
+    featureCountOnCreate,
+    setFeatureCountOnCreate,
+
+    // Regenerate state
+    projectDefinition,
+    setProjectDefinition,
+    isRegenerating,
+    generateFeaturesOnRegenerate,
+    setGenerateFeaturesOnRegenerate,
+    analyzeProjectOnRegenerate,
+    setAnalyzeProjectOnRegenerate,
+    featureCountOnRegenerate,
+    setFeatureCountOnRegenerate,
+
+    // Feature generation
+    isGeneratingFeatures,
+
+    // Sync
+    isSyncing,
+
+    // Status
+    currentPhase,
+    errorMessage,
+
+    // Handlers
+    handleCreateSpec,
+    handleRegenerate,
+    handleGenerateFeatures,
+    handleSync,
+  } = useSpecGeneration({ loadSpec });
+
+  // Handle mode change - if parse is invalid, force source mode
+  const handleModeChange = useCallback(
+    (newMode: SpecViewModeType) => {
+      if ((newMode === 'view' || newMode === 'edit') && !isParseValid) {
+        // Can't switch to view/edit if parse is invalid
+        return;
+      }
+      setMode(newMode);
+    },
+    [isParseValid]
+  );
+
+  // No project selected
+  if (!currentProject) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="spec-view-no-project">
+        <p className="text-muted-foreground">No project selected</p>
+      </div>
+    );
+  }
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex items-center justify-center" data-testid="spec-view-loading">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  // Empty state - only show when spec doesn't exist AND no generation is running
+  // If generation is running but no spec exists, show the generating UI
+  if (!specExists) {
+    // If generation is running (from loading hook check), ensure we show the generating UI
+    const showAsGenerating = isCreating || isGenerationRunning;
+
+    return (
+      <>
+        <SpecEmptyState
+          projectPath={currentProject.path}
+          isCreating={showAsGenerating}
+          isRegenerating={isRegenerating || isGenerationRunning}
+          currentPhase={currentPhase || (isGenerationRunning ? 'initialization' : '')}
+          errorMessage={errorMessage}
+          onCreateClick={() => setShowCreateDialog(true)}
+        />
+
+        <CreateSpecDialog
+          open={showCreateDialog}
+          onOpenChange={setShowCreateDialog}
+          projectOverview={projectOverview}
+          onProjectOverviewChange={setProjectOverview}
+          generateFeatures={generateFeatures}
+          onGenerateFeaturesChange={setGenerateFeatures}
+          analyzeProject={analyzeProjectOnCreate}
+          onAnalyzeProjectChange={setAnalyzeProjectOnCreate}
+          featureCount={featureCountOnCreate}
+          onFeatureCountChange={setFeatureCountOnCreate}
+          onCreateSpec={handleCreateSpec}
+          isCreatingSpec={isCreating}
+        />
+      </>
+    );
+  }
+
+  // Render content based on mode
+  const renderContent = () => {
+    // If the XML is invalid or spec is not parsed, we can only show the source editor.
+    // The tabs for other modes are disabled, but this is an extra safeguard.
+    if (!isParseValid || !parsedSpec) {
+      return <SpecEditor value={appSpec} onChange={handleChange} />;
+    }
+
+    switch (mode) {
+      case 'view':
+        return <SpecViewMode spec={parsedSpec} />;
+      case 'edit':
+        return <SpecEditMode spec={parsedSpec} onChange={handleChange} />;
+      case 'source':
+      default:
+        return <SpecEditor value={appSpec} onChange={handleChange} />;
+    }
+  };
+
+  const isProcessing =
+    isRegenerating || isGenerationRunning || isCreating || isGeneratingFeatures || isSyncing;
+
+  // Main view - spec exists
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden content-bg" data-testid="spec-view">
+      <SpecHeader
+        projectPath={currentProject.path}
+        isRegenerating={isRegenerating || isGenerationRunning}
+        isCreating={isCreating}
+        isGeneratingFeatures={isGeneratingFeatures}
+        isSyncing={isSyncing}
+        isSaving={isSaving}
+        hasChanges={hasChanges}
+        currentPhase={currentPhase || (isGenerationRunning ? 'working' : '')}
+        errorMessage={errorMessage}
+        onRegenerateClick={() => setShowRegenerateDialog(true)}
+        onGenerateFeaturesClick={handleGenerateFeatures}
+        onSyncClick={handleSync}
+        onSaveClick={saveSpec}
+        showActionsPanel={showActionsPanel}
+        onToggleActionsPanel={() => setShowActionsPanel(!showActionsPanel)}
+        showSaveButton={mode !== 'view'}
+      />
+
+      {/* Mode tabs and content container */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Mode tabs bar - inside the content area, centered */}
+        {!isProcessing && (
+          <div className="flex items-center justify-center px-4 py-2 border-b border-border bg-muted/30 relative">
+            <SpecModeTabs mode={mode} onModeChange={handleModeChange} isParseValid={isParseValid} />
+            {/* Show parse error indicator - positioned to the right */}
+            {!isParseValid && parseErrors.length > 0 && (
+              <span className="absolute right-4 text-xs text-destructive">
+                XML has errors - fix in Source mode
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Show parse error banner if in source mode with errors */}
+        {!isParseValid && parseErrors.length > 0 && mode === 'source' && (
+          <div className="px-4 py-2 bg-destructive/10 border-b border-destructive/20 text-sm text-destructive">
+            <span className="font-medium">XML Parse Errors:</span> {parseErrors.join(', ')}
+          </div>
+        )}
+
+        {renderContent()}
+      </div>
+
+      <RegenerateSpecDialog
+        open={showRegenerateDialog}
+        onOpenChange={setShowRegenerateDialog}
+        projectDefinition={projectDefinition}
+        onProjectDefinitionChange={setProjectDefinition}
+        generateFeatures={generateFeaturesOnRegenerate}
+        onGenerateFeaturesChange={setGenerateFeaturesOnRegenerate}
+        analyzeProject={analyzeProjectOnRegenerate}
+        onAnalyzeProjectChange={setAnalyzeProjectOnRegenerate}
+        featureCount={featureCountOnRegenerate}
+        onFeatureCountChange={setFeatureCountOnRegenerate}
+        onRegenerate={handleRegenerate}
+        isRegenerating={isRegenerating}
+        isGeneratingFeatures={isGeneratingFeatures}
+      />
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/array-field-editor.tsx b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/array-field-editor.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bbaaa87c4d3aeb9754b92915af31e04f19e31bb6
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/array-field-editor.tsx
@@ -0,0 +1,103 @@
+import { Plus, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card } from '@/components/ui/card';
+import { useRef, useState, useEffect } from 'react';
+import { generateUUID } from '@/lib/utils';
+
+interface ArrayFieldEditorProps {
+  values: string[];
+  onChange: (values: string[]) => void;
+  placeholder?: string;
+  addLabel?: string;
+  emptyMessage?: string;
+}
+
+interface ItemWithId {
+  id: string;
+  value: string;
+}
+
+export function ArrayFieldEditor({
+  values,
+  onChange,
+  placeholder = 'Enter value...',
+  addLabel = 'Add Item',
+  emptyMessage = 'No items added yet.',
+}: ArrayFieldEditorProps) {
+  // Track items with stable IDs
+  const [items, setItems] = useState<ItemWithId[]>(() =>
+    values.map((value) => ({ id: generateUUID(), value }))
+  );
+
+  // Track if we're making an internal change to avoid sync loops
+  const isInternalChange = useRef(false);
+
+  // Sync external values to internal items when values change externally
+  useEffect(() => {
+    if (isInternalChange.current) {
+      isInternalChange.current = false;
+      return;
+    }
+
+    // External change - rebuild items with new IDs
+    setItems(values.map((value) => ({ id: generateUUID(), value })));
+  }, [values]);
+
+  const handleAdd = () => {
+    const newItems = [...items, { id: generateUUID(), value: '' }];
+    setItems(newItems);
+    isInternalChange.current = true;
+    onChange(newItems.map((item) => item.value));
+  };
+
+  const handleRemove = (id: string) => {
+    const newItems = items.filter((item) => item.id !== id);
+    setItems(newItems);
+    isInternalChange.current = true;
+    onChange(newItems.map((item) => item.value));
+  };
+
+  const handleChange = (id: string, value: string) => {
+    const newItems = items.map((item) => (item.id === id ? { ...item, value } : item));
+    setItems(newItems);
+    isInternalChange.current = true;
+    onChange(newItems.map((item) => item.value));
+  };
+
+  return (
+    <div className="space-y-2">
+      {items.length === 0 ? (
+        <p className="text-sm text-muted-foreground py-2">{emptyMessage}</p>
+      ) : (
+        <div className="space-y-2">
+          {items.map((item) => (
+            <Card key={item.id} className="p-2">
+              <div className="flex items-center gap-2">
+                <Input
+                  value={item.value}
+                  onChange={(e) => handleChange(item.id, e.target.value)}
+                  placeholder={placeholder}
+                  className="flex-1"
+                />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => handleRemove(item.id)}
+                  className="shrink-0 text-muted-foreground hover:text-destructive"
+                >
+                  <X className="w-4 h-4" />
+                </Button>
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+      <Button type="button" variant="outline" size="sm" onClick={handleAdd} className="gap-1">
+        <Plus className="w-4 h-4" />
+        {addLabel}
+      </Button>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/capabilities-section.tsx b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/capabilities-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cfec2d7854eda8fff79d457a07d609503f093956
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/capabilities-section.tsx
@@ -0,0 +1,30 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Lightbulb } from 'lucide-react';
+import { ArrayFieldEditor } from './array-field-editor';
+
+interface CapabilitiesSectionProps {
+  capabilities: string[];
+  onChange: (capabilities: string[]) => void;
+}
+
+export function CapabilitiesSection({ capabilities, onChange }: CapabilitiesSectionProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-lg">
+          <Lightbulb className="w-5 h-5 text-primary" />
+          Core Capabilities
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ArrayFieldEditor
+          values={capabilities}
+          onChange={onChange}
+          placeholder="e.g., User authentication, Data visualization..."
+          addLabel="Add Capability"
+          emptyMessage="No capabilities defined. Add your core features."
+        />
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/features-section.tsx b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/features-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ad82a4d772243db1295f7e298a21e949daf9d573
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/features-section.tsx
@@ -0,0 +1,258 @@
+import { Plus, X, ChevronDown, ChevronUp, FolderOpen } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { ListChecks } from 'lucide-react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import type { SpecOutput } from '@automaker/spec-parser';
+import { generateUUID } from '@/lib/utils';
+
+type Feature = SpecOutput['implemented_features'][number];
+
+interface FeaturesSectionProps {
+  features: Feature[];
+  onChange: (features: Feature[]) => void;
+}
+
+interface FeatureWithId extends Feature {
+  _id: string;
+  _locationIds?: string[];
+}
+
+function featureToInternal(feature: Feature): FeatureWithId {
+  return {
+    ...feature,
+    _id: generateUUID(),
+    _locationIds: feature.file_locations?.map(() => generateUUID()),
+  };
+}
+
+function internalToFeature(internal: FeatureWithId): Feature {
+  const { _id, _locationIds, ...feature } = internal;
+  return feature;
+}
+
+interface FeatureCardProps {
+  feature: FeatureWithId;
+  index: number;
+  onChange: (feature: FeatureWithId) => void;
+  onRemove: () => void;
+}
+
+function FeatureCard({ feature, index, onChange, onRemove }: FeatureCardProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleNameChange = (name: string) => {
+    onChange({ ...feature, name });
+  };
+
+  const handleDescriptionChange = (description: string) => {
+    onChange({ ...feature, description });
+  };
+
+  const handleAddLocation = () => {
+    const locations = feature.file_locations || [];
+    const locationIds = feature._locationIds || [];
+    onChange({
+      ...feature,
+      file_locations: [...locations, ''],
+      _locationIds: [...locationIds, generateUUID()],
+    });
+  };
+
+  const handleRemoveLocation = (locId: string) => {
+    const locationIds = feature._locationIds || [];
+    const idx = locationIds.indexOf(locId);
+    if (idx === -1) return;
+
+    const newLocations = feature.file_locations?.filter((_, i) => i !== idx);
+    const newLocationIds = locationIds.filter((id) => id !== locId);
+    onChange({
+      ...feature,
+      file_locations: newLocations && newLocations.length > 0 ? newLocations : undefined,
+      _locationIds: newLocationIds.length > 0 ? newLocationIds : undefined,
+    });
+  };
+
+  const handleLocationChange = (locId: string, value: string) => {
+    const locationIds = feature._locationIds || [];
+    const idx = locationIds.indexOf(locId);
+    if (idx === -1) return;
+
+    const locations = [...(feature.file_locations || [])];
+    locations[idx] = value;
+    onChange({ ...feature, file_locations: locations });
+  };
+
+  return (
+    <Card className="border-border">
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <div className="flex items-center gap-2 p-3">
+          <CollapsibleTrigger asChild>
+            <Button variant="ghost" size="sm" className="p-1 h-auto">
+              {isOpen ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+            </Button>
+          </CollapsibleTrigger>
+          <div className="flex-1 min-w-0">
+            <Input
+              value={feature.name}
+              onChange={(e) => handleNameChange(e.target.value)}
+              placeholder="Feature name..."
+              className="font-medium"
+            />
+          </div>
+          <Badge variant="outline" className="shrink-0">
+            #{index + 1}
+          </Badge>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={onRemove}
+            className="shrink-0 text-muted-foreground hover:text-destructive"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+        <CollapsibleContent>
+          <div className="px-3 pb-3 space-y-4 border-t border-border pt-3 ml-10">
+            <div className="space-y-2">
+              <Label>Description</Label>
+              <Textarea
+                value={feature.description}
+                onChange={(e) => handleDescriptionChange(e.target.value)}
+                placeholder="Describe what this feature does..."
+                rows={3}
+              />
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label className="flex items-center gap-1">
+                  <FolderOpen className="w-4 h-4" />
+                  File Locations
+                </Label>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={handleAddLocation}
+                  className="gap-1 h-7"
+                >
+                  <Plus className="w-3 h-3" />
+                  Add
+                </Button>
+              </div>
+              {(feature.file_locations || []).length === 0 ? (
+                <p className="text-sm text-muted-foreground">No file locations specified.</p>
+              ) : (
+                <div className="space-y-2">
+                  {(feature.file_locations || []).map((location, idx) => {
+                    const locId = feature._locationIds?.[idx] || `fallback-${idx}`;
+                    return (
+                      <div key={locId} className="flex items-center gap-2">
+                        <Input
+                          value={location}
+                          onChange={(e) => handleLocationChange(locId, e.target.value)}
+                          placeholder="e.g., src/components/feature.tsx"
+                          className="flex-1 font-mono text-sm"
+                        />
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => handleRemoveLocation(locId)}
+                          className="shrink-0 text-muted-foreground hover:text-destructive h-8 w-8"
+                        >
+                          <X className="w-3 h-3" />
+                        </Button>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </Card>
+  );
+}
+
+export function FeaturesSection({ features, onChange }: FeaturesSectionProps) {
+  // Track features with stable IDs
+  const [items, setItems] = useState<FeatureWithId[]>(() => features.map(featureToInternal));
+
+  // Track if we're making an internal change to avoid sync loops
+  const isInternalChange = useRef(false);
+
+  // Sync external features to internal items when features change externally
+  useEffect(() => {
+    if (isInternalChange.current) {
+      isInternalChange.current = false;
+      return;
+    }
+    setItems(features.map(featureToInternal));
+  }, [features]);
+
+  const handleAdd = () => {
+    const newItems = [...items, featureToInternal({ name: '', description: '' })];
+    setItems(newItems);
+    isInternalChange.current = true;
+    onChange(newItems.map(internalToFeature));
+  };
+
+  const handleRemove = (id: string) => {
+    const newItems = items.filter((item) => item._id !== id);
+    setItems(newItems);
+    isInternalChange.current = true;
+    onChange(newItems.map(internalToFeature));
+  };
+
+  const handleFeatureChange = (id: string, feature: FeatureWithId) => {
+    const newItems = items.map((item) => (item._id === id ? feature : item));
+    setItems(newItems);
+    isInternalChange.current = true;
+    onChange(newItems.map(internalToFeature));
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-lg">
+          <ListChecks className="w-5 h-5 text-primary" />
+          Implemented Features
+          <Badge variant="outline" className="ml-2">
+            {items.length}
+          </Badge>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {items.length === 0 ? (
+          <p className="text-sm text-muted-foreground py-2">
+            No features added yet. Click below to add implemented features.
+          </p>
+        ) : (
+          <div className="space-y-2">
+            {items.map((feature, index) => (
+              <FeatureCard
+                key={feature._id}
+                feature={feature}
+                index={index}
+                onChange={(f) => handleFeatureChange(feature._id, f)}
+                onRemove={() => handleRemove(feature._id)}
+              />
+            ))}
+          </div>
+        )}
+        <Button type="button" variant="outline" size="sm" onClick={handleAdd} className="gap-1">
+          <Plus className="w-4 h-4" />
+          Add Feature
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/index.ts b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aa9b1ebfda8f566d686262223040be8d6f52fdb0
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/index.ts
@@ -0,0 +1,7 @@
+export { ArrayFieldEditor } from './array-field-editor';
+export { ProjectInfoSection } from './project-info-section';
+export { TechStackSection } from './tech-stack-section';
+export { CapabilitiesSection } from './capabilities-section';
+export { FeaturesSection } from './features-section';
+export { RoadmapSection } from './roadmap-section';
+export { RequirementsSection, GuidelinesSection } from './optional-sections';
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/optional-sections.tsx b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/optional-sections.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a71b21700720f0b53aa87bddc7ea0ac527b2463a
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/optional-sections.tsx
@@ -0,0 +1,59 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ScrollText, Wrench } from 'lucide-react';
+import { ArrayFieldEditor } from './array-field-editor';
+
+interface RequirementsSectionProps {
+  requirements: string[];
+  onChange: (requirements: string[]) => void;
+}
+
+export function RequirementsSection({ requirements, onChange }: RequirementsSectionProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-lg">
+          <ScrollText className="w-5 h-5 text-primary" />
+          Additional Requirements
+          <span className="text-sm font-normal text-muted-foreground">(Optional)</span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ArrayFieldEditor
+          values={requirements}
+          onChange={onChange}
+          placeholder="e.g., Node.js >= 18, Docker required..."
+          addLabel="Add Requirement"
+          emptyMessage="No additional requirements specified."
+        />
+      </CardContent>
+    </Card>
+  );
+}
+
+interface GuidelinesSectionProps {
+  guidelines: string[];
+  onChange: (guidelines: string[]) => void;
+}
+
+export function GuidelinesSection({ guidelines, onChange }: GuidelinesSectionProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-lg">
+          <Wrench className="w-5 h-5 text-primary" />
+          Development Guidelines
+          <span className="text-sm font-normal text-muted-foreground">(Optional)</span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ArrayFieldEditor
+          values={guidelines}
+          onChange={onChange}
+          placeholder="e.g., Follow TypeScript strict mode, use ESLint..."
+          addLabel="Add Guideline"
+          emptyMessage="No development guidelines specified."
+        />
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/project-info-section.tsx b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/project-info-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..74a25836674e570a038878f58d19c299e08c53a2
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/project-info-section.tsx
@@ -0,0 +1,51 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { FileText } from 'lucide-react';
+
+interface ProjectInfoSectionProps {
+  projectName: string;
+  overview: string;
+  onProjectNameChange: (value: string) => void;
+  onOverviewChange: (value: string) => void;
+}
+
+export function ProjectInfoSection({
+  projectName,
+  overview,
+  onProjectNameChange,
+  onOverviewChange,
+}: ProjectInfoSectionProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-lg">
+          <FileText className="w-5 h-5 text-primary" />
+          Project Information
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="project-name">Project Name</Label>
+          <Input
+            id="project-name"
+            value={projectName}
+            onChange={(e) => onProjectNameChange(e.target.value)}
+            placeholder="Enter project name..."
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="overview">Overview</Label>
+          <Textarea
+            id="overview"
+            value={overview}
+            onChange={(e) => onOverviewChange(e.target.value)}
+            placeholder="Describe what this project does, its purpose, and key goals..."
+            rows={5}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/roadmap-section.tsx b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/roadmap-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b13f35e781508ae9d078bdc311c22ac05c2c1963
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/roadmap-section.tsx
@@ -0,0 +1,192 @@
+import { Plus, X, Map as MapIcon } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import type { SpecOutput } from '@automaker/spec-parser';
+import { generateUUID } from '@/lib/utils';
+
+type RoadmapPhase = NonNullable<SpecOutput['implementation_roadmap']>[number];
+type PhaseStatus = 'completed' | 'in_progress' | 'pending';
+
+interface PhaseWithId extends RoadmapPhase {
+  _id: string;
+}
+
+function phaseToInternal(phase: RoadmapPhase): PhaseWithId {
+  return { ...phase, _id: generateUUID() };
+}
+
+function internalToPhase(internal: PhaseWithId): RoadmapPhase {
+  const { _id, ...phase } = internal;
+  return phase;
+}
+
+interface RoadmapSectionProps {
+  phases: RoadmapPhase[];
+  onChange: (phases: RoadmapPhase[]) => void;
+}
+
+interface PhaseCardProps {
+  phase: PhaseWithId;
+  onChange: (phase: PhaseWithId) => void;
+  onRemove: () => void;
+}
+
+function PhaseCard({ phase, onChange, onRemove }: PhaseCardProps) {
+  const handlePhaseNameChange = (name: string) => {
+    onChange({ ...phase, phase: name });
+  };
+
+  const handleStatusChange = (status: PhaseStatus) => {
+    onChange({ ...phase, status });
+  };
+
+  const handleDescriptionChange = (description: string) => {
+    onChange({ ...phase, description });
+  };
+
+  return (
+    <Card className="border-border">
+      <div className="p-3 space-y-3">
+        <div className="flex items-start gap-2">
+          <div className="flex-1 space-y-3">
+            <div className="flex flex-col sm:flex-row gap-2">
+              <div className="flex-1">
+                <Label className="sr-only">Phase Name</Label>
+                <Input
+                  value={phase.phase}
+                  onChange={(e) => handlePhaseNameChange(e.target.value)}
+                  placeholder="Phase name..."
+                />
+              </div>
+              <div className="w-full sm:w-40">
+                <Label className="sr-only">Status</Label>
+                <Select value={phase.status} onValueChange={handleStatusChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Status" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="pending">Pending</SelectItem>
+                    <SelectItem value="in_progress">In Progress</SelectItem>
+                    <SelectItem value="completed">Completed</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div>
+              <Label className="sr-only">Description</Label>
+              <Textarea
+                value={phase.description ?? ''}
+                onChange={(e) => handleDescriptionChange(e.target.value)}
+                placeholder="Describe what this phase involves..."
+                rows={2}
+              />
+            </div>
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={onRemove}
+            className="shrink-0 text-muted-foreground hover:text-destructive"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export function RoadmapSection({ phases, onChange }: RoadmapSectionProps) {
+  // Track phases with stable IDs
+  const [items, setItems] = useState<PhaseWithId[]>(() => phases.map(phaseToInternal));
+
+  // Track if we're making an internal change to avoid sync loops
+  const isInternalChange = useRef(false);
+
+  // Sync external phases to internal items when phases change externally
+  // Preserve existing IDs where possible to avoid unnecessary remounts
+  useEffect(() => {
+    if (isInternalChange.current) {
+      isInternalChange.current = false;
+      return;
+    }
+    setItems((currentItems) => {
+      return phases.map((phase, index) => {
+        // Try to find existing item by index (positional matching)
+        const existingItem = currentItems[index];
+        if (existingItem) {
+          // Reuse the existing ID, update the phase data
+          return { ...phase, _id: existingItem._id };
+        }
+        // New phase - generate new ID
+        return phaseToInternal(phase);
+      });
+    });
+  }, [phases]);
+
+  const handleAdd = () => {
+    const newItems = [...items, phaseToInternal({ phase: '', status: 'pending', description: '' })];
+    setItems(newItems);
+    isInternalChange.current = true;
+    onChange(newItems.map(internalToPhase));
+  };
+
+  const handleRemove = (id: string) => {
+    const newItems = items.filter((item) => item._id !== id);
+    setItems(newItems);
+    isInternalChange.current = true;
+    onChange(newItems.map(internalToPhase));
+  };
+
+  const handlePhaseChange = (id: string, phase: PhaseWithId) => {
+    const newItems = items.map((item) => (item._id === id ? phase : item));
+    setItems(newItems);
+    isInternalChange.current = true;
+    onChange(newItems.map(internalToPhase));
+  };
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-lg">
+          <MapIcon className="w-5 h-5 text-primary" />
+          Implementation Roadmap
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {items.length === 0 ? (
+          <p className="text-sm text-muted-foreground py-2">
+            No roadmap phases defined. Add phases to track implementation progress.
+          </p>
+        ) : (
+          <div className="space-y-2">
+            {items.map((phase) => (
+              <PhaseCard
+                key={phase._id}
+                phase={phase}
+                onChange={(p) => handlePhaseChange(phase._id, p)}
+                onRemove={() => handleRemove(phase._id)}
+              />
+            ))}
+          </div>
+        )}
+        <Button type="button" variant="outline" size="sm" onClick={handleAdd} className="gap-1">
+          <Plus className="w-4 h-4" />
+          Add Phase
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/tech-stack-section.tsx b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/tech-stack-section.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4002049ed8b17e6e1b856ee66d6ed7792174c275
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/components/edit-mode/tech-stack-section.tsx
@@ -0,0 +1,30 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Cpu } from 'lucide-react';
+import { ArrayFieldEditor } from './array-field-editor';
+
+interface TechStackSectionProps {
+  technologies: string[];
+  onChange: (technologies: string[]) => void;
+}
+
+export function TechStackSection({ technologies, onChange }: TechStackSectionProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-lg">
+          <Cpu className="w-5 h-5 text-primary" />
+          Technology Stack
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ArrayFieldEditor
+          values={technologies}
+          onChange={onChange}
+          placeholder="e.g., React, TypeScript, Node.js..."
+          addLabel="Add Technology"
+          emptyMessage="No technologies added. Add your tech stack."
+        />
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/components/index.ts b/temp_repo/apps/ui/src/components/views/spec-view/components/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9773b7ce5bc95565fae37290041cfad35905c6da
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/components/index.ts
@@ -0,0 +1,6 @@
+export { SpecHeader } from './spec-header';
+export { SpecEditor } from './spec-editor';
+export { SpecEmptyState } from './spec-empty-state';
+export { SpecModeTabs } from './spec-mode-tabs';
+export { SpecViewMode } from './spec-view-mode';
+export { SpecEditMode } from './spec-edit-mode';
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/components/spec-edit-mode.tsx b/temp_repo/apps/ui/src/components/views/spec-view/components/spec-edit-mode.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..39519664871fbc972dce3efff8f36f389df56f05
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/components/spec-edit-mode.tsx
@@ -0,0 +1,118 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { SpecOutput } from '@automaker/spec-parser';
+import { specToXml } from '@automaker/spec-parser';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  ProjectInfoSection,
+  TechStackSection,
+  CapabilitiesSection,
+  FeaturesSection,
+  RoadmapSection,
+  RequirementsSection,
+  GuidelinesSection,
+} from './edit-mode';
+
+interface SpecEditModeProps {
+  spec: SpecOutput;
+  onChange: (xmlContent: string) => void;
+}
+
+export function SpecEditMode({ spec, onChange }: SpecEditModeProps) {
+  // Local state for form editing
+  const [formData, setFormData] = useState<SpecOutput>(spec);
+
+  // Track the last spec we synced FROM to detect external changes
+  const lastExternalSpecRef = useRef<string>(JSON.stringify(spec));
+
+  // Flag to prevent re-syncing when we caused the change
+  const isInternalChangeRef = useRef(false);
+
+  // Reset form only when spec changes externally (e.g., after save, sync, or regenerate)
+  useEffect(() => {
+    const specJson = JSON.stringify(spec);
+
+    // If we caused this change (internal), just update the ref and skip reset
+    if (isInternalChangeRef.current) {
+      lastExternalSpecRef.current = specJson;
+      isInternalChangeRef.current = false;
+      return;
+    }
+
+    // External change - reset form data
+    if (specJson !== lastExternalSpecRef.current) {
+      lastExternalSpecRef.current = specJson;
+      setFormData(spec);
+    }
+  }, [spec]);
+
+  // Update a field and notify parent
+  const updateField = useCallback(
+    <K extends keyof SpecOutput>(field: K, value: SpecOutput[K]) => {
+      setFormData((prev) => {
+        const newData = { ...prev, [field]: value };
+        // Mark as internal change before notifying parent
+        isInternalChangeRef.current = true;
+        const xmlContent = specToXml(newData);
+        onChange(xmlContent);
+        return newData;
+      });
+    },
+    [onChange]
+  );
+
+  return (
+    <ScrollArea className="flex-1">
+      <div className="p-4 space-y-6 max-w-4xl mx-auto">
+        {/* Project Information */}
+        <ProjectInfoSection
+          projectName={formData.project_name}
+          overview={formData.overview}
+          onProjectNameChange={(value) => updateField('project_name', value)}
+          onOverviewChange={(value) => updateField('overview', value)}
+        />
+
+        {/* Technology Stack */}
+        <TechStackSection
+          technologies={formData.technology_stack}
+          onChange={(value) => updateField('technology_stack', value)}
+        />
+
+        {/* Core Capabilities */}
+        <CapabilitiesSection
+          capabilities={formData.core_capabilities}
+          onChange={(value) => updateField('core_capabilities', value)}
+        />
+
+        {/* Implemented Features */}
+        <FeaturesSection
+          features={formData.implemented_features}
+          onChange={(value) => updateField('implemented_features', value)}
+        />
+
+        {/* Additional Requirements (Optional) */}
+        <RequirementsSection
+          requirements={formData.additional_requirements || []}
+          onChange={(value) =>
+            updateField('additional_requirements', value.length > 0 ? value : undefined)
+          }
+        />
+
+        {/* Development Guidelines (Optional) */}
+        <GuidelinesSection
+          guidelines={formData.development_guidelines || []}
+          onChange={(value) =>
+            updateField('development_guidelines', value.length > 0 ? value : undefined)
+          }
+        />
+
+        {/* Implementation Roadmap (Optional) */}
+        <RoadmapSection
+          phases={formData.implementation_roadmap || []}
+          onChange={(value) =>
+            updateField('implementation_roadmap', value.length > 0 ? value : undefined)
+          }
+        />
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/components/spec-editor.tsx b/temp_repo/apps/ui/src/components/views/spec-view/components/spec-editor.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aafb568f963507e78ef2aee154b7ba4acfc501d3
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/components/spec-editor.tsx
@@ -0,0 +1,22 @@
+import { Card } from '@/components/ui/card';
+import { XmlSyntaxEditor } from '@/components/ui/xml-syntax-editor';
+
+interface SpecEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function SpecEditor({ value, onChange }: SpecEditorProps) {
+  return (
+    <div className="flex-1 p-4 overflow-hidden min-h-0">
+      <Card className="h-full overflow-hidden">
+        <XmlSyntaxEditor
+          value={value}
+          onChange={onChange}
+          placeholder="Write your app specification here..."
+          data-testid="spec-editor"
+        />
+      </Card>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/components/spec-empty-state.tsx b/temp_repo/apps/ui/src/components/views/spec-view/components/spec-empty-state.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce7c16673f6396550bd1596afe0f7792290c3e43
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/components/spec-empty-state.tsx
@@ -0,0 +1,117 @@
+import { Button } from '@/components/ui/button';
+import { FileText, FilePlus2 } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { PHASE_LABELS } from '../constants';
+
+interface SpecEmptyStateProps {
+  projectPath: string;
+  isCreating: boolean;
+  isRegenerating: boolean;
+  currentPhase: string;
+  errorMessage: string;
+  onCreateClick: () => void;
+}
+
+export function SpecEmptyState({
+  projectPath,
+  isCreating,
+  isRegenerating,
+  currentPhase,
+  errorMessage,
+  onCreateClick,
+}: SpecEmptyStateProps) {
+  const isProcessing = isCreating || isRegenerating;
+  const phaseLabel = PHASE_LABELS[currentPhase] || currentPhase;
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden content-bg" data-testid="spec-view-empty">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
+        <div className="flex items-center gap-3">
+          <FileText className="w-5 h-5 text-muted-foreground" />
+          <div>
+            <h1 className="text-xl font-bold">App Specification</h1>
+            <p className="text-sm text-muted-foreground">{projectPath}/.automaker/app_spec.txt</p>
+          </div>
+        </div>
+        {isProcessing && (
+          <div className="flex items-center gap-3 px-6 py-3.5 rounded-xl bg-linear-to-r from-primary/15 to-primary/5 border border-primary/30 shadow-lg backdrop-blur-md">
+            <div className="relative">
+              <Spinner size="md" className="shrink-0" />
+              <div className="absolute inset-0 w-5 h-5 animate-ping text-primary/20" />
+            </div>
+            <div className="flex flex-col gap-1 min-w-0">
+              <span className="text-sm font-semibold text-primary leading-tight tracking-tight">
+                {isCreating ? 'Generating Specification' : 'Regenerating Specification'}
+              </span>
+              {currentPhase && (
+                <span className="text-xs text-muted-foreground/90 leading-tight font-medium">
+                  {phaseLabel}
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+        {errorMessage && (
+          <div className="flex items-center gap-2 text-destructive">
+            <span className="text-sm font-medium">Error: {errorMessage}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Empty State Content */}
+      <div className="flex-1 flex items-center justify-center p-8">
+        <div className="text-center max-w-md">
+          <div className="mb-6 flex justify-center">
+            <div className="p-4 rounded-full bg-primary/10">
+              {isCreating ? (
+                <Spinner size="xl" className="w-12 h-12" />
+              ) : (
+                <FilePlus2 className="w-12 h-12 text-primary" />
+              )}
+            </div>
+          </div>
+          <h2 className="text-2xl font-semibold mb-4">
+            {isCreating ? (
+              <>
+                <div className="mb-4">
+                  <span>Generating App Specification</span>
+                </div>
+                {currentPhase && (
+                  <div className="px-6 py-3.5 rounded-xl bg-linear-to-r from-primary/15 to-primary/5 border border-primary/30 shadow-lg backdrop-blur-md inline-flex items-center justify-center">
+                    <span className="text-sm font-semibold text-primary text-center tracking-tight">
+                      {phaseLabel}
+                    </span>
+                  </div>
+                )}
+              </>
+            ) : (
+              'No App Specification Found'
+            )}
+          </h2>
+          <p className="text-muted-foreground mb-6">
+            {isCreating
+              ? currentPhase === 'feature_generation'
+                ? 'The app specification has been created! Now generating features from the implementation roadmap...'
+                : "We're analyzing your project and generating a comprehensive specification. This may take a few moments..."
+              : "Create an app specification to help our system understand your project. We'll analyze your codebase and generate a comprehensive spec based on your description."}
+          </p>
+          {errorMessage && (
+            <div className="mb-4 p-3 rounded-md bg-destructive/10 border border-destructive/20">
+              <p className="text-sm text-destructive font-medium">Error:</p>
+              <p className="text-sm text-destructive">{errorMessage}</p>
+            </div>
+          )}
+          {!isCreating && (
+            <div className="flex gap-2 justify-center">
+              <Button size="lg" onClick={onCreateClick}>
+                <FilePlus2 className="w-5 h-5 mr-2" />
+                Create app_spec
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/components/spec-header.tsx b/temp_repo/apps/ui/src/components/views/spec-view/components/spec-header.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4f0016caa50678180998b4c89b2c7fae832ef3c7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/components/spec-header.tsx
@@ -0,0 +1,236 @@
+import { Button } from '@/components/ui/button';
+import {
+  HeaderActionsPanel,
+  HeaderActionsPanelTrigger,
+} from '@/components/ui/header-actions-panel';
+import { Save, Sparkles, FileText, AlertCircle, ListPlus, RefreshCcw } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { PHASE_LABELS } from '../constants';
+
+interface SpecHeaderProps {
+  projectPath: string;
+  isRegenerating: boolean;
+  isCreating: boolean;
+  isGeneratingFeatures: boolean;
+  isSyncing: boolean;
+  isSaving: boolean;
+  hasChanges: boolean;
+  currentPhase: string;
+  errorMessage: string;
+  onRegenerateClick: () => void;
+  onGenerateFeaturesClick: () => void;
+  onSyncClick: () => void;
+  onSaveClick: () => void;
+  showActionsPanel: boolean;
+  onToggleActionsPanel: () => void;
+  // Mode-related props for save button visibility
+  showSaveButton: boolean;
+}
+
+export function SpecHeader({
+  projectPath,
+  isRegenerating,
+  isCreating,
+  isGeneratingFeatures,
+  isSyncing,
+  isSaving,
+  hasChanges,
+  currentPhase,
+  errorMessage,
+  onRegenerateClick,
+  onGenerateFeaturesClick,
+  onSyncClick,
+  onSaveClick,
+  showActionsPanel,
+  onToggleActionsPanel,
+  showSaveButton,
+}: SpecHeaderProps) {
+  const isProcessing = isRegenerating || isCreating || isGeneratingFeatures || isSyncing;
+  const phaseLabel = PHASE_LABELS[currentPhase] || currentPhase;
+
+  return (
+    <>
+      <div className="flex items-center justify-between p-4 border-b border-border bg-glass backdrop-blur-md">
+        <div className="flex items-center gap-3">
+          <FileText className="w-5 h-5 text-muted-foreground" />
+          <div>
+            <h1 className="text-xl font-bold">App Specification</h1>
+            <p className="text-sm text-muted-foreground">{projectPath}/.automaker/app_spec.txt</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          {/* Status indicators - always visible */}
+          {isProcessing && (
+            <div className="hidden lg:flex items-center gap-3 px-6 py-3.5 rounded-xl bg-linear-to-r from-primary/15 to-primary/5 border border-primary/30 shadow-lg backdrop-blur-md">
+              <div className="relative">
+                <Spinner size="md" className="shrink-0" />
+                <div className="absolute inset-0 w-5 h-5 animate-ping text-primary/20" />
+              </div>
+              <div className="flex flex-col gap-1 min-w-0">
+                <span className="text-sm font-semibold text-primary leading-tight tracking-tight">
+                  {isSyncing
+                    ? 'Syncing Specification'
+                    : isGeneratingFeatures
+                      ? 'Generating Features'
+                      : isCreating
+                        ? 'Generating Specification'
+                        : 'Regenerating Specification'}
+                </span>
+                {currentPhase && (
+                  <span className="text-xs text-muted-foreground/90 leading-tight font-medium">
+                    {phaseLabel}
+                  </span>
+                )}
+              </div>
+            </div>
+          )}
+          {/* Mobile processing indicator */}
+          {isProcessing && (
+            <div className="lg:hidden flex items-center gap-2 px-3 py-2 rounded-lg bg-primary/10 border border-primary/20">
+              <Spinner size="sm" />
+              <span className="text-xs font-medium text-primary">Processing...</span>
+            </div>
+          )}
+          {errorMessage && (
+            <div className="hidden lg:flex items-center gap-3 px-6 py-3.5 rounded-xl bg-linear-to-r from-destructive/15 to-destructive/5 border border-destructive/30 shadow-lg backdrop-blur-md">
+              <AlertCircle className="w-5 h-5 text-destructive shrink-0" />
+              <div className="flex flex-col gap-1 min-w-0">
+                <span className="text-sm font-semibold text-destructive leading-tight tracking-tight">
+                  Error
+                </span>
+                <span className="text-xs text-destructive/90 leading-tight font-medium">
+                  {errorMessage}
+                </span>
+              </div>
+            </div>
+          )}
+          {/* Mobile error indicator */}
+          {errorMessage && (
+            <div className="lg:hidden flex items-center gap-2 px-3 py-2 rounded-lg bg-destructive/10 border border-destructive/20">
+              <AlertCircle className="w-4 h-4 text-destructive" />
+              <span className="text-xs font-medium text-destructive">Error</span>
+            </div>
+          )}
+          {/* Desktop: show actions inline - hidden when processing since status card shows progress */}
+          {!isProcessing && (
+            <div className="hidden lg:flex gap-2">
+              <Button size="sm" variant="outline" onClick={onSyncClick} data-testid="sync-spec">
+                <RefreshCcw className="w-4 h-4 mr-2" />
+                Sync
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={onRegenerateClick}
+                data-testid="regenerate-spec"
+              >
+                <Sparkles className="w-4 h-4 mr-2" />
+                Regenerate
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={onGenerateFeaturesClick}
+                data-testid="generate-features"
+              >
+                <ListPlus className="w-4 h-4 mr-2" />
+                Generate Features
+              </Button>
+              {showSaveButton && (
+                <Button
+                  size="sm"
+                  onClick={onSaveClick}
+                  disabled={!hasChanges || isSaving}
+                  data-testid="save-spec"
+                >
+                  <Save className="w-4 h-4 mr-2" />
+                  {isSaving ? 'Saving...' : hasChanges ? 'Save Changes' : 'Saved'}
+                </Button>
+              )}
+            </div>
+          )}
+          {/* Tablet/Mobile: show trigger for actions panel */}
+          <HeaderActionsPanelTrigger isOpen={showActionsPanel} onToggle={onToggleActionsPanel} />
+        </div>
+      </div>
+
+      {/* Actions Panel (tablet/mobile) */}
+      <HeaderActionsPanel
+        isOpen={showActionsPanel}
+        onClose={onToggleActionsPanel}
+        title="Specification Actions"
+      >
+        {/* Status messages in panel */}
+        {isProcessing && (
+          <div className="flex items-center gap-3 p-3 rounded-lg bg-primary/10 border border-primary/20">
+            <Spinner size="sm" className="shrink-0" />
+            <div className="flex flex-col gap-0.5 min-w-0">
+              <span className="text-sm font-medium text-primary">
+                {isSyncing
+                  ? 'Syncing Specification'
+                  : isGeneratingFeatures
+                    ? 'Generating Features'
+                    : isCreating
+                      ? 'Generating Specification'
+                      : 'Regenerating Specification'}
+              </span>
+              {currentPhase && <span className="text-xs text-muted-foreground">{phaseLabel}</span>}
+            </div>
+          </div>
+        )}
+        {errorMessage && (
+          <div className="flex items-center gap-3 p-3 rounded-lg bg-destructive/10 border border-destructive/20">
+            <AlertCircle className="w-4 h-4 text-destructive shrink-0" />
+            <div className="flex flex-col gap-0.5 min-w-0">
+              <span className="text-sm font-medium text-destructive">Error</span>
+              <span className="text-xs text-destructive/80">{errorMessage}</span>
+            </div>
+          </div>
+        )}
+        {/* Hide action buttons when processing - status card shows progress */}
+        {!isProcessing && (
+          <>
+            <Button
+              variant="outline"
+              className="w-full justify-start"
+              onClick={onSyncClick}
+              data-testid="sync-spec-mobile"
+            >
+              <RefreshCcw className="w-4 h-4 mr-2" />
+              Sync
+            </Button>
+            <Button
+              variant="outline"
+              className="w-full justify-start"
+              onClick={onRegenerateClick}
+              data-testid="regenerate-spec-mobile"
+            >
+              <Sparkles className="w-4 h-4 mr-2" />
+              Regenerate
+            </Button>
+            <Button
+              variant="outline"
+              className="w-full justify-start"
+              onClick={onGenerateFeaturesClick}
+              data-testid="generate-features-mobile"
+            >
+              <ListPlus className="w-4 h-4 mr-2" />
+              Generate Features
+            </Button>
+            {showSaveButton && (
+              <Button
+                className="w-full justify-start"
+                onClick={onSaveClick}
+                disabled={!hasChanges || isSaving}
+                data-testid="save-spec-mobile"
+              >
+                <Save className="w-4 h-4 mr-2" />
+                {isSaving ? 'Saving...' : hasChanges ? 'Save Changes' : 'Saved'}
+              </Button>
+            )}
+          </>
+        )}
+      </HeaderActionsPanel>
+    </>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/components/spec-mode-tabs.tsx b/temp_repo/apps/ui/src/components/views/spec-view/components/spec-mode-tabs.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f57c07f04e797e98c0c21cfec578ee330827cb05
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/components/spec-mode-tabs.tsx
@@ -0,0 +1,55 @@
+import { Eye, Edit3, Code } from 'lucide-react';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import type { SpecViewMode } from '../types';
+
+interface SpecModeTabsProps {
+  mode: SpecViewMode;
+  onModeChange: (mode: SpecViewMode) => void;
+  isParseValid: boolean;
+  disabled?: boolean;
+}
+
+export function SpecModeTabs({
+  mode,
+  onModeChange,
+  isParseValid,
+  disabled = false,
+}: SpecModeTabsProps) {
+  const handleValueChange = (value: string) => {
+    onModeChange(value as SpecViewMode);
+  };
+
+  return (
+    <Tabs value={mode} onValueChange={handleValueChange}>
+      <TabsList>
+        <TabsTrigger
+          value="view"
+          disabled={disabled || !isParseValid}
+          title={!isParseValid ? 'Fix XML errors to enable View mode' : 'View formatted spec'}
+          aria-label="View"
+        >
+          <Eye className="w-4 h-4" />
+          <span className="hidden sm:inline">View</span>
+        </TabsTrigger>
+        <TabsTrigger
+          value="edit"
+          disabled={disabled || !isParseValid}
+          title={!isParseValid ? 'Fix XML errors to enable Edit mode' : 'Edit spec with form'}
+          aria-label="Edit"
+        >
+          <Edit3 className="w-4 h-4" />
+          <span className="hidden sm:inline">Edit</span>
+        </TabsTrigger>
+        <TabsTrigger
+          value="source"
+          disabled={disabled}
+          title="Edit raw XML source"
+          aria-label="Source"
+        >
+          <Code className="w-4 h-4" />
+          <span className="hidden sm:inline">Source</span>
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/components/spec-view-mode.tsx b/temp_repo/apps/ui/src/components/views/spec-view/components/spec-view-mode.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..292553346c02394fcbc13d87c72879e5e1673af4
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/components/spec-view-mode.tsx
@@ -0,0 +1,223 @@
+import type { SpecOutput } from '@automaker/spec-parser';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import {
+  CheckCircle2,
+  Circle,
+  Clock,
+  Cpu,
+  FileCode2,
+  FolderOpen,
+  Lightbulb,
+  ListChecks,
+  Map as MapIcon,
+  ScrollText,
+  Wrench,
+} from 'lucide-react';
+
+interface SpecViewModeProps {
+  spec: SpecOutput;
+}
+
+function StatusBadge({ status }: { status: 'completed' | 'in_progress' | 'pending' }) {
+  const variants = {
+    completed: { variant: 'success' as const, icon: CheckCircle2, label: 'Completed' },
+    in_progress: { variant: 'warning' as const, icon: Clock, label: 'In Progress' },
+    pending: { variant: 'muted' as const, icon: Circle, label: 'Pending' },
+  };
+
+  const { variant, icon: Icon, label } = variants[status];
+
+  return (
+    <Badge variant={variant} className="gap-1">
+      <Icon className="w-3 h-3" />
+      {label}
+    </Badge>
+  );
+}
+
+export function SpecViewMode({ spec }: SpecViewModeProps) {
+  return (
+    <ScrollArea className="h-full">
+      <div className="p-4 space-y-6 max-w-4xl mx-auto">
+        {/* Project Header */}
+        <div className="space-y-3">
+          <h1 className="text-3xl font-bold tracking-tight">{spec.project_name}</h1>
+          <p className="text-muted-foreground text-lg leading-relaxed">{spec.overview}</p>
+        </div>
+
+        {/* Technology Stack */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="flex items-center gap-2 text-lg">
+              <Cpu className="w-5 h-5 text-primary" />
+              Technology Stack
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-2">
+              {spec.technology_stack.map((tech, index) => (
+                <Badge key={index} variant="secondary" className="text-sm">
+                  {tech}
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Core Capabilities */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="flex items-center gap-2 text-lg">
+              <Lightbulb className="w-5 h-5 text-primary" />
+              Core Capabilities
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ul className="space-y-2">
+              {spec.core_capabilities.map((capability, index) => (
+                <li key={index} className="flex items-start gap-2">
+                  <CheckCircle2 className="w-4 h-4 text-green-500 mt-1 shrink-0" />
+                  <span>{capability}</span>
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+
+        {/* Implemented Features */}
+        {spec.implemented_features.length > 0 && (
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center gap-2 text-lg">
+                <ListChecks className="w-5 h-5 text-primary" />
+                Implemented Features
+                <Badge variant="outline" className="ml-2">
+                  {spec.implemented_features.length}
+                </Badge>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <Accordion type="multiple" className="w-full">
+                {spec.implemented_features.map((feature, index) => (
+                  <AccordionItem key={index} value={`feature-${index}`}>
+                    <AccordionTrigger className="hover:no-underline">
+                      <div className="flex items-center gap-2 text-left">
+                        <FileCode2 className="w-4 h-4 text-muted-foreground shrink-0" />
+                        <span className="font-medium">{feature.name}</span>
+                      </div>
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      <div className="space-y-3 pl-6">
+                        <p className="text-muted-foreground">{feature.description}</p>
+                        {feature.file_locations && feature.file_locations.length > 0 && (
+                          <div className="space-y-1">
+                            <p className="text-sm font-medium flex items-center gap-1">
+                              <FolderOpen className="w-4 h-4" />
+                              File Locations:
+                            </p>
+                            <ul className="text-sm text-muted-foreground space-y-1">
+                              {feature.file_locations.map((loc, locIndex) => (
+                                <li
+                                  key={locIndex}
+                                  className="font-mono text-xs bg-muted px-2 py-1 rounded"
+                                >
+                                  {loc}
+                                </li>
+                              ))}
+                            </ul>
+                          </div>
+                        )}
+                      </div>
+                    </AccordionContent>
+                  </AccordionItem>
+                ))}
+              </Accordion>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Additional Requirements */}
+        {spec.additional_requirements && spec.additional_requirements.length > 0 && (
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center gap-2 text-lg">
+                <ScrollText className="w-5 h-5 text-primary" />
+                Additional Requirements
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ul className="space-y-2">
+                {spec.additional_requirements.map((req, index) => (
+                  <li key={index} className="flex items-start gap-2">
+                    <Circle className="w-2 h-2 text-muted-foreground mt-2 shrink-0 fill-current" />
+                    <span>{req}</span>
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Development Guidelines */}
+        {spec.development_guidelines && spec.development_guidelines.length > 0 && (
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center gap-2 text-lg">
+                <Wrench className="w-5 h-5 text-primary" />
+                Development Guidelines
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ul className="space-y-2">
+                {spec.development_guidelines.map((guideline, index) => (
+                  <li key={index} className="flex items-start gap-2">
+                    <Circle className="w-2 h-2 text-muted-foreground mt-2 shrink-0 fill-current" />
+                    <span>{guideline}</span>
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Implementation Roadmap */}
+        {spec.implementation_roadmap && spec.implementation_roadmap.length > 0 && (
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center gap-2 text-lg">
+                <MapIcon className="w-5 h-5 text-primary" />
+                Implementation Roadmap
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {spec.implementation_roadmap.map((phase, index) => (
+                  <div
+                    key={index}
+                    className="flex flex-col sm:flex-row sm:items-start gap-2 sm:gap-4 p-3 rounded-lg bg-muted/50"
+                  >
+                    <div className="flex items-center gap-2 sm:w-48 shrink-0">
+                      <StatusBadge status={phase.status} />
+                    </div>
+                    <div className="flex-1">
+                      <p className="font-medium">{phase.phase}</p>
+                      <p className="text-sm text-muted-foreground">{phase.description}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/constants.ts b/temp_repo/apps/ui/src/components/views/spec-view/constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f6c32a80019abfcc2fa39daa4840532d0c5a187b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/constants.ts
@@ -0,0 +1,30 @@
+import type { FeatureCount } from './types';
+
+// Delay before reloading spec file to ensure it's written to disk
+export const SPEC_FILE_WRITE_DELAY = 500;
+
+// Interval for polling backend status during generation
+export const STATUS_CHECK_INTERVAL_MS = 2000;
+
+// Feature count options with labels and warnings
+export const FEATURE_COUNT_OPTIONS: {
+  value: FeatureCount;
+  label: string;
+  warning?: string;
+}[] = [
+  { value: 20, label: '20' },
+  { value: 50, label: '50', warning: 'May take up to 5 minutes' },
+  { value: 100, label: '100', warning: 'May take up to 5 minutes' },
+];
+
+// Phase display labels for UI
+export const PHASE_LABELS: Record<string, string> = {
+  initialization: 'Initializing...',
+  setup: 'Setting up tools...',
+  analysis: 'Analyzing project structure...',
+  spec_complete: 'Spec created! Generating features...',
+  feature_generation: 'Creating features from roadmap...',
+  working: 'Working...',
+  complete: 'Complete!',
+  error: 'Error occurred',
+};
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/dialogs/create-spec-dialog.tsx b/temp_repo/apps/ui/src/components/views/spec-view/dialogs/create-spec-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f77b08cab5c84c82985fe546659d5cc3d6ea4a19
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/dialogs/create-spec-dialog.tsx
@@ -0,0 +1,181 @@
+import { Sparkles, Clock } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { HotkeyButton } from '@/components/ui/hotkey-button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { cn } from '@/lib/utils';
+import { FEATURE_COUNT_OPTIONS } from '../constants';
+import type { CreateSpecDialogProps, FeatureCount } from '../types';
+
+export function CreateSpecDialog({
+  open,
+  onOpenChange,
+  projectOverview,
+  onProjectOverviewChange,
+  generateFeatures,
+  onGenerateFeaturesChange,
+  analyzeProject,
+  onAnalyzeProjectChange,
+  featureCount,
+  onFeatureCountChange,
+  onCreateSpec,
+  onSkip,
+  isCreatingSpec,
+  showSkipButton = false,
+  title = 'Create App Specification',
+  description = "We didn't find an app_spec.txt file. Let us help you generate your app_spec.txt to help describe your project for our system. We'll analyze your project's tech stack and create a comprehensive specification.",
+}: CreateSpecDialogProps) {
+  const selectedOption = FEATURE_COUNT_OPTIONS.find((o) => o.value === featureCount);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        onOpenChange(open);
+        if (!open && !isCreatingSpec && onSkip) {
+          onSkip();
+        }
+      }}
+    >
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription className="text-muted-foreground">{description}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4 overflow-y-auto">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Project Overview</label>
+            <p className="text-xs text-muted-foreground">
+              Describe what your project does and what features you want to build. Be as detailed as
+              you want - this will help us create a better specification.
+            </p>
+            <textarea
+              className="w-full h-48 p-3 rounded-md border border-border bg-background font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+              value={projectOverview}
+              onChange={(e) => onProjectOverviewChange(e.target.value)}
+              placeholder="e.g., A project management tool that allows teams to track tasks, manage sprints, and visualize progress through kanban boards. It should support user authentication, real-time updates, and file attachments..."
+              autoFocus
+              disabled={isCreatingSpec}
+            />
+          </div>
+
+          <div className="flex items-start space-x-3 pt-2">
+            <Checkbox
+              id="create-analyze-project"
+              checked={analyzeProject}
+              onCheckedChange={(checked) => onAnalyzeProjectChange(checked === true)}
+              disabled={isCreatingSpec}
+            />
+            <div className="space-y-1">
+              <label
+                htmlFor="create-analyze-project"
+                className={`text-sm font-medium ${isCreatingSpec ? '' : 'cursor-pointer'}`}
+              >
+                Analyze current project for additional context
+              </label>
+              <p className="text-xs text-muted-foreground">
+                If checked, the agent will research your existing codebase to understand the tech
+                stack. If unchecked, defaults to TanStack Start, Drizzle ORM, PostgreSQL, shadcn/ui,
+                Tailwind CSS, and React.
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-start space-x-3 pt-2">
+            <Checkbox
+              id="create-generate-features"
+              checked={generateFeatures}
+              onCheckedChange={(checked) => onGenerateFeaturesChange(checked === true)}
+              disabled={isCreatingSpec}
+            />
+            <div className="space-y-1">
+              <label
+                htmlFor="create-generate-features"
+                className={`text-sm font-medium ${isCreatingSpec ? '' : 'cursor-pointer'}`}
+              >
+                Generate feature list
+              </label>
+              <p className="text-xs text-muted-foreground">
+                Automatically create features in the features folder from the implementation roadmap
+                after the spec is generated.
+              </p>
+            </div>
+          </div>
+
+          {/* Feature Count Selection - only shown when generateFeatures is enabled */}
+          {generateFeatures && (
+            <div className="space-y-2 pt-2 pl-7">
+              <label className="text-sm font-medium">Number of Features</label>
+              <div className="flex gap-2">
+                {FEATURE_COUNT_OPTIONS.map((option) => (
+                  <Button
+                    key={option.value}
+                    type="button"
+                    variant={featureCount === option.value ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => onFeatureCountChange(option.value as FeatureCount)}
+                    disabled={isCreatingSpec}
+                    className={cn(
+                      'flex-1 transition-all',
+                      featureCount === option.value
+                        ? 'bg-primary hover:bg-primary/90 text-primary-foreground'
+                        : 'bg-muted/30 hover:bg-muted/50 border-border'
+                    )}
+                    data-testid={`feature-count-${option.value}`}
+                  >
+                    {option.label}
+                  </Button>
+                ))}
+              </div>
+              {selectedOption?.warning && (
+                <p className="text-xs text-amber-500 flex items-center gap-1">
+                  <Clock className="w-3 h-3" />
+                  {selectedOption.warning}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          {showSkipButton && onSkip ? (
+            <Button variant="ghost" onClick={onSkip} disabled={isCreatingSpec}>
+              Skip for now
+            </Button>
+          ) : (
+            <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={isCreatingSpec}>
+              Cancel
+            </Button>
+          )}
+          <HotkeyButton
+            onClick={onCreateSpec}
+            disabled={!projectOverview.trim() || isCreatingSpec}
+            hotkey={{ key: 'Enter', cmdCtrl: true }}
+            hotkeyActive={open && !isCreatingSpec}
+          >
+            {isCreatingSpec ? (
+              <>
+                <Spinner size="sm" className="mr-2" />
+                Generating...
+              </>
+            ) : (
+              <>
+                <Sparkles className="w-4 h-4 mr-2" />
+                Generate Spec
+              </>
+            )}
+          </HotkeyButton>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/dialogs/index.ts b/temp_repo/apps/ui/src/components/views/spec-view/dialogs/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..74074ff00eaa64edbdbd3436f5ed20dec8128900
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/dialogs/index.ts
@@ -0,0 +1,2 @@
+export { CreateSpecDialog } from './create-spec-dialog';
+export { RegenerateSpecDialog } from './regenerate-spec-dialog';
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/dialogs/regenerate-spec-dialog.tsx b/temp_repo/apps/ui/src/components/views/spec-view/dialogs/regenerate-spec-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c911fc94cdddba51a3d48e9b04f562fd3cc07c6b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/dialogs/regenerate-spec-dialog.tsx
@@ -0,0 +1,177 @@
+import { Sparkles, Clock } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { HotkeyButton } from '@/components/ui/hotkey-button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { cn } from '@/lib/utils';
+import { FEATURE_COUNT_OPTIONS } from '../constants';
+import type { RegenerateSpecDialogProps, FeatureCount } from '../types';
+
+export function RegenerateSpecDialog({
+  open,
+  onOpenChange,
+  projectDefinition,
+  onProjectDefinitionChange,
+  generateFeatures,
+  onGenerateFeaturesChange,
+  analyzeProject,
+  onAnalyzeProjectChange,
+  featureCount,
+  onFeatureCountChange,
+  onRegenerate,
+  isRegenerating,
+  isGeneratingFeatures = false,
+}: RegenerateSpecDialogProps) {
+  const selectedOption = FEATURE_COUNT_OPTIONS.find((o) => o.value === featureCount);
+  const isDisabled = isRegenerating || isGeneratingFeatures;
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        if (!open && !isRegenerating) {
+          onOpenChange(false);
+        }
+      }}
+    >
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Regenerate App Specification</DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            We will regenerate your app spec based on a short project definition and the current
+            tech stack found in your project. The agent will analyze your codebase to understand
+            your existing technologies and create a comprehensive specification.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4 overflow-y-auto">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Describe your project</label>
+            <p className="text-xs text-muted-foreground">
+              Provide a clear description of what your app should do. Be as detailed as you want -
+              the more context you provide, the more comprehensive the spec will be.
+            </p>
+            <textarea
+              className="w-full h-40 p-3 rounded-md border border-border bg-background font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+              value={projectDefinition}
+              onChange={(e) => onProjectDefinitionChange(e.target.value)}
+              placeholder="e.g., A task management app where users can create projects, add tasks with due dates, assign tasks to team members, track progress with a kanban board, and receive notifications for upcoming deadlines..."
+              disabled={isDisabled}
+            />
+          </div>
+
+          <div className="flex items-start space-x-3 pt-2">
+            <Checkbox
+              id="regenerate-analyze-project"
+              checked={analyzeProject}
+              onCheckedChange={(checked) => onAnalyzeProjectChange(checked === true)}
+              disabled={isDisabled}
+            />
+            <div className="space-y-1">
+              <label
+                htmlFor="regenerate-analyze-project"
+                className={`text-sm font-medium ${isDisabled ? '' : 'cursor-pointer'}`}
+              >
+                Analyze current project for additional context
+              </label>
+              <p className="text-xs text-muted-foreground">
+                If checked, the agent will research your existing codebase to understand the tech
+                stack. If unchecked, defaults to TanStack Start, Drizzle ORM, PostgreSQL, shadcn/ui,
+                Tailwind CSS, and React.
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-start space-x-3 pt-2">
+            <Checkbox
+              id="regenerate-generate-features"
+              checked={generateFeatures}
+              onCheckedChange={(checked) => onGenerateFeaturesChange(checked === true)}
+              disabled={isDisabled}
+            />
+            <div className="space-y-1">
+              <label
+                htmlFor="regenerate-generate-features"
+                className={`text-sm font-medium ${isDisabled ? '' : 'cursor-pointer'}`}
+              >
+                Generate feature list
+              </label>
+              <p className="text-xs text-muted-foreground">
+                Automatically create features in the features folder from the implementation roadmap
+                after the spec is regenerated.
+              </p>
+            </div>
+          </div>
+
+          {/* Feature Count Selection - only shown when generateFeatures is enabled */}
+          {generateFeatures && (
+            <div className="space-y-2 pt-2 pl-7">
+              <label className="text-sm font-medium">Number of Features</label>
+              <div className="flex gap-2">
+                {FEATURE_COUNT_OPTIONS.map((option) => (
+                  <Button
+                    key={option.value}
+                    type="button"
+                    variant={featureCount === option.value ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => onFeatureCountChange(option.value as FeatureCount)}
+                    disabled={isDisabled}
+                    className={cn(
+                      'flex-1 transition-all',
+                      featureCount === option.value
+                        ? 'bg-primary hover:bg-primary/90 text-primary-foreground'
+                        : 'bg-muted/30 hover:bg-muted/50 border-border'
+                    )}
+                    data-testid={`regenerate-feature-count-${option.value}`}
+                  >
+                    {option.label}
+                  </Button>
+                ))}
+              </div>
+              {selectedOption?.warning && (
+                <p className="text-xs text-amber-500 flex items-center gap-1">
+                  <Clock className="w-3 h-3" />
+                  {selectedOption.warning}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <div className="flex gap-2">
+            <Button variant="ghost" onClick={() => onOpenChange(false)} disabled={isDisabled}>
+              Cancel
+            </Button>
+            <HotkeyButton
+              onClick={onRegenerate}
+              disabled={!projectDefinition.trim() || isDisabled}
+              hotkey={{ key: 'Enter', cmdCtrl: true }}
+              hotkeyActive={open && !isDisabled}
+            >
+              {isRegenerating ? (
+                <>
+                  <Spinner size="sm" className="mr-2" />
+                  Regenerating...
+                </>
+              ) : (
+                <>
+                  <Sparkles className="w-4 h-4 mr-2" />
+                  Regenerate Spec
+                </>
+              )}
+            </HotkeyButton>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/hooks/index.ts b/temp_repo/apps/ui/src/components/views/spec-view/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..330766f546ec7606264f3dbb234664068b850d8c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/hooks/index.ts
@@ -0,0 +1,5 @@
+export { useSpecLoading } from './use-spec-loading';
+export { useSpecSave } from './use-spec-save';
+export { useSpecGeneration } from './use-spec-generation';
+export { useSpecParser } from './use-spec-parser';
+export type { UseSpecParserResult } from './use-spec-parser';
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/hooks/use-spec-generation.ts b/temp_repo/apps/ui/src/components/views/spec-view/hooks/use-spec-generation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..63bc013e076b496d4d2f39ade320a05833a1e432
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/hooks/use-spec-generation.ts
@@ -0,0 +1,630 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { useAppStore } from '@/store/app-store';
+
+const logger = createLogger('SpecGeneration');
+import { getElectronAPI } from '@/lib/electron';
+import { toast } from 'sonner';
+import { CheckCircle2 } from 'lucide-react';
+import { createElement } from 'react';
+import { SPEC_FILE_WRITE_DELAY, STATUS_CHECK_INTERVAL_MS } from '../constants';
+import type { FeatureCount } from '../types';
+import type { SpecRegenerationEvent } from '@/types/electron';
+import { useCreateSpec, useRegenerateSpec, useGenerateFeatures } from '@/hooks/mutations';
+
+interface UseSpecGenerationOptions {
+  loadSpec: () => Promise<void>;
+}
+
+export function useSpecGeneration({ loadSpec }: UseSpecGenerationOptions) {
+  const { currentProject } = useAppStore();
+
+  // React Query mutations
+  const createSpecMutation = useCreateSpec(currentProject?.path ?? '');
+  const regenerateSpecMutation = useRegenerateSpec(currentProject?.path ?? '');
+  const generateFeaturesMutation = useGenerateFeatures(currentProject?.path ?? '');
+
+  // Dialog visibility state
+  const [showCreateDialog, setShowCreateDialog] = useState(false);
+  const [showRegenerateDialog, setShowRegenerateDialog] = useState(false);
+
+  // Create spec state
+  const [projectOverview, setProjectOverview] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
+  const [generateFeatures, setGenerateFeatures] = useState(true);
+  const [analyzeProjectOnCreate, setAnalyzeProjectOnCreate] = useState(true);
+  const [featureCountOnCreate, setFeatureCountOnCreate] = useState<FeatureCount>(50);
+
+  // Regenerate spec state
+  const [projectDefinition, setProjectDefinition] = useState('');
+  const [isRegenerating, setIsRegenerating] = useState(false);
+  const [generateFeaturesOnRegenerate, setGenerateFeaturesOnRegenerate] = useState(true);
+  const [analyzeProjectOnRegenerate, setAnalyzeProjectOnRegenerate] = useState(true);
+  const [featureCountOnRegenerate, setFeatureCountOnRegenerate] = useState<FeatureCount>(50);
+
+  // Generate features only state
+  const [isGeneratingFeatures, setIsGeneratingFeatures] = useState(false);
+
+  // Sync state
+  const [isSyncing, setIsSyncing] = useState(false);
+
+  // Logs state (kept for internal tracking)
+  const [logs, setLogs] = useState<string>('');
+  const logsRef = useRef<string>('');
+
+  // Phase tracking and status
+  const [currentPhase, setCurrentPhase] = useState<string>('');
+  const [errorMessage, setErrorMessage] = useState<string>('');
+  const currentPhaseRef = useRef<string>('');
+  const errorMessageRef = useRef<string>('');
+  const statusCheckRef = useRef<boolean>(false);
+  const stateRestoredRef = useRef<boolean>(false);
+  const pendingStatusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    currentPhaseRef.current = currentPhase;
+  }, [currentPhase]);
+
+  useEffect(() => {
+    errorMessageRef.current = errorMessage;
+  }, [errorMessage]);
+
+  // Reset all state when project changes
+  useEffect(() => {
+    setIsCreating(false);
+    setIsRegenerating(false);
+    setIsGeneratingFeatures(false);
+    setIsSyncing(false);
+    setCurrentPhase('');
+    setErrorMessage('');
+    setLogs('');
+    logsRef.current = '';
+    stateRestoredRef.current = false;
+    statusCheckRef.current = false;
+
+    if (pendingStatusTimeoutRef.current) {
+      clearTimeout(pendingStatusTimeoutRef.current);
+      pendingStatusTimeoutRef.current = null;
+    }
+  }, [currentProject?.path]);
+
+  // Check if spec regeneration is running when component mounts or project changes
+  useEffect(() => {
+    const checkStatus = async () => {
+      if (!currentProject || statusCheckRef.current) return;
+      statusCheckRef.current = true;
+
+      try {
+        const api = getElectronAPI();
+        if (!api.specRegeneration) {
+          statusCheckRef.current = false;
+          return;
+        }
+
+        const status = await api.specRegeneration.status(currentProject.path);
+        logger.debug(
+          '[useSpecGeneration] Status check on mount:',
+          status,
+          'for project:',
+          currentProject.path
+        );
+
+        if (status.success && status.isRunning) {
+          logger.debug('[useSpecGeneration] Spec generation is running for this project.');
+
+          setIsCreating(true);
+          setIsRegenerating(true);
+          if (status.currentPhase) {
+            setCurrentPhase(status.currentPhase);
+          } else {
+            setCurrentPhase('initialization');
+          }
+
+          if (pendingStatusTimeoutRef.current) {
+            clearTimeout(pendingStatusTimeoutRef.current);
+          }
+          pendingStatusTimeoutRef.current = setTimeout(() => {
+            logger.debug(
+              '[useSpecGeneration] No events received for current project - clearing tentative state'
+            );
+            setIsCreating(false);
+            setIsRegenerating(false);
+            setCurrentPhase('');
+            pendingStatusTimeoutRef.current = null;
+          }, 3000);
+        } else if (status.success && !status.isRunning) {
+          setIsCreating(false);
+          setIsRegenerating(false);
+          setCurrentPhase('');
+          stateRestoredRef.current = false;
+        }
+      } catch (error) {
+        logger.error('[useSpecGeneration] Failed to check status:', error);
+      } finally {
+        statusCheckRef.current = false;
+      }
+    };
+
+    stateRestoredRef.current = false;
+    checkStatus();
+  }, [currentProject]);
+
+  // Sync state when tab becomes visible
+  useEffect(() => {
+    const handleVisibilityChange = async () => {
+      if (
+        !document.hidden &&
+        currentProject &&
+        (isCreating || isRegenerating || isGeneratingFeatures || isSyncing)
+      ) {
+        try {
+          const api = getElectronAPI();
+          if (!api.specRegeneration) return;
+
+          const status = await api.specRegeneration.status(currentProject.path);
+          logger.debug('[useSpecGeneration] Visibility change - status check:', status);
+
+          if (!status.isRunning) {
+            logger.debug(
+              '[useSpecGeneration] Visibility change: Backend indicates generation complete - clearing state'
+            );
+            setIsCreating(false);
+            setIsRegenerating(false);
+            setIsGeneratingFeatures(false);
+            setIsSyncing(false);
+            setCurrentPhase('');
+            stateRestoredRef.current = false;
+            loadSpec();
+          } else if (status.currentPhase) {
+            setCurrentPhase(status.currentPhase);
+          }
+        } catch (error) {
+          logger.error('[useSpecGeneration] Failed to check status on visibility change:', error);
+        }
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [currentProject, isCreating, isRegenerating, isGeneratingFeatures, isSyncing, loadSpec]);
+
+  // Periodic status check
+  useEffect(() => {
+    if (!currentProject || (!isCreating && !isRegenerating && !isGeneratingFeatures && !isSyncing))
+      return;
+
+    const intervalId = setInterval(async () => {
+      try {
+        const api = getElectronAPI();
+        if (!api.specRegeneration) return;
+
+        const status = await api.specRegeneration.status(currentProject.path);
+
+        if (!status.isRunning) {
+          logger.debug(
+            '[useSpecGeneration] Periodic check: Backend indicates generation complete - clearing state'
+          );
+          setIsCreating(false);
+          setIsRegenerating(false);
+          setIsGeneratingFeatures(false);
+          setIsSyncing(false);
+          setCurrentPhase('');
+          stateRestoredRef.current = false;
+          loadSpec();
+        } else if (status.currentPhase && status.currentPhase !== currentPhase) {
+          logger.debug('[useSpecGeneration] Periodic check: Phase updated from backend', {
+            old: currentPhase,
+            new: status.currentPhase,
+          });
+          setCurrentPhase(status.currentPhase);
+        }
+      } catch (error) {
+        logger.error('[useSpecGeneration] Periodic status check error:', error);
+      }
+    }, STATUS_CHECK_INTERVAL_MS);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [
+    currentProject,
+    isCreating,
+    isRegenerating,
+    isGeneratingFeatures,
+    isSyncing,
+    currentPhase,
+    loadSpec,
+  ]);
+
+  // Subscribe to spec regeneration events
+  useEffect(() => {
+    if (!currentProject) return;
+
+    const api = getElectronAPI();
+    if (!api.specRegeneration) return;
+
+    const unsubscribe = api.specRegeneration.onEvent((event: SpecRegenerationEvent) => {
+      logger.debug(
+        '[useSpecGeneration] Regeneration event:',
+        event.type,
+        'for project:',
+        event.projectPath,
+        'current project:',
+        currentProject?.path
+      );
+
+      if (event.projectPath !== currentProject?.path) {
+        logger.debug('[useSpecGeneration] Ignoring event - not for current project');
+        return;
+      }
+
+      if (pendingStatusTimeoutRef.current) {
+        clearTimeout(pendingStatusTimeoutRef.current);
+        pendingStatusTimeoutRef.current = null;
+        logger.debug(
+          '[useSpecGeneration] Event confirmed this is for current project - clearing timeout'
+        );
+      }
+
+      if (event.type === 'spec_regeneration_progress') {
+        setIsCreating(true);
+        setIsRegenerating(true);
+
+        const phaseMatch = event.content.match(/\[Phase:\s*([^\]]+)\]/);
+        if (phaseMatch) {
+          const phase = phaseMatch[1];
+          setCurrentPhase(phase);
+          logger.debug(`[useSpecGeneration] Phase updated: ${phase}`);
+
+          if (phase === 'complete') {
+            logger.debug('[useSpecGeneration] Phase is complete - clearing state');
+            setIsCreating(false);
+            setIsRegenerating(false);
+            stateRestoredRef.current = false;
+            setTimeout(() => {
+              loadSpec();
+            }, SPEC_FILE_WRITE_DELAY);
+          }
+        }
+
+        if (
+          event.content.includes('All tasks completed') ||
+          event.content.includes('✓ All tasks completed')
+        ) {
+          logger.debug(
+            '[useSpecGeneration] Detected completion in progress message - clearing state'
+          );
+          setIsCreating(false);
+          setIsRegenerating(false);
+          setCurrentPhase('');
+          stateRestoredRef.current = false;
+          setTimeout(() => {
+            loadSpec();
+          }, SPEC_FILE_WRITE_DELAY);
+        }
+
+        const newLog = logsRef.current + event.content;
+        logsRef.current = newLog;
+        setLogs(newLog);
+        logger.debug('[useSpecGeneration] Progress:', event.content.substring(0, 100));
+
+        if (errorMessageRef.current) {
+          setErrorMessage('');
+        }
+      } else if (event.type === 'spec_regeneration_tool') {
+        const isFeatureTool =
+          event.tool === 'mcp__automaker-tools__UpdateFeatureStatus' ||
+          event.tool === 'UpdateFeatureStatus' ||
+          event.tool?.includes('Feature');
+
+        if (isFeatureTool) {
+          if (currentPhaseRef.current !== 'feature_generation') {
+            setCurrentPhase('feature_generation');
+            setIsCreating(true);
+            setIsRegenerating(true);
+            logger.debug(
+              '[useSpecGeneration] Detected feature creation tool - setting phase to feature_generation'
+            );
+          }
+        }
+
+        const toolInput = event.input
+          ? ` (${JSON.stringify(event.input).substring(0, 100)}...)`
+          : '';
+        const toolLog = `\n[Tool] ${event.tool}${toolInput}\n`;
+        const newLog = logsRef.current + toolLog;
+        logsRef.current = newLog;
+        setLogs(newLog);
+        logger.debug('[useSpecGeneration] Tool:', event.tool, event.input);
+      } else if (event.type === 'spec_regeneration_complete') {
+        const completionLog = logsRef.current + `\n[Complete] ${event.message}\n`;
+        logsRef.current = completionLog;
+        setLogs(completionLog);
+
+        const isFinalCompletionMessage =
+          event.message?.includes('All tasks completed') ||
+          event.message === 'All tasks completed!' ||
+          event.message === 'All tasks completed' ||
+          event.message === 'Spec regeneration complete!' ||
+          event.message === 'Initial spec creation complete!' ||
+          event.message?.includes('Spec sync complete');
+
+        const hasCompletePhase = logsRef.current.includes('[Phase: complete]');
+
+        const isIntermediateCompletion =
+          event.message?.includes('Features are being generated') ||
+          event.message?.includes('features are being generated');
+
+        const shouldComplete =
+          (isFinalCompletionMessage || hasCompletePhase) && !isIntermediateCompletion;
+
+        if (shouldComplete) {
+          logger.debug('[useSpecGeneration] Final completion detected - clearing state', {
+            isFinalCompletionMessage,
+            hasCompletePhase,
+            message: event.message,
+          });
+          setIsRegenerating(false);
+          setIsCreating(false);
+          setIsGeneratingFeatures(false);
+          setIsSyncing(false);
+          setCurrentPhase('');
+          setShowRegenerateDialog(false);
+          setShowCreateDialog(false);
+          setProjectDefinition('');
+          setProjectOverview('');
+          setErrorMessage('');
+          stateRestoredRef.current = false;
+
+          setTimeout(() => {
+            loadSpec();
+          }, SPEC_FILE_WRITE_DELAY);
+
+          const isSyncComplete = event.message?.includes('sync');
+          const isRegeneration = event.message?.includes('regeneration');
+          const isFeatureGeneration = event.message?.includes('Feature generation');
+          toast.success(
+            isSyncComplete
+              ? 'Spec Sync Complete'
+              : isFeatureGeneration
+                ? 'Feature Generation Complete'
+                : isRegeneration
+                  ? 'Spec Regeneration Complete'
+                  : 'Spec Creation Complete',
+            {
+              description: isSyncComplete
+                ? 'Your spec has been updated with the latest changes.'
+                : isFeatureGeneration
+                  ? 'Features have been created from the app specification.'
+                  : 'Your app specification has been saved.',
+              icon: createElement(CheckCircle2, { className: 'w-4 h-4' }),
+            }
+          );
+        } else if (isIntermediateCompletion) {
+          setIsCreating(true);
+          setIsRegenerating(true);
+          setCurrentPhase('feature_generation');
+          logger.debug(
+            '[useSpecGeneration] Intermediate completion, continuing with feature generation'
+          );
+        }
+
+        logger.debug('[useSpecGeneration] Spec generation event:', event.message);
+      } else if (event.type === 'spec_regeneration_error') {
+        setIsRegenerating(false);
+        setIsCreating(false);
+        setIsGeneratingFeatures(false);
+        setIsSyncing(false);
+        setCurrentPhase('error');
+        setErrorMessage(event.error);
+        stateRestoredRef.current = false;
+        const errorLog = logsRef.current + `\n\n[ERROR] ${event.error}\n`;
+        logsRef.current = errorLog;
+        setLogs(errorLog);
+        logger.error('[useSpecGeneration] Regeneration error:', event.error);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [currentProject, loadSpec]);
+
+  // Handler functions
+  const handleCreateSpec = useCallback(async () => {
+    if (!currentProject || !projectOverview.trim()) return;
+
+    setIsCreating(true);
+    setShowCreateDialog(false);
+    setCurrentPhase('initialization');
+    setErrorMessage('');
+    logsRef.current = '';
+    setLogs('');
+    logger.debug('[useSpecGeneration] Starting spec creation, generateFeatures:', generateFeatures);
+
+    createSpecMutation.mutate(
+      {
+        projectOverview: projectOverview.trim(),
+        generateFeatures,
+        analyzeProject: analyzeProjectOnCreate,
+        featureCount: generateFeatures ? featureCountOnCreate : undefined,
+      },
+      {
+        onError: (error) => {
+          const errorMsg = error.message;
+          logger.error('[useSpecGeneration] Failed to create spec:', errorMsg);
+          setIsCreating(false);
+          setCurrentPhase('error');
+          setErrorMessage(errorMsg);
+          const errorLog = `[Error] Failed to create spec: ${errorMsg}\n`;
+          logsRef.current = errorLog;
+          setLogs(errorLog);
+        },
+      }
+    );
+  }, [
+    currentProject,
+    projectOverview,
+    generateFeatures,
+    analyzeProjectOnCreate,
+    featureCountOnCreate,
+    createSpecMutation,
+  ]);
+
+  const handleRegenerate = useCallback(async () => {
+    if (!currentProject || !projectDefinition.trim()) return;
+
+    setIsRegenerating(true);
+    setShowRegenerateDialog(false);
+    setCurrentPhase('initialization');
+    setErrorMessage('');
+    logsRef.current = '';
+    setLogs('');
+    logger.debug(
+      '[useSpecGeneration] Starting spec regeneration, generateFeatures:',
+      generateFeaturesOnRegenerate
+    );
+
+    regenerateSpecMutation.mutate(
+      {
+        projectDefinition: projectDefinition.trim(),
+        generateFeatures: generateFeaturesOnRegenerate,
+        analyzeProject: analyzeProjectOnRegenerate,
+        featureCount: generateFeaturesOnRegenerate ? featureCountOnRegenerate : undefined,
+      },
+      {
+        onError: (error) => {
+          const errorMsg = error.message;
+          logger.error('[useSpecGeneration] Failed to regenerate spec:', errorMsg);
+          setIsRegenerating(false);
+          setCurrentPhase('error');
+          setErrorMessage(errorMsg);
+          const errorLog = `[Error] Failed to regenerate spec: ${errorMsg}\n`;
+          logsRef.current = errorLog;
+          setLogs(errorLog);
+        },
+      }
+    );
+  }, [
+    currentProject,
+    projectDefinition,
+    generateFeaturesOnRegenerate,
+    analyzeProjectOnRegenerate,
+    featureCountOnRegenerate,
+    regenerateSpecMutation,
+  ]);
+
+  const handleGenerateFeatures = useCallback(async () => {
+    if (!currentProject) return;
+
+    setIsGeneratingFeatures(true);
+    setShowRegenerateDialog(false);
+    setCurrentPhase('initialization');
+    setErrorMessage('');
+    logsRef.current = '';
+    setLogs('');
+    logger.debug('[useSpecGeneration] Starting feature generation from existing spec');
+
+    generateFeaturesMutation.mutate(undefined, {
+      onError: (error) => {
+        const errorMsg = error.message;
+        logger.error('[useSpecGeneration] Failed to generate features:', errorMsg);
+        setIsGeneratingFeatures(false);
+        setCurrentPhase('error');
+        setErrorMessage(errorMsg);
+        const errorLog = `[Error] Failed to generate features: ${errorMsg}\n`;
+        logsRef.current = errorLog;
+        setLogs(errorLog);
+      },
+    });
+  }, [currentProject, generateFeaturesMutation]);
+
+  const handleSync = useCallback(async () => {
+    if (!currentProject) return;
+
+    setIsSyncing(true);
+    setCurrentPhase('sync');
+    setErrorMessage('');
+    logsRef.current = '';
+    setLogs('');
+    logger.debug('[useSpecGeneration] Starting spec sync');
+    try {
+      const api = getElectronAPI();
+      if (!api.specRegeneration) {
+        logger.error('[useSpecGeneration] Spec regeneration not available');
+        setIsSyncing(false);
+        return;
+      }
+      const result = await api.specRegeneration.sync(currentProject.path);
+
+      if (!result.success) {
+        const errorMsg = result.error || 'Unknown error';
+        logger.error('[useSpecGeneration] Failed to start spec sync:', errorMsg);
+        setIsSyncing(false);
+        setCurrentPhase('error');
+        setErrorMessage(errorMsg);
+        const errorLog = `[Error] Failed to start spec sync: ${errorMsg}\n`;
+        logsRef.current = errorLog;
+        setLogs(errorLog);
+      }
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error);
+      logger.error('[useSpecGeneration] Failed to sync spec:', errorMsg);
+      setIsSyncing(false);
+      setCurrentPhase('error');
+      setErrorMessage(errorMsg);
+      const errorLog = `[Error] Failed to sync spec: ${errorMsg}\n`;
+      logsRef.current = errorLog;
+      setLogs(errorLog);
+    }
+  }, [currentProject]);
+
+  return {
+    // Dialog state
+    showCreateDialog,
+    setShowCreateDialog,
+    showRegenerateDialog,
+    setShowRegenerateDialog,
+
+    // Create state
+    projectOverview,
+    setProjectOverview,
+    isCreating,
+    generateFeatures,
+    setGenerateFeatures,
+    analyzeProjectOnCreate,
+    setAnalyzeProjectOnCreate,
+    featureCountOnCreate,
+    setFeatureCountOnCreate,
+
+    // Regenerate state
+    projectDefinition,
+    setProjectDefinition,
+    isRegenerating,
+    generateFeaturesOnRegenerate,
+    setGenerateFeaturesOnRegenerate,
+    analyzeProjectOnRegenerate,
+    setAnalyzeProjectOnRegenerate,
+    featureCountOnRegenerate,
+    setFeatureCountOnRegenerate,
+
+    // Feature generation state
+    isGeneratingFeatures,
+
+    // Sync state
+    isSyncing,
+
+    // Status state
+    currentPhase,
+    errorMessage,
+    logs,
+
+    // Handlers
+    handleCreateSpec,
+    handleRegenerate,
+    handleSync,
+    handleGenerateFeatures,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/hooks/use-spec-loading.ts b/temp_repo/apps/ui/src/components/views/spec-view/hooks/use-spec-loading.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5aff3df40d7bf61625c8e3ac4722c003398ca223
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/hooks/use-spec-loading.ts
@@ -0,0 +1,54 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { useSpecFile, useSpecRegenerationStatus } from '@/hooks/queries';
+import { useQueryClient } from '@tanstack/react-query';
+import { queryKeys } from '@/lib/query-keys';
+
+export function useSpecLoading() {
+  const { currentProject, setAppSpec } = useAppStore();
+  const queryClient = useQueryClient();
+  const [specExists, setSpecExists] = useState(true);
+
+  // React Query hooks
+  const specFileQuery = useSpecFile(currentProject?.path);
+  const statusQuery = useSpecRegenerationStatus(currentProject?.path);
+
+  const isGenerationRunning = statusQuery.data?.isRunning ?? false;
+
+  // Update app store and specExists when spec file data changes
+  useEffect(() => {
+    if (specFileQuery.data && !isGenerationRunning) {
+      setAppSpec(specFileQuery.data.content);
+      setSpecExists(specFileQuery.data.exists);
+    }
+  }, [specFileQuery.data, setAppSpec, isGenerationRunning]);
+
+  // Manual reload function (invalidates cache)
+  const loadSpec = useCallback(async () => {
+    if (!currentProject?.path) return;
+
+    // Fetch fresh status data to avoid stale cache issues
+    // Using fetchQuery ensures we get the latest data before checking
+    const statusData = await queryClient.fetchQuery<{ isRunning: boolean }>({
+      queryKey: queryKeys.specRegeneration.status(currentProject.path),
+      staleTime: 0, // Force fresh fetch
+    });
+
+    if (statusData?.isRunning) {
+      return;
+    }
+
+    // Invalidate and refetch spec file
+    await queryClient.invalidateQueries({
+      queryKey: queryKeys.spec.file(currentProject.path),
+    });
+  }, [currentProject?.path, queryClient]);
+
+  return {
+    isLoading: specFileQuery.isLoading,
+    specExists,
+    setSpecExists,
+    isGenerationRunning,
+    loadSpec,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/hooks/use-spec-parser.ts b/temp_repo/apps/ui/src/components/views/spec-view/hooks/use-spec-parser.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ba6c02665e1d421f074f9f44de745665e051fe6d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/hooks/use-spec-parser.ts
@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import {
+  xmlToSpec,
+  isValidSpecXml,
+  type ParseResult,
+  type SpecOutput,
+} from '@automaker/spec-parser';
+
+/**
+ * Result of the spec parsing hook.
+ */
+export interface UseSpecParserResult {
+  /** Whether the XML is valid */
+  isValid: boolean;
+  /** The parsed spec object, or null if parsing failed */
+  parsedSpec: SpecOutput | null;
+  /** Parsing errors, if any */
+  errors: string[];
+  /** The full parse result */
+  parseResult: ParseResult | null;
+}
+
+/**
+ * Hook to parse XML spec content into a SpecOutput object.
+ * Memoizes the parsing result to avoid unnecessary re-parsing.
+ *
+ * @param xmlContent - The raw XML content from app_spec.txt
+ * @returns Parsed spec data with validation status
+ */
+export function useSpecParser(xmlContent: string): UseSpecParserResult {
+  return useMemo(() => {
+    if (!xmlContent || !xmlContent.trim()) {
+      return {
+        isValid: false,
+        parsedSpec: null,
+        errors: ['No spec content provided'],
+        parseResult: null,
+      };
+    }
+
+    // Quick structure check first
+    if (!isValidSpecXml(xmlContent)) {
+      return {
+        isValid: false,
+        parsedSpec: null,
+        errors: ['Invalid XML structure - missing required elements'],
+        parseResult: null,
+      };
+    }
+
+    // Full parse
+    const parseResult = xmlToSpec(xmlContent);
+
+    return {
+      isValid: parseResult.success,
+      parsedSpec: parseResult.spec,
+      errors: parseResult.errors,
+      parseResult,
+    };
+  }, [xmlContent]);
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/hooks/use-spec-save.ts b/temp_repo/apps/ui/src/components/views/spec-view/hooks/use-spec-save.ts
new file mode 100644
index 0000000000000000000000000000000000000000..03812fd386607be33decd438dfc045993ce7f15c
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/hooks/use-spec-save.ts
@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { useSaveSpec } from '@/hooks/mutations';
+
+export function useSpecSave() {
+  const { currentProject, appSpec, setAppSpec } = useAppStore();
+  const [hasChanges, setHasChanges] = useState(false);
+
+  // React Query mutation
+  const saveMutation = useSaveSpec(currentProject?.path ?? '');
+
+  const saveSpec = async () => {
+    if (!currentProject) return;
+
+    saveMutation.mutate(appSpec, {
+      onSuccess: () => setHasChanges(false),
+    });
+  };
+
+  const handleChange = (value: string) => {
+    setAppSpec(value);
+    setHasChanges(true);
+  };
+
+  return {
+    isSaving: saveMutation.isPending,
+    hasChanges,
+    setHasChanges,
+    saveSpec,
+    handleChange,
+  };
+}
diff --git a/temp_repo/apps/ui/src/components/views/spec-view/types.ts b/temp_repo/apps/ui/src/components/views/spec-view/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0000b0d7b8932ad53395212cfd4a53738884bf94
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/spec-view/types.ts
@@ -0,0 +1,53 @@
+// Spec view mode - determines how the spec is displayed/edited
+export type SpecViewMode = 'view' | 'edit' | 'source';
+
+// Feature count options for spec generation
+export type FeatureCount = 20 | 50 | 100;
+
+// Generation phases for UI display
+export type GenerationPhase =
+  | 'initialization'
+  | 'setup'
+  | 'analysis'
+  | 'spec_complete'
+  | 'feature_generation'
+  | 'complete'
+  | 'error';
+
+// Props for the unified create spec dialog
+export interface CreateSpecDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectOverview: string;
+  onProjectOverviewChange: (value: string) => void;
+  generateFeatures: boolean;
+  onGenerateFeaturesChange: (value: boolean) => void;
+  analyzeProject: boolean;
+  onAnalyzeProjectChange: (value: boolean) => void;
+  featureCount: FeatureCount;
+  onFeatureCountChange: (value: FeatureCount) => void;
+  onCreateSpec: () => void;
+  onSkip?: () => void;
+  isCreatingSpec: boolean;
+  showSkipButton?: boolean;
+  title?: string;
+  description?: string;
+}
+
+// Props for the regenerate spec dialog
+export interface RegenerateSpecDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectDefinition: string;
+  onProjectDefinitionChange: (value: string) => void;
+  generateFeatures: boolean;
+  onGenerateFeaturesChange: (value: boolean) => void;
+  analyzeProject: boolean;
+  onAnalyzeProjectChange: (value: boolean) => void;
+  featureCount: FeatureCount;
+  onFeatureCountChange: (value: FeatureCount) => void;
+  onRegenerate: () => void;
+  onGenerateFeaturesOnly?: () => void;
+  isRegenerating: boolean;
+  isGeneratingFeatures?: boolean;
+}
diff --git a/temp_repo/apps/ui/src/components/views/terminal-view.tsx b/temp_repo/apps/ui/src/components/views/terminal-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c1f2295989e5455a939352b2060d88c0e35cd64b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/terminal-view.tsx
@@ -0,0 +1,2227 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { createLogger } from '@automaker/utils/logger';
+import {
+  Terminal as TerminalIcon,
+  Plus,
+  Lock,
+  Unlock,
+  SplitSquareHorizontal,
+  SplitSquareVertical,
+  AlertCircle,
+  RefreshCw,
+  X,
+  SquarePlus,
+  Settings,
+  GitBranch,
+  ChevronDown,
+  FolderGit,
+  Palette,
+  RotateCcw,
+  Type,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import { getServerUrlSync } from '@/lib/http-api-client';
+import {
+  useAppStore,
+  type TerminalPanelContent,
+  type TerminalTab,
+  type PersistedTerminalPanel,
+} from '@/store/app-store';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Slider } from '@/components/ui/slider';
+import { Switch } from '@/components/ui/switch';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { TERMINAL_FONT_OPTIONS } from '@/config/terminal-themes';
+import { DEFAULT_FONT_VALUE } from '@/config/ui-font-options';
+import { toast } from 'sonner';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { TerminalPanel } from './terminal-view/terminal-panel';
+import { TerminalErrorBoundary } from './terminal-view/terminal-error-boundary';
+import {
+  DndContext,
+  DragEndEvent,
+  DragStartEvent,
+  DragOverEvent,
+  PointerSensor,
+  TouchSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  closestCenter,
+  DragOverlay,
+  useDroppable,
+  useDraggable,
+  defaultDropAnimationSideEffects,
+} from '@dnd-kit/core';
+import { cn } from '@/lib/utils';
+import { apiFetch, apiGet, apiPost, apiDeleteRaw } from '@/lib/api-fetch';
+import { getApiKey } from '@/lib/http-api-client';
+
+const logger = createLogger('Terminal');
+
+interface TerminalStatus {
+  enabled: boolean;
+  passwordRequired: boolean;
+  platform: {
+    platform: string;
+    isWSL: boolean;
+    defaultShell: string;
+    arch: string;
+  };
+}
+
+// Tab component with drag-drop support and double-click to rename
+function TerminalTabButton({
+  tab,
+  isActive,
+  onClick,
+  onClose,
+  onRename,
+  isDropTarget,
+  isDraggingTab,
+}: {
+  tab: TerminalTab;
+  isActive: boolean;
+  onClick: () => void;
+  onClose: () => void;
+  onRename: (newName: string) => void;
+  isDropTarget: boolean;
+  isDraggingTab: boolean;
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editName, setEditName] = useState(tab.name);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { setNodeRef: setDropRef, isOver } = useDroppable({
+    id: `tab-${tab.id}`,
+    data: { type: 'tab', tabId: tab.id },
+  });
+
+  const {
+    attributes: dragAttributes,
+    listeners: dragListeners,
+    setNodeRef: setDragRef,
+    isDragging,
+  } = useDraggable({
+    id: `drag-tab-${tab.id}`,
+    data: { type: 'drag-tab', tabId: tab.id },
+  });
+
+  // Combine refs
+  const setRefs = (node: HTMLDivElement | null) => {
+    setDropRef(node);
+    setDragRef(node);
+  };
+
+  // Focus input when entering edit mode
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+
+  const handleDoubleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setEditName(tab.name);
+    setIsEditing(true);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    e.stopPropagation();
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      finishEditing();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      setIsEditing(false);
+      setEditName(tab.name);
+    }
+  };
+
+  const finishEditing = () => {
+    const trimmedName = editName.trim();
+    if (trimmedName && trimmedName !== tab.name) {
+      onRename(trimmedName);
+    }
+    setIsEditing(false);
+  };
+
+  return (
+    <div
+      ref={setRefs}
+      {...dragAttributes}
+      {...dragListeners}
+      className={cn(
+        'flex items-center gap-1 px-3 py-1.5 text-sm rounded-t-md border-b-2 cursor-grab active:cursor-grabbing transition-colors select-none',
+        isActive
+          ? 'bg-background border-brand-500 text-foreground'
+          : 'bg-muted border-transparent text-muted-foreground hover:text-foreground hover:bg-accent',
+        isOver && isDropTarget && isDraggingTab && 'ring-2 ring-blue-500 bg-blue-500/10',
+        isDragging && 'opacity-50'
+      )}
+      onClick={onClick}
+      onDoubleClick={handleDoubleClick}
+    >
+      <TerminalIcon className="h-3 w-3" />
+      {isEditing ? (
+        <input
+          ref={inputRef}
+          type="text"
+          value={editName}
+          onChange={(e) => setEditName(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={finishEditing}
+          onClick={(e) => e.stopPropagation()}
+          className="w-20 px-1 py-0 text-sm bg-background border border-border rounded focus:outline-none focus:ring-1 focus:ring-brand-500"
+        />
+      ) : (
+        <span className="max-w-24 truncate">{tab.name}</span>
+      )}
+      <button
+        className="ml-1 p-0.5 rounded hover:bg-accent text-muted-foreground hover:text-destructive"
+        onClick={(e) => {
+          e.stopPropagation();
+          onClose();
+        }}
+      >
+        <X className="h-3 w-3" />
+      </button>
+    </div>
+  );
+}
+
+// New tab drop zone
+function NewTabDropZone({ isDropTarget }: { isDropTarget: boolean }) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: 'new-tab-zone',
+    data: { type: 'new-tab' },
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        'flex items-center justify-center px-3 py-1.5 rounded-t-md border-2 border-dashed transition-all',
+        isOver && isDropTarget
+          ? 'border-green-500 bg-green-500/10 text-green-500'
+          : 'border-transparent text-muted-foreground hover:border-border'
+      )}
+    >
+      <SquarePlus className="h-4 w-4" />
+    </div>
+  );
+}
+
+interface TerminalViewProps {
+  /** Initial working directory to open a terminal in (e.g., from worktree panel) */
+  initialCwd?: string;
+  /** Branch name for display in toast (optional) */
+  initialBranch?: string;
+  /** Mode for opening terminal: 'tab' for new tab, 'split' for split in current tab */
+  initialMode?: 'tab' | 'split';
+  /** Unique nonce to allow opening the same worktree multiple times */
+  nonce?: number;
+  /** Command to run automatically when the terminal is created (e.g., from scripts submenu) */
+  initialCommand?: string;
+}
+
+export function TerminalView({
+  initialCwd,
+  initialBranch,
+  initialMode,
+  nonce,
+  initialCommand,
+}: TerminalViewProps) {
+  const {
+    terminalState,
+    setTerminalUnlocked,
+    addTerminalToLayout,
+    removeTerminalFromLayout,
+    setActiveTerminalSession,
+    swapTerminals,
+    currentProject,
+    addTerminalTab,
+    removeTerminalTab,
+    setActiveTerminalTab,
+    renameTerminalTab,
+    reorderTerminalTabs,
+    moveTerminalToTab,
+    setTerminalPanelFontSize,
+    toggleTerminalMaximized,
+    saveTerminalLayout,
+    getPersistedTerminalLayout,
+    clearTerminalState,
+    setTerminalDefaultFontSize,
+    setTerminalDefaultRunScript,
+    setTerminalFontFamily,
+    setTerminalLineHeight,
+    setTerminalScrollbackLines,
+    setTerminalScreenReaderMode,
+    setTerminalBackgroundColor,
+    setTerminalForegroundColor,
+    updateTerminalPanelSizes,
+    currentWorktreeByProject,
+    worktreesByProject,
+  } = useAppStore();
+
+  const navigate = useNavigate();
+
+  const [status, setStatus] = useState<TerminalStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [password, setPassword] = useState('');
+  const [authLoading, setAuthLoading] = useState(false);
+  const [authError, setAuthError] = useState<string | null>(null);
+  const [activeDragId, setActiveDragId] = useState<string | null>(null);
+  const [activeDragTabId, setActiveDragTabId] = useState<string | null>(null);
+  const [dragOverTabId, setDragOverTabId] = useState<string | null>(null);
+  const lastCreateTimeRef = useRef<number>(0);
+  const isCreatingRef = useRef<boolean>(false);
+  const restoringProjectPathRef = useRef<string | null>(null);
+  const [newSessionIds, setNewSessionIds] = useState<Set<string>>(new Set());
+  // Per-session command overrides (e.g., from scripts submenu), takes priority over defaultRunScript
+  const [sessionCommandOverrides, setSessionCommandOverrides] = useState<Map<string, string>>(
+    new Map()
+  );
+  const [serverSessionInfo, setServerSessionInfo] = useState<{
+    current: number;
+    max: number;
+  } | null>(null);
+  const hasShownHighRamWarningRef = useRef<boolean>(false);
+  const initialCwdHandledRef = useRef<string | null>(null);
+
+  // Show warning when 20+ terminals are open
+  useEffect(() => {
+    if (
+      serverSessionInfo &&
+      serverSessionInfo.current >= 20 &&
+      !hasShownHighRamWarningRef.current
+    ) {
+      hasShownHighRamWarningRef.current = true;
+      toast.warning('Many terminals open', {
+        description: `${serverSessionInfo.current} terminals open. Each uses system resources (processes, memory). Consider closing unused terminals.`,
+        duration: 8000,
+      });
+    }
+    // Reset warning flag when session count drops below 20
+    if (serverSessionInfo && serverSessionInfo.current < 20) {
+      hasShownHighRamWarningRef.current = false;
+    }
+  }, [serverSessionInfo]);
+
+  // Get the default run script from terminal settings
+  const defaultRunScript = useAppStore((state) => state.terminalState.defaultRunScript);
+
+  const serverUrl = import.meta.env.VITE_SERVER_URL || getServerUrlSync();
+
+  // Helper to collect all session IDs from all tabs
+  const collectAllSessionIds = useCallback((): string[] => {
+    const sessionIds: string[] = [];
+    const collectFromLayout = (node: TerminalPanelContent | null): void => {
+      if (!node) return;
+      if (node.type === 'terminal') {
+        sessionIds.push(node.sessionId);
+      } else if (node.type === 'split') {
+        node.panels.forEach(collectFromLayout);
+      }
+      // testRunner type has sessionId but we only collect terminal sessions
+    };
+    terminalState.tabs.forEach((tab) => collectFromLayout(tab.layout));
+    return sessionIds;
+  }, [terminalState.tabs]);
+
+  // Kill all terminal sessions on the server
+  // This should be called before clearTerminalState() to prevent orphaned server sessions
+  const killAllSessions = useCallback(async () => {
+    const sessionIds = collectAllSessionIds();
+    if (sessionIds.length === 0) return;
+
+    const headers: Record<string, string> = {};
+    if (terminalState.authToken) {
+      headers['X-Terminal-Token'] = terminalState.authToken;
+    }
+
+    logger.info(`Killing ${sessionIds.length} sessions on server`);
+
+    // Kill all sessions in parallel
+    await Promise.allSettled(
+      sessionIds.map(async (sessionId) => {
+        try {
+          await apiDeleteRaw(`/api/terminal/sessions/${sessionId}`, { headers });
+        } catch (err) {
+          logger.error(`Failed to kill session ${sessionId}:`, err);
+        }
+      })
+    );
+  }, [collectAllSessionIds, terminalState.authToken]);
+  const CREATE_COOLDOWN_MS = 500; // Prevent rapid terminal creation
+
+  // Helper to check if terminal creation should be debounced
+  const canCreateTerminal = (debounceMessage: string): boolean => {
+    const now = Date.now();
+    if (now - lastCreateTimeRef.current < CREATE_COOLDOWN_MS || isCreatingRef.current) {
+      logger.debug(debounceMessage);
+      return false;
+    }
+    lastCreateTimeRef.current = now;
+    isCreatingRef.current = true;
+    return true;
+  };
+
+  // Get active tab
+  const activeTab = terminalState.tabs.find((t) => t.id === terminalState.activeTabId);
+
+  // DnD sensors with activation constraint to avoid accidental drags
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 200,
+        tolerance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor)
+  );
+
+  // Handle drag start
+  const handleDragStart = useCallback((event: DragStartEvent) => {
+    const activeId = event.active.id as string;
+    const activeData = event.active.data?.current;
+
+    if (activeData?.type === 'drag-tab') {
+      // Tab being dragged
+      setActiveDragTabId(activeData.tabId);
+      setActiveDragId(null);
+    } else {
+      // Terminal panel being dragged
+      setActiveDragId(activeId);
+      setActiveDragTabId(null);
+    }
+  }, []);
+
+  // Handle drag over - track which tab we're hovering
+  const handleDragOver = useCallback((event: DragOverEvent) => {
+    const { over } = event;
+    if (over?.data?.current?.type === 'tab') {
+      setDragOverTabId(over.data.current.tabId);
+    } else if (over?.data?.current?.type === 'new-tab') {
+      setDragOverTabId('new');
+    } else {
+      setDragOverTabId(null);
+    }
+  }, []);
+
+  // Handle drag end
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      const activeData = active.data?.current;
+
+      // Reset drag states
+      setActiveDragId(null);
+      setActiveDragTabId(null);
+      setDragOverTabId(null);
+
+      if (!over) return;
+
+      const overData = over.data?.current;
+
+      // Handle tab-to-tab drag (reordering)
+      if (activeData?.type === 'drag-tab' && overData?.type === 'tab') {
+        const fromTabId = activeData.tabId as string;
+        const toTabId = overData.tabId as string;
+        if (fromTabId !== toTabId) {
+          reorderTerminalTabs(fromTabId, toTabId);
+        }
+        return;
+      }
+
+      // Handle terminal panel drops
+      const activeId = active.id as string;
+
+      // If dropped on a tab, move terminal to that tab
+      if (overData?.type === 'tab') {
+        moveTerminalToTab(activeId, overData.tabId);
+        return;
+      }
+
+      // If dropped on new tab zone, create new tab with this terminal
+      if (overData?.type === 'new-tab') {
+        moveTerminalToTab(activeId, 'new');
+        return;
+      }
+
+      // Otherwise, swap terminals within current tab
+      if (active.id !== over.id) {
+        swapTerminals(activeId, over.id as string);
+      }
+    },
+    [swapTerminals, moveTerminalToTab, reorderTerminalTabs]
+  );
+
+  const handleDragCancel = useCallback(() => {
+    setActiveDragId(null);
+    setActiveDragTabId(null);
+    setDragOverTabId(null);
+  }, []);
+
+  // Fetch terminal status
+  const fetchStatus = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await apiGet<{ success: boolean; data?: TerminalStatus; error?: string }>(
+        '/api/terminal/status'
+      );
+      if (data.success && data.data) {
+        setStatus(data.data);
+        if (!data.data.passwordRequired) {
+          setTerminalUnlocked(true);
+        }
+      } else {
+        setError(data.error || 'Failed to get terminal status');
+      }
+    } catch (err) {
+      setError('Failed to connect to server');
+      logger.error('Status fetch error:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [setTerminalUnlocked]);
+
+  // Fetch server session settings
+  const fetchServerSettings = useCallback(async () => {
+    if (!terminalState.isUnlocked) return;
+    try {
+      const headers: Record<string, string> = {};
+      if (terminalState.authToken) {
+        headers['X-Terminal-Token'] = terminalState.authToken;
+      }
+      const data = await apiGet<{
+        success: boolean;
+        data?: { currentSessions: number; maxSessions: number };
+      }>('/api/terminal/settings', { headers });
+      if (data.success && data.data) {
+        setServerSessionInfo({ current: data.data.currentSessions, max: data.data.maxSessions });
+      }
+    } catch (err) {
+      logger.error('Failed to fetch server settings:', err);
+    }
+  }, [terminalState.isUnlocked, terminalState.authToken]);
+
+  useEffect(() => {
+    fetchStatus();
+  }, [fetchStatus]);
+
+  // Clean up all terminal sessions when the page/app is about to close
+  // This prevents orphaned PTY processes on the server
+  useEffect(() => {
+    const handleBeforeUnload = () => {
+      // Use sendBeacon for reliable delivery during page unload
+      // Fall back to sync fetch if sendBeacon is not available
+      const sessionIds = collectAllSessionIds();
+      if (sessionIds.length === 0) return;
+
+      // Try to use the bulk delete endpoint if available, otherwise delete individually
+      // Using sync XMLHttpRequest for reliability during page unload (async doesn't complete)
+      sessionIds.forEach((sessionId) => {
+        const url = `${serverUrl}/api/terminal/sessions/${sessionId}`;
+        try {
+          const xhr = new XMLHttpRequest();
+          xhr.open('DELETE', url, false); // synchronous
+          xhr.withCredentials = true; // Include cookies for session auth
+          // Add API auth header
+          const apiKey = getApiKey();
+          if (apiKey) {
+            xhr.setRequestHeader('X-API-Key', apiKey);
+          }
+          // Add terminal-specific auth
+          if (terminalState.authToken) {
+            xhr.setRequestHeader('X-Terminal-Token', terminalState.authToken);
+          }
+          xhr.send();
+        } catch {
+          // Ignore errors during unload - best effort cleanup
+        }
+      });
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [collectAllSessionIds, terminalState.authToken, serverUrl]);
+
+  // Fetch server settings when terminal is unlocked
+  useEffect(() => {
+    if (terminalState.isUnlocked) {
+      fetchServerSettings();
+    }
+  }, [terminalState.isUnlocked, fetchServerSettings]);
+
+  // Handle initialCwd prop - auto-create a terminal with the specified working directory
+  // This is triggered when navigating from worktree panel's "Open in Integrated Terminal"
+  useEffect(() => {
+    // Skip if no initialCwd provided
+    if (!initialCwd) return;
+
+    // Skip if we've already handled this exact request (prevents duplicate terminals)
+    // Include mode and nonce in the key to allow opening same cwd multiple times
+    const cwdKey = `${initialCwd}:${initialMode || 'default'}:${nonce || 0}:${initialCommand || ''}`;
+    if (initialCwdHandledRef.current === cwdKey) return;
+
+    // Skip if terminal is not enabled or not unlocked
+    if (!status?.enabled) return;
+    if (status.passwordRequired && !terminalState.isUnlocked) return;
+
+    // Skip if still loading
+    if (loading) return;
+
+    // Mark this cwd as being handled
+    initialCwdHandledRef.current = cwdKey;
+
+    // Create the terminal with the specified cwd
+    const createTerminalWithCwd = async () => {
+      try {
+        const headers: Record<string, string> = {};
+        if (terminalState.authToken) {
+          headers['X-Terminal-Token'] = terminalState.authToken;
+        }
+
+        const response = await apiFetch('/api/terminal/sessions', 'POST', {
+          headers,
+          body: { cwd: initialCwd, cols: 80, rows: 24 },
+        });
+        const data = await response.json();
+
+        if (data.success) {
+          // Create in new tab or split based on mode
+          if (initialMode === 'tab') {
+            // Create in a new tab (tab name uses default "Terminal N" naming)
+            const newTabId = addTerminalTab();
+            const { addTerminalToTab } = useAppStore.getState();
+            // Pass branch name for display in terminal panel header
+            addTerminalToTab(data.data.id, newTabId, 'horizontal', initialBranch);
+          } else {
+            // Default: add to current tab (split if there's already a terminal)
+            // Pass branch name for display in terminal panel header
+            addTerminalToLayout(data.data.id, undefined, undefined, initialBranch);
+          }
+
+          // Mark this session as new for running initial command
+          if (initialCommand || defaultRunScript) {
+            setNewSessionIds((prev) => new Set(prev).add(data.data.id));
+            // Store per-session command override if an explicit command was provided
+            if (initialCommand) {
+              setSessionCommandOverrides((prev) => new Map(prev).set(data.data.id, initialCommand));
+            }
+          }
+
+          // Show success toast with branch name if provided
+          const displayName = initialBranch || initialCwd.split('/').pop() || initialCwd;
+          toast.success(`Terminal opened at ${displayName}`);
+
+          // Refresh session count
+          fetchServerSettings();
+
+          // Clear the cwd from the URL to prevent re-creating on refresh
+          navigate({ to: '/terminal', search: {}, replace: true });
+        } else {
+          logger.error('Failed to create terminal for cwd:', data.error);
+          toast.error('Failed to create terminal', {
+            description: data.error || 'Unknown error',
+          });
+          // Reset the handled ref so the same cwd can be retried
+          initialCwdHandledRef.current = null;
+        }
+      } catch (err) {
+        logger.error('Create terminal with cwd error:', err);
+        toast.error('Failed to create terminal', {
+          description: 'Could not connect to server',
+        });
+        // Reset the handled ref so the same cwd can be retried
+        initialCwdHandledRef.current = null;
+      }
+    };
+
+    createTerminalWithCwd();
+  }, [
+    initialCwd,
+    initialBranch,
+    initialMode,
+    initialCommand,
+    nonce,
+    status?.enabled,
+    status?.passwordRequired,
+    terminalState.isUnlocked,
+    terminalState.authToken,
+    terminalState.tabs.length,
+    loading,
+    defaultRunScript,
+    addTerminalToLayout,
+    addTerminalTab,
+    fetchServerSettings,
+    navigate,
+  ]);
+
+  // Handle project switching - save and restore terminal layouts
+  // Uses terminalState.lastActiveProjectPath (persisted in store) instead of a local ref
+  // This ensures terminals persist when navigating away from terminal route and back
+  useEffect(() => {
+    const currentPath = currentProject?.path || null;
+    // Read lastActiveProjectPath directly from store to avoid dependency issues
+    const prevPath = useAppStore.getState().terminalState.lastActiveProjectPath;
+
+    // Skip if no change - this now correctly handles route changes within the same project
+    // because lastActiveProjectPath persists in the store across component unmount/remount
+    if (currentPath === prevPath) {
+      return;
+    }
+
+    // If we're restoring a different project, that restore will be stale - let it finish but ignore results
+    // The path check in restoreLayout will handle this
+
+    // Save layout for previous project (if there was one and has terminals)
+    // BUT don't save if we were mid-restore for that project (would save incomplete state)
+    const currentTabs = useAppStore.getState().terminalState.tabs;
+    if (prevPath && currentTabs.length > 0 && restoringProjectPathRef.current !== prevPath) {
+      saveTerminalLayout(prevPath);
+    }
+
+    // Update the stored project path
+    useAppStore.getState().setTerminalLastActiveProjectPath(currentPath);
+
+    // Helper to kill sessions and clear state
+    const killAndClear = async () => {
+      // Kill all server-side sessions first to prevent orphaned processes
+      await killAllSessions();
+      clearTerminalState();
+    };
+
+    // If no current project, just clear terminals
+    if (!currentPath) {
+      killAndClear();
+      return;
+    }
+
+    // ALWAYS clear existing terminals when switching projects
+    // This is critical - prevents old project's terminals from "bleeding" into new project
+    // We need to kill server sessions first to prevent orphans
+    killAndClear();
+
+    // Check for saved layout for this project
+    const savedLayout = getPersistedTerminalLayout(currentPath);
+
+    // If no saved layout or no tabs, we're done - terminal starts fresh for this project
+    if (!savedLayout || savedLayout.tabs.length === 0) {
+      logger.info('No saved layout for project, starting fresh');
+      return;
+    }
+
+    // Restore the saved layout - try to reconnect to existing sessions
+    // Track which project we're restoring to detect stale restores
+    restoringProjectPathRef.current = currentPath;
+
+    // Create terminals and build layout - try to reconnect or create new
+    const restoreLayout = async () => {
+      // Check if we're still restoring the same project (user may have switched)
+      if (restoringProjectPathRef.current !== currentPath) {
+        logger.info('Restore cancelled - project changed');
+        return;
+      }
+
+      let failedSessions = 0;
+      let totalSessions = 0;
+      let reconnectedSessions = 0;
+
+      try {
+        const headers: Record<string, string> = {};
+        // Get fresh auth token from store
+        const authToken = useAppStore.getState().terminalState.authToken;
+        if (authToken) {
+          headers['X-Terminal-Token'] = authToken;
+        }
+
+        // Helper to check if a session still exists on server
+        const checkSessionExists = async (sessionId: string): Promise<boolean> => {
+          try {
+            const data = await apiGet<{ success: boolean }>(`/api/terminal/sessions/${sessionId}`, {
+              headers,
+            });
+            return data.success === true;
+          } catch {
+            return false;
+          }
+        };
+
+        // Helper to create a new terminal session
+        const createSession = async (): Promise<string | null> => {
+          try {
+            const data = await apiPost<{ success: boolean; data?: { id: string } }>(
+              '/api/terminal/sessions',
+              { cwd: currentPath, cols: 80, rows: 24 },
+              { headers }
+            );
+            return data.success && data.data ? data.data.id : null;
+          } catch (err) {
+            logger.error('Failed to create terminal session:', err);
+            return null;
+          }
+        };
+
+        // Recursively rebuild the layout - reuse existing sessions or create new
+        const rebuildLayout = async (
+          persisted: PersistedTerminalPanel
+        ): Promise<TerminalPanelContent | null> => {
+          if (persisted.type === 'terminal') {
+            totalSessions++;
+            let sessionId: string | null = null;
+
+            // If we have a saved sessionId, try to reconnect to it
+            if (persisted.sessionId) {
+              const exists = await checkSessionExists(persisted.sessionId);
+              if (exists) {
+                sessionId = persisted.sessionId;
+                reconnectedSessions++;
+              }
+            }
+
+            // If no saved session or it's gone, create a new one
+            if (!sessionId) {
+              sessionId = await createSession();
+            }
+
+            if (!sessionId) {
+              failedSessions++;
+              return null;
+            }
+
+            return {
+              type: 'terminal',
+              sessionId,
+              size: persisted.size,
+              fontSize: persisted.fontSize,
+            };
+          }
+
+          // Handle testRunner type - skip for now as we don't persist test runner sessions
+          if (persisted.type === 'testRunner') {
+            return null;
+          }
+
+          // It's a split - rebuild all child panels
+          const childPanels: TerminalPanelContent[] = [];
+          for (const childPersisted of persisted.panels) {
+            const rebuilt = await rebuildLayout(childPersisted);
+            if (rebuilt) {
+              childPanels.push(rebuilt);
+            }
+          }
+
+          // If no children were rebuilt, return null
+          if (childPanels.length === 0) return null;
+
+          // If only one child, return it directly (collapse the split)
+          if (childPanels.length === 1) return childPanels[0];
+
+          return {
+            type: 'split',
+            id: persisted.id || `split-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`,
+            direction: persisted.direction,
+            panels: childPanels,
+            size: persisted.size,
+          };
+        };
+
+        // For each saved tab, rebuild the layout
+        for (let tabIndex = 0; tabIndex < savedLayout.tabs.length; tabIndex++) {
+          // Check if project changed during restore - bail out early
+          if (restoringProjectPathRef.current !== currentPath) {
+            logger.info('Restore cancelled mid-loop - project changed');
+            return;
+          }
+
+          const savedTab = savedLayout.tabs[tabIndex];
+
+          // Create the tab first
+          const newTabId = addTerminalTab(savedTab.name);
+
+          if (savedTab.layout) {
+            const rebuiltLayout = await rebuildLayout(savedTab.layout);
+            if (rebuiltLayout) {
+              const { setTerminalTabLayout } = useAppStore.getState();
+              setTerminalTabLayout(newTabId, rebuiltLayout);
+            }
+          }
+        }
+
+        // Set active tab based on saved index
+        if (savedLayout.tabs.length > 0) {
+          const { setActiveTerminalTab } = useAppStore.getState();
+          const newTabs = useAppStore.getState().terminalState.tabs;
+          if (newTabs.length > savedLayout.activeTabIndex) {
+            setActiveTerminalTab(newTabs[savedLayout.activeTabIndex].id);
+          }
+        }
+
+        if (failedSessions > 0) {
+          toast.error('Some terminals failed to restore', {
+            description: `${failedSessions} of ${totalSessions} terminal sessions could not be created. The server may be unavailable.`,
+            duration: 5000,
+          });
+        } else if (reconnectedSessions > 0) {
+          toast.success('Terminals restored', {
+            description: `Reconnected to ${reconnectedSessions} existing session${reconnectedSessions > 1 ? 's' : ''}`,
+            duration: 3000,
+          });
+        }
+      } catch (err) {
+        logger.error('Failed to restore terminal layout:', err);
+        toast.error('Failed to restore terminals', {
+          description: 'Could not restore terminal layout. Please try creating new terminals.',
+          duration: 5000,
+        });
+      } finally {
+        // Only clear if we're still the active restore
+        if (restoringProjectPathRef.current === currentPath) {
+          restoringProjectPathRef.current = null;
+        }
+      }
+    };
+
+    restoreLayout();
+  }, [
+    currentProject?.path,
+    saveTerminalLayout,
+    getPersistedTerminalLayout,
+    clearTerminalState,
+    addTerminalTab,
+    serverUrl,
+    killAllSessions,
+  ]);
+
+  // Save terminal layout whenever it changes (debounced to prevent excessive writes)
+  // Also save when tabs become empty so closed terminals stay closed on refresh
+  const saveLayoutTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const pendingSavePathRef = useRef<string | null>(null);
+  useEffect(() => {
+    const projectPath = currentProject?.path;
+    // Don't save while restoring this project's layout
+    if (projectPath && restoringProjectPathRef.current !== projectPath) {
+      // Debounce saves to prevent excessive localStorage writes during rapid changes
+      if (saveLayoutTimeoutRef.current) {
+        clearTimeout(saveLayoutTimeoutRef.current);
+      }
+      // Capture the project path at schedule time so we save to the correct project
+      // even if user switches projects before the timeout fires
+      pendingSavePathRef.current = projectPath;
+      saveLayoutTimeoutRef.current = setTimeout(() => {
+        // Only save if we're still on the same project
+        if (pendingSavePathRef.current === projectPath) {
+          saveTerminalLayout(projectPath);
+        }
+        pendingSavePathRef.current = null;
+        saveLayoutTimeoutRef.current = null;
+      }, 500); // 500ms debounce
+    }
+
+    return () => {
+      if (saveLayoutTimeoutRef.current) {
+        clearTimeout(saveLayoutTimeoutRef.current);
+      }
+    };
+  }, [terminalState.tabs, currentProject?.path, saveTerminalLayout]);
+
+  // Handle password authentication
+  const handleAuth = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setAuthLoading(true);
+    setAuthError(null);
+
+    try {
+      const data = await apiPost<{ success: boolean; data?: { token: string }; error?: string }>(
+        '/api/terminal/auth',
+        { password }
+      );
+
+      if (data.success && data.data) {
+        setTerminalUnlocked(true, data.data.token);
+        setPassword('');
+      } else {
+        setAuthError(data.error || 'Authentication failed');
+      }
+    } catch (err) {
+      setAuthError('Failed to authenticate');
+      logger.error('Auth error:', err);
+    } finally {
+      setAuthLoading(false);
+    }
+  };
+
+  // Helper: find the branchName of the given session ID within a layout tree
+  const findSessionBranchName = (
+    layout: TerminalPanelContent | null,
+    sessionId: string
+  ): string | undefined => {
+    if (!layout) return undefined;
+    if (layout.type === 'terminal') {
+      return layout.sessionId === sessionId ? layout.branchName : undefined;
+    }
+    if (layout.type === 'split') {
+      for (const panel of layout.panels) {
+        const found = findSessionBranchName(panel, sessionId);
+        if (found !== undefined) return found;
+      }
+    }
+    return undefined;
+  };
+
+  // Helper: resolve the worktree cwd and branchName for the currently active terminal session.
+  // Returns { cwd, branchName } if the active terminal was opened in a worktree, or {} otherwise.
+  const getActiveSessionWorktreeInfo = (): { cwd?: string; branchName?: string } => {
+    const activeSessionId = terminalState.activeSessionId;
+    if (!activeSessionId || !activeTab?.layout || !currentProject) return {};
+
+    const branchName = findSessionBranchName(activeTab.layout, activeSessionId);
+    if (!branchName) return {};
+
+    // Look up the worktree path for this branch in the project's worktree list
+    const projectWorktrees = worktreesByProject[currentProject.path] ?? [];
+    const worktree = projectWorktrees.find((wt) => wt.branch === branchName);
+    if (!worktree) return { branchName };
+
+    return { cwd: worktree.path, branchName };
+  };
+
+  // Create a new terminal session
+  // targetSessionId: the terminal to split (if splitting an existing terminal)
+  // customCwd: optional working directory to use instead of the current project path
+  // branchName: optional branch name to display in the terminal panel header
+  const createTerminal = async (
+    direction?: 'horizontal' | 'vertical',
+    targetSessionId?: string,
+    customCwd?: string,
+    branchName?: string
+  ) => {
+    if (!canCreateTerminal('[Terminal] Debounced terminal creation')) {
+      return;
+    }
+
+    try {
+      const headers: Record<string, string> = {};
+      if (terminalState.authToken) {
+        headers['X-Terminal-Token'] = terminalState.authToken;
+      }
+
+      const response = await apiFetch('/api/terminal/sessions', 'POST', {
+        headers,
+        body: { cwd: customCwd || currentProject?.path || undefined, cols: 80, rows: 24 },
+      });
+      const data = await response.json();
+
+      if (data.success) {
+        addTerminalToLayout(data.data.id, direction, targetSessionId, branchName);
+        // Mark this session as new for running initial command
+        if (defaultRunScript) {
+          setNewSessionIds((prev) => new Set(prev).add(data.data.id));
+        }
+        // Refresh session count
+        fetchServerSettings();
+      } else {
+        // Handle session limit error with a helpful toast
+        if (response.status === 429 || data.error?.includes('Maximum')) {
+          toast.error('Terminal session limit reached', {
+            description:
+              data.details ||
+              `Please close unused terminals. Limit: ${data.maxSessions || 'unknown'}`,
+          });
+        } else {
+          logger.error('Failed to create session:', data.error);
+          toast.error('Failed to create terminal', {
+            description: data.error || 'Unknown error',
+          });
+        }
+      }
+    } catch (err) {
+      logger.error('Create session error:', err);
+      toast.error('Failed to create terminal', {
+        description: 'Could not connect to server',
+      });
+    } finally {
+      isCreatingRef.current = false;
+    }
+  };
+
+  // Create terminal in new tab
+  // customCwd: optional working directory (e.g., a specific worktree path)
+  // branchName: optional branch name to display in the terminal panel header
+  // command: optional command to run when the terminal connects (e.g., from scripts menu)
+  const createTerminalInNewTab = async (
+    customCwd?: string,
+    branchName?: string,
+    command?: string
+  ) => {
+    if (!canCreateTerminal('[Terminal] Debounced terminal tab creation')) {
+      return;
+    }
+
+    // Use provided cwd/branch, or inherit from active session's worktree
+    const { cwd: worktreeCwd, branchName: worktreeBranch } = customCwd
+      ? { cwd: customCwd, branchName: branchName }
+      : getActiveSessionWorktreeInfo();
+
+    const tabId = addTerminalTab();
+    try {
+      const headers: Record<string, string> = {};
+      if (terminalState.authToken) {
+        headers['X-Terminal-Token'] = terminalState.authToken;
+      }
+
+      const response = await apiFetch('/api/terminal/sessions', 'POST', {
+        headers,
+        body: { cwd: worktreeCwd || currentProject?.path || undefined, cols: 80, rows: 24 },
+      });
+      const data = await response.json();
+
+      if (data.success) {
+        // Add to the newly created tab (passing branchName so the panel header shows the branch badge)
+        const { addTerminalToTab } = useAppStore.getState();
+        addTerminalToTab(data.data.id, tabId, undefined, worktreeBranch);
+        // Mark this session as new for running initial command
+        if (command || defaultRunScript) {
+          setNewSessionIds((prev) => new Set(prev).add(data.data.id));
+          // Store per-session command override if an explicit command was provided
+          if (command) {
+            setSessionCommandOverrides((prev) => new Map(prev).set(data.data.id, command));
+          }
+        }
+        // Refresh session count
+        fetchServerSettings();
+      } else {
+        // Remove the empty tab that was created
+        const { removeTerminalTab } = useAppStore.getState();
+        removeTerminalTab(tabId);
+
+        // Handle session limit error with a helpful toast
+        if (response.status === 429 || data.error?.includes('Maximum')) {
+          toast.error('Terminal session limit reached', {
+            description:
+              data.details ||
+              `Please close unused terminals. Limit: ${data.maxSessions || 'unknown'}`,
+          });
+        } else {
+          toast.error('Failed to create terminal', {
+            description: data.error || 'Unknown error',
+          });
+        }
+      }
+    } catch (err) {
+      logger.error('Create session error:', err);
+      // Remove the empty tab on error
+      const { removeTerminalTab } = useAppStore.getState();
+      removeTerminalTab(tabId);
+      toast.error('Failed to create terminal', {
+        description: 'Could not connect to server',
+      });
+    } finally {
+      isCreatingRef.current = false;
+    }
+  };
+
+  // Kill a terminal session
+  const killTerminal = async (sessionId: string) => {
+    try {
+      const headers: Record<string, string> = {};
+      if (terminalState.authToken) {
+        headers['X-Terminal-Token'] = terminalState.authToken;
+      }
+
+      const response = await apiDeleteRaw(`/api/terminal/sessions/${sessionId}`, { headers });
+
+      // Always remove from UI - even if server says 404 (session may have already exited)
+      removeTerminalFromLayout(sessionId);
+
+      // Clean up stale entries for killed sessions
+      setSessionCommandOverrides((prev) => {
+        const next = new Map(prev);
+        next.delete(sessionId);
+        return next;
+      });
+      setNewSessionIds((prev) => {
+        const next = new Set(prev);
+        next.delete(sessionId);
+        return next;
+      });
+
+      if (!response.ok && response.status !== 404) {
+        // Log non-404 errors but still proceed with UI cleanup
+        const data = await response.json().catch(() => ({}));
+        logger.error('Server failed to kill session:', data.error || response.statusText);
+      }
+
+      // Refresh session count
+      fetchServerSettings();
+    } catch (err) {
+      logger.error('Kill session error:', err);
+      // Still remove from UI on network error - better UX than leaving broken terminal
+      removeTerminalFromLayout(sessionId);
+      // Clean up stale entries for killed sessions (same cleanup as try block)
+      setSessionCommandOverrides((prev) => {
+        const next = new Map(prev);
+        next.delete(sessionId);
+        return next;
+      });
+      setNewSessionIds((prev) => {
+        const next = new Set(prev);
+        next.delete(sessionId);
+        return next;
+      });
+    }
+  };
+
+  // Kill all terminals in a tab and then remove the tab
+  const killTerminalTab = async (tabId: string) => {
+    const tab = terminalState.tabs.find((t) => t.id === tabId);
+    if (!tab) return;
+
+    // Collect all session IDs from the tab's layout
+    const collectSessionIds = (node: TerminalPanelContent | null): string[] => {
+      if (!node) return [];
+      if (node.type === 'terminal') return [node.sessionId];
+      if (node.type === 'split') return node.panels.flatMap(collectSessionIds);
+      return []; // testRunner type
+    };
+
+    const sessionIds = collectSessionIds(tab.layout);
+
+    // Kill all sessions on the server
+    const headers: Record<string, string> = {};
+    if (terminalState.authToken) {
+      headers['X-Terminal-Token'] = terminalState.authToken;
+    }
+
+    await Promise.all(
+      sessionIds.map(async (sessionId) => {
+        try {
+          await apiDeleteRaw(`/api/terminal/sessions/${sessionId}`, { headers });
+        } catch (err) {
+          logger.error(`Failed to kill session ${sessionId}:`, err);
+        }
+      })
+    );
+
+    // Clean up stale entries for all killed sessions in this tab
+    setSessionCommandOverrides((prev) => {
+      const next = new Map(prev);
+      for (const sessionId of sessionIds) {
+        next.delete(sessionId);
+      }
+      return next;
+    });
+    setNewSessionIds((prev) => {
+      const next = new Set(prev);
+      for (const sessionId of sessionIds) {
+        next.delete(sessionId);
+      }
+      return next;
+    });
+
+    // Now remove the tab from state
+    removeTerminalTab(tabId);
+    // Refresh session count
+    fetchServerSettings();
+  };
+
+  // NOTE: Terminal keyboard shortcuts (Alt+D, Alt+S, Alt+W) are handled in
+  // terminal-panel.tsx via attachCustomKeyEventHandler. This is more reliable
+  // because it uses event.code (keyboard-layout independent) instead of event.key
+  // which can produce special characters when Alt is pressed on some systems.
+  // See: terminal-panel.tsx lines 319-399 for the shortcut handlers.
+
+  // Collect all terminal IDs from a panel tree in order
+  const getTerminalIds = useCallback((panel: TerminalPanelContent): string[] => {
+    if (panel.type === 'terminal') {
+      return [panel.sessionId];
+    }
+    if (panel.type === 'split') {
+      return panel.panels.flatMap(getTerminalIds);
+    }
+    return []; // testRunner type
+  }, []);
+
+  // Get a STABLE key for a panel - uses the stable id for splits
+  // This prevents unnecessary remounts when layout structure changes
+  const getPanelKey = (panel: TerminalPanelContent): string => {
+    if (panel.type === 'terminal') {
+      return panel.sessionId;
+    }
+    if (panel.type === 'split') {
+      // Use the stable id for split nodes
+      return panel.id;
+    }
+    // testRunner - use sessionId
+    return panel.sessionId;
+  };
+
+  const findTerminalFontSize = useCallback(
+    (sessionId: string): number => {
+      const findInPanel = (panel: TerminalPanelContent): number | null => {
+        if (panel.type === 'terminal') {
+          if (panel.sessionId === sessionId) {
+            return panel.fontSize ?? terminalState.defaultFontSize;
+          }
+          return null;
+        }
+        if (panel.type !== 'split') return null; // testRunner type
+        for (const child of panel.panels) {
+          const found = findInPanel(child);
+          if (found !== null) return found;
+        }
+        return null;
+      };
+
+      // Search across all tabs
+      for (const tab of terminalState.tabs) {
+        if (tab.layout) {
+          const found = findInPanel(tab.layout);
+          if (found !== null) return found;
+        }
+      }
+      return terminalState.defaultFontSize;
+    },
+    [terminalState.tabs, terminalState.defaultFontSize]
+  );
+
+  // Handler for when a terminal has run its initial command
+  const handleCommandRan = useCallback((sessionId: string) => {
+    setNewSessionIds((prev) => {
+      const next = new Set(prev);
+      next.delete(sessionId);
+      return next;
+    });
+    // Clean up any per-session command override
+    setSessionCommandOverrides((prev) => {
+      const next = new Map(prev);
+      next.delete(sessionId);
+      return next;
+    });
+  }, []);
+
+  // Navigate between terminal panes with directional awareness
+  // Arrow keys navigate in the actual spatial direction within the layout
+  const navigateToTerminal = useCallback(
+    (direction: 'up' | 'down' | 'left' | 'right') => {
+      if (!activeTab?.layout) return;
+
+      const currentSessionId = terminalState.activeSessionId;
+      if (!currentSessionId) {
+        // If no terminal is active, focus the first one
+        const terminalIds = getTerminalIds(activeTab.layout);
+        if (terminalIds.length > 0) {
+          setActiveTerminalSession(terminalIds[0]);
+        }
+        return;
+      }
+
+      // Find the terminal in the given direction
+      // The algorithm traverses the layout tree to find spatially adjacent terminals
+      const findTerminalInDirection = (
+        layout: TerminalPanelContent,
+        targetId: string,
+        dir: 'up' | 'down' | 'left' | 'right'
+      ): string | null => {
+        // Helper to get all terminal IDs from a layout subtree
+        const getAllTerminals = (node: TerminalPanelContent): string[] => {
+          if (node.type === 'terminal') return [node.sessionId];
+          if (node.type === 'split') return node.panels.flatMap(getAllTerminals);
+          return []; // testRunner type
+        };
+
+        // Helper to find terminal and its path in the tree
+        type PathEntry = {
+          node: TerminalPanelContent;
+          index: number;
+          direction: 'horizontal' | 'vertical';
+        };
+        const findPath = (
+          node: TerminalPanelContent,
+          target: string,
+          path: PathEntry[] = []
+        ): PathEntry[] | null => {
+          if (node.type === 'terminal') {
+            return node.sessionId === target ? path : null;
+          }
+          if (node.type !== 'split') return null; // testRunner type
+          for (let i = 0; i < node.panels.length; i++) {
+            const result = findPath(node.panels[i], target, [
+              ...path,
+              { node, index: i, direction: node.direction },
+            ]);
+            if (result) return result;
+          }
+          return null;
+        };
+
+        const path = findPath(layout, targetId);
+        if (!path || path.length === 0) return null;
+
+        // Determine which split direction we need based on arrow direction
+        // left/right navigation works in "horizontal" splits (panels side by side)
+        // up/down navigation works in "vertical" splits (panels stacked)
+        const neededDirection = dir === 'left' || dir === 'right' ? 'horizontal' : 'vertical';
+        const goingForward = dir === 'right' || dir === 'down';
+
+        // Walk up the path to find a split in the right direction with an adjacent panel
+        for (let i = path.length - 1; i >= 0; i--) {
+          const entry = path[i];
+          if (entry.direction === neededDirection) {
+            const siblings = entry.node.type === 'split' ? entry.node.panels : [];
+            const nextIndex = goingForward ? entry.index + 1 : entry.index - 1;
+
+            if (nextIndex >= 0 && nextIndex < siblings.length) {
+              // Found an adjacent panel in the right direction
+              const adjacentPanel = siblings[nextIndex];
+              const adjacentTerminals = getAllTerminals(adjacentPanel);
+
+              if (adjacentTerminals.length > 0) {
+                // When moving forward (right/down), pick the first terminal in that subtree
+                // When moving backward (left/up), pick the last terminal in that subtree
+                return goingForward
+                  ? adjacentTerminals[0]
+                  : adjacentTerminals[adjacentTerminals.length - 1];
+              }
+            }
+          }
+        }
+
+        return null;
+      };
+
+      const nextTerminal = findTerminalInDirection(activeTab.layout, currentSessionId, direction);
+      if (nextTerminal) {
+        setActiveTerminalSession(nextTerminal);
+      }
+    },
+    [activeTab?.layout, terminalState.activeSessionId, setActiveTerminalSession, getTerminalIds]
+  );
+
+  // Handle global keyboard shortcuts for pane navigation
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Ctrl+Alt+Arrow (or Cmd+Alt+Arrow on Mac) for pane navigation
+      if ((e.ctrlKey || e.metaKey) && e.altKey && !e.shiftKey) {
+        if (e.key === 'ArrowRight') {
+          e.preventDefault();
+          navigateToTerminal('right');
+        } else if (e.key === 'ArrowLeft') {
+          e.preventDefault();
+          navigateToTerminal('left');
+        } else if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          navigateToTerminal('down');
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          navigateToTerminal('up');
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [navigateToTerminal, getTerminalIds]);
+
+  // Render panel content recursively
+  const renderPanelContent = (content: TerminalPanelContent): React.ReactNode => {
+    if (content.type === 'terminal') {
+      // Use per-terminal fontSize or fall back to default
+      const terminalFontSize = content.fontSize ?? terminalState.defaultFontSize;
+      // Only run command on new sessions (not restored ones)
+      const isNewSession = newSessionIds.has(content.sessionId);
+      // Per-session command override takes priority over defaultRunScript
+      const sessionCommand = sessionCommandOverrides.get(content.sessionId);
+      const runCommand = isNewSession ? sessionCommand || defaultRunScript : undefined;
+      return (
+        <TerminalErrorBoundary
+          key={`boundary-${content.sessionId}`}
+          sessionId={content.sessionId}
+          onRestart={() => {
+            // When terminal crashes and is restarted, recreate the session
+            killTerminal(content.sessionId);
+            createTerminal();
+          }}
+        >
+          <TerminalPanel
+            key={content.sessionId}
+            sessionId={content.sessionId}
+            authToken={terminalState.authToken}
+            isActive={terminalState.activeSessionId === content.sessionId}
+            onFocus={() => setActiveTerminalSession(content.sessionId)}
+            onClose={() => killTerminal(content.sessionId)}
+            onSplitHorizontal={() => {
+              const { cwd, branchName } = getActiveSessionWorktreeInfo();
+              createTerminal('horizontal', content.sessionId, cwd, branchName);
+            }}
+            onSplitVertical={() => {
+              const { cwd, branchName } = getActiveSessionWorktreeInfo();
+              createTerminal('vertical', content.sessionId, cwd, branchName);
+            }}
+            onNewTab={createTerminalInNewTab}
+            onRunCommandInNewTab={(command: string) => {
+              const { cwd, branchName: branch } = getActiveSessionWorktreeInfo();
+              createTerminalInNewTab(cwd, branch, command);
+            }}
+            onNavigateUp={() => navigateToTerminal('up')}
+            onNavigateDown={() => navigateToTerminal('down')}
+            onNavigateLeft={() => navigateToTerminal('left')}
+            onNavigateRight={() => navigateToTerminal('right')}
+            onSessionInvalid={() => {
+              // Auto-remove stale session when server says it doesn't exist
+              // This handles cases like server restart where sessions are lost
+              logger.info(`Session ${content.sessionId} is invalid, removing from layout`);
+              killTerminal(content.sessionId);
+            }}
+            isDragging={activeDragId === content.sessionId}
+            isDropTarget={activeDragId !== null && activeDragId !== content.sessionId}
+            fontSize={terminalFontSize}
+            onFontSizeChange={(size) => setTerminalPanelFontSize(content.sessionId, size)}
+            runCommandOnConnect={runCommand}
+            onCommandRan={() => handleCommandRan(content.sessionId)}
+            isMaximized={terminalState.maximizedSessionId === content.sessionId}
+            onToggleMaximize={() => toggleTerminalMaximized(content.sessionId)}
+            branchName={content.branchName}
+          />
+        </TerminalErrorBoundary>
+      );
+    }
+
+    // Handle testRunner type - return null for now
+    if (content.type === 'testRunner') {
+      return null;
+    }
+
+    const isHorizontal = content.direction === 'horizontal';
+    const defaultSizePerPanel = 100 / content.panels.length;
+
+    const handleLayoutChange = (sizes: number[]) => {
+      if (!activeTab) return;
+      const panelKeys = content.panels.map(getPanelKey);
+      updateTerminalPanelSizes(activeTab.id, panelKeys, sizes);
+    };
+
+    return (
+      <PanelGroup direction={content.direction} onLayout={handleLayoutChange}>
+        {content.panels.map((panel: TerminalPanelContent, index: number) => {
+          const panelSize =
+            panel.type === 'terminal' && panel.size ? panel.size : defaultSizePerPanel;
+
+          const panelKey = getPanelKey(panel);
+          return (
+            <React.Fragment key={panelKey}>
+              {index > 0 && (
+                <PanelResizeHandle
+                  key={`handle-${panelKey}`}
+                  className={
+                    isHorizontal
+                      ? 'w-1 h-full bg-border hover:bg-brand-500 transition-colors data-[resize-handle-state=hover]:bg-brand-500 data-[resize-handle-state=drag]:bg-brand-500'
+                      : 'h-1 w-full bg-border hover:bg-brand-500 transition-colors data-[resize-handle-state=hover]:bg-brand-500 data-[resize-handle-state=drag]:bg-brand-500'
+                  }
+                />
+              )}
+              <Panel id={panelKey} order={index} defaultSize={panelSize} minSize={30}>
+                {renderPanelContent(panel)}
+              </Panel>
+            </React.Fragment>
+          );
+        })}
+      </PanelGroup>
+    );
+  };
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <Spinner size="xl" />
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
+        <div className="p-4 rounded-full bg-destructive/10 mb-4">
+          <AlertCircle className="h-12 w-12 text-destructive" />
+        </div>
+        <h2 className="text-lg font-medium mb-2">Terminal Unavailable</h2>
+        <p className="text-muted-foreground max-w-md mb-4">{error}</p>
+        <Button variant="outline" onClick={fetchStatus}>
+          <RefreshCw className="h-4 w-4 mr-2" />
+          Retry
+        </Button>
+      </div>
+    );
+  }
+
+  // Disabled state
+  if (!status?.enabled) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
+        <div className="p-4 rounded-full bg-muted/50 mb-4">
+          <TerminalIcon className="h-12 w-12 text-muted-foreground" />
+        </div>
+        <h2 className="text-lg font-medium mb-2">Terminal Disabled</h2>
+        <p className="text-muted-foreground max-w-md">
+          Terminal access has been disabled. Set{' '}
+          <code className="px-1.5 py-0.5 rounded bg-muted">TERMINAL_ENABLED=true</code> in your
+          server .env file to enable it.
+        </p>
+      </div>
+    );
+  }
+
+  // Password gate
+  if (status.passwordRequired && !terminalState.isUnlocked) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
+        <div className="p-4 rounded-full bg-muted/50 mb-4">
+          <Lock className="h-12 w-12 text-muted-foreground" />
+        </div>
+        <h2 className="text-lg font-medium mb-2">Terminal Protected</h2>
+        <p className="text-muted-foreground max-w-md mb-6">
+          Terminal access requires authentication. Enter the password to unlock.
+        </p>
+
+        <form onSubmit={handleAuth} className="w-full max-w-xs space-y-4">
+          <Input
+            type="password"
+            placeholder="Enter password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            disabled={authLoading}
+            autoFocus
+          />
+          {authError && <p className="text-sm text-destructive">{authError}</p>}
+          <Button type="submit" className="w-full" disabled={authLoading || !password}>
+            {authLoading ? (
+              <Spinner size="sm" className="mr-2" />
+            ) : (
+              <Unlock className="h-4 w-4 mr-2" />
+            )}
+            Unlock Terminal
+          </Button>
+        </form>
+
+        {status.platform && (
+          <p className="text-xs text-muted-foreground mt-6">
+            Platform: {status.platform.platform}
+            {status.platform.isWSL && ' (WSL)'}
+            {' | '}Shell: {status.platform.defaultShell}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  // No terminals yet - show welcome screen
+  if (terminalState.tabs.length === 0) {
+    // Get the current worktree for this project (if any)
+    const currentWorktreeInfo = currentProject
+      ? (currentWorktreeByProject[currentProject.path] ?? null)
+      : null;
+    // Only show worktree button when the current worktree has a specific path set
+    // (non-null path means a worktree is selected, as opposed to the main project)
+    const currentWorktreePath = currentWorktreeInfo?.path ?? null;
+    const currentWorktreeBranch = currentWorktreeInfo?.branch ?? null;
+
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
+        <div className="p-4 rounded-full bg-brand-500/10 mb-4">
+          <TerminalIcon className="h-12 w-12 text-brand-500" />
+        </div>
+        <h2 className="text-lg font-medium mb-2">Terminal</h2>
+        <p className="text-muted-foreground max-w-md mb-6">
+          Create a new terminal session to start executing commands.
+          {currentProject && (
+            <span className="block mt-2 text-sm">
+              Working directory:{' '}
+              <code className="px-1.5 py-0.5 rounded bg-muted">{currentProject.path}</code>
+            </span>
+          )}
+        </p>
+
+        <div className="flex flex-col items-center gap-3 w-full max-w-xs">
+          {currentWorktreePath && (
+            <Button
+              className="w-full flex-col h-auto py-2"
+              onClick={() =>
+                createTerminal(
+                  undefined,
+                  undefined,
+                  currentWorktreePath,
+                  currentWorktreeBranch ?? undefined
+                )
+              }
+            >
+              <span className="flex items-center">
+                <GitBranch className="h-4 w-4 mr-2 shrink-0" />
+                Open Terminal in Worktree
+              </span>
+              {currentWorktreeBranch && (
+                <span className="text-xs opacity-70 truncate max-w-full px-2">
+                  {currentWorktreeBranch}
+                </span>
+              )}
+            </Button>
+          )}
+
+          <Button
+            className="w-full"
+            variant={currentWorktreePath ? 'outline' : 'default'}
+            onClick={() => createTerminal()}
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            New Terminal
+          </Button>
+        </div>
+
+        {status?.platform && (
+          <p className="text-xs text-muted-foreground mt-6">
+            Platform: {status.platform.platform}
+            {status.platform.isWSL && ' (WSL)'}
+            {' | '}Shell: {status.platform.defaultShell}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  // Terminal view with tabs
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragOver={handleDragOver}
+      onDragEnd={handleDragEnd}
+      onDragCancel={handleDragCancel}
+    >
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Tab bar */}
+        <div className="flex items-center bg-card border-b border-border px-2">
+          {/* Tabs */}
+          <div className="flex items-center gap-1 flex-1 overflow-x-auto py-1">
+            {terminalState.tabs.map((tab) => (
+              <TerminalTabButton
+                key={tab.id}
+                tab={tab}
+                isActive={tab.id === terminalState.activeTabId}
+                onClick={() => setActiveTerminalTab(tab.id)}
+                onClose={() => killTerminalTab(tab.id)}
+                onRename={(newName) => renameTerminalTab(tab.id, newName)}
+                isDropTarget={activeDragId !== null || activeDragTabId !== null}
+                isDraggingTab={activeDragTabId !== null}
+              />
+            ))}
+
+            {(activeDragId || activeDragTabId) && <NewTabDropZone isDropTarget={true} />}
+
+            {/* New tab split button */}
+            <div className="flex items-center">
+              <button
+                className="flex items-center justify-center p-1.5 rounded-l hover:bg-accent text-muted-foreground hover:text-foreground"
+                onClick={() => createTerminalInNewTab()}
+                title="New Tab"
+              >
+                <Plus className="h-4 w-4" />
+              </button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    className="flex items-center justify-center px-0.5 py-1.5 rounded-r hover:bg-accent text-muted-foreground hover:text-foreground border-l border-border"
+                    title="New Terminal Options"
+                  >
+                    <ChevronDown className="h-3 w-3" />
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" side="bottom" className="w-56">
+                  <DropdownMenuItem onClick={() => createTerminalInNewTab()} className="gap-2">
+                    <Plus className="h-4 w-4" />
+                    New Tab
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onClick={() => {
+                      const { cwd, branchName } = getActiveSessionWorktreeInfo();
+                      createTerminal('horizontal', undefined, cwd, branchName);
+                    }}
+                    className="gap-2"
+                  >
+                    <SplitSquareHorizontal className="h-4 w-4" />
+                    Split Right
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => {
+                      const { cwd, branchName } = getActiveSessionWorktreeInfo();
+                      createTerminal('vertical', undefined, cwd, branchName);
+                    }}
+                    className="gap-2"
+                  >
+                    <SplitSquareVertical className="h-4 w-4" />
+                    Split Down
+                  </DropdownMenuItem>
+                  {/* Worktree options - show when project has worktrees */}
+                  {(() => {
+                    const projectWorktrees = currentProject
+                      ? (worktreesByProject[currentProject.path] ?? [])
+                      : [];
+                    if (projectWorktrees.length === 0) return null;
+                    const mainWorktree = projectWorktrees.find((wt) => wt.isMain);
+                    const featureWorktrees = projectWorktrees.filter((wt) => !wt.isMain);
+                    return (
+                      <>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuLabel className="text-xs text-muted-foreground">
+                          Open in Worktree
+                        </DropdownMenuLabel>
+                        {mainWorktree && (
+                          <DropdownMenuItem
+                            onClick={() =>
+                              createTerminalInNewTab(mainWorktree.path, mainWorktree.branch)
+                            }
+                            className="gap-2"
+                          >
+                            <FolderGit className="h-4 w-4" />
+                            <span className="truncate">{mainWorktree.branch}</span>
+                            <span className="ml-auto text-[10px] text-muted-foreground shrink-0">
+                              main
+                            </span>
+                          </DropdownMenuItem>
+                        )}
+                        {featureWorktrees.map((wt) => (
+                          <DropdownMenuItem
+                            key={wt.path}
+                            onClick={() => createTerminalInNewTab(wt.path, wt.branch)}
+                            className="gap-2"
+                          >
+                            <GitBranch className="h-4 w-4" />
+                            <span className="truncate">{wt.branch}</span>
+                          </DropdownMenuItem>
+                        ))}
+                      </>
+                    );
+                  })()}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+
+          {/* Toolbar buttons */}
+          <div className="flex items-center gap-1 pl-2 border-l border-border">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-muted-foreground hover:text-foreground"
+              onClick={() => {
+                const { cwd, branchName } = getActiveSessionWorktreeInfo();
+                createTerminal('horizontal', undefined, cwd, branchName);
+              }}
+              title="Split Right"
+            >
+              <SplitSquareHorizontal className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 px-2 text-muted-foreground hover:text-foreground"
+              onClick={() => {
+                const { cwd, branchName } = getActiveSessionWorktreeInfo();
+                createTerminal('vertical', undefined, cwd, branchName);
+              }}
+              title="Split Down"
+            >
+              <SplitSquareVertical className="h-4 w-4" />
+            </Button>
+
+            {/* Global Terminal Settings */}
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 px-2 text-muted-foreground hover:text-foreground"
+                  title="Terminal Settings"
+                >
+                  <Settings className="h-4 w-4" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-72" align="end">
+                <div className="space-y-4">
+                  <div className="space-y-1">
+                    <h4 className="font-medium text-sm">Terminal Settings</h4>
+                    <p className="text-xs text-muted-foreground">
+                      Configure global terminal appearance
+                    </p>
+                  </div>
+
+                  {/* Default Font Size */}
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-xs font-medium">Default Font Size</Label>
+                      <span className="text-xs text-muted-foreground">
+                        {terminalState.defaultFontSize}px
+                      </span>
+                    </div>
+                    <Slider
+                      value={[terminalState.defaultFontSize]}
+                      min={8}
+                      max={32}
+                      step={1}
+                      onValueChange={([value]) => setTerminalDefaultFontSize(value)}
+                      onValueCommit={() => {
+                        toast.info('Font size changed', {
+                          description: 'New terminals will use this size',
+                        });
+                      }}
+                    />
+                  </div>
+
+                  {/* Default Run Script */}
+                  <div className="space-y-2">
+                    <Label className="text-xs font-medium">Run on New Terminal</Label>
+                    <Input
+                      value={terminalState.defaultRunScript}
+                      onChange={(e) => setTerminalDefaultRunScript(e.target.value)}
+                      placeholder="e.g., claude"
+                      className="h-7 text-xs"
+                    />
+                    <p className="text-[10px] text-muted-foreground">
+                      Command to run when creating a new terminal
+                    </p>
+                  </div>
+
+                  {/* Font Family */}
+                  <div className="space-y-2">
+                    <Label className="text-xs font-medium">Font Family</Label>
+                    <Select
+                      value={terminalState.fontFamily || DEFAULT_FONT_VALUE}
+                      onValueChange={(value) => {
+                        setTerminalFontFamily(value);
+                        toast.info('Font family changed', {
+                          description: 'Restart terminal for changes to take effect',
+                        });
+                      }}
+                    >
+                      <SelectTrigger className="w-full h-8 text-xs">
+                        <SelectValue placeholder="Default (Menlo / Monaco)" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {TERMINAL_FONT_OPTIONS.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            <span
+                              style={{
+                                fontFamily:
+                                  option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
+                              }}
+                            >
+                              {option.label}
+                            </span>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* Scrollback */}
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-xs font-medium">Scrollback</Label>
+                      <span className="text-xs text-muted-foreground">
+                        {(terminalState.scrollbackLines / 1000).toFixed(0)}k lines
+                      </span>
+                    </div>
+                    <Slider
+                      value={[terminalState.scrollbackLines]}
+                      min={1000}
+                      max={100000}
+                      step={1000}
+                      onValueChange={([value]) => setTerminalScrollbackLines(value)}
+                      onValueCommit={() => {
+                        toast.info('Scrollback changed', {
+                          description: 'Restart terminal for changes to take effect',
+                        });
+                      }}
+                    />
+                  </div>
+
+                  {/* Line Height */}
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-xs font-medium">Line Height</Label>
+                      <span className="text-xs text-muted-foreground">
+                        {terminalState.lineHeight.toFixed(1)}
+                      </span>
+                    </div>
+                    <Slider
+                      value={[terminalState.lineHeight]}
+                      min={1.0}
+                      max={2.0}
+                      step={0.1}
+                      onValueChange={([value]) => setTerminalLineHeight(value)}
+                      onValueCommit={() => {
+                        toast.info('Line height changed', {
+                          description: 'Restart terminal for changes to take effect',
+                        });
+                      }}
+                    />
+                  </div>
+
+                  {/* Background Color */}
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-xs font-medium">Background Color</Label>
+                      {terminalState.customBackgroundColor && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-5 w-5"
+                          onClick={() => setTerminalBackgroundColor(null)}
+                          title="Reset to theme default"
+                        >
+                          <RotateCcw className="h-3 w-3" />
+                        </Button>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="w-7 h-7 rounded border border-border/50 shrink-0 flex items-center justify-center"
+                        style={{
+                          backgroundColor: terminalState.customBackgroundColor || 'var(--card)',
+                        }}
+                      >
+                        <Palette
+                          className={cn(
+                            'h-3 w-3',
+                            terminalState.customBackgroundColor
+                              ? 'text-white/80'
+                              : 'text-muted-foreground'
+                          )}
+                        />
+                      </div>
+                      <Input
+                        type="color"
+                        value={terminalState.customBackgroundColor || '#000000'}
+                        onChange={(e) => setTerminalBackgroundColor(e.target.value)}
+                        className="w-10 h-7 p-0.5 cursor-pointer bg-transparent border-border/50 shrink-0"
+                        title="Pick a background color"
+                      />
+                      <Input
+                        type="text"
+                        value={terminalState.customBackgroundColor || ''}
+                        onChange={(e) => {
+                          const value = e.target.value;
+                          if (value === '' || /^#[0-9A-Fa-f]{0,6}$/.test(value)) {
+                            if (value === '' || /^#[0-9A-Fa-f]{6}$/.test(value)) {
+                              setTerminalBackgroundColor(value || null);
+                            }
+                          }
+                        }}
+                        placeholder="#1a1a1a"
+                        className="flex-1 h-7 text-xs font-mono"
+                      />
+                    </div>
+                  </div>
+
+                  {/* Foreground Color */}
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-xs font-medium">Foreground Color</Label>
+                      {terminalState.customForegroundColor && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-5 w-5"
+                          onClick={() => setTerminalForegroundColor(null)}
+                          title="Reset to theme default"
+                        >
+                          <RotateCcw className="h-3 w-3" />
+                        </Button>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="w-7 h-7 rounded border border-border/50 shrink-0 flex items-center justify-center"
+                        style={{
+                          backgroundColor:
+                            terminalState.customForegroundColor || 'var(--foreground)',
+                        }}
+                      >
+                        <Type
+                          className={cn(
+                            'h-3 w-3',
+                            terminalState.customForegroundColor
+                              ? 'text-black/80'
+                              : 'text-background'
+                          )}
+                        />
+                      </div>
+                      <Input
+                        type="color"
+                        value={terminalState.customForegroundColor || '#ffffff'}
+                        onChange={(e) => setTerminalForegroundColor(e.target.value)}
+                        className="w-10 h-7 p-0.5 cursor-pointer bg-transparent border-border/50 shrink-0"
+                        title="Pick a foreground color"
+                      />
+                      <Input
+                        type="text"
+                        value={terminalState.customForegroundColor || ''}
+                        onChange={(e) => {
+                          const value = e.target.value;
+                          if (value === '' || /^#[0-9A-Fa-f]{0,6}$/.test(value)) {
+                            if (value === '' || /^#[0-9A-Fa-f]{6}$/.test(value)) {
+                              setTerminalForegroundColor(value || null);
+                            }
+                          }
+                        }}
+                        placeholder="#ffffff"
+                        className="flex-1 h-7 text-xs font-mono"
+                      />
+                    </div>
+                  </div>
+
+                  {/* Screen Reader */}
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label className="text-xs font-medium">Screen Reader</Label>
+                      <p className="text-[10px] text-muted-foreground">Enable accessibility mode</p>
+                    </div>
+                    <Switch
+                      checked={terminalState.screenReaderMode}
+                      onCheckedChange={(checked) => {
+                        setTerminalScreenReaderMode(checked);
+                        toast.info(checked ? 'Screen reader enabled' : 'Screen reader disabled', {
+                          description: 'Restart terminal for changes to take effect',
+                        });
+                      }}
+                    />
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
+
+        {/* Active tab content */}
+        <div className="flex-1 overflow-hidden bg-background">
+          {terminalState.maximizedSessionId ? (
+            // When a terminal is maximized, render only that terminal
+            <TerminalErrorBoundary
+              key={`boundary-maximized-${terminalState.maximizedSessionId}`}
+              sessionId={terminalState.maximizedSessionId}
+              onRestart={() => {
+                const sessionId = terminalState.maximizedSessionId!;
+                toggleTerminalMaximized(sessionId);
+                killTerminal(sessionId);
+                createTerminal();
+              }}
+            >
+              <TerminalPanel
+                key={`maximized-${terminalState.maximizedSessionId}`}
+                sessionId={terminalState.maximizedSessionId}
+                authToken={terminalState.authToken}
+                isActive={true}
+                onFocus={() => setActiveTerminalSession(terminalState.maximizedSessionId!)}
+                onClose={() => killTerminal(terminalState.maximizedSessionId!)}
+                onSplitHorizontal={() => {
+                  const { cwd, branchName } = getActiveSessionWorktreeInfo();
+                  createTerminal('horizontal', terminalState.maximizedSessionId!, cwd, branchName);
+                }}
+                onSplitVertical={() => {
+                  const { cwd, branchName } = getActiveSessionWorktreeInfo();
+                  createTerminal('vertical', terminalState.maximizedSessionId!, cwd, branchName);
+                }}
+                onNewTab={createTerminalInNewTab}
+                onRunCommandInNewTab={(command: string) => {
+                  const { cwd, branchName: branch } = getActiveSessionWorktreeInfo();
+                  createTerminalInNewTab(cwd, branch, command);
+                }}
+                onSessionInvalid={() => {
+                  const sessionId = terminalState.maximizedSessionId!;
+                  logger.info(`Maximized session ${sessionId} is invalid, removing from layout`);
+                  killTerminal(sessionId);
+                }}
+                isDragging={false}
+                isDropTarget={false}
+                fontSize={findTerminalFontSize(terminalState.maximizedSessionId)}
+                onFontSizeChange={(size) =>
+                  setTerminalPanelFontSize(terminalState.maximizedSessionId!, size)
+                }
+                runCommandOnConnect={
+                  newSessionIds.has(terminalState.maximizedSessionId)
+                    ? sessionCommandOverrides.get(terminalState.maximizedSessionId) ||
+                      defaultRunScript
+                    : undefined
+                }
+                onCommandRan={() => handleCommandRan(terminalState.maximizedSessionId!)}
+                isMaximized={true}
+                onToggleMaximize={() => toggleTerminalMaximized(terminalState.maximizedSessionId!)}
+              />
+            </TerminalErrorBoundary>
+          ) : activeTab?.layout ? (
+            renderPanelContent(activeTab.layout)
+          ) : (
+            <div className="flex-1 flex flex-col items-center justify-center text-center p-6">
+              <p className="text-muted-foreground mb-4">This tab is empty</p>
+              <Button variant="outline" size="sm" onClick={() => createTerminal()}>
+                <Plus className="h-4 w-4 mr-2" />
+                New Terminal
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Drag overlay */}
+      <DragOverlay
+        dropAnimation={{
+          sideEffects: defaultDropAnimationSideEffects({
+            styles: { active: { opacity: '0.5' } },
+          }),
+        }}
+        zIndex={1000}
+      >
+        {activeDragId ? (
+          <div className="relative inline-flex items-center gap-2 px-3.5 py-2 bg-card border-2 border-brand-500 rounded-lg shadow-xl pointer-events-none overflow-hidden">
+            <TerminalIcon className="h-4 w-4 text-brand-500 shrink-0" />
+            <span className="text-sm font-medium text-foreground whitespace-nowrap">
+              {dragOverTabId === 'new' ? 'New tab' : dragOverTabId ? 'Move to tab' : 'Terminal'}
+            </span>
+          </div>
+        ) : null}
+      </DragOverlay>
+    </DndContext>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/terminal-view/mobile-terminal-shortcuts.tsx b/temp_repo/apps/ui/src/components/views/terminal-view/mobile-terminal-shortcuts.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..206decae1d5b5886edb387aa570c1e7c9cb5c87b
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/terminal-view/mobile-terminal-shortcuts.tsx
@@ -0,0 +1,422 @@
+import { useCallback, useRef, useEffect, useState } from 'react';
+import {
+  ArrowUp,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ChevronUp,
+  ChevronDown,
+  Copy,
+  ClipboardPaste,
+  CheckSquare,
+  TextSelect,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { StickyModifierKeys, type StickyModifier } from './sticky-modifier-keys';
+
+/**
+ * ANSI escape sequences for special keys.
+ * These are what terminal emulators send when these keys are pressed.
+ */
+const SPECIAL_KEYS = {
+  escape: '\x1b',
+  tab: '\t',
+  delete: '\x1b[3~',
+  home: '\x1b[H',
+  end: '\x1b[F',
+} as const;
+
+/**
+ * Common Ctrl key combinations sent as control codes.
+ * Ctrl+<char> sends the char code & 0x1f (e.g., Ctrl+C = 0x03).
+ */
+const CTRL_KEYS = {
+  'Ctrl+C': '\x03', // Interrupt / SIGINT
+  'Ctrl+Z': '\x1a', // Suspend / SIGTSTP
+  'Ctrl+A': '\x01', // Move to beginning of line
+  'Ctrl+B': '\x02', // Move cursor back (tmux prefix)
+} as const;
+
+const ARROW_KEYS = {
+  up: '\x1b[A',
+  down: '\x1b[B',
+  right: '\x1b[C',
+  left: '\x1b[D',
+} as const;
+
+interface MobileTerminalShortcutsProps {
+  /** Callback to send input data to the terminal WebSocket */
+  onSendInput: (data: string) => void;
+  /** Whether the terminal is connected and ready */
+  isConnected: boolean;
+  /** Currently active sticky modifier (Ctrl or Alt) */
+  activeModifier: StickyModifier;
+  /** Callback when sticky modifier is toggled */
+  onModifierChange: (modifier: StickyModifier) => void;
+  /** Callback to copy selected text to clipboard */
+  onCopy?: () => void;
+  /** Callback to paste from clipboard into terminal */
+  onPaste?: () => void;
+  /** Callback to select all terminal content */
+  onSelectAll?: () => void;
+  /** Callback to toggle text selection mode (renders selectable text overlay) */
+  onToggleSelectMode?: () => void;
+  /** Whether text selection mode is currently active */
+  isSelectMode?: boolean;
+}
+
+/**
+ * Mobile shortcuts bar for terminal interaction on touch devices.
+ * Provides special keys (Escape, Tab, Ctrl+C, etc.) and arrow keys that are
+ * typically unavailable on mobile virtual keyboards.
+ *
+ * Anchored at the top of the terminal panel, above the terminal content.
+ * Can be collapsed to a minimal toggle to maximize terminal space.
+ */
+export function MobileTerminalShortcuts({
+  onSendInput,
+  isConnected,
+  activeModifier,
+  onModifierChange,
+  onCopy,
+  onPaste,
+  onSelectAll,
+  onToggleSelectMode,
+  isSelectMode,
+}: MobileTerminalShortcutsProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  // Track repeat interval for arrow key long-press
+  const repeatIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const repeatTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Cleanup repeat timers on unmount
+  useEffect(() => {
+    return () => {
+      if (repeatIntervalRef.current) clearInterval(repeatIntervalRef.current);
+      if (repeatTimeoutRef.current) clearTimeout(repeatTimeoutRef.current);
+    };
+  }, []);
+
+  const clearRepeat = useCallback(() => {
+    if (repeatIntervalRef.current) {
+      clearInterval(repeatIntervalRef.current);
+      repeatIntervalRef.current = null;
+    }
+    if (repeatTimeoutRef.current) {
+      clearTimeout(repeatTimeoutRef.current);
+      repeatTimeoutRef.current = null;
+    }
+  }, []);
+
+  /** Sends a key sequence to the terminal. */
+  const sendKey = useCallback(
+    (data: string) => {
+      if (!isConnected) return;
+      onSendInput(data);
+    },
+    [isConnected, onSendInput]
+  );
+
+  /** Handles arrow key press with long-press repeat support. */
+  const handleArrowPress = useCallback(
+    (data: string) => {
+      // Cancel any in-flight timeout/interval before starting a new one
+      // to prevent timer leaks when multiple touches occur.
+      clearRepeat();
+      sendKey(data);
+      // Start repeat after 400ms hold, then every 80ms
+      repeatTimeoutRef.current = setTimeout(() => {
+        repeatIntervalRef.current = setInterval(() => {
+          sendKey(data);
+        }, 80);
+      }, 400);
+    },
+    [clearRepeat, sendKey]
+  );
+
+  const handleArrowRelease = useCallback(() => {
+    clearRepeat();
+  }, [clearRepeat]);
+
+  if (isCollapsed) {
+    return (
+      <div className="flex items-center justify-center shrink-0 bg-card/95 backdrop-blur-sm border-b border-border">
+        <button
+          className="flex items-center gap-1 px-4 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors touch-manipulation"
+          onClick={() => setIsCollapsed(false)}
+          title="Show shortcuts"
+        >
+          <ChevronDown className="h-3.5 w-3.5" />
+          <span>Shortcuts</span>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-1.5 px-2 py-1.5 shrink-0 bg-card/95 backdrop-blur-sm border-b border-border overflow-x-auto">
+      {/* Collapse button */}
+      <button
+        className="p-1.5 rounded text-muted-foreground hover:text-foreground hover:bg-accent transition-colors shrink-0 touch-manipulation"
+        onClick={() => setIsCollapsed(true)}
+        title="Hide shortcuts"
+      >
+        <ChevronUp className="h-4 w-4" />
+      </button>
+
+      {/* Separator */}
+      <div className="w-px h-6 bg-border shrink-0" />
+
+      {/* Sticky modifier keys (Ctrl, Alt) - at the beginning of the bar */}
+      <StickyModifierKeys
+        activeModifier={activeModifier}
+        onModifierChange={onModifierChange}
+        isConnected={isConnected}
+      />
+
+      {/* Separator */}
+      <div className="w-px h-6 bg-border shrink-0" />
+
+      {/* Clipboard actions */}
+      {onToggleSelectMode && (
+        <IconShortcutButton
+          icon={TextSelect}
+          title={isSelectMode ? 'Exit select mode' : 'Select text'}
+          onPress={onToggleSelectMode}
+          disabled={!isConnected}
+          active={isSelectMode}
+        />
+      )}
+      {onSelectAll && (
+        <IconShortcutButton
+          icon={CheckSquare}
+          title="Select all"
+          onPress={onSelectAll}
+          disabled={!isConnected}
+        />
+      )}
+      {onCopy && (
+        <IconShortcutButton
+          icon={Copy}
+          title="Copy selection"
+          onPress={onCopy}
+          disabled={!isConnected}
+        />
+      )}
+      {onPaste && (
+        <IconShortcutButton
+          icon={ClipboardPaste}
+          title="Paste from clipboard"
+          onPress={onPaste}
+          disabled={!isConnected}
+        />
+      )}
+
+      {/* Separator */}
+      <div className="w-px h-6 bg-border shrink-0" />
+
+      {/* Special keys */}
+      <ShortcutButton
+        label="Esc"
+        onPress={() => sendKey(SPECIAL_KEYS.escape)}
+        disabled={!isConnected}
+      />
+      <ShortcutButton
+        label="Tab"
+        onPress={() => sendKey(SPECIAL_KEYS.tab)}
+        disabled={!isConnected}
+      />
+
+      {/* Separator */}
+      <div className="w-px h-6 bg-border shrink-0" />
+
+      {/* Common Ctrl shortcuts */}
+      <ShortcutButton
+        label="^C"
+        title="Ctrl+C (Interrupt)"
+        onPress={() => sendKey(CTRL_KEYS['Ctrl+C'])}
+        disabled={!isConnected}
+      />
+      <ShortcutButton
+        label="^Z"
+        title="Ctrl+Z (Suspend)"
+        onPress={() => sendKey(CTRL_KEYS['Ctrl+Z'])}
+        disabled={!isConnected}
+      />
+      <ShortcutButton
+        label="^B"
+        title="Ctrl+B (Back/tmux prefix)"
+        onPress={() => sendKey(CTRL_KEYS['Ctrl+B'])}
+        disabled={!isConnected}
+      />
+
+      {/* Separator */}
+      <div className="w-px h-6 bg-border shrink-0" />
+
+      {/* Arrow keys with long-press repeat */}
+      <ArrowButton
+        direction="left"
+        onPress={() => handleArrowPress(ARROW_KEYS.left)}
+        onRelease={handleArrowRelease}
+        disabled={!isConnected}
+      />
+      <ArrowButton
+        direction="down"
+        onPress={() => handleArrowPress(ARROW_KEYS.down)}
+        onRelease={handleArrowRelease}
+        disabled={!isConnected}
+      />
+      <ArrowButton
+        direction="up"
+        onPress={() => handleArrowPress(ARROW_KEYS.up)}
+        onRelease={handleArrowRelease}
+        disabled={!isConnected}
+      />
+      <ArrowButton
+        direction="right"
+        onPress={() => handleArrowPress(ARROW_KEYS.right)}
+        onRelease={handleArrowRelease}
+        disabled={!isConnected}
+      />
+
+      {/* Separator */}
+      <div className="w-px h-6 bg-border shrink-0" />
+
+      {/* Navigation keys */}
+      <ShortcutButton
+        label="Del"
+        onPress={() => sendKey(SPECIAL_KEYS.delete)}
+        disabled={!isConnected}
+      />
+      <ShortcutButton
+        label="Home"
+        onPress={() => sendKey(SPECIAL_KEYS.home)}
+        disabled={!isConnected}
+      />
+      <ShortcutButton
+        label="End"
+        onPress={() => sendKey(SPECIAL_KEYS.end)}
+        disabled={!isConnected}
+      />
+    </div>
+  );
+}
+
+/**
+ * Individual shortcut button for special keys.
+ */
+function ShortcutButton({
+  label,
+  title,
+  onPress,
+  disabled = false,
+}: {
+  label: string;
+  title?: string;
+  onPress: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      className={cn(
+        'px-3 py-2 rounded-md text-xs font-medium shrink-0 select-none transition-colors min-w-[36px] min-h-[36px] flex items-center justify-center',
+        'active:scale-95 touch-manipulation',
+        'bg-muted/80 text-foreground hover:bg-accent',
+        disabled && 'opacity-40 pointer-events-none'
+      )}
+      onPointerDown={(e) => {
+        e.preventDefault(); // Prevent focus stealing from terminal
+        onPress();
+      }}
+      title={title}
+      disabled={disabled}
+    >
+      {label}
+    </button>
+  );
+}
+
+/**
+ * Arrow key button with long-press repeat support.
+ * Uses pointer events for reliable touch + mouse handling.
+ */
+function ArrowButton({
+  direction,
+  onPress,
+  onRelease,
+  disabled = false,
+}: {
+  direction: 'up' | 'down' | 'left' | 'right';
+  onPress: () => void;
+  onRelease: () => void;
+  disabled?: boolean;
+}) {
+  const icons = {
+    up: ArrowUp,
+    down: ArrowDown,
+    left: ArrowLeft,
+    right: ArrowRight,
+  };
+  const Icon = icons[direction];
+
+  return (
+    <button
+      className={cn(
+        'p-2 rounded-md shrink-0 select-none transition-colors min-w-[36px] min-h-[36px] flex items-center justify-center',
+        'active:scale-95 touch-manipulation',
+        'bg-muted/80 text-foreground hover:bg-accent',
+        disabled && 'opacity-40 pointer-events-none'
+      )}
+      onPointerDown={(e) => {
+        e.preventDefault(); // Prevent focus stealing from terminal
+        onPress();
+      }}
+      onPointerUp={onRelease}
+      onPointerLeave={onRelease}
+      onPointerCancel={onRelease}
+      disabled={disabled}
+    >
+      <Icon className="h-4 w-4" />
+    </button>
+  );
+}
+
+/**
+ * Icon-based shortcut button for clipboard actions.
+ * Uses a Lucide icon instead of text label for a cleaner mobile UI.
+ */
+function IconShortcutButton({
+  icon: Icon,
+  title,
+  onPress,
+  disabled = false,
+  active = false,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  onPress: () => void;
+  disabled?: boolean;
+  active?: boolean;
+}) {
+  return (
+    <button
+      className={cn(
+        'p-2 rounded-md shrink-0 select-none transition-colors min-w-[36px] min-h-[36px] flex items-center justify-center',
+        'active:scale-95 touch-manipulation',
+        active
+          ? 'bg-brand-500/20 text-brand-500 ring-1 ring-brand-500/40'
+          : 'bg-muted/80 text-foreground hover:bg-accent',
+        disabled && 'opacity-40 pointer-events-none'
+      )}
+      onPointerDown={(e) => {
+        e.preventDefault(); // Prevent focus stealing from terminal
+        onPress();
+      }}
+      title={title}
+      disabled={disabled}
+    >
+      <Icon className="h-4 w-4" />
+    </button>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/terminal-view/sticky-modifier-keys.tsx b/temp_repo/apps/ui/src/components/views/terminal-view/sticky-modifier-keys.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a5a9447fbc239f80f3c1cde2b9f63e1efd91d3d5
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/terminal-view/sticky-modifier-keys.tsx
@@ -0,0 +1,147 @@
+import { useCallback } from 'react';
+import { cn } from '@/lib/utils';
+
+export type StickyModifier = 'ctrl' | 'alt' | null;
+
+interface StickyModifierKeysProps {
+  /** Currently active sticky modifier (null = none) */
+  activeModifier: StickyModifier;
+  /** Callback when a modifier is toggled */
+  onModifierChange: (modifier: StickyModifier) => void;
+  /** Whether the terminal is connected */
+  isConnected: boolean;
+}
+
+/**
+ * Sticky modifier keys (Ctrl, Alt) for the terminal toolbar.
+ *
+ * "Sticky" means: tap a modifier to activate it, then the next key pressed
+ * in the terminal will be sent with that modifier applied. After the modified
+ * key is sent, the sticky modifier automatically deactivates.
+ *
+ * - Ctrl: Sends the control code (character code & 0x1f)
+ * - Alt: Sends escape prefix (\x1b) before the character
+ *
+ * Tapping an already-active modifier deactivates it (toggle behavior).
+ */
+export function StickyModifierKeys({
+  activeModifier,
+  onModifierChange,
+  isConnected,
+}: StickyModifierKeysProps) {
+  const toggleCtrl = useCallback(() => {
+    onModifierChange(activeModifier === 'ctrl' ? null : 'ctrl');
+  }, [activeModifier, onModifierChange]);
+
+  const toggleAlt = useCallback(() => {
+    onModifierChange(activeModifier === 'alt' ? null : 'alt');
+  }, [activeModifier, onModifierChange]);
+
+  return (
+    <div className="flex items-center gap-1 shrink-0">
+      <ModifierButton
+        label="Ctrl"
+        isActive={activeModifier === 'ctrl'}
+        onPress={toggleCtrl}
+        disabled={!isConnected}
+        title="Sticky Ctrl – tap to activate, then press a key (e.g. Ctrl+C)"
+      />
+      <ModifierButton
+        label="Alt"
+        isActive={activeModifier === 'alt'}
+        onPress={toggleAlt}
+        disabled={!isConnected}
+        title="Sticky Alt – tap to activate, then press a key (e.g. Alt+D)"
+      />
+    </div>
+  );
+}
+
+/**
+ * Individual modifier toggle button with active state styling.
+ */
+function ModifierButton({
+  label,
+  isActive,
+  onPress,
+  disabled = false,
+  title,
+}: {
+  label: string;
+  isActive: boolean;
+  onPress: () => void;
+  disabled?: boolean;
+  title?: string;
+}) {
+  return (
+    <button
+      className={cn(
+        'px-2 py-1 rounded-md text-xs font-medium shrink-0 select-none transition-all min-w-[36px] min-h-[28px] flex items-center justify-center',
+        'touch-manipulation border',
+        isActive
+          ? 'bg-brand-500 text-white border-brand-500 shadow-sm shadow-brand-500/25'
+          : 'bg-muted/80 text-foreground hover:bg-accent border-transparent',
+        disabled && 'opacity-40 pointer-events-none'
+      )}
+      onPointerDown={(e) => {
+        e.preventDefault(); // Prevent focus stealing from terminal
+        onPress();
+      }}
+      title={title}
+      disabled={disabled}
+      aria-pressed={isActive}
+      role="switch"
+    >
+      {label}
+    </button>
+  );
+}
+
+/**
+ * Apply a sticky modifier to raw terminal input data.
+ *
+ * For Ctrl: converts printable ASCII characters to their control-code equivalent.
+ *   e.g. 'c' → \x03 (Ctrl+C), 'a' → \x01 (Ctrl+A)
+ *
+ * For Alt: prepends the escape character (\x1b) before the data.
+ *   e.g. 'd' → \x1bd (Alt+D)
+ *
+ * Returns null if the modifier cannot be applied (non-ASCII, etc.)
+ */
+export function applyStickyModifier(data: string, modifier: StickyModifier): string | null {
+  if (!modifier || !data) return null;
+
+  if (modifier === 'ctrl') {
+    // Only apply Ctrl to single printable ASCII characters (a-z, A-Z, and some specials)
+    if (data.length === 1) {
+      const code = data.charCodeAt(0);
+
+      // Letters a-z or A-Z: Ctrl sends code & 0x1f
+      if ((code >= 0x41 && code <= 0x5a) || (code >= 0x61 && code <= 0x7a)) {
+        return String.fromCharCode(code & 0x1f);
+      }
+
+      // Special Ctrl combinations
+      // Ctrl+[ = Escape (0x1b)
+      if (code === 0x5b) return '\x1b';
+      // Ctrl+\ = 0x1c
+      if (code === 0x5c) return '\x1c';
+      // Ctrl+] = 0x1d
+      if (code === 0x5d) return '\x1d';
+      // Ctrl+^ = 0x1e
+      if (code === 0x5e) return '\x1e';
+      // Ctrl+_ = 0x1f
+      if (code === 0x5f) return '\x1f';
+      // Ctrl+Space or Ctrl+@ = 0x00 (NUL)
+      if (code === 0x20 || code === 0x40) return '\x00';
+    }
+    return null;
+  }
+
+  if (modifier === 'alt') {
+    // Alt sends ESC prefix followed by the character
+    return '\x1b' + data;
+  }
+
+  return null;
+}
diff --git a/temp_repo/apps/ui/src/components/views/terminal-view/terminal-error-boundary.tsx b/temp_repo/apps/ui/src/components/views/terminal-view/terminal-error-boundary.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..32f82e34a8c54fe989c13da08e2962f457d93a18
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/terminal-view/terminal-error-boundary.tsx
@@ -0,0 +1,88 @@
+import React, { Component, ErrorInfo } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { AlertCircle, RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+const logger = createLogger('TerminalErrorBoundary');
+
+interface Props {
+  children: React.ReactNode;
+  sessionId: string;
+  onRestart?: () => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * BUG-06 fix: Error boundary for terminal components
+ * Catches xterm.js errors (WebGL context loss, canvas errors, etc.)
+ * and displays a friendly recovery UI instead of crashing the app.
+ */
+export class TerminalErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    logger.error('Terminal crashed:', {
+      sessionId: this.props.sessionId,
+      error: error.message,
+      stack: error.stack,
+      componentStack: errorInfo.componentStack,
+    });
+  }
+
+  handleRestart = () => {
+    this.setState({ hasError: false, error: null });
+    this.props.onRestart?.();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          className={cn(
+            'flex flex-col items-center justify-center h-full w-full',
+            'bg-background/95 backdrop-blur-sm',
+            'p-6 text-center gap-4'
+          )}
+        >
+          <div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center">
+            <AlertCircle className="w-6 h-6 text-destructive" />
+          </div>
+          <div className="space-y-2">
+            <h3 className="text-lg font-semibold text-foreground">Terminal Crashed</h3>
+            <p className="text-sm text-muted-foreground max-w-sm">
+              {this.state.error?.message?.includes('WebGL')
+                ? 'WebGL context was lost. This can happen with GPU driver issues.'
+                : 'An unexpected error occurred in the terminal.'}
+            </p>
+          </div>
+          <Button variant="outline" size="sm" onClick={this.handleRestart} className="gap-2">
+            <RefreshCw className="w-4 h-4" />
+            Restart Terminal
+          </Button>
+          {this.state.error && (
+            <details className="text-xs text-muted-foreground max-w-md">
+              <summary className="cursor-pointer hover:text-foreground">Technical details</summary>
+              <pre className="mt-2 p-2 bg-muted/50 rounded text-left overflow-auto max-h-32">
+                {this.state.error.message}
+              </pre>
+            </details>
+          )}
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
diff --git a/temp_repo/apps/ui/src/components/views/terminal-view/terminal-panel.tsx b/temp_repo/apps/ui/src/components/views/terminal-view/terminal-panel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3b4bcffa283d3c00d8be39e786488b142ab6cb68
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/terminal-view/terminal-panel.tsx
@@ -0,0 +1,2627 @@
+import { useEffect, useRef, useCallback, useState, useMemo } from 'react';
+import { useNavigate } from '@tanstack/react-router';
+import { createLogger } from '@automaker/utils/logger';
+import {
+  X,
+  SplitSquareHorizontal,
+  SplitSquareVertical,
+  GripHorizontal,
+  Terminal,
+  ZoomIn,
+  ZoomOut,
+  Copy,
+  ClipboardPaste,
+  CheckSquare,
+  Trash2,
+  ImageIcon,
+  Settings,
+  RotateCcw,
+  Search,
+  ChevronUp,
+  ChevronDown,
+  Maximize2,
+  Minimize2,
+  ArrowDown,
+  GitBranch,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
+import { cn } from '@/lib/utils';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Slider } from '@/components/ui/slider';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { useAppStore, DEFAULT_KEYBOARD_SHORTCUTS, type KeyboardShortcuts } from '@/store/app-store';
+import { useShallow } from 'zustand/react/shallow';
+import { matchesShortcutWithCode } from '@/hooks/use-keyboard-shortcuts';
+import {
+  getTerminalTheme,
+  TERMINAL_FONT_OPTIONS,
+  getTerminalFontFamily,
+} from '@/config/terminal-themes';
+import { DEFAULT_FONT_VALUE } from '@/config/ui-font-options';
+import { toast } from 'sonner';
+import { getElectronAPI } from '@/lib/electron';
+import { getApiKey, getSessionToken, getServerUrlSync } from '@/lib/http-api-client';
+import { writeToClipboard, readFromClipboard } from '@/lib/clipboard-utils';
+import { useIsMobile, useIsTablet } from '@/hooks/use-media-query';
+import { useVirtualKeyboardResize } from '@/hooks/use-virtual-keyboard-resize';
+import { MobileTerminalShortcuts } from './mobile-terminal-shortcuts';
+import { applyStickyModifier, type StickyModifier } from './sticky-modifier-keys';
+import { TerminalScriptsDropdown } from './terminal-scripts-dropdown';
+
+const logger = createLogger('Terminal');
+const NO_STORE_CACHE_MODE: RequestCache = 'no-store';
+
+// Font size constraints
+const MIN_FONT_SIZE = 8;
+const MAX_FONT_SIZE = 32;
+const DEFAULT_FONT_SIZE = 14;
+
+// Resize constraints
+const RESIZE_DEBOUNCE_MS = 100; // Short debounce for responsive feel
+
+// Image drag-drop constants
+const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
+const MAX_IMAGE_SIZE = 10 * 1024 * 1024; // 10MB
+
+// Large paste handling constants
+const LARGE_PASTE_WARNING_THRESHOLD = 1024 * 1024; // 1MB - show warning for pastes this size or larger
+const PASTE_CHUNK_SIZE = 8 * 1024; // 8KB chunks for large pastes
+const PASTE_CHUNK_DELAY_MS = 10; // Small delay between chunks to prevent overwhelming WebSocket
+
+// Mobile overlay buffer cap - limit lines read from terminal buffer to avoid DOM blow-up on mobile
+const MAX_OVERLAY_LINES = 1000; // Maximum number of lines to read for the mobile select-mode overlay
+
+interface TerminalPanelProps {
+  sessionId: string;
+  authToken: string | null;
+  isActive: boolean;
+  onFocus: () => void;
+  onClose: () => void;
+  onSplitHorizontal: () => void;
+  onSplitVertical: () => void;
+  onNewTab?: () => void;
+  onRunCommandInNewTab?: (command: string) => void; // Run a script command in a new terminal tab
+  onNavigateUp?: () => void; // Navigate to terminal pane above
+  onNavigateDown?: () => void; // Navigate to terminal pane below
+  onNavigateLeft?: () => void; // Navigate to terminal pane on the left
+  onNavigateRight?: () => void; // Navigate to terminal pane on the right
+  onSessionInvalid?: () => void; // Called when session is no longer valid on server (e.g., server restarted)
+  isDragging?: boolean;
+  isDropTarget?: boolean;
+  fontSize: number;
+  onFontSizeChange: (size: number) => void;
+  runCommandOnConnect?: string; // Command to run when terminal first connects (for new terminals)
+  onCommandRan?: () => void; // Callback when the initial command has been sent
+  isMaximized?: boolean;
+  onToggleMaximize?: () => void;
+  branchName?: string; // Branch name to display in header (from "Open in Terminal" action)
+}
+
+// Type for xterm Terminal - we'll use any since we're dynamically importing
+type XTerminal = InstanceType<typeof import('@xterm/xterm').Terminal>;
+type XFitAddon = InstanceType<typeof import('@xterm/addon-fit').FitAddon>;
+type XSearchAddon = InstanceType<typeof import('@xterm/addon-search').SearchAddon>;
+
+export function TerminalPanel({
+  sessionId,
+  authToken,
+  isActive,
+  onFocus,
+  onClose,
+  onSplitHorizontal,
+  onSplitVertical,
+  onNewTab,
+  onRunCommandInNewTab,
+  onNavigateUp,
+  onNavigateDown,
+  onNavigateLeft,
+  onNavigateRight,
+  onSessionInvalid,
+  isDragging = false,
+  isDropTarget = false,
+  fontSize,
+  onFontSizeChange,
+  runCommandOnConnect,
+  onCommandRan,
+  isMaximized = false,
+  onToggleMaximize,
+  branchName,
+}: TerminalPanelProps) {
+  const navigate = useNavigate();
+  const terminalRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const xtermRef = useRef<XTerminal | null>(null);
+  const fitAddonRef = useRef<XFitAddon | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const heartbeatIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const lastShortcutTimeRef = useRef<number>(0);
+  const resizeDebounceRef = useRef<NodeJS.Timeout | null>(null);
+  const focusHandlerRef = useRef<{ dispose: () => void } | null>(null);
+  const linkProviderRef = useRef<{ dispose: () => void } | null>(null);
+  const [isTerminalReady, setIsTerminalReady] = useState(false);
+  const [shellName, setShellName] = useState('shell');
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
+  const [isMac, setIsMac] = useState(false);
+  const isMacRef = useRef(false);
+  const contextMenuRef = useRef<HTMLDivElement>(null);
+  const [focusedMenuIndex, setFocusedMenuIndex] = useState(0);
+  const focusedMenuIndexRef = useRef(0);
+  const [isImageDragOver, setIsImageDragOver] = useState(false);
+  const [isProcessingImage, setIsProcessingImage] = useState(false);
+  const hasRunInitialCommandRef = useRef(false);
+  const runCommandOnConnectRef = useRef(runCommandOnConnect);
+  const onCommandRanRef = useRef(onCommandRan);
+  // Long-press timer for mobile context menu
+  const longPressTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const longPressTouchStartRef = useRef<{ x: number; y: number } | null>(null);
+  // Tracks whether the connected shell is a Windows shell (PowerShell, cmd, etc.).
+  // Maintained as a ref (not state) so sendCommand can read the current value without
+  // causing unnecessary re-renders or stale closure issues. Set inside ws.onmessage
+  // when the 'connected' message is received (see isWindowsShell detection below).
+  const isWindowsShellRef = useRef(false);
+  const searchAddonRef = useRef<XSearchAddon | null>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const [showSearch, setShowSearch] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const showSearchRef = useRef(false);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+
+  runCommandOnConnectRef.current = runCommandOnConnect;
+  onCommandRanRef.current = onCommandRan;
+
+  // Mobile text selection mode - renders terminal buffer as selectable DOM text
+  const [isSelectMode, setIsSelectMode] = useState(false);
+  const [selectModeText, setSelectModeText] = useState('');
+
+  // Sticky modifier key state (Ctrl or Alt) for the terminal toolbar
+  const [stickyModifier, setStickyModifier] = useState<StickyModifier>(null);
+  const stickyModifierRef = useRef<StickyModifier>(null);
+
+  const [connectionStatus, setConnectionStatus] = useState<
+    'connecting' | 'connected' | 'reconnecting' | 'disconnected' | 'auth_failed'
+  >('connecting');
+  const reconnectAttemptsRef = useRef(0);
+  const MAX_RECONNECT_ATTEMPTS = 5;
+  const INITIAL_RECONNECT_DELAY = 1000;
+  const [processExitCode, setProcessExitCode] = useState<number | null>(null);
+
+  // Detect mobile/tablet viewport for shortcuts bar
+  const isMobile = useIsMobile();
+  const isTablet = useIsTablet();
+  const showShortcutsBar = isMobile || isTablet;
+
+  // Track virtual keyboard height on mobile to prevent overlap
+  const { keyboardHeight, isKeyboardOpen } = useVirtualKeyboardResize();
+
+  // Get current project for image saving
+  const currentProject = useAppStore((state) => state.currentProject);
+
+  // Get terminal settings from store - grouped with shallow comparison to reduce re-renders
+  const {
+    defaultRunScript,
+    screenReaderMode,
+    fontFamily,
+    scrollbackLines,
+    lineHeight,
+    customBackgroundColor,
+    customForegroundColor,
+  } = useAppStore(
+    useShallow((state) => ({
+      defaultRunScript: state.terminalState.defaultRunScript,
+      screenReaderMode: state.terminalState.screenReaderMode,
+      fontFamily: state.terminalState.fontFamily,
+      scrollbackLines: state.terminalState.scrollbackLines,
+      lineHeight: state.terminalState.lineHeight,
+      customBackgroundColor: state.terminalState.customBackgroundColor,
+      customForegroundColor: state.terminalState.customForegroundColor,
+    }))
+  );
+
+  // Action setters are stable references, can use individual selectors
+  const setTerminalDefaultRunScript = useAppStore((state) => state.setTerminalDefaultRunScript);
+  const setTerminalScreenReaderMode = useAppStore((state) => state.setTerminalScreenReaderMode);
+  const setTerminalFontFamily = useAppStore((state) => state.setTerminalFontFamily);
+  const setTerminalScrollbackLines = useAppStore((state) => state.setTerminalScrollbackLines);
+  const setTerminalLineHeight = useAppStore((state) => state.setTerminalLineHeight);
+
+  // Detect platform on mount
+  useEffect(() => {
+    // Use modern userAgentData API with fallback to navigator.platform
+    const nav = navigator as Navigator & { userAgentData?: { platform: string } };
+    let detected = false;
+    if (nav.userAgentData?.platform) {
+      detected = nav.userAgentData.platform.toLowerCase().includes('mac');
+    } else if (typeof navigator !== 'undefined') {
+      // Fallback for browsers without userAgentData (intentionally using deprecated API)
+      detected = /mac/i.test(navigator.platform);
+    }
+    setIsMac(detected);
+    isMacRef.current = detected;
+  }, []);
+
+  // Get effective theme from store
+  const getEffectiveTheme = useAppStore((state) => state.getEffectiveTheme);
+  const effectiveTheme = getEffectiveTheme();
+
+  // Get keyboard shortcuts from store - merged with defaults
+  const keyboardShortcuts = useAppStore((state) => state.keyboardShortcuts);
+  const mergedShortcuts: KeyboardShortcuts = {
+    ...DEFAULT_KEYBOARD_SHORTCUTS,
+    ...keyboardShortcuts,
+  };
+  const shortcutsRef = useRef(mergedShortcuts);
+  shortcutsRef.current = mergedShortcuts;
+
+  // Track system dark mode preference for "system" theme
+  const [systemIsDark, setSystemIsDark] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    return false;
+  });
+
+  // Listen for system theme changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e: MediaQueryListEvent) => {
+      setSystemIsDark(e.matches);
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  // Resolve "system" theme to actual light/dark
+  const resolvedTheme =
+    effectiveTheme === 'system' ? (systemIsDark ? 'dark' : 'light') : effectiveTheme;
+
+  // Use refs for callbacks and values to avoid effect re-runs
+  const onFocusRef = useRef(onFocus);
+  onFocusRef.current = onFocus;
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const onSplitHorizontalRef = useRef(onSplitHorizontal);
+  onSplitHorizontalRef.current = onSplitHorizontal;
+  const onSplitVerticalRef = useRef(onSplitVertical);
+  onSplitVerticalRef.current = onSplitVertical;
+  const onNewTabRef = useRef(onNewTab);
+  onNewTabRef.current = onNewTab;
+  const onNavigateUpRef = useRef(onNavigateUp);
+  onNavigateUpRef.current = onNavigateUp;
+  const onNavigateDownRef = useRef(onNavigateDown);
+  onNavigateDownRef.current = onNavigateDown;
+  const onNavigateLeftRef = useRef(onNavigateLeft);
+  onNavigateLeftRef.current = onNavigateLeft;
+  const onNavigateRightRef = useRef(onNavigateRight);
+  onNavigateRightRef.current = onNavigateRight;
+  const onSessionInvalidRef = useRef(onSessionInvalid);
+  onSessionInvalidRef.current = onSessionInvalid;
+  const fontSizeRef = useRef(fontSize);
+  fontSizeRef.current = fontSize;
+  const themeRef = useRef(resolvedTheme);
+  themeRef.current = resolvedTheme;
+  const copySelectionRef = useRef<() => Promise<boolean>>(() => Promise.resolve(false));
+  const pasteFromClipboardRef = useRef<() => Promise<void>>(() => Promise.resolve());
+
+  // Zoom functions - use the prop callback
+  const zoomIn = useCallback(() => {
+    onFontSizeChange(Math.min(fontSize + 1, MAX_FONT_SIZE));
+  }, [fontSize, onFontSizeChange]);
+
+  const zoomOut = useCallback(() => {
+    onFontSizeChange(Math.max(fontSize - 1, MIN_FONT_SIZE));
+  }, [fontSize, onFontSizeChange]);
+
+  const resetZoom = useCallback(() => {
+    onFontSizeChange(DEFAULT_FONT_SIZE);
+  }, [onFontSizeChange]);
+
+  // Strip ANSI escape codes from text
+  const stripAnsi = (text: string): string => {
+    // Match ANSI escape sequences:
+    // - CSI sequences: \x1b[...letter
+    // - OSC sequences: \x1b]...ST
+    // - Other escape sequences: \x1b followed by various characters
+    return text.replace(
+      // eslint-disable-next-line no-control-regex
+      /\x1b\[[0-9;]*[a-zA-Z]|\x1b\][^\x07]*\x07|\x1b[()][AB012]|\x1b[>=<]|\x1b[78HM]|\x1b#[0-9]|\x1b./g,
+      ''
+    );
+  };
+
+  // Copy selected text to clipboard
+  const copySelection = useCallback(async (): Promise<boolean> => {
+    const terminal = xtermRef.current;
+    if (!terminal) return false;
+
+    const selection = terminal.getSelection();
+    if (!selection) {
+      toast.error('Nothing to copy', {
+        description: 'Select some text first',
+      });
+      return false;
+    }
+
+    try {
+      // Strip any ANSI escape codes that might be in the selection
+      const cleanText = stripAnsi(selection);
+      const success = await writeToClipboard(cleanText);
+      if (success) {
+        toast.success('Copied to clipboard');
+        return true;
+      } else {
+        toast.error('Copy failed', {
+          description: 'Could not access clipboard',
+        });
+        return false;
+      }
+    } catch (err) {
+      logger.error('Copy failed:', err);
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      toast.error('Copy failed', {
+        description: errorMessage.includes('permission')
+          ? 'Clipboard permission denied'
+          : 'Could not access clipboard',
+      });
+      return false;
+    }
+  }, []);
+  copySelectionRef.current = copySelection;
+
+  // Helper function to send text in chunks with delay
+  const sendTextInChunks = useCallback(async (text: string) => {
+    const ws = wsRef.current;
+    if (!ws || ws.readyState !== WebSocket.OPEN) return;
+
+    // For small pastes, send all at once
+    if (text.length <= PASTE_CHUNK_SIZE) {
+      ws.send(JSON.stringify({ type: 'input', data: text }));
+      return;
+    }
+
+    // For large pastes, chunk it
+    for (let i = 0; i < text.length; i += PASTE_CHUNK_SIZE) {
+      if (ws.readyState !== WebSocket.OPEN) break;
+      const chunk = text.slice(i, i + PASTE_CHUNK_SIZE);
+      ws.send(JSON.stringify({ type: 'input', data: chunk }));
+      // Small delay between chunks to prevent overwhelming the WebSocket
+      if (i + PASTE_CHUNK_SIZE < text.length) {
+        await new Promise((resolve) => setTimeout(resolve, PASTE_CHUNK_DELAY_MS));
+      }
+    }
+  }, []);
+
+  // Handle sticky modifier toggle and keep ref in sync
+  const handleStickyModifierChange = useCallback((modifier: StickyModifier) => {
+    setStickyModifier(modifier);
+    stickyModifierRef.current = modifier;
+  }, []);
+
+  // Send raw input to terminal via WebSocket (used by mobile shortcuts bar)
+  const sendTerminalInput = useCallback((data: string) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'input', data }));
+    }
+  }, []);
+
+  // Send a command to the terminal (types the command and presses Enter).
+  // Uses isWindowsShellRef.current to pick the correct line ending:
+  // Windows shells (PowerShell, cmd) expect '\r\n'; Unix/macOS shells expect '\n'.
+  // isWindowsShellRef is set in ws.onmessage when the 'connected' message arrives.
+  const sendCommand = useCallback((command: string) => {
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      const lineEnding = isWindowsShellRef.current ? '\r\n' : '\n';
+      wsRef.current.send(JSON.stringify({ type: 'input', data: command + lineEnding }));
+    }
+  }, []);
+
+  // Paste from clipboard
+  const pasteFromClipboard = useCallback(async () => {
+    const terminal = xtermRef.current;
+    if (!terminal || !wsRef.current) return;
+
+    try {
+      const text = await readFromClipboard();
+      if (!text) {
+        toast.error('Nothing to paste', {
+          description: 'Clipboard is empty',
+        });
+        return;
+      }
+
+      if (wsRef.current.readyState !== WebSocket.OPEN) {
+        toast.error('Terminal not connected');
+        return;
+      }
+
+      // Warn for large pastes
+      if (text.length >= LARGE_PASTE_WARNING_THRESHOLD) {
+        const sizeMB = (text.length / (1024 * 1024)).toFixed(1);
+        toast.warning(`Large paste (${sizeMB}MB)`, {
+          description: 'Sending in chunks, this may take a moment...',
+          duration: 3000,
+        });
+      }
+
+      await sendTextInChunks(text);
+    } catch (err) {
+      logger.error('Paste failed:', err);
+      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+      toast.error('Paste failed', {
+        description: errorMessage.includes('permission')
+          ? 'Clipboard permission denied'
+          : errorMessage.includes('not supported')
+            ? errorMessage
+            : 'Could not read from clipboard',
+      });
+    }
+  }, [sendTextInChunks]);
+  pasteFromClipboardRef.current = pasteFromClipboard;
+
+  // Select all terminal content
+  const selectAll = useCallback(() => {
+    xtermRef.current?.selectAll();
+  }, []);
+
+  // Extract terminal buffer text for mobile selection mode overlay
+  const getTerminalBufferText = useCallback((): string => {
+    const terminal = xtermRef.current;
+    if (!terminal) return '';
+
+    const buffer = terminal.buffer.active;
+    const lines: string[] = [];
+
+    // Cap the number of lines read to MAX_OVERLAY_LINES to avoid blowing up the DOM on mobile
+    const startIndex = Math.max(0, buffer.length - MAX_OVERLAY_LINES);
+    for (let i = startIndex; i < buffer.length; i++) {
+      const line = buffer.getLine(i);
+      if (line) {
+        lines.push(line.translateToString(true));
+      }
+    }
+
+    // Trim trailing empty lines but keep internal structure
+    while (lines.length > 0 && lines[lines.length - 1].trim() === '') {
+      lines.pop();
+    }
+
+    return lines.join('\n');
+  }, []);
+
+  // Toggle mobile text selection mode
+  const toggleSelectMode = useCallback(() => {
+    if (isSelectMode) {
+      setIsSelectMode(false);
+      setSelectModeText('');
+    } else {
+      const text = getTerminalBufferText();
+      // Strip ANSI escape codes for clean display
+      const cleanText = stripAnsi(text);
+      setSelectModeText(cleanText);
+      setIsSelectMode(true);
+    }
+  }, [isSelectMode, getTerminalBufferText]);
+
+  // Clear terminal
+  const clearTerminal = useCallback(() => {
+    xtermRef.current?.clear();
+  }, []);
+
+  // Get theme colors for search highlighting
+  const terminalTheme = getTerminalTheme(effectiveTheme);
+  const searchOptions = useMemo(
+    () => ({
+      caseSensitive: false,
+      regex: false,
+      decorations: {
+        matchBackground: terminalTheme.searchMatchBackground,
+        matchBorder: terminalTheme.searchMatchBorder,
+        matchOverviewRuler: terminalTheme.searchMatchBorder,
+        activeMatchBackground: terminalTheme.searchActiveMatchBackground,
+        activeMatchBorder: terminalTheme.searchActiveMatchBorder,
+        activeMatchColorOverviewRuler: terminalTheme.searchActiveMatchBorder,
+      },
+    }),
+    [terminalTheme]
+  );
+
+  // Search functions
+  const searchNext = useCallback(() => {
+    if (searchAddonRef.current && searchQuery) {
+      searchAddonRef.current.findNext(searchQuery, searchOptions);
+    }
+  }, [searchQuery, searchOptions]);
+
+  const searchPrevious = useCallback(() => {
+    if (searchAddonRef.current && searchQuery) {
+      searchAddonRef.current.findPrevious(searchQuery, searchOptions);
+    }
+  }, [searchQuery, searchOptions]);
+
+  const closeSearch = useCallback(() => {
+    setShowSearch(false);
+    showSearchRef.current = false;
+    setSearchQuery('');
+    searchAddonRef.current?.clearDecorations();
+    xtermRef.current?.focus();
+  }, []);
+
+  // Handle pane navigation keyboard shortcuts at container level (capture phase)
+  // This ensures we intercept before xterm can process the event
+  const handleContainerKeyDownCapture = useCallback(
+    (event: React.KeyboardEvent) => {
+      // Ctrl+Alt+Arrow / Cmd+Alt+Arrow - Navigate between panes directionally
+      if ((event.ctrlKey || event.metaKey) && event.altKey && !event.shiftKey) {
+        const code = event.nativeEvent.code;
+        if (code === 'ArrowRight') {
+          event.preventDefault();
+          event.stopPropagation();
+          onNavigateRight?.();
+        } else if (code === 'ArrowLeft') {
+          event.preventDefault();
+          event.stopPropagation();
+          onNavigateLeft?.();
+        } else if (code === 'ArrowDown') {
+          event.preventDefault();
+          event.stopPropagation();
+          onNavigateDown?.();
+        } else if (code === 'ArrowUp') {
+          event.preventDefault();
+          event.stopPropagation();
+          onNavigateUp?.();
+        }
+      }
+    },
+    [onNavigateUp, onNavigateDown, onNavigateLeft, onNavigateRight]
+  );
+
+  // Scroll to bottom of terminal
+  const scrollToBottom = useCallback(() => {
+    if (xtermRef.current) {
+      xtermRef.current.scrollToBottom();
+      setIsAtBottom(true);
+    }
+  }, []);
+
+  // Close context menu
+  const closeContextMenu = useCallback(() => {
+    setContextMenu(null);
+  }, []);
+
+  // Handle context menu action
+  const handleContextMenuAction = useCallback(
+    async (action: 'copy' | 'paste' | 'selectAll' | 'clear') => {
+      closeContextMenu();
+      switch (action) {
+        case 'copy':
+          await copySelection();
+          break;
+        case 'paste':
+          await pasteFromClipboard();
+          break;
+        case 'selectAll':
+          selectAll();
+          break;
+        case 'clear':
+          clearTerminal();
+          break;
+      }
+      xtermRef.current?.focus();
+    },
+    [closeContextMenu, copySelection, pasteFromClipboard, selectAll, clearTerminal]
+  );
+
+  const serverUrl = import.meta.env.VITE_SERVER_URL || getServerUrlSync();
+  const wsUrl = serverUrl.replace(/^http/, 'ws');
+
+  // Fetch a short-lived WebSocket token for secure authentication
+  const fetchWsToken = useCallback(async (): Promise<string | null> => {
+    try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      };
+
+      const sessionToken = getSessionToken();
+      if (sessionToken) {
+        headers['X-Session-Token'] = sessionToken;
+      }
+
+      const response = await fetch(`${serverUrl}/api/auth/token`, {
+        headers,
+        credentials: 'include',
+        cache: NO_STORE_CACHE_MODE,
+      });
+
+      if (!response.ok) {
+        logger.warn('Failed to fetch wsToken:', response.status);
+        return null;
+      }
+
+      const data = await response.json();
+      if (data.success && data.token) {
+        return data.token;
+      }
+
+      return null;
+    } catch (error) {
+      logger.error('Error fetching wsToken:', error);
+      return null;
+    }
+  }, [serverUrl]);
+
+  // Draggable - only the drag handle triggers drag
+  const {
+    attributes: dragAttributes,
+    listeners: dragListeners,
+    setNodeRef: setDragRef,
+  } = useDraggable({
+    id: sessionId,
+  });
+
+  // Droppable - the entire panel is a drop target
+  const { setNodeRef: setDropRef, isOver } = useDroppable({
+    id: sessionId,
+  });
+
+  // Initialize terminal - dynamically import xterm to avoid SSR issues
+  useEffect(() => {
+    if (!terminalRef.current) return;
+
+    let mounted = true;
+
+    const initTerminal = async () => {
+      // Dynamically import xterm modules
+      const [{ Terminal }, { FitAddon }, { WebglAddon }, { SearchAddon }, { WebLinksAddon }] =
+        await Promise.all([
+          import('@xterm/xterm'),
+          import('@xterm/addon-fit'),
+          import('@xterm/addon-webgl'),
+          import('@xterm/addon-search'),
+          import('@xterm/addon-web-links'),
+        ]);
+
+      // Also import CSS
+      await import('@xterm/xterm/css/xterm.css');
+
+      if (!mounted || !terminalRef.current) return;
+
+      // Get terminal theme matching the app theme
+      const baseTheme = getTerminalTheme(themeRef.current);
+
+      // Get settings from store (read at initialization time)
+      const terminalSettings = useAppStore.getState().terminalState;
+      const screenReaderEnabled = terminalSettings.screenReaderMode;
+      const terminalFontFamily = getTerminalFontFamily(terminalSettings.fontFamily);
+      const terminalScrollback = terminalSettings.scrollbackLines || 5000;
+      const terminalLineHeight = terminalSettings.lineHeight || 1.0;
+      const customBgColor = terminalSettings.customBackgroundColor;
+      const customFgColor = terminalSettings.customForegroundColor;
+
+      // Apply custom colors if set
+      const terminalTheme =
+        customBgColor || customFgColor
+          ? {
+              ...baseTheme,
+              ...(customBgColor && { background: customBgColor }),
+              ...(customFgColor && { foreground: customFgColor }),
+            }
+          : baseTheme;
+
+      // Create terminal instance with the current global font size and theme
+      const terminal = new Terminal({
+        cursorBlink: true,
+        cursorStyle: 'block',
+        fontSize: fontSizeRef.current,
+        fontFamily: terminalFontFamily,
+        lineHeight: terminalLineHeight,
+        letterSpacing: 0,
+        theme: terminalTheme,
+        allowProposedApi: true,
+        screenReaderMode: screenReaderEnabled,
+        scrollback: terminalScrollback,
+      });
+
+      // Create fit addon
+      const fitAddon = new FitAddon();
+      terminal.loadAddon(fitAddon);
+
+      // Create search addon
+      const searchAddon = new SearchAddon();
+      terminal.loadAddon(searchAddon);
+      searchAddonRef.current = searchAddon;
+
+      // Create web links addon for clickable URLs with custom handler for Electron
+      const webLinksAddon = new WebLinksAddon((_event: MouseEvent, uri: string) => {
+        // Use Electron API to open external links in system browser
+        const api = getElectronAPI();
+        if (api?.openExternalLink) {
+          api.openExternalLink(uri).catch((error) => {
+            logger.error('Failed to open URL:', error);
+            // Fallback to window.open if Electron API fails
+            window.open(uri, '_blank', 'noopener,noreferrer');
+          });
+        } else {
+          // Web fallback
+          window.open(uri, '_blank', 'noopener,noreferrer');
+        }
+      });
+      terminal.loadAddon(webLinksAddon);
+
+      // Open terminal
+      terminal.open(terminalRef.current);
+
+      // Register custom link provider for file paths
+      // Detects patterns like /path/to/file.ts:123:45 or ./src/file.js:10
+      const filePathLinkProvider = {
+        provideLinks: (
+          lineNumber: number,
+          callback: (
+            links:
+              | {
+                  range: { start: { x: number; y: number }; end: { x: number; y: number } };
+                  text: string;
+                  activate: (event: MouseEvent, text: string) => void;
+                }[]
+              | undefined
+          ) => void
+        ) => {
+          const line = terminal.buffer.active.getLine(lineNumber - 1);
+          if (!line) {
+            callback(undefined);
+            return;
+          }
+
+          const lineText = line.translateToString(true);
+          const links: {
+            range: { start: { x: number; y: number }; end: { x: number; y: number } };
+            text: string;
+            activate: (event: MouseEvent, text: string) => void;
+          }[] = [];
+
+          // File path patterns:
+          // 1. Absolute Unix: /path/to/file.ext:line:col or /path/to/file.ext:line
+          // 2. Home directory: ~/path/to/file.ext:line:col
+          // 3. Absolute Windows: C:\path\to\file.ext:line:col (less common in terminal output)
+          // 4. Relative: ./path/file.ext:line or src/file.ext:line
+          // Common formats from compilers/linters:
+          // - ESLint: /path/file.ts:10:5
+          // - TypeScript: src/file.ts(10,5)
+          // - Go: /path/file.go:10:5
+          const filePathRegex =
+            /(?:^|[\s'"(])(((?:\/|\.\/|\.\.\/|~\/)[^\s:'"()]+|[a-zA-Z]:\\[^\s:'"()]+|[a-zA-Z0-9_-]+\/[^\s:'"()]+)(?:[:(\s](\d+)(?:[:,)](\d+))?)?)/g;
+
+          let match;
+          while ((match = filePathRegex.exec(lineText)) !== null) {
+            const fullMatch = match[1];
+            const filePath = match[2];
+
+            // Skip common false positives (URLs, etc.)
+            if (
+              filePath.startsWith('http://') ||
+              filePath.startsWith('https://') ||
+              filePath.startsWith('ws://')
+            ) {
+              continue;
+            }
+
+            // Calculate the start position (1-indexed for xterm)
+            const startX = match.index + (match[0].length - match[1].length) + 1;
+            const endX = startX + fullMatch.length;
+
+            links.push({
+              range: {
+                start: { x: startX, y: lineNumber },
+                end: { x: endX, y: lineNumber },
+              },
+              text: fullMatch,
+              activate: async (event: MouseEvent, text: string) => {
+                // Parse the path and line/column from the matched text
+                const pathMatch = text.match(/^([^\s:()]+)(?:[:(\s](\d+)(?:[:,)](\d+))?)?/);
+                if (!pathMatch) return;
+
+                const clickedPath = pathMatch[1];
+                const clickedLine = pathMatch[2] ? parseInt(pathMatch[2], 10) : undefined;
+                const clickedCol = pathMatch[3] ? parseInt(pathMatch[3], 10) : undefined;
+
+                // Resolve paths to absolute paths
+                let absolutePath = clickedPath;
+                const api = getElectronAPI();
+
+                if (clickedPath.startsWith('~/')) {
+                  // Home directory path - expand ~ to user's home directory
+                  try {
+                    const homePath = await api.getPath?.('home');
+                    if (homePath) {
+                      absolutePath = homePath + clickedPath.slice(1); // Replace ~ with home path
+                    }
+                  } catch {
+                    // If we can't get home path, just use the path as-is
+                    logger.warn('Could not resolve home directory path');
+                  }
+                } else if (!clickedPath.startsWith('/') && !clickedPath.match(/^[a-zA-Z]:\\/)) {
+                  // Relative path - resolve against project path
+                  const projectPath = useAppStore.getState().currentProject?.path;
+                  if (projectPath) {
+                    absolutePath = `${projectPath}/${clickedPath}`.replace(/\/+/g, '/');
+                  } else {
+                    toast.warning('Cannot open relative path', {
+                      description:
+                        'No project selected. Open a project to click relative file paths.',
+                    });
+                    return;
+                  }
+                }
+
+                // Open in editor using VS Code URL scheme
+                // Works in both web (via anchor click) and Electron (via shell.openExternal)
+                try {
+                  const result = await api.openInEditor?.(absolutePath, clickedLine, clickedCol);
+                  if (result && !result.success) {
+                    toast.error('Failed to open in editor', { description: result.error });
+                  }
+                } catch (error) {
+                  logger.error('Failed to open file:', error);
+                  toast.error('Failed to open file', {
+                    description: error instanceof Error ? error.message : 'Unknown error',
+                  });
+                }
+              },
+            });
+          }
+
+          callback(links.length > 0 ? links : undefined);
+        },
+      };
+
+      linkProviderRef.current = terminal.registerLinkProvider(filePathLinkProvider);
+
+      // Try to load WebGL addon for better performance
+      try {
+        const webglAddon = new WebglAddon();
+        webglAddon.onContextLoss(() => {
+          webglAddon.dispose();
+        });
+        terminal.loadAddon(webglAddon);
+      } catch {
+        logger.warn('WebGL addon not available, falling back to canvas');
+      }
+
+      // Fit terminal to container - wait for stable dimensions
+      // Use initial delay then multiple RAFs to let react-resizable-panels finish layout
+      let fitAttempts = 0;
+      const MAX_FIT_ATTEMPTS = 10;
+      let lastWidth = 0;
+      let lastHeight = 0;
+
+      const attemptFit = () => {
+        if (!fitAddon || !terminalRef.current || fitAttempts >= MAX_FIT_ATTEMPTS) return;
+
+        const rect = terminalRef.current.getBoundingClientRect();
+        fitAttempts++;
+
+        // Check if dimensions are stable (same as last attempt) and valid
+        if (
+          rect.width === lastWidth &&
+          rect.height === lastHeight &&
+          rect.width > 0 &&
+          rect.height > 0
+        ) {
+          try {
+            fitAddon.fit();
+          } catch (err) {
+            logger.error('Initial fit error:', err);
+          }
+          return;
+        }
+
+        // Dimensions still changing or too small, try again
+        lastWidth = rect.width;
+        lastHeight = rect.height;
+        requestAnimationFrame(attemptFit);
+      };
+
+      // Initial delay allows complex layouts to settle before attempting fit
+      setTimeout(() => requestAnimationFrame(attemptFit), 50);
+
+      xtermRef.current = terminal;
+      fitAddonRef.current = fitAddon;
+      setIsTerminalReady(true);
+
+      // Handle focus - use ref to avoid re-running effect
+      // Store disposer to prevent memory leak
+      focusHandlerRef.current = terminal.onData(() => {
+        onFocusRef.current();
+      });
+
+      // Custom key handler to intercept terminal shortcuts
+      // Return false to prevent xterm from handling the key
+      const SHORTCUT_COOLDOWN_MS = 300; // Prevent rapid firing
+
+      terminal.attachCustomKeyEventHandler((event) => {
+        // Only intercept keydown events
+        if (event.type !== 'keydown') return true;
+
+        // Use event.code for keyboard-layout-independent key detection
+        const code = event.code;
+
+        // Ctrl+Alt+Arrow / Cmd+Alt+Arrow - Navigate between panes directionally
+        // Handle this FIRST before any other checks to prevent xterm from capturing it
+        // Use explicit check for both Ctrl and Meta to work on all platforms
+        if ((event.ctrlKey || event.metaKey) && event.altKey && !event.shiftKey) {
+          if (code === 'ArrowRight') {
+            event.preventDefault();
+            event.stopPropagation();
+            onNavigateRightRef.current?.();
+            return false;
+          } else if (code === 'ArrowLeft') {
+            event.preventDefault();
+            event.stopPropagation();
+            onNavigateLeftRef.current?.();
+            return false;
+          } else if (code === 'ArrowDown') {
+            event.preventDefault();
+            event.stopPropagation();
+            onNavigateDownRef.current?.();
+            return false;
+          } else if (code === 'ArrowUp') {
+            event.preventDefault();
+            event.stopPropagation();
+            onNavigateUpRef.current?.();
+            return false;
+          }
+        }
+
+        // Check cooldown to prevent rapid terminal creation
+        const now = Date.now();
+        const canTrigger = now - lastShortcutTimeRef.current > SHORTCUT_COOLDOWN_MS;
+
+        // Get current shortcuts from ref (allows customization)
+        const shortcuts = shortcutsRef.current;
+
+        // Split right (default: Alt+D)
+        if (matchesShortcutWithCode(event, shortcuts.splitTerminalRight)) {
+          event.preventDefault();
+          if (canTrigger) {
+            lastShortcutTimeRef.current = now;
+            onSplitHorizontalRef.current();
+          }
+          return false;
+        }
+
+        // Split down (default: Alt+S)
+        if (matchesShortcutWithCode(event, shortcuts.splitTerminalDown)) {
+          event.preventDefault();
+          if (canTrigger) {
+            lastShortcutTimeRef.current = now;
+            onSplitVerticalRef.current();
+          }
+          return false;
+        }
+
+        // Close terminal (default: Alt+W)
+        if (matchesShortcutWithCode(event, shortcuts.closeTerminal)) {
+          event.preventDefault();
+          if (canTrigger) {
+            lastShortcutTimeRef.current = now;
+            onCloseRef.current();
+          }
+          return false;
+        }
+
+        // New terminal tab (default: Alt+T)
+        if (matchesShortcutWithCode(event, shortcuts.newTerminalTab)) {
+          event.preventDefault();
+          if (canTrigger && onNewTabRef.current) {
+            lastShortcutTimeRef.current = now;
+            onNewTabRef.current();
+          }
+          return false;
+        }
+
+        const modKey = isMacRef.current ? event.metaKey : event.ctrlKey;
+        const otherModKey = isMacRef.current ? event.ctrlKey : event.metaKey;
+
+        // Ctrl+Shift+C / Cmd+Shift+C - Always copy (Linux terminal convention)
+        // Don't preventDefault() — allow the native browser copy to work alongside our custom copy
+        if (modKey && !otherModKey && event.shiftKey && !event.altKey && code === 'KeyC') {
+          copySelectionRef.current();
+          return false;
+        }
+
+        // Ctrl+C / Cmd+C - Copy if text is selected, otherwise send SIGINT
+        // Don't preventDefault() when copying — allow the native browser copy to work alongside our custom copy
+        if (modKey && !otherModKey && !event.shiftKey && !event.altKey && code === 'KeyC') {
+          const hasSelection = terminal.hasSelection();
+          if (hasSelection) {
+            copySelectionRef.current();
+            terminal.clearSelection();
+            return false;
+          }
+          // No selection - let xterm handle it (sends SIGINT)
+          return true;
+        }
+
+        // Ctrl+V / Cmd+V or Ctrl+Shift+V / Cmd+Shift+V - Paste
+        // Don't preventDefault() — allow the native browser paste to work.
+        // Return false to prevent xterm from sending \x16 (literal next),
+        // but the browser's native paste event will still fire and xterm will
+        // receive the pasted text through its onData handler.
+        if (modKey && !otherModKey && !event.altKey && code === 'KeyV') {
+          return false;
+        }
+
+        // Ctrl+A / Cmd+A - Select all
+        if (modKey && !otherModKey && !event.shiftKey && !event.altKey && code === 'KeyA') {
+          event.preventDefault();
+          terminal.selectAll();
+          return false;
+        }
+
+        // Ctrl+Shift+F / Cmd+Shift+F - Toggle search
+        if (modKey && !otherModKey && event.shiftKey && !event.altKey && code === 'KeyF') {
+          event.preventDefault();
+          showSearchRef.current = !showSearchRef.current;
+          setShowSearch(showSearchRef.current);
+          return false;
+        }
+
+        // Let xterm handle all other keys
+        return true;
+      });
+    };
+
+    initTerminal();
+
+    // Cleanup
+    return () => {
+      mounted = false;
+
+      // Dispose focus handler to prevent memory leak
+      if (focusHandlerRef.current) {
+        focusHandlerRef.current.dispose();
+        focusHandlerRef.current = null;
+      }
+
+      // Dispose link provider to prevent memory leak
+      if (linkProviderRef.current) {
+        linkProviderRef.current.dispose();
+        linkProviderRef.current = null;
+      }
+
+      // Clear resize debounce timer
+      if (resizeDebounceRef.current) {
+        clearTimeout(resizeDebounceRef.current);
+        resizeDebounceRef.current = null;
+      }
+
+      // Clear long-press timer
+      if (longPressTimerRef.current) {
+        clearTimeout(longPressTimerRef.current);
+        longPressTimerRef.current = null;
+      }
+
+      // Clear search decorations before disposing to prevent visual artifacts
+      if (searchAddonRef.current) {
+        searchAddonRef.current.clearDecorations();
+        searchAddonRef.current = null;
+      }
+
+      if (xtermRef.current) {
+        xtermRef.current.dispose();
+        xtermRef.current = null;
+      }
+      fitAddonRef.current = null;
+      setIsTerminalReady(false);
+    };
+  }, []); // No dependencies - only run once on mount
+
+  // Connect WebSocket - wait for terminal to be ready
+  useEffect(() => {
+    if (!isTerminalReady || !sessionId) return;
+    const terminal = xtermRef.current;
+    if (!terminal) return;
+
+    const connect = async () => {
+      // Build WebSocket URL with auth params
+      let url = `${wsUrl}/api/terminal/ws?sessionId=${sessionId}`;
+
+      // Add API key for Electron mode auth
+      const apiKey = getApiKey();
+      if (apiKey) {
+        url += `&apiKey=${encodeURIComponent(apiKey)}`;
+      } else {
+        // In web mode, fetch a short-lived wsToken for secure authentication
+        const wsToken = await fetchWsToken();
+        if (wsToken) {
+          url += `&wsToken=${encodeURIComponent(wsToken)}`;
+        }
+        // Cookies are also sent automatically with same-origin WebSocket
+      }
+
+      // Add terminal password token if required
+      if (authToken) {
+        url += `&token=${encodeURIComponent(authToken)}`;
+      }
+
+      const ws = new WebSocket(url);
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        logger.info(`WebSocket connected for session ${sessionId}`);
+
+        setConnectionStatus('connected');
+        reconnectAttemptsRef.current = 0;
+
+        // Start heartbeat to keep connection alive (prevents proxy/load balancer timeouts)
+        if (heartbeatIntervalRef.current) {
+          clearInterval(heartbeatIntervalRef.current);
+        }
+        heartbeatIntervalRef.current = setInterval(() => {
+          if (ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: 'ping' }));
+          }
+        }, 30000); // Ping every 30 seconds
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+          switch (msg.type) {
+            case 'data':
+              terminal.write(msg.data);
+              break;
+            case 'scrollback':
+              // Only process scrollback if there's actual data
+              // Don't clear if empty - prevents blank terminal issue
+              if (msg.data && msg.data.length > 0) {
+                // Clear any stale search decorations before restoring content
+                searchAddonRef.current?.clearDecorations();
+                // Use reset() which is more reliable than clear() or escape sequences
+                terminal.reset();
+                terminal.write(msg.data);
+                // Mark as already initialized - don't run initial command for restored sessions
+                hasRunInitialCommandRef.current = true;
+              }
+              break;
+            case 'connected': {
+              logger.info(`Session connected: ${msg.shell} in ${msg.cwd}`);
+              // Detect shell type from path
+              const shellPath = (msg.shell || '').toLowerCase();
+              // Windows shells use backslash paths and include powershell/pwsh/cmd
+              const isWindowsShell =
+                shellPath.includes('\\') ||
+                shellPath.includes('powershell') ||
+                shellPath.includes('pwsh') ||
+                shellPath.includes('cmd.exe');
+              // Keep the component-level ref in sync so sendCommand and
+              // runCommandOnConnect both use the correct line ending ('\r\n' vs '\n').
+              isWindowsShellRef.current = isWindowsShell;
+              const isPowerShell = shellPath.includes('powershell') || shellPath.includes('pwsh');
+
+              if (msg.shell) {
+                // Extract shell name from path (e.g., "/bin/bash" -> "bash", "C:\...\powershell.exe" -> "powershell.exe")
+                const name = msg.shell.split(/[/\\]/).pop() || msg.shell;
+                setShellName(name);
+              }
+              // Run initial command if specified and not already run
+              // Only run for new terminals (no scrollback received)
+              const initialCommand = runCommandOnConnectRef.current;
+              if (
+                initialCommand &&
+                !hasRunInitialCommandRef.current &&
+                ws.readyState === WebSocket.OPEN
+              ) {
+                hasRunInitialCommandRef.current = true;
+                // Use appropriate line ending for the shell type
+                // Windows shells (PowerShell, cmd) expect \r\n, Unix shells expect \n
+                const lineEnding = isWindowsShell ? '\r\n' : '\n';
+                // PowerShell takes longer to initialize (profile loading, etc.)
+                // Use 500ms for PowerShell, 100ms for other shells
+                const delay = isPowerShell ? 500 : 100;
+
+                setTimeout(() => {
+                  if (ws.readyState === WebSocket.OPEN) {
+                    ws.send(JSON.stringify({ type: 'input', data: initialCommand + lineEnding }));
+                    onCommandRanRef.current?.();
+                  }
+                }, delay);
+              }
+              break;
+            }
+            case 'exit':
+              terminal.write(`\r\n\x1b[33m[Process exited with code ${msg.exitCode}]\x1b[0m\r\n`);
+              setProcessExitCode(msg.exitCode);
+              break;
+            case 'pong':
+              // Heartbeat response
+              break;
+          }
+        } catch (err) {
+          logger.error('Message parse error:', err);
+        }
+      };
+
+      ws.onclose = (event) => {
+        logger.info(`WebSocket closed for session ${sessionId}: ${event.code} ${event.reason}`);
+        wsRef.current = null;
+
+        // Clear heartbeat interval
+        if (heartbeatIntervalRef.current) {
+          clearInterval(heartbeatIntervalRef.current);
+          heartbeatIntervalRef.current = null;
+        }
+
+        if (event.code === 4001) {
+          setConnectionStatus('auth_failed');
+          toast.error('Terminal authentication expired', {
+            description: 'Please unlock the terminal again to reconnect.',
+            duration: 5000,
+          });
+          return;
+        }
+
+        // Don't reconnect if closed normally
+        if (event.code === 1000 || event.code === 4003) {
+          setConnectionStatus('disconnected');
+          return;
+        }
+
+        if (event.code === 4004) {
+          setConnectionStatus('disconnected');
+          // Notify parent that this session is no longer valid on the server
+          // This allows automatic cleanup of stale sessions (e.g., after server restart)
+          if (onSessionInvalidRef.current) {
+            onSessionInvalidRef.current();
+            toast.info('Terminal session expired', {
+              description:
+                'The session was automatically removed. Create a new terminal to continue.',
+              duration: 5000,
+            });
+          } else {
+            toast.error('Terminal session not found', {
+              description: 'The session may have expired. Please create a new terminal.',
+              duration: 5000,
+            });
+          }
+          return;
+        }
+
+        reconnectAttemptsRef.current++;
+
+        if (reconnectAttemptsRef.current > MAX_RECONNECT_ATTEMPTS) {
+          setConnectionStatus('disconnected');
+          toast.error('Terminal disconnected', {
+            description: 'Maximum reconnection attempts reached. Click to retry.',
+            action: {
+              label: 'Retry',
+              onClick: () => {
+                reconnectAttemptsRef.current = 0;
+                setConnectionStatus('reconnecting');
+                connect();
+              },
+            },
+            duration: 10000,
+          });
+          return;
+        }
+
+        // Exponential backoff: 1s, 2s, 4s, 8s, 16s
+        const delay = INITIAL_RECONNECT_DELAY * Math.pow(2, reconnectAttemptsRef.current - 1);
+        setConnectionStatus('reconnecting');
+
+        // Attempt reconnect after exponential delay
+        reconnectTimeoutRef.current = setTimeout(() => {
+          if (xtermRef.current) {
+            logger.info(
+              `Attempting reconnect for session ${sessionId} (attempt ${reconnectAttemptsRef.current}/${MAX_RECONNECT_ATTEMPTS})`
+            );
+            connect();
+          }
+        }, delay);
+      };
+
+      ws.onerror = (error) => {
+        logger.error(`WebSocket error for session ${sessionId}:`, error);
+      };
+    };
+
+    connect();
+
+    // Handle terminal input - apply sticky modifier if active
+    const dataHandler = terminal.onData((data) => {
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        const modifier = stickyModifierRef.current;
+        if (modifier) {
+          const modified = applyStickyModifier(data, modifier);
+          if (modified !== null) {
+            wsRef.current.send(JSON.stringify({ type: 'input', data: modified }));
+          } else {
+            // Could not apply modifier (e.g. non-ASCII input), send as-is
+            wsRef.current.send(JSON.stringify({ type: 'input', data }));
+          }
+          // Clear sticky modifier after one key press (one-shot behavior)
+          stickyModifierRef.current = null;
+          setStickyModifier(null);
+        } else {
+          wsRef.current.send(JSON.stringify({ type: 'input', data }));
+        }
+      }
+    });
+
+    // Cleanup
+    return () => {
+      dataHandler.dispose();
+      if (heartbeatIntervalRef.current) {
+        clearInterval(heartbeatIntervalRef.current);
+        heartbeatIntervalRef.current = null;
+      }
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      if (wsRef.current) {
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+    };
+  }, [sessionId, authToken, wsUrl, isTerminalReady, fetchWsToken]);
+
+  // Handle resize with debouncing
+  const handleResize = useCallback(() => {
+    // Clear any pending resize
+    if (resizeDebounceRef.current) {
+      clearTimeout(resizeDebounceRef.current);
+    }
+
+    // Debounce resize operations to prevent race conditions
+    resizeDebounceRef.current = setTimeout(() => {
+      if (!fitAddonRef.current || !xtermRef.current || !terminalRef.current) return;
+
+      const container = terminalRef.current;
+      const rect = container.getBoundingClientRect();
+
+      // Only skip if container has no size at all
+      if (rect.width <= 0 || rect.height <= 0) {
+        return;
+      }
+
+      try {
+        fitAddonRef.current.fit();
+        const { cols, rows } = xtermRef.current;
+
+        // Send resize to server
+        if (wsRef.current?.readyState === WebSocket.OPEN) {
+          wsRef.current.send(JSON.stringify({ type: 'resize', cols, rows }));
+        }
+      } catch (err) {
+        logger.error('Resize error:', err);
+      }
+    }, RESIZE_DEBOUNCE_MS);
+  }, []);
+
+  // Resize observer
+  useEffect(() => {
+    const container = terminalRef.current;
+    if (!container) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      handleResize();
+    });
+
+    resizeObserver.observe(container);
+
+    // Also handle window resize
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [handleResize]);
+
+  useEffect(() => {
+    if (xtermRef.current && isTerminalReady) {
+      xtermRef.current.options.fontSize = fontSize;
+      fitAddonRef.current?.fit();
+    }
+  }, [fontSize, isTerminalReady]);
+
+  useEffect(() => {
+    if (xtermRef.current && isTerminalReady) {
+      xtermRef.current.options.fontFamily = getTerminalFontFamily(fontFamily);
+      fitAddonRef.current?.fit();
+    }
+  }, [fontFamily, isTerminalReady]);
+
+  useEffect(() => {
+    if (xtermRef.current && isTerminalReady) {
+      xtermRef.current.options.lineHeight = lineHeight;
+      fitAddonRef.current?.fit();
+    }
+  }, [lineHeight, isTerminalReady]);
+
+  // Focus terminal when becoming active or when terminal becomes ready
+  useEffect(() => {
+    if (isActive && isTerminalReady && xtermRef.current && !showSearch) {
+      xtermRef.current.focus();
+    }
+  }, [isActive, isTerminalReady, showSearch]);
+
+  // Focus search input when search bar opens
+  useEffect(() => {
+    if (showSearch && searchInputRef.current) {
+      searchInputRef.current.focus();
+      searchInputRef.current.select();
+    }
+  }, [showSearch]);
+
+  // Monitor scroll position to show/hide "Jump to bottom" button
+  useEffect(() => {
+    if (!isTerminalReady || !terminalRef.current) return;
+
+    // xterm creates a viewport element with class .xterm-viewport
+    const viewport = terminalRef.current.querySelector('.xterm-viewport') as HTMLElement | null;
+    if (!viewport) return;
+
+    const checkScrollPosition = () => {
+      // Check if scrolled to bottom (with small tolerance for rounding)
+      const scrollTop = viewport.scrollTop;
+      const scrollHeight = viewport.scrollHeight;
+      const clientHeight = viewport.clientHeight;
+      const isBottom = scrollHeight - scrollTop - clientHeight <= 5;
+      setIsAtBottom(isBottom);
+    };
+
+    // Initial check
+    checkScrollPosition();
+
+    // Listen for scroll events
+    viewport.addEventListener('scroll', checkScrollPosition, { passive: true });
+
+    return () => {
+      viewport.removeEventListener('scroll', checkScrollPosition);
+    };
+  }, [isTerminalReady]);
+
+  // Update terminal font size when it changes
+  useEffect(() => {
+    if (xtermRef.current && isTerminalReady) {
+      xtermRef.current.options.fontSize = fontSize;
+      // Refit after font size change
+      if (fitAddonRef.current && terminalRef.current) {
+        const rect = terminalRef.current.getBoundingClientRect();
+        // Only fit if container has any size
+        if (rect.width > 0 && rect.height > 0) {
+          fitAddonRef.current.fit();
+          // Notify server of new dimensions
+          const { cols, rows } = xtermRef.current;
+          if (wsRef.current?.readyState === WebSocket.OPEN) {
+            wsRef.current.send(JSON.stringify({ type: 'resize', cols, rows }));
+          }
+        }
+      }
+    }
+  }, [fontSize, isTerminalReady]);
+
+  // Update terminal theme when app theme or custom colors change (including system preference)
+  // We read directly from the store to ensure we have the latest values, avoiding potential
+  // stale closure issues with the useShallow subscription when the terminal first becomes ready.
+  // The dependency array includes the subscription values to trigger the effect when colors change,
+  // but we read from getState() inside to guarantee we always have the most current values.
+  useEffect(() => {
+    if (xtermRef.current && isTerminalReady) {
+      // Clear any search decorations first to prevent stale color artifacts
+      searchAddonRef.current?.clearDecorations();
+      const baseTheme = getTerminalTheme(resolvedTheme);
+
+      // Read colors directly from store to ensure we have the latest values.
+      // This fixes a race condition where the terminal might be created before
+      // settings are fully hydrated from the server. We prioritize store values
+      // over subscription values to avoid stale closures.
+      const storeState = useAppStore.getState().terminalState;
+      const customBgColor = storeState.customBackgroundColor;
+      const customFgColor = storeState.customForegroundColor;
+
+      const terminalTheme =
+        customBgColor || customFgColor
+          ? {
+              ...baseTheme,
+              ...(customBgColor && { background: customBgColor }),
+              ...(customFgColor && { foreground: customFgColor }),
+            }
+          : baseTheme;
+      xtermRef.current.options.theme = terminalTheme;
+    }
+    // Note: customBackgroundColor and customForegroundColor are in dependencies to trigger
+    // re-renders when colors change, but we read from getState() inside for actual values
+  }, [resolvedTheme, customBackgroundColor, customForegroundColor, isTerminalReady]);
+
+  // Handle keyboard shortcuts for zoom (Ctrl+Plus, Ctrl+Minus, Ctrl+0)
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Only handle if Ctrl (or Cmd on Mac) is pressed
+      if (!e.ctrlKey && !e.metaKey) return;
+
+      // Ctrl/Cmd + Plus (Equal key or NumpadAdd for international keyboard support)
+      if (e.code === 'Equal' || e.code === 'NumpadAdd') {
+        e.preventDefault();
+        e.stopPropagation();
+        zoomIn();
+        return;
+      }
+
+      // Ctrl/Cmd + Minus (Minus key or NumpadSubtract)
+      if (e.code === 'Minus' || e.code === 'NumpadSubtract') {
+        e.preventDefault();
+        e.stopPropagation();
+        zoomOut();
+        return;
+      }
+
+      // Ctrl/Cmd + 0 to reset (Digit0 or Numpad0)
+      if (e.code === 'Digit0' || e.code === 'Numpad0') {
+        e.preventDefault();
+        e.stopPropagation();
+        resetZoom();
+        return;
+      }
+    };
+
+    container.addEventListener('keydown', handleKeyDown);
+    return () => container.removeEventListener('keydown', handleKeyDown);
+  }, [zoomIn, zoomOut, resetZoom]);
+
+  // Handle mouse wheel zoom (Ctrl+Wheel)
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      // Only zoom if Ctrl (or Cmd on Mac) is pressed
+      if (!e.ctrlKey && !e.metaKey) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (e.deltaY < 0) {
+        // Scroll up = zoom in
+        zoomIn();
+      } else if (e.deltaY > 0) {
+        // Scroll down = zoom out
+        zoomOut();
+      }
+    };
+
+    // Use passive: false to allow preventDefault
+    container.addEventListener('wheel', handleWheel, { passive: false });
+    return () => container.removeEventListener('wheel', handleWheel);
+  }, [zoomIn, zoomOut]);
+
+  // Context menu actions for keyboard navigation
+  const menuActions = useMemo(() => ['copy', 'paste', 'selectAll', 'clear'] as const, []);
+
+  // Keep ref in sync with state for use in event handlers
+  useEffect(() => {
+    focusedMenuIndexRef.current = focusedMenuIndex;
+  }, [focusedMenuIndex]);
+
+  // Close context menu on click outside or scroll, handle keyboard navigation
+  useEffect(() => {
+    if (!contextMenu) return;
+
+    // Reset focus index and focus menu when opened
+    setFocusedMenuIndex(0);
+    focusedMenuIndexRef.current = 0;
+    requestAnimationFrame(() => {
+      const firstButton =
+        contextMenuRef.current?.querySelector<HTMLButtonElement>('[role="menuitem"]');
+      firstButton?.focus();
+    });
+
+    const handleClick = () => closeContextMenu();
+    const handleScroll = () => closeContextMenu();
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const updateFocusIndex = (newIndex: number) => {
+        focusedMenuIndexRef.current = newIndex;
+        setFocusedMenuIndex(newIndex);
+      };
+
+      switch (e.key) {
+        case 'Escape':
+          e.preventDefault();
+          e.stopPropagation();
+          closeContextMenu();
+          xtermRef.current?.focus();
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          e.stopPropagation();
+          updateFocusIndex((focusedMenuIndexRef.current + 1) % menuActions.length);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          e.stopPropagation();
+          updateFocusIndex(
+            (focusedMenuIndexRef.current - 1 + menuActions.length) % menuActions.length
+          );
+          break;
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          e.stopPropagation();
+          handleContextMenuAction(menuActions[focusedMenuIndexRef.current]);
+          break;
+        case 'Tab':
+          e.preventDefault();
+          e.stopPropagation();
+          closeContextMenu();
+          break;
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+    document.addEventListener('scroll', handleScroll, true);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('click', handleClick);
+      document.removeEventListener('scroll', handleScroll, true);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [contextMenu, closeContextMenu, handleContextMenuAction, menuActions]);
+
+  // Focus the correct menu item when navigation changes
+  useEffect(() => {
+    if (!contextMenu || !contextMenuRef.current) return;
+    const buttons = contextMenuRef.current.querySelectorAll<HTMLButtonElement>('[role="menuitem"]');
+    buttons[focusedMenuIndex]?.focus();
+  }, [focusedMenuIndex, contextMenu]);
+
+  // Reset select mode when viewport transitions away from shortcuts-bar viewports.
+  // The select-mode overlay is only rendered when (isSelectMode && showShortcutsBar), so if the
+  // viewport no longer shows the shortcuts bar while isSelectMode is true the overlay disappears but the
+  // state is left dirty with no UI to clear it. Resetting here keeps state consistent.
+  useEffect(() => {
+    if (!showShortcutsBar && isSelectMode) {
+      setIsSelectMode(false);
+      setSelectModeText('');
+    }
+  }, [showShortcutsBar, isSelectMode]);
+
+  // Handle right-click context menu with boundary checking
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Menu dimensions (approximate)
+    const menuWidth = 160;
+    const menuHeight = 152; // 4 items + separator + padding
+    const padding = 8;
+
+    // Calculate position with boundary checks
+    let x = e.clientX;
+    let y = e.clientY;
+
+    // Check right edge
+    if (x + menuWidth + padding > window.innerWidth) {
+      x = window.innerWidth - menuWidth - padding;
+    }
+
+    // Check bottom edge
+    if (y + menuHeight + padding > window.innerHeight) {
+      y = window.innerHeight - menuHeight - padding;
+    }
+
+    // Ensure not negative
+    x = Math.max(padding, x);
+    y = Math.max(padding, y);
+
+    setContextMenu({ x, y });
+  }, []);
+
+  // Long-press handlers for mobile context menu
+  // On mobile, there's no right-click, so we trigger the context menu on long-press (500ms hold)
+  const LONG_PRESS_DURATION = 500; // ms
+  const LONG_PRESS_MOVE_THRESHOLD = 10; // px - cancel if finger moves more than this
+
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      if (!isMobile) return;
+      const touch = e.touches[0];
+      if (!touch) return;
+
+      // Clear any existing timer before creating a new one to avoid orphaned timeouts
+      if (longPressTimerRef.current) {
+        clearTimeout(longPressTimerRef.current);
+        longPressTimerRef.current = null;
+      }
+
+      // Capture initial touch coordinates into an immutable local snapshot
+      const startPos = { x: touch.clientX, y: touch.clientY };
+      longPressTouchStartRef.current = startPos;
+
+      longPressTimerRef.current = setTimeout(() => {
+        // Use the locally captured startPos rather than re-reading the ref
+        // Menu dimensions (approximate)
+        const menuWidth = 160;
+        const menuHeight = 152;
+        const padding = 8;
+
+        let x = startPos.x;
+        let y = startPos.y;
+
+        // Boundary checks
+        if (x + menuWidth + padding > window.innerWidth) {
+          x = window.innerWidth - menuWidth - padding;
+        }
+        if (y + menuHeight + padding > window.innerHeight) {
+          y = window.innerHeight - menuHeight - padding;
+        }
+        x = Math.max(padding, x);
+        y = Math.max(padding, y);
+
+        setContextMenu({ x, y });
+        longPressTouchStartRef.current = null;
+      }, LONG_PRESS_DURATION);
+    },
+    [isMobile]
+  );
+
+  const handleTouchMove = useCallback((e: React.TouchEvent) => {
+    if (!longPressTimerRef.current || !longPressTouchStartRef.current) return;
+    const touch = e.touches[0];
+    if (!touch) return;
+
+    const dx = touch.clientX - longPressTouchStartRef.current.x;
+    const dy = touch.clientY - longPressTouchStartRef.current.y;
+    if (Math.sqrt(dx * dx + dy * dy) > LONG_PRESS_MOVE_THRESHOLD) {
+      // Finger moved too far, cancel long-press
+      clearTimeout(longPressTimerRef.current);
+      longPressTimerRef.current = null;
+      longPressTouchStartRef.current = null;
+    }
+  }, []);
+
+  const handleTouchEnd = useCallback(() => {
+    if (longPressTimerRef.current) {
+      clearTimeout(longPressTimerRef.current);
+      longPressTimerRef.current = null;
+    }
+    longPressTouchStartRef.current = null;
+  }, []);
+
+  // Convert file to base64
+  const fileToBase64 = useCallback((file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        if (typeof reader.result === 'string') {
+          resolve(reader.result);
+        } else {
+          reject(new Error('Failed to read file as base64'));
+        }
+      };
+      reader.onerror = () => reject(new Error('Failed to read file'));
+      reader.readAsDataURL(file);
+    });
+  }, []);
+
+  // Save image to temp folder via Electron API
+  const saveImageToTemp = useCallback(
+    async (base64Data: string, filename: string, mimeType: string): Promise<string | null> => {
+      try {
+        const api = getElectronAPI();
+        if (!api.saveImageToTemp) {
+          // Fallback path when Electron API is not available (browser mode)
+          logger.warn('saveImageToTemp not available, returning fallback path');
+          return `.automaker/images/${Date.now()}_${filename}`;
+        }
+
+        const projectPath = currentProject?.path;
+        const result = await api.saveImageToTemp(base64Data, filename, mimeType, projectPath);
+        if (result.success && result.path) {
+          return result.path;
+        }
+        logger.error('Failed to save image:', result.error);
+        return null;
+      } catch (error) {
+        logger.error('Error saving image:', error);
+        return null;
+      }
+    },
+    [currentProject?.path]
+  );
+
+  // Check if drag event contains image files
+  const hasImageFiles = useCallback((e: React.DragEvent): boolean => {
+    const types = e.dataTransfer.types;
+    const items = e.dataTransfer.items;
+
+    // Check if Files type is present
+    if (!types.includes('Files')) return false;
+
+    // Check if any item is an image
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.kind === 'file' && ACCEPTED_IMAGE_TYPES.includes(item.type)) {
+        return true;
+      }
+    }
+    return false;
+  }, []);
+
+  // Handle image drag over terminal
+  const handleImageDragOver = useCallback(
+    (e: React.DragEvent) => {
+      // Only handle if contains image files
+      if (!hasImageFiles(e)) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+      setIsImageDragOver(true);
+    },
+    [hasImageFiles]
+  );
+
+  // Handle image drag leave
+  const handleImageDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Only reset if leaving the actual container (not just moving to a child)
+    const relatedTarget = e.relatedTarget as HTMLElement | null;
+    if (relatedTarget && terminalRef.current?.contains(relatedTarget)) {
+      return;
+    }
+
+    setIsImageDragOver(false);
+  }, []);
+
+  // Handle image drop on terminal
+  const handleImageDrop = useCallback(
+    async (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsImageDragOver(false);
+
+      if (isProcessingImage) return;
+
+      const files = e.dataTransfer.files;
+      if (!files.length) return;
+
+      // Filter to only image files
+      const imageFiles: File[] = [];
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        if (ACCEPTED_IMAGE_TYPES.includes(file.type)) {
+          if (file.size > MAX_IMAGE_SIZE) {
+            toast.error(`Image too large: ${file.name}`, {
+              description: 'Maximum size is 10MB',
+            });
+            continue;
+          }
+          imageFiles.push(file);
+        }
+      }
+
+      if (imageFiles.length === 0) {
+        toast.error('No valid images found', {
+          description: 'Drop PNG, JPG, GIF, or WebP images',
+        });
+        return;
+      }
+
+      setIsProcessingImage(true);
+      const savedPaths: string[] = [];
+
+      for (const file of imageFiles) {
+        try {
+          const base64 = await fileToBase64(file);
+          const savedPath = await saveImageToTemp(base64, file.name, file.type);
+          if (savedPath) {
+            savedPaths.push(savedPath);
+          } else {
+            toast.error(`Failed to save: ${file.name}`);
+          }
+        } catch (error) {
+          logger.error('Error processing image:', error);
+          toast.error(`Error processing: ${file.name}`);
+        }
+      }
+
+      setIsProcessingImage(false);
+
+      if (savedPaths.length === 0) return;
+
+      // Send image paths to terminal as input
+      // Format: space-separated paths, each wrapped in quotes if containing spaces
+      const formattedPaths = savedPaths.map((p) => (p.includes(' ') ? `"${p}"` : p)).join(' ');
+
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.send(JSON.stringify({ type: 'input', data: formattedPaths }));
+        toast.success(
+          savedPaths.length === 1
+            ? 'Image path inserted'
+            : `${savedPaths.length} image paths inserted`,
+          { description: 'Press Enter to send' }
+        );
+      } else {
+        toast.error('Terminal not connected');
+      }
+    },
+    [isProcessingImage, fileToBase64, saveImageToTemp]
+  );
+
+  // Combine refs for the container
+  const setRefs = useCallback(
+    (node: HTMLDivElement | null) => {
+      containerRef.current = node;
+      setDropRef(node);
+    },
+    [setDropRef]
+  );
+
+  // Get current terminal theme for xterm styling (resolved for system preference)
+  const currentTerminalTheme = getTerminalTheme(resolvedTheme);
+
+  // Apply custom background/foreground colors if set, otherwise use theme defaults
+  const terminalBackgroundColor = customBackgroundColor ?? currentTerminalTheme.background;
+  const terminalForegroundColor = customForegroundColor ?? currentTerminalTheme.foreground;
+
+  return (
+    <div
+      ref={setRefs}
+      className={cn(
+        'flex flex-col h-full relative',
+        isActive && 'ring-1 ring-brand-500 ring-inset',
+        // Visual feedback when dragging this terminal
+        isDragging && 'opacity-50',
+        // Visual feedback when hovering over as drop target
+        isOver && isDropTarget && 'ring-2 ring-green-500 ring-inset'
+      )}
+      style={
+        isMobile && isKeyboardOpen ? { height: `calc(100% - ${keyboardHeight}px)` } : undefined
+      }
+      onClick={onFocus}
+      onKeyDownCapture={handleContainerKeyDownCapture}
+      tabIndex={0}
+      data-terminal-container="true"
+    >
+      {/* Drop indicator overlay */}
+      {isOver && isDropTarget && (
+        <div className="absolute inset-0 bg-green-500/10 z-10 pointer-events-none flex items-center justify-center">
+          <div className="px-3 py-2 bg-green-500/90 rounded-md text-white text-sm font-medium">
+            Drop to swap
+          </div>
+        </div>
+      )}
+
+      {/* Image drop overlay */}
+      {isImageDragOver && (
+        <div className="absolute inset-0 bg-blue-500/20 z-20 pointer-events-none flex items-center justify-center border-2 border-dashed border-blue-400 rounded">
+          <div className="flex flex-col items-center gap-2 px-4 py-3 bg-blue-500/90 rounded-md text-white">
+            {isProcessingImage ? (
+              <>
+                <Spinner size="lg" />
+                <span className="text-sm font-medium">Processing...</span>
+              </>
+            ) : (
+              <>
+                <ImageIcon className="h-6 w-6" />
+                <span className="text-sm font-medium">Drop image for Claude Code</span>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Header bar with drag handle - uses app theme CSS variables */}
+      <div className="flex items-center h-7 px-1 shrink-0 bg-card border-b border-border">
+        {/* Drag handle */}
+        <button
+          ref={setDragRef}
+          {...dragAttributes}
+          {...dragListeners}
+          className={cn(
+            'p-1 rounded cursor-grab active:cursor-grabbing mr-1 transition-colors text-muted-foreground hover:text-foreground hover:bg-accent',
+            isDragging && 'cursor-grabbing'
+          )}
+          title="Drag to swap terminals"
+        >
+          <GripHorizontal className="h-3 w-3" />
+        </button>
+
+        {/* Terminal icon and label */}
+        <div className="flex items-center gap-1.5 flex-1 min-w-0">
+          <Terminal className="h-3 w-3 shrink-0 text-muted-foreground" />
+          <span className="text-xs truncate text-foreground">{shellName}</span>
+          {/* Branch name indicator - show when terminal was opened from worktree */}
+          {branchName && (
+            <span className="flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded bg-brand-500/10 text-brand-500 shrink-0">
+              <GitBranch className="h-2.5 w-2.5 shrink-0" />
+              <span>{branchName}</span>
+            </span>
+          )}
+          {/* Font size indicator - only show when not default */}
+          {fontSize !== DEFAULT_FONT_SIZE && (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                resetZoom();
+              }}
+              className="text-[10px] px-1 rounded transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
+              title="Click to reset zoom (Ctrl+0)"
+            >
+              {fontSize}px
+            </button>
+          )}
+          {connectionStatus === 'reconnecting' && (
+            <span className="text-[10px] px-1.5 py-0.5 rounded bg-yellow-500/20 text-yellow-500 flex items-center gap-1">
+              <Spinner size="xs" />
+              Reconnecting...
+            </span>
+          )}
+          {connectionStatus === 'disconnected' && (
+            <span className="text-[10px] px-1.5 py-0.5 rounded bg-destructive/20 text-destructive">
+              Disconnected
+            </span>
+          )}
+          {connectionStatus === 'auth_failed' && (
+            <span className="text-[10px] px-1.5 py-0.5 rounded bg-destructive/20 text-destructive">
+              Auth Failed
+            </span>
+          )}
+          {processExitCode !== null && (
+            <span
+              className={cn(
+                'text-[10px] px-1.5 py-0.5 rounded flex items-center gap-1',
+                processExitCode === 0
+                  ? 'bg-green-500/20 text-green-500'
+                  : 'bg-yellow-500/20 text-yellow-500'
+              )}
+            >
+              Exited ({processExitCode})
+            </span>
+          )}
+        </div>
+
+        {/* Zoom and action buttons */}
+        <div className="flex items-center gap-0.5">
+          {/* Zoom controls */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-5 w-5 text-muted-foreground hover:text-foreground"
+            onClick={(e) => {
+              e.stopPropagation();
+              zoomOut();
+            }}
+            title="Zoom Out (Ctrl+-)"
+            disabled={fontSize <= MIN_FONT_SIZE}
+          >
+            <ZoomOut className="h-3 w-3" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-5 w-5 text-muted-foreground hover:text-foreground"
+            onClick={(e) => {
+              e.stopPropagation();
+              zoomIn();
+            }}
+            title="Zoom In (Ctrl++)"
+            disabled={fontSize >= MAX_FONT_SIZE}
+          >
+            <ZoomIn className="h-3 w-3" />
+          </Button>
+
+          {/* Quick scripts dropdown */}
+          <TerminalScriptsDropdown
+            onRunCommand={sendCommand}
+            onRunCommandInNewTab={onRunCommandInNewTab}
+            isConnected={connectionStatus === 'connected'}
+            onOpenSettings={() =>
+              navigate({ to: '/project-settings', search: { section: 'commands-scripts' } })
+            }
+          />
+
+          {/* Settings popover */}
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-5 w-5 text-muted-foreground hover:text-foreground"
+                onClick={(e) => e.stopPropagation()}
+                title="Terminal Settings"
+              >
+                <Settings className="h-3 w-3" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="w-64 p-3"
+              align="end"
+              side="bottom"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-xs font-medium">Font Size</Label>
+                    <span className="text-xs text-muted-foreground">{fontSize}px</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Slider
+                      value={[fontSize]}
+                      min={MIN_FONT_SIZE}
+                      max={MAX_FONT_SIZE}
+                      step={1}
+                      onValueChange={([value]) => onFontSizeChange(value)}
+                      className="flex-1"
+                    />
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 shrink-0"
+                      onClick={() => resetZoom()}
+                      disabled={fontSize === DEFAULT_FONT_SIZE}
+                      title="Reset to default"
+                    >
+                      <RotateCcw className="h-3 w-3" />
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <Label className="text-xs font-medium">Run on New Terminal</Label>
+                  <Input
+                    value={defaultRunScript}
+                    onChange={(e) => setTerminalDefaultRunScript(e.target.value)}
+                    placeholder="e.g., claude"
+                    className="h-7 text-xs"
+                  />
+                  <p className="text-[10px] text-muted-foreground">
+                    Command to run when creating a new terminal
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <Label className="text-xs font-medium">Font Family</Label>
+                  <Select
+                    value={fontFamily || DEFAULT_FONT_VALUE}
+                    onValueChange={(value) => {
+                      setTerminalFontFamily(value);
+                      toast.info('Font family changed', {
+                        description: 'Restart terminal for changes to take effect',
+                      });
+                    }}
+                  >
+                    <SelectTrigger className="w-full h-8 text-xs">
+                      <SelectValue placeholder="Default (Menlo / Monaco)" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {TERMINAL_FONT_OPTIONS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          <span
+                            style={{
+                              fontFamily:
+                                option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
+                            }}
+                          >
+                            {option.label}
+                          </span>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-xs font-medium">Scrollback</Label>
+                    <span className="text-xs text-muted-foreground">
+                      {(scrollbackLines / 1000).toFixed(0)}k lines
+                    </span>
+                  </div>
+                  <Slider
+                    value={[scrollbackLines]}
+                    min={1000}
+                    max={100000}
+                    step={1000}
+                    onValueChange={([value]) => {
+                      setTerminalScrollbackLines(value);
+                    }}
+                    onValueCommit={() => {
+                      toast.info('Scrollback changed', {
+                        description: 'Restart terminal for changes to take effect',
+                      });
+                    }}
+                    className="flex-1"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-xs font-medium">Line Height</Label>
+                    <span className="text-xs text-muted-foreground">{lineHeight.toFixed(1)}</span>
+                  </div>
+                  <Slider
+                    value={[lineHeight]}
+                    min={1.0}
+                    max={2.0}
+                    step={0.1}
+                    onValueChange={([value]) => {
+                      setTerminalLineHeight(value);
+                    }}
+                    onValueCommit={() => {
+                      toast.info('Line height changed', {
+                        description: 'Restart terminal for changes to take effect',
+                      });
+                    }}
+                    className="flex-1"
+                  />
+                </div>
+
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label className="text-xs font-medium">Screen Reader</Label>
+                    <p className="text-[10px] text-muted-foreground">Enable accessibility mode</p>
+                  </div>
+                  <Switch
+                    checked={screenReaderMode}
+                    onCheckedChange={(checked) => {
+                      setTerminalScreenReaderMode(checked);
+                      toast.info(checked ? 'Screen reader enabled' : 'Screen reader disabled', {
+                        description: 'Restart terminal for changes to take effect',
+                      });
+                    }}
+                  />
+                </div>
+
+                <div className="text-[10px] text-muted-foreground border-t pt-2">
+                  <p>Zoom: Ctrl++ / Ctrl+- / Ctrl+0</p>
+                  <p>Or use Ctrl+scroll wheel</p>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+
+          <div className="w-px h-3 mx-0.5 bg-border" />
+
+          {/* Split/close buttons */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-5 w-5 text-muted-foreground hover:text-foreground"
+            onClick={(e) => {
+              e.stopPropagation();
+              onSplitHorizontal();
+            }}
+            title="Split Right (Alt+D)"
+          >
+            <SplitSquareHorizontal className="h-3 w-3" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-5 w-5 text-muted-foreground hover:text-foreground"
+            onClick={(e) => {
+              e.stopPropagation();
+              onSplitVertical();
+            }}
+            title="Split Down (Alt+S)"
+          >
+            <SplitSquareVertical className="h-3 w-3" />
+          </Button>
+          {onToggleMaximize && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-5 w-5 text-muted-foreground hover:text-foreground"
+              onClick={(e) => {
+                e.stopPropagation();
+                onToggleMaximize();
+              }}
+              title={isMaximized ? 'Restore' : 'Maximize'}
+            >
+              {isMaximized ? <Minimize2 className="h-3 w-3" /> : <Maximize2 className="h-3 w-3" />}
+            </Button>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-5 w-5 text-muted-foreground hover:text-destructive"
+            onClick={(e) => {
+              e.stopPropagation();
+              onClose();
+            }}
+            title="Close Terminal (Alt+W)"
+          >
+            <X className="h-3 w-3" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Search bar */}
+      {showSearch && (
+        <div className="flex items-center gap-1 px-2 py-1 bg-card border-b border-border shrink-0">
+          <Search className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+          <input
+            ref={searchInputRef}
+            type="text"
+            value={searchQuery}
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+              // Auto-search as user types
+              if (searchAddonRef.current && e.target.value) {
+                searchAddonRef.current.findNext(e.target.value, searchOptions);
+              } else if (searchAddonRef.current) {
+                searchAddonRef.current.clearDecorations();
+              }
+            }}
+            onKeyDown={(e) => {
+              e.stopPropagation();
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                if (e.shiftKey) {
+                  searchPrevious();
+                } else {
+                  searchNext();
+                }
+              } else if (e.key === 'Escape') {
+                e.preventDefault();
+                closeSearch();
+              }
+            }}
+            placeholder="Search..."
+            className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none min-w-0"
+          />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-5 w-5 text-muted-foreground hover:text-foreground shrink-0"
+            onClick={searchPrevious}
+            disabled={!searchQuery}
+            title="Previous Match (Shift+Enter)"
+          >
+            <ChevronUp className="h-3.5 w-3.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-5 w-5 text-muted-foreground hover:text-foreground shrink-0"
+            onClick={searchNext}
+            disabled={!searchQuery}
+            title="Next Match (Enter)"
+          >
+            <ChevronDown className="h-3.5 w-3.5" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-5 w-5 text-muted-foreground hover:text-foreground shrink-0"
+            onClick={closeSearch}
+            title="Close (Escape)"
+          >
+            <X className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      )}
+
+      {/* Mobile/tablet shortcuts bar - special keys, clipboard, and arrow keys for touch devices */}
+      {showShortcutsBar && (
+        <MobileTerminalShortcuts
+          onSendInput={sendTerminalInput}
+          isConnected={connectionStatus === 'connected'}
+          activeModifier={stickyModifier}
+          onModifierChange={handleStickyModifierChange}
+          onSelectAll={selectAll}
+          onCopy={() => {
+            // On mobile, if nothing is selected, auto-select all before copying.
+            // This provides a convenient "tap to copy all" experience since
+            // touch-based text selection in xterm.js canvas is not possible.
+            const terminal = xtermRef.current;
+            if (terminal && !terminal.hasSelection()) {
+              terminal.selectAll();
+            }
+            copySelectionRef.current();
+          }}
+          onPaste={() => pasteFromClipboardRef.current()}
+          onToggleSelectMode={toggleSelectMode}
+          isSelectMode={isSelectMode}
+        />
+      )}
+
+      {/* Terminal area wrapper - relative container for the terminal and selection overlay */}
+      <div className="flex-1 overflow-hidden relative">
+        {/* Terminal container - xterm.js mounts here */}
+        <div
+          ref={terminalRef}
+          className="absolute inset-0"
+          style={{ backgroundColor: terminalBackgroundColor }}
+          onContextMenu={handleContextMenu}
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+          onTouchCancel={handleTouchEnd}
+          onDragOver={handleImageDragOver}
+          onDragLeave={handleImageDragLeave}
+          onDrop={handleImageDrop}
+        />
+
+        {/* Mobile text selection overlay - renders terminal buffer as native selectable text.
+            Overlays the canvas so users can use native touch selection on real DOM text.
+            xterm.js renders to a <canvas>, which prevents native text selection on mobile.
+            This overlay shows the same content as real DOM text that supports touch selection. */}
+        {isSelectMode && showShortcutsBar && (
+          <div className="absolute inset-0 z-30 flex flex-col">
+            {/* Header bar with copy/done actions */}
+            <div className="flex items-center justify-between px-3 py-2 bg-brand-500/95 backdrop-blur-sm text-white shrink-0">
+              <span className="text-xs font-medium">Touch &amp; hold to select text</span>
+              <div className="flex items-center gap-2">
+                <button
+                  className="px-3 py-1.5 text-xs font-medium rounded-md bg-white/20 hover:bg-white/30 active:scale-95 transition-all touch-manipulation"
+                  onClick={async () => {
+                    const selection = window.getSelection();
+                    const selectedText = selection?.toString();
+                    if (selectedText) {
+                      const success = await writeToClipboard(selectedText);
+                      if (success) {
+                        toast.success('Copied to clipboard');
+                      } else {
+                        toast.error('Copy failed');
+                      }
+                    } else {
+                      const success = await writeToClipboard(selectModeText);
+                      if (success) {
+                        toast.success('Copied all text to clipboard');
+                      } else {
+                        toast.error('Copy failed');
+                      }
+                    }
+                  }}
+                >
+                  Copy
+                </button>
+                <button
+                  className="px-3 py-1.5 text-xs font-medium rounded-md bg-white/20 hover:bg-white/30 active:scale-95 transition-all touch-manipulation"
+                  onClick={() => {
+                    setIsSelectMode(false);
+                    setSelectModeText('');
+                  }}
+                >
+                  Done
+                </button>
+              </div>
+            </div>
+            {/* Scrollable text content matching terminal appearance */}
+            <div
+              className="flex-1 overflow-auto"
+              style={
+                {
+                  backgroundColor: terminalBackgroundColor,
+                  color: terminalForegroundColor,
+                  fontFamily: getTerminalFontFamily(fontFamily),
+                  fontSize: `${fontSize}px`,
+                  lineHeight: `${lineHeight || 1.0}`,
+                  padding: '12px 16px',
+                  whiteSpace: 'pre-wrap',
+                  wordBreak: 'break-all',
+                  userSelect: 'text',
+                  WebkitUserSelect: 'text',
+                  touchAction: 'auto',
+                } as React.CSSProperties
+              }
+            >
+              {selectModeText || 'No terminal content to select.'}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Jump to bottom button - shown when scrolled up */}
+      {!isAtBottom && (
+        <Button
+          variant="secondary"
+          size="sm"
+          className="absolute bottom-3 right-3 h-7 px-2 gap-1 shadow-md z-10 opacity-90 hover:opacity-100 transition-opacity"
+          onClick={(e) => {
+            e.stopPropagation();
+            scrollToBottom();
+          }}
+          title="Jump to bottom"
+        >
+          <ArrowDown className="h-3.5 w-3.5" />
+          <span className="text-xs">Bottom</span>
+        </Button>
+      )}
+
+      {/* Context menu */}
+      {contextMenu && (
+        <div
+          ref={contextMenuRef}
+          role="menu"
+          aria-label="Terminal context menu"
+          className="fixed z-50 min-w-[160px] rounded-md border border-border bg-popover p-1 shadow-md animate-in fade-in-0 zoom-in-95"
+          style={{ left: contextMenu.x, top: contextMenu.y }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <button
+            role="menuitem"
+            tabIndex={focusedMenuIndex === 0 ? 0 : -1}
+            className={cn(
+              'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-popover-foreground cursor-default outline-none',
+              focusedMenuIndex === 0
+                ? 'bg-accent text-accent-foreground'
+                : 'hover:bg-accent hover:text-accent-foreground'
+            )}
+            onClick={() => handleContextMenuAction('copy')}
+          >
+            <Copy className="h-4 w-4" />
+            <span className="flex-1 text-left">Copy</span>
+            <span className="text-xs text-muted-foreground">{isMac ? '⌘C' : 'Ctrl+C'}</span>
+          </button>
+          <button
+            role="menuitem"
+            tabIndex={focusedMenuIndex === 1 ? 0 : -1}
+            className={cn(
+              'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-popover-foreground cursor-default outline-none',
+              focusedMenuIndex === 1
+                ? 'bg-accent text-accent-foreground'
+                : 'hover:bg-accent hover:text-accent-foreground'
+            )}
+            onClick={() => handleContextMenuAction('paste')}
+          >
+            <ClipboardPaste className="h-4 w-4" />
+            <span className="flex-1 text-left">Paste</span>
+            <span className="text-xs text-muted-foreground">{isMac ? '⌘V' : 'Ctrl+V'}</span>
+          </button>
+          <div role="separator" className="my-1 h-px bg-border" />
+          <button
+            role="menuitem"
+            tabIndex={focusedMenuIndex === 2 ? 0 : -1}
+            className={cn(
+              'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-popover-foreground cursor-default outline-none',
+              focusedMenuIndex === 2
+                ? 'bg-accent text-accent-foreground'
+                : 'hover:bg-accent hover:text-accent-foreground'
+            )}
+            onClick={() => handleContextMenuAction('selectAll')}
+          >
+            <CheckSquare className="h-4 w-4" />
+            <span className="flex-1 text-left">Select All</span>
+            <span className="text-xs text-muted-foreground">{isMac ? '⌘A' : 'Ctrl+A'}</span>
+          </button>
+          <button
+            role="menuitem"
+            tabIndex={focusedMenuIndex === 3 ? 0 : -1}
+            className={cn(
+              'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-popover-foreground cursor-default outline-none',
+              focusedMenuIndex === 3
+                ? 'bg-accent text-accent-foreground'
+                : 'hover:bg-accent hover:text-accent-foreground'
+            )}
+            onClick={() => handleContextMenuAction('clear')}
+          >
+            <Trash2 className="h-4 w-4" />
+            <span className="flex-1 text-left">Clear</span>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/terminal-view/terminal-scripts-dropdown.tsx b/temp_repo/apps/ui/src/components/views/terminal-view/terminal-scripts-dropdown.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ac82286b0550299db0e197660bcf499c145c0db7
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/terminal-view/terminal-scripts-dropdown.tsx
@@ -0,0 +1,146 @@
+import { useCallback, useMemo } from 'react';
+import { ScrollText, Play, Settings2, SquareArrowOutUpRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useAppStore } from '@/store/app-store';
+import { useProjectSettings } from '@/hooks/queries';
+import { cn } from '@/lib/utils';
+import { DEFAULT_TERMINAL_SCRIPTS } from '../project-settings-view/terminal-scripts-constants';
+
+interface TerminalScriptsDropdownProps {
+  /** Callback to send a command + newline to the terminal */
+  onRunCommand: (command: string) => void;
+  /** Callback to run a command in a new terminal tab */
+  onRunCommandInNewTab?: (command: string) => void;
+  /** Whether the terminal is connected and ready */
+  isConnected: boolean;
+  /** Optional callback to navigate to project settings scripts section */
+  onOpenSettings?: () => void;
+}
+
+/**
+ * Dropdown menu in the terminal header bar that provides quick-access
+ * to user-configured project scripts. Each script is a split button:
+ * clicking the left side runs the command in the current terminal,
+ * clicking the "new tab" icon on the right runs it in a new tab.
+ */
+export function TerminalScriptsDropdown({
+  onRunCommand,
+  onRunCommandInNewTab,
+  isConnected,
+  onOpenSettings,
+}: TerminalScriptsDropdownProps) {
+  const currentProject = useAppStore((state) => state.currentProject);
+  const { data: projectSettings } = useProjectSettings(currentProject?.path);
+
+  // Use project-configured scripts or fall back to defaults
+  const scripts = useMemo(() => {
+    const configured = projectSettings?.terminalScripts;
+    if (configured && configured.length > 0) {
+      return configured;
+    }
+    return DEFAULT_TERMINAL_SCRIPTS;
+  }, [projectSettings?.terminalScripts]);
+
+  const handleRunScript = useCallback(
+    (command: string) => {
+      if (!isConnected) return;
+      onRunCommand(command);
+    },
+    [isConnected, onRunCommand]
+  );
+
+  const handleRunScriptInNewTab = useCallback(
+    (command: string) => {
+      if (!isConnected || !onRunCommandInNewTab) return;
+      onRunCommandInNewTab(command);
+    },
+    [isConnected, onRunCommandInNewTab]
+  );
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-5 w-5 text-muted-foreground hover:text-foreground"
+          onClick={(e) => e.stopPropagation()}
+          title="Quick Scripts"
+          disabled={!isConnected}
+        >
+          <ScrollText className="h-3 w-3" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        side="bottom"
+        className="w-56"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <DropdownMenuLabel className="text-xs text-muted-foreground font-normal">
+          Quick Scripts
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {scripts.map((script) => (
+          <DropdownMenuItem
+            key={script.id}
+            onClick={() => handleRunScript(script.command)}
+            disabled={!isConnected}
+            className="gap-2 pr-1"
+          >
+            <Play className={cn('h-3.5 w-3.5 shrink-0 text-brand-500')} />
+            <div className="flex flex-col min-w-0 flex-1">
+              <span className="text-sm truncate">{script.name}</span>
+              <span className="text-[10px] text-muted-foreground font-mono truncate">
+                {script.command}
+              </span>
+            </div>
+            {onRunCommandInNewTab && (
+              <button
+                type="button"
+                className={cn(
+                  'shrink-0 ml-1 p-1 rounded-sm border-l border-border',
+                  'text-muted-foreground hover:text-foreground hover:bg-accent/80',
+                  'transition-colors',
+                  !isConnected && 'pointer-events-none opacity-50'
+                )}
+                title="Run in new tab"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  handleRunScriptInNewTab(script.command);
+                }}
+                onPointerDown={(e) => {
+                  // Prevent the DropdownMenuItem from handling this pointer event
+                  e.stopPropagation();
+                }}
+                onPointerUp={(e) => {
+                  e.stopPropagation();
+                }}
+              >
+                <SquareArrowOutUpRight className="h-3 w-3" />
+              </button>
+            )}
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          onClick={onOpenSettings}
+          className="gap-2 text-muted-foreground"
+          disabled={!onOpenSettings}
+        >
+          <Settings2 className="h-3.5 w-3.5 shrink-0" />
+          <span className="text-sm">Edit Commands & Scripts</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/welcome-view.tsx b/temp_repo/apps/ui/src/components/views/welcome-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..bfe0d92a7483849475ffc334fab58d57521841a6
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/welcome-view.tsx
@@ -0,0 +1,792 @@
+import { useState, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { useAppStore } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import { initializeProject } from '@/lib/project-init';
+import {
+  FolderOpen,
+  Plus,
+  Folder,
+  Clock,
+  Sparkles,
+  MessageSquare,
+  ChevronDown,
+} from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { toast } from 'sonner';
+import { WorkspacePickerModal } from '@/components/dialogs/workspace-picker-modal';
+import { NewProjectModal } from '@/components/dialogs/new-project-modal';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import type { StarterTemplate } from '@/lib/templates';
+import { useNavigate } from '@tanstack/react-router';
+
+const logger = createLogger('WelcomeView');
+
+export function WelcomeView() {
+  const { projects, upsertAndSetCurrentProject, addProject, setCurrentProject } = useAppStore();
+  const navigate = useNavigate();
+  const [showNewProjectModal, setShowNewProjectModal] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [isOpening, setIsOpening] = useState(false);
+  const [showInitDialog, setShowInitDialog] = useState(false);
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
+  const [initStatus, setInitStatus] = useState<{
+    isNewProject: boolean;
+    createdFiles: string[];
+    projectName: string;
+    projectPath: string;
+  } | null>(null);
+  const [showWorkspacePicker, setShowWorkspacePicker] = useState(false);
+
+  /**
+   * Kick off project analysis agent to analyze the codebase
+   */
+  const analyzeProject = useCallback(async (projectPath: string) => {
+    const api = getElectronAPI();
+
+    if (!api.autoMode?.analyzeProject) {
+      logger.info('[Welcome] Auto mode API not available, skipping analysis');
+      return;
+    }
+
+    setIsAnalyzing(true);
+    try {
+      logger.info('[Welcome] Starting project analysis for:', projectPath);
+      const result = await api.autoMode.analyzeProject(projectPath);
+
+      if (result.success) {
+        toast.success('Project analyzed', {
+          description: 'AI agent has analyzed your project structure',
+        });
+      } else {
+        logger.error('[Welcome] Project analysis failed:', result.error);
+      }
+    } catch (error) {
+      logger.error('[Welcome] Failed to analyze project:', error);
+    } finally {
+      setIsAnalyzing(false);
+    }
+  }, []);
+
+  /**
+   * Initialize project and optionally kick off project analysis agent
+   */
+  const initializeAndOpenProject = useCallback(
+    async (path: string, name: string) => {
+      setIsOpening(true);
+      try {
+        // Initialize the .automaker directory structure
+        const initResult = await initializeProject(path);
+
+        if (!initResult.success) {
+          toast.error('Failed to initialize project', {
+            description: initResult.error || 'Unknown error occurred',
+          });
+          return;
+        }
+
+        // Upsert project and set as current (handles both create and update cases)
+        // Theme handling (trashed project recovery or undefined for global) is done by the store
+        upsertAndSetCurrentProject(path, name);
+
+        // Show initialization dialog if files were created
+        if (initResult.createdFiles && initResult.createdFiles.length > 0) {
+          setInitStatus({
+            isNewProject: initResult.isNewProject,
+            createdFiles: initResult.createdFiles,
+            projectName: name,
+            projectPath: path,
+          });
+          setShowInitDialog(true);
+
+          // Kick off agent to analyze the project and update app_spec.txt
+          logger.info('[Welcome] Project initialized, created files:', initResult.createdFiles);
+          logger.info('[Welcome] Kicking off project analysis agent...');
+
+          // Start analysis in background (don't await, let it run async)
+          analyzeProject(path);
+        } else {
+          toast.success('Project opened', {
+            description: `Opened ${name}`,
+          });
+        }
+
+        // Navigate to the board view
+        navigate({ to: '/board' });
+      } catch (error) {
+        logger.error('[Welcome] Failed to open project:', error);
+        toast.error('Failed to open project', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+        });
+      } finally {
+        setIsOpening(false);
+      }
+    },
+    [upsertAndSetCurrentProject, analyzeProject, navigate]
+  );
+
+  const handleOpenProject = useCallback(async () => {
+    try {
+      // Check if workspace is configured
+      const httpClient = getHttpApiClient();
+      const configResult = await httpClient.workspace.getConfig();
+
+      if (configResult.success && configResult.configured) {
+        // Show workspace picker modal
+        setShowWorkspacePicker(true);
+      } else {
+        // Fall back to current behavior (native dialog or manual input)
+        const api = getElectronAPI();
+        const result = await api.openDirectory();
+
+        if (!result.canceled && result.filePaths[0]) {
+          const path = result.filePaths[0];
+          // Extract folder name from path (works on both Windows and Mac/Linux)
+          const name = path.split(/[/\\]/).filter(Boolean).pop() || 'Untitled Project';
+          await initializeAndOpenProject(path, name);
+        }
+      }
+    } catch (error) {
+      logger.error('[Welcome] Failed to check workspace config:', error);
+      // Fall back to current behavior on error
+      const api = getElectronAPI();
+      const result = await api.openDirectory();
+
+      if (!result.canceled && result.filePaths[0]) {
+        const path = result.filePaths[0];
+        const name = path.split(/[/\\]/).filter(Boolean).pop() || 'Untitled Project';
+        await initializeAndOpenProject(path, name);
+      }
+    }
+  }, [initializeAndOpenProject]);
+
+  /**
+   * Handle selecting a project from workspace picker
+   */
+  const handleWorkspaceSelect = useCallback(
+    async (path: string, name: string) => {
+      setShowWorkspacePicker(false);
+      await initializeAndOpenProject(path, name);
+    },
+    [initializeAndOpenProject]
+  );
+
+  /**
+   * Handle clicking on a recent project
+   */
+  const handleRecentProjectClick = useCallback(
+    async (project: { id: string; name: string; path: string }) => {
+      await initializeAndOpenProject(project.path, project.name);
+    },
+    [initializeAndOpenProject]
+  );
+
+  const handleNewProject = () => {
+    setShowNewProjectModal(true);
+  };
+
+  const handleInteractiveMode = () => {
+    navigate({ to: '/interview' });
+  };
+
+  /**
+   * Create a blank project with just .automaker directory structure
+   */
+  const handleCreateBlankProject = async (projectName: string, parentDir: string) => {
+    setIsCreating(true);
+    try {
+      const api = getElectronAPI();
+      const projectPath = `${parentDir}/${projectName}`;
+
+      // Validate that parent directory exists
+      const parentExists = await api.exists(parentDir);
+      if (!parentExists) {
+        toast.error('Parent directory does not exist', {
+          description: `Cannot create project in non-existent directory: ${parentDir}`,
+        });
+        return;
+      }
+
+      // Verify parent is actually a directory
+      const parentStat = await api.stat(parentDir);
+      if (parentStat && !parentStat.stats?.isDirectory) {
+        toast.error('Parent path is not a directory', {
+          description: `${parentDir} is not a directory`,
+        });
+        return;
+      }
+
+      // Create project directory
+      const mkdirResult = await api.mkdir(projectPath);
+      if (!mkdirResult.success) {
+        toast.error('Failed to create project directory', {
+          description: mkdirResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      // Initialize .automaker directory with all necessary files
+      const initResult = await initializeProject(projectPath);
+
+      if (!initResult.success) {
+        toast.error('Failed to initialize project', {
+          description: initResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      // Update the app_spec.txt with the project name
+      // Note: Must follow XML format as defined in apps/server/src/lib/app-spec-format.ts
+      await api.writeFile(
+        `${projectPath}/.automaker/app_spec.txt`,
+        `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    Describe your project here. This file will be analyzed by an AI agent
+    to understand your project structure and tech stack.
+  </overview>
+
+  <technology_stack>
+    <!-- The AI agent will fill this in after analyzing your project -->
+  </technology_stack>
+
+  <core_capabilities>
+    <!-- List core features and capabilities -->
+  </core_capabilities>
+
+  <implemented_features>
+    <!-- The AI agent will populate this based on code analysis -->
+  </implemented_features>
+</project_specification>`
+      );
+
+      const project = {
+        id: `project-${Date.now()}`,
+        name: projectName,
+        path: projectPath,
+        lastOpened: new Date().toISOString(),
+      };
+
+      addProject(project);
+      setCurrentProject(project);
+      setShowNewProjectModal(false);
+
+      toast.success('Project created', {
+        description: `Created ${projectName} with .automaker directory`,
+      });
+
+      // Set init status to show the dialog
+      setInitStatus({
+        isNewProject: true,
+        createdFiles: initResult.createdFiles || [],
+        projectName: projectName,
+        projectPath: projectPath,
+      });
+      setShowInitDialog(true);
+
+      // Navigate to the board view (dialog shows as overlay)
+      navigate({ to: '/board' });
+    } catch (error) {
+      logger.error('Failed to create project:', error);
+      toast.error('Failed to create project', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  /**
+   * Create a project from a GitHub starter template
+   */
+  const handleCreateFromTemplate = async (
+    template: StarterTemplate,
+    projectName: string,
+    parentDir: string
+  ) => {
+    setIsCreating(true);
+    try {
+      const httpClient = getHttpApiClient();
+      const api = getElectronAPI();
+
+      // Clone the template repository
+      const cloneResult = await httpClient.templates.clone(
+        template.repoUrl,
+        projectName,
+        parentDir
+      );
+
+      if (!cloneResult.success || !cloneResult.projectPath) {
+        toast.error('Failed to clone template', {
+          description: cloneResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      const projectPath = cloneResult.projectPath;
+
+      // Initialize .automaker directory with all necessary files
+      const initResult = await initializeProject(projectPath);
+
+      if (!initResult.success) {
+        toast.error('Failed to initialize project', {
+          description: initResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      // Update the app_spec.txt with template-specific info
+      // Note: Must follow XML format as defined in apps/server/src/lib/app-spec-format.ts
+      await api.writeFile(
+        `${projectPath}/.automaker/app_spec.txt`,
+        `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    This project was created from the "${template.name}" starter template.
+    ${template.description}
+  </overview>
+
+  <technology_stack>
+    ${template.techStack.map((tech) => `<technology>${tech}</technology>`).join('\n    ')}
+  </technology_stack>
+
+  <core_capabilities>
+    ${template.features.map((feature) => `<capability>${feature}</capability>`).join('\n    ')}
+  </core_capabilities>
+
+  <implemented_features>
+    <!-- The AI agent will populate this based on code analysis -->
+  </implemented_features>
+</project_specification>`
+      );
+
+      const project = {
+        id: `project-${Date.now()}`,
+        name: projectName,
+        path: projectPath,
+        lastOpened: new Date().toISOString(),
+      };
+
+      addProject(project);
+      setCurrentProject(project);
+      setShowNewProjectModal(false);
+
+      toast.success('Project created from template', {
+        description: `Created ${projectName} from ${template.name}`,
+      });
+
+      // Set init status to show the dialog
+      setInitStatus({
+        isNewProject: true,
+        createdFiles: initResult.createdFiles || [],
+        projectName: projectName,
+        projectPath: projectPath,
+      });
+      setShowInitDialog(true);
+
+      // Navigate to the board view (dialog shows as overlay)
+      navigate({ to: '/board' });
+
+      // Kick off project analysis
+      analyzeProject(projectPath);
+    } catch (error) {
+      logger.error('Failed to create project from template:', error);
+      toast.error('Failed to create project', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  /**
+   * Create a project from a custom GitHub URL
+   */
+  const handleCreateFromCustomUrl = async (
+    repoUrl: string,
+    projectName: string,
+    parentDir: string
+  ) => {
+    setIsCreating(true);
+    try {
+      const httpClient = getHttpApiClient();
+      const api = getElectronAPI();
+
+      // Clone the repository
+      const cloneResult = await httpClient.templates.clone(repoUrl, projectName, parentDir);
+
+      if (!cloneResult.success || !cloneResult.projectPath) {
+        toast.error('Failed to clone repository', {
+          description: cloneResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      const projectPath = cloneResult.projectPath;
+
+      // Initialize .automaker directory with all necessary files
+      const initResult = await initializeProject(projectPath);
+
+      if (!initResult.success) {
+        toast.error('Failed to initialize project', {
+          description: initResult.error || 'Unknown error occurred',
+        });
+        return;
+      }
+
+      // Update the app_spec.txt with basic info
+      // Note: Must follow XML format as defined in apps/server/src/lib/app-spec-format.ts
+      await api.writeFile(
+        `${projectPath}/.automaker/app_spec.txt`,
+        `<project_specification>
+  <project_name>${projectName}</project_name>
+
+  <overview>
+    This project was cloned from ${repoUrl}.
+    The AI agent will analyze the project structure.
+  </overview>
+
+  <technology_stack>
+    <!-- The AI agent will fill this in after analyzing your project -->
+  </technology_stack>
+
+  <core_capabilities>
+    <!-- List core features and capabilities -->
+  </core_capabilities>
+
+  <implemented_features>
+    <!-- The AI agent will populate this based on code analysis -->
+  </implemented_features>
+</project_specification>`
+      );
+
+      const project = {
+        id: `project-${Date.now()}`,
+        name: projectName,
+        path: projectPath,
+        lastOpened: new Date().toISOString(),
+      };
+
+      addProject(project);
+      setCurrentProject(project);
+      setShowNewProjectModal(false);
+
+      toast.success('Project created from repository', {
+        description: `Created ${projectName} from ${repoUrl}`,
+      });
+
+      // Set init status to show the dialog
+      setInitStatus({
+        isNewProject: true,
+        createdFiles: initResult.createdFiles || [],
+        projectName: projectName,
+        projectPath: projectPath,
+      });
+      setShowInitDialog(true);
+
+      // Navigate to the board view (dialog shows as overlay)
+      navigate({ to: '/board' });
+
+      // Kick off project analysis
+      analyzeProject(projectPath);
+    } catch (error) {
+      logger.error('Failed to create project from custom URL:', error);
+      toast.error('Failed to create project', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const recentProjects = [...projects]
+    .sort((a, b) => {
+      const dateA = a.lastOpened ? new Date(a.lastOpened).getTime() : 0;
+      const dateB = b.lastOpened ? new Date(b.lastOpened).getTime() : 0;
+      return dateB - dateA;
+    })
+    .slice(0, 5);
+
+  return (
+    <div className="flex-1 flex flex-col content-bg" data-testid="welcome-view">
+      {/* Header Section */}
+      <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
+        <div className="px-8 py-6">
+          <div className="flex items-center gap-4 animate-in fade-in slide-in-from-top-2 duration-500">
+            <div className="w-12 h-12 rounded-xl bg-linear-to-br from-brand-500/20 to-brand-600/10 border border-brand-500/20 flex items-center justify-center shadow-lg shadow-brand-500/10">
+              <img src="/logo.png" alt="Automaker Logo" className="w-8 h-8" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-foreground tracking-tight">
+                Welcome to Automaker
+              </h1>
+              <p className="text-sm text-muted-foreground mt-0.5">
+                Your autonomous AI development studio
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Content Area */}
+      <div className="flex-1 overflow-y-auto p-8">
+        <div className="max-w-5xl mx-auto">
+          {/* Quick Actions */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-100">
+            {/* New Project Card */}
+            <div
+              className="group relative rounded-xl border border-border bg-card/80 backdrop-blur-sm hover:bg-card hover:border-brand-500/30 hover:shadow-xl hover:shadow-brand-500/5 transition-all duration-300 hover:-translate-y-1"
+              data-testid="new-project-card"
+            >
+              <div className="absolute inset-0 rounded-xl bg-linear-to-br from-brand-500/5 via-transparent to-purple-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+              <div className="relative p-6 h-full flex flex-col">
+                <div className="flex items-start gap-4 flex-1">
+                  <div className="w-12 h-12 rounded-xl bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/25 flex items-center justify-center group-hover:scale-105 group-hover:shadow-brand-500/40 transition-all duration-300 shrink-0">
+                    <Plus className="w-6 h-6 text-white" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-lg font-semibold text-foreground mb-1.5">New Project</h3>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                      Create a new project from scratch with AI-powered development
+                    </p>
+                  </div>
+                </div>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      className="w-full mt-5 bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white border-0 shadow-md shadow-brand-500/20 hover:shadow-brand-500/30 transition-all"
+                      data-testid="create-new-project"
+                    >
+                      <Plus className="w-4 h-4 mr-2" />
+                      Create Project
+                      <ChevronDown className="w-4 h-4 ml-2" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="w-56">
+                    <DropdownMenuItem onClick={handleNewProject} data-testid="quick-setup-option">
+                      <Plus className="w-4 h-4 mr-2" />
+                      Quick Setup
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={handleInteractiveMode}
+                      data-testid="interactive-mode-option"
+                    >
+                      <MessageSquare className="w-4 h-4 mr-2" />
+                      Interactive Mode
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
+
+            {/* Open Project Card */}
+            <div
+              className="group relative rounded-xl border border-border bg-card/80 backdrop-blur-sm hover:bg-card hover:border-blue-500/30 hover:shadow-xl hover:shadow-blue-500/5 transition-all duration-300 cursor-pointer hover:-translate-y-1"
+              onClick={handleOpenProject}
+              data-testid="open-project-card"
+            >
+              <div className="absolute inset-0 rounded-xl bg-linear-to-br from-blue-500/5 via-transparent to-cyan-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+              <div className="relative p-6 h-full flex flex-col">
+                <div className="flex items-start gap-4 flex-1">
+                  <div className="w-12 h-12 rounded-xl bg-muted border border-border flex items-center justify-center group-hover:bg-blue-500/10 group-hover:border-blue-500/30 group-hover:scale-105 transition-all duration-300 shrink-0">
+                    <FolderOpen className="w-6 h-6 text-muted-foreground group-hover:text-blue-500 transition-colors duration-300" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-lg font-semibold text-foreground mb-1.5">Open Project</h3>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                      Open an existing project folder to continue working
+                    </p>
+                  </div>
+                </div>
+                <Button
+                  variant="secondary"
+                  className="w-full mt-5 bg-secondary/80 hover:bg-secondary text-foreground border border-border hover:border-blue-500/30 transition-all"
+                  data-testid="open-existing-project"
+                >
+                  <FolderOpen className="w-4 h-4 mr-2" />
+                  Browse Folder
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          {/* Recent Projects */}
+          {recentProjects.length > 0 && (
+            <div className="animate-in fade-in slide-in-from-bottom-4 duration-500 delay-200">
+              <div className="flex items-center gap-2.5 mb-5">
+                <div className="w-8 h-8 rounded-lg bg-muted/50 flex items-center justify-center">
+                  <Clock className="w-4 h-4 text-muted-foreground" />
+                </div>
+                <h2 className="text-lg font-semibold text-foreground">Recent Projects</h2>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {recentProjects.map((project, index) => (
+                  <div
+                    key={project.id}
+                    className="group relative rounded-xl border border-border bg-card/60 backdrop-blur-sm hover:bg-card hover:border-brand-500/40 hover:shadow-lg hover:shadow-brand-500/5 transition-all duration-300 cursor-pointer hover:-translate-y-0.5"
+                    onClick={() => handleRecentProjectClick(project)}
+                    data-testid={`recent-project-${project.id}`}
+                    style={{ animationDelay: `${index * 50}ms` }}
+                  >
+                    <div className="absolute inset-0 rounded-xl bg-linear-to-br from-brand-500/0 to-purple-600/0 group-hover:from-brand-500/5 group-hover:to-purple-600/5 transition-all duration-300" />
+                    <div className="relative p-4">
+                      <div className="flex items-start gap-3">
+                        <div className="w-10 h-10 rounded-lg bg-muted/80 border border-border flex items-center justify-center group-hover:bg-brand-500/10 group-hover:border-brand-500/30 transition-all duration-300 shrink-0">
+                          <Folder className="w-5 h-5 text-muted-foreground group-hover:text-brand-500 transition-colors duration-300" />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <p className="font-medium text-foreground truncate group-hover:text-brand-500 transition-colors duration-300">
+                            {project.name}
+                          </p>
+                          <p className="text-xs text-muted-foreground/70 truncate mt-1">
+                            {project.path}
+                          </p>
+                          {project.lastOpened && (
+                            <p className="text-xs text-muted-foreground mt-1.5">
+                              {new Date(project.lastOpened).toLocaleDateString()}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Empty State for No Projects */}
+          {recentProjects.length === 0 && (
+            <div className="flex flex-col items-center justify-center py-16 text-center animate-in fade-in duration-500 delay-200">
+              <div className="w-20 h-20 rounded-2xl bg-muted/50 border border-border flex items-center justify-center mb-5">
+                <Sparkles className="w-10 h-10 text-muted-foreground/50" />
+              </div>
+              <h3 className="text-xl font-semibold text-foreground mb-2">No projects yet</h3>
+              <p className="text-sm text-muted-foreground max-w-md leading-relaxed">
+                Get started by creating a new project or opening an existing one
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* New Project Modal */}
+      <NewProjectModal
+        open={showNewProjectModal}
+        onOpenChange={setShowNewProjectModal}
+        onCreateBlankProject={handleCreateBlankProject}
+        onCreateFromTemplate={handleCreateFromTemplate}
+        onCreateFromCustomUrl={handleCreateFromCustomUrl}
+        isCreating={isCreating}
+      />
+
+      {/* Project Initialization Dialog */}
+      <Dialog open={showInitDialog} onOpenChange={setShowInitDialog}>
+        <DialogContent
+          className="bg-card border-border shadow-xl"
+          data-testid="project-init-dialog"
+        >
+          <DialogHeader>
+            <DialogTitle className="text-foreground flex items-center gap-2.5">
+              <div className="w-8 h-8 rounded-lg bg-brand-500/10 flex items-center justify-center">
+                <Sparkles className="w-4 h-4 text-brand-500" />
+              </div>
+              {initStatus?.isNewProject ? 'Project Initialized' : 'Project Updated'}
+            </DialogTitle>
+            <DialogDescription className="text-muted-foreground mt-1">
+              {initStatus?.isNewProject
+                ? `Created .automaker directory structure for ${initStatus?.projectName}`
+                : `Updated missing files in .automaker for ${initStatus?.projectName}`}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <div className="space-y-3">
+              <p className="text-sm text-foreground font-medium">Created files:</p>
+              <ul className="space-y-2">
+                {initStatus?.createdFiles.map((file) => (
+                  <li
+                    key={file}
+                    className="flex items-center gap-2.5 text-sm text-muted-foreground"
+                  >
+                    <div className="w-2 h-2 rounded-full bg-green-500" />
+                    <code className="text-xs bg-muted px-2.5 py-1 rounded-md font-mono">
+                      {file}
+                    </code>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {initStatus?.isNewProject && (
+              <div className="mt-5 p-4 rounded-xl bg-muted/50 border border-border">
+                {isAnalyzing ? (
+                  <div className="flex items-center gap-3">
+                    <Spinner size="sm" />
+                    <p className="text-sm text-brand-500">
+                      AI agent is analyzing your project structure...
+                    </p>
+                  </div>
+                ) : (
+                  <p className="text-sm text-muted-foreground leading-relaxed">
+                    <span className="text-brand-500 font-medium">Tip:</span> Edit the{' '}
+                    <code className="text-xs bg-muted px-1.5 py-0.5 rounded font-mono">
+                      app_spec.txt
+                    </code>{' '}
+                    file to describe your project. The AI agent will use this to understand your
+                    project structure.
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+          <DialogFooter>
+            <Button
+              onClick={() => setShowInitDialog(false)}
+              className="bg-linear-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white border-0 shadow-md shadow-brand-500/20"
+              data-testid="close-init-dialog"
+            >
+              Get Started
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Workspace Picker Modal */}
+      <WorkspacePickerModal
+        open={showWorkspacePicker}
+        onOpenChange={setShowWorkspacePicker}
+        onSelect={handleWorkspaceSelect}
+      />
+
+      {/* Loading overlay when opening project */}
+      {isOpening && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm"
+          data-testid="project-opening-overlay"
+        >
+          <div className="flex flex-col items-center gap-4 p-8 rounded-2xl bg-card border border-border shadow-2xl">
+            <Spinner size="xl" />
+            <p className="text-foreground font-medium">Initializing project...</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/components/views/wiki-view.tsx b/temp_repo/apps/ui/src/components/views/wiki-view.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..01e87b8e1ccb6cb8335028bcbd7c092ccda5344d
--- /dev/null
+++ b/temp_repo/apps/ui/src/components/views/wiki-view.tsx
@@ -0,0 +1,592 @@
+import { useState, type ReactNode, type ElementType } from 'react';
+import {
+  ChevronDown,
+  ChevronRight,
+  Rocket,
+  Layers,
+  Sparkles,
+  GitBranch,
+  FolderTree,
+  Component,
+  Settings,
+  PlayCircle,
+  Bot,
+  LayoutGrid,
+  Terminal,
+  Palette,
+  Keyboard,
+  Cpu,
+  Zap,
+  Image,
+  TestTube,
+  Brain,
+} from 'lucide-react';
+
+interface WikiSection {
+  id: string;
+  title: string;
+  icon: ElementType;
+  content: ReactNode;
+}
+
+function CollapsibleSection({
+  section,
+  isOpen,
+  onToggle,
+}: {
+  section: WikiSection;
+  isOpen: boolean;
+  onToggle: () => void;
+}) {
+  const Icon = section.icon;
+
+  return (
+    <div className="border border-border rounded-lg overflow-hidden bg-card/50 backdrop-blur-sm">
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center gap-3 p-4 text-left hover:bg-accent/50 transition-colors"
+      >
+        <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-brand-500/10 text-brand-500">
+          <Icon className="w-4 h-4" />
+        </div>
+        <span className="flex-1 font-medium text-foreground">{section.title}</span>
+        {isOpen ? (
+          <ChevronDown className="w-4 h-4 text-muted-foreground" />
+        ) : (
+          <ChevronRight className="w-4 h-4 text-muted-foreground" />
+        )}
+      </button>
+      {isOpen && (
+        <div className="px-4 pb-4 pt-0 border-t border-border/50">
+          <div className="pt-4 text-sm text-muted-foreground leading-relaxed">
+            {section.content}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CodeBlock({ children, title }: { children: string; title?: string }) {
+  return (
+    <div className="my-3 rounded-lg overflow-hidden border border-border">
+      {title && (
+        <div className="px-3 py-1.5 bg-muted/50 border-b border-border text-xs font-medium text-muted-foreground">
+          {title}
+        </div>
+      )}
+      <pre className="p-3 bg-muted/30 overflow-x-auto text-xs font-mono text-foreground">
+        {children}
+      </pre>
+    </div>
+  );
+}
+
+function FeatureList({
+  items,
+}: {
+  items: { icon: ElementType; title: string; description: string }[];
+}) {
+  return (
+    <div className="grid gap-3 mt-3">
+      {items.map((item, index) => {
+        const ItemIcon = item.icon;
+        return (
+          <div
+            key={index}
+            className="flex items-start gap-3 p-3 rounded-lg bg-muted/30 border border-border/50"
+          >
+            <div className="flex items-center justify-center w-6 h-6 rounded bg-brand-500/10 text-brand-500 shrink-0 mt-0.5">
+              <ItemIcon className="w-3.5 h-3.5" />
+            </div>
+            <div>
+              <div className="font-medium text-foreground text-sm">{item.title}</div>
+              <div className="text-xs text-muted-foreground mt-0.5">{item.description}</div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function WikiView() {
+  const [openSections, setOpenSections] = useState<Set<string>>(new Set(['overview']));
+
+  const toggleSection = (id: string) => {
+    setOpenSections((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  };
+
+  const expandAll = () => {
+    setOpenSections(new Set(sections.map((s) => s.id)));
+  };
+
+  const collapseAll = () => {
+    setOpenSections(new Set());
+  };
+
+  const sections: WikiSection[] = [
+    {
+      id: 'overview',
+      title: 'Project Overview',
+      icon: Rocket,
+      content: (
+        <div className="space-y-3">
+          <p>
+            <strong className="text-foreground">Automaker</strong> is an autonomous AI development
+            studio that helps developers build software faster using AI agents.
+          </p>
+          <p>
+            At its core, Automaker provides a visual Kanban board to manage features. When you're
+            ready, AI agents automatically implement those features in your codebase, complete with
+            git worktree isolation for safe parallel development.
+          </p>
+          <div className="p-3 rounded-lg bg-brand-500/10 border border-brand-500/20 mt-4">
+            <p className="text-brand-400 text-sm">
+              Think of it as having a team of AI developers that can work on multiple features
+              simultaneously while you focus on the bigger picture.
+            </p>
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: 'architecture',
+      title: 'Architecture',
+      icon: Layers,
+      content: (
+        <div className="space-y-3">
+          <p>Automaker is built as a monorepo with two main applications and shared libraries:</p>
+          <ul className="list-disc list-inside space-y-2 ml-2">
+            <li>
+              <strong className="text-foreground">apps/ui</strong> - React + TanStack Router +
+              Electron frontend for the desktop application
+            </li>
+            <li>
+              <strong className="text-foreground">apps/server</strong> - Express backend handling
+              API requests and agent orchestration
+            </li>
+            <li>
+              <strong className="text-foreground">libs/</strong> - Shared packages for types,
+              utilities, and common logic used across apps
+            </li>
+          </ul>
+          <div className="mt-4 space-y-2">
+            <p className="font-medium text-foreground">Key Technologies:</p>
+            <ul className="list-disc list-inside space-y-1 ml-2">
+              <li>Electron + React + TanStack Router for cross-platform desktop support</li>
+              <li>Real-time communication via WebSocket for live agent updates</li>
+              <li>State management with Zustand for reactive UI updates</li>
+              <li>Claude Agent SDK for AI capabilities</li>
+              <li>Shared monorepo packages (@automaker/*) for code reuse</li>
+            </ul>
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: 'features',
+      title: 'Key Features',
+      icon: Sparkles,
+      content: (
+        <div>
+          <FeatureList
+            items={[
+              {
+                icon: LayoutGrid,
+                title: 'Kanban Board',
+                description:
+                  '4 columns: Backlog, In Progress, Waiting Approval, Verified. Drag and drop to manage feature lifecycle.',
+              },
+              {
+                icon: Bot,
+                title: 'AI Agent Integration',
+                description:
+                  'Powered by Claude via the Agent SDK with full file, bash, and git access.',
+              },
+              {
+                icon: Cpu,
+                title: 'Multi-Model Support',
+                description:
+                  'Claude Haiku/Sonnet/Opus models. Choose the right model for each task.',
+              },
+              {
+                icon: Brain,
+                title: 'Extended Thinking',
+                description:
+                  'Configurable thinking levels (none, low, medium, high, ultrathink) for complex tasks.',
+              },
+              {
+                icon: Zap,
+                title: 'Real-time Streaming',
+                description: 'Watch AI agents work in real-time with live output streaming.',
+              },
+              {
+                icon: GitBranch,
+                title: 'Git Worktree Isolation',
+                description:
+                  'Each feature runs in its own git worktree for safe parallel development.',
+              },
+              {
+                icon: Terminal,
+                title: 'Integrated Terminal',
+                description: 'Built-in terminal with tab support and split panes.',
+              },
+              {
+                icon: Keyboard,
+                title: 'Keyboard Shortcuts',
+                description: 'Fully customizable shortcuts for power users.',
+              },
+              {
+                icon: Palette,
+                title: '14 Themes',
+                description: 'From light to dark, retro to synthwave - pick your style.',
+              },
+              {
+                icon: Image,
+                title: 'Image Support',
+                description: 'Attach images to features for visual context.',
+              },
+              {
+                icon: TestTube,
+                title: 'Test Integration',
+                description: 'Automatic test running and TDD support for quality assurance.',
+              },
+            ]}
+          />
+        </div>
+      ),
+    },
+    {
+      id: 'data-flow',
+      title: 'How It Works (Data Flow)',
+      icon: GitBranch,
+      content: (
+        <div className="space-y-3">
+          <p>Here's what happens when you use Automaker to implement a feature:</p>
+          <ol className="list-decimal list-inside space-y-3 ml-2 mt-4">
+            <li className="text-foreground">
+              <strong>Create Feature</strong>
+              <p className="text-muted-foreground ml-5 mt-1">
+                Add a new feature card to the Kanban board with description and steps
+              </p>
+            </li>
+            <li className="text-foreground">
+              <strong>Feature Saved</strong>
+              <p className="text-muted-foreground ml-5 mt-1">
+                Feature saved to{' '}
+                <code className="px-1 py-0.5 bg-muted rounded text-xs">
+                  .automaker/features/&#123;id&#125;/feature.json
+                </code>
+              </p>
+            </li>
+            <li className="text-foreground">
+              <strong>Start Work</strong>
+              <p className="text-muted-foreground ml-5 mt-1">
+                Drag to "In Progress" or enable auto mode to start implementation
+              </p>
+            </li>
+            <li className="text-foreground">
+              <strong>Git Worktree Created</strong>
+              <p className="text-muted-foreground ml-5 mt-1">
+                Backend AutoModeService creates isolated git worktree (if enabled)
+              </p>
+            </li>
+            <li className="text-foreground">
+              <strong>Agent Executes</strong>
+              <p className="text-muted-foreground ml-5 mt-1">
+                Claude Agent SDK runs with file/bash/git tool access
+              </p>
+            </li>
+            <li className="text-foreground">
+              <strong>Progress Streamed</strong>
+              <p className="text-muted-foreground ml-5 mt-1">
+                Real-time updates via WebSocket as agent works
+              </p>
+            </li>
+            <li className="text-foreground">
+              <strong>Completion</strong>
+              <p className="text-muted-foreground ml-5 mt-1">
+                On success, feature moves to "waiting_approval" for your review
+              </p>
+            </li>
+            <li className="text-foreground">
+              <strong>Verify</strong>
+              <p className="text-muted-foreground ml-5 mt-1">
+                Review changes and move to "verified" when satisfied
+              </p>
+            </li>
+          </ol>
+        </div>
+      ),
+    },
+    {
+      id: 'structure',
+      title: 'Project Structure',
+      icon: FolderTree,
+      content: (
+        <div>
+          <p className="mb-3">The Automaker codebase is organized as follows:</p>
+          <CodeBlock title="Directory Structure">
+            {`automaker/
+├─ apps/
+│  ├─ ui/                                    Frontend (React + Electron)
+│  │  └─ src/
+│  │     ├─ routes/                          TanStack Router pages
+│  │     ├─ components/
+│  │     │  ├─ layout/                       Layout components (sidebar, etc.)
+│  │     │  ├─ views/                        View components (board, agent, etc.)
+│  │     │  ├─ dialogs/                      Dialog components
+│  │     │  └─ ui/                           shadcn/ui components
+│  │     ├─ store/                           Zustand state management
+│  │     ├─ hooks/                           Custom React hooks
+│  │     ├─ lib/                             Utilities and helpers
+│  │     ├─ config/                          App configuration files
+│  │     ├─ contexts/                        React context providers
+│  │     ├─ styles/                          CSS styles and theme definitions
+│  │     ├─ types/                           TypeScript type definitions
+│  │     ├─ utils/                           Utility functions
+│  │     ├─ main.ts                          Electron main process entry
+│  │     ├─ preload.ts                       Electron preload script
+│  │     └─ renderer.tsx                     React renderer entry
+│  │
+│  └─ server/                                Backend (Express)
+│     └─ src/
+│        ├─ routes/                          API endpoints
+│        ├─ services/                        Business logic (AutoModeService, etc.)
+│        ├─ lib/                             Library utilities
+│        ├─ middleware/                      Express middleware
+│        ├─ providers/                        AI provider implementations
+│        ├─ types/                           TypeScript type definitions
+│        └─ index.ts                         Server entry point
+│
+├─ libs/                                     Shared packages (monorepo)
+│  ├─ types/                                 TypeScript type definitions
+│  ├─ utils/                                 Common utilities (logging, errors)
+│  ├─ prompts/                               AI prompt templates
+│  ├─ platform/                              Platform & path utilities
+│  ├─ model-resolver/                        Claude model resolution
+│  ├─ dependency-resolver/                   Feature dependency ordering
+│  └─ git-utils/                             Git operations & parsing
+│
+├─ docs/                                     Documentation
+└─ package.json                              Workspace root
+`}
+          </CodeBlock>
+        </div>
+      ),
+    },
+    {
+      id: 'components',
+      title: 'Key Components',
+      icon: Component,
+      content: (
+        <div className="space-y-3">
+          <p>The main UI components that make up Automaker:</p>
+          <div className="grid gap-2 mt-4">
+            {[
+              {
+                file: 'layout/sidebar.tsx',
+                desc: 'Main navigation with project picker and view switching',
+              },
+              {
+                file: 'views/board-view.tsx',
+                desc: 'Kanban board with drag-and-drop cards',
+              },
+              {
+                file: 'views/agent-view.tsx',
+                desc: 'AI chat interface for conversational development',
+              },
+              {
+                file: 'views/spec-view/',
+                desc: 'Project specification editor with AI generation',
+              },
+              {
+                file: 'views/context-view.tsx',
+                desc: 'Context file manager for AI context',
+              },
+              {
+                file: 'views/terminal-view/',
+                desc: 'Integrated terminal with splits and tabs',
+              },
+              {
+                file: 'store/app-store.ts',
+                desc: 'Central Zustand state management',
+              },
+            ].map((item) => (
+              <div
+                key={item.file}
+                className="flex items-center gap-3 p-2 rounded bg-muted/30 border border-border/50"
+              >
+                <code className="text-xs font-mono text-brand-400 bg-brand-500/10 px-2 py-0.5 rounded">
+                  {item.file}
+                </code>
+                <span className="text-xs text-muted-foreground">{item.desc}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: 'configuration',
+      title: 'Configuration',
+      icon: Settings,
+      content: (
+        <div className="space-y-3">
+          <p>
+            Automaker stores project configuration in the{' '}
+            <code className="px-1 py-0.5 bg-muted rounded text-xs">.automaker/</code> directory:
+          </p>
+          <div className="grid gap-2 mt-4">
+            {[
+              {
+                file: 'app_spec.txt',
+                desc: 'Project specification describing your app for AI context',
+              },
+              {
+                file: 'context/',
+                desc: 'Additional context files (docs, examples) for AI',
+              },
+              {
+                file: 'features/',
+                desc: 'Feature definitions with descriptions and steps',
+              },
+            ].map((item) => (
+              <div
+                key={item.file}
+                className="flex items-center gap-3 p-2 rounded bg-muted/30 border border-border/50"
+              >
+                <code className="text-xs font-mono text-brand-400 bg-brand-500/10 px-2 py-0.5 rounded">
+                  {item.file}
+                </code>
+                <span className="text-xs text-muted-foreground">{item.desc}</span>
+              </div>
+            ))}
+          </div>
+          <div className="mt-4 p-3 rounded-lg bg-muted/30 border border-border/50">
+            <p className="text-sm text-foreground font-medium mb-2">Tip: App Spec Best Practices</p>
+            <ul className="list-disc list-inside space-y-1 text-xs text-muted-foreground">
+              <li>Include your tech stack and key dependencies</li>
+              <li>Describe the project structure and conventions</li>
+              <li>List any important patterns or architectural decisions</li>
+              <li>Note testing requirements and coding standards</li>
+            </ul>
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: 'getting-started',
+      title: 'Getting Started',
+      icon: PlayCircle,
+      content: (
+        <div className="space-y-3">
+          <p>Follow these steps to start building with Automaker:</p>
+          <ol className="list-decimal list-inside space-y-4 ml-2 mt-4">
+            <li className="text-foreground">
+              <strong>Create or Open a Project</strong>
+              <p className="text-muted-foreground ml-5 mt-1">
+                Use the sidebar to create a new project or open an existing folder
+              </p>
+            </li>
+            <li className="text-foreground">
+              <strong>Write an App Spec</strong>
+              <p className="text-muted-foreground ml-5 mt-1">
+                Go to Spec Editor and describe your project. This helps AI understand your codebase.
+              </p>
+            </li>
+            <li className="text-foreground">
+              <strong>Add Context (Optional)</strong>
+              <p className="text-muted-foreground ml-5 mt-1">
+                Add relevant documentation or examples to the Context view for better AI results
+              </p>
+            </li>
+            <li className="text-foreground">
+              <strong>Create Features</strong>
+              <p className="text-muted-foreground ml-5 mt-1">
+                Add feature cards to your Kanban board with clear descriptions and implementation
+                steps
+              </p>
+            </li>
+            <li className="text-foreground">
+              <strong>Start Implementation</strong>
+              <p className="text-muted-foreground ml-5 mt-1">
+                Drag features to "In Progress" or enable auto mode to let AI work
+              </p>
+            </li>
+            <li className="text-foreground">
+              <strong>Review and Verify</strong>
+              <p className="text-muted-foreground ml-5 mt-1">
+                Check completed features, review changes, and mark as verified
+              </p>
+            </li>
+          </ol>
+          <div className="mt-6 p-4 rounded-lg bg-brand-500/10 border border-brand-500/20">
+            <p className="text-brand-400 text-sm font-medium mb-2">Pro Tips:</p>
+            <ul className="list-disc list-inside space-y-1 text-xs text-brand-400/80">
+              <li>
+                Use keyboard shortcuts for faster navigation (press{' '}
+                <code className="px-1 py-0.5 bg-brand-500/20 rounded">?</code> to see all)
+              </li>
+              <li>Enable git worktree isolation for parallel feature development</li>
+              <li>Keep your app spec up to date as your project evolves</li>
+            </ul>
+          </div>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden bg-background">
+      {/* Header */}
+      <div className="border-b border-border bg-card/30 backdrop-blur-sm px-6 py-4 shrink-0">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-xl font-semibold text-foreground">Wiki</h1>
+            <p className="text-sm text-muted-foreground mt-1">
+              Learn how Automaker works and how to use it effectively
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={expandAll}
+              className="px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
+            >
+              Expand All
+            </button>
+            <button
+              onClick={collapseAll}
+              className="px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
+            >
+              Collapse All
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-4xl mx-auto px-6 py-6 space-y-3">
+          {sections.map((section) => (
+            <CollapsibleSection
+              key={section.id}
+              section={section}
+              isOpen={openSections.has(section.id)}
+              onToggle={() => toggleSection(section.id)}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/temp_repo/apps/ui/src/config/api-providers.ts b/temp_repo/apps/ui/src/config/api-providers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..140d0c24de687002ee5ec7d71305d6e8fdb10b13
--- /dev/null
+++ b/temp_repo/apps/ui/src/config/api-providers.ts
@@ -0,0 +1,183 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { ApiKeys } from '@/store/app-store';
+
+export type ProviderKey = 'anthropic' | 'google' | 'openai' | 'zai';
+
+export interface ProviderConfig {
+  key: ProviderKey;
+  label: string;
+  inputId: string;
+  placeholder: string;
+  value: string;
+  setValue: Dispatch<SetStateAction<string>>;
+  showValue: boolean;
+  setShowValue: Dispatch<SetStateAction<boolean>>;
+  hasStoredKey: string | null | undefined;
+  inputTestId: string;
+  toggleTestId: string;
+  testButton: {
+    onClick: () => Promise<void> | void;
+    disabled: boolean;
+    loading: boolean;
+    testId: string;
+  };
+  result: { success: boolean; message: string } | null;
+  resultTestId: string;
+  resultMessageTestId: string;
+  descriptionPrefix: string;
+  descriptionLinkHref: string;
+  descriptionLinkText: string;
+  descriptionSuffix?: string;
+}
+
+export interface ProviderConfigParams {
+  apiKeys: ApiKeys;
+  anthropic: {
+    value: string;
+    setValue: Dispatch<SetStateAction<string>>;
+    show: boolean;
+    setShow: Dispatch<SetStateAction<boolean>>;
+    testing: boolean;
+    onTest: () => Promise<void>;
+    result: { success: boolean; message: string } | null;
+  };
+  google: {
+    value: string;
+    setValue: Dispatch<SetStateAction<string>>;
+    show: boolean;
+    setShow: Dispatch<SetStateAction<boolean>>;
+    testing: boolean;
+    onTest: () => Promise<void>;
+    result: { success: boolean; message: string } | null;
+  };
+  openai: {
+    value: string;
+    setValue: Dispatch<SetStateAction<string>>;
+    show: boolean;
+    setShow: Dispatch<SetStateAction<boolean>>;
+    testing: boolean;
+    onTest: () => Promise<void>;
+    result: { success: boolean; message: string } | null;
+  };
+  zai: {
+    value: string;
+    setValue: Dispatch<SetStateAction<string>>;
+    show: boolean;
+    setShow: Dispatch<SetStateAction<boolean>>;
+    testing: boolean;
+    onTest: () => Promise<void>;
+    result: { success: boolean; message: string } | null;
+  };
+}
+
+export const buildProviderConfigs = ({
+  apiKeys,
+  anthropic,
+  openai,
+  zai,
+}: ProviderConfigParams): ProviderConfig[] => [
+  {
+    key: 'anthropic',
+    label: 'Anthropic API Key',
+    inputId: 'anthropic-key',
+    placeholder: 'sk-ant-...',
+    value: anthropic.value,
+    setValue: anthropic.setValue,
+    showValue: anthropic.show,
+    setShowValue: anthropic.setShow,
+    hasStoredKey: apiKeys.anthropic,
+    inputTestId: 'anthropic-api-key-input',
+    toggleTestId: 'toggle-anthropic-visibility',
+    testButton: {
+      onClick: anthropic.onTest,
+      disabled: !anthropic.value || anthropic.testing,
+      loading: anthropic.testing,
+      testId: 'test-claude-connection',
+    },
+    result: anthropic.result,
+    resultTestId: 'test-connection-result',
+    resultMessageTestId: 'test-connection-message',
+    descriptionPrefix: 'Used for Claude AI features. Get your key at',
+    descriptionLinkHref: 'https://console.anthropic.com/account/keys',
+    descriptionLinkText: 'console.anthropic.com',
+    descriptionSuffix: '.',
+  },
+  {
+    key: 'openai',
+    label: 'OpenAI API Key',
+    inputId: 'openai-key',
+    placeholder: 'sk-...',
+    value: openai.value,
+    setValue: openai.setValue,
+    showValue: openai.show,
+    setShowValue: openai.setShow,
+    hasStoredKey: apiKeys.openai,
+    inputTestId: 'openai-api-key-input',
+    toggleTestId: 'toggle-openai-visibility',
+    testButton: {
+      onClick: openai.onTest,
+      disabled: !openai.value || openai.testing,
+      loading: openai.testing,
+      testId: 'test-openai-connection',
+    },
+    result: openai.result,
+    resultTestId: 'openai-test-connection-result',
+    resultMessageTestId: 'openai-test-connection-message',
+    descriptionPrefix: 'Used for Codex and OpenAI features. Get your key at',
+    descriptionLinkHref: 'https://platform.openai.com/api-keys',
+    descriptionLinkText: 'platform.openai.com',
+    descriptionSuffix: '.',
+  },
+  {
+    key: 'zai',
+    label: 'z.ai API Key',
+    inputId: 'zai-key',
+    placeholder: 'Enter your z.ai API key',
+    value: zai.value,
+    setValue: zai.setValue,
+    showValue: zai.show,
+    setShowValue: zai.setShow,
+    hasStoredKey: apiKeys.zai,
+    inputTestId: 'zai-api-key-input',
+    toggleTestId: 'toggle-zai-visibility',
+    testButton: {
+      onClick: zai.onTest,
+      disabled: !zai.value || zai.testing,
+      loading: zai.testing,
+      testId: 'test-zai-connection',
+    },
+    result: zai.result,
+    resultTestId: 'zai-test-connection-result',
+    resultMessageTestId: 'zai-test-connection-message',
+    descriptionPrefix: 'Used for z.ai usage tracking and GLM models. Get your key at',
+    descriptionLinkHref: 'https://z.ai',
+    descriptionLinkText: 'z.ai',
+    descriptionSuffix: '.',
+  },
+  // {
+  //   key: "google",
+  //   label: "Google API Key (Gemini)",
+  //   inputId: "google-key",
+  //   placeholder: "AIza...",
+  //   value: google.value,
+  //   setValue: google.setValue,
+  //   showValue: google.show,
+  //   setShowValue: google.setShow,
+  //   hasStoredKey: apiKeys.google,
+  //   inputTestId: "google-api-key-input",
+  //   toggleTestId: "toggle-google-visibility",
+  //   testButton: {
+  //     onClick: google.onTest,
+  //     disabled: !google.value || google.testing,
+  //     loading: google.testing,
+  //     testId: "test-gemini-connection",
+  //   },
+  //   result: google.result,
+  //   resultTestId: "gemini-test-connection-result",
+  //   resultMessageTestId: "gemini-test-connection-message",
+  //   descriptionPrefix:
+  //     "Used for Gemini AI features (including image/design prompts). Get your key at",
+  //   descriptionLinkHref: "https://makersuite.google.com/app/apikey",
+  //   descriptionLinkText: "makersuite.google.com",
+  // },
+];
diff --git a/temp_repo/apps/ui/src/config/app-config.ts b/temp_repo/apps/ui/src/config/app-config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/temp_repo/apps/ui/src/config/model-config.ts b/temp_repo/apps/ui/src/config/model-config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..12362973b89df258462448f2486fd2e002477d6c
--- /dev/null
+++ b/temp_repo/apps/ui/src/config/model-config.ts
@@ -0,0 +1,56 @@
+/**
+ * Model Configuration - Centralized model settings for the app
+ *
+ * Models can be overridden via environment variables:
+ * - AUTOMAKER_MODEL_CHAT: Model for chat interactions
+ * - AUTOMAKER_MODEL_DEFAULT: Fallback model for all operations
+ */
+
+// Import shared model constants and types
+import { CLAUDE_MODEL_MAP, DEFAULT_MODELS } from '@automaker/types';
+import { resolveModelString } from '@automaker/model-resolver';
+
+// Re-export for backward compatibility
+export { CLAUDE_MODEL_MAP, DEFAULT_MODELS, resolveModelString };
+
+/**
+ * Get the model for chat operations
+ *
+ * Priority:
+ * 1. Explicit model parameter
+ * 2. AUTOMAKER_MODEL_CHAT environment variable
+ * 3. AUTOMAKER_MODEL_DEFAULT environment variable
+ * 4. Default chat model
+ */
+export function getChatModel(explicitModel?: string): string {
+  if (explicitModel) {
+    return resolveModelString(explicitModel);
+  }
+
+  const envModel = import.meta.env.AUTOMAKER_MODEL_CHAT || import.meta.env.AUTOMAKER_MODEL_DEFAULT;
+
+  if (envModel) {
+    return resolveModelString(envModel);
+  }
+
+  return DEFAULT_MODELS.claude;
+}
+
+/**
+ * Default allowed tools for chat interactions
+ */
+export const CHAT_TOOLS = [
+  'Read',
+  'Write',
+  'Edit',
+  'Glob',
+  'Grep',
+  'Bash',
+  'WebSearch',
+  'WebFetch',
+] as const;
+
+/**
+ * Default max turns for chat
+ */
+export const CHAT_MAX_TURNS = 1000;
diff --git a/temp_repo/apps/ui/src/config/terminal-themes.ts b/temp_repo/apps/ui/src/config/terminal-themes.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1983c2c762ee5d68871e3288427db4e0debb09bd
--- /dev/null
+++ b/temp_repo/apps/ui/src/config/terminal-themes.ts
@@ -0,0 +1,654 @@
+/**
+ * Terminal themes that match the app themes
+ * Each theme provides colors for xterm.js terminal emulator
+ */
+
+import type { ThemeMode } from '@/store/app-store';
+import {
+  UI_MONO_FONT_OPTIONS,
+  DEFAULT_FONT_VALUE,
+  type UIFontOption,
+} from '@/config/ui-font-options';
+
+export interface TerminalTheme {
+  background: string;
+  foreground: string;
+  cursor: string;
+  cursorAccent: string;
+  selectionBackground: string;
+  selectionForeground?: string;
+  black: string;
+  red: string;
+  green: string;
+  yellow: string;
+  blue: string;
+  magenta: string;
+  cyan: string;
+  white: string;
+  brightBlack: string;
+  brightRed: string;
+  brightGreen: string;
+  brightYellow: string;
+  brightBlue: string;
+  brightMagenta: string;
+  brightCyan: string;
+  brightWhite: string;
+  // Search highlighting colors - for xterm SearchAddon
+  searchMatchBackground: string;
+  searchMatchBorder: string;
+  searchActiveMatchBackground: string;
+  searchActiveMatchBorder: string;
+}
+
+/**
+ * Terminal font options for user selection
+ *
+ * Uses the same fonts as UI_MONO_FONT_OPTIONS for consistency across the app.
+ * All fonts listed here are bundled with the app via @fontsource packages
+ * or are system fonts with appropriate fallbacks.
+ */
+
+// Re-export for backwards compatibility
+export type TerminalFontOption = UIFontOption;
+
+/**
+ * Terminal font options - reuses UI_MONO_FONT_OPTIONS with terminal-specific default
+ *
+ * The 'default' value means "use the default terminal font" (Menlo/Monaco)
+ */
+export const TERMINAL_FONT_OPTIONS: readonly UIFontOption[] = UI_MONO_FONT_OPTIONS.map((option) => {
+  // Replace the UI default label with terminal-specific default
+  if (option.value === DEFAULT_FONT_VALUE) {
+    return { value: option.value, label: 'Default (Menlo / Monaco)' };
+  }
+  return option;
+});
+
+/**
+ * Default terminal font family
+ * Uses the DEFAULT_FONT_VALUE sentinel which maps to Menlo/Monaco
+ */
+export const DEFAULT_TERMINAL_FONT = DEFAULT_FONT_VALUE;
+
+/**
+ * Get the actual font family CSS value for terminal
+ * Converts DEFAULT_FONT_VALUE to the actual Menlo/Monaco font stack
+ */
+export function getTerminalFontFamily(fontValue: string | undefined): string {
+  if (!fontValue || fontValue === DEFAULT_FONT_VALUE) {
+    return "Menlo, Monaco, 'Courier New', monospace";
+  }
+  return fontValue;
+}
+
+// Dark theme (default) - true black background with white foreground
+const darkTheme: TerminalTheme = {
+  background: '#000000',
+  foreground: '#ffffff',
+  cursor: '#ffffff',
+  cursorAccent: '#000000',
+  selectionBackground: '#264f78',
+  black: '#1e1e1e',
+  red: '#f44747',
+  green: '#6a9955',
+  yellow: '#dcdcaa',
+  blue: '#569cd6',
+  magenta: '#c586c0',
+  cyan: '#4ec9b0',
+  white: '#d4d4d4',
+  brightBlack: '#808080',
+  brightRed: '#f44747',
+  brightGreen: '#6a9955',
+  brightYellow: '#dcdcaa',
+  brightBlue: '#569cd6',
+  brightMagenta: '#c586c0',
+  brightCyan: '#4ec9b0',
+  brightWhite: '#ffffff',
+  // Search colors - bright yellow for visibility on dark background
+  searchMatchBackground: '#6b5300',
+  searchMatchBorder: '#e2ac00',
+  searchActiveMatchBackground: '#ff8c00',
+  searchActiveMatchBorder: '#ffb74d',
+};
+
+// Light theme
+const lightTheme: TerminalTheme = {
+  background: '#ffffff',
+  foreground: '#383a42',
+  cursor: '#383a42',
+  cursorAccent: '#ffffff',
+  selectionBackground: '#add6ff',
+  black: '#383a42',
+  red: '#e45649',
+  green: '#50a14f',
+  yellow: '#c18401',
+  blue: '#4078f2',
+  magenta: '#a626a4',
+  cyan: '#0184bc',
+  white: '#fafafa',
+  brightBlack: '#4f525e',
+  brightRed: '#e06c75',
+  brightGreen: '#98c379',
+  brightYellow: '#e5c07b',
+  brightBlue: '#61afef',
+  brightMagenta: '#c678dd',
+  brightCyan: '#56b6c2',
+  brightWhite: '#ffffff',
+  // Search colors - darker for visibility on light background
+  searchMatchBackground: '#fff3b0',
+  searchMatchBorder: '#c9a500',
+  searchActiveMatchBackground: '#ffcc00',
+  searchActiveMatchBorder: '#996600',
+};
+
+// Retro / Cyberpunk theme - neon green on black
+const retroTheme: TerminalTheme = {
+  background: '#000000',
+  foreground: '#39ff14',
+  cursor: '#39ff14',
+  cursorAccent: '#000000',
+  selectionBackground: '#39ff14',
+  selectionForeground: '#000000',
+  black: '#000000',
+  red: '#ff0055',
+  green: '#39ff14',
+  yellow: '#ffff00',
+  blue: '#00ffff',
+  magenta: '#ff00ff',
+  cyan: '#00ffff',
+  white: '#39ff14',
+  brightBlack: '#555555',
+  brightRed: '#ff5555',
+  brightGreen: '#55ff55',
+  brightYellow: '#ffff55',
+  brightBlue: '#55ffff',
+  brightMagenta: '#ff55ff',
+  brightCyan: '#55ffff',
+  brightWhite: '#ffffff',
+  // Search colors - magenta/pink for contrast with green text
+  searchMatchBackground: '#660066',
+  searchMatchBorder: '#ff00ff',
+  searchActiveMatchBackground: '#cc00cc',
+  searchActiveMatchBorder: '#ff66ff',
+};
+
+// Dracula theme
+const draculaTheme: TerminalTheme = {
+  background: '#282a36',
+  foreground: '#f8f8f2',
+  cursor: '#f8f8f2',
+  cursorAccent: '#282a36',
+  selectionBackground: '#44475a',
+  black: '#21222c',
+  red: '#ff5555',
+  green: '#50fa7b',
+  yellow: '#f1fa8c',
+  blue: '#bd93f9',
+  magenta: '#ff79c6',
+  cyan: '#8be9fd',
+  white: '#f8f8f2',
+  brightBlack: '#6272a4',
+  brightRed: '#ff6e6e',
+  brightGreen: '#69ff94',
+  brightYellow: '#ffffa5',
+  brightBlue: '#d6acff',
+  brightMagenta: '#ff92df',
+  brightCyan: '#a4ffff',
+  brightWhite: '#ffffff',
+  // Search colors - orange for visibility
+  searchMatchBackground: '#8b5a00',
+  searchMatchBorder: '#ffb86c',
+  searchActiveMatchBackground: '#ff9500',
+  searchActiveMatchBorder: '#ffcc80',
+};
+
+// Nord theme
+const nordTheme: TerminalTheme = {
+  background: '#2e3440',
+  foreground: '#d8dee9',
+  cursor: '#d8dee9',
+  cursorAccent: '#2e3440',
+  selectionBackground: '#434c5e',
+  black: '#3b4252',
+  red: '#bf616a',
+  green: '#a3be8c',
+  yellow: '#ebcb8b',
+  blue: '#81a1c1',
+  magenta: '#b48ead',
+  cyan: '#88c0d0',
+  white: '#e5e9f0',
+  brightBlack: '#4c566a',
+  brightRed: '#bf616a',
+  brightGreen: '#a3be8c',
+  brightYellow: '#ebcb8b',
+  brightBlue: '#81a1c1',
+  brightMagenta: '#b48ead',
+  brightCyan: '#8fbcbb',
+  brightWhite: '#eceff4',
+  // Search colors - warm yellow/orange for cold blue theme
+  searchMatchBackground: '#5e4a00',
+  searchMatchBorder: '#ebcb8b',
+  searchActiveMatchBackground: '#d08770',
+  searchActiveMatchBorder: '#e8a87a',
+};
+
+// Monokai theme
+const monokaiTheme: TerminalTheme = {
+  background: '#272822',
+  foreground: '#f8f8f2',
+  cursor: '#f8f8f2',
+  cursorAccent: '#272822',
+  selectionBackground: '#49483e',
+  black: '#272822',
+  red: '#f92672',
+  green: '#a6e22e',
+  yellow: '#f4bf75',
+  blue: '#66d9ef',
+  magenta: '#ae81ff',
+  cyan: '#a1efe4',
+  white: '#f8f8f2',
+  brightBlack: '#75715e',
+  brightRed: '#f92672',
+  brightGreen: '#a6e22e',
+  brightYellow: '#f4bf75',
+  brightBlue: '#66d9ef',
+  brightMagenta: '#ae81ff',
+  brightCyan: '#a1efe4',
+  brightWhite: '#f9f8f5',
+  // Search colors - orange/gold for contrast
+  searchMatchBackground: '#6b4400',
+  searchMatchBorder: '#f4bf75',
+  searchActiveMatchBackground: '#e69500',
+  searchActiveMatchBorder: '#ffd080',
+};
+
+// Tokyo Night theme
+const tokyonightTheme: TerminalTheme = {
+  background: '#1a1b26',
+  foreground: '#a9b1d6',
+  cursor: '#c0caf5',
+  cursorAccent: '#1a1b26',
+  selectionBackground: '#33467c',
+  black: '#15161e',
+  red: '#f7768e',
+  green: '#9ece6a',
+  yellow: '#e0af68',
+  blue: '#7aa2f7',
+  magenta: '#bb9af7',
+  cyan: '#7dcfff',
+  white: '#a9b1d6',
+  brightBlack: '#414868',
+  brightRed: '#f7768e',
+  brightGreen: '#9ece6a',
+  brightYellow: '#e0af68',
+  brightBlue: '#7aa2f7',
+  brightMagenta: '#bb9af7',
+  brightCyan: '#7dcfff',
+  brightWhite: '#c0caf5',
+  // Search colors - warm orange for cold blue theme
+  searchMatchBackground: '#5c4a00',
+  searchMatchBorder: '#e0af68',
+  searchActiveMatchBackground: '#ff9e64',
+  searchActiveMatchBorder: '#ffb380',
+};
+
+// Solarized Dark theme (improved contrast for WCAG compliance)
+const solarizedTheme: TerminalTheme = {
+  background: '#002b36',
+  foreground: '#93a1a1', // Changed from #839496 (base0) to #93a1a1 (base1) for better contrast
+  cursor: '#93a1a1',
+  cursorAccent: '#002b36',
+  selectionBackground: '#073642',
+  black: '#073642',
+  red: '#dc322f',
+  green: '#859900',
+  yellow: '#b58900',
+  blue: '#268bd2',
+  magenta: '#d33682',
+  cyan: '#2aa198',
+  white: '#eee8d5',
+  brightBlack: '#002b36',
+  brightRed: '#cb4b16',
+  brightGreen: '#586e75',
+  brightYellow: '#657b83',
+  brightBlue: '#839496',
+  brightMagenta: '#6c71c4',
+  brightCyan: '#93a1a1',
+  brightWhite: '#fdf6e3',
+  // Search colors - orange (solarized orange) for visibility
+  searchMatchBackground: '#5c3d00',
+  searchMatchBorder: '#b58900',
+  searchActiveMatchBackground: '#cb4b16',
+  searchActiveMatchBorder: '#e07040',
+};
+
+// Gruvbox Dark theme
+const gruvboxTheme: TerminalTheme = {
+  background: '#282828',
+  foreground: '#ebdbb2',
+  cursor: '#ebdbb2',
+  cursorAccent: '#282828',
+  selectionBackground: '#504945',
+  black: '#282828',
+  red: '#cc241d',
+  green: '#98971a',
+  yellow: '#d79921',
+  blue: '#458588',
+  magenta: '#b16286',
+  cyan: '#689d6a',
+  white: '#a89984',
+  brightBlack: '#928374',
+  brightRed: '#fb4934',
+  brightGreen: '#b8bb26',
+  brightYellow: '#fabd2f',
+  brightBlue: '#83a598',
+  brightMagenta: '#d3869b',
+  brightCyan: '#8ec07c',
+  brightWhite: '#ebdbb2',
+  // Search colors - bright orange for gruvbox
+  searchMatchBackground: '#6b4500',
+  searchMatchBorder: '#d79921',
+  searchActiveMatchBackground: '#fe8019',
+  searchActiveMatchBorder: '#ffaa40',
+};
+
+// Catppuccin Mocha theme
+const catppuccinTheme: TerminalTheme = {
+  background: '#1e1e2e',
+  foreground: '#cdd6f4',
+  cursor: '#f5e0dc',
+  cursorAccent: '#1e1e2e',
+  selectionBackground: '#45475a',
+  black: '#45475a',
+  red: '#f38ba8',
+  green: '#a6e3a1',
+  yellow: '#f9e2af',
+  blue: '#89b4fa',
+  magenta: '#cba6f7',
+  cyan: '#94e2d5',
+  white: '#bac2de',
+  brightBlack: '#585b70',
+  brightRed: '#f38ba8',
+  brightGreen: '#a6e3a1',
+  brightYellow: '#f9e2af',
+  brightBlue: '#89b4fa',
+  brightMagenta: '#cba6f7',
+  brightCyan: '#94e2d5',
+  brightWhite: '#a6adc8',
+  // Search colors - peach/orange from catppuccin palette
+  searchMatchBackground: '#5c4020',
+  searchMatchBorder: '#fab387',
+  searchActiveMatchBackground: '#fab387',
+  searchActiveMatchBorder: '#fcc8a0',
+};
+
+// One Dark theme
+const onedarkTheme: TerminalTheme = {
+  background: '#282c34',
+  foreground: '#abb2bf',
+  cursor: '#528bff',
+  cursorAccent: '#282c34',
+  selectionBackground: '#3e4451',
+  black: '#282c34',
+  red: '#e06c75',
+  green: '#98c379',
+  yellow: '#e5c07b',
+  blue: '#61afef',
+  magenta: '#c678dd',
+  cyan: '#56b6c2',
+  white: '#abb2bf',
+  brightBlack: '#5c6370',
+  brightRed: '#e06c75',
+  brightGreen: '#98c379',
+  brightYellow: '#e5c07b',
+  brightBlue: '#61afef',
+  brightMagenta: '#c678dd',
+  brightCyan: '#56b6c2',
+  brightWhite: '#ffffff',
+  // Search colors - orange/gold for visibility
+  searchMatchBackground: '#5c4500',
+  searchMatchBorder: '#e5c07b',
+  searchActiveMatchBackground: '#d19a66',
+  searchActiveMatchBorder: '#e8b888',
+};
+
+// Synthwave '84 theme
+const synthwaveTheme: TerminalTheme = {
+  background: '#262335',
+  foreground: '#ffffff',
+  cursor: '#ff7edb',
+  cursorAccent: '#262335',
+  selectionBackground: '#463465',
+  black: '#262335',
+  red: '#fe4450',
+  green: '#72f1b8',
+  yellow: '#fede5d',
+  blue: '#03edf9',
+  magenta: '#ff7edb',
+  cyan: '#03edf9',
+  white: '#ffffff',
+  brightBlack: '#614d85',
+  brightRed: '#fe4450',
+  brightGreen: '#72f1b8',
+  brightYellow: '#f97e72',
+  brightBlue: '#03edf9',
+  brightMagenta: '#ff7edb',
+  brightCyan: '#03edf9',
+  brightWhite: '#ffffff',
+  // Search colors - hot pink/magenta for synthwave aesthetic
+  searchMatchBackground: '#6b2a7a',
+  searchMatchBorder: '#ff7edb',
+  searchActiveMatchBackground: '#ff7edb',
+  searchActiveMatchBorder: '#ffffff',
+};
+
+// Red theme - Dark theme with red accents
+const redTheme: TerminalTheme = {
+  background: '#1a0a0a',
+  foreground: '#c8b0b0',
+  cursor: '#ff4444',
+  cursorAccent: '#1a0a0a',
+  selectionBackground: '#5a2020',
+  black: '#2a1010',
+  red: '#ff4444',
+  green: '#6a9a6a',
+  yellow: '#ccaa55',
+  blue: '#6688aa',
+  magenta: '#aa5588',
+  cyan: '#558888',
+  white: '#b0a0a0',
+  brightBlack: '#6a4040',
+  brightRed: '#ff6666',
+  brightGreen: '#88bb88',
+  brightYellow: '#ddbb66',
+  brightBlue: '#88aacc',
+  brightMagenta: '#cc77aa',
+  brightCyan: '#77aaaa',
+  brightWhite: '#d0c0c0',
+  // Search colors - orange/gold to contrast with red theme
+  searchMatchBackground: '#5a3520',
+  searchMatchBorder: '#ccaa55',
+  searchActiveMatchBackground: '#ddbb66',
+  searchActiveMatchBorder: '#ffdd88',
+};
+
+// Cream theme - Warm, soft, easy on the eyes
+const creamTheme: TerminalTheme = {
+  background: '#f5f3ee',
+  foreground: '#5a4a3a',
+  cursor: '#9d6b53',
+  cursorAccent: '#f5f3ee',
+  selectionBackground: '#d4c4b0',
+  black: '#5a4a3a',
+  red: '#c85a4f',
+  green: '#7a9a6a',
+  yellow: '#c9a554',
+  blue: '#6b8aaa',
+  magenta: '#a66a8a',
+  cyan: '#5a9a8a',
+  white: '#b0a090',
+  brightBlack: '#8a7a6a',
+  brightRed: '#e07060',
+  brightGreen: '#90b080',
+  brightYellow: '#e0bb70',
+  brightBlue: '#80a0c0',
+  brightMagenta: '#c080a0',
+  brightCyan: '#70b0a0',
+  brightWhite: '#d0c0b0',
+  // Search colors - blue for contrast on light cream background
+  searchMatchBackground: '#c0d4e8',
+  searchMatchBorder: '#6b8aaa',
+  searchActiveMatchBackground: '#6b8aaa',
+  searchActiveMatchBorder: '#4a6a8a',
+};
+
+// Sunset theme - Mellow oranges and soft pastels
+const sunsetTheme: TerminalTheme = {
+  background: '#1e1a24',
+  foreground: '#f2e8dd',
+  cursor: '#dd8855',
+  cursorAccent: '#1e1a24',
+  selectionBackground: '#3a2a40',
+  black: '#1e1a24',
+  red: '#dd6655',
+  green: '#88bb77',
+  yellow: '#ddaa66',
+  blue: '#6699cc',
+  magenta: '#cc7799',
+  cyan: '#66ccaa',
+  white: '#e8d8c8',
+  brightBlack: '#4a3a50',
+  brightRed: '#ee8866',
+  brightGreen: '#99cc88',
+  brightYellow: '#eebb77',
+  brightBlue: '#88aadd',
+  brightMagenta: '#dd88aa',
+  brightCyan: '#88ddbb',
+  brightWhite: '#f5e8dd',
+  // Search colors - orange for warm sunset theme
+  searchMatchBackground: '#5a3a30',
+  searchMatchBorder: '#ddaa66',
+  searchActiveMatchBackground: '#eebb77',
+  searchActiveMatchBorder: '#ffdd99',
+};
+
+// Gray theme - Modern, minimal gray scheme inspired by Cursor
+const grayTheme: TerminalTheme = {
+  background: '#2a2d32',
+  foreground: '#d0d0d5',
+  cursor: '#8fa0c0',
+  cursorAccent: '#2a2d32',
+  selectionBackground: '#3a3f48',
+  black: '#2a2d32',
+  red: '#d87070',
+  green: '#78b088',
+  yellow: '#d0b060',
+  blue: '#7090c0',
+  magenta: '#a880b0',
+  cyan: '#60a0b0',
+  white: '#b0b0b8',
+  brightBlack: '#606068',
+  brightRed: '#e88888',
+  brightGreen: '#90c8a0',
+  brightYellow: '#e0c878',
+  brightBlue: '#90b0d8',
+  brightMagenta: '#c098c8',
+  brightCyan: '#80b8c8',
+  brightWhite: '#e0e0e8',
+  // Search colors - blue for modern feel
+  searchMatchBackground: '#3a4a60',
+  searchMatchBorder: '#7090c0',
+  searchActiveMatchBackground: '#90b0d8',
+  searchActiveMatchBorder: '#b0d0f0',
+};
+
+// Theme mapping
+const terminalThemes: Record<ThemeMode, TerminalTheme> = {
+  // Special
+  system: darkTheme, // Will be resolved at runtime
+  // Dark themes
+  dark: darkTheme,
+  retro: retroTheme,
+  dracula: draculaTheme,
+  nord: nordTheme,
+  monokai: monokaiTheme,
+  tokyonight: tokyonightTheme,
+  solarized: solarizedTheme,
+  gruvbox: gruvboxTheme,
+  catppuccin: catppuccinTheme,
+  onedark: onedarkTheme,
+  synthwave: synthwaveTheme,
+  red: redTheme,
+  sunset: sunsetTheme,
+  gray: grayTheme,
+  forest: gruvboxTheme, // Green-ish theme, gruvbox is close
+  ocean: nordTheme, // Blue-ish theme, nord is close
+  ember: monokaiTheme, // Warm orange theme, monokai is close
+  'ayu-dark': darkTheme, // Deep dark with warm accents
+  'ayu-mirage': darkTheme, // Soft dark with golden accents
+  matcha: nordTheme, // Calming blue-gray with sage green
+  // Light themes
+  light: lightTheme,
+  cream: creamTheme,
+  solarizedlight: lightTheme, // TODO: Create dedicated solarized light terminal theme
+  github: lightTheme, // TODO: Create dedicated github terminal theme
+  paper: lightTheme,
+  rose: lightTheme,
+  mint: lightTheme,
+  lavender: lightTheme,
+  sand: creamTheme, // Warm tones like cream
+  sky: lightTheme,
+  peach: creamTheme, // Warm tones like cream
+  snow: lightTheme,
+  sepia: creamTheme, // Warm tones like cream
+  gruvboxlight: creamTheme, // Warm light theme
+  nordlight: lightTheme, // Cool light theme
+  blossom: lightTheme,
+  'ayu-light': lightTheme, // Clean light with orange accents
+  onelight: lightTheme, // Atom One Light - blue accent
+  bluloco: lightTheme, // Bluloco - cyan-blue accent
+  feather: lightTheme, // Feather - orange accent
+};
+
+/**
+ * Get terminal theme for the given app theme
+ * For "system" theme, it checks the user's system preference
+ */
+export function getTerminalTheme(theme: ThemeMode): TerminalTheme {
+  if (theme === 'system') {
+    // Check system preference
+    if (typeof window !== 'undefined') {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      return prefersDark ? darkTheme : lightTheme;
+    }
+    return darkTheme; // Default to dark for SSR
+  }
+  return terminalThemes[theme] || darkTheme;
+}
+
+/**
+ * Get terminal theme with optional custom color overrides
+ * @param theme - The app theme mode
+ * @param customBackgroundColor - Optional custom background color (hex string) to override theme default
+ * @param customForegroundColor - Optional custom foreground/text color (hex string) to override theme default
+ * @returns Terminal theme with custom colors if provided
+ */
+export function getTerminalThemeWithOverride(
+  theme: ThemeMode,
+  customBackgroundColor: string | null,
+  customForegroundColor?: string | null
+): TerminalTheme {
+  const baseTheme = getTerminalTheme(theme);
+
+  if (customBackgroundColor || customForegroundColor) {
+    return {
+      ...baseTheme,
+      ...(customBackgroundColor && { background: customBackgroundColor }),
+      ...(customForegroundColor && { foreground: customForegroundColor }),
+    };
+  }
+
+  return baseTheme;
+}
+
+export default terminalThemes;
diff --git a/temp_repo/apps/ui/src/config/theme-options.ts b/temp_repo/apps/ui/src/config/theme-options.ts
new file mode 100644
index 0000000000000000000000000000000000000000..73ab4831ac3f483ee5bd96f8ac76c2120e4380c2
--- /dev/null
+++ b/temp_repo/apps/ui/src/config/theme-options.ts
@@ -0,0 +1,415 @@
+import {
+  type LucideIcon,
+  Atom,
+  Cat,
+  Cherry,
+  CloudSun,
+  Coffee,
+  Eclipse,
+  Feather,
+  Flame,
+  Flower2,
+  Ghost,
+  Github,
+  Heart,
+  Leaf,
+  Moon,
+  Palmtree,
+  Radio,
+  Scroll,
+  Snowflake,
+  Sparkles,
+  Square,
+  Sun,
+  Sunrise,
+  Terminal,
+  Trees,
+  Waves,
+  Wind,
+} from 'lucide-react';
+
+// Theme value type - all available themes
+export type Theme =
+  // Dark themes (16)
+  | 'dark'
+  | 'retro'
+  | 'dracula'
+  | 'nord'
+  | 'monokai'
+  | 'tokyonight'
+  | 'solarized'
+  | 'gruvbox'
+  | 'catppuccin'
+  | 'onedark'
+  | 'synthwave'
+  | 'red'
+  | 'sunset'
+  | 'gray'
+  | 'forest'
+  | 'ocean'
+  | 'ember'
+  | 'ayu-dark'
+  | 'ayu-mirage'
+  | 'matcha'
+  // Light themes
+  | 'light'
+  | 'cream'
+  | 'solarizedlight'
+  | 'github'
+  | 'paper'
+  | 'rose'
+  | 'mint'
+  | 'lavender'
+  | 'sand'
+  | 'sky'
+  | 'peach'
+  | 'snow'
+  | 'sepia'
+  | 'gruvboxlight'
+  | 'nordlight'
+  | 'blossom'
+  | 'ayu-light'
+  | 'onelight'
+  | 'bluloco'
+  | 'feather';
+
+export interface ThemeOption {
+  value: Theme;
+  label: string;
+  Icon: LucideIcon;
+  testId: string;
+  isDark: boolean;
+  color: string; // Primary/brand color for icon display
+}
+
+// All theme options with dark/light categorization (alphabetically sorted, Dark/Light first)
+export const themeOptions: ReadonlyArray<ThemeOption> = [
+  // Dark themes (20) - alphabetical, Dark first
+  {
+    value: 'dark',
+    label: 'Dark',
+    Icon: Moon,
+    testId: 'dark-mode-button',
+    isDark: true,
+    color: '#3b82f6',
+  },
+  {
+    value: 'ayu-dark',
+    label: 'Ayu Dark',
+    Icon: Moon,
+    testId: 'ayu-dark-mode-button',
+    isDark: true,
+    color: '#E6B450',
+  },
+  {
+    value: 'ayu-mirage',
+    label: 'Ayu Mirage',
+    Icon: Sparkles,
+    testId: 'ayu-mirage-mode-button',
+    isDark: true,
+    color: '#FFCC66',
+  },
+  {
+    value: 'catppuccin',
+    label: 'Catppuccin',
+    Icon: Cat,
+    testId: 'catppuccin-mode-button',
+    isDark: true,
+    color: '#cba6f7',
+  },
+  {
+    value: 'dracula',
+    label: 'Dracula',
+    Icon: Ghost,
+    testId: 'dracula-mode-button',
+    isDark: true,
+    color: '#bd93f9',
+  },
+  {
+    value: 'ember',
+    label: 'Ember',
+    Icon: Sunrise,
+    testId: 'ember-mode-button',
+    isDark: true,
+    color: '#fd971f',
+  },
+  {
+    value: 'forest',
+    label: 'Forest',
+    Icon: Leaf,
+    testId: 'forest-mode-button',
+    isDark: true,
+    color: '#22c55e',
+  },
+  {
+    value: 'gray',
+    label: 'Gray',
+    Icon: Square,
+    testId: 'gray-mode-button',
+    isDark: true,
+    color: '#6b7280',
+  },
+  {
+    value: 'gruvbox',
+    label: 'Gruvbox',
+    Icon: Trees,
+    testId: 'gruvbox-mode-button',
+    isDark: true,
+    color: '#fe8019',
+  },
+  {
+    value: 'matcha',
+    label: 'Matcha',
+    Icon: Leaf,
+    testId: 'matcha-mode-button',
+    isDark: true,
+    color: '#A4B07E',
+  },
+  {
+    value: 'monokai',
+    label: 'Monokai',
+    Icon: Flame,
+    testId: 'monokai-mode-button',
+    isDark: true,
+    color: '#f92672',
+  },
+  {
+    value: 'nord',
+    label: 'Nord',
+    Icon: Snowflake,
+    testId: 'nord-mode-button',
+    isDark: true,
+    color: '#88c0d0',
+  },
+  {
+    value: 'ocean',
+    label: 'Ocean',
+    Icon: Waves,
+    testId: 'ocean-mode-button',
+    isDark: true,
+    color: '#06b6d4',
+  },
+  {
+    value: 'onedark',
+    label: 'One Dark',
+    Icon: Atom,
+    testId: 'onedark-mode-button',
+    isDark: true,
+    color: '#61afef',
+  },
+  {
+    value: 'red',
+    label: 'Red',
+    Icon: Heart,
+    testId: 'red-mode-button',
+    isDark: true,
+    color: '#ef4444',
+  },
+  {
+    value: 'retro',
+    label: 'Retro',
+    Icon: Terminal,
+    testId: 'retro-mode-button',
+    isDark: true,
+    color: '#22c55e',
+  },
+  {
+    value: 'solarized',
+    label: 'Solarized Dark',
+    Icon: Eclipse,
+    testId: 'solarized-mode-button',
+    isDark: true,
+    color: '#268bd2',
+  },
+  {
+    value: 'sunset',
+    label: 'Sunset',
+    Icon: CloudSun,
+    testId: 'sunset-mode-button',
+    isDark: true,
+    color: '#f97316',
+  },
+  {
+    value: 'synthwave',
+    label: 'Synthwave',
+    Icon: Radio,
+    testId: 'synthwave-mode-button',
+    isDark: true,
+    color: '#ff7edb',
+  },
+  {
+    value: 'tokyonight',
+    label: 'Tokyo Night',
+    Icon: Sparkles,
+    testId: 'tokyonight-mode-button',
+    isDark: true,
+    color: '#bb9af7',
+  },
+  // Light themes (20) - alphabetical, Light first
+  {
+    value: 'light',
+    label: 'Light',
+    Icon: Sun,
+    testId: 'light-mode-button',
+    isDark: false,
+    color: '#3b82f6',
+  },
+  {
+    value: 'ayu-light',
+    label: 'Ayu Light',
+    Icon: Sun,
+    testId: 'ayu-light-mode-button',
+    isDark: false,
+    color: '#F29718',
+  },
+  {
+    value: 'blossom',
+    label: 'Blossom',
+    Icon: Cherry,
+    testId: 'blossom-mode-button',
+    isDark: false,
+    color: '#ec4899',
+  },
+  {
+    value: 'bluloco',
+    label: 'Bluloco',
+    Icon: Waves,
+    testId: 'bluloco-mode-button',
+    isDark: false,
+    color: '#0099e1',
+  },
+  {
+    value: 'cream',
+    label: 'Cream',
+    Icon: Coffee,
+    testId: 'cream-mode-button',
+    isDark: false,
+    color: '#b45309',
+  },
+  {
+    value: 'feather',
+    label: 'Feather',
+    Icon: Feather,
+    testId: 'feather-mode-button',
+    isDark: false,
+    color: '#FF7B2E',
+  },
+  {
+    value: 'github',
+    label: 'GitHub',
+    Icon: Github,
+    testId: 'github-mode-button',
+    isDark: false,
+    color: '#0969da',
+  },
+  {
+    value: 'gruvboxlight',
+    label: 'Gruvbox Light',
+    Icon: Trees,
+    testId: 'gruvboxlight-mode-button',
+    isDark: false,
+    color: '#d65d0e',
+  },
+  {
+    value: 'lavender',
+    label: 'Lavender',
+    Icon: Feather,
+    testId: 'lavender-mode-button',
+    isDark: false,
+    color: '#8b5cf6',
+  },
+  {
+    value: 'mint',
+    label: 'Mint',
+    Icon: Wind,
+    testId: 'mint-mode-button',
+    isDark: false,
+    color: '#0d9488',
+  },
+  {
+    value: 'nordlight',
+    label: 'Nord Light',
+    Icon: Snowflake,
+    testId: 'nordlight-mode-button',
+    isDark: false,
+    color: '#5e81ac',
+  },
+  {
+    value: 'onelight',
+    label: 'One Light',
+    Icon: Atom,
+    testId: 'onelight-mode-button',
+    isDark: false,
+    color: '#526FFF',
+  },
+  {
+    value: 'paper',
+    label: 'Paper',
+    Icon: Scroll,
+    testId: 'paper-mode-button',
+    isDark: false,
+    color: '#374151',
+  },
+  {
+    value: 'peach',
+    label: 'Peach',
+    Icon: Cherry,
+    testId: 'peach-mode-button',
+    isDark: false,
+    color: '#ea580c',
+  },
+  {
+    value: 'rose',
+    label: 'Rose',
+    Icon: Flower2,
+    testId: 'rose-mode-button',
+    isDark: false,
+    color: '#e11d48',
+  },
+  {
+    value: 'sand',
+    label: 'Sand',
+    Icon: Palmtree,
+    testId: 'sand-mode-button',
+    isDark: false,
+    color: '#d97706',
+  },
+  {
+    value: 'sepia',
+    label: 'Sepia',
+    Icon: Coffee,
+    testId: 'sepia-mode-button',
+    isDark: false,
+    color: '#92400e',
+  },
+  {
+    value: 'sky',
+    label: 'Sky',
+    Icon: Sun,
+    testId: 'sky-mode-button',
+    isDark: false,
+    color: '#0284c7',
+  },
+  {
+    value: 'snow',
+    label: 'Snow',
+    Icon: Snowflake,
+    testId: 'snow-mode-button',
+    isDark: false,
+    color: '#3b82f6',
+  },
+  {
+    value: 'solarizedlight',
+    label: 'Solarized Light',
+    Icon: Sunrise,
+    testId: 'solarizedlight-mode-button',
+    isDark: false,
+    color: '#268bd2',
+  },
+];
+
+// Helper: Get only dark themes
+export const darkThemes = themeOptions.filter((t) => t.isDark);
+
+// Helper: Get only light themes
+export const lightThemes = themeOptions.filter((t) => !t.isDark);
diff --git a/temp_repo/apps/ui/src/config/ui-font-options.ts b/temp_repo/apps/ui/src/config/ui-font-options.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a1309a920144ad3b19c0e511206c76afc765535
--- /dev/null
+++ b/temp_repo/apps/ui/src/config/ui-font-options.ts
@@ -0,0 +1,77 @@
+/**
+ * Font options for per-project font customization
+ *
+ * All fonts listed here are bundled with the app via @fontsource packages
+ * or custom font files (Zed fonts from zed-industries/zed-fonts).
+ * They are self-hosted and will work without any system installation.
+ */
+
+// Sentinel value for "use default font" - Radix Select doesn't allow empty strings
+export const DEFAULT_FONT_VALUE = 'default';
+
+export interface UIFontOption {
+  value: string; // CSS font-family value ('default' means "use default")
+  label: string; // Display label for the dropdown
+}
+
+/**
+ * Sans/UI fonts for headings, labels, and general text (Top 10)
+ *
+ * 'default' value means "use the theme default" (Geist Sans for all themes)
+ */
+export const UI_SANS_FONT_OPTIONS: readonly UIFontOption[] = [
+  { value: DEFAULT_FONT_VALUE, label: 'Default (Geist Sans)' },
+  // Sans fonts (alphabetical)
+  { value: 'Inter, system-ui, sans-serif', label: 'Inter' },
+  { value: 'Lato, system-ui, sans-serif', label: 'Lato' },
+  { value: 'Montserrat, system-ui, sans-serif', label: 'Montserrat' },
+  { value: "'Open Sans', system-ui, sans-serif", label: 'Open Sans' },
+  { value: 'Poppins, system-ui, sans-serif', label: 'Poppins' },
+  { value: 'Raleway, system-ui, sans-serif', label: 'Raleway' },
+  { value: 'Roboto, system-ui, sans-serif', label: 'Roboto' },
+  { value: "'Source Sans 3', system-ui, sans-serif", label: 'Source Sans' },
+  { value: "'Work Sans', system-ui, sans-serif", label: 'Work Sans' },
+  { value: "'Zed Sans', system-ui, sans-serif", label: 'Zed Sans' },
+  // Monospace fonts (alphabetical, for users who prefer mono UI)
+  { value: "'Cascadia Code', monospace", label: 'Cascadia Code' },
+  { value: "'Fira Code', monospace", label: 'Fira Code' },
+  { value: "'IBM Plex Mono', monospace", label: 'IBM Plex Mono' },
+  { value: 'Inconsolata, monospace', label: 'Inconsolata' },
+  { value: 'Iosevka, monospace', label: 'Iosevka' },
+  { value: "'JetBrains Mono', monospace", label: 'JetBrains Mono' },
+  { value: "'Source Code Pro', monospace", label: 'Source Code Pro' },
+  { value: "'Zed Mono', monospace", label: 'Zed Mono' },
+] as const;
+
+/**
+ * Mono/code fonts for code blocks, terminals, and monospaced text (Top 10)
+ *
+ * 'default' value means "use the theme default" (Geist Mono for all themes)
+ * Many of these support ligatures for coding symbols (-> => != etc.)
+ */
+export const UI_MONO_FONT_OPTIONS: readonly UIFontOption[] = [
+  { value: DEFAULT_FONT_VALUE, label: 'Default (Geist Mono)' },
+  // Bundled fonts (alphabetical)
+  { value: "'Cascadia Code', monospace", label: 'Cascadia Code' },
+  { value: "'Fira Code', monospace", label: 'Fira Code' },
+  { value: "'IBM Plex Mono', monospace", label: 'IBM Plex Mono' },
+  { value: 'Inconsolata, monospace', label: 'Inconsolata' },
+  { value: 'Iosevka, monospace', label: 'Iosevka' },
+  { value: "'JetBrains Mono', monospace", label: 'JetBrains Mono' },
+  { value: "'Source Code Pro', monospace", label: 'Source Code Pro' },
+  { value: "'Zed Mono', monospace", label: 'Zed Mono' },
+  // System fonts
+  { value: 'Menlo, Monaco, monospace', label: 'Menlo / Monaco (macOS)' },
+] as const;
+
+/**
+ * Get the display label for a font value
+ */
+export function getFontLabel(
+  fontValue: string | undefined,
+  options: readonly UIFontOption[]
+): string {
+  if (!fontValue || fontValue === DEFAULT_FONT_VALUE) return options[0].label;
+  const option = options.find((o) => o.value === fontValue);
+  return option?.label ?? fontValue;
+}
diff --git a/temp_repo/apps/ui/src/contexts/file-browser-context.tsx b/temp_repo/apps/ui/src/contexts/file-browser-context.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..74dc9200b6d3257c6647626a8eb982bd5dc1c5a3
--- /dev/null
+++ b/temp_repo/apps/ui/src/contexts/file-browser-context.tsx
@@ -0,0 +1,106 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+import { FileBrowserDialog } from '@/components/dialogs/file-browser-dialog';
+
+interface FileBrowserOptions {
+  title?: string;
+  description?: string;
+  initialPath?: string;
+}
+
+interface FileBrowserContextValue {
+  openFileBrowser: (options?: FileBrowserOptions) => Promise<string | null>;
+}
+
+const FileBrowserContext = createContext<FileBrowserContextValue | null>(null);
+
+export function FileBrowserProvider({ children }: { children: ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [resolver, setResolver] = useState<((value: string | null) => void) | null>(null);
+  const [dialogOptions, setDialogOptions] = useState<FileBrowserOptions>({});
+
+  const openFileBrowser = useCallback((options?: FileBrowserOptions): Promise<string | null> => {
+    return new Promise((resolve) => {
+      setDialogOptions(options || {});
+      setIsOpen(true);
+      setResolver(() => resolve);
+    });
+  }, []);
+
+  const handleSelect = useCallback(
+    (path: string) => {
+      if (resolver) {
+        resolver(path);
+        setResolver(null);
+      }
+      setIsOpen(false);
+      setDialogOptions({});
+    },
+    [resolver]
+  );
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open && resolver) {
+        resolver(null);
+        setResolver(null);
+      }
+      setIsOpen(open);
+      if (!open) {
+        setDialogOptions({});
+      }
+    },
+    [resolver]
+  );
+
+  return (
+    <FileBrowserContext.Provider value={{ openFileBrowser }}>
+      {children}
+      <FileBrowserDialog
+        open={isOpen}
+        onOpenChange={handleOpenChange}
+        onSelect={handleSelect}
+        title={dialogOptions.title}
+        description={dialogOptions.description}
+        initialPath={dialogOptions.initialPath}
+      />
+    </FileBrowserContext.Provider>
+  );
+}
+
+// No-op fallback for HMR transitions when context temporarily becomes unavailable
+const hmrFallback: FileBrowserContextValue = {
+  openFileBrowser: async () => {
+    console.warn('[HMR] FileBrowserContext not available, returning null');
+    return null;
+  },
+};
+
+export function useFileBrowser() {
+  const context = useContext(FileBrowserContext);
+  // During HMR, the context can temporarily be null as modules reload.
+  // Instead of crashing the app, return a safe no-op fallback that will
+  // be replaced once the provider re-mounts.
+  if (!context) {
+    if (import.meta.hot) {
+      // In development with HMR active, gracefully degrade
+      return hmrFallback;
+    }
+    // In production, this indicates a real bug - throw to help debug
+    throw new Error('useFileBrowser must be used within FileBrowserProvider');
+  }
+  return context;
+}
+
+// Global reference for non-React code (like HttpApiClient)
+let globalFileBrowserFn: ((options?: FileBrowserOptions) => Promise<string | null>) | null = null;
+
+export function setGlobalFileBrowser(fn: (options?: FileBrowserOptions) => Promise<string | null>) {
+  globalFileBrowserFn = fn;
+}
+
+export function getGlobalFileBrowser() {
+  return globalFileBrowserFn;
+}
+
+// Export the options type for consumers
+export type { FileBrowserOptions };
diff --git a/temp_repo/apps/ui/src/electron/constants.ts b/temp_repo/apps/ui/src/electron/constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..505847dc7ab8199258c5b224b77f42fb1663d8b7
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/constants.ts
@@ -0,0 +1,47 @@
+/**
+ * Electron main process constants
+ *
+ * Centralized configuration for window sizing, ports, and file names.
+ */
+
+// ============================================
+// Window sizing constants for kanban layout
+// ============================================
+// Calculation: 4 columns × 280px + 3 gaps × 20px + 40px padding = 1220px board content
+// With sidebar expanded (288px): 1220 + 288 = 1508px
+// Minimum window dimensions - reduced to allow smaller windows since kanban now supports horizontal scrolling
+export const MIN_WIDTH_COLLAPSED = 600; // Reduced - horizontal scrolling handles overflow
+export const MIN_HEIGHT = 500; // Reduced to allow more flexibility
+export const DEFAULT_WIDTH = 1600;
+export const DEFAULT_HEIGHT = 950;
+
+// ============================================
+// Port defaults
+// ============================================
+// Default ports (can be overridden via env) - will be dynamically assigned if these are in use
+// When launched via root init.mjs we pass:
+// - SERVER_PORT (backend API server)
+// - PORT (Vite dev server / static file server)
+// Guard against NaN from non-numeric environment variables
+const parsedServerPort = Number.parseInt(process.env.SERVER_PORT ?? '', 10);
+const parsedStaticPort = Number.parseInt(process.env.PORT ?? '', 10);
+export const DEFAULT_SERVER_PORT = Number.isFinite(parsedServerPort) ? parsedServerPort : 3008;
+export const DEFAULT_STATIC_PORT = Number.isFinite(parsedStaticPort) ? parsedStaticPort : 3007;
+
+// ============================================
+// File names for userData storage
+// ============================================
+export const API_KEY_FILENAME = '.api-key';
+export const WINDOW_BOUNDS_FILENAME = 'window-bounds.json';
+
+// ============================================
+// Window bounds interface
+// ============================================
+// Matches @automaker/types WindowBounds
+export interface WindowBounds {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  isMaximized: boolean;
+}
diff --git a/temp_repo/apps/ui/src/electron/index.ts b/temp_repo/apps/ui/src/electron/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..579398f4418927c6c6fda516bab0ae69506f184b
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/index.ts
@@ -0,0 +1,32 @@
+/**
+ * Electron main process modules
+ *
+ * Re-exports for convenient importing.
+ */
+
+// Constants and types
+export * from './constants';
+export { state } from './state';
+
+// Utilities
+export { isPortAvailable, findAvailablePort } from './utils/port-manager';
+export { getIconPath } from './utils/icon-manager';
+
+// Security
+export { ensureApiKey, getApiKey } from './security/api-key-manager';
+
+// Windows
+export {
+  loadWindowBounds,
+  saveWindowBounds,
+  validateBounds,
+  scheduleSaveWindowBounds,
+} from './windows/window-bounds';
+export { createWindow } from './windows/main-window';
+
+// Server
+export { startStaticServer, stopStaticServer } from './server/static-server';
+export { startServer, waitForServer, stopServer } from './server/backend-server';
+
+// IPC
+export { IPC_CHANNELS, registerAllHandlers } from './ipc';
diff --git a/temp_repo/apps/ui/src/electron/ipc/app-handlers.ts b/temp_repo/apps/ui/src/electron/ipc/app-handlers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fd27d750dfe5a0a96501be2c6e9423d0b3d3e8c7
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/ipc/app-handlers.ts
@@ -0,0 +1,37 @@
+/**
+ * App IPC handlers
+ *
+ * Handles app-related operations like getting paths, version info, and quitting.
+ */
+
+import { ipcMain, app } from 'electron';
+import { createLogger } from '@automaker/utils/logger';
+import { IPC_CHANNELS } from './channels';
+
+const logger = createLogger('AppHandlers');
+
+/**
+ * Register app IPC handlers
+ */
+export function registerAppHandlers(): void {
+  // Get app path
+  ipcMain.handle(IPC_CHANNELS.APP.GET_PATH, async (_, name: Parameters<typeof app.getPath>[0]) => {
+    return app.getPath(name);
+  });
+
+  // Get app version
+  ipcMain.handle(IPC_CHANNELS.APP.GET_VERSION, async () => {
+    return app.getVersion();
+  });
+
+  // Check if app is packaged
+  ipcMain.handle(IPC_CHANNELS.APP.IS_PACKAGED, async () => {
+    return app.isPackaged;
+  });
+
+  // Quit the application
+  ipcMain.handle(IPC_CHANNELS.APP.QUIT, () => {
+    logger.info('Quitting application via IPC request');
+    app.quit();
+  });
+}
diff --git a/temp_repo/apps/ui/src/electron/ipc/auth-handlers.ts b/temp_repo/apps/ui/src/electron/ipc/auth-handlers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c10fc94dfce9cc16428ed20cc27298eb31ba52e4
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/ipc/auth-handlers.ts
@@ -0,0 +1,34 @@
+/**
+ * Auth IPC handlers
+ *
+ * Handles authentication-related operations.
+ */
+
+import { ipcMain } from 'electron';
+import { IPC_CHANNELS } from './channels';
+import { state } from '../state';
+
+/**
+ * Register auth IPC handlers
+ */
+export function registerAuthHandlers(): void {
+  // Get API key for authentication
+  // Returns null in external server mode to trigger session-based auth
+  // Only returns API key to the main window to prevent leaking to untrusted senders
+  ipcMain.handle(IPC_CHANNELS.AUTH.GET_API_KEY, (event) => {
+    // Validate sender is the main window
+    if (event.sender !== state.mainWindow?.webContents) {
+      return null;
+    }
+    if (state.isExternalServerMode) {
+      return null;
+    }
+    return state.apiKey;
+  });
+
+  // Check if running in external server mode (Docker API)
+  // Used by renderer to determine auth flow
+  ipcMain.handle(IPC_CHANNELS.AUTH.IS_EXTERNAL_SERVER_MODE, () => {
+    return state.isExternalServerMode;
+  });
+}
diff --git a/temp_repo/apps/ui/src/electron/ipc/channels.ts b/temp_repo/apps/ui/src/electron/ipc/channels.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a0b5dcffa175f82ab110941c1459ecdd51eb90eb
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/ipc/channels.ts
@@ -0,0 +1,36 @@
+/**
+ * IPC channel constants
+ *
+ * Single source of truth for all IPC channel names.
+ * Used by both main process handlers and preload script.
+ */
+
+export const IPC_CHANNELS = {
+  DIALOG: {
+    OPEN_DIRECTORY: 'dialog:openDirectory',
+    OPEN_FILE: 'dialog:openFile',
+    SAVE_FILE: 'dialog:saveFile',
+  },
+  SHELL: {
+    OPEN_EXTERNAL: 'shell:openExternal',
+    OPEN_PATH: 'shell:openPath',
+    OPEN_IN_EDITOR: 'shell:openInEditor',
+  },
+  APP: {
+    GET_PATH: 'app:getPath',
+    GET_VERSION: 'app:getVersion',
+    IS_PACKAGED: 'app:isPackaged',
+    QUIT: 'app:quit',
+  },
+  AUTH: {
+    GET_API_KEY: 'auth:getApiKey',
+    IS_EXTERNAL_SERVER_MODE: 'auth:isExternalServerMode',
+  },
+  WINDOW: {
+    UPDATE_MIN_WIDTH: 'window:updateMinWidth',
+  },
+  SERVER: {
+    GET_URL: 'server:getUrl',
+  },
+  PING: 'ping',
+} as const;
diff --git a/temp_repo/apps/ui/src/electron/ipc/dialog-handlers.ts b/temp_repo/apps/ui/src/electron/ipc/dialog-handlers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b5217bde89f3e2ed8aa70d272a9a0dfee18a3491
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/ipc/dialog-handlers.ts
@@ -0,0 +1,72 @@
+/**
+ * Dialog IPC handlers
+ *
+ * Handles native file dialog operations.
+ */
+
+import { ipcMain, dialog } from 'electron';
+import { isPathAllowed, getAllowedRootDirectory } from '@automaker/platform';
+import { IPC_CHANNELS } from './channels';
+import { state } from '../state';
+
+/**
+ * Register dialog IPC handlers
+ */
+export function registerDialogHandlers(): void {
+  // Open directory dialog
+  ipcMain.handle(IPC_CHANNELS.DIALOG.OPEN_DIRECTORY, async () => {
+    if (!state.mainWindow) {
+      return { canceled: true, filePaths: [] };
+    }
+    const result = await dialog.showOpenDialog(state.mainWindow, {
+      properties: ['openDirectory', 'createDirectory'],
+    });
+
+    // Validate selected path against ALLOWED_ROOT_DIRECTORY if configured
+    if (!result.canceled && result.filePaths.length > 0) {
+      const selectedPath = result.filePaths[0];
+      if (!isPathAllowed(selectedPath)) {
+        const allowedRoot = getAllowedRootDirectory();
+        const errorMessage = allowedRoot
+          ? `The selected directory is not allowed. Please select a directory within: ${allowedRoot}`
+          : 'The selected directory is not allowed.';
+
+        dialog.showErrorBox('Directory Not Allowed', errorMessage);
+
+        return { canceled: true, filePaths: [] };
+      }
+    }
+
+    return result;
+  });
+
+  // Open file dialog
+  // Filter properties to maintain file-only intent and prevent renderer from requesting directories
+  ipcMain.handle(
+    IPC_CHANNELS.DIALOG.OPEN_FILE,
+    async (_, options: Record<string, unknown> = {}) => {
+      if (!state.mainWindow) {
+        return { canceled: true, filePaths: [] };
+      }
+      // Ensure openFile is always present and filter out directory-related properties
+      const inputProperties = (options.properties as string[]) ?? [];
+      const properties = ['openFile', ...inputProperties].filter(
+        (p) => p !== 'openDirectory' && p !== 'createDirectory'
+      );
+      const result = await dialog.showOpenDialog(state.mainWindow, {
+        ...options,
+        properties: properties as Electron.OpenDialogOptions['properties'],
+      });
+      return result;
+    }
+  );
+
+  // Save file dialog
+  ipcMain.handle(IPC_CHANNELS.DIALOG.SAVE_FILE, async (_, options = {}) => {
+    if (!state.mainWindow) {
+      return { canceled: true, filePath: undefined };
+    }
+    const result = await dialog.showSaveDialog(state.mainWindow, options);
+    return result;
+  });
+}
diff --git a/temp_repo/apps/ui/src/electron/ipc/index.ts b/temp_repo/apps/ui/src/electron/ipc/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7ce0f725ea0cb825e28cc5be25912bb9ac45cad8
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/ipc/index.ts
@@ -0,0 +1,26 @@
+/**
+ * IPC handlers aggregator
+ *
+ * Registers all IPC handlers in one place.
+ */
+
+import { registerDialogHandlers } from './dialog-handlers';
+import { registerShellHandlers } from './shell-handlers';
+import { registerAppHandlers } from './app-handlers';
+import { registerAuthHandlers } from './auth-handlers';
+import { registerWindowHandlers } from './window-handlers';
+import { registerServerHandlers } from './server-handlers';
+
+export { IPC_CHANNELS } from './channels';
+
+/**
+ * Register all IPC handlers
+ */
+export function registerAllHandlers(): void {
+  registerDialogHandlers();
+  registerShellHandlers();
+  registerAppHandlers();
+  registerAuthHandlers();
+  registerWindowHandlers();
+  registerServerHandlers();
+}
diff --git a/temp_repo/apps/ui/src/electron/ipc/server-handlers.ts b/temp_repo/apps/ui/src/electron/ipc/server-handlers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..119c2b06ae9728509dbf161373b2cdb3536c67d7
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/ipc/server-handlers.ts
@@ -0,0 +1,24 @@
+/**
+ * Server IPC handlers
+ *
+ * Handles server-related operations.
+ */
+
+import { ipcMain } from 'electron';
+import { IPC_CHANNELS } from './channels';
+import { state } from '../state';
+
+/**
+ * Register server IPC handlers
+ */
+export function registerServerHandlers(): void {
+  // Get server URL for HTTP client
+  ipcMain.handle(IPC_CHANNELS.SERVER.GET_URL, async () => {
+    return `http://localhost:${state.serverPort}`;
+  });
+
+  // Ping - for connection check
+  ipcMain.handle(IPC_CHANNELS.PING, async () => {
+    return 'pong';
+  });
+}
diff --git a/temp_repo/apps/ui/src/electron/ipc/shell-handlers.ts b/temp_repo/apps/ui/src/electron/ipc/shell-handlers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..db079630fe851a0d2220f8068f9d7aadce898367
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/ipc/shell-handlers.ts
@@ -0,0 +1,61 @@
+/**
+ * Shell IPC handlers
+ *
+ * Handles shell operations like opening external links and files.
+ */
+
+import { ipcMain, shell } from 'electron';
+import { IPC_CHANNELS } from './channels';
+
+/**
+ * Register shell IPC handlers
+ */
+export function registerShellHandlers(): void {
+  // Open external URL
+  ipcMain.handle(IPC_CHANNELS.SHELL.OPEN_EXTERNAL, async (_, url: string) => {
+    try {
+      await shell.openExternal(url);
+      return { success: true };
+    } catch (error) {
+      return { success: false, error: (error as Error).message };
+    }
+  });
+
+  // Open file path
+  ipcMain.handle(IPC_CHANNELS.SHELL.OPEN_PATH, async (_, filePath: string) => {
+    try {
+      await shell.openPath(filePath);
+      return { success: true };
+    } catch (error) {
+      return { success: false, error: (error as Error).message };
+    }
+  });
+
+  // Open file in editor (VS Code, etc.) with optional line/column
+  ipcMain.handle(
+    IPC_CHANNELS.SHELL.OPEN_IN_EDITOR,
+    async (_, filePath: string, line?: number, column?: number) => {
+      try {
+        // Build VS Code URL scheme: vscode://file/path:line:column
+        // This works on all platforms where VS Code is installed
+        // URL encode the path to handle special characters (spaces, brackets, etc.)
+        // Handle both Unix (/) and Windows (\) path separators
+        const normalizedPath = filePath.replace(/\\/g, '/');
+        const segments = normalizedPath.split('/').map(encodeURIComponent);
+        const encodedPath = segments.join('/');
+        // VS Code URL format requires a leading slash after 'file'
+        let url = `vscode://file/${encodedPath}`;
+        if (line !== undefined && line > 0) {
+          url += `:${line}`;
+          if (column !== undefined && column > 0) {
+            url += `:${column}`;
+          }
+        }
+        await shell.openExternal(url);
+        return { success: true };
+      } catch (error) {
+        return { success: false, error: (error as Error).message };
+      }
+    }
+  );
+}
diff --git a/temp_repo/apps/ui/src/electron/ipc/window-handlers.ts b/temp_repo/apps/ui/src/electron/ipc/window-handlers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..729ad6b550b7d73cf8e4ccd612eb0ff9bfa6c3f2
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/ipc/window-handlers.ts
@@ -0,0 +1,24 @@
+/**
+ * Window IPC handlers
+ *
+ * Handles window management operations.
+ */
+
+import { ipcMain } from 'electron';
+import { IPC_CHANNELS } from './channels';
+import { MIN_WIDTH_COLLAPSED, MIN_HEIGHT } from '../constants';
+import { state } from '../state';
+
+/**
+ * Register window IPC handlers
+ */
+export function registerWindowHandlers(): void {
+  // Update minimum width based on sidebar state
+  // Now uses a fixed small minimum since horizontal scrolling handles overflow
+  ipcMain.handle(IPC_CHANNELS.WINDOW.UPDATE_MIN_WIDTH, (_, _sidebarExpanded: boolean) => {
+    if (!state.mainWindow || state.mainWindow.isDestroyed()) return;
+
+    // Always use the smaller minimum width - horizontal scrolling handles any overflow
+    state.mainWindow.setMinimumSize(MIN_WIDTH_COLLAPSED, MIN_HEIGHT);
+  });
+}
diff --git a/temp_repo/apps/ui/src/electron/security/api-key-manager.ts b/temp_repo/apps/ui/src/electron/security/api-key-manager.ts
new file mode 100644
index 0000000000000000000000000000000000000000..87ff1f414ef9a18d375b9630725017302211b7f6
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/security/api-key-manager.ts
@@ -0,0 +1,58 @@
+/**
+ * API key management
+ *
+ * Handles generation, storage, and retrieval of the API key for CSRF protection.
+ * Uses centralized electronUserData methods for path validation.
+ */
+
+import crypto from 'crypto';
+import {
+  electronUserDataExists,
+  electronUserDataReadFileSync,
+  electronUserDataWriteFileSync,
+} from '@automaker/platform';
+import { createLogger } from '@automaker/utils/logger';
+import { API_KEY_FILENAME } from '../constants';
+import { state } from '../state';
+
+const logger = createLogger('ApiKeyManager');
+
+/**
+ * Ensure an API key exists - load from file or generate new one.
+ * This key is passed to the server for CSRF protection.
+ * Uses centralized electronUserData methods for path validation.
+ */
+export function ensureApiKey(): string {
+  try {
+    if (electronUserDataExists(API_KEY_FILENAME)) {
+      const key = electronUserDataReadFileSync(API_KEY_FILENAME).trim();
+      if (key) {
+        state.apiKey = key;
+        logger.info('Loaded existing API key');
+        return state.apiKey;
+      }
+    }
+  } catch (error) {
+    logger.warn('Error reading API key:', error);
+  }
+
+  // Generate new key
+  state.apiKey = crypto.randomUUID();
+  try {
+    electronUserDataWriteFileSync(API_KEY_FILENAME, state.apiKey, {
+      encoding: 'utf-8',
+      mode: 0o600,
+    });
+    logger.info('Generated new API key');
+  } catch (error) {
+    logger.error('Failed to save API key:', error);
+  }
+  return state.apiKey;
+}
+
+/**
+ * Get the current API key
+ */
+export function getApiKey(): string | null {
+  return state.apiKey;
+}
diff --git a/temp_repo/apps/ui/src/electron/server/backend-server.ts b/temp_repo/apps/ui/src/electron/server/backend-server.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1921d232476f5cdb5ce2781478aab5ff1f911abe
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/server/backend-server.ts
@@ -0,0 +1,246 @@
+/**
+ * Backend server management
+ *
+ * Handles starting, stopping, and monitoring the Express backend server.
+ * Uses centralized methods for path validation.
+ */
+
+import path from 'path';
+import http from 'http';
+import { spawn, execSync } from 'child_process';
+import { app } from 'electron';
+import {
+  findNodeExecutable,
+  buildEnhancedPath,
+  electronAppExists,
+  systemPathExists,
+} from '@automaker/platform';
+import { createLogger } from '@automaker/utils/logger';
+import { state } from '../state';
+
+const logger = createLogger('BackendServer');
+const serverLogger = createLogger('Server');
+
+/**
+ * Start the backend server
+ * Uses centralized methods for path validation.
+ */
+export async function startServer(): Promise<void> {
+  const isDev = !app.isPackaged;
+
+  let command: string;
+  let commandSource: string;
+  let args: string[];
+  let serverPath: string;
+
+  if (isDev) {
+    // In development, run the TypeScript server via the user's Node.js.
+    const nodeResult = findNodeExecutable({
+      skipSearch: true,
+      logger: (msg: string) => logger.info(msg),
+    });
+    command = nodeResult.nodePath;
+    commandSource = nodeResult.source;
+
+    // Validate that the found Node executable actually exists
+    // systemPathExists is used because node-finder returns system paths
+    if (command !== 'node') {
+      let exists: boolean;
+      try {
+        exists = systemPathExists(command);
+      } catch (error) {
+        const originalError = error instanceof Error ? error.message : String(error);
+        throw new Error(
+          `Failed to verify Node.js executable at: ${command} (source: ${nodeResult.source}). Reason: ${originalError}`
+        );
+      }
+      if (!exists) {
+        throw new Error(
+          `Node.js executable not found at: ${command} (source: ${nodeResult.source})`
+        );
+      }
+    }
+  } else {
+    // In packaged builds, use Electron's bundled Node runtime instead of a system Node.
+    // This makes the desktop app self-contained and avoids incompatibilities with whatever
+    // Node version the user happens to have installed globally.
+    command = process.execPath;
+    commandSource = 'electron';
+  }
+
+  // __dirname is apps/ui/dist-electron (Vite bundles all into single file)
+  if (isDev) {
+    serverPath = path.join(__dirname, '../../server/src/index.ts');
+
+    const serverNodeModules = path.join(__dirname, '../../server/node_modules/tsx');
+    const rootNodeModules = path.join(__dirname, '../../../node_modules/tsx');
+
+    let tsxCliPath: string;
+    // Check for tsx in app bundle paths, fallback to require.resolve
+    const serverTsxPath = path.join(serverNodeModules, 'dist/cli.mjs');
+    const rootTsxPath = path.join(rootNodeModules, 'dist/cli.mjs');
+
+    try {
+      if (electronAppExists(serverTsxPath)) {
+        tsxCliPath = serverTsxPath;
+      } else if (electronAppExists(rootTsxPath)) {
+        tsxCliPath = rootTsxPath;
+      } else {
+        // Fallback to require.resolve
+        tsxCliPath = require.resolve('tsx/cli.mjs', {
+          paths: [path.join(__dirname, '../../server')],
+        });
+      }
+    } catch {
+      // electronAppExists threw or require.resolve failed
+      try {
+        tsxCliPath = require.resolve('tsx/cli.mjs', {
+          paths: [path.join(__dirname, '../../server')],
+        });
+      } catch {
+        throw new Error("Could not find tsx. Please run 'npm install' in the server directory.");
+      }
+    }
+
+    args = [tsxCliPath, 'watch', serverPath];
+  } else {
+    serverPath = path.join(process.resourcesPath, 'server', 'index.js');
+    args = [serverPath];
+
+    if (!electronAppExists(serverPath)) {
+      throw new Error(`Server not found at: ${serverPath}`);
+    }
+  }
+
+  const serverNodeModules = app.isPackaged
+    ? path.join(process.resourcesPath, 'server', 'node_modules')
+    : path.join(__dirname, '../../server/node_modules');
+
+  // Server root directory - where .env file is located
+  // In dev: apps/server (not apps/server/src)
+  // In production: resources/server
+  const serverRoot = app.isPackaged
+    ? path.join(process.resourcesPath, 'server')
+    : path.join(__dirname, '../../server');
+
+  // IMPORTANT: Use shared data directory (not Electron's user data directory)
+  // This ensures Electron and web mode share the same settings/projects
+  // In dev: project root/data (navigate from __dirname which is apps/ui/dist-electron)
+  // In production: same as Electron user data (for app isolation)
+  const dataDir = app.isPackaged
+    ? app.getPath('userData')
+    : path.join(__dirname, '../../..', 'data');
+  logger.info(
+    `[DATA_DIR] app.isPackaged=${app.isPackaged}, __dirname=${__dirname}, dataDir=${dataDir}`
+  );
+
+  // Build enhanced PATH that includes Node.js directory (cross-platform)
+  const enhancedPath = buildEnhancedPath(command, process.env.PATH || '');
+  if (enhancedPath !== process.env.PATH) {
+    logger.info('Enhanced PATH with Node directory:', path.dirname(command));
+  }
+
+  const env = {
+    ...process.env,
+    PATH: enhancedPath,
+    PORT: state.serverPort.toString(),
+    DATA_DIR: dataDir,
+    NODE_PATH: serverNodeModules,
+    // Run packaged backend with Electron's embedded Node runtime.
+    ...(app.isPackaged && { ELECTRON_RUN_AS_NODE: '1' }),
+    // Pass API key to server for CSRF protection
+    AUTOMAKER_API_KEY: state.apiKey!,
+    // Only set ALLOWED_ROOT_DIRECTORY if explicitly provided in environment
+    // If not set, server will allow access to all paths
+    ...(process.env.ALLOWED_ROOT_DIRECTORY && {
+      ALLOWED_ROOT_DIRECTORY: process.env.ALLOWED_ROOT_DIRECTORY,
+    }),
+  };
+
+  logger.info('Server will use port', state.serverPort);
+  logger.info('[DATA_DIR_SPAWN] env.DATA_DIR=', env.DATA_DIR);
+
+  logger.info('Starting backend server...');
+  logger.info('Runtime command:', command, `(source: ${commandSource})`);
+  logger.info('Server path:', serverPath);
+  logger.info('Server root (cwd):', serverRoot);
+  logger.info('NODE_PATH:', serverNodeModules);
+
+  state.serverProcess = spawn(command, args, {
+    cwd: serverRoot,
+    env,
+    stdio: ['ignore', 'pipe', 'pipe'],
+  });
+
+  state.serverProcess.stdout?.on('data', (data) => {
+    serverLogger.info(data.toString().trim());
+  });
+
+  state.serverProcess.stderr?.on('data', (data) => {
+    serverLogger.error(data.toString().trim());
+  });
+
+  state.serverProcess.on('close', (code) => {
+    serverLogger.info('Process exited with code', code);
+    state.serverProcess = null;
+  });
+
+  state.serverProcess.on('error', (err) => {
+    serverLogger.error('Failed to start server process:', err);
+    state.serverProcess = null;
+  });
+
+  await waitForServer();
+}
+
+/**
+ * Wait for server to be available
+ */
+export async function waitForServer(maxAttempts = 30): Promise<void> {
+  for (let i = 0; i < maxAttempts; i++) {
+    try {
+      await new Promise<void>((resolve, reject) => {
+        const req = http.get(`http://localhost:${state.serverPort}/api/health`, (res) => {
+          if (res.statusCode === 200) {
+            resolve();
+          } else {
+            reject(new Error(`Status: ${res.statusCode}`));
+          }
+        });
+        req.on('error', reject);
+        req.setTimeout(1000, () => {
+          req.destroy();
+          reject(new Error('Timeout'));
+        });
+      });
+      logger.info('Server is ready');
+      return;
+    } catch {
+      await new Promise((r) => setTimeout(r, 500));
+    }
+  }
+
+  throw new Error('Server failed to start');
+}
+
+/**
+ * Stop the backend server if running
+ */
+export function stopServer(): void {
+  if (state.serverProcess && state.serverProcess.pid) {
+    logger.info('Stopping server...');
+    if (process.platform === 'win32') {
+      try {
+        // Windows: use taskkill with /t to kill entire process tree
+        // This prevents orphaned node processes when closing the app
+        // Using execSync to ensure process is killed before app exits
+        execSync(`taskkill /f /t /pid ${state.serverProcess.pid}`, { stdio: 'ignore' });
+      } catch (error) {
+        logger.error('Failed to kill server process:', (error as Error).message);
+      }
+    } else {
+      state.serverProcess.kill('SIGTERM');
+    }
+    state.serverProcess = null;
+  }
+}
diff --git a/temp_repo/apps/ui/src/electron/server/static-server.ts b/temp_repo/apps/ui/src/electron/server/static-server.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7d73a534bdc34efae0dece6fb0a36f0c7141650e
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/server/static-server.ts
@@ -0,0 +1,101 @@
+/**
+ * Static file server for production builds
+ *
+ * Serves the built frontend files in production mode.
+ * Uses centralized electronApp methods for serving static files from app bundle.
+ */
+
+import path from 'path';
+import http from 'http';
+import { electronAppExists, electronAppStat, electronAppReadFile } from '@automaker/platform';
+import { createLogger } from '@automaker/utils/logger';
+import { state } from '../state';
+
+const logger = createLogger('StaticServer');
+
+/**
+ * MIME type mapping for static files
+ */
+const CONTENT_TYPES: Record<string, string> = {
+  '.html': 'text/html',
+  '.js': 'application/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.eot': 'application/vnd.ms-fontobject',
+};
+
+/**
+ * Start static file server for production builds
+ * Uses centralized electronApp methods for serving static files from app bundle.
+ */
+export async function startStaticServer(): Promise<void> {
+  // __dirname is apps/ui/dist-electron (Vite bundles all into single file)
+  const staticPath = path.join(__dirname, '../dist');
+
+  state.staticServer = http.createServer((request, response) => {
+    let filePath = path.join(staticPath, request.url?.split('?')[0] || '/');
+
+    if (filePath.endsWith('/')) {
+      filePath = path.join(filePath, 'index.html');
+    } else if (!path.extname(filePath)) {
+      // For client-side routing, serve index.html for paths without extensions
+      const possibleFile = filePath + '.html';
+      try {
+        if (!electronAppExists(filePath) && !electronAppExists(possibleFile)) {
+          filePath = path.join(staticPath, 'index.html');
+        } else if (electronAppExists(possibleFile)) {
+          filePath = possibleFile;
+        }
+      } catch {
+        filePath = path.join(staticPath, 'index.html');
+      }
+    }
+
+    electronAppStat(filePath, (err, stats) => {
+      if (err || !stats?.isFile()) {
+        filePath = path.join(staticPath, 'index.html');
+      }
+
+      electronAppReadFile(filePath, (error, content) => {
+        if (error || !content) {
+          response.writeHead(500);
+          response.end('Server Error');
+          return;
+        }
+
+        const ext = path.extname(filePath);
+        response.writeHead(200, {
+          'Content-Type': CONTENT_TYPES[ext] || 'application/octet-stream',
+        });
+        response.end(content);
+      });
+    });
+  });
+
+  return new Promise((resolve, reject) => {
+    state.staticServer!.listen(state.staticPort, () => {
+      logger.info('Static server running at http://localhost:' + state.staticPort);
+      resolve();
+    });
+    state.staticServer!.on('error', reject);
+  });
+}
+
+/**
+ * Stop the static server if running
+ */
+export function stopStaticServer(): void {
+  if (state.staticServer) {
+    logger.info('Stopping static server...');
+    state.staticServer.close();
+    state.staticServer = null;
+  }
+}
diff --git a/temp_repo/apps/ui/src/electron/state.ts b/temp_repo/apps/ui/src/electron/state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fba85afbfeb43e7ca98607765218f3ac246f1252
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/state.ts
@@ -0,0 +1,33 @@
+/**
+ * Electron main process shared state
+ *
+ * Centralized state container to avoid circular dependencies.
+ * All modules access shared state through this object.
+ */
+
+import { BrowserWindow } from 'electron';
+import { ChildProcess } from 'child_process';
+import { Server } from 'http';
+import { DEFAULT_SERVER_PORT, DEFAULT_STATIC_PORT } from './constants';
+
+export interface ElectronState {
+  mainWindow: BrowserWindow | null;
+  serverProcess: ChildProcess | null;
+  staticServer: Server | null;
+  serverPort: number;
+  staticPort: number;
+  apiKey: string | null;
+  isExternalServerMode: boolean;
+  saveWindowBoundsTimeout: ReturnType<typeof setTimeout> | null;
+}
+
+export const state: ElectronState = {
+  mainWindow: null,
+  serverProcess: null,
+  staticServer: null,
+  serverPort: DEFAULT_SERVER_PORT,
+  staticPort: DEFAULT_STATIC_PORT,
+  apiKey: null,
+  isExternalServerMode: false,
+  saveWindowBoundsTimeout: null,
+};
diff --git a/temp_repo/apps/ui/src/electron/utils/icon-manager.ts b/temp_repo/apps/ui/src/electron/utils/icon-manager.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c39857383d678431194acb62383fc567ccf6412e
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/utils/icon-manager.ts
@@ -0,0 +1,53 @@
+/**
+ * Icon management utilities
+ *
+ * Functions for getting the application icon path.
+ */
+
+import path from 'path';
+import { app } from 'electron';
+import { electronAppExists } from '@automaker/platform';
+import { createLogger } from '@automaker/utils/logger';
+
+const logger = createLogger('IconManager');
+
+/**
+ * Get icon path - works in both dev and production, cross-platform
+ * Uses centralized electronApp methods for path validation.
+ */
+export function getIconPath(): string | null {
+  const isDev = !app.isPackaged;
+
+  let iconFile: string;
+  if (process.platform === 'win32') {
+    iconFile = 'icon.ico';
+  } else {
+    iconFile = 'logo_larger.png';
+  }
+
+  // __dirname is apps/ui/dist-electron (Vite bundles all into single file)
+  let iconPath: string;
+  if (isDev) {
+    iconPath = path.join(__dirname, '../public', iconFile);
+  } else if (process.platform === 'linux') {
+    // On Linux, use the icon copied to resourcesPath via extraResources.
+    // This places it outside app.asar so the window manager can read it
+    // directly, and matches the absolute path used in the .desktop entry.
+    iconPath = path.join(process.resourcesPath, iconFile);
+  } else {
+    // macOS / Windows: icon is inside the asar; Electron handles it natively.
+    iconPath = path.join(__dirname, '../dist', iconFile);
+  }
+
+  try {
+    if (!electronAppExists(iconPath)) {
+      logger.warn('Icon not found at:', iconPath);
+      return null;
+    }
+  } catch (error) {
+    logger.warn('Icon check failed:', iconPath, error);
+    return null;
+  }
+
+  return iconPath;
+}
diff --git a/temp_repo/apps/ui/src/electron/utils/port-manager.ts b/temp_repo/apps/ui/src/electron/utils/port-manager.ts
new file mode 100644
index 0000000000000000000000000000000000000000..990f4f1a3764fe3ef3de226ac59a6b923acfa3ed
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/utils/port-manager.ts
@@ -0,0 +1,42 @@
+/**
+ * Port management utilities
+ *
+ * Functions for checking port availability and finding open ports.
+ * No Electron dependencies - pure utility module.
+ */
+
+import net from 'net';
+
+/**
+ * Check if a port is available
+ */
+export function isPortAvailable(port: number): Promise<boolean> {
+  return new Promise((resolve) => {
+    const server = net.createServer();
+    server.once('error', () => {
+      resolve(false);
+    });
+    server.once('listening', () => {
+      server.close(() => {
+        resolve(true);
+      });
+    });
+    // Use Node's default binding semantics (matches most dev servers)
+    // This avoids false-positives when a port is taken on IPv6/dual-stack.
+    server.listen(port);
+  });
+}
+
+/**
+ * Find an available port starting from the preferred port
+ * Tries up to 100 ports in sequence
+ */
+export async function findAvailablePort(preferredPort: number): Promise<number> {
+  for (let offset = 0; offset < 100; offset++) {
+    const port = preferredPort + offset;
+    if (await isPortAvailable(port)) {
+      return port;
+    }
+  }
+  throw new Error(`Could not find an available port starting from ${preferredPort}`);
+}
diff --git a/temp_repo/apps/ui/src/electron/windows/main-window.ts b/temp_repo/apps/ui/src/electron/windows/main-window.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9e9282dbbfa739ef55c7d7751973f53d9d9c1b37
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/windows/main-window.ts
@@ -0,0 +1,119 @@
+/**
+ * Main window creation and lifecycle
+ *
+ * Handles creating the main BrowserWindow and its event handlers.
+ */
+
+import path from 'path';
+import { app, BrowserWindow, shell } from 'electron';
+import { createLogger } from '@automaker/utils/logger';
+import { MIN_WIDTH_COLLAPSED, MIN_HEIGHT, DEFAULT_WIDTH, DEFAULT_HEIGHT } from '../constants';
+import { state } from '../state';
+import { getIconPath } from '../utils/icon-manager';
+import {
+  loadWindowBounds,
+  saveWindowBounds,
+  validateBounds,
+  scheduleSaveWindowBounds,
+} from './window-bounds';
+
+const logger = createLogger('MainWindow');
+
+// Development environment
+const VITE_DEV_SERVER_URL = process.env.VITE_DEV_SERVER_URL;
+
+/**
+ * Create the main window
+ */
+export function createWindow(): void {
+  const isDev = !app.isPackaged;
+  const iconPath = getIconPath();
+
+  // Load and validate saved window bounds
+  const savedBounds = loadWindowBounds();
+  const validBounds = savedBounds ? validateBounds(savedBounds) : null;
+
+  const windowOptions: Electron.BrowserWindowConstructorOptions = {
+    width: validBounds?.width ?? DEFAULT_WIDTH,
+    height: validBounds?.height ?? DEFAULT_HEIGHT,
+    x: validBounds?.x,
+    y: validBounds?.y,
+    minWidth: MIN_WIDTH_COLLAPSED, // Small minimum - horizontal scrolling handles overflow
+    minHeight: MIN_HEIGHT,
+    webPreferences: {
+      // __dirname is apps/ui/dist-electron (Vite bundles all into single file)
+      preload: path.join(__dirname, 'preload.js'),
+      contextIsolation: true,
+      nodeIntegration: false,
+    },
+    // Hide the default Electron/Chromium menu bar on Linux (File/Edit/View/Help).
+    // It still appears on Alt-press so keyboard-only users aren't locked out.
+    autoHideMenuBar: true,
+    // titleBarStyle is macOS-only; use hiddenInset for native look on macOS
+    ...(process.platform === 'darwin' && { titleBarStyle: 'hiddenInset' as const }),
+    backgroundColor: '#0a0a0a',
+  };
+
+  if (iconPath) {
+    windowOptions.icon = iconPath;
+  }
+
+  state.mainWindow = new BrowserWindow(windowOptions);
+
+  // Restore maximized state if previously maximized
+  if (validBounds?.isMaximized) {
+    state.mainWindow.maximize();
+  }
+
+  // Load Vite dev server in development or static server in production
+  if (VITE_DEV_SERVER_URL) {
+    state.mainWindow.loadURL(VITE_DEV_SERVER_URL);
+  } else if (isDev) {
+    // Fallback for dev without Vite server URL
+    state.mainWindow.loadURL(`http://localhost:${state.staticPort}`);
+  } else {
+    state.mainWindow.loadURL(`http://localhost:${state.staticPort}`);
+  }
+
+  if (isDev && process.env.OPEN_DEVTOOLS === 'true') {
+    state.mainWindow.webContents.openDevTools();
+  }
+
+  // Save window bounds on close, resize, and move
+  state.mainWindow.on('close', () => {
+    // Save immediately before closing (not debounced)
+    if (state.mainWindow && !state.mainWindow.isDestroyed()) {
+      const isMaximized = state.mainWindow.isMaximized();
+      const bounds = isMaximized
+        ? state.mainWindow.getNormalBounds()
+        : state.mainWindow.getBounds();
+
+      saveWindowBounds({
+        x: bounds.x,
+        y: bounds.y,
+        width: bounds.width,
+        height: bounds.height,
+        isMaximized,
+      });
+    }
+  });
+
+  state.mainWindow.on('closed', () => {
+    state.mainWindow = null;
+  });
+
+  state.mainWindow.on('resized', () => {
+    scheduleSaveWindowBounds();
+  });
+
+  state.mainWindow.on('moved', () => {
+    scheduleSaveWindowBounds();
+  });
+
+  state.mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+    shell.openExternal(url);
+    return { action: 'deny' };
+  });
+
+  logger.info('Main window created');
+}
diff --git a/temp_repo/apps/ui/src/electron/windows/window-bounds.ts b/temp_repo/apps/ui/src/electron/windows/window-bounds.ts
new file mode 100644
index 0000000000000000000000000000000000000000..13ea9fe1e782d13a70854bd7609f6a3dd64740e9
--- /dev/null
+++ b/temp_repo/apps/ui/src/electron/windows/window-bounds.ts
@@ -0,0 +1,130 @@
+/**
+ * Window bounds management
+ *
+ * Functions for loading, saving, and validating window bounds.
+ * Uses centralized electronUserData methods for path validation.
+ */
+
+import { screen } from 'electron';
+import {
+  electronUserDataExists,
+  electronUserDataReadFileSync,
+  electronUserDataWriteFileSync,
+} from '@automaker/platform';
+import { createLogger } from '@automaker/utils/logger';
+import {
+  WindowBounds,
+  WINDOW_BOUNDS_FILENAME,
+  MIN_WIDTH_COLLAPSED,
+  MIN_HEIGHT,
+} from '../constants';
+import { state } from '../state';
+
+const logger = createLogger('WindowBounds');
+
+/**
+ * Load saved window bounds from disk
+ * Uses centralized electronUserData methods for path validation.
+ */
+export function loadWindowBounds(): WindowBounds | null {
+  try {
+    if (electronUserDataExists(WINDOW_BOUNDS_FILENAME)) {
+      const data = electronUserDataReadFileSync(WINDOW_BOUNDS_FILENAME);
+      const bounds = JSON.parse(data) as WindowBounds;
+      // Validate the loaded data has required fields
+      if (
+        typeof bounds.x === 'number' &&
+        typeof bounds.y === 'number' &&
+        typeof bounds.width === 'number' &&
+        typeof bounds.height === 'number'
+      ) {
+        return bounds;
+      }
+    }
+  } catch (error) {
+    logger.warn('Failed to load window bounds:', (error as Error).message);
+  }
+  return null;
+}
+
+/**
+ * Save window bounds to disk
+ * Uses centralized electronUserData methods for path validation.
+ */
+export function saveWindowBounds(bounds: WindowBounds): void {
+  try {
+    electronUserDataWriteFileSync(WINDOW_BOUNDS_FILENAME, JSON.stringify(bounds, null, 2));
+    logger.info('Window bounds saved');
+  } catch (error) {
+    logger.warn('Failed to save window bounds:', (error as Error).message);
+  }
+}
+
+/**
+ * Schedule a debounced save of window bounds (500ms delay)
+ */
+export function scheduleSaveWindowBounds(): void {
+  if (!state.mainWindow || state.mainWindow.isDestroyed()) return;
+
+  if (state.saveWindowBoundsTimeout) {
+    clearTimeout(state.saveWindowBoundsTimeout);
+  }
+
+  state.saveWindowBoundsTimeout = setTimeout(() => {
+    if (!state.mainWindow || state.mainWindow.isDestroyed()) return;
+
+    const isMaximized = state.mainWindow.isMaximized();
+    // Use getNormalBounds() for maximized windows to save pre-maximized size
+    const bounds = isMaximized ? state.mainWindow.getNormalBounds() : state.mainWindow.getBounds();
+
+    saveWindowBounds({
+      x: bounds.x,
+      y: bounds.y,
+      width: bounds.width,
+      height: bounds.height,
+      isMaximized,
+    });
+  }, 500);
+}
+
+/**
+ * Validate that window bounds are visible on at least one display
+ * Returns adjusted bounds if needed, or null if completely off-screen
+ */
+export function validateBounds(bounds: WindowBounds): WindowBounds {
+  const displays = screen.getAllDisplays();
+
+  // Check if window center is visible on any display
+  const centerX = bounds.x + bounds.width / 2;
+  const centerY = bounds.y + bounds.height / 2;
+
+  let isVisible = false;
+  for (const display of displays) {
+    const { x, y, width, height } = display.workArea;
+    if (centerX >= x && centerX <= x + width && centerY >= y && centerY <= y + height) {
+      isVisible = true;
+      break;
+    }
+  }
+
+  if (!isVisible) {
+    // Window is off-screen, reset to primary display
+    const primaryDisplay = screen.getPrimaryDisplay();
+    const { x, y, width, height } = primaryDisplay.workArea;
+
+    return {
+      x: x + Math.floor((width - bounds.width) / 2),
+      y: y + Math.floor((height - bounds.height) / 2),
+      width: Math.min(bounds.width, width),
+      height: Math.min(bounds.height, height),
+      isMaximized: bounds.isMaximized,
+    };
+  }
+
+  // Ensure minimum dimensions
+  return {
+    ...bounds,
+    width: Math.max(bounds.width, MIN_WIDTH_COLLAPSED),
+    height: Math.max(bounds.height, MIN_HEIGHT),
+  };
+}
diff --git a/temp_repo/apps/ui/src/hooks/index.ts b/temp_repo/apps/ui/src/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..146db04f62ab89d904a86f89d8a93d66945fc72c
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/index.ts
@@ -0,0 +1,34 @@
+export { useAutoMode } from './use-auto-mode';
+export { useBoardBackgroundSettings } from './use-board-background-settings';
+export { useElectronAgent } from './use-electron-agent';
+export {
+  useEventRecorder,
+  useEventRecency,
+  useEventRecencyStore,
+  getGlobalEventsRecent,
+  getEventsRecent,
+  createSmartPollingInterval,
+  EVENT_RECENCY_THRESHOLD,
+} from './use-event-recency';
+export { useGuidedPrompts } from './use-guided-prompts';
+export { useKeyboardShortcuts } from './use-keyboard-shortcuts';
+export { useMessageQueue } from './use-message-queue';
+export { useOSDetection, type OperatingSystem, type OSDetectionResult } from './use-os-detection';
+export { useResponsiveKanban } from './use-responsive-kanban';
+export { useScrollTracking } from './use-scroll-tracking';
+export { useSettingsMigration } from './use-settings-migration';
+export {
+  useTestRunners,
+  useTestRunnerEvents,
+  type StartTestOptions,
+  type StartTestResult,
+  type StopTestResult,
+  type TestSession,
+} from './use-test-runners';
+export {
+  useTestLogs,
+  useTestLogEvents,
+  type TestLogState,
+  type UseTestLogsOptions,
+} from './use-test-logs';
+export { useWindowState } from './use-window-state';
diff --git a/temp_repo/apps/ui/src/hooks/mutations/index.ts b/temp_repo/apps/ui/src/hooks/mutations/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..50a537adc92720c58b1d8ac50c9e122206785f4e
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/mutations/index.ts
@@ -0,0 +1,82 @@
+/**
+ * Mutations Barrel Export
+ *
+ * Central export point for all React Query mutations.
+ *
+ * @example
+ * ```tsx
+ * import { useCreateFeature, useStartFeature, useCommitWorktree } from '@/hooks/mutations';
+ * ```
+ */
+
+// Feature mutations
+export {
+  useCreateFeature,
+  useUpdateFeature,
+  useDeleteFeature,
+  useGenerateTitle,
+  useBatchUpdateFeatures,
+} from './use-feature-mutations';
+
+// Auto mode mutations
+export {
+  useStartFeature,
+  useResumeFeature,
+  useStopFeature,
+  useVerifyFeature,
+  useApprovePlan,
+  useFollowUpFeature,
+  useCommitFeature,
+  useAnalyzeProject,
+  useStartAutoMode,
+  useStopAutoMode,
+} from './use-auto-mode-mutations';
+
+// Settings mutations
+export {
+  useUpdateGlobalSettings,
+  useUpdateProjectSettings,
+  useSaveCredentials,
+} from './use-settings-mutations';
+
+// Worktree mutations
+export {
+  useCreateWorktree,
+  useDeleteWorktree,
+  useCommitWorktree,
+  usePushWorktree,
+  usePullWorktree,
+  useSyncWorktree,
+  useSetTracking,
+  useCreatePullRequest,
+  useMergeWorktree,
+  useSwitchBranch,
+  useCheckoutBranch,
+  useGenerateCommitMessage,
+  useOpenInEditor,
+  useInitGit,
+  useSetInitScript,
+  useDeleteInitScript,
+} from './use-worktree-mutations';
+
+// GitHub mutations
+export {
+  useValidateIssue,
+  useMarkValidationViewed,
+  useGetValidationStatus,
+  useResolveReviewThread,
+} from './use-github-mutations';
+
+// Ideation mutations
+export { useGenerateIdeationSuggestions } from './use-ideation-mutations';
+
+// Spec mutations
+export {
+  useCreateSpec,
+  useRegenerateSpec,
+  useGenerateFeatures,
+  useSaveSpec,
+} from './use-spec-mutations';
+
+// Cursor Permissions mutations
+export { useApplyCursorProfile, useCopyCursorConfig } from './use-cursor-permissions-mutations';
diff --git a/temp_repo/apps/ui/src/hooks/mutations/use-auto-mode-mutations.ts b/temp_repo/apps/ui/src/hooks/mutations/use-auto-mode-mutations.ts
new file mode 100644
index 0000000000000000000000000000000000000000..efa835461e092dcfab9acc287fe88e4db7dc900e
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/mutations/use-auto-mode-mutations.ts
@@ -0,0 +1,416 @@
+/**
+ * Auto Mode Mutations
+ *
+ * React Query mutations for auto mode operations like running features,
+ * stopping features, and plan approval.
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { toast } from 'sonner';
+import type { Feature } from '@/store/app-store';
+
+/**
+ * Start running a feature in auto mode
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for starting a feature
+ *
+ * @example
+ * ```tsx
+ * const startFeature = useStartFeature(projectPath);
+ * startFeature.mutate({ featureId: 'abc123', useWorktrees: true });
+ * ```
+ */
+export function useStartFeature(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      featureId,
+      useWorktrees,
+      worktreePath,
+    }: {
+      featureId: string;
+      useWorktrees?: boolean;
+      worktreePath?: string;
+    }) => {
+      const api = getElectronAPI();
+      if (!api.autoMode) throw new Error('AutoMode API not available');
+      const result = await api.autoMode.runFeature(
+        projectPath,
+        featureId,
+        useWorktrees,
+        worktreePath
+      );
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to start feature');
+      }
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.runningAgents.all() });
+      queryClient.invalidateQueries({ queryKey: queryKeys.features.all(projectPath) });
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to start feature', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Resume a paused or interrupted feature
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for resuming a feature
+ */
+export function useResumeFeature(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      featureId,
+      useWorktrees,
+    }: {
+      featureId: string;
+      useWorktrees?: boolean;
+    }) => {
+      const api = getElectronAPI();
+      if (!api.autoMode) throw new Error('AutoMode API not available');
+      const result = await api.autoMode.resumeFeature(projectPath, featureId, useWorktrees);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to resume feature');
+      }
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.runningAgents.all() });
+      queryClient.invalidateQueries({ queryKey: queryKeys.features.all(projectPath) });
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to resume feature', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Stop a running feature
+ *
+ * @returns Mutation for stopping a feature
+ *
+ * @example
+ * ```tsx
+ * const stopFeature = useStopFeature();
+ * // Simple stop
+ * stopFeature.mutate('feature-id');
+ * // Stop with project path for cache invalidation
+ * stopFeature.mutate({ featureId: 'feature-id', projectPath: '/path/to/project' });
+ * ```
+ */
+export function useStopFeature() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (input: string | { featureId: string; projectPath?: string }) => {
+      const featureId = typeof input === 'string' ? input : input.featureId;
+      const api = getElectronAPI();
+      if (!api.autoMode) throw new Error('AutoMode API not available');
+      const result = await api.autoMode.stopFeature(featureId);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to stop feature');
+      }
+      // Return projectPath for use in onSuccess
+      return { ...result, projectPath: typeof input === 'string' ? undefined : input.projectPath };
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.runningAgents.all() });
+      // Also invalidate features cache if projectPath is provided
+      if (data.projectPath) {
+        queryClient.invalidateQueries({ queryKey: queryKeys.features.all(data.projectPath) });
+      }
+      toast.success('Feature stopped');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to stop feature', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Verify a completed feature
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for verifying a feature
+ */
+export function useVerifyFeature(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (featureId: string) => {
+      const api = getElectronAPI();
+      if (!api.autoMode) throw new Error('AutoMode API not available');
+      const result = await api.autoMode.verifyFeature(projectPath, featureId);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to verify feature');
+      }
+      return { ...result, featureId };
+    },
+    onSuccess: (data) => {
+      // If verification passed, optimistically update React Query cache
+      // to move the feature to 'verified' status immediately
+      if (data.passes) {
+        const previousFeatures = queryClient.getQueryData<Feature[]>(
+          queryKeys.features.all(projectPath)
+        );
+        if (previousFeatures) {
+          queryClient.setQueryData<Feature[]>(
+            queryKeys.features.all(projectPath),
+            previousFeatures.map((f) =>
+              f.id === data.featureId
+                ? { ...f, status: 'verified' as const, justFinishedAt: undefined }
+                : f
+            )
+          );
+        }
+      }
+      queryClient.invalidateQueries({ queryKey: queryKeys.features.all(projectPath) });
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to verify feature', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Approve or reject a plan
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for plan approval
+ *
+ * @example
+ * ```tsx
+ * const approvePlan = useApprovePlan(projectPath);
+ * approvePlan.mutate({ featureId: 'abc', approved: true });
+ * ```
+ */
+export function useApprovePlan(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      featureId,
+      approved,
+      editedPlan,
+      feedback,
+    }: {
+      featureId: string;
+      approved: boolean;
+      editedPlan?: string;
+      feedback?: string;
+    }) => {
+      const api = getElectronAPI();
+      if (!api.autoMode) throw new Error('AutoMode API not available');
+      const result = await api.autoMode.approvePlan(
+        projectPath,
+        featureId,
+        approved,
+        editedPlan,
+        feedback
+      );
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to submit plan decision');
+      }
+      return result;
+    },
+    onSuccess: (_, { approved }) => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.features.all(projectPath) });
+      if (approved) {
+        toast.success('Plan approved');
+      } else {
+        toast.info('Plan rejected');
+      }
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to submit plan decision', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Send a follow-up prompt to a feature
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for sending follow-up
+ */
+export function useFollowUpFeature(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      featureId,
+      prompt,
+      imagePaths,
+      useWorktrees,
+    }: {
+      featureId: string;
+      prompt: string;
+      imagePaths?: string[];
+      useWorktrees?: boolean;
+    }) => {
+      const api = getElectronAPI();
+      if (!api.autoMode) throw new Error('AutoMode API not available');
+      const result = await api.autoMode.followUpFeature(
+        projectPath,
+        featureId,
+        prompt,
+        imagePaths,
+        useWorktrees
+      );
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to send follow-up');
+      }
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.runningAgents.all() });
+      queryClient.invalidateQueries({ queryKey: queryKeys.features.all(projectPath) });
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to send follow-up', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Commit feature changes
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for committing feature
+ */
+export function useCommitFeature(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (featureId: string) => {
+      const api = getElectronAPI();
+      if (!api.autoMode) throw new Error('AutoMode API not available');
+      const result = await api.autoMode.commitFeature(projectPath, featureId);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to commit changes');
+      }
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.features.all(projectPath) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.worktrees.all(projectPath) });
+      toast.success('Changes committed');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to commit changes', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Analyze project structure
+ *
+ * @returns Mutation for project analysis
+ */
+export function useAnalyzeProject() {
+  return useMutation({
+    mutationFn: async (projectPath: string) => {
+      const api = getElectronAPI();
+      if (!api.autoMode) throw new Error('AutoMode API not available');
+      const result = await api.autoMode.analyzeProject(projectPath);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to analyze project');
+      }
+      return result;
+    },
+    onSuccess: () => {
+      toast.success('Project analysis started');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to analyze project', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Start auto mode for all pending features
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for starting auto mode
+ */
+export function useStartAutoMode(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (maxConcurrency?: number) => {
+      const api = getElectronAPI();
+      if (!api.autoMode) throw new Error('AutoMode API not available');
+      const result = await api.autoMode.start(projectPath, undefined, maxConcurrency);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to start auto mode');
+      }
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.runningAgents.all() });
+      toast.success('Auto mode started');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to start auto mode', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Stop auto mode for all features
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for stopping auto mode
+ */
+export function useStopAutoMode(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async () => {
+      const api = getElectronAPI();
+      if (!api.autoMode) throw new Error('AutoMode API not available');
+      const result = await api.autoMode.stop(projectPath);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to stop auto mode');
+      }
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.runningAgents.all() });
+      toast.success('Auto mode stopped');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to stop auto mode', {
+        description: error.message,
+      });
+    },
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/mutations/use-cursor-permissions-mutations.ts b/temp_repo/apps/ui/src/hooks/mutations/use-cursor-permissions-mutations.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3b813d2ed1f9d701fdc83a18bc983b4cf884689e
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/mutations/use-cursor-permissions-mutations.ts
@@ -0,0 +1,96 @@
+/**
+ * Cursor Permissions Mutation Hooks
+ *
+ * React Query mutations for managing Cursor CLI permissions.
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { queryKeys } from '@/lib/query-keys';
+import { toast } from 'sonner';
+
+interface ApplyProfileInput {
+  profileId: 'strict' | 'development';
+  scope: 'global' | 'project';
+}
+
+/**
+ * Apply a Cursor permission profile
+ *
+ * @param projectPath - Optional path to the project (required for project scope)
+ * @returns Mutation for applying permission profiles
+ *
+ * @example
+ * ```tsx
+ * const applyMutation = useApplyCursorProfile(projectPath);
+ * applyMutation.mutate({ profileId: 'development', scope: 'project' });
+ * ```
+ */
+export function useApplyCursorProfile(projectPath?: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (input: ApplyProfileInput) => {
+      const { profileId, scope } = input;
+      const api = getHttpApiClient();
+      const result = await api.setup.applyCursorPermissionProfile(
+        profileId,
+        scope,
+        scope === 'project' ? projectPath : undefined
+      );
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to apply profile');
+      }
+
+      return result;
+    },
+    onSuccess: (result) => {
+      // Invalidate permissions cache
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.cursorPermissions.permissions(projectPath),
+      });
+      toast.success(result.message || 'Profile applied');
+    },
+    onError: (error) => {
+      toast.error('Failed to apply profile', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    },
+  });
+}
+
+/**
+ * Copy Cursor example config to clipboard
+ *
+ * @returns Mutation for copying config
+ *
+ * @example
+ * ```tsx
+ * const copyMutation = useCopyCursorConfig();
+ * copyMutation.mutate('development');
+ * ```
+ */
+export function useCopyCursorConfig() {
+  return useMutation({
+    mutationFn: async (profileId: 'strict' | 'development') => {
+      const api = getHttpApiClient();
+      const result = await api.setup.getCursorExampleConfig(profileId);
+
+      if (!result.success || !result.config) {
+        throw new Error(result.error || 'Failed to get config');
+      }
+
+      await navigator.clipboard.writeText(result.config);
+      return result;
+    },
+    onSuccess: () => {
+      toast.success('Config copied to clipboard');
+    },
+    onError: (error) => {
+      toast.error('Failed to copy config', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    },
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/mutations/use-feature-mutations.ts b/temp_repo/apps/ui/src/hooks/mutations/use-feature-mutations.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0b8c4e84c4ede9fae87f2979c8cddf7ece9efacc
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/mutations/use-feature-mutations.ts
@@ -0,0 +1,267 @@
+/**
+ * Feature Mutations
+ *
+ * React Query mutations for creating, updating, and deleting features.
+ * Includes optimistic updates for better UX.
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { toast } from 'sonner';
+import type { Feature } from '@/store/app-store';
+
+/**
+ * Create a new feature
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for creating a feature
+ *
+ * @example
+ * ```tsx
+ * const createFeature = useCreateFeature(projectPath);
+ * createFeature.mutate({ id: 'uuid', title: 'New Feature', ... });
+ * ```
+ */
+export function useCreateFeature(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (feature: Feature) => {
+      const api = getElectronAPI();
+      const result = await api.features?.create(projectPath, feature);
+      if (!result?.success) {
+        throw new Error(result?.error || 'Failed to create feature');
+      }
+      return result.feature;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.features.all(projectPath),
+      });
+      toast.success('Feature created');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to create feature', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Update an existing feature
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for updating a feature with optimistic updates
+ */
+export function useUpdateFeature(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      featureId,
+      updates,
+      descriptionHistorySource,
+      enhancementMode,
+      preEnhancementDescription,
+    }: {
+      featureId: string;
+      updates: Partial<Feature>;
+      descriptionHistorySource?: 'enhance' | 'edit';
+      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer';
+      preEnhancementDescription?: string;
+    }) => {
+      const api = getElectronAPI();
+      const result = await api.features?.update(
+        projectPath,
+        featureId,
+        updates,
+        descriptionHistorySource,
+        enhancementMode,
+        preEnhancementDescription
+      );
+      if (!result?.success) {
+        throw new Error(result?.error || 'Failed to update feature');
+      }
+      return result.feature;
+    },
+    // Optimistic update
+    onMutate: async ({ featureId, updates }) => {
+      // Cancel any outgoing refetches
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.features.all(projectPath),
+      });
+
+      // Snapshot the previous value
+      const previousFeatures = queryClient.getQueryData<Feature[]>(
+        queryKeys.features.all(projectPath)
+      );
+
+      // Optimistically update the cache
+      if (previousFeatures) {
+        queryClient.setQueryData<Feature[]>(
+          queryKeys.features.all(projectPath),
+          previousFeatures.map((f) => (f.id === featureId ? { ...f, ...updates } : f))
+        );
+      }
+
+      return { previousFeatures };
+    },
+    onError: (error: Error, _, context) => {
+      // Rollback on error
+      if (context?.previousFeatures) {
+        queryClient.setQueryData(queryKeys.features.all(projectPath), context.previousFeatures);
+      }
+      toast.error('Failed to update feature', {
+        description: error.message,
+      });
+    },
+    onSettled: () => {
+      // Always refetch after error or success
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.features.all(projectPath),
+      });
+    },
+  });
+}
+
+/**
+ * Delete a feature
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for deleting a feature with optimistic updates
+ */
+export function useDeleteFeature(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (featureId: string) => {
+      const api = getElectronAPI();
+      const result = await api.features?.delete(projectPath, featureId);
+      if (!result?.success) {
+        throw new Error(result?.error || 'Failed to delete feature');
+      }
+    },
+    // Optimistic delete
+    onMutate: async (featureId) => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.features.all(projectPath),
+      });
+
+      const previousFeatures = queryClient.getQueryData<Feature[]>(
+        queryKeys.features.all(projectPath)
+      );
+
+      if (previousFeatures) {
+        queryClient.setQueryData<Feature[]>(
+          queryKeys.features.all(projectPath),
+          previousFeatures.filter((f) => f.id !== featureId)
+        );
+      }
+
+      return { previousFeatures };
+    },
+    onError: (error: Error, _, context) => {
+      if (context?.previousFeatures) {
+        queryClient.setQueryData(queryKeys.features.all(projectPath), context.previousFeatures);
+      }
+      toast.error('Failed to delete feature', {
+        description: error.message,
+      });
+    },
+    onSuccess: () => {
+      toast.success('Feature deleted');
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.features.all(projectPath),
+      });
+    },
+  });
+}
+
+/**
+ * Generate a title for a feature description
+ *
+ * @returns Mutation for generating a title
+ */
+export function useGenerateTitle() {
+  return useMutation({
+    mutationFn: async (description: string) => {
+      const api = getElectronAPI();
+      const result = await api.features?.generateTitle(description);
+      if (!result?.success) {
+        throw new Error(result?.error || 'Failed to generate title');
+      }
+      return result.title ?? '';
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to generate title', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Batch update multiple features (for reordering)
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for batch updating features
+ */
+export function useBatchUpdateFeatures(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (updates: Array<{ featureId: string; updates: Partial<Feature> }>) => {
+      const api = getElectronAPI();
+      const results = await Promise.all(
+        updates.map(({ featureId, updates: featureUpdates }) =>
+          api.features?.update(projectPath, featureId, featureUpdates)
+        )
+      );
+
+      const failed = results.filter((r) => !r?.success);
+      if (failed.length > 0) {
+        throw new Error(`Failed to update ${failed.length} features`);
+      }
+    },
+    // Optimistic batch update
+    onMutate: async (updates) => {
+      await queryClient.cancelQueries({
+        queryKey: queryKeys.features.all(projectPath),
+      });
+
+      const previousFeatures = queryClient.getQueryData<Feature[]>(
+        queryKeys.features.all(projectPath)
+      );
+
+      if (previousFeatures) {
+        const updatesMap = new Map(updates.map((u) => [u.featureId, u.updates]));
+        queryClient.setQueryData<Feature[]>(
+          queryKeys.features.all(projectPath),
+          previousFeatures.map((f) => {
+            const featureUpdates = updatesMap.get(f.id);
+            return featureUpdates ? { ...f, ...featureUpdates } : f;
+          })
+        );
+      }
+
+      return { previousFeatures };
+    },
+    onError: (error: Error, _, context) => {
+      if (context?.previousFeatures) {
+        queryClient.setQueryData(queryKeys.features.all(projectPath), context.previousFeatures);
+      }
+      toast.error('Failed to update features', {
+        description: error.message,
+      });
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.features.all(projectPath),
+      });
+    },
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/mutations/use-github-mutations.ts b/temp_repo/apps/ui/src/hooks/mutations/use-github-mutations.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d56058dc6f8cc1ae6cf94e49c14f659b59f1e380
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/mutations/use-github-mutations.ts
@@ -0,0 +1,213 @@
+/**
+ * GitHub Mutation Hooks
+ *
+ * React Query mutations for GitHub operations like validating issues.
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { getElectronAPI, GitHubIssue, GitHubComment } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { toast } from 'sonner';
+import type { LinkedPRInfo, ModelId, ThinkingLevel, ReasoningEffort } from '@automaker/types';
+import { resolveModelString } from '@automaker/model-resolver';
+
+/**
+ * Input for validating a GitHub issue
+ */
+interface ValidateIssueInput {
+  issue: GitHubIssue;
+  model?: ModelId;
+  thinkingLevel?: ThinkingLevel;
+  reasoningEffort?: ReasoningEffort;
+  providerId?: string;
+  comments?: GitHubComment[];
+  linkedPRs?: LinkedPRInfo[];
+}
+
+/**
+ * Validate a GitHub issue with AI
+ *
+ * This mutation triggers an async validation process. Results are delivered
+ * via WebSocket events (issue_validation_complete, issue_validation_error).
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for validating issues
+ *
+ * @example
+ * ```tsx
+ * const validateMutation = useValidateIssue(projectPath);
+ *
+ * validateMutation.mutate({
+ *   issue,
+ *   model: 'sonnet',
+ *   comments,
+ *   linkedPRs,
+ * });
+ * ```
+ */
+export function useValidateIssue(projectPath: string) {
+  return useMutation({
+    mutationFn: async (input: ValidateIssueInput) => {
+      const { issue, model, thinkingLevel, reasoningEffort, providerId, comments, linkedPRs } =
+        input;
+
+      const api = getElectronAPI();
+      if (!api.github?.validateIssue) {
+        throw new Error('Validation API not available');
+      }
+
+      const validationInput = {
+        issueNumber: issue.number,
+        issueTitle: issue.title,
+        issueBody: issue.body || '',
+        issueLabels: issue.labels.map((l) => l.name),
+        comments,
+        linkedPRs,
+      };
+
+      // Resolve model alias to canonical model identifier
+      const resolvedModel = model ? resolveModelString(model) : undefined;
+
+      const result = await api.github.validateIssue(
+        projectPath,
+        validationInput,
+        resolvedModel,
+        thinkingLevel,
+        reasoningEffort,
+        providerId
+      );
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to start validation');
+      }
+
+      return { issueNumber: issue.number };
+    },
+    onSuccess: (_, variables) => {
+      toast.info(`Starting validation for issue #${variables.issue.number}`, {
+        description: 'You will be notified when the analysis is complete',
+      });
+    },
+    onError: (error) => {
+      toast.error('Failed to validate issue', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    },
+    // Note: We don't invalidate queries here because the actual result
+    // comes through WebSocket events which handle cache invalidation
+  });
+}
+
+/**
+ * Mark a validation as viewed
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for marking validation as viewed
+ *
+ * @example
+ * ```tsx
+ * const markViewedMutation = useMarkValidationViewed(projectPath);
+ * markViewedMutation.mutate(issueNumber);
+ * ```
+ */
+export function useMarkValidationViewed(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (issueNumber: number) => {
+      const api = getElectronAPI();
+      if (!api.github?.markValidationViewed) {
+        throw new Error('Mark viewed API not available');
+      }
+
+      const result = await api.github.markValidationViewed(projectPath, issueNumber);
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to mark as viewed');
+      }
+
+      return { issueNumber };
+    },
+    onSuccess: () => {
+      // Invalidate validations cache to refresh the viewed state
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.github.validations(projectPath),
+      });
+    },
+    // Silent mutation - no toast needed for marking as viewed
+  });
+}
+
+/**
+ * Resolve or unresolve a PR review thread
+ *
+ * @param projectPath - Path to the project
+ * @param prNumber - PR number (for cache invalidation)
+ * @returns Mutation for resolving/unresolving a review thread
+ *
+ * @example
+ * ```tsx
+ * const resolveThread = useResolveReviewThread(projectPath, prNumber);
+ * resolveThread.mutate({ threadId: comment.threadId, resolve: true });
+ * ```
+ */
+export function useResolveReviewThread(projectPath: string, prNumber: number) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ threadId, resolve }: { threadId: string; resolve: boolean }) => {
+      const api = getElectronAPI();
+      if (!api.github?.resolveReviewThread) {
+        throw new Error('Resolve review thread API not available');
+      }
+
+      const result = await api.github.resolveReviewThread(projectPath, threadId, resolve);
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to resolve review thread');
+      }
+
+      return { isResolved: result.isResolved ?? resolve };
+    },
+    onSuccess: (_, variables) => {
+      const action = variables.resolve ? 'resolved' : 'unresolved';
+      toast.success(`Comment ${action}`, {
+        description: `The review thread has been ${action} on GitHub`,
+      });
+      // Invalidate the PR review comments cache to reflect updated resolved status
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.github.prReviewComments(projectPath, prNumber),
+      });
+    },
+    onError: (error) => {
+      toast.error('Failed to update comment', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    },
+  });
+}
+
+/**
+ * Get running validation status
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for getting validation status (returns running issue numbers)
+ */
+export function useGetValidationStatus(projectPath: string) {
+  return useMutation({
+    mutationFn: async () => {
+      const api = getElectronAPI();
+      if (!api.github?.getValidationStatus) {
+        throw new Error('Validation status API not available');
+      }
+
+      const result = await api.github.getValidationStatus(projectPath);
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to get validation status');
+      }
+
+      return result.runningIssues ?? [];
+    },
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/mutations/use-ideation-mutations.ts b/temp_repo/apps/ui/src/hooks/mutations/use-ideation-mutations.ts
new file mode 100644
index 0000000000000000000000000000000000000000..10cdfab71879515d0814102b57ef6ab505b1eec8
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/mutations/use-ideation-mutations.ts
@@ -0,0 +1,119 @@
+/**
+ * Ideation Mutation Hooks
+ *
+ * React Query mutations for ideation operations like generating suggestions.
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { toast } from 'sonner';
+import type { IdeaCategory, AnalysisSuggestion } from '@automaker/types';
+import { useIdeationStore } from '@/store/ideation-store';
+
+/**
+ * Input for generating ideation suggestions
+ */
+interface GenerateSuggestionsInput {
+  promptId: string;
+  category: IdeaCategory;
+  /** Job ID for tracking generation progress - used to update job status on completion */
+  jobId: string;
+  /** Prompt title for toast notifications */
+  promptTitle: string;
+}
+
+/**
+ * Result from generating suggestions
+ */
+interface GenerateSuggestionsResult {
+  suggestions: AnalysisSuggestion[];
+  promptId: string;
+  category: IdeaCategory;
+  /** Job ID passed through for onSuccess handler */
+  jobId: string;
+  /** Prompt title passed through for toast notifications */
+  promptTitle: string;
+}
+
+/**
+ * Generate ideation suggestions based on a prompt
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for generating suggestions
+ *
+ * @example
+ * ```tsx
+ * const generateMutation = useGenerateIdeationSuggestions(projectPath);
+ *
+ * generateMutation.mutate({
+ *   promptId: 'prompt-1',
+ *   category: 'ux',
+ * }, {
+ *   onSuccess: (data) => {
+ *     console.log('Generated', data.suggestions.length, 'suggestions');
+ *   },
+ * });
+ * ```
+ */
+export function useGenerateIdeationSuggestions(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (input: GenerateSuggestionsInput): Promise<GenerateSuggestionsResult> => {
+      const { promptId, category, jobId, promptTitle } = input;
+
+      const api = getElectronAPI();
+      if (!api.ideation?.generateSuggestions) {
+        throw new Error('Ideation API not available');
+      }
+
+      // Get context sources from store
+      const contextSources = useIdeationStore.getState().getContextSources(projectPath);
+
+      const result = await api.ideation.generateSuggestions(
+        projectPath,
+        promptId,
+        category,
+        undefined, // count - use default
+        contextSources
+      );
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to generate suggestions');
+      }
+
+      return {
+        suggestions: result.suggestions ?? [],
+        promptId,
+        category,
+        jobId,
+        promptTitle,
+      };
+    },
+    onSuccess: (data) => {
+      // Update job status in Zustand store - this runs even if the component unmounts
+      // Using getState() to access store directly without hooks (safe in callbacks)
+      const updateJobStatus = useIdeationStore.getState().updateJobStatus;
+      updateJobStatus(data.jobId, 'ready', data.suggestions);
+
+      // Show success toast
+      toast.success(`Generated ${data.suggestions.length} ideas for "${data.promptTitle}"`, {
+        duration: 10000,
+      });
+
+      // Invalidate ideation ideas cache
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.ideation.ideas(projectPath),
+      });
+    },
+    onError: (error, variables) => {
+      // Update job status to error - this runs even if the component unmounts
+      const updateJobStatus = useIdeationStore.getState().updateJobStatus;
+      updateJobStatus(variables.jobId, 'error', undefined, error.message);
+
+      // Show error toast
+      toast.error(`Failed to generate ideas: ${error.message}`);
+    },
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/mutations/use-settings-mutations.ts b/temp_repo/apps/ui/src/hooks/mutations/use-settings-mutations.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cabf3669c10faa2505de6ea92bda61c12ef7077c
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/mutations/use-settings-mutations.ts
@@ -0,0 +1,160 @@
+/**
+ * Settings Mutations
+ *
+ * React Query mutations for updating global and project settings.
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { toast } from 'sonner';
+
+interface UpdateGlobalSettingsOptions {
+  /** Show success toast (default: true) */
+  showSuccessToast?: boolean;
+}
+
+/**
+ * Update global settings
+ *
+ * @param options - Configuration options
+ * @returns Mutation for updating global settings
+ *
+ * @example
+ * ```tsx
+ * const mutation = useUpdateGlobalSettings();
+ * mutation.mutate({ enableSkills: true });
+ *
+ * // With custom success handling (no default toast)
+ * const mutation = useUpdateGlobalSettings({ showSuccessToast: false });
+ * mutation.mutate({ enableSkills: true }, {
+ *   onSuccess: () => toast.success('Skills enabled'),
+ * });
+ * ```
+ */
+export function useUpdateGlobalSettings(options: UpdateGlobalSettingsOptions = {}) {
+  const { showSuccessToast = true } = options;
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (settings: Record<string, unknown>) => {
+      const api = getElectronAPI();
+      if (!api.settings) {
+        throw new Error('Settings API not available');
+      }
+      // Use updateGlobal for partial updates
+      const result = await api.settings.updateGlobal(settings);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to update settings');
+      }
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.settings.global() });
+      if (showSuccessToast) {
+        toast.success('Settings saved');
+      }
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to save settings', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Update project settings
+ *
+ * @param projectPath - Optional path to the project (can also pass via mutation variables)
+ * @returns Mutation for updating project settings
+ */
+interface ProjectSettingsWithPath {
+  projectPath: string;
+  settings: Record<string, unknown>;
+}
+
+export function useUpdateProjectSettings(projectPath?: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (variables: Record<string, unknown> | ProjectSettingsWithPath) => {
+      // Support both call patterns:
+      // 1. useUpdateProjectSettings(projectPath) then mutate(settings)
+      // 2. useUpdateProjectSettings() then mutate({ projectPath, settings })
+      let path: string;
+      let settings: Record<string, unknown>;
+
+      if (
+        typeof variables === 'object' &&
+        'projectPath' in variables &&
+        'settings' in variables &&
+        typeof variables.projectPath === 'string' &&
+        typeof variables.settings === 'object'
+      ) {
+        path = variables.projectPath;
+        settings = variables.settings as Record<string, unknown>;
+      } else if (projectPath) {
+        path = projectPath;
+        settings = variables as Record<string, unknown>;
+      } else {
+        throw new Error('Project path is required');
+      }
+
+      const api = getElectronAPI();
+      if (!api.settings) {
+        throw new Error('Settings API not available');
+      }
+      const result = await api.settings.updateProject(path, settings);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to update project settings');
+      }
+      return { ...result, projectPath: path };
+    },
+    onSuccess: (data) => {
+      const path = data.projectPath || projectPath;
+      if (path) {
+        queryClient.invalidateQueries({ queryKey: queryKeys.settings.project(path) });
+      }
+      toast.success('Project settings saved');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to save project settings', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Save credentials (API keys)
+ *
+ * @returns Mutation for saving credentials
+ */
+export function useSaveCredentials() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (credentials: { anthropic?: string; google?: string; openai?: string }) => {
+      const api = getElectronAPI();
+      if (!api.settings) {
+        throw new Error('Settings API not available');
+      }
+      const result = await api.settings.updateCredentials({ apiKeys: credentials });
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to save credentials');
+      }
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.settings.credentials() });
+      queryClient.invalidateQueries({ queryKey: queryKeys.cli.apiKeys() });
+      toast.success('Credentials saved');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to save credentials', {
+        description: error.message,
+      });
+    },
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/mutations/use-spec-mutations.ts b/temp_repo/apps/ui/src/hooks/mutations/use-spec-mutations.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a9e890c0418c35fde16eb43ee3c53bd2b644f985
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/mutations/use-spec-mutations.ts
@@ -0,0 +1,184 @@
+/**
+ * Spec Mutation Hooks
+ *
+ * React Query mutations for spec operations like creating, regenerating, and saving.
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { toast } from 'sonner';
+import type { FeatureCount } from '@/components/views/spec-view/types';
+
+/**
+ * Input for creating a spec
+ */
+interface CreateSpecInput {
+  projectOverview: string;
+  generateFeatures: boolean;
+  analyzeProject: boolean;
+  featureCount?: FeatureCount;
+}
+
+/**
+ * Input for regenerating a spec
+ */
+interface RegenerateSpecInput {
+  projectDefinition: string;
+  generateFeatures: boolean;
+  analyzeProject: boolean;
+  featureCount?: FeatureCount;
+}
+
+/**
+ * Create a new spec for a project
+ *
+ * This mutation triggers an async spec creation process. Progress and completion
+ * are delivered via WebSocket events (spec_regeneration_progress, spec_regeneration_complete).
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for creating specs
+ *
+ * @example
+ * ```tsx
+ * const createMutation = useCreateSpec(projectPath);
+ *
+ * createMutation.mutate({
+ *   projectOverview: 'A todo app with...',
+ *   generateFeatures: true,
+ *   analyzeProject: true,
+ *   featureCount: 50,
+ * });
+ * ```
+ */
+export function useCreateSpec(projectPath: string) {
+  return useMutation({
+    mutationFn: async (input: CreateSpecInput) => {
+      const { projectOverview, generateFeatures, analyzeProject, featureCount } = input;
+
+      const api = getElectronAPI();
+      if (!api.specRegeneration) {
+        throw new Error('Spec regeneration API not available');
+      }
+
+      const result = await api.specRegeneration.create(
+        projectPath,
+        projectOverview.trim(),
+        generateFeatures,
+        analyzeProject,
+        generateFeatures ? featureCount : undefined
+      );
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to start spec creation');
+      }
+
+      return result;
+    },
+    // Toast/state updates are handled by the component since it tracks WebSocket events
+  });
+}
+
+/**
+ * Regenerate an existing spec
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for regenerating specs
+ */
+export function useRegenerateSpec(projectPath: string) {
+  return useMutation({
+    mutationFn: async (input: RegenerateSpecInput) => {
+      const { projectDefinition, generateFeatures, analyzeProject, featureCount } = input;
+
+      const api = getElectronAPI();
+      if (!api.specRegeneration) {
+        throw new Error('Spec regeneration API not available');
+      }
+
+      const result = await api.specRegeneration.generate(
+        projectPath,
+        projectDefinition.trim(),
+        generateFeatures,
+        analyzeProject,
+        generateFeatures ? featureCount : undefined
+      );
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to start spec regeneration');
+      }
+
+      return result;
+    },
+  });
+}
+
+/**
+ * Generate features from existing spec
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for generating features
+ */
+export function useGenerateFeatures(projectPath: string) {
+  return useMutation({
+    mutationFn: async () => {
+      const api = getElectronAPI();
+      if (!api.specRegeneration) {
+        throw new Error('Spec regeneration API not available');
+      }
+
+      const result = await api.specRegeneration.generateFeatures(projectPath);
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to start feature generation');
+      }
+
+      return result;
+    },
+  });
+}
+
+/**
+ * Save spec file content
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for saving spec
+ *
+ * @example
+ * ```tsx
+ * const saveMutation = useSaveSpec(projectPath);
+ *
+ * saveMutation.mutate(specContent, {
+ *   onSuccess: () => setHasChanges(false),
+ * });
+ * ```
+ */
+export function useSaveSpec(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (content: string) => {
+      // Guard against empty projectPath to prevent writing to invalid locations
+      if (!projectPath || projectPath.trim() === '') {
+        throw new Error('Invalid project path: cannot save spec without a valid project');
+      }
+
+      const api = getElectronAPI();
+
+      await api.writeFile(`${projectPath}/.automaker/app_spec.txt`, content);
+
+      return { content };
+    },
+    onSuccess: () => {
+      // Invalidate spec file cache
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.spec.file(projectPath),
+      });
+      toast.success('Spec saved');
+    },
+    onError: (error) => {
+      toast.error('Failed to save spec', {
+        description: error instanceof Error ? error.message : 'Unknown error',
+      });
+    },
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/mutations/use-worktree-mutations.ts b/temp_repo/apps/ui/src/hooks/mutations/use-worktree-mutations.ts
new file mode 100644
index 0000000000000000000000000000000000000000..467f6606d91e8ae4726a006208085160a97226e1
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/mutations/use-worktree-mutations.ts
@@ -0,0 +1,836 @@
+/**
+ * Worktree Mutations
+ *
+ * React Query mutations for worktree operations like creating, deleting,
+ * committing, pushing, and creating pull requests.
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { toast } from 'sonner';
+
+/**
+ * Create a new worktree
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for creating a worktree
+ */
+export function useCreateWorktree(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ branchName, baseBranch }: { branchName: string; baseBranch?: string }) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.create(projectPath, branchName, baseBranch);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to create worktree');
+      }
+      return result.worktree;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.worktrees.all(projectPath) });
+      toast.success('Worktree created');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to create worktree', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Delete a worktree
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for deleting a worktree
+ */
+export function useDeleteWorktree(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      worktreePath,
+      deleteBranch,
+    }: {
+      worktreePath: string;
+      deleteBranch?: boolean;
+    }) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.delete(projectPath, worktreePath, deleteBranch);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to delete worktree');
+      }
+      return result.deleted;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.worktrees.all(projectPath) });
+      toast.success('Worktree deleted');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to delete worktree', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Commit changes in a worktree
+ *
+ * @returns Mutation for committing changes
+ */
+export function useCommitWorktree() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      worktreePath,
+      message,
+      files,
+    }: {
+      worktreePath: string;
+      message: string;
+      files?: string[];
+    }) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.commit(worktreePath, message, files);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to commit changes');
+      }
+      return result.result;
+    },
+    onSuccess: (_, { worktreePath: _worktreePath }) => {
+      // Invalidate all worktree queries since we don't know the project path
+      queryClient.invalidateQueries({ queryKey: ['worktrees'] });
+      toast.success('Changes committed');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to commit changes', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Push worktree branch to remote
+ *
+ * @returns Mutation for pushing changes
+ */
+export function usePushWorktree() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      worktreePath,
+      force,
+      remote,
+    }: {
+      worktreePath: string;
+      force?: boolean;
+      remote?: string;
+    }) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.push(worktreePath, force, remote);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to push changes');
+      }
+      return result.result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['worktrees'] });
+      toast.success('Changes pushed to remote');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to push changes', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Pull changes from remote
+ *
+ * Enhanced to support stash management. When stashIfNeeded is true,
+ * local changes will be automatically stashed before pulling and
+ * reapplied afterward.
+ *
+ * @returns Mutation for pulling changes
+ */
+export function usePullWorktree() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      worktreePath,
+      remote,
+      stashIfNeeded,
+    }: {
+      worktreePath: string;
+      remote?: string;
+      stashIfNeeded?: boolean;
+    }) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.pull(worktreePath, remote, stashIfNeeded);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to pull changes');
+      }
+      return result.result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['worktrees'] });
+      toast.success('Changes pulled from remote');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to pull changes', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Sync worktree branch (pull then push)
+ *
+ * @returns Mutation for syncing changes
+ */
+export function useSyncWorktree() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ worktreePath, remote }: { worktreePath: string; remote?: string }) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.sync(worktreePath, remote);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to sync');
+      }
+      return result.result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['worktrees'] });
+      toast.success('Branch synced with remote');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to sync', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Set upstream tracking branch
+ *
+ * @returns Mutation for setting tracking branch
+ */
+export function useSetTracking() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      worktreePath,
+      remote,
+      branch,
+    }: {
+      worktreePath: string;
+      remote: string;
+      branch?: string;
+    }) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.setTracking(worktreePath, remote, branch);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to set tracking branch');
+      }
+      return result.result;
+    },
+    onSuccess: (result) => {
+      queryClient.invalidateQueries({ queryKey: ['worktrees'] });
+      toast.success('Tracking branch set', {
+        description: result?.message,
+      });
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to set tracking branch', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Create a pull request from a worktree
+ *
+ * @returns Mutation for creating a PR
+ */
+export function useCreatePullRequest() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      worktreePath,
+      options,
+    }: {
+      worktreePath: string;
+      options?: {
+        projectPath?: string;
+        commitMessage?: string;
+        prTitle?: string;
+        prBody?: string;
+        baseBranch?: string;
+        draft?: boolean;
+      };
+    }) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.createPR(worktreePath, options);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to create pull request');
+      }
+      return result.result;
+    },
+    onSuccess: (result) => {
+      queryClient.invalidateQueries({ queryKey: ['worktrees'] });
+      queryClient.invalidateQueries({ queryKey: ['github', 'prs'] });
+      if (result?.prUrl) {
+        toast.success('Pull request created', {
+          description: `PR #${result.prNumber} created`,
+          action: {
+            label: 'Open',
+            onClick: () => {
+              const api = getElectronAPI();
+              api.openExternalLink(result.prUrl!);
+            },
+          },
+        });
+      } else if (result?.prAlreadyExisted) {
+        toast.info('Pull request already exists');
+      }
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to create pull request', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Merge a worktree branch into main
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for merging a feature
+ */
+export function useMergeWorktree(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      branchName,
+      worktreePath,
+      options,
+    }: {
+      branchName: string;
+      worktreePath: string;
+      options?: {
+        squash?: boolean;
+        message?: string;
+      };
+    }) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.mergeFeature(
+        projectPath,
+        branchName,
+        worktreePath,
+        undefined, // targetBranch - use default (main)
+        options
+      );
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to merge feature');
+      }
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.worktrees.all(projectPath) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.features.all(projectPath) });
+      toast.success('Feature merged successfully');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to merge feature', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Switch to a different branch
+ *
+ * Automatically stashes local changes before switching and reapplies them after.
+ * If the reapply causes merge conflicts, the onConflict callback is called so
+ * the UI can create a conflict resolution task.
+ *
+ * If the checkout itself fails and the stash-pop used to restore changes also
+ * produces conflicts, the onStashPopConflict callback is called so the UI can
+ * create an AI-assisted conflict resolution task on the board.
+ *
+ * @param options.onConflict - Callback when merge conflicts occur after stash reapply (success path)
+ * @param options.onStashPopConflict - Callback when checkout fails AND stash-pop restoration has conflicts
+ * @returns Mutation for switching branches
+ */
+export function useSwitchBranch(options?: {
+  onConflict?: (info: { worktreePath: string; branchName: string; previousBranch: string }) => void;
+  onStashPopConflict?: (info: {
+    worktreePath: string;
+    branchName: string;
+    stashPopConflictMessage: string;
+  }) => void;
+}) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      worktreePath,
+      branchName,
+    }: {
+      worktreePath: string;
+      branchName: string;
+    }) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.switchBranch(worktreePath, branchName);
+      if (!result.success) {
+        // When the checkout failed and restoring the stash produced conflicts, surface
+        // this as a structured error so the caller can create a board task for resolution.
+        if (result.stashPopConflicts) {
+          const conflictError = new Error(result.error || 'Failed to switch branch');
+          // Attach the extra metadata so onError can forward it to the callback.
+          (
+            conflictError as Error & {
+              stashPopConflicts: boolean;
+              stashPopConflictMessage: string;
+              worktreePath: string;
+              branchName: string;
+            }
+          ).stashPopConflicts = true;
+          (
+            conflictError as Error & {
+              stashPopConflicts: boolean;
+              stashPopConflictMessage: string;
+              worktreePath: string;
+              branchName: string;
+            }
+          ).stashPopConflictMessage =
+            result.stashPopConflictMessage ??
+            'Stash pop resulted in conflicts: please resolve conflicts before retrying.';
+          (
+            conflictError as Error & {
+              stashPopConflicts: boolean;
+              stashPopConflictMessage: string;
+              worktreePath: string;
+              branchName: string;
+            }
+          ).worktreePath = worktreePath;
+          (
+            conflictError as Error & {
+              stashPopConflicts: boolean;
+              stashPopConflictMessage: string;
+              worktreePath: string;
+              branchName: string;
+            }
+          ).branchName = branchName;
+          throw conflictError;
+        }
+        throw new Error(result.error || 'Failed to switch branch');
+      }
+      if (!result.result) {
+        throw new Error('Switch branch returned no result');
+      }
+      return result.result;
+    },
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['worktrees'] });
+
+      if (data?.hasConflicts) {
+        toast.warning('Switched branch with conflicts', {
+          description: data.message,
+          duration: 8000,
+        });
+        // Trigger conflict resolution callback
+        options?.onConflict?.({
+          worktreePath: variables.worktreePath,
+          branchName: data.currentBranch,
+          previousBranch: data.previousBranch,
+        });
+      } else {
+        const desc = data?.stashedChanges ? 'Local changes were stashed and reapplied' : undefined;
+        toast.success('Switched branch', { description: desc });
+      }
+    },
+    onError: (error: Error) => {
+      const enrichedError = error as Error & {
+        stashPopConflicts?: boolean;
+        stashPopConflictMessage?: string;
+        worktreePath?: string;
+        branchName?: string;
+      };
+
+      if (
+        enrichedError.stashPopConflicts &&
+        enrichedError.worktreePath &&
+        enrichedError.branchName
+      ) {
+        // Checkout failed AND the stash-pop produced conflicts — notify the UI so it
+        // can create an AI-assisted board task to guide the user through resolution.
+        toast.error('Branch switch failed with stash conflicts', {
+          description:
+            enrichedError.stashPopConflictMessage ??
+            'Stash pop resulted in conflicts. Please resolve the conflicts in your working tree.',
+          duration: 10000,
+        });
+        options?.onStashPopConflict?.({
+          worktreePath: enrichedError.worktreePath,
+          branchName: enrichedError.branchName,
+          stashPopConflictMessage:
+            enrichedError.stashPopConflictMessage ??
+            'Stash pop resulted in conflicts. Please resolve the conflicts in your working tree.',
+        });
+      } else {
+        toast.error('Failed to switch branch', {
+          description: error.message,
+        });
+      }
+    },
+  });
+}
+
+/**
+ * Checkout a new branch
+ *
+ * Supports automatic stash handling. When stashChanges is true in the mutation
+ * variables, local changes are stashed before creating the branch and reapplied
+ * after. If the reapply causes merge conflicts, the onConflict callback is called.
+ *
+ * If the checkout itself fails and the stash-pop used to restore changes also
+ * produces conflicts, the onStashPopConflict callback is called.
+ *
+ * @param options.onConflict - Callback when merge conflicts occur after stash reapply
+ * @param options.onStashPopConflict - Callback when checkout fails AND stash-pop restoration has conflicts
+ * @returns Mutation for creating and checking out a new branch
+ */
+export function useCheckoutBranch(options?: {
+  onConflict?: (info: { worktreePath: string; branchName: string; previousBranch: string }) => void;
+  onStashPopConflict?: (info: {
+    worktreePath: string;
+    branchName: string;
+    stashPopConflictMessage: string;
+  }) => void;
+}) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      worktreePath,
+      branchName,
+      baseBranch,
+      stashChanges,
+      includeUntracked,
+    }: {
+      worktreePath: string;
+      branchName: string;
+      baseBranch?: string;
+      stashChanges?: boolean;
+      includeUntracked?: boolean;
+    }) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.checkoutBranch(
+        worktreePath,
+        branchName,
+        baseBranch,
+        stashChanges,
+        includeUntracked
+      );
+      if (!result.success) {
+        // When the checkout failed and restoring the stash produced conflicts
+        if (result.stashPopConflicts) {
+          const conflictError = new Error(result.error || 'Failed to checkout branch');
+          (
+            conflictError as Error & {
+              stashPopConflicts: boolean;
+              stashPopConflictMessage: string;
+              worktreePath: string;
+              branchName: string;
+            }
+          ).stashPopConflicts = true;
+          (
+            conflictError as Error & {
+              stashPopConflicts: boolean;
+              stashPopConflictMessage: string;
+              worktreePath: string;
+              branchName: string;
+            }
+          ).stashPopConflictMessage =
+            result.stashPopConflictMessage ??
+            'Stash pop resulted in conflicts: please resolve conflicts before retrying.';
+          (
+            conflictError as Error & {
+              stashPopConflicts: boolean;
+              stashPopConflictMessage: string;
+              worktreePath: string;
+              branchName: string;
+            }
+          ).worktreePath = worktreePath;
+          (
+            conflictError as Error & {
+              stashPopConflicts: boolean;
+              stashPopConflictMessage: string;
+              worktreePath: string;
+              branchName: string;
+            }
+          ).branchName = branchName;
+          throw conflictError;
+        }
+        throw new Error(result.error || 'Failed to checkout branch');
+      }
+      return result.result;
+    },
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['worktrees'] });
+
+      if (data?.hasConflicts) {
+        toast.warning('Branch created with conflicts', {
+          description: data.message,
+          duration: 8000,
+        });
+        options?.onConflict?.({
+          worktreePath: variables.worktreePath,
+          branchName: data.newBranch ?? variables.branchName,
+          previousBranch: data.previousBranch ?? '',
+        });
+      } else {
+        const desc = data?.stashedChanges ? 'Local changes were stashed and reapplied' : undefined;
+        toast.success('New branch created and checked out', { description: desc });
+      }
+    },
+    onError: (error: Error) => {
+      const enrichedError = error as Error & {
+        stashPopConflicts?: boolean;
+        stashPopConflictMessage?: string;
+        worktreePath?: string;
+        branchName?: string;
+      };
+
+      if (
+        enrichedError.stashPopConflicts &&
+        enrichedError.worktreePath &&
+        enrichedError.branchName
+      ) {
+        toast.error('Branch creation failed with stash conflicts', {
+          description:
+            enrichedError.stashPopConflictMessage ??
+            'Stash pop resulted in conflicts. Please resolve the conflicts in your working tree.',
+          duration: 10000,
+        });
+        options?.onStashPopConflict?.({
+          worktreePath: enrichedError.worktreePath,
+          branchName: enrichedError.branchName,
+          stashPopConflictMessage:
+            enrichedError.stashPopConflictMessage ??
+            'Stash pop resulted in conflicts. Please resolve the conflicts in your working tree.',
+        });
+      } else {
+        toast.error('Failed to checkout branch', {
+          description: error.message,
+        });
+      }
+    },
+  });
+}
+
+/**
+ * Generate a PR title and description from branch diff
+ *
+ * @returns Mutation for generating a PR description
+ */
+export function useGeneratePRDescription() {
+  return useMutation({
+    mutationFn: async ({
+      worktreePath,
+      baseBranch,
+    }: {
+      worktreePath: string;
+      baseBranch?: string;
+    }) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.generatePRDescription(worktreePath, baseBranch);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to generate PR description');
+      }
+      return { title: result.title ?? '', body: result.body ?? '' };
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to generate PR description', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Generate a commit message from git diff
+ *
+ * @returns Mutation for generating a commit message
+ */
+export function useGenerateCommitMessage() {
+  return useMutation({
+    mutationFn: async (worktreePath: string) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.generateCommitMessage(worktreePath);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to generate commit message');
+      }
+      return result.message ?? '';
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to generate commit message', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Open worktree in editor
+ *
+ * @returns Mutation for opening in editor
+ */
+export function useOpenInEditor() {
+  return useMutation({
+    mutationFn: async ({
+      worktreePath,
+      editorCommand,
+    }: {
+      worktreePath: string;
+      editorCommand?: string;
+    }) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.openInEditor(worktreePath, editorCommand);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to open in editor');
+      }
+      return result.result;
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to open in editor', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Initialize git in a project
+ *
+ * @returns Mutation for initializing git
+ */
+export function useInitGit() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (projectPath: string) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.initGit(projectPath);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to initialize git');
+      }
+      return result.result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['worktrees'] });
+      queryClient.invalidateQueries({ queryKey: ['github'] });
+      toast.success('Git repository initialized');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to initialize git', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Set init script for a project
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for setting init script
+ */
+export function useSetInitScript(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (content: string) => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.setInitScript(projectPath, content);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to save init script');
+      }
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.worktrees.initScript(projectPath) });
+      toast.success('Init script saved');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to save init script', {
+        description: error.message,
+      });
+    },
+  });
+}
+
+/**
+ * Delete init script for a project
+ *
+ * @param projectPath - Path to the project
+ * @returns Mutation for deleting init script
+ */
+export function useDeleteInitScript(projectPath: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async () => {
+      const api = getElectronAPI();
+      if (!api.worktree) throw new Error('Worktree API not available');
+      const result = await api.worktree.deleteInitScript(projectPath);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to delete init script');
+      }
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.worktrees.initScript(projectPath) });
+      toast.success('Init script deleted');
+    },
+    onError: (error: Error) => {
+      toast.error('Failed to delete init script', {
+        description: error.message,
+      });
+    },
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/queries/index.ts b/temp_repo/apps/ui/src/hooks/queries/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..66733734dfa3f256ca444582e7a59115f36999bf
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/index.ts
@@ -0,0 +1,93 @@
+/**
+ * Query Hooks Barrel Export
+ *
+ * Central export point for all React Query hooks.
+ * Import from this file for cleaner imports across the app.
+ *
+ * @example
+ * ```tsx
+ * import { useFeatures, useGitHubIssues, useClaudeUsage } from '@/hooks/queries';
+ * ```
+ */
+
+// Features
+export { useFeatures, useFeature, useAgentOutput } from './use-features';
+
+// GitHub
+export {
+  useGitHubIssues,
+  useGitHubPRs,
+  useGitHubValidations,
+  useGitHubRemote,
+  useGitHubIssueComments,
+  useGitHubPRReviewComments,
+} from './use-github';
+
+// Usage
+export { useClaudeUsage, useCodexUsage, useZaiUsage, useGeminiUsage } from './use-usage';
+
+// Running Agents
+export { useRunningAgents, useRunningAgentsCount } from './use-running-agents';
+
+// Worktrees
+export {
+  useWorktrees,
+  useWorktreeInfo,
+  useWorktreeStatus,
+  useWorktreeDiffs,
+  useWorktreeBranches,
+  useWorktreeInitScript,
+  useAvailableEditors,
+} from './use-worktrees';
+
+// Settings
+export {
+  useGlobalSettings,
+  useProjectSettings,
+  useSettingsStatus,
+  useCredentials,
+  useDiscoveredAgents,
+} from './use-settings';
+
+// Models
+export {
+  useAvailableModels,
+  useCodexModels,
+  useOpencodeModels,
+  useOpencodeProviders,
+  useModelProviders,
+} from './use-models';
+
+// CLI Status
+export {
+  useClaudeCliStatus,
+  useGitHubCliStatus,
+  useApiKeysStatus,
+  usePlatformInfo,
+  useCursorCliStatus,
+  useCopilotCliStatus,
+  useGeminiCliStatus,
+  useOpencodeCliStatus,
+} from './use-cli-status';
+
+// Ideation
+export { useIdeationPrompts, useIdeas, useIdea } from './use-ideation';
+
+// Sessions
+export { useSessions, useSessionHistory, useSessionQueue } from './use-sessions';
+
+// Git
+export { useGitDiffs } from './use-git';
+
+// Pipeline
+export { usePipelineConfig } from './use-pipeline';
+
+// Spec
+export { useSpecFile, useSpecRegenerationStatus } from './use-spec';
+
+// Cursor Permissions
+export { useCursorPermissionsQuery } from './use-cursor-permissions';
+export type { CursorPermissionsData } from './use-cursor-permissions';
+
+// Workspace
+export { useWorkspaceDirectories } from './use-workspace';
diff --git a/temp_repo/apps/ui/src/hooks/queries/use-cli-status.ts b/temp_repo/apps/ui/src/hooks/queries/use-cli-status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3f7215b563995fe8f037dc32bb3d6c9b1bbc102e
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/use-cli-status.ts
@@ -0,0 +1,194 @@
+/**
+ * CLI Status Query Hooks
+ *
+ * React Query hooks for fetching CLI tool status (Claude, GitHub CLI, etc.)
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { STALE_TIMES } from '@/lib/query-client';
+
+/**
+ * Fetch Claude CLI status
+ *
+ * @returns Query result with Claude CLI status
+ */
+export function useClaudeCliStatus() {
+  return useQuery({
+    queryKey: queryKeys.cli.claude(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      if (!api.setup) {
+        throw new Error('Setup API not available');
+      }
+      const result = await api.setup.getClaudeStatus();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch Claude status');
+      }
+      return result;
+    },
+    staleTime: STALE_TIMES.CLI_STATUS,
+  });
+}
+
+/**
+ * Fetch GitHub CLI status
+ *
+ * @returns Query result with GitHub CLI status
+ */
+export function useGitHubCliStatus() {
+  return useQuery({
+    queryKey: queryKeys.cli.github(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      if (!api.setup?.getGhStatus) {
+        throw new Error('GitHub CLI status API not available');
+      }
+      const result = await api.setup.getGhStatus();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch GitHub CLI status');
+      }
+      return result;
+    },
+    staleTime: STALE_TIMES.CLI_STATUS,
+  });
+}
+
+/**
+ * Fetch API keys status
+ *
+ * @returns Query result with API keys status
+ */
+export function useApiKeysStatus() {
+  return useQuery({
+    queryKey: queryKeys.cli.apiKeys(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      if (!api.setup) {
+        throw new Error('Setup API not available');
+      }
+      const result = await api.setup.getApiKeys();
+      if (!result.success) {
+        throw new Error('Failed to fetch API keys');
+      }
+      return result;
+    },
+    staleTime: STALE_TIMES.CLI_STATUS,
+  });
+}
+
+/**
+ * Fetch platform info
+ *
+ * @returns Query result with platform info
+ */
+export function usePlatformInfo() {
+  return useQuery({
+    queryKey: queryKeys.cli.platform(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      if (!api.setup) {
+        throw new Error('Setup API not available');
+      }
+      const result = await api.setup.getPlatform();
+      if (!result.success) {
+        throw new Error('Failed to fetch platform info');
+      }
+      return result;
+    },
+    staleTime: Infinity, // Platform info never changes
+  });
+}
+
+/**
+ * Fetch Cursor CLI status
+ *
+ * @returns Query result with Cursor CLI status
+ */
+export function useCursorCliStatus() {
+  return useQuery({
+    queryKey: queryKeys.cli.cursor(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      if (!api.setup?.getCursorStatus) {
+        throw new Error('Cursor CLI status API not available');
+      }
+      const result = await api.setup.getCursorStatus();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch Cursor CLI status');
+      }
+      return result;
+    },
+    staleTime: STALE_TIMES.CLI_STATUS,
+  });
+}
+
+/**
+ * Fetch Copilot CLI status
+ *
+ * @returns Query result with Copilot CLI status
+ */
+export function useCopilotCliStatus() {
+  return useQuery({
+    queryKey: queryKeys.cli.copilot(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      if (!api.setup?.getCopilotStatus) {
+        throw new Error('Copilot CLI status API not available');
+      }
+      const result = await api.setup.getCopilotStatus();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch Copilot CLI status');
+      }
+      return result;
+    },
+    staleTime: STALE_TIMES.CLI_STATUS,
+  });
+}
+
+/**
+ * Fetch Gemini CLI status
+ *
+ * @returns Query result with Gemini CLI status
+ */
+export function useGeminiCliStatus() {
+  return useQuery({
+    queryKey: queryKeys.cli.gemini(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      if (!api.setup?.getGeminiStatus) {
+        throw new Error('Gemini CLI status API not available');
+      }
+      const result = await api.setup.getGeminiStatus();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch Gemini CLI status');
+      }
+      return result;
+    },
+    staleTime: STALE_TIMES.CLI_STATUS,
+  });
+}
+
+/**
+ * Fetch OpenCode CLI status
+ *
+ * @returns Query result with OpenCode CLI status
+ */
+export function useOpencodeCliStatus() {
+  return useQuery({
+    queryKey: queryKeys.cli.opencode(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      if (!api.setup?.getOpencodeStatus) {
+        throw new Error('OpenCode CLI status API not available');
+      }
+      const result = await api.setup.getOpencodeStatus();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch OpenCode CLI status');
+      }
+      return result;
+    },
+    staleTime: STALE_TIMES.CLI_STATUS,
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/queries/use-cursor-permissions.ts b/temp_repo/apps/ui/src/hooks/queries/use-cursor-permissions.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5d2e24f05ab0e413ecfe88549abfde77b8b9c9f4
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/use-cursor-permissions.ts
@@ -0,0 +1,58 @@
+/**
+ * Cursor Permissions Query Hooks
+ *
+ * React Query hooks for fetching Cursor CLI permissions.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { queryKeys } from '@/lib/query-keys';
+import { STALE_TIMES } from '@/lib/query-client';
+import type { CursorPermissionProfile } from '@automaker/types';
+
+export interface CursorPermissionsData {
+  activeProfile: CursorPermissionProfile | null;
+  effectivePermissions: { allow: string[]; deny: string[] } | null;
+  hasProjectConfig: boolean;
+  availableProfiles: Array<{
+    id: string;
+    name: string;
+    description: string;
+    permissions: { allow: string[]; deny: string[] };
+  }>;
+}
+
+/**
+ * Fetch Cursor permissions for a project
+ *
+ * @param projectPath - Optional path to the project
+ * @param enabled - Whether to enable the query
+ * @returns Query result with permissions data
+ *
+ * @example
+ * ```tsx
+ * const { data: permissions, isLoading, refetch } = useCursorPermissions(projectPath);
+ * ```
+ */
+export function useCursorPermissionsQuery(projectPath?: string, enabled = true) {
+  return useQuery({
+    queryKey: queryKeys.cursorPermissions.permissions(projectPath),
+    queryFn: async (): Promise<CursorPermissionsData> => {
+      const api = getHttpApiClient();
+      const result = await api.setup.getCursorPermissions(projectPath);
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to load permissions');
+      }
+
+      return {
+        activeProfile: result.activeProfile || null,
+        effectivePermissions: result.effectivePermissions || null,
+        hasProjectConfig: result.hasProjectConfig || false,
+        availableProfiles: result.availableProfiles || [],
+      };
+    },
+    enabled,
+    staleTime: STALE_TIMES.SETTINGS,
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/queries/use-features.ts b/temp_repo/apps/ui/src/hooks/queries/use-features.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5be1537e08517b08c48fd2941bfb23124b96fa94
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/use-features.ts
@@ -0,0 +1,393 @@
+/**
+ * Features Query Hooks
+ *
+ * React Query hooks for fetching and managing features data.
+ * These hooks replace manual useState/useEffect patterns with
+ * automatic caching, deduplication, and background refetching.
+ */
+
+import { useMemo, useEffect, useRef } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { STALE_TIMES } from '@/lib/query-client';
+import { createSmartPollingInterval, getGlobalEventsRecent } from '@/hooks/use-event-recency';
+import { isPipelineStatus } from '@automaker/types';
+import type { Feature } from '@/store/app-store';
+
+const FEATURES_REFETCH_ON_FOCUS = false;
+const FEATURES_REFETCH_ON_RECONNECT = false;
+const FEATURES_POLLING_INTERVAL = 30000;
+/** Default polling interval for agent output when WebSocket is inactive */
+const AGENT_OUTPUT_POLLING_INTERVAL = 5000;
+const FEATURES_CACHE_PREFIX = 'automaker:features-cache:';
+
+/**
+ * Bump this version whenever the Feature shape changes so stale localStorage
+ * entries with incompatible schemas are automatically discarded.
+ */
+const FEATURES_CACHE_VERSION = 2;
+
+/** Maximum number of per-project cache entries to keep in localStorage (LRU). */
+const MAX_FEATURES_CACHE_ENTRIES = 10;
+
+interface PersistedFeaturesCache {
+  /** Schema version — mismatched versions are treated as stale and discarded. */
+  schemaVersion: number;
+  timestamp: number;
+  features: Feature[];
+}
+
+const STATIC_FEATURE_STATUSES: ReadonlySet<string> = new Set([
+  'backlog',
+  'merge_conflict',
+  'ready',
+  'in_progress',
+  'interrupted',
+  'waiting_approval',
+  'verified',
+  'completed',
+]);
+
+function isValidFeatureStatus(value: unknown): value is Feature['status'] {
+  return (
+    typeof value === 'string' && (STATIC_FEATURE_STATUSES.has(value) || isPipelineStatus(value))
+  );
+}
+
+function sanitizePersistedFeatureEntry(value: unknown): Feature | null {
+  if (typeof value !== 'object' || value === null) {
+    return null;
+  }
+
+  const raw = value as Record<string, unknown>;
+  const id = typeof raw.id === 'string' ? raw.id.trim() : '';
+  if (!id) {
+    return null;
+  }
+
+  return {
+    ...(raw as Feature),
+    id,
+    title: typeof raw.title === 'string' ? raw.title : undefined,
+    titleGenerating: typeof raw.titleGenerating === 'boolean' ? raw.titleGenerating : undefined,
+    category: typeof raw.category === 'string' ? raw.category : '',
+    description: typeof raw.description === 'string' ? raw.description : '',
+    steps: Array.isArray(raw.steps)
+      ? raw.steps.filter((step): step is string => typeof step === 'string')
+      : [],
+    status: isValidFeatureStatus(raw.status) ? raw.status : 'backlog',
+    branchName:
+      typeof raw.branchName === 'string' && raw.branchName.trim() ? raw.branchName : undefined,
+  };
+}
+
+export function sanitizePersistedFeatures(features: unknown): Feature[] {
+  if (!Array.isArray(features)) {
+    return [];
+  }
+  const sanitized: Feature[] = [];
+  for (const feature of features) {
+    const normalized = sanitizePersistedFeatureEntry(feature);
+    if (normalized) {
+      sanitized.push(normalized);
+    }
+  }
+  return sanitized;
+}
+
+function readPersistedFeatures(projectPath: string): PersistedFeaturesCache | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = window.localStorage.getItem(`${FEATURES_CACHE_PREFIX}${projectPath}`);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw) as {
+      schemaVersion?: number;
+      timestamp?: number;
+      features?: unknown;
+    };
+    if (!parsed || typeof parsed.timestamp !== 'number') {
+      return null;
+    }
+    // Reject entries written by an older (or newer) schema version
+    if (parsed.schemaVersion !== FEATURES_CACHE_VERSION) {
+      // Remove the stale entry so it doesn't accumulate
+      window.localStorage.removeItem(`${FEATURES_CACHE_PREFIX}${projectPath}`);
+      return null;
+    }
+    const features = sanitizePersistedFeatures(parsed.features);
+
+    // If schema claims valid but nothing survived sanitization, treat as corrupt.
+    if (Array.isArray(parsed.features) && parsed.features.length > 0 && features.length === 0) {
+      window.localStorage.removeItem(`${FEATURES_CACHE_PREFIX}${projectPath}`);
+      return null;
+    }
+
+    // Migrate partial/corrupt entries in-place so later reads are clean.
+    if (Array.isArray(parsed.features) && features.length !== parsed.features.length) {
+      window.localStorage.setItem(
+        `${FEATURES_CACHE_PREFIX}${projectPath}`,
+        JSON.stringify({
+          schemaVersion: FEATURES_CACHE_VERSION,
+          timestamp: parsed.timestamp,
+          features,
+        } satisfies PersistedFeaturesCache)
+      );
+    }
+
+    return {
+      schemaVersion: FEATURES_CACHE_VERSION,
+      timestamp: parsed.timestamp,
+      features,
+    };
+  } catch {
+    return null;
+  }
+}
+
+function writePersistedFeatures(projectPath: string, features: Feature[]): void {
+  if (typeof window === 'undefined') return;
+  try {
+    const payload: PersistedFeaturesCache = {
+      schemaVersion: FEATURES_CACHE_VERSION,
+      timestamp: Date.now(),
+      features,
+    };
+    window.localStorage.setItem(`${FEATURES_CACHE_PREFIX}${projectPath}`, JSON.stringify(payload));
+  } catch {
+    // Best effort cache only.
+  }
+  // Run lightweight eviction after every write to keep localStorage bounded
+  evictStaleFeaturesCache();
+}
+
+/**
+ * Scan localStorage for feature-cache entries, sort by timestamp (LRU),
+ * and remove entries beyond MAX_FEATURES_CACHE_ENTRIES so orphaned project
+ * caches don't accumulate indefinitely.
+ */
+function evictStaleFeaturesCache(): void {
+  if (typeof window === 'undefined') return;
+  try {
+    // First pass: collect all matching keys without mutating localStorage.
+    // Iterating forward while calling removeItem() shifts indexes and can skip keys.
+    const allKeys: string[] = [];
+    for (let i = 0; i < window.localStorage.length; i++) {
+      const key = window.localStorage.key(i);
+      if (key && key.startsWith(FEATURES_CACHE_PREFIX)) {
+        allKeys.push(key);
+      }
+    }
+
+    // Second pass: classify collected keys — remove stale/corrupt, keep valid.
+    const validEntries: Array<{ key: string; timestamp: number }> = [];
+    const keysToRemove: string[] = [];
+    for (const key of allKeys) {
+      try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw) continue;
+        const parsed = JSON.parse(raw) as { timestamp?: number; schemaVersion?: number };
+        // Evict entries with wrong schema version
+        if (parsed.schemaVersion !== FEATURES_CACHE_VERSION) {
+          keysToRemove.push(key);
+          continue;
+        }
+        validEntries.push({
+          key,
+          timestamp: typeof parsed.timestamp === 'number' ? parsed.timestamp : 0,
+        });
+      } catch {
+        // Corrupt entry — mark for removal
+        keysToRemove.push(key);
+      }
+    }
+
+    // Remove stale/corrupt entries
+    for (const key of keysToRemove) {
+      window.localStorage.removeItem(key);
+    }
+
+    // Enforce max entries: sort by timestamp (newest first), remove excess oldest
+    if (validEntries.length <= MAX_FEATURES_CACHE_ENTRIES) return;
+    validEntries.sort((a, b) => b.timestamp - a.timestamp);
+    for (let i = MAX_FEATURES_CACHE_ENTRIES; i < validEntries.length; i++) {
+      window.localStorage.removeItem(validEntries[i].key);
+    }
+  } catch {
+    // Best effort — never break the app for cache housekeeping failures.
+  }
+}
+
+/**
+ * Fetch all features for a project
+ *
+ * @param projectPath - Path to the project
+ * @returns Query result with features array
+ *
+ * @example
+ * ```tsx
+ * const { data: features, isLoading, error } = useFeatures(currentProject?.path);
+ * ```
+ */
+export function useFeatures(projectPath: string | undefined) {
+  // Memoize the persisted cache read so it only runs when projectPath changes,
+  // not on every render. Both initialData and initialDataUpdatedAt reference
+  // the same memoized value to avoid a redundant second localStorage read.
+  const persisted = useMemo(
+    () => (projectPath ? readPersistedFeatures(projectPath) : null),
+    [projectPath]
+  );
+
+  const queryClient = useQueryClient();
+
+  // Subscribe to React Query cache changes for features and sync to localStorage.
+  // This ensures optimistic updates (e.g., status changes to 'verified') are
+  // persisted to localStorage immediately, not just when queryFn runs.
+  // Without this, a page refresh after an optimistic update could show stale
+  // localStorage data where features appear in the wrong column (e.g., verified
+  // features showing up in backlog).
+  const projectPathRef = useRef(projectPath);
+  projectPathRef.current = projectPath;
+  useEffect(() => {
+    if (!projectPath) return;
+    const targetQueryHash = JSON.stringify(queryKeys.features.all(projectPath));
+    const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
+      if (
+        event.type === 'updated' &&
+        event.action.type === 'success' &&
+        event.query.queryHash === targetQueryHash
+      ) {
+        const features = event.query.state.data as Feature[] | undefined;
+        if (features && projectPathRef.current) {
+          writePersistedFeatures(projectPathRef.current, features);
+        }
+      }
+    });
+    return unsubscribe;
+  }, [projectPath, queryClient]);
+
+  return useQuery({
+    queryKey: queryKeys.features.all(projectPath ?? ''),
+    queryFn: async (): Promise<Feature[]> => {
+      if (!projectPath) throw new Error('No project path');
+      const api = getElectronAPI();
+      const result = await api.features?.getAll(projectPath);
+      if (!result?.success) {
+        throw new Error(result?.error || 'Failed to fetch features');
+      }
+      const features = (result.features ?? []) as Feature[];
+      writePersistedFeatures(projectPath, features);
+      return features;
+    },
+    enabled: !!projectPath,
+    initialData: () => persisted?.features,
+    // Always treat localStorage cache as stale so React Query immediately
+    // fetches fresh data from the server on page load. This prevents stale
+    // feature statuses (e.g., 'verified' features appearing in backlog)
+    // while still showing cached data instantly for a fast initial render.
+    initialDataUpdatedAt: 0,
+    staleTime: STALE_TIMES.FEATURES,
+    refetchInterval: createSmartPollingInterval(FEATURES_POLLING_INTERVAL),
+    refetchOnWindowFocus: FEATURES_REFETCH_ON_FOCUS,
+    refetchOnReconnect: FEATURES_REFETCH_ON_RECONNECT,
+  });
+}
+
+interface UseFeatureOptions {
+  enabled?: boolean;
+  /** Override polling interval (ms). Use false to disable polling. */
+  pollingInterval?: number | false;
+}
+
+/**
+ * Fetch a single feature by ID
+ *
+ * @param projectPath - Path to the project
+ * @param featureId - ID of the feature to fetch
+ * @param options - Query options including enabled and polling interval
+ * @returns Query result with single feature
+ */
+export function useFeature(
+  projectPath: string | undefined,
+  featureId: string | undefined,
+  options: UseFeatureOptions = {}
+) {
+  const { enabled = true, pollingInterval } = options;
+
+  return useQuery({
+    queryKey: queryKeys.features.single(projectPath ?? '', featureId ?? ''),
+    queryFn: async (): Promise<Feature | null> => {
+      if (!projectPath || !featureId) throw new Error('Missing project path or feature ID');
+      const api = getElectronAPI();
+      const result = await api.features?.get(projectPath, featureId);
+      if (!result?.success) {
+        throw new Error(result?.error || 'Failed to fetch feature');
+      }
+      return (result.feature as Feature) ?? null;
+    },
+    enabled: !!projectPath && !!featureId && enabled,
+    staleTime: STALE_TIMES.FEATURES,
+    // When a polling interval is specified, disable it if WebSocket events are recent
+    refetchInterval:
+      pollingInterval === false || pollingInterval === undefined
+        ? pollingInterval
+        : () => (getGlobalEventsRecent() ? false : pollingInterval),
+    refetchOnWindowFocus: FEATURES_REFETCH_ON_FOCUS,
+    refetchOnReconnect: FEATURES_REFETCH_ON_RECONNECT,
+  });
+}
+
+interface UseAgentOutputOptions {
+  enabled?: boolean;
+  /** Override polling interval (ms). Use false to disable polling. */
+  pollingInterval?: number | false;
+}
+
+/**
+ * Fetch agent output for a feature
+ *
+ * @param projectPath - Path to the project
+ * @param featureId - ID of the feature
+ * @param options - Query options including enabled and polling interval
+ * @returns Query result with agent output string
+ */
+export function useAgentOutput(
+  projectPath: string | undefined,
+  featureId: string | undefined,
+  options: UseAgentOutputOptions = {}
+) {
+  const { enabled = true, pollingInterval } = options;
+
+  return useQuery({
+    queryKey: queryKeys.features.agentOutput(projectPath ?? '', featureId ?? ''),
+    queryFn: async (): Promise<string> => {
+      if (!projectPath || !featureId) throw new Error('Missing project path or feature ID');
+      const api = getElectronAPI();
+      const result = await api.features?.getAgentOutput(projectPath, featureId);
+      if (!result?.success) {
+        throw new Error(result?.error || 'Failed to fetch agent output');
+      }
+      return result.content ?? '';
+    },
+    enabled: !!projectPath && !!featureId && enabled,
+    staleTime: STALE_TIMES.AGENT_OUTPUT,
+    // Use provided polling interval or default smart behavior
+    refetchInterval:
+      pollingInterval !== undefined
+        ? pollingInterval
+        : (query) => {
+            // Disable polling when WebSocket events are recent (within 5s)
+            // WebSocket invalidation handles updates in real-time
+            if (getGlobalEventsRecent()) {
+              return false;
+            }
+            // Only poll if we have data and it's not empty (indicating active task)
+            if (query.state.data && query.state.data.length > 0) {
+              return AGENT_OUTPUT_POLLING_INTERVAL;
+            }
+            return false;
+          },
+    refetchOnWindowFocus: FEATURES_REFETCH_ON_FOCUS,
+    refetchOnReconnect: FEATURES_REFETCH_ON_RECONNECT,
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/queries/use-git.ts b/temp_repo/apps/ui/src/hooks/queries/use-git.ts
new file mode 100644
index 0000000000000000000000000000000000000000..666eeab6f8d85156b1f25f3b1995a06ccd0860e4
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/use-git.ts
@@ -0,0 +1,41 @@
+/**
+ * Git Query Hooks
+ *
+ * React Query hooks for git operations.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { STALE_TIMES } from '@/lib/query-client';
+
+/**
+ * Fetch git diffs for a project (main project, not worktree)
+ *
+ * @param projectPath - Path to the project
+ * @param enabled - Whether to enable the query
+ * @returns Query result with files and diff content
+ */
+export function useGitDiffs(projectPath: string | undefined, enabled = true) {
+  return useQuery({
+    queryKey: queryKeys.git.diffs(projectPath ?? ''),
+    queryFn: async () => {
+      if (!projectPath) throw new Error('No project path');
+      const api = getElectronAPI();
+      if (!api.git) {
+        throw new Error('Git API not available');
+      }
+      const result = await api.git.getDiffs(projectPath);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch diffs');
+      }
+      return {
+        files: result.files ?? [],
+        diff: result.diff ?? '',
+        ...(result.mergeState ? { mergeState: result.mergeState } : {}),
+      };
+    },
+    enabled: !!projectPath && enabled,
+    staleTime: STALE_TIMES.WORKTREES,
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/queries/use-github.ts b/temp_repo/apps/ui/src/hooks/queries/use-github.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d11c95b44638958428b4c3c5260bf497dbd087ea
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/use-github.ts
@@ -0,0 +1,247 @@
+/**
+ * GitHub Query Hooks
+ *
+ * React Query hooks for fetching GitHub issues, PRs, and validations.
+ */
+
+import { useQuery, useInfiniteQuery } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { STALE_TIMES } from '@/lib/query-client';
+import type {
+  GitHubIssue,
+  GitHubPR,
+  GitHubComment,
+  PRReviewComment,
+  StoredValidation,
+} from '@/lib/electron';
+
+interface GitHubIssuesResult {
+  openIssues: GitHubIssue[];
+  closedIssues: GitHubIssue[];
+}
+
+interface GitHubPRsResult {
+  openPRs: GitHubPR[];
+  mergedPRs: GitHubPR[];
+}
+
+/**
+ * Fetch GitHub issues for a project
+ *
+ * @param projectPath - Path to the project
+ * @returns Query result with open and closed issues
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading } = useGitHubIssues(currentProject?.path);
+ * const { openIssues, closedIssues } = data ?? { openIssues: [], closedIssues: [] };
+ * ```
+ */
+export function useGitHubIssues(projectPath: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.github.issues(projectPath ?? ''),
+    queryFn: async (): Promise<GitHubIssuesResult> => {
+      if (!projectPath) throw new Error('No project path');
+      const api = getElectronAPI();
+      if (!api.github) {
+        throw new Error('GitHub API not available');
+      }
+      const result = await api.github.listIssues(projectPath);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch issues');
+      }
+      return {
+        openIssues: result.openIssues ?? [],
+        closedIssues: result.closedIssues ?? [],
+      };
+    },
+    enabled: !!projectPath,
+    staleTime: STALE_TIMES.GITHUB,
+  });
+}
+
+/**
+ * Fetch GitHub PRs for a project
+ *
+ * @param projectPath - Path to the project
+ * @returns Query result with open and merged PRs
+ */
+export function useGitHubPRs(projectPath: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.github.prs(projectPath ?? ''),
+    queryFn: async (): Promise<GitHubPRsResult> => {
+      if (!projectPath) throw new Error('No project path');
+      const api = getElectronAPI();
+      if (!api.github) {
+        throw new Error('GitHub API not available');
+      }
+      const result = await api.github.listPRs(projectPath);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch PRs');
+      }
+      return {
+        openPRs: result.openPRs ?? [],
+        mergedPRs: result.mergedPRs ?? [],
+      };
+    },
+    enabled: !!projectPath,
+    staleTime: STALE_TIMES.GITHUB,
+  });
+}
+
+/**
+ * Fetch GitHub validations for a project
+ *
+ * @param projectPath - Path to the project
+ * @param issueNumber - Optional issue number to filter by
+ * @returns Query result with validations
+ */
+export function useGitHubValidations(projectPath: string | undefined, issueNumber?: number) {
+  return useQuery({
+    queryKey: issueNumber
+      ? queryKeys.github.validation(projectPath ?? '', issueNumber)
+      : queryKeys.github.validations(projectPath ?? ''),
+    queryFn: async (): Promise<StoredValidation[]> => {
+      if (!projectPath) throw new Error('No project path');
+      const api = getElectronAPI();
+      if (!api.github) {
+        throw new Error('GitHub API not available');
+      }
+      const result = await api.github.getValidations(projectPath, issueNumber);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch validations');
+      }
+      return result.validations ?? [];
+    },
+    enabled: !!projectPath,
+    staleTime: STALE_TIMES.GITHUB,
+  });
+}
+
+/**
+ * Check GitHub remote for a project
+ *
+ * @param projectPath - Path to the project
+ * @returns Query result with remote info
+ */
+export function useGitHubRemote(projectPath: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.github.remote(projectPath ?? ''),
+    queryFn: async () => {
+      if (!projectPath) throw new Error('No project path');
+      const api = getElectronAPI();
+      if (!api.github) {
+        throw new Error('GitHub API not available');
+      }
+      const result = await api.github.checkRemote(projectPath);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to check remote');
+      }
+      return {
+        hasRemote: result.hasGitHubRemote ?? false,
+        owner: result.owner,
+        repo: result.repo,
+        url: result.remoteUrl,
+      };
+    },
+    enabled: !!projectPath,
+    staleTime: STALE_TIMES.GITHUB,
+  });
+}
+
+/**
+ * Fetch comments for a GitHub issue with pagination support
+ *
+ * Uses useInfiniteQuery for proper "load more" pagination.
+ *
+ * @param projectPath - Path to the project
+ * @param issueNumber - Issue number
+ * @returns Infinite query result with comments and pagination helpers
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   data,
+ *   isLoading,
+ *   isFetchingNextPage,
+ *   hasNextPage,
+ *   fetchNextPage,
+ *   refetch,
+ * } = useGitHubIssueComments(projectPath, issueNumber);
+ *
+ * // Get all comments flattened
+ * const comments = data?.pages.flatMap(page => page.comments) ?? [];
+ * ```
+ */
+export function useGitHubIssueComments(
+  projectPath: string | undefined,
+  issueNumber: number | undefined
+) {
+  return useInfiniteQuery({
+    queryKey: queryKeys.github.issueComments(projectPath ?? '', issueNumber ?? 0),
+    queryFn: async ({ pageParam }: { pageParam: string | undefined }) => {
+      if (!projectPath || !issueNumber) throw new Error('Missing project path or issue number');
+      const api = getElectronAPI();
+      if (!api.github) {
+        throw new Error('GitHub API not available');
+      }
+      const result = await api.github.getIssueComments(projectPath, issueNumber, pageParam);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch comments');
+      }
+      return {
+        comments: (result.comments ?? []) as GitHubComment[],
+        totalCount: result.totalCount ?? 0,
+        hasNextPage: result.hasNextPage ?? false,
+        endCursor: result.endCursor as string | undefined,
+      };
+    },
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) => (lastPage.hasNextPage ? lastPage.endCursor : undefined),
+    enabled: !!projectPath && !!issueNumber,
+    staleTime: STALE_TIMES.GITHUB,
+  });
+}
+
+/**
+ * Fetch review comments for a GitHub PR
+ *
+ * Fetches both regular PR comments and inline code review comments
+ * with file path and line context for each.
+ *
+ * @param projectPath - Path to the project
+ * @param prNumber - PR number
+ * @returns Query result with review comments
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading } = useGitHubPRReviewComments(projectPath, prNumber);
+ * const comments = data?.comments ?? [];
+ * ```
+ */
+export function useGitHubPRReviewComments(
+  projectPath: string | undefined,
+  prNumber: number | undefined
+) {
+  return useQuery({
+    queryKey: queryKeys.github.prReviewComments(projectPath ?? '', prNumber ?? 0),
+    queryFn: async (): Promise<{ comments: PRReviewComment[]; totalCount: number }> => {
+      if (!projectPath || !prNumber) throw new Error('Missing project path or PR number');
+      const api = getElectronAPI();
+      if (!api.github) {
+        throw new Error('GitHub API not available');
+      }
+      const result = await api.github.getPRReviewComments(projectPath, prNumber);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch PR review comments');
+      }
+      return {
+        comments: (result.comments ?? []) as PRReviewComment[],
+        totalCount: result.totalCount ?? 0,
+      };
+    },
+    enabled: !!projectPath && !!prNumber,
+    staleTime: STALE_TIMES.GITHUB,
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/queries/use-ideation.ts b/temp_repo/apps/ui/src/hooks/queries/use-ideation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aa2bd023082288fb040a56ffb057f442cdaafcbb
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/use-ideation.ts
@@ -0,0 +1,86 @@
+/**
+ * Ideation Query Hooks
+ *
+ * React Query hooks for fetching ideation prompts and ideas.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { STALE_TIMES } from '@/lib/query-client';
+
+/**
+ * Fetch ideation prompts
+ *
+ * @returns Query result with prompts and categories
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading, error } = useIdeationPrompts();
+ * const { prompts, categories } = data ?? { prompts: [], categories: [] };
+ * ```
+ */
+export function useIdeationPrompts() {
+  return useQuery({
+    queryKey: queryKeys.ideation.prompts(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      const result = await api.ideation?.getPrompts();
+      if (!result?.success) {
+        throw new Error(result?.error || 'Failed to fetch prompts');
+      }
+      return {
+        prompts: result.prompts ?? [],
+        categories: result.categories ?? [],
+      };
+    },
+    staleTime: STALE_TIMES.SETTINGS, // Prompts rarely change
+  });
+}
+
+/**
+ * Fetch ideas for a project
+ *
+ * @param projectPath - Path to the project
+ * @returns Query result with ideas array
+ */
+export function useIdeas(projectPath: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.ideation.ideas(projectPath ?? ''),
+    queryFn: async () => {
+      if (!projectPath) throw new Error('No project path');
+      const api = getElectronAPI();
+      const result = await api.ideation?.listIdeas(projectPath);
+      if (!result?.success) {
+        throw new Error(result?.error || 'Failed to fetch ideas');
+      }
+      return result.ideas ?? [];
+    },
+    enabled: !!projectPath,
+    staleTime: STALE_TIMES.FEATURES,
+  });
+}
+
+/**
+ * Fetch a single idea by ID
+ *
+ * @param projectPath - Path to the project
+ * @param ideaId - ID of the idea
+ * @returns Query result with single idea
+ */
+export function useIdea(projectPath: string | undefined, ideaId: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.ideation.idea(projectPath ?? '', ideaId ?? ''),
+    queryFn: async () => {
+      if (!projectPath || !ideaId) throw new Error('Missing project path or idea ID');
+      const api = getElectronAPI();
+      const result = await api.ideation?.getIdea(projectPath, ideaId);
+      if (!result?.success) {
+        throw new Error(result?.error || 'Failed to fetch idea');
+      }
+      return result.idea;
+    },
+    enabled: !!projectPath && !!ideaId,
+    staleTime: STALE_TIMES.FEATURES,
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/queries/use-models.ts b/temp_repo/apps/ui/src/hooks/queries/use-models.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3e593cda983c8e7c2233eed3e280e347e6be8e99
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/use-models.ts
@@ -0,0 +1,138 @@
+/**
+ * Models Query Hooks
+ *
+ * React Query hooks for fetching available AI models.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { STALE_TIMES } from '@/lib/query-client';
+import type { ModelDefinition } from '@automaker/types';
+
+interface CodexModel {
+  id: string;
+  label: string;
+  description: string;
+  hasThinking: boolean;
+  supportsVision: boolean;
+  tier: 'premium' | 'standard' | 'basic';
+  isDefault: boolean;
+}
+
+/**
+ * Fetch available models
+ *
+ * @returns Query result with available models
+ */
+export function useAvailableModels() {
+  return useQuery({
+    queryKey: queryKeys.models.available(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      if (!api.model) {
+        throw new Error('Model API not available');
+      }
+      const result = await api.model.getAvailable();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch available models');
+      }
+      return result.models ?? [];
+    },
+    staleTime: STALE_TIMES.MODELS,
+  });
+}
+
+/**
+ * Fetch Codex models
+ *
+ * @param refresh - Force refresh from server
+ * @returns Query result with Codex models
+ */
+export function useCodexModels(refresh = false) {
+  return useQuery({
+    queryKey: queryKeys.models.codex(),
+    queryFn: async (): Promise<CodexModel[]> => {
+      const api = getElectronAPI();
+      if (!api.codex) {
+        throw new Error('Codex API not available');
+      }
+      const result = await api.codex.getModels(refresh);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch Codex models');
+      }
+      return (result.models ?? []) as CodexModel[];
+    },
+    staleTime: STALE_TIMES.MODELS,
+  });
+}
+
+/**
+ * Fetch OpenCode models
+ *
+ * @param refresh - Force refresh from server
+ * @returns Query result with OpenCode models
+ */
+export function useOpencodeModels(refresh = false) {
+  return useQuery({
+    queryKey: queryKeys.models.opencode(),
+    queryFn: async (): Promise<ModelDefinition[]> => {
+      const api = getElectronAPI();
+      if (!api.setup?.getOpencodeModels) {
+        throw new Error('OpenCode models API not available');
+      }
+      const result = await api.setup.getOpencodeModels(refresh);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch OpenCode models');
+      }
+      return (result.models ?? []) as ModelDefinition[];
+    },
+    staleTime: STALE_TIMES.MODELS,
+  });
+}
+
+/**
+ * Fetch OpenCode providers
+ *
+ * @returns Query result with OpenCode providers
+ */
+export function useOpencodeProviders() {
+  return useQuery({
+    queryKey: queryKeys.models.opencodeProviders(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      if (!api.setup?.getOpencodeProviders) {
+        throw new Error('OpenCode providers API not available');
+      }
+      const result = await api.setup.getOpencodeProviders();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch OpenCode providers');
+      }
+      return result.providers ?? [];
+    },
+    staleTime: STALE_TIMES.MODELS,
+  });
+}
+
+/**
+ * Fetch model providers status
+ *
+ * @returns Query result with provider status
+ */
+export function useModelProviders() {
+  return useQuery({
+    queryKey: queryKeys.models.providers(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      if (!api.model) {
+        throw new Error('Model API not available');
+      }
+      const result = await api.model.checkProviders();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch providers');
+      }
+      return result.providers ?? {};
+    },
+    staleTime: STALE_TIMES.MODELS,
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/queries/use-pipeline.ts b/temp_repo/apps/ui/src/hooks/queries/use-pipeline.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0348dd3712bfaac5fc93c0b11854c160b331cdc9
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/use-pipeline.ts
@@ -0,0 +1,39 @@
+/**
+ * Pipeline Query Hooks
+ *
+ * React Query hooks for fetching pipeline configuration.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { queryKeys } from '@/lib/query-keys';
+import { STALE_TIMES } from '@/lib/query-client';
+import type { PipelineConfig } from '@automaker/types';
+
+/**
+ * Fetch pipeline config for a project
+ *
+ * @param projectPath - Path to the project
+ * @returns Query result with pipeline config
+ *
+ * @example
+ * ```tsx
+ * const { data: pipelineConfig, isLoading } = usePipelineConfig(currentProject?.path);
+ * ```
+ */
+export function usePipelineConfig(projectPath: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.pipeline.config(projectPath ?? ''),
+    queryFn: async (): Promise<PipelineConfig | null> => {
+      if (!projectPath) throw new Error('No project path');
+      const api = getHttpApiClient();
+      const result = await api.pipeline.getConfig(projectPath);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch pipeline config');
+      }
+      return result.config ?? null;
+    },
+    enabled: !!projectPath,
+    staleTime: STALE_TIMES.SETTINGS,
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/queries/use-running-agents.ts b/temp_repo/apps/ui/src/hooks/queries/use-running-agents.ts
new file mode 100644
index 0000000000000000000000000000000000000000..81cbfedeb59b47935e17c0970e4e4bb57cae29a3
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/use-running-agents.ts
@@ -0,0 +1,70 @@
+/**
+ * Running Agents Query Hook
+ *
+ * React Query hook for fetching currently running agents.
+ * This data is invalidated by WebSocket events when agents start/stop.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { getElectronAPI, type RunningAgent } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { STALE_TIMES } from '@/lib/query-client';
+import { createSmartPollingInterval } from '@/hooks/use-event-recency';
+
+const RUNNING_AGENTS_REFETCH_ON_FOCUS = false;
+const RUNNING_AGENTS_REFETCH_ON_RECONNECT = false;
+const RUNNING_AGENTS_POLLING_INTERVAL = 30000;
+
+interface RunningAgentsResult {
+  agents: RunningAgent[];
+  count: number;
+}
+
+/**
+ * Fetch all currently running agents
+ *
+ * @returns Query result with running agents and total count
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading } = useRunningAgents();
+ * const { agents, count } = data ?? { agents: [], count: 0 };
+ * ```
+ */
+export function useRunningAgents() {
+  return useQuery({
+    queryKey: queryKeys.runningAgents.all(),
+    queryFn: async (): Promise<RunningAgentsResult> => {
+      const api = getElectronAPI();
+      if (!api.runningAgents) {
+        throw new Error('Running agents API not available');
+      }
+      const result = await api.runningAgents.getAll();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch running agents');
+      }
+      return {
+        agents: result.runningAgents ?? [],
+        count: result.totalCount ?? 0,
+      };
+    },
+    staleTime: STALE_TIMES.RUNNING_AGENTS,
+    refetchInterval: createSmartPollingInterval(RUNNING_AGENTS_POLLING_INTERVAL),
+    refetchOnWindowFocus: RUNNING_AGENTS_REFETCH_ON_FOCUS,
+    refetchOnReconnect: RUNNING_AGENTS_REFETCH_ON_RECONNECT,
+  });
+}
+
+/**
+ * Get running agents count
+ * This is a selector that derives count from the main query
+ *
+ * @returns Query result with just the count
+ */
+export function useRunningAgentsCount() {
+  const query = useRunningAgents();
+  return {
+    ...query,
+    data: query.data?.count ?? 0,
+  };
+}
diff --git a/temp_repo/apps/ui/src/hooks/queries/use-sessions.ts b/temp_repo/apps/ui/src/hooks/queries/use-sessions.ts
new file mode 100644
index 0000000000000000000000000000000000000000..78738d3b45b3a31ab10d171f98d187cd527b887b
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/use-sessions.ts
@@ -0,0 +1,95 @@
+/**
+ * Sessions Query Hooks
+ *
+ * React Query hooks for fetching session data.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { STALE_TIMES } from '@/lib/query-client';
+import type { SessionListItem } from '@/types/electron';
+
+/**
+ * Fetch all sessions
+ *
+ * @param includeArchived - Whether to include archived sessions
+ * @returns Query result with sessions array
+ *
+ * @example
+ * ```tsx
+ * const { data: sessions, isLoading } = useSessions(false);
+ * ```
+ */
+export function useSessions(includeArchived = false) {
+  return useQuery({
+    queryKey: queryKeys.sessions.all(includeArchived),
+    queryFn: async (): Promise<SessionListItem[]> => {
+      const api = getElectronAPI();
+      if (!api.sessions) {
+        throw new Error('Sessions API not available');
+      }
+      const result = await api.sessions.list(includeArchived);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch sessions');
+      }
+      return result.sessions ?? [];
+    },
+    staleTime: STALE_TIMES.SESSIONS,
+  });
+}
+
+/**
+ * Fetch session history
+ *
+ * @param sessionId - ID of the session
+ * @returns Query result with session messages
+ */
+export function useSessionHistory(sessionId: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.sessions.history(sessionId ?? ''),
+    queryFn: async () => {
+      if (!sessionId) throw new Error('No session ID');
+      const api = getElectronAPI();
+      if (!api.agent) {
+        throw new Error('Agent API not available');
+      }
+      const result = await api.agent.getHistory(sessionId);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch session history');
+      }
+      return {
+        messages: result.messages ?? [],
+        isRunning: result.isRunning ?? false,
+      };
+    },
+    enabled: !!sessionId,
+    staleTime: STALE_TIMES.FEATURES, // Session history changes during conversations
+  });
+}
+
+/**
+ * Fetch session message queue
+ *
+ * @param sessionId - ID of the session
+ * @returns Query result with queued messages
+ */
+export function useSessionQueue(sessionId: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.sessions.queue(sessionId ?? ''),
+    queryFn: async () => {
+      if (!sessionId) throw new Error('No session ID');
+      const api = getElectronAPI();
+      if (!api.agent) {
+        throw new Error('Agent API not available');
+      }
+      const result = await api.agent.queueList(sessionId);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch queue');
+      }
+      return result.queue ?? [];
+    },
+    enabled: !!sessionId,
+    staleTime: STALE_TIMES.RUNNING_AGENTS, // Queue changes frequently during use
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/queries/use-settings.ts b/temp_repo/apps/ui/src/hooks/queries/use-settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b043754441da57b2f059e37ace913acaed9d1f66
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/use-settings.ts
@@ -0,0 +1,138 @@
+/**
+ * Settings Query Hooks
+ *
+ * React Query hooks for fetching global and project settings.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { STALE_TIMES } from '@/lib/query-client';
+import type { GlobalSettings, ProjectSettings } from '@automaker/types';
+
+/**
+ * Fetch global settings
+ *
+ * @returns Query result with global settings
+ *
+ * @example
+ * ```tsx
+ * const { data: settings, isLoading } = useGlobalSettings();
+ * ```
+ */
+export function useGlobalSettings() {
+  return useQuery({
+    queryKey: queryKeys.settings.global(),
+    queryFn: async (): Promise<GlobalSettings> => {
+      const api = getElectronAPI();
+      if (!api.settings) {
+        throw new Error('Settings API not available');
+      }
+      const result = await api.settings.getGlobal();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch global settings');
+      }
+      return result.settings as unknown as GlobalSettings;
+    },
+    staleTime: STALE_TIMES.SETTINGS,
+  });
+}
+
+/**
+ * Fetch project-specific settings
+ *
+ * @param projectPath - Path to the project
+ * @returns Query result with project settings
+ */
+export function useProjectSettings(projectPath: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.settings.project(projectPath ?? ''),
+    queryFn: async (): Promise<ProjectSettings> => {
+      if (!projectPath) throw new Error('No project path');
+      const api = getElectronAPI();
+      if (!api.settings) {
+        throw new Error('Settings API not available');
+      }
+      const result = await api.settings.getProject(projectPath);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch project settings');
+      }
+      return result.settings as unknown as ProjectSettings;
+    },
+    enabled: !!projectPath,
+    staleTime: STALE_TIMES.SETTINGS,
+  });
+}
+
+/**
+ * Fetch settings status (migration status, etc.)
+ *
+ * @returns Query result with settings status
+ */
+export function useSettingsStatus() {
+  return useQuery({
+    queryKey: queryKeys.settings.status(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      if (!api.settings) {
+        throw new Error('Settings API not available');
+      }
+      const result = await api.settings.getStatus();
+      return result;
+    },
+    staleTime: STALE_TIMES.SETTINGS,
+  });
+}
+
+/**
+ * Fetch credentials status (masked API keys)
+ *
+ * @returns Query result with credentials info
+ */
+export function useCredentials() {
+  return useQuery({
+    queryKey: queryKeys.settings.credentials(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      if (!api.settings) {
+        throw new Error('Settings API not available');
+      }
+      const result = await api.settings.getCredentials();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch credentials');
+      }
+      return result.credentials;
+    },
+    staleTime: STALE_TIMES.SETTINGS,
+  });
+}
+
+/**
+ * Discover agents for a project
+ *
+ * @param projectPath - Path to the project
+ * @param sources - Sources to search ('user' | 'project')
+ * @returns Query result with discovered agents
+ */
+export function useDiscoveredAgents(
+  projectPath: string | undefined,
+  sources?: Array<'user' | 'project'>
+) {
+  return useQuery({
+    // Include sources in query key so different source combinations have separate caches
+    queryKey: queryKeys.settings.agents(projectPath ?? '', sources),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      if (!api.settings) {
+        throw new Error('Settings API not available');
+      }
+      const result = await api.settings.discoverAgents(projectPath, sources);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to discover agents');
+      }
+      return result.agents ?? [];
+    },
+    enabled: !!projectPath,
+    staleTime: STALE_TIMES.SETTINGS,
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/queries/use-spec.ts b/temp_repo/apps/ui/src/hooks/queries/use-spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d2cce124c76f0804a5aace8a7d4491d8d16e867d
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/use-spec.ts
@@ -0,0 +1,106 @@
+/**
+ * Spec Query Hooks
+ *
+ * React Query hooks for fetching spec file content and regeneration status.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { STALE_TIMES } from '@/lib/query-client';
+import { getGlobalEventsRecent } from '@/hooks/use-event-recency';
+
+interface SpecFileResult {
+  content: string;
+  exists: boolean;
+}
+
+interface SpecRegenerationStatusResult {
+  isRunning: boolean;
+  currentPhase?: string;
+}
+
+/**
+ * Fetch spec file content for a project
+ *
+ * @param projectPath - Path to the project
+ * @returns Query result with spec content and existence flag
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading } = useSpecFile(currentProject?.path);
+ * if (data?.exists) {
+ *   console.log(data.content);
+ * }
+ * ```
+ */
+export function useSpecFile(projectPath: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.spec.file(projectPath ?? ''),
+    queryFn: async (): Promise<SpecFileResult> => {
+      if (!projectPath) throw new Error('No project path');
+
+      const api = getElectronAPI();
+      const result = await api.readFile(`${projectPath}/.automaker/app_spec.txt`);
+
+      if (result.success && result.content) {
+        return {
+          content: result.content,
+          exists: true,
+        };
+      }
+
+      return {
+        content: '',
+        exists: false,
+      };
+    },
+    enabled: !!projectPath,
+    staleTime: STALE_TIMES.SETTINGS,
+  });
+}
+
+/**
+ * Check spec regeneration status for a project
+ *
+ * @param projectPath - Path to the project
+ * @param enabled - Whether to enable the query (useful during regeneration)
+ * @returns Query result with regeneration status
+ *
+ * @example
+ * ```tsx
+ * const { data } = useSpecRegenerationStatus(projectPath, isRegenerating);
+ * if (data?.isRunning) {
+ *   // Show loading indicator
+ * }
+ * ```
+ */
+export function useSpecRegenerationStatus(projectPath: string | undefined, enabled = true) {
+  return useQuery({
+    queryKey: queryKeys.specRegeneration.status(projectPath ?? ''),
+    queryFn: async (): Promise<SpecRegenerationStatusResult> => {
+      if (!projectPath) throw new Error('No project path');
+
+      const api = getElectronAPI();
+      if (!api.specRegeneration) {
+        return { isRunning: false };
+      }
+
+      const status = await api.specRegeneration.status(projectPath);
+
+      if (status.success) {
+        return {
+          isRunning: status.isRunning ?? false,
+          currentPhase: status.currentPhase,
+        };
+      }
+
+      return { isRunning: false };
+    },
+    enabled: !!projectPath && enabled,
+    staleTime: 5000, // Check every 5 seconds when active
+    // Disable polling when WebSocket events are recent (within 5s)
+    // WebSocket invalidation handles updates in real-time
+    refetchInterval: enabled ? () => (getGlobalEventsRecent() ? false : 5000) : false,
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/queries/use-usage.ts b/temp_repo/apps/ui/src/hooks/queries/use-usage.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42d3946ea1caab9d02a5c50fe5c1c93b4c59971d
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/use-usage.ts
@@ -0,0 +1,161 @@
+/**
+ * Usage Query Hooks
+ *
+ * React Query hooks for fetching Claude, Codex, z.ai, and Gemini API usage data.
+ * These hooks include automatic polling for real-time usage updates.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { STALE_TIMES } from '@/lib/query-client';
+import type { ClaudeUsage, CodexUsage, ZaiUsage, GeminiUsage } from '@/store/app-store';
+
+/** Polling interval for usage data (60 seconds) */
+const USAGE_POLLING_INTERVAL = 60 * 1000;
+const USAGE_REFETCH_ON_FOCUS = false;
+const USAGE_REFETCH_ON_RECONNECT = false;
+
+/**
+ * Fetch Claude API usage data
+ *
+ * @param enabled - Whether the query should run (default: true)
+ * @returns Query result with Claude usage data
+ *
+ * @example
+ * ```tsx
+ * const { data: usage, isLoading } = useClaudeUsage(isPopoverOpen);
+ * ```
+ */
+export function useClaudeUsage(enabled = true) {
+  return useQuery({
+    queryKey: queryKeys.usage.claude(),
+    queryFn: async (): Promise<ClaudeUsage> => {
+      const api = getElectronAPI();
+      if (!api.claude) {
+        throw new Error('Claude API bridge unavailable');
+      }
+      const result = await api.claude.getUsage();
+      // Check if result is an error response
+      if ('error' in result) {
+        throw new Error(result.message || result.error);
+      }
+      return result;
+    },
+    enabled,
+    staleTime: STALE_TIMES.USAGE,
+    refetchInterval: enabled ? USAGE_POLLING_INTERVAL : false,
+    // Keep previous data while refetching
+    placeholderData: (previousData) => previousData,
+    refetchOnWindowFocus: USAGE_REFETCH_ON_FOCUS,
+    refetchOnReconnect: USAGE_REFETCH_ON_RECONNECT,
+  });
+}
+
+/**
+ * Fetch Codex API usage data
+ *
+ * @param enabled - Whether the query should run (default: true)
+ * @returns Query result with Codex usage data
+ *
+ * @example
+ * ```tsx
+ * const { data: usage, isLoading } = useCodexUsage(isPopoverOpen);
+ * ```
+ */
+export function useCodexUsage(enabled = true) {
+  return useQuery({
+    queryKey: queryKeys.usage.codex(),
+    queryFn: async (): Promise<CodexUsage> => {
+      const api = getElectronAPI();
+      if (!api.codex) {
+        throw new Error('Codex API bridge unavailable');
+      }
+      const result = await api.codex.getUsage();
+      // Check if result is an error response
+      if ('error' in result) {
+        throw new Error(result.message || result.error);
+      }
+      return result;
+    },
+    enabled,
+    staleTime: STALE_TIMES.USAGE,
+    refetchInterval: enabled ? USAGE_POLLING_INTERVAL : false,
+    // Keep previous data while refetching
+    placeholderData: (previousData) => previousData,
+    refetchOnWindowFocus: USAGE_REFETCH_ON_FOCUS,
+    refetchOnReconnect: USAGE_REFETCH_ON_RECONNECT,
+  });
+}
+
+/**
+ * Fetch z.ai API usage data
+ *
+ * @param enabled - Whether the query should run (default: true)
+ * @returns Query result with z.ai usage data
+ *
+ * @example
+ * ```tsx
+ * const { data: usage, isLoading } = useZaiUsage(isPopoverOpen);
+ * ```
+ */
+export function useZaiUsage(enabled = true) {
+  return useQuery({
+    queryKey: queryKeys.usage.zai(),
+    queryFn: async (): Promise<ZaiUsage> => {
+      const api = getElectronAPI();
+      if (!api.zai) {
+        throw new Error('z.ai API bridge unavailable');
+      }
+      const result = await api.zai.getUsage();
+      // Check if result is an error response
+      if ('error' in result) {
+        throw new Error(result.message || result.error);
+      }
+      return result;
+    },
+    enabled,
+    staleTime: STALE_TIMES.USAGE,
+    refetchInterval: enabled ? USAGE_POLLING_INTERVAL : false,
+    // Keep previous data while refetching
+    placeholderData: (previousData) => previousData,
+    refetchOnWindowFocus: USAGE_REFETCH_ON_FOCUS,
+    refetchOnReconnect: USAGE_REFETCH_ON_RECONNECT,
+  });
+}
+
+/**
+ * Fetch Gemini API usage/status data
+ *
+ * @param enabled - Whether the query should run (default: true)
+ * @returns Query result with Gemini usage data
+ *
+ * @example
+ * ```tsx
+ * const { data: usage, isLoading } = useGeminiUsage(isPopoverOpen);
+ * ```
+ */
+export function useGeminiUsage(enabled = true) {
+  return useQuery({
+    queryKey: queryKeys.usage.gemini(),
+    queryFn: async (): Promise<GeminiUsage> => {
+      const api = getElectronAPI();
+      if (!api.gemini) {
+        throw new Error('Gemini API bridge unavailable');
+      }
+      const result = await api.gemini.getUsage();
+      // Check if result is an error-only response (no 'authenticated' field means it's the error variant)
+      if (!('authenticated' in result) && 'error' in result) {
+        throw new Error(result.message || result.error);
+      }
+      return result as GeminiUsage;
+    },
+    enabled,
+    staleTime: STALE_TIMES.USAGE,
+    refetchInterval: enabled ? USAGE_POLLING_INTERVAL : false,
+    // Keep previous data while refetching
+    placeholderData: (previousData) => previousData,
+    refetchOnWindowFocus: USAGE_REFETCH_ON_FOCUS,
+    refetchOnReconnect: USAGE_REFETCH_ON_RECONNECT,
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/queries/use-workspace.ts b/temp_repo/apps/ui/src/hooks/queries/use-workspace.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2001e2b7348799da1fa7de76bb793daa7dd0fd3c
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/use-workspace.ts
@@ -0,0 +1,42 @@
+/**
+ * Workspace Query Hooks
+ *
+ * React Query hooks for workspace operations.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { queryKeys } from '@/lib/query-keys';
+import { STALE_TIMES } from '@/lib/query-client';
+
+interface WorkspaceDirectory {
+  name: string;
+  path: string;
+}
+
+/**
+ * Fetch workspace directories
+ *
+ * @param enabled - Whether to enable the query
+ * @returns Query result with directories
+ *
+ * @example
+ * ```tsx
+ * const { data: directories, isLoading, error } = useWorkspaceDirectories(open);
+ * ```
+ */
+export function useWorkspaceDirectories(enabled = true) {
+  return useQuery({
+    queryKey: queryKeys.workspace.directories(),
+    queryFn: async (): Promise<WorkspaceDirectory[]> => {
+      const api = getHttpApiClient();
+      const result = await api.workspace.getDirectories();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to load directories');
+      }
+      return result.directories ?? [];
+    },
+    enabled,
+    staleTime: STALE_TIMES.SETTINGS,
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/queries/use-worktrees.ts b/temp_repo/apps/ui/src/hooks/queries/use-worktrees.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5c5d03eaa5a437697f60ad760a45399aa7b9103a
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/queries/use-worktrees.ts
@@ -0,0 +1,317 @@
+/**
+ * Worktrees Query Hooks
+ *
+ * React Query hooks for fetching worktree data.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import { STALE_TIMES } from '@/lib/query-client';
+import { createSmartPollingInterval } from '@/hooks/use-event-recency';
+
+const WORKTREE_REFETCH_ON_FOCUS = false;
+const WORKTREE_REFETCH_ON_RECONNECT = false;
+const WORKTREES_POLLING_INTERVAL = 30000;
+
+interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isMain: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+  featureId?: string;
+  linkedToBranch?: string;
+  /** Whether a merge, rebase, or cherry-pick is in progress with conflicts */
+  hasConflicts?: boolean;
+  /** Type of conflict operation in progress */
+  conflictType?: 'merge' | 'rebase' | 'cherry-pick';
+  /** List of files with conflicts */
+  conflictFiles?: string[];
+  /** The branch that is the source of the conflict (e.g. the branch being merged in) */
+  conflictSourceBranch?: string;
+}
+
+interface RemovedWorktree {
+  path: string;
+  branch: string;
+}
+
+interface WorktreesResult {
+  worktrees: WorktreeInfo[];
+  removedWorktrees: RemovedWorktree[];
+}
+
+/**
+ * Fetch all worktrees for a project
+ *
+ * @param projectPath - Path to the project
+ * @param includeDetails - Whether to include detailed info (default: true)
+ * @returns Query result with worktrees array and removed worktrees
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading, refetch } = useWorktrees(currentProject?.path);
+ * const worktrees = data?.worktrees ?? [];
+ * ```
+ */
+export function useWorktrees(projectPath: string | undefined, includeDetails = true) {
+  return useQuery({
+    queryKey: queryKeys.worktrees.all(projectPath ?? ''),
+    queryFn: async (): Promise<WorktreesResult> => {
+      if (!projectPath) throw new Error('No project path');
+      const api = getElectronAPI();
+      if (!api.worktree) {
+        throw new Error('Worktree API not available');
+      }
+      const result = await api.worktree.listAll(projectPath, includeDetails);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch worktrees');
+      }
+      return {
+        worktrees: result.worktrees ?? [],
+        removedWorktrees: result.removedWorktrees ?? [],
+      };
+    },
+    enabled: !!projectPath,
+    staleTime: STALE_TIMES.WORKTREES,
+    refetchInterval: createSmartPollingInterval(WORKTREES_POLLING_INTERVAL),
+    refetchOnWindowFocus: WORKTREE_REFETCH_ON_FOCUS,
+    refetchOnReconnect: WORKTREE_REFETCH_ON_RECONNECT,
+  });
+}
+
+/**
+ * Fetch worktree info for a specific feature
+ *
+ * @param projectPath - Path to the project
+ * @param featureId - ID of the feature
+ * @returns Query result with worktree info
+ */
+export function useWorktreeInfo(projectPath: string | undefined, featureId: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.worktrees.single(projectPath ?? '', featureId ?? ''),
+    queryFn: async () => {
+      if (!projectPath || !featureId) throw new Error('Missing project path or feature ID');
+      const api = getElectronAPI();
+      if (!api.worktree) {
+        throw new Error('Worktree API not available');
+      }
+      const result = await api.worktree.getInfo(projectPath, featureId);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch worktree info');
+      }
+      return result;
+    },
+    enabled: !!projectPath && !!featureId,
+    staleTime: STALE_TIMES.WORKTREES,
+    refetchOnWindowFocus: WORKTREE_REFETCH_ON_FOCUS,
+    refetchOnReconnect: WORKTREE_REFETCH_ON_RECONNECT,
+  });
+}
+
+/**
+ * Fetch worktree status for a specific feature
+ *
+ * @param projectPath - Path to the project
+ * @param featureId - ID of the feature
+ * @returns Query result with worktree status
+ */
+export function useWorktreeStatus(projectPath: string | undefined, featureId: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.worktrees.status(projectPath ?? '', featureId ?? ''),
+    queryFn: async () => {
+      if (!projectPath || !featureId) throw new Error('Missing project path or feature ID');
+      const api = getElectronAPI();
+      if (!api.worktree) {
+        throw new Error('Worktree API not available');
+      }
+      const result = await api.worktree.getStatus(projectPath, featureId);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch worktree status');
+      }
+      return result;
+    },
+    enabled: !!projectPath && !!featureId,
+    staleTime: STALE_TIMES.WORKTREES,
+    refetchOnWindowFocus: WORKTREE_REFETCH_ON_FOCUS,
+    refetchOnReconnect: WORKTREE_REFETCH_ON_RECONNECT,
+  });
+}
+
+/**
+ * Fetch worktree diffs for a specific feature
+ *
+ * @param projectPath - Path to the project
+ * @param featureId - ID of the feature
+ * @returns Query result with files and diff content
+ */
+export function useWorktreeDiffs(projectPath: string | undefined, featureId: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.worktrees.diffs(projectPath ?? '', featureId ?? ''),
+    queryFn: async () => {
+      if (!projectPath || !featureId) throw new Error('Missing project path or feature ID');
+      const api = getElectronAPI();
+      if (!api.worktree) {
+        throw new Error('Worktree API not available');
+      }
+      const result = await api.worktree.getDiffs(projectPath, featureId);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch diffs');
+      }
+      return {
+        files: result.files ?? [],
+        diff: result.diff ?? '',
+        ...(result.mergeState ? { mergeState: result.mergeState } : {}),
+      };
+    },
+    enabled: !!projectPath && !!featureId,
+    staleTime: STALE_TIMES.WORKTREES,
+    refetchOnWindowFocus: WORKTREE_REFETCH_ON_FOCUS,
+    refetchOnReconnect: WORKTREE_REFETCH_ON_RECONNECT,
+  });
+}
+
+interface BranchInfo {
+  name: string;
+  isCurrent: boolean;
+  isRemote: boolean;
+  lastCommit?: string;
+  upstream?: string;
+}
+
+interface BranchesResult {
+  branches: BranchInfo[];
+  aheadCount: number;
+  behindCount: number;
+  hasRemoteBranch: boolean;
+  hasAnyRemotes: boolean;
+  isGitRepo: boolean;
+  hasCommits: boolean;
+  /** The name of the remote that the current branch is tracking (e.g. "origin"), if any */
+  trackingRemote?: string;
+  /** List of remote names that have a branch matching the current branch name */
+  remotesWithBranch?: string[];
+}
+
+/**
+ * Fetch available branches for a worktree
+ *
+ * @param worktreePath - Path to the worktree
+ * @param includeRemote - Whether to include remote branches
+ * @returns Query result with branches, ahead/behind counts, and git repo status
+ */
+export function useWorktreeBranches(worktreePath: string | undefined, includeRemote = false) {
+  return useQuery({
+    // Include includeRemote in query key so different configurations have separate caches
+    queryKey: queryKeys.worktrees.branches(worktreePath ?? '', includeRemote),
+    queryFn: async (): Promise<BranchesResult> => {
+      if (!worktreePath) throw new Error('No worktree path');
+      const api = getElectronAPI();
+      if (!api.worktree) {
+        throw new Error('Worktree API not available');
+      }
+      const result = await api.worktree.listBranches(worktreePath, includeRemote);
+
+      // Handle special git status codes
+      if (result.code === 'NOT_GIT_REPO') {
+        return {
+          branches: [],
+          aheadCount: 0,
+          behindCount: 0,
+          hasRemoteBranch: false,
+          hasAnyRemotes: false,
+          isGitRepo: false,
+          hasCommits: false,
+        };
+      }
+      if (result.code === 'NO_COMMITS') {
+        return {
+          branches: [],
+          aheadCount: 0,
+          behindCount: 0,
+          hasRemoteBranch: false,
+          hasAnyRemotes: result.result?.hasAnyRemotes ?? false,
+          isGitRepo: true,
+          hasCommits: false,
+        };
+      }
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch branches');
+      }
+
+      return {
+        branches: result.result?.branches ?? [],
+        aheadCount: result.result?.aheadCount ?? 0,
+        behindCount: result.result?.behindCount ?? 0,
+        hasRemoteBranch: result.result?.hasRemoteBranch ?? false,
+        hasAnyRemotes: result.result?.hasAnyRemotes ?? false,
+        isGitRepo: true,
+        hasCommits: true,
+        trackingRemote: result.result?.trackingRemote,
+        remotesWithBranch: (result.result as { remotesWithBranch?: string[] })?.remotesWithBranch,
+      };
+    },
+    enabled: !!worktreePath,
+    staleTime: STALE_TIMES.WORKTREES,
+    refetchOnWindowFocus: WORKTREE_REFETCH_ON_FOCUS,
+    refetchOnReconnect: WORKTREE_REFETCH_ON_RECONNECT,
+  });
+}
+
+/**
+ * Fetch init script for a project
+ *
+ * @param projectPath - Path to the project
+ * @returns Query result with init script content
+ */
+export function useWorktreeInitScript(projectPath: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.worktrees.initScript(projectPath ?? ''),
+    queryFn: async () => {
+      if (!projectPath) throw new Error('No project path');
+      const api = getElectronAPI();
+      if (!api.worktree) {
+        throw new Error('Worktree API not available');
+      }
+      const result = await api.worktree.getInitScript(projectPath);
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch init script');
+      }
+      return {
+        exists: result.exists ?? false,
+        content: result.content ?? '',
+      };
+    },
+    enabled: !!projectPath,
+    staleTime: STALE_TIMES.SETTINGS,
+    refetchOnWindowFocus: WORKTREE_REFETCH_ON_FOCUS,
+    refetchOnReconnect: WORKTREE_REFETCH_ON_RECONNECT,
+  });
+}
+
+/**
+ * Fetch available editors
+ *
+ * @returns Query result with available editors
+ */
+export function useAvailableEditors() {
+  return useQuery({
+    queryKey: queryKeys.worktrees.editors(),
+    queryFn: async () => {
+      const api = getElectronAPI();
+      if (!api.worktree) {
+        throw new Error('Worktree API not available');
+      }
+      const result = await api.worktree.getAvailableEditors();
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to fetch editors');
+      }
+      return result.result?.editors ?? [];
+    },
+    staleTime: STALE_TIMES.CLI_STATUS,
+    refetchOnWindowFocus: WORKTREE_REFETCH_ON_FOCUS,
+    refetchOnReconnect: WORKTREE_REFETCH_ON_RECONNECT,
+  });
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-agent-output-websocket.ts b/temp_repo/apps/ui/src/hooks/use-agent-output-websocket.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b3b3d80aa06dc15253bb5dbc24324b6220a16c48
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-agent-output-websocket.ts
@@ -0,0 +1,139 @@
+/**
+ * Custom hook for handling WebSocket events in AgentOutputModal
+ * Centralizes WebSocket event logic to reduce duplication
+ */
+
+import { useEffect, useRef, useCallback, useState } from 'react';
+import { getElectronAPI } from '@/lib/electron';
+import { useAgentOutput } from '@/hooks/queries';
+import {
+  formatAutoModeEventContent,
+  formatBacklogPlanEventContent,
+} from '@/components/views/board-view/dialogs/event-content-formatter';
+import type { AutoModeEvent } from '@/types/electron';
+import type { BacklogPlanEvent } from '@automaker/types';
+import { MODAL_CONSTANTS } from '@/components/views/board-view/dialogs/agent-output-modal.constants';
+
+interface UseAgentOutputWebSocketProps {
+  open: boolean;
+  featureId: string;
+  isBacklogPlan: boolean;
+  projectPath: string;
+  onFeatureComplete?: (passes: boolean) => void;
+}
+
+export function useAgentOutputWebSocket({
+  open,
+  featureId,
+  isBacklogPlan,
+  projectPath,
+  onFeatureComplete,
+}: UseAgentOutputWebSocketProps) {
+  const [streamedContent, setStreamedContent] = useState('');
+  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  // Use React Query for initial output loading
+  const { data: initialOutput = '', isLoading } = useAgentOutput(projectPath, featureId, {
+    enabled: open && !!projectPath,
+  });
+
+  // Combine initial output with streamed content
+  const output = initialOutput + streamedContent;
+
+  // Handle auto mode events
+  const handleAutoModeEvent = useCallback(
+    (event: AutoModeEvent) => {
+      // Filter events for this specific feature only
+      if ('featureId' in event && event.featureId !== featureId) {
+        return;
+      }
+
+      const newContent = formatAutoModeEventContent(event);
+
+      if (newContent) {
+        setStreamedContent((prev) => prev + newContent);
+      }
+
+      // Handle feature completion
+      if (event.type === 'auto_mode_feature_complete' && event.passes && onFeatureComplete) {
+        // Clear any existing timeout first
+        if (closeTimeoutRef.current) {
+          clearTimeout(closeTimeoutRef.current);
+        }
+
+        // Set timeout to close modal after delay
+        closeTimeoutRef.current = setTimeout(() => {
+          onFeatureComplete(true);
+        }, MODAL_CONSTANTS.MODAL_CLOSE_DELAY_MS);
+      }
+    },
+    [featureId, onFeatureComplete]
+  );
+
+  // Handle backlog plan events
+  const handleBacklogPlanEvent = useCallback((event: BacklogPlanEvent) => {
+    const newContent = formatBacklogPlanEventContent(event);
+
+    if (newContent) {
+      setStreamedContent((prev) => prev + newContent);
+    }
+  }, []);
+
+  // Set up WebSocket event listeners
+  useEffect(() => {
+    if (!open) {
+      // Clean up timeout when modal closes
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = undefined;
+      }
+      return;
+    }
+
+    const api = getElectronAPI();
+    if (!api) return;
+
+    let unsubscribe: (() => void) | undefined;
+
+    if (isBacklogPlan) {
+      // Handle backlog plan events
+      if (api.backlogPlan) {
+        unsubscribe = api.backlogPlan.onEvent((data: unknown) => {
+          if (
+            data !== null &&
+            typeof data === 'object' &&
+            'type' in data &&
+            typeof (data as { type: unknown }).type === 'string'
+          ) {
+            handleBacklogPlanEvent(data as BacklogPlanEvent);
+          }
+        });
+      }
+    } else {
+      // Handle auto mode events
+      if (api.autoMode) {
+        unsubscribe = api.autoMode.onEvent(handleAutoModeEvent);
+      }
+    }
+
+    return () => {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+      }
+      unsubscribe?.();
+    };
+  }, [open, featureId, isBacklogPlan, handleAutoModeEvent, handleBacklogPlanEvent]);
+
+  // Reset streamed content when modal opens or featureId changes
+  useEffect(() => {
+    if (open) {
+      setStreamedContent('');
+    }
+  }, [open, featureId]);
+
+  return {
+    output,
+    isLoading,
+    streamedContent,
+  };
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-auto-mode.ts b/temp_repo/apps/ui/src/hooks/use-auto-mode.ts
new file mode 100644
index 0000000000000000000000000000000000000000..25772b68f56efd9518faf95c67de3e4dfcdb31bc
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-auto-mode.ts
@@ -0,0 +1,1084 @@
+import { useEffect, useCallback, useMemo, useRef } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { createLogger } from '@automaker/utils/logger';
+import { DEFAULT_MAX_CONCURRENCY } from '@automaker/types';
+import { useAppStore } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import type { AutoModeEvent } from '@/types/electron';
+import type { WorktreeInfo } from '@/components/views/board-view/worktree-panel/types';
+import { getGlobalEventsRecent } from '@/hooks/use-event-recency';
+
+const logger = createLogger('AutoMode');
+
+const AUTO_MODE_SESSION_KEY = 'automaker:autoModeRunningByWorktreeKey';
+// Session key delimiter for parsing stored worktree keys
+const SESSION_KEY_DELIMITER = '::';
+// Marker for main worktree in session storage keys
+const MAIN_WORKTREE_MARKER = '__main__';
+
+function arraysEqual(a: string[], b: string[]): boolean {
+  if (a.length !== b.length) return false;
+  const set = new Set(b);
+  return a.every((id) => set.has(id));
+}
+const AUTO_MODE_POLLING_INTERVAL = 30000;
+// Stable empty array reference to avoid re-renders from `[] !== []`
+const EMPTY_TASKS: string[] = [];
+
+/**
+ * Generate a worktree key for session storage
+ * @param projectPath - The project path
+ * @param branchName - The branch name, or null for main worktree
+ */
+function getWorktreeSessionKey(projectPath: string, branchName: string | null): string {
+  return `${projectPath}${SESSION_KEY_DELIMITER}${branchName ?? MAIN_WORKTREE_MARKER}`;
+}
+
+function readAutoModeSession(): Record<string, boolean> {
+  try {
+    if (typeof window === 'undefined') return {};
+    const raw = window.sessionStorage?.getItem(AUTO_MODE_SESSION_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw) as unknown;
+    if (!parsed || typeof parsed !== 'object') return {};
+    return parsed as Record<string, boolean>;
+  } catch {
+    return {};
+  }
+}
+
+function writeAutoModeSession(next: Record<string, boolean>): void {
+  try {
+    if (typeof window === 'undefined') return;
+    window.sessionStorage?.setItem(AUTO_MODE_SESSION_KEY, JSON.stringify(next));
+  } catch {
+    // ignore storage errors (private mode, disabled storage, etc.)
+  }
+}
+
+function setAutoModeSessionForWorktree(
+  projectPath: string,
+  branchName: string | null,
+  running: boolean
+): void {
+  const worktreeKey = getWorktreeSessionKey(projectPath, branchName);
+  const current = readAutoModeSession();
+  const next = { ...current, [worktreeKey]: running };
+  writeAutoModeSession(next);
+}
+
+// Type guard for plan_approval_required event
+function isPlanApprovalEvent(
+  event: AutoModeEvent
+): event is Extract<AutoModeEvent, { type: 'plan_approval_required' }> {
+  return event.type === 'plan_approval_required';
+}
+
+/**
+ * Hook for managing auto mode (scoped per worktree)
+ * @param worktree - Optional worktree info. If not provided, uses main worktree (branchName = null)
+ */
+export function useAutoMode(worktree?: WorktreeInfo) {
+  // Subscribe to stable action functions and scalar state via useShallow.
+  // IMPORTANT: Do NOT subscribe to autoModeByWorktree here. That object gets a
+  // new reference on every Zustand mutation to ANY worktree, which would re-render
+  // every useAutoMode consumer on every store change. Instead, we subscribe to the
+  // specific worktree's state below using a targeted selector.
+  const {
+    setAutoModeRunning,
+    addRunningTask,
+    removeRunningTask,
+    currentProject,
+    addAutoModeActivity,
+    projects,
+    setPendingPlanApproval,
+    getWorktreeKey,
+    getMaxConcurrencyForWorktree,
+    isPrimaryWorktreeBranch,
+    globalMaxConcurrency,
+    addRecentlyCompletedFeature,
+  } = useAppStore(
+    useShallow((state) => ({
+      setAutoModeRunning: state.setAutoModeRunning,
+      addRunningTask: state.addRunningTask,
+      removeRunningTask: state.removeRunningTask,
+      currentProject: state.currentProject,
+      addAutoModeActivity: state.addAutoModeActivity,
+      projects: state.projects,
+      setPendingPlanApproval: state.setPendingPlanApproval,
+      getWorktreeKey: state.getWorktreeKey,
+      getMaxConcurrencyForWorktree: state.getMaxConcurrencyForWorktree,
+      isPrimaryWorktreeBranch: state.isPrimaryWorktreeBranch,
+      globalMaxConcurrency: state.maxConcurrency,
+      addRecentlyCompletedFeature: state.addRecentlyCompletedFeature,
+    }))
+  );
+
+  // Derive branchName from worktree:
+  // If worktree is provided, use its branch name (even for main worktree, as it might be on a feature branch)
+  // If not provided, default to null (main worktree default)
+  // IMPORTANT: Depend on primitive values (isMain, branch) instead of the worktree object
+  // reference to avoid re-computing when the parent passes a new object with the same values.
+  // This prevents a cascading re-render loop: new worktree ref → new branchName useMemo →
+  // new refreshStatus callback → effect re-fires → store update → re-render → React error #185.
+  const worktreeIsMain = worktree?.isMain;
+  const worktreeBranch = worktree?.branch;
+  const hasWorktree = worktree !== undefined;
+  const branchName = useMemo(() => {
+    if (!hasWorktree) return null;
+    return worktreeIsMain ? null : worktreeBranch || null;
+  }, [hasWorktree, worktreeIsMain, worktreeBranch]);
+
+  // Use a ref for branchName inside refreshStatus to prevent the callback identity
+  // from changing on every worktree switch. Without this, switching worktrees causes:
+  //   branchName changes → refreshStatus identity changes → useEffect fires →
+  //   API call → setAutoModeRunning → store update → re-render cascade → React error #185
+  // On mobile Safari/PWA this cascade is especially problematic as it triggers
+  // "A problem repeatedly occurred" crash loops.
+  const branchNameRef = useRef(branchName);
+  useEffect(() => {
+    branchNameRef.current = branchName;
+  }, [branchName]);
+
+  // Helper to look up project ID from path
+  const getProjectIdFromPath = useCallback(
+    (path: string): string | undefined => {
+      const project = projects.find((p) => p.path === path);
+      return project?.id;
+    },
+    [projects]
+  );
+
+  // Get worktree-specific auto mode state using a TARGETED selector with
+  // VALUE-BASED equality. This is critical for preventing cascading re-renders
+  // in board view, where DndContext amplifies every parent re-render.
+  //
+  // Why value-based equality matters: Every Zustand `set()` call (including
+  // `addAutoModeActivity` which fires on every WS event) triggers all subscriber
+  // selectors to re-run. Even our targeted selector that reads a specific key
+  // would return a new object reference (from the spread in `removeRunningTask`
+  // etc.), causing a re-render even when the actual values haven't changed.
+  // By extracting primitives and comparing with a custom equality function,
+  // we only re-render when isRunning/runningTasks/maxConcurrency actually change.
+  const projectId = currentProject?.id;
+  const worktreeKey = useMemo(
+    () => (projectId ? getWorktreeKey(projectId, branchName) : null),
+    [projectId, branchName, getWorktreeKey]
+  );
+
+  // Subscribe to this specific worktree's state using useShallow.
+  // useShallow compares each property of the returned object with Object.is,
+  // so primitive properties (isRunning: boolean, maxConcurrency: number) are
+  // naturally stable. Only runningTasks (array) needs additional stabilization
+  // since filter()/spread creates new array references even for identical content.
+  const { worktreeIsRunning, worktreeRunningTasksRaw, worktreeMaxConcurrency } = useAppStore(
+    useShallow((state) => {
+      if (!worktreeKey) {
+        return {
+          worktreeIsRunning: false,
+          worktreeRunningTasksRaw: EMPTY_TASKS,
+          worktreeMaxConcurrency: undefined as number | undefined,
+        };
+      }
+      const wt = state.autoModeByWorktree[worktreeKey];
+      if (!wt) {
+        return {
+          worktreeIsRunning: false,
+          worktreeRunningTasksRaw: EMPTY_TASKS,
+          worktreeMaxConcurrency: undefined as number | undefined,
+        };
+      }
+      return {
+        worktreeIsRunning: wt.isRunning,
+        worktreeRunningTasksRaw: wt.runningTasks,
+        worktreeMaxConcurrency: wt.maxConcurrency,
+      };
+    })
+  );
+  // Stabilize runningTasks: useShallow uses Object.is per property, but
+  // runningTasks gets a new array ref after removeRunningTask/addRunningTask.
+  // Cache the previous value and only update when content actually changes.
+  const prevTasksRef = useRef<string[]>(EMPTY_TASKS);
+  const worktreeRunningTasks = useMemo(() => {
+    if (worktreeRunningTasksRaw === prevTasksRef.current) return prevTasksRef.current;
+    if (arraysEqual(prevTasksRef.current, worktreeRunningTasksRaw)) return prevTasksRef.current;
+    prevTasksRef.current = worktreeRunningTasksRaw;
+    return worktreeRunningTasksRaw;
+  }, [worktreeRunningTasksRaw]);
+
+  const isAutoModeRunning = worktreeIsRunning;
+  const runningAutoTasks = worktreeRunningTasks;
+  // Use worktreeMaxConcurrency (from the reactive per-key selector) so
+  // canStartNewTask stays reactive when refreshStatus updates worktree state
+  // or when the global setting changes.
+  const maxConcurrency = projectId
+    ? (worktreeMaxConcurrency ?? globalMaxConcurrency)
+    : DEFAULT_MAX_CONCURRENCY;
+
+  // Check if we can start a new task based on concurrency limit
+  const canStartNewTask = runningAutoTasks.length < maxConcurrency;
+
+  // Batch addAutoModeActivity calls to reduce Zustand set() frequency.
+  // Without batching, each WS event (especially auto_mode_progress which fires
+  // rapidly during streaming) triggers a separate set() → all subscriber selectors
+  // re-evaluate → on mobile this overwhelms React's batching → crash.
+  // This batches activities in a ref and flushes them in a single set() call.
+  const pendingActivitiesRef = useRef<Parameters<typeof addAutoModeActivity>[0][]>([]);
+  const flushTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const batchedAddAutoModeActivity = useCallback(
+    (activity: Parameters<typeof addAutoModeActivity>[0]) => {
+      pendingActivitiesRef.current.push(activity);
+      if (!flushTimerRef.current) {
+        flushTimerRef.current = setTimeout(() => {
+          const batch = pendingActivitiesRef.current;
+          pendingActivitiesRef.current = [];
+          flushTimerRef.current = null;
+          // Flush all pending activities in a single store update
+          for (const act of batch) {
+            addAutoModeActivity(act);
+          }
+        }, 100);
+      }
+    },
+    [addAutoModeActivity]
+  );
+
+  // Cleanup flush timer on unmount
+  useEffect(() => {
+    return () => {
+      if (flushTimerRef.current) {
+        clearTimeout(flushTimerRef.current);
+      }
+    };
+  }, []);
+
+  // Ref to prevent refreshStatus and WebSocket handlers from overwriting optimistic state
+  // during start/stop transitions.
+  const isTransitioningRef = useRef(false);
+  // Tracks specifically a restart-for-concurrency transition. When true, the
+  // auto_mode_started WebSocket handler will clear isTransitioningRef, ensuring
+  // delayed auto_mode_stopped events that arrive after the HTTP calls complete
+  // (but before the WebSocket events) are still suppressed.
+  const isRestartTransitionRef = useRef(false);
+  // Safety timeout ID to clear the transition flag if the auto_mode_started event never arrives
+  const restartSafetyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Use refs for mutable state in refreshStatus to avoid unstable callback identity.
+  // This prevents the useEffect that calls refreshStatus on mount from re-firing
+  // every time isAutoModeRunning or runningAutoTasks changes, which was a source of
+  // flickering as refreshStatus would race with WebSocket events and optimistic updates.
+  const isAutoModeRunningRef = useRef(isAutoModeRunning);
+  const runningAutoTasksRef = useRef(runningAutoTasks);
+  useEffect(() => {
+    isAutoModeRunningRef.current = isAutoModeRunning;
+  }, [isAutoModeRunning]);
+  useEffect(() => {
+    runningAutoTasksRef.current = runningAutoTasks;
+  }, [runningAutoTasks]);
+
+  // Clean up safety timeout on unmount to prevent timer leaks and misleading log warnings
+  useEffect(() => {
+    return () => {
+      if (restartSafetyTimeoutRef.current) {
+        clearTimeout(restartSafetyTimeoutRef.current);
+        restartSafetyTimeoutRef.current = null;
+      }
+      isRestartTransitionRef.current = false;
+    };
+  }, []);
+
+  // refreshStatus uses branchNameRef instead of branchName in its dependency array
+  // to keep a stable callback identity across worktree switches. This prevents the
+  // useEffect([refreshStatus]) from re-firing on every worktree change, which on
+  // mobile Safari/PWA causes a cascading re-render that triggers "A problem
+  // repeatedly occurred" crash loops.
+  const refreshStatus = useCallback(async () => {
+    if (!currentProject) return;
+
+    // Skip sync when user is in the middle of start/stop - avoids race where
+    // refreshStatus runs before the API call completes and overwrites optimistic state
+    if (isTransitioningRef.current) return;
+
+    // Read branchName from ref to always use the latest value without
+    // adding it to the dependency array (which would destabilize the callback).
+    const currentBranchName = branchNameRef.current;
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.autoMode?.status) return;
+
+      const result = await api.autoMode.status(currentProject.path, currentBranchName);
+      if (result.success && result.isAutoLoopRunning !== undefined) {
+        const backendIsRunning = result.isAutoLoopRunning;
+        const backendRunningFeatures = result.runningFeatures ?? [];
+        // Read latest state from refs to avoid stale closure values
+        const currentIsRunning = isAutoModeRunningRef.current;
+        const currentRunningTasks = runningAutoTasksRef.current;
+        const needsSync =
+          backendIsRunning !== currentIsRunning ||
+          // Also sync when backend has runningFeatures we're missing (handles missed WebSocket events)
+          (backendIsRunning &&
+            Array.isArray(backendRunningFeatures) &&
+            backendRunningFeatures.length > 0 &&
+            !arraysEqual(backendRunningFeatures, currentRunningTasks)) ||
+          // Also sync when UI has stale running tasks but backend has none
+          // (handles server restart where features were reconciled to backlog/ready)
+          (!backendIsRunning &&
+            currentRunningTasks.length > 0 &&
+            backendRunningFeatures.length === 0);
+
+        if (needsSync) {
+          const worktreeDesc = currentBranchName
+            ? `worktree ${currentBranchName}`
+            : 'main worktree';
+          if (backendIsRunning !== currentIsRunning) {
+            logger.info(
+              `[AutoMode] Syncing UI state with backend for ${worktreeDesc} in ${currentProject.path}: ${backendIsRunning ? 'ON' : 'OFF'}`
+            );
+          }
+          setAutoModeRunning(
+            currentProject.id,
+            currentBranchName,
+            backendIsRunning,
+            result.maxConcurrency,
+            backendRunningFeatures
+          );
+          setAutoModeSessionForWorktree(currentProject.path, currentBranchName, backendIsRunning);
+        }
+      }
+    } catch (error) {
+      logger.error('Error syncing auto mode state with backend:', error);
+    }
+  }, [currentProject, setAutoModeRunning]);
+
+  // Restore auto mode state from session storage on mount.
+  // This ensures that auto mode indicators show up immediately on page load,
+  // before the refreshStatus API call completes. The session storage is
+  // populated whenever auto mode starts/stops, so it provides a reliable
+  // initial state that will be verified/corrected by refreshStatus.
+  useEffect(() => {
+    if (!currentProject) return;
+
+    try {
+      const sessionData = readAutoModeSession();
+      const projectPath = currentProject.path;
+
+      // Track restored worktrees to avoid redundant state updates
+      const restoredKeys = new Set<string>();
+
+      // Find all session storage keys that match this project
+      Object.entries(sessionData).forEach(([sessionKey, isRunning]) => {
+        if (!isRunning) return;
+
+        // Parse the session key: "projectPath::branchName" or "projectPath::__main__"
+        // Use lastIndexOf to split from the right, since projectPath may contain the delimiter
+        const delimiterIndex = sessionKey.lastIndexOf(SESSION_KEY_DELIMITER);
+        if (delimiterIndex === -1) {
+          // Malformed session key - skip it
+          logger.warn(`Malformed session storage key: ${sessionKey}`);
+          return;
+        }
+
+        const keyProjectPath = sessionKey.slice(0, delimiterIndex);
+        const keyBranchName = sessionKey.slice(delimiterIndex + SESSION_KEY_DELIMITER.length);
+        if (keyProjectPath !== projectPath) return;
+
+        // Validate branch name: __main__ means null (main worktree)
+        if (keyBranchName !== MAIN_WORKTREE_MARKER && !keyBranchName) {
+          logger.warn(`Invalid branch name in session key: ${sessionKey}`);
+          return;
+        }
+
+        const branchName = keyBranchName === MAIN_WORKTREE_MARKER ? null : keyBranchName;
+
+        // Skip if we've already restored this worktree (prevents duplicates)
+        const worktreeKey = getWorktreeSessionKey(projectPath, branchName);
+        if (restoredKeys.has(worktreeKey)) {
+          return;
+        }
+        restoredKeys.add(worktreeKey);
+
+        // Restore the auto mode running state in the store
+        setAutoModeRunning(currentProject.id, branchName, true);
+      });
+
+      if (restoredKeys.size > 0) {
+        logger.debug(
+          `Restored auto mode state for ${restoredKeys.size} worktree(s) from session storage`
+        );
+      }
+    } catch (error) {
+      logger.error('Error restoring auto mode state from session storage:', error);
+    }
+  }, [currentProject, setAutoModeRunning]);
+
+  // On mount (and when refreshStatus identity changes, e.g. project switch),
+  // query backend for current auto loop status and sync UI state.
+  // This handles cases where the backend is still running after a page refresh.
+  //
+  // IMPORTANT: Debounce with a short delay to prevent a synchronous cascade
+  // during project switches. Without this, the sequence is:
+  //   refreshStatus() → setAutoModeRunning() → store update → re-render →
+  //   other effects fire → more store updates → React error #185.
+  // The 150ms delay lets React settle the initial mount renders before we
+  // trigger additional store mutations from the API response.
+  useEffect(() => {
+    const timer = setTimeout(() => void refreshStatus(), 150);
+    return () => clearTimeout(timer);
+  }, [refreshStatus]);
+
+  // When the user switches worktrees, re-sync auto mode status for the new branch.
+  // Uses a longer debounce (300ms) than the mount effect (150ms) to let the worktree
+  // switch settle (store update, feature re-filtering, query invalidation) before
+  // triggering another API call. Without this delay, on mobile Safari the cascade of
+  // store mutations from the worktree switch + refreshStatus response overwhelms React's
+  // batching, causing "A problem repeatedly occurred" crash loops.
+  useEffect(() => {
+    const timer = setTimeout(() => void refreshStatus(), 300);
+    return () => clearTimeout(timer);
+    // branchName is the trigger; refreshStatus is stable (uses ref internally)
+  }, [branchName, refreshStatus]);
+
+  // Periodic polling fallback when WebSocket events are stale.
+  useEffect(() => {
+    if (!currentProject) return;
+
+    const interval = setInterval(() => {
+      if (getGlobalEventsRecent()) return;
+      void refreshStatus();
+    }, AUTO_MODE_POLLING_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, [currentProject, refreshStatus]);
+
+  // Handle auto mode events - listen globally for all projects/worktrees
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.autoMode) return;
+
+    const unsubscribe = api.autoMode.onEvent((event: AutoModeEvent) => {
+      logger.info('Event:', event);
+
+      // Events include projectPath and branchName from backend
+      // Use them to look up project ID and determine the worktree
+      let eventProjectId: string | undefined;
+      if ('projectPath' in event && event.projectPath) {
+        eventProjectId = getProjectIdFromPath(event.projectPath);
+      }
+      if (!eventProjectId && 'projectId' in event && event.projectId) {
+        eventProjectId = event.projectId;
+      }
+      if (!eventProjectId) {
+        eventProjectId = projectId;
+      }
+
+      // Extract branchName from event, defaulting to null (main worktree)
+      const rawEventBranchName: string | null =
+        'branchName' in event && event.branchName !== undefined ? event.branchName : null;
+
+      // Get projectPath for worktree lookup
+      const eventProjectPath = 'projectPath' in event ? event.projectPath : currentProject?.path;
+
+      // Normalize branchName: convert primary worktree branch to null for consistent key lookup
+      // This handles cases where the main branch is named something other than 'main' (e.g., 'master', 'develop')
+      const eventBranchName: string | null =
+        eventProjectPath &&
+        rawEventBranchName &&
+        isPrimaryWorktreeBranch(eventProjectPath, rawEventBranchName)
+          ? null
+          : rawEventBranchName;
+
+      // Skip event if we couldn't determine the project
+      if (!eventProjectId) {
+        logger.warn('Could not determine project for event:', event);
+        return;
+      }
+
+      switch (event.type) {
+        case 'auto_mode_started':
+          // Backend started auto loop - update UI state
+          {
+            const worktreeDesc = eventBranchName ? `worktree ${eventBranchName}` : 'main worktree';
+            logger.info(`[AutoMode] Backend started auto loop for ${worktreeDesc}`);
+            if (eventProjectId) {
+              // Extract maxConcurrency from event if available, otherwise use current or default
+              const eventMaxConcurrency =
+                'maxConcurrency' in event && typeof event.maxConcurrency === 'number'
+                  ? event.maxConcurrency
+                  : getMaxConcurrencyForWorktree(eventProjectId, eventBranchName);
+              // Always apply start events even during transitions - this confirms the optimistic state
+              setAutoModeRunning(eventProjectId, eventBranchName, true, eventMaxConcurrency);
+            }
+            // If we were in a restart transition (concurrency change), the arrival of
+            // auto_mode_started confirms the restart is complete. Clear the transition
+            // flags so future auto_mode_stopped events are processed normally.
+            // Only clear transition refs when the event is for this hook's worktree,
+            // to avoid events for worktree B incorrectly affecting worktree A's state.
+            if (isRestartTransitionRef.current && eventBranchName === branchName) {
+              logger.debug(`[AutoMode] Restart transition complete for ${worktreeDesc}`);
+              isTransitioningRef.current = false;
+              isRestartTransitionRef.current = false;
+              if (restartSafetyTimeoutRef.current) {
+                clearTimeout(restartSafetyTimeoutRef.current);
+                restartSafetyTimeoutRef.current = null;
+              }
+            }
+          }
+          break;
+
+        case 'auto_mode_resuming_features':
+          // Backend is resuming features from saved state
+          if (eventProjectId && 'features' in event && Array.isArray(event.features)) {
+            logger.info(`[AutoMode] Resuming ${event.features.length} feature(s) from saved state`);
+            // Use per-feature branchName if available, fallback to event-level branchName
+            event.features.forEach((feature: { id: string; branchName?: string | null }) => {
+              const featureBranchName = feature.branchName ?? eventBranchName;
+              addRunningTask(eventProjectId, featureBranchName, feature.id);
+            });
+          } else if (eventProjectId && 'featureIds' in event && Array.isArray(event.featureIds)) {
+            // Fallback for older event format without per-feature branchName
+            logger.info(
+              `[AutoMode] Resuming ${event.featureIds.length} feature(s) from saved state (legacy format)`
+            );
+            event.featureIds.forEach((featureId: string) => {
+              addRunningTask(eventProjectId, eventBranchName, featureId);
+            });
+          }
+          break;
+
+        case 'auto_mode_stopped':
+          // Backend stopped auto loop - update UI state.
+          // Skip during transitions (e.g., restartWithConcurrency) to avoid flickering the toggle
+          // off between stop and start. The transition handler will set the correct final state.
+          // Only suppress (and only apply transition guard) when the event is for this hook's
+          // worktree, to avoid worktree B's stop events being incorrectly suppressed by
+          // worktree A's transition state.
+          {
+            const worktreeDesc = eventBranchName ? `worktree ${eventBranchName}` : 'main worktree';
+            if (eventBranchName === branchName && isTransitioningRef.current) {
+              logger.info(
+                `[AutoMode] Backend stopped auto loop for ${worktreeDesc} (ignored during transition)`
+              );
+            } else {
+              logger.info(`[AutoMode] Backend stopped auto loop for ${worktreeDesc}`);
+              if (eventProjectId) {
+                setAutoModeRunning(eventProjectId, eventBranchName, false);
+              }
+            }
+          }
+          break;
+
+        case 'auto_mode_feature_start':
+          if (event.featureId) {
+            addRunningTask(eventProjectId, eventBranchName, event.featureId);
+            batchedAddAutoModeActivity({
+              featureId: event.featureId,
+              type: 'start',
+              message: `Started working on feature`,
+            });
+          }
+          break;
+
+        case 'auto_mode_feature_complete':
+          // Feature completed - remove from running tasks and UI will reload features on its own
+          if (event.featureId) {
+            logger.info('Feature completed:', event.featureId, 'passes:', event.passes);
+            // Track recently completed to prevent race condition where completed features
+            // briefly appear in backlog due to stale cache data
+            addRecentlyCompletedFeature(event.featureId);
+            removeRunningTask(eventProjectId, eventBranchName, event.featureId);
+            batchedAddAutoModeActivity({
+              featureId: event.featureId,
+              type: 'complete',
+              message: event.passes
+                ? 'Feature completed successfully'
+                : 'Feature completed with failures',
+              passes: event.passes,
+            });
+          }
+          break;
+
+        case 'auto_mode_error':
+          if (event.featureId && event.error) {
+            // Check if this is a user-initiated cancellation or abort (not a real error)
+            if (event.errorType === 'cancellation' || event.errorType === 'abort') {
+              // User cancelled/aborted the feature - just log as info, not an error
+              logger.info('Feature cancelled/aborted:', event.error);
+              // Remove from running tasks
+              if (eventProjectId) {
+                removeRunningTask(eventProjectId, eventBranchName, event.featureId);
+              }
+              break;
+            }
+
+            // Real error - log and show to user
+            logger.error('Error:', event.error);
+
+            // Check for authentication errors and provide a more helpful message
+            const isAuthError =
+              event.errorType === 'authentication' ||
+              event.error.includes('Authentication failed') ||
+              event.error.includes('Invalid API key');
+
+            const errorMessage = isAuthError
+              ? `Authentication failed: Please check your API key in Settings or run 'claude login' in terminal to re-authenticate.`
+              : event.error;
+
+            batchedAddAutoModeActivity({
+              featureId: event.featureId,
+              type: 'error',
+              message: errorMessage,
+              errorType: isAuthError ? 'authentication' : 'execution',
+            });
+
+            // Remove the task from running since it failed
+            if (eventProjectId) {
+              removeRunningTask(eventProjectId, eventBranchName, event.featureId);
+            }
+          }
+          break;
+
+        case 'auto_mode_progress':
+          // Log progress updates (throttle to avoid spam)
+          if (event.featureId && event.content && event.content.length > 10) {
+            batchedAddAutoModeActivity({
+              featureId: event.featureId,
+              type: 'progress',
+              message: event.content.substring(0, 200), // Limit message length
+            });
+          }
+          break;
+
+        case 'auto_mode_tool':
+          // Log tool usage
+          if (event.featureId && event.tool) {
+            batchedAddAutoModeActivity({
+              featureId: event.featureId,
+              type: 'tool',
+              message: `Using tool: ${event.tool}`,
+              tool: event.tool,
+            });
+          }
+          break;
+
+        case 'auto_mode_phase':
+          // Log phase transitions (Planning, Action, Verification)
+          if (event.featureId && event.phase && event.message) {
+            logger.debug(`[AutoMode] Phase: ${event.phase} for ${event.featureId}`);
+            batchedAddAutoModeActivity({
+              featureId: event.featureId,
+              type: event.phase,
+              message: event.message,
+              phase: event.phase,
+            });
+          }
+          break;
+
+        case 'plan_approval_required':
+          // Plan requires user approval before proceeding
+          if (isPlanApprovalEvent(event)) {
+            logger.debug(`[AutoMode] Plan approval required for ${event.featureId}`);
+            setPendingPlanApproval({
+              featureId: event.featureId,
+              projectPath: event.projectPath || currentProject?.path || '',
+              planContent: event.planContent,
+              planningMode: event.planningMode,
+            });
+          }
+          break;
+
+        case 'planning_started':
+          // Log when planning phase begins
+          if (event.featureId && event.mode && event.message) {
+            logger.debug(`[AutoMode] Planning started (${event.mode}) for ${event.featureId}`);
+            batchedAddAutoModeActivity({
+              featureId: event.featureId,
+              type: 'planning',
+              message: event.message,
+              phase: 'planning',
+            });
+          }
+          break;
+
+        case 'plan_approved':
+          // Log when plan is approved by user
+          if (event.featureId) {
+            logger.debug(`[AutoMode] Plan approved for ${event.featureId}`);
+            batchedAddAutoModeActivity({
+              featureId: event.featureId,
+              type: 'action',
+              message: event.hasEdits
+                ? 'Plan approved with edits, starting implementation...'
+                : 'Plan approved, starting implementation...',
+              phase: 'action',
+            });
+          }
+          break;
+
+        case 'plan_auto_approved':
+          // Log when plan is auto-approved (requirePlanApproval=false)
+          if (event.featureId) {
+            logger.debug(`[AutoMode] Plan auto-approved for ${event.featureId}`);
+            batchedAddAutoModeActivity({
+              featureId: event.featureId,
+              type: 'action',
+              message: 'Plan auto-approved, starting implementation...',
+              phase: 'action',
+            });
+          }
+          break;
+
+        case 'plan_revision_requested':
+          // Log when user requests plan revision with feedback
+          if (event.featureId) {
+            const revisionEvent = event as Extract<
+              AutoModeEvent,
+              { type: 'plan_revision_requested' }
+            >;
+            logger.debug(
+              `[AutoMode] Plan revision requested for ${event.featureId} (v${revisionEvent.planVersion})`
+            );
+            batchedAddAutoModeActivity({
+              featureId: event.featureId,
+              type: 'planning',
+              message: `Revising plan based on feedback (v${revisionEvent.planVersion})...`,
+              phase: 'planning',
+            });
+          }
+          break;
+
+        case 'auto_mode_task_started':
+          // Task started - show which task is being worked on
+          if (event.featureId && 'taskId' in event && 'taskDescription' in event) {
+            const taskEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_started' }>;
+            logger.debug(
+              `[AutoMode] Task ${taskEvent.taskId} started for ${event.featureId}: ${taskEvent.taskDescription}`
+            );
+            batchedAddAutoModeActivity({
+              featureId: event.featureId,
+              type: 'progress',
+              message: `▶ Starting ${taskEvent.taskId}: ${taskEvent.taskDescription}`,
+            });
+          }
+          break;
+
+        case 'auto_mode_task_complete':
+          // Task completed - show progress
+          if (event.featureId && 'taskId' in event) {
+            const taskEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_complete' }>;
+            logger.debug(
+              `[AutoMode] Task ${taskEvent.taskId} completed for ${event.featureId} (${taskEvent.tasksCompleted}/${taskEvent.tasksTotal})`
+            );
+            batchedAddAutoModeActivity({
+              featureId: event.featureId,
+              type: 'progress',
+              message: `✓ ${taskEvent.taskId} done (${taskEvent.tasksCompleted}/${taskEvent.tasksTotal})`,
+            });
+          }
+          break;
+
+        case 'auto_mode_phase_complete':
+          // Phase completed (for full mode with phased tasks)
+          if (event.featureId && 'phaseNumber' in event) {
+            const phaseEvent = event as Extract<
+              AutoModeEvent,
+              { type: 'auto_mode_phase_complete' }
+            >;
+            logger.debug(
+              `[AutoMode] Phase ${phaseEvent.phaseNumber} completed for ${event.featureId}`
+            );
+            batchedAddAutoModeActivity({
+              featureId: event.featureId,
+              type: 'action',
+              message: `Phase ${phaseEvent.phaseNumber} completed`,
+              phase: 'action',
+            });
+          }
+          break;
+
+        case 'auto_mode_task_status':
+          // Task status updated - update planSpec.tasks in real-time
+          if (event.featureId && 'taskId' in event && 'tasks' in event) {
+            const statusEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_task_status' }>;
+            logger.debug(
+              `[AutoMode] Task ${statusEvent.taskId} status updated to ${statusEvent.status} for ${event.featureId}`
+            );
+            // The planSpec.tasks array update is handled by query invalidation
+            // which will refetch the feature data
+          }
+          break;
+
+        case 'auto_mode_summary':
+          // Summary extracted and saved
+          if (event.featureId && 'summary' in event) {
+            const summaryEvent = event as Extract<AutoModeEvent, { type: 'auto_mode_summary' }>;
+            logger.debug(
+              `[AutoMode] Summary saved for ${event.featureId}: ${summaryEvent.summary.substring(0, 100)}...`
+            );
+            batchedAddAutoModeActivity({
+              featureId: event.featureId,
+              type: 'progress',
+              message: `Summary: ${summaryEvent.summary.substring(0, 100)}...`,
+            });
+          }
+          break;
+      }
+    });
+
+    return unsubscribe;
+  }, [
+    projectId,
+    branchName,
+    addRunningTask,
+    removeRunningTask,
+    batchedAddAutoModeActivity,
+    getProjectIdFromPath,
+    setPendingPlanApproval,
+    setAutoModeRunning,
+    currentProject?.path,
+    getMaxConcurrencyForWorktree,
+    isPrimaryWorktreeBranch,
+    addRecentlyCompletedFeature,
+  ]);
+
+  // Start auto mode - calls backend to start the auto loop for this worktree
+  const start = useCallback(async () => {
+    if (!currentProject) {
+      logger.error('No project selected');
+      return;
+    }
+
+    isTransitioningRef.current = true;
+    try {
+      const api = getElectronAPI();
+      if (!api?.autoMode?.start) {
+        throw new Error('Start auto mode API not available');
+      }
+
+      const worktreeDesc = branchName ? `worktree ${branchName}` : 'main worktree';
+      logger.info(`[AutoMode] Starting auto loop for ${worktreeDesc} in ${currentProject.path}`);
+
+      // Optimistically update UI state (backend will confirm via event)
+      const currentMaxConcurrency = getMaxConcurrencyForWorktree(currentProject.id, branchName);
+      setAutoModeSessionForWorktree(currentProject.path, branchName, true);
+      setAutoModeRunning(currentProject.id, branchName, true, currentMaxConcurrency);
+
+      // Call backend to start the auto loop (pass current max concurrency)
+      const result = await api.autoMode.start(
+        currentProject.path,
+        branchName,
+        currentMaxConcurrency
+      );
+
+      if (!result.success) {
+        // Revert UI state on failure
+        setAutoModeSessionForWorktree(currentProject.path, branchName, false);
+        setAutoModeRunning(currentProject.id, branchName, false);
+        logger.error('Failed to start auto mode:', result.error);
+        throw new Error(result.error || 'Failed to start auto mode');
+      }
+
+      logger.debug(`[AutoMode] Started successfully for ${worktreeDesc}`);
+      // Sync with backend after a short delay to get runningFeatures if events were delayed.
+      // The delay ensures the backend has fully processed the start before we poll status,
+      // avoiding a race where status returns stale data and briefly flickers the toggle.
+      setTimeout(() => void refreshStatus(), 500);
+    } catch (error) {
+      // Revert UI state on error
+      setAutoModeSessionForWorktree(currentProject.path, branchName, false);
+      setAutoModeRunning(currentProject.id, branchName, false);
+      logger.error('Error starting auto mode:', error);
+      throw error;
+    } finally {
+      isTransitioningRef.current = false;
+    }
+  }, [currentProject, branchName, setAutoModeRunning, getMaxConcurrencyForWorktree, refreshStatus]);
+
+  // Stop auto mode - calls backend to stop the auto loop for this worktree
+  const stop = useCallback(async () => {
+    if (!currentProject) {
+      logger.error('No project selected');
+      return;
+    }
+
+    isTransitioningRef.current = true;
+    try {
+      const api = getElectronAPI();
+      if (!api?.autoMode?.stop) {
+        throw new Error('Stop auto mode API not available');
+      }
+
+      const worktreeDesc = branchName ? `worktree ${branchName}` : 'main worktree';
+      logger.info(`[AutoMode] Stopping auto loop for ${worktreeDesc} in ${currentProject.path}`);
+
+      // Optimistically update UI state (backend will confirm via event)
+      setAutoModeSessionForWorktree(currentProject.path, branchName, false);
+      setAutoModeRunning(currentProject.id, branchName, false);
+
+      // Call backend to stop the auto loop
+      const result = await api.autoMode.stop(currentProject.path, branchName);
+
+      if (!result.success) {
+        // Revert UI state on failure
+        setAutoModeSessionForWorktree(currentProject.path, branchName, true);
+        setAutoModeRunning(currentProject.id, branchName, true);
+        logger.error('Failed to stop auto mode:', result.error);
+        throw new Error(result.error || 'Failed to stop auto mode');
+      }
+
+      // NOTE: Running tasks will continue until natural completion.
+      // The backend stops picking up new features but doesn't abort running ones.
+      logger.info(`Stopped ${worktreeDesc} - running tasks will continue`);
+      // Sync with backend after a short delay to confirm stopped state
+      setTimeout(() => void refreshStatus(), 500);
+    } catch (error) {
+      // Revert UI state on error
+      setAutoModeSessionForWorktree(currentProject.path, branchName, true);
+      setAutoModeRunning(currentProject.id, branchName, true);
+      logger.error('Error stopping auto mode:', error);
+      throw error;
+    } finally {
+      isTransitioningRef.current = false;
+    }
+  }, [currentProject, branchName, setAutoModeRunning, refreshStatus]);
+
+  // Restart auto mode with new concurrency without flickering the toggle.
+  // Unlike stop() + start(), this keeps isRunning=true throughout the transition
+  // so the toggle switch never visually turns off.
+  //
+  // IMPORTANT: isTransitioningRef is NOT cleared in the finally block here.
+  // Instead, it stays true until the auto_mode_started WebSocket event arrives,
+  // which confirms the backend restart is complete. This prevents a race condition
+  // where a delayed auto_mode_stopped WebSocket event (sent by the backend during
+  // stop()) arrives after the HTTP calls complete but before the WebSocket events,
+  // which would briefly set isRunning=false and cause a visible toggle flicker.
+  // A safety timeout ensures the flag is cleared even if the event never arrives.
+  const restartWithConcurrency = useCallback(async () => {
+    if (!currentProject) {
+      logger.error('No project selected');
+      return;
+    }
+
+    // Clear any previous safety timeout
+    if (restartSafetyTimeoutRef.current) {
+      clearTimeout(restartSafetyTimeoutRef.current);
+      restartSafetyTimeoutRef.current = null;
+    }
+
+    isTransitioningRef.current = true;
+    isRestartTransitionRef.current = true;
+    try {
+      const api = getElectronAPI();
+      if (!api?.autoMode?.stop || !api?.autoMode?.start) {
+        throw new Error('Auto mode API not available');
+      }
+
+      const worktreeDesc = branchName ? `worktree ${branchName}` : 'main worktree';
+      logger.info(
+        `[AutoMode] Restarting with new concurrency for ${worktreeDesc} in ${currentProject.path}`
+      );
+
+      // Stop backend without updating UI state (keep isRunning=true)
+      const stopResult = await api.autoMode.stop(currentProject.path, branchName);
+
+      if (!stopResult.success) {
+        logger.error('Failed to stop auto mode during restart:', stopResult.error);
+        // Don't throw - try to start anyway since the goal is to update concurrency
+      }
+
+      // Start backend with the new concurrency (UI state stays isRunning=true)
+      const currentMaxConcurrency = getMaxConcurrencyForWorktree(currentProject.id, branchName);
+      const startResult = await api.autoMode.start(
+        currentProject.path,
+        branchName,
+        currentMaxConcurrency
+      );
+
+      if (!startResult.success) {
+        // If start fails, we need to revert UI state since we're actually stopped now
+        isTransitioningRef.current = false;
+        isRestartTransitionRef.current = false;
+        setAutoModeSessionForWorktree(currentProject.path, branchName, false);
+        setAutoModeRunning(currentProject.id, branchName, false);
+        logger.error('Failed to restart auto mode with new concurrency:', startResult.error);
+        throw new Error(startResult.error || 'Failed to restart auto mode');
+      }
+
+      logger.debug(`[AutoMode] Restarted successfully for ${worktreeDesc}`);
+
+      // Don't clear isTransitioningRef here - let the auto_mode_started WebSocket
+      // event handler clear it. Set a safety timeout in case the event never arrives.
+      restartSafetyTimeoutRef.current = setTimeout(() => {
+        if (isRestartTransitionRef.current) {
+          logger.warn('[AutoMode] Restart transition safety timeout - clearing transition flag');
+          isTransitioningRef.current = false;
+          isRestartTransitionRef.current = false;
+          restartSafetyTimeoutRef.current = null;
+        }
+      }, 5000);
+    } catch (error) {
+      // On error, clear the transition flags immediately
+      isTransitioningRef.current = false;
+      isRestartTransitionRef.current = false;
+      // Revert UI state since the backend may be stopped after a partial restart
+      if (currentProject) {
+        setAutoModeSessionForWorktree(currentProject.path, branchName, false);
+        setAutoModeRunning(currentProject.id, branchName, false);
+      }
+      logger.error('Error restarting auto mode:', error);
+      throw error;
+    }
+  }, [currentProject, branchName, setAutoModeRunning, getMaxConcurrencyForWorktree]);
+
+  // Stop a specific feature
+  const stopFeature = useCallback(
+    async (featureId: string): Promise<boolean> => {
+      if (!currentProject) {
+        logger.error('No project selected');
+        return false;
+      }
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.autoMode?.stopFeature) {
+          throw new Error('Stop feature API not available');
+        }
+
+        const result = await api.autoMode.stopFeature(featureId);
+
+        if (result.success) {
+          removeRunningTask(currentProject.id, branchName, featureId);
+
+          logger.info('Feature stopped successfully:', featureId);
+          batchedAddAutoModeActivity({
+            featureId,
+            type: 'complete',
+            message: 'Feature stopped by user',
+            passes: false,
+          });
+          return true;
+        } else {
+          logger.error('Failed to stop feature:', result.error);
+          throw new Error(result.error || 'Failed to stop feature');
+        }
+      } catch (error) {
+        logger.error('Error stopping feature:', error);
+        throw error;
+      }
+    },
+    [currentProject, branchName, removeRunningTask, batchedAddAutoModeActivity]
+  );
+
+  return {
+    isRunning: isAutoModeRunning,
+    runningTasks: runningAutoTasks,
+    maxConcurrency,
+    canStartNewTask,
+    branchName,
+    start,
+    stop,
+    stopFeature,
+    restartWithConcurrency,
+    refreshStatus,
+  };
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-board-background-settings.ts b/temp_repo/apps/ui/src/hooks/use-board-background-settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cde4f4b5388b02f59a1121fbde20e0dac8cc7a59
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-board-background-settings.ts
@@ -0,0 +1,173 @@
+import { useCallback } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { useUpdateProjectSettings } from '@/hooks/mutations';
+
+/**
+ * Hook for managing board background settings with automatic persistence to server.
+ * Uses React Query mutation for server persistence with automatic error handling.
+ *
+ * For sliders, the modal uses local state during dragging and calls:
+ * - setCardOpacity/setColumnOpacity/setCardBorderOpacity to update store on commit
+ * - persistSettings directly to save to server on commit
+ */
+export function useBoardBackgroundSettings() {
+  const store = useAppStore();
+
+  // Get the mutation without a fixed project path - we'll pass it with each call
+  const updateProjectSettings = useUpdateProjectSettings();
+
+  // Helper to persist settings to server
+  const persistSettings = useCallback(
+    (projectPath: string, settingsToUpdate: Record<string, unknown>) => {
+      updateProjectSettings.mutate({
+        projectPath,
+        settings: { boardBackground: settingsToUpdate },
+      });
+    },
+    [updateProjectSettings]
+  );
+
+  // Get current background settings for a project
+  const getCurrentSettings = useCallback(
+    (projectPath: string) => {
+      const current = store.boardBackgroundByProject[projectPath];
+      return (
+        current || {
+          imagePath: null,
+          cardOpacity: 100,
+          columnOpacity: 100,
+          columnBorderEnabled: true,
+          cardGlassmorphism: true,
+          cardBorderEnabled: true,
+          cardBorderOpacity: 100,
+          hideScrollbar: false,
+        }
+      );
+    },
+    [store.boardBackgroundByProject]
+  );
+
+  // Persisting wrappers for store actions
+  const setBoardBackground = useCallback(
+    async (projectPath: string, imagePath: string | null) => {
+      // Get current settings first
+      const current = getCurrentSettings(projectPath);
+
+      // Prepare the updated settings
+      const toUpdate = {
+        ...current,
+        imagePath,
+        imageVersion: imagePath ? Date.now() : undefined,
+      };
+
+      // Update local store
+      store.setBoardBackground(projectPath, imagePath);
+
+      // Persist to server
+      await persistSettings(projectPath, toUpdate);
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  // Update store (called on slider commit to update the board view)
+  const setCardOpacity = useCallback(
+    (projectPath: string, opacity: number) => {
+      store.setCardOpacity(projectPath, opacity);
+    },
+    [store]
+  );
+
+  // Update store (called on slider commit to update the board view)
+  const setColumnOpacity = useCallback(
+    (projectPath: string, opacity: number) => {
+      store.setColumnOpacity(projectPath, opacity);
+    },
+    [store]
+  );
+
+  const setColumnBorderEnabled = useCallback(
+    async (projectPath: string, enabled: boolean) => {
+      const current = getCurrentSettings(projectPath);
+      store.setColumnBorderEnabled(projectPath, enabled);
+      await persistSettings(projectPath, {
+        ...current,
+        columnBorderEnabled: enabled,
+      });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setCardGlassmorphism = useCallback(
+    async (projectPath: string, enabled: boolean) => {
+      const current = getCurrentSettings(projectPath);
+      store.setCardGlassmorphism(projectPath, enabled);
+      await persistSettings(projectPath, {
+        ...current,
+        cardGlassmorphism: enabled,
+      });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setCardBorderEnabled = useCallback(
+    async (projectPath: string, enabled: boolean) => {
+      const current = getCurrentSettings(projectPath);
+      store.setCardBorderEnabled(projectPath, enabled);
+      await persistSettings(projectPath, {
+        ...current,
+        cardBorderEnabled: enabled,
+      });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  // Update store (called on slider commit to update the board view)
+  const setCardBorderOpacity = useCallback(
+    (projectPath: string, opacity: number) => {
+      store.setCardBorderOpacity(projectPath, opacity);
+    },
+    [store]
+  );
+
+  const setHideScrollbar = useCallback(
+    async (projectPath: string, hide: boolean) => {
+      const current = getCurrentSettings(projectPath);
+      store.setHideScrollbar(projectPath, hide);
+      await persistSettings(projectPath, { ...current, hideScrollbar: hide });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const clearBoardBackground = useCallback(
+    async (projectPath: string) => {
+      store.clearBoardBackground(projectPath);
+      // Clear the boardBackground settings
+      await persistSettings(projectPath, {
+        imagePath: null,
+        imageVersion: undefined,
+        cardOpacity: 100,
+        columnOpacity: 100,
+        columnBorderEnabled: true,
+        cardGlassmorphism: true,
+        cardBorderEnabled: true,
+        cardBorderOpacity: 100,
+        hideScrollbar: false,
+      });
+    },
+    [store, persistSettings]
+  );
+
+  return {
+    setBoardBackground,
+    setCardOpacity,
+    setColumnOpacity,
+    setColumnBorderEnabled,
+    setCardGlassmorphism,
+    setCardBorderEnabled,
+    setCardBorderOpacity,
+    setHideScrollbar,
+    clearBoardBackground,
+    getCurrentSettings,
+    persistSettings,
+  };
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-cursor-status-init.ts b/temp_repo/apps/ui/src/hooks/use-cursor-status-init.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a1100f2253bb9aff057fc4fb5da245ebdf0d9b04
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-cursor-status-init.ts
@@ -0,0 +1,55 @@
+import { useEffect, useRef } from 'react';
+import { useSetupStore } from '@/store/setup-store';
+import { getHttpApiClient } from '@/lib/http-api-client';
+
+/**
+ * Hook to initialize Cursor CLI status on app startup.
+ * This ensures the cursorCliStatus is available in the setup store
+ * before the user opens feature dialogs.
+ */
+export function useCursorStatusInit() {
+  // Use individual selectors instead of bare useSetupStore() to prevent
+  // re-rendering on every setup store mutation during initialization.
+  const setCursorCliStatus = useSetupStore((s) => s.setCursorCliStatus);
+  const initialized = useRef(false);
+
+  useEffect(() => {
+    // Only initialize once per session
+    if (initialized.current) {
+      return;
+    }
+    // Check current status at call time rather than via dependency to avoid
+    // re-renders when other setup store fields change during initialization.
+    const currentStatus = useSetupStore.getState().cursorCliStatus;
+    if (currentStatus !== null) {
+      initialized.current = true;
+      return;
+    }
+    initialized.current = true;
+
+    const initCursorStatus = async () => {
+      try {
+        const api = getHttpApiClient();
+        const statusResult = await api.setup.getCursorStatus();
+
+        if (statusResult.success) {
+          setCursorCliStatus({
+            installed: statusResult.installed ?? false,
+            version: statusResult.version ?? undefined,
+            auth: statusResult.auth?.authenticated
+              ? {
+                  authenticated: true,
+                  method: statusResult.auth.method || 'unknown',
+                }
+              : undefined,
+          });
+        }
+      } catch (error) {
+        // Silently fail - cursor is optional
+        console.debug('[CursorStatusInit] Failed to check cursor status:', error);
+      }
+    };
+
+    initCursorStatus();
+  }, [setCursorCliStatus]);
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-electron-agent.ts b/temp_repo/apps/ui/src/hooks/use-electron-agent.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b31050b766023eb12ae51eddbbb85dc3ee2ac040
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-electron-agent.ts
@@ -0,0 +1,624 @@
+// @ts-nocheck - Electron IPC boundary typing with stream events and message queuing
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { Message, StreamEvent } from '@/types/electron';
+import { useMessageQueue } from './use-message-queue';
+import type { ImageAttachment, TextFileAttachment } from '@/store/app-store';
+import { getElectronAPI } from '@/lib/electron';
+import { sanitizeFilename } from '@/lib/image-utils';
+import { createLogger } from '@automaker/utils/logger';
+
+const logger = createLogger('ElectronAgent');
+
+interface UseElectronAgentOptions {
+  sessionId: string;
+  workingDirectory?: string;
+  model?: string;
+  thinkingLevel?: string;
+  onToolUse?: (toolName: string, toolInput: unknown) => void;
+  onToolResult?: (toolName: string, result: unknown) => void;
+}
+
+// Server-side queued prompt type
+interface QueuedPrompt {
+  id: string;
+  message: string;
+  imagePaths?: string[];
+  model?: string;
+  thinkingLevel?: string;
+  addedAt: string;
+}
+
+interface UseElectronAgentResult {
+  messages: Message[];
+  isProcessing: boolean;
+  isConnected: boolean;
+  sendMessage: (
+    content: string,
+    images?: ImageAttachment[],
+    textFiles?: TextFileAttachment[]
+  ) => Promise<void>;
+  stopExecution: () => Promise<void>;
+  clearHistory: () => Promise<void>;
+  error: string | null;
+  // Client-side queue (local)
+  queuedMessages: {
+    id: string;
+    content: string;
+    images?: ImageAttachment[];
+    textFiles?: TextFileAttachment[];
+    timestamp: Date;
+  }[];
+  isQueueProcessing: boolean;
+  clearMessageQueue: () => void;
+  // Server-side queue (persistent, auto-runs)
+  serverQueue: QueuedPrompt[];
+  addToServerQueue: (
+    message: string,
+    images?: ImageAttachment[],
+    textFiles?: TextFileAttachment[]
+  ) => Promise<void>;
+  removeFromServerQueue: (promptId: string) => Promise<void>;
+  clearServerQueue: () => Promise<void>;
+}
+
+/**
+ * React hook for interacting with the Electron-based Claude agent
+ *
+ * This hook provides a clean interface to the agent running in the Electron
+ * main process, which survives Next.js restarts.
+ */
+export function useElectronAgent({
+  sessionId,
+  workingDirectory,
+  model,
+  thinkingLevel,
+  onToolUse,
+  onToolResult,
+}: UseElectronAgentOptions): UseElectronAgentResult {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isConnected, setIsConnected] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [serverQueue, setServerQueue] = useState<QueuedPrompt[]>([]);
+  const unsubscribeRef = useRef<(() => void) | null>(null);
+  const currentMessageRef = useRef<Message | null>(null);
+
+  // Send message directly to the agent (bypassing queue)
+  const sendMessageDirectly = useCallback(
+    async (content: string, images?: ImageAttachment[], textFiles?: TextFileAttachment[]) => {
+      const api = getElectronAPI();
+      if (!api?.agent) {
+        setError('API not available');
+        return;
+      }
+
+      if (isProcessing) {
+        throw new Error('Agent is already processing a message');
+      }
+
+      setIsProcessing(true);
+      setError(null);
+
+      try {
+        logger.info('Sending message directly', {
+          hasImages: images && images.length > 0,
+          imageCount: images?.length || 0,
+          hasTextFiles: textFiles && textFiles.length > 0,
+          textFileCount: textFiles?.length || 0,
+        });
+
+        // Build message content with text file context prepended
+        let messageContent = content;
+        if (textFiles && textFiles.length > 0) {
+          const contextParts = textFiles.map((file) => {
+            return `<file name="${file.filename}">\n${file.content}\n</file>`;
+          });
+          const contextBlock = `Here are some files for context:\n\n${contextParts.join('\n\n')}\n\n`;
+          messageContent = contextBlock + content;
+        }
+
+        // Save images to .automaker/images and get paths
+        let imagePaths: string[] | undefined;
+        if (images && images.length > 0 && api.saveImageToTemp) {
+          imagePaths = [];
+          for (const image of images) {
+            const result = await api.saveImageToTemp(
+              image.data,
+              sanitizeFilename(image.filename),
+              image.mimeType,
+              workingDirectory // Pass workingDirectory as projectPath
+            );
+            if (result.success && result.path) {
+              imagePaths.push(result.path);
+              logger.info('Saved image to .automaker/images:', result.path);
+            } else {
+              logger.error('Failed to save image:', result.error);
+            }
+          }
+        }
+
+        const result = await api.agent!.send(
+          sessionId,
+          messageContent,
+          workingDirectory,
+          imagePaths,
+          model,
+          thinkingLevel
+        );
+
+        if (!result.success) {
+          setError(result.error || 'Failed to send message');
+          setIsProcessing(false);
+        }
+        // Note: We don't set isProcessing to false here because
+        // it will be set by the "complete" or "error" stream event
+      } catch (err) {
+        logger.error('Failed to send message:', err);
+        setError(err instanceof Error ? err.message : 'Failed to send message');
+        setIsProcessing(false);
+        throw err;
+      }
+    },
+    [sessionId, workingDirectory, model, thinkingLevel, isProcessing]
+  );
+
+  // Message queue for queuing messages when agent is busy
+  const { queuedMessages, isProcessingQueue, clearQueue, processNext } = useMessageQueue({
+    onProcessNext: async (queuedMessage) => {
+      await sendMessageDirectly(
+        queuedMessage.content,
+        queuedMessage.images,
+        queuedMessage.textFiles
+      );
+    },
+  });
+
+  // Initialize connection and load history
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.agent) {
+      setError('API not available.');
+      return;
+    }
+
+    if (!sessionId) {
+      // No session selected - reset state
+      setMessages([]);
+      setIsConnected(false);
+      setIsProcessing(false);
+      setError(null);
+      return;
+    }
+
+    let mounted = true;
+
+    const initialize = async () => {
+      // Reset error state when switching sessions
+      setError(null);
+
+      try {
+        logger.info('Starting session:', sessionId);
+        const result = await api.agent!.start(sessionId, workingDirectory);
+
+        if (!mounted) return;
+
+        if (result.success && result.messages) {
+          logger.info('Loaded', result.messages.length, 'messages');
+          setMessages(result.messages);
+          setIsConnected(true);
+
+          // Check if the agent is currently running for this session
+          const historyResult = await api.agent!.getHistory(sessionId);
+          if (mounted && historyResult.success) {
+            const isRunning = historyResult.isRunning || false;
+            logger.info('Session running state:', isRunning);
+            setIsProcessing(isRunning);
+          }
+        } else {
+          setError(result.error || 'Failed to start session');
+          setIsProcessing(false);
+        }
+      } catch (err) {
+        if (!mounted) return;
+        logger.error('Failed to initialize:', err);
+        setError(err instanceof Error ? err.message : 'Failed to initialize');
+        setIsProcessing(false);
+      }
+    };
+
+    initialize();
+
+    return () => {
+      mounted = false;
+    };
+  }, [sessionId, workingDirectory]);
+
+  // Auto-process queue when agent finishes processing
+  useEffect(() => {
+    if (!isProcessing && !isProcessingQueue && queuedMessages.length > 0) {
+      logger.info('Auto-processing next queued message');
+      processNext();
+    }
+  }, [isProcessing, isProcessingQueue, queuedMessages.length, processNext]);
+
+  // Subscribe to streaming events
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.agent) return;
+    if (!sessionId) return; // Don't subscribe if no session
+
+    logger.info('Subscribing to stream events for session:', sessionId);
+
+    const handleStream = (event: StreamEvent) => {
+      // CRITICAL: Only process events for our specific session
+      if (event.sessionId !== sessionId) {
+        logger.info('Ignoring event for different session:', event.sessionId);
+        return;
+      }
+
+      logger.info('Stream event for', sessionId, ':', event.type);
+
+      switch (event.type) {
+        case 'started':
+          // Agent started processing (including from queue)
+          logger.info('Agent started processing for session:', sessionId);
+          setIsProcessing(true);
+          break;
+
+        case 'message':
+          // User message added
+          setMessages((prev) => [...prev, event.message]);
+          break;
+
+        case 'stream':
+          // Assistant message streaming
+          if (event.isComplete) {
+            // Final update
+            setMessages((prev) =>
+              prev.map((msg) =>
+                msg.id === event.messageId ? { ...msg, content: event.content } : msg
+              )
+            );
+            currentMessageRef.current = null;
+          } else {
+            // Streaming update
+            setMessages((prev) => {
+              const existingIndex = prev.findIndex((m) => m.id === event.messageId);
+              if (existingIndex >= 0) {
+                // Update existing message
+                return prev.map((msg) =>
+                  msg.id === event.messageId ? { ...msg, content: event.content } : msg
+                );
+              } else {
+                // Create new message
+                const newMessage: Message = {
+                  id: event.messageId,
+                  role: 'assistant',
+                  content: event.content,
+                  timestamp: new Date().toISOString(),
+                };
+                currentMessageRef.current = newMessage;
+                return [...prev, newMessage];
+              }
+            });
+          }
+          break;
+
+        case 'tool_use':
+          // Tool being used
+          logger.info('Tool use:', event.tool.name);
+          onToolUse?.(event.tool.name, event.tool.input);
+          break;
+
+        case 'tool_result':
+          // Tool completed - surface result via onToolResult callback
+          logger.info('Tool result:', event.tool.name);
+          onToolResult?.(event.tool.name, event.tool.input);
+          break;
+
+        case 'complete':
+          // Agent finished processing for THIS session
+          logger.info('Processing complete for session:', sessionId);
+          setIsProcessing(false);
+          if (event.messageId) {
+            setMessages((prev) =>
+              prev.map((msg) =>
+                msg.id === event.messageId ? { ...msg, content: event.content } : msg
+              )
+            );
+          }
+          break;
+
+        case 'error':
+          // Error occurred for THIS session
+          logger.error('Agent error for session:', sessionId, event.error);
+          setIsProcessing(false);
+          setError(event.error);
+          if (event.message) {
+            const errorMessage = event.message;
+            setMessages((prev) => [...prev, errorMessage]);
+          } else {
+            // Some providers stream an error without a message payload. Ensure the
+            // user still sees a clear error bubble in the chat.
+            const fallbackMessage: Message = {
+              id: `err_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+              role: 'assistant',
+              content: `Error: ${event.error}`,
+              timestamp: new Date().toISOString(),
+              isError: true,
+            };
+            setMessages((prev) => [...prev, fallbackMessage]);
+          }
+          break;
+
+        case 'queue_updated':
+          // Server queue was updated
+          logger.info('Queue updated:', event.queue);
+          setServerQueue(event.queue || []);
+          break;
+
+        case 'queue_error':
+          // Error processing a queued prompt
+          logger.error('Queue error:', event.error);
+          setError(event.error);
+          break;
+      }
+    };
+
+    unsubscribeRef.current = api.agent!.onStream(handleStream as (data: unknown) => void);
+
+    return () => {
+      if (unsubscribeRef.current) {
+        logger.info('Unsubscribing from stream events for session:', sessionId);
+        unsubscribeRef.current();
+        unsubscribeRef.current = null;
+      }
+    };
+  }, [sessionId, onToolUse, onToolResult]);
+
+  // Send a message to the agent
+  const sendMessage = useCallback(
+    async (content: string, images?: ImageAttachment[], textFiles?: TextFileAttachment[]) => {
+      const api = getElectronAPI();
+      if (!api?.agent) {
+        setError('API not available');
+        return;
+      }
+
+      if (isProcessing) {
+        logger.warn('Already processing a message');
+        return;
+      }
+
+      setIsProcessing(true);
+      setError(null);
+
+      try {
+        logger.info('Sending message', {
+          hasImages: images && images.length > 0,
+          imageCount: images?.length || 0,
+          hasTextFiles: textFiles && textFiles.length > 0,
+          textFileCount: textFiles?.length || 0,
+        });
+
+        // Build message content with text file context prepended
+        let messageContent = content;
+        if (textFiles && textFiles.length > 0) {
+          const contextParts = textFiles.map((file) => {
+            return `<file name="${file.filename}">\n${file.content}\n</file>`;
+          });
+          const contextBlock = `Here are some files for context:\n\n${contextParts.join('\n\n')}\n\n`;
+          messageContent = contextBlock + content;
+        }
+
+        // Save images to .automaker/images and get paths
+        let imagePaths: string[] | undefined;
+        if (images && images.length > 0 && api.saveImageToTemp) {
+          imagePaths = [];
+          for (const image of images) {
+            const result = await api.saveImageToTemp(
+              image.data,
+              sanitizeFilename(image.filename),
+              image.mimeType,
+              workingDirectory // Pass workingDirectory as projectPath
+            );
+            if (result.success && result.path) {
+              imagePaths.push(result.path);
+              logger.info('Saved image to .automaker/images:', result.path);
+            } else {
+              logger.error('Failed to save image:', result.error);
+            }
+          }
+        }
+
+        const result = await api.agent!.send(
+          sessionId,
+          messageContent,
+          workingDirectory,
+          imagePaths,
+          model,
+          thinkingLevel
+        );
+
+        if (!result.success) {
+          setError(result.error || 'Failed to send message');
+          setIsProcessing(false);
+        }
+        // Note: We don't set isProcessing to false here because
+        // it will be set by the "complete" or "error" stream event
+      } catch (err) {
+        logger.error('Failed to send message:', err);
+        setError(err instanceof Error ? err.message : 'Failed to send message');
+        setIsProcessing(false);
+      }
+    },
+    [sessionId, workingDirectory, model, thinkingLevel, isProcessing]
+  );
+
+  // Stop current execution
+  const stopExecution = useCallback(async () => {
+    const api = getElectronAPI();
+    if (!api?.agent) {
+      setError('API not available');
+      return;
+    }
+
+    try {
+      logger.info('Stopping execution');
+      const result = await api.agent!.stop(sessionId);
+
+      if (!result.success) {
+        setError(result.error || 'Failed to stop execution');
+      } else {
+        setIsProcessing(false);
+      }
+    } catch (err) {
+      logger.error('Failed to stop:', err);
+      setError(err instanceof Error ? err.message : 'Failed to stop execution');
+    }
+  }, [sessionId]);
+
+  // Clear conversation history
+  const clearHistory = useCallback(async () => {
+    const api = getElectronAPI();
+    if (!api?.agent) {
+      setError('API not available');
+      return;
+    }
+
+    try {
+      logger.info('Clearing history');
+      const result = await api.agent!.clear(sessionId);
+
+      if (result.success) {
+        setMessages([]);
+        setError(null);
+      } else {
+        setError(result.error || 'Failed to clear history');
+      }
+    } catch (err) {
+      logger.error('Failed to clear:', err);
+      setError(err instanceof Error ? err.message : 'Failed to clear history');
+    }
+  }, [sessionId]);
+
+  // Add a prompt to the server queue (will auto-run when current task finishes)
+  const addToServerQueue = useCallback(
+    async (message: string, images?: ImageAttachment[], textFiles?: TextFileAttachment[]) => {
+      const api = getElectronAPI();
+      if (!api?.agent?.queueAdd) {
+        setError('Queue API not available');
+        return;
+      }
+
+      try {
+        // Build message content with text file context
+        let messageContent = message;
+        if (textFiles && textFiles.length > 0) {
+          const contextParts = textFiles.map((file) => {
+            return `<file name="${file.filename}">\n${file.content}\n</file>`;
+          });
+          const contextBlock = `Here are some files for context:\n\n${contextParts.join('\n\n')}\n\n`;
+          messageContent = contextBlock + message;
+        }
+
+        // Save images and get paths
+        let imagePaths: string[] | undefined;
+        if (images && images.length > 0 && api.saveImageToTemp) {
+          imagePaths = [];
+          for (const image of images) {
+            const result = await api.saveImageToTemp(
+              image.data,
+              sanitizeFilename(image.filename),
+              image.mimeType,
+              workingDirectory
+            );
+            if (result.success && result.path) {
+              imagePaths.push(result.path);
+            }
+          }
+        }
+
+        logger.info('Adding to server queue');
+        const result = await api.agent.queueAdd(
+          sessionId,
+          messageContent,
+          imagePaths,
+          model,
+          thinkingLevel
+        );
+
+        if (!result.success) {
+          setError(result.error || 'Failed to add to queue');
+        }
+      } catch (err) {
+        logger.error('Failed to add to queue:', err);
+        setError(err instanceof Error ? err.message : 'Failed to add to queue');
+      }
+    },
+    [sessionId, workingDirectory, model, thinkingLevel]
+  );
+
+  // Remove a prompt from the server queue
+  const removeFromServerQueue = useCallback(
+    async (promptId: string) => {
+      const api = getElectronAPI();
+      if (!api?.agent?.queueRemove) {
+        setError('Queue API not available');
+        return;
+      }
+
+      try {
+        logger.info('Removing from server queue:', promptId);
+        const result = await api.agent.queueRemove(sessionId, promptId);
+
+        if (!result.success) {
+          setError(result.error || 'Failed to remove from queue');
+        }
+      } catch (err) {
+        logger.error('Failed to remove from queue:', err);
+        setError(err instanceof Error ? err.message : 'Failed to remove from queue');
+      }
+    },
+    [sessionId]
+  );
+
+  // Clear the entire server queue
+  const clearServerQueue = useCallback(async () => {
+    const api = getElectronAPI();
+    if (!api?.agent?.queueClear) {
+      setError('Queue API not available');
+      return;
+    }
+
+    try {
+      logger.info('Clearing server queue');
+      const result = await api.agent.queueClear(sessionId);
+
+      if (!result.success) {
+        setError(result.error || 'Failed to clear queue');
+      }
+    } catch (err) {
+      logger.error('Failed to clear queue:', err);
+      setError(err instanceof Error ? err.message : 'Failed to clear queue');
+    }
+  }, [sessionId]);
+
+  return {
+    messages,
+    isProcessing,
+    isConnected,
+    sendMessage,
+    stopExecution,
+    clearHistory,
+    error,
+    queuedMessages,
+    isQueueProcessing: isProcessingQueue,
+    clearMessageQueue: clearQueue,
+    // Server-side queue
+    serverQueue,
+    addToServerQueue,
+    removeFromServerQueue,
+    clearServerQueue,
+  };
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-event-recency.ts b/temp_repo/apps/ui/src/hooks/use-event-recency.ts
new file mode 100644
index 0000000000000000000000000000000000000000..41fefdc94402c5b1382dfc2805dfa2f5a235fc88
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-event-recency.ts
@@ -0,0 +1,191 @@
+/**
+ * Event Recency Hook
+ *
+ * Tracks the timestamp of the last WebSocket event received.
+ * Used to conditionally disable polling when events are flowing
+ * through WebSocket (indicating the connection is healthy).
+ *
+ * Mobile-aware: On mobile devices, the recency threshold is extended
+ * and polling intervals are multiplied to reduce battery drain and
+ * network usage while maintaining data freshness through WebSocket.
+ */
+
+import { useCallback } from 'react';
+import { create } from 'zustand';
+import { isMobileDevice, getMobilePollingMultiplier } from '@/lib/mobile-detect';
+
+/**
+ * Time threshold (ms) to consider events as "recent"
+ * If an event was received within this time, WebSocket is considered healthy
+ * and polling can be safely disabled.
+ *
+ * On mobile, the threshold is extended to 10 seconds since WebSocket
+ * connections on mobile may have higher latency and more jitter.
+ */
+export const EVENT_RECENCY_THRESHOLD = isMobileDevice ? 10000 : 5000;
+
+/**
+ * Store for tracking event timestamps per query key
+ * This allows fine-grained control over which queries have received recent events
+ */
+interface EventRecencyState {
+  /** Map of query key (stringified) -> last event timestamp */
+  eventTimestamps: Record<string, number>;
+  /** Global last event timestamp (for any event) */
+  lastGlobalEventTimestamp: number;
+  /** Record an event for a specific query key */
+  recordEvent: (queryKey: string) => void;
+  /** Record a global event (useful for general WebSocket health) */
+  recordGlobalEvent: () => void;
+  /** Check if events are recent for a specific query key */
+  areEventsRecent: (queryKey: string) => boolean;
+  /** Check if any global events are recent */
+  areGlobalEventsRecent: () => boolean;
+}
+
+export const useEventRecencyStore = create<EventRecencyState>((set, get) => ({
+  eventTimestamps: {},
+  lastGlobalEventTimestamp: 0,
+
+  recordEvent: (queryKey: string) => {
+    const now = Date.now();
+    set((state) => ({
+      eventTimestamps: {
+        ...state.eventTimestamps,
+        [queryKey]: now,
+      },
+      lastGlobalEventTimestamp: now,
+    }));
+  },
+
+  recordGlobalEvent: () => {
+    set({ lastGlobalEventTimestamp: Date.now() });
+  },
+
+  areEventsRecent: (queryKey: string) => {
+    const { eventTimestamps } = get();
+    const lastEventTime = eventTimestamps[queryKey];
+    if (!lastEventTime) return false;
+    return Date.now() - lastEventTime < EVENT_RECENCY_THRESHOLD;
+  },
+
+  areGlobalEventsRecent: () => {
+    const { lastGlobalEventTimestamp } = get();
+    if (!lastGlobalEventTimestamp) return false;
+    return Date.now() - lastGlobalEventTimestamp < EVENT_RECENCY_THRESHOLD;
+  },
+}));
+
+/**
+ * Hook to record event timestamps when WebSocket events are received.
+ * Should be called from WebSocket event handlers.
+ *
+ * @returns Functions to record events
+ *
+ * @example
+ * ```tsx
+ * const { recordEvent, recordGlobalEvent } = useEventRecorder();
+ *
+ * // In WebSocket event handler:
+ * api.autoMode.onEvent((event) => {
+ *   recordGlobalEvent();
+ *   if (event.featureId) {
+ *     recordEvent(`features:${event.featureId}`);
+ *   }
+ * });
+ * ```
+ */
+export function useEventRecorder() {
+  const recordEvent = useEventRecencyStore((state) => state.recordEvent);
+  const recordGlobalEvent = useEventRecencyStore((state) => state.recordGlobalEvent);
+
+  return { recordEvent, recordGlobalEvent };
+}
+
+/**
+ * Hook to check if WebSocket events are recent, used by queries
+ * to decide whether to enable/disable polling.
+ *
+ * @param queryKey - Optional specific query key to check
+ * @returns Object with recency check result and timestamp
+ *
+ * @example
+ * ```tsx
+ * const { areEventsRecent, areGlobalEventsRecent } = useEventRecency();
+ *
+ * // In query options:
+ * refetchInterval: areGlobalEventsRecent() ? false : 5000,
+ * ```
+ */
+export function useEventRecency(queryKey?: string) {
+  const areEventsRecent = useEventRecencyStore((state) => state.areEventsRecent);
+  const areGlobalEventsRecent = useEventRecencyStore((state) => state.areGlobalEventsRecent);
+  const lastGlobalEventTimestamp = useEventRecencyStore((state) => state.lastGlobalEventTimestamp);
+
+  const checkRecency = useCallback(
+    (key?: string) => {
+      if (key) {
+        return areEventsRecent(key);
+      }
+      return areGlobalEventsRecent();
+    },
+    [areEventsRecent, areGlobalEventsRecent]
+  );
+
+  return {
+    areEventsRecent: queryKey ? () => areEventsRecent(queryKey) : areEventsRecent,
+    areGlobalEventsRecent,
+    checkRecency,
+    lastGlobalEventTimestamp,
+  };
+}
+
+/**
+ * Utility function to create a refetchInterval that respects event recency.
+ * Returns false (no polling) if events are recent, otherwise returns the interval.
+ *
+ * On mobile, the interval is multiplied by getMobilePollingMultiplier() to reduce
+ * battery drain and network usage. This is safe because:
+ * - WebSocket invalidation handles real-time updates (features, agents, etc.)
+ * - The service worker caches API responses for instant display
+ * - Longer intervals mean fewer network round-trips on slow mobile connections
+ *
+ * @param defaultInterval - The polling interval to use when events aren't recent
+ * @returns A function suitable for React Query's refetchInterval option
+ *
+ * @example
+ * ```tsx
+ * const { data } = useQuery({
+ *   queryKey: ['features'],
+ *   queryFn: fetchFeatures,
+ *   refetchInterval: createSmartPollingInterval(5000),
+ * });
+ * ```
+ */
+export function createSmartPollingInterval(defaultInterval: number) {
+  const mobileAwareInterval = defaultInterval * getMobilePollingMultiplier();
+  return () => {
+    const { areGlobalEventsRecent } = useEventRecencyStore.getState();
+    return areGlobalEventsRecent() ? false : mobileAwareInterval;
+  };
+}
+
+/**
+ * Helper function to get current event recency state (for use outside React)
+ * Useful in query configurations where hooks can't be used directly.
+ *
+ * @returns Whether global events are recent
+ */
+export function getGlobalEventsRecent(): boolean {
+  return useEventRecencyStore.getState().areGlobalEventsRecent();
+}
+
+/**
+ * Helper function to get event recency for a specific query key (for use outside React)
+ *
+ * @param queryKey - The query key to check
+ * @returns Whether events for that query key are recent
+ */
+export function getEventsRecent(queryKey: string): boolean {
+  return useEventRecencyStore.getState().areEventsRecent(queryKey);
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-guided-prompts.ts b/temp_repo/apps/ui/src/hooks/use-guided-prompts.ts
new file mode 100644
index 0000000000000000000000000000000000000000..24244df3dfd8a8a976eebd48333d185e107883f2
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-guided-prompts.ts
@@ -0,0 +1,71 @@
+/**
+ * Hook for fetching guided prompts from the backend API
+ *
+ * This hook provides the single source of truth for guided prompts,
+ * with caching via React Query.
+ */
+
+import { useCallback, useMemo } from 'react';
+import type { IdeationPrompt, PromptCategory, IdeaCategory } from '@automaker/types';
+import { useIdeationPrompts } from '@/hooks/queries';
+
+interface UseGuidedPromptsReturn {
+  prompts: IdeationPrompt[];
+  categories: PromptCategory[];
+  isLoading: boolean;
+  error: string | null;
+  refetch: () => Promise<void>;
+  getPromptsByCategory: (category: IdeaCategory) => IdeationPrompt[];
+  getPromptById: (id: string) => IdeationPrompt | undefined;
+  getCategoryById: (id: IdeaCategory) => PromptCategory | undefined;
+}
+
+export function useGuidedPrompts(): UseGuidedPromptsReturn {
+  const { data, isLoading, error, refetch } = useIdeationPrompts();
+
+  const prompts = useMemo(() => data?.prompts ?? [], [data?.prompts]);
+  const categories = useMemo(() => data?.categories ?? [], [data?.categories]);
+
+  const getPromptsByCategory = useCallback(
+    (category: IdeaCategory): IdeationPrompt[] => {
+      return prompts.filter((p) => p.category === category);
+    },
+    [prompts]
+  );
+
+  const getPromptById = useCallback(
+    (id: string): IdeationPrompt | undefined => {
+      return prompts.find((p) => p.id === id);
+    },
+    [prompts]
+  );
+
+  const getCategoryById = useCallback(
+    (id: IdeaCategory): PromptCategory | undefined => {
+      return categories.find((c) => c.id === id);
+    },
+    [categories]
+  );
+
+  // Convert async refetch to match the expected interface
+  const handleRefetch = useCallback(async () => {
+    await refetch();
+  }, [refetch]);
+
+  // Convert error to string for backward compatibility
+  const errorMessage = useMemo(() => {
+    if (!error) return null;
+    return error instanceof Error ? error.message : String(error);
+  }, [error]);
+
+  return {
+    prompts,
+    categories,
+    isLoading,
+    error: errorMessage,
+    refetch: handleRefetch,
+    getPromptsByCategory,
+    getPromptById,
+    getCategoryById,
+  };
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-init-script-events.ts b/temp_repo/apps/ui/src/hooks/use-init-script-events.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aa51409fe4cc94086ea7a4abdd12564022a924bb
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-init-script-events.ts
@@ -0,0 +1,79 @@
+import { useEffect } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { pathsEqual } from '@/lib/utils';
+
+interface InitScriptStartedPayload {
+  projectPath: string;
+  worktreePath: string;
+  branch: string;
+}
+
+interface InitScriptOutputPayload {
+  projectPath: string;
+  branch: string;
+  type: 'stdout' | 'stderr';
+  content: string;
+}
+
+interface InitScriptCompletedPayload {
+  projectPath: string;
+  worktreePath: string;
+  branch: string;
+  success: boolean;
+  exitCode?: number;
+  error?: string;
+}
+
+/**
+ * Hook to subscribe to init script WebSocket events and update the store.
+ * Should be used in a component that's always mounted (e.g., board-view).
+ */
+export function useInitScriptEvents(projectPath: string | null) {
+  const setInitScriptState = useAppStore((s) => s.setInitScriptState);
+  const appendInitScriptOutput = useAppStore((s) => s.appendInitScriptOutput);
+
+  useEffect(() => {
+    if (!projectPath) return;
+
+    const api = getHttpApiClient();
+
+    const unsubscribe = api.worktree.onInitScriptEvent((event) => {
+      const payload = event.payload as
+        | InitScriptStartedPayload
+        | InitScriptOutputPayload
+        | InitScriptCompletedPayload;
+
+      // Only handle events for the current project (use pathsEqual for cross-platform path comparison)
+      if (!pathsEqual(payload.projectPath, projectPath)) return;
+
+      switch (event.type) {
+        case 'worktree:init-started': {
+          const startPayload = payload as InitScriptStartedPayload;
+          setInitScriptState(projectPath, startPayload.branch, {
+            status: 'running',
+            branch: startPayload.branch,
+            output: [],
+            error: undefined,
+          });
+          break;
+        }
+        case 'worktree:init-output': {
+          const outputPayload = payload as InitScriptOutputPayload;
+          appendInitScriptOutput(projectPath, outputPayload.branch, outputPayload.content);
+          break;
+        }
+        case 'worktree:init-completed': {
+          const completePayload = payload as InitScriptCompletedPayload;
+          setInitScriptState(projectPath, completePayload.branch, {
+            status: completePayload.success ? 'success' : 'failed',
+            error: completePayload.error,
+          });
+          break;
+        }
+      }
+    });
+
+    return unsubscribe;
+  }, [projectPath, setInitScriptState, appendInitScriptOutput]);
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-keyboard-shortcuts.ts b/temp_repo/apps/ui/src/hooks/use-keyboard-shortcuts.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ae3c130a120d1cf155425c3993e2b66f48f67edc
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-keyboard-shortcuts.ts
@@ -0,0 +1,254 @@
+import { useEffect, useCallback, useMemo } from 'react';
+import { useAppStore, parseShortcut, DEFAULT_KEYBOARD_SHORTCUTS } from '@/store/app-store';
+
+export interface KeyboardShortcut {
+  key: string; // Can be simple "K" or with modifiers "Shift+N", "Cmd+K"
+  action: () => void;
+  description?: string;
+}
+
+/**
+ * Check if the currently focused element is an input, textarea, or contenteditable element
+ * or if an autocomplete/typeahead dropdown is open
+ */
+function isInputFocused(): boolean {
+  const activeElement = document.activeElement;
+  if (!activeElement) return false;
+
+  // Check if it's a form input element
+  const tagName = activeElement.tagName.toLowerCase();
+  if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
+    return true;
+  }
+
+  // Check if it's a contenteditable element
+  if (activeElement.getAttribute('contenteditable') === 'true') {
+    return true;
+  }
+
+  // Check if it has a role of textbox or searchbox
+  const role = activeElement.getAttribute('role');
+  if (role === 'textbox' || role === 'searchbox' || role === 'combobox') {
+    return true;
+  }
+
+  // Check if focus is inside an xterm terminal (they use a hidden textarea)
+  const xtermContainer = activeElement.closest('.xterm');
+  if (xtermContainer) {
+    return true;
+  }
+
+  // Also check if any parent has data-terminal-container attribute
+  const terminalContainer = activeElement.closest('[data-terminal-container]');
+  if (terminalContainer) {
+    return true;
+  }
+
+  // Check for autocomplete/typeahead dropdowns being open
+  const autocompleteList = document.querySelector('[data-testid="category-autocomplete-list"]');
+  if (autocompleteList) {
+    return true;
+  }
+
+  // Check for any open dialogs
+  const dialog = document.querySelector('[role="dialog"][data-state="open"]');
+  if (dialog) {
+    return true;
+  }
+
+  // Check for project picker dropdown being open
+  const projectPickerDropdown = document.querySelector('[data-testid="project-picker-dropdown"]');
+  if (projectPickerDropdown) {
+    return true;
+  }
+
+  // Check for any open dropdown menus (Radix UI uses role="menu")
+  // This prevents shortcuts from firing when user is typing in dropdown filters
+  const dropdownMenu = document.querySelector('[role="menu"]');
+  if (dropdownMenu) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Convert a key character to its corresponding event.code
+ * This is used for keyboard-layout independent matching in terminals
+ */
+function keyToCode(key: string): string {
+  const upperKey = key.toUpperCase();
+
+  // Letters A-Z map to KeyA-KeyZ
+  if (/^[A-Z]$/.test(upperKey)) {
+    return `Key${upperKey}`;
+  }
+
+  // Numbers 0-9 on main row map to Digit0-Digit9
+  if (/^[0-9]$/.test(key)) {
+    return `Digit${key}`;
+  }
+
+  // Special key mappings
+  const specialMappings: Record<string, string> = {
+    '`': 'Backquote',
+    '~': 'Backquote',
+    '-': 'Minus',
+    _: 'Minus',
+    '=': 'Equal',
+    '+': 'Equal',
+    '[': 'BracketLeft',
+    '{': 'BracketLeft',
+    ']': 'BracketRight',
+    '}': 'BracketRight',
+    '\\': 'Backslash',
+    '|': 'Backslash',
+    ';': 'Semicolon',
+    ':': 'Semicolon',
+    "'": 'Quote',
+    '"': 'Quote',
+    ',': 'Comma',
+    '<': 'Comma',
+    '.': 'Period',
+    '>': 'Period',
+    '/': 'Slash',
+    '?': 'Slash',
+    ' ': 'Space',
+    Enter: 'Enter',
+    Tab: 'Tab',
+    Escape: 'Escape',
+    Backspace: 'Backspace',
+    Delete: 'Delete',
+    ArrowUp: 'ArrowUp',
+    ArrowDown: 'ArrowDown',
+    ArrowLeft: 'ArrowLeft',
+    ArrowRight: 'ArrowRight',
+  };
+
+  return specialMappings[key] || specialMappings[upperKey] || key;
+}
+
+/**
+ * Check if a keyboard event matches a shortcut definition using event.code
+ * This is keyboard-layout independent - useful for terminals where Alt+key
+ * combinations can produce special characters with event.key
+ */
+export function matchesShortcutWithCode(event: KeyboardEvent, shortcutStr: string): boolean {
+  const shortcut = parseShortcut(shortcutStr);
+  if (!shortcut.key) return false;
+
+  // Convert the shortcut key to event.code format
+  const expectedCode = keyToCode(shortcut.key);
+
+  // Check if the code matches
+  if (event.code !== expectedCode) {
+    return false;
+  }
+
+  // Check modifier keys
+  const cmdCtrlPressed = event.metaKey || event.ctrlKey;
+  const shiftPressed = event.shiftKey;
+  const altPressed = event.altKey;
+
+  // If shortcut requires cmdCtrl, it must be pressed
+  if (shortcut.cmdCtrl && !cmdCtrlPressed) return false;
+  // If shortcut doesn't require cmdCtrl, it shouldn't be pressed
+  if (!shortcut.cmdCtrl && cmdCtrlPressed) return false;
+
+  // If shortcut requires shift, it must be pressed
+  if (shortcut.shift && !shiftPressed) return false;
+  // If shortcut doesn't require shift, it shouldn't be pressed
+  if (!shortcut.shift && shiftPressed) return false;
+
+  // If shortcut requires alt, it must be pressed
+  if (shortcut.alt && !altPressed) return false;
+  // If shortcut doesn't require alt, it shouldn't be pressed
+  if (!shortcut.alt && altPressed) return false;
+
+  return true;
+}
+
+/**
+ * Check if a keyboard event matches a shortcut definition
+ */
+function matchesShortcut(event: KeyboardEvent, shortcutStr: string): boolean {
+  const shortcut = parseShortcut(shortcutStr);
+
+  // Check if the key matches (case-insensitive)
+  if (event.key.toLowerCase() !== shortcut.key.toLowerCase()) {
+    return false;
+  }
+
+  // Check modifier keys
+  const cmdCtrlPressed = event.metaKey || event.ctrlKey;
+  const shiftPressed = event.shiftKey;
+  const altPressed = event.altKey;
+
+  // If shortcut requires cmdCtrl, it must be pressed
+  if (shortcut.cmdCtrl && !cmdCtrlPressed) return false;
+  // If shortcut doesn't require cmdCtrl, it shouldn't be pressed
+  if (!shortcut.cmdCtrl && cmdCtrlPressed) return false;
+
+  // If shortcut requires shift, it must be pressed
+  if (shortcut.shift && !shiftPressed) return false;
+  // If shortcut doesn't require shift, it shouldn't be pressed
+  if (!shortcut.shift && shiftPressed) return false;
+
+  // If shortcut requires alt, it must be pressed
+  if (shortcut.alt && !altPressed) return false;
+  // If shortcut doesn't require alt, it shouldn't be pressed
+  if (!shortcut.alt && altPressed) return false;
+
+  return true;
+}
+
+/**
+ * Hook to manage keyboard shortcuts
+ * Shortcuts won't fire when user is typing in inputs, textareas, or when dialogs are open
+ * Supports modifier keys: Shift, Cmd/Ctrl, Alt/Option
+ */
+export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[]) {
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      // Don't trigger shortcuts when typing in inputs
+      if (isInputFocused()) {
+        return;
+      }
+
+      // Find matching shortcut
+      const matchingShortcut = shortcuts.find((shortcut) => matchesShortcut(event, shortcut.key));
+
+      if (matchingShortcut) {
+        event.preventDefault();
+        matchingShortcut.action();
+      }
+    },
+    [shortcuts]
+  );
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown]);
+}
+
+/**
+ * Hook to get current keyboard shortcuts from store
+ * This replaces the static constants and allows customization
+ * Merges with defaults to ensure new shortcuts are always available
+ */
+export function useKeyboardShortcutsConfig() {
+  const keyboardShortcuts = useAppStore((state) => state.keyboardShortcuts);
+
+  // Merge with defaults to ensure new shortcuts are available
+  // even if user's persisted state predates them
+  return useMemo(
+    () => ({
+      ...DEFAULT_KEYBOARD_SHORTCUTS,
+      ...keyboardShortcuts,
+    }),
+    [keyboardShortcuts]
+  );
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-media-query.ts b/temp_repo/apps/ui/src/hooks/use-media-query.ts
new file mode 100644
index 0000000000000000000000000000000000000000..deb01a5a0b7fc9d1cca5bb21fc5d8be3ec26b428
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-media-query.ts
@@ -0,0 +1,67 @@
+import { useState, useEffect, useRef } from 'react';
+
+/**
+ * Hook to detect if a media query matches
+ * @param query - The media query string (e.g., '(max-width: 768px)')
+ * @returns boolean indicating if the media query matches
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia(query).matches;
+  });
+
+  // Track if this is the initial mount to avoid redundant setMatches call
+  const isInitialMount = useRef(true);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const mediaQuery = window.matchMedia(query);
+    const handleChange = (e: MediaQueryListEvent) => {
+      setMatches(e.matches);
+    };
+
+    // Only sync state when query changes after initial mount
+    // (initial mount already has correct value from useState initializer)
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else {
+      setMatches(mediaQuery.matches);
+    }
+
+    // Listen for changes
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [query]);
+
+  return matches;
+}
+
+/**
+ * Hook to detect if the device is mobile (screen width <= 768px)
+ * @returns boolean indicating if the device is mobile
+ */
+export function useIsMobile(): boolean {
+  return useMediaQuery('(max-width: 768px)');
+}
+
+/**
+ * Hook to detect if the device is tablet or smaller (screen width <= 1024px)
+ * @returns boolean indicating if the device is tablet or smaller
+ */
+export function useIsTablet(): boolean {
+  return useMediaQuery('(max-width: 1024px)');
+}
+
+/**
+ * Hook to detect compact layout (screen width <= 1240px)
+ * Used for collapsing top bar controls into mobile menu
+ * @returns boolean indicating if compact layout should be used
+ */
+export function useIsCompact(): boolean {
+  return useMediaQuery('(max-width: 1240px)');
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-message-queue.ts b/temp_repo/apps/ui/src/hooks/use-message-queue.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a99c1fd5a135618722751fc93c6b1584f5ee7779
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-message-queue.ts
@@ -0,0 +1,93 @@
+import { useState, useCallback } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import type { ImageAttachment, TextFileAttachment } from '@/store/app-store';
+
+const logger = createLogger('MessageQueue');
+
+export interface QueuedMessage {
+  id: string;
+  content: string;
+  images?: ImageAttachment[];
+  textFiles?: TextFileAttachment[];
+  timestamp: Date;
+}
+
+interface UseMessageQueueOptions {
+  onProcessNext: (message: QueuedMessage) => Promise<void>;
+}
+
+interface UseMessageQueueResult {
+  queuedMessages: QueuedMessage[];
+  isProcessingQueue: boolean;
+  addToQueue: (
+    content: string,
+    images?: ImageAttachment[],
+    textFiles?: TextFileAttachment[]
+  ) => void;
+  clearQueue: () => void;
+  removeFromQueue: (messageId: string) => void;
+  processNext: () => Promise<void>;
+}
+
+/**
+ * React hook for managing a queue of messages to be sent to the agent
+ *
+ * This allows users to queue up multiple messages while one is being processed,
+ * improving the chat experience by removing blocking behavior.
+ */
+export function useMessageQueue({ onProcessNext }: UseMessageQueueOptions): UseMessageQueueResult {
+  const [queuedMessages, setQueuedMessages] = useState<QueuedMessage[]>([]);
+  const [isProcessingQueue, setIsProcessingQueue] = useState(false);
+
+  const addToQueue = useCallback(
+    (content: string, images?: ImageAttachment[], textFiles?: TextFileAttachment[]) => {
+      const queuedMessage: QueuedMessage = {
+        id: `queued-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        content: content.trim(),
+        images,
+        textFiles,
+        timestamp: new Date(),
+      };
+
+      setQueuedMessages((prev) => [...prev, queuedMessage]);
+    },
+    []
+  );
+
+  const removeFromQueue = useCallback((messageId: string) => {
+    setQueuedMessages((prev) => prev.filter((msg) => msg.id !== messageId));
+  }, []);
+
+  const clearQueue = useCallback(() => {
+    setQueuedMessages([]);
+  }, []);
+
+  const processNext = useCallback(async () => {
+    if (queuedMessages.length === 0 || isProcessingQueue) {
+      return;
+    }
+
+    const nextMessage = queuedMessages[0];
+    setIsProcessingQueue(true);
+
+    try {
+      await onProcessNext(nextMessage);
+      // Remove the processed message from queue
+      setQueuedMessages((prev) => prev.slice(1));
+    } catch (error) {
+      logger.error('Error processing queued message:', error);
+      // Keep the message in queue for retry or manual removal
+    } finally {
+      setIsProcessingQueue(false);
+    }
+  }, [queuedMessages, isProcessingQueue, onProcessNext]);
+
+  return {
+    queuedMessages,
+    isProcessingQueue,
+    addToQueue,
+    clearQueue,
+    removeFromQueue,
+    processNext,
+  };
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-mobile-visibility.ts b/temp_repo/apps/ui/src/hooks/use-mobile-visibility.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a6d6b3dbd705eed9031d02b71e7a186960aa6059
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-mobile-visibility.ts
@@ -0,0 +1,138 @@
+/**
+ * Mobile Visibility Hook
+ *
+ * Manages React Query's online/focus state based on page visibility
+ * to prevent unnecessary refetching when the mobile app is backgrounded.
+ *
+ * On mobile devices, switching to another app triggers:
+ * 1. visibilitychange → hidden (app goes to background)
+ * 2. visibilitychange → visible (app comes back)
+ *
+ * Without this hook, step 2 triggers refetchOnWindowFocus for ALL active queries,
+ * causing a "storm" of network requests that overwhelms the connection and causes
+ * blank screens, layout shifts, and perceived reloads.
+ *
+ * This hook:
+ * - Pauses polling intervals while the app is hidden on mobile
+ * - Delays query refetching by a short grace period when the app becomes visible again
+ * - Prevents the WebSocket reconnection from triggering immediate refetches
+ *
+ * Desktop behavior is unchanged - this hook is a no-op on non-mobile devices.
+ */
+
+import { useEffect } from 'react';
+import { focusManager, onlineManager } from '@tanstack/react-query';
+import { isMobileDevice } from '@/lib/mobile-detect';
+import { queryClient } from '@/lib/query-client';
+
+/**
+ * Grace period (ms) after the app becomes visible before allowing refetches.
+ * This prevents a burst of refetches when the user quickly switches back to the app.
+ * During this time, queries will use their cached data (which may be slightly stale
+ * but is far better than showing a blank screen or loading spinner).
+ */
+const VISIBILITY_GRACE_PERIOD = 1500;
+
+/**
+ * Hook to manage query behavior based on mobile page visibility.
+ *
+ * Call this once at the app root level (e.g., in App.tsx or __root.tsx).
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   useMobileVisibility();
+ *   return <RouterProvider router={router} />;
+ * }
+ * ```
+ */
+export function useMobileVisibility(): void {
+  useEffect(() => {
+    // No-op on desktop - default React Query behavior is fine
+    if (!isMobileDevice) return;
+
+    let graceTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        // App went to background - tell React Query we've lost focus
+        // This prevents any scheduled refetches from firing while backgrounded
+        focusManager.setFocused(false);
+      } else {
+        // App came back to foreground
+        // Wait a grace period before signaling focus to prevent refetch storms.
+        // During this time, the UI renders with cached data (no blank screen).
+        if (graceTimeout) clearTimeout(graceTimeout);
+        graceTimeout = setTimeout(() => {
+          focusManager.setFocused(true);
+          graceTimeout = null;
+        }, VISIBILITY_GRACE_PERIOD);
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      if (graceTimeout) clearTimeout(graceTimeout);
+      // Restore default focus management
+      focusManager.setFocused(undefined);
+    };
+  }, []);
+}
+
+/**
+ * Hook to pause online status during extended background periods on mobile.
+ * When the app has been in the background for more than the threshold,
+ * we mark it as "offline" to prevent React Query from refetching all queries
+ * at once when it comes back online. Instead, we let the WebSocket reconnect
+ * first and then gradually re-enable queries.
+ *
+ * Call this once at the app root level alongside useMobileVisibility.
+ */
+export function useMobileOnlineManager(): void {
+  useEffect(() => {
+    if (!isMobileDevice) return;
+
+    let backgroundTimestamp: number | null = null;
+    // If the app was backgrounded for more than 30 seconds, throttle reconnection
+    const BACKGROUND_THRESHOLD = 30 * 1000;
+
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        backgroundTimestamp = Date.now();
+      } else if (backgroundTimestamp) {
+        const backgroundDuration = Date.now() - backgroundTimestamp;
+        backgroundTimestamp = null;
+
+        if (backgroundDuration > BACKGROUND_THRESHOLD) {
+          // App was backgrounded for a long time.
+          // Briefly mark as offline to prevent all queries from refetching at once,
+          // then restore online status after a delay so queries refetch gradually.
+          //
+          // IMPORTANT: When online is restored, invalidate all stale queries.
+          // This fixes a race condition where WebSocket reconnects immediately
+          // and fires invalidations during the offline window — those invalidations
+          // are silently dropped by React Query because it thinks we're offline.
+          // By invalidating stale queries after going online, we catch any updates
+          // that were missed during the offline grace period.
+          onlineManager.setOnline(false);
+          setTimeout(() => {
+            onlineManager.setOnline(true);
+            // Re-invalidate all stale queries to catch any WebSocket events
+            // that were dropped during the offline grace period
+            queryClient.invalidateQueries({ stale: true });
+          }, 2000);
+        }
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      // Restore online status on cleanup
+      onlineManager.setOnline(true);
+    };
+  }, []);
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-multi-project-status.ts b/temp_repo/apps/ui/src/hooks/use-multi-project-status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2282ec7e504f6fb524b99c78be0e1c90ad528b97
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-multi-project-status.ts
@@ -0,0 +1,121 @@
+/**
+ * Hook for fetching multi-project overview data
+ *
+ * Provides real-time status across all projects for the unified dashboard.
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import type { MultiProjectOverview } from '@automaker/types';
+import { createLogger } from '@automaker/utils/logger';
+import {
+  getApiKey,
+  getSessionToken,
+  waitForApiKeyInit,
+  getServerUrlSync,
+} from '@/lib/http-api-client';
+
+const logger = createLogger('useMultiProjectStatus');
+
+interface UseMultiProjectStatusResult {
+  overview: MultiProjectOverview | null;
+  isLoading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+}
+
+/**
+ * Custom fetch function for projects overview
+ * Uses the same pattern as HttpApiClient for proper authentication
+ */
+async function fetchProjectsOverview(): Promise<MultiProjectOverview> {
+  // Ensure API key is initialized before making request (handles Electron/web mode timing)
+  await waitForApiKeyInit();
+
+  const serverUrl = getServerUrlSync();
+
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  };
+
+  // Electron mode: use API key
+  const apiKey = getApiKey();
+  if (apiKey) {
+    headers['X-API-Key'] = apiKey;
+  } else {
+    // Web mode: use session token if available
+    const sessionToken = getSessionToken();
+    if (sessionToken) {
+      headers['X-Session-Token'] = sessionToken;
+    }
+  }
+
+  const response = await fetch(`${serverUrl}/api/projects/overview`, {
+    method: 'GET',
+    headers,
+    credentials: 'include', // Include cookies for session auth
+    cache: 'no-store',
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData.error || `HTTP ${response.status}: ${response.statusText}`);
+  }
+
+  const data = await response.json();
+
+  if (!data.success) {
+    throw new Error(data.error || 'Failed to fetch project overview');
+  }
+
+  return {
+    projects: data.projects,
+    aggregate: data.aggregate,
+    recentActivity: data.recentActivity,
+    generatedAt: data.generatedAt,
+  };
+}
+
+/**
+ * Hook to fetch and manage multi-project overview data
+ *
+ * @param refreshInterval - Optional interval in ms to auto-refresh (default: 30000)
+ */
+export function useMultiProjectStatus(refreshInterval = 30000): UseMultiProjectStatusResult {
+  const [overview, setOverview] = useState<MultiProjectOverview | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      setError(null);
+      const data = await fetchProjectsOverview();
+      setOverview(data);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to fetch overview';
+      logger.error('Failed to fetch project overview:', err);
+      setError(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Initial fetch
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  // Auto-refresh interval
+  useEffect(() => {
+    if (refreshInterval <= 0) return;
+
+    const intervalId = setInterval(refresh, refreshInterval);
+    return () => clearInterval(intervalId);
+  }, [refresh, refreshInterval]);
+
+  return {
+    overview,
+    isLoading,
+    error,
+    refresh,
+  };
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-notification-events.ts b/temp_repo/apps/ui/src/hooks/use-notification-events.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5ac40d05440e18c453063d1d248c4578a2e6fbda
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-notification-events.ts
@@ -0,0 +1,78 @@
+/**
+ * Hook to subscribe to notification WebSocket events and update the store.
+ */
+
+import { useEffect } from 'react';
+import { useNotificationsStore } from '@/store/notifications-store';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { pathsEqual } from '@/lib/utils';
+import type { Notification } from '@automaker/types';
+
+/**
+ * Hook to subscribe to notification events and update the store.
+ * Should be used in a component that's always mounted when a project is open.
+ */
+export function useNotificationEvents(projectPath: string | null) {
+  const addNotification = useNotificationsStore((s) => s.addNotification);
+
+  useEffect(() => {
+    if (!projectPath) return;
+
+    const api = getHttpApiClient();
+
+    const unsubscribe = api.notifications.onNotificationCreated((notification: Notification) => {
+      // Only handle notifications for the current project
+      if (!pathsEqual(notification.projectPath, projectPath)) return;
+
+      addNotification(notification);
+    });
+
+    return unsubscribe;
+  }, [projectPath, addNotification]);
+}
+
+/**
+ * Hook to load notifications for a project.
+ * Should be called when switching projects or on initial load.
+ */
+export function useLoadNotifications(projectPath: string | null) {
+  const setNotifications = useNotificationsStore((s) => s.setNotifications);
+  const setUnreadCount = useNotificationsStore((s) => s.setUnreadCount);
+  const setLoading = useNotificationsStore((s) => s.setLoading);
+  const setError = useNotificationsStore((s) => s.setError);
+  const reset = useNotificationsStore((s) => s.reset);
+
+  useEffect(() => {
+    if (!projectPath) {
+      reset();
+      return;
+    }
+
+    const loadNotifications = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const api = getHttpApiClient();
+        const [listResult, countResult] = await Promise.all([
+          api.notifications.list(projectPath),
+          api.notifications.getUnreadCount(projectPath),
+        ]);
+
+        if (listResult.success && listResult.notifications) {
+          setNotifications(listResult.notifications);
+        }
+
+        if (countResult.success && countResult.count !== undefined) {
+          setUnreadCount(countResult.count);
+        }
+      } catch (error) {
+        setError(error instanceof Error ? error.message : 'Failed to load notifications');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadNotifications();
+  }, [projectPath, setNotifications, setUnreadCount, setLoading, setError, reset]);
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-os-detection.ts b/temp_repo/apps/ui/src/hooks/use-os-detection.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7f0282a7ef5d938d9294ceeba11e810df5916a62
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-os-detection.ts
@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+
+export type OperatingSystem = 'mac' | 'windows' | 'linux' | 'unknown';
+
+export interface OSDetectionResult {
+  readonly os: OperatingSystem;
+  readonly isMac: boolean;
+  readonly isWindows: boolean;
+  readonly isLinux: boolean;
+}
+
+function detectOS(): OperatingSystem {
+  // Check Electron's exposed platform first (via preload contextBridge)
+  if (typeof window !== 'undefined' && window.electronAPI?.platform) {
+    const platform = window.electronAPI.platform;
+    if (platform === 'darwin') return 'mac';
+    if (platform === 'win32') return 'windows';
+    if (platform === 'linux') return 'linux';
+  }
+
+  if (typeof navigator === 'undefined') {
+    return 'unknown';
+  }
+
+  // Fallback: use modern userAgentData API with fallback to navigator.platform
+  const nav = navigator as Navigator & { userAgentData?: { platform: string } };
+  const platform = (nav.userAgentData?.platform ?? navigator.platform ?? '').toLowerCase();
+
+  if (platform.includes('mac')) return 'mac';
+  if (platform.includes('win')) return 'windows';
+  if (platform.includes('linux') || platform.includes('x11')) return 'linux';
+  return 'unknown';
+}
+
+/**
+ * Hook to detect the user's operating system.
+ * Returns OS information and convenience boolean flags.
+ */
+export function useOSDetection(): OSDetectionResult {
+  return useMemo(() => {
+    const os = detectOS();
+    return {
+      os,
+      isMac: os === 'mac',
+      isWindows: os === 'windows',
+      isLinux: os === 'linux',
+    };
+  }, []);
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-project-settings-loader.ts b/temp_repo/apps/ui/src/hooks/use-project-settings-loader.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e07051cc999bfb6718f129d899afa663122e1f32
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-project-settings-loader.ts
@@ -0,0 +1,197 @@
+import { useEffect, useRef } from 'react';
+import { useAppStore } from '@/store/app-store';
+import { useProjectSettings } from '@/hooks/queries';
+
+/**
+ * Hook that loads project settings from the server when the current project changes.
+ * This ensures that settings like board backgrounds are properly restored when
+ * switching between projects or restarting the app.
+ *
+ * Uses React Query for data fetching with automatic caching.
+ */
+export function useProjectSettingsLoader() {
+  const currentProject = useAppStore((state) => state.currentProject);
+  const setBoardBackground = useAppStore((state) => state.setBoardBackground);
+  const setCardOpacity = useAppStore((state) => state.setCardOpacity);
+  const setColumnOpacity = useAppStore((state) => state.setColumnOpacity);
+  const setColumnBorderEnabled = useAppStore((state) => state.setColumnBorderEnabled);
+  const setCardGlassmorphism = useAppStore((state) => state.setCardGlassmorphism);
+  const setCardBorderEnabled = useAppStore((state) => state.setCardBorderEnabled);
+  const setCardBorderOpacity = useAppStore((state) => state.setCardBorderOpacity);
+  const setHideScrollbar = useAppStore((state) => state.setHideScrollbar);
+  const setWorktreePanelVisible = useAppStore((state) => state.setWorktreePanelVisible);
+  const setShowInitScriptIndicator = useAppStore((state) => state.setShowInitScriptIndicator);
+  const setDefaultDeleteBranch = useAppStore((state) => state.setDefaultDeleteBranch);
+  const setAutoDismissInitScriptIndicator = useAppStore(
+    (state) => state.setAutoDismissInitScriptIndicator
+  );
+  const setWorktreeCopyFiles = useAppStore((state) => state.setWorktreeCopyFiles);
+  const setProjectUseWorktrees = useAppStore((state) => state.setProjectUseWorktrees);
+  const setPinnedWorktreesCount = useAppStore((state) => state.setPinnedWorktreesCount);
+  const setWorktreeDropdownThreshold = useAppStore((state) => state.setWorktreeDropdownThreshold);
+  const setAlwaysUseWorktreeDropdown = useAppStore((state) => state.setAlwaysUseWorktreeDropdown);
+
+  const appliedProjectRef = useRef<{ path: string; dataUpdatedAt: number } | null>(null);
+
+  // Fetch project settings with React Query
+  const { data: settings, dataUpdatedAt } = useProjectSettings(currentProject?.path);
+
+  // Apply settings when data changes
+  useEffect(() => {
+    if (!currentProject?.path || !settings) {
+      return;
+    }
+
+    // Prevent applying the same settings multiple times
+    if (
+      appliedProjectRef.current?.path === currentProject.path &&
+      appliedProjectRef.current?.dataUpdatedAt === dataUpdatedAt
+    ) {
+      return;
+    }
+
+    appliedProjectRef.current = { path: currentProject.path, dataUpdatedAt };
+    const projectPath = currentProject.path;
+
+    const bg = settings.boardBackground;
+
+    // Apply boardBackground if present
+    if (bg?.imagePath) {
+      setBoardBackground(projectPath, bg.imagePath);
+    }
+
+    // Settings map for cleaner iteration
+    const settingsMap = {
+      cardOpacity: setCardOpacity,
+      columnOpacity: setColumnOpacity,
+      columnBorderEnabled: setColumnBorderEnabled,
+      cardGlassmorphism: setCardGlassmorphism,
+      cardBorderEnabled: setCardBorderEnabled,
+      cardBorderOpacity: setCardBorderOpacity,
+      hideScrollbar: setHideScrollbar,
+    } as const;
+
+    // Apply all settings that are defined
+    for (const [key, setter] of Object.entries(settingsMap)) {
+      const value = bg?.[key as keyof typeof bg];
+      if (value !== undefined) {
+        (setter as (path: string, val: typeof value) => void)(projectPath, value);
+      }
+    }
+
+    // Apply worktreePanelVisible if present
+    if (settings.worktreePanelVisible !== undefined) {
+      setWorktreePanelVisible(projectPath, settings.worktreePanelVisible);
+    }
+
+    // Apply showInitScriptIndicator if present
+    if (settings.showInitScriptIndicator !== undefined) {
+      setShowInitScriptIndicator(projectPath, settings.showInitScriptIndicator);
+    }
+
+    // Apply defaultDeleteBranchWithWorktree if present
+    if (settings.defaultDeleteBranchWithWorktree !== undefined) {
+      setDefaultDeleteBranch(projectPath, settings.defaultDeleteBranchWithWorktree);
+    }
+
+    // Apply autoDismissInitScriptIndicator if present
+    if (settings.autoDismissInitScriptIndicator !== undefined) {
+      setAutoDismissInitScriptIndicator(projectPath, settings.autoDismissInitScriptIndicator);
+    }
+
+    // Apply worktreeCopyFiles if present
+    if (settings.worktreeCopyFiles !== undefined) {
+      setWorktreeCopyFiles(projectPath, settings.worktreeCopyFiles);
+    }
+
+    // Apply useWorktrees if present
+    if (settings.useWorktrees !== undefined) {
+      setProjectUseWorktrees(projectPath, settings.useWorktrees);
+    }
+
+    // Apply worktree display settings if present
+    if (settings.pinnedWorktreesCount !== undefined) {
+      setPinnedWorktreesCount(projectPath, settings.pinnedWorktreesCount);
+    }
+
+    if (settings.worktreeDropdownThreshold !== undefined) {
+      setWorktreeDropdownThreshold(projectPath, settings.worktreeDropdownThreshold);
+    }
+
+    if (settings.alwaysUseWorktreeDropdown !== undefined) {
+      setAlwaysUseWorktreeDropdown(projectPath, settings.alwaysUseWorktreeDropdown);
+    }
+
+    // Apply activeClaudeApiProfileId and phaseModelOverrides if present
+    // These are stored directly on the project, so we need to update both
+    // currentProject AND the projects array to keep them in sync
+    // Type assertion needed because API returns Record<string, unknown>
+    const settingsWithExtras = settings as unknown as Record<string, unknown>;
+    const activeClaudeApiProfileId = settingsWithExtras.activeClaudeApiProfileId as
+      | string
+      | null
+      | undefined;
+    const phaseModelOverrides = settingsWithExtras.phaseModelOverrides as
+      | import('@automaker/types').PhaseModelConfig
+      | undefined;
+
+    // Check if we need to update the project
+    const storeState = useAppStore.getState();
+    // snapshotProject is the store's current value at this point in time;
+    // it is distinct from updatedProjectData which is the new value we build below.
+    const snapshotProject = storeState.currentProject;
+    if (snapshotProject && snapshotProject.path === projectPath) {
+      const needsUpdate =
+        (activeClaudeApiProfileId !== undefined &&
+          snapshotProject.activeClaudeApiProfileId !== activeClaudeApiProfileId) ||
+        (phaseModelOverrides !== undefined &&
+          JSON.stringify(snapshotProject.phaseModelOverrides) !==
+            JSON.stringify(phaseModelOverrides));
+
+      if (needsUpdate) {
+        const updatedProjectData = {
+          ...snapshotProject,
+          ...(activeClaudeApiProfileId !== undefined && { activeClaudeApiProfileId }),
+          ...(phaseModelOverrides !== undefined && { phaseModelOverrides }),
+        };
+
+        // Update both currentProject and projects array in a single setState call
+        // to avoid two separate re-renders that can cascade during initialization
+        // and contribute to React error #185 (maximum update depth exceeded).
+        const updatedProjects = storeState.projects.map((p) =>
+          p.id === snapshotProject.id ? updatedProjectData : p
+        );
+        // NOTE: Intentionally bypasses setCurrentProject() to avoid a second
+        // render cycle that can trigger React error #185 (maximum update depth
+        // exceeded). This means persistEffectiveThemeForProject() is skipped,
+        // which is safe because only activeClaudeApiProfileId and
+        // phaseModelOverrides are mutated here — not the project theme.
+        useAppStore.setState({
+          currentProject: updatedProjectData,
+          projects: updatedProjects,
+        });
+      }
+    }
+  }, [
+    currentProject?.path,
+    settings,
+    dataUpdatedAt,
+    setBoardBackground,
+    setCardOpacity,
+    setColumnOpacity,
+    setColumnBorderEnabled,
+    setCardGlassmorphism,
+    setCardBorderEnabled,
+    setCardBorderOpacity,
+    setHideScrollbar,
+    setWorktreePanelVisible,
+    setShowInitScriptIndicator,
+    setDefaultDeleteBranch,
+    setAutoDismissInitScriptIndicator,
+    setWorktreeCopyFiles,
+    setProjectUseWorktrees,
+    setPinnedWorktreesCount,
+    setWorktreeDropdownThreshold,
+    setAlwaysUseWorktreeDropdown,
+  ]);
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-provider-auth-init.ts b/temp_repo/apps/ui/src/hooks/use-provider-auth-init.ts
new file mode 100644
index 0000000000000000000000000000000000000000..04b8a743eab7aff24313cbec2522cf000061e2ca
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-provider-auth-init.ts
@@ -0,0 +1,226 @@
+import { useEffect, useRef, useCallback } from 'react';
+import {
+  useSetupStore,
+  type ClaudeAuthMethod,
+  type CodexAuthMethod,
+  type ZaiAuthMethod,
+} from '@/store/setup-store';
+import type { GeminiAuthStatus } from '@automaker/types';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { createLogger } from '@automaker/utils/logger';
+
+const logger = createLogger('ProviderAuthInit');
+
+/**
+ * Hook to initialize Claude, Codex, z.ai, and Gemini authentication statuses on app startup.
+ * This ensures that usage tracking information is available in the board header
+ * without needing to visit the settings page first.
+ */
+export function useProviderAuthInit() {
+  // IMPORTANT: Use individual selectors instead of bare useSetupStore() to prevent
+  // re-rendering on every setup store mutation. The bare call subscribes to the ENTIRE
+  // store, which during initialization causes cascading re-renders as multiple status
+  // setters fire in rapid succession. With enough rapid mutations, React hits the
+  // maximum update depth limit (error #185).
+  const setClaudeAuthStatus = useSetupStore((s) => s.setClaudeAuthStatus);
+  const setCodexAuthStatus = useSetupStore((s) => s.setCodexAuthStatus);
+  const setZaiAuthStatus = useSetupStore((s) => s.setZaiAuthStatus);
+  const setGeminiCliStatus = useSetupStore((s) => s.setGeminiCliStatus);
+  const setGeminiAuthStatus = useSetupStore((s) => s.setGeminiAuthStatus);
+  const initialized = useRef(false);
+
+  const refreshStatuses = useCallback(async () => {
+    const api = getHttpApiClient();
+
+    // 1. Claude Auth Status
+    try {
+      const result = await api.setup.getClaudeStatus();
+      if (result.success && result.auth) {
+        // Cast to extended type that includes server-added fields
+        const auth = result.auth as typeof result.auth & {
+          oauthTokenValid?: boolean;
+          apiKeyValid?: boolean;
+        };
+
+        const validMethods: ClaudeAuthMethod[] = [
+          'oauth_token_env',
+          'oauth_token',
+          'api_key',
+          'api_key_env',
+          'credentials_file',
+          'cli_authenticated',
+          'none',
+        ];
+
+        const method = validMethods.includes(auth.method as ClaudeAuthMethod)
+          ? (auth.method as ClaudeAuthMethod)
+          : ((auth.authenticated ? 'api_key' : 'none') as ClaudeAuthMethod);
+
+        setClaudeAuthStatus({
+          authenticated: auth.authenticated,
+          method,
+          hasCredentialsFile: auth.hasCredentialsFile ?? false,
+          oauthTokenValid: !!(
+            auth.oauthTokenValid ||
+            auth.hasStoredOAuthToken ||
+            auth.hasEnvOAuthToken
+          ),
+          apiKeyValid: !!(auth.apiKeyValid || auth.hasStoredApiKey || auth.hasEnvApiKey),
+          hasEnvOAuthToken: !!auth.hasEnvOAuthToken,
+          hasEnvApiKey: !!auth.hasEnvApiKey,
+        });
+      }
+    } catch (error) {
+      logger.error('Failed to init Claude auth status:', error);
+    }
+
+    // 2. Codex Auth Status
+    try {
+      const result = await api.setup.getCodexStatus();
+      if (result.success && result.auth) {
+        const auth = result.auth;
+
+        const validMethods: CodexAuthMethod[] = [
+          'api_key_env',
+          'api_key',
+          'cli_authenticated',
+          'none',
+        ];
+
+        const method = validMethods.includes(auth.method as CodexAuthMethod)
+          ? (auth.method as CodexAuthMethod)
+          : ((auth.authenticated ? 'api_key' : 'none') as CodexAuthMethod);
+
+        setCodexAuthStatus({
+          authenticated: auth.authenticated,
+          method,
+          hasAuthFile: auth.hasAuthFile ?? false,
+          hasApiKey: auth.hasApiKey ?? false,
+          hasEnvApiKey: auth.hasEnvApiKey ?? false,
+        });
+      }
+    } catch (error) {
+      logger.error('Failed to init Codex auth status:', error);
+    }
+
+    // 3. z.ai Auth Status
+    try {
+      const result = await api.zai.getStatus();
+      if (result.success || result.available !== undefined) {
+        const available = !!result.available;
+        const hasApiKey = !!(result.hasApiKey ?? result.available);
+        const hasEnvApiKey = !!(result.hasEnvApiKey ?? false);
+
+        let method: ZaiAuthMethod = 'none';
+        if (hasEnvApiKey) {
+          method = 'api_key_env';
+        } else if (hasApiKey || available) {
+          method = 'api_key';
+        }
+
+        setZaiAuthStatus({
+          authenticated: available,
+          method,
+          hasApiKey,
+          hasEnvApiKey,
+        });
+      } else {
+        // Non-success path - set default unauthenticated status
+        setZaiAuthStatus({
+          authenticated: false,
+          method: 'none',
+          hasApiKey: false,
+          hasEnvApiKey: false,
+        });
+      }
+    } catch (error) {
+      logger.error('Failed to init z.ai auth status:', error);
+      // Set default status on error to prevent stale state
+      setZaiAuthStatus({
+        authenticated: false,
+        method: 'none',
+        hasApiKey: false,
+        hasEnvApiKey: false,
+      });
+    }
+
+    // 4. Gemini Auth Status
+    try {
+      const result = await api.setup.getGeminiStatus();
+
+      // Always set CLI status if any CLI info is available
+      if (
+        result.installed !== undefined ||
+        result.version !== undefined ||
+        result.path !== undefined
+      ) {
+        setGeminiCliStatus({
+          installed: result.installed ?? false,
+          version: result.version,
+          path: result.path,
+        });
+      }
+
+      // Always set auth status regardless of result.success
+      if (result.success && result.auth) {
+        const auth = result.auth;
+        const validMethods: GeminiAuthStatus['method'][] = [
+          'google_login',
+          'api_key',
+          'vertex_ai',
+          'none',
+        ];
+
+        const method = validMethods.includes(auth.method as GeminiAuthStatus['method'])
+          ? (auth.method as GeminiAuthStatus['method'])
+          : ((auth.authenticated ? 'google_login' : 'none') as GeminiAuthStatus['method']);
+
+        setGeminiAuthStatus({
+          authenticated: auth.authenticated,
+          method,
+          hasApiKey: auth.hasApiKey ?? false,
+          hasEnvApiKey: auth.hasEnvApiKey ?? false,
+        });
+      } else {
+        // result.success is false or result.auth is missing — set default unauthenticated status
+        setGeminiAuthStatus({
+          authenticated: false,
+          method: 'none',
+          hasApiKey: false,
+          hasEnvApiKey: false,
+        });
+      }
+    } catch (error) {
+      logger.error('Failed to init Gemini auth status:', error);
+      // Set default status on error to prevent infinite retries
+      setGeminiAuthStatus({
+        authenticated: false,
+        method: 'none',
+        hasApiKey: false,
+        hasEnvApiKey: false,
+      });
+    }
+  }, [
+    setClaudeAuthStatus,
+    setCodexAuthStatus,
+    setZaiAuthStatus,
+    setGeminiCliStatus,
+    setGeminiAuthStatus,
+  ]);
+
+  useEffect(() => {
+    // Skip if already initialized in this session
+    if (initialized.current) {
+      return;
+    }
+    initialized.current = true;
+
+    // Always call refreshStatuses() to background re-validate on app restart,
+    // even when statuses are pre-populated from persisted storage (cache case).
+    void refreshStatuses();
+    // Only depend on the callback ref. The status values were previously included
+    // but they are outputs of refreshStatuses(), not inputs — including them caused
+    // cascading re-renders during initialization that triggered React error #185
+    // (maximum update depth exceeded) on first run.
+  }, [refreshStatuses]);
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-query-invalidation.ts b/temp_repo/apps/ui/src/hooks/use-query-invalidation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2876d7cc0a6584bd879a0dda8bec4960822eb789
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-query-invalidation.ts
@@ -0,0 +1,392 @@
+/**
+ * Query Invalidation Hooks
+ *
+ * These hooks connect WebSocket events to React Query cache invalidation,
+ * ensuring the UI stays in sync with server-side changes without manual refetching.
+ */
+
+import { useEffect, useRef } from 'react';
+import { useQueryClient, QueryClient } from '@tanstack/react-query';
+import { getElectronAPI } from '@/lib/electron';
+import { queryKeys } from '@/lib/query-keys';
+import type { AutoModeEvent, SpecRegenerationEvent, StreamEvent } from '@/types/electron';
+import type { IssueValidationEvent } from '@automaker/types';
+import { debounce, type DebouncedFunction } from '@automaker/utils/debounce';
+import { useEventRecencyStore } from './use-event-recency';
+import { isAnyFeatureTransitioning } from '@/lib/feature-transition-state';
+
+/**
+ * Debounce configuration for auto_mode_progress invalidations
+ * - wait: 150ms delay to batch rapid consecutive progress events
+ * - maxWait: 2000ms ensures UI updates at least every 2 seconds during streaming
+ */
+const PROGRESS_DEBOUNCE_WAIT = 150;
+const PROGRESS_DEBOUNCE_MAX_WAIT = 2000;
+
+/**
+ * Events that should invalidate the feature list (features.all query)
+ * Note: pipeline_step_started is included to ensure Kanban board immediately reflects
+ * feature moving to custom pipeline columns (fixes GitHub issue #668)
+ */
+const FEATURE_LIST_INVALIDATION_EVENTS: AutoModeEvent['type'][] = [
+  'auto_mode_feature_start',
+  'auto_mode_feature_complete',
+  'auto_mode_error',
+  // NOTE: auto_mode_started and auto_mode_stopped are intentionally excluded.
+  // These events signal auto-loop state changes, NOT feature data changes.
+  // Including them caused unnecessary refetches that raced with optimistic
+  // updates during start/stop cycles, triggering React error #185 on mobile.
+  'plan_approval_required',
+  'plan_approved',
+  'plan_rejected',
+  'pipeline_step_started',
+  'pipeline_step_complete',
+  'feature_status_changed',
+  'features_reconciled',
+];
+
+/**
+ * Events that should invalidate a specific feature (features.single query)
+ * Note: auto_mode_feature_start and pipeline_step_started are NOT included here
+ * because they already invalidate features.all() above, which also invalidates
+ * child queries (features.single)
+ */
+const SINGLE_FEATURE_INVALIDATION_EVENTS: AutoModeEvent['type'][] = [
+  'auto_mode_phase',
+  'auto_mode_phase_complete',
+  'auto_mode_task_status',
+  'auto_mode_task_started',
+  'auto_mode_task_complete',
+  'auto_mode_summary',
+];
+
+/**
+ * Events that should invalidate running agents status
+ */
+const RUNNING_AGENTS_INVALIDATION_EVENTS: AutoModeEvent['type'][] = [
+  'auto_mode_feature_start',
+  'auto_mode_feature_complete',
+  'auto_mode_error',
+  'auto_mode_resuming_features',
+];
+
+/**
+ * Events that signal a feature is done and debounce cleanup should occur
+ */
+const FEATURE_CLEANUP_EVENTS: AutoModeEvent['type'][] = [
+  'auto_mode_feature_complete',
+  'auto_mode_error',
+];
+
+/**
+ * Type guard to check if an event has a featureId property
+ */
+function hasFeatureId(event: AutoModeEvent): event is AutoModeEvent & { featureId: string } {
+  return 'featureId' in event && typeof event.featureId === 'string';
+}
+
+/**
+ * Creates a unique key for per-feature debounce tracking
+ */
+function getFeatureKey(projectPath: string, featureId: string): string {
+  return `${projectPath}:${featureId}`;
+}
+
+/**
+ * Creates a debounced invalidation function for a specific feature's agent output
+ */
+function createDebouncedInvalidation(
+  queryClient: QueryClient,
+  projectPath: string,
+  featureId: string
+): DebouncedFunction<() => void> {
+  return debounce(
+    () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.features.agentOutput(projectPath, featureId),
+      });
+    },
+    PROGRESS_DEBOUNCE_WAIT,
+    { maxWait: PROGRESS_DEBOUNCE_MAX_WAIT }
+  );
+}
+
+/**
+ * Invalidate queries based on auto mode events
+ *
+ * This hook subscribes to auto mode events (feature start, complete, error, etc.)
+ * and invalidates relevant queries to keep the UI in sync.
+ *
+ * @param projectPath - Current project path
+ *
+ * @example
+ * ```tsx
+ * function BoardView() {
+ *   const projectPath = useAppStore(s => s.currentProject?.path);
+ *   useAutoModeQueryInvalidation(projectPath);
+ *   // ...
+ * }
+ * ```
+ */
+export function useAutoModeQueryInvalidation(projectPath: string | undefined) {
+  const queryClient = useQueryClient();
+  const recordGlobalEvent = useEventRecencyStore((state) => state.recordGlobalEvent);
+
+  // Store per-feature debounced invalidation functions
+  // Using a ref to persist across renders without causing re-subscriptions
+  const debouncedInvalidationsRef = useRef<Map<string, DebouncedFunction<() => void>>>(new Map());
+
+  useEffect(() => {
+    if (!projectPath) return;
+
+    // Capture projectPath in a const to satisfy TypeScript's type narrowing
+    const currentProjectPath = projectPath;
+    const debouncedInvalidations = debouncedInvalidationsRef.current;
+
+    /**
+     * Get or create a debounced invalidation function for a specific feature
+     */
+    function getDebouncedInvalidation(featureId: string): DebouncedFunction<() => void> {
+      const key = getFeatureKey(currentProjectPath, featureId);
+      let debouncedFn = debouncedInvalidations.get(key);
+
+      if (!debouncedFn) {
+        debouncedFn = createDebouncedInvalidation(queryClient, currentProjectPath, featureId);
+        debouncedInvalidations.set(key, debouncedFn);
+      }
+
+      return debouncedFn;
+    }
+
+    /**
+     * Clean up debounced function for a feature (flush pending and remove)
+     */
+    function cleanupFeatureDebounce(featureId: string): void {
+      const key = getFeatureKey(currentProjectPath, featureId);
+      const debouncedFn = debouncedInvalidations.get(key);
+
+      if (debouncedFn) {
+        // Flush any pending invalidation before cleanup
+        debouncedFn.flush();
+        debouncedInvalidations.delete(key);
+      }
+    }
+
+    const api = getElectronAPI();
+    if (!api.autoMode) return;
+    const unsubscribe = api.autoMode.onEvent((event: AutoModeEvent) => {
+      // Record that we received a WebSocket event (for event recency tracking)
+      // This allows polling to be disabled when WebSocket events are flowing
+      recordGlobalEvent();
+
+      // Invalidate feature list for lifecycle events.
+      // Skip invalidation when a feature is mid-transition (e.g., being cancelled)
+      // because persistFeatureUpdate already handles the optimistic cache update.
+      // Without this guard, auto_mode_error / auto_mode_stopped WS events race
+      // with the optimistic update and cause re-render cascades on mobile (React #185).
+      if (FEATURE_LIST_INVALIDATION_EVENTS.includes(event.type) && !isAnyFeatureTransitioning()) {
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.features.all(currentProjectPath),
+        });
+      }
+
+      // Invalidate running agents on status changes
+      if (RUNNING_AGENTS_INVALIDATION_EVENTS.includes(event.type)) {
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.runningAgents.all(),
+        });
+      }
+
+      // Invalidate specific feature for phase changes and task status updates
+      if (SINGLE_FEATURE_INVALIDATION_EVENTS.includes(event.type) && hasFeatureId(event)) {
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.features.single(currentProjectPath, event.featureId),
+        });
+      }
+
+      // Invalidate agent output during progress updates (DEBOUNCED)
+      // Uses per-feature debouncing to batch rapid progress events during streaming
+      if (event.type === 'auto_mode_progress' && hasFeatureId(event)) {
+        const debouncedInvalidation = getDebouncedInvalidation(event.featureId);
+        debouncedInvalidation();
+      }
+
+      // Clean up debounced functions when feature completes or errors
+      // This ensures we flush any pending invalidations and free memory
+      if (FEATURE_CLEANUP_EVENTS.includes(event.type) && hasFeatureId(event)) {
+        cleanupFeatureDebounce(event.featureId);
+      }
+
+      // Invalidate worktree queries when feature completes (may have created worktree)
+      if (event.type === 'auto_mode_feature_complete' && hasFeatureId(event)) {
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.worktrees.all(currentProjectPath),
+        });
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.worktrees.single(currentProjectPath, event.featureId),
+        });
+      }
+    });
+
+    // Cleanup on unmount: flush and clear all debounced functions
+    return () => {
+      unsubscribe();
+
+      // Flush all pending invalidations before cleanup
+      for (const debouncedFn of debouncedInvalidations.values()) {
+        debouncedFn.flush();
+      }
+      debouncedInvalidations.clear();
+    };
+  }, [projectPath, queryClient, recordGlobalEvent]);
+}
+
+/**
+ * Invalidate queries based on spec regeneration events
+ *
+ * @param projectPath - Current project path
+ */
+export function useSpecRegenerationQueryInvalidation(projectPath: string | undefined) {
+  const queryClient = useQueryClient();
+  const recordGlobalEvent = useEventRecencyStore((state) => state.recordGlobalEvent);
+
+  useEffect(() => {
+    if (!projectPath) return;
+
+    const api = getElectronAPI();
+    if (!api.specRegeneration) return;
+    const unsubscribe = api.specRegeneration.onEvent((event: SpecRegenerationEvent) => {
+      // Only handle events for the current project
+      if (event.projectPath !== projectPath) return;
+
+      // Record that we received a WebSocket event
+      recordGlobalEvent();
+
+      if (event.type === 'spec_regeneration_complete') {
+        // Invalidate features as new ones may have been generated
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.features.all(projectPath),
+        });
+
+        // Invalidate spec regeneration status
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.specRegeneration.status(projectPath),
+        });
+      }
+    });
+
+    return unsubscribe;
+  }, [projectPath, queryClient, recordGlobalEvent]);
+}
+
+/**
+ * Invalidate queries based on GitHub validation events
+ *
+ * @param projectPath - Current project path
+ */
+export function useGitHubValidationQueryInvalidation(projectPath: string | undefined) {
+  const queryClient = useQueryClient();
+  const recordGlobalEvent = useEventRecencyStore((state) => state.recordGlobalEvent);
+
+  useEffect(() => {
+    if (!projectPath) return;
+
+    const api = getElectronAPI();
+
+    // Check if GitHub API is available before subscribing
+    if (!api.github?.onValidationEvent) {
+      return;
+    }
+
+    const unsubscribe = api.github.onValidationEvent((event: IssueValidationEvent) => {
+      // Record that we received a WebSocket event
+      recordGlobalEvent();
+
+      if (event.type === 'issue_validation_complete' || event.type === 'issue_validation_error') {
+        // Invalidate all validations for this project
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.github.validations(projectPath),
+        });
+
+        // Also invalidate specific issue validation if we have the issue number
+        if (event.issueNumber) {
+          queryClient.invalidateQueries({
+            queryKey: queryKeys.github.validation(projectPath, event.issueNumber),
+          });
+        }
+      }
+    });
+
+    return unsubscribe;
+  }, [projectPath, queryClient, recordGlobalEvent]);
+}
+
+/**
+ * Invalidate session queries based on agent stream events
+ *
+ * @param sessionId - Current session ID
+ */
+export function useSessionQueryInvalidation(sessionId: string | undefined) {
+  const queryClient = useQueryClient();
+  const recordGlobalEvent = useEventRecencyStore((state) => state.recordGlobalEvent);
+
+  useEffect(() => {
+    if (!sessionId) return;
+
+    const api = getElectronAPI();
+    if (!api.agent) return;
+    const unsubscribe = api.agent.onStream((data: unknown) => {
+      const event = data as StreamEvent;
+      // Only handle events for the current session
+      if ('sessionId' in event && event.sessionId !== sessionId) return;
+
+      // Record that we received a WebSocket event
+      recordGlobalEvent();
+
+      // Invalidate session history when a message is complete
+      if (event.type === 'complete' || event.type === 'message') {
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.sessions.history(sessionId),
+        });
+      }
+
+      // Invalidate sessions list when any session changes
+      if (event.type === 'complete') {
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.sessions.all(),
+        });
+      }
+    });
+
+    return unsubscribe;
+  }, [sessionId, queryClient, recordGlobalEvent]);
+}
+
+/**
+ * Combined hook that sets up all query invalidation subscriptions
+ *
+ * Use this hook at the app root or in a layout component to ensure
+ * all WebSocket events properly invalidate React Query caches.
+ *
+ * @param projectPath - Current project path
+ * @param sessionId - Current session ID (optional)
+ *
+ * @example
+ * ```tsx
+ * function AppLayout() {
+ *   const projectPath = useAppStore(s => s.currentProject?.path);
+ *   const sessionId = useAppStore(s => s.currentSessionId);
+ *   useQueryInvalidation(projectPath, sessionId);
+ *   // ...
+ * }
+ * ```
+ */
+export function useQueryInvalidation(
+  projectPath: string | undefined,
+  sessionId?: string | undefined
+) {
+  useAutoModeQueryInvalidation(projectPath);
+  useSpecRegenerationQueryInvalidation(projectPath);
+  useGitHubValidationQueryInvalidation(projectPath);
+  useSessionQueryInvalidation(sessionId);
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-responsive-kanban.ts b/temp_repo/apps/ui/src/hooks/use-responsive-kanban.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5f1539865191e59837df8b55d4405cb93d5d4df6
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-responsive-kanban.ts
@@ -0,0 +1,193 @@
+// @ts-nocheck - responsive breakpoint logic with layout state calculations
+import { useState, useEffect, useLayoutEffect, useCallback, useRef } from 'react';
+import { useAppStore } from '@/store/app-store';
+
+export interface ResponsiveKanbanConfig {
+  columnWidth: number;
+  columnMinWidth: number;
+  columnMaxWidth: number;
+  gap: number;
+  padding: number;
+}
+
+/**
+ * Default configuration for responsive Kanban columns
+ */
+const DEFAULT_CONFIG: ResponsiveKanbanConfig = {
+  columnWidth: 320, // Increased from 288px to accommodate longer column titles
+  columnMinWidth: 320, // Increased from 280px to prevent title overflow
+  columnMaxWidth: Infinity, // No max width - columns scale evenly to fill viewport
+  gap: 20, // gap-5 = 20px
+  padding: 40, // px-5 on both sides = 40px (matches gap between columns)
+};
+
+// Sidebar transition duration (matches sidebar.tsx)
+const SIDEBAR_TRANSITION_MS = 300;
+
+export interface UseResponsiveKanbanResult {
+  columnWidth: number;
+  containerStyle: React.CSSProperties;
+  isCompact: boolean;
+  totalBoardWidth: number;
+  isInitialized: boolean;
+}
+
+/**
+ * Hook to calculate responsive Kanban column widths based on window size.
+ * Ensures columns scale intelligently to fill available space without
+ * dead space on the right or content being cut off.
+ *
+ * Features:
+ * - Uses useLayoutEffect to calculate width before paint (prevents bounce)
+ * - Observes actual board container for accurate sizing
+ * - Recalculates after sidebar transitions
+ *
+ * @param columnCount - Number of columns in the Kanban board
+ * @param config - Optional configuration for column sizing
+ * @returns Object with calculated column width, container styles, and metrics
+ */
+export function useResponsiveKanban(
+  columnCount: number = 4,
+  config: Partial<ResponsiveKanbanConfig> = {}
+): UseResponsiveKanbanResult {
+  const { columnMinWidth, columnMaxWidth, gap, padding } = {
+    ...DEFAULT_CONFIG,
+    ...config,
+  };
+
+  const sidebarOpen = useAppStore((state) => state.sidebarOpen);
+  const resizeTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  const calculateColumnWidth = useCallback(
+    (containerWidth?: number) => {
+      if (typeof window === 'undefined') {
+        return DEFAULT_CONFIG.columnWidth;
+      }
+
+      // Get the actual board container width
+      // The flex layout already accounts for sidebar width, so we use the container's actual width
+      let width = containerWidth;
+      if (width === undefined) {
+        const boardContainer = document.querySelector('[data-testid="board-view"]')?.parentElement;
+        width = boardContainer ? boardContainer.clientWidth : window.innerWidth;
+      }
+
+      // Get the available width (subtract padding only)
+      const availableWidth = width - padding;
+
+      // Calculate total gap space needed
+      const totalGapWidth = gap * (columnCount - 1);
+
+      // Calculate width available for all columns
+      const widthForColumns = availableWidth - totalGapWidth;
+
+      // Calculate ideal column width
+      let idealWidth = Math.floor(widthForColumns / columnCount);
+
+      // Clamp to min/max bounds
+      idealWidth = Math.max(columnMinWidth, Math.min(columnMaxWidth, idealWidth));
+
+      return idealWidth;
+    },
+    [columnCount, columnMinWidth, columnMaxWidth, gap, padding]
+  );
+
+  const [columnWidth, setColumnWidth] = useState<number>(() => calculateColumnWidth());
+
+  // Use useLayoutEffect to calculate width synchronously before paint
+  // This prevents the "bounce" effect when navigating to the kanban view
+  useLayoutEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const updateWidth = () => {
+      const newWidth = calculateColumnWidth();
+      setColumnWidth(newWidth);
+      setIsInitialized(true);
+    };
+
+    // Calculate immediately before paint
+    updateWidth();
+  }, [calculateColumnWidth]);
+
+  // Set up ResizeObserver for ongoing resize handling
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const updateWidth = () => {
+      const newWidth = calculateColumnWidth();
+      setColumnWidth(newWidth);
+    };
+
+    // Debounced update for smooth resize transitions
+    const scheduleUpdate = () => {
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+      resizeTimeoutRef.current = setTimeout(updateWidth, 50);
+    };
+
+    // Use ResizeObserver on the actual board container for precise updates
+    let resizeObserver: ResizeObserver | null = null;
+    const boardView = document.querySelector('[data-testid="board-view"]');
+    const container = boardView?.parentElement;
+
+    if (container && typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver((entries) => {
+        // Use the observed container's width for calculation
+        const entry = entries[0];
+        if (entry) {
+          const containerWidth = entry.contentRect.width;
+          const newWidth = calculateColumnWidth(containerWidth);
+          setColumnWidth(newWidth);
+        }
+      });
+      resizeObserver.observe(container);
+    }
+
+    // Fallback to window resize event
+    window.addEventListener('resize', scheduleUpdate);
+
+    return () => {
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+      window.removeEventListener('resize', scheduleUpdate);
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+    };
+  }, [calculateColumnWidth]);
+
+  // Re-calculate after sidebar transitions complete
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      const newWidth = calculateColumnWidth();
+      setColumnWidth(newWidth);
+    }, SIDEBAR_TRANSITION_MS + 50); // Wait for transition to complete
+
+    return () => clearTimeout(timeout);
+  }, [sidebarOpen, calculateColumnWidth]);
+
+  // Determine if we're in compact mode (columns at minimum width)
+  const isCompact = columnWidth <= columnMinWidth + 10;
+
+  // Calculate total board width for container sizing
+  const totalBoardWidth = columnWidth * columnCount + gap * (columnCount - 1);
+
+  // Container style for horizontal scrolling support
+  const containerStyle: React.CSSProperties = {
+    display: 'flex',
+    gap: `${gap}px`,
+    width: 'max-content', // Expand to fit all columns, enabling horizontal scroll when needed
+    minHeight: '100%', // Ensure full height
+  };
+
+  return {
+    columnWidth,
+    containerStyle,
+    isCompact,
+    totalBoardWidth,
+    isInitialized,
+  };
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-scroll-tracking.ts b/temp_repo/apps/ui/src/hooks/use-scroll-tracking.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8a9f99a8fed04a87ab0718b54641baff7f0d82a9
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-scroll-tracking.ts
@@ -0,0 +1,101 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+interface ScrollTrackingItem {
+  id: string;
+}
+
+interface UseScrollTrackingOptions<T extends ScrollTrackingItem> {
+  /** Navigation items with at least an id property */
+  items: T[];
+  /** Optional filter function to determine which items should be tracked */
+  filterFn?: (item: T) => boolean;
+  /** Optional initial active section (defaults to first item's id) */
+  initialSection?: string;
+  /** Optional offset from top when scrolling to section (defaults to 24) */
+  scrollOffset?: number;
+}
+
+/**
+ * Generic custom hook for managing scroll-based navigation tracking
+ * Automatically highlights the active section based on scroll position
+ * and provides smooth scrolling to sections
+ */
+export function useScrollTracking<T extends ScrollTrackingItem>({
+  items,
+  filterFn = () => true,
+  initialSection,
+  scrollOffset = 24,
+}: UseScrollTrackingOptions<T>) {
+  const [activeSection, setActiveSection] = useState(initialSection || items[0]?.id || '');
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  // Track scroll position to highlight active nav item
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+
+    const handleScroll = () => {
+      const sections = items
+        .filter(filterFn)
+        .map((item) => ({
+          id: item.id,
+          element: document.getElementById(item.id),
+        }))
+        .filter((s) => s.element);
+
+      const containerRect = container.getBoundingClientRect();
+      const scrollTop = container.scrollTop;
+      const scrollHeight = container.scrollHeight;
+      const clientHeight = container.clientHeight;
+
+      // Check if scrolled to bottom (within a small threshold)
+      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 50;
+
+      if (isAtBottom && sections.length > 0) {
+        // If at bottom, highlight the last visible section
+        setActiveSection(sections[sections.length - 1].id);
+        return;
+      }
+
+      for (let i = sections.length - 1; i >= 0; i--) {
+        const section = sections[i];
+        if (section.element) {
+          const rect = section.element.getBoundingClientRect();
+          const relativeTop = rect.top - containerRect.top + scrollTop;
+          if (scrollTop >= relativeTop - 100) {
+            setActiveSection(section.id);
+            break;
+          }
+        }
+      }
+    };
+
+    container.addEventListener('scroll', handleScroll);
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, [items, filterFn]);
+
+  // Scroll to a specific section with smooth animation
+  const scrollToSection = useCallback(
+    (sectionId: string) => {
+      const element = document.getElementById(sectionId);
+      if (element && scrollContainerRef.current) {
+        const container = scrollContainerRef.current;
+        const containerRect = container.getBoundingClientRect();
+        const elementRect = element.getBoundingClientRect();
+        const relativeTop = elementRect.top - containerRect.top + container.scrollTop;
+
+        container.scrollTo({
+          top: relativeTop - scrollOffset,
+          behavior: 'smooth',
+        });
+      }
+    },
+    [scrollOffset]
+  );
+
+  return {
+    activeSection,
+    scrollToSection,
+    scrollContainerRef,
+  };
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-settings-migration.ts b/temp_repo/apps/ui/src/hooks/use-settings-migration.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ba6c38b28d59d3b03c0c9daba8978de91d46d725
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-settings-migration.ts
@@ -0,0 +1,1073 @@
+/**
+ * Settings Migration Hook and Sync Functions
+ *
+ * Handles migrating user settings from localStorage to persistent file-based storage
+ * on app startup. Also provides utility functions for syncing individual setting
+ * categories to the server.
+ *
+ * Migration flow:
+ * 1. useSettingsMigration() hook fetches settings from the server API
+ * 2. Checks if `localStorageMigrated` flag is true - if so, skips migration
+ * 3. If migration needed: merges localStorage data with server data, preferring more complete data
+ * 4. Sets `localStorageMigrated: true` in server settings to prevent re-migration
+ * 5. Hydrates the Zustand store with the merged/fetched settings
+ * 6. Returns a promise that resolves when hydration is complete
+ *
+ * IMPORTANT: localStorage values are intentionally NOT deleted after migration.
+ * This allows users to switch back to older versions of Automaker if needed.
+ *
+ * Sync functions for incremental updates:
+ * - syncSettingsToServer: Writes global settings to file
+ * - syncCredentialsToServer: Writes API keys to file
+ * - syncProjectSettingsToServer: Writes project-specific overrides
+ */
+
+import { useEffect, useState, useRef } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { getHttpApiClient, waitForApiKeyInit } from '@/lib/http-api-client';
+import { getItem, setItem } from '@/lib/storage';
+import { sanitizeWorktreeByProject } from '@/lib/settings-utils';
+import { useAppStore, THEME_STORAGE_KEY } from '@/store/app-store';
+import { useSetupStore } from '@/store/setup-store';
+import {
+  DEFAULT_OPENCODE_MODEL,
+  DEFAULT_MAX_CONCURRENCY,
+  DEFAULT_PHASE_MODELS,
+  getAllOpencodeModelIds,
+  getAllCursorModelIds,
+  migrateCursorModelIds,
+  migratePhaseModelEntry,
+  type GlobalSettings,
+  type CursorModelId,
+  type PhaseModelEntry,
+} from '@automaker/types';
+
+const logger = createLogger('SettingsMigration');
+
+/**
+ * State returned by useSettingsMigration hook
+ */
+interface MigrationState {
+  /** Whether migration/hydration has completed */
+  checked: boolean;
+  /** Whether migration actually occurred (localStorage -> server) */
+  migrated: boolean;
+  /** Error message if migration failed (null if success/no-op) */
+  error: string | null;
+}
+
+// NOTE: We intentionally do NOT clear any localStorage keys after migration.
+// This allows users to switch back to older versions of Automaker that relied on localStorage.
+// The `localStorageMigrated` flag in server settings prevents re-migration on subsequent app loads.
+
+// Global promise that resolves when migration is complete
+// This allows useSettingsSync to wait for hydration before starting sync
+let migrationCompleteResolve: (() => void) | null = null;
+let migrationCompletePromise: Promise<void> | null = null;
+let migrationCompleted = false;
+
+/**
+ * Signal that migration/hydration is complete.
+ * Call this after hydrating the store from server settings.
+ * This unblocks useSettingsSync so it can start syncing changes.
+ */
+export function signalMigrationComplete(): void {
+  migrationCompleted = true;
+  if (migrationCompleteResolve) {
+    migrationCompleteResolve();
+  }
+}
+
+/**
+ * Get a promise that resolves when migration/hydration is complete
+ * Used by useSettingsSync to coordinate timing
+ */
+export function waitForMigrationComplete(): Promise<void> {
+  // If migration already completed before anything started waiting, resolve immediately.
+  if (migrationCompleted) {
+    return Promise.resolve();
+  }
+  if (!migrationCompletePromise) {
+    migrationCompletePromise = new Promise((resolve) => {
+      migrationCompleteResolve = resolve;
+    });
+  }
+  return migrationCompletePromise;
+}
+
+/**
+ * Reset migration state when auth is lost (logout/session expired).
+ * This ensures that on re-login, the sync hook properly waits for
+ * fresh settings hydration before starting to sync.
+ */
+export function resetMigrationState(): void {
+  migrationCompleted = false;
+  migrationCompletePromise = null;
+  migrationCompleteResolve = null;
+}
+
+/**
+ * Parse localStorage data into settings object
+ *
+ * Checks for settings in multiple locations:
+ * 1. automaker-settings-cache: Fresh server settings cached from last fetch
+ * 2. automaker-storage: Zustand-persisted app store state (legacy)
+ * 3. automaker-setup: Setup wizard state (legacy)
+ * 4. Standalone keys: worktree-panel-collapsed, file-browser-recent-folders, etc.
+ *
+ * @returns Merged settings object or null if no settings found
+ */
+export function parseLocalStorageSettings(): Partial<GlobalSettings> | null {
+  try {
+    // First, check for fresh server settings cache (updated whenever server settings are fetched)
+    // This prevents stale data when switching between modes
+    const settingsCache = getItem('automaker-settings-cache');
+    if (settingsCache) {
+      try {
+        const cached = JSON.parse(settingsCache) as GlobalSettings;
+        const cacheProjectCount = cached?.projects?.length ?? 0;
+        logger.info(`[CACHE_LOADED] projects=${cacheProjectCount}, theme=${cached?.theme}`);
+        return cached;
+      } catch {
+        logger.warn('Failed to parse settings cache, falling back to old storage');
+      }
+    } else {
+      logger.info('[CACHE_EMPTY] No settings cache found in localStorage');
+    }
+
+    // Fall back to old Zustand persisted storage
+    const automakerStorage = getItem('automaker-storage');
+    if (!automakerStorage) {
+      return null;
+    }
+
+    const parsed = JSON.parse(automakerStorage) as Record<string, unknown>;
+    // Zustand persist stores state under 'state' key
+    const state = (parsed.state as Record<string, unknown> | undefined) || parsed;
+
+    // Setup wizard state (previously stored in its own persist key)
+    const automakerSetup = getItem('automaker-setup');
+    const setupParsed = automakerSetup
+      ? (JSON.parse(automakerSetup) as Record<string, unknown>)
+      : null;
+    const setupState =
+      (setupParsed?.state as Record<string, unknown> | undefined) || setupParsed || {};
+
+    // Also check for standalone localStorage keys
+    const worktreePanelCollapsed = getItem('worktree-panel-collapsed');
+    const recentFolders = getItem('file-browser-recent-folders');
+    const lastProjectDir = getItem('automaker:lastProjectDir');
+
+    return {
+      setupComplete: setupState.setupComplete as boolean,
+      isFirstRun: setupState.isFirstRun as boolean,
+      skipClaudeSetup: setupState.skipClaudeSetup as boolean,
+      theme: state.theme as GlobalSettings['theme'],
+      sidebarOpen: state.sidebarOpen as boolean,
+      chatHistoryOpen: state.chatHistoryOpen as boolean,
+      maxConcurrency: state.maxConcurrency as number,
+      defaultSkipTests: state.defaultSkipTests as boolean,
+      enableDependencyBlocking: state.enableDependencyBlocking as boolean,
+      skipVerificationInAutoMode: state.skipVerificationInAutoMode as boolean,
+      mergePostAction: (state.mergePostAction as 'commit' | 'manual' | null) ?? null,
+      useWorktrees: state.useWorktrees as boolean,
+      defaultPlanningMode: state.defaultPlanningMode as GlobalSettings['defaultPlanningMode'],
+      defaultRequirePlanApproval: state.defaultRequirePlanApproval as boolean,
+      muteDoneSound: state.muteDoneSound as boolean,
+      disableSplashScreen: state.disableSplashScreen as boolean,
+      defaultSortNewestCardOnTop: state.defaultSortNewestCardOnTop as boolean,
+      enhancementModel: state.enhancementModel as GlobalSettings['enhancementModel'],
+      validationModel: state.validationModel as GlobalSettings['validationModel'],
+      phaseModels: state.phaseModels as GlobalSettings['phaseModels'],
+      enabledCursorModels: state.enabledCursorModels as GlobalSettings['enabledCursorModels'],
+      cursorDefaultModel: state.cursorDefaultModel as GlobalSettings['cursorDefaultModel'],
+      enabledOpencodeModels: state.enabledOpencodeModels as GlobalSettings['enabledOpencodeModels'],
+      opencodeDefaultModel: state.opencodeDefaultModel as GlobalSettings['opencodeDefaultModel'],
+      enabledDynamicModelIds:
+        state.enabledDynamicModelIds as GlobalSettings['enabledDynamicModelIds'],
+      disabledProviders: (state.disabledProviders ?? []) as GlobalSettings['disabledProviders'],
+      autoLoadClaudeMd: state.autoLoadClaudeMd as boolean,
+      useClaudeCodeSystemPrompt: state.useClaudeCodeSystemPrompt as boolean,
+      codexAutoLoadAgents: state.codexAutoLoadAgents as GlobalSettings['codexAutoLoadAgents'],
+      codexSandboxMode: state.codexSandboxMode as GlobalSettings['codexSandboxMode'],
+      codexApprovalPolicy: state.codexApprovalPolicy as GlobalSettings['codexApprovalPolicy'],
+      codexEnableWebSearch: state.codexEnableWebSearch as GlobalSettings['codexEnableWebSearch'],
+      codexEnableImages: state.codexEnableImages as GlobalSettings['codexEnableImages'],
+      codexAdditionalDirs: state.codexAdditionalDirs as GlobalSettings['codexAdditionalDirs'],
+      codexThreadId: state.codexThreadId as GlobalSettings['codexThreadId'],
+      keyboardShortcuts: state.keyboardShortcuts as GlobalSettings['keyboardShortcuts'],
+      mcpServers: state.mcpServers as GlobalSettings['mcpServers'],
+      promptCustomization: state.promptCustomization as GlobalSettings['promptCustomization'],
+      eventHooks: state.eventHooks as GlobalSettings['eventHooks'],
+      ntfyEndpoints: state.ntfyEndpoints as GlobalSettings['ntfyEndpoints'],
+      featureTemplates: state.featureTemplates as GlobalSettings['featureTemplates'],
+      projects: state.projects as GlobalSettings['projects'],
+      trashedProjects: state.trashedProjects as GlobalSettings['trashedProjects'],
+      currentProjectId: (state.currentProject as { id?: string } | null)?.id ?? null,
+      projectHistory: state.projectHistory as GlobalSettings['projectHistory'],
+      projectHistoryIndex: state.projectHistoryIndex as number,
+      lastSelectedSessionByProject:
+        state.lastSelectedSessionByProject as GlobalSettings['lastSelectedSessionByProject'],
+      agentModelBySession: state.agentModelBySession as GlobalSettings['agentModelBySession'],
+      // UI State from standalone localStorage keys or Zustand state
+      worktreePanelCollapsed:
+        worktreePanelCollapsed === 'true' || (state.worktreePanelCollapsed as boolean),
+      lastProjectDir: lastProjectDir || (state.lastProjectDir as string),
+      recentFolders: recentFolders ? JSON.parse(recentFolders) : (state.recentFolders as string[]),
+      // Claude API Profiles (legacy)
+      claudeApiProfiles: (state.claudeApiProfiles as GlobalSettings['claudeApiProfiles']) ?? [],
+      activeClaudeApiProfileId:
+        (state.activeClaudeApiProfileId as GlobalSettings['activeClaudeApiProfileId']) ?? null,
+      // Claude Compatible Providers (new system)
+      claudeCompatibleProviders:
+        (state.claudeCompatibleProviders as GlobalSettings['claudeCompatibleProviders']) ?? [],
+      // Settings that were previously missing from migration (added for sync parity)
+      enableAiCommitMessages: state.enableAiCommitMessages as boolean | undefined,
+      enableSkills: state.enableSkills as boolean | undefined,
+      skillsSources: state.skillsSources as GlobalSettings['skillsSources'] | undefined,
+      enableSubagents: state.enableSubagents as boolean | undefined,
+      subagentsSources: state.subagentsSources as GlobalSettings['subagentsSources'] | undefined,
+    };
+  } catch (error) {
+    logger.error('Failed to parse localStorage settings:', error);
+    return null;
+  }
+}
+
+/**
+ * Check if localStorage has more complete data than server
+ *
+ * Compares the completeness of data to determine if a migration is needed.
+ * Returns true if localStorage has projects but server doesn't, indicating
+ * the localStorage data should be merged with server settings.
+ *
+ * @param localSettings Settings loaded from localStorage
+ * @param serverSettings Settings loaded from server
+ * @returns true if localStorage has more data that should be preserved
+ */
+export function localStorageHasMoreData(
+  localSettings: Partial<GlobalSettings> | null,
+  serverSettings: GlobalSettings | null
+): boolean {
+  if (!localSettings) return false;
+  if (!serverSettings) return true;
+
+  // Check if localStorage has projects that server doesn't
+  const localProjects = localSettings.projects || [];
+  const serverProjects = serverSettings.projects || [];
+
+  if (localProjects.length > 0 && serverProjects.length === 0) {
+    logger.info(`localStorage has ${localProjects.length} projects, server has none - will merge`);
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Merge localStorage settings with server settings
+ *
+ * Intelligently combines settings from both sources:
+ * - Prefers server data as the base
+ * - Uses localStorage values when server has empty arrays/objects
+ * - Specific handling for: projects, trashedProjects, mcpServers, recentFolders, etc.
+ *
+ * @param serverSettings Settings from server API (base)
+ * @param localSettings Settings from localStorage (fallback)
+ * @returns Merged GlobalSettings object ready to hydrate the store
+ */
+export function mergeSettings(
+  serverSettings: GlobalSettings,
+  localSettings: Partial<GlobalSettings> | null
+): GlobalSettings {
+  if (!localSettings) return serverSettings;
+
+  // Start with server settings
+  const merged = { ...serverSettings };
+
+  // For arrays, prefer the one with more items (if server is empty, use local)
+  if (
+    (!serverSettings.projects || serverSettings.projects.length === 0) &&
+    localSettings.projects &&
+    localSettings.projects.length > 0
+  ) {
+    merged.projects = localSettings.projects;
+  }
+
+  if (
+    (!serverSettings.trashedProjects || serverSettings.trashedProjects.length === 0) &&
+    localSettings.trashedProjects &&
+    localSettings.trashedProjects.length > 0
+  ) {
+    merged.trashedProjects = localSettings.trashedProjects;
+  }
+
+  if (
+    (!serverSettings.mcpServers || serverSettings.mcpServers.length === 0) &&
+    localSettings.mcpServers &&
+    localSettings.mcpServers.length > 0
+  ) {
+    merged.mcpServers = localSettings.mcpServers;
+  }
+
+  if (
+    (!serverSettings.recentFolders || serverSettings.recentFolders.length === 0) &&
+    localSettings.recentFolders &&
+    localSettings.recentFolders.length > 0
+  ) {
+    merged.recentFolders = localSettings.recentFolders;
+  }
+
+  if (
+    (!serverSettings.projectHistory || serverSettings.projectHistory.length === 0) &&
+    localSettings.projectHistory &&
+    localSettings.projectHistory.length > 0
+  ) {
+    merged.projectHistory = localSettings.projectHistory;
+    merged.projectHistoryIndex = localSettings.projectHistoryIndex ?? -1;
+  }
+
+  // For objects, merge if server is empty
+  if (
+    (!serverSettings.lastSelectedSessionByProject ||
+      Object.keys(serverSettings.lastSelectedSessionByProject).length === 0) &&
+    localSettings.lastSelectedSessionByProject &&
+    Object.keys(localSettings.lastSelectedSessionByProject).length > 0
+  ) {
+    merged.lastSelectedSessionByProject = localSettings.lastSelectedSessionByProject;
+  }
+
+  if (
+    (!serverSettings.agentModelBySession ||
+      Object.keys(serverSettings.agentModelBySession).length === 0) &&
+    localSettings.agentModelBySession &&
+    Object.keys(localSettings.agentModelBySession).length > 0
+  ) {
+    merged.agentModelBySession = localSettings.agentModelBySession;
+  }
+
+  // For simple values, use localStorage if server value is default/undefined
+  if (!serverSettings.lastProjectDir && localSettings.lastProjectDir) {
+    merged.lastProjectDir = localSettings.lastProjectDir;
+  }
+
+  // Preserve current project ID from localStorage if server doesn't have one
+  if (!serverSettings.currentProjectId && localSettings.currentProjectId) {
+    merged.currentProjectId = localSettings.currentProjectId;
+  }
+
+  // Claude API Profiles - preserve from localStorage if server is empty
+  if (
+    (!serverSettings.claudeApiProfiles || serverSettings.claudeApiProfiles.length === 0) &&
+    localSettings.claudeApiProfiles &&
+    localSettings.claudeApiProfiles.length > 0
+  ) {
+    merged.claudeApiProfiles = localSettings.claudeApiProfiles;
+  }
+
+  // Active Claude API Profile ID - preserve from localStorage if server doesn't have one
+  if (!serverSettings.activeClaudeApiProfileId && localSettings.activeClaudeApiProfileId) {
+    merged.activeClaudeApiProfileId = localSettings.activeClaudeApiProfileId;
+  }
+
+  // Claude Compatible Providers - preserve from localStorage if server is empty
+  if (
+    (!serverSettings.claudeCompatibleProviders ||
+      serverSettings.claudeCompatibleProviders.length === 0) &&
+    localSettings.claudeCompatibleProviders &&
+    localSettings.claudeCompatibleProviders.length > 0
+  ) {
+    merged.claudeCompatibleProviders = localSettings.claudeCompatibleProviders;
+  }
+
+  // Event hooks - preserve from localStorage if server is empty
+  if (
+    (!serverSettings.eventHooks || serverSettings.eventHooks.length === 0) &&
+    localSettings.eventHooks &&
+    localSettings.eventHooks.length > 0
+  ) {
+    merged.eventHooks = localSettings.eventHooks;
+  }
+
+  // Preserve new settings fields from localStorage if server has defaults
+  // Use nullish coalescing to accept stored falsy values (e.g. false)
+  if (localSettings.enableAiCommitMessages != null && merged.enableAiCommitMessages == null) {
+    merged.enableAiCommitMessages = localSettings.enableAiCommitMessages;
+  }
+  if (localSettings.enableSkills != null && merged.enableSkills == null) {
+    merged.enableSkills = localSettings.enableSkills;
+  }
+  if (localSettings.skillsSources && (!merged.skillsSources || merged.skillsSources.length === 0)) {
+    merged.skillsSources = localSettings.skillsSources;
+  }
+  if (localSettings.enableSubagents != null && merged.enableSubagents == null) {
+    merged.enableSubagents = localSettings.enableSubagents;
+  }
+  if (
+    localSettings.subagentsSources &&
+    (!merged.subagentsSources || merged.subagentsSources.length === 0)
+  ) {
+    merged.subagentsSources = localSettings.subagentsSources;
+  }
+
+  return merged;
+}
+
+/**
+ * Perform settings migration from localStorage to server (async function version)
+ *
+ * This is the core migration logic extracted for use outside of React hooks.
+ * Call this from __root.tsx during app initialization.
+ *
+ * Flow:
+ * 1. If server has localStorageMigrated flag, skip migration (already done)
+ * 2. Check if localStorage has more data than server
+ * 3. If yes, merge them and sync merged state back to server
+ * 4. Set localStorageMigrated flag to prevent re-migration
+ *
+ * @param serverSettings Settings fetched from the server API
+ * @returns Promise resolving to {settings, migrated} - final settings and whether migration occurred
+ */
+export async function performSettingsMigration(
+  serverSettings: GlobalSettings
+): Promise<{ settings: GlobalSettings; migrated: boolean }> {
+  // Get localStorage data
+  const localSettings = parseLocalStorageSettings();
+  const localProjects = localSettings?.projects?.length ?? 0;
+  const serverProjects = serverSettings.projects?.length ?? 0;
+
+  logger.info('[MIGRATION_CHECK]', {
+    localStorageProjects: localProjects,
+    serverProjects: serverProjects,
+    localStorageMigrated: serverSettings.localStorageMigrated,
+    dataSourceMismatch: localProjects !== serverProjects,
+  });
+
+  // Check if migration has already been completed
+  if (serverSettings.localStorageMigrated) {
+    logger.info('[MIGRATION_SKIP] Using server settings only (migration already completed)');
+    return { settings: serverSettings, migrated: false };
+  }
+
+  // Check if localStorage has more data than server
+  if (localStorageHasMoreData(localSettings, serverSettings)) {
+    // First-time migration: merge localStorage data with server settings
+    const mergedSettings = mergeSettings(serverSettings, localSettings);
+    logger.info('Merged localStorage data with server settings (first-time migration)');
+
+    // Sync merged settings to server with migration marker
+    try {
+      const api = getHttpApiClient();
+      const updates = {
+        ...mergedSettings,
+        localStorageMigrated: true,
+      };
+
+      const result = await api.settings.updateGlobal(updates);
+      if (result.success) {
+        logger.info('Synced merged settings to server with migration marker');
+      } else {
+        logger.warn('Failed to sync merged settings to server:', result.error);
+      }
+    } catch (error) {
+      logger.error('Failed to sync merged settings:', error);
+    }
+
+    return { settings: mergedSettings, migrated: true };
+  }
+
+  // No migration needed, but mark as migrated to prevent future checks
+  if (!serverSettings.localStorageMigrated) {
+    try {
+      const api = getHttpApiClient();
+      await api.settings.updateGlobal({ localStorageMigrated: true });
+      logger.info('Marked settings as migrated (no data to migrate)');
+    } catch (error) {
+      logger.warn('Failed to set migration marker:', error);
+    }
+  }
+
+  return { settings: serverSettings, migrated: false };
+}
+
+/**
+ * React hook to handle settings hydration from server on startup
+ *
+ * Runs automatically once on component mount. Returns state indicating whether
+ * hydration is complete, whether data was migrated from localStorage, and any errors.
+ *
+ * Works in both Electron and web modes - both need to hydrate from the server API.
+ *
+ * @returns MigrationState with checked, migrated, and error fields
+ */
+export function useSettingsMigration(): MigrationState {
+  const [state, setState] = useState<MigrationState>({
+    checked: false,
+    migrated: false,
+    error: null,
+  });
+  const migrationAttempted = useRef(false);
+
+  useEffect(() => {
+    // Only run once
+    if (migrationAttempted.current) return;
+    migrationAttempted.current = true;
+
+    async function checkAndMigrate() {
+      try {
+        // Wait for API key to be initialized before making any API calls
+        await waitForApiKeyInit();
+
+        const api = getHttpApiClient();
+
+        // Always try to get localStorage data first (in case we need to merge/migrate)
+        const localSettings = parseLocalStorageSettings();
+        logger.info(`localStorage has ${localSettings?.projects?.length ?? 0} projects`);
+
+        // Check if server has settings files
+        const status = await api.settings.getStatus();
+
+        if (!status.success) {
+          logger.error('Failed to get settings status:', status);
+
+          // Even if status check fails, try to use localStorage data if available
+          if (localSettings) {
+            logger.info('Using localStorage data as fallback');
+            hydrateStoreFromSettings(localSettings as GlobalSettings);
+          }
+
+          signalMigrationComplete();
+
+          setState({
+            checked: true,
+            migrated: false,
+            error: 'Failed to check settings status',
+          });
+          return;
+        }
+
+        // Try to get global settings from server
+        let serverSettings: GlobalSettings | null = null;
+        try {
+          const global = await api.settings.getGlobal();
+          if (global.success && global.settings) {
+            serverSettings = global.settings as unknown as GlobalSettings;
+            logger.info(`Server has ${serverSettings.projects?.length ?? 0} projects`);
+
+            // Update localStorage with fresh server data to keep cache in sync
+            // This prevents stale localStorage data from being used when switching between modes
+            try {
+              setItem('automaker-settings-cache', JSON.stringify(serverSettings));
+              logger.debug('Updated localStorage with fresh server settings');
+            } catch (storageError) {
+              logger.warn('Failed to update localStorage cache:', storageError);
+            }
+          }
+        } catch (error) {
+          logger.error('Failed to fetch server settings:', error);
+        }
+
+        // Determine what settings to use
+        let finalSettings: GlobalSettings;
+        let needsSync = false;
+
+        if (serverSettings) {
+          // Check if migration has already been completed
+          if (serverSettings.localStorageMigrated) {
+            logger.info('localStorage migration already completed, using server settings only');
+            finalSettings = serverSettings;
+            // Don't set needsSync - no migration needed
+          } else if (localStorageHasMoreData(localSettings, serverSettings)) {
+            // First-time migration: merge localStorage data with server settings
+            finalSettings = mergeSettings(serverSettings, localSettings);
+            needsSync = true;
+            logger.info('Merged localStorage data with server settings (first-time migration)');
+          } else {
+            finalSettings = serverSettings;
+          }
+        } else if (localSettings) {
+          // No server settings, use localStorage (first run migration)
+          finalSettings = localSettings as GlobalSettings;
+          needsSync = true;
+          logger.info(
+            'Using localStorage settings (no server settings found - first-time migration)'
+          );
+        } else {
+          // No settings anywhere, use defaults
+          logger.info('No settings found, using defaults');
+          signalMigrationComplete();
+          setState({ checked: true, migrated: false, error: null });
+          return;
+        }
+
+        // Hydrate the store
+        hydrateStoreFromSettings(finalSettings);
+        logger.info('Store hydrated with settings');
+
+        // If we merged data or used localStorage, sync to server with migration marker
+        if (needsSync) {
+          try {
+            const updates = buildSettingsUpdateFromStore();
+            // Mark migration as complete so we don't re-migrate on next app load
+            // This preserves localStorage values for users who want to downgrade
+            (updates as Record<string, unknown>).localStorageMigrated = true;
+
+            const result = await api.settings.updateGlobal(updates);
+            if (result.success) {
+              logger.info('Synced merged settings to server with migration marker');
+              // NOTE: We intentionally do NOT clear localStorage values
+              // This allows users to switch back to older versions of Automaker
+            } else {
+              logger.warn('Failed to sync merged settings to server:', result.error);
+            }
+          } catch (error) {
+            logger.error('Failed to sync merged settings:', error);
+          }
+        }
+
+        // Signal that migration is complete
+        signalMigrationComplete();
+
+        setState({ checked: true, migrated: needsSync, error: null });
+      } catch (error) {
+        logger.error('Migration/hydration failed:', error);
+
+        // Signal that migration is complete (even on error)
+        signalMigrationComplete();
+
+        setState({
+          checked: true,
+          migrated: false,
+          error: error instanceof Error ? error.message : 'Unknown error',
+        });
+      }
+    }
+
+    checkAndMigrate();
+  }, []);
+
+  return state;
+}
+
+/**
+ * Hydrate the Zustand store from settings object
+ */
+export function hydrateStoreFromSettings(settings: GlobalSettings): void {
+  const current = useAppStore.getState();
+
+  // Migrate Cursor models to canonical format
+  // IMPORTANT: Always use ALL available Cursor models to ensure new models are visible
+  // Users who had old settings with a subset of models should still see all available models
+  const allCursorModels = getAllCursorModelIds();
+  const migratedCursorDefault = migrateCursorModelIds([
+    settings.cursorDefaultModel ?? current.cursorDefaultModel ?? 'cursor-auto',
+  ])[0];
+  const validCursorModelIds = new Set(allCursorModels);
+  const sanitizedCursorDefaultModel = validCursorModelIds.has(migratedCursorDefault)
+    ? migratedCursorDefault
+    : ('cursor-auto' as CursorModelId);
+
+  const validOpencodeModelIds = new Set(getAllOpencodeModelIds());
+  const incomingEnabledOpencodeModels =
+    settings.enabledOpencodeModels ?? current.enabledOpencodeModels;
+  const sanitizedOpencodeDefaultModel = validOpencodeModelIds.has(
+    settings.opencodeDefaultModel ?? current.opencodeDefaultModel
+  )
+    ? (settings.opencodeDefaultModel ?? current.opencodeDefaultModel)
+    : DEFAULT_OPENCODE_MODEL;
+  const sanitizedEnabledOpencodeModels = Array.from(
+    new Set(incomingEnabledOpencodeModels.filter((modelId) => validOpencodeModelIds.has(modelId)))
+  );
+
+  if (!sanitizedEnabledOpencodeModels.includes(sanitizedOpencodeDefaultModel)) {
+    sanitizedEnabledOpencodeModels.push(sanitizedOpencodeDefaultModel);
+  }
+
+  const persistedDynamicModelIds =
+    settings.enabledDynamicModelIds ?? current.enabledDynamicModelIds;
+  const sanitizedDynamicModelIds = persistedDynamicModelIds.filter(
+    (modelId) => !modelId.startsWith('amazon-bedrock/')
+  );
+
+  const persistedKnownDynamicModelIds =
+    settings.knownDynamicModelIds ?? current.knownDynamicModelIds;
+  const sanitizedKnownDynamicModelIds = persistedKnownDynamicModelIds.filter(
+    (modelId) => !modelId.startsWith('amazon-bedrock/')
+  );
+
+  // Convert ProjectRef[] to Project[] (minimal data, features will be loaded separately)
+  const projects = (settings.projects ?? []).map((ref) => ({
+    id: ref.id,
+    name: ref.name,
+    path: ref.path,
+    lastOpened: ref.lastOpened,
+    theme: ref.theme,
+    fontFamilySans: ref.fontFamilySans,
+    fontFamilyMono: ref.fontFamilyMono,
+    isFavorite: ref.isFavorite,
+    icon: ref.icon,
+    customIconPath: ref.customIconPath,
+    features: [], // Features are loaded separately when project is opened
+  }));
+
+  // Find the current project by ID
+  let currentProject = null;
+  if (settings.currentProjectId) {
+    currentProject = projects.find((p) => p.id === settings.currentProjectId) ?? null;
+    if (currentProject) {
+      logger.info(`Restoring current project: ${currentProject.name} (${currentProject.id})`);
+    }
+  }
+
+  // Save theme to localStorage for fallback when server settings aren't available
+  const storedTheme = (currentProject?.theme as string | undefined) || settings.theme;
+  if (storedTheme) {
+    setItem(THEME_STORAGE_KEY, storedTheme);
+  }
+
+  // Restore autoModeByWorktree settings (only maxConcurrency is persisted, runtime state is reset)
+  const restoredAutoModeByWorktree: Record<
+    string,
+    {
+      isRunning: boolean;
+      runningTasks: string[];
+      branchName: string | null;
+      maxConcurrency: number;
+    }
+  > = {};
+  if ((settings as unknown as Record<string, unknown>).autoModeByWorktree) {
+    const persistedSettings = (settings as unknown as Record<string, unknown>)
+      .autoModeByWorktree as Record<
+      string,
+      { maxConcurrency?: number; branchName?: string | null }
+    >;
+    for (const [key, value] of Object.entries(persistedSettings)) {
+      restoredAutoModeByWorktree[key] = {
+        isRunning: false, // Always start with auto mode off
+        runningTasks: [], // No running tasks on startup
+        branchName: value.branchName ?? null,
+        maxConcurrency: value.maxConcurrency ?? DEFAULT_MAX_CONCURRENCY,
+      };
+    }
+  }
+
+  useAppStore.setState({
+    theme: settings.theme as unknown as import('@/store/app-store').ThemeMode,
+    fontFamilySans: settings.fontFamilySans ?? null,
+    fontFamilyMono: settings.fontFamilyMono ?? null,
+    sidebarOpen: settings.sidebarOpen ?? true,
+    sidebarStyle: settings.sidebarStyle ?? 'unified',
+    collapsedNavSections: settings.collapsedNavSections ?? {},
+    chatHistoryOpen: settings.chatHistoryOpen ?? false,
+    maxConcurrency: settings.maxConcurrency ?? DEFAULT_MAX_CONCURRENCY,
+    autoModeByWorktree: restoredAutoModeByWorktree,
+    defaultSkipTests: settings.defaultSkipTests ?? true,
+    enableDependencyBlocking: settings.enableDependencyBlocking ?? true,
+    skipVerificationInAutoMode: settings.skipVerificationInAutoMode ?? false,
+    mergePostAction: settings.mergePostAction ?? null,
+    useWorktrees: settings.useWorktrees ?? true,
+    defaultPlanningMode: settings.defaultPlanningMode ?? 'skip',
+    defaultRequirePlanApproval: settings.defaultRequirePlanApproval ?? false,
+    defaultFeatureModel: migratePhaseModelEntry(settings.defaultFeatureModel) ?? {
+      model: 'claude-opus',
+      thinkingLevel: 'adaptive',
+    },
+    muteDoneSound: settings.muteDoneSound ?? false,
+    disableSplashScreen: settings.disableSplashScreen ?? false,
+    defaultSortNewestCardOnTop: settings.defaultSortNewestCardOnTop ?? false,
+    serverLogLevel: settings.serverLogLevel ?? 'info',
+    enableRequestLogging: settings.enableRequestLogging ?? true,
+    showQueryDevtools: settings.showQueryDevtools ?? true,
+    enhancementModel: settings.enhancementModel ?? 'claude-sonnet',
+    validationModel: settings.validationModel ?? 'claude-opus',
+    phaseModels: { ...DEFAULT_PHASE_MODELS, ...(settings.phaseModels ?? current.phaseModels) },
+    defaultThinkingLevel: settings.defaultThinkingLevel ?? 'adaptive',
+    defaultReasoningEffort: settings.defaultReasoningEffort ?? 'none',
+    enabledCursorModels: allCursorModels, // Always use ALL cursor models
+    cursorDefaultModel: sanitizedCursorDefaultModel,
+    enabledOpencodeModels: sanitizedEnabledOpencodeModels,
+    opencodeDefaultModel: sanitizedOpencodeDefaultModel,
+    enabledDynamicModelIds: sanitizedDynamicModelIds,
+    knownDynamicModelIds: sanitizedKnownDynamicModelIds,
+    disabledProviders: settings.disabledProviders ?? [],
+    enableAiCommitMessages: settings.enableAiCommitMessages ?? true,
+    enableSkills: settings.enableSkills ?? true,
+    skillsSources: settings.skillsSources ?? ['user', 'project'],
+    enableSubagents: settings.enableSubagents ?? true,
+    subagentsSources: settings.subagentsSources ?? ['user', 'project'],
+    autoLoadClaudeMd: settings.autoLoadClaudeMd ?? true,
+    useClaudeCodeSystemPrompt: settings.useClaudeCodeSystemPrompt ?? true,
+    skipSandboxWarning: settings.skipSandboxWarning ?? false,
+    codexAutoLoadAgents: settings.codexAutoLoadAgents ?? false,
+    codexSandboxMode: settings.codexSandboxMode ?? 'workspace-write',
+    codexApprovalPolicy: settings.codexApprovalPolicy ?? 'on-request',
+    codexEnableWebSearch: settings.codexEnableWebSearch ?? false,
+    codexEnableImages: settings.codexEnableImages ?? true,
+    codexAdditionalDirs: settings.codexAdditionalDirs ?? [],
+    codexThreadId: settings.codexThreadId,
+    keyboardShortcuts: {
+      ...current.keyboardShortcuts,
+      ...(settings.keyboardShortcuts as unknown as Partial<typeof current.keyboardShortcuts>),
+    },
+    mcpServers: settings.mcpServers ?? [],
+    promptCustomization: settings.promptCustomization ?? {},
+    eventHooks: settings.eventHooks ?? [],
+    ntfyEndpoints: settings.ntfyEndpoints ?? [],
+    featureTemplates: settings.featureTemplates ?? [],
+    claudeCompatibleProviders: settings.claudeCompatibleProviders ?? [],
+    claudeApiProfiles: settings.claudeApiProfiles ?? [],
+    activeClaudeApiProfileId: settings.activeClaudeApiProfileId ?? null,
+    projects,
+    currentProject,
+    trashedProjects: settings.trashedProjects ?? [],
+    projectHistory: settings.projectHistory ?? [],
+    projectHistoryIndex: settings.projectHistoryIndex ?? -1,
+    lastSelectedSessionByProject: settings.lastSelectedSessionByProject ?? {},
+    agentModelBySession: settings.agentModelBySession
+      ? Object.fromEntries(
+          Object.entries(settings.agentModelBySession as Record<string, unknown>).map(
+            ([sessionId, entry]) => [
+              sessionId,
+              migratePhaseModelEntry(entry as string | PhaseModelEntry | null | undefined),
+            ]
+          )
+        )
+      : current.agentModelBySession,
+    // Restore all valid worktree selections (both main branch and feature worktrees).
+    // The validation effect in use-worktrees.ts handles deleted worktrees gracefully
+    // by resetting to main branch when the worktree list loads and the cached
+    // worktree no longer exists.
+    currentWorktreeByProject: sanitizeWorktreeByProject(settings.currentWorktreeByProject),
+    // UI State
+    worktreePanelCollapsed: settings.worktreePanelCollapsed ?? false,
+    lastProjectDir: settings.lastProjectDir ?? '',
+    recentFolders: settings.recentFolders ?? [],
+    // File editor settings
+    editorFontSize: settings.editorFontSize ?? 13,
+    editorFontFamily: settings.editorFontFamily ?? 'default',
+    editorAutoSave: settings.editorAutoSave ?? false,
+    editorAutoSaveDelay: settings.editorAutoSaveDelay ?? 1000,
+    // Terminal settings (nested in terminalState)
+    ...((settings.terminalFontFamily ||
+      (settings as unknown as Record<string, unknown>).terminalCustomBackgroundColor !==
+        undefined ||
+      (settings as unknown as Record<string, unknown>).terminalCustomForegroundColor !==
+        undefined) && {
+      terminalState: {
+        ...current.terminalState,
+        ...(settings.terminalFontFamily && { fontFamily: settings.terminalFontFamily }),
+        ...((settings as unknown as Record<string, unknown>).terminalCustomBackgroundColor !==
+          undefined && {
+          customBackgroundColor: (settings as unknown as Record<string, unknown>)
+            .terminalCustomBackgroundColor as string | null,
+        }),
+        ...((settings as unknown as Record<string, unknown>).terminalCustomForegroundColor !==
+          undefined && {
+          customForegroundColor: (settings as unknown as Record<string, unknown>)
+            .terminalCustomForegroundColor as string | null,
+        }),
+      },
+    }),
+  });
+
+  // Hydrate setup wizard state from global settings (API-backed)
+  useSetupStore.setState({
+    setupComplete: settings.setupComplete ?? false,
+    isFirstRun: settings.isFirstRun ?? true,
+    skipClaudeSetup: settings.skipClaudeSetup ?? false,
+    currentStep: settings.setupComplete ? 'complete' : 'welcome',
+  });
+}
+
+/**
+ * Build settings update object from current store state
+ */
+function buildSettingsUpdateFromStore(): Record<string, unknown> {
+  const state = useAppStore.getState();
+  const setupState = useSetupStore.getState();
+
+  // Only persist settings (maxConcurrency), not runtime state (isRunning, runningTasks)
+  const persistedAutoModeByWorktree: Record<
+    string,
+    { maxConcurrency: number; branchName: string | null }
+  > = {};
+  for (const [key, value] of Object.entries(state.autoModeByWorktree)) {
+    persistedAutoModeByWorktree[key] = {
+      maxConcurrency: value.maxConcurrency ?? DEFAULT_MAX_CONCURRENCY,
+      branchName: value.branchName,
+    };
+  }
+
+  return {
+    setupComplete: setupState.setupComplete,
+    isFirstRun: setupState.isFirstRun,
+    skipClaudeSetup: setupState.skipClaudeSetup,
+    theme: state.theme,
+    sidebarOpen: state.sidebarOpen,
+    chatHistoryOpen: state.chatHistoryOpen,
+    maxConcurrency: state.maxConcurrency,
+    autoModeByWorktree: persistedAutoModeByWorktree,
+    defaultSkipTests: state.defaultSkipTests,
+    enableDependencyBlocking: state.enableDependencyBlocking,
+    skipVerificationInAutoMode: state.skipVerificationInAutoMode,
+    mergePostAction: state.mergePostAction,
+    useWorktrees: state.useWorktrees,
+    defaultPlanningMode: state.defaultPlanningMode,
+    defaultRequirePlanApproval: state.defaultRequirePlanApproval,
+    muteDoneSound: state.muteDoneSound,
+    disableSplashScreen: state.disableSplashScreen,
+    defaultSortNewestCardOnTop: state.defaultSortNewestCardOnTop,
+    serverLogLevel: state.serverLogLevel,
+    enableRequestLogging: state.enableRequestLogging,
+    enhancementModel: state.enhancementModel,
+    validationModel: state.validationModel,
+    phaseModels: state.phaseModels,
+    defaultThinkingLevel: state.defaultThinkingLevel,
+    defaultReasoningEffort: state.defaultReasoningEffort,
+    enabledDynamicModelIds: state.enabledDynamicModelIds,
+    knownDynamicModelIds: state.knownDynamicModelIds,
+    disabledProviders: state.disabledProviders,
+    enableAiCommitMessages: state.enableAiCommitMessages,
+    enableSkills: state.enableSkills,
+    skillsSources: state.skillsSources,
+    enableSubagents: state.enableSubagents,
+    subagentsSources: state.subagentsSources,
+    autoLoadClaudeMd: state.autoLoadClaudeMd,
+    useClaudeCodeSystemPrompt: state.useClaudeCodeSystemPrompt,
+    skipSandboxWarning: state.skipSandboxWarning,
+    codexAutoLoadAgents: state.codexAutoLoadAgents,
+    codexSandboxMode: state.codexSandboxMode,
+    codexApprovalPolicy: state.codexApprovalPolicy,
+    codexEnableWebSearch: state.codexEnableWebSearch,
+    codexEnableImages: state.codexEnableImages,
+    codexAdditionalDirs: state.codexAdditionalDirs,
+    codexThreadId: state.codexThreadId,
+    keyboardShortcuts: state.keyboardShortcuts,
+    mcpServers: state.mcpServers,
+    promptCustomization: state.promptCustomization,
+    eventHooks: state.eventHooks,
+    ntfyEndpoints: state.ntfyEndpoints,
+    featureTemplates: state.featureTemplates,
+    claudeCompatibleProviders: state.claudeCompatibleProviders,
+    claudeApiProfiles: state.claudeApiProfiles,
+    activeClaudeApiProfileId: state.activeClaudeApiProfileId,
+    projects: state.projects,
+    trashedProjects: state.trashedProjects,
+    currentProjectId: state.currentProject?.id ?? null,
+    projectHistory: state.projectHistory,
+    projectHistoryIndex: state.projectHistoryIndex,
+    lastSelectedSessionByProject: state.lastSelectedSessionByProject,
+    agentModelBySession: state.agentModelBySession,
+    currentWorktreeByProject: state.currentWorktreeByProject,
+    worktreePanelCollapsed: state.worktreePanelCollapsed,
+    lastProjectDir: state.lastProjectDir,
+    recentFolders: state.recentFolders,
+    editorFontSize: state.editorFontSize,
+    editorFontFamily: state.editorFontFamily,
+    editorAutoSave: state.editorAutoSave,
+    editorAutoSaveDelay: state.editorAutoSaveDelay,
+    terminalFontFamily: state.terminalState.fontFamily,
+    terminalCustomBackgroundColor: state.terminalState.customBackgroundColor,
+    terminalCustomForegroundColor: state.terminalState.customForegroundColor,
+  };
+}
+
+/**
+ * Sync current global settings to file-based server storage
+ *
+ * Reads the current Zustand state and sends all global settings
+ * to the server to be written to {dataDir}/settings.json.
+ *
+ * @returns Promise resolving to true if sync succeeded, false otherwise
+ */
+export async function syncSettingsToServer(): Promise<boolean> {
+  try {
+    const api = getHttpApiClient();
+    const updates = buildSettingsUpdateFromStore();
+    const result = await api.settings.updateGlobal(updates);
+    return result.success;
+  } catch (error) {
+    logger.error('Failed to sync settings:', error);
+    return false;
+  }
+}
+
+/**
+ * Sync API credentials to file-based server storage
+ *
+ * @param apiKeys - Partial credential object with optional anthropic, google, openai keys
+ * @returns Promise resolving to true if sync succeeded, false otherwise
+ */
+export async function syncCredentialsToServer(apiKeys: {
+  anthropic?: string;
+  google?: string;
+  openai?: string;
+}): Promise<boolean> {
+  try {
+    const api = getHttpApiClient();
+    const result = await api.settings.updateCredentials({ apiKeys });
+    return result.success;
+  } catch (error) {
+    logger.error('Failed to sync credentials:', error);
+    return false;
+  }
+}
+
+/**
+ * Sync project-specific settings to file-based server storage
+ *
+ * @param projectPath - Absolute path to project directory
+ * @param updates - Partial ProjectSettings
+ * @returns Promise resolving to true if sync succeeded, false otherwise
+ */
+export async function syncProjectSettingsToServer(
+  projectPath: string,
+  updates: {
+    theme?: string;
+    useWorktrees?: boolean;
+    boardBackground?: Record<string, unknown>;
+    currentWorktree?: { path: string | null; branch: string };
+    worktrees?: Array<{
+      path: string;
+      branch: string;
+      isMain: boolean;
+      hasChanges?: boolean;
+      changedFilesCount?: number;
+    }>;
+  }
+): Promise<boolean> {
+  try {
+    const api = getHttpApiClient();
+    const result = await api.settings.updateProject(projectPath, updates);
+    return result.success;
+  } catch (error) {
+    logger.error('Failed to sync project settings:', error);
+    return false;
+  }
+}
+
+/**
+ * Load MCP servers from server settings file into the store
+ *
+ * @returns Promise resolving to true if load succeeded, false otherwise
+ */
+export async function loadMCPServersFromServer(): Promise<boolean> {
+  try {
+    const api = getHttpApiClient();
+    const result = await api.settings.getGlobal();
+
+    if (!result.success || !result.settings) {
+      logger.error('Failed to load settings:', result.error);
+      return false;
+    }
+
+    const mcpServers = result.settings.mcpServers || [];
+    useAppStore.setState({ mcpServers });
+
+    logger.info(`Loaded ${mcpServers.length} MCP servers from server`);
+    return true;
+  } catch (error) {
+    logger.error('Failed to load MCP servers:', error);
+    return false;
+  }
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-settings-sync.ts b/temp_repo/apps/ui/src/hooks/use-settings-sync.ts
new file mode 100644
index 0000000000000000000000000000000000000000..29bcc8b5b166b0795bbee93f59826ad07062f178
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-settings-sync.ts
@@ -0,0 +1,933 @@
+/**
+ * Settings Sync Hook - API-First Settings Management
+ *
+ * This hook provides automatic settings synchronization to the server.
+ * It subscribes to Zustand store changes and syncs to API with debouncing.
+ *
+ * IMPORTANT: This hook waits for useSettingsMigration to complete before
+ * starting to sync. This prevents overwriting server data with empty state
+ * during the initial hydration phase.
+ *
+ * The server's settings.json file is the single source of truth.
+ */
+
+import { useEffect, useRef, useCallback, useState } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { getHttpApiClient, waitForApiKeyInit } from '@/lib/http-api-client';
+import { setItem } from '@/lib/storage';
+import { useAppStore, type ThemeMode, THEME_STORAGE_KEY } from '@/store/app-store';
+import { useSetupStore } from '@/store/setup-store';
+import { useAuthStore } from '@/store/auth-store';
+import { waitForMigrationComplete, resetMigrationState } from './use-settings-migration';
+import { sanitizeWorktreeByProject } from '@/lib/settings-utils';
+import {
+  DEFAULT_OPENCODE_MODEL,
+  DEFAULT_GEMINI_MODEL,
+  DEFAULT_COPILOT_MODEL,
+  DEFAULT_MAX_CONCURRENCY,
+  DEFAULT_PHASE_MODELS,
+  getAllOpencodeModelIds,
+  getAllCursorModelIds,
+  getAllGeminiModelIds,
+  getAllCopilotModelIds,
+  migrateCursorModelIds,
+  migrateOpencodeModelIds,
+  migratePhaseModelEntry,
+  type GlobalSettings,
+  type CursorModelId,
+  type GeminiModelId,
+  type CopilotModelId,
+  type PhaseModelEntry,
+} from '@automaker/types';
+
+const logger = createLogger('SettingsSync');
+
+// Debounce delay for syncing settings to server (ms)
+const SYNC_DEBOUNCE_MS = 1000;
+
+// Fields to sync to server (subset of AppState that should be persisted)
+const SETTINGS_FIELDS_TO_SYNC = [
+  'theme',
+  'fontFamilySans',
+  'fontFamilyMono',
+  'terminalFontFamily', // Maps to terminalState.fontFamily
+  'openTerminalMode', // Maps to terminalState.openTerminalMode
+  'terminalCustomBackgroundColor', // Maps to terminalState.customBackgroundColor
+  'terminalCustomForegroundColor', // Maps to terminalState.customForegroundColor
+  'sidebarOpen',
+  'sidebarStyle',
+  'collapsedNavSections',
+  'chatHistoryOpen',
+  'maxConcurrency',
+  'autoModeByWorktree', // Per-worktree auto mode settings (only maxConcurrency is persisted)
+  'defaultSkipTests',
+  'enableDependencyBlocking',
+  'skipVerificationInAutoMode',
+  'mergePostAction',
+  'useWorktrees',
+  'defaultPlanningMode',
+  'defaultRequirePlanApproval',
+  'defaultFeatureModel',
+  'muteDoneSound',
+  'disableSplashScreen',
+  'defaultSortNewestCardOnTop',
+  'serverLogLevel',
+  'enableRequestLogging',
+  'showQueryDevtools',
+  'enhancementModel',
+  'validationModel',
+  'phaseModels',
+  'defaultThinkingLevel',
+  'defaultReasoningEffort',
+  'enabledCursorModels',
+  'cursorDefaultModel',
+  'enabledOpencodeModels',
+  'opencodeDefaultModel',
+  'enabledGeminiModels',
+  'geminiDefaultModel',
+  'enabledCopilotModels',
+  'copilotDefaultModel',
+  'enabledDynamicModelIds',
+  'knownDynamicModelIds',
+  'disabledProviders',
+  'autoLoadClaudeMd',
+  'useClaudeCodeSystemPrompt',
+  'keyboardShortcuts',
+  'mcpServers',
+  'defaultEditorCommand',
+  'editorFontSize',
+  'editorFontFamily',
+  'editorAutoSave',
+  'editorAutoSaveDelay',
+  'defaultTerminalId',
+  'enableAiCommitMessages',
+  'enableSkills',
+  'skillsSources',
+  'enableSubagents',
+  'subagentsSources',
+  'promptCustomization',
+  'eventHooks',
+  'ntfyEndpoints',
+  'featureTemplates',
+  'claudeCompatibleProviders', // Claude-compatible provider configs - must persist to server
+  'claudeApiProfiles',
+  'activeClaudeApiProfileId',
+  'projects',
+  'trashedProjects',
+  'currentProjectId', // ID of currently open project
+  'projectHistory',
+  'projectHistoryIndex',
+  'lastSelectedSessionByProject',
+  'agentModelBySession',
+  'currentWorktreeByProject',
+  // Codex CLI Settings
+  'codexAutoLoadAgents',
+  'codexSandboxMode',
+  'codexApprovalPolicy',
+  'codexEnableWebSearch',
+  'codexEnableImages',
+  'codexAdditionalDirs',
+  'codexThreadId',
+  // Max Turns Setting
+  'defaultMaxTurns',
+  // UI State (previously in localStorage)
+  'worktreePanelCollapsed',
+  'lastProjectDir',
+  'recentFolders',
+] as const;
+
+// Fields from setup store to sync
+const SETUP_FIELDS_TO_SYNC = ['isFirstRun', 'setupComplete', 'skipClaudeSetup'] as const;
+
+/**
+ * Helper to extract a settings field value from app state
+ *
+ * Handles special cases where store fields don't map directly to settings:
+ * - currentProjectId: Extract from currentProject?.id
+ * - terminalFontFamily: Extract from terminalState.fontFamily
+ * - Other fields: Direct access
+ *
+ * @param field The settings field to extract
+ * @param appState Current app store state
+ * @returns The value of the field in the app state
+ */
+function getSettingsFieldValue(
+  field: (typeof SETTINGS_FIELDS_TO_SYNC)[number],
+  appState: ReturnType<typeof useAppStore.getState>
+): unknown {
+  if (field === 'currentProjectId') {
+    return appState.currentProject?.id ?? null;
+  }
+  if (field === 'terminalFontFamily') {
+    return appState.terminalState.fontFamily;
+  }
+  if (field === 'openTerminalMode') {
+    return appState.terminalState.openTerminalMode;
+  }
+  if (field === 'terminalCustomBackgroundColor') {
+    return appState.terminalState.customBackgroundColor;
+  }
+  if (field === 'terminalCustomForegroundColor') {
+    return appState.terminalState.customForegroundColor;
+  }
+  if (field === 'autoModeByWorktree') {
+    // Only persist settings (maxConcurrency), not runtime state (isRunning, runningTasks)
+    const autoModeByWorktree = appState.autoModeByWorktree;
+    const persistedSettings: Record<string, { maxConcurrency: number; branchName: string | null }> =
+      {};
+    for (const [key, value] of Object.entries(autoModeByWorktree)) {
+      persistedSettings[key] = {
+        maxConcurrency: value.maxConcurrency ?? DEFAULT_MAX_CONCURRENCY,
+        branchName: value.branchName,
+      };
+    }
+    return persistedSettings;
+  }
+  if (field === 'agentModelBySession') {
+    // Cap to the 50 most-recently-inserted session entries to prevent unbounded growth.
+    // agentModelBySession grows by one entry per agent session — without pruning this
+    // will bloat settings.json, every debounced sync payload, and the localStorage cache.
+    const map = appState.agentModelBySession as Record<string, unknown>;
+    const MAX_ENTRIES = 50;
+    const entries = Object.entries(map);
+    if (entries.length <= MAX_ENTRIES) return map;
+    // Keep the last MAX_ENTRIES entries (insertion-order approximation for recency)
+    return Object.fromEntries(entries.slice(-MAX_ENTRIES));
+  }
+  return appState[field as keyof typeof appState];
+}
+
+/**
+ * Helper to check if a settings field changed between states
+ *
+ * Compares field values between old and new state, handling special cases:
+ * - currentProjectId: Compare currentProject?.id values
+ * - terminalFontFamily: Compare terminalState.fontFamily values
+ * - Other fields: Direct reference equality check
+ *
+ * @param field The settings field to check
+ * @param newState New app store state
+ * @param prevState Previous app store state
+ * @returns true if the field value changed between states
+ */
+function hasSettingsFieldChanged(
+  field: (typeof SETTINGS_FIELDS_TO_SYNC)[number],
+  newState: ReturnType<typeof useAppStore.getState>,
+  prevState: ReturnType<typeof useAppStore.getState>
+): boolean {
+  if (field === 'currentProjectId') {
+    return newState.currentProject?.id !== prevState.currentProject?.id;
+  }
+  if (field === 'terminalFontFamily') {
+    return newState.terminalState.fontFamily !== prevState.terminalState.fontFamily;
+  }
+  if (field === 'openTerminalMode') {
+    return newState.terminalState.openTerminalMode !== prevState.terminalState.openTerminalMode;
+  }
+  if (field === 'terminalCustomBackgroundColor') {
+    return (
+      newState.terminalState.customBackgroundColor !== prevState.terminalState.customBackgroundColor
+    );
+  }
+  if (field === 'terminalCustomForegroundColor') {
+    return (
+      newState.terminalState.customForegroundColor !== prevState.terminalState.customForegroundColor
+    );
+  }
+  const key = field as keyof typeof newState;
+  return newState[key] !== prevState[key];
+}
+
+interface SettingsSyncState {
+  /** Whether initial settings have been loaded from API */
+  loaded: boolean;
+  /** Whether there was an error loading settings */
+  error: string | null;
+  /** Whether settings are currently being synced to server */
+  syncing: boolean;
+}
+
+/**
+ * Hook to sync settings changes to server with debouncing
+ *
+ * Usage: Call this hook once at the app root level (e.g., in App.tsx)
+ * AFTER useSettingsMigration.
+ *
+ * @returns SettingsSyncState with loaded, error, and syncing fields
+ */
+export function useSettingsSync(): SettingsSyncState {
+  const [state, setState] = useState<SettingsSyncState>({
+    loaded: false,
+    error: null,
+    syncing: false,
+  });
+
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  const authChecked = useAuthStore((s) => s.authChecked);
+  const settingsLoaded = useAuthStore((s) => s.settingsLoaded);
+
+  const syncTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastSyncedRef = useRef<string>('');
+  const isInitializedRef = useRef(false);
+
+  // If auth is lost (logout / session expired), immediately stop syncing and
+  // reset initialization so we can safely re-init after the next login.
+  useEffect(() => {
+    if (!authChecked) return;
+
+    if (!isAuthenticated) {
+      if (syncTimeoutRef.current) {
+        clearTimeout(syncTimeoutRef.current);
+        syncTimeoutRef.current = null;
+      }
+      lastSyncedRef.current = '';
+      isInitializedRef.current = false;
+
+      // Reset migration state so next login properly waits for fresh hydration
+      resetMigrationState();
+
+      setState({ loaded: false, error: null, syncing: false });
+    }
+  }, [authChecked, isAuthenticated]);
+
+  // Debounced sync function
+  const syncToServer = useCallback(async () => {
+    try {
+      // Never sync when not authenticated or settings not loaded
+      // The settingsLoaded flag ensures we don't sync default empty state before hydration
+      const auth = useAuthStore.getState();
+      logger.debug('[SYNC_CHECK] Auth state:', {
+        authChecked: auth.authChecked,
+        isAuthenticated: auth.isAuthenticated,
+        settingsLoaded: auth.settingsLoaded,
+        projectsCount: useAppStore.getState().projects?.length ?? 0,
+      });
+      if (!auth.authChecked || !auth.isAuthenticated || !auth.settingsLoaded) {
+        logger.warn('[SYNC_SKIPPED] Not ready:', {
+          authChecked: auth.authChecked,
+          isAuthenticated: auth.isAuthenticated,
+          settingsLoaded: auth.settingsLoaded,
+        });
+        return;
+      }
+
+      setState((s) => ({ ...s, syncing: true }));
+      const api = getHttpApiClient();
+      const appState = useAppStore.getState();
+
+      logger.info('[SYNC_START] Syncing to server:', {
+        projectsCount: appState.projects?.length ?? 0,
+      });
+
+      // Build updates object from current state
+      const updates: Record<string, unknown> = {};
+      for (const field of SETTINGS_FIELDS_TO_SYNC) {
+        updates[field] = getSettingsFieldValue(field, appState);
+      }
+
+      // Include setup wizard state (lives in a separate store)
+      const setupState = useSetupStore.getState();
+      for (const field of SETUP_FIELDS_TO_SYNC) {
+        updates[field] = setupState[field as keyof typeof setupState];
+      }
+
+      // Create a hash of the updates to avoid redundant syncs
+      const updateHash = JSON.stringify(updates);
+      if (updateHash === lastSyncedRef.current) {
+        logger.debug('[SYNC_SKIP_IDENTICAL] No changes from last sync');
+        setState((s) => ({ ...s, syncing: false }));
+        return;
+      }
+
+      logger.info('[SYNC_SEND] Sending settings update to server:', {
+        projects: Array.isArray(updates.projects) ? updates.projects.length : 0,
+        trashedProjects: Array.isArray(updates.trashedProjects)
+          ? updates.trashedProjects.length
+          : 0,
+      });
+
+      const result = await api.settings.updateGlobal(updates);
+      logger.info('[SYNC_RESPONSE] Server response:', { success: result.success });
+      if (result.success) {
+        lastSyncedRef.current = updateHash;
+        logger.debug('Settings synced to server');
+
+        // Update localStorage cache with synced settings to keep it fresh
+        // This prevents stale data when switching between Electron and web modes
+        try {
+          setItem('automaker-settings-cache', JSON.stringify(updates));
+          logger.debug('Updated localStorage cache after sync');
+        } catch (storageError) {
+          logger.warn('Failed to update localStorage cache after sync:', storageError);
+        }
+      } else {
+        logger.error('Failed to sync settings:', result.error);
+      }
+    } catch (error) {
+      logger.error('Failed to sync settings to server:', error);
+    } finally {
+      setState((s) => ({ ...s, syncing: false }));
+    }
+  }, []);
+
+  // Schedule debounced sync
+  const scheduleSyncToServer = useCallback(() => {
+    if (syncTimeoutRef.current) {
+      clearTimeout(syncTimeoutRef.current);
+    }
+    syncTimeoutRef.current = setTimeout(() => {
+      syncToServer();
+    }, SYNC_DEBOUNCE_MS);
+  }, [syncToServer]);
+
+  // Immediate sync helper for critical state (e.g., current project selection)
+  const syncNow = useCallback(() => {
+    if (syncTimeoutRef.current) {
+      clearTimeout(syncTimeoutRef.current);
+      syncTimeoutRef.current = null;
+    }
+    void syncToServer();
+  }, [syncToServer]);
+
+  // Initialize sync - WAIT for settings to be loaded and migration to complete
+  useEffect(() => {
+    // Don't initialize syncing until:
+    // 1. Auth has been checked
+    // 2. User is authenticated
+    // 3. Settings have been loaded from server (settingsLoaded flag)
+    // This prevents syncing empty/default state before hydration completes.
+    logger.debug('useSettingsSync initialization check:', {
+      authChecked,
+      isAuthenticated,
+      settingsLoaded,
+      stateLoaded: state.loaded,
+    });
+    if (!authChecked || !isAuthenticated || !settingsLoaded) return;
+    if (isInitializedRef.current) return;
+    isInitializedRef.current = true;
+
+    async function initializeSync() {
+      try {
+        // Wait for API key to be ready
+        await waitForApiKeyInit();
+
+        // CRITICAL: Wait for migration/hydration to complete before we start syncing
+        // This is a backup to the settingsLoaded flag for extra safety
+        logger.info('Waiting for migration to complete before starting sync...');
+        await waitForMigrationComplete();
+
+        // Wait for React to finish rendering after store hydration.
+        // Zustand's subscribe() fires during setState(), which happens BEFORE React's
+        // render completes. Use a small delay to ensure all pending state updates
+        // have propagated through the React tree before we read state.
+        await new Promise((resolve) => setTimeout(resolve, 50));
+
+        logger.info('Migration complete, initializing sync');
+
+        // Read state - at this point React has processed the store update
+        const appState = useAppStore.getState();
+        const setupState = useSetupStore.getState();
+
+        logger.info('Initial state read:', { projectsCount: appState.projects?.length ?? 0 });
+
+        // Store the initial state hash to avoid immediate re-sync
+        // (migration has already hydrated the store from server/localStorage)
+        const updates: Record<string, unknown> = {};
+        for (const field of SETTINGS_FIELDS_TO_SYNC) {
+          updates[field] = getSettingsFieldValue(field, appState);
+        }
+        for (const field of SETUP_FIELDS_TO_SYNC) {
+          updates[field] = setupState[field as keyof typeof setupState];
+        }
+        lastSyncedRef.current = JSON.stringify(updates);
+
+        logger.info('Settings sync initialized');
+        setState({ loaded: true, error: null, syncing: false });
+      } catch (error) {
+        logger.error('Failed to initialize settings sync:', error);
+        setState({
+          loaded: true,
+          error: error instanceof Error ? error.message : 'Unknown error',
+          syncing: false,
+        });
+      }
+    }
+
+    initializeSync();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- state.loaded is intentionally excluded to prevent infinite loop
+  }, [authChecked, isAuthenticated, settingsLoaded]);
+
+  // Subscribe to store changes and sync to server
+  useEffect(() => {
+    if (!state.loaded || !authChecked || !isAuthenticated || !settingsLoaded) return;
+
+    // Subscribe to app store changes
+    const unsubscribeApp = useAppStore.subscribe((newState, prevState) => {
+      const auth = useAuthStore.getState();
+      logger.debug('Store subscription fired:', {
+        prevProjects: prevState.projects?.length ?? 0,
+        newProjects: newState.projects?.length ?? 0,
+        authChecked: auth.authChecked,
+        isAuthenticated: auth.isAuthenticated,
+        settingsLoaded: auth.settingsLoaded,
+        loaded: state.loaded,
+      });
+
+      // Don't sync if settings not loaded yet
+      if (!auth.settingsLoaded) {
+        logger.debug('Store changed but settings not loaded, skipping sync');
+        return;
+      }
+
+      // If the current project changed, sync immediately so we can restore on next launch
+      if (newState.currentProject?.id !== prevState.currentProject?.id) {
+        logger.debug('Current project changed, syncing immediately');
+        syncNow();
+        return;
+      }
+
+      // If the sort preference changed, sync immediately so it survives a page refresh
+      // before the debounce timer fires (1s debounce would be lost on quick refresh).
+      if (newState.defaultSortNewestCardOnTop !== prevState.defaultSortNewestCardOnTop) {
+        logger.debug('defaultSortNewestCardOnTop changed, syncing immediately');
+        syncNow();
+        return;
+      }
+
+      // If projects array changed *meaningfully*, sync immediately.
+      // This is critical — projects list changes must sync right away to prevent loss
+      // when switching between Electron and web modes or closing the app.
+      //
+      // We compare by content (IDs, names, and paths), NOT by reference. The background
+      // reconcile in __root.tsx calls hydrateStoreFromSettings() with server data,
+      // which always creates a new projects array (.map() produces a new reference).
+      // A reference-only check would trigger an immediate sync-back to the server
+      // with identical data, causing a visible re-render flash on mobile.
+      if (newState.projects !== prevState.projects) {
+        const prevIds = prevState.projects
+          ?.map((p) => JSON.stringify([p.id, p.name, p.path]))
+          .join(',');
+        const newIds = newState.projects
+          ?.map((p) => JSON.stringify([p.id, p.name, p.path]))
+          .join(',');
+        if (prevIds !== newIds) {
+          logger.info('[PROJECTS_CHANGED] Projects array changed, syncing immediately', {
+            prevCount: prevState.projects?.length ?? 0,
+            newCount: newState.projects?.length ?? 0,
+          });
+          syncNow();
+          // Don't return here — fall through so the general loop below can still
+          // detect and schedule a debounced sync for other project-field mutations
+          // (e.g. lastOpened) that the id/name/path comparison above doesn't cover.
+        } else {
+          // The projects array reference changed but id/name/path are identical.
+          // This means nested project fields mutated (e.g. lastOpened, remotes).
+          // Schedule a debounced sync so these mutations reach the server.
+          logger.debug('[PROJECTS_NESTED_CHANGE] Projects nested fields changed, scheduling sync');
+          scheduleSyncToServer();
+        }
+      }
+
+      // Check if any other synced field changed
+      let changed = false;
+      for (const field of SETTINGS_FIELDS_TO_SYNC) {
+        if (field === 'projects') continue; // Already handled above
+        if (hasSettingsFieldChanged(field, newState, prevState)) {
+          changed = true;
+          break;
+        }
+      }
+
+      if (changed) {
+        logger.debug('Store changed, scheduling sync');
+        scheduleSyncToServer();
+      }
+    });
+
+    // Subscribe to setup store changes
+    const unsubscribeSetup = useSetupStore.subscribe((newState, prevState) => {
+      let changed = false;
+      for (const field of SETUP_FIELDS_TO_SYNC) {
+        const key = field as keyof typeof newState;
+        if (newState[key] !== prevState[key]) {
+          changed = true;
+          break;
+        }
+      }
+
+      if (changed) {
+        // Setup store changes also trigger a sync of all settings
+        scheduleSyncToServer();
+      }
+    });
+
+    return () => {
+      unsubscribeApp();
+      unsubscribeSetup();
+      if (syncTimeoutRef.current) {
+        clearTimeout(syncTimeoutRef.current);
+      }
+    };
+  }, [state.loaded, authChecked, isAuthenticated, settingsLoaded, scheduleSyncToServer, syncNow]);
+
+  // Best-effort flush on tab close / backgrounding
+  useEffect(() => {
+    if (!state.loaded || !authChecked || !isAuthenticated || !settingsLoaded) return;
+
+    const handleBeforeUnload = () => {
+      // Fire-and-forget; may not complete in all browsers, but helps in Electron/webview
+      syncNow();
+    };
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'hidden') {
+        syncNow();
+      }
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [state.loaded, authChecked, isAuthenticated, settingsLoaded, syncNow]);
+
+  return state;
+}
+
+/**
+ * Manually trigger a sync to server
+ * Use this when you need immediate persistence (e.g., before app close)
+ */
+export async function forceSyncSettingsToServer(): Promise<boolean> {
+  try {
+    const api = getHttpApiClient();
+    const appState = useAppStore.getState();
+
+    const updates: Record<string, unknown> = {};
+    for (const field of SETTINGS_FIELDS_TO_SYNC) {
+      updates[field] = getSettingsFieldValue(field, appState);
+    }
+    const setupState = useSetupStore.getState();
+    for (const field of SETUP_FIELDS_TO_SYNC) {
+      updates[field] = setupState[field as keyof typeof setupState];
+    }
+
+    // Update localStorage cache immediately so a page reload before the
+    // server response arrives still sees the latest state (e.g. after
+    // deleting a worktree, the stale worktree path won't survive in cache).
+    try {
+      setItem('automaker-settings-cache', JSON.stringify(updates));
+    } catch (storageError) {
+      logger.warn('Failed to update localStorage cache during force sync:', storageError);
+    }
+
+    const result = await api.settings.updateGlobal(updates);
+    return result.success;
+  } catch (error) {
+    logger.error('Failed to force sync settings:', error);
+    return false;
+  }
+}
+
+/**
+ * Fetch latest settings from server and update store
+ * Use this to refresh settings if they may have been modified externally
+ */
+export async function refreshSettingsFromServer(): Promise<boolean> {
+  try {
+    const api = getHttpApiClient();
+    const result = await api.settings.getGlobal();
+
+    if (!result.success || !result.settings) {
+      return false;
+    }
+
+    const serverSettings = result.settings as unknown as GlobalSettings;
+    const currentAppState = useAppStore.getState();
+
+    // Cursor models - ALWAYS use ALL available models to ensure new models are visible
+    const allCursorModels = getAllCursorModelIds();
+    const validCursorModelIds = new Set(allCursorModels);
+
+    // Migrate Cursor default model
+    const migratedCursorDefault = migrateCursorModelIds([
+      serverSettings.cursorDefaultModel ?? 'cursor-auto',
+    ])[0];
+    const sanitizedCursorDefault = validCursorModelIds.has(migratedCursorDefault)
+      ? migratedCursorDefault
+      : ('cursor-auto' as CursorModelId);
+
+    // Migrate OpenCode models to canonical format
+    const migratedOpencodeModels = migrateOpencodeModelIds(
+      serverSettings.enabledOpencodeModels ?? []
+    );
+    const validOpencodeModelIds = new Set(getAllOpencodeModelIds());
+    const sanitizedEnabledOpencodeModels = migratedOpencodeModels.filter((id) =>
+      validOpencodeModelIds.has(id)
+    );
+
+    // Migrate OpenCode default model
+    const migratedOpencodeDefault = migrateOpencodeModelIds([
+      serverSettings.opencodeDefaultModel ?? DEFAULT_OPENCODE_MODEL,
+    ])[0];
+    const sanitizedOpencodeDefaultModel = validOpencodeModelIds.has(migratedOpencodeDefault)
+      ? migratedOpencodeDefault
+      : DEFAULT_OPENCODE_MODEL;
+
+    if (!sanitizedEnabledOpencodeModels.includes(sanitizedOpencodeDefaultModel)) {
+      sanitizedEnabledOpencodeModels.push(sanitizedOpencodeDefaultModel);
+    }
+
+    // Sanitize Gemini models
+    const validGeminiModelIds = new Set(getAllGeminiModelIds());
+    const sanitizedEnabledGeminiModels = (serverSettings.enabledGeminiModels ?? []).filter(
+      (id): id is GeminiModelId => validGeminiModelIds.has(id as GeminiModelId)
+    );
+    const sanitizedGeminiDefaultModel = validGeminiModelIds.has(
+      serverSettings.geminiDefaultModel as GeminiModelId
+    )
+      ? (serverSettings.geminiDefaultModel as GeminiModelId)
+      : DEFAULT_GEMINI_MODEL;
+
+    if (!sanitizedEnabledGeminiModels.includes(sanitizedGeminiDefaultModel)) {
+      sanitizedEnabledGeminiModels.push(sanitizedGeminiDefaultModel);
+    }
+
+    // Sanitize Copilot models
+    const validCopilotModelIds = new Set(getAllCopilotModelIds());
+    const sanitizedEnabledCopilotModels = (serverSettings.enabledCopilotModels ?? []).filter(
+      (id): id is CopilotModelId => validCopilotModelIds.has(id as CopilotModelId)
+    );
+    const sanitizedCopilotDefaultModel = validCopilotModelIds.has(
+      serverSettings.copilotDefaultModel as CopilotModelId
+    )
+      ? (serverSettings.copilotDefaultModel as CopilotModelId)
+      : DEFAULT_COPILOT_MODEL;
+
+    if (!sanitizedEnabledCopilotModels.includes(sanitizedCopilotDefaultModel)) {
+      sanitizedEnabledCopilotModels.push(sanitizedCopilotDefaultModel);
+    }
+
+    const persistedDynamicModelIds =
+      serverSettings.enabledDynamicModelIds ?? currentAppState.enabledDynamicModelIds;
+    const sanitizedDynamicModelIds = persistedDynamicModelIds.filter(
+      (modelId) => !modelId.startsWith('amazon-bedrock/')
+    );
+
+    const persistedKnownDynamicModelIds =
+      serverSettings.knownDynamicModelIds ?? currentAppState.knownDynamicModelIds;
+    const sanitizedKnownDynamicModelIds = persistedKnownDynamicModelIds.filter(
+      (modelId) => !modelId.startsWith('amazon-bedrock/')
+    );
+
+    // Migrate phase models to canonical format
+    const migratedPhaseModels = serverSettings.phaseModels
+      ? {
+          enhancementModel: migratePhaseModelEntry(serverSettings.phaseModels.enhancementModel),
+          fileDescriptionModel: migratePhaseModelEntry(
+            serverSettings.phaseModels.fileDescriptionModel
+          ),
+          imageDescriptionModel: migratePhaseModelEntry(
+            serverSettings.phaseModels.imageDescriptionModel
+          ),
+          validationModel: migratePhaseModelEntry(serverSettings.phaseModels.validationModel),
+          specGenerationModel: migratePhaseModelEntry(
+            serverSettings.phaseModels.specGenerationModel
+          ),
+          featureGenerationModel: migratePhaseModelEntry(
+            serverSettings.phaseModels.featureGenerationModel
+          ),
+          backlogPlanningModel: migratePhaseModelEntry(
+            serverSettings.phaseModels.backlogPlanningModel
+          ),
+          projectAnalysisModel: migratePhaseModelEntry(
+            serverSettings.phaseModels.projectAnalysisModel
+          ),
+          ideationModel: migratePhaseModelEntry(serverSettings.phaseModels.ideationModel),
+          memoryExtractionModel: migratePhaseModelEntry(
+            serverSettings.phaseModels.memoryExtractionModel
+          ),
+          commitMessageModel: migratePhaseModelEntry(serverSettings.phaseModels.commitMessageModel),
+          prDescriptionModel: migratePhaseModelEntry(serverSettings.phaseModels.prDescriptionModel),
+        }
+      : undefined;
+
+    // Save theme to localStorage for fallback when server settings aren't available
+    if (serverSettings.theme) {
+      setItem(THEME_STORAGE_KEY, serverSettings.theme);
+    }
+
+    // Restore autoModeByWorktree settings (only maxConcurrency is persisted, runtime state is reset)
+    const restoredAutoModeByWorktree: Record<
+      string,
+      {
+        isRunning: boolean;
+        runningTasks: string[];
+        branchName: string | null;
+        maxConcurrency: number;
+      }
+    > = {};
+    if (serverSettings.autoModeByWorktree) {
+      const persistedSettings = serverSettings.autoModeByWorktree as Record<
+        string,
+        { maxConcurrency?: number; branchName?: string | null }
+      >;
+      for (const [key, value] of Object.entries(persistedSettings)) {
+        restoredAutoModeByWorktree[key] = {
+          isRunning: false, // Always start with auto mode off
+          runningTasks: [], // No running tasks on startup
+          branchName: value.branchName ?? null,
+          maxConcurrency: value.maxConcurrency ?? DEFAULT_MAX_CONCURRENCY,
+        };
+      }
+    }
+
+    useAppStore.setState({
+      theme: serverSettings.theme as unknown as ThemeMode,
+      sidebarOpen: serverSettings.sidebarOpen,
+      sidebarStyle: serverSettings.sidebarStyle ?? 'unified',
+      collapsedNavSections: serverSettings.collapsedNavSections ?? {},
+      chatHistoryOpen: serverSettings.chatHistoryOpen,
+      maxConcurrency: serverSettings.maxConcurrency,
+      autoModeByWorktree: restoredAutoModeByWorktree,
+      defaultSkipTests: serverSettings.defaultSkipTests,
+      enableDependencyBlocking: serverSettings.enableDependencyBlocking,
+      skipVerificationInAutoMode: serverSettings.skipVerificationInAutoMode,
+      mergePostAction: serverSettings.mergePostAction ?? null,
+      useWorktrees: serverSettings.useWorktrees,
+      defaultPlanningMode: serverSettings.defaultPlanningMode,
+      defaultRequirePlanApproval: serverSettings.defaultRequirePlanApproval,
+      defaultFeatureModel: serverSettings.defaultFeatureModel
+        ? migratePhaseModelEntry(serverSettings.defaultFeatureModel)
+        : { model: 'claude-opus', thinkingLevel: 'adaptive' },
+      muteDoneSound: serverSettings.muteDoneSound,
+      defaultMaxTurns: serverSettings.defaultMaxTurns ?? 10000,
+      disableSplashScreen: serverSettings.disableSplashScreen ?? false,
+      defaultSortNewestCardOnTop: serverSettings.defaultSortNewestCardOnTop ?? false,
+      serverLogLevel: serverSettings.serverLogLevel ?? 'info',
+      enableRequestLogging: serverSettings.enableRequestLogging ?? true,
+      enhancementModel: serverSettings.enhancementModel,
+      validationModel: serverSettings.validationModel,
+      phaseModels: {
+        ...DEFAULT_PHASE_MODELS,
+        ...(migratedPhaseModels ?? serverSettings.phaseModels),
+      },
+      defaultThinkingLevel: serverSettings.defaultThinkingLevel ?? 'adaptive',
+      defaultReasoningEffort: serverSettings.defaultReasoningEffort ?? 'none',
+      enabledCursorModels: allCursorModels, // Always use ALL cursor models
+      cursorDefaultModel: sanitizedCursorDefault,
+      enabledOpencodeModels: sanitizedEnabledOpencodeModels,
+      opencodeDefaultModel: sanitizedOpencodeDefaultModel,
+      enabledGeminiModels: sanitizedEnabledGeminiModels,
+      geminiDefaultModel: sanitizedGeminiDefaultModel,
+      enabledCopilotModels: sanitizedEnabledCopilotModels,
+      copilotDefaultModel: sanitizedCopilotDefaultModel,
+      enabledDynamicModelIds: sanitizedDynamicModelIds,
+      knownDynamicModelIds: sanitizedKnownDynamicModelIds,
+      disabledProviders: serverSettings.disabledProviders ?? [],
+      autoLoadClaudeMd: serverSettings.autoLoadClaudeMd ?? true,
+      useClaudeCodeSystemPrompt: serverSettings.useClaudeCodeSystemPrompt ?? true,
+      keyboardShortcuts: {
+        ...currentAppState.keyboardShortcuts,
+        ...(serverSettings.keyboardShortcuts as unknown as Partial<
+          typeof currentAppState.keyboardShortcuts
+        >),
+      },
+      mcpServers: serverSettings.mcpServers,
+      defaultEditorCommand: serverSettings.defaultEditorCommand ?? null,
+      editorFontSize: serverSettings.editorFontSize ?? 13,
+      editorFontFamily: serverSettings.editorFontFamily ?? 'default',
+      editorAutoSave: serverSettings.editorAutoSave ?? false,
+      editorAutoSaveDelay: serverSettings.editorAutoSaveDelay ?? 1000,
+      defaultTerminalId: serverSettings.defaultTerminalId ?? null,
+      promptCustomization: serverSettings.promptCustomization ?? {},
+      // Claude-compatible providers - must be loaded from server for persistence
+      claudeCompatibleProviders: serverSettings.claudeCompatibleProviders ?? [],
+      // Deprecated Claude API profiles (kept for migration)
+      claudeApiProfiles: serverSettings.claudeApiProfiles ?? [],
+      activeClaudeApiProfileId: serverSettings.activeClaudeApiProfileId ?? null,
+      projects: serverSettings.projects,
+      trashedProjects: serverSettings.trashedProjects,
+      projectHistory: serverSettings.projectHistory,
+      projectHistoryIndex: serverSettings.projectHistoryIndex,
+      lastSelectedSessionByProject: serverSettings.lastSelectedSessionByProject,
+      agentModelBySession: serverSettings.agentModelBySession
+        ? Object.fromEntries(
+            Object.entries(serverSettings.agentModelBySession as Record<string, unknown>).map(
+              ([sessionId, entry]) => [
+                sessionId,
+                migratePhaseModelEntry(entry as string | PhaseModelEntry | null | undefined),
+              ]
+            )
+          )
+        : currentAppState.agentModelBySession,
+      // Restore all valid worktree selections (both main branch and feature worktrees).
+      // The validation effect in use-worktrees.ts handles deleted worktrees gracefully.
+      currentWorktreeByProject: sanitizeWorktreeByProject(
+        serverSettings.currentWorktreeByProject ?? currentAppState.currentWorktreeByProject
+      ),
+      // UI State (previously in localStorage)
+      worktreePanelCollapsed: serverSettings.worktreePanelCollapsed ?? false,
+      lastProjectDir: serverSettings.lastProjectDir ?? '',
+      recentFolders: serverSettings.recentFolders ?? [],
+      // Event hooks
+      eventHooks: serverSettings.eventHooks ?? [],
+      // Ntfy endpoints
+      ntfyEndpoints: serverSettings.ntfyEndpoints ?? [],
+      // Feature templates
+      featureTemplates: serverSettings.featureTemplates ?? [],
+      // Codex CLI Settings
+      codexAutoLoadAgents: serverSettings.codexAutoLoadAgents ?? false,
+      codexSandboxMode: serverSettings.codexSandboxMode ?? 'workspace-write',
+      codexApprovalPolicy: serverSettings.codexApprovalPolicy ?? 'on-request',
+      codexEnableWebSearch: serverSettings.codexEnableWebSearch ?? false,
+      codexEnableImages: serverSettings.codexEnableImages ?? true,
+      codexAdditionalDirs: serverSettings.codexAdditionalDirs ?? [],
+      codexThreadId: serverSettings.codexThreadId,
+      // Terminal settings (nested in terminalState)
+      ...((serverSettings.terminalFontFamily ||
+        serverSettings.openTerminalMode ||
+        (serverSettings as unknown as Record<string, unknown>).terminalCustomBackgroundColor !==
+          undefined ||
+        (serverSettings as unknown as Record<string, unknown>).terminalCustomForegroundColor !==
+          undefined) && {
+        terminalState: {
+          ...currentAppState.terminalState,
+          ...(serverSettings.terminalFontFamily && {
+            fontFamily: serverSettings.terminalFontFamily,
+          }),
+          ...(serverSettings.openTerminalMode && {
+            openTerminalMode: serverSettings.openTerminalMode,
+          }),
+          ...((serverSettings as unknown as Record<string, unknown>)
+            .terminalCustomBackgroundColor !== undefined && {
+            customBackgroundColor: (serverSettings as unknown as Record<string, unknown>)
+              .terminalCustomBackgroundColor as string | null,
+          }),
+          ...((serverSettings as unknown as Record<string, unknown>)
+            .terminalCustomForegroundColor !== undefined && {
+            customForegroundColor: (serverSettings as unknown as Record<string, unknown>)
+              .terminalCustomForegroundColor as string | null,
+          }),
+        },
+      }),
+    });
+
+    // Also refresh setup wizard state
+    useSetupStore.setState({
+      setupComplete: serverSettings.setupComplete ?? false,
+      isFirstRun: serverSettings.isFirstRun ?? true,
+      skipClaudeSetup: serverSettings.skipClaudeSetup ?? false,
+      currentStep: serverSettings.setupComplete ? 'complete' : 'welcome',
+    });
+
+    logger.info('Settings refreshed from server');
+    return true;
+  } catch (error) {
+    logger.error('Failed to refresh settings from server:', error);
+    return false;
+  }
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-test-logs.ts b/temp_repo/apps/ui/src/hooks/use-test-logs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..596d78957be8b5d5d3192d7ccc2a5f6f5327b4ef
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-test-logs.ts
@@ -0,0 +1,396 @@
+/**
+ * useTestLogs - Hook for test log streaming and retrieval
+ *
+ * This hook provides a focused interface for:
+ * - Fetching initial buffered test logs
+ * - Subscribing to real-time log streaming
+ * - Managing log state for display components
+ *
+ * Unlike useTestRunners, this hook focuses solely on log retrieval
+ * and streaming, making it ideal for log display components.
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { createLogger } from '@automaker/utils/logger';
+import { getElectronAPI } from '@/lib/electron';
+import { pathsEqual } from '@/lib/utils';
+import type {
+  TestRunStatus,
+  TestRunnerStartedEvent,
+  TestRunnerOutputEvent,
+  TestRunnerCompletedEvent,
+} from '@/types/electron';
+
+const logger = createLogger('TestLogs');
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * State for test log management
+ */
+export interface TestLogState {
+  /** The accumulated log content */
+  logs: string;
+  /** Whether initial logs are being fetched */
+  isLoading: boolean;
+  /** Error message if fetching logs failed */
+  error: string | null;
+  /** Current status of the test run */
+  status: TestRunStatus | null;
+  /** Session ID of the current test run */
+  sessionId: string | null;
+  /** The test command being run (from project settings) */
+  command: string | null;
+  /** Specific test file being run (if applicable) */
+  testFile: string | null;
+  /** Timestamp when the test run started */
+  startedAt: string | null;
+  /** Timestamp when the test run finished (if completed) */
+  finishedAt: string | null;
+  /** Exit code (if test run completed) */
+  exitCode: number | null;
+  /** Duration in milliseconds (if completed) */
+  duration: number | null;
+}
+
+/**
+ * Options for the useTestLogs hook
+ */
+export interface UseTestLogsOptions {
+  /** Path to the worktree to monitor logs for */
+  worktreePath: string | null;
+  /** Specific session ID to fetch logs for (optional - will get active/recent if not provided) */
+  sessionId?: string;
+  /** Whether to automatically subscribe to log events (default: true) */
+  autoSubscribe?: boolean;
+}
+
+// ============================================================================
+// Initial State
+// ============================================================================
+
+const initialState: TestLogState = {
+  logs: '',
+  isLoading: false,
+  error: null,
+  status: null,
+  sessionId: null,
+  command: null,
+  testFile: null,
+  startedAt: null,
+  finishedAt: null,
+  exitCode: null,
+  duration: null,
+};
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+/**
+ * Hook to subscribe to test log events and manage log state.
+ *
+ * This hook:
+ * 1. Fetches initial buffered logs from the server
+ * 2. Subscribes to WebSocket events for real-time log streaming
+ * 3. Handles test runner started/output/completed events
+ * 4. Provides log state for rendering in a panel
+ *
+ * @example
+ * ```tsx
+ * const { logs, status, isLoading, isRunning } = useTestLogs({
+ *   worktreePath: '/path/to/worktree'
+ * });
+ *
+ * return (
+ *   <div>
+ *     {isLoading && <Spinner />}
+ *     {isRunning && <Badge>Running</Badge>}
+ *     <pre>{logs}</pre>
+ *   </div>
+ * );
+ * ```
+ */
+export function useTestLogs({
+  worktreePath,
+  sessionId: targetSessionId,
+  autoSubscribe = true,
+}: UseTestLogsOptions) {
+  const [state, setState] = useState<TestLogState>(initialState);
+
+  // Keep track of whether we've fetched initial logs
+  const hasFetchedInitialLogs = useRef(false);
+
+  // Track the current session ID for filtering events
+  const currentSessionId = useRef<string | null>(targetSessionId ?? null);
+
+  // Guard against stale fetch results when switching worktrees/sessions
+  const fetchSeq = useRef(0);
+
+  /**
+   * Derived state: whether tests are currently running
+   */
+  const isRunning = state.status === 'running' || state.status === 'pending';
+
+  /**
+   * Fetch buffered logs from the server
+   */
+  const fetchLogs = useCallback(async () => {
+    if (!worktreePath && !targetSessionId) return;
+
+    // Increment sequence to guard against stale responses
+    const seq = ++fetchSeq.current;
+
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+
+    try {
+      const api = getElectronAPI();
+      if (!api?.worktree?.getTestLogs) {
+        // Check if this request is still current
+        if (seq !== fetchSeq.current) return;
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: 'Test logs API not available',
+        }));
+        return;
+      }
+
+      const result = await api.worktree.getTestLogs(worktreePath ?? undefined, targetSessionId);
+
+      // Check if this request is still current (prevent stale updates)
+      if (seq !== fetchSeq.current) return;
+
+      if (result.success && result.result) {
+        const { sessionId, command, status, testFile, logs, startedAt, finishedAt, exitCode } =
+          result.result;
+
+        // Update current session ID for event filtering
+        currentSessionId.current = sessionId;
+
+        setState((prev) => ({
+          ...prev,
+          logs,
+          isLoading: false,
+          error: null,
+          status,
+          sessionId,
+          command,
+          testFile: testFile ?? null,
+          startedAt,
+          finishedAt,
+          exitCode,
+          duration: null, // Not provided by getTestLogs
+        }));
+        hasFetchedInitialLogs.current = true;
+      } else {
+        // No active session - this is not necessarily an error
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          error: result.error || null,
+        }));
+      }
+    } catch (error) {
+      // Check if this request is still current
+      if (seq !== fetchSeq.current) return;
+      logger.error('Failed to fetch test logs:', error);
+      setState((prev) => ({
+        ...prev,
+        isLoading: false,
+        error: error instanceof Error ? error.message : 'Failed to fetch logs',
+      }));
+    }
+  }, [worktreePath, targetSessionId]);
+
+  /**
+   * Clear logs and reset state
+   */
+  const clearLogs = useCallback(() => {
+    setState(initialState);
+    hasFetchedInitialLogs.current = false;
+    currentSessionId.current = targetSessionId ?? null;
+  }, [targetSessionId]);
+
+  /**
+   * Append content to logs
+   */
+  const appendLogs = useCallback((content: string) => {
+    setState((prev) => ({
+      ...prev,
+      logs: prev.logs + content,
+    }));
+  }, []);
+
+  // Fetch initial logs when worktreePath or sessionId changes
+  useEffect(() => {
+    if ((worktreePath || targetSessionId) && autoSubscribe) {
+      hasFetchedInitialLogs.current = false;
+      fetchLogs();
+    } else {
+      clearLogs();
+    }
+  }, [worktreePath, targetSessionId, autoSubscribe, fetchLogs, clearLogs]);
+
+  // Subscribe to WebSocket events
+  useEffect(() => {
+    if (!autoSubscribe) return;
+    if (!worktreePath && !targetSessionId) return;
+
+    const api = getElectronAPI();
+    if (!api?.worktree?.onTestRunnerEvent) {
+      logger.warn('Test runner event subscription not available');
+      return;
+    }
+
+    const unsubscribe = api.worktree.onTestRunnerEvent((event) => {
+      // Filter events based on worktree path or session ID
+      const eventWorktreePath = event.payload.worktreePath;
+      const eventSessionId = event.payload.sessionId;
+
+      // If we have a specific session ID target, only accept events for that session
+      if (targetSessionId && eventSessionId !== targetSessionId) {
+        return;
+      }
+
+      // If we have a worktree path, filter by that
+      if (worktreePath && !pathsEqual(eventWorktreePath, worktreePath)) {
+        return;
+      }
+
+      switch (event.type) {
+        case 'test-runner:started': {
+          const payload = event.payload as TestRunnerStartedEvent;
+          logger.info('Test run started:', payload);
+
+          // Update current session ID for future event filtering
+          currentSessionId.current = payload.sessionId;
+
+          setState((prev) => ({
+            ...prev,
+            status: 'running',
+            sessionId: payload.sessionId,
+            command: payload.command,
+            testFile: payload.testFile ?? null,
+            startedAt: payload.timestamp,
+            finishedAt: null,
+            exitCode: null,
+            duration: null,
+            // Clear logs on new test run start
+            logs: '',
+            error: null,
+          }));
+          hasFetchedInitialLogs.current = false;
+          break;
+        }
+
+        case 'test-runner:output': {
+          const payload = event.payload as TestRunnerOutputEvent;
+
+          // Only append if this is for our current session
+          if (currentSessionId.current && payload.sessionId !== currentSessionId.current) {
+            return;
+          }
+
+          // Append the new output to existing logs
+          if (payload.content) {
+            appendLogs(payload.content);
+          }
+          break;
+        }
+
+        case 'test-runner:completed': {
+          const payload = event.payload as TestRunnerCompletedEvent;
+          logger.info('Test run completed:', payload);
+
+          // Only update if this is for our current session
+          if (currentSessionId.current && payload.sessionId !== currentSessionId.current) {
+            return;
+          }
+
+          setState((prev) => ({
+            ...prev,
+            status: payload.status,
+            finishedAt: payload.timestamp,
+            exitCode: payload.exitCode,
+            duration: payload.duration,
+          }));
+          break;
+        }
+      }
+    });
+
+    return unsubscribe;
+  }, [worktreePath, targetSessionId, autoSubscribe, appendLogs]);
+
+  return {
+    // State
+    ...state,
+
+    // Derived state
+    /** Whether tests are currently running */
+    isRunning,
+
+    // Actions
+    /** Fetch/refresh logs from the server */
+    fetchLogs,
+    /** Clear logs and reset state */
+    clearLogs,
+    /** Manually append content to logs */
+    appendLogs,
+  };
+}
+
+/**
+ * Hook for subscribing to test log output events globally (across all sessions)
+ *
+ * Useful for notification systems or global log monitoring.
+ *
+ * @example
+ * ```tsx
+ * useTestLogEvents({
+ *   onOutput: (sessionId, content) => {
+ *     console.log(`[${sessionId}] ${content}`);
+ *   },
+ *   onCompleted: (sessionId, status) => {
+ *     toast(`Tests ${status}!`);
+ *   },
+ * });
+ * ```
+ */
+export function useTestLogEvents(handlers: {
+  onStarted?: (event: TestRunnerStartedEvent) => void;
+  onOutput?: (event: TestRunnerOutputEvent) => void;
+  onCompleted?: (event: TestRunnerCompletedEvent) => void;
+}) {
+  const { onStarted, onOutput, onCompleted } = handlers;
+
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.worktree?.onTestRunnerEvent) {
+      logger.warn('Test runner event subscription not available');
+      return;
+    }
+
+    const unsubscribe = api.worktree.onTestRunnerEvent((event) => {
+      switch (event.type) {
+        case 'test-runner:started':
+          onStarted?.(event.payload as TestRunnerStartedEvent);
+          break;
+        case 'test-runner:output':
+          onOutput?.(event.payload as TestRunnerOutputEvent);
+          break;
+        case 'test-runner:completed':
+          onCompleted?.(event.payload as TestRunnerCompletedEvent);
+          break;
+      }
+    });
+
+    return unsubscribe;
+  }, [onStarted, onOutput, onCompleted]);
+}
+
+// Re-export types for convenience
+export type { TestRunStatus };
diff --git a/temp_repo/apps/ui/src/hooks/use-test-runners.ts b/temp_repo/apps/ui/src/hooks/use-test-runners.ts
new file mode 100644
index 0000000000000000000000000000000000000000..39303b6b2af6dba2e7d227dce3bf935e51327359
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-test-runners.ts
@@ -0,0 +1,391 @@
+/**
+ * useTestRunners - Hook for test runner lifecycle management
+ *
+ * This hook provides a complete interface for:
+ * - Starting and stopping test runs
+ * - Subscribing to test runner events (started, output, completed)
+ * - Managing test session state per worktree
+ * - Fetching existing test logs
+ */
+
+import { useEffect, useCallback, useMemo } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { createLogger } from '@automaker/utils/logger';
+import { getElectronAPI } from '@/lib/electron';
+import { useTestRunnersStore, type TestSession } from '@/store/test-runners-store';
+import type {
+  TestRunStatus,
+  TestRunnerStartedEvent,
+  TestRunnerOutputEvent,
+  TestRunnerCompletedEvent,
+} from '@/types/electron';
+
+const logger = createLogger('TestRunners');
+
+/**
+ * Options for starting a test run
+ */
+export interface StartTestOptions {
+  /** Project path to get test command from settings */
+  projectPath?: string;
+  /** Specific test file to run (runs all tests if not provided) */
+  testFile?: string;
+}
+
+/**
+ * Result from starting a test run
+ */
+export interface StartTestResult {
+  success: boolean;
+  sessionId?: string;
+  error?: string;
+}
+
+/**
+ * Result from stopping a test run
+ */
+export interface StopTestResult {
+  success: boolean;
+  error?: string;
+}
+
+/**
+ * Hook for managing test runners with full lifecycle support
+ *
+ * @param worktreePath - The worktree path to scope the hook to (optional for global event handling)
+ * @returns Test runner state and actions
+ */
+export function useTestRunners(worktreePath?: string) {
+  // Get store state and actions
+  const {
+    sessions,
+    isLoading,
+    error,
+    startSession,
+    appendOutput,
+    completeSession,
+    getActiveSession,
+    getSession,
+    isWorktreeRunning,
+    removeSession,
+    clearWorktreeSessions,
+    setLoading,
+    setError,
+  } = useTestRunnersStore(
+    useShallow((state) => ({
+      sessions: state.sessions,
+      isLoading: state.isLoading,
+      error: state.error,
+      startSession: state.startSession,
+      appendOutput: state.appendOutput,
+      completeSession: state.completeSession,
+      getActiveSession: state.getActiveSession,
+      getSession: state.getSession,
+      isWorktreeRunning: state.isWorktreeRunning,
+      removeSession: state.removeSession,
+      clearWorktreeSessions: state.clearWorktreeSessions,
+      setLoading: state.setLoading,
+      setError: state.setError,
+    }))
+  );
+
+  // Derived state for the current worktree
+  const activeSession = useMemo(() => {
+    if (!worktreePath) return null;
+    return getActiveSession(worktreePath);
+  }, [worktreePath, getActiveSession]);
+
+  const isRunning = useMemo(() => {
+    if (!worktreePath) return false;
+    return isWorktreeRunning(worktreePath);
+  }, [worktreePath, isWorktreeRunning]);
+
+  // Get all sessions for the current worktree
+  const worktreeSessions = useMemo(() => {
+    if (!worktreePath) return [];
+    return Object.values(sessions).filter((s) => s.worktreePath === worktreePath);
+  }, [worktreePath, sessions]);
+
+  // Subscribe to test runner events
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.worktree?.onTestRunnerEvent) {
+      logger.warn('Test runner event subscription not available');
+      return;
+    }
+
+    const unsubscribe = api.worktree.onTestRunnerEvent((event) => {
+      // If worktreePath is specified, only handle events for that worktree
+      if (worktreePath && event.payload.worktreePath !== worktreePath) {
+        return;
+      }
+
+      switch (event.type) {
+        case 'test-runner:started': {
+          const payload = event.payload as TestRunnerStartedEvent;
+          logger.info(`Test run started: ${payload.sessionId} in ${payload.worktreePath}`);
+
+          startSession({
+            sessionId: payload.sessionId,
+            worktreePath: payload.worktreePath,
+            command: payload.command,
+            status: 'running',
+            testFile: payload.testFile,
+            startedAt: payload.timestamp,
+          });
+          break;
+        }
+
+        case 'test-runner:output': {
+          const payload = event.payload as TestRunnerOutputEvent;
+          appendOutput(payload.sessionId, payload.content);
+          break;
+        }
+
+        case 'test-runner:completed': {
+          const payload = event.payload as TestRunnerCompletedEvent;
+          logger.info(
+            `Test run completed: ${payload.sessionId} with status ${payload.status} (exit code: ${payload.exitCode})`
+          );
+
+          completeSession(payload.sessionId, payload.status, payload.exitCode, payload.duration);
+          break;
+        }
+      }
+    });
+
+    return unsubscribe;
+  }, [worktreePath, startSession, appendOutput, completeSession]);
+
+  // Load existing test logs on mount (if worktreePath is provided)
+  useEffect(() => {
+    if (!worktreePath) return;
+
+    const loadExistingLogs = async () => {
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.getTestLogs) return;
+
+        setLoading(true);
+        setError(null);
+
+        const result = await api.worktree.getTestLogs(worktreePath);
+
+        if (result.success && result.result) {
+          const { sessionId, command, status, testFile, logs, startedAt, finishedAt, exitCode } =
+            result.result;
+
+          // Only add if we don't already have this session
+          const existingSession = getSession(sessionId);
+          if (!existingSession) {
+            startSession({
+              sessionId,
+              worktreePath,
+              command,
+              status,
+              testFile,
+              startedAt,
+              finishedAt: finishedAt || undefined,
+              exitCode: exitCode ?? undefined,
+            });
+
+            // Add existing logs
+            if (logs) {
+              appendOutput(sessionId, logs);
+            }
+          }
+        }
+      } catch (err) {
+        logger.error('Error loading test logs:', err);
+        setError(err instanceof Error ? err.message : 'Failed to load test logs');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadExistingLogs();
+  }, [worktreePath, setLoading, setError, getSession, startSession, appendOutput]);
+
+  // Start a test run
+  const start = useCallback(
+    async (options?: StartTestOptions): Promise<StartTestResult> => {
+      if (!worktreePath) {
+        return { success: false, error: 'No worktree path provided' };
+      }
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.startTests) {
+          return { success: false, error: 'Test runner API not available' };
+        }
+
+        logger.info(`Starting tests in ${worktreePath}`, options);
+
+        const result = await api.worktree.startTests(worktreePath, {
+          projectPath: options?.projectPath,
+          testFile: options?.testFile,
+        });
+
+        if (!result.success) {
+          logger.error('Failed to start tests:', result.error);
+          return { success: false, error: result.error };
+        }
+
+        logger.info(`Tests started with session: ${result.result?.sessionId}`);
+        return {
+          success: true,
+          sessionId: result.result?.sessionId,
+        };
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Unknown error starting tests';
+        logger.error('Error starting tests:', err);
+        return { success: false, error: errorMessage };
+      }
+    },
+    [worktreePath]
+  );
+
+  // Stop a test run
+  const stop = useCallback(
+    async (sessionId?: string): Promise<StopTestResult> => {
+      // Use provided sessionId or get the active session for this worktree
+      const targetSessionId = sessionId || (worktreePath && activeSession?.sessionId);
+
+      if (!targetSessionId) {
+        return { success: false, error: 'No active test session to stop' };
+      }
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.stopTests) {
+          return { success: false, error: 'Test runner API not available' };
+        }
+
+        logger.info(`Stopping test session: ${targetSessionId}`);
+
+        const result = await api.worktree.stopTests(targetSessionId);
+
+        if (!result.success) {
+          logger.error('Failed to stop tests:', result.error);
+          return { success: false, error: result.error };
+        }
+
+        logger.info('Tests stopped successfully');
+        return { success: true };
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Unknown error stopping tests';
+        logger.error('Error stopping tests:', err);
+        return { success: false, error: errorMessage };
+      }
+    },
+    [worktreePath, activeSession]
+  );
+
+  // Refresh logs for the current session
+  const refreshLogs = useCallback(
+    async (sessionId?: string): Promise<{ success: boolean; logs?: string; error?: string }> => {
+      const targetSessionId = sessionId || (worktreePath && activeSession?.sessionId);
+
+      if (!targetSessionId && !worktreePath) {
+        return { success: false, error: 'No session or worktree to refresh' };
+      }
+
+      try {
+        const api = getElectronAPI();
+        if (!api?.worktree?.getTestLogs) {
+          return { success: false, error: 'Test logs API not available' };
+        }
+
+        const result = await api.worktree.getTestLogs(worktreePath, targetSessionId);
+
+        if (!result.success) {
+          return { success: false, error: result.error };
+        }
+
+        return {
+          success: true,
+          logs: result.result?.logs,
+        };
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Unknown error fetching logs';
+        return { success: false, error: errorMessage };
+      }
+    },
+    [worktreePath, activeSession]
+  );
+
+  // Clear session history for the current worktree
+  const clearHistory = useCallback(() => {
+    if (worktreePath) {
+      clearWorktreeSessions(worktreePath);
+    }
+  }, [worktreePath, clearWorktreeSessions]);
+
+  return {
+    // State
+    /** The currently active test session for this worktree */
+    activeSession,
+    /** Whether tests are currently running in this worktree */
+    isRunning,
+    /** All test sessions for this worktree (including completed) */
+    sessions: worktreeSessions,
+    /** Loading state */
+    isLoading,
+    /** Error state */
+    error,
+
+    // Actions
+    /** Start a test run */
+    start,
+    /** Stop a test run */
+    stop,
+    /** Refresh logs for a session */
+    refreshLogs,
+    /** Clear session history for this worktree */
+    clearHistory,
+
+    // Lower-level access (for advanced use cases)
+    /** Get a specific session by ID */
+    getSession,
+    /** Remove a specific session */
+    removeSession,
+  };
+}
+
+/**
+ * Hook for subscribing to test runner events globally (across all worktrees)
+ *
+ * Useful for global status displays or notifications
+ */
+export function useTestRunnerEvents(
+  onStarted?: (event: TestRunnerStartedEvent) => void,
+  onOutput?: (event: TestRunnerOutputEvent) => void,
+  onCompleted?: (event: TestRunnerCompletedEvent) => void
+) {
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api?.worktree?.onTestRunnerEvent) {
+      logger.warn('Test runner event subscription not available');
+      return;
+    }
+
+    const unsubscribe = api.worktree.onTestRunnerEvent((event) => {
+      switch (event.type) {
+        case 'test-runner:started':
+          onStarted?.(event.payload as TestRunnerStartedEvent);
+          break;
+        case 'test-runner:output':
+          onOutput?.(event.payload as TestRunnerOutputEvent);
+          break;
+        case 'test-runner:completed':
+          onCompleted?.(event.payload as TestRunnerCompletedEvent);
+          break;
+      }
+    });
+
+    return unsubscribe;
+  }, [onStarted, onOutput, onCompleted]);
+}
+
+// Re-export types for convenience
+export type { TestSession, TestRunStatus };
diff --git a/temp_repo/apps/ui/src/hooks/use-virtual-keyboard-resize.ts b/temp_repo/apps/ui/src/hooks/use-virtual-keyboard-resize.ts
new file mode 100644
index 0000000000000000000000000000000000000000..78fd8e4ac808600c92958684686275967f83d163
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-virtual-keyboard-resize.ts
@@ -0,0 +1,64 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+/**
+ * Hook that detects when the mobile virtual keyboard is open and returns
+ * the height offset needed to prevent the keyboard from overlapping content.
+ *
+ * Uses the Visual Viewport API to detect viewport shrinkage caused by the
+ * virtual keyboard. When the keyboard is open, the visual viewport height
+ * is smaller than the layout viewport height.
+ *
+ * @returns An object with:
+ * - `keyboardHeight`: The estimated keyboard height in pixels (0 when closed)
+ * - `isKeyboardOpen`: Boolean indicating if the keyboard is currently open
+ */
+export function useVirtualKeyboardResize() {
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
+  const initialHeightRef = useRef<number | null>(null);
+
+  const handleViewportResize = useCallback(() => {
+    const vv = window.visualViewport;
+    if (!vv) return;
+
+    // On first call, record the full viewport height (no keyboard)
+    if (initialHeightRef.current === null) {
+      initialHeightRef.current = vv.height;
+    }
+
+    // The keyboard height is the difference between the window inner height
+    // and the visual viewport height. On iOS, window.innerHeight stays the same
+    // when the keyboard opens, but visualViewport.height shrinks.
+    const heightDiff = window.innerHeight - vv.height;
+
+    // Use a threshold to avoid false positives from browser chrome changes
+    // (address bar show/hide causes ~50-80px changes on most browsers)
+    const KEYBOARD_THRESHOLD = 100;
+
+    if (heightDiff > KEYBOARD_THRESHOLD) {
+      setKeyboardHeight(heightDiff);
+      setIsKeyboardOpen(true);
+    } else {
+      setKeyboardHeight(0);
+      setIsKeyboardOpen(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    const vv = window.visualViewport;
+    if (!vv) return;
+
+    vv.addEventListener('resize', handleViewportResize);
+    vv.addEventListener('scroll', handleViewportResize);
+
+    // Initial check
+    handleViewportResize();
+
+    return () => {
+      vv.removeEventListener('resize', handleViewportResize);
+      vv.removeEventListener('scroll', handleViewportResize);
+    };
+  }, [handleViewportResize]);
+
+  return { keyboardHeight, isKeyboardOpen };
+}
diff --git a/temp_repo/apps/ui/src/hooks/use-window-state.ts b/temp_repo/apps/ui/src/hooks/use-window-state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6fb8e40102c7b506b6db2a4cd322219571e14887
--- /dev/null
+++ b/temp_repo/apps/ui/src/hooks/use-window-state.ts
@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react';
+
+export interface WindowState {
+  isMaximized: boolean;
+  windowWidth: number;
+  windowHeight: number;
+}
+
+/**
+ * Hook to track window state (dimensions and maximized status)
+ * For Electron apps, considers window maximized if width > 1400px
+ * Also listens for window resize events to update state
+ */
+export function useWindowState(): WindowState {
+  const [windowState, setWindowState] = useState<WindowState>(() => {
+    if (typeof window === 'undefined') {
+      return { isMaximized: false, windowWidth: 0, windowHeight: 0 };
+    }
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    return {
+      isMaximized: width > 1400,
+      windowWidth: width,
+      windowHeight: height,
+    };
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const updateWindowState = () => {
+      const width = window.innerWidth;
+      const height = window.innerHeight;
+      setWindowState({
+        isMaximized: width > 1400,
+        windowWidth: width,
+        windowHeight: height,
+      });
+    };
+
+    // Set initial state
+    updateWindowState();
+
+    // Listen for resize events
+    window.addEventListener('resize', updateWindowState);
+
+    return () => {
+      window.removeEventListener('resize', updateWindowState);
+    };
+  }, []);
+
+  return windowState;
+}
diff --git a/temp_repo/apps/ui/src/lib/agent-context-parser.ts b/temp_repo/apps/ui/src/lib/agent-context-parser.ts
new file mode 100644
index 0000000000000000000000000000000000000000..44f5bc99277452820cb3d0f06dc60278f9828112
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/agent-context-parser.ts
@@ -0,0 +1,431 @@
+/**
+ * Agent Context Parser
+ * Extracts useful information from agent context files for display in kanban cards
+ */
+
+import type { ClaudeCompatibleProvider } from '@automaker/types';
+
+export interface AgentTaskInfo {
+  // Task list extracted from TodoWrite tool calls
+  todos: {
+    content: string;
+    status: 'pending' | 'in_progress' | 'completed';
+  }[];
+
+  // Progress stats
+  toolCallCount: number;
+  lastToolUsed?: string;
+
+  // Phase info
+  currentPhase?: 'planning' | 'action' | 'verification';
+
+  // Summary (if feature is completed)
+  summary?: string;
+
+  // Estimated progress percentage based on phase and tool calls
+  progressPercentage: number;
+}
+
+/**
+ * Default model used by the feature executor
+ */
+export const DEFAULT_MODEL = 'claude-opus-4-6';
+
+/**
+ * Options for formatting model names
+ */
+export interface FormatModelNameOptions {
+  /** Provider ID to look up custom display names */
+  providerId?: string;
+  /** List of Claude-compatible providers to search for display names */
+  claudeCompatibleProviders?: ClaudeCompatibleProvider[];
+}
+
+/**
+ * Formats a model name for display, with optional provider-aware lookup.
+ *
+ * When a providerId and providers array are supplied, this function will:
+ * 1. Look up the provider configuration
+ * 2. Find the model in the provider's models array
+ * 3. Return the displayName from that configuration
+ *
+ * This allows Claude-compatible providers (like GLM, MiniMax, OpenRouter) to
+ * show their own model names (e.g., "GLM 4.7", "MiniMax M2.1") instead of
+ * the internal Claude model aliases (e.g., "Sonnet 4.5").
+ */
+export function formatModelName(model: string, options?: FormatModelNameOptions): string {
+  // If we have a providerId and providers array, look up the display name from the provider
+  if (options?.providerId && options?.claudeCompatibleProviders) {
+    const provider = options.claudeCompatibleProviders.find((p) => p.id === options.providerId);
+    if (provider?.models) {
+      const providerModel = provider.models.find((m) => m.id === model);
+      if (providerModel?.displayName) {
+        return providerModel.displayName;
+      }
+    }
+  }
+
+  // Claude models
+  if (model.includes('opus-4-6') || model === 'claude-opus') return 'Opus 4.6';
+  if (model.includes('opus')) return 'Opus 4.5';
+  if (model.includes('sonnet-4-6') || model === 'claude-sonnet') return 'Sonnet 4.6';
+  if (model.includes('sonnet')) return 'Sonnet 4.5';
+  if (model.includes('haiku')) return 'Haiku 4.5';
+
+  // Codex/GPT models - specific formatting
+  if (model === 'codex-gpt-5.3-codex') return 'GPT-5.3 Codex';
+  if (model === 'codex-gpt-5.2-codex') return 'GPT-5.2 Codex';
+  if (model === 'codex-gpt-5.2') return 'GPT-5.2';
+  if (model === 'codex-gpt-5.1-codex-max') return 'GPT-5.1 Max';
+  if (model === 'codex-gpt-5.1-codex-mini') return 'GPT-5.1 Mini';
+  if (model === 'codex-gpt-5.1') return 'GPT-5.1';
+  // Generic fallbacks for other GPT models
+  if (model.startsWith('gpt-')) return model.toUpperCase();
+  if (model.match(/^o\d/)) return model.toUpperCase(); // o1, o3, etc.
+
+  // Cursor models
+  if (model === 'cursor-auto' || model === 'auto') return 'Cursor Auto';
+  if (model === 'cursor-composer-1' || model === 'composer-1') return 'Composer 1';
+  if (model.startsWith('cursor-sonnet')) return 'Cursor Sonnet';
+  if (model.startsWith('cursor-opus')) return 'Cursor Opus';
+  if (model.startsWith('cursor-gpt')) return model.replace('cursor-', '').replace('gpt-', 'GPT-');
+  if (model.startsWith('cursor-gemini'))
+    return model.replace('cursor-', 'Cursor ').replace('gemini', 'Gemini');
+  if (model.startsWith('cursor-grok')) return 'Cursor Grok';
+
+  // OpenCode static models (canonical opencode- prefix)
+  if (model === 'opencode-big-pickle') return 'Big Pickle';
+  if (model === 'opencode-glm-5-free') return 'GLM 5 Free';
+  if (model === 'opencode-gpt-5-nano') return 'GPT-5 Nano';
+  if (model === 'opencode-kimi-k2.5-free') return 'Kimi K2.5';
+  if (model === 'opencode-minimax-m2.5-free') return 'MiniMax M2.5';
+
+  // OpenCode dynamic models (provider/model format like "google/gemini-2.5-pro")
+  if (model.includes('/') && !model.includes('://')) {
+    const slashIndex = model.indexOf('/');
+    const modelName = model.substring(slashIndex + 1);
+    // Extract last path segment (handles nested paths like "arcee-ai/trinity-large-preview:free")
+    let lastSegment = modelName.split('/').pop()!;
+    // Detect and save tier suffixes like ":free", ":extended", ":beta", ":preview"
+    const tierMatch = lastSegment.match(/:(free|extended|beta|preview)$/i);
+    if (tierMatch) {
+      lastSegment = lastSegment.slice(0, lastSegment.length - tierMatch[0].length);
+    }
+    // Clean up the model name for display (remove version tags, capitalize)
+    const cleanedName = lastSegment.replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+    // Append tier as a human-friendly label in parentheses
+    if (tierMatch) {
+      const capitalizedTier =
+        tierMatch[1].charAt(0).toUpperCase() + tierMatch[1].slice(1).toLowerCase();
+      return `${cleanedName} (${capitalizedTier})`;
+    }
+    return cleanedName;
+  }
+
+  // Default: split by dash and capitalize
+  return model.split('-').slice(1, 3).join(' ');
+}
+
+/**
+ * Helper to extract a balanced JSON object from a string starting at a given position
+ */
+function extractJsonObject(str: string, startIdx: number): string | null {
+  if (str[startIdx] !== '{') return null;
+
+  let depth = 0;
+  let inString = false;
+  let escapeNext = false;
+
+  for (let i = startIdx; i < str.length; i++) {
+    const char = str[i];
+
+    if (escapeNext) {
+      escapeNext = false;
+      continue;
+    }
+
+    if (char === '\\' && inString) {
+      escapeNext = true;
+      continue;
+    }
+
+    if (char === '"' && !escapeNext) {
+      inString = !inString;
+      continue;
+    }
+
+    if (inString) continue;
+
+    if (char === '{') depth++;
+    else if (char === '}') {
+      depth--;
+      if (depth === 0) {
+        return str.slice(startIdx, i + 1);
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Extracts todos from the context content
+ * Looks for TodoWrite tool calls in the format:
+ * 🔧 Tool: TodoWrite
+ * Input: {"todos": [{"content": "...", "status": "..."}]}
+ */
+function extractTodos(content: string): AgentTaskInfo['todos'] {
+  const todos: AgentTaskInfo['todos'] = [];
+
+  // Find all occurrences of TodoWrite tool calls
+  const todoWriteMarker = '🔧 Tool: TodoWrite';
+  let searchStart = 0;
+
+  while (true) {
+    const markerIdx = content.indexOf(todoWriteMarker, searchStart);
+    if (markerIdx === -1) break;
+
+    // Look for "Input:" after the marker
+    const inputIdx = content.indexOf('Input:', markerIdx);
+    if (inputIdx === -1 || inputIdx > markerIdx + 100) {
+      searchStart = markerIdx + 1;
+      continue;
+    }
+
+    // Find the start of the JSON object
+    const jsonStart = content.indexOf('{', inputIdx);
+    if (jsonStart === -1) {
+      searchStart = markerIdx + 1;
+      continue;
+    }
+
+    // Extract the complete JSON object
+    const jsonStr = extractJsonObject(content, jsonStart);
+    if (jsonStr) {
+      try {
+        const parsed = JSON.parse(jsonStr) as {
+          todos?: Array<{ content: string; status: string }>;
+        };
+        if (parsed.todos && Array.isArray(parsed.todos)) {
+          // Clear previous todos - we want the latest state
+          todos.length = 0;
+          for (const item of parsed.todos) {
+            if (item.content && item.status) {
+              todos.push({
+                content: item.content,
+                status: item.status as 'pending' | 'in_progress' | 'completed',
+              });
+            }
+          }
+        }
+      } catch {
+        // Ignore parse errors
+      }
+    }
+
+    searchStart = markerIdx + 1;
+  }
+
+  // Also try to extract from markdown task lists as fallback
+  if (todos.length === 0) {
+    const markdownTodos = content.matchAll(/- \[([ xX])\] (.+)/g);
+    for (const match of markdownTodos) {
+      const isCompleted = match[1].toLowerCase() === 'x';
+      const todoContent = match[2].trim();
+      if (!todos.some((t) => t.content === todoContent)) {
+        todos.push({
+          content: todoContent,
+          status: isCompleted ? 'completed' : 'pending',
+        });
+      }
+    }
+  }
+
+  return todos;
+}
+
+/**
+ * Counts tool calls in the content
+ */
+function countToolCalls(content: string): number {
+  const matches = content.match(/🔧\s*Tool:/g);
+  return matches?.length || 0;
+}
+
+/**
+ * Gets the last tool used
+ */
+function getLastToolUsed(content: string): string | undefined {
+  const matches = [...content.matchAll(/🔧\s*Tool:\s*(\S+)/g)];
+  if (matches.length > 0) {
+    return matches[matches.length - 1][1];
+  }
+  return undefined;
+}
+
+/**
+ * Determines the current phase from the content
+ */
+function getCurrentPhase(content: string): 'planning' | 'action' | 'verification' | undefined {
+  // Find the last phase marker
+  const planningIndex = content.lastIndexOf('📋');
+  const actionIndex = content.lastIndexOf('⚡');
+  const verificationIndex = content.lastIndexOf('✅');
+
+  const maxIndex = Math.max(planningIndex, actionIndex, verificationIndex);
+
+  if (maxIndex === -1) return undefined;
+  if (maxIndex === verificationIndex) return 'verification';
+  if (maxIndex === actionIndex) return 'action';
+  return 'planning';
+}
+
+/**
+ * Cleans up fragmented streaming text by removing spurious newlines
+ * This handles cases where streaming providers send partial text chunks
+ * that got separated by newlines during accumulation
+ */
+function cleanFragmentedText(content: string): string {
+  // Remove newlines that break up words (newline between letters)
+  // e.g., "sum\n\nmary" -> "summary"
+  let cleaned = content.replace(/([a-zA-Z])\n+([a-zA-Z])/g, '$1$2');
+
+  // Also clean up fragmented XML-like tags
+  // e.g., "<sum\n\nmary>" -> "<summary>"
+  cleaned = cleaned.replace(/<([a-zA-Z]+)\n*([a-zA-Z]*)\n*>/g, '<$1$2>');
+  cleaned = cleaned.replace(/<\/([a-zA-Z]+)\n*([a-zA-Z]*)\n*>/g, '</$1$2>');
+
+  return cleaned;
+}
+
+/**
+ * Extracts a summary from completed feature context
+ * Looks for content between <summary> and </summary> tags
+ * Returns the LAST summary found to ensure we get the most recent/updated one
+ */
+function extractSummary(content: string): string | undefined {
+  // First, clean up any fragmented text from streaming
+  const cleanedContent = cleanFragmentedText(content);
+
+  // Define regex patterns to try in order of priority
+  // Each pattern specifies which capture group contains the summary content
+  const regexesToTry = [
+    { regex: /<summary>([\s\S]*?)<\/summary>/gi, group: 1 },
+    { regex: /## Summary[^\n]*\n([\s\S]*?)(?=\n## [^#]|\n🔧|$)/gi, group: 1 },
+    {
+      regex:
+        /✓ (?:Feature|Verification|Task) (?:successfully|completed|verified)[^\n]*(?:\n[^\n]{1,200})?/gi,
+      group: 0,
+    },
+    {
+      regex: /(?:What was done|Changes made|Implemented)[^\n]*\n([\s\S]*?)(?=\n## [^#]|\n🔧|$)/gi,
+      group: 1,
+    },
+  ];
+
+  for (const { regex, group } of regexesToTry) {
+    const matches = [...cleanedContent.matchAll(regex)];
+    if (matches.length > 0) {
+      const lastMatch = matches[matches.length - 1];
+      return cleanFragmentedText(lastMatch[group]).trim();
+    }
+  }
+
+  return undefined;
+}
+
+/**
+ * Calculates progress percentage based on phase and context
+ * Uses a more dynamic approach that better reflects actual progress
+ */
+function calculateProgress(
+  phase: AgentTaskInfo['currentPhase'],
+  toolCallCount: number,
+  todos: AgentTaskInfo['todos']
+): number {
+  // If we have todos, primarily use them for progress calculation
+  if (todos.length > 0) {
+    const completedCount = todos.filter((t) => t.status === 'completed').length;
+    const inProgressCount = todos.filter((t) => t.status === 'in_progress').length;
+
+    // Weight: completed = 1, in_progress = 0.5, pending = 0
+    const progress = ((completedCount + inProgressCount * 0.5) / todos.length) * 90;
+
+    // Add a small base amount and cap at 95%
+    return Math.min(5 + progress, 95);
+  }
+
+  // Fallback: use phase-based progress with tool call scaling
+  let phaseProgress = 0;
+  switch (phase) {
+    case 'planning':
+      // Planning phase: 5-25%
+      phaseProgress = 5 + Math.min(toolCallCount * 1, 20);
+      break;
+    case 'action':
+      // Action phase: 25-75% based on tool calls (logarithmic scaling)
+      phaseProgress = 25 + Math.min(Math.log2(toolCallCount + 1) * 10, 50);
+      break;
+    case 'verification':
+      // Verification phase: 75-95%
+      phaseProgress = 75 + Math.min(toolCallCount * 0.5, 20);
+      break;
+    default:
+      // Starting: just use tool calls
+      phaseProgress = Math.min(toolCallCount * 0.5, 10);
+  }
+
+  return Math.min(Math.round(phaseProgress), 95);
+}
+
+/**
+ * Parses agent context content and extracts useful information
+ */
+export function parseAgentContext(content: string): AgentTaskInfo {
+  if (!content || !content.trim()) {
+    return {
+      todos: [],
+      toolCallCount: 0,
+      progressPercentage: 0,
+    };
+  }
+
+  const todos = extractTodos(content);
+  const toolCallCount = countToolCalls(content);
+  const lastToolUsed = getLastToolUsed(content);
+  const currentPhase = getCurrentPhase(content);
+  const summary = extractSummary(content);
+  const progressPercentage = calculateProgress(currentPhase, toolCallCount, todos);
+
+  return {
+    todos,
+    toolCallCount,
+    lastToolUsed,
+    currentPhase,
+    summary,
+    progressPercentage,
+  };
+}
+
+/**
+ * Quick stats for display in card badges
+ */
+export interface QuickStats {
+  toolCalls: number;
+  completedTasks: number;
+  totalTasks: number;
+  phase?: string;
+}
+
+/**
+ * Extracts quick stats from context for compact display
+ */
+export function getQuickStats(content: string): QuickStats {
+  const info = parseAgentContext(content);
+  return {
+    toolCalls: info.toolCallCount,
+    completedTasks: info.todos.filter((t) => t.status === 'completed').length,
+    totalTasks: info.todos.length,
+    phase: info.currentPhase,
+  };
+}
diff --git a/temp_repo/apps/ui/src/lib/api-fetch.ts b/temp_repo/apps/ui/src/lib/api-fetch.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f8959c8fa87b31c8e8c2f08fa77315681ea343a2
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/api-fetch.ts
@@ -0,0 +1,197 @@
+/**
+ * Authenticated fetch utility
+ *
+ * Provides a wrapper around fetch that automatically includes:
+ * - X-API-Key header (for Electron mode)
+ * - X-Session-Token header (for web mode with explicit token)
+ * - credentials: 'include' (fallback for web mode session cookies)
+ *
+ * Use this instead of raw fetch() for all authenticated API calls.
+ */
+
+import { getApiKey, getSessionToken, getServerUrlSync } from './http-api-client';
+
+// Server URL - uses shared cached URL from http-api-client
+const getServerUrl = (): string => getServerUrlSync();
+const DEFAULT_CACHE_MODE: RequestCache = 'no-store';
+
+export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+
+export interface ApiFetchOptions extends Omit<RequestInit, 'method' | 'headers' | 'body'> {
+  /** Additional headers to include (merged with auth headers) */
+  headers?: Record<string, string>;
+  /** Request body - will be JSON stringified if object */
+  body?: unknown;
+  /** Skip authentication headers (for public endpoints like /api/health) */
+  skipAuth?: boolean;
+}
+
+/**
+ * Build headers for an authenticated request
+ */
+export function getAuthHeaders(additionalHeaders?: Record<string, string>): Record<string, string> {
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    ...additionalHeaders,
+  };
+
+  // Electron mode: use API key
+  const apiKey = getApiKey();
+  if (apiKey) {
+    headers['X-API-Key'] = apiKey;
+    return headers;
+  }
+
+  // Web mode: use session token if available
+  const sessionToken = getSessionToken();
+  if (sessionToken) {
+    headers['X-Session-Token'] = sessionToken;
+  }
+
+  return headers;
+}
+
+/**
+ * Make an authenticated fetch request to the API
+ *
+ * @param endpoint - API endpoint (e.g., '/api/fs/browse')
+ * @param method - HTTP method
+ * @param options - Additional options
+ * @returns Response from fetch
+ *
+ * @example
+ * ```ts
+ * // Simple GET
+ * const response = await apiFetch('/api/terminal/status', 'GET');
+ *
+ * // POST with body
+ * const response = await apiFetch('/api/fs/browse', 'POST', {
+ *   body: { dirPath: '/home/user' }
+ * });
+ *
+ * // With additional headers
+ * const response = await apiFetch('/api/terminal/sessions', 'POST', {
+ *   headers: { 'X-Terminal-Token': token },
+ *   body: { cwd: '/home/user' }
+ * });
+ * ```
+ */
+export async function apiFetch(
+  endpoint: string,
+  method: HttpMethod = 'GET',
+  options: ApiFetchOptions = {}
+): Promise<Response> {
+  const { headers: additionalHeaders, body, skipAuth, cache, ...restOptions } = options;
+
+  const headers = skipAuth
+    ? { 'Content-Type': 'application/json', ...additionalHeaders }
+    : getAuthHeaders(additionalHeaders);
+
+  const fetchOptions: RequestInit = {
+    method,
+    headers,
+    credentials: 'include',
+    cache: cache ?? DEFAULT_CACHE_MODE,
+    ...restOptions,
+  };
+
+  if (body !== undefined) {
+    fetchOptions.body = typeof body === 'string' ? body : JSON.stringify(body);
+  }
+
+  const url = endpoint.startsWith('http') ? endpoint : `${getServerUrl()}${endpoint}`;
+  return fetch(url, fetchOptions);
+}
+
+/**
+ * Make an authenticated GET request
+ */
+export async function apiGet<T>(
+  endpoint: string,
+  options: Omit<ApiFetchOptions, 'body'> = {}
+): Promise<T> {
+  const response = await apiFetch(endpoint, 'GET', options);
+  return response.json();
+}
+
+/**
+ * Make an authenticated POST request
+ */
+export async function apiPost<T>(
+  endpoint: string,
+  body?: unknown,
+  options: ApiFetchOptions = {}
+): Promise<T> {
+  const response = await apiFetch(endpoint, 'POST', { ...options, body });
+  return response.json();
+}
+
+/**
+ * Make an authenticated PUT request
+ */
+export async function apiPut<T>(
+  endpoint: string,
+  body?: unknown,
+  options: ApiFetchOptions = {}
+): Promise<T> {
+  const response = await apiFetch(endpoint, 'PUT', { ...options, body });
+  return response.json();
+}
+
+/**
+ * Make an authenticated DELETE request
+ */
+export async function apiDelete<T>(endpoint: string, options: ApiFetchOptions = {}): Promise<T> {
+  const response = await apiFetch(endpoint, 'DELETE', options);
+  return response.json();
+}
+
+/**
+ * Make an authenticated DELETE request (returns raw response for status checking)
+ */
+export async function apiDeleteRaw(
+  endpoint: string,
+  options: ApiFetchOptions = {}
+): Promise<Response> {
+  return apiFetch(endpoint, 'DELETE', options);
+}
+
+/**
+ * Build an authenticated image URL for use in <img> tags or CSS background-image
+ * Adds authentication via query parameter since headers can't be set for image loads
+ *
+ * @param path - Image path
+ * @param projectPath - Project path
+ * @param version - Optional cache-busting version
+ * @returns Full URL with auth credentials
+ */
+export function getAuthenticatedImageUrl(
+  path: string,
+  projectPath: string,
+  version?: string | number
+): string {
+  const serverUrl = getServerUrl();
+  const params = new URLSearchParams({
+    path,
+    projectPath,
+  });
+
+  if (version !== undefined) {
+    params.set('v', String(version));
+  }
+
+  // Add auth credential as query param (needed for image loads that can't set headers)
+  const apiKey = getApiKey();
+  if (apiKey) {
+    params.set('apiKey', apiKey);
+  }
+
+  // Web mode: also add session token as query param for image loads
+  // This ensures images load correctly even if cookies aren't sent (e.g., cross-origin proxy scenarios)
+  const sessionToken = getSessionToken();
+  if (sessionToken) {
+    params.set('token', sessionToken);
+  }
+
+  return `${serverUrl}/api/fs/image?${params.toString()}`;
+}
diff --git a/temp_repo/apps/ui/src/lib/clipboard-utils.ts b/temp_repo/apps/ui/src/lib/clipboard-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6eb05c931a95aad6071032824a4ec6a6c28447b0
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/clipboard-utils.ts
@@ -0,0 +1,145 @@
+/**
+ * Clipboard utility functions with fallbacks for non-HTTPS (insecure) contexts.
+ *
+ * The modern Clipboard API (`navigator.clipboard`) requires a Secure Context (HTTPS).
+ * When running on HTTP, these APIs are unavailable or throw errors.
+ * This module provides `writeToClipboard` and `readFromClipboard` that automatically
+ * fall back to the legacy `document.execCommand` approach using a hidden textarea.
+ */
+
+/**
+ * Check whether the modern Clipboard API is available.
+ * It requires a secure context (HTTPS or localhost) and the API to exist.
+ */
+function isClipboardApiAvailable(): boolean {
+  return (
+    typeof navigator !== 'undefined' &&
+    !!navigator.clipboard &&
+    typeof navigator.clipboard.writeText === 'function' &&
+    typeof navigator.clipboard.readText === 'function' &&
+    typeof window !== 'undefined' &&
+    window.isSecureContext !== false
+  );
+}
+
+/**
+ * Write text to the clipboard using the modern Clipboard API with a
+ * fallback to `document.execCommand('copy')` for insecure contexts.
+ *
+ * @param text - The text to write to the clipboard.
+ * @returns `true` if the text was successfully copied; `false` otherwise.
+ */
+export async function writeToClipboard(text: string): Promise<boolean> {
+  // Try the modern Clipboard API first
+  if (isClipboardApiAvailable()) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+      // Fall through to legacy approach
+    }
+  }
+
+  // Legacy fallback using a hidden textarea + execCommand
+  return writeToClipboardLegacy(text);
+}
+
+/**
+ * Read text from the clipboard using the modern Clipboard API with a
+ * fallback to `document.execCommand('paste')` for insecure contexts.
+ *
+ * Note: The legacy fallback for *reading* is limited. `document.execCommand('paste')`
+ * only works in some browsers (mainly older ones). On modern browsers in insecure
+ * contexts, reading from the clipboard may not be possible at all. In those cases,
+ * this function throws an error so the caller can show an appropriate message.
+ *
+ * @returns The text from the clipboard.
+ * @throws If clipboard reading is not supported or permission is denied.
+ */
+export async function readFromClipboard(): Promise<string> {
+  // Try the modern Clipboard API first
+  if (isClipboardApiAvailable()) {
+    try {
+      return await navigator.clipboard.readText();
+    } catch (err) {
+      // Check if this is a permission-related error
+      if (err instanceof Error) {
+        // Re-throw permission errors so they propagate to the caller
+        if (err.name === 'NotAllowedError' || err.name === 'NotReadableError') {
+          throw err;
+        }
+      }
+      // For other errors, fall through to legacy approach
+    }
+  }
+
+  // Legacy fallback using a hidden textarea + execCommand
+  return readFromClipboardLegacy();
+}
+
+/**
+ * Legacy clipboard write using a hidden textarea and `document.execCommand('copy')`.
+ * This works in both secure and insecure contexts in most browsers.
+ */
+function writeToClipboardLegacy(text: string): boolean {
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+
+  // Prevent scrolling and make invisible
+  textarea.style.position = 'fixed';
+  textarea.style.left = '-9999px';
+  textarea.style.top = '-9999px';
+  textarea.style.opacity = '0';
+
+  document.body.appendChild(textarea);
+
+  try {
+    textarea.select();
+    textarea.setSelectionRange(0, text.length);
+    const success = document.execCommand('copy');
+    return success;
+  } catch {
+    return false;
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
+
+/**
+ * Legacy clipboard read using a hidden textarea and `document.execCommand('paste')`.
+ * This has very limited browser support. Most modern browsers block this for security.
+ * When it fails, we throw an error to let the caller handle it gracefully.
+ */
+function readFromClipboardLegacy(): string {
+  const textarea = document.createElement('textarea');
+
+  // Prevent scrolling and make invisible
+  textarea.style.position = 'fixed';
+  textarea.style.left = '-9999px';
+  textarea.style.top = '-9999px';
+  textarea.style.opacity = '0';
+
+  document.body.appendChild(textarea);
+  textarea.focus();
+
+  try {
+    const success = document.execCommand('paste');
+    if (success && textarea.value) {
+      return textarea.value;
+    }
+    throw new Error(
+      'Clipboard paste is not supported in this browser on non-HTTPS sites. ' +
+        'Please use HTTPS or paste manually with keyboard shortcuts.'
+    );
+  } catch (err) {
+    if (err instanceof Error && err.message.includes('Clipboard paste is not supported')) {
+      throw err;
+    }
+    throw new Error(
+      'Clipboard paste is not supported in this browser on non-HTTPS sites. ' +
+        'Please use HTTPS or paste manually with keyboard shortcuts.'
+    );
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
diff --git a/temp_repo/apps/ui/src/lib/codemirror-languages.ts b/temp_repo/apps/ui/src/lib/codemirror-languages.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42a01027ce974add97772367ed5171f4cbf992b9
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/codemirror-languages.ts
@@ -0,0 +1,155 @@
+/**
+ * Shared CodeMirror language detection utilities.
+ *
+ * Extracted from code-editor.tsx so that both the file editor and
+ * the diff viewer can resolve language extensions from file paths.
+ */
+
+import type { Extension } from '@codemirror/state';
+import { javascript } from '@codemirror/lang-javascript';
+import { html } from '@codemirror/lang-html';
+import { css } from '@codemirror/lang-css';
+import { json } from '@codemirror/lang-json';
+import { markdown } from '@codemirror/lang-markdown';
+import { python } from '@codemirror/lang-python';
+import { java } from '@codemirror/lang-java';
+import { rust } from '@codemirror/lang-rust';
+import { cpp } from '@codemirror/lang-cpp';
+import { sql } from '@codemirror/lang-sql';
+import { php } from '@codemirror/lang-php';
+import { xml } from '@codemirror/lang-xml';
+import { StreamLanguage } from '@codemirror/language';
+import { shell } from '@codemirror/legacy-modes/mode/shell';
+import { yaml } from '@codemirror/legacy-modes/mode/yaml';
+import { toml } from '@codemirror/legacy-modes/mode/toml';
+import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile';
+import { go } from '@codemirror/legacy-modes/mode/go';
+import { ruby } from '@codemirror/legacy-modes/mode/ruby';
+import { swift } from '@codemirror/legacy-modes/mode/swift';
+
+/** Detect language extension based on file extension */
+export function getLanguageExtension(filePath: string): Extension | null {
+  const name = filePath.split(/[/\\]/).pop()?.toLowerCase() || '';
+  const dotIndex = name.lastIndexOf('.');
+  // Files without an extension (no dot, or dotfile with dot at position 0)
+  const ext = dotIndex > 0 ? name.slice(dotIndex + 1) : '';
+
+  // Handle files by name first
+  switch (name) {
+    case 'dockerfile':
+    case 'dockerfile.dev':
+    case 'dockerfile.prod':
+      return StreamLanguage.define(dockerFile);
+    case 'makefile':
+    case 'gnumakefile':
+      return StreamLanguage.define(shell);
+    case '.gitignore':
+    case '.dockerignore':
+    case '.npmignore':
+    case '.eslintignore':
+      return StreamLanguage.define(shell);
+    case '.env':
+    case '.env.local':
+    case '.env.development':
+    case '.env.production':
+      return StreamLanguage.define(shell);
+  }
+
+  switch (ext) {
+    // JavaScript/TypeScript
+    case 'js':
+    case 'mjs':
+    case 'cjs':
+      return javascript();
+    case 'jsx':
+      return javascript({ jsx: true });
+    case 'ts':
+    case 'mts':
+    case 'cts':
+      return javascript({ typescript: true });
+    case 'tsx':
+      return javascript({ jsx: true, typescript: true });
+
+    // Web
+    case 'html':
+    case 'htm':
+    case 'svelte':
+    case 'vue':
+      return html();
+    case 'css':
+    case 'scss':
+    case 'less':
+      return css();
+    case 'json':
+    case 'jsonc':
+    case 'json5':
+      return json();
+    case 'xml':
+    case 'svg':
+    case 'xsl':
+    case 'xslt':
+    case 'plist':
+      return xml();
+
+    // Markdown
+    case 'md':
+    case 'mdx':
+    case 'markdown':
+      return markdown();
+
+    // Python
+    case 'py':
+    case 'pyx':
+    case 'pyi':
+      return python();
+
+    // Java/Kotlin
+    case 'java':
+    case 'kt':
+    case 'kts':
+      return java();
+
+    // Systems
+    case 'rs':
+      return rust();
+    case 'c':
+    case 'h':
+      return cpp();
+    case 'cpp':
+    case 'cc':
+    case 'cxx':
+    case 'hpp':
+    case 'hxx':
+      return cpp();
+    case 'go':
+      return StreamLanguage.define(go);
+    case 'swift':
+      return StreamLanguage.define(swift);
+
+    // Scripting
+    case 'rb':
+    case 'erb':
+      return StreamLanguage.define(ruby);
+    case 'php':
+      return php();
+    case 'sh':
+    case 'bash':
+    case 'zsh':
+    case 'fish':
+      return StreamLanguage.define(shell);
+
+    // Data
+    case 'sql':
+    case 'mysql':
+    case 'pgsql':
+      return sql();
+    case 'yaml':
+    case 'yml':
+      return StreamLanguage.define(yaml);
+    case 'toml':
+      return StreamLanguage.define(toml);
+
+    default:
+      return null; // Plain text fallback
+  }
+}
diff --git a/temp_repo/apps/ui/src/lib/codex-usage-format.ts b/temp_repo/apps/ui/src/lib/codex-usage-format.ts
new file mode 100644
index 0000000000000000000000000000000000000000..25114a5715691436a07da19a432b34b238aea8f1
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/codex-usage-format.ts
@@ -0,0 +1,75 @@
+import { type CodexPlanType } from '@/store/app-store';
+
+const WINDOW_DEFAULT_LABEL = 'Usage window';
+const RESET_LABEL = 'Resets';
+const UNKNOWN_LABEL = 'Unknown';
+const DAY_UNIT = 'day';
+const HOUR_UNIT = 'hour';
+const MINUTE_UNIT = 'min';
+const WINDOW_SUFFIX = 'window';
+const MINUTES_PER_HOUR = 60;
+const MINUTES_PER_DAY = 24 * MINUTES_PER_HOUR;
+const MILLISECONDS_PER_SECOND = 1000;
+const SESSION_HOURS = 5;
+const DAYS_PER_WEEK = 7;
+const SESSION_WINDOW_MINS = SESSION_HOURS * MINUTES_PER_HOUR;
+const WEEKLY_WINDOW_MINS = DAYS_PER_WEEK * MINUTES_PER_DAY;
+const SESSION_TITLE = 'Session Usage';
+const SESSION_SUBTITLE = '5-hour rolling window';
+const WEEKLY_TITLE = 'Weekly';
+const WEEKLY_SUBTITLE = 'All models';
+const FALLBACK_TITLE = 'Usage Window';
+const PLAN_TYPE_LABELS: Record<CodexPlanType, string> = {
+  free: 'Free',
+  plus: 'Plus',
+  pro: 'Pro',
+  team: 'Team',
+  business: 'Business',
+  enterprise: 'Enterprise',
+  edu: 'Education',
+  unknown: UNKNOWN_LABEL,
+};
+
+export function formatCodexWindowDuration(minutes: number | null): string {
+  if (!minutes || minutes <= 0) return WINDOW_DEFAULT_LABEL;
+  if (minutes % MINUTES_PER_DAY === 0) {
+    const days = minutes / MINUTES_PER_DAY;
+    return `${days} ${DAY_UNIT}${days === 1 ? '' : 's'} ${WINDOW_SUFFIX}`;
+  }
+  if (minutes % MINUTES_PER_HOUR === 0) {
+    const hours = minutes / MINUTES_PER_HOUR;
+    return `${hours} ${HOUR_UNIT}${hours === 1 ? '' : 's'} ${WINDOW_SUFFIX}`;
+  }
+  return `${minutes} ${MINUTE_UNIT} ${WINDOW_SUFFIX}`;
+}
+
+export type CodexWindowLabel = {
+  title: string;
+  subtitle: string;
+  isPrimary: boolean;
+};
+
+export function getCodexWindowLabel(windowDurationMins: number | null): CodexWindowLabel {
+  if (windowDurationMins === SESSION_WINDOW_MINS) {
+    return { title: SESSION_TITLE, subtitle: SESSION_SUBTITLE, isPrimary: true };
+  }
+  if (windowDurationMins === WEEKLY_WINDOW_MINS) {
+    return { title: WEEKLY_TITLE, subtitle: WEEKLY_SUBTITLE, isPrimary: false };
+  }
+  return {
+    title: FALLBACK_TITLE,
+    subtitle: formatCodexWindowDuration(windowDurationMins),
+    isPrimary: false,
+  };
+}
+
+export function formatCodexResetTime(resetsAt: number | null): string | null {
+  if (!resetsAt) return null;
+  const date = new Date(resetsAt * MILLISECONDS_PER_SECOND);
+  return `${RESET_LABEL} ${date.toLocaleString()}`;
+}
+
+export function formatCodexPlanType(plan: CodexPlanType | null): string {
+  if (!plan) return UNKNOWN_LABEL;
+  return PLAN_TYPE_LABELS[plan] ?? plan;
+}
diff --git a/temp_repo/apps/ui/src/lib/diff-utils.ts b/temp_repo/apps/ui/src/lib/diff-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..21bd077f412052f3d6d7bc1315ebbd544735228e
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/diff-utils.ts
@@ -0,0 +1,260 @@
+/**
+ * Shared diff parsing utilities.
+ *
+ * Extracted from commit-worktree-dialog, discard-worktree-changes-dialog,
+ * stash-changes-dialog and git-diff-panel to eliminate duplication.
+ */
+
+export interface ParsedDiffHunk {
+  header: string;
+  lines: {
+    type: 'context' | 'addition' | 'deletion' | 'header';
+    content: string;
+    lineNumber?: { old?: number; new?: number };
+  }[];
+}
+
+export interface ParsedFileDiff {
+  filePath: string;
+  hunks: ParsedDiffHunk[];
+  isNew?: boolean;
+  isDeleted?: boolean;
+  isRenamed?: boolean;
+  /** Pre-computed count of added lines across all hunks */
+  additions: number;
+  /** Pre-computed count of deleted lines across all hunks */
+  deletions: number;
+}
+
+/**
+ * Parse unified diff format into structured data.
+ *
+ * Note: The regex `diff --git a\/(.*?) b\/(.*)` uses a non-greedy match for
+ * the `a/` path and a greedy match for `b/`. This can mis-handle paths that
+ * literally contain " b/" or are quoted by git. In practice this covers the
+ * vast majority of real-world paths; exotic cases will fall back to "unknown".
+ */
+export function parseDiff(diffText: string): ParsedFileDiff[] {
+  if (!diffText) return [];
+
+  const files: ParsedFileDiff[] = [];
+  const lines = diffText.split('\n');
+  let currentFile: ParsedFileDiff | null = null;
+  let currentHunk: ParsedDiffHunk | null = null;
+  let oldLineNum = 0;
+  let newLineNum = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    if (line.startsWith('diff --git')) {
+      if (currentFile) {
+        if (currentHunk) currentFile.hunks.push(currentHunk);
+        files.push(currentFile);
+      }
+      const match = line.match(/diff --git a\/(.*?) b\/(.*)/);
+      currentFile = {
+        filePath: match ? match[2] : 'unknown',
+        hunks: [],
+        additions: 0,
+        deletions: 0,
+      };
+      currentHunk = null;
+      continue;
+    }
+
+    if (line.startsWith('new file mode')) {
+      if (currentFile) currentFile.isNew = true;
+      continue;
+    }
+    if (line.startsWith('deleted file mode')) {
+      if (currentFile) currentFile.isDeleted = true;
+      continue;
+    }
+    if (line.startsWith('rename from') || line.startsWith('rename to')) {
+      if (currentFile) currentFile.isRenamed = true;
+      continue;
+    }
+    if (line.startsWith('index ') || line.startsWith('--- ') || line.startsWith('+++ ')) {
+      continue;
+    }
+
+    if (line.startsWith('@@')) {
+      if (currentHunk && currentFile) currentFile.hunks.push(currentHunk);
+      const hunkMatch = line.match(/@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+      oldLineNum = hunkMatch ? parseInt(hunkMatch[1], 10) : 1;
+      newLineNum = hunkMatch ? parseInt(hunkMatch[2], 10) : 1;
+      currentHunk = {
+        header: line,
+        lines: [{ type: 'header', content: line }],
+      };
+      continue;
+    }
+
+    if (currentHunk) {
+      // Skip trailing empty line produced by split('\n') to avoid phantom context line
+      if (line === '' && i === lines.length - 1) {
+        continue;
+      }
+      if (line.startsWith('+')) {
+        currentHunk.lines.push({
+          type: 'addition',
+          content: line.substring(1),
+          lineNumber: { new: newLineNum },
+        });
+        newLineNum++;
+        if (currentFile) currentFile.additions++;
+      } else if (line.startsWith('-')) {
+        currentHunk.lines.push({
+          type: 'deletion',
+          content: line.substring(1),
+          lineNumber: { old: oldLineNum },
+        });
+        oldLineNum++;
+        if (currentFile) currentFile.deletions++;
+      } else if (line.startsWith(' ') || line === '') {
+        currentHunk.lines.push({
+          type: 'context',
+          content: line.substring(1) || '',
+          lineNumber: { old: oldLineNum, new: newLineNum },
+        });
+        oldLineNum++;
+        newLineNum++;
+      }
+    }
+  }
+
+  if (currentFile) {
+    if (currentHunk) currentFile.hunks.push(currentHunk);
+    files.push(currentFile);
+  }
+
+  return files;
+}
+
+/**
+ * Reconstruct old (original) and new (modified) file content from a single-file
+ * unified diff string. Used by the CodeMirror merge diff viewer which needs
+ * both document versions to compute inline highlighting.
+ *
+ * For new files (entire content is additions), oldContent will be empty.
+ * For deleted files (entire content is deletions), newContent will be empty.
+ */
+export function reconstructFilesFromDiff(diffText: string): {
+  oldContent: string;
+  newContent: string;
+} {
+  if (!diffText) return { oldContent: '', newContent: '' };
+
+  const lines = diffText.split('\n');
+  const oldLines: string[] = [];
+  const newLines: string[] = [];
+  let inHunk = false;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    // Skip diff header lines
+    if (
+      line.startsWith('diff --git') ||
+      line.startsWith('index ') ||
+      line.startsWith('--- ') ||
+      line.startsWith('+++ ') ||
+      line.startsWith('new file mode') ||
+      line.startsWith('deleted file mode') ||
+      line.startsWith('rename from') ||
+      line.startsWith('rename to') ||
+      line.startsWith('similarity index') ||
+      line.startsWith('old mode') ||
+      line.startsWith('new mode')
+    ) {
+      continue;
+    }
+
+    // Hunk header
+    if (line.startsWith('@@')) {
+      inHunk = true;
+      continue;
+    }
+
+    if (!inHunk) continue;
+
+    // Skip trailing empty line produced by split('\n')
+    if (line === '' && i === lines.length - 1) {
+      continue;
+    }
+
+    // "\ No newline at end of file" marker
+    if (line.startsWith('\\')) {
+      continue;
+    }
+
+    if (line.startsWith('+')) {
+      newLines.push(line.substring(1));
+    } else if (line.startsWith('-')) {
+      oldLines.push(line.substring(1));
+    } else {
+      // Context line (starts with space or is empty within hunk)
+      const content = line.startsWith(' ') ? line.substring(1) : line;
+      oldLines.push(content);
+      newLines.push(content);
+    }
+  }
+
+  return {
+    oldContent: oldLines.join('\n'),
+    newContent: newLines.join('\n'),
+  };
+}
+
+/**
+ * Split a combined multi-file diff string into per-file diff strings.
+ * Each entry in the returned array is a complete diff block for a single file.
+ */
+export function splitDiffByFile(
+  combinedDiff: string
+): { filePath: string; diff: string; isNew: boolean; isDeleted: boolean }[] {
+  if (!combinedDiff) return [];
+
+  const results: { filePath: string; diff: string; isNew: boolean; isDeleted: boolean }[] = [];
+  const lines = combinedDiff.split('\n');
+  let currentLines: string[] = [];
+  let currentFilePath = '';
+  let currentIsNew = false;
+  let currentIsDeleted = false;
+
+  for (const line of lines) {
+    if (line.startsWith('diff --git')) {
+      // Push previous file if exists
+      if (currentLines.length > 0 && currentFilePath) {
+        results.push({
+          filePath: currentFilePath,
+          diff: currentLines.join('\n'),
+          isNew: currentIsNew,
+          isDeleted: currentIsDeleted,
+        });
+      }
+      currentLines = [line];
+      const match = line.match(/diff --git a\/(.*?) b\/(.*)/);
+      currentFilePath = match ? match[2] : 'unknown';
+      currentIsNew = false;
+      currentIsDeleted = false;
+    } else {
+      if (line.startsWith('new file mode')) currentIsNew = true;
+      if (line.startsWith('deleted file mode')) currentIsDeleted = true;
+      currentLines.push(line);
+    }
+  }
+
+  // Push last file
+  if (currentLines.length > 0 && currentFilePath) {
+    results.push({
+      filePath: currentFilePath,
+      diff: currentLines.join('\n'),
+      isNew: currentIsNew,
+      isDeleted: currentIsDeleted,
+    });
+  }
+
+  return results;
+}
diff --git a/temp_repo/apps/ui/src/lib/electron.ts b/temp_repo/apps/ui/src/lib/electron.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a24062d2490d0243c758ae20026513494c91e05
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/electron.ts
@@ -0,0 +1,4246 @@
+// Type definitions for Electron IPC API
+import type { SessionListItem, Message } from '@/types/electron';
+import type {
+  ClaudeUsageResponse,
+  CodexUsageResponse,
+  ZaiUsageResponse,
+  GeminiUsageResponse,
+} from '@/store/app-store';
+import type {
+  IssueValidationVerdict,
+  IssueValidationConfidence,
+  IssueComplexity,
+  IssueValidationInput,
+  IssueValidationResult,
+  IssueValidationResponse,
+  IssueValidationEvent,
+  StoredValidation,
+  ModelId,
+  ThinkingLevel,
+  ReasoningEffort,
+  GitHubComment,
+  IssueCommentsResult,
+  Idea,
+  IdeaCategory,
+  IdeationSession,
+  IdeationMessage,
+  IdeationPrompt,
+  PromptCategory,
+  ProjectAnalysisResult,
+  AnalysisSuggestion,
+  StartSessionOptions,
+  CreateIdeaInput,
+  UpdateIdeaInput,
+  ConvertToFeatureOptions,
+  IdeationContextSources,
+  Feature,
+  IdeationStreamEvent,
+  IdeationAnalysisEvent,
+} from '@automaker/types';
+import { DEFAULT_MAX_CONCURRENCY } from '@automaker/types';
+import { getJSON, setJSON, removeItem } from './storage';
+
+// Re-export issue validation types for use in components
+export type {
+  IssueValidationVerdict,
+  IssueValidationConfidence,
+  IssueComplexity,
+  IssueValidationInput,
+  IssueValidationResult,
+  IssueValidationResponse,
+  IssueValidationEvent,
+  StoredValidation,
+  GitHubComment,
+  IssueCommentsResult,
+};
+
+// Re-export ideation types
+export type {
+  Idea,
+  IdeaCategory,
+  IdeationSession,
+  IdeationMessage,
+  IdeationPrompt,
+  PromptCategory,
+  ProjectAnalysisResult,
+  AnalysisSuggestion,
+  StartSessionOptions,
+  CreateIdeaInput,
+  UpdateIdeaInput,
+  ConvertToFeatureOptions,
+};
+
+// Ideation API interface
+export interface IdeationAPI {
+  // Session management
+  startSession: (
+    projectPath: string,
+    options?: StartSessionOptions
+  ) => Promise<{ success: boolean; session?: IdeationSession; error?: string }>;
+  getSession: (
+    projectPath: string,
+    sessionId: string
+  ) => Promise<{
+    success: boolean;
+    session?: IdeationSession;
+    messages?: IdeationMessage[];
+    error?: string;
+  }>;
+  sendMessage: (
+    sessionId: string,
+    message: string,
+    options?: { imagePaths?: string[]; model?: string }
+  ) => Promise<{ success: boolean; error?: string }>;
+  stopSession: (sessionId: string) => Promise<{ success: boolean; error?: string }>;
+
+  // Ideas CRUD
+  listIdeas: (projectPath: string) => Promise<{ success: boolean; ideas?: Idea[]; error?: string }>;
+  createIdea: (
+    projectPath: string,
+    idea: CreateIdeaInput
+  ) => Promise<{ success: boolean; idea?: Idea; error?: string }>;
+  getIdea: (
+    projectPath: string,
+    ideaId: string
+  ) => Promise<{ success: boolean; idea?: Idea; error?: string }>;
+  updateIdea: (
+    projectPath: string,
+    ideaId: string,
+    updates: UpdateIdeaInput
+  ) => Promise<{ success: boolean; idea?: Idea; error?: string }>;
+  deleteIdea: (
+    projectPath: string,
+    ideaId: string
+  ) => Promise<{ success: boolean; error?: string }>;
+
+  // Project analysis
+  analyzeProject: (
+    projectPath: string
+  ) => Promise<{ success: boolean; analysis?: ProjectAnalysisResult; error?: string }>;
+
+  // Generate suggestions from a prompt
+  generateSuggestions: (
+    projectPath: string,
+    promptId: string,
+    category: IdeaCategory,
+    count?: number,
+    contextSources?: IdeationContextSources
+  ) => Promise<{ success: boolean; suggestions?: AnalysisSuggestion[]; error?: string }>;
+
+  // Convert to feature
+  convertToFeature: (
+    projectPath: string,
+    ideaId: string,
+    options?: ConvertToFeatureOptions
+  ) => Promise<{ success: boolean; feature?: Feature; featureId?: string; error?: string }>;
+
+  // Add suggestion directly to board as feature
+  addSuggestionToBoard: (
+    projectPath: string,
+    suggestion: AnalysisSuggestion
+  ) => Promise<{ success: boolean; featureId?: string; error?: string }>;
+
+  // Get guided prompts (single source of truth from backend)
+  getPrompts: () => Promise<{
+    success: boolean;
+    prompts?: IdeationPrompt[];
+    categories?: PromptCategory[];
+    error?: string;
+  }>;
+
+  // Event subscriptions
+  onStream: (callback: (event: IdeationStreamEvent) => void) => () => void;
+  onAnalysisEvent: (callback: (event: IdeationAnalysisEvent) => void) => () => void;
+}
+
+export interface FileEntry {
+  name: string;
+  isDirectory: boolean;
+  isFile: boolean;
+}
+
+export interface FileStats {
+  isDirectory: boolean;
+  isFile: boolean;
+  size: number;
+  mtime: Date;
+}
+
+export interface DialogResult {
+  canceled: boolean;
+  filePaths: string[];
+}
+
+export interface FileResult {
+  success: boolean;
+  content?: string;
+  error?: string;
+}
+
+export interface WriteResult {
+  success: boolean;
+  error?: string;
+}
+
+export interface ReaddirResult {
+  success: boolean;
+  entries?: FileEntry[];
+  error?: string;
+}
+
+export interface StatResult {
+  success: boolean;
+  stats?: FileStats;
+  error?: string;
+}
+
+// Options for creating a pull request
+export interface CreatePROptions {
+  projectPath?: string;
+  commitMessage?: string;
+  prTitle?: string;
+  prBody?: string;
+  baseBranch?: string;
+  draft?: boolean;
+  remote?: string;
+  /** Remote to create the PR against (e.g. upstream). If not specified, inferred from repo setup. */
+  targetRemote?: string;
+}
+
+// Re-export types from electron.d.ts for external use
+export type {
+  AutoModeEvent,
+  ModelDefinition,
+  ProviderStatus,
+  WorktreeAPI,
+  GitAPI,
+  WorktreeInfo,
+  WorktreeStatus,
+  FileDiffsResult,
+  FileDiffResult,
+  FileStatus,
+} from '@/types/electron';
+
+// Import types for internal use in this file
+import type {
+  AutoModeEvent,
+  WorktreeAPI,
+  GitAPI,
+  ModelDefinition,
+  ProviderStatus,
+} from '@/types/electron';
+
+// Import HTTP API client (ES module)
+import { getHttpApiClient, getServerUrlSync } from './http-api-client';
+
+// Running Agent type
+export interface RunningAgent {
+  featureId: string;
+  projectPath: string;
+  projectName: string;
+  isAutoMode: boolean;
+  model?: string;
+  provider?: string;
+  title?: string;
+  description?: string;
+  branchName?: string;
+}
+
+export interface RunningAgentsResult {
+  success: boolean;
+  runningAgents?: RunningAgent[];
+  totalCount?: number;
+  error?: string;
+}
+
+export interface RunningAgentsAPI {
+  getAll: () => Promise<RunningAgentsResult>;
+}
+
+// GitHub types
+export interface GitHubLabel {
+  name: string;
+  color: string;
+}
+
+export interface GitHubAuthor {
+  login: string;
+  avatarUrl?: string;
+}
+
+export interface GitHubAssignee {
+  login: string;
+  avatarUrl?: string;
+}
+
+export interface LinkedPullRequest {
+  number: number;
+  title: string;
+  state: string;
+  url: string;
+}
+
+export interface GitHubIssue {
+  number: number;
+  title: string;
+  state: string;
+  author: GitHubAuthor;
+  createdAt: string;
+  labels: GitHubLabel[];
+  url: string;
+  body: string;
+  assignees: GitHubAssignee[];
+  linkedPRs?: LinkedPullRequest[];
+}
+
+export interface GitHubPR {
+  number: number;
+  title: string;
+  state: string;
+  author: GitHubAuthor;
+  createdAt: string;
+  labels: GitHubLabel[];
+  url: string;
+  isDraft: boolean;
+  headRefName: string;
+  reviewDecision: string | null;
+  mergeable: string;
+  body: string;
+}
+
+export interface GitHubRemoteStatus {
+  hasGitHubRemote: boolean;
+  remoteUrl: string | null;
+  owner: string | null;
+  repo: string | null;
+}
+
+/** A review comment on a pull request (inline code comment or general PR comment) */
+export interface PRReviewComment {
+  id: string;
+  author: string;
+  avatarUrl?: string;
+  body: string;
+  /** File path for inline review comments */
+  path?: string;
+  /** Line number for inline review comments */
+  line?: number;
+  createdAt: string;
+  updatedAt?: string;
+  /** Whether this is an inline code review comment (vs general PR comment) */
+  isReviewComment: boolean;
+  /** Whether this comment is outdated (code has changed since) */
+  isOutdated?: boolean;
+  /** Whether the review thread containing this comment has been resolved */
+  isResolved?: boolean;
+  /** The GraphQL node ID of the review thread (used for resolve/unresolve mutations) */
+  threadId?: string;
+  /** The diff hunk context for the comment */
+  diffHunk?: string;
+  /** The side of the diff (LEFT or RIGHT) */
+  side?: string;
+  /** The commit ID the comment was made on */
+  commitId?: string;
+  /** Whether the comment author is a bot/app account */
+  isBot?: boolean;
+}
+
+export interface GitHubAPI {
+  checkRemote: (projectPath: string) => Promise<{
+    success: boolean;
+    hasGitHubRemote?: boolean;
+    remoteUrl?: string | null;
+    owner?: string | null;
+    repo?: string | null;
+    error?: string;
+  }>;
+  listIssues: (projectPath: string) => Promise<{
+    success: boolean;
+    openIssues?: GitHubIssue[];
+    closedIssues?: GitHubIssue[];
+    error?: string;
+  }>;
+  listPRs: (projectPath: string) => Promise<{
+    success: boolean;
+    openPRs?: GitHubPR[];
+    mergedPRs?: GitHubPR[];
+    error?: string;
+  }>;
+  /** Start async validation of a GitHub issue */
+  validateIssue: (
+    projectPath: string,
+    issue: IssueValidationInput,
+    model?: ModelId,
+    thinkingLevel?: ThinkingLevel,
+    reasoningEffort?: ReasoningEffort,
+    providerId?: string
+  ) => Promise<{ success: boolean; message?: string; issueNumber?: number; error?: string }>;
+  /** Check validation status for an issue or all issues */
+  getValidationStatus: (
+    projectPath: string,
+    issueNumber?: number
+  ) => Promise<{
+    success: boolean;
+    isRunning?: boolean;
+    startedAt?: string;
+    runningIssues?: number[];
+    error?: string;
+  }>;
+  /** Stop a running validation */
+  stopValidation: (
+    projectPath: string,
+    issueNumber: number
+  ) => Promise<{ success: boolean; message?: string; error?: string }>;
+  /** Get stored validations for a project */
+  getValidations: (
+    projectPath: string,
+    issueNumber?: number
+  ) => Promise<{
+    success: boolean;
+    validation?: StoredValidation | null;
+    validations?: StoredValidation[];
+    isStale?: boolean;
+    error?: string;
+  }>;
+  /** Mark a validation as viewed by the user */
+  markValidationViewed: (
+    projectPath: string,
+    issueNumber: number
+  ) => Promise<{ success: boolean; error?: string }>;
+  /** Subscribe to validation events */
+  onValidationEvent: (callback: (event: IssueValidationEvent) => void) => () => void;
+  /** Fetch comments for a specific issue */
+  getIssueComments: (
+    projectPath: string,
+    issueNumber: number,
+    cursor?: string
+  ) => Promise<{
+    success: boolean;
+    comments?: GitHubComment[];
+    totalCount?: number;
+    hasNextPage?: boolean;
+    endCursor?: string;
+    error?: string;
+  }>;
+  /** Fetch review comments for a specific pull request */
+  getPRReviewComments: (
+    projectPath: string,
+    prNumber: number
+  ) => Promise<{
+    success: boolean;
+    comments?: PRReviewComment[];
+    totalCount?: number;
+    error?: string;
+  }>;
+  /** Resolve or unresolve a PR review thread */
+  resolveReviewThread: (
+    projectPath: string,
+    threadId: string,
+    resolve: boolean
+  ) => Promise<{
+    success: boolean;
+    isResolved?: boolean;
+    error?: string;
+  }>;
+}
+
+// Spec Regeneration types
+export type SpecRegenerationEvent =
+  | { type: 'spec_regeneration_progress'; content: string; projectPath: string }
+  | {
+      type: 'spec_regeneration_tool';
+      tool: string;
+      input: unknown;
+      projectPath: string;
+    }
+  | { type: 'spec_regeneration_complete'; message: string; projectPath: string }
+  | { type: 'spec_regeneration_error'; error: string; projectPath: string };
+
+export interface SpecRegenerationAPI {
+  create: (
+    projectPath: string,
+    projectOverview: string,
+    generateFeatures?: boolean,
+    analyzeProject?: boolean,
+    maxFeatures?: number
+  ) => Promise<{ success: boolean; error?: string }>;
+  generate: (
+    projectPath: string,
+    projectDefinition: string,
+    generateFeatures?: boolean,
+    analyzeProject?: boolean,
+    maxFeatures?: number
+  ) => Promise<{ success: boolean; error?: string }>;
+  generateFeatures: (
+    projectPath: string,
+    maxFeatures?: number
+  ) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+  sync: (projectPath: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+  stop: (projectPath?: string) => Promise<{ success: boolean; error?: string }>;
+  status: (projectPath?: string) => Promise<{
+    success: boolean;
+    isRunning?: boolean;
+    currentPhase?: string;
+    projectPath?: string;
+    error?: string;
+  }>;
+  onEvent: (callback: (event: SpecRegenerationEvent) => void) => () => void;
+}
+
+// Features API types
+export interface FeaturesAPI {
+  getAll: (
+    projectPath: string
+  ) => Promise<{ success: boolean; features?: Feature[]; error?: string }>;
+  get: (
+    projectPath: string,
+    featureId: string
+  ) => Promise<{ success: boolean; feature?: Feature; error?: string }>;
+  create: (
+    projectPath: string,
+    feature: Feature
+  ) => Promise<{ success: boolean; feature?: Feature; error?: string }>;
+  update: (
+    projectPath: string,
+    featureId: string,
+    updates: Partial<Feature>,
+    descriptionHistorySource?: 'enhance' | 'edit',
+    enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer',
+    preEnhancementDescription?: string
+  ) => Promise<{ success: boolean; feature?: Feature; error?: string }>;
+  delete: (projectPath: string, featureId: string) => Promise<{ success: boolean; error?: string }>;
+  getAgentOutput: (
+    projectPath: string,
+    featureId: string
+  ) => Promise<{ success: boolean; content?: string | null; error?: string }>;
+  generateTitle: (
+    description: string,
+    projectPath?: string
+  ) => Promise<{ success: boolean; title?: string; error?: string }>;
+  getOrphaned: (projectPath: string) => Promise<{
+    success: boolean;
+    orphanedFeatures?: Array<{ feature: Feature; missingBranch: string }>;
+    error?: string;
+  }>;
+  resolveOrphaned: (
+    projectPath: string,
+    featureId: string,
+    action: 'delete' | 'create-worktree' | 'move-to-branch',
+    targetBranch?: string | null
+  ) => Promise<{
+    success: boolean;
+    action?: string;
+    worktreePath?: string;
+    branchName?: string;
+    error?: string;
+  }>;
+  bulkResolveOrphaned: (
+    projectPath: string,
+    featureIds: string[],
+    action: 'delete' | 'create-worktree' | 'move-to-branch',
+    targetBranch?: string | null
+  ) => Promise<{
+    success: boolean;
+    resolvedCount?: number;
+    failedCount?: number;
+    results?: Array<{ featureId: string; success: boolean; action?: string; error?: string }>;
+    error?: string;
+  }>;
+}
+
+export interface AutoModeAPI {
+  start: (
+    projectPath: string,
+    branchName?: string | null,
+    maxConcurrency?: number
+  ) => Promise<{ success: boolean; error?: string }>;
+  stop: (
+    projectPath: string,
+    branchName?: string | null
+  ) => Promise<{ success: boolean; error?: string; runningFeatures?: number }>;
+  stopFeature: (featureId: string) => Promise<{ success: boolean; error?: string }>;
+  status: (
+    projectPath?: string,
+    branchName?: string | null
+  ) => Promise<{
+    success: boolean;
+    isRunning?: boolean;
+    isAutoLoopRunning?: boolean;
+    currentFeatureId?: string | null;
+    runningFeatures?: string[];
+    runningProjects?: string[];
+    runningCount?: number;
+    maxConcurrency?: number;
+    error?: string;
+  }>;
+  runFeature: (
+    projectPath: string,
+    featureId: string,
+    useWorktrees?: boolean,
+    worktreePath?: string
+  ) => Promise<{ success: boolean; passes?: boolean; error?: string }>;
+  verifyFeature: (
+    projectPath: string,
+    featureId: string
+  ) => Promise<{ success: boolean; passes?: boolean; error?: string }>;
+  resumeFeature: (
+    projectPath: string,
+    featureId: string,
+    useWorktrees?: boolean
+  ) => Promise<{ success: boolean; passes?: boolean; error?: string }>;
+  contextExists: (
+    projectPath: string,
+    featureId: string
+  ) => Promise<{ success: boolean; exists?: boolean; error?: string }>;
+  analyzeProject: (
+    projectPath: string
+  ) => Promise<{ success: boolean; message?: string; error?: string }>;
+  followUpFeature: (
+    projectPath: string,
+    featureId: string,
+    prompt: string,
+    imagePaths?: string[],
+    useWorktrees?: boolean
+  ) => Promise<{ success: boolean; passes?: boolean; error?: string }>;
+  commitFeature: (
+    projectPath: string,
+    featureId: string,
+    worktreePath?: string
+  ) => Promise<{ success: boolean; error?: string }>;
+  approvePlan: (
+    projectPath: string,
+    featureId: string,
+    approved: boolean,
+    editedPlan?: string,
+    feedback?: string
+  ) => Promise<{ success: boolean; error?: string }>;
+  resumeInterrupted: (
+    projectPath: string
+  ) => Promise<{ success: boolean; message?: string; error?: string }>;
+  onEvent: (callback: (event: AutoModeEvent) => void) => () => void;
+}
+
+export interface SaveImageResult {
+  success: boolean;
+  path?: string;
+  error?: string;
+}
+
+// Notifications API interface
+import type {
+  Notification,
+  StoredEvent,
+  StoredEventSummary,
+  EventHistoryFilter,
+  EventReplayResult,
+} from '@automaker/types';
+
+export interface NotificationsAPI {
+  list: (projectPath: string) => Promise<{
+    success: boolean;
+    notifications?: Notification[];
+    error?: string;
+  }>;
+  getUnreadCount: (projectPath: string) => Promise<{
+    success: boolean;
+    count?: number;
+    error?: string;
+  }>;
+  markAsRead: (
+    projectPath: string,
+    notificationId?: string
+  ) => Promise<{
+    success: boolean;
+    notification?: Notification;
+    count?: number;
+    error?: string;
+  }>;
+  dismiss: (
+    projectPath: string,
+    notificationId?: string
+  ) => Promise<{
+    success: boolean;
+    dismissed?: boolean;
+    count?: number;
+    error?: string;
+  }>;
+}
+
+// Event History API interface
+export interface EventHistoryAPI {
+  list: (
+    projectPath: string,
+    filter?: EventHistoryFilter
+  ) => Promise<{
+    success: boolean;
+    events?: StoredEventSummary[];
+    total?: number;
+    error?: string;
+  }>;
+  get: (
+    projectPath: string,
+    eventId: string
+  ) => Promise<{
+    success: boolean;
+    event?: StoredEvent;
+    error?: string;
+  }>;
+  delete: (
+    projectPath: string,
+    eventId: string
+  ) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+  clear: (projectPath: string) => Promise<{
+    success: boolean;
+    cleared?: number;
+    error?: string;
+  }>;
+  replay: (
+    projectPath: string,
+    eventId: string,
+    hookIds?: string[]
+  ) => Promise<{
+    success: boolean;
+    result?: EventReplayResult;
+    error?: string;
+  }>;
+}
+
+export interface ElectronAPI {
+  ping: () => Promise<string>;
+  getApiKey?: () => Promise<string | null>;
+  quit?: () => Promise<void>;
+  openExternalLink: (url: string) => Promise<{ success: boolean; error?: string }>;
+  openDirectory: () => Promise<DialogResult>;
+  openFile: (options?: object) => Promise<DialogResult>;
+  readFile: (filePath: string) => Promise<FileResult>;
+  writeFile: (filePath: string, content: string) => Promise<WriteResult>;
+  mkdir: (dirPath: string) => Promise<WriteResult>;
+  readdir: (dirPath: string) => Promise<ReaddirResult>;
+  exists: (filePath: string) => Promise<boolean>;
+  stat: (filePath: string) => Promise<StatResult>;
+  deleteFile: (filePath: string) => Promise<WriteResult>;
+  trashItem?: (filePath: string) => Promise<WriteResult>;
+  copyItem?: (
+    sourcePath: string,
+    destinationPath: string,
+    overwrite?: boolean
+  ) => Promise<WriteResult & { exists?: boolean }>;
+  moveItem?: (
+    sourcePath: string,
+    destinationPath: string,
+    overwrite?: boolean
+  ) => Promise<WriteResult & { exists?: boolean }>;
+  downloadItem?: (filePath: string) => Promise<void>;
+  getPath: (name: string) => Promise<string>;
+  openInEditor?: (
+    filePath: string,
+    line?: number,
+    column?: number
+  ) => Promise<{ success: boolean; error?: string }>;
+  saveImageToTemp?: (
+    data: string,
+    filename: string,
+    mimeType: string,
+    projectPath?: string
+  ) => Promise<SaveImageResult>;
+  isElectron?: boolean;
+  checkClaudeCli?: () => Promise<{
+    success: boolean;
+    status?: string;
+    method?: string;
+    version?: string;
+    path?: string;
+    recommendation?: string;
+    installCommands?: {
+      macos?: string;
+      windows?: string;
+      linux?: string;
+      npm?: string;
+    };
+    error?: string;
+  }>;
+  model?: {
+    getAvailable: () => Promise<{
+      success: boolean;
+      models?: ModelDefinition[];
+      error?: string;
+    }>;
+    checkProviders: () => Promise<{
+      success: boolean;
+      providers?: Record<string, ProviderStatus>;
+      error?: string;
+    }>;
+  };
+  worktree?: WorktreeAPI;
+  git?: GitAPI;
+  specRegeneration?: SpecRegenerationAPI;
+  autoMode?: AutoModeAPI;
+  features?: FeaturesAPI;
+  runningAgents?: RunningAgentsAPI;
+  github?: GitHubAPI;
+  enhancePrompt?: {
+    enhance: (
+      originalText: string,
+      enhancementMode: string,
+      model?: string,
+      thinkingLevel?: string,
+      projectPath?: string
+    ) => Promise<{
+      success: boolean;
+      enhancedText?: string;
+      error?: string;
+    }>;
+  };
+  templates?: {
+    clone: (
+      repoUrl: string,
+      projectName: string,
+      parentDir: string
+    ) => Promise<{ success: boolean; projectPath?: string; error?: string }>;
+  };
+  backlogPlan?: {
+    generate: (
+      projectPath: string,
+      prompt: string,
+      model?: string,
+      branchName?: string
+    ) => Promise<{ success: boolean; error?: string }>;
+    stop: () => Promise<{ success: boolean; error?: string }>;
+    status: (projectPath: string) => Promise<{
+      success: boolean;
+      isRunning?: boolean;
+      savedPlan?: {
+        savedAt: string;
+        prompt: string;
+        model?: string;
+        result: {
+          changes: Array<{
+            type: 'add' | 'update' | 'delete';
+            featureId?: string;
+            feature?: Record<string, unknown>;
+            reason: string;
+          }>;
+          summary: string;
+          dependencyUpdates: Array<{
+            featureId: string;
+            removedDependencies: string[];
+            addedDependencies: string[];
+          }>;
+        };
+      } | null;
+      error?: string;
+    }>;
+    apply: (
+      projectPath: string,
+      plan: {
+        changes: Array<{
+          type: 'add' | 'update' | 'delete';
+          featureId?: string;
+          feature?: Record<string, unknown>;
+          reason: string;
+        }>;
+        summary: string;
+        dependencyUpdates: Array<{
+          featureId: string;
+          removedDependencies: string[];
+          addedDependencies: string[];
+        }>;
+      },
+      branchName?: string
+    ) => Promise<{ success: boolean; appliedChanges?: string[]; error?: string }>;
+    clear: (projectPath: string) => Promise<{ success: boolean; error?: string }>;
+    onEvent: (callback: (data: unknown) => void) => () => void;
+  };
+  // Setup API surface is implemented by the main process and mirrored by HttpApiClient.
+  // Keep this intentionally loose to avoid tight coupling between front-end and server types.
+  setup?: SetupAPI;
+  agent?: {
+    start: (
+      sessionId: string,
+      workingDirectory?: string
+    ) => Promise<{
+      success: boolean;
+      messages?: Message[];
+      error?: string;
+    }>;
+    send: (
+      sessionId: string,
+      message: string,
+      workingDirectory?: string,
+      imagePaths?: string[],
+      model?: string
+    ) => Promise<{ success: boolean; error?: string }>;
+    getHistory: (sessionId: string) => Promise<{
+      success: boolean;
+      messages?: Message[];
+      isRunning?: boolean;
+      error?: string;
+    }>;
+    stop: (sessionId: string) => Promise<{ success: boolean; error?: string }>;
+    clear: (sessionId: string) => Promise<{ success: boolean; error?: string }>;
+    queueList: (sessionId: string) => Promise<{
+      success: boolean;
+      queue?: Array<{
+        id: string;
+        message: string;
+        imagePaths?: string[];
+        model?: string;
+        thinkingLevel?: string;
+        addedAt: string;
+      }>;
+      error?: string;
+    }>;
+    onStream: (callback: (data: unknown) => void) => () => void;
+  };
+  sessions?: {
+    list: (includeArchived?: boolean) => Promise<{
+      success: boolean;
+      sessions?: SessionListItem[];
+      error?: string;
+    }>;
+    create: (
+      name: string,
+      projectPath: string,
+      workingDirectory?: string
+    ) => Promise<{
+      success: boolean;
+      session?: {
+        id: string;
+        name: string;
+        projectPath: string;
+        workingDirectory?: string;
+        createdAt: string;
+        updatedAt: string;
+      };
+      error?: string;
+    }>;
+    update: (
+      sessionId: string,
+      name?: string,
+      tags?: string[]
+    ) => Promise<{ success: boolean; error?: string }>;
+    archive: (sessionId: string) => Promise<{ success: boolean; error?: string }>;
+    unarchive: (sessionId: string) => Promise<{ success: boolean; error?: string }>;
+    delete: (sessionId: string) => Promise<{ success: boolean; error?: string }>;
+  };
+  claude?: {
+    getUsage: () => Promise<ClaudeUsageResponse>;
+  };
+  context?: {
+    describeImage: (imagePath: string) => Promise<{
+      success: boolean;
+      description?: string;
+      error?: string;
+    }>;
+    describeFile: (filePath: string) => Promise<{
+      success: boolean;
+      description?: string;
+      error?: string;
+    }>;
+  };
+  ideation?: IdeationAPI;
+  notifications?: NotificationsAPI;
+  eventHistory?: EventHistoryAPI;
+  codex?: {
+    getUsage: () => Promise<CodexUsageResponse>;
+    getModels: (refresh?: boolean) => Promise<{
+      success: boolean;
+      models?: Array<{
+        id: string;
+        label: string;
+        description: string;
+        hasThinking: boolean;
+        supportsVision: boolean;
+        tier: 'premium' | 'standard' | 'basic';
+        isDefault: boolean;
+      }>;
+      cachedAt?: number;
+      error?: string;
+    }>;
+  };
+  zai?: {
+    getUsage: () => Promise<ZaiUsageResponse>;
+    verify: (apiKey: string) => Promise<{
+      success: boolean;
+      authenticated: boolean;
+      message?: string;
+      error?: string;
+    }>;
+  };
+  gemini?: {
+    getUsage: () => Promise<GeminiUsageResponse>;
+  };
+  settings?: {
+    getStatus: () => Promise<{
+      success: boolean;
+      hasGlobalSettings: boolean;
+      hasCredentials: boolean;
+      dataDir: string;
+      needsMigration: boolean;
+    }>;
+    getGlobal: () => Promise<{
+      success: boolean;
+      settings?: Record<string, unknown>;
+      error?: string;
+    }>;
+    updateGlobal: (updates: Record<string, unknown>) => Promise<{
+      success: boolean;
+      settings?: Record<string, unknown>;
+      error?: string;
+    }>;
+    getCredentials: () => Promise<{
+      success: boolean;
+      credentials?: {
+        anthropic: { configured: boolean; masked: string };
+        google: { configured: boolean; masked: string };
+        openai: { configured: boolean; masked: string };
+      };
+      error?: string;
+    }>;
+    updateCredentials: (updates: {
+      apiKeys?: { anthropic?: string; google?: string; openai?: string };
+    }) => Promise<{
+      success: boolean;
+      credentials?: {
+        anthropic: { configured: boolean; masked: string };
+        google: { configured: boolean; masked: string };
+        openai: { configured: boolean; masked: string };
+      };
+      error?: string;
+    }>;
+    getProject: (projectPath: string) => Promise<{
+      success: boolean;
+      settings?: Record<string, unknown>;
+      error?: string;
+    }>;
+    updateProject: (
+      projectPath: string,
+      updates: Record<string, unknown>
+    ) => Promise<{
+      success: boolean;
+      settings?: Record<string, unknown>;
+      error?: string;
+    }>;
+    migrate: (data: Record<string, string>) => Promise<{
+      success: boolean;
+      migratedGlobalSettings: boolean;
+      migratedCredentials: boolean;
+      migratedProjectCount: number;
+      errors: string[];
+    }>;
+    discoverAgents: (
+      projectPath?: string,
+      sources?: Array<'user' | 'project'>
+    ) => Promise<{
+      success: boolean;
+      agents?: Array<{
+        name: string;
+        definition: {
+          description: string;
+          prompt: string;
+          tools?: string[];
+          model?: 'sonnet' | 'opus' | 'haiku' | 'inherit';
+        };
+        source: 'user' | 'project';
+        filePath: string;
+      }>;
+      error?: string;
+    }>;
+  };
+}
+
+// Note: Window interface is declared in @/types/electron.d.ts
+// Do not redeclare here to avoid type conflicts
+
+// Mock data for web development
+const mockFeatures: Feature[] = [
+  {
+    id: 'mock-feature-1',
+    title: 'Sample Feature',
+    category: 'Core',
+    description: 'Sample Feature',
+    status: 'backlog',
+    steps: ['Step 1', 'Step 2'],
+    passes: false,
+    createdAt: new Date().toISOString(),
+  },
+];
+
+// Local storage keys
+const STORAGE_KEYS = {
+  PROJECTS: 'automaker_projects',
+  CURRENT_PROJECT: 'automaker_current_project',
+  TRASHED_PROJECTS: 'automaker_trashed_projects',
+} as const;
+
+// Mock file system using localStorage
+const mockFileSystem: Record<string, string> = {};
+
+// Check if we're in Electron (for UI indicators only)
+export const isElectron = (): boolean => {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  if (window.isElectron === true) {
+    return true;
+  }
+
+  return !!window.electronAPI?.isElectron;
+};
+
+// Check if backend server is available
+let serverAvailable: boolean | null = null;
+let serverCheckPromise: Promise<boolean> | null = null;
+
+export const checkServerAvailable = async (): Promise<boolean> => {
+  if (serverAvailable !== null) return serverAvailable;
+  if (serverCheckPromise) return serverCheckPromise;
+
+  serverCheckPromise = (async () => {
+    try {
+      const serverUrl = import.meta.env.VITE_SERVER_URL || getServerUrlSync();
+      const response = await fetch(`${serverUrl}/api/health`, {
+        method: 'GET',
+        signal: AbortSignal.timeout(2000),
+      });
+      serverAvailable = response.ok;
+    } catch {
+      serverAvailable = false;
+    }
+    return serverAvailable;
+  })();
+
+  return serverCheckPromise;
+};
+
+// Reset server check (useful for retrying connection)
+export const resetServerCheck = (): void => {
+  serverAvailable = null;
+  serverCheckPromise = null;
+};
+
+// Cached HTTP client instance
+let httpClientInstance: ElectronAPI | null = null;
+
+/**
+ * Get the HTTP API client
+ *
+ * All API calls go through HTTP to the backend server.
+ * This is the only transport mode supported.
+ */
+export const getElectronAPI = (): ElectronAPI => {
+  if (typeof window === 'undefined') {
+    throw new Error('Cannot get API during SSR');
+  }
+
+  if (!httpClientInstance) {
+    httpClientInstance = getHttpApiClient();
+  }
+  return httpClientInstance!;
+};
+
+// Async version (same as sync since HTTP client is synchronously instantiated)
+export const getElectronAPIAsync = async (): Promise<ElectronAPI> => {
+  return getElectronAPI();
+};
+
+// Check if backend is connected (for showing connection status in UI)
+export const isBackendConnected = async (): Promise<boolean> => {
+  return await checkServerAvailable();
+};
+
+/**
+ * Get the current API mode being used
+ * Always returns "http" since that's the only mode now
+ */
+export const getCurrentApiMode = (): 'http' => {
+  return 'http';
+};
+
+// Debug helpers
+if (typeof window !== 'undefined') {
+  window.__checkApiMode = () => {
+    console.log('Current API mode:', getCurrentApiMode());
+    console.log('isElectron():', isElectron());
+  };
+}
+
+// Mock API for development/fallback when no backend is available
+const _getMockElectronAPI = (): ElectronAPI => {
+  return {
+    ping: async () => 'pong (mock)',
+
+    openExternalLink: async (url: string) => {
+      // In web mode, open in a new tab
+      window.open(url, '_blank', 'noopener,noreferrer');
+      return { success: true };
+    },
+
+    openDirectory: async () => {
+      // In web mode, we'll use a prompt to simulate directory selection
+      const path = prompt('Enter project directory path:', '/Users/demo/project');
+      return {
+        canceled: !path,
+        filePaths: path ? [path] : [],
+      };
+    },
+
+    openFile: async () => {
+      const path = prompt('Enter file path:');
+      return {
+        canceled: !path,
+        filePaths: path ? [path] : [],
+      };
+    },
+
+    readFile: async (filePath: string) => {
+      // Check mock file system first
+      if (mockFileSystem[filePath] !== undefined) {
+        return { success: true, content: mockFileSystem[filePath] };
+      }
+      // Return mock data based on file type
+      // Note: Features are now stored in .automaker/features/{id}/feature.json
+      if (filePath.endsWith('categories.json')) {
+        // Return empty array for categories when file doesn't exist yet
+        return { success: true, content: '[]' };
+      }
+      if (filePath.endsWith('app_spec.txt')) {
+        return {
+          success: true,
+          content:
+            '<project_specification>\n  <project_name>Demo Project</project_name>\n</project_specification>',
+        };
+      }
+      // For any file in mock features directory, check mock file system
+      if (filePath.includes('.automaker/features/')) {
+        if (mockFileSystem[filePath] !== undefined) {
+          return { success: true, content: mockFileSystem[filePath] };
+        }
+        // Return empty string for agent-output.md if it doesn't exist
+        if (filePath.endsWith('/agent-output.md')) {
+          return { success: true, content: '' };
+        }
+      }
+      return { success: false, error: 'File not found (mock)' };
+    },
+
+    writeFile: async (filePath: string, content: string) => {
+      mockFileSystem[filePath] = content;
+      return { success: true };
+    },
+
+    mkdir: async () => {
+      return { success: true };
+    },
+
+    readdir: async (dirPath: string) => {
+      // Return mock directory structure based on path
+      if (dirPath) {
+        // Check if this is the context directory - return files from mock file system
+        if (dirPath.includes('.automaker/context')) {
+          const contextFiles = Object.keys(mockFileSystem)
+            .filter((path) => path.startsWith(dirPath) && path !== dirPath)
+            .map((path) => {
+              const name = path.substring(dirPath.length + 1); // +1 for the trailing slash
+              return {
+                name,
+                isDirectory: false,
+                isFile: true,
+              };
+            })
+            .filter((entry) => !entry.name.includes('/')); // Only direct children
+          return { success: true, entries: contextFiles };
+        }
+        // Root level
+        if (
+          !dirPath.includes('/src') &&
+          !dirPath.includes('/tests') &&
+          !dirPath.includes('/public') &&
+          !dirPath.includes('.automaker')
+        ) {
+          return {
+            success: true,
+            entries: [
+              { name: 'src', isDirectory: true, isFile: false },
+              { name: 'tests', isDirectory: true, isFile: false },
+              { name: 'public', isDirectory: true, isFile: false },
+              { name: '.automaker', isDirectory: true, isFile: false },
+              { name: 'package.json', isDirectory: false, isFile: true },
+              { name: 'tsconfig.json', isDirectory: false, isFile: true },
+              { name: 'app_spec.txt', isDirectory: false, isFile: true },
+              { name: 'features', isDirectory: true, isFile: false },
+              { name: 'README.md', isDirectory: false, isFile: true },
+            ],
+          };
+        }
+        // src directory
+        if (dirPath.endsWith('/src')) {
+          return {
+            success: true,
+            entries: [
+              { name: 'components', isDirectory: true, isFile: false },
+              { name: 'lib', isDirectory: true, isFile: false },
+              { name: 'app', isDirectory: true, isFile: false },
+              { name: 'index.ts', isDirectory: false, isFile: true },
+              { name: 'utils.ts', isDirectory: false, isFile: true },
+            ],
+          };
+        }
+        // src/components directory
+        if (dirPath.endsWith('/components')) {
+          return {
+            success: true,
+            entries: [
+              { name: 'Button.tsx', isDirectory: false, isFile: true },
+              { name: 'Card.tsx', isDirectory: false, isFile: true },
+              { name: 'Header.tsx', isDirectory: false, isFile: true },
+              { name: 'Footer.tsx', isDirectory: false, isFile: true },
+            ],
+          };
+        }
+        // src/lib directory
+        if (dirPath.endsWith('/lib')) {
+          return {
+            success: true,
+            entries: [
+              { name: 'api.ts', isDirectory: false, isFile: true },
+              { name: 'helpers.ts', isDirectory: false, isFile: true },
+            ],
+          };
+        }
+        // src/app directory
+        if (dirPath.endsWith('/app')) {
+          return {
+            success: true,
+            entries: [
+              { name: 'page.tsx', isDirectory: false, isFile: true },
+              { name: 'layout.tsx', isDirectory: false, isFile: true },
+              { name: 'globals.css', isDirectory: false, isFile: true },
+            ],
+          };
+        }
+        // tests directory
+        if (dirPath.endsWith('/tests')) {
+          return {
+            success: true,
+            entries: [
+              { name: 'unit.test.ts', isDirectory: false, isFile: true },
+              { name: 'e2e.spec.ts', isDirectory: false, isFile: true },
+            ],
+          };
+        }
+        // public directory
+        if (dirPath.endsWith('/public')) {
+          return {
+            success: true,
+            entries: [
+              { name: 'favicon.ico', isDirectory: false, isFile: true },
+              { name: 'logo.svg', isDirectory: false, isFile: true },
+            ],
+          };
+        }
+        // Default empty for other paths
+        return { success: true, entries: [] };
+      }
+      return { success: true, entries: [] };
+    },
+
+    exists: async (filePath: string) => {
+      // Check if file exists in mock file system (including newly created files)
+      if (mockFileSystem[filePath] !== undefined) {
+        return true;
+      }
+      // Note: Features are now stored in .automaker/features/{id}/feature.json
+      if (filePath.endsWith('app_spec.txt') && !filePath.includes('.automaker')) {
+        return true;
+      }
+      return false;
+    },
+
+    stat: async () => {
+      return {
+        success: true,
+        stats: {
+          isDirectory: false,
+          isFile: true,
+          size: 1024,
+          mtime: new Date(),
+        },
+      };
+    },
+
+    deleteFile: async (filePath: string) => {
+      delete mockFileSystem[filePath];
+      return { success: true };
+    },
+
+    trashItem: async () => {
+      return { success: true };
+    },
+
+    getPath: async (name: string) => {
+      if (name === 'userData') {
+        return '/mock/userData';
+      }
+      return `/mock/${name}`;
+    },
+
+    // Save image to temp directory
+    saveImageToTemp: async (
+      data: string,
+      filename: string,
+      mimeType: string,
+      projectPath?: string
+    ) => {
+      // Generate a mock temp file path - use projectPath if provided
+      const timestamp = Date.now();
+      const safeName = filename.replace(/[^a-zA-Z0-9.-]/g, '_');
+      const tempFilePath = projectPath
+        ? `${projectPath}/.automaker/images/${timestamp}_${safeName}`
+        : `/tmp/automaker-images/${timestamp}_${safeName}`;
+
+      // Store the image data in mock file system for testing
+      mockFileSystem[tempFilePath] = data;
+
+      console.log('[Mock] Saved image to temp:', tempFilePath);
+      return { success: true, path: tempFilePath };
+    },
+
+    checkClaudeCli: async () => ({
+      success: false,
+      status: 'not_installed',
+      recommendation: 'Claude CLI checks are unavailable in the web preview.',
+    }),
+
+    model: {
+      getAvailable: async () => ({ success: true, models: [] }),
+      checkProviders: async () => ({ success: true, providers: {} }),
+    },
+
+    // Mock Setup API
+    setup: createMockSetupAPI(),
+
+    // Mock Auto Mode API
+    autoMode: createMockAutoModeAPI(),
+
+    // Mock Worktree API
+    worktree: createMockWorktreeAPI(),
+
+    // Mock Git API (for non-worktree operations)
+    git: createMockGitAPI(),
+
+    // Mock Spec Regeneration API
+    specRegeneration: createMockSpecRegenerationAPI(),
+
+    // Mock Features API
+    features: createMockFeaturesAPI(),
+
+    // Mock Running Agents API
+    runningAgents: createMockRunningAgentsAPI(),
+
+    // Mock GitHub API
+    github: createMockGitHubAPI(),
+
+    // Mock Claude API
+    claude: {
+      getUsage: async () => {
+        console.log('[Mock] Getting Claude usage');
+        return {
+          sessionTokensUsed: 0,
+          sessionLimit: 0,
+          sessionPercentage: 15,
+          sessionResetTime: new Date(Date.now() + 3600000).toISOString(),
+          sessionResetText: 'Resets in 1h',
+          weeklyTokensUsed: 0,
+          weeklyLimit: 0,
+          weeklyPercentage: 5,
+          weeklyResetTime: new Date(Date.now() + 86400000 * 2).toISOString(),
+          weeklyResetText: 'Resets Dec 23',
+          sonnetWeeklyTokensUsed: 0,
+          sonnetWeeklyPercentage: 1,
+          sonnetResetText: 'Resets Dec 27',
+          costUsed: null,
+          costLimit: null,
+          costCurrency: null,
+          lastUpdated: new Date().toISOString(),
+          userTimezone: 'UTC',
+        };
+      },
+    },
+
+    // Mock z.ai API
+    zai: {
+      getUsage: async () => {
+        console.log('[Mock] Getting z.ai usage');
+        return {
+          quotaLimits: {
+            tokens: {
+              limitType: 'TOKENS_LIMIT',
+              limit: 1000000,
+              used: 250000,
+              remaining: 750000,
+              usedPercent: 25,
+              nextResetTime: Date.now() + 86400000,
+            },
+            time: {
+              limitType: 'TIME_LIMIT',
+              limit: 3600,
+              used: 900,
+              remaining: 2700,
+              usedPercent: 25,
+              nextResetTime: Date.now() + 3600000,
+            },
+            planType: 'standard',
+          },
+          lastUpdated: new Date().toISOString(),
+        };
+      },
+      verify: async (apiKey: string) => {
+        console.log('[Mock] Verifying z.ai API key');
+        // Mock successful verification if key is provided
+        if (apiKey && apiKey.trim().length > 0) {
+          return {
+            success: true,
+            authenticated: true,
+            message: 'Connection successful! z.ai API responded.',
+          };
+        }
+        return {
+          success: false,
+          authenticated: false,
+          error: 'Please provide an API key to test.',
+        };
+      },
+    },
+
+    // Mock Gemini API
+    gemini: {
+      getUsage: async () => {
+        console.log('[Mock] Getting Gemini usage');
+        return {
+          authenticated: true,
+          authMethod: 'cli_login',
+          usedPercent: 0,
+          remainingPercent: 100,
+          lastUpdated: new Date().toISOString(),
+        };
+      },
+    },
+  };
+};
+
+// Install progress event type used by useCliInstallation hook
+interface InstallProgressEvent {
+  cli?: string;
+  data?: string;
+  type?: string;
+}
+
+// Setup API interface
+interface SetupAPI {
+  getClaudeStatus: () => Promise<{
+    success: boolean;
+    status?: string;
+    installed?: boolean;
+    method?: string;
+    version?: string;
+    path?: string;
+    auth?: {
+      authenticated: boolean;
+      method: string;
+      hasCredentialsFile?: boolean;
+      hasToken?: boolean;
+      hasStoredOAuthToken?: boolean;
+      hasStoredApiKey?: boolean;
+      hasEnvApiKey?: boolean;
+      hasEnvOAuthToken?: boolean;
+      hasCliAuth?: boolean;
+      hasRecentActivity?: boolean;
+    };
+    error?: string;
+  }>;
+  installClaude: () => Promise<{
+    success: boolean;
+    message?: string;
+    error?: string;
+  }>;
+  authClaude: () => Promise<{
+    success: boolean;
+    token?: string;
+    requiresManualAuth?: boolean;
+    terminalOpened?: boolean;
+    command?: string;
+    error?: string;
+    message?: string;
+    output?: string;
+  }>;
+  deauthClaude?: () => Promise<{
+    success: boolean;
+    requiresManualDeauth?: boolean;
+    command?: string;
+    message?: string;
+    error?: string;
+  }>;
+  storeApiKey: (provider: string, apiKey: string) => Promise<{ success: boolean; error?: string }>;
+  saveApiKey?: (provider: string, apiKey: string) => Promise<{ success: boolean; error?: string }>;
+  getApiKeys: () => Promise<{
+    success: boolean;
+    hasAnthropicKey: boolean;
+    hasGoogleKey: boolean;
+    hasOpenaiKey: boolean;
+  }>;
+  deleteApiKey: (
+    provider: string
+  ) => Promise<{ success: boolean; error?: string; message?: string }>;
+  getPlatform: () => Promise<{
+    success: boolean;
+    platform: string;
+    arch: string;
+    homeDir: string;
+    isWindows: boolean;
+    isMac: boolean;
+    isLinux: boolean;
+  }>;
+  verifyClaudeAuth: (authMethod?: 'cli' | 'api_key') => Promise<{
+    success: boolean;
+    authenticated: boolean;
+    authType?: 'oauth' | 'api_key' | 'cli';
+    error?: string;
+  }>;
+  getGhStatus?: () => Promise<{
+    success: boolean;
+    installed: boolean;
+    authenticated: boolean;
+    version: string | null;
+    path: string | null;
+    user: string | null;
+    error?: string;
+  }>;
+  // Cursor CLI methods
+  getCursorStatus?: () => Promise<{
+    success: boolean;
+    installed?: boolean;
+    version?: string | null;
+    path?: string | null;
+    auth?: {
+      authenticated: boolean;
+      method: string;
+    };
+    installCommand?: string;
+    loginCommand?: string;
+    error?: string;
+  }>;
+  authCursor?: () => Promise<{
+    success: boolean;
+    token?: string;
+    requiresManualAuth?: boolean;
+    terminalOpened?: boolean;
+    command?: string;
+    message?: string;
+    output?: string;
+  }>;
+  deauthCursor?: () => Promise<{
+    success: boolean;
+    requiresManualDeauth?: boolean;
+    command?: string;
+    message?: string;
+    error?: string;
+  }>;
+  // Codex CLI methods
+  getCodexStatus?: () => Promise<{
+    success: boolean;
+    status?: string;
+    installed?: boolean;
+    method?: string;
+    version?: string;
+    path?: string;
+    auth?: {
+      authenticated: boolean;
+      method: string;
+      hasAuthFile?: boolean;
+      hasOAuthToken?: boolean;
+      hasApiKey?: boolean;
+      hasStoredApiKey?: boolean;
+      hasEnvApiKey?: boolean;
+    };
+    error?: string;
+  }>;
+  installCodex?: () => Promise<{
+    success: boolean;
+    message?: string;
+    error?: string;
+  }>;
+  authCodex?: () => Promise<{
+    success: boolean;
+    token?: string;
+    requiresManualAuth?: boolean;
+    terminalOpened?: boolean;
+    command?: string;
+    error?: string;
+    message?: string;
+    output?: string;
+  }>;
+  deauthCodex?: () => Promise<{
+    success: boolean;
+    requiresManualDeauth?: boolean;
+    command?: string;
+    message?: string;
+    error?: string;
+  }>;
+  verifyCodexAuth?: (
+    authMethod: 'cli' | 'api_key',
+    apiKey?: string
+  ) => Promise<{
+    success: boolean;
+    authenticated: boolean;
+    error?: string;
+  }>;
+  // OpenCode CLI methods
+  getOpencodeStatus?: () => Promise<{
+    success: boolean;
+    status?: string;
+    installed?: boolean;
+    method?: string;
+    version?: string;
+    path?: string;
+    recommendation?: string;
+    installCommands?: {
+      macos?: string;
+      linux?: string;
+      npm?: string;
+    };
+    auth?: {
+      authenticated: boolean;
+      method: string;
+      hasAuthFile?: boolean;
+      hasOAuthToken?: boolean;
+      hasApiKey?: boolean;
+      hasStoredApiKey?: boolean;
+      hasEnvApiKey?: boolean;
+    };
+    error?: string;
+  }>;
+  authOpencode?: () => Promise<{
+    success: boolean;
+    token?: string;
+    requiresManualAuth?: boolean;
+    terminalOpened?: boolean;
+    command?: string;
+    message?: string;
+    output?: string;
+  }>;
+  deauthOpencode?: () => Promise<{
+    success: boolean;
+    requiresManualDeauth?: boolean;
+    command?: string;
+    message?: string;
+    error?: string;
+  }>;
+  getOpencodeModels?: (refresh?: boolean) => Promise<{
+    success: boolean;
+    models?: Array<{
+      id: string;
+      name: string;
+      modelString: string;
+      provider: string;
+      description: string;
+      supportsTools: boolean;
+      supportsVision: boolean;
+      tier: string;
+      default?: boolean;
+    }>;
+    count?: number;
+    cached?: boolean;
+    error?: string;
+  }>;
+  refreshOpencodeModels?: () => Promise<{
+    success: boolean;
+    models?: Array<{
+      id: string;
+      name: string;
+      modelString: string;
+      provider: string;
+      description: string;
+      supportsTools: boolean;
+      supportsVision: boolean;
+      tier: string;
+      default?: boolean;
+    }>;
+    count?: number;
+    error?: string;
+  }>;
+  getOpencodeProviders?: () => Promise<{
+    success: boolean;
+    providers?: Array<{
+      id: string;
+      name: string;
+      authenticated: boolean;
+      authMethod?: 'oauth' | 'api_key';
+    }>;
+    authenticated?: Array<{
+      id: string;
+      name: string;
+      authenticated: boolean;
+      authMethod?: 'oauth' | 'api_key';
+    }>;
+    error?: string;
+  }>;
+  clearOpencodeCache?: () => Promise<{
+    success: boolean;
+    message?: string;
+    error?: string;
+  }>;
+  // Gemini CLI methods
+  getGeminiStatus?: () => Promise<{
+    success: boolean;
+    status?: string;
+    installed?: boolean;
+    method?: string;
+    version?: string;
+    path?: string;
+    recommendation?: string;
+    installCommands?: {
+      macos?: string;
+      linux?: string;
+      npm?: string;
+    };
+    auth?: {
+      authenticated: boolean;
+      method: string;
+      hasApiKey?: boolean;
+      hasEnvApiKey?: boolean;
+      error?: string;
+    };
+    loginCommand?: string;
+    installCommand?: string;
+    error?: string;
+  }>;
+  authGemini?: () => Promise<{
+    success: boolean;
+    requiresManualAuth?: boolean;
+    command?: string;
+    message?: string;
+    error?: string;
+  }>;
+  deauthGemini?: () => Promise<{
+    success: boolean;
+    requiresManualDeauth?: boolean;
+    command?: string;
+    message?: string;
+    error?: string;
+  }>;
+  // Copilot SDK methods
+  getCopilotStatus?: () => Promise<{
+    success: boolean;
+    status?: string;
+    installed?: boolean;
+    method?: string;
+    version?: string;
+    path?: string;
+    recommendation?: string;
+    auth?: {
+      authenticated: boolean;
+      method: string;
+      login?: string;
+      host?: string;
+      error?: string;
+    };
+    loginCommand?: string;
+    installCommand?: string;
+    error?: string;
+  }>;
+  onInstallProgress?: (
+    callback: (progress: InstallProgressEvent) => void
+  ) => (() => void) | undefined;
+  onAuthProgress?: (callback: (progress: InstallProgressEvent) => void) => (() => void) | undefined;
+}
+
+// Mock Setup API implementation
+function createMockSetupAPI(): SetupAPI {
+  const mockStoreApiKey = async (provider: string, _apiKey: string) => {
+    console.log('[Mock] Storing API key for:', provider);
+    return { success: true };
+  };
+
+  return {
+    getClaudeStatus: async () => {
+      console.log('[Mock] Getting Claude status');
+      return {
+        success: true,
+        status: 'not_installed',
+        installed: false,
+        auth: {
+          authenticated: false,
+          method: 'none',
+          hasCredentialsFile: false,
+          hasToken: false,
+          hasCliAuth: false,
+          hasRecentActivity: false,
+        },
+      };
+    },
+
+    installClaude: async () => {
+      console.log('[Mock] Installing Claude CLI');
+      // Simulate installation delay
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      return {
+        success: false,
+        error:
+          'CLI installation is only available in the Electron app. Please run the command manually.',
+      };
+    },
+
+    authClaude: async () => {
+      console.log('[Mock] Auth Claude CLI');
+      return {
+        success: true,
+        requiresManualAuth: true,
+        command: 'claude login',
+      };
+    },
+
+    deauthClaude: async () => {
+      console.log('[Mock] Deauth Claude CLI');
+      return {
+        success: true,
+        requiresManualDeauth: true,
+        command: 'claude logout',
+      };
+    },
+
+    storeApiKey: mockStoreApiKey,
+    saveApiKey: mockStoreApiKey,
+
+    getApiKeys: async () => {
+      console.log('[Mock] Getting API keys');
+      return {
+        success: true,
+        hasAnthropicKey: false,
+        hasGoogleKey: false,
+        hasOpenaiKey: false,
+      };
+    },
+
+    deleteApiKey: async (provider: string) => {
+      console.log('[Mock] Deleting API key for:', provider);
+      return { success: true, message: `API key for ${provider} deleted` };
+    },
+
+    getPlatform: async () => {
+      return {
+        success: true,
+        platform: 'darwin',
+        arch: 'arm64',
+        homeDir: '/Users/mock',
+        isWindows: false,
+        isMac: true,
+        isLinux: false,
+      };
+    },
+
+    verifyClaudeAuth: async (authMethod?: 'cli' | 'api_key') => {
+      console.log('[Mock] Verifying Claude auth with method:', authMethod);
+      // Mock always returns not authenticated
+      return {
+        success: true,
+        authenticated: false,
+        error: 'Mock environment - authentication not available',
+      };
+    },
+
+    getGhStatus: async () => {
+      console.log('[Mock] Getting GitHub CLI status');
+      return {
+        success: true,
+        installed: false,
+        authenticated: false,
+        version: null,
+        path: null,
+        user: null,
+      };
+    },
+
+    // Cursor CLI mock methods
+    getCursorStatus: async () => {
+      console.log('[Mock] Getting Cursor status');
+      return {
+        success: true,
+        installed: false,
+        version: null,
+        path: null,
+        auth: { authenticated: false, method: 'none' },
+      };
+    },
+
+    authCursor: async () => {
+      console.log('[Mock] Auth Cursor CLI');
+      return {
+        success: true,
+        requiresManualAuth: true,
+        command: 'cursor --login',
+      };
+    },
+
+    deauthCursor: async () => {
+      console.log('[Mock] Deauth Cursor CLI');
+      return {
+        success: true,
+        requiresManualDeauth: true,
+        command: 'cursor --logout',
+      };
+    },
+
+    // Codex CLI mock methods
+    getCodexStatus: async () => {
+      console.log('[Mock] Getting Codex status');
+      return {
+        success: true,
+        status: 'not_installed',
+        installed: false,
+        auth: { authenticated: false, method: 'none' },
+      };
+    },
+
+    installCodex: async () => {
+      console.log('[Mock] Installing Codex CLI');
+      return {
+        success: false,
+        error: 'CLI installation is only available in the Electron app.',
+      };
+    },
+
+    authCodex: async () => {
+      console.log('[Mock] Auth Codex CLI');
+      return {
+        success: true,
+        requiresManualAuth: true,
+        command: 'codex login',
+      };
+    },
+
+    deauthCodex: async () => {
+      console.log('[Mock] Deauth Codex CLI');
+      return {
+        success: true,
+        requiresManualDeauth: true,
+        command: 'codex logout',
+      };
+    },
+
+    verifyCodexAuth: async (authMethod: 'cli' | 'api_key') => {
+      console.log('[Mock] Verifying Codex auth with method:', authMethod);
+      return {
+        success: true,
+        authenticated: false,
+        error: 'Mock environment - authentication not available',
+      };
+    },
+
+    // OpenCode CLI mock methods
+    getOpencodeStatus: async () => {
+      console.log('[Mock] Getting OpenCode status');
+      return {
+        success: true,
+        status: 'not_installed',
+        installed: false,
+        auth: { authenticated: false, method: 'none' },
+      };
+    },
+
+    authOpencode: async () => {
+      console.log('[Mock] Auth OpenCode CLI');
+      return {
+        success: true,
+        requiresManualAuth: true,
+        command: 'opencode auth login',
+      };
+    },
+
+    deauthOpencode: async () => {
+      console.log('[Mock] Deauth OpenCode CLI');
+      return {
+        success: true,
+        requiresManualDeauth: true,
+        command: 'opencode auth logout',
+      };
+    },
+
+    getOpencodeModels: async () => {
+      console.log('[Mock] Getting OpenCode models');
+      return {
+        success: true,
+        models: [],
+        count: 0,
+        cached: false,
+      };
+    },
+
+    refreshOpencodeModels: async () => {
+      console.log('[Mock] Refreshing OpenCode models');
+      return {
+        success: true,
+        models: [],
+        count: 0,
+      };
+    },
+
+    getOpencodeProviders: async () => {
+      console.log('[Mock] Getting OpenCode providers');
+      return {
+        success: true,
+        providers: [],
+        authenticated: [],
+      };
+    },
+
+    clearOpencodeCache: async () => {
+      console.log('[Mock] Clearing OpenCode cache');
+      return {
+        success: true,
+        message: 'Cache cleared',
+      };
+    },
+
+    // Gemini CLI mock methods
+    getGeminiStatus: async () => {
+      console.log('[Mock] Getting Gemini status');
+      return {
+        success: true,
+        status: 'not_installed',
+        installed: false,
+        auth: { authenticated: false, method: 'none' },
+      };
+    },
+
+    authGemini: async () => {
+      console.log('[Mock] Auth Gemini CLI');
+      return {
+        success: true,
+        requiresManualAuth: true,
+        command: 'gemini auth login',
+      };
+    },
+
+    deauthGemini: async () => {
+      console.log('[Mock] Deauth Gemini CLI');
+      return {
+        success: true,
+        requiresManualDeauth: true,
+        command: 'gemini auth logout',
+      };
+    },
+
+    // Copilot SDK mock methods
+    getCopilotStatus: async () => {
+      console.log('[Mock] Getting Copilot status');
+      return {
+        success: true,
+        status: 'not_installed',
+        installed: false,
+        auth: { authenticated: false, method: 'none' },
+      };
+    },
+
+    onInstallProgress: (_callback) => {
+      // Mock progress events
+      return () => {};
+    },
+
+    onAuthProgress: (_callback) => {
+      // Mock auth events
+      return () => {};
+    },
+  };
+}
+
+// Mock Worktree API implementation
+function createMockWorktreeAPI(): WorktreeAPI {
+  return {
+    mergeFeature: async (
+      projectPath: string,
+      branchName: string,
+      worktreePath: string,
+      targetBranch?: string,
+      options?: object
+    ) => {
+      const target = targetBranch || 'main';
+      console.log('[Mock] Merging feature:', {
+        projectPath,
+        branchName,
+        worktreePath,
+        targetBranch: target,
+        options,
+      });
+      return { success: true, mergedBranch: branchName, targetBranch: target };
+    },
+
+    getInfo: async (projectPath: string, featureId: string) => {
+      console.log('[Mock] Getting worktree info:', { projectPath, featureId });
+      return {
+        success: true,
+        worktreePath: `/mock/worktrees/${featureId}`,
+        branchName: `feature/${featureId}`,
+        head: 'abc1234',
+      };
+    },
+
+    getStatus: async (projectPath: string, featureId: string) => {
+      console.log('[Mock] Getting worktree status:', {
+        projectPath,
+        featureId,
+      });
+      return {
+        success: true,
+        modifiedFiles: 3,
+        files: ['src/feature.ts', 'tests/feature.spec.ts', 'README.md'],
+        diffStat: ' 3 files changed, 50 insertions(+), 10 deletions(-)',
+        recentCommits: ['abc1234 feat: implement feature', 'def5678 test: add tests for feature'],
+      };
+    },
+
+    list: async (projectPath: string) => {
+      console.log('[Mock] Listing worktrees:', { projectPath });
+      return { success: true, worktrees: [] };
+    },
+
+    listAll: async (
+      projectPath: string,
+      includeDetails?: boolean,
+      forceRefreshGitHub?: boolean
+    ) => {
+      console.log('[Mock] Listing all worktrees:', {
+        projectPath,
+        includeDetails,
+        forceRefreshGitHub,
+      });
+      return {
+        success: true,
+        worktrees: [
+          {
+            path: projectPath,
+            branch: 'main',
+            isMain: true,
+            isCurrent: true,
+            hasWorktree: true,
+            hasChanges: false,
+            changedFilesCount: 0,
+          },
+        ],
+      };
+    },
+
+    create: async (projectPath: string, branchName: string, baseBranch?: string) => {
+      console.log('[Mock] Creating worktree:', {
+        projectPath,
+        branchName,
+        baseBranch,
+      });
+      return {
+        success: true,
+        worktree: {
+          path: `${projectPath}/.worktrees/${branchName}`,
+          branch: branchName,
+          isNew: true,
+        },
+      };
+    },
+
+    delete: async (projectPath: string, worktreePath: string, deleteBranch?: boolean) => {
+      console.log('[Mock] Deleting worktree:', {
+        projectPath,
+        worktreePath,
+        deleteBranch,
+      });
+      return {
+        success: true,
+        deleted: {
+          worktreePath,
+          branch: deleteBranch ? 'feature-branch' : null,
+        },
+      };
+    },
+
+    commit: async (worktreePath: string, message: string, files?: string[]) => {
+      console.log('[Mock] Committing changes:', { worktreePath, message, files });
+      return {
+        success: true,
+        result: {
+          committed: true,
+          commitHash: 'abc123',
+          branch: 'feature-branch',
+          message,
+        },
+      };
+    },
+
+    generateCommitMessage: async (worktreePath: string) => {
+      console.log('[Mock] Generating commit message for:', worktreePath);
+      return {
+        success: true,
+        message: 'feat: Add mock commit message generation',
+      };
+    },
+
+    generatePRDescription: async (worktreePath: string, baseBranch?: string) => {
+      console.log('[Mock] Generating PR description for:', { worktreePath, baseBranch });
+      return {
+        success: true,
+        title: 'Add new feature implementation',
+        body: '## Summary\n- Added new feature\n\n## Changes\n- Implementation details here',
+      };
+    },
+
+    push: async (
+      worktreePath: string,
+      force?: boolean,
+      remote?: string,
+      _autoResolve?: boolean
+    ) => {
+      const targetRemote = remote || 'origin';
+      console.log('[Mock] Pushing worktree:', { worktreePath, force, remote: targetRemote });
+      return {
+        success: true,
+        result: {
+          branch: 'feature-branch',
+          pushed: true,
+          message: `Successfully pushed to ${targetRemote}/feature-branch`,
+        },
+      };
+    },
+
+    sync: async (worktreePath: string, remote?: string) => {
+      const targetRemote = remote || 'origin';
+      console.log('[Mock] Syncing worktree:', { worktreePath, remote: targetRemote });
+      return {
+        success: true,
+        result: {
+          branch: 'feature-branch',
+          pulled: true,
+          pushed: true,
+          message: `Synced with ${targetRemote}`,
+        },
+      };
+    },
+
+    setTracking: async (worktreePath: string, remote: string, branch?: string) => {
+      const targetBranch = branch || 'feature-branch';
+      console.log('[Mock] Setting tracking branch:', {
+        worktreePath,
+        remote,
+        branch: targetBranch,
+      });
+      return {
+        success: true,
+        result: {
+          branch: targetBranch,
+          remote,
+          upstream: `${remote}/${targetBranch}`,
+          message: `Set tracking branch to ${remote}/${targetBranch}`,
+        },
+      };
+    },
+
+    createPR: async (worktreePath: string, options?: CreatePROptions) => {
+      console.log('[Mock] Creating PR:', { worktreePath, options });
+      return {
+        success: true,
+        result: {
+          branch: 'feature-branch',
+          committed: true,
+          commitHash: 'abc123',
+          pushed: true,
+          prUrl: 'https://github.com/example/repo/pull/1',
+          prCreated: true,
+        },
+      };
+    },
+
+    updatePRNumber: async (worktreePath: string, prNumber: number, projectPath?: string) => {
+      console.log('[Mock] Updating PR number:', { worktreePath, prNumber, projectPath });
+      return {
+        success: true,
+        result: {
+          branch: 'feature-branch',
+          prInfo: {
+            number: prNumber,
+            url: `https://github.com/example/repo/pull/${prNumber}`,
+            title: `PR #${prNumber}`,
+            state: 'OPEN',
+            createdAt: new Date().toISOString(),
+          },
+        },
+      };
+    },
+
+    getDiffs: async (projectPath: string, featureId: string) => {
+      console.log('[Mock] Getting file diffs:', { projectPath, featureId });
+      return {
+        success: true,
+        diff: "diff --git a/src/feature.ts b/src/feature.ts\n+++ new file\n@@ -0,0 +1,10 @@\n+export function feature() {\n+  return 'hello';\n+}",
+        files: [
+          { status: 'A', path: 'src/feature.ts', statusText: 'Added' },
+          { status: 'M', path: 'README.md', statusText: 'Modified' },
+        ],
+        hasChanges: true,
+      };
+    },
+
+    getFileDiff: async (projectPath: string, featureId: string, filePath: string) => {
+      console.log('[Mock] Getting file diff:', {
+        projectPath,
+        featureId,
+        filePath,
+      });
+      return {
+        success: true,
+        diff: `diff --git a/${filePath} b/${filePath}\n+++ new file\n@@ -0,0 +1,5 @@\n+// New content`,
+        filePath,
+      };
+    },
+
+    stageFiles: async (worktreePath: string, files: string[], operation: 'stage' | 'unstage') => {
+      console.log('[Mock] Stage files:', { worktreePath, files, operation });
+      return {
+        success: true,
+        result: {
+          operation,
+          filesCount: files.length,
+        },
+      };
+    },
+
+    pull: async (
+      worktreePath: string,
+      remote?: string,
+      stashIfNeeded?: boolean,
+      remoteBranch?: string
+    ) => {
+      const targetRemote = remote || 'origin';
+      console.log('[Mock] Pulling latest changes for:', {
+        worktreePath,
+        remote: targetRemote,
+        stashIfNeeded,
+        remoteBranch,
+      });
+      return {
+        success: true,
+        result: {
+          branch: 'main',
+          pulled: true,
+          message: `Pulled latest changes from ${targetRemote}`,
+          hasLocalChanges: false,
+          hasConflicts: false,
+          stashed: false,
+          stashRestored: false,
+        },
+      };
+    },
+
+    checkoutBranch: async (
+      worktreePath: string,
+      branchName: string,
+      baseBranch?: string,
+      stashChanges?: boolean,
+      _includeUntracked?: boolean
+    ) => {
+      console.log('[Mock] Creating and checking out branch:', {
+        worktreePath,
+        branchName,
+        baseBranch,
+        stashChanges,
+      });
+      return {
+        success: true,
+        result: {
+          previousBranch: 'main',
+          newBranch: branchName,
+          message: `Created and checked out branch '${branchName}'`,
+          hasConflicts: false,
+          stashedChanges: stashChanges ?? false,
+        },
+      };
+    },
+
+    checkChanges: async (worktreePath: string) => {
+      console.log('[Mock] Checking for uncommitted changes:', worktreePath);
+      return {
+        success: true,
+        result: {
+          hasChanges: false,
+          staged: [],
+          unstaged: [],
+          untracked: [],
+          totalFiles: 0,
+        },
+      };
+    },
+
+    listBranches: async (worktreePath: string) => {
+      console.log('[Mock] Listing branches for:', worktreePath);
+      return {
+        success: true,
+        result: {
+          currentBranch: 'main',
+          branches: [
+            { name: 'main', isCurrent: true, isRemote: false },
+            { name: 'develop', isCurrent: false, isRemote: false },
+            { name: 'feature/example', isCurrent: false, isRemote: false },
+          ],
+          aheadCount: 2,
+          behindCount: 0,
+          hasRemoteBranch: true,
+          hasAnyRemotes: true,
+        },
+      };
+    },
+
+    switchBranch: async (worktreePath: string, branchName: string) => {
+      console.log('[Mock] Switching to branch:', { worktreePath, branchName });
+      return {
+        success: true,
+        result: {
+          previousBranch: 'main',
+          currentBranch: branchName,
+          message: `Switched to branch '${branchName}'`,
+          hasConflicts: false,
+          stashedChanges: false,
+        },
+      };
+    },
+
+    listRemotes: async (worktreePath: string) => {
+      console.log('[Mock] Listing remotes for:', worktreePath);
+      return {
+        success: true,
+        result: {
+          remotes: [
+            {
+              name: 'origin',
+              url: 'git@github.com:example/repo.git',
+              branches: [
+                { name: 'main', fullRef: 'origin/main' },
+                { name: 'develop', fullRef: 'origin/develop' },
+                { name: 'feature/example', fullRef: 'origin/feature/example' },
+              ],
+            },
+          ],
+        },
+      };
+    },
+
+    addRemote: async (worktreePath: string, remoteName: string, remoteUrl: string) => {
+      console.log('[Mock] Adding remote:', { worktreePath, remoteName, remoteUrl });
+      return {
+        success: true,
+        result: {
+          remoteName,
+          remoteUrl,
+          fetched: true,
+          message: `Added remote '${remoteName}' (${remoteUrl})`,
+        },
+      };
+    },
+
+    openInEditor: async (worktreePath: string, editorCommand?: string) => {
+      const ANTIGRAVITY_EDITOR_COMMAND = 'antigravity';
+      const ANTIGRAVITY_LEGACY_COMMAND = 'agy';
+      // Map editor commands to display names
+      const editorNameMap: Record<string, string> = {
+        cursor: 'Cursor',
+        code: 'VS Code',
+        zed: 'Zed',
+        subl: 'Sublime Text',
+        windsurf: 'Windsurf',
+        trae: 'Trae',
+        rider: 'Rider',
+        webstorm: 'WebStorm',
+        xed: 'Xcode',
+        studio: 'Android Studio',
+        [ANTIGRAVITY_EDITOR_COMMAND]: 'Antigravity',
+        [ANTIGRAVITY_LEGACY_COMMAND]: 'Antigravity',
+        open: 'Finder',
+        explorer: 'Explorer',
+        'xdg-open': 'File Manager',
+      };
+      const editorName = editorCommand ? (editorNameMap[editorCommand] ?? 'Editor') : 'VS Code';
+      console.log('[Mock] Opening in editor:', worktreePath, 'using:', editorName);
+      return {
+        success: true,
+        result: {
+          message: `Opened ${worktreePath} in ${editorName}`,
+          editorName,
+        },
+      };
+    },
+
+    getDefaultEditor: async () => {
+      console.log('[Mock] Getting default editor');
+      return {
+        success: true,
+        result: {
+          editorName: 'VS Code',
+          editorCommand: 'code',
+        },
+      };
+    },
+
+    getAvailableEditors: async () => {
+      console.log('[Mock] Getting available editors');
+      return {
+        success: true,
+        result: {
+          editors: [
+            { name: 'VS Code', command: 'code' },
+            { name: 'Finder', command: 'open' },
+          ],
+        },
+      };
+    },
+    refreshEditors: async () => {
+      console.log('[Mock] Refreshing available editors');
+      return {
+        success: true,
+        result: {
+          editors: [
+            { name: 'VS Code', command: 'code' },
+            { name: 'Finder', command: 'open' },
+          ],
+          message: 'Found 2 available editors',
+        },
+      };
+    },
+
+    getAvailableTerminals: async () => {
+      console.log('[Mock] Getting available terminals');
+      return {
+        success: true,
+        result: {
+          terminals: [
+            { id: 'iterm2', name: 'iTerm2', command: 'open -a iTerm' },
+            { id: 'terminal-macos', name: 'Terminal', command: 'open -a Terminal' },
+          ],
+        },
+      };
+    },
+
+    getDefaultTerminal: async () => {
+      console.log('[Mock] Getting default terminal');
+      return {
+        success: true,
+        result: {
+          terminalId: 'iterm2',
+          terminalName: 'iTerm2',
+          terminalCommand: 'open -a iTerm',
+        },
+      };
+    },
+
+    refreshTerminals: async () => {
+      console.log('[Mock] Refreshing available terminals');
+      return {
+        success: true,
+        result: {
+          terminals: [
+            { id: 'iterm2', name: 'iTerm2', command: 'open -a iTerm' },
+            { id: 'terminal-macos', name: 'Terminal', command: 'open -a Terminal' },
+          ],
+          message: 'Found 2 available terminals',
+        },
+      };
+    },
+
+    openInExternalTerminal: async (worktreePath: string, terminalId?: string) => {
+      console.log('[Mock] Opening in external terminal:', worktreePath, terminalId);
+      return {
+        success: true,
+        result: {
+          message: `Opened ${worktreePath} in ${terminalId ?? 'default terminal'}`,
+          terminalName: terminalId ?? 'Terminal',
+        },
+      };
+    },
+
+    initGit: async (projectPath: string) => {
+      console.log('[Mock] Initializing git:', projectPath);
+      return {
+        success: true,
+        result: {
+          initialized: true,
+          message: `Initialized git repository in ${projectPath}`,
+        },
+      };
+    },
+
+    startDevServer: async (projectPath: string, worktreePath: string) => {
+      console.log('[Mock] Starting dev server:', { projectPath, worktreePath });
+      return {
+        success: true,
+        result: {
+          worktreePath,
+          port: 3001,
+          url: 'http://localhost:3001',
+          message: 'Dev server started on port 3001',
+        },
+      };
+    },
+
+    stopDevServer: async (worktreePath: string) => {
+      console.log('[Mock] Stopping dev server:', worktreePath);
+      return {
+        success: true,
+        result: {
+          worktreePath,
+          message: 'Dev server stopped',
+        },
+      };
+    },
+
+    listDevServers: async () => {
+      console.log('[Mock] Listing dev servers');
+      return {
+        success: true,
+        result: {
+          servers: [],
+        },
+      };
+    },
+
+    getDevServerLogs: async (worktreePath: string) => {
+      console.log('[Mock] Getting dev server logs:', { worktreePath });
+      return {
+        success: false,
+        error: 'No dev server running for this worktree',
+      };
+    },
+
+    onDevServerLogEvent: (_callback) => {
+      console.log('[Mock] Subscribing to dev server log events');
+      // Return unsubscribe function
+      return () => {
+        console.log('[Mock] Unsubscribing from dev server log events');
+      };
+    },
+
+    getPRInfo: async (worktreePath: string, branchName: string) => {
+      console.log('[Mock] Getting PR info:', { worktreePath, branchName });
+      return {
+        success: true,
+        result: {
+          hasPR: false,
+          ghCliAvailable: false,
+        },
+      };
+    },
+
+    getInitScript: async (projectPath: string) => {
+      console.log('[Mock] Getting init script:', { projectPath });
+      return {
+        success: true,
+        exists: false,
+        content: '',
+        path: `${projectPath}/.automaker/worktree-init.sh`,
+      };
+    },
+
+    setInitScript: async (projectPath: string, content: string) => {
+      console.log('[Mock] Setting init script:', { projectPath, content });
+      return {
+        success: true,
+        path: `${projectPath}/.automaker/worktree-init.sh`,
+      };
+    },
+
+    deleteInitScript: async (projectPath: string) => {
+      console.log('[Mock] Deleting init script:', { projectPath });
+      return {
+        success: true,
+      };
+    },
+
+    runInitScript: async (projectPath: string, worktreePath: string, branch: string) => {
+      console.log('[Mock] Running init script:', { projectPath, worktreePath, branch });
+      return {
+        success: true,
+        message: 'Init script started (mock)',
+      };
+    },
+
+    onInitScriptEvent: (_callback) => {
+      console.log('[Mock] Subscribing to init script events');
+      // Return unsubscribe function
+      return () => {
+        console.log('[Mock] Unsubscribing from init script events');
+      };
+    },
+
+    discardChanges: async (worktreePath: string, files?: string[]) => {
+      console.log('[Mock] Discarding changes:', { worktreePath, files });
+      return {
+        success: true,
+        result: {
+          discarded: true,
+          filesDiscarded: 0,
+          filesRemaining: 0,
+          branch: 'main',
+          message: 'Mock: Changes discarded successfully',
+        },
+      };
+    },
+
+    // Test runner methods
+    startTests: async (
+      worktreePath: string,
+      options?: { projectPath?: string; testFile?: string }
+    ) => {
+      console.log('[Mock] Starting tests:', { worktreePath, options });
+      return {
+        success: true,
+        result: {
+          sessionId: 'mock-session-123',
+          worktreePath,
+          command: 'npm run test',
+          status: 'running' as const,
+          testFile: options?.testFile,
+          message: 'Tests started (mock)',
+        },
+      };
+    },
+
+    stopTests: async (sessionId: string) => {
+      console.log('[Mock] Stopping tests:', { sessionId });
+      return {
+        success: true,
+        result: {
+          sessionId,
+          message: 'Tests stopped (mock)',
+        },
+      };
+    },
+
+    getTestLogs: async (worktreePath?: string, sessionId?: string) => {
+      console.log('[Mock] Getting test logs:', { worktreePath, sessionId });
+      return {
+        success: false,
+        error: 'No test sessions found (mock)',
+      };
+    },
+
+    onTestRunnerEvent: (_callback) => {
+      console.log('[Mock] Subscribing to test runner events');
+      // Return unsubscribe function
+      return () => {
+        console.log('[Mock] Unsubscribing from test runner events');
+      };
+    },
+
+    getCommitLog: async (worktreePath: string, limit?: number) => {
+      console.log('[Mock] Getting commit log:', { worktreePath, limit });
+      return {
+        success: true,
+        result: {
+          branch: 'main',
+          commits: [
+            {
+              hash: 'abc1234567890',
+              shortHash: 'abc1234',
+              author: 'Mock User',
+              authorEmail: 'mock@example.com',
+              date: new Date().toISOString(),
+              subject: 'Mock commit message',
+              body: '',
+              files: ['src/index.ts', 'package.json'],
+            },
+          ],
+          total: 1,
+        },
+      };
+    },
+    stashPush: async (worktreePath: string, message?: string, files?: string[]) => {
+      console.log('[Mock] Stash push:', { worktreePath, message, files });
+      return {
+        success: true,
+        result: {
+          stashed: true,
+          branch: 'main',
+          message: message || 'WIP on main',
+        },
+      };
+    },
+    stashList: async (worktreePath: string) => {
+      console.log('[Mock] Stash list:', { worktreePath });
+      return {
+        success: true,
+        result: {
+          stashes: [],
+          total: 0,
+        },
+      };
+    },
+    stashApply: async (worktreePath: string, stashIndex: number, pop?: boolean) => {
+      console.log('[Mock] Stash apply:', { worktreePath, stashIndex, pop });
+      return {
+        success: true,
+        result: {
+          applied: true,
+          hasConflicts: false,
+          conflictFiles: [] as string[],
+          operation: pop ? ('pop' as const) : ('apply' as const),
+          stashIndex,
+          message: `Stash ${pop ? 'popped' : 'applied'} successfully`,
+        },
+      };
+    },
+    stashDrop: async (worktreePath: string, stashIndex: number) => {
+      console.log('[Mock] Stash drop:', { worktreePath, stashIndex });
+      return {
+        success: true,
+        result: {
+          dropped: true,
+          stashIndex,
+          message: `Stash stash@{${stashIndex}} dropped successfully`,
+        },
+      };
+    },
+    cherryPick: async (
+      worktreePath: string,
+      commitHashes: string[],
+      options?: { noCommit?: boolean }
+    ) => {
+      console.log('[Mock] Cherry-pick:', { worktreePath, commitHashes, options });
+      return {
+        success: true,
+        result: {
+          cherryPicked: true,
+          commitHashes,
+          branch: 'main',
+          message: `Cherry-picked ${commitHashes.length} commit(s) successfully`,
+        },
+      };
+    },
+    getBranchCommitLog: async (worktreePath: string, branchName?: string, limit?: number) => {
+      console.log('[Mock] Get branch commit log:', { worktreePath, branchName, limit });
+      return {
+        success: true,
+        result: {
+          branch: branchName || 'main',
+          commits: [],
+          total: 0,
+        },
+      };
+    },
+    rebase: async (worktreePath: string, ontoBranch: string, remote?: string) => {
+      console.log('[Mock] Rebase:', { worktreePath, ontoBranch, remote });
+      return {
+        success: true,
+        result: {
+          branch: 'current-branch',
+          ontoBranch,
+          message: `Successfully rebased onto ${ontoBranch}`,
+        },
+      };
+    },
+
+    abortOperation: async (worktreePath: string) => {
+      console.log('[Mock] Abort operation:', { worktreePath });
+      return {
+        success: true,
+        result: {
+          operation: 'merge',
+          message: 'Merge aborted successfully',
+        },
+      };
+    },
+
+    continueOperation: async (worktreePath: string) => {
+      console.log('[Mock] Continue operation:', { worktreePath });
+      return {
+        success: true,
+        result: {
+          operation: 'merge',
+          message: 'Merge continued successfully',
+        },
+      };
+    },
+  };
+}
+
+// Mock Git API implementation (for non-worktree operations)
+function createMockGitAPI(): GitAPI {
+  return {
+    getDiffs: async (projectPath: string) => {
+      console.log('[Mock] Getting git diffs for project:', { projectPath });
+      return {
+        success: true,
+        diff: "diff --git a/src/feature.ts b/src/feature.ts\n+++ new file\n@@ -0,0 +1,10 @@\n+export function feature() {\n+  return 'hello';\n+}",
+        files: [
+          { status: 'A', path: 'src/feature.ts', statusText: 'Added' },
+          { status: 'M', path: 'README.md', statusText: 'Modified' },
+        ],
+        hasChanges: true,
+      };
+    },
+
+    getFileDiff: async (projectPath: string, filePath: string) => {
+      console.log('[Mock] Getting git file diff:', { projectPath, filePath });
+      return {
+        success: true,
+        diff: `diff --git a/${filePath} b/${filePath}\n+++ new file\n@@ -0,0 +1,5 @@\n+// New content`,
+        filePath,
+      };
+    },
+
+    stageFiles: async (projectPath: string, files: string[], operation: 'stage' | 'unstage') => {
+      console.log('[Mock] Git stage files:', { projectPath, files, operation });
+      return {
+        success: true,
+        result: {
+          operation,
+          filesCount: files.length,
+        },
+      };
+    },
+
+    getDetails: async (projectPath: string, filePath?: string) => {
+      console.log('[Mock] Git details:', { projectPath, filePath });
+      return {
+        success: true,
+        details: {
+          branch: 'main',
+          lastCommitHash: 'abc1234567890',
+          lastCommitMessage: 'Initial commit',
+          lastCommitAuthor: 'Developer',
+          lastCommitTimestamp: new Date().toISOString(),
+          linesAdded: 5,
+          linesRemoved: 2,
+          isConflicted: false,
+          isStaged: false,
+          isUnstaged: true,
+          statusLabel: 'Modified',
+        },
+      };
+    },
+
+    getEnhancedStatus: async (projectPath: string) => {
+      console.log('[Mock] Git enhanced status:', { projectPath });
+      return {
+        success: true,
+        branch: 'main',
+        files: [
+          {
+            path: 'src/feature.ts',
+            indexStatus: ' ',
+            workTreeStatus: 'M',
+            isConflicted: false,
+            isStaged: false,
+            isUnstaged: true,
+            linesAdded: 10,
+            linesRemoved: 3,
+            statusLabel: 'Modified',
+          },
+        ],
+      };
+    },
+  };
+}
+
+// Mock Auto Mode state and implementation
+let mockAutoModeRunning = false;
+let mockRunningFeatures = new Set<string>(); // Track multiple concurrent feature verifications
+let mockAutoModeCallbacks: ((event: AutoModeEvent) => void)[] = [];
+let mockAutoModeTimeouts = new Map<string, NodeJS.Timeout>(); // Track timeouts per feature
+
+function createMockAutoModeAPI(): AutoModeAPI {
+  return {
+    start: async (projectPath: string, branchName?: string | null, maxConcurrency?: number) => {
+      if (mockAutoModeRunning) {
+        return { success: false, error: 'Auto mode is already running' };
+      }
+
+      mockAutoModeRunning = true;
+      console.log(
+        `[Mock] Auto mode started with branchName: ${branchName}, maxConcurrency: ${maxConcurrency || DEFAULT_MAX_CONCURRENCY}`
+      );
+      const featureId = 'auto-mode-0';
+      mockRunningFeatures.add(featureId);
+
+      // Simulate auto mode with Plan-Act-Verify phases
+      simulateAutoModeLoop(projectPath, featureId);
+
+      return { success: true };
+    },
+
+    stop: async (_projectPath: string, _branchName?: string | null) => {
+      mockAutoModeRunning = false;
+      const runningCount = mockRunningFeatures.size;
+      mockRunningFeatures.clear();
+      // Clear all timeouts
+      mockAutoModeTimeouts.forEach((timeout) => clearTimeout(timeout));
+      mockAutoModeTimeouts.clear();
+      return { success: true, runningFeatures: runningCount };
+    },
+
+    stopFeature: async (featureId: string) => {
+      if (!mockRunningFeatures.has(featureId)) {
+        return { success: false, error: `Feature ${featureId} is not running` };
+      }
+
+      // Clear the timeout for this specific feature
+      const timeout = mockAutoModeTimeouts.get(featureId);
+      if (timeout) {
+        clearTimeout(timeout);
+        mockAutoModeTimeouts.delete(featureId);
+      }
+
+      // Remove from running features
+      mockRunningFeatures.delete(featureId);
+
+      // Emit a stopped event
+      emitAutoModeEvent({
+        type: 'auto_mode_feature_complete',
+        featureId,
+        passes: false,
+        message: 'Feature stopped by user',
+      });
+
+      return { success: true };
+    },
+
+    status: async (_projectPath?: string) => {
+      return {
+        success: true,
+        isRunning: mockAutoModeRunning,
+        currentFeatureId: mockAutoModeRunning ? 'feature-0' : null,
+        runningFeatures: Array.from(mockRunningFeatures),
+        runningCount: mockRunningFeatures.size,
+      };
+    },
+
+    runFeature: async (
+      projectPath: string,
+      featureId: string,
+      useWorktrees?: boolean,
+      worktreePath?: string
+    ) => {
+      if (mockRunningFeatures.has(featureId)) {
+        return {
+          success: false,
+          error: `Feature ${featureId} is already running`,
+        };
+      }
+
+      console.log(
+        `[Mock] Running feature ${featureId} with useWorktrees: ${useWorktrees}, worktreePath: ${worktreePath}`
+      );
+      mockRunningFeatures.add(featureId);
+      simulateAutoModeLoop(projectPath, featureId);
+
+      return { success: true, passes: true };
+    },
+
+    verifyFeature: async (projectPath: string, featureId: string) => {
+      if (mockRunningFeatures.has(featureId)) {
+        return {
+          success: false,
+          error: `Feature ${featureId} is already running`,
+        };
+      }
+
+      mockRunningFeatures.add(featureId);
+      simulateAutoModeLoop(projectPath, featureId);
+
+      return { success: true, passes: true };
+    },
+
+    resumeFeature: async (projectPath: string, featureId: string, _useWorktrees?: boolean) => {
+      if (mockRunningFeatures.has(featureId)) {
+        return {
+          success: false,
+          error: `Feature ${featureId} is already running`,
+        };
+      }
+
+      mockRunningFeatures.add(featureId);
+      simulateAutoModeLoop(projectPath, featureId);
+
+      return { success: true, passes: true };
+    },
+
+    contextExists: async (projectPath: string, featureId: string) => {
+      // Mock implementation - simulate that context exists for some features
+      // Now checks for agent-output.md in the feature's folder
+      const exists =
+        mockFileSystem[`${projectPath}/.automaker/features/${featureId}/agent-output.md`] !==
+        undefined;
+      return { success: true, exists };
+    },
+
+    analyzeProject: async (projectPath: string) => {
+      // Simulate project analysis
+      const analysisId = `project-analysis-${Date.now()}`;
+      mockRunningFeatures.add(analysisId);
+
+      // Emit start event
+      emitAutoModeEvent({
+        type: 'auto_mode_feature_start',
+        featureId: analysisId,
+        feature: {
+          id: analysisId,
+          category: 'Project Analysis',
+          description: 'Analyzing project structure and tech stack',
+        },
+      });
+
+      // Simulate analysis phases
+      await delay(300, analysisId);
+      if (!mockRunningFeatures.has(analysisId))
+        return { success: false, message: 'Analysis aborted' };
+
+      emitAutoModeEvent({
+        type: 'auto_mode_phase',
+        featureId: analysisId,
+        phase: 'planning',
+        message: 'Scanning project structure...',
+      });
+
+      emitAutoModeEvent({
+        type: 'auto_mode_progress',
+        featureId: analysisId,
+        content: 'Starting project analysis...\n',
+      });
+
+      await delay(500, analysisId);
+      if (!mockRunningFeatures.has(analysisId))
+        return { success: false, message: 'Analysis aborted' };
+
+      emitAutoModeEvent({
+        type: 'auto_mode_tool',
+        featureId: analysisId,
+        tool: 'Glob',
+        input: { pattern: '**/*' },
+      });
+
+      await delay(300, analysisId);
+      if (!mockRunningFeatures.has(analysisId))
+        return { success: false, message: 'Analysis aborted' };
+
+      emitAutoModeEvent({
+        type: 'auto_mode_progress',
+        featureId: analysisId,
+        content: 'Detected tech stack: Next.js, TypeScript, Tailwind CSS\n',
+      });
+
+      await delay(300, analysisId);
+      if (!mockRunningFeatures.has(analysisId))
+        return { success: false, message: 'Analysis aborted' };
+
+      // Write mock app_spec.txt
+      mockFileSystem[`${projectPath}/.automaker/app_spec.txt`] = `<project_specification>
+  <project_name>Demo Project</project_name>
+
+  <overview>
+    A demo project analyzed by the Automaker AI agent.
+  </overview>
+
+  <technology_stack>
+    <frontend>
+      <framework>Next.js</framework>
+      <language>TypeScript</language>
+      <styling>Tailwind CSS</styling>
+    </frontend>
+  </technology_stack>
+
+  <core_capabilities>
+    - Web application
+    - Component-based architecture
+  </core_capabilities>
+
+  <implemented_features>
+    - Basic page structure
+    - Component library
+  </implemented_features>
+</project_specification>`;
+
+      // Note: Features are now stored in .automaker/features/{id}/feature.json
+
+      emitAutoModeEvent({
+        type: 'auto_mode_phase',
+        featureId: analysisId,
+        phase: 'verification',
+        message: 'Project analysis complete',
+      });
+
+      emitAutoModeEvent({
+        type: 'auto_mode_feature_complete',
+        featureId: analysisId,
+        passes: true,
+        message: 'Project analyzed successfully',
+      });
+
+      mockRunningFeatures.delete(analysisId);
+      mockAutoModeTimeouts.delete(analysisId);
+
+      return { success: true, message: 'Project analyzed successfully' };
+    },
+
+    followUpFeature: async (
+      projectPath: string,
+      featureId: string,
+      prompt: string,
+      imagePaths?: string[],
+      _useWorktrees?: boolean
+    ) => {
+      if (mockRunningFeatures.has(featureId)) {
+        return {
+          success: false,
+          error: `Feature ${featureId} is already running`,
+        };
+      }
+
+      console.log('[Mock] Follow-up feature:', {
+        featureId,
+        prompt,
+        imagePaths,
+      });
+
+      mockRunningFeatures.add(featureId);
+
+      // Simulate follow-up work (similar to run but with additional context)
+      // Note: We don't await this - it runs in the background like the real implementation
+      simulateAutoModeLoop(projectPath, featureId);
+
+      // Return immediately so the modal can close (matches real implementation)
+      return { success: true };
+    },
+
+    commitFeature: async (projectPath: string, featureId: string, worktreePath?: string) => {
+      console.log('[Mock] Committing feature:', {
+        projectPath,
+        featureId,
+        worktreePath,
+      });
+
+      // Simulate commit operation
+      emitAutoModeEvent({
+        type: 'auto_mode_feature_start',
+        featureId,
+        feature: {
+          id: featureId,
+          category: 'Commit',
+          description: 'Committing changes',
+        },
+      });
+
+      await delay(300, featureId);
+
+      emitAutoModeEvent({
+        type: 'auto_mode_phase',
+        featureId,
+        phase: 'action',
+        message: 'Committing changes to git...',
+      });
+
+      await delay(500, featureId);
+
+      emitAutoModeEvent({
+        type: 'auto_mode_feature_complete',
+        featureId,
+        passes: true,
+        message: 'Changes committed successfully',
+      });
+
+      return { success: true };
+    },
+
+    approvePlan: async (
+      projectPath: string,
+      featureId: string,
+      approved: boolean,
+      editedPlan?: string,
+      feedback?: string
+    ) => {
+      console.log('[Mock] Plan approval:', {
+        projectPath,
+        featureId,
+        approved,
+        editedPlan: editedPlan ? '[edited]' : undefined,
+        feedback,
+      });
+      return { success: true };
+    },
+
+    resumeInterrupted: async (projectPath: string) => {
+      console.log('[Mock] Resume interrupted features for:', projectPath);
+      return { success: true, message: 'Mock: no interrupted features' };
+    },
+
+    onEvent: (callback: (event: AutoModeEvent) => void) => {
+      mockAutoModeCallbacks.push(callback);
+      return () => {
+        mockAutoModeCallbacks = mockAutoModeCallbacks.filter((cb) => cb !== callback);
+      };
+    },
+  };
+}
+
+function emitAutoModeEvent(event: AutoModeEvent) {
+  mockAutoModeCallbacks.forEach((cb) => cb(event));
+}
+
+async function simulateAutoModeLoop(projectPath: string, featureId: string) {
+  const mockFeature = {
+    id: featureId,
+    category: 'Core',
+    description: 'Sample Feature',
+    steps: ['Step 1', 'Step 2'],
+    passes: false,
+  };
+
+  // Start feature
+  emitAutoModeEvent({
+    type: 'auto_mode_feature_start',
+    featureId,
+    feature: mockFeature,
+  });
+
+  await delay(300, featureId);
+  if (!mockRunningFeatures.has(featureId)) return;
+
+  // Phase 1: PLANNING
+  emitAutoModeEvent({
+    type: 'auto_mode_phase',
+    featureId,
+    phase: 'planning',
+    message: `Planning implementation for: ${mockFeature.description}`,
+  });
+
+  emitAutoModeEvent({
+    type: 'auto_mode_progress',
+    featureId,
+    content: 'Analyzing codebase structure and creating implementation plan...',
+  });
+
+  await delay(500, featureId);
+  if (!mockRunningFeatures.has(featureId)) return;
+
+  // Phase 2: ACTION
+  emitAutoModeEvent({
+    type: 'auto_mode_phase',
+    featureId,
+    phase: 'action',
+    message: `Executing implementation for: ${mockFeature.description}`,
+  });
+
+  emitAutoModeEvent({
+    type: 'auto_mode_progress',
+    featureId,
+    content: 'Starting code implementation...',
+  });
+
+  await delay(300, featureId);
+  if (!mockRunningFeatures.has(featureId)) return;
+
+  // Simulate tool use
+  emitAutoModeEvent({
+    type: 'auto_mode_tool',
+    featureId,
+    tool: 'Read',
+    input: { file: 'package.json' },
+  });
+
+  await delay(300, featureId);
+  if (!mockRunningFeatures.has(featureId)) return;
+
+  emitAutoModeEvent({
+    type: 'auto_mode_tool',
+    featureId,
+    tool: 'Write',
+    input: { file: 'src/feature.ts', content: '// Feature code' },
+  });
+
+  await delay(500, featureId);
+  if (!mockRunningFeatures.has(featureId)) return;
+
+  // Phase 3: VERIFICATION
+  emitAutoModeEvent({
+    type: 'auto_mode_phase',
+    featureId,
+    phase: 'verification',
+    message: `Verifying implementation for: ${mockFeature.description}`,
+  });
+
+  emitAutoModeEvent({
+    type: 'auto_mode_progress',
+    featureId,
+    content: 'Verifying implementation and checking test results...',
+  });
+
+  await delay(500, featureId);
+  if (!mockRunningFeatures.has(featureId)) return;
+
+  emitAutoModeEvent({
+    type: 'auto_mode_progress',
+    featureId,
+    content: '✓ Verification successful: All tests passed',
+  });
+
+  // Feature complete
+  emitAutoModeEvent({
+    type: 'auto_mode_feature_complete',
+    featureId,
+    passes: true,
+    message: 'Feature implemented successfully',
+  });
+
+  // Delete context file when feature is verified (matches real auto-mode-service behavior)
+  // Now uses features/{id}/agent-output.md path
+  const contextFilePath = `${projectPath}/.automaker/features/${featureId}/agent-output.md`;
+  delete mockFileSystem[contextFilePath];
+
+  // Clean up this feature from running set
+  mockRunningFeatures.delete(featureId);
+  mockAutoModeTimeouts.delete(featureId);
+}
+
+function delay(ms: number, featureId: string): Promise<void> {
+  return new Promise((resolve) => {
+    const timeout = setTimeout(resolve, ms);
+    mockAutoModeTimeouts.set(featureId, timeout);
+  });
+}
+
+// Mock Spec Regeneration state and implementation
+let mockSpecRegenerationRunning = false;
+let mockSpecRegenerationPhase = '';
+let mockSpecRegenerationCallbacks: ((event: SpecRegenerationEvent) => void)[] = [];
+let mockSpecRegenerationTimeout: NodeJS.Timeout | null = null;
+
+function createMockSpecRegenerationAPI(): SpecRegenerationAPI {
+  return {
+    create: async (
+      projectPath: string,
+      projectOverview: string,
+      generateFeatures = true,
+      _analyzeProject?: boolean,
+      maxFeatures?: number
+    ) => {
+      if (mockSpecRegenerationRunning) {
+        return { success: false, error: 'Spec creation is already running' };
+      }
+
+      mockSpecRegenerationRunning = true;
+      console.log(
+        `[Mock] Creating initial spec for: ${projectPath}, generateFeatures: ${generateFeatures}, maxFeatures: ${maxFeatures}`
+      );
+
+      // Simulate async spec creation
+      simulateSpecCreation(projectPath, projectOverview, generateFeatures);
+
+      return { success: true };
+    },
+
+    generate: async (
+      projectPath: string,
+      projectDefinition: string,
+      generateFeatures = false,
+      _analyzeProject?: boolean,
+      maxFeatures?: number
+    ) => {
+      if (mockSpecRegenerationRunning) {
+        return {
+          success: false,
+          error: 'Spec regeneration is already running',
+        };
+      }
+
+      mockSpecRegenerationRunning = true;
+      console.log(
+        `[Mock] Regenerating spec for: ${projectPath}, generateFeatures: ${generateFeatures}, maxFeatures: ${maxFeatures}`
+      );
+
+      // Simulate async spec regeneration
+      simulateSpecRegeneration(projectPath, projectDefinition, generateFeatures);
+
+      return { success: true };
+    },
+
+    generateFeatures: async (projectPath: string, maxFeatures?: number) => {
+      if (mockSpecRegenerationRunning) {
+        return {
+          success: false,
+          error: 'Feature generation is already running',
+        };
+      }
+
+      mockSpecRegenerationRunning = true;
+      console.log(
+        `[Mock] Generating features from existing spec for: ${projectPath}, maxFeatures: ${maxFeatures}`
+      );
+
+      // Simulate async feature generation
+      simulateFeatureGeneration(projectPath);
+
+      return { success: true };
+    },
+
+    sync: async (projectPath: string) => {
+      if (mockSpecRegenerationRunning) {
+        return {
+          success: false,
+          error: 'Spec sync is already running',
+        };
+      }
+
+      mockSpecRegenerationRunning = true;
+      console.log(`[Mock] Syncing spec for: ${projectPath}`);
+
+      // Simulate async spec sync (similar to feature generation but simpler)
+      setTimeout(() => {
+        emitSpecRegenerationEvent({
+          type: 'spec_regeneration_complete',
+          message: 'Spec synchronized successfully',
+          projectPath,
+        });
+        mockSpecRegenerationRunning = false;
+      }, 1000);
+
+      return { success: true };
+    },
+
+    stop: async (_projectPath?: string) => {
+      mockSpecRegenerationRunning = false;
+      mockSpecRegenerationPhase = '';
+      if (mockSpecRegenerationTimeout) {
+        clearTimeout(mockSpecRegenerationTimeout);
+        mockSpecRegenerationTimeout = null;
+      }
+      return { success: true };
+    },
+
+    status: async (_projectPath?: string) => {
+      return {
+        success: true,
+        isRunning: mockSpecRegenerationRunning,
+        currentPhase: mockSpecRegenerationPhase,
+      };
+    },
+
+    onEvent: (callback: (event: SpecRegenerationEvent) => void) => {
+      mockSpecRegenerationCallbacks.push(callback);
+      return () => {
+        mockSpecRegenerationCallbacks = mockSpecRegenerationCallbacks.filter(
+          (cb) => cb !== callback
+        );
+      };
+    },
+  };
+}
+
+function emitSpecRegenerationEvent(event: SpecRegenerationEvent) {
+  mockSpecRegenerationCallbacks.forEach((cb) => cb(event));
+}
+
+async function simulateSpecCreation(
+  projectPath: string,
+  projectOverview: string,
+  _generateFeatures = true
+) {
+  mockSpecRegenerationPhase = 'initialization';
+  emitSpecRegenerationEvent({
+    type: 'spec_regeneration_progress',
+    content: '[Phase: initialization] Starting project analysis...\n',
+    projectPath: projectPath,
+  });
+
+  await new Promise((resolve) => {
+    mockSpecRegenerationTimeout = setTimeout(resolve, 500);
+  });
+  if (!mockSpecRegenerationRunning) return;
+
+  mockSpecRegenerationPhase = 'setup';
+  emitSpecRegenerationEvent({
+    type: 'spec_regeneration_tool',
+    tool: 'Glob',
+    input: { pattern: '**/*.{json,ts,tsx}' },
+    projectPath: projectPath,
+  });
+
+  await new Promise((resolve) => {
+    mockSpecRegenerationTimeout = setTimeout(resolve, 500);
+  });
+  if (!mockSpecRegenerationRunning) return;
+
+  mockSpecRegenerationPhase = 'analysis';
+  emitSpecRegenerationEvent({
+    type: 'spec_regeneration_progress',
+    content: '[Phase: analysis] Detecting tech stack...\n',
+    projectPath: projectPath,
+  });
+
+  await new Promise((resolve) => {
+    mockSpecRegenerationTimeout = setTimeout(resolve, 500);
+  });
+  if (!mockSpecRegenerationRunning) return;
+
+  // Write mock app_spec.txt
+  mockFileSystem[`${projectPath}/.automaker/app_spec.txt`] = `<project_specification>
+  <project_name>Demo Project</project_name>
+
+  <overview>
+    ${projectOverview}
+  </overview>
+
+  <technology_stack>
+    <frontend>
+      <framework>Next.js</framework>
+      <ui_library>React</ui_library>
+      <styling>Tailwind CSS</styling>
+    </frontend>
+  </technology_stack>
+
+  <core_capabilities>
+    <feature_1>Core functionality based on overview</feature_1>
+  </core_capabilities>
+
+  <implementation_roadmap>
+    <phase_1_foundation>Setup and basic structure</phase_1_foundation>
+    <phase_2_core_logic>Core features implementation</phase_2_core_logic>
+  </implementation_roadmap>
+</project_specification>`;
+
+  // Note: Features are now stored in .automaker/features/{id}/feature.json
+  // The generateFeatures parameter is kept for API compatibility but features
+  // should be created through the features API
+
+  mockSpecRegenerationPhase = 'complete';
+  emitSpecRegenerationEvent({
+    type: 'spec_regeneration_complete',
+    message: 'All tasks completed!',
+    projectPath: projectPath,
+  });
+
+  mockSpecRegenerationRunning = false;
+  mockSpecRegenerationPhase = '';
+  mockSpecRegenerationTimeout = null;
+}
+
+async function simulateSpecRegeneration(
+  projectPath: string,
+  projectDefinition: string,
+  generateFeatures = false
+) {
+  mockSpecRegenerationPhase = 'initialization';
+  emitSpecRegenerationEvent({
+    type: 'spec_regeneration_progress',
+    content: '[Phase: initialization] Starting spec regeneration...\n',
+    projectPath: projectPath,
+  });
+
+  await new Promise((resolve) => {
+    mockSpecRegenerationTimeout = setTimeout(resolve, 500);
+  });
+  if (!mockSpecRegenerationRunning) return;
+
+  mockSpecRegenerationPhase = 'analysis';
+  emitSpecRegenerationEvent({
+    type: 'spec_regeneration_progress',
+    content: '[Phase: analysis] Analyzing codebase...\n',
+    projectPath: projectPath,
+  });
+
+  await new Promise((resolve) => {
+    mockSpecRegenerationTimeout = setTimeout(resolve, 500);
+  });
+  if (!mockSpecRegenerationRunning) return;
+
+  // Write regenerated spec
+  mockFileSystem[`${projectPath}/.automaker/app_spec.txt`] = `<project_specification>
+  <project_name>Regenerated Project</project_name>
+
+  <overview>
+    ${projectDefinition}
+  </overview>
+
+  <technology_stack>
+    <frontend>
+      <framework>Next.js</framework>
+      <ui_library>React</ui_library>
+      <styling>Tailwind CSS</styling>
+    </frontend>
+  </technology_stack>
+
+  <core_capabilities>
+    <feature_1>Regenerated features based on definition</feature_1>
+  </core_capabilities>
+</project_specification>`;
+
+  if (generateFeatures) {
+    mockSpecRegenerationPhase = 'spec_complete';
+    emitSpecRegenerationEvent({
+      type: 'spec_regeneration_progress',
+      content: '[Phase: spec_complete] Spec regenerated! Generating features...\n',
+      projectPath: projectPath,
+    });
+
+    await new Promise((resolve) => {
+      mockSpecRegenerationTimeout = setTimeout(resolve, 500);
+    });
+    if (!mockSpecRegenerationRunning) return;
+
+    // Simulate feature generation
+    await simulateFeatureGeneration(projectPath);
+    if (!mockSpecRegenerationRunning) return;
+  }
+
+  mockSpecRegenerationPhase = 'complete';
+  emitSpecRegenerationEvent({
+    type: 'spec_regeneration_complete',
+    message: 'All tasks completed!',
+    projectPath: projectPath,
+  });
+
+  mockSpecRegenerationRunning = false;
+  mockSpecRegenerationPhase = '';
+  mockSpecRegenerationTimeout = null;
+}
+
+async function simulateFeatureGeneration(projectPath: string) {
+  mockSpecRegenerationPhase = 'initialization';
+  emitSpecRegenerationEvent({
+    type: 'spec_regeneration_progress',
+    content: '[Phase: initialization] Starting feature generation from existing app_spec.txt...\n',
+    projectPath: projectPath,
+  });
+
+  await new Promise((resolve) => {
+    mockSpecRegenerationTimeout = setTimeout(resolve, 500);
+  });
+  if (!mockSpecRegenerationRunning) return;
+
+  emitSpecRegenerationEvent({
+    type: 'spec_regeneration_progress',
+    content: '[Phase: feature_generation] Reading implementation roadmap...\n',
+    projectPath: projectPath,
+  });
+
+  await new Promise((resolve) => {
+    mockSpecRegenerationTimeout = setTimeout(resolve, 500);
+  });
+  if (!mockSpecRegenerationRunning) return;
+
+  mockSpecRegenerationPhase = 'feature_generation';
+  emitSpecRegenerationEvent({
+    type: 'spec_regeneration_progress',
+    content: '[Phase: feature_generation] Creating features from roadmap...\n',
+    projectPath: projectPath,
+  });
+
+  await new Promise((resolve) => {
+    mockSpecRegenerationTimeout = setTimeout(resolve, 1000);
+  });
+  if (!mockSpecRegenerationRunning) return;
+
+  mockSpecRegenerationPhase = 'complete';
+  emitSpecRegenerationEvent({
+    type: 'spec_regeneration_progress',
+    content: '[Phase: complete] All tasks completed!\n',
+    projectPath: projectPath,
+  });
+
+  emitSpecRegenerationEvent({
+    type: 'spec_regeneration_complete',
+    message: 'All tasks completed!',
+    projectPath: projectPath,
+  });
+
+  mockSpecRegenerationRunning = false;
+  mockSpecRegenerationPhase = '';
+  mockSpecRegenerationTimeout = null;
+}
+
+// Mock Features API implementation
+function createMockFeaturesAPI(): FeaturesAPI {
+  // Store features in mock file system using features/{id}/feature.json pattern
+  return {
+    getAll: async (projectPath: string) => {
+      console.log('[Mock] Getting all features for:', projectPath);
+
+      // Check if test has set mock features via global variable
+      const testFeatures = window.__mockFeatures;
+      if (testFeatures !== undefined) {
+        return { success: true, features: testFeatures };
+      }
+
+      // Try to read from mock file system
+      const featuresDir = `${projectPath}/.automaker/features`;
+      const features: Feature[] = [];
+
+      // Simulate reading feature folders
+      const featureKeys = Object.keys(mockFileSystem).filter(
+        (key) => key.startsWith(featuresDir) && key.endsWith('/feature.json')
+      );
+
+      for (const key of featureKeys) {
+        try {
+          const content = mockFileSystem[key];
+          if (content) {
+            const feature = JSON.parse(content);
+            features.push(feature);
+          }
+        } catch (error) {
+          console.error('[Mock] Failed to parse feature:', error);
+        }
+      }
+
+      // Fallback to mock features if no features found
+      if (features.length === 0) {
+        return { success: true, features: mockFeatures };
+      }
+
+      return { success: true, features };
+    },
+
+    get: async (projectPath: string, featureId: string) => {
+      console.log('[Mock] Getting feature:', { projectPath, featureId });
+      const featurePath = `${projectPath}/.automaker/features/${featureId}/feature.json`;
+      const content = mockFileSystem[featurePath];
+      if (content) {
+        return { success: true, feature: JSON.parse(content) };
+      }
+      return { success: false, error: 'Feature not found' };
+    },
+
+    create: async (projectPath: string, feature: Feature) => {
+      console.log('[Mock] Creating feature:', {
+        projectPath,
+        featureId: feature.id,
+      });
+      const featurePath = `${projectPath}/.automaker/features/${feature.id}/feature.json`;
+      mockFileSystem[featurePath] = JSON.stringify(feature, null, 2);
+      return { success: true, feature };
+    },
+
+    update: async (projectPath: string, featureId: string, updates: Partial<Feature>) => {
+      console.log('[Mock] Updating feature:', {
+        projectPath,
+        featureId,
+        updates,
+      });
+      const featurePath = `${projectPath}/.automaker/features/${featureId}/feature.json`;
+      const existing = mockFileSystem[featurePath];
+      if (!existing) {
+        return { success: false, error: 'Feature not found' };
+      }
+      const feature = { ...JSON.parse(existing), ...updates };
+      mockFileSystem[featurePath] = JSON.stringify(feature, null, 2);
+      return { success: true, feature };
+    },
+
+    delete: async (projectPath: string, featureId: string) => {
+      console.log('[Mock] Deleting feature:', { projectPath, featureId });
+      const featurePath = `${projectPath}/.automaker/features/${featureId}/feature.json`;
+      delete mockFileSystem[featurePath];
+      // Also delete agent-output.md if it exists
+      const agentOutputPath = `${projectPath}/.automaker/features/${featureId}/agent-output.md`;
+      delete mockFileSystem[agentOutputPath];
+      return { success: true };
+    },
+
+    getAgentOutput: async (projectPath: string, featureId: string) => {
+      console.log('[Mock] Getting agent output:', { projectPath, featureId });
+      const agentOutputPath = `${projectPath}/.automaker/features/${featureId}/agent-output.md`;
+      const content = mockFileSystem[agentOutputPath];
+      return { success: true, content: content || null };
+    },
+
+    generateTitle: async (description: string, _projectPath?: string) => {
+      console.log('[Mock] Generating title for:', description.substring(0, 50));
+      // Mock title generation - just take first few words
+      const words = description.split(/\s+/).slice(0, 6).join(' ');
+      const title = words.length > 40 ? words.substring(0, 40) + '...' : words;
+      return { success: true, title: `Add ${title}` };
+    },
+    getOrphaned: async (_projectPath: string) => {
+      return { success: true, orphanedFeatures: [] };
+    },
+    resolveOrphaned: async (
+      _projectPath: string,
+      _featureId: string,
+      _action: 'delete' | 'create-worktree' | 'move-to-branch',
+      _targetBranch?: string | null
+    ) => {
+      return { success: false, error: 'Not supported in mock mode' };
+    },
+    bulkResolveOrphaned: async (
+      _projectPath: string,
+      _featureIds: string[],
+      _action: 'delete' | 'create-worktree' | 'move-to-branch',
+      _targetBranch?: string | null
+    ) => {
+      return { success: false, error: 'Not supported in mock mode' };
+    },
+  };
+}
+
+// Mock Running Agents API implementation
+function createMockRunningAgentsAPI(): RunningAgentsAPI {
+  return {
+    getAll: async () => {
+      console.log('[Mock] Getting all running agents');
+      // Return running agents from mock auto mode state
+      const runningAgents: RunningAgent[] = Array.from(mockRunningFeatures).map((featureId) => ({
+        featureId,
+        projectPath: '/mock/project',
+        projectName: 'Mock Project',
+        isAutoMode: mockAutoModeRunning,
+        title: `Mock Feature Title for ${featureId}`,
+        description: 'This is a mock feature description for testing purposes.',
+      }));
+      return {
+        success: true,
+        runningAgents,
+        totalCount: runningAgents.length,
+      };
+    },
+  };
+}
+
+// Mock GitHub API implementation
+let mockValidationCallbacks: ((event: IssueValidationEvent) => void)[] = [];
+
+function createMockGitHubAPI(): GitHubAPI {
+  return {
+    checkRemote: async (projectPath: string) => {
+      console.log('[Mock] Checking GitHub remote for:', projectPath);
+      return {
+        success: true,
+        hasGitHubRemote: false,
+        remoteUrl: null,
+        owner: null,
+        repo: null,
+      };
+    },
+    listIssues: async (projectPath: string) => {
+      console.log('[Mock] Listing GitHub issues for:', projectPath);
+      return {
+        success: true,
+        openIssues: [],
+        closedIssues: [],
+      };
+    },
+    listPRs: async (projectPath: string) => {
+      console.log('[Mock] Listing GitHub PRs for:', projectPath);
+      return {
+        success: true,
+        openPRs: [],
+        mergedPRs: [],
+      };
+    },
+    validateIssue: async (
+      projectPath: string,
+      issue: IssueValidationInput,
+      model?: ModelId,
+      thinkingLevel?: ThinkingLevel,
+      reasoningEffort?: ReasoningEffort,
+      providerId?: string
+    ) => {
+      console.log('[Mock] Starting async validation:', {
+        projectPath,
+        issue,
+        model,
+        thinkingLevel,
+        reasoningEffort,
+        providerId,
+      });
+
+      // Simulate async validation in background
+      setTimeout(() => {
+        mockValidationCallbacks.forEach((cb) =>
+          cb({
+            type: 'issue_validation_start',
+            issueNumber: issue.issueNumber,
+            issueTitle: issue.issueTitle,
+            projectPath,
+          })
+        );
+
+        setTimeout(() => {
+          mockValidationCallbacks.forEach((cb) =>
+            cb({
+              type: 'issue_validation_complete',
+              issueNumber: issue.issueNumber,
+              issueTitle: issue.issueTitle,
+              result: {
+                verdict: 'valid' as const,
+                confidence: 'medium' as const,
+                reasoning:
+                  'This is a mock validation. In production, Claude SDK would analyze the codebase to validate this issue.',
+                relatedFiles: ['src/components/example.tsx'],
+                estimatedComplexity: 'moderate' as const,
+              },
+              projectPath,
+              model: model || 'claude-sonnet',
+            })
+          );
+        }, 2000);
+      }, 100);
+
+      return {
+        success: true,
+        message: `Validation started for issue #${issue.issueNumber}`,
+        issueNumber: issue.issueNumber,
+      };
+    },
+    getValidationStatus: async (projectPath: string, issueNumber?: number) => {
+      console.log('[Mock] Getting validation status:', { projectPath, issueNumber });
+      return {
+        success: true,
+        isRunning: false,
+        runningIssues: [],
+      };
+    },
+    stopValidation: async (projectPath: string, issueNumber: number) => {
+      console.log('[Mock] Stopping validation:', { projectPath, issueNumber });
+      return {
+        success: true,
+        message: `Validation for issue #${issueNumber} stopped`,
+      };
+    },
+    getValidations: async (projectPath: string, issueNumber?: number) => {
+      console.log('[Mock] Getting validations:', { projectPath, issueNumber });
+      return {
+        success: true,
+        validations: [],
+      };
+    },
+    markValidationViewed: async (projectPath: string, issueNumber: number) => {
+      console.log('[Mock] Marking validation as viewed:', { projectPath, issueNumber });
+      return {
+        success: true,
+      };
+    },
+    onValidationEvent: (callback: (event: IssueValidationEvent) => void) => {
+      mockValidationCallbacks.push(callback);
+      return () => {
+        mockValidationCallbacks = mockValidationCallbacks.filter((cb) => cb !== callback);
+      };
+    },
+    getIssueComments: async (projectPath: string, issueNumber: number, cursor?: string) => {
+      console.log('[Mock] Getting issue comments:', { projectPath, issueNumber, cursor });
+      return {
+        success: true,
+        comments: [],
+        totalCount: 0,
+        hasNextPage: false,
+      };
+    },
+    getPRReviewComments: async (projectPath: string, prNumber: number) => {
+      console.log('[Mock] Getting PR review comments:', { projectPath, prNumber });
+      return {
+        success: true,
+        comments: [],
+        totalCount: 0,
+      };
+    },
+    resolveReviewThread: async (projectPath: string, threadId: string, resolve: boolean) => {
+      console.log('[Mock] Resolving review thread:', { projectPath, threadId, resolve });
+      return {
+        success: true,
+        isResolved: resolve,
+      };
+    },
+  };
+}
+
+// Utility functions for project management
+
+export interface Project {
+  id: string;
+  name: string;
+  path: string;
+  lastOpened?: string;
+  theme?: string; // Per-project theme override (uses ThemeMode from app-store)
+  fontFamilySans?: string; // Per-project UI/sans font override
+  fontFamilyMono?: string; // Per-project code/mono font override
+  isFavorite?: boolean; // Pin project to top of dashboard
+  icon?: string; // Lucide icon name for project identification
+  customIconPath?: string; // Path to custom uploaded icon image in .automaker/images/
+  /**
+   * Override the active Claude API profile for this project.
+   * - undefined: Use global setting (activeClaudeApiProfileId)
+   * - null: Explicitly use Direct Anthropic API (no profile)
+   * - string: Use specific profile by ID
+   * @deprecated Use phaseModelOverrides instead for per-phase model selection
+   */
+  activeClaudeApiProfileId?: string | null;
+  /**
+   * Per-phase model overrides for this project.
+   * Keys are phase names (e.g., 'enhancementModel'), values are PhaseModelEntry.
+   * If a phase is not present, the global setting is used.
+   */
+  phaseModelOverrides?: Partial<import('@automaker/types').PhaseModelConfig>;
+  /**
+   * Override the default model for new feature cards in this project.
+   * If not specified, falls back to the global defaultFeatureModel setting.
+   */
+  defaultFeatureModel?: import('@automaker/types').PhaseModelEntry;
+}
+
+export interface TrashedProject extends Project {
+  trashedAt: string;
+  deletedFromDisk?: boolean;
+}
+
+export const getStoredProjects = (): Project[] => {
+  return getJSON<Project[]>(STORAGE_KEYS.PROJECTS) ?? [];
+};
+
+export const saveProjects = (projects: Project[]): void => {
+  setJSON(STORAGE_KEYS.PROJECTS, projects);
+};
+
+export const getCurrentProject = (): Project | null => {
+  return getJSON<Project>(STORAGE_KEYS.CURRENT_PROJECT);
+};
+
+export const setCurrentProject = (project: Project | null): void => {
+  if (project) {
+    setJSON(STORAGE_KEYS.CURRENT_PROJECT, project);
+  } else {
+    removeItem(STORAGE_KEYS.CURRENT_PROJECT);
+  }
+};
+
+export const addProject = (project: Project): void => {
+  const projects = getStoredProjects();
+  const existing = projects.findIndex((p) => p.path === project.path);
+  if (existing >= 0) {
+    projects[existing] = { ...project, lastOpened: new Date().toISOString() };
+  } else {
+    projects.push({ ...project, lastOpened: new Date().toISOString() });
+  }
+  saveProjects(projects);
+};
+
+export const removeProject = (projectId: string): void => {
+  const projects = getStoredProjects().filter((p) => p.id !== projectId);
+  saveProjects(projects);
+};
+
+export const getStoredTrashedProjects = (): TrashedProject[] => {
+  return getJSON<TrashedProject[]>(STORAGE_KEYS.TRASHED_PROJECTS) ?? [];
+};
+
+export const saveTrashedProjects = (projects: TrashedProject[]): void => {
+  setJSON(STORAGE_KEYS.TRASHED_PROJECTS, projects);
+};
diff --git a/temp_repo/apps/ui/src/lib/feature-transition-state.ts b/temp_repo/apps/ui/src/lib/feature-transition-state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ac72aed1a092febbdc9a4efd9238b9219ba1ec0f
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/feature-transition-state.ts
@@ -0,0 +1,19 @@
+/**
+ * Lightweight module-level state tracking which features are mid-transition
+ * (e.g., being cancelled). Used by useAutoModeQueryInvalidation to skip
+ * redundant cache invalidations while persistFeatureUpdate is in flight.
+ */
+
+const transitioningFeatures = new Set<string>();
+
+export function markFeatureTransitioning(featureId: string): void {
+  transitioningFeatures.add(featureId);
+}
+
+export function unmarkFeatureTransitioning(featureId: string): void {
+  transitioningFeatures.delete(featureId);
+}
+
+export function isAnyFeatureTransitioning(): boolean {
+  return transitioningFeatures.size > 0;
+}
diff --git a/temp_repo/apps/ui/src/lib/file-picker.ts b/temp_repo/apps/ui/src/lib/file-picker.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6a22fe275c001d476bf61024d121b3db4f44cb25
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/file-picker.ts
@@ -0,0 +1,288 @@
+/**
+ * File Picker Utility for Web Browsers
+ *
+ * Provides cross-platform file and directory selection using:
+ * 1. HTML5 webkitdirectory input - primary method (works on Windows)
+ * 2. File System Access API (showDirectoryPicker) - fallback for modern browsers
+ *
+ * Note: Browsers don't expose absolute file paths for security reasons.
+ * This implementation extracts directory information and may require
+ * user confirmation or server-side path resolution.
+ */
+
+import { createLogger } from '@automaker/utils/logger';
+
+const logger = createLogger('FilePicker');
+
+/**
+ * Directory picker result with structure information for server-side resolution
+ */
+export interface DirectoryPickerResult {
+  directoryName: string;
+  sampleFiles: string[]; // Relative paths of sample files for identification
+  fileCount: number;
+}
+
+/**
+ * Opens a directory picker dialog
+ * @returns Promise resolving to directory information, or null if canceled
+ *
+ * Note: Browsers don't expose absolute file paths for security reasons.
+ * This function returns directory structure information that the server
+ * can use to locate the actual directory path.
+ */
+export async function openDirectoryPicker(): Promise<DirectoryPickerResult | null> {
+  // Use webkitdirectory (works on Windows and all modern browsers)
+  return new Promise<DirectoryPickerResult | null>((resolve) => {
+    let resolved = false;
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.webkitdirectory = true;
+    input.style.display = 'none';
+
+    const cleanup = () => {
+      if (input.parentNode) {
+        document.body.removeChild(input);
+      }
+    };
+
+    let changeEventFired = false;
+    let focusTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    const safeResolve = (value: DirectoryPickerResult | null) => {
+      if (!resolved) {
+        resolved = true;
+        changeEventFired = true;
+        if (focusTimeout) {
+          clearTimeout(focusTimeout);
+          focusTimeout = null;
+        }
+        cleanup();
+        resolve(value);
+      }
+    };
+
+    input.addEventListener('change', () => {
+      changeEventFired = true;
+      if (focusTimeout) {
+        clearTimeout(focusTimeout);
+        focusTimeout = null;
+      }
+
+      logger.info('Change event fired');
+      const files = input.files;
+      logger.info('Files selected:', files?.length || 0);
+
+      if (!files || files.length === 0) {
+        logger.info('No files selected');
+        safeResolve(null);
+        return;
+      }
+
+      const firstFile = files[0];
+      logger.info('First file:', {
+        name: firstFile.name,
+        webkitRelativePath: firstFile.webkitRelativePath,
+        // @ts-expect-error - path property is non-standard but available in some browsers
+        path: firstFile.path,
+      });
+
+      // Extract directory name from webkitRelativePath
+      // webkitRelativePath format: "directoryName/subfolder/file.txt" or "directoryName/file.txt"
+      let directoryName = 'Selected Directory';
+
+      // Method 1: Try to get absolute path from File object (non-standard, works in Electron/Chromium)
+      // @ts-expect-error - path property is non-standard but available in some browsers
+      if (firstFile.path) {
+        // @ts-expect-error - path property is non-standard but available in some browsers
+        const filePath = firstFile.path as string;
+        logger.info('Found file.path:', filePath);
+        // Extract directory path (remove filename)
+        const lastSeparator = Math.max(filePath.lastIndexOf('\\'), filePath.lastIndexOf('/'));
+        if (lastSeparator > 0) {
+          const absolutePath = filePath.substring(0, lastSeparator);
+          logger.info('Found absolute path:', absolutePath);
+          // Return as directory name for now - server can validate it directly
+          directoryName = absolutePath;
+        }
+      }
+
+      // Method 2: Extract directory name from webkitRelativePath
+      if (directoryName === 'Selected Directory' && firstFile.webkitRelativePath) {
+        const relativePath = firstFile.webkitRelativePath;
+        logger.info('Using webkitRelativePath:', relativePath);
+        const pathParts = relativePath.split('/');
+        if (pathParts.length > 0) {
+          directoryName = pathParts[0]; // Top-level directory name
+          logger.info('Extracted directory name:', directoryName);
+        }
+      }
+
+      // Collect sample file paths for server-side directory matching
+      // Take first 10 files to identify the directory
+      const sampleFiles: string[] = [];
+      const maxSamples = 10;
+      for (let i = 0; i < Math.min(files.length, maxSamples); i++) {
+        const file = files[i];
+        if (file.webkitRelativePath) {
+          sampleFiles.push(file.webkitRelativePath);
+        } else if (file.name) {
+          sampleFiles.push(file.name);
+        }
+      }
+
+      logger.info('Directory info:', {
+        directoryName,
+        fileCount: files.length,
+        sampleFiles: sampleFiles.slice(0, 5), // Log first 5
+      });
+
+      safeResolve({
+        directoryName,
+        sampleFiles,
+        fileCount: files.length,
+      });
+    });
+
+    // Handle cancellation - but be very careful not to interfere with change event
+    // On Windows, the dialog might take time to process, so we wait longer
+    const handleFocus = () => {
+      // Wait longer on Windows - the dialog might take time to process
+      // Only resolve as canceled if change event hasn't fired after a delay
+      focusTimeout = setTimeout(() => {
+        if (!resolved && !changeEventFired && (!input.files || input.files.length === 0)) {
+          logger.info('Dialog canceled (no files after focus and no change event)');
+          safeResolve(null);
+        }
+      }, 2000); // Increased timeout for Windows - give it time
+    };
+
+    // Add to DOM temporarily
+    document.body.appendChild(input);
+    logger.info('Opening directory picker...');
+
+    // Try to show picker programmatically
+    // Note: showPicker() is available in modern browsers but not in standard TypeScript types
+    if (
+      'showPicker' in input &&
+      typeof (input as { showPicker?: () => void }).showPicker === 'function'
+    ) {
+      try {
+        (input as { showPicker: () => void }).showPicker();
+        logger.info('Using showPicker()');
+      } catch (error) {
+        logger.info('showPicker() failed, using click()', error);
+        input.click();
+      }
+    } else {
+      logger.info('Using click()');
+      input.click();
+    }
+
+    // Set up cancellation detection with longer delay
+    // Only add focus listener if we're not already resolved
+    window.addEventListener('focus', handleFocus, { once: true });
+
+    // Also handle blur as a cancellation signal (but with delay)
+    window.addEventListener(
+      'blur',
+      () => {
+        // Dialog opened, wait for it to close
+        setTimeout(() => {
+          window.addEventListener('focus', handleFocus, { once: true });
+        }, 100);
+      },
+      { once: true }
+    );
+  });
+}
+
+/**
+ * Opens a file picker dialog
+ * @param options Optional configuration (multiple files, file types, etc.)
+ * @returns Promise resolving to selected file path(s), or null if canceled
+ */
+export async function openFilePicker(options?: {
+  multiple?: boolean;
+  accept?: string;
+}): Promise<string | string[] | null> {
+  // Use standard file input (works on all browsers including Windows)
+  return new Promise<string | string[] | null>((resolve) => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = options?.multiple ?? false;
+    if (options?.accept) {
+      input.accept = options.accept;
+    }
+    input.style.display = 'none';
+
+    const cleanup = () => {
+      if (input.parentNode) {
+        document.body.removeChild(input);
+      }
+    };
+
+    input.addEventListener('change', () => {
+      const files = input.files;
+      if (!files || files.length === 0) {
+        cleanup();
+        resolve(null);
+        return;
+      }
+
+      // Try to extract paths from File objects
+      const extractPath = (file: File): string => {
+        // Try to get path from File object (non-standard, but available in some browsers)
+        // @ts-expect-error - path property is non-standard
+        if (file.path) {
+          // @ts-expect-error - path property is non-standard but available in some browsers
+          return file.path as string;
+        }
+        // Fallback to filename (server will need to resolve)
+        return file.name;
+      };
+
+      if (options?.multiple) {
+        const paths = Array.from(files).map(extractPath);
+        cleanup();
+        resolve(paths);
+      } else {
+        const path = extractPath(files[0]);
+        cleanup();
+        resolve(path);
+      }
+    });
+
+    // Handle window focus (user may have canceled)
+    const handleFocus = () => {
+      setTimeout(() => {
+        if (!input.files || input.files.length === 0) {
+          cleanup();
+          resolve(null);
+        }
+      }, 200);
+    };
+
+    // Add to DOM temporarily
+    document.body.appendChild(input);
+
+    // Try to show picker programmatically
+    // Note: showPicker() is available in modern browsers but not in standard TypeScript types
+    if (
+      'showPicker' in input &&
+      typeof (input as { showPicker?: () => void }).showPicker === 'function'
+    ) {
+      try {
+        (input as { showPicker: () => void }).showPicker();
+      } catch {
+        // Fallback to click if showPicker fails
+        input.click();
+      }
+    } else {
+      input.click();
+    }
+
+    // Set up cancellation detection
+    window.addEventListener('focus', handleFocus, { once: true });
+  });
+}
diff --git a/temp_repo/apps/ui/src/lib/http-api-client.ts b/temp_repo/apps/ui/src/lib/http-api-client.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9b06d75ef8487ef5fe9597aaa7dcb73c66d94f20
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/http-api-client.ts
@@ -0,0 +1,3320 @@
+/**
+ * HTTP API Client for web mode
+ *
+ * This client provides the same API as the Electron IPC bridge,
+ * but communicates with the backend server via HTTP/WebSocket.
+ */
+
+import { createLogger } from '@automaker/utils/logger';
+import type {
+  ElectronAPI,
+  FileResult,
+  WriteResult,
+  ReaddirResult,
+  StatResult,
+  DialogResult,
+  SaveImageResult,
+  AutoModeAPI,
+  FeaturesAPI,
+  SpecRegenerationAPI,
+  AutoModeEvent,
+  SpecRegenerationEvent,
+  GitHubAPI,
+  IssueValidationInput,
+  IssueValidationEvent,
+  IdeationAPI,
+  IdeaCategory,
+  AnalysisSuggestion,
+  StartSessionOptions,
+  CreateIdeaInput,
+  UpdateIdeaInput,
+  ConvertToFeatureOptions,
+  NotificationsAPI,
+  EventHistoryAPI,
+  CreatePROptions,
+} from './electron';
+import type {
+  IdeationContextSources,
+  EventHistoryFilter,
+  IdeationStreamEvent,
+  IdeationAnalysisEvent,
+  Notification,
+} from '@automaker/types';
+import type { Message, SessionListItem } from '@/types/electron';
+import type {
+  ClaudeUsageResponse,
+  CodexUsageResponse,
+  GeminiUsage,
+  ZaiUsageResponse,
+} from '@/store/app-store';
+import type { WorktreeAPI, GitAPI, ModelDefinition, ProviderStatus } from '@/types/electron';
+import type { ModelId, ThinkingLevel, ReasoningEffort, Feature } from '@automaker/types';
+import { getGlobalFileBrowser } from '@/contexts/file-browser-context';
+
+const logger = createLogger('HttpClient');
+const NO_STORE_CACHE_MODE: RequestCache = 'no-store';
+
+// Cached server URL (set during initialization in Electron mode)
+let cachedServerUrl: string | null = null;
+
+/**
+ * Notify the UI that the current session is no longer valid.
+ * Used to redirect the user to a logged-out route on 401/403 responses.
+ */
+const notifyLoggedOut = (): void => {
+  if (typeof window === 'undefined') return;
+  try {
+    window.dispatchEvent(new CustomEvent('automaker:logged-out'));
+  } catch {
+    // Ignore - navigation will still be handled by failed requests in most cases
+  }
+};
+
+/**
+ * Handle an unauthorized response in cookie/session auth flows.
+ * Clears in-memory token and attempts to clear the cookie (best-effort),
+ * then notifies the UI to redirect.
+ */
+const handleUnauthorized = (): void => {
+  clearSessionToken();
+  // Best-effort cookie clear (avoid throwing)
+  fetch(`${getServerUrl()}/api/auth/logout`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: '{}',
+    cache: NO_STORE_CACHE_MODE,
+  }).catch(() => {});
+  notifyLoggedOut();
+};
+
+/**
+ * Notify the UI that the server is offline/unreachable.
+ * Used to redirect the user to the login page which will show server unavailable.
+ */
+const notifyServerOffline = (): void => {
+  if (typeof window === 'undefined') return;
+  try {
+    window.dispatchEvent(new CustomEvent('automaker:server-offline'));
+  } catch {
+    // Ignore
+  }
+};
+
+/**
+ * Check if an error is a connection error (server offline/unreachable).
+ * These are typically TypeError with 'Failed to fetch' or similar network errors.
+ */
+export const isConnectionError = (error: unknown): boolean => {
+  if (error instanceof TypeError) {
+    const message = error.message.toLowerCase();
+    return (
+      message.includes('failed to fetch') ||
+      message.includes('network') ||
+      message.includes('econnrefused') ||
+      message.includes('connection refused')
+    );
+  }
+  // Check for error objects with message property
+  if (error && typeof error === 'object' && 'message' in error) {
+    const message = String((error as { message: unknown }).message).toLowerCase();
+    return (
+      message.includes('failed to fetch') ||
+      message.includes('network') ||
+      message.includes('econnrefused') ||
+      message.includes('connection refused')
+    );
+  }
+  return false;
+};
+
+/**
+ * Handle a server offline error by verifying the server is actually down
+ * before redirecting to login. Uses debouncing to coalesce rapid errors
+ * and a health check to confirm the server isn't just experiencing a
+ * transient network blip.
+ */
+let serverOfflineCheckPending = false;
+
+export const handleServerOffline = (): void => {
+  // Debounce: if a check is already in progress, skip
+  if (serverOfflineCheckPending) return;
+  serverOfflineCheckPending = true;
+
+  // Wait briefly to let transient errors settle, then verify with a health check
+  setTimeout(() => {
+    (async () => {
+      try {
+        const response = await fetch(`${getServerUrl()}/api/health`, {
+          method: 'GET',
+          cache: NO_STORE_CACHE_MODE,
+          signal: AbortSignal.timeout(5000),
+        });
+        if (response.ok) {
+          logger.info('Server health check passed, ignoring transient connection error');
+          return;
+        }
+      } catch {
+        // Health check failed - server is genuinely offline
+      }
+
+      logger.error('Server appears to be offline, redirecting to login...');
+      notifyServerOffline();
+    })().finally(() => {
+      serverOfflineCheckPending = false;
+    });
+  }, 2000);
+};
+
+/**
+ * Initialize server URL from Electron IPC.
+ * Must be called early in Electron mode before making API requests.
+ */
+export const initServerUrl = async (): Promise<void> => {
+  const electron = typeof window !== 'undefined' ? window.electronAPI : null;
+  if (electron?.getServerUrl) {
+    try {
+      cachedServerUrl = await electron.getServerUrl();
+      logger.info('Server URL from Electron:', cachedServerUrl);
+    } catch (error) {
+      logger.warn('Failed to get server URL from Electron:', error);
+    }
+  }
+};
+
+// Server URL - uses cached value from IPC or environment variable
+const getServerUrl = (): string => {
+  // Use cached URL from Electron IPC if available
+  if (cachedServerUrl) {
+    return cachedServerUrl;
+  }
+
+  if (typeof window !== 'undefined') {
+    const envUrl = import.meta.env.VITE_SERVER_URL;
+    if (envUrl) return envUrl;
+
+    // In web mode (not Electron), use relative URL to leverage Vite proxy
+    // This avoids CORS issues since requests appear same-origin
+    if (!window.isElectron) {
+      return '';
+    }
+  }
+  // Use VITE_HOSTNAME if set, otherwise default to localhost
+  const hostname = import.meta.env.VITE_HOSTNAME || 'localhost';
+  return `http://${hostname}:3008`;
+};
+
+/**
+ * Get the server URL (exported for use in other modules)
+ */
+export const getServerUrlSync = (): string => getServerUrl();
+
+// Cached API key for authentication (Electron mode only)
+let cachedApiKey: string | null = null;
+let apiKeyInitialized = false;
+let apiKeyInitPromise: Promise<void> | null = null;
+
+// Cached session token for authentication (Web mode - explicit header auth)
+// Persisted to localStorage to survive page reloads
+let cachedSessionToken: string | null = null;
+const SESSION_TOKEN_KEY = 'automaker:sessionToken';
+
+// Initialize cached session token from localStorage on module load
+// This ensures web mode survives page reloads with valid authentication
+const initSessionToken = (): void => {
+  if (typeof window === 'undefined') return; // Skip in SSR
+  try {
+    cachedSessionToken = window.localStorage.getItem(SESSION_TOKEN_KEY);
+  } catch {
+    // localStorage might be disabled or unavailable
+    cachedSessionToken = null;
+  }
+};
+
+// Initialize on module load
+initSessionToken();
+
+// Get API key for Electron mode (returns cached value after initialization)
+// Exported for use in WebSocket connections that need auth
+export const getApiKey = (): string | null => cachedApiKey;
+
+/**
+ * Wait for API key initialization to complete.
+ * Returns immediately if already initialized.
+ */
+export const waitForApiKeyInit = (): Promise<void> => {
+  if (apiKeyInitialized) return Promise.resolve();
+  if (apiKeyInitPromise) return apiKeyInitPromise;
+  // If not started yet, start it now
+  return initApiKey();
+};
+
+// Get session token for Web mode (returns cached value after login)
+export const getSessionToken = (): string | null => cachedSessionToken;
+
+// Set session token (called after login) - persists to localStorage for page reload survival
+export const setSessionToken = (token: string | null): void => {
+  cachedSessionToken = token;
+  if (typeof window === 'undefined') return; // Skip in SSR
+  try {
+    if (token) {
+      window.localStorage.setItem(SESSION_TOKEN_KEY, token);
+    } else {
+      window.localStorage.removeItem(SESSION_TOKEN_KEY);
+    }
+  } catch {
+    // localStorage might be disabled; continue with in-memory cache
+  }
+};
+
+// Clear session token (called on logout)
+export const clearSessionToken = (): void => {
+  cachedSessionToken = null;
+  if (typeof window === 'undefined') return; // Skip in SSR
+  try {
+    window.localStorage.removeItem(SESSION_TOKEN_KEY);
+  } catch {
+    // localStorage might be disabled
+  }
+};
+
+/**
+ * Check if we're running in Electron mode
+ */
+export const isElectronMode = (): boolean => {
+  if (typeof window === 'undefined') return false;
+
+  // Prefer a stable runtime marker from preload.
+  // In some dev/electron setups, method availability can be temporarily undefined
+  // during early startup, but `isElectron` remains reliable.
+  const api = window.electronAPI;
+  return api?.isElectron === true || !!api?.getApiKey;
+};
+
+// Cached external server mode flag
+let cachedExternalServerMode: boolean | null = null;
+
+/**
+ * Check if running in external server mode (Docker API)
+ * In this mode, Electron uses session-based auth like web mode
+ */
+export const checkExternalServerMode = async (): Promise<boolean> => {
+  if (cachedExternalServerMode !== null) {
+    return cachedExternalServerMode;
+  }
+
+  if (typeof window !== 'undefined') {
+    const api = window.electronAPI;
+    if (api?.isExternalServerMode) {
+      try {
+        cachedExternalServerMode = Boolean(await api.isExternalServerMode());
+        return cachedExternalServerMode;
+      } catch (error) {
+        logger.warn('Failed to check external server mode:', error);
+      }
+    }
+  }
+
+  cachedExternalServerMode = false;
+  return false;
+};
+
+/**
+ * Get cached external server mode (synchronous, returns null if not yet checked)
+ */
+export const isExternalServerMode = (): boolean | null => cachedExternalServerMode;
+
+/**
+ * Initialize API key and server URL for Electron mode authentication.
+ * In web mode, authentication uses HTTP-only cookies instead.
+ *
+ * This should be called early in app initialization.
+ */
+export const initApiKey = async (): Promise<void> => {
+  // Return existing promise if already in progress
+  if (apiKeyInitPromise) return apiKeyInitPromise;
+
+  // Return immediately if already initialized
+  if (apiKeyInitialized) return;
+
+  // Create and store the promise so concurrent calls wait for the same initialization
+  apiKeyInitPromise = (async () => {
+    try {
+      // Initialize server URL from Electron IPC first (needed for API requests)
+      await initServerUrl();
+
+      // Only Electron mode uses API key header auth
+      if (typeof window !== 'undefined' && window.electronAPI?.getApiKey) {
+        try {
+          cachedApiKey = await window.electronAPI.getApiKey();
+          if (cachedApiKey) {
+            logger.info('Using API key from Electron');
+            return;
+          }
+        } catch (error) {
+          logger.warn('Failed to get API key from Electron:', error);
+        }
+      }
+
+      // In web mode, authentication is handled via HTTP-only cookies
+      logger.info('Web mode - using cookie-based authentication');
+    } finally {
+      // Mark as initialized after completion, regardless of success or failure
+      apiKeyInitialized = true;
+    }
+  })();
+
+  return apiKeyInitPromise;
+};
+
+/**
+ * Check authentication status with the server
+ */
+export const checkAuthStatus = async (): Promise<{
+  authenticated: boolean;
+  required: boolean;
+}> => {
+  try {
+    const response = await fetch(`${getServerUrl()}/api/auth/status`, {
+      credentials: 'include',
+      headers: getApiKey() ? { 'X-API-Key': getApiKey()! } : undefined,
+      cache: NO_STORE_CACHE_MODE,
+    });
+    const data = await response.json();
+    return {
+      authenticated: data.authenticated ?? false,
+      required: data.required ?? true,
+    };
+  } catch (error) {
+    logger.error('Failed to check auth status:', error);
+    return { authenticated: false, required: true };
+  }
+};
+
+/**
+ * Login with API key (for web mode)
+ * After login succeeds, verifies the session is actually working by making
+ * a request to an authenticated endpoint.
+ */
+export const login = async (
+  apiKey: string
+): Promise<{ success: boolean; error?: string; token?: string }> => {
+  try {
+    const response = await fetch(`${getServerUrl()}/api/auth/login`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({ apiKey }),
+      cache: NO_STORE_CACHE_MODE,
+    });
+    const data = await response.json();
+
+    // Store the session token if login succeeded
+    if (data.success && data.token) {
+      setSessionToken(data.token);
+      logger.info('Session token stored after login');
+
+      // Verify the session is actually working by making a request to an authenticated endpoint
+      const verified = await verifySession();
+      if (!verified) {
+        logger.error('Login appeared successful but session verification failed');
+        return {
+          success: false,
+          error: 'Session verification failed. Please try again.',
+        };
+      }
+      logger.info('Login verified successfully');
+    }
+
+    return data;
+  } catch (error) {
+    logger.error('Login failed:', error);
+    return { success: false, error: 'Network error' };
+  }
+};
+
+/**
+ * Check if the session cookie is still valid by making a request to an authenticated endpoint.
+ * Note: This does NOT retrieve the session token - on page refresh we rely on cookies alone.
+ * The session token is only available after a fresh login.
+ */
+export const fetchSessionToken = async (): Promise<boolean> => {
+  // On page refresh, we can't retrieve the session token (it's stored in HTTP-only cookie).
+  // We just verify the cookie is valid by checking auth status.
+  // The session token is only stored in memory after a fresh login.
+  try {
+    const response = await fetch(`${getServerUrl()}/api/auth/status`, {
+      credentials: 'include', // Send the session cookie
+      cache: NO_STORE_CACHE_MODE,
+    });
+
+    if (!response.ok) {
+      logger.info('Failed to check auth status');
+      return false;
+    }
+
+    const data = await response.json();
+    if (data.success && data.authenticated) {
+      logger.info('Session cookie is valid');
+      return true;
+    }
+
+    logger.info('Session cookie is not authenticated');
+    return false;
+  } catch (error) {
+    logger.error('Failed to check session:', error);
+    return false;
+  }
+};
+
+/**
+ * Logout (for web mode)
+ */
+export const logout = async (): Promise<{ success: boolean }> => {
+  try {
+    const response = await fetch(`${getServerUrl()}/api/auth/logout`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      cache: NO_STORE_CACHE_MODE,
+    });
+
+    // Clear the cached session token
+    clearSessionToken();
+    logger.info('Session token cleared on logout');
+
+    return await response.json();
+  } catch (error) {
+    logger.error('Logout failed:', error);
+    return { success: false };
+  }
+};
+
+/**
+ * Verify that the current session is still valid by making a request to an authenticated endpoint.
+ * If the session has expired or is invalid, clears the session and returns false.
+ * This should be called:
+ * 1. After login to verify the cookie was set correctly
+ * 2. On app load to verify the session hasn't expired
+ *
+ * Returns:
+ * - true: Session is valid
+ * - false: Session is definitively invalid (401/403 auth failure)
+ * - throws: Network error or server not ready (caller should retry)
+ */
+export const verifySession = async (): Promise<boolean> => {
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  };
+
+  // Electron mode: use API key header
+  const apiKey = getApiKey();
+  if (apiKey) {
+    headers['X-API-Key'] = apiKey;
+  }
+
+  // Add session token header if available (web mode)
+  const sessionToken = getSessionToken();
+  if (sessionToken) {
+    headers['X-Session-Token'] = sessionToken;
+  }
+
+  // Make a request to an authenticated endpoint to verify the session
+  // We use /api/settings/status as it requires authentication and is lightweight
+  // Note: fetch throws on network errors, which we intentionally let propagate
+  const response = await fetch(`${getServerUrl()}/api/settings/status`, {
+    headers,
+    credentials: 'include',
+    cache: NO_STORE_CACHE_MODE,
+    // Avoid hanging indefinitely during backend reloads or network issues
+    signal: AbortSignal.timeout(2500),
+  });
+
+  // Check for authentication errors - these are definitive "invalid session" responses
+  if (response.status === 401 || response.status === 403) {
+    logger.warn('Session verification failed - session expired or invalid');
+    // Clear the in-memory/localStorage session token since it's no longer valid
+    // Note: We do NOT call logout here - that would destroy a potentially valid
+    // cookie if the issue was transient (e.g., token not sent due to timing)
+    clearSessionToken();
+    return false;
+  }
+
+  // For other non-ok responses (5xx, etc.), throw to trigger retry
+  if (!response.ok) {
+    const error = new Error(`Session verification failed with status: ${response.status}`);
+    logger.warn('Session verification failed with status:', response.status);
+    throw error;
+  }
+
+  logger.info('Session verified successfully');
+  return true;
+};
+
+/**
+ * Check if the server is running in a containerized (sandbox) environment.
+ * This endpoint is unauthenticated so it can be checked before login.
+ */
+export const checkSandboxEnvironment = async (): Promise<{
+  isContainerized: boolean;
+  skipSandboxWarning?: boolean;
+  error?: string;
+}> => {
+  try {
+    const response = await fetch(`${getServerUrl()}/api/health/environment`, {
+      method: 'GET',
+      cache: NO_STORE_CACHE_MODE,
+      signal: AbortSignal.timeout(5000),
+    });
+
+    if (!response.ok) {
+      logger.warn('Failed to check sandbox environment');
+      return { isContainerized: false, error: 'Failed to check environment' };
+    }
+
+    const data = await response.json();
+    return {
+      isContainerized: data.isContainerized ?? false,
+      skipSandboxWarning: data.skipSandboxWarning ?? false,
+    };
+  } catch (error) {
+    logger.error('Sandbox environment check failed:', error);
+    return { isContainerized: false, error: 'Network error' };
+  }
+};
+
+type EventType =
+  | 'agent:stream'
+  | 'auto-mode:event'
+  | 'spec-regeneration:event'
+  | 'issue-validation:event'
+  | 'backlog-plan:event'
+  | 'ideation:stream'
+  | 'ideation:analysis'
+  | 'worktree:init-started'
+  | 'worktree:init-output'
+  | 'worktree:init-completed'
+  | 'dev-server:starting'
+  | 'dev-server:started'
+  | 'dev-server:output'
+  | 'dev-server:stopped'
+  | 'dev-server:url-detected'
+  | 'test-runner:started'
+  | 'test-runner:output'
+  | 'test-runner:completed'
+  | 'notification:created';
+
+/**
+ * Dev server log event payloads for WebSocket streaming
+ */
+
+/** Shared base for dev server events that carry URL/port information */
+interface DevServerUrlEvent {
+  worktreePath: string;
+  url: string;
+  port: number;
+  timestamp: string;
+}
+
+export interface DevServerStartingEvent {
+  worktreePath: string;
+  timestamp: string;
+}
+
+export type DevServerStartedEvent = DevServerUrlEvent;
+
+export interface DevServerOutputEvent {
+  worktreePath: string;
+  content: string;
+  timestamp: string;
+}
+
+export interface DevServerStoppedEvent {
+  worktreePath: string;
+  port: number;
+  exitCode: number | null;
+  error?: string;
+  timestamp: string;
+}
+
+export type DevServerUrlDetectedEvent = DevServerUrlEvent;
+
+export type DevServerLogEvent =
+  | { type: 'dev-server:starting'; payload: DevServerStartingEvent }
+  | { type: 'dev-server:started'; payload: DevServerStartedEvent }
+  | { type: 'dev-server:output'; payload: DevServerOutputEvent }
+  | { type: 'dev-server:stopped'; payload: DevServerStoppedEvent }
+  | { type: 'dev-server:url-detected'; payload: DevServerUrlDetectedEvent };
+
+/**
+ * Test runner event payloads for WebSocket streaming
+ */
+export type TestRunStatus = 'pending' | 'running' | 'passed' | 'failed' | 'cancelled' | 'error';
+
+export interface TestRunnerStartedEvent {
+  sessionId: string;
+  worktreePath: string;
+  /** The test command being run (from project settings) */
+  command: string;
+  testFile?: string;
+  timestamp: string;
+}
+
+export interface TestRunnerOutputEvent {
+  sessionId: string;
+  worktreePath: string;
+  content: string;
+  timestamp: string;
+}
+
+export interface TestRunnerCompletedEvent {
+  sessionId: string;
+  worktreePath: string;
+  /** The test command that was run */
+  command: string;
+  status: TestRunStatus;
+  testFile?: string;
+  exitCode: number | null;
+  duration: number;
+  timestamp: string;
+}
+
+export type TestRunnerEvent =
+  | { type: 'test-runner:started'; payload: TestRunnerStartedEvent }
+  | { type: 'test-runner:output'; payload: TestRunnerOutputEvent }
+  | { type: 'test-runner:completed'; payload: TestRunnerCompletedEvent };
+
+/**
+ * Response type for fetching dev server logs
+ */
+export interface DevServerLogsResponse {
+  success: boolean;
+  result?: {
+    worktreePath: string;
+    port: number;
+    url: string;
+    logs: string;
+    startedAt: string;
+  };
+  error?: string;
+}
+
+/**
+ * Response type for fetching test logs
+ */
+export interface TestLogsResponse {
+  success: boolean;
+  result?: {
+    sessionId: string;
+    worktreePath: string;
+    /** The test command that was/is being run */
+    command: string;
+    status: TestRunStatus;
+    testFile?: string;
+    logs: string;
+    startedAt: string;
+    finishedAt: string | null;
+    exitCode: number | null;
+  };
+  error?: string;
+}
+
+type EventCallback = (payload: unknown) => void;
+
+interface EnhancePromptResult {
+  success: boolean;
+  enhancedText?: string;
+  error?: string;
+}
+
+/**
+ * HTTP API Client that implements ElectronAPI interface
+ */
+export class HttpApiClient implements ElectronAPI {
+  private serverUrl: string;
+  private ws: WebSocket | null = null;
+  private eventCallbacks: Map<EventType, Set<EventCallback>> = new Map();
+  private reconnectTimer: NodeJS.Timeout | null = null;
+  private isConnecting = false;
+  /** Consecutive reconnect failure count for exponential backoff */
+  private reconnectAttempts = 0;
+  /** Visibility change handler reference for cleanup */
+  private visibilityHandler: (() => void) | null = null;
+
+  constructor() {
+    this.serverUrl = getServerUrl();
+    // Electron mode: connect WebSocket immediately once API key is ready.
+    // Web mode: defer WebSocket connection until a consumer subscribes to events,
+    // to avoid noisy 401s on first-load/login/setup routes.
+    if (isElectronMode()) {
+      waitForApiKeyInit()
+        .then(() => {
+          this.connectWebSocket();
+        })
+        .catch((error) => {
+          logger.error('API key initialization failed:', error);
+          // Still attempt WebSocket connection - it may work with cookie auth
+          this.connectWebSocket();
+        });
+    }
+
+    // OPTIMIZATION: Reconnect WebSocket immediately when tab becomes visible
+    // This eliminates the reconnection delay after tab discard/background
+    this.visibilityHandler = () => {
+      if (document.visibilityState === 'visible') {
+        // If WebSocket is disconnected, reconnect immediately
+        if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+          logger.info('Tab became visible - attempting immediate WebSocket reconnect');
+          // Clear any pending reconnect timer
+          if (this.reconnectTimer) {
+            clearTimeout(this.reconnectTimer);
+            this.reconnectTimer = null;
+          }
+          this.reconnectAttempts = 0; // Reset backoff on visibility change
+          // Use silent mode: a 401 during visibility-change reconnect should NOT
+          // trigger a full logout cascade. The session is verified separately via
+          // verifySession() in __root.tsx's fast-hydrate path.
+          this.connectWebSocket({ silent: true });
+        }
+      }
+    };
+    if (typeof document !== 'undefined') {
+      document.addEventListener('visibilitychange', this.visibilityHandler);
+    }
+  }
+
+  /**
+   * Fetch a short-lived WebSocket token from the server.
+   * Used for secure WebSocket authentication without exposing session tokens in URLs.
+   *
+   * @param options.silent - When true, a 401/403 will NOT trigger handleUnauthorized().
+   *   Use this for background reconnections (e.g., visibility-change) where a transient
+   *   auth failure should not force a full logout cascade. The actual session validity
+   *   is verified separately via verifySession() in the fast-hydrate path.
+   */
+  private async fetchWsToken(options?: { silent?: boolean }): Promise<string | null> {
+    try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      };
+
+      // Add session token header if available
+      const sessionToken = getSessionToken();
+      if (sessionToken) {
+        headers['X-Session-Token'] = sessionToken;
+      }
+
+      const response = await fetch(`${this.serverUrl}/api/auth/token`, {
+        headers,
+        credentials: 'include',
+        cache: NO_STORE_CACHE_MODE,
+      });
+
+      if (response.status === 401 || response.status === 403) {
+        if (options?.silent) {
+          logger.debug('fetchWsToken: 401/403 during silent reconnect — skipping logout');
+        } else {
+          handleUnauthorized();
+        }
+        return null;
+      }
+
+      if (!response.ok) {
+        logger.warn('Failed to fetch wsToken:', response.status);
+        return null;
+      }
+
+      const data = await response.json();
+      if (data.success && data.token) {
+        return data.token;
+      }
+
+      return null;
+    } catch (error) {
+      logger.error('Error fetching wsToken:', error);
+      return null;
+    }
+  }
+
+  private connectWebSocket(options?: { silent?: boolean }): void {
+    if (this.isConnecting || (this.ws && this.ws.readyState === WebSocket.OPEN)) {
+      return;
+    }
+
+    this.isConnecting = true;
+
+    // Wait for API key initialization to complete before attempting connection
+    // This prevents race conditions during app startup
+    waitForApiKeyInit()
+      .then(() => this.doConnectWebSocketInternal(options))
+      .catch((error) => {
+        logger.error('Failed to initialize for WebSocket connection:', error);
+        this.isConnecting = false;
+      });
+  }
+
+  private doConnectWebSocketInternal(options?: { silent?: boolean }): void {
+    // Electron mode typically authenticates with the injected API key.
+    // However, in external-server/cookie-auth flows, the API key may be unavailable.
+    // In that case, fall back to the same wsToken/cookie authentication used in web mode
+    // so the UI still receives real-time events (running tasks, logs, etc.).
+    if (isElectronMode()) {
+      const apiKey = getApiKey();
+      if (!apiKey) {
+        logger.warn('Electron mode: API key missing, attempting wsToken/cookie auth for WebSocket');
+        this.fetchWsToken(options)
+          .then((wsToken) => {
+            const wsUrl = this.serverUrl.replace(/^http/, 'ws') + '/api/events';
+            if (wsToken) {
+              this.establishWebSocket(`${wsUrl}?wsToken=${encodeURIComponent(wsToken)}`);
+            } else {
+              // Fallback: try connecting without token (will fail if not authenticated)
+              logger.warn('No wsToken available, attempting WebSocket connection anyway');
+              this.establishWebSocket(wsUrl);
+            }
+          })
+          .catch((error) => {
+            logger.error('Failed to prepare WebSocket connection (electron fallback):', error);
+            this.isConnecting = false;
+          });
+        return;
+      }
+
+      const wsUrl = this.serverUrl.replace(/^http/, 'ws') + '/api/events';
+      this.establishWebSocket(`${wsUrl}?apiKey=${encodeURIComponent(apiKey)}`);
+      return;
+    }
+
+    // In web mode, fetch a short-lived wsToken first
+    this.fetchWsToken(options)
+      .then((wsToken) => {
+        const wsUrl = this.serverUrl.replace(/^http/, 'ws') + '/api/events';
+        if (wsToken) {
+          this.establishWebSocket(`${wsUrl}?wsToken=${encodeURIComponent(wsToken)}`);
+        } else {
+          // Fallback: try connecting without token (will fail if not authenticated)
+          logger.warn('No wsToken available, attempting connection anyway');
+          this.establishWebSocket(wsUrl);
+        }
+      })
+      .catch((error) => {
+        logger.error('Failed to prepare WebSocket connection:', error);
+        this.isConnecting = false;
+      });
+  }
+
+  /**
+   * Establish the actual WebSocket connection
+   */
+  private establishWebSocket(wsUrl: string): void {
+    try {
+      this.ws = new WebSocket(wsUrl);
+
+      this.ws.onopen = () => {
+        logger.info('WebSocket connected');
+        this.isConnecting = false;
+        this.reconnectAttempts = 0; // Reset backoff on successful connection
+        if (this.reconnectTimer) {
+          clearTimeout(this.reconnectTimer);
+          this.reconnectTimer = null;
+        }
+      };
+
+      this.ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          // Only log non-high-frequency events to avoid progressive memory growth
+          // from accumulated console entries. High-frequency events (dev-server output,
+          // test runner output, agent progress) fire 10+ times/sec and would generate
+          // thousands of console entries per minute.
+          const isHighFrequency =
+            data.type === 'dev-server:output' ||
+            data.type === 'test-runner:output' ||
+            data.type === 'feature:progress' ||
+            (data.type === 'auto-mode:event' && data.payload?.type === 'auto_mode_progress');
+          if (!isHighFrequency) {
+            logger.info('WebSocket message:', data.type);
+          }
+          const callbacks = this.eventCallbacks.get(data.type);
+          if (callbacks) {
+            callbacks.forEach((cb) => cb(data.payload));
+          }
+        } catch (error) {
+          logger.error('Failed to parse WebSocket message:', error);
+        }
+      };
+
+      this.ws.onclose = () => {
+        logger.info('WebSocket disconnected');
+        this.isConnecting = false;
+        this.ws = null;
+
+        // OPTIMIZATION: Exponential backoff instead of fixed 5-second delay
+        // First attempt: immediate (0ms), then 500ms → 1s → 2s → 5s max
+        if (!this.reconnectTimer) {
+          const backoffDelays = [0, 500, 1000, 2000, 5000];
+          const delayMs =
+            backoffDelays[Math.min(this.reconnectAttempts, backoffDelays.length - 1)] ?? 5000;
+          this.reconnectAttempts++;
+
+          if (delayMs === 0) {
+            // Immediate reconnect on first attempt
+            this.connectWebSocket();
+          } else {
+            logger.info(
+              `WebSocket reconnecting in ${delayMs}ms (attempt ${this.reconnectAttempts})`
+            );
+            this.reconnectTimer = setTimeout(() => {
+              this.reconnectTimer = null;
+              this.connectWebSocket();
+            }, delayMs);
+          }
+        }
+      };
+
+      this.ws.onerror = (error) => {
+        logger.error('WebSocket error:', error);
+        this.isConnecting = false;
+      };
+    } catch (error) {
+      logger.error('Failed to create WebSocket:', error);
+      this.isConnecting = false;
+    }
+  }
+
+  private subscribeToEvent(type: EventType, callback: EventCallback): () => void {
+    if (!this.eventCallbacks.has(type)) {
+      this.eventCallbacks.set(type, new Set());
+    }
+    this.eventCallbacks.get(type)!.add(callback);
+
+    // Ensure WebSocket is connected
+    this.connectWebSocket();
+
+    return () => {
+      const callbacks = this.eventCallbacks.get(type);
+      if (callbacks) {
+        callbacks.delete(callback);
+      }
+    };
+  }
+
+  private getHeaders(): Record<string, string> {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+
+    // Electron mode: use API key
+    const apiKey = getApiKey();
+    if (apiKey) {
+      headers['X-API-Key'] = apiKey;
+      return headers;
+    }
+
+    // Web mode: use session token if available
+    const sessionToken = getSessionToken();
+    if (sessionToken) {
+      headers['X-Session-Token'] = sessionToken;
+    }
+
+    return headers;
+  }
+
+  private async post<T>(endpoint: string, body?: unknown, signal?: AbortSignal): Promise<T> {
+    // Ensure API key is initialized before making request
+    await waitForApiKeyInit();
+    const response = await fetch(`${this.serverUrl}${endpoint}`, {
+      method: 'POST',
+      headers: this.getHeaders(),
+      credentials: 'include', // Include cookies for session auth
+      body: body ? JSON.stringify(body) : undefined,
+      signal,
+    });
+
+    if (response.status === 401 || response.status === 403) {
+      handleUnauthorized();
+      throw new Error('Unauthorized');
+    }
+
+    if (!response.ok) {
+      let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+      try {
+        const errorData = await response.json();
+        if (errorData.error) {
+          errorMessage = errorData.error;
+        }
+      } catch {
+        // If parsing JSON fails, use status text
+      }
+      throw new Error(errorMessage);
+    }
+
+    return response.json();
+  }
+
+  async get<T>(endpoint: string): Promise<T> {
+    // Ensure API key is initialized before making request
+    await waitForApiKeyInit();
+    const response = await fetch(`${this.serverUrl}${endpoint}`, {
+      headers: this.getHeaders(),
+      credentials: 'include', // Include cookies for session auth
+      cache: NO_STORE_CACHE_MODE,
+    });
+
+    if (response.status === 401 || response.status === 403) {
+      handleUnauthorized();
+      throw new Error('Unauthorized');
+    }
+
+    if (!response.ok) {
+      let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+      try {
+        const errorData = await response.json();
+        if (errorData.error) {
+          errorMessage = errorData.error;
+        }
+      } catch {
+        // If parsing JSON fails, use status text
+      }
+      throw new Error(errorMessage);
+    }
+
+    return response.json();
+  }
+
+  async put<T>(endpoint: string, body?: unknown): Promise<T> {
+    // Ensure API key is initialized before making request
+    await waitForApiKeyInit();
+    const response = await fetch(`${this.serverUrl}${endpoint}`, {
+      method: 'PUT',
+      headers: this.getHeaders(),
+      credentials: 'include', // Include cookies for session auth
+      body: body ? JSON.stringify(body) : undefined,
+    });
+
+    if (response.status === 401 || response.status === 403) {
+      handleUnauthorized();
+      throw new Error('Unauthorized');
+    }
+
+    if (!response.ok) {
+      let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+      try {
+        const errorData = await response.json();
+        if (errorData.error) {
+          errorMessage = errorData.error;
+        }
+      } catch {
+        // If parsing JSON fails, use status text
+      }
+      throw new Error(errorMessage);
+    }
+
+    return response.json();
+  }
+
+  private async httpDelete<T>(endpoint: string, body?: unknown): Promise<T> {
+    // Ensure API key is initialized before making request
+    await waitForApiKeyInit();
+    const response = await fetch(`${this.serverUrl}${endpoint}`, {
+      method: 'DELETE',
+      headers: this.getHeaders(),
+      credentials: 'include', // Include cookies for session auth
+      body: body ? JSON.stringify(body) : undefined,
+    });
+
+    if (response.status === 401 || response.status === 403) {
+      handleUnauthorized();
+      throw new Error('Unauthorized');
+    }
+
+    if (!response.ok) {
+      let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+      try {
+        const errorData = await response.json();
+        if (errorData.error) {
+          errorMessage = errorData.error;
+        }
+      } catch {
+        // If parsing JSON fails, use status text
+      }
+      throw new Error(errorMessage);
+    }
+
+    return response.json();
+  }
+
+  // Basic operations
+  async ping(): Promise<string> {
+    const result = await this.get<{ status: string }>('/api/health');
+    return result.status === 'ok' ? 'pong' : 'error';
+  }
+
+  async openExternalLink(url: string): Promise<{ success: boolean; error?: string }> {
+    // Open in new tab
+    window.open(url, '_blank', 'noopener,noreferrer');
+    return { success: true };
+  }
+
+  async openInEditor(
+    filePath: string,
+    line?: number,
+    column?: number
+  ): Promise<{ success: boolean; error?: string }> {
+    // Build VS Code URL scheme: vscode://file/path:line:column
+    // This works on systems where VS Code's URL handler is registered
+    // URL encode the path to handle special characters (spaces, brackets, etc.)
+    // Handle both Unix (/) and Windows (\) path separators
+    const normalizedPath = filePath.replace(/\\/g, '/');
+    const encodedPath = normalizedPath.startsWith('/')
+      ? '/' + normalizedPath.slice(1).split('/').map(encodeURIComponent).join('/')
+      : normalizedPath.split('/').map(encodeURIComponent).join('/');
+    let url = `vscode://file${encodedPath}`;
+    if (line !== undefined && line > 0) {
+      url += `:${line}`;
+      if (column !== undefined && column > 0) {
+        url += `:${column}`;
+      }
+    }
+
+    try {
+      // Use anchor click approach which is most reliable for custom URL schemes
+      // This triggers the browser's URL handler without navigation issues
+      const anchor = document.createElement('a');
+      anchor.href = url;
+      anchor.style.display = 'none';
+      document.body.appendChild(anchor);
+      anchor.click();
+      document.body.removeChild(anchor);
+      return { success: true };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : 'Failed to open in editor',
+      };
+    }
+  }
+
+  // File picker - uses server-side file browser dialog
+  async openDirectory(): Promise<DialogResult> {
+    const fileBrowser = getGlobalFileBrowser();
+
+    if (!fileBrowser) {
+      logger.error('File browser not initialized');
+      return { canceled: true, filePaths: [] };
+    }
+
+    const path = await fileBrowser();
+
+    if (!path) {
+      return { canceled: true, filePaths: [] };
+    }
+
+    // Validate with server
+    const result = await this.post<{
+      success: boolean;
+      path?: string;
+      isAllowed?: boolean;
+      error?: string;
+    }>('/api/fs/validate-path', { filePath: path });
+
+    if (result.success && result.path && result.isAllowed !== false) {
+      return { canceled: false, filePaths: [result.path] };
+    }
+
+    logger.error('Invalid directory:', result.error || 'Path not allowed');
+    return { canceled: true, filePaths: [] };
+  }
+
+  async openFile(_options?: object): Promise<DialogResult> {
+    const fileBrowser = getGlobalFileBrowser();
+
+    if (!fileBrowser) {
+      logger.error('File browser not initialized');
+      return { canceled: true, filePaths: [] };
+    }
+
+    // For now, use the same directory browser (could be enhanced for file selection)
+    const path = await fileBrowser();
+
+    if (!path) {
+      return { canceled: true, filePaths: [] };
+    }
+
+    const result = await this.post<{ success: boolean; exists: boolean }>('/api/fs/exists', {
+      filePath: path,
+    });
+
+    if (result.success && result.exists) {
+      return { canceled: false, filePaths: [path] };
+    }
+
+    logger.error('File not found');
+    return { canceled: true, filePaths: [] };
+  }
+
+  // File system operations
+  async readFile(filePath: string): Promise<FileResult> {
+    return this.post('/api/fs/read', { filePath });
+  }
+
+  async writeFile(filePath: string, content: string): Promise<WriteResult> {
+    return this.post('/api/fs/write', { filePath, content });
+  }
+
+  async mkdir(dirPath: string): Promise<WriteResult> {
+    return this.post('/api/fs/mkdir', { dirPath });
+  }
+
+  async readdir(dirPath: string): Promise<ReaddirResult> {
+    return this.post('/api/fs/readdir', { dirPath });
+  }
+
+  async exists(filePath: string): Promise<boolean> {
+    const result = await this.post<{ success: boolean; exists: boolean }>('/api/fs/exists', {
+      filePath,
+    });
+    return result.exists;
+  }
+
+  async stat(filePath: string): Promise<StatResult> {
+    return this.post('/api/fs/stat', { filePath });
+  }
+
+  async deleteFile(filePath: string): Promise<WriteResult> {
+    return this.post('/api/fs/delete', { filePath });
+  }
+
+  async trashItem(filePath: string): Promise<WriteResult> {
+    // In web mode, trash is just delete
+    return this.deleteFile(filePath);
+  }
+
+  async copyItem(
+    sourcePath: string,
+    destinationPath: string,
+    overwrite?: boolean
+  ): Promise<WriteResult & { exists?: boolean }> {
+    return this.post('/api/fs/copy', { sourcePath, destinationPath, overwrite });
+  }
+
+  async moveItem(
+    sourcePath: string,
+    destinationPath: string,
+    overwrite?: boolean
+  ): Promise<WriteResult & { exists?: boolean }> {
+    return this.post('/api/fs/move', { sourcePath, destinationPath, overwrite });
+  }
+
+  async downloadItem(filePath: string): Promise<void> {
+    const serverUrl = getServerUrl();
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+    const apiKey = getApiKey();
+    if (apiKey) {
+      headers['X-API-Key'] = apiKey;
+    }
+    const token = getSessionToken();
+    if (token) {
+      headers['X-Session-Token'] = token;
+    }
+
+    const response = await fetch(`${serverUrl}/api/fs/download`, {
+      method: 'POST',
+      headers,
+      credentials: 'include',
+      body: JSON.stringify({ filePath }),
+    });
+
+    if (response.status === 401 || response.status === 403) {
+      handleUnauthorized();
+      throw new Error('Unauthorized');
+    }
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: 'Download failed' }));
+      throw new Error(error.error || `Download failed with status ${response.status}`);
+    }
+
+    // Create download from response blob
+    const blob = await response.blob();
+    const contentDisposition = response.headers.get('Content-Disposition');
+    const fileNameMatch = contentDisposition?.match(/filename="(.+)"/);
+    const fileName = fileNameMatch ? fileNameMatch[1] : filePath.split('/').pop() || 'download';
+
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  async getPath(name: string): Promise<string> {
+    // Server provides data directory
+    if (name === 'userData') {
+      const result = await this.get<{ dataDir: string }>('/api/health/detailed');
+      return result.dataDir || '/data';
+    }
+    return `/data/${name}`;
+  }
+
+  async saveImageToTemp(
+    data: string,
+    filename: string,
+    mimeType: string,
+    projectPath?: string
+  ): Promise<SaveImageResult> {
+    return this.post('/api/fs/save-image', {
+      data,
+      filename,
+      mimeType,
+      projectPath,
+    });
+  }
+
+  async saveBoardBackground(
+    data: string,
+    filename: string,
+    mimeType: string,
+    projectPath: string
+  ): Promise<{ success: boolean; path?: string; error?: string }> {
+    return this.post('/api/fs/save-board-background', {
+      data,
+      filename,
+      mimeType,
+      projectPath,
+    });
+  }
+
+  async deleteBoardBackground(projectPath: string): Promise<{ success: boolean; error?: string }> {
+    return this.post('/api/fs/delete-board-background', { projectPath });
+  }
+
+  // CLI checks - server-side
+  async checkClaudeCli(): Promise<{
+    success: boolean;
+    status?: string;
+    method?: string;
+    version?: string;
+    path?: string;
+    recommendation?: string;
+    installCommands?: {
+      macos?: string;
+      windows?: string;
+      linux?: string;
+      npm?: string;
+    };
+    error?: string;
+  }> {
+    return this.get('/api/setup/claude-status');
+  }
+
+  // Model API
+  model = {
+    getAvailable: async (): Promise<{
+      success: boolean;
+      models?: ModelDefinition[];
+      error?: string;
+    }> => {
+      return this.get('/api/models/available');
+    },
+    checkProviders: async (): Promise<{
+      success: boolean;
+      providers?: Record<string, ProviderStatus>;
+      error?: string;
+    }> => {
+      return this.get('/api/models/providers');
+    },
+  };
+
+  // Setup API
+  setup = {
+    getClaudeStatus: (): Promise<{
+      success: boolean;
+      status?: string;
+      installed?: boolean;
+      method?: string;
+      version?: string;
+      path?: string;
+      auth?: {
+        authenticated: boolean;
+        method: string;
+        hasCredentialsFile?: boolean;
+        hasToken?: boolean;
+        hasStoredOAuthToken?: boolean;
+        hasStoredApiKey?: boolean;
+        hasEnvApiKey?: boolean;
+        hasEnvOAuthToken?: boolean;
+        hasCliAuth?: boolean;
+        hasRecentActivity?: boolean;
+      };
+      error?: string;
+    }> => this.get('/api/setup/claude-status'),
+
+    installClaude: (): Promise<{
+      success: boolean;
+      message?: string;
+      error?: string;
+    }> => this.post('/api/setup/install-claude'),
+
+    authClaude: (): Promise<{
+      success: boolean;
+      token?: string;
+      requiresManualAuth?: boolean;
+      terminalOpened?: boolean;
+      command?: string;
+      error?: string;
+      message?: string;
+      output?: string;
+    }> => this.post('/api/setup/auth-claude'),
+
+    deauthClaude: (): Promise<{
+      success: boolean;
+      requiresManualDeauth?: boolean;
+      command?: string;
+      message?: string;
+      error?: string;
+    }> => this.post('/api/setup/deauth-claude'),
+
+    storeApiKey: (
+      provider: string,
+      apiKey: string
+    ): Promise<{
+      success: boolean;
+      error?: string;
+    }> => this.post('/api/setup/store-api-key', { provider, apiKey }),
+
+    deleteApiKey: (
+      provider: string
+    ): Promise<{
+      success: boolean;
+      error?: string;
+      message?: string;
+    }> => this.post('/api/setup/delete-api-key', { provider }),
+
+    getApiKeys: (): Promise<{
+      success: boolean;
+      hasAnthropicKey: boolean;
+      hasGoogleKey: boolean;
+      hasOpenaiKey: boolean;
+    }> => this.get('/api/setup/api-keys'),
+
+    getPlatform: (): Promise<{
+      success: boolean;
+      platform: string;
+      arch: string;
+      homeDir: string;
+      isWindows: boolean;
+      isMac: boolean;
+      isLinux: boolean;
+    }> => this.get('/api/setup/platform'),
+
+    verifyClaudeAuth: (
+      authMethod?: 'cli' | 'api_key',
+      apiKey?: string
+    ): Promise<{
+      success: boolean;
+      authenticated: boolean;
+      authType?: 'oauth' | 'api_key' | 'cli';
+      error?: string;
+    }> => this.post('/api/setup/verify-claude-auth', { authMethod, apiKey }),
+
+    getGhStatus: (): Promise<{
+      success: boolean;
+      installed: boolean;
+      authenticated: boolean;
+      version: string | null;
+      path: string | null;
+      user: string | null;
+      error?: string;
+    }> => this.get('/api/setup/gh-status'),
+
+    // Cursor CLI methods
+    getCursorStatus: (): Promise<{
+      success: boolean;
+      installed?: boolean;
+      version?: string | null;
+      path?: string | null;
+      auth?: {
+        authenticated: boolean;
+        method: string;
+      };
+      installCommand?: string;
+      loginCommand?: string;
+      error?: string;
+    }> => this.get('/api/setup/cursor-status'),
+
+    authCursor: (): Promise<{
+      success: boolean;
+      token?: string;
+      requiresManualAuth?: boolean;
+      terminalOpened?: boolean;
+      command?: string;
+      message?: string;
+      output?: string;
+    }> => this.post('/api/setup/auth-cursor'),
+
+    deauthCursor: (): Promise<{
+      success: boolean;
+      requiresManualDeauth?: boolean;
+      command?: string;
+      message?: string;
+      error?: string;
+    }> => this.post('/api/setup/deauth-cursor'),
+
+    authOpencode: (): Promise<{
+      success: boolean;
+      token?: string;
+      requiresManualAuth?: boolean;
+      terminalOpened?: boolean;
+      command?: string;
+      message?: string;
+      output?: string;
+    }> => this.post('/api/setup/auth-opencode'),
+
+    deauthOpencode: (): Promise<{
+      success: boolean;
+      requiresManualDeauth?: boolean;
+      command?: string;
+      message?: string;
+      error?: string;
+    }> => this.post('/api/setup/deauth-opencode'),
+
+    getCursorConfig: (
+      projectPath: string
+    ): Promise<{
+      success: boolean;
+      config?: {
+        defaultModel?: string;
+        models?: string[];
+        mcpServers?: string[];
+        rules?: string[];
+      };
+      availableModels?: Array<{
+        id: string;
+        label: string;
+        description: string;
+        hasThinking: boolean;
+        tier: 'free' | 'pro';
+      }>;
+      error?: string;
+    }> => this.get(`/api/setup/cursor-config?projectPath=${encodeURIComponent(projectPath)}`),
+
+    setCursorDefaultModel: (
+      projectPath: string,
+      model: string
+    ): Promise<{
+      success: boolean;
+      model?: string;
+      error?: string;
+    }> => this.post('/api/setup/cursor-config/default-model', { projectPath, model }),
+
+    setCursorModels: (
+      projectPath: string,
+      models: string[]
+    ): Promise<{
+      success: boolean;
+      models?: string[];
+      error?: string;
+    }> => this.post('/api/setup/cursor-config/models', { projectPath, models }),
+
+    // Cursor CLI Permissions
+    getCursorPermissions: (
+      projectPath?: string
+    ): Promise<{
+      success: boolean;
+      globalPermissions?: { allow: string[]; deny: string[] } | null;
+      projectPermissions?: { allow: string[]; deny: string[] } | null;
+      effectivePermissions?: { allow: string[]; deny: string[] } | null;
+      activeProfile?: 'strict' | 'development' | 'custom' | null;
+      hasProjectConfig?: boolean;
+      availableProfiles?: Array<{
+        id: string;
+        name: string;
+        description: string;
+        permissions: { allow: string[]; deny: string[] };
+      }>;
+      error?: string;
+    }> =>
+      this.get(
+        `/api/setup/cursor-permissions${projectPath ? `?projectPath=${encodeURIComponent(projectPath)}` : ''}`
+      ),
+
+    applyCursorPermissionProfile: (
+      profileId: 'strict' | 'development',
+      scope: 'global' | 'project',
+      projectPath?: string
+    ): Promise<{
+      success: boolean;
+      message?: string;
+      scope?: string;
+      profileId?: string;
+      error?: string;
+    }> => this.post('/api/setup/cursor-permissions/profile', { profileId, scope, projectPath }),
+
+    setCursorCustomPermissions: (
+      projectPath: string,
+      permissions: { allow: string[]; deny: string[] }
+    ): Promise<{
+      success: boolean;
+      message?: string;
+      permissions?: { allow: string[]; deny: string[] };
+      error?: string;
+    }> => this.post('/api/setup/cursor-permissions/custom', { projectPath, permissions }),
+
+    deleteCursorProjectPermissions: (
+      projectPath: string
+    ): Promise<{
+      success: boolean;
+      message?: string;
+      error?: string;
+    }> =>
+      this.httpDelete(
+        `/api/setup/cursor-permissions?projectPath=${encodeURIComponent(projectPath)}`
+      ),
+
+    getCursorExampleConfig: (
+      profileId?: 'strict' | 'development'
+    ): Promise<{
+      success: boolean;
+      profileId?: string;
+      config?: string;
+      error?: string;
+    }> =>
+      this.get(
+        `/api/setup/cursor-permissions/example${profileId ? `?profileId=${profileId}` : ''}`
+      ),
+
+    // Codex CLI methods
+    getCodexStatus: (): Promise<{
+      success: boolean;
+      status?: string;
+      installed?: boolean;
+      method?: string;
+      version?: string;
+      path?: string;
+      auth?: {
+        authenticated: boolean;
+        method: string;
+        hasAuthFile?: boolean;
+        hasOAuthToken?: boolean;
+        hasApiKey?: boolean;
+        hasStoredApiKey?: boolean;
+        hasEnvApiKey?: boolean;
+      };
+      error?: string;
+    }> => this.get('/api/setup/codex-status'),
+
+    installCodex: (): Promise<{
+      success: boolean;
+      message?: string;
+      error?: string;
+    }> => this.post('/api/setup/install-codex'),
+
+    authCodex: (): Promise<{
+      success: boolean;
+      token?: string;
+      requiresManualAuth?: boolean;
+      terminalOpened?: boolean;
+      command?: string;
+      error?: string;
+      message?: string;
+      output?: string;
+    }> => this.post('/api/setup/auth-codex'),
+
+    deauthCodex: (): Promise<{
+      success: boolean;
+      requiresManualDeauth?: boolean;
+      command?: string;
+      message?: string;
+      error?: string;
+    }> => this.post('/api/setup/deauth-codex'),
+
+    verifyCodexAuth: (
+      authMethod: 'cli' | 'api_key',
+      apiKey?: string
+    ): Promise<{
+      success: boolean;
+      authenticated: boolean;
+      error?: string;
+    }> => this.post('/api/setup/verify-codex-auth', { authMethod, apiKey }),
+
+    // OpenCode CLI methods
+    getOpencodeStatus: (): Promise<{
+      success: boolean;
+      status?: string;
+      installed?: boolean;
+      method?: string;
+      version?: string;
+      path?: string;
+      recommendation?: string;
+      installCommands?: {
+        macos?: string;
+        linux?: string;
+        npm?: string;
+      };
+      auth?: {
+        authenticated: boolean;
+        method: string;
+        hasAuthFile?: boolean;
+        hasOAuthToken?: boolean;
+        hasApiKey?: boolean;
+        hasStoredApiKey?: boolean;
+        hasEnvApiKey?: boolean;
+      };
+      error?: string;
+    }> => this.get('/api/setup/opencode-status'),
+
+    // OpenCode Dynamic Model Discovery
+    getOpencodeModels: (
+      refresh?: boolean
+    ): Promise<{
+      success: boolean;
+      models?: Array<{
+        id: string;
+        name: string;
+        modelString: string;
+        provider: string;
+        description: string;
+        supportsTools: boolean;
+        supportsVision: boolean;
+        tier: string;
+        default?: boolean;
+      }>;
+      count?: number;
+      cached?: boolean;
+      error?: string;
+    }> => this.get(`/api/setup/opencode/models${refresh ? '?refresh=true' : ''}`),
+
+    refreshOpencodeModels: (): Promise<{
+      success: boolean;
+      models?: Array<{
+        id: string;
+        name: string;
+        modelString: string;
+        provider: string;
+        description: string;
+        supportsTools: boolean;
+        supportsVision: boolean;
+        tier: string;
+        default?: boolean;
+      }>;
+      count?: number;
+      error?: string;
+    }> => this.post('/api/setup/opencode/models/refresh'),
+
+    getOpencodeProviders: (): Promise<{
+      success: boolean;
+      providers?: Array<{
+        id: string;
+        name: string;
+        authenticated: boolean;
+        authMethod?: 'oauth' | 'api_key';
+      }>;
+      authenticated?: Array<{
+        id: string;
+        name: string;
+        authenticated: boolean;
+        authMethod?: 'oauth' | 'api_key';
+      }>;
+      error?: string;
+    }> => this.get('/api/setup/opencode/providers'),
+
+    clearOpencodeCache: (): Promise<{
+      success: boolean;
+      message?: string;
+      error?: string;
+    }> => this.post('/api/setup/opencode/cache/clear'),
+
+    // Gemini CLI methods
+    getGeminiStatus: (): Promise<{
+      success: boolean;
+      status?: string;
+      installed?: boolean;
+      method?: string;
+      version?: string;
+      path?: string;
+      recommendation?: string;
+      installCommands?: {
+        macos?: string;
+        linux?: string;
+        npm?: string;
+      };
+      auth?: {
+        authenticated: boolean;
+        method: string;
+        hasApiKey?: boolean;
+        hasEnvApiKey?: boolean;
+        error?: string;
+      };
+      loginCommand?: string;
+      installCommand?: string;
+      error?: string;
+    }> => this.get('/api/setup/gemini-status'),
+
+    authGemini: (): Promise<{
+      success: boolean;
+      requiresManualAuth?: boolean;
+      command?: string;
+      message?: string;
+      error?: string;
+    }> => this.post('/api/setup/auth-gemini'),
+
+    deauthGemini: (): Promise<{
+      success: boolean;
+      requiresManualDeauth?: boolean;
+      command?: string;
+      message?: string;
+      error?: string;
+    }> => this.post('/api/setup/deauth-gemini'),
+
+    // Copilot SDK methods
+    getCopilotStatus: (): Promise<{
+      success: boolean;
+      status?: string;
+      installed?: boolean;
+      method?: string;
+      version?: string;
+      path?: string;
+      recommendation?: string;
+      auth?: {
+        authenticated: boolean;
+        method: string;
+        login?: string;
+        host?: string;
+        error?: string;
+      };
+      loginCommand?: string;
+      installCommand?: string;
+      error?: string;
+    }> => this.get('/api/setup/copilot-status'),
+
+    onInstallProgress: (
+      callback: (progress: { cli?: string; data?: string; type?: string }) => void
+    ) => {
+      return this.subscribeToEvent('agent:stream', callback as EventCallback);
+    },
+
+    onAuthProgress: (
+      callback: (progress: { cli?: string; data?: string; type?: string }) => void
+    ) => {
+      return this.subscribeToEvent('agent:stream', callback as EventCallback);
+    },
+  };
+
+  // z.ai API
+  zai = {
+    getStatus: (): Promise<{
+      success: boolean;
+      available: boolean;
+      message?: string;
+      hasApiKey?: boolean;
+      hasEnvApiKey?: boolean;
+      error?: string;
+    }> => this.get('/api/zai/status'),
+
+    getUsage: (): Promise<ZaiUsageResponse> => this.get('/api/zai/usage'),
+
+    configure: (
+      apiToken?: string,
+      apiHost?: string
+    ): Promise<{
+      success: boolean;
+      message?: string;
+      isAvailable?: boolean;
+      error?: string;
+    }> => this.post('/api/zai/configure', { apiToken, apiHost }),
+
+    verify: (
+      apiKey: string
+    ): Promise<{
+      success: boolean;
+      authenticated: boolean;
+      message?: string;
+      error?: string;
+    }> => this.post('/api/zai/verify', { apiKey }),
+  };
+
+  // Features API
+  features: FeaturesAPI & {
+    bulkUpdate: (
+      projectPath: string,
+      featureIds: string[],
+      updates: Partial<Feature>
+    ) => Promise<{
+      success: boolean;
+      updatedCount?: number;
+      failedCount?: number;
+      results?: Array<{ featureId: string; success: boolean; error?: string }>;
+      features?: Feature[];
+      error?: string;
+    }>;
+    bulkDelete: (
+      projectPath: string,
+      featureIds: string[]
+    ) => Promise<{
+      success: boolean;
+      deletedCount?: number;
+      failedCount?: number;
+      results?: Array<{ featureId: string; success: boolean; error?: string }>;
+      error?: string;
+    }>;
+    export: (
+      projectPath: string,
+      options?: {
+        featureIds?: string[];
+        format?: 'json' | 'yaml';
+        includeHistory?: boolean;
+        includePlanSpec?: boolean;
+        category?: string;
+        status?: string;
+        prettyPrint?: boolean;
+        metadata?: Record<string, unknown>;
+      }
+    ) => Promise<{
+      success: boolean;
+      data?: string;
+      format?: 'json' | 'yaml';
+      contentType?: string;
+      filename?: string;
+      error?: string;
+    }>;
+    import: (
+      projectPath: string,
+      data: string,
+      options?: {
+        overwrite?: boolean;
+        preserveBranchInfo?: boolean;
+        targetCategory?: string;
+      }
+    ) => Promise<{
+      success: boolean;
+      importedCount?: number;
+      failedCount?: number;
+      results?: Array<{
+        success: boolean;
+        featureId?: string;
+        importedAt: string;
+        warnings?: string[];
+        errors?: string[];
+        wasOverwritten?: boolean;
+      }>;
+      error?: string;
+    }>;
+    checkConflicts: (
+      projectPath: string,
+      data: string
+    ) => Promise<{
+      success: boolean;
+      hasConflicts?: boolean;
+      conflicts?: Array<{
+        featureId: string;
+        title?: string;
+        existingTitle?: string;
+        hasConflict: boolean;
+      }>;
+      totalFeatures?: number;
+      conflictCount?: number;
+      error?: string;
+    }>;
+  } = {
+    getAll: (projectPath: string) =>
+      this.get(`/api/features/list?projectPath=${encodeURIComponent(projectPath)}`),
+    get: (projectPath: string, featureId: string) =>
+      this.post('/api/features/get', { projectPath, featureId }),
+    create: (projectPath: string, feature: Feature) =>
+      this.post('/api/features/create', { projectPath, feature }),
+    update: (
+      projectPath: string,
+      featureId: string,
+      updates: Partial<Feature>,
+      descriptionHistorySource?: 'enhance' | 'edit',
+      enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer',
+      preEnhancementDescription?: string
+    ) =>
+      this.post('/api/features/update', {
+        projectPath,
+        featureId,
+        updates,
+        descriptionHistorySource,
+        enhancementMode,
+        preEnhancementDescription,
+      }),
+    delete: (projectPath: string, featureId: string) =>
+      this.post('/api/features/delete', { projectPath, featureId }),
+    getAgentOutput: (projectPath: string, featureId: string) =>
+      this.post('/api/features/agent-output', { projectPath, featureId }),
+    generateTitle: (description: string, projectPath?: string) =>
+      this.post('/api/features/generate-title', { description, projectPath }),
+    bulkUpdate: (projectPath: string, featureIds: string[], updates: Partial<Feature>) =>
+      this.post('/api/features/bulk-update', { projectPath, featureIds, updates }),
+    bulkDelete: (projectPath: string, featureIds: string[]) =>
+      this.post('/api/features/bulk-delete', { projectPath, featureIds }),
+    export: (
+      projectPath: string,
+      options?: {
+        featureIds?: string[];
+        format?: 'json' | 'yaml';
+        includeHistory?: boolean;
+        includePlanSpec?: boolean;
+        category?: string;
+        status?: string;
+        prettyPrint?: boolean;
+        metadata?: Record<string, unknown>;
+      }
+    ): Promise<{
+      success: boolean;
+      data?: string;
+      format?: 'json' | 'yaml';
+      contentType?: string;
+      filename?: string;
+      error?: string;
+    }> => this.post('/api/features/export', { projectPath, ...options }),
+    import: (
+      projectPath: string,
+      data: string,
+      options?: {
+        overwrite?: boolean;
+        preserveBranchInfo?: boolean;
+        targetCategory?: string;
+      }
+    ): Promise<{
+      success: boolean;
+      importedCount?: number;
+      failedCount?: number;
+      results?: Array<{
+        success: boolean;
+        featureId?: string;
+        importedAt: string;
+        warnings?: string[];
+        errors?: string[];
+        wasOverwritten?: boolean;
+      }>;
+      error?: string;
+    }> => this.post('/api/features/import', { projectPath, data, ...options }),
+    checkConflicts: (
+      projectPath: string,
+      data: string
+    ): Promise<{
+      success: boolean;
+      hasConflicts?: boolean;
+      conflicts?: Array<{
+        featureId: string;
+        title?: string;
+        existingTitle?: string;
+        hasConflict: boolean;
+      }>;
+      totalFeatures?: number;
+      conflictCount?: number;
+      error?: string;
+    }> => this.post('/api/features/check-conflicts', { projectPath, data }),
+    getOrphaned: (
+      projectPath: string
+    ): Promise<{
+      success: boolean;
+      orphanedFeatures?: Array<{ feature: Feature; missingBranch: string }>;
+      error?: string;
+    }> => this.post('/api/features/orphaned', { projectPath }),
+    resolveOrphaned: (
+      projectPath: string,
+      featureId: string,
+      action: 'delete' | 'create-worktree' | 'move-to-branch',
+      targetBranch?: string | null
+    ): Promise<{
+      success: boolean;
+      action?: string;
+      worktreePath?: string;
+      branchName?: string;
+      error?: string;
+    }> =>
+      this.post('/api/features/orphaned/resolve', { projectPath, featureId, action, targetBranch }),
+    bulkResolveOrphaned: (
+      projectPath: string,
+      featureIds: string[],
+      action: 'delete' | 'create-worktree' | 'move-to-branch',
+      targetBranch?: string | null
+    ): Promise<{
+      success: boolean;
+      resolvedCount?: number;
+      failedCount?: number;
+      results?: Array<{ featureId: string; success: boolean; action?: string; error?: string }>;
+      error?: string;
+    }> =>
+      this.post('/api/features/orphaned/bulk-resolve', {
+        projectPath,
+        featureIds,
+        action,
+        targetBranch,
+      }),
+  };
+
+  // Auto Mode API
+  autoMode: AutoModeAPI = {
+    start: (projectPath: string, branchName?: string | null, maxConcurrency?: number) =>
+      this.post('/api/auto-mode/start', { projectPath, branchName, maxConcurrency }),
+    stop: (projectPath: string, branchName?: string | null) =>
+      this.post('/api/auto-mode/stop', { projectPath, branchName }),
+    stopFeature: (featureId: string) => this.post('/api/auto-mode/stop-feature', { featureId }),
+    status: (projectPath?: string, branchName?: string | null) =>
+      this.post('/api/auto-mode/status', { projectPath, branchName }),
+    runFeature: (
+      projectPath: string,
+      featureId: string,
+      useWorktrees?: boolean,
+      worktreePath?: string
+    ) =>
+      this.post('/api/auto-mode/run-feature', {
+        projectPath,
+        featureId,
+        useWorktrees,
+        worktreePath,
+      }),
+    verifyFeature: (projectPath: string, featureId: string) =>
+      this.post('/api/auto-mode/verify-feature', { projectPath, featureId }),
+    resumeFeature: (projectPath: string, featureId: string, useWorktrees?: boolean) =>
+      this.post('/api/auto-mode/resume-feature', {
+        projectPath,
+        featureId,
+        useWorktrees,
+      }),
+    contextExists: (projectPath: string, featureId: string) =>
+      this.post('/api/auto-mode/context-exists', { projectPath, featureId }),
+    analyzeProject: (projectPath: string) =>
+      this.post('/api/auto-mode/analyze-project', { projectPath }),
+    followUpFeature: (
+      projectPath: string,
+      featureId: string,
+      prompt: string,
+      imagePaths?: string[],
+      useWorktrees?: boolean
+    ) =>
+      this.post('/api/auto-mode/follow-up-feature', {
+        projectPath,
+        featureId,
+        prompt,
+        imagePaths,
+        useWorktrees,
+      }),
+    commitFeature: (projectPath: string, featureId: string, worktreePath?: string) =>
+      this.post('/api/auto-mode/commit-feature', {
+        projectPath,
+        featureId,
+        worktreePath,
+      }),
+    approvePlan: (
+      projectPath: string,
+      featureId: string,
+      approved: boolean,
+      editedPlan?: string,
+      feedback?: string
+    ) =>
+      this.post('/api/auto-mode/approve-plan', {
+        projectPath,
+        featureId,
+        approved,
+        editedPlan,
+        feedback,
+      }),
+    resumeInterrupted: (projectPath: string) =>
+      this.post('/api/auto-mode/resume-interrupted', { projectPath }),
+    onEvent: (callback: (event: AutoModeEvent) => void) => {
+      return this.subscribeToEvent('auto-mode:event', callback as EventCallback);
+    },
+  };
+
+  // Enhance Prompt API
+  enhancePrompt = {
+    enhance: (
+      originalText: string,
+      enhancementMode: string,
+      model?: string,
+      thinkingLevel?: string,
+      projectPath?: string
+    ): Promise<EnhancePromptResult> =>
+      this.post('/api/enhance-prompt', {
+        originalText,
+        enhancementMode,
+        model,
+        thinkingLevel,
+        projectPath,
+      }),
+  };
+
+  // Worktree API
+  worktree: WorktreeAPI = {
+    mergeFeature: (
+      projectPath: string,
+      branchName: string,
+      worktreePath: string,
+      targetBranch?: string,
+      options?: object
+    ) =>
+      this.post('/api/worktree/merge', {
+        projectPath,
+        branchName,
+        worktreePath,
+        targetBranch,
+        options,
+      }),
+    getInfo: (projectPath: string, featureId: string) =>
+      this.post('/api/worktree/info', { projectPath, featureId }),
+    getStatus: (projectPath: string, featureId: string) =>
+      this.post('/api/worktree/status', { projectPath, featureId }),
+    list: (projectPath: string) => this.post('/api/worktree/list', { projectPath }),
+    listAll: (projectPath: string, includeDetails?: boolean, forceRefreshGitHub?: boolean) =>
+      this.post('/api/worktree/list', { projectPath, includeDetails, forceRefreshGitHub }),
+    create: (projectPath: string, branchName: string, baseBranch?: string) =>
+      this.post('/api/worktree/create', {
+        projectPath,
+        branchName,
+        baseBranch,
+      }),
+    delete: (projectPath: string, worktreePath: string, deleteBranch?: boolean) =>
+      this.post('/api/worktree/delete', {
+        projectPath,
+        worktreePath,
+        deleteBranch,
+      }),
+    commit: (worktreePath: string, message: string, files?: string[]) =>
+      this.post('/api/worktree/commit', { worktreePath, message, files }),
+    generateCommitMessage: (
+      worktreePath: string,
+      model?: string,
+      thinkingLevel?: string,
+      providerId?: string
+    ) =>
+      this.post('/api/worktree/generate-commit-message', {
+        worktreePath,
+        model,
+        thinkingLevel,
+        providerId,
+      }),
+    generatePRDescription: (
+      worktreePath: string,
+      baseBranch?: string,
+      model?: string,
+      thinkingLevel?: string,
+      providerId?: string
+    ) =>
+      this.post('/api/worktree/generate-pr-description', {
+        worktreePath,
+        baseBranch,
+        model,
+        thinkingLevel,
+        providerId,
+      }),
+    push: (worktreePath: string, force?: boolean, remote?: string, autoResolve?: boolean) =>
+      this.post('/api/worktree/push', { worktreePath, force, remote, autoResolve }),
+    sync: (worktreePath: string, remote?: string) =>
+      this.post('/api/worktree/sync', { worktreePath, remote }),
+    setTracking: (worktreePath: string, remote: string, branch?: string) =>
+      this.post('/api/worktree/set-tracking', { worktreePath, remote, branch }),
+    createPR: (worktreePath: string, options?: CreatePROptions) =>
+      this.post('/api/worktree/create-pr', { worktreePath, ...options }),
+    updatePRNumber: (worktreePath: string, prNumber: number, projectPath?: string) =>
+      this.post('/api/worktree/update-pr-number', { worktreePath, prNumber, projectPath }),
+    getDiffs: (projectPath: string, featureId: string) =>
+      this.post('/api/worktree/diffs', { projectPath, featureId }),
+    getFileDiff: (projectPath: string, featureId: string, filePath: string) =>
+      this.post('/api/worktree/file-diff', {
+        projectPath,
+        featureId,
+        filePath,
+      }),
+    stageFiles: (worktreePath: string, files: string[], operation: 'stage' | 'unstage') =>
+      this.post('/api/worktree/stage-files', { worktreePath, files, operation }),
+    pull: (worktreePath: string, remote?: string, stashIfNeeded?: boolean, remoteBranch?: string) =>
+      this.post('/api/worktree/pull', { worktreePath, remote, remoteBranch, stashIfNeeded }),
+    checkoutBranch: (
+      worktreePath: string,
+      branchName: string,
+      baseBranch?: string,
+      stashChanges?: boolean,
+      includeUntracked?: boolean
+    ) =>
+      this.post('/api/worktree/checkout-branch', {
+        worktreePath,
+        branchName,
+        baseBranch,
+        stashChanges,
+        includeUntracked,
+      }),
+    checkChanges: (worktreePath: string) =>
+      this.post('/api/worktree/check-changes', { worktreePath }),
+    listBranches: (worktreePath: string, includeRemote?: boolean, signal?: AbortSignal) =>
+      this.post('/api/worktree/list-branches', { worktreePath, includeRemote }, signal),
+    switchBranch: (worktreePath: string, branchName: string) =>
+      this.post('/api/worktree/switch-branch', { worktreePath, branchName }),
+    listRemotes: (worktreePath: string) =>
+      this.post('/api/worktree/list-remotes', { worktreePath }),
+    addRemote: (worktreePath: string, remoteName: string, remoteUrl: string) =>
+      this.post('/api/worktree/add-remote', { worktreePath, remoteName, remoteUrl }),
+    openInEditor: (worktreePath: string, editorCommand?: string) =>
+      this.post('/api/worktree/open-in-editor', { worktreePath, editorCommand }),
+    getDefaultEditor: () => this.get('/api/worktree/default-editor'),
+    getAvailableEditors: () => this.get('/api/worktree/available-editors'),
+    refreshEditors: () => this.post('/api/worktree/refresh-editors', {}),
+    getAvailableTerminals: () => this.get('/api/worktree/available-terminals'),
+    getDefaultTerminal: () => this.get('/api/worktree/default-terminal'),
+    refreshTerminals: () => this.post('/api/worktree/refresh-terminals', {}),
+    openInExternalTerminal: (worktreePath: string, terminalId?: string) =>
+      this.post('/api/worktree/open-in-external-terminal', { worktreePath, terminalId }),
+    initGit: (projectPath: string) => this.post('/api/worktree/init-git', { projectPath }),
+    startDevServer: (projectPath: string, worktreePath: string) =>
+      this.post('/api/worktree/start-dev', { projectPath, worktreePath }),
+    stopDevServer: (worktreePath: string) => this.post('/api/worktree/stop-dev', { worktreePath }),
+    listDevServers: () => this.post('/api/worktree/list-dev-servers', {}),
+    getDevServerLogs: (worktreePath: string): Promise<DevServerLogsResponse> =>
+      this.get(`/api/worktree/dev-server-logs?worktreePath=${encodeURIComponent(worktreePath)}`),
+    onDevServerLogEvent: (callback: (event: DevServerLogEvent) => void) => {
+      const unsub0 = this.subscribeToEvent('dev-server:starting', (payload) =>
+        callback({ type: 'dev-server:starting', payload: payload as DevServerStartingEvent })
+      );
+      const unsub1 = this.subscribeToEvent('dev-server:started', (payload) =>
+        callback({ type: 'dev-server:started', payload: payload as DevServerStartedEvent })
+      );
+      const unsub2 = this.subscribeToEvent('dev-server:output', (payload) =>
+        callback({ type: 'dev-server:output', payload: payload as DevServerOutputEvent })
+      );
+      const unsub3 = this.subscribeToEvent('dev-server:stopped', (payload) =>
+        callback({ type: 'dev-server:stopped', payload: payload as DevServerStoppedEvent })
+      );
+      const unsub4 = this.subscribeToEvent('dev-server:url-detected', (payload) =>
+        callback({ type: 'dev-server:url-detected', payload: payload as DevServerUrlDetectedEvent })
+      );
+      return () => {
+        unsub0();
+        unsub1();
+        unsub2();
+        unsub3();
+        unsub4();
+      };
+    },
+    getPRInfo: (worktreePath: string, branchName: string) =>
+      this.post('/api/worktree/pr-info', { worktreePath, branchName }),
+    // Init script methods
+    getInitScript: (projectPath: string) =>
+      this.get(`/api/worktree/init-script?projectPath=${encodeURIComponent(projectPath)}`),
+    setInitScript: (projectPath: string, content: string) =>
+      this.put('/api/worktree/init-script', { projectPath, content }),
+    deleteInitScript: (projectPath: string) =>
+      this.httpDelete('/api/worktree/init-script', { projectPath }),
+    runInitScript: (projectPath: string, worktreePath: string, branch: string) =>
+      this.post('/api/worktree/run-init-script', { projectPath, worktreePath, branch }),
+    discardChanges: (worktreePath: string, files?: string[]) =>
+      this.post('/api/worktree/discard-changes', { worktreePath, files }),
+    onInitScriptEvent: (
+      callback: (event: {
+        type: 'worktree:init-started' | 'worktree:init-output' | 'worktree:init-completed';
+        payload: unknown;
+      }) => void
+    ) => {
+      // Note: subscribeToEvent callback receives (payload) not (_, payload)
+      const unsub1 = this.subscribeToEvent('worktree:init-started', (payload) =>
+        callback({ type: 'worktree:init-started', payload })
+      );
+      const unsub2 = this.subscribeToEvent('worktree:init-output', (payload) =>
+        callback({ type: 'worktree:init-output', payload })
+      );
+      const unsub3 = this.subscribeToEvent('worktree:init-completed', (payload) =>
+        callback({ type: 'worktree:init-completed', payload })
+      );
+      return () => {
+        unsub1();
+        unsub2();
+        unsub3();
+      };
+    },
+    // Test runner methods
+    startTests: (worktreePath: string, options?: { projectPath?: string; testFile?: string }) =>
+      this.post('/api/worktree/start-tests', { worktreePath, ...options }),
+    stopTests: (sessionId: string) => this.post('/api/worktree/stop-tests', { sessionId }),
+    getCommitLog: (worktreePath: string, limit?: number) =>
+      this.post('/api/worktree/commit-log', { worktreePath, limit }),
+    stashPush: (worktreePath: string, message?: string, files?: string[]) =>
+      this.post('/api/worktree/stash-push', { worktreePath, message, files }),
+    stashList: (worktreePath: string) => this.post('/api/worktree/stash-list', { worktreePath }),
+    stashApply: (worktreePath: string, stashIndex: number, pop?: boolean) =>
+      this.post('/api/worktree/stash-apply', { worktreePath, stashIndex, pop }),
+    stashDrop: (worktreePath: string, stashIndex: number) =>
+      this.post('/api/worktree/stash-drop', { worktreePath, stashIndex }),
+    cherryPick: (worktreePath: string, commitHashes: string[], options?: { noCommit?: boolean }) =>
+      this.post('/api/worktree/cherry-pick', { worktreePath, commitHashes, options }),
+    rebase: (worktreePath: string, ontoBranch: string, remote?: string) =>
+      this.post('/api/worktree/rebase', { worktreePath, ontoBranch, remote }),
+    abortOperation: (worktreePath: string) =>
+      this.post('/api/worktree/abort-operation', { worktreePath }),
+    continueOperation: (worktreePath: string) =>
+      this.post('/api/worktree/continue-operation', { worktreePath }),
+    getBranchCommitLog: (worktreePath: string, branchName?: string, limit?: number) =>
+      this.post('/api/worktree/branch-commit-log', { worktreePath, branchName, limit }),
+    getTestLogs: (worktreePath?: string, sessionId?: string): Promise<TestLogsResponse> => {
+      const params = new URLSearchParams();
+      if (worktreePath) params.append('worktreePath', worktreePath);
+      if (sessionId) params.append('sessionId', sessionId);
+      return this.get(`/api/worktree/test-logs?${params.toString()}`);
+    },
+    onTestRunnerEvent: (callback: (event: TestRunnerEvent) => void) => {
+      const unsub1 = this.subscribeToEvent('test-runner:started', (payload) =>
+        callback({ type: 'test-runner:started', payload: payload as TestRunnerStartedEvent })
+      );
+      const unsub2 = this.subscribeToEvent('test-runner:output', (payload) =>
+        callback({ type: 'test-runner:output', payload: payload as TestRunnerOutputEvent })
+      );
+      const unsub3 = this.subscribeToEvent('test-runner:completed', (payload) =>
+        callback({ type: 'test-runner:completed', payload: payload as TestRunnerCompletedEvent })
+      );
+      return () => {
+        unsub1();
+        unsub2();
+        unsub3();
+      };
+    },
+  };
+
+  // Git API
+  git: GitAPI = {
+    getDiffs: (projectPath: string) => this.post('/api/git/diffs', { projectPath }),
+    getFileDiff: (projectPath: string, filePath: string) =>
+      this.post('/api/git/file-diff', { projectPath, filePath }),
+    stageFiles: (projectPath: string, files: string[], operation: 'stage' | 'unstage') =>
+      this.post('/api/git/stage-files', { projectPath, files, operation }),
+    getDetails: (projectPath: string, filePath?: string) =>
+      this.post('/api/git/details', { projectPath, filePath }),
+    getEnhancedStatus: (projectPath: string) =>
+      this.post('/api/git/enhanced-status', { projectPath }),
+  };
+
+  // Spec Regeneration API
+  specRegeneration: SpecRegenerationAPI = {
+    create: (
+      projectPath: string,
+      projectOverview: string,
+      generateFeatures?: boolean,
+      analyzeProject?: boolean,
+      maxFeatures?: number
+    ) =>
+      this.post('/api/spec-regeneration/create', {
+        projectPath,
+        projectOverview,
+        generateFeatures,
+        analyzeProject,
+        maxFeatures,
+      }),
+    generate: (
+      projectPath: string,
+      projectDefinition: string,
+      generateFeatures?: boolean,
+      analyzeProject?: boolean,
+      maxFeatures?: number
+    ) =>
+      this.post('/api/spec-regeneration/generate', {
+        projectPath,
+        projectDefinition,
+        generateFeatures,
+        analyzeProject,
+        maxFeatures,
+      }),
+    generateFeatures: (projectPath: string, maxFeatures?: number) =>
+      this.post('/api/spec-regeneration/generate-features', {
+        projectPath,
+        maxFeatures,
+      }),
+    sync: (projectPath: string) => this.post('/api/spec-regeneration/sync', { projectPath }),
+    stop: (projectPath?: string) => this.post('/api/spec-regeneration/stop', { projectPath }),
+    status: (projectPath?: string) =>
+      this.get(
+        projectPath
+          ? `/api/spec-regeneration/status?projectPath=${encodeURIComponent(projectPath)}`
+          : '/api/spec-regeneration/status'
+      ),
+    onEvent: (callback: (event: SpecRegenerationEvent) => void) => {
+      return this.subscribeToEvent('spec-regeneration:event', callback as EventCallback);
+    },
+  };
+
+  // Running Agents API
+  runningAgents = {
+    getAll: (): Promise<{
+      success: boolean;
+      runningAgents?: Array<{
+        featureId: string;
+        projectPath: string;
+        projectName: string;
+        isAutoMode: boolean;
+      }>;
+      totalCount?: number;
+      error?: string;
+    }> => this.get('/api/running-agents'),
+  };
+
+  // GitHub API
+  github: GitHubAPI = {
+    checkRemote: (projectPath: string) => this.post('/api/github/check-remote', { projectPath }),
+    listIssues: (projectPath: string) => this.post('/api/github/issues', { projectPath }),
+    listPRs: (projectPath: string) => this.post('/api/github/prs', { projectPath }),
+    validateIssue: (
+      projectPath: string,
+      issue: IssueValidationInput,
+      model?: ModelId,
+      thinkingLevel?: ThinkingLevel,
+      reasoningEffort?: ReasoningEffort,
+      providerId?: string
+    ) =>
+      this.post('/api/github/validate-issue', {
+        projectPath,
+        ...issue,
+        model,
+        thinkingLevel,
+        reasoningEffort,
+        providerId,
+      }),
+    getValidationStatus: (projectPath: string, issueNumber?: number) =>
+      this.post('/api/github/validation-status', { projectPath, issueNumber }),
+    stopValidation: (projectPath: string, issueNumber: number) =>
+      this.post('/api/github/validation-stop', { projectPath, issueNumber }),
+    getValidations: (projectPath: string, issueNumber?: number) =>
+      this.post('/api/github/validations', { projectPath, issueNumber }),
+    markValidationViewed: (projectPath: string, issueNumber: number) =>
+      this.post('/api/github/validation-mark-viewed', { projectPath, issueNumber }),
+    onValidationEvent: (callback: (event: IssueValidationEvent) => void) =>
+      this.subscribeToEvent('issue-validation:event', callback as EventCallback),
+    getIssueComments: (projectPath: string, issueNumber: number, cursor?: string) =>
+      this.post('/api/github/issue-comments', { projectPath, issueNumber, cursor }),
+    getPRReviewComments: (projectPath: string, prNumber: number) =>
+      this.post('/api/github/pr-review-comments', { projectPath, prNumber }),
+    resolveReviewThread: (projectPath: string, threadId: string, resolve: boolean) =>
+      this.post('/api/github/resolve-pr-comment', { projectPath, threadId, resolve }),
+  };
+
+  // Workspace API
+  workspace = {
+    getConfig: (): Promise<{
+      success: boolean;
+      configured: boolean;
+      workspaceDir?: string;
+      defaultDir?: string | null;
+      error?: string;
+    }> => this.get('/api/workspace/config'),
+
+    getDirectories: (): Promise<{
+      success: boolean;
+      directories?: Array<{ name: string; path: string }>;
+      error?: string;
+    }> => this.get('/api/workspace/directories'),
+  };
+
+  // Agent API
+  agent = {
+    start: (
+      sessionId: string,
+      workingDirectory?: string
+    ): Promise<{
+      success: boolean;
+      messages?: Message[];
+      error?: string;
+    }> => this.post('/api/agent/start', { sessionId, workingDirectory }),
+
+    send: (
+      sessionId: string,
+      message: string,
+      workingDirectory?: string,
+      imagePaths?: string[],
+      model?: string,
+      thinkingLevel?: string
+    ): Promise<{ success: boolean; error?: string }> =>
+      this.post('/api/agent/send', {
+        sessionId,
+        message,
+        workingDirectory,
+        imagePaths,
+        model,
+        thinkingLevel,
+      }),
+
+    getHistory: (
+      sessionId: string
+    ): Promise<{
+      success: boolean;
+      messages?: Message[];
+      isRunning?: boolean;
+      error?: string;
+    }> => this.post('/api/agent/history', { sessionId }),
+
+    stop: (sessionId: string): Promise<{ success: boolean; error?: string }> =>
+      this.post('/api/agent/stop', { sessionId }),
+
+    clear: (sessionId: string): Promise<{ success: boolean; error?: string }> =>
+      this.post('/api/agent/clear', { sessionId }),
+
+    onStream: (callback: (data: unknown) => void): (() => void) => {
+      return this.subscribeToEvent('agent:stream', callback as EventCallback);
+    },
+
+    // Queue management
+    queueAdd: (
+      sessionId: string,
+      message: string,
+      imagePaths?: string[],
+      model?: string,
+      thinkingLevel?: string
+    ): Promise<{
+      success: boolean;
+      queuedPrompt?: {
+        id: string;
+        message: string;
+        imagePaths?: string[];
+        model?: string;
+        thinkingLevel?: string;
+        addedAt: string;
+      };
+      error?: string;
+    }> =>
+      this.post('/api/agent/queue/add', { sessionId, message, imagePaths, model, thinkingLevel }),
+
+    queueList: (
+      sessionId: string
+    ): Promise<{
+      success: boolean;
+      queue?: Array<{
+        id: string;
+        message: string;
+        imagePaths?: string[];
+        model?: string;
+        thinkingLevel?: string;
+        addedAt: string;
+      }>;
+      error?: string;
+    }> => this.post('/api/agent/queue/list', { sessionId }),
+
+    queueRemove: (
+      sessionId: string,
+      promptId: string
+    ): Promise<{ success: boolean; error?: string }> =>
+      this.post('/api/agent/queue/remove', { sessionId, promptId }),
+
+    queueClear: (sessionId: string): Promise<{ success: boolean; error?: string }> =>
+      this.post('/api/agent/queue/clear', { sessionId }),
+  };
+
+  // Templates API
+  templates = {
+    clone: (
+      repoUrl: string,
+      projectName: string,
+      parentDir: string
+    ): Promise<{
+      success: boolean;
+      projectPath?: string;
+      projectName?: string;
+      error?: string;
+    }> => this.post('/api/templates/clone', { repoUrl, projectName, parentDir }),
+  };
+
+  // Settings API - persistent file-based settings
+  settings = {
+    // Get settings status (check if migration needed)
+    getStatus: (): Promise<{
+      success: boolean;
+      hasGlobalSettings: boolean;
+      hasCredentials: boolean;
+      dataDir: string;
+      needsMigration: boolean;
+    }> => this.get('/api/settings/status'),
+
+    // Global settings
+    getGlobal: (): Promise<{
+      success: boolean;
+      settings?: {
+        version: number;
+        theme: string;
+        sidebarOpen: boolean;
+        chatHistoryOpen: boolean;
+        maxConcurrency: number;
+        defaultSkipTests: boolean;
+        enableDependencyBlocking: boolean;
+        useWorktrees: boolean;
+        defaultPlanningMode: string;
+        defaultRequirePlanApproval: boolean;
+        muteDoneSound: boolean;
+        enhancementModel: string;
+        keyboardShortcuts: Record<string, string>;
+        projects: unknown[];
+        trashedProjects: unknown[];
+        projectHistory: string[];
+        projectHistoryIndex: number;
+        lastProjectDir?: string;
+        recentFolders: string[];
+        worktreePanelCollapsed: boolean;
+        lastSelectedSessionByProject: Record<string, string>;
+        mcpServers?: Array<{
+          id: string;
+          name: string;
+          description?: string;
+          type?: 'stdio' | 'sse' | 'http';
+          command?: string;
+          args?: string[];
+          env?: Record<string, string>;
+          url?: string;
+          headers?: Record<string, string>;
+          enabled?: boolean;
+        }>;
+        eventHooks?: Array<{
+          id: string;
+          trigger: string;
+          enabled: boolean;
+          action: Record<string, unknown>;
+          name?: string;
+        }>;
+        ntfyEndpoints?: Array<{
+          id: string;
+          name: string;
+          serverUrl: string;
+          topic: string;
+          authType: string;
+          enabled: boolean;
+        }>;
+      };
+      error?: string;
+    }> => this.get('/api/settings/global'),
+
+    updateGlobal: (
+      updates: Record<string, unknown>
+    ): Promise<{
+      success: boolean;
+      settings?: Record<string, unknown>;
+      error?: string;
+    }> => this.put('/api/settings/global', updates),
+
+    // Credentials (masked for security)
+    getCredentials: (): Promise<{
+      success: boolean;
+      credentials?: {
+        anthropic: { configured: boolean; masked: string };
+        google: { configured: boolean; masked: string };
+        openai: { configured: boolean; masked: string };
+      };
+      error?: string;
+    }> => this.get('/api/settings/credentials'),
+
+    updateCredentials: (updates: {
+      apiKeys?: { anthropic?: string; google?: string; openai?: string };
+    }): Promise<{
+      success: boolean;
+      credentials?: {
+        anthropic: { configured: boolean; masked: string };
+        google: { configured: boolean; masked: string };
+        openai: { configured: boolean; masked: string };
+      };
+      error?: string;
+    }> => this.put('/api/settings/credentials', updates),
+
+    // Project settings
+    getProject: (
+      projectPath: string
+    ): Promise<{
+      success: boolean;
+      settings?: {
+        version: number;
+        theme?: string;
+        useWorktrees?: boolean;
+        currentWorktree?: { path: string | null; branch: string };
+        worktrees?: Array<{
+          path: string;
+          branch: string;
+          isMain: boolean;
+          hasChanges?: boolean;
+          changedFilesCount?: number;
+        }>;
+        boardBackground?: {
+          imagePath: string | null;
+          imageVersion?: number;
+          cardOpacity: number;
+          columnOpacity: number;
+          columnBorderEnabled: boolean;
+          cardGlassmorphism: boolean;
+          cardBorderEnabled: boolean;
+          cardBorderOpacity: number;
+          hideScrollbar: boolean;
+        };
+        worktreePanelVisible?: boolean;
+        showInitScriptIndicator?: boolean;
+        defaultDeleteBranchWithWorktree?: boolean;
+        autoDismissInitScriptIndicator?: boolean;
+        worktreeCopyFiles?: string[];
+        pinnedWorktreesCount?: number;
+        worktreeDropdownThreshold?: number;
+        alwaysUseWorktreeDropdown?: boolean;
+        lastSelectedSessionId?: string;
+        testCommand?: string;
+      };
+      error?: string;
+    }> => this.post('/api/settings/project', { projectPath }),
+
+    updateProject: (
+      projectPath: string,
+      updates: Record<string, unknown>
+    ): Promise<{
+      success: boolean;
+      settings?: Record<string, unknown>;
+      error?: string;
+    }> => this.put('/api/settings/project', { projectPath, updates }),
+
+    // Migration from localStorage
+    migrate: (data: {
+      'automaker-storage'?: string;
+      'automaker-setup'?: string;
+      'worktree-panel-collapsed'?: string;
+      'file-browser-recent-folders'?: string;
+      'automaker:lastProjectDir'?: string;
+    }): Promise<{
+      success: boolean;
+      migratedGlobalSettings: boolean;
+      migratedCredentials: boolean;
+      migratedProjectCount: number;
+      errors: string[];
+    }> => this.post('/api/settings/migrate', { data }),
+
+    // Filesystem agents discovery (read-only)
+    discoverAgents: (
+      projectPath?: string,
+      sources?: Array<'user' | 'project'>
+    ): Promise<{
+      success: boolean;
+      agents?: Array<{
+        name: string;
+        definition: {
+          description: string;
+          prompt: string;
+          tools?: string[];
+          model?: 'sonnet' | 'opus' | 'haiku' | 'inherit';
+        };
+        source: 'user' | 'project';
+        filePath: string;
+      }>;
+      error?: string;
+    }> => this.post('/api/settings/agents/discover', { projectPath, sources }),
+  };
+
+  // Sessions API
+  sessions = {
+    list: (
+      includeArchived?: boolean
+    ): Promise<{
+      success: boolean;
+      sessions?: SessionListItem[];
+      error?: string;
+    }> => this.get(`/api/sessions?includeArchived=${includeArchived || false}`),
+
+    create: (
+      name: string,
+      projectPath: string,
+      workingDirectory?: string
+    ): Promise<{
+      success: boolean;
+      session?: {
+        id: string;
+        name: string;
+        projectPath: string;
+        workingDirectory?: string;
+        createdAt: string;
+        updatedAt: string;
+      };
+      error?: string;
+    }> => this.post('/api/sessions', { name, projectPath, workingDirectory }),
+
+    update: (
+      sessionId: string,
+      name?: string,
+      tags?: string[]
+    ): Promise<{ success: boolean; error?: string }> =>
+      this.put(`/api/sessions/${sessionId}`, { name, tags }),
+
+    archive: (sessionId: string): Promise<{ success: boolean; error?: string }> =>
+      this.post(`/api/sessions/${sessionId}/archive`, {}),
+
+    unarchive: (sessionId: string): Promise<{ success: boolean; error?: string }> =>
+      this.post(`/api/sessions/${sessionId}/unarchive`, {}),
+
+    delete: (sessionId: string): Promise<{ success: boolean; error?: string }> =>
+      this.httpDelete(`/api/sessions/${sessionId}`),
+  };
+
+  // Claude API
+  claude = {
+    getUsage: (): Promise<ClaudeUsageResponse> => this.get('/api/claude/usage'),
+  };
+
+  // Codex API
+  codex = {
+    getUsage: (): Promise<CodexUsageResponse> => this.get('/api/codex/usage'),
+    getModels: (
+      refresh = false
+    ): Promise<{
+      success: boolean;
+      models?: Array<{
+        id: string;
+        label: string;
+        description: string;
+        hasThinking: boolean;
+        supportsVision: boolean;
+        tier: 'premium' | 'standard' | 'basic';
+        isDefault: boolean;
+      }>;
+      cachedAt?: number;
+      error?: string;
+    }> => {
+      const url = `/api/codex/models${refresh ? '?refresh=true' : ''}`;
+      return this.get(url);
+    },
+  };
+
+  // Gemini API
+  gemini = {
+    getUsage: (): Promise<GeminiUsage> => this.get('/api/gemini/usage'),
+  };
+
+  // Context API
+  context = {
+    describeImage: (
+      imagePath: string
+    ): Promise<{
+      success: boolean;
+      description?: string;
+      error?: string;
+    }> => this.post('/api/context/describe-image', { imagePath }),
+
+    describeFile: (
+      filePath: string
+    ): Promise<{
+      success: boolean;
+      description?: string;
+      error?: string;
+    }> => this.post('/api/context/describe-file', { filePath }),
+  };
+
+  // Backlog Plan API
+  backlogPlan = {
+    generate: (
+      projectPath: string,
+      prompt: string,
+      model?: string,
+      branchName?: string
+    ): Promise<{ success: boolean; error?: string }> =>
+      this.post('/api/backlog-plan/generate', { projectPath, prompt, model, branchName }),
+
+    stop: (): Promise<{ success: boolean; error?: string }> =>
+      this.post('/api/backlog-plan/stop', {}),
+
+    status: (
+      projectPath: string
+    ): Promise<{
+      success: boolean;
+      isRunning?: boolean;
+      savedPlan?: {
+        savedAt: string;
+        prompt: string;
+        model?: string;
+        result: {
+          changes: Array<{
+            type: 'add' | 'update' | 'delete';
+            featureId?: string;
+            feature?: Record<string, unknown>;
+            reason: string;
+          }>;
+          summary: string;
+          dependencyUpdates: Array<{
+            featureId: string;
+            removedDependencies: string[];
+            addedDependencies: string[];
+          }>;
+        };
+      } | null;
+      error?: string;
+    }> => this.get(`/api/backlog-plan/status?projectPath=${encodeURIComponent(projectPath)}`),
+
+    apply: (
+      projectPath: string,
+      plan: {
+        changes: Array<{
+          type: 'add' | 'update' | 'delete';
+          featureId?: string;
+          feature?: Record<string, unknown>;
+          reason: string;
+        }>;
+        summary: string;
+        dependencyUpdates: Array<{
+          featureId: string;
+          removedDependencies: string[];
+          addedDependencies: string[];
+        }>;
+      },
+      branchName?: string
+    ): Promise<{ success: boolean; appliedChanges?: string[]; error?: string }> =>
+      this.post('/api/backlog-plan/apply', { projectPath, plan, branchName }),
+
+    clear: (projectPath: string): Promise<{ success: boolean; error?: string }> =>
+      this.post('/api/backlog-plan/clear', { projectPath }),
+
+    onEvent: (callback: (data: unknown) => void): (() => void) => {
+      return this.subscribeToEvent('backlog-plan:event', callback as EventCallback);
+    },
+  };
+
+  // Ideation API - brainstorming and idea management
+  ideation: IdeationAPI = {
+    startSession: (projectPath: string, options?: StartSessionOptions) =>
+      this.post('/api/ideation/session/start', { projectPath, options }),
+
+    getSession: (projectPath: string, sessionId: string) =>
+      this.post('/api/ideation/session/get', { projectPath, sessionId }),
+
+    sendMessage: (
+      sessionId: string,
+      message: string,
+      options?: { imagePaths?: string[]; model?: string }
+    ) => this.post('/api/ideation/session/message', { sessionId, message, options }),
+
+    stopSession: (sessionId: string) => this.post('/api/ideation/session/stop', { sessionId }),
+
+    listIdeas: (projectPath: string) => this.post('/api/ideation/ideas/list', { projectPath }),
+
+    createIdea: (projectPath: string, idea: CreateIdeaInput) =>
+      this.post('/api/ideation/ideas/create', { projectPath, idea }),
+
+    getIdea: (projectPath: string, ideaId: string) =>
+      this.post('/api/ideation/ideas/get', { projectPath, ideaId }),
+
+    updateIdea: (projectPath: string, ideaId: string, updates: UpdateIdeaInput) =>
+      this.post('/api/ideation/ideas/update', { projectPath, ideaId, updates }),
+
+    deleteIdea: (projectPath: string, ideaId: string) =>
+      this.post('/api/ideation/ideas/delete', { projectPath, ideaId }),
+
+    analyzeProject: (projectPath: string) => this.post('/api/ideation/analyze', { projectPath }),
+
+    generateSuggestions: (
+      projectPath: string,
+      promptId: string,
+      category: IdeaCategory,
+      count?: number,
+      contextSources?: IdeationContextSources
+    ) =>
+      this.post('/api/ideation/suggestions/generate', {
+        projectPath,
+        promptId,
+        category,
+        count,
+        contextSources,
+      }),
+
+    convertToFeature: (projectPath: string, ideaId: string, options?: ConvertToFeatureOptions) =>
+      this.post('/api/ideation/convert', { projectPath, ideaId, ...options }),
+
+    addSuggestionToBoard: (
+      projectPath: string,
+      suggestion: AnalysisSuggestion
+    ): Promise<{ success: boolean; featureId?: string; error?: string }> =>
+      this.post('/api/ideation/add-suggestion', { projectPath, suggestion }),
+
+    getPrompts: () => this.get('/api/ideation/prompts'),
+
+    onStream: (callback: (event: IdeationStreamEvent) => void): (() => void) => {
+      return this.subscribeToEvent('ideation:stream', callback as EventCallback);
+    },
+
+    onAnalysisEvent: (callback: (event: IdeationAnalysisEvent) => void): (() => void) => {
+      return this.subscribeToEvent('ideation:analysis', callback as EventCallback);
+    },
+  };
+
+  // Notifications API - project-level notifications
+  notifications: NotificationsAPI & {
+    onNotificationCreated: (callback: (notification: Notification) => void) => () => void;
+  } = {
+    list: (projectPath: string) => this.post('/api/notifications/list', { projectPath }),
+
+    getUnreadCount: (projectPath: string) =>
+      this.post('/api/notifications/unread-count', { projectPath }),
+
+    markAsRead: (projectPath: string, notificationId?: string) =>
+      this.post('/api/notifications/mark-read', { projectPath, notificationId }),
+
+    dismiss: (projectPath: string, notificationId?: string) =>
+      this.post('/api/notifications/dismiss', { projectPath, notificationId }),
+
+    onNotificationCreated: (callback: (notification: Notification) => void): (() => void) => {
+      return this.subscribeToEvent('notification:created', callback as EventCallback);
+    },
+  };
+
+  // Event History API - stored events for debugging and replay
+  eventHistory: EventHistoryAPI = {
+    list: (projectPath: string, filter?: EventHistoryFilter) =>
+      this.post('/api/event-history/list', { projectPath, filter }),
+
+    get: (projectPath: string, eventId: string) =>
+      this.post('/api/event-history/get', { projectPath, eventId }),
+
+    delete: (projectPath: string, eventId: string) =>
+      this.post('/api/event-history/delete', { projectPath, eventId }),
+
+    clear: (projectPath: string) => this.post('/api/event-history/clear', { projectPath }),
+
+    replay: (projectPath: string, eventId: string, hookIds?: string[]) =>
+      this.post('/api/event-history/replay', { projectPath, eventId, hookIds }),
+  };
+
+  // MCP API - Test MCP server connections and list tools
+  // SECURITY: Only accepts serverId, not arbitrary serverConfig, to prevent
+  // drive-by command execution attacks. Servers must be saved first.
+  mcp = {
+    testServer: (
+      serverId: string
+    ): Promise<{
+      success: boolean;
+      tools?: Array<{
+        name: string;
+        description?: string;
+        inputSchema?: Record<string, unknown>;
+        enabled: boolean;
+      }>;
+      error?: string;
+      connectionTime?: number;
+      serverInfo?: {
+        name?: string;
+        version?: string;
+      };
+    }> => this.post('/api/mcp/test', { serverId }),
+
+    listTools: (
+      serverId: string
+    ): Promise<{
+      success: boolean;
+      tools?: Array<{
+        name: string;
+        description?: string;
+        inputSchema?: Record<string, unknown>;
+        enabled: boolean;
+      }>;
+      error?: string;
+    }> => this.post('/api/mcp/tools', { serverId }),
+  };
+
+  // Pipeline API - custom workflow pipeline steps
+  pipeline = {
+    getConfig: (
+      projectPath: string
+    ): Promise<{
+      success: boolean;
+      config?: {
+        version: 1;
+        steps: Array<{
+          id: string;
+          name: string;
+          order: number;
+          instructions: string;
+          colorClass: string;
+          createdAt: string;
+          updatedAt: string;
+        }>;
+      };
+      error?: string;
+    }> => this.post('/api/pipeline/config', { projectPath }),
+
+    saveConfig: (
+      projectPath: string,
+      config: {
+        version: 1;
+        steps: Array<{
+          id: string;
+          name: string;
+          order: number;
+          instructions: string;
+          colorClass: string;
+          createdAt: string;
+          updatedAt: string;
+        }>;
+      }
+    ): Promise<{ success: boolean; error?: string }> =>
+      this.post('/api/pipeline/config/save', { projectPath, config }),
+
+    addStep: (
+      projectPath: string,
+      step: {
+        name: string;
+        order: number;
+        instructions: string;
+        colorClass: string;
+      }
+    ): Promise<{
+      success: boolean;
+      step?: {
+        id: string;
+        name: string;
+        order: number;
+        instructions: string;
+        colorClass: string;
+        createdAt: string;
+        updatedAt: string;
+      };
+      error?: string;
+    }> => this.post('/api/pipeline/steps/add', { projectPath, step }),
+
+    updateStep: (
+      projectPath: string,
+      stepId: string,
+      updates: Partial<{
+        name: string;
+        order: number;
+        instructions: string;
+        colorClass: string;
+      }>
+    ): Promise<{
+      success: boolean;
+      step?: {
+        id: string;
+        name: string;
+        order: number;
+        instructions: string;
+        colorClass: string;
+        createdAt: string;
+        updatedAt: string;
+      };
+      error?: string;
+    }> => this.post('/api/pipeline/steps/update', { projectPath, stepId, updates }),
+
+    deleteStep: (
+      projectPath: string,
+      stepId: string
+    ): Promise<{ success: boolean; error?: string }> =>
+      this.post('/api/pipeline/steps/delete', { projectPath, stepId }),
+
+    reorderSteps: (
+      projectPath: string,
+      stepIds: string[]
+    ): Promise<{ success: boolean; error?: string }> =>
+      this.post('/api/pipeline/steps/reorder', { projectPath, stepIds }),
+  };
+}
+
+// Singleton instance
+let httpApiClientInstance: HttpApiClient | null = null;
+
+export function getHttpApiClient(): HttpApiClient {
+  if (!httpApiClientInstance) {
+    httpApiClientInstance = new HttpApiClient();
+  }
+  return httpApiClientInstance;
+}
+
+// Start API key initialization immediately when this module is imported
+// This ensures the init promise is created early, even before React components mount
+// The actual async work happens in the background and won't block module loading
+initApiKey().catch((error) => {
+  logger.error('Failed to initialize API key:', error);
+});
diff --git a/temp_repo/apps/ui/src/lib/image-utils.ts b/temp_repo/apps/ui/src/lib/image-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..64fba3fde82ee45c268738982c0e58853a2eafc3
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/image-utils.ts
@@ -0,0 +1,268 @@
+/**
+ * Shared utilities for image and file handling across the UI
+ */
+
+// Accepted image MIME types
+export const ACCEPTED_IMAGE_TYPES = [
+  'image/jpeg',
+  'image/jpg',
+  'image/png',
+  'image/gif',
+  'image/webp',
+];
+
+// Accepted text file MIME types
+export const ACCEPTED_TEXT_TYPES = ['text/plain', 'text/markdown', 'text/x-markdown'];
+
+// File extensions for text files (used for validation when MIME type is unreliable)
+export const ACCEPTED_TEXT_EXTENSIONS = ['.txt', '.md'];
+
+// File extensions for markdown files
+export const MARKDOWN_EXTENSIONS = ['.md', '.markdown'];
+
+// File extensions for image files (used for display filtering)
+export const IMAGE_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.bmp'];
+
+// Default max file size (10MB)
+export const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
+
+// Default max text file size (1MB - text files should be smaller)
+export const DEFAULT_MAX_TEXT_FILE_SIZE = 1 * 1024 * 1024;
+
+// Default max number of files
+export const DEFAULT_MAX_FILES = 5;
+
+/**
+ * Sanitize a filename by replacing spaces and special characters with underscores.
+ * This is important for:
+ * - Mac screenshot filenames that contain Unicode narrow no-break spaces (U+202F)
+ * - Filenames with regular spaces
+ * - Filenames with special characters that may cause path issues
+ *
+ * @param filename - The original filename
+ * @returns A sanitized filename safe for file system operations
+ */
+export function sanitizeFilename(filename: string): string {
+  const lastDot = filename.lastIndexOf('.');
+  const name = lastDot > 0 ? filename.substring(0, lastDot) : filename;
+  const ext = lastDot > 0 ? filename.substring(lastDot) : '';
+
+  const sanitized = name
+    .replace(/[\s\u00A0\u202F\u2009\u200A]+/g, '_') // Various space characters (regular, non-breaking, narrow no-break, thin, hair)
+    .replace(/[^a-zA-Z0-9_-]/g, '_') // Non-alphanumeric chars
+    .replace(/_+/g, '_') // Collapse multiple underscores
+    .replace(/^_|_$/g, ''); // Trim leading/trailing underscores
+
+  return `${sanitized || 'image'}${ext}`;
+}
+
+/**
+ * Convert a File object to a base64 data URL string
+ *
+ * @param file - The file to convert
+ * @returns Promise resolving to a base64 data URL string
+ */
+export function fileToBase64(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === 'string') {
+        resolve(reader.result);
+      } else {
+        reject(new Error('Failed to read file as base64'));
+      }
+    };
+    reader.onerror = () => reject(new Error('Failed to read file'));
+    reader.readAsDataURL(file);
+  });
+}
+
+/**
+ * Extract the base64 data from a data URL (removes the prefix)
+ *
+ * @param dataUrl - The full data URL (e.g., "data:image/png;base64,...")
+ * @returns The base64 data without the prefix
+ */
+export function extractBase64Data(dataUrl: string): string {
+  return dataUrl.split(',')[1] || dataUrl;
+}
+
+/**
+ * Format file size in human-readable format
+ *
+ * @param bytes - File size in bytes
+ * @returns Formatted string (e.g., "1.5 MB")
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+}
+
+/**
+ * Validate an image file for upload
+ *
+ * @param file - The file to validate
+ * @param maxFileSize - Maximum file size in bytes (default: 10MB)
+ * @returns Object with isValid boolean and optional error message
+ */
+export function validateImageFile(
+  file: File,
+  maxFileSize: number = DEFAULT_MAX_FILE_SIZE
+): { isValid: boolean; error?: string } {
+  // Validate file type
+  if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
+    return {
+      isValid: false,
+      error: `${file.name}: Unsupported file type. Please use JPG, PNG, GIF, or WebP.`,
+    };
+  }
+
+  // Validate file size
+  if (file.size > maxFileSize) {
+    const maxSizeMB = maxFileSize / (1024 * 1024);
+    return {
+      isValid: false,
+      error: `${file.name}: File too large. Maximum size is ${maxSizeMB}MB.`,
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * Generate a unique image ID
+ *
+ * @returns A unique ID string for an image attachment
+ */
+export function generateImageId(): string {
+  return `img-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+}
+
+/**
+ * Generate a unique file ID
+ *
+ * @returns A unique ID string for a file attachment
+ */
+export function generateFileId(): string {
+  return `file-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+}
+
+/**
+ * Check if a file is a text file by extension or MIME type
+ *
+ * @param file - The file to check
+ * @returns True if the file is a text file
+ */
+export function isTextFile(file: File): boolean {
+  const extension = file.name.toLowerCase().slice(file.name.lastIndexOf('.'));
+  const isTextExtension = ACCEPTED_TEXT_EXTENSIONS.includes(extension);
+  const isTextMime = ACCEPTED_TEXT_TYPES.includes(file.type);
+  return isTextExtension || isTextMime;
+}
+
+/**
+ * Check if a file is an image file by MIME type
+ *
+ * @param file - The file to check
+ * @returns True if the file is an image file
+ */
+export function isImageFile(file: File): boolean {
+  return ACCEPTED_IMAGE_TYPES.includes(file.type);
+}
+
+/**
+ * Validate a text file for upload
+ *
+ * @param file - The file to validate
+ * @param maxFileSize - Maximum file size in bytes (default: 1MB)
+ * @returns Object with isValid boolean and optional error message
+ */
+export function validateTextFile(
+  file: File,
+  maxFileSize: number = DEFAULT_MAX_TEXT_FILE_SIZE
+): { isValid: boolean; error?: string } {
+  const extension = file.name.toLowerCase().slice(file.name.lastIndexOf('.'));
+
+  // Validate file type by extension (MIME types for text files are often unreliable)
+  if (!ACCEPTED_TEXT_EXTENSIONS.includes(extension)) {
+    return {
+      isValid: false,
+      error: `${file.name}: Unsupported file type. Please use .txt or .md files.`,
+    };
+  }
+
+  // Validate file size
+  if (file.size > maxFileSize) {
+    const maxSizeMB = maxFileSize / (1024 * 1024);
+    return {
+      isValid: false,
+      error: `${file.name}: File too large. Maximum size is ${maxSizeMB}MB.`,
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * Read text content from a file
+ *
+ * @param file - The file to read
+ * @returns Promise resolving to the text content
+ */
+export function fileToText(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result === 'string') {
+        resolve(reader.result);
+      } else {
+        reject(new Error('Failed to read file as text'));
+      }
+    };
+    reader.onerror = () => reject(new Error('Failed to read file'));
+    reader.readAsText(file);
+  });
+}
+
+/**
+ * Get the MIME type for a text file based on extension
+ *
+ * @param filename - The filename to check
+ * @returns The MIME type for the file
+ */
+export function getTextFileMimeType(filename: string): string {
+  const extension = filename.toLowerCase().slice(filename.lastIndexOf('.'));
+  if (extension === '.md') {
+    return 'text/markdown';
+  }
+  return 'text/plain';
+}
+
+/**
+ * Check if a filename has a markdown extension
+ *
+ * @param filename - The filename to check
+ * @returns True if the filename has a .md or .markdown extension
+ */
+export function isMarkdownFilename(filename: string): boolean {
+  const dotIndex = filename.lastIndexOf('.');
+  if (dotIndex < 0) return false;
+  const ext = filename.toLowerCase().substring(dotIndex);
+  return MARKDOWN_EXTENSIONS.includes(ext);
+}
+
+/**
+ * Check if a filename has an image extension
+ *
+ * @param filename - The filename to check
+ * @returns True if the filename has an image extension
+ */
+export function isImageFilename(filename: string): boolean {
+  const dotIndex = filename.lastIndexOf('.');
+  if (dotIndex < 0) return false;
+  const ext = filename.toLowerCase().substring(dotIndex);
+  return IMAGE_EXTENSIONS.includes(ext);
+}
diff --git a/temp_repo/apps/ui/src/lib/log-parser.ts b/temp_repo/apps/ui/src/lib/log-parser.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5a1399aea47d65b7302c7ae80486a6568f263a86
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/log-parser.ts
@@ -0,0 +1,1576 @@
+/**
+ * Log Parser Utility
+ * Parses agent output into structured sections for display
+ */
+
+import type {
+  CursorStreamEvent,
+  CursorSystemEvent,
+  CursorAssistantEvent,
+  CursorToolCallEvent,
+  CursorResultEvent,
+} from '@automaker/types';
+
+/**
+ * Cleans up fragmented streaming text by removing spurious newlines
+ * This handles cases where streaming providers send partial text chunks
+ * that got separated by newlines during accumulation
+ */
+function cleanFragmentedText(content: string): string {
+  // Remove newlines that break up words (newline between letters)
+  // e.g., "sum\n\nmary" -> "summary"
+  let cleaned = content.replace(/([a-zA-Z])\n+([a-zA-Z])/g, '$1$2');
+
+  // Also clean up fragmented XML-like tags
+  // e.g., "<sum\n\nmary>" -> "<summary>"
+  cleaned = cleaned.replace(/<([a-zA-Z]+)\n*([a-zA-Z]*)\n*>/g, '<$1$2>');
+  cleaned = cleaned.replace(/<\/([a-zA-Z]+)\n*([a-zA-Z]*)\n*>/g, '</$1$2>');
+
+  return cleaned;
+}
+
+export type LogEntryType =
+  | 'prompt'
+  | 'tool_call'
+  | 'tool_result'
+  | 'phase'
+  | 'error'
+  | 'success'
+  | 'info'
+  | 'debug'
+  | 'warning'
+  | 'thinking';
+
+export type ToolCategory =
+  | 'read'
+  | 'edit'
+  | 'write'
+  | 'bash'
+  | 'search'
+  | 'todo'
+  | 'task'
+  | 'other';
+
+const TOOL_CATEGORIES: Record<string, ToolCategory> = {
+  Read: 'read',
+  Edit: 'edit',
+  Write: 'write',
+  Bash: 'bash',
+  Grep: 'search',
+  Glob: 'search',
+  Ls: 'read',
+  Delete: 'write',
+  WebSearch: 'search',
+  WebFetch: 'read',
+  TodoWrite: 'todo',
+  Task: 'task',
+  NotebookEdit: 'edit',
+  KillShell: 'bash',
+  SemanticSearch: 'search',
+  ReadLints: 'read',
+};
+
+/**
+ * Categorizes a tool name into a predefined category
+ */
+export function categorizeToolName(toolName: string): ToolCategory {
+  return TOOL_CATEGORIES[toolName] || 'other';
+}
+
+export interface LogEntryMetadata {
+  toolName?: string;
+  toolCategory?: ToolCategory;
+  filePath?: string;
+  summary?: string;
+  phase?: string;
+}
+
+export interface LogEntry {
+  id: string;
+  type: LogEntryType;
+  title: string;
+  content: string;
+  timestamp?: string;
+  collapsed?: boolean;
+  metadata?: LogEntryMetadata;
+}
+
+/**
+ * Generates a deterministic ID based on content and position
+ * This ensures the same log entry always gets the same ID,
+ * preserving expanded/collapsed state when new logs stream in
+ *
+ * Uses only the first 200 characters of content to ensure stability
+ * even when entries are merged (which appends content at the end)
+ */
+const generateDeterministicId = (content: string, lineIndex: number): string => {
+  // Use first 200 chars to ensure stability when entries are merged
+  const stableContent = content.slice(0, 200);
+  // Simple hash function for the content
+  let hash = 0;
+  const str = stableContent + '|' + lineIndex.toString();
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32bit integer
+  }
+  return 'log_' + Math.abs(hash).toString(36);
+};
+
+/**
+ * Detects the type of log entry based on content patterns
+ */
+function detectEntryType(content: string): LogEntryType {
+  const trimmed = content.trim();
+  // Clean fragmented text for pattern matching
+  const cleaned = cleanFragmentedText(trimmed);
+
+  // Tool calls
+  if (trimmed.startsWith('🔧 Tool:') || trimmed.match(/^Tool:\s*/)) {
+    return 'tool_call';
+  }
+
+  // Tool results / Input
+  if (
+    trimmed.startsWith('Input:') ||
+    trimmed.startsWith('Result:') ||
+    trimmed.startsWith('Output:')
+  ) {
+    return 'tool_result';
+  }
+
+  // Phase changes
+  if (
+    trimmed.startsWith('📋') ||
+    trimmed.startsWith('⚡') ||
+    trimmed.startsWith('✅') ||
+    trimmed.match(/^(Planning|Action|Verification)/i) ||
+    trimmed.match(/\[Phase:\s*([^\]]+)\]/) ||
+    trimmed.match(/Phase:\s*\w+/i)
+  ) {
+    return 'phase';
+  }
+
+  // Feature creation events
+  if (
+    trimmed.match(/\[Feature Creation\]/i) ||
+    trimmed.match(/Feature Creation/i) ||
+    trimmed.match(/Creating feature/i)
+  ) {
+    return 'success';
+  }
+
+  // Errors
+  if (trimmed.startsWith('❌') || trimmed.toLowerCase().includes('error:')) {
+    return 'error';
+  }
+
+  // Success messages and summary sections
+  // Check both raw and cleaned content for summary tags (handles fragmented streaming)
+  if (
+    trimmed.startsWith('✅') ||
+    trimmed.toLowerCase().includes('success') ||
+    trimmed.toLowerCase().includes('completed') ||
+    // Summary tags (preferred format from agent) - check both raw and cleaned
+    trimmed.startsWith('<summary>') ||
+    cleaned.startsWith('<summary>') ||
+    // Markdown summary headers (fallback)
+    trimmed.match(/^##\s+(Summary|Feature|Changes|Implementation)/i) ||
+    cleaned.match(/^##\s+(Summary|Feature|Changes|Implementation)/i) ||
+    trimmed.match(/^(I've|I have) (successfully |now )?(completed|finished|implemented)/i)
+  ) {
+    return 'success';
+  }
+
+  // Warnings
+  if (trimmed.startsWith('⚠️') || trimmed.toLowerCase().includes('warning:')) {
+    return 'warning';
+  }
+
+  // Thinking/Preparation info (be specific to avoid matching summary content)
+  if (
+    trimmed.toLowerCase().includes('ultrathink') ||
+    trimmed.match(/thinking level[:\s]*(low|medium|high|none|\d)/i) ||
+    trimmed.match(/^thinking level\s*$/i) ||
+    trimmed.toLowerCase().includes('estimated cost') ||
+    trimmed.toLowerCase().includes('estimated time') ||
+    trimmed.toLowerCase().includes('budget tokens') ||
+    trimmed.match(/thinking.*preparation/i)
+  ) {
+    return 'thinking';
+  }
+
+  // Debug info (JSON, stack traces, etc.)
+  if (
+    trimmed.startsWith('{') ||
+    trimmed.startsWith('[') ||
+    trimmed.includes('at ') ||
+    trimmed.match(/^\s*\d+\s*\|/)
+  ) {
+    return 'debug';
+  }
+
+  // Default to info
+  return 'info';
+}
+
+/**
+ * Extracts tool name from a tool call entry
+ * Matches both "🔧 Tool: Name" and "Tool: Name" formats
+ */
+function extractToolName(content: string): string | undefined {
+  // Try emoji format first, then plain format
+  const match = content.match(/(?:🔧\s*)?Tool:\s*(\S+)/);
+  return match?.[1];
+}
+
+/**
+ * Extracts phase name from a phase entry
+ */
+function extractPhase(content: string): string | undefined {
+  if (content.includes('📋')) return 'planning';
+  if (content.includes('⚡')) return 'action';
+  if (content.includes('✅')) return 'verification';
+
+  // Extract from [Phase: ...] format
+  const phaseMatch = content.match(/\[Phase:\s*([^\]]+)\]/);
+  if (phaseMatch) {
+    return phaseMatch[1].toLowerCase();
+  }
+
+  const match = content.match(/^(Planning|Action|Verification)/i);
+  return match?.[1]?.toLowerCase();
+}
+
+/**
+ * Extracts file path from tool input JSON
+ */
+function extractFilePath(content: string): string | undefined {
+  try {
+    const inputMatch = content.match(/Input:\s*([\s\S]*)/);
+    if (!inputMatch) return undefined;
+
+    const jsonStr = inputMatch[1].trim();
+    const parsed = JSON.parse(jsonStr) as Record<string, unknown>;
+
+    if (typeof parsed.file_path === 'string') return parsed.file_path;
+    if (typeof parsed.path === 'string') return parsed.path;
+    if (typeof parsed.notebook_path === 'string') return parsed.notebook_path;
+
+    return undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Generates a smart summary for tool calls based on the tool name and input
+ */
+export function generateToolSummary(toolName: string, content: string): string | undefined {
+  try {
+    // Try to parse JSON input
+    const inputMatch = content.match(/Input:\s*([\s\S]*)/);
+    if (!inputMatch) return undefined;
+
+    const jsonStr = inputMatch[1].trim();
+    const parsed = JSON.parse(jsonStr) as Record<string, unknown>;
+
+    switch (toolName) {
+      case 'Read': {
+        const filePath = parsed.file_path as string | undefined;
+        return `Reading ${filePath?.split('/').pop() || 'file'}`;
+      }
+      case 'Edit': {
+        const filePath = parsed.file_path as string | undefined;
+        const fileName = filePath?.split('/').pop() || 'file';
+        return `Editing ${fileName}`;
+      }
+      case 'Write': {
+        const filePath = parsed.file_path as string | undefined;
+        return `Writing ${filePath?.split('/').pop() || 'file'}`;
+      }
+      case 'Bash': {
+        const command = parsed.command as string | undefined;
+        const cmd = command?.slice(0, 50) || '';
+        return `Running: ${cmd}${(command?.length || 0) > 50 ? '...' : ''}`;
+      }
+      case 'Grep': {
+        const pattern = parsed.pattern as string | undefined;
+        return `Searching for "${pattern?.slice(0, 30) || ''}"`;
+      }
+      case 'Glob': {
+        const pattern = parsed.pattern as string | undefined;
+        return `Finding files: ${pattern || ''}`;
+      }
+      case 'TodoWrite': {
+        const todos = parsed.todos as unknown[] | undefined;
+        const todoCount = todos?.length || 0;
+        return `${todoCount} todo item${todoCount !== 1 ? 's' : ''}`;
+      }
+      case 'Task': {
+        const subagentType = parsed.subagent_type as string | undefined;
+        const description = parsed.description as string | undefined;
+        return `${subagentType || 'Agent'}: ${description || ''}`;
+      }
+      case 'WebSearch': {
+        const query = parsed.query as string | undefined;
+        return `Searching: "${query?.slice(0, 40) || ''}"`;
+      }
+      case 'WebFetch': {
+        const url = parsed.url as string | undefined;
+        return `Fetching: ${url?.slice(0, 40) || ''}`;
+      }
+      case 'NotebookEdit': {
+        const notebookPath = parsed.notebook_path as string | undefined;
+        return `Editing notebook: ${notebookPath?.split('/').pop() || 'notebook'}`;
+      }
+      case 'KillShell': {
+        return 'Terminating shell session';
+      }
+      case 'SemanticSearch': {
+        const query = parsed.query as string | undefined;
+        return `Semantic search: "${query?.slice(0, 30) || ''}"`;
+      }
+      case 'ReadLints': {
+        const paths = parsed.paths as string[] | undefined;
+        const pathCount = paths?.length || 0;
+        return `Reading lints for ${pathCount} file(s)`;
+      }
+      default:
+        return undefined;
+    }
+  } catch {
+    return undefined;
+  }
+}
+
+// ============================================================================
+// Cursor Event Parsing
+// ============================================================================
+
+/**
+ * Detect if a parsed JSON object is a Cursor stream event
+ */
+function isCursorEvent(obj: unknown): obj is CursorStreamEvent {
+  return (
+    obj !== null &&
+    typeof obj === 'object' &&
+    'type' in obj &&
+    'session_id' in obj &&
+    ['system', 'user', 'assistant', 'tool_call', 'result'].includes(
+      (obj as Record<string, unknown>).type as string
+    )
+  );
+}
+
+/**
+ * Normalize Cursor tool call event to log entry
+ */
+function normalizeCursorToolCall(
+  event: CursorToolCallEvent,
+  baseEntry: { id: string; timestamp: string }
+): LogEntry | null {
+  const toolCall = event.tool_call;
+  const isStarted = event.subtype === 'started';
+  const isCompleted = event.subtype === 'completed';
+
+  // Read tool
+  if (toolCall.readToolCall) {
+    const path = toolCall.readToolCall.args?.path || 'unknown';
+    const result = toolCall.readToolCall.result?.success;
+
+    return {
+      ...baseEntry,
+      id: `${baseEntry.id}-${event.call_id}`,
+      type: 'tool_call' as LogEntryType,
+      title: isStarted ? `Reading ${path}` : `Read ${path}`,
+      content:
+        isCompleted && result
+          ? `${result.totalLines} lines, ${result.totalChars} chars`
+          : `Path: ${path}`,
+      collapsed: true,
+      metadata: {
+        toolName: 'Read',
+        toolCategory: 'read' as ToolCategory,
+        filePath: path,
+        summary: isCompleted ? `Read ${result?.totalLines || 0} lines` : `Reading file...`,
+      },
+    };
+  }
+
+  // Write tool
+  if (toolCall.writeToolCall) {
+    const path =
+      toolCall.writeToolCall.args?.path ||
+      toolCall.writeToolCall.result?.success?.path ||
+      'unknown';
+    const result = toolCall.writeToolCall.result?.success;
+
+    return {
+      ...baseEntry,
+      id: `${baseEntry.id}-${event.call_id}`,
+      type: 'tool_call' as LogEntryType,
+      title: isStarted ? `Writing ${path}` : `Wrote ${path}`,
+      content:
+        isCompleted && result
+          ? `${result.linesCreated} lines, ${result.fileSize} bytes`
+          : `Path: ${path}`,
+      collapsed: true,
+      metadata: {
+        toolName: 'Write',
+        toolCategory: 'write' as ToolCategory,
+        filePath: path,
+        summary: isCompleted ? `Wrote ${result?.linesCreated || 0} lines` : `Writing file...`,
+      },
+    };
+  }
+
+  // Edit tool
+  if (toolCall.editToolCall) {
+    const path = toolCall.editToolCall.args?.path || 'unknown';
+
+    return {
+      ...baseEntry,
+      id: `${baseEntry.id}-${event.call_id}`,
+      type: 'tool_call' as LogEntryType,
+      title: isStarted ? `Editing ${path}` : `Edited ${path}`,
+      content: `Path: ${path}`,
+      collapsed: true,
+      metadata: {
+        toolName: 'Edit',
+        toolCategory: 'edit' as ToolCategory,
+        filePath: path,
+        summary: isCompleted ? `Edited file` : `Editing file...`,
+      },
+    };
+  }
+
+  // Shell/Bash tool
+  if (toolCall.shellToolCall) {
+    const command = toolCall.shellToolCall.args?.command || '';
+    const result = toolCall.shellToolCall.result;
+    const shortCmd = command.length > 50 ? command.slice(0, 50) + '...' : command;
+
+    let content = `Command: ${command}`;
+    if (isCompleted && result?.success) {
+      content += `\nExit code: ${result.success.exitCode}`;
+    } else if (isCompleted && result?.rejected) {
+      content += `\nRejected: ${result.rejected.reason}`;
+    }
+
+    return {
+      ...baseEntry,
+      id: `${baseEntry.id}-${event.call_id}`,
+      type: 'tool_call' as LogEntryType,
+      title: isStarted ? `Running: ${shortCmd}` : `Ran: ${shortCmd}`,
+      content,
+      collapsed: true,
+      metadata: {
+        toolName: 'Bash',
+        toolCategory: 'bash' as ToolCategory,
+        summary: isCompleted
+          ? result?.success
+            ? `Exit ${result.success.exitCode}`
+            : result?.rejected
+              ? 'Rejected'
+              : 'Completed'
+          : `Running...`,
+      },
+    };
+  }
+
+  // Delete tool
+  if (toolCall.deleteToolCall) {
+    const path = toolCall.deleteToolCall.args?.path || 'unknown';
+    const result = toolCall.deleteToolCall.result;
+
+    let content = `Path: ${path}`;
+    if (isCompleted && result?.rejected) {
+      content += `\nRejected: ${result.rejected.reason}`;
+    }
+
+    return {
+      ...baseEntry,
+      id: `${baseEntry.id}-${event.call_id}`,
+      type: 'tool_call' as LogEntryType,
+      title: isStarted ? `Deleting ${path}` : `Deleted ${path}`,
+      content,
+      collapsed: true,
+      metadata: {
+        toolName: 'Delete',
+        toolCategory: 'write' as ToolCategory,
+        filePath: path,
+        summary: isCompleted ? (result?.rejected ? 'Rejected' : 'Deleted') : `Deleting...`,
+      },
+    };
+  }
+
+  // Grep tool
+  if (toolCall.grepToolCall) {
+    const pattern = toolCall.grepToolCall.args?.pattern || '';
+    const searchPath = toolCall.grepToolCall.args?.path;
+    const result = toolCall.grepToolCall.result?.success;
+
+    return {
+      ...baseEntry,
+      id: `${baseEntry.id}-${event.call_id}`,
+      type: 'tool_call' as LogEntryType,
+      title: isStarted ? `Searching: "${pattern}"` : `Searched: "${pattern}"`,
+      content: `Pattern: ${pattern}${searchPath ? `\nPath: ${searchPath}` : ''}${
+        isCompleted && result ? `\nMatched ${result.matchedLines} lines` : ''
+      }`,
+      collapsed: true,
+      metadata: {
+        toolName: 'Grep',
+        toolCategory: 'search' as ToolCategory,
+        summary: isCompleted ? `Found ${result?.matchedLines || 0} matches` : `Searching...`,
+      },
+    };
+  }
+
+  // Ls tool
+  if (toolCall.lsToolCall) {
+    const path = toolCall.lsToolCall.args?.path || '.';
+    const result = toolCall.lsToolCall.result?.success;
+
+    return {
+      ...baseEntry,
+      id: `${baseEntry.id}-${event.call_id}`,
+      type: 'tool_call' as LogEntryType,
+      title: isStarted ? `Listing ${path}` : `Listed ${path}`,
+      content: `Path: ${path}${
+        isCompleted && result
+          ? `\n${result.childrenFiles} files, ${result.childrenDirs} directories`
+          : ''
+      }`,
+      collapsed: true,
+      metadata: {
+        toolName: 'Ls',
+        toolCategory: 'read' as ToolCategory,
+        filePath: path,
+        summary: isCompleted
+          ? `${result?.childrenFiles || 0} files, ${result?.childrenDirs || 0} dirs`
+          : `Listing...`,
+      },
+    };
+  }
+
+  // Glob tool
+  if (toolCall.globToolCall) {
+    const pattern = toolCall.globToolCall.args?.globPattern || '';
+    const targetDir = toolCall.globToolCall.args?.targetDirectory;
+    const result = toolCall.globToolCall.result?.success;
+
+    return {
+      ...baseEntry,
+      id: `${baseEntry.id}-${event.call_id}`,
+      type: 'tool_call' as LogEntryType,
+      title: isStarted ? `Finding: ${pattern}` : `Found: ${pattern}`,
+      content: `Pattern: ${pattern}${targetDir ? `\nDirectory: ${targetDir}` : ''}${
+        isCompleted && result ? `\nFound ${result.totalFiles} files` : ''
+      }`,
+      collapsed: true,
+      metadata: {
+        toolName: 'Glob',
+        toolCategory: 'search' as ToolCategory,
+        summary: isCompleted ? `Found ${result?.totalFiles || 0} files` : `Finding...`,
+      },
+    };
+  }
+
+  // Semantic Search tool
+  if (toolCall.semSearchToolCall) {
+    const query = toolCall.semSearchToolCall.args?.query || '';
+    const targetDirs = toolCall.semSearchToolCall.args?.targetDirectories;
+    const result = toolCall.semSearchToolCall.result?.success;
+    const shortQuery = query.length > 40 ? query.slice(0, 40) + '...' : query;
+    const resultCount = result?.codeResults?.length || 0;
+
+    return {
+      ...baseEntry,
+      id: `${baseEntry.id}-${event.call_id}`,
+      type: 'tool_call' as LogEntryType,
+      title: isStarted ? `Semantic search: "${shortQuery}"` : `Searched: "${shortQuery}"`,
+      content: `Query: ${query}${targetDirs?.length ? `\nDirectories: ${targetDirs.join(', ')}` : ''}${
+        isCompleted
+          ? `\n${resultCount > 0 ? `Found ${resultCount} result(s)` : result?.results || 'No results'}`
+          : ''
+      }`,
+      collapsed: true,
+      metadata: {
+        toolName: 'SemanticSearch',
+        toolCategory: 'search' as ToolCategory,
+        summary: isCompleted
+          ? resultCount > 0
+            ? `Found ${resultCount} result(s)`
+            : 'No results'
+          : `Searching...`,
+      },
+    };
+  }
+
+  // Read Lints tool
+  if (toolCall.readLintsToolCall) {
+    const paths = toolCall.readLintsToolCall.args?.paths || [];
+    const result = toolCall.readLintsToolCall.result?.success;
+    const pathCount = paths.length;
+
+    return {
+      ...baseEntry,
+      id: `${baseEntry.id}-${event.call_id}`,
+      type: 'tool_call' as LogEntryType,
+      title: isStarted ? `Reading lints for ${pathCount} file(s)` : `Read lints`,
+      content: `Paths: ${paths.join(', ')}${
+        isCompleted && result
+          ? `\nFound ${result.totalDiagnostics} diagnostic(s) in ${result.totalFiles} file(s)`
+          : ''
+      }`,
+      collapsed: true,
+      metadata: {
+        toolName: 'ReadLints',
+        toolCategory: 'read' as ToolCategory,
+        summary: isCompleted
+          ? `${result?.totalDiagnostics || 0} diagnostic(s)`
+          : `Reading lints...`,
+      },
+    };
+  }
+
+  // Generic function tool (fallback)
+  if (toolCall.function) {
+    const name = toolCall.function.name;
+    const args = toolCall.function.arguments;
+
+    // Determine category based on tool name
+    const category = categorizeToolName(name);
+
+    return {
+      ...baseEntry,
+      id: `${baseEntry.id}-${event.call_id}`,
+      type: 'tool_call' as LogEntryType,
+      title: `${name} ${isStarted ? 'started' : 'completed'}`,
+      content: args || '',
+      collapsed: true,
+      metadata: {
+        toolName: name,
+        toolCategory: category,
+        summary: `${name} ${event.subtype}`,
+      },
+    };
+  }
+
+  return null;
+}
+
+/**
+ * Normalize Cursor stream event to log entry
+ */
+export function normalizeCursorEvent(event: CursorStreamEvent): LogEntry | null {
+  const timestamp = new Date().toISOString();
+  const baseEntry = {
+    id: `cursor-${event.session_id}-${Date.now()}`,
+    timestamp,
+  };
+
+  switch (event.type) {
+    case 'system': {
+      const sysEvent = event as CursorSystemEvent;
+      return {
+        ...baseEntry,
+        type: 'info' as LogEntryType,
+        title: 'Session Started',
+        content: `Model: ${sysEvent.model}\nAuth: ${sysEvent.apiKeySource}\nCWD: ${sysEvent.cwd}`,
+        collapsed: true,
+        metadata: {
+          phase: 'init',
+        },
+      };
+    }
+
+    case 'assistant': {
+      const assistEvent = event as CursorAssistantEvent;
+      const text = assistEvent.message.content
+        .filter((c) => c.type === 'text')
+        .map((c) => c.text)
+        .join('');
+
+      if (!text.trim()) return null;
+
+      return {
+        ...baseEntry,
+        type: 'info' as LogEntryType,
+        title: 'Assistant',
+        content: text,
+        collapsed: false,
+      };
+    }
+
+    case 'tool_call': {
+      const toolEvent = event as CursorToolCallEvent;
+      return normalizeCursorToolCall(toolEvent, baseEntry);
+    }
+
+    case 'result': {
+      const resultEvent = event as CursorResultEvent;
+
+      if (resultEvent.is_error) {
+        return {
+          ...baseEntry,
+          type: 'error' as LogEntryType,
+          title: 'Error',
+          content: resultEvent.error || resultEvent.result || 'Unknown error',
+          collapsed: false,
+        };
+      }
+
+      return {
+        ...baseEntry,
+        type: 'success' as LogEntryType,
+        title: 'Completed',
+        content: `Duration: ${resultEvent.duration_ms}ms`,
+        collapsed: true,
+      };
+    }
+
+    default:
+      return null;
+  }
+}
+
+/**
+ * Parse a single log line into a structured entry
+ * Handles both Cursor JSON events and plain text
+ */
+export function parseLogLine(line: string): LogEntry | null {
+  if (!line.trim()) return null;
+
+  try {
+    const parsed = JSON.parse(line);
+
+    // Check if it's a Cursor stream event
+    if (isCursorEvent(parsed)) {
+      return normalizeCursorEvent(parsed);
+    }
+
+    // For other JSON, treat as debug info
+    return {
+      id: `json-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+      type: 'debug',
+      title: 'Debug Info',
+      content: line,
+      timestamp: new Date().toISOString(),
+      collapsed: true,
+    };
+  } catch {
+    // Non-JSON line - treat as plain text
+    return {
+      id: `text-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+      type: 'info',
+      title: 'Output',
+      content: line,
+      timestamp: new Date().toISOString(),
+      collapsed: false,
+    };
+  }
+}
+
+/**
+ * Get provider-specific styling for log entries
+ */
+export function getProviderStyle(entry: LogEntry): { badge?: string; icon?: string } {
+  // Check if entry has Cursor session ID pattern
+  if (entry.id.startsWith('cursor-')) {
+    return {
+      badge: 'Cursor',
+      icon: 'terminal',
+    };
+  }
+
+  // Default (Claude/AutoMaker)
+  return {
+    badge: 'Claude',
+    icon: 'bot',
+  };
+}
+
+/**
+ * Determines if an entry should be collapsed by default
+ */
+export function shouldCollapseByDefault(entry: LogEntry): boolean {
+  // Collapse if content is long
+  if (entry.content.length > 200) return true;
+
+  // Collapse if contains multi-line JSON (> 5 lines)
+  const lineCount = entry.content.split('\n').length;
+  if (lineCount > 5 && (entry.content.includes('{') || entry.content.includes('['))) {
+    return true;
+  }
+
+  // Collapse TodoWrite with multiple items
+  if (entry.metadata?.toolName === 'TodoWrite') {
+    try {
+      const inputMatch = entry.content.match(/Input:\s*([\s\S]*)/);
+      if (inputMatch) {
+        const parsed = JSON.parse(inputMatch[1].trim()) as Record<string, unknown>;
+        const todos = parsed.todos as unknown[] | undefined;
+        if (todos && todos.length > 1) return true;
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }
+
+  // Collapse Edit with code blocks
+  if (entry.metadata?.toolName === 'Edit' && entry.content.includes('old_string')) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Generates a title for a log entry
+ */
+function generateTitle(type: LogEntryType, content: string): string {
+  // Clean content for pattern matching
+  const cleaned = cleanFragmentedText(content);
+
+  switch (type) {
+    case 'tool_call': {
+      const toolName = extractToolName(content);
+      return toolName ? `Tool Call: ${toolName}` : 'Tool Call';
+    }
+    case 'tool_result':
+      return 'Tool Input/Result';
+    case 'phase': {
+      const phase = extractPhase(content);
+      if (phase) {
+        // Capitalize first letter of each word
+        const formatted = phase
+          .split(/\s+/)
+          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+          .join(' ');
+        return `Phase: ${formatted}`;
+      }
+      return 'Phase Change';
+    }
+    case 'error':
+      return 'Error';
+    case 'success': {
+      // Check if it's a summary section (check both raw and cleaned)
+      if (
+        content.startsWith('<summary>') ||
+        content.includes('<summary>') ||
+        cleaned.startsWith('<summary>') ||
+        cleaned.includes('<summary>')
+      ) {
+        return 'Summary';
+      }
+      if (
+        content.match(/^##\s+(Summary|Feature|Changes|Implementation)/i) ||
+        cleaned.match(/^##\s+(Summary|Feature|Changes|Implementation)/i)
+      ) {
+        return 'Summary';
+      }
+      if (
+        content.match(/^All tasks completed/i) ||
+        content.match(/^(I've|I have) (successfully |now )?(completed|finished|implemented)/i)
+      ) {
+        return 'Summary';
+      }
+      return 'Success';
+    }
+    case 'warning':
+      return 'Warning';
+    case 'thinking':
+      return 'Thinking Level';
+    case 'debug':
+      return 'Debug Info';
+    case 'prompt':
+      return 'Prompt';
+    default:
+      return 'Info';
+  }
+}
+
+/**
+ * Tracks bracket depth for JSON accumulation
+ */
+function calculateBracketDepth(line: string): { braceChange: number; bracketChange: number } {
+  let braceChange = 0;
+  let bracketChange = 0;
+  let inString = false;
+  let escapeNext = false;
+
+  for (const char of line) {
+    if (escapeNext) {
+      escapeNext = false;
+      continue;
+    }
+    if (char === '\\') {
+      escapeNext = true;
+      continue;
+    }
+    if (char === '"') {
+      inString = !inString;
+      continue;
+    }
+    if (inString) continue;
+
+    if (char === '{') braceChange++;
+    else if (char === '}') braceChange--;
+    else if (char === '[') bracketChange++;
+    else if (char === ']') bracketChange--;
+  }
+
+  return { braceChange, bracketChange };
+}
+
+/**
+ * Parses raw log output into structured entries
+ */
+export function parseLogOutput(rawOutput: string): LogEntry[] {
+  if (!rawOutput || !rawOutput.trim()) {
+    return [];
+  }
+
+  const entries: LogEntry[] = [];
+  const lines = rawOutput.split('\n');
+
+  let currentEntry: (Omit<LogEntry, 'id'> & { id?: string }) | null = null;
+  let currentContent: string[] = [];
+  let entryStartLine = 0; // Track the starting line for deterministic ID generation
+
+  // JSON accumulation state
+  let inJsonAccumulation = false;
+  let jsonBraceDepth = 0;
+  let jsonBracketDepth = 0;
+
+  // Summary tag accumulation state
+  let inSummaryAccumulation = false;
+
+  const finalizeEntry = () => {
+    if (currentEntry && currentContent.length > 0) {
+      currentEntry.content = currentContent.join('\n').trim();
+      if (currentEntry.content) {
+        // Populate enhanced metadata for tool calls
+        const toolName = currentEntry.metadata?.toolName;
+        if (toolName && currentEntry.type === 'tool_call') {
+          const toolCategory = categorizeToolName(toolName);
+          const filePath = extractFilePath(currentEntry.content);
+          const summary = generateToolSummary(toolName, currentEntry.content);
+
+          currentEntry.metadata = {
+            ...currentEntry.metadata,
+            toolCategory,
+            filePath,
+            summary,
+          };
+        }
+
+        // Generate deterministic ID based on content and position
+        const entryWithId: LogEntry = {
+          ...(currentEntry as Omit<LogEntry, 'id'>),
+          id: generateDeterministicId(currentEntry.content, entryStartLine),
+        };
+        entries.push(entryWithId);
+      }
+    }
+    currentContent = [];
+    inJsonAccumulation = false;
+    jsonBraceDepth = 0;
+    jsonBracketDepth = 0;
+    inSummaryAccumulation = false;
+  };
+
+  let lineIndex = 0;
+  for (const line of lines) {
+    const trimmedLine = line.trim();
+
+    // Skip empty lines at the beginning
+    if (!trimmedLine && !currentEntry) {
+      lineIndex++;
+      continue;
+    }
+
+    // Check for Cursor stream events (NDJSON lines)
+    // These are complete JSON objects on a single line
+    if (trimmedLine.startsWith('{') && trimmedLine.endsWith('}')) {
+      try {
+        const parsed = JSON.parse(trimmedLine);
+        if (isCursorEvent(parsed)) {
+          // Finalize any pending entry before adding Cursor event
+          finalizeEntry();
+          const cursorEntry = normalizeCursorEvent(parsed);
+          if (cursorEntry) {
+            entries.push(cursorEntry);
+          }
+          lineIndex++;
+          continue;
+        }
+      } catch {
+        // Not valid JSON, continue with normal parsing
+      }
+    }
+
+    // If we're in JSON accumulation mode, keep accumulating until depth returns to 0
+    if (inJsonAccumulation) {
+      currentContent.push(line);
+      const { braceChange, bracketChange } = calculateBracketDepth(trimmedLine);
+      jsonBraceDepth += braceChange;
+      jsonBracketDepth += bracketChange;
+
+      // JSON is complete when depth returns to 0
+      if (jsonBraceDepth <= 0 && jsonBracketDepth <= 0) {
+        inJsonAccumulation = false;
+        jsonBraceDepth = 0;
+        jsonBracketDepth = 0;
+      }
+      lineIndex++;
+      continue;
+    }
+
+    // If we're in summary accumulation mode, keep accumulating until </summary>
+    if (inSummaryAccumulation) {
+      currentContent.push(line);
+      // Summary is complete when we see closing tag
+      if (trimmedLine.includes('</summary>')) {
+        inSummaryAccumulation = false;
+        // Don't finalize here - let normal flow handle it
+      }
+      lineIndex++;
+      continue;
+    }
+
+    // Detect if this line starts a new entry
+    const lineType = detectEntryType(trimmedLine);
+    const isNewEntry =
+      trimmedLine.startsWith('🔧') ||
+      trimmedLine.startsWith('📋') ||
+      trimmedLine.startsWith('⚡') ||
+      trimmedLine.startsWith('✅') ||
+      trimmedLine.startsWith('❌') ||
+      trimmedLine.startsWith('⚠️') ||
+      trimmedLine.startsWith('🧠') ||
+      trimmedLine.match(/\[Phase:\s*([^\]]+)\]/) ||
+      trimmedLine.match(/\[Feature Creation\]/i) ||
+      trimmedLine.match(/\[Tool\]/i) ||
+      trimmedLine.match(/\[Agent\]/i) ||
+      trimmedLine.match(/\[Complete\]/i) ||
+      trimmedLine.match(/\[ERROR\]/i) ||
+      trimmedLine.match(/\[Status\]/i) ||
+      trimmedLine.toLowerCase().includes('ultrathink preparation') ||
+      trimmedLine.match(/thinking level[:\s]*(low|medium|high|none|\d)/i) ||
+      // Summary tags (preferred format from agent) - check both raw and cleaned for fragmented streaming
+      trimmedLine.startsWith('<summary>') ||
+      cleanFragmentedText(trimmedLine).startsWith('<summary>') ||
+      // Agent summary sections (markdown headers - fallback)
+      trimmedLine.match(/^##\s+(Summary|Feature|Changes|Implementation)/i) ||
+      cleanFragmentedText(trimmedLine).match(/^##\s+(Summary|Feature|Changes|Implementation)/i) ||
+      // Summary introduction lines
+      trimmedLine.match(/^All tasks completed/i) ||
+      trimmedLine.match(/^(I've|I have) (successfully |now )?(completed|finished|implemented)/i);
+
+    // Check if this is an Input: line that should trigger JSON accumulation
+    const isInputLine = trimmedLine.startsWith('Input:') && currentEntry?.type === 'tool_call';
+
+    if (isNewEntry) {
+      // Finalize previous entry
+      finalizeEntry();
+
+      // Track starting line for deterministic ID
+      entryStartLine = lineIndex;
+
+      // Start new entry (ID will be generated when finalizing)
+      currentEntry = {
+        type: lineType,
+        title: generateTitle(lineType, trimmedLine),
+        content: '',
+        metadata: {
+          toolName: extractToolName(trimmedLine),
+          phase: extractPhase(trimmedLine),
+        },
+      };
+      currentContent.push(trimmedLine);
+
+      // If this is a <summary> tag, start summary accumulation mode
+      // Check both raw and cleaned for fragmented streaming
+      const cleanedTrimmed = cleanFragmentedText(trimmedLine);
+      if (
+        (trimmedLine.startsWith('<summary>') || cleanedTrimmed.startsWith('<summary>')) &&
+        !trimmedLine.includes('</summary>') &&
+        !cleanedTrimmed.includes('</summary>')
+      ) {
+        inSummaryAccumulation = true;
+      }
+    } else if (isInputLine && currentEntry) {
+      // Start JSON accumulation mode
+      currentContent.push(trimmedLine);
+
+      // Check if there's JSON on the same line after "Input:"
+      const inputContent = trimmedLine.replace(/^Input:\s*/, '');
+      if (inputContent) {
+        const { braceChange, bracketChange } = calculateBracketDepth(inputContent);
+        jsonBraceDepth = braceChange;
+        jsonBracketDepth = bracketChange;
+
+        // Only enter accumulation mode if JSON is incomplete
+        if (jsonBraceDepth > 0 || jsonBracketDepth > 0) {
+          inJsonAccumulation = true;
+        }
+      } else {
+        // Input: line with JSON starting on next line
+        inJsonAccumulation = true;
+      }
+    } else if (currentEntry) {
+      // Continue current entry
+      currentContent.push(line);
+
+      // Check if this line starts a JSON block
+      if (trimmedLine.startsWith('{') || trimmedLine.startsWith('[')) {
+        const { braceChange, bracketChange } = calculateBracketDepth(trimmedLine);
+        if (braceChange > 0 || bracketChange > 0) {
+          jsonBraceDepth = braceChange;
+          jsonBracketDepth = bracketChange;
+          if (jsonBraceDepth > 0 || jsonBracketDepth > 0) {
+            inJsonAccumulation = true;
+          }
+        }
+      }
+    } else {
+      // Track starting line for deterministic ID
+      entryStartLine = lineIndex;
+
+      // No current entry, create a default info entry
+      currentEntry = {
+        type: 'info',
+        title: 'Info',
+        content: '',
+      };
+      currentContent.push(line);
+    }
+    lineIndex++;
+  }
+
+  // Finalize last entry
+  finalizeEntry();
+
+  // Merge consecutive entries of the same type if they're both debug or info
+  const mergedEntries = mergeConsecutiveEntries(entries);
+
+  return mergedEntries;
+}
+
+/**
+ * Merges consecutive entries of the same type for cleaner display
+ */
+function mergeConsecutiveEntries(entries: LogEntry[]): LogEntry[] {
+  if (entries.length <= 1) return entries;
+
+  const merged: LogEntry[] = [];
+  let current: LogEntry | null = null;
+  let mergeIndex = 0;
+
+  for (const entry of entries) {
+    if (
+      current &&
+      (current.type === 'debug' || current.type === 'info') &&
+      current.type === entry.type
+    ) {
+      // Merge into current - regenerate ID based on merged content
+      current.content += '\n\n' + entry.content;
+      current.id = generateDeterministicId(current.content, mergeIndex);
+    } else {
+      if (current) {
+        merged.push(current);
+      }
+      current = { ...entry };
+      mergeIndex = merged.length;
+    }
+  }
+
+  if (current) {
+    merged.push(current);
+  }
+
+  return merged;
+}
+
+/**
+ * Extracts summary content from raw log output
+ * Returns the LAST summary text if found, or null if no summary exists
+ * This ensures we get the most recent/updated summary when multiple exist
+ */
+export function extractSummary(rawOutput: string): string | null {
+  if (!rawOutput || !rawOutput.trim()) {
+    return null;
+  }
+
+  // First, clean up any fragmented text from streaming
+  // This handles cases where streaming providers send partial text chunks
+  // that got separated by newlines during accumulation (e.g., "<sum\n\nmary>")
+  const cleanedOutput = cleanFragmentedText(rawOutput);
+
+  // Define regex patterns to try in order of priority
+  // Each pattern specifies a processor function to extract the summary from the match
+  const regexesToTry: Array<{
+    regex: RegExp;
+    processor: (m: RegExpMatchArray) => string;
+  }> = [
+    { regex: /<summary>([\s\S]*?)<\/summary>/gi, processor: (m) => m[1] },
+    { regex: /^##\s+Summary[^\n]*\n([\s\S]*?)(?=\n##\s+[^#]|\n🔧|$)/gm, processor: (m) => m[1] },
+    {
+      regex: /^##\s+(Feature|Changes|Implementation)[^\n]*\n([\s\S]*?)(?=\n##\s+[^#]|\n🔧|$)/gm,
+      processor: (m) => `## ${m[1]}\n${m[2]}`,
+    },
+    {
+      regex: /(^|\n)(All tasks completed[\s\S]*?)(?=\n🔧|\n📋|\n⚡|\n❌|$)/g,
+      processor: (m) => m[2],
+    },
+    {
+      regex:
+        /(^|\n)((I've|I have) (successfully |now )?(completed|finished|implemented)[\s\S]*?)(?=\n🔧|\n📋|\n⚡|\n❌|$)/g,
+      processor: (m) => m[2],
+    },
+  ];
+
+  for (const { regex, processor } of regexesToTry) {
+    const matches = [...cleanedOutput.matchAll(regex)];
+    if (matches.length > 0) {
+      const lastMatch = matches[matches.length - 1];
+      return cleanFragmentedText(processor(lastMatch)).trim();
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Parses an accumulated summary string into individual phase summaries.
+ *
+ * The accumulated summary format uses markdown headers with `###` for phase names
+ * and `---` as separators between phases:
+ *
+ * ```
+ * ### Implementation
+ *
+ * [content]
+ *
+ * ---
+ *
+ * ### Testing
+ *
+ * [content]
+ * ```
+ *
+ * @param summary - The accumulated summary string to parse
+ * @returns A map of phase names (lowercase) to their content, or empty map if not parseable
+ */
+const PHASE_SEPARATOR = '\n\n---\n\n';
+const PHASE_SEPARATOR_REGEX = /\n\n---\n\n/;
+const PHASE_HEADER_REGEX = /^###\s+(.+?)(?:\n|$)/;
+const PHASE_HEADER_WITH_PREFIX_REGEX = /^(###\s+)(.+?)(?:\n|$)/;
+
+function getPhaseSections(summary: string): {
+  sections: string[];
+  leadingImplementationSection: string | null;
+} {
+  const sections = summary.split(PHASE_SEPARATOR_REGEX);
+  const hasSeparator = summary.includes(PHASE_SEPARATOR);
+  const hasAnyHeader = sections.some((section) => PHASE_HEADER_REGEX.test(section.trim()));
+  const firstSection = sections[0]?.trim() ?? '';
+  const leadingImplementationSection =
+    hasSeparator && hasAnyHeader && firstSection && !PHASE_HEADER_REGEX.test(firstSection)
+      ? firstSection
+      : null;
+
+  return { sections, leadingImplementationSection };
+}
+
+export function parsePhaseSummaries(summary: string | undefined): Map<string, string> {
+  const phaseSummaries = new Map<string, string>();
+
+  if (!summary || !summary.trim()) {
+    return phaseSummaries;
+  }
+
+  const { sections, leadingImplementationSection } = getPhaseSections(summary);
+
+  // Backward compatibility for mixed format:
+  // [implementation summary without header] + --- + [### Pipeline Step ...]
+  // Treat the leading headerless section as "Implementation".
+  if (leadingImplementationSection) {
+    phaseSummaries.set('implementation', leadingImplementationSection);
+  }
+
+  for (const section of sections) {
+    // Match the phase header pattern: ### Phase Name
+    const headerMatch = section.match(PHASE_HEADER_REGEX);
+    if (headerMatch) {
+      const phaseName = headerMatch[1].trim().toLowerCase();
+      // Extract content after the header (skip the header line and leading newlines)
+      const content = section.substring(headerMatch[0].length).trim();
+      phaseSummaries.set(phaseName, content);
+    }
+  }
+
+  return phaseSummaries;
+}
+
+/**
+ * Extracts a specific phase summary from an accumulated summary string.
+ *
+ * @param summary - The accumulated summary string
+ * @param phaseName - The phase name to extract (case-insensitive, e.g., "Implementation", "implementation")
+ * @returns The content for the specified phase, or null if not found
+ */
+export function extractPhaseSummary(summary: string | undefined, phaseName: string): string | null {
+  const phaseSummaries = parsePhaseSummaries(summary);
+  const normalizedPhaseName = phaseName.toLowerCase();
+  return phaseSummaries.get(normalizedPhaseName) || null;
+}
+
+/**
+ * Gets the implementation phase summary from an accumulated summary string.
+ *
+ * This is a convenience function that handles various naming conventions:
+ * - "implementation"
+ * - "Implementation"
+ * - Any phase that contains "implement" in its name
+ *
+ * @param summary - The accumulated summary string
+ * @returns The implementation phase content, or null if not found
+ */
+export function extractImplementationSummary(summary: string | undefined): string | null {
+  if (!summary || !summary.trim()) {
+    return null;
+  }
+
+  const phaseSummaries = parsePhaseSummaries(summary);
+
+  // Try exact match first
+  const implementationContent = phaseSummaries.get('implementation');
+  if (implementationContent) {
+    return implementationContent;
+  }
+
+  // Fallback: find any phase containing "implement"
+  for (const [phaseName, content] of phaseSummaries) {
+    if (phaseName.includes('implement')) {
+      return content;
+    }
+  }
+
+  // If no phase summaries found, the summary might not be in accumulated format
+  // (legacy or non-pipeline feature). In this case, return the whole summary
+  // if it looks like a single summary (no phase headers).
+  if (!summary.includes('### ') && !summary.includes(PHASE_SEPARATOR)) {
+    return summary;
+  }
+
+  return null;
+}
+
+/**
+ * Checks if a summary string is in the accumulated multi-phase format.
+ *
+ * @param summary - The summary string to check
+ * @returns True if the summary has multiple phases, false otherwise
+ */
+export function isAccumulatedSummary(summary: string | undefined): boolean {
+  if (!summary || !summary.trim()) {
+    return false;
+  }
+
+  // Check for the presence of phase headers with separator
+  const hasMultiplePhases =
+    summary.includes(PHASE_SEPARATOR) && (summary.match(/###\s+.+/g)?.length ?? 0) > 0;
+
+  return hasMultiplePhases;
+}
+
+/**
+ * Represents a single phase entry in an accumulated summary.
+ */
+export interface PhaseSummaryEntry {
+  /** The phase name (e.g., "Implementation", "Testing", "Code Review") */
+  phaseName: string;
+  /** The content of this phase's summary */
+  content: string;
+  /** The original header line (e.g., "### Implementation") */
+  header: string;
+}
+
+/** Default phase name used for non-accumulated summaries */
+const DEFAULT_PHASE_NAME = 'Summary';
+
+/**
+ * Parses an accumulated summary into individual phase entries.
+ * Returns phases in the order they appear in the summary.
+ *
+ * The accumulated summary format:
+ * ```
+ * ### Implementation
+ *
+ * [content]
+ *
+ * ---
+ *
+ * ### Testing
+ *
+ * [content]
+ * ```
+ *
+ * @param summary - The accumulated summary string to parse
+ * @returns Array of PhaseSummaryEntry objects, or empty array if not parseable
+ */
+export function parseAllPhaseSummaries(summary: string | undefined): PhaseSummaryEntry[] {
+  const entries: PhaseSummaryEntry[] = [];
+
+  if (!summary || !summary.trim()) {
+    return entries;
+  }
+
+  // Check if this is an accumulated summary (has phase headers at line starts)
+  // Use a more precise check: ### must be at the start of a line (not just anywhere in content)
+  const hasPhaseHeaders = /^###\s+/m.test(summary);
+  if (!hasPhaseHeaders) {
+    // Not an accumulated summary - return as single entry with generic name
+    return [
+      { phaseName: DEFAULT_PHASE_NAME, content: summary, header: `### ${DEFAULT_PHASE_NAME}` },
+    ];
+  }
+
+  const { sections, leadingImplementationSection } = getPhaseSections(summary);
+
+  // Backward compatibility for mixed format:
+  // [implementation summary without header] + --- + [### Pipeline Step ...]
+  if (leadingImplementationSection) {
+    entries.push({
+      phaseName: 'Implementation',
+      content: leadingImplementationSection,
+      header: '### Implementation',
+    });
+  }
+
+  for (const section of sections) {
+    // Match the phase header pattern: ### Phase Name
+    const headerMatch = section.match(PHASE_HEADER_WITH_PREFIX_REGEX);
+    if (headerMatch) {
+      const header = headerMatch[0].trim();
+      const phaseName = headerMatch[2].trim();
+      // Extract content after the header (skip the header line and leading newlines)
+      const content = section.substring(headerMatch[0].length).trim();
+      entries.push({ phaseName, content, header });
+    }
+  }
+
+  // Fallback: if we detected phase headers but couldn't parse any entries,
+  // treat the entire summary as a single entry to avoid showing "No summary available"
+  if (entries.length === 0) {
+    return [
+      { phaseName: DEFAULT_PHASE_NAME, content: summary, header: `### ${DEFAULT_PHASE_NAME}` },
+    ];
+  }
+
+  return entries;
+}
+
+export function getLogTypeColors(type: LogEntryType): {
+  bg: string;
+  border: string;
+  text: string;
+  icon: string;
+  badge: string;
+} {
+  switch (type) {
+    case 'prompt':
+      return {
+        bg: 'bg-blue-500/10',
+        border: 'border-blue-500/30',
+        text: 'text-blue-300',
+        icon: 'text-blue-400',
+        badge: 'bg-blue-500/20 text-blue-300',
+      };
+    case 'tool_call':
+      return {
+        bg: 'bg-amber-500/10',
+        border: 'border-amber-500/30',
+        text: 'text-amber-300',
+        icon: 'text-amber-400',
+        badge: 'bg-amber-500/20 text-amber-300',
+      };
+    case 'tool_result':
+      return {
+        bg: 'bg-slate-500/10',
+        border: 'border-slate-400/30',
+        text: 'text-slate-300',
+        icon: 'text-slate-400',
+        badge: 'bg-slate-500/20 text-slate-300',
+      };
+    case 'phase':
+      return {
+        bg: 'bg-cyan-500/10',
+        border: 'border-cyan-500/30',
+        text: 'text-cyan-300',
+        icon: 'text-cyan-400',
+        badge: 'bg-cyan-500/20 text-cyan-300',
+      };
+    case 'error':
+      return {
+        bg: 'bg-red-500/10',
+        border: 'border-red-500/30',
+        text: 'text-red-300',
+        icon: 'text-red-400',
+        badge: 'bg-red-500/20 text-red-300',
+      };
+    case 'success':
+      return {
+        bg: 'bg-emerald-500/20',
+        border: 'border-emerald-500/40',
+        text: 'text-emerald-200',
+        icon: 'text-emerald-400',
+        badge: 'bg-emerald-500/30 text-emerald-200',
+      };
+    case 'warning':
+      return {
+        bg: 'bg-orange-500/10',
+        border: 'border-orange-500/30',
+        text: 'text-orange-300',
+        icon: 'text-orange-400',
+        badge: 'bg-orange-500/20 text-orange-300',
+      };
+    case 'thinking':
+      return {
+        bg: 'bg-indigo-500/10',
+        border: 'border-indigo-500/30',
+        text: 'text-indigo-300',
+        icon: 'text-indigo-400',
+        badge: 'bg-indigo-500/20 text-indigo-300',
+      };
+    case 'debug':
+      return {
+        bg: 'bg-primary/10',
+        border: 'border-primary/30',
+        text: 'text-primary',
+        icon: 'text-primary',
+        badge: 'bg-primary/20 text-primary',
+      };
+    case 'info':
+      return {
+        bg: 'bg-zinc-500/10',
+        border: 'border-zinc-500/30',
+        text: 'text-primary',
+        icon: 'text-zinc-400',
+        badge: 'bg-zinc-500/20 text-primary',
+      };
+    default:
+      return {
+        bg: 'bg-zinc-500/10',
+        border: 'border-zinc-500/30',
+        text: 'text-black',
+        icon: 'text-zinc-400',
+        badge: 'bg-zinc-500/20 text-black',
+      };
+  }
+}
diff --git a/temp_repo/apps/ui/src/lib/mobile-detect.ts b/temp_repo/apps/ui/src/lib/mobile-detect.ts
new file mode 100644
index 0000000000000000000000000000000000000000..10089d73712adfdd3038bd2992e4f57256c9c413
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/mobile-detect.ts
@@ -0,0 +1,95 @@
+/**
+ * Mobile Detection Utility
+ *
+ * Provides a cached, non-reactive mobile detection for use outside React components.
+ * Used by service worker registration, query client configuration, and other
+ * non-component code that needs to know if the device is mobile.
+ *
+ * For React components, use the `useIsMobile()` hook from `hooks/use-media-query.ts`
+ * instead, which responds to viewport changes reactively.
+ */
+
+/**
+ * Cached mobile detection result.
+ * Evaluated once on module load for consistent behavior across the app lifetime.
+ * Uses both media query and user agent for reliability:
+ * - Media query catches small desktop windows
+ * - User agent catches mobile browsers at any viewport size
+ * - Touch detection as supplementary signal
+ */
+export const isMobileDevice: boolean = (() => {
+  if (typeof window === 'undefined') return false;
+
+  // Check viewport width (consistent with useIsMobile hook's 768px breakpoint)
+  const isSmallViewport = window.matchMedia('(max-width: 768px)').matches;
+
+  // Check user agent for mobile devices
+  const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  );
+
+  // Check for touch-primary device (most mobile devices)
+  const isTouchPrimary = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+
+  // Consider it mobile if viewport is small OR if it's a mobile UA with touch
+  return isSmallViewport || (isMobileUA && isTouchPrimary);
+})();
+
+/**
+ * Check if the device has a slow connection.
+ * Uses the Network Information API when available.
+ * Falls back to mobile detection as a heuristic.
+ */
+export function isSlowConnection(): boolean {
+  if (typeof navigator === 'undefined') return false;
+
+  const connection = (
+    navigator as Navigator & {
+      connection?: {
+        effectiveType?: string;
+        saveData?: boolean;
+      };
+    }
+  ).connection;
+
+  if (connection) {
+    // Respect data saver mode
+    if (connection.saveData) return true;
+    // 2g and slow-2g are definitely slow
+    if (connection.effectiveType === '2g' || connection.effectiveType === 'slow-2g') return true;
+  }
+
+  // On mobile without connection info, assume potentially slow
+  return false;
+}
+
+/**
+ * Detect if the app is running as an installed PWA (standalone mode).
+ * Checks both the standard display-mode media query and the iOS-specific
+ * navigator.standalone property for comprehensive detection.
+ *
+ * When running as a PWA, the browser chrome is hidden so safe area insets
+ * can be reduced further to maximize usable screen space.
+ */
+export const isPwaStandalone: boolean = (() => {
+  if (typeof window === 'undefined') return false;
+
+  // Standard: works on Chrome, Edge, Firefox, and modern Safari
+  const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+
+  // iOS Safari: navigator.standalone is true when launched from home screen
+  const isIOSStandalone = (navigator as Navigator & { standalone?: boolean }).standalone === true;
+
+  return isStandalone || isIOSStandalone;
+})();
+
+/**
+ * Multiplier for polling intervals on mobile.
+ * Mobile devices benefit from less frequent polling to save battery and bandwidth.
+ * Slow connections get an even larger multiplier.
+ */
+export function getMobilePollingMultiplier(): number {
+  if (!isMobileDevice) return 1;
+  if (isSlowConnection()) return 4;
+  return 2;
+}
diff --git a/temp_repo/apps/ui/src/lib/project-init.ts b/temp_repo/apps/ui/src/lib/project-init.ts
new file mode 100644
index 0000000000000000000000000000000000000000..422882ecc08aea90d4ba62ac34e28df683a02ac0
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/project-init.ts
@@ -0,0 +1,239 @@
+/**
+ * Project initialization utilities
+ *
+ * Handles the setup of the .automaker directory structure when opening
+ * new or existing projects.
+ */
+
+import { createLogger } from '@automaker/utils/logger';
+import { getElectronAPI } from './electron';
+
+const logger = createLogger('ProjectInit');
+
+export interface ProjectInitResult {
+  success: boolean;
+  isNewProject: boolean;
+  error?: string;
+  createdFiles?: string[];
+  existingFiles?: string[];
+}
+
+/**
+ * Required files and directories in the .automaker directory
+ * Note: app_spec.txt is NOT created automatically - user must set it up via the spec editor
+ */
+const REQUIRED_STRUCTURE: {
+  directories: string[];
+  files: Record<string, string>;
+} = {
+  directories: ['.automaker', '.automaker/context', '.automaker/features', '.automaker/images'],
+  files: {
+    '.automaker/categories.json': '[]',
+  },
+};
+
+/**
+ * Initializes the .automaker directory structure for a project
+ *
+ * @param projectPath - The root path of the project
+ * @returns Result indicating what was created or if the project was already initialized
+ */
+export async function initializeProject(projectPath: string): Promise<ProjectInitResult> {
+  const api = getElectronAPI();
+  const createdFiles: string[] = [];
+  const existingFiles: string[] = [];
+
+  try {
+    // Validate that the project directory exists and is a directory
+    const projectExists = await api.exists(projectPath);
+    if (!projectExists) {
+      return {
+        success: false,
+        isNewProject: false,
+        error: `Project directory does not exist: ${projectPath}. Create it first before initializing.`,
+      };
+    }
+
+    // Verify it's actually a directory (not a file)
+    const projectStat = await api.stat(projectPath);
+    if (!projectStat.success) {
+      return {
+        success: false,
+        isNewProject: false,
+        error: projectStat.error || `Failed to stat project directory: ${projectPath}`,
+      };
+    }
+
+    if (projectStat.stats && !projectStat.stats.isDirectory) {
+      return {
+        success: false,
+        isNewProject: false,
+        error: `Project path is not a directory: ${projectPath}`,
+      };
+    }
+
+    // Initialize git repository if it doesn't exist
+    const gitDirExists = await api.exists(`${projectPath}/.git`);
+    if (!gitDirExists) {
+      logger.info('Initializing git repository...');
+      try {
+        // Initialize git and create an initial empty commit via server route
+        const result = await api.worktree?.initGit(projectPath);
+        if (result?.success && result.result?.initialized) {
+          createdFiles.push('.git');
+          logger.info('Git repository initialized with initial commit');
+        } else if (result?.success && !result.result?.initialized) {
+          // Git already existed (shouldn't happen since we checked, but handle it)
+          existingFiles.push('.git');
+          logger.info('Git repository already exists');
+        } else {
+          logger.warn('Failed to initialize git repository:', result?.error);
+        }
+      } catch (gitError) {
+        logger.warn('Failed to initialize git repository:', gitError);
+        // Don't fail the whole initialization if git init fails
+      }
+    } else {
+      existingFiles.push('.git');
+    }
+
+    // Create all required directories in parallel
+    await Promise.all(
+      REQUIRED_STRUCTURE.directories.map((dir) => api.mkdir(`${projectPath}/${dir}`))
+    );
+
+    // Check and create required files in parallel
+    await Promise.all(
+      Object.entries(REQUIRED_STRUCTURE.files).map(async ([relativePath, defaultContent]) => {
+        const fullPath = `${projectPath}/${relativePath}`;
+        const exists = await api.exists(fullPath);
+
+        if (!exists) {
+          await api.writeFile(fullPath, defaultContent as string);
+          createdFiles.push(relativePath);
+        } else {
+          existingFiles.push(relativePath);
+        }
+      })
+    );
+
+    // Determine if this is a new project (no files needed to be created since features/ is empty by default)
+    const isNewProject = createdFiles.length === 0 && existingFiles.length === 0;
+
+    return {
+      success: true,
+      isNewProject,
+      createdFiles,
+      existingFiles,
+    };
+  } catch (error) {
+    logger.error('Failed to initialize project:', error);
+    return {
+      success: false,
+      isNewProject: false,
+      error: error instanceof Error ? error.message : 'Unknown error occurred',
+    };
+  }
+}
+
+/**
+ * Checks if a project has the required .automaker structure
+ *
+ * @param projectPath - The root path of the project
+ * @returns true if all required files/directories exist
+ */
+export async function isProjectInitialized(projectPath: string): Promise<boolean> {
+  const api = getElectronAPI();
+
+  try {
+    // Check all required directories exist (no files required - features/ folder is source of truth)
+    for (const dir of REQUIRED_STRUCTURE.directories) {
+      const fullPath = `${projectPath}/${dir}`;
+      const exists = await api.exists(fullPath);
+      if (!exists) {
+        return false;
+      }
+    }
+
+    return true;
+  } catch (error) {
+    logger.error('Error checking project initialization:', error);
+    return false;
+  }
+}
+
+/**
+ * Gets a summary of what needs to be initialized for a project
+ *
+ * @param projectPath - The root path of the project
+ * @returns List of missing files/directories
+ */
+export async function getProjectInitStatus(projectPath: string): Promise<{
+  initialized: boolean;
+  missingFiles: string[];
+  existingFiles: string[];
+}> {
+  const api = getElectronAPI();
+  const missingFiles: string[] = [];
+  const existingFiles: string[] = [];
+
+  try {
+    // Check directories (no files required - features/ folder is source of truth)
+    for (const dir of REQUIRED_STRUCTURE.directories) {
+      const fullPath = `${projectPath}/${dir}`;
+      const exists = await api.exists(fullPath);
+      if (exists) {
+        existingFiles.push(dir);
+      } else {
+        missingFiles.push(dir);
+      }
+    }
+
+    return {
+      initialized: missingFiles.length === 0,
+      missingFiles,
+      existingFiles,
+    };
+  } catch (error) {
+    logger.error('Error getting project status:', error);
+    return {
+      initialized: false,
+      missingFiles: REQUIRED_STRUCTURE.directories,
+      existingFiles: [],
+    };
+  }
+}
+
+/**
+ * Checks if the app_spec.txt file exists for a project
+ *
+ * @param projectPath - The root path of the project
+ * @returns true if app_spec.txt exists
+ */
+export async function hasAppSpec(projectPath: string): Promise<boolean> {
+  const api = getElectronAPI();
+  try {
+    const fullPath = `${projectPath}/.automaker/app_spec.txt`;
+    return await api.exists(fullPath);
+  } catch (error) {
+    logger.error('Error checking app_spec.txt:', error);
+    return false;
+  }
+}
+
+/**
+ * Checks if the .automaker directory exists for a project
+ *
+ * @param projectPath - The root path of the project
+ * @returns true if .automaker directory exists
+ */
+export async function hasAutomakerDir(projectPath: string): Promise<boolean> {
+  const api = getElectronAPI();
+  try {
+    const fullPath = `${projectPath}/.automaker`;
+    return await api.exists(fullPath);
+  } catch (error) {
+    logger.error('Error checking .automaker dir:', error);
+    return false;
+  }
+}
diff --git a/temp_repo/apps/ui/src/lib/query-client.ts b/temp_repo/apps/ui/src/lib/query-client.ts
new file mode 100644
index 0000000000000000000000000000000000000000..00e555c9f38aef4ff3e0d6b6814777fe7daa2de2
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/query-client.ts
@@ -0,0 +1,181 @@
+/**
+ * React Query Client Configuration
+ *
+ * Central configuration for TanStack React Query.
+ * Provides default options for queries and mutations including
+ * caching, retries, and error handling.
+ *
+ * Mobile-aware: Automatically extends stale times and garbage collection
+ * on mobile devices to reduce unnecessary refetching, which causes
+ * blank screens, reloads, and battery drain on flaky mobile connections.
+ */
+
+import { QueryClient, keepPreviousData } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { createLogger } from '@automaker/utils/logger';
+import { isConnectionError, handleServerOffline } from './http-api-client';
+import { isMobileDevice } from './mobile-detect';
+
+const logger = createLogger('QueryClient');
+
+/**
+ * Mobile multiplier for stale times.
+ * On mobile, data stays "fresh" longer to avoid refetching on every
+ * component mount, which causes blank flickers and layout shifts.
+ * The WebSocket invalidation system still ensures critical updates
+ * (feature status changes, agent events) arrive in real-time.
+ */
+const MOBILE_STALE_MULTIPLIER = isMobileDevice ? 3 : 1;
+
+/**
+ * Default stale times for different data types.
+ * On mobile, these are multiplied by MOBILE_STALE_MULTIPLIER to reduce
+ * unnecessary network requests while WebSocket handles real-time updates.
+ */
+export const STALE_TIMES = {
+  /** Features change frequently during auto-mode */
+  FEATURES: 60 * 1000 * MOBILE_STALE_MULTIPLIER, // 1 min (3 min on mobile)
+  /** GitHub data is relatively stable */
+  GITHUB: 2 * 60 * 1000 * MOBILE_STALE_MULTIPLIER, // 2 min (6 min on mobile)
+  /** Running agents state changes very frequently */
+  RUNNING_AGENTS: 5 * 1000 * MOBILE_STALE_MULTIPLIER, // 5s (15s on mobile)
+  /** Agent output changes during streaming */
+  AGENT_OUTPUT: 5 * 1000 * MOBILE_STALE_MULTIPLIER, // 5s (15s on mobile)
+  /** Usage data with polling */
+  USAGE: 30 * 1000 * MOBILE_STALE_MULTIPLIER, // 30s (90s on mobile)
+  /** Models rarely change */
+  MODELS: 5 * 60 * 1000 * MOBILE_STALE_MULTIPLIER, // 5 min (15 min on mobile)
+  /** CLI status rarely changes */
+  CLI_STATUS: 5 * 60 * 1000 * MOBILE_STALE_MULTIPLIER, // 5 min (15 min on mobile)
+  /** Settings are relatively stable */
+  SETTINGS: 2 * 60 * 1000 * MOBILE_STALE_MULTIPLIER, // 2 min (6 min on mobile)
+  /** Worktrees change during feature development */
+  WORKTREES: 30 * 1000 * MOBILE_STALE_MULTIPLIER, // 30s (90s on mobile)
+  /** Sessions rarely change */
+  SESSIONS: 2 * 60 * 1000 * MOBILE_STALE_MULTIPLIER, // 2 min (6 min on mobile)
+  /** Default for unspecified queries */
+  DEFAULT: 30 * 1000 * MOBILE_STALE_MULTIPLIER, // 30s (90s on mobile)
+} as const;
+
+/**
+ * Default garbage collection times (gcTime, formerly cacheTime).
+ * On mobile, cache is kept longer so data persists across navigations
+ * and component unmounts, preventing blank screens on re-mount.
+ */
+export const GC_TIMES = {
+  /** Default garbage collection time - must exceed persist maxAge for cache to survive tab discard */
+  DEFAULT: isMobileDevice ? 15 * 60 * 1000 : 10 * 60 * 1000, // 15 min on mobile, 10 min desktop
+  /** Extended for expensive queries */
+  EXTENDED: isMobileDevice ? 30 * 60 * 1000 : 15 * 60 * 1000, // 30 min on mobile, 15 min desktop
+} as const;
+
+/**
+ * Global error handler for queries
+ */
+const handleQueryError = (error: Error) => {
+  logger.error('Query error:', error);
+
+  // Check for connection errors (server offline)
+  if (isConnectionError(error)) {
+    handleServerOffline();
+    return;
+  }
+
+  // Don't toast for auth errors - those are handled by http-api-client
+  if (error.message === 'Unauthorized') {
+    return;
+  }
+};
+
+/**
+ * Global error handler for mutations
+ */
+const handleMutationError = (error: Error) => {
+  logger.error('Mutation error:', error);
+
+  // Check for connection errors
+  if (isConnectionError(error)) {
+    handleServerOffline();
+    return;
+  }
+
+  // Don't toast for auth errors
+  if (error.message === 'Unauthorized') {
+    return;
+  }
+
+  // Show error toast for other errors
+  toast.error('Operation failed', {
+    description: error.message || 'An unexpected error occurred',
+  });
+};
+
+/**
+ * Create and configure the QueryClient singleton.
+ *
+ * Mobile optimizations:
+ * - refetchOnWindowFocus disabled on mobile (prevents refetch storms when
+ *   switching apps, which causes the blank screen + reload cycle)
+ * - refetchOnMount uses 'always' on desktop but only refetches stale data
+ *   on mobile (prevents unnecessary network requests on navigation)
+ * - Longer stale times and GC times via STALE_TIMES and GC_TIMES above
+ * - structuralSharing enabled to minimize re-renders when data hasn't changed
+ */
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: STALE_TIMES.DEFAULT,
+      gcTime: GC_TIMES.DEFAULT,
+      retry: (failureCount, error) => {
+        // Don't retry on auth errors
+        if (error instanceof Error && error.message === 'Unauthorized') {
+          return false;
+        }
+        // Retry connection errors a few times before declaring server offline.
+        // This handles transient network blips without immediately redirecting to login.
+        if (isConnectionError(error)) {
+          return failureCount < 3;
+        }
+        // Retry up to 2 times for other errors (3 on mobile for flaky connections)
+        return failureCount < (isMobileDevice ? 3 : 2);
+      },
+      retryDelay: (attemptIndex, error) => {
+        // Use shorter delays for connection errors to recover quickly from blips
+        if (isConnectionError(error)) {
+          return Math.min(1000 * 2 ** attemptIndex, 5000); // 1s, 2s, 4s (capped at 5s)
+        }
+        return Math.min(1000 * 2 ** attemptIndex, 30000);
+      },
+      // On mobile, disable refetch on focus to prevent the blank screen + reload
+      // cycle that occurs when the user switches back to the app. WebSocket
+      // invalidation handles real-time updates; polling handles the rest.
+      refetchOnWindowFocus: !isMobileDevice,
+      refetchOnReconnect: true,
+      // On mobile, only refetch on mount if data is stale (true = refetch only when stale).
+      // On desktop, always refetch on mount for freshest data ('always' = refetch even if fresh).
+      // This prevents unnecessary network requests when navigating between
+      // routes, which was causing blank screen flickers on mobile.
+      refetchOnMount: isMobileDevice ? true : 'always',
+      // Keep previous data visible while refetching to prevent blank flashes.
+      // This is especially important on mobile where network is slower.
+      placeholderData: isMobileDevice ? keepPreviousData : undefined,
+    },
+    mutations: {
+      onError: handleMutationError,
+      retry: false, // Don't auto-retry mutations
+    },
+  },
+});
+
+/**
+ * Set up global query error handling
+ * This catches errors that aren't handled by individual queries
+ */
+queryClient.getQueryCache().subscribe((event) => {
+  if (event.type === 'updated' && event.query.state.status === 'error') {
+    const error = event.query.state.error;
+    if (error instanceof Error) {
+      handleQueryError(error);
+    }
+  }
+});
diff --git a/temp_repo/apps/ui/src/lib/query-keys.ts b/temp_repo/apps/ui/src/lib/query-keys.ts
new file mode 100644
index 0000000000000000000000000000000000000000..864622f11d00e0b8714bd0f3de5de70eead19faf
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/query-keys.ts
@@ -0,0 +1,293 @@
+/**
+ * Query Keys Factory
+ *
+ * Centralized query key definitions for React Query.
+ * Following the factory pattern for type-safe, consistent query keys.
+ *
+ * @see https://tkdodo.eu/blog/effective-react-query-keys
+ */
+
+/**
+ * Query keys for all API endpoints
+ *
+ * Structure follows the pattern:
+ * - ['entity'] for listing/global
+ * - ['entity', id] for single item
+ * - ['entity', id, 'sub-resource'] for nested resources
+ */
+export const queryKeys = {
+  // ============================================
+  // Features
+  // ============================================
+  features: {
+    /** All features for a project */
+    all: (projectPath: string) => ['features', projectPath] as const,
+    /** Single feature */
+    single: (projectPath: string, featureId: string) =>
+      ['features', projectPath, featureId] as const,
+    /** Agent output for a feature */
+    agentOutput: (projectPath: string, featureId: string) =>
+      ['features', projectPath, featureId, 'output'] as const,
+  },
+
+  // ============================================
+  // Worktrees
+  // ============================================
+  worktrees: {
+    /** All worktrees for a project */
+    all: (projectPath: string) => ['worktrees', projectPath] as const,
+    /** Single worktree info */
+    single: (projectPath: string, featureId: string) =>
+      ['worktrees', projectPath, featureId] as const,
+    /** Branches for a worktree */
+    branches: (worktreePath: string, includeRemote = false) =>
+      ['worktrees', 'branches', worktreePath, { includeRemote }] as const,
+    /** Worktree status */
+    status: (projectPath: string, featureId: string) =>
+      ['worktrees', projectPath, featureId, 'status'] as const,
+    /** Worktree diffs */
+    diffs: (projectPath: string, featureId: string) =>
+      ['worktrees', projectPath, featureId, 'diffs'] as const,
+    /** Init script for a project */
+    initScript: (projectPath: string) => ['worktrees', projectPath, 'init-script'] as const,
+    /** Available editors */
+    editors: () => ['worktrees', 'editors'] as const,
+  },
+
+  // ============================================
+  // GitHub
+  // ============================================
+  github: {
+    /** GitHub issues for a project */
+    issues: (projectPath: string) => ['github', 'issues', projectPath] as const,
+    /** GitHub PRs for a project */
+    prs: (projectPath: string) => ['github', 'prs', projectPath] as const,
+    /** GitHub validations for a project */
+    validations: (projectPath: string) => ['github', 'validations', projectPath] as const,
+    /** Single validation */
+    validation: (projectPath: string, issueNumber: number) =>
+      ['github', 'validations', projectPath, issueNumber] as const,
+    /** Issue comments */
+    issueComments: (projectPath: string, issueNumber: number) =>
+      ['github', 'issues', projectPath, issueNumber, 'comments'] as const,
+    /** PR review comments */
+    prReviewComments: (projectPath: string, prNumber: number) =>
+      ['github', 'prs', projectPath, prNumber, 'review-comments'] as const,
+    /** Remote info */
+    remote: (projectPath: string) => ['github', 'remote', projectPath] as const,
+  },
+
+  // ============================================
+  // Settings
+  // ============================================
+  settings: {
+    /** Global settings */
+    global: () => ['settings', 'global'] as const,
+    /** Project-specific settings */
+    project: (projectPath: string) => ['settings', 'project', projectPath] as const,
+    /** Settings status */
+    status: () => ['settings', 'status'] as const,
+    /** Credentials (API keys) */
+    credentials: () => ['settings', 'credentials'] as const,
+    /** Discovered agents */
+    agents: (projectPath: string, sources?: Array<'user' | 'project'>) =>
+      ['settings', 'agents', projectPath, sources ?? []] as const,
+  },
+
+  // ============================================
+  // Usage & Billing
+  // ============================================
+  usage: {
+    /** Claude API usage */
+    claude: () => ['usage', 'claude'] as const,
+    /** Codex API usage */
+    codex: () => ['usage', 'codex'] as const,
+    /** z.ai API usage */
+    zai: () => ['usage', 'zai'] as const,
+    /** Gemini API usage */
+    gemini: () => ['usage', 'gemini'] as const,
+  },
+
+  // ============================================
+  // Models
+  // ============================================
+  models: {
+    /** Available models */
+    available: () => ['models', 'available'] as const,
+    /** Codex models */
+    codex: () => ['models', 'codex'] as const,
+    /** OpenCode models */
+    opencode: () => ['models', 'opencode'] as const,
+    /** OpenCode providers */
+    opencodeProviders: () => ['models', 'opencode', 'providers'] as const,
+    /** Provider status */
+    providers: () => ['models', 'providers'] as const,
+  },
+
+  // ============================================
+  // Sessions
+  // ============================================
+  sessions: {
+    /** All sessions */
+    all: (includeArchived?: boolean) => ['sessions', { includeArchived }] as const,
+    /** Session history */
+    history: (sessionId: string) => ['sessions', sessionId, 'history'] as const,
+    /** Session queue */
+    queue: (sessionId: string) => ['sessions', sessionId, 'queue'] as const,
+  },
+
+  // ============================================
+  // Running Agents
+  // ============================================
+  runningAgents: {
+    /** All running agents */
+    all: () => ['runningAgents'] as const,
+  },
+
+  // ============================================
+  // Auto Mode
+  // ============================================
+  autoMode: {
+    /** Auto mode status */
+    status: (projectPath?: string) => ['autoMode', 'status', projectPath] as const,
+    /** Context exists check */
+    contextExists: (projectPath: string, featureId: string) =>
+      ['autoMode', projectPath, featureId, 'context'] as const,
+  },
+
+  // ============================================
+  // Ideation
+  // ============================================
+  ideation: {
+    /** Ideation prompts */
+    prompts: () => ['ideation', 'prompts'] as const,
+    /** Ideas for a project */
+    ideas: (projectPath: string) => ['ideation', 'ideas', projectPath] as const,
+    /** Single idea */
+    idea: (projectPath: string, ideaId: string) =>
+      ['ideation', 'ideas', projectPath, ideaId] as const,
+    /** Session */
+    session: (projectPath: string, sessionId: string) =>
+      ['ideation', 'session', projectPath, sessionId] as const,
+  },
+
+  // ============================================
+  // CLI Status
+  // ============================================
+  cli: {
+    /** Claude CLI status */
+    claude: () => ['cli', 'claude'] as const,
+    /** Cursor CLI status */
+    cursor: () => ['cli', 'cursor'] as const,
+    /** Codex CLI status */
+    codex: () => ['cli', 'codex'] as const,
+    /** OpenCode CLI status */
+    opencode: () => ['cli', 'opencode'] as const,
+    /** Gemini CLI status */
+    gemini: () => ['cli', 'gemini'] as const,
+    /** Copilot SDK status */
+    copilot: () => ['cli', 'copilot'] as const,
+    /** GitHub CLI status */
+    github: () => ['cli', 'github'] as const,
+    /** API keys status */
+    apiKeys: () => ['cli', 'apiKeys'] as const,
+    /** Platform info */
+    platform: () => ['cli', 'platform'] as const,
+  },
+
+  // ============================================
+  // Cursor Permissions
+  // ============================================
+  cursorPermissions: {
+    /** Cursor permissions for a project */
+    permissions: (projectPath?: string) => ['cursorPermissions', projectPath] as const,
+  },
+
+  // ============================================
+  // Workspace
+  // ============================================
+  workspace: {
+    /** Workspace config */
+    config: () => ['workspace', 'config'] as const,
+    /** Workspace directories */
+    directories: () => ['workspace', 'directories'] as const,
+  },
+
+  // ============================================
+  // MCP (Model Context Protocol)
+  // ============================================
+  mcp: {
+    /** MCP server tools */
+    tools: (serverId: string) => ['mcp', 'tools', serverId] as const,
+  },
+
+  // ============================================
+  // Pipeline
+  // ============================================
+  pipeline: {
+    /** Pipeline config for a project */
+    config: (projectPath: string) => ['pipeline', projectPath] as const,
+  },
+
+  // ============================================
+  // Suggestions
+  // ============================================
+  suggestions: {
+    /** Suggestions status */
+    status: () => ['suggestions', 'status'] as const,
+  },
+
+  // ============================================
+  // Spec Regeneration
+  // ============================================
+  specRegeneration: {
+    /** Spec regeneration status */
+    status: (projectPath?: string) => ['specRegeneration', 'status', projectPath] as const,
+  },
+
+  // ============================================
+  // Spec
+  // ============================================
+  spec: {
+    /** Spec file content */
+    file: (projectPath: string) => ['spec', 'file', projectPath] as const,
+  },
+
+  // ============================================
+  // Context
+  // ============================================
+  context: {
+    /** File description */
+    file: (filePath: string) => ['context', 'file', filePath] as const,
+    /** Image description */
+    image: (imagePath: string) => ['context', 'image', imagePath] as const,
+  },
+
+  // ============================================
+  // File System
+  // ============================================
+  fs: {
+    /** Directory listing */
+    readdir: (dirPath: string) => ['fs', 'readdir', dirPath] as const,
+    /** File existence */
+    exists: (filePath: string) => ['fs', 'exists', filePath] as const,
+    /** File stats */
+    stat: (filePath: string) => ['fs', 'stat', filePath] as const,
+  },
+
+  // ============================================
+  // Git
+  // ============================================
+  git: {
+    /** Git diffs for a project */
+    diffs: (projectPath: string) => ['git', 'diffs', projectPath] as const,
+    /** File diff */
+    fileDiff: (projectPath: string, filePath: string) =>
+      ['git', 'diffs', projectPath, filePath] as const,
+  },
+} as const;
+
+/**
+ * Type helper to extract query key types
+ */
+export type QueryKeys = typeof queryKeys;
diff --git a/temp_repo/apps/ui/src/lib/query-persist.ts b/temp_repo/apps/ui/src/lib/query-persist.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a397fbf4a2a36c9c07090dd091d687ea1b38d427
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/query-persist.ts
@@ -0,0 +1,133 @@
+/**
+ * React Query Cache Persistence
+ *
+ * Persists the React Query cache to IndexedDB so that after a tab discard
+ * or page reload, the user sees cached data instantly while fresh data
+ * loads in the background.
+ *
+ * Uses @tanstack/react-query-persist-client with idb-keyval for IndexedDB storage.
+ * Cached data is treated as stale on restore and silently refetched.
+ */
+
+import { get, set, del } from 'idb-keyval';
+import type { PersistedClient, Persister } from '@tanstack/react-query-persist-client';
+import { createLogger } from '@automaker/utils/logger';
+
+const logger = createLogger('QueryPersist');
+
+const IDB_KEY = 'automaker-react-query-cache';
+
+/**
+ * Maximum age of persisted cache before it's discarded (24 hours).
+ * After this time, the cache is considered too old and will be removed.
+ */
+export const PERSIST_MAX_AGE_MS = 24 * 60 * 60 * 1000;
+
+/**
+ * Throttle time for persisting cache to IndexedDB.
+ * Prevents excessive writes during rapid query updates.
+ */
+export const PERSIST_THROTTLE_MS = 2000;
+
+/**
+ * Query key prefixes that should NOT be persisted.
+ * Auth-related and volatile data should always be fetched fresh.
+ */
+const EXCLUDED_QUERY_KEY_PREFIXES = ['auth', 'health', 'wsToken', 'sandbox'];
+
+/**
+ * Check if a query key should be excluded from persistence
+ */
+function shouldExcludeQuery(queryKey: readonly unknown[]): boolean {
+  if (queryKey.length === 0) return false;
+  const firstKey = String(queryKey[0]);
+  return EXCLUDED_QUERY_KEY_PREFIXES.some((prefix) => firstKey.startsWith(prefix));
+}
+
+/**
+ * Check whether there is a recent enough React Query cache in IndexedDB
+ * to consider the app "warm" (i.e., safe to skip blocking on the server
+ * health check and show the UI immediately).
+ *
+ * Returns true only if:
+ * 1. The cache exists and is recent (within maxAgeMs)
+ * 2. The cache buster matches the current build hash
+ *
+ * If the buster doesn't match, PersistQueryClientProvider will wipe the
+ * cache on restore — so we must NOT skip the server wait in that case,
+ * otherwise the board renders with empty queries and no data.
+ *
+ * This is a read-only probe — it does not restore the cache (that is
+ * handled by PersistQueryClientProvider automatically).
+ */
+export async function hasWarmIDBCache(
+  currentBuster: string,
+  maxAgeMs = PERSIST_MAX_AGE_MS
+): Promise<boolean> {
+  try {
+    const client = await get<PersistedClient>(IDB_KEY);
+    if (!client) return false;
+    // PersistedClient stores a `timestamp` (ms) when it was last persisted
+    const age = Date.now() - (client.timestamp ?? 0);
+    if (age >= maxAgeMs) return false;
+    // If the buster doesn't match, PersistQueryClientProvider will wipe the cache.
+    // Treat this as a cold start — we need fresh data from the server.
+    if (currentBuster && client.buster !== currentBuster) return false;
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Create an IndexedDB-based persister for React Query.
+ *
+ * This persister:
+ * - Stores the full query cache in IndexedDB under a single key
+ * - Filters out auth/health queries that shouldn't be persisted
+ * - Handles errors gracefully (cache persistence is best-effort)
+ */
+export function createIDBPersister(): Persister {
+  return {
+    persistClient: async (client: PersistedClient) => {
+      try {
+        // Filter out excluded queries before persisting
+        const filteredClient: PersistedClient = {
+          ...client,
+          clientState: {
+            ...client.clientState,
+            queries: client.clientState.queries.filter(
+              (query) => !shouldExcludeQuery(query.queryKey)
+            ),
+            // Don't persist mutations (they should be re-triggered, not replayed)
+            mutations: [],
+          },
+        };
+        await set(IDB_KEY, filteredClient);
+      } catch (error) {
+        logger.warn('Failed to persist query cache to IndexedDB:', error);
+      }
+    },
+
+    restoreClient: async () => {
+      try {
+        const client = await get<PersistedClient>(IDB_KEY);
+        if (client) {
+          logger.info('Restored React Query cache from IndexedDB');
+        }
+        return client ?? undefined;
+      } catch (error) {
+        logger.warn('Failed to restore query cache from IndexedDB:', error);
+        return undefined;
+      }
+    },
+
+    removeClient: async () => {
+      try {
+        await del(IDB_KEY);
+      } catch (error) {
+        logger.warn('Failed to remove query cache from IndexedDB:', error);
+      }
+    },
+  };
+}
diff --git a/temp_repo/apps/ui/src/lib/settings-utils.ts b/temp_repo/apps/ui/src/lib/settings-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..01c62a13a53bc49b9b0a83933e1306a8d6a797b1
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/settings-utils.ts
@@ -0,0 +1,54 @@
+/**
+ * Shared settings utility functions
+ */
+
+export interface WorktreeSelection {
+  path: string | null;
+  branch: string;
+}
+
+/**
+ * Check whether an unknown value is a valid worktree selection.
+ */
+export function isValidWorktreeSelection(value: unknown): value is WorktreeSelection {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+
+  const entry = value as Record<string, unknown>;
+  const branch = entry.branch;
+  const path = entry.path;
+
+  if (typeof branch !== 'string' || branch.trim().length === 0) {
+    return false;
+  }
+
+  if (path === null) {
+    return true;
+  }
+
+  return typeof path === 'string' && path.trim().length > 0;
+}
+
+/**
+ * Validate and sanitize currentWorktreeByProject entries.
+ *
+ * Keeps all valid entries (both main branch and feature worktrees).
+ * The validation against actual worktrees happens in use-worktrees.ts
+ * which resets to main branch if the selected worktree no longer exists.
+ *
+ * Only drops entries with invalid structure (not an object, missing/invalid
+ * path or branch).
+ */
+export function sanitizeWorktreeByProject(
+  raw: Record<string, unknown> | undefined
+): Record<string, WorktreeSelection> {
+  if (!raw) return {};
+  const sanitized: Record<string, WorktreeSelection> = {};
+  for (const [projectPath, worktree] of Object.entries(raw)) {
+    if (isValidWorktreeSelection(worktree)) {
+      sanitized[projectPath] = worktree;
+    }
+  }
+  return sanitized;
+}
diff --git a/temp_repo/apps/ui/src/lib/storage.ts b/temp_repo/apps/ui/src/lib/storage.ts
new file mode 100644
index 0000000000000000000000000000000000000000..514f9c6ef57c16970e2380c6fc1d0505f315678c
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/storage.ts
@@ -0,0 +1,100 @@
+/**
+ * Centralized localStorage abstraction module
+ *
+ * Provides type-safe wrappers for all localStorage operations.
+ * All localStorage access should go through this module to ensure
+ * consistent error handling and environment checks.
+ */
+
+/**
+ * Check if localStorage is available in the current environment
+ */
+function isStorageAvailable(): boolean {
+  return typeof window !== 'undefined' && window.localStorage !== undefined;
+}
+
+/**
+ * Get an item from localStorage
+ * @param key - The storage key
+ * @returns The stored value or null if not found/unavailable
+ */
+export function getItem(key: string): string | null {
+  if (!isStorageAvailable()) return null;
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Set an item in localStorage
+ * @param key - The storage key
+ * @param value - The value to store
+ * @returns true if successful, false otherwise
+ */
+export function setItem(key: string, value: string): boolean {
+  if (!isStorageAvailable()) return false;
+  try {
+    window.localStorage.setItem(key, value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Remove an item from localStorage
+ * @param key - The storage key to remove
+ * @returns true if successful, false otherwise
+ */
+export function removeItem(key: string): boolean {
+  if (!isStorageAvailable()) return false;
+  try {
+    window.localStorage.removeItem(key);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Get a JSON-parsed item from localStorage
+ * @param key - The storage key
+ * @returns The parsed value or null if not found/invalid
+ */
+export function getJSON<T>(key: string): T | null {
+  const value = getItem(key);
+  if (!value) return null;
+  try {
+    return JSON.parse(value) as T;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Set a JSON-stringified item in localStorage
+ * @param key - The storage key
+ * @param value - The value to stringify and store
+ * @returns true if successful, false otherwise
+ */
+export function setJSON<T>(key: string, value: T): boolean {
+  try {
+    return setItem(key, JSON.stringify(value));
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Storage module for named exports
+ */
+export const storage = {
+  getItem,
+  setItem,
+  removeItem,
+  getJSON,
+  setJSON,
+  isAvailable: isStorageAvailable,
+};
diff --git a/temp_repo/apps/ui/src/lib/summary-selection.ts b/temp_repo/apps/ui/src/lib/summary-selection.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3553d3f479ad24e2222815bc78d50e8428036a84
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/summary-selection.ts
@@ -0,0 +1,14 @@
+export type SummaryValue = string | null | undefined;
+
+/**
+ * Returns the first summary candidate that contains non-whitespace content.
+ * The original string is returned (without trimming) to preserve formatting.
+ */
+export function getFirstNonEmptySummary(...candidates: SummaryValue[]): string | null {
+  for (const candidate of candidates) {
+    if (typeof candidate === 'string' && candidate.trim().length > 0) {
+      return candidate;
+    }
+  }
+  return null;
+}
diff --git a/temp_repo/apps/ui/src/lib/templates.ts b/temp_repo/apps/ui/src/lib/templates.ts
new file mode 100644
index 0000000000000000000000000000000000000000..20aeed8ebb4c5db511cdd3887700109401706198
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/templates.ts
@@ -0,0 +1,103 @@
+/**
+ * Starter Kit Templates
+ *
+ * Define GitHub templates that users can clone when creating new projects.
+ */
+
+export interface StarterTemplate {
+  id: string;
+  name: string;
+  description: string;
+  repoUrl: string;
+  techStack: string[];
+  features: string[];
+  category: 'fullstack' | 'frontend' | 'backend' | 'ai' | 'other';
+  author: string;
+}
+
+export const starterTemplates: StarterTemplate[] = [
+  {
+    id: 'automaker-starter-kit',
+    name: 'Automaker Starter Kit',
+    description:
+      'An online community and training platform template for aspiring full stack engineers. Master frontend and backend development, build real-world projects, and launch your software engineering career.',
+    repoUrl: 'https://github.com/webdevcody/automaker-starter-kit',
+    techStack: [
+      'TanStack Start',
+      'PostgreSQL',
+      'Drizzle ORM',
+      'Better Auth',
+      'Tailwind CSS',
+      'Radix UI',
+      'Stripe',
+      'AWS S3/R2',
+    ],
+    features: [
+      'Community posts with comments and reactions',
+      'User profiles and portfolios',
+      'Calendar event management',
+      'Direct messaging',
+      'Member discovery directory',
+      'Real-time notifications',
+      'Classroom modules for learning',
+      'Tiered subscriptions (free/basic/pro)',
+      'File uploads with presigned URLs',
+    ],
+    category: 'fullstack',
+    author: 'webdevcody',
+  },
+  {
+    id: 'agentic-jumpstart',
+    name: 'Agentic Jumpstart',
+    description:
+      'A starter template for building agentic AI applications with a pre-configured development environment including database setup, Docker support, and TypeScript configuration.',
+    repoUrl: 'https://github.com/webdevcody/agentic-jumpstart-starter-kit',
+    techStack: ['TypeScript', 'Vite', 'Drizzle ORM', 'Docker', 'PostCSS'],
+    features: [
+      'Pre-configured VS Code settings',
+      'Docker Compose setup',
+      'Database migrations with Drizzle',
+      'Type-safe development',
+      'Environment setup with .env.example',
+    ],
+    category: 'ai',
+    author: 'webdevcody',
+  },
+  {
+    id: 'full-stack-campus',
+    name: 'Full Stack Campus',
+    description:
+      'A feature-driven development template for building community platforms. Includes authentication, Stripe payments, file uploads, and real-time features using TanStack Start.',
+    repoUrl: 'https://github.com/webdevcody/full-stack-campus',
+    techStack: [
+      'TanStack Start',
+      'PostgreSQL',
+      'Drizzle ORM',
+      'Better Auth',
+      'Tailwind CSS',
+      'Radix UI',
+      'Stripe',
+      'AWS S3/R2',
+    ],
+    features: [
+      'Community posts with comments and reactions',
+      'User profiles and portfolios',
+      'Calendar event management',
+      'Direct messaging',
+      'Member discovery directory',
+      'Real-time notifications',
+      'Tiered subscriptions (free/basic/pro)',
+      'File uploads with presigned URLs',
+    ],
+    category: 'fullstack',
+    author: 'webdevcody',
+  },
+];
+
+export function getTemplateById(id: string): StarterTemplate | undefined {
+  return starterTemplates.find((t) => t.id === id);
+}
+
+export function getTemplatesByCategory(category: StarterTemplate['category']): StarterTemplate[] {
+  return starterTemplates.filter((t) => t.category === category);
+}
diff --git a/temp_repo/apps/ui/src/lib/utils.ts b/temp_repo/apps/ui/src/lib/utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c3fe6ea17c8492b9daef085b561f570bcaeda692
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/utils.ts
@@ -0,0 +1,244 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import type { ModelAlias, ModelProvider } from '@/store/app-store';
+import {
+  normalizeThinkingLevelForModel,
+  normalizeReasoningEffortForModel,
+  LEGACY_CLAUDE_ALIAS_MAP,
+  type PhaseModelEntry,
+} from '@automaker/types';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// Re-export getErrorMessage from @automaker/utils to maintain backward compatibility
+// for components that already import it from here
+// NOTE: Using subpath export to avoid pulling in Node.js-specific dependencies
+// (the main @automaker/utils barrel imports modules that depend on @automaker/platform)
+export { getErrorMessage } from '@automaker/utils/error-handler';
+
+/**
+ * Migrate legacy model aliases to canonical prefixed IDs.
+ * Returns the canonical ID if it's a legacy alias, otherwise returns the input unchanged.
+ */
+export function migrateModelId(modelId: string | undefined): string | undefined {
+  if (!modelId) return modelId;
+  return LEGACY_CLAUDE_ALIAS_MAP[modelId as keyof typeof LEGACY_CLAUDE_ALIAS_MAP] || modelId;
+}
+
+/**
+ * Normalize a model entry by ensuring thinking levels and reasoning efforts
+ * are valid for the selected model.
+ */
+export function normalizeModelEntry(entry: PhaseModelEntry): PhaseModelEntry {
+  const model = entry.model;
+
+  return {
+    model,
+    providerId: entry.providerId,
+    thinkingLevel: normalizeThinkingLevelForModel(model, entry.thinkingLevel),
+    reasoningEffort: normalizeReasoningEffortForModel(model, entry.reasoningEffort),
+  };
+}
+
+/**
+ * Determine if the current model supports extended thinking controls
+ * Note: This is for Claude's "thinking levels" only, not Codex's "reasoning effort"
+ *
+ * Rules:
+ * - Claude models: support thinking (sonnet-4.5-thinking, opus-4.5-thinking, etc.)
+ * - Cursor models: NO thinking controls (handled internally by Cursor CLI)
+ * - Codex models: NO thinking controls (they use reasoningEffort instead)
+ */
+export function modelSupportsThinking(_model?: ModelAlias | string): boolean {
+  if (!_model) return true;
+
+  // Cursor models - don't show thinking controls
+  if (_model.startsWith('cursor-')) {
+    return false;
+  }
+
+  // Codex models - use reasoningEffort, not thinkingLevel
+  if (_model.startsWith('codex-')) {
+    return false;
+  }
+
+  // Bare gpt- models (legacy) - assume Codex, no thinking controls
+  if (_model.startsWith('gpt-')) {
+    return false;
+  }
+
+  // All Claude models support thinking
+  return true;
+}
+
+/**
+ * Determine the provider from a model string
+ * Mirrors the logic in apps/server/src/providers/provider-factory.ts
+ */
+export function getProviderFromModel(model?: string): ModelProvider {
+  if (!model) return 'claude';
+
+  // Check for Cursor models (cursor- prefix)
+  if (model.startsWith('cursor-') || model.startsWith('cursor:')) {
+    return 'cursor';
+  }
+
+  // Check for Codex/OpenAI models (codex- prefix, gpt- prefix, or o-series)
+  if (
+    model.startsWith('codex-') ||
+    model.startsWith('codex:') ||
+    model.startsWith('gpt-') ||
+    /^o\d/.test(model)
+  ) {
+    return 'codex';
+  }
+
+  // Default to Claude
+  return 'claude';
+}
+
+/**
+ * Get display name for a model
+ * Handles both aliases (e.g., "sonnet") and full model IDs (e.g., "claude-sonnet-4-20250514")
+ */
+export function getModelDisplayName(model: ModelAlias | string): string {
+  const displayNames: Record<string, string> = {
+    // Claude aliases
+    haiku: 'Claude Haiku',
+    sonnet: 'Claude Sonnet',
+    opus: 'Claude Opus',
+    // Claude canonical IDs (without version suffix)
+    'claude-haiku': 'Claude Haiku',
+    'claude-sonnet': 'Claude Sonnet',
+    'claude-opus': 'Claude Opus',
+    // Claude full model IDs (returned by server)
+    'claude-haiku-4-5': 'Claude Haiku',
+    'claude-sonnet-4-20250514': 'Claude Sonnet',
+    'claude-opus-4-6': 'Claude Opus',
+    // Codex models
+    'codex-gpt-5.2': 'GPT-5.2',
+    'codex-gpt-5.1-codex-max': 'GPT-5.1 Codex Max',
+    'codex-gpt-5.1-codex': 'GPT-5.1 Codex',
+    'codex-gpt-5.1-codex-mini': 'GPT-5.1 Codex Mini',
+    'codex-gpt-5.1': 'GPT-5.1',
+    // Cursor models (common ones)
+    'cursor-auto': 'Cursor Auto',
+    'cursor-composer-1': 'Composer 1',
+    'cursor-gpt-5.2': 'GPT-5.2',
+    'cursor-gpt-5.1': 'GPT-5.1',
+  };
+  return displayNames[model] || model;
+}
+
+/**
+ * Truncate a description string with ellipsis
+ */
+export function truncateDescription(description: string, maxLength = 50): string {
+  if (description.length <= maxLength) {
+    return description;
+  }
+  return `${description.slice(0, maxLength)}...`;
+}
+
+/**
+ * Normalize a file path to use forward slashes consistently.
+ * This is important for cross-platform compatibility (Windows uses backslashes).
+ */
+export function normalizePath(p: string): string {
+  return p.replace(/\\/g, '/');
+}
+
+/**
+ * Compare two paths for equality, handling cross-platform differences.
+ * Normalizes both paths to forward slashes before comparison.
+ */
+export function pathsEqual(p1: string | undefined | null, p2: string | undefined | null): boolean {
+  if (!p1 || !p2) return p1 === p2;
+  return normalizePath(p1) === normalizePath(p2);
+}
+
+/**
+ * Detect if running on macOS.
+ * Checks Electron process.platform first, then falls back to navigator APIs.
+ */
+export const isMac =
+  typeof process !== 'undefined' && process.platform === 'darwin'
+    ? true
+    : typeof navigator !== 'undefined' &&
+      (/Mac/.test(navigator.userAgent) ||
+        (navigator.platform ? navigator.platform.toLowerCase().includes('mac') : false));
+
+/**
+ * Sanitize a string for use in data-testid attributes.
+ * Creates a deterministic, URL-safe identifier from any input string.
+ *
+ * Transformations:
+ * - Convert to lowercase
+ * - Replace spaces with hyphens
+ * - Remove all non-alphanumeric characters (except hyphens)
+ * - Collapse multiple consecutive hyphens into a single hyphen
+ * - Trim leading/trailing hyphens
+ *
+ * @param name - The string to sanitize (e.g., project name, feature title)
+ * @returns A sanitized string safe for CSS selectors and test IDs
+ *
+ * @example
+ * sanitizeForTestId("My Awesome Project!") // "my-awesome-project"
+ * sanitizeForTestId("test-project-123")    // "test-project-123"
+ * sanitizeForTestId("  Foo  Bar  ")        // "foo-bar"
+ */
+export function sanitizeForTestId(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-]/g, '')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+}
+
+/**
+ * Generate a UUID v4 string.
+ *
+ * Uses crypto.getRandomValues() which works in all modern browsers,
+ * including non-secure contexts (e.g., Docker via HTTP).
+ *
+ * @returns A RFC 4122 compliant UUID v4 string (e.g., "550e8400-e29b-41d4-a716-446655440000")
+ */
+export function generateUUID(): string {
+  if (typeof crypto === 'undefined' || typeof crypto.getRandomValues === 'undefined') {
+    throw new Error('Cryptographically secure random number generator not available.');
+  }
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+
+  // Set version (4) and variant (RFC 4122) bits
+  bytes[6] = (bytes[6] & 0x0f) | 0x40; // Version 4
+  bytes[8] = (bytes[8] & 0x3f) | 0x80; // Variant RFC 4122
+
+  // Convert to hex string with proper UUID format
+  const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, '0')).join('');
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}
+
+/**
+ * Format a date as relative time (e.g., "2 minutes ago", "3 hours ago")
+ */
+export function formatRelativeTime(date: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+
+  if (diffSec < 0) return date.toLocaleDateString();
+
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+
+  if (diffSec < 60) return 'just now';
+  if (diffMin < 60) return `${diffMin} minute${diffMin === 1 ? '' : 's'} ago`;
+  if (diffHour < 24) return `${diffHour} hour${diffHour === 1 ? '' : 's'} ago`;
+  if (diffDay < 7) return `${diffDay} day${diffDay === 1 ? '' : 's'} ago`;
+  return date.toLocaleDateString();
+}
diff --git a/temp_repo/apps/ui/src/lib/workspace-config.ts b/temp_repo/apps/ui/src/lib/workspace-config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..596de564d4b7312a744d6faeec98e386ca5a514e
--- /dev/null
+++ b/temp_repo/apps/ui/src/lib/workspace-config.ts
@@ -0,0 +1,127 @@
+/**
+ * Utility functions for determining default workspace directories
+ * Centralizes the logic for determining where projects should be created/opened
+ */
+
+import { createLogger } from '@automaker/utils/logger';
+import { getHttpApiClient } from './http-api-client';
+import { useAppStore } from '@/store/app-store';
+
+const logger = createLogger('WorkspaceConfig');
+
+/**
+ * Browser-compatible path join utility
+ * Works in both Node.js and browser environments
+ */
+function joinPath(...parts: string[]): string {
+  // Remove empty parts and normalize separators
+  const normalized = parts
+    .filter((p) => p)
+    .map((p) => p.replace(/\\/g, '/'))
+    .join('/')
+    .replace(/\/+/g, '/'); // Remove duplicate slashes
+
+  // Preserve leading slash if first part had it
+  const hasLeadingSlash = parts[0]?.startsWith('/');
+  return hasLeadingSlash ? '/' + normalized.replace(/^\//, '') : normalized;
+}
+
+/**
+ * Gets the default Documents/Automaker directory path
+ * @returns Promise resolving to Documents/Automaker path, or null if unavailable
+ */
+async function getDefaultDocumentsPath(): Promise<string | null> {
+  try {
+    // In Electron mode, use the native getPath API directly from the preload script
+    // This returns the actual system Documents folder (e.g., C:\Users\<user>\Documents on Windows)
+    // Note: The HTTP client's getPath returns incorrect Unix-style paths for 'documents'
+    if (typeof window !== 'undefined' && window.electronAPI?.getPath) {
+      const documentsPath = await window.electronAPI.getPath('documents');
+      return joinPath(documentsPath, 'Automaker');
+    }
+
+    // In web mode (no Electron), we can't access the user's Documents folder
+    // Return null to let the caller use other fallback mechanisms (like server's DATA_DIR)
+    return null;
+  } catch (error) {
+    logger.error('Failed to get documents path:', error);
+    return null;
+  }
+}
+
+/**
+ * Determines the default directory for project creation/opening
+ * Priority order:
+ * 1. ALLOWED_ROOT_DIRECTORY (if configured)
+ * 2. Last used directory from localStorage (if ALLOWED_ROOT_DIRECTORY is not set)
+ * 3. Documents/Automaker (if ALLOWED_ROOT_DIRECTORY is not set)
+ * 4. DATA_DIR (if ALLOWED_ROOT_DIRECTORY is not set and Documents unavailable)
+ * 5. null (no default)
+ *
+ * @returns Promise resolving to the default directory path, or null if none available
+ */
+export async function getDefaultWorkspaceDirectory(): Promise<string | null> {
+  try {
+    const httpClient = getHttpApiClient();
+    const result = await httpClient.workspace.getConfig();
+
+    if (result.success) {
+      // If ALLOWED_ROOT_DIRECTORY is configured, use it
+      if (result.configured && result.workspaceDir) {
+        return result.workspaceDir;
+      }
+
+      // If ALLOWED_ROOT_DIRECTORY is not set, use priority:
+      // 1. Last used directory (from store, synced via API)
+      // 2. Documents/Automaker
+      // 3. DATA_DIR as fallback
+      const lastUsedDir = useAppStore.getState().lastProjectDir;
+
+      if (lastUsedDir) {
+        return lastUsedDir;
+      }
+
+      // Try to get Documents/Automaker
+      const documentsPath = await getDefaultDocumentsPath();
+      logger.info('Default documentsPath resolved to:', documentsPath);
+      if (documentsPath) {
+        return documentsPath;
+      }
+
+      // Fallback to DATA_DIR if available
+      if (result.defaultDir) {
+        return result.defaultDir;
+      }
+    }
+
+    // If API call failed, still try last used dir and Documents
+    const lastUsedDir = useAppStore.getState().lastProjectDir;
+
+    if (lastUsedDir) {
+      return lastUsedDir;
+    }
+
+    const documentsPath = await getDefaultDocumentsPath();
+    return documentsPath;
+  } catch (error) {
+    logger.error('Failed to get default workspace directory:', error);
+
+    // On error, try last used dir and Documents
+    const lastUsedDir = useAppStore.getState().lastProjectDir;
+
+    if (lastUsedDir) {
+      return lastUsedDir;
+    }
+
+    const documentsPath = await getDefaultDocumentsPath();
+    return documentsPath;
+  }
+}
+
+/**
+ * Saves the last used project directory to the store (synced via API)
+ * @param path - The directory path to save
+ */
+export function saveLastProjectDirectory(path: string): void {
+  useAppStore.getState().setLastProjectDir(path);
+}
diff --git a/temp_repo/apps/ui/src/main.ts b/temp_repo/apps/ui/src/main.ts
new file mode 100644
index 0000000000000000000000000000000000000000..80a2e83797680bb22e8e84c5608b4dd9380706f6
--- /dev/null
+++ b/temp_repo/apps/ui/src/main.ts
@@ -0,0 +1,249 @@
+/**
+ * Electron main process entry point
+ *
+ * Handles app lifecycle, initialization, and coordination of modular components.
+ *
+ * Architecture:
+ * - electron/constants.ts      - Window sizing, port defaults, filenames
+ * - electron/state.ts          - Shared state container
+ * - electron/utils/            - Port and icon utilities
+ * - electron/security/         - API key management
+ * - electron/windows/          - Window bounds and main window creation
+ * - electron/server/           - Backend and static server management
+ * - electron/ipc/              - IPC handlers (dialog, shell, app, auth, window, server)
+ *
+ * SECURITY: All file system access uses centralized methods from @automaker/platform.
+ */
+
+import path from 'path';
+import { app, BrowserWindow, dialog } from 'electron';
+import {
+  setElectronUserDataPath,
+  setElectronAppPaths,
+  initAllowedPaths,
+} from '@automaker/platform';
+import { createLogger } from '@automaker/utils/logger';
+import { DEFAULT_SERVER_PORT, DEFAULT_STATIC_PORT } from './electron/constants';
+import { state } from './electron/state';
+import { findAvailablePort } from './electron/utils/port-manager';
+import { getIconPath } from './electron/utils/icon-manager';
+import { ensureApiKey } from './electron/security/api-key-manager';
+import { createWindow } from './electron/windows/main-window';
+import { startStaticServer, stopStaticServer } from './electron/server/static-server';
+import { startServer, waitForServer, stopServer } from './electron/server/backend-server';
+import { registerAllHandlers } from './electron/ipc';
+
+const logger = createLogger('Electron');
+
+// Development environment
+const isDev = !app.isPackaged;
+
+// Load environment variables from .env file (development only)
+if (isDev) {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    require('dotenv').config({ path: path.join(__dirname, '../.env') });
+  } catch (error) {
+    logger.warn('dotenv not available:', (error as Error).message);
+  }
+}
+
+// On Linux, auto-detect X11 vs Wayland so the app launches correctly from
+// desktop entries where the display protocol isn't guaranteed to be X11.
+// Must be set before app.whenReady() — has no effect on macOS/Windows.
+if (process.platform === 'linux') {
+  app.commandLine.appendSwitch('ozone-platform-hint', 'auto');
+}
+
+// Register IPC handlers
+registerAllHandlers();
+
+// App lifecycle
+app.whenReady().then(handleAppReady);
+app.on('window-all-closed', handleWindowAllClosed);
+app.on('before-quit', handleBeforeQuit);
+
+/**
+ * Handle app.whenReady()
+ */
+async function handleAppReady(): Promise<void> {
+  // In production, use Automaker dir in appData for app isolation
+  // In development, use project root for shared data between Electron and web mode
+  let userDataPathToUse: string;
+
+  if (app.isPackaged) {
+    // Production: Ensure userData path is consistent so files land in Automaker dir
+    try {
+      const desiredUserDataPath = path.join(app.getPath('appData'), 'Automaker');
+
+      if (app.getPath('userData') !== desiredUserDataPath) {
+        app.setPath('userData', desiredUserDataPath);
+        logger.info('[PRODUCTION] userData path set to:', desiredUserDataPath);
+      }
+
+      userDataPathToUse = desiredUserDataPath;
+    } catch (error) {
+      logger.warn('[PRODUCTION] Failed to set userData path:', (error as Error).message);
+      userDataPathToUse = app.getPath('userData');
+    }
+  } else {
+    // Development: Explicitly set userData to project root for shared data between Electron and web
+    // This OVERRIDES Electron's default userData path (~/.config/Automaker)
+    // __dirname is apps/ui/dist-electron, so go up to get project root
+    const projectRoot = path.join(__dirname, '../../..');
+    userDataPathToUse = path.join(projectRoot, 'data');
+
+    try {
+      app.setPath('userData', userDataPathToUse);
+      logger.info('[DEVELOPMENT] userData path explicitly set to:', userDataPathToUse);
+    } catch (error) {
+      logger.warn(
+        '[DEVELOPMENT] Failed to set userData path, using fallback:',
+        (error as Error).message
+      );
+      userDataPathToUse = path.join(projectRoot, 'data');
+    }
+  }
+
+  // Initialize centralized path helpers for Electron
+  // This must be done before any file operations
+  setElectronUserDataPath(userDataPathToUse);
+
+  // In development mode, allow access to the entire project root (for source files, node_modules, etc.)
+  // In production, only allow access to the built app directory and resources
+  if (isDev) {
+    // __dirname is apps/ui/dist-electron, so go up 3 levels to get project root
+    const projectRoot = path.join(__dirname, '../../..');
+    setElectronAppPaths([__dirname, projectRoot]);
+  } else {
+    setElectronAppPaths(__dirname, process.resourcesPath);
+  }
+
+  logger.info('Initialized path security helpers');
+
+  // Initialize security settings for path validation
+  // Set DATA_DIR before initializing so it's available for security checks
+  // Use the project's shared data directory in development, userData in production
+  const mainProcessDataDir = app.isPackaged
+    ? app.getPath('userData')
+    : path.join(process.cwd(), 'data');
+  process.env.DATA_DIR = mainProcessDataDir;
+  logger.info('[MAIN_PROCESS_DATA_DIR]', mainProcessDataDir);
+
+  // ALLOWED_ROOT_DIRECTORY should already be in process.env if set by user
+  // (it will be passed to server process, but we also need it in main process for dialog validation)
+  initAllowedPaths();
+
+  if (process.platform === 'darwin' && app.dock) {
+    const iconPath = getIconPath();
+    if (iconPath) {
+      try {
+        app.dock.setIcon(iconPath);
+      } catch (error) {
+        logger.warn('Failed to set dock icon:', (error as Error).message);
+      }
+    }
+  }
+
+  try {
+    // Check if we should skip the embedded server (for Docker API mode)
+    const skipEmbeddedServer = process.env.SKIP_EMBEDDED_SERVER === 'true';
+    state.isExternalServerMode = skipEmbeddedServer;
+
+    if (skipEmbeddedServer) {
+      // Use the default server port (Docker container runs on 3008)
+      state.serverPort = DEFAULT_SERVER_PORT;
+      logger.info('SKIP_EMBEDDED_SERVER=true, using external server at port', state.serverPort);
+
+      // Wait for external server to be ready
+      logger.info('Waiting for external server...');
+      await waitForServer(60); // Give Docker container more time to start
+      logger.info('External server is ready');
+
+      // In external server mode, we don't set an API key here.
+      // The renderer will detect external server mode and use session-based
+      // auth like web mode, redirecting to /login where the user enters
+      // the API key from the Docker container logs.
+      logger.info('External server mode: using session-based authentication');
+    } else {
+      // Generate or load API key for CSRF protection (before starting server)
+      ensureApiKey();
+
+      // Find available ports (prevents conflicts with other apps using same ports)
+      state.serverPort = await findAvailablePort(DEFAULT_SERVER_PORT);
+      if (state.serverPort !== DEFAULT_SERVER_PORT) {
+        logger.info(
+          'Default server port',
+          DEFAULT_SERVER_PORT,
+          'in use, using port',
+          state.serverPort
+        );
+      }
+    }
+
+    state.staticPort = await findAvailablePort(DEFAULT_STATIC_PORT);
+    if (state.staticPort !== DEFAULT_STATIC_PORT) {
+      logger.info(
+        'Default static port',
+        DEFAULT_STATIC_PORT,
+        'in use, using port',
+        state.staticPort
+      );
+    }
+
+    // Start static file server in production
+    if (app.isPackaged) {
+      await startStaticServer();
+    }
+
+    // Start backend server (unless using external server)
+    if (!skipEmbeddedServer) {
+      await startServer();
+    }
+
+    // Create window
+    createWindow();
+  } catch (error) {
+    logger.error('Failed to start:', error);
+
+    const errorMessage = (error as Error).message;
+    const isNodeError = errorMessage.includes('Node.js');
+
+    dialog.showErrorBox(
+      'Automaker Failed to Start',
+      `The application failed to start.\n\n${errorMessage}\n\n${
+        isNodeError
+          ? 'Please install Node.js from https://nodejs.org or via a package manager (Homebrew, nvm, fnm).'
+          : 'Please check the application logs for more details.'
+      }`
+    );
+    app.quit();
+  }
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow();
+    }
+  });
+}
+
+/**
+ * Handle window-all-closed event
+ */
+function handleWindowAllClosed(): void {
+  // On macOS, keep the app and servers running when all windows are closed
+  // (standard macOS behavior). On other platforms, stop servers and quit.
+  if (process.platform !== 'darwin') {
+    stopServer();
+    stopStaticServer();
+    app.quit();
+  }
+}
+
+/**
+ * Handle before-quit event
+ */
+function handleBeforeQuit(): void {
+  stopServer();
+  stopStaticServer();
+}
diff --git a/temp_repo/apps/ui/src/preload.ts b/temp_repo/apps/ui/src/preload.ts
new file mode 100644
index 0000000000000000000000000000000000000000..131c266f11bd2b55d3355ada1ddc8a4fba0ca69f
--- /dev/null
+++ b/temp_repo/apps/ui/src/preload.ts
@@ -0,0 +1,66 @@
+/**
+ * Electron preload script (TypeScript)
+ *
+ * Only exposes native features (dialogs, shell) and server URL.
+ * All other operations go through HTTP API.
+ */
+
+import { contextBridge, ipcRenderer, OpenDialogOptions, SaveDialogOptions } from 'electron';
+import { createLogger } from '@automaker/utils/logger';
+import { IPC_CHANNELS } from './electron/ipc/channels';
+
+const logger = createLogger('Preload');
+
+// Expose minimal API for native features
+contextBridge.exposeInMainWorld('electronAPI', {
+  // Platform info
+  platform: process.platform,
+  isElectron: true,
+
+  // Connection check
+  ping: (): Promise<string> => ipcRenderer.invoke(IPC_CHANNELS.PING),
+
+  // Get server URL for HTTP client
+  getServerUrl: (): Promise<string> => ipcRenderer.invoke(IPC_CHANNELS.SERVER.GET_URL),
+
+  // Get API key for authentication
+  getApiKey: (): Promise<string | null> => ipcRenderer.invoke(IPC_CHANNELS.AUTH.GET_API_KEY),
+
+  // Check if running in external server mode (Docker API)
+  isExternalServerMode: (): Promise<boolean> =>
+    ipcRenderer.invoke(IPC_CHANNELS.AUTH.IS_EXTERNAL_SERVER_MODE),
+
+  // Native dialogs - better UX than prompt()
+  openDirectory: (): Promise<Electron.OpenDialogReturnValue> =>
+    ipcRenderer.invoke(IPC_CHANNELS.DIALOG.OPEN_DIRECTORY),
+  openFile: (options?: OpenDialogOptions): Promise<Electron.OpenDialogReturnValue> =>
+    ipcRenderer.invoke(IPC_CHANNELS.DIALOG.OPEN_FILE, options),
+  saveFile: (options?: SaveDialogOptions): Promise<Electron.SaveDialogReturnValue> =>
+    ipcRenderer.invoke(IPC_CHANNELS.DIALOG.SAVE_FILE, options),
+
+  // Shell operations
+  openExternalLink: (url: string): Promise<{ success: boolean; error?: string }> =>
+    ipcRenderer.invoke(IPC_CHANNELS.SHELL.OPEN_EXTERNAL, url),
+  openPath: (filePath: string): Promise<{ success: boolean; error?: string }> =>
+    ipcRenderer.invoke(IPC_CHANNELS.SHELL.OPEN_PATH, filePath),
+  openInEditor: (
+    filePath: string,
+    line?: number,
+    column?: number
+  ): Promise<{ success: boolean; error?: string }> =>
+    ipcRenderer.invoke(IPC_CHANNELS.SHELL.OPEN_IN_EDITOR, filePath, line, column),
+
+  // App info
+  getPath: (name: string): Promise<string> => ipcRenderer.invoke(IPC_CHANNELS.APP.GET_PATH, name),
+  getVersion: (): Promise<string> => ipcRenderer.invoke(IPC_CHANNELS.APP.GET_VERSION),
+  isPackaged: (): Promise<boolean> => ipcRenderer.invoke(IPC_CHANNELS.APP.IS_PACKAGED),
+
+  // Window management
+  updateMinWidth: (sidebarExpanded: boolean): Promise<void> =>
+    ipcRenderer.invoke(IPC_CHANNELS.WINDOW.UPDATE_MIN_WIDTH, sidebarExpanded),
+
+  // App control
+  quit: (): Promise<void> => ipcRenderer.invoke(IPC_CHANNELS.APP.QUIT),
+});
+
+logger.info('Electron API exposed (TypeScript)');
diff --git a/temp_repo/apps/ui/src/renderer.tsx b/temp_repo/apps/ui/src/renderer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..147dc38fbddca786f57ace75999be7356caeb30c
--- /dev/null
+++ b/temp_repo/apps/ui/src/renderer.tsx
@@ -0,0 +1,262 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app';
+import { AppErrorBoundary } from './components/ui/app-error-boundary';
+import { isMobileDevice, isPwaStandalone } from './lib/mobile-detect';
+
+// Defensive fallback: index.html's inline script already applies data-pwa="standalone"
+// before first paint. This re-applies it in case the inline script failed (e.g.
+// CSP restrictions or unexpected errors). setAttribute is a no-op if already set.
+if (isPwaStandalone) {
+  document.documentElement.setAttribute('data-pwa', 'standalone');
+}
+
+// Register service worker for PWA support (web mode only)
+// Registers immediately (not deferred to load event) so the SW can intercept
+// and cache JS/CSS bundle requests during the current page load. When the SW is
+// registered inside a 'load' listener, all assets have already downloaded before
+// the SW installs, so they can't be cached until warmAssetCache runs later.
+// Registering early allows the SW to serve bundles from cache on the NEXT visit.
+//
+// Note: The SW itself does NOT call skipWaiting() on install, so a newly
+// registered SW won't disrupt a live page — it waits for SKIP_WAITING from the
+// main thread or for all old-SW tabs to close before activating.
+if ('serviceWorker' in navigator && !window.location.protocol.startsWith('file')) {
+  navigator.serviceWorker
+    .register('/sw.js', {
+      // Check for updates on every page load for PWA freshness
+      updateViaCache: 'none',
+    })
+    .then((registration) => {
+      // Check for service worker updates periodically
+      // Mobile: every 60 minutes (saves battery/bandwidth)
+      // Desktop: every 30 minutes
+      const updateInterval = isMobileDevice ? 60 * 60 * 1000 : 30 * 60 * 1000;
+      setInterval(() => {
+        registration.update().catch(() => {
+          // Update check failed silently - will try again next interval
+        });
+      }, updateInterval);
+
+      // When a new service worker is found, DON'T activate it immediately.
+      // Instead, wait until the user navigates away or refreshes. This prevents
+      // the brief reload/flash that occurs when skipWaiting() + clients.claim()
+      // swaps the SW under a live page (especially noticeable when switching back
+      // to the PWA on mobile).
+      //
+      // The new SW will naturally activate when all tabs using the old SW are closed.
+      // For urgent updates, we send SKIP_WAITING on fresh page loads (see below).
+      registration.addEventListener('updatefound', () => {
+        const newWorker = registration.installing;
+        if (newWorker) {
+          newWorker.addEventListener('statechange', () => {
+            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+              // A new SW is waiting — show an update banner so long-lived
+              // sessions can immediately pick up new deployments.
+              console.debug('[SW] New service worker installed and waiting to activate');
+              showUpdateNotification(registration);
+            }
+            if (newWorker.state === 'activated') {
+              // New service worker is active - clean up old immutable cache entries
+              newWorker.postMessage({ type: 'CACHE_CLEANUP' });
+            }
+          });
+        }
+      });
+
+      // On fresh page loads (not tab-switch-back), if there's a waiting SW,
+      // tell it to activate now. This is safe because the page is freshly loaded
+      // and won't flash. This ensures updates are picked up within one page visit.
+      if (registration.waiting) {
+        registration.waiting.postMessage({ type: 'SKIP_WAITING' });
+      }
+
+      // Notify the service worker about mobile mode.
+      // This enables stale-while-revalidate caching for API responses,
+      // preventing blank screens caused by failed/slow API fetches on mobile.
+      if (isMobileDevice && registration.active) {
+        registration.active.postMessage({
+          type: 'SET_MOBILE_MODE',
+          enabled: true,
+        });
+      }
+
+      // Also listen for the SW becoming active (in case it wasn't ready above)
+      navigator.serviceWorker.addEventListener('controllerchange', () => {
+        if (isMobileDevice && navigator.serviceWorker.controller) {
+          navigator.serviceWorker.controller.postMessage({
+            type: 'SET_MOBILE_MODE',
+            enabled: true,
+          });
+        }
+      });
+
+      // Warm the SW's immutable cache with all page assets during idle time.
+      // This ensures that when the PWA is evicted from memory and reopened,
+      // all JS/CSS can be served instantly from SW cache instead of re-downloading.
+      warmAssetCache(registration);
+
+      // Request persistent storage to protect caches from OS eviction.
+      // Without this, iOS Safari can purge Cache Storage under memory pressure
+      // or after 7 days of inactivity, forcing a full network reload on next visit.
+      // This is a best-effort request — the browser may deny it, but it's a no-op
+      // on browsers that don't support it (no error thrown).
+      if (navigator.storage?.persist) {
+        navigator.storage
+          .persist()
+          .then((granted) => {
+            if (granted) {
+              console.debug('[SW] Persistent storage granted — caches protected from eviction');
+            }
+          })
+          .catch(() => {
+            // Silently ignore — persistent storage is a nice-to-have
+          });
+      }
+    })
+    .catch(() => {
+      // Service worker registration failed; app still works without it
+    });
+}
+
+/**
+ * Show a user-visible notification when a new service worker version is detected.
+ * The notification offers a "Reload" action that sends SKIP_WAITING to the waiting
+ * SW and reloads the page once the new SW activates. This ensures long-lived
+ * sessions can immediately pick up new deployments.
+ */
+function showUpdateNotification(registration: ServiceWorkerRegistration): void {
+  // Create a simple DOM-based notification (avoids depending on React rendering)
+  const banner = document.createElement('div');
+  banner.setAttribute('role', 'alert');
+
+  // Read theme-aware colors from CSS custom properties with sensible fallbacks
+  // so the banner matches the current dark/light theme.
+  const rootStyle = getComputedStyle(document.documentElement);
+  const bgColor = rootStyle.getPropertyValue('--background').trim() || '#1a1a2e';
+  const fgColor = rootStyle.getPropertyValue('--foreground').trim() || '#e0e0e0';
+  const accentColor = rootStyle.getPropertyValue('--primary').trim() || '#6366f1';
+  const mutedColor = rootStyle.getPropertyValue('--muted-foreground').trim() || '#888';
+
+  banner.style.cssText =
+    'position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:99999;' +
+    `background:hsl(${bgColor});color:hsl(${fgColor});padding:12px 20px;border-radius:10px;` +
+    'display:flex;align-items:center;gap:12px;font-size:14px;' +
+    'box-shadow:0 4px 24px rgba(0,0,0,0.3);font-family:system-ui,sans-serif;';
+  banner.innerHTML =
+    '<span>A new version is available.</span>' +
+    `<button id="sw-update-btn" style="background:hsl(${accentColor});color:hsl(${bgColor});border:none;` +
+    'padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;">Reload</button>' +
+    `<button id="sw-dismiss-btn" style="background:transparent;color:hsl(${mutedColor});border:none;` +
+    'padding:4px 8px;cursor:pointer;font-size:18px;line-height:1;" aria-label="Dismiss">&times;</button>';
+  document.body.appendChild(banner);
+
+  // Listen for controllerchange to reload after the new SW activates.
+  // Named handler so it can be cleaned up when the banner is dismissed or after reload.
+  let reloading = false;
+  const onControllerChange = () => {
+    if (!reloading) {
+      reloading = true;
+      navigator.serviceWorker.removeEventListener('controllerchange', onControllerChange);
+      window.location.reload();
+    }
+  };
+  navigator.serviceWorker.addEventListener('controllerchange', onControllerChange);
+
+  banner.querySelector('#sw-update-btn')?.addEventListener('click', () => {
+    // Send SKIP_WAITING to the waiting SW — it will call skipWaiting() and
+    // the controllerchange listener above will reload the page.
+    registration.waiting?.postMessage({ type: 'SKIP_WAITING' });
+    const btn = banner.querySelector('#sw-update-btn') as HTMLButtonElement | null;
+    if (btn) {
+      btn.textContent = 'Updating…';
+      btn.disabled = true;
+    }
+  });
+
+  banner.querySelector('#sw-dismiss-btn')?.addEventListener('click', () => {
+    navigator.serviceWorker.removeEventListener('controllerchange', onControllerChange);
+    banner.remove();
+  });
+}
+
+/**
+ * Warm the service worker's immutable cache with all critical page assets.
+ * Collects URLs from modulepreload, prefetch, stylesheet, and script tags
+ * and sends them to the SW via PRECACHE_ASSETS for background caching.
+ *
+ * This is critical for PWA cold-start performance: when iOS/Android evicts
+ * the PWA from memory, reopening it needs assets from SW cache. The SW's
+ * fetch handler caches assets on first access, but on the very first visit
+ * the SW isn't active yet when assets load. This function bridges that gap
+ * by explicitly telling the SW "cache these URLs" after registration.
+ */
+function warmAssetCache(registration: ServiceWorkerRegistration): void {
+  const idleCallback =
+    typeof requestIdleCallback !== 'undefined'
+      ? requestIdleCallback
+      : (cb: () => void) => setTimeout(cb, 2000);
+
+  // CRITICAL_ASSETS are precached at SW install time (see sw.js install handler).
+  // This function is a complementary backup: it collects asset URLs from the live
+  // DOM (which includes any assets the browser already fetched on this visit) and
+  // sends them to the SW for caching via PRECACHE_ASSETS. This covers:
+  // - Assets that were fetched before the SW was active on the first visit
+  // - Any assets the install-time precaching missed due to transient failures
+  //
+  // No delay needed — warmAssetCache is called after the SW registers (which is
+  // already deferred until renderer.tsx module evaluation, post-parse). Asset URLs
+  // are already in the DOM at that point and the SW processes PRECACHE_ASSETS
+  // asynchronously without blocking the render path.
+  const doWarm = () => {
+    const assetUrls: string[] = [];
+
+    // Collect ALL asset URLs from the page that should be in the SW cache:
+    // 1. modulepreload links (critical vendor chunks: react, tanstack, radix, state)
+    // 2. prefetch links (deferred chunks: icons, reactflow, xterm, codemirror, markdown)
+    // 3. stylesheet links (main CSS bundle)
+    // 4. script tags with asset paths (entry point JS)
+    document.querySelectorAll('link[rel="modulepreload"], link[rel="prefetch"]').forEach((link) => {
+      const href = (link as HTMLLinkElement).href;
+      if (href && href.includes('/assets/')) assetUrls.push(href);
+    });
+
+    document.querySelectorAll('link[rel="stylesheet"]').forEach((link) => {
+      const href = (link as HTMLLinkElement).href;
+      if (href && href.includes('/assets/')) assetUrls.push(href);
+    });
+
+    document.querySelectorAll('script[src*="/assets/"]').forEach((script) => {
+      const src = (script as HTMLScriptElement).src;
+      if (src) assetUrls.push(src);
+    });
+
+    // Send all discovered URLs to the SW for background caching.
+    // The SW's PRECACHE_ASSETS handler checks cache.match() first, so URLs
+    // already in the immutable cache won't be re-fetched.
+    //
+    // Target the active SW if available; otherwise fall back to the installing/waiting
+    // SW. On first visit, the SW may still be in 'installing' state when this runs,
+    // but it can still receive messages and process them once it activates.
+    const target = registration.active || registration.waiting || registration.installing;
+    if (assetUrls.length > 0 && target) {
+      target.postMessage({
+        type: 'PRECACHE_ASSETS',
+        urls: assetUrls,
+      });
+    }
+  };
+
+  idleCallback(doWarm);
+}
+
+// Render the app - prioritize First Contentful Paint
+// AppErrorBoundary catches uncaught React errors and shows a friendly error screen
+// instead of TanStack Router's default "Something went wrong!" overlay.
+createRoot(document.getElementById('app')!).render(
+  <StrictMode>
+    <AppErrorBoundary>
+      <App />
+    </AppErrorBoundary>
+  </StrictMode>
+);
diff --git a/temp_repo/apps/ui/src/routes/__root.tsx b/temp_repo/apps/ui/src/routes/__root.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..379c7b42729660beeef33f42560335510d41c9f8
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/__root.tsx
@@ -0,0 +1,1220 @@
+import { createRootRoute, Outlet, useLocation, useNavigate } from '@tanstack/react-router';
+import { useEffect, useState, useCallback, useDeferredValue, useRef } from 'react';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { createLogger } from '@automaker/utils/logger';
+import { Sidebar } from '@/components/layout/sidebar';
+import { ProjectSwitcher } from '@/components/layout/project-switcher';
+import {
+  FileBrowserProvider,
+  useFileBrowser,
+  setGlobalFileBrowser,
+} from '@/contexts/file-browser-context';
+import { useAppStore, getStoredTheme, type ThemeMode } from '@/store/app-store';
+import { useSetupStore } from '@/store/setup-store';
+import { useAuthStore } from '@/store/auth-store';
+import { getElectronAPI, isElectron } from '@/lib/electron';
+import { isMac } from '@/lib/utils';
+import { initializeProject } from '@/lib/project-init';
+import {
+  initApiKey,
+  verifySession,
+  checkSandboxEnvironment,
+  getServerUrlSync,
+  getHttpApiClient,
+  handleServerOffline,
+} from '@/lib/http-api-client';
+import {
+  hydrateStoreFromSettings,
+  parseLocalStorageSettings,
+  signalMigrationComplete,
+  performSettingsMigration,
+} from '@/hooks/use-settings-migration';
+import { queryClient } from '@/lib/query-client';
+import { createIDBPersister, PERSIST_MAX_AGE_MS, PERSIST_THROTTLE_MS } from '@/lib/query-persist';
+import { Toaster } from 'sonner';
+import { ThemeOption, themeOptions } from '@/config/theme-options';
+import { SandboxRiskDialog } from '@/components/dialogs/sandbox-risk-dialog';
+import { SandboxRejectionScreen } from '@/components/dialogs/sandbox-rejection-screen';
+import { LoadingState } from '@/components/ui/loading-state';
+import { useProjectSettingsLoader } from '@/hooks/use-project-settings-loader';
+import { useIsCompact } from '@/hooks/use-media-query';
+import type { Project } from '@/lib/electron';
+import type { GlobalSettings } from '@automaker/types';
+import { syncUICache, restoreFromUICache } from '@/store/ui-cache-store';
+import { setItem } from '@/lib/storage';
+
+const logger = createLogger('RootLayout');
+const IS_DEV = import.meta.env.DEV;
+const SERVER_READY_MAX_ATTEMPTS = 8;
+const SERVER_READY_BACKOFF_BASE_MS = 250;
+const SERVER_READY_MAX_DELAY_MS = 1500;
+const SERVER_READY_TIMEOUT_MS = 2000;
+const NO_STORE_CACHE_MODE: RequestCache = 'no-store';
+const AUTO_OPEN_HISTORY_INDEX = 0;
+const SINGLE_PROJECT_COUNT = 1;
+const DEFAULT_LAST_OPENED_TIME_MS = 0;
+
+// IndexedDB persister for React Query cache (survives tab discard)
+const idbPersister = createIDBPersister();
+
+/** Options for PersistQueryClientProvider */
+const persistOptions = {
+  persister: idbPersister,
+  maxAge: PERSIST_MAX_AGE_MS,
+  // Throttle IndexedDB writes to prevent excessive I/O on every query state change.
+  // Without this, every query update triggers an IndexedDB write — especially costly on mobile.
+  throttleTime: PERSIST_THROTTLE_MS,
+  // Build hash injected by Vite — same hash used by swCacheBuster for the SW CACHE_NAME.
+  // When the app is rebuilt, this changes and both the IDB query cache and SW cache
+  // are invalidated together, preventing stale data from surviving a deployment.
+  // In dev mode this is a stable hash of the package version so the cache persists
+  // across hot reloads.
+  buster: typeof __APP_BUILD_HASH__ !== 'undefined' ? __APP_BUILD_HASH__ : '',
+  dehydrateOptions: {
+    shouldDehydrateQuery: (query: { state: { status: string } }) =>
+      query.state.status === 'success',
+  },
+};
+const AUTO_OPEN_STATUS = {
+  idle: 'idle',
+  opening: 'opening',
+  done: 'done',
+} as const;
+type AutoOpenStatus = (typeof AUTO_OPEN_STATUS)[keyof typeof AUTO_OPEN_STATUS];
+
+// Apply stored theme immediately on page load (before React hydration)
+// This prevents flash of default theme on login/setup pages
+function applyStoredTheme(): void {
+  const storedTheme = getStoredTheme();
+  if (storedTheme) {
+    const root = document.documentElement;
+    // Remove all theme classes (themeOptions doesn't include 'system' which is only in ThemeMode)
+    const themeClasses = themeOptions.map((option) => option.value);
+    root.classList.remove(...themeClasses);
+
+    // Apply the stored theme
+    if (storedTheme === 'dark') {
+      root.classList.add('dark');
+    } else if (storedTheme === 'system') {
+      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      root.classList.add(isDark ? 'dark' : 'light');
+    } else if (storedTheme !== 'light') {
+      root.classList.add(storedTheme);
+    } else {
+      root.classList.add('light');
+    }
+  }
+}
+
+// Apply stored theme immediately (runs synchronously before render)
+applyStoredTheme();
+
+async function waitForServerReady(): Promise<boolean> {
+  const serverUrl = getServerUrlSync();
+
+  for (let attempt = 1; attempt <= SERVER_READY_MAX_ATTEMPTS; attempt++) {
+    try {
+      const response = await fetch(`${serverUrl}/api/health`, {
+        method: 'GET',
+        signal: AbortSignal.timeout(SERVER_READY_TIMEOUT_MS),
+        cache: NO_STORE_CACHE_MODE,
+      });
+
+      if (response.ok) {
+        return true;
+      }
+    } catch (error) {
+      logger.warn(`Server readiness check failed (attempt ${attempt})`, error);
+    }
+
+    const delayMs = Math.min(SERVER_READY_MAX_DELAY_MS, SERVER_READY_BACKOFF_BASE_MS * attempt);
+    await new Promise((resolve) => setTimeout(resolve, delayMs));
+  }
+
+  return false;
+}
+
+function getProjectLastOpenedMs(project: Project): number {
+  if (!project.lastOpened) return DEFAULT_LAST_OPENED_TIME_MS;
+  const parsed = Date.parse(project.lastOpened);
+  return Number.isNaN(parsed) ? DEFAULT_LAST_OPENED_TIME_MS : parsed;
+}
+
+function selectAutoOpenProject(
+  currentProject: Project | null,
+  projects: Project[],
+  projectHistory: string[]
+): Project | null {
+  if (currentProject) return currentProject;
+
+  if (projectHistory.length > 0) {
+    const historyProjectId = projectHistory[AUTO_OPEN_HISTORY_INDEX];
+    const historyProject = projects.find((project) => project.id === historyProjectId);
+    if (historyProject) {
+      return historyProject;
+    }
+  }
+
+  if (projects.length === SINGLE_PROJECT_COUNT) {
+    return projects[AUTO_OPEN_HISTORY_INDEX] ?? null;
+  }
+
+  if (projects.length > SINGLE_PROJECT_COUNT) {
+    let latestProject: Project | null = projects[AUTO_OPEN_HISTORY_INDEX] ?? null;
+    let latestTimestamp = latestProject
+      ? getProjectLastOpenedMs(latestProject)
+      : DEFAULT_LAST_OPENED_TIME_MS;
+
+    for (const project of projects) {
+      const openedAt = getProjectLastOpenedMs(project);
+      if (openedAt > latestTimestamp) {
+        latestTimestamp = openedAt;
+        latestProject = project;
+      }
+    }
+
+    return latestProject;
+  }
+
+  return null;
+}
+
+function RootLayoutContent() {
+  const location = useLocation();
+
+  // IMPORTANT: Use individual selectors instead of bare useAppStore() to prevent
+  // re-rendering on every store mutation. The bare call subscribes to the ENTIRE store,
+  // which during initialization causes cascading re-renders as multiple effects write
+  // to the store (settings hydration, project settings, auto-open, etc.). With enough
+  // rapid mutations, React hits the maximum update depth limit (error #185).
+  //
+  // Each selector only triggers a re-render when its specific slice of state changes.
+  const projects = useAppStore((s) => s.projects);
+  const currentProject = useAppStore((s) => s.currentProject);
+  const projectHistory = useAppStore((s) => s.projectHistory);
+  const sidebarStyle = useAppStore((s) => s.sidebarStyle);
+  const skipSandboxWarning = useAppStore((s) => s.skipSandboxWarning);
+  // Subscribe to theme and font state to trigger re-renders when they change
+  const theme = useAppStore((s) => s.theme);
+  const fontFamilySans = useAppStore((s) => s.fontFamilySans);
+  const fontFamilyMono = useAppStore((s) => s.fontFamilyMono);
+  // Subscribe to previewTheme so that getEffectiveTheme() re-renders when
+  // hover previews change the document theme. Without this, the selector
+  // for getEffectiveTheme (a stable function ref) won't trigger re-renders.
+  const previewTheme = useAppStore((s) => s.previewTheme);
+  void previewTheme; // Used only for subscription
+  // Actions (stable references from Zustand - never change between renders)
+  const setIpcConnected = useAppStore((s) => s.setIpcConnected);
+  const upsertAndSetCurrentProject = useAppStore((s) => s.upsertAndSetCurrentProject);
+  const getEffectiveTheme = useAppStore((s) => s.getEffectiveTheme);
+  const getEffectiveFontSans = useAppStore((s) => s.getEffectiveFontSans);
+  const getEffectiveFontMono = useAppStore((s) => s.getEffectiveFontMono);
+  const setSkipSandboxWarning = useAppStore((s) => s.setSkipSandboxWarning);
+  const fetchCodexModels = useAppStore((s) => s.fetchCodexModels);
+
+  const setupComplete = useSetupStore((s) => s.setupComplete);
+  const codexCliStatus = useSetupStore((s) => s.codexCliStatus);
+  const navigate = useNavigate();
+  const [isMounted, setIsMounted] = useState(false);
+  const [streamerPanelOpen, setStreamerPanelOpen] = useState(false);
+  const authChecked = useAuthStore((s) => s.authChecked);
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  const settingsLoaded = useAuthStore((s) => s.settingsLoaded);
+  const { openFileBrowser } = useFileBrowser();
+
+  // Load project settings when switching projects
+  useProjectSettingsLoader();
+
+  const isSetupRoute = location.pathname === '/setup';
+  const isLoginRoute = location.pathname === '/login';
+  const isLoggedOutRoute = location.pathname === '/logged-out';
+  const isDashboardRoute = location.pathname === '/dashboard';
+  const isRootRoute = location.pathname === '/';
+  const [autoOpenStatus, setAutoOpenStatus] = useState<AutoOpenStatus>(AUTO_OPEN_STATUS.idle);
+  const autoOpenCandidate = selectAutoOpenProject(currentProject, projects, projectHistory);
+  const canAutoOpen =
+    authChecked &&
+    isAuthenticated &&
+    settingsLoaded &&
+    setupComplete &&
+    !isLoginRoute &&
+    !isLoggedOutRoute &&
+    !isSetupRoute &&
+    !!autoOpenCandidate;
+  // Only block the UI with "Opening project..." when on the root route.
+  // When already on /board or /dashboard, auto-open runs silently in the background —
+  // blocking here would cause a visible flash when switching back to the PWA.
+  const shouldAutoOpen = canAutoOpen && autoOpenStatus !== AUTO_OPEN_STATUS.done && isRootRoute;
+  const shouldBlockForSettings =
+    authChecked && isAuthenticated && !settingsLoaded && !isLoginRoute && !isLoggedOutRoute;
+
+  // Sandbox environment check state
+  type SandboxStatus = 'pending' | 'containerized' | 'needs-confirmation' | 'denied' | 'confirmed';
+  // Always start from pending on a fresh page load so the user sees the prompt
+  // each time the app is launched/refreshed (unless running in a container).
+  const [sandboxStatus, setSandboxStatus] = useState<SandboxStatus>('pending');
+
+  // Hidden streamer panel - opens with "\" key
+  const handleStreamerPanelShortcut = useCallback((event: KeyboardEvent) => {
+    const activeElement = document.activeElement;
+    if (activeElement) {
+      const tagName = activeElement.tagName.toLowerCase();
+      if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
+        return;
+      }
+      if (activeElement.getAttribute('contenteditable') === 'true') {
+        return;
+      }
+      const role = activeElement.getAttribute('role');
+      if (role === 'textbox' || role === 'searchbox' || role === 'combobox') {
+        return;
+      }
+      // Don't intercept when focused inside a terminal
+      if (activeElement.closest('.xterm') || activeElement.closest('[data-terminal-container]')) {
+        return;
+      }
+    }
+
+    if (event.ctrlKey || event.altKey || event.metaKey) {
+      return;
+    }
+
+    if (event.key === '\\') {
+      event.preventDefault();
+      setStreamerPanelOpen((prev) => !prev);
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleStreamerPanelShortcut);
+    return () => {
+      window.removeEventListener('keydown', handleStreamerPanelShortcut);
+    };
+  }, [handleStreamerPanelShortcut]);
+
+  const effectiveTheme = getEffectiveTheme();
+  // Defer the theme value to keep UI responsive during rapid hover changes
+  const deferredTheme = useDeferredValue(effectiveTheme);
+
+  // Get effective theme and fonts for the current project
+  // Note: theme/fontFamilySans/fontFamilyMono are destructured above to ensure re-renders when they change
+  void theme; // Used for subscription
+  void fontFamilySans; // Used for subscription
+  void fontFamilyMono; // Used for subscription
+  const effectiveFontSans = getEffectiveFontSans();
+  const effectiveFontMono = getEffectiveFontMono();
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  // Sync critical UI state to the persistent UI cache store
+  // This keeps the cache up-to-date so tab discard recovery is instant
+  useEffect(() => {
+    const unsubscribe = useAppStore.subscribe((state) => {
+      syncUICache({
+        currentProject: state.currentProject,
+        sidebarOpen: state.sidebarOpen,
+        sidebarStyle: state.sidebarStyle,
+        worktreePanelCollapsed: state.worktreePanelCollapsed,
+        collapsedNavSections: state.collapsedNavSections,
+        currentWorktreeByProject: state.currentWorktreeByProject,
+      });
+    });
+    return unsubscribe;
+  }, []);
+
+  // Check sandbox environment only after user is authenticated, setup is complete, and settings are loaded
+  useEffect(() => {
+    // Skip if already decided
+    if (sandboxStatus !== 'pending') {
+      return;
+    }
+
+    // Don't check sandbox until user is authenticated, has completed setup, and settings are loaded
+    // CRITICAL: settingsLoaded must be true to ensure skipSandboxWarning has been hydrated from server
+    if (!authChecked || !isAuthenticated || !setupComplete || !settingsLoaded) {
+      return;
+    }
+
+    const checkSandbox = async () => {
+      try {
+        const result = await checkSandboxEnvironment();
+
+        if (result.isContainerized) {
+          // Running in a container, no warning needed
+          setSandboxStatus('containerized');
+        } else if (result.skipSandboxWarning || skipSandboxWarning) {
+          // Skip if env var is set OR if user preference is set
+          setSandboxStatus('confirmed');
+        } else {
+          // Not containerized, show warning dialog
+          setSandboxStatus('needs-confirmation');
+        }
+      } catch (error) {
+        logger.error('Failed to check environment:', error);
+        // On error, assume not containerized and show warning
+        if (skipSandboxWarning) {
+          setSandboxStatus('confirmed');
+        } else {
+          setSandboxStatus('needs-confirmation');
+        }
+      }
+    };
+
+    checkSandbox();
+  }, [
+    sandboxStatus,
+    skipSandboxWarning,
+    authChecked,
+    isAuthenticated,
+    setupComplete,
+    settingsLoaded,
+  ]);
+
+  // Handle sandbox risk confirmation
+  const handleSandboxConfirm = useCallback(
+    (skipInFuture: boolean) => {
+      if (skipInFuture) {
+        setSkipSandboxWarning(true);
+      }
+      setSandboxStatus('confirmed');
+    },
+    [setSkipSandboxWarning]
+  );
+
+  // Handle sandbox risk denial
+  const handleSandboxDeny = useCallback(async () => {
+    if (isElectron()) {
+      // In Electron mode, quit the application
+      // Use window.electronAPI directly since getElectronAPI() returns the HTTP client
+      try {
+        const electronAPI = window.electronAPI;
+        if (electronAPI?.quit) {
+          await electronAPI.quit();
+        } else {
+          logger.error('quit() not available on electronAPI');
+        }
+      } catch (error) {
+        logger.error('Failed to quit app:', error);
+      }
+    } else {
+      // In web mode, show rejection screen
+      setSandboxStatus('denied');
+    }
+  }, []);
+
+  // Ref to prevent concurrent auth checks from running
+  const authCheckRunning = useRef(false);
+
+  // Global listener for 401/403 responses during normal app usage.
+  // This is triggered by the HTTP client whenever an authenticated request returns 401/403.
+  // Works for ALL modes (unified flow)
+  useEffect(() => {
+    const handleLoggedOut = () => {
+      logger.warn('automaker:logged-out event received!');
+      // Only update auth state — the centralized routing effect will handle
+      // navigation to /logged-out when it detects isAuthenticated is false
+      useAuthStore.getState().setAuthState({ isAuthenticated: false, authChecked: true });
+    };
+
+    window.addEventListener('automaker:logged-out', handleLoggedOut);
+    return () => {
+      window.removeEventListener('automaker:logged-out', handleLoggedOut);
+    };
+  }, []);
+
+  // Global listener for server offline/connection errors.
+  // This is triggered when a connection error is detected (e.g., server stopped).
+  // Redirects to login page which will detect server is offline and show error UI.
+  useEffect(() => {
+    const handleServerOffline = () => {
+      logger.warn('automaker:server-offline event received!');
+      useAuthStore.getState().setAuthState({ isAuthenticated: false, authChecked: true });
+
+      // Navigate to login - the login page will detect server is offline and show appropriate UI
+      if (location.pathname !== '/login' && location.pathname !== '/logged-out') {
+        navigate({ to: '/login' });
+      }
+    };
+
+    window.addEventListener('automaker:server-offline', handleServerOffline);
+    return () => {
+      window.removeEventListener('automaker:server-offline', handleServerOffline);
+    };
+  }, [location.pathname, navigate]);
+
+  // Initialize authentication
+  // - Electron mode: Uses API key from IPC (header-based auth)
+  // - Web mode: Uses HTTP-only session cookie
+  //
+  // Optimizations applied:
+  // 1. Instant hydration from localStorage settings cache (optimistic)
+  // 2. Parallelized server checks: verifySession + fetchSettings fire together
+  // 3. Server settings reconcile in background after optimistic render
+  useEffect(() => {
+    // Prevent concurrent auth checks
+    if (authCheckRunning.current) {
+      return;
+    }
+
+    const initAuth = async () => {
+      authCheckRunning.current = true;
+
+      try {
+        // OPTIMIZATION: Restore UI layout from the UI cache store immediately.
+        // This gives instant visual continuity (sidebar state, nav sections, etc.)
+        // before server settings arrive. Will be reconciled by hydrateStoreFromSettings().
+        restoreFromUICache((state) => useAppStore.setState(state));
+
+        // OPTIMIZATION: Immediately hydrate from localStorage settings cache
+        // This gives the user an instant UI while server data loads in the background
+        const cachedSettings = parseLocalStorageSettings();
+        let optimisticallyHydrated = false;
+        if (cachedSettings && cachedSettings.projects && cachedSettings.projects.length > 0) {
+          logger.info('[FAST_HYDRATE] Optimistically hydrating from localStorage cache');
+          hydrateStoreFromSettings(cachedSettings as GlobalSettings);
+          optimisticallyHydrated = true;
+        }
+
+        // OPTIMIZATION: Take the fast path BEFORE any async work when localStorage is warm.
+        //
+        // Previously the fast path check came after `await initApiKey()`. Even though
+        // initApiKey() is a no-op in web mode, the `await` still yields to the microtask
+        // queue — adding one unnecessary event loop tick before authChecked becomes true.
+        // By moving this check before any `await`, we set authChecked synchronously within
+        // the same React render cycle, eliminating a frame of spinner on mobile.
+        //
+        // The background verify (waitForServerReady + verifySession) still runs after the
+        // `await initApiKey()` below, so Electron mode still gets its server URL before
+        // any API calls are made.
+        if (optimisticallyHydrated) {
+          logger.info(
+            '[FAST_HYDRATE] localStorage settings warm — marking auth complete optimistically'
+          );
+          signalMigrationComplete();
+          useAuthStore.getState().setAuthState({
+            isAuthenticated: true,
+            authChecked: true,
+            settingsLoaded: true,
+          });
+
+          // OPTIMIZATION: Skip the blocking "Opening project..." auto-open screen
+          // when restoring from cache. On a warm restart (PWA memory eviction, tab
+          // discard, page reload), currentProject is already restored from the UI
+          // cache (restoreFromUICache ran above). The auto-open effect calls
+          // initializeProject() which makes 5+ blocking HTTP calls to verify the
+          // .automaker directory structure — this is needed for first-time opens
+          // but redundant for returning users. Marking auto-open as done lets the
+          // routing effect navigate to /board immediately without the detour.
+          const restoredProject = useAppStore.getState().currentProject;
+          if (restoredProject) {
+            logger.info(
+              '[FAST_HYDRATE] Project already restored from cache — skipping auto-open',
+              restoredProject.name
+            );
+            setAutoOpenStatus(AUTO_OPEN_STATUS.done);
+          }
+
+          // Initialize API key then start background verification.
+          // We do this AFTER marking auth complete so the spinner is already gone.
+          // In web mode initApiKey() is a no-op; in Electron it fetches the IPC server URL.
+          await initApiKey();
+
+          // Background verify: confirm session is still valid + fetch fresh settings.
+          // The UI is already rendered from cached data — this reconciles stale state.
+          //
+          // IMPORTANT: We skip waitForServerReady() here intentionally.
+          // waitForServerReady() uses cache:'no-store' (bypasses the service worker)
+          // and makes a dedicated /api/health round trip before any real work.
+          // On mobile cellular (100-300ms RTT) that pre-flight adds visible delay.
+          // Instead we fire verifySession + getGlobal directly — both already handle
+          // server-down gracefully via their .catch() wrappers. If the server isn't
+          // up yet the catches return null/failure and we simply keep the cached session.
+          //
+          // IMPORTANT: Distinguish definitive auth failures (401/403 → false) from
+          // transient errors (timeouts, network failures → null/throw). Only a definitive
+          // failure should reset isAuthenticated — transient errors keep the user logged in.
+          void (async () => {
+            try {
+              const api = getHttpApiClient();
+              const [sessionValid, settingsResult] = await Promise.all([
+                // verifySession() returns true (valid), false (401/403), or throws (transient).
+                // Map throws → null so we can distinguish "definitively invalid" from "couldn't check".
+                verifySession().catch((err) => {
+                  logger.debug('[FAST_HYDRATE] Background verify threw (transient):', err?.message);
+                  return null;
+                }),
+                api.settings.getGlobal().catch(() => ({ success: false, settings: null }) as const),
+              ]);
+
+              if (sessionValid === false) {
+                // Session is definitively expired (server returned 401/403) — log them out
+                logger.warn('[FAST_HYDRATE] Background verify: session invalid, logging out');
+                useAuthStore.getState().setAuthState({ isAuthenticated: false, authChecked: true });
+                return;
+              }
+
+              // Server responded — mark IPC connected (replaces the separate health check)
+              if (sessionValid === true) {
+                setIpcConnected(true);
+              }
+
+              if (sessionValid === null) {
+                // Transient error (timeout, network, 5xx) — keep the user logged in.
+                // The next real API call will detect an expired session if needed.
+                logger.info(
+                  '[FAST_HYDRATE] Background verify inconclusive — keeping session active'
+                );
+              }
+              // Update the localStorage cache with fresh server data so the NEXT
+              // cold start uses up-to-date settings. But do NOT call
+              // hydrateStoreFromSettings() here — the store was already hydrated
+              // from localStorage cache moments ago. Re-hydrating from the server
+              // response would create new object references for projects, settings
+              // arrays, etc., which triggers useSettingsSync's store subscriber
+              // to fire an immediate sync-back POST, causing a visible re-render
+              // flash (board → spinner → board) on mobile.
+              //
+              // The localStorage cache and server data are nearly always identical
+              // (the sync hook wrote the cache from the last successful sync).
+              // Any genuine differences (e.g., settings changed on another device)
+              // will be picked up on the next user interaction or the sync hook's
+              // periodic reconciliation.
+              if (settingsResult.success && settingsResult.settings) {
+                try {
+                  const { settings: finalSettings } = await performSettingsMigration(
+                    settingsResult.settings as unknown as Parameters<
+                      typeof performSettingsMigration
+                    >[0]
+                  );
+                  // Persist fresh server data to localStorage for the next cold start
+                  setItem('automaker-settings-cache', JSON.stringify(finalSettings));
+                  logger.info(
+                    '[FAST_HYDRATE] Background reconcile: cache updated (store untouched)'
+                  );
+
+                  // Selectively reconcile event hooks and ntfy endpoints from server.
+                  // Unlike projects/theme, these aren't rendered on the main view,
+                  // so updating them won't cause a visible re-render flash.
+                  const serverHooks = (finalSettings as GlobalSettings).eventHooks ?? [];
+                  const currentHooks = useAppStore.getState().eventHooks;
+                  if (JSON.stringify(serverHooks) !== JSON.stringify(currentHooks)) {
+                    logger.info(
+                      `[FAST_HYDRATE] Reconciling eventHooks from server (server=${serverHooks.length}, store=${currentHooks.length})`
+                    );
+                    useAppStore.setState({ eventHooks: serverHooks });
+                  }
+
+                  // Reconcile ntfy endpoints from server (same rationale as eventHooks)
+                  const serverEndpoints = (finalSettings as GlobalSettings).ntfyEndpoints ?? [];
+                  const currentEndpoints = useAppStore.getState().ntfyEndpoints;
+                  if (JSON.stringify(serverEndpoints) !== JSON.stringify(currentEndpoints)) {
+                    logger.info(
+                      `[FAST_HYDRATE] Reconciling ntfyEndpoints from server (server=${serverEndpoints.length}, store=${currentEndpoints.length})`
+                    );
+                    useAppStore.setState({ ntfyEndpoints: serverEndpoints });
+                  }
+                } catch (e) {
+                  logger.debug('[FAST_HYDRATE] Failed to update cache:', e);
+                }
+              }
+            } catch (error) {
+              // Outer catch for unexpected errors — do NOT reset auth state.
+              // If the session is truly expired, the next API call will handle it.
+              logger.warn(
+                '[FAST_HYDRATE] Background verify failed (server may be restarting):',
+                error
+              );
+            }
+          })();
+
+          return; // Auth is done — foreground initAuth exits here
+        }
+
+        // Initialize API key for Electron mode (needed before any server calls)
+        await initApiKey();
+
+        // Cold start path: server not yet confirmed running, wait for it
+        // (Only reached when localStorage has no cached settings)
+        const serverReady = await waitForServerReady();
+        if (!serverReady) {
+          handleServerOffline();
+          return;
+        }
+
+        // OPTIMIZATION: Fire verifySession and fetchSettings in parallel
+        // instead of waiting for session verification before fetching settings
+        const api = getHttpApiClient();
+        const [sessionValid, settingsResult] = await Promise.all([
+          // verifySession() returns true (valid), false (401/403), or throws (transient).
+          // Map throws → null (matching background verify behaviour) so transient
+          // failures don't cause unnecessary logouts on cold start.
+          verifySession().catch((error) => {
+            logger.warn('Session verification threw (transient, keeping session):', error?.message);
+            return null;
+          }),
+          api.settings.getGlobal().catch((error) => {
+            logger.warn('Settings fetch failed during parallel init:', error);
+            return { success: false, settings: null } as const;
+          }),
+        ]);
+
+        if (sessionValid === true || sessionValid === null) {
+          // Settings were fetched in parallel - use them directly
+          if (settingsResult.success && settingsResult.settings) {
+            const { settings: finalSettings, migrated } = await performSettingsMigration(
+              settingsResult.settings as unknown as Parameters<typeof performSettingsMigration>[0]
+            );
+
+            if (migrated) {
+              logger.info('Settings migration from localStorage completed');
+            }
+
+            // Hydrate store with the final settings (reconcile with optimistic data)
+            hydrateStoreFromSettings(finalSettings);
+
+            // CRITICAL: Wait for React to render the hydrated state before
+            // signaling completion. Zustand updates are synchronous, but React
+            // hasn't necessarily re-rendered yet. This prevents race conditions
+            // where useSettingsSync reads state before the UI has updated.
+            await new Promise((resolve) => setTimeout(resolve, 0));
+
+            // Signal that settings hydration is complete FIRST.
+            signalMigrationComplete();
+
+            // Now mark auth as checked AND settings as loaded.
+            useAuthStore.getState().setAuthState({
+              isAuthenticated: true,
+              authChecked: true,
+              settingsLoaded: true,
+            });
+
+            return;
+          }
+
+          // Settings weren't available in parallel response - retry with backoff
+          try {
+            const maxAttempts = 6;
+            const baseDelayMs = 250;
+            let lastError: unknown = settingsResult;
+
+            for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+              const delayMs = Math.min(1500, baseDelayMs * attempt);
+              logger.warn(
+                `Settings not ready (attempt ${attempt}/${maxAttempts}); retrying in ${delayMs}ms...`,
+                lastError
+              );
+              await new Promise((resolve) => setTimeout(resolve, delayMs));
+
+              try {
+                const retryResult = await api.settings.getGlobal();
+                if (retryResult.success && retryResult.settings) {
+                  const { settings: finalSettings, migrated } = await performSettingsMigration(
+                    retryResult.settings as unknown as Parameters<
+                      typeof performSettingsMigration
+                    >[0]
+                  );
+
+                  if (migrated) {
+                    logger.info('Settings migration from localStorage completed');
+                  }
+
+                  hydrateStoreFromSettings(finalSettings);
+                  await new Promise((resolve) => setTimeout(resolve, 0));
+                  signalMigrationComplete();
+
+                  useAuthStore.getState().setAuthState({
+                    isAuthenticated: true,
+                    authChecked: true,
+                    settingsLoaded: true,
+                  });
+
+                  return;
+                }
+
+                lastError = retryResult;
+              } catch (error) {
+                lastError = error;
+              }
+            }
+
+            throw lastError ?? new Error('Failed to load settings');
+          } catch (error) {
+            logger.error('Failed to fetch settings after valid session:', error);
+
+            // If optimistically hydrated, allow the user to continue with cached data
+            if (optimisticallyHydrated) {
+              logger.info('[FAST_HYDRATE] Using optimistic cache as fallback (server unavailable)');
+              signalMigrationComplete();
+              useAuthStore.getState().setAuthState({
+                isAuthenticated: true,
+                authChecked: true,
+                settingsLoaded: true,
+              });
+              return;
+            }
+
+            // If we can't load settings, we must NOT start syncing defaults to the server.
+            // Only update auth state — the routing effect handles navigation to /logged-out.
+            // Calling navigate() here AND in the routing effect causes duplicate navigations
+            // that can trigger React error #185 (maximum update depth exceeded) on cold start.
+            useAuthStore.getState().setAuthState({ isAuthenticated: false, authChecked: true });
+            signalMigrationComplete();
+            return;
+          }
+        } else {
+          // Session is definitively invalid (server returned 401/403) - treat as not authenticated.
+          // Only update auth state — the routing effect handles navigation to /logged-out.
+          // Calling navigate() here AND in the routing effect causes duplicate navigations
+          // that can trigger React error #185 (maximum update depth exceeded) on cold start.
+          useAuthStore.getState().setAuthState({ isAuthenticated: false, authChecked: true });
+          // Signal migration complete so sync hook doesn't hang (nothing to sync when not authenticated)
+          signalMigrationComplete();
+        }
+      } catch (error) {
+        logger.error('Failed to initialize auth:', error);
+        // On error, treat as not authenticated.
+        // Only update auth state — the routing effect handles navigation to /logged-out.
+        // Calling navigate() here AND in the routing effect causes duplicate navigations
+        // that can trigger React error #185 (maximum update depth exceeded) on cold start.
+        useAuthStore.getState().setAuthState({ isAuthenticated: false, authChecked: true });
+        // Signal migration complete so sync hook doesn't hang
+        signalMigrationComplete();
+      } finally {
+        authCheckRunning.current = false;
+      }
+    };
+
+    initAuth();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- setIpcConnected is stable, runs once on mount
+  }, []); // Runs once per load; auth state drives routing rules
+
+  // Note: Settings are now loaded in __root.tsx after successful session verification
+  // This ensures a unified flow across all modes (Electron, web, external server)
+
+  // Routing rules (ALL modes - unified flow):
+  // - If not authenticated: force /logged-out (even /setup is protected)
+  // - If authenticated but setup incomplete: force /setup
+  // - If authenticated and setup complete: allow access to app
+  useEffect(() => {
+    logger.debug('Routing effect triggered:', {
+      authChecked,
+      isAuthenticated,
+      settingsLoaded,
+      setupComplete,
+      pathname: location.pathname,
+    });
+
+    // Wait for auth check to complete before enforcing any redirects
+    if (!authChecked) {
+      logger.debug('Auth not checked yet, skipping routing');
+      return;
+    }
+
+    // Unauthenticated -> force /logged-out (but allow /login so user can authenticate)
+    if (!isAuthenticated) {
+      logger.warn('Not authenticated, redirecting to /logged-out. Auth state:', {
+        authChecked,
+        isAuthenticated,
+        settingsLoaded,
+        currentPath: location.pathname,
+      });
+      if (location.pathname !== '/logged-out' && location.pathname !== '/login') {
+        navigate({ to: '/logged-out' });
+      }
+      return;
+    }
+
+    // Wait for settings to be loaded before making setupComplete-based routing decisions
+    // This prevents redirecting to /setup before we know the actual setupComplete value
+    if (!settingsLoaded) return;
+
+    // Authenticated -> determine whether setup is required
+    if (!setupComplete && location.pathname !== '/setup') {
+      navigate({ to: '/setup' });
+      return;
+    }
+
+    // Setup complete but user is still on /setup -> go to dashboard
+    if (setupComplete && location.pathname === '/setup') {
+      navigate({ to: '/dashboard' });
+    }
+  }, [authChecked, isAuthenticated, settingsLoaded, setupComplete, location.pathname, navigate]);
+
+  // Fallback: If auth is checked and authenticated but settings not loaded,
+  // it means login-view or another component set auth state before __root.tsx's
+  // auth flow completed. Load settings now to prevent sync with empty state.
+  useEffect(() => {
+    // Only trigger if auth is valid but settings aren't loaded yet
+    // This handles the case where login-view sets authChecked=true before we finish our auth flow
+    if (!authChecked || !isAuthenticated || settingsLoaded) {
+      logger.debug('Fallback skipped:', { authChecked, isAuthenticated, settingsLoaded });
+      return;
+    }
+
+    logger.info('Auth valid but settings not loaded - triggering fallback load');
+
+    const loadSettings = async () => {
+      const api = getHttpApiClient();
+      try {
+        logger.debug('Fetching settings in fallback...');
+        const settingsResult = await api.settings.getGlobal();
+        logger.debug('Settings fetched:', settingsResult.success ? 'success' : 'failed');
+        if (settingsResult.success && settingsResult.settings) {
+          const { settings: finalSettings } = await performSettingsMigration(
+            settingsResult.settings as unknown as Parameters<typeof performSettingsMigration>[0]
+          );
+          logger.debug('Settings migrated, hydrating stores...');
+          hydrateStoreFromSettings(finalSettings);
+          await new Promise((resolve) => setTimeout(resolve, 0));
+          signalMigrationComplete();
+          logger.debug('Setting settingsLoaded=true');
+          useAuthStore.getState().setAuthState({ settingsLoaded: true });
+          logger.info('Fallback settings load completed successfully');
+        }
+      } catch (error) {
+        logger.error('Failed to load settings in fallback:', error);
+      }
+    };
+
+    loadSettings();
+  }, [authChecked, isAuthenticated, settingsLoaded]);
+
+  useEffect(() => {
+    setGlobalFileBrowser(openFileBrowser);
+  }, [openFileBrowser]);
+
+  // Test IPC connection on mount.
+  // For returning users on the fast-hydrate path, the background IIFE in initAuth
+  // already calls waitForServerReady() which performs a health check. Doing a second
+  // concurrent health check wastes a connection slot on mobile's limited TCP pool.
+  // Instead, set ipcConnected optimistically for returning users (auth already marked
+  // true at module load time) and let the background verify surface any real failures.
+  useEffect(() => {
+    // Returning users: auth store was pre-populated from localStorage at module load.
+    // The background verify IIFE in initAuth handles the real health check.
+    // Optimistically mark connected — if the server is truly down, the next API call
+    // (triggered by the background verify) will surface the error.
+    const { authChecked: alreadyChecked, isAuthenticated: alreadyAuthed } = useAuthStore.getState();
+    if (!isElectron() && alreadyChecked && alreadyAuthed) {
+      setIpcConnected(true);
+      return;
+    }
+
+    const testConnection = async () => {
+      try {
+        if (isElectron()) {
+          const api = getElectronAPI();
+          const result = await api.ping();
+          setIpcConnected(result === 'pong');
+          return;
+        }
+
+        // Web mode: check backend availability without instantiating the full HTTP client
+        const response = await fetch(`${getServerUrlSync()}/api/health`, {
+          method: 'GET',
+          signal: AbortSignal.timeout(2000),
+        });
+        setIpcConnected(response.ok);
+      } catch (error) {
+        logger.error('IPC connection failed:', error);
+        setIpcConnected(false);
+      }
+    };
+
+    testConnection();
+  }, [setIpcConnected]);
+
+  // Redirect from welcome page based on project state
+  useEffect(() => {
+    if (isMounted && isRootRoute) {
+      if (!settingsLoaded || shouldAutoOpen) {
+        return;
+      }
+      if (currentProject) {
+        // Project is selected, go to board
+        navigate({ to: '/board' });
+      } else {
+        // No project selected, go to dashboard
+        navigate({ to: '/dashboard' });
+      }
+    }
+  }, [isMounted, currentProject, isRootRoute, navigate, shouldAutoOpen, settingsLoaded]);
+
+  // Auto-open the most recent project on startup
+  useEffect(() => {
+    if (!canAutoOpen) return;
+    if (autoOpenStatus !== AUTO_OPEN_STATUS.idle) return;
+
+    if (!autoOpenCandidate) return;
+
+    setAutoOpenStatus(AUTO_OPEN_STATUS.opening);
+
+    const openProject = async () => {
+      try {
+        const initResult = await initializeProject(autoOpenCandidate.path);
+        if (!initResult.success) {
+          logger.warn('Auto-open project failed:', initResult.error);
+          if (isRootRoute) {
+            navigate({ to: '/dashboard' });
+          }
+          return;
+        }
+
+        if (!currentProject || currentProject.id !== autoOpenCandidate.id) {
+          upsertAndSetCurrentProject(
+            autoOpenCandidate.path,
+            autoOpenCandidate.name,
+            autoOpenCandidate.theme as ThemeMode | undefined
+          );
+        }
+
+        if (isRootRoute) {
+          navigate({ to: '/board' });
+        }
+      } catch (error) {
+        logger.error('Auto-open project crashed:', error);
+        if (isRootRoute) {
+          navigate({ to: '/dashboard' });
+        }
+      } finally {
+        setAutoOpenStatus(AUTO_OPEN_STATUS.done);
+      }
+    };
+
+    void openProject();
+  }, [
+    canAutoOpen,
+    autoOpenStatus,
+    autoOpenCandidate,
+    currentProject,
+    navigate,
+    upsertAndSetCurrentProject,
+    isRootRoute,
+  ]);
+
+  // Bootstrap Codex models on app startup (after auth completes)
+  useEffect(() => {
+    // Only fetch if authenticated and Codex CLI is available
+    if (!authChecked || !isAuthenticated) return;
+
+    const isCodexAvailable = codexCliStatus?.installed && codexCliStatus?.hasApiKey;
+    if (!isCodexAvailable) return;
+
+    // Fetch models in the background
+    fetchCodexModels().catch((error) => {
+      logger.warn('Failed to bootstrap Codex models:', error);
+    });
+  }, [authChecked, isAuthenticated, codexCliStatus, fetchCodexModels]);
+
+  // Apply theme class to document - use deferred value to avoid blocking UI
+  useEffect(() => {
+    const root = document.documentElement;
+    // Remove all theme classes dynamically from themeOptions
+    const themeClasses = themeOptions
+      .map((option) => option.value)
+      .filter((theme) => theme !== ('system' as ThemeOption['value']));
+    root.classList.remove(...themeClasses);
+
+    if (deferredTheme === 'dark') {
+      root.classList.add('dark');
+    } else if (deferredTheme === 'system') {
+      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      root.classList.add(isDark ? 'dark' : 'light');
+    } else if (deferredTheme && deferredTheme !== 'light') {
+      root.classList.add(deferredTheme);
+    } else {
+      root.classList.add('light');
+    }
+  }, [deferredTheme]);
+
+  // Apply font CSS variables for project-specific font overrides
+  useEffect(() => {
+    const root = document.documentElement;
+
+    if (effectiveFontSans) {
+      root.style.setProperty('--font-sans', effectiveFontSans);
+    } else {
+      root.style.removeProperty('--font-sans');
+    }
+
+    if (effectiveFontMono) {
+      root.style.setProperty('--font-mono', effectiveFontMono);
+    } else {
+      root.style.removeProperty('--font-mono');
+    }
+  }, [effectiveFontSans, effectiveFontMono]);
+
+  // Show sandbox rejection screen if user denied the risk warning
+  if (sandboxStatus === 'denied') {
+    return <SandboxRejectionScreen />;
+  }
+
+  // Show sandbox risk dialog if not containerized and user hasn't confirmed
+  // The dialog is rendered as an overlay while the main content is blocked
+  const showSandboxDialog = sandboxStatus === 'needs-confirmation';
+
+  // Show login page (full screen, no sidebar)
+  // Note: No sandbox dialog here - it only shows after login and setup complete
+  if (isLoginRoute || isLoggedOutRoute) {
+    return (
+      <main className="h-full overflow-hidden" data-testid="app-container">
+        <Outlet />
+      </main>
+    );
+  }
+
+  // Wait for auth check before rendering protected routes (ALL modes - unified flow).
+  // The visual here intentionally matches the inline HTML app shell (index.html)
+  // so the transition from HTML → React is seamless — no layout shift, no flash.
+  if (!authChecked) {
+    return (
+      <main
+        className="flex h-full flex-col items-center justify-center gap-6"
+        data-testid="app-container"
+      >
+        <svg
+          className="h-14 w-14 opacity-90"
+          viewBox="0 0 256 256"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <rect className="fill-foreground/[0.08]" x="16" y="16" width="224" height="224" rx="56" />
+          <g
+            className="stroke-foreground/70"
+            fill="none"
+            strokeWidth="20"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M92 92 L52 128 L92 164" />
+            <path d="M144 72 L116 184" />
+            <path d="M164 92 L204 128 L164 164" />
+          </g>
+        </svg>
+        {/* Pure CSS spinner — no icon dependencies, so vendor-icons can be deferred/prefetched.
+            Matches the HTML app shell in index.html for a seamless HTML→React transition. */}
+        <div
+          role="status"
+          aria-label="Loading"
+          className="h-4 w-4 animate-spin rounded-full border-2 border-foreground/10 border-t-foreground/50"
+        />
+      </main>
+    );
+  }
+
+  // Redirect to logged-out if not authenticated (ALL modes - unified flow)
+  // Show loading state while navigation is in progress
+  if (!isAuthenticated) {
+    return (
+      <main className="flex h-full items-center justify-center" data-testid="app-container">
+        <LoadingState message="Redirecting..." />
+      </main>
+    );
+  }
+
+  if (shouldBlockForSettings) {
+    return (
+      <main className="flex h-full items-center justify-center" data-testid="app-container">
+        <LoadingState message="Loading settings..." />
+      </main>
+    );
+  }
+
+  if (shouldAutoOpen) {
+    return (
+      <main className="flex h-full items-center justify-center" data-testid="app-container">
+        <LoadingState message="Opening project..." />
+      </main>
+    );
+  }
+
+  // Show setup page (full screen, no sidebar) - authenticated only
+  if (isSetupRoute) {
+    return (
+      <main className="h-full overflow-hidden" data-testid="app-container">
+        <Outlet />
+      </main>
+    );
+  }
+
+  // Show dashboard page (full screen, no sidebar) - authenticated only
+  if (isDashboardRoute) {
+    return (
+      <>
+        <main className="h-full overflow-hidden" data-testid="app-container">
+          <Outlet />
+          <Toaster richColors position="bottom-right" />
+        </main>
+        <SandboxRiskDialog
+          open={showSandboxDialog}
+          onConfirm={handleSandboxConfirm}
+          onDeny={handleSandboxDeny}
+        />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <main className="flex h-full overflow-hidden" data-testid="app-container">
+        {/* Full-width titlebar drag region for Electron window dragging */}
+        {isElectron() && (
+          <div
+            className={`fixed top-0 left-0 right-0 h-6 titlebar-drag-region z-40 pointer-events-none ${isMac ? 'pl-20' : ''}`}
+            aria-hidden="true"
+          />
+        )}
+        {/* Discord-style layout: narrow project switcher + expandable sidebar */}
+        {sidebarStyle === 'discord' && <ProjectSwitcher />}
+        <Sidebar />
+        <div
+          className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
+          style={{ marginRight: streamerPanelOpen ? '250px' : '0' }}
+        >
+          <Outlet />
+        </div>
+
+        {/* Hidden streamer panel - opens with "\" key, pushes content */}
+        <div
+          className={`fixed top-0 right-0 h-full w-[250px] bg-background border-l border-border transition-transform duration-300 ${
+            streamerPanelOpen ? 'translate-x-0' : 'translate-x-full'
+          }`}
+        />
+        <Toaster richColors position="bottom-right" />
+      </main>
+      <SandboxRiskDialog
+        open={showSandboxDialog}
+        onConfirm={handleSandboxConfirm}
+        onDeny={handleSandboxDeny}
+      />
+    </>
+  );
+}
+
+function RootLayout() {
+  // Hide devtools on compact screens (mobile/tablet) to avoid overlap with UI controls
+  const isCompact = useIsCompact();
+  // Get the user's preference for showing devtools from the app store
+  const showQueryDevtools = useAppStore((state) => state.showQueryDevtools);
+
+  // Show devtools only if: in dev mode, user setting enabled, and not compact screen
+  const shouldShowDevtools = IS_DEV && showQueryDevtools && !isCompact;
+
+  return (
+    <PersistQueryClientProvider client={queryClient} persistOptions={persistOptions}>
+      <FileBrowserProvider>
+        <RootLayoutContent />
+      </FileBrowserProvider>
+      {shouldShowDevtools && (
+        <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-right" />
+      )}
+    </PersistQueryClientProvider>
+  );
+}
+
+export const Route = createRootRoute({
+  component: RootLayout,
+});
diff --git a/temp_repo/apps/ui/src/routes/agent.tsx b/temp_repo/apps/ui/src/routes/agent.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..399c780e818807389084f7abc26344d5317aeccb
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/agent.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { AgentView } from '@/components/views/agent-view';
+
+export const Route = createFileRoute('/agent')({
+  component: AgentView,
+});
diff --git a/temp_repo/apps/ui/src/routes/board.lazy.tsx b/temp_repo/apps/ui/src/routes/board.lazy.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d9a0835a262db063898cd4633b6357b56e6ba3fd
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/board.lazy.tsx
@@ -0,0 +1,11 @@
+import { createLazyFileRoute, useSearch } from '@tanstack/react-router';
+import { BoardView } from '@/components/views/board-view';
+
+export const Route = createLazyFileRoute('/board')({
+  component: BoardRouteComponent,
+});
+
+function BoardRouteComponent() {
+  const { featureId, projectPath } = useSearch({ from: '/board' });
+  return <BoardView initialFeatureId={featureId} initialProjectPath={projectPath} />;
+}
diff --git a/temp_repo/apps/ui/src/routes/board.tsx b/temp_repo/apps/ui/src/routes/board.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1f029d5ec3aca76204fda18b995bb635a789be6b
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/board.tsx
@@ -0,0 +1,18 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { z } from 'zod';
+
+// Search params schema for board route
+const boardSearchSchema = z.object({
+  featureId: z.string().optional(),
+  projectPath: z.string().optional(),
+});
+
+// Component is lazy-loaded via board.lazy.tsx for code splitting.
+// Board is the most-visited landing route, but lazy loading still benefits
+// initial load because the board component and its dependencies are only
+// downloaded when the user actually navigates to /board (vs being bundled
+// into the entry chunk). TanStack Router's autoCodeSplitting handles the
+// dynamic import automatically when a .lazy.tsx file exists.
+export const Route = createFileRoute('/board')({
+  validateSearch: boardSearchSchema,
+});
diff --git a/temp_repo/apps/ui/src/routes/context.tsx b/temp_repo/apps/ui/src/routes/context.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cfe715584d9492c70b9733b19a1f1342d22c2974
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/context.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { ContextView } from '@/components/views/context-view';
+
+export const Route = createFileRoute('/context')({
+  component: ContextView,
+});
diff --git a/temp_repo/apps/ui/src/routes/dashboard.tsx b/temp_repo/apps/ui/src/routes/dashboard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e204ecf0c07ab56c462aa7eea82ea27c163faa1a
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/dashboard.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { DashboardView } from '@/components/views/dashboard-view';
+
+export const Route = createFileRoute('/dashboard')({
+  component: DashboardView,
+});
diff --git a/temp_repo/apps/ui/src/routes/file-editor.lazy.tsx b/temp_repo/apps/ui/src/routes/file-editor.lazy.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f5552628a6b105d7bf19ddc47c28076ae2103186
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/file-editor.lazy.tsx
@@ -0,0 +1,11 @@
+import { createLazyFileRoute, useSearch } from '@tanstack/react-router';
+import { FileEditorView } from '@/components/views/file-editor-view/file-editor-view';
+
+export const Route = createLazyFileRoute('/file-editor')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { path } = useSearch({ from: '/file-editor' });
+  return <FileEditorView initialPath={path} />;
+}
diff --git a/temp_repo/apps/ui/src/routes/file-editor.tsx b/temp_repo/apps/ui/src/routes/file-editor.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d172d71b16fefd244c849b264eaa5c22b9b1b612
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/file-editor.tsx
@@ -0,0 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { z } from 'zod';
+
+const fileEditorSearchSchema = z.object({
+  path: z.string().optional(),
+});
+
+// Component is lazy-loaded via file-editor.lazy.tsx for code splitting
+export const Route = createFileRoute('/file-editor')({
+  validateSearch: fileEditorSearchSchema,
+});
diff --git a/temp_repo/apps/ui/src/routes/github-issues.tsx b/temp_repo/apps/ui/src/routes/github-issues.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..16506e47b790e1886c83e905cda5eadebe805395
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/github-issues.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { GitHubIssuesView } from '@/components/views/github-issues-view';
+
+export const Route = createFileRoute('/github-issues')({
+  component: GitHubIssuesView,
+});
diff --git a/temp_repo/apps/ui/src/routes/github-prs.tsx b/temp_repo/apps/ui/src/routes/github-prs.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..78e321a6a86b4f3e1cb37234c1c61f97a4abc33c
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/github-prs.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { GitHubPRsView } from '@/components/views/github-prs-view';
+
+export const Route = createFileRoute('/github-prs')({
+  component: GitHubPRsView,
+});
diff --git a/temp_repo/apps/ui/src/routes/graph.lazy.tsx b/temp_repo/apps/ui/src/routes/graph.lazy.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..56073e294942f8dc5399920d5007db56d3a548ba
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/graph.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from '@tanstack/react-router';
+import { GraphViewPage } from '@/components/views/graph-view-page';
+
+export const Route = createLazyFileRoute('/graph')({
+  component: GraphViewPage,
+});
diff --git a/temp_repo/apps/ui/src/routes/graph.tsx b/temp_repo/apps/ui/src/routes/graph.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f422488b8861a6c17fe52a062aa876a82780b149
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/graph.tsx
@@ -0,0 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+// Component is lazy-loaded via graph.lazy.tsx for code splitting
+export const Route = createFileRoute('/graph')({});
diff --git a/temp_repo/apps/ui/src/routes/ideation.tsx b/temp_repo/apps/ui/src/routes/ideation.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6352d6aa79b467d2b83607ae09d8d366818944ac
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/ideation.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { IdeationView } from '@/components/views/ideation-view';
+
+export const Route = createFileRoute('/ideation')({
+  component: IdeationView,
+});
diff --git a/temp_repo/apps/ui/src/routes/index.tsx b/temp_repo/apps/ui/src/routes/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8cb75bfc4bd16dd35ef5ee2c34b89148cea6dbb7
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/index.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { WelcomeView } from '@/components/views/welcome-view';
+
+export const Route = createFileRoute('/')({
+  component: WelcomeView,
+});
diff --git a/temp_repo/apps/ui/src/routes/interview.tsx b/temp_repo/apps/ui/src/routes/interview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ffbc87e729c149cf49267a1a668f5d34aac91e50
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/interview.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { InterviewView } from '@/components/views/interview-view';
+
+export const Route = createFileRoute('/interview')({
+  component: InterviewView,
+});
diff --git a/temp_repo/apps/ui/src/routes/logged-out.tsx b/temp_repo/apps/ui/src/routes/logged-out.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4a3a296c643ebd2cfd60a6ab3dd1e5a085f76f7b
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/logged-out.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { LoggedOutView } from '@/components/views/logged-out-view';
+
+export const Route = createFileRoute('/logged-out')({
+  component: LoggedOutView,
+});
diff --git a/temp_repo/apps/ui/src/routes/login.tsx b/temp_repo/apps/ui/src/routes/login.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b5e4a111636bbc04f2882ad815da3e9b40db800f
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/login.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { LoginView } from '@/components/views/login-view';
+
+export const Route = createFileRoute('/login')({
+  component: LoginView,
+});
diff --git a/temp_repo/apps/ui/src/routes/memory.tsx b/temp_repo/apps/ui/src/routes/memory.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..837cf16028f39263e9c43b6d8e150602cc14b93b
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/memory.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { MemoryView } from '@/components/views/memory-view';
+
+export const Route = createFileRoute('/memory')({
+  component: MemoryView,
+});
diff --git a/temp_repo/apps/ui/src/routes/notifications.tsx b/temp_repo/apps/ui/src/routes/notifications.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6500b8fe6a996e5b2dd1e0e6211f83e9e138b579
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/notifications.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { NotificationsView } from '@/components/views/notifications-view';
+
+export const Route = createFileRoute('/notifications')({
+  component: NotificationsView,
+});
diff --git a/temp_repo/apps/ui/src/routes/overview.tsx b/temp_repo/apps/ui/src/routes/overview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ecb51ef3e465535e2fbe677576b8dac6ed3e690f
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/overview.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { OverviewView } from '@/components/views/overview-view';
+
+export const Route = createFileRoute('/overview')({
+  component: OverviewView,
+});
diff --git a/temp_repo/apps/ui/src/routes/project-settings.tsx b/temp_repo/apps/ui/src/routes/project-settings.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..37e72f7c48ef650819d41590ff5372fb8cc7fe4f
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/project-settings.tsx
@@ -0,0 +1,16 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { ProjectSettingsView } from '@/components/views/project-settings-view';
+import type { ProjectSettingsViewId } from '@/components/views/project-settings-view/hooks/use-project-settings-view';
+
+interface ProjectSettingsSearchParams {
+  section?: ProjectSettingsViewId;
+}
+
+export const Route = createFileRoute('/project-settings')({
+  component: ProjectSettingsView,
+  validateSearch: (search: Record<string, unknown>): ProjectSettingsSearchParams => {
+    return {
+      section: search.section as ProjectSettingsViewId | undefined,
+    };
+  },
+});
diff --git a/temp_repo/apps/ui/src/routes/running-agents.tsx b/temp_repo/apps/ui/src/routes/running-agents.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f5244e56e5c70657c7d153d4e2cee3cd6b99451f
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/running-agents.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { RunningAgentsView } from '@/components/views/running-agents-view';
+
+export const Route = createFileRoute('/running-agents')({
+  component: RunningAgentsView,
+});
diff --git a/temp_repo/apps/ui/src/routes/settings.tsx b/temp_repo/apps/ui/src/routes/settings.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c509e93a632bff12982283308742ca2bdfd52c48
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/settings.tsx
@@ -0,0 +1,16 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { SettingsView } from '@/components/views/settings-view';
+import type { SettingsViewId } from '@/components/views/settings-view/hooks';
+
+interface SettingsSearchParams {
+  view?: SettingsViewId;
+}
+
+export const Route = createFileRoute('/settings')({
+  component: SettingsView,
+  validateSearch: (search: Record<string, unknown>): SettingsSearchParams => {
+    return {
+      view: search.view as SettingsViewId | undefined,
+    };
+  },
+});
diff --git a/temp_repo/apps/ui/src/routes/setup.tsx b/temp_repo/apps/ui/src/routes/setup.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1d175ac1dda829e05c8c10dcab8d225bdbe79d85
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/setup.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { SetupView } from '@/components/views/setup-view';
+
+export const Route = createFileRoute('/setup')({
+  component: SetupView,
+});
diff --git a/temp_repo/apps/ui/src/routes/spec.lazy.tsx b/temp_repo/apps/ui/src/routes/spec.lazy.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a88210038715fa22bbb43d995882f968f2b081cf
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/spec.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from '@tanstack/react-router';
+import { SpecView } from '@/components/views/spec-view';
+
+export const Route = createLazyFileRoute('/spec')({
+  component: SpecView,
+});
diff --git a/temp_repo/apps/ui/src/routes/spec.tsx b/temp_repo/apps/ui/src/routes/spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c0cce27f2848fdfab4ba32f23e67f7fe407ae065
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/spec.tsx
@@ -0,0 +1,4 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+// Component is lazy-loaded via spec.lazy.tsx for code splitting
+export const Route = createFileRoute('/spec')({});
diff --git a/temp_repo/apps/ui/src/routes/terminal.lazy.tsx b/temp_repo/apps/ui/src/routes/terminal.lazy.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..634322334eb1aed0c9c0de0a414238230cb257fc
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/terminal.lazy.tsx
@@ -0,0 +1,19 @@
+import { createLazyFileRoute, useSearch } from '@tanstack/react-router';
+import { TerminalView } from '@/components/views/terminal-view';
+
+export const Route = createLazyFileRoute('/terminal')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { cwd, branch, mode, nonce, command } = useSearch({ from: '/terminal' });
+  return (
+    <TerminalView
+      initialCwd={cwd}
+      initialBranch={branch}
+      initialMode={mode}
+      nonce={nonce}
+      initialCommand={command}
+    />
+  );
+}
diff --git a/temp_repo/apps/ui/src/routes/terminal.tsx b/temp_repo/apps/ui/src/routes/terminal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d2878cb535c08a27716644fb840dd8b4f825d106
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/terminal.tsx
@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { z } from 'zod';
+
+const terminalSearchSchema = z.object({
+  cwd: z.string().optional(),
+  branch: z.string().optional(),
+  mode: z.enum(['tab', 'split']).optional(),
+  nonce: z.coerce.number().optional(),
+  command: z.string().optional(),
+});
+
+// Component is lazy-loaded via terminal.lazy.tsx for code splitting
+export const Route = createFileRoute('/terminal')({
+  validateSearch: terminalSearchSchema,
+});
diff --git a/temp_repo/apps/ui/src/routes/wiki.tsx b/temp_repo/apps/ui/src/routes/wiki.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c9a583de01645472cd76d6427fa8afa800ba75b5
--- /dev/null
+++ b/temp_repo/apps/ui/src/routes/wiki.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { WikiView } from '@/components/views/wiki-view';
+
+export const Route = createFileRoute('/wiki')({
+  component: WikiView,
+});
diff --git a/temp_repo/apps/ui/src/store/app-store.ts b/temp_repo/apps/ui/src/store/app-store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e4b96eb27cb3562cdf28eb07a991a50ed1ee29c8
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/app-store.ts
@@ -0,0 +1,3092 @@
+import { create } from 'zustand';
+// Note: persist middleware removed - settings now sync via API (use-settings-sync.ts)
+import type { Project, TrashedProject } from '@/lib/electron';
+import { saveProjects, saveTrashedProjects } from '@/lib/electron';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { createLogger } from '@automaker/utils/logger';
+// Note: setItem/getItem moved to ./utils/theme-utils.ts
+import { UI_SANS_FONT_OPTIONS, UI_MONO_FONT_OPTIONS } from '@/config/ui-font-options';
+import { loadFont } from '@/styles/font-imports';
+import type {
+  FeatureImagePath,
+  FeatureTextFilePath,
+  ModelAlias,
+  PlanningMode,
+  ThinkingLevel,
+  ReasoningEffort,
+  ModelProvider,
+  PhaseModelKey,
+  PhaseModelEntry,
+  PipelineStep,
+  ModelDefinition,
+  ServerLogLevel,
+  ParsedTask,
+  PlanSpec,
+  FeatureTemplate,
+} from '@automaker/types';
+import {
+  getAllCursorModelIds,
+  getAllCodexModelIds,
+  getAllOpencodeModelIds,
+  getAllGeminiModelIds,
+  getAllCopilotModelIds,
+  DEFAULT_PHASE_MODELS,
+  DEFAULT_OPENCODE_MODEL,
+  DEFAULT_GEMINI_MODEL,
+  DEFAULT_COPILOT_MODEL,
+  DEFAULT_MAX_CONCURRENCY,
+  DEFAULT_GLOBAL_SETTINGS,
+  getThinkingLevelsForModel,
+} from '@automaker/types';
+
+// Import types from modular type files
+import {
+  // UI types
+  type ViewMode,
+  type ThemeMode,
+  type BoardViewMode,
+  type ShortcutKey,
+  type KeyboardShortcuts,
+  type BackgroundSettings,
+  // Settings types
+  type ApiKeys,
+  // Chat types
+  type ImageAttachment,
+  type TextFileAttachment,
+  type ChatMessage,
+  type ChatSession,
+  type FeatureImage,
+  // Terminal types
+  type TerminalPanelContent,
+  type TerminalTab,
+  type TerminalState,
+  type PersistedTerminalPanel,
+  type PersistedTerminalTab,
+  type PersistedTerminalState,
+  type PersistedTerminalSettings,
+  generateSplitId,
+  // Project types
+  type ClaudeModel,
+  type Feature,
+  type FileTreeNode,
+  type ProjectAnalysis,
+  // State types
+  type InitScriptState,
+  type AutoModeActivity,
+  type AppState,
+  type AppActions,
+  // Usage types
+  type ClaudeUsage,
+  type ClaudeUsageResponse,
+  type CodexPlanType,
+  type CodexRateLimitWindow,
+  type CodexUsage,
+  type CodexUsageResponse,
+  type ZaiPlanType,
+  type ZaiQuotaLimit,
+  type ZaiUsage,
+  type ZaiUsageResponse,
+  type GeminiQuotaBucket,
+  type GeminiTierQuota,
+  type GeminiUsage,
+  type GeminiUsageResponse,
+} from './types';
+
+// Import utility functions from modular utils files
+import {
+  THEME_STORAGE_KEY,
+  getStoredTheme,
+  getStoredFontSans,
+  getStoredFontMono,
+  parseShortcut,
+  formatShortcut,
+  DEFAULT_KEYBOARD_SHORTCUTS,
+  isClaudeUsageAtLimit,
+} from './utils';
+
+// Import default values from modular defaults files
+import { defaultBackgroundSettings, defaultTerminalState, MAX_INIT_OUTPUT_LINES } from './defaults';
+
+// Import internal theme utils (not re-exported publicly)
+import {
+  getEffectiveFont,
+  saveThemeToStorage,
+  saveFontSansToStorage,
+  saveFontMonoToStorage,
+  persistEffectiveThemeForProject,
+} from './utils/theme-utils';
+
+const logger = createLogger('AppStore');
+const OPENCODE_BEDROCK_PROVIDER_ID = 'amazon-bedrock';
+const OPENCODE_BEDROCK_MODEL_PREFIX = `${OPENCODE_BEDROCK_PROVIDER_ID}/`;
+
+// Re-export types from @automaker/types for convenience
+export type {
+  ModelAlias,
+  PlanningMode,
+  ThinkingLevel,
+  ReasoningEffort,
+  ModelProvider,
+  ServerLogLevel,
+  FeatureTextFilePath,
+  FeatureImagePath,
+  ParsedTask,
+  PlanSpec,
+};
+
+// Re-export all types from ./types for backward compatibility
+export type {
+  ViewMode,
+  ThemeMode,
+  BoardViewMode,
+  ShortcutKey,
+  KeyboardShortcuts,
+  BackgroundSettings,
+  ApiKeys,
+  ImageAttachment,
+  TextFileAttachment,
+  ChatMessage,
+  ChatSession,
+  FeatureImage,
+  TerminalPanelContent,
+  TerminalTab,
+  TerminalState,
+  PersistedTerminalPanel,
+  PersistedTerminalTab,
+  PersistedTerminalState,
+  PersistedTerminalSettings,
+  ClaudeModel,
+  Feature,
+  FileTreeNode,
+  ProjectAnalysis,
+  InitScriptState,
+  AutoModeActivity,
+  AppState,
+  AppActions,
+  ClaudeUsage,
+  ClaudeUsageResponse,
+  CodexPlanType,
+  CodexRateLimitWindow,
+  CodexUsage,
+  CodexUsageResponse,
+  ZaiPlanType,
+  ZaiQuotaLimit,
+  ZaiUsage,
+  ZaiUsageResponse,
+  GeminiQuotaBucket,
+  GeminiTierQuota,
+  GeminiUsage,
+  GeminiUsageResponse,
+};
+
+// Re-export values from ./types for backward compatibility
+export { generateSplitId };
+
+// Re-export utilities from ./utils for backward compatibility
+export {
+  THEME_STORAGE_KEY,
+  getStoredTheme,
+  getStoredFontSans,
+  getStoredFontMono,
+  parseShortcut,
+  formatShortcut,
+  DEFAULT_KEYBOARD_SHORTCUTS,
+  isClaudeUsageAtLimit,
+};
+
+// Re-export defaults from ./defaults for backward compatibility
+export { defaultBackgroundSettings, defaultTerminalState, MAX_INIT_OUTPUT_LINES } from './defaults';
+
+// NOTE: Type definitions moved to ./types/ directory, utilities moved to ./utils/ directory
+// The following inline types have been replaced with imports above:
+// - ViewMode, ThemeMode, BoardViewMode (./types/ui-types.ts)
+// - ShortcutKey, KeyboardShortcuts (./types/ui-types.ts)
+// - ApiKeys (./types/settings-types.ts)
+// - ImageAttachment, TextFileAttachment, ChatMessage, ChatSession, FeatureImage (./types/chat-types.ts)
+// - Terminal types (./types/terminal-types.ts)
+// - ClaudeModel, Feature, FileTreeNode, ProjectAnalysis (./types/project-types.ts)
+// - InitScriptState, AutoModeActivity, AppState, AppActions (./types/state-types.ts)
+// - Claude/Codex/Zai/Gemini usage types (./types/usage-types.ts)
+// The following utility functions have been moved to ./utils/:
+// - Theme utilities: THEME_STORAGE_KEY, getStoredTheme, getStoredFontSans, getStoredFontMono, etc. (./utils/theme-utils.ts)
+// - Shortcut utilities: parseShortcut, formatShortcut, DEFAULT_KEYBOARD_SHORTCUTS (./utils/shortcut-utils.ts)
+// - Usage utilities: isClaudeUsageAtLimit (./utils/usage-utils.ts)
+// The following default values have been moved to ./defaults/:
+// - MAX_INIT_OUTPUT_LINES (./defaults/constants.ts)
+// - defaultBackgroundSettings (./defaults/background-settings.ts)
+// - defaultTerminalState (./defaults/terminal-defaults.ts)
+
+// Type definitions are imported from ./types/state-types.ts
+// AppActions interface is defined in ./types/state-types.ts
+
+/**
+ * Pre-populate sidebar/UI state from the UI cache at module load time.
+ * This runs synchronously before createRoot().render(), so the very first
+ * React render uses the correct sidebar width — eliminating the layout shift
+ * (wide sidebar → collapsed) that was visible when auth was pre-populated
+ * but sidebar state wasn't.
+ */
+function getInitialUIState(): {
+  sidebarOpen: boolean;
+  sidebarStyle: 'unified' | 'discord';
+  collapsedNavSections: Record<string, boolean>;
+} {
+  try {
+    const raw = localStorage.getItem('automaker-ui-cache');
+    if (raw) {
+      const wrapper = JSON.parse(raw);
+      // zustand/persist wraps state under a "state" key
+      const cache = wrapper?.state;
+      if (cache) {
+        return {
+          sidebarOpen:
+            typeof cache.cachedSidebarOpen === 'boolean' ? cache.cachedSidebarOpen : true,
+          sidebarStyle: cache.cachedSidebarStyle === 'discord' ? 'discord' : 'unified',
+          collapsedNavSections: (() => {
+            const raw = cache.cachedCollapsedNavSections;
+            if (
+              raw &&
+              typeof raw === 'object' &&
+              !Array.isArray(raw) &&
+              Object.getOwnPropertyNames(raw).every((k) => typeof raw[k] === 'boolean')
+            ) {
+              return raw as Record<string, boolean>;
+            }
+            return {};
+          })(),
+        };
+      }
+    }
+  } catch {
+    // fall through to defaults
+  }
+  return { sidebarOpen: true, sidebarStyle: 'unified', collapsedNavSections: {} };
+}
+
+const cachedUI = getInitialUIState();
+
+const initialState: AppState = {
+  projects: [],
+  currentProject: null,
+  trashedProjects: [],
+  projectHistory: [],
+  projectHistoryIndex: -1,
+  currentView: 'welcome',
+  sidebarOpen: cachedUI.sidebarOpen,
+  sidebarStyle: cachedUI.sidebarStyle,
+  collapsedNavSections: cachedUI.collapsedNavSections,
+  mobileSidebarHidden: false,
+  lastSelectedSessionByProject: {},
+  agentModelBySession: {},
+  theme: getStoredTheme() || 'dark',
+  fontFamilySans: getStoredFontSans(),
+  fontFamilyMono: getStoredFontMono(),
+  features: [],
+  appSpec: '',
+  ipcConnected: false,
+  apiKeys: {
+    anthropic: '',
+    google: '',
+    openai: '',
+    zai: '',
+  },
+  chatSessions: [],
+  currentChatSession: null,
+  chatHistoryOpen: false,
+  autoModeByWorktree: {},
+  autoModeActivityLog: [],
+  recentlyCompletedFeatures: new Set<string>(),
+  maxConcurrency: DEFAULT_MAX_CONCURRENCY,
+  boardViewMode: 'kanban',
+  defaultSkipTests: true,
+  enableDependencyBlocking: true,
+  skipVerificationInAutoMode: false,
+  enableAiCommitMessages: true,
+  mergePostAction: null,
+  planUseSelectedWorktreeBranch: true,
+  addFeatureUseSelectedWorktreeBranch: false,
+  useWorktrees: true,
+  currentWorktreeByProject: {},
+  worktreesByProject: {},
+  keyboardShortcuts: DEFAULT_KEYBOARD_SHORTCUTS,
+  muteDoneSound: false,
+  disableSplashScreen: false,
+  defaultSortNewestCardOnTop: false,
+  serverLogLevel: 'info',
+  enableRequestLogging: true,
+  showQueryDevtools: true,
+  enhancementModel: 'claude-sonnet',
+  validationModel: 'claude-opus',
+  phaseModels: DEFAULT_PHASE_MODELS,
+  favoriteModels: [],
+  enabledCursorModels: getAllCursorModelIds(),
+  cursorDefaultModel: 'cursor-auto',
+  enabledCodexModels: getAllCodexModelIds(),
+  codexDefaultModel: 'codex-gpt-5.2-codex',
+  codexAutoLoadAgents: false,
+  codexSandboxMode: 'workspace-write',
+  codexApprovalPolicy: 'on-request',
+  codexEnableWebSearch: false,
+  codexEnableImages: false,
+  codexAdditionalDirs: [],
+  codexThreadId: undefined,
+  enabledOpencodeModels: getAllOpencodeModelIds(),
+  opencodeDefaultModel: DEFAULT_OPENCODE_MODEL,
+  dynamicOpencodeModels: [],
+  enabledDynamicModelIds: [],
+  knownDynamicModelIds: [],
+  cachedOpencodeProviders: [],
+  opencodeModelsLoading: false,
+  opencodeModelsError: null,
+  opencodeModelsLastFetched: null,
+  opencodeModelsLastFailedAt: null,
+  enabledGeminiModels: getAllGeminiModelIds(),
+  geminiDefaultModel: DEFAULT_GEMINI_MODEL,
+  enabledCopilotModels: getAllCopilotModelIds(),
+  copilotDefaultModel: DEFAULT_COPILOT_MODEL,
+  disabledProviders: [],
+  autoLoadClaudeMd: false,
+  useClaudeCodeSystemPrompt: true,
+  skipSandboxWarning: false,
+  mcpServers: [],
+  defaultEditorCommand: null,
+  editorFontSize: 13,
+  editorFontFamily: 'default',
+  editorAutoSave: false,
+  editorAutoSaveDelay: 1000,
+  defaultTerminalId: null,
+  enableSkills: true,
+  skillsSources: ['user', 'project'] as Array<'user' | 'project'>,
+  enableSubagents: true,
+  subagentsSources: ['user', 'project'] as Array<'user' | 'project'>,
+  promptCustomization: {},
+  eventHooks: [],
+  ntfyEndpoints: [],
+  featureTemplates: DEFAULT_GLOBAL_SETTINGS.featureTemplates ?? [],
+  claudeCompatibleProviders: [],
+  claudeApiProfiles: [],
+  activeClaudeApiProfileId: null,
+  projectAnalysis: null,
+  isAnalyzing: false,
+  boardBackgroundByProject: {},
+  previewTheme: null,
+  terminalState: defaultTerminalState,
+  terminalLayoutByProject: {},
+  specCreatingForProject: null,
+  defaultPlanningMode: 'skip' as PlanningMode,
+  defaultRequirePlanApproval: false,
+  defaultFeatureModel: DEFAULT_GLOBAL_SETTINGS.defaultFeatureModel,
+  defaultThinkingLevel: DEFAULT_GLOBAL_SETTINGS.defaultThinkingLevel ?? 'adaptive',
+  defaultReasoningEffort: DEFAULT_GLOBAL_SETTINGS.defaultReasoningEffort ?? 'none',
+  defaultMaxTurns: DEFAULT_GLOBAL_SETTINGS.defaultMaxTurns ?? 10000,
+  pendingPlanApproval: null,
+  claudeRefreshInterval: 60,
+  claudeUsage: null,
+  claudeUsageLastUpdated: null,
+  codexUsage: null,
+  codexUsageLastUpdated: null,
+  zaiUsage: null,
+  zaiUsageLastUpdated: null,
+  geminiUsage: null,
+  geminiUsageLastUpdated: null,
+  codexModels: [],
+  codexModelsLoading: false,
+  codexModelsError: null,
+  codexModelsLastFetched: null,
+  codexModelsLastFailedAt: null,
+  pipelineConfigByProject: {},
+  worktreePanelVisibleByProject: {},
+  showInitScriptIndicatorByProject: {},
+  defaultDeleteBranchByProject: {},
+  autoDismissInitScriptIndicatorByProject: {},
+  useWorktreesByProject: {},
+  worktreeCopyFilesByProject: {},
+  pinnedWorktreesCountByProject: {},
+  pinnedWorktreeBranchesByProject: {},
+  worktreeDropdownThresholdByProject: {},
+  alwaysUseWorktreeDropdownByProject: {},
+  worktreePanelCollapsed: false,
+  lastProjectDir: '',
+  recentFolders: [],
+  initScriptState: {},
+};
+
+export const useAppStore = create<AppState & AppActions>()((set, get) => ({
+  ...initialState,
+
+  // Project actions
+  setProjects: (projects) => set({ projects }),
+
+  addProject: (project) => {
+    const projects = get().projects;
+    const existing = projects.findIndex((p) => p.path === project.path);
+    if (existing >= 0) {
+      const updated = [...projects];
+      updated[existing] = project;
+      set({ projects: updated });
+    } else {
+      set({ projects: [...projects, project] });
+    }
+  },
+
+  removeProject: (projectId: string) => {
+    set((state) => ({
+      projects: state.projects.filter((p) => p.id !== projectId),
+      currentProject: state.currentProject?.id === projectId ? null : state.currentProject,
+    }));
+
+    // Persist to storage
+    saveProjects(get().projects);
+  },
+
+  moveProjectToTrash: (projectId: string) => {
+    const project = get().projects.find((p) => p.id === projectId);
+    if (!project) return;
+
+    const trashedProject: TrashedProject = {
+      ...project,
+      trashedAt: new Date().toISOString(),
+    };
+
+    set((state) => ({
+      projects: state.projects.filter((p) => p.id !== projectId),
+      trashedProjects: [...state.trashedProjects, trashedProject],
+      currentProject: state.currentProject?.id === projectId ? null : state.currentProject,
+    }));
+
+    // Persist to storage
+    saveProjects(get().projects);
+    saveTrashedProjects(get().trashedProjects);
+  },
+
+  restoreTrashedProject: (projectId: string) => {
+    const trashedProject = get().trashedProjects.find((p) => p.id === projectId);
+    if (!trashedProject) return;
+
+    // Remove trashedAt from the project
+    const { trashedAt, ...restoredProject } = trashedProject;
+    void trashedAt; // Explicitly ignore trashedAt to satisfy linter
+
+    set((state) => ({
+      projects: [...state.projects, restoredProject as Project],
+      trashedProjects: state.trashedProjects.filter((p) => p.id !== projectId),
+    }));
+
+    // Persist to storage
+    saveProjects(get().projects);
+    saveTrashedProjects(get().trashedProjects);
+  },
+
+  deleteTrashedProject: (projectId: string) => {
+    set((state) => ({
+      trashedProjects: state.trashedProjects.filter((p) => p.id !== projectId),
+    }));
+
+    // Persist to storage
+    saveTrashedProjects(get().trashedProjects);
+  },
+
+  emptyTrash: () => {
+    set({ trashedProjects: [] });
+
+    // Persist to storage
+    saveTrashedProjects([]);
+  },
+
+  setCurrentProject: (project) => {
+    const currentId = get().currentProject?.id;
+    const newId = project?.id;
+
+    // If we're switching to a different project, add the new one to history
+    if (newId && newId !== currentId) {
+      set((state) => {
+        // Remove the new project from history if it exists
+        const filteredHistory = state.projectHistory.filter((id) => id !== newId);
+        // Add new project at the front (most recent)
+        const newHistory = [newId, ...filteredHistory];
+        // Limit history size to prevent unbounded growth
+        const MAX_HISTORY = 50;
+
+        // Persist effective theme for the new project to localStorage
+        persistEffectiveThemeForProject(project, state.theme);
+
+        return {
+          currentProject: project,
+          projectHistory: newHistory.slice(0, MAX_HISTORY),
+          projectHistoryIndex: 0, // Reset index to start of history
+        };
+      });
+    } else {
+      // Same project or null - just update without affecting history
+      set({ currentProject: project });
+
+      // Still persist theme for project changes
+      if (project) {
+        persistEffectiveThemeForProject(project, get().theme);
+      }
+    }
+  },
+
+  upsertAndSetCurrentProject: (path: string, name: string, theme?: ThemeMode) => {
+    const existingProject = get().projects.find((p) => p.path === path);
+    if (existingProject) {
+      get().setCurrentProject(existingProject);
+      return existingProject;
+    }
+
+    // Create new project
+    const newProject: Project = {
+      id: crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2),
+      name,
+      path,
+      isFavorite: false, // New projects start as non-favorites
+      ...(theme ? { theme } : {}),
+    };
+
+    // Add and set as current
+    get().addProject(newProject);
+    get().setCurrentProject(newProject);
+
+    // Persist to storage (small delay to ensure state is updated)
+    setTimeout(() => {
+      saveProjects(get().projects);
+    }, 0);
+
+    return newProject;
+  },
+
+  reorderProjects: (oldIndex: number, newIndex: number) => {
+    set((state) => {
+      const projects = [...state.projects];
+      const [removed] = projects.splice(oldIndex, 1);
+      projects.splice(newIndex, 0, removed);
+      return { projects };
+    });
+  },
+
+  cyclePrevProject: () => {
+    set((state) => {
+      const { projectHistory, projectHistoryIndex, projects } = state;
+      if (projectHistory.length === 0) return state;
+
+      // Move back in history (to older project)
+      const newIndex = Math.min(projectHistoryIndex + 1, projectHistory.length - 1);
+      if (newIndex === projectHistoryIndex) return state; // Already at oldest
+
+      const projectId = projectHistory[newIndex];
+      const project = projects.find((p) => p.id === projectId);
+
+      if (!project) {
+        // Project no longer exists, remove from history and try again
+        const filteredHistory = projectHistory.filter((id) => id !== projectId);
+        return { projectHistory: filteredHistory, projectHistoryIndex: state.projectHistoryIndex };
+      }
+
+      // Persist effective theme for the cycled-to project
+      persistEffectiveThemeForProject(project, state.theme);
+
+      return {
+        currentProject: project,
+        projectHistoryIndex: newIndex,
+      };
+    });
+  },
+
+  cycleNextProject: () => {
+    set((state) => {
+      const { projectHistory, projectHistoryIndex, projects } = state;
+      if (projectHistory.length === 0 || projectHistoryIndex === 0) return state; // Already at most recent
+
+      // Move forward in history (to newer project)
+      const newIndex = Math.max(projectHistoryIndex - 1, 0);
+      const projectId = projectHistory[newIndex];
+      const project = projects.find((p) => p.id === projectId);
+
+      if (!project) {
+        // Project no longer exists, remove from history and try again
+        const filteredHistory = projectHistory.filter((id) => id !== projectId);
+        return { projectHistory: filteredHistory, projectHistoryIndex: state.projectHistoryIndex };
+      }
+
+      // Persist effective theme for the cycled-to project
+      persistEffectiveThemeForProject(project, state.theme);
+
+      return {
+        currentProject: project,
+        projectHistoryIndex: newIndex,
+      };
+    });
+  },
+
+  clearProjectHistory: () => {
+    const currentId = get().currentProject?.id;
+    set({
+      projectHistory: currentId ? [currentId] : [],
+      projectHistoryIndex: 0,
+    });
+  },
+
+  toggleProjectFavorite: (projectId: string) => {
+    set((state) => ({
+      projects: state.projects.map((p) =>
+        p.id === projectId ? { ...p, isFavorite: !p.isFavorite } : p
+      ),
+    }));
+
+    // Persist to storage
+    saveProjects(get().projects);
+  },
+
+  setProjectIcon: (projectId: string, icon: string | null) => {
+    set((state) => ({
+      projects: state.projects.map((p) =>
+        p.id === projectId ? { ...p, icon: icon ?? undefined } : p
+      ),
+      // Also update currentProject if it's the one being modified
+      currentProject:
+        state.currentProject?.id === projectId
+          ? { ...state.currentProject, icon: icon ?? undefined }
+          : state.currentProject,
+    }));
+
+    // Persist to storage
+    saveProjects(get().projects);
+  },
+
+  setProjectCustomIcon: (projectId: string, customIconPath: string | null) => {
+    set((state) => ({
+      projects: state.projects.map((p) =>
+        p.id === projectId ? { ...p, customIconPath: customIconPath ?? undefined } : p
+      ),
+      // Also update currentProject if it's the one being modified
+      currentProject:
+        state.currentProject?.id === projectId
+          ? { ...state.currentProject, customIconPath: customIconPath ?? undefined }
+          : state.currentProject,
+    }));
+
+    // Persist to storage
+    saveProjects(get().projects);
+  },
+
+  setProjectName: (projectId: string, name: string) => {
+    set((state) => ({
+      projects: state.projects.map((p) => (p.id === projectId ? { ...p, name } : p)),
+      // Also update currentProject if it's the one being renamed
+      currentProject:
+        state.currentProject?.id === projectId
+          ? { ...state.currentProject, name }
+          : state.currentProject,
+    }));
+
+    // Persist to storage
+    saveProjects(get().projects);
+  },
+
+  // View actions
+  setCurrentView: (view) => set({ currentView: view }),
+  toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
+  setSidebarOpen: (open) => set({ sidebarOpen: open }),
+  setSidebarStyle: (style) => set({ sidebarStyle: style }),
+  setCollapsedNavSections: (sections) => set({ collapsedNavSections: sections }),
+  toggleNavSection: (sectionLabel) =>
+    set((state) => ({
+      collapsedNavSections: {
+        ...state.collapsedNavSections,
+        [sectionLabel]: !state.collapsedNavSections[sectionLabel],
+      },
+    })),
+  toggleMobileSidebarHidden: () =>
+    set((state) => ({ mobileSidebarHidden: !state.mobileSidebarHidden })),
+  setMobileSidebarHidden: (hidden) => set({ mobileSidebarHidden: hidden }),
+
+  // Theme actions
+  setTheme: (theme) => {
+    set({ theme });
+    saveThemeToStorage(theme);
+  },
+  setProjectTheme: (projectId: string, theme: ThemeMode | null) => {
+    set((state) => ({
+      projects: state.projects.map((p) =>
+        p.id === projectId ? { ...p, theme: theme ?? undefined } : p
+      ),
+      // Also update currentProject if it's the one being changed
+      currentProject:
+        state.currentProject?.id === projectId
+          ? { ...state.currentProject, theme: theme ?? undefined }
+          : state.currentProject,
+    }));
+
+    // Update localStorage with new effective theme if this is the current project
+    const currentProject = get().currentProject;
+    if (currentProject?.id === projectId) {
+      persistEffectiveThemeForProject(
+        { ...currentProject, theme: theme ?? undefined },
+        get().theme
+      );
+    }
+
+    // Persist to storage
+    saveProjects(get().projects);
+  },
+  getEffectiveTheme: () => {
+    const state = get();
+    // If there's a preview theme, use it (for hover preview)
+    if (state.previewTheme) return state.previewTheme;
+    // Otherwise, use project theme if set, or fall back to global theme
+    const projectTheme = state.currentProject?.theme as ThemeMode | undefined;
+    return projectTheme ?? state.theme;
+  },
+  setPreviewTheme: (theme) => set({ previewTheme: theme }),
+
+  // Font actions - triggers lazy font loading for on-demand fonts
+  setFontSans: (fontFamily) => {
+    if (fontFamily) loadFont(fontFamily);
+    set({ fontFamilySans: fontFamily });
+    saveFontSansToStorage(fontFamily);
+  },
+  setFontMono: (fontFamily) => {
+    if (fontFamily) loadFont(fontFamily);
+    set({ fontFamilyMono: fontFamily });
+    saveFontMonoToStorage(fontFamily);
+  },
+  setProjectFontSans: (projectId: string, fontFamily: string | null) => {
+    set((state) => ({
+      projects: state.projects.map((p) =>
+        p.id === projectId ? { ...p, fontSans: fontFamily ?? undefined } : p
+      ),
+      // Also update currentProject if it's the one being changed
+      currentProject:
+        state.currentProject?.id === projectId
+          ? { ...state.currentProject, fontSans: fontFamily ?? undefined }
+          : state.currentProject,
+    }));
+
+    // Persist to storage
+    saveProjects(get().projects);
+  },
+  setProjectFontMono: (projectId: string, fontFamily: string | null) => {
+    set((state) => ({
+      projects: state.projects.map((p) =>
+        p.id === projectId ? { ...p, fontMono: fontFamily ?? undefined } : p
+      ),
+      // Also update currentProject if it's the one being changed
+      currentProject:
+        state.currentProject?.id === projectId
+          ? { ...state.currentProject, fontMono: fontFamily ?? undefined }
+          : state.currentProject,
+    }));
+
+    // Persist to storage
+    saveProjects(get().projects);
+  },
+  getEffectiveFontSans: () => {
+    const state = get();
+    const projectFont = state.currentProject?.fontFamilySans;
+    return getEffectiveFont(projectFont, state.fontFamilySans, UI_SANS_FONT_OPTIONS);
+  },
+  getEffectiveFontMono: () => {
+    const state = get();
+    const projectFont = state.currentProject?.fontFamilyMono;
+    return getEffectiveFont(projectFont, state.fontFamilyMono, UI_MONO_FONT_OPTIONS);
+  },
+
+  // Claude API Profile actions (per-project override)
+  setProjectClaudeApiProfile: (projectId: string, profileId: string | null | undefined) => {
+    set((state) => ({
+      projects: state.projects.map((p) =>
+        p.id === projectId ? { ...p, claudeApiProfileId: profileId } : p
+      ),
+      // Also update currentProject if it's the one being changed
+      currentProject:
+        state.currentProject?.id === projectId
+          ? { ...state.currentProject, claudeApiProfileId: profileId }
+          : state.currentProject,
+    }));
+
+    // Persist to storage
+    saveProjects(get().projects);
+  },
+
+  // Project Phase Model Overrides
+  setProjectPhaseModelOverride: (
+    projectId: string,
+    phase: PhaseModelKey,
+    entry: PhaseModelEntry | null
+  ) => {
+    set((state) => {
+      const updatePhaseModels = (project: Project): Project => {
+        const currentOverrides = project.phaseModelOverrides || {};
+        const newOverrides = { ...currentOverrides };
+        if (entry === null) {
+          delete newOverrides[phase];
+        } else {
+          newOverrides[phase] = entry;
+        }
+        return {
+          ...project,
+          phaseModelOverrides: Object.keys(newOverrides).length > 0 ? newOverrides : undefined,
+        };
+      };
+
+      return {
+        projects: state.projects.map((p) => (p.id === projectId ? updatePhaseModels(p) : p)),
+        currentProject:
+          state.currentProject?.id === projectId
+            ? updatePhaseModels(state.currentProject)
+            : state.currentProject,
+      };
+    });
+
+    // Persist to storage
+    saveProjects(get().projects);
+  },
+
+  clearAllProjectPhaseModelOverrides: (projectId: string) => {
+    set((state) => {
+      const clearOverrides = (project: Project): Project => ({
+        ...project,
+        phaseModelOverrides: undefined,
+      });
+
+      return {
+        projects: state.projects.map((p) => (p.id === projectId ? clearOverrides(p) : p)),
+        currentProject:
+          state.currentProject?.id === projectId
+            ? clearOverrides(state.currentProject)
+            : state.currentProject,
+      };
+    });
+
+    // Persist to storage
+    saveProjects(get().projects);
+  },
+
+  // Project Default Feature Model Override
+  setProjectDefaultFeatureModel: (projectId: string, entry: PhaseModelEntry | null) => {
+    set((state) => {
+      const updateDefaultFeatureModel = (project: Project): Project => ({
+        ...project,
+        defaultFeatureModel: entry ?? undefined,
+      });
+
+      return {
+        projects: state.projects.map((p) =>
+          p.id === projectId ? updateDefaultFeatureModel(p) : p
+        ),
+        currentProject:
+          state.currentProject?.id === projectId
+            ? updateDefaultFeatureModel(state.currentProject)
+            : state.currentProject,
+      };
+    });
+
+    // Persist to storage
+    saveProjects(get().projects);
+  },
+
+  // Feature actions
+  setFeatures: (features) => set({ features }),
+  updateFeature: (id, updates) =>
+    set((state) => ({
+      features: state.features.map((f) => (f.id === id ? { ...f, ...updates } : f)),
+    })),
+  batchUpdateFeatures: (ids, updates) => {
+    if (ids.length === 0) return;
+    const idSet = new Set(ids);
+    set((state) => ({
+      features: state.features.map((f) => (idSet.has(f.id) ? { ...f, ...updates } : f)),
+    }));
+  },
+  addFeature: (feature) => {
+    const id = feature.id ?? `feature-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const newFeature = { ...feature, id } as Feature;
+    set((state) => ({ features: [...state.features, newFeature] }));
+    return newFeature;
+  },
+  removeFeature: (id) => set((state) => ({ features: state.features.filter((f) => f.id !== id) })),
+  moveFeature: (id, newStatus) =>
+    set((state) => ({
+      features: state.features.map((f) => (f.id === id ? { ...f, status: newStatus } : f)),
+    })),
+
+  // App spec actions
+  setAppSpec: (spec) => set({ appSpec: spec }),
+
+  // IPC actions
+  setIpcConnected: (connected) => set({ ipcConnected: connected }),
+
+  // API Keys actions
+  setApiKeys: (keys) => set((state) => ({ apiKeys: { ...state.apiKeys, ...keys } })),
+
+  // Chat Session actions
+  createChatSession: (title) => {
+    const currentProject = get().currentProject;
+    const newSession: ChatSession = {
+      id: `session-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+      title: title || 'New Chat',
+      projectId: currentProject?.id || '',
+      messages: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+      archived: false,
+    };
+    set((state) => ({
+      chatSessions: [...state.chatSessions, newSession],
+      currentChatSession: newSession,
+    }));
+    return newSession;
+  },
+  updateChatSession: (sessionId, updates) =>
+    set((state) => ({
+      chatSessions: state.chatSessions.map((s) =>
+        s.id === sessionId ? { ...s, ...updates, updatedAt: new Date() } : s
+      ),
+      currentChatSession:
+        state.currentChatSession?.id === sessionId
+          ? { ...state.currentChatSession, ...updates, updatedAt: new Date() }
+          : state.currentChatSession,
+    })),
+  addMessageToSession: (sessionId, message) =>
+    set((state) => ({
+      chatSessions: state.chatSessions.map((s) =>
+        s.id === sessionId ? { ...s, messages: [...s.messages, message], updatedAt: new Date() } : s
+      ),
+      currentChatSession:
+        state.currentChatSession?.id === sessionId
+          ? {
+              ...state.currentChatSession,
+              messages: [...state.currentChatSession.messages, message],
+              updatedAt: new Date(),
+            }
+          : state.currentChatSession,
+    })),
+  setCurrentChatSession: (session) => set({ currentChatSession: session }),
+  archiveChatSession: (sessionId) =>
+    set((state) => ({
+      chatSessions: state.chatSessions.map((s) =>
+        s.id === sessionId ? { ...s, archived: true } : s
+      ),
+    })),
+  unarchiveChatSession: (sessionId) =>
+    set((state) => ({
+      chatSessions: state.chatSessions.map((s) =>
+        s.id === sessionId ? { ...s, archived: false } : s
+      ),
+    })),
+  deleteChatSession: (sessionId) =>
+    set((state) => {
+      const { [sessionId]: _removed, ...remainingAgentModels } = state.agentModelBySession;
+      return {
+        chatSessions: state.chatSessions.filter((s) => s.id !== sessionId),
+        currentChatSession:
+          state.currentChatSession?.id === sessionId ? null : state.currentChatSession,
+        agentModelBySession: remainingAgentModels,
+      };
+    }),
+  setChatHistoryOpen: (open) => set({ chatHistoryOpen: open }),
+  toggleChatHistory: () => set((state) => ({ chatHistoryOpen: !state.chatHistoryOpen })),
+
+  // Auto Mode actions (per-worktree)
+  getWorktreeKey: (projectId: string, branchName: string | null) =>
+    `${projectId}::${branchName ?? '__main__'}`,
+
+  setAutoModeRunning: (
+    projectId: string,
+    branchName: string | null,
+    running: boolean,
+    maxConcurrency?: number,
+    runningTasks?: string[]
+  ) => {
+    const key = get().getWorktreeKey(projectId, branchName);
+    set((state) => ({
+      autoModeByWorktree: {
+        ...state.autoModeByWorktree,
+        [key]: {
+          isRunning: running,
+          runningTasks: runningTasks ?? state.autoModeByWorktree[key]?.runningTasks ?? [],
+          branchName,
+          maxConcurrency: maxConcurrency ?? state.autoModeByWorktree[key]?.maxConcurrency,
+        },
+      },
+    }));
+  },
+
+  addRunningTask: (projectId: string, branchName: string | null, taskId: string) => {
+    const key = get().getWorktreeKey(projectId, branchName);
+    set((state) => {
+      const current = state.autoModeByWorktree[key] || {
+        isRunning: false,
+        runningTasks: [],
+        branchName,
+      };
+      // Prevent duplicate entries - the same feature can trigger multiple
+      // auto_mode_feature_start events (e.g., from execution-service and
+      // pipeline-orchestrator), so we must guard against adding the same
+      // taskId more than once.
+      if (current.runningTasks.includes(taskId)) {
+        return state;
+      }
+      return {
+        autoModeByWorktree: {
+          ...state.autoModeByWorktree,
+          [key]: {
+            ...current,
+            runningTasks: [...current.runningTasks, taskId],
+          },
+        },
+      };
+    });
+  },
+
+  removeRunningTask: (projectId: string, branchName: string | null, taskId: string) => {
+    const key = get().getWorktreeKey(projectId, branchName);
+    set((state) => {
+      const current = state.autoModeByWorktree[key];
+      if (!current) return state;
+      // Idempotent: skip if task is not in the list to avoid creating new
+      // object references that trigger unnecessary re-renders.
+      if (!current.runningTasks.includes(taskId)) return state;
+      return {
+        autoModeByWorktree: {
+          ...state.autoModeByWorktree,
+          [key]: {
+            ...current,
+            runningTasks: current.runningTasks.filter((id) => id !== taskId),
+          },
+        },
+      };
+    });
+  },
+
+  clearRunningTasks: (projectId: string, branchName: string | null) => {
+    const key = get().getWorktreeKey(projectId, branchName);
+    set((state) => {
+      const current = state.autoModeByWorktree[key];
+      if (!current) return state;
+      return {
+        autoModeByWorktree: {
+          ...state.autoModeByWorktree,
+          [key]: {
+            ...current,
+            runningTasks: [],
+          },
+        },
+      };
+    });
+  },
+
+  getAutoModeState: (projectId: string, branchName: string | null) => {
+    const key = get().getWorktreeKey(projectId, branchName);
+    const worktreeState = get().autoModeByWorktree[key];
+    return (
+      worktreeState || {
+        isRunning: false,
+        runningTasks: [],
+        branchName,
+      }
+    );
+  },
+
+  addAutoModeActivity: (activity) =>
+    set((state) => ({
+      autoModeActivityLog: [
+        { ...activity, id: Math.random().toString(36).slice(2), timestamp: new Date() },
+        ...state.autoModeActivityLog.slice(0, 99), // Keep last 100 activities
+      ],
+    })),
+
+  clearAutoModeActivity: () => set({ autoModeActivityLog: [] }),
+
+  addRecentlyCompletedFeature: (featureId: string) => {
+    set((state) => {
+      // Idempotent: skip if already tracked to avoid creating a new Set reference
+      // that triggers unnecessary re-renders in useBoardColumnFeatures.
+      if (state.recentlyCompletedFeatures.has(featureId)) return state;
+      const newSet = new Set(state.recentlyCompletedFeatures);
+      newSet.add(featureId);
+      return { recentlyCompletedFeatures: newSet };
+    });
+  },
+
+  clearRecentlyCompletedFeatures: () => {
+    // Idempotent: skip if already empty to avoid creating a new Set reference.
+    if (get().recentlyCompletedFeatures.size === 0) return;
+    set({ recentlyCompletedFeatures: new Set() });
+  },
+
+  setMaxConcurrency: (max) => set({ maxConcurrency: max }),
+
+  getMaxConcurrencyForWorktree: (projectId: string, branchName: string | null) => {
+    const key = get().getWorktreeKey(projectId, branchName);
+    const worktreeState = get().autoModeByWorktree[key];
+    return worktreeState?.maxConcurrency ?? get().maxConcurrency;
+  },
+
+  setMaxConcurrencyForWorktree: (
+    projectId: string,
+    branchName: string | null,
+    maxConcurrency: number
+  ) => {
+    const key = get().getWorktreeKey(projectId, branchName);
+    set((state) => ({
+      autoModeByWorktree: {
+        ...state.autoModeByWorktree,
+        [key]: {
+          ...state.autoModeByWorktree[key],
+          isRunning: state.autoModeByWorktree[key]?.isRunning ?? false,
+          runningTasks: state.autoModeByWorktree[key]?.runningTasks ?? [],
+          branchName,
+          maxConcurrency,
+        },
+      },
+    }));
+  },
+
+  // Kanban Card Settings actions
+  setBoardViewMode: (mode) => set({ boardViewMode: mode }),
+
+  // Feature Default Settings actions
+  setDefaultSkipTests: (skip) => set({ defaultSkipTests: skip }),
+  setEnableDependencyBlocking: (enabled) => set({ enableDependencyBlocking: enabled }),
+  setSkipVerificationInAutoMode: async (enabled) => {
+    set({ skipVerificationInAutoMode: enabled });
+    // Sync to server
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ skipVerificationInAutoMode: enabled });
+    } catch (error) {
+      logger.error('Failed to sync skipVerificationInAutoMode:', error);
+    }
+  },
+  setEnableAiCommitMessages: async (enabled) => {
+    set({ enableAiCommitMessages: enabled });
+    // Sync to server
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ enableAiCommitMessages: enabled });
+    } catch (error) {
+      logger.error('Failed to sync enableAiCommitMessages:', error);
+    }
+  },
+  setMergePostAction: async (action) => {
+    set({ mergePostAction: action });
+    // Sync to server
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ mergePostAction: action });
+    } catch (error) {
+      logger.error('Failed to sync mergePostAction:', error);
+    }
+  },
+  setPlanUseSelectedWorktreeBranch: async (enabled) => {
+    set({ planUseSelectedWorktreeBranch: enabled });
+    // Sync to server
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ planUseSelectedWorktreeBranch: enabled });
+    } catch (error) {
+      logger.error('Failed to sync planUseSelectedWorktreeBranch:', error);
+    }
+  },
+  setAddFeatureUseSelectedWorktreeBranch: async (enabled) => {
+    set({ addFeatureUseSelectedWorktreeBranch: enabled });
+    // Sync to server
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ addFeatureUseSelectedWorktreeBranch: enabled });
+    } catch (error) {
+      logger.error('Failed to sync addFeatureUseSelectedWorktreeBranch:', error);
+    }
+  },
+
+  // Worktree Settings actions
+  setUseWorktrees: (enabled) => set({ useWorktrees: enabled }),
+  setCurrentWorktree: (projectPath, worktreePath, branch) =>
+    set((state) => ({
+      currentWorktreeByProject: {
+        ...state.currentWorktreeByProject,
+        [projectPath]: { path: worktreePath, branch },
+      },
+    })),
+  setWorktrees: (projectPath, worktrees) =>
+    set((state) => ({
+      worktreesByProject: {
+        ...state.worktreesByProject,
+        [projectPath]: worktrees,
+      },
+    })),
+  getCurrentWorktree: (projectPath) => get().currentWorktreeByProject[projectPath] ?? null,
+  getWorktrees: (projectPath) => get().worktreesByProject[projectPath] ?? [],
+  isPrimaryWorktreeBranch: (projectPath: string, branchName: string) => {
+    const worktrees = get().worktreesByProject[projectPath] ?? [];
+    const mainWorktree = worktrees.find((w) => w.isMain);
+    return mainWorktree?.branch === branchName;
+  },
+  getPrimaryWorktreeBranch: (projectPath: string) => {
+    const worktrees = get().worktreesByProject[projectPath] ?? [];
+    const mainWorktree = worktrees.find((w) => w.isMain);
+    return mainWorktree?.branch ?? null;
+  },
+
+  // Keyboard Shortcuts actions
+  setKeyboardShortcut: (key, value) =>
+    set((state) => ({
+      keyboardShortcuts: { ...state.keyboardShortcuts, [key]: value },
+    })),
+  setKeyboardShortcuts: (shortcuts) =>
+    set((state) => ({
+      keyboardShortcuts: { ...state.keyboardShortcuts, ...shortcuts },
+    })),
+  resetKeyboardShortcuts: () => set({ keyboardShortcuts: DEFAULT_KEYBOARD_SHORTCUTS }),
+
+  // Audio Settings actions
+  setMuteDoneSound: (muted) => set({ muteDoneSound: muted }),
+
+  // Splash Screen actions
+  setDisableSplashScreen: (disabled) => set({ disableSplashScreen: disabled }),
+
+  // Board Card Sorting (global default) actions
+  setDefaultSortNewestCardOnTop: (enabled) => set({ defaultSortNewestCardOnTop: enabled }),
+
+  // Server Log Level actions
+  setServerLogLevel: (level) => set({ serverLogLevel: level }),
+  setEnableRequestLogging: (enabled) => set({ enableRequestLogging: enabled }),
+
+  // Developer Tools actions
+  setShowQueryDevtools: (show) => set({ showQueryDevtools: show }),
+
+  // Enhancement Model actions
+  setEnhancementModel: (model) => set({ enhancementModel: model }),
+
+  // Validation Model actions
+  setValidationModel: (model) => set({ validationModel: model }),
+
+  // Phase Model actions
+  setPhaseModel: async (phase, entry) => {
+    set((state) => ({
+      phaseModels: { ...state.phaseModels, [phase]: entry },
+    }));
+    // Sync to server
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ phaseModels: get().phaseModels });
+    } catch (error) {
+      logger.error('Failed to sync phase model:', error);
+    }
+  },
+  setPhaseModels: async (models) => {
+    set((state) => ({
+      phaseModels: { ...state.phaseModels, ...models },
+    }));
+    // Sync to server
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ phaseModels: get().phaseModels });
+    } catch (error) {
+      logger.error('Failed to sync phase models:', error);
+    }
+  },
+  resetPhaseModels: async () => {
+    set({ phaseModels: DEFAULT_PHASE_MODELS });
+    // Sync to server
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ phaseModels: DEFAULT_PHASE_MODELS });
+    } catch (error) {
+      logger.error('Failed to sync phase models reset:', error);
+    }
+  },
+  toggleFavoriteModel: (modelId) =>
+    set((state) => ({
+      favoriteModels: state.favoriteModels.includes(modelId)
+        ? state.favoriteModels.filter((id) => id !== modelId)
+        : [...state.favoriteModels, modelId],
+    })),
+
+  // Cursor CLI Settings actions
+  setEnabledCursorModels: (models) => set({ enabledCursorModels: models }),
+  setCursorDefaultModel: (model) => set({ cursorDefaultModel: model }),
+  toggleCursorModel: (model, enabled) =>
+    set((state) => ({
+      enabledCursorModels: enabled
+        ? [...state.enabledCursorModels, model]
+        : state.enabledCursorModels.filter((m) => m !== model),
+    })),
+
+  // Codex CLI Settings actions
+  setEnabledCodexModels: (models) => set({ enabledCodexModels: models }),
+  setCodexDefaultModel: (model) => set({ codexDefaultModel: model }),
+  toggleCodexModel: (model, enabled) =>
+    set((state) => ({
+      enabledCodexModels: enabled
+        ? [...state.enabledCodexModels, model]
+        : state.enabledCodexModels.filter((m) => m !== model),
+    })),
+  setCodexAutoLoadAgents: async (enabled) => {
+    set({ codexAutoLoadAgents: enabled });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ codexAutoLoadAgents: enabled });
+    } catch (error) {
+      logger.error('Failed to sync codexAutoLoadAgents:', error);
+    }
+  },
+  setCodexSandboxMode: async (mode) => {
+    set({ codexSandboxMode: mode });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ codexSandboxMode: mode });
+    } catch (error) {
+      logger.error('Failed to sync codexSandboxMode:', error);
+    }
+  },
+  setCodexApprovalPolicy: async (policy) => {
+    set({ codexApprovalPolicy: policy });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ codexApprovalPolicy: policy });
+    } catch (error) {
+      logger.error('Failed to sync codexApprovalPolicy:', error);
+    }
+  },
+  setCodexEnableWebSearch: async (enabled) => {
+    set({ codexEnableWebSearch: enabled });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ codexEnableWebSearch: enabled });
+    } catch (error) {
+      logger.error('Failed to sync codexEnableWebSearch:', error);
+    }
+  },
+  setCodexEnableImages: async (enabled) => {
+    set({ codexEnableImages: enabled });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ codexEnableImages: enabled });
+    } catch (error) {
+      logger.error('Failed to sync codexEnableImages:', error);
+    }
+  },
+
+  // OpenCode CLI Settings actions
+  setEnabledOpencodeModels: (models) => set({ enabledOpencodeModels: models }),
+  setOpencodeDefaultModel: async (model) => {
+    set({ opencodeDefaultModel: model });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ opencodeDefaultModel: model });
+    } catch (error) {
+      logger.error('Failed to sync opencodeDefaultModel:', error);
+    }
+  },
+  toggleOpencodeModel: async (model, enabled) => {
+    set((state) => ({
+      enabledOpencodeModels: enabled
+        ? [...new Set([...state.enabledOpencodeModels, model])]
+        : state.enabledOpencodeModels.filter((m) => m !== model),
+    }));
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ enabledOpencodeModels: get().enabledOpencodeModels });
+    } catch (error) {
+      logger.error('Failed to sync enabledOpencodeModels:', error);
+    }
+  },
+  setDynamicOpencodeModels: (models) => set({ dynamicOpencodeModels: models }),
+  setEnabledDynamicModelIds: async (ids) => {
+    const deduped = Array.from(new Set(ids));
+    set({ enabledDynamicModelIds: deduped });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ enabledDynamicModelIds: deduped });
+    } catch (error) {
+      logger.error('Failed to sync enabledDynamicModelIds:', error);
+    }
+  },
+  toggleDynamicModel: async (modelId, enabled) => {
+    set((state) => ({
+      enabledDynamicModelIds: enabled
+        ? [...new Set([...state.enabledDynamicModelIds, modelId])]
+        : state.enabledDynamicModelIds.filter((id) => id !== modelId),
+    }));
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ enabledDynamicModelIds: get().enabledDynamicModelIds });
+    } catch (error) {
+      logger.error('Failed to sync enabledDynamicModelIds:', error);
+    }
+  },
+  setCachedOpencodeProviders: (providers) => set({ cachedOpencodeProviders: providers }),
+
+  // Gemini CLI Settings actions
+  setEnabledGeminiModels: (models) => set({ enabledGeminiModels: models }),
+  setGeminiDefaultModel: (model) => set({ geminiDefaultModel: model }),
+  toggleGeminiModel: (model, enabled) =>
+    set((state) => ({
+      enabledGeminiModels: enabled
+        ? [...state.enabledGeminiModels, model]
+        : state.enabledGeminiModels.filter((m) => m !== model),
+    })),
+
+  // Copilot SDK Settings actions
+  setEnabledCopilotModels: (models) => set({ enabledCopilotModels: models }),
+  setCopilotDefaultModel: (model) => set({ copilotDefaultModel: model }),
+  toggleCopilotModel: (model, enabled) =>
+    set((state) => ({
+      enabledCopilotModels: enabled
+        ? [...state.enabledCopilotModels, model]
+        : state.enabledCopilotModels.filter((m) => m !== model),
+    })),
+
+  // Provider Visibility Settings actions
+  setDisabledProviders: (providers) => set({ disabledProviders: providers }),
+  toggleProviderDisabled: (provider, disabled) =>
+    set((state) => ({
+      disabledProviders: disabled
+        ? [...state.disabledProviders, provider]
+        : state.disabledProviders.filter((p) => p !== provider),
+    })),
+  isProviderDisabled: (provider) => get().disabledProviders.includes(provider),
+
+  // Claude Agent SDK Settings actions
+  setAutoLoadClaudeMd: async (enabled) => {
+    set({ autoLoadClaudeMd: enabled });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ autoLoadClaudeMd: enabled });
+    } catch (error) {
+      logger.error('Failed to sync autoLoadClaudeMd:', error);
+    }
+  },
+  setUseClaudeCodeSystemPrompt: async (enabled) => {
+    set({ useClaudeCodeSystemPrompt: enabled });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ useClaudeCodeSystemPrompt: enabled });
+    } catch (error) {
+      logger.error('Failed to sync useClaudeCodeSystemPrompt:', error);
+    }
+  },
+  setSkipSandboxWarning: async (skip) => {
+    set({ skipSandboxWarning: skip });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ skipSandboxWarning: skip });
+    } catch (error) {
+      logger.error('Failed to sync skipSandboxWarning:', error);
+    }
+  },
+
+  // Editor Configuration actions
+  setDefaultEditorCommand: (command) => set({ defaultEditorCommand: command }),
+
+  // File Editor Settings actions
+  setEditorFontSize: (size) => set({ editorFontSize: size }),
+  setEditorFontFamily: (fontFamily) => set({ editorFontFamily: fontFamily }),
+  setEditorAutoSave: (enabled) => set({ editorAutoSave: enabled }),
+  setEditorAutoSaveDelay: (delay) => set({ editorAutoSaveDelay: delay }),
+
+  // Terminal Configuration actions
+  setDefaultTerminalId: (terminalId) => set({ defaultTerminalId: terminalId }),
+
+  // Prompt Customization actions
+  setPromptCustomization: async (customization) => {
+    set({ promptCustomization: customization });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ promptCustomization: customization });
+    } catch (error) {
+      logger.error('Failed to sync prompt customization:', error);
+    }
+  },
+
+  // Event Hook actions
+  setEventHooks: async (hooks) => {
+    set({ eventHooks: hooks });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({
+        eventHooks: hooks,
+        // Signal the server that an empty array is intentional (not a wipe from stale state)
+        ...(hooks.length === 0 ? { __allowEmptyEventHooks: true } : {}),
+      });
+    } catch (error) {
+      logger.error('Failed to sync event hooks:', error);
+    }
+  },
+
+  // Ntfy Endpoint actions
+  setNtfyEndpoints: async (endpoints) => {
+    set({ ntfyEndpoints: endpoints });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({
+        ntfyEndpoints: endpoints,
+        // Signal the server that an empty array is intentional (not a wipe from stale state)
+        ...(endpoints.length === 0 ? { __allowEmptyNtfyEndpoints: true } : {}),
+      });
+    } catch (error) {
+      logger.error('Failed to sync ntfy endpoints:', error);
+    }
+  },
+
+  // Feature Template actions
+  setFeatureTemplates: async (templates) => {
+    set({ featureTemplates: templates });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ featureTemplates: templates });
+    } catch (error) {
+      logger.error('Failed to sync feature templates:', error);
+    }
+  },
+  addFeatureTemplate: async (template) => {
+    set((state) => ({
+      featureTemplates: [...state.featureTemplates, template],
+    }));
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ featureTemplates: get().featureTemplates });
+    } catch (error) {
+      logger.error('Failed to sync feature templates:', error);
+    }
+  },
+  updateFeatureTemplate: async (id, updates) => {
+    set((state) => ({
+      featureTemplates: state.featureTemplates.map((t) => (t.id === id ? { ...t, ...updates } : t)),
+    }));
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ featureTemplates: get().featureTemplates });
+    } catch (error) {
+      logger.error('Failed to sync feature templates:', error);
+    }
+  },
+  deleteFeatureTemplate: async (id) => {
+    set((state) => ({
+      featureTemplates: state.featureTemplates.filter((t) => t.id !== id),
+    }));
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ featureTemplates: get().featureTemplates });
+    } catch (error) {
+      logger.error('Failed to sync feature templates:', error);
+    }
+  },
+  reorderFeatureTemplates: async (templateIds) => {
+    set((state) => {
+      const templateMap = new Map(state.featureTemplates.map((t) => [t.id, t]));
+      const reordered: FeatureTemplate[] = [];
+      templateIds.forEach((id, index) => {
+        const template = templateMap.get(id);
+        if (template) {
+          reordered.push({ ...template, order: index });
+        }
+      });
+      return { featureTemplates: reordered };
+    });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ featureTemplates: get().featureTemplates });
+    } catch (error) {
+      logger.error('Failed to sync feature templates:', error);
+    }
+  },
+
+  // Claude-Compatible Provider actions (new system)
+  addClaudeCompatibleProvider: async (provider) => {
+    set((state) => ({
+      claudeCompatibleProviders: [...state.claudeCompatibleProviders, provider],
+    }));
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({
+        claudeCompatibleProviders: get().claudeCompatibleProviders,
+      });
+    } catch (error) {
+      logger.error('Failed to sync Claude-compatible providers:', error);
+    }
+  },
+  updateClaudeCompatibleProvider: async (id, updates) => {
+    set((state) => ({
+      claudeCompatibleProviders: state.claudeCompatibleProviders.map((p) =>
+        p.id === id ? { ...p, ...updates } : p
+      ),
+    }));
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({
+        claudeCompatibleProviders: get().claudeCompatibleProviders,
+      });
+    } catch (error) {
+      logger.error('Failed to sync Claude-compatible providers:', error);
+    }
+  },
+  deleteClaudeCompatibleProvider: async (id) => {
+    set((state) => ({
+      claudeCompatibleProviders: state.claudeCompatibleProviders.filter((p) => p.id !== id),
+    }));
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({
+        claudeCompatibleProviders: get().claudeCompatibleProviders,
+      });
+    } catch (error) {
+      logger.error('Failed to sync Claude-compatible providers:', error);
+    }
+  },
+  setClaudeCompatibleProviders: async (providers) => {
+    set({ claudeCompatibleProviders: providers });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ claudeCompatibleProviders: providers });
+    } catch (error) {
+      logger.error('Failed to sync Claude-compatible providers:', error);
+    }
+  },
+  toggleClaudeCompatibleProviderEnabled: async (id) => {
+    set((state) => ({
+      claudeCompatibleProviders: state.claudeCompatibleProviders.map((p) =>
+        p.id === id ? { ...p, enabled: !p.enabled } : p
+      ),
+    }));
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({
+        claudeCompatibleProviders: get().claudeCompatibleProviders,
+      });
+    } catch (error) {
+      logger.error('Failed to sync Claude-compatible providers:', error);
+    }
+  },
+
+  // Claude API Profile actions (deprecated)
+  addClaudeApiProfile: async (profile) => {
+    set((state) => ({
+      claudeApiProfiles: [...state.claudeApiProfiles, profile],
+    }));
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ claudeApiProfiles: get().claudeApiProfiles });
+    } catch (error) {
+      logger.error('Failed to sync Claude API profiles:', error);
+    }
+  },
+  updateClaudeApiProfile: async (id, updates) => {
+    set((state) => ({
+      claudeApiProfiles: state.claudeApiProfiles.map((p) =>
+        p.id === id ? { ...p, ...updates } : p
+      ),
+    }));
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ claudeApiProfiles: get().claudeApiProfiles });
+    } catch (error) {
+      logger.error('Failed to sync Claude API profiles:', error);
+    }
+  },
+  deleteClaudeApiProfile: async (id) => {
+    set((state) => ({
+      claudeApiProfiles: state.claudeApiProfiles.filter((p) => p.id !== id),
+      activeClaudeApiProfileId:
+        state.activeClaudeApiProfileId === id ? null : state.activeClaudeApiProfileId,
+    }));
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({
+        claudeApiProfiles: get().claudeApiProfiles,
+        activeClaudeApiProfileId: get().activeClaudeApiProfileId,
+      });
+    } catch (error) {
+      logger.error('Failed to sync Claude API profiles:', error);
+    }
+  },
+  setActiveClaudeApiProfile: async (id) => {
+    set({ activeClaudeApiProfileId: id });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ activeClaudeApiProfileId: id });
+    } catch (error) {
+      logger.error('Failed to sync active Claude API profile:', error);
+    }
+  },
+  setClaudeApiProfiles: async (profiles) => {
+    set({ claudeApiProfiles: profiles });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ claudeApiProfiles: profiles });
+    } catch (error) {
+      logger.error('Failed to sync Claude API profiles:', error);
+    }
+  },
+
+  // MCP Server actions
+  addMCPServer: (server) =>
+    set((state) => ({
+      mcpServers: [
+        ...state.mcpServers,
+        { ...server, id: `mcp-${Date.now()}-${Math.random().toString(36).slice(2)}` },
+      ],
+    })),
+  updateMCPServer: (id, updates) =>
+    set((state) => ({
+      mcpServers: state.mcpServers.map((s) => (s.id === id ? { ...s, ...updates } : s)),
+    })),
+  removeMCPServer: (id) =>
+    set((state) => ({
+      mcpServers: state.mcpServers.filter((s) => s.id !== id),
+    })),
+  reorderMCPServers: (oldIndex, newIndex) =>
+    set((state) => {
+      const servers = [...state.mcpServers];
+      const [removed] = servers.splice(oldIndex, 1);
+      servers.splice(newIndex, 0, removed);
+      return { mcpServers: servers };
+    }),
+
+  // Project Analysis actions
+  setProjectAnalysis: (analysis) => set({ projectAnalysis: analysis }),
+  setIsAnalyzing: (analyzing) => set({ isAnalyzing: analyzing }),
+  clearAnalysis: () => set({ projectAnalysis: null, isAnalyzing: false }),
+
+  // Agent Session actions
+  setLastSelectedSession: (projectPath, sessionId) =>
+    set((state) => ({
+      lastSelectedSessionByProject: {
+        ...state.lastSelectedSessionByProject,
+        [projectPath]: sessionId ?? undefined,
+      } as Record<string, string>,
+    })),
+  getLastSelectedSession: (projectPath) => get().lastSelectedSessionByProject[projectPath] ?? null,
+
+  // Agent model selection actions
+  setAgentModelForSession: (sessionId, model) =>
+    set((state) => ({
+      agentModelBySession: {
+        ...state.agentModelBySession,
+        [sessionId]: model,
+      },
+    })),
+  getAgentModelForSession: (sessionId) => get().agentModelBySession[sessionId] ?? null,
+
+  // Board Background actions
+  setBoardBackground: (projectPath, imagePath) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          imagePath,
+          imageVersion: Date.now(), // Bust cache on image change
+        },
+      },
+    })),
+  setCardOpacity: (projectPath, opacity) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          cardOpacity: opacity,
+        },
+      },
+    })),
+  setColumnOpacity: (projectPath, opacity) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          columnOpacity: opacity,
+        },
+      },
+    })),
+  setColumnBorderEnabled: (projectPath, enabled) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          columnBorderEnabled: enabled,
+        },
+      },
+    })),
+  getBoardBackground: (projectPath) =>
+    get().boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings,
+  setCardGlassmorphism: (projectPath, enabled) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          cardGlassmorphism: enabled,
+        },
+      },
+    })),
+  setCardBorderEnabled: (projectPath, enabled) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          cardBorderEnabled: enabled,
+        },
+      },
+    })),
+  setCardBorderOpacity: (projectPath, opacity) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          cardBorderOpacity: opacity,
+        },
+      },
+    })),
+  setHideScrollbar: (projectPath, hide) =>
+    set((state) => ({
+      boardBackgroundByProject: {
+        ...state.boardBackgroundByProject,
+        [projectPath]: {
+          ...(state.boardBackgroundByProject[projectPath] ?? defaultBackgroundSettings),
+          hideScrollbar: hide,
+        },
+      },
+    })),
+  clearBoardBackground: (projectPath) =>
+    set((state) => {
+      const newBackgrounds = { ...state.boardBackgroundByProject };
+      delete newBackgrounds[projectPath];
+      return { boardBackgroundByProject: newBackgrounds };
+    }),
+
+  // Terminal actions
+  setTerminalUnlocked: (unlocked, token) =>
+    set((state) => ({
+      terminalState: {
+        ...state.terminalState,
+        isUnlocked: unlocked,
+        authToken: token ?? state.terminalState.authToken,
+      },
+    })),
+
+  setActiveTerminalSession: (sessionId) =>
+    set((state) => ({
+      terminalState: {
+        ...state.terminalState,
+        activeSessionId: sessionId,
+      },
+    })),
+
+  toggleTerminalMaximized: (sessionId) =>
+    set((state) => ({
+      terminalState: {
+        ...state.terminalState,
+        maximizedSessionId: state.terminalState.maximizedSessionId === sessionId ? null : sessionId,
+      },
+    })),
+
+  addTerminalToLayout: (sessionId, direction = 'horizontal', _targetSessionId, branchName) => {
+    set((state) => {
+      const { tabs, activeTabId } = state.terminalState;
+
+      // If no tabs exist, create a new one
+      if (tabs.length === 0) {
+        const newTabId = `tab-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        return {
+          terminalState: {
+            ...state.terminalState,
+            tabs: [
+              {
+                id: newTabId,
+                name: 'Terminal 1',
+                layout: { type: 'terminal' as const, sessionId, branchName },
+              },
+            ],
+            activeTabId: newTabId,
+            activeSessionId: sessionId,
+          },
+        };
+      }
+
+      // Find active tab
+      const activeTab = tabs.find((t) => t.id === activeTabId);
+      if (!activeTab) return state;
+
+      // If tab has no layout, add terminal directly
+      if (!activeTab.layout) {
+        return {
+          terminalState: {
+            ...state.terminalState,
+            tabs: tabs.map((t) =>
+              t.id === activeTabId
+                ? { ...t, layout: { type: 'terminal' as const, sessionId, branchName } }
+                : t
+            ),
+            activeSessionId: sessionId,
+          },
+        };
+      }
+
+      // Add new terminal to split
+      const newLayout: TerminalPanelContent = {
+        type: 'split',
+        id: generateSplitId(),
+        direction,
+        panels: [activeTab.layout, { type: 'terminal' as const, sessionId, branchName }],
+      };
+
+      return {
+        terminalState: {
+          ...state.terminalState,
+          tabs: tabs.map((t) => (t.id === activeTabId ? { ...t, layout: newLayout } : t)),
+          activeSessionId: sessionId,
+        },
+      };
+    });
+  },
+
+  removeTerminalFromLayout: (sessionId) => {
+    set((state) => {
+      const { tabs } = state.terminalState;
+
+      const removeFromLayout = (
+        layout: TerminalPanelContent | null
+      ): TerminalPanelContent | null => {
+        if (!layout) return null;
+        if (layout.type === 'terminal' && layout.sessionId === sessionId) return null;
+        if (layout.type === 'testRunner' && layout.sessionId === sessionId) return null;
+        if (layout.type === 'split') {
+          const remainingPanels = layout.panels
+            .map(removeFromLayout)
+            .filter((p): p is TerminalPanelContent => p !== null);
+          if (remainingPanels.length === 0) return null;
+          if (remainingPanels.length === 1) return remainingPanels[0];
+          return { ...layout, panels: remainingPanels };
+        }
+        return layout;
+      };
+
+      const updatedTabs = tabs.map((t) => ({
+        ...t,
+        layout: removeFromLayout(t.layout),
+      }));
+
+      // Find a new active session if the removed one was active
+      let newActiveSessionId = state.terminalState.activeSessionId;
+      if (newActiveSessionId === sessionId) {
+        // Find the first available session in any tab
+        for (const tab of updatedTabs) {
+          const findFirstSession = (layout: TerminalPanelContent | null): string | null => {
+            if (!layout) return null;
+            if (layout.type === 'terminal' || layout.type === 'testRunner') return layout.sessionId;
+            if (layout.type === 'split') {
+              for (const panel of layout.panels) {
+                const found = findFirstSession(panel);
+                if (found) return found;
+              }
+            }
+            return null;
+          };
+          const found = findFirstSession(tab.layout);
+          if (found) {
+            newActiveSessionId = found;
+            break;
+          }
+        }
+        if (newActiveSessionId === sessionId) newActiveSessionId = null;
+      }
+
+      return {
+        terminalState: {
+          ...state.terminalState,
+          tabs: updatedTabs,
+          activeSessionId: newActiveSessionId,
+          maximizedSessionId:
+            state.terminalState.maximizedSessionId === sessionId
+              ? null
+              : state.terminalState.maximizedSessionId,
+        },
+      };
+    });
+  },
+
+  swapTerminals: (sessionId1, sessionId2) => {
+    set((state) => {
+      const { tabs } = state.terminalState;
+
+      const swapInLayout = (layout: TerminalPanelContent | null): TerminalPanelContent | null => {
+        if (!layout) return null;
+        if (
+          (layout.type === 'terminal' || layout.type === 'testRunner') &&
+          layout.sessionId === sessionId1
+        ) {
+          return { ...layout, sessionId: sessionId2 };
+        }
+        if (
+          (layout.type === 'terminal' || layout.type === 'testRunner') &&
+          layout.sessionId === sessionId2
+        ) {
+          return { ...layout, sessionId: sessionId1 };
+        }
+        if (layout.type === 'split') {
+          return {
+            ...layout,
+            panels: layout.panels
+              .map(swapInLayout)
+              .filter((p): p is TerminalPanelContent => p !== null),
+          };
+        }
+        return layout;
+      };
+
+      return {
+        terminalState: {
+          ...state.terminalState,
+          tabs: tabs.map((t) => ({ ...t, layout: swapInLayout(t.layout) })),
+        },
+      };
+    });
+  },
+
+  clearTerminalState: () =>
+    set((state) => ({
+      terminalState: {
+        ...state.terminalState,
+        tabs: [],
+        activeTabId: null,
+        activeSessionId: null,
+        maximizedSessionId: null,
+      },
+    })),
+
+  setTerminalPanelFontSize: (sessionId, fontSize) => {
+    set((state) => {
+      const { tabs } = state.terminalState;
+
+      const updateFontSize = (layout: TerminalPanelContent | null): TerminalPanelContent | null => {
+        if (!layout) return null;
+        if (layout.type === 'terminal' && layout.sessionId === sessionId) {
+          return { ...layout, fontSize };
+        }
+        if (layout.type === 'split') {
+          return {
+            ...layout,
+            panels: layout.panels
+              .map(updateFontSize)
+              .filter((p): p is TerminalPanelContent => p !== null),
+          };
+        }
+        return layout;
+      };
+
+      return {
+        terminalState: {
+          ...state.terminalState,
+          tabs: tabs.map((t) => ({ ...t, layout: updateFontSize(t.layout) })),
+        },
+      };
+    });
+  },
+
+  setTerminalDefaultFontSize: (fontSize) =>
+    set((state) => ({
+      terminalState: { ...state.terminalState, defaultFontSize: fontSize },
+    })),
+
+  setTerminalDefaultRunScript: (script) =>
+    set((state) => ({
+      terminalState: { ...state.terminalState, defaultRunScript: script },
+    })),
+
+  setTerminalScreenReaderMode: (enabled) =>
+    set((state) => ({
+      terminalState: { ...state.terminalState, screenReaderMode: enabled },
+    })),
+
+  setTerminalFontFamily: (fontFamily) =>
+    set((state) => ({
+      terminalState: { ...state.terminalState, fontFamily },
+    })),
+
+  setTerminalScrollbackLines: (lines) =>
+    set((state) => ({
+      terminalState: { ...state.terminalState, scrollbackLines: lines },
+    })),
+
+  setTerminalLineHeight: (lineHeight) =>
+    set((state) => ({
+      terminalState: { ...state.terminalState, lineHeight },
+    })),
+
+  setTerminalMaxSessions: (maxSessions) =>
+    set((state) => ({
+      terminalState: { ...state.terminalState, maxSessions },
+    })),
+
+  setTerminalLastActiveProjectPath: (projectPath) =>
+    set((state) => ({
+      terminalState: { ...state.terminalState, lastActiveProjectPath: projectPath },
+    })),
+
+  setOpenTerminalMode: (mode) =>
+    set((state) => ({
+      terminalState: { ...state.terminalState, openTerminalMode: mode },
+    })),
+
+  setTerminalBackgroundColor: (color) =>
+    set((state) => ({
+      terminalState: { ...state.terminalState, customBackgroundColor: color },
+    })),
+
+  setTerminalForegroundColor: (color) =>
+    set((state) => ({
+      terminalState: { ...state.terminalState, customForegroundColor: color },
+    })),
+
+  addTerminalTab: (name) => {
+    const newTabId = `tab-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const tabNumber = get().terminalState.tabs.length + 1;
+    set((state) => ({
+      terminalState: {
+        ...state.terminalState,
+        tabs: [
+          ...state.terminalState.tabs,
+          { id: newTabId, name: name || `Terminal ${tabNumber}`, layout: null },
+        ],
+        activeTabId: newTabId,
+      },
+    }));
+    return newTabId;
+  },
+
+  removeTerminalTab: (tabId) => {
+    set((state) => {
+      const tabIndex = state.terminalState.tabs.findIndex((t) => t.id === tabId);
+      const newTabs = state.terminalState.tabs.filter((t) => t.id !== tabId);
+
+      let newActiveTabId = state.terminalState.activeTabId;
+      if (newActiveTabId === tabId && newTabs.length > 0) {
+        // Select adjacent tab
+        const newIndex = Math.min(tabIndex, newTabs.length - 1);
+        newActiveTabId = newTabs[newIndex].id;
+      } else if (newTabs.length === 0) {
+        newActiveTabId = null;
+      }
+
+      // Find new active session from new active tab
+      let newActiveSessionId = state.terminalState.activeSessionId;
+      if (newActiveTabId) {
+        const newActiveTab = newTabs.find((t) => t.id === newActiveTabId);
+        if (newActiveTab?.layout) {
+          const findFirstSession = (layout: TerminalPanelContent): string | null => {
+            if (layout.type === 'terminal' || layout.type === 'testRunner') return layout.sessionId;
+            if (layout.type === 'split') {
+              for (const panel of layout.panels) {
+                const found = findFirstSession(panel);
+                if (found) return found;
+              }
+            }
+            return null;
+          };
+          newActiveSessionId = findFirstSession(newActiveTab.layout);
+        } else {
+          newActiveSessionId = null;
+        }
+      } else {
+        newActiveSessionId = null;
+      }
+
+      return {
+        terminalState: {
+          ...state.terminalState,
+          tabs: newTabs,
+          activeTabId: newActiveTabId,
+          activeSessionId: newActiveSessionId,
+        },
+      };
+    });
+  },
+
+  setActiveTerminalTab: (tabId) => {
+    set((state) => {
+      const tab = state.terminalState.tabs.find((t) => t.id === tabId);
+      if (!tab) return state;
+
+      // Find first session in the tab's layout
+      let newActiveSessionId = state.terminalState.activeSessionId;
+      if (tab.layout) {
+        const findFirstSession = (layout: TerminalPanelContent): string | null => {
+          if (layout.type === 'terminal' || layout.type === 'testRunner') return layout.sessionId;
+          if (layout.type === 'split') {
+            for (const panel of layout.panels) {
+              const found = findFirstSession(panel);
+              if (found) return found;
+            }
+          }
+          return null;
+        };
+        newActiveSessionId = findFirstSession(tab.layout);
+      } else {
+        newActiveSessionId = null;
+      }
+
+      return {
+        terminalState: {
+          ...state.terminalState,
+          activeTabId: tabId,
+          activeSessionId: newActiveSessionId,
+        },
+      };
+    });
+  },
+
+  renameTerminalTab: (tabId, name) =>
+    set((state) => ({
+      terminalState: {
+        ...state.terminalState,
+        tabs: state.terminalState.tabs.map((t) => (t.id === tabId ? { ...t, name } : t)),
+      },
+    })),
+
+  reorderTerminalTabs: (fromTabId, toTabId) =>
+    set((state) => {
+      const tabs = [...state.terminalState.tabs];
+      const fromIndex = tabs.findIndex((t) => t.id === fromTabId);
+      const toIndex = tabs.findIndex((t) => t.id === toTabId);
+      if (fromIndex === -1 || toIndex === -1) return state;
+
+      const [removed] = tabs.splice(fromIndex, 1);
+      tabs.splice(toIndex, 0, removed);
+
+      return {
+        terminalState: { ...state.terminalState, tabs },
+      };
+    }),
+
+  moveTerminalToTab: (sessionId, targetTabId) => {
+    set((state) => {
+      const { tabs } = state.terminalState;
+
+      // Find the terminal panel to move
+      let panelToMove: TerminalPanelContent | null = null;
+      let sourceTabId: string | null = null;
+
+      for (const tab of tabs) {
+        const findPanel = (layout: TerminalPanelContent | null): TerminalPanelContent | null => {
+          if (!layout) return null;
+          if (
+            (layout.type === 'terminal' || layout.type === 'testRunner') &&
+            layout.sessionId === sessionId
+          ) {
+            return layout;
+          }
+          if (layout.type === 'split') {
+            for (const panel of layout.panels) {
+              const found = findPanel(panel);
+              if (found) return found;
+            }
+          }
+          return null;
+        };
+        const found = findPanel(tab.layout);
+        if (found) {
+          panelToMove = found;
+          sourceTabId = tab.id;
+          break;
+        }
+      }
+
+      if (!panelToMove || !sourceTabId) return state;
+
+      // Remove from source tab
+      const removeFromLayout = (
+        layout: TerminalPanelContent | null
+      ): TerminalPanelContent | null => {
+        if (!layout) return null;
+        if (
+          (layout.type === 'terminal' || layout.type === 'testRunner') &&
+          layout.sessionId === sessionId
+        ) {
+          return null;
+        }
+        if (layout.type === 'split') {
+          const remainingPanels = layout.panels
+            .map(removeFromLayout)
+            .filter((p): p is TerminalPanelContent => p !== null);
+          if (remainingPanels.length === 0) return null;
+          if (remainingPanels.length === 1) return remainingPanels[0];
+          return { ...layout, panels: remainingPanels };
+        }
+        return layout;
+      };
+
+      let newTabs = tabs.map((t) =>
+        t.id === sourceTabId ? { ...t, layout: removeFromLayout(t.layout) } : t
+      );
+
+      // Add to target tab (or create new tab)
+      if (targetTabId === 'new') {
+        const newTabId = `tab-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        const tabNumber = newTabs.length + 1;
+        newTabs = [
+          ...newTabs,
+          { id: newTabId, name: `Terminal ${tabNumber}`, layout: panelToMove },
+        ];
+        return {
+          terminalState: {
+            ...state.terminalState,
+            tabs: newTabs,
+            activeTabId: newTabId,
+            activeSessionId: sessionId,
+          },
+        };
+      } else {
+        newTabs = newTabs.map((t) => {
+          if (t.id !== targetTabId) return t;
+          if (!t.layout) {
+            return { ...t, layout: panelToMove };
+          }
+          return {
+            ...t,
+            layout: {
+              type: 'split' as const,
+              id: generateSplitId(),
+              direction: 'horizontal' as const,
+              panels: [t.layout, panelToMove!],
+            },
+          };
+        });
+        return {
+          terminalState: {
+            ...state.terminalState,
+            tabs: newTabs,
+            activeTabId: targetTabId,
+            activeSessionId: sessionId,
+          },
+        };
+      }
+    });
+  },
+
+  addTerminalToTab: (sessionId, tabId, direction = 'horizontal', branchName) => {
+    set((state) => {
+      const { tabs } = state.terminalState;
+      const targetTab = tabs.find((t) => t.id === tabId);
+      if (!targetTab) return state;
+
+      const newPanel: TerminalPanelContent = { type: 'terminal', sessionId, branchName };
+
+      if (!targetTab.layout) {
+        return {
+          terminalState: {
+            ...state.terminalState,
+            tabs: tabs.map((t) => (t.id === tabId ? { ...t, layout: newPanel } : t)),
+            activeTabId: tabId,
+            activeSessionId: sessionId,
+          },
+        };
+      }
+
+      const newLayout: TerminalPanelContent = {
+        type: 'split',
+        id: generateSplitId(),
+        direction,
+        panels: [targetTab.layout, newPanel],
+      };
+
+      return {
+        terminalState: {
+          ...state.terminalState,
+          tabs: tabs.map((t) => (t.id === tabId ? { ...t, layout: newLayout } : t)),
+          activeTabId: tabId,
+          activeSessionId: sessionId,
+        },
+      };
+    });
+  },
+
+  setTerminalTabLayout: (tabId, layout, activeSessionId) =>
+    set((state) => ({
+      terminalState: {
+        ...state.terminalState,
+        tabs: state.terminalState.tabs.map((t) => (t.id === tabId ? { ...t, layout } : t)),
+        activeSessionId: activeSessionId ?? state.terminalState.activeSessionId,
+      },
+    })),
+
+  updateTerminalPanelSizes: (tabId, panelKeys, sizes) => {
+    set((state) => {
+      const { tabs } = state.terminalState;
+      const tab = tabs.find((t) => t.id === tabId);
+      if (!tab?.layout) return state;
+
+      const updateSizes = (layout: TerminalPanelContent): TerminalPanelContent => {
+        if (layout.type === 'split') {
+          // Find matching panels and update sizes
+          const updatedPanels = layout.panels.map((panel, _index) => {
+            // Generate key for this panel
+            const panelKey =
+              panel.type === 'split'
+                ? panel.id
+                : panel.type === 'terminal' || panel.type === 'testRunner'
+                  ? panel.sessionId
+                  : '';
+            const keyIndex = panelKeys.indexOf(panelKey);
+            if (keyIndex !== -1 && sizes[keyIndex] !== undefined) {
+              return { ...panel, size: sizes[keyIndex] };
+            }
+            // Recursively update nested splits
+            if (panel.type === 'split') {
+              return updateSizes(panel);
+            }
+            return panel;
+          });
+          return { ...layout, panels: updatedPanels };
+        }
+        return layout;
+      };
+
+      return {
+        terminalState: {
+          ...state.terminalState,
+          tabs: tabs.map((t) => (t.id === tabId ? { ...t, layout: updateSizes(t.layout!) } : t)),
+        },
+      };
+    });
+  },
+
+  saveTerminalLayout: (projectPath) => {
+    const state = get();
+    const { terminalState } = state;
+
+    const persistLayout = (layout: TerminalPanelContent | null): PersistedTerminalPanel | null => {
+      if (!layout) return null;
+      if (layout.type === 'terminal') {
+        return {
+          type: 'terminal',
+          size: layout.size,
+          fontSize: layout.fontSize,
+          sessionId: layout.sessionId,
+          branchName: layout.branchName,
+        };
+      }
+      if (layout.type === 'testRunner') {
+        return {
+          type: 'testRunner',
+          size: layout.size,
+          sessionId: layout.sessionId,
+          worktreePath: layout.worktreePath,
+        };
+      }
+      if (layout.type === 'split') {
+        return {
+          type: 'split',
+          id: layout.id,
+          direction: layout.direction,
+          panels: layout.panels
+            .map(persistLayout)
+            .filter((p): p is PersistedTerminalPanel => p !== null),
+          size: layout.size,
+        };
+      }
+      return null;
+    };
+
+    const persistedState: PersistedTerminalState = {
+      tabs: terminalState.tabs.map((t) => ({
+        id: t.id,
+        name: t.name,
+        layout: persistLayout(t.layout),
+      })),
+      activeTabIndex: terminalState.tabs.findIndex((t) => t.id === terminalState.activeTabId),
+      defaultFontSize: terminalState.defaultFontSize,
+      defaultRunScript: terminalState.defaultRunScript,
+      screenReaderMode: terminalState.screenReaderMode,
+      fontFamily: terminalState.fontFamily,
+      scrollbackLines: terminalState.scrollbackLines,
+      lineHeight: terminalState.lineHeight,
+    };
+
+    set((state) => ({
+      terminalLayoutByProject: {
+        ...state.terminalLayoutByProject,
+        [projectPath]: persistedState,
+      },
+    }));
+  },
+
+  getPersistedTerminalLayout: (projectPath) => get().terminalLayoutByProject[projectPath] ?? null,
+
+  clearPersistedTerminalLayout: (projectPath) =>
+    set((state) => {
+      const newLayouts = { ...state.terminalLayoutByProject };
+      delete newLayouts[projectPath];
+      return { terminalLayoutByProject: newLayouts };
+    }),
+
+  // Spec Creation actions
+  setSpecCreatingForProject: (projectPath) => set({ specCreatingForProject: projectPath }),
+  isSpecCreatingForProject: (projectPath) => get().specCreatingForProject === projectPath,
+
+  setDefaultPlanningMode: async (mode) => {
+    set({ defaultPlanningMode: mode });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ defaultPlanningMode: mode });
+    } catch (error) {
+      logger.error('Failed to sync defaultPlanningMode:', error);
+    }
+  },
+  setDefaultRequirePlanApproval: async (require) => {
+    set({ defaultRequirePlanApproval: require });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ defaultRequirePlanApproval: require });
+    } catch (error) {
+      logger.error('Failed to sync defaultRequirePlanApproval:', error);
+    }
+  },
+  setDefaultFeatureModel: async (entry) => {
+    set({ defaultFeatureModel: entry });
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ defaultFeatureModel: entry });
+    } catch (error) {
+      logger.error('Failed to sync defaultFeatureModel:', error);
+    }
+  },
+
+  setDefaultThinkingLevel: async (level) => {
+    const currentModel = get().defaultFeatureModel;
+    const modelId = currentModel.model;
+    const availableLevels = getThinkingLevelsForModel(modelId);
+
+    // Also update defaultFeatureModel's thinkingLevel if compatible
+    if (availableLevels.includes(level)) {
+      const updatedFeatureModel = { ...currentModel, thinkingLevel: level };
+      set({
+        defaultThinkingLevel: level,
+        defaultFeatureModel: updatedFeatureModel,
+      });
+      // Sync to server - include defaultFeatureModel since thinkingLevel is embedded there too
+      try {
+        const httpApi = getHttpApiClient();
+        await httpApi.settings.updateGlobal({
+          defaultThinkingLevel: level,
+          defaultFeatureModel: updatedFeatureModel,
+        });
+      } catch (error) {
+        logger.error('Failed to sync defaultThinkingLevel:', error);
+      }
+    } else {
+      set({ defaultThinkingLevel: level });
+      // Sync to server
+      try {
+        const httpApi = getHttpApiClient();
+        await httpApi.settings.updateGlobal({ defaultThinkingLevel: level });
+      } catch (error) {
+        logger.error('Failed to sync defaultThinkingLevel:', error);
+      }
+    }
+  },
+
+  setDefaultReasoningEffort: async (effort) => {
+    set({ defaultReasoningEffort: effort });
+    // Sync to server
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ defaultReasoningEffort: effort });
+    } catch (error) {
+      logger.error('Failed to sync defaultReasoningEffort:', error);
+    }
+  },
+
+  setDefaultMaxTurns: async (maxTurns: number) => {
+    // Guard against NaN/Infinity before flooring and clamping
+    const safeValue = Number.isFinite(maxTurns) ? maxTurns : 1;
+    // Clamp to valid range
+    const clamped = Math.max(1, Math.min(10000, Math.floor(safeValue)));
+    set({ defaultMaxTurns: clamped });
+    // Sync to server
+    try {
+      const httpApi = getHttpApiClient();
+      await httpApi.settings.updateGlobal({ defaultMaxTurns: clamped });
+    } catch (error) {
+      logger.error('Failed to sync defaultMaxTurns:', error);
+    }
+  },
+
+  // Plan Approval actions
+  setPendingPlanApproval: (approval) => set({ pendingPlanApproval: approval }),
+
+  // Pipeline actions
+  setPipelineConfig: (projectPath, config) =>
+    set((state) => ({
+      pipelineConfigByProject: {
+        ...state.pipelineConfigByProject,
+        [projectPath]: config,
+      },
+    })),
+  getPipelineConfig: (projectPath) => get().pipelineConfigByProject[projectPath] ?? null,
+  addPipelineStep: (projectPath, step) => {
+    const newStep: PipelineStep = {
+      ...step,
+      id: `step-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    };
+    set((state) => {
+      const config = state.pipelineConfigByProject[projectPath] ?? {
+        steps: [],
+        version: 1,
+      };
+      return {
+        pipelineConfigByProject: {
+          ...state.pipelineConfigByProject,
+          [projectPath]: {
+            ...config,
+            steps: [...config.steps, newStep],
+          },
+        },
+      };
+    });
+    return newStep;
+  },
+  updatePipelineStep: (projectPath, stepId, updates) =>
+    set((state) => {
+      const config = state.pipelineConfigByProject[projectPath];
+      if (!config) return state;
+      return {
+        pipelineConfigByProject: {
+          ...state.pipelineConfigByProject,
+          [projectPath]: {
+            ...config,
+            steps: config.steps.map((s) =>
+              s.id === stepId ? { ...s, ...updates, updatedAt: new Date().toISOString() } : s
+            ),
+          },
+        },
+      };
+    }),
+  deletePipelineStep: (projectPath, stepId) =>
+    set((state) => {
+      const config = state.pipelineConfigByProject[projectPath];
+      if (!config) return state;
+      return {
+        pipelineConfigByProject: {
+          ...state.pipelineConfigByProject,
+          [projectPath]: {
+            ...config,
+            steps: config.steps.filter((s) => s.id !== stepId),
+          },
+        },
+      };
+    }),
+  reorderPipelineSteps: (projectPath, stepIds) =>
+    set((state) => {
+      const config = state.pipelineConfigByProject[projectPath];
+      if (!config) return state;
+      const stepMap = new Map(config.steps.map((s) => [s.id, s]));
+      const reorderedSteps = stepIds
+        .map((id) => stepMap.get(id))
+        .filter((s): s is PipelineStep => !!s);
+      return {
+        pipelineConfigByProject: {
+          ...state.pipelineConfigByProject,
+          [projectPath]: {
+            ...config,
+            steps: reorderedSteps,
+          },
+        },
+      };
+    }),
+
+  // Worktree Panel Visibility actions
+  setWorktreePanelVisible: (projectPath, visible) =>
+    set((state) => ({
+      worktreePanelVisibleByProject: {
+        ...state.worktreePanelVisibleByProject,
+        [projectPath]: visible,
+      },
+    })),
+  getWorktreePanelVisible: (projectPath) =>
+    get().worktreePanelVisibleByProject[projectPath] ?? true,
+
+  // Init Script Indicator Visibility actions
+  setShowInitScriptIndicator: (projectPath, visible) =>
+    set((state) => ({
+      showInitScriptIndicatorByProject: {
+        ...state.showInitScriptIndicatorByProject,
+        [projectPath]: visible,
+      },
+    })),
+  getShowInitScriptIndicator: (projectPath) =>
+    get().showInitScriptIndicatorByProject[projectPath] ?? true,
+
+  // Default Delete Branch actions
+  setDefaultDeleteBranch: (projectPath, deleteBranch) =>
+    set((state) => ({
+      defaultDeleteBranchByProject: {
+        ...state.defaultDeleteBranchByProject,
+        [projectPath]: deleteBranch,
+      },
+    })),
+  getDefaultDeleteBranch: (projectPath) => get().defaultDeleteBranchByProject[projectPath] ?? false,
+
+  // Auto-dismiss Init Script Indicator actions
+  setAutoDismissInitScriptIndicator: (projectPath, autoDismiss) =>
+    set((state) => ({
+      autoDismissInitScriptIndicatorByProject: {
+        ...state.autoDismissInitScriptIndicatorByProject,
+        [projectPath]: autoDismiss,
+      },
+    })),
+  getAutoDismissInitScriptIndicator: (projectPath) =>
+    get().autoDismissInitScriptIndicatorByProject[projectPath] ?? true,
+
+  // Use Worktrees Override actions
+  setProjectUseWorktrees: (projectPath, useWorktrees) =>
+    set((state) => ({
+      useWorktreesByProject: {
+        ...state.useWorktreesByProject,
+        [projectPath]: useWorktrees ?? undefined,
+      },
+    })),
+  getProjectUseWorktrees: (projectPath) => get().useWorktreesByProject[projectPath],
+  getEffectiveUseWorktrees: (projectPath) => {
+    const projectOverride = get().useWorktreesByProject[projectPath];
+    return projectOverride !== undefined ? projectOverride : get().useWorktrees;
+  },
+
+  // Worktree Copy Files actions
+  setWorktreeCopyFiles: (projectPath, files) =>
+    set((state) => ({
+      worktreeCopyFilesByProject: {
+        ...state.worktreeCopyFilesByProject,
+        [projectPath]: files,
+      },
+    })),
+  getWorktreeCopyFiles: (projectPath) => get().worktreeCopyFilesByProject[projectPath] ?? [],
+
+  // Worktree Display Settings actions
+  setPinnedWorktreesCount: (projectPath, count) =>
+    set((state) => ({
+      pinnedWorktreesCountByProject: {
+        ...state.pinnedWorktreesCountByProject,
+        [projectPath]: count,
+      },
+    })),
+  getPinnedWorktreesCount: (projectPath) => get().pinnedWorktreesCountByProject[projectPath] ?? 0,
+  setPinnedWorktreeBranches: (projectPath, branches) =>
+    set((state) => ({
+      pinnedWorktreeBranchesByProject: {
+        ...state.pinnedWorktreeBranchesByProject,
+        [projectPath]: branches,
+      },
+    })),
+  getPinnedWorktreeBranches: (projectPath) =>
+    get().pinnedWorktreeBranchesByProject[projectPath] ?? [],
+  swapPinnedWorktreeBranch: (projectPath, slotIndex, newBranch) =>
+    set((state) => {
+      const src = state.pinnedWorktreeBranchesByProject[projectPath] ?? [];
+      // Pre-fill up to slotIndex to prevent sparse holes
+      const current: string[] = Array.from(
+        { length: Math.max(src.length, slotIndex + 1) },
+        (_, i) => src[i] ?? ''
+      );
+      // If the new branch is already in another slot, swap them (only when newBranch is non-empty)
+      const existingIndex = newBranch !== '' ? current.indexOf(newBranch) : -1;
+      if (existingIndex !== -1 && existingIndex !== slotIndex) {
+        // Swap: put the old branch from this slot into the other slot
+        current[existingIndex] = current[slotIndex];
+      }
+      current[slotIndex] = newBranch;
+      return {
+        pinnedWorktreeBranchesByProject: {
+          ...state.pinnedWorktreeBranchesByProject,
+          [projectPath]: current,
+        },
+      };
+    }),
+  setWorktreeDropdownThreshold: (projectPath, threshold) =>
+    set((state) => ({
+      worktreeDropdownThresholdByProject: {
+        ...state.worktreeDropdownThresholdByProject,
+        [projectPath]: threshold,
+      },
+    })),
+  getWorktreeDropdownThreshold: (projectPath) =>
+    get().worktreeDropdownThresholdByProject[projectPath] ?? 3,
+  setAlwaysUseWorktreeDropdown: (projectPath, always) =>
+    set((state) => ({
+      alwaysUseWorktreeDropdownByProject: {
+        ...state.alwaysUseWorktreeDropdownByProject,
+        [projectPath]: always,
+      },
+    })),
+  getAlwaysUseWorktreeDropdown: (projectPath) =>
+    get().alwaysUseWorktreeDropdownByProject[projectPath] ?? true,
+
+  // UI State actions
+  setWorktreePanelCollapsed: (collapsed) => set({ worktreePanelCollapsed: collapsed }),
+  setLastProjectDir: (dir) => set({ lastProjectDir: dir }),
+  setRecentFolders: (folders) => set({ recentFolders: folders }),
+  addRecentFolder: (folder) =>
+    set((state) => {
+      const filtered = state.recentFolders.filter((f) => f !== folder);
+      return { recentFolders: [folder, ...filtered].slice(0, 10) };
+    }),
+
+  // Claude Usage Tracking actions
+  setClaudeRefreshInterval: (interval) => set({ claudeRefreshInterval: interval }),
+  setClaudeUsageLastUpdated: (timestamp) => set({ claudeUsageLastUpdated: timestamp }),
+  setClaudeUsage: (usage) => set({ claudeUsage: usage, claudeUsageLastUpdated: Date.now() }),
+
+  // Codex Usage Tracking actions
+  setCodexUsage: (usage) => set({ codexUsage: usage, codexUsageLastUpdated: Date.now() }),
+
+  // z.ai Usage Tracking actions
+  setZaiUsage: (usage) => set({ zaiUsage: usage, zaiUsageLastUpdated: usage ? Date.now() : null }),
+
+  // Gemini Usage Tracking actions
+  setGeminiUsage: (usage, lastUpdated) =>
+    set({
+      geminiUsage: usage,
+      geminiUsageLastUpdated: lastUpdated ?? (usage ? Date.now() : null),
+    }),
+
+  // Codex Models actions
+  fetchCodexModels: async (forceRefresh = false) => {
+    const state = get();
+    const now = Date.now();
+    const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
+    const RETRY_DELAY = 30 * 1000; // 30 seconds after failure
+
+    // Skip if already loading
+    if (state.codexModelsLoading) return;
+
+    // Skip if recently fetched (unless force refresh)
+    if (
+      !forceRefresh &&
+      state.codexModelsLastFetched &&
+      now - state.codexModelsLastFetched < CACHE_DURATION
+    ) {
+      return;
+    }
+
+    // Skip if recently failed (unless force refresh)
+    if (
+      !forceRefresh &&
+      state.codexModelsLastFailedAt &&
+      now - state.codexModelsLastFailedAt < RETRY_DELAY
+    ) {
+      return;
+    }
+
+    set({ codexModelsLoading: true, codexModelsError: null });
+
+    try {
+      const httpApi = getHttpApiClient();
+      const data = await httpApi.get<{
+        success: boolean;
+        models?: Array<{
+          id: string;
+          label: string;
+          description: string;
+          hasThinking: boolean;
+          supportsVision: boolean;
+          tier: 'premium' | 'standard' | 'basic';
+          isDefault: boolean;
+        }>;
+        error?: string;
+      }>('/api/codex/models');
+
+      if (data.success && data.models) {
+        set({
+          codexModels: data.models,
+          codexModelsLoading: false,
+          codexModelsLastFetched: now,
+          codexModelsError: null,
+        });
+      } else {
+        set({
+          codexModelsLoading: false,
+          codexModelsError: data.error || 'Failed to fetch Codex models',
+          codexModelsLastFailedAt: now,
+        });
+      }
+    } catch (error) {
+      set({
+        codexModelsLoading: false,
+        codexModelsError: error instanceof Error ? error.message : 'Unknown error',
+        codexModelsLastFailedAt: now,
+      });
+    }
+  },
+  setCodexModels: (models) => set({ codexModels: models }),
+
+  // OpenCode Models actions
+  fetchOpencodeModels: async (forceRefresh = false) => {
+    const state = get();
+    const now = Date.now();
+    const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
+    const RETRY_DELAY = 30 * 1000; // 30 seconds after failure
+
+    // Skip if already loading
+    if (state.opencodeModelsLoading) return;
+
+    // Skip if recently fetched (unless force refresh)
+    if (
+      !forceRefresh &&
+      state.opencodeModelsLastFetched &&
+      now - state.opencodeModelsLastFetched < CACHE_DURATION
+    ) {
+      return;
+    }
+
+    // Skip if recently failed (unless force refresh)
+    if (
+      !forceRefresh &&
+      state.opencodeModelsLastFailedAt &&
+      now - state.opencodeModelsLastFailedAt < RETRY_DELAY
+    ) {
+      return;
+    }
+
+    set({ opencodeModelsLoading: true, opencodeModelsError: null });
+
+    try {
+      const httpApi = getHttpApiClient();
+      const data = await httpApi.get<{
+        success: boolean;
+        models?: ModelDefinition[];
+        providers?: Array<{
+          id: string;
+          name: string;
+          authenticated: boolean;
+          authMethod?: string;
+        }>;
+        error?: string;
+      }>('/api/setup/opencode/models');
+
+      if (data.success && data.models) {
+        // Filter out Bedrock models
+        const filteredModels = data.models.filter(
+          (m) => !m.id.startsWith(OPENCODE_BEDROCK_MODEL_PREFIX)
+        );
+
+        // Auto-enable only models that are genuinely new (never seen before).
+        // Models that existed previously and were explicitly deselected by the user
+        // should NOT be re-enabled on subsequent fetches.
+        const currentEnabledIds = get().enabledDynamicModelIds;
+        const currentKnownIds = get().knownDynamicModelIds;
+        const allFetchedIds = filteredModels.map((m) => m.id);
+        // Only auto-enable models that have NEVER been seen before (not in knownDynamicModelIds)
+        const trulyNewModelIds = allFetchedIds.filter((id) => !currentKnownIds.includes(id));
+        const updatedEnabledIds =
+          trulyNewModelIds.length > 0
+            ? [...new Set([...currentEnabledIds, ...trulyNewModelIds])]
+            : currentEnabledIds;
+        // Track all discovered model IDs (union of known + newly fetched)
+        const updatedKnownIds = [...new Set([...currentKnownIds, ...allFetchedIds])];
+
+        set({
+          dynamicOpencodeModels: filteredModels,
+          enabledDynamicModelIds: updatedEnabledIds,
+          knownDynamicModelIds: updatedKnownIds,
+          cachedOpencodeProviders: data.providers ?? [],
+          opencodeModelsLoading: false,
+          opencodeModelsLastFetched: now,
+          opencodeModelsError: null,
+        });
+
+        // Persist newly enabled model IDs and known model IDs to server settings
+        if (trulyNewModelIds.length > 0) {
+          try {
+            const httpApi = getHttpApiClient();
+            await httpApi.settings.updateGlobal({
+              enabledDynamicModelIds: updatedEnabledIds,
+              knownDynamicModelIds: updatedKnownIds,
+            });
+          } catch (syncError) {
+            logger.error('Failed to sync enabledDynamicModelIds after auto-enable:', syncError);
+          }
+        }
+      } else {
+        set({
+          opencodeModelsLoading: false,
+          opencodeModelsError: data.error || 'Failed to fetch OpenCode models',
+          opencodeModelsLastFailedAt: now,
+        });
+      }
+    } catch (error) {
+      set({
+        opencodeModelsLoading: false,
+        opencodeModelsError: error instanceof Error ? error.message : 'Unknown error',
+        opencodeModelsLastFailedAt: now,
+      });
+    }
+  },
+
+  // Init Script State actions
+  setInitScriptState: (projectPath, branch, state) => {
+    const key = `${projectPath}::${branch}`;
+    set((s) => ({
+      initScriptState: {
+        ...s.initScriptState,
+        [key]: {
+          ...s.initScriptState[key],
+          branch,
+          output: s.initScriptState[key]?.output ?? [],
+          status: s.initScriptState[key]?.status ?? 'idle',
+          ...state,
+        },
+      },
+    }));
+  },
+  appendInitScriptOutput: (projectPath, branch, content) => {
+    const key = `${projectPath}::${branch}`;
+    set((s) => {
+      const current = s.initScriptState[key];
+      if (!current) return s;
+      // Split content by newlines and add each line
+      const newLines = content.split('\n').filter((line) => line.length > 0);
+      const combinedOutput = [...current.output, ...newLines];
+      // Limit to MAX_INIT_OUTPUT_LINES
+      const limitedOutput = combinedOutput.slice(-MAX_INIT_OUTPUT_LINES);
+      return {
+        initScriptState: {
+          ...s.initScriptState,
+          [key]: {
+            ...current,
+            output: limitedOutput,
+          },
+        },
+      };
+    });
+  },
+  clearInitScriptState: (projectPath, branch) => {
+    const key = `${projectPath}::${branch}`;
+    set((s) => {
+      const newState = { ...s.initScriptState };
+      delete newState[key];
+      return { initScriptState: newState };
+    });
+  },
+  getInitScriptState: (projectPath, branch) => {
+    const key = `${projectPath}::${branch}`;
+    return get().initScriptState[key] ?? null;
+  },
+  getInitScriptStatesForProject: (projectPath) => {
+    const prefix = `${projectPath}::`;
+    const states = get().initScriptState;
+    return Object.entries(states)
+      .filter(([key]) => key.startsWith(prefix))
+      .map(([key, state]) => ({ key, state }));
+  },
+
+  // Reset
+  reset: () => set(initialState),
+}));
diff --git a/temp_repo/apps/ui/src/store/auth-store.ts b/temp_repo/apps/ui/src/store/auth-store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1fcd579715babc405e692542bdf689155248ecfa
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/auth-store.ts
@@ -0,0 +1,76 @@
+import { create } from 'zustand';
+
+interface AuthState {
+  /** Whether we've attempted to determine auth status for this page load */
+  authChecked: boolean;
+  /** Whether the user is currently authenticated (web mode: valid session cookie) */
+  isAuthenticated: boolean;
+  /** Whether settings have been loaded and hydrated from server */
+  settingsLoaded: boolean;
+}
+
+interface AuthActions {
+  setAuthState: (state: Partial<AuthState>) => void;
+  resetAuth: () => void;
+}
+
+/**
+ * Pre-flight check: if localStorage has cached settings with projects AND setup is
+ * complete, we can optimistically mark auth as complete on the very first render,
+ * skipping the spinner entirely. The background verify in __root.tsx will correct
+ * this if the session is invalid.
+ *
+ * This runs synchronously at module load time — before createRoot().render() —
+ * so the first React render never shows the !authChecked spinner for returning users.
+ *
+ * We only set settingsLoaded=true when setupComplete is also true in the cache.
+ * If setupComplete is false, settingsLoaded stays false so the routing effect in
+ * __root.tsx doesn't immediately redirect to /setup before the setup store is hydrated.
+ * In practice, returning users who completed setup have both flags in their cache.
+ *
+ * Intentionally minimal: only checks for the key existence and basic structure.
+ * Full hydration (project data, settings) is handled by __root.tsx after mount.
+ */
+function getInitialAuthState(): AuthState {
+  try {
+    const raw = localStorage.getItem('automaker-settings-cache');
+    if (raw) {
+      const parsed = JSON.parse(raw) as {
+        projects?: unknown[];
+        setupComplete?: boolean;
+      };
+      if (parsed?.projects && Array.isArray(parsed.projects) && parsed.projects.length > 0) {
+        // Returning user with cached settings — optimistically mark as authenticated.
+        // Only mark settingsLoaded=true when setupComplete is confirmed in cache,
+        // preventing premature /setup redirects before the setup store is hydrated.
+        // Background verify in __root.tsx will fix isAuthenticated if session expired.
+        const setupDone = parsed.setupComplete === true;
+        return {
+          authChecked: true,
+          isAuthenticated: true,
+          settingsLoaded: setupDone,
+        };
+      }
+    }
+  } catch {
+    // Corrupted localStorage or JSON parse error — fall through to cold start
+  }
+  return { authChecked: false, isAuthenticated: false, settingsLoaded: false };
+}
+
+const initialState: AuthState = getInitialAuthState();
+
+/**
+ * Web authentication state.
+ *
+ * Intentionally NOT persisted: source of truth is server session cookie.
+ * Initial state is optimistically set from localStorage cache for returning users,
+ * then verified against the server in the background by __root.tsx.
+ */
+export const useAuthStore = create<AuthState & AuthActions>((set) => ({
+  ...initialState,
+  setAuthState: (state) => {
+    set({ ...state });
+  },
+  resetAuth: () => set({ authChecked: false, isAuthenticated: false, settingsLoaded: false }),
+}));
diff --git a/temp_repo/apps/ui/src/store/defaults/background-settings.ts b/temp_repo/apps/ui/src/store/defaults/background-settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..391d03eed62c38b7b8ff2ab73ed06fdef6ca26d6
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/defaults/background-settings.ts
@@ -0,0 +1,13 @@
+import type { BackgroundSettings } from '../types/ui-types';
+
+// Default background settings for board backgrounds
+export const defaultBackgroundSettings: BackgroundSettings = {
+  imagePath: null,
+  cardOpacity: 100,
+  columnOpacity: 100,
+  columnBorderEnabled: true,
+  cardGlassmorphism: true,
+  cardBorderEnabled: true,
+  cardBorderOpacity: 100,
+  hideScrollbar: false,
+};
diff --git a/temp_repo/apps/ui/src/store/defaults/constants.ts b/temp_repo/apps/ui/src/store/defaults/constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b69969e0995e5c8f43fdf06556c0c75772df072b
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/defaults/constants.ts
@@ -0,0 +1,2 @@
+// Maximum number of output lines to keep in init script state (prevents unbounded memory growth)
+export const MAX_INIT_OUTPUT_LINES = 500;
diff --git a/temp_repo/apps/ui/src/store/defaults/index.ts b/temp_repo/apps/ui/src/store/defaults/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..82a42f4070a01b8189451a2e07e2aad12db1fea3
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/defaults/index.ts
@@ -0,0 +1,3 @@
+export { defaultBackgroundSettings } from './background-settings';
+export { defaultTerminalState } from './terminal-defaults';
+export { MAX_INIT_OUTPUT_LINES } from './constants';
diff --git a/temp_repo/apps/ui/src/store/defaults/terminal-defaults.ts b/temp_repo/apps/ui/src/store/defaults/terminal-defaults.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bb359fe05024f5c0e7a7c2aad1c65cc50fc2aba8
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/defaults/terminal-defaults.ts
@@ -0,0 +1,23 @@
+import { DEFAULT_FONT_VALUE } from '@/config/ui-font-options';
+import type { TerminalState } from '../types/terminal-types';
+
+// Default terminal state values
+export const defaultTerminalState: TerminalState = {
+  isUnlocked: false,
+  authToken: null,
+  tabs: [],
+  activeTabId: null,
+  activeSessionId: null,
+  maximizedSessionId: null,
+  defaultFontSize: 14,
+  defaultRunScript: '',
+  screenReaderMode: false,
+  fontFamily: DEFAULT_FONT_VALUE,
+  scrollbackLines: 5000,
+  lineHeight: 1.0,
+  maxSessions: 100,
+  lastActiveProjectPath: null,
+  openTerminalMode: 'newTab',
+  customBackgroundColor: null,
+  customForegroundColor: null,
+};
diff --git a/temp_repo/apps/ui/src/store/ideation-store.ts b/temp_repo/apps/ui/src/store/ideation-store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9e4f135b1ab904f6bbb7eb27e5060e164a123680
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/ideation-store.ts
@@ -0,0 +1,385 @@
+/**
+ * Ideation Store - State management for brainstorming and idea management
+ */
+
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type {
+  Idea,
+  IdeaCategory,
+  IdeaStatus,
+  IdeationPrompt,
+  AnalysisSuggestion,
+  ProjectAnalysisResult,
+  IdeationContextSources,
+} from '@automaker/types';
+import { DEFAULT_IDEATION_CONTEXT_SOURCES } from '@automaker/types';
+
+// ============================================================================
+// Generation Job Types
+// ============================================================================
+
+export type GenerationJobStatus = 'generating' | 'ready' | 'error';
+
+export interface GenerationJob {
+  id: string;
+  projectPath: string;
+  prompt: IdeationPrompt;
+  status: GenerationJobStatus;
+  suggestions: AnalysisSuggestion[];
+  error: string | null;
+  startedAt: string;
+  completedAt: string | null;
+}
+
+// ============================================================================
+// State Interface
+// ============================================================================
+
+export type IdeationMode = 'dashboard' | 'prompts';
+
+interface IdeationState {
+  // Ideas (saved for later)
+  ideas: Idea[];
+  selectedIdeaId: string | null;
+
+  // Generation jobs (multiple concurrent generations)
+  generationJobs: GenerationJob[];
+  selectedJobId: string | null;
+
+  // Legacy - keep for backwards compat during transition
+  suggestions: AnalysisSuggestion[];
+  selectedPrompt: IdeationPrompt | null;
+  isGenerating: boolean;
+  generatingError: string | null;
+
+  // Analysis
+  analysisResult: ProjectAnalysisResult | null;
+  isAnalyzing: boolean;
+  analysisProgress: number;
+  analysisMessage: string;
+
+  // UI state
+  currentMode: IdeationMode;
+  selectedCategory: IdeaCategory | null;
+  filterStatus: IdeaStatus | 'all';
+
+  // Context sources per project
+  contextSourcesByProject: Record<string, Partial<IdeationContextSources>>;
+}
+
+// ============================================================================
+// Actions Interface
+// ============================================================================
+
+interface IdeationActions {
+  // Ideas
+  setIdeas: (ideas: Idea[]) => void;
+  addIdea: (idea: Idea) => void;
+  updateIdea: (id: string, updates: Partial<Idea>) => void;
+  removeIdea: (id: string) => void;
+  setSelectedIdea: (id: string | null) => void;
+  getSelectedIdea: () => Idea | null;
+
+  // Generation Jobs
+  addGenerationJob: (projectPath: string, prompt: IdeationPrompt) => string;
+  updateJobStatus: (
+    jobId: string,
+    status: GenerationJobStatus,
+    suggestions?: AnalysisSuggestion[],
+    error?: string
+  ) => void;
+  removeJob: (jobId: string) => void;
+  clearCompletedJobs: () => void;
+  setSelectedJob: (jobId: string | null) => void;
+  getJob: (jobId: string) => GenerationJob | null;
+  removeSuggestionFromJob: (jobId: string, suggestionId: string) => void;
+  appendSuggestionsToJob: (jobId: string, suggestions: AnalysisSuggestion[]) => void;
+  setJobGenerating: (jobId: string, generating: boolean) => void;
+
+  // Legacy Suggestions (kept for backwards compat)
+  setSuggestions: (suggestions: AnalysisSuggestion[]) => void;
+  clearSuggestions: () => void;
+  removeSuggestion: (id: string) => void;
+  setSelectedPrompt: (prompt: IdeationPrompt | null) => void;
+  setIsGenerating: (isGenerating: boolean) => void;
+  setGeneratingError: (error: string | null) => void;
+
+  // Analysis
+  setAnalysisResult: (result: ProjectAnalysisResult | null) => void;
+  setIsAnalyzing: (isAnalyzing: boolean) => void;
+  setAnalysisProgress: (progress: number, message?: string) => void;
+
+  // UI
+  setMode: (mode: IdeationMode) => void;
+  setCategory: (category: IdeaCategory | null) => void;
+  setFilterStatus: (status: IdeaStatus | 'all') => void;
+
+  // Context sources
+  /**
+   * Returns the effective context-source settings for a project,
+   * merging defaults with any stored overrides.
+   */
+  getContextSources: (projectPath: string) => IdeationContextSources;
+  /**
+   * Updates a single context-source flag for a project.
+   */
+  setContextSource: (
+    projectPath: string,
+    key: keyof IdeationContextSources,
+    value: boolean
+  ) => void;
+
+  // Reset
+  reset: () => void;
+  resetSuggestions: () => void;
+}
+
+// ============================================================================
+// Initial State
+// ============================================================================
+
+const initialState: IdeationState = {
+  ideas: [],
+  selectedIdeaId: null,
+  generationJobs: [],
+  selectedJobId: null,
+  suggestions: [],
+  selectedPrompt: null,
+  isGenerating: false,
+  generatingError: null,
+  analysisResult: null,
+  isAnalyzing: false,
+  analysisProgress: 0,
+  analysisMessage: '',
+  currentMode: 'dashboard',
+  selectedCategory: null,
+  filterStatus: 'all',
+  contextSourcesByProject: {},
+};
+
+// ============================================================================
+// Store
+// ============================================================================
+
+export const useIdeationStore = create<IdeationState & IdeationActions>()(
+  persist(
+    (set, get) => ({
+      ...initialState,
+
+      // Ideas
+      setIdeas: (ideas) => set({ ideas }),
+
+      addIdea: (idea) =>
+        set((state) => ({
+          ideas: [idea, ...state.ideas],
+        })),
+
+      updateIdea: (id, updates) =>
+        set((state) => ({
+          ideas: state.ideas.map((idea) => (idea.id === id ? { ...idea, ...updates } : idea)),
+        })),
+
+      removeIdea: (id) =>
+        set((state) => ({
+          ideas: state.ideas.filter((idea) => idea.id !== id),
+          selectedIdeaId: state.selectedIdeaId === id ? null : state.selectedIdeaId,
+        })),
+
+      setSelectedIdea: (id) => set({ selectedIdeaId: id }),
+
+      getSelectedIdea: () => {
+        const state = get();
+        return state.ideas.find((idea) => idea.id === state.selectedIdeaId) || null;
+      },
+
+      // Generation Jobs
+      addGenerationJob: (projectPath, prompt) => {
+        const jobId = `job-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+        const job: GenerationJob = {
+          id: jobId,
+          projectPath,
+          prompt,
+          status: 'generating',
+          suggestions: [],
+          error: null,
+          startedAt: new Date().toISOString(),
+          completedAt: null,
+        };
+        set((state) => ({
+          generationJobs: [job, ...state.generationJobs],
+        }));
+        return jobId;
+      },
+
+      updateJobStatus: (jobId, status, suggestions, error) =>
+        set((state) => ({
+          generationJobs: state.generationJobs.map((job) =>
+            job.id === jobId
+              ? {
+                  ...job,
+                  status,
+                  suggestions: suggestions || job.suggestions,
+                  error: error || null,
+                  completedAt: status !== 'generating' ? new Date().toISOString() : null,
+                }
+              : job
+          ),
+        })),
+
+      removeJob: (jobId) =>
+        set((state) => ({
+          generationJobs: state.generationJobs.filter((job) => job.id !== jobId),
+          selectedJobId: state.selectedJobId === jobId ? null : state.selectedJobId,
+        })),
+
+      clearCompletedJobs: () =>
+        set((state) => ({
+          generationJobs: state.generationJobs.filter((job) => job.status === 'generating'),
+        })),
+
+      setSelectedJob: (jobId) => set({ selectedJobId: jobId }),
+
+      getJob: (jobId) => {
+        const state = get();
+        return state.generationJobs.find((job) => job.id === jobId) || null;
+      },
+
+      removeSuggestionFromJob: (jobId, suggestionId) =>
+        set((state) => ({
+          generationJobs: state.generationJobs.map((job) =>
+            job.id === jobId
+              ? {
+                  ...job,
+                  suggestions: job.suggestions.filter((s) => s.id !== suggestionId),
+                }
+              : job
+          ),
+        })),
+
+      appendSuggestionsToJob: (jobId, suggestions) =>
+        set((state) => ({
+          generationJobs: state.generationJobs.map((job) =>
+            job.id === jobId
+              ? {
+                  ...job,
+                  suggestions: [...job.suggestions, ...suggestions],
+                  status: 'ready' as const,
+                }
+              : job
+          ),
+        })),
+
+      setJobGenerating: (jobId, generating) =>
+        set((state) => ({
+          generationJobs: state.generationJobs.map((job) =>
+            job.id === jobId
+              ? {
+                  ...job,
+                  status: generating ? ('generating' as const) : ('ready' as const),
+                }
+              : job
+          ),
+        })),
+
+      // Suggestions (legacy)
+      setSuggestions: (suggestions) => set({ suggestions }),
+
+      clearSuggestions: () => set({ suggestions: [], generatingError: null }),
+
+      removeSuggestion: (id) =>
+        set((state) => ({
+          suggestions: state.suggestions.filter((s) => s.id !== id),
+        })),
+
+      setSelectedPrompt: (prompt) => set({ selectedPrompt: prompt }),
+
+      setIsGenerating: (isGenerating) => set({ isGenerating }),
+
+      setGeneratingError: (error) => set({ generatingError: error }),
+
+      // Analysis
+      setAnalysisResult: (result) => set({ analysisResult: result }),
+
+      setIsAnalyzing: (isAnalyzing) =>
+        set({
+          isAnalyzing,
+          analysisProgress: isAnalyzing ? 0 : get().analysisProgress,
+          analysisMessage: isAnalyzing ? 'Starting analysis...' : '',
+        }),
+
+      setAnalysisProgress: (progress, message) =>
+        set({
+          analysisProgress: progress,
+          analysisMessage: message || get().analysisMessage,
+        }),
+
+      // UI
+      setMode: (mode) => set({ currentMode: mode }),
+
+      setCategory: (category) => set({ selectedCategory: category }),
+
+      setFilterStatus: (status) => set({ filterStatus: status }),
+
+      // Context sources
+      getContextSources: (projectPath) => {
+        const state = get();
+        const projectOverrides = state.contextSourcesByProject[projectPath] ?? {};
+        return { ...DEFAULT_IDEATION_CONTEXT_SOURCES, ...projectOverrides };
+      },
+
+      setContextSource: (projectPath, key, value) =>
+        set((state) => ({
+          contextSourcesByProject: {
+            ...state.contextSourcesByProject,
+            [projectPath]: {
+              ...state.contextSourcesByProject[projectPath],
+              [key]: value,
+            },
+          },
+        })),
+
+      // Reset
+      reset: () => set(initialState),
+
+      resetSuggestions: () =>
+        set({
+          suggestions: [],
+          selectedPrompt: null,
+          isGenerating: false,
+          generatingError: null,
+        }),
+    }),
+    {
+      name: 'automaker-ideation-store',
+      version: 5,
+      partialize: (state) => ({
+        // Only persist these fields
+        ideas: state.ideas,
+        generationJobs: state.generationJobs,
+        analysisResult: state.analysisResult,
+        filterStatus: state.filterStatus,
+        contextSourcesByProject: state.contextSourcesByProject,
+      }),
+      migrate: (persistedState: unknown, version: number) => {
+        const state = persistedState as Record<string, unknown>;
+        if (version < 4) {
+          // Remove legacy jobs that don't have projectPath (from before project-scoping was added)
+          const jobs = (state.generationJobs as GenerationJob[]) || [];
+          return {
+            ...state,
+            generationJobs: jobs.filter((job) => job.projectPath !== undefined),
+          };
+        }
+        if (version < 5) {
+          // Initialize contextSourcesByProject if not present
+          return {
+            ...state,
+            contextSourcesByProject: state.contextSourcesByProject ?? {},
+          };
+        }
+        return state;
+      },
+    }
+  )
+);
diff --git a/temp_repo/apps/ui/src/store/notifications-store.ts b/temp_repo/apps/ui/src/store/notifications-store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8dfe13d76d55a2c7ae6b439056ef9bc3929bc4eb
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/notifications-store.ts
@@ -0,0 +1,129 @@
+/**
+ * Notifications Store - State management for project-level notifications
+ */
+
+import { create } from 'zustand';
+import type { Notification } from '@automaker/types';
+
+// ============================================================================
+// State Interface
+// ============================================================================
+
+interface NotificationsState {
+  // Notifications for the current project
+  notifications: Notification[];
+  unreadCount: number;
+  isLoading: boolean;
+  error: string | null;
+
+  // Popover state
+  isPopoverOpen: boolean;
+}
+
+// ============================================================================
+// Actions Interface
+// ============================================================================
+
+interface NotificationsActions {
+  // Data management
+  setNotifications: (notifications: Notification[]) => void;
+  setUnreadCount: (count: number) => void;
+  addNotification: (notification: Notification) => void;
+  markAsRead: (notificationId: string) => void;
+  markAllAsRead: () => void;
+  dismissNotification: (notificationId: string) => void;
+  dismissAll: () => void;
+
+  // Loading state
+  setLoading: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+
+  // Popover state
+  setPopoverOpen: (open: boolean) => void;
+
+  // Reset
+  reset: () => void;
+}
+
+// ============================================================================
+// Initial State
+// ============================================================================
+
+const initialState: NotificationsState = {
+  notifications: [],
+  unreadCount: 0,
+  isLoading: false,
+  error: null,
+  isPopoverOpen: false,
+};
+
+// ============================================================================
+// Store
+// ============================================================================
+
+export const useNotificationsStore = create<NotificationsState & NotificationsActions>(
+  (set, _get) => ({
+    ...initialState,
+
+    // Data management
+    setNotifications: (notifications) =>
+      set({
+        notifications,
+        unreadCount: notifications.filter((n) => !n.read).length,
+      }),
+
+    setUnreadCount: (count) => set({ unreadCount: count }),
+
+    addNotification: (notification) =>
+      set((state) => ({
+        notifications: [notification, ...state.notifications],
+        unreadCount: notification.read ? state.unreadCount : state.unreadCount + 1,
+      })),
+
+    markAsRead: (notificationId) =>
+      set((state) => {
+        const notification = state.notifications.find((n) => n.id === notificationId);
+        if (!notification || notification.read) return state;
+
+        return {
+          notifications: state.notifications.map((n) =>
+            n.id === notificationId ? { ...n, read: true } : n
+          ),
+          unreadCount: Math.max(0, state.unreadCount - 1),
+        };
+      }),
+
+    markAllAsRead: () =>
+      set((state) => ({
+        notifications: state.notifications.map((n) => ({ ...n, read: true })),
+        unreadCount: 0,
+      })),
+
+    dismissNotification: (notificationId) =>
+      set((state) => {
+        const notification = state.notifications.find((n) => n.id === notificationId);
+        if (!notification) return state;
+
+        return {
+          notifications: state.notifications.filter((n) => n.id !== notificationId),
+          unreadCount: notification.read ? state.unreadCount : Math.max(0, state.unreadCount - 1),
+        };
+      }),
+
+    dismissAll: () =>
+      set({
+        notifications: [],
+        unreadCount: 0,
+      }),
+
+    // Loading state
+    setLoading: (loading) => set({ isLoading: loading }),
+    setError: (error) => set({ error }),
+
+    // Popover state
+    setPopoverOpen: (open) => set({ isPopoverOpen: open }),
+
+    // Reset
+    reset: () => set(initialState),
+  })
+);
diff --git a/temp_repo/apps/ui/src/store/setup-store.ts b/temp_repo/apps/ui/src/store/setup-store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ba04741bda9edaa9e5910decd88433fc16e5e211
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/setup-store.ts
@@ -0,0 +1,321 @@
+import { create } from 'zustand';
+import type { GeminiAuthStatus } from '@automaker/types';
+
+export interface CliStatus {
+  installed: boolean;
+  path: string | null;
+  version: string | null;
+  method: string;
+  hasApiKey?: boolean;
+  error?: string;
+}
+
+export interface GhCliStatus {
+  installed: boolean;
+  authenticated: boolean;
+  version: string | null;
+  path: string | null;
+  user: string | null;
+  error?: string;
+}
+
+export interface CursorCliStatus {
+  installed: boolean;
+  version?: string | null;
+  path?: string | null;
+  auth?: {
+    authenticated: boolean;
+    method: string;
+  };
+  installCommand?: string;
+  loginCommand?: string;
+  error?: string;
+}
+
+export interface CodexCliStatus {
+  installed: boolean;
+  version?: string | null;
+  path?: string | null;
+  auth?: {
+    authenticated: boolean;
+    method: string;
+  };
+  installCommand?: string;
+  loginCommand?: string;
+  error?: string;
+}
+
+export interface OpencodeCliStatus {
+  installed: boolean;
+  version?: string | null;
+  path?: string | null;
+  auth?: {
+    authenticated: boolean;
+    method: string;
+  };
+  installCommand?: string;
+  loginCommand?: string;
+  error?: string;
+}
+
+export interface GeminiCliStatus {
+  installed: boolean;
+  version?: string | null;
+  path?: string | null;
+  auth?: {
+    authenticated: boolean;
+    method: string;
+    hasApiKey?: boolean;
+    hasEnvApiKey?: boolean;
+  };
+  installCommand?: string;
+  loginCommand?: string;
+  error?: string;
+}
+
+export interface CopilotCliStatus {
+  installed: boolean;
+  version?: string | null;
+  path?: string | null;
+  auth?: {
+    authenticated: boolean;
+    method: string;
+    login?: string;
+    host?: string;
+  };
+  installCommand?: string;
+  loginCommand?: string;
+  error?: string;
+}
+
+export interface JulesCliStatus {
+  installed: boolean;
+  version?: string | null;
+  path?: string | null;
+  auth?: {
+    authenticated: boolean;
+    method: string;
+  };
+  error?: string;
+}
+
+export type CodexAuthMethod =
+  | 'api_key_env'
+  | 'api_key'
+  | 'cli_authenticated'
+  | 'none';
+
+export interface CodexAuthStatus {
+  authenticated: boolean;
+  method: CodexAuthMethod;
+  hasAuthFile?: boolean;
+  hasApiKey?: boolean;
+  hasEnvApiKey?: boolean;
+  error?: string;
+}
+
+export type ZaiAuthMethod =
+  | 'api_key_env'
+  | 'api_key'
+  | 'none';
+
+export interface ZaiAuthStatus {
+  authenticated: boolean;
+  method: ZaiAuthMethod;
+  hasApiKey?: boolean;
+  hasEnvApiKey?: boolean;
+  error?: string;
+}
+
+export type { GeminiAuthStatus };
+
+export type ClaudeAuthMethod =
+  | 'oauth_token_env'
+  | 'oauth_token'
+  | 'api_key_env'
+  | 'api_key'
+  | 'credentials_file'
+  | 'cli_authenticated'
+  | 'none';
+
+export interface ClaudeAuthStatus {
+  authenticated: boolean;
+  method: ClaudeAuthMethod;
+  hasCredentialsFile?: boolean;
+  oauthTokenValid?: boolean;
+  apiKeyValid?: boolean;
+  hasEnvOAuthToken?: boolean;
+  hasEnvApiKey?: boolean;
+  error?: string;
+}
+
+export interface InstallProgress {
+  isInstalling: boolean;
+  currentStep: string;
+  progress: number;
+  output: string[];
+  error?: string;
+}
+
+export type SetupStep =
+  | 'welcome'
+  | 'theme'
+  | 'providers'
+  | 'claude_detect'
+  | 'claude_auth'
+  | 'cursor'
+  | 'codex'
+  | 'opencode'
+  | 'gemini'
+  | 'copilot'
+  | 'github'
+  | 'complete';
+
+export interface SetupState {
+  isFirstRun: boolean;
+  setupComplete: boolean;
+  currentStep: SetupStep;
+  claudeCliStatus: CliStatus | null;
+  claudeAuthStatus: ClaudeAuthStatus | null;
+  claudeInstallProgress: InstallProgress;
+  claudeIsVerifying: boolean;
+  ghCliStatus: GhCliStatus | null;
+  cursorCliStatus: CursorCliStatus | null;
+  codexCliStatus: CliStatus | null;
+  codexAuthStatus: CodexAuthStatus | null;
+  codexInstallProgress: InstallProgress;
+  opencodeCliStatus: OpencodeCliStatus | null;
+  geminiCliStatus: GeminiCliStatus | null;
+  geminiAuthStatus: GeminiAuthStatus | null;
+  copilotCliStatus: CopilotCliStatus | null;
+  julesCliStatus: JulesCliStatus | null;
+  zaiAuthStatus: ZaiAuthStatus | null;
+  skipClaudeSetup: boolean;
+}
+
+export interface SetupActions {
+  setCurrentStep: (step: SetupStep) => void;
+  setSetupComplete: (complete: boolean) => void;
+  completeSetup: () => void;
+  resetSetup: () => void;
+  setIsFirstRun: (isFirstRun: boolean) => void;
+  setClaudeCliStatus: (status: CliStatus | null) => void;
+  setClaudeAuthStatus: (status: ClaudeAuthStatus | null) => void;
+  setClaudeInstallProgress: (progress: Partial<InstallProgress>) => void;
+  resetClaudeInstallProgress: () => void;
+  setClaudeIsVerifying: (isVerifying: boolean) => void;
+  setGhCliStatus: (status: GhCliStatus | null) => void;
+  setCursorCliStatus: (status: CursorCliStatus | null) => void;
+  setCodexCliStatus: (status: CliStatus | null) => void;
+  setCodexAuthStatus: (status: CodexAuthStatus | null) => void;
+  setCodexInstallProgress: (progress: Partial<InstallProgress>) => void;
+  resetCodexInstallProgress: () => void;
+  setOpencodeCliStatus: (status: OpencodeCliStatus | null) => void;
+  setGeminiCliStatus: (status: GeminiCliStatus | null) => void;
+  setGeminiAuthStatus: (status: GeminiAuthStatus | null) => void;
+  setCopilotCliStatus: (status: CopilotCliStatus | null) => void;
+  setJulesCliStatus: (status: JulesCliStatus | null) => void;
+  setZaiAuthStatus: (status: ZaiAuthStatus | null) => void;
+  setSkipClaudeSetup: (skip: boolean) => void;
+}
+
+const initialInstallProgress: InstallProgress = {
+  isInstalling: false,
+  currentStep: '',
+  progress: 0,
+  output: [],
+};
+
+const shouldSkipSetup = import.meta.env.VITE_SKIP_SETUP === 'true';
+
+function getInitialSetupComplete(): boolean {
+  if (shouldSkipSetup) return true;
+  try {
+    const raw = localStorage.getItem('automaker-settings-cache');
+    if (raw) {
+      const parsed = JSON.parse(raw) as { setupComplete?: boolean };
+      if (parsed?.setupComplete === true) return true;
+    }
+  } catch {
+  }
+  return false;
+}
+
+const initialSetupComplete = getInitialSetupComplete();
+
+const initialState: SetupState = {
+  isFirstRun: !shouldSkipSetup && !initialSetupComplete,
+  setupComplete: initialSetupComplete,
+  currentStep: initialSetupComplete ? 'complete' : 'welcome',
+  claudeCliStatus: null,
+  claudeAuthStatus: null,
+  claudeInstallProgress: { ...initialInstallProgress },
+  claudeIsVerifying: false,
+  ghCliStatus: null,
+  cursorCliStatus: null,
+  codexCliStatus: null,
+  codexAuthStatus: null,
+  codexInstallProgress: { ...initialInstallProgress },
+  opencodeCliStatus: null,
+  geminiCliStatus: null,
+  geminiAuthStatus: null,
+  copilotCliStatus: null,
+  julesCliStatus: null,
+  zaiAuthStatus: null,
+  skipClaudeSetup: shouldSkipSetup,
+};
+
+export const useSetupStore = create<SetupState & SetupActions>()((set, get) => ({
+  ...initialState,
+  setCurrentStep: (step) => set({ currentStep: step }),
+  setSetupComplete: (complete) =>
+    set({
+      setupComplete: complete,
+      currentStep: complete ? 'complete' : 'welcome',
+    }),
+  completeSetup: () => set({ setupComplete: true, currentStep: 'complete' }),
+  resetSetup: () =>
+    set({
+      ...initialState,
+      setupComplete: false,
+      currentStep: 'welcome',
+      isFirstRun: false,
+    }),
+  setIsFirstRun: (isFirstRun) => set({ isFirstRun }),
+  setClaudeCliStatus: (status) => set({ claudeCliStatus: status }),
+  setClaudeAuthStatus: (status) => set({ claudeAuthStatus: status }),
+  setClaudeInstallProgress: (progress) =>
+    set({
+      claudeInstallProgress: {
+        ...get().claudeInstallProgress,
+        ...progress,
+      },
+    }),
+  resetClaudeInstallProgress: () =>
+    set({
+      claudeInstallProgress: { ...initialInstallProgress },
+    }),
+  setClaudeIsVerifying: (isVerifying) => set({ claudeIsVerifying: isVerifying }),
+  setGhCliStatus: (status) => set({ ghCliStatus: status }),
+  setCursorCliStatus: (status) => set({ cursorCliStatus: status }),
+  setCodexCliStatus: (status) => set({ codexCliStatus: status }),
+  setCodexAuthStatus: (status) => set({ codexAuthStatus: status }),
+  setCodexInstallProgress: (progress) =>
+    set({
+      codexInstallProgress: {
+        ...get().codexInstallProgress,
+        ...progress,
+      },
+    }),
+  resetCodexInstallProgress: () =>
+    set({
+      codexInstallProgress: { ...initialInstallProgress },
+    }),
+  setOpencodeCliStatus: (status) => set({ opencodeCliStatus: status }),
+  setGeminiCliStatus: (status) => set({ geminiCliStatus: status }),
+  setGeminiAuthStatus: (status) => set({ geminiAuthStatus: status }),
+  setCopilotCliStatus: (status) => set({ copilotCliStatus: status }),
+  setJulesCliStatus: (status) => set({ julesCliStatus: status }),
+  setZaiAuthStatus: (status) => set({ zaiAuthStatus: status }),
+  setSkipClaudeSetup: (skip) => set({ skipClaudeSetup: skip }),
+}));
diff --git a/temp_repo/apps/ui/src/store/test-runners-store.ts b/temp_repo/apps/ui/src/store/test-runners-store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8f8f79843b754165429dbae9867080c6954e65dc
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/test-runners-store.ts
@@ -0,0 +1,246 @@
+/**
+ * Test Runners Store - State management for test runner sessions
+ */
+
+import { create } from 'zustand';
+import type { TestRunStatus } from '@/types/electron';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * A test run session
+ */
+export interface TestSession {
+  /** Unique session ID */
+  sessionId: string;
+  /** Path to the worktree where tests are running */
+  worktreePath: string;
+  /** The test command being run (from project settings) */
+  command: string;
+  /** Current status of the test run */
+  status: TestRunStatus;
+  /** Optional: specific test file being run */
+  testFile?: string;
+  /** When the test run started */
+  startedAt: string;
+  /** When the test run finished (if completed) */
+  finishedAt?: string;
+  /** Exit code (if completed) */
+  exitCode?: number | null;
+  /** Duration in milliseconds (if completed) */
+  duration?: number;
+  /** Accumulated output logs */
+  output: string;
+}
+
+// ============================================================================
+// State Interface
+// ============================================================================
+
+interface TestRunnersState {
+  /** Map of sessionId -> TestSession for all tracked sessions */
+  sessions: Record<string, TestSession>;
+  /** Map of worktreePath -> sessionId for quick lookup of active session per worktree */
+  activeSessionByWorktree: Record<string, string>;
+  /** Loading state for initial data fetch */
+  isLoading: boolean;
+  /** Error state */
+  error: string | null;
+}
+
+// ============================================================================
+// Actions Interface
+// ============================================================================
+
+interface TestRunnersActions {
+  /** Add or update a session when a test run starts */
+  startSession: (session: Omit<TestSession, 'output'>) => void;
+
+  /** Append output to a session */
+  appendOutput: (sessionId: string, content: string) => void;
+
+  /** Complete a session with final status */
+  completeSession: (
+    sessionId: string,
+    status: TestRunStatus,
+    exitCode: number | null,
+    duration: number
+  ) => void;
+
+  /** Get the active session for a worktree */
+  getActiveSession: (worktreePath: string) => TestSession | null;
+
+  /** Get a session by ID */
+  getSession: (sessionId: string) => TestSession | null;
+
+  /** Check if a worktree has an active (running) test session */
+  isWorktreeRunning: (worktreePath: string) => boolean;
+
+  /** Remove a session (cleanup) */
+  removeSession: (sessionId: string) => void;
+
+  /** Clear all sessions for a worktree */
+  clearWorktreeSessions: (worktreePath: string) => void;
+
+  /** Set loading state */
+  setLoading: (loading: boolean) => void;
+
+  /** Set error state */
+  setError: (error: string | null) => void;
+
+  /** Reset the store */
+  reset: () => void;
+}
+
+// ============================================================================
+// Initial State
+// ============================================================================
+
+const initialState: TestRunnersState = {
+  sessions: {},
+  activeSessionByWorktree: {},
+  isLoading: false,
+  error: null,
+};
+
+// ============================================================================
+// Store
+// ============================================================================
+
+export const useTestRunnersStore = create<TestRunnersState & TestRunnersActions>((set, get) => ({
+  ...initialState,
+
+  startSession: (session) => {
+    const newSession: TestSession = {
+      ...session,
+      output: '',
+    };
+
+    set((state) => ({
+      sessions: {
+        ...state.sessions,
+        [session.sessionId]: newSession,
+      },
+      activeSessionByWorktree: {
+        ...state.activeSessionByWorktree,
+        [session.worktreePath]: session.sessionId,
+      },
+    }));
+  },
+
+  appendOutput: (sessionId, content) => {
+    set((state) => {
+      const session = state.sessions[sessionId];
+      if (!session) return state;
+
+      return {
+        sessions: {
+          ...state.sessions,
+          [sessionId]: {
+            ...session,
+            output: session.output + content,
+          },
+        },
+      };
+    });
+  },
+
+  completeSession: (sessionId, status, exitCode, duration) => {
+    set((state) => {
+      const session = state.sessions[sessionId];
+      if (!session) return state;
+
+      const finishedAt = new Date().toISOString();
+
+      // Remove from active sessions since it's no longer running
+      const { [session.worktreePath]: _, ...remainingActive } = state.activeSessionByWorktree;
+
+      return {
+        sessions: {
+          ...state.sessions,
+          [sessionId]: {
+            ...session,
+            status,
+            exitCode,
+            duration,
+            finishedAt,
+          },
+        },
+        // Only remove from active if this is the current active session
+        activeSessionByWorktree:
+          state.activeSessionByWorktree[session.worktreePath] === sessionId
+            ? remainingActive
+            : state.activeSessionByWorktree,
+      };
+    });
+  },
+
+  getActiveSession: (worktreePath) => {
+    const state = get();
+    const sessionId = state.activeSessionByWorktree[worktreePath];
+    if (!sessionId) return null;
+    return state.sessions[sessionId] || null;
+  },
+
+  getSession: (sessionId) => {
+    return get().sessions[sessionId] || null;
+  },
+
+  isWorktreeRunning: (worktreePath) => {
+    const state = get();
+    const sessionId = state.activeSessionByWorktree[worktreePath];
+    if (!sessionId) return false;
+    const session = state.sessions[sessionId];
+    return session?.status === 'running' || session?.status === 'pending';
+  },
+
+  removeSession: (sessionId) => {
+    set((state) => {
+      const session = state.sessions[sessionId];
+      if (!session) return state;
+
+      const { [sessionId]: _, ...remainingSessions } = state.sessions;
+
+      // Remove from active if this was the active session
+      const { [session.worktreePath]: activeId, ...remainingActive } =
+        state.activeSessionByWorktree;
+
+      return {
+        sessions: remainingSessions,
+        activeSessionByWorktree:
+          activeId === sessionId ? remainingActive : state.activeSessionByWorktree,
+      };
+    });
+  },
+
+  clearWorktreeSessions: (worktreePath) => {
+    set((state) => {
+      // Find all sessions for this worktree
+      const sessionsToRemove = Object.values(state.sessions)
+        .filter((s) => s.worktreePath === worktreePath)
+        .map((s) => s.sessionId);
+
+      // Remove them from sessions
+      const remainingSessions = { ...state.sessions };
+      sessionsToRemove.forEach((id) => {
+        delete remainingSessions[id];
+      });
+
+      // Remove from active
+      const { [worktreePath]: _, ...remainingActive } = state.activeSessionByWorktree;
+
+      return {
+        sessions: remainingSessions,
+        activeSessionByWorktree: remainingActive,
+      };
+    });
+  },
+
+  setLoading: (loading) => set({ isLoading: loading }),
+
+  setError: (error) => set({ error }),
+
+  reset: () => set(initialState),
+}));
diff --git a/temp_repo/apps/ui/src/store/types/chat-types.ts b/temp_repo/apps/ui/src/store/types/chat-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bd4cc206158e6e12ab79f16058c75013da92efe4
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/types/chat-types.ts
@@ -0,0 +1,40 @@
+export interface ImageAttachment {
+  id?: string; // Optional - may not be present in messages loaded from server
+  data: string; // base64 encoded image data
+  mimeType: string; // e.g., "image/png", "image/jpeg"
+  filename: string;
+  size?: number; // file size in bytes - optional for messages from server
+}
+
+export interface TextFileAttachment {
+  id: string;
+  content: string; // text content of the file
+  mimeType: string; // e.g., "text/plain", "text/markdown"
+  filename: string;
+  size: number; // file size in bytes
+}
+
+export interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: Date;
+  images?: ImageAttachment[];
+  textFiles?: TextFileAttachment[];
+}
+
+export interface ChatSession {
+  id: string;
+  title: string;
+  projectId: string;
+  messages: ChatMessage[];
+  createdAt: Date;
+  updatedAt: Date;
+  archived: boolean;
+}
+
+// UI-specific: base64-encoded images with required id and size (extends ImageAttachment)
+export interface FeatureImage extends ImageAttachment {
+  id: string; // Required (overrides optional in ImageAttachment)
+  size: number; // Required (overrides optional in ImageAttachment)
+}
diff --git a/temp_repo/apps/ui/src/store/types/index.ts b/temp_repo/apps/ui/src/store/types/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..126c4d31d394760239b3b23f7587d01e7538073f
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/types/index.ts
@@ -0,0 +1,7 @@
+export * from './usage-types';
+export * from './ui-types';
+export * from './settings-types';
+export * from './chat-types';
+export * from './terminal-types';
+export * from './project-types';
+export * from './state-types';
diff --git a/temp_repo/apps/ui/src/store/types/project-types.ts b/temp_repo/apps/ui/src/store/types/project-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..acade34f84851295ec66fd8dffdb8d2b2552ba69
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/types/project-types.ts
@@ -0,0 +1,67 @@
+import type {
+  Feature as BaseFeature,
+  FeatureImagePath,
+  FeatureTextFilePath,
+  ThinkingLevel,
+  ReasoningEffort,
+  FeatureStatusWithPipeline,
+  PlanSpec,
+} from '@automaker/types';
+import type { FeatureImage } from './chat-types';
+
+// Available models for feature execution
+export type ClaudeModel = 'opus' | 'sonnet' | 'haiku';
+
+export interface Feature extends Omit<
+  BaseFeature,
+  | 'steps'
+  | 'imagePaths'
+  | 'textFilePaths'
+  | 'status'
+  | 'planSpec'
+  | 'dependencies'
+  | 'model'
+  | 'branchName'
+  | 'thinkingLevel'
+  | 'reasoningEffort'
+  | 'summary'
+> {
+  id: string;
+  title?: string;
+  titleGenerating?: boolean;
+  category: string;
+  description: string;
+  steps: string[]; // Required in UI (not optional)
+  status: FeatureStatusWithPipeline;
+  images?: FeatureImage[]; // UI-specific base64 images
+  imagePaths?: FeatureImagePath[]; // Stricter type than base (no string | union)
+  textFilePaths?: FeatureTextFilePath[]; // Text file attachments for context
+  justFinishedAt?: string; // UI-specific: ISO timestamp when agent just finished
+  prUrl?: string; // UI-specific: Pull request URL
+  planSpec?: PlanSpec; // Explicit planSpec type to override BaseFeature's index signature
+  dependencies?: string[]; // Explicit type to override BaseFeature's index signature
+  model?: string; // Explicit type to override BaseFeature's index signature
+  branchName?: string; // Explicit type to override BaseFeature's index signature
+  thinkingLevel?: ThinkingLevel; // Explicit type to override BaseFeature's index signature
+  reasoningEffort?: ReasoningEffort; // Explicit type to override BaseFeature's index signature
+  providerId?: string; // Explicit type to override BaseFeature's index signature
+  summary?: string; // Explicit type to override BaseFeature's index signature
+}
+
+// File tree node for project analysis
+export interface FileTreeNode {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  extension?: string;
+  children?: FileTreeNode[];
+}
+
+// Project analysis result
+export interface ProjectAnalysis {
+  fileTree: FileTreeNode[];
+  totalFiles: number;
+  totalDirectories: number;
+  filesByExtension: Record<string, number>;
+  analyzedAt: string;
+}
diff --git a/temp_repo/apps/ui/src/store/types/settings-types.ts b/temp_repo/apps/ui/src/store/types/settings-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bf371fd0b114670b1b2677cb97259e580bf05c98
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/types/settings-types.ts
@@ -0,0 +1,6 @@
+export interface ApiKeys {
+  anthropic: string;
+  google: string;
+  openai: string;
+  zai: string;
+}
diff --git a/temp_repo/apps/ui/src/store/types/state-types.ts b/temp_repo/apps/ui/src/store/types/state-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c622565f6dcaff19e884980a6fd331a32c9b90a2
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/types/state-types.ts
@@ -0,0 +1,916 @@
+import type { Project, TrashedProject } from '@/lib/electron';
+import type {
+  ModelAlias,
+  PlanningMode,
+  ModelProvider,
+  CursorModelId,
+  CodexModelId,
+  OpencodeModelId,
+  GeminiModelId,
+  CopilotModelId,
+  PhaseModelConfig,
+  PhaseModelKey,
+  PhaseModelEntry,
+  MCPServerConfig,
+  PipelineConfig,
+  PipelineStep,
+  PromptCustomization,
+  ModelDefinition,
+  ServerLogLevel,
+  EventHook,
+  NtfyEndpointConfig,
+  ClaudeApiProfile,
+  ClaudeCompatibleProvider,
+  SidebarStyle,
+  ThinkingLevel,
+  ReasoningEffort,
+  FeatureTemplate,
+} from '@automaker/types';
+
+import type {
+  ViewMode,
+  ThemeMode,
+  BoardViewMode,
+  KeyboardShortcuts,
+  BackgroundSettings,
+} from './ui-types';
+import type { ApiKeys } from './settings-types';
+import type { ChatMessage, ChatSession } from './chat-types';
+import type { TerminalState, TerminalPanelContent, PersistedTerminalState } from './terminal-types';
+import type { Feature, ProjectAnalysis } from './project-types';
+import type { ClaudeUsage, CodexUsage, ZaiUsage, GeminiUsage } from './usage-types';
+
+/** State for worktree init script execution */
+export interface InitScriptState {
+  status: 'idle' | 'running' | 'success' | 'failed';
+  branch: string;
+  output: string[];
+  error?: string;
+}
+
+export interface AutoModeActivity {
+  id: string;
+  featureId: string;
+  timestamp: Date;
+  type:
+    | 'start'
+    | 'progress'
+    | 'tool'
+    | 'complete'
+    | 'error'
+    | 'planning'
+    | 'action'
+    | 'verification';
+  message: string;
+  tool?: string;
+  passes?: boolean;
+  phase?: 'planning' | 'action' | 'verification';
+  errorType?: 'authentication' | 'execution';
+}
+
+export interface AppState {
+  // Project state
+  projects: Project[];
+  currentProject: Project | null;
+  trashedProjects: TrashedProject[];
+  projectHistory: string[]; // Array of project IDs in MRU order (most recent first)
+  projectHistoryIndex: number; // Current position in project history for cycling
+
+  // View state
+  currentView: ViewMode;
+  sidebarOpen: boolean;
+  sidebarStyle: SidebarStyle; // 'unified' (modern) or 'discord' (classic two-sidebar layout)
+  collapsedNavSections: Record<string, boolean>; // Collapsed state of nav sections (key: section label)
+  mobileSidebarHidden: boolean; // Completely hides sidebar on mobile
+
+  // Agent Session state (per-project, keyed by project path)
+  lastSelectedSessionByProject: Record<string, string>; // projectPath -> sessionId
+  // Agent model selection (per-session, keyed by sessionId)
+  agentModelBySession: Record<string, PhaseModelEntry>; // sessionId -> model selection
+
+  // Theme
+  theme: ThemeMode;
+
+  // Fonts (global defaults)
+  fontFamilySans: string | null; // null = use default Geist Sans
+  fontFamilyMono: string | null; // null = use default Geist Mono
+
+  // Features/Kanban
+  features: Feature[];
+
+  // App spec
+  appSpec: string;
+
+  // IPC status
+  ipcConnected: boolean;
+
+  // API Keys
+  apiKeys: ApiKeys;
+
+  // Chat Sessions
+  chatSessions: ChatSession[];
+  currentChatSession: ChatSession | null;
+  chatHistoryOpen: boolean;
+
+  // Auto Mode (per-worktree state, keyed by "${projectId}::${branchName ?? '__main__'}")
+  autoModeByWorktree: Record<
+    string,
+    {
+      isRunning: boolean;
+      runningTasks: string[]; // Feature IDs being worked on
+      branchName: string | null; // null = main worktree
+      maxConcurrency?: number; // Maximum concurrent features for this worktree (defaults to 3)
+    }
+  >;
+  // Features that recently completed (via auto_mode_feature_complete event)
+  // Used to prevent race condition where completed features briefly appear in backlog
+  // due to stale cache data. Cleared when features are refetched.
+  recentlyCompletedFeatures: Set<string>;
+  autoModeActivityLog: AutoModeActivity[];
+  maxConcurrency: number; // Legacy: Maximum number of concurrent agent tasks (deprecated, use per-worktree maxConcurrency)
+
+  // Kanban Card Display Settings
+  boardViewMode: BoardViewMode; // Whether to show kanban or dependency graph view
+
+  // Feature Default Settings
+  defaultSkipTests: boolean; // Default value for skip tests when creating new features
+  enableDependencyBlocking: boolean; // When true, show blocked badges and warnings for features with incomplete dependencies (default: true)
+  skipVerificationInAutoMode: boolean; // When true, auto-mode grabs features even if dependencies are not verified (only checks they're not running)
+  enableAiCommitMessages: boolean; // When true, auto-generate commit messages using AI when opening commit dialog
+  mergePostAction: 'commit' | 'manual' | null; // User's preferred action after a clean merge (null = ask every time)
+  planUseSelectedWorktreeBranch: boolean; // When true, Plan dialog creates features on the currently selected worktree branch
+  addFeatureUseSelectedWorktreeBranch: boolean; // When true, Add Feature dialog defaults to custom mode with selected worktree branch
+
+  // Worktree Settings
+  useWorktrees: boolean; // Whether to use git worktree isolation for features (default: true)
+
+  // User-managed Worktrees (per-project)
+  // projectPath -> { path: worktreePath or null for main, branch: branch name }
+  currentWorktreeByProject: Record<string, { path: string | null; branch: string }>;
+  worktreesByProject: Record<
+    string,
+    Array<{
+      path: string;
+      branch: string;
+      isMain: boolean;
+      isCurrent: boolean;
+      hasWorktree: boolean;
+      hasChanges?: boolean;
+      changedFilesCount?: number;
+    }>
+  >;
+
+  // Keyboard Shortcuts
+  keyboardShortcuts: KeyboardShortcuts; // User-defined keyboard shortcuts
+
+  // Audio Settings
+  muteDoneSound: boolean; // When true, mute the notification sound when agents complete (default: false)
+
+  // Splash Screen Settings
+  disableSplashScreen: boolean; // When true, skip showing the splash screen overlay on startup
+
+  // Board Card Sorting (global default)
+  defaultSortNewestCardOnTop: boolean; // Global default: sort latest card on top in board columns and list view
+
+  // Server Log Level Settings
+  serverLogLevel: ServerLogLevel; // Log level for the API server (error, warn, info, debug)
+  enableRequestLogging: boolean; // Enable HTTP request logging (Morgan)
+
+  // Developer Tools Settings
+  showQueryDevtools: boolean; // Show React Query DevTools panel (only in development mode)
+
+  // Enhancement Model Settings
+  enhancementModel: ModelAlias; // Model used for feature enhancement (default: sonnet)
+
+  // Validation Model Settings
+  validationModel: ModelAlias; // Model used for GitHub issue validation (default: opus)
+
+  // Phase Model Settings - per-phase AI model configuration
+  phaseModels: PhaseModelConfig;
+  favoriteModels: string[];
+
+  // Default thinking/reasoning levels for two-stage model selector primary button
+  defaultThinkingLevel: ThinkingLevel;
+  defaultReasoningEffort: ReasoningEffort;
+
+  // Default max turns for agent execution (1-2000)
+  defaultMaxTurns: number;
+
+  // Cursor CLI Settings (global)
+  enabledCursorModels: CursorModelId[]; // Which Cursor models are available in feature modal
+  cursorDefaultModel: CursorModelId; // Default Cursor model selection
+
+  // Codex CLI Settings (global)
+  enabledCodexModels: CodexModelId[]; // Which Codex models are available in feature modal
+  codexDefaultModel: CodexModelId; // Default Codex model selection
+  codexAutoLoadAgents: boolean; // Auto-load .codex/AGENTS.md files
+  codexSandboxMode: 'read-only' | 'workspace-write' | 'danger-full-access'; // Sandbox policy
+  codexApprovalPolicy: 'untrusted' | 'on-failure' | 'on-request' | 'never'; // Approval policy
+  codexEnableWebSearch: boolean; // Enable web search capability
+  codexEnableImages: boolean; // Enable image processing
+  codexAdditionalDirs: string[]; // Additional directories with write access (--add-dir flags)
+  codexThreadId: string | undefined; // Last thread ID for session resumption
+
+  // OpenCode CLI Settings (global)
+  // Static OpenCode settings are persisted via SETTINGS_FIELDS_TO_SYNC
+  enabledOpencodeModels: OpencodeModelId[]; // Which static OpenCode models are available
+  opencodeDefaultModel: OpencodeModelId; // Default OpenCode model selection
+  // Dynamic models are session-only (not persisted) because they're discovered at runtime
+  // from `opencode models` CLI and depend on current provider authentication state
+  dynamicOpencodeModels: ModelDefinition[]; // Dynamically discovered models from OpenCode CLI
+  enabledDynamicModelIds: string[]; // Which dynamic models are enabled
+  knownDynamicModelIds: string[]; // All dynamic model IDs ever seen (used to avoid re-enabling explicitly deselected models)
+  cachedOpencodeProviders: Array<{
+    id: string;
+    name: string;
+    authenticated: boolean;
+    authMethod?: string;
+  }>; // Cached providers
+  opencodeModelsLoading: boolean; // Whether OpenCode models are being fetched
+  opencodeModelsError: string | null; // Error message if fetch failed
+  opencodeModelsLastFetched: number | null; // Timestamp of last successful fetch
+  opencodeModelsLastFailedAt: number | null; // Timestamp of last failed fetch
+
+  // Gemini CLI Settings (global)
+  enabledGeminiModels: GeminiModelId[]; // Which Gemini models are available in feature modal
+  geminiDefaultModel: GeminiModelId; // Default Gemini model selection
+
+  // Copilot SDK Settings (global)
+  enabledCopilotModels: CopilotModelId[]; // Which Copilot models are available in feature modal
+  copilotDefaultModel: CopilotModelId; // Default Copilot model selection
+
+  // Provider Visibility Settings
+  disabledProviders: ModelProvider[]; // Providers that are disabled and hidden from dropdowns
+
+  // Claude Agent SDK Settings
+  autoLoadClaudeMd: boolean; // Auto-load CLAUDE.md files using SDK's settingSources option
+  useClaudeCodeSystemPrompt: boolean; // Use Claude Code's built-in system prompt as the base
+  skipSandboxWarning: boolean; // Skip the sandbox environment warning dialog on startup
+
+  // MCP Servers
+  mcpServers: MCPServerConfig[]; // List of configured MCP servers for agent use
+
+  // Editor Configuration
+  defaultEditorCommand: string | null; // Default editor for "Open In" action
+
+  // File Editor Settings
+  editorFontSize: number; // Font size for file editor (default: 13)
+  editorFontFamily: string; // Font family for file editor (default: 'default' = use theme mono font)
+  editorAutoSave: boolean; // Enable auto-save for file editor (default: false)
+  editorAutoSaveDelay: number; // Auto-save delay in milliseconds (default: 1000)
+
+  // Terminal Configuration
+  defaultTerminalId: string | null; // Default external terminal for "Open In Terminal" action (null = integrated)
+
+  // Skills Configuration
+  enableSkills: boolean; // Enable Skills functionality (loads from .claude/skills/ directories)
+  skillsSources: Array<'user' | 'project'>; // Which directories to load Skills from
+
+  // Subagents Configuration
+  enableSubagents: boolean; // Enable Custom Subagents functionality (loads from .claude/agents/ directories)
+  subagentsSources: Array<'user' | 'project'>; // Which directories to load Subagents from
+
+  // Prompt Customization
+  promptCustomization: PromptCustomization; // Custom prompts for Auto Mode, Agent, Backlog Plan, Enhancement
+
+  // Event Hooks
+  eventHooks: EventHook[]; // Event hooks for custom commands or webhooks
+
+  // Ntfy.sh Notification Endpoints
+  ntfyEndpoints: NtfyEndpointConfig[]; // Configured ntfy.sh endpoints for push notifications
+
+  // Feature Templates
+  featureTemplates: FeatureTemplate[]; // Feature templates for quick task creation
+
+  // Claude-Compatible Providers (new system)
+  claudeCompatibleProviders: ClaudeCompatibleProvider[]; // Providers that expose models to dropdowns
+
+  // Claude API Profiles (deprecated - kept for backward compatibility)
+  claudeApiProfiles: ClaudeApiProfile[]; // Claude-compatible API endpoint profiles
+  activeClaudeApiProfileId: string | null; // Active profile ID (null = use direct Anthropic API)
+
+  // Project Analysis
+  projectAnalysis: ProjectAnalysis | null;
+  isAnalyzing: boolean;
+
+  // Board Background Settings (per-project, keyed by project path)
+  boardBackgroundByProject: Record<string, BackgroundSettings>;
+
+  // Theme Preview (for hover preview in theme selectors)
+  previewTheme: ThemeMode | null;
+
+  // Terminal state
+  terminalState: TerminalState;
+
+  // Terminal layout persistence (per-project, keyed by project path)
+  // Stores the tab/split structure so it can be restored when switching projects
+  terminalLayoutByProject: Record<string, PersistedTerminalState>;
+
+  // Spec Creation State (per-project, keyed by project path)
+  // Tracks which project is currently having its spec generated
+  specCreatingForProject: string | null;
+
+  defaultPlanningMode: PlanningMode;
+  defaultRequirePlanApproval: boolean;
+  defaultFeatureModel: PhaseModelEntry;
+
+  // Plan Approval State
+  // When a plan requires user approval, this holds the pending approval details
+  pendingPlanApproval: {
+    featureId: string;
+    projectPath: string;
+    planContent: string;
+    planningMode: 'lite' | 'spec' | 'full';
+  } | null;
+
+  // Claude Usage Tracking
+  claudeRefreshInterval: number; // Refresh interval in seconds (default: 60)
+  claudeUsage: ClaudeUsage | null;
+  claudeUsageLastUpdated: number | null;
+
+  // Codex Usage Tracking
+  codexUsage: CodexUsage | null;
+  codexUsageLastUpdated: number | null;
+
+  // z.ai Usage Tracking
+  zaiUsage: ZaiUsage | null;
+  zaiUsageLastUpdated: number | null;
+
+  // Gemini Usage Tracking
+  geminiUsage: GeminiUsage | null;
+  geminiUsageLastUpdated: number | null;
+
+  // Codex Models (dynamically fetched)
+  codexModels: Array<{
+    id: string;
+    label: string;
+    description: string;
+    hasThinking: boolean;
+    supportsVision: boolean;
+    tier: 'premium' | 'standard' | 'basic';
+    isDefault: boolean;
+  }>;
+  codexModelsLoading: boolean;
+  codexModelsError: string | null;
+  codexModelsLastFetched: number | null;
+  codexModelsLastFailedAt: number | null;
+
+  // Pipeline Configuration (per-project, keyed by project path)
+  pipelineConfigByProject: Record<string, PipelineConfig>;
+
+  // Worktree Panel Visibility (per-project, keyed by project path)
+  // Whether the worktree panel row is visible (default: true)
+  worktreePanelVisibleByProject: Record<string, boolean>;
+
+  // Init Script Indicator Visibility (per-project, keyed by project path)
+  // Whether to show the floating init script indicator panel (default: true)
+  showInitScriptIndicatorByProject: Record<string, boolean>;
+
+  // Default Delete Branch With Worktree (per-project, keyed by project path)
+  // Whether to default the "delete branch" checkbox when deleting a worktree (default: false)
+  defaultDeleteBranchByProject: Record<string, boolean>;
+
+  // Auto-dismiss Init Script Indicator (per-project, keyed by project path)
+  // Whether to auto-dismiss the indicator after completion (default: true)
+  autoDismissInitScriptIndicatorByProject: Record<string, boolean>;
+
+  // Use Worktrees Override (per-project, keyed by project path)
+  // undefined = use global setting, true/false = project-specific override
+  useWorktreesByProject: Record<string, boolean | undefined>;
+
+  // Worktree Copy Files (per-project, keyed by project path)
+  // List of relative file paths to copy from project root into new worktrees
+  worktreeCopyFilesByProject: Record<string, string[]>;
+
+  // Worktree Display Settings (per-project, keyed by project path)
+  // Number of worktrees always visible (pinned) without expanding a dropdown (default: 1)
+  pinnedWorktreesCountByProject: Record<string, number>;
+  // Explicit list of branch names assigned to pinned slots (ordered)
+  // When set, these branches are shown in the pinned slots instead of using default ordering
+  pinnedWorktreeBranchesByProject: Record<string, string[]>;
+  // Minimum number of worktrees before the list collapses into a dropdown (default: 3)
+  worktreeDropdownThresholdByProject: Record<string, number>;
+  // Always use dropdown layout regardless of worktree count (default: false)
+  alwaysUseWorktreeDropdownByProject: Record<string, boolean>;
+
+  // UI State (previously in localStorage, now synced via API)
+  /** Whether worktree panel is collapsed in board view */
+  worktreePanelCollapsed: boolean;
+  /** Last directory opened in file picker */
+  lastProjectDir: string;
+  /** Recently accessed folders for quick access */
+  recentFolders: string[];
+
+  // Init Script State (keyed by "projectPath::branch" to support concurrent scripts)
+  initScriptState: Record<string, InitScriptState>;
+}
+
+export interface AppActions {
+  // Project actions
+  setProjects: (projects: Project[]) => void;
+  addProject: (project: Project) => void;
+  removeProject: (projectId: string) => void;
+  moveProjectToTrash: (projectId: string) => void;
+  restoreTrashedProject: (projectId: string) => void;
+  deleteTrashedProject: (projectId: string) => void;
+  emptyTrash: () => void;
+  setCurrentProject: (project: Project | null) => void;
+  upsertAndSetCurrentProject: (path: string, name: string, theme?: ThemeMode) => Project; // Upsert project by path and set as current
+  reorderProjects: (oldIndex: number, newIndex: number) => void;
+  cyclePrevProject: () => void; // Cycle back through project history (Q)
+  cycleNextProject: () => void; // Cycle forward through project history (E)
+  clearProjectHistory: () => void; // Clear history, keeping only current project
+  toggleProjectFavorite: (projectId: string) => void; // Toggle project favorite status
+  setProjectIcon: (projectId: string, icon: string | null) => void; // Set project icon (null to clear)
+  setProjectCustomIcon: (projectId: string, customIconPath: string | null) => void; // Set custom project icon image path (null to clear)
+  setProjectName: (projectId: string, name: string) => void; // Update project name
+
+  // View actions
+  setCurrentView: (view: ViewMode) => void;
+  toggleSidebar: () => void;
+  setSidebarOpen: (open: boolean) => void;
+  setSidebarStyle: (style: SidebarStyle) => void;
+  setCollapsedNavSections: (sections: Record<string, boolean>) => void;
+  toggleNavSection: (sectionLabel: string) => void;
+  toggleMobileSidebarHidden: () => void;
+  setMobileSidebarHidden: (hidden: boolean) => void;
+
+  // Theme actions
+  setTheme: (theme: ThemeMode) => void;
+  setProjectTheme: (projectId: string, theme: ThemeMode | null) => void; // Set per-project theme (null to clear)
+  getEffectiveTheme: () => ThemeMode; // Get the effective theme (project, global, or preview if set)
+  setPreviewTheme: (theme: ThemeMode | null) => void; // Set preview theme for hover preview (null to clear)
+
+  // Font actions (global + per-project override)
+  setFontSans: (fontFamily: string | null) => void; // Set global UI/sans font (null to clear)
+  setFontMono: (fontFamily: string | null) => void; // Set global code/mono font (null to clear)
+  setProjectFontSans: (projectId: string, fontFamily: string | null) => void; // Set per-project UI/sans font override (null = use global)
+  setProjectFontMono: (projectId: string, fontFamily: string | null) => void; // Set per-project code/mono font override (null = use global)
+  getEffectiveFontSans: () => string | null; // Get effective UI font (project override -> global -> null for default)
+  getEffectiveFontMono: () => string | null; // Get effective code font (project override -> global -> null for default)
+
+  // Claude API Profile actions (per-project override)
+  /** @deprecated Use setProjectPhaseModelOverride instead */
+  setProjectClaudeApiProfile: (projectId: string, profileId: string | null | undefined) => void; // Set per-project Claude API profile (undefined = use global, null = direct API, string = specific profile)
+
+  // Project Phase Model Overrides
+  setProjectPhaseModelOverride: (
+    projectId: string,
+    phase: PhaseModelKey,
+    entry: PhaseModelEntry | null // null = use global
+  ) => void;
+  clearAllProjectPhaseModelOverrides: (projectId: string) => void;
+
+  // Project Default Feature Model Override
+  setProjectDefaultFeatureModel: (
+    projectId: string,
+    entry: PhaseModelEntry | null // null = use global
+  ) => void;
+
+  // Feature actions
+  setFeatures: (features: Feature[]) => void;
+  updateFeature: (id: string, updates: Partial<Feature>) => void;
+  /** Apply the same updates to multiple features in a single store mutation. */
+  batchUpdateFeatures: (ids: string[], updates: Partial<Feature>) => void;
+  addFeature: (feature: Omit<Feature, 'id'> & Partial<Pick<Feature, 'id'>>) => Feature;
+  removeFeature: (id: string) => void;
+  moveFeature: (id: string, newStatus: Feature['status']) => void;
+
+  // App spec actions
+  setAppSpec: (spec: string) => void;
+
+  // IPC actions
+  setIpcConnected: (connected: boolean) => void;
+
+  // API Keys actions
+  setApiKeys: (keys: Partial<ApiKeys>) => void;
+
+  // Chat Session actions
+  createChatSession: (title?: string) => ChatSession;
+  updateChatSession: (sessionId: string, updates: Partial<ChatSession>) => void;
+  addMessageToSession: (sessionId: string, message: ChatMessage) => void;
+  setCurrentChatSession: (session: ChatSession | null) => void;
+  archiveChatSession: (sessionId: string) => void;
+  unarchiveChatSession: (sessionId: string) => void;
+  deleteChatSession: (sessionId: string) => void;
+  setChatHistoryOpen: (open: boolean) => void;
+  toggleChatHistory: () => void;
+
+  // Auto Mode actions (per-worktree)
+  setAutoModeRunning: (
+    projectId: string,
+    branchName: string | null,
+    running: boolean,
+    maxConcurrency?: number,
+    runningTasks?: string[]
+  ) => void;
+  addRunningTask: (projectId: string, branchName: string | null, taskId: string) => void;
+  removeRunningTask: (projectId: string, branchName: string | null, taskId: string) => void;
+  clearRunningTasks: (projectId: string, branchName: string | null) => void;
+  getAutoModeState: (
+    projectId: string,
+    branchName: string | null
+  ) => {
+    isRunning: boolean;
+    runningTasks: string[];
+    branchName: string | null;
+    maxConcurrency?: number;
+  };
+  /** Helper to generate worktree key from projectId and branchName */
+  getWorktreeKey: (projectId: string, branchName: string | null) => string;
+  addAutoModeActivity: (activity: Omit<AutoModeActivity, 'id' | 'timestamp'>) => void;
+  clearAutoModeActivity: () => void;
+  // Recently completed features - prevents race condition with stale cache
+  addRecentlyCompletedFeature: (featureId: string) => void;
+  clearRecentlyCompletedFeatures: () => void;
+  setMaxConcurrency: (max: number) => void; // Legacy: kept for backward compatibility
+  getMaxConcurrencyForWorktree: (projectId: string, branchName: string | null) => number;
+  setMaxConcurrencyForWorktree: (
+    projectId: string,
+    branchName: string | null,
+    maxConcurrency: number
+  ) => void;
+
+  // Kanban Card Settings actions
+  setBoardViewMode: (mode: BoardViewMode) => void;
+
+  // Feature Default Settings actions
+  setDefaultSkipTests: (skip: boolean) => void;
+  setEnableDependencyBlocking: (enabled: boolean) => void;
+  setSkipVerificationInAutoMode: (enabled: boolean) => Promise<void>;
+  setEnableAiCommitMessages: (enabled: boolean) => Promise<void>;
+  setMergePostAction: (action: 'commit' | 'manual' | null) => Promise<void>;
+  setPlanUseSelectedWorktreeBranch: (enabled: boolean) => Promise<void>;
+  setAddFeatureUseSelectedWorktreeBranch: (enabled: boolean) => Promise<void>;
+
+  // Worktree Settings actions
+  setUseWorktrees: (enabled: boolean) => void;
+  setCurrentWorktree: (projectPath: string, worktreePath: string | null, branch: string) => void;
+  setWorktrees: (
+    projectPath: string,
+    worktrees: Array<{
+      path: string;
+      branch: string;
+      isMain: boolean;
+      isCurrent: boolean;
+      hasWorktree: boolean;
+      hasChanges?: boolean;
+      changedFilesCount?: number;
+    }>
+  ) => void;
+  getCurrentWorktree: (projectPath: string) => { path: string | null; branch: string } | null;
+  getWorktrees: (projectPath: string) => Array<{
+    path: string;
+    branch: string;
+    isMain: boolean;
+    isCurrent: boolean;
+    hasWorktree: boolean;
+    hasChanges?: boolean;
+    changedFilesCount?: number;
+  }>;
+  isPrimaryWorktreeBranch: (projectPath: string, branchName: string) => boolean;
+  getPrimaryWorktreeBranch: (projectPath: string) => string | null;
+
+  // Keyboard Shortcuts actions
+  setKeyboardShortcut: (key: keyof KeyboardShortcuts, value: string) => void;
+  setKeyboardShortcuts: (shortcuts: Partial<KeyboardShortcuts>) => void;
+  resetKeyboardShortcuts: () => void;
+
+  // Audio Settings actions
+  setMuteDoneSound: (muted: boolean) => void;
+
+  // Splash Screen actions
+  setDisableSplashScreen: (disabled: boolean) => void;
+
+  // Board Card Sorting (global default) actions
+  setDefaultSortNewestCardOnTop: (enabled: boolean) => void;
+
+  // Server Log Level actions
+  setServerLogLevel: (level: ServerLogLevel) => void;
+  setEnableRequestLogging: (enabled: boolean) => void;
+
+  // Developer Tools actions
+  setShowQueryDevtools: (show: boolean) => void;
+
+  // Enhancement Model actions
+  setEnhancementModel: (model: ModelAlias) => void;
+
+  // Validation Model actions
+  setValidationModel: (model: ModelAlias) => void;
+
+  // Phase Model actions
+  setPhaseModel: (phase: PhaseModelKey, entry: PhaseModelEntry) => Promise<void>;
+  setPhaseModels: (models: Partial<PhaseModelConfig>) => Promise<void>;
+  resetPhaseModels: () => Promise<void>;
+  toggleFavoriteModel: (modelId: string) => void;
+  setDefaultThinkingLevel: (level: ThinkingLevel) => void;
+  setDefaultReasoningEffort: (effort: ReasoningEffort) => void;
+  setDefaultMaxTurns: (maxTurns: number) => void;
+
+  // Cursor CLI Settings actions
+  setEnabledCursorModels: (models: CursorModelId[]) => void;
+  setCursorDefaultModel: (model: CursorModelId) => void;
+  toggleCursorModel: (model: CursorModelId, enabled: boolean) => void;
+
+  // Codex CLI Settings actions
+  setEnabledCodexModels: (models: CodexModelId[]) => void;
+  setCodexDefaultModel: (model: CodexModelId) => void;
+  toggleCodexModel: (model: CodexModelId, enabled: boolean) => void;
+  setCodexAutoLoadAgents: (enabled: boolean) => Promise<void>;
+  setCodexSandboxMode: (
+    mode: 'read-only' | 'workspace-write' | 'danger-full-access'
+  ) => Promise<void>;
+  setCodexApprovalPolicy: (
+    policy: 'untrusted' | 'on-failure' | 'on-request' | 'never'
+  ) => Promise<void>;
+  setCodexEnableWebSearch: (enabled: boolean) => Promise<void>;
+  setCodexEnableImages: (enabled: boolean) => Promise<void>;
+
+  // OpenCode CLI Settings actions
+  // Note: setOpencodeDefaultModel, toggleOpencodeModel, setEnabledDynamicModelIds, and
+  // toggleDynamicModel return Promise<void> because they persist state to the server.
+  // TODO: harmonize other provider action types (e.g., setCursorDefaultModel, toggleCursorModel,
+  // setGeminiDefaultModel) to also return Promise<void> for consistent async persistence.
+  setEnabledOpencodeModels: (models: OpencodeModelId[]) => void;
+  setOpencodeDefaultModel: (model: OpencodeModelId) => Promise<void>;
+  toggleOpencodeModel: (model: OpencodeModelId, enabled: boolean) => Promise<void>;
+  setDynamicOpencodeModels: (models: ModelDefinition[]) => void;
+  setEnabledDynamicModelIds: (ids: string[]) => Promise<void>;
+  toggleDynamicModel: (modelId: string, enabled: boolean) => Promise<void>;
+  setCachedOpencodeProviders: (
+    providers: Array<{ id: string; name: string; authenticated: boolean; authMethod?: string }>
+  ) => void;
+
+  // Gemini CLI Settings actions
+  setEnabledGeminiModels: (models: GeminiModelId[]) => void;
+  setGeminiDefaultModel: (model: GeminiModelId) => void;
+  toggleGeminiModel: (model: GeminiModelId, enabled: boolean) => void;
+
+  // Copilot SDK Settings actions
+  setEnabledCopilotModels: (models: CopilotModelId[]) => void;
+  setCopilotDefaultModel: (model: CopilotModelId) => void;
+  toggleCopilotModel: (model: CopilotModelId, enabled: boolean) => void;
+
+  // Provider Visibility Settings actions
+  setDisabledProviders: (providers: ModelProvider[]) => void;
+  toggleProviderDisabled: (provider: ModelProvider, disabled: boolean) => void;
+  isProviderDisabled: (provider: ModelProvider) => boolean;
+
+  // Claude Agent SDK Settings actions
+  setAutoLoadClaudeMd: (enabled: boolean) => Promise<void>;
+  setUseClaudeCodeSystemPrompt: (enabled: boolean) => Promise<void>;
+  setSkipSandboxWarning: (skip: boolean) => Promise<void>;
+
+  // Editor Configuration actions
+  setDefaultEditorCommand: (command: string | null) => void;
+
+  // File Editor Settings actions
+  setEditorFontSize: (size: number) => void;
+  setEditorFontFamily: (fontFamily: string) => void;
+  setEditorAutoSave: (enabled: boolean) => void;
+  setEditorAutoSaveDelay: (delay: number) => void;
+
+  // Terminal Configuration actions
+  setDefaultTerminalId: (terminalId: string | null) => void;
+
+  // Prompt Customization actions
+  setPromptCustomization: (customization: PromptCustomization) => Promise<void>;
+
+  // Event Hook actions
+  setEventHooks: (hooks: EventHook[]) => Promise<void>;
+
+  // Ntfy Endpoint actions
+  setNtfyEndpoints: (endpoints: NtfyEndpointConfig[]) => Promise<void>;
+
+  // Feature Template actions
+  setFeatureTemplates: (templates: FeatureTemplate[]) => Promise<void>;
+  addFeatureTemplate: (template: FeatureTemplate) => Promise<void>;
+  updateFeatureTemplate: (id: string, updates: Partial<FeatureTemplate>) => Promise<void>;
+  deleteFeatureTemplate: (id: string) => Promise<void>;
+  reorderFeatureTemplates: (templateIds: string[]) => Promise<void>;
+
+  // Claude-Compatible Provider actions (new system)
+  addClaudeCompatibleProvider: (provider: ClaudeCompatibleProvider) => Promise<void>;
+  updateClaudeCompatibleProvider: (
+    id: string,
+    updates: Partial<ClaudeCompatibleProvider>
+  ) => Promise<void>;
+  deleteClaudeCompatibleProvider: (id: string) => Promise<void>;
+  setClaudeCompatibleProviders: (providers: ClaudeCompatibleProvider[]) => Promise<void>;
+  toggleClaudeCompatibleProviderEnabled: (id: string) => Promise<void>;
+
+  // Claude API Profile actions (deprecated - kept for backward compatibility)
+  addClaudeApiProfile: (profile: ClaudeApiProfile) => Promise<void>;
+  updateClaudeApiProfile: (id: string, updates: Partial<ClaudeApiProfile>) => Promise<void>;
+  deleteClaudeApiProfile: (id: string) => Promise<void>;
+  setActiveClaudeApiProfile: (id: string | null) => Promise<void>;
+  setClaudeApiProfiles: (profiles: ClaudeApiProfile[]) => Promise<void>;
+
+  // MCP Server actions
+  addMCPServer: (server: Omit<MCPServerConfig, 'id'>) => void;
+  updateMCPServer: (id: string, updates: Partial<MCPServerConfig>) => void;
+  removeMCPServer: (id: string) => void;
+  reorderMCPServers: (oldIndex: number, newIndex: number) => void;
+
+  // Project Analysis actions
+  setProjectAnalysis: (analysis: ProjectAnalysis | null) => void;
+  setIsAnalyzing: (analyzing: boolean) => void;
+  clearAnalysis: () => void;
+
+  // Agent Session actions
+  setLastSelectedSession: (projectPath: string, sessionId: string | null) => void;
+  getLastSelectedSession: (projectPath: string) => string | null;
+  // Agent model selection actions
+  setAgentModelForSession: (sessionId: string, model: PhaseModelEntry) => void;
+  getAgentModelForSession: (sessionId: string) => PhaseModelEntry | null;
+
+  // Board Background actions
+  setBoardBackground: (projectPath: string, imagePath: string | null) => void;
+  setCardOpacity: (projectPath: string, opacity: number) => void;
+  setColumnOpacity: (projectPath: string, opacity: number) => void;
+  setColumnBorderEnabled: (projectPath: string, enabled: boolean) => void;
+  getBoardBackground: (projectPath: string) => {
+    imagePath: string | null;
+    cardOpacity: number;
+    columnOpacity: number;
+    columnBorderEnabled: boolean;
+    cardGlassmorphism: boolean;
+    cardBorderEnabled: boolean;
+    cardBorderOpacity: number;
+    hideScrollbar: boolean;
+  };
+  setCardGlassmorphism: (projectPath: string, enabled: boolean) => void;
+  setCardBorderEnabled: (projectPath: string, enabled: boolean) => void;
+  setCardBorderOpacity: (projectPath: string, opacity: number) => void;
+  setHideScrollbar: (projectPath: string, hide: boolean) => void;
+  clearBoardBackground: (projectPath: string) => void;
+
+  // Terminal actions
+  setTerminalUnlocked: (unlocked: boolean, token?: string) => void;
+  setActiveTerminalSession: (sessionId: string | null) => void;
+  toggleTerminalMaximized: (sessionId: string) => void;
+  addTerminalToLayout: (
+    sessionId: string,
+    direction?: 'horizontal' | 'vertical',
+    targetSessionId?: string,
+    branchName?: string
+  ) => void;
+  removeTerminalFromLayout: (sessionId: string) => void;
+  swapTerminals: (sessionId1: string, sessionId2: string) => void;
+  clearTerminalState: () => void;
+  setTerminalPanelFontSize: (sessionId: string, fontSize: number) => void;
+  setTerminalDefaultFontSize: (fontSize: number) => void;
+  setTerminalDefaultRunScript: (script: string) => void;
+  setTerminalScreenReaderMode: (enabled: boolean) => void;
+  setTerminalFontFamily: (fontFamily: string) => void;
+  setTerminalScrollbackLines: (lines: number) => void;
+  setTerminalLineHeight: (lineHeight: number) => void;
+  setTerminalMaxSessions: (maxSessions: number) => void;
+  setTerminalLastActiveProjectPath: (projectPath: string | null) => void;
+  setOpenTerminalMode: (mode: 'newTab' | 'split') => void;
+  setTerminalBackgroundColor: (color: string | null) => void;
+  setTerminalForegroundColor: (color: string | null) => void;
+  addTerminalTab: (name?: string) => string;
+  removeTerminalTab: (tabId: string) => void;
+  setActiveTerminalTab: (tabId: string) => void;
+  renameTerminalTab: (tabId: string, name: string) => void;
+  reorderTerminalTabs: (fromTabId: string, toTabId: string) => void;
+  moveTerminalToTab: (sessionId: string, targetTabId: string | 'new') => void;
+  addTerminalToTab: (
+    sessionId: string,
+    tabId: string,
+    direction?: 'horizontal' | 'vertical',
+    branchName?: string
+  ) => void;
+  setTerminalTabLayout: (
+    tabId: string,
+    layout: TerminalPanelContent,
+    activeSessionId?: string
+  ) => void;
+  updateTerminalPanelSizes: (tabId: string, panelKeys: string[], sizes: number[]) => void;
+  saveTerminalLayout: (projectPath: string) => void;
+  getPersistedTerminalLayout: (projectPath: string) => PersistedTerminalState | null;
+  clearPersistedTerminalLayout: (projectPath: string) => void;
+
+  // Spec Creation actions
+  setSpecCreatingForProject: (projectPath: string | null) => void;
+  isSpecCreatingForProject: (projectPath: string) => boolean;
+
+  setDefaultPlanningMode: (mode: PlanningMode) => void;
+  setDefaultRequirePlanApproval: (require: boolean) => void;
+  setDefaultFeatureModel: (entry: PhaseModelEntry) => void;
+
+  // Plan Approval actions
+  setPendingPlanApproval: (
+    approval: {
+      featureId: string;
+      projectPath: string;
+      planContent: string;
+      planningMode: 'lite' | 'spec' | 'full';
+    } | null
+  ) => void;
+
+  // Pipeline actions
+  setPipelineConfig: (projectPath: string, config: PipelineConfig) => void;
+  getPipelineConfig: (projectPath: string) => PipelineConfig | null;
+  addPipelineStep: (
+    projectPath: string,
+    step: Omit<PipelineStep, 'id' | 'createdAt' | 'updatedAt'>
+  ) => PipelineStep;
+  updatePipelineStep: (
+    projectPath: string,
+    stepId: string,
+    updates: Partial<Omit<PipelineStep, 'id' | 'createdAt'>>
+  ) => void;
+  deletePipelineStep: (projectPath: string, stepId: string) => void;
+  reorderPipelineSteps: (projectPath: string, stepIds: string[]) => void;
+
+  // Worktree Panel Visibility actions (per-project)
+  setWorktreePanelVisible: (projectPath: string, visible: boolean) => void;
+  getWorktreePanelVisible: (projectPath: string) => boolean;
+
+  // Init Script Indicator Visibility actions (per-project)
+  setShowInitScriptIndicator: (projectPath: string, visible: boolean) => void;
+  getShowInitScriptIndicator: (projectPath: string) => boolean;
+
+  // Default Delete Branch actions (per-project)
+  setDefaultDeleteBranch: (projectPath: string, deleteBranch: boolean) => void;
+  getDefaultDeleteBranch: (projectPath: string) => boolean;
+
+  // Auto-dismiss Init Script Indicator actions (per-project)
+  setAutoDismissInitScriptIndicator: (projectPath: string, autoDismiss: boolean) => void;
+  getAutoDismissInitScriptIndicator: (projectPath: string) => boolean;
+
+  // Use Worktrees Override actions (per-project)
+  setProjectUseWorktrees: (projectPath: string, useWorktrees: boolean | null) => void; // null = use global
+  getProjectUseWorktrees: (projectPath: string) => boolean | undefined; // undefined = using global
+  getEffectiveUseWorktrees: (projectPath: string) => boolean; // Returns actual value (project or global fallback)
+
+  // Worktree Copy Files actions (per-project)
+  setWorktreeCopyFiles: (projectPath: string, files: string[]) => void;
+  getWorktreeCopyFiles: (projectPath: string) => string[];
+
+  // Worktree Display Settings actions (per-project)
+  setPinnedWorktreesCount: (projectPath: string, count: number) => void;
+  getPinnedWorktreesCount: (projectPath: string) => number;
+  setPinnedWorktreeBranches: (projectPath: string, branches: string[]) => void;
+  getPinnedWorktreeBranches: (projectPath: string) => string[];
+  swapPinnedWorktreeBranch: (projectPath: string, slotIndex: number, newBranch: string) => void;
+  setWorktreeDropdownThreshold: (projectPath: string, threshold: number) => void;
+  getWorktreeDropdownThreshold: (projectPath: string) => number;
+  setAlwaysUseWorktreeDropdown: (projectPath: string, always: boolean) => void;
+  getAlwaysUseWorktreeDropdown: (projectPath: string) => boolean;
+
+  // UI State actions (previously in localStorage, now synced via API)
+  setWorktreePanelCollapsed: (collapsed: boolean) => void;
+  setLastProjectDir: (dir: string) => void;
+  setRecentFolders: (folders: string[]) => void;
+  addRecentFolder: (folder: string) => void;
+
+  // Claude Usage Tracking actions
+  setClaudeRefreshInterval: (interval: number) => void;
+  setClaudeUsageLastUpdated: (timestamp: number) => void;
+  setClaudeUsage: (usage: ClaudeUsage | null) => void;
+
+  // Codex Usage Tracking actions
+  setCodexUsage: (usage: CodexUsage | null) => void;
+
+  // z.ai Usage Tracking actions
+  setZaiUsage: (usage: ZaiUsage | null) => void;
+
+  // Gemini Usage Tracking actions
+  setGeminiUsage: (usage: GeminiUsage | null, lastUpdated?: number) => void;
+
+  // Codex Models actions
+  fetchCodexModels: (forceRefresh?: boolean) => Promise<void>;
+  setCodexModels: (
+    models: Array<{
+      id: string;
+      label: string;
+      description: string;
+      hasThinking: boolean;
+      supportsVision: boolean;
+      tier: 'premium' | 'standard' | 'basic';
+      isDefault: boolean;
+    }>
+  ) => void;
+
+  // OpenCode Models actions
+  fetchOpencodeModels: (forceRefresh?: boolean) => Promise<void>;
+
+  // Init Script State actions (keyed by projectPath::branch to support concurrent scripts)
+  setInitScriptState: (
+    projectPath: string,
+    branch: string,
+    state: Partial<InitScriptState>
+  ) => void;
+  appendInitScriptOutput: (projectPath: string, branch: string, content: string) => void;
+  clearInitScriptState: (projectPath: string, branch: string) => void;
+  getInitScriptState: (projectPath: string, branch: string) => InitScriptState | null;
+  getInitScriptStatesForProject: (
+    projectPath: string
+  ) => Array<{ key: string; state: InitScriptState }>;
+
+  // Reset
+  reset: () => void;
+}
diff --git a/temp_repo/apps/ui/src/store/types/terminal-types.ts b/temp_repo/apps/ui/src/store/types/terminal-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a883871fec6f63b529a4c4c9744d766d8c47cebb
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/types/terminal-types.ts
@@ -0,0 +1,86 @@
+// Terminal panel layout types (recursive for splits)
+export type TerminalPanelContent =
+  | { type: 'terminal'; sessionId: string; size?: number; fontSize?: number; branchName?: string }
+  | { type: 'testRunner'; sessionId: string; size?: number; worktreePath: string }
+  | {
+      type: 'split';
+      id: string; // Stable ID for React key stability
+      direction: 'horizontal' | 'vertical';
+      panels: TerminalPanelContent[];
+      size?: number;
+    };
+
+// Terminal tab - each tab has its own layout
+export interface TerminalTab {
+  id: string;
+  name: string;
+  layout: TerminalPanelContent | null;
+}
+
+export interface TerminalState {
+  isUnlocked: boolean;
+  authToken: string | null;
+  tabs: TerminalTab[];
+  activeTabId: string | null;
+  activeSessionId: string | null;
+  maximizedSessionId: string | null; // Session ID of the maximized terminal pane (null if none)
+  defaultFontSize: number; // Default font size for new terminals
+  defaultRunScript: string; // Script to run when a new terminal is created (e.g., "claude" to start Claude Code)
+  screenReaderMode: boolean; // Enable screen reader accessibility mode
+  fontFamily: string; // Font family for terminal text
+  scrollbackLines: number; // Number of lines to keep in scrollback buffer
+  lineHeight: number; // Line height multiplier for terminal text
+  maxSessions: number; // Maximum concurrent terminal sessions (server setting)
+  lastActiveProjectPath: string | null; // Last project path to detect route changes vs project switches
+  openTerminalMode: 'newTab' | 'split'; // How to open terminals from "Open in Terminal" action
+  customBackgroundColor: string | null; // Custom background color override (hex color string, null = use theme default)
+  customForegroundColor: string | null; // Custom foreground/text color override (hex color string, null = use theme default)
+}
+
+// Persisted terminal layout - now includes sessionIds for reconnection
+// Used to restore terminal layout structure when switching projects
+export type PersistedTerminalPanel =
+  | { type: 'terminal'; size?: number; fontSize?: number; sessionId?: string; branchName?: string }
+  | { type: 'testRunner'; size?: number; sessionId?: string; worktreePath?: string }
+  | {
+      type: 'split';
+      id?: string; // Optional for backwards compatibility with older persisted layouts
+      direction: 'horizontal' | 'vertical';
+      panels: PersistedTerminalPanel[];
+      size?: number;
+    };
+
+// Helper to generate unique split IDs
+export const generateSplitId = () =>
+  `split-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+export interface PersistedTerminalTab {
+  id: string;
+  name: string;
+  layout: PersistedTerminalPanel | null;
+}
+
+export interface PersistedTerminalState {
+  tabs: PersistedTerminalTab[];
+  activeTabIndex: number; // Use index instead of ID since IDs are regenerated
+  defaultFontSize: number;
+  defaultRunScript?: string; // Optional to support existing persisted data
+  screenReaderMode?: boolean; // Optional to support existing persisted data
+  fontFamily?: string; // Optional to support existing persisted data
+  scrollbackLines?: number; // Optional to support existing persisted data
+  lineHeight?: number; // Optional to support existing persisted data
+}
+
+// Persisted terminal settings - stored globally (not per-project)
+export interface PersistedTerminalSettings {
+  defaultFontSize: number;
+  defaultRunScript: string;
+  screenReaderMode: boolean;
+  fontFamily: string;
+  scrollbackLines: number;
+  lineHeight: number;
+  maxSessions: number;
+  openTerminalMode: 'newTab' | 'split';
+  customBackgroundColor: string | null; // Custom background color override (hex color string, null = use theme default)
+  customForegroundColor: string | null; // Custom foreground/text color override (hex color string, null = use theme default)
+}
diff --git a/temp_repo/apps/ui/src/store/types/ui-types.ts b/temp_repo/apps/ui/src/store/types/ui-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e586d0157e38c93693bad2e0b6bf7314566921a2
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/types/ui-types.ts
@@ -0,0 +1,119 @@
+export type ViewMode =
+  | 'welcome'
+  | 'setup'
+  | 'spec'
+  | 'board'
+  | 'agent'
+  | 'settings'
+  | 'interview'
+  | 'context'
+  | 'running-agents'
+  | 'terminal'
+  | 'wiki'
+  | 'ideation';
+
+export type ThemeMode =
+  // Special modes
+  | 'system'
+  // Dark themes
+  | 'dark'
+  | 'retro'
+  | 'dracula'
+  | 'nord'
+  | 'monokai'
+  | 'tokyonight'
+  | 'solarized'
+  | 'gruvbox'
+  | 'catppuccin'
+  | 'onedark'
+  | 'synthwave'
+  | 'red'
+  | 'sunset'
+  | 'gray'
+  | 'forest'
+  | 'ocean'
+  | 'ember'
+  | 'ayu-dark'
+  | 'ayu-mirage'
+  | 'matcha'
+  // Light themes
+  | 'light'
+  | 'cream'
+  | 'solarizedlight'
+  | 'github'
+  | 'paper'
+  | 'rose'
+  | 'mint'
+  | 'lavender'
+  | 'sand'
+  | 'sky'
+  | 'peach'
+  | 'snow'
+  | 'sepia'
+  | 'gruvboxlight'
+  | 'nordlight'
+  | 'blossom'
+  | 'ayu-light'
+  | 'onelight'
+  | 'bluloco'
+  | 'feather';
+
+export type BoardViewMode = 'kanban' | 'graph';
+
+// Keyboard Shortcut with optional modifiers
+export interface ShortcutKey {
+  key: string; // The main key (e.g., "K", "N", "1")
+  shift?: boolean; // Shift key modifier
+  cmdCtrl?: boolean; // Cmd on Mac, Ctrl on Windows/Linux
+  alt?: boolean; // Alt/Option key modifier
+}
+
+// Board background settings
+export interface BackgroundSettings {
+  imagePath: string | null;
+  imageVersion?: number;
+  cardOpacity: number;
+  columnOpacity: number;
+  columnBorderEnabled: boolean;
+  cardGlassmorphism: boolean;
+  cardBorderEnabled: boolean;
+  cardBorderOpacity: number;
+  hideScrollbar: boolean;
+}
+
+// Keyboard Shortcuts - stored as strings like "K", "Shift+N", "Cmd+K"
+export interface KeyboardShortcuts {
+  // Navigation shortcuts
+  board: string;
+  graph: string;
+  agent: string;
+  spec: string;
+  context: string;
+  memory: string;
+  settings: string;
+  projectSettings: string;
+  terminal: string;
+  ideation: string;
+  notifications: string;
+  githubIssues: string;
+  githubPrs: string;
+
+  // UI shortcuts
+  toggleSidebar: string;
+
+  // Action shortcuts
+  addFeature: string;
+  addContextFile: string;
+  startNext: string;
+  newSession: string;
+  openProject: string;
+  projectPicker: string;
+  cyclePrevProject: string;
+  cycleNextProject: string;
+
+  // Terminal shortcuts
+  splitTerminalRight: string;
+  splitTerminalDown: string;
+  closeTerminal: string;
+  newTerminalTab: string;
+}
diff --git a/temp_repo/apps/ui/src/store/types/usage-types.ts b/temp_repo/apps/ui/src/store/types/usage-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0b6536f3a5b1fc3c48b451b4fae181a38952e15a
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/types/usage-types.ts
@@ -0,0 +1,136 @@
+// Claude Usage interface matching the server response
+export type ClaudeUsage = {
+  sessionTokensUsed: number;
+  sessionLimit: number;
+  sessionPercentage: number;
+  sessionResetTime: string;
+  sessionResetText: string;
+
+  weeklyTokensUsed: number;
+  weeklyLimit: number;
+  weeklyPercentage: number;
+  weeklyResetTime: string;
+  weeklyResetText: string;
+
+  sonnetWeeklyTokensUsed: number;
+  sonnetWeeklyPercentage: number;
+  sonnetResetText: string;
+
+  costUsed: number | null;
+  costLimit: number | null;
+  costCurrency: string | null;
+
+  lastUpdated: string;
+  userTimezone: string;
+};
+
+// Response type for Claude usage API (can be success or error)
+export type ClaudeUsageResponse = ClaudeUsage | { error: string; message?: string };
+
+// Codex Usage types
+export type CodexPlanType =
+  | 'free'
+  | 'plus'
+  | 'pro'
+  | 'team'
+  | 'business'
+  | 'enterprise'
+  | 'edu'
+  | 'unknown';
+
+export interface CodexRateLimitWindow {
+  limit: number;
+  used: number;
+  remaining: number;
+  usedPercent: number; // Percentage used (0-100)
+  windowDurationMins: number; // Duration in minutes
+  resetsAt: number; // Unix timestamp in seconds
+}
+
+export interface CodexUsage {
+  rateLimits: {
+    primary?: CodexRateLimitWindow;
+    secondary?: CodexRateLimitWindow;
+    planType?: CodexPlanType;
+  } | null;
+  lastUpdated: string;
+}
+
+// Response type for Codex usage API (can be success or error)
+export type CodexUsageResponse = CodexUsage | { error: string; message?: string };
+
+// z.ai Usage types
+export type ZaiPlanType = 'free' | 'basic' | 'standard' | 'professional' | 'enterprise' | 'unknown';
+
+export interface ZaiQuotaLimit {
+  limitType: 'TOKENS_LIMIT' | 'TIME_LIMIT' | string;
+  limit: number;
+  used: number;
+  remaining: number;
+  usedPercent: number; // Percentage used (0-100)
+  nextResetTime: number; // Epoch milliseconds
+}
+
+export interface ZaiUsage {
+  quotaLimits: {
+    tokens?: ZaiQuotaLimit;
+    mcp?: ZaiQuotaLimit;
+    planType: ZaiPlanType;
+  } | null;
+  lastUpdated: string;
+}
+
+// Response type for z.ai usage API (can be success or error)
+export type ZaiUsageResponse = ZaiUsage | { error: string; message?: string };
+
+// Gemini Usage types - uses internal Google Cloud quota API
+export interface GeminiQuotaBucket {
+  /** Model ID this quota applies to */
+  modelId: string;
+  /** Remaining fraction (0-1) */
+  remainingFraction: number;
+  /** ISO-8601 reset time */
+  resetTime: string;
+}
+
+/** Simplified quota info for a model tier (Flash or Pro) */
+export interface GeminiTierQuota {
+  /** Used percentage (0-100) */
+  usedPercent: number;
+  /** Remaining percentage (0-100) */
+  remainingPercent: number;
+  /** Reset time as human-readable string */
+  resetText?: string;
+  /** ISO-8601 reset time */
+  resetTime?: string;
+}
+
+export interface GeminiUsage {
+  /** Whether the user is authenticated (via CLI or API key) */
+  authenticated: boolean;
+  /** Authentication method: 'cli_login' | 'api_key' | 'api_key_env' | 'none' */
+  authMethod: string;
+  /** Usage percentage (100 - remainingFraction * 100) - overall most constrained */
+  usedPercent: number;
+  /** Remaining percentage - overall most constrained */
+  remainingPercent: number;
+  /** Reset time as human-readable string */
+  resetText?: string;
+  /** ISO-8601 reset time */
+  resetTime?: string;
+  /** Model ID with lowest remaining quota */
+  constrainedModel?: string;
+  /** Flash tier quota (aggregated from all flash models) */
+  flashQuota?: GeminiTierQuota;
+  /** Pro tier quota (aggregated from all pro models) */
+  proQuota?: GeminiTierQuota;
+  /** Raw quota buckets for detailed view */
+  quotaBuckets?: GeminiQuotaBucket[];
+  /** When this data was last fetched */
+  lastUpdated: string;
+  /** Optional error message */
+  error?: string;
+}
+
+// Response type for Gemini usage API (can be success or error)
+export type GeminiUsageResponse = GeminiUsage | { error: string; message?: string };
diff --git a/temp_repo/apps/ui/src/store/ui-cache-store.ts b/temp_repo/apps/ui/src/store/ui-cache-store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ce463c9528104b88e79b7b686b6df5fa23d08544
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/ui-cache-store.ts
@@ -0,0 +1,199 @@
+/**
+ * UI Cache Store - Persisted UI State for Instant Restore
+ *
+ * This lightweight Zustand store persists critical UI state to localStorage
+ * so that after a tab discard, the user sees their previous UI configuration
+ * instantly without waiting for the server.
+ *
+ * This is NOT a replacement for the app-store or the API-first settings sync.
+ * It's a fast cache layer that provides instant visual continuity during:
+ * - Tab discard recovery
+ * - Page reloads
+ * - App restarts
+ *
+ * The app-store remains the source of truth. This cache is reconciled
+ * when server settings are loaded (hydrateStoreFromSettings overwrites everything).
+ *
+ * Only stores UI-visual state that affects what the user sees immediately:
+ * - Selected project ID (to restore board context)
+ * - Sidebar state (open/closed, style)
+ * - View preferences (board view mode, collapsed sections)
+ */
+
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { sanitizeWorktreeByProject } from '@/lib/settings-utils';
+import { useAppStore } from '@/store/app-store';
+
+interface UICacheState {
+  /** ID of the currently selected project */
+  cachedProjectId: string | null;
+  /** Whether sidebar is open */
+  cachedSidebarOpen: boolean;
+  /** Sidebar style (unified or discord) */
+  cachedSidebarStyle: 'unified' | 'discord';
+  /** Whether worktree panel is collapsed */
+  cachedWorktreePanelCollapsed: boolean;
+  /** Collapsed nav sections */
+  cachedCollapsedNavSections: Record<string, boolean>;
+  /** Selected worktree per project (path + branch) for instant restore on PWA reload */
+  cachedCurrentWorktreeByProject: Record<string, { path: string | null; branch: string }>;
+}
+
+interface UICacheActions {
+  /** Update the cached UI state from the main app store */
+  updateFromAppStore: (state: Partial<UICacheState>) => void;
+}
+
+const STORE_NAME = 'automaker-ui-cache';
+
+export const useUICacheStore = create<UICacheState & UICacheActions>()(
+  persist(
+    (set) => ({
+      cachedProjectId: null,
+      cachedSidebarOpen: true,
+      cachedSidebarStyle: 'unified',
+      cachedWorktreePanelCollapsed: false,
+      cachedCollapsedNavSections: {},
+      cachedCurrentWorktreeByProject: {},
+
+      updateFromAppStore: (state) => set(state),
+    }),
+    {
+      name: STORE_NAME,
+      version: 2,
+      partialize: (state) => ({
+        cachedProjectId: state.cachedProjectId,
+        cachedSidebarOpen: state.cachedSidebarOpen,
+        cachedSidebarStyle: state.cachedSidebarStyle,
+        cachedWorktreePanelCollapsed: state.cachedWorktreePanelCollapsed,
+        cachedCollapsedNavSections: state.cachedCollapsedNavSections,
+        cachedCurrentWorktreeByProject: state.cachedCurrentWorktreeByProject,
+      }),
+      migrate: (persistedState: unknown, version: number) => {
+        const state = persistedState as Record<string, unknown>;
+        if (version < 2) {
+          // Migration from v1: add cachedCurrentWorktreeByProject
+          state.cachedCurrentWorktreeByProject = {};
+        }
+        return state as unknown as UICacheState & UICacheActions;
+      },
+    }
+  )
+);
+
+/**
+ * Sync critical UI state from the main app store to the UI cache.
+ * Call this whenever the app store changes to keep the cache up to date.
+ *
+ * This is intentionally a function (not a hook) so it can be called
+ * from store subscriptions without React.
+ */
+export function syncUICache(appState: {
+  currentProject?: { id: string } | null;
+  sidebarOpen?: boolean;
+  sidebarStyle?: 'unified' | 'discord';
+  worktreePanelCollapsed?: boolean;
+  collapsedNavSections?: Record<string, boolean>;
+  currentWorktreeByProject?: Record<string, { path: string | null; branch: string }>;
+}): void {
+  const update: Partial<UICacheState> = {};
+
+  if ('currentProject' in appState) {
+    update.cachedProjectId = appState.currentProject?.id ?? null;
+  }
+  if ('sidebarOpen' in appState) {
+    update.cachedSidebarOpen = appState.sidebarOpen;
+  }
+  if ('sidebarStyle' in appState) {
+    update.cachedSidebarStyle = appState.sidebarStyle;
+  }
+  if ('worktreePanelCollapsed' in appState) {
+    update.cachedWorktreePanelCollapsed = appState.worktreePanelCollapsed;
+  }
+  if ('collapsedNavSections' in appState) {
+    update.cachedCollapsedNavSections = appState.collapsedNavSections;
+  }
+  if ('currentWorktreeByProject' in appState && appState.currentWorktreeByProject) {
+    // Persist all valid worktree selections (both main branch and feature worktrees).
+    // Validation against actual worktrees happens at restore time in:
+    // 1. restoreFromUICache() - early restore with validation
+    // 2. use-worktrees.ts - runtime validation that resets to main if deleted
+    // This allows users to have their feature worktree selection persist across refreshes.
+    update.cachedCurrentWorktreeByProject = sanitizeWorktreeByProject(
+      appState.currentWorktreeByProject as Record<string, unknown>
+    );
+  }
+
+  if (Object.keys(update).length > 0) {
+    useUICacheStore.getState().updateFromAppStore(update);
+  }
+}
+
+/**
+ * Restore cached UI state into the main app store.
+ * Call this early during initialization — before server settings arrive —
+ * so the user sees their previous UI layout instantly on tab discard recovery
+ * or page reload, instead of a flash of default state.
+ *
+ * This is reconciled later when hydrateStoreFromSettings() overwrites
+ * the app store with authoritative server data.
+ *
+ * @param appStoreSetState - The setState function from the app store
+ */
+export function restoreFromUICache(
+  appStoreSetState: (state: Record<string, unknown>) => void
+): boolean {
+  const cache = useUICacheStore.getState();
+
+  // Only restore if we have meaningful cached data (not just defaults)
+  if (cache.cachedProjectId === null) {
+    return false;
+  }
+
+  // Attempt to resolve the cached project ID to a full project object.
+  // At early startup the projects array may be empty (server data not yet loaded),
+  // but if projects are already in the store (e.g. optimistic hydration has run)
+  // this will restore the project context immediately so tab-discard recovery
+  // does not lose the selected project when cached settings are missing.
+  const existingProjects = useAppStore.getState().projects;
+  const cachedProject = existingProjects.find((p) => p.id === cache.cachedProjectId) ?? null;
+
+  const stateUpdate: Record<string, unknown> = {
+    sidebarOpen: cache.cachedSidebarOpen,
+    sidebarStyle: cache.cachedSidebarStyle,
+    worktreePanelCollapsed: cache.cachedWorktreePanelCollapsed,
+    collapsedNavSections: cache.cachedCollapsedNavSections,
+  };
+
+  // Restore last selected worktree per project so the board doesn't
+  // reset to main branch after PWA memory eviction or tab discard.
+  //
+  // Restore all valid worktree selections (both main branch and feature worktrees).
+  // The validation effect in use-worktrees.ts will handle resetting to main branch
+  // if the cached worktree no longer exists when worktree data loads.
+  if (
+    cache.cachedCurrentWorktreeByProject &&
+    Object.keys(cache.cachedCurrentWorktreeByProject).length > 0
+  ) {
+    // Validate structure only - keep both null (main) and non-null (worktree) paths
+    // Runtime validation in use-worktrees.ts handles deleted worktrees gracefully
+    const sanitized = sanitizeWorktreeByProject(
+      cache.cachedCurrentWorktreeByProject as Record<string, unknown>
+    );
+    if (Object.keys(sanitized).length > 0) {
+      stateUpdate.currentWorktreeByProject = sanitized;
+    }
+  }
+
+  // Restore the project context when the project object is available.
+  // When projects are not yet loaded (empty array), currentProject remains
+  // null and will be properly set later by hydrateStoreFromSettings().
+  if (cachedProject !== null) {
+    stateUpdate.currentProject = cachedProject;
+  }
+
+  appStoreSetState(stateUpdate);
+
+  return true;
+}
diff --git a/temp_repo/apps/ui/src/store/utils/index.ts b/temp_repo/apps/ui/src/store/utils/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1c9cb7011e8009113cac2e7eed348434d8886be8
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/utils/index.ts
@@ -0,0 +1,13 @@
+// Theme utilities (PUBLIC)
+export {
+  THEME_STORAGE_KEY,
+  getStoredTheme,
+  getStoredFontSans,
+  getStoredFontMono,
+} from './theme-utils';
+
+// Shortcut utilities (PUBLIC)
+export { parseShortcut, formatShortcut, DEFAULT_KEYBOARD_SHORTCUTS } from './shortcut-utils';
+
+// Usage utilities (PUBLIC)
+export { isClaudeUsageAtLimit } from './usage-utils';
diff --git a/temp_repo/apps/ui/src/store/utils/shortcut-utils.ts b/temp_repo/apps/ui/src/store/utils/shortcut-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3c82b1c89c4debaacbf3456526357f8f6c70759e
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/utils/shortcut-utils.ts
@@ -0,0 +1,117 @@
+import type { ShortcutKey, KeyboardShortcuts } from '../types/ui-types';
+
+// Helper to parse shortcut string to ShortcutKey object
+export function parseShortcut(shortcut: string | undefined | null): ShortcutKey {
+  if (!shortcut) return { key: '' };
+  const parts = shortcut.split('+').map((p) => p.trim());
+  const result: ShortcutKey = { key: parts[parts.length - 1] };
+
+  // Normalize common OS-specific modifiers (Cmd/Ctrl/Win/Super symbols) into cmdCtrl
+  for (let i = 0; i < parts.length - 1; i++) {
+    const modifier = parts[i].toLowerCase();
+    if (modifier === 'shift') result.shift = true;
+    else if (
+      modifier === 'cmd' ||
+      modifier === 'ctrl' ||
+      modifier === 'win' ||
+      modifier === 'super' ||
+      modifier === '⌘' ||
+      modifier === '^' ||
+      modifier === '⊞' ||
+      modifier === '◆'
+    )
+      result.cmdCtrl = true;
+    else if (modifier === 'alt' || modifier === 'opt' || modifier === 'option' || modifier === '⌥')
+      result.alt = true;
+  }
+
+  return result;
+}
+
+// Helper to format ShortcutKey to display string
+export function formatShortcut(shortcut: string | undefined | null, forDisplay = false): string {
+  if (!shortcut) return '';
+  const parsed = parseShortcut(shortcut);
+  const parts: string[] = [];
+
+  // Prefer User-Agent Client Hints when available; fall back to legacy
+  const platform: 'darwin' | 'win32' | 'linux' = (() => {
+    if (typeof navigator === 'undefined') return 'linux';
+
+    const uaPlatform = (
+      navigator as Navigator & { userAgentData?: { platform?: string } }
+    ).userAgentData?.platform?.toLowerCase?.();
+    const legacyPlatform = navigator.platform?.toLowerCase?.();
+    const platformString = uaPlatform || legacyPlatform || '';
+
+    if (platformString.includes('mac')) return 'darwin';
+    if (platformString.includes('win')) return 'win32';
+    return 'linux';
+  })();
+
+  // Primary modifier - OS-specific
+  if (parsed.cmdCtrl) {
+    if (forDisplay) {
+      parts.push(platform === 'darwin' ? '⌘' : platform === 'win32' ? '⊞' : '◆');
+    } else {
+      parts.push(platform === 'darwin' ? 'Cmd' : platform === 'win32' ? 'Win' : 'Super');
+    }
+  }
+
+  // Alt/Option
+  if (parsed.alt) {
+    parts.push(
+      forDisplay ? (platform === 'darwin' ? '⌥' : 'Alt') : platform === 'darwin' ? 'Opt' : 'Alt'
+    );
+  }
+
+  // Shift
+  if (parsed.shift) {
+    parts.push(forDisplay ? '⇧' : 'Shift');
+  }
+
+  parts.push(parsed.key.toUpperCase());
+
+  // Add spacing when displaying symbols
+  return parts.join(forDisplay ? ' ' : '+');
+}
+
+// Default keyboard shortcuts
+export const DEFAULT_KEYBOARD_SHORTCUTS: KeyboardShortcuts = {
+  // Navigation
+  board: 'K',
+  graph: 'H',
+  agent: 'A',
+  spec: 'D',
+  context: 'C',
+  memory: 'Y',
+  settings: 'S',
+  projectSettings: 'Shift+S',
+  terminal: 'T',
+  ideation: 'I',
+  notifications: 'X',
+  githubIssues: 'G',
+  githubPrs: 'R',
+
+  // UI
+  toggleSidebar: '`',
+
+  // Actions
+  // Note: Some shortcuts share the same key (e.g., "N" for addFeature, newSession)
+  // This is intentional as they are context-specific and only active in their respective views
+  addFeature: 'N', // Only active in board view
+  addContextFile: 'N', // Only active in context view
+  startNext: 'G', // Only active in board view
+  newSession: 'N', // Only active in agent view
+  openProject: 'O', // Global shortcut
+  projectPicker: 'P', // Global shortcut
+  cyclePrevProject: 'Q', // Global shortcut
+  cycleNextProject: 'E', // Global shortcut
+
+  // Terminal shortcuts (only active in terminal view)
+  // Using Alt modifier to avoid conflicts with both terminal signals AND browser shortcuts
+  splitTerminalRight: 'Alt+D',
+  splitTerminalDown: 'Alt+S',
+  closeTerminal: 'Alt+W',
+  newTerminalTab: 'Alt+T',
+};
diff --git a/temp_repo/apps/ui/src/store/utils/theme-utils.ts b/temp_repo/apps/ui/src/store/utils/theme-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8f67c6bfe4c1bf0b093d1345f021595a318659d6
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/utils/theme-utils.ts
@@ -0,0 +1,117 @@
+import { getItem, setItem, removeItem } from '@/lib/storage';
+import { DEFAULT_FONT_VALUE } from '@/config/ui-font-options';
+import type { Project } from '@/lib/electron';
+import type { ThemeMode } from '../types/ui-types';
+
+// LocalStorage keys for persistence (fallback when server settings aren't available)
+export const THEME_STORAGE_KEY = 'automaker:theme';
+const FONT_SANS_STORAGE_KEY = 'automaker:font-sans';
+const FONT_MONO_STORAGE_KEY = 'automaker:font-mono';
+
+/**
+ * Get the theme from localStorage as a fallback
+ * Used before server settings are loaded (e.g., on login/setup pages)
+ */
+export function getStoredTheme(): ThemeMode | null {
+  const stored = getItem(THEME_STORAGE_KEY);
+  if (stored) return stored as ThemeMode;
+
+  // Backwards compatibility: older versions stored theme inside the Zustand persist blob.
+  // We intentionally keep reading it as a fallback so users don't get a "default theme flash"
+  // on login/logged-out pages if THEME_STORAGE_KEY hasn't been written yet.
+  try {
+    const legacy = getItem('automaker-storage');
+    if (!legacy) return null;
+    interface LegacyStorageFormat {
+      state?: { theme?: string };
+      theme?: string;
+    }
+    const parsed = JSON.parse(legacy) as LegacyStorageFormat;
+    const theme = parsed.state?.theme ?? parsed.theme;
+    if (typeof theme === 'string' && theme.length > 0) {
+      return theme as ThemeMode;
+    }
+  } catch {
+    // Ignore legacy parse errors
+  }
+
+  return null;
+}
+
+/**
+ * Helper to get effective font value with validation
+ * Returns the font to use (project override -> global -> null for default)
+ * @param projectFont - The project-specific font override
+ * @param globalFont - The global font setting
+ * @param fontOptions - The list of valid font options for validation
+ */
+export function getEffectiveFont(
+  projectFont: string | undefined,
+  globalFont: string | null,
+  fontOptions: readonly { value: string; label: string }[]
+): string | null {
+  const isValidFont = (font: string | null | undefined): boolean => {
+    if (!font || font === DEFAULT_FONT_VALUE) return true;
+    return fontOptions.some((opt) => opt.value === font);
+  };
+
+  if (projectFont) {
+    if (isValidFont(projectFont)) {
+      return projectFont === DEFAULT_FONT_VALUE ? null : projectFont;
+    }
+    // Invalid project font -> fall through to check global font
+  }
+  if (!isValidFont(globalFont)) return null; // Fallback to default if font not in list
+  return globalFont === DEFAULT_FONT_VALUE ? null : globalFont;
+}
+
+/**
+ * Save theme to localStorage for immediate persistence
+ * This is used as a fallback when server settings can't be loaded
+ */
+export function saveThemeToStorage(theme: ThemeMode): void {
+  setItem(THEME_STORAGE_KEY, theme);
+}
+
+/**
+ * Get fonts from localStorage as a fallback
+ * Used before server settings are loaded (e.g., on login/setup pages)
+ */
+export function getStoredFontSans(): string | null {
+  return getItem(FONT_SANS_STORAGE_KEY);
+}
+
+export function getStoredFontMono(): string | null {
+  return getItem(FONT_MONO_STORAGE_KEY);
+}
+
+/**
+ * Save fonts to localStorage for immediate persistence
+ * This is used as a fallback when server settings can't be loaded
+ */
+export function saveFontSansToStorage(fontFamily: string | null): void {
+  if (fontFamily) {
+    setItem(FONT_SANS_STORAGE_KEY, fontFamily);
+  } else {
+    // Remove from storage if null (using default)
+    removeItem(FONT_SANS_STORAGE_KEY);
+  }
+}
+
+export function saveFontMonoToStorage(fontFamily: string | null): void {
+  if (fontFamily) {
+    setItem(FONT_MONO_STORAGE_KEY, fontFamily);
+  } else {
+    // Remove from storage if null (using default)
+    removeItem(FONT_MONO_STORAGE_KEY);
+  }
+}
+
+export function persistEffectiveThemeForProject(
+  project: Project | null,
+  fallbackTheme: ThemeMode
+): void {
+  const projectTheme = project?.theme as ThemeMode | undefined;
+  const themeToStore = projectTheme ?? fallbackTheme;
+  saveThemeToStorage(themeToStore);
+}
diff --git a/temp_repo/apps/ui/src/store/utils/usage-utils.ts b/temp_repo/apps/ui/src/store/utils/usage-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..014821534ac86d2582f0b264516b003989651c2c
--- /dev/null
+++ b/temp_repo/apps/ui/src/store/utils/usage-utils.ts
@@ -0,0 +1,135 @@
+import type { ClaudeUsage } from '../types/usage-types';
+
+/**
+ * Calculate the expected weekly usage percentage based on how far through the week we are.
+ * Claude's weekly usage resets every Thursday. Given the reset time (when the NEXT reset occurs),
+ * we can determine how much of the week has elapsed and therefore what percentage of the budget
+ * should have been used if usage were evenly distributed.
+ *
+ * @param weeklyResetTime - ISO date string for when the weekly usage next resets
+ * @returns The expected usage percentage (0-100), or null if the reset time is invalid
+ */
+export function getExpectedWeeklyPacePercentage(
+  weeklyResetTime: string | undefined
+): number | null {
+  if (!weeklyResetTime) return null;
+
+  try {
+    const resetDate = new Date(weeklyResetTime);
+    if (isNaN(resetDate.getTime())) return null;
+
+    const now = new Date();
+    const WEEK_MS = 7 * 24 * 60 * 60 * 1000;
+
+    // The week started 7 days before the reset
+    const weekStartDate = new Date(resetDate.getTime() - WEEK_MS);
+
+    // How far through the week are we?
+    const elapsed = now.getTime() - weekStartDate.getTime();
+    const fractionElapsed = elapsed / WEEK_MS;
+
+    // Clamp to 0-1 range
+    const clamped = Math.max(0, Math.min(1, fractionElapsed));
+
+    return clamped * 100;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Get a human-readable label for the pace status (ahead or behind expected usage).
+ *
+ * @param actualPercentage - The actual usage percentage (0-100)
+ * @param expectedPercentage - The expected usage percentage (0-100)
+ * @returns A string like "5% ahead of pace" or "10% behind pace", or null
+ */
+export function getPaceStatusLabel(
+  actualPercentage: number,
+  expectedPercentage: number | null
+): string | null {
+  if (expectedPercentage === null) return null;
+
+  const diff = Math.round(actualPercentage - expectedPercentage);
+
+  if (diff === 0) return 'On pace';
+  // Using more than expected = behind pace (bad)
+  if (diff > 0) return `${Math.abs(diff)}% behind pace`;
+  // Using less than expected = ahead of pace (good)
+  return `${Math.abs(diff)}% ahead of pace`;
+}
+
+/**
+ * Calculate the expected pace percentage for a Codex rate limit window based on how far
+ * through the window we are. This is a generic version of getExpectedWeeklyPacePercentage
+ * that works with any window duration.
+ *
+ * Only returns a value for windows >= 1 day (1440 minutes) since pace tracking isn't
+ * meaningful for short windows.
+ *
+ * @param resetsAt - Unix timestamp in seconds for when the window resets
+ * @param windowDurationMins - Window duration in minutes
+ * @returns The expected usage percentage (0-100), or null if not applicable
+ */
+export function getExpectedCodexPacePercentage(
+  resetsAt: number | undefined | null,
+  windowDurationMins: number | undefined | null
+): number | null {
+  // Only show pace for windows >= 1 day (1440 minutes)
+  if (!resetsAt || !windowDurationMins || windowDurationMins < 1440) return null;
+
+  try {
+    const resetDate = new Date(resetsAt * 1000);
+    if (isNaN(resetDate.getTime())) return null;
+
+    const now = new Date();
+    const windowMs = windowDurationMins * 60 * 1000;
+
+    // The window started windowDurationMins before the reset
+    const windowStartDate = new Date(resetDate.getTime() - windowMs);
+
+    // How far through the window are we?
+    const elapsed = now.getTime() - windowStartDate.getTime();
+    const fractionElapsed = elapsed / windowMs;
+
+    // Clamp to 0-1 range
+    const clamped = Math.max(0, Math.min(1, fractionElapsed));
+
+    return clamped * 100;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Check if Claude usage is at its limit (any of: session >= 100%, weekly >= 100%, OR cost >= limit)
+ * Returns true if any limit is reached, meaning auto mode should pause feature pickup.
+ */
+export function isClaudeUsageAtLimit(claudeUsage: ClaudeUsage | null): boolean {
+  if (!claudeUsage) {
+    // No usage data available - don't block
+    return false;
+  }
+
+  // Check session limit (5-hour window)
+  if (claudeUsage.sessionPercentage >= 100) {
+    return true;
+  }
+
+  // Check weekly limit
+  if (claudeUsage.weeklyPercentage >= 100) {
+    return true;
+  }
+
+  // Check cost limit (if configured)
+  if (
+    claudeUsage.costLimit !== null &&
+    claudeUsage.costLimit > 0 &&
+    claudeUsage.costUsed !== null &&
+    claudeUsage.costUsed >= claudeUsage.costLimit
+  ) {
+    return true;
+  }
+
+  return false;
+}
diff --git a/temp_repo/apps/ui/src/styles/font-imports.ts b/temp_repo/apps/ui/src/styles/font-imports.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e41b6d8ec021404e2f8871299c1fbe06d452b942
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/font-imports.ts
@@ -0,0 +1,254 @@
+/**
+ * Font Loading Strategy for Mobile PWA Performance
+ *
+ * Critical fonts (Zed Sans/Mono - used as Geist fallback) are loaded eagerly.
+ * All other fonts are lazy-loaded on demand when the user selects them
+ * in font customization settings. This dramatically reduces initial bundle
+ * size and speeds up mobile PWA loading.
+ *
+ * Font loading is split into:
+ * 1. Critical path: Zed fonts (default/fallback fonts) - loaded synchronously
+ * 2. Deferred path: All @fontsource fonts - loaded on-demand or after idle
+ */
+
+// Critical: Zed Fonts (default fallback) - loaded immediately
+import '@/assets/fonts/zed/zed-fonts.css';
+
+/**
+ * Registry of lazy-loadable font imports.
+ * Each font family maps to a function that dynamically imports its CSS files.
+ * This ensures fonts are only downloaded when actually needed.
+ */
+type FontLoader = () => Promise<void>;
+
+const fontLoaders: Record<string, FontLoader> = {
+  // Sans-serif / UI Fonts
+  Inter: async () => {
+    await Promise.all([
+      import('@fontsource/inter/400.css'),
+      import('@fontsource/inter/500.css'),
+      import('@fontsource/inter/600.css'),
+      import('@fontsource/inter/700.css'),
+    ]);
+  },
+  Roboto: async () => {
+    await Promise.all([
+      import('@fontsource/roboto/400.css'),
+      import('@fontsource/roboto/500.css'),
+      import('@fontsource/roboto/700.css'),
+    ]);
+  },
+  'Open Sans': async () => {
+    await Promise.all([
+      import('@fontsource/open-sans/400.css'),
+      import('@fontsource/open-sans/500.css'),
+      import('@fontsource/open-sans/600.css'),
+      import('@fontsource/open-sans/700.css'),
+    ]);
+  },
+  Montserrat: async () => {
+    await Promise.all([
+      import('@fontsource/montserrat/400.css'),
+      import('@fontsource/montserrat/500.css'),
+      import('@fontsource/montserrat/600.css'),
+      import('@fontsource/montserrat/700.css'),
+    ]);
+  },
+  Lato: async () => {
+    await Promise.all([import('@fontsource/lato/400.css'), import('@fontsource/lato/700.css')]);
+  },
+  Poppins: async () => {
+    await Promise.all([
+      import('@fontsource/poppins/400.css'),
+      import('@fontsource/poppins/500.css'),
+      import('@fontsource/poppins/600.css'),
+      import('@fontsource/poppins/700.css'),
+    ]);
+  },
+  Raleway: async () => {
+    await Promise.all([
+      import('@fontsource/raleway/400.css'),
+      import('@fontsource/raleway/500.css'),
+      import('@fontsource/raleway/600.css'),
+      import('@fontsource/raleway/700.css'),
+    ]);
+  },
+  'Work Sans': async () => {
+    await Promise.all([
+      import('@fontsource/work-sans/400.css'),
+      import('@fontsource/work-sans/500.css'),
+      import('@fontsource/work-sans/600.css'),
+      import('@fontsource/work-sans/700.css'),
+    ]);
+  },
+  'Source Sans 3': async () => {
+    await Promise.all([
+      import('@fontsource/source-sans-3/400.css'),
+      import('@fontsource/source-sans-3/500.css'),
+      import('@fontsource/source-sans-3/600.css'),
+      import('@fontsource/source-sans-3/700.css'),
+    ]);
+  },
+
+  // Monospace / Code Fonts
+  'Fira Code': async () => {
+    await Promise.all([
+      import('@fontsource/fira-code/400.css'),
+      import('@fontsource/fira-code/500.css'),
+      import('@fontsource/fira-code/600.css'),
+      import('@fontsource/fira-code/700.css'),
+    ]);
+  },
+  'JetBrains Mono': async () => {
+    await Promise.all([
+      import('@fontsource/jetbrains-mono/400.css'),
+      import('@fontsource/jetbrains-mono/500.css'),
+      import('@fontsource/jetbrains-mono/600.css'),
+      import('@fontsource/jetbrains-mono/700.css'),
+    ]);
+  },
+  'Cascadia Code': async () => {
+    await Promise.all([
+      import('@fontsource/cascadia-code/400.css'),
+      import('@fontsource/cascadia-code/600.css'),
+      import('@fontsource/cascadia-code/700.css'),
+    ]);
+  },
+  Iosevka: async () => {
+    await Promise.all([
+      import('@fontsource/iosevka/400.css'),
+      import('@fontsource/iosevka/500.css'),
+      import('@fontsource/iosevka/600.css'),
+      import('@fontsource/iosevka/700.css'),
+    ]);
+  },
+  Inconsolata: async () => {
+    await Promise.all([
+      import('@fontsource/inconsolata/400.css'),
+      import('@fontsource/inconsolata/500.css'),
+      import('@fontsource/inconsolata/600.css'),
+      import('@fontsource/inconsolata/700.css'),
+    ]);
+  },
+  'Source Code Pro': async () => {
+    await Promise.all([
+      import('@fontsource/source-code-pro/400.css'),
+      import('@fontsource/source-code-pro/500.css'),
+      import('@fontsource/source-code-pro/600.css'),
+      import('@fontsource/source-code-pro/700.css'),
+    ]);
+  },
+  'IBM Plex Mono': async () => {
+    await Promise.all([
+      import('@fontsource/ibm-plex-mono/400.css'),
+      import('@fontsource/ibm-plex-mono/500.css'),
+      import('@fontsource/ibm-plex-mono/600.css'),
+      import('@fontsource/ibm-plex-mono/700.css'),
+    ]);
+  },
+};
+
+// Track which fonts have been loaded to avoid duplicate loading
+const loadedFonts = new Set<string>();
+
+/**
+ * Load a specific font family on demand.
+ * Returns immediately if the font is already loaded.
+ * Safe to call multiple times - font will only be loaded once.
+ */
+export async function loadFont(fontFamily: string): Promise<void> {
+  // Extract the primary font name from CSS font-family string
+  // e.g., "'JetBrains Mono', monospace" -> "JetBrains Mono"
+  const primaryFont = fontFamily
+    .split(',')[0]
+    .trim()
+    .replace(/^['"]|['"]$/g, '');
+
+  if (loadedFonts.has(primaryFont)) return;
+
+  const loader = fontLoaders[primaryFont];
+  if (loader) {
+    try {
+      await loader();
+      loadedFonts.add(primaryFont);
+    } catch (error) {
+      // Font loading failed silently - system fallback fonts will be used
+      console.warn(`Failed to load font: ${primaryFont}`, error);
+    }
+  }
+}
+
+/**
+ * Load fonts that the user has configured (from localStorage).
+ * Called during app initialization to ensure custom fonts are available
+ * before the first render completes.
+ */
+export function loadUserFonts(): void {
+  try {
+    const stored = localStorage.getItem('automaker-storage');
+    if (!stored) return;
+
+    const data = JSON.parse(stored);
+    const state = data?.state;
+
+    // Load globally configured fonts
+    if (state?.fontFamilySans && state.fontFamilySans !== 'default') {
+      loadFont(state.fontFamilySans);
+    }
+    if (state?.fontFamilyMono && state.fontFamilyMono !== 'default') {
+      loadFont(state.fontFamilyMono);
+    }
+
+    // Load current project's font overrides
+    const currentProject = state?.currentProject;
+    if (currentProject?.fontSans && currentProject.fontSans !== 'default') {
+      loadFont(currentProject.fontSans);
+    }
+    if (currentProject?.fontMono && currentProject.fontMono !== 'default') {
+      loadFont(currentProject.fontMono);
+    }
+  } catch {
+    // localStorage not available or parse error - ignore
+  }
+}
+
+/**
+ * Preload all available fonts during idle time.
+ * Called after the app is fully loaded to ensure font previews
+ * in settings work instantly.
+ */
+export function preloadAllFonts(): void {
+  const idleCallback =
+    typeof requestIdleCallback !== 'undefined'
+      ? requestIdleCallback
+      : (cb: () => void) => setTimeout(cb, 100);
+
+  // Load fonts in batches during idle periods to avoid blocking
+  const fontNames = Object.keys(fontLoaders);
+  let index = 0;
+
+  function loadNextBatch() {
+    const batchSize = 2; // Load 2 fonts per idle callback
+    const end = Math.min(index + batchSize, fontNames.length);
+
+    for (let i = index; i < end; i++) {
+      const fontName = fontNames[i];
+      if (!loadedFonts.has(fontName)) {
+        fontLoaders[fontName]()
+          .then(() => {
+            loadedFonts.add(fontName);
+          })
+          .catch(() => {
+            // Silently ignore preload failures
+          });
+      }
+    }
+
+    index = end;
+    if (index < fontNames.length) {
+      idleCallback(loadNextBatch);
+    }
+  }
+
+  idleCallback(loadNextBatch);
+}
diff --git a/temp_repo/apps/ui/src/styles/global.css b/temp_repo/apps/ui/src/styles/global.css
new file mode 100644
index 0000000000000000000000000000000000000000..4a1de822b9e0addda7f04f101be528d3892580e8
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/global.css
@@ -0,0 +1,1225 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+/* Dark themes */
+@custom-variant dark (&:is(.dark *));
+@custom-variant retro (&:is(.retro *));
+@custom-variant dracula (&:is(.dracula *));
+@custom-variant nord (&:is(.nord *));
+@custom-variant monokai (&:is(.monokai *));
+@custom-variant tokyonight (&:is(.tokyonight *));
+@custom-variant solarized (&:is(.solarized *));
+@custom-variant gruvbox (&:is(.gruvbox *));
+@custom-variant catppuccin (&:is(.catppuccin *));
+@custom-variant onedark (&:is(.onedark *));
+@custom-variant synthwave (&:is(.synthwave *));
+@custom-variant red (&:is(.red *));
+@custom-variant sunset (&:is(.sunset *));
+@custom-variant gray (&:is(.gray *));
+@custom-variant forest (&:is(.forest *));
+@custom-variant ocean (&:is(.ocean *));
+@custom-variant ember (&:is(.ember *));
+@custom-variant ayu-dark (&:is(.ayu-dark *));
+@custom-variant ayu-mirage (&:is(.ayu-mirage *));
+@custom-variant matcha (&:is(.matcha *));
+
+/* Light themes */
+@custom-variant cream (&:is(.cream *));
+@custom-variant solarizedlight (&:is(.solarizedlight *));
+@custom-variant github (&:is(.github *));
+@custom-variant paper (&:is(.paper *));
+@custom-variant rose (&:is(.rose *));
+@custom-variant mint (&:is(.mint *));
+@custom-variant lavender (&:is(.lavender *));
+@custom-variant sand (&:is(.sand *));
+@custom-variant sky (&:is(.sky *));
+@custom-variant peach (&:is(.peach *));
+@custom-variant snow (&:is(.snow *));
+@custom-variant sepia (&:is(.sepia *));
+@custom-variant gruvboxlight (&:is(.gruvboxlight *));
+@custom-variant nordlight (&:is(.nordlight *));
+@custom-variant blossom (&:is(.blossom *));
+@custom-variant ayu-light (&:is(.ayu-light *));
+@custom-variant onelight (&:is(.onelight *));
+@custom-variant bluloco (&:is(.bluloco *));
+@custom-variant feather (&:is(.feather *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-background-50: var(--background-50);
+  --color-background-80: var(--background-80);
+  --color-foreground: var(--foreground);
+  --color-foreground-secondary: var(--foreground-secondary);
+  --color-foreground-muted: var(--foreground-muted);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+
+  /* Sidebar colors */
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+
+  /* Chart colors */
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+
+  /* UI element colors */
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-border-glass: var(--border-glass);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+
+  /* Brand colors */
+  --color-brand-400: var(--brand-400);
+  --color-brand-500: var(--brand-500);
+  --color-brand-600: var(--brand-600);
+
+  /* Action button colors */
+  --color-action-view: var(--action-view);
+  --color-action-view-hover: var(--action-view-hover);
+  --color-action-followup: var(--action-followup);
+  --color-action-followup-hover: var(--action-followup-hover);
+  --color-action-commit: var(--action-commit);
+  --color-action-commit-hover: var(--action-commit-hover);
+  --color-action-verify: var(--action-verify);
+  --color-action-verify-hover: var(--action-verify-hover);
+
+  /* Running task indicator colors */
+  --color-running-indicator: var(--running-indicator);
+  --color-running-indicator-text: var(--running-indicator-text);
+
+  /* Status colors */
+  --color-status-success: var(--status-success);
+  --color-status-success-bg: var(--status-success-bg);
+  --color-status-warning: var(--status-warning);
+  --color-status-warning-bg: var(--status-warning-bg);
+  --color-status-error: var(--status-error);
+  --color-status-error-bg: var(--status-error-bg);
+  --color-status-info: var(--status-info);
+  --color-status-info-bg: var(--status-info-bg);
+  --color-status-backlog: var(--status-backlog);
+  --color-status-in-progress: var(--status-in-progress);
+  --color-status-waiting: var(--status-waiting);
+
+  /* Border radius */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  /* Default to light mode */
+  --radius: 0.625rem;
+  --perf-contain-intrinsic-size: 500px;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --background-50: oklch(1 0 0 / 0.5);
+  --background-80: oklch(1 0 0 / 0.8);
+  --foreground-secondary: oklch(0.4 0 0);
+  --foreground-muted: oklch(0.556 0 0);
+  --border-glass: oklch(0.145 0 0 / 0.1);
+  --brand-400: oklch(0.6 0.22 265);
+  --brand-500: oklch(0.55 0.25 265);
+  --brand-600: oklch(0.5 0.28 270);
+
+  /* Action button colors - Light mode */
+  --action-view: oklch(0.55 0.25 265); /* Purple */
+  --action-view-hover: oklch(0.5 0.28 270);
+  --action-followup: oklch(0.55 0.2 230); /* Blue */
+  --action-followup-hover: oklch(0.5 0.22 230);
+  --action-commit: oklch(0.55 0.2 140); /* Green */
+  --action-commit-hover: oklch(0.5 0.22 140);
+  --action-verify: oklch(0.55 0.2 140); /* Green */
+  --action-verify-hover: oklch(0.5 0.22 140);
+
+  /* Running indicator - Purple */
+  --running-indicator: oklch(0.55 0.25 265);
+  --running-indicator-text: oklch(0.6 0.22 265);
+
+  /* Status colors - Light mode */
+  --status-success: oklch(0.55 0.2 140);
+  --status-success-bg: oklch(0.55 0.2 140 / 0.15);
+  --status-warning: oklch(0.7 0.15 70);
+  --status-warning-bg: oklch(0.7 0.15 70 / 0.15);
+  --status-error: oklch(0.55 0.22 25);
+  --status-error-bg: oklch(0.55 0.22 25 / 0.15);
+  --status-info: oklch(0.55 0.2 230);
+  --status-info-bg: oklch(0.55 0.2 230 / 0.15);
+  --status-backlog: oklch(0.5 0 0);
+  --status-in-progress: oklch(0.7 0.15 70);
+  --status-waiting: oklch(0.65 0.18 50);
+
+  /* Shadow tokens */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  /* Transition tokens */
+  --transition-fast: 150ms ease;
+  --transition-normal: 200ms ease;
+  --transition-slow: 300ms ease-out;
+}
+
+/* Apply dark mode immediately based on system preference (before JS runs) */
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Deep dark backgrounds - zinc-950 family */
+    --background: oklch(0.04 0 0); /* zinc-950 */
+    --background-50: oklch(0.04 0 0 / 0.5); /* zinc-950/50 */
+    --background-80: oklch(0.04 0 0 / 0.8); /* zinc-950/80 */
+
+    /* Text colors following hierarchy */
+    --foreground: oklch(1 0 0); /* text-white */
+    --foreground-secondary: oklch(0.588 0 0); /* text-zinc-400 */
+    --foreground-muted: oklch(0.525 0 0); /* text-zinc-500 */
+
+    /* Card and popover backgrounds */
+    --card: oklch(0.14 0 0);
+    --card-foreground: oklch(1 0 0);
+    --popover: oklch(0.1 0 0);
+    --popover-foreground: oklch(1 0 0);
+
+    /* Brand colors - purple/violet theme */
+    --primary: oklch(0.55 0.25 265);
+    --primary-foreground: oklch(1 0 0);
+    --brand-400: oklch(0.6 0.22 265);
+    --brand-500: oklch(0.55 0.25 265);
+    --brand-600: oklch(0.5 0.28 270);
+
+    /* Glass morphism borders and accents */
+    --secondary: oklch(1 0 0 / 0.05);
+    --secondary-foreground: oklch(1 0 0);
+    --muted: oklch(0.176 0 0);
+    --muted-foreground: oklch(0.588 0 0);
+    --accent: oklch(1 0 0 / 0.1);
+    --accent-foreground: oklch(1 0 0);
+
+    /* Borders with transparency for glass effect */
+    --border: oklch(0.176 0 0);
+    --border-glass: oklch(1 0 0 / 0.1);
+    --destructive: oklch(0.6 0.25 25);
+    --input: oklch(0.04 0 0 / 0.8);
+    --ring: oklch(0.55 0.25 265);
+
+    /* Chart colors with brand theme */
+    --chart-1: oklch(0.55 0.25 265);
+    --chart-2: oklch(0.65 0.2 160);
+    --chart-3: oklch(0.75 0.2 70);
+    --chart-4: oklch(0.6 0.25 300);
+    --chart-5: oklch(0.6 0.25 20);
+
+    /* Sidebar with glass morphism */
+    --sidebar: oklch(0.04 0 0 / 0.5);
+    --sidebar-foreground: oklch(1 0 0);
+    --sidebar-primary: oklch(0.55 0.25 265);
+    --sidebar-primary-foreground: oklch(1 0 0);
+    --sidebar-accent: oklch(1 0 0 / 0.05);
+    --sidebar-accent-foreground: oklch(1 0 0);
+    --sidebar-border: oklch(1 0 0 / 0.1);
+    --sidebar-ring: oklch(0.55 0.25 265);
+
+    /* Action button colors */
+    --action-view: oklch(0.6 0.25 265);
+    --action-view-hover: oklch(0.55 0.27 270);
+    --action-followup: oklch(0.6 0.2 230);
+    --action-followup-hover: oklch(0.55 0.22 230);
+    --action-commit: oklch(0.55 0.2 140);
+    --action-commit-hover: oklch(0.5 0.22 140);
+    --action-verify: oklch(0.55 0.2 140);
+    --action-verify-hover: oklch(0.5 0.22 140);
+
+    /* Running indicator - Purple */
+    --running-indicator: oklch(0.6 0.25 265);
+    --running-indicator-text: oklch(0.65 0.22 265);
+
+    /* Status colors - Dark mode */
+    --status-success: oklch(0.65 0.2 140);
+    --status-success-bg: oklch(0.65 0.2 140 / 0.2);
+    --status-warning: oklch(0.75 0.15 70);
+    --status-warning-bg: oklch(0.75 0.15 70 / 0.2);
+    --status-error: oklch(0.65 0.22 25);
+    --status-error-bg: oklch(0.65 0.22 25 / 0.2);
+    --status-info: oklch(0.65 0.2 230);
+    --status-info-bg: oklch(0.65 0.2 230 / 0.2);
+    --status-backlog: oklch(0.6 0 0);
+    --status-in-progress: oklch(0.75 0.15 70);
+    --status-waiting: oklch(0.7 0.18 50);
+
+    /* Shadow tokens - darker for dark mode */
+    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* IMPORTANT:
+ * Theme classes like `.light` are applied to `:root` (html).
+ * Some third-party libraries (e.g. React Flow) also add `.light`/`.dark` classes
+ * to nested containers. If we define CSS variables on `.light` broadly, those
+ * nested containers will override the app theme and cause "white cards" in dark themes.
+ * Scoping to `:root.light` ensures only the root theme toggle controls variables.
+ */
+:root.light {
+  /* Explicit light mode - same as root but ensures it overrides any dark defaults */
+  --background: oklch(1 0 0); /* White */
+  --background-50: oklch(1 0 0 / 0.5);
+  --background-80: oklch(1 0 0 / 0.8);
+  --foreground: oklch(0.145 0 0); /* Dark text */
+  --foreground-secondary: oklch(0.4 0 0);
+  --foreground-muted: oklch(0.556 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.55 0.25 265);
+  --primary-foreground: oklch(1 0 0);
+  --brand-400: oklch(0.6 0.22 265);
+  --brand-500: oklch(0.55 0.25 265);
+  --brand-600: oklch(0.5 0.28 270);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.95 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --border-glass: oklch(0.145 0 0 / 0.1);
+  --input: oklch(1 0 0);
+  --ring: oklch(0.55 0.25 265);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.98 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.55 0.25 265);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.95 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.9 0 0);
+  --sidebar-ring: oklch(0.55 0.25 265);
+
+  /* Action button colors */
+  --action-view: oklch(0.55 0.25 265); /* Purple */
+  --action-view-hover: oklch(0.5 0.28 270);
+  --action-followup: oklch(0.55 0.2 230); /* Blue */
+  --action-followup-hover: oklch(0.5 0.22 230);
+  --action-commit: oklch(0.55 0.2 140); /* Green */
+  --action-commit-hover: oklch(0.5 0.22 140);
+  --action-verify: oklch(0.55 0.2 140); /* Green */
+  --action-verify-hover: oklch(0.5 0.22 140);
+
+  /* Running indicator - Purple */
+  --running-indicator: oklch(0.55 0.25 265);
+  --running-indicator-text: oklch(0.6 0.22 265);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html {
+    @apply bg-background;
+  }
+  body {
+    @apply bg-background text-foreground;
+    background-color: var(--background);
+    font-family: var(--font-sans);
+  }
+
+  /* Fixed viewport for mobile - app-like feel with no scrolling/bouncing */
+  html,
+  body {
+    overflow: hidden;
+    overscroll-behavior: none;
+    width: 100%;
+    height: 100%;
+    height: 100dvh;
+  }
+
+  /* iOS Safari: position:fixed on body prevents pull-to-refresh and overscroll bounce.
+     Scoped to touch devices only to avoid breaking desktop browser behaviours. */
+  @media (hover: none) and (pointer: coarse) {
+    html,
+    body {
+      position: fixed;
+    }
+  }
+
+  /* App container: full viewport, no scroll, safe-area insets for notched devices */
+  #app {
+    height: 100%;
+    height: 100dvh;
+    overflow: hidden;
+    overscroll-behavior: none;
+    padding-top: env(safe-area-inset-top, 0px);
+    /* Default bottom inset: reduced multiplier to balance home-indicator clearance with screen space */
+    padding-bottom: calc(env(safe-area-inset-bottom, 0px) * 0.1);
+    padding-left: env(safe-area-inset-left, 0px);
+    padding-right: env(safe-area-inset-right, 0px);
+  }
+
+  /* Apply monospace font to code elements */
+  code,
+  pre,
+  kbd,
+  samp {
+    font-family: var(--font-mono);
+  }
+
+  /* Text selection styling for readability */
+  ::selection {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+  ::-moz-selection {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+
+  /* Ensure all clickable elements show pointer cursor */
+  button:not(:disabled),
+  [role='button']:not([aria-disabled='true']),
+  a[href],
+  input[type='button']:not(:disabled),
+  input[type='submit']:not(:disabled),
+  input[type='reset']:not(:disabled),
+  select:not(:disabled),
+  [tabindex]:not([tabindex='-1']):not(:disabled) {
+    cursor: pointer;
+  }
+
+  /* Disabled elements should show not-allowed cursor */
+  button:disabled,
+  [role='button'][aria-disabled='true'],
+  input:disabled,
+  select:disabled,
+  textarea:disabled {
+    cursor: not-allowed;
+  }
+}
+
+/* Universal scrollbar styling using theme CSS variables */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--muted);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--muted-foreground);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--foreground);
+}
+
+/* Always visible scrollbar for file diffs and code blocks */
+.scrollbar-visible {
+  overflow-y: auto !important;
+  scrollbar-width: thin;
+  scrollbar-color: var(--muted-foreground) var(--muted);
+}
+
+.scrollbar-visible::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.scrollbar-visible::-webkit-scrollbar-track {
+  background: var(--muted);
+  border-radius: 4px;
+}
+
+.scrollbar-visible::-webkit-scrollbar-thumb {
+  background: var(--muted-foreground);
+  border-radius: 4px;
+  min-height: 40px;
+}
+
+.scrollbar-visible::-webkit-scrollbar-thumb:hover {
+  background: var(--foreground-secondary);
+}
+
+/* Force scrollbar to always be visible (not auto-hide) */
+.scrollbar-visible::-webkit-scrollbar-thumb {
+  visibility: visible;
+}
+
+/* Styled scrollbar for code blocks and log entries (horizontal/vertical) */
+.scrollbar-styled {
+  scrollbar-width: thin;
+  scrollbar-color: var(--muted-foreground) transparent;
+}
+
+.scrollbar-styled::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.scrollbar-styled::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 3px;
+}
+
+.scrollbar-styled::-webkit-scrollbar-thumb {
+  background: oklch(0.35 0 0);
+  border-radius: 3px;
+}
+
+.scrollbar-styled::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.45 0 0);
+}
+
+/* Hidden scrollbar - still scrollable but no visible scrollbar */
+.scrollbar-hide {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+/* Glass morphism utilities */
+@layer utilities {
+  .glass {
+    @apply backdrop-blur-md border-white/10;
+  }
+
+  /* Disable iOS long-press context menu - apply only to non-interactive chrome elements */
+  .no-touch-callout {
+    -webkit-touch-callout: none;
+  }
+
+  /* Safe-area padding for full-screen mobile dialogs (e.g. view changes, commits).
+     Prevents overlap with the Dynamic Island / notch on iOS.
+     Uses calc() to ADD safe-area insets to the existing 1.5rem (p-6) padding from
+     DialogContent, so on non-notched devices the base p-6 padding is preserved.
+     On sm+ (desktop), the dialog is centered and not full-screen, so restore
+     the plain 1.5rem top/bottom padding. */
+  .dialog-fullscreen-mobile {
+    padding-top: calc(env(safe-area-inset-top, 0px) + 1.5rem);
+    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
+  }
+
+  @media (min-width: 640px) {
+    .dialog-fullscreen-mobile {
+      padding-top: 1.5rem;
+      padding-bottom: 1.5rem;
+    }
+  }
+
+  /* Safe-area-aware close button positioning for full-screen mobile dialogs.
+     On mobile, shift the close button down by the safe-area-inset-top so it
+     remains reachable and not hidden behind the notch or Dynamic Island.
+     On sm+ (desktop), use standard top positioning. */
+  .dialog-fullscreen-mobile [data-slot='dialog-close'] {
+    top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
+  }
+
+  @media (min-width: 640px) {
+    .dialog-fullscreen-mobile [data-slot='dialog-close'] {
+      top: 0.75rem;
+    }
+  }
+
+  /* Safe-area-aware top padding for compact dialog headers (p-0 dialogs with own header).
+     Ensures the header content starts below the Dynamic Island / notch on iOS.
+     Used in dev-server-logs and test-logs panels that use p-0 on DialogContent.
+     On sm+ (desktop), the dialog is centered so no safe-area adjustment needed. */
+  .dialog-compact-header-mobile {
+    padding-top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
+  }
+
+  @media (min-width: 640px) {
+    .dialog-compact-header-mobile {
+      padding-top: 0.75rem;
+    }
+  }
+
+  .glass-subtle {
+    @apply backdrop-blur-sm border-white/5;
+  }
+
+  .glass-strong {
+    @apply backdrop-blur-xl border-white/20;
+  }
+
+  /* Text color hierarchy utilities */
+  .text-primary-white {
+    color: oklch(1 0 0);
+  }
+
+  .text-secondary {
+    color: oklch(0.588 0 0); /* zinc-400 equivalent */
+  }
+
+  .text-muted {
+    color: oklch(0.525 0 0); /* zinc-500 equivalent */
+  }
+
+  /* Brand gradient utilities */
+  .gradient-brand {
+    background: linear-gradient(135deg, oklch(0.55 0.25 265), oklch(0.5 0.28 270));
+  }
+
+  .gradient-brand-subtle {
+    background: linear-gradient(135deg, oklch(0.55 0.25 265 / 0.1), oklch(0.5 0.28 270 / 0.1));
+  }
+
+  /* Glass morphism background utilities */
+  .bg-glass {
+    background: var(--card);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+
+  .bg-glass-80 {
+    background: var(--popover);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+
+  /* Hover state utilities */
+  .hover-glass {
+    transition: background-color 0.2s ease;
+  }
+
+  .hover-glass:hover {
+    background: oklch(1 0 0 / 0.05);
+  }
+
+  .hover-glass-strong {
+    transition: background-color 0.2s ease;
+  }
+
+  .hover-glass-strong:hover {
+    background: oklch(1 0 0 / 0.1);
+  }
+
+  /* Content area background */
+  .content-bg {
+    background: var(--background);
+  }
+
+  /* Action button utilities */
+  .bg-action-view {
+    background-color: var(--action-view);
+  }
+
+  .hover\:bg-action-view-hover:hover {
+    background-color: var(--action-view-hover);
+  }
+
+  .bg-action-followup {
+    background-color: var(--action-followup);
+  }
+
+  .hover\:bg-action-followup-hover:hover {
+    background-color: var(--action-followup-hover);
+  }
+
+  .bg-action-commit {
+    background-color: var(--action-commit);
+  }
+
+  .hover\:bg-action-commit-hover:hover {
+    background-color: var(--action-commit-hover);
+  }
+
+  .bg-action-verify {
+    background-color: var(--action-verify);
+  }
+
+  .hover\:bg-action-verify-hover:hover {
+    background-color: var(--action-verify-hover);
+  }
+
+  /* Running task indicator utilities */
+  .border-running-indicator {
+    border-color: var(--running-indicator);
+  }
+
+  .bg-running-indicator\/20 {
+    background-color: color-mix(in oklch, var(--running-indicator), transparent 80%);
+  }
+
+  .shadow-running-indicator\/50 {
+    box-shadow:
+      0 10px 15px -3px color-mix(in oklch, var(--running-indicator), transparent 50%),
+      0 4px 6px -4px color-mix(in oklch, var(--running-indicator), transparent 50%);
+  }
+
+  .text-running-indicator {
+    color: var(--running-indicator-text);
+  }
+
+  /* Animated border for in-progress cards */
+  /* Using a subtle pulse animation instead of continuous gradient rotation for GPU efficiency */
+  @keyframes border-pulse {
+    0%,
+    100% {
+      opacity: 0.7;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+
+  .animated-border-wrapper {
+    position: relative;
+    border-radius: 0.75rem;
+    padding: 2px;
+    background: linear-gradient(
+      135deg,
+      var(--running-indicator),
+      color-mix(in oklch, var(--running-indicator), transparent 30%),
+      var(--running-indicator)
+    );
+    animation: border-pulse 2s ease-in-out infinite;
+  }
+
+  /* Pause animation when user prefers reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .animated-border-wrapper {
+      animation: none;
+      opacity: 1;
+    }
+  }
+
+  .animated-border-wrapper > * {
+    border-radius: calc(0.75rem - 2px);
+  }
+}
+
+/* Retro Overrides for Utilities */
+
+.retro * {
+  border-radius: 0 !important;
+}
+
+/* Animated Outline Button Styles */
+.animated-outline-gradient {
+  /* Default gradient - purple to blue */
+  background: conic-gradient(from 90deg at 50% 50%, #a855f7 0%, #3b82f6 50%, #a855f7 100%);
+}
+
+/* Light mode - deeper purple to blue gradient for better visibility */
+
+/* Dark mode - purple to blue gradient */
+
+/* Retro mode - unique scanline + neon effect */
+
+@keyframes retro-glow {
+  from {
+    filter: brightness(1) drop-shadow(0 0 2px #00ff41);
+  }
+  to {
+    filter: brightness(1.2) drop-shadow(0 0 8px #00ff41);
+  }
+}
+
+/* Dracula animated-outline - purple/pink */
+
+/* Nord animated-outline - frost blue */
+
+/* Monokai animated-outline - pink/yellow */
+
+/* Tokyo Night animated-outline - blue/magenta */
+
+/* Solarized animated-outline - blue/cyan */
+
+/* Gruvbox animated-outline - yellow/orange */
+
+/* Catppuccin animated-outline - mauve/pink */
+
+/* One Dark animated-outline - blue/magenta */
+
+/* Synthwave animated-outline - hot pink/cyan with glow */
+
+@keyframes synthwave-glow {
+  from {
+    filter: brightness(1) drop-shadow(0 0 3px #f97e72);
+  }
+  to {
+    filter: brightness(1.3) drop-shadow(0 0 10px #ff7edb);
+  }
+}
+
+/* Slider Theme Styles */
+
+/* Dracula slider */
+
+/* Nord slider */
+
+/* Monokai slider */
+
+/* Tokyo Night slider */
+
+/* Solarized slider */
+
+/* Gruvbox slider */
+
+/* Catppuccin slider */
+
+/* One Dark slider */
+
+/* Synthwave slider */
+
+/* Line clamp utilities for text overflow prevention */
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Kanban card improvements to prevent text overflow */
+.kanban-card-content {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+/* Ensure proper column layout in double-width kanban columns */
+.kanban-columns-layout > * {
+  page-break-inside: avoid;
+  break-inside: avoid;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Electron title bar drag region */
+.titlebar-drag-region {
+  -webkit-app-region: drag;
+}
+
+.titlebar-no-drag {
+  -webkit-app-region: no-drag;
+}
+
+/* ========================================
+   XML SYNTAX HIGHLIGHTING
+   Theme-aware colors for XML editor
+   ======================================== */
+
+/* Light theme - professional and readable */
+
+/* Dark theme - high contrast */
+
+/* Retro theme - neon green on black */
+
+/* Dracula theme */
+
+/* Nord theme */
+
+/* Monokai theme */
+
+/* Tokyo Night theme */
+
+/* Solarized theme */
+
+/* Gruvbox theme */
+
+/* Catppuccin theme */
+
+/* One Dark theme */
+
+/* Synthwave theme */
+
+/* XML Editor container styles */
+.xml-editor {
+  position: relative;
+}
+
+.xml-editor textarea {
+  z-index: 1;
+}
+
+.xml-editor .xml-highlight {
+  z-index: 0;
+}
+
+/* Accordion animations - CSS-only approach */
+@keyframes accordion-down {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--accordion-content-height, auto);
+    opacity: 1;
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--accordion-content-height, auto);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+.animate-accordion-down {
+  animation: accordion-down 0.2s ease-out forwards;
+}
+
+.animate-accordion-up {
+  animation: accordion-up 0.2s ease-out forwards;
+}
+
+/* ========================================
+   CODE EDITOR - MOBILE RESPONSIVE STYLES
+   Reduce line number gutter width on mobile
+   ======================================== */
+
+/* On small screens (mobile), reduce line number gutter width to save horizontal space */
+@media (max-width: 640px) {
+  .cm-lineNumbers .cm-gutterElement {
+    min-width: 1.75rem !important;
+    padding-right: 0.25rem !important;
+  }
+}
+
+/* Terminal scrollbar theming */
+.xterm-viewport::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.xterm-viewport::-webkit-scrollbar-track {
+  background: var(--muted);
+  border-radius: 4px;
+}
+
+.xterm-viewport::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+}
+
+.xterm-viewport::-webkit-scrollbar-thumb:hover {
+  background: var(--muted-foreground);
+}
+
+/* Terminal padding for better readability */
+.xterm {
+  padding: 12px 16px;
+}
+
+/* ========================================
+   DEPENDENCY GRAPH STYLES
+   Theme-aware styling for React Flow graph
+   ======================================== */
+
+/* React Flow base theme overrides */
+.graph-canvas {
+  --xy-background-color: transparent;
+  --xy-node-background-color: var(--card);
+  --xy-node-border-color: var(--border);
+  --xy-node-border-radius: 0.75rem;
+  --xy-edge-stroke-default: var(--border);
+  --xy-edge-stroke-selected: var(--brand-500);
+  --xy-minimap-background-color: var(--popover);
+  --xy-minimap-mask-background-color: rgba(0, 0, 0, 0.2);
+  --xy-controls-background-color: var(--popover);
+  --xy-controls-border-color: var(--border);
+}
+
+/* MiniMap styling */
+.graph-canvas .react-flow__minimap {
+  background-color: var(--popover) !important;
+  border: 1px solid var(--border) !important;
+  border-radius: 0.5rem;
+}
+
+.graph-canvas .react-flow__minimap-mask {
+  fill: var(--background);
+  fill-opacity: 0.8;
+}
+
+/* Edge animations */
+@keyframes flow-dash {
+  to {
+    stroke-dashoffset: -20;
+  }
+}
+
+@keyframes edge-glow {
+  0%,
+  100% {
+    filter: drop-shadow(0 0 2px var(--status-in-progress));
+  }
+  50% {
+    filter: drop-shadow(0 0 6px var(--status-in-progress));
+  }
+}
+
+.graph-canvas .animated-edge path {
+  animation: flow-dash 0.5s linear infinite;
+}
+
+.graph-canvas .edge-flowing path {
+  animation:
+    flow-dash 0.5s linear infinite,
+    edge-glow 2s ease-in-out infinite;
+}
+
+/* Edge particle animation */
+.edge-particle {
+  pointer-events: none;
+}
+
+/* Node animations */
+@keyframes pulse-subtle {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 var(--status-in-progress);
+  }
+  50% {
+    box-shadow: 0 0 15px 3px var(--status-in-progress);
+  }
+}
+
+.animate-pulse-subtle {
+  animation: pulse-subtle 2s ease-in-out infinite;
+}
+
+/* Progress bar indeterminate animation */
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+    width: 50%;
+  }
+  50% {
+    transform: translateX(50%);
+    width: 30%;
+  }
+  100% {
+    transform: translateX(200%);
+    width: 50%;
+  }
+}
+
+.animate-progress-indeterminate {
+  animation: progress-indeterminate 1.5s ease-in-out infinite;
+}
+
+/* Handle styling */
+.graph-canvas .react-flow__handle {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: var(--border);
+  border: 2px solid var(--background);
+  transition: all 0.2s ease;
+}
+
+.graph-canvas .react-flow__handle:hover {
+  background-color: var(--brand-500);
+  transform: scale(1.2);
+}
+
+.graph-canvas .react-flow__handle-left {
+  left: -6px;
+}
+
+.graph-canvas .react-flow__handle-right {
+  right: -6px;
+}
+
+/* Node base styling - override React Flow defaults */
+.graph-canvas .react-flow__node {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+
+/* Selection styles */
+.graph-canvas .react-flow__node.selected {
+  outline: none;
+}
+
+.graph-canvas .react-flow__edge.selected path {
+  stroke: var(--brand-500);
+  stroke-width: 3;
+}
+
+/* Attribution removal (requires pro license) */
+.graph-canvas .react-flow__attribution {
+  display: none;
+}
+
+/* Panel styling */
+.graph-canvas .react-flow__panel {
+  margin: 12px;
+}
+
+/* Retro theme overrides */
+.retro .graph-canvas .react-flow__handle,
+.retro .graph-canvas .react-flow__minimap {
+  border-radius: 0 !important;
+}
+
+.retro .graph-canvas .react-flow__node {
+  border-radius: 0 !important;
+}
+
+/* Graph Filter Highlight States */
+
+/* Matched node - direct search/filter match */
+.graph-node-matched {
+  box-shadow:
+    0 0 0 3px var(--brand-500),
+    0 0 20px 4px var(--brand-500);
+  border-color: var(--brand-500) !important;
+  z-index: 10;
+}
+
+/* Animated glow for matched nodes */
+@keyframes matched-node-glow {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 3px var(--brand-500),
+      0 0 15px 2px var(--brand-500);
+  }
+  50% {
+    box-shadow:
+      0 0 0 3px var(--brand-500),
+      0 0 25px 6px var(--brand-500);
+  }
+}
+
+.graph-node-matched {
+  animation: matched-node-glow 2s ease-in-out infinite;
+}
+
+/* Highlighted path node - part of the dependency path */
+.graph-node-highlighted {
+  box-shadow:
+    0 0 0 2px var(--brand-400),
+    0 0 12px 2px var(--brand-400);
+  z-index: 5;
+}
+
+/* Dimmed node - not part of filter results */
+.graph-node-dimmed {
+  opacity: 0.25;
+  filter: grayscale(60%);
+  transition:
+    opacity 0.3s ease,
+    filter 0.3s ease;
+}
+
+.graph-node-dimmed:hover {
+  opacity: 0.4;
+  filter: grayscale(40%);
+}
+
+/* Highlighted edge styles */
+.graph-edge-highlighted path {
+  stroke: var(--brand-500) !important;
+  stroke-width: 4px !important;
+  filter: drop-shadow(0 0 6px var(--brand-500));
+}
+
+/* Dimmed edge styles */
+.graph-edge-dimmed path {
+  opacity: 0.15;
+  stroke-width: 1px !important;
+  filter: none !important;
+}
+
+/* Reduce motion preference */
+@media (prefers-reduced-motion: reduce) {
+  .graph-canvas .animated-edge path,
+  .graph-canvas .edge-flowing path,
+  .animate-pulse-subtle,
+  .animate-progress-indeterminate,
+  .graph-node-matched {
+    animation: none;
+  }
+}
+
+.perf-contain {
+  contain: layout paint;
+  content-visibility: auto;
+  contain-intrinsic-size: auto var(--perf-contain-intrinsic-size);
+}
diff --git a/temp_repo/apps/ui/src/styles/theme-imports.ts b/temp_repo/apps/ui/src/styles/theme-imports.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a1b247979b409b540a46754bfc720011dca450c3
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/theme-imports.ts
@@ -0,0 +1,48 @@
+/**
+ * Bundles all individual theme styles so the build pipeline
+ * doesn't tree-shake their CSS when imported dynamically.
+ */
+
+// Dark themes (20)
+import './themes/dark.css';
+import './themes/retro.css';
+import './themes/dracula.css';
+import './themes/nord.css';
+import './themes/monokai.css';
+import './themes/tokyonight.css';
+import './themes/solarized.css';
+import './themes/gruvbox.css';
+import './themes/catppuccin.css';
+import './themes/onedark.css';
+import './themes/synthwave.css';
+import './themes/red.css';
+import './themes/sunset.css';
+import './themes/gray.css';
+import './themes/forest.css';
+import './themes/ocean.css';
+import './themes/ember.css';
+import './themes/ayu-dark.css';
+import './themes/ayu-mirage.css';
+import './themes/matcha.css';
+
+// Light themes (20)
+import './themes/light.css';
+import './themes/cream.css';
+import './themes/solarizedlight.css';
+import './themes/github.css';
+import './themes/paper.css';
+import './themes/rose.css';
+import './themes/mint.css';
+import './themes/lavender.css';
+import './themes/sand.css';
+import './themes/sky.css';
+import './themes/peach.css';
+import './themes/snow.css';
+import './themes/sepia.css';
+import './themes/gruvboxlight.css';
+import './themes/nordlight.css';
+import './themes/blossom.css';
+import './themes/ayu-light.css';
+import './themes/onelight.css';
+import './themes/bluloco.css';
+import './themes/feather.css';
diff --git a/temp_repo/apps/ui/src/styles/themes/ayu-dark.css b/temp_repo/apps/ui/src/styles/themes/ayu-dark.css
new file mode 100644
index 0000000000000000000000000000000000000000..a4a4309bd9e1bb580a1cf15c664020bab4d30053
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/ayu-dark.css
@@ -0,0 +1,151 @@
+/* Ayu Dark Theme - Deep dark with warm orange accents */
+
+.ayu-dark {
+  /* Backgrounds - from editor.bg #10141C, ui.bg #0D1017 */
+  --background: oklch(0.12 0.02 250); /* #0D1017 */
+  --background-50: oklch(0.12 0.02 250 / 0.5);
+  --background-80: oklch(0.12 0.02 250 / 0.8);
+
+  /* Text - from editor.fg #BFBDB6, ui.fg #5A6378 - boosted for contrast */
+  --foreground: oklch(0.95 0.01 90); /* Brighter for better readability */
+  --foreground-secondary: oklch(0.75 0.02 240);
+  --foreground-muted: oklch(0.6 0.03 240);
+
+  /* Card/Popover - from panel.bg #141821, popup.bg #0F131A */
+  --card: oklch(0.15 0.02 250); /* #141821 */
+  --card-foreground: oklch(0.95 0.01 90);
+  --popover: oklch(0.13 0.02 250); /* #0F131A */
+  --popover-foreground: oklch(0.95 0.01 90);
+
+  /* Primary/Brand - from accent.tint #E6B450, orange #FF8F40 */
+  --primary: oklch(0.78 0.15 75); /* #E6B450 golden */
+  --primary-foreground: oklch(0.12 0.02 250);
+
+  --brand-400: oklch(0.82 0.14 75);
+  --brand-500: oklch(0.78 0.15 75); /* #E6B450 */
+  --brand-600: oklch(0.72 0.17 70);
+
+  /* Secondary - from ui.line #1B1F29 */
+  --secondary: oklch(0.18 0.02 250);
+  --secondary-foreground: oklch(0.95 0.01 90);
+
+  /* Muted */
+  --muted: oklch(0.18 0.02 250);
+  --muted-foreground: oklch(0.45 0.04 240);
+
+  /* Accent */
+  --accent: oklch(0.22 0.03 250);
+  --accent-foreground: oklch(0.95 0.01 90);
+
+  /* Destructive - from error #D95757 */
+  --destructive: oklch(0.55 0.2 25); /* #D95757 */
+
+  /* Borders - from editor.line #161A24 */
+  --border: oklch(0.2 0.02 250);
+  --border-glass: oklch(0.78 0.15 75 / 0.3);
+
+  --input: oklch(0.15 0.02 250);
+  --ring: oklch(0.78 0.15 75);
+
+  /* Charts - using Ayu palette */
+  --chart-1: oklch(0.78 0.15 75); /* Gold accent */
+  --chart-2: oklch(0.75 0.2 130); /* Green #AAD94C */
+  --chart-3: oklch(0.7 0.15 220); /* Blue #59C2FF */
+  --chart-4: oklch(0.7 0.2 320); /* Purple #D2A6FF */
+  --chart-5: oklch(0.65 0.2 15); /* Red #F07178 */
+
+  /* Sidebar - from ui.bg #0D1017 */
+  --sidebar: oklch(0.1 0.02 250);
+  --sidebar-foreground: oklch(0.95 0.01 90);
+  --sidebar-primary: oklch(0.78 0.15 75);
+  --sidebar-primary-foreground: oklch(0.12 0.02 250);
+  --sidebar-accent: oklch(0.18 0.02 250);
+  --sidebar-accent-foreground: oklch(0.95 0.01 90);
+  --sidebar-border: oklch(0.2 0.02 250);
+  --sidebar-ring: oklch(0.78 0.15 75);
+
+  /* Action buttons */
+  --action-view: oklch(0.78 0.15 75); /* Gold */
+  --action-view-hover: oklch(0.72 0.17 70);
+  --action-followup: oklch(0.7 0.15 220); /* Blue #59C2FF */
+  --action-followup-hover: oklch(0.65 0.17 220);
+  --action-commit: oklch(0.75 0.2 130); /* Green #AAD94C */
+  --action-commit-hover: oklch(0.7 0.22 130);
+  --action-verify: oklch(0.75 0.2 130);
+  --action-verify-hover: oklch(0.7 0.22 130);
+
+  /* Running indicator */
+  --running-indicator: oklch(0.78 0.15 75);
+  --running-indicator-text: oklch(0.82 0.14 75);
+}
+
+/* Theme-specific overrides */
+
+.ayu-dark .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #e6b450 0%, #ff8f40 50%, #e6b450 100%);
+}
+
+.ayu-dark .animated-outline-inner {
+  background: oklch(0.12 0.02 250) !important;
+  color: #e6b450 !important;
+}
+
+.ayu-dark [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(0.18 0.02 250) !important;
+  color: #ffb454 !important;
+}
+
+.ayu-dark .slider-track {
+  background: oklch(0.18 0.02 250);
+}
+
+.ayu-dark .slider-range {
+  background: linear-gradient(to right, #e6b450, #ffb454);
+}
+
+.ayu-dark .slider-thumb {
+  background: oklch(0.12 0.02 250);
+  border-color: #e6b450;
+}
+
+/* XML Syntax Highlighting */
+.ayu-dark .xml-highlight {
+  color: oklch(0.95 0.01 90);
+}
+
+.ayu-dark .xml-tag-bracket {
+  color: #39bae6; /* Indigo */
+}
+
+.ayu-dark .xml-tag-name {
+  color: #39bae6;
+}
+
+.ayu-dark .xml-attribute-name {
+  color: #ffb454; /* Yellow */
+}
+
+.ayu-dark .xml-attribute-equals {
+  color: oklch(0.95 0.01 90);
+}
+
+.ayu-dark .xml-attribute-value {
+  color: #aad94c; /* Green */
+}
+
+.ayu-dark .xml-comment {
+  color: #5a6673; /* Gray */
+  font-style: italic;
+}
+
+.ayu-dark .xml-cdata {
+  color: #95e6cb; /* Teal */
+}
+
+.ayu-dark .xml-doctype {
+  color: #d2a6ff; /* Purple */
+}
+
+.ayu-dark .xml-text {
+  color: oklch(0.95 0.01 90);
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/ayu-light.css b/temp_repo/apps/ui/src/styles/themes/ayu-light.css
new file mode 100644
index 0000000000000000000000000000000000000000..755e7af861a52fbbacbb44f311a30dbb7ff1b4ff
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/ayu-light.css
@@ -0,0 +1,151 @@
+/* Ayu Light Theme - Clean light with warm orange accents */
+
+.ayu-light {
+  /* Backgrounds - from editor.bg #FCFCFC, ui.bg #F8F9FA */
+  --background: oklch(0.98 0.005 90); /* #FCFCFC */
+  --background-50: oklch(0.98 0.005 90 / 0.5);
+  --background-80: oklch(0.98 0.005 90 / 0.8);
+
+  /* Text - from editor.fg #5C6166, ui.fg #828E9F */
+  --foreground: oklch(0.42 0.02 240); /* #5C6166 */
+  --foreground-secondary: oklch(0.52 0.02 240);
+  --foreground-muted: oklch(0.58 0.03 240); /* #828E9F */
+
+  /* Card/Popover - from panel.bg #FAFAFA, popup.bg #FFFFFF */
+  --card: oklch(0.98 0.003 90); /* #FAFAFA */
+  --card-foreground: oklch(0.42 0.02 240);
+  --popover: oklch(1 0 0); /* #FFFFFF */
+  --popover-foreground: oklch(0.42 0.02 240);
+
+  /* Primary/Brand - from accent.tint #F29718 */
+  --primary: oklch(0.72 0.18 55); /* #F29718 orange */
+  --primary-foreground: oklch(1 0 0);
+
+  --brand-400: oklch(0.78 0.16 55);
+  --brand-500: oklch(0.72 0.18 55); /* #F29718 */
+  --brand-600: oklch(0.65 0.2 50);
+
+  /* Secondary */
+  --secondary: oklch(0.96 0.005 90);
+  --secondary-foreground: oklch(0.42 0.02 240);
+
+  /* Muted */
+  --muted: oklch(0.96 0.005 90);
+  --muted-foreground: oklch(0.58 0.03 240);
+
+  /* Accent */
+  --accent: oklch(0.94 0.01 90);
+  --accent-foreground: oklch(0.42 0.02 240);
+
+  /* Destructive - from error #E65050 */
+  --destructive: oklch(0.55 0.22 25); /* #E65050 */
+
+  /* Borders */
+  --border: oklch(0.9 0.01 90);
+  --border-glass: oklch(0.42 0.02 240 / 0.1);
+
+  --input: oklch(1 0 0);
+  --ring: oklch(0.72 0.18 55);
+
+  /* Charts - using Ayu Light palette */
+  --chart-1: oklch(0.72 0.18 55); /* Orange accent */
+  --chart-2: oklch(0.6 0.18 130); /* Green #86B300 */
+  --chart-3: oklch(0.65 0.15 210); /* Blue #22A4E6 */
+  --chart-4: oklch(0.55 0.18 310); /* Purple #A37ACC */
+  --chart-5: oklch(0.58 0.2 20); /* Red #F07171 */
+
+  /* Sidebar */
+  --sidebar: oklch(0.97 0.005 90); /* #F8F9FA */
+  --sidebar-foreground: oklch(0.42 0.02 240);
+  --sidebar-primary: oklch(0.72 0.18 55);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.94 0.01 90);
+  --sidebar-accent-foreground: oklch(0.42 0.02 240);
+  --sidebar-border: oklch(0.9 0.01 90);
+  --sidebar-ring: oklch(0.72 0.18 55);
+
+  /* Action buttons */
+  --action-view: oklch(0.72 0.18 55); /* Orange */
+  --action-view-hover: oklch(0.65 0.2 50);
+  --action-followup: oklch(0.65 0.15 210); /* Blue */
+  --action-followup-hover: oklch(0.58 0.17 210);
+  --action-commit: oklch(0.6 0.18 130); /* Green */
+  --action-commit-hover: oklch(0.55 0.2 130);
+  --action-verify: oklch(0.6 0.18 130);
+  --action-verify-hover: oklch(0.55 0.2 130);
+
+  /* Running indicator */
+  --running-indicator: oklch(0.72 0.18 55);
+  --running-indicator-text: oklch(0.65 0.2 50);
+}
+
+/* Theme-specific overrides */
+
+.ayu-light .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #f29718 0%, #fa8532 50%, #f29718 100%);
+}
+
+.ayu-light .animated-outline-inner {
+  background: oklch(0.98 0.005 90) !important;
+  color: #f29718 !important;
+}
+
+.ayu-light [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(0.96 0.01 90) !important;
+  color: #fa8532 !important;
+}
+
+.ayu-light .slider-track {
+  background: oklch(0.92 0.01 90);
+}
+
+.ayu-light .slider-range {
+  background: linear-gradient(to right, #f29718, #fa8532);
+}
+
+.ayu-light .slider-thumb {
+  background: oklch(1 0 0);
+  border-color: #f29718;
+}
+
+/* XML Syntax Highlighting */
+.ayu-light .xml-highlight {
+  color: oklch(0.42 0.02 240);
+}
+
+.ayu-light .xml-tag-bracket {
+  color: #55b4d4; /* Indigo/Cyan */
+}
+
+.ayu-light .xml-tag-name {
+  color: #55b4d4;
+}
+
+.ayu-light .xml-attribute-name {
+  color: #f29718; /* Orange */
+}
+
+.ayu-light .xml-attribute-equals {
+  color: oklch(0.42 0.02 240);
+}
+
+.ayu-light .xml-attribute-value {
+  color: #86b300; /* Green */
+}
+
+.ayu-light .xml-comment {
+  color: #adaeb1; /* Gray */
+  font-style: italic;
+}
+
+.ayu-light .xml-cdata {
+  color: #4cbf99; /* Teal */
+}
+
+.ayu-light .xml-doctype {
+  color: #a37acc; /* Purple */
+}
+
+.ayu-light .xml-text {
+  color: oklch(0.42 0.02 240);
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/ayu-mirage.css b/temp_repo/apps/ui/src/styles/themes/ayu-mirage.css
new file mode 100644
index 0000000000000000000000000000000000000000..076eebaf483497f31da5bcba7e5f270079544c0e
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/ayu-mirage.css
@@ -0,0 +1,151 @@
+/* Ayu Mirage Theme - Soft dark with golden yellow accents */
+
+.ayu-mirage {
+  /* Backgrounds - from editor.bg #242936, ui.bg #1F2430 */
+  --background: oklch(0.2 0.02 260); /* #1F2430 */
+  --background-50: oklch(0.2 0.02 260 / 0.5);
+  --background-80: oklch(0.2 0.02 260 / 0.8);
+
+  /* Text - from editor.fg #CCCAC2, ui.fg #707A8C */
+  --foreground: oklch(0.82 0.01 90); /* #CCCAC2 */
+  --foreground-secondary: oklch(0.58 0.03 240);
+  --foreground-muted: oklch(0.52 0.04 240); /* #707A8C */
+
+  /* Card/Popover - from panel.bg #282E3B, popup.bg #1C212C */
+  --card: oklch(0.24 0.02 260); /* #282E3B */
+  --card-foreground: oklch(0.82 0.01 90);
+  --popover: oklch(0.18 0.02 260); /* #1C212C */
+  --popover-foreground: oklch(0.82 0.01 90);
+
+  /* Primary/Brand - from accent.tint #FFCC66 */
+  --primary: oklch(0.85 0.14 85); /* #FFCC66 golden yellow */
+  --primary-foreground: oklch(0.18 0.02 260);
+
+  --brand-400: oklch(0.88 0.12 85);
+  --brand-500: oklch(0.85 0.14 85); /* #FFCC66 */
+  --brand-600: oklch(0.78 0.16 80);
+
+  /* Secondary - from ui.line #171B24 */
+  --secondary: oklch(0.22 0.02 260);
+  --secondary-foreground: oklch(0.82 0.01 90);
+
+  /* Muted */
+  --muted: oklch(0.22 0.02 260);
+  --muted-foreground: oklch(0.52 0.04 240);
+
+  /* Accent */
+  --accent: oklch(0.28 0.03 260);
+  --accent-foreground: oklch(0.82 0.01 90);
+
+  /* Destructive - from error #FF6666 */
+  --destructive: oklch(0.62 0.22 20); /* #FF6666 */
+
+  /* Borders - from editor.line #1A1F29 */
+  --border: oklch(0.22 0.02 260);
+  --border-glass: oklch(0.85 0.14 85 / 0.3);
+
+  --input: oklch(0.2 0.02 260);
+  --ring: oklch(0.85 0.14 85);
+
+  /* Charts - using Ayu Mirage palette */
+  --chart-1: oklch(0.85 0.14 85); /* Yellow accent */
+  --chart-2: oklch(0.85 0.2 120); /* Green #D5FF80 */
+  --chart-3: oklch(0.78 0.12 200); /* Blue #73D0FF */
+  --chart-4: oklch(0.82 0.15 310); /* Purple #DFBFFF */
+  --chart-5: oklch(0.68 0.18 20); /* Red #F28779 */
+
+  /* Sidebar - slightly darker than main bg */
+  --sidebar: oklch(0.16 0.02 260);
+  --sidebar-foreground: oklch(0.82 0.01 90);
+  --sidebar-primary: oklch(0.85 0.14 85);
+  --sidebar-primary-foreground: oklch(0.18 0.02 260);
+  --sidebar-accent: oklch(0.22 0.02 260);
+  --sidebar-accent-foreground: oklch(0.82 0.01 90);
+  --sidebar-border: oklch(0.22 0.02 260);
+  --sidebar-ring: oklch(0.85 0.14 85);
+
+  /* Action buttons */
+  --action-view: oklch(0.85 0.14 85); /* Yellow */
+  --action-view-hover: oklch(0.78 0.16 80);
+  --action-followup: oklch(0.78 0.12 200); /* Blue #73D0FF */
+  --action-followup-hover: oklch(0.72 0.14 200);
+  --action-commit: oklch(0.85 0.2 120); /* Green #D5FF80 */
+  --action-commit-hover: oklch(0.78 0.22 120);
+  --action-verify: oklch(0.85 0.2 120);
+  --action-verify-hover: oklch(0.78 0.22 120);
+
+  /* Running indicator */
+  --running-indicator: oklch(0.85 0.14 85);
+  --running-indicator-text: oklch(0.88 0.12 85);
+}
+
+/* Theme-specific overrides */
+
+.ayu-mirage .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #ffcc66 0%, #ffa659 50%, #ffcc66 100%);
+}
+
+.ayu-mirage .animated-outline-inner {
+  background: oklch(0.2 0.02 260) !important;
+  color: #ffcc66 !important;
+}
+
+.ayu-mirage [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(0.24 0.02 260) !important;
+  color: #ffcd66 !important;
+}
+
+.ayu-mirage .slider-track {
+  background: oklch(0.22 0.02 260);
+}
+
+.ayu-mirage .slider-range {
+  background: linear-gradient(to right, #ffcc66, #ffa659);
+}
+
+.ayu-mirage .slider-thumb {
+  background: oklch(0.2 0.02 260);
+  border-color: #ffcc66;
+}
+
+/* XML Syntax Highlighting */
+.ayu-mirage .xml-highlight {
+  color: oklch(0.82 0.01 90);
+}
+
+.ayu-mirage .xml-tag-bracket {
+  color: #5ccfe6; /* Indigo/Cyan */
+}
+
+.ayu-mirage .xml-tag-name {
+  color: #5ccfe6;
+}
+
+.ayu-mirage .xml-attribute-name {
+  color: #ffcd66; /* Yellow */
+}
+
+.ayu-mirage .xml-attribute-equals {
+  color: oklch(0.82 0.01 90);
+}
+
+.ayu-mirage .xml-attribute-value {
+  color: #d5ff80; /* Green */
+}
+
+.ayu-mirage .xml-comment {
+  color: #6e7c8f; /* Gray */
+  font-style: italic;
+}
+
+.ayu-mirage .xml-cdata {
+  color: #95e6cb; /* Teal */
+}
+
+.ayu-mirage .xml-doctype {
+  color: #dfbfff; /* Purple */
+}
+
+.ayu-mirage .xml-text {
+  color: oklch(0.82 0.01 90);
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/blossom.css b/temp_repo/apps/ui/src/styles/themes/blossom.css
new file mode 100644
index 0000000000000000000000000000000000000000..cb03c8f8d3df2715b547fd29acc7cd8f071e0ba0
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/blossom.css
@@ -0,0 +1,92 @@
+/* Blossom Theme - Cherry blossom pink */
+
+.blossom {
+  --background: oklch(0.98 0.02 330);
+  --background-50: oklch(0.98 0.02 330 / 0.5);
+  --background-80: oklch(0.98 0.02 330 / 0.8);
+
+  --foreground: oklch(0.25 0.04 340);
+  --foreground-secondary: oklch(0.45 0.03 340);
+  --foreground-muted: oklch(0.55 0.025 340);
+
+  --card: oklch(0.99 0.015 330);
+  --card-foreground: oklch(0.25 0.04 340);
+  --popover: oklch(0.99 0.015 330);
+  --popover-foreground: oklch(0.25 0.04 340);
+
+  --primary: oklch(0.65 0.15 340);
+  --primary-foreground: oklch(0.99 0.015 330);
+  --brand-400: oklch(0.7 0.13 340);
+  --brand-500: oklch(0.65 0.15 340);
+  --brand-600: oklch(0.6 0.17 340);
+
+  --secondary: oklch(0.95 0.025 330);
+  --secondary-foreground: oklch(0.25 0.04 340);
+  --muted: oklch(0.94 0.028 330);
+  --muted-foreground: oklch(0.5 0.03 340);
+  --accent: oklch(0.92 0.032 330);
+  --accent-foreground: oklch(0.25 0.04 340);
+
+  --destructive: oklch(0.55 0.2 15);
+  --border: oklch(0.9 0.025 330);
+  --border-glass: oklch(0.65 0.15 340 / 0.15);
+  --input: oklch(0.98 0.018 330);
+  --ring: oklch(0.65 0.15 340);
+
+  --chart-1: oklch(0.65 0.15 340);
+  --chart-2: oklch(0.6 0.15 300);
+  --chart-3: oklch(0.55 0.15 15);
+  --chart-4: oklch(0.6 0.12 350);
+  --chart-5: oklch(0.55 0.1 280);
+
+  --sidebar: oklch(0.97 0.022 330);
+  --sidebar-foreground: oklch(0.25 0.04 340);
+  --sidebar-primary: oklch(0.65 0.15 340);
+  --sidebar-primary-foreground: oklch(0.99 0.015 330);
+  --sidebar-accent: oklch(0.94 0.028 330);
+  --sidebar-accent-foreground: oklch(0.25 0.04 340);
+  --sidebar-border: oklch(0.9 0.025 330);
+  --sidebar-ring: oklch(0.65 0.15 340);
+
+  --action-view: oklch(0.65 0.15 340);
+  --action-view-hover: oklch(0.6 0.17 340);
+  --action-followup: oklch(0.6 0.15 300);
+  --action-followup-hover: oklch(0.55 0.17 300);
+  --action-commit: oklch(0.55 0.15 145);
+  --action-commit-hover: oklch(0.5 0.17 145);
+  --action-verify: oklch(0.55 0.15 145);
+  --action-verify-hover: oklch(0.5 0.17 145);
+
+  --running-indicator: oklch(0.65 0.15 340);
+  --running-indicator-text: oklch(0.6 0.17 340);
+
+  --status-success: oklch(0.55 0.15 145);
+  --status-success-bg: oklch(0.55 0.15 145 / 0.15);
+  --status-warning: oklch(0.65 0.15 70);
+  --status-warning-bg: oklch(0.65 0.15 70 / 0.15);
+  --status-error: oklch(0.55 0.2 15);
+  --status-error-bg: oklch(0.55 0.2 15 / 0.15);
+  --status-info: oklch(0.55 0.15 230);
+  --status-info-bg: oklch(0.55 0.15 230 / 0.15);
+  --status-backlog: oklch(0.6 0.025 340);
+  --status-in-progress: oklch(0.65 0.15 70);
+  --status-waiting: oklch(0.6 0.12 50);
+}
+
+.blossom .content-bg {
+  background: linear-gradient(
+    135deg,
+    oklch(0.98 0.02 330),
+    oklch(0.97 0.025 330),
+    oklch(0.98 0.02 330)
+  );
+}
+
+.blossom .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #ec4899 0%, #f472b6 50%, #ec4899 100%);
+}
+
+.blossom .animated-outline-inner {
+  background: oklch(0.99 0.015 330) !important;
+  color: #ec4899 !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/bluloco.css b/temp_repo/apps/ui/src/styles/themes/bluloco.css
new file mode 100644
index 0000000000000000000000000000000000000000..c99ddbfc13372a446090e6a8391051ce2acf9629
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/bluloco.css
@@ -0,0 +1,93 @@
+/* Bluloco Light Theme - Clean light with cyan-blue accent */
+
+.bluloco {
+  /* Backgrounds */
+  --background: oklch(0.98 0.002 250);
+  --background-50: oklch(0.98 0.002 250 / 0.5);
+  --background-80: oklch(0.98 0.002 250 / 0.8);
+
+  /* Text */
+  --foreground: oklch(0.3 0.02 250);
+  --foreground-secondary: oklch(0.45 0.02 250);
+  --foreground-muted: oklch(0.55 0.015 250);
+
+  /* Card/Popover */
+  --card: oklch(0.96 0.003 250);
+  --card-foreground: oklch(0.3 0.02 250);
+  --popover: oklch(0.98 0.002 250);
+  --popover-foreground: oklch(0.3 0.02 250);
+
+  /* Primary/Brand - cyan-blue #0099e1 */
+  --primary: oklch(0.62 0.18 220);
+  --primary-foreground: oklch(1 0 0);
+
+  --brand-400: oklch(0.67 0.16 220);
+  --brand-500: oklch(0.62 0.18 220);
+  --brand-600: oklch(0.55 0.2 220);
+
+  /* Secondary */
+  --secondary: oklch(0.92 0.005 250);
+  --secondary-foreground: oklch(0.3 0.02 250);
+
+  /* Muted */
+  --muted: oklch(0.93 0.005 250);
+  --muted-foreground: oklch(0.5 0.015 250);
+
+  /* Accent */
+  --accent: oklch(0.94 0.005 250);
+  --accent-foreground: oklch(0.3 0.02 250);
+
+  /* Destructive - red #d52753 */
+  --destructive: oklch(0.5 0.22 15);
+
+  /* Borders */
+  --border: oklch(0.88 0.005 250);
+  --border-glass: oklch(0.3 0.02 250 / 0.1);
+
+  --input: oklch(0.98 0.002 250);
+  --ring: oklch(0.62 0.18 220);
+
+  /* Charts */
+  --chart-1: oklch(0.62 0.18 220);
+  --chart-2: oklch(0.55 0.15 145);
+  --chart-3: oklch(0.5 0.22 15);
+  --chart-4: oklch(0.6 0.2 320);
+  --chart-5: oklch(0.7 0.15 85);
+
+  /* Sidebar */
+  --sidebar: oklch(0.93 0.005 250);
+  --sidebar-foreground: oklch(0.3 0.02 250);
+  --sidebar-primary: oklch(0.62 0.18 220);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.9 0.005 250);
+  --sidebar-accent-foreground: oklch(0.3 0.02 250);
+  --sidebar-border: oklch(0.88 0.005 250);
+  --sidebar-ring: oklch(0.62 0.18 220);
+
+  /* Action buttons */
+  --action-view: oklch(0.62 0.18 220);
+  --action-view-hover: oklch(0.55 0.2 220);
+  --action-followup: oklch(0.55 0.15 265);
+  --action-followup-hover: oklch(0.5 0.17 265);
+  --action-commit: oklch(0.55 0.15 145);
+  --action-commit-hover: oklch(0.5 0.17 145);
+  --action-verify: oklch(0.55 0.15 145);
+  --action-verify-hover: oklch(0.5 0.17 145);
+
+  /* Running indicator */
+  --running-indicator: oklch(0.62 0.18 220);
+  --running-indicator-text: oklch(0.55 0.2 220);
+
+  /* Status colors */
+  --status-success: oklch(0.55 0.15 145);
+  --status-success-bg: oklch(0.55 0.15 145 / 0.15);
+  --status-warning: oklch(0.7 0.15 85);
+  --status-warning-bg: oklch(0.7 0.15 85 / 0.15);
+  --status-error: oklch(0.5 0.22 15);
+  --status-error-bg: oklch(0.5 0.22 15 / 0.15);
+  --status-info: oklch(0.62 0.18 220);
+  --status-info-bg: oklch(0.62 0.18 220 / 0.15);
+  --status-backlog: oklch(0.5 0 0);
+  --status-in-progress: oklch(0.7 0.15 85);
+  --status-waiting: oklch(0.65 0.18 50);
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/catppuccin.css b/temp_repo/apps/ui/src/styles/themes/catppuccin.css
new file mode 100644
index 0000000000000000000000000000000000000000..13503ff30007f638655f8a94401e0c56a7df21d2
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/catppuccin.css
@@ -0,0 +1,144 @@
+/* Catppuccin Theme */
+
+.catppuccin {
+  --background: oklch(0.18 0.02 260); /* #1e1e2e base */
+  --background-50: oklch(0.18 0.02 260 / 0.5);
+  --background-80: oklch(0.18 0.02 260 / 0.8);
+
+  --foreground: oklch(0.9 0.01 280); /* #cdd6f4 text */
+  --foreground-secondary: oklch(0.75 0.02 280); /* #bac2de subtext1 */
+  --foreground-muted: oklch(0.6 0.03 280); /* #a6adc8 subtext0 */
+
+  --card: oklch(0.22 0.02 260); /* #313244 surface0 */
+  --card-foreground: oklch(0.9 0.01 280);
+  --popover: oklch(0.2 0.02 260);
+  --popover-foreground: oklch(0.9 0.01 280);
+
+  --primary: oklch(0.75 0.15 280); /* #cba6f7 mauve */
+  --primary-foreground: oklch(0.18 0.02 260);
+
+  --brand-400: oklch(0.8 0.15 280);
+  --brand-500: oklch(0.75 0.15 280); /* Mauve */
+  --brand-600: oklch(0.7 0.17 280);
+
+  --secondary: oklch(0.26 0.02 260); /* #45475a surface1 */
+  --secondary-foreground: oklch(0.9 0.01 280);
+
+  --muted: oklch(0.26 0.02 260);
+  --muted-foreground: oklch(0.6 0.03 280);
+
+  --accent: oklch(0.3 0.03 260); /* #585b70 surface2 */
+  --accent-foreground: oklch(0.9 0.01 280);
+
+  --destructive: oklch(0.65 0.2 15); /* #f38ba8 red */
+
+  --border: oklch(0.35 0.03 260);
+  --border-glass: oklch(0.75 0.15 280 / 0.3);
+
+  --input: oklch(0.22 0.02 260);
+  --ring: oklch(0.75 0.15 280);
+
+  --chart-1: oklch(0.75 0.15 280); /* Mauve */
+  --chart-2: oklch(0.75 0.15 220); /* Blue #89b4fa */
+  --chart-3: oklch(0.8 0.15 160); /* Green #a6e3a1 */
+  --chart-4: oklch(0.8 0.15 350); /* Pink #f5c2e7 */
+  --chart-5: oklch(0.85 0.12 90); /* Yellow #f9e2af */
+
+  --sidebar: oklch(0.16 0.02 260); /* #181825 mantle */
+  --sidebar-foreground: oklch(0.9 0.01 280);
+  --sidebar-primary: oklch(0.75 0.15 280);
+  --sidebar-primary-foreground: oklch(0.18 0.02 260);
+  --sidebar-accent: oklch(0.26 0.02 260);
+  --sidebar-accent-foreground: oklch(0.9 0.01 280);
+  --sidebar-border: oklch(0.35 0.03 260);
+  --sidebar-ring: oklch(0.75 0.15 280);
+
+  /* Action button colors - Catppuccin mauve/pink theme */
+  --action-view: oklch(0.75 0.15 280); /* Mauve */
+  --action-view-hover: oklch(0.7 0.17 280);
+  --action-followup: oklch(0.75 0.15 220); /* Blue */
+  --action-followup-hover: oklch(0.7 0.17 220);
+  --action-commit: oklch(0.8 0.15 160); /* Green */
+  --action-commit-hover: oklch(0.75 0.17 160);
+  --action-verify: oklch(0.8 0.15 160); /* Green */
+  --action-verify-hover: oklch(0.75 0.17 160);
+
+  /* Running indicator - Mauve */
+  --running-indicator: oklch(0.75 0.15 280);
+  --running-indicator-text: oklch(0.8 0.13 280);
+}
+
+/* ========================================
+   ONE DARK THEME
+   Atom's iconic One Dark theme
+   ======================================== */
+
+/* Theme-specific overrides */
+
+.catppuccin .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #cba6f7 0%, #f5c2e7 50%, #cba6f7 100%);
+}
+
+.catppuccin .animated-outline-inner {
+  background: oklch(0.18 0.02 260) !important;
+  color: #cba6f7 !important;
+}
+
+.catppuccin [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(0.24 0.03 260) !important;
+  color: #f5c2e7 !important;
+}
+
+.catppuccin .slider-track {
+  background: oklch(0.26 0.02 260);
+}
+
+.catppuccin .slider-range {
+  background: linear-gradient(to right, #cba6f7, #89b4fa);
+}
+
+.catppuccin .slider-thumb {
+  background: oklch(0.22 0.02 260);
+  border-color: #cba6f7;
+}
+
+.catppuccin .xml-highlight {
+  color: oklch(0.9 0.01 280); /* #cdd6f4 */
+}
+
+.catppuccin .xml-tag-bracket {
+  color: oklch(0.65 0.2 15); /* #f38ba8 red */
+}
+
+.catppuccin .xml-tag-name {
+  color: oklch(0.65 0.2 15); /* Red for tags */
+}
+
+.catppuccin .xml-attribute-name {
+  color: oklch(0.75 0.15 280); /* #cba6f7 mauve */
+}
+
+.catppuccin .xml-attribute-equals {
+  color: oklch(0.75 0.02 280); /* Subtext */
+}
+
+.catppuccin .xml-attribute-value {
+  color: oklch(0.8 0.15 160); /* #a6e3a1 green */
+}
+
+.catppuccin .xml-comment {
+  color: oklch(0.5 0.04 280); /* Overlay */
+  font-style: italic;
+}
+
+.catppuccin .xml-cdata {
+  color: oklch(0.75 0.15 220); /* #89b4fa blue */
+}
+
+.catppuccin .xml-doctype {
+  color: oklch(0.8 0.15 350); /* #f5c2e7 pink */
+}
+
+.catppuccin .xml-text {
+  color: oklch(0.9 0.01 280); /* Text */
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/cream.css b/temp_repo/apps/ui/src/styles/themes/cream.css
new file mode 100644
index 0000000000000000000000000000000000000000..30d90be35db69eb5934fff5516289239461ea47b
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/cream.css
@@ -0,0 +1,115 @@
+/* Cream Theme */
+
+.cream {
+  /* Cream Theme - Warm, soft, easy on the eyes */
+  --background: oklch(0.95 0.01 70); /* Warm cream background */
+  --background-50: oklch(0.95 0.01 70 / 0.5);
+  --background-80: oklch(0.95 0.01 70 / 0.8);
+
+  --foreground: oklch(0.25 0.02 60); /* Dark warm brown */
+  --foreground-secondary: oklch(0.45 0.02 60); /* Medium brown */
+  --foreground-muted: oklch(0.55 0.02 60); /* Light brown */
+
+  --card: oklch(0.98 0.005 70); /* Slightly lighter cream */
+  --card-foreground: oklch(0.25 0.02 60);
+  --popover: oklch(0.97 0.008 70);
+  --popover-foreground: oklch(0.25 0.02 60);
+
+  --primary: oklch(0.5 0.12 45); /* Warm terracotta/rust */
+  --primary-foreground: oklch(0.98 0.005 70);
+
+  --brand-400: oklch(0.55 0.12 45);
+  --brand-500: oklch(0.5 0.12 45); /* Terracotta */
+  --brand-600: oklch(0.45 0.13 45);
+
+  --secondary: oklch(0.88 0.02 70);
+  --secondary-foreground: oklch(0.25 0.02 60);
+
+  --muted: oklch(0.9 0.015 70);
+  --muted-foreground: oklch(0.45 0.02 60);
+
+  --accent: oklch(0.85 0.025 70);
+  --accent-foreground: oklch(0.25 0.02 60);
+
+  --destructive: oklch(0.55 0.22 25); /* Warm red */
+
+  --border: oklch(0.85 0.015 70);
+  --border-glass: oklch(0.5 0.12 45 / 0.2);
+
+  --input: oklch(0.98 0.005 70);
+  --ring: oklch(0.5 0.12 45);
+
+  --chart-1: oklch(0.5 0.12 45); /* Terracotta */
+  --chart-2: oklch(0.55 0.15 35); /* Burnt orange */
+  --chart-3: oklch(0.6 0.12 100); /* Olive */
+  --chart-4: oklch(0.5 0.15 20); /* Deep rust */
+  --chart-5: oklch(0.65 0.1 80); /* Golden */
+
+  --sidebar: oklch(0.93 0.012 70);
+  --sidebar-foreground: oklch(0.25 0.02 60);
+  --sidebar-primary: oklch(0.5 0.12 45);
+  --sidebar-primary-foreground: oklch(0.98 0.005 70);
+  --sidebar-accent: oklch(0.88 0.02 70);
+  --sidebar-accent-foreground: oklch(0.25 0.02 60);
+  --sidebar-border: oklch(0.85 0.015 70);
+  --sidebar-ring: oklch(0.5 0.12 45);
+
+  /* Action button colors - Warm earth tones */
+  --action-view: oklch(0.5 0.12 45); /* Terracotta */
+  --action-view-hover: oklch(0.45 0.13 45);
+  --action-followup: oklch(0.55 0.15 35); /* Burnt orange */
+  --action-followup-hover: oklch(0.5 0.16 35);
+  --action-commit: oklch(0.55 0.12 130); /* Sage green */
+  --action-commit-hover: oklch(0.5 0.13 130);
+  --action-verify: oklch(0.55 0.12 130); /* Sage green */
+  --action-verify-hover: oklch(0.5 0.13 130);
+
+  /* Running indicator - Terracotta */
+  --running-indicator: oklch(0.5 0.12 45);
+  --running-indicator-text: oklch(0.55 0.12 45);
+
+  /* Status colors - Cream theme */
+  --status-success: oklch(0.55 0.15 130);
+  --status-success-bg: oklch(0.55 0.15 130 / 0.15);
+  --status-warning: oklch(0.6 0.15 70);
+  --status-warning-bg: oklch(0.6 0.15 70 / 0.15);
+  --status-error: oklch(0.55 0.22 25);
+  --status-error-bg: oklch(0.55 0.22 25 / 0.15);
+  --status-info: oklch(0.5 0.15 230);
+  --status-info-bg: oklch(0.5 0.15 230 / 0.15);
+  --status-backlog: oklch(0.6 0.02 60);
+  --status-in-progress: oklch(0.6 0.15 70);
+  --status-waiting: oklch(0.58 0.13 50);
+}
+
+/* Theme-specific overrides */
+
+/* Cream theme scrollbar */
+.cream ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.cream ::-webkit-scrollbar-thumb,
+.cream .scrollbar-visible::-webkit-scrollbar-thumb {
+  background: oklch(0.7 0.03 60);
+  border-radius: 4px;
+}
+
+.cream ::-webkit-scrollbar-thumb:hover,
+.cream .scrollbar-visible::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.6 0.04 60);
+}
+
+.cream ::-webkit-scrollbar-track,
+.cream .scrollbar-visible::-webkit-scrollbar-track {
+  background: oklch(0.9 0.015 70);
+}
+
+.cream .scrollbar-styled::-webkit-scrollbar-thumb {
+  background: oklch(0.7 0.03 60);
+}
+
+.cream .scrollbar-styled::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.6 0.04 60);
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/dark.css b/temp_repo/apps/ui/src/styles/themes/dark.css
new file mode 100644
index 0000000000000000000000000000000000000000..5a702c2512ceb04b64d3cad683f83a1694cfaff0
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/dark.css
@@ -0,0 +1,166 @@
+/* Dark Theme */
+
+:root.dark {
+  /* Deep dark backgrounds - zinc-950 family */
+  --background: oklch(0.04 0 0); /* zinc-950 */
+  --background-50: oklch(0.04 0 0 / 0.5); /* zinc-950/50 */
+  --background-80: oklch(0.04 0 0 / 0.8); /* zinc-950/80 */
+
+  /* Text colors following hierarchy */
+  --foreground: oklch(1 0 0); /* text-white */
+  --foreground-secondary: oklch(0.588 0 0); /* text-zinc-400 */
+  --foreground-muted: oklch(0.525 0 0); /* text-zinc-500 */
+
+  /* Card and popover backgrounds */
+  --card: oklch(0.14 0 0); /* slightly lighter than background for contrast */
+  --card-foreground: oklch(1 0 0);
+  --popover: oklch(0.1 0 0); /* slightly lighter than background */
+  --popover-foreground: oklch(1 0 0);
+
+  /* Brand colors - purple/violet theme */
+  --primary: oklch(0.55 0.25 265); /* brand-500 */
+  --primary-foreground: oklch(1 0 0);
+  --brand-400: oklch(0.6 0.22 265);
+  --brand-500: oklch(0.55 0.25 265);
+  --brand-600: oklch(0.5 0.28 270); /* purple-600 for gradients */
+
+  /* Glass morphism borders and accents */
+  --secondary: oklch(1 0 0 / 0.05); /* bg-white/5 */
+  --secondary-foreground: oklch(1 0 0);
+  --muted: oklch(0.176 0 0); /* zinc-800 */
+  --muted-foreground: oklch(0.588 0 0); /* text-zinc-400 */
+  --accent: oklch(1 0 0 / 0.1); /* bg-white/10 for hover */
+  --accent-foreground: oklch(1 0 0);
+
+  /* Borders with transparency for glass effect */
+  --border: oklch(0.176 0 0); /* zinc-800 */
+  --border-glass: oklch(1 0 0 / 0.1); /* white/10 for glass morphism */
+  --destructive: oklch(0.6 0.25 25);
+  --input: oklch(0.04 0 0 / 0.8); /* Semi-transparent dark */
+  --ring: oklch(0.55 0.25 265);
+
+  /* Chart colors with brand theme */
+  --chart-1: oklch(0.55 0.25 265);
+  --chart-2: oklch(0.65 0.2 160);
+  --chart-3: oklch(0.75 0.2 70);
+  --chart-4: oklch(0.6 0.25 300);
+  --chart-5: oklch(0.6 0.25 20);
+
+  /* Sidebar with glass morphism */
+  --sidebar: oklch(0.04 0 0 / 0.5); /* zinc-950/50 with backdrop blur */
+  --sidebar-foreground: oklch(1 0 0);
+  --sidebar-primary: oklch(0.55 0.25 265);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(1 0 0 / 0.05); /* bg-white/5 */
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-border: oklch(1 0 0 / 0.1); /* white/10 for glass borders */
+  --sidebar-ring: oklch(0.55 0.25 265);
+
+  /* Action button colors */
+  --action-view: oklch(0.6 0.25 265); /* Purple */
+  --action-view-hover: oklch(0.55 0.27 270);
+  --action-followup: oklch(0.6 0.2 230); /* Blue */
+  --action-followup-hover: oklch(0.55 0.22 230);
+  --action-commit: oklch(0.55 0.2 140); /* Green */
+  --action-commit-hover: oklch(0.5 0.22 140);
+  --action-verify: oklch(0.55 0.2 140); /* Green */
+  --action-verify-hover: oklch(0.5 0.22 140);
+
+  /* Running indicator - Purple */
+  --running-indicator: oklch(0.6 0.25 265);
+  --running-indicator-text: oklch(0.65 0.22 265);
+
+  /* Status colors - Dark mode */
+  --status-success: oklch(0.65 0.2 140);
+  --status-success-bg: oklch(0.65 0.2 140 / 0.2);
+  --status-warning: oklch(0.75 0.15 70);
+  --status-warning-bg: oklch(0.75 0.15 70 / 0.2);
+  --status-error: oklch(0.65 0.22 25);
+  --status-error-bg: oklch(0.65 0.22 25 / 0.2);
+  --status-info: oklch(0.65 0.2 230);
+  --status-info-bg: oklch(0.65 0.2 230 / 0.2);
+  --status-backlog: oklch(0.6 0 0);
+  --status-in-progress: oklch(0.75 0.15 70);
+  --status-waiting: oklch(0.7 0.18 50);
+
+  /* Shadow tokens - darker for dark mode */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
+}
+
+/* Theme-specific overrides */
+
+.dark .content-bg {
+  background: linear-gradient(135deg, oklch(0.04 0 0), oklch(0.08 0 0), oklch(0.04 0 0));
+}
+
+.dark .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #a855f7 0%, #3b82f6 50%, #a855f7 100%);
+}
+
+.dark .animated-outline-inner {
+  background: oklch(0.15 0 0) !important;
+  color: #c084fc !important;
+}
+
+.dark [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(0.2 0.02 270) !important;
+  color: #e9d5ff !important;
+}
+
+.dark .slider-track {
+  background: oklch(0.2 0 0);
+}
+
+.dark .slider-range {
+  background: linear-gradient(to right, #a855f7, #3b82f6);
+}
+
+.dark .slider-thumb {
+  background: oklch(0.25 0 0);
+  border-color: oklch(0.4 0 0);
+}
+
+.dark .xml-highlight {
+  color: oklch(0.9 0 0); /* Default light text */
+}
+
+.dark .xml-tag-bracket {
+  color: oklch(0.7 0.12 220); /* Soft blue for < > */
+}
+
+.dark .xml-tag-name {
+  color: oklch(0.75 0.2 25); /* Coral/salmon for tag names */
+}
+
+.dark .xml-attribute-name {
+  color: oklch(0.8 0.15 280); /* Light purple for attributes */
+}
+
+.dark .xml-attribute-equals {
+  color: oklch(0.6 0 0); /* Gray for = */
+}
+
+.dark .xml-attribute-value {
+  color: oklch(0.8 0.18 145); /* Bright green for strings */
+}
+
+.dark .xml-comment {
+  color: oklch(0.55 0.05 100); /* Muted for comments */
+  font-style: italic;
+}
+
+.dark .xml-cdata {
+  color: oklch(0.7 0.12 200); /* Teal for CDATA */
+}
+
+.dark .xml-doctype {
+  color: oklch(0.7 0.15 280); /* Purple for DOCTYPE */
+}
+
+.dark .xml-text {
+  color: oklch(0.85 0 0); /* Off-white for text */
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/dracula.css b/temp_repo/apps/ui/src/styles/themes/dracula.css
new file mode 100644
index 0000000000000000000000000000000000000000..c7e8487510d997b9c068d297226d985596d331a2
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/dracula.css
@@ -0,0 +1,144 @@
+/* Dracula Theme */
+
+.dracula {
+  --background: oklch(0.18 0.02 280); /* #282a36 */
+  --background-50: oklch(0.18 0.02 280 / 0.5);
+  --background-80: oklch(0.18 0.02 280 / 0.8);
+
+  --foreground: oklch(0.95 0.01 280); /* #f8f8f2 */
+  --foreground-secondary: oklch(0.7 0.05 280);
+  --foreground-muted: oklch(0.55 0.08 280); /* #6272a4 */
+
+  --card: oklch(0.22 0.02 280); /* #44475a */
+  --card-foreground: oklch(0.95 0.01 280);
+  --popover: oklch(0.2 0.02 280);
+  --popover-foreground: oklch(0.95 0.01 280);
+
+  --primary: oklch(0.7 0.2 320); /* #bd93f9 purple */
+  --primary-foreground: oklch(0.18 0.02 280);
+
+  --brand-400: oklch(0.75 0.2 320);
+  --brand-500: oklch(0.7 0.2 320); /* #bd93f9 */
+  --brand-600: oklch(0.65 0.22 320);
+
+  --secondary: oklch(0.28 0.03 280); /* #44475a */
+  --secondary-foreground: oklch(0.95 0.01 280);
+
+  --muted: oklch(0.28 0.03 280);
+  --muted-foreground: oklch(0.55 0.08 280); /* #6272a4 */
+
+  --accent: oklch(0.32 0.04 280);
+  --accent-foreground: oklch(0.95 0.01 280);
+
+  --destructive: oklch(0.65 0.25 15); /* #ff5555 */
+
+  --border: oklch(0.35 0.05 280);
+  --border-glass: oklch(0.7 0.2 320 / 0.3);
+
+  --input: oklch(0.22 0.02 280);
+  --ring: oklch(0.7 0.2 320);
+
+  --chart-1: oklch(0.7 0.2 320); /* Purple */
+  --chart-2: oklch(0.75 0.2 180); /* Cyan #8be9fd */
+  --chart-3: oklch(0.8 0.2 130); /* Green #50fa7b */
+  --chart-4: oklch(0.7 0.25 350); /* Pink #ff79c6 */
+  --chart-5: oklch(0.85 0.2 90); /* Yellow #f1fa8c */
+
+  --sidebar: oklch(0.16 0.02 280);
+  --sidebar-foreground: oklch(0.95 0.01 280);
+  --sidebar-primary: oklch(0.7 0.2 320);
+  --sidebar-primary-foreground: oklch(0.18 0.02 280);
+  --sidebar-accent: oklch(0.28 0.03 280);
+  --sidebar-accent-foreground: oklch(0.95 0.01 280);
+  --sidebar-border: oklch(0.35 0.05 280);
+  --sidebar-ring: oklch(0.7 0.2 320);
+
+  /* Action button colors - Dracula purple/pink theme */
+  --action-view: oklch(0.7 0.2 320); /* Purple */
+  --action-view-hover: oklch(0.65 0.22 320);
+  --action-followup: oklch(0.65 0.25 350); /* Pink */
+  --action-followup-hover: oklch(0.6 0.27 350);
+  --action-commit: oklch(0.75 0.2 130); /* Green */
+  --action-commit-hover: oklch(0.7 0.22 130);
+  --action-verify: oklch(0.75 0.2 130); /* Green */
+  --action-verify-hover: oklch(0.7 0.22 130);
+
+  /* Running indicator - Purple */
+  --running-indicator: oklch(0.7 0.2 320);
+  --running-indicator-text: oklch(0.75 0.18 320);
+}
+
+/* ========================================
+   NORD THEME
+   Inspired by the Arctic, north-bluish color palette
+   ======================================== */
+
+/* Theme-specific overrides */
+
+.dracula .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #bd93f9 0%, #ff79c6 50%, #bd93f9 100%);
+}
+
+.dracula .animated-outline-inner {
+  background: oklch(0.18 0.02 280) !important;
+  color: #bd93f9 !important;
+}
+
+.dracula [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(0.24 0.03 280) !important;
+  color: #ff79c6 !important;
+}
+
+.dracula .slider-track {
+  background: oklch(0.28 0.03 280);
+}
+
+.dracula .slider-range {
+  background: linear-gradient(to right, #bd93f9, #ff79c6);
+}
+
+.dracula .slider-thumb {
+  background: oklch(0.22 0.02 280);
+  border-color: #bd93f9;
+}
+
+.dracula .xml-highlight {
+  color: oklch(0.95 0.01 280); /* #f8f8f2 */
+}
+
+.dracula .xml-tag-bracket {
+  color: oklch(0.7 0.25 350); /* Pink #ff79c6 */
+}
+
+.dracula .xml-tag-name {
+  color: oklch(0.7 0.25 350); /* Pink for tags */
+}
+
+.dracula .xml-attribute-name {
+  color: oklch(0.8 0.2 130); /* Green #50fa7b */
+}
+
+.dracula .xml-attribute-equals {
+  color: oklch(0.95 0.01 280); /* White */
+}
+
+.dracula .xml-attribute-value {
+  color: oklch(0.85 0.2 90); /* Yellow #f1fa8c */
+}
+
+.dracula .xml-comment {
+  color: oklch(0.55 0.08 280); /* #6272a4 */
+  font-style: italic;
+}
+
+.dracula .xml-cdata {
+  color: oklch(0.75 0.2 180); /* Cyan */
+}
+
+.dracula .xml-doctype {
+  color: oklch(0.7 0.2 320); /* Purple #bd93f9 */
+}
+
+.dracula .xml-text {
+  color: oklch(0.95 0.01 280); /* White */
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/ember.css b/temp_repo/apps/ui/src/styles/themes/ember.css
new file mode 100644
index 0000000000000000000000000000000000000000..a7236ff0c3278836b6dd253af1e78256ace59d09
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/ember.css
@@ -0,0 +1,151 @@
+/* Ember Theme - Warm orange accent on dark background */
+
+.ember {
+  /* Backgrounds - from bgMain #272822 */
+  --background: oklch(0.2 0.02 100); /* #272822 */
+  --background-50: oklch(0.2 0.02 100 / 0.5);
+  --background-80: oklch(0.2 0.02 100 / 0.8);
+
+  /* Text - from textMain #f8f8f2, textDim #8f908a */
+  --foreground: oklch(0.97 0.01 100); /* #f8f8f2 */
+  --foreground-secondary: oklch(0.65 0.02 100);
+  --foreground-muted: oklch(0.6 0.02 100); /* #8f908a */
+
+  /* Card/Popover - derived from bgActivity #3e3d32 */
+  --card: oklch(0.28 0.02 100); /* #3e3d32 */
+  --card-foreground: oklch(0.97 0.01 100);
+  --popover: oklch(0.24 0.02 100);
+  --popover-foreground: oklch(0.97 0.01 100);
+
+  /* Primary/Brand - from accent #fd971f (orange) */
+  --primary: oklch(0.75 0.18 60); /* #fd971f */
+  --primary-foreground: oklch(0.18 0.02 100); /* #1e1f1c */
+
+  --brand-400: oklch(0.8 0.16 60); /* #fdbf6f lighter */
+  --brand-500: oklch(0.75 0.18 60); /* #fd971f */
+  --brand-600: oklch(0.68 0.2 55);
+
+  /* Secondary - from bgActivity #3e3d32 */
+  --secondary: oklch(0.28 0.02 100);
+  --secondary-foreground: oklch(0.97 0.01 100);
+
+  /* Muted */
+  --muted: oklch(0.28 0.02 100);
+  --muted-foreground: oklch(0.6 0.02 100);
+
+  /* Accent - from accentDim */
+  --accent: oklch(0.32 0.04 80);
+  --accent-foreground: oklch(0.97 0.01 100);
+
+  /* Destructive - from error #f92672 */
+  --destructive: oklch(0.6 0.28 350); /* #f92672 */
+
+  /* Borders - from border #49483e */
+  --border: oklch(0.35 0.03 90); /* #49483e */
+  --border-glass: oklch(0.75 0.18 60 / 0.3);
+
+  --input: oklch(0.24 0.02 100);
+  --ring: oklch(0.75 0.18 60);
+
+  /* Charts - using theme colors */
+  --chart-1: oklch(0.75 0.18 60); /* Orange accent */
+  --chart-2: oklch(0.75 0.22 130); /* Green #a6e22e */
+  --chart-3: oklch(0.85 0.15 95); /* Yellow #e6db74 */
+  --chart-4: oklch(0.6 0.28 350); /* Pink #f92672 */
+  --chart-5: oklch(0.7 0.2 200); /* Blue for variety */
+
+  /* Sidebar - from bgSidebar #1e1f1c */
+  --sidebar: oklch(0.16 0.02 100); /* #1e1f1c */
+  --sidebar-foreground: oklch(0.97 0.01 100);
+  --sidebar-primary: oklch(0.75 0.18 60);
+  --sidebar-primary-foreground: oklch(0.18 0.02 100);
+  --sidebar-accent: oklch(0.28 0.02 100);
+  --sidebar-accent-foreground: oklch(0.97 0.01 100);
+  --sidebar-border: oklch(0.35 0.03 90);
+  --sidebar-ring: oklch(0.75 0.18 60);
+
+  /* Action buttons - orange/green theme */
+  --action-view: oklch(0.75 0.18 60); /* Orange */
+  --action-view-hover: oklch(0.7 0.2 55);
+  --action-followup: oklch(0.7 0.2 200); /* Blue */
+  --action-followup-hover: oklch(0.65 0.22 200);
+  --action-commit: oklch(0.75 0.22 130); /* Green #a6e22e */
+  --action-commit-hover: oklch(0.7 0.24 130);
+  --action-verify: oklch(0.75 0.22 130);
+  --action-verify-hover: oklch(0.7 0.24 130);
+
+  /* Running indicator - Orange */
+  --running-indicator: oklch(0.75 0.18 60);
+  --running-indicator-text: oklch(0.8 0.16 60);
+}
+
+/* Theme-specific overrides */
+
+.ember .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #fd971f 0%, #f92672 50%, #fd971f 100%);
+}
+
+.ember .animated-outline-inner {
+  background: oklch(0.2 0.02 100) !important;
+  color: #fd971f !important;
+}
+
+.ember [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(0.28 0.02 100) !important;
+  color: #fdbf6f !important;
+}
+
+.ember .slider-track {
+  background: oklch(0.28 0.02 100);
+}
+
+.ember .slider-range {
+  background: linear-gradient(to right, #fd971f, #fdbf6f);
+}
+
+.ember .slider-thumb {
+  background: oklch(0.2 0.02 100);
+  border-color: #fd971f;
+}
+
+/* XML Syntax Highlighting */
+.ember .xml-highlight {
+  color: oklch(0.97 0.01 100);
+}
+
+.ember .xml-tag-bracket {
+  color: oklch(0.6 0.28 350); /* Pink */
+}
+
+.ember .xml-tag-name {
+  color: oklch(0.6 0.28 350); /* Pink */
+}
+
+.ember .xml-attribute-name {
+  color: oklch(0.75 0.22 130); /* Green */
+}
+
+.ember .xml-attribute-equals {
+  color: oklch(0.97 0.01 100);
+}
+
+.ember .xml-attribute-value {
+  color: oklch(0.85 0.15 95); /* Yellow */
+}
+
+.ember .xml-comment {
+  color: oklch(0.6 0.02 100);
+  font-style: italic;
+}
+
+.ember .xml-cdata {
+  color: oklch(0.7 0.2 200); /* Blue */
+}
+
+.ember .xml-doctype {
+  color: oklch(0.75 0.18 60); /* Orange */
+}
+
+.ember .xml-text {
+  color: oklch(0.97 0.01 100);
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/feather.css b/temp_repo/apps/ui/src/styles/themes/feather.css
new file mode 100644
index 0000000000000000000000000000000000000000..f0e3a0540d560d47db517131d769f581bd35c4ca
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/feather.css
@@ -0,0 +1,93 @@
+/* Feather Theme - Clean white with orange accent */
+
+.feather {
+  /* Backgrounds */
+  --background: oklch(1 0 0);
+  --background-50: oklch(1 0 0 / 0.5);
+  --background-80: oklch(1 0 0 / 0.8);
+
+  /* Text - dark blue-gray #395063 */
+  --foreground: oklch(0.38 0.03 230);
+  --foreground-secondary: oklch(0.5 0.025 230);
+  --foreground-muted: oklch(0.6 0.02 230);
+
+  /* Card/Popover */
+  --card: oklch(0.99 0.001 250);
+  --card-foreground: oklch(0.38 0.03 230);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.38 0.03 230);
+
+  /* Primary/Brand - orange #FF7B2E */
+  --primary: oklch(0.7 0.2 45);
+  --primary-foreground: oklch(1 0 0);
+
+  --brand-400: oklch(0.75 0.18 45);
+  --brand-500: oklch(0.7 0.2 45);
+  --brand-600: oklch(0.62 0.22 40);
+
+  /* Secondary */
+  --secondary: oklch(0.95 0.003 250);
+  --secondary-foreground: oklch(0.38 0.03 230);
+
+  /* Muted */
+  --muted: oklch(0.96 0.003 250);
+  --muted-foreground: oklch(0.55 0.02 230);
+
+  /* Accent */
+  --accent: oklch(0.97 0.003 250);
+  --accent-foreground: oklch(0.38 0.03 230);
+
+  /* Destructive - orange-red */
+  --destructive: oklch(0.55 0.22 30);
+
+  /* Borders */
+  --border: oklch(0.9 0.003 250);
+  --border-glass: oklch(0.38 0.03 230 / 0.1);
+
+  --input: oklch(1 0 0);
+  --ring: oklch(0.7 0.2 45);
+
+  /* Charts */
+  --chart-1: oklch(0.7 0.2 45);
+  --chart-2: oklch(0.6 0.15 175);
+  --chart-3: oklch(0.6 0.18 320);
+  --chart-4: oklch(0.55 0.15 220);
+  --chart-5: oklch(0.55 0.22 30);
+
+  /* Sidebar */
+  --sidebar: oklch(0.99 0.001 250);
+  --sidebar-foreground: oklch(0.38 0.03 230);
+  --sidebar-primary: oklch(0.7 0.2 45);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.96 0.003 250);
+  --sidebar-accent-foreground: oklch(0.38 0.03 230);
+  --sidebar-border: oklch(0.92 0.003 250);
+  --sidebar-ring: oklch(0.7 0.2 45);
+
+  /* Action buttons */
+  --action-view: oklch(0.7 0.2 45);
+  --action-view-hover: oklch(0.62 0.22 40);
+  --action-followup: oklch(0.55 0.15 220);
+  --action-followup-hover: oklch(0.5 0.17 220);
+  --action-commit: oklch(0.6 0.15 175);
+  --action-commit-hover: oklch(0.55 0.17 175);
+  --action-verify: oklch(0.6 0.15 175);
+  --action-verify-hover: oklch(0.55 0.17 175);
+
+  /* Running indicator */
+  --running-indicator: oklch(0.7 0.2 45);
+  --running-indicator-text: oklch(0.62 0.22 40);
+
+  /* Status colors */
+  --status-success: oklch(0.6 0.15 175);
+  --status-success-bg: oklch(0.6 0.15 175 / 0.15);
+  --status-warning: oklch(0.7 0.2 45);
+  --status-warning-bg: oklch(0.7 0.2 45 / 0.15);
+  --status-error: oklch(0.55 0.22 30);
+  --status-error-bg: oklch(0.55 0.22 30 / 0.15);
+  --status-info: oklch(0.55 0.15 220);
+  --status-info-bg: oklch(0.55 0.15 220 / 0.15);
+  --status-backlog: oklch(0.5 0 0);
+  --status-in-progress: oklch(0.7 0.2 45);
+  --status-waiting: oklch(0.65 0.18 50);
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/forest.css b/temp_repo/apps/ui/src/styles/themes/forest.css
new file mode 100644
index 0000000000000000000000000000000000000000..a065da1a9ce6601fe4092ecb30388f880ef2ed8b
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/forest.css
@@ -0,0 +1,98 @@
+/* Forest Theme - Deep green dark theme */
+
+.forest {
+  --background: oklch(0.12 0.02 150);
+  --background-50: oklch(0.12 0.02 150 / 0.5);
+  --background-80: oklch(0.12 0.02 150 / 0.8);
+
+  --foreground: oklch(0.95 0.02 150);
+  --foreground-secondary: oklch(0.7 0.03 150);
+  --foreground-muted: oklch(0.6 0.03 150);
+
+  --card: oklch(0.16 0.025 150);
+  --card-foreground: oklch(0.95 0.02 150);
+  --popover: oklch(0.14 0.022 150);
+  --popover-foreground: oklch(0.95 0.02 150);
+
+  --primary: oklch(0.6 0.18 145);
+  --primary-foreground: oklch(0.12 0.02 150);
+  --brand-400: oklch(0.65 0.16 145);
+  --brand-500: oklch(0.6 0.18 145);
+  --brand-600: oklch(0.55 0.2 145);
+
+  --secondary: oklch(1 0 0 / 0.05);
+  --secondary-foreground: oklch(0.95 0.02 150);
+  --muted: oklch(0.2 0.03 150);
+  --muted-foreground: oklch(0.65 0.03 150);
+  --accent: oklch(1 0 0 / 0.08);
+  --accent-foreground: oklch(0.95 0.02 150);
+
+  --destructive: oklch(0.6 0.22 25);
+  --border: oklch(0.25 0.04 150);
+  --border-glass: oklch(1 0 0 / 0.1);
+  --input: oklch(0.14 0.022 150);
+  --ring: oklch(0.6 0.18 145);
+
+  --chart-1: oklch(0.6 0.18 145);
+  --chart-2: oklch(0.65 0.15 100);
+  --chart-3: oklch(0.7 0.12 180);
+  --chart-4: oklch(0.6 0.2 200);
+  --chart-5: oklch(0.55 0.15 50);
+
+  --sidebar: oklch(0.1 0.02 150 / 0.8);
+  --sidebar-foreground: oklch(0.95 0.02 150);
+  --sidebar-primary: oklch(0.6 0.18 145);
+  --sidebar-primary-foreground: oklch(0.12 0.02 150);
+  --sidebar-accent: oklch(1 0 0 / 0.05);
+  --sidebar-accent-foreground: oklch(0.95 0.02 150);
+  --sidebar-border: oklch(1 0 0 / 0.1);
+  --sidebar-ring: oklch(0.6 0.18 145);
+
+  --action-view: oklch(0.6 0.18 145);
+  --action-view-hover: oklch(0.55 0.2 145);
+  --action-followup: oklch(0.6 0.15 180);
+  --action-followup-hover: oklch(0.55 0.17 180);
+  --action-commit: oklch(0.6 0.18 145);
+  --action-commit-hover: oklch(0.55 0.2 145);
+  --action-verify: oklch(0.6 0.18 145);
+  --action-verify-hover: oklch(0.55 0.2 145);
+
+  --running-indicator: oklch(0.6 0.18 145);
+  --running-indicator-text: oklch(0.65 0.16 145);
+
+  --status-success: oklch(0.65 0.18 145);
+  --status-success-bg: oklch(0.65 0.18 145 / 0.2);
+  --status-warning: oklch(0.7 0.15 80);
+  --status-warning-bg: oklch(0.7 0.15 80 / 0.2);
+  --status-error: oklch(0.6 0.22 25);
+  --status-error-bg: oklch(0.6 0.22 25 / 0.2);
+  --status-info: oklch(0.6 0.15 180);
+  --status-info-bg: oklch(0.6 0.15 180 / 0.2);
+  --status-backlog: oklch(0.55 0.03 150);
+  --status-in-progress: oklch(0.7 0.15 80);
+  --status-waiting: oklch(0.65 0.12 60);
+
+  --shadow-xs: 0 1px 2px rgba(0, 20, 10, 0.3);
+  --shadow-sm: 0 1px 3px rgba(0, 20, 10, 0.4), 0 1px 2px rgba(0, 20, 10, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 20, 10, 0.4), 0 2px 4px -1px rgba(0, 20, 10, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 20, 10, 0.4), 0 4px 6px -2px rgba(0, 20, 10, 0.2);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 20, 10, 0.5), 0 10px 10px -5px rgba(0, 20, 10, 0.3);
+}
+
+.forest .content-bg {
+  background: linear-gradient(
+    135deg,
+    oklch(0.12 0.02 150),
+    oklch(0.15 0.025 150),
+    oklch(0.12 0.02 150)
+  );
+}
+
+.forest .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #22c55e 0%, #16a34a 50%, #22c55e 100%);
+}
+
+.forest .animated-outline-inner {
+  background: oklch(0.16 0.025 150) !important;
+  color: #86efac !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/github.css b/temp_repo/apps/ui/src/styles/themes/github.css
new file mode 100644
index 0000000000000000000000000000000000000000..62287aa8f4f2be9eda3074154ea71148d7ddfaa4
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/github.css
@@ -0,0 +1,87 @@
+/* GitHub Light Theme */
+
+.github {
+  --background: oklch(0.99 0 0);
+  --background-50: oklch(0.99 0 0 / 0.5);
+  --background-80: oklch(0.99 0 0 / 0.8);
+
+  --foreground: oklch(0.2 0 0);
+  --foreground-secondary: oklch(0.4 0 0);
+  --foreground-muted: oklch(0.55 0 0);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.2 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.2 0 0);
+
+  --primary: oklch(0.5 0.15 250);
+  --primary-foreground: oklch(1 0 0);
+  --brand-400: oklch(0.55 0.13 250);
+  --brand-500: oklch(0.5 0.15 250);
+  --brand-600: oklch(0.45 0.17 250);
+
+  --secondary: oklch(0.96 0 0);
+  --secondary-foreground: oklch(0.2 0 0);
+  --muted: oklch(0.96 0 0);
+  --muted-foreground: oklch(0.45 0 0);
+  --accent: oklch(0.94 0 0);
+  --accent-foreground: oklch(0.2 0 0);
+
+  --destructive: oklch(0.55 0.22 25);
+  --border: oklch(0.88 0 0);
+  --border-glass: oklch(0.2 0 0 / 0.1);
+  --input: oklch(0.98 0 0);
+  --ring: oklch(0.5 0.15 250);
+
+  --chart-1: oklch(0.5 0.15 250);
+  --chart-2: oklch(0.55 0.18 145);
+  --chart-3: oklch(0.6 0.15 45);
+  --chart-4: oklch(0.55 0.15 300);
+  --chart-5: oklch(0.55 0.18 25);
+
+  --sidebar: oklch(0.98 0 0);
+  --sidebar-foreground: oklch(0.2 0 0);
+  --sidebar-primary: oklch(0.5 0.15 250);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.94 0 0);
+  --sidebar-accent-foreground: oklch(0.2 0 0);
+  --sidebar-border: oklch(0.88 0 0);
+  --sidebar-ring: oklch(0.5 0.15 250);
+
+  --action-view: oklch(0.5 0.15 250);
+  --action-view-hover: oklch(0.45 0.17 250);
+  --action-followup: oklch(0.55 0.15 230);
+  --action-followup-hover: oklch(0.5 0.17 230);
+  --action-commit: oklch(0.55 0.18 145);
+  --action-commit-hover: oklch(0.5 0.2 145);
+  --action-verify: oklch(0.55 0.18 145);
+  --action-verify-hover: oklch(0.5 0.2 145);
+
+  --running-indicator: oklch(0.5 0.15 250);
+  --running-indicator-text: oklch(0.45 0.17 250);
+
+  --status-success: oklch(0.55 0.18 145);
+  --status-success-bg: oklch(0.55 0.18 145 / 0.15);
+  --status-warning: oklch(0.65 0.15 80);
+  --status-warning-bg: oklch(0.65 0.15 80 / 0.15);
+  --status-error: oklch(0.55 0.22 25);
+  --status-error-bg: oklch(0.55 0.22 25 / 0.15);
+  --status-info: oklch(0.5 0.15 250);
+  --status-info-bg: oklch(0.5 0.15 250 / 0.15);
+  --status-backlog: oklch(0.55 0 0);
+  --status-in-progress: oklch(0.65 0.15 80);
+  --status-waiting: oklch(0.6 0.12 50);
+}
+
+.github .content-bg {
+  background: linear-gradient(135deg, oklch(0.99 0 0), oklch(0.98 0 0), oklch(0.99 0 0));
+}
+
+.github .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #0969da 0%, #1f883d 50%, #0969da 100%);
+}
+
+.github .animated-outline-inner {
+  background: oklch(1 0 0) !important;
+  color: #0969da !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/gray.css b/temp_repo/apps/ui/src/styles/themes/gray.css
new file mode 100644
index 0000000000000000000000000000000000000000..3ee724839fb735634e53d312d4146e2f16246326
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/gray.css
@@ -0,0 +1,110 @@
+/* Gray Theme */
+
+.gray {
+  /* Gray Theme - Modern, minimal gray scheme inspired by Cursor */
+  --background: oklch(0.2 0.005 250); /* Medium-dark neutral gray */
+  --background-50: oklch(0.2 0.005 250 / 0.5);
+  --background-80: oklch(0.2 0.005 250 / 0.8);
+
+  --foreground: oklch(0.9 0.005 250); /* Light gray */
+  --foreground-secondary: oklch(0.65 0.005 250);
+  --foreground-muted: oklch(0.5 0.005 250);
+
+  --card: oklch(0.24 0.005 250);
+  --card-foreground: oklch(0.9 0.005 250);
+  --popover: oklch(0.22 0.005 250);
+  --popover-foreground: oklch(0.9 0.005 250);
+
+  --primary: oklch(0.6 0.08 250); /* Subtle blue-gray */
+  --primary-foreground: oklch(0.95 0.005 250);
+
+  --brand-400: oklch(0.65 0.08 250);
+  --brand-500: oklch(0.6 0.08 250); /* Blue-gray */
+  --brand-600: oklch(0.55 0.09 250);
+
+  --secondary: oklch(0.28 0.005 250);
+  --secondary-foreground: oklch(0.9 0.005 250);
+
+  --muted: oklch(0.3 0.005 250);
+  --muted-foreground: oklch(0.6 0.005 250);
+
+  --accent: oklch(0.35 0.01 250);
+  --accent-foreground: oklch(0.9 0.005 250);
+
+  --destructive: oklch(0.6 0.2 25); /* Muted red */
+
+  --border: oklch(0.32 0.005 250);
+  --border-glass: oklch(0.6 0.08 250 / 0.2);
+
+  --input: oklch(0.24 0.005 250);
+  --ring: oklch(0.6 0.08 250);
+
+  --chart-1: oklch(0.6 0.08 250); /* Blue-gray */
+  --chart-2: oklch(0.65 0.1 210); /* Cyan */
+  --chart-3: oklch(0.7 0.12 160); /* Teal */
+  --chart-4: oklch(0.65 0.1 280); /* Purple */
+  --chart-5: oklch(0.7 0.08 300); /* Violet */
+
+  --sidebar: oklch(0.18 0.005 250);
+  --sidebar-foreground: oklch(0.9 0.005 250);
+  --sidebar-primary: oklch(0.6 0.08 250);
+  --sidebar-primary-foreground: oklch(0.95 0.005 250);
+  --sidebar-accent: oklch(0.28 0.005 250);
+  --sidebar-accent-foreground: oklch(0.9 0.005 250);
+  --sidebar-border: oklch(0.32 0.005 250);
+  --sidebar-ring: oklch(0.6 0.08 250);
+
+  /* Action button colors - Subtle modern colors */
+  --action-view: oklch(0.6 0.08 250); /* Blue-gray */
+  --action-view-hover: oklch(0.55 0.09 250);
+  --action-followup: oklch(0.65 0.1 210); /* Cyan */
+  --action-followup-hover: oklch(0.6 0.11 210);
+  --action-commit: oklch(0.65 0.12 150); /* Teal-green */
+  --action-commit-hover: oklch(0.6 0.13 150);
+  --action-verify: oklch(0.65 0.12 150); /* Teal-green */
+  --action-verify-hover: oklch(0.6 0.13 150);
+
+  /* Running indicator - Blue-gray */
+  --running-indicator: oklch(0.6 0.08 250);
+  --running-indicator-text: oklch(0.65 0.08 250);
+
+  /* Status colors - Gray theme */
+  --status-success: oklch(0.65 0.12 150);
+  --status-success-bg: oklch(0.65 0.12 150 / 0.2);
+  --status-warning: oklch(0.7 0.15 70);
+  --status-warning-bg: oklch(0.7 0.15 70 / 0.2);
+  --status-error: oklch(0.6 0.2 25);
+  --status-error-bg: oklch(0.6 0.2 25 / 0.2);
+  --status-info: oklch(0.65 0.1 210);
+  --status-info-bg: oklch(0.65 0.1 210 / 0.2);
+  --status-backlog: oklch(0.6 0.005 250);
+  --status-in-progress: oklch(0.7 0.15 70);
+  --status-waiting: oklch(0.68 0.1 220);
+}
+
+/* Theme-specific overrides */
+
+/* Gray theme scrollbar */
+.gray ::-webkit-scrollbar-thumb,
+.gray .scrollbar-visible::-webkit-scrollbar-thumb {
+  background: oklch(0.4 0.01 250);
+  border-radius: 4px;
+}
+
+.gray ::-webkit-scrollbar-thumb:hover,
+.gray .scrollbar-visible::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.5 0.02 250);
+}
+
+.gray ::-webkit-scrollbar-track,
+.gray .scrollbar-visible::-webkit-scrollbar-track {
+  background: oklch(0.25 0.005 250);
+}
+
+.gray .scrollbar-styled::-webkit-scrollbar-thumb {
+  background: oklch(0.4 0.01 250);
+}
+
+.gray .scrollbar-styled::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.5 0.02 250);
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/gruvbox.css b/temp_repo/apps/ui/src/styles/themes/gruvbox.css
new file mode 100644
index 0000000000000000000000000000000000000000..b867f21f83973fde2d2ddde9210a268312502739
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/gruvbox.css
@@ -0,0 +1,144 @@
+/* Gruvbox Theme */
+
+.gruvbox {
+  --background: oklch(0.18 0.02 60); /* #282828 bg */
+  --background-50: oklch(0.18 0.02 60 / 0.5);
+  --background-80: oklch(0.18 0.02 60 / 0.8);
+
+  --foreground: oklch(0.85 0.05 85); /* #ebdbb2 fg */
+  --foreground-secondary: oklch(0.7 0.04 85); /* #d5c4a1 */
+  --foreground-muted: oklch(0.55 0.04 85); /* #928374 */
+
+  --card: oklch(0.22 0.02 60); /* #3c3836 bg1 */
+  --card-foreground: oklch(0.85 0.05 85);
+  --popover: oklch(0.2 0.02 60);
+  --popover-foreground: oklch(0.85 0.05 85);
+
+  --primary: oklch(0.7 0.18 55); /* #fabd2f yellow */
+  --primary-foreground: oklch(0.18 0.02 60);
+
+  --brand-400: oklch(0.75 0.18 55);
+  --brand-500: oklch(0.7 0.18 55); /* Yellow */
+  --brand-600: oklch(0.65 0.2 55);
+
+  --secondary: oklch(0.26 0.02 60); /* #504945 bg2 */
+  --secondary-foreground: oklch(0.85 0.05 85);
+
+  --muted: oklch(0.26 0.02 60);
+  --muted-foreground: oklch(0.55 0.04 85);
+
+  --accent: oklch(0.3 0.03 60);
+  --accent-foreground: oklch(0.85 0.05 85);
+
+  --destructive: oklch(0.55 0.22 25); /* #fb4934 red */
+
+  --border: oklch(0.35 0.03 60);
+  --border-glass: oklch(0.7 0.18 55 / 0.3);
+
+  --input: oklch(0.22 0.02 60);
+  --ring: oklch(0.7 0.18 55);
+
+  --chart-1: oklch(0.7 0.18 55); /* Yellow */
+  --chart-2: oklch(0.65 0.2 140); /* Green #b8bb26 */
+  --chart-3: oklch(0.7 0.15 200); /* Aqua #8ec07c */
+  --chart-4: oklch(0.6 0.2 30); /* Orange #fe8019 */
+  --chart-5: oklch(0.6 0.2 320); /* Purple #d3869b */
+
+  --sidebar: oklch(0.16 0.02 60);
+  --sidebar-foreground: oklch(0.85 0.05 85);
+  --sidebar-primary: oklch(0.7 0.18 55);
+  --sidebar-primary-foreground: oklch(0.18 0.02 60);
+  --sidebar-accent: oklch(0.26 0.02 60);
+  --sidebar-accent-foreground: oklch(0.85 0.05 85);
+  --sidebar-border: oklch(0.35 0.03 60);
+  --sidebar-ring: oklch(0.7 0.18 55);
+
+  /* Action button colors - Gruvbox yellow/orange theme */
+  --action-view: oklch(0.7 0.18 55); /* Yellow */
+  --action-view-hover: oklch(0.65 0.2 55);
+  --action-followup: oklch(0.7 0.15 200); /* Aqua */
+  --action-followup-hover: oklch(0.65 0.17 200);
+  --action-commit: oklch(0.65 0.2 140); /* Green */
+  --action-commit-hover: oklch(0.6 0.22 140);
+  --action-verify: oklch(0.65 0.2 140); /* Green */
+  --action-verify-hover: oklch(0.6 0.22 140);
+
+  /* Running indicator - Yellow */
+  --running-indicator: oklch(0.7 0.18 55);
+  --running-indicator-text: oklch(0.75 0.16 55);
+}
+
+/* ========================================
+   CATPPUCCIN MOCHA THEME
+   Soothing pastel theme for the high-spirited
+   ======================================== */
+
+/* Theme-specific overrides */
+
+.gruvbox .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #fabd2f 0%, #fe8019 50%, #fabd2f 100%);
+}
+
+.gruvbox .animated-outline-inner {
+  background: oklch(0.18 0.02 60) !important;
+  color: #fabd2f !important;
+}
+
+.gruvbox [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(0.24 0.03 60) !important;
+  color: #fe8019 !important;
+}
+
+.gruvbox .slider-track {
+  background: oklch(0.26 0.02 60);
+}
+
+.gruvbox .slider-range {
+  background: linear-gradient(to right, #fabd2f, #fe8019);
+}
+
+.gruvbox .slider-thumb {
+  background: oklch(0.22 0.02 60);
+  border-color: #fabd2f;
+}
+
+.gruvbox .xml-highlight {
+  color: oklch(0.85 0.05 85); /* #ebdbb2 */
+}
+
+.gruvbox .xml-tag-bracket {
+  color: oklch(0.55 0.22 25); /* #fb4934 red */
+}
+
+.gruvbox .xml-tag-name {
+  color: oklch(0.55 0.22 25); /* Red for tags */
+}
+
+.gruvbox .xml-attribute-name {
+  color: oklch(0.7 0.15 200); /* #8ec07c aqua */
+}
+
+.gruvbox .xml-attribute-equals {
+  color: oklch(0.7 0.04 85); /* Dim text */
+}
+
+.gruvbox .xml-attribute-value {
+  color: oklch(0.65 0.2 140); /* #b8bb26 green */
+}
+
+.gruvbox .xml-comment {
+  color: oklch(0.55 0.04 85); /* #928374 gray */
+  font-style: italic;
+}
+
+.gruvbox .xml-cdata {
+  color: oklch(0.7 0.15 200); /* Aqua */
+}
+
+.gruvbox .xml-doctype {
+  color: oklch(0.6 0.2 320); /* #d3869b purple */
+}
+
+.gruvbox .xml-text {
+  color: oklch(0.85 0.05 85); /* Foreground */
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/gruvboxlight.css b/temp_repo/apps/ui/src/styles/themes/gruvboxlight.css
new file mode 100644
index 0000000000000000000000000000000000000000..d336db9bc5acb395e3e19c3cde0ef8992e460e66
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/gruvboxlight.css
@@ -0,0 +1,92 @@
+/* Gruvbox Light Theme */
+
+.gruvboxlight {
+  --background: oklch(0.96 0.02 85);
+  --background-50: oklch(0.96 0.02 85 / 0.5);
+  --background-80: oklch(0.96 0.02 85 / 0.8);
+
+  --foreground: oklch(0.25 0.04 65);
+  --foreground-secondary: oklch(0.4 0.04 65);
+  --foreground-muted: oklch(0.55 0.03 65);
+
+  --card: oklch(0.98 0.015 85);
+  --card-foreground: oklch(0.25 0.04 65);
+  --popover: oklch(0.97 0.018 85);
+  --popover-foreground: oklch(0.25 0.04 65);
+
+  --primary: oklch(0.55 0.15 70);
+  --primary-foreground: oklch(0.98 0.015 85);
+  --brand-400: oklch(0.6 0.13 70);
+  --brand-500: oklch(0.55 0.15 70);
+  --brand-600: oklch(0.5 0.17 70);
+
+  --secondary: oklch(0.93 0.025 85);
+  --secondary-foreground: oklch(0.25 0.04 65);
+  --muted: oklch(0.92 0.028 85);
+  --muted-foreground: oklch(0.5 0.03 65);
+  --accent: oklch(0.9 0.032 85);
+  --accent-foreground: oklch(0.25 0.04 65);
+
+  --destructive: oklch(0.55 0.2 25);
+  --border: oklch(0.87 0.03 85);
+  --border-glass: oklch(0.55 0.15 70 / 0.15);
+  --input: oklch(0.97 0.018 85);
+  --ring: oklch(0.55 0.15 70);
+
+  --chart-1: oklch(0.55 0.15 70);
+  --chart-2: oklch(0.55 0.18 25);
+  --chart-3: oklch(0.5 0.15 145);
+  --chart-4: oklch(0.55 0.15 230);
+  --chart-5: oklch(0.55 0.15 300);
+
+  --sidebar: oklch(0.95 0.022 85);
+  --sidebar-foreground: oklch(0.25 0.04 65);
+  --sidebar-primary: oklch(0.55 0.15 70);
+  --sidebar-primary-foreground: oklch(0.98 0.015 85);
+  --sidebar-accent: oklch(0.92 0.028 85);
+  --sidebar-accent-foreground: oklch(0.25 0.04 65);
+  --sidebar-border: oklch(0.87 0.03 85);
+  --sidebar-ring: oklch(0.55 0.15 70);
+
+  --action-view: oklch(0.55 0.15 70);
+  --action-view-hover: oklch(0.5 0.17 70);
+  --action-followup: oklch(0.55 0.15 230);
+  --action-followup-hover: oklch(0.5 0.17 230);
+  --action-commit: oklch(0.5 0.15 145);
+  --action-commit-hover: oklch(0.45 0.17 145);
+  --action-verify: oklch(0.5 0.15 145);
+  --action-verify-hover: oklch(0.45 0.17 145);
+
+  --running-indicator: oklch(0.55 0.15 70);
+  --running-indicator-text: oklch(0.5 0.17 70);
+
+  --status-success: oklch(0.5 0.15 145);
+  --status-success-bg: oklch(0.5 0.15 145 / 0.15);
+  --status-warning: oklch(0.6 0.15 70);
+  --status-warning-bg: oklch(0.6 0.15 70 / 0.15);
+  --status-error: oklch(0.55 0.2 25);
+  --status-error-bg: oklch(0.55 0.2 25 / 0.15);
+  --status-info: oklch(0.55 0.15 230);
+  --status-info-bg: oklch(0.55 0.15 230 / 0.15);
+  --status-backlog: oklch(0.6 0.03 65);
+  --status-in-progress: oklch(0.6 0.15 70);
+  --status-waiting: oklch(0.58 0.12 55);
+}
+
+.gruvboxlight .content-bg {
+  background: linear-gradient(
+    135deg,
+    oklch(0.96 0.02 85),
+    oklch(0.95 0.025 85),
+    oklch(0.96 0.02 85)
+  );
+}
+
+.gruvboxlight .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #d79921 0%, #b57614 50%, #d79921 100%);
+}
+
+.gruvboxlight .animated-outline-inner {
+  background: oklch(0.98 0.015 85) !important;
+  color: #b57614 !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/lavender.css b/temp_repo/apps/ui/src/styles/themes/lavender.css
new file mode 100644
index 0000000000000000000000000000000000000000..78d1d8b54e4ac43f704223ea9f985b13c592a6c9
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/lavender.css
@@ -0,0 +1,92 @@
+/* Lavender Theme - Soft purple/lavender */
+
+.lavender {
+  --background: oklch(0.97 0.02 285);
+  --background-50: oklch(0.97 0.02 285 / 0.5);
+  --background-80: oklch(0.97 0.02 285 / 0.8);
+
+  --foreground: oklch(0.25 0.04 285);
+  --foreground-secondary: oklch(0.45 0.04 285);
+  --foreground-muted: oklch(0.55 0.03 285);
+
+  --card: oklch(0.98 0.015 285);
+  --card-foreground: oklch(0.25 0.04 285);
+  --popover: oklch(0.98 0.015 285);
+  --popover-foreground: oklch(0.25 0.04 285);
+
+  --primary: oklch(0.55 0.18 280);
+  --primary-foreground: oklch(0.98 0.015 285);
+  --brand-400: oklch(0.6 0.16 280);
+  --brand-500: oklch(0.55 0.18 280);
+  --brand-600: oklch(0.5 0.2 280);
+
+  --secondary: oklch(0.94 0.025 285);
+  --secondary-foreground: oklch(0.25 0.04 285);
+  --muted: oklch(0.93 0.028 285);
+  --muted-foreground: oklch(0.5 0.04 285);
+  --accent: oklch(0.91 0.032 285);
+  --accent-foreground: oklch(0.25 0.04 285);
+
+  --destructive: oklch(0.55 0.2 25);
+  --border: oklch(0.88 0.025 285);
+  --border-glass: oklch(0.55 0.18 280 / 0.15);
+  --input: oklch(0.97 0.018 285);
+  --ring: oklch(0.55 0.18 280);
+
+  --chart-1: oklch(0.55 0.18 280);
+  --chart-2: oklch(0.6 0.15 320);
+  --chart-3: oklch(0.55 0.15 250);
+  --chart-4: oklch(0.6 0.12 200);
+  --chart-5: oklch(0.55 0.15 350);
+
+  --sidebar: oklch(0.96 0.022 285);
+  --sidebar-foreground: oklch(0.25 0.04 285);
+  --sidebar-primary: oklch(0.55 0.18 280);
+  --sidebar-primary-foreground: oklch(0.98 0.015 285);
+  --sidebar-accent: oklch(0.93 0.028 285);
+  --sidebar-accent-foreground: oklch(0.25 0.04 285);
+  --sidebar-border: oklch(0.88 0.025 285);
+  --sidebar-ring: oklch(0.55 0.18 280);
+
+  --action-view: oklch(0.55 0.18 280);
+  --action-view-hover: oklch(0.5 0.2 280);
+  --action-followup: oklch(0.55 0.15 250);
+  --action-followup-hover: oklch(0.5 0.17 250);
+  --action-commit: oklch(0.55 0.15 145);
+  --action-commit-hover: oklch(0.5 0.17 145);
+  --action-verify: oklch(0.55 0.15 145);
+  --action-verify-hover: oklch(0.5 0.17 145);
+
+  --running-indicator: oklch(0.55 0.18 280);
+  --running-indicator-text: oklch(0.5 0.2 280);
+
+  --status-success: oklch(0.55 0.15 145);
+  --status-success-bg: oklch(0.55 0.15 145 / 0.15);
+  --status-warning: oklch(0.65 0.15 70);
+  --status-warning-bg: oklch(0.65 0.15 70 / 0.15);
+  --status-error: oklch(0.55 0.2 25);
+  --status-error-bg: oklch(0.55 0.2 25 / 0.15);
+  --status-info: oklch(0.55 0.15 250);
+  --status-info-bg: oklch(0.55 0.15 250 / 0.15);
+  --status-backlog: oklch(0.6 0.03 285);
+  --status-in-progress: oklch(0.65 0.15 70);
+  --status-waiting: oklch(0.6 0.12 50);
+}
+
+.lavender .content-bg {
+  background: linear-gradient(
+    135deg,
+    oklch(0.97 0.02 285),
+    oklch(0.96 0.025 285),
+    oklch(0.97 0.02 285)
+  );
+}
+
+.lavender .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #a855f7 0%, #8b5cf6 50%, #a855f7 100%);
+}
+
+.lavender .animated-outline-inner {
+  background: oklch(0.98 0.015 285) !important;
+  color: #a855f7 !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/light.css b/temp_repo/apps/ui/src/styles/themes/light.css
new file mode 100644
index 0000000000000000000000000000000000000000..90e678fee26772baf5b180466b1e8fb9e3ce2ec6
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/light.css
@@ -0,0 +1,102 @@
+/* Light Theme Overrides */
+
+.light .scrollbar-visible::-webkit-scrollbar-track {
+  background: oklch(0.95 0 0);
+}
+
+.light .scrollbar-visible::-webkit-scrollbar-thumb {
+  background: oklch(0.7 0 0);
+}
+
+.light .scrollbar-visible::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.6 0 0);
+}
+
+.light .scrollbar-styled::-webkit-scrollbar-thumb {
+  background: oklch(0.75 0 0);
+}
+
+.light .scrollbar-styled::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.65 0 0);
+}
+
+.light .bg-glass {
+  background: oklch(1 0 0 / 0.8);
+}
+
+.light .bg-glass-80 {
+  background: oklch(1 0 0 / 0.95);
+}
+
+.light .content-bg {
+  background: linear-gradient(135deg, oklch(0.99 0 0), oklch(0.98 0 0), oklch(0.99 0 0));
+}
+
+.light .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #7c3aed 0%, #2563eb 50%, #7c3aed 100%);
+}
+
+.light .animated-outline-inner {
+  background: oklch(100% 0 0) !important;
+  color: #7c3aed !important;
+  border: 1px solid oklch(92% 0 0);
+}
+
+.light [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(97% 0.02 270) !important;
+  color: #5b21b6 !important;
+}
+
+.light .slider-track {
+  background: oklch(90% 0 0);
+}
+
+.light .slider-range {
+  background: linear-gradient(to right, #7c3aed, #2563eb);
+}
+
+.light .slider-thumb {
+  background: oklch(100% 0 0);
+  border-color: oklch(80% 0 0);
+}
+
+.light .xml-highlight {
+  color: oklch(0.3 0 0); /* Default text */
+}
+
+.light .xml-tag-bracket {
+  color: oklch(0.45 0.15 250); /* Blue-gray for < > */
+}
+
+.light .xml-tag-name {
+  color: oklch(0.45 0.22 25); /* Red/maroon for tag names */
+}
+
+.light .xml-attribute-name {
+  color: oklch(0.45 0.18 280); /* Purple for attributes */
+}
+
+.light .xml-attribute-equals {
+  color: oklch(0.4 0 0); /* Dark gray for = */
+}
+
+.light .xml-attribute-value {
+  color: oklch(0.45 0.18 145); /* Green for string values */
+}
+
+.light .xml-comment {
+  color: oklch(0.55 0.05 100); /* Muted olive for comments */
+  font-style: italic;
+}
+
+.light .xml-cdata {
+  color: oklch(0.5 0.1 200); /* Teal for CDATA */
+}
+
+.light .xml-doctype {
+  color: oklch(0.5 0.15 280); /* Purple for DOCTYPE */
+}
+
+.light .xml-text {
+  color: oklch(0.25 0 0); /* Near-black for text content */
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/matcha.css b/temp_repo/apps/ui/src/styles/themes/matcha.css
new file mode 100644
index 0000000000000000000000000000000000000000..ca47d5df76dc606b13bac65cbdd50d6317ff2482
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/matcha.css
@@ -0,0 +1,103 @@
+/**
+ * Matcha Theme
+ * A calming dark theme with sage green and warm beige accents
+ * Inspired by: https://github.com/lucafalasco/matcha
+ */
+
+.matcha {
+  /* Background layers - dark with subtle green undertone */
+  --background: oklch(20% 0.015 145);
+  --background-secondary: oklch(24% 0.015 145);
+  --background-tertiary: oklch(16% 0.015 145);
+  --background-50: oklch(20% 0.015 145 / 0.5);
+  --background-80: oklch(20% 0.015 145 / 0.8);
+
+  /* Foreground / text - light with green tint */
+  --foreground: oklch(90% 0.025 145);
+  --foreground-secondary: oklch(70% 0.02 145);
+  --foreground-muted: oklch(60% 0.015 145);
+
+  /* Brand / accent - sage green */
+  --brand-400: oklch(72% 0.12 135);
+  --brand-500: oklch(68% 0.14 135);
+  --brand-600: oklch(62% 0.16 135);
+  --primary: oklch(68% 0.14 135);
+  --primary-foreground: oklch(15% 0.02 135);
+
+  /* Sidebar - slightly lighter with green tint */
+  --sidebar: oklch(22% 0.02 145);
+  --sidebar-foreground: oklch(90% 0.025 145);
+  --sidebar-primary: oklch(68% 0.14 135);
+  --sidebar-primary-foreground: oklch(15% 0.02 135);
+  --sidebar-accent: oklch(28% 0.025 145);
+  --sidebar-accent-foreground: oklch(90% 0.025 145);
+  --sidebar-border: oklch(30% 0.02 145);
+  --sidebar-ring: oklch(68% 0.14 135);
+
+  /* Cards */
+  --card: oklch(22% 0.02 145);
+  --card-foreground: oklch(90% 0.025 145);
+
+  /* Inputs */
+  --input: oklch(18% 0.015 145);
+
+  /* Borders */
+  --border: oklch(32% 0.025 145);
+  --border-glass: oklch(90% 0.02 145 / 0.1);
+
+  /* Popover / Dropdown */
+  --popover: oklch(20% 0.02 145);
+  --popover-foreground: oklch(90% 0.025 145);
+
+  /* Secondary */
+  --secondary: oklch(28% 0.025 145);
+  --secondary-foreground: oklch(90% 0.025 145);
+
+  /* Muted */
+  --muted: oklch(26% 0.02 145);
+  --muted-foreground: oklch(65% 0.02 145);
+
+  /* Accent */
+  --accent: oklch(30% 0.03 145);
+  --accent-foreground: oklch(90% 0.025 145);
+
+  /* Destructive */
+  --destructive: oklch(60% 0.18 25);
+
+  /* Ring / Focus */
+  --ring: oklch(68% 0.14 135);
+
+  /* Action buttons - warm beige */
+  --action-view: oklch(78% 0.06 90);
+  --action-view-hover: oklch(72% 0.07 90);
+  --action-followup: oklch(68% 0.14 135);
+  --action-followup-hover: oklch(62% 0.16 135);
+  --action-commit: oklch(68% 0.14 135);
+  --action-commit-hover: oklch(62% 0.16 135);
+  --action-verify: oklch(68% 0.14 135);
+  --action-verify-hover: oklch(62% 0.16 135);
+
+  /* Running indicator - sage green */
+  --running-indicator: oklch(68% 0.14 135);
+  --running-indicator-text: oklch(72% 0.12 135);
+
+  /* Status colors */
+  --status-success: oklch(68% 0.14 135);
+  --status-success-bg: oklch(68% 0.14 135 / 0.2);
+  --status-warning: oklch(78% 0.12 85);
+  --status-warning-bg: oklch(78% 0.12 85 / 0.2);
+  --status-error: oklch(65% 0.18 25);
+  --status-error-bg: oklch(65% 0.18 25 / 0.2);
+  --status-info: oklch(68% 0.14 135);
+  --status-info-bg: oklch(68% 0.14 135 / 0.2);
+  --status-backlog: oklch(55% 0 0);
+  --status-in-progress: oklch(78% 0.12 85);
+  --status-waiting: oklch(70% 0.15 55);
+
+  /* Chart colors */
+  --chart-1: oklch(68% 0.14 135);
+  --chart-2: oklch(70% 0.1 170);
+  --chart-3: oklch(78% 0.12 85);
+  --chart-4: oklch(65% 0.12 280);
+  --chart-5: oklch(60% 0.15 25);
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/mint.css b/temp_repo/apps/ui/src/styles/themes/mint.css
new file mode 100644
index 0000000000000000000000000000000000000000..fe71f587666328add5b17197a02cd1943306810a
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/mint.css
@@ -0,0 +1,92 @@
+/* Mint Theme - Fresh mint green */
+
+.mint {
+  --background: oklch(0.98 0.015 160);
+  --background-50: oklch(0.98 0.015 160 / 0.5);
+  --background-80: oklch(0.98 0.015 160 / 0.8);
+
+  --foreground: oklch(0.2 0.03 160);
+  --foreground-secondary: oklch(0.4 0.03 160);
+  --foreground-muted: oklch(0.55 0.02 160);
+
+  --card: oklch(0.99 0.01 160);
+  --card-foreground: oklch(0.2 0.03 160);
+  --popover: oklch(0.99 0.01 160);
+  --popover-foreground: oklch(0.2 0.03 160);
+
+  --primary: oklch(0.55 0.15 165);
+  --primary-foreground: oklch(0.99 0.01 160);
+  --brand-400: oklch(0.6 0.13 165);
+  --brand-500: oklch(0.55 0.15 165);
+  --brand-600: oklch(0.5 0.17 165);
+
+  --secondary: oklch(0.95 0.018 160);
+  --secondary-foreground: oklch(0.2 0.03 160);
+  --muted: oklch(0.94 0.02 160);
+  --muted-foreground: oklch(0.5 0.03 160);
+  --accent: oklch(0.92 0.025 160);
+  --accent-foreground: oklch(0.2 0.03 160);
+
+  --destructive: oklch(0.55 0.2 25);
+  --border: oklch(0.88 0.02 160);
+  --border-glass: oklch(0.55 0.15 165 / 0.15);
+  --input: oklch(0.98 0.012 160);
+  --ring: oklch(0.55 0.15 165);
+
+  --chart-1: oklch(0.55 0.15 165);
+  --chart-2: oklch(0.6 0.12 200);
+  --chart-3: oklch(0.55 0.15 140);
+  --chart-4: oklch(0.6 0.12 180);
+  --chart-5: oklch(0.55 0.1 230);
+
+  --sidebar: oklch(0.97 0.015 160);
+  --sidebar-foreground: oklch(0.2 0.03 160);
+  --sidebar-primary: oklch(0.55 0.15 165);
+  --sidebar-primary-foreground: oklch(0.99 0.01 160);
+  --sidebar-accent: oklch(0.94 0.02 160);
+  --sidebar-accent-foreground: oklch(0.2 0.03 160);
+  --sidebar-border: oklch(0.88 0.02 160);
+  --sidebar-ring: oklch(0.55 0.15 165);
+
+  --action-view: oklch(0.55 0.15 165);
+  --action-view-hover: oklch(0.5 0.17 165);
+  --action-followup: oklch(0.55 0.12 200);
+  --action-followup-hover: oklch(0.5 0.14 200);
+  --action-commit: oklch(0.55 0.15 145);
+  --action-commit-hover: oklch(0.5 0.17 145);
+  --action-verify: oklch(0.55 0.15 145);
+  --action-verify-hover: oklch(0.5 0.17 145);
+
+  --running-indicator: oklch(0.55 0.15 165);
+  --running-indicator-text: oklch(0.5 0.17 165);
+
+  --status-success: oklch(0.55 0.15 145);
+  --status-success-bg: oklch(0.55 0.15 145 / 0.15);
+  --status-warning: oklch(0.65 0.15 70);
+  --status-warning-bg: oklch(0.65 0.15 70 / 0.15);
+  --status-error: oklch(0.55 0.2 25);
+  --status-error-bg: oklch(0.55 0.2 25 / 0.15);
+  --status-info: oklch(0.55 0.12 200);
+  --status-info-bg: oklch(0.55 0.12 200 / 0.15);
+  --status-backlog: oklch(0.6 0.02 160);
+  --status-in-progress: oklch(0.65 0.15 70);
+  --status-waiting: oklch(0.6 0.12 50);
+}
+
+.mint .content-bg {
+  background: linear-gradient(
+    135deg,
+    oklch(0.98 0.015 160),
+    oklch(0.97 0.018 160),
+    oklch(0.98 0.015 160)
+  );
+}
+
+.mint .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #10b981 0%, #14b8a6 50%, #10b981 100%);
+}
+
+.mint .animated-outline-inner {
+  background: oklch(0.99 0.01 160) !important;
+  color: #10b981 !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/monokai.css b/temp_repo/apps/ui/src/styles/themes/monokai.css
new file mode 100644
index 0000000000000000000000000000000000000000..28a784aa8501b9869896f8aa99f68d7b13d7a957
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/monokai.css
@@ -0,0 +1,144 @@
+/* Monokai Theme */
+
+.monokai {
+  --background: oklch(0.17 0.01 90); /* #272822 */
+  --background-50: oklch(0.17 0.01 90 / 0.5);
+  --background-80: oklch(0.17 0.01 90 / 0.8);
+
+  --foreground: oklch(0.95 0.02 100); /* #f8f8f2 */
+  --foreground-secondary: oklch(0.8 0.02 100);
+  --foreground-muted: oklch(0.55 0.04 100); /* #75715e */
+
+  --card: oklch(0.22 0.01 90); /* #3e3d32 */
+  --card-foreground: oklch(0.95 0.02 100);
+  --popover: oklch(0.2 0.01 90);
+  --popover-foreground: oklch(0.95 0.02 100);
+
+  --primary: oklch(0.8 0.2 350); /* #f92672 pink */
+  --primary-foreground: oklch(0.17 0.01 90);
+
+  --brand-400: oklch(0.85 0.2 350);
+  --brand-500: oklch(0.8 0.2 350); /* #f92672 */
+  --brand-600: oklch(0.75 0.22 350);
+
+  --secondary: oklch(0.25 0.02 90);
+  --secondary-foreground: oklch(0.95 0.02 100);
+
+  --muted: oklch(0.25 0.02 90);
+  --muted-foreground: oklch(0.55 0.04 100);
+
+  --accent: oklch(0.3 0.02 90);
+  --accent-foreground: oklch(0.95 0.02 100);
+
+  --destructive: oklch(0.65 0.25 15); /* red */
+
+  --border: oklch(0.35 0.03 90);
+  --border-glass: oklch(0.8 0.2 350 / 0.3);
+
+  --input: oklch(0.22 0.01 90);
+  --ring: oklch(0.8 0.2 350);
+
+  --chart-1: oklch(0.8 0.2 350); /* Pink #f92672 */
+  --chart-2: oklch(0.85 0.2 90); /* Yellow #e6db74 */
+  --chart-3: oklch(0.8 0.2 140); /* Green #a6e22e */
+  --chart-4: oklch(0.75 0.2 200); /* Cyan #66d9ef */
+  --chart-5: oklch(0.75 0.2 30); /* Orange #fd971f */
+
+  --sidebar: oklch(0.15 0.01 90);
+  --sidebar-foreground: oklch(0.95 0.02 100);
+  --sidebar-primary: oklch(0.8 0.2 350);
+  --sidebar-primary-foreground: oklch(0.17 0.01 90);
+  --sidebar-accent: oklch(0.25 0.02 90);
+  --sidebar-accent-foreground: oklch(0.95 0.02 100);
+  --sidebar-border: oklch(0.35 0.03 90);
+  --sidebar-ring: oklch(0.8 0.2 350);
+
+  /* Action button colors - Monokai pink/yellow theme */
+  --action-view: oklch(0.8 0.2 350); /* Pink */
+  --action-view-hover: oklch(0.75 0.22 350);
+  --action-followup: oklch(0.75 0.2 200); /* Cyan */
+  --action-followup-hover: oklch(0.7 0.22 200);
+  --action-commit: oklch(0.8 0.2 140); /* Green */
+  --action-commit-hover: oklch(0.75 0.22 140);
+  --action-verify: oklch(0.8 0.2 140); /* Green */
+  --action-verify-hover: oklch(0.75 0.22 140);
+
+  /* Running indicator - Pink */
+  --running-indicator: oklch(0.8 0.2 350);
+  --running-indicator-text: oklch(0.85 0.18 350);
+}
+
+/* ========================================
+   TOKYO NIGHT THEME
+   A clean dark theme celebrating Tokyo at night
+   ======================================== */
+
+/* Theme-specific overrides */
+
+.monokai .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #f92672 0%, #e6db74 50%, #f92672 100%);
+}
+
+.monokai .animated-outline-inner {
+  background: oklch(0.17 0.01 90) !important;
+  color: #f92672 !important;
+}
+
+.monokai [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(0.22 0.02 90) !important;
+  color: #e6db74 !important;
+}
+
+.monokai .slider-track {
+  background: oklch(0.25 0.02 90);
+}
+
+.monokai .slider-range {
+  background: linear-gradient(to right, #f92672, #fd971f);
+}
+
+.monokai .slider-thumb {
+  background: oklch(0.22 0.01 90);
+  border-color: #f92672;
+}
+
+.monokai .xml-highlight {
+  color: oklch(0.95 0.02 100); /* #f8f8f2 */
+}
+
+.monokai .xml-tag-bracket {
+  color: oklch(0.95 0.02 100); /* White */
+}
+
+.monokai .xml-tag-name {
+  color: oklch(0.8 0.2 350); /* #f92672 pink */
+}
+
+.monokai .xml-attribute-name {
+  color: oklch(0.8 0.2 140); /* #a6e22e green */
+}
+
+.monokai .xml-attribute-equals {
+  color: oklch(0.95 0.02 100); /* White */
+}
+
+.monokai .xml-attribute-value {
+  color: oklch(0.85 0.2 90); /* #e6db74 yellow */
+}
+
+.monokai .xml-comment {
+  color: oklch(0.55 0.04 100); /* #75715e */
+  font-style: italic;
+}
+
+.monokai .xml-cdata {
+  color: oklch(0.75 0.2 200); /* Cyan #66d9ef */
+}
+
+.monokai .xml-doctype {
+  color: oklch(0.75 0.2 200); /* Cyan */
+}
+
+.monokai .xml-text {
+  color: oklch(0.95 0.02 100); /* White */
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/nord.css b/temp_repo/apps/ui/src/styles/themes/nord.css
new file mode 100644
index 0000000000000000000000000000000000000000..c2304175bec9ffd176b4b2768794c458a3566165
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/nord.css
@@ -0,0 +1,144 @@
+/* Nord Theme */
+
+.nord {
+  --background: oklch(0.23 0.02 240); /* #2e3440 */
+  --background-50: oklch(0.23 0.02 240 / 0.5);
+  --background-80: oklch(0.23 0.02 240 / 0.8);
+
+  --foreground: oklch(0.9 0.01 230); /* #eceff4 */
+  --foreground-secondary: oklch(0.75 0.02 230); /* #d8dee9 */
+  --foreground-muted: oklch(0.6 0.03 230); /* #4c566a */
+
+  --card: oklch(0.27 0.02 240); /* #3b4252 */
+  --card-foreground: oklch(0.9 0.01 230);
+  --popover: oklch(0.25 0.02 240);
+  --popover-foreground: oklch(0.9 0.01 230);
+
+  --primary: oklch(0.7 0.12 220); /* #88c0d0 frost */
+  --primary-foreground: oklch(0.23 0.02 240);
+
+  --brand-400: oklch(0.75 0.12 220);
+  --brand-500: oklch(0.7 0.12 220); /* #88c0d0 */
+  --brand-600: oklch(0.65 0.14 220); /* #81a1c1 */
+
+  --secondary: oklch(0.31 0.02 240); /* #434c5e */
+  --secondary-foreground: oklch(0.9 0.01 230);
+
+  --muted: oklch(0.31 0.02 240);
+  --muted-foreground: oklch(0.55 0.03 230);
+
+  --accent: oklch(0.35 0.03 240); /* #4c566a */
+  --accent-foreground: oklch(0.9 0.01 230);
+
+  --destructive: oklch(0.65 0.2 15); /* #bf616a */
+
+  --border: oklch(0.35 0.03 240);
+  --border-glass: oklch(0.7 0.12 220 / 0.3);
+
+  --input: oklch(0.27 0.02 240);
+  --ring: oklch(0.7 0.12 220);
+
+  --chart-1: oklch(0.7 0.12 220); /* Frost blue */
+  --chart-2: oklch(0.65 0.14 220); /* #81a1c1 */
+  --chart-3: oklch(0.7 0.15 140); /* #a3be8c green */
+  --chart-4: oklch(0.7 0.2 320); /* #b48ead purple */
+  --chart-5: oklch(0.75 0.15 70); /* #ebcb8b yellow */
+
+  --sidebar: oklch(0.21 0.02 240);
+  --sidebar-foreground: oklch(0.9 0.01 230);
+  --sidebar-primary: oklch(0.7 0.12 220);
+  --sidebar-primary-foreground: oklch(0.23 0.02 240);
+  --sidebar-accent: oklch(0.31 0.02 240);
+  --sidebar-accent-foreground: oklch(0.9 0.01 230);
+  --sidebar-border: oklch(0.35 0.03 240);
+  --sidebar-ring: oklch(0.7 0.12 220);
+
+  /* Action button colors - Nord frost blue theme */
+  --action-view: oklch(0.7 0.12 220); /* Frost blue */
+  --action-view-hover: oklch(0.65 0.14 220);
+  --action-followup: oklch(0.65 0.14 220); /* Darker frost */
+  --action-followup-hover: oklch(0.6 0.16 220);
+  --action-commit: oklch(0.7 0.15 140); /* Green */
+  --action-commit-hover: oklch(0.65 0.17 140);
+  --action-verify: oklch(0.7 0.15 140); /* Green */
+  --action-verify-hover: oklch(0.65 0.17 140);
+
+  /* Running indicator - Frost blue */
+  --running-indicator: oklch(0.7 0.12 220);
+  --running-indicator-text: oklch(0.75 0.1 220);
+}
+
+/* ========================================
+   MONOKAI THEME
+   The classic Monokai color scheme
+   ======================================== */
+
+/* Theme-specific overrides */
+
+.nord .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #88c0d0 0%, #81a1c1 50%, #88c0d0 100%);
+}
+
+.nord .animated-outline-inner {
+  background: oklch(0.23 0.02 240) !important;
+  color: #88c0d0 !important;
+}
+
+.nord [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(0.28 0.03 240) !important;
+  color: #8fbcbb !important;
+}
+
+.nord .slider-track {
+  background: oklch(0.31 0.02 240);
+}
+
+.nord .slider-range {
+  background: linear-gradient(to right, #88c0d0, #81a1c1);
+}
+
+.nord .slider-thumb {
+  background: oklch(0.27 0.02 240);
+  border-color: #88c0d0;
+}
+
+.nord .xml-highlight {
+  color: oklch(0.9 0.01 230); /* #eceff4 */
+}
+
+.nord .xml-tag-bracket {
+  color: oklch(0.65 0.14 220); /* #81a1c1 */
+}
+
+.nord .xml-tag-name {
+  color: oklch(0.65 0.14 220); /* Frost blue for tags */
+}
+
+.nord .xml-attribute-name {
+  color: oklch(0.7 0.12 220); /* #88c0d0 */
+}
+
+.nord .xml-attribute-equals {
+  color: oklch(0.75 0.02 230); /* Dim white */
+}
+
+.nord .xml-attribute-value {
+  color: oklch(0.7 0.15 140); /* #a3be8c green */
+}
+
+.nord .xml-comment {
+  color: oklch(0.5 0.04 230); /* Dim text */
+  font-style: italic;
+}
+
+.nord .xml-cdata {
+  color: oklch(0.7 0.12 220); /* Frost blue */
+}
+
+.nord .xml-doctype {
+  color: oklch(0.7 0.2 320); /* #b48ead purple */
+}
+
+.nord .xml-text {
+  color: oklch(0.9 0.01 230); /* Snow white */
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/nordlight.css b/temp_repo/apps/ui/src/styles/themes/nordlight.css
new file mode 100644
index 0000000000000000000000000000000000000000..0001f085805e4809153110ad3a77c57c1fbfbf59
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/nordlight.css
@@ -0,0 +1,92 @@
+/* Nord Light Theme */
+
+.nordlight {
+  --background: oklch(0.97 0.01 220);
+  --background-50: oklch(0.97 0.01 220 / 0.5);
+  --background-80: oklch(0.97 0.01 220 / 0.8);
+
+  --foreground: oklch(0.25 0.03 220);
+  --foreground-secondary: oklch(0.45 0.025 220);
+  --foreground-muted: oklch(0.55 0.02 220);
+
+  --card: oklch(0.99 0.008 220);
+  --card-foreground: oklch(0.25 0.03 220);
+  --popover: oklch(0.98 0.01 220);
+  --popover-foreground: oklch(0.25 0.03 220);
+
+  --primary: oklch(0.55 0.12 225);
+  --primary-foreground: oklch(0.99 0.008 220);
+  --brand-400: oklch(0.6 0.1 225);
+  --brand-500: oklch(0.55 0.12 225);
+  --brand-600: oklch(0.5 0.14 225);
+
+  --secondary: oklch(0.94 0.012 220);
+  --secondary-foreground: oklch(0.25 0.03 220);
+  --muted: oklch(0.93 0.015 220);
+  --muted-foreground: oklch(0.5 0.025 220);
+  --accent: oklch(0.91 0.018 220);
+  --accent-foreground: oklch(0.25 0.03 220);
+
+  --destructive: oklch(0.55 0.18 25);
+  --border: oklch(0.88 0.015 220);
+  --border-glass: oklch(0.55 0.12 225 / 0.12);
+  --input: oklch(0.98 0.01 220);
+  --ring: oklch(0.55 0.12 225);
+
+  --chart-1: oklch(0.55 0.12 225);
+  --chart-2: oklch(0.55 0.15 25);
+  --chart-3: oklch(0.55 0.12 145);
+  --chart-4: oklch(0.55 0.12 300);
+  --chart-5: oklch(0.6 0.12 80);
+
+  --sidebar: oklch(0.96 0.01 220);
+  --sidebar-foreground: oklch(0.25 0.03 220);
+  --sidebar-primary: oklch(0.55 0.12 225);
+  --sidebar-primary-foreground: oklch(0.99 0.008 220);
+  --sidebar-accent: oklch(0.93 0.015 220);
+  --sidebar-accent-foreground: oklch(0.25 0.03 220);
+  --sidebar-border: oklch(0.88 0.015 220);
+  --sidebar-ring: oklch(0.55 0.12 225);
+
+  --action-view: oklch(0.55 0.12 225);
+  --action-view-hover: oklch(0.5 0.14 225);
+  --action-followup: oklch(0.55 0.12 200);
+  --action-followup-hover: oklch(0.5 0.14 200);
+  --action-commit: oklch(0.55 0.12 145);
+  --action-commit-hover: oklch(0.5 0.14 145);
+  --action-verify: oklch(0.55 0.12 145);
+  --action-verify-hover: oklch(0.5 0.14 145);
+
+  --running-indicator: oklch(0.55 0.12 225);
+  --running-indicator-text: oklch(0.5 0.14 225);
+
+  --status-success: oklch(0.55 0.12 145);
+  --status-success-bg: oklch(0.55 0.12 145 / 0.15);
+  --status-warning: oklch(0.65 0.12 80);
+  --status-warning-bg: oklch(0.65 0.12 80 / 0.15);
+  --status-error: oklch(0.55 0.18 25);
+  --status-error-bg: oklch(0.55 0.18 25 / 0.15);
+  --status-info: oklch(0.55 0.12 225);
+  --status-info-bg: oklch(0.55 0.12 225 / 0.15);
+  --status-backlog: oklch(0.6 0.02 220);
+  --status-in-progress: oklch(0.65 0.12 80);
+  --status-waiting: oklch(0.6 0.1 55);
+}
+
+.nordlight .content-bg {
+  background: linear-gradient(
+    135deg,
+    oklch(0.97 0.01 220),
+    oklch(0.96 0.012 220),
+    oklch(0.97 0.01 220)
+  );
+}
+
+.nordlight .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #5e81ac 0%, #81a1c1 50%, #5e81ac 100%);
+}
+
+.nordlight .animated-outline-inner {
+  background: oklch(0.99 0.008 220) !important;
+  color: #5e81ac !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/ocean.css b/temp_repo/apps/ui/src/styles/themes/ocean.css
new file mode 100644
index 0000000000000000000000000000000000000000..cf8d86a1f6247a8b941a81c78cb344093187d929
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/ocean.css
@@ -0,0 +1,98 @@
+/* Ocean Theme - Deep blue dark theme */
+
+.ocean {
+  --background: oklch(0.12 0.03 230);
+  --background-50: oklch(0.12 0.03 230 / 0.5);
+  --background-80: oklch(0.12 0.03 230 / 0.8);
+
+  --foreground: oklch(0.95 0.02 230);
+  --foreground-secondary: oklch(0.7 0.03 230);
+  --foreground-muted: oklch(0.6 0.03 230);
+
+  --card: oklch(0.16 0.035 230);
+  --card-foreground: oklch(0.95 0.02 230);
+  --popover: oklch(0.14 0.032 230);
+  --popover-foreground: oklch(0.95 0.02 230);
+
+  --primary: oklch(0.6 0.18 230);
+  --primary-foreground: oklch(0.12 0.03 230);
+  --brand-400: oklch(0.65 0.16 230);
+  --brand-500: oklch(0.6 0.18 230);
+  --brand-600: oklch(0.55 0.2 235);
+
+  --secondary: oklch(1 0 0 / 0.05);
+  --secondary-foreground: oklch(0.95 0.02 230);
+  --muted: oklch(0.2 0.04 230);
+  --muted-foreground: oklch(0.65 0.03 230);
+  --accent: oklch(1 0 0 / 0.08);
+  --accent-foreground: oklch(0.95 0.02 230);
+
+  --destructive: oklch(0.6 0.22 25);
+  --border: oklch(0.25 0.05 230);
+  --border-glass: oklch(1 0 0 / 0.1);
+  --input: oklch(0.14 0.032 230);
+  --ring: oklch(0.6 0.18 230);
+
+  --chart-1: oklch(0.6 0.18 230);
+  --chart-2: oklch(0.6 0.15 200);
+  --chart-3: oklch(0.65 0.15 180);
+  --chart-4: oklch(0.6 0.2 260);
+  --chart-5: oklch(0.55 0.15 300);
+
+  --sidebar: oklch(0.1 0.03 230 / 0.8);
+  --sidebar-foreground: oklch(0.95 0.02 230);
+  --sidebar-primary: oklch(0.6 0.18 230);
+  --sidebar-primary-foreground: oklch(0.12 0.03 230);
+  --sidebar-accent: oklch(1 0 0 / 0.05);
+  --sidebar-accent-foreground: oklch(0.95 0.02 230);
+  --sidebar-border: oklch(1 0 0 / 0.1);
+  --sidebar-ring: oklch(0.6 0.18 230);
+
+  --action-view: oklch(0.6 0.18 230);
+  --action-view-hover: oklch(0.55 0.2 235);
+  --action-followup: oklch(0.6 0.15 200);
+  --action-followup-hover: oklch(0.55 0.17 200);
+  --action-commit: oklch(0.6 0.15 180);
+  --action-commit-hover: oklch(0.55 0.17 180);
+  --action-verify: oklch(0.6 0.15 180);
+  --action-verify-hover: oklch(0.55 0.17 180);
+
+  --running-indicator: oklch(0.6 0.18 230);
+  --running-indicator-text: oklch(0.65 0.16 230);
+
+  --status-success: oklch(0.6 0.15 180);
+  --status-success-bg: oklch(0.6 0.15 180 / 0.2);
+  --status-warning: oklch(0.7 0.15 80);
+  --status-warning-bg: oklch(0.7 0.15 80 / 0.2);
+  --status-error: oklch(0.6 0.22 25);
+  --status-error-bg: oklch(0.6 0.22 25 / 0.2);
+  --status-info: oklch(0.6 0.18 230);
+  --status-info-bg: oklch(0.6 0.18 230 / 0.2);
+  --status-backlog: oklch(0.55 0.03 230);
+  --status-in-progress: oklch(0.7 0.15 80);
+  --status-waiting: oklch(0.65 0.12 60);
+
+  --shadow-xs: 0 1px 2px rgba(0, 10, 30, 0.3);
+  --shadow-sm: 0 1px 3px rgba(0, 10, 30, 0.4), 0 1px 2px rgba(0, 10, 30, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 10, 30, 0.4), 0 2px 4px -1px rgba(0, 10, 30, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 10, 30, 0.4), 0 4px 6px -2px rgba(0, 10, 30, 0.2);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 10, 30, 0.5), 0 10px 10px -5px rgba(0, 10, 30, 0.3);
+}
+
+.ocean .content-bg {
+  background: linear-gradient(
+    135deg,
+    oklch(0.12 0.03 230),
+    oklch(0.15 0.035 230),
+    oklch(0.12 0.03 230)
+  );
+}
+
+.ocean .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #3b82f6 0%, #0ea5e9 50%, #3b82f6 100%);
+}
+
+.ocean .animated-outline-inner {
+  background: oklch(0.16 0.035 230) !important;
+  color: #93c5fd !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/onedark.css b/temp_repo/apps/ui/src/styles/themes/onedark.css
new file mode 100644
index 0000000000000000000000000000000000000000..c417d8fce139fdded97d298b38c1b38b59a57ceb
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/onedark.css
@@ -0,0 +1,144 @@
+/* Onedark Theme */
+
+.onedark {
+  --background: oklch(0.19 0.01 250); /* #282c34 */
+  --background-50: oklch(0.19 0.01 250 / 0.5);
+  --background-80: oklch(0.19 0.01 250 / 0.8);
+
+  --foreground: oklch(0.85 0.02 240); /* #abb2bf */
+  --foreground-secondary: oklch(0.7 0.02 240);
+  --foreground-muted: oklch(0.5 0.03 240); /* #5c6370 */
+
+  --card: oklch(0.23 0.01 250); /* #21252b */
+  --card-foreground: oklch(0.85 0.02 240);
+  --popover: oklch(0.21 0.01 250);
+  --popover-foreground: oklch(0.85 0.02 240);
+
+  --primary: oklch(0.7 0.18 230); /* #61afef blue */
+  --primary-foreground: oklch(0.19 0.01 250);
+
+  --brand-400: oklch(0.75 0.18 230);
+  --brand-500: oklch(0.7 0.18 230); /* Blue */
+  --brand-600: oklch(0.65 0.2 230);
+
+  --secondary: oklch(0.25 0.01 250);
+  --secondary-foreground: oklch(0.85 0.02 240);
+
+  --muted: oklch(0.25 0.01 250);
+  --muted-foreground: oklch(0.5 0.03 240);
+
+  --accent: oklch(0.28 0.02 250);
+  --accent-foreground: oklch(0.85 0.02 240);
+
+  --destructive: oklch(0.6 0.2 20); /* #e06c75 red */
+
+  --border: oklch(0.35 0.02 250);
+  --border-glass: oklch(0.7 0.18 230 / 0.3);
+
+  --input: oklch(0.23 0.01 250);
+  --ring: oklch(0.7 0.18 230);
+
+  --chart-1: oklch(0.7 0.18 230); /* Blue */
+  --chart-2: oklch(0.75 0.15 320); /* Magenta #c678dd */
+  --chart-3: oklch(0.75 0.18 150); /* Green #98c379 */
+  --chart-4: oklch(0.8 0.15 80); /* Yellow #e5c07b */
+  --chart-5: oklch(0.7 0.15 180); /* Cyan #56b6c2 */
+
+  --sidebar: oklch(0.17 0.01 250);
+  --sidebar-foreground: oklch(0.85 0.02 240);
+  --sidebar-primary: oklch(0.7 0.18 230);
+  --sidebar-primary-foreground: oklch(0.19 0.01 250);
+  --sidebar-accent: oklch(0.25 0.01 250);
+  --sidebar-accent-foreground: oklch(0.85 0.02 240);
+  --sidebar-border: oklch(0.35 0.02 250);
+  --sidebar-ring: oklch(0.7 0.18 230);
+
+  /* Action button colors - One Dark blue/magenta theme */
+  --action-view: oklch(0.7 0.18 230); /* Blue */
+  --action-view-hover: oklch(0.65 0.2 230);
+  --action-followup: oklch(0.75 0.15 320); /* Magenta */
+  --action-followup-hover: oklch(0.7 0.17 320);
+  --action-commit: oklch(0.75 0.18 150); /* Green */
+  --action-commit-hover: oklch(0.7 0.2 150);
+  --action-verify: oklch(0.75 0.18 150); /* Green */
+  --action-verify-hover: oklch(0.7 0.2 150);
+
+  /* Running indicator - Blue */
+  --running-indicator: oklch(0.7 0.18 230);
+  --running-indicator-text: oklch(0.75 0.16 230);
+}
+
+/* ========================================
+   SYNTHWAVE '84 THEME
+   Neon dreams of the 80s
+   ======================================== */
+
+/* Theme-specific overrides */
+
+.onedark .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #61afef 0%, #c678dd 50%, #61afef 100%);
+}
+
+.onedark .animated-outline-inner {
+  background: oklch(0.19 0.01 250) !important;
+  color: #61afef !important;
+}
+
+.onedark [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(0.25 0.02 250) !important;
+  color: #c678dd !important;
+}
+
+.onedark .slider-track {
+  background: oklch(0.25 0.01 250);
+}
+
+.onedark .slider-range {
+  background: linear-gradient(to right, #61afef, #c678dd);
+}
+
+.onedark .slider-thumb {
+  background: oklch(0.23 0.01 250);
+  border-color: #61afef;
+}
+
+.onedark .xml-highlight {
+  color: oklch(0.85 0.02 240); /* #abb2bf */
+}
+
+.onedark .xml-tag-bracket {
+  color: oklch(0.6 0.2 20); /* #e06c75 red */
+}
+
+.onedark .xml-tag-name {
+  color: oklch(0.6 0.2 20); /* Red for tags */
+}
+
+.onedark .xml-attribute-name {
+  color: oklch(0.8 0.15 80); /* #e5c07b yellow */
+}
+
+.onedark .xml-attribute-equals {
+  color: oklch(0.7 0.02 240); /* Dim text */
+}
+
+.onedark .xml-attribute-value {
+  color: oklch(0.75 0.18 150); /* #98c379 green */
+}
+
+.onedark .xml-comment {
+  color: oklch(0.5 0.03 240); /* #5c6370 */
+  font-style: italic;
+}
+
+.onedark .xml-cdata {
+  color: oklch(0.7 0.15 180); /* #56b6c2 cyan */
+}
+
+.onedark .xml-doctype {
+  color: oklch(0.75 0.15 320); /* #c678dd magenta */
+}
+
+.onedark .xml-text {
+  color: oklch(0.85 0.02 240); /* Text */
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/onelight.css b/temp_repo/apps/ui/src/styles/themes/onelight.css
new file mode 100644
index 0000000000000000000000000000000000000000..a8cc491bc869875c88aba24322b340a65d2f6cbd
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/onelight.css
@@ -0,0 +1,93 @@
+/* Atom One Light Theme - Clean light with blue accent */
+
+.onelight {
+  /* Backgrounds */
+  --background: oklch(0.98 0.002 250);
+  --background-50: oklch(0.98 0.002 250 / 0.5);
+  --background-80: oklch(0.98 0.002 250 / 0.8);
+
+  /* Text */
+  --foreground: oklch(0.3 0.02 250);
+  --foreground-secondary: oklch(0.45 0.02 250);
+  --foreground-muted: oklch(0.55 0.015 250);
+
+  /* Card/Popover */
+  --card: oklch(0.97 0.002 250);
+  --card-foreground: oklch(0.3 0.02 250);
+  --popover: oklch(0.98 0.002 250);
+  --popover-foreground: oklch(0.3 0.02 250);
+
+  /* Primary/Brand - blue #526FFF */
+  --primary: oklch(0.55 0.22 265);
+  --primary-foreground: oklch(1 0 0);
+
+  --brand-400: oklch(0.6 0.2 265);
+  --brand-500: oklch(0.55 0.22 265);
+  --brand-600: oklch(0.5 0.24 265);
+
+  /* Secondary */
+  --secondary: oklch(0.92 0.005 250);
+  --secondary-foreground: oklch(0.3 0.02 250);
+
+  /* Muted */
+  --muted: oklch(0.93 0.005 250);
+  --muted-foreground: oklch(0.5 0.015 250);
+
+  /* Accent */
+  --accent: oklch(0.94 0.005 250);
+  --accent-foreground: oklch(0.3 0.02 250);
+
+  /* Destructive - red #E45649 */
+  --destructive: oklch(0.55 0.2 25);
+
+  /* Borders */
+  --border: oklch(0.88 0.005 250);
+  --border-glass: oklch(0.3 0.02 250 / 0.1);
+
+  --input: oklch(0.98 0.002 250);
+  --ring: oklch(0.55 0.22 265);
+
+  /* Charts */
+  --chart-1: oklch(0.55 0.22 265);
+  --chart-2: oklch(0.55 0.15 145);
+  --chart-3: oklch(0.55 0.2 25);
+  --chart-4: oklch(0.55 0.18 320);
+  --chart-5: oklch(0.55 0.15 70);
+
+  /* Sidebar */
+  --sidebar: oklch(0.93 0.005 250);
+  --sidebar-foreground: oklch(0.3 0.02 250);
+  --sidebar-primary: oklch(0.55 0.22 265);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.9 0.005 250);
+  --sidebar-accent-foreground: oklch(0.3 0.02 250);
+  --sidebar-border: oklch(0.88 0.005 250);
+  --sidebar-ring: oklch(0.55 0.22 265);
+
+  /* Action buttons */
+  --action-view: oklch(0.55 0.22 265);
+  --action-view-hover: oklch(0.5 0.24 265);
+  --action-followup: oklch(0.55 0.18 230);
+  --action-followup-hover: oklch(0.5 0.2 230);
+  --action-commit: oklch(0.55 0.15 145);
+  --action-commit-hover: oklch(0.5 0.17 145);
+  --action-verify: oklch(0.55 0.15 145);
+  --action-verify-hover: oklch(0.5 0.17 145);
+
+  /* Running indicator */
+  --running-indicator: oklch(0.55 0.22 265);
+  --running-indicator-text: oklch(0.5 0.24 265);
+
+  /* Status colors */
+  --status-success: oklch(0.55 0.15 145);
+  --status-success-bg: oklch(0.55 0.15 145 / 0.15);
+  --status-warning: oklch(0.7 0.15 70);
+  --status-warning-bg: oklch(0.7 0.15 70 / 0.15);
+  --status-error: oklch(0.55 0.2 25);
+  --status-error-bg: oklch(0.55 0.2 25 / 0.15);
+  --status-info: oklch(0.55 0.22 265);
+  --status-info-bg: oklch(0.55 0.22 265 / 0.15);
+  --status-backlog: oklch(0.5 0 0);
+  --status-in-progress: oklch(0.7 0.15 70);
+  --status-waiting: oklch(0.65 0.18 50);
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/paper.css b/temp_repo/apps/ui/src/styles/themes/paper.css
new file mode 100644
index 0000000000000000000000000000000000000000..290bb69a3918d432d84c78be906b10ec456d8f04
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/paper.css
@@ -0,0 +1,92 @@
+/* Paper Theme - Clean minimal white */
+
+.paper {
+  --background: oklch(0.99 0 0);
+  --background-50: oklch(0.99 0 0 / 0.5);
+  --background-80: oklch(0.99 0 0 / 0.8);
+
+  --foreground: oklch(0.15 0 0);
+  --foreground-secondary: oklch(0.35 0 0);
+  --foreground-muted: oklch(0.5 0 0);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0 0);
+
+  --primary: oklch(0.3 0 0);
+  --primary-foreground: oklch(1 0 0);
+  --brand-400: oklch(0.35 0 0);
+  --brand-500: oklch(0.3 0 0);
+  --brand-600: oklch(0.25 0 0);
+
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.15 0 0);
+  --muted: oklch(0.96 0 0);
+  --muted-foreground: oklch(0.45 0 0);
+  --accent: oklch(0.95 0 0);
+  --accent-foreground: oklch(0.15 0 0);
+
+  --destructive: oklch(0.5 0.2 25);
+  --border: oklch(0.9 0 0);
+  --border-glass: oklch(0.15 0 0 / 0.08);
+  --input: oklch(0.98 0 0);
+  --ring: oklch(0.3 0 0);
+
+  --chart-1: oklch(0.5 0.14 25); /* Warm red - strings, regex */
+  --chart-2: oklch(0.5 0.13 250); /* Blue - properties, variables */
+  --chart-3: oklch(0.55 0.13 145); /* Green - numbers */
+  --chart-4: oklch(0.45 0.14 300); /* Purple - keywords, booleans, tags */
+  --chart-5: oklch(0.5 0.12 180); /* Teal - types, classes */
+
+  --sidebar: oklch(0.98 0 0);
+  --sidebar-foreground: oklch(0.15 0 0);
+  --sidebar-primary: oklch(0.3 0 0);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.95 0 0);
+  --sidebar-accent-foreground: oklch(0.15 0 0);
+  --sidebar-border: oklch(0.9 0 0);
+  --sidebar-ring: oklch(0.3 0 0);
+
+  --action-view: oklch(0.3 0 0);
+  --action-view-hover: oklch(0.25 0 0);
+  --action-followup: oklch(0.4 0 0);
+  --action-followup-hover: oklch(0.35 0 0);
+  --action-commit: oklch(0.35 0.1 145);
+  --action-commit-hover: oklch(0.3 0.12 145);
+  --action-verify: oklch(0.35 0.1 145);
+  --action-verify-hover: oklch(0.3 0.12 145);
+
+  --running-indicator: oklch(0.3 0 0);
+  --running-indicator-text: oklch(0.25 0 0);
+
+  --status-success: oklch(0.4 0.15 145);
+  --status-success-bg: oklch(0.4 0.15 145 / 0.12);
+  --status-warning: oklch(0.55 0.15 70);
+  --status-warning-bg: oklch(0.55 0.15 70 / 0.12);
+  --status-error: oklch(0.5 0.2 25);
+  --status-error-bg: oklch(0.5 0.2 25 / 0.12);
+  --status-info: oklch(0.45 0.12 230);
+  --status-info-bg: oklch(0.45 0.12 230 / 0.12);
+  --status-backlog: oklch(0.55 0 0);
+  --status-in-progress: oklch(0.55 0.15 70);
+  --status-waiting: oklch(0.5 0.1 50);
+}
+
+.paper .content-bg {
+  background: linear-gradient(135deg, oklch(0.99 0 0), oklch(0.98 0 0), oklch(0.99 0 0));
+}
+
+.paper .animated-outline-gradient {
+  background: conic-gradient(
+    from 90deg at 50% 50%,
+    oklch(0.3 0 0) 0%,
+    oklch(0.5 0 0) 50%,
+    oklch(0.3 0 0) 100%
+  );
+}
+
+.paper .animated-outline-inner {
+  background: oklch(1 0 0) !important;
+  color: oklch(0.2 0 0) !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/peach.css b/temp_repo/apps/ui/src/styles/themes/peach.css
new file mode 100644
index 0000000000000000000000000000000000000000..286794695509ad482ee47755c5a32bba0a8f7231
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/peach.css
@@ -0,0 +1,92 @@
+/* Peach Theme - Soft peach/coral tones */
+
+.peach {
+  --background: oklch(0.98 0.02 50);
+  --background-50: oklch(0.98 0.02 50 / 0.5);
+  --background-80: oklch(0.98 0.02 50 / 0.8);
+
+  --foreground: oklch(0.25 0.04 40);
+  --foreground-secondary: oklch(0.45 0.03 40);
+  --foreground-muted: oklch(0.55 0.03 40);
+
+  --card: oklch(0.99 0.015 50);
+  --card-foreground: oklch(0.25 0.04 40);
+  --popover: oklch(0.99 0.015 50);
+  --popover-foreground: oklch(0.25 0.04 40);
+
+  --primary: oklch(0.65 0.15 40);
+  --primary-foreground: oklch(0.99 0.015 50);
+  --brand-400: oklch(0.7 0.13 40);
+  --brand-500: oklch(0.65 0.15 40);
+  --brand-600: oklch(0.6 0.17 40);
+
+  --secondary: oklch(0.95 0.025 50);
+  --secondary-foreground: oklch(0.25 0.04 40);
+  --muted: oklch(0.94 0.028 50);
+  --muted-foreground: oklch(0.5 0.03 40);
+  --accent: oklch(0.92 0.032 50);
+  --accent-foreground: oklch(0.25 0.04 40);
+
+  --destructive: oklch(0.55 0.2 20);
+  --border: oklch(0.9 0.025 50);
+  --border-glass: oklch(0.65 0.15 40 / 0.15);
+  --input: oklch(0.98 0.018 50);
+  --ring: oklch(0.65 0.15 40);
+
+  --chart-1: oklch(0.65 0.15 40);
+  --chart-2: oklch(0.6 0.15 25);
+  --chart-3: oklch(0.6 0.12 70);
+  --chart-4: oklch(0.55 0.12 350);
+  --chart-5: oklch(0.55 0.1 100);
+
+  --sidebar: oklch(0.97 0.022 50);
+  --sidebar-foreground: oklch(0.25 0.04 40);
+  --sidebar-primary: oklch(0.65 0.15 40);
+  --sidebar-primary-foreground: oklch(0.99 0.015 50);
+  --sidebar-accent: oklch(0.94 0.028 50);
+  --sidebar-accent-foreground: oklch(0.25 0.04 40);
+  --sidebar-border: oklch(0.9 0.025 50);
+  --sidebar-ring: oklch(0.65 0.15 40);
+
+  --action-view: oklch(0.65 0.15 40);
+  --action-view-hover: oklch(0.6 0.17 40);
+  --action-followup: oklch(0.6 0.15 25);
+  --action-followup-hover: oklch(0.55 0.17 25);
+  --action-commit: oklch(0.55 0.15 145);
+  --action-commit-hover: oklch(0.5 0.17 145);
+  --action-verify: oklch(0.55 0.15 145);
+  --action-verify-hover: oklch(0.5 0.17 145);
+
+  --running-indicator: oklch(0.65 0.15 40);
+  --running-indicator-text: oklch(0.6 0.17 40);
+
+  --status-success: oklch(0.55 0.15 145);
+  --status-success-bg: oklch(0.55 0.15 145 / 0.15);
+  --status-warning: oklch(0.65 0.15 70);
+  --status-warning-bg: oklch(0.65 0.15 70 / 0.15);
+  --status-error: oklch(0.55 0.2 20);
+  --status-error-bg: oklch(0.55 0.2 20 / 0.15);
+  --status-info: oklch(0.55 0.12 230);
+  --status-info-bg: oklch(0.55 0.12 230 / 0.15);
+  --status-backlog: oklch(0.6 0.03 40);
+  --status-in-progress: oklch(0.65 0.15 70);
+  --status-waiting: oklch(0.6 0.12 50);
+}
+
+.peach .content-bg {
+  background: linear-gradient(
+    135deg,
+    oklch(0.98 0.02 50),
+    oklch(0.97 0.025 50),
+    oklch(0.98 0.02 50)
+  );
+}
+
+.peach .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #fb923c 0%, #f97316 50%, #fb923c 100%);
+}
+
+.peach .animated-outline-inner {
+  background: oklch(0.99 0.015 50) !important;
+  color: #f97316 !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/red.css b/temp_repo/apps/ui/src/styles/themes/red.css
new file mode 100644
index 0000000000000000000000000000000000000000..87d2ce9a27cf299b381424249a63c25c91c88a0f
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/red.css
@@ -0,0 +1,83 @@
+/* Red Theme */
+
+.red {
+  --background: oklch(0.12 0.03 15); /* Deep dark red-tinted black */
+  --background-50: oklch(0.12 0.03 15 / 0.5);
+  --background-80: oklch(0.12 0.03 15 / 0.8);
+
+  --foreground: oklch(0.95 0.01 15); /* Off-white with warm tint */
+  --foreground-secondary: oklch(0.7 0.02 15);
+  --foreground-muted: oklch(0.5 0.03 15);
+
+  --card: oklch(0.18 0.04 15); /* Slightly lighter dark red */
+  --card-foreground: oklch(0.95 0.01 15);
+  --popover: oklch(0.15 0.035 15);
+  --popover-foreground: oklch(0.95 0.01 15);
+
+  --primary: oklch(0.55 0.25 25); /* Vibrant crimson red */
+  --primary-foreground: oklch(0.98 0 0);
+
+  --brand-400: oklch(0.6 0.23 25);
+  --brand-500: oklch(0.55 0.25 25); /* Crimson */
+  --brand-600: oklch(0.5 0.27 25);
+
+  --secondary: oklch(0.22 0.05 15);
+  --secondary-foreground: oklch(0.95 0.01 15);
+
+  --muted: oklch(0.22 0.05 15);
+  --muted-foreground: oklch(0.5 0.03 15);
+
+  --accent: oklch(0.28 0.06 15);
+  --accent-foreground: oklch(0.95 0.01 15);
+
+  --destructive: oklch(0.6 0.28 30); /* Bright orange-red for destructive */
+
+  --border: oklch(0.35 0.08 15);
+  --border-glass: oklch(0.55 0.25 25 / 0.3);
+
+  --input: oklch(0.18 0.04 15);
+  --ring: oklch(0.55 0.25 25);
+
+  --chart-1: oklch(0.55 0.25 25); /* Crimson */
+  --chart-2: oklch(0.7 0.2 50); /* Orange */
+  --chart-3: oklch(0.8 0.18 80); /* Gold */
+  --chart-4: oklch(0.6 0.22 0); /* Pure red */
+  --chart-5: oklch(0.65 0.2 350); /* Pink-red */
+
+  --sidebar: oklch(0.1 0.025 15);
+  --sidebar-foreground: oklch(0.95 0.01 15);
+  --sidebar-primary: oklch(0.55 0.25 25);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.22 0.05 15);
+  --sidebar-accent-foreground: oklch(0.95 0.01 15);
+  --sidebar-border: oklch(0.35 0.08 15);
+  --sidebar-ring: oklch(0.55 0.25 25);
+
+  /* Action button colors - Red theme */
+  --action-view: oklch(0.55 0.25 25); /* Crimson */
+  --action-view-hover: oklch(0.5 0.27 25);
+  --action-followup: oklch(0.7 0.2 50); /* Orange */
+  --action-followup-hover: oklch(0.65 0.22 50);
+  --action-commit: oklch(0.6 0.2 140); /* Green for positive actions */
+  --action-commit-hover: oklch(0.55 0.22 140);
+  --action-verify: oklch(0.6 0.2 140); /* Green */
+  --action-verify-hover: oklch(0.55 0.22 140);
+
+  /* Running indicator - Crimson */
+  --running-indicator: oklch(0.55 0.25 25);
+  --running-indicator-text: oklch(0.6 0.23 25);
+}
+
+/* Red theme scrollbar */
+.red ::-webkit-scrollbar-thumb {
+  background: oklch(0.35 0.15 25);
+  border-radius: 4px;
+}
+
+.red ::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.45 0.18 25);
+}
+
+.red ::-webkit-scrollbar-track {
+  background: oklch(0.15 0.05 25);
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/retro.css b/temp_repo/apps/ui/src/styles/themes/retro.css
new file mode 100644
index 0000000000000000000000000000000000000000..289bf7c006c30b6dbad969cfcd45584061165d5e
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/retro.css
@@ -0,0 +1,249 @@
+/* Retro Theme */
+
+.retro {
+  /* Retro / Cyberpunk Theme */
+  --background: oklch(0 0 0); /* Pure Black */
+  --background-50: oklch(0 0 0 / 0.5);
+  --background-80: oklch(0 0 0 / 0.8);
+
+  /* Neon Green Text */
+  --foreground: oklch(0.85 0.25 145); /* Neon Green */
+  --foreground-secondary: oklch(0.7 0.2 145);
+  --foreground-muted: oklch(0.5 0.15 145);
+
+  /* Hard Edges */
+  --radius: 0px;
+
+  /* UI Elements */
+  --card: oklch(0 0 0); /* Black card */
+  --card-foreground: oklch(0.85 0.25 145);
+  --popover: oklch(0.05 0.05 145);
+  --popover-foreground: oklch(0.85 0.25 145);
+
+  --primary: oklch(0.85 0.25 145); /* Neon Green */
+  --primary-foreground: oklch(0 0 0); /* Black text on green */
+
+  --brand-400: oklch(0.85 0.25 145);
+  --brand-500: oklch(0.85 0.25 145);
+  --brand-600: oklch(0.75 0.25 145);
+
+  --secondary: oklch(0.1 0.1 145); /* Dark Green bg */
+  --secondary-foreground: oklch(0.85 0.25 145);
+
+  --muted: oklch(0.1 0.05 145);
+  --muted-foreground: oklch(0.5 0.15 145);
+
+  --accent: oklch(0.2 0.2 145); /* Brighter green accent */
+  --accent-foreground: oklch(0.85 0.25 145);
+
+  --destructive: oklch(0.6 0.25 25); /* Keep red for destructive */
+
+  --border: oklch(0.3 0.15 145); /* Visible Green Border */
+  --border-glass: oklch(0.85 0.25 145 / 0.3);
+
+  --input: oklch(0.1 0.1 145);
+  --ring: oklch(0.85 0.25 145);
+
+  /* Charts - various neons */
+  --chart-1: oklch(0.85 0.25 145); /* Green */
+  --chart-2: oklch(0.8 0.25 300); /* Purple Neon */
+  --chart-3: oklch(0.8 0.25 200); /* Cyan Neon */
+  --chart-4: oklch(0.8 0.25 60); /* Yellow Neon */
+  --chart-5: oklch(0.8 0.25 20); /* Red Neon */
+
+  /* Sidebar */
+  --sidebar: oklch(0 0 0);
+  --sidebar-foreground: oklch(0.85 0.25 145);
+  --sidebar-primary: oklch(0.85 0.25 145);
+  --sidebar-primary-foreground: oklch(0 0 0);
+  --sidebar-accent: oklch(0.1 0.1 145);
+  --sidebar-accent-foreground: oklch(0.85 0.25 145);
+  --sidebar-border: oklch(0.3 0.15 145);
+  --sidebar-ring: oklch(0.85 0.25 145);
+
+  /* Fonts */
+  --font-sans: var(--font-geist-mono); /* Force Mono everywhere */
+
+  /* Action button colors - All green neon for retro theme */
+  --action-view: oklch(0.85 0.25 145); /* Neon Green */
+  --action-view-hover: oklch(0.9 0.25 145);
+  --action-followup: oklch(0.85 0.25 145); /* Neon Green */
+  --action-followup-hover: oklch(0.9 0.25 145);
+  --action-commit: oklch(0.85 0.25 145); /* Neon Green */
+  --action-commit-hover: oklch(0.9 0.25 145);
+  --action-verify: oklch(0.85 0.25 145); /* Neon Green */
+  --action-verify-hover: oklch(0.9 0.25 145);
+
+  /* Running indicator - Neon Green for retro */
+  --running-indicator: oklch(0.85 0.25 145);
+  --running-indicator-text: oklch(0.85 0.25 145);
+}
+
+/* ========================================
+   DRACULA THEME
+   Inspired by the popular Dracula VS Code theme
+   ======================================== */
+
+/* Theme-specific overrides */
+
+/* Retro Scrollbar - sharp edges with neon green */
+.retro ::-webkit-scrollbar-thumb {
+  background: var(--primary);
+  border-radius: 0;
+}
+
+.retro ::-webkit-scrollbar-track {
+  background: var(--background);
+}
+
+.retro .scrollbar-visible::-webkit-scrollbar-thumb {
+  background: var(--primary);
+  border-radius: 0;
+}
+
+.retro .scrollbar-visible::-webkit-scrollbar-track {
+  background: var(--background);
+  border-radius: 0;
+}
+
+.retro .scrollbar-styled::-webkit-scrollbar-thumb {
+  background: var(--primary);
+  border-radius: 0;
+}
+
+.retro .scrollbar-styled::-webkit-scrollbar-track {
+  background: var(--background);
+  border-radius: 0;
+}
+
+.retro .glass,
+.retro .glass-subtle,
+.retro .glass-strong,
+.retro .bg-glass,
+.retro .bg-glass-80 {
+  backdrop-filter: none;
+  background: var(--background);
+  border: 1px solid var(--border);
+}
+
+.retro .gradient-brand {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.retro .content-bg {
+  background:
+    linear-gradient(rgba(0, 255, 65, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 255, 65, 0.03) 1px, transparent 1px), var(--background);
+  background-size: 20px 20px;
+}
+
+.retro .animated-outline-gradient {
+  background: conic-gradient(
+    from 90deg at 50% 50%,
+    #00ff41 0%,
+    #00ffff 25%,
+    #ff00ff 50%,
+    #00ffff 75%,
+    #00ff41 100%
+  );
+  animation:
+    spin 2s linear infinite,
+    retro-glow 1s ease-in-out infinite alternate;
+}
+
+.retro [data-slot='button'][class*='animated-outline'] {
+  border-radius: 0 !important;
+}
+
+.retro .animated-outline-inner {
+  background: oklch(0 0 0) !important;
+  color: #00ff41 !important;
+  border-radius: 0 !important;
+  text-shadow: 0 0 5px #00ff41;
+  font-family: var(--font-geist-mono), monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.retro [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(0.1 0.1 145) !important;
+  color: #00ff41 !important;
+  box-shadow:
+    0 0 10px #00ff41,
+    0 0 20px #00ff41,
+    inset 0 0 10px rgba(0, 255, 65, 0.1);
+  text-shadow:
+    0 0 10px #00ff41,
+    0 0 20px #00ff41;
+}
+
+.retro .slider-track {
+  background: oklch(0.15 0.05 145);
+  border: 1px solid #00ff41;
+  border-radius: 0 !important;
+}
+
+.retro .slider-range {
+  background: #00ff41;
+  box-shadow:
+    0 0 10px #00ff41,
+    0 0 5px #00ff41;
+  border-radius: 0 !important;
+}
+
+.retro .slider-thumb {
+  background: oklch(0 0 0);
+  border: 2px solid #00ff41;
+  border-radius: 0 !important;
+  box-shadow: 0 0 8px #00ff41;
+}
+
+.retro .slider-thumb:hover {
+  background: oklch(0.1 0.1 145);
+  box-shadow:
+    0 0 12px #00ff41,
+    0 0 20px #00ff41;
+}
+
+.retro .xml-highlight {
+  color: oklch(0.85 0.25 145); /* Neon green default */
+}
+
+.retro .xml-tag-bracket {
+  color: oklch(0.8 0.25 200); /* Cyan for brackets */
+}
+
+.retro .xml-tag-name {
+  color: oklch(0.85 0.25 145); /* Bright green for tags */
+  text-shadow: 0 0 5px oklch(0.85 0.25 145 / 0.5);
+}
+
+.retro .xml-attribute-name {
+  color: oklch(0.8 0.25 300); /* Purple neon for attrs */
+}
+
+.retro .xml-attribute-equals {
+  color: oklch(0.6 0.15 145); /* Dim green for = */
+}
+
+.retro .xml-attribute-value {
+  color: oklch(0.8 0.25 60); /* Yellow neon for strings */
+}
+
+.retro .xml-comment {
+  color: oklch(0.5 0.15 145); /* Dim green for comments */
+  font-style: italic;
+}
+
+.retro .xml-cdata {
+  color: oklch(0.75 0.2 200); /* Cyan for CDATA */
+}
+
+.retro .xml-doctype {
+  color: oklch(0.75 0.2 300); /* Purple for DOCTYPE */
+}
+
+.retro .xml-text {
+  color: oklch(0.7 0.2 145); /* Green text */
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/rose.css b/temp_repo/apps/ui/src/styles/themes/rose.css
new file mode 100644
index 0000000000000000000000000000000000000000..44669b3ec30871d85de675c8a907157e07cacc45
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/rose.css
@@ -0,0 +1,92 @@
+/* Rose Theme - Soft pink/rose tones */
+
+.rose {
+  --background: oklch(0.98 0.01 350);
+  --background-50: oklch(0.98 0.01 350 / 0.5);
+  --background-80: oklch(0.98 0.01 350 / 0.8);
+
+  --foreground: oklch(0.25 0.03 350);
+  --foreground-secondary: oklch(0.45 0.03 350);
+  --foreground-muted: oklch(0.55 0.02 350);
+
+  --card: oklch(0.99 0.008 350);
+  --card-foreground: oklch(0.25 0.03 350);
+  --popover: oklch(0.99 0.008 350);
+  --popover-foreground: oklch(0.25 0.03 350);
+
+  --primary: oklch(0.6 0.18 350);
+  --primary-foreground: oklch(0.99 0.008 350);
+  --brand-400: oklch(0.65 0.16 350);
+  --brand-500: oklch(0.6 0.18 350);
+  --brand-600: oklch(0.55 0.2 350);
+
+  --secondary: oklch(0.95 0.015 350);
+  --secondary-foreground: oklch(0.25 0.03 350);
+  --muted: oklch(0.94 0.02 350);
+  --muted-foreground: oklch(0.5 0.03 350);
+  --accent: oklch(0.92 0.025 350);
+  --accent-foreground: oklch(0.25 0.03 350);
+
+  --destructive: oklch(0.55 0.2 15);
+  --border: oklch(0.9 0.02 350);
+  --border-glass: oklch(0.6 0.18 350 / 0.15);
+  --input: oklch(0.98 0.01 350);
+  --ring: oklch(0.6 0.18 350);
+
+  --chart-1: oklch(0.6 0.18 350);
+  --chart-2: oklch(0.65 0.15 320);
+  --chart-3: oklch(0.55 0.15 15);
+  --chart-4: oklch(0.6 0.15 280);
+  --chart-5: oklch(0.55 0.12 200);
+
+  --sidebar: oklch(0.97 0.012 350);
+  --sidebar-foreground: oklch(0.25 0.03 350);
+  --sidebar-primary: oklch(0.6 0.18 350);
+  --sidebar-primary-foreground: oklch(0.99 0.008 350);
+  --sidebar-accent: oklch(0.94 0.02 350);
+  --sidebar-accent-foreground: oklch(0.25 0.03 350);
+  --sidebar-border: oklch(0.9 0.02 350);
+  --sidebar-ring: oklch(0.6 0.18 350);
+
+  --action-view: oklch(0.6 0.18 350);
+  --action-view-hover: oklch(0.55 0.2 350);
+  --action-followup: oklch(0.6 0.15 320);
+  --action-followup-hover: oklch(0.55 0.17 320);
+  --action-commit: oklch(0.55 0.15 145);
+  --action-commit-hover: oklch(0.5 0.17 145);
+  --action-verify: oklch(0.55 0.15 145);
+  --action-verify-hover: oklch(0.5 0.17 145);
+
+  --running-indicator: oklch(0.6 0.18 350);
+  --running-indicator-text: oklch(0.55 0.2 350);
+
+  --status-success: oklch(0.55 0.15 145);
+  --status-success-bg: oklch(0.55 0.15 145 / 0.15);
+  --status-warning: oklch(0.65 0.15 70);
+  --status-warning-bg: oklch(0.65 0.15 70 / 0.15);
+  --status-error: oklch(0.55 0.2 15);
+  --status-error-bg: oklch(0.55 0.2 15 / 0.15);
+  --status-info: oklch(0.55 0.15 230);
+  --status-info-bg: oklch(0.55 0.15 230 / 0.15);
+  --status-backlog: oklch(0.6 0.02 350);
+  --status-in-progress: oklch(0.65 0.15 70);
+  --status-waiting: oklch(0.6 0.12 50);
+}
+
+.rose .content-bg {
+  background: linear-gradient(
+    135deg,
+    oklch(0.98 0.01 350),
+    oklch(0.97 0.015 350),
+    oklch(0.98 0.01 350)
+  );
+}
+
+.rose .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #f43f5e 0%, #ec4899 50%, #f43f5e 100%);
+}
+
+.rose .animated-outline-inner {
+  background: oklch(0.99 0.008 350) !important;
+  color: #f43f5e !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/sand.css b/temp_repo/apps/ui/src/styles/themes/sand.css
new file mode 100644
index 0000000000000000000000000000000000000000..aacb5b42f1e98589fe0f9a55cae5fe9fb916f540
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/sand.css
@@ -0,0 +1,92 @@
+/* Sand Theme - Sandy beige tones */
+
+.sand {
+  --background: oklch(0.96 0.02 80);
+  --background-50: oklch(0.96 0.02 80 / 0.5);
+  --background-80: oklch(0.96 0.02 80 / 0.8);
+
+  --foreground: oklch(0.25 0.03 70);
+  --foreground-secondary: oklch(0.45 0.03 70);
+  --foreground-muted: oklch(0.55 0.02 70);
+
+  --card: oklch(0.98 0.015 80);
+  --card-foreground: oklch(0.25 0.03 70);
+  --popover: oklch(0.97 0.015 80);
+  --popover-foreground: oklch(0.25 0.03 70);
+
+  --primary: oklch(0.55 0.12 60);
+  --primary-foreground: oklch(0.98 0.015 80);
+  --brand-400: oklch(0.6 0.1 60);
+  --brand-500: oklch(0.55 0.12 60);
+  --brand-600: oklch(0.5 0.14 60);
+
+  --secondary: oklch(0.93 0.025 80);
+  --secondary-foreground: oklch(0.25 0.03 70);
+  --muted: oklch(0.92 0.028 80);
+  --muted-foreground: oklch(0.5 0.03 70);
+  --accent: oklch(0.9 0.03 80);
+  --accent-foreground: oklch(0.25 0.03 70);
+
+  --destructive: oklch(0.55 0.2 25);
+  --border: oklch(0.87 0.03 80);
+  --border-glass: oklch(0.55 0.12 60 / 0.15);
+  --input: oklch(0.97 0.018 80);
+  --ring: oklch(0.55 0.12 60);
+
+  --chart-1: oklch(0.55 0.12 60);
+  --chart-2: oklch(0.6 0.1 40);
+  --chart-3: oklch(0.55 0.1 100);
+  --chart-4: oklch(0.5 0.08 30);
+  --chart-5: oklch(0.55 0.08 120);
+
+  --sidebar: oklch(0.95 0.022 80);
+  --sidebar-foreground: oklch(0.25 0.03 70);
+  --sidebar-primary: oklch(0.55 0.12 60);
+  --sidebar-primary-foreground: oklch(0.98 0.015 80);
+  --sidebar-accent: oklch(0.92 0.028 80);
+  --sidebar-accent-foreground: oklch(0.25 0.03 70);
+  --sidebar-border: oklch(0.87 0.03 80);
+  --sidebar-ring: oklch(0.55 0.12 60);
+
+  --action-view: oklch(0.55 0.12 60);
+  --action-view-hover: oklch(0.5 0.14 60);
+  --action-followup: oklch(0.55 0.1 40);
+  --action-followup-hover: oklch(0.5 0.12 40);
+  --action-commit: oklch(0.55 0.12 130);
+  --action-commit-hover: oklch(0.5 0.14 130);
+  --action-verify: oklch(0.55 0.12 130);
+  --action-verify-hover: oklch(0.5 0.14 130);
+
+  --running-indicator: oklch(0.55 0.12 60);
+  --running-indicator-text: oklch(0.5 0.14 60);
+
+  --status-success: oklch(0.55 0.12 130);
+  --status-success-bg: oklch(0.55 0.12 130 / 0.15);
+  --status-warning: oklch(0.6 0.12 70);
+  --status-warning-bg: oklch(0.6 0.12 70 / 0.15);
+  --status-error: oklch(0.55 0.18 25);
+  --status-error-bg: oklch(0.55 0.18 25 / 0.15);
+  --status-info: oklch(0.5 0.12 230);
+  --status-info-bg: oklch(0.5 0.12 230 / 0.15);
+  --status-backlog: oklch(0.6 0.03 70);
+  --status-in-progress: oklch(0.6 0.12 70);
+  --status-waiting: oklch(0.58 0.1 55);
+}
+
+.sand .content-bg {
+  background: linear-gradient(
+    135deg,
+    oklch(0.96 0.02 80),
+    oklch(0.95 0.025 80),
+    oklch(0.96 0.02 80)
+  );
+}
+
+.sand .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #d97706 0%, #b45309 50%, #d97706 100%);
+}
+
+.sand .animated-outline-inner {
+  background: oklch(0.98 0.015 80) !important;
+  color: #d97706 !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/sepia.css b/temp_repo/apps/ui/src/styles/themes/sepia.css
new file mode 100644
index 0000000000000000000000000000000000000000..b843bd0ebb163e19516209b2f7af0d4811cf4d07
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/sepia.css
@@ -0,0 +1,92 @@
+/* Sepia Theme - Warm sepia/parchment tones */
+
+.sepia {
+  --background: oklch(0.95 0.025 70);
+  --background-50: oklch(0.95 0.025 70 / 0.5);
+  --background-80: oklch(0.95 0.025 70 / 0.8);
+
+  --foreground: oklch(0.25 0.04 50);
+  --foreground-secondary: oklch(0.45 0.03 50);
+  --foreground-muted: oklch(0.55 0.03 50);
+
+  --card: oklch(0.97 0.02 70);
+  --card-foreground: oklch(0.25 0.04 50);
+  --popover: oklch(0.96 0.022 70);
+  --popover-foreground: oklch(0.25 0.04 50);
+
+  --primary: oklch(0.5 0.12 50);
+  --primary-foreground: oklch(0.97 0.02 70);
+  --brand-400: oklch(0.55 0.1 50);
+  --brand-500: oklch(0.5 0.12 50);
+  --brand-600: oklch(0.45 0.14 50);
+
+  --secondary: oklch(0.92 0.028 70);
+  --secondary-foreground: oklch(0.25 0.04 50);
+  --muted: oklch(0.91 0.03 70);
+  --muted-foreground: oklch(0.5 0.03 50);
+  --accent: oklch(0.89 0.035 70);
+  --accent-foreground: oklch(0.25 0.04 50);
+
+  --destructive: oklch(0.55 0.18 25);
+  --border: oklch(0.86 0.035 70);
+  --border-glass: oklch(0.5 0.12 50 / 0.15);
+  --input: oklch(0.96 0.022 70);
+  --ring: oklch(0.5 0.12 50);
+
+  --chart-1: oklch(0.5 0.12 50);
+  --chart-2: oklch(0.55 0.1 35);
+  --chart-3: oklch(0.5 0.08 80);
+  --chart-4: oklch(0.45 0.1 30);
+  --chart-5: oklch(0.5 0.06 100);
+
+  --sidebar: oklch(0.94 0.026 70);
+  --sidebar-foreground: oklch(0.25 0.04 50);
+  --sidebar-primary: oklch(0.5 0.12 50);
+  --sidebar-primary-foreground: oklch(0.97 0.02 70);
+  --sidebar-accent: oklch(0.91 0.03 70);
+  --sidebar-accent-foreground: oklch(0.25 0.04 50);
+  --sidebar-border: oklch(0.86 0.035 70);
+  --sidebar-ring: oklch(0.5 0.12 50);
+
+  --action-view: oklch(0.5 0.12 50);
+  --action-view-hover: oklch(0.45 0.14 50);
+  --action-followup: oklch(0.5 0.1 35);
+  --action-followup-hover: oklch(0.45 0.12 35);
+  --action-commit: oklch(0.5 0.12 130);
+  --action-commit-hover: oklch(0.45 0.14 130);
+  --action-verify: oklch(0.5 0.12 130);
+  --action-verify-hover: oklch(0.45 0.14 130);
+
+  --running-indicator: oklch(0.5 0.12 50);
+  --running-indicator-text: oklch(0.45 0.14 50);
+
+  --status-success: oklch(0.5 0.12 130);
+  --status-success-bg: oklch(0.5 0.12 130 / 0.15);
+  --status-warning: oklch(0.58 0.12 70);
+  --status-warning-bg: oklch(0.58 0.12 70 / 0.15);
+  --status-error: oklch(0.55 0.18 25);
+  --status-error-bg: oklch(0.55 0.18 25 / 0.15);
+  --status-info: oklch(0.5 0.1 230);
+  --status-info-bg: oklch(0.5 0.1 230 / 0.15);
+  --status-backlog: oklch(0.58 0.03 50);
+  --status-in-progress: oklch(0.58 0.12 70);
+  --status-waiting: oklch(0.55 0.1 55);
+}
+
+.sepia .content-bg {
+  background: linear-gradient(
+    135deg,
+    oklch(0.95 0.025 70),
+    oklch(0.94 0.028 70),
+    oklch(0.95 0.025 70)
+  );
+}
+
+.sepia .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #92400e 0%, #a16207 50%, #92400e 100%);
+}
+
+.sepia .animated-outline-inner {
+  background: oklch(0.97 0.02 70) !important;
+  color: #92400e !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/sky.css b/temp_repo/apps/ui/src/styles/themes/sky.css
new file mode 100644
index 0000000000000000000000000000000000000000..2927c2b28c577af300ad048bab3303faec12fb95
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/sky.css
@@ -0,0 +1,92 @@
+/* Sky Theme - Light sky blue */
+
+.sky {
+  --background: oklch(0.98 0.015 220);
+  --background-50: oklch(0.98 0.015 220 / 0.5);
+  --background-80: oklch(0.98 0.015 220 / 0.8);
+
+  --foreground: oklch(0.2 0.03 220);
+  --foreground-secondary: oklch(0.4 0.03 220);
+  --foreground-muted: oklch(0.55 0.02 220);
+
+  --card: oklch(0.99 0.01 220);
+  --card-foreground: oklch(0.2 0.03 220);
+  --popover: oklch(0.99 0.01 220);
+  --popover-foreground: oklch(0.2 0.03 220);
+
+  --primary: oklch(0.55 0.15 225);
+  --primary-foreground: oklch(0.99 0.01 220);
+  --brand-400: oklch(0.6 0.13 225);
+  --brand-500: oklch(0.55 0.15 225);
+  --brand-600: oklch(0.5 0.17 225);
+
+  --secondary: oklch(0.95 0.018 220);
+  --secondary-foreground: oklch(0.2 0.03 220);
+  --muted: oklch(0.94 0.02 220);
+  --muted-foreground: oklch(0.5 0.03 220);
+  --accent: oklch(0.92 0.025 220);
+  --accent-foreground: oklch(0.2 0.03 220);
+
+  --destructive: oklch(0.55 0.2 25);
+  --border: oklch(0.88 0.02 220);
+  --border-glass: oklch(0.55 0.15 225 / 0.15);
+  --input: oklch(0.98 0.012 220);
+  --ring: oklch(0.55 0.15 225);
+
+  --chart-1: oklch(0.55 0.15 225);
+  --chart-2: oklch(0.6 0.12 200);
+  --chart-3: oklch(0.55 0.15 250);
+  --chart-4: oklch(0.6 0.12 180);
+  --chart-5: oklch(0.55 0.1 270);
+
+  --sidebar: oklch(0.97 0.015 220);
+  --sidebar-foreground: oklch(0.2 0.03 220);
+  --sidebar-primary: oklch(0.55 0.15 225);
+  --sidebar-primary-foreground: oklch(0.99 0.01 220);
+  --sidebar-accent: oklch(0.94 0.02 220);
+  --sidebar-accent-foreground: oklch(0.2 0.03 220);
+  --sidebar-border: oklch(0.88 0.02 220);
+  --sidebar-ring: oklch(0.55 0.15 225);
+
+  --action-view: oklch(0.55 0.15 225);
+  --action-view-hover: oklch(0.5 0.17 225);
+  --action-followup: oklch(0.55 0.12 200);
+  --action-followup-hover: oklch(0.5 0.14 200);
+  --action-commit: oklch(0.55 0.15 145);
+  --action-commit-hover: oklch(0.5 0.17 145);
+  --action-verify: oklch(0.55 0.15 145);
+  --action-verify-hover: oklch(0.5 0.17 145);
+
+  --running-indicator: oklch(0.55 0.15 225);
+  --running-indicator-text: oklch(0.5 0.17 225);
+
+  --status-success: oklch(0.55 0.15 145);
+  --status-success-bg: oklch(0.55 0.15 145 / 0.15);
+  --status-warning: oklch(0.65 0.15 70);
+  --status-warning-bg: oklch(0.65 0.15 70 / 0.15);
+  --status-error: oklch(0.55 0.2 25);
+  --status-error-bg: oklch(0.55 0.2 25 / 0.15);
+  --status-info: oklch(0.55 0.15 225);
+  --status-info-bg: oklch(0.55 0.15 225 / 0.15);
+  --status-backlog: oklch(0.6 0.02 220);
+  --status-in-progress: oklch(0.65 0.15 70);
+  --status-waiting: oklch(0.6 0.12 50);
+}
+
+.sky .content-bg {
+  background: linear-gradient(
+    135deg,
+    oklch(0.98 0.015 220),
+    oklch(0.97 0.018 220),
+    oklch(0.98 0.015 220)
+  );
+}
+
+.sky .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #0ea5e9 0%, #38bdf8 50%, #0ea5e9 100%);
+}
+
+.sky .animated-outline-inner {
+  background: oklch(0.99 0.01 220) !important;
+  color: #0ea5e9 !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/snow.css b/temp_repo/apps/ui/src/styles/themes/snow.css
new file mode 100644
index 0000000000000000000000000000000000000000..6fdde4bc50964da794ebcda24aa31021162ac825
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/snow.css
@@ -0,0 +1,92 @@
+/* Snow Theme - Clean white with cool blue tints */
+
+.snow {
+  --background: oklch(0.99 0.005 240);
+  --background-50: oklch(0.99 0.005 240 / 0.5);
+  --background-80: oklch(0.99 0.005 240 / 0.8);
+
+  --foreground: oklch(0.2 0.02 240);
+  --foreground-secondary: oklch(0.4 0.02 240);
+  --foreground-muted: oklch(0.55 0.015 240);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.2 0.02 240);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.2 0.02 240);
+
+  --primary: oklch(0.5 0.15 240);
+  --primary-foreground: oklch(1 0 0);
+  --brand-400: oklch(0.55 0.13 240);
+  --brand-500: oklch(0.5 0.15 240);
+  --brand-600: oklch(0.45 0.17 240);
+
+  --secondary: oklch(0.97 0.008 240);
+  --secondary-foreground: oklch(0.2 0.02 240);
+  --muted: oklch(0.96 0.01 240);
+  --muted-foreground: oklch(0.5 0.015 240);
+  --accent: oklch(0.95 0.012 240);
+  --accent-foreground: oklch(0.2 0.02 240);
+
+  --destructive: oklch(0.55 0.2 25);
+  --border: oklch(0.92 0.008 240);
+  --border-glass: oklch(0.5 0.15 240 / 0.1);
+  --input: oklch(0.98 0.005 240);
+  --ring: oklch(0.5 0.15 240);
+
+  --chart-1: oklch(0.5 0.15 240);
+  --chart-2: oklch(0.55 0.12 200);
+  --chart-3: oklch(0.5 0.15 280);
+  --chart-4: oklch(0.55 0.12 180);
+  --chart-5: oklch(0.5 0.1 260);
+
+  --sidebar: oklch(0.98 0.006 240);
+  --sidebar-foreground: oklch(0.2 0.02 240);
+  --sidebar-primary: oklch(0.5 0.15 240);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.96 0.01 240);
+  --sidebar-accent-foreground: oklch(0.2 0.02 240);
+  --sidebar-border: oklch(0.92 0.008 240);
+  --sidebar-ring: oklch(0.5 0.15 240);
+
+  --action-view: oklch(0.5 0.15 240);
+  --action-view-hover: oklch(0.45 0.17 240);
+  --action-followup: oklch(0.5 0.12 200);
+  --action-followup-hover: oklch(0.45 0.14 200);
+  --action-commit: oklch(0.55 0.15 145);
+  --action-commit-hover: oklch(0.5 0.17 145);
+  --action-verify: oklch(0.55 0.15 145);
+  --action-verify-hover: oklch(0.5 0.17 145);
+
+  --running-indicator: oklch(0.5 0.15 240);
+  --running-indicator-text: oklch(0.45 0.17 240);
+
+  --status-success: oklch(0.55 0.15 145);
+  --status-success-bg: oklch(0.55 0.15 145 / 0.12);
+  --status-warning: oklch(0.65 0.15 70);
+  --status-warning-bg: oklch(0.65 0.15 70 / 0.12);
+  --status-error: oklch(0.55 0.2 25);
+  --status-error-bg: oklch(0.55 0.2 25 / 0.12);
+  --status-info: oklch(0.5 0.15 240);
+  --status-info-bg: oklch(0.5 0.15 240 / 0.12);
+  --status-backlog: oklch(0.6 0.015 240);
+  --status-in-progress: oklch(0.65 0.15 70);
+  --status-waiting: oklch(0.6 0.12 50);
+}
+
+.snow .content-bg {
+  background: linear-gradient(
+    135deg,
+    oklch(0.99 0.005 240),
+    oklch(0.98 0.008 240),
+    oklch(0.99 0.005 240)
+  );
+}
+
+.snow .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #6366f1 0%, #8b5cf6 50%, #6366f1 100%);
+}
+
+.snow .animated-outline-inner {
+  background: oklch(1 0 0) !important;
+  color: #6366f1 !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/solarized.css b/temp_repo/apps/ui/src/styles/themes/solarized.css
new file mode 100644
index 0000000000000000000000000000000000000000..03a78cddc271108d625aaf0cf9cee7175b732f4a
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/solarized.css
@@ -0,0 +1,144 @@
+/* Solarized Theme */
+
+.solarized {
+  --background: oklch(0.2 0.02 230); /* #002b36 base03 */
+  --background-50: oklch(0.2 0.02 230 / 0.5);
+  --background-80: oklch(0.2 0.02 230 / 0.8);
+
+  --foreground: oklch(0.75 0.02 90); /* #839496 base0 */
+  --foreground-secondary: oklch(0.6 0.03 200); /* #657b83 base00 */
+  --foreground-muted: oklch(0.5 0.04 200); /* #586e75 base01 */
+
+  --card: oklch(0.23 0.02 230); /* #073642 base02 */
+  --card-foreground: oklch(0.75 0.02 90);
+  --popover: oklch(0.22 0.02 230);
+  --popover-foreground: oklch(0.75 0.02 90);
+
+  --primary: oklch(0.65 0.15 220); /* #268bd2 blue */
+  --primary-foreground: oklch(0.2 0.02 230);
+
+  --brand-400: oklch(0.7 0.15 220);
+  --brand-500: oklch(0.65 0.15 220); /* #268bd2 */
+  --brand-600: oklch(0.6 0.17 220);
+
+  --secondary: oklch(0.25 0.02 230);
+  --secondary-foreground: oklch(0.75 0.02 90);
+
+  --muted: oklch(0.25 0.02 230);
+  --muted-foreground: oklch(0.5 0.04 200);
+
+  --accent: oklch(0.28 0.03 230);
+  --accent-foreground: oklch(0.75 0.02 90);
+
+  --destructive: oklch(0.55 0.2 25); /* #dc322f red */
+
+  --border: oklch(0.35 0.03 230);
+  --border-glass: oklch(0.65 0.15 220 / 0.3);
+
+  --input: oklch(0.23 0.02 230);
+  --ring: oklch(0.65 0.15 220);
+
+  --chart-1: oklch(0.65 0.15 220); /* Blue */
+  --chart-2: oklch(0.6 0.18 180); /* Cyan #2aa198 */
+  --chart-3: oklch(0.65 0.2 140); /* Green #859900 */
+  --chart-4: oklch(0.7 0.18 55); /* Yellow #b58900 */
+  --chart-5: oklch(0.6 0.2 30); /* Orange #cb4b16 */
+
+  --sidebar: oklch(0.18 0.02 230);
+  --sidebar-foreground: oklch(0.75 0.02 90);
+  --sidebar-primary: oklch(0.65 0.15 220);
+  --sidebar-primary-foreground: oklch(0.2 0.02 230);
+  --sidebar-accent: oklch(0.25 0.02 230);
+  --sidebar-accent-foreground: oklch(0.75 0.02 90);
+  --sidebar-border: oklch(0.35 0.03 230);
+  --sidebar-ring: oklch(0.65 0.15 220);
+
+  /* Action button colors - Solarized blue/cyan theme */
+  --action-view: oklch(0.65 0.15 220); /* Blue */
+  --action-view-hover: oklch(0.6 0.17 220);
+  --action-followup: oklch(0.6 0.18 180); /* Cyan */
+  --action-followup-hover: oklch(0.55 0.2 180);
+  --action-commit: oklch(0.65 0.2 140); /* Green */
+  --action-commit-hover: oklch(0.6 0.22 140);
+  --action-verify: oklch(0.65 0.2 140); /* Green */
+  --action-verify-hover: oklch(0.6 0.22 140);
+
+  /* Running indicator - Blue */
+  --running-indicator: oklch(0.65 0.15 220);
+  --running-indicator-text: oklch(0.7 0.13 220);
+}
+
+/* ========================================
+   GRUVBOX THEME
+   Retro groove color scheme
+   ======================================== */
+
+/* Theme-specific overrides */
+
+.solarized .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #268bd2 0%, #2aa198 50%, #268bd2 100%);
+}
+
+.solarized .animated-outline-inner {
+  background: oklch(0.2 0.02 230) !important;
+  color: #268bd2 !important;
+}
+
+.solarized [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(0.25 0.03 230) !important;
+  color: #2aa198 !important;
+}
+
+.solarized .slider-track {
+  background: oklch(0.25 0.02 230);
+}
+
+.solarized .slider-range {
+  background: linear-gradient(to right, #268bd2, #2aa198);
+}
+
+.solarized .slider-thumb {
+  background: oklch(0.23 0.02 230);
+  border-color: #268bd2;
+}
+
+.solarized .xml-highlight {
+  color: oklch(0.75 0.02 90); /* #839496 */
+}
+
+.solarized .xml-tag-bracket {
+  color: oklch(0.65 0.15 220); /* #268bd2 blue */
+}
+
+.solarized .xml-tag-name {
+  color: oklch(0.65 0.15 220); /* Blue for tags */
+}
+
+.solarized .xml-attribute-name {
+  color: oklch(0.6 0.18 180); /* #2aa198 cyan */
+}
+
+.solarized .xml-attribute-equals {
+  color: oklch(0.75 0.02 90); /* Base text */
+}
+
+.solarized .xml-attribute-value {
+  color: oklch(0.65 0.2 140); /* #859900 green */
+}
+
+.solarized .xml-comment {
+  color: oklch(0.5 0.04 200); /* #586e75 */
+  font-style: italic;
+}
+
+.solarized .xml-cdata {
+  color: oklch(0.6 0.18 180); /* Cyan */
+}
+
+.solarized .xml-doctype {
+  color: oklch(0.6 0.2 290); /* #6c71c4 violet */
+}
+
+.solarized .xml-text {
+  color: oklch(0.75 0.02 90); /* Base text */
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/solarizedlight.css b/temp_repo/apps/ui/src/styles/themes/solarizedlight.css
new file mode 100644
index 0000000000000000000000000000000000000000..b0e3da6cca70a9175205435f4a37f67230d10fa7
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/solarizedlight.css
@@ -0,0 +1,92 @@
+/* Solarized Light Theme */
+
+.solarizedlight {
+  --background: oklch(0.98 0.01 90);
+  --background-50: oklch(0.98 0.01 90 / 0.5);
+  --background-80: oklch(0.98 0.01 90 / 0.8);
+
+  --foreground: oklch(0.35 0.05 200);
+  --foreground-secondary: oklch(0.5 0.05 200);
+  --foreground-muted: oklch(0.6 0.04 200);
+
+  --card: oklch(0.95 0.01 90);
+  --card-foreground: oklch(0.35 0.05 200);
+  --popover: oklch(0.96 0.01 90);
+  --popover-foreground: oklch(0.35 0.05 200);
+
+  --primary: oklch(0.55 0.15 230);
+  --primary-foreground: oklch(0.98 0.01 90);
+  --brand-400: oklch(0.6 0.13 230);
+  --brand-500: oklch(0.55 0.15 230);
+  --brand-600: oklch(0.5 0.17 230);
+
+  --secondary: oklch(0.92 0.01 90);
+  --secondary-foreground: oklch(0.35 0.05 200);
+  --muted: oklch(0.93 0.01 90);
+  --muted-foreground: oklch(0.5 0.04 200);
+  --accent: oklch(0.9 0.02 90);
+  --accent-foreground: oklch(0.35 0.05 200);
+
+  --destructive: oklch(0.55 0.2 25);
+  --border: oklch(0.88 0.015 90);
+  --border-glass: oklch(0.35 0.05 200 / 0.1);
+  --input: oklch(0.97 0.008 90);
+  --ring: oklch(0.55 0.15 230);
+
+  --chart-1: oklch(0.55 0.15 230);
+  --chart-2: oklch(0.6 0.18 25);
+  --chart-3: oklch(0.55 0.15 300);
+  --chart-4: oklch(0.6 0.15 180);
+  --chart-5: oklch(0.65 0.12 80);
+
+  --sidebar: oklch(0.96 0.01 90);
+  --sidebar-foreground: oklch(0.35 0.05 200);
+  --sidebar-primary: oklch(0.55 0.15 230);
+  --sidebar-primary-foreground: oklch(0.98 0.01 90);
+  --sidebar-accent: oklch(0.92 0.01 90);
+  --sidebar-accent-foreground: oklch(0.35 0.05 200);
+  --sidebar-border: oklch(0.88 0.015 90);
+  --sidebar-ring: oklch(0.55 0.15 230);
+
+  --action-view: oklch(0.55 0.15 230);
+  --action-view-hover: oklch(0.5 0.17 230);
+  --action-followup: oklch(0.6 0.18 25);
+  --action-followup-hover: oklch(0.55 0.2 25);
+  --action-commit: oklch(0.55 0.15 145);
+  --action-commit-hover: oklch(0.5 0.17 145);
+  --action-verify: oklch(0.55 0.15 145);
+  --action-verify-hover: oklch(0.5 0.17 145);
+
+  --running-indicator: oklch(0.55 0.15 230);
+  --running-indicator-text: oklch(0.5 0.17 230);
+
+  --status-success: oklch(0.55 0.15 145);
+  --status-success-bg: oklch(0.55 0.15 145 / 0.15);
+  --status-warning: oklch(0.65 0.15 80);
+  --status-warning-bg: oklch(0.65 0.15 80 / 0.15);
+  --status-error: oklch(0.55 0.2 25);
+  --status-error-bg: oklch(0.55 0.2 25 / 0.15);
+  --status-info: oklch(0.55 0.15 230);
+  --status-info-bg: oklch(0.55 0.15 230 / 0.15);
+  --status-backlog: oklch(0.6 0.04 200);
+  --status-in-progress: oklch(0.65 0.15 80);
+  --status-waiting: oklch(0.6 0.12 50);
+}
+
+.solarizedlight .content-bg {
+  background: linear-gradient(
+    135deg,
+    oklch(0.98 0.01 90),
+    oklch(0.96 0.012 90),
+    oklch(0.98 0.01 90)
+  );
+}
+
+.solarizedlight .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #268bd2 0%, #2aa198 50%, #268bd2 100%);
+}
+
+.solarizedlight .animated-outline-inner {
+  background: oklch(0.98 0.01 90) !important;
+  color: #268bd2 !important;
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/sunset.css b/temp_repo/apps/ui/src/styles/themes/sunset.css
new file mode 100644
index 0000000000000000000000000000000000000000..e7471e7d09a6e25f9df3a89f552498c474d97199
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/sunset.css
@@ -0,0 +1,110 @@
+/* Sunset Theme */
+
+.sunset {
+  /* Sunset Theme - Mellow oranges and soft purples */
+  --background: oklch(0.15 0.02 280); /* Deep twilight blue-purple */
+  --background-50: oklch(0.15 0.02 280 / 0.5);
+  --background-80: oklch(0.15 0.02 280 / 0.8);
+
+  --foreground: oklch(0.95 0.01 80); /* Warm white */
+  --foreground-secondary: oklch(0.75 0.02 60);
+  --foreground-muted: oklch(0.6 0.02 60);
+
+  --card: oklch(0.2 0.025 280);
+  --card-foreground: oklch(0.95 0.01 80);
+  --popover: oklch(0.18 0.02 280);
+  --popover-foreground: oklch(0.95 0.01 80);
+
+  --primary: oklch(0.68 0.18 45); /* Mellow sunset orange */
+  --primary-foreground: oklch(0.15 0.02 280);
+
+  --brand-400: oklch(0.72 0.17 45);
+  --brand-500: oklch(0.68 0.18 45); /* Soft sunset orange */
+  --brand-600: oklch(0.64 0.19 42);
+
+  --secondary: oklch(0.25 0.03 280);
+  --secondary-foreground: oklch(0.95 0.01 80);
+
+  --muted: oklch(0.27 0.03 280);
+  --muted-foreground: oklch(0.6 0.02 60);
+
+  --accent: oklch(0.35 0.04 310);
+  --accent-foreground: oklch(0.95 0.01 80);
+
+  --destructive: oklch(0.6 0.2 25); /* Muted red */
+
+  --border: oklch(0.32 0.04 280);
+  --border-glass: oklch(0.68 0.18 45 / 0.3);
+
+  --input: oklch(0.2 0.025 280);
+  --ring: oklch(0.68 0.18 45);
+
+  --chart-1: oklch(0.68 0.18 45); /* Mellow orange */
+  --chart-2: oklch(0.75 0.16 340); /* Soft pink sunset */
+  --chart-3: oklch(0.78 0.18 70); /* Soft golden */
+  --chart-4: oklch(0.66 0.19 42); /* Subtle coral */
+  --chart-5: oklch(0.72 0.14 310); /* Pastel purple */
+
+  --sidebar: oklch(0.13 0.015 280);
+  --sidebar-foreground: oklch(0.95 0.01 80);
+  --sidebar-primary: oklch(0.68 0.18 45);
+  --sidebar-primary-foreground: oklch(0.15 0.02 280);
+  --sidebar-accent: oklch(0.25 0.03 280);
+  --sidebar-accent-foreground: oklch(0.95 0.01 80);
+  --sidebar-border: oklch(0.32 0.04 280);
+  --sidebar-ring: oklch(0.68 0.18 45);
+
+  /* Action button colors - Mellow sunset palette */
+  --action-view: oklch(0.68 0.18 45); /* Mellow orange */
+  --action-view-hover: oklch(0.64 0.19 42);
+  --action-followup: oklch(0.75 0.16 340); /* Soft pink */
+  --action-followup-hover: oklch(0.7 0.17 340);
+  --action-commit: oklch(0.65 0.16 140); /* Soft green */
+  --action-commit-hover: oklch(0.6 0.17 140);
+  --action-verify: oklch(0.65 0.16 140); /* Soft green */
+  --action-verify-hover: oklch(0.6 0.17 140);
+
+  /* Running indicator - Mellow orange */
+  --running-indicator: oklch(0.68 0.18 45);
+  --running-indicator-text: oklch(0.72 0.17 45);
+
+  /* Status colors - Sunset theme */
+  --status-success: oklch(0.65 0.16 140);
+  --status-success-bg: oklch(0.65 0.16 140 / 0.2);
+  --status-warning: oklch(0.78 0.18 70);
+  --status-warning-bg: oklch(0.78 0.18 70 / 0.2);
+  --status-error: oklch(0.65 0.2 25);
+  --status-error-bg: oklch(0.65 0.2 25 / 0.2);
+  --status-info: oklch(0.75 0.16 340);
+  --status-info-bg: oklch(0.75 0.16 340 / 0.2);
+  --status-backlog: oklch(0.65 0.02 280);
+  --status-in-progress: oklch(0.78 0.18 70);
+  --status-waiting: oklch(0.72 0.17 60);
+}
+
+/* Theme-specific overrides */
+
+/* Sunset theme scrollbar */
+.sunset ::-webkit-scrollbar-thumb,
+.sunset .scrollbar-visible::-webkit-scrollbar-thumb {
+  background: oklch(0.5 0.14 45);
+  border-radius: 4px;
+}
+
+.sunset ::-webkit-scrollbar-thumb:hover,
+.sunset .scrollbar-visible::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.58 0.16 45);
+}
+
+.sunset ::-webkit-scrollbar-track,
+.sunset .scrollbar-visible::-webkit-scrollbar-track {
+  background: oklch(0.18 0.03 280);
+}
+
+.sunset .scrollbar-styled::-webkit-scrollbar-thumb {
+  background: oklch(0.5 0.14 45);
+}
+
+.sunset .scrollbar-styled::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.58 0.16 45);
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/synthwave.css b/temp_repo/apps/ui/src/styles/themes/synthwave.css
new file mode 100644
index 0000000000000000000000000000000000000000..2136a0f7f2db85a819bf15b6c604ddb2593d04da
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/synthwave.css
@@ -0,0 +1,160 @@
+/* Synthwave Theme */
+
+.synthwave {
+  --background: oklch(0.15 0.05 290); /* #262335 */
+  --background-50: oklch(0.15 0.05 290 / 0.5);
+  --background-80: oklch(0.15 0.05 290 / 0.8);
+
+  --foreground: oklch(0.95 0.02 320); /* #ffffff with warm tint */
+  --foreground-secondary: oklch(0.75 0.05 320);
+  --foreground-muted: oklch(0.55 0.08 290);
+
+  --card: oklch(0.2 0.06 290); /* #34294f */
+  --card-foreground: oklch(0.95 0.02 320);
+  --popover: oklch(0.18 0.05 290);
+  --popover-foreground: oklch(0.95 0.02 320);
+
+  --primary: oklch(0.7 0.28 350); /* #f97e72 hot pink */
+  --primary-foreground: oklch(0.15 0.05 290);
+
+  --brand-400: oklch(0.75 0.28 350);
+  --brand-500: oklch(0.7 0.28 350); /* Hot pink */
+  --brand-600: oklch(0.65 0.3 350);
+
+  --secondary: oklch(0.25 0.07 290);
+  --secondary-foreground: oklch(0.95 0.02 320);
+
+  --muted: oklch(0.25 0.07 290);
+  --muted-foreground: oklch(0.55 0.08 290);
+
+  --accent: oklch(0.3 0.08 290);
+  --accent-foreground: oklch(0.95 0.02 320);
+
+  --destructive: oklch(0.6 0.25 15);
+
+  --border: oklch(0.4 0.1 290);
+  --border-glass: oklch(0.7 0.28 350 / 0.3);
+
+  --input: oklch(0.2 0.06 290);
+  --ring: oklch(0.7 0.28 350);
+
+  --chart-1: oklch(0.7 0.28 350); /* Hot pink */
+  --chart-2: oklch(0.8 0.25 200); /* Cyan #72f1b8 */
+  --chart-3: oklch(0.85 0.2 60); /* Yellow #fede5d */
+  --chart-4: oklch(0.7 0.25 280); /* Purple #ff7edb */
+  --chart-5: oklch(0.7 0.2 30); /* Orange #f97e72 */
+
+  --sidebar: oklch(0.13 0.05 290);
+  --sidebar-foreground: oklch(0.95 0.02 320);
+  --sidebar-primary: oklch(0.7 0.28 350);
+  --sidebar-primary-foreground: oklch(0.15 0.05 290);
+  --sidebar-accent: oklch(0.25 0.07 290);
+  --sidebar-accent-foreground: oklch(0.95 0.02 320);
+  --sidebar-border: oklch(0.4 0.1 290);
+  --sidebar-ring: oklch(0.7 0.28 350);
+
+  /* Action button colors - Synthwave hot pink/cyan theme */
+  --action-view: oklch(0.7 0.28 350); /* Hot pink */
+  --action-view-hover: oklch(0.65 0.3 350);
+  --action-followup: oklch(0.8 0.25 200); /* Cyan */
+  --action-followup-hover: oklch(0.75 0.27 200);
+  --action-commit: oklch(0.85 0.2 60); /* Yellow */
+  --action-commit-hover: oklch(0.8 0.22 60);
+  --action-verify: oklch(0.85 0.2 60); /* Yellow */
+  --action-verify-hover: oklch(0.8 0.22 60);
+
+  /* Running indicator - Hot pink */
+  --running-indicator: oklch(0.7 0.28 350);
+  --running-indicator-text: oklch(0.75 0.26 350);
+}
+
+/* Red Theme - Bold crimson/red aesthetic */
+
+/* Theme-specific overrides */
+
+.synthwave .animated-outline-gradient {
+  background: conic-gradient(
+    from 90deg at 50% 50%,
+    #f97e72 0%,
+    #72f1b8 25%,
+    #ff7edb 50%,
+    #72f1b8 75%,
+    #f97e72 100%
+  );
+  animation:
+    spin 2s linear infinite,
+    synthwave-glow 1.5s ease-in-out infinite alternate;
+}
+
+.synthwave .animated-outline-inner {
+  background: oklch(0.15 0.05 290) !important;
+  color: #f97e72 !important;
+  text-shadow: 0 0 8px #f97e72;
+}
+
+.synthwave [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(0.22 0.07 290) !important;
+  color: #72f1b8 !important;
+  text-shadow: 0 0 12px #72f1b8;
+  box-shadow: 0 0 15px rgba(114, 241, 184, 0.3);
+}
+
+.synthwave .slider-track {
+  background: oklch(0.25 0.07 290);
+}
+
+.synthwave .slider-range {
+  background: linear-gradient(to right, #f97e72, #ff7edb);
+  box-shadow:
+    0 0 10px #f97e72,
+    0 0 5px #ff7edb;
+}
+
+.synthwave .slider-thumb {
+  background: oklch(0.2 0.06 290);
+  border-color: #f97e72;
+  box-shadow: 0 0 8px #f97e72;
+}
+
+.synthwave .xml-highlight {
+  color: oklch(0.95 0.02 320); /* Warm white */
+}
+
+.synthwave .xml-tag-bracket {
+  color: oklch(0.7 0.28 350); /* #f97e72 hot pink */
+}
+
+.synthwave .xml-tag-name {
+  color: oklch(0.7 0.28 350); /* Hot pink */
+  text-shadow: 0 0 8px oklch(0.7 0.28 350 / 0.5);
+}
+
+.synthwave .xml-attribute-name {
+  color: oklch(0.7 0.25 280); /* #ff7edb purple */
+}
+
+.synthwave .xml-attribute-equals {
+  color: oklch(0.8 0.02 320); /* White-ish */
+}
+
+.synthwave .xml-attribute-value {
+  color: oklch(0.85 0.2 60); /* #fede5d yellow */
+  text-shadow: 0 0 5px oklch(0.85 0.2 60 / 0.3);
+}
+
+.synthwave .xml-comment {
+  color: oklch(0.55 0.08 290); /* Dim purple */
+  font-style: italic;
+}
+
+.synthwave .xml-cdata {
+  color: oklch(0.8 0.25 200); /* #72f1b8 cyan */
+}
+
+.synthwave .xml-doctype {
+  color: oklch(0.8 0.25 200); /* Cyan */
+}
+
+.synthwave .xml-text {
+  color: oklch(0.95 0.02 320); /* White */
+}
diff --git a/temp_repo/apps/ui/src/styles/themes/tokyonight.css b/temp_repo/apps/ui/src/styles/themes/tokyonight.css
new file mode 100644
index 0000000000000000000000000000000000000000..a5f0d326cf64d211f67006888b0b83dc2dc1e16c
--- /dev/null
+++ b/temp_repo/apps/ui/src/styles/themes/tokyonight.css
@@ -0,0 +1,144 @@
+/* Tokyonight Theme */
+
+.tokyonight {
+  --background: oklch(0.16 0.03 260); /* #1a1b26 */
+  --background-50: oklch(0.16 0.03 260 / 0.5);
+  --background-80: oklch(0.16 0.03 260 / 0.8);
+
+  --foreground: oklch(0.85 0.02 250); /* #a9b1d6 */
+  --foreground-secondary: oklch(0.7 0.03 250);
+  --foreground-muted: oklch(0.5 0.04 250); /* #565f89 */
+
+  --card: oklch(0.2 0.03 260); /* #24283b */
+  --card-foreground: oklch(0.85 0.02 250);
+  --popover: oklch(0.18 0.03 260);
+  --popover-foreground: oklch(0.85 0.02 250);
+
+  --primary: oklch(0.7 0.18 280); /* #7aa2f7 blue */
+  --primary-foreground: oklch(0.16 0.03 260);
+
+  --brand-400: oklch(0.75 0.18 280);
+  --brand-500: oklch(0.7 0.18 280); /* #7aa2f7 */
+  --brand-600: oklch(0.65 0.2 280); /* #7dcfff */
+
+  --secondary: oklch(0.24 0.03 260); /* #292e42 */
+  --secondary-foreground: oklch(0.85 0.02 250);
+
+  --muted: oklch(0.24 0.03 260);
+  --muted-foreground: oklch(0.5 0.04 250);
+
+  --accent: oklch(0.28 0.04 260);
+  --accent-foreground: oklch(0.85 0.02 250);
+
+  --destructive: oklch(0.65 0.2 15); /* #f7768e */
+
+  --border: oklch(0.32 0.04 260);
+  --border-glass: oklch(0.7 0.18 280 / 0.3);
+
+  --input: oklch(0.2 0.03 260);
+  --ring: oklch(0.7 0.18 280);
+
+  --chart-1: oklch(0.7 0.18 280); /* Blue #7aa2f7 */
+  --chart-2: oklch(0.75 0.18 200); /* Cyan #7dcfff */
+  --chart-3: oklch(0.75 0.18 140); /* Green #9ece6a */
+  --chart-4: oklch(0.7 0.2 320); /* Magenta #bb9af7 */
+  --chart-5: oklch(0.8 0.18 70); /* Yellow #e0af68 */
+
+  --sidebar: oklch(0.14 0.03 260);
+  --sidebar-foreground: oklch(0.85 0.02 250);
+  --sidebar-primary: oklch(0.7 0.18 280);
+  --sidebar-primary-foreground: oklch(0.16 0.03 260);
+  --sidebar-accent: oklch(0.24 0.03 260);
+  --sidebar-accent-foreground: oklch(0.85 0.02 250);
+  --sidebar-border: oklch(0.32 0.04 260);
+  --sidebar-ring: oklch(0.7 0.18 280);
+
+  /* Action button colors - Tokyo Night blue/magenta theme */
+  --action-view: oklch(0.7 0.18 280); /* Blue */
+  --action-view-hover: oklch(0.65 0.2 280);
+  --action-followup: oklch(0.75 0.18 200); /* Cyan */
+  --action-followup-hover: oklch(0.7 0.2 200);
+  --action-commit: oklch(0.75 0.18 140); /* Green */
+  --action-commit-hover: oklch(0.7 0.2 140);
+  --action-verify: oklch(0.75 0.18 140); /* Green */
+  --action-verify-hover: oklch(0.7 0.2 140);
+
+  /* Running indicator - Blue */
+  --running-indicator: oklch(0.7 0.18 280);
+  --running-indicator-text: oklch(0.75 0.16 280);
+}
+
+/* ========================================
+   SOLARIZED DARK THEME
+   The classic color scheme by Ethan Schoonover
+   ======================================== */
+
+/* Theme-specific overrides */
+
+.tokyonight .animated-outline-gradient {
+  background: conic-gradient(from 90deg at 50% 50%, #7aa2f7 0%, #bb9af7 50%, #7aa2f7 100%);
+}
+
+.tokyonight .animated-outline-inner {
+  background: oklch(0.16 0.03 260) !important;
+  color: #7aa2f7 !important;
+}
+
+.tokyonight [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
+  background: oklch(0.22 0.04 260) !important;
+  color: #bb9af7 !important;
+}
+
+.tokyonight .slider-track {
+  background: oklch(0.24 0.03 260);
+}
+
+.tokyonight .slider-range {
+  background: linear-gradient(to right, #7aa2f7, #bb9af7);
+}
+
+.tokyonight .slider-thumb {
+  background: oklch(0.2 0.03 260);
+  border-color: #7aa2f7;
+}
+
+.tokyonight .xml-highlight {
+  color: oklch(0.85 0.02 250); /* #a9b1d6 */
+}
+
+.tokyonight .xml-tag-bracket {
+  color: oklch(0.65 0.2 15); /* #f7768e red */
+}
+
+.tokyonight .xml-tag-name {
+  color: oklch(0.65 0.2 15); /* Red for tags */
+}
+
+.tokyonight .xml-attribute-name {
+  color: oklch(0.7 0.2 320); /* #bb9af7 purple */
+}
+
+.tokyonight .xml-attribute-equals {
+  color: oklch(0.75 0.02 250); /* Dim text */
+}
+
+.tokyonight .xml-attribute-value {
+  color: oklch(0.75 0.18 140); /* #9ece6a green */
+}
+
+.tokyonight .xml-comment {
+  color: oklch(0.5 0.04 250); /* #565f89 */
+  font-style: italic;
+}
+
+.tokyonight .xml-cdata {
+  color: oklch(0.75 0.18 200); /* #7dcfff cyan */
+}
+
+.tokyonight .xml-doctype {
+  color: oklch(0.7 0.18 280); /* #7aa2f7 blue */
+}
+
+.tokyonight .xml-text {
+  color: oklch(0.85 0.02 250); /* Text color */
+}
diff --git a/temp_repo/apps/ui/src/types/css.d.ts b/temp_repo/apps/ui/src/types/css.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..69a8dbdac54bc5a41fd0458ad721f3e800afcc38
--- /dev/null
+++ b/temp_repo/apps/ui/src/types/css.d.ts
@@ -0,0 +1,9 @@
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module '@xterm/xterm/css/xterm.css' {
+  const content: unknown;
+  export default content;
+}
diff --git a/temp_repo/apps/ui/src/types/electron.d.ts b/temp_repo/apps/ui/src/types/electron.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d3ec82567fc3e1cc39e40ed939fc5087c51c21a7
--- /dev/null
+++ b/temp_repo/apps/ui/src/types/electron.d.ts
@@ -0,0 +1,1946 @@
+/**
+ * Electron API type definitions
+ */
+
+import type {
+  ClaudeUsageResponse,
+  CodexUsageResponse,
+  ZaiUsageResponse,
+  GeminiUsageResponse,
+} from '@/store/app-store';
+import type { ParsedTask, FeatureStatusWithPipeline, MergeStateInfo } from '@automaker/types';
+export type { MergeStateInfo } from '@automaker/types';
+
+export interface ImageAttachment {
+  id?: string; // Optional - may not be present in messages loaded from server
+  data: string; // base64 encoded image data
+  mimeType: string; // e.g., "image/png", "image/jpeg"
+  filename: string;
+  size?: number; // file size in bytes - optional for messages from server
+}
+
+export interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: string;
+  isError?: boolean;
+  images?: ImageAttachment[];
+}
+
+export interface ToolUse {
+  name: string;
+  input: unknown;
+}
+
+export interface ToolResult {
+  name: string;
+  input: {
+    toolUseId?: string;
+    content: string;
+  };
+}
+
+export type StreamEvent =
+  | {
+      type: 'message';
+      sessionId: string;
+      message: Message;
+    }
+  | {
+      type: 'stream';
+      sessionId: string;
+      messageId: string;
+      content: string;
+      isComplete: boolean;
+    }
+  | {
+      type: 'tool_use';
+      sessionId: string;
+      tool: ToolUse;
+    }
+  | {
+      type: 'tool_result';
+      sessionId: string;
+      tool: ToolResult;
+    }
+  | {
+      type: 'complete';
+      sessionId: string;
+      messageId?: string;
+      content: string;
+      toolUses: ToolUse[];
+    }
+  | {
+      type: 'error';
+      sessionId: string;
+      error: string;
+      message?: Message;
+    };
+
+export interface SessionListItem {
+  id: string;
+  name: string;
+  projectPath: string;
+  workingDirectory?: string; // The worktree/directory this session runs in
+  createdAt: string;
+  updatedAt: string;
+  messageCount: number;
+  isArchived: boolean;
+  isDirty?: boolean; // Indicates session has completed work that needs review
+  tags: string[];
+  preview: string;
+}
+
+export interface AgentAPI {
+  start: (
+    sessionId: string,
+    workingDirectory?: string
+  ) => Promise<{
+    success: boolean;
+    messages?: Message[];
+    sessionId?: string;
+    error?: string;
+  }>;
+
+  send: (
+    sessionId: string,
+    message: string,
+    workingDirectory?: string,
+    imagePaths?: string[],
+    model?: string,
+    thinkingLevel?: string
+  ) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  getHistory: (sessionId: string) => Promise<{
+    success: boolean;
+    messages?: Message[];
+    isRunning?: boolean;
+    error?: string;
+  }>;
+
+  stop: (sessionId: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  clear: (sessionId: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  onStream: (callback: (event: StreamEvent) => void) => () => void;
+}
+
+export interface SessionsAPI {
+  list: (includeArchived?: boolean) => Promise<{
+    success: boolean;
+    sessions?: SessionListItem[];
+    error?: string;
+  }>;
+
+  create: (
+    name: string,
+    projectPath: string,
+    workingDirectory?: string
+  ) => Promise<{
+    success: boolean;
+    sessionId?: string;
+    session?: unknown;
+    error?: string;
+  }>;
+
+  update: (
+    sessionId: string,
+    name?: string,
+    tags?: string[]
+  ) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  archive: (sessionId: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  unarchive: (sessionId: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  delete: (sessionId: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  markClean: (sessionId: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+}
+
+export type AutoModeEvent =
+  | {
+      type: 'auto_mode_started';
+      message: string;
+      projectPath?: string;
+      branchName?: string | null;
+    }
+  | {
+      type: 'auto_mode_stopped';
+      message: string;
+      projectPath?: string;
+      branchName?: string | null;
+    }
+  | {
+      type: 'auto_mode_idle';
+      message: string;
+      projectPath?: string;
+      branchName?: string | null;
+    }
+  | {
+      type: 'auto_mode_feature_start';
+      featureId: string;
+      projectId?: string;
+      projectPath?: string;
+      branchName?: string | null;
+      feature: unknown;
+    }
+  | {
+      type: 'auto_mode_progress';
+      featureId: string;
+      projectId?: string;
+      projectPath?: string;
+      branchName?: string | null;
+      content: string;
+    }
+  | {
+      type: 'auto_mode_tool';
+      featureId: string;
+      projectId?: string;
+      projectPath?: string;
+      branchName?: string | null;
+      tool: string;
+      input: unknown;
+    }
+  | {
+      type: 'auto_mode_feature_complete';
+      featureId: string;
+      projectId?: string;
+      projectPath?: string;
+      branchName?: string | null;
+      passes: boolean;
+      message: string;
+    }
+  | {
+      type: 'pipeline_step_started';
+      featureId: string;
+      projectPath?: string;
+      branchName?: string | null;
+      stepId: string;
+      stepName: string;
+      stepIndex: number;
+      totalSteps: number;
+    }
+  | {
+      type: 'pipeline_step_complete';
+      featureId: string;
+      projectPath?: string;
+      branchName?: string | null;
+      stepId: string;
+      stepName: string;
+      stepIndex: number;
+      totalSteps: number;
+    }
+  | {
+      type: 'auto_mode_error';
+      error: string;
+      errorType?: 'authentication' | 'cancellation' | 'abort' | 'execution';
+      featureId?: string;
+      projectId?: string;
+      projectPath?: string;
+      branchName?: string | null;
+    }
+  | {
+      type: 'auto_mode_phase';
+      featureId: string;
+      projectId?: string;
+      projectPath?: string;
+      branchName?: string | null;
+      phase: 'planning' | 'action' | 'verification';
+      message: string;
+    }
+  | {
+      type: 'auto_mode_ultrathink_preparation';
+      featureId: string;
+      projectPath?: string;
+      branchName?: string | null;
+      warnings: string[];
+      recommendations: string[];
+      estimatedCost?: number;
+      estimatedTime?: string;
+    }
+  | {
+      type: 'plan_approval_required';
+      featureId: string;
+      projectPath?: string;
+      branchName?: string | null;
+      planContent: string;
+      planningMode: 'lite' | 'spec' | 'full';
+      planVersion?: number;
+    }
+  | {
+      type: 'plan_auto_approved';
+      featureId: string;
+      projectPath?: string;
+      branchName?: string | null;
+      planContent: string;
+      planningMode: 'lite' | 'spec' | 'full';
+    }
+  | {
+      type: 'plan_approved';
+      featureId: string;
+      projectPath?: string;
+      branchName?: string | null;
+      hasEdits: boolean;
+      planVersion?: number;
+    }
+  | {
+      type: 'plan_rejected';
+      featureId: string;
+      projectPath?: string;
+      branchName?: string | null;
+      feedback?: string;
+    }
+  | {
+      type: 'plan_revision_requested';
+      featureId: string;
+      projectPath?: string;
+      branchName?: string | null;
+      feedback?: string;
+      hasEdits?: boolean;
+      planVersion?: number;
+    }
+  | {
+      type: 'planning_started';
+      featureId: string;
+      branchName?: string | null;
+      mode: 'lite' | 'spec' | 'full';
+      message: string;
+    }
+  | {
+      type: 'auto_mode_task_started';
+      featureId: string;
+      projectPath?: string;
+      taskId: string;
+      taskDescription: string;
+      taskIndex: number;
+      tasksTotal: number;
+    }
+  | {
+      type: 'auto_mode_task_complete';
+      featureId: string;
+      projectPath?: string;
+      taskId: string;
+      tasksCompleted: number;
+      tasksTotal: number;
+    }
+  | {
+      type: 'auto_mode_phase_complete';
+      featureId: string;
+      projectPath?: string;
+      phaseNumber: number;
+    }
+  | {
+      type: 'auto_mode_task_status';
+      featureId: string;
+      projectPath?: string;
+      taskId: string;
+      status: ParsedTask['status'];
+      tasks: ParsedTask[];
+    }
+  | {
+      type: 'auto_mode_summary';
+      featureId: string;
+      projectPath?: string;
+      summary: string;
+    }
+  | {
+      type: 'auto_mode_resuming_features';
+      message: string;
+      projectPath?: string;
+      featureIds: string[];
+      features: Array<{
+        id: string;
+        title?: string;
+        status?: string;
+      }>;
+    }
+  | {
+      type: 'feature_status_changed';
+      featureId: string;
+      projectPath?: string;
+      status: FeatureStatusWithPipeline;
+      previousStatus: FeatureStatusWithPipeline;
+      reason?: string;
+    }
+  | {
+      type: 'features_reconciled';
+      projectPath?: string;
+      reconciledCount: number;
+      reconciledFeatureIds: string[];
+      message: string;
+    };
+
+export type SpecRegenerationEvent =
+  | {
+      type: 'spec_regeneration_progress';
+      content: string;
+      projectPath: string;
+    }
+  | {
+      type: 'spec_regeneration_tool';
+      tool: string;
+      input: unknown;
+      projectPath: string;
+    }
+  | {
+      type: 'spec_regeneration_complete';
+      message: string;
+      projectPath: string;
+    }
+  | {
+      type: 'spec_regeneration_error';
+      error: string;
+      projectPath: string;
+    };
+
+export interface SpecRegenerationAPI {
+  create: (
+    projectPath: string,
+    projectOverview: string,
+    generateFeatures?: boolean,
+    analyzeProject?: boolean,
+    maxFeatures?: number
+  ) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  generate: (
+    projectPath: string,
+    projectDefinition: string,
+    generateFeatures?: boolean,
+    analyzeProject?: boolean,
+    maxFeatures?: number
+  ) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  generateFeatures: (
+    projectPath: string,
+    maxFeatures?: number
+  ) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  sync: (projectPath: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  stop: (projectPath?: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  status: (projectPath?: string) => Promise<{
+    success: boolean;
+    isRunning?: boolean;
+    currentPhase?: string;
+    projectPath?: string;
+    error?: string;
+  }>;
+
+  onEvent: (callback: (event: SpecRegenerationEvent) => void) => () => void;
+}
+
+export interface AutoModeAPI {
+  start: (
+    projectPath: string,
+    branchName?: string | null,
+    maxConcurrency?: number
+  ) => Promise<{
+    success: boolean;
+    message?: string;
+    alreadyRunning?: boolean;
+    branchName?: string | null;
+    error?: string;
+  }>;
+
+  stop: (
+    projectPath: string,
+    branchName?: string | null
+  ) => Promise<{
+    success: boolean;
+    message?: string;
+    wasRunning?: boolean;
+    runningFeaturesCount?: number;
+    branchName?: string | null;
+    error?: string;
+  }>;
+
+  stopFeature: (featureId: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  status: (
+    projectPath?: string,
+    branchName?: string | null
+  ) => Promise<{
+    success: boolean;
+    isRunning?: boolean;
+    isAutoLoopRunning?: boolean;
+    currentFeatureId?: string | null;
+    runningFeatures?: string[];
+    runningProjects?: string[];
+    runningCount?: number;
+    maxConcurrency?: number;
+    branchName?: string | null;
+    error?: string;
+  }>;
+
+  runFeature: (
+    projectPath: string,
+    featureId: string,
+    useWorktrees?: boolean
+  ) => Promise<{
+    success: boolean;
+    passes?: boolean;
+    error?: string;
+  }>;
+
+  verifyFeature: (
+    projectPath: string,
+    featureId: string
+  ) => Promise<{
+    success: boolean;
+    passes?: boolean;
+    error?: string;
+  }>;
+
+  resumeFeature: (
+    projectPath: string,
+    featureId: string,
+    useWorktrees?: boolean
+  ) => Promise<{
+    success: boolean;
+    passes?: boolean;
+    error?: string;
+  }>;
+
+  contextExists: (
+    projectPath: string,
+    featureId: string
+  ) => Promise<{
+    success: boolean;
+    exists?: boolean;
+    error?: string;
+  }>;
+
+  analyzeProject: (projectPath: string) => Promise<{
+    success: boolean;
+    message?: string;
+    error?: string;
+  }>;
+
+  followUpFeature: (
+    projectPath: string,
+    featureId: string,
+    prompt: string,
+    imagePaths?: string[],
+    useWorktrees?: boolean
+  ) => Promise<{
+    success: boolean;
+    passes?: boolean;
+    error?: string;
+  }>;
+
+  commitFeature: (
+    projectPath: string,
+    featureId: string
+  ) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  approvePlan: (
+    projectPath: string,
+    featureId: string,
+    approved: boolean,
+    editedPlan?: string,
+    feedback?: string
+  ) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  onEvent: (callback: (event: AutoModeEvent) => void) => () => void;
+}
+
+export interface ElectronAPI {
+  // Platform info (exposed from preload)
+  platform?: 'darwin' | 'win32' | 'linux';
+  isElectron?: boolean;
+
+  ping: () => Promise<string>;
+  getApiKey?: () => Promise<string | null>;
+  quit?: () => Promise<void>;
+  openExternalLink: (url: string) => Promise<{ success: boolean; error?: string }>;
+
+  // Dialog APIs
+  openDirectory: () => Promise<{
+    canceled: boolean;
+    filePaths: string[];
+  }>;
+  openFile: (options?: unknown) => Promise<{
+    canceled: boolean;
+    filePaths: string[];
+  }>;
+
+  // File system APIs
+  readFile: (filePath: string) => Promise<{
+    success: boolean;
+    content?: string;
+    error?: string;
+  }>;
+  writeFile: (
+    filePath: string,
+    content: string
+  ) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+  mkdir: (dirPath: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+  readdir: (dirPath: string) => Promise<{
+    success: boolean;
+    entries?: Array<{
+      name: string;
+      isDirectory: boolean;
+      isFile: boolean;
+    }>;
+    error?: string;
+  }>;
+  exists: (filePath: string) => Promise<boolean>;
+  stat: (filePath: string) => Promise<{
+    success: boolean;
+    stats?: {
+      isDirectory: boolean;
+      isFile: boolean;
+      size: number;
+      mtime: Date;
+    };
+    error?: string;
+  }>;
+  deleteFile: (filePath: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  // Copy, Move, Download APIs
+  copyItem?: (
+    sourcePath: string,
+    destinationPath: string,
+    overwrite?: boolean
+  ) => Promise<{
+    success: boolean;
+    error?: string;
+    exists?: boolean;
+  }>;
+  moveItem?: (
+    sourcePath: string,
+    destinationPath: string,
+    overwrite?: boolean
+  ) => Promise<{
+    success: boolean;
+    error?: string;
+    exists?: boolean;
+  }>;
+  downloadItem?: (filePath: string) => Promise<void>;
+
+  // App APIs
+  getPath: (name: string) => Promise<string>;
+  saveImageToTemp: (
+    data: string,
+    filename: string,
+    mimeType: string,
+    projectPath?: string
+  ) => Promise<{
+    success: boolean;
+    path?: string;
+    error?: string;
+  }>;
+
+  // Agent APIs
+  agent: AgentAPI;
+
+  // Session Management APIs
+  sessions: SessionsAPI;
+
+  // Auto Mode APIs
+  autoMode: AutoModeAPI;
+
+  // Claude CLI Detection API
+  checkClaudeCli: () => Promise<{
+    success: boolean;
+    status?: string;
+    method?: string;
+    version?: string;
+    path?: string;
+    recommendation?: string;
+    installCommands?: {
+      macos?: string;
+      windows?: string;
+      linux?: string;
+      npm?: string;
+    };
+    error?: string;
+  }>;
+
+  // Model Management APIs
+  model: {
+    // Get all available models from all providers
+    getAvailable: () => Promise<{
+      success: boolean;
+      models?: ModelDefinition[];
+      error?: string;
+    }>;
+
+    // Check all provider installation status
+    checkProviders: () => Promise<{
+      success: boolean;
+      providers?: Record<string, ProviderStatus>;
+      error?: string;
+    }>;
+  };
+
+  // OpenAI API
+  testOpenAIConnection: (apiKey?: string) => Promise<{
+    success: boolean;
+    message?: string;
+    error?: string;
+  }>;
+
+  // Claude Usage API
+  claude: {
+    getUsage: () => Promise<ClaudeUsageResponse>;
+  };
+
+  // Codex Usage API
+  codex: {
+    getUsage: () => Promise<CodexUsageResponse>;
+  };
+
+  // z.ai Usage API
+  zai: {
+    getUsage: () => Promise<ZaiUsageResponse>;
+  };
+
+  // Gemini Usage API
+  gemini: {
+    getUsage: () => Promise<GeminiUsageResponse>;
+  };
+
+  // Worktree Management APIs
+  worktree: WorktreeAPI;
+
+  // Git Operations APIs (for non-worktree operations)
+  git: GitAPI;
+
+  // Spec Regeneration APIs
+  specRegeneration: SpecRegenerationAPI;
+}
+
+export interface WorktreeInfo {
+  worktreePath: string;
+  branchName: string;
+  head?: string;
+  baseBranch?: string;
+}
+
+export interface WorktreeStatus {
+  success: boolean;
+  modifiedFiles?: number;
+  files?: string[];
+  diffStat?: string;
+  recentCommits?: string[];
+  error?: string;
+}
+
+export interface FileStatus {
+  status: string;
+  path: string;
+  statusText: string;
+  /** Raw staging area (index) status character from git porcelain format */
+  indexStatus?: string;
+  /** Raw working tree status character from git porcelain format */
+  workTreeStatus?: string;
+  /** Whether this file is involved in a merge operation */
+  isMergeAffected?: boolean;
+  /** Type of merge involvement (e.g. 'both-modified', 'added-by-us', etc.) */
+  mergeType?: string;
+}
+
+export interface FileDiffsResult {
+  success: boolean;
+  diff?: string;
+  files?: FileStatus[];
+  hasChanges?: boolean;
+  error?: string;
+  /** Merge state info, present when a merge/rebase/cherry-pick is in progress */
+  mergeState?: MergeStateInfo;
+}
+
+export interface FileDiffResult {
+  success: boolean;
+  diff?: string;
+  filePath?: string;
+  error?: string;
+}
+
+export interface WorktreeAPI {
+  // Merge worktree branch into a target branch (defaults to 'main') and optionally clean up
+  mergeFeature: (
+    projectPath: string,
+    branchName: string,
+    worktreePath: string,
+    targetBranch?: string,
+    options?: {
+      squash?: boolean;
+      message?: string;
+      deleteWorktreeAndBranch?: boolean;
+    }
+  ) => Promise<{
+    success: boolean;
+    mergedBranch?: string;
+    targetBranch?: string;
+    deleted?: {
+      worktreeDeleted: boolean;
+      branchDeleted: boolean;
+    };
+    error?: string;
+    hasConflicts?: boolean;
+    conflictFiles?: string[];
+  }>;
+
+  // Rebase the current branch onto a target branch
+  rebase: (
+    worktreePath: string,
+    ontoBranch: string,
+    remote?: string
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      branch: string;
+      ontoBranch: string;
+      message: string;
+    };
+    error?: string;
+    hasConflicts?: boolean;
+    conflictFiles?: string[];
+    aborted?: boolean;
+  }>;
+
+  // Get worktree info for a feature
+  getInfo: (
+    projectPath: string,
+    featureId: string
+  ) => Promise<{
+    success: boolean;
+    worktreePath?: string;
+    branchName?: string;
+    head?: string;
+    error?: string;
+  }>;
+
+  // Get worktree status (changed files, commits)
+  getStatus: (projectPath: string, featureId: string) => Promise<WorktreeStatus>;
+
+  // List all feature worktrees
+  list: (projectPath: string) => Promise<{
+    success: boolean;
+    worktrees?: WorktreeInfo[];
+    error?: string;
+  }>;
+
+  // List all worktrees with details (for worktree selector)
+  listAll: (
+    projectPath: string,
+    includeDetails?: boolean,
+    forceRefreshGitHub?: boolean
+  ) => Promise<{
+    success: boolean;
+    worktrees?: Array<{
+      path: string;
+      branch: string;
+      isMain: boolean;
+      isCurrent: boolean; // Is this the currently checked out branch?
+      hasWorktree: boolean; // Does this branch have an active worktree?
+      hasChanges?: boolean;
+      changedFilesCount?: number;
+      pr?: {
+        number: number;
+        url: string;
+        title: string;
+        state: string;
+        createdAt: string;
+      };
+    }>;
+    removedWorktrees?: Array<{
+      path: string;
+      branch: string;
+    }>;
+    error?: string;
+  }>;
+
+  // Create a new worktree
+  create: (
+    projectPath: string,
+    branchName: string,
+    baseBranch?: string
+  ) => Promise<{
+    success: boolean;
+    worktree?: {
+      path: string;
+      branch: string;
+      isNew: boolean;
+      /** Short commit hash the worktree is based on */
+      baseCommitHash?: string;
+      /** Result of syncing the base branch with its remote tracking branch */
+      syncResult?: {
+        /** Whether the sync succeeded */
+        synced: boolean;
+        /** The remote that was synced from */
+        remote?: string;
+        /** Human-readable message about the sync result */
+        message?: string;
+        /** Whether the branch had diverged (local commits ahead of remote) */
+        diverged?: boolean;
+      };
+    };
+    error?: string;
+  }>;
+
+  // Delete a worktree
+  delete: (
+    projectPath: string,
+    worktreePath: string,
+    deleteBranch?: boolean
+  ) => Promise<{
+    success: boolean;
+    deleted?: {
+      worktreePath: string;
+      branch: string | null;
+    };
+    error?: string;
+  }>;
+
+  // Commit changes in a worktree
+  commit: (
+    worktreePath: string,
+    message: string,
+    files?: string[]
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      committed: boolean;
+      commitHash?: string;
+      branch?: string;
+      message?: string;
+    };
+    error?: string;
+  }>;
+
+  // Generate an AI commit message from git diff
+  generateCommitMessage: (
+    worktreePath: string,
+    model?: string,
+    thinkingLevel?: string,
+    providerId?: string
+  ) => Promise<{
+    success: boolean;
+    message?: string;
+    error?: string;
+  }>;
+
+  // Generate an AI PR title and description from branch diff
+  generatePRDescription: (
+    worktreePath: string,
+    baseBranch?: string,
+    model?: string,
+    thinkingLevel?: string,
+    providerId?: string
+  ) => Promise<{
+    success: boolean;
+    title?: string;
+    body?: string;
+    error?: string;
+  }>;
+
+  // Push a worktree branch to remote
+  push: (
+    worktreePath: string,
+    force?: boolean,
+    remote?: string,
+    autoResolve?: boolean
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      branch: string;
+      pushed: boolean;
+      diverged?: boolean;
+      autoResolved?: boolean;
+      message: string;
+    };
+    error?: string;
+    diverged?: boolean;
+    hasConflicts?: boolean;
+    conflictFiles?: string[];
+    code?: 'NOT_GIT_REPO' | 'NO_COMMITS';
+  }>;
+
+  // Sync a worktree branch (pull then push)
+  sync: (
+    worktreePath: string,
+    remote?: string
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      branch: string;
+      pulled: boolean;
+      pushed: boolean;
+      isFastForward?: boolean;
+      isMerge?: boolean;
+      autoResolved?: boolean;
+      message: string;
+    };
+    error?: string;
+    hasConflicts?: boolean;
+    conflictFiles?: string[];
+    conflictSource?: 'pull' | 'stash';
+  }>;
+
+  // Set the upstream tracking branch
+  setTracking: (
+    worktreePath: string,
+    remote: string,
+    branch?: string
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      branch: string;
+      remote: string;
+      upstream: string;
+      message: string;
+    };
+    error?: string;
+  }>;
+
+  // Create a pull request from a worktree
+  createPR: (
+    worktreePath: string,
+    options?: {
+      projectPath?: string;
+      commitMessage?: string;
+      prTitle?: string;
+      prBody?: string;
+      baseBranch?: string;
+      draft?: boolean;
+      remote?: string;
+      /** Remote to create the PR against (e.g. upstream). If not specified, inferred from repo setup. */
+      targetRemote?: string;
+    }
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      branch: string;
+      committed: boolean;
+      commitHash?: string;
+      pushed: boolean;
+      prUrl?: string;
+      prNumber?: number;
+      prCreated: boolean;
+      prAlreadyExisted?: boolean;
+      prError?: string;
+      browserUrl?: string;
+      ghCliAvailable?: boolean;
+    };
+    error?: string;
+  }>;
+
+  // Update the tracked PR number for a worktree branch
+  updatePRNumber: (
+    worktreePath: string,
+    prNumber: number,
+    projectPath?: string
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      branch: string;
+      prInfo: {
+        number: number;
+        url: string;
+        title: string;
+        state: string;
+        createdAt: string;
+      };
+      ghCliUnavailable?: boolean;
+    };
+    error?: string;
+  }>;
+
+  // Get file diffs for a feature worktree
+  getDiffs: (projectPath: string, featureId: string) => Promise<FileDiffsResult>;
+
+  // Get diff for a specific file in a worktree
+  getFileDiff: (
+    projectPath: string,
+    featureId: string,
+    filePath: string
+  ) => Promise<FileDiffResult>;
+
+  // Stage or unstage files in a worktree
+  stageFiles: (
+    worktreePath: string,
+    files: string[],
+    operation: 'stage' | 'unstage'
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      operation: 'stage' | 'unstage';
+      filesCount: number;
+    };
+    error?: string;
+  }>;
+
+  // Pull latest changes from remote with optional stash management
+  pull: (
+    worktreePath: string,
+    remote?: string,
+    stashIfNeeded?: boolean,
+    remoteBranch?: string
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      branch: string;
+      pulled: boolean;
+      message: string;
+      hasLocalChanges?: boolean;
+      localChangedFiles?: string[];
+      hasConflicts?: boolean;
+      conflictSource?: 'pull' | 'stash';
+      conflictFiles?: string[];
+      stashed?: boolean;
+      stashRestored?: boolean;
+    };
+    error?: string;
+    code?: 'NOT_GIT_REPO' | 'NO_COMMITS';
+  }>;
+
+  // Check for uncommitted changes in a worktree
+  checkChanges: (worktreePath: string) => Promise<{
+    success: boolean;
+    result?: {
+      hasChanges: boolean;
+      staged: string[];
+      unstaged: string[];
+      untracked: string[];
+      totalFiles: number;
+    };
+    error?: string;
+  }>;
+
+  // Create and checkout a new branch (with optional stash handling)
+  checkoutBranch: (
+    worktreePath: string,
+    branchName: string,
+    baseBranch?: string,
+    stashChanges?: boolean,
+    includeUntracked?: boolean
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      previousBranch: string;
+      newBranch: string;
+      message: string;
+      hasConflicts?: boolean;
+      stashedChanges?: boolean;
+    };
+    error?: string;
+    code?: 'NOT_GIT_REPO' | 'NO_COMMITS';
+    stashPopConflicts?: boolean;
+    stashPopConflictMessage?: string;
+  }>;
+
+  // List branches (local and optionally remote)
+  listBranches: (
+    worktreePath: string,
+    includeRemote?: boolean,
+    signal?: AbortSignal
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      currentBranch: string;
+      branches: Array<{
+        name: string;
+        isCurrent: boolean;
+        isRemote: boolean;
+      }>;
+      aheadCount: number;
+      behindCount: number;
+      hasRemoteBranch: boolean;
+      hasAnyRemotes: boolean;
+      /** The name of the remote that the current branch is tracking (e.g. "origin"), if any */
+      trackingRemote?: string;
+    };
+    error?: string;
+    code?: 'NOT_GIT_REPO' | 'NO_COMMITS'; // Error codes for git status issues
+  }>;
+
+  // Switch to an existing branch
+  switchBranch: (
+    worktreePath: string,
+    branchName: string
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      previousBranch: string;
+      currentBranch: string;
+      message: string;
+      hasConflicts: boolean;
+      stashedChanges: boolean;
+    };
+    error?: string;
+    code?: 'NOT_GIT_REPO' | 'NO_COMMITS' | 'UNCOMMITTED_CHANGES';
+    /** True when the checkout failed AND the stash-pop used to restore changes produced merge conflicts */
+    stashPopConflicts?: boolean;
+    /** Human-readable message describing the stash-pop conflict situation */
+    stashPopConflictMessage?: string;
+  }>;
+
+  // List all remotes and their branches
+  listRemotes: (worktreePath: string) => Promise<{
+    success: boolean;
+    result?: {
+      remotes: Array<{
+        name: string;
+        url: string;
+        branches: Array<{
+          name: string;
+          fullRef: string;
+        }>;
+      }>;
+    };
+    error?: string;
+    code?: 'NOT_GIT_REPO' | 'NO_COMMITS';
+  }>;
+
+  // Add a new remote to a git repository
+  addRemote: (
+    worktreePath: string,
+    remoteName: string,
+    remoteUrl: string
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      remoteName: string;
+      remoteUrl: string;
+      fetched: boolean;
+      message: string;
+    };
+    error?: string;
+    code?: 'REMOTE_EXISTS';
+  }>;
+
+  // Open a worktree directory in the editor
+  openInEditor: (
+    worktreePath: string,
+    editorCommand?: string
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      message: string;
+      editorName?: string;
+    };
+    error?: string;
+  }>;
+
+  // Get the default code editor name
+  getDefaultEditor: () => Promise<{
+    success: boolean;
+    result?: {
+      editorName: string;
+      editorCommand: string;
+    };
+    error?: string;
+  }>;
+
+  // Get all available code editors
+  getAvailableEditors: () => Promise<{
+    success: boolean;
+    result?: {
+      editors: Array<{
+        name: string;
+        command: string;
+      }>;
+    };
+    error?: string;
+  }>;
+
+  // Refresh editor cache and re-detect available editors
+  refreshEditors: () => Promise<{
+    success: boolean;
+    result?: {
+      editors: Array<{
+        name: string;
+        command: string;
+      }>;
+      message: string;
+    };
+    error?: string;
+  }>;
+
+  // Get available external terminals
+  getAvailableTerminals: () => Promise<{
+    success: boolean;
+    result?: {
+      terminals: Array<{
+        id: string;
+        name: string;
+        command: string;
+      }>;
+    };
+    error?: string;
+  }>;
+
+  // Get default external terminal
+  getDefaultTerminal: () => Promise<{
+    success: boolean;
+    result?: {
+      terminalId: string;
+      terminalName: string;
+      terminalCommand: string;
+    } | null;
+    error?: string;
+  }>;
+
+  // Refresh terminal cache and re-detect available terminals
+  refreshTerminals: () => Promise<{
+    success: boolean;
+    result?: {
+      terminals: Array<{
+        id: string;
+        name: string;
+        command: string;
+      }>;
+      message: string;
+    };
+    error?: string;
+  }>;
+
+  // Open worktree in an external terminal
+  openInExternalTerminal: (
+    worktreePath: string,
+    terminalId?: string
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      message: string;
+      terminalName: string;
+    };
+    error?: string;
+  }>;
+
+  // Initialize git repository in a project
+  initGit: (projectPath: string) => Promise<{
+    success: boolean;
+    result?: {
+      initialized: boolean;
+      message: string;
+    };
+    error?: string;
+  }>;
+
+  // Start a dev server for a worktree
+  startDevServer: (
+    projectPath: string,
+    worktreePath: string
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      worktreePath: string;
+      port: number;
+      url: string;
+      message: string;
+    };
+    error?: string;
+  }>;
+
+  // Stop a dev server for a worktree
+  stopDevServer: (worktreePath: string) => Promise<{
+    success: boolean;
+    result?: {
+      worktreePath: string;
+      message: string;
+    };
+    error?: string;
+  }>;
+
+  // List all running dev servers
+  listDevServers: () => Promise<{
+    success: boolean;
+    result?: {
+      servers: Array<{
+        worktreePath: string;
+        port: number;
+        url: string;
+        urlDetected: boolean;
+      }>;
+    };
+    error?: string;
+  }>;
+
+  // Get buffered logs for a dev server
+  getDevServerLogs: (worktreePath: string) => Promise<{
+    success: boolean;
+    result?: {
+      worktreePath: string;
+      port: number;
+      url: string;
+      logs: string;
+      startedAt: string;
+    };
+    error?: string;
+  }>;
+
+  // Subscribe to dev server log events (starting, started, output, stopped, url-detected)
+  onDevServerLogEvent: (
+    callback: (
+      event:
+        | {
+            type: 'dev-server:starting';
+            payload: { worktreePath: string; timestamp: string };
+          }
+        | {
+            type: 'dev-server:started';
+            payload: { worktreePath: string; port: number; url: string; timestamp: string };
+          }
+        | {
+            type: 'dev-server:output';
+            payload: { worktreePath: string; content: string; timestamp: string };
+          }
+        | {
+            type: 'dev-server:stopped';
+            payload: {
+              worktreePath: string;
+              port: number;
+              exitCode: number | null;
+              error?: string;
+              timestamp: string;
+            };
+          }
+        | {
+            type: 'dev-server:url-detected';
+            payload: {
+              worktreePath: string;
+              url: string;
+              port: number;
+              timestamp: string;
+            };
+          }
+    ) => void
+  ) => () => void;
+
+  // Get PR info and comments for a branch
+  getPRInfo: (
+    worktreePath: string,
+    branchName: string
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      hasPR: boolean;
+      ghCliAvailable: boolean;
+      prInfo?: {
+        number: number;
+        title: string;
+        url: string;
+        state: string;
+        author: string;
+        body: string;
+        comments: Array<{
+          id: number;
+          author: string;
+          body: string;
+          createdAt: string;
+          isReviewComment: boolean;
+        }>;
+        reviewComments: Array<{
+          id: number;
+          author: string;
+          body: string;
+          path?: string;
+          line?: number;
+          createdAt: string;
+          isReviewComment: boolean;
+        }>;
+      };
+      error?: string;
+    };
+    error?: string;
+  }>;
+
+  // Get init script content for a project
+  getInitScript: (projectPath: string) => Promise<{
+    success: boolean;
+    exists: boolean;
+    content: string;
+    path: string;
+    error?: string;
+  }>;
+
+  // Set init script content for a project
+  setInitScript: (
+    projectPath: string,
+    content: string
+  ) => Promise<{
+    success: boolean;
+    path?: string;
+    error?: string;
+  }>;
+
+  // Delete init script for a project
+  deleteInitScript: (projectPath: string) => Promise<{
+    success: boolean;
+    error?: string;
+  }>;
+
+  // Run (or re-run) init script for a worktree
+  runInitScript: (
+    projectPath: string,
+    worktreePath: string,
+    branch: string
+  ) => Promise<{
+    success: boolean;
+    message?: string;
+    error?: string;
+  }>;
+
+  // Subscribe to init script events
+  onInitScriptEvent: (
+    callback: (event: {
+      type: 'worktree:init-started' | 'worktree:init-output' | 'worktree:init-completed';
+      payload: unknown;
+    }) => void
+  ) => () => void;
+
+  // Discard changes for a worktree (optionally only specific files)
+  discardChanges: (
+    worktreePath: string,
+    files?: string[]
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      discarded: boolean;
+      filesDiscarded: number;
+      filesRemaining: number;
+      branch: string;
+      message: string;
+    };
+    error?: string;
+  }>;
+
+  // Test runner methods
+
+  // Start tests for a worktree
+  startTests: (
+    worktreePath: string,
+    options?: { projectPath?: string; testFile?: string }
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      sessionId: string;
+      worktreePath: string;
+      /** The test command being run (from project settings) */
+      command: string;
+      status: TestRunStatus;
+      testFile?: string;
+      message: string;
+    };
+    error?: string;
+  }>;
+
+  // Stop a running test session
+  stopTests: (sessionId: string) => Promise<{
+    success: boolean;
+    result?: {
+      sessionId: string;
+      message: string;
+    };
+    error?: string;
+  }>;
+
+  // Get test logs for a session
+  getTestLogs: (
+    worktreePath?: string,
+    sessionId?: string
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      sessionId: string;
+      worktreePath: string;
+      command: string;
+      status: TestRunStatus;
+      testFile?: string;
+      logs: string;
+      startedAt: string;
+      finishedAt: string | null;
+      exitCode: number | null;
+    };
+    error?: string;
+  }>;
+
+  // Subscribe to test runner events (started, output, completed)
+  onTestRunnerEvent: (
+    callback: (
+      event:
+        | {
+            type: 'test-runner:started';
+            payload: TestRunnerStartedEvent;
+          }
+        | {
+            type: 'test-runner:output';
+            payload: TestRunnerOutputEvent;
+          }
+        | {
+            type: 'test-runner:completed';
+            payload: TestRunnerCompletedEvent;
+          }
+    ) => void
+  ) => () => void;
+
+  // Get recent commit history for a worktree
+  getCommitLog: (
+    worktreePath: string,
+    limit?: number
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      branch: string;
+      commits: Array<{
+        hash: string;
+        shortHash: string;
+        author: string;
+        authorEmail: string;
+        date: string;
+        subject: string;
+        body: string;
+        files: string[];
+      }>;
+      total: number;
+    };
+    error?: string;
+  }>;
+
+  // Stash changes in a worktree (with optional message and optional file selection)
+  stashPush: (
+    worktreePath: string,
+    message?: string,
+    files?: string[]
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      stashed: boolean;
+      branch?: string;
+      message?: string;
+    };
+    error?: string;
+  }>;
+
+  // List all stashes in a worktree
+  stashList: (worktreePath: string) => Promise<{
+    success: boolean;
+    result?: {
+      stashes: Array<{
+        index: number;
+        message: string;
+        branch: string;
+        date: string;
+        files: string[];
+      }>;
+      total: number;
+    };
+    error?: string;
+  }>;
+
+  // Apply or pop a stash entry
+  stashApply: (
+    worktreePath: string,
+    stashIndex: number,
+    pop?: boolean
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      applied: boolean;
+      hasConflicts: boolean;
+      conflictFiles?: string[];
+      operation: 'apply' | 'pop';
+      stashIndex: number;
+      message: string;
+    };
+    error?: string;
+  }>;
+
+  // Drop (delete) a stash entry
+  stashDrop: (
+    worktreePath: string,
+    stashIndex: number
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      dropped: boolean;
+      stashIndex: number;
+      message: string;
+    };
+    error?: string;
+  }>;
+
+  // Cherry-pick one or more commits into the current branch
+  cherryPick: (
+    worktreePath: string,
+    commitHashes: string[],
+    options?: {
+      noCommit?: boolean;
+    }
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      cherryPicked: boolean;
+      commitHashes: string[];
+      branch: string;
+      message: string;
+    };
+    error?: string;
+    hasConflicts?: boolean;
+    aborted?: boolean;
+  }>;
+
+  // Abort an in-progress merge, rebase, or cherry-pick operation
+  abortOperation: (worktreePath: string) => Promise<{
+    success: boolean;
+    result?: {
+      operation: string;
+      message: string;
+    };
+    error?: string;
+  }>;
+
+  // Continue an in-progress merge, rebase, or cherry-pick after conflict resolution
+  continueOperation: (worktreePath: string) => Promise<{
+    success: boolean;
+    result?: {
+      operation: string;
+      message: string;
+    };
+    error?: string;
+  }>;
+
+  // Get commit log for a specific branch (not just the current one)
+  getBranchCommitLog: (
+    worktreePath: string,
+    branchName?: string,
+    limit?: number
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      branch: string;
+      commits: Array<{
+        hash: string;
+        shortHash: string;
+        author: string;
+        authorEmail: string;
+        date: string;
+        subject: string;
+        body: string;
+        files: string[];
+      }>;
+      total: number;
+    };
+    error?: string;
+  }>;
+}
+
+// Test runner status type
+export type TestRunStatus = 'pending' | 'running' | 'passed' | 'failed' | 'cancelled' | 'error';
+
+// Test runner event payloads
+export interface TestRunnerStartedEvent {
+  sessionId: string;
+  worktreePath: string;
+  /** The test command being run (from project settings) */
+  command: string;
+  testFile?: string;
+  timestamp: string;
+}
+
+export interface TestRunnerOutputEvent {
+  sessionId: string;
+  worktreePath: string;
+  content: string;
+  timestamp: string;
+}
+
+export interface TestRunnerCompletedEvent {
+  sessionId: string;
+  worktreePath: string;
+  /** The test command that was run */
+  command: string;
+  status: TestRunStatus;
+  testFile?: string;
+  exitCode: number | null;
+  duration: number;
+  timestamp: string;
+}
+
+export interface GitFileDetails {
+  branch: string;
+  lastCommitHash: string;
+  lastCommitMessage: string;
+  lastCommitAuthor: string;
+  lastCommitTimestamp: string;
+  linesAdded: number;
+  linesRemoved: number;
+  isConflicted: boolean;
+  isStaged: boolean;
+  isUnstaged: boolean;
+  statusLabel: string;
+}
+
+export interface EnhancedFileStatus {
+  path: string;
+  indexStatus: string;
+  workTreeStatus: string;
+  isConflicted: boolean;
+  isStaged: boolean;
+  isUnstaged: boolean;
+  linesAdded: number;
+  linesRemoved: number;
+  statusLabel: string;
+}
+
+export interface EnhancedStatusResult {
+  success: boolean;
+  branch?: string;
+  files?: EnhancedFileStatus[];
+  error?: string;
+}
+
+export interface GitDetailsResult {
+  success: boolean;
+  details?: GitFileDetails;
+  error?: string;
+}
+
+export interface GitAPI {
+  // Get diffs for the main project (not a worktree)
+  getDiffs: (projectPath: string) => Promise<FileDiffsResult>;
+
+  // Get diff for a specific file in the main project
+  getFileDiff: (projectPath: string, filePath: string) => Promise<FileDiffResult>;
+
+  // Stage or unstage files in the main project
+  stageFiles: (
+    projectPath: string,
+    files: string[],
+    operation: 'stage' | 'unstage'
+  ) => Promise<{
+    success: boolean;
+    result?: {
+      operation: 'stage' | 'unstage';
+      filesCount: number;
+    };
+    error?: string;
+  }>;
+
+  // Get detailed git info for a file (branch, last commit, diff stats, conflict status)
+  getDetails: (projectPath: string, filePath?: string) => Promise<GitDetailsResult>;
+
+  // Get enhanced status with per-file diff stats and staged/unstaged differentiation
+  getEnhancedStatus: (projectPath: string) => Promise<EnhancedStatusResult>;
+}
+
+// Model definition type
+export interface ModelDefinition {
+  id: string;
+  name: string;
+  modelString: string;
+  provider: string;
+  description: string;
+  contextWindow?: number;
+  maxOutputTokens?: number;
+  supportsVision?: boolean;
+  supportsTools?: boolean;
+  tier?: 'basic' | 'standard' | 'premium' | string;
+  default?: boolean;
+  hasReasoning?: boolean;
+}
+
+// Provider status type
+export interface ProviderStatus {
+  status: 'installed' | 'not_installed' | 'api_key_only';
+  method?: string;
+  version?: string;
+  path?: string;
+  recommendation?: string;
+  installCommands?: {
+    macos?: string;
+    windows?: string;
+    linux?: string;
+    npm?: string;
+  };
+}
+
+/**
+ * Extended Electron API with additional Electron-specific methods
+ * that are exposed via the preload script but not part of the shared interface.
+ */
+export interface ExtendedElectronAPI extends ElectronAPI {
+  /** Runtime marker indicating Electron environment */
+  isElectron?: boolean;
+  /** Get the server URL (Electron-only) */
+  getServerUrl?: () => Promise<string>;
+  /** Get the API key (Electron-only) */
+  getApiKey?: () => Promise<string | null>;
+  /** Check if running in external server mode (Electron-only) */
+  isExternalServerMode?: () => Promise<boolean>;
+  /** Get system paths (Electron-only) */
+  getPath?: (name: 'documents' | 'home' | 'appData' | 'userData') => Promise<string>;
+}
+
+declare global {
+  interface Window {
+    electronAPI?: ExtendedElectronAPI;
+    isElectron?: boolean;
+  }
+}
+
+export {};
diff --git a/temp_repo/apps/ui/src/types/global.d.ts b/temp_repo/apps/ui/src/types/global.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..eee79ca1b5bdd8f7f8255d929be159ca40073eb4
--- /dev/null
+++ b/temp_repo/apps/ui/src/types/global.d.ts
@@ -0,0 +1,68 @@
+/**
+ * Global type augmentations for Window interface
+ *
+ * These augmentations extend the Window interface with properties
+ * used in testing and development contexts.
+ */
+
+import type { Feature } from '@automaker/types';
+import type { ElectronAPI } from '../lib/electron';
+
+/**
+ * Mock context file data for testing
+ */
+interface MockContextFile {
+  featureId: string;
+  path: string;
+  content: string;
+}
+
+/**
+ * Mock project data for testing
+ */
+export interface MockProject {
+  id: string;
+  name?: string;
+  path: string;
+  lastOpened?: string;
+}
+
+declare global {
+  interface Window {
+    /**
+     * Mock features array used in E2E tests
+     * Set via page.addInitScript() to simulate features loaded from disk
+     */
+    __mockFeatures?: Feature[];
+
+    /**
+     * Mock current project used in E2E tests
+     * Set via page.addInitScript() to simulate the currently open project
+     */
+    __currentProject?: MockProject | null;
+
+    /**
+     * Mock context file data used in E2E tests
+     * Set via page.addInitScript() to simulate agent output files
+     */
+    __mockContextFile?: MockContextFile;
+
+    /**
+     * Debug helper to check API mode
+     */
+    __checkApiMode?: () => void;
+
+    /**
+     * Electron API exposed via preload script
+     */
+    electronAPI?: ElectronAPI & {
+      isElectron?: boolean;
+      getServerUrl?: () => Promise<string>;
+      getApiKey?: () => Promise<string | null>;
+      isExternalServerMode?: () => Promise<boolean>;
+      getPath?: (name: 'documents' | 'home' | 'appData' | 'userData') => Promise<string>;
+    };
+  }
+}
+
+export {};
diff --git a/temp_repo/apps/ui/src/utils/router.ts b/temp_repo/apps/ui/src/utils/router.ts
new file mode 100644
index 0000000000000000000000000000000000000000..58e57601ef4b4403f7ab689f6aadc53344dd7040
--- /dev/null
+++ b/temp_repo/apps/ui/src/utils/router.ts
@@ -0,0 +1,22 @@
+import { createRouter, createMemoryHistory, createBrowserHistory } from '@tanstack/react-router';
+import { routeTree } from '../routeTree.gen';
+
+// Use browser history in web mode (for e2e tests and dev), memory history in Electron
+const isElectron = typeof window !== 'undefined' && window.electronAPI !== undefined;
+const BOARD_ROUTE_PATH = '/board';
+
+const history = isElectron
+  ? createMemoryHistory({ initialEntries: [BOARD_ROUTE_PATH] })
+  : createBrowserHistory();
+
+export const router = createRouter({
+  routeTree,
+  defaultPendingMinMs: 0,
+  history,
+});
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
diff --git a/temp_repo/apps/ui/src/vite-env.d.ts b/temp_repo/apps/ui/src/vite-env.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8b743a49ac2bff57e5e4010823630835899d0f15
--- /dev/null
+++ b/temp_repo/apps/ui/src/vite-env.d.ts
@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_SERVER_URL?: string;
+  readonly VITE_APP_MODE?: '1' | '2' | '3' | '4';
+}
+
+// Extend ImportMeta to include env property
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+// Global constants defined in vite.config.mts
+declare const __APP_VERSION__: string;
+declare const __APP_BUILD_HASH__: string;
diff --git a/temp_repo/apps/ui/tests/agent/start-new-chat-session.spec.ts b/temp_repo/apps/ui/tests/agent/start-new-chat-session.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a34066001fcab733024e73db693d438e7ccc11d9
--- /dev/null
+++ b/temp_repo/apps/ui/tests/agent/start-new-chat-session.spec.ts
@@ -0,0 +1,95 @@
+/**
+ * Start New Chat Session E2E Test
+ *
+ * Happy path: Start a new agent chat session
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  navigateToAgent,
+  clickNewSessionButton,
+  waitForNewSession,
+  countSessionItems,
+  authenticateForTests,
+} from '../utils';
+
+const TEST_TEMP_DIR = createTempDirPath('agent-session-test');
+
+test.describe('Agent Chat Session', () => {
+  let projectPath: string;
+  const projectName = `test-project-${Date.now()}`;
+
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+
+    projectPath = path.join(TEST_TEMP_DIR, projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(automakerDir, { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'sessions'), { recursive: true });
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: [] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for e2e testing.`
+    );
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('should start a new agent chat session', async ({ page }) => {
+    // Ensure desktop viewport so SessionManager sidebar is visible (hidden below 1024px)
+    await page.setViewportSize({ width: 1280, height: 720 });
+
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+
+    await authenticateForTests(page);
+    await page.goto('/');
+    await waitForNetworkIdle(page);
+
+    // Navigate to agent view
+    await navigateToAgent(page);
+
+    // Verify we're on the agent view
+    await expect(page.locator('[data-testid="agent-view"]')).toBeVisible({ timeout: 10000 });
+
+    // Click new session button
+    await clickNewSessionButton(page);
+
+    // Wait for new session to appear in the list
+    await waitForNewSession(page, { timeout: 10000 });
+
+    // Verify at least one session exists
+    const sessionCount = await countSessionItems(page);
+    expect(sessionCount).toBeGreaterThanOrEqual(1);
+
+    // Verify the message list is visible (indicates the newly created session was selected)
+    const messageList = page.locator('[data-testid="message-list"]');
+    await expect(messageList).toBeVisible({ timeout: 10000 });
+
+    // Verify the agent input is visible
+    await expect(page.locator('[data-testid="agent-input"]')).toBeVisible();
+  });
+});
diff --git a/temp_repo/apps/ui/tests/context/add-context-image.spec.ts b/temp_repo/apps/ui/tests/context/add-context-image.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7ee0634532731bc20de4e19fd19f2bad73b51e42
--- /dev/null
+++ b/temp_repo/apps/ui/tests/context/add-context-image.spec.ts
@@ -0,0 +1,143 @@
+/**
+ * Add Context Image E2E Test
+ *
+ * Happy path: Import an image file to the context via the UI
+ */
+
+import { test, expect } from '@playwright/test';
+import { Buffer } from 'buffer';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  resetContextDirectory,
+  setupProjectWithFixture,
+  getFixturePath,
+  navigateToContext,
+  waitForContextFile,
+  waitForNetworkIdle,
+  authenticateForTests,
+} from '../utils';
+
+test.describe('Add Context Image', () => {
+  let testImagePath: string;
+
+  test.beforeAll(async () => {
+    // Create a simple test image (1x1 red PNG)
+    const fixturePath = getFixturePath();
+    testImagePath = path.join(fixturePath, '..', 'test-image.png');
+
+    // Create a minimal PNG (1x1 pixel red image)
+    const pngHeader = Buffer.from([
+      0x89,
+      0x50,
+      0x4e,
+      0x47,
+      0x0d,
+      0x0a,
+      0x1a,
+      0x0a, // PNG signature
+      0x00,
+      0x00,
+      0x00,
+      0x0d, // IHDR chunk length
+      0x49,
+      0x48,
+      0x44,
+      0x52, // IHDR
+      0x00,
+      0x00,
+      0x00,
+      0x01, // width: 1
+      0x00,
+      0x00,
+      0x00,
+      0x01, // height: 1
+      0x08,
+      0x02, // bit depth: 8, color type: 2 (RGB)
+      0x00,
+      0x00,
+      0x00, // compression, filter, interlace
+      0x90,
+      0x77,
+      0x53,
+      0xde, // IHDR CRC
+      0x00,
+      0x00,
+      0x00,
+      0x0c, // IDAT chunk length
+      0x49,
+      0x44,
+      0x41,
+      0x54, // IDAT
+      0x08,
+      0xd7,
+      0x63,
+      0xf8,
+      0xcf,
+      0xc0,
+      0x00,
+      0x00,
+      0x01,
+      0x01,
+      0x01,
+      0x00, // compressed data
+      0x18,
+      0xdd,
+      0x8d,
+      0xb4, // IDAT CRC
+      0x00,
+      0x00,
+      0x00,
+      0x00, // IEND chunk length
+      0x49,
+      0x45,
+      0x4e,
+      0x44, // IEND
+      0xae,
+      0x42,
+      0x60,
+      0x82, // IEND CRC
+    ]);
+
+    fs.writeFileSync(testImagePath, pngHeader);
+  });
+
+  test.beforeEach(() => {
+    resetContextDirectory();
+  });
+
+  test.afterAll(async () => {
+    // Clean up test image
+    if (fs.existsSync(testImagePath)) {
+      fs.unlinkSync(testImagePath);
+    }
+  });
+
+  test('should import an image file to context', async ({ page }) => {
+    await setupProjectWithFixture(page, getFixturePath());
+    await authenticateForTests(page);
+
+    await navigateToContext(page);
+    await waitForNetworkIdle(page);
+
+    // Wait for the file input to be attached to the DOM before setting files
+    const fileInput = page.locator('[data-testid="file-import-input"]');
+    await expect(fileInput).toBeAttached({ timeout: 10000 });
+
+    // Use setInputFiles to upload the image
+    await fileInput.setInputFiles(testImagePath);
+
+    // Wait for the file to appear in the list (filename should be the base name)
+    const fileName = path.basename(testImagePath);
+    await waitForContextFile(page, fileName, 15000);
+
+    // Verify the file appears in the list
+    const fileButton = page.locator(`[data-testid="context-file-${fileName}"]`);
+    await expect(fileButton).toBeVisible();
+
+    // File verification: The file appearing in the UI is sufficient verification
+    // In test mode, files may be in mock file system or real filesystem depending on API used
+    // The UI showing the file confirms it was successfully uploaded and saved
+    // Note: Description generation may fail in test mode (Claude Code process issues), but that's OK
+  });
+});
diff --git a/temp_repo/apps/ui/tests/context/context-file-management.spec.ts b/temp_repo/apps/ui/tests/context/context-file-management.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..24d99b200e4812a033fcf0a5e0c1800b7f538b0c
--- /dev/null
+++ b/temp_repo/apps/ui/tests/context/context-file-management.spec.ts
@@ -0,0 +1,68 @@
+/**
+ * Context File Management E2E Test
+ *
+ * Happy path: Create a markdown context file
+ */
+
+import { test, expect } from '@playwright/test';
+import {
+  resetContextDirectory,
+  setupProjectWithFixture,
+  getFixturePath,
+  navigateToContext,
+  waitForFileContentToLoad,
+  switchToEditMode,
+  waitForContextFile,
+  clickElement,
+  fillInput,
+  getByTestId,
+  waitForNetworkIdle,
+  getContextEditorContent,
+  authenticateForTests,
+} from '../utils';
+
+test.describe('Context File Management', () => {
+  test.beforeEach(() => {
+    resetContextDirectory();
+  });
+
+  test('should create a new markdown context file', async ({ page }) => {
+    await setupProjectWithFixture(page, getFixturePath());
+    await authenticateForTests(page);
+
+    await navigateToContext(page);
+    await waitForNetworkIdle(page);
+
+    await clickElement(page, 'create-markdown-button');
+    await page.waitForSelector('[data-testid="create-markdown-dialog"]', { timeout: 5000 });
+
+    await fillInput(page, 'new-markdown-name', 'test-context.md');
+    const testContent = '# Test Context\n\nThis is test content';
+    await fillInput(page, 'new-markdown-content', testContent);
+
+    await clickElement(page, 'confirm-create-markdown');
+
+    await page.waitForFunction(
+      () => !document.querySelector('[data-testid="create-markdown-dialog"]'),
+      { timeout: 5000 }
+    );
+
+    await waitForNetworkIdle(page);
+    await waitForContextFile(page, 'test-context.md');
+
+    const fileButton = await getByTestId(page, 'context-file-test-context.md');
+    await expect(fileButton).toBeVisible();
+
+    await fileButton.click();
+    await waitForFileContentToLoad(page);
+    await switchToEditMode(page);
+
+    await page.waitForSelector('[data-testid="context-editor"]', { timeout: 5000 });
+
+    // Wait for async file content to load into the editor
+    await expect(async () => {
+      const editorContent = await getContextEditorContent(page);
+      expect(editorContent).toBe(testContent);
+    }).toPass({ timeout: 10000, intervals: [200, 500, 1000] });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/context/delete-context-file.spec.ts b/temp_repo/apps/ui/tests/context/delete-context-file.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dfdc7710fd87a337ffa7e5319de149e11ea6d01f
--- /dev/null
+++ b/temp_repo/apps/ui/tests/context/delete-context-file.spec.ts
@@ -0,0 +1,70 @@
+/**
+ * Delete Context File E2E Test
+ *
+ * Happy path: Delete a context file via the UI
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  resetContextDirectory,
+  setupProjectWithFixture,
+  getFixturePath,
+  navigateToContext,
+  waitForContextFile,
+  selectContextFile,
+  deleteSelectedContextFile,
+  clickElement,
+  fillInput,
+  waitForNetworkIdle,
+  authenticateForTests,
+} from '../utils';
+
+test.describe('Delete Context File', () => {
+  test.beforeEach(() => {
+    resetContextDirectory();
+  });
+
+  test('should delete a context file via the UI', async ({ page }) => {
+    const fileName = 'to-delete.md';
+
+    await setupProjectWithFixture(page, getFixturePath());
+    await authenticateForTests(page);
+
+    await navigateToContext(page);
+    await waitForNetworkIdle(page);
+
+    // First create a context file to delete
+    await clickElement(page, 'create-markdown-button');
+    await page.waitForSelector('[data-testid="create-markdown-dialog"]', { timeout: 5000 });
+
+    await fillInput(page, 'new-markdown-name', fileName);
+    await fillInput(page, 'new-markdown-content', '# Test File\n\nThis file will be deleted.');
+
+    await clickElement(page, 'confirm-create-markdown');
+
+    await page.waitForFunction(
+      () => !document.querySelector('[data-testid="create-markdown-dialog"]'),
+      { timeout: 5000 }
+    );
+
+    // Wait for the file to appear in the list
+    await waitForContextFile(page, fileName);
+
+    // Select the file
+    await selectContextFile(page, fileName);
+
+    // Delete the selected file
+    await deleteSelectedContextFile(page);
+
+    // Verify the file is no longer in the list (allow time for UI to refresh after delete)
+    const fileButton = page.locator(`[data-testid="context-file-${fileName}"]`);
+    await expect(fileButton).toHaveCount(0, { timeout: 15000 });
+
+    // Verify the file is deleted from the filesystem
+    const fixturePath = getFixturePath();
+    const contextPath = path.join(fixturePath, '.automaker', 'context', fileName);
+    expect(fs.existsSync(contextPath)).toBe(false);
+  });
+});
diff --git a/temp_repo/apps/ui/tests/context/desktop-context-view.spec.ts b/temp_repo/apps/ui/tests/context/desktop-context-view.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..96fcbc05cbf3797354cadb4fd76a99c31dddbf4b
--- /dev/null
+++ b/temp_repo/apps/ui/tests/context/desktop-context-view.spec.ts
@@ -0,0 +1,253 @@
+/**
+ * Desktop Context View E2E Tests
+ *
+ * Tests for desktop behavior in the context view:
+ * - File list and editor visible side-by-side
+ * - Back button is NOT visible on desktop
+ * - Toolbar buttons show both icon and text
+ * - Delete button is visible in toolbar (not hidden like on mobile)
+ */
+
+import { test, expect } from '@playwright/test';
+import {
+  resetContextDirectory,
+  setupProjectWithFixture,
+  getFixturePath,
+  navigateToContext,
+  waitForContextFile,
+  selectContextFile,
+  waitForFileContentToLoad,
+  clickElement,
+  fillInput,
+  waitForNetworkIdle,
+  authenticateForTests,
+  waitForElementHidden,
+} from '../utils';
+
+// Use desktop viewport for desktop tests
+test.use({ viewport: { width: 1280, height: 720 } });
+
+test.describe('Desktop Context View', () => {
+  test.beforeEach(() => {
+    resetContextDirectory();
+  });
+
+  test('should show file list and editor side-by-side on desktop', async ({ page }) => {
+    const fileName = 'desktop-test.md';
+
+    await setupProjectWithFixture(page, getFixturePath());
+    await authenticateForTests(page);
+
+    await navigateToContext(page);
+
+    // Create a test file
+    await clickElement(page, 'create-markdown-button');
+    await page.waitForSelector('[data-testid="create-markdown-dialog"]', { timeout: 5000 });
+
+    await fillInput(page, 'new-markdown-name', fileName);
+    await fillInput(
+      page,
+      'new-markdown-content',
+      '# Desktop Test\n\nThis tests desktop view behavior'
+    );
+
+    await expect(page.locator('[data-testid="confirm-create-markdown"]')).toBeEnabled();
+    await clickElement(page, 'confirm-create-markdown');
+
+    await waitForElementHidden(page, 'create-markdown-dialog');
+
+    await waitForNetworkIdle(page);
+    await waitForContextFile(page, fileName);
+
+    // Select the file
+    await selectContextFile(page, fileName);
+    await waitForFileContentToLoad(page);
+
+    // On desktop, file list should be visible after selection
+    const fileList = page.locator('[data-testid="context-file-list"]');
+    await expect(fileList).toBeVisible();
+
+    // Editor panel should also be visible
+    const editor = page.locator('[data-testid="context-editor"], [data-testid="markdown-preview"]');
+    await expect(editor).toBeVisible();
+  });
+
+  test('should NOT show back button in editor toolbar on desktop', async ({ page }) => {
+    const fileName = 'no-back-button-test.md';
+
+    await setupProjectWithFixture(page, getFixturePath());
+    await authenticateForTests(page);
+
+    await navigateToContext(page);
+
+    // Create a test file
+    await clickElement(page, 'create-markdown-button');
+    await page.waitForSelector('[data-testid="create-markdown-dialog"]', { timeout: 5000 });
+
+    await fillInput(page, 'new-markdown-name', fileName);
+    await fillInput(page, 'new-markdown-content', '# No Back Button Test');
+
+    // Wait for confirm button to be enabled (React state after fill) before clicking
+    const confirmBtn = page.locator('[data-testid="confirm-create-markdown"]');
+    await expect(confirmBtn).toBeEnabled();
+
+    await clickElement(page, 'confirm-create-markdown');
+
+    await waitForElementHidden(page, 'create-markdown-dialog');
+
+    await waitForNetworkIdle(page);
+    await waitForContextFile(page, fileName);
+
+    // Select the file
+    await selectContextFile(page, fileName);
+    await waitForFileContentToLoad(page);
+
+    // Back button should NOT be visible on desktop
+    const backButton = page.locator('button[aria-label="Back"]');
+    await expect(backButton).not.toBeVisible();
+  });
+
+  test('should show buttons with text labels on desktop', async ({ page }) => {
+    const fileName = 'text-labels-test.md';
+
+    await setupProjectWithFixture(page, getFixturePath());
+    await authenticateForTests(page);
+
+    await navigateToContext(page);
+
+    // Create a test file
+    await clickElement(page, 'create-markdown-button');
+    await page.waitForSelector('[data-testid="create-markdown-dialog"]', { timeout: 5000 });
+
+    await fillInput(page, 'new-markdown-name', fileName);
+    await fillInput(
+      page,
+      'new-markdown-content',
+      '# Text Labels Test\n\nTesting button text labels on desktop'
+    );
+
+    await expect(page.locator('[data-testid="confirm-create-markdown"]')).toBeEnabled();
+    await clickElement(page, 'confirm-create-markdown');
+
+    await waitForElementHidden(page, 'create-markdown-dialog');
+
+    await waitForNetworkIdle(page);
+    await waitForContextFile(page, fileName);
+
+    // Select the file
+    await selectContextFile(page, fileName);
+    await waitForFileContentToLoad(page);
+
+    // Get the toggle preview mode button
+    const toggleButton = page.locator('[data-testid="toggle-preview-mode"]');
+    await expect(toggleButton).toBeVisible();
+
+    // Button should have text label on desktop
+    const buttonText = await toggleButton.textContent();
+    // On desktop, button should have visible text (Edit or Preview)
+    expect(buttonText?.trim()).not.toBe('');
+    expect(buttonText?.toLowerCase()).toMatch(/(edit|preview)/);
+  });
+
+  test('should show delete button in toolbar on desktop', async ({ page }) => {
+    const fileName = 'delete-button-desktop-test.md';
+
+    await setupProjectWithFixture(page, getFixturePath());
+    await authenticateForTests(page);
+
+    await navigateToContext(page);
+
+    // Create a test file
+    await clickElement(page, 'create-markdown-button');
+    await page.waitForSelector('[data-testid="create-markdown-dialog"]', { timeout: 5000 });
+
+    await fillInput(page, 'new-markdown-name', fileName);
+    await fillInput(page, 'new-markdown-content', '# Delete Button Desktop Test');
+
+    await expect(page.locator('[data-testid="confirm-create-markdown"]')).toBeEnabled();
+    await clickElement(page, 'confirm-create-markdown');
+
+    // Wait for create to complete: file appears in list (dialog may close after)
+    await page
+      .locator(`[data-testid="context-file-${fileName}"]`)
+      .waitFor({ state: 'attached', timeout: 20000 });
+    // Then ensure dialog is closed (auto-close or fallback Cancel if still open)
+    await waitForElementHidden(page, 'create-markdown-dialog', { timeout: 5000 }).catch(
+      async () => {
+        const cancelBtn = page.getByRole('button', { name: /cancel/i });
+        if (await cancelBtn.isVisible()) await cancelBtn.click();
+        await waitForElementHidden(page, 'create-markdown-dialog', { timeout: 3000 });
+      }
+    );
+
+    await waitForNetworkIdle(page);
+    await waitForContextFile(page, fileName);
+
+    // Select the file
+    await selectContextFile(page, fileName);
+    await waitForFileContentToLoad(page);
+
+    // Delete button in toolbar should be visible on desktop
+    const deleteButton = page.locator('[data-testid="delete-context-file"]');
+    await expect(deleteButton).toBeVisible();
+  });
+
+  test('should show file list at fixed width on desktop when file is selected', async ({
+    page,
+  }) => {
+    const fileName = 'fixed-width-test.md';
+
+    await setupProjectWithFixture(page, getFixturePath());
+    await authenticateForTests(page);
+
+    await navigateToContext(page);
+
+    // Create a test file
+    await clickElement(page, 'create-markdown-button');
+    await page.waitForSelector('[data-testid="create-markdown-dialog"]', { timeout: 5000 });
+
+    await fillInput(page, 'new-markdown-name', fileName);
+    await fillInput(page, 'new-markdown-content', '# Fixed Width Test');
+
+    // Wait for form state to update so the Create button becomes enabled
+    await expect(page.locator('[data-testid="confirm-create-markdown"]')).toBeEnabled();
+    await clickElement(page, 'confirm-create-markdown');
+
+    await waitForElementHidden(page, 'create-markdown-dialog');
+
+    await waitForNetworkIdle(page);
+    await waitForContextFile(page, fileName);
+
+    // Select the file
+    await selectContextFile(page, fileName);
+    await waitForFileContentToLoad(page);
+
+    // File list should be visible
+    const fileList = page.locator('[data-testid="context-file-list"]');
+    await expect(fileList).toBeVisible();
+
+    // On desktop with file selected, the file list should be at fixed width (w-64 = 256px)
+    const fileListBox = await fileList.boundingBox();
+    expect(fileListBox).not.toBeNull();
+
+    if (fileListBox) {
+      // Desktop file list is w-64 = 256px, allow some tolerance for borders
+      expect(fileListBox.width).toBeLessThanOrEqual(300);
+      expect(fileListBox.width).toBeGreaterThanOrEqual(200);
+    }
+  });
+
+  test('should show action buttons inline in header on desktop', async ({ page }) => {
+    await setupProjectWithFixture(page, getFixturePath());
+    await authenticateForTests(page);
+
+    await navigateToContext(page);
+
+    // On desktop, inline buttons should be visible
+    const createButton = page.locator('[data-testid="create-markdown-button"]');
+    await expect(createButton).toBeVisible();
+
+    const importButton = page.locator('[data-testid="import-file-button"]');
+    await expect(importButton).toBeVisible();
+  });
+});
diff --git a/temp_repo/apps/ui/tests/e2e-testing-guide.md b/temp_repo/apps/ui/tests/e2e-testing-guide.md
new file mode 100644
index 0000000000000000000000000000000000000000..c1d44c1f114f276d4a7d821a218be667190fc990
--- /dev/null
+++ b/temp_repo/apps/ui/tests/e2e-testing-guide.md
@@ -0,0 +1,352 @@
+# E2E Testing Guide
+
+Best practices and patterns for writing reliable, non-flaky Playwright e2e tests in this codebase.
+
+## Core Principles
+
+1. **No arbitrary timeouts** - Never use `page.waitForTimeout()`. Always wait for specific conditions.
+2. **Use data-testid attributes** - Prefer `[data-testid="..."]` selectors over CSS classes or text content.
+3. **Clean up after tests** - Use unique temp directories and clean them up in `afterAll`.
+4. **Test isolation** - Each test should be independent and not rely on state from other tests.
+
+## Setting Up Test State
+
+### Use Setup Utilities (Recommended)
+
+Use the provided utility functions to set up localStorage state. These utilities hide the internal store structure and version details, making tests more maintainable.
+
+```typescript
+import { setupWelcomeView, setupRealProject } from './utils';
+
+// Show welcome view with workspace directory configured
+await setupWelcomeView(page, { workspaceDir: TEST_TEMP_DIR });
+
+// Show welcome view with recent projects
+await setupWelcomeView(page, {
+  workspaceDir: TEST_TEMP_DIR,
+  recentProjects: [
+    {
+      id: 'project-123',
+      name: 'My Project',
+      path: '/path/to/project',
+      lastOpened: new Date().toISOString(),
+    },
+  ],
+});
+
+// Set up a real project on the filesystem
+await setupRealProject(page, projectPath, projectName, {
+  setAsCurrent: true, // Opens board view (default)
+});
+```
+
+### Why Use Utilities Instead of Raw localStorage
+
+1. **Version management** - Store versions are centralized in one place
+2. **Less brittle** - If store structure changes, update one file instead of every test
+3. **Cleaner tests** - Focus on test logic, not setup boilerplate
+4. **Type safety** - Utilities provide typed interfaces for test data
+
+### Manual LocalStorage Setup (Advanced)
+
+If you need custom setup not covered by utilities, use `page.addInitScript()`.
+Store versions are defined in `tests/utils/project/setup.ts`:
+
+- `APP_STORE`: version 2 (matches `app-store.ts`)
+- `SETUP_STORE`: version 0 (matches `setup-store.ts` default)
+
+### Temp Directory Management
+
+Create unique temp directories for test isolation:
+
+```typescript
+import { createTempDirPath, cleanupTempDir } from './utils';
+
+const TEST_TEMP_DIR = createTempDirPath('my-test-name');
+
+test.describe('My Tests', () => {
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+});
+```
+
+### Git isolation: never use the main project path
+
+E2E tests must **never** use the workspace/repo root (the project you're developing in) as the project path. The app and server can run git commands (checkout, worktree add, merge, etc.) on the current project; if that path is the main repo, tests can leave it in a different branch or with merge conflicts.
+
+- **Allowed:** Paths under `tests/` (e.g. `createTempDirPath('...')` or `tests/fixtures/projectA`) or under `os.tmpdir()`.
+- **Not allowed:** Workspace root or any path outside `tests/` or temp.
+
+`setupRealProject` and `setupProjectWithFixture` enforce this: they throw if the project path is the workspace root or outside the allowed bases. Use `createTempDirPath()` for test-specific project dirs and the fixture path for fixture-based tests.
+
+## Waiting for Elements
+
+### Prefer `toBeVisible()` over `waitForSelector()`
+
+```typescript
+// Good - uses Playwright's auto-waiting with expect
+await expect(page.locator('[data-testid="welcome-view"]')).toBeVisible({ timeout: 10000 });
+
+// Avoid - manual waiting
+await page.waitForSelector('[data-testid="welcome-view"]');
+```
+
+### Wait for page load after navigation
+
+**Important:** Use `load` state, NOT `networkidle`. This app has persistent connections (websockets, polling) that prevent the network from ever becoming "idle", causing `networkidle` to timeout.
+
+```typescript
+await page.goto('/');
+await page.waitForLoadState('load');
+
+// Then wait for specific elements to verify the page is ready
+await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+```
+
+**Why not `networkidle`?**
+
+- `networkidle` requires no network activity for 500ms
+- Modern SPAs with real-time features (websockets, polling, SSE) never reach this state
+- Using `networkidle` causes 30+ second timeouts and flaky tests
+- The `load` state fires when the page finishes loading, which is sufficient
+- Always follow up with element visibility checks for reliability
+
+### Use appropriate timeouts
+
+- Quick UI updates: 5000ms (default)
+- Page loads/navigation: 10000ms
+- Async operations (API calls, file system): 15000ms
+
+```typescript
+// Fast UI element
+await expect(button).toBeVisible();
+
+// Page load
+await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+
+// Async operation completion
+await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 15000 });
+```
+
+## Element Selection
+
+### Use data-testid attributes
+
+```typescript
+// Good - stable selector
+const button = page.locator('[data-testid="create-new-project"]');
+
+// Avoid - brittle selectors
+const button = page.locator('.btn-primary');
+const button = page.getByText('Create');
+```
+
+### Scope selectors when needed
+
+When text appears in multiple places, scope to a parent:
+
+```typescript
+// Bad - might match multiple elements
+await expect(page.getByText(projectName)).toBeVisible();
+
+// Good - scoped to specific container
+await expect(page.locator('[data-testid="project-selector"]').getByText(projectName)).toBeVisible();
+```
+
+### Handle strict mode violations
+
+If a selector matches multiple elements:
+
+```typescript
+// Use .first() if you need the first match
+await page.locator('[data-testid="item"]').first().click();
+
+// Or scope to a unique parent
+await page.locator('[data-testid="sidebar"]').locator('[data-testid="item"]').click();
+```
+
+## Clicking Elements
+
+### Always verify visibility before clicking
+
+```typescript
+const button = page.locator('[data-testid="submit"]');
+await expect(button).toBeVisible();
+await button.click();
+```
+
+### Handle dialogs that may close quickly
+
+Some dialogs may appear briefly or auto-close. Don't rely on clicking them:
+
+```typescript
+// Instead of trying to close a dialog that might disappear:
+// await expect(dialog).toBeVisible();
+// await closeButton.click();  // May fail if dialog closes first
+
+// Just verify the end state:
+await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 15000 });
+```
+
+## Filesystem Verification
+
+Verify files were created after async operations:
+
+```typescript
+// Wait for UI to confirm operation completed first
+await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 15000 });
+
+// Then verify filesystem
+const projectPath = path.join(TEST_TEMP_DIR, projectName);
+expect(fs.existsSync(projectPath)).toBe(true);
+
+const appSpecPath = path.join(projectPath, '.automaker', 'app_spec.txt');
+expect(fs.existsSync(appSpecPath)).toBe(true);
+
+const content = fs.readFileSync(appSpecPath, 'utf-8');
+expect(content).toContain(projectName);
+```
+
+## Test Structure
+
+### Use descriptive test names
+
+```typescript
+test('should create a new blank project from welcome view', async ({ page }) => {
+  // ...
+});
+```
+
+### Group related tests with describe blocks
+
+```typescript
+test.describe('Project Creation', () => {
+  test('should create a new blank project from welcome view', ...);
+  test('should create a project from template', ...);
+});
+```
+
+### Use serial mode when tests depend on each other
+
+```typescript
+test.describe.configure({ mode: 'serial' });
+```
+
+## Common Patterns
+
+### Waiting for either of two outcomes
+
+When multiple outcomes are possible (e.g., dialog or direct navigation):
+
+```typescript
+// Wait for either the dialog or the board view
+await Promise.race([
+  initDialog.waitFor({ state: 'visible', timeout: 10000 }).catch(() => {}),
+  boardView.waitFor({ state: 'visible', timeout: 10000 }).catch(() => {}),
+]);
+
+// Then handle whichever appeared
+if (await initDialog.isVisible()) {
+  await closeButton.click();
+}
+
+await expect(boardView).toBeVisible();
+```
+
+### Generating unique test data
+
+```typescript
+const projectName = `test-project-${Date.now()}`;
+```
+
+## Running Tests
+
+```bash
+# Run all tests
+npm run test
+
+# Run specific test file
+npm run test -- project-creation.spec.ts
+
+# Run with headed browser (see what's happening)
+npm run test:headed -- project-creation.spec.ts
+
+# Run multiple times to check for flakiness
+npm run test -- project-creation.spec.ts --repeat-each=5
+```
+
+## Debugging Failed Tests
+
+1. Check the screenshot in `test-results/`
+2. Read the error context markdown file in `test-results/`
+3. Run with `--headed` to watch the test
+4. Add `await page.pause()` to pause execution at a specific point
+
+## Common Pitfalls
+
+### Timeout on `waitForLoadState('networkidle')`
+
+If tests timeout waiting for network idle, the app likely has persistent connections. Use `load` state instead:
+
+```typescript
+// Bad - will timeout with persistent connections
+await page.waitForLoadState('networkidle');
+
+// Good - completes when page loads
+await page.waitForLoadState('load');
+await expect(page.locator('[data-testid="my-element"]')).toBeVisible();
+```
+
+### Port conflicts
+
+If you see "Port 3108 is already in use", kill the process:
+
+```bash
+lsof -ti:3108 | xargs kill -9
+```
+
+## Available Test Utilities
+
+Import from `./utils`:
+
+### State Setup Utilities
+
+- `setupWelcomeView(page, options?)` - Set up empty state showing welcome view
+  - `options.workspaceDir` - Pre-configure workspace directory
+  - `options.recentProjects` - Add projects to recent list (not current)
+- `setupRealProject(page, path, name, options?)` - Set up state with a real filesystem project
+  - `options.setAsCurrent` - Open board view (default: true)
+  - `options.additionalProjects` - Add more projects to list
+- `setupMockProject(page)` - Set up mock project for unit-style tests
+- `setupComplete(page)` - Mark setup wizard as complete
+
+### Filesystem Utilities
+
+- `createTempDirPath(prefix)` - Create unique temp directory path
+- `cleanupTempDir(path)` - Remove temp directory
+- `createTestGitRepo(tempDir)` - Create a git repo for testing
+
+### Waiting Utilities
+
+- `waitForNetworkIdle(page)` - Wait for page to load (uses `load` state, not `networkidle`)
+- `waitForElement(page, testId)` - Wait for element by test ID
+- `waitForBoardView(page)` - Navigate to board and wait for it to be visible
+
+### Async File Verification
+
+Use `expect().toPass()` for polling filesystem operations:
+
+```typescript
+await expect(async () => {
+  expect(fs.existsSync(filePath)).toBe(true);
+}).toPass({ timeout: 10000 });
+```
+
+See `tests/utils/index.ts` for the full list of available utilities.
diff --git a/temp_repo/apps/ui/tests/features/add-feature-to-backlog.spec.ts b/temp_repo/apps/ui/tests/features/add-feature-to-backlog.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..83cd7b32a2693eb00eb8bf24585690fd74b131e3
--- /dev/null
+++ b/temp_repo/apps/ui/tests/features/add-feature-to-backlog.spec.ts
@@ -0,0 +1,91 @@
+/**
+ * Feature Backlog E2E Test
+ *
+ * Happy path: Add a feature to the backlog
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  clickAddFeature,
+  fillAddFeatureDialog,
+  confirmAddFeature,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+} from '../utils';
+
+const TEST_TEMP_DIR = createTempDirPath('feature-backlog-test');
+
+test.describe('Feature Backlog', () => {
+  let projectPath: string;
+  const projectName = `test-project-${Date.now()}`;
+
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+
+    projectPath = path.join(TEST_TEMP_DIR, projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(automakerDir, { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: [] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for e2e testing.`
+    );
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('should add a new feature to the backlog', async ({ page }) => {
+    const featureDescription = `Test feature ${Date.now()}`;
+
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+
+    // Authenticate before navigating
+    await authenticateForTests(page);
+    await page.goto('/board');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('[data-testid="kanban-column-backlog"]')).toBeVisible({
+      timeout: 5000,
+    });
+
+    await clickAddFeature(page);
+    await fillAddFeatureDialog(page, featureDescription);
+    await confirmAddFeature(page);
+
+    // Wait for the feature to appear in the backlog
+    await expect(async () => {
+      const backlogColumn = page.locator('[data-testid="kanban-column-backlog"]');
+      const featureCard = backlogColumn.locator('[data-testid^="kanban-card-"]').filter({
+        hasText: featureDescription,
+      });
+      expect(await featureCard.count()).toBeGreaterThan(0);
+    }).toPass({ timeout: 10000 });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/features/edit-feature.spec.ts b/temp_repo/apps/ui/tests/features/edit-feature.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1092a1be7396a4e89fd8a73a5b592e9874cffe17
--- /dev/null
+++ b/temp_repo/apps/ui/tests/features/edit-feature.spec.ts
@@ -0,0 +1,188 @@
+/**
+ * Edit Feature E2E Test
+ *
+ * Happy path: Edit an existing feature's description and verify changes persist
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  clickAddFeature,
+  fillAddFeatureDialog,
+  confirmAddFeature,
+  clickElement,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+} from '../utils';
+
+const TEST_TEMP_DIR = createTempDirPath('edit-feature-test');
+
+test.describe('Edit Feature', () => {
+  let projectPath: string;
+  const projectName = `test-project-${Date.now()}`;
+
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+
+    projectPath = path.resolve(path.join(TEST_TEMP_DIR, projectName));
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(automakerDir, { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: [] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for e2e testing.`
+    );
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('should edit an existing feature description', async ({ page }) => {
+    const originalDescription = `Original feature ${Date.now()}`;
+    const updatedDescription = `Updated feature ${Date.now()}`;
+
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+
+    await authenticateForTests(page);
+    await page.goto('/board');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('[data-testid="kanban-column-backlog"]')).toBeVisible({
+      timeout: 5000,
+    });
+
+    // Create a feature first — wait for create API to complete so we know the server wrote feature.json
+    const createResponsePromise = page.waitForResponse(
+      (res) =>
+        res.request().method() === 'POST' &&
+        res.request().url().includes('/api/features/create') &&
+        res.status() === 200,
+      { timeout: 20000 }
+    );
+
+    await clickAddFeature(page);
+    await fillAddFeatureDialog(page, originalDescription);
+    await confirmAddFeature(page);
+
+    // Wait for the feature to appear in the backlog (optimistic UI)
+    await expect(async () => {
+      const backlogColumn = page.locator('[data-testid="kanban-column-backlog"]');
+      const featureCard = backlogColumn.locator('[data-testid^="kanban-card-"]').filter({
+        hasText: originalDescription,
+      });
+      expect(await featureCard.count()).toBeGreaterThan(0);
+    }).toPass({ timeout: 20000 });
+
+    // Ensure create API completed so feature.json exists on disk
+    const createResponse = await createResponsePromise;
+    const createJson = (await createResponse.json()) as {
+      success?: boolean;
+      feature?: { id: string };
+    };
+    const featureId = createJson?.feature?.id;
+    expect(createJson?.success).toBe(true);
+    expect(featureId).toBeTruthy();
+
+    const featureFilePath = path.join(
+      projectPath,
+      '.automaker',
+      'features',
+      featureId || '',
+      'feature.json'
+    );
+    // Server writes file before sending 200; allow a short delay for filesystem sync
+    await expect(async () => {
+      expect(fs.existsSync(featureFilePath)).toBe(true);
+    }).toPass({ timeout: 5000 });
+
+    // Collapse the sidebar first to avoid it intercepting clicks
+    const collapseSidebarButton = page.locator('button:has-text("Collapse sidebar")');
+    if (await collapseSidebarButton.isVisible()) {
+      await collapseSidebarButton.click();
+      // Wait for sidebar to finish collapsing
+      await page
+        .locator('button:has-text("Expand sidebar")')
+        .waitFor({ state: 'visible', timeout: 5000 })
+        .catch(() => {});
+    }
+
+    // Click the edit button on the card using JavaScript click to bypass pointer interception
+    const editButton = page.locator(`[data-testid="edit-backlog-${featureId}"]`);
+    await expect(editButton).toBeVisible({ timeout: 5000 });
+    await editButton.evaluate((el) => (el as HTMLElement).click());
+
+    // Wait for edit dialog to appear
+    await expect(page.locator('[data-testid="edit-feature-dialog"]')).toBeVisible({
+      timeout: 10000,
+    });
+
+    // Update the description - use the textarea inside the dialog so React state updates
+    const descriptionInput = page
+      .locator('[data-testid="edit-feature-dialog"]')
+      .locator('[data-testid="feature-description-input"]');
+    await expect(descriptionInput).toBeVisible({ timeout: 5000 });
+    await descriptionInput.click();
+    await descriptionInput.press(process.platform === 'darwin' ? 'Meta+a' : 'Control+a');
+    await descriptionInput.pressSequentially(updatedDescription, { delay: 0 });
+    await expect(descriptionInput).toHaveValue(updatedDescription, { timeout: 3000 });
+
+    // Save changes
+    await clickElement(page, 'confirm-edit-feature');
+
+    // Wait for dialog to close
+    await page.waitForFunction(
+      () => !document.querySelector('[data-testid="edit-feature-dialog"]'),
+      { timeout: 5000 }
+    );
+
+    // Verify persistence on disk first (source of truth for feature metadata).
+    // Check file exists first so we retry on assertion failure instead of throwing ENOENT.
+    await expect(async () => {
+      expect(fs.existsSync(featureFilePath)).toBe(true);
+      const raw = fs.readFileSync(featureFilePath, 'utf-8');
+      const parsed = JSON.parse(raw) as { description?: string };
+      expect(parsed.description).toBe(updatedDescription);
+    }).toPass({ timeout: 15000 });
+
+    // The optimistic update can be overwritten by a stale React Query refetch
+    // (e.g. from a prior feature-create invalidation that races with the edit).
+    // Force a fresh board refresh to ensure the UI reads the confirmed server state.
+    const refreshButton = page.locator('button[title="Refresh board state from server"]');
+    if (await refreshButton.isVisible({ timeout: 2000 }).catch(() => false)) {
+      await refreshButton.click();
+    }
+
+    // Wait for the card to show the updated description.
+    await expect(
+      page
+        .locator('[data-testid="kanban-column-backlog"]')
+        .locator(`[data-testid="kanban-card-${featureId}"]`)
+        .filter({ hasText: updatedDescription })
+    ).toBeVisible({ timeout: 15000 });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/features/feature-deep-link.spec.ts b/temp_repo/apps/ui/tests/features/feature-deep-link.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9c0fa398af5134e0ef78aaea9a23f03ddc3431f6
--- /dev/null
+++ b/temp_repo/apps/ui/tests/features/feature-deep-link.spec.ts
@@ -0,0 +1,177 @@
+/**
+ * Feature Deep Link E2E Test
+ *
+ * Tests that navigating to /board?featureId=xxx opens the board and shows
+ * the output modal for the specified feature.
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  clickAddFeature,
+  fillAddFeatureDialog,
+  confirmAddFeature,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+  waitForAgentOutputModal,
+  getOutputModalDescription,
+} from '../utils';
+
+const TEST_TEMP_DIR = createTempDirPath('feature-deep-link-test');
+
+test.describe('Feature Deep Link', () => {
+  let projectPath: string;
+  let projectName: string;
+
+  // eslint-disable-next-line no-empty-pattern
+  test.beforeEach(async ({}, testInfo) => {
+    projectName = `test-project-${testInfo.workerIndex}-${Date.now()}`;
+    projectPath = path.join(TEST_TEMP_DIR, projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(automakerDir, { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: [] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for e2e testing.`
+    );
+  });
+
+  test.afterEach(async () => {
+    if (projectPath && fs.existsSync(projectPath)) {
+      fs.rmSync(projectPath, { recursive: true, force: true });
+    }
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('should open output modal when navigating to /board?featureId=xxx', async ({ page }) => {
+    const featureDescription = `Deep link test feature ${Date.now()}`;
+
+    // Setup project
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+    const authOk = await authenticateForTests(page);
+    expect(authOk).toBe(true);
+
+    // Create a feature first
+    await page.goto('/board');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('[data-testid="kanban-column-backlog"]')).toBeVisible({
+      timeout: 5000,
+    });
+
+    // Create a feature
+    await clickAddFeature(page);
+    await fillAddFeatureDialog(page, featureDescription);
+    await confirmAddFeature(page);
+
+    // Wait for the feature to appear in the backlog
+    await expect(async () => {
+      const backlogColumn = page.locator('[data-testid="kanban-column-backlog"]');
+      const featureCard = backlogColumn.locator('[data-testid^="kanban-card-"]').filter({
+        hasText: featureDescription,
+      });
+      expect(await featureCard.count()).toBeGreaterThan(0);
+    }).toPass({ timeout: 20000 });
+
+    // Get the feature ID from the card
+    const featureCard = page
+      .locator('[data-testid="kanban-column-backlog"]')
+      .locator('[data-testid^="kanban-card-"]')
+      .filter({ hasText: featureDescription })
+      .first();
+    const cardTestId = await featureCard.getAttribute('data-testid');
+    const featureId = cardTestId?.replace('kanban-card-', '') || null;
+    expect(featureId).toBeTruthy();
+
+    // Close any open modals first
+    const modal = page.locator('[data-testid="agent-output-modal"]');
+    if (await modal.isVisible()) {
+      await page.keyboard.press('Escape');
+      await expect(modal).toBeHidden({ timeout: 3000 });
+    }
+
+    // Now navigate to the board with the featureId query parameter
+    await page.goto(`/board?featureId=${encodeURIComponent(featureId ?? '')}`);
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+
+    // The output modal should automatically open
+    await waitForAgentOutputModal(page, { timeout: 10000 });
+    const modalVisible = await page.locator('[data-testid="agent-output-modal"]').isVisible();
+    expect(modalVisible).toBe(true);
+
+    // Verify the modal shows the correct feature
+    const modalDescription = await getOutputModalDescription(page);
+    expect(modalDescription).toContain(featureDescription);
+  });
+
+  test('should handle invalid featureId gracefully', async ({ page }) => {
+    // Setup project
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+    const authOk2 = await authenticateForTests(page);
+    expect(authOk2).toBe(true);
+
+    // Navigate with a non-existent feature ID
+    const nonExistentId = 'non-existent-feature-id-12345';
+    await page.goto(`/board?featureId=${nonExistentId}`);
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+
+    // Board should still load
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+
+    // Output modal should NOT appear (feature doesn't exist)
+    const modal = page.locator('[data-testid="agent-output-modal"]');
+    await expect(modal).toBeHidden({ timeout: 3000 });
+  });
+
+  test('should handle navigation without featureId', async ({ page }) => {
+    // Setup project
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+    const authOk3 = await authenticateForTests(page);
+    expect(authOk3).toBe(true);
+
+    // Navigate without featureId
+    await page.goto('/board');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+
+    // Board should load normally
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('[data-testid="kanban-column-backlog"]')).toBeVisible({
+      timeout: 5000,
+    });
+
+    // Output modal should NOT appear
+    const modal = page.locator('[data-testid="agent-output-modal"]');
+    await expect(modal).toBeHidden({ timeout: 2000 });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/features/feature-manual-review-flow.spec.ts b/temp_repo/apps/ui/tests/features/feature-manual-review-flow.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..63415ef955f700411b02c00649560ad3f2dc8bd2
--- /dev/null
+++ b/temp_repo/apps/ui/tests/features/feature-manual-review-flow.spec.ts
@@ -0,0 +1,209 @@
+/**
+ * Feature Manual Review Flow E2E Test
+ *
+ * Happy path: Manually verify a feature in the waiting_approval column
+ *
+ * This test verifies that:
+ * 1. A feature in waiting_approval column shows the mark as verified button
+ * 2. Clicking mark as verified moves the feature to the verified column
+ *
+ * Note: For waiting_approval features, the button is "mark-as-verified-{id}" not "manual-verify-{id}"
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  getKanbanColumn,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+  API_BASE_URL,
+} from '../utils';
+
+const TEST_TEMP_DIR = createTempDirPath('manual-review-test');
+
+// Generate deterministic projectId once at test module load so both
+// setupRealProject and the route interceptor use the same ID
+const TEST_PROJECT_ID = `project-manual-review-${Date.now()}`;
+
+test.describe('Feature Manual Review Flow', () => {
+  let projectPath: string;
+  const projectName = `test-project-${Date.now()}`;
+  const featureId = 'test-feature-manual-review';
+
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+
+    projectPath = path.join(TEST_TEMP_DIR, projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(automakerDir, { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: [] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for e2e testing.`
+    );
+
+    // Create a feature file that is in waiting_approval status
+    const featureDir = path.join(automakerDir, 'features', featureId);
+    fs.mkdirSync(featureDir, { recursive: true });
+
+    // Note: Feature is created via HTTP API in the test itself, not in beforeAll
+    // This ensures the feature exists when the board view loads it
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('should manually verify a feature in waiting_approval column', async ({ page }) => {
+    // Set up the project in localStorage with a deterministic projectId
+    await setupRealProject(page, projectPath, projectName, {
+      setAsCurrent: true,
+      projectId: TEST_PROJECT_ID,
+    });
+
+    // Intercept settings API to ensure our test project remains current
+    // and doesn't get overridden by server settings.
+    await page.route('**/api/settings/global', async (route) => {
+      const method = route.request().method();
+      if (method === 'PUT') {
+        // Allow settings sync writes to pass through
+        return route.continue();
+      }
+      const response = await route.fetch();
+      const json = await response.json();
+      if (json.settings) {
+        const existingProjects = json.settings.projects || [];
+
+        // Find existing project by path to preserve any server-generated IDs
+        let testProject = existingProjects.find((p: { path: string }) => p.path === projectPath);
+
+        if (!testProject) {
+          // Project not in server response yet — use the same deterministic TEST_PROJECT_ID
+          // that was seeded in automaker-settings-cache.currentProjectId via setupRealProject.
+          testProject = {
+            id: TEST_PROJECT_ID,
+            name: projectName,
+            path: projectPath,
+            lastOpened: new Date().toISOString(),
+          };
+          json.settings.projects = [testProject, ...existingProjects];
+        }
+
+        // Set as current project using the matching project's ID
+        json.settings.currentProjectId = testProject.id;
+        // Ensure CI runs don't redirect to /setup
+        json.settings.setupComplete = true;
+        json.settings.isFirstRun = false;
+      }
+      await route.fulfill({ response, json });
+    });
+
+    await authenticateForTests(page);
+
+    // Navigate to board
+    await page.goto('/board');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+
+    // Expand sidebar if collapsed to see project name
+    const expandSidebarButton = page.locator('button:has-text("Expand sidebar")');
+    if (await expandSidebarButton.isVisible()) {
+      await expandSidebarButton.click();
+      await page.waitForTimeout(300);
+    }
+
+    // Verify we're on the correct project (project dropdown trigger shows project name)
+    await expect(
+      page.locator('[data-testid="project-dropdown-trigger"]').getByText(projectName)
+    ).toBeVisible({
+      timeout: 10000,
+    });
+
+    // Create the feature via HTTP API (writes to disk)
+    const feature = {
+      id: featureId,
+      description: 'Test feature for manual review flow',
+      category: 'test',
+      status: 'waiting_approval',
+      skipTests: true,
+      model: 'sonnet',
+      thinkingLevel: 'none',
+      createdAt: new Date().toISOString(),
+      branchName: '',
+      priority: 2,
+    };
+
+    const createResponse = await page.request.post(`${API_BASE_URL}/api/features/create`, {
+      data: { projectPath, feature },
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    if (!createResponse.ok()) {
+      const error = await createResponse.text();
+      throw new Error(`Failed to create feature: ${error}`);
+    }
+
+    // Reload to pick up the new feature
+    await page.reload();
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+
+    // Wait for the feature card to appear (features are loaded asynchronously)
+    const featureCard = page.locator(`[data-testid="kanban-card-${featureId}"]`);
+    await expect(featureCard).toBeVisible({ timeout: 20000 });
+
+    // Verify the feature appears in the waiting_approval column
+    const waitingApprovalColumn = await getKanbanColumn(page, 'waiting_approval');
+    await expect(waitingApprovalColumn).toBeVisible({ timeout: 5000 });
+
+    // Verify the card is in the waiting_approval column
+    const cardInColumn = waitingApprovalColumn.locator(`[data-testid="kanban-card-${featureId}"]`);
+    await expect(cardInColumn).toBeVisible({ timeout: 5000 });
+
+    // For waiting_approval features, the button is "mark-as-verified-{id}"
+    const markAsVerifiedButton = page.locator(`[data-testid="mark-as-verified-${featureId}"]`);
+    await expect(markAsVerifiedButton).toBeVisible({ timeout: 5000 });
+
+    // Click the mark as verified button
+    await markAsVerifiedButton.click();
+
+    // Wait for the feature to move to verified column
+    await expect(async () => {
+      const verifiedColumn = await getKanbanColumn(page, 'verified');
+      const cardInVerified = verifiedColumn.locator(`[data-testid="kanban-card-${featureId}"]`);
+      expect(await cardInVerified.count()).toBe(1);
+    }).toPass({ timeout: 15000 });
+
+    // Verify the feature is no longer in waiting_approval column
+    await expect(async () => {
+      const waitingColumn = await getKanbanColumn(page, 'waiting_approval');
+      const cardInWaiting = waitingColumn.locator(`[data-testid="kanban-card-${featureId}"]`);
+      expect(await cardInWaiting.count()).toBe(0);
+    }).toPass({ timeout: 5000 });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/features/feature-skip-tests-toggle.spec.ts b/temp_repo/apps/ui/tests/features/feature-skip-tests-toggle.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..68d4d8b6736862fad846ea05b7c27c899c7c2d70
--- /dev/null
+++ b/temp_repo/apps/ui/tests/features/feature-skip-tests-toggle.spec.ts
@@ -0,0 +1,112 @@
+/**
+ * Feature Skip Tests Toggle E2E Test
+ *
+ * Happy path: Create a feature with default settings (skipTests=true) and verify the badge appears
+ *
+ * Note: The app defaults to skipTests=true (manual verification required), so we don't need to
+ * toggle anything. We just verify the badge appears by default.
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  clickAddFeature,
+  fillAddFeatureDialog,
+  confirmAddFeature,
+  isSkipTestsBadgeVisible,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+} from '../utils';
+
+const TEST_TEMP_DIR = createTempDirPath('skip-tests-toggle-test');
+
+test.describe('Feature Skip Tests Badge', () => {
+  let projectPath: string;
+  const projectName = `test-project-${Date.now()}`;
+
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+
+    projectPath = path.join(TEST_TEMP_DIR, projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(automakerDir, { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: [] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for e2e testing.`
+    );
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('should show skip tests badge for new feature with default settings', async ({ page }) => {
+    const featureDescription = `Skip tests feature ${Date.now()}`;
+
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+
+    await authenticateForTests(page);
+    await page.goto('/board');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+    await expect(page.locator('[data-testid="kanban-column-backlog"]')).toBeVisible({
+      timeout: 5000,
+    });
+
+    // Open the add feature dialog and add feature with default settings
+    // Default is skipTests=true (manual verification required)
+    await clickAddFeature(page);
+    await fillAddFeatureDialog(page, featureDescription);
+    await confirmAddFeature(page);
+
+    // Wait for the feature to appear in the backlog
+    await expect(async () => {
+      const backlogColumn = page.locator('[data-testid="kanban-column-backlog"]');
+      const featureCard = backlogColumn.locator('[data-testid^="kanban-card-"]').filter({
+        hasText: featureDescription,
+      });
+      expect(await featureCard.count()).toBeGreaterThan(0);
+    }).toPass({ timeout: 10000 });
+
+    // Get the feature ID from the card
+    const featureCard = page
+      .locator('[data-testid="kanban-column-backlog"]')
+      .locator('[data-testid^="kanban-card-"]')
+      .filter({ hasText: featureDescription })
+      .first();
+    const cardTestId = await featureCard.getAttribute('data-testid');
+    const featureId = cardTestId?.replace('kanban-card-', '');
+
+    // Verify the skip tests badge is visible on the card (should be there by default)
+    expect(featureId).toBeDefined();
+    await expect(async () => {
+      const badgeVisible = await isSkipTestsBadgeVisible(page, featureId!);
+      expect(badgeVisible).toBe(true);
+    }).toPass({ timeout: 5000 });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/features/list-view-priority.spec.ts b/temp_repo/apps/ui/tests/features/list-view-priority.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..68e5be54f3161e930c86f2483565db6f35674902
--- /dev/null
+++ b/temp_repo/apps/ui/tests/features/list-view-priority.spec.ts
@@ -0,0 +1,168 @@
+/**
+ * List View Priority Column E2E Test
+ *
+ * Verifies that the list view shows a priority column and allows sorting by priority
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+} from '../utils';
+
+const TEST_TEMP_DIR = createTempDirPath('list-view-priority-test');
+
+// TODO: This test is skipped because setupRealProject only sets localStorage,
+// but the server's settings.json (set by setup-e2e-fixtures.mjs) takes precedence
+// with localStorageMigrated: true. The test creates features in a temp directory,
+// but the server loads from the E2E Test Project fixture path.
+// Fix: Either modify setupRealProject to also update server settings, or
+// have the test add features through the UI instead of on disk.
+test.describe.skip('List View Priority Column', () => {
+  let projectPath: string;
+  const projectName = `test-project-${Date.now()}`;
+
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+
+    projectPath = path.join(TEST_TEMP_DIR, projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(automakerDir, { recursive: true });
+    const featuresDir = path.join(automakerDir, 'features');
+    fs.mkdirSync(featuresDir, { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    // Create test features with different priorities
+    const features = [
+      {
+        id: 'feature-high-priority',
+        description: 'High priority feature',
+        priority: 1,
+        status: 'backlog',
+        category: 'test',
+        createdAt: new Date().toISOString(),
+      },
+      {
+        id: 'feature-medium-priority',
+        description: 'Medium priority feature',
+        priority: 2,
+        status: 'backlog',
+        category: 'test',
+        createdAt: new Date().toISOString(),
+      },
+      {
+        id: 'feature-low-priority',
+        description: 'Low priority feature',
+        priority: 3,
+        status: 'backlog',
+        category: 'test',
+        createdAt: new Date().toISOString(),
+      },
+    ];
+
+    // Write each feature to its own directory
+    for (const feature of features) {
+      const featureDir = path.join(featuresDir, feature.id);
+      fs.mkdirSync(featureDir, { recursive: true });
+      fs.writeFileSync(path.join(featureDir, 'feature.json'), JSON.stringify(feature, null, 2));
+    }
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: ['test'] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for e2e testing.`
+    );
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('should display priority column in list view and allow sorting', async ({ page }) => {
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+
+    // Authenticate before navigating
+    await authenticateForTests(page);
+    await page.goto('/board');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+
+    // Switch to list view
+    await page.click('[data-testid="view-toggle-list"]');
+    await page.waitForTimeout(500);
+
+    // Verify list view is active
+    await expect(page.locator('[data-testid="list-view"]')).toBeVisible({ timeout: 5000 });
+
+    // Verify priority column header exists
+    await expect(page.locator('[data-testid="list-header-priority"]')).toBeVisible();
+    await expect(page.locator('[data-testid="list-header-priority"]')).toContainText('Priority');
+
+    // Verify priority cells are displayed for our test features
+    await expect(
+      page.locator('[data-testid="list-row-priority-feature-high-priority"]')
+    ).toBeVisible();
+    await expect(
+      page.locator('[data-testid="list-row-priority-feature-medium-priority"]')
+    ).toBeVisible();
+    await expect(
+      page.locator('[data-testid="list-row-priority-feature-low-priority"]')
+    ).toBeVisible();
+
+    // Verify priority badges show H, M, L
+    const highPriorityCell = page.locator(
+      '[data-testid="list-row-priority-feature-high-priority"]'
+    );
+    const mediumPriorityCell = page.locator(
+      '[data-testid="list-row-priority-feature-medium-priority"]'
+    );
+    const lowPriorityCell = page.locator('[data-testid="list-row-priority-feature-low-priority"]');
+
+    await expect(highPriorityCell).toContainText('H');
+    await expect(mediumPriorityCell).toContainText('M');
+    await expect(lowPriorityCell).toContainText('L');
+
+    // Click on priority header to sort
+    await page.click('[data-testid="list-header-priority"]');
+    await page.waitForTimeout(300);
+
+    // Get all rows within the backlog group and verify they are sorted by priority
+    // (High priority first when sorted ascending by priority value 1, 2, 3)
+    const backlogGroup = page.locator('[data-testid="list-group-backlog"]');
+    const rows = backlogGroup.locator('[data-testid^="list-row-feature-"]');
+
+    // The first row should be high priority (value 1 = lowest number = first in ascending)
+    const firstRow = rows.first();
+    await expect(firstRow).toHaveAttribute('data-testid', 'list-row-feature-high-priority');
+
+    // Click again to reverse sort (descending - low priority first)
+    await page.click('[data-testid="list-header-priority"]');
+    await page.waitForTimeout(300);
+
+    // Now the first row should be low priority (value 3 = highest number = first in descending)
+    const firstRowDesc = rows.first();
+    await expect(firstRowDesc).toHaveAttribute('data-testid', 'list-row-feature-low-priority');
+  });
+});
diff --git a/temp_repo/apps/ui/tests/features/opus-thinking-level-none.spec.ts b/temp_repo/apps/ui/tests/features/opus-thinking-level-none.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..49fa1b8fb3c8c41eaecd1e658d312e5e996348f9
--- /dev/null
+++ b/temp_repo/apps/ui/tests/features/opus-thinking-level-none.spec.ts
@@ -0,0 +1,129 @@
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  clickAddFeature,
+  fillAddFeatureDialog,
+  confirmAddFeature,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+} from '../utils';
+
+const TEST_TEMP_DIR = createTempDirPath('opus-thinking-level-none');
+
+test.describe('Opus thinking level', () => {
+  let projectPath: string;
+  const projectName = `test-project-${Date.now()}`;
+
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+
+    projectPath = path.join(TEST_TEMP_DIR, projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(automakerDir, { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: [] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for Opus thinking level e2e coverage.`
+    );
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('persists thinkingLevel none when selected for Claude Opus', async ({ page }) => {
+    const featureDescription = `Opus none thinking ${Date.now()}`;
+
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+    await authenticateForTests(page);
+    await page.goto('/board');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+
+    await clickAddFeature(page);
+    await fillAddFeatureDialog(page, featureDescription);
+
+    await page.locator('[data-testid="model-selector"]').click();
+    await page.locator('[cmdk-input]').fill('opus');
+
+    const opusItem = page.locator('[cmdk-item]').filter({ hasText: 'Claude Opus' }).first();
+    await expect(opusItem).toBeVisible({ timeout: 10000 });
+    await opusItem.locator('button[title="Adjust thinking level"]').click();
+
+    // Wait for the thinking level popover to appear
+    // The nested popover contains "Thinking Level" text and "None" option
+    // Radix UI popovers need a brief delay for the animation to complete
+    const POPOVER_OPEN_DELAY_MS = 500;
+    await page.waitForTimeout(POPOVER_OPEN_DELAY_MS);
+
+    // Find and click the None button
+    // The button's accessible name includes description: "None No extended thinking"
+    const noneOption = page.getByRole('button', { name: /None.*No extended thinking/i }).first();
+    await expect(noneOption).toBeVisible({ timeout: 5000 });
+    await noneOption.click();
+
+    // Wait for the popover to close and the state to update
+    // The React state update needs a brief moment to propagate to the badge
+    const STATE_UPDATE_DELAY_MS = 300;
+    await page.waitForTimeout(STATE_UPDATE_DELAY_MS);
+
+    // When "None" is selected, the badge should NOT show "Adaptive"
+    await expect(page.locator('[data-testid="model-selector"]')).not.toContainText('Adaptive');
+
+    // Wait for the create API to complete so the server has written the feature to disk
+    const createResponsePromise = page.waitForResponse(
+      (res) =>
+        res.url().includes('/api/features/create') &&
+        res.request().method() === 'POST' &&
+        res.status() === 200,
+      { timeout: 15000 }
+    );
+
+    await confirmAddFeature(page);
+    await createResponsePromise;
+
+    // Wait for the feature to appear in the backlog
+    await expect(async () => {
+      const backlogColumn = page.locator('[data-testid="kanban-column-backlog"]');
+      const featureCard = backlogColumn.locator('[data-testid^="kanban-card-"]').filter({
+        hasText: featureDescription,
+      });
+      expect(await featureCard.count()).toBeGreaterThan(0);
+    }).toPass({ timeout: 10000 });
+
+    const featuresDir = path.join(projectPath, '.automaker', 'features');
+    await expect.poll(() => fs.readdirSync(featuresDir).length, { timeout: 10000 }).toBe(1);
+
+    const featureDir = fs.readdirSync(featuresDir)[0];
+    const featureJsonPath = path.join(featuresDir, featureDir, 'feature.json');
+    const featureJson = JSON.parse(fs.readFileSync(featureJsonPath, 'utf-8')) as {
+      description: string;
+      thinkingLevel: string;
+    };
+
+    expect(featureJson.description).toBe(featureDescription);
+    expect(featureJson.thinkingLevel).toBe('none');
+  });
+});
diff --git a/temp_repo/apps/ui/tests/features/planning-mode-fix-verification.spec.ts b/temp_repo/apps/ui/tests/features/planning-mode-fix-verification.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d3ede58482a8b31a7b824b36d29a70dbb70e1e12
--- /dev/null
+++ b/temp_repo/apps/ui/tests/features/planning-mode-fix-verification.spec.ts
@@ -0,0 +1,134 @@
+/**
+ * Planning Mode Fix Verification E2E Test
+ *
+ * Verifies GitHub issue #671 fixes:
+ * 1. Planning mode selector is enabled for all models (not restricted to Claude)
+ * 2. All planning mode options are accessible
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  clickAddFeature,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+} from '../utils';
+import { DEFAULT_ELEMENT_TIMEOUT_MS } from '../utils/core/waiting';
+
+const TEST_TEMP_DIR = createTempDirPath('planning-mode-verification-test');
+
+test.describe('Planning Mode Fix Verification (GitHub #671)', () => {
+  let projectPath: string;
+  const projectName = `test-project-${Date.now()}`;
+
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+
+    projectPath = path.join(TEST_TEMP_DIR, projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(automakerDir, { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: [] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for planning mode verification.`
+    );
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('planning mode selector should be enabled and accessible in add feature dialog', async ({
+    page,
+  }) => {
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+
+    await authenticateForTests(page);
+    await page.goto('/board');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({
+      timeout: DEFAULT_ELEMENT_TIMEOUT_MS,
+    });
+    await expect(page.locator('[data-testid="kanban-column-backlog"]')).toBeVisible({
+      timeout: 5000,
+    });
+
+    // Open the add feature dialog
+    await clickAddFeature(page);
+
+    // Wait for dialog to be visible (clickAddFeature already waits, but this adds an extra check)
+    await expect(page.locator('[data-testid="add-feature-dialog"]')).toBeVisible({
+      timeout: DEFAULT_ELEMENT_TIMEOUT_MS,
+    });
+
+    // Find the planning mode select trigger
+    const planningModeSelectTrigger = page.locator(
+      '[data-testid="add-feature-planning-select-trigger"]'
+    );
+
+    // Verify the planning mode selector is visible
+    await expect(planningModeSelectTrigger).toBeVisible({ timeout: 5000 });
+
+    // Verify the planning mode selector is NOT disabled
+    // This is the key check for GitHub #671 - planning mode should be enabled for all models
+    await expect(planningModeSelectTrigger).not.toBeDisabled();
+
+    // Click the trigger to open the dropdown
+    await planningModeSelectTrigger.click();
+
+    // Wait for dropdown to open
+    await page.waitForTimeout(300);
+
+    // Verify all planning mode options are visible
+    const skipOption = page.locator('[data-testid="add-feature-planning-option-skip"]');
+    const liteOption = page.locator('[data-testid="add-feature-planning-option-lite"]');
+    const specOption = page.locator('[data-testid="add-feature-planning-option-spec"]');
+    const fullOption = page.locator('[data-testid="add-feature-planning-option-full"]');
+
+    await expect(skipOption).toBeVisible({ timeout: 3000 });
+    await expect(liteOption).toBeVisible({ timeout: 3000 });
+    await expect(specOption).toBeVisible({ timeout: 3000 });
+    await expect(fullOption).toBeVisible({ timeout: 3000 });
+
+    // Select 'spec' mode to verify interaction works
+    await specOption.click();
+    await page.waitForTimeout(200);
+
+    // Verify the selection changed (the trigger should now show "Spec")
+    await expect(planningModeSelectTrigger).toContainText('Spec');
+
+    // Check that require approval checkbox appears for spec/full modes
+    const requireApprovalCheckbox = page.locator(
+      '[data-testid="add-feature-planning-require-approval-checkbox"]'
+    );
+    await expect(requireApprovalCheckbox).toBeVisible({ timeout: 3000 });
+    await expect(requireApprovalCheckbox).not.toBeDisabled();
+
+    // Close the dialog
+    await page.keyboard.press('Escape');
+  });
+});
diff --git a/temp_repo/apps/ui/tests/features/responsive/agent-output-modal-responsive.spec.ts b/temp_repo/apps/ui/tests/features/responsive/agent-output-modal-responsive.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8b48685bf8565ba4011c5fce20ee59fd59685ef1
--- /dev/null
+++ b/temp_repo/apps/ui/tests/features/responsive/agent-output-modal-responsive.spec.ts
@@ -0,0 +1,356 @@
+/**
+ * E2E tests for AgentOutputModal responsive behavior
+ * These tests verify the modal width changes across different screen sizes
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+  dismissSandboxWarningIfVisible,
+} from '../../utils';
+
+const TEST_TEMP_DIR = createTempDirPath('responsive-modal-test');
+
+/**
+ * Create a verified feature with agent output on disk so the Logs button appears
+ */
+function createVerifiedFeature(projectPath: string, featureId: string, description: string): void {
+  const featureDir = path.join(projectPath, '.automaker', 'features', featureId);
+  fs.mkdirSync(featureDir, { recursive: true });
+
+  fs.writeFileSync(
+    path.join(featureDir, 'agent-output.md'),
+    `## Summary\nFeature implemented successfully.\n\n## Details\n${description}`,
+    { encoding: 'utf-8' }
+  );
+
+  fs.writeFileSync(
+    path.join(featureDir, 'feature.json'),
+    JSON.stringify(
+      {
+        id: featureId,
+        title: description,
+        category: 'default',
+        description,
+        status: 'verified',
+      },
+      null,
+      2
+    ),
+    { encoding: 'utf-8' }
+  );
+}
+
+test.describe('AgentOutputModal Responsive Behavior', () => {
+  let projectPath: string;
+  const projectName = `test-responsive-${Date.now()}`;
+
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+
+    projectPath = path.join(TEST_TEMP_DIR, projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: [] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for responsive modal testing.`
+    );
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  /**
+   * Helper: set up project, create a verified feature on disk, navigate to board,
+   * and open the agent output modal via the Logs button.
+   */
+  async function setupAndOpenModal(page: import('@playwright/test').Page): Promise<string> {
+    const featureId = `responsive-feat-${Date.now()}`;
+    createVerifiedFeature(projectPath, featureId, 'Responsive test feature');
+
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+    await authenticateForTests(page);
+    await page.goto('/board');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+
+    // Dismiss sandbox warning dialog if it appears (blocks pointer events)
+    await dismissSandboxWarningIfVisible(page);
+
+    // Wait for the verified feature card to appear
+    const featureCard = page.locator(`[data-testid="kanban-card-${featureId}"]`);
+    await expect(featureCard).toBeVisible({ timeout: 10000 });
+
+    // Click the Logs button on the verified feature card to open the output modal
+    const logsButton = page.locator(`[data-testid="view-output-verified-${featureId}"]`);
+    await expect(logsButton).toBeVisible({ timeout: 5000 });
+    await logsButton.click();
+
+    // Wait for modal
+    await expect(page.locator('[data-testid="agent-output-modal"]')).toBeVisible({
+      timeout: 10000,
+    });
+
+    return featureId;
+  }
+
+  test.describe('Mobile View (< 640px)', () => {
+    test('should use full width on mobile screens', async ({ page }) => {
+      await setupAndOpenModal(page);
+
+      await page.setViewportSize({ width: 375, height: 667 });
+      await page.waitForTimeout(200);
+
+      const modal = page.locator('[data-testid="agent-output-modal"]');
+      const modalWidth = await modal.evaluate((el) => el.offsetWidth);
+      const viewportWidth = await page.evaluate(() => window.innerWidth);
+
+      // Modal should be close to full width (within 2rem = 32px margins)
+      expect(modalWidth).toBeGreaterThan(viewportWidth - 40);
+    });
+
+    test('should have proper max width constraint on mobile', async ({ page }) => {
+      await setupAndOpenModal(page);
+
+      await page.setViewportSize({ width: 320, height: 568 });
+      await page.waitForTimeout(200);
+
+      const modal = page.locator('[data-testid="agent-output-modal"]');
+      const classList = await modal.evaluate((el) => el.className);
+      expect(classList).toContain('max-w-[calc(100%-2rem)]');
+    });
+  });
+
+  test.describe('Small View (640px - 768px)', () => {
+    test('should use 60vw on small screens', async ({ page }) => {
+      await setupAndOpenModal(page);
+
+      await page.setViewportSize({ width: 640, height: 768 });
+      await page.waitForTimeout(200);
+
+      const modal = page.locator('[data-testid="agent-output-modal"]');
+      const modalWidth = await modal.evaluate((el) => el.offsetWidth);
+      const viewportWidth = await page.evaluate(() => window.innerWidth);
+
+      // At 640px (sm breakpoint), width should be ~60vw = 384px
+      const expected60vw = viewportWidth * 0.6;
+      expect(modalWidth).toBeLessThanOrEqual(expected60vw + 5);
+      expect(modalWidth).toBeGreaterThanOrEqual(expected60vw - 5);
+    });
+
+    test('should have 80vh max height on small screens', async ({ page }) => {
+      await setupAndOpenModal(page);
+
+      await page.setViewportSize({ width: 640, height: 768 });
+      await page.waitForTimeout(200);
+
+      const modal = page.locator('[data-testid="agent-output-modal"]');
+      const classList = await modal.evaluate((el) => el.className);
+      expect(classList).toContain('sm:max-h-[80vh]');
+    });
+  });
+
+  test.describe('Tablet View (>= 768px)', () => {
+    test('should use 90vw on tablet screens', async ({ page }) => {
+      await setupAndOpenModal(page);
+
+      await page.setViewportSize({ width: 768, height: 1024 });
+      await page.waitForTimeout(200);
+
+      const modal = page.locator('[data-testid="agent-output-modal"]');
+      const modalWidth = await modal.evaluate((el) => el.offsetWidth);
+      const viewportWidth = await page.evaluate(() => window.innerWidth);
+
+      // At 768px (md breakpoint), width should be ~90vw = ~691px
+      const expected90vw = viewportWidth * 0.9;
+      expect(modalWidth).toBeLessThanOrEqual(expected90vw + 5);
+      expect(modalWidth).toBeGreaterThanOrEqual(expected90vw - 5);
+    });
+
+    test('should have 1200px max width on tablet', async ({ page }) => {
+      await setupAndOpenModal(page);
+
+      await page.setViewportSize({ width: 768, height: 1024 });
+      await page.waitForTimeout(200);
+
+      const modal = page.locator('[data-testid="agent-output-modal"]');
+      const classList = await modal.evaluate((el) => el.className);
+      expect(classList).toContain('md:max-w-[1200px]');
+    });
+
+    test('should have 85vh max height on tablet screens', async ({ page }) => {
+      await setupAndOpenModal(page);
+
+      await page.setViewportSize({ width: 768, height: 1024 });
+      await page.waitForTimeout(200);
+
+      const modal = page.locator('[data-testid="agent-output-modal"]');
+      const classList = await modal.evaluate((el) => el.className);
+      expect(classList).toContain('md:max-h-[85vh]');
+    });
+
+    test('should maintain correct height on larger tablets', async ({ page }) => {
+      await setupAndOpenModal(page);
+
+      await page.setViewportSize({ width: 1024, height: 1366 });
+      await page.waitForTimeout(200);
+
+      const modal = page.locator('[data-testid="agent-output-modal"]');
+      const modalHeight = await modal.evaluate((el) => el.offsetHeight);
+      const viewportHeight = await page.evaluate(() => window.innerHeight);
+
+      // Height should be <= 85vh
+      const expected85vh = viewportHeight * 0.85;
+      expect(modalHeight).toBeLessThanOrEqual(expected85vh + 5);
+    });
+  });
+
+  test.describe('Responsive Transitions', () => {
+    test('should update modal size when resizing from mobile to tablet', async ({ page }) => {
+      await setupAndOpenModal(page);
+
+      // Start with mobile size
+      await page.setViewportSize({ width: 375, height: 667 });
+      await page.waitForTimeout(200);
+
+      const modal = page.locator('[data-testid="agent-output-modal"]');
+      const mobileWidth = await modal.evaluate((el) => el.offsetWidth);
+      const mobileViewport = 375;
+
+      // Mobile: close to full width
+      expect(mobileWidth).toBeGreaterThan(mobileViewport - 40);
+
+      // Resize to tablet
+      await page.setViewportSize({ width: 768, height: 1024 });
+      await page.waitForTimeout(200);
+
+      const tabletWidth = await modal.evaluate((el) => el.offsetWidth);
+      const tabletViewport = 768;
+
+      // Tablet: should be ~90vw
+      const expected90vw = tabletViewport * 0.9;
+      expect(tabletWidth).toBeLessThanOrEqual(expected90vw + 5);
+      expect(tabletWidth).toBeGreaterThanOrEqual(expected90vw - 5);
+    });
+
+    test('should update modal size when resizing from tablet to mobile', async ({ page }) => {
+      await setupAndOpenModal(page);
+
+      // Start with tablet size
+      await page.setViewportSize({ width: 768, height: 1024 });
+      await page.waitForTimeout(200);
+
+      const modal = page.locator('[data-testid="agent-output-modal"]');
+      const tabletWidth = await modal.evaluate((el) => el.offsetWidth);
+      const tabletViewport = 768;
+
+      // Tablet: ~90vw
+      expect(tabletWidth).toBeLessThanOrEqual(tabletViewport * 0.9 + 5);
+
+      // Resize to mobile
+      await page.setViewportSize({ width: 375, height: 667 });
+      await page.waitForTimeout(200);
+
+      const mobileWidth = await modal.evaluate((el) => el.offsetWidth);
+      const mobileViewport = 375;
+
+      // Mobile: close to full width
+      expect(mobileWidth).toBeGreaterThan(mobileViewport - 40);
+    });
+  });
+
+  test.describe('Content Responsiveness', () => {
+    test('should display content correctly on tablet view', async ({ page }) => {
+      await setupAndOpenModal(page);
+
+      await page.setViewportSize({ width: 768, height: 1024 });
+      await page.waitForTimeout(200);
+
+      // Modal should be visible
+      const modal = page.locator('[data-testid="agent-output-modal"]');
+      await expect(modal).toBeVisible();
+
+      // Description should be visible
+      const description = modal.locator('[data-testid="agent-output-description"]');
+      await expect(description).toBeVisible();
+    });
+
+    test('should maintain readability on tablet with wider width', async ({ page }) => {
+      await setupAndOpenModal(page);
+
+      await page.setViewportSize({ width: 1200, height: 800 });
+      await page.waitForTimeout(200);
+
+      const modal = page.locator('[data-testid="agent-output-modal"]');
+      const modalWidth = await modal.evaluate((el) => el.offsetWidth);
+
+      // At 1200px, max-width is 1200px so modal should not exceed that
+      expect(modalWidth).toBeLessThanOrEqual(1200);
+      expect(modalWidth).toBeGreaterThan(0);
+    });
+  });
+
+  test.describe('Modal Functionality Across Screens', () => {
+    test('should maintain functionality while resizing', async ({ page }) => {
+      await setupAndOpenModal(page);
+
+      // Test on mobile
+      await page.setViewportSize({ width: 375, height: 667 });
+      await page.waitForTimeout(200);
+      await expect(page.locator('[data-testid="agent-output-modal"]')).toBeVisible();
+
+      // Test on tablet
+      await page.setViewportSize({ width: 768, height: 1024 });
+      await page.waitForTimeout(200);
+      await expect(page.locator('[data-testid="agent-output-modal"]')).toBeVisible();
+
+      // Close modal and verify
+      await page.keyboard.press('Escape');
+      await expect(page.locator('[data-testid="agent-output-modal"]')).not.toBeVisible({
+        timeout: 5000,
+      });
+    });
+
+    test('should handle view mode buttons on tablet', async ({ page }) => {
+      await setupAndOpenModal(page);
+
+      await page.setViewportSize({ width: 768, height: 1024 });
+      await page.waitForTimeout(200);
+
+      // Logs button should be visible and clickable
+      const logsButton = page.getByTestId('view-mode-parsed');
+      await expect(logsButton).toBeVisible();
+
+      // Raw button should be visible
+      const rawButton = page.getByTestId('view-mode-raw');
+      await expect(rawButton).toBeVisible();
+    });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/features/running-task-card-display.spec.ts b/temp_repo/apps/ui/tests/features/running-task-card-display.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a6d01c3dd7179fbf30d62ffaa709c1b4ce8247c2
--- /dev/null
+++ b/temp_repo/apps/ui/tests/features/running-task-card-display.spec.ts
@@ -0,0 +1,250 @@
+/**
+ * Running Task Card Display E2E Test
+ *
+ * Tests that task cards with a running state display the correct UI controls.
+ *
+ * This test verifies that:
+ * 1. A feature in the in_progress column with status 'in_progress' shows Logs/Stop controls (not Make)
+ * 2. A feature with status 'backlog' that is tracked as running (stale status race condition)
+ *    shows Logs/Stop controls instead of the Make button when placed in in_progress column
+ * 3. The Make button only appears for genuinely idle backlog/interrupted/ready features
+ * 4. Features in backlog that are NOT running show the correct Edit/Make buttons
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+  API_BASE_URL,
+} from '../utils';
+
+const TEST_TEMP_DIR = createTempDirPath('running-task-display-test');
+
+// Generate deterministic projectId once at test module load
+const TEST_PROJECT_ID = `project-running-task-${Date.now()}`;
+
+test.describe('Running Task Card Display', () => {
+  let projectPath: string;
+  const projectName = `test-project-${Date.now()}`;
+  const backlogFeatureId = 'test-feature-backlog';
+  const inProgressFeatureId = 'test-feature-in-progress';
+
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+
+    projectPath = path.join(TEST_TEMP_DIR, projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(automakerDir, { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: [] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for e2e testing.`
+    );
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('should show Logs/Stop buttons for in_progress features, not Make button', async ({
+    page,
+  }) => {
+    // Set up the project in localStorage with a deterministic projectId
+    await setupRealProject(page, projectPath, projectName, {
+      setAsCurrent: true,
+      projectId: TEST_PROJECT_ID,
+    });
+
+    // Intercept settings API to ensure our test project remains current
+    await page.route('**/api/settings/global', async (route) => {
+      const method = route.request().method();
+      if (method === 'PUT') {
+        return route.continue();
+      }
+      const response = await route.fetch();
+      const json = await response.json();
+      if (json.settings) {
+        const existingProjects = json.settings.projects || [];
+        let testProject = existingProjects.find((p: { path: string }) => p.path === projectPath);
+        if (!testProject) {
+          testProject = {
+            id: TEST_PROJECT_ID,
+            name: projectName,
+            path: projectPath,
+            lastOpened: new Date().toISOString(),
+          };
+          json.settings.projects = [testProject, ...existingProjects];
+        }
+        json.settings.currentProjectId = testProject.id;
+        json.settings.setupComplete = true;
+        json.settings.isFirstRun = false;
+      }
+      await route.fulfill({ response, json });
+    });
+
+    // Block resume-interrupted for our project so the server does not "resume" our
+    // in_progress feature (mock agent would complete and set status to waiting_approval).
+    await page.route('**/api/auto-mode/resume-interrupted', async (route) => {
+      if (route.request().method() !== 'POST') return route.continue();
+      try {
+        const body = route.request().postDataJSON();
+        if (body?.projectPath === projectPath) {
+          await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ success: true, message: 'Resume check completed' }),
+          });
+          return;
+        }
+      } catch {
+        // no JSON body
+      }
+      return route.continue();
+    });
+
+    await authenticateForTests(page);
+
+    // Navigate to board
+    await page.goto('/board');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+
+    // Create a feature that is already in_progress status (simulates a running task)
+    const inProgressFeature = {
+      id: inProgressFeatureId,
+      description: 'Test feature that is currently running',
+      category: 'test',
+      status: 'in_progress',
+      skipTests: false,
+      model: 'sonnet',
+      thinkingLevel: 'none',
+      createdAt: new Date().toISOString(),
+      startedAt: new Date().toISOString(),
+      branchName: '',
+      priority: 2,
+    };
+
+    // Create a feature in backlog status (idle, should show Make button)
+    const backlogFeature = {
+      id: backlogFeatureId,
+      description: 'Test feature in backlog waiting to start',
+      category: 'test',
+      status: 'backlog',
+      skipTests: false,
+      model: 'sonnet',
+      thinkingLevel: 'none',
+      createdAt: new Date().toISOString(),
+      branchName: '',
+      priority: 2,
+    };
+
+    // Create both features via HTTP API
+    const createInProgress = await page.request.post(`${API_BASE_URL}/api/features/create`, {
+      data: { projectPath, feature: inProgressFeature },
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!createInProgress.ok()) {
+      throw new Error(`Failed to create in_progress feature: ${await createInProgress.text()}`);
+    }
+
+    const createBacklog = await page.request.post(`${API_BASE_URL}/api/features/create`, {
+      data: { projectPath, feature: backlogFeature },
+      headers: { 'Content-Type': 'application/json' },
+    });
+    if (!createBacklog.ok()) {
+      throw new Error(`Failed to create backlog feature: ${await createBacklog.text()}`);
+    }
+
+    // Reload and wait for the features list response for THIS project so we assert against fresh data.
+    // Must match our projectPath so we don't capture a list for another project (e.g. fixture) with stale features.
+    const encodedPath = encodeURIComponent(projectPath);
+    const featuresListResponse = page
+      .waitForResponse(
+        (res) =>
+          res.url().includes('/api/features') &&
+          res.url().includes('list') &&
+          res.url().includes(encodedPath) &&
+          res.status() === 200,
+        { timeout: 20000 }
+      )
+      .catch(() => null);
+    await page.reload();
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+    const listResponse = await featuresListResponse;
+    // If we got our project's list, verify server preserved in_progress (no unexpected reset).
+    if (listResponse) {
+      const body = await listResponse.json().catch(() => ({}));
+      const features = Array.isArray(body?.features) ? body.features : [];
+      const inProgressFromApi = features.find((f: { id?: string }) => f.id === inProgressFeatureId);
+      if (inProgressFromApi && inProgressFromApi.status !== 'in_progress') {
+        throw new Error(
+          `Server returned feature ${inProgressFeatureId} with status "${inProgressFromApi.status}" instead of "in_progress". ` +
+            `Startup reconciliation resets in_progress→backlog; the board also calls resume-interrupted on load, which can set status to waiting_approval. ` +
+            `This test blocks resume-interrupted for the test project so the feature stays in_progress.`
+        );
+      }
+    }
+
+    // Wait for both feature cards to appear (column assignment may vary with worktree/load order)
+    const inProgressCard = page.locator(`[data-testid="kanban-card-${inProgressFeatureId}"]`);
+    const backlogCard = page.locator(`[data-testid="kanban-card-${backlogFeatureId}"]`);
+    await expect(inProgressCard).toBeVisible({ timeout: 20000 });
+    await expect(backlogCard).toBeVisible({ timeout: 20000 });
+
+    // Scroll in_progress card into view so action buttons are in viewport (avoids flakiness)
+    await inProgressCard.scrollIntoViewIfNeeded();
+
+    // Scope assertions to the in_progress card so we don't match elements from other cards
+    // CRITICAL: Verify the in_progress feature does NOT show a Make button
+    const makeButtonOnInProgress = inProgressCard.locator(
+      `[data-testid="make-${inProgressFeatureId}"]`
+    );
+    await expect(makeButtonOnInProgress).not.toBeVisible({ timeout: 3000 });
+
+    // Verify the in_progress feature shows appropriate controls (Logs and Stop).
+    // Use a longer timeout so refetch + re-render can complete in slower runs.
+    const viewOutputButton = inProgressCard.locator(
+      `[data-testid="view-output-${inProgressFeatureId}"]`
+    );
+    await expect(viewOutputButton).toBeVisible({ timeout: 10000 });
+    const forceStopButton = inProgressCard.locator(
+      `[data-testid="force-stop-${inProgressFeatureId}"]`
+    );
+    await expect(forceStopButton).toBeVisible({ timeout: 10000 });
+
+    // Verify the backlog feature DOES show a Make button
+    const makeButtonOnBacklog = page.locator(`[data-testid="make-${backlogFeatureId}"]`);
+    await expect(makeButtonOnBacklog).toBeVisible({ timeout: 5000 });
+
+    // Verify the backlog feature also shows an Edit button
+    const editButton = page.locator(`[data-testid="edit-backlog-${backlogFeatureId}"]`);
+    await expect(editButton).toBeVisible({ timeout: 5000 });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/features/success-log-contrast.spec.ts b/temp_repo/apps/ui/tests/features/success-log-contrast.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..07e5f3ca6581d80d6084bbbc545e1d2719f3ba0c
--- /dev/null
+++ b/temp_repo/apps/ui/tests/features/success-log-contrast.spec.ts
@@ -0,0 +1,248 @@
+/**
+ * E2E test for success log output contrast improvement
+ * Verifies that success tool output has better visual contrast in the parsed log view
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupRealProject,
+  waitForNetworkIdle,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+  dismissSandboxWarningIfVisible,
+} from '../utils';
+
+/**
+ * Create a test feature with agent output for contrast verification
+ */
+function createTestFeature(
+  projectPath: string,
+  featureId: string,
+  outputContent: string,
+  title: string = 'Test Success Contrast',
+  description: string = 'Testing success log output contrast'
+): void {
+  const featureDir = path.join(projectPath, '.automaker', 'features', featureId);
+  fs.mkdirSync(featureDir, { recursive: true });
+
+  // Write agent output
+  fs.writeFileSync(path.join(featureDir, 'agent-output.md'), outputContent, {
+    encoding: 'utf-8',
+  });
+
+  // Write feature metadata with all required fields
+  const featureData = {
+    id: featureId,
+    title,
+    category: 'default',
+    description,
+    status: 'verified',
+  };
+
+  fs.writeFileSync(path.join(featureDir, 'feature.json'), JSON.stringify(featureData, null, 2), {
+    encoding: 'utf-8',
+  });
+}
+
+const TEST_TEMP_DIR = createTempDirPath('success-log-contrast');
+
+test.describe('Success log output contrast', () => {
+  let projectPath: string;
+  const projectName = `test-contrast-${Date.now()}`;
+
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+
+    projectPath = path.join(TEST_TEMP_DIR, projectName);
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    // Create minimal project structure
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    // Create .automaker directory structure
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'categories.json'),
+      JSON.stringify({ categories: [] }, null, 2)
+    );
+
+    fs.writeFileSync(
+      path.join(automakerDir, 'app_spec.txt'),
+      `# ${projectName}\n\nA test project for success log contrast verification.`
+    );
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  /**
+   * Helper: set up project, create a verified feature, navigate to board,
+   * and open the agent output modal with the parsed/logs view active.
+   */
+  async function setupAndOpenLogsView(
+    page: import('@playwright/test').Page,
+    featureId: string,
+    outputContent: string,
+    title: string,
+    description: string
+  ): Promise<void> {
+    createTestFeature(projectPath, featureId, outputContent, title, description);
+
+    await setupRealProject(page, projectPath, projectName, { setAsCurrent: true });
+    await authenticateForTests(page);
+    await page.goto('/board');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 10000 });
+
+    // Dismiss sandbox warning dialog if it appears (blocks pointer events)
+    await dismissSandboxWarningIfVisible(page);
+
+    // Wait for the verified feature card to appear
+    const featureCard = page.locator(`[data-testid="kanban-card-${featureId}"]`);
+    await expect(featureCard).toBeVisible({ timeout: 10000 });
+
+    // Click the Logs button on the verified feature card
+    const logsButton = page.locator(`[data-testid="view-output-verified-${featureId}"]`);
+    await expect(logsButton).toBeVisible({ timeout: 5000 });
+    await logsButton.click();
+
+    // Wait for modal to open
+    const modal = page.locator('[data-testid="agent-output-modal"]');
+    await expect(modal).toBeVisible({ timeout: 10000 });
+
+    // The modal opens in Logs view by default. Verify the Logs tab is active.
+    const parsedButton = page.getByTestId('view-mode-parsed');
+    await expect(parsedButton).toBeVisible({ timeout: 5000 });
+  }
+
+  test('should display success log output with improved contrast', async ({ page }) => {
+    const testFeatureId = `test-success-contrast-${Date.now()}`;
+
+    const mockOutput = `## Summary
+Successfully implemented the feature with improved contrast.
+
+## Action Phase
+✓ Created component with proper styling
+✓ Verified success message contrast is improved
+✓ All tests passing
+
+The feature is complete and ready for review.
+`;
+
+    await setupAndOpenLogsView(
+      page,
+      testFeatureId,
+      mockOutput,
+      'Test Success Contrast',
+      'Testing success log output contrast'
+    );
+
+    const modal = page.locator('[data-testid="agent-output-modal"]');
+
+    // Verify the modal shows the parsed log view with log entries
+    // The log viewer should display entries parsed from the agent output
+    // Use .first() because "Summary" appears in both the badge and the content preview
+    await expect(modal.locator('text=Summary').first()).toBeVisible({ timeout: 5000 });
+
+    // Verify the description is shown
+    await expect(modal.locator('text=Testing success log output contrast')).toBeVisible();
+
+    // Close modal
+    await page.keyboard.press('Escape');
+    await expect(modal).not.toBeVisible({ timeout: 5000 });
+  });
+
+  test('should maintain consistency across all log types', async ({ page }) => {
+    const testFeatureId = `test-all-logs-${Date.now()}`;
+
+    const mixedOutput = `## Planning Phase
+Analyzing requirements and creating implementation plan.
+
+## Development Phase
+Creating components and implementing features.
+
+## Testing Phase
+Running tests and verifying functionality.
+
+## Summary
+Feature implementation complete with all tests passing.
+`;
+
+    await setupAndOpenLogsView(
+      page,
+      testFeatureId,
+      mixedOutput,
+      'Test All Logs',
+      'Testing all log types'
+    );
+
+    const modal = page.locator('[data-testid="agent-output-modal"]');
+
+    // Verify log entries are displayed in the parsed view
+    // Use .first() because "Summary" appears in both the badge and the content preview
+    await expect(modal.locator('text=Summary').first()).toBeVisible({ timeout: 5000 });
+
+    // Verify the description is shown
+    await expect(modal.locator('text=Testing all log types')).toBeVisible();
+
+    // Close modal
+    await page.keyboard.press('Escape');
+    await expect(modal).not.toBeVisible({ timeout: 5000 });
+  });
+
+  test('should have consistent badge styling with improved contrast', async ({ page }) => {
+    const testFeatureId = `test-badge-contrast-${Date.now()}`;
+
+    const badgeOutput = `## Summary
+✅ Component created successfully
+✅ Tests passing with improved contrast
+✅ Ready for deployment
+
+All tasks completed successfully.
+`;
+
+    await setupAndOpenLogsView(
+      page,
+      testFeatureId,
+      badgeOutput,
+      'Test Badge Contrast',
+      'Testing badge contrast in success logs'
+    );
+
+    const modal = page.locator('[data-testid="agent-output-modal"]');
+
+    // Verify the parsed log view shows content
+    await expect(modal.locator('text=Summary')).toBeVisible({ timeout: 5000 });
+
+    // Verify the description is shown
+    await expect(modal.locator('text=Testing badge contrast in success logs')).toBeVisible();
+
+    // Verify the filter badges are displayed (showing log type counts)
+    // The log viewer shows filter badges like "success: 1" to indicate log types
+    const filterSection = modal.locator('button:has-text("success")');
+    if (await filterSection.isVisible({ timeout: 2000 }).catch(() => false)) {
+      // Success filter badge is present, indicating logs were categorized correctly
+      await expect(filterSection).toBeVisible();
+    }
+
+    // Close modal
+    await page.keyboard.press('Escape');
+    await expect(modal).not.toBeVisible({ timeout: 5000 });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/global-setup.ts b/temp_repo/apps/ui/tests/global-setup.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0d5c2cbad614e8e3a8ba7fb1fb26a8e31f0c89ef
--- /dev/null
+++ b/temp_repo/apps/ui/tests/global-setup.ts
@@ -0,0 +1,144 @@
+/**
+ * Global setup for all e2e tests
+ * This runs once before all tests start.
+ * It authenticates with the backend and saves the session state so that
+ * all workers/tests can reuse it (avoiding per-test login overhead).
+ */
+
+import { chromium, FullConfig } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+import {
+  cleanupLeftoverFixtureWorkerDirs,
+  cleanupLeftoverTestDirs,
+} from './utils/cleanup-test-dirs';
+
+const TEST_PORT = process.env.TEST_PORT || '3107';
+const TEST_SERVER_PORT = process.env.TEST_SERVER_PORT || '3108';
+const reuseServer = process.env.TEST_REUSE_SERVER === 'true';
+const API_BASE_URL = `http://127.0.0.1:${TEST_SERVER_PORT}`;
+const WEB_BASE_URL = `http://127.0.0.1:${TEST_PORT}`;
+const AUTH_DIR = path.join(__dirname, '.auth');
+const AUTH_STATE_PATH = path.join(AUTH_DIR, 'storage-state.json');
+
+async function globalSetup(config: FullConfig) {
+  // Clean up leftover test dirs and fixture worker copies from previous runs (aborted, crashed, etc.)
+  cleanupLeftoverTestDirs();
+  cleanupLeftoverFixtureWorkerDirs();
+
+  // Note: Server killing is handled by the pretest script in package.json
+  // GlobalSetup runs AFTER webServer starts, so we can't kill the server here
+
+  if (reuseServer) {
+    const baseURL = `http://127.0.0.1:${TEST_PORT}`;
+    try {
+      const res = await fetch(baseURL, { signal: AbortSignal.timeout(3000) });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    } catch {
+      throw new Error(
+        `TEST_REUSE_SERVER is set but nothing is listening at ${baseURL}. ` +
+          'Start the UI and server first (e.g. from apps/ui: TEST_PORT=3107 TEST_SERVER_PORT=3108 pnpm dev; from apps/server: PORT=3108 pnpm run dev:test) or run tests without TEST_REUSE_SERVER.'
+      );
+    }
+  }
+
+  // Authenticate once and save state for all workers
+  await authenticateAndSaveState(config);
+
+  console.log('[GlobalSetup] Setup complete');
+}
+
+/**
+ * Authenticate with the backend and save browser storage state.
+ * All test workers will load this state to skip per-test authentication.
+ */
+async function authenticateAndSaveState(_config: FullConfig) {
+  // Ensure auth directory exists
+  fs.mkdirSync(AUTH_DIR, { recursive: true });
+
+  const apiKey = process.env.AUTOMAKER_API_KEY || 'test-api-key-for-e2e-tests';
+
+  // Wait for backend to be ready (exponential backoff: 250ms → 500ms → 1s → 2s)
+  const start = Date.now();
+  let backoff = 250;
+  let healthy = false;
+  while (Date.now() - start < 30000) {
+    try {
+      const health = await fetch(`${API_BASE_URL}/api/health`, {
+        signal: AbortSignal.timeout(3000),
+      });
+      if (health.ok) {
+        healthy = true;
+        break;
+      }
+    } catch {
+      // Retry
+    }
+    await new Promise((r) => setTimeout(r, backoff));
+    backoff = Math.min(backoff * 2, 2000);
+  }
+  if (!healthy) {
+    throw new Error(`Backend health check timed out after 30s for ${API_BASE_URL}`);
+  }
+
+  // Launch a browser to get a proper context for login
+  const browser = await chromium.launch();
+  const context = await browser.newContext();
+  const page = await context.newPage();
+
+  try {
+    // Navigate to the app first (needed for cookies to bind to the correct domain)
+    await page.goto(WEB_BASE_URL, { waitUntil: 'domcontentloaded', timeout: 30000 });
+
+    // Login via API
+    const loginResponse = await page.request.post(`${API_BASE_URL}/api/auth/login`, {
+      data: { apiKey },
+      headers: { 'Content-Type': 'application/json' },
+      timeout: 15000,
+    });
+    const response = (await loginResponse.json().catch(() => null)) as {
+      success?: boolean;
+      token?: string;
+    } | null;
+
+    if (!response?.success || !response.token) {
+      throw new Error(
+        '[GlobalSetup] Login failed - cannot proceed without authentication. ' +
+          'Check that the backend is running and AUTOMAKER_API_KEY is set correctly.'
+      );
+    }
+
+    // Set the session cookie
+    await context.addCookies([
+      {
+        name: 'automaker_session',
+        value: response.token,
+        domain: '127.0.0.1',
+        path: '/',
+        httpOnly: true,
+        sameSite: 'Lax',
+      },
+    ]);
+
+    // Verify auth works
+    const statusRes = await page.request.get(`${API_BASE_URL}/api/auth/status`, {
+      timeout: 5000,
+    });
+    const statusJson = (await statusRes.json().catch(() => null)) as {
+      authenticated?: boolean;
+    } | null;
+
+    if (!statusJson?.authenticated) {
+      throw new Error(
+        '[GlobalSetup] Auth verification failed - session cookie was set but status check returned unauthenticated.'
+      );
+    }
+
+    // Save storage state for all workers to reuse
+    await context.storageState({ path: AUTH_STATE_PATH });
+  } finally {
+    await browser.close();
+  }
+}
+
+export default globalSetup;
diff --git a/temp_repo/apps/ui/tests/global-teardown.ts b/temp_repo/apps/ui/tests/global-teardown.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d50a699960d36e5deee48e64fea1e300b7131a92
--- /dev/null
+++ b/temp_repo/apps/ui/tests/global-teardown.ts
@@ -0,0 +1,20 @@
+/**
+ * Global teardown for all E2E tests.
+ * Runs once after all tests (and all workers) have finished.
+ * Cleans up any leftover test artifact directories (board-bg-test-*, edit-feature-test-*, etc.)
+ * that may remain when afterAll hooks didn't run (e.g. worker crash, aborted run).
+ */
+
+import { FullConfig } from '@playwright/test';
+import {
+  cleanupLeftoverFixtureWorkerDirs,
+  cleanupLeftoverTestDirs,
+} from './utils/cleanup-test-dirs';
+
+async function globalTeardown(_config: FullConfig) {
+  cleanupLeftoverTestDirs();
+  cleanupLeftoverFixtureWorkerDirs();
+  console.log('[GlobalTeardown] Cleanup complete');
+}
+
+export default globalTeardown;
diff --git a/temp_repo/apps/ui/tests/img/background.jpg b/temp_repo/apps/ui/tests/img/background.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3b8fe86f1c3d5f7780e72cc4997c152f0eb86879
--- /dev/null
+++ b/temp_repo/apps/ui/tests/img/background.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b64a28e81c32e36e87ce74887efece94092953ce0f7a6ca44f1a396c58d45422
+size 1839245
diff --git a/temp_repo/apps/ui/tests/memory/desktop-memory-view.spec.ts b/temp_repo/apps/ui/tests/memory/desktop-memory-view.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67401601857ee0057932c9a85a2f1807c1ac5474
--- /dev/null
+++ b/temp_repo/apps/ui/tests/memory/desktop-memory-view.spec.ts
@@ -0,0 +1,55 @@
+/**
+ * Desktop Memory View E2E Tests
+ *
+ * Core desktop behavior: file list and editor side-by-side, toolbar layout
+ * (no back button, delete visible, buttons with text).
+ */
+
+import { test, expect } from '@playwright/test';
+import {
+  resetMemoryDirectory,
+  setupProjectWithFixture,
+  getFixturePath,
+  createMemoryFileOnDisk,
+  navigateToMemory,
+  waitForMemoryFile,
+  selectMemoryFile,
+} from '../utils';
+
+test.use({ viewport: { width: 1280, height: 720 } });
+
+test.describe('Desktop Memory View', () => {
+  test.beforeEach(() => {
+    resetMemoryDirectory();
+  });
+
+  test('shows file list and editor side-by-side with desktop toolbar', async ({ page }) => {
+    const fileName = 'desktop-core.md';
+
+    await setupProjectWithFixture(page, getFixturePath());
+    createMemoryFileOnDisk(fileName, '# Desktop core test');
+    await navigateToMemory(page);
+
+    // Header actions visible on desktop
+    await expect(page.locator('[data-testid="create-memory-button"]')).toBeVisible();
+    await expect(page.locator('[data-testid="refresh-memory-button"]')).toBeVisible();
+
+    // Open existing file (no create-dialog flow)
+    await waitForMemoryFile(page, fileName, 5000);
+    await selectMemoryFile(page, fileName, 5000);
+
+    // Core: list and editor side-by-side
+    await expect(page.locator('[data-testid="memory-file-list"]')).toBeVisible();
+    await expect(
+      page.locator('[data-testid="memory-editor"], [data-testid="markdown-preview"]')
+    ).toBeVisible();
+
+    // Desktop toolbar: no back button, delete visible, toggle has text
+    await expect(page.locator('button[aria-label="Back"]')).not.toBeVisible();
+    await expect(page.locator('[data-testid="delete-memory-file"]')).toBeVisible();
+    const toggleButton = page.locator('[data-testid="toggle-preview-mode"]');
+    await expect(toggleButton).toBeVisible();
+    const buttonText = await toggleButton.textContent();
+    expect(buttonText?.toLowerCase()).toMatch(/(edit|preview)/);
+  });
+});
diff --git a/temp_repo/apps/ui/tests/profiles/profiles-crud.spec.ts b/temp_repo/apps/ui/tests/profiles/profiles-crud.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7b174de798022977cb60950b68ee0cd1d5fce048
--- /dev/null
+++ b/temp_repo/apps/ui/tests/profiles/profiles-crud.spec.ts
@@ -0,0 +1,62 @@
+/**
+ * AI Profiles E2E Test
+ *
+ * Happy path: Create a new profile
+ */
+
+import { test, expect } from '@playwright/test';
+import {
+  setupMockProjectWithProfiles,
+  waitForNetworkIdle,
+  navigateToProfiles,
+  clickNewProfileButton,
+  fillProfileForm,
+  saveProfile,
+  waitForSuccessToast,
+  countCustomProfiles,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+} from '../utils';
+
+test.describe('AI Profiles', () => {
+  // Skip: The profiles UI (standalone nav item, profile cards, add/edit dialogs)
+  // has not been implemented yet. The test references data-testid values that
+  // do not exist in the current codebase.
+  test.skip('should create a new profile', async ({ page }) => {
+    await setupMockProjectWithProfiles(page, { customProfilesCount: 0 });
+    await authenticateForTests(page);
+    await page.goto('/');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await waitForNetworkIdle(page);
+    await navigateToProfiles(page);
+
+    // Get initial custom profile count (may be 0 or more due to server settings hydration)
+    const initialCount = await countCustomProfiles(page);
+
+    await clickNewProfileButton(page);
+
+    await fillProfileForm(page, {
+      name: 'Test Profile',
+      description: 'A test profile',
+      icon: 'Brain',
+      model: 'sonnet',
+      thinkingLevel: 'medium',
+    });
+
+    await saveProfile(page);
+
+    await waitForSuccessToast(page, 'Profile created');
+
+    // Wait for the new profile to appear in the list (replaces arbitrary timeout)
+    // The count should increase by 1 from the initial count
+    await expect(async () => {
+      const customCount = await countCustomProfiles(page);
+      expect(customCount).toBe(initialCount + 1);
+    }).toPass({ timeout: 5000 });
+
+    // Verify the count is correct (final assertion)
+    const finalCount = await countCustomProfiles(page);
+    expect(finalCount).toBe(initialCount + 1);
+  });
+});
diff --git a/temp_repo/apps/ui/tests/projects/board-background-persistence.spec.ts b/temp_repo/apps/ui/tests/projects/board-background-persistence.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c3fd85af2f7b4c52385dcc6d7188302b9d01dd68
--- /dev/null
+++ b/temp_repo/apps/ui/tests/projects/board-background-persistence.spec.ts
@@ -0,0 +1,638 @@
+/**
+ * Board Background Persistence End-to-End Test
+ *
+ * Tests that board background settings are properly saved and loaded when switching projects.
+ * This verifies that:
+ * 1. Background settings are saved to .automaker/settings.json
+ * 2. Settings are loaded when switching back to a project
+ * 3. Background image, opacity, and other settings are correctly restored
+ * 4. Settings persist across app restarts (new page loads)
+ *
+ * This test prevents regression of the board background loading bug where
+ * settings were saved but never loaded when switching projects.
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+} from '../utils';
+
+// Create unique temp dirs for this test run
+const TEST_TEMP_DIR = createTempDirPath('board-bg-test');
+
+test.describe('Board Background Persistence', () => {
+  test.beforeAll(async () => {
+    // Create test temp directory
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+  });
+
+  test.afterAll(async () => {
+    // Cleanup temp directory
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('should load board background settings when switching projects', async ({ page }) => {
+    const projectAName = `project-a-${Date.now()}`;
+    const projectBName = `project-b-${Date.now()}`;
+    const projectAPath = path.resolve(TEST_TEMP_DIR, projectAName);
+    const projectBPath = path.resolve(TEST_TEMP_DIR, projectBName);
+    const projectAId = `project-a-${Date.now()}`;
+    const projectBId = `project-b-${Date.now()}`;
+
+    // Create both project directories
+    fs.mkdirSync(projectAPath, { recursive: true });
+    fs.mkdirSync(projectBPath, { recursive: true });
+
+    // Create basic files for both projects
+    for (const [name, projectPath] of [
+      [projectAName, projectAPath],
+      [projectBName, projectBPath],
+    ]) {
+      fs.writeFileSync(
+        path.join(projectPath, 'package.json'),
+        JSON.stringify({ name, version: '1.0.0' }, null, 2)
+      );
+      fs.writeFileSync(path.join(projectPath, 'README.md'), `# ${name}\n`);
+    }
+
+    // Create .automaker directory for project A with background settings
+    const automakerDirA = path.join(projectAPath, '.automaker');
+    fs.mkdirSync(automakerDirA, { recursive: true });
+    fs.mkdirSync(path.join(automakerDirA, 'board'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDirA, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDirA, 'context'), { recursive: true });
+
+    // Copy actual background image from test fixtures
+    const backgroundPath = path.join(automakerDirA, 'board', 'background.jpg');
+    const testImagePath = path.join(__dirname, '..', 'img', 'background.jpg');
+    fs.copyFileSync(testImagePath, backgroundPath);
+
+    // Create settings.json with board background configuration
+    const settingsPath = path.join(automakerDirA, 'settings.json');
+    const backgroundSettings = {
+      version: 1,
+      boardBackground: {
+        imagePath: backgroundPath,
+        cardOpacity: 85,
+        columnOpacity: 60,
+        columnBorderEnabled: true,
+        cardGlassmorphism: true,
+        cardBorderEnabled: false,
+        cardBorderOpacity: 50,
+        hideScrollbar: true,
+        imageVersion: Date.now(),
+      },
+    };
+    fs.writeFileSync(settingsPath, JSON.stringify(backgroundSettings, null, 2));
+
+    // Create minimal .automaker directory for project B (no background)
+    const automakerDirB = path.join(projectBPath, '.automaker');
+    fs.mkdirSync(automakerDirB, { recursive: true });
+    fs.mkdirSync(path.join(automakerDirB, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDirB, 'context'), { recursive: true });
+    fs.writeFileSync(
+      path.join(automakerDirB, 'settings.json'),
+      JSON.stringify({ version: 1 }, null, 2)
+    );
+
+    // Set up project A as the current project directly (skip welcome view).
+    // The auto-open logic in __root.tsx always opens the most recent project when
+    // navigating to /, so we cannot reliably show the welcome view with projects.
+    const projectA = {
+      id: projectAId,
+      name: projectAName,
+      path: projectAPath,
+      lastOpened: new Date().toISOString(),
+    };
+    const projectB = {
+      id: projectBId,
+      name: projectBName,
+      path: projectBPath,
+      lastOpened: new Date(Date.now() - 86400000).toISOString(),
+    };
+
+    await page.addInitScript(
+      ({
+        projects,
+        versions,
+      }: {
+        projects: Array<{ id: string; name: string; path: string; lastOpened: string }>;
+        versions: { APP_STORE: number; SETUP_STORE: number };
+      }) => {
+        const appState = {
+          state: {
+            projects: projects,
+            currentProject: projects[0],
+            currentView: 'board',
+            theme: 'dark',
+            sidebarOpen: true,
+            skipSandboxWarning: true,
+            apiKeys: { anthropic: '', google: '' },
+            chatSessions: [],
+            chatHistoryOpen: false,
+            maxConcurrency: 3,
+            boardBackgroundByProject: {},
+          },
+          version: versions.APP_STORE,
+        };
+        localStorage.setItem('automaker-storage', JSON.stringify(appState));
+
+        const setupState = {
+          state: {
+            isFirstRun: false,
+            setupComplete: true,
+            skipClaudeSetup: false,
+          },
+          version: versions.SETUP_STORE,
+        };
+        localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+        const settingsCache = {
+          setupComplete: true,
+          isFirstRun: false,
+          projects: projects.map((p) => ({
+            id: p.id,
+            name: p.name,
+            path: p.path,
+            lastOpened: p.lastOpened,
+          })),
+          currentProjectId: projects[0].id,
+          theme: 'dark',
+          sidebarOpen: true,
+          sidebarStyle: 'unified',
+          maxConcurrency: 3,
+        };
+        localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+        // Force unified sidebar (project-dropdown-trigger exists only in unified mode)
+        const uiCache = {
+          state: {
+            cachedProjectId: projects[0].id,
+            cachedSidebarOpen: true,
+            cachedSidebarStyle: 'unified',
+            cachedWorktreePanelCollapsed: false,
+            cachedCollapsedNavSections: {},
+            cachedCurrentWorktreeByProject: {},
+          },
+          version: 2,
+        };
+        localStorage.setItem('automaker-ui-cache', JSON.stringify(uiCache));
+
+        localStorage.setItem('automaker-disable-splash', 'true');
+      },
+      { projects: [projectA, projectB], versions: { APP_STORE: 2, SETUP_STORE: 1 } }
+    );
+
+    // Fast-track initializeProject API calls for test project paths.
+    // initializeProject makes ~8 sequential HTTP calls (exists, stat, mkdir, etc.) that
+    // can take 10+ seconds under parallel load, blocking setCurrentProject entirely.
+    await page.route('**/api/fs/**', async (route) => {
+      const body = route.request().postDataJSON?.() ?? {};
+      const filePath = body?.filePath || body?.dirPath || '';
+      if (filePath.startsWith(projectAPath) || filePath.startsWith(projectBPath)) {
+        const url = route.request().url();
+        if (url.includes('/api/fs/exists')) {
+          await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ success: true, exists: true }),
+          });
+        } else if (url.includes('/api/fs/stat')) {
+          await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({
+              success: true,
+              stats: { isDirectory: true, isFile: false, size: 0, mtime: new Date().toISOString() },
+            }),
+          });
+        } else if (url.includes('/api/fs/mkdir')) {
+          await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ success: true }),
+          });
+        } else if (url.includes('/api/fs/write')) {
+          await route.fulfill({
+            status: 200,
+            contentType: 'application/json',
+            body: JSON.stringify({ success: true }),
+          });
+        } else {
+          await route.continue();
+        }
+      } else {
+        await route.continue();
+      }
+    });
+
+    // Also fast-track git init for test projects
+    await page.route('**/api/worktree/init-git', async (route) => {
+      const body = route.request().postDataJSON?.() ?? {};
+      if (
+        body?.projectPath?.startsWith(projectAPath) ||
+        body?.projectPath?.startsWith(projectBPath)
+      ) {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ success: true, result: { initialized: false } }),
+        });
+      } else {
+        await route.continue();
+      }
+    });
+
+    // Intercept settings API: inject test projects and track current project so that
+    // when the app switches to project B (PUT), subsequent GETs return B instead of
+    // overwriting back to A (which would prevent the dropdown from ever showing B).
+    let effectiveCurrentProjectId = projectAId;
+    let cachedSettingsJson: Record<string, unknown> | null = null;
+    await page.route('**/api/settings/global', async (route) => {
+      const method = route.request().method();
+      if (method === 'PUT') {
+        try {
+          const body = route.request().postDataJSON();
+          if (body?.currentProjectId === projectAId || body?.currentProjectId === projectBId) {
+            effectiveCurrentProjectId = body.currentProjectId;
+          }
+        } catch {
+          // ignore parse errors
+        }
+        await route.continue();
+        return;
+      }
+      if (method !== 'GET') {
+        await route.continue();
+        return;
+      }
+      if (!cachedSettingsJson) {
+        try {
+          const response = await route.fetch();
+          cachedSettingsJson = (await response.json()) as Record<string, unknown>;
+        } catch {
+          // route.fetch() can fail during navigation; fall through to continue
+          await route.continue().catch(() => {});
+          return;
+        }
+      }
+      const json = JSON.parse(JSON.stringify(cachedSettingsJson)) as Record<string, unknown>;
+      if (!json.settings || typeof json.settings !== 'object') {
+        json.settings = {};
+      }
+      const settings = json.settings as Record<string, unknown>;
+      settings.currentProjectId = effectiveCurrentProjectId;
+      settings.projects = [projectA, projectB];
+      settings.sidebarOpen = true;
+      settings.sidebarStyle = 'unified';
+      await route
+        .fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(json),
+        })
+        .catch(() => {});
+    });
+
+    // Track API calls to /api/settings/project to verify settings are being loaded
+    const settingsApiCalls: Array<{ url: string; method: string; body: string }> = [];
+    page.on('request', (request) => {
+      if (request.url().includes('/api/settings/project') && request.method() === 'POST') {
+        settingsApiCalls.push({
+          url: request.url(),
+          method: request.method(),
+          body: request.postData() || '',
+        });
+      }
+    });
+
+    await authenticateForTests(page);
+
+    // Navigate to the board directly with project A
+    await page.goto('/board');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+
+    // Wait for board view
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 15000 });
+
+    // Wait for settings to be loaded (useProjectSettingsLoader hook)
+    // Poll for the board view to be fully rendered and stable
+    const boardView = page.locator('[data-testid="board-view"]');
+    await expect(boardView).toBeVisible({ timeout: 15000 });
+
+    // Wait for settings API calls to complete (at least one settings call should have been made)
+    await expect(async () => {
+      expect(settingsApiCalls.length).toBeGreaterThan(0);
+    }).toPass({ timeout: 10000 });
+
+    // Ensure sidebar is expanded before interacting with project selector
+    const expandSidebarButton = page.locator('button:has-text("Expand sidebar")');
+    if (await expandSidebarButton.isVisible()) {
+      await expandSidebarButton.click();
+      await page
+        .locator('button:has-text("Collapse sidebar")')
+        .waitFor({ state: 'visible', timeout: 5000 })
+        .catch(() => {});
+    }
+
+    // Switch to project B (no background)
+    // Use retry pattern: background re-renders (worktree loading, settings sync) can
+    // swallow clicks or close the dropdown immediately after it opens.
+    const projectSelector = page.locator('[data-testid="project-dropdown-trigger"]');
+    await expect(async () => {
+      await projectSelector.click();
+      await expect(page.locator('[data-testid="project-dropdown-content"]')).toBeVisible({
+        timeout: 2000,
+      });
+    }).toPass({ timeout: 10000 });
+
+    const projectPickerB = page.locator(`[data-testid="project-item-${projectBId}"]`);
+    await expect(projectPickerB).toBeVisible({ timeout: 5000 });
+
+    // Update effectiveCurrentProjectId eagerly BEFORE clicking so any in-flight GET
+    // responses return project B instead of overwriting the store back to A.
+    effectiveCurrentProjectId = projectBId;
+    await projectPickerB.click();
+
+    // Wait for the project switch to take effect (dropdown trigger shows project B name).
+    // With initializeProject API calls fast-tracked, setCurrentProject runs quickly
+    // and the startTransition commits within a few seconds.
+    await expect(
+      page.locator('[data-testid="project-dropdown-trigger"]').getByText(projectBName)
+    ).toBeVisible({ timeout: 15000 });
+
+    // Ensure sidebar stays expanded after navigation (it may collapse when switching projects)
+    const expandBtn = page.locator('button:has-text("Expand sidebar")');
+    if (await expandBtn.isVisible()) {
+      await expandBtn.click();
+      await page
+        .locator('button:has-text("Collapse sidebar")')
+        .waitFor({ state: 'visible', timeout: 5000 })
+        .catch(() => {});
+    }
+
+    // Switch back to project A. Settings polls can cause re-renders that detach dropdown
+    // items mid-click, so we retry the entire open-and-click sequence with short timeouts.
+    // Update effectiveCurrentProjectId eagerly to prevent polls from reverting the switch.
+    effectiveCurrentProjectId = projectAId;
+    const trigger = page.locator('[data-testid="project-dropdown-trigger"]');
+    await expect(async () => {
+      await trigger.click();
+      await expect(page.locator('[data-testid="project-dropdown-content"]')).toBeVisible({
+        timeout: 2000,
+      });
+      await page
+        .locator(`[data-testid="project-item-${projectAId}"]`)
+        .click({ force: true, timeout: 1000 });
+    }).toPass({ timeout: 15000 });
+
+    // Verify we're back on project A
+    await expect(
+      page.locator('[data-testid="project-dropdown-trigger"]').getByText(projectAName)
+    ).toBeVisible({ timeout: 15000 });
+
+    // Wait for settings to be re-loaded for project A
+    const prevCallCount = settingsApiCalls.length;
+    await expect(async () => {
+      expect(settingsApiCalls.length).toBeGreaterThan(prevCallCount);
+    })
+      .toPass({ timeout: 10000 })
+      .catch(() => {
+        // Settings may be cached, which is fine
+      });
+
+    // Verify that the settings API was called for project A at least once (initial load).
+    // Note: When switching back, the app may use cached settings and skip re-fetching.
+    const projectASettingsCalls = settingsApiCalls.filter((call) =>
+      call.body.includes(projectAPath)
+    );
+
+    // Debug: log all API calls if test fails
+    if (projectASettingsCalls.length < 1) {
+      console.log('Total settings API calls:', settingsApiCalls.length);
+      console.log('API calls:', JSON.stringify(settingsApiCalls, null, 2));
+      console.log('Looking for path:', projectAPath);
+    }
+
+    expect(projectASettingsCalls.length).toBeGreaterThanOrEqual(1);
+
+    // Verify settings file still exists with correct data
+    const loadedSettings = JSON.parse(fs.readFileSync(settingsPath, 'utf-8'));
+    expect(loadedSettings.boardBackground).toBeDefined();
+    expect(loadedSettings.boardBackground.imagePath).toBe(backgroundPath);
+    expect(loadedSettings.boardBackground.cardOpacity).toBe(85);
+    expect(loadedSettings.boardBackground.columnOpacity).toBe(60);
+    expect(loadedSettings.boardBackground.hideScrollbar).toBe(true);
+
+    // Clean up route handlers to avoid "route in flight" errors during teardown
+    await page.unrouteAll({ behavior: 'ignoreErrors' });
+
+    // The test passing means:
+    // 1. The useProjectSettingsLoader hook is working
+    // 2. Settings are loaded when switching projects
+    // 3. The API call to /api/settings/project is made correctly
+  });
+
+  test('should load background settings on app restart', async ({ page }) => {
+    const projectName = `restart-test-${Date.now()}`;
+    const projectPath = path.join(TEST_TEMP_DIR, projectName);
+    const projectId = `project-${Date.now()}`;
+
+    // Create project directory
+    fs.mkdirSync(projectPath, { recursive: true });
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify({ name: projectName, version: '1.0.0' }, null, 2)
+    );
+
+    // Create .automaker with background settings
+    const automakerDir = path.join(projectPath, '.automaker');
+    fs.mkdirSync(automakerDir, { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'board'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'features'), { recursive: true });
+    fs.mkdirSync(path.join(automakerDir, 'context'), { recursive: true });
+
+    // Copy actual background image from test fixtures
+    const backgroundPath = path.join(automakerDir, 'board', 'background.jpg');
+    const testImagePath = path.join(__dirname, '..', 'img', 'background.jpg');
+    fs.copyFileSync(testImagePath, backgroundPath);
+
+    const settingsPath = path.join(automakerDir, 'settings.json');
+    fs.writeFileSync(
+      settingsPath,
+      JSON.stringify(
+        {
+          version: 1,
+          boardBackground: {
+            imagePath: backgroundPath,
+            cardOpacity: 90,
+            columnOpacity: 70,
+            imageVersion: Date.now(),
+          },
+        },
+        null,
+        2
+      )
+    );
+
+    // Set up with project as current using direct localStorage
+    await page.addInitScript(
+      ({ project }: { project: string[] }) => {
+        const projectObj = {
+          id: project[0],
+          name: project[1],
+          path: project[2],
+          lastOpened: new Date().toISOString(),
+        };
+
+        const appState = {
+          state: {
+            projects: [projectObj],
+            currentProject: projectObj,
+            currentView: 'board',
+            theme: 'dark',
+            sidebarOpen: true,
+            skipSandboxWarning: true,
+            apiKeys: { anthropic: '', google: '' },
+            chatSessions: [],
+            chatHistoryOpen: false,
+            maxConcurrency: 3,
+            boardBackgroundByProject: {},
+          },
+          version: 2,
+        };
+        localStorage.setItem('automaker-storage', JSON.stringify(appState));
+
+        // Setup complete - use correct key name
+        const setupState = {
+          state: {
+            isFirstRun: false,
+            setupComplete: true,
+            skipClaudeSetup: false,
+          },
+          version: 1,
+        };
+        localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+        const settingsCache = {
+          setupComplete: true,
+          isFirstRun: false,
+          projects: [
+            {
+              id: projectObj.id,
+              name: projectObj.name,
+              path: projectObj.path,
+              lastOpened: projectObj.lastOpened,
+            },
+          ],
+          currentProjectId: projectObj.id,
+          theme: 'dark',
+          sidebarOpen: true,
+          maxConcurrency: 3,
+        };
+        localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+        // Disable splash screen in tests
+        localStorage.setItem('automaker-disable-splash', 'true');
+      },
+      { project: [projectId, projectName, projectPath] }
+    );
+
+    // Intercept settings API to use our test project instead of the E2E fixture.
+    // Only intercept GET requests - let PUT requests pass through unmodified.
+    await page.route('**/api/settings/global', async (route) => {
+      if (route.request().method() !== 'GET') {
+        await route.continue();
+        return;
+      }
+      let response: Awaited<ReturnType<typeof route.fetch>>;
+      try {
+        response = await route.fetch();
+      } catch {
+        await route.continue();
+        return;
+      }
+      if (!response.ok()) {
+        await route.fulfill({ response });
+        return;
+      }
+      const json = await response.json();
+      // Override to use our test project
+      if (json.settings) {
+        json.settings.currentProjectId = projectId;
+        json.settings.projects = [
+          {
+            id: projectId,
+            name: projectName,
+            path: projectPath,
+            lastOpened: new Date().toISOString(),
+          },
+        ];
+      }
+      await route.fulfill({ response, json });
+    });
+
+    // Track API calls to /api/settings/project to verify settings are being loaded
+    const settingsApiCalls: Array<{ url: string; method: string; body: string }> = [];
+    page.on('request', (request) => {
+      if (request.url().includes('/api/settings/project') && request.method() === 'POST') {
+        settingsApiCalls.push({
+          url: request.url(),
+          method: request.method(),
+          body: request.postData() || '',
+        });
+      }
+    });
+
+    await authenticateForTests(page);
+
+    // Navigate to the app
+    await page.goto('/');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+
+    // Should go straight to board view (not welcome) since we have currentProject
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 15000 });
+
+    // Wait for settings to load by checking API calls
+    await expect(async () => {
+      const calls = settingsApiCalls.filter((call) => call.body.includes(projectPath));
+      expect(calls.length).toBeGreaterThanOrEqual(1);
+    }).toPass({ timeout: 10000 });
+
+    // Verify that the settings API was called for this project
+    const projectSettingsCalls = settingsApiCalls.filter((call) => call.body.includes(projectPath));
+
+    // Debug: log all API calls if test fails
+    if (projectSettingsCalls.length < 1) {
+      console.log('Total settings API calls:', settingsApiCalls.length);
+      console.log('API calls:', JSON.stringify(settingsApiCalls, null, 2));
+      console.log('Looking for path:', projectPath);
+    }
+
+    expect(projectSettingsCalls.length).toBeGreaterThanOrEqual(1);
+
+    // Verify settings file exists with correct data
+    const loadedSettings = JSON.parse(fs.readFileSync(settingsPath, 'utf-8'));
+    expect(loadedSettings.boardBackground).toBeDefined();
+    expect(loadedSettings.boardBackground.imagePath).toBe(backgroundPath);
+    expect(loadedSettings.boardBackground.cardOpacity).toBe(90);
+    expect(loadedSettings.boardBackground.columnOpacity).toBe(70);
+
+    // Clean up route handlers to avoid "route in flight" errors during teardown
+    await page.unrouteAll({ behavior: 'ignoreErrors' });
+
+    // The test passing means:
+    // 1. The useProjectSettingsLoader hook is working
+    // 2. Settings are loaded when app starts with a currentProject
+    // 3. The API call to /api/settings/project is made correctly
+  });
+});
diff --git a/temp_repo/apps/ui/tests/projects/new-project-creation.spec.ts b/temp_repo/apps/ui/tests/projects/new-project-creation.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..430aa27f593f29ab11c8af532840fe96abc31826
--- /dev/null
+++ b/temp_repo/apps/ui/tests/projects/new-project-creation.spec.ts
@@ -0,0 +1,189 @@
+/**
+ * Project Creation E2E Test
+ *
+ * Happy path: Create a new blank project from welcome view
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupWelcomeView,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+} from '../utils';
+
+const TEST_TEMP_DIR = createTempDirPath('project-creation-test');
+
+test.describe('Project Creation', () => {
+  test.beforeAll(async () => {
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+  });
+
+  test.afterAll(async () => {
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('should create a new blank project from welcome view', async ({ page }) => {
+    const projectName = `test-project-${Date.now()}`;
+
+    await setupWelcomeView(page, { workspaceDir: TEST_TEMP_DIR });
+
+    // Intercept settings API BEFORE authenticateForTests (which navigates to the page).
+    // Force empty project list on ALL GETs until we click "Create Project", so that
+    // background refetches from TanStack Query don't race and flip hasProjects=true
+    // (which would replace the empty-state card with the project-list header).
+    // Once projectCreated=true, subsequent GETs pass through so the store picks up
+    // the newly created project and navigates to the board.
+    let projectCreated = false;
+    await page.route('**/api/settings/global', async (route) => {
+      const method = route.request().method();
+      if (method === 'PUT') {
+        return route.continue();
+      }
+      const response = await route.fetch();
+      const json = await response.json();
+      if (!projectCreated && json.settings) {
+        json.settings.currentProjectId = null;
+        json.settings.projects = [];
+        json.settings.setupComplete = true;
+        json.settings.isFirstRun = false;
+        json.settings.lastProjectDir = TEST_TEMP_DIR;
+        await route.fulfill({ response, json });
+      } else {
+        await route.fulfill({ response, json });
+      }
+    });
+
+    // Mock workspace config API to return a valid default directory.
+    // In CI, ALLOWED_ROOT_DIRECTORY is unset and Documents path is unavailable,
+    // so without this mock, getDefaultWorkspaceDirectory() returns null and the
+    // "Will be created at:" text never renders in the new project modal.
+    await page.route('**/api/workspace/config', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          success: true,
+          configured: false,
+          defaultDir: TEST_TEMP_DIR,
+        }),
+      });
+    });
+
+    // Mock init-git to avoid hangs in CI. Git init + commit can block when user.name/email
+    // are unset or git prompts for input. The test still exercises mkdir, initializeProject
+    // structure, writeFile, and store updates—we only bypass the actual git process.
+    await page.route('**/api/worktree/init-git', async (route) => {
+      if (route.request().method() === 'POST') {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            success: true,
+            result: { initialized: true, message: 'Git repository initialized (mocked)' },
+          }),
+        });
+      } else {
+        await route.continue();
+      }
+    });
+
+    // Mock filesystem APIs so project creation completes deterministically without
+    // depending on server filesystem. The real server may hang or fail in CI when
+    // ALLOWED_ROOT_DIRECTORY is unset or paths differ between test and server process.
+    const fsJson = (status: number, body: object) => ({
+      status,
+      contentType: 'application/json',
+      body: JSON.stringify(body),
+    });
+    const workspaceDir = TEST_TEMP_DIR.replace(/\/$/, '');
+    await page.route('**/api/fs/exists', async (route) => {
+      if (route.request().method() === 'POST') {
+        const body = route.request().postDataJSON?.() ?? {};
+        const filePath = (body?.filePath as string | undefined) ?? '';
+        const normalized = filePath.replace(/\/$/, '');
+        const isWorkspace = normalized === workspaceDir;
+        const isProjectDir =
+          normalized.startsWith(workspaceDir + '/') &&
+          normalized.slice(workspaceDir.length + 1).indexOf('/') === -1;
+        const exists = isWorkspace || isProjectDir;
+        await route.fulfill(fsJson(200, { success: true, exists }));
+      } else {
+        await route.continue();
+      }
+    });
+    await page.route('**/api/fs/stat', async (route) => {
+      if (route.request().method() === 'POST') {
+        await route.fulfill(
+          fsJson(200, { success: true, stats: { isDirectory: true, isFile: false } })
+        );
+      } else {
+        await route.continue();
+      }
+    });
+    await page.route('**/api/fs/mkdir', async (route) => {
+      if (route.request().method() === 'POST') {
+        await route.fulfill(fsJson(200, { success: true }));
+      } else {
+        await route.continue();
+      }
+    });
+    await page.route('**/api/fs/write', async (route) => {
+      if (route.request().method() === 'POST') {
+        await route.fulfill(fsJson(200, { success: true }));
+      } else {
+        await route.continue();
+      }
+    });
+
+    await authenticateForTests(page);
+
+    // Navigate directly to dashboard to avoid auto-open logic
+    await page.goto('/dashboard');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+
+    // Wait for dashboard view
+    await expect(page.locator('[data-testid="dashboard-view"]')).toBeVisible({ timeout: 15000 });
+
+    await page.locator('[data-testid="create-new-project"]').click();
+    await page.locator('[data-testid="quick-setup-option-no-projects"]').click();
+
+    await expect(page.locator('[data-testid="new-project-modal"]')).toBeVisible({ timeout: 5000 });
+
+    await page.locator('[data-testid="project-name-input"]').fill(projectName);
+    await expect(page.getByText('Will be created at:')).toBeVisible({ timeout: 5000 });
+
+    // Allow subsequent settings GETs to pass through so the store picks up the new project
+    projectCreated = true;
+    await page.locator('[data-testid="confirm-create-project"]').click();
+
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 15000 });
+
+    // Expand sidebar if collapsed to see project name
+    const expandSidebarButton = page.locator('button:has-text("Expand sidebar")');
+    if (await expandSidebarButton.isVisible()) {
+      await expandSidebarButton.click();
+      await page
+        .locator('button:has-text("Collapse sidebar")')
+        .waitFor({ state: 'visible', timeout: 5000 })
+        .catch(() => {});
+    }
+
+    // Wait for project to be set as current and visible on the page
+    // The project name appears in the project dropdown trigger
+    await expect(
+      page.locator('[data-testid="project-dropdown-trigger"]').getByText(projectName)
+    ).toBeVisible({
+      timeout: 15000,
+    });
+
+    // Project was created successfully if we're on board view with project name visible
+    // Note: The actual project directory is created in the server's default workspace,
+    // not necessarily TEST_TEMP_DIR. This is expected behavior.
+  });
+});
diff --git a/temp_repo/apps/ui/tests/projects/open-existing-project.spec.ts b/temp_repo/apps/ui/tests/projects/open-existing-project.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0f6e2baa9e9c889427ea8d7972d58a896e9ea1f5
--- /dev/null
+++ b/temp_repo/apps/ui/tests/projects/open-existing-project.spec.ts
@@ -0,0 +1,210 @@
+/**
+ * Open Project End-to-End Test
+ *
+ * Tests opening an existing project directory from the welcome view.
+ * This verifies that:
+ * 1. An existing directory can be opened as a project
+ * 2. The .automaker directory is initialized if it doesn't exist
+ * 3. The project is loaded and shown in the board view
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  createTempDirPath,
+  cleanupTempDir,
+  setupWelcomeView,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+} from '../utils';
+
+// Create unique temp dir for this test run
+const TEST_TEMP_DIR = createTempDirPath('open-project-test');
+
+test.describe('Open Project', () => {
+  test.beforeAll(async () => {
+    // Create test temp directory
+    if (!fs.existsSync(TEST_TEMP_DIR)) {
+      fs.mkdirSync(TEST_TEMP_DIR, { recursive: true });
+    }
+  });
+
+  test.afterAll(async () => {
+    // Cleanup temp directory
+    cleanupTempDir(TEST_TEMP_DIR);
+  });
+
+  test('should open an existing project directory from recent projects', async ({ page }) => {
+    const projectName = `existing-project-${Date.now()}`;
+    const projectPath = path.join(TEST_TEMP_DIR, projectName);
+    const projectId = `project-${Date.now()}`;
+
+    // Create the project directory with some files to simulate an existing codebase
+    fs.mkdirSync(projectPath, { recursive: true });
+
+    // Create a package.json to simulate a real project
+    fs.writeFileSync(
+      path.join(projectPath, 'package.json'),
+      JSON.stringify(
+        {
+          name: projectName,
+          version: '1.0.0',
+          description: 'A test project for e2e testing',
+        },
+        null,
+        2
+      )
+    );
+
+    // Create a README.md
+    fs.writeFileSync(path.join(projectPath, 'README.md'), `# ${projectName}\n\nA test project.`);
+
+    // Create a src directory with an index.ts file
+    fs.mkdirSync(path.join(projectPath, 'src'), { recursive: true });
+    fs.writeFileSync(
+      path.join(projectPath, 'src', 'index.ts'),
+      'export const hello = () => console.log("Hello World");'
+    );
+
+    // Set up welcome view with the project in recent projects (but NOT as current project)
+    await setupWelcomeView(page, {
+      recentProjects: [
+        {
+          id: projectId,
+          name: projectName,
+          path: projectPath,
+          lastOpened: new Date(Date.now() - 86400000).toISOString(), // 1 day ago
+        },
+      ],
+    });
+
+    // Intercept settings API: only modify the FIRST GET so we start with no current project
+    // but our test project in the list. Subsequent GETs pass through so background refetch
+    // doesn't overwrite the store after we open the project (which would show "No project selected").
+    let getCount = 0;
+    await page.route('**/api/settings/global', async (route) => {
+      if (route.request().method() !== 'GET') {
+        return route.continue();
+      }
+      let response;
+      try {
+        response = await route.fetch();
+      } catch {
+        await route.continue();
+        return;
+      }
+      let json;
+      try {
+        json = await response.json();
+      } catch {
+        await route.continue();
+        return;
+      }
+      getCount += 1;
+      if (getCount === 1 && json.settings) {
+        json.settings.currentProjectId = null;
+        const testProject = {
+          id: projectId,
+          name: projectName,
+          path: projectPath,
+          lastOpened: new Date(Date.now() - 86400000).toISOString(),
+        };
+        const existingProjects = json.settings.projects || [];
+        const hasProject = existingProjects.some(
+          (p: { id: string; path: string }) => p.id === projectId
+        );
+        if (!hasProject) {
+          json.settings.projects = [testProject, ...existingProjects];
+        }
+      }
+      await route.fulfill({ response, json });
+    });
+
+    // Now navigate to the app
+    await authenticateForTests(page);
+    // Navigate directly to dashboard to avoid auto-open which would bypass the project selection
+    await page.goto('/dashboard');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+
+    // Wait for dashboard view
+    await expect(page.locator('[data-testid="dashboard-view"]')).toBeVisible({ timeout: 15000 });
+
+    // Verify we see the "Recent Projects" section
+    await expect(page.getByText('Recent Projects')).toBeVisible({ timeout: 5000 });
+
+    // Look for our test project by name OR any available project
+    // First try our specific project, if not found, use the first available project card
+    let recentProjectCard = page.getByText(projectName).first();
+    let targetProjectName = projectName;
+
+    const isOurProjectVisible = await recentProjectCard
+      .isVisible({ timeout: 3000 })
+      .catch(() => false);
+
+    if (!isOurProjectVisible) {
+      // Our project isn't visible - use the first available recent project card instead
+      // This tests the "open recent project" flow even if our specific project didn't get injected
+      const firstProjectCard = page.locator('[data-testid^="project-card-"]').first();
+      await expect(firstProjectCard).toBeVisible({ timeout: 5000 });
+      // Get the project name from the card to verify later
+      targetProjectName = (await firstProjectCard.locator('p').first().textContent()) || '';
+      recentProjectCard = firstProjectCard;
+    }
+
+    await recentProjectCard.click();
+
+    // Wait for navigation to board (init + navigate are async)
+    await page.waitForURL(/\/board/, { timeout: 20000 });
+
+    // Wait for the board view to appear (project was opened)
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 15000 });
+
+    // Expand sidebar if collapsed to see project name
+    const expandSidebarButton = page.locator('button:has-text("Expand sidebar")');
+    if (await expandSidebarButton.isVisible()) {
+      await expandSidebarButton.click();
+      await page.waitForTimeout(300);
+    }
+
+    // Wait for a project to be set as current and visible on the page
+    // The project name appears in the project dropdown trigger
+    if (targetProjectName) {
+      await expect(
+        page.locator('[data-testid="project-dropdown-trigger"]').getByText(targetProjectName)
+      ).toBeVisible({
+        timeout: 15000,
+      });
+    }
+
+    // Only verify filesystem if we opened our specific test project
+    // (not a fallback project from previous test runs)
+    if (targetProjectName === projectName) {
+      // Verify .automaker directory was created (initialized for the first time)
+      // Use polling since file creation may be async
+      const automakerDir = path.join(projectPath, '.automaker');
+      await expect(async () => {
+        expect(fs.existsSync(automakerDir)).toBe(true);
+      }).toPass({ timeout: 10000 });
+
+      // Verify the required structure was created by initializeProject:
+      // - .automaker/categories.json
+      // - .automaker/features directory
+      // - .automaker/context directory
+      const categoriesPath = path.join(automakerDir, 'categories.json');
+      await expect(async () => {
+        expect(fs.existsSync(categoriesPath)).toBe(true);
+      }).toPass({ timeout: 10000 });
+
+      // Verify subdirectories were created
+      expect(fs.existsSync(path.join(automakerDir, 'features'))).toBe(true);
+      expect(fs.existsSync(path.join(automakerDir, 'context'))).toBe(true);
+
+      // Verify the original project files still exist (weren't modified)
+      expect(fs.existsSync(path.join(projectPath, 'package.json'))).toBe(true);
+      expect(fs.existsSync(path.join(projectPath, 'README.md'))).toBe(true);
+      expect(fs.existsSync(path.join(projectPath, 'src', 'index.ts'))).toBe(true);
+    }
+  });
+});
diff --git a/temp_repo/apps/ui/tests/projects/overview-dashboard.spec.ts b/temp_repo/apps/ui/tests/projects/overview-dashboard.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..86a3c1164615674b247a8b50a59ae99d7641b8f4
--- /dev/null
+++ b/temp_repo/apps/ui/tests/projects/overview-dashboard.spec.ts
@@ -0,0 +1,409 @@
+/**
+ * Projects Overview Dashboard End-to-End Test
+ *
+ * Tests the multi-project overview dashboard that shows status across all projects.
+ * This verifies that:
+ * 1. The overview view can be accessed via the sidebar
+ * 2. The overview displays aggregate statistics
+ * 3. Navigation back to dashboard works correctly
+ * 4. The UI responds to API data correctly
+ */
+
+import { test, expect } from '@playwright/test';
+import {
+  setupMockMultipleProjects,
+  authenticateForTests,
+  handleLoginScreenIfPresent,
+} from '../utils';
+
+/**
+ * Helper to build overview API response bodies.
+ * Each test sets `overviewMock` before navigating so the single
+ * route handler registered in `beforeEach` returns the right data.
+ */
+function makeOverviewResponse(
+  overrides: {
+    projects?: unknown[];
+    aggregate?: Record<string, unknown>;
+    recentActivity?: unknown[];
+    status?: number;
+    error?: string;
+  } = {}
+) {
+  const { projects = [], aggregate, recentActivity = [], status = 200, error } = overrides;
+
+  const defaultAggregate = {
+    projectCounts: { total: 0, active: 0, idle: 0, waiting: 0, withErrors: 0, allCompleted: 0 },
+    featureCounts: { total: 0, pending: 0, running: 0, completed: 0, failed: 0, verified: 0 },
+    totalUnreadNotifications: 0,
+    projectsWithAutoModeRunning: 0,
+    computedAt: new Date().toISOString(),
+  };
+
+  return {
+    status,
+    body: error
+      ? JSON.stringify({ error })
+      : JSON.stringify({
+          success: true,
+          projects,
+          aggregate: aggregate ?? defaultAggregate,
+          recentActivity,
+          generatedAt: new Date().toISOString(),
+        }),
+  };
+}
+
+test.describe('Projects Overview Dashboard', () => {
+  // Mutable mock response - tests set this before navigating.
+  // The single route handler in beforeEach reads it on every request.
+  let overviewMock: { status: number; body: string };
+
+  test.beforeEach(async ({ page }) => {
+    // Start with an empty default
+    overviewMock = makeOverviewResponse();
+
+    // Set up mock projects state
+    await setupMockMultipleProjects(page, 3);
+
+    // Intercept settings API to preserve mock project data and prevent
+    // the server's settings from overriding our test setup.
+    await page.route('**/api/settings/global', async (route) => {
+      const method = route.request().method();
+      if (method === 'PUT') {
+        return route.continue();
+      }
+      try {
+        const response = await route.fetch();
+        const json = await response.json();
+        if (json.settings) {
+          json.settings.projects = [
+            {
+              id: 'test-project-1',
+              name: 'Test Project 1',
+              path: '/mock/test-project-1',
+              lastOpened: new Date().toISOString(),
+            },
+            {
+              id: 'test-project-2',
+              name: 'Test Project 2',
+              path: '/mock/test-project-2',
+              lastOpened: new Date(Date.now() - 86400000).toISOString(),
+            },
+            {
+              id: 'test-project-3',
+              name: 'Test Project 3',
+              path: '/mock/test-project-3',
+              lastOpened: new Date(Date.now() - 172800000).toISOString(),
+            },
+          ];
+          json.settings.currentProjectId = 'test-project-1';
+          json.settings.setupComplete = true;
+          json.settings.isFirstRun = false;
+        }
+        await route.fulfill({ response, json });
+      } catch {
+        // Route may be called after test ends; swallow errors from closed context
+      }
+    });
+
+    // Mock the initialize-project endpoint for mock paths that don't exist on disk.
+    await page.route('**/api/project/initialize', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ success: true }),
+      });
+    });
+
+    // Mock features list for mock project paths (they don't exist on disk)
+    await page.route('**/api/features/list**', async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ success: true, features: [] }),
+      });
+    });
+
+    // Single overview route handler that reads from the mutable `overviewMock`.
+    // Tests update `overviewMock` before navigating to control the response.
+    await page.route('**/api/projects/overview', async (route) => {
+      await route.fulfill({
+        status: overviewMock.status,
+        contentType: 'application/json',
+        body: overviewMock.body,
+      });
+    });
+
+    await authenticateForTests(page);
+  });
+
+  test('should navigate to overview from sidebar and display overview UI', async ({ page }) => {
+    // Use default empty overview mock (set in beforeEach)
+
+    // Go to the app
+    await page.goto('/board');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+
+    // Wait for the board view to load
+    await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 15000 });
+
+    // Expand sidebar if collapsed
+    const expandSidebarButton = page.locator('button:has-text("Expand sidebar")');
+    if (await expandSidebarButton.isVisible()) {
+      await expandSidebarButton.click();
+      await page.waitForTimeout(300);
+    }
+
+    // Click on the Dashboard link in the sidebar (navigates to /overview)
+    const overviewLink = page.getByRole('button', { name: 'Dashboard' });
+    await expect(overviewLink).toBeVisible({ timeout: 5000 });
+    await overviewLink.click();
+
+    // Wait for the overview view to appear
+    await expect(page.locator('[data-testid="overview-view"]')).toBeVisible({ timeout: 15000 });
+
+    // Verify the header is visible with title
+    await expect(page.getByText('Automaker Dashboard')).toBeVisible({ timeout: 5000 });
+
+    // Verify the refresh button is present
+    await expect(page.getByRole('button', { name: /Refresh/i })).toBeVisible();
+
+    // Verify the Open Project and New Project buttons are present in the overview header
+    const overviewHeader = page.locator('[data-testid="overview-view"] header');
+    await expect(overviewHeader.getByRole('button', { name: /Open Project/i })).toBeVisible();
+    await expect(overviewHeader.getByRole('button', { name: /New Project/i })).toBeVisible();
+  });
+
+  test('should display aggregate statistics cards', async ({ page }) => {
+    overviewMock = makeOverviewResponse({
+      projects: [
+        {
+          projectId: 'test-project-1',
+          projectName: 'Test Project 1',
+          projectPath: '/mock/test-project-1',
+          healthStatus: 'active',
+          featureCounts: { pending: 2, running: 1, completed: 3, failed: 0, verified: 2 },
+          totalFeatures: 8,
+          isAutoModeRunning: true,
+          unreadNotificationCount: 1,
+        },
+        {
+          projectId: 'test-project-2',
+          projectName: 'Test Project 2',
+          projectPath: '/mock/test-project-2',
+          healthStatus: 'idle',
+          featureCounts: { pending: 5, running: 0, completed: 10, failed: 1, verified: 8 },
+          totalFeatures: 24,
+          isAutoModeRunning: false,
+          unreadNotificationCount: 0,
+        },
+      ],
+      aggregate: {
+        projectCounts: {
+          total: 2,
+          active: 1,
+          idle: 1,
+          waiting: 0,
+          withErrors: 1,
+          allCompleted: 0,
+        },
+        featureCounts: {
+          total: 32,
+          pending: 7,
+          running: 1,
+          completed: 13,
+          failed: 1,
+          verified: 10,
+        },
+        totalUnreadNotifications: 1,
+        projectsWithAutoModeRunning: 1,
+        computedAt: new Date().toISOString(),
+      },
+      recentActivity: [
+        {
+          id: 'activity-1',
+          projectId: 'test-project-1',
+          projectName: 'Test Project 1',
+          type: 'feature_completed',
+          description: 'Feature completed: Add login form',
+          severity: 'success',
+          timestamp: new Date().toISOString(),
+          featureId: 'feature-1',
+          featureTitle: 'Add login form',
+        },
+      ],
+    });
+
+    // Navigate directly to overview
+    await page.goto('/overview');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+
+    // Wait for the overview view to appear
+    await expect(page.locator('[data-testid="overview-view"]')).toBeVisible({ timeout: 15000 });
+
+    // Verify aggregate stat cards are displayed
+    // Projects count card
+    await expect(page.getByText('Projects').first()).toBeVisible({ timeout: 10000 });
+
+    // Running features card
+    await expect(page.getByText('Running').first()).toBeVisible();
+
+    // Pending features card
+    await expect(page.getByText('Pending').first()).toBeVisible();
+
+    // Completed features card
+    await expect(page.getByText('Completed').first()).toBeVisible();
+
+    // Auto-mode card
+    await expect(page.getByText('Auto-mode').first()).toBeVisible();
+  });
+
+  test('should display project status cards', async ({ page }) => {
+    overviewMock = makeOverviewResponse({
+      projects: [
+        {
+          projectId: 'test-project-1',
+          projectName: 'Test Project 1',
+          projectPath: '/mock/test-project-1',
+          healthStatus: 'active',
+          featureCounts: { pending: 2, running: 1, completed: 3, failed: 0, verified: 2 },
+          totalFeatures: 8,
+          isAutoModeRunning: true,
+          unreadNotificationCount: 1,
+        },
+      ],
+      aggregate: {
+        projectCounts: {
+          total: 1,
+          active: 1,
+          idle: 0,
+          waiting: 0,
+          withErrors: 0,
+          allCompleted: 0,
+        },
+        featureCounts: {
+          total: 8,
+          pending: 2,
+          running: 1,
+          completed: 3,
+          failed: 0,
+          verified: 2,
+        },
+        totalUnreadNotifications: 1,
+        projectsWithAutoModeRunning: 1,
+        computedAt: new Date().toISOString(),
+      },
+    });
+
+    // Navigate directly to overview
+    await page.goto('/overview');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+
+    // Wait for the overview view to appear
+    await expect(page.locator('[data-testid="overview-view"]')).toBeVisible({ timeout: 15000 });
+
+    // Verify project status card is displayed
+    const projectCard = page.locator('[data-testid="project-status-card-test-project-1"]');
+    await expect(projectCard).toBeVisible({ timeout: 10000 });
+
+    // Verify project name is displayed
+    await expect(projectCard.getByText('Test Project 1')).toBeVisible();
+
+    // Verify the Active status badge (use .first() to avoid strict mode violation due to "Auto-mode active" also containing "active")
+    await expect(projectCard.getByText('Active').first()).toBeVisible();
+
+    // Verify auto-mode indicator is shown
+    await expect(projectCard.getByText('Auto-mode active')).toBeVisible();
+  });
+
+  test('should navigate to board when clicking on a project card', async ({ page }) => {
+    overviewMock = makeOverviewResponse({
+      projects: [
+        {
+          projectId: 'test-project-1',
+          projectName: 'Test Project 1',
+          projectPath: '/mock/test-project-1',
+          healthStatus: 'idle',
+          featureCounts: { pending: 0, running: 0, completed: 0, failed: 0, verified: 0 },
+          totalFeatures: 0,
+          isAutoModeRunning: false,
+          unreadNotificationCount: 0,
+        },
+      ],
+      aggregate: {
+        projectCounts: {
+          total: 1,
+          active: 0,
+          idle: 1,
+          waiting: 0,
+          withErrors: 0,
+          allCompleted: 0,
+        },
+        featureCounts: {
+          total: 0,
+          pending: 0,
+          running: 0,
+          completed: 0,
+          failed: 0,
+          verified: 0,
+        },
+        totalUnreadNotifications: 0,
+        projectsWithAutoModeRunning: 0,
+        computedAt: new Date().toISOString(),
+      },
+    });
+
+    // Navigate directly to overview
+    await page.goto('/overview');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+
+    // Wait for the overview view to appear
+    await expect(page.locator('[data-testid="overview-view"]')).toBeVisible({ timeout: 15000 });
+
+    // Verify project card is displayed (clicking it would navigate to board, but requires more mocking)
+    const projectCard = page.locator('[data-testid="project-status-card-test-project-1"]');
+    await expect(projectCard).toBeVisible({ timeout: 10000 });
+  });
+
+  test('should display empty state when no projects exist', async ({ page }) => {
+    // Default overviewMock already returns empty projects - no change needed
+
+    // Navigate directly to overview
+    await page.goto('/overview');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+
+    // Wait for the overview view to appear
+    await expect(page.locator('[data-testid="overview-view"]')).toBeVisible({ timeout: 15000 });
+
+    // Verify empty state message
+    await expect(page.getByText('No projects yet')).toBeVisible({ timeout: 10000 });
+    await expect(page.getByText('Create or open a project to get started')).toBeVisible();
+  });
+
+  test('should show error state when API fails', async ({ page }) => {
+    overviewMock = makeOverviewResponse({
+      status: 500,
+      error: 'Internal server error',
+    });
+
+    // Navigate directly to overview
+    await page.goto('/overview');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+
+    // Wait for the overview view to appear
+    await expect(page.locator('[data-testid="overview-view"]')).toBeVisible({ timeout: 15000 });
+
+    // Verify error state message
+    await expect(page.getByText('Failed to load overview')).toBeVisible({ timeout: 10000 });
+
+    // Verify the "Try again" button is visible
+    await expect(page.getByRole('button', { name: /Try again/i })).toBeVisible();
+  });
+});
diff --git a/temp_repo/apps/ui/tests/settings/event-hooks-settings.spec.ts b/temp_repo/apps/ui/tests/settings/event-hooks-settings.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b589071e1099e918516391192c2b2207113d1e24
--- /dev/null
+++ b/temp_repo/apps/ui/tests/settings/event-hooks-settings.spec.ts
@@ -0,0 +1,271 @@
+/**
+ * Event Hooks Settings Page Tests
+ *
+ * Tests for the event hooks settings section, including:
+ * - Event hooks management
+ * - Ntfy endpoint configuration
+ * - Dialog state management (useEffect hook validation)
+ *
+ * This test also serves as a regression test for the bug where
+ * useEffect was not imported in the event-hooks-section.tsx file,
+ * causing a runtime error when opening the Ntfy endpoint dialog.
+ */
+
+import { test, expect, type Page } from '@playwright/test';
+import { authenticateForTests, navigateToSettings, waitForSuccessToast } from '../utils';
+
+// Timeout constants for maintainability
+const TIMEOUTS = {
+  sectionVisible: 10000,
+  dialogVisible: 5000,
+  dialogHidden: 5000,
+  endpointVisible: 5000,
+} as const;
+
+// Selectors for reuse
+const SELECTORS = {
+  eventHooksButton: 'button:has-text("Event Hooks")',
+  endpointsTab: 'button[role="tab"]:has-text("Endpoints")',
+  sectionText: 'text=Run custom commands or send notifications',
+  addEndpointButton: 'button:has-text("Add Endpoint")',
+  dialog: '[role="dialog"]',
+  dialogTitle: 'text=Add Ntfy Endpoint',
+} as const;
+
+/**
+ * Navigate to the Event Hooks Endpoints tab
+ * This helper reduces code duplication across tests
+ */
+async function navigateToEndpointsTab(page: Page): Promise<void> {
+  await navigateToSettings(page);
+
+  // Click on the Event Hooks section in the navigation
+  await page.locator(SELECTORS.eventHooksButton).first().click();
+
+  // Wait for the event hooks section to be visible
+  await expect(page.locator(SELECTORS.sectionText)).toBeVisible({
+    timeout: TIMEOUTS.sectionVisible,
+  });
+
+  // Switch to Endpoints tab (ntfy endpoints)
+  await page.locator(SELECTORS.endpointsTab).click();
+}
+
+test.describe('Event Hooks Settings', () => {
+  test.beforeEach(async ({ page }) => {
+    await authenticateForTests(page);
+  });
+
+  test('should load event hooks settings section without errors', async ({ page }) => {
+    await navigateToSettings(page);
+
+    // Click on the Event Hooks section in the navigation
+    await page.locator(SELECTORS.eventHooksButton).first().click();
+
+    // Wait for the event hooks section to be visible
+    await expect(page.locator(SELECTORS.sectionText)).toBeVisible({
+      timeout: TIMEOUTS.sectionVisible,
+    });
+
+    // Verify the tabs are present
+    await expect(page.locator('button[role="tab"]:has-text("Hooks")')).toBeVisible();
+    await expect(page.locator(SELECTORS.endpointsTab)).toBeVisible();
+    await expect(page.locator('button[role="tab"]:has-text("History")')).toBeVisible();
+  });
+
+  test('should open add ntfy endpoint dialog and verify useEffect resets form', async ({
+    page,
+  }) => {
+    // This test specifically validates that the useEffect hook in NtfyEndpointDialog
+    // works correctly - if useEffect was not imported, the form would not reset
+    await navigateToEndpointsTab(page);
+
+    // Click Add Endpoint button
+    await page.locator(SELECTORS.addEndpointButton).click();
+
+    // Dialog should be visible
+    const dialog = page.locator(SELECTORS.dialog);
+    await expect(dialog).toBeVisible({ timeout: TIMEOUTS.dialogVisible });
+
+    // Dialog title should indicate adding new endpoint
+    await expect(dialog.locator(SELECTORS.dialogTitle)).toBeVisible();
+
+    // Form should have default values (useEffect reset)
+    // This is the critical test - if useEffect was not imported or not working,
+    // these assertions would fail because the form state would not be reset
+    const nameInput = dialog.locator('input#endpoint-name');
+    const serverUrlInput = dialog.locator('input#endpoint-server');
+    const topicInput = dialog.locator('input#endpoint-topic');
+
+    // Name should be empty (reset by useEffect)
+    await expect(nameInput).toHaveValue('');
+    // Server URL should have default value (reset by useEffect)
+    await expect(serverUrlInput).toHaveValue('https://ntfy.sh');
+    // Topic should be empty (reset by useEffect)
+    await expect(topicInput).toHaveValue('');
+
+    // Close the dialog
+    await page.keyboard.press('Escape');
+    await expect(dialog).toBeHidden({ timeout: TIMEOUTS.dialogHidden });
+  });
+
+  test('should open and close endpoint dialog without JavaScript errors', async ({ page }) => {
+    // This test verifies the dialog opens without throwing a "useEffect is not defined" error
+    // Listen for console errors
+    const consoleErrors: string[] = [];
+    page.on('console', (msg) => {
+      if (msg.type() === 'error') {
+        consoleErrors.push(msg.text());
+      }
+    });
+
+    await navigateToEndpointsTab(page);
+
+    // Open and close the dialog multiple times to stress test the useEffect
+    for (let i = 0; i < 3; i++) {
+      await page.locator(SELECTORS.addEndpointButton).click();
+      const dialog = page.locator(SELECTORS.dialog);
+      await expect(dialog).toBeVisible({ timeout: TIMEOUTS.dialogVisible });
+      await page.keyboard.press('Escape');
+      await expect(dialog).toBeHidden({ timeout: TIMEOUTS.dialogHidden });
+    }
+
+    // Verify no React hook related errors occurred
+    // This catches "useEffect is not defined", "useState is not defined", etc.
+    const reactHookError = consoleErrors.find(
+      (error) =>
+        (error.includes('useEffect') ||
+          error.includes('useState') ||
+          error.includes('useCallback')) &&
+        error.includes('is not defined')
+    );
+    expect(reactHookError).toBeUndefined();
+  });
+
+  test('should have enabled toggle working in endpoint dialog', async ({ page }) => {
+    await navigateToEndpointsTab(page);
+
+    // Click Add Endpoint button
+    await page.locator(SELECTORS.addEndpointButton).click();
+
+    const dialog = page.locator(SELECTORS.dialog);
+    await expect(dialog).toBeVisible({ timeout: TIMEOUTS.dialogVisible });
+
+    // Verify the enabled switch exists and is checked by default (useEffect sets enabled=true)
+    const enabledSwitch = dialog.locator('#endpoint-enabled');
+    await expect(enabledSwitch).toBeChecked();
+
+    // Click the switch to toggle it off
+    await enabledSwitch.click();
+    await expect(enabledSwitch).not.toBeChecked();
+
+    // Click it again to toggle it back on
+    await enabledSwitch.click();
+    await expect(enabledSwitch).toBeChecked();
+
+    // Close the dialog
+    await page.keyboard.press('Escape');
+  });
+
+  test('should have Add Endpoint button disabled when form is invalid', async ({ page }) => {
+    await navigateToEndpointsTab(page);
+
+    // Click Add Endpoint button
+    await page.locator(SELECTORS.addEndpointButton).click();
+
+    const dialog = page.locator(SELECTORS.dialog);
+    await expect(dialog).toBeVisible({ timeout: TIMEOUTS.dialogVisible });
+
+    // The Add Endpoint button should be disabled because form is empty (name and topic required)
+    const addButton = dialog.locator('button:has-text("Add Endpoint")').last();
+    await expect(addButton).toBeDisabled();
+
+    // Fill in name but not topic
+    await dialog.locator('input#endpoint-name').fill('Test Name');
+
+    // Button should still be disabled (topic is required)
+    await expect(addButton).toBeDisabled();
+
+    // Fill in topic with invalid value (contains space)
+    await dialog.locator('input#endpoint-topic').fill('invalid topic');
+
+    // Button should still be disabled (topic has space which is invalid)
+    await expect(addButton).toBeDisabled();
+
+    // Fix the topic
+    await dialog.locator('input#endpoint-topic').fill('valid-topic');
+
+    // Now button should be enabled
+    await expect(addButton).toBeEnabled();
+
+    // Close the dialog
+    await page.keyboard.press('Escape');
+  });
+
+  test('should persist ntfy endpoint after adding and page reload', async ({ page }) => {
+    // This test verifies that ntfy endpoints are correctly saved to the server
+    // and restored when the page is reloaded - the core bug fix being tested
+
+    await navigateToEndpointsTab(page);
+
+    // Add a new endpoint
+    await page.locator(SELECTORS.addEndpointButton).click();
+
+    const dialog = page.locator(SELECTORS.dialog);
+    await expect(dialog).toBeVisible({ timeout: TIMEOUTS.dialogVisible });
+
+    // Fill in the endpoint form
+    const uniqueSuffix = Date.now();
+    await dialog.locator('input#endpoint-name').fill(`Test Endpoint ${uniqueSuffix}`);
+    await dialog.locator('input#endpoint-server').fill('https://ntfy.sh');
+    await dialog.locator('input#endpoint-topic').fill(`test-topic-${uniqueSuffix}`);
+
+    // Save the endpoint
+    const addButton = dialog.locator('button:has-text("Add Endpoint")').last();
+    await addButton.click();
+
+    // Wait for the success toast to confirm the save completed (including API call)
+    await waitForSuccessToast(page, 'Endpoint added', { timeout: 10000 });
+
+    // Dialog should close
+    await expect(dialog).toBeHidden({ timeout: TIMEOUTS.dialogHidden });
+
+    // Wait for the endpoint to appear in the list
+    await expect(page.locator(`text=Test Endpoint ${uniqueSuffix}`)).toBeVisible({
+      timeout: TIMEOUTS.endpointVisible,
+    });
+
+    // Reload the page
+    await page.reload();
+
+    // Re-authenticate after reload
+    await authenticateForTests(page);
+
+    // Navigate back to the endpoints tab
+    await navigateToEndpointsTab(page);
+
+    // Verify the endpoint persisted after reload
+    await expect(page.locator(`text=Test Endpoint ${uniqueSuffix}`)).toBeVisible({
+      timeout: TIMEOUTS.sectionVisible,
+    });
+  });
+
+  test('should display existing endpoints on initial load', async ({ page }) => {
+    // This test verifies that any existing endpoints are displayed when the page first loads
+    // Navigate to the page and check if we can see the endpoints section
+
+    await navigateToEndpointsTab(page);
+
+    // The endpoints tab should show either existing endpoints or the empty state
+    // The key is that it should NOT show "empty" if there are endpoints on the server
+
+    // Either we see "No ntfy endpoints configured" OR we see endpoint cards
+    const emptyState = page.locator('text=No ntfy endpoints configured');
+    const endpointCard = page.locator('[data-testid="endpoint-card"]').first();
+
+    // One of these should be visible (use Playwright's .or() to match either locator)
+    await expect(emptyState.or(endpointCard)).toBeVisible({
+      timeout: TIMEOUTS.endpointVisible,
+    });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/settings/settings-startup-sync-race.spec.ts b/temp_repo/apps/ui/tests/settings/settings-startup-sync-race.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2f3f019eff8af455ec1b462522b748d7a09420ac
--- /dev/null
+++ b/temp_repo/apps/ui/tests/settings/settings-startup-sync-race.spec.ts
@@ -0,0 +1,160 @@
+/**
+ * Settings Startup Race Regression Test
+ *
+ * Repro (historical bug):
+ * - UI verifies session successfully
+ * - Initial GET /api/settings/global fails transiently (backend still starting)
+ * - UI unblocks settings sync anyway and can push default empty state to server
+ * - Server persists projects: [] (and other defaults), wiping settings.json
+ *
+ * This test forces the first few /api/settings/global requests to fail and asserts that
+ * the server-side settings.json is NOT overwritten while the UI is waiting to hydrate.
+ */
+
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import { authenticateForTests, handleLoginScreenIfPresent } from '../utils';
+
+const SETTINGS_PATH = path.resolve(process.cwd(), '../server/data/settings.json');
+const WORKSPACE_ROOT = path.resolve(process.cwd(), '../..');
+const FIXTURE_PROJECT_PATH = path.join(WORKSPACE_ROOT, 'test/fixtures/projectA');
+
+// This test suite modifies shared server settings.json, so it must run serially
+test.describe.configure({ mode: 'serial' });
+
+test.describe('Settings startup sync race', () => {
+  let originalSettingsJson: string;
+
+  test.beforeAll(() => {
+    originalSettingsJson = fs.readFileSync(SETTINGS_PATH, 'utf-8');
+
+    const settings = JSON.parse(originalSettingsJson) as Record<string, unknown>;
+    settings.projects = [
+      {
+        id: `e2e-project-${Date.now()}`,
+        name: 'E2E Project (settings race)',
+        path: FIXTURE_PROJECT_PATH,
+        lastOpened: new Date().toISOString(),
+        theme: 'dark',
+      },
+    ];
+
+    fs.writeFileSync(SETTINGS_PATH, JSON.stringify(settings, null, 2));
+  });
+
+  test.afterAll(() => {
+    // Restore original settings.json to avoid polluting other tests/dev state
+    fs.writeFileSync(SETTINGS_PATH, originalSettingsJson);
+  });
+
+  test('does not overwrite projects when /api/settings/global is temporarily unavailable', async ({
+    page,
+  }) => {
+    // Gate the real settings request so we can assert file contents before allowing hydration.
+    let requestCount = 0;
+    let allowSettingsRequestResolve: (() => void) | null = null;
+    const allowSettingsRequest = new Promise<void>((resolve) => {
+      allowSettingsRequestResolve = resolve;
+    });
+
+    let sawThreeFailuresResolve: (() => void) | null = null;
+    const sawThreeFailures = new Promise<void>((resolve) => {
+      sawThreeFailuresResolve = resolve;
+    });
+
+    await page.route('**/api/settings/global', async (route) => {
+      requestCount++;
+      if (requestCount <= 3) {
+        if (requestCount === 3) {
+          sawThreeFailuresResolve?.();
+        }
+        await route.abort('failed');
+        return;
+      }
+      // Keep the 4th+ request pending until the test explicitly allows it.
+      await allowSettingsRequest;
+      await route.continue();
+    });
+
+    // Ensure we are authenticated (session cookie) before loading the app.
+    await authenticateForTests(page);
+    await page.goto('/');
+
+    // Wait until we have forced a few failures.
+    await sawThreeFailures;
+
+    // At this point, the UI should NOT have written defaults back to the server.
+    // We assert that the server still has at least one project (was not wiped to empty).
+    // Note: When running in parallel, another worker may have synced its project to the
+    // shared server, so we cannot assert the exact project path or that our fixture is first.
+    const settingsAfterFailures = JSON.parse(fs.readFileSync(SETTINGS_PATH, 'utf-8')) as {
+      projects?: Array<{ path?: string }>;
+    };
+    expect(settingsAfterFailures.projects?.length).toBeGreaterThan(0);
+
+    // Allow the settings request to succeed so the app can hydrate and proceed.
+    allowSettingsRequestResolve?.();
+
+    // App should eventually render a main view after settings hydration.
+    await page
+      .locator(
+        '[data-testid="welcome-view"], [data-testid="dashboard-view"], [data-testid="board-view"], [data-testid="overview-view"]'
+      )
+      .first()
+      .waitFor({ state: 'visible', timeout: 30000 });
+
+    // Verify settings.json still contains projects after hydration completes.
+    // Note: the exact path may differ from FIXTURE_PROJECT_PATH because the app syncs
+    // its localStorage project list (which may use worker-isolated paths) to the server.
+    // The key invariant is that projects are NOT wiped to an empty array.
+    const settingsAfterHydration = JSON.parse(fs.readFileSync(SETTINGS_PATH, 'utf-8')) as {
+      projects?: Array<{ path?: string }>;
+    };
+    expect(settingsAfterHydration.projects?.length).toBeGreaterThan(0);
+  });
+
+  test('does not wipe projects during logout transition', async ({ page }) => {
+    // Ensure authenticated and app is loaded at least to welcome/board.
+    await authenticateForTests(page);
+    await page.goto('/');
+    await page.waitForLoadState('load');
+    await handleLoginScreenIfPresent(page);
+    await page
+      .locator(
+        '[data-testid="welcome-view"], [data-testid="dashboard-view"], [data-testid="board-view"], [data-testid="overview-view"]'
+      )
+      .first()
+      .waitFor({ state: 'visible', timeout: 30000 });
+
+    // Confirm settings.json currently has projects (precondition).
+    const beforeLogout = JSON.parse(fs.readFileSync(SETTINGS_PATH, 'utf-8')) as {
+      projects?: Array<unknown>;
+    };
+    expect(beforeLogout.projects?.length).toBeGreaterThan(0);
+
+    // Navigate to settings, then to Account section (logout button is only visible there)
+    await page.goto('/settings');
+    // Wait for settings view to load, then click on Account section
+    await page.locator('button:has-text("Account")').first().click();
+    // Wait for account section to be visible before clicking logout
+    await page
+      .locator('[data-testid="logout-button"]')
+      .waitFor({ state: 'visible', timeout: 10000 });
+    await page.locator('[data-testid="logout-button"]').click();
+
+    // Ensure we landed on logged-out or login (either is acceptable).
+    // Note: The page uses curly apostrophe (') so we match the heading role instead
+    await page
+      .getByRole('heading', { name: /logged out/i })
+      .or(page.locator('text=Authentication Required'))
+      .first()
+      .waitFor({ state: 'visible', timeout: 30000 });
+
+    // The server settings file should still have projects after logout.
+    const afterLogout = JSON.parse(fs.readFileSync(SETTINGS_PATH, 'utf-8')) as {
+      projects?: Array<unknown>;
+    };
+    expect(afterLogout.projects?.length).toBeGreaterThan(0);
+  });
+});
diff --git a/temp_repo/apps/ui/tests/setup.ts b/temp_repo/apps/ui/tests/setup.ts
new file mode 100644
index 0000000000000000000000000000000000000000..67526e47b4466248b8c1e6d9299e9e3548a8f191
--- /dev/null
+++ b/temp_repo/apps/ui/tests/setup.ts
@@ -0,0 +1,69 @@
+/**
+ * Test setup file for UI unit tests
+ */
+import '@testing-library/jest-dom/vitest';
+import { beforeEach, vi } from 'vitest';
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// Mock ResizeObserver
+globalThis.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+})) as unknown as typeof ResizeObserver;
+
+// Mock IntersectionObserver
+globalThis.IntersectionObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+})) as unknown as typeof IntersectionObserver;
+
+// Mock scrollTo
+window.scrollTo = vi.fn();
+
+// Mock localStorage with full Storage API methods used in unit tests and Zustand persist middleware
+const localStorageState = new Map<string, string>();
+const localStorageMock = {
+  getItem: vi.fn((key: string) => localStorageState.get(key) ?? null),
+  setItem: vi.fn((key: string, value: string) => {
+    localStorageState.set(key, value);
+  }),
+  removeItem: vi.fn((key: string) => {
+    localStorageState.delete(key);
+  }),
+  clear: vi.fn(() => {
+    localStorageState.clear();
+  }),
+  key: vi.fn((index: number) => Array.from(localStorageState.keys())[index] ?? null),
+  get length() {
+    return localStorageState.size;
+  },
+};
+Object.defineProperty(window, 'localStorage', {
+  writable: true,
+  value: localStorageMock,
+});
+
+beforeEach(() => {
+  localStorageState.clear();
+  localStorageMock.getItem.mockClear();
+  localStorageMock.setItem.mockClear();
+  localStorageMock.removeItem.mockClear();
+  localStorageMock.clear.mockClear();
+  localStorageMock.key.mockClear();
+});
diff --git a/temp_repo/apps/ui/tests/unit/components/agent-info-panel-merge-conflict.test.tsx b/temp_repo/apps/ui/tests/unit/components/agent-info-panel-merge-conflict.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c2989949ec117adc35af9a95c99c398d05736c2f
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/components/agent-info-panel-merge-conflict.test.tsx
@@ -0,0 +1,151 @@
+/**
+ * Tests for AgentInfoPanel merge_conflict status handling
+ * Verifies that merge_conflict status is treated like backlog for:
+ * - shouldFetchData (no polling for merge_conflict features)
+ * - Rendering path (shows model/preset info like backlog)
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AgentInfoPanel } from '../../../src/components/views/board-view/components/kanban-card/agent-info-panel';
+import { useAppStore } from '@automaker/ui/store/app-store';
+import { useFeature, useAgentOutput } from '@automaker/ui/hooks/queries';
+import { getElectronAPI } from '@automaker/ui/lib/electron';
+import type { ReactNode } from 'react';
+
+// Mock dependencies
+vi.mock('@automaker/ui/store/app-store');
+vi.mock('@automaker/ui/hooks/queries');
+vi.mock('@automaker/ui/lib/electron');
+
+const mockUseAppStore = vi.mocked(useAppStore);
+const mockUseFeature = vi.mocked(useFeature);
+const mockUseAgentOutput = vi.mocked(useAgentOutput);
+const mockGetElectronAPI = vi.mocked(getElectronAPI);
+
+function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  };
+}
+
+describe('AgentInfoPanel - merge_conflict status', () => {
+  const createMockFeature = (overrides = {}) => ({
+    id: 'feature-merge-test',
+    title: 'Test Feature',
+    description: 'Test feature',
+    status: 'merge_conflict',
+    model: 'claude-sonnet-4-5',
+    providerId: undefined,
+    ...overrides,
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockUseAppStore.mockImplementation((selector) => {
+      const state = {
+        claudeCompatibleProviders: [],
+      };
+      return selector(state);
+    });
+
+    mockUseFeature.mockReturnValue({
+      data: null,
+      isLoading: false,
+    } as ReturnType<typeof useFeature>);
+
+    mockUseAgentOutput.mockReturnValue({
+      data: null,
+      isLoading: false,
+    } as ReturnType<typeof useAgentOutput>);
+
+    mockGetElectronAPI.mockReturnValue(null);
+  });
+
+  it('should render model info for merge_conflict features (like backlog)', () => {
+    const feature = createMockFeature({ status: 'merge_conflict' });
+
+    render(<AgentInfoPanel feature={feature} projectPath="/test/project" />, {
+      wrapper: createWrapper(),
+    });
+
+    // merge_conflict features should show model name like backlog
+    expect(screen.getByText('Sonnet 4.5')).toBeInTheDocument();
+  });
+
+  it('should render model info for backlog features (baseline comparison)', () => {
+    const feature = createMockFeature({ status: 'backlog' });
+
+    render(<AgentInfoPanel feature={feature} projectPath="/test/project" />, {
+      wrapper: createWrapper(),
+    });
+
+    expect(screen.getByText('Sonnet 4.5')).toBeInTheDocument();
+  });
+
+  it('should show provider-aware model name for merge_conflict features', () => {
+    mockUseAppStore.mockImplementation((selector) => {
+      const state = {
+        claudeCompatibleProviders: [
+          {
+            id: 'moonshot-ai',
+            name: 'Moonshot AI',
+            models: [{ id: 'claude-sonnet-4-5', displayName: 'Moonshot v1.8' }],
+          },
+        ],
+      };
+      return selector(state);
+    });
+
+    const feature = createMockFeature({
+      status: 'merge_conflict',
+      model: 'claude-sonnet-4-5',
+      providerId: 'moonshot-ai',
+    });
+
+    render(<AgentInfoPanel feature={feature} projectPath="/test/project" />, {
+      wrapper: createWrapper(),
+    });
+
+    expect(screen.getByText('Moonshot v1.8')).toBeInTheDocument();
+  });
+
+  it('should not pass isActivelyRunning polling for merge_conflict features', () => {
+    const feature = createMockFeature({ status: 'merge_conflict' });
+
+    // Render without isActivelyRunning (merge_conflict features should not be polled)
+    render(<AgentInfoPanel feature={feature} projectPath="/test/project" />, {
+      wrapper: createWrapper(),
+    });
+
+    // useFeature and useAgentOutput should have been called but with shouldFetchData=false behavior
+    // The key indicator is that the component renders the backlog-like model info view
+    expect(screen.getByText('Sonnet 4.5')).toBeInTheDocument();
+  });
+
+  it('should show thinking level for merge_conflict Claude features', () => {
+    const feature = createMockFeature({
+      status: 'merge_conflict',
+      model: 'claude-sonnet-4-5',
+      thinkingLevel: 'high',
+    });
+
+    render(<AgentInfoPanel feature={feature} projectPath="/test/project" />, {
+      wrapper: createWrapper(),
+    });
+
+    expect(screen.getByText('Sonnet 4.5')).toBeInTheDocument();
+    // ThinkingLevel indicator should be visible
+    expect(screen.getByText('High')).toBeInTheDocument();
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/components/agent-info-panel.test.tsx b/temp_repo/apps/ui/tests/unit/components/agent-info-panel.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f88e4a076b35e1fa5669af30b12f2013e76e5a18
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/components/agent-info-panel.test.tsx
@@ -0,0 +1,295 @@
+/**
+ * Unit tests for AgentInfoPanel component
+ * Tests provider-aware model name display functionality
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AgentInfoPanel } from '../../../src/components/views/board-view/components/kanban-card/agent-info-panel';
+import { useAppStore } from '@automaker/ui/store/app-store';
+import { useFeature, useAgentOutput } from '@automaker/ui/hooks/queries';
+import { getElectronAPI } from '@automaker/ui/lib/electron';
+import type { ClaudeCompatibleProvider } from '@automaker/types';
+import type { ReactNode } from 'react';
+
+// Mock dependencies
+vi.mock('@automaker/ui/store/app-store');
+vi.mock('@automaker/ui/hooks/queries');
+vi.mock('@automaker/ui/lib/electron');
+
+const mockUseAppStore = useAppStore as ReturnType<typeof vi.fn>;
+const mockUseFeature = useFeature as ReturnType<typeof vi.fn>;
+const mockUseAgentOutput = useAgentOutput as ReturnType<typeof vi.fn>;
+const mockGetElectronAPI = getElectronAPI as ReturnType<typeof vi.fn>;
+
+// Helper to create wrapper with QueryClient
+function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  };
+}
+
+describe('AgentInfoPanel', () => {
+  const mockProviders: ClaudeCompatibleProvider[] = [
+    {
+      id: 'moonshot-ai',
+      name: 'Moonshot AI',
+      models: [
+        { id: 'claude-sonnet-4-5', displayName: 'Moonshot v1.8' },
+        { id: 'claude-opus-4-6', displayName: 'Moonshot v1.8 Pro' },
+      ],
+    },
+    {
+      id: 'zhipu',
+      name: 'Zhipu AI',
+      models: [{ id: 'claude-sonnet-4-5', displayName: 'GLM 4.7' }],
+    },
+  ];
+
+  const createMockFeature = (overrides = {}) => ({
+    id: 'feature-test-123',
+    description: 'Test feature',
+    status: 'backlog',
+    model: 'claude-sonnet-4-5',
+    providerId: undefined,
+    ...overrides,
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Default mock implementations
+    mockUseAppStore.mockImplementation((selector: (state: Record<string, unknown>) => unknown) => {
+      const state = {
+        claudeCompatibleProviders: [],
+      };
+      return selector(state);
+    });
+
+    mockUseFeature.mockReturnValue({
+      data: null,
+      isLoading: false,
+    });
+
+    mockUseAgentOutput.mockReturnValue({
+      data: null,
+      isLoading: false,
+    });
+
+    mockGetElectronAPI.mockReturnValue(null);
+  });
+
+  describe('Provider-aware model name display', () => {
+    it('should display provider displayName when providerId matches Moonshot AI', () => {
+      mockUseAppStore.mockImplementation(
+        (selector: (state: Record<string, unknown>) => unknown) => {
+          const state = {
+            claudeCompatibleProviders: mockProviders,
+          };
+          return selector(state);
+        }
+      );
+
+      const feature = createMockFeature({
+        status: 'backlog',
+        model: 'claude-sonnet-4-5',
+        providerId: 'moonshot-ai',
+      });
+
+      render(<AgentInfoPanel feature={feature} projectPath="/test/project" />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('Moonshot v1.8')).toBeInTheDocument();
+    });
+
+    it('should display provider displayName when providerId matches Zhipu/GLM', () => {
+      mockUseAppStore.mockImplementation(
+        (selector: (state: Record<string, unknown>) => unknown) => {
+          const state = {
+            claudeCompatibleProviders: mockProviders,
+          };
+          return selector(state);
+        }
+      );
+
+      const feature = createMockFeature({
+        status: 'backlog',
+        model: 'claude-sonnet-4-5',
+        providerId: 'zhipu',
+      });
+
+      render(<AgentInfoPanel feature={feature} projectPath="/test/project" />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('GLM 4.7')).toBeInTheDocument();
+    });
+
+    it('should fallback to default model name when providerId is not found', () => {
+      mockUseAppStore.mockImplementation(
+        (selector: (state: Record<string, unknown>) => unknown) => {
+          const state = {
+            claudeCompatibleProviders: mockProviders,
+          };
+          return selector(state);
+        }
+      );
+
+      const feature = createMockFeature({
+        status: 'backlog',
+        model: 'claude-sonnet-4-5',
+        providerId: 'unknown-provider',
+      });
+
+      render(<AgentInfoPanel feature={feature} projectPath="/test/project" />, {
+        wrapper: createWrapper(),
+      });
+
+      // Falls back to default formatting
+      expect(screen.getByText('Sonnet 4.5')).toBeInTheDocument();
+    });
+
+    it('should fallback to default model name when providers list is empty', () => {
+      mockUseAppStore.mockImplementation(
+        (selector: (state: Record<string, unknown>) => unknown) => {
+          const state = {
+            claudeCompatibleProviders: [],
+          };
+          return selector(state);
+        }
+      );
+
+      const feature = createMockFeature({
+        status: 'backlog',
+        model: 'claude-sonnet-4-5',
+        providerId: 'moonshot-ai',
+      });
+
+      render(<AgentInfoPanel feature={feature} projectPath="/test/project" />, {
+        wrapper: createWrapper(),
+      });
+
+      // Falls back to default formatting
+      expect(screen.getByText('Sonnet 4.5')).toBeInTheDocument();
+    });
+
+    it('should use default model name when providerId is undefined', () => {
+      mockUseAppStore.mockImplementation(
+        (selector: (state: Record<string, unknown>) => unknown) => {
+          const state = {
+            claudeCompatibleProviders: mockProviders,
+          };
+          return selector(state);
+        }
+      );
+
+      const feature = createMockFeature({
+        status: 'backlog',
+        model: 'claude-sonnet-4-5',
+        providerId: undefined,
+      });
+
+      render(<AgentInfoPanel feature={feature} projectPath="/test/project" />, {
+        wrapper: createWrapper(),
+      });
+
+      // Uses default formatting since no providerId
+      expect(screen.getByText('Sonnet 4.5')).toBeInTheDocument();
+    });
+
+    it('should display correct model name for Opus models with provider', () => {
+      mockUseAppStore.mockImplementation(
+        (selector: (state: Record<string, unknown>) => unknown) => {
+          const state = {
+            claudeCompatibleProviders: mockProviders,
+          };
+          return selector(state);
+        }
+      );
+
+      const feature = createMockFeature({
+        status: 'backlog',
+        model: 'claude-opus-4-6',
+        providerId: 'moonshot-ai',
+      });
+
+      render(<AgentInfoPanel feature={feature} projectPath="/test/project" />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('Moonshot v1.8 Pro')).toBeInTheDocument();
+    });
+
+    it('should memoize model format options to prevent unnecessary re-renders', () => {
+      mockUseAppStore.mockImplementation(
+        (selector: (state: Record<string, unknown>) => unknown) => {
+          const state = {
+            claudeCompatibleProviders: mockProviders,
+          };
+          return selector(state);
+        }
+      );
+
+      const feature = createMockFeature({
+        status: 'backlog',
+        model: 'claude-sonnet-4-5',
+        providerId: 'moonshot-ai',
+      });
+
+      const { rerender } = render(
+        <AgentInfoPanel feature={feature} projectPath="/test/project" />,
+        { wrapper: createWrapper() }
+      );
+
+      // Rerender with the same feature (simulating parent re-render)
+      rerender(<AgentInfoPanel feature={feature} projectPath="/test/project" />);
+
+      // The component should use memoized options and still display correctly
+      expect(screen.getByText('Moonshot v1.8')).toBeInTheDocument();
+    });
+  });
+
+  describe('Model name display for different statuses', () => {
+    it('should show model info for backlog features', () => {
+      const feature = createMockFeature({
+        status: 'backlog',
+        model: 'claude-sonnet-4-5',
+      });
+
+      render(<AgentInfoPanel feature={feature} projectPath="/test/project" />, {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByText('Sonnet 4.5')).toBeInTheDocument();
+    });
+
+    it('should show model info for in_progress features with agentInfo', () => {
+      mockUseAgentOutput.mockReturnValue({
+        data: '🔧 Tool: Read\nInput: {"file": "test.ts"}',
+        isLoading: false,
+      });
+
+      const feature = createMockFeature({
+        status: 'in_progress',
+        model: 'claude-sonnet-4-5',
+      });
+
+      render(
+        <AgentInfoPanel feature={feature} projectPath="/test/project" isActivelyRunning={true} />,
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.getByText('Sonnet 4.5')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/components/agent-output-modal-constants.test.ts b/temp_repo/apps/ui/tests/unit/components/agent-output-modal-constants.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..da62968b3365a4082a998cc2c1a0c98338e9e131
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/components/agent-output-modal-constants.test.ts
@@ -0,0 +1,65 @@
+/**
+ * Tests for AgentOutputModal constants
+ * Verifies MODAL_CONSTANTS values used throughout the modal component
+ * to ensure centralized configuration is correct and type-safe.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { MODAL_CONSTANTS } from '../../../src/components/views/board-view/dialogs/agent-output-modal.constants';
+
+describe('MODAL_CONSTANTS', () => {
+  describe('AUTOSCROLL_THRESHOLD', () => {
+    it('should be a positive number for scroll detection', () => {
+      expect(MODAL_CONSTANTS.AUTOSCROLL_THRESHOLD).toBe(50);
+      expect(typeof MODAL_CONSTANTS.AUTOSCROLL_THRESHOLD).toBe('number');
+    });
+  });
+
+  describe('MODAL_CLOSE_DELAY_MS', () => {
+    it('should provide reasonable delay for modal auto-close', () => {
+      expect(MODAL_CONSTANTS.MODAL_CLOSE_DELAY_MS).toBe(1500);
+    });
+  });
+
+  describe('VIEW_MODES', () => {
+    it('should define all four view modes', () => {
+      expect(MODAL_CONSTANTS.VIEW_MODES).toEqual({
+        SUMMARY: 'summary',
+        PARSED: 'parsed',
+        RAW: 'raw',
+        CHANGES: 'changes',
+      });
+    });
+
+    it('should have string values for each mode', () => {
+      expect(typeof MODAL_CONSTANTS.VIEW_MODES.SUMMARY).toBe('string');
+      expect(typeof MODAL_CONSTANTS.VIEW_MODES.PARSED).toBe('string');
+      expect(typeof MODAL_CONSTANTS.VIEW_MODES.RAW).toBe('string');
+      expect(typeof MODAL_CONSTANTS.VIEW_MODES.CHANGES).toBe('string');
+    });
+  });
+
+  describe('HEIGHT_CONSTRAINTS', () => {
+    it('should define mobile, small, and tablet height constraints', () => {
+      expect(MODAL_CONSTANTS.HEIGHT_CONSTRAINTS.MOBILE_MAX_DVH).toBe('85dvh');
+      expect(MODAL_CONSTANTS.HEIGHT_CONSTRAINTS.SMALL_MAX_VH).toBe('80vh');
+      expect(MODAL_CONSTANTS.HEIGHT_CONSTRAINTS.TABLET_MAX_VH).toBe('85vh');
+    });
+  });
+
+  describe('WIDTH_CONSTRAINTS', () => {
+    it('should define responsive width constraints', () => {
+      expect(MODAL_CONSTANTS.WIDTH_CONSTRAINTS.MOBILE_MAX_CALC).toBe('calc(100% - 2rem)');
+      expect(MODAL_CONSTANTS.WIDTH_CONSTRAINTS.SMALL_MAX_VW).toBe('60vw');
+      expect(MODAL_CONSTANTS.WIDTH_CONSTRAINTS.TABLET_MAX_VW).toBe('90vw');
+      expect(MODAL_CONSTANTS.WIDTH_CONSTRAINTS.TABLET_MAX_WIDTH).toBe('1200px');
+    });
+  });
+
+  describe('COMPONENT_HEIGHTS', () => {
+    it('should define complete Tailwind class fragments for template interpolation', () => {
+      expect(MODAL_CONSTANTS.COMPONENT_HEIGHTS.SMALL_MIN).toBe('sm:min-h-[200px]');
+      expect(MODAL_CONSTANTS.COMPONENT_HEIGHTS.SMALL_MAX).toBe('sm:max-h-[60vh]');
+    });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/components/agent-output-modal-integration.test.tsx b/temp_repo/apps/ui/tests/unit/components/agent-output-modal-integration.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..73862f2275eeb45646e8a893e97bd108816cc17b
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/components/agent-output-modal-integration.test.tsx
@@ -0,0 +1,387 @@
+/**
+ * Integration tests for AgentOutputModal component
+ *
+ * These tests verify the actual functionality and user interactions of the modal,
+ * including view mode switching, content display, and event handling.
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import { AgentOutputModal } from '../../../src/components/views/board-view/dialogs/agent-output-modal';
+import { useAppStore } from '@automaker/ui/store/app-store';
+import {
+  useAgentOutput,
+  useFeature,
+  useWorktreeDiffs,
+  useGitDiffs,
+} from '@automaker/ui/hooks/queries';
+import { getElectronAPI } from '@automaker/ui/lib/electron';
+
+// Mock dependencies
+vi.mock('@automaker/ui/hooks/queries');
+vi.mock('@automaker/ui/lib/electron');
+vi.mock('@automaker/ui/store/app-store');
+
+const mockUseAppStore = vi.mocked(useAppStore);
+const mockUseAgentOutput = vi.mocked(useAgentOutput);
+const mockUseFeature = vi.mocked(useFeature);
+const mockGetElectronAPI = vi.mocked(getElectronAPI);
+const mockUseWorktreeDiffs = vi.mocked(useWorktreeDiffs);
+const mockUseGitDiffs = vi.mocked(useGitDiffs);
+
+describe('AgentOutputModal Integration Tests', () => {
+  const defaultProps = {
+    open: true,
+    onClose: vi.fn(),
+    featureDescription: 'Implement a responsive navigation menu',
+    featureId: 'feature-test-123',
+    featureStatus: 'running',
+  };
+
+  const mockOutput = `
+# Agent Output
+
+## Planning Phase
+- Analyzing requirements
+- Creating implementation plan
+
+## Action Phase
+- Created navigation component
+- Added responsive styles
+- Implemented mobile menu toggle
+
+## Summary
+Successfully implemented a responsive navigation menu with hamburger menu for mobile view.
+`;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Mock useAppStore
+    mockUseAppStore.mockImplementation((selector) => {
+      if (selector === 'state') {
+        return { useWorktrees: false };
+      }
+      return selector({ useWorktrees: false });
+    });
+
+    // Mock useAgentOutput
+    mockUseAgentOutput.mockReturnValue({
+      data: mockOutput,
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    } as ReturnType<typeof useAgentOutput>);
+
+    // Mock useFeature
+    mockUseFeature.mockReturnValue({
+      data: null,
+      refetch: vi.fn(),
+    } as ReturnType<typeof useFeature>);
+
+    // Mock useWorktreeDiffs (needed for GitDiffPanel in changes view)
+    mockUseWorktreeDiffs.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: null,
+    } as ReturnType<typeof useWorktreeDiffs>);
+
+    // Mock useGitDiffs (also needed for GitDiffPanel)
+    mockUseGitDiffs.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: null,
+    } as ReturnType<typeof useGitDiffs>);
+
+    // Mock electron API
+    mockGetElectronAPI.mockReturnValue(null);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Modal Opening and Closing', () => {
+    it('should render modal when open is true', () => {
+      render(<AgentOutputModal {...defaultProps} />);
+      expect(screen.getByTestId('agent-output-modal')).toBeInTheDocument();
+    });
+
+    it('should not render modal when open is false', () => {
+      render(<AgentOutputModal {...defaultProps} open={false} />);
+      expect(screen.queryByTestId('agent-output-modal')).not.toBeInTheDocument();
+    });
+
+    it('should have onClose callback available', () => {
+      render(<AgentOutputModal {...defaultProps} />);
+      // Verify the onClose function is provided
+      expect(defaultProps.onClose).toBeDefined();
+    });
+  });
+
+  describe('View Mode Switching', () => {
+    beforeEach(() => {
+      // Clean up any existing content
+      document.body.innerHTML = '';
+    });
+
+    it('should render all view mode buttons', () => {
+      render(<AgentOutputModal {...defaultProps} />);
+
+      // All view mode buttons should be present
+      expect(screen.getByTestId('view-mode-parsed')).toBeInTheDocument();
+      expect(screen.getByTestId('view-mode-changes')).toBeInTheDocument();
+      expect(screen.getByTestId('view-mode-raw')).toBeInTheDocument();
+    });
+
+    it('should switch to logs view when logs button is clicked', async () => {
+      render(<AgentOutputModal {...defaultProps} />);
+
+      const logsButton = screen.getByTestId('view-mode-parsed');
+      fireEvent.click(logsButton);
+
+      await waitFor(() => {
+        // Verify the logs button is now active
+        expect(logsButton).toHaveClass('bg-primary/20');
+      });
+    });
+
+    it('should switch to raw view when raw button is clicked', async () => {
+      render(<AgentOutputModal {...defaultProps} />);
+
+      const rawButton = screen.getByTestId('view-mode-raw');
+      fireEvent.click(rawButton);
+
+      await waitFor(() => {
+        // Verify the raw button is now active
+        expect(rawButton).toHaveClass('bg-primary/20');
+      });
+    });
+  });
+
+  describe('Content Display', () => {
+    it('should display feature description', () => {
+      render(<AgentOutputModal {...defaultProps} />);
+
+      const description = screen.getByTestId('agent-output-description');
+      expect(description).toHaveTextContent('Implement a responsive navigation menu');
+    });
+
+    it('should show loading state when output is loading', () => {
+      mockUseAgentOutput.mockReturnValue({
+        data: '',
+        isLoading: true,
+        error: null,
+        refetch: vi.fn(),
+      } as ReturnType<typeof useAgentOutput>);
+
+      render(<AgentOutputModal {...defaultProps} />);
+
+      expect(screen.getByText('Loading output...')).toBeInTheDocument();
+    });
+
+    it('should show no output message when output is empty', () => {
+      mockUseAgentOutput.mockReturnValue({
+        data: '',
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      } as ReturnType<typeof useAgentOutput>);
+
+      render(<AgentOutputModal {...defaultProps} />);
+
+      expect(
+        screen.getByText('No output yet. The agent will stream output here as it works.')
+      ).toBeInTheDocument();
+    });
+
+    it('should display parsed output in LogViewer', () => {
+      render(<AgentOutputModal {...defaultProps} />);
+
+      // The button text is "Logs" (case-sensitive)
+      expect(screen.getByText('Logs')).toBeInTheDocument();
+    });
+  });
+
+  describe('Spinner Display', () => {
+    it('should not show spinner when status is verified', () => {
+      render(<AgentOutputModal {...defaultProps} featureStatus="verified" />);
+
+      // Spinner should NOT be present when status is verified
+      expect(screen.queryByTestId('spinner')).not.toBeInTheDocument();
+    });
+
+    it('should not show spinner when status is waiting_approval', () => {
+      render(<AgentOutputModal {...defaultProps} featureStatus="waiting_approval" />);
+
+      // Spinner should NOT be present when status is waiting_approval
+      expect(screen.queryByTestId('spinner')).not.toBeInTheDocument();
+    });
+
+    it('should show spinner when status is running', () => {
+      render(<AgentOutputModal {...defaultProps} featureStatus="running" />);
+
+      // Spinner should be present and visible when status is running
+      expect(screen.getByTestId('spinner')).toBeInTheDocument();
+    });
+  });
+
+  describe('Number Key Handling', () => {
+    it('should handle number key presses when modal is open', () => {
+      const mockOnNumberKeyPress = vi.fn();
+      render(<AgentOutputModal {...defaultProps} onNumberKeyPress={mockOnNumberKeyPress} />);
+
+      // Simulate number key press
+      fireEvent.keyDown(window, { key: '1', ctrlKey: false, altKey: false, metaKey: false });
+
+      expect(mockOnNumberKeyPress).toHaveBeenCalledWith('1');
+    });
+
+    it('should not handle number keys with modifiers', () => {
+      const mockOnNumberKeyPress = vi.fn();
+      render(<AgentOutputModal {...defaultProps} onNumberKeyPress={mockOnNumberKeyPress} />);
+
+      // Simulate Ctrl+1 (should be ignored)
+      fireEvent.keyDown(window, { key: '1', ctrlKey: true, altKey: false, metaKey: false });
+      fireEvent.keyDown(window, { key: '2', altKey: true, ctrlKey: false, metaKey: false });
+      fireEvent.keyDown(window, { key: '3', metaKey: true, ctrlKey: false, altKey: false });
+
+      expect(mockOnNumberKeyPress).not.toHaveBeenCalled();
+    });
+
+    it('should not handle number key presses when modal is closed', () => {
+      const mockOnNumberKeyPress = vi.fn();
+      render(
+        <AgentOutputModal {...defaultProps} open={false} onNumberKeyPress={mockOnNumberKeyPress} />
+      );
+
+      fireEvent.keyDown(window, { key: '1', ctrlKey: false, altKey: false, metaKey: false });
+
+      expect(mockOnNumberKeyPress).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Auto-scrolling', () => {
+    it('should auto-scroll to bottom when output changes', async () => {
+      const { rerender } = render(<AgentOutputModal {...defaultProps} />);
+
+      // Find the scroll container - the div with overflow-y-auto that contains the log output
+      const modal = screen.getByTestId('agent-output-modal');
+      const scrollContainer = modal.querySelector('.overflow-y-auto.font-mono') as HTMLDivElement;
+
+      expect(scrollContainer).toBeInTheDocument();
+
+      // Mock the scrollHeight to simulate content growth
+      Object.defineProperty(scrollContainer, 'scrollHeight', {
+        value: 1000,
+        configurable: true,
+        writable: true,
+      });
+
+      // Simulate output update by changing the mock return value
+      mockUseAgentOutput.mockReturnValue({
+        data: mockOutput + '\n\n## New Content\nThis is additional content that was streamed.',
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      } as ReturnType<typeof useAgentOutput>);
+
+      // Re-render the component to trigger the auto-scroll effect
+      await act(async () => {
+        rerender(<AgentOutputModal {...defaultProps} />);
+      });
+
+      // The auto-scroll effect sets scrollTop directly to scrollHeight
+      // Verify scrollTop was updated to the scrollHeight value
+      expect(scrollContainer.scrollTop).toBe(1000);
+    });
+
+    it('should update scrollTop when output is appended', async () => {
+      const { rerender } = render(<AgentOutputModal {...defaultProps} />);
+
+      const modal = screen.getByTestId('agent-output-modal');
+      const scrollContainer = modal.querySelector('.overflow-y-auto.font-mono') as HTMLDivElement;
+
+      expect(scrollContainer).toBeInTheDocument();
+
+      // Set initial scrollHeight
+      Object.defineProperty(scrollContainer, 'scrollHeight', {
+        value: 500,
+        configurable: true,
+        writable: true,
+      });
+
+      // Initial state - scrollTop should be set after first render
+      // (autoScrollRef.current starts as true)
+
+      // Now simulate more content being added
+      Object.defineProperty(scrollContainer, 'scrollHeight', {
+        value: 1500,
+        configurable: true,
+        writable: true,
+      });
+
+      mockUseAgentOutput.mockReturnValue({
+        data: mockOutput + '\n\nMore content added.',
+        isLoading: false,
+        error: null,
+        refetch: vi.fn(),
+      } as ReturnType<typeof useAgentOutput>);
+
+      await act(async () => {
+        rerender(<AgentOutputModal {...defaultProps} />);
+      });
+
+      // Verify scrollTop was updated to the new scrollHeight
+      expect(scrollContainer.scrollTop).toBe(1500);
+    });
+  });
+
+  describe('Backlog Plan Mode', () => {
+    it('should handle backlog plan feature ID', () => {
+      const backlogProps = {
+        ...defaultProps,
+        featureId: 'backlog-plan:project-123',
+      };
+
+      render(<AgentOutputModal {...backlogProps} />);
+
+      expect(screen.getByText('Agent Output')).toBeInTheDocument();
+    });
+  });
+
+  describe('Project Path Resolution', () => {
+    it('should use projectPath prop when provided', () => {
+      const projectPath = '/custom/project/path';
+      render(<AgentOutputModal {...defaultProps} projectPath={projectPath} />);
+
+      expect(screen.getByText('Implement a responsive navigation menu')).toBeInTheDocument();
+    });
+
+    it('should fallback to window.__currentProject when projectPath is not provided', () => {
+      const previousProject = window.__currentProject;
+      try {
+        window.__currentProject = { path: '/fallback/project' };
+        render(<AgentOutputModal {...defaultProps} />);
+        expect(screen.getByText('Implement a responsive navigation menu')).toBeInTheDocument();
+      } finally {
+        window.__currentProject = previousProject;
+      }
+    });
+  });
+
+  describe('Branch Name Handling', () => {
+    it('should display changes view when branchName is provided', async () => {
+      render(<AgentOutputModal {...defaultProps} branchName="feature/test-branch" />);
+
+      // Switch to changes view
+      const changesButton = screen.getByTestId('view-mode-changes');
+      fireEvent.click(changesButton);
+
+      // Verify the changes button is clicked (it should have active class)
+      await waitFor(() => {
+        expect(changesButton).toHaveClass('bg-primary/20');
+      });
+    });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/components/agent-output-modal-responsive.test.tsx b/temp_repo/apps/ui/tests/unit/components/agent-output-modal-responsive.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..753ed37b5525b64bcb9ec5cbc238fb7074be6af9
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/components/agent-output-modal-responsive.test.tsx
@@ -0,0 +1,236 @@
+/**
+ * Unit tests for AgentOutputModal responsive behavior
+ *
+ * These tests verify that Tailwind CSS responsive classes are correctly applied
+ * to the modal across different viewport sizes (mobile, tablet, desktop).
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { AgentOutputModal } from '../../../src/components/views/board-view/dialogs/agent-output-modal';
+import { useAppStore } from '@automaker/ui/store/app-store';
+import { useAgentOutput, useFeature } from '@automaker/ui/hooks/queries';
+import { getElectronAPI } from '@automaker/ui/lib/electron';
+
+// Mock dependencies
+vi.mock('@automaker/ui/hooks/queries');
+vi.mock('@automaker/ui/lib/electron');
+vi.mock('@automaker/ui/store/app-store');
+
+const mockUseAppStore = vi.mocked(useAppStore);
+const mockUseAgentOutput = vi.mocked(useAgentOutput);
+const mockUseFeature = vi.mocked(useFeature);
+const mockGetElectronAPI = vi.mocked(getElectronAPI);
+
+describe('AgentOutputModal Responsive Behavior', () => {
+  const defaultProps = {
+    open: true,
+    onClose: vi.fn(),
+    featureDescription: 'Test feature description',
+    featureId: 'test-feature-123',
+    featureStatus: 'running',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Mock useAppStore
+    mockUseAppStore.mockImplementation((selector) => {
+      if (selector === 'state') {
+        return { useWorktrees: false };
+      }
+      return selector({ useWorktrees: false });
+    });
+
+    // Mock useAgentOutput
+    mockUseAgentOutput.mockReturnValue({
+      data: '',
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    } as ReturnType<typeof useAgentOutput>);
+
+    // Mock useFeature
+    mockUseFeature.mockReturnValue({
+      data: null,
+      refetch: vi.fn(),
+    } as ReturnType<typeof useFeature>);
+
+    // Mock electron API
+    mockGetElectronAPI.mockReturnValue(null);
+  });
+
+  describe('Mobile Screen (< 640px)', () => {
+    it('should use full width on mobile screens', () => {
+      // Set up viewport for mobile
+      window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+        matches: query === '(max-width: 639px)',
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+      }));
+
+      render(<AgentOutputModal {...defaultProps} />);
+
+      // Find the DialogContent element
+      const dialogContent = screen.getByTestId('agent-output-modal');
+      // Base class should be present
+      expect(dialogContent).toHaveClass('w-full');
+      // In Tailwind, all responsive classes are always present on the element
+      // The browser determines which ones apply based on viewport
+      expect(dialogContent).toHaveClass('sm:w-[60vw]');
+    });
+
+    it('should use max-w-[calc(100%-2rem)] on mobile', () => {
+      window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+        matches: query === '(max-width: 639px)',
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+      }));
+
+      render(<AgentOutputModal {...defaultProps} />);
+
+      const dialogContent = screen.getByTestId('agent-output-modal');
+      expect(dialogContent).toHaveClass('max-w-[calc(100%-2rem)]');
+    });
+  });
+
+  describe('Small Screen (640px - < 768px)', () => {
+    it('should use 60vw on small screens', () => {
+      window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+        matches: query === '(min-width: 640px) and (max-width: 767px)',
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+      }));
+
+      render(<AgentOutputModal {...defaultProps} />);
+
+      const dialogContent = screen.getByTestId('agent-output-modal');
+      // At sm breakpoint, sm:w-[60vw] should be applied (takes precedence over w-full)
+      expect(dialogContent).toHaveClass('sm:w-[60vw]');
+      expect(dialogContent).toHaveClass('sm:max-w-[60vw]');
+    });
+
+    it('should use 80vh height on small screens', () => {
+      window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+        matches: query === '(min-width: 640px) and (max-width: 767px)',
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+      }));
+
+      render(<AgentOutputModal {...defaultProps} />);
+
+      const dialogContent = screen.getByTestId('agent-output-modal');
+      // At sm breakpoint, sm:max-h-[80vh] should be applied
+      expect(dialogContent).toHaveClass('sm:max-h-[80vh]');
+    });
+  });
+
+  describe('Tablet Screen (≥ 768px)', () => {
+    it('should use sm responsive classes on tablet screens', () => {
+      window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+        matches: query === '(min-width: 768px)',
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+      }));
+
+      render(<AgentOutputModal {...defaultProps} />);
+
+      const dialogContent = screen.getByTestId('agent-output-modal');
+      // sm: classes are present for responsive behavior
+      expect(dialogContent).toHaveClass('sm:w-[60vw]');
+      expect(dialogContent).toHaveClass('sm:max-w-[60vw]');
+      expect(dialogContent).toHaveClass('sm:max-h-[80vh]');
+    });
+
+    it('should use max-w constraint on tablet screens', () => {
+      window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+        matches: query === '(min-width: 768px)',
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+      }));
+
+      render(<AgentOutputModal {...defaultProps} />);
+
+      const dialogContent = screen.getByTestId('agent-output-modal');
+      // sm: max-width class is present
+      expect(dialogContent).toHaveClass('sm:max-w-[60vw]');
+    });
+
+    it('should use 80vh height on tablet screens', () => {
+      window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+        matches: query === '(min-width: 768px)',
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+      }));
+
+      render(<AgentOutputModal {...defaultProps} />);
+
+      const dialogContent = screen.getByTestId('agent-output-modal');
+      // sm: max-height class is present
+      expect(dialogContent).toHaveClass('sm:max-h-[80vh]');
+    });
+  });
+
+  describe('Responsive behavior combinations', () => {
+    it('should apply all responsive classes correctly', () => {
+      window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+        matches: query === '(min-width: 768px)',
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+      }));
+
+      render(<AgentOutputModal {...defaultProps} />);
+
+      const dialogContent = screen.getByTestId('agent-output-modal');
+
+      // Check base classes
+      expect(dialogContent).toHaveClass('w-full');
+      expect(dialogContent).toHaveClass('max-h-[85dvh]');
+      expect(dialogContent).toHaveClass('max-w-[calc(100%-2rem)]');
+
+      // Check small screen classes
+      expect(dialogContent).toHaveClass('sm:w-[60vw]');
+      expect(dialogContent).toHaveClass('sm:max-w-[60vw]');
+      expect(dialogContent).toHaveClass('sm:max-h-[80vh]');
+    });
+  });
+
+  describe('Modal closed state', () => {
+    it('should not render when closed', () => {
+      window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+        matches: query === '(max-width: 639px)',
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+      }));
+
+      render(<AgentOutputModal {...defaultProps} open={false} />);
+
+      expect(screen.queryByTestId('agent-output-modal')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Viewport changes', () => {
+    it('should update when window is resized', () => {
+      window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+        matches: query === '(max-width: 639px)',
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+      }));
+
+      const { rerender } = render(<AgentOutputModal {...defaultProps} />);
+
+      // Update to tablet size
+      (window.matchMedia as ReturnType<typeof vi.fn>).mockImplementation((query: string) => ({
+        matches: query === '(min-width: 768px)',
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+      }));
+
+      // Simulate resize by re-rendering
+      rerender(<AgentOutputModal {...defaultProps} />);
+
+      const dialogContent = screen.getByTestId('agent-output-modal');
+      expect(dialogContent).toHaveClass('sm:w-[60vw]');
+    });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/components/card-actions.test.tsx b/temp_repo/apps/ui/tests/unit/components/card-actions.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dd39eca9bc6df52da9b566a54d236c6baddaced8
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/components/card-actions.test.tsx
@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { CardActions } from '../../../src/components/views/board-view/components/kanban-card/card-actions';
+import type { Feature } from '@automaker/types';
+
+describe('CardActions', () => {
+  it('renders backlog logs button when context exists', () => {
+    const feature = {
+      id: 'feature-logs',
+      status: 'backlog',
+      error: undefined,
+    } as unknown as Feature;
+
+    render(
+      <CardActions
+        feature={feature}
+        isCurrentAutoTask={false}
+        isRunningTask={false}
+        hasContext
+        onEdit={vi.fn()}
+        onViewOutput={vi.fn()}
+        onImplement={vi.fn()}
+      />
+    );
+
+    expect(screen.getByTestId('view-output-backlog-feature-logs')).toBeInTheDocument();
+  });
+
+  it('does not render backlog logs button without context', () => {
+    const feature = {
+      id: 'feature-no-logs',
+      status: 'backlog',
+      error: undefined,
+    } as unknown as Feature;
+
+    render(
+      <CardActions
+        feature={feature}
+        isCurrentAutoTask={false}
+        isRunningTask={false}
+        onEdit={vi.fn()}
+        onViewOutput={vi.fn()}
+        onImplement={vi.fn()}
+      />
+    );
+
+    expect(screen.queryByTestId('view-output-backlog-feature-no-logs')).not.toBeInTheDocument();
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/components/card-badges.test.tsx b/temp_repo/apps/ui/tests/unit/components/card-badges.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a6b709501c522a60b07f8d2ac328c9308fdb5e95
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/components/card-badges.test.tsx
@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { CardBadges } from '../../../src/components/views/board-view/components/kanban-card/card-badges';
+import { TooltipProvider } from '../../../src/components/ui/tooltip';
+import type { Feature } from '@automaker/types';
+
+describe('CardBadges', () => {
+  it('renders merge conflict warning badge when status is merge_conflict', () => {
+    const feature = {
+      id: 'feature-1',
+      status: 'merge_conflict',
+      error: undefined,
+    } as unknown as Feature;
+
+    render(
+      <TooltipProvider>
+        <CardBadges feature={feature} />
+      </TooltipProvider>
+    );
+
+    expect(screen.getByTestId('merge-conflict-badge-feature-1')).toBeInTheDocument();
+  });
+
+  it('does not render badges when there is no error and no merge conflict', () => {
+    const feature = {
+      id: 'feature-2',
+      status: 'backlog',
+      error: undefined,
+    } as unknown as Feature;
+
+    const { container } = render(
+      <TooltipProvider>
+        <CardBadges feature={feature} />
+      </TooltipProvider>
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/components/event-content-formatter.test.ts b/temp_repo/apps/ui/tests/unit/components/event-content-formatter.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..51587e795c62a859aa3de00c7f28f69f093898c6
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/components/event-content-formatter.test.ts
@@ -0,0 +1,321 @@
+/**
+ * Tests for event-content-formatter utility
+ * Verifies correct formatting of AutoModeEvent and BacklogPlanEvent content
+ * for display in the AgentOutputModal.
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+  formatAutoModeEventContent,
+  formatBacklogPlanEventContent,
+} from '../../../src/components/views/board-view/dialogs/event-content-formatter';
+import type { AutoModeEvent } from '@/types/electron';
+import type { BacklogPlanEvent } from '@automaker/types';
+
+describe('formatAutoModeEventContent', () => {
+  describe('auto_mode_progress', () => {
+    it('should return content string', () => {
+      const event = { type: 'auto_mode_progress', content: 'Processing step 1' } as AutoModeEvent;
+      expect(formatAutoModeEventContent(event)).toBe('Processing step 1');
+    });
+
+    it('should return empty string when content is undefined', () => {
+      const event = { type: 'auto_mode_progress' } as AutoModeEvent;
+      expect(formatAutoModeEventContent(event)).toBe('');
+    });
+  });
+
+  describe('auto_mode_tool', () => {
+    it('should format tool name and input', () => {
+      const event = {
+        type: 'auto_mode_tool',
+        tool: 'Read',
+        input: { file: 'test.ts' },
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('🔧 Tool: Read');
+      expect(result).toContain('"file": "test.ts"');
+    });
+
+    it('should handle missing tool name', () => {
+      const event = { type: 'auto_mode_tool' } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('Unknown Tool');
+    });
+
+    it('should handle missing input', () => {
+      const event = { type: 'auto_mode_tool', tool: 'Write' } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('🔧 Tool: Write');
+      expect(result).not.toContain('Input:');
+    });
+  });
+
+  describe('auto_mode_phase', () => {
+    it('should use planning emoji for planning phase', () => {
+      const event = {
+        type: 'auto_mode_phase',
+        phase: 'planning',
+        message: 'Starting plan',
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('📋');
+      expect(result).toContain('Starting plan');
+    });
+
+    it('should use action emoji for action phase', () => {
+      const event = {
+        type: 'auto_mode_phase',
+        phase: 'action',
+        message: 'Executing',
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('⚡');
+    });
+
+    it('should use checkmark emoji for other phases', () => {
+      const event = {
+        type: 'auto_mode_phase',
+        phase: 'complete',
+        message: 'Done',
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('✅');
+    });
+  });
+
+  describe('auto_mode_error', () => {
+    it('should format error message', () => {
+      const event = {
+        type: 'auto_mode_error',
+        error: 'Something went wrong',
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('❌ Error: Something went wrong');
+    });
+  });
+
+  describe('planning events', () => {
+    it('should format planning_started with mode label', () => {
+      const event = {
+        type: 'planning_started',
+        mode: 'lite',
+        message: 'Starting lite planning',
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('Planning Mode: Lite');
+      expect(result).toContain('Starting lite planning');
+    });
+
+    it('should format spec planning mode', () => {
+      const event = {
+        type: 'planning_started',
+        mode: 'spec',
+        message: 'Starting spec planning',
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('Planning Mode: Spec');
+    });
+
+    it('should format full planning mode', () => {
+      const event = {
+        type: 'planning_started',
+        mode: 'full',
+        message: 'Starting full planning',
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('Planning Mode: Full');
+    });
+
+    it('should format plan_approval_required', () => {
+      const event = { type: 'plan_approval_required' } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('waiting for your approval');
+    });
+
+    it('should format plan_approved without edits', () => {
+      const event = { type: 'plan_approved', hasEdits: false } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('Plan approved');
+      expect(result).not.toContain('with edits');
+    });
+
+    it('should format plan_approved with edits', () => {
+      const event = { type: 'plan_approved', hasEdits: true } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('Plan approved (with edits)');
+    });
+
+    it('should format plan_auto_approved', () => {
+      const event = { type: 'plan_auto_approved' } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('Plan auto-approved');
+    });
+
+    it('should format plan_revision_requested', () => {
+      const event = {
+        type: 'plan_revision_requested',
+        planVersion: 3,
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('Revising plan');
+      expect(result).toContain('v3');
+    });
+  });
+
+  describe('task events', () => {
+    it('should format auto_mode_task_started', () => {
+      const event = {
+        type: 'auto_mode_task_started',
+        taskId: 'task-1',
+        taskDescription: 'Write tests',
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('Starting task-1: Write tests');
+    });
+
+    it('should format auto_mode_task_complete', () => {
+      const event = {
+        type: 'auto_mode_task_complete',
+        taskId: 'task-1',
+        tasksCompleted: 3,
+        tasksTotal: 5,
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('task-1 completed (3/5)');
+    });
+
+    it('should format auto_mode_phase_complete', () => {
+      const event = {
+        type: 'auto_mode_phase_complete',
+        phaseNumber: 2,
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('Phase 2 complete');
+    });
+  });
+
+  describe('auto_mode_feature_complete', () => {
+    it('should show success emoji when passes is true', () => {
+      const event = {
+        type: 'auto_mode_feature_complete',
+        passes: true,
+        message: 'All tests pass',
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('✅');
+      expect(result).toContain('All tests pass');
+    });
+
+    it('should show warning emoji when passes is false', () => {
+      const event = {
+        type: 'auto_mode_feature_complete',
+        passes: false,
+        message: 'Some tests failed',
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('⚠️');
+    });
+  });
+
+  describe('auto_mode_ultrathink_preparation', () => {
+    it('should format with warnings', () => {
+      const event = {
+        type: 'auto_mode_ultrathink_preparation',
+        warnings: ['High cost', 'Long runtime'],
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('Ultrathink Preparation');
+      expect(result).toContain('Warnings:');
+      expect(result).toContain('High cost');
+      expect(result).toContain('Long runtime');
+    });
+
+    it('should format with recommendations', () => {
+      const event = {
+        type: 'auto_mode_ultrathink_preparation',
+        recommendations: ['Use caching', 'Reduce scope'],
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('Recommendations:');
+      expect(result).toContain('Use caching');
+    });
+
+    it('should format estimated cost', () => {
+      const event = {
+        type: 'auto_mode_ultrathink_preparation',
+        estimatedCost: 1.5,
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('Estimated Cost: ~$1.50');
+    });
+
+    it('should format estimated time', () => {
+      const event = {
+        type: 'auto_mode_ultrathink_preparation',
+        estimatedTime: '5-10 minutes',
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('Estimated Time: 5-10 minutes');
+    });
+
+    it('should handle event with no optional fields', () => {
+      const event = {
+        type: 'auto_mode_ultrathink_preparation',
+      } as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toContain('Ultrathink Preparation');
+      expect(result).not.toContain('Warnings:');
+      expect(result).not.toContain('Recommendations:');
+    });
+  });
+
+  describe('unknown event type', () => {
+    it('should return empty string for unknown event types', () => {
+      const event = { type: 'unknown_type' } as unknown as AutoModeEvent;
+      const result = formatAutoModeEventContent(event);
+      expect(result).toBe('');
+    });
+  });
+});
+
+describe('formatBacklogPlanEventContent', () => {
+  it('should format backlog_plan_progress', () => {
+    const event = { type: 'backlog_plan_progress', content: 'Analyzing features' };
+    const result = formatBacklogPlanEventContent(event as BacklogPlanEvent);
+    expect(result).toContain('🧭');
+    expect(result).toContain('Analyzing features');
+  });
+
+  it('should handle missing content in progress event', () => {
+    const event = { type: 'backlog_plan_progress' };
+    const result = formatBacklogPlanEventContent(event as BacklogPlanEvent);
+    expect(result).toContain('Backlog plan progress update');
+  });
+
+  it('should format backlog_plan_error', () => {
+    const event = { type: 'backlog_plan_error', error: 'API failure' };
+    const result = formatBacklogPlanEventContent(event as BacklogPlanEvent);
+    expect(result).toContain('❌');
+    expect(result).toContain('API failure');
+  });
+
+  it('should handle missing error message', () => {
+    const event = { type: 'backlog_plan_error' };
+    const result = formatBacklogPlanEventContent(event as BacklogPlanEvent);
+    expect(result).toContain('Unknown error');
+  });
+
+  it('should format backlog_plan_complete', () => {
+    const event = { type: 'backlog_plan_complete' };
+    const result = formatBacklogPlanEventContent(event as BacklogPlanEvent);
+    expect(result).toContain('✅');
+    expect(result).toContain('Backlog plan completed');
+  });
+
+  it('should format unknown backlog event type', () => {
+    const event = { type: 'some_other_event' };
+    const result = formatBacklogPlanEventContent(event as BacklogPlanEvent);
+    expect(result).toContain('some_other_event');
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/components/feature-creation-defaults.test.ts b/temp_repo/apps/ui/tests/unit/components/feature-creation-defaults.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c00556ae19e79b4b51aff41a121a21976a50c6b5
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/components/feature-creation-defaults.test.ts
@@ -0,0 +1,524 @@
+/**
+ * Tests for default fields on auto-created features
+ *
+ * Verifies that features created from PR review comments, GitHub issues,
+ * and quick templates include required default fields:
+ * - planningMode: 'skip'
+ * - requirePlanApproval: false
+ * - dependencies: []
+ * - prUrl: set when PR URL is available
+ *
+ * These tests validate the feature object construction patterns used across
+ * multiple UI creation paths to ensure consistency.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { resolveModelString } from '@automaker/model-resolver';
+
+// ============================================
+// Feature construction helpers that mirror the actual creation logic
+// in the source components. These intentionally duplicate the object-construction
+// patterns from the components so that any deviation in the source will
+// require a deliberate update to the corresponding builder here.
+// ============================================
+
+/**
+ * Constructs a feature object as done by handleAutoAddressComments in github-prs-view.tsx
+ */
+function buildPRAutoAddressFeature(pr: { number: number; url?: string; headRefName?: string }) {
+  const featureId = `pr-${pr.number}-test-uuid`;
+  return {
+    id: featureId,
+    title: `Address PR #${pr.number} Review Comments`,
+    category: 'bug-fix',
+    description: `Read the review requests on PR #${pr.number} and address any feedback the best you can.`,
+    steps: [],
+    status: 'backlog',
+    model: resolveModelString('opus'),
+    thinkingLevel: 'none',
+    planningMode: 'skip',
+    requirePlanApproval: false,
+    dependencies: [],
+    ...(pr.url ? { prUrl: pr.url } : {}),
+    ...(pr.headRefName ? { branchName: pr.headRefName } : {}),
+  };
+}
+
+/**
+ * Constructs a feature object as done by handleSubmit('together') in pr-comment-resolution-dialog.tsx
+ */
+function buildPRCommentResolutionGroupFeature(
+  pr: {
+    number: number;
+    title: string;
+    url?: string;
+    headRefName?: string;
+  },
+  commentCount = 2
+) {
+  return {
+    id: 'test-uuid',
+    title: `Address ${commentCount} review comment${commentCount > 1 ? 's' : ''} on PR #${pr.number}`,
+    category: 'bug-fix',
+    description: `PR Review Comments for #${pr.number}`,
+    steps: [],
+    status: 'backlog',
+    model: resolveModelString('opus'),
+    thinkingLevel: 'none',
+    reasoningEffort: undefined,
+    providerId: undefined,
+    planningMode: 'skip',
+    requirePlanApproval: false,
+    dependencies: [],
+    ...(pr.url ? { prUrl: pr.url } : {}),
+    ...(pr.headRefName ? { branchName: pr.headRefName } : {}),
+  };
+}
+
+/**
+ * Constructs a feature object as done by handleSubmit('individually') in pr-comment-resolution-dialog.tsx
+ */
+function buildPRCommentResolutionIndividualFeature(pr: {
+  number: number;
+  title: string;
+  url?: string;
+  headRefName?: string;
+}) {
+  return {
+    id: 'test-uuid',
+    title: `Address PR #${pr.number} comment by @reviewer on file.ts:10`,
+    category: 'bug-fix',
+    description: `Single PR comment resolution`,
+    steps: [],
+    status: 'backlog',
+    model: resolveModelString('opus'),
+    thinkingLevel: 'none',
+    reasoningEffort: undefined,
+    providerId: undefined,
+    planningMode: 'skip',
+    requirePlanApproval: false,
+    dependencies: [],
+    ...(pr.url ? { prUrl: pr.url } : {}),
+    ...(pr.headRefName ? { branchName: pr.headRefName } : {}),
+  };
+}
+
+/**
+ * Constructs a feature object as done by handleConvertToTask in github-issues-view.tsx
+ */
+function buildGitHubIssueConvertFeature(
+  issue: {
+    number: number;
+    title: string;
+  },
+  currentBranch: string
+) {
+  return {
+    id: `issue-${issue.number}-test-uuid`,
+    title: issue.title,
+    description: `From GitHub Issue #${issue.number}`,
+    category: 'From GitHub',
+    status: 'backlog' as const,
+    passes: false,
+    priority: 2,
+    model: resolveModelString('opus'),
+    thinkingLevel: 'none' as const,
+    branchName: currentBranch,
+    planningMode: 'skip' as const,
+    requirePlanApproval: false,
+    dependencies: [],
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  };
+}
+
+/**
+ * Constructs a feature object as done by handleAddFeatureFromIssue in github-issues-view.tsx
+ */
+function buildGitHubIssueDialogFeature(
+  issue: {
+    number: number;
+  },
+  featureData: {
+    title: string;
+    planningMode: string;
+    requirePlanApproval: boolean;
+    workMode: string;
+    branchName: string;
+  },
+  currentBranch: string
+) {
+  return {
+    id: `issue-${issue.number}-test-uuid`,
+    title: featureData.title,
+    description: 'Test description',
+    category: 'test-category',
+    status: 'backlog' as const,
+    passes: false,
+    priority: 2,
+    model: 'claude-opus-4-6',
+    thinkingLevel: 'none',
+    reasoningEffort: 'none',
+    skipTests: false,
+    branchName: featureData.workMode === 'current' ? currentBranch : featureData.branchName,
+    planningMode: featureData.planningMode,
+    requirePlanApproval: featureData.requirePlanApproval,
+    dependencies: [],
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+  };
+}
+
+/**
+ * Constructs a feature data object as done by handleAutoAddressPRComments in board-view.tsx
+ */
+function buildBoardViewAutoAddressPRFeature(
+  worktree: {
+    branch: string;
+  },
+  prInfo: {
+    number: number;
+    url?: string;
+  }
+) {
+  return {
+    title: `Address PR #${prInfo.number} Review Comments`,
+    category: 'Maintenance',
+    description: `Read the review requests on PR #${prInfo.number} and address any feedback the best you can.`,
+    images: [],
+    imagePaths: [],
+    skipTests: false,
+    model: resolveModelString('opus'),
+    thinkingLevel: 'none' as const,
+    branchName: worktree.branch,
+    workMode: 'custom' as const,
+    priority: 1,
+    planningMode: 'skip' as const,
+    requirePlanApproval: false,
+    dependencies: [],
+  };
+}
+
+// ============================================
+// Tests
+// ============================================
+
+describe('Feature creation default fields', () => {
+  describe('PR auto-address feature (github-prs-view)', () => {
+    it('should include planningMode: "skip"', () => {
+      const feature = buildPRAutoAddressFeature({ number: 42 });
+      expect(feature.planningMode).toBe('skip');
+    });
+
+    it('should include requirePlanApproval: false', () => {
+      const feature = buildPRAutoAddressFeature({ number: 42 });
+      expect(feature.requirePlanApproval).toBe(false);
+    });
+
+    it('should include dependencies: []', () => {
+      const feature = buildPRAutoAddressFeature({ number: 42 });
+      expect(feature.dependencies).toEqual([]);
+    });
+
+    it('should set prUrl when PR has a URL', () => {
+      const feature = buildPRAutoAddressFeature({
+        number: 42,
+        url: 'https://github.com/org/repo/pull/42',
+      });
+      expect(feature.prUrl).toBe('https://github.com/org/repo/pull/42');
+    });
+
+    it('should not include prUrl when PR has no URL', () => {
+      const feature = buildPRAutoAddressFeature({ number: 42 });
+      expect(feature).not.toHaveProperty('prUrl');
+    });
+
+    it('should set branchName from headRefName when present', () => {
+      const feature = buildPRAutoAddressFeature({
+        number: 42,
+        headRefName: 'feature/my-pr',
+      });
+      expect(feature.branchName).toBe('feature/my-pr');
+    });
+
+    it('should not include branchName when headRefName is absent', () => {
+      const feature = buildPRAutoAddressFeature({ number: 42 });
+      expect(feature).not.toHaveProperty('branchName');
+    });
+
+    it('should set status to backlog', () => {
+      const feature = buildPRAutoAddressFeature({ number: 42 });
+      expect(feature.status).toBe('backlog');
+    });
+  });
+
+  describe('PR comment resolution - group mode (pr-comment-resolution-dialog)', () => {
+    const basePR = { number: 99, title: 'Fix thing' };
+
+    it('should include planningMode: "skip"', () => {
+      const feature = buildPRCommentResolutionGroupFeature(basePR);
+      expect(feature.planningMode).toBe('skip');
+    });
+
+    it('should include requirePlanApproval: false', () => {
+      const feature = buildPRCommentResolutionGroupFeature(basePR);
+      expect(feature.requirePlanApproval).toBe(false);
+    });
+
+    it('should include dependencies: []', () => {
+      const feature = buildPRCommentResolutionGroupFeature(basePR);
+      expect(feature.dependencies).toEqual([]);
+    });
+
+    it('should set prUrl when PR has a URL', () => {
+      const feature = buildPRCommentResolutionGroupFeature({
+        ...basePR,
+        url: 'https://github.com/org/repo/pull/99',
+      });
+      expect(feature.prUrl).toBe('https://github.com/org/repo/pull/99');
+    });
+
+    it('should not set prUrl when PR has no URL', () => {
+      const feature = buildPRCommentResolutionGroupFeature(basePR);
+      expect(feature).not.toHaveProperty('prUrl');
+    });
+
+    it('should set branchName from headRefName when present', () => {
+      const feature = buildPRCommentResolutionGroupFeature({
+        ...basePR,
+        headRefName: 'fix/thing',
+      });
+      expect(feature.branchName).toBe('fix/thing');
+    });
+
+    it('should pluralize title correctly for single vs multiple comments', () => {
+      const singleComment = buildPRCommentResolutionGroupFeature(basePR, 1);
+      const multipleComments = buildPRCommentResolutionGroupFeature(basePR, 5);
+
+      expect(singleComment.title).toBe(`Address 1 review comment on PR #${basePR.number}`);
+      expect(multipleComments.title).toBe(`Address 5 review comments on PR #${basePR.number}`);
+    });
+  });
+
+  describe('PR comment resolution - individual mode (pr-comment-resolution-dialog)', () => {
+    const basePR = { number: 55, title: 'Add feature' };
+
+    it('should include planningMode: "skip"', () => {
+      const feature = buildPRCommentResolutionIndividualFeature(basePR);
+      expect(feature.planningMode).toBe('skip');
+    });
+
+    it('should include requirePlanApproval: false', () => {
+      const feature = buildPRCommentResolutionIndividualFeature(basePR);
+      expect(feature.requirePlanApproval).toBe(false);
+    });
+
+    it('should include dependencies: []', () => {
+      const feature = buildPRCommentResolutionIndividualFeature(basePR);
+      expect(feature.dependencies).toEqual([]);
+    });
+
+    it('should set prUrl when PR has a URL', () => {
+      const feature = buildPRCommentResolutionIndividualFeature({
+        ...basePR,
+        url: 'https://github.com/org/repo/pull/55',
+      });
+      expect(feature.prUrl).toBe('https://github.com/org/repo/pull/55');
+    });
+  });
+
+  describe('GitHub issue quick convert (github-issues-view)', () => {
+    const issue = { number: 123, title: 'Fix bug' };
+
+    it('should include planningMode: "skip"', () => {
+      const feature = buildGitHubIssueConvertFeature(issue, 'main');
+      expect(feature.planningMode).toBe('skip');
+    });
+
+    it('should include requirePlanApproval: false', () => {
+      const feature = buildGitHubIssueConvertFeature(issue, 'main');
+      expect(feature.requirePlanApproval).toBe(false);
+    });
+
+    it('should include dependencies: []', () => {
+      const feature = buildGitHubIssueConvertFeature(issue, 'main');
+      expect(feature.dependencies).toEqual([]);
+    });
+
+    it('should set branchName to current branch', () => {
+      const feature = buildGitHubIssueConvertFeature(issue, 'feature/my-branch');
+      expect(feature.branchName).toBe('feature/my-branch');
+    });
+
+    it('should set status to backlog', () => {
+      const feature = buildGitHubIssueConvertFeature(issue, 'main');
+      expect(feature.status).toBe('backlog');
+    });
+  });
+
+  describe('GitHub issue dialog creation (github-issues-view)', () => {
+    const issue = { number: 456 };
+
+    it('should include dependencies: [] regardless of dialog data', () => {
+      const feature = buildGitHubIssueDialogFeature(
+        issue,
+        {
+          title: 'Test',
+          planningMode: 'full',
+          requirePlanApproval: true,
+          workMode: 'custom',
+          branchName: 'feat/test',
+        },
+        'main'
+      );
+      expect(feature.dependencies).toEqual([]);
+    });
+
+    it('should preserve planningMode from dialog (not override)', () => {
+      const feature = buildGitHubIssueDialogFeature(
+        issue,
+        {
+          title: 'Test',
+          planningMode: 'full',
+          requirePlanApproval: true,
+          workMode: 'custom',
+          branchName: 'feat/test',
+        },
+        'main'
+      );
+      // Dialog-provided values are preserved (not overridden to 'skip')
+      expect(feature.planningMode).toBe('full');
+      expect(feature.requirePlanApproval).toBe(true);
+    });
+
+    it('should use currentBranch when workMode is "current"', () => {
+      const feature = buildGitHubIssueDialogFeature(
+        issue,
+        {
+          title: 'Test',
+          planningMode: 'skip',
+          requirePlanApproval: false,
+          workMode: 'current',
+          branchName: 'feat/custom',
+        },
+        'main'
+      );
+      expect(feature.branchName).toBe('main');
+    });
+
+    it('should use provided branchName when workMode is not "current"', () => {
+      const feature = buildGitHubIssueDialogFeature(
+        issue,
+        {
+          title: 'Test',
+          planningMode: 'skip',
+          requirePlanApproval: false,
+          workMode: 'custom',
+          branchName: 'feat/custom',
+        },
+        'main'
+      );
+      expect(feature.branchName).toBe('feat/custom');
+    });
+  });
+
+  describe('Board view auto-address PR comments (board-view)', () => {
+    const worktree = { branch: 'feature/my-feature' };
+    const prInfo = { number: 77, url: 'https://github.com/org/repo/pull/77' };
+
+    it('should include planningMode: "skip"', () => {
+      const featureData = buildBoardViewAutoAddressPRFeature(worktree, prInfo);
+      expect(featureData.planningMode).toBe('skip');
+    });
+
+    it('should include requirePlanApproval: false', () => {
+      const featureData = buildBoardViewAutoAddressPRFeature(worktree, prInfo);
+      expect(featureData.requirePlanApproval).toBe(false);
+    });
+
+    it('should include dependencies: []', () => {
+      const featureData = buildBoardViewAutoAddressPRFeature(worktree, prInfo);
+      expect(featureData.dependencies).toEqual([]);
+    });
+
+    it('should set branchName from worktree', () => {
+      const featureData = buildBoardViewAutoAddressPRFeature(worktree, prInfo);
+      expect(featureData.branchName).toBe('feature/my-feature');
+    });
+
+    it('should set workMode to "custom"', () => {
+      const featureData = buildBoardViewAutoAddressPRFeature(worktree, prInfo);
+      expect(featureData.workMode).toBe('custom');
+    });
+  });
+
+  describe('Cross-path consistency', () => {
+    // Shared fixture: build one feature from each auto-creation path
+    function buildAllAutoCreatedFeatures() {
+      return {
+        prAutoAddress: buildPRAutoAddressFeature({ number: 1 }),
+        commentGroup: buildPRCommentResolutionGroupFeature({ number: 2, title: 'PR' }),
+        commentIndividual: buildPRCommentResolutionIndividualFeature({ number: 3, title: 'PR' }),
+        issueConvert: buildGitHubIssueConvertFeature({ number: 4, title: 'Issue' }, 'main'),
+        boardAutoAddress: buildBoardViewAutoAddressPRFeature({ branch: 'main' }, { number: 5 }),
+      };
+    }
+
+    it('all auto-creation paths should include planningMode: "skip"', () => {
+      const features = buildAllAutoCreatedFeatures();
+      for (const [path, feature] of Object.entries(features)) {
+        expect(feature.planningMode, `${path} should have planningMode: "skip"`).toBe('skip');
+      }
+    });
+
+    it('all auto-creation paths should include requirePlanApproval: false', () => {
+      const features = buildAllAutoCreatedFeatures();
+      for (const [path, feature] of Object.entries(features)) {
+        expect(feature.requirePlanApproval, `${path} should have requirePlanApproval: false`).toBe(
+          false
+        );
+      }
+    });
+
+    it('all auto-creation paths should include dependencies: []', () => {
+      const features = buildAllAutoCreatedFeatures();
+      for (const [path, feature] of Object.entries(features)) {
+        expect(feature.dependencies, `${path} should have dependencies: []`).toEqual([]);
+      }
+    });
+
+    it('PR-related paths should set prUrl when URL is available', () => {
+      const prFeature = buildPRAutoAddressFeature({
+        number: 1,
+        url: 'https://github.com/org/repo/pull/1',
+      });
+      const commentGroupFeature = buildPRCommentResolutionGroupFeature({
+        number: 2,
+        title: 'PR',
+        url: 'https://github.com/org/repo/pull/2',
+      });
+      const commentIndividualFeature = buildPRCommentResolutionIndividualFeature({
+        number: 3,
+        title: 'PR',
+        url: 'https://github.com/org/repo/pull/3',
+      });
+
+      expect(prFeature.prUrl).toBe('https://github.com/org/repo/pull/1');
+      expect(commentGroupFeature.prUrl).toBe('https://github.com/org/repo/pull/2');
+      expect(commentIndividualFeature.prUrl).toBe('https://github.com/org/repo/pull/3');
+    });
+
+    it('PR-related paths should NOT include prUrl when URL is absent', () => {
+      const prFeature = buildPRAutoAddressFeature({ number: 1 });
+      const commentGroupFeature = buildPRCommentResolutionGroupFeature({ number: 2, title: 'PR' });
+      const commentIndividualFeature = buildPRCommentResolutionIndividualFeature({
+        number: 3,
+        title: 'PR',
+      });
+
+      expect(prFeature).not.toHaveProperty('prUrl');
+      expect(commentGroupFeature).not.toHaveProperty('prUrl');
+      expect(commentIndividualFeature).not.toHaveProperty('prUrl');
+    });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/components/mobile-terminal-shortcuts.test.tsx b/temp_repo/apps/ui/tests/unit/components/mobile-terminal-shortcuts.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4a8e1e8f25523c4ba6dda9fa556a2905da72c5ac
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/components/mobile-terminal-shortcuts.test.tsx
@@ -0,0 +1,414 @@
+/**
+ * Unit tests for MobileTerminalShortcuts component
+ * These tests verify the terminal shortcuts bar functionality and responsive behavior
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { MobileTerminalShortcuts } from '../../../src/components/views/terminal-view/mobile-terminal-shortcuts.tsx';
+import type { StickyModifier } from '../../../src/components/views/terminal-view/sticky-modifier-keys.tsx';
+
+// Mock the StickyModifierKeys component
+vi.mock('../../../src/components/views/terminal-view/sticky-modifier-keys.tsx', () => ({
+  StickyModifierKeys: ({
+    activeModifier,
+    onModifierChange,
+    isConnected,
+  }: {
+    activeModifier: StickyModifier;
+    onModifierChange: (m: StickyModifier) => void;
+    isConnected: boolean;
+  }) => (
+    <div
+      data-testid="sticky-modifier-keys"
+      data-modifier={activeModifier}
+      data-connected={isConnected}
+    >
+      <button onClick={() => onModifierChange('ctrl')} data-testid="ctrl-btn">
+        Ctrl
+      </button>
+    </div>
+  ),
+}));
+
+/**
+ * Helper to get arrow button by direction using the Lucide icon class
+ */
+function getArrowButton(direction: 'up' | 'down' | 'left' | 'right'): HTMLButtonElement | null {
+  const iconClass = `lucide-arrow-${direction}`;
+  const svg = document.querySelector(`svg.${iconClass}`);
+  return (svg?.closest('button') as HTMLButtonElement) || null;
+}
+
+/**
+ * Creates default props for MobileTerminalShortcuts component
+ */
+function createDefaultProps(overrides: Partial<typeof defaultProps> = {}) {
+  return {
+    ...defaultProps,
+    ...overrides,
+  };
+}
+
+const defaultProps = {
+  onSendInput: vi.fn(),
+  isConnected: true,
+  activeModifier: null as StickyModifier,
+  onModifierChange: vi.fn(),
+  onCopy: vi.fn(),
+  onPaste: vi.fn(),
+  onSelectAll: vi.fn(),
+  onToggleSelectMode: vi.fn(),
+  isSelectMode: false,
+};
+
+describe('MobileTerminalShortcuts', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render the shortcuts bar with all buttons', () => {
+      render(<MobileTerminalShortcuts {...createDefaultProps()} />);
+
+      // Check for collapse button
+      expect(screen.getByTitle('Hide shortcuts')).toBeInTheDocument();
+
+      // Check for sticky modifier keys
+      expect(screen.getByTestId('sticky-modifier-keys')).toBeInTheDocument();
+
+      // Check for special keys
+      expect(screen.getByText('Esc')).toBeInTheDocument();
+      expect(screen.getByText('Tab')).toBeInTheDocument();
+
+      // Check for Ctrl shortcuts
+      expect(screen.getByText('^C')).toBeInTheDocument();
+      expect(screen.getByText('^Z')).toBeInTheDocument();
+      expect(screen.getByText('^B')).toBeInTheDocument();
+
+      // Check for arrow buttons via SVG icons
+      expect(getArrowButton('left')).not.toBeNull();
+      expect(getArrowButton('down')).not.toBeNull();
+      expect(getArrowButton('up')).not.toBeNull();
+      expect(getArrowButton('right')).not.toBeNull();
+
+      // Check for navigation keys
+      expect(screen.getByText('Del')).toBeInTheDocument();
+      expect(screen.getByText('Home')).toBeInTheDocument();
+      expect(screen.getByText('End')).toBeInTheDocument();
+    });
+
+    it('should render clipboard action buttons when callbacks provided', () => {
+      render(<MobileTerminalShortcuts {...createDefaultProps()} />);
+
+      expect(screen.getByTitle('Select text')).toBeInTheDocument();
+      expect(screen.getByTitle('Select all')).toBeInTheDocument();
+      expect(screen.getByTitle('Copy selection')).toBeInTheDocument();
+      expect(screen.getByTitle('Paste from clipboard')).toBeInTheDocument();
+    });
+
+    it('should not render clipboard buttons when callbacks are not provided', () => {
+      render(
+        <MobileTerminalShortcuts
+          {...createDefaultProps({
+            onCopy: undefined,
+            onPaste: undefined,
+            onSelectAll: undefined,
+            onToggleSelectMode: undefined,
+          })}
+        />
+      );
+
+      expect(screen.queryByTitle('Select text')).not.toBeInTheDocument();
+      expect(screen.queryByTitle('Select all')).not.toBeInTheDocument();
+      expect(screen.queryByTitle('Copy selection')).not.toBeInTheDocument();
+      expect(screen.queryByTitle('Paste from clipboard')).not.toBeInTheDocument();
+    });
+
+    it('should render in collapsed state when collapsed', () => {
+      render(<MobileTerminalShortcuts {...createDefaultProps()} />);
+
+      // Click collapse button
+      fireEvent.click(screen.getByTitle('Hide shortcuts'));
+
+      // Should show collapsed view
+      expect(screen.getByText('Shortcuts')).toBeInTheDocument();
+      expect(screen.getByTitle('Show shortcuts')).toBeInTheDocument();
+      expect(screen.queryByText('Esc')).not.toBeInTheDocument();
+    });
+
+    it('should expand when clicking show shortcuts button', () => {
+      render(<MobileTerminalShortcuts {...createDefaultProps()} />);
+
+      // Collapse first
+      fireEvent.click(screen.getByTitle('Hide shortcuts'));
+      expect(screen.queryByText('Esc')).not.toBeInTheDocument();
+
+      // Expand
+      fireEvent.click(screen.getByTitle('Show shortcuts'));
+      expect(screen.getByText('Esc')).toBeInTheDocument();
+    });
+  });
+
+  describe('Special Keys', () => {
+    it('should send Escape key when Esc button is pressed', () => {
+      const onSendInput = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onSendInput })} />);
+
+      const escButton = screen.getByText('Esc');
+      fireEvent.pointerDown(escButton);
+
+      expect(onSendInput).toHaveBeenCalledWith('\x1b');
+    });
+
+    it('should send Tab key when Tab button is pressed', () => {
+      const onSendInput = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onSendInput })} />);
+
+      const tabButton = screen.getByText('Tab');
+      fireEvent.pointerDown(tabButton);
+
+      expect(onSendInput).toHaveBeenCalledWith('\t');
+    });
+
+    it('should send Delete key when Del button is pressed', () => {
+      const onSendInput = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onSendInput })} />);
+
+      const delButton = screen.getByText('Del');
+      fireEvent.pointerDown(delButton);
+
+      expect(onSendInput).toHaveBeenCalledWith('\x1b[3~');
+    });
+
+    it('should send Home key when Home button is pressed', () => {
+      const onSendInput = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onSendInput })} />);
+
+      const homeButton = screen.getByText('Home');
+      fireEvent.pointerDown(homeButton);
+
+      expect(onSendInput).toHaveBeenCalledWith('\x1b[H');
+    });
+
+    it('should send End key when End button is pressed', () => {
+      const onSendInput = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onSendInput })} />);
+
+      const endButton = screen.getByText('End');
+      fireEvent.pointerDown(endButton);
+
+      expect(onSendInput).toHaveBeenCalledWith('\x1b[F');
+    });
+  });
+
+  describe('Ctrl Key Shortcuts', () => {
+    it('should send Ctrl+C when ^C button is pressed', () => {
+      const onSendInput = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onSendInput })} />);
+
+      const ctrlCButton = screen.getByText('^C');
+      fireEvent.pointerDown(ctrlCButton);
+
+      expect(onSendInput).toHaveBeenCalledWith('\x03');
+    });
+
+    it('should send Ctrl+Z when ^Z button is pressed', () => {
+      const onSendInput = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onSendInput })} />);
+
+      const ctrlZButton = screen.getByText('^Z');
+      fireEvent.pointerDown(ctrlZButton);
+
+      expect(onSendInput).toHaveBeenCalledWith('\x1a');
+    });
+
+    it('should send Ctrl+B when ^B button is pressed', () => {
+      const onSendInput = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onSendInput })} />);
+
+      const ctrlBButton = screen.getByText('^B');
+      fireEvent.pointerDown(ctrlBButton);
+
+      expect(onSendInput).toHaveBeenCalledWith('\x02');
+    });
+  });
+
+  describe('Arrow Keys', () => {
+    it('should send arrow up key when pressed', () => {
+      const onSendInput = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onSendInput })} />);
+
+      const upButton = getArrowButton('up');
+      expect(upButton).not.toBeNull();
+      fireEvent.pointerDown(upButton!);
+
+      expect(onSendInput).toHaveBeenCalledWith('\x1b[A');
+    });
+
+    it('should send arrow down key when pressed', () => {
+      const onSendInput = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onSendInput })} />);
+
+      const downButton = getArrowButton('down');
+      expect(downButton).not.toBeNull();
+      fireEvent.pointerDown(downButton!);
+
+      expect(onSendInput).toHaveBeenCalledWith('\x1b[B');
+    });
+
+    it('should send arrow right key when pressed', () => {
+      const onSendInput = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onSendInput })} />);
+
+      const rightButton = getArrowButton('right');
+      expect(rightButton).not.toBeNull();
+      fireEvent.pointerDown(rightButton!);
+
+      expect(onSendInput).toHaveBeenCalledWith('\x1b[C');
+    });
+
+    it('should send arrow left key when pressed', () => {
+      const onSendInput = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onSendInput })} />);
+
+      const leftButton = getArrowButton('left');
+      expect(leftButton).not.toBeNull();
+      fireEvent.pointerDown(leftButton!);
+
+      expect(onSendInput).toHaveBeenCalledWith('\x1b[D');
+    });
+
+    it('should send initial arrow key immediately on press', () => {
+      const onSendInput = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onSendInput })} />);
+
+      const upButton = getArrowButton('up');
+      expect(upButton).not.toBeNull();
+      fireEvent.pointerDown(upButton!);
+
+      // Initial press should send immediately
+      expect(onSendInput).toHaveBeenCalledTimes(1);
+      expect(onSendInput).toHaveBeenCalledWith('\x1b[A');
+
+      // Release the button - should not send more
+      fireEvent.pointerUp(upButton!);
+      expect(onSendInput).toHaveBeenCalledTimes(1);
+    });
+
+    it('should stop repeating when pointer leaves button', () => {
+      const onSendInput = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onSendInput })} />);
+
+      const upButton = getArrowButton('up');
+      expect(upButton).not.toBeNull();
+
+      // Press and release via pointer leave
+      fireEvent.pointerDown(upButton!);
+      expect(onSendInput).toHaveBeenCalledTimes(1);
+
+      // Pointer leaves - should clear repeat timers
+      fireEvent.pointerLeave(upButton!);
+
+      // Only the initial press should have been sent
+      expect(onSendInput).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Clipboard Actions', () => {
+    it('should call onCopy when copy button is pressed', () => {
+      const onCopy = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onCopy })} />);
+
+      const copyButton = screen.getByTitle('Copy selection');
+      fireEvent.pointerDown(copyButton);
+
+      expect(onCopy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call onPaste when paste button is pressed', () => {
+      const onPaste = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onPaste })} />);
+
+      const pasteButton = screen.getByTitle('Paste from clipboard');
+      fireEvent.pointerDown(pasteButton);
+
+      expect(onPaste).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call onSelectAll when select all button is pressed', () => {
+      const onSelectAll = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onSelectAll })} />);
+
+      const selectAllButton = screen.getByTitle('Select all');
+      fireEvent.pointerDown(selectAllButton);
+
+      expect(onSelectAll).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call onToggleSelectMode when select mode button is pressed', () => {
+      const onToggleSelectMode = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onToggleSelectMode })} />);
+
+      const selectModeButton = screen.getByTitle('Select text');
+      fireEvent.pointerDown(selectModeButton);
+
+      expect(onToggleSelectMode).toHaveBeenCalledTimes(1);
+    });
+
+    it('should show active state when in select mode', () => {
+      render(<MobileTerminalShortcuts {...createDefaultProps({ isSelectMode: true })} />);
+
+      const selectModeButton = screen.getByTitle('Exit select mode');
+      expect(selectModeButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Connection State', () => {
+    it('should disable all buttons when not connected', () => {
+      const onSendInput = vi.fn();
+      render(
+        <MobileTerminalShortcuts {...createDefaultProps({ isConnected: false, onSendInput })} />
+      );
+
+      // All shortcut buttons should not send input when disabled
+      const escButton = screen.getByText('Esc');
+      fireEvent.pointerDown(escButton);
+
+      expect(onSendInput).not.toHaveBeenCalled();
+
+      // Arrow keys should also be disabled
+      const upButton = getArrowButton('up');
+      expect(upButton).not.toBeNull();
+      fireEvent.pointerDown(upButton!);
+
+      expect(onSendInput).not.toHaveBeenCalled();
+    });
+
+    it('should pass connected state to StickyModifierKeys', () => {
+      render(<MobileTerminalShortcuts {...createDefaultProps({ isConnected: false })} />);
+
+      const stickyKeys = screen.getByTestId('sticky-modifier-keys');
+      expect(stickyKeys).toHaveAttribute('data-connected', 'false');
+    });
+  });
+
+  describe('Sticky Modifier Integration', () => {
+    it('should pass active modifier to StickyModifierKeys', () => {
+      render(<MobileTerminalShortcuts {...createDefaultProps({ activeModifier: 'ctrl' })} />);
+
+      const stickyKeys = screen.getByTestId('sticky-modifier-keys');
+      expect(stickyKeys).toHaveAttribute('data-modifier', 'ctrl');
+    });
+
+    it('should call onModifierChange when modifier is changed', () => {
+      const onModifierChange = vi.fn();
+      render(<MobileTerminalShortcuts {...createDefaultProps({ onModifierChange })} />);
+
+      const ctrlBtn = screen.getByTestId('ctrl-btn');
+      fireEvent.click(ctrlBtn);
+
+      expect(onModifierChange).toHaveBeenCalledWith('ctrl');
+    });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/components/phase-model-selector.test.tsx b/temp_repo/apps/ui/tests/unit/components/phase-model-selector.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..04339fff0ae7311b4c0caed95eff5455b46d05b3
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/components/phase-model-selector.test.tsx
@@ -0,0 +1,411 @@
+/**
+ * Unit tests for PhaseModelSelector component
+ * Tests useShallow selector reactivity with enabledDynamicModelIds array changes
+ *
+ * Bug: Opencode model selection changes from settings aren't showing up in dropdown
+ * Fix: Added useShallow selector to ensure proper reactivity when enabledDynamicModelIds array changes
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useAppStore } from '@/store/app-store';
+
+// Mock the store
+vi.mock('@/store/app-store');
+
+const mockUseAppStore = useAppStore as ReturnType<typeof vi.fn>;
+
+/**
+ * Type definition for the mock store state to ensure type safety across tests
+ */
+interface MockStoreState {
+  enabledDynamicModelIds: string[];
+  enabledCursorModels: string[];
+  enabledGeminiModels: string[];
+  enabledCopilotModels: string[];
+  favoriteModels: string[];
+  toggleFavoriteModel: ReturnType<typeof vi.fn>;
+  codexModels: unknown[];
+  codexModelsLoading: boolean;
+  fetchCodexModels: ReturnType<typeof vi.fn>;
+  disabledProviders: string[];
+  claudeCompatibleProviders: string[];
+  defaultThinkingLevel?: string;
+  defaultReasoningEffort?: string;
+}
+
+/**
+ * Creates a mock store state with default values that can be overridden
+ * @param overrides - Partial state object to override defaults
+ * @returns A complete mock store state object
+ */
+function createMockStoreState(overrides: Partial<MockStoreState> = {}): MockStoreState {
+  return {
+    enabledDynamicModelIds: [],
+    enabledCursorModels: [],
+    enabledGeminiModels: [],
+    enabledCopilotModels: [],
+    favoriteModels: [],
+    toggleFavoriteModel: vi.fn(),
+    codexModels: [],
+    codexModelsLoading: false,
+    fetchCodexModels: vi.fn().mockResolvedValue([]),
+    disabledProviders: [],
+    claudeCompatibleProviders: [],
+    defaultThinkingLevel: undefined,
+    defaultReasoningEffort: undefined,
+    ...overrides,
+  };
+}
+
+describe('PhaseModelSelector - useShallow Selector Behavior', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('useShallow selector reactivity with enabledDynamicModelIds', () => {
+    it('should properly track selector call counts', () => {
+      // Verify that when useAppStore is called with a selector (useShallow pattern),
+      // it properly extracts the required state values
+
+      let _capturedSelector: ((state: MockStoreState) => Partial<MockStoreState>) | null = null;
+
+      // Mock useAppStore to capture the selector function
+      mockUseAppStore.mockImplementation((selector?: unknown) => {
+        if (typeof selector === 'function') {
+          _capturedSelector = selector as (state: MockStoreState) => Partial<MockStoreState>;
+        }
+        const mockState = createMockStoreState();
+        return typeof selector === 'function' ? selector(mockState) : mockState;
+      });
+
+      // Call useAppStore (simulating what PhaseModelSelector does)
+      const { result } = renderHook(() => useAppStore());
+
+      // Verify we got a result back (meaning the selector was applied)
+      expect(result).toBeDefined();
+      expect(typeof result).toBe('object');
+
+      // Now test that a selector function would extract enabledDynamicModelIds correctly
+      // This simulates the useShallow selector pattern
+      const testState = createMockStoreState({
+        enabledDynamicModelIds: ['model-1', 'model-2'],
+      });
+
+      // Simulate the selector function that useShallow wraps
+      const simulatedSelector = (state: MockStoreState) => ({
+        enabledDynamicModelIds: state.enabledDynamicModelIds,
+        enabledCursorModels: state.enabledCursorModels,
+        enabledGeminiModels: state.enabledGeminiModels,
+        enabledCopilotModels: state.enabledCopilotModels,
+      });
+
+      const selectorResult = simulatedSelector(testState);
+      expect(selectorResult).toHaveProperty('enabledDynamicModelIds');
+      expect(selectorResult.enabledDynamicModelIds).toEqual(['model-1', 'model-2']);
+    });
+
+    it('should detect changes when enabledDynamicModelIds array reference changes', () => {
+      // Test that useShallow properly handles array reference changes
+      // This simulates what happens when toggleDynamicModel is called
+
+      const results: Partial<MockStoreState>[] = [];
+
+      mockUseAppStore.mockImplementation((selector?: unknown) => {
+        const mockState = createMockStoreState({
+          enabledDynamicModelIds: ['model-1'],
+        });
+
+        const result = typeof selector === 'function' ? selector(mockState) : mockState;
+        results.push(result);
+        return result;
+      });
+
+      // First call
+      renderHook(() => useAppStore());
+      const firstCallResult = results[0];
+      expect(firstCallResult?.enabledDynamicModelIds).toEqual(['model-1']);
+
+      // Simulate store update with new array reference
+      mockUseAppStore.mockImplementation((selector?: unknown) => {
+        const mockState = createMockStoreState({
+          enabledDynamicModelIds: ['model-1', 'model-2'], // New array reference
+        });
+
+        const result = typeof selector === 'function' ? selector(mockState) : mockState;
+        results.push(result);
+        return result;
+      });
+
+      // Second call with updated state
+      renderHook(() => useAppStore());
+      const secondCallResult = results[1];
+      expect(secondCallResult?.enabledDynamicModelIds).toEqual(['model-1', 'model-2']);
+
+      // Verify that the arrays have different references (useShallow handles this)
+      expect(firstCallResult?.enabledDynamicModelIds).not.toBe(
+        secondCallResult?.enabledDynamicModelIds
+      );
+    });
+  });
+
+  describe('Store state integration with enabledDynamicModelIds', () => {
+    it('should return all required state values from the selector', () => {
+      mockUseAppStore.mockImplementation((selector?: unknown) => {
+        const mockState = createMockStoreState({
+          enabledCursorModels: ['cursor-small'],
+          enabledGeminiModels: ['gemini-flash'],
+          enabledCopilotModels: ['gpt-4o'],
+          enabledDynamicModelIds: ['custom-model-1'],
+          defaultThinkingLevel: 'medium',
+          defaultReasoningEffort: 'medium',
+        });
+
+        return typeof selector === 'function' ? selector(mockState) : mockState;
+      });
+
+      const result = renderHook(() => useAppStore()).result.current;
+
+      // Verify all required properties are present
+      expect(result).toHaveProperty('enabledCursorModels');
+      expect(result).toHaveProperty('enabledGeminiModels');
+      expect(result).toHaveProperty('enabledCopilotModels');
+      expect(result).toHaveProperty('favoriteModels');
+      expect(result).toHaveProperty('toggleFavoriteModel');
+      expect(result).toHaveProperty('codexModels');
+      expect(result).toHaveProperty('codexModelsLoading');
+      expect(result).toHaveProperty('fetchCodexModels');
+      expect(result).toHaveProperty('enabledDynamicModelIds');
+      expect(result).toHaveProperty('disabledProviders');
+      expect(result).toHaveProperty('claudeCompatibleProviders');
+      expect(result).toHaveProperty('defaultThinkingLevel');
+      expect(result).toHaveProperty('defaultReasoningEffort');
+
+      // Verify values
+      expect(result.enabledCursorModels).toEqual(['cursor-small']);
+      expect(result.enabledGeminiModels).toEqual(['gemini-flash']);
+      expect(result.enabledCopilotModels).toEqual(['gpt-4o']);
+      expect(result.enabledDynamicModelIds).toEqual(['custom-model-1']);
+    });
+
+    it('should handle empty enabledDynamicModelIds array', () => {
+      mockUseAppStore.mockImplementation((selector?: unknown) => {
+        const mockState = createMockStoreState({
+          enabledDynamicModelIds: [],
+        });
+
+        return typeof selector === 'function' ? selector(mockState) : mockState;
+      });
+
+      const result = renderHook(() => useAppStore()).result.current;
+      expect(result.enabledDynamicModelIds).toEqual([]);
+      expect(Array.isArray(result.enabledDynamicModelIds)).toBe(true);
+    });
+  });
+
+  describe('Array reference changes with useShallow', () => {
+    it('should detect changes when array content changes', () => {
+      const referenceComparisons: { array: string[]; isArray: boolean; length: number }[] = [];
+
+      mockUseAppStore.mockImplementation((selector?: unknown) => {
+        const mockState = createMockStoreState({
+          enabledDynamicModelIds: ['model-1', 'model-2'],
+        });
+
+        const result = typeof selector === 'function' ? selector(mockState) : mockState;
+        referenceComparisons.push({
+          array: result.enabledDynamicModelIds,
+          isArray: Array.isArray(result.enabledDynamicModelIds),
+          length: result.enabledDynamicModelIds.length,
+        });
+        return result;
+      });
+
+      // First call
+      renderHook(() => useAppStore());
+
+      // Update to new array with different length
+      mockUseAppStore.mockImplementation((selector?: unknown) => {
+        const mockState = createMockStoreState({
+          enabledDynamicModelIds: ['model-1', 'model-2', 'model-3'], // New array with additional item
+        });
+
+        const result = typeof selector === 'function' ? selector(mockState) : mockState;
+        referenceComparisons.push({
+          array: result.enabledDynamicModelIds,
+          isArray: Array.isArray(result.enabledDynamicModelIds),
+          length: result.enabledDynamicModelIds.length,
+        });
+        return result;
+      });
+
+      // Second call
+      renderHook(() => useAppStore());
+
+      // Verify both calls produced arrays
+      expect(referenceComparisons[0].isArray).toBe(true);
+      expect(referenceComparisons[1].isArray).toBe(true);
+
+      // Verify the length changed (new array reference)
+      expect(referenceComparisons[0].length).toBe(2);
+      expect(referenceComparisons[1].length).toBe(3);
+
+      // Verify different array references
+      expect(referenceComparisons[0].array).not.toBe(referenceComparisons[1].array);
+    });
+
+    it('should handle array removal correctly', () => {
+      const snapshots: string[][] = [];
+
+      mockUseAppStore.mockImplementation((selector?: unknown) => {
+        const mockState = createMockStoreState({
+          enabledDynamicModelIds: ['model-1', 'model-2', 'model-3'],
+        });
+
+        const result = typeof selector === 'function' ? selector(mockState) : mockState;
+        snapshots.push([...result.enabledDynamicModelIds]);
+        return result;
+      });
+
+      // Initial state with 3 models
+      renderHook(() => useAppStore());
+      expect(snapshots[0]).toEqual(['model-1', 'model-2', 'model-3']);
+
+      // Remove one model (simulate user toggling off)
+      mockUseAppStore.mockImplementation((selector?: unknown) => {
+        const mockState = createMockStoreState({
+          enabledDynamicModelIds: ['model-1', 'model-3'], // model-2 removed
+        });
+
+        const result = typeof selector === 'function' ? selector(mockState) : mockState;
+        snapshots.push([...result.enabledDynamicModelIds]);
+        return result;
+      });
+
+      // Updated state
+      renderHook(() => useAppStore());
+      expect(snapshots[1]).toEqual(['model-1', 'model-3']);
+
+      // Verify different array references
+      expect(snapshots[0]).not.toBe(snapshots[1]);
+    });
+  });
+
+  describe('Code contract verification', () => {
+    it('should verify useShallow import is present', () => {
+      // Read the component file and verify useShallow is imported
+      const componentPath = path.resolve(
+        __dirname,
+        '../../../src/components/views/settings-view/model-defaults/phase-model-selector.tsx'
+      );
+      const componentCode = fs.readFileSync(componentPath, 'utf-8');
+
+      // Verify the fix is in place
+      expect(componentCode).toMatch(/import.*useShallow.*from.*zustand\/react\/shallow/);
+    });
+
+    it('should verify useAppStore call uses useShallow', () => {
+      const componentPath = path.resolve(
+        __dirname,
+        '../../../src/components/views/settings-view/model-defaults/phase-model-selector.tsx'
+      );
+      const componentCode = fs.readFileSync(componentPath, 'utf-8');
+
+      // Look for the useAppStore pattern with useShallow
+      // The pattern should be: useAppStore(useShallow((state) => ({ ... })))
+      expect(componentCode).toMatch(/useAppStore\(\s*useShallow\(/);
+    });
+  });
+});
+
+describe('PhaseModelSelector - enabledDynamicModelIds filtering logic', () => {
+  describe('Array filtering behavior', () => {
+    it('should filter dynamic models based on enabledDynamicModelIds', () => {
+      // This test verifies the filtering logic concept
+      // The actual filtering happens in the useMemo within PhaseModelSelector
+
+      const dynamicOpencodeModels = [
+        {
+          id: 'custom-model-1',
+          name: 'Custom Model 1',
+          description: 'First',
+          tier: 'basic',
+          maxTokens: 200000,
+        },
+        {
+          id: 'custom-model-2',
+          name: 'Custom Model 2',
+          description: 'Second',
+          tier: 'premium',
+          maxTokens: 200000,
+        },
+        {
+          id: 'custom-model-3',
+          name: 'Custom Model 3',
+          description: 'Third',
+          tier: 'basic',
+          maxTokens: 200000,
+        },
+      ];
+
+      const enabledDynamicModelIds = ['custom-model-1', 'custom-model-3'];
+
+      // Simulate the filter logic from the component
+      const filteredModels = dynamicOpencodeModels.filter((model) =>
+        enabledDynamicModelIds.includes(model.id)
+      );
+
+      expect(filteredModels).toHaveLength(2);
+      expect(filteredModels.map((m) => m.id)).toEqual(['custom-model-1', 'custom-model-3']);
+    });
+
+    it('should return empty array when no dynamic models are enabled', () => {
+      const dynamicOpencodeModels = [
+        {
+          id: 'custom-model-1',
+          name: 'Custom Model 1',
+          description: 'First',
+          tier: 'basic',
+          maxTokens: 200000,
+        },
+      ];
+
+      const enabledDynamicModelIds: string[] = [];
+
+      const filteredModels = dynamicOpencodeModels.filter((model) =>
+        enabledDynamicModelIds.includes(model.id)
+      );
+
+      expect(filteredModels).toHaveLength(0);
+    });
+
+    it('should return all models when all are enabled', () => {
+      const dynamicOpencodeModels = [
+        {
+          id: 'custom-model-1',
+          name: 'Custom Model 1',
+          description: 'First',
+          tier: 'basic',
+          maxTokens: 200000,
+        },
+        {
+          id: 'custom-model-2',
+          name: 'Custom Model 2',
+          description: 'Second',
+          tier: 'premium',
+          maxTokens: 200000,
+        },
+      ];
+
+      const enabledDynamicModelIds = ['custom-model-1', 'custom-model-2'];
+
+      const filteredModels = dynamicOpencodeModels.filter((model) =>
+        enabledDynamicModelIds.includes(model.id)
+      );
+
+      expect(filteredModels).toHaveLength(2);
+    });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/components/pr-comment-resolution-pr-info.test.ts b/temp_repo/apps/ui/tests/unit/components/pr-comment-resolution-pr-info.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9abddf03c0691943ef910ba222ade06d68eed51f
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/components/pr-comment-resolution-pr-info.test.ts
@@ -0,0 +1,103 @@
+/**
+ * Tests for PRCommentResolutionPRInfo interface and URL passthrough
+ *
+ * Verifies that the PRCommentResolutionPRInfo type properly carries the URL
+ * from the board-view worktree panel through to the PR comment resolution dialog,
+ * enabling prUrl to be set on created features.
+ */
+
+import { describe, it, expect } from 'vitest';
+import type { PRCommentResolutionPRInfo } from '../../../src/components/dialogs/pr-comment-resolution-dialog';
+
+describe('PRCommentResolutionPRInfo interface', () => {
+  it('should accept PR info with url field', () => {
+    const prInfo: PRCommentResolutionPRInfo = {
+      number: 42,
+      title: 'Fix auth flow',
+      url: 'https://github.com/org/repo/pull/42',
+    };
+
+    expect(prInfo.url).toBe('https://github.com/org/repo/pull/42');
+  });
+
+  it('should accept PR info without url field (optional)', () => {
+    const prInfo: PRCommentResolutionPRInfo = {
+      number: 42,
+      title: 'Fix auth flow',
+    };
+
+    expect(prInfo.url).toBeUndefined();
+  });
+
+  it('should accept PR info with headRefName', () => {
+    const prInfo: PRCommentResolutionPRInfo = {
+      number: 42,
+      title: 'Fix auth flow',
+      headRefName: 'feature/auth-fix',
+      url: 'https://github.com/org/repo/pull/42',
+    };
+
+    expect(prInfo.headRefName).toBe('feature/auth-fix');
+    expect(prInfo.url).toBe('https://github.com/org/repo/pull/42');
+  });
+
+  it('should correctly represent board-view to dialog passthrough', () => {
+    // Simulates what handleAddressPRComments does in board-view.tsx
+    const worktree = { branch: 'fix/my-fix' };
+    const prInfo = {
+      number: 123,
+      title: 'My PR',
+      url: 'https://github.com/org/repo/pull/123',
+    };
+
+    const dialogPRInfo: PRCommentResolutionPRInfo = {
+      number: prInfo.number,
+      title: prInfo.title,
+      headRefName: worktree.branch,
+      url: prInfo.url,
+    };
+
+    expect(dialogPRInfo.number).toBe(123);
+    expect(dialogPRInfo.title).toBe('My PR');
+    expect(dialogPRInfo.headRefName).toBe('fix/my-fix');
+    expect(dialogPRInfo.url).toBe('https://github.com/org/repo/pull/123');
+  });
+
+  it('should handle board-view passthrough when PR has no URL', () => {
+    const worktree = { branch: 'fix/my-fix' };
+    const prInfo = { number: 123, title: 'My PR' };
+
+    const dialogPRInfo: PRCommentResolutionPRInfo = {
+      number: prInfo.number,
+      title: prInfo.title,
+      headRefName: worktree.branch,
+    };
+
+    expect(dialogPRInfo.url).toBeUndefined();
+  });
+
+  it('should spread prUrl conditionally based on url presence', () => {
+    // This tests the pattern: ...(pr.url ? { prUrl: pr.url } : {})
+    const prWithUrl: PRCommentResolutionPRInfo = {
+      number: 1,
+      title: 'Test',
+      url: 'https://github.com/test',
+    };
+    const prWithoutUrl: PRCommentResolutionPRInfo = {
+      number: 2,
+      title: 'Test',
+    };
+
+    const featureWithUrl = {
+      id: 'test',
+      ...(prWithUrl.url ? { prUrl: prWithUrl.url } : {}),
+    };
+    const featureWithoutUrl = {
+      id: 'test',
+      ...(prWithoutUrl.url ? { prUrl: prWithoutUrl.url } : {}),
+    };
+
+    expect(featureWithUrl).toHaveProperty('prUrl', 'https://github.com/test');
+    expect(featureWithoutUrl).not.toHaveProperty('prUrl');
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/components/worktree-panel-props.test.ts b/temp_repo/apps/ui/tests/unit/components/worktree-panel-props.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ab451248b91d960c8bf84cb4fc850b4df26457f4
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/components/worktree-panel-props.test.ts
@@ -0,0 +1,192 @@
+/**
+ * Tests to validate worktree-panel.tsx prop integrity after rebase conflict resolution.
+ *
+ * During the rebase onto upstream/v1.0.0rc, duplicate JSX props (isDevServerStarting,
+ * isStartingAnyDevServer) were introduced by overlapping commits. This test validates
+ * that the source code has no duplicate JSX prop assignments, which would cause
+ * React warnings and unpredictable behavior (last value wins).
+ */
+
+import { describe, it, expect, beforeAll } from 'vitest';
+import * as fs from 'fs';
+import * as path from 'path';
+
+describe('worktree-panel.tsx prop integrity', () => {
+  const filePath = path.resolve(
+    __dirname,
+    '../../../src/components/views/board-view/worktree-panel/worktree-panel.tsx'
+  );
+
+  let sourceCode: string;
+
+  beforeAll(() => {
+    sourceCode = fs.readFileSync(filePath, 'utf-8');
+  });
+
+  it('should not have duplicate isDevServerStarting props within any single JSX element', () => {
+    // Parse JSX elements and verify no element has isDevServerStarting more than once.
+    // Props are passed to WorktreeTab, WorktreeMobileDropdown, WorktreeActionsDropdown, etc.
+    // Each individual element should have the prop at most once.
+    const lines = sourceCode.split('\n');
+    let inElement = false;
+    let propCount = 0;
+    let elementName = '';
+    const violations: string[] = [];
+
+    for (let i = 0; i < lines.length; i++) {
+      const trimmed = lines[i].trimStart();
+
+      const elementStart = trimmed.match(/^<(\w+)\b/);
+      if (elementStart && !trimmed.startsWith('</')) {
+        inElement = true;
+        propCount = 0;
+        elementName = elementStart[1];
+      }
+
+      if (inElement && trimmed.includes('isDevServerStarting=')) {
+        propCount++;
+        if (propCount > 1) {
+          violations.push(`Duplicate isDevServerStarting in <${elementName}> at line ${i + 1}`);
+        }
+      }
+
+      if (
+        inElement &&
+        (trimmed.includes('/>') || (trimmed.endsWith('>') && !trimmed.includes('=')))
+      ) {
+        inElement = false;
+      }
+    }
+
+    expect(violations).toEqual([]);
+    // Verify the prop is actually used somewhere
+    expect(sourceCode).toContain('isDevServerStarting=');
+  });
+
+  it('should not have duplicate isStartingAnyDevServer props within any single JSX element', () => {
+    const lines = sourceCode.split('\n');
+    let inElement = false;
+    let propCount = 0;
+    let elementName = '';
+    const violations: string[] = [];
+
+    for (let i = 0; i < lines.length; i++) {
+      const trimmed = lines[i].trimStart();
+
+      const elementStart = trimmed.match(/^<(\w+)\b/);
+      if (elementStart && !trimmed.startsWith('</')) {
+        inElement = true;
+        propCount = 0;
+        elementName = elementStart[1];
+      }
+
+      if (inElement && trimmed.includes('isStartingAnyDevServer=')) {
+        propCount++;
+        if (propCount > 1) {
+          violations.push(`Duplicate isStartingAnyDevServer in <${elementName}> at line ${i + 1}`);
+        }
+      }
+
+      if (
+        inElement &&
+        (trimmed.includes('/>') || (trimmed.endsWith('>') && !trimmed.includes('=')))
+      ) {
+        inElement = false;
+      }
+    }
+
+    expect(violations).toEqual([]);
+  });
+
+  it('should not have any JSX element with duplicate prop names', () => {
+    // Parse all JSX-like blocks and check for duplicate props
+    // This regex finds prop assignments like propName={...} or propName="..."
+    const lines = sourceCode.split('\n');
+
+    // Track props per JSX element by looking for indentation patterns
+    // A JSX opening tag starts with < and ends when indentation drops
+    let currentJsxProps: Map<string, number[]> = new Map();
+    let inJsxElement = false;
+    let _elementIndent = 0;
+
+    const duplicates: Array<{ prop: string; line: number; element: string }> = [];
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const trimmed = line.trimStart();
+      const indent = line.length - trimmed.length;
+
+      // Detect start of JSX element
+      if (trimmed.startsWith('<') && !trimmed.startsWith('</') && !trimmed.startsWith('{')) {
+        const elementMatch = trimmed.match(/^<(\w+)/);
+        if (elementMatch) {
+          inJsxElement = true;
+          _elementIndent = indent;
+          currentJsxProps = new Map();
+        }
+      }
+
+      if (inJsxElement) {
+        // Extract prop names from this line (prop={value} or prop="value")
+        const propMatches = trimmed.matchAll(/\b(\w+)=\{/g);
+        for (const match of propMatches) {
+          const propName = match[1];
+          if (!currentJsxProps.has(propName)) {
+            currentJsxProps.set(propName, []);
+          }
+          currentJsxProps.get(propName)!.push(i + 1);
+
+          // Check for duplicates
+          if (currentJsxProps.get(propName)!.length > 1) {
+            duplicates.push({
+              prop: propName,
+              line: i + 1,
+              element: trimmed.substring(0, 50),
+            });
+          }
+        }
+
+        // Detect end of JSX element (self-closing /> or >)
+        if (trimmed.includes('/>') || (trimmed.endsWith('>') && !trimmed.includes('='))) {
+          inJsxElement = false;
+          currentJsxProps = new Map();
+        }
+      }
+    }
+
+    expect(duplicates).toEqual([]);
+  });
+});
+
+describe('worktree-panel.tsx uses both isStartingAnyDevServer and isDevServerStarting', () => {
+  const filePath = path.resolve(
+    __dirname,
+    '../../../src/components/views/board-view/worktree-panel/worktree-panel.tsx'
+  );
+
+  let sourceCode: string;
+
+  beforeAll(() => {
+    sourceCode = fs.readFileSync(filePath, 'utf-8');
+  });
+
+  it('should use isStartingAnyDevServer from the useDevServers hook', () => {
+    // The hook destructuring should include isStartingAnyDevServer
+    expect(sourceCode).toContain('isStartingAnyDevServer');
+  });
+
+  it('should use isDevServerStarting from the useDevServers hook', () => {
+    // The hook destructuring should include isDevServerStarting
+    expect(sourceCode).toContain('isDevServerStarting');
+  });
+
+  it('isStartingAnyDevServer and isDevServerStarting should be distinct concepts', () => {
+    // isStartingAnyDevServer is a boolean (any server starting)
+    // isDevServerStarting is a function (specific worktree starting)
+    // Both should be destructured from the hook
+    const hookDestructuring = sourceCode.match(
+      /const\s*\{[^}]*isStartingAnyDevServer[^}]*isDevServerStarting[^}]*\}/s
+    );
+    expect(hookDestructuring).not.toBeNull();
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/hooks/use-board-column-features.test.ts b/temp_repo/apps/ui/tests/unit/hooks/use-board-column-features.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c02ddbb5365d56fde7a4379328ff955cbd50b399
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/hooks/use-board-column-features.test.ts
@@ -0,0 +1,438 @@
+/**
+ * Unit tests for useBoardColumnFeatures hook
+ * These tests verify the column filtering logic, including the race condition
+ * protection for recently completed features appearing in backlog.
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useBoardColumnFeatures } from '../../../src/components/views/board-view/hooks/use-board-column-features';
+import { useAppStore } from '../../../src/store/app-store';
+import type { Feature } from '@automaker/types';
+
+// Helper to create mock features
+function createMockFeature(id: string, status: string, options: Partial<Feature> = {}): Feature {
+  return {
+    id,
+    title: `Feature ${id}`,
+    category: 'test',
+    description: `Description for ${id}`,
+    status,
+    ...options,
+  };
+}
+
+describe('useBoardColumnFeatures', () => {
+  const defaultProps = {
+    features: [] as Feature[],
+    runningAutoTasks: [] as string[],
+    runningAutoTasksAllWorktrees: [] as string[],
+    searchQuery: '',
+    currentWorktreePath: null as string | null,
+    currentWorktreeBranch: null as string | null,
+    projectPath: '/test/project' as string | null,
+  };
+
+  beforeEach(() => {
+    // Reset store state
+    useAppStore.setState({
+      recentlyCompletedFeatures: new Set<string>(),
+    });
+    // Suppress console.debug in tests
+    vi.spyOn(console, 'debug').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('basic column mapping', () => {
+    it('should map backlog features to backlog column', () => {
+      const features = [createMockFeature('feat-1', 'backlog')];
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+        })
+      );
+
+      expect(result.current.columnFeaturesMap.backlog).toHaveLength(1);
+      expect(result.current.columnFeaturesMap.backlog[0].id).toBe('feat-1');
+    });
+
+    it('should map merge_conflict features to backlog column', () => {
+      const features = [createMockFeature('feat-1', 'merge_conflict')];
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+        })
+      );
+
+      expect(result.current.columnFeaturesMap.backlog).toHaveLength(1);
+      expect(result.current.columnFeaturesMap.backlog[0].id).toBe('feat-1');
+    });
+
+    it('should map in_progress features to in_progress column', () => {
+      const features = [createMockFeature('feat-1', 'in_progress')];
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+        })
+      );
+
+      expect(result.current.columnFeaturesMap.in_progress).toHaveLength(1);
+      expect(result.current.columnFeaturesMap.in_progress[0].id).toBe('feat-1');
+    });
+
+    it('should map verified features to verified column', () => {
+      const features = [createMockFeature('feat-1', 'verified')];
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+        })
+      );
+
+      expect(result.current.columnFeaturesMap.verified).toHaveLength(1);
+      expect(result.current.columnFeaturesMap.verified[0].id).toBe('feat-1');
+    });
+
+    it('should map completed features to completed column', () => {
+      const features = [createMockFeature('feat-1', 'completed')];
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+        })
+      );
+
+      expect(result.current.columnFeaturesMap.completed).toHaveLength(1);
+      expect(result.current.columnFeaturesMap.completed[0].id).toBe('feat-1');
+    });
+  });
+
+  describe('race condition protection for running tasks', () => {
+    it('should place running features in in_progress even if status is backlog', () => {
+      const features = [createMockFeature('feat-1', 'backlog')];
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+          runningAutoTasksAllWorktrees: ['feat-1'],
+        })
+      );
+
+      // Should be in in_progress due to running task protection
+      expect(result.current.columnFeaturesMap.in_progress).toHaveLength(1);
+      expect(result.current.columnFeaturesMap.backlog).toHaveLength(0);
+    });
+
+    it('should place running ready features in in_progress', () => {
+      const features = [createMockFeature('feat-1', 'ready')];
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+          runningAutoTasksAllWorktrees: ['feat-1'],
+        })
+      );
+
+      expect(result.current.columnFeaturesMap.in_progress).toHaveLength(1);
+      expect(result.current.columnFeaturesMap.backlog).toHaveLength(0);
+    });
+
+    it('should place running interrupted features in in_progress', () => {
+      const features = [createMockFeature('feat-1', 'interrupted')];
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+          runningAutoTasksAllWorktrees: ['feat-1'],
+        })
+      );
+
+      expect(result.current.columnFeaturesMap.in_progress).toHaveLength(1);
+      expect(result.current.columnFeaturesMap.backlog).toHaveLength(0);
+    });
+  });
+
+  describe('recently completed features race condition protection', () => {
+    it('should NOT place recently completed features in backlog (stale cache race condition)', () => {
+      const features = [createMockFeature('feat-1', 'backlog')];
+
+      // Simulate the race condition: feature just completed but cache still has status=backlog
+      useAppStore.setState({
+        recentlyCompletedFeatures: new Set(['feat-1']),
+      });
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+          // Feature is no longer in running tasks (was just removed)
+          runningAutoTasksAllWorktrees: [],
+        })
+      );
+
+      // Feature should NOT appear in backlog due to race condition protection
+      expect(result.current.columnFeaturesMap.backlog).toHaveLength(0);
+      // And not in in_progress since it's not running
+      expect(result.current.columnFeaturesMap.in_progress).toHaveLength(0);
+    });
+
+    it('should allow recently completed features with verified status to go to verified column', () => {
+      const features = [createMockFeature('feat-1', 'verified')];
+
+      // Feature is both recently completed AND has correct status
+      useAppStore.setState({
+        recentlyCompletedFeatures: new Set(['feat-1']),
+      });
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+          runningAutoTasksAllWorktrees: [],
+        })
+      );
+
+      // Feature should be in verified (status takes precedence)
+      expect(result.current.columnFeaturesMap.verified).toHaveLength(1);
+      expect(result.current.columnFeaturesMap.backlog).toHaveLength(0);
+    });
+
+    it('should protect multiple recently completed features from appearing in backlog', () => {
+      const features = [
+        createMockFeature('feat-1', 'backlog'),
+        createMockFeature('feat-2', 'backlog'),
+        createMockFeature('feat-3', 'backlog'),
+      ];
+
+      // Multiple features just completed but cache has stale status
+      useAppStore.setState({
+        recentlyCompletedFeatures: new Set(['feat-1', 'feat-2', 'feat-3']),
+      });
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+          runningAutoTasksAllWorktrees: [],
+        })
+      );
+
+      // None should appear in backlog
+      expect(result.current.columnFeaturesMap.backlog).toHaveLength(0);
+    });
+
+    it('should only protect recently completed features, not all backlog features', () => {
+      const features = [
+        createMockFeature('feat-completed', 'backlog'), // Recently completed
+        createMockFeature('feat-normal', 'backlog'), // Normal backlog feature
+      ];
+
+      // Only one feature is recently completed
+      useAppStore.setState({
+        recentlyCompletedFeatures: new Set(['feat-completed']),
+      });
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+          runningAutoTasksAllWorktrees: [],
+        })
+      );
+
+      // Normal feature should still appear in backlog
+      expect(result.current.columnFeaturesMap.backlog).toHaveLength(1);
+      expect(result.current.columnFeaturesMap.backlog[0].id).toBe('feat-normal');
+    });
+
+    it('should protect ready status features that are recently completed', () => {
+      const features = [createMockFeature('feat-1', 'ready')];
+
+      useAppStore.setState({
+        recentlyCompletedFeatures: new Set(['feat-1']),
+      });
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+          runningAutoTasksAllWorktrees: [],
+        })
+      );
+
+      // Should not appear in backlog (ready normally goes to backlog)
+      expect(result.current.columnFeaturesMap.backlog).toHaveLength(0);
+    });
+
+    it('should protect interrupted status features that are recently completed', () => {
+      const features = [createMockFeature('feat-1', 'interrupted')];
+
+      useAppStore.setState({
+        recentlyCompletedFeatures: new Set(['feat-1']),
+      });
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+          runningAutoTasksAllWorktrees: [],
+        })
+      );
+
+      // Should not appear in backlog (interrupted normally goes to backlog)
+      expect(result.current.columnFeaturesMap.backlog).toHaveLength(0);
+    });
+  });
+
+  describe('recently completed features clearing on cache refresh', () => {
+    it('should clear recently completed features when features list updates with terminal status', async () => {
+      const {
+        addRecentlyCompletedFeature,
+        clearRecentlyCompletedFeatures: _clearRecentlyCompletedFeatures,
+      } = useAppStore.getState();
+
+      // Add feature to recently completed
+      act(() => {
+        addRecentlyCompletedFeature('feat-1');
+      });
+
+      expect(useAppStore.getState().recentlyCompletedFeatures.has('feat-1')).toBe(true);
+
+      // Simulate cache refresh with updated feature status
+      const features = [createMockFeature('feat-1', 'verified')];
+
+      const { rerender } = renderHook((props) => useBoardColumnFeatures(props), {
+        initialProps: {
+          ...defaultProps,
+          features: [],
+        },
+      });
+
+      // Rerender with the new features (simulating cache refresh)
+      rerender({
+        ...defaultProps,
+        features,
+      });
+
+      // The useEffect should detect that feat-1 now has verified status
+      // and clear the recentlyCompletedFeatures
+      // Note: This happens asynchronously in the useEffect
+      await vi.waitFor(() => {
+        expect(useAppStore.getState().recentlyCompletedFeatures.has('feat-1')).toBe(false);
+      });
+    });
+
+    it('should clear recently completed when completed status is detected', async () => {
+      const { addRecentlyCompletedFeature } = useAppStore.getState();
+
+      act(() => {
+        addRecentlyCompletedFeature('feat-1');
+      });
+
+      const features = [createMockFeature('feat-1', 'completed')];
+
+      renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+        })
+      );
+
+      await vi.waitFor(() => {
+        expect(useAppStore.getState().recentlyCompletedFeatures.has('feat-1')).toBe(false);
+      });
+    });
+  });
+
+  describe('combined running task and recently completed protection', () => {
+    it('should prioritize running task protection over recently completed for same feature', () => {
+      const features = [createMockFeature('feat-1', 'backlog')];
+
+      // Feature is both in running tasks AND recently completed
+      useAppStore.setState({
+        recentlyCompletedFeatures: new Set(['feat-1']),
+      });
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+          runningAutoTasksAllWorktrees: ['feat-1'],
+        })
+      );
+
+      // Running task protection should win - feature goes to in_progress
+      expect(result.current.columnFeaturesMap.in_progress).toHaveLength(1);
+      expect(result.current.columnFeaturesMap.backlog).toHaveLength(0);
+    });
+
+    it('should handle mixed scenario with running, recently completed, and normal features', () => {
+      const features = [
+        createMockFeature('feat-running', 'backlog'), // Running but status stale
+        createMockFeature('feat-completed', 'backlog'), // Just completed but status stale
+        createMockFeature('feat-normal', 'backlog'), // Normal backlog feature
+      ];
+
+      useAppStore.setState({
+        recentlyCompletedFeatures: new Set(['feat-completed']),
+      });
+
+      const { result } = renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+          runningAutoTasksAllWorktrees: ['feat-running'],
+        })
+      );
+
+      // Running feature -> in_progress
+      expect(result.current.columnFeaturesMap.in_progress).toHaveLength(1);
+      expect(result.current.columnFeaturesMap.in_progress[0].id).toBe('feat-running');
+
+      // Normal feature -> backlog
+      expect(result.current.columnFeaturesMap.backlog).toHaveLength(1);
+      expect(result.current.columnFeaturesMap.backlog[0].id).toBe('feat-normal');
+
+      // Recently completed feature -> nowhere (protected from backlog flash)
+      const allColumns = Object.values(result.current.columnFeaturesMap).flat();
+      const completedFeature = allColumns.find((f) => f.id === 'feat-completed');
+      expect(completedFeature).toBeUndefined();
+    });
+  });
+
+  describe('debug logging', () => {
+    it('should log debug message when recently completed feature is skipped from backlog', () => {
+      const debugSpy = vi.spyOn(console, 'debug').mockImplementation(() => {});
+
+      const features = [createMockFeature('feat-1', 'backlog')];
+
+      useAppStore.setState({
+        recentlyCompletedFeatures: new Set(['feat-1']),
+      });
+
+      renderHook(() =>
+        useBoardColumnFeatures({
+          ...defaultProps,
+          features,
+          runningAutoTasksAllWorktrees: [],
+        })
+      );
+
+      expect(debugSpy).toHaveBeenCalledWith(expect.stringContaining('feat-1 recently completed'));
+    });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/hooks/use-dev-servers.test.ts b/temp_repo/apps/ui/tests/unit/hooks/use-dev-servers.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aa40ab3598c6d8354181fcb99a611369cf560ab2
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/hooks/use-dev-servers.test.ts
@@ -0,0 +1,252 @@
+/**
+ * Tests for useDevServers hook
+ * Verifies dev server state management, server lifecycle callbacks,
+ * and correct distinction between isStartingAnyDevServer and isDevServerStarting.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useDevServers } from '../../../src/components/views/board-view/worktree-panel/hooks/use-dev-servers';
+import { getElectronAPI } from '@/lib/electron';
+import type { ElectronAPI } from '@/lib/electron';
+import type { WorktreeInfo } from '../../../src/components/views/board-view/worktree-panel/types';
+
+vi.mock('@/lib/electron');
+vi.mock('@automaker/utils/logger', () => ({
+  createLogger: () => ({
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    debug: vi.fn(),
+  }),
+}));
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    warning: vi.fn(),
+  },
+}));
+
+const mockGetElectronAPI = vi.mocked(getElectronAPI);
+
+describe('useDevServers', () => {
+  const projectPath = '/test/project';
+
+  const createWorktree = (overrides: Partial<WorktreeInfo> = {}): WorktreeInfo => ({
+    path: '/test/project/worktrees/feature-1',
+    branch: 'feature/test-1',
+    isMain: false,
+    isCurrent: false,
+    hasWorktree: true,
+    ...overrides,
+  });
+
+  const mainWorktree = createWorktree({
+    path: '/test/project',
+    branch: 'main',
+    isMain: true,
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetElectronAPI.mockReturnValue(null);
+  });
+
+  describe('initial state', () => {
+    it('should return isStartingAnyDevServer as false initially', () => {
+      const { result } = renderHook(() => useDevServers({ projectPath }));
+      expect(result.current.isStartingAnyDevServer).toBe(false);
+    });
+
+    it('should return isDevServerRunning as false for any worktree initially', () => {
+      const { result } = renderHook(() => useDevServers({ projectPath }));
+      expect(result.current.isDevServerRunning(mainWorktree)).toBe(false);
+    });
+
+    it('should return isDevServerStarting as false for any worktree initially', () => {
+      const { result } = renderHook(() => useDevServers({ projectPath }));
+      expect(result.current.isDevServerStarting(mainWorktree)).toBe(false);
+    });
+
+    it('should return undefined for getDevServerInfo when no server running', () => {
+      const { result } = renderHook(() => useDevServers({ projectPath }));
+      expect(result.current.getDevServerInfo(mainWorktree)).toBeUndefined();
+    });
+  });
+
+  describe('isDevServerStarting vs isStartingAnyDevServer', () => {
+    it('isDevServerStarting should check per-worktree starting state', () => {
+      const { result } = renderHook(() => useDevServers({ projectPath }));
+
+      const worktreeA = createWorktree({
+        path: '/test/worktree-a',
+        branch: 'feature/a',
+      });
+      const worktreeB = createWorktree({
+        path: '/test/worktree-b',
+        branch: 'feature/b',
+      });
+
+      // Neither should be starting initially
+      expect(result.current.isDevServerStarting(worktreeA)).toBe(false);
+      expect(result.current.isDevServerStarting(worktreeB)).toBe(false);
+    });
+
+    it('isStartingAnyDevServer should be a single boolean for all servers', () => {
+      const { result } = renderHook(() => useDevServers({ projectPath }));
+      expect(typeof result.current.isStartingAnyDevServer).toBe('boolean');
+    });
+  });
+
+  describe('getWorktreeKey', () => {
+    it('should use projectPath for main worktree', () => {
+      const { result } = renderHook(() => useDevServers({ projectPath }));
+
+      // The main worktree should normalize to projectPath
+      const mainWt = createWorktree({ isMain: true, path: '/test/project' });
+      const otherWt = createWorktree({ isMain: false, path: '/test/other' });
+
+      // Both should resolve to different keys
+      expect(result.current.isDevServerRunning(mainWt)).toBe(false);
+      expect(result.current.isDevServerRunning(otherWt)).toBe(false);
+    });
+  });
+
+  describe('handleStartDevServer', () => {
+    it('should call startDevServer API when available', async () => {
+      const mockStartDevServer = vi.fn().mockResolvedValue({
+        success: true,
+        result: {
+          worktreePath: '/test/project',
+          port: 3000,
+          url: 'http://localhost:3000',
+        },
+      });
+
+      mockGetElectronAPI.mockReturnValue({
+        worktree: {
+          startDevServer: mockStartDevServer,
+          listDevServers: vi.fn().mockResolvedValue({ success: true, result: { servers: [] } }),
+          onDevServerLogEvent: vi.fn().mockReturnValue(vi.fn()),
+        },
+      } as unknown as ElectronAPI);
+
+      const { result } = renderHook(() => useDevServers({ projectPath }));
+
+      await act(async () => {
+        await result.current.handleStartDevServer(mainWorktree);
+      });
+
+      expect(mockStartDevServer).toHaveBeenCalledWith(projectPath, projectPath);
+    });
+
+    it('should set isStartingAnyDevServer to true during start and false after completion', async () => {
+      let resolveStart: (value: unknown) => void;
+      const startPromise = new Promise((resolve) => {
+        resolveStart = resolve;
+      });
+      const mockStartDevServer = vi.fn().mockReturnValue(startPromise);
+
+      mockGetElectronAPI.mockReturnValue({
+        worktree: {
+          startDevServer: mockStartDevServer,
+          listDevServers: vi.fn().mockResolvedValue({ success: true, result: { servers: [] } }),
+          onDevServerLogEvent: vi.fn().mockReturnValue(vi.fn()),
+        },
+      } as unknown as ElectronAPI);
+
+      const { result } = renderHook(() => useDevServers({ projectPath }));
+
+      // Initially not starting
+      expect(result.current.isStartingAnyDevServer).toBe(false);
+
+      // Start server (don't await - it will hang until we resolve)
+      let startDone = false;
+      act(() => {
+        result.current.handleStartDevServer(mainWorktree).then(() => {
+          startDone = true;
+        });
+      });
+
+      // Resolve the start promise
+      await act(async () => {
+        resolveStart!({
+          success: true,
+          result: { worktreePath: '/test/project', port: 3000, url: 'http://localhost:3000' },
+        });
+        await new Promise((r) => setTimeout(r, 10));
+      });
+
+      // After completion, should be false again
+      expect(result.current.isStartingAnyDevServer).toBe(false);
+      expect(startDone).toBe(true);
+    });
+  });
+
+  describe('handleStopDevServer', () => {
+    it('should call stopDevServer API when available', async () => {
+      const mockStopDevServer = vi.fn().mockResolvedValue({
+        success: true,
+        result: { message: 'Dev server stopped' },
+      });
+
+      mockGetElectronAPI.mockReturnValue({
+        worktree: {
+          stopDevServer: mockStopDevServer,
+          listDevServers: vi.fn().mockResolvedValue({ success: true, result: { servers: [] } }),
+          onDevServerLogEvent: vi.fn().mockReturnValue(vi.fn()),
+        },
+      } as unknown as ElectronAPI);
+
+      const { result } = renderHook(() => useDevServers({ projectPath }));
+
+      await act(async () => {
+        await result.current.handleStopDevServer(mainWorktree);
+      });
+
+      expect(mockStopDevServer).toHaveBeenCalledWith(projectPath);
+    });
+  });
+
+  describe('fetchDevServers on mount', () => {
+    it('should fetch running dev servers on initialization', async () => {
+      const mockListDevServers = vi.fn().mockResolvedValue({
+        success: true,
+        result: {
+          servers: [
+            {
+              worktreePath: '/test/project',
+              port: 3000,
+              url: 'http://localhost:3000',
+              urlDetected: true,
+            },
+          ],
+        },
+      });
+
+      mockGetElectronAPI.mockReturnValue({
+        worktree: {
+          listDevServers: mockListDevServers,
+          onDevServerLogEvent: vi.fn().mockReturnValue(vi.fn()),
+        },
+      } as unknown as ElectronAPI);
+
+      const { result } = renderHook(() => useDevServers({ projectPath }));
+
+      // Wait for initial fetch
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      });
+
+      expect(result.current.isDevServerRunning(mainWorktree)).toBe(true);
+      expect(result.current.getDevServerInfo(mainWorktree)).toEqual(
+        expect.objectContaining({
+          port: 3000,
+          url: 'http://localhost:3000',
+          urlDetected: true,
+        })
+      );
+    });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/hooks/use-features-cache.test.ts b/temp_repo/apps/ui/tests/unit/hooks/use-features-cache.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..16c9ff9a14eee253dfbdc370506e5b4853ae7b6d
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/hooks/use-features-cache.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+import { sanitizePersistedFeatures } from '../../../src/hooks/queries/use-features';
+
+describe('sanitizePersistedFeatures', () => {
+  it('returns empty array for non-array values', () => {
+    expect(sanitizePersistedFeatures(null)).toEqual([]);
+    expect(sanitizePersistedFeatures({})).toEqual([]);
+    expect(sanitizePersistedFeatures('bad')).toEqual([]);
+  });
+
+  it('drops entries without a valid id', () => {
+    const sanitized = sanitizePersistedFeatures([
+      null,
+      {},
+      { id: '' },
+      { id: '   ' },
+      { id: 'feature-a', description: 'valid', category: '' },
+    ]);
+
+    expect(sanitized).toHaveLength(1);
+    expect(sanitized[0].id).toBe('feature-a');
+  });
+
+  it('normalizes malformed fields to safe defaults', () => {
+    const sanitized = sanitizePersistedFeatures([
+      {
+        id: 'feature-1',
+        description: 123,
+        category: null,
+        status: 'not-a-real-status',
+        steps: ['first', 2, 'third'],
+      },
+    ]);
+
+    expect(sanitized).toEqual([
+      {
+        id: 'feature-1',
+        description: '',
+        category: '',
+        status: 'backlog',
+        steps: ['first', 'third'],
+        title: undefined,
+        titleGenerating: undefined,
+        branchName: undefined,
+      },
+    ]);
+  });
+
+  it('keeps valid static and pipeline statuses', () => {
+    const sanitized = sanitizePersistedFeatures([
+      { id: 'feature-static', description: '', category: '', status: 'in_progress' },
+      { id: 'feature-pipeline', description: '', category: '', status: 'pipeline_tests' },
+    ]);
+
+    expect(sanitized[0].status).toBe('in_progress');
+    expect(sanitized[1].status).toBe('pipeline_tests');
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/hooks/use-guided-prompts.test.ts b/temp_repo/apps/ui/tests/unit/hooks/use-guided-prompts.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d1a8e4f71432e11b9155815af71a27bffbe1129a
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/hooks/use-guided-prompts.test.ts
@@ -0,0 +1,209 @@
+/**
+ * Unit tests for useGuidedPrompts hook
+ * Tests memoization of prompts and categories arrays to ensure
+ * they maintain referential stability when underlying data hasn't changed.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook } from '@testing-library/react';
+
+// Mock the queries module
+vi.mock('@/hooks/queries', () => ({
+  useIdeationPrompts: vi.fn(),
+}));
+
+// Must import after mock setup
+import { useGuidedPrompts } from '../../../src/hooks/use-guided-prompts';
+import { useIdeationPrompts } from '@/hooks/queries';
+
+const mockUseIdeationPrompts = vi.mocked(useIdeationPrompts);
+
+describe('useGuidedPrompts', () => {
+  const mockPrompts = [
+    { id: 'p1', category: 'feature' as const, title: 'Prompt 1', prompt: 'Do thing 1' },
+    { id: 'p2', category: 'bugfix' as const, title: 'Prompt 2', prompt: 'Do thing 2' },
+  ];
+
+  const mockCategories = [
+    { id: 'feature' as const, label: 'Feature', description: 'Feature prompts' },
+    { id: 'bugfix' as const, label: 'Bug Fix', description: 'Bug fix prompts' },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return empty arrays when data is undefined', () => {
+    mockUseIdeationPrompts.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+      error: null,
+      refetch: vi.fn(),
+    } as ReturnType<typeof useIdeationPrompts>);
+
+    const { result } = renderHook(() => useGuidedPrompts());
+
+    expect(result.current.prompts).toEqual([]);
+    expect(result.current.categories).toEqual([]);
+    expect(result.current.isLoading).toBe(true);
+  });
+
+  it('should return prompts and categories when data is available', () => {
+    mockUseIdeationPrompts.mockReturnValue({
+      data: { prompts: mockPrompts, categories: mockCategories },
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    } as ReturnType<typeof useIdeationPrompts>);
+
+    const { result } = renderHook(() => useGuidedPrompts());
+
+    expect(result.current.prompts).toEqual(mockPrompts);
+    expect(result.current.categories).toEqual(mockCategories);
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it('should memoize prompts array reference when data has not changed', () => {
+    const stableData = { prompts: mockPrompts, categories: mockCategories };
+
+    mockUseIdeationPrompts.mockReturnValue({
+      data: stableData,
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    } as ReturnType<typeof useIdeationPrompts>);
+
+    const { result, rerender } = renderHook(() => useGuidedPrompts());
+
+    const firstPrompts = result.current.prompts;
+    const firstCategories = result.current.categories;
+
+    // Re-render with same data
+    rerender();
+
+    // References should be stable (same object, not a new empty array on each render)
+    expect(result.current.prompts).toBe(firstPrompts);
+    expect(result.current.categories).toBe(firstCategories);
+  });
+
+  it('should update prompts reference when data.prompts changes', () => {
+    const refetchFn = vi.fn();
+    mockUseIdeationPrompts.mockReturnValue({
+      data: { prompts: mockPrompts, categories: mockCategories },
+      isLoading: false,
+      error: null,
+      refetch: refetchFn,
+    } as ReturnType<typeof useIdeationPrompts>);
+
+    const { result, rerender } = renderHook(() => useGuidedPrompts());
+
+    const firstPrompts = result.current.prompts;
+
+    // Update with new prompts array
+    const newPrompts = [
+      ...mockPrompts,
+      { id: 'p3', category: 'feature' as const, title: 'Prompt 3', prompt: 'Do thing 3' },
+    ];
+    mockUseIdeationPrompts.mockReturnValue({
+      data: { prompts: newPrompts, categories: mockCategories },
+      isLoading: false,
+      error: null,
+      refetch: refetchFn,
+    } as ReturnType<typeof useIdeationPrompts>);
+
+    rerender();
+
+    // Reference should be different since data.prompts changed
+    expect(result.current.prompts).not.toBe(firstPrompts);
+    expect(result.current.prompts).toEqual(newPrompts);
+  });
+
+  it('should filter prompts by category', () => {
+    mockUseIdeationPrompts.mockReturnValue({
+      data: { prompts: mockPrompts, categories: mockCategories },
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    } as ReturnType<typeof useIdeationPrompts>);
+
+    const { result } = renderHook(() => useGuidedPrompts());
+
+    const featurePrompts = result.current.getPromptsByCategory('feature' as const);
+    expect(featurePrompts).toHaveLength(1);
+    expect(featurePrompts[0].id).toBe('p1');
+  });
+
+  it('should find prompt by id', () => {
+    mockUseIdeationPrompts.mockReturnValue({
+      data: { prompts: mockPrompts, categories: mockCategories },
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    } as ReturnType<typeof useIdeationPrompts>);
+
+    const { result } = renderHook(() => useGuidedPrompts());
+
+    expect(result.current.getPromptById('p2')?.title).toBe('Prompt 2');
+    expect(result.current.getPromptById('nonexistent')).toBeUndefined();
+  });
+
+  it('should find category by id', () => {
+    mockUseIdeationPrompts.mockReturnValue({
+      data: { prompts: mockPrompts, categories: mockCategories },
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    } as ReturnType<typeof useIdeationPrompts>);
+
+    const { result } = renderHook(() => useGuidedPrompts());
+
+    expect(result.current.getCategoryById('feature' as const)?.label).toBe('Feature');
+    expect(result.current.getCategoryById('nonexistent' as never)).toBeUndefined();
+  });
+
+  it('should convert error to string', () => {
+    mockUseIdeationPrompts.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      error: new Error('Test error'),
+      refetch: vi.fn(),
+    } as ReturnType<typeof useIdeationPrompts>);
+
+    const { result } = renderHook(() => useGuidedPrompts());
+
+    expect(result.current.error).toBe('Test error');
+  });
+
+  it('should return null error when no error', () => {
+    mockUseIdeationPrompts.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      error: null,
+      refetch: vi.fn(),
+    } as ReturnType<typeof useIdeationPrompts>);
+
+    const { result } = renderHook(() => useGuidedPrompts());
+
+    expect(result.current.error).toBeNull();
+  });
+
+  it('should memoize empty arrays when data is undefined across renders', () => {
+    mockUseIdeationPrompts.mockReturnValue({
+      data: undefined,
+      isLoading: true,
+      error: null,
+      refetch: vi.fn(),
+    } as ReturnType<typeof useIdeationPrompts>);
+
+    const { result, rerender } = renderHook(() => useGuidedPrompts());
+
+    const firstPrompts = result.current.prompts;
+    const firstCategories = result.current.categories;
+
+    rerender();
+
+    // Empty arrays should be referentially stable too (via useMemo)
+    expect(result.current.prompts).toBe(firstPrompts);
+    expect(result.current.categories).toBe(firstCategories);
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/hooks/use-media-query.test.ts b/temp_repo/apps/ui/tests/unit/hooks/use-media-query.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c9013075cf94584bc9fe100ca9fbeebfe405b888
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/hooks/use-media-query.test.ts
@@ -0,0 +1,240 @@
+/**
+ * Unit tests for useMediaQuery, useIsMobile, useIsTablet, and useIsCompact hooks
+ * These tests verify the responsive detection behavior for terminal shortcuts bar
+ */
+
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import {
+  useMediaQuery,
+  useIsMobile,
+  useIsTablet,
+  useIsCompact,
+} from '../../../src/hooks/use-media-query.ts';
+
+/**
+ * Creates a mock matchMedia implementation for testing
+ * @param matchingQuery - The query that should match. If null, no queries match.
+ */
+function createMatchMediaMock(matchingQuery: string | null = null) {
+  return vi.fn().mockImplementation((query: string) => ({
+    matches: matchingQuery !== null && query === matchingQuery,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+}
+
+/**
+ * Creates a mock matchMedia that tracks event listeners for testing cleanup
+ */
+function createTrackingMatchMediaMock() {
+  const listeners: Array<(e: MediaQueryListEvent) => void> = [];
+  return {
+    matchMedia: vi.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn((_event: string, listener: (e: MediaQueryListEvent) => void) => {
+        listeners.push(listener);
+      }),
+      removeEventListener: vi.fn((_event: string, listener: (e: MediaQueryListEvent) => void) => {
+        const index = listeners.indexOf(listener);
+        if (index > -1) listeners.splice(index, 1);
+      }),
+      dispatchEvent: vi.fn(),
+    })),
+    listeners,
+  };
+}
+
+/**
+ * Creates a mock matchMedia that matches multiple queries (for testing viewport combinations)
+ * @param queries - Array of queries that should match
+ */
+function createMultiQueryMatchMediaMock(queries: string[] = []) {
+  return vi.fn().mockImplementation((query: string) => ({
+    matches: queries.includes(query),
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+}
+
+describe('useMediaQuery', () => {
+  let mockData: ReturnType<typeof createTrackingMatchMediaMock>;
+
+  beforeEach(() => {
+    mockData = createTrackingMatchMediaMock();
+    window.matchMedia = mockData.matchMedia;
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return false by default', () => {
+    const { result } = renderHook(() => useMediaQuery('(max-width: 768px)'));
+    expect(result.current).toBe(false);
+  });
+
+  it('should return true when media query matches', () => {
+    window.matchMedia = createMatchMediaMock('(max-width: 768px)');
+
+    const { result } = renderHook(() => useMediaQuery('(max-width: 768px)'));
+    expect(result.current).toBe(true);
+  });
+
+  it('should update when media query changes', () => {
+    const { result } = renderHook(() => useMediaQuery('(max-width: 768px)'));
+
+    // Initial state is false
+    expect(result.current).toBe(false);
+
+    // Simulate a media query change event
+    act(() => {
+      const listener = mockData.listeners[0];
+      if (listener) {
+        listener({ matches: true, media: '(max-width: 768px)' } as MediaQueryListEvent);
+      }
+    });
+
+    expect(result.current).toBe(true);
+  });
+
+  it('should cleanup event listener on unmount', () => {
+    const { unmount } = renderHook(() => useMediaQuery('(max-width: 768px)'));
+
+    expect(mockData.listeners.length).toBe(1);
+
+    unmount();
+
+    expect(mockData.listeners.length).toBe(0);
+  });
+});
+
+describe('useIsMobile', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return true when viewport is <= 768px', () => {
+    window.matchMedia = createMatchMediaMock('(max-width: 768px)');
+
+    const { result } = renderHook(() => useIsMobile());
+    expect(result.current).toBe(true);
+  });
+
+  it('should return false when viewport is > 768px', () => {
+    window.matchMedia = createMatchMediaMock(null);
+
+    const { result } = renderHook(() => useIsMobile());
+    expect(result.current).toBe(false);
+  });
+});
+
+describe('useIsTablet', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return true when viewport is <= 1024px (tablet or smaller)', () => {
+    window.matchMedia = createMatchMediaMock('(max-width: 1024px)');
+
+    const { result } = renderHook(() => useIsTablet());
+    expect(result.current).toBe(true);
+  });
+
+  it('should return false when viewport is > 1024px (desktop)', () => {
+    window.matchMedia = createMatchMediaMock(null);
+
+    const { result } = renderHook(() => useIsTablet());
+    expect(result.current).toBe(false);
+  });
+});
+
+describe('useIsCompact', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return true when viewport is <= 1240px', () => {
+    window.matchMedia = createMatchMediaMock('(max-width: 1240px)');
+
+    const { result } = renderHook(() => useIsCompact());
+    expect(result.current).toBe(true);
+  });
+
+  it('should return false when viewport is > 1240px', () => {
+    window.matchMedia = createMatchMediaMock(null);
+
+    const { result } = renderHook(() => useIsCompact());
+    expect(result.current).toBe(false);
+  });
+});
+
+describe('Responsive Viewport Combinations', () => {
+  // Test the logic that TerminalPanel uses: showShortcutsBar = isMobile || isTablet
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should show shortcuts bar on mobile viewport (< 768px)', () => {
+    // Mobile: matches both mobile and tablet queries (since 768px < 1024px)
+    window.matchMedia = createMultiQueryMatchMediaMock([
+      '(max-width: 768px)',
+      '(max-width: 1024px)',
+    ]);
+
+    const { result: mobileResult } = renderHook(() => useIsMobile());
+    const { result: tabletResult } = renderHook(() => useIsTablet());
+
+    // Mobile is always tablet (since 768px < 1024px)
+    expect(mobileResult.current).toBe(true);
+    expect(tabletResult.current).toBe(true);
+
+    // showShortcutsBar = isMobile || isTablet = true
+    expect(mobileResult.current || tabletResult.current).toBe(true);
+  });
+
+  it('should show shortcuts bar on tablet viewport (768px - 1024px)', () => {
+    // Tablet: matches tablet query but not mobile (viewport > 768px but <= 1024px)
+    window.matchMedia = createMultiQueryMatchMediaMock(['(max-width: 1024px)']);
+
+    const { result: mobileResult } = renderHook(() => useIsMobile());
+    const { result: tabletResult } = renderHook(() => useIsTablet());
+
+    // Tablet is not mobile (viewport > 768px but <= 1024px)
+    expect(mobileResult.current).toBe(false);
+    expect(tabletResult.current).toBe(true);
+
+    // showShortcutsBar = isMobile || isTablet = true
+    expect(mobileResult.current || tabletResult.current).toBe(true);
+  });
+
+  it('should hide shortcuts bar on desktop viewport (> 1024px)', () => {
+    // Desktop: matches neither mobile nor tablet
+    window.matchMedia = createMultiQueryMatchMediaMock([]);
+
+    const { result: mobileResult } = renderHook(() => useIsMobile());
+    const { result: tabletResult } = renderHook(() => useIsTablet());
+
+    // Desktop is neither mobile nor tablet
+    expect(mobileResult.current).toBe(false);
+    expect(tabletResult.current).toBe(false);
+
+    // showShortcutsBar = isMobile || isTablet = false
+    expect(mobileResult.current || tabletResult.current).toBe(false);
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/hooks/use-test-runners-deps.test.ts b/temp_repo/apps/ui/tests/unit/hooks/use-test-runners-deps.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..87bc223419b829558492fe351d914f9f88e5221d
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/hooks/use-test-runners-deps.test.ts
@@ -0,0 +1,204 @@
+/**
+ * Unit tests for useTestRunners hook - dependency array changes
+ *
+ * The lint fix removed unnecessary deps (activeSessionByWorktree, sessions)
+ * from useMemo for activeSession and isRunning. These tests verify that the
+ * store-level getActiveSession and isWorktreeRunning functions work correctly
+ * since they are the actual deps used in the hook's useMemo.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+
+// Mock the electron API
+vi.mock('@/lib/electron', () => ({
+  getElectronAPI: vi.fn(() => ({
+    worktree: {
+      onTestRunnerEvent: vi.fn(() => vi.fn()),
+      getTestLogs: vi.fn(() => Promise.resolve({ success: false })),
+    },
+  })),
+}));
+
+// Mock the logger
+vi.mock('@automaker/utils/logger', () => ({
+  createLogger: () => ({
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    debug: vi.fn(),
+  }),
+}));
+
+import { useTestRunners } from '../../../src/hooks/use-test-runners';
+import { useTestRunnersStore } from '../../../src/store/test-runners-store';
+
+describe('useTestRunners - dependency changes', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset the store state by clearing all sessions
+    const store = useTestRunnersStore.getState();
+    // Clear any existing sessions
+    Object.keys(store.sessions).forEach((id) => {
+      store.removeSession(id);
+    });
+  });
+
+  it('should return null activeSession when no worktreePath', () => {
+    const { result } = renderHook(() => useTestRunners());
+
+    expect(result.current.activeSession).toBeNull();
+    expect(result.current.isRunning).toBe(false);
+  });
+
+  it('should return null activeSession when worktreePath has no active session', () => {
+    const { result } = renderHook(() => useTestRunners('/test/worktree'));
+
+    expect(result.current.activeSession).toBeNull();
+    expect(result.current.isRunning).toBe(false);
+  });
+
+  it('should return empty sessions for worktree without sessions', () => {
+    const { result } = renderHook(() => useTestRunners('/test/worktree'));
+
+    expect(result.current.sessions).toEqual([]);
+  });
+
+  it('should verify store getActiveSession works correctly', () => {
+    // This verifies the store-level function that the hook's useMemo depends on
+    const store = useTestRunnersStore.getState();
+
+    // No sessions initially
+    expect(store.getActiveSession('/test/worktree')).toBeNull();
+
+    // Add a session
+    store.startSession({
+      sessionId: 'test-session-1',
+      worktreePath: '/test/worktree',
+      command: 'npm test',
+      status: 'running',
+      startedAt: Date.now(),
+    });
+
+    // Should find it
+    const active = useTestRunnersStore.getState().getActiveSession('/test/worktree');
+    expect(active).not.toBeNull();
+    expect(active?.sessionId).toBe('test-session-1');
+    expect(active?.status).toBe('running');
+  });
+
+  it('should verify store isWorktreeRunning works correctly', () => {
+    const store = useTestRunnersStore.getState();
+
+    // Not running initially
+    expect(store.isWorktreeRunning('/test/worktree')).toBe(false);
+
+    // Start a session
+    store.startSession({
+      sessionId: 'test-session-2',
+      worktreePath: '/test/worktree',
+      command: 'npm test',
+      status: 'running',
+      startedAt: Date.now(),
+    });
+
+    expect(useTestRunnersStore.getState().isWorktreeRunning('/test/worktree')).toBe(true);
+
+    // Complete the session
+    useTestRunnersStore.getState().completeSession('test-session-2', 'passed', 0, 5000);
+
+    expect(useTestRunnersStore.getState().isWorktreeRunning('/test/worktree')).toBe(false);
+  });
+
+  it('should not return sessions from different worktrees via store', () => {
+    const store = useTestRunnersStore.getState();
+
+    // Add session for worktree-b
+    store.startSession({
+      sessionId: 'test-session-b',
+      worktreePath: '/test/worktree-b',
+      command: 'npm test',
+      status: 'running',
+      startedAt: Date.now(),
+    });
+
+    // worktree-a should have no active session
+    const active = useTestRunnersStore.getState().getActiveSession('/test/worktree-a');
+    expect(active).toBeNull();
+    expect(useTestRunnersStore.getState().isWorktreeRunning('/test/worktree-a')).toBe(false);
+
+    // worktree-b should have the session
+    const activeB = useTestRunnersStore.getState().getActiveSession('/test/worktree-b');
+    expect(activeB).not.toBeNull();
+    expect(activeB?.sessionId).toBe('test-session-b');
+  });
+
+  it('should return error when starting without worktreePath', async () => {
+    const { result } = renderHook(() => useTestRunners());
+
+    let startResult: { success: boolean; error?: string };
+    await act(async () => {
+      startResult = await result.current.start();
+    });
+
+    expect(startResult!.success).toBe(false);
+    expect(startResult!.error).toBe('No worktree path provided');
+  });
+
+  it('should start a test run via the start action', async () => {
+    const mockStartTests = vi.fn().mockResolvedValue({
+      success: true,
+      result: { sessionId: 'new-session' },
+    });
+
+    const { getElectronAPI } = await import('@/lib/electron');
+    vi.mocked(getElectronAPI).mockReturnValue({
+      worktree: {
+        onTestRunnerEvent: vi.fn(() => vi.fn()),
+        getTestLogs: vi.fn(() => Promise.resolve({ success: false })),
+        startTests: mockStartTests,
+      },
+    } as ReturnType<typeof getElectronAPI>);
+
+    const { result } = renderHook(() => useTestRunners('/test/worktree'));
+
+    let startResult: { success: boolean; sessionId?: string };
+    await act(async () => {
+      startResult = await result.current.start();
+    });
+
+    expect(startResult!.success).toBe(true);
+    expect(startResult!.sessionId).toBe('new-session');
+  });
+
+  it('should clear session history for a worktree', () => {
+    const store = useTestRunnersStore.getState();
+
+    // Add sessions for two worktrees
+    store.startSession({
+      sessionId: 'session-a',
+      worktreePath: '/test/worktree-a',
+      command: 'npm test',
+      status: 'running',
+      startedAt: Date.now(),
+    });
+    store.startSession({
+      sessionId: 'session-b',
+      worktreePath: '/test/worktree-b',
+      command: 'npm test',
+      status: 'running',
+      startedAt: Date.now(),
+    });
+
+    const { result } = renderHook(() => useTestRunners('/test/worktree-a'));
+
+    act(() => {
+      result.current.clearHistory();
+    });
+
+    // worktree-a sessions should be cleared
+    expect(useTestRunnersStore.getState().getActiveSession('/test/worktree-a')).toBeNull();
+    // worktree-b sessions should still exist
+    expect(useTestRunnersStore.getState().getActiveSession('/test/worktree-b')).not.toBeNull();
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/lib/agent-context-parser.test.ts b/temp_repo/apps/ui/tests/unit/lib/agent-context-parser.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f7512f7a4fbbcf658935aa12e434da9be07e3980
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/lib/agent-context-parser.test.ts
@@ -0,0 +1,349 @@
+/**
+ * Unit tests for agent-context-parser.ts
+ * Tests the formatModelName function with provider-aware model name lookup
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+  formatModelName,
+  DEFAULT_MODEL,
+  type FormatModelNameOptions,
+} from '../../../src/lib/agent-context-parser';
+import type { ClaudeCompatibleProvider, ProviderModel } from '@automaker/types';
+
+describe('agent-context-parser.ts', () => {
+  describe('DEFAULT_MODEL', () => {
+    it('should be claude-opus-4-6', () => {
+      expect(DEFAULT_MODEL).toBe('claude-opus-4-6');
+    });
+  });
+
+  describe('formatModelName', () => {
+    describe('Provider-aware lookup', () => {
+      it('should return provider displayName when providerId matches and model is found', () => {
+        const providers: ClaudeCompatibleProvider[] = [
+          {
+            id: 'moonshot-ai',
+            name: 'Moonshot AI',
+            models: [
+              { id: 'claude-sonnet-4-5', displayName: 'Moonshot v1.8' },
+              { id: 'claude-opus-4-6', displayName: 'Moonshot v1.8 Pro' },
+            ],
+          },
+        ];
+
+        const options: FormatModelNameOptions = {
+          providerId: 'moonshot-ai',
+          claudeCompatibleProviders: providers,
+        };
+
+        expect(formatModelName('claude-sonnet-4-5', options)).toBe('Moonshot v1.8');
+        expect(formatModelName('claude-opus-4-6', options)).toBe('Moonshot v1.8 Pro');
+      });
+
+      it('should return provider displayName for GLM models', () => {
+        const providers: ClaudeCompatibleProvider[] = [
+          {
+            id: 'zhipu',
+            name: 'Zhipu AI',
+            models: [
+              { id: 'claude-sonnet-4-5', displayName: 'GLM 4.7' },
+              { id: 'claude-opus-4-6', displayName: 'GLM 4.7 Pro' },
+            ],
+          },
+        ];
+
+        const options: FormatModelNameOptions = {
+          providerId: 'zhipu',
+          claudeCompatibleProviders: providers,
+        };
+
+        expect(formatModelName('claude-sonnet-4-5', options)).toBe('GLM 4.7');
+      });
+
+      it('should return provider displayName for MiniMax models', () => {
+        const providers: ClaudeCompatibleProvider[] = [
+          {
+            id: 'minimax',
+            name: 'MiniMax',
+            models: [
+              { id: 'claude-sonnet-4-5', displayName: 'MiniMax M2.1' },
+              { id: 'claude-opus-4-6', displayName: 'MiniMax M2.1 Pro' },
+            ],
+          },
+        ];
+
+        const options: FormatModelNameOptions = {
+          providerId: 'minimax',
+          claudeCompatibleProviders: providers,
+        };
+
+        expect(formatModelName('claude-sonnet-4-5', options)).toBe('MiniMax M2.1');
+      });
+
+      it('should fallback to default formatting when providerId is not found', () => {
+        const providers: ClaudeCompatibleProvider[] = [
+          {
+            id: 'moonshot-ai',
+            name: 'Moonshot AI',
+            models: [{ id: 'claude-sonnet-4-5', displayName: 'Moonshot v1.8' }],
+          },
+        ];
+
+        const options: FormatModelNameOptions = {
+          providerId: 'unknown-provider',
+          claudeCompatibleProviders: providers,
+        };
+
+        // Should fall through to default Claude formatting
+        expect(formatModelName('claude-sonnet-4-5', options)).toBe('Sonnet 4.5');
+      });
+
+      it('should fallback to default formatting when model is not in provider models', () => {
+        const providers: ClaudeCompatibleProvider[] = [
+          {
+            id: 'moonshot-ai',
+            name: 'Moonshot AI',
+            models: [{ id: 'claude-sonnet-4-5', displayName: 'Moonshot v1.8' }],
+          },
+        ];
+
+        const options: FormatModelNameOptions = {
+          providerId: 'moonshot-ai',
+          claudeCompatibleProviders: providers,
+        };
+
+        // Model not in provider's list, should use default
+        expect(formatModelName('claude-haiku-4-5', options)).toBe('Haiku 4.5');
+      });
+
+      it('should handle empty providers array', () => {
+        const options: FormatModelNameOptions = {
+          providerId: 'moonshot-ai',
+          claudeCompatibleProviders: [],
+        };
+
+        expect(formatModelName('claude-sonnet-4-5', options)).toBe('Sonnet 4.5');
+      });
+
+      it('should handle provider with no models array', () => {
+        const providers: ClaudeCompatibleProvider[] = [
+          {
+            id: 'moonshot-ai',
+            name: 'Moonshot AI',
+          },
+        ];
+
+        const options: FormatModelNameOptions = {
+          providerId: 'moonshot-ai',
+          claudeCompatibleProviders: providers,
+        };
+
+        expect(formatModelName('claude-sonnet-4-5', options)).toBe('Sonnet 4.5');
+      });
+
+      it('should handle model with no displayName', () => {
+        const providers: ClaudeCompatibleProvider[] = [
+          {
+            id: 'moonshot-ai',
+            name: 'Moonshot AI',
+            models: [{ id: 'claude-sonnet-4-5' } as unknown as ProviderModel], // No displayName
+          },
+        ];
+
+        const options: FormatModelNameOptions = {
+          providerId: 'moonshot-ai',
+          claudeCompatibleProviders: providers,
+        };
+
+        expect(formatModelName('claude-sonnet-4-5', options)).toBe('Sonnet 4.5');
+      });
+
+      it('should ignore provider lookup when providerId is undefined', () => {
+        const providers: ClaudeCompatibleProvider[] = [
+          {
+            id: 'moonshot-ai',
+            name: 'Moonshot AI',
+            models: [{ id: 'claude-sonnet-4-5', displayName: 'Moonshot v1.8' }],
+          },
+        ];
+
+        const options: FormatModelNameOptions = {
+          providerId: undefined,
+          claudeCompatibleProviders: providers,
+        };
+
+        expect(formatModelName('claude-sonnet-4-5', options)).toBe('Sonnet 4.5');
+      });
+
+      it('should ignore provider lookup when claudeCompatibleProviders is undefined', () => {
+        const options: FormatModelNameOptions = {
+          providerId: 'moonshot-ai',
+          claudeCompatibleProviders: undefined,
+        };
+
+        expect(formatModelName('claude-sonnet-4-5', options)).toBe('Sonnet 4.5');
+      });
+
+      it('should use default formatting when no options provided', () => {
+        expect(formatModelName('claude-sonnet-4-5')).toBe('Sonnet 4.5');
+        expect(formatModelName('claude-opus-4-6')).toBe('Opus 4.6');
+      });
+
+      it('should handle OpenRouter provider with multiple models', () => {
+        const providers: ClaudeCompatibleProvider[] = [
+          {
+            id: 'openrouter',
+            name: 'OpenRouter',
+            models: [
+              { id: 'claude-sonnet-4-5', displayName: 'Claude Sonnet (OpenRouter)' },
+              { id: 'claude-opus-4-6', displayName: 'Claude Opus (OpenRouter)' },
+              { id: 'gpt-4o', displayName: 'GPT-4o (OpenRouter)' },
+            ],
+          },
+        ];
+
+        const options: FormatModelNameOptions = {
+          providerId: 'openrouter',
+          claudeCompatibleProviders: providers,
+        };
+
+        expect(formatModelName('claude-sonnet-4-5', options)).toBe('Claude Sonnet (OpenRouter)');
+        expect(formatModelName('claude-opus-4-6', options)).toBe('Claude Opus (OpenRouter)');
+        expect(formatModelName('gpt-4o', options)).toBe('GPT-4o (OpenRouter)');
+      });
+    });
+
+    describe('Claude model formatting (default)', () => {
+      it('should format claude-opus-4-6 as Opus 4.6', () => {
+        expect(formatModelName('claude-opus-4-6')).toBe('Opus 4.6');
+      });
+
+      it('should format claude-opus as Opus 4.6', () => {
+        expect(formatModelName('claude-opus')).toBe('Opus 4.6');
+      });
+
+      it('should format other opus models as Opus 4.5', () => {
+        expect(formatModelName('claude-opus-4-5')).toBe('Opus 4.5');
+        expect(formatModelName('claude-3-opus')).toBe('Opus 4.5');
+      });
+
+      it('should format claude-sonnet-4-6 as Sonnet 4.6', () => {
+        expect(formatModelName('claude-sonnet-4-6')).toBe('Sonnet 4.6');
+      });
+
+      it('should format claude-sonnet as Sonnet 4.6', () => {
+        expect(formatModelName('claude-sonnet')).toBe('Sonnet 4.6');
+      });
+
+      it('should format other sonnet models as Sonnet 4.5', () => {
+        expect(formatModelName('claude-sonnet-4-5')).toBe('Sonnet 4.5');
+        expect(formatModelName('claude-3-sonnet')).toBe('Sonnet 4.5');
+      });
+
+      it('should format haiku models as Haiku 4.5', () => {
+        expect(formatModelName('claude-haiku-4-5')).toBe('Haiku 4.5');
+        expect(formatModelName('claude-3-haiku')).toBe('Haiku 4.5');
+        expect(formatModelName('claude-haiku')).toBe('Haiku 4.5');
+      });
+    });
+
+    describe('Codex/GPT model formatting', () => {
+      it('should format codex-gpt-5.3-codex as GPT-5.3 Codex', () => {
+        expect(formatModelName('codex-gpt-5.3-codex')).toBe('GPT-5.3 Codex');
+      });
+
+      it('should format codex-gpt-5.2-codex as GPT-5.2 Codex', () => {
+        expect(formatModelName('codex-gpt-5.2-codex')).toBe('GPT-5.2 Codex');
+      });
+
+      it('should format codex-gpt-5.2 as GPT-5.2', () => {
+        expect(formatModelName('codex-gpt-5.2')).toBe('GPT-5.2');
+      });
+
+      it('should format codex-gpt-5.1-codex-max as GPT-5.1 Max', () => {
+        expect(formatModelName('codex-gpt-5.1-codex-max')).toBe('GPT-5.1 Max');
+      });
+
+      it('should format codex-gpt-5.1-codex-mini as GPT-5.1 Mini', () => {
+        expect(formatModelName('codex-gpt-5.1-codex-mini')).toBe('GPT-5.1 Mini');
+      });
+
+      it('should format codex-gpt-5.1 as GPT-5.1', () => {
+        expect(formatModelName('codex-gpt-5.1')).toBe('GPT-5.1');
+      });
+
+      it('should format gpt- prefixed models in uppercase', () => {
+        expect(formatModelName('gpt-4o')).toBe('GPT-4O');
+        expect(formatModelName('gpt-4-turbo')).toBe('GPT-4-TURBO');
+      });
+
+      it('should format o-prefixed models (o1, o3, etc.) in uppercase', () => {
+        expect(formatModelName('o1')).toBe('O1');
+        expect(formatModelName('o1-mini')).toBe('O1-MINI');
+        expect(formatModelName('o3')).toBe('O3');
+      });
+    });
+
+    describe('Cursor model formatting', () => {
+      it('should format cursor-auto as Cursor Auto', () => {
+        expect(formatModelName('cursor-auto')).toBe('Cursor Auto');
+      });
+
+      it('should format auto as Cursor Auto', () => {
+        expect(formatModelName('auto')).toBe('Cursor Auto');
+      });
+
+      it('should format cursor-composer-1 as Composer 1', () => {
+        expect(formatModelName('cursor-composer-1')).toBe('Composer 1');
+      });
+
+      it('should format composer-1 as Composer 1', () => {
+        expect(formatModelName('composer-1')).toBe('Composer 1');
+      });
+
+      it('should format cursor-sonnet (but falls through to Sonnet due to earlier check)', () => {
+        // Note: The earlier 'sonnet' check in the function matches first
+        expect(formatModelName('cursor-sonnet')).toBe('Sonnet 4.5');
+        expect(formatModelName('cursor-sonnet-4-5')).toBe('Sonnet 4.5');
+      });
+
+      it('should format cursor-opus (but falls through to Opus due to earlier check)', () => {
+        // Note: The earlier 'opus' check in the function matches first
+        expect(formatModelName('cursor-opus')).toBe('Opus 4.5');
+        expect(formatModelName('cursor-opus-4-6')).toBe('Opus 4.6');
+      });
+
+      it('should format cursor-gpt models', () => {
+        // cursor-gpt-4 becomes gpt-4 then GPT-4 (case preserved)
+        expect(formatModelName('cursor-gpt-4')).toBe('GPT-4');
+        // cursor-gpt-4o becomes gpt-4o then GPT-4o (not uppercase o)
+        expect(formatModelName('cursor-gpt-4o')).toBe('GPT-4o');
+      });
+
+      it('should format cursor-gemini models', () => {
+        // cursor-gemini-pro -> Cursor gemini-pro -> Cursor Gemini-pro
+        expect(formatModelName('cursor-gemini-pro')).toBe('Cursor Gemini-pro');
+        // cursor-gemini-2 -> Cursor gemini-2 -> Cursor Gemini-2
+        expect(formatModelName('cursor-gemini-2')).toBe('Cursor Gemini-2');
+      });
+
+      it('should format cursor-grok as Cursor Grok', () => {
+        expect(formatModelName('cursor-grok')).toBe('Cursor Grok');
+      });
+    });
+
+    describe('Unknown model formatting (fallback)', () => {
+      it('should format unknown models by splitting and joining parts', () => {
+        // The fallback splits by dash and joins parts 1 and 2 (indices 1 and 2)
+        expect(formatModelName('unknown-model-name')).toBe('model name');
+        expect(formatModelName('some-random-model')).toBe('random model');
+      });
+
+      it('should handle models with fewer parts', () => {
+        expect(formatModelName('single')).toBe(''); // slice(1,3) on ['single'] = []
+        expect(formatModelName('two-parts')).toBe('parts'); // slice(1,3) on ['two', 'parts'] = ['parts']
+      });
+    });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/lib/settings-utils.test.ts b/temp_repo/apps/ui/tests/unit/lib/settings-utils.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d535928b277e485bfd5b345f64ee459176fb7088
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/lib/settings-utils.test.ts
@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { sanitizeWorktreeByProject } from '../../../src/lib/settings-utils';
+
+describe('sanitizeWorktreeByProject', () => {
+  it('returns an empty object when input is undefined', () => {
+    expect(sanitizeWorktreeByProject(undefined)).toEqual({});
+  });
+
+  it('keeps structurally valid worktree entries', () => {
+    const input = {
+      '/project-a': { path: null, branch: 'main' },
+      '/project-b': { path: '/project-b/.worktrees/feature-x', branch: 'feature/x' },
+    };
+
+    expect(sanitizeWorktreeByProject(input)).toEqual(input);
+  });
+
+  it('drops malformed entries and keeps valid ones', () => {
+    const input: Record<string, unknown> = {
+      '/valid': { path: '/valid/.worktrees/feature-y', branch: 'feature/y' },
+      '/valid-main': { path: null, branch: 'main' },
+      '/invalid-not-object': 'bad',
+      '/invalid-null': null,
+      '/invalid-no-branch': { path: '/x' },
+      '/invalid-branch-type': { path: '/x', branch: 123 },
+      '/invalid-empty-branch': { path: '/x', branch: '   ' },
+      '/invalid-path-type': { path: 42, branch: 'feature/z' },
+      '/invalid-empty-path': { path: '   ', branch: 'feature/z' },
+    };
+
+    expect(sanitizeWorktreeByProject(input)).toEqual({
+      '/valid': { path: '/valid/.worktrees/feature-y', branch: 'feature/y' },
+      '/valid-main': { path: null, branch: 'main' },
+    });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/lib/summary-selection.test.ts b/temp_repo/apps/ui/tests/unit/lib/summary-selection.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f97a3e67116688543a17da79d1759b5083f5554f
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/lib/summary-selection.test.ts
@@ -0,0 +1,71 @@
+/**
+ * Tests for getFirstNonEmptySummary utility
+ * Verifies priority-based summary selection used by agent-output-modal
+ * and agent-info-panel for preferring server-side accumulated summaries
+ * over client-side extracted summaries.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { getFirstNonEmptySummary } from '../../../src/lib/summary-selection';
+
+describe('getFirstNonEmptySummary', () => {
+  it('should return the first non-empty string candidate', () => {
+    const result = getFirstNonEmptySummary(null, 'Hello', 'World');
+    expect(result).toBe('Hello');
+  });
+
+  it('should skip null candidates', () => {
+    const result = getFirstNonEmptySummary(null, null, 'Fallback');
+    expect(result).toBe('Fallback');
+  });
+
+  it('should skip undefined candidates', () => {
+    const result = getFirstNonEmptySummary(undefined, undefined, 'Fallback');
+    expect(result).toBe('Fallback');
+  });
+
+  it('should skip whitespace-only strings', () => {
+    const result = getFirstNonEmptySummary('   ', '\n\t', 'Content');
+    expect(result).toBe('Content');
+  });
+
+  it('should skip empty strings', () => {
+    const result = getFirstNonEmptySummary('', '', 'Content');
+    expect(result).toBe('Content');
+  });
+
+  it('should return null when all candidates are empty or null', () => {
+    const result = getFirstNonEmptySummary(null, undefined, '', '  ');
+    expect(result).toBeNull();
+  });
+
+  it('should return null when no candidates are provided', () => {
+    const result = getFirstNonEmptySummary();
+    expect(result).toBeNull();
+  });
+
+  it('should preserve original formatting (no trimming) of selected summary', () => {
+    const result = getFirstNonEmptySummary('  Content with spaces  ');
+    expect(result).toBe('  Content with spaces  ');
+  });
+
+  it('should prefer server-side summary over client-side when both exist', () => {
+    const serverSummary =
+      '## Summary from server\n- Pipeline step 1 complete\n- Pipeline step 2 complete';
+    const clientSummary = '## Summary\n- Only step 2 visible';
+    const result = getFirstNonEmptySummary(serverSummary, clientSummary);
+    expect(result).toBe(serverSummary);
+  });
+
+  it('should fall back to client-side summary when server-side is null', () => {
+    const clientSummary = '## Summary\n- Changes made';
+    const result = getFirstNonEmptySummary(null, clientSummary);
+    expect(result).toBe(clientSummary);
+  });
+
+  it('should handle single candidate', () => {
+    expect(getFirstNonEmptySummary('Single')).toBe('Single');
+    expect(getFirstNonEmptySummary(null)).toBeNull();
+    expect(getFirstNonEmptySummary('')).toBeNull();
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/lint-fixes-navigator-type.test.ts b/temp_repo/apps/ui/tests/unit/lint-fixes-navigator-type.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6c7f9476f656063ac2243efdb29f86d9a1c29f67
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/lint-fixes-navigator-type.test.ts
@@ -0,0 +1,61 @@
+/**
+ * Tests verifying the navigator.userAgentData type fix
+ * in stash-changes-dialog.tsx.
+ *
+ * The lint fix replaced `(navigator as any).userAgentData?.platform`
+ * with a properly typed cast:
+ * `(navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData?.platform`
+ */
+
+import { describe, it, expect } from 'vitest';
+
+describe('Navigator type safety - userAgentData access', () => {
+  it('should safely access userAgentData.platform with proper typing', () => {
+    // Simulates the pattern used in stash-changes-dialog.tsx
+    const nav = {
+      platform: 'MacIntel',
+      userAgentData: { platform: 'macOS' },
+    } as Navigator & { userAgentData?: { platform?: string } };
+
+    const platform = nav.userAgentData?.platform || nav.platform || '';
+    expect(platform).toBe('macOS');
+  });
+
+  it('should fallback to navigator.platform when userAgentData is undefined', () => {
+    const nav = {
+      platform: 'MacIntel',
+    } as Navigator & { userAgentData?: { platform?: string } };
+
+    const platform = nav.userAgentData?.platform || nav.platform || '';
+    expect(platform).toBe('MacIntel');
+  });
+
+  it('should fallback to empty string when both are unavailable', () => {
+    const nav = {} as Navigator & { userAgentData?: { platform?: string } };
+
+    const platform = nav.userAgentData?.platform || nav.platform || '';
+    expect(platform).toBe('');
+  });
+
+  it('should detect macOS platform correctly', () => {
+    const nav = {
+      platform: 'MacIntel',
+      userAgentData: { platform: 'macOS' },
+    } as Navigator & { userAgentData?: { platform?: string } };
+
+    const platform = nav.userAgentData?.platform || nav.platform || '';
+    const isMac = platform.includes('Mac') || platform.includes('mac');
+    expect(isMac).toBe(true);
+  });
+
+  it('should detect non-macOS platform correctly', () => {
+    const nav = {
+      platform: 'Win32',
+      userAgentData: { platform: 'Windows' },
+    } as Navigator & { userAgentData?: { platform?: string } };
+
+    const platform = nav.userAgentData?.platform || nav.platform || '';
+    const isMac = platform.includes('Mac') || platform.includes('mac');
+    expect(isMac).toBe(false);
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/lint-fixes-type-safety.test.ts b/temp_repo/apps/ui/tests/unit/lint-fixes-type-safety.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0a2699882577206984b44db5c5c64cfe2d4b6c4c
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/lint-fixes-type-safety.test.ts
@@ -0,0 +1,141 @@
+/**
+ * Tests verifying type safety improvements from lint fixes.
+ * These test that the `any` → proper type conversions in test utilities
+ * and mock patterns continue to work correctly.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import type { Feature } from '@automaker/types';
+
+describe('Lint fix type safety - Feature casting patterns', () => {
+  // The lint fix changed `} as any` to `} as unknown as Feature` in test files.
+  // This verifies the cast pattern works correctly with partial data.
+
+  it('should allow partial Feature objects via unknown cast', () => {
+    const feature = {
+      id: 'test-1',
+      status: 'backlog',
+      error: undefined,
+    } as unknown as Feature;
+
+    expect(feature.id).toBe('test-1');
+    expect(feature.status).toBe('backlog');
+    expect(feature.error).toBeUndefined();
+  });
+
+  it('should allow merge_conflict status via unknown cast', () => {
+    const feature = {
+      id: 'test-2',
+      status: 'merge_conflict',
+      error: 'Merge conflict detected',
+    } as unknown as Feature;
+
+    expect(feature.status).toBe('merge_conflict');
+    expect(feature.error).toBe('Merge conflict detected');
+  });
+
+  it('should allow features with all required fields', () => {
+    const feature = {
+      id: 'test-3',
+      title: 'Test Feature',
+      category: 'test',
+      description: 'A test feature',
+      status: 'in_progress',
+    } as unknown as Feature;
+
+    expect(feature.title).toBe('Test Feature');
+    expect(feature.description).toBe('A test feature');
+  });
+});
+
+describe('Lint fix type safety - Mock function patterns', () => {
+  // The lint fix changed `(selector?: any)` to `(selector?: unknown)` and
+  // `(selector: (state: any) => any)` to `(selector: (state: Record<string, unknown>) => unknown)`
+
+  it('should work with unknown selector type for store mocks', () => {
+    const mockStore = vi.fn().mockImplementation((selector?: unknown) => {
+      if (typeof selector === 'function') {
+        const state = { claudeCompatibleProviders: [] };
+        return (selector as (s: Record<string, unknown>) => unknown)(state);
+      }
+      return undefined;
+    });
+
+    const result = mockStore((state: Record<string, unknown>) => state.claudeCompatibleProviders);
+    expect(result).toEqual([]);
+  });
+
+  it('should work with typed selector for store mocks', () => {
+    const state = {
+      claudeCompatibleProviders: [{ id: 'test-provider', name: 'Test', models: [] }],
+    };
+
+    const mockStore = vi
+      .fn()
+      .mockImplementation((selector: (state: Record<string, unknown>) => unknown) =>
+        selector(state)
+      );
+
+    const providers = mockStore((s: Record<string, unknown>) => s.claudeCompatibleProviders);
+    expect(providers).toHaveLength(1);
+  });
+
+  it('should work with ReturnType<typeof vi.fn> for matchMedia mock', () => {
+    // Pattern used in agent-output-modal-responsive.test.tsx
+    const mockMatchMedia = vi.fn().mockImplementation((query: string) => ({
+      matches: query.includes('min-width: 640px'),
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }));
+
+    (window.matchMedia as ReturnType<typeof vi.fn>) = mockMatchMedia;
+
+    const result = window.matchMedia('(min-width: 640px)');
+    expect(result.matches).toBe(true);
+
+    const smallResult = window.matchMedia('(max-width: 320px)');
+    expect(smallResult.matches).toBe(false);
+  });
+});
+
+describe('Lint fix type safety - globalThis vs global patterns', () => {
+  // The lint fix changed `global.ResizeObserver` to `globalThis.ResizeObserver`
+
+  it('should support ResizeObserver mock via globalThis', () => {
+    // Must use `function` keyword (not arrow) for vi.fn mock that's used with `new`
+    const mockObserver = vi.fn().mockImplementation(function () {
+      return {
+        observe: vi.fn(),
+        unobserve: vi.fn(),
+        disconnect: vi.fn(),
+      };
+    });
+
+    globalThis.ResizeObserver = mockObserver as unknown as typeof ResizeObserver;
+
+    const observer = new ResizeObserver(() => {});
+    expect(observer.observe).toBeDefined();
+    expect(observer.disconnect).toBeDefined();
+  });
+
+  it('should support IntersectionObserver mock via globalThis', () => {
+    const mockObserver = vi.fn().mockImplementation(function () {
+      return {
+        observe: vi.fn(),
+        unobserve: vi.fn(),
+        disconnect: vi.fn(),
+      };
+    });
+
+    globalThis.IntersectionObserver = mockObserver as unknown as typeof IntersectionObserver;
+
+    const observer = new IntersectionObserver(() => {});
+    expect(observer.observe).toBeDefined();
+    expect(observer.disconnect).toBeDefined();
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/store/app-store-recently-completed.test.ts b/temp_repo/apps/ui/tests/unit/store/app-store-recently-completed.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ee16a90cba201696a6e8c47dcfb56d3892f957d0
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/store/app-store-recently-completed.test.ts
@@ -0,0 +1,170 @@
+/**
+ * Unit tests for recentlyCompletedFeatures store functionality
+ * These tests verify the race condition protection for completed features
+ * appearing in backlog during cache refresh windows.
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { act } from '@testing-library/react';
+import { useAppStore } from '../../../src/store/app-store';
+
+describe('recentlyCompletedFeatures store', () => {
+  beforeEach(() => {
+    // Reset the store to a clean state before each test
+    useAppStore.setState({
+      recentlyCompletedFeatures: new Set<string>(),
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('initial state', () => {
+    it('should have an empty Set for recentlyCompletedFeatures', () => {
+      const state = useAppStore.getState();
+      expect(state.recentlyCompletedFeatures).toBeInstanceOf(Set);
+      expect(state.recentlyCompletedFeatures.size).toBe(0);
+    });
+  });
+
+  describe('addRecentlyCompletedFeature', () => {
+    it('should add a feature ID to the recentlyCompletedFeatures set', () => {
+      const { addRecentlyCompletedFeature } = useAppStore.getState();
+
+      act(() => {
+        addRecentlyCompletedFeature('feature-123');
+      });
+
+      const state = useAppStore.getState();
+      expect(state.recentlyCompletedFeatures.has('feature-123')).toBe(true);
+    });
+
+    it('should add multiple feature IDs to the set', () => {
+      const { addRecentlyCompletedFeature } = useAppStore.getState();
+
+      act(() => {
+        addRecentlyCompletedFeature('feature-1');
+        addRecentlyCompletedFeature('feature-2');
+        addRecentlyCompletedFeature('feature-3');
+      });
+
+      const state = useAppStore.getState();
+      expect(state.recentlyCompletedFeatures.size).toBe(3);
+      expect(state.recentlyCompletedFeatures.has('feature-1')).toBe(true);
+      expect(state.recentlyCompletedFeatures.has('feature-2')).toBe(true);
+      expect(state.recentlyCompletedFeatures.has('feature-3')).toBe(true);
+    });
+
+    it('should not duplicate feature IDs when adding the same ID twice', () => {
+      const { addRecentlyCompletedFeature } = useAppStore.getState();
+
+      act(() => {
+        addRecentlyCompletedFeature('feature-123');
+        addRecentlyCompletedFeature('feature-123');
+      });
+
+      const state = useAppStore.getState();
+      expect(state.recentlyCompletedFeatures.size).toBe(1);
+      expect(state.recentlyCompletedFeatures.has('feature-123')).toBe(true);
+    });
+
+    it('should create a new Set instance on each addition (immutability)', () => {
+      const { addRecentlyCompletedFeature } = useAppStore.getState();
+      const originalSet = useAppStore.getState().recentlyCompletedFeatures;
+
+      act(() => {
+        addRecentlyCompletedFeature('feature-123');
+      });
+
+      const newSet = useAppStore.getState().recentlyCompletedFeatures;
+      // The Set should be a new instance (immutability for React re-renders)
+      expect(newSet).not.toBe(originalSet);
+    });
+  });
+
+  describe('clearRecentlyCompletedFeatures', () => {
+    it('should clear all feature IDs from the set', () => {
+      const { addRecentlyCompletedFeature, clearRecentlyCompletedFeatures } =
+        useAppStore.getState();
+
+      // Add some features first
+      act(() => {
+        addRecentlyCompletedFeature('feature-1');
+        addRecentlyCompletedFeature('feature-2');
+      });
+
+      expect(useAppStore.getState().recentlyCompletedFeatures.size).toBe(2);
+
+      // Clear the set
+      act(() => {
+        clearRecentlyCompletedFeatures();
+      });
+
+      const state = useAppStore.getState();
+      expect(state.recentlyCompletedFeatures.size).toBe(0);
+    });
+
+    it('should work when called on an already empty set', () => {
+      const { clearRecentlyCompletedFeatures } = useAppStore.getState();
+
+      // Should not throw when called on empty set
+      expect(() => {
+        act(() => {
+          clearRecentlyCompletedFeatures();
+        });
+      }).not.toThrow();
+
+      expect(useAppStore.getState().recentlyCompletedFeatures.size).toBe(0);
+    });
+  });
+
+  describe('race condition scenario simulation', () => {
+    it('should track recently completed features until cache refresh clears them', () => {
+      const { addRecentlyCompletedFeature, clearRecentlyCompletedFeatures } =
+        useAppStore.getState();
+
+      // Simulate feature completing
+      act(() => {
+        addRecentlyCompletedFeature('feature-completed');
+      });
+
+      // Feature should be tracked
+      expect(useAppStore.getState().recentlyCompletedFeatures.has('feature-completed')).toBe(true);
+
+      // Simulate cache refresh completing with updated status
+      act(() => {
+        clearRecentlyCompletedFeatures();
+      });
+
+      // Feature should no longer be tracked
+      expect(useAppStore.getState().recentlyCompletedFeatures.has('feature-completed')).toBe(false);
+    });
+
+    it('should handle multiple features completing simultaneously', () => {
+      const { addRecentlyCompletedFeature, clearRecentlyCompletedFeatures } =
+        useAppStore.getState();
+
+      // Simulate multiple features completing (e.g., batch completion)
+      act(() => {
+        addRecentlyCompletedFeature('feature-1');
+        addRecentlyCompletedFeature('feature-2');
+        addRecentlyCompletedFeature('feature-3');
+      });
+
+      expect(useAppStore.getState().recentlyCompletedFeatures.size).toBe(3);
+
+      // All should be protected from backlog during race condition window
+      expect(useAppStore.getState().recentlyCompletedFeatures.has('feature-1')).toBe(true);
+      expect(useAppStore.getState().recentlyCompletedFeatures.has('feature-2')).toBe(true);
+      expect(useAppStore.getState().recentlyCompletedFeatures.has('feature-3')).toBe(true);
+
+      // After cache refresh, all are cleared
+      act(() => {
+        clearRecentlyCompletedFeatures();
+      });
+
+      expect(useAppStore.getState().recentlyCompletedFeatures.size).toBe(0);
+    });
+  });
+});
diff --git a/temp_repo/apps/ui/tests/unit/store/ui-cache-store-worktree.test.ts b/temp_repo/apps/ui/tests/unit/store/ui-cache-store-worktree.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ebfce3a3ee1c0900abaf303f3a71c105277de332
--- /dev/null
+++ b/temp_repo/apps/ui/tests/unit/store/ui-cache-store-worktree.test.ts
@@ -0,0 +1,91 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useAppStore } from '../../../src/store/app-store';
+import {
+  useUICacheStore,
+  syncUICache,
+  restoreFromUICache,
+} from '../../../src/store/ui-cache-store';
+
+function resetUICacheStore() {
+  useUICacheStore.setState({
+    cachedProjectId: null,
+    cachedSidebarOpen: true,
+    cachedSidebarStyle: 'unified',
+    cachedWorktreePanelCollapsed: false,
+    cachedCollapsedNavSections: {},
+    cachedCurrentWorktreeByProject: {},
+  });
+}
+
+describe('ui-cache-store worktree state hardening', () => {
+  beforeEach(() => {
+    resetUICacheStore();
+    useAppStore.setState({ projects: [] as unknown[], currentProject: null });
+  });
+
+  it('syncUICache persists only structurally valid worktree entries', () => {
+    syncUICache({
+      currentWorktreeByProject: {
+        '/valid-main': { path: null, branch: 'main' },
+        '/valid-feature': { path: '/valid/.worktrees/feature-a', branch: 'feature/a' },
+        '/invalid-empty-branch': { path: '/x', branch: '' },
+        '/invalid-path-type': { path: 123 as unknown, branch: 'feature/b' } as {
+          path: unknown;
+          branch: string;
+        },
+        '/invalid-shape': { path: '/x' } as unknown as { path: string; branch: string },
+      },
+    });
+
+    expect(useUICacheStore.getState().cachedCurrentWorktreeByProject).toEqual({
+      '/valid-main': { path: null, branch: 'main' },
+      '/valid-feature': { path: '/valid/.worktrees/feature-a', branch: 'feature/a' },
+    });
+  });
+
+  it('restoreFromUICache sanitizes worktree map and restores resolved project context', () => {
+    useAppStore.setState({
+      projects: [{ id: 'project-1', name: 'Project One', path: '/project-1' }] as unknown[],
+    });
+
+    useUICacheStore.setState({
+      cachedProjectId: 'project-1',
+      cachedSidebarOpen: false,
+      cachedSidebarStyle: 'discord',
+      cachedWorktreePanelCollapsed: true,
+      cachedCollapsedNavSections: { a: true },
+      cachedCurrentWorktreeByProject: {
+        '/valid': { path: '/valid/.worktrees/feature-a', branch: 'feature/a' },
+        '/invalid': { path: 123 as unknown, branch: 'feature/b' } as unknown as {
+          path: string | null;
+          branch: string;
+        },
+      },
+    });
+
+    const appStoreSetState = vi.fn();
+    const didRestore = restoreFromUICache(appStoreSetState);
+
+    expect(didRestore).toBe(true);
+    expect(appStoreSetState).toHaveBeenCalledTimes(1);
+
+    const restoredState = appStoreSetState.mock.calls[0][0] as Record<string, unknown>;
+    expect(restoredState.currentWorktreeByProject).toEqual({
+      '/valid': { path: '/valid/.worktrees/feature-a', branch: 'feature/a' },
+    });
+    expect(restoredState.currentProject).toEqual({
+      id: 'project-1',
+      name: 'Project One',
+      path: '/project-1',
+    });
+  });
+
+  it('restoreFromUICache returns false when there is no cached project context', () => {
+    const appStoreSetState = vi.fn();
+
+    const didRestore = restoreFromUICache(appStoreSetState);
+
+    expect(didRestore).toBe(false);
+    expect(appStoreSetState).not.toHaveBeenCalled();
+  });
+});
diff --git a/temp_repo/apps/ui/tests/utils/api/client.ts b/temp_repo/apps/ui/tests/utils/api/client.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7f98899c01e886296ebc9c22fd4ddf56fe61e201
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/api/client.ts
@@ -0,0 +1,416 @@
+/**
+ * API client utilities for making API calls in tests
+ * Provides type-safe wrappers around common API operations
+ */
+
+import { Page, APIResponse } from '@playwright/test';
+import { API_BASE_URL, API_ENDPOINTS, WEB_BASE_URL } from '../core/constants';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface WorktreeInfo {
+  path: string;
+  branch: string;
+  isNew?: boolean;
+  hasChanges?: boolean;
+  changedFilesCount?: number;
+}
+
+export interface WorktreeListResponse {
+  success: boolean;
+  worktrees: WorktreeInfo[];
+  error?: string;
+}
+
+export interface WorktreeCreateResponse {
+  success: boolean;
+  worktree?: WorktreeInfo;
+  error?: string;
+}
+
+export interface WorktreeDeleteResponse {
+  success: boolean;
+  error?: string;
+}
+
+export interface CommitResult {
+  committed: boolean;
+  branch?: string;
+  commitHash?: string;
+  message?: string;
+}
+
+export interface CommitResponse {
+  success: boolean;
+  result?: CommitResult;
+  error?: string;
+}
+
+export interface SwitchBranchResult {
+  previousBranch: string;
+  currentBranch: string;
+  message: string;
+}
+
+export interface SwitchBranchResponse {
+  success: boolean;
+  result?: SwitchBranchResult;
+  error?: string;
+  code?: string;
+}
+
+export interface BranchInfo {
+  name: string;
+  isCurrent: boolean;
+}
+
+export interface ListBranchesResult {
+  currentBranch: string;
+  branches: BranchInfo[];
+}
+
+export interface ListBranchesResponse {
+  success: boolean;
+  result?: ListBranchesResult;
+  error?: string;
+}
+
+// ============================================================================
+// Worktree API Client
+// ============================================================================
+
+export class WorktreeApiClient {
+  constructor(private page: Page) {}
+
+  /**
+   * Create a new worktree
+   */
+  async create(
+    projectPath: string,
+    branchName: string,
+    baseBranch?: string
+  ): Promise<{ response: APIResponse; data: WorktreeCreateResponse }> {
+    const response = await this.page.request.post(API_ENDPOINTS.worktree.create, {
+      data: {
+        projectPath,
+        branchName,
+        baseBranch,
+      },
+    });
+    const data = await response.json();
+    return { response, data };
+  }
+
+  /**
+   * Delete a worktree
+   */
+  async delete(
+    projectPath: string,
+    worktreePath: string,
+    deleteBranch: boolean = true
+  ): Promise<{ response: APIResponse; data: WorktreeDeleteResponse }> {
+    const response = await this.page.request.post(API_ENDPOINTS.worktree.delete, {
+      data: {
+        projectPath,
+        worktreePath,
+        deleteBranch,
+      },
+    });
+    const data = await response.json();
+    return { response, data };
+  }
+
+  /**
+   * List all worktrees
+   */
+  async list(
+    projectPath: string,
+    includeDetails: boolean = true
+  ): Promise<{ response: APIResponse; data: WorktreeListResponse }> {
+    const response = await this.page.request.post(API_ENDPOINTS.worktree.list, {
+      data: {
+        projectPath,
+        includeDetails,
+      },
+    });
+    const data = await response.json();
+    return { response, data };
+  }
+
+  /**
+   * Commit changes in a worktree
+   */
+  async commit(
+    worktreePath: string,
+    message: string
+  ): Promise<{ response: APIResponse; data: CommitResponse }> {
+    const response = await this.page.request.post(API_ENDPOINTS.worktree.commit, {
+      data: {
+        worktreePath,
+        message,
+      },
+    });
+    const data = await response.json();
+    return { response, data };
+  }
+
+  /**
+   * Switch branches in a worktree
+   */
+  async switchBranch(
+    worktreePath: string,
+    branchName: string
+  ): Promise<{ response: APIResponse; data: SwitchBranchResponse }> {
+    const response = await this.page.request.post(API_ENDPOINTS.worktree.switchBranch, {
+      data: {
+        worktreePath,
+        branchName,
+      },
+    });
+    const data = await response.json();
+    return { response, data };
+  }
+
+  /**
+   * List all branches
+   */
+  async listBranches(
+    worktreePath: string
+  ): Promise<{ response: APIResponse; data: ListBranchesResponse }> {
+    const response = await this.page.request.post(API_ENDPOINTS.worktree.listBranches, {
+      data: {
+        worktreePath,
+      },
+    });
+    const data = await response.json();
+    return { response, data };
+  }
+}
+
+// ============================================================================
+// Factory Functions
+// ============================================================================
+
+/**
+ * Create a WorktreeApiClient instance
+ */
+export function createWorktreeApiClient(page: Page): WorktreeApiClient {
+  return new WorktreeApiClient(page);
+}
+
+// ============================================================================
+// Convenience Functions (for direct use without creating a client)
+// ============================================================================
+
+/**
+ * Create a worktree via API
+ */
+export async function apiCreateWorktree(
+  page: Page,
+  projectPath: string,
+  branchName: string,
+  baseBranch?: string
+): Promise<{ response: APIResponse; data: WorktreeCreateResponse }> {
+  return new WorktreeApiClient(page).create(projectPath, branchName, baseBranch);
+}
+
+/**
+ * Delete a worktree via API
+ */
+export async function apiDeleteWorktree(
+  page: Page,
+  projectPath: string,
+  worktreePath: string,
+  deleteBranch: boolean = true
+): Promise<{ response: APIResponse; data: WorktreeDeleteResponse }> {
+  return new WorktreeApiClient(page).delete(projectPath, worktreePath, deleteBranch);
+}
+
+/**
+ * List worktrees via API
+ */
+export async function apiListWorktrees(
+  page: Page,
+  projectPath: string,
+  includeDetails: boolean = true
+): Promise<{ response: APIResponse; data: WorktreeListResponse }> {
+  return new WorktreeApiClient(page).list(projectPath, includeDetails);
+}
+
+/**
+ * Commit changes in a worktree via API
+ */
+export async function apiCommitWorktree(
+  page: Page,
+  worktreePath: string,
+  message: string
+): Promise<{ response: APIResponse; data: CommitResponse }> {
+  return new WorktreeApiClient(page).commit(worktreePath, message);
+}
+
+/**
+ * Switch branches in a worktree via API
+ */
+export async function apiSwitchBranch(
+  page: Page,
+  worktreePath: string,
+  branchName: string
+): Promise<{ response: APIResponse; data: SwitchBranchResponse }> {
+  return new WorktreeApiClient(page).switchBranch(worktreePath, branchName);
+}
+
+/**
+ * List branches via API
+ */
+export async function apiListBranches(
+  page: Page,
+  worktreePath: string
+): Promise<{ response: APIResponse; data: ListBranchesResponse }> {
+  return new WorktreeApiClient(page).listBranches(worktreePath);
+}
+
+// ============================================================================
+// Authentication Utilities
+// ============================================================================
+
+/**
+ * Authenticate with the server using an API key
+ * This sets a session cookie that will be used for subsequent requests
+ * Uses browser context to ensure cookies are properly set
+ */
+export async function authenticateWithApiKey(page: Page, apiKey: string): Promise<boolean> {
+  try {
+    // Fast path: check if we already have a valid session (from global setup storageState)
+    try {
+      const statusRes = await page.request.get(`${API_BASE_URL}/api/auth/status`, {
+        timeout: 3000,
+      });
+      const statusJson = (await statusRes.json().catch(() => null)) as {
+        authenticated?: boolean;
+      } | null;
+      if (statusJson?.authenticated === true) {
+        return true;
+      }
+    } catch {
+      // Status check failed, proceed with full auth
+    }
+
+    // Ensure the backend is up before attempting login (especially in local runs where
+    // the backend may be started separately from Playwright).
+    const start = Date.now();
+    let authBackoff = 250;
+    while (Date.now() - start < 15000) {
+      try {
+        const health = await page.request.get(`${API_BASE_URL}/api/health`, {
+          timeout: 3000,
+        });
+        if (health.ok()) break;
+      } catch {
+        // Retry
+      }
+      await page.waitForTimeout(authBackoff);
+      authBackoff = Math.min(authBackoff * 2, 2000);
+    }
+
+    // Ensure we're on a page (needed for cookies to work)
+    const currentUrl = page.url();
+    if (!currentUrl || currentUrl === 'about:blank') {
+      await page.goto(WEB_BASE_URL, { waitUntil: 'domcontentloaded' });
+    }
+
+    // Use Playwright request API (tied to this browser context) to avoid flakiness
+    // with cross-origin fetch inside page.evaluate.
+    const loginResponse = await page.request.post(`${API_BASE_URL}/api/auth/login`, {
+      data: { apiKey },
+      headers: { 'Content-Type': 'application/json' },
+      timeout: 15000,
+    });
+    const response = (await loginResponse.json().catch(() => null)) as {
+      success?: boolean;
+      token?: string;
+    } | null;
+
+    if (response?.success && response.token) {
+      // Manually set the cookie in the browser context
+      // The server sets a cookie named 'automaker_session' (see SESSION_COOKIE_NAME in auth.ts)
+      await page.context().addCookies([
+        {
+          name: 'automaker_session',
+          value: response.token,
+          domain: '127.0.0.1',
+          path: '/',
+          httpOnly: true,
+          sameSite: 'Lax',
+        },
+      ]);
+
+      // Single verification check (no polling loop needed)
+      const verifyRes = await page.request.get(`${API_BASE_URL}/api/auth/status`, {
+        timeout: 5000,
+      });
+      const verifyJson = (await verifyRes.json().catch(() => null)) as {
+        authenticated?: boolean;
+      } | null;
+
+      return verifyJson?.authenticated === true;
+    }
+
+    return false;
+  } catch (error) {
+    console.error('Authentication error:', error);
+    return false;
+  }
+}
+
+/**
+ * Authenticate using the API key from environment variable
+ * Falls back to a test default if AUTOMAKER_API_KEY is not set
+ */
+export async function authenticateForTests(page: Page): Promise<boolean> {
+  // Use the API key from environment, or a test default
+  const apiKey = process.env.AUTOMAKER_API_KEY || 'test-api-key-for-e2e-tests';
+  return authenticateWithApiKey(page, apiKey);
+}
+
+/**
+ * Check if the backend server is healthy
+ * Returns true if the server responds with status 200, false otherwise
+ */
+export async function checkBackendHealth(page: Page, timeout = 5000): Promise<boolean> {
+  try {
+    const response = await page.request.get(`${API_BASE_URL}/api/health`, {
+      timeout,
+    });
+    return response.ok();
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Wait for the backend to be healthy, with retry logic
+ * Throws an error if the backend doesn't become healthy within the timeout
+ */
+export async function waitForBackendHealth(
+  page: Page,
+  maxWaitMs = 30000,
+  checkIntervalMs = 500
+): Promise<void> {
+  const startTime = Date.now();
+  let backoff = checkIntervalMs;
+
+  while (Date.now() - startTime < maxWaitMs) {
+    if (await checkBackendHealth(page, Math.min(backoff, 3000))) {
+      return;
+    }
+    await page.waitForTimeout(backoff);
+    backoff = Math.min(backoff * 2, 2000);
+  }
+
+  throw new Error(
+    `Backend did not become healthy within ${maxWaitMs}ms. ` +
+      `Last health check failed or timed out.`
+  );
+}
diff --git a/temp_repo/apps/ui/tests/utils/cleanup-test-dirs.ts b/temp_repo/apps/ui/tests/utils/cleanup-test-dirs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..926e720bc15eb8dc06124807bc7cd1ff83ac5b40
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/cleanup-test-dirs.ts
@@ -0,0 +1,75 @@
+/**
+ * Cleanup leftover E2E test artifact directories.
+ * Used by globalSetup (start of run) and globalTeardown (end of run) to ensure:
+ * - test/board-bg-test-*, test/edit-feature-test-*, etc. are removed
+ * - test/fixtures/.worker-* (worker-isolated fixture copies) are removed
+ *
+ * Per-spec afterAll hooks clean up their own dirs, but when workers crash,
+ * runs are aborted, or afterAll fails, dirs can be left behind.
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import { getWorkspaceRoot } from './core/safe-paths';
+
+/** Prefixes used by createTempDirPath() across all spec files */
+const TEST_DIR_PREFIXES = [
+  'board-bg-test',
+  'edit-feature-test',
+  'open-project-test',
+  'opus-thinking-level-none',
+  'project-creation-test',
+  'agent-session-test',
+  'running-task-display-test',
+  'planning-mode-verification-test',
+  'list-view-priority-test',
+  'skip-tests-toggle-test',
+  'manual-review-test',
+  'feature-backlog-test',
+  'responsive-modal-test',
+  'success-log-contrast',
+] as const;
+
+/**
+ * Remove worker-isolated fixture copies (test/fixtures/.worker-*).
+ * These are created during test runs for parallel workers and should be
+ * cleaned up after tests complete (or at start of next run).
+ */
+export function cleanupLeftoverFixtureWorkerDirs(): void {
+  const fixturesBase = path.join(getWorkspaceRoot(), 'test', 'fixtures');
+  if (!fs.existsSync(fixturesBase)) return;
+
+  const entries = fs.readdirSync(fixturesBase, { withFileTypes: true });
+  for (const entry of entries) {
+    if (entry.isDirectory() && entry.name.startsWith('.worker-')) {
+      const dirPath = path.join(fixturesBase, entry.name);
+      try {
+        fs.rmSync(dirPath, { recursive: true, force: true });
+        console.log('[Cleanup] Removed fixture worker dir', entry.name);
+      } catch (err) {
+        console.warn('[Cleanup] Failed to remove', dirPath, err);
+      }
+    }
+  }
+}
+
+export function cleanupLeftoverTestDirs(): void {
+  const testBase = path.join(getWorkspaceRoot(), 'test');
+  if (!fs.existsSync(testBase)) return;
+
+  const entries = fs.readdirSync(testBase, { withFileTypes: true });
+  for (const prefix of TEST_DIR_PREFIXES) {
+    const pattern = prefix + '-';
+    for (const entry of entries) {
+      if (entry.isDirectory() && entry.name.startsWith(pattern)) {
+        const dirPath = path.join(testBase, entry.name);
+        try {
+          fs.rmSync(dirPath, { recursive: true, force: true });
+          console.log('[Cleanup] Removed', entry.name);
+        } catch (err) {
+          console.warn('[Cleanup] Failed to remove', dirPath, err);
+        }
+      }
+    }
+  }
+}
diff --git a/temp_repo/apps/ui/tests/utils/components/autocomplete.ts b/temp_repo/apps/ui/tests/utils/components/autocomplete.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4d612c2515eb66b2a10723ea8a1d27c0878d03e4
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/components/autocomplete.ts
@@ -0,0 +1,62 @@
+import { Page, Locator } from '@playwright/test';
+import { waitForElement, waitForElementHidden } from '../core/waiting';
+
+/**
+ * Check if the category autocomplete dropdown is visible
+ */
+export async function isCategoryAutocompleteListVisible(page: Page): Promise<boolean> {
+  const list = page.locator('[data-testid="category-autocomplete-list"]');
+  return await list.isVisible();
+}
+
+/**
+ * Wait for the category autocomplete dropdown to be visible
+ */
+export async function waitForCategoryAutocompleteList(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  return await waitForElement(page, 'category-autocomplete-list', options);
+}
+
+/**
+ * Wait for the category autocomplete dropdown to be hidden
+ */
+export async function waitForCategoryAutocompleteListHidden(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<void> {
+  await waitForElementHidden(page, 'category-autocomplete-list', options);
+}
+
+/**
+ * Click a category option in the autocomplete dropdown
+ */
+export async function clickCategoryOption(page: Page, categoryName: string): Promise<void> {
+  const optionTestId = `category-option-${categoryName.toLowerCase().replace(/\s+/g, '-')}`;
+  const option = page.locator(`[data-testid="${optionTestId}"]`);
+  await option.click();
+}
+
+/**
+ * Get a category option element by name
+ */
+export async function getCategoryOption(page: Page, categoryName: string): Promise<Locator> {
+  const optionTestId = `category-option-${categoryName.toLowerCase().replace(/\s+/g, '-')}`;
+  return page.locator(`[data-testid="${optionTestId}"]`);
+}
+
+/**
+ * Click the "Create new" option for a category that doesn't exist
+ */
+export async function clickCreateNewCategoryOption(page: Page): Promise<void> {
+  const option = page.locator('[data-testid="category-option-create-new"]');
+  await option.click();
+}
+
+/**
+ * Get the "Create new" option element for categories
+ */
+export async function getCreateNewCategoryOption(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="category-option-create-new"]');
+}
diff --git a/temp_repo/apps/ui/tests/utils/components/dialogs.ts b/temp_repo/apps/ui/tests/utils/components/dialogs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..57f9a31d8cd0450508c15e0e131b54837a004009
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/components/dialogs.ts
@@ -0,0 +1,207 @@
+import { Page, Locator } from '@playwright/test';
+import { clickElement } from '../core/interactions';
+import { waitForElement, waitForElementHidden } from '../core/waiting';
+
+/**
+ * Dismiss the sandbox warning dialog if it appears.
+ * This dialog blocks pointer events and must be accepted before interacting
+ * with elements behind it.
+ */
+export async function dismissSandboxWarningIfVisible(page: Page): Promise<void> {
+  const sandboxAcceptBtn = page.locator('button:has-text("I Accept the Risks")');
+  const sandboxVisible = await sandboxAcceptBtn
+    .waitFor({ state: 'visible', timeout: 2000 })
+    .then(() => true)
+    .catch(() => false);
+  if (sandboxVisible) {
+    await sandboxAcceptBtn.click();
+    await page
+      .locator('[role="dialog"][data-state="open"]')
+      .first()
+      .waitFor({ state: 'hidden', timeout: 3000 })
+      .catch(() => {});
+  }
+}
+
+/**
+ * Check if the add feature dialog is visible
+ */
+export async function isAddFeatureDialogVisible(page: Page): Promise<boolean> {
+  const dialog = page.locator('[data-testid="add-feature-dialog"]');
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Check if the add context file dialog is visible
+ */
+export async function isAddContextDialogVisible(page: Page): Promise<boolean> {
+  const dialog = page.locator('[data-testid="add-context-dialog"]');
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Check if the edit feature dialog is visible
+ */
+export async function isEditFeatureDialogVisible(page: Page): Promise<boolean> {
+  const dialog = page.locator('[data-testid="edit-feature-dialog"]');
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Wait for the edit feature dialog to be visible
+ */
+export async function waitForEditFeatureDialog(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  return await waitForElement(page, 'edit-feature-dialog', options);
+}
+
+/**
+ * Get the edit feature description input/textarea element
+ */
+export async function getEditFeatureDescriptionInput(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="edit-feature-description"]');
+}
+
+/**
+ * Check if the edit feature description field is a textarea
+ */
+export async function isEditFeatureDescriptionTextarea(page: Page): Promise<boolean> {
+  const element = page.locator('[data-testid="edit-feature-description"]');
+  const tagName = await element.evaluate((el) => el.tagName.toLowerCase());
+  return tagName === 'textarea';
+}
+
+/**
+ * Open the edit dialog for a specific feature
+ */
+export async function openEditFeatureDialog(page: Page, featureId: string): Promise<void> {
+  await clickElement(page, `edit-feature-${featureId}`);
+  await waitForEditFeatureDialog(page);
+}
+
+/**
+ * Fill the edit feature description field
+ */
+export async function fillEditFeatureDescription(page: Page, value: string): Promise<void> {
+  const input = await getEditFeatureDescriptionInput(page);
+  await input.fill(value);
+}
+
+/**
+ * Click the confirm edit feature button
+ */
+export async function confirmEditFeature(page: Page): Promise<void> {
+  await clickElement(page, 'confirm-edit-feature');
+}
+
+/**
+ * Get the delete confirmation dialog
+ */
+export async function getDeleteConfirmationDialog(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="delete-confirmation-dialog"]');
+}
+
+/**
+ * Check if the delete confirmation dialog is visible
+ */
+export async function isDeleteConfirmationDialogVisible(page: Page): Promise<boolean> {
+  const dialog = page.locator('[data-testid="delete-confirmation-dialog"]');
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Wait for the delete confirmation dialog to appear
+ */
+export async function waitForDeleteConfirmationDialog(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  return await waitForElement(page, 'delete-confirmation-dialog', options);
+}
+
+/**
+ * Wait for the delete confirmation dialog to be hidden
+ */
+export async function waitForDeleteConfirmationDialogHidden(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<void> {
+  await waitForElementHidden(page, 'delete-confirmation-dialog', options);
+}
+
+/**
+ * Click the confirm delete button in the delete confirmation dialog
+ */
+export async function clickConfirmDeleteButton(page: Page): Promise<void> {
+  await clickElement(page, 'confirm-delete-button');
+}
+
+/**
+ * Click the cancel delete button in the delete confirmation dialog
+ */
+export async function clickCancelDeleteButton(page: Page): Promise<void> {
+  await clickElement(page, 'cancel-delete-button');
+}
+
+/**
+ * Check if the follow-up dialog is visible
+ */
+export async function isFollowUpDialogVisible(page: Page): Promise<boolean> {
+  const dialog = page.locator('[data-testid="follow-up-dialog"]');
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Wait for the follow-up dialog to be visible
+ */
+export async function waitForFollowUpDialog(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  return await waitForElement(page, 'follow-up-dialog', options);
+}
+
+/**
+ * Wait for the follow-up dialog to be hidden
+ */
+export async function waitForFollowUpDialogHidden(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<void> {
+  await waitForElementHidden(page, 'follow-up-dialog', options);
+}
+
+/**
+ * Click the confirm follow-up button in the follow-up dialog
+ */
+export async function clickConfirmFollowUp(page: Page): Promise<void> {
+  await clickElement(page, 'confirm-follow-up');
+}
+
+/**
+ * Check if the project initialization dialog is visible
+ */
+export async function isProjectInitDialogVisible(page: Page): Promise<boolean> {
+  const dialog = page.locator('[data-testid="project-init-dialog"]');
+  return await dialog.isVisible();
+}
+
+/**
+ * Wait for the project initialization dialog to appear
+ */
+export async function waitForProjectInitDialog(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  return await waitForElement(page, 'project-init-dialog', options);
+}
+
+/**
+ * Close the project initialization dialog
+ */
+export async function closeProjectInitDialog(page: Page): Promise<void> {
+  const closeButton = page.locator('[data-testid="close-init-dialog"]');
+  await closeButton.click();
+}
diff --git a/temp_repo/apps/ui/tests/utils/components/modals.ts b/temp_repo/apps/ui/tests/utils/components/modals.ts
new file mode 100644
index 0000000000000000000000000000000000000000..92d7f6bca2a43a7abd940e94158eff1f2b0b7e17
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/components/modals.ts
@@ -0,0 +1,92 @@
+import { Page, Locator } from '@playwright/test';
+import { waitForElement, waitForElementHidden } from '../core/waiting';
+
+/**
+ * Check if the agent output modal is visible
+ */
+export async function isAgentOutputModalVisible(page: Page): Promise<boolean> {
+  const modal = page.locator('[data-testid="agent-output-modal"]');
+  return await modal.isVisible();
+}
+
+/**
+ * Wait for the agent output modal to be visible
+ */
+export async function waitForAgentOutputModal(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  return await waitForElement(page, 'agent-output-modal', options);
+}
+
+/**
+ * Wait for the agent output modal to be hidden
+ */
+export async function waitForAgentOutputModalHidden(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<void> {
+  await waitForElementHidden(page, 'agent-output-modal', options);
+}
+
+/**
+ * Get the modal title/description text to verify which feature's output is being shown
+ */
+export async function getAgentOutputModalDescription(page: Page): Promise<string | null> {
+  const modal = page.locator('[data-testid="agent-output-modal"]');
+  const description = modal.locator('[id="radix-\\:r.+\\:-description"]').first();
+  return await description.textContent().catch(() => null);
+}
+
+/**
+ * Check the dialog description content in the agent output modal
+ */
+export async function getOutputModalDescription(page: Page): Promise<string | null> {
+  const modalDescription = page.locator(
+    '[data-testid="agent-output-modal"] [data-slot="dialog-description"]'
+  );
+  return await modalDescription.textContent().catch(() => null);
+}
+
+/**
+ * Get the agent output modal description element
+ */
+export async function getAgentOutputModalDescriptionElement(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="agent-output-description"]');
+}
+
+/**
+ * Check if the agent output modal description is scrollable
+ */
+export async function isAgentOutputDescriptionScrollable(page: Page): Promise<boolean> {
+  const description = page.locator('[data-testid="agent-output-description"]');
+  const scrollInfo = await description.evaluate((el) => {
+    return {
+      scrollHeight: el.scrollHeight,
+      clientHeight: el.clientHeight,
+      isScrollable: el.scrollHeight > el.clientHeight,
+    };
+  });
+  return scrollInfo.isScrollable;
+}
+
+/**
+ * Get scroll dimensions of the agent output modal description
+ */
+export async function getAgentOutputDescriptionScrollDimensions(page: Page): Promise<{
+  scrollHeight: number;
+  clientHeight: number;
+  maxHeight: string;
+  overflowY: string;
+}> {
+  const description = page.locator('[data-testid="agent-output-description"]');
+  return await description.evaluate((el) => {
+    const style = window.getComputedStyle(el);
+    return {
+      scrollHeight: el.scrollHeight,
+      clientHeight: el.clientHeight,
+      maxHeight: style.maxHeight,
+      overflowY: style.overflowY,
+    };
+  });
+}
diff --git a/temp_repo/apps/ui/tests/utils/components/toasts.ts b/temp_repo/apps/ui/tests/utils/components/toasts.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fa0edb801b03d1977d547ee6444357775087b0c0
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/components/toasts.ts
@@ -0,0 +1,85 @@
+import { Page, Locator } from '@playwright/test';
+
+/**
+ * Wait for a toast notification with specific text to appear
+ */
+export async function waitForToast(
+  page: Page,
+  text: string,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  const toast = page.locator(`[data-sonner-toast]:has-text("${text}")`).first();
+  await toast.waitFor({
+    timeout: options?.timeout ?? 5000,
+    state: 'visible',
+  });
+  return toast;
+}
+
+/**
+ * Wait for an error toast to appear with specific text
+ */
+export async function waitForErrorToast(
+  page: Page,
+  titleText?: string,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  // Try multiple selectors for error toasts since Sonner versions may differ
+  // 1. Try with data-type="error" attribute
+  // 2. Fallback to any toast with the text (error styling might vary)
+  const timeout = options?.timeout ?? 5000;
+
+  if (titleText) {
+    // First try specific error type, then fallback to any toast with text
+    const errorToast = page
+      .locator(
+        `[data-sonner-toast][data-type="error"]:has-text("${titleText}"), [data-sonner-toast]:has-text("${titleText}")`
+      )
+      .first();
+    await errorToast.waitFor({
+      timeout,
+      state: 'visible',
+    });
+    return errorToast;
+  } else {
+    const errorToast = page.locator('[data-sonner-toast][data-type="error"]').first();
+    await errorToast.waitFor({
+      timeout,
+      state: 'visible',
+    });
+    return errorToast;
+  }
+}
+
+/**
+ * Check if an error toast is visible
+ */
+export async function isErrorToastVisible(page: Page, titleText?: string): Promise<boolean> {
+  const toastSelector = titleText
+    ? `[data-sonner-toast][data-type="error"]:has-text("${titleText}")`
+    : '[data-sonner-toast][data-type="error"]';
+
+  const toast = page.locator(toastSelector).first();
+  return await toast.isVisible();
+}
+
+/**
+ * Wait for a success toast to appear with specific text
+ */
+export async function waitForSuccessToast(
+  page: Page,
+  titleText?: string,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  // Sonner toasts use data-sonner-toast and data-type="success" for success toasts
+  const toastSelector = titleText
+    ? `[data-sonner-toast][data-type="success"]:has-text("${titleText}")`
+    : '[data-sonner-toast][data-type="success"]';
+
+  const toast = page.locator(toastSelector).first();
+  await toast.waitFor({
+    timeout: options?.timeout ?? 5000,
+    state: 'visible',
+  });
+  return toast;
+}
diff --git a/temp_repo/apps/ui/tests/utils/core/constants.ts b/temp_repo/apps/ui/tests/utils/core/constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e34212d0735601e79d6e07b61bc190aef5b6fec1
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/core/constants.ts
@@ -0,0 +1,185 @@
+/**
+ * Centralized constants for test utilities
+ * This file contains all shared constants like URLs, timeouts, and selectors
+ */
+
+// ============================================================================
+// API Configuration
+// ============================================================================
+
+/**
+ * Base URL for the API server
+ * Uses TEST_SERVER_PORT env var (default 3108) for test runs
+ */
+export const API_BASE_URL = process.env.TEST_SERVER_PORT
+  ? `http://127.0.0.1:${process.env.TEST_SERVER_PORT}`
+  : 'http://127.0.0.1:3108';
+
+/**
+ * Base URL for the frontend web server
+ * Uses TEST_PORT env var (default 3107) for test runs
+ */
+export const WEB_BASE_URL = process.env.TEST_PORT
+  ? `http://127.0.0.1:${process.env.TEST_PORT}`
+  : 'http://127.0.0.1:3107';
+
+/**
+ * API endpoints for worktree operations
+ */
+export const API_ENDPOINTS = {
+  worktree: {
+    create: `${API_BASE_URL}/api/worktree/create`,
+    delete: `${API_BASE_URL}/api/worktree/delete`,
+    list: `${API_BASE_URL}/api/worktree/list`,
+    commit: `${API_BASE_URL}/api/worktree/commit`,
+    switchBranch: `${API_BASE_URL}/api/worktree/switch-branch`,
+    listBranches: `${API_BASE_URL}/api/worktree/list-branches`,
+    status: `${API_BASE_URL}/api/worktree/status`,
+    info: `${API_BASE_URL}/api/worktree/info`,
+  },
+  fs: {
+    browse: `${API_BASE_URL}/api/fs/browse`,
+    read: `${API_BASE_URL}/api/fs/read`,
+    write: `${API_BASE_URL}/api/fs/write`,
+  },
+  features: {
+    list: `${API_BASE_URL}/api/features/list`,
+    create: `${API_BASE_URL}/api/features/create`,
+    update: `${API_BASE_URL}/api/features/update`,
+    delete: `${API_BASE_URL}/api/features/delete`,
+  },
+} as const;
+
+// ============================================================================
+// Timeout Configuration
+// ============================================================================
+
+/**
+ * Default timeouts in milliseconds
+ */
+export const TIMEOUTS = {
+  /** Default timeout for element visibility checks */
+  default: 5000,
+  /** Short timeout for quick checks */
+  short: 2000,
+  /** Medium timeout for standard operations */
+  medium: 10000,
+  /** Long timeout for slow operations */
+  long: 30000,
+  /** Extra long timeout for very slow operations */
+  extraLong: 60000,
+  /** Timeout for animations to complete */
+  animation: 300,
+  /** Small delay for UI to settle */
+  settle: 500,
+  /** Delay for network operations */
+  network: 1000,
+} as const;
+
+// ============================================================================
+// Test ID Selectors
+// ============================================================================
+
+/**
+ * Common data-testid selectors organized by component/view
+ */
+export const TEST_IDS = {
+  // Sidebar & Navigation
+  sidebar: 'sidebar',
+  navBoard: 'nav-board',
+  navSpec: 'nav-spec',
+  navContext: 'nav-context',
+  navAgent: 'nav-agent',
+  settingsButton: 'settings-button',
+  openProjectButton: 'open-project-button',
+
+  // Views
+  boardView: 'board-view',
+  specView: 'spec-view',
+  contextView: 'context-view',
+  agentView: 'agent-view',
+  settingsView: 'settings-view',
+  welcomeView: 'welcome-view',
+  dashboardView: 'dashboard-view',
+  setupView: 'setup-view',
+
+  // Board View Components
+  addFeatureButton: 'add-feature-button',
+  addFeatureDialog: 'add-feature-dialog',
+  confirmAddFeature: 'confirm-add-feature',
+  featureBranchInput: 'feature-input',
+  featureCategoryInput: 'feature-category-input',
+  worktreeSelector: 'worktree-selector',
+
+  // Spec Editor
+  specEditor: 'spec-editor',
+
+  // File Browser Dialog
+  pathInput: 'path-input',
+  goToPathButton: 'go-to-path-button',
+
+  // Context View
+  contextFileList: 'context-file-list',
+  addContextButton: 'add-context-button',
+} as const;
+
+// ============================================================================
+// CSS Selectors
+// ============================================================================
+
+/**
+ * Common CSS selectors for elements that don't have data-testid
+ */
+export const CSS_SELECTORS = {
+  /** CodeMirror editor content area */
+  codeMirrorContent: '.cm-content',
+  /** Dialog elements */
+  dialog: '[role="dialog"]',
+  /** Sonner toast notifications */
+  toast: '[data-sonner-toast]',
+  toastError: '[data-sonner-toast][data-type="error"]',
+  toastSuccess: '[data-sonner-toast][data-type="success"]',
+  /** Command/combobox input (shadcn-ui cmdk) */
+  commandInput: '[cmdk-input]',
+  /** Radix dialog overlay */
+  dialogOverlay: '[data-radix-dialog-overlay]',
+} as const;
+
+// ============================================================================
+// Storage Keys
+// ============================================================================
+
+/**
+ * localStorage keys used by the application
+ */
+export const STORAGE_KEYS = {
+  appStorage: 'automaker-storage',
+  setupStorage: 'automaker-setup',
+} as const;
+
+// ============================================================================
+// Branch Name Utilities
+// ============================================================================
+
+/**
+ * Sanitize a branch name to create a valid worktree directory name
+ * @param branchName - The branch name to sanitize
+ * @returns Sanitized name suitable for directory paths
+ */
+export function sanitizeBranchName(branchName: string): string {
+  return branchName.replace(/[^a-zA-Z0-9_-]/g, '-');
+}
+
+// ============================================================================
+// Default Values
+// ============================================================================
+
+/**
+ * Default values used in test setup
+ */
+export const DEFAULTS = {
+  projectName: 'Test Project',
+  projectPath: '/mock/test-project',
+  theme: 'dark' as const,
+  maxConcurrency: 3,
+} as const;
diff --git a/temp_repo/apps/ui/tests/utils/core/elements.ts b/temp_repo/apps/ui/tests/utils/core/elements.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b46ad31ece986f77d139ce4183ff8378dde422ff
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/core/elements.ts
@@ -0,0 +1,49 @@
+import { Page, Locator } from '@playwright/test';
+
+/**
+ * Sanitize a string for use in data-testid selectors.
+ * This mirrors the sanitizeForTestId function in apps/ui/src/lib/utils.ts
+ * to ensure tests use the same sanitization logic as the component.
+ *
+ * @param name - The string to sanitize (e.g., project name)
+ * @returns A sanitized string safe for CSS selectors
+ */
+export function sanitizeForTestId(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-]/g, '')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '');
+}
+
+/**
+ * Get an element by its data-testid attribute
+ */
+export async function getByTestId(page: Page, testId: string): Promise<Locator> {
+  return page.locator(`[data-testid="${testId}"]`);
+}
+
+/**
+ * Get a button by its text content
+ */
+export async function getButtonByText(page: Page, text: string): Promise<Locator> {
+  return page.locator(`button:has-text("${text}")`);
+}
+
+/**
+ * Get the category autocomplete input element
+ */
+export async function getCategoryAutocompleteInput(
+  page: Page,
+  testId: string = 'feature-category-input'
+): Promise<Locator> {
+  return page.locator(`[data-testid="${testId}"]`);
+}
+
+/**
+ * Get the category autocomplete dropdown list
+ */
+export async function getCategoryAutocompleteList(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="category-autocomplete-list"]');
+}
diff --git a/temp_repo/apps/ui/tests/utils/core/interactions.ts b/temp_repo/apps/ui/tests/utils/core/interactions.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0195fa9ed8519e25bfb0ed44742dc941b7e75aa4
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/core/interactions.ts
@@ -0,0 +1,183 @@
+import { Page, expect } from '@playwright/test';
+import { getByTestId, getButtonByText } from './elements';
+
+/**
+ * Get the platform-specific modifier key (Meta for Mac, Control for Windows/Linux)
+ * This is used for keyboard shortcuts like Cmd+Enter or Ctrl+Enter
+ */
+export function getPlatformModifier(): 'Meta' | 'Control' {
+  return process.platform === 'darwin' ? 'Meta' : 'Control';
+}
+
+/**
+ * Press the platform-specific modifier + a key (e.g., Cmd+Enter or Ctrl+Enter)
+ */
+export async function pressModifierEnter(page: Page): Promise<void> {
+  const modifier = getPlatformModifier();
+  await page.keyboard.press(`${modifier}+Enter`);
+}
+
+/**
+ * Click an element by its data-testid attribute
+ * Waits for the element to be visible before clicking to avoid flaky tests
+ */
+export async function clickElement(page: Page, testId: string): Promise<void> {
+  // Splash screen waits are handled by navigation helpers (navigateToContext, navigateToMemory, etc.)
+  // before any clickElement calls, so we skip the splash check here to avoid blocking when
+  // other fixed overlays (e.g. HeaderActionsPanel backdrop at z-[60]) are present on the page.
+  const element = page.locator(`[data-testid="${testId}"]`);
+  await element.waitFor({ state: 'visible', timeout: 10000 });
+  await element.click();
+}
+
+/**
+ * Click a button by its text content
+ */
+export async function clickButtonByText(page: Page, text: string): Promise<void> {
+  const button = await getButtonByText(page, text);
+  await button.click();
+}
+
+/**
+ * Fill an input field by its data-testid attribute
+ */
+export async function fillInput(page: Page, testId: string, value: string): Promise<void> {
+  const input = await getByTestId(page, testId);
+  await input.fill(value);
+}
+
+/**
+ * Press a keyboard shortcut key
+ */
+export async function pressShortcut(page: Page, key: string): Promise<void> {
+  await page.keyboard.press(key);
+}
+
+/**
+ * Navigate to a URL with authentication
+ * This wrapper ensures authentication happens before navigation
+ */
+export async function gotoWithAuth(page: Page, url: string): Promise<void> {
+  const { authenticateForTests } = await import('../api/client');
+  await authenticateForTests(page);
+  await page.goto(url);
+}
+
+/** Selector matching any top-level app view by data-testid, used to detect that the app has loaded. */
+const APP_CONTENT_SELECTOR =
+  '[data-testid="welcome-view"], [data-testid="dashboard-view"], [data-testid="board-view"], [data-testid="context-view"], [data-testid="agent-view"], [data-testid="overview-view"]';
+
+/**
+ * Handle login screen if it appears after navigation
+ * Returns true if login was handled, false if no login screen was found
+ *
+ * Optimized: uses a short timeout (3s) since we're pre-authenticated via storageState.
+ * Login screens should only appear in exceptional cases (session expired, etc.)
+ */
+export async function handleLoginScreenIfPresent(page: Page): Promise<boolean> {
+  // Short timeout: with storageState auth, login should rarely appear
+  const maxWaitMs = 3000;
+
+  const appContent = page.locator(APP_CONTENT_SELECTOR);
+  const loginInput = page
+    .locator('[data-testid="login-api-key-input"], input[type="password"][placeholder*="API key"]')
+    .first();
+  const loggedOutPage = page.getByRole('heading', { name: /logged out/i });
+  const goToLoginButton = page.locator('button:has-text("Go to login")');
+
+  // Race between login screen, logged-out page, a delayed redirect to /login, and actual content
+  // App content check is first in the array to win ties (most common case)
+  const result = await Promise.race([
+    appContent
+      .first()
+      .waitFor({ state: 'visible', timeout: maxWaitMs })
+      .then(() => 'app-content' as const)
+      .catch(() => null),
+    page
+      .waitForURL((url) => url.pathname.includes('/login'), { timeout: maxWaitMs })
+      .then(() => 'login-redirect' as const)
+      .catch(() => null),
+    loginInput
+      .waitFor({ state: 'visible', timeout: maxWaitMs })
+      .then(() => 'login-input' as const)
+      .catch(() => null),
+    loggedOutPage
+      .waitFor({ state: 'visible', timeout: maxWaitMs })
+      .then(() => 'logged-out' as const)
+      .catch(() => null),
+  ]);
+
+  // Happy path: app content loaded, no login needed
+  if (result === 'app-content' || result === null) {
+    return false;
+  }
+
+  // Handle logged-out page - click "Go to login" button and then login
+  if (result === 'logged-out') {
+    await goToLoginButton.click();
+    await page.waitForLoadState('domcontentloaded');
+    // Now handle the login screen
+    return handleLoginScreenIfPresent(page);
+  }
+
+  const loginVisible = result === 'login-redirect' || result === 'login-input';
+
+  if (loginVisible) {
+    // Wait for login input to be visible if we were redirected
+    await loginInput.waitFor({ state: 'visible', timeout: 5000 }).catch(() => {});
+
+    const apiKey = process.env.AUTOMAKER_API_KEY || 'test-api-key-for-e2e-tests';
+    await loginInput.fill(apiKey);
+
+    // Wait for button to be enabled (it's disabled when input is empty)
+    const loginButton = page
+      .locator('[data-testid="login-submit-button"], button:has-text("Login")')
+      .first();
+    await expect(loginButton).toBeEnabled({ timeout: 5000 });
+    await loginButton.click();
+
+    // Wait for navigation away from login - either to content or URL change
+    await Promise.race([
+      page.waitForURL((url) => !url.pathname.includes('/login'), { timeout: 15000 }),
+      appContent.first().waitFor({ state: 'visible', timeout: 15000 }),
+    ]).catch(() => {});
+
+    await page.waitForLoadState('domcontentloaded');
+
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Press a number key (0-9) on the keyboard
+ */
+export async function pressNumberKey(page: Page, num: number): Promise<void> {
+  await page.keyboard.press(num.toString());
+}
+
+/**
+ * Focus on an input element to test that shortcuts don't fire when typing
+ */
+export async function focusOnInput(page: Page, testId: string): Promise<void> {
+  const input = page.locator(`[data-testid="${testId}"]`);
+  await input.focus();
+}
+
+/**
+ * Close any open dialog by pressing Escape
+ * Waits for dialog overlay to disappear. Use shorter timeout when no dialog expected (e.g. navigation).
+ * @param options.timeout - Max wait for dialog to close (default 5000). Use ~1500 when dialog may not exist.
+ */
+export async function closeDialogWithEscape(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<void> {
+  await page.keyboard.press('Escape');
+  const timeout = options?.timeout ?? 5000;
+  const openDialog = page.locator('[role="dialog"][data-state="open"]').first();
+  if ((await openDialog.count()) > 0) {
+    await openDialog.waitFor({ state: 'hidden', timeout }).catch(() => {});
+  }
+}
diff --git a/temp_repo/apps/ui/tests/utils/core/safe-paths.ts b/temp_repo/apps/ui/tests/utils/core/safe-paths.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9cee98885abc2de04064bb7de018c901ddcf8465
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/core/safe-paths.ts
@@ -0,0 +1,54 @@
+/**
+ * Safe path helpers for E2E tests
+ * Ensures test project paths never point at the main repo, avoiding git branch/merge side effects.
+ */
+
+import * as os from 'os';
+import * as path from 'path';
+
+/**
+ * Resolve the workspace root - handle both running from apps/ui and from monorepo root
+ */
+export function getWorkspaceRoot(): string {
+  const cwd = process.cwd();
+  if (cwd.includes('apps/ui')) {
+    return path.resolve(cwd, '../..');
+  }
+  return cwd;
+}
+
+/** Base directory for all test-only project paths (under workspace root) */
+export const TEST_BASE_DIR = path.join(getWorkspaceRoot(), 'test');
+
+/**
+ * Assert that a project path is safe for E2E tests (never the main repo root).
+ * Safe paths must be either:
+ * - Under workspace root's test/ directory (e.g. test/fixtures/projectA, test/open-project-test-xxx)
+ * - Under the OS temp directory (e.g. /tmp/automaker-e2e-workspace)
+ *
+ * This prevents tests from checking out or modifying branches in the main project's git repo.
+ *
+ * @throws Error if path is the workspace root or outside allowed test directories
+ */
+export function assertSafeProjectPath(projectPath: string): void {
+  const normalized = path.resolve(projectPath);
+  const workspaceRoot = path.resolve(getWorkspaceRoot());
+  const testBase = path.resolve(TEST_BASE_DIR);
+  const tmpDir = path.resolve(os.tmpdir());
+
+  if (normalized === workspaceRoot) {
+    throw new Error(
+      `E2E project path must not be the workspace root (${workspaceRoot}). ` +
+        'Use a path under test/ or os.tmpdir() to avoid affecting the main project git state.'
+    );
+  }
+
+  const underTest = normalized.startsWith(testBase + path.sep) || normalized === testBase;
+  const underTmp = normalized.startsWith(tmpDir + path.sep) || normalized === tmpDir;
+  if (!underTest && !underTmp) {
+    throw new Error(
+      `E2E project path must be under test/ or temp directory to avoid affecting main project git. ` +
+        `Got: ${normalized} (workspace root: ${workspaceRoot})`
+    );
+  }
+}
diff --git a/temp_repo/apps/ui/tests/utils/core/waiting.ts b/temp_repo/apps/ui/tests/utils/core/waiting.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5dc142bdb0d35247c10b13238f5f81b3cb805e23
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/core/waiting.ts
@@ -0,0 +1,112 @@
+import { Page, Locator } from '@playwright/test';
+
+/**
+ * Default timeout for element waiting operations in E2E tests.
+ * Increased from 5000ms to 10000ms to accommodate CI environments
+ * where dialog rendering may take longer due to React Query data fetching.
+ */
+export const DEFAULT_ELEMENT_TIMEOUT_MS = 10000;
+
+/**
+ * Wait for the page to load
+ * Uses 'load' state instead of 'networkidle' because the app has persistent
+ * connections (websockets/polling) that prevent network from ever being idle.
+ * Tests should wait for specific elements to verify page is ready.
+ */
+export async function waitForNetworkIdle(page: Page): Promise<void> {
+  await page.waitForLoadState('load');
+}
+
+/**
+ * Wait for an element with a specific data-testid to appear
+ */
+export async function waitForElement(
+  page: Page,
+  testId: string,
+  options?: { timeout?: number; state?: 'attached' | 'visible' | 'hidden' }
+): Promise<Locator> {
+  const element = page.locator(`[data-testid="${testId}"]`);
+  await element.waitFor({
+    timeout: options?.timeout ?? DEFAULT_ELEMENT_TIMEOUT_MS,
+    state: options?.state ?? 'visible',
+  });
+  return element;
+}
+
+/**
+ * Wait for an element with a specific data-testid to be hidden
+ */
+export async function waitForElementHidden(
+  page: Page,
+  testId: string,
+  options?: { timeout?: number }
+): Promise<void> {
+  const element = page.locator(`[data-testid="${testId}"]`);
+  await element.waitFor({
+    timeout: options?.timeout ?? DEFAULT_ELEMENT_TIMEOUT_MS,
+    state: 'hidden',
+  });
+}
+
+/**
+ * Wait for the splash screen to disappear
+ * The splash screen has z-[9999] and blocks interactions, so we need to wait for it
+ */
+export async function waitForSplashScreenToDisappear(page: Page, timeout = 5000): Promise<void> {
+  try {
+    // Check if splash screen is disabled or already shown (fastest check)
+    const splashDisabled = await page.evaluate(() => {
+      return (
+        localStorage.getItem('automaker-disable-splash') === 'true' ||
+        localStorage.getItem('automaker-splash-shown-session') === 'true'
+      );
+    });
+
+    // If splash is disabled or already shown, it won't appear, so we're done
+    if (splashDisabled) {
+      return;
+    }
+
+    // Otherwise, wait for the splash screen element to disappear
+    // The splash screen is a div with z-[9999] and fixed inset-0
+    // We check for elements that match the splash screen pattern
+    await page.waitForFunction(
+      () => {
+        // Check if splash is disabled or already shown
+        if (
+          localStorage.getItem('automaker-disable-splash') === 'true' ||
+          localStorage.getItem('automaker-splash-shown-session') === 'true'
+        ) {
+          return true;
+        }
+
+        // Check for splash screen element by looking for fixed inset-0 with high z-index
+        const allDivs = document.querySelectorAll('div');
+        for (const div of allDivs) {
+          const style = window.getComputedStyle(div);
+          const classes = div.className || '';
+          // Check if it matches splash screen pattern: fixed, inset-0, and high z-index
+          if (
+            style.position === 'fixed' &&
+            (classes.includes('inset-0') ||
+              (style.top === '0px' &&
+                style.left === '0px' &&
+                style.right === '0px' &&
+                style.bottom === '0px')) &&
+            (classes.includes('z-[') || parseInt(style.zIndex) >= 9999)
+          ) {
+            // Check if it's visible and blocking (opacity > 0 and pointer-events not none)
+            if (style.opacity !== '0' && style.pointerEvents !== 'none') {
+              return false; // Splash screen is still visible
+            }
+          }
+        }
+        return true; // No visible splash screen found
+      },
+      { timeout }
+    );
+  } catch {
+    // Splash screen might not exist or already gone, which is fine
+    // No need to wait - if it doesn't exist, we're good
+  }
+}
diff --git a/temp_repo/apps/ui/tests/utils/features/kanban.ts b/temp_repo/apps/ui/tests/utils/features/kanban.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e694c025fe7a61c3238811b59af13f35ebe3d1de
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/features/kanban.ts
@@ -0,0 +1,62 @@
+import { Page, Locator } from '@playwright/test';
+
+/**
+ * Perform a drag and drop operation that works with @dnd-kit
+ * This uses explicit mouse movements with pointer events
+ *
+ * NOTE: dnd-kit requires careful timing for drag activation. In CI environments,
+ * we need longer delays and more movement steps for reliable detection.
+ */
+export async function dragAndDropWithDndKit(
+  page: Page,
+  sourceLocator: Locator,
+  targetLocator: Locator
+): Promise<void> {
+  // Ensure elements are visible and stable before getting bounding boxes
+  await sourceLocator.waitFor({ state: 'visible', timeout: 5000 });
+  await targetLocator.waitFor({ state: 'visible', timeout: 5000 });
+
+  // Small delay to ensure layout is stable
+  await page.waitForTimeout(100);
+
+  const sourceBox = await sourceLocator.boundingBox();
+  const targetBox = await targetLocator.boundingBox();
+
+  if (!sourceBox || !targetBox) {
+    throw new Error('Could not find source or target element bounds');
+  }
+
+  // Start drag from the center of the source element
+  const startX = sourceBox.x + sourceBox.width / 2;
+  const startY = sourceBox.y + sourceBox.height / 2;
+
+  // End drag at the center of the target element
+  const endX = targetBox.x + targetBox.width / 2;
+  const endY = targetBox.y + targetBox.height / 2;
+
+  // Move to source element first
+  await page.mouse.move(startX, startY);
+  await page.waitForTimeout(50);
+
+  // Press and hold - dnd-kit needs time to activate the drag sensor
+  await page.mouse.down();
+  await page.waitForTimeout(300); // Longer delay for CI - dnd-kit activation threshold
+
+  // Move slightly first to trigger drag detection (dnd-kit has a distance threshold)
+  const smallMoveX = startX + 10;
+  const smallMoveY = startY + 10;
+  await page.mouse.move(smallMoveX, smallMoveY, { steps: 3 });
+  await page.waitForTimeout(100);
+
+  // Now move to target with slower, more deliberate movement
+  await page.mouse.move(endX, endY, { steps: 25 });
+
+  // Pause over target for drop detection
+  await page.waitForTimeout(200);
+
+  // Release
+  await page.mouse.up();
+
+  // Allow time for the drop handler to process
+  await page.waitForTimeout(100);
+}
diff --git a/temp_repo/apps/ui/tests/utils/features/skip-tests.ts b/temp_repo/apps/ui/tests/utils/features/skip-tests.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c9bf811418033d01e61584b97067a59b7df1a711
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/features/skip-tests.ts
@@ -0,0 +1,96 @@
+import { Page, Locator } from '@playwright/test';
+
+/**
+ * Get the skip tests checkbox element in the add feature dialog
+ */
+export async function getSkipTestsCheckbox(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="skip-tests-checkbox"]');
+}
+
+/**
+ * Toggle the skip tests checkbox in the add feature dialog
+ */
+export async function toggleSkipTestsCheckbox(page: Page): Promise<void> {
+  const checkbox = page.locator('[data-testid="skip-tests-checkbox"]');
+  await checkbox.click();
+}
+
+/**
+ * Check if the skip tests checkbox is checked in the add feature dialog
+ */
+export async function isSkipTestsChecked(page: Page): Promise<boolean> {
+  const checkbox = page.locator('[data-testid="skip-tests-checkbox"]');
+  const state = await checkbox.getAttribute('data-state');
+  return state === 'checked';
+}
+
+/**
+ * Get the edit skip tests checkbox element in the edit feature dialog
+ */
+export async function getEditSkipTestsCheckbox(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="edit-skip-tests-checkbox"]');
+}
+
+/**
+ * Toggle the skip tests checkbox in the edit feature dialog
+ */
+export async function toggleEditSkipTestsCheckbox(page: Page): Promise<void> {
+  const checkbox = page.locator('[data-testid="edit-skip-tests-checkbox"]');
+  await checkbox.click();
+}
+
+/**
+ * Check if the skip tests checkbox is checked in the edit feature dialog
+ */
+export async function isEditSkipTestsChecked(page: Page): Promise<boolean> {
+  const checkbox = page.locator('[data-testid="edit-skip-tests-checkbox"]');
+  const state = await checkbox.getAttribute('data-state');
+  return state === 'checked';
+}
+
+/**
+ * Check if the skip tests badge is visible on a kanban card
+ */
+export async function isSkipTestsBadgeVisible(page: Page, featureId: string): Promise<boolean> {
+  const badge = page.locator(`[data-testid="skip-tests-badge-${featureId}"]`);
+  return await badge.isVisible().catch(() => false);
+}
+
+/**
+ * Get the skip tests badge element for a kanban card
+ */
+export async function getSkipTestsBadge(page: Page, featureId: string): Promise<Locator> {
+  return page.locator(`[data-testid="skip-tests-badge-${featureId}"]`);
+}
+
+/**
+ * Click the manual verify button for a skipTests feature
+ */
+export async function clickManualVerify(page: Page, featureId: string): Promise<void> {
+  const button = page.locator(`[data-testid="manual-verify-${featureId}"]`);
+  await button.click();
+}
+
+/**
+ * Check if the manual verify button is visible for a feature
+ */
+export async function isManualVerifyButtonVisible(page: Page, featureId: string): Promise<boolean> {
+  const button = page.locator(`[data-testid="manual-verify-${featureId}"]`);
+  return await button.isVisible().catch(() => false);
+}
+
+/**
+ * Click the move back button for a verified skipTests feature
+ */
+export async function clickMoveBack(page: Page, featureId: string): Promise<void> {
+  const button = page.locator(`[data-testid="move-back-${featureId}"]`);
+  await button.click();
+}
+
+/**
+ * Check if the move back button is visible for a feature
+ */
+export async function isMoveBackButtonVisible(page: Page, featureId: string): Promise<boolean> {
+  const button = page.locator(`[data-testid="move-back-${featureId}"]`);
+  return await button.isVisible().catch(() => false);
+}
diff --git a/temp_repo/apps/ui/tests/utils/features/timers.ts b/temp_repo/apps/ui/tests/utils/features/timers.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c1f494891481c17c5837388da4d4f25b3a264161
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/features/timers.ts
@@ -0,0 +1,30 @@
+import { Page, Locator } from '@playwright/test';
+
+/**
+ * Get the count up timer element for a specific feature card
+ */
+export async function getTimerForFeature(page: Page, featureId: string): Promise<Locator> {
+  const card = page.locator(`[data-testid="kanban-card-${featureId}"]`);
+  return card.locator('[data-testid="count-up-timer"]');
+}
+
+/**
+ * Get the timer display text for a specific feature card
+ */
+export async function getTimerDisplayForFeature(
+  page: Page,
+  featureId: string
+): Promise<string | null> {
+  const card = page.locator(`[data-testid="kanban-card-${featureId}"]`);
+  const timerDisplay = card.locator('[data-testid="timer-display"]');
+  return await timerDisplay.textContent();
+}
+
+/**
+ * Check if a timer is visible for a specific feature
+ */
+export async function isTimerVisibleForFeature(page: Page, featureId: string): Promise<boolean> {
+  const card = page.locator(`[data-testid="kanban-card-${featureId}"]`);
+  const timer = card.locator('[data-testid="count-up-timer"]');
+  return await timer.isVisible().catch(() => false);
+}
diff --git a/temp_repo/apps/ui/tests/utils/features/waiting-approval.ts b/temp_repo/apps/ui/tests/utils/features/waiting-approval.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ed197a57ef5b6d5f2e28b7a758e5b43d5fd51b25
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/features/waiting-approval.ts
@@ -0,0 +1,62 @@
+import { Page, Locator } from '@playwright/test';
+
+/**
+ * Get the follow-up button for a waiting_approval feature
+ */
+export async function getFollowUpButton(page: Page, featureId: string): Promise<Locator> {
+  return page.locator(`[data-testid="follow-up-${featureId}"]`);
+}
+
+/**
+ * Click the follow-up button for a waiting_approval feature
+ */
+export async function clickFollowUpButton(page: Page, featureId: string): Promise<void> {
+  const button = page.locator(`[data-testid="follow-up-${featureId}"]`);
+  await button.click();
+}
+
+/**
+ * Check if the follow-up button is visible for a feature
+ */
+export async function isFollowUpButtonVisible(page: Page, featureId: string): Promise<boolean> {
+  const button = page.locator(`[data-testid="follow-up-${featureId}"]`);
+  return await button.isVisible().catch(() => false);
+}
+
+/**
+ * Get the commit button for a waiting_approval feature
+ */
+export async function getCommitButton(page: Page, featureId: string): Promise<Locator> {
+  return page.locator(`[data-testid="commit-${featureId}"]`);
+}
+
+/**
+ * Click the commit button for a waiting_approval feature
+ */
+export async function clickCommitButton(page: Page, featureId: string): Promise<void> {
+  const button = page.locator(`[data-testid="commit-${featureId}"]`);
+  await button.click();
+}
+
+/**
+ * Check if the commit button is visible for a feature
+ */
+export async function isCommitButtonVisible(page: Page, featureId: string): Promise<boolean> {
+  const button = page.locator(`[data-testid="commit-${featureId}"]`);
+  return await button.isVisible().catch(() => false);
+}
+
+/**
+ * Get the waiting_approval kanban column
+ */
+export async function getWaitingApprovalColumn(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="kanban-column-waiting_approval"]');
+}
+
+/**
+ * Check if the waiting_approval column is visible
+ */
+export async function isWaitingApprovalColumnVisible(page: Page): Promise<boolean> {
+  const column = page.locator('[data-testid="kanban-column-waiting_approval"]');
+  return await column.isVisible().catch(() => false);
+}
diff --git a/temp_repo/apps/ui/tests/utils/files/drag-drop.ts b/temp_repo/apps/ui/tests/utils/files/drag-drop.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2b3416dfb33f818bf388493415f4b0da3b1f3ba8
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/files/drag-drop.ts
@@ -0,0 +1,92 @@
+import { Page } from '@playwright/test';
+
+/**
+ * Simulate drag and drop of a file onto an element
+ */
+export async function simulateFileDrop(
+  page: Page,
+  targetSelector: string,
+  fileName: string,
+  fileContent: string,
+  mimeType: string = 'text/plain'
+): Promise<void> {
+  await page.evaluate(
+    ({ selector, content, name, mime }) => {
+      const target = document.querySelector(selector);
+      if (!target) throw new Error(`Element not found: ${selector}`);
+
+      const file = new File([content], name, { type: mime });
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(file);
+
+      // Create events and explicitly define the dataTransfer property
+      // to ensure it's accessible (some browsers don't properly set it from constructor)
+      const dragOverEvent = new DragEvent('dragover', {
+        bubbles: true,
+        cancelable: true,
+      });
+      Object.defineProperty(dragOverEvent, 'dataTransfer', {
+        value: dataTransfer,
+        writable: false,
+      });
+
+      const dropEvent = new DragEvent('drop', {
+        bubbles: true,
+        cancelable: true,
+      });
+      Object.defineProperty(dropEvent, 'dataTransfer', {
+        value: dataTransfer,
+        writable: false,
+      });
+
+      // Dispatch drag events
+      target.dispatchEvent(dragOverEvent);
+      target.dispatchEvent(dropEvent);
+    },
+    { selector: targetSelector, content: fileContent, name: fileName, mime: mimeType }
+  );
+}
+
+/**
+ * Simulate pasting an image from clipboard onto an element
+ * Works across all OS (Windows, Linux, macOS)
+ */
+export async function simulateImagePaste(
+  page: Page,
+  targetSelector: string,
+  imageBase64: string,
+  mimeType: string = 'image/png'
+): Promise<void> {
+  await page.evaluate(
+    ({ selector, base64, mime }) => {
+      const target = document.querySelector(selector);
+      if (!target) throw new Error(`Element not found: ${selector}`);
+
+      // Convert base64 to Blob
+      const byteCharacters = atob(base64);
+      const byteNumbers = new Array(byteCharacters.length);
+      for (let i = 0; i < byteCharacters.length; i++) {
+        byteNumbers[i] = byteCharacters.charCodeAt(i);
+      }
+      const byteArray = new Uint8Array(byteNumbers);
+      const blob = new Blob([byteArray], { type: mime });
+
+      // Create a File from Blob
+      const file = new File([blob], 'pasted-image.png', { type: mime });
+
+      // Create a DataTransfer with clipboard items
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(file);
+
+      // Create ClipboardEvent with the image data
+      const clipboardEvent = new ClipboardEvent('paste', {
+        bubbles: true,
+        cancelable: true,
+        clipboardData: dataTransfer,
+      });
+
+      target.dispatchEvent(clipboardEvent);
+    },
+    { selector: targetSelector, base64: imageBase64, mime: mimeType }
+  );
+}
diff --git a/temp_repo/apps/ui/tests/utils/git/worktree.ts b/temp_repo/apps/ui/tests/utils/git/worktree.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4aeff3fc18481deb50d7088775f1e4a73b120d4c
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/git/worktree.ts
@@ -0,0 +1,563 @@
+/**
+ * Git worktree utilities for testing
+ * Provides helpers for creating test git repos and managing worktrees
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { Page } from '@playwright/test';
+import { sanitizeBranchName, TIMEOUTS } from '../core/constants';
+import { getWorkspaceRoot } from '../core/safe-paths';
+
+const execAsync = promisify(exec);
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface TestRepo {
+  path: string;
+  cleanup: () => Promise<void>;
+}
+
+export interface FeatureData {
+  id: string;
+  category: string;
+  description: string;
+  status: string;
+  branchName?: string;
+  worktreePath?: string;
+}
+
+// ============================================================================
+// Path Utilities
+// ============================================================================
+
+/**
+ * Create a unique temp directory path for tests (always under workspace test/ dir).
+ * Git operations in these dirs never affect the main project.
+ */
+export function createTempDirPath(prefix: string = 'temp-worktree-tests'): string {
+  const uniqueId = `${process.pid}-${Math.random().toString(36).substring(2, 9)}`;
+  return path.join(getWorkspaceRoot(), 'test', `${prefix}-${uniqueId}`);
+}
+
+/**
+ * Get the expected worktree path for a branch
+ */
+export function getWorktreePath(projectPath: string, branchName: string): string {
+  const sanitizedName = sanitizeBranchName(branchName);
+  return path.join(projectPath, '.worktrees', sanitizedName);
+}
+
+// ============================================================================
+// Git Repository Management
+// ============================================================================
+
+/**
+ * Create a temporary git repository for testing
+ */
+export async function createTestGitRepo(tempDir: string): Promise<TestRepo> {
+  // Create temp directory if it doesn't exist
+  if (!fs.existsSync(tempDir)) {
+    fs.mkdirSync(tempDir, { recursive: true });
+  }
+
+  const tmpDir = path.join(tempDir, `test-repo-${Date.now()}`);
+  fs.mkdirSync(tmpDir, { recursive: true });
+
+  // Use environment variables instead of git config to avoid affecting user's git config
+  // These env vars override git config without modifying it
+  const gitEnv = {
+    ...process.env,
+    GIT_AUTHOR_NAME: 'Test User',
+    GIT_AUTHOR_EMAIL: 'test@example.com',
+    GIT_COMMITTER_NAME: 'Test User',
+    GIT_COMMITTER_EMAIL: 'test@example.com',
+  };
+
+  // Initialize git repo with explicit branch name to avoid CI environment differences
+  // Use -b main to set initial branch (git 2.28+), falling back to branch -M for older versions
+  try {
+    await execAsync('git init -b main', { cwd: tmpDir, env: gitEnv });
+  } catch {
+    // Fallback for older git versions that don't support -b flag
+    await execAsync('git init', { cwd: tmpDir, env: gitEnv });
+  }
+
+  // Create initial commit
+  fs.writeFileSync(path.join(tmpDir, 'README.md'), '# Test Project\n');
+  await execAsync('git add .', { cwd: tmpDir, env: gitEnv });
+  await execAsync('git commit -m "Initial commit"', { cwd: tmpDir, env: gitEnv });
+
+  // Ensure branch is named 'main' (handles both new repos and older git versions)
+  await execAsync('git branch -M main', { cwd: tmpDir, env: gitEnv });
+
+  // Create .automaker directories
+  const automakerDir = path.join(tmpDir, '.automaker');
+  const featuresDir = path.join(automakerDir, 'features');
+  fs.mkdirSync(featuresDir, { recursive: true });
+
+  // Create empty categories.json to avoid ENOENT errors in tests
+  fs.writeFileSync(path.join(automakerDir, 'categories.json'), '[]');
+
+  return {
+    path: tmpDir,
+    cleanup: async () => {
+      await cleanupTestRepo(tmpDir);
+    },
+  };
+}
+
+/**
+ * Cleanup a test git repository
+ */
+export async function cleanupTestRepo(repoPath: string): Promise<void> {
+  try {
+    // Remove all worktrees first
+    const { stdout } = await execAsync('git worktree list --porcelain', {
+      cwd: repoPath,
+    }).catch(() => ({ stdout: '' }));
+
+    const worktrees = stdout
+      .split('\n\n')
+      .slice(1) // Skip main worktree
+      .map((block) => {
+        const pathLine = block.split('\n').find((line) => line.startsWith('worktree '));
+        return pathLine ? pathLine.replace('worktree ', '') : null;
+      })
+      .filter(Boolean);
+
+    for (const worktreePath of worktrees) {
+      try {
+        await execAsync(`git worktree remove "${worktreePath}" --force`, {
+          cwd: repoPath,
+        });
+      } catch {
+        // Ignore errors
+      }
+    }
+
+    // Remove the repository
+    fs.rmSync(repoPath, { recursive: true, force: true });
+  } catch (error) {
+    console.error('Failed to cleanup test repo:', error);
+  }
+}
+
+/**
+ * Recursively remove directory contents then the directory (avoids ENOTEMPTY on some systems)
+ */
+function rmDirRecursive(dir: string): void {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      rmDirRecursive(fullPath);
+      fs.rmdirSync(fullPath);
+    } else {
+      fs.unlinkSync(fullPath);
+    }
+  }
+}
+
+/**
+ * Cleanup a temp directory and all its contents.
+ * Tries rmSync first; on ENOTEMPTY (e.g. macOS with git worktrees) falls back to recursive delete.
+ */
+export function cleanupTempDir(tempDir: string): void {
+  if (!fs.existsSync(tempDir)) return;
+  try {
+    fs.rmSync(tempDir, { recursive: true, force: true });
+  } catch (err) {
+    const code = (err as NodeJS.ErrnoException)?.code;
+    if (code === 'ENOENT') {
+      // Directory already removed, nothing to do
+    } else if (code === 'ENOTEMPTY' || code === 'EPERM' || code === 'EBUSY') {
+      rmDirRecursive(tempDir);
+      try {
+        fs.rmdirSync(tempDir);
+      } catch (e2) {
+        if ((e2 as NodeJS.ErrnoException)?.code !== 'ENOENT') {
+          throw e2;
+        }
+      }
+    } else {
+      throw err;
+    }
+  }
+}
+
+// ============================================================================
+// Git Operations
+// ============================================================================
+
+/**
+ * Execute a git command in a repository
+ */
+export async function gitExec(
+  repoPath: string,
+  command: string
+): Promise<{ stdout: string; stderr: string }> {
+  return execAsync(`git ${command}`, { cwd: repoPath });
+}
+
+/**
+ * Get list of git worktrees
+ */
+export async function listWorktrees(repoPath: string): Promise<string[]> {
+  try {
+    const { stdout } = await execAsync('git worktree list --porcelain', {
+      cwd: repoPath,
+    });
+
+    return stdout
+      .split('\n\n')
+      .slice(1) // Skip main worktree
+      .map((block) => {
+        const pathLine = block.split('\n').find((line) => line.startsWith('worktree '));
+        if (!pathLine) return null;
+        // Normalize path separators to OS native (git on Windows returns forward slashes)
+        const worktreePath = pathLine.replace('worktree ', '');
+        return path.normalize(worktreePath);
+      })
+      .filter(Boolean) as string[];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Get list of git branches
+ */
+export async function listBranches(repoPath: string): Promise<string[]> {
+  const { stdout } = await execAsync('git branch --list', { cwd: repoPath });
+  return stdout
+    .split('\n')
+    .map((line) => line.trim().replace(/^[*+]\s*/, ''))
+    .filter(Boolean);
+}
+
+/**
+ * Get the current branch name
+ */
+export async function getCurrentBranch(repoPath: string): Promise<string> {
+  const { stdout } = await execAsync('git rev-parse --abbrev-ref HEAD', { cwd: repoPath });
+  return stdout.trim();
+}
+
+/**
+ * Create a git branch
+ */
+export async function createBranch(repoPath: string, branchName: string): Promise<void> {
+  await execAsync(`git branch ${branchName}`, { cwd: repoPath });
+}
+
+/**
+ * Checkout a git branch
+ */
+export async function checkoutBranch(repoPath: string, branchName: string): Promise<void> {
+  await execAsync(`git checkout ${branchName}`, { cwd: repoPath });
+}
+
+/**
+ * Create a git worktree using git command directly
+ */
+export async function createWorktreeDirectly(
+  repoPath: string,
+  branchName: string,
+  worktreePath?: string
+): Promise<string> {
+  const sanitizedName = sanitizeBranchName(branchName);
+  const targetPath = worktreePath || path.join(repoPath, '.worktrees', sanitizedName);
+
+  await execAsync(`git worktree add "${targetPath}" -b ${branchName}`, { cwd: repoPath });
+  return targetPath;
+}
+
+/**
+ * Add and commit a file
+ */
+export async function commitFile(
+  repoPath: string,
+  filePath: string,
+  content: string,
+  message: string
+): Promise<void> {
+  // Use environment variables instead of git config to avoid affecting user's git config
+  const gitEnv = {
+    ...process.env,
+    GIT_AUTHOR_NAME: 'Test User',
+    GIT_AUTHOR_EMAIL: 'test@example.com',
+    GIT_COMMITTER_NAME: 'Test User',
+    GIT_COMMITTER_EMAIL: 'test@example.com',
+  };
+
+  fs.writeFileSync(path.join(repoPath, filePath), content);
+  await execAsync(`git add "${filePath}"`, { cwd: repoPath, env: gitEnv });
+  await execAsync(`git commit -m "${message}"`, { cwd: repoPath, env: gitEnv });
+}
+
+/**
+ * Get the latest commit message
+ */
+export async function getLatestCommitMessage(repoPath: string): Promise<string> {
+  const { stdout } = await execAsync('git log --oneline -1', { cwd: repoPath });
+  return stdout.trim();
+}
+
+// ============================================================================
+// Feature File Management
+// ============================================================================
+
+/**
+ * Create a feature file in the test repo
+ */
+export function createTestFeature(
+  repoPath: string,
+  featureId: string,
+  featureData: FeatureData
+): void {
+  const featuresDir = path.join(repoPath, '.automaker', 'features');
+  const featureDir = path.join(featuresDir, featureId);
+
+  fs.mkdirSync(featureDir, { recursive: true });
+  fs.writeFileSync(path.join(featureDir, 'feature.json'), JSON.stringify(featureData, null, 2));
+}
+
+/**
+ * Read a feature file from the test repo
+ */
+export function readTestFeature(repoPath: string, featureId: string): FeatureData | null {
+  const featureFilePath = path.join(repoPath, '.automaker', 'features', featureId, 'feature.json');
+
+  if (!fs.existsSync(featureFilePath)) {
+    return null;
+  }
+
+  return JSON.parse(fs.readFileSync(featureFilePath, 'utf-8'));
+}
+
+/**
+ * List all feature directories in the test repo
+ */
+export function listTestFeatures(repoPath: string): string[] {
+  const featuresDir = path.join(repoPath, '.automaker', 'features');
+
+  if (!fs.existsSync(featuresDir)) {
+    return [];
+  }
+
+  return fs.readdirSync(featuresDir);
+}
+
+// ============================================================================
+// Project Setup for Tests
+// ============================================================================
+
+/**
+ * Set up localStorage with a project pointing to a test repo
+ */
+export async function setupProjectWithPath(page: Page, projectPath: string): Promise<void> {
+  await page.addInitScript((pathArg: string) => {
+    const mockProject = {
+      id: 'test-project-worktree',
+      name: 'Worktree Test Project',
+      path: pathArg,
+      lastOpened: new Date().toISOString(),
+    };
+
+    const mockState = {
+      state: {
+        projects: [mockProject],
+        currentProject: mockProject,
+        currentView: 'board',
+        theme: 'dark',
+        sidebarOpen: true,
+        skipSandboxWarning: true,
+        apiKeys: { anthropic: '', google: '' },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+        useWorktrees: true, // Enable worktree feature for tests
+        currentWorktreeByProject: {
+          [pathArg]: { path: null, branch: 'main' }, // Initialize to main branch
+        },
+        worktreesByProject: {},
+      },
+      version: 2, // Must match app-store.ts persist version
+    };
+
+    localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+    // Mark setup as complete to skip the setup wizard
+    const setupState = {
+      state: {
+        isFirstRun: false,
+        setupComplete: true,
+        currentStep: 'complete',
+        skipClaudeSetup: false,
+      },
+      version: 0, // setup-store.ts doesn't specify a version, so zustand defaults to 0
+    };
+    localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+    // Disable splash screen in tests
+    localStorage.setItem('automaker-disable-splash', 'true');
+  }, projectPath);
+}
+
+/**
+ * Set up localStorage with a project pointing to a test repo with worktrees DISABLED
+ * Use this to test scenarios where the worktree feature flag is off
+ */
+export async function setupProjectWithPathNoWorktrees(
+  page: Page,
+  projectPath: string
+): Promise<void> {
+  await page.addInitScript((pathArg: string) => {
+    const mockProject = {
+      id: 'test-project-no-worktree',
+      name: 'Test Project (No Worktrees)',
+      path: pathArg,
+      lastOpened: new Date().toISOString(),
+    };
+
+    const mockState = {
+      state: {
+        projects: [mockProject],
+        currentProject: mockProject,
+        currentView: 'board',
+        theme: 'dark',
+        sidebarOpen: true,
+        skipSandboxWarning: true,
+        apiKeys: { anthropic: '', google: '' },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+        useWorktrees: false, // Worktree feature DISABLED
+        currentWorktreeByProject: {},
+        worktreesByProject: {},
+      },
+      version: 2, // Must match app-store.ts persist version
+    };
+
+    localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+    // Mark setup as complete to skip the setup wizard
+    const setupState = {
+      state: {
+        isFirstRun: false,
+        setupComplete: true,
+        currentStep: 'complete',
+        skipClaudeSetup: false,
+      },
+      version: 0, // setup-store.ts doesn't specify a version, so zustand defaults to 0
+    };
+    localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+    // Disable splash screen in tests
+    localStorage.setItem('automaker-disable-splash', 'true');
+  }, projectPath);
+}
+
+/**
+ * Set up localStorage with a project that has STALE worktree data
+ * The currentWorktreeByProject points to a worktree path that no longer exists
+ * This simulates the scenario where a user previously selected a worktree that was later deleted
+ */
+export async function setupProjectWithStaleWorktree(
+  page: Page,
+  projectPath: string
+): Promise<void> {
+  await page.addInitScript((pathArg: string) => {
+    const mockProject = {
+      id: 'test-project-stale-worktree',
+      name: 'Stale Worktree Test Project',
+      path: pathArg,
+      lastOpened: new Date().toISOString(),
+    };
+
+    const mockState = {
+      state: {
+        projects: [mockProject],
+        currentProject: mockProject,
+        currentView: 'board',
+        theme: 'dark',
+        sidebarOpen: true,
+        skipSandboxWarning: true,
+        apiKeys: { anthropic: '', google: '' },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+        useWorktrees: true, // Enable worktree feature for tests
+        currentWorktreeByProject: {
+          // This is STALE data - pointing to a worktree path that doesn't exist
+          [pathArg]: { path: '/non/existent/worktree/path', branch: 'feature/deleted-branch' },
+        },
+        worktreesByProject: {},
+      },
+      version: 2, // Must match app-store.ts persist version
+    };
+
+    localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+    // Mark setup as complete to skip the setup wizard
+    const setupState = {
+      state: {
+        isFirstRun: false,
+        setupComplete: true,
+        currentStep: 'complete',
+        skipClaudeSetup: false,
+      },
+      version: 0, // setup-store.ts doesn't specify a version, so zustand defaults to 0
+    };
+    localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+    // Disable splash screen in tests
+    localStorage.setItem('automaker-disable-splash', 'true');
+  }, projectPath);
+}
+
+// ============================================================================
+// Wait Utilities
+// ============================================================================
+
+/**
+ * Wait for the board view to load
+ * Navigates to /board first since the index route shows WelcomeView
+ * Handles zustand store hydration timing (may show "no-project" briefly)
+ */
+export async function waitForBoardView(page: Page): Promise<void> {
+  // Navigate directly to /board route (index route shows welcome view)
+  const currentUrl = page.url();
+  if (!currentUrl.includes('/board')) {
+    await page.goto('/board');
+    await page.waitForLoadState('load');
+  }
+
+  // Wait for either board-view (success) or board-view-no-project (store not hydrated yet)
+  // Then poll until board-view appears (zustand hydrates from localStorage)
+  await page.waitForFunction(
+    () => {
+      const boardView = document.querySelector('[data-testid="board-view"]');
+      // Return true only when board-view is visible (store hydrated with project)
+      return boardView !== null;
+    },
+    { timeout: TIMEOUTS.long }
+  );
+}
+
+/**
+ * Wait for the worktree selector to be visible
+ */
+export async function waitForWorktreeSelector(page: Page): Promise<void> {
+  await page
+    .waitForSelector('[data-testid="worktree-selector"]', { timeout: TIMEOUTS.medium })
+    .catch(() => {
+      // Fallback: wait for "Branch:" text
+      return page.getByText('Branch:').waitFor({ timeout: TIMEOUTS.medium });
+    });
+}
diff --git a/temp_repo/apps/ui/tests/utils/helpers/concurrency.ts b/temp_repo/apps/ui/tests/utils/helpers/concurrency.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f60844f8a656c8dfcc2507c0596e28170b13f6af
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/helpers/concurrency.ts
@@ -0,0 +1,48 @@
+import { Page, Locator } from '@playwright/test';
+
+/**
+ * Get the concurrency slider container
+ */
+export async function getConcurrencySliderContainer(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="concurrency-slider-container"]');
+}
+
+/**
+ * Get the concurrency slider
+ */
+export async function getConcurrencySlider(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="concurrency-slider"]');
+}
+
+/**
+ * Get the displayed concurrency value
+ */
+export async function getConcurrencyValue(page: Page): Promise<string | null> {
+  const valueElement = page.locator('[data-testid="concurrency-value"]');
+  return await valueElement.textContent();
+}
+
+/**
+ * Change the concurrency slider value by clicking on the slider track
+ */
+export async function setConcurrencyValue(
+  page: Page,
+  targetValue: number,
+  min: number = 1,
+  max: number = 10
+): Promise<void> {
+  const slider = page.locator('[data-testid="concurrency-slider"]');
+  const sliderBounds = await slider.boundingBox();
+
+  if (!sliderBounds) {
+    throw new Error('Concurrency slider not found or not visible');
+  }
+
+  // Calculate position for target value
+  const percentage = (targetValue - min) / (max - min);
+  const targetX = sliderBounds.x + sliderBounds.width * percentage;
+  const centerY = sliderBounds.y + sliderBounds.height / 2;
+
+  // Click at the target position to set the value
+  await page.mouse.click(targetX, centerY);
+}
diff --git a/temp_repo/apps/ui/tests/utils/helpers/log-viewer.ts b/temp_repo/apps/ui/tests/utils/helpers/log-viewer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e0ebd4ea5b0d8b2fa80c931c8669e42bee376f77
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/helpers/log-viewer.ts
@@ -0,0 +1,113 @@
+import { Page, Locator } from '@playwright/test';
+import { clickElement } from '../core/interactions';
+
+/**
+ * Get the log viewer header element (contains type counts and expand/collapse buttons)
+ */
+export async function getLogViewerHeader(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="log-viewer-header"]');
+}
+
+/**
+ * Check if the log viewer header is visible
+ */
+export async function isLogViewerHeaderVisible(page: Page): Promise<boolean> {
+  const header = page.locator('[data-testid="log-viewer-header"]');
+  return await header.isVisible().catch(() => false);
+}
+
+/**
+ * Get the log entries container element
+ */
+export async function getLogEntriesContainer(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="log-entries-container"]');
+}
+
+/**
+ * Get a log entry by its type
+ */
+export async function getLogEntryByType(page: Page, type: string): Promise<Locator> {
+  return page.locator(`[data-testid="log-entry-${type}"]`).first();
+}
+
+/**
+ * Get all log entries of a specific type
+ */
+export async function getAllLogEntriesByType(page: Page, type: string): Promise<Locator> {
+  return page.locator(`[data-testid="log-entry-${type}"]`);
+}
+
+/**
+ * Count log entries of a specific type
+ */
+export async function countLogEntriesByType(page: Page, type: string): Promise<number> {
+  const entries = page.locator(`[data-testid="log-entry-${type}"]`);
+  return await entries.count();
+}
+
+/**
+ * Get the log type count badge by type
+ */
+export async function getLogTypeCountBadge(page: Page, type: string): Promise<Locator> {
+  return page.locator(`[data-testid="log-type-count-${type}"]`);
+}
+
+/**
+ * Check if a log type count badge is visible
+ */
+export async function isLogTypeCountBadgeVisible(page: Page, type: string): Promise<boolean> {
+  const badge = page.locator(`[data-testid="log-type-count-${type}"]`);
+  return await badge.isVisible().catch(() => false);
+}
+
+/**
+ * Click the expand all button in the log viewer
+ */
+export async function clickLogExpandAll(page: Page): Promise<void> {
+  await clickElement(page, 'log-expand-all');
+}
+
+/**
+ * Click the collapse all button in the log viewer
+ */
+export async function clickLogCollapseAll(page: Page): Promise<void> {
+  await clickElement(page, 'log-collapse-all');
+}
+
+/**
+ * Get a log entry badge element
+ */
+export async function getLogEntryBadge(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="log-entry-badge"]').first();
+}
+
+/**
+ * Check if any log entry badge is visible
+ */
+export async function isLogEntryBadgeVisible(page: Page): Promise<boolean> {
+  const badge = page.locator('[data-testid="log-entry-badge"]').first();
+  return await badge.isVisible().catch(() => false);
+}
+
+/**
+ * Get the view mode toggle button (parsed/raw)
+ */
+export async function getViewModeButton(page: Page, mode: 'parsed' | 'raw'): Promise<Locator> {
+  return page.locator(`[data-testid="view-mode-${mode}"]`);
+}
+
+/**
+ * Click a view mode toggle button
+ */
+export async function clickViewModeButton(page: Page, mode: 'parsed' | 'raw'): Promise<void> {
+  await clickElement(page, `view-mode-${mode}`);
+}
+
+/**
+ * Check if a view mode button is active (selected)
+ */
+export async function isViewModeActive(page: Page, mode: 'parsed' | 'raw'): Promise<boolean> {
+  const button = page.locator(`[data-testid="view-mode-${mode}"]`);
+  const classes = await button.getAttribute('class');
+  return classes?.includes('text-purple-300') ?? false;
+}
diff --git a/temp_repo/apps/ui/tests/utils/helpers/scroll.ts b/temp_repo/apps/ui/tests/utils/helpers/scroll.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f13d8200f30e86733544ba7a78cd99637f8b7694
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/helpers/scroll.ts
@@ -0,0 +1,58 @@
+import { Locator } from '@playwright/test';
+
+/**
+ * Check if an element is scrollable (has scrollable content)
+ */
+export async function isElementScrollable(locator: Locator): Promise<boolean> {
+  const scrollInfo = await locator.evaluate((el) => {
+    return {
+      scrollHeight: el.scrollHeight,
+      clientHeight: el.clientHeight,
+      isScrollable: el.scrollHeight > el.clientHeight,
+    };
+  });
+  return scrollInfo.isScrollable;
+}
+
+/**
+ * Scroll an element to the bottom
+ */
+export async function scrollToBottom(locator: Locator): Promise<void> {
+  await locator.evaluate((el) => {
+    el.scrollTop = el.scrollHeight;
+  });
+}
+
+/**
+ * Get the scroll position of an element
+ */
+export async function getScrollPosition(
+  locator: Locator
+): Promise<{ scrollTop: number; scrollHeight: number; clientHeight: number }> {
+  return await locator.evaluate((el) => ({
+    scrollTop: el.scrollTop,
+    scrollHeight: el.scrollHeight,
+    clientHeight: el.clientHeight,
+  }));
+}
+
+/**
+ * Check if an element is visible within a scrollable container
+ */
+export async function isElementVisibleInScrollContainer(
+  element: Locator,
+  container: Locator
+): Promise<boolean> {
+  const elementBox = await element.boundingBox();
+  const containerBox = await container.boundingBox();
+
+  if (!elementBox || !containerBox) {
+    return false;
+  }
+
+  // Check if element is within the visible area of the container
+  return (
+    elementBox.y >= containerBox.y &&
+    elementBox.y + elementBox.height <= containerBox.y + containerBox.height
+  );
+}
diff --git a/temp_repo/apps/ui/tests/utils/index.ts b/temp_repo/apps/ui/tests/utils/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fb1debb0fa39173ab87f7c7b5c90a66fad8566e5
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/index.ts
@@ -0,0 +1,51 @@
+// Re-export all utilities from their respective modules
+
+// Core utilities
+export * from './core/elements';
+export * from './core/interactions';
+export * from './core/waiting';
+export * from './core/constants';
+export * from './core/safe-paths';
+
+// API utilities
+export * from './api/client';
+
+// Git utilities
+export * from './git/worktree';
+
+// Project utilities
+export * from './project/setup';
+export * from './project/fixtures';
+
+// Navigation utilities
+export * from './navigation/views';
+
+// View-specific utilities
+export * from './views/board';
+export * from './views/context';
+export * from './views/memory';
+export * from './views/spec-editor';
+export * from './views/agent';
+export * from './views/settings';
+export * from './views/setup';
+export * from './views/profiles';
+
+// Component utilities
+export * from './components/dialogs';
+export * from './components/toasts';
+export * from './components/modals';
+export * from './components/autocomplete';
+
+// Feature utilities
+export * from './features/kanban';
+export * from './features/timers';
+export * from './features/skip-tests';
+export * from './features/waiting-approval';
+
+// Helper utilities
+export * from './helpers/scroll';
+export * from './helpers/log-viewer';
+export * from './helpers/concurrency';
+
+// File utilities
+export * from './files/drag-drop';
diff --git a/temp_repo/apps/ui/tests/utils/navigation/views.ts b/temp_repo/apps/ui/tests/utils/navigation/views.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1562051d607f91387d686917bd034fd394cdaead
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/navigation/views.ts
@@ -0,0 +1,191 @@
+import { Page } from '@playwright/test';
+import { clickElement, closeDialogWithEscape } from '../core/interactions';
+import { handleLoginScreenIfPresent } from '../core/interactions';
+import { waitForElement } from '../core/waiting';
+import { authenticateForTests } from '../api/client';
+
+/**
+ * Navigate to the board/kanban view
+ * Note: Navigates directly to /board since index route shows WelcomeView
+ */
+export async function navigateToBoard(page: Page): Promise<void> {
+  // Authenticate before navigating (fast-path: skips if already authed via storageState)
+  await authenticateForTests(page);
+
+  // Navigate directly to /board route
+  await page.goto('/board', { waitUntil: 'domcontentloaded' });
+
+  // Handle login redirect if needed
+  await handleLoginScreenIfPresent(page);
+
+  // Wait for the board view to be visible
+  await waitForElement(page, 'board-view', { timeout: 10000 });
+}
+
+/**
+ * Navigate to the context view
+ * Note: Navigates directly to /context since index route shows WelcomeView
+ */
+export async function navigateToContext(page: Page): Promise<void> {
+  // Authenticate before navigating (fast-path: skips if already authed via storageState)
+  await authenticateForTests(page);
+
+  // Navigate directly to /context route
+  await page.goto('/context', { waitUntil: 'domcontentloaded' });
+
+  // Handle login redirect if needed
+  await handleLoginScreenIfPresent(page);
+
+  // Wait for one of: context-view, context-view-no-project, or context-view-loading.
+  // Store hydration and loadContextFiles can be async, so we accept any of these first.
+  const viewSelector =
+    '[data-testid="context-view"], [data-testid="context-view-no-project"], [data-testid="context-view-loading"]';
+  await page.locator(viewSelector).first().waitFor({ state: 'visible', timeout: 15000 });
+
+  // If we see "no project", give hydration a moment then re-check (avoids flake when store hydrates after first paint).
+  const noProject = page.locator('[data-testid="context-view-no-project"]');
+  if (await noProject.isVisible().catch(() => false)) {
+    // Poll for the view to appear rather than a fixed timeout
+    await page
+      .locator('[data-testid="context-view"], [data-testid="context-view-loading"]')
+      .first()
+      .waitFor({ state: 'visible', timeout: 5000 })
+      .catch(() => {
+        throw new Error(
+          'Context view showed "No project selected". Ensure setupProjectWithFixture runs before navigateToContext and store has time to hydrate.'
+        );
+      });
+  }
+
+  // Wait for loading to complete (if present)
+  const loadingElement = page.locator('[data-testid="context-view-loading"]');
+  if (await loadingElement.isVisible().catch(() => false)) {
+    await loadingElement.waitFor({ state: 'hidden', timeout: 15000 });
+  }
+
+  // Wait for the context view to be visible
+  await waitForElement(page, 'context-view', { timeout: 15000 });
+
+  // On mobile, close the sidebar if open so the header actions trigger is clickable (not covered by backdrop)
+  // Use JavaScript click to avoid force:true hitting the sidebar (z-30) instead of the backdrop (z-20)
+  const backdrop = page.locator('[data-testid="sidebar-backdrop"]');
+  if (await backdrop.isVisible().catch(() => false)) {
+    await backdrop.evaluate((el) => (el as HTMLElement).click());
+  }
+
+  // Dismiss any open dialog that may block interactions (e.g. sandbox warning, onboarding)
+  await closeDialogWithEscape(page, { timeout: 2000 });
+}
+
+/**
+ * Navigate to the spec view
+ * Note: Navigates directly to /spec since index route shows WelcomeView
+ */
+export async function navigateToSpec(page: Page): Promise<void> {
+  // Authenticate before navigating (fast-path: skips if already authed via storageState)
+  await authenticateForTests(page);
+
+  // Navigate directly to /spec route
+  await page.goto('/spec', { waitUntil: 'domcontentloaded' });
+
+  // Wait for loading state to complete first (if present)
+  const loadingElement = page.locator('[data-testid="spec-view-loading"]');
+  if (await loadingElement.isVisible().catch(() => false)) {
+    await loadingElement.waitFor({ state: 'hidden', timeout: 10000 });
+  }
+
+  // Wait for either the main spec view or empty state to be visible
+  await page
+    .locator('[data-testid="spec-view"], [data-testid="spec-view-empty"]')
+    .first()
+    .waitFor({ state: 'visible', timeout: 10000 });
+}
+
+/**
+ * Navigate to the agent view
+ * Note: Navigates directly to /agent since index route shows WelcomeView
+ */
+export async function navigateToAgent(page: Page): Promise<void> {
+  // Authenticate before navigating (fast-path: skips if already authed via storageState)
+  await authenticateForTests(page);
+
+  // Navigate directly to /agent route
+  await page.goto('/agent', { waitUntil: 'domcontentloaded' });
+
+  // Handle login redirect if needed
+  await handleLoginScreenIfPresent(page);
+
+  // Wait for the agent view to be visible
+  await waitForElement(page, 'agent-view', { timeout: 10000 });
+}
+
+/**
+ * Navigate to the settings view
+ * Note: Navigates directly to /settings since index route shows WelcomeView
+ */
+export async function navigateToSettings(page: Page): Promise<void> {
+  // Authenticate before navigating (fast-path: skips if already authed via storageState)
+  await authenticateForTests(page);
+
+  // Navigate directly to /settings route
+  await page.goto('/settings', { waitUntil: 'domcontentloaded' });
+
+  // Wait for the settings view to be visible
+  await waitForElement(page, 'settings-view', { timeout: 10000 });
+}
+
+/**
+ * Navigate to the setup view directly
+ * Note: This function uses setupFirstRun from project/setup to avoid circular dependency
+ */
+export async function navigateToSetup(page: Page): Promise<void> {
+  // Dynamic import to avoid circular dependency
+  const { setupFirstRun } = await import('../project/setup');
+  await setupFirstRun(page);
+  await page.goto('/');
+  await page.waitForLoadState('load');
+  await waitForElement(page, 'setup-view', { timeout: 10000 });
+}
+
+/**
+ * Navigate to the welcome/dashboard view (clear project selection)
+ * Note: The app redirects from / to /dashboard when no project is selected
+ */
+export async function navigateToWelcome(page: Page): Promise<void> {
+  // Authenticate before navigating (fast-path: skips if already authed via storageState)
+  await authenticateForTests(page);
+
+  await page.goto('/', { waitUntil: 'domcontentloaded' });
+
+  // Handle login redirect if needed
+  await handleLoginScreenIfPresent(page);
+
+  // Wait for either welcome-view, dashboard-view, or overview-view (app redirects based on project state)
+  await page
+    .locator(
+      '[data-testid="welcome-view"], [data-testid="dashboard-view"], [data-testid="overview-view"]'
+    )
+    .first()
+    .waitFor({ state: 'visible', timeout: 10000 });
+}
+
+/**
+ * Navigate to a specific view using the sidebar navigation
+ */
+export async function navigateToView(page: Page, viewId: string): Promise<void> {
+  const navSelector = viewId === 'settings' ? 'settings-button' : `nav-${viewId}`;
+  await clickElement(page, navSelector);
+}
+
+/**
+ * Get the current view from the URL or store (checks which view is active)
+ */
+export async function getCurrentView(page: Page): Promise<string | null> {
+  // Get the current view from zustand store via localStorage
+  const storage = await page.evaluate(() => {
+    const item = localStorage.getItem('automaker-storage');
+    return item ? JSON.parse(item) : null;
+  });
+
+  return storage?.state?.currentView || null;
+}
diff --git a/temp_repo/apps/ui/tests/utils/project/fixtures.spec.ts b/temp_repo/apps/ui/tests/utils/project/fixtures.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..552ada4728d19bc3c2cdff991519b49f0dd87b2d
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/project/fixtures.spec.ts
@@ -0,0 +1,180 @@
+/**
+ * Tests for project fixture utilities
+ *
+ * Tests for path traversal guard and file operations in test fixtures
+ */
+
+import { test, expect } from '@playwright/test';
+import {
+  createMemoryFileOnDisk,
+  memoryFileExistsOnDisk,
+  resetMemoryDirectory,
+  createContextFileOnDisk,
+  contextFileExistsOnDisk,
+  resetContextDirectory,
+} from './fixtures';
+
+test.describe('Memory Fixture Utilities', () => {
+  test.beforeEach(() => {
+    resetMemoryDirectory();
+  });
+
+  test.afterEach(() => {
+    resetMemoryDirectory();
+  });
+
+  test('should create and detect a valid memory file', () => {
+    const filename = 'test-file.md';
+    const content = '# Test Content';
+
+    createMemoryFileOnDisk(filename, content);
+
+    expect(memoryFileExistsOnDisk(filename)).toBe(true);
+  });
+
+  test('should return false for non-existent file', () => {
+    expect(memoryFileExistsOnDisk('non-existent.md')).toBe(false);
+  });
+
+  test('should reject path traversal attempt with ../', () => {
+    const maliciousFilename = '../../../etc/passwd';
+
+    expect(() => {
+      createMemoryFileOnDisk(maliciousFilename, 'malicious content');
+    }).toThrow('Invalid memory filename');
+
+    expect(() => {
+      memoryFileExistsOnDisk(maliciousFilename);
+    }).toThrow('Invalid memory filename');
+  });
+
+  test('should handle Windows-style path traversal attempt ..\\ (platform-dependent)', () => {
+    const maliciousFilename = '..\\..\\..\\windows\\system32\\config';
+
+    // On Unix/macOS, backslash is treated as a literal character in filenames,
+    // not as a path separator, so path.resolve doesn't traverse directories.
+    // This test documents that behavior - the guard works for Unix paths,
+    // but Windows-style backslashes are handled differently per platform.
+    // On macOS/Linux: backslash is a valid filename character
+    // On Windows: would need additional normalization to prevent traversal
+    expect(() => {
+      memoryFileExistsOnDisk(maliciousFilename);
+    }).not.toThrow();
+
+    // The file gets created with backslashes in the name (which is valid on Unix)
+    // but won't escape the directory
+  });
+
+  test('should reject absolute path attempt', () => {
+    const maliciousFilename = '/etc/passwd';
+
+    expect(() => {
+      createMemoryFileOnDisk(maliciousFilename, 'malicious content');
+    }).toThrow('Invalid memory filename');
+
+    expect(() => {
+      memoryFileExistsOnDisk(maliciousFilename);
+    }).toThrow('Invalid memory filename');
+  });
+
+  test('should accept nested paths within memory directory', () => {
+    // Note: This tests the boundary - if subdirectories are supported,
+    // this should pass; if not, it should throw
+    const nestedFilename = 'subfolder/nested-file.md';
+
+    // Currently, the implementation doesn't create subdirectories,
+    // so this would fail when trying to write. But the path itself
+    // is valid (doesn't escape the memory directory)
+    expect(() => {
+      memoryFileExistsOnDisk(nestedFilename);
+    }).not.toThrow();
+  });
+
+  test('should handle filenames without extensions', () => {
+    const filename = 'README';
+
+    createMemoryFileOnDisk(filename, 'content without extension');
+
+    expect(memoryFileExistsOnDisk(filename)).toBe(true);
+  });
+
+  test('should handle filenames with multiple dots', () => {
+    const filename = 'my.file.name.md';
+
+    createMemoryFileOnDisk(filename, '# Multiple dots');
+
+    expect(memoryFileExistsOnDisk(filename)).toBe(true);
+  });
+});
+
+test.describe('Context Fixture Utilities', () => {
+  test.beforeEach(() => {
+    resetContextDirectory();
+  });
+
+  test.afterEach(() => {
+    resetContextDirectory();
+  });
+
+  test('should create and detect a valid context file', () => {
+    const filename = 'test-context.md';
+    const content = '# Test Context Content';
+
+    createContextFileOnDisk(filename, content);
+
+    expect(contextFileExistsOnDisk(filename)).toBe(true);
+  });
+
+  test('should return false for non-existent context file', () => {
+    expect(contextFileExistsOnDisk('non-existent.md')).toBe(false);
+  });
+
+  test('should reject path traversal attempt with ../ for context files', () => {
+    const maliciousFilename = '../../../etc/passwd';
+
+    expect(() => {
+      createContextFileOnDisk(maliciousFilename, 'malicious content');
+    }).toThrow('Invalid context filename');
+
+    expect(() => {
+      contextFileExistsOnDisk(maliciousFilename);
+    }).toThrow('Invalid context filename');
+  });
+
+  test('should reject absolute path attempt for context files', () => {
+    const maliciousFilename = '/etc/passwd';
+
+    expect(() => {
+      createContextFileOnDisk(maliciousFilename, 'malicious content');
+    }).toThrow('Invalid context filename');
+
+    expect(() => {
+      contextFileExistsOnDisk(maliciousFilename);
+    }).toThrow('Invalid context filename');
+  });
+
+  test('should accept nested paths within context directory', () => {
+    const nestedFilename = 'subfolder/nested-file.md';
+
+    // The path itself is valid (doesn't escape the context directory)
+    expect(() => {
+      contextFileExistsOnDisk(nestedFilename);
+    }).not.toThrow();
+  });
+
+  test('should handle filenames without extensions for context', () => {
+    const filename = 'README';
+
+    createContextFileOnDisk(filename, 'content without extension');
+
+    expect(contextFileExistsOnDisk(filename)).toBe(true);
+  });
+
+  test('should handle filenames with multiple dots for context', () => {
+    const filename = 'my.context.file.md';
+
+    createContextFileOnDisk(filename, '# Multiple dots');
+
+    expect(contextFileExistsOnDisk(filename)).toBe(true);
+  });
+});
diff --git a/temp_repo/apps/ui/tests/utils/project/fixtures.ts b/temp_repo/apps/ui/tests/utils/project/fixtures.ts
new file mode 100644
index 0000000000000000000000000000000000000000..351469d7697432d92a3f68a57f190a2f60e4fb8a
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/project/fixtures.ts
@@ -0,0 +1,280 @@
+import { Page } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+import { getWorkspaceRoot, assertSafeProjectPath } from '../core/safe-paths';
+
+export { getWorkspaceRoot };
+
+const WORKSPACE_ROOT = getWorkspaceRoot();
+const FIXTURE_PATH = path.join(WORKSPACE_ROOT, 'test/fixtures/projectA');
+
+// Original spec content for resetting between tests
+const ORIGINAL_SPEC_CONTENT = `<app_spec>
+  <name>Test Project A</name>
+  <description>A test fixture project for Playwright testing</description>
+  <tech_stack>
+    <item>TypeScript</item>
+    <item>React</item>
+  </tech_stack>
+</app_spec>
+`;
+
+// Worker-isolated fixture path to avoid conflicts when running tests in parallel.
+// Each Playwright worker gets its own copy of the fixture directory.
+let _workerFixturePath: string | null = null;
+
+/**
+ * Bootstrap the shared fixture directory if it doesn't exist.
+ * The fixture contains a nested .git/ dir so it can't be tracked by the
+ * parent repo — in CI this directory won't exist after checkout.
+ */
+function ensureFixtureExists(): void {
+  if (fs.existsSync(FIXTURE_PATH)) return;
+
+  fs.mkdirSync(path.join(FIXTURE_PATH, '.automaker/context'), { recursive: true });
+
+  fs.writeFileSync(path.join(FIXTURE_PATH, '.automaker/app_spec.txt'), ORIGINAL_SPEC_CONTENT);
+  fs.writeFileSync(path.join(FIXTURE_PATH, '.automaker/categories.json'), '[]');
+  fs.writeFileSync(
+    path.join(FIXTURE_PATH, '.automaker/context/context-metadata.json'),
+    '{"files": {}}'
+  );
+}
+
+/**
+ * Get a worker-isolated fixture path. Creates a copy of the fixture directory
+ * for this worker process so parallel tests don't conflict.
+ * Falls back to the shared fixture path for backwards compatibility.
+ */
+function getWorkerFixturePath(): string {
+  if (_workerFixturePath) return _workerFixturePath;
+
+  // Ensure the source fixture exists (may not in CI)
+  ensureFixtureExists();
+
+  if (!fs.existsSync(FIXTURE_PATH)) {
+    throw new Error(
+      `E2E source fixture is missing at ${FIXTURE_PATH}. ` +
+        'Run the setup script to create it: from apps/ui, run `node scripts/setup-e2e-fixtures.mjs` (or use `pnpm test`, which runs it via pretest).'
+    );
+  }
+
+  // Use process.pid + a unique suffix to isolate per-worker
+  const workerId = process.env.TEST_WORKER_INDEX || process.pid.toString();
+  const workerDir = path.join(WORKSPACE_ROOT, `test/fixtures/.worker-${workerId}`);
+
+  // Copy projectA fixture to worker directory if it doesn't exist
+  if (!fs.existsSync(workerDir)) {
+    fs.cpSync(FIXTURE_PATH, workerDir, { recursive: true });
+  }
+
+  _workerFixturePath = workerDir;
+  return workerDir;
+}
+
+/**
+ * Get the worker-isolated context path
+ */
+function getWorkerContextPath(): string {
+  return path.join(getWorkerFixturePath(), '.automaker/context');
+}
+
+/**
+ * Get the worker-isolated memory path
+ */
+function getWorkerMemoryPath(): string {
+  return path.join(getWorkerFixturePath(), '.automaker/memory');
+}
+
+/**
+ * Get the worker-isolated spec file path
+ */
+function getWorkerSpecPath(): string {
+  return path.join(getWorkerFixturePath(), '.automaker/app_spec.txt');
+}
+
+/**
+ * Reset the fixture's app_spec.txt to original content
+ */
+export function resetFixtureSpec(): void {
+  const specPath = getWorkerSpecPath();
+  const dir = path.dirname(specPath);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+  fs.writeFileSync(specPath, ORIGINAL_SPEC_CONTENT);
+}
+
+/**
+ * Reset the context directory to empty state
+ */
+export function resetContextDirectory(): void {
+  const contextPath = getWorkerContextPath();
+  if (fs.existsSync(contextPath)) {
+    fs.rmSync(contextPath, { recursive: true });
+  }
+  fs.mkdirSync(contextPath, { recursive: true });
+}
+
+/**
+ * Reset the memory directory to empty state
+ */
+export function resetMemoryDirectory(): void {
+  const memoryPath = getWorkerMemoryPath();
+  if (fs.existsSync(memoryPath)) {
+    fs.rmSync(memoryPath, { recursive: true });
+  }
+  fs.mkdirSync(memoryPath, { recursive: true });
+}
+
+/**
+ * Resolve and validate a context fixture path to prevent path traversal
+ */
+function resolveContextFixturePath(filename: string): string {
+  const contextPath = getWorkerContextPath();
+  const resolved = path.resolve(contextPath, filename);
+  const base = path.resolve(contextPath) + path.sep;
+  if (!resolved.startsWith(base)) {
+    throw new Error(`Invalid context filename: ${filename}`);
+  }
+  return resolved;
+}
+
+/**
+ * Create a context file directly on disk (for test setup)
+ */
+export function createContextFileOnDisk(filename: string, content: string): void {
+  const filePath = resolveContextFixturePath(filename);
+  fs.writeFileSync(filePath, content);
+}
+
+/**
+ * Resolve and validate a memory fixture path to prevent path traversal
+ */
+function resolveMemoryFixturePath(filename: string): string {
+  const memoryPath = getWorkerMemoryPath();
+  const resolved = path.resolve(memoryPath, filename);
+  const base = path.resolve(memoryPath) + path.sep;
+  if (!resolved.startsWith(base)) {
+    throw new Error(`Invalid memory filename: ${filename}`);
+  }
+  return resolved;
+}
+
+/**
+ * Create a memory file directly on disk (for test setup)
+ */
+export function createMemoryFileOnDisk(filename: string, content: string): void {
+  const filePath = resolveMemoryFixturePath(filename);
+  fs.writeFileSync(filePath, content);
+}
+
+/**
+ * Check if a context file exists on disk
+ */
+export function contextFileExistsOnDisk(filename: string): boolean {
+  const filePath = resolveContextFixturePath(filename);
+  return fs.existsSync(filePath);
+}
+
+/**
+ * Check if a memory file exists on disk
+ */
+export function memoryFileExistsOnDisk(filename: string): boolean {
+  const filePath = resolveMemoryFixturePath(filename);
+  return fs.existsSync(filePath);
+}
+
+/**
+ * Set up localStorage with a project pointing to our test fixture
+ * Note: In CI, setup wizard is also skipped via NEXT_PUBLIC_SKIP_SETUP env var
+ * Project path must be under test/ or temp to avoid affecting the main project's git.
+ * Defaults to a worker-isolated copy of the fixture to support parallel test execution.
+ */
+export async function setupProjectWithFixture(
+  page: Page,
+  projectPath: string = getWorkerFixturePath()
+): Promise<void> {
+  assertSafeProjectPath(projectPath);
+  await page.addInitScript((pathArg: string) => {
+    const mockProject = {
+      id: 'test-project-fixture',
+      name: 'projectA',
+      path: pathArg,
+      lastOpened: new Date().toISOString(),
+    };
+
+    const mockState = {
+      state: {
+        projects: [mockProject],
+        currentProject: mockProject,
+        currentView: 'board',
+        theme: 'dark',
+        sidebarOpen: true,
+        skipSandboxWarning: true,
+        apiKeys: { anthropic: '', google: '' },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+      },
+      version: 2, // Must match app-store.ts persist version
+    };
+
+    localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+    // Also mark setup as complete (fallback for when NEXT_PUBLIC_SKIP_SETUP isn't set)
+    const setupState = {
+      state: {
+        isFirstRun: false,
+        setupComplete: true,
+        currentStep: 'complete',
+        skipClaudeSetup: false,
+      },
+      version: 0, // setup-store.ts doesn't specify a version, so zustand defaults to 0
+    };
+    localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+    // Set settings cache so the fast-hydrate path uses our fixture project.
+    // Without this, a stale settings cache from a previous test can override
+    // the project we just set in automaker-storage.
+    const settingsCache = {
+      setupComplete: true,
+      isFirstRun: false,
+      projects: [
+        {
+          id: mockProject.id,
+          name: mockProject.name,
+          path: mockProject.path,
+          lastOpened: mockProject.lastOpened,
+        },
+      ],
+      currentProjectId: mockProject.id,
+      theme: 'dark',
+      sidebarOpen: true,
+      maxConcurrency: 3,
+      skipSandboxWarning: true,
+    };
+    localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+    // Disable splash screen in tests
+    localStorage.setItem('automaker-disable-splash', 'true');
+  }, projectPath);
+}
+
+/**
+ * Get the fixture path (worker-isolated for parallel test execution)
+ */
+export function getFixturePath(): string {
+  return getWorkerFixturePath();
+}
+
+/**
+ * Set up a mock project with the fixture path (for profile/settings tests that need a project).
+ * Options such as customProfilesCount are reserved for future use (e.g. mocking server profile state).
+ */
+export async function setupMockProjectWithProfiles(
+  page: Page,
+  _options?: { customProfilesCount?: number }
+): Promise<void> {
+  await setupProjectWithFixture(page);
+}
diff --git a/temp_repo/apps/ui/tests/utils/project/setup.ts b/temp_repo/apps/ui/tests/utils/project/setup.ts
new file mode 100644
index 0000000000000000000000000000000000000000..532d0d525016676cb276830ea2ba4300b7348a75
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/project/setup.ts
@@ -0,0 +1,1264 @@
+import { Page } from '@playwright/test';
+import { assertSafeProjectPath } from '../core/safe-paths';
+
+/**
+ * Store version constants - centralized to avoid hardcoding across tests
+ * These MUST match the versions used in the actual stores
+ */
+const STORE_VERSIONS = {
+  APP_STORE: 2, // Must match app-store.ts persist version
+  SETUP_STORE: 1, // Must match setup-store.ts persist version
+} as const;
+
+/**
+ * Project interface for test setup
+ */
+export interface TestProject {
+  id: string;
+  name: string;
+  path: string;
+  lastOpened?: string;
+}
+
+/**
+ * Options for setting up the welcome view
+ */
+export interface WelcomeViewSetupOptions {
+  /** Directory path to pre-configure as the workspace directory */
+  workspaceDir?: string;
+  /** Recent projects to show (but not as current project) */
+  recentProjects?: TestProject[];
+}
+
+/**
+ * Set up localStorage to show the welcome view with no current project
+ * This is the cleanest way to test project creation flows
+ *
+ * @param page - Playwright page
+ * @param options - Configuration options
+ */
+export async function setupWelcomeView(
+  page: Page,
+  options?: WelcomeViewSetupOptions
+): Promise<void> {
+  await page.addInitScript(
+    ({
+      opts,
+      versions,
+    }: {
+      opts: WelcomeViewSetupOptions | undefined;
+      versions: typeof STORE_VERSIONS;
+    }) => {
+      // Set up empty app state (no current project) - shows welcome view
+      const appState = {
+        state: {
+          projects: opts?.recentProjects || [],
+          currentProject: null,
+          currentView: 'welcome',
+          theme: 'dark',
+          sidebarOpen: true,
+          skipSandboxWarning: true,
+          apiKeys: { anthropic: '', google: '' },
+          chatSessions: [],
+          chatHistoryOpen: false,
+          maxConcurrency: 3,
+        },
+        version: versions.APP_STORE,
+      };
+      localStorage.setItem('automaker-storage', JSON.stringify(appState));
+
+      // Mark setup as complete to skip the setup wizard
+      const setupState = {
+        state: {
+          isFirstRun: false,
+          setupComplete: true,
+          skipClaudeSetup: false,
+        },
+        version: versions.SETUP_STORE,
+      };
+      localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+      // Set settings cache to ensure setupComplete is recognized on cold start.
+      // This prevents the server's setupComplete value (which may be false on fresh CI)
+      // from overriding the setup store and causing a redirect to /setup.
+      const settingsCache: Record<string, unknown> = {
+        setupComplete: true,
+        isFirstRun: false,
+        projects: opts?.recentProjects || [],
+        // Explicitly set currentProjectId to null so the fast-hydrate path
+        // does not restore a stale project from a previous test.
+        currentProjectId: null,
+        theme: 'dark',
+        sidebarOpen: true,
+        maxConcurrency: 3,
+      };
+
+      // Include lastProjectDir in settings cache so it's available during fast-hydrate.
+      // The standalone localStorage key is a legacy fallback; the cache is the primary source.
+      if (opts?.workspaceDir) {
+        settingsCache.lastProjectDir = opts.workspaceDir;
+      }
+
+      localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+      // Set workspace directory if provided (legacy fallback key)
+      if (opts?.workspaceDir) {
+        localStorage.setItem('automaker:lastProjectDir', opts.workspaceDir);
+      }
+
+      // Disable splash screen in tests
+      localStorage.setItem('automaker-disable-splash', 'true');
+
+      // Set up a mechanism to keep currentProject null even after settings hydration.
+      // Settings API might restore a project, so we watch for changes and override.
+      sessionStorage.setItem('automaker-test-welcome-view', 'true');
+
+      // Use a MutationObserver + storage event to detect when hydration sets a project,
+      // then immediately override it back to null. This is more reliable than a fixed timeout.
+      const enforceWelcomeView = () => {
+        const storage = localStorage.getItem('automaker-storage');
+        if (storage) {
+          try {
+            const state = JSON.parse(storage);
+            if (
+              state.state &&
+              sessionStorage.getItem('automaker-test-welcome-view') === 'true' &&
+              state.state.currentProject !== null
+            ) {
+              state.state.currentProject = null;
+              state.state.currentView = 'welcome';
+              localStorage.setItem('automaker-storage', JSON.stringify(state));
+            }
+          } catch {
+            // Ignore parse errors
+          }
+        }
+      };
+
+      // Listen for storage changes (catches hydration from settings API)
+      window.addEventListener('storage', enforceWelcomeView);
+
+      // Also poll briefly to catch synchronous hydration that doesn't fire storage events
+      const pollInterval = setInterval(enforceWelcomeView, 200);
+      setTimeout(() => {
+        clearInterval(pollInterval);
+        window.removeEventListener('storage', enforceWelcomeView);
+      }, 5000); // Stop after 5s - hydration should be done by then
+    },
+    { opts: options, versions: STORE_VERSIONS }
+  );
+}
+
+/**
+ * Set up localStorage with a project at a real filesystem path
+ * Use this when testing with actual files on disk.
+ * Project path must be under test/ or temp to avoid affecting the main project's git.
+ *
+ * @param page - Playwright page
+ * @param projectPath - Absolute path to the project directory
+ * @param projectName - Display name for the project
+ * @param options - Additional options
+ */
+export async function setupRealProject(
+  page: Page,
+  projectPath: string,
+  projectName: string,
+  options?: {
+    /** Set as current project (opens board view) or just add to recent projects */
+    setAsCurrent?: boolean;
+    /** Additional recent projects to include */
+    additionalProjects?: TestProject[];
+    /** Optional project ID to use (if not provided, generates timestamp-based ID) */
+    projectId?: string;
+  }
+): Promise<void> {
+  assertSafeProjectPath(projectPath);
+  await page.addInitScript(
+    ({
+      path,
+      name,
+      opts,
+      versions,
+    }: {
+      path: string;
+      name: string;
+      opts: typeof options;
+      versions: typeof STORE_VERSIONS;
+    }) => {
+      const projectId = opts?.projectId || `project-${Date.now()}`;
+      const project: TestProject = {
+        id: projectId,
+        name: name,
+        path: path,
+        lastOpened: new Date().toISOString(),
+      };
+
+      const allProjects = [project, ...(opts?.additionalProjects || [])];
+      const currentProject = opts?.setAsCurrent !== false ? project : null;
+
+      const appState = {
+        state: {
+          projects: allProjects,
+          currentProject: currentProject,
+          currentView: currentProject ? 'board' : 'welcome',
+          theme: 'dark',
+          sidebarOpen: true,
+          skipSandboxWarning: true,
+          apiKeys: { anthropic: '', google: '' },
+          chatSessions: [],
+          chatHistoryOpen: false,
+          maxConcurrency: 3,
+        },
+        version: versions.APP_STORE,
+      };
+      localStorage.setItem('automaker-storage', JSON.stringify(appState));
+
+      // Mark setup as complete
+      const setupState = {
+        state: {
+          isFirstRun: false,
+          setupComplete: true,
+          skipClaudeSetup: false,
+        },
+        version: versions.SETUP_STORE,
+      };
+      localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+      // Set settings cache to ensure setupComplete is recognized on cold start.
+      // This prevents the server's setupComplete value (which may be false on fresh CI)
+      // from overriding the setup store and causing a redirect to /setup.
+      const settingsCache = {
+        setupComplete: true,
+        isFirstRun: false,
+        projects: allProjects.map((p) => ({
+          id: p.id,
+          name: p.name,
+          path: p.path,
+          lastOpened: p.lastOpened,
+        })),
+        // Include currentProjectId so hydrateStoreFromSettings can restore
+        // the current project directly (without relying on auto-open logic)
+        currentProjectId: currentProject ? currentProject.id : null,
+        theme: 'dark',
+        sidebarOpen: true,
+        maxConcurrency: 3,
+        skipSandboxWarning: true,
+      };
+      localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+      // Disable splash screen in tests
+      localStorage.setItem('automaker-disable-splash', 'true');
+    },
+    { path: projectPath, name: projectName, opts: options, versions: STORE_VERSIONS }
+  );
+}
+
+/**
+ * Set up a mock project in localStorage to bypass the welcome screen
+ * This simulates having opened a project before
+ */
+export async function setupMockProject(page: Page): Promise<void> {
+  await page.addInitScript((versions: typeof STORE_VERSIONS) => {
+    const mockProject = {
+      id: 'test-project-1',
+      name: 'Test Project',
+      path: '/mock/test-project',
+      lastOpened: new Date().toISOString(),
+    };
+
+    const mockState = {
+      state: {
+        projects: [mockProject],
+        currentProject: mockProject,
+        theme: 'dark',
+        sidebarOpen: true,
+        apiKeys: { anthropic: '', google: '' },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+      },
+      version: versions.APP_STORE,
+    };
+
+    localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+    // Mark setup as complete to prevent redirect to /setup
+    const setupState = {
+      state: {
+        isFirstRun: false,
+        setupComplete: true,
+        skipClaudeSetup: false,
+      },
+      version: versions.SETUP_STORE,
+    };
+    localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+    // Set settings cache so the fast hydrate path is taken on page load.
+    const settingsCache = {
+      setupComplete: true,
+      isFirstRun: false,
+      projects: [
+        {
+          id: mockProject.id,
+          name: mockProject.name,
+          path: mockProject.path,
+          lastOpened: mockProject.lastOpened,
+        },
+      ],
+      theme: 'dark',
+      sidebarOpen: true,
+      maxConcurrency: 3,
+    };
+    localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+    // Disable splash screen in tests
+    localStorage.setItem('automaker-disable-splash', 'true');
+  }, STORE_VERSIONS);
+}
+
+/**
+ * Set up a mock project with custom concurrency value
+ */
+export async function setupMockProjectWithConcurrency(
+  page: Page,
+  concurrency: number
+): Promise<void> {
+  await page.addInitScript(
+    ({ maxConcurrency, versions }: { maxConcurrency: number; versions: typeof STORE_VERSIONS }) => {
+      const mockProject = {
+        id: 'test-project-1',
+        name: 'Test Project',
+        path: '/mock/test-project',
+        lastOpened: new Date().toISOString(),
+      };
+
+      const mockState = {
+        state: {
+          projects: [mockProject],
+          currentProject: mockProject,
+          theme: 'dark',
+          sidebarOpen: true,
+          apiKeys: { anthropic: '', google: '' },
+          chatSessions: [],
+          chatHistoryOpen: false,
+          maxConcurrency: maxConcurrency,
+        },
+        version: versions.APP_STORE,
+      };
+
+      localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+      // Mark setup as complete to prevent redirect to /setup
+      const setupState = {
+        state: { isFirstRun: false, setupComplete: true, skipClaudeSetup: false },
+        version: versions.SETUP_STORE,
+      };
+      localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+      const settingsCache = {
+        setupComplete: true,
+        isFirstRun: false,
+        projects: [
+          {
+            id: mockProject.id,
+            name: mockProject.name,
+            path: mockProject.path,
+            lastOpened: mockProject.lastOpened,
+          },
+        ],
+        theme: 'dark',
+        sidebarOpen: true,
+        maxConcurrency: maxConcurrency,
+      };
+      localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+    },
+    { maxConcurrency: concurrency, versions: STORE_VERSIONS }
+  );
+}
+
+/**
+ * Set up a mock project with specific running tasks to simulate concurrency limit
+ */
+export async function setupMockProjectAtConcurrencyLimit(
+  page: Page,
+  maxConcurrency: number = 1,
+  runningTasks: string[] = ['running-task-1']
+): Promise<void> {
+  await page.addInitScript(
+    ({
+      maxConcurrency,
+      runningTasks,
+      versions,
+    }: {
+      maxConcurrency: number;
+      runningTasks: string[];
+      versions: typeof STORE_VERSIONS;
+    }) => {
+      const mockProject = {
+        id: 'test-project-1',
+        name: 'Test Project',
+        path: '/mock/test-project',
+        lastOpened: new Date().toISOString(),
+      };
+
+      const mockState = {
+        state: {
+          projects: [mockProject],
+          currentProject: mockProject,
+          theme: 'dark',
+          sidebarOpen: true,
+          apiKeys: { anthropic: '', google: '' },
+          chatSessions: [],
+          chatHistoryOpen: false,
+          maxConcurrency: maxConcurrency,
+          isAutoModeRunning: false,
+          runningAutoTasks: runningTasks,
+          autoModeActivityLog: [],
+        },
+        version: versions.APP_STORE,
+      };
+
+      localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+      const setupState = {
+        state: { isFirstRun: false, setupComplete: true, skipClaudeSetup: false },
+        version: versions.SETUP_STORE,
+      };
+      localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+      const settingsCache = {
+        setupComplete: true,
+        isFirstRun: false,
+        projects: [
+          {
+            id: mockProject.id,
+            name: mockProject.name,
+            path: mockProject.path,
+            lastOpened: mockProject.lastOpened,
+          },
+        ],
+        theme: 'dark',
+        sidebarOpen: true,
+        maxConcurrency: maxConcurrency,
+      };
+      localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+      // Disable splash screen in tests
+      localStorage.setItem('automaker-disable-splash', 'true');
+    },
+    { maxConcurrency, runningTasks, versions: STORE_VERSIONS }
+  );
+}
+
+/**
+ * Set up a mock project with features in different states
+ */
+export async function setupMockProjectWithFeatures(
+  page: Page,
+  options?: {
+    maxConcurrency?: number;
+    runningTasks?: string[];
+    features?: Array<{
+      id: string;
+      category: string;
+      description: string;
+      status: 'backlog' | 'in_progress' | 'verified';
+      steps?: string[];
+    }>;
+  }
+): Promise<void> {
+  await page.addInitScript(
+    ({ opts, versions }: { opts: typeof options; versions: typeof STORE_VERSIONS }) => {
+      const mockProject = {
+        id: 'test-project-1',
+        name: 'Test Project',
+        path: '/mock/test-project',
+        lastOpened: new Date().toISOString(),
+      };
+
+      const mockFeatures = opts?.features || [];
+
+      const mockState = {
+        state: {
+          projects: [mockProject],
+          currentProject: mockProject,
+          theme: 'dark',
+          sidebarOpen: true,
+          apiKeys: { anthropic: '', google: '' },
+          chatSessions: [],
+          chatHistoryOpen: false,
+          maxConcurrency: opts?.maxConcurrency ?? 3,
+          isAutoModeRunning: false,
+          runningAutoTasks: opts?.runningTasks ?? [],
+          autoModeActivityLog: [],
+          features: mockFeatures,
+        },
+        version: versions.APP_STORE,
+      };
+
+      localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+      const setupState = {
+        state: { isFirstRun: false, setupComplete: true, skipClaudeSetup: false },
+        version: versions.SETUP_STORE,
+      };
+      localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+      const settingsCache = {
+        setupComplete: true,
+        isFirstRun: false,
+        projects: [
+          {
+            id: mockProject.id,
+            name: mockProject.name,
+            path: mockProject.path,
+            lastOpened: mockProject.lastOpened,
+          },
+        ],
+        theme: 'dark',
+        sidebarOpen: true,
+        maxConcurrency: opts?.maxConcurrency ?? 3,
+      };
+      localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+      // Also store features in a global variable that the mock electron API can use
+      // This is needed because the board-view loads features from the file system
+      (window as { __mockFeatures?: unknown[] }).__mockFeatures = mockFeatures;
+
+      // Disable splash screen in tests
+      localStorage.setItem('automaker-disable-splash', 'true');
+    },
+    { opts: options, versions: STORE_VERSIONS }
+  );
+}
+
+/**
+ * Set up a mock project with a feature context file
+ * This simulates an agent having created context for a feature
+ */
+export async function setupMockProjectWithContextFile(
+  page: Page,
+  featureId: string,
+  contextContent: string = '# Agent Context\n\nPrevious implementation work...'
+): Promise<void> {
+  await page.addInitScript(
+    ({
+      featureId,
+      contextContent,
+      versions,
+    }: {
+      featureId: string;
+      contextContent: string;
+      versions: typeof STORE_VERSIONS;
+    }) => {
+      const mockProject = {
+        id: 'test-project-1',
+        name: 'Test Project',
+        path: '/mock/test-project',
+        lastOpened: new Date().toISOString(),
+      };
+
+      const mockState = {
+        state: {
+          projects: [mockProject],
+          currentProject: mockProject,
+          theme: 'dark',
+          sidebarOpen: true,
+          apiKeys: { anthropic: '', google: '' },
+          chatSessions: [],
+          chatHistoryOpen: false,
+          maxConcurrency: 3,
+        },
+        version: versions.APP_STORE,
+      };
+
+      localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+      const setupState = {
+        state: { isFirstRun: false, setupComplete: true, skipClaudeSetup: false },
+        version: versions.SETUP_STORE,
+      };
+      localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+      const settingsCache = {
+        setupComplete: true,
+        isFirstRun: false,
+        projects: [
+          {
+            id: mockProject.id,
+            name: mockProject.name,
+            path: mockProject.path,
+            lastOpened: mockProject.lastOpened,
+          },
+        ],
+        theme: 'dark',
+        sidebarOpen: true,
+        maxConcurrency: 3,
+      };
+      localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+      // Disable splash screen in tests
+      localStorage.setItem('automaker-disable-splash', 'true');
+
+      // Set up mock file system with a context file for the feature
+      // This will be used by the mock electron API
+      // Now uses features/{id}/agent-output.md path
+      (
+        window as { __mockContextFile?: { featureId: string; path: string; content: string } }
+      ).__mockContextFile = {
+        featureId,
+        path: `/mock/test-project/.automaker/features/${featureId}/agent-output.md`,
+        content: contextContent,
+      };
+    },
+    { featureId, contextContent, versions: STORE_VERSIONS }
+  );
+}
+
+/**
+ * Set up a mock project with features that have startedAt timestamps
+ */
+export async function setupMockProjectWithInProgressFeatures(
+  page: Page,
+  options?: {
+    maxConcurrency?: number;
+    runningTasks?: string[];
+    features?: Array<{
+      id: string;
+      category: string;
+      description: string;
+      status: 'backlog' | 'in_progress' | 'verified';
+      steps?: string[];
+      startedAt?: string;
+    }>;
+  }
+): Promise<void> {
+  await page.addInitScript(
+    ({ opts, versions }: { opts: typeof options; versions: typeof STORE_VERSIONS }) => {
+      const mockProject = {
+        id: 'test-project-1',
+        name: 'Test Project',
+        path: '/mock/test-project',
+        lastOpened: new Date().toISOString(),
+      };
+
+      const mockFeatures = opts?.features || [];
+
+      const mockState = {
+        state: {
+          projects: [mockProject],
+          currentProject: mockProject,
+          theme: 'dark',
+          sidebarOpen: true,
+          apiKeys: { anthropic: '', google: '' },
+          chatSessions: [],
+          chatHistoryOpen: false,
+          maxConcurrency: opts?.maxConcurrency ?? 3,
+          isAutoModeRunning: false,
+          runningAutoTasks: opts?.runningTasks ?? [],
+          autoModeActivityLog: [],
+          features: mockFeatures,
+        },
+        version: versions.APP_STORE,
+      };
+
+      localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+      const setupState = {
+        state: { isFirstRun: false, setupComplete: true, skipClaudeSetup: false },
+        version: versions.SETUP_STORE,
+      };
+      localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+      const settingsCache = {
+        setupComplete: true,
+        isFirstRun: false,
+        projects: [
+          {
+            id: mockProject.id,
+            name: mockProject.name,
+            path: mockProject.path,
+            lastOpened: mockProject.lastOpened,
+          },
+        ],
+        theme: 'dark',
+        sidebarOpen: true,
+        maxConcurrency: opts?.maxConcurrency ?? 3,
+      };
+      localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+      // Also store features in a global variable that the mock electron API can use
+      // This is needed because the board-view loads features from the file system
+      (window as { __mockFeatures?: unknown[] }).__mockFeatures = mockFeatures;
+    },
+    { opts: options, versions: STORE_VERSIONS }
+  );
+}
+
+/**
+ * Set up a mock project with a specific current view for route persistence testing
+ */
+export async function setupMockProjectWithView(page: Page, view: string): Promise<void> {
+  await page.addInitScript(
+    ({ currentView, versions }: { currentView: string; versions: typeof STORE_VERSIONS }) => {
+      const mockProject = {
+        id: 'test-project-1',
+        name: 'Test Project',
+        path: '/mock/test-project',
+        lastOpened: new Date().toISOString(),
+      };
+
+      const mockState = {
+        state: {
+          projects: [mockProject],
+          currentProject: mockProject,
+          currentView: currentView,
+          theme: 'dark',
+          sidebarOpen: true,
+          apiKeys: { anthropic: '', google: '' },
+          chatSessions: [],
+          chatHistoryOpen: false,
+          maxConcurrency: 3,
+        },
+        version: versions.APP_STORE,
+      };
+
+      localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+      const setupState = {
+        state: { isFirstRun: false, setupComplete: true, skipClaudeSetup: false },
+        version: versions.SETUP_STORE,
+      };
+      localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+      const settingsCache = {
+        setupComplete: true,
+        isFirstRun: false,
+        projects: [
+          {
+            id: mockProject.id,
+            name: mockProject.name,
+            path: mockProject.path,
+            lastOpened: mockProject.lastOpened,
+          },
+        ],
+        theme: 'dark',
+        sidebarOpen: true,
+        maxConcurrency: 3,
+      };
+      localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+    },
+    { currentView: view, versions: STORE_VERSIONS }
+  );
+}
+
+/**
+ * Set up an empty localStorage (no projects) to show welcome screen
+ */
+export async function setupEmptyLocalStorage(page: Page): Promise<void> {
+  await page.addInitScript((versions: typeof STORE_VERSIONS) => {
+    const mockState = {
+      state: {
+        projects: [],
+        currentProject: null,
+        currentView: 'welcome',
+        theme: 'dark',
+        sidebarOpen: true,
+        apiKeys: { anthropic: '', google: '' },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+      },
+      version: versions.APP_STORE,
+    };
+    localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+    const setupState = {
+      state: { isFirstRun: false, setupComplete: true, skipClaudeSetup: false },
+      version: versions.SETUP_STORE,
+    };
+    localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+    const settingsCache = {
+      setupComplete: true,
+      isFirstRun: false,
+      projects: [],
+      theme: 'dark',
+      sidebarOpen: true,
+      maxConcurrency: 3,
+    };
+    localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+    // Disable splash screen in tests
+    localStorage.setItem('automaker-disable-splash', 'true');
+  }, STORE_VERSIONS);
+}
+
+/**
+ * Set up mock projects in localStorage but with no current project (for recent projects list)
+ */
+export async function setupMockProjectsWithoutCurrent(page: Page): Promise<void> {
+  await page.addInitScript((versions: typeof STORE_VERSIONS) => {
+    const mockProjects = [
+      {
+        id: 'test-project-1',
+        name: 'Test Project 1',
+        path: '/mock/test-project-1',
+        lastOpened: new Date().toISOString(),
+      },
+      {
+        id: 'test-project-2',
+        name: 'Test Project 2',
+        path: '/mock/test-project-2',
+        lastOpened: new Date(Date.now() - 86400000).toISOString(), // 1 day ago
+      },
+    ];
+
+    const mockState = {
+      state: {
+        projects: mockProjects,
+        currentProject: null,
+        currentView: 'welcome',
+        theme: 'dark',
+        sidebarOpen: true,
+        apiKeys: { anthropic: '', google: '' },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+      },
+      version: versions.APP_STORE,
+    };
+
+    localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+    const setupState = {
+      state: { isFirstRun: false, setupComplete: true, skipClaudeSetup: false },
+      version: versions.SETUP_STORE,
+    };
+    localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+    const settingsCache = {
+      setupComplete: true,
+      isFirstRun: false,
+      projects: mockProjects.map((p) => ({
+        id: p.id,
+        name: p.name,
+        path: p.path,
+        lastOpened: p.lastOpened,
+      })),
+      theme: 'dark',
+      sidebarOpen: true,
+      maxConcurrency: 3,
+    };
+    localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+    // Disable splash screen in tests
+    localStorage.setItem('automaker-disable-splash', 'true');
+  }, STORE_VERSIONS);
+}
+
+/**
+ * Set up a mock project with features that have skipTests enabled
+ */
+export async function setupMockProjectWithSkipTestsFeatures(
+  page: Page,
+  options?: {
+    maxConcurrency?: number;
+    runningTasks?: string[];
+    features?: Array<{
+      id: string;
+      category: string;
+      description: string;
+      status: 'backlog' | 'in_progress' | 'verified';
+      steps?: string[];
+      startedAt?: string;
+      skipTests?: boolean;
+    }>;
+  }
+): Promise<void> {
+  await page.addInitScript(
+    ({ opts, versions }: { opts: typeof options; versions: typeof STORE_VERSIONS }) => {
+      const mockProject = {
+        id: 'test-project-1',
+        name: 'Test Project',
+        path: '/mock/test-project',
+        lastOpened: new Date().toISOString(),
+      };
+
+      const mockFeatures = opts?.features || [];
+
+      const mockState = {
+        state: {
+          projects: [mockProject],
+          currentProject: mockProject,
+          theme: 'dark',
+          sidebarOpen: true,
+          apiKeys: { anthropic: '', google: '' },
+          chatSessions: [],
+          chatHistoryOpen: false,
+          maxConcurrency: opts?.maxConcurrency ?? 3,
+          isAutoModeRunning: false,
+          runningAutoTasks: opts?.runningTasks ?? [],
+          autoModeActivityLog: [],
+          features: mockFeatures,
+        },
+        version: versions.APP_STORE,
+      };
+
+      localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+      const setupState = {
+        state: { isFirstRun: false, setupComplete: true, skipClaudeSetup: false },
+        version: versions.SETUP_STORE,
+      };
+      localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+      const settingsCache = {
+        setupComplete: true,
+        isFirstRun: false,
+        projects: [
+          {
+            id: mockProject.id,
+            name: mockProject.name,
+            path: mockProject.path,
+            lastOpened: mockProject.lastOpened,
+          },
+        ],
+        theme: 'dark',
+        sidebarOpen: true,
+        maxConcurrency: opts?.maxConcurrency ?? 3,
+      };
+      localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+      // Disable splash screen in tests
+      localStorage.setItem('automaker-disable-splash', 'true');
+    },
+    { opts: options, versions: STORE_VERSIONS }
+  );
+}
+
+/**
+ * Set up a mock state with multiple projects
+ */
+export async function setupMockMultipleProjects(
+  page: Page,
+  projectCount: number = 3
+): Promise<void> {
+  await page.addInitScript(
+    ({ count, versions }: { count: number; versions: typeof STORE_VERSIONS }) => {
+      const mockProjects: TestProject[] = [];
+      for (let i = 0; i < count; i++) {
+        mockProjects.push({
+          id: `test-project-${i + 1}`,
+          name: `Test Project ${i + 1}`,
+          path: `/mock/test-project-${i + 1}`,
+          lastOpened: new Date(Date.now() - i * 86400000).toISOString(),
+        });
+      }
+
+      const mockState = {
+        state: {
+          projects: mockProjects,
+          currentProject: mockProjects[0],
+          currentView: 'board',
+          theme: 'dark',
+          sidebarOpen: true,
+          apiKeys: { anthropic: '', google: '' },
+          chatSessions: [],
+          chatHistoryOpen: false,
+          maxConcurrency: 3,
+        },
+        version: versions.APP_STORE,
+      };
+
+      localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+      // Mark setup as complete to prevent redirect to /setup
+      const setupState = {
+        state: {
+          isFirstRun: false,
+          setupComplete: true,
+          skipClaudeSetup: false,
+        },
+        version: versions.SETUP_STORE,
+      };
+      localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+      // Set settings cache so the fast hydrate path is taken on page load.
+      // This prevents the server's setupComplete value (which may be false on fresh CI)
+      // from overwriting the setup store and causing a redirect to /setup.
+      const settingsCache = {
+        setupComplete: true,
+        isFirstRun: false,
+        projects: mockProjects.map((p) => ({
+          id: p.id,
+          name: p.name,
+          path: p.path,
+          lastOpened: p.lastOpened,
+        })),
+        // Include currentProjectId so hydrateStoreFromSettings can restore
+        // the current project directly (without relying on auto-open logic)
+        currentProjectId: mockProjects[0]?.id ?? null,
+        theme: 'dark',
+        sidebarOpen: true,
+        maxConcurrency: 3,
+      };
+      localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+      // Disable splash screen in tests
+      localStorage.setItem('automaker-disable-splash', 'true');
+    },
+    { count: projectCount, versions: STORE_VERSIONS }
+  );
+}
+
+/**
+ * Set up a mock project with agent output content in the context file
+ */
+export async function setupMockProjectWithAgentOutput(
+  page: Page,
+  featureId: string,
+  outputContent: string
+): Promise<void> {
+  await page.addInitScript(
+    ({
+      featureId,
+      outputContent,
+      versions,
+    }: {
+      featureId: string;
+      outputContent: string;
+      versions: typeof STORE_VERSIONS;
+    }) => {
+      const mockProject = {
+        id: 'test-project-1',
+        name: 'Test Project',
+        path: '/mock/test-project',
+        lastOpened: new Date().toISOString(),
+      };
+
+      const mockState = {
+        state: {
+          projects: [mockProject],
+          currentProject: mockProject,
+          theme: 'dark',
+          sidebarOpen: true,
+          apiKeys: { anthropic: '', google: '' },
+          chatSessions: [],
+          chatHistoryOpen: false,
+          maxConcurrency: 3,
+        },
+        version: versions.APP_STORE,
+      };
+
+      localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+      const setupState = {
+        state: { isFirstRun: false, setupComplete: true, skipClaudeSetup: false },
+        version: versions.SETUP_STORE,
+      };
+      localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+      const settingsCache = {
+        setupComplete: true,
+        isFirstRun: false,
+        projects: [
+          {
+            id: mockProject.id,
+            name: mockProject.name,
+            path: mockProject.path,
+            lastOpened: mockProject.lastOpened,
+          },
+        ],
+        theme: 'dark',
+        sidebarOpen: true,
+        maxConcurrency: 3,
+      };
+      localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+      // Disable splash screen in tests
+      localStorage.setItem('automaker-disable-splash', 'true');
+
+      // Set up mock file system with output content for the feature
+      // Now uses features/{id}/agent-output.md path
+      (
+        window as { __mockContextFile?: { featureId: string; path: string; content: string } }
+      ).__mockContextFile = {
+        featureId,
+        path: `/mock/test-project/.automaker/features/${featureId}/agent-output.md`,
+        content: outputContent,
+      };
+    },
+    { featureId, outputContent, versions: STORE_VERSIONS }
+  );
+}
+
+/**
+ * Set up a mock project with features that include waiting_approval status
+ */
+export async function setupMockProjectWithWaitingApprovalFeatures(
+  page: Page,
+  options?: {
+    maxConcurrency?: number;
+    runningTasks?: string[];
+    features?: Array<{
+      id: string;
+      category: string;
+      description: string;
+      status: 'backlog' | 'in_progress' | 'waiting_approval' | 'verified';
+      steps?: string[];
+      startedAt?: string;
+      skipTests?: boolean;
+    }>;
+  }
+): Promise<void> {
+  await page.addInitScript(
+    ({ opts, versions }: { opts: typeof options; versions: typeof STORE_VERSIONS }) => {
+      const mockProject = {
+        id: 'test-project-1',
+        name: 'Test Project',
+        path: '/mock/test-project',
+        lastOpened: new Date().toISOString(),
+      };
+
+      const mockFeatures = opts?.features || [];
+
+      const mockState = {
+        state: {
+          projects: [mockProject],
+          currentProject: mockProject,
+          theme: 'dark',
+          sidebarOpen: true,
+          apiKeys: { anthropic: '', google: '' },
+          chatSessions: [],
+          chatHistoryOpen: false,
+          maxConcurrency: opts?.maxConcurrency ?? 3,
+          isAutoModeRunning: false,
+          runningAutoTasks: opts?.runningTasks ?? [],
+          autoModeActivityLog: [],
+          features: mockFeatures,
+        },
+        version: versions.APP_STORE,
+      };
+
+      localStorage.setItem('automaker-storage', JSON.stringify(mockState));
+
+      const setupState = {
+        state: { isFirstRun: false, setupComplete: true, skipClaudeSetup: false },
+        version: versions.SETUP_STORE,
+      };
+      localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+      const settingsCache = {
+        setupComplete: true,
+        isFirstRun: false,
+        projects: [
+          {
+            id: mockProject.id,
+            name: mockProject.name,
+            path: mockProject.path,
+            lastOpened: mockProject.lastOpened,
+          },
+        ],
+        theme: 'dark',
+        sidebarOpen: true,
+        maxConcurrency: opts?.maxConcurrency ?? 3,
+      };
+      localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+      // Also store features in a global variable that the mock electron API can use
+      (window as { __mockFeatures?: unknown[] }).__mockFeatures = mockFeatures;
+    },
+    { opts: options, versions: STORE_VERSIONS }
+  );
+}
+
+/**
+ * Set up the app store to show setup view (simulate first run)
+ */
+export async function setupFirstRun(page: Page): Promise<void> {
+  await page.addInitScript((versions: typeof STORE_VERSIONS) => {
+    // Clear any existing setup state to simulate first run
+    localStorage.removeItem('automaker-setup');
+    localStorage.removeItem('automaker-storage');
+
+    // Set up the setup store state for first run
+    const setupState = {
+      state: {
+        isFirstRun: true,
+        setupComplete: false,
+        currentStep: 'welcome',
+        claudeCliStatus: null,
+        claudeAuthStatus: null,
+        claudeInstallProgress: {
+          isInstalling: false,
+          currentStep: '',
+          progress: 0,
+          output: [],
+        },
+        skipClaudeSetup: false,
+      },
+      version: versions.SETUP_STORE, // Must match setup-store.ts persist version
+    };
+
+    localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+    // Also set up app store to show setup view
+    const appState = {
+      state: {
+        projects: [],
+        currentProject: null,
+        theme: 'dark',
+        sidebarOpen: true,
+        apiKeys: { anthropic: '', google: '' },
+        chatSessions: [],
+        chatHistoryOpen: false,
+        maxConcurrency: 3,
+        isAutoModeRunning: false,
+        runningAutoTasks: [],
+        autoModeActivityLog: [],
+        currentView: 'setup',
+      },
+      version: versions.APP_STORE, // Must match app-store.ts persist version
+    };
+
+    localStorage.setItem('automaker-storage', JSON.stringify(appState));
+
+    // Anchor the settings cache so CI cannot hydrate a conflicting setupComplete value.
+    const settingsCache = {
+      setupComplete: false,
+      isFirstRun: true,
+      projects: [],
+      theme: 'dark',
+      sidebarOpen: true,
+      maxConcurrency: 3,
+    };
+    localStorage.setItem('automaker-settings-cache', JSON.stringify(settingsCache));
+
+    // Disable splash screen in tests
+    localStorage.setItem('automaker-disable-splash', 'true');
+  }, STORE_VERSIONS);
+}
+
+/**
+ * Set up the app to skip the setup wizard (setup already complete)
+ */
+export async function setupComplete(page: Page): Promise<void> {
+  await page.addInitScript((versions: typeof STORE_VERSIONS) => {
+    // Mark setup as complete
+    const setupState = {
+      state: {
+        isFirstRun: false,
+        setupComplete: true,
+        currentStep: 'complete',
+        skipClaudeSetup: false,
+      },
+      version: versions.SETUP_STORE,
+    };
+
+    localStorage.setItem('automaker-setup', JSON.stringify(setupState));
+
+    // Disable splash screen in tests
+    localStorage.setItem('automaker-disable-splash', 'true');
+  }, STORE_VERSIONS);
+}
diff --git a/temp_repo/apps/ui/tests/utils/views/agent.ts b/temp_repo/apps/ui/tests/utils/views/agent.ts
new file mode 100644
index 0000000000000000000000000000000000000000..da579492b52a0266c8264bb71cae2147120251fa
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/views/agent.ts
@@ -0,0 +1,94 @@
+import { Page, Locator } from '@playwright/test';
+import { waitForElement, waitForSplashScreenToDisappear } from '../core/waiting';
+
+/**
+ * Get the session list element
+ */
+export async function getSessionList(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="session-list"]');
+}
+
+/**
+ * Get the new session button
+ */
+export async function getNewSessionButton(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="new-session-button"]');
+}
+
+/**
+ * Click the new session button
+ */
+export async function clickNewSessionButton(page: Page): Promise<void> {
+  // Wait for splash screen to disappear first (safety net)
+  await waitForSplashScreenToDisappear(page, 3000);
+  // Ensure session list (and thus SessionManager) is visible before clicking
+  const sessionList = page.locator('[data-testid="session-list"]');
+  await sessionList.waitFor({ state: 'visible', timeout: 10000 });
+  const button = await getNewSessionButton(page);
+  await button.click();
+}
+
+/**
+ * Get a session item by its ID
+ */
+export async function getSessionItem(page: Page, sessionId: string): Promise<Locator> {
+  return page.locator(`[data-testid="session-item-${sessionId}"]`);
+}
+
+/**
+ * Click the archive button for a session
+ */
+export async function clickArchiveSession(page: Page, sessionId: string): Promise<void> {
+  const button = page.locator(`[data-testid="archive-session-${sessionId}"]`);
+  await button.click();
+}
+
+/**
+ * Check if the no session placeholder is visible
+ */
+export async function isNoSessionPlaceholderVisible(page: Page): Promise<boolean> {
+  const placeholder = page.locator('[data-testid="no-session-placeholder"]');
+  return await placeholder.isVisible();
+}
+
+/**
+ * Wait for the no session placeholder to be visible
+ */
+export async function waitForNoSessionPlaceholder(
+  page: Page,
+  options?: { timeout?: number }
+): Promise<Locator> {
+  return await waitForElement(page, 'no-session-placeholder', options);
+}
+
+/**
+ * Check if the message list is visible (indicates a session is selected)
+ */
+export async function isMessageListVisible(page: Page): Promise<boolean> {
+  const messageList = page.locator('[data-testid="message-list"]');
+  return await messageList.isVisible();
+}
+
+/**
+ * Count the number of session items in the session list
+ */
+export async function countSessionItems(page: Page): Promise<number> {
+  const sessionList = page.locator('[data-testid="session-list"] [data-testid^="session-item-"]');
+  return await sessionList.count();
+}
+
+/**
+ * Wait for a new session to be created (by checking if a session item appears)
+ * Scopes to session-list to match countSessionItems and avoid matching stale elements
+ */
+export async function waitForNewSession(page: Page, options?: { timeout?: number }): Promise<void> {
+  const timeout = options?.timeout ?? 10000;
+
+  // Ensure session list container is visible first (handles sidebar render delay)
+  const sessionList = page.locator('[data-testid="session-list"]');
+  await sessionList.waitFor({ state: 'visible', timeout });
+
+  // Wait for a session item to appear within the session list
+  const sessionItem = sessionList.locator('[data-testid^="session-item-"]').first();
+  await sessionItem.waitFor({ state: 'visible', timeout });
+}
diff --git a/temp_repo/apps/ui/tests/utils/views/board.ts b/temp_repo/apps/ui/tests/utils/views/board.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1c2b70d1d261529260be35be7a98e053cdfa4de6
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/views/board.ts
@@ -0,0 +1,229 @@
+import { Page, Locator } from '@playwright/test';
+import { DEFAULT_ELEMENT_TIMEOUT_MS } from '../core/waiting';
+
+/**
+ * Get a kanban card by feature ID
+ */
+export async function getKanbanCard(page: Page, featureId: string): Promise<Locator> {
+  return page.locator(`[data-testid="kanban-card-${featureId}"]`);
+}
+
+/**
+ * Get a kanban column by its ID
+ */
+export async function getKanbanColumn(page: Page, columnId: string): Promise<Locator> {
+  return page.locator(`[data-testid="kanban-column-${columnId}"]`);
+}
+
+/**
+ * Get the width of a kanban column
+ */
+export async function getKanbanColumnWidth(page: Page, columnId: string): Promise<number> {
+  const column = page.locator(`[data-testid="kanban-column-${columnId}"]`);
+  const box = await column.boundingBox();
+  return box?.width ?? 0;
+}
+
+/**
+ * Check if a kanban column has CSS columns (masonry) layout
+ */
+export async function hasKanbanColumnMasonryLayout(page: Page, columnId: string): Promise<boolean> {
+  const column = page.locator(`[data-testid="kanban-column-${columnId}"]`);
+  const contentDiv = column.locator('> div').nth(1); // Second child is the content area
+
+  const columnCount = await contentDiv.evaluate((el) => {
+    const style = window.getComputedStyle(el);
+    return style.columnCount;
+  });
+
+  return columnCount === '2';
+}
+
+/**
+ * Drag a kanban card from one column to another
+ */
+export async function dragKanbanCard(
+  page: Page,
+  featureId: string,
+  targetColumnId: string
+): Promise<void> {
+  const dragHandle = page.locator(`[data-testid="drag-handle-${featureId}"]`);
+  const targetColumn = page.locator(`[data-testid="kanban-column-${targetColumnId}"]`);
+
+  // Perform drag and drop
+  await dragHandle.dragTo(targetColumn);
+}
+
+/**
+ * Click the view output button on a kanban card
+ */
+export async function clickViewOutput(page: Page, featureId: string): Promise<void> {
+  // Try the running version first, then the in-progress version
+  const runningBtn = page.locator(`[data-testid="view-output-${featureId}"]`);
+  const inProgressBtn = page.locator(`[data-testid="view-output-inprogress-${featureId}"]`);
+
+  if (await runningBtn.isVisible()) {
+    await runningBtn.click();
+  } else if (await inProgressBtn.isVisible()) {
+    await inProgressBtn.click();
+  } else {
+    throw new Error(`View output button not found for feature ${featureId}`);
+  }
+}
+
+/**
+ * Check if the drag handle is visible for a specific feature card
+ */
+export async function isDragHandleVisibleForFeature(
+  page: Page,
+  featureId: string
+): Promise<boolean> {
+  const dragHandle = page.locator(`[data-testid="drag-handle-${featureId}"]`);
+  return await dragHandle.isVisible().catch(() => false);
+}
+
+/**
+ * Get the drag handle element for a specific feature card
+ */
+export async function getDragHandleForFeature(page: Page, featureId: string): Promise<Locator> {
+  return page.locator(`[data-testid="drag-handle-${featureId}"]`);
+}
+
+// ============================================================================
+// Add Feature Dialog
+// ============================================================================
+
+/**
+ * Click the add feature button
+ */
+export async function clickAddFeature(page: Page): Promise<void> {
+  // There may be multiple add-feature buttons on the page (header, empty state).
+  // Use .first() to click the first visible one.
+  const addButton = page.locator('[data-testid="add-feature-button"]').first();
+  await addButton.waitFor({ state: 'visible', timeout: DEFAULT_ELEMENT_TIMEOUT_MS });
+  await addButton.click({ timeout: 5000 });
+
+  // Wait for dialog to be visible
+  await page.waitForSelector('[data-testid="add-feature-dialog"]', {
+    state: 'visible',
+    timeout: DEFAULT_ELEMENT_TIMEOUT_MS,
+  });
+}
+
+/**
+ * Fill in the add feature dialog
+ */
+export async function fillAddFeatureDialog(
+  page: Page,
+  description: string,
+  options?: { branch?: string; category?: string }
+): Promise<void> {
+  // Fill description (using the dropzone textarea)
+  const descriptionInput = page.locator('[data-testid="add-feature-dialog"] textarea').first();
+  await descriptionInput.fill(description);
+
+  // Fill branch if provided (it's a combobox autocomplete)
+  if (options?.branch) {
+    // First, select "Other branch" radio option if not already selected
+    const otherBranchRadio = page
+      .locator('[data-testid="feature-radio-group"]')
+      .locator('[id="feature-other"]');
+    await otherBranchRadio.waitFor({ state: 'visible', timeout: 5000 });
+    await otherBranchRadio.click();
+
+    // Wait for the branch input to appear after radio click
+    const branchInput = page.locator('[data-testid="feature-input"]');
+    await branchInput.waitFor({ state: 'visible', timeout: 5000 });
+    await branchInput.click();
+    // Wait for the command list popover to open
+    const commandInput = page.locator('[cmdk-input]');
+    await commandInput.waitFor({ state: 'visible', timeout: 5000 });
+    await commandInput.fill(options.branch);
+    // Press Enter to select/create the branch
+    await commandInput.press('Enter');
+    // Wait for popover to close
+    await commandInput.waitFor({ state: 'hidden', timeout: 5000 }).catch(() => {});
+  }
+
+  // Fill category if provided (it's also a combobox autocomplete)
+  if (options?.category) {
+    const categoryButton = page.locator('[data-testid="feature-category-input"]');
+    await categoryButton.click();
+    // Wait for the command list popover to open
+    const commandInput = page.locator('[cmdk-input]');
+    await commandInput.waitFor({ state: 'visible', timeout: 5000 });
+    await commandInput.fill(options.category);
+    await commandInput.press('Enter');
+    // Wait for popover to close
+    await commandInput.waitFor({ state: 'hidden', timeout: 5000 }).catch(() => {});
+  }
+}
+
+/**
+ * Confirm the add feature dialog
+ */
+export async function confirmAddFeature(page: Page): Promise<void> {
+  await page.click('[data-testid="confirm-add-feature"]');
+  // Wait for dialog to close
+  await page.waitForFunction(() => !document.querySelector('[data-testid="add-feature-dialog"]'), {
+    timeout: DEFAULT_ELEMENT_TIMEOUT_MS,
+  });
+}
+
+/**
+ * Add a feature with all steps in one call
+ */
+export async function addFeature(
+  page: Page,
+  description: string,
+  options?: { branch?: string; category?: string }
+): Promise<void> {
+  await clickAddFeature(page);
+  await fillAddFeatureDialog(page, description, options);
+  await confirmAddFeature(page);
+}
+
+// ============================================================================
+// Worktree Selector
+// ============================================================================
+
+/**
+ * Get the worktree selector element
+ */
+export async function getWorktreeSelector(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="worktree-selector"]');
+}
+
+/**
+ * Click on a branch button in the worktree selector
+ */
+export async function selectWorktreeBranch(page: Page, branchName: string): Promise<void> {
+  const branchButton = page.getByRole('button', {
+    name: new RegExp(branchName, 'i'),
+  });
+  await branchButton.click();
+  // Wait for the button to become selected (aria-pressed="true")
+  await branchButton.waitFor({ state: 'visible', timeout: 5000 }).catch(() => {});
+}
+
+/**
+ * Get the currently selected branch in the worktree selector
+ */
+export async function getSelectedWorktreeBranch(page: Page): Promise<string | null> {
+  // The main branch button has aria-pressed="true" when selected
+  const selectedButton = page.locator(
+    '[data-testid="worktree-selector"] button[aria-pressed="true"]'
+  );
+  const text = await selectedButton.textContent().catch(() => null);
+  return text?.trim() || null;
+}
+
+/**
+ * Check if a branch button is visible in the worktree selector
+ */
+export async function isWorktreeBranchVisible(page: Page, branchName: string): Promise<boolean> {
+  const branchButton = page.getByRole('button', {
+    name: new RegExp(branchName, 'i'),
+  });
+  return await branchButton.isVisible().catch(() => false);
+}
diff --git a/temp_repo/apps/ui/tests/utils/views/context.ts b/temp_repo/apps/ui/tests/utils/views/context.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f02c8ba4c9b091ad1187613a6237132346611adb
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/views/context.ts
@@ -0,0 +1,203 @@
+import { Page, Locator } from '@playwright/test';
+import { clickElement, fillInput } from '../core/interactions';
+import { waitForElement, waitForElementHidden } from '../core/waiting';
+import { getByTestId } from '../core/elements';
+import { expect } from '@playwright/test';
+
+/**
+ * Get the context file list element
+ */
+export async function getContextFileList(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="context-file-list"]');
+}
+
+/**
+ * Click on a context file in the list
+ */
+export async function clickContextFile(page: Page, fileName: string): Promise<void> {
+  const fileButton = page.locator(`[data-testid="context-file-${fileName}"]`);
+  await fileButton.click();
+}
+
+/**
+ * Get the context editor element
+ */
+export async function getContextEditor(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="context-editor"]');
+}
+
+/**
+ * Get the context editor content
+ */
+export async function getContextEditorContent(page: Page): Promise<string> {
+  const editor = await getByTestId(page, 'context-editor');
+  return await editor.inputValue();
+}
+
+/**
+ * Set the context editor content
+ */
+export async function setContextEditorContent(page: Page, content: string): Promise<void> {
+  const editor = await getByTestId(page, 'context-editor');
+  await editor.fill(content);
+}
+
+/**
+ * Open the add context file dialog
+ */
+export async function openAddContextFileDialog(page: Page): Promise<void> {
+  await clickElement(page, 'add-context-file');
+  await waitForElement(page, 'add-context-dialog');
+}
+
+/**
+ * Create a text context file via the UI
+ */
+export async function createContextFile(
+  page: Page,
+  filename: string,
+  content: string
+): Promise<void> {
+  await openAddContextFileDialog(page);
+  await clickElement(page, 'add-text-type');
+  await fillInput(page, 'new-file-name', filename);
+  await fillInput(page, 'new-file-content', content);
+  await clickElement(page, 'confirm-add-file');
+  await waitForElementHidden(page, 'add-context-dialog');
+}
+
+/**
+ * Create an image context file via the UI
+ */
+export async function createContextImage(
+  page: Page,
+  filename: string,
+  imagePath: string
+): Promise<void> {
+  await openAddContextFileDialog(page);
+  await clickElement(page, 'add-image-type');
+  await fillInput(page, 'new-file-name', filename);
+  await page.setInputFiles('[data-testid="image-upload-input"]', imagePath);
+  await clickElement(page, 'confirm-add-file');
+  await waitForElementHidden(page, 'add-context-dialog');
+}
+
+/**
+ * Delete a context file via the UI (must be selected first)
+ */
+export async function deleteSelectedContextFile(page: Page): Promise<void> {
+  await clickElement(page, 'delete-context-file');
+  await waitForElement(page, 'delete-context-dialog');
+  // Click the confirm button scoped to the dialog to avoid multiple matches
+  const dialog = page.locator('[data-testid="delete-context-dialog"]');
+  await dialog.locator('[data-testid="confirm-delete-file"]').click();
+  // Wait for dialog to close (server delete can take a moment)
+  await waitForElementHidden(page, 'delete-context-dialog', { timeout: 15000 });
+}
+
+/**
+ * Save the current context file
+ */
+export async function saveContextFile(page: Page): Promise<void> {
+  await clickElement(page, 'save-context-file');
+  // Wait for save to complete across desktop/mobile variants
+  // On desktop: button text shows "Saved"
+  // On mobile: icon-only button uses aria-label or title
+  await page.waitForFunction(
+    () => {
+      const btn = document.querySelector('[data-testid="save-context-file"]');
+      if (!btn) return false;
+      const stateText = [
+        btn.textContent ?? '',
+        btn.getAttribute('aria-label') ?? '',
+        btn.getAttribute('title') ?? '',
+      ]
+        .join(' ')
+        .toLowerCase();
+      return stateText.includes('saved');
+    },
+    { timeout: 5000 }
+  );
+}
+
+/**
+ * Toggle markdown preview mode
+ */
+export async function toggleContextPreviewMode(page: Page): Promise<void> {
+  await clickElement(page, 'toggle-preview-mode');
+}
+
+/**
+ * Wait for a specific file to appear in the context file list
+ * Uses retry mechanism to handle race conditions with API/UI updates.
+ * On mobile, scrolls the file list into view first so new items are visible.
+ */
+export async function waitForContextFile(
+  page: Page,
+  filename: string,
+  timeout: number = 20000
+): Promise<void> {
+  // Ensure file list is in view (helps on mobile when list is scrollable)
+  const fileList = page.locator('[data-testid="context-file-list"]');
+  await fileList.scrollIntoViewIfNeeded().catch(() => {});
+
+  const locator = page.locator(`[data-testid="context-file-${filename}"]`);
+  // Use a longer per-attempt timeout so slow API/state updates can complete
+  await expect(locator).toBeVisible({ timeout });
+}
+
+/**
+ * Click a file in the list and wait for it to be selected (toolbar visible)
+ * Uses retry mechanism to handle race conditions where element is visible but not yet interactive
+ */
+export async function selectContextFile(
+  page: Page,
+  filename: string,
+  timeout: number = 15000
+): Promise<void> {
+  const fileButton = await getByTestId(page, `context-file-${filename}`);
+
+  // Retry click + wait for content panel to handle timing issues
+  // Note: On mobile, delete button is hidden, so we wait for content panel instead
+  await expect(async () => {
+    // Use JavaScript click to ensure React onClick handler fires
+    await fileButton.evaluate((el) => (el as HTMLButtonElement).click());
+    // Wait for content to appear (editor, preview, or image)
+    const contentLocator = page.locator(
+      '[data-testid="context-editor"], [data-testid="markdown-preview"], [data-testid="image-preview"]'
+    );
+    await expect(contentLocator).toBeVisible();
+  }).toPass({ timeout, intervals: [200, 500, 1000] });
+}
+
+/**
+ * Wait for file content panel to load (either editor, preview, or image)
+ * Uses retry mechanism to handle race conditions with file selection
+ */
+export async function waitForFileContentToLoad(page: Page, timeout: number = 15000): Promise<void> {
+  await expect(async () => {
+    const contentLocator = page.locator(
+      '[data-testid="context-editor"], [data-testid="markdown-preview"], [data-testid="image-preview"]'
+    );
+    await expect(contentLocator).toBeVisible();
+  }).toPass({ timeout, intervals: [200, 500, 1000] });
+}
+
+/**
+ * Switch from preview mode to edit mode for markdown files
+ * Markdown files open in preview mode by default, this helper switches to edit mode
+ */
+export async function switchToEditMode(page: Page): Promise<void> {
+  // First wait for content to load
+  await waitForFileContentToLoad(page);
+
+  const markdownPreview = await getByTestId(page, 'markdown-preview');
+  const isPreview = await markdownPreview.isVisible().catch(() => false);
+
+  if (isPreview) {
+    await clickElement(page, 'toggle-preview-mode');
+    await page.waitForSelector('[data-testid="context-editor"]', {
+      timeout: 5000,
+    });
+  }
+}
diff --git a/temp_repo/apps/ui/tests/utils/views/memory.ts b/temp_repo/apps/ui/tests/utils/views/memory.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bf09211f01e2db9b2f8e50dfad86a68385a2432e
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/views/memory.ts
@@ -0,0 +1,286 @@
+import { Page, Locator } from '@playwright/test';
+import {
+  clickElement,
+  fillInput,
+  handleLoginScreenIfPresent,
+  closeDialogWithEscape,
+} from '../core/interactions';
+import { waitForElement, waitForElementHidden } from '../core/waiting';
+import { getByTestId } from '../core/elements';
+import { expect } from '@playwright/test';
+import { authenticateForTests } from '../api/client';
+
+/**
+ * Get the memory file list element
+ */
+export async function getMemoryFileList(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="memory-file-list"]');
+}
+
+/**
+ * Click on a memory file in the list
+ */
+export async function clickMemoryFile(page: Page, fileName: string): Promise<void> {
+  const fileButton = page.locator(`[data-testid="memory-file-${fileName}"]`);
+  await fileButton.click();
+}
+
+/**
+ * Get the memory editor element
+ */
+export async function getMemoryEditor(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="memory-editor"]');
+}
+
+/**
+ * Get the memory editor content
+ */
+export async function getMemoryEditorContent(page: Page): Promise<string> {
+  const editor = await getByTestId(page, 'memory-editor');
+  return await editor.inputValue();
+}
+
+/**
+ * Set the memory editor content
+ */
+export async function setMemoryEditorContent(page: Page, content: string): Promise<void> {
+  const editor = await getByTestId(page, 'memory-editor');
+  await editor.fill(content);
+}
+
+/**
+ * Open the create memory file dialog
+ */
+export async function openCreateMemoryDialog(page: Page): Promise<void> {
+  await clickElement(page, 'create-memory-button');
+  await waitForElement(page, 'create-memory-dialog');
+}
+
+/**
+ * Create a memory file via the UI
+ */
+export async function createMemoryFile(
+  page: Page,
+  filename: string,
+  content: string
+): Promise<void> {
+  await openCreateMemoryDialog(page);
+  await fillInput(page, 'new-memory-name', filename);
+  await fillInput(page, 'new-memory-content', content);
+  await clickElement(page, 'confirm-create-memory');
+  await waitForElementHidden(page, 'create-memory-dialog');
+}
+
+/**
+ * Delete a memory file via the UI (must be selected first)
+ */
+export async function deleteSelectedMemoryFile(page: Page): Promise<void> {
+  await clickElement(page, 'delete-memory-file');
+  await waitForElement(page, 'delete-memory-dialog');
+  await clickElement(page, 'confirm-delete-memory');
+  await waitForElementHidden(page, 'delete-memory-dialog');
+}
+
+/**
+ * Save the current memory file
+ */
+export async function saveMemoryFile(page: Page): Promise<void> {
+  await clickElement(page, 'save-memory-file');
+  // Wait for save to complete across desktop/mobile variants
+  // On desktop: button text shows "Saved"
+  // On mobile: icon-only button uses aria-label or title
+  await page.waitForFunction(
+    () => {
+      const btn = document.querySelector('[data-testid="save-memory-file"]');
+      if (!btn) return false;
+      const stateText = [
+        btn.textContent ?? '',
+        btn.getAttribute('aria-label') ?? '',
+        btn.getAttribute('title') ?? '',
+      ]
+        .join(' ')
+        .toLowerCase();
+      return stateText.includes('saved');
+    },
+    { timeout: 5000 }
+  );
+}
+
+/**
+ * Toggle markdown preview mode
+ */
+export async function toggleMemoryPreviewMode(page: Page): Promise<void> {
+  await clickElement(page, 'toggle-preview-mode');
+}
+
+/**
+ * Wait for a specific file to appear in the memory file list
+ * Uses retry mechanism to handle race conditions with API/UI updates
+ */
+export async function waitForMemoryFile(
+  page: Page,
+  filename: string,
+  timeout: number = 15000
+): Promise<void> {
+  await expect(async () => {
+    const locator = page.locator(`[data-testid="memory-file-${filename}"]`);
+    await expect(locator).toBeVisible();
+  }).toPass({ timeout, intervals: [200, 500, 1000] });
+}
+
+/**
+ * Click a file in the list and wait for it to be selected (toolbar visible)
+ * Uses retry mechanism to handle race conditions where element is visible but not yet interactive
+ */
+export async function selectMemoryFile(
+  page: Page,
+  filename: string,
+  timeout: number = 15000
+): Promise<void> {
+  const fileButton = await getByTestId(page, `memory-file-${filename}`);
+
+  // Retry click + wait for content panel to handle timing issues
+  // Note: On mobile, delete button is hidden, so we wait for content panel instead
+  // Use shorter inner timeout so retries can run; loadFileContent is async (API read)
+  const innerTimeout = Math.min(2000, Math.floor(timeout / 3));
+  await expect(async () => {
+    // Use JavaScript click to ensure React onClick handler fires
+    await fileButton.evaluate((el) => (el as HTMLButtonElement).click());
+    // Wait for content to appear (editor or preview)
+    const contentLocator = page.locator(
+      '[data-testid="memory-editor"], [data-testid="markdown-preview"]'
+    );
+    await expect(contentLocator).toBeVisible({ timeout: innerTimeout });
+  }).toPass({ timeout, intervals: [200, 500, 1000] });
+}
+
+/**
+ * Wait for file content panel to load (either editor or preview)
+ * Uses retry mechanism to handle race conditions with file selection
+ */
+export async function waitForMemoryContentToLoad(
+  page: Page,
+  timeout: number = 15000
+): Promise<void> {
+  const innerTimeout = Math.min(2000, Math.floor(timeout / 3));
+  await expect(async () => {
+    const contentLocator = page.locator(
+      '[data-testid="memory-editor"], [data-testid="markdown-preview"]'
+    );
+    await expect(contentLocator).toBeVisible({ timeout: innerTimeout });
+  }).toPass({ timeout, intervals: [200, 500, 1000] });
+}
+
+/**
+ * Switch from preview mode to edit mode for memory files
+ * Memory files open in preview mode by default, this helper switches to edit mode
+ */
+export async function switchMemoryToEditMode(page: Page): Promise<void> {
+  // First wait for content to load
+  await waitForMemoryContentToLoad(page);
+
+  const markdownPreview = await getByTestId(page, 'markdown-preview');
+  const isPreview = await markdownPreview.isVisible().catch(() => false);
+
+  if (isPreview) {
+    await clickElement(page, 'toggle-preview-mode');
+    await page.waitForSelector('[data-testid="memory-editor"]', {
+      timeout: 5000,
+    });
+  }
+}
+
+/**
+ * Refresh the memory file list (clicks the Refresh button).
+ * Use instead of page.reload() to avoid ERR_CONNECTION_REFUSED when the dev server
+ * is under load, and to match real user behavior.
+ */
+export async function refreshMemoryList(page: Page): Promise<void> {
+  // Desktop: refresh button is visible; mobile: open panel then click mobile refresh
+  const desktopRefresh = page.locator('[data-testid="refresh-memory-button"]');
+  const mobileRefresh = page.locator('[data-testid="refresh-memory-button-mobile"]');
+  if (await desktopRefresh.isVisible().catch(() => false)) {
+    await desktopRefresh.click();
+  } else {
+    await clickElement(page, 'header-actions-panel-trigger');
+    await mobileRefresh.click();
+  }
+  // Allow list to re-fetch
+  await page.waitForTimeout(150);
+}
+
+/**
+ * Navigate to the memory view
+ * Note: Navigates directly to /memory since index route shows WelcomeView
+ */
+export async function navigateToMemory(page: Page): Promise<void> {
+  // Authenticate before navigating (fast-path: skips if already authed via storageState)
+  await authenticateForTests(page);
+
+  // Navigate directly to /memory route
+  await page.goto('/memory', { waitUntil: 'domcontentloaded' });
+
+  // Handle login redirect if needed (e.g. when redirected to /logged-out)
+  await handleLoginScreenIfPresent(page);
+
+  // Wait for one of: memory-view, memory-view-no-project, or memory-view-loading.
+  // Store hydration and loadMemoryFiles can be async, so we accept any of these first.
+  const viewSelector =
+    '[data-testid="memory-view"], [data-testid="memory-view-no-project"], [data-testid="memory-view-loading"]';
+  await page.locator(viewSelector).first().waitFor({ state: 'visible', timeout: 15000 });
+
+  // If we see "no project", give hydration a moment then re-check (avoids flake when store hydrates after first paint).
+  const noProject = page.locator('[data-testid="memory-view-no-project"]');
+  if (await noProject.isVisible().catch(() => false)) {
+    // Poll for the view to appear rather than a fixed timeout
+    await page
+      .locator('[data-testid="memory-view"], [data-testid="memory-view-loading"]')
+      .first()
+      .waitFor({ state: 'visible', timeout: 5000 })
+      .catch(() => {
+        throw new Error(
+          'Memory view showed "No project selected". Ensure setupProjectWithFixture runs before navigateToMemory and store has time to hydrate.'
+        );
+      });
+  }
+
+  // Wait for loading to complete (if present)
+  const loadingElement = page.locator('[data-testid="memory-view-loading"]');
+  if (await loadingElement.isVisible().catch(() => false)) {
+    await loadingElement.waitFor({ state: 'hidden', timeout: 10000 });
+  }
+
+  // Wait for the memory view to be visible
+  await waitForElement(page, 'memory-view', { timeout: 15000 });
+
+  // On mobile, close the sidebar if open so the header actions trigger is clickable (not covered by backdrop)
+  // Use JavaScript click to avoid force:true hitting the sidebar (z-30) instead of the backdrop (z-20)
+  const backdrop = page.locator('[data-testid="sidebar-backdrop"]');
+  if (await backdrop.isVisible().catch(() => false)) {
+    await backdrop.evaluate((el) => (el as HTMLElement).click());
+  }
+
+  // Dismiss any open dialog that may block interactions (e.g. sandbox warning, onboarding).
+  // The sandbox dialog blocks Escape, so click "I Accept the Risks" if it becomes visible within 1s.
+  const sandboxAcceptBtn = page.locator('button:has-text("I Accept the Risks")');
+  const sandboxVisible = await sandboxAcceptBtn
+    .waitFor({ state: 'visible', timeout: 1000 })
+    .then(() => true)
+    .catch(() => false);
+  if (sandboxVisible) {
+    await sandboxAcceptBtn.click();
+    await page
+      .locator('[role="dialog"][data-state="open"]')
+      .first()
+      .waitFor({ state: 'hidden', timeout: 3000 })
+      .catch(() => {});
+  } else {
+    await closeDialogWithEscape(page, { timeout: 2000 });
+  }
+
+  // Ensure the header (and actions panel trigger on mobile) is interactive
+  await page
+    .locator('[data-testid="header-actions-panel-trigger"]')
+    .waitFor({ state: 'visible', timeout: 5000 })
+    .catch(() => {});
+}
diff --git a/temp_repo/apps/ui/tests/utils/views/profiles.ts b/temp_repo/apps/ui/tests/utils/views/profiles.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d03e1c3454d31cf10d528eae38b9de40980bb8b7
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/views/profiles.ts
@@ -0,0 +1,522 @@
+import { Page, Locator } from '@playwright/test';
+import { clickElement, fillInput } from '../core/interactions';
+import { waitForElement, waitForElementHidden } from '../core/waiting';
+import { getByTestId } from '../core/elements';
+import { navigateToView } from '../navigation/views';
+
+/**
+ * Navigate to the profiles view
+ */
+export async function navigateToProfiles(page: Page): Promise<void> {
+  // Click the profiles navigation button
+  await navigateToView(page, 'profiles');
+
+  // Wait for profiles view to be visible
+  await page.waitForSelector('[data-testid="profiles-view"]', {
+    state: 'visible',
+    timeout: 10000,
+  });
+}
+
+// ============================================================================
+// Profile List Operations
+// ============================================================================
+
+/**
+ * Get a specific profile card by ID
+ */
+export async function getProfileCard(page: Page, profileId: string): Promise<Locator> {
+  return getByTestId(page, `profile-card-${profileId}`);
+}
+
+/**
+ * Get all profile cards (both built-in and custom)
+ */
+export async function getProfileCards(page: Page): Promise<Locator> {
+  return page.locator('[data-testid^="profile-card-"]');
+}
+
+/**
+ * Get only custom profile cards
+ */
+export async function getCustomProfiles(page: Page): Promise<Locator> {
+  // Custom profiles don't have the "Built-in" badge
+  return page.locator('[data-testid^="profile-card-"]').filter({
+    hasNot: page.locator('text="Built-in"'),
+  });
+}
+
+/**
+ * Get only built-in profile cards
+ */
+export async function getBuiltInProfiles(page: Page): Promise<Locator> {
+  // Built-in profiles have the lock icon and "Built-in" text
+  return page.locator('[data-testid^="profile-card-"]:has-text("Built-in")');
+}
+
+/**
+ * Count the number of custom profiles
+ */
+export async function countCustomProfiles(page: Page): Promise<number> {
+  const customProfiles = await getCustomProfiles(page);
+  return customProfiles.count();
+}
+
+/**
+ * Count the number of built-in profiles
+ */
+export async function countBuiltInProfiles(page: Page): Promise<number> {
+  const builtInProfiles = await getBuiltInProfiles(page);
+  return await builtInProfiles.count();
+}
+
+/**
+ * Get all custom profile IDs
+ */
+export async function getCustomProfileIds(page: Page): Promise<string[]> {
+  const allCards = await page.locator('[data-testid^="profile-card-"]').all();
+  const customIds: string[] = [];
+
+  for (const card of allCards) {
+    const builtInText = card.locator('text="Built-in"');
+    const isBuiltIn = (await builtInText.count()) > 0;
+    if (!isBuiltIn) {
+      const testId = await card.getAttribute('data-testid');
+      if (testId) {
+        // Extract ID from "profile-card-{id}"
+        const profileId = testId.replace('profile-card-', '');
+        customIds.push(profileId);
+      }
+    }
+  }
+
+  return customIds;
+}
+
+/**
+ * Get the first custom profile ID (useful after creating a profile)
+ */
+export async function getFirstCustomProfileId(page: Page): Promise<string | null> {
+  const ids = await getCustomProfileIds(page);
+  return ids.length > 0 ? ids[0] : null;
+}
+
+// ============================================================================
+// CRUD Operations
+// ============================================================================
+
+/**
+ * Click the "New Profile" button in the header
+ */
+export async function clickNewProfileButton(page: Page): Promise<void> {
+  await clickElement(page, 'add-profile-button');
+  await waitForElement(page, 'add-profile-dialog');
+}
+
+/**
+ * Click the empty state card to create a new profile
+ */
+export async function clickEmptyState(page: Page): Promise<void> {
+  const emptyState = page.locator(
+    '.group.rounded-xl.border.border-dashed[class*="cursor-pointer"]'
+  );
+  await emptyState.click();
+  await waitForElement(page, 'add-profile-dialog');
+}
+
+/**
+ * Fill the profile form with data
+ */
+export async function fillProfileForm(
+  page: Page,
+  data: {
+    name?: string;
+    description?: string;
+    icon?: string;
+    model?: string;
+    thinkingLevel?: string;
+  }
+): Promise<void> {
+  if (data.name !== undefined) {
+    await fillProfileName(page, data.name);
+  }
+  if (data.description !== undefined) {
+    await fillProfileDescription(page, data.description);
+  }
+  if (data.icon !== undefined) {
+    await selectIcon(page, data.icon);
+  }
+  if (data.model !== undefined) {
+    await selectModel(page, data.model);
+  }
+  if (data.thinkingLevel !== undefined) {
+    await selectThinkingLevel(page, data.thinkingLevel);
+  }
+}
+
+/**
+ * Click the save button to create/update a profile
+ */
+export async function saveProfile(page: Page): Promise<void> {
+  await clickElement(page, 'save-profile-button');
+  // Wait for dialog to close
+  await waitForElementHidden(page, 'add-profile-dialog').catch(() => {});
+  await waitForElementHidden(page, 'edit-profile-dialog').catch(() => {});
+}
+
+/**
+ * Click the cancel button in the profile dialog
+ */
+export async function cancelProfileDialog(page: Page): Promise<void> {
+  // Look for cancel button in dialog footer
+  const cancelButton = page.locator('button:has-text("Cancel")');
+  await cancelButton.click();
+  // Wait for dialog to close
+  await waitForElementHidden(page, 'add-profile-dialog').catch(() => {});
+  await waitForElementHidden(page, 'edit-profile-dialog').catch(() => {});
+}
+
+/**
+ * Click the edit button for a specific profile
+ */
+export async function clickEditProfile(page: Page, profileId: string): Promise<void> {
+  await clickElement(page, `edit-profile-${profileId}`);
+  await waitForElement(page, 'edit-profile-dialog');
+}
+
+/**
+ * Click the delete button for a specific profile
+ */
+export async function clickDeleteProfile(page: Page, profileId: string): Promise<void> {
+  await clickElement(page, `delete-profile-${profileId}`);
+  await waitForElement(page, 'delete-profile-confirm-dialog');
+}
+
+/**
+ * Confirm profile deletion in the dialog
+ */
+export async function confirmDeleteProfile(page: Page): Promise<void> {
+  await clickElement(page, 'confirm-delete-profile-button');
+  await waitForElementHidden(page, 'delete-profile-confirm-dialog');
+}
+
+/**
+ * Cancel profile deletion
+ */
+export async function cancelDeleteProfile(page: Page): Promise<void> {
+  await clickElement(page, 'cancel-delete-button');
+  await waitForElementHidden(page, 'delete-profile-confirm-dialog');
+}
+
+// ============================================================================
+// Form Field Operations
+// ============================================================================
+
+/**
+ * Fill the profile name field
+ */
+export async function fillProfileName(page: Page, name: string): Promise<void> {
+  await fillInput(page, 'profile-name-input', name);
+}
+
+/**
+ * Fill the profile description field
+ */
+export async function fillProfileDescription(page: Page, description: string): Promise<void> {
+  await fillInput(page, 'profile-description-input', description);
+}
+
+/**
+ * Select an icon for the profile
+ * @param iconName - Name of the icon: Brain, Zap, Scale, Cpu, Rocket, Sparkles
+ */
+export async function selectIcon(page: Page, iconName: string): Promise<void> {
+  await clickElement(page, `icon-select-${iconName}`);
+}
+
+/**
+ * Select a model for the profile
+ * @param modelId - Model ID: haiku, sonnet, opus
+ */
+export async function selectModel(page: Page, modelId: string): Promise<void> {
+  await clickElement(page, `model-select-${modelId}`);
+}
+
+/**
+ * Select a thinking level for the profile
+ * @param level - Thinking level: none, low, medium, high, ultrathink
+ */
+export async function selectThinkingLevel(page: Page, level: string): Promise<void> {
+  await clickElement(page, `thinking-select-${level}`);
+}
+
+/**
+ * Get the currently selected icon
+ */
+export async function getSelectedIcon(page: Page): Promise<string | null> {
+  // Find the icon button with primary background
+  const selectedIcon = page.locator('[data-testid^="icon-select-"][class*="bg-primary"]');
+  const testId = await selectedIcon.getAttribute('data-testid');
+  return testId ? testId.replace('icon-select-', '') : null;
+}
+
+/**
+ * Get the currently selected model
+ */
+export async function getSelectedModel(page: Page): Promise<string | null> {
+  // Find the model button with primary background
+  const selectedModel = page.locator('[data-testid^="model-select-"][class*="bg-primary"]');
+  const testId = await selectedModel.getAttribute('data-testid');
+  return testId ? testId.replace('model-select-', '') : null;
+}
+
+/**
+ * Get the currently selected thinking level
+ */
+export async function getSelectedThinkingLevel(page: Page): Promise<string | null> {
+  // Find the thinking level button with amber background
+  const selectedLevel = page.locator('[data-testid^="thinking-select-"][class*="bg-amber-500"]');
+  const testId = await selectedLevel.getAttribute('data-testid');
+  return testId ? testId.replace('thinking-select-', '') : null;
+}
+
+// ============================================================================
+// Dialog Operations
+// ============================================================================
+
+/**
+ * Check if the add profile dialog is open
+ */
+export async function isAddProfileDialogOpen(page: Page): Promise<boolean> {
+  const dialog = await getByTestId(page, 'add-profile-dialog');
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Check if the edit profile dialog is open
+ */
+export async function isEditProfileDialogOpen(page: Page): Promise<boolean> {
+  const dialog = await getByTestId(page, 'edit-profile-dialog');
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Check if the delete confirmation dialog is open
+ */
+export async function isDeleteConfirmDialogOpen(page: Page): Promise<boolean> {
+  const dialog = await getByTestId(page, 'delete-profile-confirm-dialog');
+  return await dialog.isVisible().catch(() => false);
+}
+
+/**
+ * Wait for any profile dialog to close
+ * This ensures all dialog animations complete before proceeding
+ */
+export async function waitForDialogClose(page: Page): Promise<void> {
+  // Wait for all profile dialogs to be hidden
+  await Promise.all([
+    waitForElementHidden(page, 'add-profile-dialog').catch(() => {}),
+    waitForElementHidden(page, 'edit-profile-dialog').catch(() => {}),
+    waitForElementHidden(page, 'delete-profile-confirm-dialog').catch(() => {}),
+  ]);
+
+  // Also wait for any Radix dialog overlay to be removed (handles animation)
+  await page
+    .locator('[data-radix-dialog-overlay]')
+    .waitFor({ state: 'hidden', timeout: 2000 })
+    .catch(() => {
+      // Overlay may not exist
+    });
+}
+
+// ============================================================================
+// Profile Card Inspection
+// ============================================================================
+
+/**
+ * Get the profile name from a card
+ */
+export async function getProfileName(page: Page, profileId: string): Promise<string> {
+  const card = await getProfileCard(page, profileId);
+  const nameElement = card.locator('h3');
+  return await nameElement.textContent().then((text) => text?.trim() || '');
+}
+
+/**
+ * Get the profile description from a card
+ */
+export async function getProfileDescription(page: Page, profileId: string): Promise<string> {
+  const card = await getProfileCard(page, profileId);
+  const descElement = card.locator('p').first();
+  return await descElement.textContent().then((text) => text?.trim() || '');
+}
+
+/**
+ * Get the profile model badge text from a card
+ */
+export async function getProfileModel(page: Page, profileId: string): Promise<string> {
+  const card = await getProfileCard(page, profileId);
+  const modelBadge = card.locator(
+    'span[class*="border-primary"]:has-text("haiku"), span[class*="border-primary"]:has-text("sonnet"), span[class*="border-primary"]:has-text("opus")'
+  );
+  return await modelBadge.textContent().then((text) => text?.trim() || '');
+}
+
+/**
+ * Get the profile thinking level badge text from a card
+ */
+export async function getProfileThinkingLevel(
+  page: Page,
+  profileId: string
+): Promise<string | null> {
+  const card = await getProfileCard(page, profileId);
+  const thinkingBadge = card.locator('span[class*="border-amber-500"]');
+  const isVisible = await thinkingBadge.isVisible().catch(() => false);
+  if (!isVisible) return null;
+  return await thinkingBadge.textContent().then((text) => text?.trim() || '');
+}
+
+/**
+ * Check if a profile has the built-in badge
+ */
+export async function isBuiltInProfile(page: Page, profileId: string): Promise<boolean> {
+  const card = await getProfileCard(page, profileId);
+  const builtInBadge = card.locator('span:has-text("Built-in")');
+  return await builtInBadge.isVisible().catch(() => false);
+}
+
+/**
+ * Check if the edit button is visible for a profile
+ */
+export async function isEditButtonVisible(page: Page, profileId: string): Promise<boolean> {
+  const card = await getProfileCard(page, profileId);
+  // Hover over card to make buttons visible
+  await card.hover();
+  const editButton = await getByTestId(page, `edit-profile-${profileId}`);
+  // Wait for button to become visible after hover (handles CSS transition)
+  try {
+    await editButton.waitFor({ state: 'visible', timeout: 2000 });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if the delete button is visible for a profile
+ */
+export async function isDeleteButtonVisible(page: Page, profileId: string): Promise<boolean> {
+  const card = await getProfileCard(page, profileId);
+  // Hover over card to make buttons visible
+  await card.hover();
+  const deleteButton = await getByTestId(page, `delete-profile-${profileId}`);
+  // Wait for button to become visible after hover (handles CSS transition)
+  try {
+    await deleteButton.waitFor({ state: 'visible', timeout: 2000 });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// ============================================================================
+// Drag & Drop
+// ============================================================================
+
+/**
+ * Drag a profile from one position to another
+ * Uses the drag handle and dnd-kit library pattern
+ *
+ * Note: dnd-kit requires pointer events with specific timing for drag recognition.
+ * Manual mouse operations are needed because Playwright's dragTo doesn't work
+ * reliably with dnd-kit's pointer-based drag detection.
+ *
+ * @param fromIndex - 0-based index of the profile to drag
+ * @param toIndex - 0-based index of the target position
+ */
+export async function dragProfile(page: Page, fromIndex: number, toIndex: number): Promise<void> {
+  // Get all profile cards
+  const cards = await page.locator('[data-testid^="profile-card-"]').all();
+
+  if (fromIndex >= cards.length || toIndex >= cards.length) {
+    throw new Error(
+      `Invalid drag indices: fromIndex=${fromIndex}, toIndex=${toIndex}, total=${cards.length}`
+    );
+  }
+
+  const fromCard = cards[fromIndex];
+  const toCard = cards[toIndex];
+
+  // Get the drag handle within the source card
+  const dragHandle = fromCard.locator('[data-testid^="profile-drag-handle-"]');
+
+  // Ensure drag handle is visible and ready
+  await dragHandle.waitFor({ state: 'visible', timeout: 5000 });
+
+  // Get bounding boxes
+  const handleBox = await dragHandle.boundingBox();
+  const toBox = await toCard.boundingBox();
+
+  if (!handleBox || !toBox) {
+    throw new Error('Unable to get bounding boxes for drag operation');
+  }
+
+  // Start position (center of drag handle)
+  const startX = handleBox.x + handleBox.width / 2;
+  const startY = handleBox.y + handleBox.height / 2;
+
+  // End position (center of target card)
+  const endX = toBox.x + toBox.width / 2;
+  const endY = toBox.y + toBox.height / 2;
+
+  // Perform manual drag operation
+  // dnd-kit needs pointer events in a specific sequence
+  await page.mouse.move(startX, startY);
+  await page.mouse.down();
+
+  // dnd-kit requires a brief hold before recognizing the drag gesture
+  // This is a library requirement, not an arbitrary timeout
+  await page.waitForTimeout(150);
+
+  // Move to target in steps for smoother drag recognition
+  await page.mouse.move(endX, endY, { steps: 10 });
+
+  // Brief pause before drop
+  await page.waitForTimeout(100);
+
+  await page.mouse.up();
+
+  // Wait for reorder animation to complete
+  await page.waitForTimeout(200);
+}
+
+/**
+ * Get the current order of all profile IDs
+ * Returns array of profile IDs in display order
+ */
+export async function getProfileOrder(page: Page): Promise<string[]> {
+  const cards = await page.locator('[data-testid^="profile-card-"]').all();
+  const ids: string[] = [];
+
+  for (const card of cards) {
+    const testId = await card.getAttribute('data-testid');
+    if (testId) {
+      // Extract profile ID from data-testid="profile-card-{id}"
+      const profileId = testId.replace('profile-card-', '');
+      ids.push(profileId);
+    }
+  }
+
+  return ids;
+}
+
+// ============================================================================
+// Header Actions
+// ============================================================================
+
+/**
+ * Click the "Refresh Defaults" button
+ */
+export async function clickRefreshDefaults(page: Page): Promise<void> {
+  await clickElement(page, 'refresh-profiles-button');
+}
diff --git a/temp_repo/apps/ui/tests/utils/views/settings.ts b/temp_repo/apps/ui/tests/utils/views/settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..47ca4489e5f1bc4c1800dd90237a00354a7c35b0
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/views/settings.ts
@@ -0,0 +1,8 @@
+import { Page, Locator } from '@playwright/test';
+
+/**
+ * Get the settings view scrollable content area
+ */
+export async function getSettingsContentArea(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="settings-view"] .overflow-y-auto');
+}
diff --git a/temp_repo/apps/ui/tests/utils/views/setup.ts b/temp_repo/apps/ui/tests/utils/views/setup.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fd7a5bce7a292f6e542b392caf6648fbab1e31c5
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/views/setup.ts
@@ -0,0 +1,68 @@
+import { Page, Locator } from '@playwright/test';
+import { getByTestId } from '../core/elements';
+import { waitForElement } from '../core/waiting';
+
+/**
+ * Wait for setup view to be visible
+ */
+export async function waitForSetupView(page: Page): Promise<Locator> {
+  return waitForElement(page, 'setup-view', { timeout: 10000 });
+}
+
+/**
+ * Click "Get Started" button on setup welcome step
+ */
+export async function clickSetupGetStarted(page: Page): Promise<void> {
+  const button = await getByTestId(page, 'setup-start-button');
+  await button.click();
+}
+
+/**
+ * Click continue on Claude setup step
+ */
+export async function clickClaudeContinue(page: Page): Promise<void> {
+  const button = await getByTestId(page, 'claude-next-button');
+  await button.click();
+}
+
+/**
+ * Click finish on setup complete step
+ */
+export async function clickSetupFinish(page: Page): Promise<void> {
+  const button = await getByTestId(page, 'setup-finish-button');
+  await button.click();
+}
+
+/**
+ * Enter Anthropic API key in setup
+ */
+export async function enterAnthropicApiKey(page: Page, apiKey: string): Promise<void> {
+  // Click "Use Anthropic API Key Instead" button
+  const useApiKeyButton = await getByTestId(page, 'use-api-key-button');
+  await useApiKeyButton.click();
+
+  // Enter the API key
+  const input = await getByTestId(page, 'anthropic-api-key-input');
+  await input.fill(apiKey);
+
+  // Click save button
+  const saveButton = await getByTestId(page, 'save-anthropic-key-button');
+  await saveButton.click();
+}
+
+/**
+ * Enter OpenAI API key in setup
+ */
+export async function enterOpenAIApiKey(page: Page, apiKey: string): Promise<void> {
+  // Click "Enter OpenAI API Key" button
+  const useApiKeyButton = await getByTestId(page, 'use-openai-key-button');
+  await useApiKeyButton.click();
+
+  // Enter the API key
+  const input = await getByTestId(page, 'openai-api-key-input');
+  await input.fill(apiKey);
+
+  // Click save button
+  const saveButton = await getByTestId(page, 'save-openai-key-button');
+  await saveButton.click();
+}
diff --git a/temp_repo/apps/ui/tests/utils/views/spec-editor.ts b/temp_repo/apps/ui/tests/utils/views/spec-editor.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9916815b5a648086ed47c67367d324a21e334850
--- /dev/null
+++ b/temp_repo/apps/ui/tests/utils/views/spec-editor.ts
@@ -0,0 +1,119 @@
+import { Page, Locator } from '@playwright/test';
+import { clickElement } from '../core/interactions';
+import { navigateToSpec } from '../navigation/views';
+
+/**
+ * Get the spec editor element
+ */
+export async function getSpecEditor(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="spec-editor"]');
+}
+
+/**
+ * Get the spec editor content
+ */
+export async function getSpecEditorContent(page: Page): Promise<string> {
+  const editor = await getSpecEditor(page);
+  return await editor.inputValue();
+}
+
+/**
+ * Set the spec editor content
+ */
+export async function setSpecEditorContent(page: Page, content: string): Promise<void> {
+  const editor = await getSpecEditor(page);
+  await editor.fill(content);
+}
+
+/**
+ * Click the save spec button
+ */
+export async function clickSaveSpec(page: Page): Promise<void> {
+  await clickElement(page, 'save-spec');
+}
+
+/**
+ * Click the reload spec button
+ */
+export async function clickReloadSpec(page: Page): Promise<void> {
+  await clickElement(page, 'reload-spec');
+}
+
+/**
+ * Check if the spec view path display shows the correct .automaker path
+ */
+export async function getDisplayedSpecPath(page: Page): Promise<string | null> {
+  const specView = page.locator('[data-testid="spec-view"]');
+  const pathElement = specView.locator('p.text-muted-foreground').first();
+  return await pathElement.textContent();
+}
+
+/**
+ * Navigate to the spec editor view
+ */
+export async function navigateToSpecEditor(page: Page): Promise<void> {
+  await navigateToSpec(page);
+}
+
+/**
+ * Get the CodeMirror editor content
+ * Waits for CodeMirror to be ready and returns the content
+ */
+export async function getEditorContent(page: Page): Promise<string> {
+  // CodeMirror uses a contenteditable div with class .cm-content
+  // Wait for it to be visible and then read its textContent
+  const contentElement = page.locator('[data-testid="spec-editor"] .cm-content');
+  await contentElement.waitFor({ state: 'visible', timeout: 10000 });
+
+  // Read the content - CodeMirror should have updated its DOM by now
+  const content = await contentElement.textContent();
+  return content || '';
+}
+
+/**
+ * Set the CodeMirror editor content by selecting all and typing
+ */
+export async function setEditorContent(page: Page, content: string): Promise<void> {
+  // Click on the editor to focus it
+  const editor = page.locator('[data-testid="spec-editor"] .cm-content');
+  await editor.click();
+
+  // Wait for focus
+  await page.waitForTimeout(200);
+
+  // Select all content (Cmd+A on Mac, Ctrl+A on others)
+  const isMac = process.platform === 'darwin';
+  await page.keyboard.press(isMac ? 'Meta+a' : 'Control+a');
+
+  // Wait for selection
+  await page.waitForTimeout(100);
+
+  // Delete the selected content first
+  await page.keyboard.press('Backspace');
+
+  // Wait for deletion
+  await page.waitForTimeout(100);
+
+  // Type the new content
+  await page.keyboard.type(content, { delay: 10 });
+
+  // Wait for typing to complete
+  await page.waitForTimeout(200);
+}
+
+/**
+ * Click the save button
+ */
+export async function clickSaveButton(page: Page): Promise<void> {
+  const saveButton = page.locator('[data-testid="save-spec"]');
+  await saveButton.click();
+
+  // Wait for the button text to change to "Saved" indicating save is complete
+  await page.waitForFunction(
+    () => {
+      const btn = document.querySelector('[data-testid="save-spec"]');
+      return btn?.textContent?.includes('Saved');
+    },
+    { timeout: 5000 }
+  );
+}
diff --git a/temp_repo/apps/ui/tsconfig.json b/temp_repo/apps/ui/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..04179d8fa652b116fd6b631115fd5b1c50e0deff
--- /dev/null
+++ b/temp_repo/apps/ui/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["dom", "ESNext"],
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*", "*.mts"],
+  "exclude": ["node_modules", "dist", "dist-electron"]
+}
diff --git a/temp_repo/apps/ui/vite.config.mts b/temp_repo/apps/ui/vite.config.mts
new file mode 100644
index 0000000000000000000000000000000000000000..a24caefada2a91b4cac09ad5b004b01314c9d830
--- /dev/null
+++ b/temp_repo/apps/ui/vite.config.mts
@@ -0,0 +1,386 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import * as crypto from 'crypto';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig, type Plugin } from 'vite';
+import electron from 'vite-plugin-electron/simple';
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Read version from package.json
+const packageJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'package.json'), 'utf-8'));
+const appVersion = packageJson.version;
+
+// Generate a build hash for cache busting.
+// Uses git commit hash when available (deterministic across CI builds),
+// falls back to version + timestamp for non-git environments.
+// This ensures users get fresh SW caches after each deployment.
+function getBuildHash(): string {
+  // Try git commit hash first (deterministic, same across CI workers)
+  try {
+    const { execSync } = require('child_process');
+    const gitHash = execSync('git rev-parse --short=8 HEAD', { encoding: 'utf-8' }).trim();
+    if (gitHash) return gitHash;
+  } catch {
+    // Not a git repo or git not available — fall back
+  }
+  // Fallback: version + timestamp (unique per build)
+  return crypto.createHash('md5').update(`${appVersion}-${Date.now()}`).digest('hex').slice(0, 8);
+}
+
+const buildHash = getBuildHash();
+
+/**
+ * Vite plugin to inject the build hash into sw.js for cache busting.
+ *
+ * Problem: CACHE_NAME is hardcoded in the service worker.
+ * After a deployment, users may continue getting stale HTML from the SW cache
+ * if someone forgets to manually bump the version.
+ *
+ * Solution: Replace the hardcoded version with a build-time hash so the
+ * SW cache is automatically invalidated on each deployment.
+ */
+function swCacheBuster(): Plugin {
+  // Single constant for the cache name prefix — bump this when changing the SW cache version.
+  const CACHE_NAME_BASE = 'automaker-v5';
+  const CACHE_NAME_PATTERN = new RegExp(`const CACHE_NAME = '${CACHE_NAME_BASE}';`);
+  const CRITICAL_ASSETS_PATTERN = /const CRITICAL_ASSETS = \[\];/;
+  return {
+    name: 'sw-cache-buster',
+    // In build mode: copy sw.js to output with hash injected
+    // In dev mode: no transformation needed (sw.js is served from public/)
+    apply: 'build',
+    closeBundle() {
+      const swPath = path.resolve(__dirname, 'dist', 'sw.js');
+      if (!fs.existsSync(swPath)) {
+        console.warn('[sw-cache-buster] sw.js not found in dist/ — skipping cache bust');
+        return;
+      }
+      let swContent = fs.readFileSync(swPath, 'utf-8');
+      if (!CACHE_NAME_PATTERN.test(swContent)) {
+        console.error(
+          '[sw-cache-buster] Could not find CACHE_NAME declaration in sw.js. ' +
+            'The service worker cache will NOT be busted on this deploy! ' +
+            `Check that public/sw.js still contains: const CACHE_NAME = '${CACHE_NAME_BASE}';`
+        );
+        return;
+      }
+      swContent = swContent.replace(
+        CACHE_NAME_PATTERN,
+        `const CACHE_NAME = '${CACHE_NAME_BASE}-${buildHash}';`
+      );
+      console.log(`[sw-cache-buster] Injected build hash: ${CACHE_NAME_BASE}-${buildHash}`);
+
+      // Extract critical asset URLs from the built index.html and inject them
+      // into the SW so it can precache them on install (not just after the main
+      // thread sends PRECACHE_ASSETS). This ensures the very first visit populates
+      // the immutable cache, so PWA cold starts after memory eviction serve from cache.
+      const indexHtmlPath = path.resolve(__dirname, 'dist', 'index.html');
+      if (fs.existsSync(indexHtmlPath)) {
+        if (!CRITICAL_ASSETS_PATTERN.test(swContent)) {
+          console.warn(
+            '[sw-cache-buster] CRITICAL_ASSETS placeholder not found in sw.js — ' +
+              'precaching of critical assets was not injected. ' +
+              'Check that public/sw.js still contains: const CRITICAL_ASSETS = [];'
+          );
+        } else {
+          const indexHtml = fs.readFileSync(indexHtmlPath, 'utf-8');
+          // Use a Set to deduplicate — assetRegex may match the same path in both href and src.
+          const criticalAssetsSet = new Set<string>();
+
+          // Extract hashed asset URLs from all link and script tags.
+          // These are the JS/CSS bundles Vite produces with content hashes.
+          // Match: href="./assets/..." or src="./assets/..."
+          const assetRegex = /(?:href|src)="(\.\/(assets\/[^"]+))"/g;
+          let match;
+          while ((match = assetRegex.exec(indexHtml)) !== null) {
+            const assetPath = '/' + match[2]; // Convert ./assets/... to /assets/...
+            // Only include JS and CSS — skip images, fonts, etc. to keep cache small
+            if (assetPath.endsWith('.js') || assetPath.endsWith('.css')) {
+              criticalAssetsSet.add(assetPath);
+            }
+          }
+
+          const criticalAssets = Array.from(criticalAssetsSet);
+          if (criticalAssets.length > 0) {
+            swContent = swContent.replace(
+              CRITICAL_ASSETS_PATTERN,
+              `const CRITICAL_ASSETS = ${JSON.stringify(criticalAssets)};`
+            );
+            console.log(
+              `[sw-cache-buster] Injected ${criticalAssets.length} critical assets for install-time precaching`
+            );
+          }
+        }
+      }
+
+      fs.writeFileSync(swPath, swContent, 'utf-8');
+    },
+  };
+}
+
+/**
+ * Vite plugin to optimize the HTML output for mobile PWA loading speed.
+ *
+ * Problem: Vite adds modulepreload links for ALL vendor chunks in index.html,
+ * including heavy route-specific libraries like ReactFlow (172KB), xterm (676KB),
+ * and CodeMirror (436KB). On mobile, these modulepreloads compete with critical
+ * resources for bandwidth, delaying First Contentful Paint by 500ms+.
+ *
+ * Solution: Convert modulepreload to prefetch for route-specific vendor chunks.
+ * - modulepreload: Browser parses + compiles immediately (blocks FCP)
+ * - prefetch: Browser downloads at lowest priority during idle (no FCP impact)
+ *
+ * This means these chunks are still cached for when the user navigates to their
+ * respective routes, but they don't block the initial page load.
+ */
+function mobilePreloadOptimizer(): Plugin {
+  // Vendor chunks that are route-specific and should NOT block initial load.
+  // These libraries are only needed on specific routes:
+  // - vendor-reactflow: /graph route only
+  // - vendor-xterm: /terminal route only
+  // - vendor-codemirror: spec/XML editor routes only
+  // - vendor-markdown: agent view, wiki, and other markdown-rendering routes
+  // - vendor-icons: lucide-react icons (587 KB) — not needed before React mounts.
+  //   The !authChecked loading state uses a pure CSS spinner instead of a Lucide icon,
+  //   so icons are not required until the authenticated UI renders (by which time this
+  //   prefetch has usually completed on typical connections).
+  const deferredChunks = [
+    'vendor-reactflow',
+    'vendor-xterm',
+    'vendor-codemirror',
+    'vendor-markdown',
+    'vendor-icons',
+  ];
+
+  return {
+    name: 'mobile-preload-optimizer',
+    enforce: 'post',
+    transformIndexHtml(html) {
+      // Convert modulepreload to prefetch for deferred chunks
+      // This preserves the caching benefit while eliminating the FCP penalty
+      for (const chunk of deferredChunks) {
+        // Match modulepreload links for this chunk
+        const modulePreloadRegex = new RegExp(
+          `<link rel="modulepreload" crossorigin href="(\\./assets/${chunk}-[^"]+\\.js)">`,
+          'g'
+        );
+        html = html.replace(modulePreloadRegex, (_match, href) => {
+          return `<link rel="prefetch" href="${href}" as="script">`;
+        });
+
+        // Also convert eagerly-loaded CSS for these chunks to lower priority
+        const cssRegex = new RegExp(
+          `<link rel="stylesheet" crossorigin href="(\\./assets/${chunk}-[^"]+\\.css)">`,
+          'g'
+        );
+        html = html.replace(cssRegex, (_match, href) => {
+          return `<link rel="prefetch" href="${href}" as="style">`;
+        });
+      }
+
+      return html;
+    },
+  };
+}
+
+export default defineConfig(({ command }) => {
+  // Only skip electron plugin during dev server in CI (no display available for Electron)
+  // Always include it during build - we need dist-electron/main.js for electron-builder
+  const skipElectron =
+    command === 'serve' && (process.env.CI === 'true' || process.env.VITE_SKIP_ELECTRON === 'true');
+
+  return {
+    plugins: [
+      // Only include electron plugin when not in CI/headless dev mode
+      ...(skipElectron
+        ? []
+        : [
+            electron({
+              main: {
+                entry: 'src/main.ts',
+                vite: {
+                  build: {
+                    outDir: 'dist-electron',
+                    rollupOptions: {
+                      external: ['electron'],
+                    },
+                  },
+                },
+              },
+              preload: {
+                input: 'src/preload.ts',
+                vite: {
+                  build: {
+                    outDir: 'dist-electron',
+                    rollupOptions: {
+                      external: ['electron'],
+                    },
+                  },
+                },
+              },
+            }),
+          ]),
+      TanStackRouterVite({
+        target: 'react',
+        autoCodeSplitting: true,
+        routesDirectory: './src/routes',
+        generatedRouteTree: './src/routeTree.gen.ts',
+      }),
+      tailwindcss(),
+      react(),
+      // Mobile PWA optimization: demote route-specific vendor chunks from
+      // modulepreload (blocks FCP) to prefetch (background download)
+      mobilePreloadOptimizer(),
+      // Inject build hash into sw.js CACHE_NAME for automatic cache busting
+      swCacheBuster(),
+    ],
+    // Keep Vite dep-optimization cache local to apps/ui so each worktree gets
+    // its own pre-bundled dependencies. Shared cache state across worktrees can
+    // produce duplicate React instances (notably with @xyflow/react) and trigger
+    // "Invalid hook call" in the graph view.
+    cacheDir: path.resolve(__dirname, 'node_modules/.vite'),
+    resolve: {
+      alias: [
+        { find: '@', replacement: path.resolve(__dirname, './src') },
+        // Force ALL React imports (including from nested deps like zustand@4 inside
+        // @xyflow/react) to resolve to a single copy.
+        // Explicit subpath aliases must come BEFORE the broad regex so Vite's
+        // first-match-wins resolution applies the specific match first.
+        {
+          find: /^react-dom(\/|$)/,
+          replacement: path.resolve(__dirname, '../../node_modules/react-dom') + '/',
+        },
+        {
+          find: 'react/jsx-runtime',
+          replacement: path.resolve(__dirname, '../../node_modules/react/jsx-runtime.js'),
+        },
+        {
+          find: 'react/jsx-dev-runtime',
+          replacement: path.resolve(__dirname, '../../node_modules/react/jsx-dev-runtime.js'),
+        },
+        {
+          find: /^react(\/|$)/,
+          replacement: path.resolve(__dirname, '../../node_modules/react') + '/',
+        },
+      ],
+      dedupe: ['react', 'react-dom', 'zustand', 'use-sync-external-store', '@xyflow/react'],
+    },
+    server: {
+      host: process.env.HOST || '0.0.0.0',
+      port: parseInt(process.env.AUTOMAKER_WEB_PORT || '3007', 10),
+      allowedHosts: true,
+      proxy: {
+        '/api': {
+          target: 'http://localhost:' + (process.env.AUTOMAKER_SERVER_PORT ?? '3008'),
+          changeOrigin: true,
+          ws: true,
+        },
+      },
+    },
+    build: {
+      outDir: 'dist',
+      // Target modern browsers for smaller output (no legacy polyfills)
+      target: 'esnext',
+      // Enable CSS code splitting for smaller initial CSS payload
+      cssCodeSplit: true,
+      // Increase chunk size warning to avoid over-splitting (which hurts HTTP/2 multiplexing)
+      chunkSizeWarningLimit: 600,
+      rollupOptions: {
+        external: [
+          'child_process',
+          'fs',
+          'path',
+          'crypto',
+          'http',
+          'net',
+          'os',
+          'util',
+          'stream',
+          'events',
+          'readline',
+        ],
+        output: {
+          // Manual chunks for optimal caching and loading on mobile
+          manualChunks(id) {
+            // Vendor: React core (rarely changes, cache long-term)
+            // Also include use-sync-external-store here since it uses CJS require('react')
+            // and must be in the same chunk as React to prevent null dispatcher errors.
+            if (
+              id.includes('node_modules/react/') ||
+              id.includes('node_modules/react-dom/') ||
+              id.includes('node_modules/use-sync-external-store/')
+            ) {
+              return 'vendor-react';
+            }
+            // Vendor: TanStack Router + Query (used on every page)
+            if (id.includes('@tanstack/react-router') || id.includes('@tanstack/react-query')) {
+              return 'vendor-tanstack';
+            }
+            // Vendor: UI library - split Radix UI (critical) from Lucide icons (deferrable)
+            // Radix UI primitives are used on almost every page for dialogs, tooltips, etc.
+            if (id.includes('@radix-ui/')) {
+              return 'vendor-radix';
+            }
+            // Lucide icons: Split from Radix so tree-shaken icons don't bloat the critical path
+            if (id.includes('lucide-react')) {
+              return 'vendor-icons';
+            }
+            // Fonts: Each font family gets its own chunk (loaded on demand)
+            if (id.includes('@fontsource/')) {
+              const match = id.match(/@fontsource\/([^/]+)/);
+              if (match) return `font-${match[1]}`;
+            }
+            // CodeMirror: Heavy editor - only loaded when needed
+            if (id.includes('@codemirror/') || id.includes('@lezer/')) {
+              return 'vendor-codemirror';
+            }
+            // Xterm: Terminal - only loaded when needed
+            if (id.includes('xterm') || id.includes('@xterm/')) {
+              return 'vendor-xterm';
+            }
+            // React Flow: Graph visualization - only loaded on dependency graph view
+            if (id.includes('@xyflow/') || id.includes('reactflow')) {
+              return 'vendor-reactflow';
+            }
+            // Zustand + Zod: State management and validation
+            if (id.includes('zustand') || id.includes('zod')) {
+              return 'vendor-state';
+            }
+            // React Markdown: Only needed on routes with markdown rendering
+            if (id.includes('react-markdown') || id.includes('remark-') || id.includes('rehype-')) {
+              return 'vendor-markdown';
+            }
+          },
+        },
+      },
+    },
+    optimizeDeps: {
+      exclude: ['@automaker/platform'],
+      // Pre-bundle CJS packages that use require('react') so the CJS interop resolves to
+      // the same React instance as the rest of the app. The nested zustand@4 inside
+      // @xyflow/react uses use-sync-external-store/shim/with-selector which does
+      // require('react') — both the base and subpath must be included here.
+      include: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        'react/jsx-dev-runtime',
+        'use-sync-external-store',
+        'use-sync-external-store/shim',
+        'use-sync-external-store/shim/with-selector',
+        'zustand',
+        '@xyflow/react',
+      ],
+    },
+    define: {
+      __APP_VERSION__: JSON.stringify(appVersion),
+      // Build hash injected for IDB cache busting — matches what swCacheBuster injects
+      // into the SW CACHE_NAME. When the build changes, both caches are invalidated together.
+      __APP_BUILD_HASH__: JSON.stringify(buildHash),
+    },
+  };
+});
diff --git a/temp_repo/apps/ui/vitest.config.ts b/temp_repo/apps/ui/vitest.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..840099dc9d40582494fb7dad2cdd1a3c46a7132b
--- /dev/null
+++ b/temp_repo/apps/ui/vitest.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+// Ensure UI tests never inherit production mode from outer shells.
+process.env.NODE_ENV = 'test';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    name: 'ui',
+    reporters: ['verbose'],
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./tests/setup.ts'],
+    include: ['tests/**/*.test.ts', 'tests/**/*.test.tsx'],
+    exclude: ['**/node_modules/**', '**/dist/**', 'tests/features/**'],
+    mockReset: true,
+    restoreMocks: true,
+    clearMocks: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@automaker/ui': path.resolve(__dirname, './src'),
+      '@automaker/types': path.resolve(__dirname, '../../libs/types/src/index.ts'),
+    },
+  },
+});
diff --git a/temp_repo/docker-compose.dev-server.yml b/temp_repo/docker-compose.dev-server.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ea44fffc5e2f04a1a3704697a49c39254c5b6a55
--- /dev/null
+++ b/temp_repo/docker-compose.dev-server.yml
@@ -0,0 +1,106 @@
+# Automaker Docker Compose - Server Only (Development Mode)
+# Runs only the backend API in a container for use with local Electron.
+#
+# Usage:
+#   docker compose -f docker-compose.dev-server.yml up
+#   Then run Electron locally which connects to http://localhost:3008
+#
+# This mode:
+#   - Runs only the backend server in a container
+#   - Mounts source code as volumes (live reload)
+#   - Server runs with tsx watch for TypeScript changes
+#   - Electron runs locally on host machine
+
+services:
+  # Development server (backend API only)
+  server:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+      args:
+        # Match container user to host user for mounted volume permissions
+        # Override with: UID=$(id -u) GID=$(id -g) docker-compose build
+        UID: ${UID:-1001}
+        GID: ${GID:-1001}
+    container_name: automaker-dev-server-only
+    restart: unless-stopped
+    ports:
+      - '3008:3008'
+    environment:
+      # Optional - Anthropic API key
+      - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY}
+
+      # Optional - Claude CLI OAuth credentials
+      - CLAUDE_OAUTH_CREDENTIALS=${CLAUDE_OAUTH_CREDENTIALS:-}
+
+      # Optional - Cursor CLI OAuth token
+      - CURSOR_AUTH_TOKEN=${CURSOR_AUTH_TOKEN:-}
+
+      # Optional - authentication
+      - AUTOMAKER_API_KEY=${AUTOMAKER_API_KEY:-}
+
+      # Development settings
+      - NODE_ENV=development
+      - PORT=3008
+      - CORS_ORIGIN=http://localhost:3007
+      - HUSKY=0
+
+      # Optional - restrict to specific directory within container
+      - ALLOWED_ROOT_DIRECTORY=${ALLOWED_ROOT_DIRECTORY:-/projects}
+      - DATA_DIR=/data
+
+      # Internal - indicates containerized environment
+      - IS_CONTAINERIZED=true
+    volumes:
+      # Mount source code for live reload
+      - .:/app:cached
+
+      # Use named volume for node_modules to avoid platform conflicts
+      # This ensures native modules are built for the container's architecture
+      - automaker-dev-node-modules:/app/node_modules
+
+      # IMPORTANT: Mount local ./data directory (not a Docker volume)
+      # This ensures Electron and web mode share the same data directory
+      # and projects opened in either mode are visible in both
+      - ./data:/data
+
+      # Persist CLI configurations
+      - automaker-claude-config:/home/automaker/.claude
+      - automaker-cursor-config:/home/automaker/.cursor
+
+      # Note: Workspace mount (/projects) comes from docker-compose.override.yml
+
+    # Install deps, build packages, then start server in watch mode
+    # Note: We override the entrypoint to handle permissions properly
+    entrypoint: /bin/sh
+    command:
+      - -c
+      - |
+        # Install as root to avoid permission issues with named volumes
+        # Use --force to skip platform-specific devDependencies (dmg-license is macOS-only)
+        echo 'Installing dependencies...' &&
+        npm ci --legacy-peer-deps --force &&
+        echo 'Building shared packages...' &&
+        npm run build:packages &&
+
+        # Fix permissions and start server as automaker user
+        chown -R automaker:automaker /app/node_modules &&
+        echo 'Starting server in development mode...' &&
+        exec gosu automaker npm run _dev:server
+    healthcheck:
+      test: ['CMD', 'curl', '-f', 'http://localhost:3008/api/health']
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 60s
+
+volumes:
+  automaker-dev-node-modules:
+    name: automaker-dev-node-modules
+    # Named volume for container-specific node_modules
+
+  automaker-claude-config:
+    name: automaker-claude-config
+
+  automaker-cursor-config:
+    name: automaker-cursor-config
diff --git a/temp_repo/docker-compose.dev.yml b/temp_repo/docker-compose.dev.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2506c4df0b79a0f13e57757dadca87d898370691
--- /dev/null
+++ b/temp_repo/docker-compose.dev.yml
@@ -0,0 +1,149 @@
+# Automaker Docker Compose - Development Mode
+# Runs Automaker with live reload for development.
+# Source code is volume mounted for instant changes.
+#
+# Usage:
+#   docker compose -f docker-compose.dev.yml up
+#   Then open http://localhost:3007
+#
+# This mode:
+#   - Mounts source code as volumes (live reload)
+#   - Runs npm install inside container
+#   - Uses Vite dev server with HMR
+#   - Server runs with tsx watch for TypeScript changes
+
+services:
+  # Development server (backend API)
+  server:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+      args:
+        # Match container user to host user for mounted volume permissions
+        # Override with: UID=$(id -u) GID=$(id -g) docker-compose build
+        UID: ${UID:-1001}
+        GID: ${GID:-1001}
+    container_name: automaker-dev-server
+    restart: unless-stopped
+    ports:
+      - '3008:3008'
+    environment:
+      # Optional - Anthropic API key
+      - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY}
+
+      # Optional - Claude CLI OAuth credentials
+      - CLAUDE_OAUTH_CREDENTIALS=${CLAUDE_OAUTH_CREDENTIALS:-}
+
+      # Optional - Cursor CLI OAuth token
+      - CURSOR_AUTH_TOKEN=${CURSOR_AUTH_TOKEN:-}
+
+      # Optional - authentication
+      - AUTOMAKER_API_KEY=${AUTOMAKER_API_KEY:-}
+
+      # Development settings
+      - NODE_ENV=development
+      - PORT=3008
+      - CORS_ORIGIN=http://localhost:3007
+      - HUSKY=0
+
+      # Optional - restrict to specific directory within container
+      - ALLOWED_ROOT_DIRECTORY=${ALLOWED_ROOT_DIRECTORY:-/projects}
+      - DATA_DIR=/data
+
+      # Internal - indicates containerized environment
+      - IS_CONTAINERIZED=true
+    volumes:
+      # Mount source code for live reload
+      - .:/app:cached
+
+      # Use named volume for node_modules to avoid platform conflicts
+      # This ensures native modules are built for the container's architecture
+      - automaker-dev-node-modules:/app/node_modules
+
+      # IMPORTANT: Mount local ./data directory (not a Docker volume)
+      # This ensures data is consistent across Electron and web modes
+      - ./data:/data
+
+      # Persist CLI configurations
+      - automaker-claude-config:/home/automaker/.claude
+      - automaker-cursor-config:/home/automaker/.cursor
+
+      # Note: Workspace mount (/projects) comes from docker-compose.override.yml
+
+    # Install deps, build packages, then start server in watch mode
+    # Note: We override the entrypoint to handle permissions properly
+    entrypoint: /bin/sh
+    command:
+      - -c
+      - |
+        # Install as root to avoid permission issues with named volumes
+        # Use --force to skip platform-specific devDependencies (dmg-license is macOS-only)
+        echo 'Installing dependencies...' &&
+        npm ci --legacy-peer-deps --force &&
+        echo 'Building shared packages...' &&
+        npm run build:packages &&
+
+        # Fix permissions and start server as automaker user
+        chown -R automaker:automaker /app/node_modules &&
+        echo 'Starting server in development mode...' &&
+        exec gosu automaker npm run _dev:server
+    healthcheck:
+      test: ['CMD', 'curl', '-f', 'http://localhost:3008/api/health']
+      interval: 10s
+      timeout: 5s
+      retries: 5
+      start_period: 60s
+
+  # Development UI (frontend with HMR)
+  ui:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+      args:
+        UID: ${UID:-1001}
+        GID: ${GID:-1001}
+    container_name: automaker-dev-ui
+    restart: unless-stopped
+    ports:
+      - '3007:3007'
+    environment:
+      - NODE_ENV=development
+      - VITE_SERVER_URL=http://localhost:3008
+      - TEST_PORT=3107
+      - VITE_SKIP_ELECTRON=true
+      - VITE_APP_MODE=3
+      - HUSKY=0
+    volumes:
+      # Mount source code for live reload
+      - .:/app:cached
+
+      # Share node_modules with server container
+      - automaker-dev-node-modules:/app/node_modules
+    depends_on:
+      server:
+        condition: service_healthy
+    working_dir: /app/apps/ui
+    # Start Vite dev server for UI with HMR
+    # --host flag makes Vite bind to 0.0.0.0 for Docker access
+    # Note: We override the entrypoint to run as automaker user
+    entrypoint: /bin/sh
+    command:
+      - -c
+      - |
+        exec gosu automaker sh -c "
+          echo 'Waiting for dependencies to be ready...' &&
+          while [ ! -d /app/node_modules/.bin ]; do sleep 2; done &&
+          echo 'Starting UI development server...' &&
+          cd /app/apps/ui && npx vite --host
+        "
+
+volumes:
+  automaker-dev-node-modules:
+    name: automaker-dev-node-modules
+    # Named volume for container-specific node_modules
+
+  automaker-claude-config:
+    name: automaker-claude-config
+
+  automaker-cursor-config:
+    name: automaker-cursor-config
diff --git a/temp_repo/docker-compose.override.yml.example b/temp_repo/docker-compose.override.yml.example
new file mode 100644
index 0000000000000000000000000000000000000000..e92ce119d4aa55b8e7e62b1e191e2ef5a61346ae
--- /dev/null
+++ b/temp_repo/docker-compose.override.yml.example
@@ -0,0 +1,47 @@
+services:
+  server:
+    volumes:
+      # Mount your workspace directory to /projects inside the container
+      # Example: mount your local /workspace to /projects inside the container
+      - /Users/webdevcody/Workspace/automaker-workspace:/projects:rw
+
+      # ===== CLI Authentication (Optional) =====
+      # Mount host CLI credentials to avoid re-authenticating in container
+
+      # Claude CLI - mount your ~/.claude directory (Linux/Windows)
+      # This shares your 'claude login' OAuth session with the container
+      # - ~/.claude:/home/automaker/.claude
+
+      # Cursor CLI - mount your ~/.cursor directory (Linux/Windows)
+      # This shares your 'cursor-agent login' OAuth session with the container
+      # - ~/.cursor:/home/automaker/.cursor
+
+      # OpenCode CLI - mount your ~/.local/share/opencode directory
+      # This shares your 'opencode auth login' session with the container
+      # - ~/.local/share/opencode:/home/automaker/.local/share/opencode
+      # - ~/.config/opencode:/home/automaker/.config/opencode
+
+      # ===== Playwright Browser Cache (Optional) =====
+      # Playwright Chromium is PRE-INSTALLED in the Docker image for automated testing.
+      # Uncomment below to persist browser cache across container rebuilds (saves ~300MB download):
+      # - playwright-cache:/home/automaker/.cache/ms-playwright
+      #
+      # To update Playwright browsers manually:
+      #   docker exec --user automaker -w /app automaker-server npx playwright install chromium
+    environment:
+      # Set root directory for all projects and file operations
+      # Users can only create/open projects within this directory
+      - ALLOWED_ROOT_DIRECTORY=/projects
+      - NODE_ENV=development
+
+      # ===== macOS Users =====
+      # On macOS, OAuth tokens are stored in SQLite databases, not plain files.
+      # Extract your Cursor token with: ./scripts/get-cursor-token.sh
+      # Then set it here or in your .env file:
+      # - CURSOR_API_KEY=${CURSOR_API_KEY:-}
+
+volumes:
+  # Playwright cache volume - optional, persists browser updates across container rebuilds
+  # Uncomment if you mounted the playwright-cache volume above
+  # playwright-cache:
+  #   name: automaker-playwright-cache
diff --git a/temp_repo/docker-compose.yml b/temp_repo/docker-compose.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2a29ba6a22d4b6b8b80280e309b7853e3b2b036c
--- /dev/null
+++ b/temp_repo/docker-compose.yml
@@ -0,0 +1,135 @@
+# Automaker Docker Compose
+# Runs Automaker in complete isolation from your host filesystem.
+# The container cannot access any files on your laptop - only Docker-managed volumes.
+#
+# Usage:
+#   docker-compose up -d
+#   Then open http://localhost:3007
+#
+# See docs/docker-isolation.md for full documentation.
+
+services:
+  # Frontend UI
+  ui:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      target: ui
+    container_name: automaker-ui
+    restart: unless-stopped
+    ports:
+      - '3007:80'
+    depends_on:
+      - server
+
+  # Backend API Server
+  server:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      target: server
+      args:
+        # Match container user to host user for mounted volume permissions
+        # Override with: UID=$(id -u) GID=$(id -g) docker-compose build
+        UID: ${UID:-1001}
+        GID: ${GID:-1001}
+    container_name: automaker-server
+    restart: unless-stopped
+    ports:
+      - '3008:3008'
+    environment:
+      # Optional - Anthropic API key
+      - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY}
+
+      # Optional - Claude CLI OAuth credentials (for macOS users)
+      # Extract with: ./scripts/get-claude-token.sh
+      # This writes the OAuth tokens to ~/.claude/.credentials.json in the container
+      - CLAUDE_OAUTH_CREDENTIALS=${CLAUDE_OAUTH_CREDENTIALS:-}
+
+      # Optional - Cursor CLI OAuth token (extract from host with the command shown below)
+      # macOS: ./scripts/get-cursor-token.sh (extracts from Keychain)
+      # Linux: jq -r '.accessToken' ~/.config/cursor/auth.json
+      # Note: cursor-agent stores its OAuth tokens separately from Cursor IDE
+      - CURSOR_AUTH_TOKEN=${CURSOR_AUTH_TOKEN:-}
+
+      # Optional - authentication, one will generate if left blank
+      - AUTOMAKER_API_KEY=${AUTOMAKER_API_KEY:-}
+
+      # Optional - restrict to specific directory within container only
+      # Projects and files can only be created/accessed within this directory
+      # Paths are INSIDE the container, not on your host
+      # Default: /projects
+      - ALLOWED_ROOT_DIRECTORY=${ALLOWED_ROOT_DIRECTORY:-/projects}
+
+      # Optional - data directory for sessions, settings, etc. (container-only)
+      - DATA_DIR=/data
+
+      # Optional - CORS origin (default: auto-detect local network origins)
+      # With nginx proxying API requests, CORS is not needed for same-origin access.
+      # Set explicitly only if accessing the API from a different domain.
+      - CORS_ORIGIN=${CORS_ORIGIN:-}
+
+      # Internal - indicates the API is running in a containerized sandbox environment
+      # This is used by the UI to determine if sandbox risk warnings should be shown
+      - IS_CONTAINERIZED=true
+    volumes:
+      # ONLY named volumes - these are isolated from your host filesystem
+      # This volume persists data between restarts but is container-managed
+      - automaker-data:/data
+
+      # Persist Claude CLI OAuth session keys across container restarts
+      # This allows 'claude login' authentication to persist between restarts
+      - automaker-claude-config:/home/automaker/.claude
+
+      # Persist Cursor CLI configuration and authentication across container restarts
+      # This allows 'cursor-agent login' authentication to persist between restarts
+      - automaker-cursor-config:/home/automaker/.cursor
+
+      # Persist OpenCode CLI configuration and authentication across container restarts
+      # This allows 'opencode auth login' authentication to persist between restarts
+      - automaker-opencode-data:/home/automaker/.local/share/opencode
+
+      # Persist OpenCode user configuration across container restarts
+      - automaker-opencode-config:/home/automaker/.config/opencode
+
+      # Persist OpenCode cache directory (contains version file and other cache data)
+      - automaker-opencode-cache:/home/automaker/.cache/opencode
+
+      # NO host directory mounts - container cannot access your laptop files
+      # If you need to work on a project, create it INSIDE the container
+      # or use a separate docker-compose override file
+
+    # Security: Server runs as non-root user (already set in Dockerfile)
+    # Security: No privileged mode
+    # Security: No host network access
+    # Security: No host filesystem mounts
+
+volumes:
+  automaker-data:
+    name: automaker-data
+    # Named volume - completely isolated from host filesystem
+
+  automaker-claude-config:
+    name: automaker-claude-config
+    # Named volume for Claude CLI OAuth session keys and configuration
+    # Persists authentication across container restarts
+
+  automaker-cursor-config:
+    name: automaker-cursor-config
+    # Named volume for Cursor CLI configuration and authentication
+    # Persists cursor-agent login authentication across container restarts
+
+  automaker-opencode-data:
+    name: automaker-opencode-data
+    # Named volume for OpenCode CLI data and authentication (~/.local/share/opencode)
+    # Persists opencode auth login authentication across container restarts
+
+  automaker-opencode-config:
+    name: automaker-opencode-config
+    # Named volume for OpenCode user configuration (~/.config/opencode)
+    # Persists user configuration across container restarts
+
+  automaker-opencode-cache:
+    name: automaker-opencode-cache
+    # Named volume for OpenCode cache directory (~/.cache/opencode)
+    # Contains version file and other cached data
diff --git a/temp_repo/docker-entrypoint.sh b/temp_repo/docker-entrypoint.sh
new file mode 100644
index 0000000000000000000000000000000000000000..2af347c7a041de47f86ff7466cd679012ac07af8
--- /dev/null
+++ b/temp_repo/docker-entrypoint.sh
@@ -0,0 +1,74 @@
+#!/bin/sh
+set -e
+
+# Ensure Claude CLI config directory exists with correct permissions
+if [ ! -d "/home/automaker/.claude" ]; then
+    mkdir -p /home/automaker/.claude
+fi
+
+# If CLAUDE_OAUTH_CREDENTIALS is set, write it to the credentials file
+# This allows passing OAuth tokens from host (especially macOS where they're in Keychain)
+if [ -n "$CLAUDE_OAUTH_CREDENTIALS" ]; then
+    echo "$CLAUDE_OAUTH_CREDENTIALS" > /home/automaker/.claude/.credentials.json
+    chmod 600 /home/automaker/.claude/.credentials.json
+fi
+
+# Fix permissions on Claude CLI config directory
+chown -R automaker:automaker /home/automaker/.claude
+chmod 700 /home/automaker/.claude
+
+# Ensure Cursor CLI config directory exists with correct permissions
+# This handles both: mounted volumes (owned by root) and empty directories
+if [ ! -d "/home/automaker/.cursor" ]; then
+    mkdir -p /home/automaker/.cursor
+fi
+chown -R automaker:automaker /home/automaker/.cursor
+chmod -R 700 /home/automaker/.cursor
+
+# Ensure OpenCode CLI config directory exists with correct permissions
+# OpenCode stores config and auth in ~/.local/share/opencode/
+if [ ! -d "/home/automaker/.local/share/opencode" ]; then
+    mkdir -p /home/automaker/.local/share/opencode
+fi
+chown -R automaker:automaker /home/automaker/.local/share/opencode
+chmod -R 700 /home/automaker/.local/share/opencode
+
+# OpenCode also uses ~/.config/opencode for configuration
+if [ ! -d "/home/automaker/.config/opencode" ]; then
+    mkdir -p /home/automaker/.config/opencode
+fi
+chown -R automaker:automaker /home/automaker/.config/opencode
+chmod -R 700 /home/automaker/.config/opencode
+
+# OpenCode also uses ~/.cache/opencode for cache data (version file, etc.)
+if [ ! -d "/home/automaker/.cache/opencode" ]; then
+    mkdir -p /home/automaker/.cache/opencode
+fi
+chown -R automaker:automaker /home/automaker/.cache/opencode
+chmod -R 700 /home/automaker/.cache/opencode
+
+# Ensure npm cache directory exists with correct permissions
+# This is needed for using npx to run MCP servers
+if [ ! -d "/home/automaker/.npm" ]; then
+    mkdir -p /home/automaker/.npm
+fi
+chown -R automaker:automaker /home/automaker/.npm
+
+# If CURSOR_AUTH_TOKEN is set, write it to the cursor auth file
+# On Linux, cursor-agent uses ~/.config/cursor/auth.json for file-based credential storage
+# The env var CURSOR_AUTH_TOKEN is also checked directly by cursor-agent
+if [ -n "$CURSOR_AUTH_TOKEN" ]; then
+    CURSOR_CONFIG_DIR="/home/automaker/.config/cursor"
+    mkdir -p "$CURSOR_CONFIG_DIR"
+    # Write auth.json with the access token
+    cat > "$CURSOR_CONFIG_DIR/auth.json" << EOF
+{
+  "accessToken": "$CURSOR_AUTH_TOKEN"
+}
+EOF
+    chmod 600 "$CURSOR_CONFIG_DIR/auth.json"
+    chown -R automaker:automaker /home/automaker/.config
+fi
+
+# Switch to automaker user and execute the command
+exec gosu automaker "$@"
diff --git a/temp_repo/docs/UNIFIED_API_KEY_PROFILES.md b/temp_repo/docs/UNIFIED_API_KEY_PROFILES.md
new file mode 100644
index 0000000000000000000000000000000000000000..3463b9fb6316e4a90242c3c131dc58c12f9bdab7
--- /dev/null
+++ b/temp_repo/docs/UNIFIED_API_KEY_PROFILES.md
@@ -0,0 +1,323 @@
+# Claude Compatible Providers System
+
+This document describes the implementation of Claude Compatible Providers, allowing users to configure alternative API endpoints that expose Claude-compatible models to the application.
+
+## Overview
+
+Claude Compatible Providers allow Automaker to work with third-party API endpoints that implement Claude's API protocol. This enables:
+
+- **Cost savings**: Use providers like z.AI GLM or MiniMax at lower costs
+- **Alternative models**: Access models like GLM-4.7 or MiniMax M2.1 through familiar interfaces
+- **Flexibility**: Configure per-phase model selection to optimize for speed vs quality
+- **Project overrides**: Use different providers for different projects
+
+## Architecture
+
+### Type Definitions
+
+#### ClaudeCompatibleProvider
+
+```typescript
+export interface ClaudeCompatibleProvider {
+  id: string; // Unique identifier (UUID)
+  name: string; // Display name (e.g., "z.AI GLM")
+  baseUrl: string; // API endpoint URL
+  providerType?: string; // Provider type for icon/grouping (e.g., 'glm', 'minimax', 'openrouter')
+  apiKeySource?: ApiKeySource; // 'inline' | 'env' | 'credentials'
+  apiKey?: string; // API key (when apiKeySource = 'inline')
+  useAuthToken?: boolean; // Use ANTHROPIC_AUTH_TOKEN header
+  timeoutMs?: number; // Request timeout in milliseconds
+  disableNonessentialTraffic?: boolean; // Minimize non-essential API calls
+  enabled?: boolean; // Whether provider is active (default: true)
+  models?: ProviderModel[]; // Models exposed by this provider
+}
+```
+
+#### ProviderModel
+
+```typescript
+export interface ProviderModel {
+  id: string; // Model ID sent to API (e.g., "GLM-4.7")
+  displayName: string; // Display name in UI (e.g., "GLM 4.7")
+  mapsToClaudeModel?: ClaudeModelAlias; // Which Claude tier this replaces ('haiku' | 'sonnet' | 'opus')
+  capabilities?: {
+    supportsVision?: boolean; // Whether model supports image inputs
+    supportsThinking?: boolean; // Whether model supports extended thinking
+    maxThinkingLevel?: ThinkingLevel; // Maximum thinking level if supported
+  };
+}
+```
+
+#### PhaseModelEntry
+
+Phase model configuration now supports provider models:
+
+```typescript
+export interface PhaseModelEntry {
+  providerId?: string; // Provider ID (undefined = native Claude)
+  model: string; // Model ID or alias
+  thinkingLevel?: ThinkingLevel; // 'none' | 'low' | 'medium' | 'high'
+}
+```
+
+### Provider Templates
+
+Available provider templates in `CLAUDE_PROVIDER_TEMPLATES`:
+
+| Template         | Provider Type | Base URL                             | Description                   |
+| ---------------- | ------------- | ------------------------------------ | ----------------------------- |
+| Direct Anthropic | anthropic     | `https://api.anthropic.com`          | Standard Anthropic API        |
+| OpenRouter       | openrouter    | `https://openrouter.ai/api`          | Access Claude and 300+ models |
+| z.AI GLM         | glm           | `https://api.z.ai/api/anthropic`     | GLM models at lower cost      |
+| MiniMax          | minimax       | `https://api.minimax.io/anthropic`   | MiniMax M2.1 model            |
+| MiniMax (China)  | minimax       | `https://api.minimaxi.com/anthropic` | MiniMax for China region      |
+
+### Model Mappings
+
+Each provider model specifies which Claude model tier it maps to via `mapsToClaudeModel`:
+
+**z.AI GLM:**
+
+- `GLM-4.5-Air` → haiku
+- `GLM-4.7` → sonnet, opus
+
+**MiniMax:**
+
+- `MiniMax-M2.1` → haiku, sonnet, opus
+
+**OpenRouter:**
+
+- `anthropic/claude-3.5-haiku` → haiku
+- `anthropic/claude-3.5-sonnet` → sonnet
+- `anthropic/claude-3-opus` → opus
+
+## Server-Side Implementation
+
+### API Key Resolution
+
+The `buildEnv()` function in `claude-provider.ts` resolves API keys based on `apiKeySource`:
+
+```typescript
+function buildEnv(
+  providerConfig?: ClaudeCompatibleProvider,
+  credentials?: Credentials
+): Record<string, string | undefined> {
+  if (providerConfig) {
+    let apiKey: string | undefined;
+    const source = providerConfig.apiKeySource ?? 'inline';
+
+    switch (source) {
+      case 'inline':
+        apiKey = providerConfig.apiKey;
+        break;
+      case 'env':
+        apiKey = process.env.ANTHROPIC_API_KEY;
+        break;
+      case 'credentials':
+        apiKey = credentials?.apiKeys?.anthropic;
+        break;
+    }
+    // ... build environment with resolved key
+  }
+}
+```
+
+### Provider Lookup
+
+The `getProviderByModelId()` helper resolves provider configuration from model IDs:
+
+```typescript
+export async function getProviderByModelId(
+  modelId: string,
+  settingsService: SettingsService,
+  logPrefix?: string
+): Promise<{
+  provider?: ClaudeCompatibleProvider;
+  resolvedModel?: string;
+  credentials?: Credentials;
+}>;
+```
+
+This is used by all routes that call the Claude SDK to:
+
+1. Check if the model ID belongs to a provider
+2. Get the provider configuration (baseUrl, auth, etc.)
+3. Resolve the `mapsToClaudeModel` for the SDK
+
+### Phase Model Resolution
+
+The `getPhaseModelWithOverrides()` helper gets effective phase model config:
+
+```typescript
+export async function getPhaseModelWithOverrides(
+  phaseKey: PhaseModelKey,
+  settingsService: SettingsService,
+  projectPath?: string,
+  logPrefix?: string
+): Promise<{
+  model: string;
+  thinkingLevel?: ThinkingLevel;
+  providerId?: string;
+  providerConfig?: ClaudeCompatibleProvider;
+  credentials?: Credentials;
+}>;
+```
+
+This handles:
+
+1. Project-level overrides (if projectPath provided)
+2. Global phase model settings
+3. Default fallback models
+
+## UI Implementation
+
+### Model Selection Dropdowns
+
+Phase model selectors (`PhaseModelSelector`) display:
+
+1. **Claude Models** - Native Claude models (Haiku, Sonnet, Opus)
+2. **Provider Sections** - Each enabled provider as a separate group:
+   - Section header: `{provider.name} (via Claude)`
+   - Models with their mapped Claude tiers: "Maps to Haiku, Sonnet, Opus"
+   - Thinking level submenu for models that support it
+
+### Provider Icons
+
+Icons are determined by `providerType`:
+
+- `glm` → Z logo
+- `minimax` → MiniMax logo
+- `openrouter` → OpenRouter logo
+- Generic → OpenRouter as fallback
+
+### Bulk Replace
+
+The "Bulk Replace" feature allows switching all phase models to a provider at once:
+
+1. Select a provider from the dropdown
+2. Preview shows which models will be assigned:
+   - haiku phases → provider's haiku-mapped model
+   - sonnet phases → provider's sonnet-mapped model
+   - opus phases → provider's opus-mapped model
+3. Apply replaces all phase model configurations
+
+The Bulk Replace button only appears when at least one provider is enabled.
+
+## Project-Level Overrides
+
+Projects can override global phase model settings via `phaseModelOverrides`:
+
+```typescript
+interface Project {
+  // ...
+  phaseModelOverrides?: PhaseModelConfig; // Per-phase overrides
+}
+```
+
+### Storage
+
+Project overrides are stored in `.automaker/settings.json`:
+
+```json
+{
+  "phaseModelOverrides": {
+    "enhancementModel": {
+      "providerId": "provider-uuid",
+      "model": "GLM-4.5-Air",
+      "thinkingLevel": "none"
+    }
+  }
+}
+```
+
+### Resolution Priority
+
+1. Project override for specific phase (if set)
+2. Global phase model setting
+3. Default model for phase
+
+## Migration
+
+### v5 → v6 Migration
+
+The system migrated from `claudeApiProfiles` to `claudeCompatibleProviders`:
+
+```typescript
+// Old: modelMappings object
+{
+  modelMappings: {
+    haiku: 'GLM-4.5-Air',
+    sonnet: 'GLM-4.7',
+    opus: 'GLM-4.7'
+  }
+}
+
+// New: models array with mapsToClaudeModel
+{
+  models: [
+    { id: 'GLM-4.5-Air', displayName: 'GLM 4.5 Air', mapsToClaudeModel: 'haiku' },
+    { id: 'GLM-4.7', displayName: 'GLM 4.7', mapsToClaudeModel: 'sonnet' },
+    { id: 'GLM-4.7', displayName: 'GLM 4.7', mapsToClaudeModel: 'opus' },
+  ]
+}
+```
+
+The migration is automatic and preserves existing provider configurations.
+
+## Files Changed
+
+### Types
+
+| File                         | Changes                                                              |
+| ---------------------------- | -------------------------------------------------------------------- |
+| `libs/types/src/settings.ts` | `ClaudeCompatibleProvider`, `ProviderModel`, `PhaseModelEntry` types |
+| `libs/types/src/provider.ts` | `ExecuteOptions.claudeCompatibleProvider` field                      |
+| `libs/types/src/index.ts`    | Exports for new types                                                |
+
+### Server
+
+| File                                           | Changes                                                  |
+| ---------------------------------------------- | -------------------------------------------------------- |
+| `apps/server/src/providers/claude-provider.ts` | Provider config handling, buildEnv updates               |
+| `apps/server/src/lib/settings-helpers.ts`      | `getProviderByModelId()`, `getPhaseModelWithOverrides()` |
+| `apps/server/src/services/settings-service.ts` | v5→v6 migration                                          |
+| `apps/server/src/routes/**/*.ts`               | Provider lookup for all SDK calls                        |
+
+### UI
+
+| File                                               | Changes                                   |
+| -------------------------------------------------- | ----------------------------------------- |
+| `apps/ui/src/.../phase-model-selector.tsx`         | Provider model rendering, thinking levels |
+| `apps/ui/src/.../bulk-replace-dialog.tsx`          | Bulk replace feature                      |
+| `apps/ui/src/.../api-profiles-section.tsx`         | Provider management UI                    |
+| `apps/ui/src/components/ui/provider-icon.tsx`      | Provider-specific icons                   |
+| `apps/ui/src/hooks/use-project-settings-loader.ts` | Load phaseModelOverrides                  |
+
+## Testing
+
+```bash
+# Build and run
+npm run build:packages
+npm run dev:web
+
+# Run server tests
+npm run test:server
+```
+
+### Test Cases
+
+1. **Provider setup**: Add z.AI GLM provider with inline API key
+2. **Model selection**: Select GLM-4.7 for a phase, verify it appears in dropdown
+3. **Thinking levels**: Select thinking level for provider model
+4. **Bulk replace**: Switch all phases to a provider at once
+5. **Project override**: Set per-project model override, verify it persists
+6. **Provider deletion**: Delete all providers, verify empty state persists
+
+## Future Enhancements
+
+Potential improvements:
+
+1. **Provider validation**: Test API connection before saving
+2. **Usage tracking**: Show which phases use which provider
+3. **Cost estimation**: Display estimated costs per provider
+4. **Model capabilities**: Auto-detect supported features from provider
diff --git a/temp_repo/docs/add-new-cursor-model.md b/temp_repo/docs/add-new-cursor-model.md
new file mode 100644
index 0000000000000000000000000000000000000000..928c27ec7081338f707a5988f81043ae2535e03d
--- /dev/null
+++ b/temp_repo/docs/add-new-cursor-model.md
@@ -0,0 +1,154 @@
+# Adding New Cursor Models to AutoMaker
+
+This guide explains how to add new Cursor CLI models to AutoMaker. The process involves updating a single file with automatic propagation to the UI.
+
+## Overview
+
+Cursor models are defined in `libs/types/src/cursor-models.ts`. This file contains:
+
+- `CursorModelId` - Union type of all valid model IDs
+- `CursorModelConfig` - Interface for model metadata
+- `CURSOR_MODEL_MAP` - Record mapping model IDs to their configs
+
+The UI automatically reads from `CURSOR_MODEL_MAP`, so adding a model there makes it available everywhere.
+
+---
+
+## Step-by-Step Guide
+
+### Step 1: Add the Model ID to the Type
+
+Open `libs/types/src/cursor-models.ts` and add your model ID to the `CursorModelId` union type:
+
+```typescript
+export type CursorModelId =
+  | 'auto'
+  | 'claude-sonnet-4'
+  | 'claude-sonnet-4-thinking'
+  | 'composer-1'
+  | 'gpt-4o'
+  | 'gpt-4o-mini'
+  | 'gemini-2.5-pro'
+  | 'o3-mini'
+  | 'your-new-model'; // <-- Add your model here
+```
+
+### Step 2: Add the Model Config to the Map
+
+In the same file, add an entry to `CURSOR_MODEL_MAP`:
+
+```typescript
+export const CURSOR_MODEL_MAP: Record<CursorModelId, CursorModelConfig> = {
+  // ... existing models ...
+
+  'your-new-model': {
+    id: 'your-new-model',
+    label: 'Your New Model', // Display name in UI
+    description: 'Description of the model capabilities',
+    hasThinking: false, // true if model has built-in reasoning
+    supportsVision: false, // true if model supports image inputs (currently all false)
+  },
+};
+```
+
+### Step 3: Rebuild the Types Package
+
+After making changes, rebuild the types package:
+
+```bash
+npm run build -w @automaker/types
+```
+
+### Step 4: Verify the Changes
+
+The new model will automatically appear in:
+
+- **Add Feature Dialog** > Model tab > Cursor CLI section
+- **Edit Feature Dialog** > Model tab > Cursor CLI section
+- **AI Profiles** > Create/Edit Profile > Cursor provider > Model selection
+- **Settings** > Cursor tab > Model configuration
+
+---
+
+## Model Config Fields
+
+| Field            | Type      | Description                                                     |
+| ---------------- | --------- | --------------------------------------------------------------- |
+| `id`             | `string`  | Must match the key in the map and the CLI model ID              |
+| `label`          | `string`  | Human-readable name shown in UI                                 |
+| `description`    | `string`  | Tooltip/help text explaining the model                          |
+| `hasThinking`    | `boolean` | Set `true` if model has built-in extended thinking              |
+| `supportsVision` | `boolean` | Set `true` if model supports image inputs (all false currently) |
+
+---
+
+## How It Works
+
+### Automatic UI Integration
+
+The UI components read from `CURSOR_MODEL_MAP` at runtime:
+
+1. **model-constants.ts** imports `CURSOR_MODEL_MAP` and creates `CURSOR_MODELS` array
+2. **ModelSelector** component renders Cursor models from this array
+3. **ProfileForm** component uses the map for Cursor model selection
+
+### Provider Routing
+
+When a feature uses a Cursor model:
+
+1. The model string is stored as `cursor-{modelId}` (e.g., `cursor-composer-1`)
+2. `ProviderFactory.getProviderNameForModel()` detects the `cursor-` prefix
+3. `CursorProvider` is used for execution
+4. The model ID (without prefix) is passed to the Cursor CLI
+
+---
+
+## Example: Adding a Hypothetical Model
+
+Let's add a hypothetical "cursor-turbo" model:
+
+```typescript
+// In libs/types/src/cursor-models.ts
+
+// Step 1: Add to type
+export type CursorModelId =
+  | 'auto'
+  | 'claude-sonnet-4'
+  // ... other models ...
+  | 'cursor-turbo'; // New model
+
+// Step 2: Add to map
+export const CURSOR_MODEL_MAP: Record<CursorModelId, CursorModelConfig> = {
+  // ... existing entries ...
+
+  'cursor-turbo': {
+    id: 'cursor-turbo',
+    label: 'Cursor Turbo',
+    description: 'Optimized for speed with good quality balance',
+    hasThinking: false,
+    supportsVision: false,
+  },
+};
+```
+
+After rebuilding, "Cursor Turbo" will appear in all model selection UIs.
+
+---
+
+## Checklist
+
+- [ ] Added model ID to `CursorModelId` type
+- [ ] Added config entry to `CURSOR_MODEL_MAP`
+- [ ] Rebuilt types package (`npm run build -w @automaker/types`)
+- [ ] Verified model appears in Add Feature dialog
+- [ ] Verified model appears in AI Profiles form
+- [ ] Tested execution with new model (if Cursor CLI supports it)
+
+---
+
+## Notes
+
+- The model ID must exactly match what Cursor CLI expects
+- Check Cursor's documentation for available models: https://cursor.com/docs
+- Models with `hasThinking: true` display a "Thinking" badge in the UI
+- Currently all models have `supportsVision: false` as Cursor CLI doesn't pass images to models
diff --git a/temp_repo/docs/checkout-branch-pr.md b/temp_repo/docs/checkout-branch-pr.md
new file mode 100644
index 0000000000000000000000000000000000000000..ff86d324bfe2cacf71d2e883fd17bb46b6f4eb54
--- /dev/null
+++ b/temp_repo/docs/checkout-branch-pr.md
@@ -0,0 +1,237 @@
+# Git Workflow: Branch, Commit, Push, and Pull Request
+
+This document outlines the standard workflow for creating a branch, committing changes, pushing to remote, and creating a pull request.
+
+## Prerequisites
+
+- Git installed and configured
+- GitHub CLI (`gh`) installed (optional, but recommended for PR creation)
+- Access to the repository
+- Authentication configured (SSH keys or GitHub CLI authentication)
+
+## Step-by-Step Workflow
+
+### 1. Check Current Status
+
+First, check what changes exist in your working directory:
+
+```bash
+git status
+```
+
+This shows:
+
+- Modified files
+- Deleted files
+- Untracked files
+- Current branch
+
+### 2. Create a New Branch
+
+Create and switch to a new branch for your changes:
+
+```bash
+git checkout -b <branch-name>
+```
+
+**Branch naming conventions:**
+
+- `feature/` - for new features
+- `fix/` or `bugfix/` - for bug fixes
+- `refactor/` - for code refactoring
+- `docs/` - for documentation changes
+- `chore/` - for maintenance tasks
+
+**Example:**
+
+```bash
+git checkout -b refactor/monorepo-restructure
+```
+
+### 3. Stage Changes
+
+Stage all changes (including deletions and new files):
+
+```bash
+git add -A
+```
+
+Or stage specific files:
+
+```bash
+git add <file1> <file2>
+```
+
+### 4. Commit Changes
+
+Create a commit with a descriptive message:
+
+```bash
+git commit -m "type: descriptive commit message"
+```
+
+**Commit message conventions:**
+
+- Use conventional commits format: `type: description`
+- Types: `feat`, `fix`, `refactor`, `docs`, `chore`, `test`, `style`
+- Keep messages concise but descriptive
+
+**Example:**
+
+```bash
+git commit -m "refactor: restructure project to monorepo with apps directory"
+```
+
+### 5. Push Branch to Remote
+
+Push your branch to the remote repository:
+
+```bash
+git push -u origin <branch-name>
+```
+
+The `-u` flag sets up tracking so future pushes can use `git push` without specifying the branch.
+
+**Example:**
+
+```bash
+git push -u origin refactor/monorepo-restructure
+```
+
+### 6. Create Pull Request
+
+#### Option A: Using GitHub CLI (Recommended)
+
+If you have GitHub CLI installed:
+
+```bash
+gh pr create --title "Your PR Title" --body "Description of changes"
+```
+
+To open in browser for review before creating:
+
+```bash
+gh pr create --title "Your PR Title" --body "Description" --web
+```
+
+#### Option B: Using GitHub Web Interface
+
+After pushing, GitHub will provide a URL in the terminal output:
+
+```
+remote: Create a pull request for '<branch-name>' on GitHub by visiting:
+remote:      https://github.com/<org>/<repo>/pull/new/<branch-name>
+```
+
+Visit that URL to create the PR through the web interface.
+
+#### Option C: Manual PR Creation
+
+1. Go to your repository on GitHub
+2. Click "Pull requests" tab
+3. Click "New pull request"
+4. Select your branch as the source
+5. Select the target branch (usually `main` or `master`)
+6. Fill in title and description
+7. Click "Create pull request"
+
+## Complete Example Workflow
+
+```bash
+# 1. Check status
+git status
+
+# 2. Create branch
+git checkout -b feature/add-new-component
+
+# 3. Make your changes (edit files, etc.)
+
+# 4. Stage changes
+git add -A
+
+# 5. Commit
+git commit -m "feat: add new user dashboard component"
+
+# 6. Push
+git push -u origin feature/add-new-component
+
+# 7. Create PR
+gh pr create --title "feat: add new user dashboard component" --body "Implements new dashboard component with user statistics and activity feed."
+```
+
+## Handling Additional Changes
+
+If you need to make more changes after pushing:
+
+```bash
+# Make your changes
+git add -A
+git commit -m "fix: address review feedback"
+git push
+```
+
+The PR will automatically update with the new commits.
+
+## Troubleshooting
+
+### Branch already exists
+
+```bash
+git checkout <existing-branch-name>
+```
+
+### Need to update from main before creating PR
+
+```bash
+git checkout main
+git pull origin main
+git checkout <your-branch>
+git merge main
+# Resolve conflicts if any
+git push
+```
+
+### PR creation fails
+
+- Ensure branch is pushed: `git push -u origin <branch-name>`
+- Check GitHub CLI authentication: `gh auth status`
+- Verify repository access permissions
+- Try creating PR via web interface instead
+
+## Best Practices
+
+1. **Keep branches focused**: One branch = one feature/fix
+2. **Write clear commit messages**: Help reviewers understand changes
+3. **Keep PRs small**: Easier to review and merge
+4. **Update before creating PR**: Merge latest `main` into your branch
+5. **Add tests**: Include tests for new features
+6. **Update documentation**: Keep docs in sync with code changes
+7. **Request reviews**: Tag relevant team members for review
+
+## Quick Reference Commands
+
+```bash
+# Status check
+git status
+
+# Create branch
+git checkout -b <branch-name>
+
+# Stage all changes
+git add -A
+
+# Commit
+git commit -m "type: message"
+
+# Push
+git push -u origin <branch-name>
+
+# Create PR (GitHub CLI)
+gh pr create --title "Title" --body "Description"
+
+# View PR
+gh pr view
+
+# List PRs
+gh pr list
+```
diff --git a/temp_repo/docs/clean-code.md b/temp_repo/docs/clean-code.md
new file mode 100644
index 0000000000000000000000000000000000000000..dfddd80c5c480907eebe7f542a1c8e7ed5d9370b
--- /dev/null
+++ b/temp_repo/docs/clean-code.md
@@ -0,0 +1,464 @@
+# Clean Code Guidelines
+
+## Overview
+
+This document serves as a comprehensive guide for writing clean, maintainable, and extensible code. It outlines principles and practices that ensure code quality, reusability, and long-term maintainability. When writing or reviewing code, follow these guidelines to create software that is easy to understand, modify, and extend. This file is used by LLMs to understand and enforce coding standards throughout the codebase.
+
+---
+
+## Core Principles
+
+### 1. DRY (Don't Repeat Yourself)
+
+**Principle**: Every piece of knowledge should have a single, unambiguous representation within a system.
+
+**Practices**:
+
+- Extract repeated logic into reusable functions, classes, or modules
+- Use constants for repeated values
+- Create shared utilities for common operations
+- Avoid copy-pasting code blocks
+- When you find yourself writing similar code more than twice, refactor it
+
+**Example - Bad**:
+
+```typescript
+// Repeated validation logic
+if (email.includes('@') && email.length > 5) {
+  // ...
+}
+if (email.includes('@') && email.length > 5) {
+  // ...
+}
+```
+
+**Example - Good**:
+
+```typescript
+function isValidEmail(email: string): boolean {
+  return email.includes('@') && email.length > 5;
+}
+
+if (isValidEmail(email)) {
+  // ...
+}
+```
+
+---
+
+### 2. Code Reusability
+
+**Principle**: Write code that can be used in multiple contexts without modification or with minimal adaptation.
+
+**Practices**:
+
+- Create generic, parameterized functions instead of specific ones
+- Use composition over inheritance where appropriate
+- Design functions to be pure (no side effects) when possible
+- Create utility libraries for common operations
+- Use dependency injection to make components reusable
+- Design APIs that are flexible and configurable
+
+**Example - Bad**:
+
+```typescript
+function calculateUserTotal(userId: string) {
+  const user = getUser(userId);
+  return user.items.reduce((sum, item) => sum + item.price, 0);
+}
+```
+
+**Example - Good**:
+
+```typescript
+function calculateTotal<T extends { price: number }>(items: T[]): number {
+  return items.reduce((sum, item) => sum + item.price, 0);
+}
+
+function calculateUserTotal(userId: string) {
+  const user = getUser(userId);
+  return calculateTotal(user.items);
+}
+```
+
+---
+
+### 3. Abstract Functions and Abstractions
+
+**Principle**: Create abstractions that hide implementation details and provide clear, simple interfaces.
+
+**Practices**:
+
+- Use interfaces and abstract classes to define contracts
+- Create abstraction layers between different concerns
+- Hide complex implementation behind simple function signatures
+- Use dependency inversion - depend on abstractions, not concretions
+- Create factory functions/classes for object creation
+- Use strategy pattern for interchangeable algorithms
+
+**Example - Bad**:
+
+```typescript
+function processPayment(amount: number, cardNumber: string, cvv: string) {
+  // Direct implementation tied to specific payment processor
+  fetch('https://stripe.com/api/charge', {
+    method: 'POST',
+    body: JSON.stringify({ amount, cardNumber, cvv }),
+  });
+}
+```
+
+**Example - Good**:
+
+```typescript
+interface PaymentProcessor {
+  processPayment(amount: number, details: PaymentDetails): Promise<PaymentResult>;
+}
+
+class StripeProcessor implements PaymentProcessor {
+  async processPayment(amount: number, details: PaymentDetails): Promise<PaymentResult> {
+    // Implementation
+  }
+}
+
+function processPayment(processor: PaymentProcessor, amount: number, details: PaymentDetails) {
+  return processor.processPayment(amount, details);
+}
+```
+
+---
+
+### 4. Extensibility
+
+**Principle**: Design code that can be easily extended with new features without modifying existing code.
+
+**Practices**:
+
+- Follow the Open/Closed Principle: open for extension, closed for modification
+- Use plugin architectures and hooks for extensibility
+- Design with future requirements in mind (but don't over-engineer)
+- Use configuration over hardcoding
+- Create extension points through interfaces and callbacks
+- Use composition and dependency injection
+- Design APIs that can accommodate new parameters/options
+
+**Example - Bad**:
+
+```typescript
+function sendNotification(user: User, type: string) {
+  if (type === 'email') {
+    sendEmail(user.email);
+  } else if (type === 'sms') {
+    sendSMS(user.phone);
+  }
+  // Adding new notification types requires modifying this function
+}
+```
+
+**Example - Good**:
+
+```typescript
+interface NotificationChannel {
+  send(user: User): Promise<void>;
+}
+
+class EmailChannel implements NotificationChannel {
+  async send(user: User): Promise<void> {
+    // Implementation
+  }
+}
+
+class SMSChannel implements NotificationChannel {
+  async send(user: User): Promise<void> {
+    // Implementation
+  }
+}
+
+class NotificationService {
+  constructor(private channels: NotificationChannel[]) {}
+
+  async send(user: User): Promise<void> {
+    await Promise.all(this.channels.map((channel) => channel.send(user)));
+  }
+}
+// New notification types can be added without modifying existing code
+```
+
+---
+
+### 5. Avoid Magic Numbers and Strings
+
+**Principle**: Use named constants instead of hardcoded values to improve readability and maintainability.
+
+**Practices**:
+
+- Extract all magic numbers into named constants
+- Use enums for related constants
+- Create configuration objects for settings
+- Use constants for API endpoints, timeouts, limits, etc.
+- Document why specific values are used
+
+**Example - Bad**:
+
+```typescript
+if (user.age >= 18) {
+  // What does 18 mean?
+}
+
+setTimeout(() => {
+  // What does 3000 mean?
+}, 3000);
+
+if (status === 'active') {
+  // What are the valid statuses?
+}
+```
+
+**Example - Good**:
+
+```typescript
+const MINIMUM_AGE_FOR_ADULTS = 18;
+const SESSION_TIMEOUT_MS = 3000;
+
+enum UserStatus {
+  ACTIVE = 'active',
+  INACTIVE = 'inactive',
+  SUSPENDED = 'suspended',
+}
+
+if (user.age >= MINIMUM_AGE_FOR_ADULTS) {
+  // Clear intent
+}
+
+setTimeout(() => {
+  // Clear intent
+}, SESSION_TIMEOUT_MS);
+
+if (status === UserStatus.ACTIVE) {
+  // Type-safe and clear
+}
+```
+
+---
+
+## Additional Best Practices
+
+### 6. Single Responsibility Principle
+
+Each function, class, or module should have one reason to change.
+
+**Example**:
+
+```typescript
+// Bad: Multiple responsibilities
+class User {
+  save() {
+    /* database logic */
+  }
+  sendEmail() {
+    /* email logic */
+  }
+  validate() {
+    /* validation logic */
+  }
+}
+
+// Good: Single responsibility
+class User {
+  validate() {
+    /* validation only */
+  }
+}
+
+class UserRepository {
+  save(user: User) {
+    /* database logic */
+  }
+}
+
+class EmailService {
+  sendToUser(user: User) {
+    /* email logic */
+  }
+}
+```
+
+### 7. Meaningful Names
+
+- Use descriptive names that reveal intent
+- Avoid abbreviations unless they're widely understood
+- Use verbs for functions, nouns for classes
+- Be consistent with naming conventions
+
+**Example**:
+
+```typescript
+// Bad
+const d = new Date();
+const u = getUser();
+function calc(x, y) {}
+
+// Good
+const currentDate = new Date();
+const currentUser = getUser();
+function calculateTotal(price: number, quantity: number): number {}
+```
+
+### 8. Small Functions
+
+- Functions should do one thing and do it well
+- Keep functions short (ideally under 20 lines)
+- Extract complex logic into separate functions
+- Use descriptive function names instead of comments
+
+### 9. Error Handling
+
+- Handle errors explicitly
+- Use appropriate error types
+- Provide meaningful error messages
+- Don't swallow errors silently
+- Use try-catch appropriately
+
+**Example**:
+
+```typescript
+// Bad
+function divide(a: number, b: number) {
+  return a / b; // Can throw division by zero
+}
+
+// Good
+function divide(a: number, b: number): number {
+  if (b === 0) {
+    throw new Error('Division by zero is not allowed');
+  }
+  return a / b;
+}
+```
+
+### 10. Comments and Documentation
+
+- Write self-documenting code (code should explain itself)
+- Use comments to explain "why", not "what"
+- Document complex algorithms or business logic
+- Keep comments up-to-date with code changes
+- Use JSDoc/TSDoc for public APIs
+
+### 11. Type Safety
+
+- Use TypeScript types/interfaces effectively
+- Avoid `any` type unless absolutely necessary
+- Use union types and discriminated unions
+- Leverage type inference where appropriate
+- Create custom types for domain concepts
+
+**Example**:
+
+```typescript
+// Bad
+function processUser(data: any) {
+  return data.name;
+}
+
+// Good
+interface User {
+  id: string;
+  name: string;
+  email: string;
+}
+
+function processUser(user: User): string {
+  return user.name;
+}
+```
+
+### 12. Testing Considerations
+
+- Write testable code (pure functions, dependency injection)
+- Keep functions small and focused
+- Avoid hidden dependencies
+- Use mocks and stubs appropriately
+- Design for testability from the start
+
+### 13. Performance vs. Readability
+
+- Prefer readability over premature optimization
+- Profile before optimizing
+- Use clear algorithms first, optimize if needed
+- Document performance-critical sections
+- Balance between clean code and performance requirements
+
+### 14. Code Organization
+
+- Group related functionality together
+- Use modules/packages to organize code
+- Follow consistent file and folder structures
+- Separate concerns (UI, business logic, data access)
+- Use barrel exports (index files) appropriately
+
+### 15. Configuration Management
+
+- Externalize configuration values
+- Use environment variables for environment-specific settings
+- Create configuration objects/interfaces
+- Validate configuration at startup
+- Provide sensible defaults
+
+**Example**:
+
+```typescript
+// Bad
+const apiUrl = 'https://api.example.com';
+const timeout = 5000;
+
+// Good
+interface Config {
+  apiUrl: string;
+  timeout: number;
+  maxRetries: number;
+}
+
+const config: Config = {
+  apiUrl: process.env.API_URL || 'https://api.example.com',
+  timeout: parseInt(process.env.TIMEOUT || '5000'),
+  maxRetries: parseInt(process.env.MAX_RETRIES || '3'),
+};
+```
+
+---
+
+## Code Review Checklist
+
+When reviewing code, check for:
+
+- [ ] No code duplication (DRY principle)
+- [ ] Meaningful variable and function names
+- [ ] No magic numbers or strings
+- [ ] Functions are small and focused
+- [ ] Proper error handling
+- [ ] Type safety maintained
+- [ ] Code is testable
+- [ ] Documentation where needed
+- [ ] Consistent code style
+- [ ] Proper abstraction levels
+- [ ] Extensibility considered
+- [ ] Single responsibility principle followed
+
+---
+
+## Summary
+
+Clean code is:
+
+- **Readable**: Easy to understand at a glance
+- **Maintainable**: Easy to modify and update
+- **Testable**: Easy to write tests for
+- **Extensible**: Easy to add new features
+- **Reusable**: Can be used in multiple contexts
+- **Well-documented**: Clear intent and purpose
+- **Type-safe**: Leverages type system effectively
+- **DRY**: No unnecessary repetition
+- **Abstracted**: Proper separation of concerns
+- **Configurable**: Uses constants and configuration over hardcoding
+
+Remember: Code is read far more often than it is written. Write code for your future self and your teammates.
diff --git a/temp_repo/docs/context-files-pattern.md b/temp_repo/docs/context-files-pattern.md
new file mode 100644
index 0000000000000000000000000000000000000000..c35bfe5342fe1257061a7f8e93be9162296ff571
--- /dev/null
+++ b/temp_repo/docs/context-files-pattern.md
@@ -0,0 +1,170 @@
+# Context Files System
+
+This document describes how context files work in Automaker and how to use them in agent prompts.
+
+## Overview
+
+Context files are user-defined documents stored in `.automaker/context/` that provide project-specific rules, conventions, and guidelines for AI agents. They are automatically loaded and prepended to agent prompts.
+
+## Directory Structure
+
+```
+{projectPath}/.automaker/context/
+├── CLAUDE.md              # Project rules and conventions
+├── CODE_QUALITY.md        # Code quality guidelines
+├── context-metadata.json  # File descriptions
+└── ... (any .md or .txt files)
+```
+
+## Metadata
+
+File descriptions are stored in `context-metadata.json`:
+
+```json
+{
+  "files": {
+    "CLAUDE.md": {
+      "description": "Project-specific rules including package manager, commit conventions, and architectural patterns"
+    },
+    "CODE_QUALITY.md": {
+      "description": "Code quality standards, testing requirements, and linting rules"
+    }
+  }
+}
+```
+
+## Shared Utility
+
+The `loadContextFiles` function from `@automaker/utils` provides a unified way to load context files:
+
+```typescript
+import { loadContextFiles } from '@automaker/utils';
+
+// Load context files from a project
+const { formattedPrompt, files } = await loadContextFiles({
+  projectPath: '/path/to/project',
+  // Optional: inject custom fs module for secure operations
+  fsModule: secureFs,
+});
+
+// formattedPrompt contains the formatted system prompt
+// files contains metadata about each loaded file
+```
+
+### Return Value
+
+```typescript
+interface ContextFilesResult {
+  files: ContextFileInfo[]; // Individual file info
+  formattedPrompt: string; // Formatted prompt ready to use
+}
+
+interface ContextFileInfo {
+  name: string; // File name (e.g., "CLAUDE.md")
+  path: string; // Full path to file
+  content: string; // File contents
+  description?: string; // From metadata (explains when/why to use)
+}
+```
+
+## Usage in Services
+
+### Auto-Mode Service (Feature Execution)
+
+```typescript
+import { loadContextFiles } from '@automaker/utils';
+import * as secureFs from '../lib/secure-fs.js';
+
+// In executeFeature() or followUpFeature()
+const { formattedPrompt: contextFilesPrompt } = await loadContextFiles({
+  projectPath,
+  fsModule: secureFs as Parameters<typeof loadContextFiles>[0]['fsModule'],
+});
+
+// Pass as system prompt
+await this.runAgent(workDir, featureId, prompt, abortController, projectPath, imagePaths, model, {
+  projectPath,
+  systemPrompt: contextFilesPrompt || undefined,
+});
+```
+
+### Agent Service (Chat Sessions)
+
+```typescript
+import { loadContextFiles } from '@automaker/utils';
+import * as secureFs from '../lib/secure-fs.js';
+
+// In sendMessage()
+const { formattedPrompt: contextFilesPrompt } = await loadContextFiles({
+  projectPath: effectiveWorkDir,
+  fsModule: secureFs as Parameters<typeof loadContextFiles>[0]['fsModule'],
+});
+
+// Combine with base system prompt
+const combinedSystemPrompt = contextFilesPrompt
+  ? `${contextFilesPrompt}\n\n${baseSystemPrompt}`
+  : baseSystemPrompt;
+```
+
+## Formatted Prompt Structure
+
+The formatted prompt includes:
+
+1. **Header** - Emphasizes that these are project-specific rules
+2. **File Entries** - Each file with:
+   - File name
+   - Full path (for agents to read more if needed)
+   - Purpose/description (from metadata)
+   - Full file content
+3. **Reminder** - Reinforces that agents must follow the conventions
+
+Example output:
+
+```markdown
+# Project Context Files
+
+The following context files provide project-specific rules, conventions, and guidelines.
+Each file serves a specific purpose - use the description to understand when to reference it.
+If you need more details about a context file, you can read the full file at the path provided.
+
+**IMPORTANT**: You MUST follow the rules and conventions specified in these files.
+
+- Follow ALL commands exactly as shown (e.g., if the project uses `pnpm`, NEVER use `npm` or `npx`)
+- Follow ALL coding conventions, commit message formats, and architectural patterns specified
+- Reference these rules before running ANY shell commands or making commits
+
+---
+
+## CLAUDE.md
+
+**Path:** `/path/to/project/.automaker/context/CLAUDE.md`
+**Purpose:** Project-specific rules including package manager, commit conventions, and architectural patterns
+
+[File content here]
+
+---
+
+## CODE_QUALITY.md
+
+**Path:** `/path/to/project/.automaker/context/CODE_QUALITY.md`
+**Purpose:** Code quality standards, testing requirements, and linting rules
+
+[File content here]
+
+---
+
+**REMINDER**: Before taking any action, verify you are following the conventions specified above.
+```
+
+## Best Practices
+
+1. **Add descriptions** - Always add descriptions to `context-metadata.json` so agents understand when to reference each file
+2. **Be specific** - Context files should contain concrete rules, not general guidelines
+3. **Include examples** - Show correct command usage, commit formats, etc.
+4. **Keep focused** - Each file should have a single purpose
+
+## File Locations
+
+- **Shared Utility**: `libs/utils/src/context-loader.ts`
+- **Auto-Mode Service**: `apps/server/src/services/auto-mode-service.ts`
+- **Agent Service**: `apps/server/src/services/agent-service.ts`
diff --git a/temp_repo/docs/folder-pattern.md b/temp_repo/docs/folder-pattern.md
new file mode 100644
index 0000000000000000000000000000000000000000..ce4319591bb9344353b6676ca02e11cbcafe2a7a
--- /dev/null
+++ b/temp_repo/docs/folder-pattern.md
@@ -0,0 +1,167 @@
+# Folder & Naming Pattern Guide
+
+This document defines the folder structure and naming conventions used in this codebase.
+
+## File Naming Convention
+
+**All files use kebab-case** (lowercase with hyphens):
+
+```
+✅ add-feature-dialog.tsx
+✅ use-board-actions.ts
+✅ board-view.tsx
+
+❌ AddFeatureDialog.tsx
+❌ useBoardActions.ts
+❌ BoardView.tsx
+```
+
+## Export Naming Convention
+
+While files use kebab-case, **exports use PascalCase for components and camelCase for hooks/functions**:
+
+```tsx
+// File: add-feature-dialog.tsx
+export function AddFeatureDialog() { ... }
+
+// File: use-board-actions.ts
+export function useBoardActions() { ... }
+```
+
+## View Folder Structure
+
+Each complex view should have its own folder with the following structure:
+
+```
+components/views/
+├── [view-name].tsx              # Entry point (exports the main view)
+└── [view-name]/                 # Subfolder for complex views
+    ├── components/              # View-specific reusable components
+    │   ├── index.ts             # Barrel export
+    │   └── [component].tsx      # Individual components
+    ├── dialogs/                 # View-specific dialogs and modals
+    │   ├── index.ts             # Barrel export
+    │   └── [dialog-name].tsx    # Individual dialogs/modals
+    ├── hooks/                   # View-specific hooks
+    │   ├── index.ts             # Barrel export
+    │   └── use-[name].ts        # Individual hooks
+    ├── shared/                  # Shared utilities between components
+    │   ├── index.ts             # Barrel export
+    │   └── [name].ts            # Shared code
+    ├── constants.ts             # View constants
+    ├── types.ts                 # View-specific types (optional)
+    ├── utils.ts                 # View utilities (optional)
+    └── [main-component].tsx     # Main view components (e.g., kanban-board.tsx)
+```
+
+## Example: board-view
+
+```
+components/views/
+├── board-view.tsx                           # Entry point
+└── board-view/
+    ├── components/
+    │   ├── index.ts
+    │   ├── kanban-card.tsx
+    │   └── kanban-column.tsx
+    ├── dialogs/
+    │   ├── index.ts
+    │   ├── add-feature-dialog.tsx
+    │   ├── edit-feature-dialog.tsx
+    │   ├── follow-up-dialog.tsx
+    │   ├── delete-all-verified-dialog.tsx
+    │   ├── delete-completed-feature-dialog.tsx
+    │   ├── completed-features-modal.tsx
+    │   ├── agent-output-modal.tsx
+    │   └── feature-suggestions-dialog.tsx
+    ├── hooks/
+    │   ├── index.ts
+    │   ├── use-board-actions.ts
+    │   ├── use-board-features.ts
+    │   └── use-board-drag-drop.ts
+    ├── shared/
+    │   ├── index.ts
+    │   ├── model-constants.ts
+    │   └── model-selector.tsx
+    ├── constants.ts
+    └── kanban-board.tsx
+```
+
+## Global vs View-Specific Code
+
+### Global (`src/hooks/`, `src/lib/`, etc.)
+
+Code that is used across **multiple views**:
+
+- `src/hooks/use-auto-mode.ts` - Used by board-view, agent-view, etc.
+- `src/hooks/use-keyboard-shortcuts.ts` - Used across the app
+- `src/lib/utils.ts` - Global utilities
+
+### View-Specific (`[view-name]/hooks/`, `[view-name]/components/`)
+
+Code that is **only used within a single view**:
+
+- `board-view/hooks/use-board-actions.ts` - Only used by board-view
+- `board-view/components/kanban-card.tsx` - Only used by board-view
+
+## Barrel Exports
+
+Use `index.ts` files to create clean import paths:
+
+```tsx
+// board-view/hooks/index.ts
+export { useBoardActions } from './use-board-actions';
+export { useBoardFeatures } from './use-board-features';
+
+// Usage in board-view.tsx
+import { useBoardActions, useBoardFeatures } from './board-view/hooks';
+```
+
+## When to Create a Subfolder
+
+Create a subfolder for a view when:
+
+1. The view file exceeds ~500 lines
+2. The view has 3+ related components
+3. The view has 2+ custom hooks
+4. Multiple dialogs/modals are specific to the view
+
+## Dialogs Folder
+
+The `dialogs/` folder contains all dialog and modal components specific to a view:
+
+### What goes in `dialogs/`:
+
+- Confirmation dialogs (e.g., `delete-all-verified-dialog.tsx`)
+- Form dialogs (e.g., `add-feature-dialog.tsx`, `edit-feature-dialog.tsx`)
+- Modal overlays (e.g., `agent-output-modal.tsx`, `completed-features-modal.tsx`)
+- Any component that renders as an overlay/popup
+
+### Naming convention:
+
+- Use `-dialog.tsx` suffix for confirmation/form dialogs
+- Use `-modal.tsx` suffix for content-heavy modals
+
+### Barrel export pattern:
+
+```tsx
+// dialogs/index.ts
+export { AddFeatureDialog } from './add-feature-dialog';
+export { EditFeatureDialog } from './edit-feature-dialog';
+export { AgentOutputModal } from './agent-output-modal';
+// ... etc
+
+// Usage in view entry point
+import { AddFeatureDialog, EditFeatureDialog, AgentOutputModal } from './board-view/dialogs';
+```
+
+## Quick Reference
+
+| Location   | File Naming                     | Export Naming          |
+| ---------- | ------------------------------- | ---------------------- |
+| Components | `kebab-case.tsx`                | `PascalCase`           |
+| Dialogs    | `*-dialog.tsx` or `*-modal.tsx` | `PascalCase`           |
+| Hooks      | `use-kebab-case.ts`             | `camelCase`            |
+| Utils/Lib  | `kebab-case.ts`                 | `camelCase`            |
+| Types      | `kebab-case.ts`                 | `PascalCase`           |
+| Constants  | `constants.ts`                  | `SCREAMING_SNAKE_CASE` |
diff --git a/temp_repo/docs/install-fedora.md b/temp_repo/docs/install-fedora.md
new file mode 100644
index 0000000000000000000000000000000000000000..e43a3ccf6a83126fc96a23226f4d469f06b068b1
--- /dev/null
+++ b/temp_repo/docs/install-fedora.md
@@ -0,0 +1,485 @@
+# Installing Automaker on Fedora/RHEL
+
+This guide covers installation of Automaker on Fedora, RHEL, Rocky Linux, AlmaLinux, and other RPM-based distributions.
+
+## Prerequisites
+
+Automaker requires:
+
+- **64-bit x86_64 architecture**
+- **Fedora 39+** or **RHEL 9+** (earlier versions may work but not officially supported)
+- **4GB RAM minimum**, 8GB recommended
+- **~300MB disk space** for installation
+- **Internet connection** for installation and Claude API access
+
+### Authentication
+
+You'll need one of the following:
+
+- **Claude CLI** (recommended) - `claude login`
+- **API key** - Set `ANTHROPIC_API_KEY` environment variable
+
+See main [README.md authentication section](../README.md#authentication) for details.
+
+## Installation
+
+### Option 1: Download and Install from GitHub
+
+1. Visit [GitHub Releases](https://github.com/AutoMaker-Org/automaker/releases)
+2. Find the latest release and download the `.rpm` file:
+   - Download: `Automaker-<version>-x86_64.rpm`
+
+3. Install using dnf (Fedora):
+
+   ```bash
+   sudo dnf install ./Automaker-<version>-x86_64.rpm
+   ```
+
+   Or using yum (RHEL/CentOS):
+
+   ```bash
+   sudo yum localinstall ./Automaker-<version>-x86_64.rpm
+   ```
+
+### Option 2: Install Directly from URL
+
+Install from GitHub releases URL without downloading first. Visit [releases page](https://github.com/AutoMaker-Org/automaker/releases) to find the latest version.
+
+**Fedora:**
+
+```bash
+# Replace v0.11.0 with the actual latest version
+sudo dnf install https://github.com/AutoMaker-Org/automaker/releases/download/v0.11.0/Automaker-0.11.0-x86_64.rpm
+```
+
+**RHEL/CentOS:**
+
+```bash
+# Replace v0.11.0 with the actual latest version
+sudo yum install https://github.com/AutoMaker-Org/automaker/releases/download/v0.11.0/Automaker-0.11.0-x86_64.rpm
+```
+
+## Running Automaker
+
+After successful installation, launch Automaker:
+
+### From Application Menu
+
+- Open Activities/Applications
+- Search for "Automaker"
+- Click to launch
+
+### From Terminal
+
+```bash
+automaker
+```
+
+## System Requirements & Capabilities
+
+### Hardware Requirements
+
+| Component    | Minimum           | Recommended |
+| ------------ | ----------------- | ----------- |
+| CPU          | Modern multi-core | 4+ cores    |
+| RAM          | 4GB               | 8GB+        |
+| Disk         | 300MB             | 1GB+        |
+| Architecture | x86_64            | x86_64      |
+
+### Required Dependencies
+
+The RPM package automatically installs these dependencies:
+
+```
+gtk3              - GTK+ GUI library
+libnotify         - Desktop notification library
+nss               - Network Security Services
+libXScrnSaver     - X11 screensaver library
+libXtst           - X11 testing library
+xdg-utils         - XDG standards utilities
+at-spi2-core      - Accessibility library
+libuuid           - UUID library
+```
+
+Most of these are pre-installed on typical Fedora/RHEL systems.
+
+### Optional Dependencies
+
+For development (source builds only):
+
+- Node.js 22+
+- npm 10+
+
+The packaged application includes its own Electron runtime and does not require system Node.js.
+
+## Supported Distributions
+
+**Officially Tested:**
+
+- Fedora 39, 40 (latest)
+- Rocky Linux 9
+- AlmaLinux 9
+
+**Should Work:**
+
+- CentOS Stream 9+
+- openSUSE Leap/Tumbleweed (with compatibility layer)
+- RHEL 9+
+
+**Not Supported:**
+
+- RHEL 8 (glibc 2.28 too old, requires Node.js 22)
+- CentOS 7 and earlier
+- Fedora versions older than 39
+
+## Configuration
+
+### Environment Variables
+
+Set authentication via environment variable:
+
+```bash
+export ANTHROPIC_API_KEY=sk-ant-...
+automaker
+```
+
+Or create `~/.config/automaker/.env`:
+
+```
+ANTHROPIC_API_KEY=sk-ant-...
+```
+
+### Configuration Directory
+
+Automaker stores configuration and cache in:
+
+```
+~/.automaker/                # Project-specific data
+~/.config/automaker/         # Application configuration
+~/.cache/automaker/          # Cache and temporary files
+```
+
+## Troubleshooting
+
+### Application Won't Start
+
+**Check installation:**
+
+```bash
+rpm -qi automaker
+rpm -V automaker
+```
+
+**Verify desktop file:**
+
+```bash
+cat /usr/share/applications/automaker.desktop
+```
+
+**Run from terminal for error output:**
+
+```bash
+automaker
+```
+
+### Missing Dependencies
+
+If dependencies fail to install automatically:
+
+**Fedora:**
+
+```bash
+sudo dnf install gtk3 libnotify nss libXScrnSaver libXtst xdg-utils at-spi2-core libuuid
+```
+
+**RHEL/CentOS (enable EPEL first if needed):**
+
+```bash
+sudo dnf install epel-release
+sudo dnf install gtk3 libnotify nss libXScrnSaver libXtst xdg-utils at-spi2-core libuuid
+```
+
+### SELinux Denials
+
+If Automaker fails on SELinux-enforced systems:
+
+**Temporary workaround (testing):**
+
+```bash
+# Set SELinux to permissive mode
+sudo setenforce 0
+
+# Run Automaker
+automaker
+
+# Check for denials
+sudo ausearch -m avc -ts recent | grep automaker
+
+# Re-enable SELinux
+sudo setenforce 1
+```
+
+**Permanent fix (not recommended for production):**
+Create custom SELinux policy based on ausearch output. For support, see [GitHub Issues](https://github.com/AutoMaker-Org/automaker/issues).
+
+### Port Conflicts
+
+Automaker uses port 3008 for the internal server. If port is already in use:
+
+**Find process using port 3008:**
+
+```bash
+sudo ss -tlnp | grep 3008
+# or
+lsof -i :3008
+```
+
+**Kill conflicting process (if safe):**
+
+```bash
+sudo kill -9 <PID>
+```
+
+Or configure Automaker to use different port (see Configuration section).
+
+### Firewall Issues
+
+On Fedora with firewalld enabled:
+
+```bash
+# Allow internal traffic (local development only)
+sudo firewall-cmd --add-port=3008/tcp
+sudo firewall-cmd --permanent --add-port=3008/tcp
+```
+
+### GPU/Acceleration
+
+Automaker uses Chromium for rendering. GPU acceleration should work automatically on supported systems.
+
+**Check acceleration:**
+
+- Look for "GPU acceleration" status in application settings
+- Verify drivers: `lspci | grep VGA`
+
+**Disable acceleration if issues occur:**
+
+```bash
+DISABLE_GPU_ACCELERATION=1 automaker
+```
+
+### Terminal/Worktree Issues
+
+If terminal emulator fails or git worktree operations hang:
+
+1. Check disk space: `df -h`
+2. Verify git installation: `git --version`
+3. Check /tmp permissions: `ls -la /tmp`
+4. File a GitHub issue with error output
+
+### Unresponsive GUI
+
+If the application freezes:
+
+1. Wait 30 seconds (AI operations may be processing)
+2. Check process: `ps aux | grep automaker`
+3. Force quit if necessary: `killall automaker`
+4. Check system resources: `free -h`, `top`
+
+### Network Issues
+
+If Claude API calls fail:
+
+```bash
+# Test internet connectivity
+ping -c 3 api.anthropic.com
+
+# Test API access
+curl -I https://api.anthropic.com
+
+# Verify API key is set (without exposing the value)
+[ -n "$ANTHROPIC_API_KEY" ] && echo "API key is set" || echo "API key is NOT set"
+```
+
+## Uninstallation
+
+### Remove Application
+
+**Fedora:**
+
+```bash
+sudo dnf remove automaker
+```
+
+**RHEL/CentOS:**
+
+```bash
+sudo yum remove automaker
+```
+
+### Clean Configuration (Optional)
+
+Remove all user data and configuration:
+
+```bash
+# Remove project-specific data
+rm -rf ~/.automaker
+
+# Remove application configuration
+rm -rf ~/.config/automaker
+
+# Remove cache
+rm -rf ~/.cache/automaker
+```
+
+**Warning:** This removes all saved projects and settings. Ensure you have backups if needed.
+
+## Building from Source
+
+To build Automaker from source on Fedora/RHEL:
+
+**Prerequisites:**
+
+```bash
+# Fedora
+sudo dnf install nodejs npm git
+
+# RHEL (enable EPEL first)
+sudo dnf install epel-release
+sudo dnf install nodejs npm git
+```
+
+**Build steps:**
+
+```bash
+# Clone repository
+git clone https://github.com/AutoMaker-Org/automaker.git
+cd automaker
+
+# Install dependencies
+npm install
+
+# Build packages
+npm run build:packages
+
+# Build Linux packages
+npm run build:electron:linux
+
+# Packages in: apps/ui/release/
+ls apps/ui/release/*.rpm
+```
+
+See main [README.md](../README.md) for detailed build instructions.
+
+## Updating Automaker
+
+**Automatic Updates:**
+Automaker checks for updates on startup. Install available updates through notifications.
+
+**Manual Update:**
+
+```bash
+# Fedora
+sudo dnf update automaker
+
+# RHEL/CentOS
+sudo yum update automaker
+
+# Or reinstall latest release
+sudo dnf remove automaker
+
+# Download the latest .rpm from releases page
+# https://github.com/AutoMaker-Org/automaker/releases
+# Then reinstall with:
+# sudo dnf install ./Automaker-<VERSION>-x86_64.rpm
+```
+
+## Getting Help
+
+### Resources
+
+- [Main README](../README.md) - Project overview
+- [CONTRIBUTING.md](../CONTRIBUTING.md) - Contributing guide
+- [GitHub Issues](https://github.com/AutoMaker-Org/automaker/issues) - Bug reports & feature requests
+- [Discussions](https://github.com/AutoMaker-Org/automaker/discussions) - Questions & community
+
+### Reporting Issues
+
+When reporting Fedora/RHEL issues, include:
+
+```bash
+# System information
+lsb_release -a
+uname -m
+
+# Automaker version
+rpm -qi automaker
+
+# Error output (run from terminal)
+automaker 2>&1 | tee automaker.log
+
+# SELinux status
+getenforce
+
+# Relevant system logs
+sudo journalctl -xeu automaker.service (if systemd service exists)
+```
+
+## Performance Tips
+
+1. **Use SSD**: Faster than spinning disk, significantly improves performance
+2. **Close unnecessary applications**: Free up RAM for AI agent processing
+3. **Disable GPU acceleration if glitchy**: Set `DISABLE_GPU_ACCELERATION=1`
+4. **Keep system updated**: `sudo dnf update`
+5. **Use latest Fedora/RHEL**: Newer versions have better Electron support
+
+## Security Considerations
+
+### API Key Security
+
+Never commit API keys to version control:
+
+```bash
+# Good: Use environment variable
+export ANTHROPIC_API_KEY=sk-ant-...
+
+# Good: Use .env file (not in git)
+echo "ANTHROPIC_API_KEY=sk-ant-..." > ~/.config/automaker/.env
+
+# Bad: Hardcoded in files
+ANTHROPIC_API_KEY="sk-ant-..." (in any tracked file)
+```
+
+### SELinux Security
+
+Running with SELinux disabled (`setenforce 0`) reduces security. Create custom policy:
+
+1. Generate policy from audit logs: `ausearch -m avc -ts recent | grep automaker`
+2. Use selinux-policy tools to create module
+3. Install and test module
+4. Keep SELinux enforcing
+
+### File Permissions
+
+Ensure configuration files are readable by user only:
+
+```bash
+chmod 600 ~/.config/automaker/.env
+chmod 700 ~/.automaker/
+chmod 700 ~/.config/automaker/
+```
+
+## Known Limitations
+
+1. **Single display support**: Multi-monitor setups may have cursor synchronization issues
+2. **X11 only**: Wayland support limited (runs under XWayland)
+3. **No native systemd service**: Manual launcher or desktop file shortcut
+4. **ARM/ARM64**: Not supported, x86_64 only
+
+## Contributing
+
+Found an issue or want to improve Fedora support? See [CONTRIBUTING.md](../CONTRIBUTING.md).
+
+---
+
+**Last Updated**: 2026-01-16
+**Tested On**: Fedora 40, Rocky Linux 9, AlmaLinux 9
diff --git a/temp_repo/docs/llm-shared-packages.md b/temp_repo/docs/llm-shared-packages.md
new file mode 100644
index 0000000000000000000000000000000000000000..9f558c9603fbf9fd5cbae5e4edd7f00c3827d54b
--- /dev/null
+++ b/temp_repo/docs/llm-shared-packages.md
@@ -0,0 +1,450 @@
+# AutoMaker Shared Packages - LLM Guide
+
+This guide helps AI assistants understand how to use AutoMaker's shared packages effectively.
+
+## Package Overview
+
+AutoMaker uses a monorepo structure with shared packages in `libs/`:
+
+```
+libs/
+├── types/              # Type definitions (no dependencies)
+├── utils/              # Utility functions
+├── prompts/            # AI prompt templates
+├── platform/           # Platform utilities
+├── model-resolver/     # Claude model resolution
+├── dependency-resolver/# Feature dependency resolution
+└── git-utils/          # Git operations
+```
+
+## When to Use Each Package
+
+### @automaker/types
+
+**Use when:** You need type definitions for any AutoMaker concept.
+
+**Import for:**
+
+- `Feature` - Feature interface with all properties
+- `ExecuteOptions` - Claude agent execution options
+- `ConversationMessage` - Chat message format
+- `ErrorType`, `ErrorInfo` - Error handling types
+- `CLAUDE_MODEL_MAP` - Model alias to ID mapping
+- `DEFAULT_MODELS` - Default model configurations
+
+**Example:**
+
+```typescript
+import type { Feature, ExecuteOptions } from '@automaker/types';
+```
+
+**Never import from:** `services/feature-loader`, `providers/types`
+
+### @automaker/utils
+
+**Use when:** You need common utilities like logging, error handling, or image processing.
+
+**Import for:**
+
+- `createLogger(context)` - Structured logging
+- `isAbortError(error)` - Error type checking
+- `classifyError(error)` - Error classification
+- `buildPromptWithImages()` - Prompt building with images
+- `readImageAsBase64()` - Image handling
+- `extractTextFromContent()` - Message parsing
+
+**Example:**
+
+```typescript
+import { createLogger, classifyError } from '@automaker/utils';
+```
+
+**Never import from:** `lib/logger`, `lib/error-handler`, `lib/prompt-builder`, `lib/image-handler`
+
+### @automaker/prompts
+
+**Use when:** You need AI prompt templates for text enhancement or other AI-powered features.
+
+**Import for:**
+
+- `getEnhancementPrompt(mode)` - Get complete prompt for enhancement mode
+- `getSystemPrompt(mode)` - Get system prompt for specific mode
+- `getExamples(mode)` - Get few-shot examples for a mode
+- `buildUserPrompt(description, mode)` - Build user prompt with examples
+- `isValidEnhancementMode(mode)` - Check if mode is valid
+- `IMPROVE_SYSTEM_PROMPT` - System prompt for improving vague descriptions
+- `TECHNICAL_SYSTEM_PROMPT` - System prompt for adding technical details
+- `SIMPLIFY_SYSTEM_PROMPT` - System prompt for simplifying verbose text
+- `ACCEPTANCE_SYSTEM_PROMPT` - System prompt for adding acceptance criteria
+
+**Example:**
+
+```typescript
+import { getEnhancementPrompt, isValidEnhancementMode } from '@automaker/prompts';
+
+if (isValidEnhancementMode('improve')) {
+  const { systemPrompt, userPrompt } = getEnhancementPrompt('improve', description);
+  const result = await callClaude(systemPrompt, userPrompt);
+}
+```
+
+**Never import from:** `lib/enhancement-prompts`
+
+**Enhancement modes:**
+
+- `improve` - Transform vague requests into clear, actionable tasks
+- `technical` - Add implementation details and technical specifications
+- `simplify` - Make verbose descriptions concise and focused
+- `acceptance` - Add testable acceptance criteria
+
+### @automaker/platform
+
+**Use when:** You need to work with AutoMaker's directory structure or spawn processes.
+
+**Import for:**
+
+- `getAutomakerDir(projectPath)` - Get .automaker directory
+- `getFeaturesDir(projectPath)` - Get features directory
+- `getFeatureDir(projectPath, featureId)` - Get specific feature directory
+- `ensureAutomakerDir(projectPath)` - Create .automaker if needed
+- `spawnJSONLProcess()` - Spawn process with JSONL output
+- `initAllowedPaths()` - Security path validation
+
+**Example:**
+
+```typescript
+import { getFeatureDir, ensureAutomakerDir } from '@automaker/platform';
+```
+
+**Never import from:** `lib/automaker-paths`, `lib/subprocess-manager`, `lib/security`
+
+### @automaker/model-resolver
+
+**Use when:** You need to convert model aliases to full model IDs.
+
+**Import for:**
+
+- `resolveModelString(modelOrAlias)` - Convert alias to full ID
+- `DEFAULT_MODELS` - Access default models
+
+**Example:**
+
+```typescript
+import { resolveModelString, DEFAULT_MODELS } from '@automaker/model-resolver';
+
+// Convert user input to model ID
+const modelId = resolveModelString('sonnet'); // → 'claude-sonnet-4-20250514'
+```
+
+**Never import from:** `lib/model-resolver`
+
+**Model aliases:**
+
+- `haiku` → `claude-haiku-4-5` (fast, simple tasks)
+- `sonnet` → `claude-sonnet-4-20250514` (balanced, recommended)
+- `opus` → `claude-opus-4-6` (maximum capability)
+
+### @automaker/dependency-resolver
+
+**Use when:** You need to order features by dependencies or check if dependencies are satisfied.
+
+**Import for:**
+
+- `resolveDependencies(features)` - Topological sort with priority
+- `areDependenciesSatisfied(feature, allFeatures)` - Check if ready to execute
+- `getBlockingDependencies(feature, allFeatures)` - Get incomplete dependencies
+
+**Example:**
+
+```typescript
+import { resolveDependencies, areDependenciesSatisfied } from '@automaker/dependency-resolver';
+
+const { orderedFeatures, hasCycle } = resolveDependencies(features);
+if (!hasCycle) {
+  for (const feature of orderedFeatures) {
+    if (areDependenciesSatisfied(feature, features)) {
+      await execute(feature);
+    }
+  }
+}
+```
+
+**Never import from:** `lib/dependency-resolver`
+
+**Used in:**
+
+- Auto-mode feature execution (server)
+- Board view feature ordering (UI)
+
+### @automaker/git-utils
+
+**Use when:** You need git operations, status parsing, or diff generation.
+
+**Import for:**
+
+- `isGitRepo(path)` - Check if path is a git repository
+- `parseGitStatus(output)` - Parse `git status --porcelain` output
+- `getGitRepositoryDiffs(path)` - Get complete diffs (tracked + untracked)
+- `generateSyntheticDiffForNewFile()` - Create diff for untracked file
+- `listAllFilesInDirectory()` - List files excluding build artifacts
+
+**Example:**
+
+```typescript
+import { isGitRepo, getGitRepositoryDiffs } from '@automaker/git-utils';
+
+if (await isGitRepo(projectPath)) {
+  const { diff, files, hasChanges } = await getGitRepositoryDiffs(projectPath);
+  console.log(`Found ${files.length} changed files`);
+}
+```
+
+**Never import from:** `routes/common`
+
+**Handles:**
+
+- Binary file detection
+- Large file handling (>1MB)
+- Untracked file diffs
+- Non-git directory support
+
+## Common Patterns
+
+### Creating a Feature Executor
+
+```typescript
+import type { Feature, ExecuteOptions } from '@automaker/types';
+import { createLogger, classifyError } from '@automaker/utils';
+import { resolveModelString, DEFAULT_MODELS } from '@automaker/model-resolver';
+import { areDependenciesSatisfied } from '@automaker/dependency-resolver';
+import { getFeatureDir } from '@automaker/platform';
+
+const logger = createLogger('FeatureExecutor');
+
+async function executeFeature(feature: Feature, allFeatures: Feature[], projectPath: string) {
+  // Check dependencies
+  if (!areDependenciesSatisfied(feature, allFeatures)) {
+    logger.warn(`Dependencies not satisfied for ${feature.id}`);
+    return;
+  }
+
+  // Resolve model
+  const model = resolveModelString(feature.model, DEFAULT_MODELS.autoMode);
+
+  // Get feature directory
+  const featureDir = getFeatureDir(projectPath, feature.id);
+
+  try {
+    // Execute with Claude
+    const options: ExecuteOptions = {
+      model,
+      temperature: 0.7,
+    };
+
+    await runAgent(featureDir, options);
+
+    logger.info(`Feature ${feature.id} completed`);
+  } catch (error) {
+    const errorInfo = classifyError(error);
+    logger.error(`Feature ${feature.id} failed:`, errorInfo.message);
+  }
+}
+```
+
+### Analyzing Git Changes
+
+```typescript
+import { getGitRepositoryDiffs, parseGitStatus } from '@automaker/git-utils';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('GitAnalyzer');
+
+async function analyzeChanges(projectPath: string) {
+  const { diff, files, hasChanges } = await getGitRepositoryDiffs(projectPath);
+
+  if (!hasChanges) {
+    logger.info('No changes detected');
+    return;
+  }
+
+  // Group by status
+  const modified = files.filter((f) => f.status === 'M');
+  const added = files.filter((f) => f.status === 'A');
+  const deleted = files.filter((f) => f.status === 'D');
+  const untracked = files.filter((f) => f.status === '?');
+
+  logger.info(
+    `Changes: ${modified.length}M ${added.length}A ${deleted.length}D ${untracked.length}U`
+  );
+
+  return diff;
+}
+```
+
+### Ordering Features for Execution
+
+```typescript
+import type { Feature } from '@automaker/types';
+import { resolveDependencies, getBlockingDependencies } from '@automaker/dependency-resolver';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('FeatureOrdering');
+
+function orderAndFilterFeatures(features: Feature[]): Feature[] {
+  const { orderedFeatures, hasCycle, cyclicFeatures } = resolveDependencies(features);
+
+  if (hasCycle) {
+    logger.error(`Circular dependency detected: ${cyclicFeatures.join(' → ')}`);
+    throw new Error('Cannot execute features with circular dependencies');
+  }
+
+  // Filter to only ready features
+  const readyFeatures = orderedFeatures.filter((feature) => {
+    const blocking = getBlockingDependencies(feature, features);
+    if (blocking.length > 0) {
+      logger.debug(`${feature.id} blocked by: ${blocking.join(', ')}`);
+      return false;
+    }
+    return true;
+  });
+
+  logger.info(`${readyFeatures.length} of ${features.length} features ready`);
+  return readyFeatures;
+}
+```
+
+## Import Rules for LLMs
+
+### ✅ DO
+
+```typescript
+// Import types from @automaker/types
+import type { Feature, ExecuteOptions } from '@automaker/types';
+
+// Import constants from @automaker/types
+import { CLAUDE_MODEL_MAP, DEFAULT_MODELS } from '@automaker/types';
+
+// Import utilities from @automaker/utils
+import { createLogger, classifyError } from '@automaker/utils';
+
+// Import prompts from @automaker/prompts
+import { getEnhancementPrompt, isValidEnhancementMode } from '@automaker/prompts';
+
+// Import platform utils from @automaker/platform
+import { getFeatureDir, ensureAutomakerDir } from '@automaker/platform';
+
+// Import model resolution from @automaker/model-resolver
+import { resolveModelString } from '@automaker/model-resolver';
+
+// Import dependency resolution from @automaker/dependency-resolver
+import { resolveDependencies } from '@automaker/dependency-resolver';
+
+// Import git utils from @automaker/git-utils
+import { getGitRepositoryDiffs } from '@automaker/git-utils';
+```
+
+### ❌ DON'T
+
+```typescript
+// DON'T import from old paths
+import { Feature } from '../services/feature-loader';           // ❌
+import { ExecuteOptions } from '../providers/types';            // ❌
+import { createLogger } from '../lib/logger';                   // ❌
+import { resolveModelString } from '../lib/model-resolver';     // ❌
+import { isGitRepo } from '../routes/common';                   // ❌
+import { resolveDependencies } from '../lib/dependency-resolver'; // ❌
+import { getEnhancementPrompt } from '../lib/enhancement-prompts'; // ❌
+
+// DON'T import from old lib/ paths
+import { getFeatureDir } from '../lib/automaker-paths';         // ❌
+import { classifyError } from '../lib/error-handler';           // ❌
+
+// DON'T define types that exist in @automaker/types
+interface Feature { ... }  // ❌ Use: import type { Feature } from '@automaker/types';
+```
+
+## Migration Checklist
+
+When refactoring server code, check:
+
+- [ ] All `Feature` imports use `@automaker/types`
+- [ ] All `ExecuteOptions` imports use `@automaker/types`
+- [ ] All logger usage uses `@automaker/utils`
+- [ ] All prompt templates use `@automaker/prompts`
+- [ ] All path operations use `@automaker/platform`
+- [ ] All model resolution uses `@automaker/model-resolver`
+- [ ] All dependency checks use `@automaker/dependency-resolver`
+- [ ] All git operations use `@automaker/git-utils`
+- [ ] No imports from old `lib/` paths
+- [ ] No imports from `services/feature-loader` for types
+- [ ] No imports from `providers/types`
+
+## Package Dependencies
+
+Understanding the dependency chain helps prevent circular dependencies:
+
+```
+@automaker/types (no dependencies)
+    ↓
+@automaker/utils
+@automaker/prompts
+@automaker/platform
+@automaker/model-resolver
+@automaker/dependency-resolver
+    ↓
+@automaker/git-utils
+    ↓
+@automaker/server
+@automaker/ui
+```
+
+**Rule:** Packages can only depend on packages above them in the chain.
+
+## Building Packages
+
+All packages must be built before use:
+
+```bash
+# Build all packages from workspace
+npm run build:packages
+
+# Or from root
+npm install  # Installs and links workspace packages
+```
+
+## Module Format
+
+All packages use ES modules (`type: "module"`) with NodeNext module resolution:
+
+- Requires explicit `.js` extensions in import statements
+- Compatible with both Node.js (server) and Vite (UI)
+- Centralized ESM configuration in `libs/tsconfig.base.json`
+
+## Testing
+
+When writing tests:
+
+```typescript
+// ✅ Import from packages
+import type { Feature } from '@automaker/types';
+import { createLogger } from '@automaker/utils';
+
+// ❌ Don't import from src
+import { Feature } from '../../../src/services/feature-loader';
+```
+
+## Summary for LLMs
+
+**Quick reference:**
+
+- Types → `@automaker/types`
+- Logging/Errors/Utils → `@automaker/utils`
+- AI Prompts → `@automaker/prompts`
+- Paths/Security → `@automaker/platform`
+- Model Resolution → `@automaker/model-resolver`
+- Dependency Ordering → `@automaker/dependency-resolver`
+- Git Operations → `@automaker/git-utils`
+
+**Never import from:** `lib/*`, `services/feature-loader` (for types), `providers/types`, `routes/common`
+
+**Always:** Use the shared packages instead of local implementations.
diff --git a/temp_repo/docs/pr-comment-fix-agent.md b/temp_repo/docs/pr-comment-fix-agent.md
new file mode 100644
index 0000000000000000000000000000000000000000..46099277b9e8c7289324e3fb646f8bbb8fd05e2a
--- /dev/null
+++ b/temp_repo/docs/pr-comment-fix-agent.md
@@ -0,0 +1,152 @@
+# PR Comment Fix Agent Instructions
+
+## Overview
+
+This agent automatically reviews a GitHub Pull Request, analyzes all comments, and systematically addresses each comment by making the necessary code changes.
+
+## Workflow
+
+### Step 1: Fetch PR Information
+
+1. Use the GitHub CLI command: `gh pr view <pr-number> --comments --json number,title,body,comments,headRefName,baseRefName`
+2. Parse the JSON output to extract:
+   - PR number and title
+   - PR description/body
+   - All comments (including review comments and inline comments)
+   - Branch information (head and base branches)
+
+### Step 2: Analyze Comments
+
+For each comment, identify:
+
+- **Type**: Review comment, inline comment, or general comment
+- **File path**: If it's an inline comment, extract the file path
+- **Line number**: If it's an inline comment, extract the line number(s)
+- **Intent**: What change is being requested?
+  - Bug fix
+  - Code style/formatting
+  - Performance improvement
+  - Refactoring
+  - Missing functionality
+  - Documentation update
+  - Test addition/modification
+- **Priority**: Determine if it's blocking (must fix) or non-blocking (nice to have)
+
+### Step 3: Checkout PR Branch
+
+1. Ensure you're in the correct repository
+2. Fetch the latest changes: `git fetch origin`
+3. Checkout the PR branch: `git checkout <headRefName>`
+4. Pull latest changes: `git pull origin <headRefName>`
+
+### Step 4: Address Each Comment Systematically
+
+For each comment, follow this process:
+
+#### 4.1 Read Relevant Files
+
+- If the comment references a specific file, read that file first
+- If the comment is general, read related files based on context
+- Understand the current implementation
+
+#### 4.2 Understand the Request
+
+- Parse what specific change is needed
+- Identify the root cause or issue
+- Consider edge cases and implications
+
+#### 4.3 Make the Fix
+
+- Implement the requested change
+- Ensure the fix addresses the exact concern raised
+- Maintain code consistency with the rest of the codebase
+- Follow existing code style and patterns
+
+#### 4.4 Verify the Fix
+
+- Check that the change resolves the comment
+- Ensure no new issues are introduced
+- Run relevant tests if available
+- Check for linting errors
+
+### Step 5: Document Changes
+
+For each comment addressed:
+
+- Add a comment or commit message referencing the PR comment
+- If multiple comments are addressed, group related changes logically
+
+### Step 6: Commit Changes
+
+1. Stage all changes: `git add -A`
+2. Create a commit with a descriptive message:
+
+   ```
+   fix: address PR review comments
+
+   - [Brief description of fix 1] (addresses comment #X)
+   - [Brief description of fix 2] (addresses comment #Y)
+   - ...
+   ```
+
+3. Push changes: `git push origin <headRefName>`
+
+## Comment Types and Handling
+
+### Inline Code Comments
+
+- **Location**: Specific file and line number
+- **Action**: Read the file, locate the exact line, understand context, make targeted fix
+- **Example**: "This function should handle null values" → Add null check
+
+### Review Comments
+
+- **Location**: May reference multiple files or general patterns
+- **Action**: Read all referenced files, understand the pattern, apply fix consistently
+- **Example**: "We should use async/await instead of promises" → Refactor all instances
+
+### General Comments
+
+- **Location**: PR-level, not file-specific
+- **Action**: Understand the broader concern, identify affected areas, make comprehensive changes
+- **Example**: "Add error handling" → Review entire PR for missing error handling
+
+## Best Practices
+
+1. **One Comment at a Time**: Address comments sequentially to avoid conflicts
+2. **Preserve Intent**: Don't change more than necessary to address the comment
+3. **Test Changes**: Run tests after each significant change
+4. **Ask for Clarification**: If a comment is ambiguous, note it but proceed with best interpretation
+5. **Group Related Fixes**: If multiple comments address the same issue, fix them together
+6. **Maintain Style**: Follow existing code style, formatting, and patterns
+7. **Check Dependencies**: Ensure fixes don't break other parts of the codebase
+
+## Error Handling
+
+- If a comment references a file that doesn't exist, note it and skip
+- If a line number is out of range (file changed), search for similar code nearby
+- If a fix introduces breaking changes, revert and try a different approach
+- If tests fail after a fix, investigate and adjust the implementation
+
+## Completion Criteria
+
+The agent has successfully completed when:
+
+1. All comments have been analyzed
+2. All actionable comments have been addressed with code changes
+3. All changes have been committed and pushed
+4. A summary of addressed comments is provided
+
+## Example Output Summary
+
+```
+PR #123 Review Comments - Addressed
+
+✅ Comment #1: Fixed null handling in getUserData() (line 45)
+✅ Comment #2: Added error handling for API calls
+✅ Comment #3: Refactored to use async/await pattern
+⚠️  Comment #4: Requires clarification - noted in commit message
+✅ Comment #5: Fixed typo in documentation
+
+Total: 5 comments, 4 addressed, 1 requires clarification
+```
diff --git a/temp_repo/docs/pr-comment-fix-prompt.md b/temp_repo/docs/pr-comment-fix-prompt.md
new file mode 100644
index 0000000000000000000000000000000000000000..51bd6b6410c588d3a2801c33a7b2b9c95c64262c
--- /dev/null
+++ b/temp_repo/docs/pr-comment-fix-prompt.md
@@ -0,0 +1,51 @@
+# PR Comment Fix Agent Prompt
+
+Use this prompt directly with an AI agent (like Claude Code) to automatically fix PR review comments.
+
+## Direct Prompt
+
+```
+You are an AI agent tasked with reviewing and fixing GitHub Pull Request review comments.
+
+Your task:
+1. Fetch PR information: Run `gh pr view <pr-number> --comments --json number,title,body,comments,headRefName,baseRefName`
+2. Parse all comments from the JSON output
+3. Checkout the PR branch: `git checkout <headRefName>` and `git pull origin <headRefName>`
+4. For each comment:
+   - Identify the file and line number (if applicable)
+   - Understand what change is being requested
+   - Read the relevant file(s)
+   - Make the necessary code changes to address the comment
+   - Verify the fix doesn't break existing functionality
+5. Commit all changes with a descriptive message referencing the PR comments
+6. Push changes back to the PR branch
+
+Guidelines:
+- Address comments one at a time, but group related fixes
+- Preserve existing code style and patterns
+- Don't change more than necessary to address each comment
+- Run tests if available after making changes
+- If a comment is unclear, make your best interpretation and note it
+- Create a summary of all comments addressed
+
+Start by asking for the PR number, then proceed with the workflow above.
+```
+
+## Usage Example
+
+```
+I need you to fix all review comments on PR #123.
+
+[Paste the prompt above]
+
+PR number: 123
+```
+
+## Alternative: One-Liner Version
+
+```
+Review PR #<number> comments using `gh pr view <number> --comments`, checkout the PR branch,
+read each comment, understand what needs to be fixed, make the code changes to address each
+comment, commit with descriptive messages, and push back to the branch. Provide a summary of
+all comments addressed.
+```
diff --git a/temp_repo/docs/pr/terminal-omp.png b/temp_repo/docs/pr/terminal-omp.png
new file mode 100644
index 0000000000000000000000000000000000000000..11488b5436a45df1084527942d5332e7806f3579
Binary files /dev/null and b/temp_repo/docs/pr/terminal-omp.png differ
diff --git a/temp_repo/docs/prd-to-features-guide.md b/temp_repo/docs/prd-to-features-guide.md
new file mode 100644
index 0000000000000000000000000000000000000000..030e6266a8d66ecdc2bb42d9f72a6071ae88f7a1
--- /dev/null
+++ b/temp_repo/docs/prd-to-features-guide.md
@@ -0,0 +1,431 @@
+# PRD to Automaker Features Guide
+
+This guide helps Claude generate properly structured Automaker features from a Product Requirements Document (PRD). Use this in new projects to create feature folders that Automaker can execute.
+
+## Quick Start
+
+1. Place your PRD file in the project (e.g., `PRD.md` or `.automaker/context/PRD.md`)
+2. Create `.automaker/features/` directory
+3. Use this guide to generate `feature.json` files for each feature phase
+4. Run features in Automaker sequentially or in parallel based on dependencies
+
+---
+
+## Feature JSON Schema
+
+### Minimal Required Fields
+
+```json
+{
+  "id": "feature-unique-identifier",
+  "category": "Core",
+  "title": "Feature Title",
+  "description": "Detailed description of what needs to be implemented",
+  "status": "backlog",
+  "priority": 1,
+  "imagePaths": [],
+  "textFilePaths": []
+}
+```
+
+### Complete Feature Schema
+
+```json
+{
+  "id": "feature-unique-identifier",
+  "category": "Core | UI/UX | AI Agent | Infrastructure | Testing | From GitHub",
+  "title": "Short descriptive title",
+  "description": "Detailed implementation description with requirements",
+  "status": "backlog | pending | running | completed | failed | verified | waiting_approval",
+  "priority": 1,
+  "complexity": "simple | moderate | complex",
+  "dependencies": ["feature-id-1", "feature-id-2"],
+  "createdAt": "2026-01-23T00:00:00.000Z",
+  "updatedAt": "2026-01-23T00:00:00.000Z",
+  "branchName": null,
+  "descriptionHistory": [],
+  "skipTests": false,
+  "model": "claude-sonnet | claude-opus | claude-haiku",
+  "thinkingLevel": "none | low | medium | high | ultrathink",
+  "reasoningEffort": "none | low | medium | high",
+  "imagePaths": [],
+  "textFilePaths": [],
+  "planningMode": "none | spec | full",
+  "requirePlanApproval": false,
+  "workMode": "auto | custom"
+}
+```
+
+---
+
+## Field Descriptions
+
+### Core Fields
+
+| Field           | Type   | Required | Description                                                                       |
+| --------------- | ------ | -------- | --------------------------------------------------------------------------------- |
+| `id`            | string | Yes      | Unique identifier. Use format: `feature-{descriptive-name}` or `phase-{n}-{name}` |
+| `category`      | string | Yes      | Grouping category for the feature                                                 |
+| `title`         | string | Yes      | Short, descriptive title (3-8 words)                                              |
+| `description`   | string | Yes      | Detailed implementation requirements                                              |
+| `status`        | string | Yes      | Current state. **Must be `backlog` for Automaker to execute**                     |
+| `priority`      | number | Yes      | Execution priority (1 = highest, higher numbers = lower priority)                 |
+| `imagePaths`    | array  | Yes      | Must be empty `[]` - Automaker populates this automatically                       |
+| `textFilePaths` | array  | Yes      | Must be empty `[]` - Automaker populates this automatically                       |
+
+### Optional Fields
+
+| Field                 | Type     | Default  | Description                                                                            |
+| --------------------- | -------- | -------- | -------------------------------------------------------------------------------------- |
+| `complexity`          | string   | moderate | `simple` (< 1 hour), `moderate` (1-4 hours), `complex` (> 4 hours)                     |
+| `dependencies`        | string[] | []       | Array of feature IDs that must complete first                                          |
+| `skipTests`           | boolean  | false    | Skip test execution during verification                                                |
+| `model`               | string   | -        | AI model: `claude-sonnet` (balanced), `claude-opus` (complex), `claude-haiku` (simple) |
+| `thinkingLevel`       | string   | none     | Extended thinking: `none`, `low`, `medium`, `high`, `ultrathink`                       |
+| `planningMode`        | string   | none     | `none` (direct), `spec` (generate spec first), `full` (spec + tool exploration)        |
+| `requirePlanApproval` | boolean  | false    | Pause for human approval before execution                                              |
+| `workMode`            | string   | auto     | `auto` (continuous), `custom` (step-by-step)                                           |
+
+---
+
+## Writing Effective Descriptions
+
+### Structure for Complex Features
+
+```markdown
+## Overview
+
+Brief summary of what this feature accomplishes.
+
+## Requirements
+
+- Requirement 1: Specific implementation detail
+- Requirement 2: Another specific detail
+- Requirement 3: Edge case to handle
+
+## Technical Approach
+
+- Use existing pattern from X
+- Modify files A, B, C
+- Follow the Y architectural pattern
+
+## Acceptance Criteria
+
+- GIVEN condition, WHEN action, THEN expected result
+- GIVEN another condition, WHEN action, THEN expected result
+
+## Files to Modify
+
+- `path/to/file1.ts` - Purpose
+- `path/to/file2.tsx` - Purpose
+
+## Edge Cases
+
+- Handle empty state
+- Handle error conditions
+- Handle concurrent operations
+```
+
+### Structure for Simple Features
+
+```markdown
+Add [feature] to [location].
+
+Requirements:
+
+- Specific requirement 1
+- Specific requirement 2
+
+Files: `path/to/main/file.ts`
+```
+
+---
+
+## Phasing Strategy
+
+### When to Create Phases
+
+Create separate features (phases) when:
+
+1. Features have clear dependencies (Phase 2 needs Phase 1's types)
+2. Different complexity levels (separate simple setup from complex logic)
+3. Different areas of codebase (backend vs frontend)
+4. Risk isolation (core changes separate from UI changes)
+
+### Recommended Phase Structure
+
+```
+Phase 1: Foundation / Types / Schema
+Phase 2: Backend / Service Layer
+Phase 3: API Routes / Endpoints
+Phase 4: Frontend / UI Components
+Phase 5: Integration / Testing
+Phase 6: Polish / Documentation
+```
+
+### Phase Naming Convention
+
+```
+phase-1-foundation
+phase-2-backend-service
+phase-3-api-routes
+phase-4-frontend-ui
+phase-5-integration
+```
+
+---
+
+## Example: Converting PRD to Features
+
+### Input PRD Section
+
+```markdown
+## User Authentication Feature
+
+Users should be able to log in with email/password and OAuth providers.
+The system should support session management and secure token storage.
+```
+
+### Output Feature Files
+
+**Phase 1: Types and Schema**
+
+```json
+{
+  "id": "phase-1-auth-types",
+  "category": "Core",
+  "title": "Authentication Types and Schema",
+  "description": "Define TypeScript types and database schema for authentication.\n\nRequirements:\n- Add User, Session, and AuthToken types to @automaker/types\n- Create database migration for users and sessions tables\n- Define AuthProvider enum (email, google, github)\n\nFiles:\n- libs/types/src/auth.ts\n- libs/types/src/index.ts\n- apps/server/src/db/migrations/",
+  "status": "backlog",
+  "priority": 1,
+  "complexity": "simple",
+  "dependencies": [],
+  "model": "claude-sonnet",
+  "planningMode": "none"
+}
+```
+
+**Phase 2: Backend Service**
+
+```json
+{
+  "id": "phase-2-auth-service",
+  "category": "Core",
+  "title": "Authentication Service Layer",
+  "description": "Implement authentication service with email/password and OAuth support.\n\nRequirements:\n- Create AuthService class with login, logout, register methods\n- Implement password hashing with bcrypt\n- Add OAuth provider integration (Google, GitHub)\n- Session management with secure token generation\n\nAcceptance Criteria:\n- GIVEN valid credentials, WHEN user logs in, THEN session token is returned\n- GIVEN invalid credentials, WHEN user logs in, THEN appropriate error is returned\n- GIVEN OAuth callback, WHEN user authenticates, THEN user is created/updated and session started\n\nFiles:\n- apps/server/src/services/auth-service.ts\n- apps/server/src/services/oauth-service.ts\n- apps/server/src/lib/password.ts",
+  "status": "backlog",
+  "priority": 1,
+  "complexity": "complex",
+  "dependencies": ["phase-1-auth-types"],
+  "model": "claude-opus",
+  "thinkingLevel": "medium",
+  "planningMode": "spec"
+}
+```
+
+**Phase 3: API Routes**
+
+```json
+{
+  "id": "phase-3-auth-routes",
+  "category": "Core",
+  "title": "Authentication API Endpoints",
+  "description": "Create REST API endpoints for authentication.\n\nEndpoints:\n- POST /api/auth/login - Email/password login\n- POST /api/auth/register - New user registration\n- POST /api/auth/logout - End session\n- GET /api/auth/me - Get current user\n- GET /api/auth/oauth/:provider - OAuth initiation\n- GET /api/auth/oauth/:provider/callback - OAuth callback\n\nFiles:\n- apps/server/src/routes/auth/index.ts\n- apps/server/src/routes/auth/routes/*.ts",
+  "status": "backlog",
+  "priority": 1,
+  "complexity": "moderate",
+  "dependencies": ["phase-2-auth-service"],
+  "model": "claude-sonnet",
+  "planningMode": "spec"
+}
+```
+
+**Phase 4: Frontend UI**
+
+```json
+{
+  "id": "phase-4-auth-ui",
+  "category": "UI/UX",
+  "title": "Authentication UI Components",
+  "description": "Create login, register, and profile UI components.\n\nComponents:\n- LoginForm with email/password fields and OAuth buttons\n- RegisterForm with validation\n- UserMenu dropdown showing logged-in user\n- AuthProvider context for app-wide auth state\n\nRoutes:\n- /login - Login page\n- /register - Registration page\n- /profile - User profile page\n\nFiles:\n- apps/ui/src/components/auth/*.tsx\n- apps/ui/src/routes/login.tsx\n- apps/ui/src/routes/register.tsx\n- apps/ui/src/hooks/use-auth.ts\n- apps/ui/src/store/auth-store.ts",
+  "status": "backlog",
+  "priority": 1,
+  "complexity": "moderate",
+  "dependencies": ["phase-3-auth-routes"],
+  "model": "claude-sonnet",
+  "planningMode": "spec"
+}
+```
+
+---
+
+## Parallel vs Sequential Execution
+
+### Features that CAN run in parallel
+
+- Different areas of codebase with no shared files
+- Independent bug fixes
+- Documentation updates
+- UI components that don't share state
+- Separate service implementations
+
+### Features that MUST run sequentially
+
+- Type definitions before implementations
+- Backend before frontend (if frontend calls backend)
+- Database schema before data access
+- Shared utilities before consumers
+
+### Expressing Dependencies
+
+```json
+{
+  "id": "feature-frontend",
+  "dependencies": ["feature-types", "feature-backend"]
+}
+```
+
+Features with dependencies won't start until all dependencies are completed.
+
+---
+
+## Model Selection Guide
+
+| Complexity            | Recommended Model             | Thinking Level | Planning Mode |
+| --------------------- | ----------------------------- | -------------- | ------------- |
+| Simple (< 1 hour)     | claude-haiku or claude-sonnet | none           | none          |
+| Moderate (1-4 hours)  | claude-sonnet                 | none or low    | spec          |
+| Complex (> 4 hours)   | claude-opus                   | medium or high | spec or full  |
+| Critical/Architecture | claude-opus                   | ultrathink     | full          |
+
+---
+
+## Directory Structure
+
+```
+.automaker/
+└── features/
+    ├── phase-1-foundation/
+    │   └── feature.json
+    ├── phase-2-backend/
+    │   └── feature.json
+    ├── phase-3-api/
+    │   └── feature.json
+    └── phase-4-frontend/
+        └── feature.json
+```
+
+Each feature gets its own directory. The directory name should match the feature ID.
+
+---
+
+## Automation Script
+
+Create features programmatically with this pattern:
+
+```bash
+#!/bin/bash
+# create-feature.sh
+
+FEATURE_ID=$1
+TITLE=$2
+DESCRIPTION=$3
+PRIORITY=${4:-1}
+
+mkdir -p ".automaker/features/$FEATURE_ID"
+cat > ".automaker/features/$FEATURE_ID/feature.json" << EOF
+{
+  "id": "$FEATURE_ID",
+  "category": "Core",
+  "title": "$TITLE",
+  "description": "$DESCRIPTION",
+  "status": "backlog",
+  "priority": $PRIORITY,
+  "complexity": "moderate",
+  "dependencies": [],
+  "createdAt": "$(date -u +"%Y-%m-%dT%H:%M:%S.000Z")",
+  "updatedAt": "$(date -u +"%Y-%m-%dT%H:%M:%S.000Z")",
+  "model": "claude-sonnet",
+  "planningMode": "spec"
+}
+EOF
+
+echo "Created feature: $FEATURE_ID"
+```
+
+---
+
+## Best Practices
+
+### DO
+
+- Keep descriptions detailed but focused
+- Include specific file paths when known
+- Use GIVEN/WHEN/THEN format for acceptance criteria
+- Set realistic complexity estimates
+- Define clear dependencies between phases
+- Use `spec` planning mode for moderate+ complexity
+- Include edge cases in descriptions
+
+### DON'T
+
+- Create features that are too large (> 8 hours)
+- Leave descriptions vague ("make it better")
+- Skip dependency definitions
+- Use `ultrathink` for simple tasks (wastes tokens)
+- Create circular dependencies
+- Put multiple unrelated changes in one feature
+- Put values in `imagePaths` or `textFilePaths` (must be empty `[]`, Automaker populates them)
+
+---
+
+## Validation Checklist
+
+Before running features, verify:
+
+- [ ] Each feature has a unique ID
+- [ ] All dependencies exist and are spelled correctly
+- [ ] No circular dependencies
+- [ ] Priorities are assigned meaningfully
+- [ ] Complex features have appropriate model/thinking level
+- [ ] Descriptions include enough context for implementation
+- [ ] File paths match actual project structure
+
+---
+
+## Quick Reference: Status Flow
+
+```
+backlog → pending → running → completed → verified
+                           ↘ failed
+                           ↘ waiting_approval → completed
+```
+
+**Important:** Features must start in `backlog` status to be executable by Automaker. The system moves them through the pipeline automatically.
+
+---
+
+## Template: New Feature
+
+Copy and customize:
+
+```json
+{
+  "id": "feature-CHANGE-ME",
+  "category": "Core",
+  "title": "CHANGE ME: Feature Title",
+  "description": "## Overview\nBrief description.\n\n## Requirements\n- Requirement 1\n- Requirement 2\n\n## Files\n- path/to/file.ts",
+  "status": "backlog",
+  "priority": 1,
+  "complexity": "moderate",
+  "dependencies": [],
+  "createdAt": "2026-01-23T00:00:00.000Z",
+  "updatedAt": "2026-01-23T00:00:00.000Z",
+  "imagePaths": [],
+  "textFilePaths": [],
+  "model": "claude-sonnet",
+  "planningMode": "spec",
+  "skipTests": false,
+  "workMode": "auto"
+}
+```
diff --git a/temp_repo/docs/release.md b/temp_repo/docs/release.md
new file mode 100644
index 0000000000000000000000000000000000000000..1f7b0c15a3d1ee9a9b83aca9439bb161aa014eb5
--- /dev/null
+++ b/temp_repo/docs/release.md
@@ -0,0 +1,126 @@
+# Release Command
+
+This command creates a git tag with a version bump and description of changes.
+
+## Usage
+
+```
+/release [major|minor|patch] [description]
+```
+
+Examples:
+
+- `/release minor "✨ Added inventory drag and drop functionality"`
+- `/release patch "🐛 Fixed bug with item selection"`
+- `/release major "💥 Breaking: Refactored API endpoints"`
+- `/release minor "Version 0.20.0: Added new features and improvements"`
+
+## Steps to Execute
+
+### 1. Parse Version Type and Description
+
+- Extract the version type from the command: `major`, `minor`, or `patch`
+- Extract the description (rest of the command, if provided)
+- If no version type provided or invalid, show usage and exit
+- Description is optional - if not provided, will auto-generate from commits
+
+### 2. Generate Changelog from Commits
+
+- Find the last git tag (version tag):
+  ```bash
+  git describe --tags --abbrev=0
+  ```
+- If no previous tag exists, use the initial commit or handle gracefully
+- Get all commits between the last tag and HEAD:
+  ```bash
+  git log <last-tag>..HEAD --pretty=format:"%h %s" --no-merges
+  ```
+- Parse commit messages and generate a changelog description:
+  - Group commits by type (feature, fix, improvement, etc.) based on commit message patterns
+  - Use emojis to categorize changes (see Emoji Usage section)
+  - Format as a multi-line changelog with categorized entries
+  - If user provided a description, prepend it to the auto-generated changelog
+  - If no commits found, use a default message or prompt user
+
+### 3. Read Current Version
+
+- Read `app/package.json` to get the current version (e.g., "0.1.0")
+- Parse the version into major, minor, and patch components
+- Calculate the new version based on the type:
+  - **major**: `${major + 1}.0.0` (e.g., 0.1.0 → 1.0.0)
+  - **minor**: `${major}.${minor + 1}.0` (e.g., 0.1.0 → 0.2.0)
+  - **patch**: `${major}.${minor}.${patch + 1}` (e.g., 0.1.0 → 0.1.1)
+
+### 4. Create Git Tag
+
+- Create an annotated git tag with the new version and description:
+  ```bash
+  git tag -a v<new-version> -m "<description>"
+  ```
+- Example: `git tag -a v0.2.0 -m "✨ Added inventory drag and drop functionality"`
+
+### 5. Push Tag to Remote
+
+- Push the tag to remote:
+  ```bash
+  git push origin v<new-version>
+  ```
+
+## Emoji Usage
+
+You can use emojis in release notes to categorize changes:
+
+- ✨ **New features** - New functionality, features, additions
+- 🐛 **Bug fixes** - Bug fixes and error corrections
+- 🔧 **Improvements** - Refactoring, optimizations, code quality
+- ⚡ **Performance** - Performance improvements
+- 💥 **Breaking changes** - Breaking API changes, major refactors
+- 🎨 **UI/UX** - Visual and user experience updates
+- ⚙️ **Configuration** - Config and environment changes
+- 📝 **Documentation** - Documentation updates
+- 🏗️ **Infrastructure** - Build, deployment, infrastructure
+- 🎵 **Audio** - Sound effects, music, audio changes
+
+## Changelog Generation
+
+The release command automatically generates a changelog by analyzing commits between the last tag and HEAD:
+
+1. **Find Last Tag**: Uses `git describe --tags --abbrev=0` to find the most recent version tag
+2. **Get Commits**: Retrieves all commits between the last tag and HEAD using `git log <last-tag>..HEAD`
+3. **Parse and Categorize**: Analyzes commit messages to categorize changes:
+   - Looks for conventional commit patterns (feat:, fix:, refactor:, etc.)
+   - Detects emoji prefixes in commit messages
+   - Groups similar changes together
+4. **Generate Description**: Creates a formatted changelog with:
+   - User-provided description (if any) at the top
+   - Categorized list of changes with appropriate emojis
+   - Commit hash references for traceability
+
+### Example Generated Changelog
+
+```
+✨ Added inventory drag and drop functionality
+
+Changes since v0.1.0:
+
+✨ Features:
+- Add drag and drop support for inventory items (abc1234)
+- Implement new sidebar navigation (def5678)
+
+🐛 Bug Fixes:
+- Fix item selection bug in list view (ghi9012)
+- Resolve memory leak in component cleanup (jkl3456)
+
+🔧 Improvements:
+- Refactor API endpoint structure (mno7890)
+- Optimize database queries (pqr2345)
+```
+
+## Notes
+
+- The tag message should describe what changed in this release
+- Use descriptive messages with emojis to categorize changes
+- Tags follow semantic versioning (e.g., v0.1.0, v0.2.0, v1.0.0)
+- Version is automatically calculated based on the type specified
+- If no previous tag exists, all commits from the repository start will be included
+- User-provided description (if any) will be prepended to the auto-generated changelog
diff --git a/temp_repo/docs/server/providers.md b/temp_repo/docs/server/providers.md
new file mode 100644
index 0000000000000000000000000000000000000000..4dae626e9fa8caf239aaf8800d2c17b520cf08b8
--- /dev/null
+++ b/temp_repo/docs/server/providers.md
@@ -0,0 +1,800 @@
+# Provider Architecture Reference
+
+This document describes the modular provider architecture in `apps/server/src/providers/` that enables support for multiple AI model providers (Claude SDK, OpenAI Codex CLI, and future providers like Cursor, OpenCode, etc.).
+
+---
+
+## Table of Contents
+
+1. [Architecture Overview](#architecture-overview)
+2. [Provider Interface](#provider-interface)
+3. [Available Providers](#available-providers)
+4. [Provider Factory](#provider-factory)
+5. [Adding New Providers](#adding-new-providers)
+6. [Provider Types](#provider-types)
+7. [Best Practices](#best-practices)
+
+---
+
+## Architecture Overview
+
+The provider architecture separates AI model execution logic from business logic, enabling clean abstraction and easy extensibility.
+
+### Architecture Diagram
+
+```
+┌─────────────────────────────────────────┐
+│         AgentService / AutoModeService   │
+│              (No provider logic)         │
+└──────────────────┬──────────────────────┘
+                   │
+         ┌─────────▼──────────┐
+         │  ProviderFactory   │  Model-based routing
+         │  (Routes by model) │  "gpt-*" → Codex
+         └─────────┬──────────┘  "claude-*" → Claude
+                   │
+      ┌────────────┴────────────┐
+      │                         │
+┌─────▼──────┐          ┌──────▼──────┐
+│   Claude   │          │    Codex    │
+│  Provider  │          │   Provider  │
+│ (Agent SDK)│          │ (CLI Spawn) │
+└────────────┘          └─────────────┘
+```
+
+### Key Benefits
+
+- ✅ **Adding new providers**: Only 1 new file + 1 line in factory
+- ✅ **Services remain clean**: No provider-specific logic
+- ✅ **All providers implement same interface**: Consistent behavior
+- ✅ **Model prefix determines provider**: Automatic routing
+- ✅ **Easy to test**: Each provider can be tested independently
+
+---
+
+## Provider Interface
+
+**Location**: `apps/server/src/providers/base-provider.ts`
+
+All providers must extend `BaseProvider` and implement the required methods.
+
+### BaseProvider Abstract Class
+
+```typescript
+export abstract class BaseProvider {
+  protected config: ProviderConfig;
+
+  constructor(config: ProviderConfig = {}) {
+    this.config = config;
+  }
+
+  /**
+   * Get provider name (e.g., "claude", "codex")
+   */
+  abstract getName(): string;
+
+  /**
+   * Execute a query and stream responses
+   */
+  abstract executeQuery(options: ExecuteOptions): AsyncGenerator<ProviderMessage>;
+
+  /**
+   * Detect provider installation status
+   */
+  abstract detectInstallation(): Promise<InstallationStatus>;
+
+  /**
+   * Get available models for this provider
+   */
+  abstract getAvailableModels(): ModelDefinition[];
+
+  /**
+   * Check if provider supports a specific feature (optional)
+   */
+  supportsFeature(feature: string): boolean {
+    return false;
+  }
+}
+```
+
+### Shared Types
+
+**Location**: `apps/server/src/providers/types.ts`
+
+#### ExecuteOptions
+
+Input configuration for executing queries:
+
+```typescript
+export interface ExecuteOptions {
+  prompt: string | Array<{ type: string; text?: string; source?: object }>;
+  model: string;
+  cwd: string;
+  systemPrompt?: string;
+  maxTurns?: number;
+  allowedTools?: string[];
+  mcpServers?: Record<string, unknown>;
+  abortController?: AbortController;
+  conversationHistory?: ConversationMessage[];
+}
+```
+
+#### ProviderMessage
+
+Output messages streamed from providers:
+
+```typescript
+export interface ProviderMessage {
+  type: 'assistant' | 'user' | 'error' | 'result';
+  subtype?: 'success' | 'error';
+  message?: {
+    role: 'user' | 'assistant';
+    content: ContentBlock[];
+  };
+  result?: string;
+  error?: string;
+}
+```
+
+#### ContentBlock
+
+Individual content blocks in messages:
+
+```typescript
+export interface ContentBlock {
+  type: 'text' | 'tool_use' | 'thinking' | 'tool_result';
+  text?: string;
+  thinking?: string;
+  name?: string;
+  input?: unknown;
+  tool_use_id?: string;
+  content?: string;
+}
+```
+
+---
+
+## Available Providers
+
+### 1. Claude Provider (SDK-based)
+
+**Location**: `apps/server/src/providers/claude-provider.ts`
+
+Uses `@anthropic-ai/claude-agent-sdk` for direct SDK integration.
+
+#### Features
+
+- ✅ Native multi-turn conversation support
+- ✅ Vision support (images)
+- ✅ Tool use (Read, Write, Edit, Glob, Grep, Bash, WebSearch, WebFetch)
+- ✅ Thinking blocks (extended thinking)
+- ✅ Streaming responses
+- ✅ No CLI installation required (npm dependency)
+
+#### Model Detection
+
+Routes models that:
+
+- Start with `"claude-"` (e.g., `"claude-opus-4-6"`)
+- Are Claude aliases: `"opus"`, `"sonnet"`, `"haiku"`
+
+#### Authentication
+
+Requires:
+
+- `ANTHROPIC_API_KEY` environment variable
+
+#### Example Usage
+
+```typescript
+const provider = new ClaudeProvider();
+
+const stream = provider.executeQuery({
+  prompt: 'What is 2+2?',
+  model: 'claude-opus-4-6',
+  cwd: '/project/path',
+  systemPrompt: 'You are a helpful assistant.',
+  maxTurns: 20,
+  allowedTools: ['Read', 'Write', 'Bash'],
+  abortController: new AbortController(),
+  conversationHistory: [
+    { role: 'user', content: 'Hello' },
+    { role: 'assistant', content: 'Hi! How can I help?' },
+  ],
+});
+
+for await (const msg of stream) {
+  if (msg.type === 'assistant') {
+    console.log(msg.message?.content);
+  }
+}
+```
+
+#### Conversation History Handling
+
+Uses `convertHistoryToMessages()` utility to convert history to SDK format:
+
+```typescript
+const historyMessages = convertHistoryToMessages(conversationHistory);
+for (const msg of historyMessages) {
+  yield msg; // Yield to SDK
+}
+```
+
+---
+
+### 2. Codex Provider (CLI-based)
+
+**Location**: `apps/server/src/providers/codex-provider.ts`
+
+Spawns OpenAI Codex CLI as a subprocess and converts JSONL output to provider format.
+
+#### Features
+
+- ✅ Subprocess execution (`codex exec --model <model> --json --full-auto`)
+- ✅ JSONL stream parsing
+- ✅ Supports GPT-5.1/5.2 Codex models
+- ✅ Vision support (GPT-5.1, GPT-5.2)
+- ✅ Tool use via MCP servers
+- ✅ Timeout detection (30s no output)
+- ✅ Abort signal handling
+
+#### Model Detection
+
+Routes models that:
+
+- Start with `"gpt-"` (e.g., `"gpt-5.2"`, `"gpt-5.1-codex-max"`)
+- Start with `"o"` (e.g., `"o1"`, `"o1-mini"`)
+
+#### Available Models
+
+| Model                | Description        | Context | Max Output | Vision |
+| -------------------- | ------------------ | ------- | ---------- | ------ |
+| `gpt-5.2`            | Latest Codex model | 256K    | 32K        | Yes    |
+| `gpt-5.1-codex-max`  | Maximum capability | 256K    | 32K        | Yes    |
+| `gpt-5.1-codex`      | Standard Codex     | 256K    | 32K        | Yes    |
+| `gpt-5.1-codex-mini` | Lightweight        | 256K    | 16K        | No     |
+| `gpt-5.1`            | General-purpose    | 256K    | 32K        | Yes    |
+
+#### Authentication
+
+Supports two methods:
+
+1. **CLI login**: `codex login` (OAuth tokens stored in `~/.codex/auth.json`)
+2. **API key**: `OPENAI_API_KEY` environment variable
+
+#### Installation Detection
+
+Uses `CodexCliDetector` to check:
+
+- PATH for `codex` command
+- npm global: `npm list -g @openai/codex`
+- Homebrew (macOS): `/opt/homebrew/bin/codex`
+- Common paths: `~/.local/bin/codex`, `/usr/local/bin/codex`
+
+#### Example Usage
+
+```typescript
+const provider = new CodexProvider();
+
+const stream = provider.executeQuery({
+  prompt: 'Fix the bug in main.ts',
+  model: 'gpt-5.2',
+  cwd: '/project/path',
+  systemPrompt: 'You are an expert TypeScript developer.',
+  abortController: new AbortController(),
+});
+
+for await (const msg of stream) {
+  if (msg.type === 'assistant') {
+    console.log(msg.message?.content);
+  } else if (msg.type === 'error') {
+    console.error(msg.error);
+  }
+}
+```
+
+#### JSONL Event Conversion
+
+Codex CLI outputs JSONL events that get converted to `ProviderMessage` format:
+
+| Codex Event                          | Provider Message                                                                        |
+| ------------------------------------ | --------------------------------------------------------------------------------------- |
+| `item.completed` (reasoning)         | `{ type: "assistant", content: [{ type: "thinking" }] }`                                |
+| `item.completed` (agent_message)     | `{ type: "assistant", content: [{ type: "text" }] }`                                    |
+| `item.completed` (command_execution) | `{ type: "assistant", content: [{ type: "text", text: "```bash\n...\n```" }] }`         |
+| `item.started` (command_execution)   | `{ type: "assistant", content: [{ type: "tool_use" }] }`                                |
+| `item.updated` (todo_list)           | `{ type: "assistant", content: [{ type: "text", text: "**Updated Todo List:**..." }] }` |
+| `thread.completed`                   | `{ type: "result", subtype: "success" }`                                                |
+| `error`                              | `{ type: "error", error: "..." }`                                                       |
+
+#### Conversation History Handling
+
+Uses `formatHistoryAsText()` utility to prepend history as text context (CLI doesn't support native multi-turn):
+
+```typescript
+const historyText = formatHistoryAsText(conversationHistory);
+combinedPrompt = `${historyText}Current request:\n${combinedPrompt}`;
+```
+
+#### MCP Server Configuration
+
+**Location**: `apps/server/src/providers/codex-config-manager.ts`
+
+Manages TOML configuration for MCP servers:
+
+```typescript
+await codexConfigManager.configureMcpServer(cwd, mcpServerScriptPath);
+```
+
+Generates `.codex/config.toml`:
+
+```toml
+[mcp_servers.automaker-tools]
+command = "node"
+args = ["/path/to/mcp-server.js"]
+enabled_tools = ["UpdateFeatureStatus"]
+```
+
+---
+
+## Provider Factory
+
+**Location**: `apps/server/src/providers/provider-factory.ts`
+
+Routes requests to the appropriate provider based on model string.
+
+### Model-Based Routing
+
+```typescript
+export class ProviderFactory {
+  /**
+   * Get provider for a specific model
+   */
+  static getProviderForModel(modelId: string): BaseProvider {
+    const lowerModel = modelId.toLowerCase();
+
+    // OpenAI/Codex models
+    if (lowerModel.startsWith('gpt-') || lowerModel.startsWith('o')) {
+      return new CodexProvider();
+    }
+
+    // Claude models
+    if (lowerModel.startsWith('claude-') || ['haiku', 'sonnet', 'opus'].includes(lowerModel)) {
+      return new ClaudeProvider();
+    }
+
+    // Default to Claude
+    return new ClaudeProvider();
+  }
+
+  /**
+   * Check installation status of all providers
+   */
+  static async checkAllProviders(): Promise<Record<string, InstallationStatus>> {
+    const claude = new ClaudeProvider();
+    const codex = new CodexProvider();
+
+    return {
+      claude: await claude.detectInstallation(),
+      codex: await codex.detectInstallation(),
+    };
+  }
+}
+```
+
+### Usage in Services
+
+```typescript
+import { ProviderFactory } from '../providers/provider-factory.js';
+
+// In AgentService or AutoModeService
+const provider = ProviderFactory.getProviderForModel(model);
+const stream = provider.executeQuery(options);
+
+for await (const msg of stream) {
+  // Handle messages (format is consistent across all providers)
+}
+```
+
+---
+
+## Adding New Providers
+
+### Step 1: Create Provider File
+
+Create `apps/server/src/providers/[name]-provider.ts`:
+
+```typescript
+import { BaseProvider } from './base-provider.js';
+import type {
+  ExecuteOptions,
+  ProviderMessage,
+  InstallationStatus,
+  ModelDefinition,
+} from './types.js';
+
+export class CursorProvider extends BaseProvider {
+  getName(): string {
+    return 'cursor';
+  }
+
+  async *executeQuery(options: ExecuteOptions): AsyncGenerator<ProviderMessage> {
+    // Implementation here
+    // 1. Spawn cursor CLI or use SDK
+    // 2. Convert output to ProviderMessage format
+    // 3. Yield messages
+  }
+
+  async detectInstallation(): Promise<InstallationStatus> {
+    // Check if cursor is installed
+    // Return { installed: boolean, path?: string, version?: string }
+  }
+
+  getAvailableModels(): ModelDefinition[] {
+    return [
+      {
+        id: 'cursor-premium',
+        name: 'Cursor Premium',
+        modelString: 'cursor-premium',
+        provider: 'cursor',
+        description: "Cursor's premium model",
+        contextWindow: 200000,
+        maxOutputTokens: 8192,
+        supportsVision: true,
+        supportsTools: true,
+        tier: 'premium',
+        default: true,
+      },
+    ];
+  }
+
+  supportsFeature(feature: string): boolean {
+    const supportedFeatures = ['tools', 'text', 'vision'];
+    return supportedFeatures.includes(feature);
+  }
+}
+```
+
+### Step 2: Add Routing in Factory
+
+Update `apps/server/src/providers/provider-factory.ts`:
+
+```typescript
+import { CursorProvider } from "./cursor-provider.js";
+
+static getProviderForModel(modelId: string): BaseProvider {
+  const lowerModel = modelId.toLowerCase();
+
+  // Cursor models
+  if (lowerModel.startsWith("cursor-")) {
+    return new CursorProvider();
+  }
+
+  // ... existing routing
+}
+
+static async checkAllProviders() {
+  const cursor = new CursorProvider();
+
+  return {
+    claude: await claude.detectInstallation(),
+    codex: await codex.detectInstallation(),
+    cursor: await cursor.detectInstallation(), // NEW
+  };
+}
+```
+
+### Step 3: Update Models List
+
+Update `apps/server/src/routes/models.ts`:
+
+```typescript
+{
+  id: "cursor-premium",
+  name: "Cursor Premium",
+  provider: "cursor",
+  contextWindow: 200000,
+  maxOutputTokens: 8192,
+  supportsVision: true,
+  supportsTools: true,
+}
+```
+
+### Step 4: Done!
+
+No changes needed in:
+
+- ✅ AgentService
+- ✅ AutoModeService
+- ✅ Any business logic
+
+The provider architecture handles everything automatically.
+
+---
+
+## Provider Types
+
+### SDK-Based Providers (like Claude)
+
+**Characteristics**:
+
+- Direct SDK/library integration
+- No subprocess spawning
+- Native multi-turn support
+- Streaming via async generators
+
+**Example**: ClaudeProvider using `@anthropic-ai/claude-agent-sdk`
+
+**Advantages**:
+
+- Lower latency
+- More control over options
+- Easier error handling
+- No CLI installation required
+
+---
+
+### CLI-Based Providers (like Codex)
+
+**Characteristics**:
+
+- Subprocess spawning
+- JSONL stream parsing
+- Text-based conversation history
+- Requires CLI installation
+
+**Example**: CodexProvider using `codex exec --json`
+
+**Advantages**:
+
+- Access to CLI-only features
+- No SDK dependency
+- Can use any CLI tool
+
+**Implementation Pattern**:
+
+1. Use `spawnJSONLProcess()` from `subprocess-manager.ts`
+2. Convert JSONL events to `ProviderMessage` format
+3. Handle authentication (CLI login or API key)
+4. Implement timeout detection
+
+---
+
+## Best Practices
+
+### 1. Message Format Consistency
+
+All providers MUST output the same `ProviderMessage` format so services can handle them uniformly:
+
+```typescript
+// ✅ Correct - Consistent format
+yield {
+  type: "assistant",
+  message: {
+    role: "assistant",
+    content: [{ type: "text", text: "Response" }]
+  }
+};
+
+// ❌ Incorrect - Provider-specific format
+yield {
+  customType: "response",
+  data: "Response"
+};
+```
+
+### 2. Error Handling
+
+Always yield error messages, never throw:
+
+```typescript
+// ✅ Correct
+try {
+  // ...
+} catch (error) {
+  yield {
+    type: "error",
+    error: (error as Error).message
+  };
+  return;
+}
+
+// ❌ Incorrect
+throw new Error("Provider failed");
+```
+
+### 3. Abort Signal Support
+
+Respect the abort controller:
+
+```typescript
+if (abortController?.signal.aborted) {
+  yield { type: "error", error: "Operation cancelled" };
+  return;
+}
+```
+
+### 4. Conversation History
+
+- **SDK providers**: Use `convertHistoryToMessages()` and yield messages
+- **CLI providers**: Use `formatHistoryAsText()` and prepend to prompt
+
+### 5. Image Handling
+
+- **Vision models**: Pass images as content blocks
+- **Non-vision models**: Extract text only using utilities
+
+### 6. Logging
+
+Use consistent logging prefixes:
+
+```typescript
+console.log(`[${this.getName()}Provider] Operation started`);
+console.error(`[${this.getName()}Provider] Error:`, error);
+```
+
+### 7. Installation Detection
+
+Implement thorough detection:
+
+- Check multiple installation methods
+- Verify authentication
+- Return detailed status
+
+### 8. Model Definitions
+
+Provide accurate model metadata:
+
+```typescript
+{
+  id: "model-id",
+  name: "Human-readable name",
+  modelString: "exact-model-string",
+  provider: "provider-name",
+  description: "What this model is good for",
+  contextWindow: 200000,
+  maxOutputTokens: 8192,
+  supportsVision: true,
+  supportsTools: true,
+  tier: "premium" | "standard" | "basic",
+  default: false
+}
+```
+
+---
+
+## Testing Providers
+
+### Unit Tests
+
+Test each provider method independently:
+
+```typescript
+describe('ClaudeProvider', () => {
+  it('should detect installation', async () => {
+    const provider = new ClaudeProvider();
+    const status = await provider.detectInstallation();
+
+    expect(status.installed).toBe(true);
+    expect(status.method).toBe('sdk');
+  });
+
+  it('should stream messages correctly', async () => {
+    const provider = new ClaudeProvider();
+    const messages = [];
+
+    for await (const msg of provider.executeQuery(options)) {
+      messages.push(msg);
+    }
+
+    expect(messages.length).toBeGreaterThan(0);
+    expect(messages[0].type).toBe('assistant');
+  });
+});
+```
+
+### Integration Tests
+
+Test provider interaction with services:
+
+```typescript
+describe('Provider Integration', () => {
+  it('should work with AgentService', async () => {
+    const provider = ProviderFactory.getProviderForModel('claude-opus-4-6');
+
+    // Test full workflow
+  });
+});
+```
+
+---
+
+## Environment Variables
+
+### Claude Provider
+
+```bash
+# Required:
+ANTHROPIC_API_KEY=sk-ant-...
+```
+
+### Codex Provider
+
+```bash
+# Required (one of):
+OPENAI_API_KEY=sk-...
+# OR run: codex login
+
+# Optional:
+CODEX_CLI_PATH=/custom/path/to/codex
+```
+
+---
+
+## Troubleshooting
+
+### Provider Not Found
+
+**Problem**: `ProviderFactory.getProviderForModel()` returns wrong provider
+
+**Solution**: Check model string prefix in factory routing
+
+### Authentication Errors
+
+**Problem**: Provider fails with auth error
+
+**Solution**:
+
+1. Check environment variables
+2. For CLI providers, verify CLI login status
+3. Check `detectInstallation()` output
+
+### JSONL Parsing Errors (CLI providers)
+
+**Problem**: Failed to parse JSONL line
+
+**Solution**:
+
+1. Check CLI output format
+2. Verify JSON is valid
+3. Add error handling for malformed lines
+
+### Timeout Issues (CLI providers)
+
+**Problem**: Subprocess hangs
+
+**Solution**:
+
+1. Increase timeout in `spawnJSONLProcess` options
+2. Check CLI process for hangs
+3. Verify abort signal handling
+
+---
+
+## Future Provider Ideas
+
+Potential providers to add:
+
+1. **Cursor Provider** (`cursor-*`)
+   - CLI-based
+   - Code completion specialist
+
+2. **OpenCode Provider** (`opencode-*`)
+   - SDK or CLI-based
+   - Open-source alternative
+
+3. **Gemini Provider** (`gemini-*`)
+   - Google's AI models
+   - SDK-based via `@google/generative-ai`
+
+4. **Ollama Provider** (`ollama-*`)
+   - Local model hosting
+   - CLI or HTTP API
+
+Each would follow the same pattern:
+
+1. Create `[name]-provider.ts` implementing `BaseProvider`
+2. Add routing in `provider-factory.ts`
+3. Update models list
+4. Done! ✅
diff --git a/temp_repo/docs/server/route-organization.md b/temp_repo/docs/server/route-organization.md
new file mode 100644
index 0000000000000000000000000000000000000000..29d587a893a89ef46071c1392f2d24cfbf83330c
--- /dev/null
+++ b/temp_repo/docs/server/route-organization.md
@@ -0,0 +1,573 @@
+# Route Organization Pattern
+
+This document describes the pattern used for organizing Express routes into modular, maintainable file structures. This pattern is exemplified by the `app-spec` route module and should be applied to other route modules for consistency and maintainability.
+
+---
+
+## Table of Contents
+
+1. [Overview](#overview)
+2. [Directory Structure](#directory-structure)
+3. [File Organization Principles](#file-organization-principles)
+4. [File Types and Their Roles](#file-types-and-their-roles)
+5. [Implementation Guidelines](#implementation-guidelines)
+6. [Example: app-spec Module](#example-app-spec-module)
+7. [Migration Guide](#migration-guide)
+
+---
+
+## Overview
+
+The route organization pattern separates concerns into:
+
+- **Route handlers** - Thin HTTP request/response handlers in `routes/` subdirectory
+- **Business logic** - Extracted into standalone function files
+- **Shared utilities** - Common functions and state in `common.ts`
+- **Route registration** - Centralized in `index.ts`
+
+This pattern improves:
+
+- **Maintainability** - Clear separation of concerns
+- **Testability** - Functions can be tested independently
+- **Reusability** - Business logic can be reused across routes
+- **Readability** - Smaller, focused files are easier to understand
+
+---
+
+## Directory Structure
+
+```
+routes/
+  └── {module-name}/
+      ├── index.ts                    # Route registration & export
+      ├── common.ts                   # Shared utilities & state
+      ├── {business-function}.ts      # Extracted business logic functions
+      └── routes/
+          ├── {endpoint-name}.ts      # Individual route handlers
+          └── ...
+```
+
+### Example Structure
+
+```
+routes/
+  └── app-spec/
+      ├── index.ts                    # createSpecRegenerationRoutes()
+      ├── common.ts                   # Shared state, logging utilities
+      ├── generate-spec.ts            # generateSpec() function
+      ├── generate-features-from-spec.ts  # generateFeaturesFromSpec() function
+      ├── parse-and-create-features.ts   # parseAndCreateFeatures() function
+      └── routes/
+          ├── create.ts               # POST /create handler
+          ├── generate.ts             # POST /generate handler
+          ├── generate-features.ts    # POST /generate-features handler
+          ├── status.ts               # GET /status handler
+          └── stop.ts                 # POST /stop handler
+```
+
+---
+
+## File Organization Principles
+
+### 1. **Single Responsibility**
+
+Each file should have one clear purpose:
+
+- Route handlers handle HTTP concerns (request/response, validation)
+- Business logic files contain domain-specific operations
+- Common files contain shared utilities and state
+
+### 2. **Separation of Concerns**
+
+- **HTTP Layer** (`routes/*.ts`) - Request parsing, response formatting, status codes
+- **Business Logic** (`*.ts` in root) - Core functionality, domain operations
+- **Shared State** (`common.ts`) - Module-level state, cross-cutting utilities
+
+### 3. **File Size Management**
+
+- Extract functions when files exceed ~150-200 lines
+- Extract when a function is reusable across multiple routes
+- Extract when a function has complex logic that deserves its own file
+
+### 4. **Naming Conventions**
+
+- Route handlers: `{verb}-{resource}.ts` or `{action}.ts` (e.g., `create.ts`, `status.ts`)
+- Business logic: `{action}-{noun}.ts` or `{verb}-{noun}.ts` (e.g., `generate-spec.ts`)
+- Common utilities: Always `common.ts`
+
+---
+
+## File Types and Their Roles
+
+### `index.ts` - Route Registration
+
+**Purpose**: Central export point that creates and configures the Express router.
+
+**Responsibilities**:
+
+- Import route handler factories
+- Create Express Router instance
+- Register all routes
+- Export router creation function
+
+**Pattern**:
+
+```typescript
+import { Router } from "express";
+import type { EventEmitter } from "../../lib/events.js";
+import { createCreateHandler } from "./routes/create.js";
+import { createGenerateHandler } from "./routes/generate.js";
+
+export function create{Module}Routes(events: EventEmitter): Router {
+  const router = Router();
+
+  router.post("/create", createCreateHandler(events));
+  router.get("/status", createStatusHandler());
+
+  return router;
+}
+```
+
+**Key Points**:
+
+- Function name: `create{Module}Routes`
+- Accepts dependencies (e.g., `EventEmitter`) as parameters
+- Returns configured Router instance
+- Route handlers are factory functions that accept dependencies
+
+---
+
+### `common.ts` - Shared Utilities & State
+
+**Purpose**: Central location for shared state, utilities, and helper functions used across multiple route handlers and business logic files.
+
+**Common Contents**:
+
+- Module-level state (e.g., `isRunning`, `currentAbortController`)
+- State management functions (e.g., `setRunningState()`)
+- Logging utilities (e.g., `logAuthStatus()`, `logError()`)
+- Error handling utilities (e.g., `getErrorMessage()`)
+- Shared constants
+- Shared types/interfaces
+
+**Pattern**:
+
+```typescript
+import { createLogger } from '../../lib/logger.js';
+
+const logger = createLogger('{ModuleName}');
+
+// Shared state
+export let isRunning = false;
+export let currentAbortController: AbortController | null = null;
+
+// State management
+export function setRunningState(running: boolean, controller: AbortController | null = null): void {
+  isRunning = running;
+  currentAbortController = controller;
+}
+
+// Utility functions
+export function logError(error: unknown, context: string): void {
+  logger.error(`❌ ${context}:`, error);
+}
+
+export function getErrorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : 'Unknown error';
+}
+```
+
+**Key Points**:
+
+- Export shared state as `let` variables (mutable state)
+- Provide setter functions for state management
+- Keep utilities focused and reusable
+- Use consistent logging patterns
+
+---
+
+### `routes/{endpoint-name}.ts` - Route Handlers
+
+**Purpose**: Thin HTTP request/response handlers that validate input, call business logic, and format responses.
+
+**Responsibilities**:
+
+- Parse and validate request parameters
+- Check preconditions (e.g., `isRunning` state)
+- Call business logic functions
+- Handle errors and format responses
+- Manage background tasks (if applicable)
+
+**Pattern**:
+
+```typescript
+import type { Request, Response } from "express";
+import type { EventEmitter } from "../../../lib/events.js";
+import { createLogger } from "../../../lib/logger.js";
+import {
+  isRunning,
+  setRunningState,
+  logError,
+  getErrorMessage,
+} from "../common.js";
+import { businessLogicFunction } from "../business-logic.js";
+
+const logger = createLogger("{ModuleName}");
+
+export function create{Action}Handler(events: EventEmitter) {
+  return async (req: Request, res: Response): Promise<void> => {
+    logger.info("========== /{endpoint} endpoint called ==========");
+
+    try {
+      // 1. Parse and validate input
+      const { param1, param2 } = req.body as { param1: string; param2?: number };
+
+      if (!param1) {
+        res.status(400).json({ success: false, error: "param1 required" });
+        return;
+      }
+
+      // 2. Check preconditions
+      if (isRunning) {
+        res.json({ success: false, error: "Operation already running" });
+        return;
+      }
+
+      // 3. Set up state
+      const abortController = new AbortController();
+      setRunningState(true, abortController);
+
+      // 4. Call business logic (background if async)
+      businessLogicFunction(param1, param2, events, abortController)
+        .catch((error) => {
+          logError(error, "Operation failed");
+          events.emit("module:event", { type: "error", error: getErrorMessage(error) });
+        })
+        .finally(() => {
+          setRunningState(false, null);
+        });
+
+      // 5. Return immediate response
+      res.json({ success: true });
+    } catch (error) {
+      logger.error("❌ Route handler exception:", error);
+      res.status(500).json({ success: false, error: getErrorMessage(error) });
+    }
+  };
+}
+```
+
+**Key Points**:
+
+- Factory function pattern: `create{Action}Handler(dependencies)`
+- Returns async Express handler function
+- Validate input early
+- Use shared utilities from `common.ts`
+- Handle errors consistently
+- For background tasks, return success immediately and handle completion asynchronously
+
+---
+
+### `{business-function}.ts` - Business Logic Files
+
+**Purpose**: Standalone files containing complex business logic functions that can be reused across routes or extracted to reduce file size.
+
+**When to Extract**:
+
+- Function exceeds ~100-150 lines
+- Function is called from multiple route handlers
+- Function has complex logic that deserves its own file
+- Function can be tested independently
+
+**Pattern**:
+
+```typescript
+/**
+ * {Brief description of what this function does}
+ */
+
+import { query, type Options } from '@anthropic-ai/claude-agent-sdk';
+import type { EventEmitter } from '../../lib/events.js';
+import { createLogger } from '../../lib/logger.js';
+import { logAuthStatus } from './common.js';
+import { anotherBusinessFunction } from './another-business-function.js';
+
+const logger = createLogger('{ModuleName}');
+
+export async function businessLogicFunction(
+  param1: string,
+  param2: number,
+  events: EventEmitter,
+  abortController: AbortController
+): Promise<void> {
+  logger.debug('========== businessLogicFunction() started ==========');
+
+  try {
+    // Business logic here
+    // ...
+
+    // Can call other business logic functions
+    await anotherBusinessFunction(param1, events, abortController);
+
+    logger.debug('========== businessLogicFunction() completed ==========');
+  } catch (error) {
+    logger.error('❌ businessLogicFunction() failed:', error);
+    throw error;
+  }
+}
+```
+
+**Key Points**:
+
+- Export named functions (not default exports)
+- Include JSDoc comment at top
+- Import shared utilities from `common.ts`
+- Use consistent logging patterns
+- Can import and call other business logic functions
+- Handle errors and re-throw or emit events as appropriate
+
+---
+
+## Implementation Guidelines
+
+### Step 1: Create Directory Structure
+
+```bash
+mkdir -p routes/{module-name}/routes
+```
+
+### Step 2: Create `common.ts`
+
+Start with shared state and utilities:
+
+- Module-level state variables
+- State management functions
+- Logging utilities
+- Error handling utilities
+
+### Step 3: Extract Business Logic
+
+Identify large functions or reusable logic:
+
+- Functions > 150 lines → extract to separate file
+- Functions used by multiple routes → extract to separate file
+- Complex operations → extract to separate file
+
+### Step 4: Create Route Handlers
+
+For each endpoint:
+
+- Create `routes/{endpoint-name}.ts`
+- Implement factory function pattern
+- Keep handlers thin (validation + call business logic)
+- Use utilities from `common.ts`
+
+### Step 5: Create `index.ts`
+
+- Import all route handler factories
+- Create router and register routes
+- Export router creation function
+
+### Step 6: Register Module
+
+In main routes file:
+
+```typescript
+import { create{Module}Routes } from "./{module-name}/index.js";
+
+app.use("/api/{module-name}", create{Module}Routes(events));
+```
+
+---
+
+## Example: app-spec Module
+
+The `app-spec` module demonstrates this pattern:
+
+### File Breakdown
+
+**`index.ts`** (24 lines)
+
+- Creates router
+- Registers 5 endpoints
+- Exports `createSpecRegenerationRoutes()`
+
+**`common.ts`** (74 lines)
+
+- Shared state: `isRunning`, `currentAbortController`
+- State management: `setRunningState()`
+- Utilities: `logAuthStatus()`, `logError()`, `getErrorMessage()`
+
+**`generate-spec.ts`** (204 lines)
+
+- Extracted business logic for spec generation
+- Handles SDK calls, streaming, file I/O
+- Called by both `create.ts` and `generate.ts` routes
+
+**`generate-features-from-spec.ts`** (155 lines)
+
+- Extracted business logic for feature generation
+- Handles SDK calls and streaming
+- Calls `parseAndCreateFeatures()` for final step
+
+**`parse-and-create-features.ts`** (84 lines)
+
+- Extracted parsing and file creation logic
+- Called by `generate-features-from-spec.ts`
+
+**`routes/create.ts`** (96 lines)
+
+- Thin handler for POST /create
+- Validates input, checks state, calls `generateSpec()`
+
+**`routes/generate.ts`** (99 lines)
+
+- Thin handler for POST /generate
+- Similar to `create.ts` but different input parameter
+
+**`routes/generate-features.ts`** (71 lines)
+
+- Thin handler for POST /generate-features
+- Calls `generateFeaturesFromSpec()`
+
+**`routes/status.ts`** (17 lines)
+
+- Simple handler for GET /status
+- Returns current state
+
+**`routes/stop.ts`** (25 lines)
+
+- Simple handler for POST /stop
+- Aborts current operation
+
+### Key Observations
+
+1. **Route handlers are thin** - Most are 70-100 lines, focused on HTTP concerns
+2. **Business logic is extracted** - Complex operations in separate files
+3. **Shared utilities centralized** - Common functions in `common.ts`
+4. **Reusability** - `generateSpec()` used by both `create.ts` and `generate.ts`
+5. **Clear separation** - HTTP layer vs business logic vs shared utilities
+
+---
+
+## Migration Guide
+
+### Migrating an Existing Route Module
+
+1. **Analyze current structure**
+   - Identify all endpoints
+   - Identify shared state/utilities
+   - Identify large functions (>150 lines)
+
+2. **Create directory structure**
+
+   ```bash
+   mkdir -p routes/{module-name}/routes
+   ```
+
+3. **Extract common utilities**
+   - Move shared state to `common.ts`
+   - Move utility functions to `common.ts`
+   - Update imports in existing files
+
+4. **Extract business logic**
+   - Identify functions to extract
+   - Create `{function-name}.ts` files
+   - Move logic, update imports
+
+5. **Create route handlers**
+   - Create `routes/{endpoint-name}.ts` for each endpoint
+   - Move HTTP handling logic
+   - Keep handlers thin
+
+6. **Create index.ts**
+   - Import route handlers
+   - Register routes
+   - Export router creation function
+
+7. **Update main routes file**
+   - Import from new `index.ts`
+   - Update route registration
+
+8. **Test**
+   - Verify all endpoints work
+   - Check error handling
+   - Verify shared state management
+
+### Example Migration
+
+**Before** (monolithic `routes.ts`):
+
+```typescript
+// routes.ts - 500+ lines
+router.post('/create', async (req, res) => {
+  // 200 lines of logic
+});
+
+router.post('/generate', async (req, res) => {
+  // 200 lines of similar logic
+});
+```
+
+**After** (organized structure):
+
+```typescript
+// routes/app-spec/index.ts
+export function createSpecRegenerationRoutes(events) {
+  const router = Router();
+  router.post("/create", createCreateHandler(events));
+  router.post("/generate", createGenerateHandler(events));
+  return router;
+}
+
+// routes/app-spec/routes/create.ts - 96 lines
+export function createCreateHandler(events) {
+  return async (req, res) => {
+    // Thin handler, calls generateSpec()
+  };
+}
+
+// routes/app-spec/generate-spec.ts - 204 lines
+export async function generateSpec(...) {
+  // Business logic extracted here
+}
+```
+
+---
+
+## Best Practices
+
+### ✅ Do
+
+- Keep route handlers thin (< 150 lines)
+- Extract complex business logic to separate files
+- Centralize shared utilities in `common.ts`
+- Use factory function pattern for route handlers
+- Export named functions (not default exports)
+- Use consistent logging patterns
+- Handle errors consistently
+- Document complex functions with JSDoc
+
+### ❌ Don't
+
+- Put business logic directly in route handlers
+- Duplicate utility functions across files
+- Create files with only one small function (< 20 lines)
+- Mix HTTP concerns with business logic
+- Use default exports for route handlers
+- Create deeply nested directory structures
+- Put route handlers in root of module directory
+
+---
+
+## Summary
+
+The route organization pattern provides:
+
+1. **Clear structure** - Easy to find and understand code
+2. **Separation of concerns** - HTTP, business logic, and utilities separated
+3. **Reusability** - Business logic can be shared across routes
+4. **Maintainability** - Smaller, focused files are easier to maintain
+5. **Testability** - Functions can be tested independently
+
+Apply this pattern to all route modules for consistency and improved code quality.
diff --git a/temp_repo/docs/server/utilities.md b/temp_repo/docs/server/utilities.md
new file mode 100644
index 0000000000000000000000000000000000000000..91d301bb1bab62bcf9026ca4295b2f2cd87bc31c
--- /dev/null
+++ b/temp_repo/docs/server/utilities.md
@@ -0,0 +1,699 @@
+# Server Utilities Reference
+
+This document describes all utility modules available in `apps/server/src/lib/`. These utilities provide reusable functionality for image handling, prompt building, model resolution, conversation management, and error handling.
+
+---
+
+## Table of Contents
+
+1. [Image Handler](#image-handler)
+2. [Prompt Builder](#prompt-builder)
+3. [Model Resolver](#model-resolver)
+4. [Conversation Utils](#conversation-utils)
+5. [Error Handler](#error-handler)
+6. [Subprocess Manager](#subprocess-manager)
+7. [Events](#events)
+8. [Auth](#auth)
+9. [Security](#security)
+
+---
+
+## Image Handler
+
+**Location**: `apps/server/src/lib/image-handler.ts`
+
+Centralized utilities for processing image files, including MIME type detection, base64 encoding, and content block generation for Claude SDK format.
+
+### Functions
+
+#### `getMimeTypeForImage(imagePath: string): string`
+
+Get MIME type for an image file based on its extension.
+
+**Supported formats**:
+
+- `.jpg`, `.jpeg` → `image/jpeg`
+- `.png` → `image/png`
+- `.gif` → `image/gif`
+- `.webp` → `image/webp`
+- Default: `image/png`
+
+**Example**:
+
+```typescript
+import { getMimeTypeForImage } from '../lib/image-handler.js';
+
+const mimeType = getMimeTypeForImage('/path/to/image.jpg');
+// Returns: "image/jpeg"
+```
+
+---
+
+#### `readImageAsBase64(imagePath: string): Promise<ImageData>`
+
+Read an image file and convert to base64 with metadata.
+
+**Returns**: `ImageData`
+
+```typescript
+interface ImageData {
+  base64: string; // Base64-encoded image data
+  mimeType: string; // MIME type
+  filename: string; // File basename
+  originalPath: string; // Original file path
+}
+```
+
+**Example**:
+
+```typescript
+const imageData = await readImageAsBase64('/path/to/photo.png');
+console.log(imageData.base64); // "iVBORw0KG..."
+console.log(imageData.mimeType); // "image/png"
+console.log(imageData.filename); // "photo.png"
+```
+
+---
+
+#### `convertImagesToContentBlocks(imagePaths: string[], workDir?: string): Promise<ImageContentBlock[]>`
+
+Convert image paths to content blocks in Claude SDK format. Handles both relative and absolute paths.
+
+**Parameters**:
+
+- `imagePaths` - Array of image file paths
+- `workDir` - Optional working directory for resolving relative paths
+
+**Returns**: Array of `ImageContentBlock`
+
+```typescript
+interface ImageContentBlock {
+  type: 'image';
+  source: {
+    type: 'base64';
+    media_type: string;
+    data: string;
+  };
+}
+```
+
+**Example**:
+
+```typescript
+const imageBlocks = await convertImagesToContentBlocks(
+  ['./screenshot.png', '/absolute/path/diagram.jpg'],
+  '/project/root'
+);
+
+// Use in prompt content
+const contentBlocks = [{ type: 'text', text: 'Analyze these images:' }, ...imageBlocks];
+```
+
+---
+
+#### `formatImagePathsForPrompt(imagePaths: string[]): string`
+
+Format image paths as a bulleted list for inclusion in text prompts.
+
+**Returns**: Formatted string with image paths, or empty string if no images.
+
+**Example**:
+
+```typescript
+const pathsList = formatImagePathsForPrompt([
+  '/screenshots/login.png',
+  '/diagrams/architecture.png',
+]);
+
+// Returns:
+// "\n\nAttached images:\n- /screenshots/login.png\n- /diagrams/architecture.png\n"
+```
+
+---
+
+## Prompt Builder
+
+**Location**: `apps/server/src/lib/prompt-builder.ts`
+
+Standardized prompt building that combines text prompts with image attachments.
+
+### Functions
+
+#### `buildPromptWithImages(basePrompt: string, imagePaths?: string[], workDir?: string, includeImagePaths: boolean = false): Promise<PromptWithImages>`
+
+Build a prompt with optional image attachments.
+
+**Parameters**:
+
+- `basePrompt` - The text prompt
+- `imagePaths` - Optional array of image file paths
+- `workDir` - Optional working directory for resolving relative paths
+- `includeImagePaths` - Whether to append image paths to the text (default: false)
+
+**Returns**: `PromptWithImages`
+
+```typescript
+interface PromptWithImages {
+  content: PromptContent; // string | Array<ContentBlock>
+  hasImages: boolean;
+}
+
+type PromptContent =
+  | string
+  | Array<{
+      type: string;
+      text?: string;
+      source?: object;
+    }>;
+```
+
+**Example**:
+
+```typescript
+import { buildPromptWithImages } from '../lib/prompt-builder.js';
+
+// Without images
+const { content } = await buildPromptWithImages('What is 2+2?');
+// content: "What is 2+2?" (simple string)
+
+// With images
+const { content, hasImages } = await buildPromptWithImages(
+  'Analyze this screenshot',
+  ['/path/to/screenshot.png'],
+  '/project/root',
+  true // include image paths in text
+);
+// content: [
+//   { type: "text", text: "Analyze this screenshot\n\nAttached images:\n- /path/to/screenshot.png\n" },
+//   { type: "image", source: { type: "base64", media_type: "image/png", data: "..." } }
+// ]
+// hasImages: true
+```
+
+**Use Cases**:
+
+- **AgentService**: Set `includeImagePaths: true` to list paths for Read tool access
+- **AutoModeService**: Set `includeImagePaths: false` to avoid duplication in feature descriptions
+
+---
+
+## Model Resolver
+
+**Location**: `apps/server/src/lib/model-resolver.ts`
+
+Centralized model string mapping and resolution for handling model aliases and provider detection.
+
+### Constants
+
+#### `CLAUDE_MODEL_MAP`
+
+Model alias mapping for Claude models.
+
+```typescript
+export const CLAUDE_MODEL_MAP: Record<string, string> = {
+  haiku: 'claude-haiku-4-5',
+  sonnet: 'claude-sonnet-4-20250514',
+  opus: 'claude-opus-4-6',
+} as const;
+```
+
+#### `DEFAULT_MODELS`
+
+Default models per provider.
+
+```typescript
+export const DEFAULT_MODELS = {
+  claude: 'claude-opus-4-6',
+  openai: 'gpt-5.2',
+} as const;
+```
+
+### Functions
+
+#### `resolveModelString(modelKey?: string, defaultModel: string = DEFAULT_MODELS.claude): string`
+
+Resolve a model key/alias to a full model string.
+
+**Logic**:
+
+1. If `modelKey` is undefined → return `defaultModel`
+2. If starts with `"gpt-"` or `"o"` → pass through (OpenAI/Codex model)
+3. If includes `"claude-"` → pass through (full Claude model string)
+4. If in `CLAUDE_MODEL_MAP` → return mapped value
+5. Otherwise → return `defaultModel` with warning
+
+**Example**:
+
+```typescript
+import { resolveModelString, DEFAULT_MODELS } from '../lib/model-resolver.js';
+
+resolveModelString('opus');
+// Returns: "claude-opus-4-6"
+// Logs: "[ModelResolver] Resolved model alias: "opus" -> "claude-opus-4-6""
+
+resolveModelString('gpt-5.2');
+// Returns: "gpt-5.2"
+// Logs: "[ModelResolver] Using OpenAI/Codex model: gpt-5.2"
+
+resolveModelString('claude-sonnet-4-20250514');
+// Returns: "claude-sonnet-4-20250514"
+// Logs: "[ModelResolver] Using full Claude model string: claude-sonnet-4-20250514"
+
+resolveModelString('invalid-model');
+// Returns: "claude-opus-4-6"
+// Logs: "[ModelResolver] Unknown model key "invalid-model", using default: "claude-opus-4-6""
+```
+
+---
+
+#### `getEffectiveModel(explicitModel?: string, sessionModel?: string, defaultModel?: string): string`
+
+Get the effective model from multiple sources with priority.
+
+**Priority**: explicit model > session model > default model
+
+**Example**:
+
+```typescript
+import { getEffectiveModel } from '../lib/model-resolver.js';
+
+// Explicit model takes precedence
+getEffectiveModel('sonnet', 'opus');
+// Returns: "claude-sonnet-4-20250514"
+
+// Falls back to session model
+getEffectiveModel(undefined, 'haiku');
+// Returns: "claude-haiku-4-5"
+
+// Falls back to default
+getEffectiveModel(undefined, undefined, 'gpt-5.2');
+// Returns: "gpt-5.2"
+```
+
+---
+
+## Conversation Utils
+
+**Location**: `apps/server/src/lib/conversation-utils.ts`
+
+Standardized conversation history processing for both SDK-based and CLI-based providers.
+
+### Types
+
+```typescript
+import type { ConversationMessage } from '../providers/types.js';
+
+interface ConversationMessage {
+  role: 'user' | 'assistant';
+  content: string | Array<{ type: string; text?: string; source?: object }>;
+}
+```
+
+### Functions
+
+#### `extractTextFromContent(content: string | Array<ContentBlock>): string`
+
+Extract plain text from message content (handles both string and array formats).
+
+**Example**:
+
+```typescript
+import { extractTextFromContent } from "../lib/conversation-utils.js";
+
+// String content
+extractTextFromContent("Hello world");
+// Returns: "Hello world"
+
+// Array content
+extractTextFromContent([
+  { type: "text", text: "Hello" },
+  { type: "image", source: {...} },
+  { type: "text", text: "world" }
+]);
+// Returns: "Hello\nworld"
+```
+
+---
+
+#### `normalizeContentBlocks(content: string | Array<ContentBlock>): Array<ContentBlock>`
+
+Normalize message content to array format.
+
+**Example**:
+
+```typescript
+// String → array
+normalizeContentBlocks('Hello');
+// Returns: [{ type: "text", text: "Hello" }]
+
+// Array → pass through
+normalizeContentBlocks([{ type: 'text', text: 'Hello' }]);
+// Returns: [{ type: "text", text: "Hello" }]
+```
+
+---
+
+#### `formatHistoryAsText(history: ConversationMessage[]): string`
+
+Format conversation history as plain text for CLI-based providers (e.g., Codex).
+
+**Returns**: Formatted text with role labels, or empty string if no history.
+
+**Example**:
+
+```typescript
+const history = [
+  { role: 'user', content: 'What is 2+2?' },
+  { role: 'assistant', content: '2+2 equals 4.' },
+];
+
+const formatted = formatHistoryAsText(history);
+// Returns:
+// "Previous conversation:
+//
+// User: What is 2+2?
+//
+// Assistant: 2+2 equals 4.
+//
+// ---
+//
+// "
+```
+
+---
+
+#### `convertHistoryToMessages(history: ConversationMessage[]): Array<SDKMessage>`
+
+Convert conversation history to Claude SDK message format.
+
+**Returns**: Array of SDK-formatted messages ready to yield in async generator.
+
+**Example**:
+
+```typescript
+const history = [
+  { role: 'user', content: 'Hello' },
+  { role: 'assistant', content: 'Hi there!' },
+];
+
+const messages = convertHistoryToMessages(history);
+// Returns:
+// [
+//   {
+//     type: "user",
+//     session_id: "",
+//     message: {
+//       role: "user",
+//       content: [{ type: "text", text: "Hello" }]
+//     },
+//     parent_tool_use_id: null
+//   },
+//   {
+//     type: "assistant",
+//     session_id: "",
+//     message: {
+//       role: "assistant",
+//       content: [{ type: "text", text: "Hi there!" }]
+//     },
+//     parent_tool_use_id: null
+//   }
+// ]
+```
+
+---
+
+## Error Handler
+
+**Location**: `apps/server/src/lib/error-handler.ts`
+
+Standardized error classification and handling utilities.
+
+### Types
+
+```typescript
+export type ErrorType = 'authentication' | 'abort' | 'execution' | 'unknown';
+
+export interface ErrorInfo {
+  type: ErrorType;
+  message: string;
+  isAbort: boolean;
+  isAuth: boolean;
+  originalError: unknown;
+}
+```
+
+### Functions
+
+#### `isAbortError(error: unknown): boolean`
+
+Check if an error is an abort/cancellation error.
+
+**Example**:
+
+```typescript
+import { isAbortError } from '../lib/error-handler.js';
+
+try {
+  // ... operation
+} catch (error) {
+  if (isAbortError(error)) {
+    console.log('Operation was cancelled');
+    return { success: false, aborted: true };
+  }
+}
+```
+
+---
+
+#### `isAuthenticationError(errorMessage: string): boolean`
+
+Check if an error is an authentication/API key error.
+
+**Detects**:
+
+- "Authentication failed"
+- "Invalid API key"
+- "authentication_failed"
+- "Fix external API key"
+
+**Example**:
+
+```typescript
+if (isAuthenticationError(error.message)) {
+  console.error('Please check your API key configuration');
+}
+```
+
+---
+
+#### `classifyError(error: unknown): ErrorInfo`
+
+Classify an error into a specific type.
+
+**Example**:
+
+```typescript
+import { classifyError } from '../lib/error-handler.js';
+
+try {
+  // ... operation
+} catch (error) {
+  const errorInfo = classifyError(error);
+
+  switch (errorInfo.type) {
+    case 'authentication':
+      // Handle auth errors
+      break;
+    case 'abort':
+      // Handle cancellation
+      break;
+    case 'execution':
+      // Handle other errors
+      break;
+  }
+}
+```
+
+---
+
+#### `getUserFriendlyErrorMessage(error: unknown): string`
+
+Get a user-friendly error message.
+
+**Example**:
+
+```typescript
+try {
+  // ... operation
+} catch (error) {
+  const friendlyMessage = getUserFriendlyErrorMessage(error);
+  // "Operation was cancelled" for abort errors
+  // "Authentication failed. Please check your API key." for auth errors
+  // Original error message for other errors
+}
+```
+
+---
+
+## Subprocess Manager
+
+**Location**: `apps/server/src/lib/subprocess-manager.ts`
+
+Utilities for spawning CLI processes and parsing JSONL streams (used by Codex provider).
+
+### Types
+
+```typescript
+export interface SubprocessOptions {
+  command: string;
+  args: string[];
+  cwd: string;
+  env?: Record<string, string>;
+  abortController?: AbortController;
+  timeout?: number; // Milliseconds of no output before timeout
+}
+
+export interface SubprocessResult {
+  stdout: string;
+  stderr: string;
+  exitCode: number | null;
+}
+```
+
+### Functions
+
+#### `async function* spawnJSONLProcess(options: SubprocessOptions): AsyncGenerator<unknown>`
+
+Spawns a subprocess and streams JSONL output line-by-line.
+
+**Features**:
+
+- Parses each line as JSON
+- Handles abort signals
+- 30-second timeout detection for hanging processes
+- Collects stderr for error reporting
+- Continues processing other lines if one fails to parse
+
+**Example**:
+
+```typescript
+import { spawnJSONLProcess } from '../lib/subprocess-manager.js';
+
+const stream = spawnJSONLProcess({
+  command: 'codex',
+  args: ['exec', '--model', 'gpt-5.2', '--json', '--full-auto', 'Fix the bug'],
+  cwd: '/project/path',
+  env: { OPENAI_API_KEY: 'sk-...' },
+  abortController: new AbortController(),
+  timeout: 30000,
+});
+
+for await (const event of stream) {
+  console.log('Received event:', event);
+  // Process JSONL events
+}
+```
+
+---
+
+#### `async function spawnProcess(options: SubprocessOptions): Promise<SubprocessResult>`
+
+Spawns a subprocess and collects all output.
+
+**Example**:
+
+```typescript
+const result = await spawnProcess({
+  command: 'git',
+  args: ['status'],
+  cwd: '/project/path',
+});
+
+console.log(result.stdout); // Git status output
+console.log(result.exitCode); // 0 for success
+```
+
+---
+
+## Events
+
+**Location**: `apps/server/src/lib/events.ts`
+
+Event emitter system for WebSocket communication.
+
+**Documented separately** - see existing codebase for event types and usage.
+
+---
+
+## Auth
+
+**Location**: `apps/server/src/lib/auth.ts`
+
+Authentication utilities for API endpoints.
+
+**Documented separately** - see existing codebase for authentication flow.
+
+---
+
+## Security
+
+**Location**: `apps/server/src/lib/security.ts`
+
+Security utilities for input validation and sanitization.
+
+**Documented separately** - see existing codebase for security patterns.
+
+---
+
+## Best Practices
+
+### When to Use Which Utility
+
+1. **Image handling** → Always use `image-handler.ts` utilities
+   - ✅ Do: `convertImagesToContentBlocks(imagePaths, workDir)`
+   - ❌ Don't: Manually read files and encode base64
+
+2. **Prompt building** → Use `prompt-builder.ts` for consistency
+   - ✅ Do: `buildPromptWithImages(text, images, workDir, includePathsInText)`
+   - ❌ Don't: Manually construct content block arrays
+
+3. **Model resolution** → Use `model-resolver.ts` for all model handling
+   - ✅ Do: `resolveModelString(feature.model, DEFAULT_MODELS.claude)`
+   - ❌ Don't: Inline model mapping logic
+
+4. **Error handling** → Use `error-handler.ts` for classification
+   - ✅ Do: `if (isAbortError(error)) { ... }`
+   - ❌ Don't: `if (error instanceof AbortError || error.name === "AbortError") { ... }`
+
+### Importing Utilities
+
+Always use `.js` extension in imports for ESM compatibility:
+
+```typescript
+// ✅ Correct
+import { buildPromptWithImages } from '../lib/prompt-builder.js';
+
+// ❌ Incorrect
+import { buildPromptWithImages } from '../lib/prompt-builder';
+```
+
+---
+
+## Testing Utilities
+
+When writing tests for utilities:
+
+1. **Unit tests** - Test each function in isolation
+2. **Integration tests** - Test utilities working together
+3. **Mock external dependencies** - File system, child processes
+
+Example:
+
+```typescript
+describe('image-handler', () => {
+  it('should detect MIME type correctly', () => {
+    expect(getMimeTypeForImage('photo.jpg')).toBe('image/jpeg');
+    expect(getMimeTypeForImage('diagram.png')).toBe('image/png');
+  });
+});
+```
diff --git a/temp_repo/docs/settings-api-migration.md b/temp_repo/docs/settings-api-migration.md
new file mode 100644
index 0000000000000000000000000000000000000000..5a20fc216cbf43bd770cf93da9ee16202125f8fc
--- /dev/null
+++ b/temp_repo/docs/settings-api-migration.md
@@ -0,0 +1,215 @@
+# Settings API-First Migration
+
+## Overview
+
+This document summarizes the migration from localStorage-based settings persistence to an API-first approach. The goal was to ensure settings are consistent between Electron and web modes by using the server's `settings.json` as the single source of truth.
+
+## Problem
+
+Previously, settings were stored in two places:
+
+1. **Browser localStorage** (via Zustand persist middleware) - isolated per browser/Electron instance
+2. **Server files** (`{DATA_DIR}/settings.json`)
+
+This caused settings drift between Electron and web modes since each had its own localStorage.
+
+## Solution
+
+All settings are now:
+
+1. **Fetched from the server API** on app startup
+2. **Synced back to the server API** when changed (with debouncing)
+3. **No longer cached in localStorage** (persist middleware removed)
+
+## Files Changed
+
+### New Files
+
+#### `apps/ui/src/hooks/use-settings-sync.ts`
+
+New hook that:
+
+- Waits for migration to complete before starting
+- Subscribes to Zustand store changes
+- Debounces sync to server (1000ms delay)
+- Handles special case for `currentProjectId` (extracted from `currentProject` object)
+
+### Modified Files
+
+#### `apps/ui/src/store/app-store.ts`
+
+- Removed `persist` middleware from Zustand store
+- Added new state fields:
+  - `worktreePanelCollapsed: boolean`
+  - `lastProjectDir: string`
+  - `recentFolders: string[]`
+- Added corresponding setter actions
+
+#### `apps/ui/src/store/setup-store.ts`
+
+- Removed `persist` middleware from Zustand store
+
+#### `apps/ui/src/hooks/use-settings-migration.ts`
+
+Complete rewrite to:
+
+- Run in both Electron and web modes (not just Electron)
+- Parse localStorage data and merge with server data
+- Prefer server data, but use localStorage for missing arrays (projects, profiles, etc.)
+- Export `waitForMigrationComplete()` for coordination with sync hook
+- Handle `currentProjectId` to restore the currently open project
+
+#### `apps/ui/src/App.tsx`
+
+- Added `useSettingsSync` hook
+- Wait for migration to complete before rendering router (prevents race condition)
+- Show loading state while settings are being fetched
+
+#### `apps/ui/src/routes/__root.tsx`
+
+- Removed persist middleware hydration checks (no longer needed)
+- Set `setupHydrated` to `true` by default
+
+#### `apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx`
+
+- Changed from localStorage to app store for `worktreePanelCollapsed`
+
+#### `apps/ui/src/components/dialogs/file-browser-dialog.tsx`
+
+- Changed from localStorage to app store for `recentFolders`
+
+#### `apps/ui/src/lib/workspace-config.ts`
+
+- Changed from localStorage to app store for `lastProjectDir`
+
+#### `libs/types/src/settings.ts`
+
+- Added `currentProjectId: string | null` to `GlobalSettings` interface
+- Added to `DEFAULT_GLOBAL_SETTINGS`
+
+## Settings Synced to Server
+
+The following fields are synced to the server when they change:
+
+```typescript
+const SETTINGS_FIELDS_TO_SYNC = [
+  'theme',
+  'sidebarOpen',
+  'chatHistoryOpen',
+  'maxConcurrency',
+  'defaultSkipTests',
+  'enableDependencyBlocking',
+  'skipVerificationInAutoMode',
+  'useWorktrees',
+  'defaultPlanningMode',
+  'defaultRequirePlanApproval',
+  'muteDoneSound',
+  'enhancementModel',
+  'validationModel',
+  'phaseModels',
+  'enabledCursorModels',
+  'cursorDefaultModel',
+  'autoLoadClaudeMd',
+  'keyboardShortcuts',
+  'mcpServers',
+  'promptCustomization',
+  'projects',
+  'trashedProjects',
+  'currentProjectId',
+  'projectHistory',
+  'projectHistoryIndex',
+  'lastSelectedSessionByProject',
+  'worktreePanelCollapsed',
+  'lastProjectDir',
+  'recentFolders',
+];
+```
+
+## Data Flow
+
+### On App Startup
+
+```
+1. App mounts
+   └── Shows "Loading settings..." screen
+
+2. useSettingsMigration runs
+   ├── Waits for API key initialization
+   ├── Reads localStorage data (if any)
+   ├── Fetches settings from server API
+   ├── Merges data (prefers server, uses localStorage for missing arrays)
+   ├── Hydrates Zustand store (including currentProject from currentProjectId)
+   ├── Syncs merged data back to server (if needed)
+   └── Signals completion via waitForMigrationComplete()
+
+3. useSettingsSync initializes
+   ├── Waits for migration to complete
+   ├── Stores initial state hash
+   └── Starts subscribing to store changes
+
+4. Router renders
+   ├── Root layout reads currentProject (now properly set)
+   └── Navigates to /board if project was open
+```
+
+### On Settings Change
+
+```
+1. User changes a setting
+   └── Zustand store updates
+
+2. useSettingsSync detects change
+   ├── Debounces for 1000ms
+   └── Syncs to server via API
+
+3. Server writes to settings.json
+```
+
+## Migration Logic
+
+When merging localStorage with server data:
+
+1. **Server has data** → Use server data as base
+2. **Server missing arrays** (projects, mcpServers, etc.) → Use localStorage arrays
+3. **Server missing objects** (lastSelectedSessionByProject) → Use localStorage objects
+4. **Simple values** (lastProjectDir, currentProjectId) → Use localStorage if server is empty
+
+## Exported Functions
+
+### `useSettingsMigration()`
+
+Hook that handles initial settings hydration. Returns:
+
+- `checked: boolean` - Whether hydration is complete
+- `migrated: boolean` - Whether data was migrated from localStorage
+- `error: string | null` - Error message if failed
+
+### `useSettingsSync()`
+
+Hook that handles ongoing sync. Returns:
+
+- `loaded: boolean` - Whether sync is initialized
+- `syncing: boolean` - Whether currently syncing
+- `error: string | null` - Error message if failed
+
+### `waitForMigrationComplete()`
+
+Returns a Promise that resolves when migration is complete. Used for coordination.
+
+### `forceSyncSettingsToServer()`
+
+Manually triggers an immediate sync to server.
+
+### `refreshSettingsFromServer()`
+
+Fetches latest settings from server and updates store.
+
+## Testing
+
+All 1001 server tests pass after these changes.
+
+## Notes
+
+- **sessionStorage** is still used for session-specific state (splash screen shown, auto-mode state)
+- **Terminal layouts** are stored in the app store per-project (not synced to API - considered transient UI state)
+- The server's `{DATA_DIR}/settings.json` is the single source of truth
diff --git a/temp_repo/docs/terminal-custom-configs-plan.md b/temp_repo/docs/terminal-custom-configs-plan.md
new file mode 100644
index 0000000000000000000000000000000000000000..92ea53c619852ca41ee61490707ac197a8eceed0
--- /dev/null
+++ b/temp_repo/docs/terminal-custom-configs-plan.md
@@ -0,0 +1,632 @@
+# Implementation Plan: Custom Terminal Configurations with Theme Synchronization
+
+## Overview
+
+Implement custom shell configuration files (.bashrc, .zshrc) that automatically sync with Automaker's 40 themes, providing a seamless terminal experience where prompt colors match the app theme. This is an **opt-in feature** that creates configs in `.automaker/terminal/` without modifying user's existing RC files.
+
+## Architecture
+
+### Core Components
+
+1. **RC Generator** (`libs/platform/src/rc-generator.ts`) - NEW
+   - Template-based generation for bash/zsh/sh
+   - Theme-to-ANSI color mapping from hex values
+   - Git info integration (branch, dirty status)
+   - Prompt format templates (standard, minimal, powerline, starship-inspired)
+
+2. **RC File Manager** (`libs/platform/src/rc-file-manager.ts`) - NEW
+   - File I/O for `.automaker/terminal/` directory
+   - Version checking and regeneration logic
+   - Path resolution for different shells
+
+3. **Terminal Service** (`apps/server/src/services/terminal-service.ts`) - MODIFY
+   - Inject BASH_ENV/ZDOTDIR environment variables when spawning PTY
+   - Hook for theme change regeneration
+   - Backwards compatible (no change when disabled)
+
+4. **Settings Schema** (`libs/types/src/settings.ts`) - MODIFY
+   - Add `terminalConfig` to GlobalSettings and ProjectSettings
+   - Include enable toggle, prompt format, git info toggles, custom aliases/env vars
+
+5. **Settings UI** (`apps/ui/src/components/views/settings-view/terminal/terminal-config-section.tsx`) - NEW
+   - Enable/disable toggle with explanation
+   - Prompt format selector (4 formats)
+   - Git info toggles (branch/status)
+   - Custom aliases textarea
+   - Custom env vars key-value editor
+   - Live preview panel showing example prompt
+
+## File Structure
+
+```
+.automaker/terminal/
+├── bashrc.sh          # Bash config (sourced via BASH_ENV)
+├── zshrc.zsh          # Zsh config (via ZDOTDIR)
+├── common.sh          # Shared functions (git prompt, etc.)
+├── themes/
+│   ├── dark.sh        # Theme-specific color exports (40 files)
+│   ├── dracula.sh
+│   ├── nord.sh
+│   └── ... (38 more)
+├── version.txt        # RC file format version (for migrations)
+└── user-custom.sh     # User's additional customizations (optional)
+```
+
+## Implementation Steps
+
+### Step 1: Create RC Generator Package
+
+**File**: `libs/platform/src/rc-generator.ts`
+
+**Key Functions**:
+
+```typescript
+// Main generation functions
+export function generateBashrc(theme: ThemeMode, config: TerminalConfig): string;
+export function generateZshrc(theme: ThemeMode, config: TerminalConfig): string;
+export function generateCommonFunctions(): string;
+export function generateThemeColors(theme: ThemeMode): string;
+
+// Color mapping
+export function hexToXterm256(hex: string): number;
+export function getThemeANSIColors(terminalTheme: TerminalTheme): ANSIColors;
+```
+
+**Templates**:
+
+- Source user's original ~/.bashrc or ~/.zshrc first
+- Load theme colors from `themes/${AUTOMAKER_THEME}.sh`
+- Set custom PS1/PROMPT only if `AUTOMAKER_CUSTOM_PROMPT=true`
+- Include git prompt function: `automaker_git_prompt()`
+
+**Example bashrc.sh template**:
+
+```bash
+#!/bin/bash
+# Automaker Terminal Configuration v1.0
+
+# Source user's original bashrc first
+if [ -f "$HOME/.bashrc" ]; then
+    source "$HOME/.bashrc"
+fi
+
+# Load Automaker theme colors
+AUTOMAKER_THEME="${AUTOMAKER_THEME:-dark}"
+if [ -f "${BASH_SOURCE%/*}/themes/$AUTOMAKER_THEME.sh" ]; then
+    source "${BASH_SOURCE%/*}/themes/$AUTOMAKER_THEME.sh"
+fi
+
+# Load common functions (git prompt)
+source "${BASH_SOURCE%/*}/common.sh"
+
+# Set custom prompt (only if enabled)
+if [ "$AUTOMAKER_CUSTOM_PROMPT" = "true" ]; then
+    PS1="\[$COLOR_USER\]\u@\h\[$COLOR_RESET\] "
+    PS1="$PS1\[$COLOR_PATH\]\w\[$COLOR_RESET\]"
+    PS1="$PS1\$(automaker_git_prompt) "
+    PS1="$PS1\[$COLOR_PROMPT\]\$\[$COLOR_RESET\] "
+fi
+
+# Load user customizations (if exists)
+if [ -f "${BASH_SOURCE%/*}/user-custom.sh" ]; then
+    source "${BASH_SOURCE%/*}/user-custom.sh"
+fi
+```
+
+**Color Mapping Algorithm**:
+
+1. Get hex colors from `apps/ui/src/config/terminal-themes.ts` (TerminalTheme interface)
+2. Convert hex to RGB
+3. Map to closest xterm-256 color code using Euclidean distance in RGB space
+4. Generate ANSI escape codes: `\[\e[38;5;{code}m\]` for foreground
+
+### Step 2: Create RC File Manager
+
+**File**: `libs/platform/src/rc-file-manager.ts`
+
+**Key Functions**:
+
+```typescript
+export async function ensureTerminalDir(projectPath: string): Promise<void>;
+export async function writeRcFiles(
+  projectPath: string,
+  theme: ThemeMode,
+  config: TerminalConfig
+): Promise<void>;
+export function getRcFilePath(projectPath: string, shell: 'bash' | 'zsh' | 'sh'): string;
+export async function checkRcFileVersion(projectPath: string): Promise<number | null>;
+export async function needsRegeneration(
+  projectPath: string,
+  theme: ThemeMode,
+  config: TerminalConfig
+): Promise<boolean>;
+```
+
+**File Operations**:
+
+- Create `.automaker/terminal/` if doesn't exist
+- Write RC files with 0644 permissions
+- Write theme color files (40 themes × 1 file each)
+- Create version.txt with format version (currently "11")
+- Support atomic writes (write to temp, then rename)
+
+### Step 3: Add Settings Schema
+
+**File**: `libs/types/src/settings.ts`
+
+**Add to GlobalSettings** (around line 842):
+
+```typescript
+/** Terminal configuration settings */
+terminalConfig?: {
+  /** Enable custom terminal configurations (default: false) */
+  enabled: boolean;
+
+  /** Enable custom prompt (default: true when enabled) */
+  customPrompt: boolean;
+
+  /** Prompt format template */
+  promptFormat: 'standard' | 'minimal' | 'powerline' | 'starship';
+
+  /** Prompt theme preset */
+  promptTheme?: TerminalPromptTheme;
+
+  /** Show git branch in prompt (default: true) */
+  showGitBranch: boolean;
+
+  /** Show git status dirty indicator (default: true) */
+  showGitStatus: boolean;
+
+  /** Show user and host in prompt (default: true) */
+  showUserHost: boolean;
+
+  /** Show path in prompt (default: true) */
+  showPath: boolean;
+
+  /** Path display style */
+  pathStyle: 'full' | 'short' | 'basename';
+
+  /** Limit path depth (0 = full path) */
+  pathDepth: number;
+
+  /** Show current time in prompt (default: false) */
+  showTime: boolean;
+
+  /** Show last command exit status when non-zero (default: false) */
+  showExitStatus: boolean;
+
+  /** User-provided custom aliases (multiline string) */
+  customAliases: string;
+
+  /** User-provided custom env vars */
+  customEnvVars: Record<string, string>;
+
+  /** RC file format version (for migration) */
+  rcFileVersion?: number;
+};
+```
+
+**Add to ProjectSettings**:
+
+```typescript
+/** Project-specific terminal config overrides */
+terminalConfig?: {
+  /** Override global enabled setting */
+  enabled?: boolean;
+
+  /** Override prompt theme preset */
+  promptTheme?: TerminalPromptTheme;
+
+  /** Override showing user/host */
+  showUserHost?: boolean;
+
+  /** Override showing path */
+  showPath?: boolean;
+
+  /** Override path style */
+  pathStyle?: 'full' | 'short' | 'basename';
+
+  /** Override path depth (0 = full path) */
+  pathDepth?: number;
+
+  /** Override showing time */
+  showTime?: boolean;
+
+  /** Override showing exit status */
+  showExitStatus?: boolean;
+
+  /** Project-specific custom aliases */
+  customAliases?: string;
+
+  /** Project-specific env vars */
+  customEnvVars?: Record<string, string>;
+
+  /** Custom welcome message for this project */
+  welcomeMessage?: string;
+};
+```
+
+**Defaults**:
+
+```typescript
+const DEFAULT_TERMINAL_CONFIG = {
+  enabled: false,
+  customPrompt: true,
+  promptFormat: 'standard' as const,
+  promptTheme: 'custom' as const,
+  showGitBranch: true,
+  showGitStatus: true,
+  showUserHost: true,
+  showPath: true,
+  pathStyle: 'full' as const,
+  pathDepth: 0,
+  showTime: false,
+  showExitStatus: false,
+  customAliases: '',
+  customEnvVars: {},
+  rcFileVersion: 11,
+};
+```
+
+**Oh My Posh Themes**:
+
+- When `promptTheme` starts with `omp-` and `oh-my-posh` is available, the generated RC files will
+  initialize oh-my-posh with the selected theme name.
+- If oh-my-posh is not installed, the prompt falls back to the Automaker-built prompt format.
+- `POSH_THEMES_PATH` is exported to the standard user themes directory so themes resolve offline.
+
+### Step 4: Modify Terminal Service
+
+**File**: `apps/server/src/services/terminal-service.ts`
+
+**Modification Point**: In `createSession()` method, around line 335-344 where `env` object is built.
+
+**Add before PTY spawn**:
+
+```typescript
+// Get terminal config from settings
+const terminalConfig = await this.settingsService?.getGlobalSettings();
+const projectSettings = options.projectPath
+  ? await this.settingsService?.getProjectSettings(options.projectPath)
+  : null;
+
+const effectiveTerminalConfig = {
+  ...terminalConfig?.terminalConfig,
+  ...projectSettings?.terminalConfig,
+};
+
+if (effectiveTerminalConfig?.enabled) {
+  // Ensure RC files are up to date
+  const currentTheme = terminalConfig?.theme || 'dark';
+  await ensureRcFilesUpToDate(options.projectPath || cwd, currentTheme, effectiveTerminalConfig);
+
+  // Set shell-specific env vars
+  const shellName = path.basename(shell).toLowerCase();
+
+  if (shellName.includes('bash')) {
+    env.BASH_ENV = getRcFilePath(options.projectPath || cwd, 'bash');
+    env.AUTOMAKER_CUSTOM_PROMPT = effectiveTerminalConfig.customPrompt ? 'true' : 'false';
+    env.AUTOMAKER_THEME = currentTheme;
+  } else if (shellName.includes('zsh')) {
+    env.ZDOTDIR = path.join(options.projectPath || cwd, '.automaker', 'terminal');
+    env.AUTOMAKER_CUSTOM_PROMPT = effectiveTerminalConfig.customPrompt ? 'true' : 'false';
+    env.AUTOMAKER_THEME = currentTheme;
+  } else if (shellName === 'sh') {
+    env.ENV = getRcFilePath(options.projectPath || cwd, 'sh');
+    env.AUTOMAKER_CUSTOM_PROMPT = effectiveTerminalConfig.customPrompt ? 'true' : 'false';
+    env.AUTOMAKER_THEME = currentTheme;
+  }
+}
+```
+
+**Add new method for theme changes**:
+
+```typescript
+async onThemeChange(projectPath: string, newTheme: ThemeMode): Promise<void> {
+  const globalSettings = await this.settingsService?.getGlobalSettings();
+  const terminalConfig = globalSettings?.terminalConfig;
+
+  if (terminalConfig?.enabled) {
+    // Regenerate RC files with new theme
+    await writeRcFiles(projectPath, newTheme, terminalConfig);
+  }
+}
+```
+
+### Step 5: Create Settings UI
+
+**File**: `apps/ui/src/components/views/settings-view/terminal/terminal-config-section.tsx`
+
+**Component Structure**:
+
+```typescript
+export function TerminalConfigSection() {
+  return (
+    <div>
+      {/* Enable Toggle with Warning */}
+      <div>
+        <Label>Custom Terminal Configurations</Label>
+        <Switch checked={enabled} onCheckedChange={handleToggle} />
+        <p>Creates custom shell configs in .automaker/terminal/</p>
+      </div>
+
+      {enabled && (
+        <>
+          {/* Custom Prompt Toggle */}
+          <Switch checked={customPrompt} />
+
+          {/* Prompt Format Selector */}
+          <Select value={promptFormat} onValueChange={setPromptFormat}>
+            <option value="standard">Standard</option>
+            <option value="minimal">Minimal</option>
+            <option value="powerline">Powerline</option>
+            <option value="starship">Starship-Inspired</option>
+          </Select>
+
+          {/* Git Info Toggles */}
+          <Switch checked={showGitBranch} label="Show Git Branch" />
+          <Switch checked={showGitStatus} label="Show Git Status" />
+
+          {/* Custom Aliases */}
+          <Textarea
+            value={customAliases}
+            placeholder="# Custom aliases\nalias ll='ls -la'"
+          />
+
+          {/* Custom Env Vars */}
+          <KeyValueEditor
+            value={customEnvVars}
+            onChange={setCustomEnvVars}
+          />
+
+          {/* Live Preview Panel */}
+          <PromptPreview
+            format={promptFormat}
+            theme={effectiveTheme}
+            gitBranch={showGitBranch ? 'main' : null}
+            gitDirty={showGitStatus}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+```
+
+**Preview Component**:
+Shows example prompt like: `[user@host] ~/projects/automaker (main*) $`
+Updates instantly when theme or format changes.
+
+### Step 6: Theme Change Hook
+
+**File**: `apps/server/src/routes/settings.ts`
+
+**Hook into theme update endpoint**:
+
+```typescript
+// After updating theme in settings
+if (oldTheme !== newTheme) {
+  // Regenerate RC files for all projects with terminal config enabled
+  const projects = settings.projects;
+  for (const project of projects) {
+    const projectSettings = await settingsService.getProjectSettings(project.path);
+    if (projectSettings.terminalConfig?.enabled !== false) {
+      await terminalService.onThemeChange(project.path, newTheme);
+    }
+  }
+}
+```
+
+## Shell Configuration Strategy
+
+### Bash (via BASH_ENV)
+
+- Set `BASH_ENV=/path/to/.automaker/terminal/bashrc.sh`
+- BASH_ENV is loaded for all shells (interactive and non-interactive)
+- User's ~/.bashrc is sourced first within our bashrc.sh
+- No need for `--rcfile` flag (which would skip ~/.bashrc)
+
+### Zsh (via ZDOTDIR)
+
+- Set `ZDOTDIR=/path/to/.automaker/terminal/`
+- Create `.zshrc` symlink: `zshrc.zsh`
+- User's ~/.zshrc is sourced within our zshrc.zsh
+- Zsh's canonical configuration directory mechanism
+
+### Sh (via ENV)
+
+- Set `ENV=/path/to/.automaker/terminal/common.sh`
+- POSIX shell standard environment variable
+- Minimal prompt (POSIX sh doesn't support advanced prompts)
+
+## Prompt Formats
+
+### 1. Standard
+
+```
+[user@host] ~/path/to/project (main*) $
+```
+
+### 2. Minimal
+
+```
+~/project (main*) $
+```
+
+### 3. Powerline (Unicode box-drawing)
+
+```
+┌─[user@host]─[~/path]─[main*]
+└─$
+```
+
+### 4. Starship-Inspired
+
+```
+user@host in ~/path on main*
+❯
+```
+
+## Theme Synchronization
+
+### On Initial Enable
+
+1. User toggles "Enable Custom Terminal Configs"
+2. Show confirmation dialog explaining what will happen
+3. Generate RC files for current theme
+4. Set `rcFileVersion: 11` in settings
+
+### On Theme Change
+
+1. User changes app theme in settings
+2. Settings API detects theme change
+3. Call `terminalService.onThemeChange()` for each project
+4. Regenerate theme color files (`.automaker/terminal/themes/`)
+5. Existing terminals keep old theme (expected behavior)
+6. New terminals use new theme
+
+### On Disable
+
+1. User toggles off "Enable Custom Terminal Configs"
+2. Delete `.automaker/terminal/` directory
+3. New terminals spawn without custom env vars
+4. Existing terminals continue with current config until restarted
+
+## Critical Files
+
+### Files to Modify
+
+1. `/home/dhanush/Projects/automaker/apps/server/src/services/terminal-service.ts` - Add env var injection logic at line ~335-344
+2. `/home/dhanush/Projects/automaker/libs/types/src/settings.ts` - Add terminalConfig to GlobalSettings (~line 842) and ProjectSettings
+3. `/home/dhanush/Projects/automaker/apps/server/src/routes/settings.ts` - Add theme change hook
+
+### Files to Create
+
+1. `/home/dhanush/Projects/automaker/libs/platform/src/rc-generator.ts` - RC file generation logic
+2. `/home/dhanush/Projects/automaker/libs/platform/src/rc-file-manager.ts` - File I/O and path resolution
+3. `/home/dhanush/Projects/automaker/apps/ui/src/components/views/settings-view/terminal/terminal-config-section.tsx` - Settings UI
+4. `/home/dhanush/Projects/automaker/apps/ui/src/components/views/settings-view/terminal/prompt-preview.tsx` - Live preview component
+
+### Files to Read
+
+1. `/home/dhanush/Projects/automaker/apps/ui/src/config/terminal-themes.ts` - Source of theme hex colors for ANSI mapping
+
+## Testing Approach
+
+### Unit Tests
+
+- `rc-generator.test.ts`: Test template generation for all 40 themes
+- `rc-file-manager.test.ts`: Test file I/O and version checking
+- `terminal-service.test.ts`: Test env var injection with mocked PTY spawn
+
+### E2E Tests
+
+- Enable custom configs in settings
+- Change theme and verify new terminals use new colors
+- Add custom aliases and verify they work in terminal
+- Test all 4 prompt formats
+- Test disable flow (files removed, terminals work normally)
+
+### Manual Testing Checklist
+
+- [ ] Test on macOS with zsh
+- [ ] Test on Linux with bash
+- [ ] Test all 40 themes have correct colors
+- [ ] Test git prompt in repo vs non-repo directories
+- [ ] Test custom aliases execution
+- [ ] Test custom env vars available
+- [ ] Test project-specific overrides
+- [ ] Test disable/re-enable flow
+
+## Verification
+
+### End-to-End Test
+
+1. Enable custom terminal configs in settings
+2. Set prompt format to "powerline"
+3. Add custom alias: `alias gs='git status'`
+4. Change theme to "dracula"
+5. Open new terminal
+6. Verify:
+   - Prompt uses powerline format with theme colors
+   - Git branch shows if in repo
+   - `gs` alias works
+   - User's ~/.bashrc still loaded (test with known alias from user's file)
+7. Change theme to "nord"
+8. Open new terminal
+9. Verify prompt colors changed to match nord theme
+10. Disable custom configs
+11. Verify `.automaker/terminal/` deleted
+12. Open new terminal
+13. Verify standard prompt without custom config
+
+### Success Criteria
+
+- ✅ Feature can be enabled/disabled in settings
+- ✅ RC files generated in `.automaker/terminal/`
+- ✅ Prompt colors match theme (all 40 themes)
+- ✅ Git branch/status shown in prompt
+- ✅ Custom aliases work
+- ✅ Custom env vars available
+- ✅ User's original ~/.bashrc or ~/.zshrc still loads
+- ✅ Theme changes regenerate color files
+- ✅ Works on Mac (zsh) and Linux (bash)
+- ✅ No breaking changes to existing terminal functionality
+
+## Security & Safety
+
+### File Permissions
+
+- RC files: 0644 (user read/write, others read)
+- Directory: 0755 (user rwx, others rx)
+- No secrets in RC files
+
+### Input Sanitization
+
+- Escape special characters in custom aliases
+- Validate env var names (alphanumeric + underscore only)
+- No eval of user-provided code
+- Shell escaping for all user inputs
+
+### Backwards Compatibility
+
+- Feature disabled by default
+- Existing terminals unaffected when disabled
+- User's original RC files always sourced first
+- Easy rollback (just disable and delete files)
+
+## Branch Creation
+
+Per PR workflow in DEVELOPMENT_WORKFLOW.md:
+
+1. Create feature branch: `git checkout -b feature/custom-terminal-configs`
+2. Implement changes following this plan
+3. Test thoroughly
+4. Merge upstream RC before shipping: `git merge upstream/v0.14.0rc --no-edit`
+5. Push to origin: `git push -u origin feature/custom-terminal-configs`
+6. Create PR targeting `main` branch
+
+## Documentation
+
+After implementation, create comprehensive documentation at:
+`/home/dhanush/Projects/automaker/docs/terminal-custom-configs.md`
+
+**Documentation should cover**:
+
+- Feature overview and benefits
+- How to enable custom terminal configs
+- Prompt format options with examples
+- Custom aliases and env vars
+- Theme synchronization behavior
+- Troubleshooting common issues
+- How to disable the feature
+- Technical details for contributors
+
+## Timeline Estimate
+
+- Week 1: Core infrastructure (RC generator, file manager, settings schema)
+- Week 2: Terminal service integration, theme sync
+- Week 3: Settings UI, preview component
+- Week 4: Testing, documentation, polish
+
+Total: ~4 weeks for complete implementation
diff --git a/temp_repo/docs/terminal.md b/temp_repo/docs/terminal.md
new file mode 100644
index 0000000000000000000000000000000000000000..0749dcf689c332b8b4ea1fbef2bcbdd5b050f303
--- /dev/null
+++ b/temp_repo/docs/terminal.md
@@ -0,0 +1,123 @@
+# Terminal
+
+The integrated terminal provides a full-featured terminal emulator within Automaker, powered by xterm.js.
+
+## Configuration
+
+Configure the terminal via environment variables in `apps/server/.env`:
+
+### Disable Terminal Completely
+
+```
+TERMINAL_ENABLED=false
+```
+
+Set to `false` to completely disable the terminal feature.
+
+### Password Protection
+
+```
+TERMINAL_PASSWORD=yourpassword
+```
+
+By default, the terminal is **not password protected**. Add this variable to require a password.
+
+When password protection is enabled:
+
+- Enter the password in **Settings > Terminal** to unlock
+- The terminal remains unlocked for the session
+- You can toggle password requirement on/off in settings after unlocking
+
+## Keyboard Shortcuts
+
+When the terminal is focused, the following shortcuts are available:
+
+| Shortcut | Action                                  |
+| -------- | --------------------------------------- |
+| `Alt+T`  | Open new terminal tab                   |
+| `Alt+D`  | Split terminal right (horizontal split) |
+| `Alt+S`  | Split terminal down (vertical split)    |
+| `Alt+W`  | Close current terminal                  |
+
+These shortcuts are customizable via the keyboard shortcuts settings (Settings > Keyboard Shortcuts).
+
+### Split Pane Navigation
+
+Navigate between terminal panes using directional shortcuts:
+
+| Shortcut                          | Action                               |
+| --------------------------------- | ------------------------------------ |
+| `Ctrl+Alt+ArrowUp` (or `Cmd+Alt`) | Move focus to terminal pane above    |
+| `Ctrl+Alt+ArrowDown`              | Move focus to terminal pane below    |
+| `Ctrl+Alt+ArrowLeft`              | Move focus to terminal pane on left  |
+| `Ctrl+Alt+ArrowRight`             | Move focus to terminal pane on right |
+
+The navigation is spatially aware - pressing Down will move to the terminal below your current one, not just cycle through terminals in order.
+
+Global shortcut (works anywhere in the app):
+| Shortcut | Action |
+|----------|--------|
+| `Cmd+`` (Mac) / `Ctrl+`` (Windows/Linux) | Toggle terminal view |
+
+## Features
+
+### Multiple Terminals
+
+- Create multiple terminal tabs using the `+` button
+- Split terminals horizontally or vertically within a tab
+- Drag terminals to rearrange them
+
+### Theming
+
+The terminal automatically matches your app theme. Supported themes include:
+
+- Light / Dark / System
+- Retro, Dracula, Nord, Monokai
+- Tokyo Night, Solarized, Gruvbox
+- Catppuccin, One Dark, Synthwave, Red
+
+### Font Size
+
+- Use the zoom controls (`+`/`-` buttons) in each terminal panel
+- Or use `Cmd/Ctrl + Scroll` to zoom
+
+### Scrollback
+
+- The terminal maintains a scrollback buffer of recent output
+- Scroll up to view previous output
+- Output is preserved when reconnecting
+
+## Architecture
+
+The terminal uses a client-server architecture:
+
+1. **Frontend** (`apps/ui`): xterm.js terminal emulator with WebGL rendering
+2. **Backend** (`apps/server`): node-pty for PTY (pseudo-terminal) sessions
+
+Communication happens over WebSocket for real-time bidirectional data flow.
+
+### Shell Detection
+
+The server automatically detects the best shell:
+
+- **WSL**: User's shell or `/bin/bash`
+- **macOS**: User's shell, zsh, or bash
+- **Linux**: User's shell, bash, or sh
+- **Windows**: PowerShell 7, PowerShell, or cmd.exe
+
+## Troubleshooting
+
+### Terminal not connecting
+
+1. Ensure the server is running (`npm run dev:server`)
+2. Check that port 3008 is available
+3. Verify the terminal is unlocked
+
+### Slow performance with heavy output
+
+The terminal throttles output at ~60fps to prevent UI lockup. Very fast output (like `cat` on large files) will be batched.
+
+### Shortcuts not working
+
+- Ensure the terminal is focused (click inside it)
+- Some system shortcuts may conflict (especially Alt+Shift combinations on Windows)
diff --git a/temp_repo/docs/worktree-init-script-example.sh b/temp_repo/docs/worktree-init-script-example.sh
new file mode 100644
index 0000000000000000000000000000000000000000..2f9425443b3322c85532bb0626add3f5a25da45d
--- /dev/null
+++ b/temp_repo/docs/worktree-init-script-example.sh
@@ -0,0 +1,30 @@
+#!/bin/bash
+# Example worktree init script for Automaker
+# Copy this content to Settings > Worktrees > Init Script
+# Or save directly as .automaker/worktree-init.sh in your project
+
+echo "=========================================="
+echo "  Worktree Init Script Starting..."
+echo "=========================================="
+echo ""
+echo "Current directory: $(pwd)"
+echo "Branch: $(git branch --show-current 2>/dev/null || echo 'unknown')"
+echo ""
+
+# Install dependencies
+echo "[1/1] Installing npm dependencies..."
+if [ -f "package.json" ]; then
+    if npm install; then
+        echo "Dependencies installed successfully!"
+    else
+        echo "ERROR: npm install failed with exit code $?"
+        exit 1
+    fi
+else
+    echo "No package.json found, skipping npm install"
+fi
+echo ""
+
+echo "=========================================="
+echo "  Worktree initialization complete!"
+echo "=========================================="
diff --git a/temp_repo/libs/dependency-resolver/README.md b/temp_repo/libs/dependency-resolver/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..8cc7fd7e639469f6601c40b4253e30e381d8ab61
--- /dev/null
+++ b/temp_repo/libs/dependency-resolver/README.md
@@ -0,0 +1,188 @@
+# @automaker/dependency-resolver
+
+Feature dependency resolution using topological sorting.
+
+## Overview
+
+This package provides dependency resolution for AutoMaker features using Kahn's algorithm with priority-aware ordering. It ensures features are executed in the correct order based on their dependencies.
+
+## Installation
+
+```bash
+npm install @automaker/dependency-resolver
+```
+
+## Exports
+
+### Resolve Dependencies
+
+Order features based on dependencies and priorities.
+
+```typescript
+import { resolveDependencies } from '@automaker/dependency-resolver';
+import type { Feature } from '@automaker/types';
+
+const features: Feature[] = [
+  {
+    id: 'database',
+    category: 'backend',
+    description: 'Setup database',
+    priority: 1,
+  },
+  {
+    id: 'auth',
+    category: 'backend',
+    description: 'Add authentication',
+    dependencies: ['database'],
+    priority: 2,
+  },
+  {
+    id: 'api',
+    category: 'backend',
+    description: 'Create API endpoints',
+    dependencies: ['auth'],
+    priority: 3,
+  },
+];
+
+const result = resolveDependencies(features);
+
+console.log(result.orderedFeatures);
+// [database, auth, api]
+
+if (result.hasCycle) {
+  console.error('Circular dependency detected!');
+  console.error('Features in cycle:', result.cyclicFeatures);
+}
+```
+
+### Check Dependencies Satisfied
+
+Check if a feature's dependencies are satisfied.
+
+```typescript
+import { areDependenciesSatisfied } from '@automaker/dependency-resolver';
+
+const allFeatures: Feature[] = [
+  { id: 'database', status: 'completed', ... },
+  { id: 'auth', status: 'pending', dependencies: ['database'], ... }
+];
+
+const authFeature = allFeatures.find(f => f.id === 'auth');
+
+if (areDependenciesSatisfied(authFeature, allFeatures)) {
+  console.log('Auth feature is ready to execute');
+} else {
+  console.log('Waiting for dependencies');
+}
+```
+
+### Get Blocking Dependencies
+
+Get list of incomplete dependencies blocking a feature.
+
+```typescript
+import { getBlockingDependencies } from '@automaker/dependency-resolver';
+
+const blocking = getBlockingDependencies(feature, allFeatures);
+
+if (blocking.length > 0) {
+  console.log(`Feature blocked by: ${blocking.join(', ')}`);
+} else {
+  console.log('No blocking dependencies');
+}
+```
+
+## Usage Example
+
+```typescript
+import {
+  resolveDependencies,
+  areDependenciesSatisfied,
+  getBlockingDependencies,
+} from '@automaker/dependency-resolver';
+import type { Feature } from '@automaker/types';
+
+async function executeFeatures(features: Feature[]) {
+  // Resolve dependency order
+  const { orderedFeatures, hasCycle, cyclicFeatures } = resolveDependencies(features);
+
+  if (hasCycle) {
+    throw new Error(`Circular dependency: ${cyclicFeatures.join(' → ')}`);
+  }
+
+  // Execute in order
+  for (const feature of orderedFeatures) {
+    // Check if dependencies are satisfied
+    if (!areDependenciesSatisfied(feature, features)) {
+      const blocking = getBlockingDependencies(feature, features);
+      console.log(`Skipping ${feature.id}, blocked by: ${blocking.join(', ')}`);
+      continue;
+    }
+
+    // Execute feature
+    console.log(`Executing: ${feature.id}`);
+    await executeFeature(feature);
+
+    // Mark as completed
+    feature.status = 'completed';
+  }
+}
+```
+
+## Algorithm
+
+### Topological Sort (Kahn's Algorithm)
+
+1. Calculate in-degree for each feature (number of dependencies)
+2. Start with features that have no dependencies (in-degree = 0)
+3. Process features in priority order
+4. Remove processed features from dependency graph
+5. Repeat until all features processed or cycle detected
+
+### Priority Handling
+
+- Features with lower priority numbers execute first
+- When multiple features have same in-degree, priority determines order
+- Features without explicit priority default to lowest priority
+
+### Cycle Detection
+
+- Detects circular dependencies
+- Returns affected features in cycle
+- Prevents infinite loops in execution
+
+## Return Types
+
+### DependencyResolutionResult
+
+```typescript
+interface DependencyResolutionResult {
+  orderedFeatures: Feature[]; // Features in execution order
+  hasCycle: boolean; // True if circular dependency detected
+  cyclicFeatures: string[]; // Feature IDs involved in cycle
+}
+```
+
+## Edge Cases
+
+### Missing Dependencies
+
+Features with dependencies on non-existent features are treated as if the dependency is satisfied (allows flexibility).
+
+### Self-Dependencies
+
+Features depending on themselves are detected as cycles.
+
+### Empty Dependencies Array
+
+Treated same as no dependencies - feature is ready immediately.
+
+## Dependencies
+
+- `@automaker/types` - Feature type definition
+
+## Used By
+
+- `@automaker/server` - Auto-mode feature execution
+- `@automaker/ui` - Board view feature ordering
diff --git a/temp_repo/libs/dependency-resolver/package.json b/temp_repo/libs/dependency-resolver/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..4f7c30fd9d4c82dc24d008db2839690db9cf7c43
--- /dev/null
+++ b/temp_repo/libs/dependency-resolver/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@automaker/dependency-resolver",
+  "version": "1.0.0",
+  "description": "Feature dependency resolution for AutoMaker",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "keywords": [
+    "automaker",
+    "dependency",
+    "resolver"
+  ],
+  "author": "AutoMaker Team",
+  "license": "SEE LICENSE IN LICENSE",
+  "engines": {
+    "node": ">=22.0.0 <23.0.0"
+  },
+  "dependencies": {
+    "@automaker/types": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.19.3",
+    "typescript": "5.9.3",
+    "vitest": "4.0.16"
+  }
+}
diff --git a/temp_repo/libs/dependency-resolver/src/index.ts b/temp_repo/libs/dependency-resolver/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fcae1258da6c618b1dd1b5d866c13613c3841577
--- /dev/null
+++ b/temp_repo/libs/dependency-resolver/src/index.ts
@@ -0,0 +1,19 @@
+/**
+ * @automaker/dependency-resolver
+ * Feature dependency resolution for AutoMaker
+ */
+
+export {
+  resolveDependencies,
+  areDependenciesSatisfied,
+  getBlockingDependencies,
+  createFeatureMap,
+  getBlockingDependenciesFromMap,
+  wouldCreateCircularDependency,
+  dependencyExists,
+  getAncestors,
+  formatAncestorContextForPrompt,
+  type DependencyResolutionResult,
+  type DependencySatisfactionOptions,
+  type AncestorContext,
+} from './resolver.js';
diff --git a/temp_repo/libs/dependency-resolver/src/resolver.ts b/temp_repo/libs/dependency-resolver/src/resolver.ts
new file mode 100644
index 0000000000000000000000000000000000000000..02c87c26585edc0e9fe764a4848150c74a92f97c
--- /dev/null
+++ b/temp_repo/libs/dependency-resolver/src/resolver.ts
@@ -0,0 +1,458 @@
+/**
+ * Dependency Resolution Utility
+ *
+ * Provides topological sorting and dependency analysis for features.
+ * Uses a modified Kahn's algorithm that respects both dependencies and priorities.
+ */
+
+import type { Feature } from '@automaker/types';
+
+export interface DependencyResolutionResult {
+  orderedFeatures: Feature[]; // Features in dependency-aware order
+  circularDependencies: string[][]; // Groups of IDs forming cycles
+  missingDependencies: Map<string, string[]>; // featureId -> missing dep IDs
+  blockedFeatures: Map<string, string[]>; // featureId -> blocking dep IDs (incomplete dependencies)
+}
+
+/**
+ * Resolves feature dependencies using topological sort with priority-aware ordering.
+ *
+ * Algorithm:
+ * 1. Build dependency graph and detect missing/blocked dependencies
+ * 2. Apply Kahn's algorithm for topological sort
+ * 3. Within same dependency level, sort by priority (1=high, 2=medium, 3=low)
+ * 4. Detect circular dependencies for features that can't be ordered
+ *
+ * @param features - Array of features to order
+ * @returns Resolution result with ordered features and dependency metadata
+ */
+export function resolveDependencies(features: Feature[]): DependencyResolutionResult {
+  const featureMap = new Map<string, Feature>(features.map((f) => [f.id, f]));
+  const inDegree = new Map<string, number>();
+  const adjacencyList = new Map<string, string[]>(); // dependencyId -> [dependentIds]
+  const missingDependencies = new Map<string, string[]>();
+  const blockedFeatures = new Map<string, string[]>();
+
+  // Initialize graph structures
+  for (const feature of features) {
+    inDegree.set(feature.id, 0);
+    adjacencyList.set(feature.id, []);
+  }
+
+  // Build dependency graph and detect missing/blocked dependencies
+  for (const feature of features) {
+    const deps = feature.dependencies || [];
+    for (const depId of deps) {
+      if (!featureMap.has(depId)) {
+        // Missing dependency - track it
+        if (!missingDependencies.has(feature.id)) {
+          missingDependencies.set(feature.id, []);
+        }
+        missingDependencies.get(feature.id)!.push(depId);
+      } else {
+        // Valid dependency - add edge to graph
+        adjacencyList.get(depId)!.push(feature.id);
+        inDegree.set(feature.id, (inDegree.get(feature.id) || 0) + 1);
+
+        // Check if dependency is incomplete (blocking)
+        const depFeature = featureMap.get(depId)!;
+        if (depFeature.status !== 'completed' && depFeature.status !== 'verified') {
+          if (!blockedFeatures.has(feature.id)) {
+            blockedFeatures.set(feature.id, []);
+          }
+          blockedFeatures.get(feature.id)!.push(depId);
+        }
+      }
+    }
+  }
+
+  // Kahn's algorithm with priority-aware selection
+  const queue: Feature[] = [];
+  const orderedFeatures: Feature[] = [];
+
+  // Helper to sort features by priority (lower number = higher priority)
+  const sortByPriority = (a: Feature, b: Feature) => (a.priority ?? 2) - (b.priority ?? 2);
+
+  // Start with features that have no dependencies (in-degree 0)
+  for (const [id, degree] of inDegree) {
+    if (degree === 0) {
+      queue.push(featureMap.get(id)!);
+    }
+  }
+
+  // Sort initial queue by priority
+  queue.sort(sortByPriority);
+
+  // Process features in topological order
+  while (queue.length > 0) {
+    // Take highest priority feature from queue
+    const current = queue.shift()!;
+    orderedFeatures.push(current);
+
+    // Process features that depend on this one
+    for (const dependentId of adjacencyList.get(current.id) || []) {
+      const currentDegree = inDegree.get(dependentId);
+      if (currentDegree === undefined) {
+        throw new Error(`In-degree not initialized for feature ${dependentId}`);
+      }
+      const newDegree = currentDegree - 1;
+      inDegree.set(dependentId, newDegree);
+
+      if (newDegree === 0) {
+        queue.push(featureMap.get(dependentId)!);
+        // Re-sort queue to maintain priority order
+        queue.sort(sortByPriority);
+      }
+    }
+  }
+
+  // Detect circular dependencies (features not in output = part of cycle)
+  const circularDependencies: string[][] = [];
+  const processedIds = new Set(orderedFeatures.map((f) => f.id));
+
+  if (orderedFeatures.length < features.length) {
+    // Find cycles using DFS
+    const remaining = features.filter((f) => !processedIds.has(f.id));
+    const cycles = detectCycles(remaining, featureMap);
+    circularDependencies.push(...cycles);
+
+    // Add remaining features at end (part of cycles)
+    orderedFeatures.push(...remaining);
+  }
+
+  return {
+    orderedFeatures,
+    circularDependencies,
+    missingDependencies,
+    blockedFeatures,
+  };
+}
+
+/**
+ * Detects circular dependencies using depth-first search
+ *
+ * @param features - Features that couldn't be topologically sorted (potential cycles)
+ * @param featureMap - Map of all features by ID
+ * @returns Array of cycles, where each cycle is an array of feature IDs
+ */
+function detectCycles(features: Feature[], featureMap: Map<string, Feature>): string[][] {
+  const cycles: string[][] = [];
+  const visited = new Set<string>();
+  const recursionStack = new Set<string>();
+  const currentPath: string[] = [];
+
+  function dfs(featureId: string): boolean {
+    visited.add(featureId);
+    recursionStack.add(featureId);
+    currentPath.push(featureId);
+
+    const feature = featureMap.get(featureId);
+    if (feature) {
+      for (const depId of feature.dependencies || []) {
+        if (!visited.has(depId)) {
+          if (dfs(depId)) return true;
+        } else if (recursionStack.has(depId)) {
+          // Found cycle - extract it
+          const cycleStart = currentPath.indexOf(depId);
+          cycles.push(currentPath.slice(cycleStart));
+          return true;
+        }
+      }
+    }
+
+    currentPath.pop();
+    recursionStack.delete(featureId);
+    return false;
+  }
+
+  for (const feature of features) {
+    if (!visited.has(feature.id)) {
+      dfs(feature.id);
+    }
+  }
+
+  return cycles;
+}
+
+export interface DependencySatisfactionOptions {
+  /** If true, only require dependencies to not be 'running' (ignore verification requirement) */
+  skipVerification?: boolean;
+}
+
+/**
+ * Checks if a feature's dependencies are satisfied (all complete or verified)
+ *
+ * @param feature - Feature to check
+ * @param allFeatures - All features in the project
+ * @param options - Optional configuration for dependency checking
+ * @returns true if all dependencies are satisfied, false otherwise
+ */
+export function areDependenciesSatisfied(
+  feature: Feature,
+  allFeatures: Feature[],
+  options?: DependencySatisfactionOptions
+): boolean {
+  if (!feature.dependencies || feature.dependencies.length === 0) {
+    return true; // No dependencies = always ready
+  }
+
+  const skipVerification = options?.skipVerification ?? false;
+
+  return feature.dependencies.every((depId: string) => {
+    const dep = allFeatures.find((f) => f.id === depId);
+    if (!dep) return false;
+
+    if (skipVerification) {
+      // When skipping verification, only block if dependency is currently running
+      return dep.status !== 'running';
+    }
+    // Default: require 'completed' or 'verified'
+    return dep.status === 'completed' || dep.status === 'verified';
+  });
+}
+
+/**
+ * Gets the blocking dependencies for a feature (dependencies that are incomplete)
+ *
+ * @param feature - Feature to check
+ * @param allFeatures - All features in the project
+ * @returns Array of feature IDs that are blocking this feature
+ */
+export function getBlockingDependencies(feature: Feature, allFeatures: Feature[]): string[] {
+  if (!feature.dependencies || feature.dependencies.length === 0) {
+    return [];
+  }
+
+  return feature.dependencies.filter((depId: string) => {
+    const dep = allFeatures.find((f) => f.id === depId);
+    return dep && dep.status !== 'completed' && dep.status !== 'verified';
+  });
+}
+
+/**
+ * Builds a lookup map for features by id.
+ *
+ * @param features - Features to index
+ * @returns Map keyed by feature id
+ */
+export function createFeatureMap(features: Feature[]): Map<string, Feature> {
+  const featureMap = new Map<string, Feature>();
+  for (const feature of features) {
+    if (feature?.id) {
+      featureMap.set(feature.id, feature);
+    }
+  }
+  return featureMap;
+}
+
+/**
+ * Gets the blocking dependencies using a precomputed feature map.
+ *
+ * @param feature - Feature to check
+ * @param featureMap - Map of all features by id
+ * @returns Array of feature IDs that are blocking this feature
+ */
+export function getBlockingDependenciesFromMap(
+  feature: Feature,
+  featureMap: Map<string, Feature>
+): string[] {
+  const dependencies = feature.dependencies;
+  if (!dependencies || dependencies.length === 0) {
+    return [];
+  }
+
+  const blockingDependencies: string[] = [];
+  for (const depId of dependencies) {
+    const dep = featureMap.get(depId);
+    if (dep && dep.status !== 'completed' && dep.status !== 'verified') {
+      blockingDependencies.push(depId);
+    }
+  }
+
+  return blockingDependencies;
+}
+
+/**
+ * Checks if adding a dependency from sourceId to targetId would create a circular dependency.
+ * When we say "targetId depends on sourceId", we add sourceId to targetId.dependencies.
+ * A cycle would occur if sourceId already depends on targetId (directly or transitively).
+ *
+ * @param features - All features in the system
+ * @param sourceId - The feature that would become a dependency (the prerequisite)
+ * @param targetId - The feature that would depend on sourceId
+ * @returns true if adding this dependency would create a cycle
+ */
+export function wouldCreateCircularDependency(
+  features: Feature[],
+  sourceId: string,
+  targetId: string
+): boolean {
+  const featureMap = new Map(features.map((f) => [f.id, f]));
+  const visited = new Set<string>();
+
+  // Check if 'from' can reach 'to' by following dependencies
+  function canReach(fromId: string, toId: string): boolean {
+    if (fromId === toId) return true;
+    if (visited.has(fromId)) return false;
+
+    visited.add(fromId);
+    const feature = featureMap.get(fromId);
+    if (!feature?.dependencies) return false;
+
+    for (const depId of feature.dependencies) {
+      if (canReach(depId, toId)) return true;
+    }
+    return false;
+  }
+
+  // We want to add: targetId depends on sourceId (sourceId -> targetId in dependency graph)
+  // This would create a cycle if sourceId already depends on targetId (transitively)
+  // i.e., if we can reach targetId starting from sourceId by following dependencies
+  return canReach(sourceId, targetId);
+}
+
+/**
+ * Checks if a dependency already exists between two features.
+ *
+ * @param features - All features in the system
+ * @param sourceId - The potential dependency (prerequisite)
+ * @param targetId - The feature that might depend on sourceId
+ * @returns true if targetId already depends on sourceId
+ */
+export function dependencyExists(features: Feature[], sourceId: string, targetId: string): boolean {
+  const targetFeature = features.find((f) => f.id === targetId);
+  if (!targetFeature?.dependencies) return false;
+  return targetFeature.dependencies.includes(sourceId);
+}
+
+/**
+ * Context information about an ancestor feature in the dependency graph.
+ */
+export interface AncestorContext {
+  id: string;
+  title?: string;
+  description: string;
+  spec?: string;
+  summary?: string;
+  depth: number; // 0 = immediate parent, 1 = grandparent, etc.
+}
+
+/**
+ * Traverses the dependency graph to find all ancestors of a feature.
+ * Returns ancestors ordered by depth (closest first).
+ *
+ * @param feature - The feature to find ancestors for
+ * @param allFeatures - All features in the system
+ * @param maxDepth - Maximum depth to traverse (prevents infinite loops)
+ * @returns Array of ancestor contexts, sorted by depth (closest first)
+ */
+export function getAncestors(
+  feature: Feature,
+  allFeatures: Feature[],
+  maxDepth: number = 10
+): AncestorContext[] {
+  const featureMap = new Map(allFeatures.map((f) => [f.id, f]));
+  const ancestors: AncestorContext[] = [];
+  const visited = new Set<string>();
+
+  function traverse(featureId: string, depth: number) {
+    if (depth > maxDepth || visited.has(featureId)) return;
+    visited.add(featureId);
+
+    const f = featureMap.get(featureId);
+    if (!f?.dependencies) return;
+
+    for (const depId of f.dependencies) {
+      const dep = featureMap.get(depId);
+      if (dep && !visited.has(depId)) {
+        ancestors.push({
+          id: dep.id,
+          title: dep.title,
+          description: dep.description,
+          spec: dep.spec,
+          summary: dep.summary,
+          depth,
+        });
+        traverse(depId, depth + 1);
+      }
+    }
+  }
+
+  traverse(feature.id, 0);
+
+  // Sort by depth (closest ancestors first)
+  return ancestors.sort((a, b) => a.depth - b.depth);
+}
+
+/**
+ * Formats ancestor context for inclusion in a task description.
+ * The parent task (depth=-1) is formatted with special emphasis indicating
+ * it was already completed and is provided for context only.
+ *
+ * @param ancestors - Array of ancestor contexts (including parent with depth=-1)
+ * @param selectedIds - Set of selected ancestor IDs to include
+ * @returns Formatted markdown string with ancestor context
+ */
+export function formatAncestorContextForPrompt(
+  ancestors: AncestorContext[],
+  selectedIds: Set<string>
+): string {
+  const selectedAncestors = ancestors.filter((a) => selectedIds.has(a.id));
+  if (selectedAncestors.length === 0) return '';
+
+  // Separate parent (depth=-1) from other ancestors
+  const parent = selectedAncestors.find((a) => a.depth === -1);
+  const otherAncestors = selectedAncestors.filter((a) => a.depth !== -1);
+
+  const sections: string[] = [];
+
+  // Format parent with special emphasis
+  if (parent) {
+    const parentTitle = parent.title || `Task (${parent.id.slice(0, 8)})`;
+    const parentParts: string[] = [];
+
+    parentParts.push(`## Parent Task Context (Already Completed)`);
+    parentParts.push(
+      `> **Note:** The following parent task has already been completed. This context is provided to help you understand the background and requirements for this sub-task. Do not re-implement the parent task - focus only on the new sub-task described below.`
+    );
+    parentParts.push(`### ${parentTitle}`);
+
+    if (parent.description) {
+      parentParts.push(`**Description:** ${parent.description}`);
+    }
+    if (parent.spec) {
+      parentParts.push(`**Specification:**\n${parent.spec}`);
+    }
+    if (parent.summary) {
+      parentParts.push(`**Summary:** ${parent.summary}`);
+    }
+
+    sections.push(parentParts.join('\n\n'));
+  }
+
+  // Format other ancestors if any
+  if (otherAncestors.length > 0) {
+    const ancestorSections = otherAncestors.map((ancestor) => {
+      const parts: string[] = [];
+      const title = ancestor.title || `Task (${ancestor.id.slice(0, 8)})`;
+
+      parts.push(`### ${title}`);
+
+      if (ancestor.description) {
+        parts.push(`**Description:** ${ancestor.description}`);
+      }
+      if (ancestor.spec) {
+        parts.push(`**Specification:**\n${ancestor.spec}`);
+      }
+      if (ancestor.summary) {
+        parts.push(`**Summary:** ${ancestor.summary}`);
+      }
+
+      return parts.join('\n\n');
+    });
+
+    sections.push(`## Additional Ancestor Context\n\n${ancestorSections.join('\n\n---\n\n')}`);
+  }
+
+  return sections.join('\n\n---\n\n');
+}
diff --git a/temp_repo/libs/dependency-resolver/tests/resolver.test.ts b/temp_repo/libs/dependency-resolver/tests/resolver.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7f6726f8d2488c05e95e6e93be46c0aeb06199b6
--- /dev/null
+++ b/temp_repo/libs/dependency-resolver/tests/resolver.test.ts
@@ -0,0 +1,570 @@
+import { describe, it, expect } from 'vitest';
+import {
+  resolveDependencies,
+  areDependenciesSatisfied,
+  getBlockingDependencies,
+  createFeatureMap,
+  getBlockingDependenciesFromMap,
+  wouldCreateCircularDependency,
+  dependencyExists,
+} from '../src/resolver';
+import type { Feature } from '@automaker/types';
+
+// Helper to create test features
+function createFeature(
+  id: string,
+  options: {
+    dependencies?: string[];
+    status?: string;
+    priority?: number;
+  } = {}
+): Feature {
+  return {
+    id,
+    category: 'test',
+    description: `Feature ${id}`,
+    dependencies: options.dependencies,
+    status: options.status || 'pending',
+    priority: options.priority,
+  };
+}
+
+describe('resolver.ts', () => {
+  describe('resolveDependencies', () => {
+    it('should handle features with no dependencies', () => {
+      const features = [createFeature('A'), createFeature('B'), createFeature('C')];
+
+      const result = resolveDependencies(features);
+
+      expect(result.orderedFeatures).toHaveLength(3);
+      expect(result.circularDependencies).toEqual([]);
+      expect(result.missingDependencies.size).toBe(0);
+      expect(result.blockedFeatures.size).toBe(0);
+    });
+
+    it('should order features with linear dependencies', () => {
+      const features = [
+        createFeature('C', { dependencies: ['B'] }),
+        createFeature('A'),
+        createFeature('B', { dependencies: ['A'] }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      const ids = result.orderedFeatures.map((f) => f.id);
+      expect(ids.indexOf('A')).toBeLessThan(ids.indexOf('B'));
+      expect(ids.indexOf('B')).toBeLessThan(ids.indexOf('C'));
+      expect(result.circularDependencies).toEqual([]);
+    });
+
+    it('should respect priority within same dependency level', () => {
+      const features = [
+        createFeature('Low', { priority: 3 }),
+        createFeature('High', { priority: 1 }),
+        createFeature('Medium', { priority: 2 }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      const ids = result.orderedFeatures.map((f) => f.id);
+      expect(ids).toEqual(['High', 'Medium', 'Low']);
+    });
+
+    it('should use default priority 2 when not specified', () => {
+      const features = [
+        createFeature('NoPriority'),
+        createFeature('HighPriority', { priority: 1 }),
+        createFeature('LowPriority', { priority: 3 }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      const ids = result.orderedFeatures.map((f) => f.id);
+      expect(ids.indexOf('HighPriority')).toBeLessThan(ids.indexOf('NoPriority'));
+      expect(ids.indexOf('NoPriority')).toBeLessThan(ids.indexOf('LowPriority'));
+    });
+
+    it('should respect dependencies over priority', () => {
+      const features = [
+        createFeature('B', { dependencies: ['A'], priority: 1 }), // High priority but depends on A
+        createFeature('A', { priority: 3 }), // Low priority but no dependencies
+      ];
+
+      const result = resolveDependencies(features);
+
+      const ids = result.orderedFeatures.map((f) => f.id);
+      expect(ids.indexOf('A')).toBeLessThan(ids.indexOf('B'));
+    });
+
+    it('should detect circular dependencies (simple cycle)', () => {
+      const features = [
+        createFeature('A', { dependencies: ['B'] }),
+        createFeature('B', { dependencies: ['A'] }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.circularDependencies).toHaveLength(1);
+      expect(result.circularDependencies[0]).toContain('A');
+      expect(result.circularDependencies[0]).toContain('B');
+      expect(result.orderedFeatures).toHaveLength(2); // All features still included
+    });
+
+    it('should detect circular dependencies (3-way cycle)', () => {
+      const features = [
+        createFeature('A', { dependencies: ['C'] }),
+        createFeature('B', { dependencies: ['A'] }),
+        createFeature('C', { dependencies: ['B'] }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.circularDependencies.length).toBeGreaterThan(0);
+      const allCycleIds = result.circularDependencies.flat();
+      expect(allCycleIds).toContain('A');
+      expect(allCycleIds).toContain('B');
+      expect(allCycleIds).toContain('C');
+    });
+
+    it('should detect missing dependencies', () => {
+      const features = [createFeature('A', { dependencies: ['NonExistent'] }), createFeature('B')];
+
+      const result = resolveDependencies(features);
+
+      expect(result.missingDependencies.has('A')).toBe(true);
+      expect(result.missingDependencies.get('A')).toContain('NonExistent');
+    });
+
+    it('should detect blocked features (incomplete dependencies)', () => {
+      const features = [
+        createFeature('A', { status: 'pending' }),
+        createFeature('B', { dependencies: ['A'], status: 'pending' }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.blockedFeatures.has('B')).toBe(true);
+      expect(result.blockedFeatures.get('B')).toContain('A');
+    });
+
+    it('should not mark features as blocked if dependencies are completed', () => {
+      const features = [
+        createFeature('A', { status: 'completed' }),
+        createFeature('B', { dependencies: ['A'], status: 'pending' }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.blockedFeatures.has('B')).toBe(false);
+    });
+
+    it('should not mark features as blocked if dependencies are verified', () => {
+      const features = [
+        createFeature('A', { status: 'verified' }),
+        createFeature('B', { dependencies: ['A'], status: 'pending' }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.blockedFeatures.has('B')).toBe(false);
+    });
+
+    it('should handle complex dependency graph', () => {
+      const features = [
+        createFeature('E', { dependencies: ['C', 'D'] }),
+        createFeature('D', { dependencies: ['B'] }),
+        createFeature('C', { dependencies: ['A', 'B'] }),
+        createFeature('B'),
+        createFeature('A'),
+      ];
+
+      const result = resolveDependencies(features);
+
+      const ids = result.orderedFeatures.map((f) => f.id);
+
+      // A and B have no dependencies - can be first or second
+      expect(ids.indexOf('A')).toBeLessThan(ids.indexOf('C'));
+      expect(ids.indexOf('B')).toBeLessThan(ids.indexOf('C'));
+      expect(ids.indexOf('B')).toBeLessThan(ids.indexOf('D'));
+
+      // C depends on A and B
+      expect(ids.indexOf('C')).toBeLessThan(ids.indexOf('E'));
+
+      // D depends on B
+      expect(ids.indexOf('D')).toBeLessThan(ids.indexOf('E'));
+
+      expect(result.circularDependencies).toEqual([]);
+    });
+
+    it('should handle multiple missing dependencies', () => {
+      const features = [createFeature('A', { dependencies: ['X', 'Y', 'Z'] })];
+
+      const result = resolveDependencies(features);
+
+      expect(result.missingDependencies.get('A')).toEqual(['X', 'Y', 'Z']);
+    });
+
+    it('should handle empty feature list', () => {
+      const result = resolveDependencies([]);
+
+      expect(result.orderedFeatures).toEqual([]);
+      expect(result.circularDependencies).toEqual([]);
+      expect(result.missingDependencies.size).toBe(0);
+      expect(result.blockedFeatures.size).toBe(0);
+    });
+
+    it('should handle features with both missing and existing dependencies', () => {
+      const features = [
+        createFeature('A'),
+        createFeature('B', { dependencies: ['A', 'NonExistent'] }),
+      ];
+
+      const result = resolveDependencies(features);
+
+      expect(result.missingDependencies.get('B')).toContain('NonExistent');
+      const ids = result.orderedFeatures.map((f) => f.id);
+      expect(ids.indexOf('A')).toBeLessThan(ids.indexOf('B'));
+    });
+  });
+
+  describe('areDependenciesSatisfied', () => {
+    it('should return true for feature with no dependencies', () => {
+      const feature = createFeature('A');
+      const allFeatures = [feature];
+
+      expect(areDependenciesSatisfied(feature, allFeatures)).toBe(true);
+    });
+
+    it('should return true for feature with empty dependencies array', () => {
+      const feature = createFeature('A', { dependencies: [] });
+      const allFeatures = [feature];
+
+      expect(areDependenciesSatisfied(feature, allFeatures)).toBe(true);
+    });
+
+    it('should return true when all dependencies are completed', () => {
+      const dep = createFeature('Dep', { status: 'completed' });
+      const feature = createFeature('A', { dependencies: ['Dep'] });
+      const allFeatures = [dep, feature];
+
+      expect(areDependenciesSatisfied(feature, allFeatures)).toBe(true);
+    });
+
+    it('should return true when all dependencies are verified', () => {
+      const dep = createFeature('Dep', { status: 'verified' });
+      const feature = createFeature('A', { dependencies: ['Dep'] });
+      const allFeatures = [dep, feature];
+
+      expect(areDependenciesSatisfied(feature, allFeatures)).toBe(true);
+    });
+
+    it('should return false when any dependency is pending', () => {
+      const dep = createFeature('Dep', { status: 'pending' });
+      const feature = createFeature('A', { dependencies: ['Dep'] });
+      const allFeatures = [dep, feature];
+
+      expect(areDependenciesSatisfied(feature, allFeatures)).toBe(false);
+    });
+
+    it('should return false when any dependency is running', () => {
+      const dep = createFeature('Dep', { status: 'running' });
+      const feature = createFeature('A', { dependencies: ['Dep'] });
+      const allFeatures = [dep, feature];
+
+      expect(areDependenciesSatisfied(feature, allFeatures)).toBe(false);
+    });
+
+    it('should return false when dependency is missing', () => {
+      const feature = createFeature('A', { dependencies: ['NonExistent'] });
+      const allFeatures = [feature];
+
+      expect(areDependenciesSatisfied(feature, allFeatures)).toBe(false);
+    });
+
+    it('should check all dependencies', () => {
+      const dep1 = createFeature('Dep1', { status: 'completed' });
+      const dep2 = createFeature('Dep2', { status: 'pending' });
+      const feature = createFeature('A', { dependencies: ['Dep1', 'Dep2'] });
+      const allFeatures = [dep1, dep2, feature];
+
+      expect(areDependenciesSatisfied(feature, allFeatures)).toBe(false);
+    });
+  });
+
+  describe('getBlockingDependencies', () => {
+    it('should return empty array for feature with no dependencies', () => {
+      const feature = createFeature('A');
+      const allFeatures = [feature];
+
+      expect(getBlockingDependencies(feature, allFeatures)).toEqual([]);
+    });
+
+    it('should return empty array when all dependencies are completed', () => {
+      const dep = createFeature('Dep', { status: 'completed' });
+      const feature = createFeature('A', { dependencies: ['Dep'] });
+      const allFeatures = [dep, feature];
+
+      expect(getBlockingDependencies(feature, allFeatures)).toEqual([]);
+    });
+
+    it('should return empty array when all dependencies are verified', () => {
+      const dep = createFeature('Dep', { status: 'verified' });
+      const feature = createFeature('A', { dependencies: ['Dep'] });
+      const allFeatures = [dep, feature];
+
+      expect(getBlockingDependencies(feature, allFeatures)).toEqual([]);
+    });
+
+    it('should return pending dependencies', () => {
+      const dep = createFeature('Dep', { status: 'pending' });
+      const feature = createFeature('A', { dependencies: ['Dep'] });
+      const allFeatures = [dep, feature];
+
+      expect(getBlockingDependencies(feature, allFeatures)).toEqual(['Dep']);
+    });
+
+    it('should return running dependencies', () => {
+      const dep = createFeature('Dep', { status: 'running' });
+      const feature = createFeature('A', { dependencies: ['Dep'] });
+      const allFeatures = [dep, feature];
+
+      expect(getBlockingDependencies(feature, allFeatures)).toEqual(['Dep']);
+    });
+
+    it('should return failed dependencies', () => {
+      const dep = createFeature('Dep', { status: 'failed' });
+      const feature = createFeature('A', { dependencies: ['Dep'] });
+      const allFeatures = [dep, feature];
+
+      expect(getBlockingDependencies(feature, allFeatures)).toEqual(['Dep']);
+    });
+
+    it('should return all incomplete dependencies', () => {
+      const dep1 = createFeature('Dep1', { status: 'pending' });
+      const dep2 = createFeature('Dep2', { status: 'completed' });
+      const dep3 = createFeature('Dep3', { status: 'running' });
+      const feature = createFeature('A', { dependencies: ['Dep1', 'Dep2', 'Dep3'] });
+      const allFeatures = [dep1, dep2, dep3, feature];
+
+      const blocking = getBlockingDependencies(feature, allFeatures);
+      expect(blocking).toContain('Dep1');
+      expect(blocking).toContain('Dep3');
+      expect(blocking).not.toContain('Dep2');
+    });
+  });
+
+  describe('getBlockingDependenciesFromMap', () => {
+    it('should match getBlockingDependencies when using a feature map', () => {
+      const dep1 = createFeature('Dep1', { status: 'pending' });
+      const dep2 = createFeature('Dep2', { status: 'completed' });
+      const dep3 = createFeature('Dep3', { status: 'running' });
+      const feature = createFeature('A', { dependencies: ['Dep1', 'Dep2', 'Dep3'] });
+      const allFeatures = [dep1, dep2, dep3, feature];
+      const featureMap = createFeatureMap(allFeatures);
+
+      expect(getBlockingDependenciesFromMap(feature, featureMap)).toEqual(
+        getBlockingDependencies(feature, allFeatures)
+      );
+    });
+  });
+
+  describe('wouldCreateCircularDependency', () => {
+    it('should return false for features with no existing dependencies', () => {
+      const features = [createFeature('A'), createFeature('B')];
+
+      // Making B depend on A should not create a cycle
+      expect(wouldCreateCircularDependency(features, 'A', 'B')).toBe(false);
+    });
+
+    it('should return false for valid linear dependency chain', () => {
+      // A <- B <- C (C depends on B, B depends on A)
+      const features = [
+        createFeature('A'),
+        createFeature('B', { dependencies: ['A'] }),
+        createFeature('C', { dependencies: ['B'] }),
+      ];
+
+      // Making D depend on C should not create a cycle
+      const featuresWithD = [...features, createFeature('D')];
+      expect(wouldCreateCircularDependency(featuresWithD, 'C', 'D')).toBe(false);
+    });
+
+    it('should detect direct circular dependency (A -> B -> A)', () => {
+      // B depends on A
+      const features = [createFeature('A'), createFeature('B', { dependencies: ['A'] })];
+
+      // Making A depend on B would create: A -> B -> A (cycle!)
+      // sourceId = B (prerequisite), targetId = A (will depend on B)
+      // This creates a cycle because B already depends on A
+      expect(wouldCreateCircularDependency(features, 'B', 'A')).toBe(true);
+    });
+
+    it('should detect transitive circular dependency (A -> B -> C -> A)', () => {
+      // C depends on B, B depends on A
+      const features = [
+        createFeature('A'),
+        createFeature('B', { dependencies: ['A'] }),
+        createFeature('C', { dependencies: ['B'] }),
+      ];
+
+      // Making A depend on C would create: A -> C -> B -> A (cycle!)
+      // sourceId = C (prerequisite), targetId = A (will depend on C)
+      expect(wouldCreateCircularDependency(features, 'C', 'A')).toBe(true);
+    });
+
+    it('should detect cycle in complex graph', () => {
+      // Graph: A <- B, A <- C, B <- C (C depends on both A and B, B depends on A)
+      const features = [
+        createFeature('A'),
+        createFeature('B', { dependencies: ['A'] }),
+        createFeature('C', { dependencies: ['A', 'B'] }),
+      ];
+
+      // Making A depend on C would create a cycle
+      expect(wouldCreateCircularDependency(features, 'C', 'A')).toBe(true);
+
+      // Making B depend on C would also create a cycle
+      expect(wouldCreateCircularDependency(features, 'C', 'B')).toBe(true);
+    });
+
+    it('should return false for parallel branches', () => {
+      // A <- B, A <- C (B and C both depend on A, but not on each other)
+      const features = [
+        createFeature('A'),
+        createFeature('B', { dependencies: ['A'] }),
+        createFeature('C', { dependencies: ['A'] }),
+      ];
+
+      // Making B depend on C should be fine (no cycle)
+      expect(wouldCreateCircularDependency(features, 'C', 'B')).toBe(false);
+
+      // Making C depend on B should also be fine
+      expect(wouldCreateCircularDependency(features, 'B', 'C')).toBe(false);
+    });
+
+    it('should handle self-dependency check', () => {
+      const features = [createFeature('A')];
+
+      // A depending on itself would be a trivial cycle
+      expect(wouldCreateCircularDependency(features, 'A', 'A')).toBe(true);
+    });
+
+    it('should handle feature not in list', () => {
+      const features = [createFeature('A')];
+
+      // Non-existent source - should return false (no path exists)
+      expect(wouldCreateCircularDependency(features, 'NonExistent', 'A')).toBe(false);
+
+      // Non-existent target - should return false
+      expect(wouldCreateCircularDependency(features, 'A', 'NonExistent')).toBe(false);
+    });
+
+    it('should handle empty features list', () => {
+      const features: Feature[] = [];
+
+      expect(wouldCreateCircularDependency(features, 'A', 'B')).toBe(false);
+    });
+
+    it('should handle longer transitive chains', () => {
+      // A <- B <- C <- D <- E
+      const features = [
+        createFeature('A'),
+        createFeature('B', { dependencies: ['A'] }),
+        createFeature('C', { dependencies: ['B'] }),
+        createFeature('D', { dependencies: ['C'] }),
+        createFeature('E', { dependencies: ['D'] }),
+      ];
+
+      // Making A depend on E would create a 5-node cycle
+      expect(wouldCreateCircularDependency(features, 'E', 'A')).toBe(true);
+
+      // Making B depend on E would create a 4-node cycle
+      expect(wouldCreateCircularDependency(features, 'E', 'B')).toBe(true);
+
+      // Making E depend on A is fine (already exists transitively, but adding explicit is ok)
+      // Wait, E already depends on A transitively. Let's add F instead
+      const featuresWithF = [...features, createFeature('F')];
+      expect(wouldCreateCircularDependency(featuresWithF, 'E', 'F')).toBe(false);
+    });
+
+    it('should handle diamond dependency pattern', () => {
+      //     A
+      //    / \
+      //   B   C
+      //    \ /
+      //     D
+      const features = [
+        createFeature('A'),
+        createFeature('B', { dependencies: ['A'] }),
+        createFeature('C', { dependencies: ['A'] }),
+        createFeature('D', { dependencies: ['B', 'C'] }),
+      ];
+
+      // Making A depend on D would create a cycle through both paths
+      expect(wouldCreateCircularDependency(features, 'D', 'A')).toBe(true);
+
+      // Making B depend on D would create a cycle
+      expect(wouldCreateCircularDependency(features, 'D', 'B')).toBe(true);
+
+      // Adding E that depends on D should be fine
+      const featuresWithE = [...features, createFeature('E')];
+      expect(wouldCreateCircularDependency(featuresWithE, 'D', 'E')).toBe(false);
+    });
+  });
+
+  describe('dependencyExists', () => {
+    it('should return false when target has no dependencies', () => {
+      const features = [createFeature('A'), createFeature('B')];
+
+      expect(dependencyExists(features, 'A', 'B')).toBe(false);
+    });
+
+    it('should return true when direct dependency exists', () => {
+      const features = [createFeature('A'), createFeature('B', { dependencies: ['A'] })];
+
+      expect(dependencyExists(features, 'A', 'B')).toBe(true);
+    });
+
+    it('should return false for reverse direction', () => {
+      const features = [createFeature('A'), createFeature('B', { dependencies: ['A'] })];
+
+      // B depends on A, but A does not depend on B
+      expect(dependencyExists(features, 'B', 'A')).toBe(false);
+    });
+
+    it('should return false for transitive dependencies', () => {
+      // This function only checks direct dependencies, not transitive
+      const features = [
+        createFeature('A'),
+        createFeature('B', { dependencies: ['A'] }),
+        createFeature('C', { dependencies: ['B'] }),
+      ];
+
+      // C depends on B which depends on A, but C doesn't directly depend on A
+      expect(dependencyExists(features, 'A', 'C')).toBe(false);
+    });
+
+    it('should return true for one of multiple dependencies', () => {
+      const features = [
+        createFeature('A'),
+        createFeature('B'),
+        createFeature('C', { dependencies: ['A', 'B'] }),
+      ];
+
+      expect(dependencyExists(features, 'A', 'C')).toBe(true);
+      expect(dependencyExists(features, 'B', 'C')).toBe(true);
+    });
+
+    it('should return false when target feature does not exist', () => {
+      const features = [createFeature('A')];
+
+      expect(dependencyExists(features, 'A', 'NonExistent')).toBe(false);
+    });
+
+    it('should return false for empty dependencies array', () => {
+      const features = [createFeature('A'), createFeature('B', { dependencies: [] })];
+
+      expect(dependencyExists(features, 'A', 'B')).toBe(false);
+    });
+  });
+});
diff --git a/temp_repo/libs/dependency-resolver/tsconfig.json b/temp_repo/libs/dependency-resolver/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..f677f8d5ebc071b18ab8302e1ef128243ebc2b3c
--- /dev/null
+++ b/temp_repo/libs/dependency-resolver/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/temp_repo/libs/dependency-resolver/vitest.config.ts b/temp_repo/libs/dependency-resolver/vitest.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5ea8d7ee6e4abeea41b42355e928fba50028e368
--- /dev/null
+++ b/temp_repo/libs/dependency-resolver/vitest.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    name: 'dependency-resolver',
+    globals: true,
+    environment: 'node',
+    include: ['tests/**/*.test.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      include: ['src/**/*.ts'],
+      exclude: ['src/**/*.d.ts', 'src/index.ts'],
+      thresholds: {
+        lines: 90,
+        functions: 100,
+        branches: 85,
+        statements: 90,
+      },
+    },
+  },
+});
diff --git a/temp_repo/libs/git-utils/README.md b/temp_repo/libs/git-utils/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..b82000840261f6c698a1b8d0988658f698a4809d
--- /dev/null
+++ b/temp_repo/libs/git-utils/README.md
@@ -0,0 +1,276 @@
+# @automaker/git-utils
+
+Git operations and utilities for AutoMaker.
+
+## Overview
+
+This package provides git-related utilities including repository detection, status parsing, and diff generation for both tracked and untracked files.
+
+## Installation
+
+```bash
+npm install @automaker/git-utils
+```
+
+## Exports
+
+### Repository Detection
+
+Check if a path is a git repository.
+
+```typescript
+import { isGitRepo } from '@automaker/git-utils';
+
+const isRepo = await isGitRepo('/project/path');
+if (isRepo) {
+  console.log('This is a git repository');
+}
+```
+
+### Status Parsing
+
+Parse git status output into structured data.
+
+```typescript
+import { parseGitStatus } from '@automaker/git-utils';
+import type { FileStatus } from '@automaker/git-utils';
+
+const statusOutput = await execAsync('git status --porcelain');
+const files: FileStatus[] = parseGitStatus(statusOutput.stdout);
+
+files.forEach((file) => {
+  console.log(`${file.statusText}: ${file.path}`);
+  // Example: "Modified: src/index.ts"
+  // Example: "Untracked: new-file.ts"
+});
+```
+
+### Diff Generation
+
+Generate diffs including untracked files.
+
+```typescript
+import {
+  generateSyntheticDiffForNewFile,
+  appendUntrackedFileDiffs,
+  getGitRepositoryDiffs,
+} from '@automaker/git-utils';
+
+// Generate diff for single untracked file
+const diff = await generateSyntheticDiffForNewFile('/project/path', 'src/new-file.ts');
+
+// Get complete repository diffs (tracked + untracked)
+const result = await getGitRepositoryDiffs('/project/path');
+console.log(result.diff); // Combined diff string
+console.log(result.files); // Array of FileStatus
+console.log(result.hasChanges); // Boolean
+```
+
+### Non-Git Directory Support
+
+Handle non-git directories by treating all files as new.
+
+```typescript
+import { listAllFilesInDirectory, generateDiffsForNonGitDirectory } from '@automaker/git-utils';
+
+// List all files (excluding build artifacts)
+const files = await listAllFilesInDirectory('/project/path');
+
+// Generate diffs for non-git directory
+const result = await generateDiffsForNonGitDirectory('/project/path');
+console.log(result.diff); // Synthetic diffs for all files
+console.log(result.files); // All files as "New" status
+```
+
+## Types
+
+### FileStatus
+
+```typescript
+interface FileStatus {
+  status: string; // Git status code (M/A/D/R/C/U/?/!)
+  path: string; // File path relative to repo root
+  statusText: string; // Human-readable status
+}
+```
+
+### Status Codes
+
+- `M` - Modified
+- `A` - Added
+- `D` - Deleted
+- `R` - Renamed
+- `C` - Copied
+- `U` - Updated
+- `?` - Untracked
+- `!` - Ignored
+- ` ` - Unmodified
+
+### Status Text Examples
+
+- `"Modified"` - File has changes
+- `"Added"` - New file in staging
+- `"Deleted"` - File removed
+- `"Renamed"` - File renamed
+- `"Untracked"` - New file not in git
+- `"Modified (staged), Modified (unstaged)"` - Changes in both areas
+
+## Usage Example
+
+```typescript
+import { isGitRepo, getGitRepositoryDiffs, parseGitStatus } from '@automaker/git-utils';
+
+async function getProjectChanges(projectPath: string) {
+  const isRepo = await isGitRepo(projectPath);
+
+  if (!isRepo) {
+    console.log('Not a git repository, analyzing all files...');
+  }
+
+  const result = await getGitRepositoryDiffs(projectPath);
+
+  if (!result.hasChanges) {
+    console.log('No changes detected');
+    return;
+  }
+
+  console.log(`Found ${result.files.length} changed files:\n`);
+
+  // Group by status
+  const byStatus = result.files.reduce(
+    (acc, file) => {
+      acc[file.statusText] = acc[file.statusText] || [];
+      acc[file.statusText].push(file.path);
+      return acc;
+    },
+    {} as Record<string, string[]>
+  );
+
+  Object.entries(byStatus).forEach(([status, paths]) => {
+    console.log(`${status}:`);
+    paths.forEach((path) => console.log(`  - ${path}`));
+  });
+
+  return result.diff;
+}
+```
+
+## Features
+
+### Binary File Detection
+
+Automatically detects binary files by extension and generates appropriate diff markers.
+
+**Supported binary extensions:**
+
+- Images: `.png`, `.jpg`, `.jpeg`, `.gif`, `.svg`, etc.
+- Documents: `.pdf`, `.doc`, `.docx`, etc.
+- Archives: `.zip`, `.tar`, `.gz`, etc.
+- Media: `.mp3`, `.mp4`, `.wav`, etc.
+- Fonts: `.ttf`, `.otf`, `.woff`, etc.
+
+### Large File Handling
+
+Files larger than 1MB show size information instead of full content.
+
+### Synthetic Diff Format
+
+Generates unified diff format for untracked files:
+
+```diff
+diff --git a/new-file.ts b/new-file.ts
+new file mode 100644
+index 0000000..0000000
+--- /dev/null
++++ b/new-file.ts
+@@ -0,0 +1,10 @@
++export function hello() {
++  console.log('Hello');
++}
+```
+
+### Directory Filtering
+
+When scanning non-git directories, automatically excludes:
+
+- `node_modules`, `.git`, `.automaker`
+- Build outputs: `dist`, `build`, `out`, `tmp`, `.tmp`
+- Framework caches: `.next`, `.nuxt`, `.cache`, `coverage`
+- Language-specific: `__pycache__` (Python), `target` (Rust), `vendor` (Go/PHP), `.gradle` (Gradle), `.venv`/`venv` (Python)
+
+## Error Handling
+
+Git operations can fail for various reasons. This package provides graceful error handling patterns:
+
+### Common Error Scenarios
+
+**1. Repository Not Found**
+
+```typescript
+const isRepo = await isGitRepo('/path/does/not/exist');
+// Returns: false (no exception thrown)
+```
+
+**2. Not a Git Repository**
+
+```typescript
+const result = await getGitRepositoryDiffs('/not/a/git/repo');
+// Fallback behavior: treats all files as "new"
+// Returns synthetic diffs for all files in directory
+```
+
+**3. Git Command Failures**
+
+```typescript
+// Permission errors, corrupted repos, or git not installed
+try {
+  const result = await getGitRepositoryDiffs('/project');
+} catch (error) {
+  // Handle errors from git commands
+  // Errors are logged via @automaker/utils logger
+  console.error('Git operation failed:', error);
+}
+```
+
+**4. File Read Errors**
+
+```typescript
+// When generating synthetic diffs for inaccessible files
+const diff = await generateSyntheticDiffForNewFile('/path', 'locked-file.txt');
+// Returns placeholder: "[Unable to read file content]"
+// Error is logged but doesn't throw
+```
+
+### Best Practices
+
+1. **Check repository status first**:
+
+   ```typescript
+   const isRepo = await isGitRepo(path);
+   if (!isRepo) {
+     // Handle non-git case appropriately
+   }
+   ```
+
+2. **Expect non-git directories**:
+   - `getGitRepositoryDiffs()` automatically handles both cases
+   - Always returns a valid result structure
+
+3. **Monitor logs**:
+   - Errors are logged with the `[GitUtils]` prefix
+   - Check logs for permission issues or git configuration problems
+
+4. **Handle edge cases**:
+   - Empty repositories (no commits yet)
+   - Detached HEAD states
+   - Corrupted git repositories
+   - Missing git binary
+
+## Dependencies
+
+- `@automaker/types` - FileStatus type definition
+- `@automaker/utils` - Logger utilities
+
+## Used By
+
+- `@automaker/server` - Git routes, worktree operations, feature context
diff --git a/temp_repo/libs/git-utils/package.json b/temp_repo/libs/git-utils/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..1987fa6d849e4cfece91942e240a3bd07b065f17
--- /dev/null
+++ b/temp_repo/libs/git-utils/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@automaker/git-utils",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Git operations utilities for AutoMaker",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "keywords": [
+    "automaker",
+    "git",
+    "utils"
+  ],
+  "author": "AutoMaker Team",
+  "license": "SEE LICENSE IN LICENSE",
+  "engines": {
+    "node": ">=22.0.0 <23.0.0"
+  },
+  "dependencies": {
+    "@automaker/platform": "1.0.0",
+    "@automaker/types": "1.0.0",
+    "@automaker/utils": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.19.3",
+    "typescript": "5.9.3",
+    "vitest": "4.0.16"
+  }
+}
diff --git a/temp_repo/libs/git-utils/src/branch.ts b/temp_repo/libs/git-utils/src/branch.ts
new file mode 100644
index 0000000000000000000000000000000000000000..803774041bec91f4dc611021383318bc9c598eba
--- /dev/null
+++ b/temp_repo/libs/git-utils/src/branch.ts
@@ -0,0 +1,23 @@
+/**
+ * Git branch utilities
+ */
+
+import { execGitCommand } from './exec.js';
+
+/**
+ * Get the current branch name for a given worktree path.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @returns Promise resolving to the current branch name (trimmed)
+ * @throws Error if the git command fails
+ *
+ * @example
+ * ```typescript
+ * const branch = await getCurrentBranch('/path/to/worktree');
+ * console.log(branch); // 'main'
+ * ```
+ */
+export async function getCurrentBranch(worktreePath: string): Promise<string> {
+  const branchOutput = await execGitCommand(['rev-parse', '--abbrev-ref', 'HEAD'], worktreePath);
+  return branchOutput.trim();
+}
diff --git a/temp_repo/libs/git-utils/src/conflict.ts b/temp_repo/libs/git-utils/src/conflict.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0ddf3cdc10f0e6c1e57fc637b0f60bc98dabc919
--- /dev/null
+++ b/temp_repo/libs/git-utils/src/conflict.ts
@@ -0,0 +1,44 @@
+/**
+ * Git conflict detection utilities
+ */
+
+import { exec } from 'child_process';
+import { promisify } from 'util';
+
+const execAsync = promisify(exec);
+
+/**
+ * Execute a git command with array arguments to prevent command injection.
+ *
+ * @param args - Array of git command arguments
+ * @param cwd - Working directory to execute the command in
+ * @returns Promise resolving to stdout output
+ * @throws Error if the command fails
+ */
+async function execGitCommand(args: string[], cwd: string): Promise<string> {
+  // Shell-escape each argument to prevent injection
+  const escaped = args.map((a) => `'${a.replace(/'/g, "'\\''")}'`).join(' ');
+  const { stdout } = await execAsync(`git ${escaped}`, { cwd });
+  return stdout;
+}
+
+/**
+ * Get the list of files with unresolved merge conflicts.
+ *
+ * @param worktreePath - Path to the git worktree
+ * @returns Array of file paths with conflicts
+ */
+export async function getConflictFiles(worktreePath: string): Promise<string[]> {
+  try {
+    const diffOutput = await execGitCommand(
+      ['diff', '--name-only', '--diff-filter=U'],
+      worktreePath
+    );
+    return diffOutput
+      .trim()
+      .split('\n')
+      .filter((f) => f.trim().length > 0);
+  } catch {
+    return [];
+  }
+}
diff --git a/temp_repo/libs/git-utils/src/diff.ts b/temp_repo/libs/git-utils/src/diff.ts
new file mode 100644
index 0000000000000000000000000000000000000000..31360eac8d5d12847add9e83733917ca84563006
--- /dev/null
+++ b/temp_repo/libs/git-utils/src/diff.ts
@@ -0,0 +1,409 @@
+/**
+ * Git diff generation utilities
+ */
+
+import { createLogger } from '@automaker/utils';
+import { secureFs } from '@automaker/platform';
+import path from 'path';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import { BINARY_EXTENSIONS, type FileStatus, type MergeStateInfo } from './types.js';
+import { isGitRepo, parseGitStatus, detectMergeState, detectMergeCommit } from './status.js';
+
+const execAsync = promisify(exec);
+const logger = createLogger('GitUtils');
+
+// Max file size for generating synthetic diffs (1MB)
+const MAX_SYNTHETIC_DIFF_SIZE = 1024 * 1024;
+
+/**
+ * Check if a file is likely binary based on extension
+ */
+function isBinaryFile(filePath: string): boolean {
+  const ext = path.extname(filePath).toLowerCase();
+  return BINARY_EXTENSIONS.has(ext);
+}
+
+/**
+ * Create a synthetic diff for a new file with the given content lines
+ * This helper reduces duplication in diff generation logic
+ */
+function createNewFileDiff(relativePath: string, mode: string, contentLines: string[]): string {
+  const lineCount = contentLines.length;
+  const addedLines = contentLines.map((line) => `+${line}`).join('\n');
+
+  return `diff --git a/${relativePath} b/${relativePath}
+new file mode ${mode}
+index 0000000..0000000
+--- /dev/null
++++ b/${relativePath}
+@@ -0,0 +${lineCount === 1 ? '1' : `1,${lineCount}`} @@
+${addedLines}
+`;
+}
+
+/**
+ * Generate a synthetic unified diff for an untracked (new) file
+ * This is needed because `git diff HEAD` doesn't include untracked files
+ *
+ * If the path is a directory, this will recursively generate diffs for all files inside
+ */
+export async function generateSyntheticDiffForNewFile(
+  basePath: string,
+  relativePath: string
+): Promise<string> {
+  // Remove trailing slash if present (git status reports directories with trailing /)
+  const cleanPath = relativePath.endsWith('/') ? relativePath.slice(0, -1) : relativePath;
+  const fullPath = path.join(basePath, cleanPath);
+
+  try {
+    // Get file stats to check size and type
+    const stats = await secureFs.stat(fullPath);
+
+    // Check if it's a directory first (before binary check)
+    // This handles edge cases like directories named "images.png/"
+    if (stats.isDirectory()) {
+      const filesInDir = await listAllFilesInDirectory(basePath, cleanPath);
+      if (filesInDir.length === 0) {
+        // Empty directory
+        return createNewFileDiff(cleanPath, '040000', ['[Empty directory]']);
+      }
+      // Generate diffs for all files in the directory sequentially
+      // Using sequential processing to avoid exhausting file descriptors on large directories
+      const diffs: string[] = [];
+      for (const filePath of filesInDir) {
+        diffs.push(await generateSyntheticDiffForNewFile(basePath, filePath));
+      }
+      return diffs.join('');
+    }
+
+    // Check if it's a binary file (after directory check to handle dirs with binary extensions)
+    if (isBinaryFile(cleanPath)) {
+      return `diff --git a/${cleanPath} b/${cleanPath}
+new file mode 100644
+index 0000000..0000000
+Binary file ${cleanPath} added
+`;
+    }
+
+    const fileSize = Number(stats.size);
+    if (fileSize > MAX_SYNTHETIC_DIFF_SIZE) {
+      const sizeKB = Math.round(fileSize / 1024);
+      return createNewFileDiff(cleanPath, '100644', [`[File too large to display: ${sizeKB}KB]`]);
+    }
+
+    // Read file content
+    const content = (await secureFs.readFile(fullPath, 'utf-8')) as string;
+    const hasTrailingNewline = content.endsWith('\n');
+    const lines = content.split('\n');
+
+    // Remove trailing empty line if the file ends with newline
+    if (lines.length > 0 && lines[lines.length - 1] === '') {
+      lines.pop();
+    }
+
+    // Generate diff format
+    const lineCount = lines.length;
+    const addedLines = lines.map((line) => `+${line}`).join('\n');
+
+    let diff = `diff --git a/${cleanPath} b/${cleanPath}
+new file mode 100644
+index 0000000..0000000
+--- /dev/null
++++ b/${cleanPath}
+@@ -0,0 +1,${lineCount} @@
+${addedLines}`;
+
+    // Add "No newline at end of file" indicator if needed
+    if (!hasTrailingNewline && content.length > 0) {
+      diff += '\n\\ No newline at end of file';
+    }
+
+    return diff + '\n';
+  } catch (error) {
+    // Log the error for debugging
+    logger.error(`Failed to generate synthetic diff for ${fullPath}:`, error);
+    // Return a placeholder diff
+    return createNewFileDiff(cleanPath, '100644', ['[Unable to read file content]']);
+  }
+}
+
+/**
+ * Generate synthetic diffs for all untracked files and combine with existing diff
+ */
+export async function appendUntrackedFileDiffs(
+  basePath: string,
+  existingDiff: string,
+  files: Array<{ status: string; path: string }>
+): Promise<string> {
+  // Find untracked files (status "?")
+  const untrackedFiles = files.filter((f) => f.status === '?');
+
+  if (untrackedFiles.length === 0) {
+    return existingDiff;
+  }
+
+  // Generate synthetic diffs for each untracked file
+  const syntheticDiffs = await Promise.all(
+    untrackedFiles.map((f) => generateSyntheticDiffForNewFile(basePath, f.path))
+  );
+
+  // Combine existing diff with synthetic diffs
+  const combinedDiff = existingDiff + syntheticDiffs.join('');
+
+  return combinedDiff;
+}
+
+/**
+ * List all files in a directory recursively (for non-git repositories)
+ * Excludes hidden files/folders and common build artifacts
+ */
+export async function listAllFilesInDirectory(
+  basePath: string,
+  relativePath: string = ''
+): Promise<string[]> {
+  const files: string[] = [];
+  const fullPath = path.join(basePath, relativePath);
+
+  // Directories to skip
+  const skipDirs = new Set([
+    'node_modules',
+    '.git',
+    '.automaker',
+    'dist',
+    'build',
+    '.next',
+    '.nuxt',
+    '__pycache__',
+    '.cache',
+    'coverage',
+    '.venv',
+    'venv',
+    'target',
+    'vendor',
+    '.gradle',
+    'out',
+    'tmp',
+    '.tmp',
+  ]);
+
+  try {
+    const entries = await secureFs.readdir(fullPath, { withFileTypes: true });
+
+    for (const entry of entries) {
+      // Skip hidden files/folders (except we want to allow some)
+      if (entry.name.startsWith('.') && entry.name !== '.env') {
+        continue;
+      }
+
+      const entryRelPath = relativePath ? `${relativePath}/${entry.name}` : entry.name;
+
+      if (entry.isDirectory()) {
+        if (!skipDirs.has(entry.name)) {
+          const subFiles = await listAllFilesInDirectory(basePath, entryRelPath);
+          files.push(...subFiles);
+        }
+      } else if (entry.isFile()) {
+        files.push(entryRelPath);
+      }
+    }
+  } catch (error) {
+    // Log the error to help diagnose file system issues
+    logger.error(`Error reading directory ${fullPath}:`, error);
+  }
+
+  return files;
+}
+
+/**
+ * Generate diffs for all files in a non-git directory
+ * Treats all files as "new" files
+ */
+export async function generateDiffsForNonGitDirectory(
+  basePath: string
+): Promise<{ diff: string; files: FileStatus[] }> {
+  const allFiles = await listAllFilesInDirectory(basePath);
+
+  const files: FileStatus[] = allFiles.map((filePath) => ({
+    status: '?',
+    path: filePath,
+    statusText: 'New',
+  }));
+
+  // Generate synthetic diffs for all files
+  const syntheticDiffs = await Promise.all(
+    files.map((f) => generateSyntheticDiffForNewFile(basePath, f.path))
+  );
+
+  return {
+    diff: syntheticDiffs.join(''),
+    files,
+  };
+}
+
+/**
+ * Get git repository diffs for a given path
+ * Handles both git repos and non-git directories.
+ * Also detects merge state and annotates files accordingly.
+ */
+export async function getGitRepositoryDiffs(repoPath: string): Promise<{
+  diff: string;
+  files: FileStatus[];
+  hasChanges: boolean;
+  mergeState?: MergeStateInfo;
+}> {
+  // Check if it's a git repository
+  const isRepo = await isGitRepo(repoPath);
+
+  if (!isRepo) {
+    // Not a git repo - list all files and treat them as new
+    const result = await generateDiffsForNonGitDirectory(repoPath);
+    return {
+      diff: result.diff,
+      files: result.files,
+      hasChanges: result.files.length > 0,
+    };
+  }
+
+  // Get git diff and status
+  const { stdout: diff } = await execAsync('git diff HEAD', {
+    cwd: repoPath,
+    maxBuffer: 10 * 1024 * 1024,
+  });
+  const { stdout: status } = await execAsync('git status --porcelain', {
+    cwd: repoPath,
+  });
+
+  const files = parseGitStatus(status);
+
+  // Generate synthetic diffs for untracked (new) files
+  let combinedDiff = await appendUntrackedFileDiffs(repoPath, diff, files);
+
+  // Detect merge state (in-progress merge/rebase/cherry-pick)
+  const mergeState = await detectMergeState(repoPath);
+
+  // If no in-progress merge, check if HEAD is a completed merge commit
+  // and include merge commit changes in the diff and file list
+  if (!mergeState.isMerging) {
+    const mergeCommitInfo = await detectMergeCommit(repoPath);
+
+    if (mergeCommitInfo.isMergeCommit && mergeCommitInfo.mergeAffectedFiles.length > 0) {
+      // Get the diff of the merge commit relative to first parent
+      try {
+        const { stdout: mergeDiff } = await execAsync('git diff HEAD~1 HEAD', {
+          cwd: repoPath,
+          maxBuffer: 10 * 1024 * 1024,
+        });
+
+        // Add merge-affected files to the file list (avoid duplicates with working tree changes)
+        const fileByPath = new Map(files.map((f) => [f.path, f]));
+        const existingPaths = new Set(fileByPath.keys());
+        for (const filePath of mergeCommitInfo.mergeAffectedFiles) {
+          if (!existingPaths.has(filePath)) {
+            const newFile = {
+              status: 'M',
+              path: filePath,
+              statusText: 'Merged',
+              indexStatus: ' ',
+              workTreeStatus: ' ',
+              isMergeAffected: true,
+              mergeType: 'merged',
+            };
+            files.push(newFile);
+            fileByPath.set(filePath, newFile);
+            existingPaths.add(filePath);
+          } else {
+            // Mark existing file as also merge-affected
+            const existing = fileByPath.get(filePath);
+            if (existing) {
+              existing.isMergeAffected = true;
+              existing.mergeType = 'merged';
+            }
+          }
+        }
+
+        // Prepend merge diff to the combined diff so merge changes appear
+        // For files that only exist in the merge (not in working tree), we need their diffs
+        if (mergeDiff.trim()) {
+          // Parse the existing working tree diff to find which files it covers
+          const workingTreeDiffPaths = new Set<string>();
+          const diffLines = combinedDiff.split('\n');
+          for (const line of diffLines) {
+            if (line.startsWith('diff --git')) {
+              const match = line.match(/diff --git a\/(.*?) b\/(.*)/);
+              if (match) {
+                workingTreeDiffPaths.add(match[2]);
+              }
+            }
+          }
+
+          // Only include merge diff entries for files NOT already in working tree diff
+          const mergeDiffFiles = mergeDiff.split(/(?=diff --git)/);
+          const newMergeDiffs: string[] = [];
+          for (const fileDiff of mergeDiffFiles) {
+            if (!fileDiff.trim()) continue;
+            const match = fileDiff.match(/diff --git a\/(.*?) b\/(.*)/);
+            if (match && !workingTreeDiffPaths.has(match[2])) {
+              newMergeDiffs.push(fileDiff);
+            }
+          }
+
+          if (newMergeDiffs.length > 0) {
+            combinedDiff = newMergeDiffs.join('') + combinedDiff;
+          }
+        }
+      } catch (mergeError) {
+        // Best-effort: log and continue without merge diff
+        logger.error('Failed to get merge commit diff:', mergeError);
+
+        // Ensure files[] is consistent with mergeState.mergeAffectedFiles even when the
+        // diff command failed. Without this, mergeAffectedFiles would list paths that have
+        // no corresponding entry in the files array.
+        const existingPathsAfterError = new Set(files.map((f) => f.path));
+        for (const filePath of mergeCommitInfo.mergeAffectedFiles) {
+          if (!existingPathsAfterError.has(filePath)) {
+            files.push({
+              status: 'M',
+              path: filePath,
+              statusText: 'Merged',
+              indexStatus: ' ',
+              workTreeStatus: ' ',
+              isMergeAffected: true,
+              mergeType: 'merged',
+            });
+            existingPathsAfterError.add(filePath);
+          } else {
+            // Mark existing file as also merge-affected
+            const existing = files.find((f) => f.path === filePath);
+            if (existing) {
+              existing.isMergeAffected = true;
+              existing.mergeType = 'merged';
+            }
+          }
+        }
+      }
+
+      // Return with merge commit info in the mergeState
+      return {
+        diff: combinedDiff,
+        files,
+        hasChanges: files.length > 0,
+        mergeState: {
+          isMerging: false,
+          mergeOperationType: 'merge',
+          isCleanMerge: true,
+          mergeAffectedFiles: mergeCommitInfo.mergeAffectedFiles,
+          conflictFiles: [],
+          isMergeCommit: true,
+        },
+      };
+    }
+  }
+
+  return {
+    diff: combinedDiff,
+    files,
+    hasChanges: files.length > 0,
+    ...(mergeState.isMerging ? { mergeState } : {}),
+  };
+}
diff --git a/temp_repo/libs/git-utils/src/exec.ts b/temp_repo/libs/git-utils/src/exec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..53d22eefe2754da200cb056443829f557df60f20
--- /dev/null
+++ b/temp_repo/libs/git-utils/src/exec.ts
@@ -0,0 +1,70 @@
+/**
+ * Git command execution utilities
+ */
+
+import { spawnProcess } from '@automaker/platform';
+
+/**
+ * Execute git command with array arguments to prevent command injection.
+ * Uses spawnProcess from @automaker/platform for secure, cross-platform execution.
+ *
+ * @param args - Array of git command arguments (e.g., ['worktree', 'add', path])
+ * @param cwd - Working directory to execute the command in
+ * @param env - Optional additional environment variables to pass to the git process.
+ *   These are merged on top of the current process environment.  Pass
+ *   `{ LC_ALL: 'C' }` to force git to emit English output regardless of the
+ *   system locale so that text-based output parsing remains reliable.
+ * @param abortController - Optional AbortController to cancel the git process.
+ *   When the controller is aborted the underlying process is sent SIGTERM and
+ *   the returned promise rejects with an Error whose message is 'Process aborted'.
+ * @returns Promise resolving to stdout output
+ * @throws Error with stderr/stdout message if command fails. The thrown error
+ *   also has `stdout` and `stderr` string properties for structured access.
+ *
+ * @example
+ * ```typescript
+ * // Safe: no injection possible
+ * await execGitCommand(['branch', '-D', branchName], projectPath);
+ *
+ * // Force English output for reliable text parsing:
+ * await execGitCommand(['rebase', '--', 'main'], worktreePath, { LC_ALL: 'C' });
+ *
+ * // With a process-level timeout:
+ * const controller = new AbortController();
+ * const timerId = setTimeout(() => controller.abort(), 30_000);
+ * try {
+ *   await execGitCommand(['fetch', '--all', '--quiet'], cwd, undefined, controller);
+ * } finally {
+ *   clearTimeout(timerId);
+ * }
+ *
+ * // Instead of unsafe:
+ * // await execAsync(`git branch -D ${branchName}`, { cwd });
+ * ```
+ */
+export async function execGitCommand(
+  args: string[],
+  cwd: string,
+  env?: Record<string, string>,
+  abortController?: AbortController
+): Promise<string> {
+  const result = await spawnProcess({
+    command: 'git',
+    args,
+    cwd,
+    ...(env !== undefined ? { env } : {}),
+    ...(abortController !== undefined ? { abortController } : {}),
+  });
+
+  // spawnProcess returns { stdout, stderr, exitCode }
+  if (result.exitCode === 0) {
+    return result.stdout;
+  } else {
+    const errorMessage =
+      result.stderr || result.stdout || `Git command failed with code ${result.exitCode}`;
+    throw Object.assign(new Error(errorMessage), {
+      stdout: result.stdout,
+      stderr: result.stderr,
+    });
+  }
+}
diff --git a/temp_repo/libs/git-utils/src/index.ts b/temp_repo/libs/git-utils/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5bee6126e328e9a8d32dda0f63c6f652c1d9ab10
--- /dev/null
+++ b/temp_repo/libs/git-utils/src/index.ts
@@ -0,0 +1,33 @@
+/**
+ * @automaker/git-utils
+ * Git operations utilities for AutoMaker
+ */
+
+// Export command execution utilities
+export { execGitCommand } from './exec.js';
+
+// Export types and constants
+export {
+  BINARY_EXTENSIONS,
+  GIT_STATUS_MAP,
+  type FileStatus,
+  type MergeStateInfo,
+} from './types.js';
+
+// Export status utilities
+export { isGitRepo, parseGitStatus, detectMergeState, detectMergeCommit } from './status.js';
+
+// Export diff utilities
+export {
+  generateSyntheticDiffForNewFile,
+  appendUntrackedFileDiffs,
+  listAllFilesInDirectory,
+  generateDiffsForNonGitDirectory,
+  getGitRepositoryDiffs,
+} from './diff.js';
+
+// Export conflict utilities
+export { getConflictFiles } from './conflict.js';
+
+// Export branch utilities
+export { getCurrentBranch } from './branch.js';
diff --git a/temp_repo/libs/git-utils/src/status.ts b/temp_repo/libs/git-utils/src/status.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8cc5cfe2310d0032f15350245315ada9baa32c60
--- /dev/null
+++ b/temp_repo/libs/git-utils/src/status.ts
@@ -0,0 +1,257 @@
+/**
+ * Git status parsing utilities
+ */
+
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import fs from 'fs/promises';
+import path from 'path';
+import { GIT_STATUS_MAP, type FileStatus, type MergeStateInfo } from './types.js';
+
+const execAsync = promisify(exec);
+
+/**
+ * Get a readable status text from git status codes
+ * Handles both single character and XY format status codes
+ */
+function getStatusText(indexStatus: string, workTreeStatus: string): string {
+  // Untracked files
+  if (indexStatus === '?' && workTreeStatus === '?') {
+    return 'Untracked';
+  }
+
+  // Ignored files
+  if (indexStatus === '!' && workTreeStatus === '!') {
+    return 'Ignored';
+  }
+
+  // Prioritize staging area status, then working tree
+  const primaryStatus = indexStatus !== ' ' && indexStatus !== '?' ? indexStatus : workTreeStatus;
+
+  // Handle combined statuses
+  if (
+    indexStatus !== ' ' &&
+    indexStatus !== '?' &&
+    workTreeStatus !== ' ' &&
+    workTreeStatus !== '?'
+  ) {
+    // Both staging and working tree have changes
+    const indexText = GIT_STATUS_MAP[indexStatus] || 'Changed';
+    const workText = GIT_STATUS_MAP[workTreeStatus] || 'Changed';
+    if (indexText === workText) {
+      return indexText;
+    }
+    return `${indexText} (staged), ${workText} (unstaged)`;
+  }
+
+  return GIT_STATUS_MAP[primaryStatus] || 'Changed';
+}
+
+/**
+ * Check if a path is a git repository
+ */
+export async function isGitRepo(repoPath: string): Promise<boolean> {
+  try {
+    await execAsync('git rev-parse --is-inside-work-tree', { cwd: repoPath });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Parse the output of `git status --porcelain` into FileStatus array
+ * Git porcelain format: XY PATH where X=staging area status, Y=working tree status
+ * For renamed files: XY ORIG_PATH -> NEW_PATH
+ */
+export function parseGitStatus(statusOutput: string): FileStatus[] {
+  return statusOutput
+    .split('\n')
+    .filter(Boolean)
+    .map((line) => {
+      // Git porcelain format uses two status characters: XY
+      // X = status in staging area (index)
+      // Y = status in working tree
+      const indexStatus = line[0] || ' ';
+      const workTreeStatus = line[1] || ' ';
+
+      // File path starts at position 3 (after "XY ")
+      let filePath = line.slice(3);
+
+      // Handle renamed files (format: "R  old_path -> new_path")
+      if (indexStatus === 'R' || workTreeStatus === 'R') {
+        const arrowIndex = filePath.indexOf(' -> ');
+        if (arrowIndex !== -1) {
+          filePath = filePath.slice(arrowIndex + 4); // Use new path
+        }
+      }
+
+      // Determine the primary status character for backwards compatibility
+      // Prioritize staging area status, then working tree
+      let primaryStatus: string;
+      if (indexStatus === '?' && workTreeStatus === '?') {
+        primaryStatus = '?'; // Untracked
+      } else if (indexStatus !== ' ' && indexStatus !== '?') {
+        primaryStatus = indexStatus; // Staged change
+      } else {
+        primaryStatus = workTreeStatus; // Working tree change
+      }
+
+      // Detect merge-affected files: when both X and Y are 'U', or U appears in either position
+      // In merge state, git uses 'U' (unmerged) to indicate merge-affected entries
+      const isMergeAffected =
+        indexStatus === 'U' ||
+        workTreeStatus === 'U' ||
+        (indexStatus === 'A' && workTreeStatus === 'A') || // both-added
+        (indexStatus === 'D' && workTreeStatus === 'D'); // both-deleted (during merge)
+
+      let mergeType: string | undefined;
+      if (isMergeAffected) {
+        if (indexStatus === 'U' && workTreeStatus === 'U') mergeType = 'both-modified';
+        else if (indexStatus === 'A' && workTreeStatus === 'U') mergeType = 'added-by-us';
+        else if (indexStatus === 'U' && workTreeStatus === 'A') mergeType = 'added-by-them';
+        else if (indexStatus === 'D' && workTreeStatus === 'U') mergeType = 'deleted-by-us';
+        else if (indexStatus === 'U' && workTreeStatus === 'D') mergeType = 'deleted-by-them';
+        else if (indexStatus === 'A' && workTreeStatus === 'A') mergeType = 'both-added';
+        else if (indexStatus === 'D' && workTreeStatus === 'D') mergeType = 'both-deleted';
+        else mergeType = 'unmerged';
+      }
+
+      return {
+        status: primaryStatus,
+        path: filePath,
+        statusText: getStatusText(indexStatus, workTreeStatus),
+        indexStatus,
+        workTreeStatus,
+        ...(isMergeAffected && { isMergeAffected: true }),
+        ...(mergeType && { mergeType }),
+      };
+    });
+}
+
+/**
+ * Check if the current HEAD commit is a merge commit (has more than one parent).
+ * This is used to detect completed merge commits so we can show what the merge changed.
+ *
+ * @param repoPath - Path to the git repository or worktree
+ * @returns Object with isMergeCommit flag and the list of files affected by the merge
+ */
+export async function detectMergeCommit(
+  repoPath: string
+): Promise<{ isMergeCommit: boolean; mergeAffectedFiles: string[] }> {
+  try {
+    // Check how many parents HEAD has using rev-parse
+    // For a merge commit, HEAD^2 exists (second parent); for non-merge commits it doesn't
+    try {
+      await execAsync('git rev-parse --verify "HEAD^2"', { cwd: repoPath });
+    } catch {
+      // HEAD^2 doesn't exist — not a merge commit
+      return { isMergeCommit: false, mergeAffectedFiles: [] };
+    }
+
+    // HEAD is a merge commit - get the files it changed relative to first parent
+    let mergeAffectedFiles: string[] = [];
+    try {
+      const { stdout: diffOutput } = await execAsync('git diff --name-only "HEAD~1" "HEAD"', {
+        cwd: repoPath,
+      });
+      mergeAffectedFiles = diffOutput
+        .trim()
+        .split('\n')
+        .filter((f) => f.trim().length > 0);
+    } catch {
+      // Ignore errors getting affected files
+    }
+
+    return { isMergeCommit: true, mergeAffectedFiles };
+  } catch {
+    return { isMergeCommit: false, mergeAffectedFiles: [] };
+  }
+}
+
+/**
+ * Detect the current merge state of a git repository.
+ * Checks for .git/MERGE_HEAD, .git/rebase-merge, .git/rebase-apply,
+ * and .git/CHERRY_PICK_HEAD to determine if a merge/rebase/cherry-pick
+ * is in progress.
+ *
+ * @param repoPath - Path to the git repository or worktree
+ * @returns MergeStateInfo describing the current merge state
+ */
+export async function detectMergeState(repoPath: string): Promise<MergeStateInfo> {
+  const defaultState: MergeStateInfo = {
+    isMerging: false,
+    mergeOperationType: null,
+    isCleanMerge: false,
+    mergeAffectedFiles: [],
+    conflictFiles: [],
+  };
+
+  try {
+    // Find the actual .git directory (handles worktrees with .git file pointing to main repo)
+    const { stdout: gitDirRaw } = await execAsync('git rev-parse --git-dir', { cwd: repoPath });
+    const gitDir = path.resolve(repoPath, gitDirRaw.trim());
+
+    // Check for merge/rebase/cherry-pick indicators
+    let mergeOperationType: 'merge' | 'rebase' | 'cherry-pick' | null = null;
+
+    const checks = [
+      { file: 'MERGE_HEAD', type: 'merge' as const },
+      { file: 'rebase-merge', type: 'rebase' as const },
+      { file: 'rebase-apply', type: 'rebase' as const },
+      { file: 'CHERRY_PICK_HEAD', type: 'cherry-pick' as const },
+    ];
+
+    for (const check of checks) {
+      try {
+        await fs.access(path.join(gitDir, check.file));
+        mergeOperationType = check.type;
+        break;
+      } catch {
+        // File doesn't exist, continue checking
+      }
+    }
+
+    if (!mergeOperationType) {
+      return defaultState;
+    }
+
+    // Get unmerged files (files with conflicts)
+    let conflictFiles: string[] = [];
+    try {
+      const { stdout: diffOutput } = await execAsync('git diff --name-only --diff-filter=U', {
+        cwd: repoPath,
+      });
+      conflictFiles = diffOutput
+        .trim()
+        .split('\n')
+        .filter((f) => f.trim().length > 0);
+    } catch {
+      // Ignore errors getting conflict files
+    }
+
+    // Get all files affected by the merge (staged files that came from the merge)
+    let mergeAffectedFiles: string[] = [];
+    try {
+      const { stdout: statusOutput } = await execAsync('git status --porcelain', {
+        cwd: repoPath,
+      });
+      const files = parseGitStatus(statusOutput);
+      mergeAffectedFiles = files
+        .filter((f) => f.isMergeAffected || (f.indexStatus !== ' ' && f.indexStatus !== '?'))
+        .map((f) => f.path);
+    } catch {
+      // Ignore errors
+    }
+
+    return {
+      isMerging: true,
+      mergeOperationType,
+      isCleanMerge: conflictFiles.length === 0,
+      mergeAffectedFiles,
+      conflictFiles,
+    };
+  } catch {
+    return defaultState;
+  }
+}
diff --git a/temp_repo/libs/git-utils/src/types.ts b/temp_repo/libs/git-utils/src/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..638c10e045b4c9ec7b0845f3f833682f0476c2c6
--- /dev/null
+++ b/temp_repo/libs/git-utils/src/types.ts
@@ -0,0 +1,84 @@
+/**
+ * Git utilities types and constants
+ */
+
+// Re-export MergeStateInfo from the centralized @automaker/types package
+export type { MergeStateInfo } from '@automaker/types';
+
+// Binary file extensions to skip
+export const BINARY_EXTENSIONS = new Set([
+  '.png',
+  '.jpg',
+  '.jpeg',
+  '.gif',
+  '.bmp',
+  '.ico',
+  '.webp',
+  '.svg',
+  '.pdf',
+  '.doc',
+  '.docx',
+  '.xls',
+  '.xlsx',
+  '.ppt',
+  '.pptx',
+  '.zip',
+  '.tar',
+  '.gz',
+  '.rar',
+  '.7z',
+  '.exe',
+  '.dll',
+  '.so',
+  '.dylib',
+  '.mp3',
+  '.mp4',
+  '.wav',
+  '.avi',
+  '.mov',
+  '.mkv',
+  '.ttf',
+  '.otf',
+  '.woff',
+  '.woff2',
+  '.eot',
+  '.db',
+  '.sqlite',
+  '.sqlite3',
+  '.pyc',
+  '.pyo',
+  '.class',
+  '.o',
+  '.obj',
+]);
+
+// Status map for git status codes
+// Git porcelain format uses XY where X=staging area, Y=working tree
+export const GIT_STATUS_MAP: Record<string, string> = {
+  M: 'Modified',
+  A: 'Added',
+  D: 'Deleted',
+  R: 'Renamed',
+  C: 'Copied',
+  U: 'Updated',
+  '?': 'Untracked',
+  '!': 'Ignored',
+  ' ': 'Unmodified',
+};
+
+/**
+ * File status interface for git status results
+ */
+export interface FileStatus {
+  status: string;
+  path: string;
+  statusText: string;
+  /** Raw staging area (index) status character from git porcelain format */
+  indexStatus?: string;
+  /** Raw working tree status character from git porcelain format */
+  workTreeStatus?: string;
+  /** Whether this file is involved in a merge operation (both-modified, added-by-us, etc.) */
+  isMergeAffected?: boolean;
+  /** Type of merge involvement: 'both-modified' | 'added-by-us' | 'added-by-them' | 'deleted-by-us' | 'deleted-by-them' | 'both-added' | 'both-deleted' */
+  mergeType?: string;
+}
diff --git a/temp_repo/libs/git-utils/tests/diff.test.ts b/temp_repo/libs/git-utils/tests/diff.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4b03878e44a5830dde635a7bb52a76084b15623c
--- /dev/null
+++ b/temp_repo/libs/git-utils/tests/diff.test.ts
@@ -0,0 +1,349 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import {
+  generateSyntheticDiffForNewFile,
+  appendUntrackedFileDiffs,
+  listAllFilesInDirectory,
+  generateDiffsForNonGitDirectory,
+  getGitRepositoryDiffs,
+} from '../src/diff';
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+
+describe('diff.ts', () => {
+  let tempDir: string;
+
+  beforeEach(async () => {
+    // Create a temporary directory for each test
+    tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'git-utils-test-'));
+  });
+
+  afterEach(async () => {
+    // Clean up temporary directory
+    try {
+      await fs.rm(tempDir, { recursive: true, force: true });
+    } catch (error) {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe('generateSyntheticDiffForNewFile', () => {
+    it('should generate diff for binary file', async () => {
+      const fileName = 'test.png';
+      const filePath = path.join(tempDir, fileName);
+      await fs.writeFile(filePath, Buffer.from([0x89, 0x50, 0x4e, 0x47]));
+
+      const diff = await generateSyntheticDiffForNewFile(tempDir, fileName);
+
+      expect(diff).toContain(`diff --git a/${fileName} b/${fileName}`);
+      expect(diff).toContain('new file mode 100644');
+      expect(diff).toContain(`Binary file ${fileName} added`);
+    });
+
+    it('should generate diff for large text file', async () => {
+      const fileName = 'large.txt';
+      const filePath = path.join(tempDir, fileName);
+      // Create a file > 1MB
+      const largeContent = 'x'.repeat(1024 * 1024 + 100);
+      await fs.writeFile(filePath, largeContent);
+
+      const diff = await generateSyntheticDiffForNewFile(tempDir, fileName);
+
+      expect(diff).toContain(`diff --git a/${fileName} b/${fileName}`);
+      expect(diff).toContain('[File too large to display:');
+      expect(diff).toMatch(/\d+KB\]/);
+    });
+
+    it('should generate diff for small text file with trailing newline', async () => {
+      const fileName = 'test.txt';
+      const filePath = path.join(tempDir, fileName);
+      const content = 'line 1\nline 2\nline 3\n';
+      await fs.writeFile(filePath, content);
+
+      const diff = await generateSyntheticDiffForNewFile(tempDir, fileName);
+
+      expect(diff).toContain(`diff --git a/${fileName} b/${fileName}`);
+      expect(diff).toContain('new file mode 100644');
+      expect(diff).toContain('--- /dev/null');
+      expect(diff).toContain(`+++ b/${fileName}`);
+      expect(diff).toContain('@@ -0,0 +1,3 @@');
+      expect(diff).toContain('+line 1');
+      expect(diff).toContain('+line 2');
+      expect(diff).toContain('+line 3');
+      expect(diff).not.toContain('\\ No newline at end of file');
+    });
+
+    it('should generate diff for text file without trailing newline', async () => {
+      const fileName = 'no-newline.txt';
+      const filePath = path.join(tempDir, fileName);
+      const content = 'line 1\nline 2';
+      await fs.writeFile(filePath, content);
+
+      const diff = await generateSyntheticDiffForNewFile(tempDir, fileName);
+
+      expect(diff).toContain(`diff --git a/${fileName} b/${fileName}`);
+      expect(diff).toContain('+line 1');
+      expect(diff).toContain('+line 2');
+      expect(diff).toContain('\\ No newline at end of file');
+    });
+
+    it('should generate diff for empty file', async () => {
+      const fileName = 'empty.txt';
+      const filePath = path.join(tempDir, fileName);
+      await fs.writeFile(filePath, '');
+
+      const diff = await generateSyntheticDiffForNewFile(tempDir, fileName);
+
+      expect(diff).toContain(`diff --git a/${fileName} b/${fileName}`);
+      expect(diff).toContain('@@ -0,0 +1,0 @@');
+    });
+
+    it('should generate diff for single line file', async () => {
+      const fileName = 'single.txt';
+      const filePath = path.join(tempDir, fileName);
+      await fs.writeFile(filePath, 'single line\n');
+
+      const diff = await generateSyntheticDiffForNewFile(tempDir, fileName);
+
+      expect(diff).toContain('@@ -0,0 +1,1 @@');
+      expect(diff).toContain('+single line');
+    });
+
+    it('should handle file not found error', async () => {
+      const fileName = 'nonexistent.txt';
+
+      const diff = await generateSyntheticDiffForNewFile(tempDir, fileName);
+
+      expect(diff).toContain(`diff --git a/${fileName} b/${fileName}`);
+      expect(diff).toContain('[Unable to read file content]');
+    });
+
+    it('should handle empty directory path gracefully', async () => {
+      const dirName = 'some-directory';
+      const dirPath = path.join(tempDir, dirName);
+      await fs.mkdir(dirPath);
+
+      const diff = await generateSyntheticDiffForNewFile(tempDir, dirName);
+
+      expect(diff).toContain(`diff --git a/${dirName} b/${dirName}`);
+      expect(diff).toContain('new file mode 040000');
+      expect(diff).toContain('[Empty directory]');
+    });
+
+    it('should expand directory with files and generate diffs for each file', async () => {
+      const dirName = 'new-feature';
+      const dirPath = path.join(tempDir, dirName);
+      await fs.mkdir(dirPath);
+      await fs.writeFile(path.join(dirPath, 'index.ts'), 'export const foo = 1;\n');
+      await fs.writeFile(path.join(dirPath, 'utils.ts'), 'export const bar = 2;\n');
+
+      const diff = await generateSyntheticDiffForNewFile(tempDir, dirName);
+
+      // Should contain diffs for both files in the directory
+      expect(diff).toContain(`diff --git a/${dirName}/index.ts b/${dirName}/index.ts`);
+      expect(diff).toContain(`diff --git a/${dirName}/utils.ts b/${dirName}/utils.ts`);
+      expect(diff).toContain('+export const foo = 1;');
+      expect(diff).toContain('+export const bar = 2;');
+      // Should NOT contain a diff for the directory itself
+      expect(diff).not.toContain('[Empty directory]');
+    });
+
+    it('should handle directory path with trailing slash', async () => {
+      const dirName = 'trailing-slash-dir';
+      const dirPath = path.join(tempDir, dirName);
+      await fs.mkdir(dirPath);
+      await fs.writeFile(path.join(dirPath, 'file.txt'), 'content\n');
+
+      // git status reports untracked directories with trailing slash
+      const diff = await generateSyntheticDiffForNewFile(tempDir, `${dirName}/`);
+
+      expect(diff).toContain(`diff --git a/${dirName}/file.txt b/${dirName}/file.txt`);
+      expect(diff).toContain('+content');
+    });
+  });
+
+  describe('appendUntrackedFileDiffs', () => {
+    it('should return existing diff when no untracked files', async () => {
+      const existingDiff = 'diff --git a/test.txt b/test.txt\n';
+      const files = [
+        { status: 'M', path: 'test.txt' },
+        { status: 'A', path: 'new.txt' },
+      ];
+
+      const result = await appendUntrackedFileDiffs(tempDir, existingDiff, files);
+
+      expect(result).toBe(existingDiff);
+    });
+
+    it('should append synthetic diffs for untracked files', async () => {
+      const existingDiff = 'existing diff\n';
+      const untrackedFile = 'untracked.txt';
+      const filePath = path.join(tempDir, untrackedFile);
+      await fs.writeFile(filePath, 'content\n');
+
+      const files = [
+        { status: 'M', path: 'modified.txt' },
+        { status: '?', path: untrackedFile },
+      ];
+
+      const result = await appendUntrackedFileDiffs(tempDir, existingDiff, files);
+
+      expect(result).toContain('existing diff');
+      expect(result).toContain(`diff --git a/${untrackedFile} b/${untrackedFile}`);
+      expect(result).toContain('+content');
+    });
+
+    it('should handle multiple untracked files', async () => {
+      const file1 = 'file1.txt';
+      const file2 = 'file2.txt';
+      await fs.writeFile(path.join(tempDir, file1), 'file1\n');
+      await fs.writeFile(path.join(tempDir, file2), 'file2\n');
+
+      const files = [
+        { status: '?', path: file1 },
+        { status: '?', path: file2 },
+      ];
+
+      const result = await appendUntrackedFileDiffs(tempDir, '', files);
+
+      expect(result).toContain(`diff --git a/${file1} b/${file1}`);
+      expect(result).toContain(`diff --git a/${file2} b/${file2}`);
+      expect(result).toContain('+file1');
+      expect(result).toContain('+file2');
+    });
+  });
+
+  describe('listAllFilesInDirectory', () => {
+    it('should list files in empty directory', async () => {
+      const files = await listAllFilesInDirectory(tempDir);
+      expect(files).toEqual([]);
+    });
+
+    it('should list files in flat directory', async () => {
+      await fs.writeFile(path.join(tempDir, 'file1.txt'), 'content');
+      await fs.writeFile(path.join(tempDir, 'file2.js'), 'code');
+
+      const files = await listAllFilesInDirectory(tempDir);
+
+      expect(files).toHaveLength(2);
+      expect(files).toContain('file1.txt');
+      expect(files).toContain('file2.js');
+    });
+
+    it('should list files in nested directories', async () => {
+      await fs.mkdir(path.join(tempDir, 'subdir'));
+      await fs.writeFile(path.join(tempDir, 'root.txt'), '');
+      await fs.writeFile(path.join(tempDir, 'subdir', 'nested.txt'), '');
+
+      const files = await listAllFilesInDirectory(tempDir);
+
+      expect(files).toHaveLength(2);
+      expect(files).toContain('root.txt');
+      expect(files).toContain('subdir/nested.txt');
+    });
+
+    it('should skip node_modules directory', async () => {
+      await fs.mkdir(path.join(tempDir, 'node_modules'));
+      await fs.writeFile(path.join(tempDir, 'app.js'), '');
+      await fs.writeFile(path.join(tempDir, 'node_modules', 'package.js'), '');
+
+      const files = await listAllFilesInDirectory(tempDir);
+
+      expect(files).toHaveLength(1);
+      expect(files).toContain('app.js');
+      expect(files).not.toContain('node_modules/package.js');
+    });
+
+    it('should skip common build directories', async () => {
+      await fs.mkdir(path.join(tempDir, 'dist'));
+      await fs.mkdir(path.join(tempDir, 'build'));
+      await fs.mkdir(path.join(tempDir, '.next'));
+      await fs.writeFile(path.join(tempDir, 'source.ts'), '');
+      await fs.writeFile(path.join(tempDir, 'dist', 'output.js'), '');
+      await fs.writeFile(path.join(tempDir, 'build', 'output.js'), '');
+
+      const files = await listAllFilesInDirectory(tempDir);
+
+      expect(files).toHaveLength(1);
+      expect(files).toContain('source.ts');
+    });
+
+    it('should skip hidden files except .env', async () => {
+      await fs.writeFile(path.join(tempDir, '.hidden'), '');
+      await fs.writeFile(path.join(tempDir, '.env'), '');
+      await fs.writeFile(path.join(tempDir, 'visible.txt'), '');
+
+      const files = await listAllFilesInDirectory(tempDir);
+
+      expect(files).toHaveLength(2);
+      expect(files).toContain('.env');
+      expect(files).toContain('visible.txt');
+      expect(files).not.toContain('.hidden');
+    });
+
+    it('should skip .git directory', async () => {
+      await fs.mkdir(path.join(tempDir, '.git'));
+      await fs.writeFile(path.join(tempDir, '.git', 'config'), '');
+      await fs.writeFile(path.join(tempDir, 'README.md'), '');
+
+      const files = await listAllFilesInDirectory(tempDir);
+
+      expect(files).toHaveLength(1);
+      expect(files).toContain('README.md');
+    });
+  });
+
+  describe('generateDiffsForNonGitDirectory', () => {
+    it('should generate diffs for all files in directory', async () => {
+      await fs.writeFile(path.join(tempDir, 'file1.txt'), 'content1\n');
+      await fs.writeFile(path.join(tempDir, 'file2.js'), "console.log('hi');\n");
+
+      const result = await generateDiffsForNonGitDirectory(tempDir);
+
+      expect(result.files).toHaveLength(2);
+      expect(result.files.every((f) => f.status === '?')).toBe(true);
+      expect(result.diff).toContain('diff --git a/file1.txt b/file1.txt');
+      expect(result.diff).toContain('diff --git a/file2.js b/file2.js');
+      expect(result.diff).toContain('+content1');
+      expect(result.diff).toContain("+console.log('hi');");
+    });
+
+    it('should return empty result for empty directory', async () => {
+      const result = await generateDiffsForNonGitDirectory(tempDir);
+
+      expect(result.files).toEqual([]);
+      expect(result.diff).toBe('');
+    });
+
+    it('should mark all files as untracked', async () => {
+      await fs.writeFile(path.join(tempDir, 'test.txt'), 'test');
+
+      const result = await generateDiffsForNonGitDirectory(tempDir);
+
+      expect(result.files).toHaveLength(1);
+      expect(result.files[0].status).toBe('?');
+      expect(result.files[0].statusText).toBe('New');
+    });
+  });
+
+  describe('getGitRepositoryDiffs', () => {
+    it('should treat non-git directory as all new files', async () => {
+      await fs.writeFile(path.join(tempDir, 'file.txt'), 'content\n');
+
+      const result = await getGitRepositoryDiffs(tempDir);
+
+      expect(result.hasChanges).toBe(true);
+      expect(result.files).toHaveLength(1);
+      expect(result.files[0].status).toBe('?');
+      expect(result.diff).toContain('diff --git a/file.txt b/file.txt');
+    });
+
+    it('should return no changes for empty non-git directory', async () => {
+      const result = await getGitRepositoryDiffs(tempDir);
+
+      expect(result.hasChanges).toBe(false);
+      expect(result.files).toEqual([]);
+      expect(result.diff).toBe('');
+    });
+  });
+});
diff --git a/temp_repo/libs/git-utils/tsconfig.json b/temp_repo/libs/git-utils/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..f677f8d5ebc071b18ab8302e1ef128243ebc2b3c
--- /dev/null
+++ b/temp_repo/libs/git-utils/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/temp_repo/libs/git-utils/vitest.config.ts b/temp_repo/libs/git-utils/vitest.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a1663babd2b013e142ab1fa7ef00a723c36a32e9
--- /dev/null
+++ b/temp_repo/libs/git-utils/vitest.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    name: 'git-utils',
+    globals: true,
+    environment: 'node',
+    include: ['tests/**/*.test.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      include: ['src/**/*.ts'],
+      exclude: ['src/**/*.d.ts', 'src/index.ts', 'src/types.ts'],
+      thresholds: {
+        lines: 65,
+        functions: 75,
+        branches: 35,
+        statements: 65,
+      },
+    },
+  },
+});
diff --git a/temp_repo/libs/model-resolver/README.md b/temp_repo/libs/model-resolver/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..ce5aa3ce5351451af63500fc9882fdde476dee8d
--- /dev/null
+++ b/temp_repo/libs/model-resolver/README.md
@@ -0,0 +1,135 @@
+# @automaker/model-resolver
+
+Claude model resolution and mapping utilities.
+
+## Overview
+
+This package handles Claude model resolution, converting user-friendly aliases to actual Claude model identifiers and providing default model configurations.
+
+## Installation
+
+```bash
+npm install @automaker/model-resolver
+```
+
+## Exports
+
+### Model Resolution
+
+Convert model aliases to full model identifiers.
+
+```typescript
+import { resolveModelString, DEFAULT_MODELS } from '@automaker/model-resolver';
+import { CLAUDE_MODEL_MAP } from '@automaker/types';
+
+// Resolve model string
+const model = resolveModelString('sonnet');
+// Returns: 'claude-sonnet-4-20250514'
+
+const model2 = resolveModelString('haiku');
+// Returns: 'claude-haiku-4-5'
+
+const model3 = resolveModelString('opus');
+// Returns: 'claude-opus-4-6'
+
+// Use with custom default
+const model4 = resolveModelString(undefined, 'claude-sonnet-4-20250514');
+// Returns: 'claude-sonnet-4-20250514' (default)
+
+// Direct model ID passthrough
+const model5 = resolveModelString('claude-opus-4-6');
+// Returns: 'claude-opus-4-6' (unchanged)
+```
+
+### Get Effective Model
+
+Get the actual model that will be used.
+
+```typescript
+import { getEffectiveModel } from '@automaker/model-resolver';
+
+// Get effective model with fallback chain
+const model = getEffectiveModel({
+  requestedModel: 'sonnet',
+  featureModel: undefined,
+  defaultModel: 'claude-sonnet-4-20250514',
+});
+```
+
+### Model Constants
+
+Access model mappings and defaults.
+
+```typescript
+import { DEFAULT_MODELS } from '@automaker/model-resolver';
+import { CLAUDE_MODEL_MAP } from '@automaker/types';
+
+// Default models for different contexts
+console.log(DEFAULT_MODELS.claude); // 'claude-sonnet-4-20250514'
+console.log(DEFAULT_MODELS.autoMode); // 'claude-sonnet-4-20250514'
+console.log(DEFAULT_MODELS.chat); // 'claude-sonnet-4-20250514'
+
+// Model alias mappings
+console.log(CLAUDE_MODEL_MAP.haiku); // 'claude-haiku-4-5'
+console.log(CLAUDE_MODEL_MAP.sonnet); // 'claude-sonnet-4-20250514'
+console.log(CLAUDE_MODEL_MAP.opus); // 'claude-opus-4-6'
+```
+
+## Usage Example
+
+```typescript
+import { resolveModelString, DEFAULT_MODELS } from '@automaker/model-resolver';
+import type { Feature } from '@automaker/types';
+
+function prepareFeatureExecution(feature: Feature) {
+  // Resolve model from feature or use default
+  const model = resolveModelString(feature.model, DEFAULT_MODELS.autoMode);
+
+  console.log(`Executing feature with model: ${model}`);
+
+  return {
+    featureId: feature.id,
+    model,
+    // ... other options
+  };
+}
+
+// Example usage
+const feature: Feature = {
+  id: 'auth-feature',
+  category: 'backend',
+  description: 'Add authentication',
+  model: 'opus', // User-friendly alias
+};
+
+prepareFeatureExecution(feature);
+// Output: Executing feature with model: claude-opus-4-6
+```
+
+## Supported Models
+
+### Current Model Aliases
+
+- `haiku` → `claude-haiku-4-5`
+- `sonnet` → `claude-sonnet-4-20250514`
+- `opus` → `claude-opus-4-6`
+
+### Model Selection Guide
+
+- **Haiku**: Fast responses, simple tasks, lower cost
+- **Sonnet**: Balanced performance, most tasks (recommended default)
+- **Opus**: Maximum capability, complex reasoning, highest cost
+
+## Dependencies
+
+- `@automaker/types` - Model type definitions and constants
+
+## Used By
+
+- `@automaker/server` - Feature execution, agent chat, enhancement
+
+## Notes
+
+- Model strings that don't match aliases are passed through unchanged
+- This allows direct use of specific model versions like `claude-sonnet-4-20250514`
+- Always falls back to a sensible default if no model is specified
diff --git a/temp_repo/libs/model-resolver/package.json b/temp_repo/libs/model-resolver/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..06a0d2526d239387d6e9b6cabc77a5114c3116d4
--- /dev/null
+++ b/temp_repo/libs/model-resolver/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@automaker/model-resolver",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Model resolution utilities for AutoMaker",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "keywords": [
+    "automaker",
+    "model",
+    "resolver"
+  ],
+  "author": "AutoMaker Team",
+  "license": "SEE LICENSE IN LICENSE",
+  "engines": {
+    "node": ">=22.0.0 <23.0.0"
+  },
+  "dependencies": {
+    "@automaker/types": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.19.3",
+    "typescript": "5.9.3",
+    "vitest": "4.0.16"
+  }
+}
diff --git a/temp_repo/libs/model-resolver/src/index.ts b/temp_repo/libs/model-resolver/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8b1707641409d3fdceb8483d5b5e72a1ad2b2b9c
--- /dev/null
+++ b/temp_repo/libs/model-resolver/src/index.ts
@@ -0,0 +1,21 @@
+/**
+ * @automaker/model-resolver
+ * Model resolution utilities for AutoMaker
+ */
+
+// Re-export constants from types
+export {
+  CLAUDE_MODEL_MAP,
+  CURSOR_MODEL_MAP,
+  DEFAULT_MODELS,
+  type ModelAlias,
+  type CursorModelId,
+} from '@automaker/types';
+
+// Export resolver functions
+export {
+  resolveModelString,
+  getEffectiveModel,
+  resolvePhaseModel,
+  type ResolvedPhaseModel,
+} from './resolver.js';
diff --git a/temp_repo/libs/model-resolver/src/resolver.ts b/temp_repo/libs/model-resolver/src/resolver.ts
new file mode 100644
index 0000000000000000000000000000000000000000..877fcafcffc45f626eb969f43e99f612a6bc84c0
--- /dev/null
+++ b/temp_repo/libs/model-resolver/src/resolver.ts
@@ -0,0 +1,250 @@
+/**
+ * Model resolution utilities for handling model string mapping
+ *
+ * Provides centralized model resolution logic:
+ * - Maps Claude model aliases to full model strings
+ * - Passes through Cursor models unchanged (handled by CursorProvider)
+ * - Passes through Copilot models unchanged (handled by CopilotProvider)
+ * - Passes through Gemini models unchanged (handled by GeminiProvider)
+ * - Provides default models per provider
+ * - Handles multiple model sources with priority
+ *
+ * With canonical model IDs:
+ * - Cursor: cursor-auto, cursor-composer-1, cursor-gpt-5.2
+ * - OpenCode: opencode-big-pickle, opencode-kimi-k2.5-free
+ * - Copilot: copilot-gpt-5.1, copilot-claude-sonnet-4.5, copilot-gemini-3-pro-preview
+ * - Gemini: gemini-2.5-flash, gemini-2.5-pro
+ * - Claude: claude-haiku, claude-sonnet, claude-opus (also supports legacy aliases)
+ */
+
+import {
+  CLAUDE_MODEL_MAP,
+  CLAUDE_CANONICAL_MAP,
+  CURSOR_MODEL_MAP,
+  CODEX_MODEL_MAP,
+  DEFAULT_MODELS,
+  PROVIDER_PREFIXES,
+  isCursorModel,
+  isOpencodeModel,
+  isCopilotModel,
+  isGeminiModel,
+  stripProviderPrefix,
+  migrateModelId,
+  type PhaseModelEntry,
+  type ThinkingLevel,
+  type ReasoningEffort,
+} from '@automaker/types';
+
+// Pattern definitions for Codex/OpenAI models
+const CODEX_MODEL_PREFIXES = ['codex-', 'gpt-'];
+const OPENAI_O_SERIES_PATTERN = /^o\d/;
+const OPENAI_O_SERIES_ALLOWED_MODELS = new Set<string>();
+
+/**
+ * Resolve a model key/alias to a full model string
+ *
+ * Handles both canonical prefixed IDs and legacy aliases:
+ * - Canonical: cursor-auto, cursor-gpt-5.2, opencode-big-pickle, claude-sonnet
+ * - Legacy: auto, composer-1, sonnet, opus
+ *
+ * @param modelKey - Model key (e.g., "claude-opus", "cursor-composer-1", "sonnet")
+ * @param defaultModel - Fallback model if modelKey is undefined
+ * @returns Full model string
+ */
+export function resolveModelString(
+  modelKey?: string,
+  defaultModel: string = DEFAULT_MODELS.claude
+): string {
+  console.log(
+    `[ModelResolver] resolveModelString called with modelKey: "${modelKey}", defaultModel: "${defaultModel}"`
+  );
+
+  // No model specified - use default
+  if (!modelKey) {
+    console.log(`[ModelResolver] No model specified, using default: ${defaultModel}`);
+    return defaultModel;
+  }
+
+  // First, migrate legacy IDs to canonical format
+  const canonicalKey = migrateModelId(modelKey);
+  if (canonicalKey !== modelKey) {
+    console.log(`[ModelResolver] Migrated legacy ID: "${modelKey}" -> "${canonicalKey}"`);
+  }
+
+  // Cursor model with explicit prefix (e.g., "cursor-auto", "cursor-composer-1")
+  // Pass through unchanged - provider will extract bare ID for CLI
+  if (canonicalKey.startsWith(PROVIDER_PREFIXES.cursor)) {
+    console.log(`[ModelResolver] Using Cursor model: ${canonicalKey}`);
+    return canonicalKey;
+  }
+
+  // Codex model with explicit prefix (e.g., "codex-gpt-5.1-codex-max")
+  if (canonicalKey.startsWith(PROVIDER_PREFIXES.codex)) {
+    console.log(`[ModelResolver] Using Codex model: ${canonicalKey}`);
+    return canonicalKey;
+  }
+
+  // OpenCode model (static with opencode- prefix or dynamic with provider/model format)
+  if (isOpencodeModel(canonicalKey)) {
+    console.log(`[ModelResolver] Using OpenCode model: ${canonicalKey}`);
+    return canonicalKey;
+  }
+
+  // Copilot model with explicit prefix (e.g., "copilot-gpt-5.1", "copilot-claude-sonnet-4.5")
+  if (isCopilotModel(canonicalKey)) {
+    console.log(`[ModelResolver] Using Copilot model: ${canonicalKey}`);
+    return canonicalKey;
+  }
+
+  // Gemini model with explicit prefix (e.g., "gemini-2.5-flash", "gemini-2.5-pro")
+  if (isGeminiModel(canonicalKey)) {
+    console.log(`[ModelResolver] Using Gemini model: ${canonicalKey}`);
+    return canonicalKey;
+  }
+
+  // Claude canonical ID (claude-haiku, claude-sonnet, claude-opus)
+  // Map to full model string
+  if (canonicalKey in CLAUDE_CANONICAL_MAP) {
+    const resolved = CLAUDE_CANONICAL_MAP[canonicalKey as keyof typeof CLAUDE_CANONICAL_MAP];
+    console.log(`[ModelResolver] Resolved Claude canonical ID: "${canonicalKey}" -> "${resolved}"`);
+    return resolved;
+  }
+
+  // Full Claude model string (e.g., claude-sonnet-4-6) - pass through
+  if (canonicalKey.includes('claude-')) {
+    console.log(`[ModelResolver] Using full Claude model string: ${canonicalKey}`);
+    return canonicalKey;
+  }
+
+  // Legacy Claude model alias (sonnet, opus, haiku) - support for backward compatibility
+  const resolved = CLAUDE_MODEL_MAP[canonicalKey];
+  if (resolved) {
+    console.log(`[ModelResolver] Resolved Claude legacy alias: "${canonicalKey}" -> "${resolved}"`);
+    return resolved;
+  }
+
+  // OpenAI/Codex models - check for gpt- prefix
+  if (
+    CODEX_MODEL_PREFIXES.some((prefix) => canonicalKey.startsWith(prefix)) ||
+    (OPENAI_O_SERIES_PATTERN.test(canonicalKey) && OPENAI_O_SERIES_ALLOWED_MODELS.has(canonicalKey))
+  ) {
+    console.log(`[ModelResolver] Using OpenAI/Codex model: ${canonicalKey}`);
+    return canonicalKey;
+  }
+
+  // Unknown model key - pass through as-is (could be a provider model like GLM-4.7, MiniMax-M2.1)
+  // This allows ClaudeCompatibleProvider models to work without being registered here
+  console.log(
+    `[ModelResolver] Unknown model key "${canonicalKey}", passing through unchanged (may be a provider model)`
+  );
+  return canonicalKey;
+}
+
+/**
+ * Get the effective model from multiple sources
+ * Priority: explicit model > session model > default
+ *
+ * @param explicitModel - Explicitly provided model (highest priority)
+ * @param sessionModel - Model from session (medium priority)
+ * @param defaultModel - Fallback default model (lowest priority)
+ * @returns Resolved model string
+ */
+export function getEffectiveModel(
+  explicitModel?: string,
+  sessionModel?: string,
+  defaultModel?: string
+): string {
+  return resolveModelString(explicitModel || sessionModel, defaultModel);
+}
+
+/**
+ * Result of resolving a phase model entry
+ */
+export interface ResolvedPhaseModel {
+  /** Resolved model string (full model ID) */
+  model: string;
+  /** Optional thinking level for extended thinking (Claude models) */
+  thinkingLevel?: ThinkingLevel;
+  /** Optional reasoning effort for timeout calculation (Codex models) */
+  reasoningEffort?: ReasoningEffort;
+  /** Provider ID if using a ClaudeCompatibleProvider */
+  providerId?: string;
+}
+
+/**
+ * Resolve a phase model entry to a model string and thinking level
+ *
+ * Handles both legacy format (string) and new format (PhaseModelEntry object).
+ * This centralizes the pattern used across phase model routes.
+ *
+ * @param phaseModel - Phase model entry (string or PhaseModelEntry object)
+ * @param defaultModel - Fallback model if resolution fails
+ * @returns Resolved model string and optional thinking level
+ *
+ * @remarks
+ * - For Cursor models, `thinkingLevel` is returned as `undefined` since Cursor
+ *   handles thinking internally via model variants (e.g., 'claude-sonnet-4-thinking')
+ * - Defensively handles null/undefined from corrupted settings JSON
+ *
+ * @example
+ * ```ts
+ * const phaseModel = settings?.phaseModels?.enhancementModel || DEFAULT_PHASE_MODELS.enhancementModel;
+ * const { model, thinkingLevel } = resolvePhaseModel(phaseModel);
+ * ```
+ */
+export function resolvePhaseModel(
+  phaseModel: string | PhaseModelEntry | null | undefined,
+  defaultModel: string = DEFAULT_MODELS.claude
+): ResolvedPhaseModel {
+  console.log(
+    `[ModelResolver] resolvePhaseModel called with:`,
+    JSON.stringify(phaseModel),
+    `type: ${typeof phaseModel}`
+  );
+
+  // Handle null/undefined (defensive against corrupted JSON)
+  if (!phaseModel) {
+    console.log(`[ModelResolver] phaseModel is null/undefined, using default`);
+    return {
+      model: resolveModelString(undefined, defaultModel),
+      thinkingLevel: undefined,
+      reasoningEffort: undefined,
+    };
+  }
+
+  // Handle legacy string format
+  if (typeof phaseModel === 'string') {
+    console.log(`[ModelResolver] phaseModel is string format (legacy): "${phaseModel}"`);
+    return {
+      model: resolveModelString(phaseModel, defaultModel),
+      thinkingLevel: undefined,
+      reasoningEffort: undefined,
+    };
+  }
+
+  // Handle new PhaseModelEntry object format
+  console.log(
+    `[ModelResolver] phaseModel is object format: model="${phaseModel.model}", thinkingLevel="${phaseModel.thinkingLevel}", reasoningEffort="${phaseModel.reasoningEffort}", providerId="${phaseModel.providerId}"`
+  );
+
+  // If providerId is set, pass through the model string unchanged
+  // (it's a provider-specific model ID like "GLM-4.5-Air", not a Claude alias)
+  if (phaseModel.providerId) {
+    console.log(
+      `[ModelResolver] Using provider model: providerId="${phaseModel.providerId}", model="${phaseModel.model}"`
+    );
+    return {
+      model: phaseModel.model, // Pass through unchanged
+      thinkingLevel: phaseModel.thinkingLevel,
+      reasoningEffort: phaseModel.reasoningEffort,
+      providerId: phaseModel.providerId,
+    };
+  }
+
+  // No providerId - resolve through normal Claude model mapping
+  return {
+    model: resolveModelString(phaseModel.model, defaultModel),
+    thinkingLevel: phaseModel.thinkingLevel,
+    reasoningEffort: phaseModel.reasoningEffort,
+  };
+}
diff --git a/temp_repo/libs/model-resolver/tests/resolver.test.ts b/temp_repo/libs/model-resolver/tests/resolver.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0a3fa0b4429efc2ea4140d079f6276efb254962d
--- /dev/null
+++ b/temp_repo/libs/model-resolver/tests/resolver.test.ts
@@ -0,0 +1,552 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { resolveModelString, getEffectiveModel, resolvePhaseModel } from '../src/resolver';
+import {
+  CLAUDE_MODEL_MAP,
+  CURSOR_MODEL_MAP,
+  DEFAULT_MODELS,
+  type PhaseModelEntry,
+} from '@automaker/types';
+
+describe('model-resolver', () => {
+  let consoleLogSpy: ReturnType<typeof vi.spyOn>;
+  let consoleWarnSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+    consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleLogSpy.mockRestore();
+    consoleWarnSpy.mockRestore();
+  });
+
+  describe('resolveModelString', () => {
+    describe('with undefined/null input', () => {
+      it('should return default model when modelKey is undefined', () => {
+        const result = resolveModelString(undefined);
+        expect(result).toBe(DEFAULT_MODELS.claude);
+      });
+
+      it('should return custom default when modelKey is undefined', () => {
+        const customDefault = 'claude-opus-4-20241113';
+        const result = resolveModelString(undefined, customDefault);
+        expect(result).toBe(customDefault);
+      });
+
+      it('should return default when modelKey is empty string', () => {
+        const result = resolveModelString('');
+        expect(result).toBe(DEFAULT_MODELS.claude);
+      });
+    });
+
+    describe('with full Claude model strings', () => {
+      it('should pass through full Claude model string unchanged', () => {
+        const fullModel = 'claude-sonnet-4-6';
+        const result = resolveModelString(fullModel);
+
+        expect(result).toBe(fullModel);
+        expect(consoleLogSpy).toHaveBeenCalledWith(
+          expect.stringContaining('Using full Claude model string')
+        );
+      });
+
+      it('should handle claude-opus model strings', () => {
+        const fullModel = 'claude-opus-4-20241113';
+        const result = resolveModelString(fullModel);
+
+        expect(result).toBe(fullModel);
+      });
+
+      it('should handle claude-haiku model strings', () => {
+        const fullModel = 'claude-3-5-haiku-20241022';
+        const result = resolveModelString(fullModel);
+
+        expect(result).toBe(fullModel);
+      });
+
+      it("should handle any string containing 'claude-'", () => {
+        const customModel = 'claude-custom-experimental-v1';
+        const result = resolveModelString(customModel);
+
+        expect(result).toBe(customModel);
+      });
+    });
+
+    describe('with model aliases', () => {
+      it("should resolve 'sonnet' alias", () => {
+        const result = resolveModelString('sonnet');
+
+        expect(result).toBe(CLAUDE_MODEL_MAP.sonnet);
+        // Legacy aliases are migrated to canonical IDs then resolved
+        expect(consoleLogSpy).toHaveBeenCalledWith(
+          expect.stringContaining('Migrated legacy ID: "sonnet" -> "claude-sonnet"')
+        );
+      });
+
+      it("should resolve 'opus' alias", () => {
+        const result = resolveModelString('opus');
+
+        expect(result).toBe(CLAUDE_MODEL_MAP.opus);
+        expect(consoleLogSpy).toHaveBeenCalledWith(
+          expect.stringContaining('Migrated legacy ID: "opus" -> "claude-opus"')
+        );
+      });
+
+      it("should resolve 'haiku' alias", () => {
+        const result = resolveModelString('haiku');
+
+        expect(result).toBe(CLAUDE_MODEL_MAP.haiku);
+      });
+
+      it('should log the resolution for aliases', () => {
+        resolveModelString('sonnet');
+
+        // Legacy aliases get migrated and resolved via canonical map
+        expect(consoleLogSpy).toHaveBeenCalledWith(
+          expect.stringContaining('Resolved Claude canonical ID')
+        );
+        expect(consoleLogSpy).toHaveBeenCalledWith(
+          expect.stringContaining(CLAUDE_MODEL_MAP.sonnet)
+        );
+      });
+    });
+
+    describe('with Cursor models', () => {
+      it('should pass through cursor-prefixed model unchanged', () => {
+        const result = resolveModelString('cursor-composer-1');
+
+        expect(result).toBe('cursor-composer-1');
+        expect(consoleLogSpy).toHaveBeenCalledWith(expect.stringContaining('Using Cursor model'));
+      });
+
+      it('should handle cursor-auto model', () => {
+        const result = resolveModelString('cursor-auto');
+
+        expect(result).toBe('cursor-auto');
+      });
+
+      it('should handle cursor-gpt-4o model', () => {
+        const result = resolveModelString('cursor-gpt-4o');
+
+        expect(result).toBe('cursor-gpt-4o');
+      });
+
+      it('should add cursor- prefix to bare Cursor model IDs', () => {
+        const result = resolveModelString('composer-1');
+
+        expect(result).toBe('cursor-composer-1');
+        // Legacy bare IDs are migrated to canonical prefixed format
+        expect(consoleLogSpy).toHaveBeenCalledWith(
+          expect.stringContaining('Migrated legacy ID: "composer-1" -> "cursor-composer-1"')
+        );
+      });
+
+      it('should add cursor- prefix to auto model', () => {
+        const result = resolveModelString('auto');
+
+        expect(result).toBe('cursor-auto');
+      });
+
+      it('should pass through unknown cursor-prefixed models', () => {
+        const result = resolveModelString('cursor-unknown-future-model');
+
+        expect(result).toBe('cursor-unknown-future-model');
+        // Unknown cursor-prefixed models pass through as Cursor models
+        expect(consoleLogSpy).toHaveBeenCalledWith(expect.stringContaining('Using Cursor model'));
+      });
+
+      it('should handle all known Cursor model IDs', () => {
+        // CURSOR_MODEL_MAP now uses prefixed keys (e.g., 'cursor-auto')
+        const cursorModelIds = Object.keys(CURSOR_MODEL_MAP);
+
+        for (const modelId of cursorModelIds) {
+          // modelId is already prefixed (e.g., 'cursor-auto')
+          const result = resolveModelString(modelId);
+          expect(result).toBe(modelId);
+        }
+      });
+    });
+
+    describe('with unknown model keys (provider models)', () => {
+      // Unknown models are now passed through unchanged to support
+      // ClaudeCompatibleProvider models like GLM-4.7, MiniMax-M2.1, etc.
+      it('should pass through unknown model key unchanged (may be provider model)', () => {
+        const result = resolveModelString('unknown-model');
+
+        expect(result).toBe('unknown-model');
+        expect(consoleLogSpy).toHaveBeenCalledWith(
+          expect.stringContaining('passing through unchanged')
+        );
+      });
+
+      it('should pass through provider-like model names', () => {
+        const glmModel = resolveModelString('GLM-4.7');
+        const minimaxModel = resolveModelString('MiniMax-M2.1');
+
+        expect(glmModel).toBe('GLM-4.7');
+        expect(minimaxModel).toBe('MiniMax-M2.1');
+      });
+
+      it('should not warn about unknown model keys (they are valid provider models)', () => {
+        resolveModelString('unknown-model');
+
+        expect(consoleWarnSpy).not.toHaveBeenCalled();
+      });
+
+      it('should ignore custom default for unknown model key (passthrough takes precedence)', () => {
+        const customDefault = 'claude-opus-4-20241113';
+        const result = resolveModelString('truly-unknown-model', customDefault);
+
+        // Unknown models pass through unchanged, default is not used
+        expect(result).toBe('truly-unknown-model');
+      });
+    });
+
+    describe('case sensitivity', () => {
+      it('should be case-sensitive for aliases', () => {
+        const resultUpper = resolveModelString('SONNET');
+        const resultLower = resolveModelString('sonnet');
+
+        // Uppercase is passed through (could be a provider model)
+        expect(resultUpper).toBe('SONNET');
+        // Lowercase should resolve to Claude model
+        expect(resultLower).toBe(CLAUDE_MODEL_MAP.sonnet);
+      });
+
+      it('should handle mixed case in claude- strings', () => {
+        const result = resolveModelString('Claude-Sonnet-4-20250514');
+
+        // Capital 'C' means it won't match 'claude-', passed through as provider model
+        expect(result).toBe('Claude-Sonnet-4-20250514');
+      });
+    });
+
+    describe('edge cases', () => {
+      it('should handle model key with whitespace', () => {
+        const result = resolveModelString('  sonnet  ');
+
+        // Will not match due to whitespace, passed through as-is (could be provider model)
+        expect(result).toBe('  sonnet  ');
+      });
+
+      it('should handle special characters in model key', () => {
+        const result = resolveModelString('model@123');
+
+        // Passed through as-is (could be a provider model)
+        expect(result).toBe('model@123');
+      });
+    });
+  });
+
+  describe('getEffectiveModel', () => {
+    describe('priority handling', () => {
+      it('should prioritize explicit model over all others', () => {
+        const explicit = 'claude-opus-4-20241113';
+        const session = 'claude-sonnet-4-6';
+        const defaultModel = 'claude-3-5-haiku-20241022';
+
+        const result = getEffectiveModel(explicit, session, defaultModel);
+
+        expect(result).toBe(explicit);
+      });
+
+      it('should use session model when explicit is undefined', () => {
+        const session = 'claude-sonnet-4-6';
+        const defaultModel = 'claude-3-5-haiku-20241022';
+
+        const result = getEffectiveModel(undefined, session, defaultModel);
+
+        expect(result).toBe(session);
+      });
+
+      it('should use default model when both explicit and session are undefined', () => {
+        const defaultModel = 'claude-opus-4-20241113';
+
+        const result = getEffectiveModel(undefined, undefined, defaultModel);
+
+        expect(result).toBe(defaultModel);
+      });
+
+      it('should use system default when all are undefined', () => {
+        const result = getEffectiveModel(undefined, undefined, undefined);
+
+        expect(result).toBe(DEFAULT_MODELS.claude);
+      });
+    });
+
+    describe('with aliases', () => {
+      it('should resolve explicit model alias', () => {
+        const result = getEffectiveModel('opus', 'sonnet');
+
+        expect(result).toBe(CLAUDE_MODEL_MAP.opus);
+      });
+
+      it('should resolve session model alias when explicit is undefined', () => {
+        const result = getEffectiveModel(undefined, 'haiku');
+
+        expect(result).toBe(CLAUDE_MODEL_MAP.haiku);
+      });
+
+      it('should prioritize explicit alias over session full string', () => {
+        const result = getEffectiveModel('sonnet', 'claude-opus-4-20241113');
+
+        expect(result).toBe(CLAUDE_MODEL_MAP.sonnet);
+      });
+    });
+
+    describe('with empty strings', () => {
+      it('should treat empty explicit string as undefined', () => {
+        const session = 'claude-sonnet-4-6';
+
+        const result = getEffectiveModel('', session);
+
+        expect(result).toBe(session);
+      });
+
+      it('should treat empty session string as undefined', () => {
+        const defaultModel = 'claude-opus-4-20241113';
+
+        const result = getEffectiveModel(undefined, '', defaultModel);
+
+        expect(result).toBe(defaultModel);
+      });
+
+      it('should handle all empty strings', () => {
+        const result = getEffectiveModel('', '', '');
+
+        // Empty strings are falsy, so explicit || session becomes "" || ""  = ""
+        // Then resolveModelString("", "") returns "" (not in CLAUDE_MODEL_MAP, not containing "claude-")
+        // This actually returns the custom default which is ""
+        expect(result).toBe('');
+      });
+    });
+
+    describe('integration scenarios', () => {
+      it('should handle user overriding session model with alias', () => {
+        const sessionModel = 'claude-sonnet-4-6';
+        const userChoice = 'opus';
+
+        const result = getEffectiveModel(userChoice, sessionModel);
+
+        expect(result).toBe(CLAUDE_MODEL_MAP.opus);
+      });
+
+      it('should pass through unknown model (may be provider model)', () => {
+        const result = getEffectiveModel('GLM-4.7', 'also-unknown', 'claude-opus-4-20241113');
+
+        // Unknown models pass through unchanged (could be provider models)
+        expect(result).toBe('GLM-4.7');
+      });
+
+      it('should handle session with alias, no explicit', () => {
+        const result = getEffectiveModel(undefined, 'haiku');
+
+        expect(result).toBe(CLAUDE_MODEL_MAP.haiku);
+      });
+    });
+  });
+
+  describe('CLAUDE_MODEL_MAP integration', () => {
+    it('should have valid mappings for all known aliases', () => {
+      const aliases = ['sonnet', 'opus', 'haiku'];
+
+      for (const alias of aliases) {
+        const resolved = resolveModelString(alias);
+        expect(resolved).toBeDefined();
+        expect(resolved).toContain('claude-');
+        expect(resolved).toBe(CLAUDE_MODEL_MAP[alias]);
+      }
+    });
+  });
+
+  describe('DEFAULT_MODELS integration', () => {
+    it('should use DEFAULT_MODELS.claude as fallback', () => {
+      const result = resolveModelString(undefined);
+
+      expect(result).toBe(DEFAULT_MODELS.claude);
+      expect(DEFAULT_MODELS.claude).toBeDefined();
+      expect(DEFAULT_MODELS.claude).toContain('claude-');
+    });
+  });
+
+  describe('resolvePhaseModel', () => {
+    describe('with null/undefined input (defensive handling)', () => {
+      it('should return default model when phaseModel is null', () => {
+        const result = resolvePhaseModel(null);
+
+        expect(result.model).toBe(DEFAULT_MODELS.claude);
+        expect(result.thinkingLevel).toBeUndefined();
+      });
+
+      it('should return default model when phaseModel is undefined', () => {
+        const result = resolvePhaseModel(undefined);
+
+        expect(result.model).toBe(DEFAULT_MODELS.claude);
+        expect(result.thinkingLevel).toBeUndefined();
+      });
+
+      it('should use custom default when phaseModel is null', () => {
+        const customDefault = 'claude-opus-4-20241113';
+        const result = resolvePhaseModel(null, customDefault);
+
+        expect(result.model).toBe(customDefault);
+        expect(result.thinkingLevel).toBeUndefined();
+      });
+    });
+
+    describe('with legacy string format (v2 settings)', () => {
+      it('should resolve Claude alias string', () => {
+        const result = resolvePhaseModel('sonnet');
+
+        expect(result.model).toBe(CLAUDE_MODEL_MAP.sonnet);
+        expect(result.thinkingLevel).toBeUndefined();
+      });
+
+      it('should resolve opus alias string', () => {
+        const result = resolvePhaseModel('opus');
+
+        expect(result.model).toBe(CLAUDE_MODEL_MAP.opus);
+        expect(result.thinkingLevel).toBeUndefined();
+      });
+
+      it('should resolve haiku alias string', () => {
+        const result = resolvePhaseModel('haiku');
+
+        expect(result.model).toBe(CLAUDE_MODEL_MAP.haiku);
+        expect(result.thinkingLevel).toBeUndefined();
+      });
+
+      it('should pass through full Claude model string', () => {
+        const fullModel = 'claude-sonnet-4-6';
+        const result = resolvePhaseModel(fullModel);
+
+        expect(result.model).toBe(fullModel);
+        expect(result.thinkingLevel).toBeUndefined();
+      });
+
+      it('should handle Cursor model string', () => {
+        const result = resolvePhaseModel('cursor-auto');
+
+        expect(result.model).toBe('cursor-auto');
+        expect(result.thinkingLevel).toBeUndefined();
+      });
+    });
+
+    describe('with PhaseModelEntry object format (v3 settings)', () => {
+      it('should resolve model from entry without thinkingLevel', () => {
+        const entry: PhaseModelEntry = { model: 'sonnet' };
+        const result = resolvePhaseModel(entry);
+
+        expect(result.model).toBe(CLAUDE_MODEL_MAP.sonnet);
+        expect(result.thinkingLevel).toBeUndefined();
+      });
+
+      it('should resolve model and return thinkingLevel none', () => {
+        const entry: PhaseModelEntry = { model: 'opus', thinkingLevel: 'none' };
+        const result = resolvePhaseModel(entry);
+
+        expect(result.model).toBe(CLAUDE_MODEL_MAP.opus);
+        expect(result.thinkingLevel).toBe('none');
+      });
+
+      it('should resolve model and return thinkingLevel low', () => {
+        const entry: PhaseModelEntry = { model: 'sonnet', thinkingLevel: 'low' };
+        const result = resolvePhaseModel(entry);
+
+        expect(result.model).toBe(CLAUDE_MODEL_MAP.sonnet);
+        expect(result.thinkingLevel).toBe('low');
+      });
+
+      it('should resolve model and return thinkingLevel medium', () => {
+        const entry: PhaseModelEntry = { model: 'haiku', thinkingLevel: 'medium' };
+        const result = resolvePhaseModel(entry);
+
+        expect(result.model).toBe(CLAUDE_MODEL_MAP.haiku);
+        expect(result.thinkingLevel).toBe('medium');
+      });
+
+      it('should resolve model and return thinkingLevel high', () => {
+        const entry: PhaseModelEntry = { model: 'opus', thinkingLevel: 'high' };
+        const result = resolvePhaseModel(entry);
+
+        expect(result.model).toBe(CLAUDE_MODEL_MAP.opus);
+        expect(result.thinkingLevel).toBe('high');
+      });
+
+      it('should resolve model and return thinkingLevel ultrathink', () => {
+        const entry: PhaseModelEntry = { model: 'opus', thinkingLevel: 'ultrathink' };
+        const result = resolvePhaseModel(entry);
+
+        expect(result.model).toBe(CLAUDE_MODEL_MAP.opus);
+        expect(result.thinkingLevel).toBe('ultrathink');
+      });
+
+      it('should handle full Claude model string in entry', () => {
+        const entry: PhaseModelEntry = {
+          model: 'claude-opus-4-6',
+          thinkingLevel: 'high',
+        };
+        const result = resolvePhaseModel(entry);
+
+        expect(result.model).toBe('claude-opus-4-6');
+        expect(result.thinkingLevel).toBe('high');
+      });
+    });
+
+    describe('with Cursor models (thinkingLevel should be preserved but unused)', () => {
+      it('should handle Cursor model entry without thinkingLevel', () => {
+        const entry: PhaseModelEntry = { model: 'auto' };
+        const result = resolvePhaseModel(entry);
+
+        expect(result.model).toBe('cursor-auto');
+        expect(result.thinkingLevel).toBeUndefined();
+      });
+
+      it('should preserve thinkingLevel even for Cursor models (caller handles)', () => {
+        // Note: thinkingLevel is meaningless for Cursor but we don't filter it
+        // The calling code should check isCursorModel() before using thinkingLevel
+        const entry: PhaseModelEntry = { model: 'composer-1', thinkingLevel: 'high' };
+        const result = resolvePhaseModel(entry);
+
+        expect(result.model).toBe('cursor-composer-1');
+        expect(result.thinkingLevel).toBe('high');
+      });
+
+      it('should handle cursor-prefixed model in entry', () => {
+        const entry: PhaseModelEntry = { model: 'cursor-gpt-4o' as any };
+        const result = resolvePhaseModel(entry);
+
+        expect(result.model).toBe('cursor-gpt-4o');
+      });
+    });
+
+    describe('edge cases', () => {
+      it('should handle empty string model in entry', () => {
+        const entry: PhaseModelEntry = { model: '' as any };
+        const result = resolvePhaseModel(entry);
+
+        expect(result.model).toBe(DEFAULT_MODELS.claude);
+        expect(result.thinkingLevel).toBeUndefined();
+      });
+
+      it('should pass through unknown model in entry (may be provider model)', () => {
+        const entry: PhaseModelEntry = { model: 'GLM-4.7' as any };
+        const result = resolvePhaseModel(entry);
+
+        // Unknown models pass through unchanged (could be provider models)
+        expect(result.model).toBe('GLM-4.7');
+      });
+
+      it('should pass through unknown model with thinkingLevel', () => {
+        const entry: PhaseModelEntry = { model: 'MiniMax-M2.1' as any, thinkingLevel: 'high' };
+        const customDefault = 'claude-haiku-4-5-20251001';
+        const result = resolvePhaseModel(entry, customDefault);
+
+        // Unknown models pass through, thinkingLevel is preserved
+        expect(result.model).toBe('MiniMax-M2.1');
+        expect(result.thinkingLevel).toBe('high');
+      });
+    });
+  });
+});
diff --git a/temp_repo/libs/model-resolver/tsconfig.json b/temp_repo/libs/model-resolver/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..f677f8d5ebc071b18ab8302e1ef128243ebc2b3c
--- /dev/null
+++ b/temp_repo/libs/model-resolver/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/temp_repo/libs/model-resolver/vitest.config.ts b/temp_repo/libs/model-resolver/vitest.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1ff65363b0fbab3d627aea626737547173d1a8af
--- /dev/null
+++ b/temp_repo/libs/model-resolver/vitest.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    name: 'model-resolver',
+    globals: true,
+    environment: 'node',
+    include: ['tests/**/*.test.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      include: ['src/**/*.ts'],
+      exclude: ['src/**/*.d.ts', 'src/index.ts'],
+      thresholds: {
+        lines: 95,
+        functions: 95,
+        branches: 90,
+        statements: 95,
+      },
+    },
+  },
+});
diff --git a/temp_repo/libs/platform/README.md b/temp_repo/libs/platform/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..9d4193d66aed6fce7b681479d3f130281a690f5d
--- /dev/null
+++ b/temp_repo/libs/platform/README.md
@@ -0,0 +1,217 @@
+# @automaker/platform
+
+Platform-specific utilities for AutoMaker.
+
+## Overview
+
+This package provides platform-specific utilities including path management, subprocess handling, and security validation. It handles AutoMaker's directory structure and system operations.
+
+## Installation
+
+```bash
+npm install @automaker/platform
+```
+
+## Exports
+
+### Path Management
+
+AutoMaker directory structure utilities.
+
+```typescript
+import {
+  getAutomakerDir,
+  getFeaturesDir,
+  getFeatureDir,
+  getFeatureImagesDir,
+  getBoardDir,
+  getImagesDir,
+  getContextDir,
+  getWorktreesDir,
+  getAppSpecPath,
+  getBranchTrackingPath,
+  ensureAutomakerDir,
+} from '@automaker/platform';
+
+// Get AutoMaker directory: /project/.automaker
+const automakerDir = getAutomakerDir('/project/path');
+
+// Get features directory: /project/.automaker/features
+const featuresDir = getFeaturesDir('/project/path');
+
+// Get specific feature directory: /project/.automaker/features/feature-id
+const featureDir = getFeatureDir('/project/path', 'feature-id');
+
+// Get feature images: /project/.automaker/features/feature-id/images
+const imagesDir = getFeatureImagesDir('/project/path', 'feature-id');
+
+// Ensure .automaker directory exists
+await ensureAutomakerDir('/project/path');
+```
+
+### Subprocess Management
+
+Spawn and manage subprocesses with JSON-lines output.
+
+```typescript
+import { spawnJSONLProcess, spawnProcess } from '@automaker/platform';
+
+// Spawn process with JSONL output parsing
+const result = await spawnJSONLProcess({
+  command: 'claude-agent',
+  args: ['--output', 'jsonl'],
+  cwd: '/project/path',
+  onLine: (data) => console.log('Received:', data),
+  onError: (error) => console.error('Error:', error),
+});
+
+// Spawn regular process
+const output = await spawnProcess({
+  command: 'git',
+  args: ['status'],
+  cwd: '/project/path',
+});
+```
+
+### Security Validation
+
+Path validation and security checks.
+
+```typescript
+import {
+  initAllowedPaths,
+  isPathAllowed,
+  validatePath,
+  getAllowedPaths,
+  getAllowedRootDirectory,
+  getDataDirectory,
+  PathNotAllowedError,
+} from '@automaker/platform';
+
+// Initialize allowed paths from environment
+// Reads ALLOWED_ROOT_DIRECTORY and DATA_DIR environment variables
+initAllowedPaths();
+
+// Check if path is allowed
+if (isPathAllowed('/project/path')) {
+  console.log('Path is allowed');
+}
+
+// Validate and normalize path (throws PathNotAllowedError if not allowed)
+try {
+  const safePath = validatePath('/requested/path');
+} catch (error) {
+  if (error instanceof PathNotAllowedError) {
+    console.error('Access denied:', error.message);
+  }
+}
+
+// Get configured directories
+const rootDir = getAllowedRootDirectory(); // or null if not configured
+const dataDir = getDataDirectory(); // or null if not configured
+const allowed = getAllowedPaths(); // array of all allowed paths
+```
+
+## Usage Example
+
+```typescript
+import {
+  getFeatureDir,
+  ensureAutomakerDir,
+  spawnJSONLProcess,
+  validatePath,
+} from '@automaker/platform';
+
+async function executeFeature(projectPath: string, featureId: string) {
+  // Validate project path
+  const safePath = validatePath(projectPath);
+
+  // Ensure AutoMaker directory exists
+  await ensureAutomakerDir(safePath);
+
+  // Get feature directory
+  const featureDir = getFeatureDir(safePath, featureId);
+
+  // Execute agent in feature directory
+  const result = await spawnJSONLProcess({
+    command: 'claude-agent',
+    args: ['execute'],
+    cwd: featureDir,
+    onLine: (data) => {
+      if (data.type === 'progress') {
+        console.log('Progress:', data.progress);
+      }
+    },
+  });
+
+  return result;
+}
+```
+
+## Security Model
+
+Path security is enforced through two environment variables:
+
+### Environment Variables
+
+- **ALLOWED_ROOT_DIRECTORY**: Primary security boundary. When set, all file operations must be within this directory.
+- **DATA_DIR**: Application data directory (settings, credentials). Always allowed regardless of ALLOWED_ROOT_DIRECTORY.
+
+### Behavior
+
+1. **When ALLOWED_ROOT_DIRECTORY is set**: Only paths within this directory (or DATA_DIR) are allowed. Attempts to access other paths will throw `PathNotAllowedError`.
+
+2. **When ALLOWED_ROOT_DIRECTORY is not set**: All paths are allowed (backward compatibility mode).
+
+3. **DATA_DIR exception**: Paths within DATA_DIR are always allowed, even if outside ALLOWED_ROOT_DIRECTORY. This ensures settings and credentials are always accessible.
+
+### Example Configuration
+
+```bash
+# Docker/containerized environment
+ALLOWED_ROOT_DIRECTORY=/workspace
+DATA_DIR=/app/data
+
+# Development (no restrictions)
+# Leave ALLOWED_ROOT_DIRECTORY unset for full access
+```
+
+### Secure File System
+
+The `secureFs` module wraps Node.js `fs` operations with path validation:
+
+```typescript
+import { secureFs } from '@automaker/platform';
+
+// All operations validate paths before execution
+await secureFs.readFile('/workspace/project/file.txt');
+await secureFs.writeFile('/workspace/project/output.txt', data);
+await secureFs.mkdir('/workspace/project/new-dir', { recursive: true });
+```
+
+## Directory Structure
+
+AutoMaker uses the following directory structure:
+
+```
+/project/
+├── .automaker/
+│   ├── features/          # Feature storage
+│   │   └── {featureId}/
+│   │       ├── feature.json
+│   │       └── images/
+│   ├── board/             # Board configuration
+│   ├── context/           # Context files
+│   ├── images/            # Global images
+│   ├── worktrees/         # Git worktrees
+│   ├── app-spec.md        # App specification
+│   └── branch-tracking.json
+```
+
+## Dependencies
+
+- `@automaker/types` - Type definitions
+
+## Used By
+
+- `@automaker/server`
diff --git a/temp_repo/libs/platform/package.json b/temp_repo/libs/platform/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..21729ef93340e228fc89290a1009a344aaa3989d
--- /dev/null
+++ b/temp_repo/libs/platform/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@automaker/platform",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Platform-specific utilities for AutoMaker",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "keywords": [
+    "automaker",
+    "platform"
+  ],
+  "author": "AutoMaker Team",
+  "license": "SEE LICENSE IN LICENSE",
+  "engines": {
+    "node": ">=22.0.0 <23.0.0"
+  },
+  "dependencies": {
+    "@automaker/types": "1.0.0",
+    "p-limit": "6.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.19.3",
+    "typescript": "5.9.3",
+    "vitest": "4.0.16"
+  }
+}
diff --git a/temp_repo/libs/platform/src/config/ports.ts b/temp_repo/libs/platform/src/config/ports.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1089e966b1a8b5963a694fe6107b497e8cc7e31c
--- /dev/null
+++ b/temp_repo/libs/platform/src/config/ports.ts
@@ -0,0 +1,8 @@
+/**
+ * Centralized port configuration for AutoMaker
+ *
+ * Re-exports from @automaker/types for backward compatibility.
+ * The canonical definition is in @automaker/types to allow browser-safe imports.
+ */
+
+export { STATIC_PORT, SERVER_PORT, RESERVED_PORTS } from '@automaker/types';
diff --git a/temp_repo/libs/platform/src/editor.ts b/temp_repo/libs/platform/src/editor.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5fd2a7563ba3b535648c819db812633355755c71
--- /dev/null
+++ b/temp_repo/libs/platform/src/editor.ts
@@ -0,0 +1,449 @@
+/**
+ * Cross-platform editor detection and launching utilities
+ *
+ * Handles:
+ * - Detecting available code editors on the system
+ * - Cross-platform editor launching (handles Windows .cmd files)
+ * - Caching of detected editors for performance
+ */
+
+import { execFile, spawn, type ChildProcess } from 'child_process';
+import { promisify } from 'util';
+import { homedir } from 'os';
+import { join } from 'path';
+import { access } from 'fs/promises';
+import type { EditorInfo } from '@automaker/types';
+const execFileAsync = promisify(execFile);
+
+// Platform detection
+const isWindows = process.platform === 'win32';
+const isMac = process.platform === 'darwin';
+
+/**
+ * Escape a string for safe use in shell commands
+ * Handles paths with spaces, special characters, etc.
+ */
+function escapeShellArg(arg: string): string {
+  // Escape single quotes by ending the quoted string, adding escaped quote, and starting new quoted string
+  return `'${arg.replace(/'/g, "'\\''")}'`;
+}
+
+// Cache with TTL for editor detection
+let cachedEditors: EditorInfo[] | null = null;
+let cacheTimestamp: number = 0;
+const CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes
+
+/**
+ * Check if the editor cache is still valid
+ */
+function isCacheValid(): boolean {
+  return cachedEditors !== null && Date.now() - cacheTimestamp < CACHE_TTL_MS;
+}
+
+/**
+ * Clear the editor detection cache
+ * Useful when editors may have been installed/uninstalled
+ */
+export function clearEditorCache(): void {
+  cachedEditors = null;
+  cacheTimestamp = 0;
+}
+
+/**
+ * Check if a CLI command exists in PATH
+ * Uses platform-specific command lookup (where on Windows, which on Unix)
+ */
+export async function commandExists(cmd: string): Promise<boolean> {
+  try {
+    const whichCmd = isWindows ? 'where' : 'which';
+    await execFileAsync(whichCmd, [cmd]);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if a macOS app bundle exists and return the path if found
+ * Checks both /Applications and ~/Applications
+ */
+async function findMacApp(appName: string): Promise<string | null> {
+  if (!isMac) return null;
+
+  // Check /Applications first
+  const systemAppPath = join('/Applications', `${appName}.app`);
+  try {
+    await access(systemAppPath);
+    return systemAppPath;
+  } catch {
+    // Not in /Applications
+  }
+
+  // Check ~/Applications (used by JetBrains Toolbox and others)
+  const userAppPath = join(homedir(), 'Applications', `${appName}.app`);
+  try {
+    await access(userAppPath);
+    return userAppPath;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Editor definition with CLI command and macOS app bundle name
+ */
+interface EditorDefinition {
+  name: string;
+  cliCommand: string;
+  cliAliases?: readonly string[];
+  macAppName: string;
+  /** If true, only available on macOS */
+  macOnly?: boolean;
+}
+
+const ANTIGRAVITY_CLI_COMMANDS = ['antigravity', 'agy'] as const;
+const [PRIMARY_ANTIGRAVITY_COMMAND, ...LEGACY_ANTIGRAVITY_COMMANDS] = ANTIGRAVITY_CLI_COMMANDS;
+
+/**
+ * List of supported editors in priority order
+ */
+const SUPPORTED_EDITORS: EditorDefinition[] = [
+  { name: 'Cursor', cliCommand: 'cursor', macAppName: 'Cursor' },
+  { name: 'VS Code', cliCommand: 'code', macAppName: 'Visual Studio Code' },
+  {
+    name: 'VS Code Insiders',
+    cliCommand: 'code-insiders',
+    macAppName: 'Visual Studio Code - Insiders',
+  },
+  { name: 'Kiro', cliCommand: 'kiro', macAppName: 'Kiro' },
+  { name: 'Zed', cliCommand: 'zed', macAppName: 'Zed' },
+  { name: 'Sublime Text', cliCommand: 'subl', macAppName: 'Sublime Text' },
+  { name: 'Windsurf', cliCommand: 'windsurf', macAppName: 'Windsurf' },
+  { name: 'Trae', cliCommand: 'trae', macAppName: 'Trae' },
+  { name: 'Rider', cliCommand: 'rider', macAppName: 'Rider' },
+  { name: 'WebStorm', cliCommand: 'webstorm', macAppName: 'WebStorm' },
+  { name: 'Xcode', cliCommand: 'xed', macAppName: 'Xcode', macOnly: true },
+  { name: 'Android Studio', cliCommand: 'studio', macAppName: 'Android Studio' },
+  {
+    name: 'Antigravity',
+    cliCommand: PRIMARY_ANTIGRAVITY_COMMAND,
+    cliAliases: LEGACY_ANTIGRAVITY_COMMANDS,
+    macAppName: 'Antigravity',
+  },
+];
+
+/**
+ * Check if Xcode is fully installed (not just Command Line Tools)
+ * xed command requires full Xcode.app, not just CLT
+ */
+async function isXcodeFullyInstalled(): Promise<boolean> {
+  if (!isMac) return false;
+
+  try {
+    // Check if xcode-select points to full Xcode, not just CommandLineTools
+    const { stdout } = await execFileAsync('xcode-select', ['-p']);
+    const devPath = stdout.trim();
+
+    // Full Xcode path: /Applications/Xcode.app/Contents/Developer
+    // Command Line Tools: /Library/Developer/CommandLineTools
+    const isPointingToXcode = devPath.includes('Xcode.app');
+
+    if (!isPointingToXcode && devPath.includes('CommandLineTools')) {
+      // Check if xed command exists (indicates CLT are installed)
+      const xedExists = await commandExists('xed');
+
+      // Check if Xcode.app actually exists
+      const xcodeAppPath = await findMacApp('Xcode');
+
+      if (xedExists && xcodeAppPath) {
+        console.warn(
+          'Xcode is installed but xcode-select is pointing to Command Line Tools. ' +
+            'To use Xcode as an editor, run: sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer'
+        );
+      }
+    }
+
+    return isPointingToXcode;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Try to find an editor - checks CLI first, then macOS app bundle
+ * Returns EditorInfo if found, null otherwise
+ */
+async function findEditor(definition: EditorDefinition): Promise<EditorInfo | null> {
+  // Skip macOS-only editors on other platforms
+  if (definition.macOnly && !isMac) {
+    return null;
+  }
+
+  // Special handling for Xcode: verify full installation, not just xed command
+  if (definition.name === 'Xcode') {
+    if (!(await isXcodeFullyInstalled())) {
+      return null;
+    }
+  }
+
+  // Try CLI command first (works on all platforms)
+  const cliCandidates = [definition.cliCommand, ...(definition.cliAliases ?? [])];
+  for (const cliCommand of cliCandidates) {
+    if (await commandExists(cliCommand)) {
+      return { name: definition.name, command: cliCommand };
+    }
+  }
+
+  // Try macOS app bundle (checks /Applications and ~/Applications)
+  if (isMac) {
+    const appPath = await findMacApp(definition.macAppName);
+    if (appPath) {
+      // Use 'open -a' with full path for apps not in /Applications
+      return { name: definition.name, command: `open -a "${appPath}"` };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Get the platform-specific file manager
+ */
+function getFileManagerInfo(): EditorInfo {
+  if (isMac) {
+    return { name: 'Finder', command: 'open' };
+  } else if (isWindows) {
+    return { name: 'Explorer', command: 'explorer' };
+  } else {
+    return { name: 'File Manager', command: 'xdg-open' };
+  }
+}
+
+/**
+ * Detect all available code editors on the system
+ * Results are cached for 5 minutes for performance
+ */
+export async function detectAllEditors(): Promise<EditorInfo[]> {
+  // Return cached result if still valid
+  if (isCacheValid() && cachedEditors) {
+    return cachedEditors;
+  }
+
+  // Check all editors in parallel for better performance
+  const editorChecks = SUPPORTED_EDITORS.map((def) => findEditor(def));
+  const results = await Promise.all(editorChecks);
+
+  // Filter out null results (editors not found)
+  const editors = results.filter((e): e is EditorInfo => e !== null);
+
+  // Always add file manager as fallback
+  editors.push(getFileManagerInfo());
+
+  // Update cache
+  cachedEditors = editors;
+  cacheTimestamp = Date.now();
+
+  return editors;
+}
+
+/**
+ * Detect the default (first available) code editor on the system
+ * Returns the highest priority editor that is installed
+ */
+export async function detectDefaultEditor(): Promise<EditorInfo> {
+  const editors = await detectAllEditors();
+  // Return first editor (highest priority) - always exists due to file manager fallback
+  return editors[0];
+}
+
+/**
+ * Find a specific editor by command
+ * Returns the editor info if available, null otherwise
+ */
+export async function findEditorByCommand(command: string): Promise<EditorInfo | null> {
+  const editors = await detectAllEditors();
+  return editors.find((e) => e.command === command) ?? null;
+}
+
+/**
+ * Open a path in the specified editor
+ *
+ * Handles cross-platform differences:
+ * - On Windows, uses spawn with shell:true to handle .cmd batch scripts
+ * - On macOS, handles 'open -a' style commands for app bundles
+ * - On Linux, uses direct execution
+ *
+ * @param targetPath - The file or directory path to open
+ * @param editorCommand - The editor command to use (optional, uses default if not specified)
+ * @returns Promise that resolves with editor info when launched, rejects on error
+ */
+export async function openInEditor(
+  targetPath: string,
+  editorCommand?: string
+): Promise<{ editorName: string }> {
+  // Determine which editor to use
+  let editor: EditorInfo;
+
+  if (editorCommand) {
+    const found = await findEditorByCommand(editorCommand);
+    if (found) {
+      editor = found;
+    } else {
+      // Fall back to default if specified editor not found
+      editor = await detectDefaultEditor();
+    }
+  } else {
+    editor = await detectDefaultEditor();
+  }
+
+  // Execute the editor
+  await executeEditorCommand(editor.command, targetPath);
+
+  return { editorName: editor.name };
+}
+
+/**
+ * Execute an editor command with a path argument
+ * Handles platform-specific differences in command execution
+ */
+async function executeEditorCommand(command: string, targetPath: string): Promise<void> {
+  // Handle 'open -a "AppPath"' style commands (macOS app bundles)
+  if (command.startsWith('open -a ')) {
+    const appPath = command.replace('open -a ', '').replace(/"/g, '');
+    await execFileAsync('open', ['-a', appPath, targetPath]);
+    return;
+  }
+
+  // On Windows, editor CLI commands are typically .cmd batch scripts
+  // spawn with shell:true is required to execute them properly
+  if (isWindows) {
+    return new Promise((resolve, reject) => {
+      const child: ChildProcess = spawn(command, [targetPath], {
+        shell: true,
+        stdio: 'ignore',
+        detached: true,
+      });
+
+      // Unref to allow the parent process to exit independently
+      child.unref();
+
+      child.on('error', (err) => {
+        reject(err);
+      });
+
+      // Resolve after a small delay to catch immediate spawn errors
+      // Editors run in background, so we don't wait for them to exit
+      setTimeout(() => resolve(), 100);
+    });
+  }
+
+  // Unix/macOS: use execFile for direct execution
+  await execFileAsync(command, [targetPath]);
+}
+
+/**
+ * Open a path in the platform's default file manager
+ * Always available as a fallback option
+ */
+export async function openInFileManager(targetPath: string): Promise<{ editorName: string }> {
+  const fileManager = getFileManagerInfo();
+  await execFileAsync(fileManager.command, [targetPath]);
+  return { editorName: fileManager.name };
+}
+
+/**
+ * Open a terminal in the specified directory
+ *
+ * Handles cross-platform differences:
+ * - On macOS, uses Terminal.app via 'open -a Terminal' or AppleScript for directory
+ * - On Windows, uses Windows Terminal (wt) or falls back to cmd
+ * - On Linux, uses x-terminal-emulator or common terminal emulators
+ *
+ * @param targetPath - The directory path to open the terminal in
+ * @returns Promise that resolves with terminal info when launched, rejects on error
+ */
+export async function openInTerminal(targetPath: string): Promise<{ terminalName: string }> {
+  if (isMac) {
+    // Use AppleScript to open Terminal.app in the specified directory
+    const script = `
+      tell application "Terminal"
+        do script "cd ${escapeShellArg(targetPath)}"
+        activate
+      end tell
+    `;
+    await execFileAsync('osascript', ['-e', script]);
+    return { terminalName: 'Terminal' };
+  } else if (isWindows) {
+    // Try Windows Terminal first - check if it exists before trying to spawn
+    const hasWindowsTerminal = await commandExists('wt');
+    if (hasWindowsTerminal) {
+      return await new Promise((resolve, reject) => {
+        const child: ChildProcess = spawn('wt', ['-d', targetPath], {
+          shell: true,
+          stdio: 'ignore',
+          detached: true,
+        });
+        child.unref();
+
+        child.on('error', (err) => {
+          reject(err);
+        });
+
+        setTimeout(() => resolve({ terminalName: 'Windows Terminal' }), 100);
+      });
+    }
+    // Fall back to cmd
+    return await new Promise((resolve, reject) => {
+      const child: ChildProcess = spawn(
+        'cmd',
+        ['/c', 'start', 'cmd', '/k', `cd /d "${targetPath}"`],
+        {
+          shell: true,
+          stdio: 'ignore',
+          detached: true,
+        }
+      );
+      child.unref();
+
+      child.on('error', (err) => {
+        reject(err);
+      });
+
+      setTimeout(() => resolve({ terminalName: 'Command Prompt' }), 100);
+    });
+  } else {
+    // Linux: Try common terminal emulators in order
+    const terminals = [
+      {
+        name: 'GNOME Terminal',
+        command: 'gnome-terminal',
+        args: ['--working-directory', targetPath],
+      },
+      { name: 'Konsole', command: 'konsole', args: ['--workdir', targetPath] },
+      {
+        name: 'xfce4-terminal',
+        command: 'xfce4-terminal',
+        args: ['--working-directory', targetPath],
+      },
+      {
+        name: 'xterm',
+        command: 'xterm',
+        args: ['-e', 'sh', '-c', `cd ${escapeShellArg(targetPath)} && $SHELL`],
+      },
+      {
+        name: 'x-terminal-emulator',
+        command: 'x-terminal-emulator',
+        args: ['--working-directory', targetPath],
+      },
+    ];
+
+    for (const terminal of terminals) {
+      if (await commandExists(terminal.command)) {
+        await execFileAsync(terminal.command, terminal.args);
+        return { terminalName: terminal.name };
+      }
+    }
+
+    throw new Error('No terminal emulator found');
+  }
+}
diff --git a/temp_repo/libs/platform/src/index.ts b/temp_repo/libs/platform/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..31d87febe484cc603062cb5996ecc907a2a5319f
--- /dev/null
+++ b/temp_repo/libs/platform/src/index.ts
@@ -0,0 +1,224 @@
+/**
+ * @automaker/platform
+ * Platform-specific utilities for AutoMaker
+ */
+
+// Path utilities
+export {
+  getAutomakerDir,
+  getFeaturesDir,
+  getFeatureDir,
+  getFeatureImagesDir,
+  getBoardDir,
+  getImagesDir,
+  getContextDir,
+  getWorktreesDir,
+  getValidationsDir,
+  getValidationDir,
+  getValidationPath,
+  getAppSpecPath,
+  getBranchTrackingPath,
+  getExecutionStatePath,
+  getNotificationsPath,
+  // Event history paths
+  getEventHistoryDir,
+  getEventHistoryIndexPath,
+  getEventPath,
+  ensureEventHistoryDir,
+  ensureAutomakerDir,
+  getGlobalSettingsPath,
+  getCredentialsPath,
+  getProjectSettingsPath,
+  ensureDataDir,
+  // Ideation paths
+  getIdeationDir,
+  getIdeasDir,
+  getIdeaDir,
+  getIdeaPath,
+  getIdeaAttachmentsDir,
+  getIdeationSessionsDir,
+  getIdeationSessionPath,
+  getIdeationDraftsDir,
+  getIdeationAnalysisPath,
+  ensureIdeationDir,
+} from './paths.js';
+
+// Subprocess management
+export {
+  spawnJSONLProcess,
+  spawnProcess,
+  type SubprocessOptions,
+  type SubprocessResult,
+} from './subprocess.js';
+
+// Security
+export {
+  PathNotAllowedError,
+  initAllowedPaths,
+  isPathAllowed,
+  validatePath,
+  isPathWithinDirectory,
+  getAllowedRootDirectory,
+  getDataDirectory,
+  getAllowedPaths,
+} from './security.js';
+
+// Secure file system (validates paths before I/O operations)
+export * as secureFs from './secure-fs.js';
+
+// Node.js executable finder (cross-platform)
+export {
+  findNodeExecutable,
+  buildEnhancedPath,
+  type NodeFinderResult,
+  type NodeFinderOptions,
+} from './node-finder.js';
+
+// WSL (Windows Subsystem for Linux) utilities
+export {
+  isWslAvailable,
+  clearWslCache,
+  getDefaultWslDistribution,
+  getWslDistributions,
+  findCliInWsl,
+  execInWsl,
+  createWslCommand,
+  windowsToWslPath,
+  wslToWindowsPath,
+  type WslCliResult,
+  type WslOptions,
+} from './wsl.js';
+
+// System paths for tool detection (GitHub CLI, Claude CLI, Node.js, etc.)
+export * as systemPaths from './system-paths.js';
+export {
+  // CLI tool paths
+  getGitHubCliPaths,
+  getClaudeCliPaths,
+  getClaudeConfigDir,
+  getClaudeCredentialPaths,
+  getClaudeSettingsPath,
+  getClaudeStatsCachePath,
+  getClaudeProjectsDir,
+  getCodexCliPaths,
+  getCodexConfigDir,
+  getCodexAuthPath,
+  getGitBashPaths,
+  getOpenCodeCliPaths,
+  getOpenCodeConfigDir,
+  getOpenCodeAuthPath,
+  getShellPaths,
+  getExtendedPath,
+  // Node.js paths
+  getNvmPaths,
+  getFnmPaths,
+  getNodeSystemPaths,
+  getScoopNodePath,
+  getChocolateyNodePath,
+  getWslVersionPath,
+  // System path operations
+  systemPathExists,
+  systemPathAccess,
+  systemPathIsExecutable,
+  systemPathReadFile,
+  systemPathReadFileSync,
+  systemPathWriteFileSync,
+  systemPathReaddir,
+  systemPathReaddirSync,
+  systemPathStatSync,
+  systemPathStat,
+  isAllowedSystemPath,
+  // High-level methods
+  findFirstExistingPath,
+  findGitHubCliPath,
+  findClaudeCliPath,
+  getClaudeAuthIndicators,
+  type ClaudeAuthIndicators,
+  type FileCheckResult,
+  type DirectoryCheckResult,
+  findCodexCliPath,
+  getCodexAuthIndicators,
+  type CodexAuthIndicators,
+  findGitBashPath,
+  findOpenCodeCliPath,
+  getOpenCodeAuthIndicators,
+  type OpenCodeAuthIndicators,
+  // Electron userData operations
+  setElectronUserDataPath,
+  getElectronUserDataPath,
+  isElectronUserDataPath,
+  electronUserDataReadFileSync,
+  electronUserDataWriteFileSync,
+  electronUserDataExists,
+  // Script directory operations
+  setScriptBaseDir,
+  getScriptBaseDir,
+  scriptDirExists,
+  scriptDirMkdirSync,
+  scriptDirCreateWriteStream,
+  // Electron app bundle operations
+  setElectronAppPaths,
+  electronAppExists,
+  electronAppReadFileSync,
+  electronAppStatSync,
+  electronAppStat,
+  electronAppReadFile,
+} from './system-paths.js';
+
+// Port configuration
+export { STATIC_PORT, SERVER_PORT, RESERVED_PORTS } from './config/ports.js';
+
+// Editor detection and launching (cross-platform)
+export {
+  commandExists,
+  clearEditorCache,
+  detectAllEditors,
+  detectDefaultEditor,
+  findEditorByCommand,
+  openInEditor,
+  openInFileManager,
+  openInTerminal,
+} from './editor.js';
+
+// External terminal detection and launching
+export {
+  clearTerminalCache,
+  detectAllTerminals,
+  detectDefaultTerminal,
+  findTerminalById,
+  openInExternalTerminal,
+} from './terminal.js';
+
+// RC Generator - Shell configuration file generation
+export {
+  hexToXterm256,
+  getThemeANSIColors,
+  generateBashrc,
+  generateZshrc,
+  generateCommonFunctions,
+  generateThemeColors,
+  getShellName,
+  type TerminalConfig,
+  type TerminalTheme,
+  type ANSIColors,
+} from './rc-generator.js';
+
+// RC File Manager - Shell configuration file I/O
+export {
+  RC_FILE_VERSION,
+  getTerminalDir,
+  getThemesDir,
+  getRcFilePath,
+  ensureTerminalDir,
+  checkRcFileVersion,
+  needsRegeneration,
+  writeAllThemeFiles,
+  writeThemeFile,
+  writeRcFiles,
+  ensureRcFilesUpToDate,
+  deleteTerminalDir,
+  ensureUserCustomFile,
+} from './rc-file-manager.js';
+
+// Terminal Theme Colors - Raw theme color data for all 40 themes
+export { terminalThemeColors, getTerminalThemeColors } from './terminal-theme-colors.js';
diff --git a/temp_repo/libs/platform/src/node-finder.ts b/temp_repo/libs/platform/src/node-finder.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cb771a00ac747ab54456e791876b1ecdf077b3e6
--- /dev/null
+++ b/temp_repo/libs/platform/src/node-finder.ts
@@ -0,0 +1,361 @@
+/**
+ * Cross-platform Node.js executable finder
+ *
+ * Handles finding Node.js when the app is launched from desktop environments
+ * (macOS Finder, Windows Explorer, Linux desktop) where PATH may be limited.
+ *
+ * Uses centralized system-paths module for all file system access.
+ */
+
+import { execSync } from 'child_process';
+import path from 'path';
+import os from 'os';
+import {
+  systemPathExists,
+  systemPathIsExecutable,
+  systemPathReaddirSync,
+  systemPathReadFileSync,
+  getNvmPaths,
+  getFnmPaths,
+  getNodeSystemPaths,
+  getScoopNodePath,
+  getChocolateyNodePath,
+  getWslVersionPath,
+} from './system-paths.js';
+
+/** Pattern to match version directories (e.g., "v18.17.0", "18.17.0", "v18") */
+const VERSION_DIR_PATTERN = /^v?\d+/;
+
+/** Pattern to identify pre-release versions (beta, rc, alpha, nightly, canary) */
+const PRE_RELEASE_PATTERN = /-(beta|rc|alpha|nightly|canary|dev|pre)/i;
+
+/** Result of finding Node.js executable */
+export interface NodeFinderResult {
+  /** Path to the Node.js executable */
+  nodePath: string;
+  /** How Node.js was found */
+  source:
+    | 'homebrew'
+    | 'system'
+    | 'nvm'
+    | 'fnm'
+    | 'nvm-windows'
+    | 'program-files'
+    | 'scoop'
+    | 'chocolatey'
+    | 'which'
+    | 'where'
+    | 'fallback';
+}
+
+/** Options for finding Node.js */
+export interface NodeFinderOptions {
+  /** Skip the search and return 'node' immediately (useful for dev mode) */
+  skipSearch?: boolean;
+  /** Custom logger function */
+  logger?: (message: string) => void;
+}
+
+/**
+ * Check if a file exists and is executable
+ * Uses centralized systemPathIsExecutable for path validation
+ */
+function isExecutable(filePath: string): boolean {
+  try {
+    return systemPathIsExecutable(filePath);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Find Node.js executable from version manager directories (NVM, fnm)
+ * Uses semantic version sorting to prefer the latest stable version
+ * Pre-release versions (beta, rc, alpha) are deprioritized but used as fallback
+ */
+function findNodeFromVersionManager(
+  basePath: string,
+  binSubpath: string = 'bin/node'
+): string | null {
+  try {
+    if (!systemPathExists(basePath)) return null;
+  } catch {
+    return null;
+  }
+
+  try {
+    const allVersions = systemPathReaddirSync(basePath)
+      .filter((v) => VERSION_DIR_PATTERN.test(v))
+      // Semantic version sort - newest first using localeCompare with numeric option
+      .sort((a, b) => b.localeCompare(a, undefined, { numeric: true, sensitivity: 'base' }));
+
+    // Separate stable and pre-release versions, preferring stable
+    const stableVersions = allVersions.filter((v) => !PRE_RELEASE_PATTERN.test(v));
+    const preReleaseVersions = allVersions.filter((v) => PRE_RELEASE_PATTERN.test(v));
+
+    // Try stable versions first, then fall back to pre-release
+    for (const version of [...stableVersions, ...preReleaseVersions]) {
+      const nodePath = path.join(basePath, version, binSubpath);
+      if (isExecutable(nodePath)) {
+        return nodePath;
+      }
+    }
+  } catch {
+    // Directory read failed, skip this location
+  }
+
+  return null;
+}
+
+/**
+ * Find Node.js on macOS
+ */
+function findNodeMacOS(_homeDir: string): NodeFinderResult | null {
+  // Check system paths (Homebrew, system)
+  const systemPaths = getNodeSystemPaths();
+  for (const nodePath of systemPaths) {
+    if (isExecutable(nodePath)) {
+      // Determine source based on path
+      if (nodePath.includes('homebrew') || nodePath === '/usr/local/bin/node') {
+        return { nodePath, source: 'homebrew' };
+      }
+      return { nodePath, source: 'system' };
+    }
+  }
+
+  // NVM installation
+  const nvmPaths = getNvmPaths();
+  for (const nvmPath of nvmPaths) {
+    const nvmNode = findNodeFromVersionManager(nvmPath);
+    if (nvmNode) {
+      return { nodePath: nvmNode, source: 'nvm' };
+    }
+  }
+
+  // fnm installation
+  const fnmPaths = getFnmPaths();
+  for (const fnmBasePath of fnmPaths) {
+    const fnmNode = findNodeFromVersionManager(fnmBasePath);
+    if (fnmNode) {
+      return { nodePath: fnmNode, source: 'fnm' };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Find Node.js on Linux
+ */
+function findNodeLinux(_homeDir: string): NodeFinderResult | null {
+  // Check system paths
+  const systemPaths = getNodeSystemPaths();
+  for (const nodePath of systemPaths) {
+    if (isExecutable(nodePath)) {
+      return { nodePath, source: 'system' };
+    }
+  }
+
+  // NVM installation
+  const nvmPaths = getNvmPaths();
+  for (const nvmPath of nvmPaths) {
+    const nvmNode = findNodeFromVersionManager(nvmPath);
+    if (nvmNode) {
+      return { nodePath: nvmNode, source: 'nvm' };
+    }
+  }
+
+  // fnm installation
+  const fnmPaths = getFnmPaths();
+  for (const fnmBasePath of fnmPaths) {
+    const fnmNode = findNodeFromVersionManager(fnmBasePath);
+    if (fnmNode) {
+      return { nodePath: fnmNode, source: 'fnm' };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Find Node.js on Windows
+ */
+function findNodeWindows(_homeDir: string): NodeFinderResult | null {
+  // Program Files paths
+  const systemPaths = getNodeSystemPaths();
+  for (const nodePath of systemPaths) {
+    if (isExecutable(nodePath)) {
+      return { nodePath, source: 'program-files' };
+    }
+  }
+
+  // NVM for Windows
+  const nvmPaths = getNvmPaths();
+  for (const nvmPath of nvmPaths) {
+    const nvmNode = findNodeFromVersionManager(nvmPath, 'node.exe');
+    if (nvmNode) {
+      return { nodePath: nvmNode, source: 'nvm-windows' };
+    }
+  }
+
+  // fnm on Windows
+  const fnmPaths = getFnmPaths();
+  for (const fnmBasePath of fnmPaths) {
+    const fnmNode = findNodeFromVersionManager(fnmBasePath, 'node.exe');
+    if (fnmNode) {
+      return { nodePath: fnmNode, source: 'fnm' };
+    }
+  }
+
+  // Scoop installation
+  const scoopPath = getScoopNodePath();
+  if (isExecutable(scoopPath)) {
+    return { nodePath: scoopPath, source: 'scoop' };
+  }
+
+  // Chocolatey installation
+  const chocoPath = getChocolateyNodePath();
+  if (isExecutable(chocoPath)) {
+    return { nodePath: chocoPath, source: 'chocolatey' };
+  }
+
+  return null;
+}
+
+/**
+ * Try to find Node.js using shell commands (which/where)
+ */
+function findNodeViaShell(
+  platform: NodeJS.Platform,
+  logger: (message: string) => void = () => {}
+): NodeFinderResult | null {
+  try {
+    const command = platform === 'win32' ? 'where node' : 'which node';
+    const result = execSync(command, {
+      encoding: 'utf8',
+      stdio: ['pipe', 'pipe', 'pipe'],
+    }).trim();
+
+    // 'where' on Windows can return multiple lines, take the first
+    const nodePath = result.split(/\r?\n/)[0];
+
+    // Validate path: check for null bytes (security) and executable permission
+    if (nodePath && !nodePath.includes('\x00') && isExecutable(nodePath)) {
+      return {
+        nodePath,
+        source: platform === 'win32' ? 'where' : 'which',
+      };
+    }
+  } catch {
+    // Shell command failed (likely when launched from desktop without PATH)
+    logger('Shell command failed to find Node.js (expected when launched from desktop)');
+  }
+
+  return null;
+}
+
+/**
+ * Find Node.js executable - handles desktop launcher scenarios where PATH is limited
+ *
+ * @param options - Configuration options
+ * @returns Result with path and source information
+ *
+ * @example
+ * ```typescript
+ * import { findNodeExecutable } from '@automaker/platform';
+ *
+ * // In development, skip the search
+ * const result = findNodeExecutable({ skipSearch: isDev });
+ * console.log(`Using Node.js from ${result.source}: ${result.nodePath}`);
+ *
+ * // Spawn a process with the found Node.js
+ * spawn(result.nodePath, ['script.js']);
+ * ```
+ */
+export function findNodeExecutable(options: NodeFinderOptions = {}): NodeFinderResult {
+  const { skipSearch = false, logger = () => {} } = options;
+
+  // Skip search if requested (e.g., in development mode)
+  if (skipSearch) {
+    return { nodePath: 'node', source: 'fallback' };
+  }
+
+  const platform = process.platform;
+  const homeDir = os.homedir();
+
+  // Platform-specific search
+  let result: NodeFinderResult | null = null;
+
+  switch (platform) {
+    case 'darwin':
+      result = findNodeMacOS(homeDir);
+      break;
+    case 'linux':
+      result = findNodeLinux(homeDir);
+      break;
+    case 'win32':
+      result = findNodeWindows(homeDir);
+      break;
+  }
+
+  if (result) {
+    logger(`Found Node.js via ${result.source} at: ${result.nodePath}`);
+    return result;
+  }
+
+  // Fallback - try shell resolution (works when launched from terminal)
+  result = findNodeViaShell(platform, logger);
+  if (result) {
+    logger(`Found Node.js via ${result.source} at: ${result.nodePath}`);
+    return result;
+  }
+
+  // Ultimate fallback
+  logger('Could not find Node.js, falling back to "node"');
+  return { nodePath: 'node', source: 'fallback' };
+}
+
+/**
+ * Build an enhanced PATH that includes the Node.js directory
+ * Useful for ensuring child processes can find Node.js
+ *
+ * @param nodePath - Path to the Node.js executable
+ * @param currentPath - Current PATH environment variable
+ * @returns Enhanced PATH with Node.js directory prepended if not already present
+ *
+ * @example
+ * ```typescript
+ * import { findNodeExecutable, buildEnhancedPath } from '@automaker/platform';
+ *
+ * const { nodePath } = findNodeExecutable();
+ * const enhancedPath = buildEnhancedPath(nodePath, process.env.PATH);
+ *
+ * spawn(nodePath, ['script.js'], {
+ *   env: { ...process.env, PATH: enhancedPath }
+ * });
+ * ```
+ */
+export function buildEnhancedPath(nodePath: string, currentPath: string = ''): string {
+  // If using fallback 'node', don't modify PATH
+  if (nodePath === 'node') {
+    return currentPath;
+  }
+
+  const nodeDir = path.dirname(nodePath);
+
+  // Don't add if already present or if it's just '.'
+  // Use path segment matching to avoid false positives (e.g., /opt/node vs /opt/node-v18)
+  // Normalize paths for comparison to handle mixed separators on Windows
+  const normalizedNodeDir = path.normalize(nodeDir);
+  const pathSegments = currentPath.split(path.delimiter).map((s) => path.normalize(s));
+  if (normalizedNodeDir === '.' || pathSegments.includes(normalizedNodeDir)) {
+    return currentPath;
+  }
+
+  // Use platform-appropriate path separator
+  // Handle empty currentPath without adding trailing delimiter
+  if (!currentPath) {
+    return nodeDir;
+  }
+  return `${nodeDir}${path.delimiter}${currentPath}`;
+}
diff --git a/temp_repo/libs/platform/src/paths.ts b/temp_repo/libs/platform/src/paths.ts
new file mode 100644
index 0000000000000000000000000000000000000000..130f54e0501098162c2b4594bc8e0ebbe7dd92f7
--- /dev/null
+++ b/temp_repo/libs/platform/src/paths.ts
@@ -0,0 +1,461 @@
+/**
+ * Automaker Paths - Utilities for managing automaker data storage
+ *
+ * Provides functions to construct paths for:
+ * - Project-level data stored in {projectPath}/.automaker/
+ * - Global user data stored in app userData directory
+ *
+ * All returned paths are absolute and ready to use with fs module.
+ * Directory creation is handled separately by ensure* functions.
+ */
+
+import * as secureFs from './secure-fs.js';
+import path from 'path';
+
+/**
+ * Get the automaker data directory root for a project
+ *
+ * All project-specific automaker data is stored under {projectPath}/.automaker/
+ * This directory is created when needed via ensureAutomakerDir().
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker
+ */
+export function getAutomakerDir(projectPath: string): string {
+  return path.join(projectPath, '.automaker');
+}
+
+/**
+ * Get the features directory for a project
+ *
+ * Contains subdirectories for each feature, keyed by featureId.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/features
+ */
+export function getFeaturesDir(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), 'features');
+}
+
+/**
+ * Get the directory for a specific feature
+ *
+ * Contains feature-specific data like generated code, tests, and logs.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @param featureId - Feature identifier
+ * @returns Absolute path to {projectPath}/.automaker/features/{featureId}
+ */
+export function getFeatureDir(projectPath: string, featureId: string): string {
+  return path.join(getFeaturesDir(projectPath), featureId);
+}
+
+/**
+ * Get the images directory for a feature
+ *
+ * Stores screenshots, diagrams, or other images related to the feature.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @param featureId - Feature identifier
+ * @returns Absolute path to {projectPath}/.automaker/features/{featureId}/images
+ */
+export function getFeatureImagesDir(projectPath: string, featureId: string): string {
+  return path.join(getFeatureDir(projectPath, featureId), 'images');
+}
+
+/**
+ * Get the board directory for a project
+ *
+ * Contains board-related data like background images and customization files.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/board
+ */
+export function getBoardDir(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), 'board');
+}
+
+/**
+ * Get the general images directory for a project
+ *
+ * Stores project-level images like background images or shared assets.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/images
+ */
+export function getImagesDir(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), 'images');
+}
+
+/**
+ * Get the context files directory for a project
+ *
+ * Stores user-uploaded context files for reference during generation.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/context
+ */
+export function getContextDir(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), 'context');
+}
+
+/**
+ * Get the worktrees metadata directory for a project
+ *
+ * Stores information about git worktrees associated with the project.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/worktrees
+ */
+export function getWorktreesDir(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), 'worktrees');
+}
+
+/**
+ * Get the validations directory for a project
+ *
+ * Stores GitHub issue validation results, organized by issue number.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/validations
+ */
+export function getValidationsDir(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), 'validations');
+}
+
+/**
+ * Get the directory for a specific issue validation
+ *
+ * Contains validation result and metadata for a GitHub issue.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @param issueNumber - GitHub issue number
+ * @returns Absolute path to {projectPath}/.automaker/validations/{issueNumber}
+ */
+export function getValidationDir(projectPath: string, issueNumber: number): string {
+  return path.join(getValidationsDir(projectPath), String(issueNumber));
+}
+
+/**
+ * Get the validation result file path for a GitHub issue
+ *
+ * Stores the JSON validation result including verdict, analysis, and metadata.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @param issueNumber - GitHub issue number
+ * @returns Absolute path to {projectPath}/.automaker/validations/{issueNumber}/validation.json
+ */
+export function getValidationPath(projectPath: string, issueNumber: number): string {
+  return path.join(getValidationDir(projectPath, issueNumber), 'validation.json');
+}
+
+/**
+ * Get the app spec file path for a project
+ *
+ * Stores the application specification document used for generation.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/app_spec.txt
+ */
+export function getAppSpecPath(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), 'app_spec.txt');
+}
+
+/**
+ * Get the notifications file path for a project
+ *
+ * Stores project-level notifications for feature status changes and operation completions.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/notifications.json
+ */
+export function getNotificationsPath(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), 'notifications.json');
+}
+
+/**
+ * Get the branch tracking file path for a project
+ *
+ * Stores JSON metadata about active git branches and worktrees.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/active-branches.json
+ */
+export function getBranchTrackingPath(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), 'active-branches.json');
+}
+
+/**
+ * Get the execution state file path for a project
+ *
+ * Stores JSON metadata about auto-mode execution state for recovery on restart.
+ * Tracks which features were running and auto-loop configuration.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/execution-state.json
+ */
+export function getExecutionStatePath(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), 'execution-state.json');
+}
+
+/**
+ * Create the automaker directory structure for a project if it doesn't exist
+ *
+ * Creates {projectPath}/.automaker with all subdirectories recursively.
+ * Safe to call multiple times - uses recursive: true.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Promise resolving to the created automaker directory path
+ */
+export async function ensureAutomakerDir(projectPath: string): Promise<string> {
+  const automakerDir = getAutomakerDir(projectPath);
+  await secureFs.mkdir(automakerDir, { recursive: true });
+  return automakerDir;
+}
+
+// ============================================================================
+// Ideation Paths
+// ============================================================================
+
+/**
+ * Get the ideation directory for a project
+ *
+ * Contains ideas, sessions, and drafts for brainstorming.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/ideation
+ */
+export function getIdeationDir(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), 'ideation');
+}
+
+/**
+ * Get the ideas directory for a project
+ *
+ * Contains subdirectories for each idea, keyed by ideaId.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/ideation/ideas
+ */
+export function getIdeasDir(projectPath: string): string {
+  return path.join(getIdeationDir(projectPath), 'ideas');
+}
+
+/**
+ * Get the directory for a specific idea
+ *
+ * Contains idea metadata and attachments.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @param ideaId - Idea identifier
+ * @returns Absolute path to {projectPath}/.automaker/ideation/ideas/{ideaId}
+ */
+export function getIdeaDir(projectPath: string, ideaId: string): string {
+  return path.join(getIdeasDir(projectPath), ideaId);
+}
+
+/**
+ * Get the idea metadata file path
+ *
+ * Stores the idea JSON data.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @param ideaId - Idea identifier
+ * @returns Absolute path to {projectPath}/.automaker/ideation/ideas/{ideaId}/idea.json
+ */
+export function getIdeaPath(projectPath: string, ideaId: string): string {
+  return path.join(getIdeaDir(projectPath, ideaId), 'idea.json');
+}
+
+/**
+ * Get the idea attachments directory
+ *
+ * Stores images and other attachments for an idea.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @param ideaId - Idea identifier
+ * @returns Absolute path to {projectPath}/.automaker/ideation/ideas/{ideaId}/attachments
+ */
+export function getIdeaAttachmentsDir(projectPath: string, ideaId: string): string {
+  return path.join(getIdeaDir(projectPath, ideaId), 'attachments');
+}
+
+/**
+ * Get the ideation sessions directory for a project
+ *
+ * Contains conversation history for ideation sessions.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/ideation/sessions
+ */
+export function getIdeationSessionsDir(projectPath: string): string {
+  return path.join(getIdeationDir(projectPath), 'sessions');
+}
+
+/**
+ * Get the session file path for an ideation session
+ *
+ * Stores the session messages and metadata.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @param sessionId - Session identifier
+ * @returns Absolute path to {projectPath}/.automaker/ideation/sessions/{sessionId}.json
+ */
+export function getIdeationSessionPath(projectPath: string, sessionId: string): string {
+  return path.join(getIdeationSessionsDir(projectPath), `${sessionId}.json`);
+}
+
+/**
+ * Get the ideation drafts directory for a project
+ *
+ * Stores unsaved conversation drafts.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/ideation/drafts
+ */
+export function getIdeationDraftsDir(projectPath: string): string {
+  return path.join(getIdeationDir(projectPath), 'drafts');
+}
+
+/**
+ * Get the project analysis result file path
+ *
+ * Stores the cached project analysis result.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/ideation/analysis.json
+ */
+export function getIdeationAnalysisPath(projectPath: string): string {
+  return path.join(getIdeationDir(projectPath), 'analysis.json');
+}
+
+/**
+ * Create the ideation directory structure for a project if it doesn't exist
+ *
+ * Creates {projectPath}/.automaker/ideation with all subdirectories.
+ * Safe to call multiple times - uses recursive: true.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Promise resolving to the created ideation directory path
+ */
+export async function ensureIdeationDir(projectPath: string): Promise<string> {
+  const ideationDir = getIdeationDir(projectPath);
+  await secureFs.mkdir(ideationDir, { recursive: true });
+  await secureFs.mkdir(getIdeasDir(projectPath), { recursive: true });
+  await secureFs.mkdir(getIdeationSessionsDir(projectPath), { recursive: true });
+  await secureFs.mkdir(getIdeationDraftsDir(projectPath), { recursive: true });
+  return ideationDir;
+}
+
+// ============================================================================
+// Event History Paths
+// ============================================================================
+
+/**
+ * Get the event history directory for a project
+ *
+ * Contains stored event records for debugging and replay.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/events
+ */
+export function getEventHistoryDir(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), 'events');
+}
+
+/**
+ * Get the event history index file path
+ *
+ * Stores an index of all events for quick listing without scanning directory.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/events/index.json
+ */
+export function getEventHistoryIndexPath(projectPath: string): string {
+  return path.join(getEventHistoryDir(projectPath), 'index.json');
+}
+
+/**
+ * Get the file path for a specific event
+ *
+ * @param projectPath - Absolute path to project directory
+ * @param eventId - Event identifier
+ * @returns Absolute path to {projectPath}/.automaker/events/{eventId}.json
+ */
+export function getEventPath(projectPath: string, eventId: string): string {
+  return path.join(getEventHistoryDir(projectPath), `${eventId}.json`);
+}
+
+/**
+ * Create the event history directory for a project if it doesn't exist
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Promise resolving to the created events directory path
+ */
+export async function ensureEventHistoryDir(projectPath: string): Promise<string> {
+  const eventsDir = getEventHistoryDir(projectPath);
+  await secureFs.mkdir(eventsDir, { recursive: true });
+  return eventsDir;
+}
+
+// ============================================================================
+// Global Settings Paths (stored in DATA_DIR from app.getPath('userData'))
+// ============================================================================
+
+/**
+ * Get the global settings file path
+ *
+ * Stores user preferences, keyboard shortcuts, AI profiles, and project history.
+ * Located in the platform-specific userData directory.
+ *
+ * Default locations:
+ * - macOS: ~/Library/Application Support/automaker
+ * - Windows: %APPDATA%\automaker
+ * - Linux: ~/.config/automaker
+ *
+ * @param dataDir - User data directory (from app.getPath('userData'))
+ * @returns Absolute path to {dataDir}/settings.json
+ */
+export function getGlobalSettingsPath(dataDir: string): string {
+  return path.join(dataDir, 'settings.json');
+}
+
+/**
+ * Get the credentials file path
+ *
+ * Stores sensitive API keys separately from other settings for security.
+ * Located in the platform-specific userData directory.
+ *
+ * @param dataDir - User data directory (from app.getPath('userData'))
+ * @returns Absolute path to {dataDir}/credentials.json
+ */
+export function getCredentialsPath(dataDir: string): string {
+  return path.join(dataDir, 'credentials.json');
+}
+
+/**
+ * Get the project settings file path
+ *
+ * Stores project-specific settings that override global settings.
+ * Located within the project's .automaker directory.
+ *
+ * @param projectPath - Absolute path to project directory
+ * @returns Absolute path to {projectPath}/.automaker/settings.json
+ */
+export function getProjectSettingsPath(projectPath: string): string {
+  return path.join(getAutomakerDir(projectPath), 'settings.json');
+}
+
+/**
+ * Create the global data directory if it doesn't exist
+ *
+ * Creates the userData directory for storing global settings and credentials.
+ * Safe to call multiple times - uses recursive: true.
+ *
+ * @param dataDir - User data directory path to create
+ * @returns Promise resolving to the created data directory path
+ */
+export async function ensureDataDir(dataDir: string): Promise<string> {
+  await secureFs.mkdir(dataDir, { recursive: true });
+  return dataDir;
+}
diff --git a/temp_repo/libs/platform/src/rc-file-manager.ts b/temp_repo/libs/platform/src/rc-file-manager.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7115879fdf2c9850e359f73bb4fe5fe182c937f5
--- /dev/null
+++ b/temp_repo/libs/platform/src/rc-file-manager.ts
@@ -0,0 +1,308 @@
+/**
+ * RC File Manager - Manage shell configuration files in .automaker/terminal/
+ *
+ * This module handles file I/O operations for generating and managing shell RC files,
+ * including version checking and regeneration logic.
+ */
+
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+import { createHash } from 'node:crypto';
+import type { ThemeMode } from '@automaker/types';
+import {
+  generateBashrc,
+  generateZshrc,
+  generateCommonFunctions,
+  generateThemeColors,
+  type TerminalConfig,
+  type TerminalTheme,
+} from './rc-generator.js';
+
+/**
+ * Current RC file format version
+ */
+export const RC_FILE_VERSION = 11;
+
+const RC_SIGNATURE_FILENAME = 'config.sha256';
+
+/**
+ * Get the terminal directory path
+ */
+export function getTerminalDir(projectPath: string): string {
+  return path.join(projectPath, '.automaker', 'terminal');
+}
+
+/**
+ * Get the themes directory path
+ */
+export function getThemesDir(projectPath: string): string {
+  return path.join(getTerminalDir(projectPath), 'themes');
+}
+
+/**
+ * Get RC file path for specific shell
+ */
+export function getRcFilePath(projectPath: string, shell: 'bash' | 'zsh' | 'sh'): string {
+  const terminalDir = getTerminalDir(projectPath);
+  switch (shell) {
+    case 'bash':
+      return path.join(terminalDir, 'bashrc.sh');
+    case 'zsh':
+      return path.join(terminalDir, '.zshrc'); // Zsh looks for .zshrc in ZDOTDIR
+    case 'sh':
+      return path.join(terminalDir, 'common.sh');
+  }
+}
+
+/**
+ * Ensure terminal directory exists
+ */
+export async function ensureTerminalDir(projectPath: string): Promise<void> {
+  const terminalDir = getTerminalDir(projectPath);
+  const themesDir = getThemesDir(projectPath);
+
+  await fs.mkdir(terminalDir, { recursive: true, mode: 0o755 });
+  await fs.mkdir(themesDir, { recursive: true, mode: 0o755 });
+}
+
+/**
+ * Write RC file with atomic write (write to temp, then rename)
+ */
+async function atomicWriteFile(
+  filePath: string,
+  content: string,
+  mode: number = 0o644
+): Promise<void> {
+  const tempPath = `${filePath}.tmp`;
+  await fs.writeFile(tempPath, content, { encoding: 'utf8', mode });
+  await fs.rename(tempPath, filePath);
+}
+
+function sortObjectKeys(value: unknown): unknown {
+  if (Array.isArray(value)) {
+    return value.map((item) => sortObjectKeys(item));
+  }
+
+  if (value && typeof value === 'object') {
+    const sortedEntries = Object.entries(value as Record<string, unknown>)
+      .filter(([, entryValue]) => entryValue !== undefined)
+      .sort(([left], [right]) => left.localeCompare(right));
+
+    const sortedObject: Record<string, unknown> = {};
+    for (const [key, entryValue] of sortedEntries) {
+      sortedObject[key] = sortObjectKeys(entryValue);
+    }
+    return sortedObject;
+  }
+
+  return value;
+}
+
+function buildConfigSignature(theme: ThemeMode, config: TerminalConfig): string {
+  const payload = { theme, config: sortObjectKeys(config) };
+  const serializedPayload = JSON.stringify(payload);
+  return createHash('sha256').update(serializedPayload).digest('hex');
+}
+
+async function readSignatureFile(projectPath: string): Promise<string | null> {
+  const signaturePath = path.join(getTerminalDir(projectPath), RC_SIGNATURE_FILENAME);
+  try {
+    const signature = await fs.readFile(signaturePath, 'utf8');
+    return signature.trim() || null;
+  } catch {
+    return null;
+  }
+}
+
+async function writeSignatureFile(projectPath: string, signature: string): Promise<void> {
+  const signaturePath = path.join(getTerminalDir(projectPath), RC_SIGNATURE_FILENAME);
+  await atomicWriteFile(signaturePath, `${signature}\n`, 0o644);
+}
+
+/**
+ * Check current RC file version
+ */
+export async function checkRcFileVersion(projectPath: string): Promise<number | null> {
+  const versionPath = path.join(getTerminalDir(projectPath), 'version.txt');
+  try {
+    const content = await fs.readFile(versionPath, 'utf8');
+    const version = parseInt(content.trim(), 10);
+    return isNaN(version) ? null : version;
+  } catch (error) {
+    return null; // File doesn't exist or can't be read
+  }
+}
+
+/**
+ * Write version file
+ */
+async function writeVersionFile(projectPath: string, version: number): Promise<void> {
+  const versionPath = path.join(getTerminalDir(projectPath), 'version.txt');
+  await atomicWriteFile(versionPath, `${version}\n`, 0o644);
+}
+
+/**
+ * Check if RC files need regeneration
+ */
+export async function needsRegeneration(
+  projectPath: string,
+  theme: ThemeMode,
+  config: TerminalConfig
+): Promise<boolean> {
+  const currentVersion = await checkRcFileVersion(projectPath);
+
+  // Regenerate if version doesn't match or files don't exist
+  if (currentVersion !== RC_FILE_VERSION) {
+    return true;
+  }
+
+  const expectedSignature = buildConfigSignature(theme, config);
+  const existingSignature = await readSignatureFile(projectPath);
+  if (!existingSignature || existingSignature !== expectedSignature) {
+    return true;
+  }
+
+  // Check if critical files exist
+  const bashrcPath = getRcFilePath(projectPath, 'bash');
+  const zshrcPath = getRcFilePath(projectPath, 'zsh');
+  const commonPath = path.join(getTerminalDir(projectPath), 'common.sh');
+  const themeFilePath = path.join(getThemesDir(projectPath), `${theme}.sh`);
+
+  try {
+    await Promise.all([
+      fs.access(bashrcPath),
+      fs.access(zshrcPath),
+      fs.access(commonPath),
+      fs.access(themeFilePath),
+    ]);
+    return false; // All files exist
+  } catch {
+    return true; // Some files are missing
+  }
+}
+
+/**
+ * Write all theme color files (all 40 themes)
+ */
+export async function writeAllThemeFiles(
+  projectPath: string,
+  terminalThemes: Record<ThemeMode, TerminalTheme>
+): Promise<void> {
+  const themesDir = getThemesDir(projectPath);
+  await fs.mkdir(themesDir, { recursive: true, mode: 0o755 });
+
+  const themeEntries = Object.entries(terminalThemes);
+  await Promise.all(
+    themeEntries.map(async ([themeName, theme]) => {
+      const themeFilePath = path.join(themesDir, `${themeName}.sh`);
+      const content = generateThemeColors(theme);
+      await atomicWriteFile(themeFilePath, content, 0o644);
+    })
+  );
+}
+
+/**
+ * Write a single theme color file
+ */
+export async function writeThemeFile(
+  projectPath: string,
+  theme: ThemeMode,
+  themeColors: TerminalTheme
+): Promise<void> {
+  const themesDir = getThemesDir(projectPath);
+  await fs.mkdir(themesDir, { recursive: true, mode: 0o755 });
+
+  const themeFilePath = path.join(themesDir, `${theme}.sh`);
+  const content = generateThemeColors(themeColors);
+  await atomicWriteFile(themeFilePath, content, 0o644);
+}
+
+/**
+ * Write all RC files
+ */
+export async function writeRcFiles(
+  projectPath: string,
+  theme: ThemeMode,
+  config: TerminalConfig,
+  themeColors: TerminalTheme,
+  allThemes: Record<ThemeMode, TerminalTheme>
+): Promise<void> {
+  await ensureTerminalDir(projectPath);
+
+  // Write common functions file
+  const commonPath = path.join(getTerminalDir(projectPath), 'common.sh');
+  const commonContent = generateCommonFunctions(config);
+  await atomicWriteFile(commonPath, commonContent, 0o644);
+
+  // Write bashrc
+  const bashrcPath = getRcFilePath(projectPath, 'bash');
+  const bashrcContent = generateBashrc(themeColors, config);
+  await atomicWriteFile(bashrcPath, bashrcContent, 0o644);
+
+  // Write zshrc
+  const zshrcPath = getRcFilePath(projectPath, 'zsh');
+  const zshrcContent = generateZshrc(themeColors, config);
+  await atomicWriteFile(zshrcPath, zshrcContent, 0o644);
+
+  // Write all theme files (40 themes)
+  await writeAllThemeFiles(projectPath, allThemes);
+
+  // Write version file
+  await writeVersionFile(projectPath, RC_FILE_VERSION);
+
+  // Write config signature for change detection
+  const signature = buildConfigSignature(theme, config);
+  await writeSignatureFile(projectPath, signature);
+}
+
+/**
+ * Ensure RC files are up to date
+ */
+export async function ensureRcFilesUpToDate(
+  projectPath: string,
+  theme: ThemeMode,
+  config: TerminalConfig,
+  themeColors: TerminalTheme,
+  allThemes: Record<ThemeMode, TerminalTheme>
+): Promise<void> {
+  const needsRegen = await needsRegeneration(projectPath, theme, config);
+  if (needsRegen) {
+    await writeRcFiles(projectPath, theme, config, themeColors, allThemes);
+  }
+}
+
+/**
+ * Delete terminal directory (for disable flow)
+ */
+export async function deleteTerminalDir(projectPath: string): Promise<void> {
+  const terminalDir = getTerminalDir(projectPath);
+  try {
+    await fs.rm(terminalDir, { recursive: true, force: true });
+  } catch (error) {
+    // Ignore errors if directory doesn't exist
+  }
+}
+
+/**
+ * Create user-custom.sh placeholder if it doesn't exist
+ */
+export async function ensureUserCustomFile(projectPath: string): Promise<void> {
+  const userCustomPath = path.join(getTerminalDir(projectPath), 'user-custom.sh');
+  try {
+    await fs.access(userCustomPath);
+  } catch {
+    // File doesn't exist, create it
+    const content = `#!/bin/sh
+# Automaker User Customizations
+# Add your custom shell configuration here
+# This file will not be overwritten by Automaker
+
+# Example: Add custom aliases
+# alias myalias='command'
+
+# Example: Add custom environment variables
+# export MY_VAR="value"
+`;
+    await atomicWriteFile(userCustomPath, content, 0o644);
+  }
+}
diff --git a/temp_repo/libs/platform/src/rc-generator.ts b/temp_repo/libs/platform/src/rc-generator.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7c326590e3b40e72850c13f599a91c8e4caed1a4
--- /dev/null
+++ b/temp_repo/libs/platform/src/rc-generator.ts
@@ -0,0 +1,972 @@
+/**
+ * RC Generator - Generate shell configuration files for custom terminal prompts
+ *
+ * This module generates bash/zsh/sh configuration files that sync with Automaker's themes,
+ * providing custom prompts with theme-matched colors while preserving user's existing RC files.
+ */
+
+import type { ThemeMode } from '@automaker/types';
+
+/**
+ * Terminal configuration options
+ */
+export interface TerminalConfig {
+  enabled: boolean;
+  customPrompt: boolean;
+  promptFormat: 'standard' | 'minimal' | 'powerline' | 'starship';
+  showGitBranch: boolean;
+  showGitStatus: boolean;
+  showUserHost: boolean;
+  showPath: boolean;
+  pathStyle: 'full' | 'short' | 'basename';
+  pathDepth: number;
+  showTime: boolean;
+  showExitStatus: boolean;
+  customAliases: string;
+  customEnvVars: Record<string, string>;
+  rcFileVersion?: number;
+}
+
+/**
+ * Terminal theme colors (hex values)
+ */
+export interface TerminalTheme {
+  background: string;
+  foreground: string;
+  cursor: string;
+  cursorAccent: string;
+  selectionBackground: string;
+  selectionForeground?: string;
+  black: string;
+  red: string;
+  green: string;
+  yellow: string;
+  blue: string;
+  magenta: string;
+  cyan: string;
+  white: string;
+  brightBlack: string;
+  brightRed: string;
+  brightGreen: string;
+  brightYellow: string;
+  brightBlue: string;
+  brightMagenta: string;
+  brightCyan: string;
+  brightWhite: string;
+}
+
+/**
+ * ANSI color codes for shell prompts
+ */
+export interface ANSIColors {
+  user: string;
+  host: string;
+  path: string;
+  gitBranch: string;
+  gitDirty: string;
+  prompt: string;
+  reset: string;
+}
+
+const STARTUP_COLOR_PRIMARY = 51;
+const STARTUP_COLOR_SECONDARY = 39;
+const STARTUP_COLOR_ACCENT = 33;
+const DEFAULT_PATH_DEPTH = 0;
+const DEFAULT_PATH_STYLE: TerminalConfig['pathStyle'] = 'full';
+const OMP_THEME_ENV_VAR = 'AUTOMAKER_OMP_THEME';
+const OMP_BINARY = 'oh-my-posh';
+const OMP_SHELL_BASH = 'bash';
+const OMP_SHELL_ZSH = 'zsh';
+
+/**
+ * Convert hex color to RGB
+ */
+function hexToRgb(hex: string): { r: number; g: number; b: number } {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) {
+    throw new Error(`Invalid hex color: ${hex}`);
+  }
+  return {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16),
+  };
+}
+
+/**
+ * Calculate Euclidean distance between two RGB colors
+ */
+function colorDistance(
+  c1: { r: number; g: number; b: number },
+  c2: { r: number; g: number; b: number }
+): number {
+  return Math.sqrt(Math.pow(c1.r - c2.r, 2) + Math.pow(c1.g - c2.g, 2) + Math.pow(c1.b - c2.b, 2));
+}
+
+/**
+ * xterm-256 color palette (simplified - standard colors + 6x6x6 RGB cube + grayscale)
+ */
+const XTERM_256_PALETTE: Array<{ r: number; g: number; b: number }> = [];
+
+// Standard colors (0-15) - already handled by ANSI basic colors
+// RGB cube (16-231): 6x6x6 cube with levels 0, 95, 135, 175, 215, 255
+const levels = [0, 95, 135, 175, 215, 255];
+for (let r = 0; r < 6; r++) {
+  for (let g = 0; g < 6; g++) {
+    for (let b = 0; b < 6; b++) {
+      XTERM_256_PALETTE.push({ r: levels[r], g: levels[g], b: levels[b] });
+    }
+  }
+}
+
+// Grayscale (232-255): 24 shades from #080808 to #eeeeee
+for (let i = 0; i < 24; i++) {
+  const gray = 8 + i * 10;
+  XTERM_256_PALETTE.push({ r: gray, g: gray, b: gray });
+}
+
+/**
+ * Convert hex color to closest xterm-256 color code
+ */
+export function hexToXterm256(hex: string): number {
+  const rgb = hexToRgb(hex);
+  let closestIndex = 16; // Start from RGB cube
+  let minDistance = Infinity;
+
+  XTERM_256_PALETTE.forEach((color, index) => {
+    const distance = colorDistance(rgb, color);
+    if (distance < minDistance) {
+      minDistance = distance;
+      closestIndex = index + 16; // Offset by 16 (standard colors)
+    }
+  });
+
+  return closestIndex;
+}
+
+/**
+ * Get ANSI color codes from theme colors
+ */
+export function getThemeANSIColors(theme: TerminalTheme): ANSIColors {
+  return {
+    user: `\\[\\e[38;5;${hexToXterm256(theme.cyan)}m\\]`,
+    host: `\\[\\e[38;5;${hexToXterm256(theme.blue)}m\\]`,
+    path: `\\[\\e[38;5;${hexToXterm256(theme.yellow)}m\\]`,
+    gitBranch: `\\[\\e[38;5;${hexToXterm256(theme.magenta)}m\\]`,
+    gitDirty: `\\[\\e[38;5;${hexToXterm256(theme.red)}m\\]`,
+    prompt: `\\[\\e[38;5;${hexToXterm256(theme.green)}m\\]`,
+    reset: '\\[\\e[0m\\]',
+  };
+}
+
+/**
+ * Escape shell special characters in user input
+ */
+function shellEscape(str: string): string {
+  return str.replace(/([`$\\"])/g, '\\$1');
+}
+
+/**
+ * Validate environment variable name
+ */
+function isValidEnvVarName(name: string): boolean {
+  return /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(name);
+}
+
+function stripPromptEscapes(ansiColor: string): string {
+  return ansiColor.replace(/\\\[/g, '').replace(/\\\]/g, '');
+}
+
+function normalizePathStyle(
+  pathStyle: TerminalConfig['pathStyle'] | undefined
+): TerminalConfig['pathStyle'] {
+  if (pathStyle === 'short' || pathStyle === 'basename') {
+    return pathStyle;
+  }
+  return DEFAULT_PATH_STYLE;
+}
+
+function normalizePathDepth(pathDepth: number | undefined): number {
+  const depth =
+    typeof pathDepth === 'number' && Number.isFinite(pathDepth) ? pathDepth : DEFAULT_PATH_DEPTH;
+  return Math.max(DEFAULT_PATH_DEPTH, Math.floor(depth));
+}
+
+function generateOhMyPoshInit(
+  shell: typeof OMP_SHELL_BASH | typeof OMP_SHELL_ZSH,
+  fallback: string
+) {
+  const themeVar = `$${OMP_THEME_ENV_VAR}`;
+  const initCommand = `${OMP_BINARY} init ${shell} --config`;
+  return `if [ -n "${themeVar}" ] && command -v ${OMP_BINARY} >/dev/null 2>&1; then
+    automaker_omp_theme="$(automaker_resolve_omp_theme)"
+    if [ -n "$automaker_omp_theme" ]; then
+        eval "$(${initCommand} "$automaker_omp_theme")"
+    else
+        ${fallback}
+    fi
+else
+    ${fallback}
+fi`;
+}
+
+/**
+ * Generate common shell functions (git prompt, etc.)
+ */
+export function generateCommonFunctions(config: TerminalConfig): string {
+  const gitPrompt = config.showGitBranch
+    ? `
+automaker_git_prompt() {
+  local branch=""
+  local dirty=""
+
+  # Check if we're in a git repository
+  if git rev-parse --git-dir > /dev/null 2>&1; then
+    # Get current branch name
+    branch=$(git symbolic-ref --short HEAD 2>/dev/null || git rev-parse --short HEAD 2>/dev/null)
+
+    ${
+      config.showGitStatus
+        ? `
+    # Check if working directory is dirty
+    if [ -n "$(git status --porcelain 2>/dev/null)" ]; then
+      dirty="*"
+    fi
+    `
+        : ''
+    }
+
+    if [ -n "$branch" ]; then
+      echo -n " ($branch$dirty)"
+    fi
+  fi
+}
+`
+    : `
+automaker_git_prompt() {
+  # Git prompt disabled
+  echo -n ""
+}
+`;
+
+  return `#!/bin/sh
+# Automaker Terminal Configuration - Common Functions v1.0
+
+${gitPrompt}
+
+AUTOMAKER_INFO_UNKNOWN="Unknown"
+AUTOMAKER_BANNER_LABEL_WIDTH=12
+AUTOMAKER_BYTES_PER_KIB=1024
+AUTOMAKER_KIB_PER_MIB=1024
+AUTOMAKER_MIB_PER_GIB=1024
+AUTOMAKER_COLOR_PRIMARY="\\033[38;5;${STARTUP_COLOR_PRIMARY}m"
+AUTOMAKER_COLOR_SECONDARY="\\033[38;5;${STARTUP_COLOR_SECONDARY}m"
+AUTOMAKER_COLOR_ACCENT="\\033[38;5;${STARTUP_COLOR_ACCENT}m"
+AUTOMAKER_COLOR_RESET="\\033[0m"
+AUTOMAKER_SHOW_TIME="${config.showTime === true ? 'true' : 'false'}"
+AUTOMAKER_SHOW_EXIT_STATUS="${config.showExitStatus === true ? 'true' : 'false'}"
+AUTOMAKER_SHOW_USER_HOST="${config.showUserHost === false ? 'false' : 'true'}"
+AUTOMAKER_SHOW_PATH="${config.showPath === false ? 'false' : 'true'}"
+AUTOMAKER_PATH_STYLE="${normalizePathStyle(config.pathStyle)}"
+AUTOMAKER_PATH_DEPTH=${normalizePathDepth(config.pathDepth)}
+automaker_default_themes_dir="\${XDG_DATA_HOME:-\$HOME/.local/share}/oh-my-posh/themes"
+if [ -z "$POSH_THEMES_PATH" ] || [ ! -d "$POSH_THEMES_PATH" ]; then
+  POSH_THEMES_PATH="$automaker_default_themes_dir"
+fi
+export POSH_THEMES_PATH
+
+automaker_resolve_omp_theme() {
+  automaker_theme_name="$AUTOMAKER_OMP_THEME"
+  if [ -z "$automaker_theme_name" ]; then
+    return 1
+  fi
+
+  if [ -f "$automaker_theme_name" ]; then
+    printf '%s' "$automaker_theme_name"
+    return 0
+  fi
+
+  automaker_themes_base="\${POSH_THEMES_PATH%/}"
+  if [ -n "$automaker_themes_base" ]; then
+    if [ -f "$automaker_themes_base/$automaker_theme_name.omp.json" ]; then
+      printf '%s' "$automaker_themes_base/$automaker_theme_name.omp.json"
+      return 0
+    fi
+    if [ -f "$automaker_themes_base/$automaker_theme_name.omp.yaml" ]; then
+      printf '%s' "$automaker_themes_base/$automaker_theme_name.omp.yaml"
+      return 0
+    fi
+  fi
+
+  return 1
+}
+
+automaker_command_exists() {
+  command -v "$1" >/dev/null 2>&1
+}
+
+automaker_get_os() {
+  if [ -f /etc/os-release ]; then
+    . /etc/os-release
+    if [ -n "$PRETTY_NAME" ]; then
+      echo "$PRETTY_NAME"
+      return
+    fi
+    if [ -n "$NAME" ] && [ -n "$VERSION" ]; then
+      echo "$NAME $VERSION"
+      return
+    fi
+  fi
+
+  if automaker_command_exists sw_vers; then
+    echo "$(sw_vers -productName) $(sw_vers -productVersion)"
+    return
+  fi
+
+  uname -s 2>/dev/null || echo "$AUTOMAKER_INFO_UNKNOWN"
+}
+
+automaker_get_uptime() {
+  if automaker_command_exists uptime; then
+    if uptime -p >/dev/null 2>&1; then
+      uptime -p
+      return
+    fi
+    uptime 2>/dev/null | sed 's/.*up \\([^,]*\\).*/\\1/' || uptime 2>/dev/null
+    return
+  fi
+
+  echo "$AUTOMAKER_INFO_UNKNOWN"
+}
+
+automaker_get_cpu() {
+  if automaker_command_exists lscpu; then
+    lscpu | sed -n 's/Model name:[[:space:]]*//p' | head -n 1
+    return
+  fi
+
+  if automaker_command_exists sysctl; then
+    sysctl -n machdep.cpu.brand_string 2>/dev/null || sysctl -n hw.model 2>/dev/null
+    return
+  fi
+
+  uname -m 2>/dev/null || echo "$AUTOMAKER_INFO_UNKNOWN"
+}
+
+automaker_get_memory() {
+  if automaker_command_exists free; then
+    free -h | awk '/Mem:/ {print $3 " / " $2}'
+    return
+  fi
+
+  if automaker_command_exists vm_stat; then
+    local page_size
+    local pages_free
+    local pages_active
+    local pages_inactive
+    local pages_wired
+    local pages_total
+    page_size=$(vm_stat | awk '/page size of/ {print $8}')
+    pages_free=$(vm_stat | awk '/Pages free/ {print $3}' | tr -d '.')
+    pages_active=$(vm_stat | awk '/Pages active/ {print $3}' | tr -d '.')
+    pages_inactive=$(vm_stat | awk '/Pages inactive/ {print $3}' | tr -d '.')
+    pages_wired=$(vm_stat | awk '/Pages wired down/ {print $4}' | tr -d '.')
+    pages_total=$((pages_free + pages_active + pages_inactive + pages_wired))
+    awk -v total="$pages_total" -v free="$pages_free" -v size="$page_size" \
+      -v bytes_kib="$AUTOMAKER_BYTES_PER_KIB" \
+      -v kib_mib="$AUTOMAKER_KIB_PER_MIB" \
+      -v mib_gib="$AUTOMAKER_MIB_PER_GIB" \
+      'BEGIN {
+      total_gb = total * size / bytes_kib / kib_mib / mib_gib;
+      used_gb = (total - free) * size / bytes_kib / kib_mib / mib_gib;
+      printf("%.1f GB / %.1f GB", used_gb, total_gb);
+    }'
+    return
+  fi
+
+  if automaker_command_exists sysctl; then
+    local total_bytes
+    total_bytes=$(sysctl -n hw.memsize 2>/dev/null)
+    if [ -n "$total_bytes" ]; then
+      awk -v total="$total_bytes" \
+        -v bytes_kib="$AUTOMAKER_BYTES_PER_KIB" \
+        -v kib_mib="$AUTOMAKER_KIB_PER_MIB" \
+        -v mib_gib="$AUTOMAKER_MIB_PER_GIB" \
+        'BEGIN {printf("%.1f GB", total / bytes_kib / kib_mib / mib_gib)}'
+      return
+    fi
+  fi
+
+  echo "$AUTOMAKER_INFO_UNKNOWN"
+}
+
+automaker_get_disk() {
+  if automaker_command_exists df; then
+    df -h / 2>/dev/null | awk 'NR==2 {print $3 " / " $2}'
+    return
+  fi
+
+  echo "$AUTOMAKER_INFO_UNKNOWN"
+}
+
+automaker_get_ip() {
+  if automaker_command_exists hostname; then
+    local ip_addr
+    ip_addr=$(hostname -I 2>/dev/null | awk '{print $1}')
+    if [ -n "$ip_addr" ]; then
+      echo "$ip_addr"
+      return
+    fi
+  fi
+
+  if automaker_command_exists ipconfig; then
+    local ip_addr
+    ip_addr=$(ipconfig getifaddr en0 2>/dev/null)
+    if [ -n "$ip_addr" ]; then
+      echo "$ip_addr"
+      return
+    fi
+  fi
+
+  echo "$AUTOMAKER_INFO_UNKNOWN"
+}
+
+automaker_trim_path_depth() {
+  local path="$1"
+  local depth="$2"
+  if [ -z "$depth" ] || [ "$depth" -le 0 ]; then
+    echo "$path"
+    return
+  fi
+
+  echo "$path" | awk -v depth="$depth" -F/ '{
+    prefix=""
+    start=1
+    if ($1=="") { prefix="/"; start=2 }
+    else if ($1=="~") { prefix="~/"; start=2 }
+    n=NF
+    if (n < start) {
+      if (prefix=="/") { print "/" }
+      else if (prefix=="~/") { print "~" }
+      else { print $0 }
+      next
+    }
+    segCount = n - start + 1
+    d = depth
+    if (d > segCount) { d = segCount }
+    out=""
+    for (i = n - d + 1; i <= n; i++) {
+      out = out (out=="" ? "" : "/") $i
+    }
+    if (prefix=="/") {
+      if (out=="") { out="/" } else { out="/" out }
+    } else if (prefix=="~/") {
+      if (out=="") { out="~" } else { out="~/" out }
+    }
+    print out
+  }'
+}
+
+automaker_shorten_path() {
+  local path="$1"
+  echo "$path" | awk -F/ '{
+    prefix=""
+    start=1
+    if ($1=="") { prefix="/"; start=2 }
+    else if ($1=="~") { prefix="~/"; start=2 }
+    n=NF
+    if (n < start) {
+      if (prefix=="/") { print "/" }
+      else if (prefix=="~/") { print "~" }
+      else { print $0 }
+      next
+    }
+    out=""
+    for (i = start; i <= n; i++) {
+      seg = $i
+      if (i < n && length(seg) > 0) { seg = substr(seg, 1, 1) }
+      out = out (out=="" ? "" : "/") seg
+    }
+    if (prefix=="/") { out="/" out }
+    else if (prefix=="~/") { out="~/" out }
+    print out
+  }'
+}
+
+automaker_prompt_path() {
+  if [ "$AUTOMAKER_SHOW_PATH" != "true" ]; then
+    return
+  fi
+
+  local current_path="$PWD"
+  if [ -n "$HOME" ] && [ "\${current_path#"$HOME"}" != "$current_path" ]; then
+    current_path="~\${current_path#$HOME}"
+  fi
+
+  if [ "$AUTOMAKER_PATH_DEPTH" -gt 0 ]; then
+    current_path=$(automaker_trim_path_depth "$current_path" "$AUTOMAKER_PATH_DEPTH")
+  fi
+
+  case "$AUTOMAKER_PATH_STYLE" in
+    basename)
+      if [ "$current_path" = "/" ] || [ "$current_path" = "~" ]; then
+        echo -n "$current_path"
+      else
+        echo -n "\${current_path##*/}"
+      fi
+      ;;
+    short)
+      echo -n "$(automaker_shorten_path "$current_path")"
+      ;;
+    full|*)
+      echo -n "$current_path"
+      ;;
+  esac
+}
+
+automaker_prompt_time() {
+  if [ "$AUTOMAKER_SHOW_TIME" != "true" ]; then
+    return
+  fi
+
+  date +%H:%M
+}
+
+automaker_prompt_status() {
+  automaker_last_status=$?
+  if [ "$AUTOMAKER_SHOW_EXIT_STATUS" != "true" ]; then
+    return
+  fi
+
+  if [ "$automaker_last_status" -eq 0 ]; then
+    return
+  fi
+
+  printf "✗ %s" "$automaker_last_status"
+}
+
+automaker_show_banner() {
+  local label_width="$AUTOMAKER_BANNER_LABEL_WIDTH"
+  local logo_line_1="  █▀▀█ █  █ ▀▀█▀▀ █▀▀█ █▀▄▀█ █▀▀█ █ █ █▀▀ █▀▀█  "
+  local logo_line_2="  █▄▄█ █  █   █   █  █ █ ▀ █ █▄▄█ █▀▄ █▀▀ █▄▄▀  "
+  local logo_line_3="  ▀  ▀  ▀▀▀   ▀   ▀▀▀▀ ▀   ▀ ▀  ▀ ▀ ▀ ▀▀▀ ▀ ▀▀  "
+  local accent_color="\${AUTOMAKER_COLOR_PRIMARY}"
+  local secondary_color="\${AUTOMAKER_COLOR_SECONDARY}"
+  local tertiary_color="\${AUTOMAKER_COLOR_ACCENT}"
+  local label_color="\${AUTOMAKER_COLOR_SECONDARY}"
+  local reset_color="\${AUTOMAKER_COLOR_RESET}"
+
+  printf "%b%s%b\n" "$accent_color" "$logo_line_1" "$reset_color"
+  printf "%b%s%b\n" "$secondary_color" "$logo_line_2" "$reset_color"
+  printf "%b%s%b\n" "$tertiary_color" "$logo_line_3" "$reset_color"
+  printf "\n"
+
+  local shell_name="\${SHELL##*/}"
+  if [ -z "$shell_name" ]; then
+    shell_name=$(basename "$0" 2>/dev/null || echo "shell")
+  fi
+  local user_host="\${USER:-unknown}@$(hostname 2>/dev/null || echo unknown)"
+  printf "%b%s%b\n" "$label_color" "$user_host" "$reset_color"
+
+  printf "%b%-\${label_width}s%b %s\n" "$label_color" "OS:" "$reset_color" "$(automaker_get_os)"
+  printf "%b%-\${label_width}s%b %s\n" "$label_color" "Uptime:" "$reset_color" "$(automaker_get_uptime)"
+  printf "%b%-\${label_width}s%b %s\n" "$label_color" "Shell:" "$reset_color" "$shell_name"
+  printf "%b%-\${label_width}s%b %s\n" "$label_color" "Terminal:" "$reset_color" "\${TERM_PROGRAM:-$TERM}"
+  printf "%b%-\${label_width}s%b %s\n" "$label_color" "CPU:" "$reset_color" "$(automaker_get_cpu)"
+  printf "%b%-\${label_width}s%b %s\n" "$label_color" "Memory:" "$reset_color" "$(automaker_get_memory)"
+  printf "%b%-\${label_width}s%b %s\n" "$label_color" "Disk:" "$reset_color" "$(automaker_get_disk)"
+  printf "%b%-\${label_width}s%b %s\n" "$label_color" "Local IP:" "$reset_color" "$(automaker_get_ip)"
+  printf "\n"
+}
+
+automaker_show_banner_once() {
+  case "$-" in
+    *i*) ;;
+    *) return ;;
+  esac
+
+  if [ "$AUTOMAKER_BANNER_SHOWN" = "true" ]; then
+    return
+  fi
+
+  automaker_show_banner
+  export AUTOMAKER_BANNER_SHOWN="true"
+}
+`;
+}
+
+/**
+ * Generate prompt based on format
+ */
+function generatePrompt(
+  format: TerminalConfig['promptFormat'],
+  colors: ANSIColors,
+  config: TerminalConfig
+): string {
+  const userHostSegment = config.showUserHost
+    ? `${colors.user}\\u${colors.reset}@${colors.host}\\h${colors.reset}`
+    : '';
+  const pathSegment = config.showPath
+    ? `${colors.path}\\$(automaker_prompt_path)${colors.reset}`
+    : '';
+  const gitSegment = config.showGitBranch
+    ? `${colors.gitBranch}\\$(automaker_git_prompt)${colors.reset}`
+    : '';
+  const timeSegment = config.showTime
+    ? `${colors.gitBranch}[\\$(automaker_prompt_time)]${colors.reset}`
+    : '';
+  const statusSegment = config.showExitStatus
+    ? `${colors.gitDirty}\\$(automaker_prompt_status)${colors.reset}`
+    : '';
+
+  switch (format) {
+    case 'minimal': {
+      const minimalSegments = [timeSegment, userHostSegment, pathSegment, gitSegment, statusSegment]
+        .filter((segment) => segment.length > 0)
+        .join(' ');
+      return `PS1="${minimalSegments ? `${minimalSegments} ` : ''}${colors.prompt}\\$${colors.reset} "`;
+    }
+
+    case 'powerline': {
+      const powerlineCoreSegments = [
+        userHostSegment ? `[${userHostSegment}]` : '',
+        pathSegment ? `[${pathSegment}]` : '',
+      ].filter((segment) => segment.length > 0);
+      const powerlineCore = powerlineCoreSegments.join('─');
+      const powerlineExtras = [gitSegment, timeSegment, statusSegment]
+        .filter((segment) => segment.length > 0)
+        .join(' ');
+      const powerlineLine = [powerlineCore, powerlineExtras]
+        .filter((segment) => segment.length > 0)
+        .join(' ');
+      return `PS1="┌─${powerlineLine}\\n└─${colors.prompt}\\$${colors.reset} "`;
+    }
+
+    case 'starship': {
+      let starshipLine = '';
+      if (userHostSegment && pathSegment) {
+        starshipLine = `${userHostSegment} in ${pathSegment}`;
+      } else {
+        starshipLine = [userHostSegment, pathSegment]
+          .filter((segment) => segment.length > 0)
+          .join(' ');
+      }
+      if (gitSegment) {
+        starshipLine = `${starshipLine}${starshipLine ? ' on ' : ''}${gitSegment}`;
+      }
+      const starshipSegments = [timeSegment, starshipLine, statusSegment]
+        .filter((segment) => segment.length > 0)
+        .join(' ');
+      return `PS1="${starshipSegments}\\n${colors.prompt}❯${colors.reset} "`;
+    }
+
+    case 'standard':
+    default: {
+      const standardSegments = [
+        timeSegment,
+        userHostSegment ? `[${userHostSegment}]` : '',
+        pathSegment,
+        gitSegment,
+        statusSegment,
+      ]
+        .filter((segment) => segment.length > 0)
+        .join(' ');
+      return `PS1="${standardSegments ? `${standardSegments} ` : ''}${colors.prompt}\\$${colors.reset} "`;
+    }
+  }
+}
+
+/**
+ * Generate Zsh prompt based on format
+ */
+function generateZshPrompt(
+  format: TerminalConfig['promptFormat'],
+  colors: ANSIColors,
+  config: TerminalConfig
+): string {
+  // Convert bash-style \u, \h, \w to zsh-style %n, %m, %~
+  // Remove bash-style escaping \[ \] (not needed in zsh)
+  const zshColors = {
+    user: colors.user
+      .replace(/\\[\[\]\\e]/g, '')
+      .replace(/\\e/g, '%{')
+      .replace(/m\\]/g, 'm%}'),
+    host: colors.host
+      .replace(/\\[\[\]\\e]/g, '')
+      .replace(/\\e/g, '%{')
+      .replace(/m\\]/g, 'm%}'),
+    path: colors.path
+      .replace(/\\[\[\]\\e]/g, '')
+      .replace(/\\e/g, '%{')
+      .replace(/m\\]/g, 'm%}'),
+    gitBranch: colors.gitBranch
+      .replace(/\\[\[\]\\e]/g, '')
+      .replace(/\\e/g, '%{')
+      .replace(/m\\]/g, 'm%}'),
+    gitDirty: colors.gitDirty
+      .replace(/\\[\[\]\\e]/g, '')
+      .replace(/\\e/g, '%{')
+      .replace(/m\\]/g, 'm%}'),
+    prompt: colors.prompt
+      .replace(/\\[\[\]\\e]/g, '')
+      .replace(/\\e/g, '%{')
+      .replace(/m\\]/g, 'm%}'),
+    reset: colors.reset
+      .replace(/\\[\[\]\\e]/g, '')
+      .replace(/\\e/g, '%{')
+      .replace(/m\\]/g, 'm%}'),
+  };
+
+  const userHostSegment = config.showUserHost
+    ? `[${zshColors.user}%n${zshColors.reset}@${zshColors.host}%m${zshColors.reset}]`
+    : '';
+  const pathSegment = config.showPath
+    ? `${zshColors.path}$(automaker_prompt_path)${zshColors.reset}`
+    : '';
+  const gitSegment = config.showGitBranch
+    ? `${zshColors.gitBranch}$(automaker_git_prompt)${zshColors.reset}`
+    : '';
+  const timeSegment = config.showTime
+    ? `${zshColors.gitBranch}[$(automaker_prompt_time)]${zshColors.reset}`
+    : '';
+  const statusSegment = config.showExitStatus
+    ? `${zshColors.gitDirty}$(automaker_prompt_status)${zshColors.reset}`
+    : '';
+  const segments = [timeSegment, userHostSegment, pathSegment, gitSegment, statusSegment].filter(
+    (segment) => segment.length > 0
+  );
+  const inlineSegments = segments.join(' ');
+  const inlineWithSpace = inlineSegments ? `${inlineSegments} ` : '';
+
+  switch (format) {
+    case 'minimal': {
+      return `PROMPT="${inlineWithSpace}${zshColors.prompt}%#${zshColors.reset} "`;
+    }
+
+    case 'powerline': {
+      const powerlineCoreSegments = [
+        userHostSegment ? `[${userHostSegment}]` : '',
+        pathSegment ? `[${pathSegment}]` : '',
+      ].filter((segment) => segment.length > 0);
+      const powerlineCore = powerlineCoreSegments.join('─');
+      const powerlineExtras = [gitSegment, timeSegment, statusSegment]
+        .filter((segment) => segment.length > 0)
+        .join(' ');
+      const powerlineLine = [powerlineCore, powerlineExtras]
+        .filter((segment) => segment.length > 0)
+        .join(' ');
+      return `PROMPT="┌─${powerlineLine}
+└─${zshColors.prompt}%#${zshColors.reset} "`;
+    }
+
+    case 'starship': {
+      let starshipLine = '';
+      if (userHostSegment && pathSegment) {
+        starshipLine = `${userHostSegment} in ${pathSegment}`;
+      } else {
+        starshipLine = [userHostSegment, pathSegment]
+          .filter((segment) => segment.length > 0)
+          .join(' ');
+      }
+      if (gitSegment) {
+        starshipLine = `${starshipLine}${starshipLine ? ' on ' : ''}${gitSegment}`;
+      }
+      const starshipSegments = [timeSegment, starshipLine, statusSegment]
+        .filter((segment) => segment.length > 0)
+        .join(' ');
+      return `PROMPT="${starshipSegments}
+${zshColors.prompt}❯${zshColors.reset} "`;
+    }
+
+    case 'standard':
+    default: {
+      const standardSegments = [
+        timeSegment,
+        userHostSegment ? `[${userHostSegment}]` : '',
+        pathSegment,
+        gitSegment,
+        statusSegment,
+      ]
+        .filter((segment) => segment.length > 0)
+        .join(' ');
+      return `PROMPT="${standardSegments ? `${standardSegments} ` : ''}${zshColors.prompt}%#${zshColors.reset} "`;
+    }
+  }
+}
+
+/**
+ * Generate custom aliases section
+ */
+function generateAliases(config: TerminalConfig): string {
+  if (!config.customAliases) return '';
+
+  // Escape and validate aliases
+  const escapedAliases = shellEscape(config.customAliases);
+  return `
+# Custom aliases
+${escapedAliases}
+`;
+}
+
+/**
+ * Generate custom environment variables section
+ */
+function generateEnvVars(config: TerminalConfig): string {
+  if (!config.customEnvVars || Object.keys(config.customEnvVars).length === 0) {
+    return '';
+  }
+
+  const validEnvVars = Object.entries(config.customEnvVars)
+    .filter(([name]) => isValidEnvVarName(name))
+    .map(([name, value]) => `export ${name}="${shellEscape(value)}"`)
+    .join('\n');
+
+  return validEnvVars
+    ? `
+# Custom environment variables
+${validEnvVars}
+`
+    : '';
+}
+
+/**
+ * Generate bashrc configuration
+ */
+export function generateBashrc(theme: TerminalTheme, config: TerminalConfig): string {
+  const colors = getThemeANSIColors(theme);
+  const promptLine = generatePrompt(config.promptFormat, colors, config);
+  const promptInitializer = generateOhMyPoshInit(OMP_SHELL_BASH, promptLine);
+
+  return `#!/bin/bash
+# Automaker Terminal Configuration v1.0
+# This file is automatically generated - manual edits will be overwritten
+
+# Source user's original bashrc first (preserves user configuration)
+if [ -f "$HOME/.bashrc" ]; then
+    source "$HOME/.bashrc"
+fi
+
+# Load Automaker theme colors
+AUTOMAKER_THEME="\${AUTOMAKER_THEME:-dark}"
+if [ -f "\${BASH_SOURCE%/*}/themes/$AUTOMAKER_THEME.sh" ]; then
+    source "\${BASH_SOURCE%/*}/themes/$AUTOMAKER_THEME.sh"
+fi
+
+# Load common functions (git prompt)
+if [ -f "\${BASH_SOURCE%/*}/common.sh" ]; then
+    source "\${BASH_SOURCE%/*}/common.sh"
+fi
+
+# Show Automaker banner on shell start
+if command -v automaker_show_banner_once >/dev/null 2>&1; then
+    automaker_show_banner_once
+fi
+
+# Set custom prompt (only if enabled)
+if [ "$AUTOMAKER_CUSTOM_PROMPT" = "true" ]; then
+    ${promptInitializer}
+fi
+${generateAliases(config)}${generateEnvVars(config)}
+# Load user customizations (if exists)
+if [ -f "\${BASH_SOURCE%/*}/user-custom.sh" ]; then
+    source "\${BASH_SOURCE%/*}/user-custom.sh"
+fi
+`;
+}
+
+/**
+ * Generate zshrc configuration
+ */
+export function generateZshrc(theme: TerminalTheme, config: TerminalConfig): string {
+  const colors = getThemeANSIColors(theme);
+  const promptLine = generateZshPrompt(config.promptFormat, colors, config);
+  const promptInitializer = generateOhMyPoshInit(OMP_SHELL_ZSH, promptLine);
+
+  return `#!/bin/zsh
+# Automaker Terminal Configuration v1.0
+# This file is automatically generated - manual edits will be overwritten
+
+# Source user's original zshrc first (preserves user configuration)
+if [ -f "$HOME/.zshrc" ]; then
+    source "$HOME/.zshrc"
+fi
+
+# Load Automaker theme colors
+AUTOMAKER_THEME="\${AUTOMAKER_THEME:-dark}"
+if [ -f "\${ZDOTDIR:-\${0:a:h}}/themes/$AUTOMAKER_THEME.sh" ]; then
+    source "\${ZDOTDIR:-\${0:a:h}}/themes/$AUTOMAKER_THEME.sh"
+fi
+
+# Load common functions (git prompt)
+if [ -f "\${ZDOTDIR:-\${0:a:h}}/common.sh" ]; then
+    source "\${ZDOTDIR:-\${0:a:h}}/common.sh"
+fi
+
+# Enable command substitution in PROMPT
+setopt PROMPT_SUBST
+
+# Show Automaker banner on shell start
+if command -v automaker_show_banner_once >/dev/null 2>&1; then
+    automaker_show_banner_once
+fi
+
+# Set custom prompt (only if enabled)
+if [ "$AUTOMAKER_CUSTOM_PROMPT" = "true" ]; then
+    ${promptInitializer}
+fi
+${generateAliases(config)}${generateEnvVars(config)}
+# Load user customizations (if exists)
+if [ -f "\${ZDOTDIR:-\${0:a:h}}/user-custom.sh" ]; then
+    source "\${ZDOTDIR:-\${0:a:h}}/user-custom.sh"
+fi
+`;
+}
+
+/**
+ * Generate theme color exports for shell
+ */
+export function generateThemeColors(theme: TerminalTheme): string {
+  const colors = getThemeANSIColors(theme);
+  const rawColors = {
+    user: stripPromptEscapes(colors.user),
+    host: stripPromptEscapes(colors.host),
+    path: stripPromptEscapes(colors.path),
+    gitBranch: stripPromptEscapes(colors.gitBranch),
+    gitDirty: stripPromptEscapes(colors.gitDirty),
+    prompt: stripPromptEscapes(colors.prompt),
+    reset: stripPromptEscapes(colors.reset),
+  };
+
+  return `#!/bin/sh
+# Automaker Theme Colors
+# This file is automatically generated - manual edits will be overwritten
+
+# ANSI color codes for prompt
+export COLOR_USER="${colors.user}"
+export COLOR_HOST="${colors.host}"
+export COLOR_PATH="${colors.path}"
+export COLOR_GIT_BRANCH="${colors.gitBranch}"
+export COLOR_GIT_DIRTY="${colors.gitDirty}"
+export COLOR_PROMPT="${colors.prompt}"
+export COLOR_RESET="${colors.reset}"
+
+# ANSI color codes for banner output (no prompt escapes)
+export COLOR_USER_RAW="${rawColors.user}"
+export COLOR_HOST_RAW="${rawColors.host}"
+export COLOR_PATH_RAW="${rawColors.path}"
+export COLOR_GIT_BRANCH_RAW="${rawColors.gitBranch}"
+export COLOR_GIT_DIRTY_RAW="${rawColors.gitDirty}"
+export COLOR_PROMPT_RAW="${rawColors.prompt}"
+export COLOR_RESET_RAW="${rawColors.reset}"
+`;
+}
+
+/**
+ * Get shell name from file extension
+ */
+export function getShellName(rcFile: string): 'bash' | 'zsh' | 'sh' | null {
+  if (rcFile.endsWith('.sh') && rcFile.includes('bashrc')) return 'bash';
+  if (rcFile.endsWith('.zsh') || rcFile.endsWith('.zshrc')) return 'zsh';
+  if (rcFile.endsWith('.sh')) return 'sh';
+  return null;
+}
diff --git a/temp_repo/libs/platform/src/secure-fs.ts b/temp_repo/libs/platform/src/secure-fs.ts
new file mode 100644
index 0000000000000000000000000000000000000000..95ec503a4fecd85986f9584aed18fe2e2f4fe62a
--- /dev/null
+++ b/temp_repo/libs/platform/src/secure-fs.ts
@@ -0,0 +1,629 @@
+/**
+ * Secure File System Adapter
+ *
+ * All file I/O operations must go through this adapter to enforce
+ * ALLOWED_ROOT_DIRECTORY restrictions at the actual access point,
+ * not just at the API layer. This provides defense-in-depth security.
+ *
+ * This module also implements:
+ * - Concurrency limiting via p-limit to prevent ENFILE/EMFILE errors
+ * - Retry logic with exponential backoff for transient file descriptor errors
+ */
+
+import fs from 'fs/promises';
+import fsSync, { type Dirent, type Stats } from 'fs';
+import path from 'path';
+import pLimit from 'p-limit';
+import { validatePath } from './security.js';
+
+/**
+ * Configuration for file operation throttling
+ */
+interface ThrottleConfig {
+  /** Maximum concurrent file operations (default: 100) */
+  maxConcurrency: number;
+  /** Maximum retry attempts for ENFILE/EMFILE errors (default: 3) */
+  maxRetries: number;
+  /** Base delay in ms for exponential backoff (default: 100) */
+  baseDelay: number;
+  /** Maximum delay in ms for exponential backoff (default: 5000) */
+  maxDelay: number;
+}
+
+const DEFAULT_CONFIG: ThrottleConfig = {
+  maxConcurrency: 100,
+  maxRetries: 3,
+  baseDelay: 100,
+  maxDelay: 5000,
+};
+
+let config: ThrottleConfig = { ...DEFAULT_CONFIG };
+let fsLimit = pLimit(config.maxConcurrency);
+
+/**
+ * Configure the file operation throttling settings
+ * @param newConfig - Partial configuration to merge with defaults
+ */
+export function configureThrottling(newConfig: Partial<ThrottleConfig>): void {
+  const newConcurrency = newConfig.maxConcurrency;
+
+  if (newConcurrency !== undefined && newConcurrency !== config.maxConcurrency) {
+    if (fsLimit.activeCount > 0 || fsLimit.pendingCount > 0) {
+      throw new Error(
+        `[SecureFS] Cannot change maxConcurrency while operations are in flight. Active: ${fsLimit.activeCount}, Pending: ${fsLimit.pendingCount}`
+      );
+    }
+    fsLimit = pLimit(newConcurrency);
+  }
+
+  config = { ...config, ...newConfig };
+}
+
+/**
+ * Get the current throttling configuration
+ */
+export function getThrottlingConfig(): Readonly<ThrottleConfig> {
+  return { ...config };
+}
+
+/**
+ * Get the number of pending operations in the queue
+ */
+export function getPendingOperations(): number {
+  return fsLimit.pendingCount;
+}
+
+/**
+ * Get the number of active operations currently running
+ */
+export function getActiveOperations(): number {
+  return fsLimit.activeCount;
+}
+
+/**
+ * Error codes that indicate file descriptor exhaustion
+ */
+const FILE_DESCRIPTOR_ERROR_CODES = new Set(['ENFILE', 'EMFILE']);
+
+/**
+ * Check if an error is a file descriptor exhaustion error
+ */
+function isFileDescriptorError(error: unknown): boolean {
+  if (error && typeof error === 'object' && 'code' in error) {
+    return FILE_DESCRIPTOR_ERROR_CODES.has((error as { code: string }).code);
+  }
+  return false;
+}
+
+/**
+ * Calculate delay with exponential backoff and jitter
+ */
+function calculateDelay(attempt: number): number {
+  const exponentialDelay = config.baseDelay * Math.pow(2, attempt);
+  const jitter = Math.random() * config.baseDelay;
+  return Math.min(exponentialDelay + jitter, config.maxDelay);
+}
+
+/**
+ * Sleep for a specified duration
+ */
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * Execute a file operation with throttling and retry logic
+ */
+async function executeWithRetry<T>(operation: () => Promise<T>, operationName: string): Promise<T> {
+  return fsLimit(async () => {
+    let lastError: unknown;
+
+    for (let attempt = 0; attempt <= config.maxRetries; attempt++) {
+      try {
+        return await operation();
+      } catch (error) {
+        lastError = error;
+
+        if (isFileDescriptorError(error) && attempt < config.maxRetries) {
+          const delay = calculateDelay(attempt);
+          console.warn(
+            `[SecureFS] ${operationName}: File descriptor error (attempt ${attempt + 1}/${config.maxRetries + 1}), retrying in ${delay}ms`
+          );
+          await sleep(delay);
+          continue;
+        }
+
+        throw error;
+      }
+    }
+
+    throw lastError;
+  });
+}
+
+/**
+ * Wrapper around fs.access that validates path first
+ */
+export async function access(filePath: string, mode?: number): Promise<void> {
+  const validatedPath = validatePath(filePath);
+  return executeWithRetry(() => fs.access(validatedPath, mode), `access(${filePath})`);
+}
+
+/**
+ * Wrapper around fs.readFile that validates path first
+ */
+export async function readFile(
+  filePath: string,
+  encoding?: BufferEncoding
+): Promise<string | Buffer> {
+  const validatedPath = validatePath(filePath);
+  return executeWithRetry<string | Buffer>(() => {
+    if (encoding) {
+      return fs.readFile(validatedPath, encoding);
+    }
+    return fs.readFile(validatedPath);
+  }, `readFile(${filePath})`);
+}
+
+/**
+ * Options for writeFile
+ */
+export interface WriteFileOptions {
+  encoding?: BufferEncoding;
+  mode?: number;
+  flag?: string;
+}
+
+/**
+ * Wrapper around fs.writeFile that validates path first
+ */
+export async function writeFile(
+  filePath: string,
+  data: string | Buffer,
+  optionsOrEncoding?: BufferEncoding | WriteFileOptions
+): Promise<void> {
+  const validatedPath = validatePath(filePath);
+  return executeWithRetry(
+    () => fs.writeFile(validatedPath, data, optionsOrEncoding),
+    `writeFile(${filePath})`
+  );
+}
+
+/**
+ * Wrapper around fs.mkdir that validates path first
+ */
+export async function mkdir(
+  dirPath: string,
+  options?: { recursive?: boolean; mode?: number }
+): Promise<string | undefined> {
+  const validatedPath = validatePath(dirPath);
+  return executeWithRetry(() => fs.mkdir(validatedPath, options), `mkdir(${dirPath})`);
+}
+
+/**
+ * Wrapper around fs.readdir that validates path first
+ */
+export async function readdir(
+  dirPath: string,
+  options?: { withFileTypes?: false; encoding?: BufferEncoding }
+): Promise<string[]>;
+export async function readdir(
+  dirPath: string,
+  options: { withFileTypes: true; encoding?: BufferEncoding }
+): Promise<Dirent[]>;
+export async function readdir(
+  dirPath: string,
+  options?: { withFileTypes?: boolean; encoding?: BufferEncoding }
+): Promise<string[] | Dirent[]> {
+  const validatedPath = validatePath(dirPath);
+  return executeWithRetry<string[] | Dirent[]>(() => {
+    if (options?.withFileTypes === true) {
+      return fs.readdir(validatedPath, { withFileTypes: true });
+    }
+    return fs.readdir(validatedPath);
+  }, `readdir(${dirPath})`);
+}
+
+/**
+ * Wrapper around fs.stat that validates path first
+ */
+export async function stat(filePath: string): Promise<ReturnType<typeof fs.stat>> {
+  const validatedPath = validatePath(filePath);
+  return executeWithRetry(() => fs.stat(validatedPath), `stat(${filePath})`);
+}
+
+/**
+ * Wrapper around fs.rm that validates path first
+ */
+export async function rm(
+  filePath: string,
+  options?: { recursive?: boolean; force?: boolean }
+): Promise<void> {
+  const validatedPath = validatePath(filePath);
+  return executeWithRetry(() => fs.rm(validatedPath, options), `rm(${filePath})`);
+}
+
+/**
+ * Wrapper around fs.unlink that validates path first
+ */
+export async function unlink(filePath: string): Promise<void> {
+  const validatedPath = validatePath(filePath);
+  return executeWithRetry(() => fs.unlink(validatedPath), `unlink(${filePath})`);
+}
+
+/**
+ * Wrapper around fs.copyFile that validates both paths first
+ */
+export async function copyFile(src: string, dest: string, mode?: number): Promise<void> {
+  const validatedSrc = validatePath(src);
+  const validatedDest = validatePath(dest);
+  return executeWithRetry(
+    () => fs.copyFile(validatedSrc, validatedDest, mode),
+    `copyFile(${src}, ${dest})`
+  );
+}
+
+/**
+ * Wrapper around fs.appendFile that validates path first
+ */
+export async function appendFile(
+  filePath: string,
+  data: string | Buffer,
+  encoding?: BufferEncoding
+): Promise<void> {
+  const validatedPath = validatePath(filePath);
+  return executeWithRetry(
+    () => fs.appendFile(validatedPath, data, encoding),
+    `appendFile(${filePath})`
+  );
+}
+
+/**
+ * Wrapper around fs.rename that validates both paths first
+ */
+export async function rename(oldPath: string, newPath: string): Promise<void> {
+  const validatedOldPath = validatePath(oldPath);
+  const validatedNewPath = validatePath(newPath);
+  return executeWithRetry(
+    () => fs.rename(validatedOldPath, validatedNewPath),
+    `rename(${oldPath}, ${newPath})`
+  );
+}
+
+/**
+ * Wrapper around fs.lstat that validates path first
+ * Returns file stats without following symbolic links
+ */
+export async function lstat(filePath: string): Promise<ReturnType<typeof fs.lstat>> {
+  const validatedPath = validatePath(filePath);
+  return executeWithRetry(() => fs.lstat(validatedPath), `lstat(${filePath})`);
+}
+
+/**
+ * Wrapper around path.join that returns resolved path
+ * Does NOT validate - use this for path construction, then pass to other operations
+ */
+export function joinPath(...pathSegments: string[]): string {
+  return path.join(...pathSegments);
+}
+
+/**
+ * Wrapper around path.resolve that returns resolved path
+ * Does NOT validate - use this for path construction, then pass to other operations
+ */
+export function resolvePath(...pathSegments: string[]): string {
+  return path.resolve(...pathSegments);
+}
+
+// =============================================================================
+// Synchronous File System Methods
+// =============================================================================
+
+/**
+ * Options for writeFileSync
+ */
+export interface WriteFileSyncOptions {
+  encoding?: BufferEncoding;
+  mode?: number;
+  flag?: string;
+}
+
+/**
+ * Synchronous wrapper around fs.existsSync that validates path first
+ */
+export function existsSync(filePath: string): boolean {
+  const validatedPath = validatePath(filePath);
+  return fsSync.existsSync(validatedPath);
+}
+
+/**
+ * Synchronous wrapper around fs.readFileSync that validates path first
+ */
+export function readFileSync(filePath: string, encoding?: BufferEncoding): string | Buffer {
+  const validatedPath = validatePath(filePath);
+  if (encoding) {
+    return fsSync.readFileSync(validatedPath, encoding);
+  }
+  return fsSync.readFileSync(validatedPath);
+}
+
+/**
+ * Synchronous wrapper around fs.writeFileSync that validates path first
+ */
+export function writeFileSync(
+  filePath: string,
+  data: string | Buffer,
+  options?: WriteFileSyncOptions
+): void {
+  const validatedPath = validatePath(filePath);
+  fsSync.writeFileSync(validatedPath, data, options);
+}
+
+/**
+ * Synchronous wrapper around fs.mkdirSync that validates path first
+ */
+export function mkdirSync(
+  dirPath: string,
+  options?: { recursive?: boolean; mode?: number }
+): string | undefined {
+  const validatedPath = validatePath(dirPath);
+  return fsSync.mkdirSync(validatedPath, options);
+}
+
+/**
+ * Synchronous wrapper around fs.readdirSync that validates path first
+ */
+export function readdirSync(dirPath: string, options?: { withFileTypes?: false }): string[];
+export function readdirSync(dirPath: string, options: { withFileTypes: true }): Dirent[];
+export function readdirSync(
+  dirPath: string,
+  options?: { withFileTypes?: boolean }
+): string[] | Dirent[] {
+  const validatedPath = validatePath(dirPath);
+  if (options?.withFileTypes === true) {
+    return fsSync.readdirSync(validatedPath, { withFileTypes: true });
+  }
+  return fsSync.readdirSync(validatedPath);
+}
+
+/**
+ * Synchronous wrapper around fs.statSync that validates path first
+ */
+export function statSync(filePath: string): Stats {
+  const validatedPath = validatePath(filePath);
+  return fsSync.statSync(validatedPath);
+}
+
+/**
+ * Synchronous wrapper around fs.accessSync that validates path first
+ */
+export function accessSync(filePath: string, mode?: number): void {
+  const validatedPath = validatePath(filePath);
+  fsSync.accessSync(validatedPath, mode);
+}
+
+/**
+ * Synchronous wrapper around fs.unlinkSync that validates path first
+ */
+export function unlinkSync(filePath: string): void {
+  const validatedPath = validatePath(filePath);
+  fsSync.unlinkSync(validatedPath);
+}
+
+/**
+ * Synchronous wrapper around fs.rmSync that validates path first
+ */
+export function rmSync(filePath: string, options?: { recursive?: boolean; force?: boolean }): void {
+  const validatedPath = validatePath(filePath);
+  fsSync.rmSync(validatedPath, options);
+}
+
+// =============================================================================
+// Environment File Operations
+// =============================================================================
+
+/**
+ * Read and parse an .env file from a validated path
+ * Returns a record of key-value pairs
+ */
+export async function readEnvFile(envPath: string): Promise<Record<string, string>> {
+  const validatedPath = validatePath(envPath);
+  try {
+    const content = await executeWithRetry(
+      () => fs.readFile(validatedPath, 'utf-8'),
+      `readEnvFile(${envPath})`
+    );
+    return parseEnvContent(content);
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      return {};
+    }
+    throw error;
+  }
+}
+
+/**
+ * Read and parse an .env file synchronously from a validated path
+ */
+export function readEnvFileSync(envPath: string): Record<string, string> {
+  const validatedPath = validatePath(envPath);
+  try {
+    const content = fsSync.readFileSync(validatedPath, 'utf-8');
+    return parseEnvContent(content);
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      return {};
+    }
+    throw error;
+  }
+}
+
+/**
+ * Parse .env file content into a record
+ */
+function parseEnvContent(content: string): Record<string, string> {
+  const result: Record<string, string> = {};
+  const lines = content.split('\n');
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    // Skip empty lines and comments
+    if (!trimmed || trimmed.startsWith('#')) {
+      continue;
+    }
+    const equalIndex = trimmed.indexOf('=');
+    if (equalIndex > 0) {
+      const key = trimmed.slice(0, equalIndex).trim();
+      const value = trimmed.slice(equalIndex + 1).trim();
+      result[key] = value;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Write or update a key-value pair in an .env file
+ * Preserves existing content and comments
+ */
+export async function writeEnvKey(envPath: string, key: string, value: string): Promise<void> {
+  const validatedPath = validatePath(envPath);
+
+  let content = '';
+  try {
+    content = await executeWithRetry(
+      () => fs.readFile(validatedPath, 'utf-8'),
+      `readFile(${envPath})`
+    );
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+      throw error;
+    }
+    // File doesn't exist, will create new one
+  }
+
+  const newContent = updateEnvContent(content, key, value);
+  await executeWithRetry(() => fs.writeFile(validatedPath, newContent), `writeFile(${envPath})`);
+}
+
+/**
+ * Write or update a key-value pair in an .env file (synchronous)
+ */
+export function writeEnvKeySync(envPath: string, key: string, value: string): void {
+  const validatedPath = validatePath(envPath);
+
+  let content = '';
+  try {
+    content = fsSync.readFileSync(validatedPath, 'utf-8');
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
+      throw error;
+    }
+    // File doesn't exist, will create new one
+  }
+
+  const newContent = updateEnvContent(content, key, value);
+  fsSync.writeFileSync(validatedPath, newContent);
+}
+
+/**
+ * Remove a key from an .env file
+ */
+export async function removeEnvKey(envPath: string, key: string): Promise<void> {
+  const validatedPath = validatePath(envPath);
+
+  let content = '';
+  try {
+    content = await executeWithRetry(
+      () => fs.readFile(validatedPath, 'utf-8'),
+      `readFile(${envPath})`
+    );
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      return; // File doesn't exist, nothing to remove
+    }
+    throw error;
+  }
+
+  const newContent = removeEnvKeyFromContent(content, key);
+  await executeWithRetry(() => fs.writeFile(validatedPath, newContent), `writeFile(${envPath})`);
+}
+
+/**
+ * Remove a key from an .env file (synchronous)
+ */
+export function removeEnvKeySync(envPath: string, key: string): void {
+  const validatedPath = validatePath(envPath);
+
+  let content = '';
+  try {
+    content = fsSync.readFileSync(validatedPath, 'utf-8');
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      return; // File doesn't exist, nothing to remove
+    }
+    throw error;
+  }
+
+  const newContent = removeEnvKeyFromContent(content, key);
+  fsSync.writeFileSync(validatedPath, newContent);
+}
+
+/**
+ * Update .env content with a new key-value pair
+ */
+function updateEnvContent(content: string, key: string, value: string): string {
+  const lines = content.split('\n');
+  const keyPrefix = `${key}=`;
+  let found = false;
+
+  const newLines = lines.map((line) => {
+    if (line.trim().startsWith(keyPrefix)) {
+      found = true;
+      return `${key}=${value}`;
+    }
+    return line;
+  });
+
+  if (!found) {
+    // Add the key at the end
+    if (newLines.length > 0 && newLines[newLines.length - 1].trim() !== '') {
+      newLines.push(`${key}=${value}`);
+    } else {
+      // Replace last empty line or add to empty file
+      if (newLines.length === 0 || (newLines.length === 1 && newLines[0] === '')) {
+        newLines[0] = `${key}=${value}`;
+      } else {
+        newLines[newLines.length - 1] = `${key}=${value}`;
+      }
+    }
+  }
+
+  // Ensure file ends with newline
+  let result = newLines.join('\n');
+  if (!result.endsWith('\n')) {
+    result += '\n';
+  }
+  return result;
+}
+
+/**
+ * Remove a key from .env content
+ */
+function removeEnvKeyFromContent(content: string, key: string): string {
+  const lines = content.split('\n');
+  const keyPrefix = `${key}=`;
+  const newLines = lines.filter((line) => !line.trim().startsWith(keyPrefix));
+
+  // Remove trailing empty lines
+  while (newLines.length > 0 && newLines[newLines.length - 1].trim() === '') {
+    newLines.pop();
+  }
+
+  // Ensure file ends with newline if there's content
+  let result = newLines.join('\n');
+  if (result.length > 0 && !result.endsWith('\n')) {
+    result += '\n';
+  }
+  return result;
+}
diff --git a/temp_repo/libs/platform/src/security.ts b/temp_repo/libs/platform/src/security.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ebb877de249fe481a0b585668aba7f8021e63e5e
--- /dev/null
+++ b/temp_repo/libs/platform/src/security.ts
@@ -0,0 +1,131 @@
+/**
+ * Security utilities for path validation
+ * Enforces ALLOWED_ROOT_DIRECTORY constraint with appData exception
+ */
+
+import path from 'path';
+
+/**
+ * Error thrown when a path is not allowed by security policy
+ */
+export class PathNotAllowedError extends Error {
+  constructor(filePath: string) {
+    super(`Path not allowed: ${filePath}. Must be within ALLOWED_ROOT_DIRECTORY or DATA_DIR.`);
+    this.name = 'PathNotAllowedError';
+  }
+}
+
+// Allowed root directory - main security boundary
+let allowedRootDirectory: string | null = null;
+
+// Data directory - always allowed for settings/credentials
+let dataDirectory: string | null = null;
+
+/**
+ * Initialize security settings from environment variables
+ * - ALLOWED_ROOT_DIRECTORY: main security boundary
+ * - DATA_DIR: appData exception, always allowed
+ */
+export function initAllowedPaths(): void {
+  // Load ALLOWED_ROOT_DIRECTORY
+  const rootDir = process.env.ALLOWED_ROOT_DIRECTORY;
+  if (rootDir) {
+    allowedRootDirectory = path.resolve(rootDir);
+    console.log(`[Security] ✓ ALLOWED_ROOT_DIRECTORY configured: ${allowedRootDirectory}`);
+  } else {
+    console.log('[Security] ⚠️  ALLOWED_ROOT_DIRECTORY not set - allowing access to all paths');
+  }
+
+  // Load DATA_DIR (appData exception - always allowed)
+  const dataDir = process.env.DATA_DIR;
+  if (dataDir) {
+    dataDirectory = path.resolve(dataDir);
+    console.log(`[Security] ✓ DATA_DIR configured: ${dataDirectory}`);
+  }
+}
+
+/**
+ * Check if a path is allowed based on ALLOWED_ROOT_DIRECTORY
+ * Returns true if:
+ * - Path is within ALLOWED_ROOT_DIRECTORY, OR
+ * - Path is within DATA_DIR (appData exception), OR
+ * - No restrictions are configured (backward compatibility)
+ */
+export function isPathAllowed(filePath: string): boolean {
+  const resolvedPath = path.resolve(filePath);
+
+  // Always allow appData directory (settings, credentials)
+  if (dataDirectory && isPathWithinDirectory(resolvedPath, dataDirectory)) {
+    return true;
+  }
+
+  // If no ALLOWED_ROOT_DIRECTORY restriction is configured, allow all paths
+  // Note: DATA_DIR is checked above as an exception, but doesn't restrict other paths
+  if (!allowedRootDirectory) {
+    return true;
+  }
+
+  // Allow if within ALLOWED_ROOT_DIRECTORY
+  if (allowedRootDirectory && isPathWithinDirectory(resolvedPath, allowedRootDirectory)) {
+    return true;
+  }
+
+  // If restrictions are configured but path doesn't match, deny
+  return false;
+}
+
+/**
+ * Validate a path - resolves it and checks permissions
+ * Throws PathNotAllowedError if path is not allowed
+ */
+export function validatePath(filePath: string): string {
+  const resolvedPath = path.resolve(filePath);
+
+  if (!isPathAllowed(resolvedPath)) {
+    throw new PathNotAllowedError(filePath);
+  }
+
+  return resolvedPath;
+}
+
+/**
+ * Check if a path is within a directory, with protection against path traversal
+ * Returns true only if resolvedPath is within directoryPath
+ */
+export function isPathWithinDirectory(resolvedPath: string, directoryPath: string): boolean {
+  // Get the relative path from directory to the target
+  const relativePath = path.relative(directoryPath, resolvedPath);
+
+  // If relative path starts with "..", it's outside the directory
+  // If relative path is absolute, it's outside the directory
+  // If relative path is empty or ".", it's the directory itself
+  return !relativePath.startsWith('..') && !path.isAbsolute(relativePath);
+}
+
+/**
+ * Get the configured allowed root directory
+ */
+export function getAllowedRootDirectory(): string | null {
+  return allowedRootDirectory;
+}
+
+/**
+ * Get the configured data directory
+ */
+export function getDataDirectory(): string | null {
+  return dataDirectory;
+}
+
+/**
+ * Get list of allowed paths (for debugging)
+ */
+export function getAllowedPaths(): string[] {
+  const paths: string[] = [];
+  if (allowedRootDirectory) {
+    paths.push(allowedRootDirectory);
+  }
+  if (dataDirectory) {
+    paths.push(dataDirectory);
+  }
+  return paths;
+}
diff --git a/temp_repo/libs/platform/src/subprocess.ts b/temp_repo/libs/platform/src/subprocess.ts
new file mode 100644
index 0000000000000000000000000000000000000000..62ef0b21dfda7703327601808f53d3878f26fc8d
--- /dev/null
+++ b/temp_repo/libs/platform/src/subprocess.ts
@@ -0,0 +1,392 @@
+/**
+ * Subprocess management utilities for CLI providers
+ */
+
+import { spawn, type ChildProcess } from 'child_process';
+import { StringDecoder } from 'string_decoder';
+
+export interface SubprocessOptions {
+  command: string;
+  args: string[];
+  cwd: string;
+  env?: Record<string, string>;
+  abortController?: AbortController;
+  timeout?: number; // Milliseconds of no output before timeout
+  /**
+   * Data to write to stdin after process spawns.
+   * Use this for passing prompts/content that may contain shell metacharacters.
+   * Avoids shell interpretation issues when passing data as CLI arguments.
+   */
+  stdinData?: string;
+}
+
+export interface SubprocessResult {
+  stdout: string;
+  stderr: string;
+  exitCode: number | null;
+}
+
+/**
+ * Spawns a subprocess and streams JSONL output line-by-line.
+ *
+ * Uses direct 'data' event handling with manual line buffering instead of
+ * readline's async iterator. The readline async iterator (for await...of on
+ * readline.Interface) has a known issue where events batch up rather than
+ * being delivered immediately, because it layers events.on() Promises on top
+ * of the readline 'line' event emitter. This causes visible delays (20-40s
+ * between batches) in CLI providers like Gemini that produce frequent small
+ * events. Direct data event handling delivers parsed events to the consumer
+ * as soon as they arrive from the pipe.
+ */
+export async function* spawnJSONLProcess(options: SubprocessOptions): AsyncGenerator<unknown> {
+  const { command, args, cwd, env, abortController, timeout = 30000, stdinData } = options;
+
+  const processEnv = {
+    ...process.env,
+    ...env,
+  };
+
+  // Log command without stdin data (which may be large/sensitive)
+  console.log(`[SubprocessManager] Spawning: ${command} ${args.join(' ')}`);
+  console.log(`[SubprocessManager] Working directory: ${cwd}`);
+  if (stdinData) {
+    console.log(`[SubprocessManager] Passing ${stdinData.length} bytes via stdin`);
+  }
+
+  // On Windows, .cmd files must be run through shell (cmd.exe)
+  const needsShell =
+    process.platform === 'win32' &&
+    (command.toLowerCase().endsWith('.cmd') || command === 'npx' || command === 'npm');
+
+  const childProcess: ChildProcess = spawn(command, args, {
+    cwd,
+    env: processEnv,
+    // Use 'pipe' for stdin when we need to write data, otherwise 'ignore'
+    stdio: [stdinData ? 'pipe' : 'ignore', 'pipe', 'pipe'],
+    shell: needsShell,
+  });
+
+  // Write stdin data if provided
+  if (stdinData && childProcess.stdin) {
+    childProcess.stdin.write(stdinData);
+    childProcess.stdin.end();
+  }
+
+  let stderrOutput = '';
+  let lastOutputTime = Date.now();
+  let timeoutHandle: NodeJS.Timeout | null = null;
+  let processExited = false;
+
+  // Stream consumer state - declared in outer scope so the abort handler can
+  // force the consumer to exit immediately without waiting for stdout to close.
+  // CLI tools (especially Gemini CLI) may take a long time to respond to SIGTERM,
+  // leaving the feature stuck in 'in_progress' state on the UI.
+  let streamEnded = false;
+  let notifyConsumer: (() => void) | null = null;
+
+  // Track process exit early so we don't block on an already-exited process
+  childProcess.on('exit', () => {
+    processExited = true;
+  });
+
+  // Collect stderr for error reporting
+  if (childProcess.stderr) {
+    childProcess.stderr.on('data', (data: Buffer) => {
+      const text = data.toString();
+      stderrOutput += text;
+      console.warn(`[SubprocessManager] stderr: ${text}`);
+    });
+  }
+
+  // Setup timeout detection
+  const resetTimeout = () => {
+    lastOutputTime = Date.now();
+    if (timeoutHandle) {
+      clearTimeout(timeoutHandle);
+    }
+    timeoutHandle = setTimeout(() => {
+      const elapsed = Date.now() - lastOutputTime;
+      if (elapsed >= timeout) {
+        console.error(`[SubprocessManager] Process timeout: no output for ${timeout}ms`);
+        childProcess.kill('SIGTERM');
+      }
+    }, timeout);
+  };
+
+  resetTimeout();
+
+  // Setup abort handling with cleanup
+  let abortHandler: (() => void) | null = null;
+  if (abortController) {
+    abortHandler = () => {
+      console.log('[SubprocessManager] Abort signal received, killing process');
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
+      childProcess.kill('SIGTERM');
+
+      // Force stream consumer to exit immediately instead of waiting for
+      // the process to close stdout. CLI tools (especially Gemini CLI) may
+      // take a long time to respond to SIGTERM while mid-API call.
+      streamEnded = true;
+      if (notifyConsumer) {
+        notifyConsumer();
+        notifyConsumer = null;
+      }
+
+      // Escalate to SIGKILL after 3 seconds if process hasn't exited.
+      // SIGKILL cannot be caught or ignored, guaranteeing termination.
+      const killTimer = setTimeout(() => {
+        if (!processExited) {
+          console.log('[SubprocessManager] Escalated to SIGKILL after SIGTERM timeout');
+          try {
+            childProcess.kill('SIGKILL');
+          } catch {
+            // Process may have already exited between the check and kill
+          }
+        }
+      }, 3000);
+
+      // Clean up the kill timer when process exits (don't leak timers)
+      childProcess.once('exit', () => {
+        clearTimeout(killTimer);
+      });
+    };
+    // Check if already aborted, if so call handler immediately
+    if (abortController.signal.aborted) {
+      abortHandler();
+    } else {
+      abortController.signal.addEventListener('abort', abortHandler);
+    }
+  }
+
+  // Helper to clean up abort listener
+  const cleanupAbortListener = () => {
+    if (abortController && abortHandler) {
+      abortController.signal.removeEventListener('abort', abortHandler);
+      abortHandler = null;
+    }
+  };
+
+  // Parse stdout as JSONL using direct 'data' events with manual line buffering.
+  // This avoids the readline async iterator which batches events due to its
+  // internal events.on() Promise layering, causing significant delivery delays.
+  if (childProcess.stdout) {
+    // Queue of parsed events ready to be yielded
+    const eventQueue: unknown[] = [];
+    // Partial line buffer for incomplete lines across data chunks
+    let lineBuffer = '';
+    // StringDecoder handles multibyte UTF-8 sequences that may be split across chunks
+    const decoder = new StringDecoder('utf8');
+
+    childProcess.stdout.on('data', (chunk: Buffer) => {
+      resetTimeout();
+
+      lineBuffer += decoder.write(chunk);
+      const lines = lineBuffer.split('\n');
+      // Last element is either empty (line ended with \n) or a partial line
+      lineBuffer = lines.pop() || '';
+
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed) continue;
+
+        try {
+          eventQueue.push(JSON.parse(trimmed));
+        } catch (parseError) {
+          console.error(`[SubprocessManager] Failed to parse JSONL line: ${trimmed}`, parseError);
+          eventQueue.push({
+            type: 'error',
+            error: `Failed to parse output: ${trimmed}`,
+          });
+        }
+      }
+
+      // Wake up the consumer if it's waiting for events
+      if (notifyConsumer && eventQueue.length > 0) {
+        notifyConsumer();
+        notifyConsumer = null;
+      }
+    });
+
+    childProcess.stdout.on('end', () => {
+      // Flush any remaining bytes from the decoder
+      lineBuffer += decoder.end();
+
+      // Process any remaining partial line
+      if (lineBuffer.trim()) {
+        try {
+          eventQueue.push(JSON.parse(lineBuffer.trim()));
+        } catch (parseError) {
+          console.error(
+            `[SubprocessManager] Failed to parse final JSONL line: ${lineBuffer}`,
+            parseError
+          );
+          eventQueue.push({
+            type: 'error',
+            error: `Failed to parse output: ${lineBuffer}`,
+          });
+        }
+        lineBuffer = '';
+      }
+
+      streamEnded = true;
+      // Wake up consumer so it can exit the loop
+      if (notifyConsumer) {
+        notifyConsumer();
+        notifyConsumer = null;
+      }
+    });
+
+    childProcess.stdout.on('error', (error) => {
+      console.error('[SubprocessManager] stdout error:', error);
+      streamEnded = true;
+      if (notifyConsumer) {
+        notifyConsumer();
+        notifyConsumer = null;
+      }
+    });
+
+    try {
+      // Yield events as they arrive, waiting only when the queue is empty
+      while (!streamEnded || eventQueue.length > 0) {
+        if (eventQueue.length > 0) {
+          yield eventQueue.shift()!;
+        } else {
+          // Wait for the next data event to push events into the queue
+          await new Promise<void>((resolve) => {
+            notifyConsumer = resolve;
+          });
+        }
+      }
+    } finally {
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
+      cleanupAbortListener();
+    }
+  } else {
+    // No stdout - still need to cleanup abort listener when process exits
+    cleanupAbortListener();
+  }
+
+  // Wait for process to exit.
+  // If the process already exited (e.g., abort handler killed it while we were
+  // draining the stream), resolve immediately to avoid blocking forever.
+  const exitCode = await new Promise<number | null>((resolve) => {
+    if (processExited) {
+      resolve(childProcess.exitCode ?? null);
+      return;
+    }
+
+    childProcess.on('exit', (code) => {
+      console.log(`[SubprocessManager] Process exited with code: ${code}`);
+      resolve(code);
+    });
+
+    childProcess.on('error', (error) => {
+      console.error('[SubprocessManager] Process error:', error);
+      resolve(null);
+    });
+  });
+
+  // Handle non-zero exit codes
+  if (exitCode !== 0 && exitCode !== null) {
+    const errorMessage = stderrOutput || `Process exited with code ${exitCode}`;
+    console.error(`[SubprocessManager] Process failed: ${errorMessage}`);
+    yield {
+      type: 'error',
+      error: errorMessage,
+    };
+  }
+
+  // Process completed successfully
+  if (exitCode === 0 && !stderrOutput) {
+    console.log('[SubprocessManager] Process completed successfully');
+  }
+}
+
+/**
+ * Spawns a subprocess and collects all output
+ */
+export async function spawnProcess(options: SubprocessOptions): Promise<SubprocessResult> {
+  const { command, args, cwd, env, abortController, stdinData } = options;
+
+  const processEnv = {
+    ...process.env,
+    ...env,
+  };
+
+  return new Promise((resolve, reject) => {
+    // On Windows, .cmd files must be run through shell (cmd.exe)
+    const needsShell =
+      process.platform === 'win32' &&
+      (command.toLowerCase().endsWith('.cmd') || command === 'npx' || command === 'npm');
+
+    const childProcess = spawn(command, args, {
+      cwd,
+      env: processEnv,
+      stdio: [stdinData ? 'pipe' : 'ignore', 'pipe', 'pipe'],
+      shell: needsShell,
+    });
+
+    if (stdinData && childProcess.stdin) {
+      childProcess.stdin.write(stdinData);
+      childProcess.stdin.end();
+    }
+
+    let stdout = '';
+    let stderr = '';
+
+    if (childProcess.stdout) {
+      childProcess.stdout.on('data', (data: Buffer) => {
+        stdout += data.toString();
+      });
+    }
+
+    if (childProcess.stderr) {
+      childProcess.stderr.on('data', (data: Buffer) => {
+        stderr += data.toString();
+      });
+    }
+
+    // Setup abort handling with cleanup
+    let abortHandler: (() => void) | null = null;
+    const cleanupAbortListener = () => {
+      if (abortController && abortHandler) {
+        abortController.signal.removeEventListener('abort', abortHandler);
+        abortHandler = null;
+      }
+    };
+
+    if (abortController) {
+      abortHandler = () => {
+        cleanupAbortListener();
+        childProcess.kill('SIGTERM');
+
+        // Escalate to SIGKILL after 3 seconds if process hasn't exited
+        const killTimer = setTimeout(() => {
+          try {
+            childProcess.kill('SIGKILL');
+          } catch {
+            // Process may have already exited
+          }
+        }, 3000);
+        childProcess.once('exit', () => clearTimeout(killTimer));
+
+        reject(new Error('Process aborted'));
+      };
+      abortController.signal.addEventListener('abort', abortHandler);
+    }
+
+    childProcess.on('exit', (code) => {
+      cleanupAbortListener();
+      resolve({ stdout, stderr, exitCode: code });
+    });
+
+    childProcess.on('error', (error) => {
+      cleanupAbortListener();
+      reject(error);
+    });
+  });
+}
diff --git a/temp_repo/libs/platform/src/system-paths.ts b/temp_repo/libs/platform/src/system-paths.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c3af9f8a980ae49e59e7c5fb994972eb08b294e5
--- /dev/null
+++ b/temp_repo/libs/platform/src/system-paths.ts
@@ -0,0 +1,1466 @@
+/**
+ * System Paths Configuration
+ *
+ * Centralized configuration for ALL system paths that automaker needs to access
+ * outside of the ALLOWED_ROOT_DIRECTORY. These are well-known system paths for
+ * tools like GitHub CLI, Claude CLI, Node.js version managers, etc.
+ *
+ * ALL file system access must go through this module or secureFs.
+ * Direct fs imports are NOT allowed anywhere else in the codebase.
+ *
+ * Categories of system paths:
+ * 1. CLI Tools: GitHub CLI, Claude CLI
+ * 2. Version Managers: NVM, fnm, Volta
+ * 3. Shells: /bin/zsh, /bin/bash, PowerShell
+ * 4. Electron userData: API keys, window bounds, app settings
+ * 5. Script directories: node_modules, logs (relative to script)
+ */
+
+import os from 'os';
+import path from 'path';
+import fsSync from 'fs';
+import fs from 'fs/promises';
+
+// =============================================================================
+// System Tool Path Definitions
+// =============================================================================
+
+/**
+ * Get NVM for Windows (nvm4w) symlink paths for a given CLI tool.
+ * Reused across getClaudeCliPaths, getCodexCliPaths, and getOpenCodeCliPaths.
+ */
+function getNvmWindowsCliPaths(cliName: string): string[] {
+  const nvmSymlink = process.env.NVM_SYMLINK;
+  if (!nvmSymlink) return [];
+  return [path.join(nvmSymlink, `${cliName}.cmd`), path.join(nvmSymlink, cliName)];
+}
+
+/**
+ * Get common paths where GitHub CLI might be installed
+ */
+export function getGitHubCliPaths(): string[] {
+  const isWindows = process.platform === 'win32';
+
+  if (isWindows) {
+    return [
+      path.join(process.env.LOCALAPPDATA || '', 'Programs', 'gh', 'bin', 'gh.exe'),
+      path.join(process.env.ProgramFiles || '', 'GitHub CLI', 'gh.exe'),
+    ].filter(Boolean);
+  }
+
+  return [
+    '/opt/homebrew/bin/gh',
+    '/usr/local/bin/gh',
+    path.join(os.homedir(), '.local', 'bin', 'gh'),
+    '/home/linuxbrew/.linuxbrew/bin/gh',
+  ];
+}
+
+/**
+ * Get common paths where Claude CLI might be installed
+ */
+export function getClaudeCliPaths(): string[] {
+  const isWindows = process.platform === 'win32';
+
+  if (isWindows) {
+    const appData = process.env.APPDATA || path.join(os.homedir(), 'AppData', 'Roaming');
+    return [
+      path.join(os.homedir(), '.local', 'bin', 'claude.exe'),
+      path.join(appData, 'npm', 'claude.cmd'),
+      path.join(appData, 'npm', 'claude'),
+      path.join(appData, '.npm-global', 'bin', 'claude.cmd'),
+      path.join(appData, '.npm-global', 'bin', 'claude'),
+      ...getNvmWindowsCliPaths('claude'),
+    ];
+  }
+
+  return [
+    path.join(os.homedir(), '.local', 'bin', 'claude'),
+    path.join(os.homedir(), '.claude', 'local', 'claude'),
+    '/usr/local/bin/claude',
+    path.join(os.homedir(), '.npm-global', 'bin', 'claude'),
+  ];
+}
+
+/**
+ * Get NVM-installed Node.js bin paths for CLI tools
+ */
+function getNvmBinPaths(): string[] {
+  const nvmDir = process.env.NVM_DIR || path.join(os.homedir(), '.nvm');
+  const versionsDir = path.join(nvmDir, 'versions', 'node');
+
+  try {
+    if (!fsSync.existsSync(versionsDir)) {
+      return [];
+    }
+    const versions = fsSync.readdirSync(versionsDir);
+    return versions.map((version) => path.join(versionsDir, version, 'bin'));
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Get fnm (Fast Node Manager) installed Node.js bin paths
+ */
+function getFnmBinPaths(): string[] {
+  const homeDir = os.homedir();
+  const possibleFnmDirs = [
+    path.join(homeDir, '.local', 'share', 'fnm', 'node-versions'),
+    path.join(homeDir, '.fnm', 'node-versions'),
+    // macOS
+    path.join(homeDir, 'Library', 'Application Support', 'fnm', 'node-versions'),
+  ];
+
+  const binPaths: string[] = [];
+
+  for (const fnmDir of possibleFnmDirs) {
+    try {
+      if (!fsSync.existsSync(fnmDir)) {
+        continue;
+      }
+      const versions = fsSync.readdirSync(fnmDir);
+      for (const version of versions) {
+        binPaths.push(path.join(fnmDir, version, 'installation', 'bin'));
+      }
+    } catch {
+      // Ignore errors for this directory
+    }
+  }
+
+  return binPaths;
+}
+
+/**
+ * Get common paths where Codex CLI might be installed
+ */
+export function getCodexCliPaths(): string[] {
+  const isWindows = process.platform === 'win32';
+  const homeDir = os.homedir();
+
+  if (isWindows) {
+    const appData = process.env.APPDATA || path.join(homeDir, 'AppData', 'Roaming');
+    const localAppData = process.env.LOCALAPPDATA || path.join(homeDir, 'AppData', 'Local');
+    return [
+      path.join(homeDir, '.local', 'bin', 'codex.exe'),
+      path.join(appData, 'npm', 'codex.cmd'),
+      path.join(appData, 'npm', 'codex'),
+      path.join(appData, '.npm-global', 'bin', 'codex.cmd'),
+      path.join(appData, '.npm-global', 'bin', 'codex'),
+      // Volta on Windows
+      path.join(homeDir, '.volta', 'bin', 'codex.exe'),
+      // pnpm on Windows
+      path.join(localAppData, 'pnpm', 'codex.cmd'),
+      path.join(localAppData, 'pnpm', 'codex'),
+      ...getNvmWindowsCliPaths('codex'),
+    ];
+  }
+
+  // Include NVM bin paths for codex installed via npm global under NVM
+  const nvmBinPaths = getNvmBinPaths().map((binPath) => path.join(binPath, 'codex'));
+
+  // Include fnm bin paths
+  const fnmBinPaths = getFnmBinPaths().map((binPath) => path.join(binPath, 'codex'));
+
+  // pnpm global bin path
+  const pnpmHome = process.env.PNPM_HOME || path.join(homeDir, '.local', 'share', 'pnpm');
+
+  return [
+    // Standard locations
+    path.join(homeDir, '.local', 'bin', 'codex'),
+    '/opt/homebrew/bin/codex',
+    '/usr/local/bin/codex',
+    '/usr/bin/codex',
+    path.join(homeDir, '.npm-global', 'bin', 'codex'),
+    // Linuxbrew
+    '/home/linuxbrew/.linuxbrew/bin/codex',
+    // Volta
+    path.join(homeDir, '.volta', 'bin', 'codex'),
+    // pnpm global
+    path.join(pnpmHome, 'codex'),
+    // Yarn global
+    path.join(homeDir, '.yarn', 'bin', 'codex'),
+    path.join(homeDir, '.config', 'yarn', 'global', 'node_modules', '.bin', 'codex'),
+    // Snap packages
+    '/snap/bin/codex',
+    // NVM paths
+    ...nvmBinPaths,
+    // fnm paths
+    ...fnmBinPaths,
+  ];
+}
+
+const CODEX_CONFIG_DIR_NAME = '.codex';
+const CODEX_AUTH_FILENAME = 'auth.json';
+const CODEX_TOKENS_KEY = 'tokens';
+
+/**
+ * Get the Codex configuration directory path
+ */
+export function getCodexConfigDir(): string {
+  return path.join(os.homedir(), CODEX_CONFIG_DIR_NAME);
+}
+
+/**
+ * Get path to Codex auth file
+ */
+export function getCodexAuthPath(): string {
+  return path.join(getCodexConfigDir(), CODEX_AUTH_FILENAME);
+}
+
+/**
+ * Get the Claude configuration directory path
+ */
+export function getClaudeConfigDir(): string {
+  return path.join(os.homedir(), '.claude');
+}
+
+/**
+ * Get paths to Claude credential files
+ */
+export function getClaudeCredentialPaths(): string[] {
+  const claudeDir = getClaudeConfigDir();
+  return [path.join(claudeDir, '.credentials.json'), path.join(claudeDir, 'credentials.json')];
+}
+
+/**
+ * Get path to Claude settings file
+ */
+export function getClaudeSettingsPath(): string {
+  return path.join(getClaudeConfigDir(), 'settings.json');
+}
+
+/**
+ * Get path to Claude stats cache file
+ */
+export function getClaudeStatsCachePath(): string {
+  return path.join(getClaudeConfigDir(), 'stats-cache.json');
+}
+
+/**
+ * Get path to Claude projects/sessions directory
+ */
+export function getClaudeProjectsDir(): string {
+  return path.join(getClaudeConfigDir(), 'projects');
+}
+
+/**
+ * Enumerate directories matching a prefix pattern and return full paths
+ * Used to resolve dynamic directory names like version numbers
+ */
+function enumerateMatchingPaths(
+  parentDir: string,
+  prefix: string,
+  ...subPathParts: string[]
+): string[] {
+  try {
+    if (!fsSync.existsSync(parentDir)) {
+      return [];
+    }
+    const entries = fsSync.readdirSync(parentDir);
+    const matching = entries.filter((entry) => entry.startsWith(prefix));
+    return matching.map((entry) => path.join(parentDir, entry, ...subPathParts));
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Get common Git Bash installation paths on Windows
+ * Git Bash is needed for running shell scripts cross-platform
+ */
+export function getGitBashPaths(): string[] {
+  if (process.platform !== 'win32') {
+    return [];
+  }
+
+  const homeDir = os.homedir();
+  const localAppData = process.env.LOCALAPPDATA || '';
+
+  // Dynamic paths that require directory enumeration
+  // winget installs to: LocalAppData\Microsoft\WinGet\Packages\Git.Git_<hash>\bin\bash.exe
+  const wingetGitPaths = localAppData
+    ? enumerateMatchingPaths(
+        path.join(localAppData, 'Microsoft', 'WinGet', 'Packages'),
+        'Git.Git_',
+        'bin',
+        'bash.exe'
+      )
+    : [];
+
+  // GitHub Desktop bundles Git at: LocalAppData\GitHubDesktop\app-<version>\resources\app\git\cmd\bash.exe
+  const githubDesktopPaths = localAppData
+    ? enumerateMatchingPaths(
+        path.join(localAppData, 'GitHubDesktop'),
+        'app-',
+        'resources',
+        'app',
+        'git',
+        'cmd',
+        'bash.exe'
+      )
+    : [];
+
+  return [
+    // Standard Git for Windows installations
+    'C:\\Program Files\\Git\\bin\\bash.exe',
+    'C:\\Program Files (x86)\\Git\\bin\\bash.exe',
+    // User-local installations
+    path.join(localAppData, 'Programs', 'Git', 'bin', 'bash.exe'),
+    // Scoop package manager
+    path.join(homeDir, 'scoop', 'apps', 'git', 'current', 'bin', 'bash.exe'),
+    // Chocolatey
+    path.join(
+      process.env.ChocolateyInstall || 'C:\\ProgramData\\chocolatey',
+      'lib',
+      'git',
+      'tools',
+      'bin',
+      'bash.exe'
+    ),
+    // winget installations (dynamically resolved)
+    ...wingetGitPaths,
+    // GitHub Desktop bundled Git (dynamically resolved)
+    ...githubDesktopPaths,
+  ].filter(Boolean);
+}
+
+/**
+ * Get common shell paths for shell detection
+ * Includes both full paths and short names to match $SHELL or PATH entries
+ */
+export function getShellPaths(): string[] {
+  if (process.platform === 'win32') {
+    return [
+      // Full paths (most specific first)
+      'C:\\Program Files\\PowerShell\\7\\pwsh.exe',
+      'C:\\Program Files\\PowerShell\\7-preview\\pwsh.exe',
+      'C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe',
+      // COMSPEC environment variable (typically cmd.exe)
+      process.env.COMSPEC || 'C:\\Windows\\System32\\cmd.exe',
+      // Short names (for PATH resolution)
+      'pwsh.exe',
+      'pwsh',
+      'powershell.exe',
+      'powershell',
+      'cmd.exe',
+      'cmd',
+    ];
+  }
+
+  // POSIX (macOS, Linux)
+  return [
+    // Full paths
+    '/bin/zsh',
+    '/bin/bash',
+    '/bin/sh',
+    '/usr/bin/zsh',
+    '/usr/bin/bash',
+    '/usr/bin/sh',
+    '/usr/local/bin/zsh',
+    '/usr/local/bin/bash',
+    '/opt/homebrew/bin/zsh',
+    '/opt/homebrew/bin/bash',
+    // Short names (for PATH resolution or $SHELL matching)
+    'zsh',
+    'bash',
+    'sh',
+  ];
+}
+
+// =============================================================================
+// Node.js Version Manager Paths
+// =============================================================================
+
+/**
+ * Get NVM installation paths
+ */
+export function getNvmPaths(): string[] {
+  const homeDir = os.homedir();
+
+  if (process.platform === 'win32') {
+    const appData = process.env.APPDATA || path.join(homeDir, 'AppData', 'Roaming');
+    return [path.join(appData, 'nvm')];
+  }
+
+  return [path.join(homeDir, '.nvm', 'versions', 'node')];
+}
+
+/**
+ * Get fnm installation paths
+ */
+export function getFnmPaths(): string[] {
+  const homeDir = os.homedir();
+
+  if (process.platform === 'win32') {
+    const localAppData = process.env.LOCALAPPDATA || path.join(homeDir, 'AppData', 'Local');
+    return [
+      path.join(homeDir, '.fnm', 'node-versions'),
+      path.join(localAppData, 'fnm', 'node-versions'),
+    ];
+  }
+
+  if (process.platform === 'darwin') {
+    return [
+      path.join(homeDir, '.local', 'share', 'fnm', 'node-versions'),
+      path.join(homeDir, 'Library', 'Application Support', 'fnm', 'node-versions'),
+    ];
+  }
+
+  return [
+    path.join(homeDir, '.local', 'share', 'fnm', 'node-versions'),
+    path.join(homeDir, '.fnm', 'node-versions'),
+  ];
+}
+
+/**
+ * Get common Node.js installation paths (not version managers)
+ */
+export function getNodeSystemPaths(): string[] {
+  if (process.platform === 'win32') {
+    return [
+      path.join(process.env.PROGRAMFILES || 'C:\\Program Files', 'nodejs', 'node.exe'),
+      path.join(
+        process.env['PROGRAMFILES(X86)'] || 'C:\\Program Files (x86)',
+        'nodejs',
+        'node.exe'
+      ),
+    ];
+  }
+
+  if (process.platform === 'darwin') {
+    return ['/opt/homebrew/bin/node', '/usr/local/bin/node', '/usr/bin/node'];
+  }
+
+  // Linux
+  return ['/usr/bin/node', '/usr/local/bin/node', '/snap/bin/node'];
+}
+
+/**
+ * Get Scoop installation path for Node.js (Windows)
+ */
+export function getScoopNodePath(): string {
+  return path.join(os.homedir(), 'scoop', 'apps', 'nodejs', 'current', 'node.exe');
+}
+
+/**
+ * Get Chocolatey installation path for Node.js (Windows)
+ */
+export function getChocolateyNodePath(): string {
+  return path.join(
+    process.env.ChocolateyInstall || 'C:\\ProgramData\\chocolatey',
+    'bin',
+    'node.exe'
+  );
+}
+
+/**
+ * Get WSL detection path
+ */
+export function getWslVersionPath(): string {
+  return '/proc/version';
+}
+
+/**
+ * Extended PATH environment for finding system tools
+ */
+export function getExtendedPath(): string {
+  const paths = [
+    process.env.PATH,
+    '/opt/homebrew/bin',
+    '/usr/local/bin',
+    '/home/linuxbrew/.linuxbrew/bin',
+    `${process.env.HOME}/.local/bin`,
+  ];
+
+  return paths.filter(Boolean).join(process.platform === 'win32' ? ';' : ':');
+}
+
+// =============================================================================
+// System Path Access Methods (Unconstrained - only for system tool detection)
+// =============================================================================
+
+/**
+ * Check if a file exists at a system path (synchronous)
+ * IMPORTANT: This bypasses ALLOWED_ROOT_DIRECTORY restrictions.
+ * Only use for checking system tool installation paths.
+ */
+export function systemPathExists(filePath: string): boolean {
+  if (!isAllowedSystemPath(filePath)) {
+    throw new Error(`[SystemPaths] Access denied: ${filePath} is not an allowed system path`);
+  }
+  return fsSync.existsSync(filePath);
+}
+
+/**
+ * Check if a file is accessible at a system path (async)
+ * IMPORTANT: This bypasses ALLOWED_ROOT_DIRECTORY restrictions.
+ * Only use for checking system tool installation paths.
+ */
+export async function systemPathAccess(filePath: string): Promise<boolean> {
+  if (!isAllowedSystemPath(filePath)) {
+    throw new Error(`[SystemPaths] Access denied: ${filePath} is not an allowed system path`);
+  }
+  try {
+    await fs.access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if a file has execute permission (synchronous)
+ * On Windows, only checks existence (X_OK is not meaningful)
+ */
+export function systemPathIsExecutable(filePath: string): boolean {
+  if (!isAllowedSystemPath(filePath)) {
+    throw new Error(`[SystemPaths] Access denied: ${filePath} is not an allowed system path`);
+  }
+  try {
+    if (process.platform === 'win32') {
+      fsSync.accessSync(filePath, fsSync.constants.F_OK);
+    } else {
+      fsSync.accessSync(filePath, fsSync.constants.X_OK);
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Read a file from an allowed system path (async)
+ * IMPORTANT: This bypasses ALLOWED_ROOT_DIRECTORY restrictions.
+ * Only use for reading Claude config files and similar system configs.
+ */
+export async function systemPathReadFile(
+  filePath: string,
+  encoding: BufferEncoding = 'utf-8'
+): Promise<string> {
+  if (!isAllowedSystemPath(filePath)) {
+    throw new Error(`[SystemPaths] Access denied: ${filePath} is not an allowed system path`);
+  }
+  return fs.readFile(filePath, encoding);
+}
+
+/**
+ * Read a file from an allowed system path (synchronous)
+ */
+export function systemPathReadFileSync(
+  filePath: string,
+  encoding: BufferEncoding = 'utf-8'
+): string {
+  if (!isAllowedSystemPath(filePath)) {
+    throw new Error(`[SystemPaths] Access denied: ${filePath} is not an allowed system path`);
+  }
+  return fsSync.readFileSync(filePath, encoding);
+}
+
+/**
+ * Write a file to an allowed system path (synchronous)
+ */
+export function systemPathWriteFileSync(
+  filePath: string,
+  data: string,
+  options?: { encoding?: BufferEncoding; mode?: number }
+): void {
+  if (!isAllowedSystemPath(filePath)) {
+    throw new Error(`[SystemPaths] Access denied: ${filePath} is not an allowed system path`);
+  }
+  fsSync.writeFileSync(filePath, data, options);
+}
+
+/**
+ * Read directory contents from an allowed system path (async)
+ * IMPORTANT: This bypasses ALLOWED_ROOT_DIRECTORY restrictions.
+ */
+export async function systemPathReaddir(dirPath: string): Promise<string[]> {
+  if (!isAllowedSystemPath(dirPath)) {
+    throw new Error(`[SystemPaths] Access denied: ${dirPath} is not an allowed system path`);
+  }
+  return fs.readdir(dirPath);
+}
+
+/**
+ * Read directory contents from an allowed system path (synchronous)
+ */
+export function systemPathReaddirSync(dirPath: string): string[] {
+  if (!isAllowedSystemPath(dirPath)) {
+    throw new Error(`[SystemPaths] Access denied: ${dirPath} is not an allowed system path`);
+  }
+  return fsSync.readdirSync(dirPath);
+}
+
+/**
+ * Get file stats from a system path (synchronous)
+ */
+export function systemPathStatSync(filePath: string): fsSync.Stats {
+  if (!isAllowedSystemPath(filePath)) {
+    throw new Error(`[SystemPaths] Access denied: ${filePath} is not an allowed system path`);
+  }
+  return fsSync.statSync(filePath);
+}
+
+/**
+ * Get file stats from a system path (async)
+ */
+export async function systemPathStat(filePath: string): Promise<fsSync.Stats> {
+  if (!isAllowedSystemPath(filePath)) {
+    throw new Error(`[SystemPaths] Access denied: ${filePath} is not an allowed system path`);
+  }
+  return fs.stat(filePath);
+}
+
+// =============================================================================
+// Path Validation
+// =============================================================================
+
+/**
+ * All paths that are allowed for system tool detection
+ */
+function getAllAllowedSystemPaths(): string[] {
+  return [
+    // GitHub CLI paths
+    ...getGitHubCliPaths(),
+    // Claude CLI paths
+    ...getClaudeCliPaths(),
+    // Claude config directory and files
+    getClaudeConfigDir(),
+    ...getClaudeCredentialPaths(),
+    getClaudeSettingsPath(),
+    getClaudeStatsCachePath(),
+    getClaudeProjectsDir(),
+    // Codex CLI paths
+    ...getCodexCliPaths(),
+    // Codex config directory and files
+    getCodexConfigDir(),
+    getCodexAuthPath(),
+    // OpenCode CLI paths
+    ...getOpenCodeCliPaths(),
+    // OpenCode config directory and files
+    getOpenCodeConfigDir(),
+    getOpenCodeAuthPath(),
+    // Shell paths
+    ...getShellPaths(),
+    // Git Bash paths (for Windows cross-platform shell script execution)
+    ...getGitBashPaths(),
+    // Node.js system paths
+    ...getNodeSystemPaths(),
+    getScoopNodePath(),
+    getChocolateyNodePath(),
+    // WSL detection
+    getWslVersionPath(),
+  ];
+}
+
+/**
+ * Get all allowed directories (for recursive access)
+ */
+function getAllAllowedSystemDirs(): string[] {
+  return [
+    // Claude config
+    getClaudeConfigDir(),
+    getClaudeProjectsDir(),
+    // Codex config
+    getCodexConfigDir(),
+    // OpenCode config
+    getOpenCodeConfigDir(),
+    // Version managers (need recursive access for version directories)
+    ...getNvmPaths(),
+    ...getFnmPaths(),
+  ];
+}
+
+/**
+ * Check if a path is an allowed system path
+ * Paths must either be exactly in the allowed list, or be inside an allowed directory
+ */
+export function isAllowedSystemPath(filePath: string): boolean {
+  const normalizedPath = path.resolve(filePath);
+  const allowedPaths = getAllAllowedSystemPaths();
+
+  // Check for exact match
+  if (allowedPaths.includes(normalizedPath)) {
+    return true;
+  }
+
+  // Check if the path is inside an allowed directory
+  const allowedDirs = getAllAllowedSystemDirs();
+
+  for (const allowedDir of allowedDirs) {
+    const normalizedAllowedDir = path.resolve(allowedDir);
+    // Check if path is exactly the allowed dir or inside it
+    if (
+      normalizedPath === normalizedAllowedDir ||
+      normalizedPath.startsWith(normalizedAllowedDir + path.sep)
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+// =============================================================================
+// Electron userData Operations
+// =============================================================================
+
+// Store the Electron userData path (set by Electron main process)
+let electronUserDataPath: string | null = null;
+
+/**
+ * Set the Electron userData path (called from Electron main process)
+ */
+export function setElectronUserDataPath(userDataPath: string): void {
+  electronUserDataPath = userDataPath;
+}
+
+/**
+ * Get the Electron userData path
+ */
+export function getElectronUserDataPath(): string | null {
+  return electronUserDataPath;
+}
+
+/**
+ * Check if a path is within the Electron userData directory
+ */
+export function isElectronUserDataPath(filePath: string): boolean {
+  if (!electronUserDataPath) return false;
+  const normalizedPath = path.resolve(filePath);
+  const normalizedUserData = path.resolve(electronUserDataPath);
+  return (
+    normalizedPath === normalizedUserData ||
+    normalizedPath.startsWith(normalizedUserData + path.sep)
+  );
+}
+
+/**
+ * Read a file from Electron userData directory
+ */
+export function electronUserDataReadFileSync(
+  relativePath: string,
+  encoding: BufferEncoding = 'utf-8'
+): string {
+  if (!electronUserDataPath) {
+    throw new Error('[SystemPaths] Electron userData path not initialized');
+  }
+  const fullPath = path.join(electronUserDataPath, relativePath);
+  return fsSync.readFileSync(fullPath, encoding);
+}
+
+/**
+ * Write a file to Electron userData directory
+ */
+export function electronUserDataWriteFileSync(
+  relativePath: string,
+  data: string,
+  options?: { encoding?: BufferEncoding; mode?: number }
+): void {
+  if (!electronUserDataPath) {
+    throw new Error('[SystemPaths] Electron userData path not initialized');
+  }
+  const fullPath = path.join(electronUserDataPath, relativePath);
+  // Ensure parent directory exists (may not exist on first launch)
+  const dir = path.dirname(fullPath);
+  fsSync.mkdirSync(dir, { recursive: true });
+  fsSync.writeFileSync(fullPath, data, options);
+}
+
+/**
+ * Check if a file exists in Electron userData directory
+ */
+export function electronUserDataExists(relativePath: string): boolean {
+  if (!electronUserDataPath) return false;
+  const fullPath = path.join(electronUserDataPath, relativePath);
+  return fsSync.existsSync(fullPath);
+}
+
+// =============================================================================
+// Script Directory Operations (for init.mjs and similar)
+// =============================================================================
+
+// Store the script's base directory
+let scriptBaseDir: string | null = null;
+
+/**
+ * Set the script base directory
+ */
+export function setScriptBaseDir(baseDir: string): void {
+  scriptBaseDir = baseDir;
+}
+
+/**
+ * Get the script base directory
+ */
+export function getScriptBaseDir(): string | null {
+  return scriptBaseDir;
+}
+
+/**
+ * Check if a file exists relative to script base directory
+ */
+export function scriptDirExists(relativePath: string): boolean {
+  if (!scriptBaseDir) {
+    throw new Error('[SystemPaths] Script base directory not initialized');
+  }
+  const fullPath = path.join(scriptBaseDir, relativePath);
+  return fsSync.existsSync(fullPath);
+}
+
+/**
+ * Create a directory relative to script base directory
+ */
+export function scriptDirMkdirSync(relativePath: string, options?: { recursive?: boolean }): void {
+  if (!scriptBaseDir) {
+    throw new Error('[SystemPaths] Script base directory not initialized');
+  }
+  const fullPath = path.join(scriptBaseDir, relativePath);
+  fsSync.mkdirSync(fullPath, options);
+}
+
+/**
+ * Create a write stream for a file relative to script base directory
+ */
+export function scriptDirCreateWriteStream(relativePath: string): fsSync.WriteStream {
+  if (!scriptBaseDir) {
+    throw new Error('[SystemPaths] Script base directory not initialized');
+  }
+  const fullPath = path.join(scriptBaseDir, relativePath);
+  return fsSync.createWriteStream(fullPath);
+}
+
+// =============================================================================
+// Electron App Bundle Operations (for accessing app's own files)
+// =============================================================================
+
+// Store the Electron app bundle paths (can have multiple allowed directories)
+let electronAppDirs: string[] = [];
+let electronResourcesPath: string | null = null;
+
+/**
+ * Set the Electron app directories (called from Electron main process)
+ * In development mode, pass the project root to allow access to source files.
+ * In production mode, pass __dirname and process.resourcesPath.
+ *
+ * @param appDirOrDirs - Single directory or array of directories to allow
+ * @param resourcesPath - Optional resources path (for packaged apps)
+ */
+export function setElectronAppPaths(appDirOrDirs: string | string[], resourcesPath?: string): void {
+  electronAppDirs = Array.isArray(appDirOrDirs) ? appDirOrDirs : [appDirOrDirs];
+  electronResourcesPath = resourcesPath || null;
+}
+
+/**
+ * Check if a path is within the Electron app bundle (any of the allowed directories)
+ */
+function isElectronAppPath(filePath: string): boolean {
+  const normalizedPath = path.resolve(filePath);
+
+  // Check against all allowed app directories
+  for (const appDir of electronAppDirs) {
+    const normalizedAppDir = path.resolve(appDir);
+    if (
+      normalizedPath === normalizedAppDir ||
+      normalizedPath.startsWith(normalizedAppDir + path.sep)
+    ) {
+      return true;
+    }
+  }
+
+  // Check against resources path (for packaged apps)
+  if (electronResourcesPath) {
+    const normalizedResources = path.resolve(electronResourcesPath);
+    if (
+      normalizedPath === normalizedResources ||
+      normalizedPath.startsWith(normalizedResources + path.sep)
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Check if a file exists within the Electron app bundle
+ */
+export function electronAppExists(filePath: string): boolean {
+  if (!isElectronAppPath(filePath)) {
+    throw new Error(`[SystemPaths] Access denied: ${filePath} is not within Electron app bundle`);
+  }
+  return fsSync.existsSync(filePath);
+}
+
+/**
+ * Read a file from the Electron app bundle
+ */
+export function electronAppReadFileSync(filePath: string): Buffer {
+  if (!isElectronAppPath(filePath)) {
+    throw new Error(`[SystemPaths] Access denied: ${filePath} is not within Electron app bundle`);
+  }
+  return fsSync.readFileSync(filePath);
+}
+
+/**
+ * Get file stats from the Electron app bundle
+ */
+export function electronAppStatSync(filePath: string): fsSync.Stats {
+  if (!isElectronAppPath(filePath)) {
+    throw new Error(`[SystemPaths] Access denied: ${filePath} is not within Electron app bundle`);
+  }
+  return fsSync.statSync(filePath);
+}
+
+/**
+ * Get file stats from the Electron app bundle (async with callback for compatibility)
+ */
+export function electronAppStat(
+  filePath: string,
+  callback: (err: NodeJS.ErrnoException | null, stats: fsSync.Stats | undefined) => void
+): void {
+  if (!isElectronAppPath(filePath)) {
+    callback(
+      new Error(`[SystemPaths] Access denied: ${filePath} is not within Electron app bundle`),
+      undefined
+    );
+    return;
+  }
+  fsSync.stat(filePath, callback);
+}
+
+/**
+ * Read a file from the Electron app bundle (async with callback for compatibility)
+ */
+export function electronAppReadFile(
+  filePath: string,
+  callback: (err: NodeJS.ErrnoException | null, data: Buffer | undefined) => void
+): void {
+  if (!isElectronAppPath(filePath)) {
+    callback(
+      new Error(`[SystemPaths] Access denied: ${filePath} is not within Electron app bundle`),
+      undefined
+    );
+    return;
+  }
+  fsSync.readFile(filePath, callback);
+}
+
+// =============================================================================
+// High-level Tool Detection Methods
+// =============================================================================
+
+/**
+ * Find the first existing path from a list of system paths
+ */
+export async function findFirstExistingPath(paths: string[]): Promise<string | null> {
+  for (const p of paths) {
+    if (await systemPathAccess(p)) {
+      return p;
+    }
+  }
+  return null;
+}
+
+/**
+ * Check if GitHub CLI is installed and return its path
+ */
+export async function findGitHubCliPath(): Promise<string | null> {
+  return findFirstExistingPath(getGitHubCliPaths());
+}
+
+/**
+ * Check if Claude CLI is installed and return its path
+ */
+export async function findClaudeCliPath(): Promise<string | null> {
+  return findFirstExistingPath(getClaudeCliPaths());
+}
+
+export async function findCodexCliPath(): Promise<string | null> {
+  return findFirstExistingPath(getCodexCliPaths());
+}
+
+/**
+ * Find Git Bash on Windows and return its path
+ */
+export async function findGitBashPath(): Promise<string | null> {
+  return findFirstExistingPath(getGitBashPaths());
+}
+
+/**
+ * Details about a file check performed during auth detection
+ */
+export interface FileCheckResult {
+  path: string;
+  exists: boolean;
+  readable: boolean;
+  error?: string;
+}
+
+/**
+ * Details about a directory check performed during auth detection
+ */
+export interface DirectoryCheckResult {
+  path: string;
+  exists: boolean;
+  readable: boolean;
+  entryCount: number;
+  error?: string;
+}
+
+/**
+ * Get Claude authentication status by checking various indicators
+ */
+export interface ClaudeAuthIndicators {
+  hasCredentialsFile: boolean;
+  hasSettingsFile: boolean;
+  hasStatsCacheWithActivity: boolean;
+  hasProjectsSessions: boolean;
+  credentials: {
+    hasOAuthToken: boolean;
+    hasApiKey: boolean;
+  } | null;
+  /** Detailed information about what was checked */
+  checks: {
+    settingsFile: FileCheckResult;
+    statsCache: FileCheckResult & { hasDailyActivity?: boolean };
+    projectsDir: DirectoryCheckResult;
+    credentialFiles: FileCheckResult[];
+  };
+}
+
+export async function getClaudeAuthIndicators(): Promise<ClaudeAuthIndicators> {
+  const settingsPath = getClaudeSettingsPath();
+  const statsCachePath = getClaudeStatsCachePath();
+  const projectsDir = getClaudeProjectsDir();
+  const credentialPaths = getClaudeCredentialPaths();
+
+  // Initialize checks with paths
+  const settingsFileCheck: FileCheckResult = {
+    path: settingsPath,
+    exists: false,
+    readable: false,
+  };
+
+  const statsCacheCheck: FileCheckResult & { hasDailyActivity?: boolean } = {
+    path: statsCachePath,
+    exists: false,
+    readable: false,
+  };
+
+  const projectsDirCheck: DirectoryCheckResult = {
+    path: projectsDir,
+    exists: false,
+    readable: false,
+    entryCount: 0,
+  };
+
+  const credentialFileChecks: FileCheckResult[] = credentialPaths.map((p) => ({
+    path: p,
+    exists: false,
+    readable: false,
+  }));
+
+  const result: ClaudeAuthIndicators = {
+    hasCredentialsFile: false,
+    hasSettingsFile: false,
+    hasStatsCacheWithActivity: false,
+    hasProjectsSessions: false,
+    credentials: null,
+    checks: {
+      settingsFile: settingsFileCheck,
+      statsCache: statsCacheCheck,
+      projectsDir: projectsDirCheck,
+      credentialFiles: credentialFileChecks,
+    },
+  };
+
+  // Check settings file
+  // First check existence, then try to read to confirm it's actually readable
+  try {
+    if (await systemPathAccess(settingsPath)) {
+      settingsFileCheck.exists = true;
+      // Try to actually read the file to confirm read permissions
+      try {
+        await systemPathReadFile(settingsPath);
+        settingsFileCheck.readable = true;
+        result.hasSettingsFile = true;
+      } catch (readErr) {
+        // File exists but cannot be read (permission denied, etc.)
+        settingsFileCheck.readable = false;
+        settingsFileCheck.error = `Cannot read: ${readErr instanceof Error ? readErr.message : String(readErr)}`;
+      }
+    }
+  } catch (err) {
+    settingsFileCheck.error = err instanceof Error ? err.message : String(err);
+  }
+
+  // Check stats cache for recent activity
+  try {
+    const statsContent = await systemPathReadFile(statsCachePath);
+    statsCacheCheck.exists = true;
+    statsCacheCheck.readable = true;
+    try {
+      const stats = JSON.parse(statsContent);
+      if (stats.dailyActivity && stats.dailyActivity.length > 0) {
+        statsCacheCheck.hasDailyActivity = true;
+        result.hasStatsCacheWithActivity = true;
+      } else {
+        statsCacheCheck.hasDailyActivity = false;
+      }
+    } catch (parseErr) {
+      statsCacheCheck.error = `JSON parse error: ${parseErr instanceof Error ? parseErr.message : String(parseErr)}`;
+    }
+  } catch (err) {
+    if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+      statsCacheCheck.exists = false;
+    } else {
+      statsCacheCheck.error = err instanceof Error ? err.message : String(err);
+    }
+  }
+
+  // Check for sessions in projects directory
+  try {
+    const sessions = await systemPathReaddir(projectsDir);
+    projectsDirCheck.exists = true;
+    projectsDirCheck.readable = true;
+    projectsDirCheck.entryCount = sessions.length;
+    if (sessions.length > 0) {
+      result.hasProjectsSessions = true;
+    }
+  } catch (err) {
+    if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+      projectsDirCheck.exists = false;
+    } else {
+      projectsDirCheck.error = err instanceof Error ? err.message : String(err);
+    }
+  }
+
+  // Check credentials files
+  // We iterate through all credential paths and only stop when we find a file
+  // that contains actual credentials (OAuth tokens or API keys). An empty or
+  // token-less file should not prevent checking subsequent credential paths.
+  for (let i = 0; i < credentialPaths.length; i++) {
+    const credPath = credentialPaths[i];
+    const credCheck = credentialFileChecks[i];
+    try {
+      const content = await systemPathReadFile(credPath);
+      credCheck.exists = true;
+      credCheck.readable = true;
+      try {
+        const credentials = JSON.parse(content);
+        // Support multiple credential formats:
+        // 1. Claude Code CLI format: { claudeAiOauth: { accessToken, refreshToken } }
+        // 2. Legacy format: { oauth_token } or { access_token }
+        // 3. API key format: { api_key }
+        const hasClaudeOauth = !!credentials.claudeAiOauth?.accessToken;
+        const hasLegacyOauth = !!(credentials.oauth_token || credentials.access_token);
+        const hasOAuthToken = hasClaudeOauth || hasLegacyOauth;
+        const hasApiKey = !!credentials.api_key;
+
+        // Only consider this a valid credentials file if it actually contains tokens
+        // An empty JSON file ({}) or file without tokens should not stop us from
+        // checking subsequent credential paths
+        if (hasOAuthToken || hasApiKey) {
+          result.hasCredentialsFile = true;
+          result.credentials = {
+            hasOAuthToken,
+            hasApiKey,
+          };
+          break; // Found valid credentials, stop searching
+        }
+        // File exists and is valid JSON but contains no tokens - continue checking other paths
+      } catch (parseErr) {
+        credCheck.error = `JSON parse error: ${parseErr instanceof Error ? parseErr.message : String(parseErr)}`;
+      }
+    } catch (err) {
+      if ((err as NodeJS.ErrnoException).code === 'ENOENT') {
+        credCheck.exists = false;
+      } else {
+        credCheck.error = err instanceof Error ? err.message : String(err);
+      }
+    }
+  }
+
+  return result;
+}
+
+export interface CodexAuthIndicators {
+  hasAuthFile: boolean;
+  hasOAuthToken: boolean;
+  hasApiKey: boolean;
+}
+
+const CODEX_OAUTH_KEYS = ['access_token', 'oauth_token'] as const;
+const CODEX_API_KEY_KEYS = ['api_key', 'OPENAI_API_KEY'] as const;
+
+function hasNonEmptyStringField(record: Record<string, unknown>, keys: readonly string[]): boolean {
+  return keys.some((key) => typeof record[key] === 'string' && record[key]);
+}
+
+function getNestedTokens(record: Record<string, unknown>): Record<string, unknown> | null {
+  const tokens = record[CODEX_TOKENS_KEY];
+  if (tokens && typeof tokens === 'object' && !Array.isArray(tokens)) {
+    return tokens as Record<string, unknown>;
+  }
+  return null;
+}
+
+export async function getCodexAuthIndicators(): Promise<CodexAuthIndicators> {
+  const result: CodexAuthIndicators = {
+    hasAuthFile: false,
+    hasOAuthToken: false,
+    hasApiKey: false,
+  };
+
+  try {
+    const authContent = await systemPathReadFile(getCodexAuthPath());
+    result.hasAuthFile = true;
+
+    try {
+      const authJson = JSON.parse(authContent) as Record<string, unknown>;
+      result.hasOAuthToken = hasNonEmptyStringField(authJson, CODEX_OAUTH_KEYS);
+      result.hasApiKey = hasNonEmptyStringField(authJson, CODEX_API_KEY_KEYS);
+      const nestedTokens = getNestedTokens(authJson);
+      if (nestedTokens) {
+        result.hasOAuthToken =
+          result.hasOAuthToken || hasNonEmptyStringField(nestedTokens, CODEX_OAUTH_KEYS);
+        result.hasApiKey =
+          result.hasApiKey || hasNonEmptyStringField(nestedTokens, CODEX_API_KEY_KEYS);
+      }
+    } catch {
+      // Ignore parse errors; file exists but contents are unreadable
+    }
+  } catch {
+    // Auth file not found or inaccessible
+  }
+
+  return result;
+}
+
+// =============================================================================
+// OpenCode CLI Detection
+// =============================================================================
+
+const OPENCODE_DATA_DIR = '.local/share/opencode';
+const OPENCODE_AUTH_FILENAME = 'auth.json';
+const OPENCODE_TOKENS_KEY = 'tokens';
+
+/**
+ * Get common paths where OpenCode CLI might be installed
+ */
+export function getOpenCodeCliPaths(): string[] {
+  const isWindows = process.platform === 'win32';
+  const homeDir = os.homedir();
+
+  if (isWindows) {
+    const appData = process.env.APPDATA || path.join(homeDir, 'AppData', 'Roaming');
+    const localAppData = process.env.LOCALAPPDATA || path.join(homeDir, 'AppData', 'Local');
+    return [
+      // OpenCode's default installation directory
+      path.join(homeDir, '.opencode', 'bin', 'opencode.exe'),
+      path.join(homeDir, '.local', 'bin', 'opencode.exe'),
+      path.join(appData, 'npm', 'opencode.cmd'),
+      path.join(appData, 'npm', 'opencode'),
+      path.join(appData, '.npm-global', 'bin', 'opencode.cmd'),
+      path.join(appData, '.npm-global', 'bin', 'opencode'),
+      // Volta on Windows
+      path.join(homeDir, '.volta', 'bin', 'opencode.exe'),
+      // pnpm on Windows
+      path.join(localAppData, 'pnpm', 'opencode.cmd'),
+      path.join(localAppData, 'pnpm', 'opencode'),
+      // Go installation (if OpenCode is a Go binary)
+      path.join(homeDir, 'go', 'bin', 'opencode.exe'),
+      path.join(process.env.GOPATH || path.join(homeDir, 'go'), 'bin', 'opencode.exe'),
+      ...getNvmWindowsCliPaths('opencode'),
+    ];
+  }
+
+  // Include NVM bin paths for opencode installed via npm global under NVM
+  const nvmBinPaths = getNvmBinPaths().map((binPath) => path.join(binPath, 'opencode'));
+
+  // Include fnm bin paths
+  const fnmBinPaths = getFnmBinPaths().map((binPath) => path.join(binPath, 'opencode'));
+
+  // pnpm global bin path
+  const pnpmHome = process.env.PNPM_HOME || path.join(homeDir, '.local', 'share', 'pnpm');
+
+  return [
+    // OpenCode's default installation directory
+    path.join(homeDir, '.opencode', 'bin', 'opencode'),
+    // Standard locations
+    path.join(homeDir, '.local', 'bin', 'opencode'),
+    '/opt/homebrew/bin/opencode',
+    '/usr/local/bin/opencode',
+    '/usr/bin/opencode',
+    path.join(homeDir, '.npm-global', 'bin', 'opencode'),
+    // Linuxbrew
+    '/home/linuxbrew/.linuxbrew/bin/opencode',
+    // Volta
+    path.join(homeDir, '.volta', 'bin', 'opencode'),
+    // pnpm global
+    path.join(pnpmHome, 'opencode'),
+    // Yarn global
+    path.join(homeDir, '.yarn', 'bin', 'opencode'),
+    path.join(homeDir, '.config', 'yarn', 'global', 'node_modules', '.bin', 'opencode'),
+    // Go installation (if OpenCode is a Go binary)
+    path.join(homeDir, 'go', 'bin', 'opencode'),
+    path.join(process.env.GOPATH || path.join(homeDir, 'go'), 'bin', 'opencode'),
+    // Snap packages
+    '/snap/bin/opencode',
+    // NVM paths
+    ...nvmBinPaths,
+    // fnm paths
+    ...fnmBinPaths,
+  ];
+}
+
+/**
+ * Get the OpenCode data directory path
+ * macOS/Linux: ~/.local/share/opencode
+ * Windows: %USERPROFILE%\.local\share\opencode
+ */
+export function getOpenCodeConfigDir(): string {
+  return path.join(os.homedir(), OPENCODE_DATA_DIR);
+}
+
+/**
+ * Get path to OpenCode auth file
+ */
+export function getOpenCodeAuthPath(): string {
+  return path.join(getOpenCodeConfigDir(), OPENCODE_AUTH_FILENAME);
+}
+
+/**
+ * Check if OpenCode CLI is installed and return its path
+ */
+export async function findOpenCodeCliPath(): Promise<string | null> {
+  return findFirstExistingPath(getOpenCodeCliPaths());
+}
+
+export interface OpenCodeAuthIndicators {
+  hasAuthFile: boolean;
+  hasOAuthToken: boolean;
+  hasApiKey: boolean;
+}
+
+const OPENCODE_OAUTH_KEYS = ['access_token', 'oauth_token'] as const;
+const OPENCODE_API_KEY_KEYS = ['api_key', 'OPENAI_API_KEY', 'ANTHROPIC_API_KEY'] as const;
+
+// Provider names that OpenCode uses for provider-specific auth entries
+// NOTE: github-copilot uses refresh tokens, so 'access' may be empty but 'refresh' is valid
+const OPENCODE_PROVIDERS = [
+  'anthropic',
+  'openai',
+  'google',
+  'bedrock',
+  'amazon-bedrock',
+  'github-copilot',
+  'copilot',
+] as const;
+
+function getOpenCodeNestedTokens(record: Record<string, unknown>): Record<string, unknown> | null {
+  const tokens = record[OPENCODE_TOKENS_KEY];
+  if (tokens && typeof tokens === 'object' && !Array.isArray(tokens)) {
+    return tokens as Record<string, unknown>;
+  }
+  return null;
+}
+
+/**
+ * Check if the auth JSON has provider-specific OAuth credentials
+ * OpenCode stores auth in format: { "anthropic": { "type": "oauth", "access": "...", "refresh": "..." } }
+ * GitHub Copilot uses refresh tokens, so 'access' may be empty but 'refresh' is valid
+ */
+function hasProviderOAuth(authJson: Record<string, unknown>): boolean {
+  for (const provider of OPENCODE_PROVIDERS) {
+    const providerAuth = authJson[provider];
+    if (providerAuth && typeof providerAuth === 'object' && !Array.isArray(providerAuth)) {
+      const auth = providerAuth as Record<string, unknown>;
+      // Check for OAuth type with access token OR refresh token (GitHub Copilot uses refresh tokens)
+      if (auth.type === 'oauth') {
+        if (
+          (typeof auth.access === 'string' && auth.access) ||
+          (typeof auth.refresh === 'string' && auth.refresh)
+        ) {
+          return true;
+        }
+      }
+      // Also check for access_token field directly
+      if (typeof auth.access_token === 'string' && auth.access_token) {
+        return true;
+      }
+      // Check for refresh_token field directly
+      if (typeof auth.refresh_token === 'string' && auth.refresh_token) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+/**
+ * Check if the auth JSON has provider-specific API key credentials
+ */
+function hasProviderApiKey(authJson: Record<string, unknown>): boolean {
+  for (const provider of OPENCODE_PROVIDERS) {
+    const providerAuth = authJson[provider];
+    if (providerAuth && typeof providerAuth === 'object' && !Array.isArray(providerAuth)) {
+      const auth = providerAuth as Record<string, unknown>;
+      // Check for API key type
+      if (auth.type === 'api_key' && typeof auth.key === 'string' && auth.key) {
+        return true;
+      }
+      // Also check for api_key field directly
+      if (typeof auth.api_key === 'string' && auth.api_key) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+/**
+ * Get OpenCode authentication status by checking auth file indicators
+ */
+export async function getOpenCodeAuthIndicators(): Promise<OpenCodeAuthIndicators> {
+  const result: OpenCodeAuthIndicators = {
+    hasAuthFile: false,
+    hasOAuthToken: false,
+    hasApiKey: false,
+  };
+
+  try {
+    const authContent = await systemPathReadFile(getOpenCodeAuthPath());
+    result.hasAuthFile = true;
+
+    try {
+      const authJson = JSON.parse(authContent) as Record<string, unknown>;
+
+      // Check for legacy top-level keys
+      result.hasOAuthToken = hasNonEmptyStringField(authJson, OPENCODE_OAUTH_KEYS);
+      result.hasApiKey = hasNonEmptyStringField(authJson, OPENCODE_API_KEY_KEYS);
+
+      // Check for nested tokens object (legacy format)
+      const nestedTokens = getOpenCodeNestedTokens(authJson);
+      if (nestedTokens) {
+        result.hasOAuthToken =
+          result.hasOAuthToken || hasNonEmptyStringField(nestedTokens, OPENCODE_OAUTH_KEYS);
+        result.hasApiKey =
+          result.hasApiKey || hasNonEmptyStringField(nestedTokens, OPENCODE_API_KEY_KEYS);
+      }
+
+      // Check for provider-specific auth entries (current OpenCode format)
+      // Format: { "anthropic": { "type": "oauth", "access": "...", "refresh": "..." } }
+      result.hasOAuthToken = result.hasOAuthToken || hasProviderOAuth(authJson);
+      result.hasApiKey = result.hasApiKey || hasProviderApiKey(authJson);
+    } catch {
+      // Ignore parse errors; file exists but contents are unreadable
+    }
+  } catch {
+    // Auth file not found or inaccessible
+  }
+
+  return result;
+}
diff --git a/temp_repo/libs/platform/src/terminal-theme-colors.ts b/temp_repo/libs/platform/src/terminal-theme-colors.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2784fa65671847afd1bf607b907d5df34ae7a0d6
--- /dev/null
+++ b/temp_repo/libs/platform/src/terminal-theme-colors.ts
@@ -0,0 +1,468 @@
+/**
+ * Terminal Theme Colors - Color definitions for all 40 themes
+ *
+ * This module contains only the raw color data for terminal themes,
+ * extracted from the UI package to avoid circular dependencies.
+ * These colors are used by both UI (xterm.js) and server (RC file generation).
+ */
+
+import type { ThemeMode } from '@automaker/types';
+import type { TerminalTheme } from './rc-generator.js';
+
+// Dark theme (default) - true black background with white foreground
+const darkTheme: TerminalTheme = {
+  background: '#000000',
+  foreground: '#ffffff',
+  cursor: '#ffffff',
+  cursorAccent: '#000000',
+  selectionBackground: '#264f78',
+  black: '#1e1e1e',
+  red: '#f44747',
+  green: '#6a9955',
+  yellow: '#dcdcaa',
+  blue: '#569cd6',
+  magenta: '#c586c0',
+  cyan: '#4ec9b0',
+  white: '#d4d4d4',
+  brightBlack: '#808080',
+  brightRed: '#f44747',
+  brightGreen: '#6a9955',
+  brightYellow: '#dcdcaa',
+  brightBlue: '#569cd6',
+  brightMagenta: '#c586c0',
+  brightCyan: '#4ec9b0',
+  brightWhite: '#ffffff',
+};
+
+// Light theme
+const lightTheme: TerminalTheme = {
+  background: '#ffffff',
+  foreground: '#383a42',
+  cursor: '#383a42',
+  cursorAccent: '#ffffff',
+  selectionBackground: '#add6ff',
+  black: '#383a42',
+  red: '#e45649',
+  green: '#50a14f',
+  yellow: '#c18401',
+  blue: '#4078f2',
+  magenta: '#a626a4',
+  cyan: '#0184bc',
+  white: '#fafafa',
+  brightBlack: '#4f525e',
+  brightRed: '#e06c75',
+  brightGreen: '#98c379',
+  brightYellow: '#e5c07b',
+  brightBlue: '#61afef',
+  brightMagenta: '#c678dd',
+  brightCyan: '#56b6c2',
+  brightWhite: '#ffffff',
+};
+
+// Retro / Cyberpunk theme - neon green on black
+const retroTheme: TerminalTheme = {
+  background: '#000000',
+  foreground: '#39ff14',
+  cursor: '#39ff14',
+  cursorAccent: '#000000',
+  selectionBackground: '#39ff14',
+  selectionForeground: '#000000',
+  black: '#000000',
+  red: '#ff0055',
+  green: '#39ff14',
+  yellow: '#ffff00',
+  blue: '#00ffff',
+  magenta: '#ff00ff',
+  cyan: '#00ffff',
+  white: '#39ff14',
+  brightBlack: '#555555',
+  brightRed: '#ff5555',
+  brightGreen: '#55ff55',
+  brightYellow: '#ffff55',
+  brightBlue: '#55ffff',
+  brightMagenta: '#ff55ff',
+  brightCyan: '#55ffff',
+  brightWhite: '#ffffff',
+};
+
+// Dracula theme
+const draculaTheme: TerminalTheme = {
+  background: '#282a36',
+  foreground: '#f8f8f2',
+  cursor: '#f8f8f2',
+  cursorAccent: '#282a36',
+  selectionBackground: '#44475a',
+  black: '#21222c',
+  red: '#ff5555',
+  green: '#50fa7b',
+  yellow: '#f1fa8c',
+  blue: '#bd93f9',
+  magenta: '#ff79c6',
+  cyan: '#8be9fd',
+  white: '#f8f8f2',
+  brightBlack: '#6272a4',
+  brightRed: '#ff6e6e',
+  brightGreen: '#69ff94',
+  brightYellow: '#ffffa5',
+  brightBlue: '#d6acff',
+  brightMagenta: '#ff92df',
+  brightCyan: '#a4ffff',
+  brightWhite: '#ffffff',
+};
+
+// Nord theme
+const nordTheme: TerminalTheme = {
+  background: '#2e3440',
+  foreground: '#d8dee9',
+  cursor: '#d8dee9',
+  cursorAccent: '#2e3440',
+  selectionBackground: '#434c5e',
+  black: '#3b4252',
+  red: '#bf616a',
+  green: '#a3be8c',
+  yellow: '#ebcb8b',
+  blue: '#81a1c1',
+  magenta: '#b48ead',
+  cyan: '#88c0d0',
+  white: '#e5e9f0',
+  brightBlack: '#4c566a',
+  brightRed: '#bf616a',
+  brightGreen: '#a3be8c',
+  brightYellow: '#ebcb8b',
+  brightBlue: '#81a1c1',
+  brightMagenta: '#b48ead',
+  brightCyan: '#8fbcbb',
+  brightWhite: '#eceff4',
+};
+
+// Monokai theme
+const monokaiTheme: TerminalTheme = {
+  background: '#272822',
+  foreground: '#f8f8f2',
+  cursor: '#f8f8f2',
+  cursorAccent: '#272822',
+  selectionBackground: '#49483e',
+  black: '#272822',
+  red: '#f92672',
+  green: '#a6e22e',
+  yellow: '#f4bf75',
+  blue: '#66d9ef',
+  magenta: '#ae81ff',
+  cyan: '#a1efe4',
+  white: '#f8f8f2',
+  brightBlack: '#75715e',
+  brightRed: '#f92672',
+  brightGreen: '#a6e22e',
+  brightYellow: '#f4bf75',
+  brightBlue: '#66d9ef',
+  brightMagenta: '#ae81ff',
+  brightCyan: '#a1efe4',
+  brightWhite: '#f9f8f5',
+};
+
+// Tokyo Night theme
+const tokyonightTheme: TerminalTheme = {
+  background: '#1a1b26',
+  foreground: '#a9b1d6',
+  cursor: '#c0caf5',
+  cursorAccent: '#1a1b26',
+  selectionBackground: '#33467c',
+  black: '#15161e',
+  red: '#f7768e',
+  green: '#9ece6a',
+  yellow: '#e0af68',
+  blue: '#7aa2f7',
+  magenta: '#bb9af7',
+  cyan: '#7dcfff',
+  white: '#a9b1d6',
+  brightBlack: '#414868',
+  brightRed: '#f7768e',
+  brightGreen: '#9ece6a',
+  brightYellow: '#e0af68',
+  brightBlue: '#7aa2f7',
+  brightMagenta: '#bb9af7',
+  brightCyan: '#7dcfff',
+  brightWhite: '#c0caf5',
+};
+
+// Solarized Dark theme
+const solarizedTheme: TerminalTheme = {
+  background: '#002b36',
+  foreground: '#93a1a1',
+  cursor: '#93a1a1',
+  cursorAccent: '#002b36',
+  selectionBackground: '#073642',
+  black: '#073642',
+  red: '#dc322f',
+  green: '#859900',
+  yellow: '#b58900',
+  blue: '#268bd2',
+  magenta: '#d33682',
+  cyan: '#2aa198',
+  white: '#eee8d5',
+  brightBlack: '#002b36',
+  brightRed: '#cb4b16',
+  brightGreen: '#586e75',
+  brightYellow: '#657b83',
+  brightBlue: '#839496',
+  brightMagenta: '#6c71c4',
+  brightCyan: '#93a1a1',
+  brightWhite: '#fdf6e3',
+};
+
+// Gruvbox Dark theme
+const gruvboxTheme: TerminalTheme = {
+  background: '#282828',
+  foreground: '#ebdbb2',
+  cursor: '#ebdbb2',
+  cursorAccent: '#282828',
+  selectionBackground: '#504945',
+  black: '#282828',
+  red: '#cc241d',
+  green: '#98971a',
+  yellow: '#d79921',
+  blue: '#458588',
+  magenta: '#b16286',
+  cyan: '#689d6a',
+  white: '#a89984',
+  brightBlack: '#928374',
+  brightRed: '#fb4934',
+  brightGreen: '#b8bb26',
+  brightYellow: '#fabd2f',
+  brightBlue: '#83a598',
+  brightMagenta: '#d3869b',
+  brightCyan: '#8ec07c',
+  brightWhite: '#ebdbb2',
+};
+
+// Catppuccin Mocha theme
+const catppuccinTheme: TerminalTheme = {
+  background: '#1e1e2e',
+  foreground: '#cdd6f4',
+  cursor: '#f5e0dc',
+  cursorAccent: '#1e1e2e',
+  selectionBackground: '#45475a',
+  black: '#45475a',
+  red: '#f38ba8',
+  green: '#a6e3a1',
+  yellow: '#f9e2af',
+  blue: '#89b4fa',
+  magenta: '#cba6f7',
+  cyan: '#94e2d5',
+  white: '#bac2de',
+  brightBlack: '#585b70',
+  brightRed: '#f38ba8',
+  brightGreen: '#a6e3a1',
+  brightYellow: '#f9e2af',
+  brightBlue: '#89b4fa',
+  brightMagenta: '#cba6f7',
+  brightCyan: '#94e2d5',
+  brightWhite: '#a6adc8',
+};
+
+// One Dark theme
+const onedarkTheme: TerminalTheme = {
+  background: '#282c34',
+  foreground: '#abb2bf',
+  cursor: '#528bff',
+  cursorAccent: '#282c34',
+  selectionBackground: '#3e4451',
+  black: '#282c34',
+  red: '#e06c75',
+  green: '#98c379',
+  yellow: '#e5c07b',
+  blue: '#61afef',
+  magenta: '#c678dd',
+  cyan: '#56b6c2',
+  white: '#abb2bf',
+  brightBlack: '#5c6370',
+  brightRed: '#e06c75',
+  brightGreen: '#98c379',
+  brightYellow: '#e5c07b',
+  brightBlue: '#61afef',
+  brightMagenta: '#c678dd',
+  brightCyan: '#56b6c2',
+  brightWhite: '#ffffff',
+};
+
+// Synthwave '84 theme
+const synthwaveTheme: TerminalTheme = {
+  background: '#262335',
+  foreground: '#ffffff',
+  cursor: '#ff7edb',
+  cursorAccent: '#262335',
+  selectionBackground: '#463465',
+  black: '#262335',
+  red: '#fe4450',
+  green: '#72f1b8',
+  yellow: '#fede5d',
+  blue: '#03edf9',
+  magenta: '#ff7edb',
+  cyan: '#03edf9',
+  white: '#ffffff',
+  brightBlack: '#614d85',
+  brightRed: '#fe4450',
+  brightGreen: '#72f1b8',
+  brightYellow: '#f97e72',
+  brightBlue: '#03edf9',
+  brightMagenta: '#ff7edb',
+  brightCyan: '#03edf9',
+  brightWhite: '#ffffff',
+};
+
+// Red theme
+const redTheme: TerminalTheme = {
+  background: '#1a0a0a',
+  foreground: '#c8b0b0',
+  cursor: '#ff4444',
+  cursorAccent: '#1a0a0a',
+  selectionBackground: '#5a2020',
+  black: '#2a1010',
+  red: '#ff4444',
+  green: '#6a9a6a',
+  yellow: '#ccaa55',
+  blue: '#6688aa',
+  magenta: '#aa5588',
+  cyan: '#558888',
+  white: '#b0a0a0',
+  brightBlack: '#6a4040',
+  brightRed: '#ff6666',
+  brightGreen: '#88bb88',
+  brightYellow: '#ddbb66',
+  brightBlue: '#88aacc',
+  brightMagenta: '#cc77aa',
+  brightCyan: '#77aaaa',
+  brightWhite: '#d0c0c0',
+};
+
+// Cream theme
+const creamTheme: TerminalTheme = {
+  background: '#f5f3ee',
+  foreground: '#5a4a3a',
+  cursor: '#9d6b53',
+  cursorAccent: '#f5f3ee',
+  selectionBackground: '#d4c4b0',
+  black: '#5a4a3a',
+  red: '#c85a4f',
+  green: '#7a9a6a',
+  yellow: '#c9a554',
+  blue: '#6b8aaa',
+  magenta: '#a66a8a',
+  cyan: '#5a9a8a',
+  white: '#b0a090',
+  brightBlack: '#8a7a6a',
+  brightRed: '#e07060',
+  brightGreen: '#90b080',
+  brightYellow: '#e0bb70',
+  brightBlue: '#80a0c0',
+  brightMagenta: '#c080a0',
+  brightCyan: '#70b0a0',
+  brightWhite: '#d0c0b0',
+};
+
+// Sunset theme
+const sunsetTheme: TerminalTheme = {
+  background: '#1e1a24',
+  foreground: '#f2e8dd',
+  cursor: '#dd8855',
+  cursorAccent: '#1e1a24',
+  selectionBackground: '#3a2a40',
+  black: '#1e1a24',
+  red: '#dd6655',
+  green: '#88bb77',
+  yellow: '#ddaa66',
+  blue: '#6699cc',
+  magenta: '#cc7799',
+  cyan: '#66ccaa',
+  white: '#e8d8c8',
+  brightBlack: '#4a3a50',
+  brightRed: '#ee8866',
+  brightGreen: '#99cc88',
+  brightYellow: '#eebb77',
+  brightBlue: '#88aadd',
+  brightMagenta: '#dd88aa',
+  brightCyan: '#88ddbb',
+  brightWhite: '#f5e8dd',
+};
+
+// Gray theme
+const grayTheme: TerminalTheme = {
+  background: '#2a2d32',
+  foreground: '#d0d0d5',
+  cursor: '#8fa0c0',
+  cursorAccent: '#2a2d32',
+  selectionBackground: '#3a3f48',
+  black: '#2a2d32',
+  red: '#d87070',
+  green: '#78b088',
+  yellow: '#d0b060',
+  blue: '#7090c0',
+  magenta: '#a880b0',
+  cyan: '#60a0b0',
+  white: '#b0b0b8',
+  brightBlack: '#606068',
+  brightRed: '#e88888',
+  brightGreen: '#90c8a0',
+  brightYellow: '#e0c878',
+  brightBlue: '#90b0d8',
+  brightMagenta: '#c098c8',
+  brightCyan: '#80b8c8',
+  brightWhite: '#e0e0e8',
+};
+
+/**
+ * Theme color mapping for all 40 themes
+ */
+export const terminalThemeColors: Record<ThemeMode, TerminalTheme> = {
+  // Special
+  system: darkTheme, // Resolved at runtime based on OS preference
+  // Dark themes (16)
+  dark: darkTheme,
+  retro: retroTheme,
+  dracula: draculaTheme,
+  nord: nordTheme,
+  monokai: monokaiTheme,
+  tokyonight: tokyonightTheme,
+  solarized: solarizedTheme,
+  gruvbox: gruvboxTheme,
+  catppuccin: catppuccinTheme,
+  onedark: onedarkTheme,
+  synthwave: synthwaveTheme,
+  red: redTheme,
+  sunset: sunsetTheme,
+  gray: grayTheme,
+  forest: gruvboxTheme, // Green-ish theme
+  ocean: nordTheme, // Blue-ish theme
+  ember: monokaiTheme, // Warm orange theme
+  'ayu-dark': darkTheme,
+  'ayu-mirage': darkTheme,
+  matcha: nordTheme,
+  // Light themes (16)
+  light: lightTheme,
+  cream: creamTheme,
+  solarizedlight: lightTheme,
+  github: lightTheme,
+  paper: lightTheme,
+  rose: lightTheme,
+  mint: lightTheme,
+  lavender: lightTheme,
+  sand: creamTheme,
+  sky: lightTheme,
+  peach: creamTheme,
+  snow: lightTheme,
+  sepia: creamTheme,
+  gruvboxlight: creamTheme,
+  nordlight: lightTheme,
+  blossom: lightTheme,
+  'ayu-light': lightTheme,
+  onelight: lightTheme,
+  bluloco: lightTheme,
+  feather: lightTheme,
+};
+
+/**
+ * Get terminal theme colors for a given theme mode
+ */
+export function getTerminalThemeColors(theme: ThemeMode): TerminalTheme {
+  return terminalThemeColors[theme] || darkTheme;
+}
diff --git a/temp_repo/libs/platform/src/terminal.ts b/temp_repo/libs/platform/src/terminal.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a9cbb0c492a03870bbf973550de3b21ecbbcd536
--- /dev/null
+++ b/temp_repo/libs/platform/src/terminal.ts
@@ -0,0 +1,612 @@
+/**
+ * Cross-platform terminal detection and launching utilities
+ *
+ * Handles:
+ * - Detecting available external terminals on the system
+ * - Cross-platform terminal launching
+ * - Caching of detected terminals for performance
+ */
+
+import { execFile, spawn, type ChildProcess } from 'child_process';
+import { promisify } from 'util';
+import { homedir } from 'os';
+import { join } from 'path';
+import { access } from 'fs/promises';
+import type { TerminalInfo } from '@automaker/types';
+
+const execFileAsync = promisify(execFile);
+
+// Platform detection
+const isWindows = process.platform === 'win32';
+const isMac = process.platform === 'darwin';
+const isLinux = process.platform === 'linux';
+
+// Cache with TTL for terminal detection
+let cachedTerminals: TerminalInfo[] | null = null;
+let cacheTimestamp: number = 0;
+const CACHE_TTL_MS = 5 * 60 * 1000; // 5 minutes
+
+/**
+ * Check if the terminal cache is still valid
+ */
+function isCacheValid(): boolean {
+  return cachedTerminals !== null && Date.now() - cacheTimestamp < CACHE_TTL_MS;
+}
+
+/**
+ * Clear the terminal detection cache
+ * Useful when terminals may have been installed/uninstalled
+ */
+export function clearTerminalCache(): void {
+  cachedTerminals = null;
+  cacheTimestamp = 0;
+}
+
+/**
+ * Check if a CLI command exists in PATH
+ * Uses platform-specific command lookup (where on Windows, which on Unix)
+ */
+async function commandExists(cmd: string): Promise<boolean> {
+  try {
+    const whichCmd = isWindows ? 'where' : 'which';
+    await execFileAsync(whichCmd, [cmd]);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Check if a macOS app bundle exists and return the path if found
+ * Checks /Applications, /System/Applications (for built-in apps), and ~/Applications
+ */
+async function findMacApp(appName: string): Promise<string | null> {
+  if (!isMac) return null;
+
+  // Check /Applications first (third-party apps)
+  const appPath = join('/Applications', `${appName}.app`);
+  try {
+    await access(appPath);
+    return appPath;
+  } catch {
+    // Not in /Applications
+  }
+
+  // Check /System/Applications (built-in macOS apps like Terminal on Catalina+)
+  const systemAppPath = join('/System/Applications', `${appName}.app`);
+  try {
+    await access(systemAppPath);
+    return systemAppPath;
+  } catch {
+    // Not in /System/Applications
+  }
+
+  // Check ~/Applications (used by some installers)
+  const userAppPath = join(homedir(), 'Applications', `${appName}.app`);
+  try {
+    await access(userAppPath);
+    return userAppPath;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Check if a Windows path exists
+ */
+async function windowsPathExists(path: string): Promise<boolean> {
+  if (!isWindows) return false;
+
+  try {
+    await access(path);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Terminal definition with CLI command and platform-specific identifiers
+ */
+interface TerminalDefinition {
+  id: string;
+  name: string;
+  /** CLI command (cross-platform, checked via which/where) */
+  cliCommand?: string;
+  /** Alternative CLI commands to check */
+  cliAliases?: readonly string[];
+  /** macOS app bundle name */
+  macAppName?: string;
+  /** Windows executable paths to check */
+  windowsPaths?: readonly string[];
+  /** Linux binary paths to check */
+  linuxPaths?: readonly string[];
+  /** Platform restriction */
+  platform?: 'darwin' | 'win32' | 'linux';
+}
+
+/**
+ * List of supported terminals in priority order
+ */
+const SUPPORTED_TERMINALS: TerminalDefinition[] = [
+  // macOS terminals
+  {
+    id: 'iterm2',
+    name: 'iTerm2',
+    cliCommand: 'iterm2',
+    macAppName: 'iTerm',
+    platform: 'darwin',
+  },
+  {
+    id: 'warp',
+    name: 'Warp',
+    cliCommand: 'warp-cli',
+    cliAliases: ['warp-terminal', 'warp'],
+    macAppName: 'Warp',
+  },
+  {
+    id: 'ghostty',
+    name: 'Ghostty',
+    cliCommand: 'ghostty',
+    macAppName: 'Ghostty',
+  },
+  {
+    id: 'rio',
+    name: 'Rio',
+    cliCommand: 'rio',
+    macAppName: 'Rio',
+  },
+  {
+    id: 'alacritty',
+    name: 'Alacritty',
+    cliCommand: 'alacritty',
+    macAppName: 'Alacritty',
+  },
+  {
+    id: 'wezterm',
+    name: 'WezTerm',
+    cliCommand: 'wezterm',
+    macAppName: 'WezTerm',
+  },
+  {
+    id: 'kitty',
+    name: 'Kitty',
+    cliCommand: 'kitty',
+    macAppName: 'kitty',
+  },
+  {
+    id: 'hyper',
+    name: 'Hyper',
+    cliCommand: 'hyper',
+    macAppName: 'Hyper',
+  },
+  {
+    id: 'tabby',
+    name: 'Tabby',
+    cliCommand: 'tabby',
+    macAppName: 'Tabby',
+  },
+  {
+    id: 'terminal-macos',
+    name: 'System Terminal',
+    macAppName: 'Utilities/Terminal',
+    platform: 'darwin',
+  },
+
+  // Windows terminals
+  {
+    id: 'windows-terminal',
+    name: 'Windows Terminal',
+    cliCommand: 'wt',
+    windowsPaths: [join(process.env.LOCALAPPDATA || '', 'Microsoft', 'WindowsApps', 'wt.exe')],
+    platform: 'win32',
+  },
+  {
+    id: 'powershell',
+    name: 'PowerShell',
+    cliCommand: 'pwsh',
+    cliAliases: ['powershell'],
+    windowsPaths: [
+      join(
+        process.env.SYSTEMROOT || 'C:\\Windows',
+        'System32',
+        'WindowsPowerShell',
+        'v1.0',
+        'powershell.exe'
+      ),
+    ],
+    platform: 'win32',
+  },
+  {
+    id: 'cmd',
+    name: 'Command Prompt',
+    cliCommand: 'cmd',
+    windowsPaths: [join(process.env.SYSTEMROOT || 'C:\\Windows', 'System32', 'cmd.exe')],
+    platform: 'win32',
+  },
+  {
+    id: 'git-bash',
+    name: 'Git Bash',
+    windowsPaths: [
+      join(process.env.PROGRAMFILES || 'C:\\Program Files', 'Git', 'git-bash.exe'),
+      join(process.env['PROGRAMFILES(X86)'] || 'C:\\Program Files (x86)', 'Git', 'git-bash.exe'),
+    ],
+    platform: 'win32',
+  },
+
+  // Linux terminals
+  {
+    id: 'gnome-terminal',
+    name: 'GNOME Terminal',
+    cliCommand: 'gnome-terminal',
+    platform: 'linux',
+  },
+  {
+    id: 'konsole',
+    name: 'Konsole',
+    cliCommand: 'konsole',
+    platform: 'linux',
+  },
+  {
+    id: 'xfce4-terminal',
+    name: 'XFCE4 Terminal',
+    cliCommand: 'xfce4-terminal',
+    platform: 'linux',
+  },
+  {
+    id: 'tilix',
+    name: 'Tilix',
+    cliCommand: 'tilix',
+    platform: 'linux',
+  },
+  {
+    id: 'terminator',
+    name: 'Terminator',
+    cliCommand: 'terminator',
+    platform: 'linux',
+  },
+  {
+    id: 'foot',
+    name: 'Foot',
+    cliCommand: 'foot',
+    platform: 'linux',
+  },
+  {
+    id: 'xterm',
+    name: 'XTerm',
+    cliCommand: 'xterm',
+    platform: 'linux',
+  },
+];
+
+/**
+ * Try to find a terminal - checks CLI, macOS app bundle, or Windows paths
+ * Returns TerminalInfo if found, null otherwise
+ */
+async function findTerminal(definition: TerminalDefinition): Promise<TerminalInfo | null> {
+  // Skip if terminal is for a different platform
+  if (definition.platform) {
+    if (definition.platform === 'darwin' && !isMac) return null;
+    if (definition.platform === 'win32' && !isWindows) return null;
+    if (definition.platform === 'linux' && !isLinux) return null;
+  }
+
+  // Try CLI command first (works on all platforms)
+  const cliCandidates = [definition.cliCommand, ...(definition.cliAliases ?? [])].filter(
+    Boolean
+  ) as string[];
+  for (const cliCommand of cliCandidates) {
+    if (await commandExists(cliCommand)) {
+      return {
+        id: definition.id,
+        name: definition.name,
+        command: cliCommand,
+      };
+    }
+  }
+
+  // Try macOS app bundle
+  if (isMac && definition.macAppName) {
+    const appPath = await findMacApp(definition.macAppName);
+    if (appPath) {
+      return {
+        id: definition.id,
+        name: definition.name,
+        command: `open -a "${appPath}"`,
+      };
+    }
+  }
+
+  // Try Windows paths
+  if (isWindows && definition.windowsPaths) {
+    for (const windowsPath of definition.windowsPaths) {
+      if (await windowsPathExists(windowsPath)) {
+        return {
+          id: definition.id,
+          name: definition.name,
+          command: windowsPath,
+        };
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Detect all available external terminals on the system
+ * Results are cached for 5 minutes for performance
+ */
+export async function detectAllTerminals(): Promise<TerminalInfo[]> {
+  // Return cached result if still valid
+  if (isCacheValid() && cachedTerminals) {
+    return cachedTerminals;
+  }
+
+  // Check all terminals in parallel for better performance
+  const terminalChecks = SUPPORTED_TERMINALS.map((def) => findTerminal(def));
+  const results = await Promise.all(terminalChecks);
+
+  // Filter out null results (terminals not found)
+  const terminals = results.filter((t): t is TerminalInfo => t !== null);
+
+  // Update cache
+  cachedTerminals = terminals;
+  cacheTimestamp = Date.now();
+
+  return terminals;
+}
+
+/**
+ * Detect the default (first available) external terminal on the system
+ * Returns the highest priority terminal that is installed, or null if none found
+ */
+export async function detectDefaultTerminal(): Promise<TerminalInfo | null> {
+  const terminals = await detectAllTerminals();
+  return terminals[0] ?? null;
+}
+
+/**
+ * Find a specific terminal by ID
+ * Returns the terminal info if available, null otherwise
+ */
+export async function findTerminalById(id: string): Promise<TerminalInfo | null> {
+  const terminals = await detectAllTerminals();
+  return terminals.find((t) => t.id === id) ?? null;
+}
+
+/**
+ * Open a directory in the specified external terminal
+ *
+ * Handles cross-platform differences:
+ * - On macOS, uses 'open -a' for app bundles or direct command with --directory flag
+ * - On Windows, uses spawn with shell:true
+ * - On Linux, uses direct execution with working directory
+ *
+ * @param targetPath - The directory path to open
+ * @param terminalId - The terminal ID to use (optional, uses default if not specified)
+ * @returns Promise that resolves with terminal info when launched, rejects on error
+ */
+export async function openInExternalTerminal(
+  targetPath: string,
+  terminalId?: string
+): Promise<{ terminalName: string }> {
+  // Determine which terminal to use
+  let terminal: TerminalInfo | null;
+
+  if (terminalId) {
+    terminal = await findTerminalById(terminalId);
+    if (!terminal) {
+      // Fall back to default if specified terminal not found
+      terminal = await detectDefaultTerminal();
+    }
+  } else {
+    terminal = await detectDefaultTerminal();
+  }
+
+  if (!terminal) {
+    throw new Error('No external terminal available');
+  }
+
+  // Execute the terminal
+  await executeTerminalCommand(terminal, targetPath);
+
+  return { terminalName: terminal.name };
+}
+
+/**
+ * Execute a terminal command to open at a specific path
+ * Handles platform-specific differences in command execution
+ */
+async function executeTerminalCommand(terminal: TerminalInfo, targetPath: string): Promise<void> {
+  const { id, command } = terminal;
+
+  // Handle 'open -a "AppPath"' style commands (macOS app bundles)
+  if (command.startsWith('open -a ')) {
+    const appPath = command.replace('open -a ', '').replace(/"/g, '');
+
+    // Different terminals have different ways to open at a directory
+    if (id === 'iterm2') {
+      // iTerm2: Use AppleScript to open a new window at the path
+      await execFileAsync('osascript', [
+        '-e',
+        `tell application "iTerm"
+          create window with default profile
+          tell current session of current window
+            write text "cd ${escapeShellArg(targetPath)}"
+          end tell
+        end tell`,
+      ]);
+    } else if (id === 'terminal-macos') {
+      // macOS Terminal: Use AppleScript
+      await execFileAsync('osascript', [
+        '-e',
+        `tell application "Terminal"
+          do script "cd ${escapeShellArg(targetPath)}"
+          activate
+        end tell`,
+      ]);
+    } else if (id === 'warp') {
+      // Warp: Open app and use AppleScript to cd
+      await execFileAsync('open', ['-a', appPath, targetPath]);
+    } else {
+      // Generic: Just open the app with the directory as argument
+      await execFileAsync('open', ['-a', appPath, targetPath]);
+    }
+    return;
+  }
+
+  // Handle different terminals based on their ID
+  switch (id) {
+    case 'iterm2':
+      // iTerm2 CLI mode
+      await execFileAsync('osascript', [
+        '-e',
+        `tell application "iTerm"
+          create window with default profile
+          tell current session of current window
+            write text "cd ${escapeShellArg(targetPath)}"
+          end tell
+        end tell`,
+      ]);
+      break;
+
+    case 'ghostty':
+      // Ghostty: uses --working-directory=PATH format (single arg)
+      await spawnDetached(command, [`--working-directory=${targetPath}`]);
+      break;
+
+    case 'warp':
+      // Warp: uses --cwd flag (CLI mode, not app bundle)
+      await spawnDetached(command, ['--cwd', targetPath]);
+      break;
+
+    case 'alacritty':
+      // Alacritty: uses --working-directory flag
+      await spawnDetached(command, ['--working-directory', targetPath]);
+      break;
+
+    case 'wezterm':
+      // WezTerm: uses start --cwd flag
+      await spawnDetached(command, ['start', '--cwd', targetPath]);
+      break;
+
+    case 'kitty':
+      // Kitty: uses --directory flag
+      await spawnDetached(command, ['--directory', targetPath]);
+      break;
+
+    case 'hyper':
+      // Hyper: open at directory by setting cwd
+      await spawnDetached(command, [targetPath]);
+      break;
+
+    case 'tabby':
+      // Tabby: open at directory
+      await spawnDetached(command, ['open', targetPath]);
+      break;
+
+    case 'rio':
+      // Rio: uses --working-dir flag
+      await spawnDetached(command, ['--working-dir', targetPath]);
+      break;
+
+    case 'windows-terminal':
+      // Windows Terminal: uses -d flag for directory
+      await spawnDetached(command, ['-d', targetPath], { shell: true });
+      break;
+
+    case 'powershell':
+    case 'cmd':
+      // PowerShell/CMD: Start in directory with /K to keep open
+      await spawnDetached('start', [command, '/K', `cd /d "${targetPath}"`], {
+        shell: true,
+      });
+      break;
+
+    case 'git-bash':
+      // Git Bash: uses --cd flag
+      await spawnDetached(command, ['--cd', targetPath], { shell: true });
+      break;
+
+    case 'gnome-terminal':
+      // GNOME Terminal: uses --working-directory flag
+      await spawnDetached(command, ['--working-directory', targetPath]);
+      break;
+
+    case 'konsole':
+      // Konsole: uses --workdir flag
+      await spawnDetached(command, ['--workdir', targetPath]);
+      break;
+
+    case 'xfce4-terminal':
+      // XFCE4 Terminal: uses --working-directory flag
+      await spawnDetached(command, ['--working-directory', targetPath]);
+      break;
+
+    case 'tilix':
+      // Tilix: uses --working-directory flag
+      await spawnDetached(command, ['--working-directory', targetPath]);
+      break;
+
+    case 'terminator':
+      // Terminator: uses --working-directory flag
+      await spawnDetached(command, ['--working-directory', targetPath]);
+      break;
+
+    case 'foot':
+      // Foot: uses --working-directory flag
+      await spawnDetached(command, ['--working-directory', targetPath]);
+      break;
+
+    case 'xterm':
+      // XTerm: uses -e to run a shell in the directory
+      await spawnDetached(command, [
+        '-e',
+        'sh',
+        '-c',
+        `cd ${escapeShellArg(targetPath)} && $SHELL`,
+      ]);
+      break;
+
+    default:
+      // Generic fallback: try to run the command with the directory as argument
+      await spawnDetached(command, [targetPath]);
+  }
+}
+
+/**
+ * Spawn a detached process that won't block the parent
+ */
+function spawnDetached(
+  command: string,
+  args: string[],
+  options: { shell?: boolean } = {}
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const child: ChildProcess = spawn(command, args, {
+      shell: options.shell ?? false,
+      stdio: 'ignore',
+      detached: true,
+    });
+
+    // Unref to allow the parent process to exit independently
+    child.unref();
+
+    child.on('error', (err) => {
+      reject(err);
+    });
+
+    // Resolve after a small delay to catch immediate spawn errors
+    // Terminals run in background, so we don't wait for them to exit
+    setTimeout(() => resolve(), 100);
+  });
+}
+
+/**
+ * Escape a string for safe use in shell commands
+ */
+function escapeShellArg(arg: string): string {
+  // Escape single quotes by ending the quoted string, adding escaped quote, and starting new quoted string
+  return `'${arg.replace(/'/g, "'\\''")}'`;
+}
diff --git a/temp_repo/libs/platform/src/wsl.ts b/temp_repo/libs/platform/src/wsl.ts
new file mode 100644
index 0000000000000000000000000000000000000000..acf07c785210b74b29211a37f80a923a932ceb24
--- /dev/null
+++ b/temp_repo/libs/platform/src/wsl.ts
@@ -0,0 +1,389 @@
+/**
+ * WSL (Windows Subsystem for Linux) utilities
+ *
+ * Provides cross-platform support for CLI tools that are only available
+ * on Linux/macOS. On Windows, these tools can be accessed via WSL.
+ *
+ * @example
+ * ```typescript
+ * import { isWslAvailable, findCliInWsl, createWslCommand } from '@automaker/platform';
+ *
+ * // Check if WSL is available
+ * if (process.platform === 'win32' && isWslAvailable()) {
+ *   // Find a CLI tool installed in WSL
+ *   const cliPath = findCliInWsl('cursor-agent');
+ *   if (cliPath) {
+ *     // Create command/args for spawning via WSL
+ *     const { command, args } = createWslCommand(cliPath, ['--version']);
+ *     // command = 'wsl.exe', args = ['cursor-agent', '--version']
+ *   }
+ * }
+ * ```
+ */
+
+import { execSync } from 'child_process';
+import * as path from 'path';
+
+/**
+ * Get the full path to wsl.exe
+ * This is needed because spawn() may not find wsl.exe in PATH
+ */
+function getWslExePath(): string {
+  // wsl.exe is in System32 on Windows
+  const systemRoot = process.env.SystemRoot || process.env.SYSTEMROOT || 'C:\\Windows';
+  return path.join(systemRoot, 'System32', 'wsl.exe');
+}
+
+/** Result of finding a CLI in WSL */
+export interface WslCliResult {
+  /** Path to the CLI inside WSL (Linux path) */
+  wslPath: string;
+  /** The WSL distribution where it was found (if detected) */
+  distribution?: string;
+}
+
+/** Options for WSL operations */
+export interface WslOptions {
+  /** Specific WSL distribution to use (default: use default distro) */
+  distribution?: string;
+  /** Timeout for WSL commands in milliseconds (default: 10000) */
+  timeout?: number;
+  /** Custom logger function */
+  logger?: (message: string) => void;
+}
+
+// Cache WSL availability to avoid repeated checks
+let wslAvailableCache: boolean | null = null;
+
+/**
+ * Check if WSL is available on the current system
+ *
+ * Returns false immediately on non-Windows platforms.
+ * On Windows, checks if wsl.exe exists and can execute commands.
+ *
+ * Results are cached after first check.
+ */
+export function isWslAvailable(options: WslOptions = {}): boolean {
+  const { timeout = 5000, logger = () => {} } = options;
+
+  // Only relevant on Windows
+  if (process.platform !== 'win32') {
+    return false;
+  }
+
+  // Return cached result if available
+  if (wslAvailableCache !== null) {
+    return wslAvailableCache;
+  }
+
+  try {
+    // Try to run a simple command via WSL
+    execSync('wsl.exe echo ok', {
+      encoding: 'utf8',
+      timeout,
+      stdio: ['pipe', 'pipe', 'pipe'],
+      windowsHide: true,
+    });
+    wslAvailableCache = true;
+    logger('WSL is available');
+    return true;
+  } catch {
+    // Try wsl --status as fallback
+    try {
+      execSync('wsl.exe --status', {
+        encoding: 'utf8',
+        timeout,
+        stdio: ['pipe', 'pipe', 'pipe'],
+        windowsHide: true,
+      });
+      wslAvailableCache = true;
+      logger('WSL is available (via --status)');
+      return true;
+    } catch {
+      wslAvailableCache = false;
+      logger('WSL is not available');
+      return false;
+    }
+  }
+}
+
+/**
+ * Clear the WSL availability cache
+ * Useful for testing or when WSL state may have changed
+ */
+export function clearWslCache(): void {
+  wslAvailableCache = null;
+}
+
+/**
+ * Get the default WSL distribution name
+ */
+export function getDefaultWslDistribution(options: WslOptions = {}): string | null {
+  const { timeout = 5000 } = options;
+
+  if (!isWslAvailable(options)) {
+    return null;
+  }
+
+  try {
+    // wsl -l -q returns distributions, first one marked with (Default)
+    const result = execSync('wsl.exe -l -q', {
+      encoding: 'utf16le', // WSL list output uses UTF-16LE on Windows
+      timeout,
+      stdio: ['pipe', 'pipe', 'pipe'],
+      windowsHide: true,
+    }).trim();
+
+    // First non-empty line is the default
+    const lines = result.split(/\r?\n/).filter((l) => l.trim());
+    return lines[0]?.replace(/\0/g, '').trim() || null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Get all available WSL distributions
+ */
+export function getWslDistributions(options: WslOptions = {}): string[] {
+  const { timeout = 5000, logger = () => {} } = options;
+
+  if (!isWslAvailable(options)) {
+    return [];
+  }
+
+  try {
+    const result = execSync('wsl.exe -l -q', {
+      encoding: 'utf16le', // WSL list output uses UTF-16LE on Windows
+      timeout,
+      stdio: ['pipe', 'pipe', 'pipe'],
+      windowsHide: true,
+    }).trim();
+
+    const distributions = result
+      .split(/\r?\n/)
+      .map((l) => l.replace(/\0/g, '').trim())
+      .filter((l) => l && !l.includes('docker-desktop')); // Exclude docker-desktop as it's minimal
+
+    logger(`Found WSL distributions: ${distributions.join(', ')}`);
+    return distributions;
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Find a CLI tool installed in WSL
+ *
+ * Searches for the CLI using 'which' inside WSL, then checks common paths.
+ * If no distribution is specified, tries all available distributions (excluding docker-desktop).
+ *
+ * @param cliName - Name of the CLI to find (e.g., 'cursor-agent')
+ * @param options - WSL options
+ * @returns The Linux path to the CLI and the distribution where found, or null if not found
+ */
+export function findCliInWsl(cliName: string, options: WslOptions = {}): WslCliResult | null {
+  const { distribution, timeout = 10000, logger = () => {} } = options;
+
+  if (!isWslAvailable(options)) {
+    return null;
+  }
+
+  // Helper to search in a specific distribution
+  const searchInDistribution = (distro: string | undefined): WslCliResult | null => {
+    const wslPrefix = distro ? `wsl.exe -d ${distro}` : 'wsl.exe';
+    const distroLabel = distro || 'default';
+
+    // Try 'which' first (works if PATH is set up correctly)
+    try {
+      const result = execSync(`${wslPrefix} which ${cliName}`, {
+        encoding: 'utf8',
+        timeout,
+        stdio: ['pipe', 'pipe', 'pipe'],
+        windowsHide: true,
+      }).trim();
+
+      if (result && !result.includes('not found') && result.startsWith('/')) {
+        logger(`Found ${cliName} in WSL (${distroLabel}) via 'which': ${result}`);
+        return { wslPath: result, distribution: distro };
+      }
+    } catch {
+      // Not found via which, continue to path checks
+    }
+
+    // Check common installation paths using sh -c for better compatibility
+    // Use $HOME instead of ~ for reliable expansion
+    const commonPaths = ['$HOME/.local/bin', '/usr/local/bin', '/usr/bin'];
+
+    for (const basePath of commonPaths) {
+      try {
+        // Use sh -c to properly expand $HOME and test if executable
+        const checkCmd = `${wslPrefix} sh -c "test -x ${basePath}/${cliName} && echo ${basePath}/${cliName}"`;
+        const result = execSync(checkCmd, {
+          encoding: 'utf8',
+          timeout,
+          stdio: ['pipe', 'pipe', 'pipe'],
+          windowsHide: true,
+        }).trim();
+
+        if (result && result.startsWith('/')) {
+          logger(`Found ${cliName} in WSL (${distroLabel}) at: ${result}`);
+          return { wslPath: result, distribution: distro };
+        }
+      } catch {
+        // Path doesn't exist or not executable, continue
+      }
+    }
+
+    return null;
+  };
+
+  // If a specific distribution is requested, only search there
+  if (distribution) {
+    return searchInDistribution(distribution);
+  }
+
+  // Try available distributions (excluding docker-desktop and similar minimal distros)
+  const distributions = getWslDistributions(options);
+
+  // Prioritize common user distributions
+  const priorityDistros = ['Ubuntu', 'Debian', 'openSUSE', 'Fedora', 'Arch'];
+  const sortedDistros = distributions.sort((a, b) => {
+    const aIndex = priorityDistros.findIndex((p) => a.toLowerCase().includes(p.toLowerCase()));
+    const bIndex = priorityDistros.findIndex((p) => b.toLowerCase().includes(p.toLowerCase()));
+    if (aIndex === -1 && bIndex === -1) return 0;
+    if (aIndex === -1) return 1;
+    if (bIndex === -1) return -1;
+    return aIndex - bIndex;
+  });
+
+  logger(`Searching for ${cliName} in WSL distributions: ${sortedDistros.join(', ')}`);
+
+  for (const distro of sortedDistros) {
+    const result = searchInDistribution(distro);
+    if (result) {
+      return result;
+    }
+  }
+
+  // Fallback: try default distribution as last resort
+  const defaultResult = searchInDistribution(undefined);
+  if (defaultResult) {
+    return defaultResult;
+  }
+
+  logger(`${cliName} not found in any WSL distribution`);
+  return null;
+}
+
+/**
+ * Execute a command in WSL and return the output
+ *
+ * @param command - Command to execute (can include arguments)
+ * @param options - WSL options
+ * @returns Command output, or null if failed
+ */
+export function execInWsl(command: string, options: WslOptions = {}): string | null {
+  const { distribution, timeout = 30000 } = options;
+
+  if (!isWslAvailable(options)) {
+    return null;
+  }
+
+  const wslPrefix = distribution ? `wsl.exe -d ${distribution}` : 'wsl.exe';
+
+  try {
+    return execSync(`${wslPrefix} ${command}`, {
+      encoding: 'utf8',
+      timeout,
+      stdio: ['pipe', 'pipe', 'pipe'],
+      windowsHide: true,
+    }).trim();
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Create command and arguments for spawning a process via WSL
+ *
+ * This is useful for constructing spawn() calls that work through WSL.
+ * Uses the full path to wsl.exe to ensure spawn() can find it.
+ *
+ * @param wslCliPath - The Linux path to the CLI inside WSL
+ * @param args - Arguments to pass to the CLI
+ * @param options - WSL options
+ * @returns Object with command (full path to wsl.exe) and modified args
+ *
+ * @example
+ * ```typescript
+ * const { command, args } = createWslCommand('/home/user/.local/bin/cursor-agent', ['-p', 'hello']);
+ * // command = 'C:\\Windows\\System32\\wsl.exe'
+ * // args = ['/home/user/.local/bin/cursor-agent', '-p', 'hello']
+ *
+ * spawn(command, args, { stdio: ['ignore', 'pipe', 'pipe'] });
+ * ```
+ */
+export function createWslCommand(
+  wslCliPath: string,
+  args: string[],
+  options: WslOptions = {}
+): { command: string; args: string[] } {
+  const { distribution } = options;
+  // Use full path to wsl.exe to ensure spawn() can find it
+  const wslExe = getWslExePath();
+
+  if (distribution) {
+    return {
+      command: wslExe,
+      args: ['-d', distribution, wslCliPath, ...args],
+    };
+  }
+
+  return {
+    command: wslExe,
+    args: [wslCliPath, ...args],
+  };
+}
+
+/**
+ * Convert a Windows path to a WSL path
+ *
+ * @param windowsPath - Windows path (e.g., 'C:\\Users\\foo\\project')
+ * @returns WSL path (e.g., '/mnt/c/Users/foo/project')
+ */
+export function windowsToWslPath(windowsPath: string): string {
+  // Handle UNC paths
+  if (windowsPath.startsWith('\\\\')) {
+    // UNC paths are not directly supported, return as-is
+    return windowsPath;
+  }
+
+  // Extract drive letter and convert
+  const match = windowsPath.match(/^([A-Za-z]):\\(.*)$/);
+  if (match) {
+    const [, drive, rest] = match;
+    const wslPath = `/mnt/${drive.toLowerCase()}/${rest.replace(/\\/g, '/')}`;
+    return wslPath;
+  }
+
+  // Already a Unix-style path or relative path
+  return windowsPath.replace(/\\/g, '/');
+}
+
+/**
+ * Convert a WSL path to a Windows path
+ *
+ * @param wslPath - WSL path (e.g., '/mnt/c/Users/foo/project')
+ * @returns Windows path (e.g., 'C:\\Users\\foo\\project'), or original if not a /mnt/ path
+ */
+export function wslToWindowsPath(wslPath: string): string {
+  const match = wslPath.match(/^\/mnt\/([a-z])\/(.*)$/);
+  if (match) {
+    const [, drive, rest] = match;
+    return `${drive.toUpperCase()}:\\${rest.replace(/\//g, '\\')}`;
+  }
+
+  // Not a /mnt/ path, return as-is
+  return wslPath;
+}
diff --git a/temp_repo/libs/platform/tests/node-finder.test.ts b/temp_repo/libs/platform/tests/node-finder.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0edac651fd6f38350fcb31a2c16bb80a4f9c81ba
--- /dev/null
+++ b/temp_repo/libs/platform/tests/node-finder.test.ts
@@ -0,0 +1,197 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { findNodeExecutable, buildEnhancedPath } from '../src/node-finder.js';
+import path from 'path';
+import fs from 'fs';
+
+describe('node-finder', () => {
+  describe('version sorting and pre-release filtering', () => {
+    // Test the PRE_RELEASE_PATTERN logic indirectly
+    const PRE_RELEASE_PATTERN = /-(beta|rc|alpha|nightly|canary|dev|pre)/i;
+
+    it('should identify pre-release versions correctly', () => {
+      const preReleaseVersions = [
+        'v20.0.0-beta',
+        'v18.17.0-rc1',
+        'v19.0.0-alpha',
+        'v21.0.0-nightly',
+        'v20.0.0-canary',
+        'v18.0.0-dev',
+        'v17.0.0-pre',
+      ];
+
+      for (const version of preReleaseVersions) {
+        expect(PRE_RELEASE_PATTERN.test(version)).toBe(true);
+      }
+    });
+
+    it('should not match stable versions as pre-release', () => {
+      const stableVersions = ['v18.17.0', 'v20.10.0', 'v16.20.2', '18.17.0', 'v21.0.0'];
+
+      for (const version of stableVersions) {
+        expect(PRE_RELEASE_PATTERN.test(version)).toBe(false);
+      }
+    });
+
+    it('should sort versions with numeric comparison', () => {
+      const versions = ['v18.9.0', 'v18.17.0', 'v20.0.0', 'v8.0.0'];
+      const sorted = [...versions].sort((a, b) =>
+        b.localeCompare(a, undefined, { numeric: true, sensitivity: 'base' })
+      );
+
+      expect(sorted).toEqual(['v20.0.0', 'v18.17.0', 'v18.9.0', 'v8.0.0']);
+    });
+
+    it('should prefer stable over pre-release when filtering', () => {
+      const allVersions = ['v20.0.0-beta', 'v19.9.9', 'v18.17.0', 'v21.0.0-rc1'];
+
+      const stableVersions = allVersions.filter((v) => !PRE_RELEASE_PATTERN.test(v));
+      const preReleaseVersions = allVersions.filter((v) => PRE_RELEASE_PATTERN.test(v));
+      const prioritized = [...stableVersions, ...preReleaseVersions];
+
+      // Stable versions should come first
+      expect(prioritized[0]).toBe('v19.9.9');
+      expect(prioritized[1]).toBe('v18.17.0');
+      // Pre-release versions should come after
+      expect(prioritized[2]).toBe('v20.0.0-beta');
+      expect(prioritized[3]).toBe('v21.0.0-rc1');
+    });
+  });
+
+  describe('findNodeExecutable', () => {
+    it("should return 'node' with fallback source when skipSearch is true", () => {
+      const result = findNodeExecutable({ skipSearch: true });
+
+      expect(result.nodePath).toBe('node');
+      expect(result.source).toBe('fallback');
+    });
+
+    it('should call logger when node is found', () => {
+      const logger = vi.fn();
+      findNodeExecutable({ logger });
+
+      // Logger should be called at least once (either found or fallback message)
+      expect(logger).toHaveBeenCalled();
+    });
+
+    it('should return a valid NodeFinderResult structure', () => {
+      const result = findNodeExecutable();
+
+      expect(result).toHaveProperty('nodePath');
+      expect(result).toHaveProperty('source');
+      expect(typeof result.nodePath).toBe('string');
+      expect(result.nodePath.length).toBeGreaterThan(0);
+    });
+
+    it('should find node on the current system', () => {
+      // This test verifies that node can be found on the test machine
+      const result = findNodeExecutable();
+
+      // Should find node since we're running in Node.js
+      expect(result.nodePath).toBeDefined();
+
+      // Source should be one of the valid sources
+      const validSources = [
+        'homebrew',
+        'system',
+        'nvm',
+        'fnm',
+        'nvm-windows',
+        'program-files',
+        'scoop',
+        'chocolatey',
+        'which',
+        'where',
+        'fallback',
+      ];
+      expect(validSources).toContain(result.source);
+    });
+
+    it('should find an executable node binary', () => {
+      const result = findNodeExecutable();
+
+      // Skip this test if fallback is used (node not found via path search)
+      if (result.source === 'fallback') {
+        expect(result.nodePath).toBe('node');
+        return;
+      }
+
+      // Verify the found path is actually executable
+      if (process.platform === 'win32') {
+        // On Windows, just check file exists (X_OK is not meaningful)
+        expect(() => fs.accessSync(result.nodePath, fs.constants.F_OK)).not.toThrow();
+      } else {
+        // On Unix-like systems, verify execute permission
+        expect(() => fs.accessSync(result.nodePath, fs.constants.X_OK)).not.toThrow();
+      }
+    });
+  });
+
+  describe('buildEnhancedPath', () => {
+    const delimiter = path.delimiter;
+
+    it("should return current path unchanged when nodePath is 'node'", () => {
+      const currentPath = `/usr/bin${delimiter}/usr/local/bin`;
+      const result = buildEnhancedPath('node', currentPath);
+
+      expect(result).toBe(currentPath);
+    });
+
+    it("should return empty string when nodePath is 'node' and currentPath is empty", () => {
+      const result = buildEnhancedPath('node', '');
+
+      expect(result).toBe('');
+    });
+
+    it('should prepend node directory to path', () => {
+      const nodePath = '/opt/homebrew/bin/node';
+      const currentPath = `/usr/bin${delimiter}/usr/local/bin`;
+
+      const result = buildEnhancedPath(nodePath, currentPath);
+
+      expect(result).toBe(`/opt/homebrew/bin${delimiter}${currentPath}`);
+    });
+
+    it('should not duplicate node directory if already in path', () => {
+      const nodePath = '/usr/local/bin/node';
+      const currentPath = `/usr/local/bin${delimiter}/usr/bin`;
+
+      const result = buildEnhancedPath(nodePath, currentPath);
+
+      expect(result).toBe(currentPath);
+    });
+
+    it('should handle empty currentPath without trailing delimiter', () => {
+      const nodePath = '/opt/homebrew/bin/node';
+
+      const result = buildEnhancedPath(nodePath, '');
+
+      expect(result).toBe('/opt/homebrew/bin');
+    });
+
+    it('should handle Windows-style paths', () => {
+      // On Windows, path.dirname recognizes backslash paths
+      // On other platforms, backslash is not a path separator
+      const nodePath = 'C:\\Program Files\\nodejs\\node.exe';
+      const currentPath = 'C:\\Windows\\System32';
+
+      const result = buildEnhancedPath(nodePath, currentPath);
+
+      if (process.platform === 'win32') {
+        // On Windows, should prepend the node directory
+        expect(result).toBe(`C:\\Program Files\\nodejs${delimiter}${currentPath}`);
+      } else {
+        // On non-Windows, backslash paths are treated as relative paths
+        // path.dirname returns '.' so the function returns currentPath unchanged
+        expect(result).toBe(currentPath);
+      }
+    });
+
+    it('should use default empty string for currentPath', () => {
+      const nodePath = '/usr/local/bin/node';
+
+      const result = buildEnhancedPath(nodePath);
+
+      expect(result).toBe('/usr/local/bin');
+    });
+  });
+});
diff --git a/temp_repo/libs/platform/tests/oauth-credential-detection.test.ts b/temp_repo/libs/platform/tests/oauth-credential-detection.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6e445b227fb8836b457d6d92a9b5d4b658977d16
--- /dev/null
+++ b/temp_repo/libs/platform/tests/oauth-credential-detection.test.ts
@@ -0,0 +1,761 @@
+/**
+ * Unit tests for OAuth credential detection scenarios
+ *
+ * Tests the various Claude credential detection formats including:
+ * - Claude Code CLI OAuth format (claudeAiOauth)
+ * - Legacy OAuth token format (oauth_token, access_token)
+ * - API key format (api_key)
+ * - Invalid/malformed credential files
+ *
+ * These tests use real temp directories to avoid complex fs mocking issues.
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+
+describe('OAuth Credential Detection', () => {
+  let tempDir: string;
+  let originalHomedir: () => string;
+  let mockClaudeDir: string;
+  let mockCodexDir: string;
+  let mockOpenCodeDir: string;
+
+  beforeEach(async () => {
+    // Reset modules to get fresh state
+    vi.resetModules();
+
+    // Create a temporary directory
+    tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'oauth-detection-test-'));
+
+    // Create mock home directory structure
+    mockClaudeDir = path.join(tempDir, '.claude');
+    mockCodexDir = path.join(tempDir, '.codex');
+    mockOpenCodeDir = path.join(tempDir, '.local', 'share', 'opencode');
+
+    await fs.mkdir(mockClaudeDir, { recursive: true });
+    await fs.mkdir(mockCodexDir, { recursive: true });
+    await fs.mkdir(mockOpenCodeDir, { recursive: true });
+
+    // Mock os.homedir to return our temp directory
+    originalHomedir = os.homedir;
+    vi.spyOn(os, 'homedir').mockReturnValue(tempDir);
+  });
+
+  afterEach(async () => {
+    vi.restoreAllMocks();
+    // Clean up temp directory
+    try {
+      await fs.rm(tempDir, { recursive: true, force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe('getClaudeAuthIndicators', () => {
+    it('should detect Claude Code CLI OAuth format (claudeAiOauth)', async () => {
+      const credentialsContent = JSON.stringify({
+        claudeAiOauth: {
+          accessToken: 'oauth-access-token-12345',
+          refreshToken: 'oauth-refresh-token-67890',
+          expiresAt: Date.now() + 3600000,
+        },
+      });
+
+      await fs.writeFile(path.join(mockClaudeDir, '.credentials.json'), credentialsContent);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      expect(indicators.hasCredentialsFile).toBe(true);
+      expect(indicators.credentials).not.toBeNull();
+      expect(indicators.credentials?.hasOAuthToken).toBe(true);
+      expect(indicators.credentials?.hasApiKey).toBe(false);
+    });
+
+    it('should detect legacy OAuth token format (oauth_token)', async () => {
+      const credentialsContent = JSON.stringify({
+        oauth_token: 'legacy-oauth-token-abcdef',
+      });
+
+      await fs.writeFile(path.join(mockClaudeDir, '.credentials.json'), credentialsContent);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      expect(indicators.hasCredentialsFile).toBe(true);
+      expect(indicators.credentials?.hasOAuthToken).toBe(true);
+      expect(indicators.credentials?.hasApiKey).toBe(false);
+    });
+
+    it('should detect legacy access_token format', async () => {
+      const credentialsContent = JSON.stringify({
+        access_token: 'legacy-access-token-xyz',
+      });
+
+      await fs.writeFile(path.join(mockClaudeDir, '.credentials.json'), credentialsContent);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      expect(indicators.hasCredentialsFile).toBe(true);
+      expect(indicators.credentials?.hasOAuthToken).toBe(true);
+      expect(indicators.credentials?.hasApiKey).toBe(false);
+    });
+
+    it('should detect API key format', async () => {
+      const credentialsContent = JSON.stringify({
+        api_key: 'sk-ant-api03-xxxxxxxxxxxx',
+      });
+
+      await fs.writeFile(path.join(mockClaudeDir, '.credentials.json'), credentialsContent);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      expect(indicators.hasCredentialsFile).toBe(true);
+      expect(indicators.credentials?.hasOAuthToken).toBe(false);
+      expect(indicators.credentials?.hasApiKey).toBe(true);
+    });
+
+    it('should detect both OAuth and API key when present', async () => {
+      const credentialsContent = JSON.stringify({
+        claudeAiOauth: {
+          accessToken: 'oauth-token',
+          refreshToken: 'refresh-token',
+        },
+        api_key: 'sk-ant-api03-xxxxxxxxxxxx',
+      });
+
+      await fs.writeFile(path.join(mockClaudeDir, '.credentials.json'), credentialsContent);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      expect(indicators.hasCredentialsFile).toBe(true);
+      expect(indicators.credentials?.hasOAuthToken).toBe(true);
+      expect(indicators.credentials?.hasApiKey).toBe(true);
+    });
+
+    it('should handle missing credentials file gracefully', async () => {
+      // No credentials file created
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      expect(indicators.hasCredentialsFile).toBe(false);
+      expect(indicators.credentials).toBeNull();
+      expect(indicators.checks.credentialFiles).toBeDefined();
+      expect(indicators.checks.credentialFiles.length).toBeGreaterThan(0);
+      expect(indicators.checks.credentialFiles[0].exists).toBe(false);
+    });
+
+    it('should handle malformed JSON in credentials file', async () => {
+      const malformedContent = '{ invalid json }';
+
+      await fs.writeFile(path.join(mockClaudeDir, '.credentials.json'), malformedContent);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      // File exists but parsing fails
+      expect(indicators.hasCredentialsFile).toBe(false);
+      expect(indicators.credentials).toBeNull();
+      expect(indicators.checks.credentialFiles[0].exists).toBe(true);
+      expect(indicators.checks.credentialFiles[0].error).toContain('JSON parse error');
+    });
+
+    it('should handle empty credentials file', async () => {
+      const emptyContent = JSON.stringify({});
+
+      await fs.writeFile(path.join(mockClaudeDir, '.credentials.json'), emptyContent);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      // Empty credentials file ({}) should NOT be treated as having credentials
+      // because it contains no actual tokens. This allows the system to continue
+      // checking subsequent credential paths that might have valid tokens.
+      expect(indicators.hasCredentialsFile).toBe(false);
+      expect(indicators.credentials).toBeNull();
+      // But the file should still show as existing and readable in the checks
+      expect(indicators.checks.credentialFiles[0].exists).toBe(true);
+      expect(indicators.checks.credentialFiles[0].readable).toBe(true);
+    });
+
+    it('should handle credentials file with null values', async () => {
+      const nullContent = JSON.stringify({
+        claudeAiOauth: null,
+        api_key: null,
+        oauth_token: null,
+      });
+
+      await fs.writeFile(path.join(mockClaudeDir, '.credentials.json'), nullContent);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      // File with all null values should NOT be treated as having credentials
+      // because null values are not valid tokens
+      expect(indicators.hasCredentialsFile).toBe(false);
+      expect(indicators.credentials).toBeNull();
+    });
+
+    it('should handle credentials with empty string values', async () => {
+      const emptyStrings = JSON.stringify({
+        claudeAiOauth: {
+          accessToken: '',
+          refreshToken: '',
+        },
+        api_key: '',
+      });
+
+      await fs.writeFile(path.join(mockClaudeDir, '.credentials.json'), emptyStrings);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      // Empty strings should NOT be treated as having credentials
+      // This allows checking subsequent credential paths for valid tokens
+      expect(indicators.hasCredentialsFile).toBe(false);
+      expect(indicators.credentials).toBeNull();
+    });
+
+    it('should detect settings file presence', async () => {
+      await fs.writeFile(
+        path.join(mockClaudeDir, 'settings.json'),
+        JSON.stringify({ theme: 'dark' })
+      );
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      expect(indicators.hasSettingsFile).toBe(true);
+      expect(indicators.checks.settingsFile.exists).toBe(true);
+      expect(indicators.checks.settingsFile.readable).toBe(true);
+    });
+
+    it('should detect stats cache with activity', async () => {
+      const statsContent = JSON.stringify({
+        dailyActivity: [
+          { date: '2025-01-15', messagesCount: 10 },
+          { date: '2025-01-16', messagesCount: 5 },
+        ],
+      });
+
+      await fs.writeFile(path.join(mockClaudeDir, 'stats-cache.json'), statsContent);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      expect(indicators.hasStatsCacheWithActivity).toBe(true);
+      expect(indicators.checks.statsCache.exists).toBe(true);
+      expect(indicators.checks.statsCache.hasDailyActivity).toBe(true);
+    });
+
+    it('should detect stats cache without activity', async () => {
+      const statsContent = JSON.stringify({
+        dailyActivity: [],
+      });
+
+      await fs.writeFile(path.join(mockClaudeDir, 'stats-cache.json'), statsContent);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      expect(indicators.hasStatsCacheWithActivity).toBe(false);
+      expect(indicators.checks.statsCache.exists).toBe(true);
+      expect(indicators.checks.statsCache.hasDailyActivity).toBe(false);
+    });
+
+    it('should detect project sessions', async () => {
+      const projectsDir = path.join(mockClaudeDir, 'projects');
+      await fs.mkdir(projectsDir, { recursive: true });
+      await fs.mkdir(path.join(projectsDir, 'session-1'));
+      await fs.mkdir(path.join(projectsDir, 'session-2'));
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      expect(indicators.hasProjectsSessions).toBe(true);
+      expect(indicators.checks.projectsDir.exists).toBe(true);
+      expect(indicators.checks.projectsDir.entryCount).toBe(2);
+    });
+
+    it('should return comprehensive check details', async () => {
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      // Verify all check detail objects are present
+      expect(indicators.checks).toBeDefined();
+      expect(indicators.checks.settingsFile).toBeDefined();
+      expect(indicators.checks.settingsFile.path).toContain('settings.json');
+      expect(indicators.checks.statsCache).toBeDefined();
+      expect(indicators.checks.statsCache.path).toContain('stats-cache.json');
+      expect(indicators.checks.projectsDir).toBeDefined();
+      expect(indicators.checks.projectsDir.path).toContain('projects');
+      expect(indicators.checks.credentialFiles).toBeDefined();
+      expect(Array.isArray(indicators.checks.credentialFiles)).toBe(true);
+    });
+
+    it('should try both .credentials.json and credentials.json paths', async () => {
+      // Write to credentials.json (without leading dot)
+      const credentialsContent = JSON.stringify({
+        api_key: 'sk-test-key',
+      });
+
+      await fs.writeFile(path.join(mockClaudeDir, 'credentials.json'), credentialsContent);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      // Should find credentials in the second path
+      expect(indicators.hasCredentialsFile).toBe(true);
+      expect(indicators.credentials?.hasApiKey).toBe(true);
+    });
+
+    it('should prefer first credentials file if both exist', async () => {
+      // Write OAuth to .credentials.json (first path checked)
+      await fs.writeFile(
+        path.join(mockClaudeDir, '.credentials.json'),
+        JSON.stringify({
+          claudeAiOauth: {
+            accessToken: 'oauth-token',
+            refreshToken: 'refresh-token',
+          },
+        })
+      );
+
+      // Write API key to credentials.json (second path)
+      await fs.writeFile(
+        path.join(mockClaudeDir, 'credentials.json'),
+        JSON.stringify({
+          api_key: 'sk-test-key',
+        })
+      );
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      // Should use first file (.credentials.json) which has OAuth
+      expect(indicators.hasCredentialsFile).toBe(true);
+      expect(indicators.credentials?.hasOAuthToken).toBe(true);
+      expect(indicators.credentials?.hasApiKey).toBe(false);
+    });
+
+    it('should check second credentials file if first file has no tokens', async () => {
+      // Write empty/token-less content to .credentials.json (first path checked)
+      // This tests the bug fix: previously, an empty JSON file would stop the search
+      await fs.writeFile(path.join(mockClaudeDir, '.credentials.json'), JSON.stringify({}));
+
+      // Write actual credentials to credentials.json (second path)
+      await fs.writeFile(
+        path.join(mockClaudeDir, 'credentials.json'),
+        JSON.stringify({
+          api_key: 'sk-test-key-from-second-file',
+        })
+      );
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      // Should find credentials in second file since first file has no tokens
+      expect(indicators.hasCredentialsFile).toBe(true);
+      expect(indicators.credentials?.hasApiKey).toBe(true);
+    });
+  });
+
+  describe('getCodexAuthIndicators', () => {
+    it('should detect OAuth token in Codex auth file', async () => {
+      const authContent = JSON.stringify({
+        access_token: 'codex-oauth-token-12345',
+      });
+
+      await fs.writeFile(path.join(mockCodexDir, 'auth.json'), authContent);
+
+      const { getCodexAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getCodexAuthIndicators();
+
+      expect(indicators.hasAuthFile).toBe(true);
+      expect(indicators.hasOAuthToken).toBe(true);
+      expect(indicators.hasApiKey).toBe(false);
+    });
+
+    it('should detect API key in Codex auth file', async () => {
+      const authContent = JSON.stringify({
+        OPENAI_API_KEY: 'sk-xxxxxxxxxxxxxxxx',
+      });
+
+      await fs.writeFile(path.join(mockCodexDir, 'auth.json'), authContent);
+
+      const { getCodexAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getCodexAuthIndicators();
+
+      expect(indicators.hasAuthFile).toBe(true);
+      expect(indicators.hasOAuthToken).toBe(false);
+      expect(indicators.hasApiKey).toBe(true);
+    });
+
+    it('should detect nested tokens in Codex auth file', async () => {
+      const authContent = JSON.stringify({
+        tokens: {
+          oauth_token: 'nested-oauth-token',
+        },
+      });
+
+      await fs.writeFile(path.join(mockCodexDir, 'auth.json'), authContent);
+
+      const { getCodexAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getCodexAuthIndicators();
+
+      expect(indicators.hasAuthFile).toBe(true);
+      expect(indicators.hasOAuthToken).toBe(true);
+    });
+
+    it('should handle missing Codex auth file', async () => {
+      // No auth file created
+      const { getCodexAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getCodexAuthIndicators();
+
+      expect(indicators.hasAuthFile).toBe(false);
+      expect(indicators.hasOAuthToken).toBe(false);
+      expect(indicators.hasApiKey).toBe(false);
+    });
+
+    it('should detect api_key field in Codex auth', async () => {
+      const authContent = JSON.stringify({
+        api_key: 'sk-api-key-value',
+      });
+
+      await fs.writeFile(path.join(mockCodexDir, 'auth.json'), authContent);
+
+      const { getCodexAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getCodexAuthIndicators();
+
+      expect(indicators.hasAuthFile).toBe(true);
+      expect(indicators.hasApiKey).toBe(true);
+    });
+  });
+
+  describe('getOpenCodeAuthIndicators', () => {
+    it('should detect provider-specific OAuth credentials', async () => {
+      const authContent = JSON.stringify({
+        anthropic: {
+          type: 'oauth',
+          access: 'oauth-access-token',
+          refresh: 'oauth-refresh-token',
+        },
+      });
+
+      await fs.writeFile(path.join(mockOpenCodeDir, 'auth.json'), authContent);
+
+      const { getOpenCodeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getOpenCodeAuthIndicators();
+
+      expect(indicators.hasAuthFile).toBe(true);
+      expect(indicators.hasOAuthToken).toBe(true);
+      expect(indicators.hasApiKey).toBe(false);
+    });
+
+    it('should detect GitHub Copilot refresh token as OAuth', async () => {
+      const authContent = JSON.stringify({
+        'github-copilot': {
+          type: 'oauth',
+          access: '', // Empty access token
+          refresh: 'gh-refresh-token', // But has refresh token
+        },
+      });
+
+      await fs.writeFile(path.join(mockOpenCodeDir, 'auth.json'), authContent);
+
+      const { getOpenCodeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getOpenCodeAuthIndicators();
+
+      expect(indicators.hasAuthFile).toBe(true);
+      expect(indicators.hasOAuthToken).toBe(true);
+    });
+
+    it('should detect provider-specific API key credentials', async () => {
+      const authContent = JSON.stringify({
+        openai: {
+          type: 'api_key',
+          key: 'sk-xxxxxxxxxxxx',
+        },
+      });
+
+      await fs.writeFile(path.join(mockOpenCodeDir, 'auth.json'), authContent);
+
+      const { getOpenCodeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getOpenCodeAuthIndicators();
+
+      expect(indicators.hasAuthFile).toBe(true);
+      expect(indicators.hasOAuthToken).toBe(false);
+      expect(indicators.hasApiKey).toBe(true);
+    });
+
+    it('should detect multiple providers', async () => {
+      const authContent = JSON.stringify({
+        anthropic: {
+          type: 'oauth',
+          access: 'anthropic-token',
+          refresh: 'refresh-token',
+        },
+        openai: {
+          type: 'api_key',
+          key: 'sk-xxxxxxxxxxxx',
+        },
+      });
+
+      await fs.writeFile(path.join(mockOpenCodeDir, 'auth.json'), authContent);
+
+      const { getOpenCodeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getOpenCodeAuthIndicators();
+
+      expect(indicators.hasAuthFile).toBe(true);
+      expect(indicators.hasOAuthToken).toBe(true);
+      expect(indicators.hasApiKey).toBe(true);
+    });
+
+    it('should handle missing OpenCode auth file', async () => {
+      // No auth file created
+      const { getOpenCodeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getOpenCodeAuthIndicators();
+
+      expect(indicators.hasAuthFile).toBe(false);
+      expect(indicators.hasOAuthToken).toBe(false);
+      expect(indicators.hasApiKey).toBe(false);
+    });
+
+    it('should handle legacy top-level OAuth keys', async () => {
+      const authContent = JSON.stringify({
+        access_token: 'legacy-access-token',
+      });
+
+      await fs.writeFile(path.join(mockOpenCodeDir, 'auth.json'), authContent);
+
+      const { getOpenCodeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getOpenCodeAuthIndicators();
+
+      expect(indicators.hasAuthFile).toBe(true);
+      expect(indicators.hasOAuthToken).toBe(true);
+    });
+
+    it('should detect copilot provider OAuth', async () => {
+      const authContent = JSON.stringify({
+        copilot: {
+          type: 'oauth',
+          access: 'copilot-access-token',
+          refresh: 'copilot-refresh-token',
+        },
+      });
+
+      await fs.writeFile(path.join(mockOpenCodeDir, 'auth.json'), authContent);
+
+      const { getOpenCodeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getOpenCodeAuthIndicators();
+
+      expect(indicators.hasAuthFile).toBe(true);
+      expect(indicators.hasOAuthToken).toBe(true);
+    });
+  });
+
+  describe('Credential path helpers', () => {
+    it('should return correct Claude credential paths', async () => {
+      const { getClaudeCredentialPaths, getClaudeConfigDir } = await import('../src/system-paths');
+
+      const configDir = getClaudeConfigDir();
+      expect(configDir).toContain('.claude');
+
+      const credPaths = getClaudeCredentialPaths();
+      expect(credPaths.length).toBeGreaterThan(0);
+      expect(credPaths.some((p) => p.includes('.credentials.json'))).toBe(true);
+      expect(credPaths.some((p) => p.includes('credentials.json'))).toBe(true);
+    });
+
+    it('should return correct Codex auth path', async () => {
+      const { getCodexAuthPath, getCodexConfigDir } = await import('../src/system-paths');
+
+      const configDir = getCodexConfigDir();
+      expect(configDir).toContain('.codex');
+
+      const authPath = getCodexAuthPath();
+      expect(authPath).toContain('.codex');
+      expect(authPath).toContain('auth.json');
+    });
+
+    it('should return correct OpenCode auth path', async () => {
+      const { getOpenCodeAuthPath, getOpenCodeConfigDir } = await import('../src/system-paths');
+
+      const configDir = getOpenCodeConfigDir();
+      expect(configDir).toContain('opencode');
+
+      const authPath = getOpenCodeAuthPath();
+      expect(authPath).toContain('opencode');
+      expect(authPath).toContain('auth.json');
+    });
+  });
+
+  describe('Edge cases for credential detection', () => {
+    it('should handle credentials file with unexpected structure', async () => {
+      const unexpectedContent = JSON.stringify({
+        someUnexpectedKey: 'value',
+        nested: {
+          deeply: {
+            unexpected: true,
+          },
+        },
+      });
+
+      await fs.writeFile(path.join(mockClaudeDir, '.credentials.json'), unexpectedContent);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      // File with unexpected structure but no valid tokens should NOT be treated as having credentials
+      expect(indicators.hasCredentialsFile).toBe(false);
+      expect(indicators.credentials).toBeNull();
+    });
+
+    it('should handle array instead of object in credentials', async () => {
+      const arrayContent = JSON.stringify(['token1', 'token2']);
+
+      await fs.writeFile(path.join(mockClaudeDir, '.credentials.json'), arrayContent);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      // Array is valid JSON but wrong structure - no valid tokens, so not treated as credentials file
+      expect(indicators.hasCredentialsFile).toBe(false);
+      expect(indicators.credentials).toBeNull();
+    });
+
+    it('should handle numeric values in credential fields', async () => {
+      const numericContent = JSON.stringify({
+        api_key: 12345,
+        oauth_token: 67890,
+      });
+
+      await fs.writeFile(path.join(mockClaudeDir, '.credentials.json'), numericContent);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      // Note: Current implementation uses JavaScript truthiness which accepts numbers
+      // This documents the actual behavior - ideally would validate string type
+      expect(indicators.hasCredentialsFile).toBe(true);
+      // The implementation checks truthiness, not strict string type
+      expect(indicators.credentials?.hasOAuthToken).toBe(true);
+      expect(indicators.credentials?.hasApiKey).toBe(true);
+    });
+
+    it('should handle boolean values in credential fields', async () => {
+      const booleanContent = JSON.stringify({
+        api_key: true,
+        oauth_token: false,
+      });
+
+      await fs.writeFile(path.join(mockClaudeDir, '.credentials.json'), booleanContent);
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      // Note: Current implementation uses JavaScript truthiness
+      // api_key: true is truthy, oauth_token: false is falsy
+      expect(indicators.hasCredentialsFile).toBe(true);
+      expect(indicators.credentials?.hasOAuthToken).toBe(false); // false is falsy
+      expect(indicators.credentials?.hasApiKey).toBe(true); // true is truthy
+    });
+
+    it('should handle malformed stats-cache.json gracefully', async () => {
+      await fs.writeFile(path.join(mockClaudeDir, 'stats-cache.json'), '{ invalid json }');
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      expect(indicators.hasStatsCacheWithActivity).toBe(false);
+      expect(indicators.checks.statsCache.exists).toBe(true);
+      expect(indicators.checks.statsCache.error).toBeDefined();
+    });
+
+    it('should handle empty projects directory', async () => {
+      const projectsDir = path.join(mockClaudeDir, 'projects');
+      await fs.mkdir(projectsDir, { recursive: true });
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      expect(indicators.hasProjectsSessions).toBe(false);
+      expect(indicators.checks.projectsDir.exists).toBe(true);
+      expect(indicators.checks.projectsDir.entryCount).toBe(0);
+    });
+  });
+
+  describe('Combined authentication scenarios', () => {
+    it('should detect CLI authenticated state with settings + sessions', async () => {
+      // Create settings file
+      await fs.writeFile(
+        path.join(mockClaudeDir, 'settings.json'),
+        JSON.stringify({ theme: 'dark' })
+      );
+
+      // Create projects directory with sessions
+      const projectsDir = path.join(mockClaudeDir, 'projects');
+      await fs.mkdir(projectsDir, { recursive: true });
+      await fs.mkdir(path.join(projectsDir, 'session-1'));
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      expect(indicators.hasSettingsFile).toBe(true);
+      expect(indicators.hasProjectsSessions).toBe(true);
+    });
+
+    it('should detect recent activity indicating working auth', async () => {
+      // Create stats cache with recent activity
+      await fs.writeFile(
+        path.join(mockClaudeDir, 'stats-cache.json'),
+        JSON.stringify({
+          dailyActivity: [{ date: new Date().toISOString().split('T')[0], messagesCount: 10 }],
+        })
+      );
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      expect(indicators.hasStatsCacheWithActivity).toBe(true);
+    });
+
+    it('should handle complete auth setup', async () => {
+      // Create all auth indicators
+      await fs.writeFile(
+        path.join(mockClaudeDir, '.credentials.json'),
+        JSON.stringify({
+          claudeAiOauth: {
+            accessToken: 'token',
+            refreshToken: 'refresh',
+          },
+        })
+      );
+      await fs.writeFile(
+        path.join(mockClaudeDir, 'settings.json'),
+        JSON.stringify({ theme: 'dark' })
+      );
+      await fs.writeFile(
+        path.join(mockClaudeDir, 'stats-cache.json'),
+        JSON.stringify({ dailyActivity: [{ date: '2025-01-15', messagesCount: 5 }] })
+      );
+      const projectsDir = path.join(mockClaudeDir, 'projects');
+      await fs.mkdir(projectsDir, { recursive: true });
+      await fs.mkdir(path.join(projectsDir, 'session-1'));
+
+      const { getClaudeAuthIndicators } = await import('../src/system-paths');
+      const indicators = await getClaudeAuthIndicators();
+
+      expect(indicators.hasCredentialsFile).toBe(true);
+      expect(indicators.hasSettingsFile).toBe(true);
+      expect(indicators.hasStatsCacheWithActivity).toBe(true);
+      expect(indicators.hasProjectsSessions).toBe(true);
+      expect(indicators.credentials?.hasOAuthToken).toBe(true);
+    });
+  });
+});
diff --git a/temp_repo/libs/platform/tests/paths.test.ts b/temp_repo/libs/platform/tests/paths.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d414d4896fec53e375ffb9431ab91263f8025d40
--- /dev/null
+++ b/temp_repo/libs/platform/tests/paths.test.ts
@@ -0,0 +1,212 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+import {
+  getAutomakerDir,
+  getFeaturesDir,
+  getFeatureDir,
+  getFeatureImagesDir,
+  getBoardDir,
+  getImagesDir,
+  getContextDir,
+  getWorktreesDir,
+  getAppSpecPath,
+  getBranchTrackingPath,
+  ensureAutomakerDir,
+  getGlobalSettingsPath,
+  getCredentialsPath,
+  getProjectSettingsPath,
+  ensureDataDir,
+} from '../src/paths';
+
+describe('paths.ts', () => {
+  let tempDir: string;
+  let projectPath: string;
+  let dataDir: string;
+
+  beforeEach(async () => {
+    // Create a temporary directory for testing
+    tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'platform-paths-test-'));
+    projectPath = path.join(tempDir, 'test-project');
+    dataDir = path.join(tempDir, 'user-data');
+    await fs.mkdir(projectPath, { recursive: true });
+  });
+
+  afterEach(async () => {
+    // Clean up temporary directory
+    try {
+      await fs.rm(tempDir, { recursive: true, force: true });
+    } catch (error) {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe('Project-level path construction', () => {
+    it('should return automaker directory path', () => {
+      const result = getAutomakerDir(projectPath);
+      expect(result).toBe(path.join(projectPath, '.automaker'));
+    });
+
+    it('should return features directory path', () => {
+      const result = getFeaturesDir(projectPath);
+      expect(result).toBe(path.join(projectPath, '.automaker', 'features'));
+    });
+
+    it('should return feature directory path', () => {
+      const featureId = 'auth-feature';
+      const result = getFeatureDir(projectPath, featureId);
+      expect(result).toBe(path.join(projectPath, '.automaker', 'features', featureId));
+    });
+
+    it('should return feature images directory path', () => {
+      const featureId = 'auth-feature';
+      const result = getFeatureImagesDir(projectPath, featureId);
+      expect(result).toBe(path.join(projectPath, '.automaker', 'features', featureId, 'images'));
+    });
+
+    it('should return board directory path', () => {
+      const result = getBoardDir(projectPath);
+      expect(result).toBe(path.join(projectPath, '.automaker', 'board'));
+    });
+
+    it('should return images directory path', () => {
+      const result = getImagesDir(projectPath);
+      expect(result).toBe(path.join(projectPath, '.automaker', 'images'));
+    });
+
+    it('should return context directory path', () => {
+      const result = getContextDir(projectPath);
+      expect(result).toBe(path.join(projectPath, '.automaker', 'context'));
+    });
+
+    it('should return worktrees directory path', () => {
+      const result = getWorktreesDir(projectPath);
+      expect(result).toBe(path.join(projectPath, '.automaker', 'worktrees'));
+    });
+
+    it('should return app spec file path', () => {
+      const result = getAppSpecPath(projectPath);
+      expect(result).toBe(path.join(projectPath, '.automaker', 'app_spec.txt'));
+    });
+
+    it('should return branch tracking file path', () => {
+      const result = getBranchTrackingPath(projectPath);
+      expect(result).toBe(path.join(projectPath, '.automaker', 'active-branches.json'));
+    });
+
+    it('should return project settings file path', () => {
+      const result = getProjectSettingsPath(projectPath);
+      expect(result).toBe(path.join(projectPath, '.automaker', 'settings.json'));
+    });
+  });
+
+  describe('Global settings path construction', () => {
+    it('should return global settings path', () => {
+      const result = getGlobalSettingsPath(dataDir);
+      expect(result).toBe(path.join(dataDir, 'settings.json'));
+    });
+
+    it('should return credentials path', () => {
+      const result = getCredentialsPath(dataDir);
+      expect(result).toBe(path.join(dataDir, 'credentials.json'));
+    });
+  });
+
+  describe('Directory creation', () => {
+    it('should create automaker directory', async () => {
+      const automakerDir = await ensureAutomakerDir(projectPath);
+
+      expect(automakerDir).toBe(path.join(projectPath, '.automaker'));
+
+      const stats = await fs.stat(automakerDir);
+      expect(stats.isDirectory()).toBe(true);
+    });
+
+    it('should be idempotent when creating automaker directory', async () => {
+      // Create directory first time
+      const firstResult = await ensureAutomakerDir(projectPath);
+
+      // Create directory second time
+      const secondResult = await ensureAutomakerDir(projectPath);
+
+      expect(firstResult).toBe(secondResult);
+
+      const stats = await fs.stat(firstResult);
+      expect(stats.isDirectory()).toBe(true);
+    });
+
+    it('should create data directory', async () => {
+      const result = await ensureDataDir(dataDir);
+
+      expect(result).toBe(dataDir);
+
+      const stats = await fs.stat(dataDir);
+      expect(stats.isDirectory()).toBe(true);
+    });
+
+    it('should be idempotent when creating data directory', async () => {
+      // Create directory first time
+      const firstResult = await ensureDataDir(dataDir);
+
+      // Create directory second time
+      const secondResult = await ensureDataDir(dataDir);
+
+      expect(firstResult).toBe(secondResult);
+
+      const stats = await fs.stat(firstResult);
+      expect(stats.isDirectory()).toBe(true);
+    });
+
+    it('should create nested directories recursively', async () => {
+      const deepProjectPath = path.join(tempDir, 'nested', 'deep', 'project');
+      await fs.mkdir(deepProjectPath, { recursive: true });
+
+      const automakerDir = await ensureAutomakerDir(deepProjectPath);
+
+      const stats = await fs.stat(automakerDir);
+      expect(stats.isDirectory()).toBe(true);
+    });
+  });
+
+  describe('Path handling with special characters', () => {
+    it('should handle feature IDs with special characters', () => {
+      const featureId = 'feature-with-dashes_and_underscores';
+      const result = getFeatureDir(projectPath, featureId);
+      expect(result).toContain(featureId);
+    });
+
+    it('should handle paths with spaces', () => {
+      const pathWithSpaces = path.join(tempDir, 'path with spaces');
+      const result = getAutomakerDir(pathWithSpaces);
+      expect(result).toBe(path.join(pathWithSpaces, '.automaker'));
+    });
+  });
+
+  describe('Path relationships', () => {
+    it('should have feature dir as child of features dir', () => {
+      const featuresDir = getFeaturesDir(projectPath);
+      const featureDir = getFeatureDir(projectPath, 'test-feature');
+
+      expect(featureDir.startsWith(featuresDir)).toBe(true);
+    });
+
+    it('should have all project paths under automaker dir', () => {
+      const automakerDir = getAutomakerDir(projectPath);
+      const paths = [
+        getFeaturesDir(projectPath),
+        getBoardDir(projectPath),
+        getImagesDir(projectPath),
+        getContextDir(projectPath),
+        getWorktreesDir(projectPath),
+        getAppSpecPath(projectPath),
+        getBranchTrackingPath(projectPath),
+        getProjectSettingsPath(projectPath),
+      ];
+
+      paths.forEach((p) => {
+        expect(p.startsWith(automakerDir)).toBe(true);
+      });
+    });
+  });
+});
diff --git a/temp_repo/libs/platform/tests/rc-file-manager.test.ts b/temp_repo/libs/platform/tests/rc-file-manager.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f3753c1a499dda720352f2e4bf74667e35ec653b
--- /dev/null
+++ b/temp_repo/libs/platform/tests/rc-file-manager.test.ts
@@ -0,0 +1,100 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+import { needsRegeneration, writeRcFiles } from '../src/rc-file-manager';
+import { terminalThemeColors } from '../src/terminal-theme-colors';
+import type { TerminalConfig } from '../src/rc-generator';
+import type { ThemeMode } from '@automaker/types';
+
+describe('rc-file-manager.ts', () => {
+  let tempDir: string;
+  let projectPath: string;
+
+  const TEMP_DIR_PREFIX = 'platform-rc-files-test-';
+  const PROJECT_DIR_NAME = 'test-project';
+  const THEME_DARK = 'dark' as ThemeMode;
+  const THEME_LIGHT = 'light' as ThemeMode;
+  const PROMPT_FORMAT_STANDARD: TerminalConfig['promptFormat'] = 'standard';
+  const PROMPT_FORMAT_MINIMAL: TerminalConfig['promptFormat'] = 'minimal';
+  const EMPTY_ALIASES = '';
+  const PATH_STYLE_FULL: TerminalConfig['pathStyle'] = 'full';
+  const PATH_DEPTH_DEFAULT = 0;
+
+  const baseConfig: TerminalConfig = {
+    enabled: true,
+    customPrompt: true,
+    promptFormat: PROMPT_FORMAT_STANDARD,
+    showGitBranch: true,
+    showGitStatus: true,
+    showUserHost: true,
+    showPath: true,
+    pathStyle: PATH_STYLE_FULL,
+    pathDepth: PATH_DEPTH_DEFAULT,
+    showTime: false,
+    showExitStatus: false,
+    customAliases: EMPTY_ALIASES,
+    customEnvVars: {},
+  };
+
+  beforeEach(async () => {
+    tempDir = await fs.mkdtemp(path.join(os.tmpdir(), TEMP_DIR_PREFIX));
+    projectPath = path.join(tempDir, PROJECT_DIR_NAME);
+    await fs.mkdir(projectPath, { recursive: true });
+  });
+
+  afterEach(async () => {
+    try {
+      await fs.rm(tempDir, { recursive: true, force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  it('should not regenerate when signature matches', async () => {
+    await writeRcFiles(
+      projectPath,
+      THEME_DARK,
+      baseConfig,
+      terminalThemeColors[THEME_DARK],
+      terminalThemeColors
+    );
+
+    const needsRegen = await needsRegeneration(projectPath, THEME_DARK, baseConfig);
+
+    expect(needsRegen).toBe(false);
+  });
+
+  it('should regenerate when config changes', async () => {
+    await writeRcFiles(
+      projectPath,
+      THEME_DARK,
+      baseConfig,
+      terminalThemeColors[THEME_DARK],
+      terminalThemeColors
+    );
+
+    const updatedConfig: TerminalConfig = {
+      ...baseConfig,
+      promptFormat: PROMPT_FORMAT_MINIMAL,
+    };
+
+    const needsRegen = await needsRegeneration(projectPath, THEME_DARK, updatedConfig);
+
+    expect(needsRegen).toBe(true);
+  });
+
+  it('should regenerate when theme changes', async () => {
+    await writeRcFiles(
+      projectPath,
+      THEME_DARK,
+      baseConfig,
+      terminalThemeColors[THEME_DARK],
+      terminalThemeColors
+    );
+
+    const needsRegen = await needsRegeneration(projectPath, THEME_LIGHT, baseConfig);
+
+    expect(needsRegen).toBe(true);
+  });
+});
diff --git a/temp_repo/libs/platform/tests/rc-generator.test.ts b/temp_repo/libs/platform/tests/rc-generator.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7951e259e3e8b2ff8a7e6b68e169c55aead405f7
--- /dev/null
+++ b/temp_repo/libs/platform/tests/rc-generator.test.ts
@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest';
+import { generateCommonFunctions, generateThemeColors } from '../src/rc-generator';
+import { terminalThemeColors } from '../src/terminal-theme-colors';
+import type { TerminalConfig } from '../src/rc-generator';
+import type { ThemeMode } from '@automaker/types';
+
+describe('rc-generator.ts', () => {
+  const THEME_DARK = 'dark' as ThemeMode;
+  const PROMPT_FORMAT_STANDARD: TerminalConfig['promptFormat'] = 'standard';
+  const EMPTY_ALIASES = '';
+  const EMPTY_ENV_VARS = {};
+  const PATH_STYLE_FULL: TerminalConfig['pathStyle'] = 'full';
+  const PATH_DEPTH_DEFAULT = 0;
+  const EXPECTED_BANNER_FUNCTION = 'automaker_show_banner_once';
+  const RAW_COLOR_PREFIX = 'export COLOR_USER_RAW=';
+  const RAW_COLOR_ESCAPE_START = '\\\\[';
+  const RAW_COLOR_ESCAPE_END = '\\\\]';
+  const STARTUP_PRIMARY_COLOR = '38;5;51m';
+  const STARTUP_SECONDARY_COLOR = '38;5;39m';
+  const STARTUP_ACCENT_COLOR = '38;5;33m';
+
+  const baseConfig: TerminalConfig = {
+    enabled: true,
+    customPrompt: true,
+    promptFormat: PROMPT_FORMAT_STANDARD,
+    showGitBranch: true,
+    showGitStatus: true,
+    showUserHost: true,
+    showPath: true,
+    pathStyle: PATH_STYLE_FULL,
+    pathDepth: PATH_DEPTH_DEFAULT,
+    showTime: false,
+    showExitStatus: false,
+    customAliases: EMPTY_ALIASES,
+    customEnvVars: EMPTY_ENV_VARS,
+  };
+
+  it('includes banner functions in common shell script', () => {
+    const output = generateCommonFunctions(baseConfig);
+
+    expect(output).toContain(EXPECTED_BANNER_FUNCTION);
+    expect(output).toContain(STARTUP_PRIMARY_COLOR);
+    expect(output).toContain(STARTUP_SECONDARY_COLOR);
+    expect(output).toContain(STARTUP_ACCENT_COLOR);
+  });
+
+  it('exports raw banner colors without prompt escape wrappers', () => {
+    const output = generateThemeColors(terminalThemeColors[THEME_DARK]);
+    const rawLine = output.split('\n').find((line) => line.startsWith(RAW_COLOR_PREFIX));
+
+    expect(rawLine).toBeDefined();
+    expect(rawLine).not.toContain(RAW_COLOR_ESCAPE_START);
+    expect(rawLine).not.toContain(RAW_COLOR_ESCAPE_END);
+  });
+});
diff --git a/temp_repo/libs/platform/tests/secure-fs.test.ts b/temp_repo/libs/platform/tests/secure-fs.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c73d8611666a4a53d27945a833cf892d64613576
--- /dev/null
+++ b/temp_repo/libs/platform/tests/secure-fs.test.ts
@@ -0,0 +1,136 @@
+/**
+ * Unit tests for secure-fs throttling and retry logic
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import * as secureFs from '../src/secure-fs.js';
+
+describe('secure-fs throttling', () => {
+  beforeEach(() => {
+    // Reset throttling configuration before each test
+    secureFs.configureThrottling({
+      maxConcurrency: 100,
+      maxRetries: 3,
+      baseDelay: 100,
+      maxDelay: 5000,
+    });
+  });
+
+  describe('configureThrottling', () => {
+    it('should update configuration with new values', () => {
+      secureFs.configureThrottling({ maxConcurrency: 50 });
+      const config = secureFs.getThrottlingConfig();
+      expect(config.maxConcurrency).toBe(50);
+    });
+
+    it('should preserve existing values when updating partial config', () => {
+      secureFs.configureThrottling({ maxRetries: 5 });
+      const config = secureFs.getThrottlingConfig();
+      expect(config.maxConcurrency).toBe(100); // Default value preserved
+      expect(config.maxRetries).toBe(5);
+    });
+  });
+
+  describe('getThrottlingConfig', () => {
+    it('should return current configuration', () => {
+      const config = secureFs.getThrottlingConfig();
+      expect(config).toHaveProperty('maxConcurrency');
+      expect(config).toHaveProperty('maxRetries');
+      expect(config).toHaveProperty('baseDelay');
+      expect(config).toHaveProperty('maxDelay');
+    });
+
+    it('should return default values initially', () => {
+      const config = secureFs.getThrottlingConfig();
+      expect(config.maxConcurrency).toBe(100);
+      expect(config.maxRetries).toBe(3);
+      expect(config.baseDelay).toBe(100);
+      expect(config.maxDelay).toBe(5000);
+    });
+  });
+
+  describe('getPendingOperations', () => {
+    it('should return 0 when no operations are pending', () => {
+      expect(secureFs.getPendingOperations()).toBe(0);
+    });
+  });
+
+  describe('getActiveOperations', () => {
+    it('should return 0 when no operations are active', () => {
+      expect(secureFs.getActiveOperations()).toBe(0);
+    });
+  });
+
+  describe('concurrency limiting', () => {
+    it('should apply maxConcurrency configuration', () => {
+      secureFs.configureThrottling({ maxConcurrency: 2 });
+
+      // This test verifies that the configuration is applied.
+      // A more robust integration test should verify the actual concurrency behavior
+      // by observing getActiveOperations() and getPendingOperations() under load.
+      expect(secureFs.getThrottlingConfig().maxConcurrency).toBe(2);
+    });
+
+    it('should throw when changing maxConcurrency while operations are in flight', async () => {
+      // We can't easily simulate in-flight operations without mocking,
+      // but we can verify the check exists by testing when no ops are in flight
+      expect(secureFs.getActiveOperations()).toBe(0);
+      expect(secureFs.getPendingOperations()).toBe(0);
+
+      // Should not throw when no operations in flight
+      expect(() => secureFs.configureThrottling({ maxConcurrency: 50 })).not.toThrow();
+    });
+  });
+});
+
+describe('file descriptor error handling', () => {
+  it('should have retry configuration for file descriptor errors', () => {
+    const config = secureFs.getThrottlingConfig();
+    expect(config.maxRetries).toBe(3);
+    expect(config.baseDelay).toBe(100);
+    expect(config.maxDelay).toBe(5000);
+  });
+
+  it('should allow configuring retry parameters', () => {
+    secureFs.configureThrottling({ maxRetries: 5, baseDelay: 200 });
+    const config = secureFs.getThrottlingConfig();
+    expect(config.maxRetries).toBe(5);
+    expect(config.baseDelay).toBe(200);
+  });
+});
+
+describe('retry logic behavior', () => {
+  beforeEach(() => {
+    secureFs.configureThrottling({
+      maxConcurrency: 100,
+      maxRetries: 3,
+      baseDelay: 10, // Use short delays for tests
+      maxDelay: 50,
+    });
+  });
+
+  // Note: Due to ESM module limitations, we cannot easily mock fs/promises directly.
+  // These tests verify the configuration is correctly set up for retry behavior.
+  // The actual retry logic is integration-tested when real file descriptor errors occur.
+
+  it('should have correct retry configuration for ENFILE/EMFILE errors', () => {
+    const config = secureFs.getThrottlingConfig();
+    expect(config.maxRetries).toBe(3);
+    expect(config.baseDelay).toBe(10);
+    expect(config.maxDelay).toBe(50);
+  });
+
+  it('should expose operation counts for monitoring', () => {
+    // These should be 0 when no operations are in flight
+    expect(secureFs.getActiveOperations()).toBe(0);
+    expect(secureFs.getPendingOperations()).toBe(0);
+  });
+
+  it('should allow customizing retry behavior', () => {
+    secureFs.configureThrottling({ maxRetries: 5, baseDelay: 200, maxDelay: 10000 });
+    const config = secureFs.getThrottlingConfig();
+    expect(config.maxRetries).toBe(5);
+    expect(config.baseDelay).toBe(200);
+    expect(config.maxDelay).toBe(10000);
+  });
+});
diff --git a/temp_repo/libs/platform/tests/security.test.ts b/temp_repo/libs/platform/tests/security.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dd2224c52fc7d8e89a30643e55848c78645106a4
--- /dev/null
+++ b/temp_repo/libs/platform/tests/security.test.ts
@@ -0,0 +1,234 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import path from 'path';
+
+describe('security.ts', () => {
+  let originalEnv: NodeJS.ProcessEnv;
+
+  beforeEach(() => {
+    // Save original environment
+    originalEnv = { ...process.env };
+    // Reset modules to get fresh state
+    vi.resetModules();
+  });
+
+  afterEach(() => {
+    // Restore original environment
+    process.env = originalEnv;
+  });
+
+  describe('initAllowedPaths', () => {
+    it('should load ALLOWED_ROOT_DIRECTORY if set', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/projects';
+      delete process.env.DATA_DIR;
+
+      const { initAllowedPaths, getAllowedPaths } = await import('../src/security');
+      initAllowedPaths();
+
+      const allowed = getAllowedPaths();
+      expect(allowed).toContain(path.resolve('/projects'));
+    });
+
+    it('should load DATA_DIR if set', async () => {
+      delete process.env.ALLOWED_ROOT_DIRECTORY;
+      process.env.DATA_DIR = '/data/directory';
+
+      const { initAllowedPaths, getAllowedPaths } = await import('../src/security');
+      initAllowedPaths();
+
+      const allowed = getAllowedPaths();
+      expect(allowed).toContain(path.resolve('/data/directory'));
+    });
+
+    it('should load both ALLOWED_ROOT_DIRECTORY and DATA_DIR if both set', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/projects';
+      process.env.DATA_DIR = '/app/data';
+
+      const { initAllowedPaths, getAllowedPaths } = await import('../src/security');
+      initAllowedPaths();
+
+      const allowed = getAllowedPaths();
+      expect(allowed).toContain(path.resolve('/projects'));
+      expect(allowed).toContain(path.resolve('/app/data'));
+    });
+
+    it('should handle missing environment variables gracefully', async () => {
+      delete process.env.ALLOWED_ROOT_DIRECTORY;
+      delete process.env.DATA_DIR;
+
+      const { initAllowedPaths } = await import('../src/security');
+      expect(() => initAllowedPaths()).not.toThrow();
+    });
+  });
+
+  describe('isPathAllowed', () => {
+    it('should allow paths within ALLOWED_ROOT_DIRECTORY', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/allowed';
+      delete process.env.DATA_DIR;
+
+      const { initAllowedPaths, isPathAllowed } = await import('../src/security');
+      initAllowedPaths();
+
+      expect(isPathAllowed('/allowed/file.txt')).toBe(true);
+      expect(isPathAllowed('/allowed/subdir/file.txt')).toBe(true);
+    });
+
+    it('should deny paths outside ALLOWED_ROOT_DIRECTORY', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/allowed';
+      delete process.env.DATA_DIR;
+
+      const { initAllowedPaths, isPathAllowed } = await import('../src/security');
+      initAllowedPaths();
+
+      expect(isPathAllowed('/not-allowed/file.txt')).toBe(false);
+      expect(isPathAllowed('/etc/passwd')).toBe(false);
+    });
+
+    it('should always allow DATA_DIR paths', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/projects';
+      process.env.DATA_DIR = '/app/data';
+
+      const { initAllowedPaths, isPathAllowed } = await import('../src/security');
+      initAllowedPaths();
+
+      // DATA_DIR paths are always allowed
+      expect(isPathAllowed('/app/data/settings.json')).toBe(true);
+      expect(isPathAllowed('/app/data/credentials.json')).toBe(true);
+    });
+
+    it('should allow all paths when no restrictions configured', async () => {
+      delete process.env.ALLOWED_ROOT_DIRECTORY;
+      delete process.env.DATA_DIR;
+
+      const { initAllowedPaths, isPathAllowed } = await import('../src/security');
+      initAllowedPaths();
+
+      expect(isPathAllowed('/any/path')).toBe(true);
+      expect(isPathAllowed('/etc/passwd')).toBe(true);
+    });
+
+    it('should allow all paths when only DATA_DIR is configured', async () => {
+      delete process.env.ALLOWED_ROOT_DIRECTORY;
+      process.env.DATA_DIR = '/data';
+
+      const { initAllowedPaths, isPathAllowed } = await import('../src/security');
+      initAllowedPaths();
+
+      // DATA_DIR should be allowed
+      expect(isPathAllowed('/data/file.txt')).toBe(true);
+      // And all other paths should be allowed since no ALLOWED_ROOT_DIRECTORY restriction
+      expect(isPathAllowed('/any/path')).toBe(true);
+    });
+  });
+
+  describe('validatePath', () => {
+    it('should return resolved path for allowed paths', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/allowed';
+      delete process.env.DATA_DIR;
+
+      const { initAllowedPaths, validatePath } = await import('../src/security');
+      initAllowedPaths();
+
+      const result = validatePath('/allowed/file.txt');
+      expect(result).toBe(path.resolve('/allowed/file.txt'));
+    });
+
+    it('should throw error for paths outside allowed directories', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/allowed';
+      delete process.env.DATA_DIR;
+
+      const { initAllowedPaths, validatePath, PathNotAllowedError } =
+        await import('../src/security');
+      initAllowedPaths();
+
+      expect(() => validatePath('/not-allowed/file.txt')).toThrow(PathNotAllowedError);
+    });
+
+    it('should resolve relative paths', async () => {
+      const cwd = process.cwd();
+      process.env.ALLOWED_ROOT_DIRECTORY = cwd;
+      delete process.env.DATA_DIR;
+
+      const { initAllowedPaths, validatePath } = await import('../src/security');
+      initAllowedPaths();
+
+      const result = validatePath('./file.txt');
+      expect(result).toBe(path.resolve(cwd, './file.txt'));
+    });
+
+    it('should not throw when no restrictions configured', async () => {
+      delete process.env.ALLOWED_ROOT_DIRECTORY;
+      delete process.env.DATA_DIR;
+
+      const { initAllowedPaths, validatePath } = await import('../src/security');
+      initAllowedPaths();
+
+      expect(() => validatePath('/any/path')).not.toThrow();
+    });
+  });
+
+  describe('getAllowedPaths', () => {
+    it('should return empty array when no paths configured', async () => {
+      delete process.env.ALLOWED_ROOT_DIRECTORY;
+      delete process.env.DATA_DIR;
+
+      const { initAllowedPaths, getAllowedPaths } = await import('../src/security');
+      initAllowedPaths();
+
+      const allowed = getAllowedPaths();
+      expect(Array.isArray(allowed)).toBe(true);
+      expect(allowed).toHaveLength(0);
+    });
+
+    it('should return configured paths', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/projects';
+      process.env.DATA_DIR = '/data';
+
+      const { initAllowedPaths, getAllowedPaths } = await import('../src/security');
+      initAllowedPaths();
+
+      const allowed = getAllowedPaths();
+      expect(allowed).toContain(path.resolve('/projects'));
+      expect(allowed).toContain(path.resolve('/data'));
+    });
+  });
+
+  describe('getAllowedRootDirectory', () => {
+    it('should return the configured root directory', async () => {
+      process.env.ALLOWED_ROOT_DIRECTORY = '/projects';
+
+      const { initAllowedPaths, getAllowedRootDirectory } = await import('../src/security');
+      initAllowedPaths();
+
+      expect(getAllowedRootDirectory()).toBe(path.resolve('/projects'));
+    });
+
+    it('should return null when not configured', async () => {
+      delete process.env.ALLOWED_ROOT_DIRECTORY;
+
+      const { initAllowedPaths, getAllowedRootDirectory } = await import('../src/security');
+      initAllowedPaths();
+
+      expect(getAllowedRootDirectory()).toBeNull();
+    });
+  });
+
+  describe('getDataDirectory', () => {
+    it('should return the configured data directory', async () => {
+      process.env.DATA_DIR = '/data';
+
+      const { initAllowedPaths, getDataDirectory } = await import('../src/security');
+      initAllowedPaths();
+
+      expect(getDataDirectory()).toBe(path.resolve('/data'));
+    });
+
+    it('should return null when not configured', async () => {
+      delete process.env.DATA_DIR;
+
+      const { initAllowedPaths, getDataDirectory } = await import('../src/security');
+      initAllowedPaths();
+
+      expect(getDataDirectory()).toBeNull();
+    });
+  });
+});
diff --git a/temp_repo/libs/platform/tests/subprocess.test.ts b/temp_repo/libs/platform/tests/subprocess.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c302df11b73828ea8fcac3632673fd2905ce84db
--- /dev/null
+++ b/temp_repo/libs/platform/tests/subprocess.test.ts
@@ -0,0 +1,516 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { spawnJSONLProcess, spawnProcess, type SubprocessOptions } from '../src/subprocess';
+import * as cp from 'child_process';
+import { EventEmitter } from 'events';
+import { Readable } from 'stream';
+
+vi.mock('child_process');
+
+/**
+ * Helper to collect all items from an async generator
+ */
+async function collectAsyncGenerator<T>(generator: AsyncGenerator<T>): Promise<T[]> {
+  const results: T[] = [];
+  for await (const item of generator) {
+    results.push(item);
+  }
+  return results;
+}
+
+describe('subprocess.ts', () => {
+  let consoleSpy: {
+    log: ReturnType<typeof vi.spyOn>;
+    warn: ReturnType<typeof vi.spyOn>;
+    error: ReturnType<typeof vi.spyOn>;
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    consoleSpy = {
+      log: vi.spyOn(console, 'log').mockImplementation(() => {}),
+      warn: vi.spyOn(console, 'warn').mockImplementation(() => {}),
+      error: vi.spyOn(console, 'error').mockImplementation(() => {}),
+    };
+  });
+
+  afterEach(() => {
+    consoleSpy.log.mockRestore();
+    consoleSpy.warn.mockRestore();
+    consoleSpy.error.mockRestore();
+  });
+
+  /**
+   * Helper to create a mock ChildProcess with stdout/stderr streams
+   */
+  function createMockProcess(config: {
+    stdoutLines?: string[];
+    stderrLines?: string[];
+    exitCode?: number;
+    error?: Error;
+    delayMs?: number;
+  }) {
+    const mockProcess = new EventEmitter() as cp.ChildProcess & {
+      stdout: Readable;
+      stderr: Readable;
+      kill: ReturnType<typeof vi.fn>;
+    };
+
+    // Create readable streams for stdout and stderr
+    const stdout = new Readable({ read() {} });
+    const stderr = new Readable({ read() {} });
+
+    mockProcess.stdout = stdout;
+    mockProcess.stderr = stderr;
+    mockProcess.kill = vi.fn().mockReturnValue(true);
+
+    // Use process.nextTick to ensure readline interface is set up first
+    process.nextTick(() => {
+      // Emit stderr lines immediately
+      if (config.stderrLines) {
+        for (const line of config.stderrLines) {
+          stderr.emit('data', Buffer.from(line));
+        }
+      }
+
+      // Emit stdout lines with small delays to ensure readline processes them
+      const emitLines = async () => {
+        if (config.stdoutLines) {
+          for (const line of config.stdoutLines) {
+            stdout.push(line + '\n');
+            // Small delay to allow readline to process
+            await new Promise((resolve) => setImmediate(resolve));
+          }
+        }
+
+        // Small delay before ending stream
+        await new Promise((resolve) => setImmediate(resolve));
+        stdout.push(null); // End stdout
+
+        // Small delay before exit
+        await new Promise((resolve) => setTimeout(resolve, config.delayMs ?? 10));
+
+        // Emit exit or error
+        if (config.error) {
+          mockProcess.emit('error', config.error);
+        } else {
+          mockProcess.emit('exit', config.exitCode ?? 0);
+        }
+      };
+
+      emitLines();
+    });
+
+    return mockProcess;
+  }
+
+  describe('spawnJSONLProcess', () => {
+    const baseOptions: SubprocessOptions = {
+      command: 'test-command',
+      args: ['arg1', 'arg2'],
+      cwd: '/test/dir',
+    };
+
+    it('should yield parsed JSONL objects line by line', async () => {
+      const mockProcess = createMockProcess({
+        stdoutLines: [
+          '{"type":"start","id":1}',
+          '{"type":"progress","value":50}',
+          '{"type":"complete","result":"success"}',
+        ],
+        exitCode: 0,
+      });
+
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      const generator = spawnJSONLProcess(baseOptions);
+      const results = await collectAsyncGenerator(generator);
+
+      expect(results).toHaveLength(3);
+      expect(results[0]).toEqual({ type: 'start', id: 1 });
+      expect(results[1]).toEqual({ type: 'progress', value: 50 });
+      expect(results[2]).toEqual({ type: 'complete', result: 'success' });
+    });
+
+    it('should skip empty lines', async () => {
+      const mockProcess = createMockProcess({
+        stdoutLines: ['{"type":"first"}', '', '   ', '{"type":"second"}'],
+        exitCode: 0,
+      });
+
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      const generator = spawnJSONLProcess(baseOptions);
+      const results = await collectAsyncGenerator(generator);
+
+      expect(results).toHaveLength(2);
+      expect(results[0]).toEqual({ type: 'first' });
+      expect(results[1]).toEqual({ type: 'second' });
+    });
+
+    it('should yield error for malformed JSON and continue processing', async () => {
+      const mockProcess = createMockProcess({
+        stdoutLines: ['{"type":"valid"}', '{invalid json}', '{"type":"also_valid"}'],
+        exitCode: 0,
+      });
+
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      const generator = spawnJSONLProcess(baseOptions);
+      const results = await collectAsyncGenerator(generator);
+
+      expect(results).toHaveLength(3);
+      expect(results[0]).toEqual({ type: 'valid' });
+      expect(results[1]).toMatchObject({
+        type: 'error',
+        error: expect.stringContaining('Failed to parse output'),
+      });
+      expect(results[2]).toEqual({ type: 'also_valid' });
+    });
+
+    it('should collect stderr output', async () => {
+      const mockProcess = createMockProcess({
+        stdoutLines: ['{"type":"test"}'],
+        stderrLines: ['Warning: something happened', 'Error: critical issue'],
+        exitCode: 0,
+      });
+
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      const generator = spawnJSONLProcess(baseOptions);
+      await collectAsyncGenerator(generator);
+
+      expect(consoleSpy.warn).toHaveBeenCalledWith(
+        expect.stringContaining('[SubprocessManager] stderr: Warning: something happened')
+      );
+      expect(consoleSpy.warn).toHaveBeenCalledWith(
+        expect.stringContaining('[SubprocessManager] stderr: Error: critical issue')
+      );
+    });
+
+    it('should yield error on non-zero exit code', async () => {
+      const mockProcess = createMockProcess({
+        stdoutLines: ['{"type":"started"}'],
+        stderrLines: ['Process failed with error'],
+        exitCode: 1,
+      });
+
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      const generator = spawnJSONLProcess(baseOptions);
+      const results = await collectAsyncGenerator(generator);
+
+      expect(results).toHaveLength(2);
+      expect(results[0]).toEqual({ type: 'started' });
+      expect(results[1]).toMatchObject({
+        type: 'error',
+        error: expect.stringContaining('Process failed with error'),
+      });
+    });
+
+    it('should yield error with exit code when stderr is empty', async () => {
+      const mockProcess = createMockProcess({
+        stdoutLines: ['{"type":"test"}'],
+        exitCode: 127,
+      });
+
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      const generator = spawnJSONLProcess(baseOptions);
+      const results = await collectAsyncGenerator(generator);
+
+      expect(results).toHaveLength(2);
+      expect(results[1]).toMatchObject({
+        type: 'error',
+        error: 'Process exited with code 127',
+      });
+    });
+
+    it('should handle process spawn errors', async () => {
+      const mockProcess = createMockProcess({
+        error: new Error('Command not found'),
+      });
+
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      const generator = spawnJSONLProcess(baseOptions);
+      const results = await collectAsyncGenerator(generator);
+
+      // When process.on('error') fires, exitCode is null
+      // The generator should handle this gracefully
+      expect(results).toEqual([]);
+    });
+
+    it('should kill process on AbortController signal', async () => {
+      const abortController = new AbortController();
+      const mockProcess = createMockProcess({
+        stdoutLines: ['{"type":"start"}'],
+        exitCode: 0,
+        delayMs: 200, // Delay to allow abort
+      });
+
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      const generator = spawnJSONLProcess({
+        ...baseOptions,
+        abortController,
+      });
+
+      // Start consuming the generator
+      const promise = collectAsyncGenerator(generator);
+
+      // Abort after a short delay to ensure generator has started
+      // Use setImmediate to ensure the generator has started processing
+      setImmediate(() => {
+        abortController.abort();
+      });
+
+      await promise;
+
+      expect(mockProcess.kill).toHaveBeenCalledWith('SIGTERM');
+      expect(consoleSpy.log).toHaveBeenCalledWith(expect.stringContaining('Abort signal received'));
+    });
+
+    it('should spawn process with correct arguments', async () => {
+      const mockProcess = createMockProcess({ exitCode: 0 });
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      const options: SubprocessOptions = {
+        command: 'my-command',
+        args: ['--flag', 'value'],
+        cwd: '/work/dir',
+        env: { CUSTOM_VAR: 'test' },
+      };
+
+      const generator = spawnJSONLProcess(options);
+      await collectAsyncGenerator(generator);
+
+      expect(cp.spawn).toHaveBeenCalledWith(
+        'my-command',
+        ['--flag', 'value'],
+        expect.objectContaining({
+          cwd: '/work/dir',
+          env: expect.objectContaining({ CUSTOM_VAR: 'test' }),
+          stdio: ['ignore', 'pipe', 'pipe'],
+        })
+      );
+    });
+
+    it('should merge env with process.env', async () => {
+      const mockProcess = createMockProcess({ exitCode: 0 });
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      const options: SubprocessOptions = {
+        command: 'test',
+        args: [],
+        cwd: '/test',
+        env: { CUSTOM: 'value' },
+      };
+
+      const generator = spawnJSONLProcess(options);
+      await collectAsyncGenerator(generator);
+
+      expect(cp.spawn).toHaveBeenCalledWith(
+        'test',
+        [],
+        expect.objectContaining({
+          env: expect.objectContaining({
+            CUSTOM: 'value',
+            // Should also include existing process.env
+            NODE_ENV: process.env.NODE_ENV,
+          }),
+        })
+      );
+    });
+
+    it('should handle complex JSON objects', async () => {
+      const complexObject = {
+        type: 'complex',
+        nested: { deep: { value: [1, 2, 3] } },
+        array: [{ id: 1 }, { id: 2 }],
+        string: 'with "quotes" and \\backslashes',
+      };
+
+      const mockProcess = createMockProcess({
+        stdoutLines: [JSON.stringify(complexObject)],
+        exitCode: 0,
+      });
+
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      const generator = spawnJSONLProcess(baseOptions);
+      const results = await collectAsyncGenerator(generator);
+
+      expect(results).toHaveLength(1);
+      expect(results[0]).toEqual(complexObject);
+    });
+  });
+
+  describe('spawnProcess', () => {
+    const baseOptions: SubprocessOptions = {
+      command: 'test-command',
+      args: ['arg1'],
+      cwd: '/test',
+    };
+
+    it('should collect stdout and stderr', async () => {
+      const mockProcess = new EventEmitter() as cp.ChildProcess & {
+        stdout: Readable;
+        stderr: Readable;
+        kill: ReturnType<typeof vi.fn>;
+      };
+      const stdout = new Readable({ read() {} });
+      const stderr = new Readable({ read() {} });
+
+      mockProcess.stdout = stdout;
+      mockProcess.stderr = stderr;
+      mockProcess.kill = vi.fn().mockReturnValue(true);
+
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      setTimeout(() => {
+        stdout.push('line 1\n');
+        stdout.push('line 2\n');
+        stdout.push(null);
+
+        stderr.push('error 1\n');
+        stderr.push('error 2\n');
+        stderr.push(null);
+
+        mockProcess.emit('exit', 0);
+      }, 10);
+
+      const result = await spawnProcess(baseOptions);
+
+      expect(result.stdout).toBe('line 1\nline 2\n');
+      expect(result.stderr).toBe('error 1\nerror 2\n');
+      expect(result.exitCode).toBe(0);
+    });
+
+    it('should return correct exit code', async () => {
+      const mockProcess = new EventEmitter() as cp.ChildProcess & {
+        stdout: Readable;
+        stderr: Readable;
+        kill: ReturnType<typeof vi.fn>;
+      };
+      mockProcess.stdout = new Readable({ read() {} });
+      mockProcess.stderr = new Readable({ read() {} });
+      mockProcess.kill = vi.fn().mockReturnValue(true);
+
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      setTimeout(() => {
+        mockProcess.stdout.push(null);
+        mockProcess.stderr.push(null);
+        mockProcess.emit('exit', 42);
+      }, 10);
+
+      const result = await spawnProcess(baseOptions);
+
+      expect(result.exitCode).toBe(42);
+    });
+
+    it('should handle process errors', async () => {
+      const mockProcess = new EventEmitter() as cp.ChildProcess & {
+        stdout: Readable;
+        stderr: Readable;
+        kill: ReturnType<typeof vi.fn>;
+      };
+      mockProcess.stdout = new Readable({ read() {} });
+      mockProcess.stderr = new Readable({ read() {} });
+      mockProcess.kill = vi.fn().mockReturnValue(true);
+
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      setTimeout(() => {
+        mockProcess.emit('error', new Error('Spawn failed'));
+      }, 10);
+
+      await expect(spawnProcess(baseOptions)).rejects.toThrow('Spawn failed');
+    });
+
+    it('should handle AbortController signal', async () => {
+      const abortController = new AbortController();
+      const mockProcess = new EventEmitter() as cp.ChildProcess & {
+        stdout: Readable;
+        stderr: Readable;
+        kill: ReturnType<typeof vi.fn>;
+      };
+      mockProcess.stdout = new Readable({ read() {} });
+      mockProcess.stderr = new Readable({ read() {} });
+      mockProcess.kill = vi.fn().mockReturnValue(true);
+
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      setTimeout(() => abortController.abort(), 20);
+
+      await expect(spawnProcess({ ...baseOptions, abortController })).rejects.toThrow(
+        'Process aborted'
+      );
+
+      expect(mockProcess.kill).toHaveBeenCalledWith('SIGTERM');
+    });
+
+    it('should spawn with correct options', async () => {
+      const mockProcess = new EventEmitter() as cp.ChildProcess & {
+        stdout: Readable;
+        stderr: Readable;
+        kill: ReturnType<typeof vi.fn>;
+      };
+      mockProcess.stdout = new Readable({ read() {} });
+      mockProcess.stderr = new Readable({ read() {} });
+      mockProcess.kill = vi.fn().mockReturnValue(true);
+
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      setTimeout(() => {
+        mockProcess.stdout.push(null);
+        mockProcess.stderr.push(null);
+        mockProcess.emit('exit', 0);
+      }, 10);
+
+      const options: SubprocessOptions = {
+        command: 'my-cmd',
+        args: ['--verbose'],
+        cwd: '/my/dir',
+        env: { MY_VAR: 'value' },
+      };
+
+      await spawnProcess(options);
+
+      expect(cp.spawn).toHaveBeenCalledWith(
+        'my-cmd',
+        ['--verbose'],
+        expect.objectContaining({
+          cwd: '/my/dir',
+          env: expect.objectContaining({ MY_VAR: 'value' }),
+          stdio: ['ignore', 'pipe', 'pipe'],
+        })
+      );
+    });
+
+    it('should handle empty stdout and stderr', async () => {
+      const mockProcess = new EventEmitter() as cp.ChildProcess & {
+        stdout: Readable;
+        stderr: Readable;
+        kill: ReturnType<typeof vi.fn>;
+      };
+      mockProcess.stdout = new Readable({ read() {} });
+      mockProcess.stderr = new Readable({ read() {} });
+      mockProcess.kill = vi.fn().mockReturnValue(true);
+
+      vi.mocked(cp.spawn).mockReturnValue(mockProcess);
+
+      setTimeout(() => {
+        mockProcess.stdout.push(null);
+        mockProcess.stderr.push(null);
+        mockProcess.emit('exit', 0);
+      }, 10);
+
+      const result = await spawnProcess(baseOptions);
+
+      expect(result.stdout).toBe('');
+      expect(result.stderr).toBe('');
+      expect(result.exitCode).toBe(0);
+    });
+  });
+});
diff --git a/temp_repo/libs/platform/tests/terminal-theme-colors.test.ts b/temp_repo/libs/platform/tests/terminal-theme-colors.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..216656776dc481a6d5a57c23a4b7f3ada4b9bda9
--- /dev/null
+++ b/temp_repo/libs/platform/tests/terminal-theme-colors.test.ts
@@ -0,0 +1,336 @@
+/**
+ * Unit tests for terminal-theme-colors
+ * Tests the terminal theme color definitions and override logic
+ */
+
+import { describe, it, expect } from 'vitest';
+import { terminalThemeColors, getTerminalThemeColors } from '../src/terminal-theme-colors';
+import type { ThemeMode } from '@automaker/types';
+
+describe('terminal-theme-colors', () => {
+  describe('terminalThemeColors', () => {
+    it('should have dark theme with correct colors', () => {
+      const theme = terminalThemeColors.dark;
+      expect(theme.background).toBe('#000000');
+      expect(theme.foreground).toBe('#ffffff');
+      expect(theme.cursor).toBe('#ffffff');
+    });
+
+    it('should have light theme with correct colors', () => {
+      const theme = terminalThemeColors.light;
+      expect(theme.background).toBe('#ffffff');
+      expect(theme.foreground).toBe('#383a42');
+      expect(theme.cursor).toBe('#383a42');
+    });
+
+    it('should have dracula theme with correct colors', () => {
+      const theme = terminalThemeColors.dracula;
+      expect(theme.background).toBe('#282a36');
+      expect(theme.foreground).toBe('#f8f8f2');
+      expect(theme.cursor).toBe('#f8f8f2');
+    });
+
+    it('should have nord theme with correct colors', () => {
+      const theme = terminalThemeColors.nord;
+      expect(theme.background).toBe('#2e3440');
+      expect(theme.foreground).toBe('#d8dee9');
+    });
+
+    it('should have catppuccin theme with correct colors', () => {
+      const theme = terminalThemeColors.catppuccin;
+      expect(theme.background).toBe('#1e1e2e');
+      expect(theme.foreground).toBe('#cdd6f4');
+    });
+
+    it('should have all required ANSI color properties for each theme', () => {
+      const requiredColors = [
+        'black',
+        'red',
+        'green',
+        'yellow',
+        'blue',
+        'magenta',
+        'cyan',
+        'white',
+        'brightBlack',
+        'brightRed',
+        'brightGreen',
+        'brightYellow',
+        'brightBlue',
+        'brightMagenta',
+        'brightCyan',
+        'brightWhite',
+      ];
+
+      // Test a few key themes
+      const themesToTest: ThemeMode[] = ['dark', 'light', 'dracula', 'nord', 'catppuccin'];
+
+      for (const themeName of themesToTest) {
+        const theme = terminalThemeColors[themeName];
+        for (const color of requiredColors) {
+          expect(theme, `Theme ${themeName} should have ${color}`).toHaveProperty(color);
+          expect(typeof theme[color as keyof typeof theme]).toBe('string');
+        }
+      }
+    });
+
+    it('should have core theme properties for each theme', () => {
+      const coreProperties = [
+        'background',
+        'foreground',
+        'cursor',
+        'cursorAccent',
+        'selectionBackground',
+      ];
+
+      const themesToTest: ThemeMode[] = ['dark', 'light', 'dracula', 'nord', 'catppuccin'];
+
+      for (const themeName of themesToTest) {
+        const theme = terminalThemeColors[themeName];
+        for (const prop of coreProperties) {
+          expect(theme, `Theme ${themeName} should have ${prop}`).toHaveProperty(prop);
+          expect(typeof theme[prop as keyof typeof theme]).toBe('string');
+        }
+      }
+    });
+
+    it('should map alias themes to their base themes correctly', () => {
+      // Forest is mapped to gruvbox
+      expect(terminalThemeColors.forest).toBe(terminalThemeColors.gruvbox);
+
+      // Ocean is mapped to nord
+      expect(terminalThemeColors.ocean).toBe(terminalThemeColors.nord);
+
+      // Ember is mapped to monokai
+      expect(terminalThemeColors.ember).toBe(terminalThemeColors.monokai);
+
+      // Light theme aliases
+      expect(terminalThemeColors.solarizedlight).toBe(terminalThemeColors.light);
+      expect(terminalThemeColors.github).toBe(terminalThemeColors.light);
+
+      // Cream theme aliases
+      expect(terminalThemeColors.sand).toBe(terminalThemeColors.cream);
+      expect(terminalThemeColors.peach).toBe(terminalThemeColors.cream);
+    });
+  });
+
+  describe('getTerminalThemeColors', () => {
+    it('should return dark theme by default', () => {
+      const theme = getTerminalThemeColors('dark');
+      expect(theme.background).toBe('#000000');
+      expect(theme.foreground).toBe('#ffffff');
+    });
+
+    it('should return dark theme for unknown theme (fallback)', () => {
+      const theme = getTerminalThemeColors('unknown-theme' as ThemeMode);
+      expect(theme.background).toBe('#000000');
+      expect(theme.foreground).toBe('#ffffff');
+    });
+
+    it('should return light theme for light mode', () => {
+      const theme = getTerminalThemeColors('light');
+      expect(theme.background).toBe('#ffffff');
+      expect(theme.foreground).toBe('#383a42');
+    });
+
+    it('should return correct theme for various theme modes', () => {
+      const testCases: { theme: ThemeMode; expectedBg: string; expectedFg: string }[] = [
+        { theme: 'dark', expectedBg: '#000000', expectedFg: '#ffffff' },
+        { theme: 'light', expectedBg: '#ffffff', expectedFg: '#383a42' },
+        { theme: 'dracula', expectedBg: '#282a36', expectedFg: '#f8f8f2' },
+        { theme: 'nord', expectedBg: '#2e3440', expectedFg: '#d8dee9' },
+        { theme: 'tokyonight', expectedBg: '#1a1b26', expectedFg: '#a9b1d6' },
+        { theme: 'solarized', expectedBg: '#002b36', expectedFg: '#93a1a1' },
+        { theme: 'gruvbox', expectedBg: '#282828', expectedFg: '#ebdbb2' },
+        { theme: 'catppuccin', expectedBg: '#1e1e2e', expectedFg: '#cdd6f4' },
+        { theme: 'onedark', expectedBg: '#282c34', expectedFg: '#abb2bf' },
+        { theme: 'monokai', expectedBg: '#272822', expectedFg: '#f8f8f2' },
+        { theme: 'retro', expectedBg: '#000000', expectedFg: '#39ff14' },
+        { theme: 'synthwave', expectedBg: '#262335', expectedFg: '#ffffff' },
+        { theme: 'red', expectedBg: '#1a0a0a', expectedFg: '#c8b0b0' },
+        { theme: 'cream', expectedBg: '#f5f3ee', expectedFg: '#5a4a3a' },
+        { theme: 'sunset', expectedBg: '#1e1a24', expectedFg: '#f2e8dd' },
+        { theme: 'gray', expectedBg: '#2a2d32', expectedFg: '#d0d0d5' },
+      ];
+
+      for (const { theme, expectedBg, expectedFg } of testCases) {
+        const result = getTerminalThemeColors(theme);
+        expect(result.background, `Theme ${theme} background`).toBe(expectedBg);
+        expect(result.foreground, `Theme ${theme} foreground`).toBe(expectedFg);
+      }
+    });
+  });
+
+  describe('Custom color override scenario', () => {
+    it('should allow creating custom theme with background override', () => {
+      const baseTheme = getTerminalThemeColors('dark');
+      const customBgColor = '#1a1a2e';
+
+      // Simulate the override logic from terminal-panel.tsx
+      const customTheme = {
+        ...baseTheme,
+        background: customBgColor,
+      };
+
+      expect(customTheme.background).toBe('#1a1a2e');
+      expect(customTheme.foreground).toBe('#ffffff'); // Should keep original
+      expect(customTheme.cursor).toBe('#ffffff'); // Should preserve cursor
+    });
+
+    it('should allow creating custom theme with foreground override', () => {
+      const baseTheme = getTerminalThemeColors('dark');
+      const customFgColor = '#e0e0e0';
+
+      const customTheme = {
+        ...baseTheme,
+        foreground: customFgColor,
+      };
+
+      expect(customTheme.background).toBe('#000000'); // Should keep original
+      expect(customTheme.foreground).toBe('#e0e0e0');
+    });
+
+    it('should allow creating custom theme with both overrides', () => {
+      const baseTheme = getTerminalThemeColors('dark');
+      const customBgColor = '#1a1a2e';
+      const customFgColor = '#e0e0e0';
+
+      const customTheme = {
+        ...baseTheme,
+        background: customBgColor,
+        foreground: customFgColor,
+      };
+
+      expect(customTheme.background).toBe('#1a1a2e');
+      expect(customTheme.foreground).toBe('#e0e0e0');
+      expect(customTheme.cursor).toBe('#ffffff'); // Should preserve cursor
+      expect(customTheme.red).toBe('#f44747'); // Should preserve ANSI colors
+    });
+
+    it('should handle null custom colors (use base theme)', () => {
+      const baseTheme = getTerminalThemeColors('dark');
+      const customBgColor: string | null = null;
+      const customFgColor: string | null = null;
+
+      // Simulate the override logic from terminal-panel.tsx
+      const customTheme =
+        customBgColor || customFgColor
+          ? {
+              ...baseTheme,
+              ...(customBgColor && { background: customBgColor }),
+              ...(customFgColor && { foreground: customFgColor }),
+            }
+          : baseTheme;
+
+      expect(customTheme.background).toBe('#000000'); // Should use base
+      expect(customTheme.foreground).toBe('#ffffff'); // Should use base
+    });
+
+    it('should handle only background color set', () => {
+      const baseTheme = getTerminalThemeColors('dark');
+      const customBgColor = '#1a1a2e';
+      const customFgColor: string | null = null;
+
+      const customTheme =
+        customBgColor || customFgColor
+          ? {
+              ...baseTheme,
+              ...(customBgColor && { background: customBgColor }),
+              ...(customFgColor && { foreground: customFgColor }),
+            }
+          : baseTheme;
+
+      expect(customTheme.background).toBe('#1a1a2e');
+      expect(customTheme.foreground).toBe('#ffffff'); // Should keep base
+    });
+
+    it('should handle only foreground color set', () => {
+      const baseTheme = getTerminalThemeColors('dark');
+      const customBgColor: string | null = null;
+      const customFgColor = '#e0e0e0';
+
+      const customTheme =
+        customBgColor || customFgColor
+          ? {
+              ...baseTheme,
+              ...(customBgColor && { background: customBgColor }),
+              ...(customFgColor && { foreground: customFgColor }),
+            }
+          : baseTheme;
+
+      expect(customTheme.background).toBe('#000000'); // Should keep base
+      expect(customTheme.foreground).toBe('#e0e0e0');
+    });
+
+    it('should work with light theme as base', () => {
+      const baseTheme = getTerminalThemeColors('light');
+      const customBgColor = '#f0f0f0';
+      const customFgColor = '#333333';
+
+      const customTheme = {
+        ...baseTheme,
+        background: customBgColor,
+        foreground: customFgColor,
+      };
+
+      expect(customTheme.background).toBe('#f0f0f0');
+      expect(customTheme.foreground).toBe('#333333');
+      expect(customTheme.cursor).toBe('#383a42'); // Should preserve light theme cursor
+    });
+
+    it('should preserve all theme properties when overriding', () => {
+      const baseTheme = getTerminalThemeColors('dracula');
+      const customBgColor = '#1a1a2e';
+      const customFgColor = '#e0e0e0';
+
+      const customTheme = {
+        ...baseTheme,
+        background: customBgColor,
+        foreground: customFgColor,
+      };
+
+      // Verify all other properties are preserved
+      expect(customTheme.cursor).toBe('#f8f8f2'); // Dracula cursor
+      expect(customTheme.cursorAccent).toBe('#282a36');
+      expect(customTheme.selectionBackground).toBe('#44475a');
+      expect(customTheme.red).toBe('#ff5555');
+      expect(customTheme.green).toBe('#50fa7b');
+      expect(customTheme.blue).toBe('#bd93f9');
+    });
+
+    it('should handle race condition scenario: read from store takes priority', () => {
+      // This test documents the fix for the race condition where:
+      // 1. Terminal component mounts
+      // 2. useShallow subscription might have stale values (null)
+      // 3. Store is hydrated with actual values from server
+      // 4. Reading from getState() gives us the latest values
+
+      const baseTheme = getTerminalThemeColors('dark');
+
+      // Simulate stale subscription values (null)
+      const staleSubscriptionBg: string | null = null;
+      const staleSubscriptionFg: string | null = null;
+
+      // Simulate fresh store values (actual colors)
+      const freshStoreBg = '#1a1a2e';
+      const freshStoreFg = '#e0e0e0';
+
+      // The fix: prioritize store values over subscription values
+      const actualBg = freshStoreBg; // Use store value, not subscription
+      const actualFg = freshStoreFg; // Use store value, not subscription
+
+      const customTheme =
+        actualBg || actualFg
+          ? {
+              ...baseTheme,
+              ...(actualBg && { background: actualBg }),
+              ...(actualFg && { foreground: actualFg }),
+            }
+          : baseTheme;
+
+      // Verify we get the fresh store values, not the stale subscription values
+      expect(customTheme.background).toBe('#1a1a2e');
+      expect(customTheme.foreground).toBe('#e0e0e0');
+    });
+  });
+});
diff --git a/temp_repo/libs/platform/tsconfig.json b/temp_repo/libs/platform/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..f677f8d5ebc071b18ab8302e1ef128243ebc2b3c
--- /dev/null
+++ b/temp_repo/libs/platform/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/temp_repo/libs/platform/vitest.config.ts b/temp_repo/libs/platform/vitest.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c0e0b91fb134b1a081c9077fe0765c488087e4e2
--- /dev/null
+++ b/temp_repo/libs/platform/vitest.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    name: 'platform',
+    globals: true,
+    environment: 'node',
+    include: ['tests/**/*.test.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      include: ['src/**/*.ts'],
+      exclude: ['src/**/*.d.ts', 'src/index.ts'],
+      thresholds: {
+        // Excellent coverage: 94.69% stmts, 80.48% branches, 97.14% funcs, 94.64% lines
+        // All files now have comprehensive tests
+        lines: 90,
+        functions: 95,
+        branches: 75,
+        statements: 90,
+      },
+    },
+  },
+});
diff --git a/temp_repo/libs/prompts/README.md b/temp_repo/libs/prompts/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..ac69cc1cbb6f763081a0d2b4de5cecd23740a0c4
--- /dev/null
+++ b/temp_repo/libs/prompts/README.md
@@ -0,0 +1,257 @@
+# @automaker/prompts
+
+AI prompt templates for text enhancement and other AI-powered features in AutoMaker.
+
+## Overview
+
+This package provides professionally-crafted prompt templates for enhancing user-written task descriptions using Claude. It includes system prompts, few-shot examples, and utility functions for different enhancement modes: improve, technical, simplify, and acceptance.
+
+## Installation
+
+```bash
+npm install @automaker/prompts
+```
+
+## Exports
+
+### Enhancement Modes
+
+Four modes are available, each optimized for a specific enhancement task:
+
+- **improve** - Transform vague requests into clear, actionable tasks
+- **technical** - Add implementation details and technical specifications
+- **simplify** - Make verbose descriptions concise and focused
+- **acceptance** - Add testable acceptance criteria
+
+### System Prompts
+
+Direct access to system prompts for each mode:
+
+```typescript
+import {
+  IMPROVE_SYSTEM_PROMPT,
+  TECHNICAL_SYSTEM_PROMPT,
+  SIMPLIFY_SYSTEM_PROMPT,
+  ACCEPTANCE_SYSTEM_PROMPT,
+} from '@automaker/prompts';
+
+console.log(IMPROVE_SYSTEM_PROMPT); // Full system prompt for improve mode
+```
+
+### Helper Functions
+
+#### `getEnhancementPrompt(mode, description)`
+
+Get complete prompt (system + user) for an enhancement mode:
+
+```typescript
+import { getEnhancementPrompt } from '@automaker/prompts';
+
+const result = getEnhancementPrompt('improve', 'make app faster');
+
+console.log(result.systemPrompt); // System instructions for improve mode
+console.log(result.userPrompt); // User prompt with examples and input
+```
+
+#### `getSystemPrompt(mode)`
+
+Get only the system prompt for a mode:
+
+```typescript
+import { getSystemPrompt } from '@automaker/prompts';
+
+const systemPrompt = getSystemPrompt('technical');
+```
+
+#### `getExamples(mode)`
+
+Get few-shot examples for a mode:
+
+```typescript
+import { getExamples } from '@automaker/prompts';
+
+const examples = getExamples('simplify');
+// Returns array of { input, output } pairs
+```
+
+#### `buildUserPrompt(description, mode)`
+
+Build user prompt with examples:
+
+```typescript
+import { buildUserPrompt } from '@automaker/prompts';
+
+const userPrompt = buildUserPrompt('add login page', 'improve');
+// Includes examples + user's description
+```
+
+#### `isValidEnhancementMode(mode)`
+
+Check if a mode is valid:
+
+```typescript
+import { isValidEnhancementMode } from '@automaker/prompts';
+
+if (isValidEnhancementMode('improve')) {
+  // Mode is valid
+}
+```
+
+#### `getAvailableEnhancementModes()`
+
+Get list of all available modes:
+
+```typescript
+import { getAvailableEnhancementModes } from '@automaker/prompts';
+
+const modes = getAvailableEnhancementModes();
+// Returns: ['improve', 'technical', 'simplify', 'acceptance']
+```
+
+## Usage Examples
+
+### Basic Enhancement
+
+```typescript
+import { getEnhancementPrompt } from '@automaker/prompts';
+
+async function enhanceDescription(description: string, mode: string) {
+  const { systemPrompt, userPrompt } = getEnhancementPrompt(mode, description);
+
+  const response = await claude.messages.create({
+    model: 'claude-sonnet-4-20250514',
+    max_tokens: 1024,
+    system: systemPrompt,
+    messages: [{ role: 'user', content: userPrompt }],
+  });
+
+  return response.content[0].text;
+}
+
+// Example usage
+const improved = await enhanceDescription('make app faster', 'improve');
+// → "Optimize application performance by profiling bottlenecks..."
+
+const technical = await enhanceDescription('add search', 'technical');
+// → "Implement full-text search with the following components:..."
+```
+
+### Mode Validation
+
+```typescript
+import { isValidEnhancementMode, getAvailableEnhancementModes } from '@automaker/prompts';
+
+function validateAndEnhance(mode: string, description: string) {
+  if (!isValidEnhancementMode(mode)) {
+    const available = getAvailableEnhancementModes().join(', ');
+    throw new Error(`Invalid mode "${mode}". Available: ${available}`);
+  }
+
+  return enhanceDescription(description, mode);
+}
+```
+
+### Custom Prompt Building
+
+```typescript
+import { getSystemPrompt, buildUserPrompt, getExamples } from '@automaker/prompts';
+
+// Get components separately for custom workflows
+const systemPrompt = getSystemPrompt('simplify');
+const examples = getExamples('simplify');
+const userPrompt = buildUserPrompt(userInput, 'simplify');
+
+// Use with custom processing
+const response = await processWithClaude(systemPrompt, userPrompt);
+```
+
+### Server Route Example
+
+```typescript
+import { getEnhancementPrompt, isValidEnhancementMode } from '@automaker/prompts';
+import { createLogger } from '@automaker/utils';
+
+const logger = createLogger('EnhancementRoute');
+
+app.post('/api/enhance', async (req, res) => {
+  const { description, mode } = req.body;
+
+  if (!isValidEnhancementMode(mode)) {
+    return res.status(400).json({ error: 'Invalid enhancement mode' });
+  }
+
+  try {
+    const { systemPrompt, userPrompt } = getEnhancementPrompt(mode, description);
+
+    const result = await claude.messages.create({
+      model: 'claude-sonnet-4-20250514',
+      max_tokens: 1024,
+      system: systemPrompt,
+      messages: [{ role: 'user', content: userPrompt }],
+    });
+
+    logger.info(`Enhanced with mode: ${mode}`);
+    res.json({ enhanced: result.content[0].text });
+  } catch (error) {
+    logger.error('Enhancement failed:', error);
+    res.status(500).json({ error: 'Enhancement failed' });
+  }
+});
+```
+
+## Enhancement Mode Details
+
+### Improve Mode
+
+Transforms vague or unclear requests into clear, actionable specifications.
+
+**Before:** "make app faster"
+**After:** "Optimize application performance by:
+
+1. Profiling code to identify bottlenecks
+2. Implementing caching for frequently accessed data
+3. Optimizing database queries..."
+
+### Technical Mode
+
+Adds implementation details and technical specifications.
+
+**Before:** "add search"
+**After:** "Implement full-text search using:
+
+- Backend: Elasticsearch or PostgreSQL full-text search
+- Frontend: Debounced search input with loading states
+- API: GET /api/search endpoint with pagination..."
+
+### Simplify Mode
+
+Makes verbose descriptions concise while preserving essential information.
+
+**Before:** "We really need to make sure that the application has the capability to allow users to be able to search for various items..."
+**After:** "Add search functionality for items with filters and results display."
+
+### Acceptance Mode
+
+Adds testable acceptance criteria to feature descriptions.
+
+**Before:** "user login"
+**After:** "User login feature
+
+- User can enter email and password
+- System validates credentials
+- On success: redirect to dashboard
+- On failure: show error message
+- Remember me option persists login..."
+
+## Dependencies
+
+- `@automaker/types` - Type definitions for EnhancementMode and EnhancementExample
+
+## Used By
+
+- `@automaker/server` - Enhancement API routes
+- Future packages requiring AI-powered text enhancement
+
+## License
+
+SEE LICENSE IN LICENSE
diff --git a/temp_repo/libs/prompts/package.json b/temp_repo/libs/prompts/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..0012859f9dfca5c95ff8d144c38017aa3f7aa6ce
--- /dev/null
+++ b/temp_repo/libs/prompts/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@automaker/prompts",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "AI prompt templates for AutoMaker",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "keywords": [
+    "automaker",
+    "prompts",
+    "ai"
+  ],
+  "author": "AutoMaker Team",
+  "license": "SEE LICENSE IN LICENSE",
+  "engines": {
+    "node": ">=22.0.0 <23.0.0"
+  },
+  "dependencies": {
+    "@automaker/types": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.19.3",
+    "typescript": "5.9.3",
+    "vitest": "4.0.16"
+  }
+}
diff --git a/temp_repo/libs/prompts/src/defaults.ts b/temp_repo/libs/prompts/src/defaults.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8b328adfab1e931e761dc8b5da891f6757713bfc
--- /dev/null
+++ b/temp_repo/libs/prompts/src/defaults.ts
@@ -0,0 +1,1115 @@
+/**
+ * Default Prompts Library
+ *
+ * Central repository for all default AI prompts used throughout the application.
+ * These prompts can be overridden by user customization in settings.
+ *
+ * Extracted from:
+ * - apps/server/src/services/auto-mode-service.ts (Auto Mode planning prompts)
+ * - apps/server/src/services/agent-service.ts (Agent Runner system prompt)
+ * - apps/server/src/routes/backlog-plan/generate-plan.ts (Backlog planning prompts)
+ */
+
+import type {
+  ResolvedAutoModePrompts,
+  ResolvedAgentPrompts,
+  ResolvedBacklogPlanPrompts,
+  ResolvedEnhancementPrompts,
+  ResolvedCommitMessagePrompts,
+  ResolvedTitleGenerationPrompts,
+  ResolvedIssueValidationPrompts,
+  ResolvedIdeationPrompts,
+  ResolvedAppSpecPrompts,
+  ResolvedContextDescriptionPrompts,
+  ResolvedSuggestionsPrompts,
+  ResolvedTaskExecutionPrompts,
+} from '@automaker/types';
+import { STATIC_PORT, SERVER_PORT } from '@automaker/types';
+
+/**
+ * ========================================================================
+ * AUTO MODE PROMPTS
+ * ========================================================================
+ */
+
+export const DEFAULT_AUTO_MODE_PLANNING_LITE = `## Planning Phase (Lite Mode)
+
+IMPORTANT: Do NOT output exploration text, tool usage, or thinking before the plan. Start DIRECTLY with the planning outline format below. Silently analyze the codebase first, then output ONLY the structured plan.
+
+Create a brief planning outline:
+
+1. **Goal**: What are we accomplishing? (1 sentence)
+2. **Approach**: How will we do it? (2-3 sentences)
+3. **Files to Touch**: List files and what changes
+4. **Tasks**: Numbered task list (3-7 items)
+5. **Risks**: Any gotchas to watch for
+
+After generating the outline, output:
+"[PLAN_GENERATED] Planning outline complete."
+
+Then proceed with implementation.
+`;
+
+export const DEFAULT_AUTO_MODE_PLANNING_LITE_WITH_APPROVAL = `## Planning Phase (Lite Mode)
+
+IMPORTANT: Do NOT output exploration text, tool usage, or thinking before the plan. Start DIRECTLY with the planning outline format below. Silently analyze the codebase first, then output ONLY the structured plan.
+
+Create a brief planning outline:
+
+1. **Goal**: What are we accomplishing? (1 sentence)
+2. **Approach**: How will we do it? (2-3 sentences)
+3. **Files to Touch**: List files and what changes
+4. **Tasks**: Numbered task list (3-7 items)
+5. **Risks**: Any gotchas to watch for
+
+After generating the outline, output:
+"[SPEC_GENERATED] Please review the planning outline above. Reply with 'approved' to proceed or provide feedback for revisions."
+
+DO NOT proceed with implementation until you receive explicit approval.
+`;
+
+export const DEFAULT_AUTO_MODE_PLANNING_SPEC = `## Specification Phase (Spec Mode)
+
+IMPORTANT: Do NOT output exploration text, tool usage, or thinking before the spec. Start DIRECTLY with the specification format below. Silently analyze the codebase first, then output ONLY the structured specification.
+
+Generate a specification with an actionable task breakdown. WAIT for approval before implementing.
+
+### Specification Format
+
+1. **Problem**: What problem are we solving? (user perspective)
+
+2. **Solution**: Brief approach (1-2 sentences)
+
+3. **Acceptance Criteria**: 3-5 items in GIVEN-WHEN-THEN format
+   - GIVEN [context], WHEN [action], THEN [outcome]
+
+4. **Files to Modify**:
+   | File | Purpose | Action |
+   |------|---------|--------|
+   | path/to/file | description | create/modify/delete |
+
+5. **Implementation Tasks**:
+   Use this EXACT format for each task (the system will parse these):
+   \`\`\`tasks
+   - [ ] T001: [Description] | File: [path/to/file]
+   - [ ] T002: [Description] | File: [path/to/file]
+   - [ ] T003: [Description] | File: [path/to/file]
+   \`\`\`
+
+   Task ID rules:
+   - Sequential: T001, T002, T003, etc.
+   - Description: Clear action (e.g., "Create user model", "Add API endpoint")
+   - File: Primary file affected (helps with context)
+   - Order by dependencies (foundational tasks first)
+
+6. **Verification**: How to confirm feature works
+
+After generating the spec, output on its own line:
+"[SPEC_GENERATED] Please review the specification above. Reply with 'approved' to proceed or provide feedback for revisions."
+
+DO NOT proceed with implementation until you receive explicit approval.
+
+When approved, execute tasks SEQUENTIALLY in order. For each task:
+1. BEFORE starting, output: "[TASK_START] T###: Description"
+2. Implement the task
+3. AFTER completing, output: "[TASK_COMPLETE] T###: Brief summary"
+
+This allows real-time progress tracking during implementation.
+
+**CRITICAL: After completing ALL tasks, you MUST output a final summary using this EXACT format:**
+
+<summary>
+## Summary: [Feature Title]
+
+### Changes Implemented
+- [List all changes made across all tasks]
+
+### Files Modified
+- [List all files that were created or modified]
+
+### Notes for Developer
+- [Any important notes or considerations]
+</summary>
+
+The <summary> and </summary> tags MUST be on their own lines. This summary is REQUIRED for the system to properly track completion.
+`;
+
+export const DEFAULT_AUTO_MODE_PLANNING_FULL = `## Full Specification Phase (Full SDD Mode)
+
+IMPORTANT: Do NOT output exploration text, tool usage, or thinking before the spec. Start DIRECTLY with the specification format below. Silently analyze the codebase first, then output ONLY the structured specification.
+
+Generate a comprehensive specification with phased task breakdown. WAIT for approval before implementing.
+
+### Specification Format
+
+1. **Problem Statement**: 2-3 sentences from user perspective
+
+2. **User Story**: As a [user], I want [goal], so that [benefit]
+
+3. **Acceptance Criteria**: Multiple scenarios with GIVEN-WHEN-THEN
+   - **Happy Path**: GIVEN [context], WHEN [action], THEN [expected outcome]
+   - **Edge Cases**: GIVEN [edge condition], WHEN [action], THEN [handling]
+   - **Error Handling**: GIVEN [error condition], WHEN [action], THEN [error response]
+
+4. **Technical Context**:
+   | Aspect | Value |
+   |--------|-------|
+   | Affected Files | list of files |
+   | Dependencies | external libs if any |
+   | Constraints | technical limitations |
+   | Patterns to Follow | existing patterns in codebase |
+
+5. **Non-Goals**: What this feature explicitly does NOT include
+
+6. **Implementation Tasks**:
+   Use this EXACT format for each task (the system will parse these):
+   \`\`\`tasks
+   ## Phase 1: Foundation
+   - [ ] T001: [Description] | File: [path/to/file]
+   - [ ] T002: [Description] | File: [path/to/file]
+
+   ## Phase 2: Core Implementation
+   - [ ] T003: [Description] | File: [path/to/file]
+   - [ ] T004: [Description] | File: [path/to/file]
+
+   ## Phase 3: Integration & Testing
+   - [ ] T005: [Description] | File: [path/to/file]
+   - [ ] T006: [Description] | File: [path/to/file]
+   \`\`\`
+
+   Task ID rules:
+   - Sequential across all phases: T001, T002, T003, etc.
+   - Description: Clear action verb + target
+   - File: Primary file affected
+   - Order by dependencies within each phase
+   - Phase structure helps organize complex work
+
+7. **Success Metrics**: How we know it's done (measurable criteria)
+
+8. **Risks & Mitigations**:
+   | Risk | Mitigation |
+   |------|------------|
+   | description | approach |
+
+After generating the spec, output on its own line:
+"[SPEC_GENERATED] Please review the comprehensive specification above. Reply with 'approved' to proceed or provide feedback for revisions."
+
+DO NOT proceed with implementation until you receive explicit approval.
+
+When approved, execute tasks SEQUENTIALLY by phase. For each task:
+1. BEFORE starting, output: "[TASK_START] T###: Description"
+2. Implement the task
+3. AFTER completing, output: "[TASK_COMPLETE] T###: Brief summary"
+
+After completing all tasks in a phase, output:
+"[PHASE_COMPLETE] Phase N complete"
+
+This allows real-time progress tracking during implementation.
+
+**CRITICAL: After completing ALL phases and ALL tasks, you MUST output a final summary using this EXACT format:**
+
+<summary>
+## Summary: [Feature Title]
+
+### Changes Implemented
+- [List all changes made across all phases and tasks]
+
+### Files Modified
+- [List all files that were created or modified]
+
+### Notes for Developer
+- [Any important notes or considerations]
+</summary>
+
+The <summary> and </summary> tags MUST be on their own lines. This summary is REQUIRED for the system to properly track completion.
+`;
+
+export const DEFAULT_AUTO_MODE_FEATURE_PROMPT_TEMPLATE = `## Feature Implementation Task
+
+**Feature ID:** {{featureId}}
+**Title:** {{title}}
+**Description:** {{description}}
+
+{{#if spec}}
+**Specification:**
+{{spec}}
+{{/if}}
+
+{{#if imagePaths}}
+**Context Images:**
+{{#each imagePaths}}
+- {{this}}
+{{/each}}
+{{/if}}
+
+{{#if dependencies}}
+**Dependencies:**
+This feature depends on: {{dependencies}}
+{{/if}}
+
+{{#if verificationInstructions}}
+**Verification:**
+{{verificationInstructions}}
+{{/if}}
+
+**CRITICAL - Port Protection:**
+NEVER kill or terminate processes running on ports ${STATIC_PORT} or ${SERVER_PORT}. These are reserved for the Automaker application. Killing these ports will crash Automaker and terminate this session.
+
+**CRITICAL - Process Protection:**
+NEVER run \`pkill -f "vite"\` or \`pkill -f "tsx"\` or any broad process-killing commands targeting development server processes. These commands will kill the Automaker application itself and terminate your session. If you need to debug tests, use targeted approaches such as running specific test files, using test runner flags, or restarting individual processes through proper channels.
+`;
+
+export const DEFAULT_AUTO_MODE_FOLLOW_UP_PROMPT_TEMPLATE = `## Follow-up on Feature Implementation
+
+{{featurePrompt}}
+
+## Previous Agent Work
+{{previousContext}}
+
+## Follow-up Instructions
+{{followUpInstructions}}
+
+## Task
+Address the follow-up instructions above.
+`;
+
+export const DEFAULT_AUTO_MODE_CONTINUATION_PROMPT_TEMPLATE = `## Continuing Feature Implementation
+
+{{featurePrompt}}
+
+## Previous Context
+{{previousContext}}
+
+## Instructions
+Review the previous work and continue the implementation.
+`;
+
+export const DEFAULT_AUTO_MODE_PIPELINE_STEP_PROMPT_TEMPLATE = `## Pipeline Step: {{stepName}}
+
+### Feature Context
+{{featurePrompt}}
+
+### Previous Work
+{{previousContext}}
+
+### Pipeline Step Instructions
+{{stepInstructions}}
+
+**CRITICAL: After completing the instructions, you MUST output a summary using this EXACT format:**
+
+<summary>
+## Summary: {{stepName}}
+
+### Changes Implemented
+- [List all changes made in this step]
+
+### Files Modified
+- [List all files modified in this step]
+
+### Outcome
+- [Describe the result of this step]
+</summary>
+
+The <summary> and </summary> tags MUST be on their own lines. This is REQUIRED.
+`;
+
+/**
+ * Default Auto Mode prompts (from auto-mode-service.ts)
+ */
+export const DEFAULT_AUTO_MODE_PROMPTS: ResolvedAutoModePrompts = {
+  planningLite: DEFAULT_AUTO_MODE_PLANNING_LITE,
+  planningLiteWithApproval: DEFAULT_AUTO_MODE_PLANNING_LITE_WITH_APPROVAL,
+  planningSpec: DEFAULT_AUTO_MODE_PLANNING_SPEC,
+  planningFull: DEFAULT_AUTO_MODE_PLANNING_FULL,
+  featurePromptTemplate: DEFAULT_AUTO_MODE_FEATURE_PROMPT_TEMPLATE,
+  followUpPromptTemplate: DEFAULT_AUTO_MODE_FOLLOW_UP_PROMPT_TEMPLATE,
+  continuationPromptTemplate: DEFAULT_AUTO_MODE_CONTINUATION_PROMPT_TEMPLATE,
+  pipelineStepPromptTemplate: DEFAULT_AUTO_MODE_PIPELINE_STEP_PROMPT_TEMPLATE,
+};
+
+/**
+ * ========================================================================
+ * AGENT RUNNER PROMPTS
+ * ========================================================================
+ */
+
+export const DEFAULT_AGENT_SYSTEM_PROMPT = `You are an AI assistant helping users build software. You are part of the Automaker application,
+which is designed to help developers plan, design, and implement software projects autonomously.
+
+**Feature Storage:**
+Features are stored in .automaker/features/{id}/feature.json - each feature has its own folder.
+Use the UpdateFeatureStatus tool to manage features, not direct file edits.
+
+Your role is to:
+- Help users define their project requirements and specifications
+- Ask clarifying questions to better understand their needs
+- Suggest technical approaches and architectures
+- Guide them through the development process
+- Be conversational and helpful
+- Write, edit, and modify code files as requested
+- Execute commands and tests
+- Search and analyze the codebase
+
+**Tools Available:**
+You have access to several tools:
+- UpdateFeatureStatus: Update feature status (NOT file edits)
+- Read/Write/Edit: File operations
+- Bash: Execute commands
+- Glob/Grep: Search codebase
+- WebSearch/WebFetch: Research online
+
+**Important Guidelines:**
+1. When users want to add or modify features, help them create clear feature definitions
+2. Use UpdateFeatureStatus tool to manage features in the backlog
+3. Be proactive in suggesting improvements and best practices
+4. Ask questions when requirements are unclear
+5. Guide users toward good software design principles
+
+**CRITICAL - Port Protection:**
+NEVER kill or terminate processes running on ports ${STATIC_PORT} or ${SERVER_PORT}. These are reserved for the Automaker application itself. Killing these ports will crash Automaker and terminate your session.
+
+**CRITICAL - Process Protection:**
+NEVER run \`pkill -f "vite"\` or \`pkill -f "tsx"\` or any broad process-killing commands targeting development server processes. These commands will kill the Automaker application itself and terminate your session. If you need to debug tests, use targeted approaches such as running specific test files, using test runner flags, or restarting individual processes through proper channels.
+
+Remember: You're a collaborative partner in the development process. Be helpful, clear, and thorough.`;
+
+/**
+ * Default Agent Runner prompts (from agent-service.ts)
+ */
+export const DEFAULT_AGENT_PROMPTS: ResolvedAgentPrompts = {
+  systemPrompt: DEFAULT_AGENT_SYSTEM_PROMPT,
+};
+
+/**
+ * ========================================================================
+ * BACKLOG PLAN PROMPTS
+ * ========================================================================
+ */
+
+export const DEFAULT_BACKLOG_PLAN_SYSTEM_PROMPT = `You are an AI assistant helping to modify a software project's feature backlog.
+You will be given the current list of features and a user request to modify the backlog.
+
+IMPORTANT CONTEXT (automatically injected):
+- Remember to update the dependency graph if deleting existing features
+- Remember to define dependencies on new features hooked into relevant existing ones
+- Maintain dependency graph integrity (no orphaned dependencies)
+- When deleting a feature, identify which other features depend on it
+
+Your task is to analyze the request and produce a structured JSON plan with:
+1. Features to ADD (include id, title, description, category, and dependencies)
+2. Features to UPDATE (specify featureId and the updates)
+3. Features to DELETE (specify featureId)
+4. A summary of the changes
+5. Any dependency updates needed (removed dependencies due to deletions, new dependencies for new features)
+
+Respond with ONLY a JSON object in this exact format:
+\`\`\`json
+{
+  "changes": [
+    {
+      "type": "add",
+      "feature": {
+        "id": "descriptive-kebab-case-id",
+        "title": "Feature title",
+        "description": "Feature description",
+        "category": "feature" | "bug" | "enhancement" | "refactor",
+        "dependencies": ["existing-feature-id"],
+        "priority": 1
+      },
+      "reason": "Why this feature should be added"
+    },
+    {
+      "type": "update",
+      "featureId": "existing-feature-id",
+      "feature": {
+        "title": "Updated title"
+      },
+      "reason": "Why this feature should be updated"
+    },
+    {
+      "type": "delete",
+      "featureId": "feature-id-to-delete",
+      "reason": "Why this feature should be deleted"
+    }
+  ],
+  "summary": "Brief overview of all proposed changes",
+  "dependencyUpdates": [
+    {
+      "featureId": "feature-that-depended-on-deleted",
+      "removedDependencies": ["deleted-feature-id"],
+      "addedDependencies": []
+    }
+  ]
+}
+\`\`\`
+
+Important rules:
+- CRITICAL: For new features, always include a descriptive "id" in kebab-case (e.g., "user-authentication", "design-system-foundation")
+- Dependencies must reference these exact IDs - both for existing features and new features being added in the same plan
+- Only include fields that need to change in updates
+- Ensure dependency references are valid (don't reference deleted features)
+- Provide clear, actionable descriptions
+- Maintain category consistency (feature, bug, enhancement, refactor)
+- When adding dependencies, ensure the referenced features exist or are being added in the same plan
+`;
+
+export const DEFAULT_BACKLOG_PLAN_USER_PROMPT_TEMPLATE = `Current Features in Backlog:
+{{currentFeatures}}
+
+---
+
+User Request: {{userRequest}}
+
+Please analyze the current backlog and the user's request, then provide a JSON plan for the modifications.`;
+
+/**
+ * Default Backlog Plan prompts (from backlog-plan/generate-plan.ts)
+ */
+export const DEFAULT_BACKLOG_PLAN_PROMPTS: ResolvedBacklogPlanPrompts = {
+  systemPrompt: DEFAULT_BACKLOG_PLAN_SYSTEM_PROMPT,
+  userPromptTemplate: DEFAULT_BACKLOG_PLAN_USER_PROMPT_TEMPLATE,
+};
+
+/**
+ * ========================================================================
+ * ENHANCEMENT PROMPTS
+ * ========================================================================
+ * Note: Enhancement prompts are already defined in enhancement.ts
+ * We import and re-export them here for consistency
+ */
+
+import {
+  IMPROVE_SYSTEM_PROMPT,
+  TECHNICAL_SYSTEM_PROMPT,
+  SIMPLIFY_SYSTEM_PROMPT,
+  ACCEPTANCE_SYSTEM_PROMPT,
+  UX_REVIEWER_SYSTEM_PROMPT,
+} from './enhancement.js';
+
+/**
+ * Default Enhancement prompts (from libs/prompts/src/enhancement.ts)
+ */
+export const DEFAULT_ENHANCEMENT_PROMPTS: ResolvedEnhancementPrompts = {
+  improveSystemPrompt: IMPROVE_SYSTEM_PROMPT,
+  technicalSystemPrompt: TECHNICAL_SYSTEM_PROMPT,
+  simplifySystemPrompt: SIMPLIFY_SYSTEM_PROMPT,
+  acceptanceSystemPrompt: ACCEPTANCE_SYSTEM_PROMPT,
+  uxReviewerSystemPrompt: UX_REVIEWER_SYSTEM_PROMPT,
+};
+
+/**
+ * ========================================================================
+ * COMMIT MESSAGE PROMPTS
+ * ========================================================================
+ */
+
+export const DEFAULT_COMMIT_MESSAGE_SYSTEM_PROMPT = `You are a git commit message generator. Your task is to create a clear, concise commit message based on the git diff provided.
+
+Rules:
+- Output ONLY the commit message, nothing else
+- First line should be a short summary (50 chars or less) in imperative mood
+- Start with a conventional commit type if appropriate (feat:, fix:, refactor:, docs:, chore:, style:, test:, perf:, ci:, build:)
+- Keep it concise and descriptive
+- Focus on WHAT changed and WHY (if clear from the diff), not HOW
+- No quotes, backticks, or extra formatting
+- If there are multiple changes, provide a brief summary on the first line
+- Ignore changes to gitignored files (e.g., node_modules, dist, build, .env files, lock files, generated files, binary artifacts, coverage reports, cache directories). Focus only on meaningful source code changes that are tracked by git
+
+Examples:
+- feat: Add dark mode toggle to settings
+- fix: Resolve login validation edge case
+- refactor: Extract user authentication logic
+- docs: Update installation instructions
+- chore: Update dependencies to latest versions
+- style: Fix inconsistent indentation in components
+- test: Add unit tests for user service
+- perf: Optimize database query for user lookup`;
+
+/**
+ * Default Commit Message prompts (for AI commit message generation)
+ */
+export const DEFAULT_COMMIT_MESSAGE_PROMPTS: ResolvedCommitMessagePrompts = {
+  systemPrompt: DEFAULT_COMMIT_MESSAGE_SYSTEM_PROMPT,
+};
+
+/**
+ * ========================================================================
+ * TITLE GENERATION PROMPTS
+ * ========================================================================
+ */
+
+export const DEFAULT_TITLE_GENERATION_SYSTEM_PROMPT = `You are a title generator. Your task is to create a concise, descriptive title (5-10 words max) for a software feature based on its description.
+
+Rules:
+- Output ONLY the title, nothing else
+- Keep it short and action-oriented (e.g., "Add dark mode toggle", "Fix login validation")
+- Start with a verb when possible (Add, Fix, Update, Implement, Create, etc.)
+- No quotes, periods, or extra formatting
+- Capture the essence of the feature in a scannable way`;
+
+/**
+ * Default Title Generation prompts (for AI feature title generation)
+ */
+export const DEFAULT_TITLE_GENERATION_PROMPTS: ResolvedTitleGenerationPrompts = {
+  systemPrompt: DEFAULT_TITLE_GENERATION_SYSTEM_PROMPT,
+};
+
+/**
+ * ========================================================================
+ * ISSUE VALIDATION PROMPTS
+ * ========================================================================
+ */
+
+export const DEFAULT_ISSUE_VALIDATION_SYSTEM_PROMPT = `You are an expert code analyst validating GitHub issues against a codebase.
+
+Your task is to analyze a GitHub issue and determine if it's valid by scanning the codebase.
+
+## Validation Process
+
+1. **Read the issue carefully** - Understand what is being reported or requested
+2. **Search the codebase** - Use Glob to find relevant files by pattern, Grep to search for keywords
+3. **Examine the code** - Use Read to look at the actual implementation in relevant files
+4. **Check linked PRs** - If there are linked pull requests, use \`gh pr diff <PR_NUMBER>\` to review the changes
+5. **Form your verdict** - Based on your analysis, determine if the issue is valid
+
+## Verdicts
+
+- **valid**: The issue describes a real problem that exists in the codebase, or a clear feature request that can be implemented. The referenced files/components exist and the issue is actionable.
+
+- **invalid**: The issue describes behavior that doesn't exist, references non-existent files or components, is based on a misunderstanding of the code, or the described "bug" is actually expected behavior.
+
+- **needs_clarification**: The issue lacks sufficient detail to verify. Specify what additional information is needed in the missingInfo field.
+
+## For Bug Reports, Check:
+- Do the referenced files/components exist?
+- Does the code match what the issue describes?
+- Is the described behavior actually a bug or expected?
+- Can you locate the code that would cause the reported issue?
+
+## For Feature Requests, Check:
+- Does the feature already exist?
+- Is the implementation location clear?
+- Is the request technically feasible given the codebase structure?
+
+## Analyzing Linked Pull Requests
+
+When an issue has linked PRs (especially open ones), you MUST analyze them:
+
+1. **Run \`gh pr diff <PR_NUMBER>\`** to see what changes the PR makes
+2. **Run \`gh pr view <PR_NUMBER>\`** to see PR description and status
+3. **Evaluate if the PR fixes the issue** - Does the diff address the reported problem?
+4. **Provide a recommendation**:
+   - \`wait_for_merge\`: The PR appears to fix the issue correctly. No additional work needed - just wait for it to be merged.
+   - \`pr_needs_work\`: The PR attempts to fix the issue but is incomplete or has problems.
+   - \`no_pr\`: No relevant PR exists for this issue.
+
+5. **Include prAnalysis in your response** with:
+   - hasOpenPR: true/false
+   - prFixesIssue: true/false (based on diff analysis)
+   - prNumber: the PR number you analyzed
+   - prSummary: brief description of what the PR changes
+   - recommendation: one of the above values
+
+## Response Guidelines
+
+- **Always include relatedFiles** when you find relevant code
+- **Set bugConfirmed to true** only if you can definitively confirm a bug exists in the code
+- **Provide a suggestedFix** when you have a clear idea of how to address the issue
+- **Use missingInfo** when the verdict is needs_clarification to list what's needed
+- **Include prAnalysis** when there are linked PRs - this is critical for avoiding duplicate work
+- **Set estimatedComplexity** to help prioritize:
+  - trivial: Simple text changes, one-line fixes
+  - simple: Small changes to one file
+  - moderate: Changes to multiple files or moderate logic changes
+  - complex: Significant refactoring or new feature implementation
+  - very_complex: Major architectural changes or cross-cutting concerns
+
+Be thorough in your analysis but focus on files that are directly relevant to the issue.`;
+
+/**
+ * Default Issue Validation prompts (for GitHub issue validation)
+ */
+export const DEFAULT_ISSUE_VALIDATION_PROMPTS: ResolvedIssueValidationPrompts = {
+  systemPrompt: DEFAULT_ISSUE_VALIDATION_SYSTEM_PROMPT,
+};
+
+/**
+ * ========================================================================
+ * IDEATION PROMPTS
+ * ========================================================================
+ */
+
+export const DEFAULT_IDEATION_SYSTEM_PROMPT = `You are an AI product strategist and UX expert helping brainstorm ideas for improving a software project.
+
+Your role is to:
+- Analyze the codebase structure and patterns
+- Identify opportunities for improvement
+- Suggest actionable ideas with clear rationale
+- Consider user experience, technical feasibility, and business value
+- Be specific and reference actual files/components when possible
+
+When suggesting ideas:
+1. Provide a clear, concise title
+2. Explain the problem or opportunity
+3. Describe the proposed solution
+4. Highlight the expected benefit
+5. Note any dependencies or considerations
+
+IMPORTANT: Do NOT suggest features or ideas that already exist in the project. Check the "Existing Features" and "Existing Ideas" sections below to avoid duplicates.
+
+Focus on practical, implementable suggestions that would genuinely improve the product.`;
+
+export const DEFAULT_SUGGESTIONS_SYSTEM_PROMPT = `You are an AI product strategist helping brainstorm feature ideas for a software project.
+
+CRITICAL INSTRUCTIONS:
+1. You do NOT have access to any tools. You CANNOT read files, search code, or run commands.
+2. You must NEVER write, create, or edit any files. DO NOT use Write, Edit, or any file modification tools.
+3. You must generate suggestions based ONLY on the project context provided below.
+4. Do NOT say "I'll analyze" or "Let me explore" - you cannot do those things.
+
+Based on the project context and the user's prompt, generate exactly {{count}} creative and actionable feature suggestions.
+
+YOUR RESPONSE MUST BE ONLY A JSON ARRAY - nothing else. No explanation, no preamble, no markdown code fences. Do not create any files.
+
+Each suggestion must have this structure:
+{
+  "title": "Short, actionable title (max 60 chars)",
+  "description": "Clear description of what to build or improve (2-3 sentences)",
+  "rationale": "Why this is valuable - the problem it solves or opportunity it creates",
+  "priority": "high" | "medium" | "low"
+}
+
+Guidelines:
+- Be specific and actionable - avoid vague ideas
+- Mix different priority levels (some high, some medium, some low)
+- Each suggestion should be independently implementable
+- Think creatively - include both obvious improvements and innovative ideas
+- Consider the project's domain and target users
+- IMPORTANT: Do NOT suggest features or ideas that already exist in the "Existing Features" or "Existing Ideas" sections below`;
+
+/**
+ * Default Ideation prompts (for AI-powered brainstorming and suggestions)
+ */
+export const DEFAULT_IDEATION_PROMPTS: ResolvedIdeationPrompts = {
+  ideationSystemPrompt: DEFAULT_IDEATION_SYSTEM_PROMPT,
+  suggestionsSystemPrompt: DEFAULT_SUGGESTIONS_SYSTEM_PROMPT,
+};
+
+/**
+ * ========================================================================
+ * APP SPEC PROMPTS
+ * ========================================================================
+ */
+
+export const DEFAULT_APP_SPEC_GENERATE_SYSTEM_PROMPT = `You are helping to define a software project specification.
+
+IMPORTANT: Never ask for clarification or additional information. Use the information provided and make reasonable assumptions to create the best possible specification. If details are missing, infer them based on common patterns and best practices.`;
+
+export const DEFAULT_APP_SPEC_STRUCTURED_INSTRUCTIONS = `Analyze the project and provide a comprehensive specification with:
+
+1. **project_name**: The name of the project
+2. **overview**: A comprehensive description of what the project does, its purpose, and key goals
+3. **technology_stack**: List all technologies, frameworks, libraries, and tools used
+4. **core_capabilities**: List the main features and capabilities the project provides
+5. **implemented_features**: For each implemented feature, provide:
+   - name: Feature name
+   - description: What it does
+   - file_locations: Key files where it's implemented (optional)
+6. **additional_requirements**: Any system requirements, dependencies, or constraints (optional)
+7. **development_guidelines**: Development standards and best practices (optional)
+8. **implementation_roadmap**: Project phases with status (completed/in_progress/pending) (optional)
+
+Be thorough in your analysis. The output will be automatically formatted as structured JSON.`;
+
+export const DEFAULT_GENERATE_FEATURES_FROM_SPEC_PROMPT = `Generate a prioritized list of implementable features. For each feature provide:
+
+1. **id**: A unique lowercase-hyphenated identifier
+2. **category**: Functional category (e.g., "Core", "UI", "API", "Authentication", "Database")
+3. **title**: Short descriptive title
+4. **description**: What this feature does (2-3 sentences)
+5. **priority**: 1 (high), 2 (medium), or 3 (low)
+6. **complexity**: "simple", "moderate", or "complex"
+7. **dependencies**: Array of feature IDs this depends on (can be empty)
+
+Format as JSON:
+{
+  "features": [
+    {
+      "id": "feature-id",
+      "category": "Feature Category",
+      "title": "Feature Title",
+      "description": "What it does",
+      "priority": 1,
+      "complexity": "moderate",
+      "dependencies": []
+    }
+  ]
+}
+
+Generate features that build on each other logically.
+
+CRITICAL RULES:
+- If an "EXISTING FEATURES" section is provided above, you MUST NOT generate any features that duplicate or overlap with those existing features
+- Check each feature you generate against the existing features list - if it already exists, DO NOT include it
+- Only generate truly NEW features that add value beyond what already exists
+- Generate unique IDs that don't conflict with existing feature IDs
+
+IMPORTANT: Do not ask for clarification. The specification is provided above. Generate the JSON immediately.`;
+
+/**
+ * Default App Spec prompts (for project specification generation)
+ */
+export const DEFAULT_APP_SPEC_PROMPTS: ResolvedAppSpecPrompts = {
+  generateSpecSystemPrompt: DEFAULT_APP_SPEC_GENERATE_SYSTEM_PROMPT,
+  structuredSpecInstructions: DEFAULT_APP_SPEC_STRUCTURED_INSTRUCTIONS,
+  generateFeaturesFromSpecPrompt: DEFAULT_GENERATE_FEATURES_FROM_SPEC_PROMPT,
+};
+
+/**
+ * ========================================================================
+ * CONTEXT DESCRIPTION PROMPTS
+ * ========================================================================
+ */
+
+export const DEFAULT_DESCRIBE_FILE_PROMPT = `Analyze the following file and provide a 1-2 sentence description suitable for use as context in an AI coding assistant. Focus on what the file contains, its purpose, and why an AI agent might want to use this context in the future (e.g., "API documentation for the authentication endpoints", "Configuration file for database connections", "Coding style guidelines for the project").
+
+Respond with ONLY the description text, no additional formatting, preamble, or explanation.`;
+
+export const DEFAULT_DESCRIBE_IMAGE_PROMPT = `Describe this image in 1-2 sentences suitable for use as context in an AI coding assistant. Focus on what the image shows and its purpose (e.g., "UI mockup showing login form with email/password fields", "Architecture diagram of microservices", "Screenshot of error message in terminal").
+
+Respond with ONLY the description text, no additional formatting, preamble, or explanation.`;
+
+/**
+ * Default Context Description prompts (for file/image descriptions)
+ */
+export const DEFAULT_CONTEXT_DESCRIPTION_PROMPTS: ResolvedContextDescriptionPrompts = {
+  describeFilePrompt: DEFAULT_DESCRIBE_FILE_PROMPT,
+  describeImagePrompt: DEFAULT_DESCRIBE_IMAGE_PROMPT,
+};
+
+/**
+ * ========================================================================
+ * SUGGESTIONS PROMPTS
+ * ========================================================================
+ */
+
+export const DEFAULT_SUGGESTIONS_FEATURES_PROMPT =
+  'Analyze this project and suggest new features that would add value.';
+export const DEFAULT_SUGGESTIONS_REFACTORING_PROMPT =
+  'Analyze this project and identify refactoring opportunities.';
+export const DEFAULT_SUGGESTIONS_SECURITY_PROMPT =
+  'Analyze this project for security vulnerabilities and suggest fixes.';
+export const DEFAULT_SUGGESTIONS_PERFORMANCE_PROMPT =
+  'Analyze this project for performance issues and suggest optimizations.';
+
+export const DEFAULT_SUGGESTIONS_BASE_TEMPLATE = `Look at the codebase and provide 3-5 concrete suggestions.
+
+For each suggestion, provide:
+1. A category (e.g., "User Experience", "Security", "Performance")
+2. A clear description of what to implement
+3. Priority (1=high, 2=medium, 3=low)
+4. Brief reasoning for why this would help
+
+The response will be automatically formatted as structured JSON.`;
+
+/**
+ * Default Suggestions prompts (for features, refactoring, security, performance)
+ */
+export const DEFAULT_SUGGESTIONS_PROMPTS: ResolvedSuggestionsPrompts = {
+  featuresPrompt: DEFAULT_SUGGESTIONS_FEATURES_PROMPT,
+  refactoringPrompt: DEFAULT_SUGGESTIONS_REFACTORING_PROMPT,
+  securityPrompt: DEFAULT_SUGGESTIONS_SECURITY_PROMPT,
+  performancePrompt: DEFAULT_SUGGESTIONS_PERFORMANCE_PROMPT,
+  baseTemplate: DEFAULT_SUGGESTIONS_BASE_TEMPLATE,
+};
+
+/**
+ * ========================================================================
+ * TASK EXECUTION PROMPTS
+ * ========================================================================
+ */
+
+export const DEFAULT_TASK_PROMPT_TEMPLATE = `# Task Execution: {{taskId}}
+
+You are executing a specific task as part of a larger feature implementation.
+
+## Your Current Task
+
+**Task ID:** {{taskId}}
+**Description:** {{taskDescription}}
+{{#if filePath}}**Primary File:** {{filePath}}{{/if}}
+{{#if phase}}**Phase:** {{phase}}{{/if}}
+
+## Context
+
+{{#if completedTasks}}
+### Already Completed ({{completedTasksCount}} tasks)
+{{#each completedTasks}}
+- [x] {{id}}: {{description}}
+{{/each}}
+{{/if}}
+
+{{#if remainingTasks}}
+### Remaining Tasks ({{remainingTasksCount}} tasks)
+{{#each remainingTasks}}
+- [ ] {{id}}: {{description}}
+{{/each}}
+{{/if}}
+
+{{#if userFeedback}}
+## User Feedback
+{{userFeedback}}
+{{/if}}
+
+## Instructions
+
+1. Focus ONLY on completing task {{taskId}}: "{{taskDescription}}"
+2. Do not work on other tasks
+3. Use the existing codebase patterns
+4. When done, output "[TASK_COMPLETE] {{taskId}}: Brief summary of what you did"
+
+{{#unless remainingTasks}}
+**IMPORTANT - THIS IS THE FINAL TASK**: After completing this task, you MUST output a complete feature summary using this EXACT format:
+
+<summary>
+## Summary: [Feature Title]
+
+### Changes Implemented
+- [List ALL changes made across ALL tasks in this feature]
+
+### Files Modified
+- [List ALL files created or modified]
+
+### Notes for Developer
+- [Any important notes]
+</summary>
+
+The <summary> and </summary> tags MUST be on their own lines. This is REQUIRED.
+{{/unless}}
+
+Begin implementing task {{taskId}} now.`;
+
+export const DEFAULT_IMPLEMENTATION_INSTRUCTIONS = `## Instructions
+
+Implement this feature by:
+1. First, explore the codebase to understand the existing structure
+2. Plan your implementation approach
+3. Write the necessary code changes
+4. Ensure the code follows existing patterns and conventions
+
+## CRITICAL: Summary Output Requirement
+
+**IMPORTANT**: After completing ALL implementation work, you MUST output a final summary using the EXACT format below. This is REQUIRED for the system to track your work properly.
+
+**You MUST wrap your summary in <summary> tags like this:**
+
+<summary>
+## Summary: [Feature Title]
+
+### Changes Implemented
+- [List of changes made]
+
+### Files Modified
+- [List of files]
+
+### Notes for Developer
+- [Any important notes]
+</summary>
+
+**Rules for summary output:**
+- The <summary> opening tag MUST be on its own line
+- The </summary> closing tag MUST be on its own line
+- Include ALL changes you made during implementation
+- Output this summary as the FINAL thing before stopping
+- Do NOT skip the summary even if you think the feature is simple
+
+This is not optional - the system parses this to update the feature status.`;
+
+export const DEFAULT_PLAYWRIGHT_VERIFICATION_INSTRUCTIONS = `## Verification with Playwright (REQUIRED)
+
+After implementing the feature, you MUST verify it works correctly using Playwright:
+
+1. **Create a temporary Playwright test** to verify the feature works as expected
+2. **Run the test** to confirm the feature is working
+3. **Delete the test file** after verification - this is a temporary verification test, not a permanent test suite addition
+
+Example verification workflow:
+\`\`\`bash
+# Create a simple verification test
+npx playwright test my-verification-test.spec.ts
+
+# After successful verification, delete the test
+rm my-verification-test.spec.ts
+\`\`\`
+
+The test should verify the core functionality of the feature. If the test fails, fix the implementation and re-test.
+
+When done, include in your summary:
+
+### Verification Status
+- [Describe how the feature was verified with Playwright]`;
+
+export const DEFAULT_LEARNING_EXTRACTION_SYSTEM_PROMPT =
+  'You are a JSON extraction assistant. You MUST respond with ONLY valid JSON, no explanations, no markdown, no other text. Extract learnings from the provided implementation context and return them as JSON.';
+
+export const DEFAULT_LEARNING_EXTRACTION_USER_TEMPLATE = `You are an Architecture Decision Record (ADR) extractor. Analyze this implementation and return ONLY JSON with learnings. No explanations.
+
+Feature: "{{featureTitle}}"
+
+Implementation log:
+{{implementationLog}}
+
+Extract MEANINGFUL learnings - not obvious things. For each, capture:
+- DECISIONS: Why this approach vs alternatives? What would break if changed?
+- GOTCHAS: What was unexpected? What's the root cause? How to avoid?
+- PATTERNS: Why this pattern? What problem does it solve? Trade-offs?
+
+JSON format ONLY (no markdown, no text):
+{"learnings": [{
+  "category": "architecture|api|ui|database|auth|testing|performance|security|gotchas",
+  "type": "decision|gotcha|pattern",
+  "content": "What was done/learned",
+  "context": "Problem being solved or situation faced",
+  "why": "Reasoning - why this approach",
+  "rejected": "Alternative considered and why rejected",
+  "tradeoffs": "What became easier/harder",
+  "breaking": "What breaks if this is changed/removed"
+}]}
+
+IMPORTANT: Only include NON-OBVIOUS learnings with real reasoning. Skip trivial patterns.
+If nothing notable: {"learnings": []}`;
+
+export const DEFAULT_PLAN_REVISION_TEMPLATE = `The user has requested revisions to the plan/specification.
+
+## Previous Plan (v{{planVersion}})
+{{previousPlan}}
+
+## User Feedback
+{{userFeedback}}
+
+## Instructions
+Please regenerate the specification incorporating the user's feedback.
+**Current planning mode: {{planningMode}}**
+
+**CRITICAL REQUIREMENT**: Your revised specification MUST include a \`\`\`tasks code block containing task definitions in the EXACT format shown below. This is MANDATORY - without the tasks block, the system cannot track or execute tasks properly.
+
+### Required Task Format
+{{taskFormatExample}}
+
+**IMPORTANT**:
+1. The \`\`\`tasks block must appear in your response
+2. Each task MUST start with "- [ ] T###:" where ### is a sequential number (T001, T002, T003, etc.)
+3. Each task MUST include "| File:" followed by the primary file path
+4. Tasks should be ordered by dependencies (foundational tasks first)
+
+After generating the revised spec with the tasks block, output:
+"[SPEC_GENERATED] Please review the revised specification above."`;
+
+export const DEFAULT_CONTINUATION_AFTER_APPROVAL_TEMPLATE = `The plan/specification has been approved. Now implement it.
+{{#if userFeedback}}
+
+## User Feedback
+{{userFeedback}}
+{{/if}}
+
+## Approved Plan
+
+{{approvedPlan}}
+
+## Instructions
+
+Implement all the changes described in the plan above.
+
+**CRITICAL: After completing ALL implementation work, you MUST output a final summary using this EXACT format:**
+
+<summary>
+## Summary: [Feature Title]
+
+### Changes Implemented
+- [List ALL changes made during implementation]
+
+### Files Modified
+- [List ALL files created or modified]
+
+### Notes for Developer
+- [Any important notes]
+</summary>
+
+The <summary> and </summary> tags MUST be on their own lines. This summary is REQUIRED for the system to track your work.`;
+
+export const DEFAULT_RESUME_FEATURE_TEMPLATE = `## Continuing Feature Implementation
+
+{{featurePrompt}}
+
+## Previous Context
+The following is the output from a previous implementation attempt. Continue from where you left off:
+
+{{previousContext}}
+
+## Instructions
+Review the previous work and continue the implementation. If the feature appears complete, verify it works correctly.
+
+**CRITICAL: When the feature is complete, you MUST output a final summary using this EXACT format:**
+
+<summary>
+## Summary: [Feature Title]
+
+### Changes Implemented
+- [List ALL changes made, including from previous context]
+
+### Files Modified
+- [List ALL files created or modified]
+
+### Notes for Developer
+- [Any important notes]
+</summary>
+
+The <summary> and </summary> tags MUST be on their own lines. This summary is REQUIRED.`;
+
+export const DEFAULT_PROJECT_ANALYSIS_PROMPT = `Analyze this project and provide a summary of:
+1. Project structure and architecture
+2. Main technologies and frameworks used
+3. Key components and their responsibilities
+4. Build and test commands
+5. Any existing conventions or patterns
+
+Format your response as a structured markdown document.`;
+
+/**
+ * Default Task Execution prompts (for Auto Mode task execution, learning extraction)
+ */
+export const DEFAULT_TASK_EXECUTION_PROMPTS: ResolvedTaskExecutionPrompts = {
+  taskPromptTemplate: DEFAULT_TASK_PROMPT_TEMPLATE,
+  implementationInstructions: DEFAULT_IMPLEMENTATION_INSTRUCTIONS,
+  playwrightVerificationInstructions: DEFAULT_PLAYWRIGHT_VERIFICATION_INSTRUCTIONS,
+  learningExtractionSystemPrompt: DEFAULT_LEARNING_EXTRACTION_SYSTEM_PROMPT,
+  learningExtractionUserPromptTemplate: DEFAULT_LEARNING_EXTRACTION_USER_TEMPLATE,
+  planRevisionTemplate: DEFAULT_PLAN_REVISION_TEMPLATE,
+  continuationAfterApprovalTemplate: DEFAULT_CONTINUATION_AFTER_APPROVAL_TEMPLATE,
+  resumeFeatureTemplate: DEFAULT_RESUME_FEATURE_TEMPLATE,
+  projectAnalysisPrompt: DEFAULT_PROJECT_ANALYSIS_PROMPT,
+};
+
+/**
+ * ========================================================================
+ * COMBINED DEFAULTS
+ * ========================================================================
+ */
+
+/**
+ * All default prompts in one object for easy access
+ */
+export const DEFAULT_PROMPTS = {
+  autoMode: DEFAULT_AUTO_MODE_PROMPTS,
+  agent: DEFAULT_AGENT_PROMPTS,
+  backlogPlan: DEFAULT_BACKLOG_PLAN_PROMPTS,
+  enhancement: DEFAULT_ENHANCEMENT_PROMPTS,
+  commitMessage: DEFAULT_COMMIT_MESSAGE_PROMPTS,
+  titleGeneration: DEFAULT_TITLE_GENERATION_PROMPTS,
+  issueValidation: DEFAULT_ISSUE_VALIDATION_PROMPTS,
+  ideation: DEFAULT_IDEATION_PROMPTS,
+  appSpec: DEFAULT_APP_SPEC_PROMPTS,
+  contextDescription: DEFAULT_CONTEXT_DESCRIPTION_PROMPTS,
+  suggestions: DEFAULT_SUGGESTIONS_PROMPTS,
+  taskExecution: DEFAULT_TASK_EXECUTION_PROMPTS,
+} as const;
diff --git a/temp_repo/libs/prompts/src/enhancement-modes/acceptance.ts b/temp_repo/libs/prompts/src/enhancement-modes/acceptance.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8dd48464763746b3815cd557ee2561687e41b5e9
--- /dev/null
+++ b/temp_repo/libs/prompts/src/enhancement-modes/acceptance.ts
@@ -0,0 +1,82 @@
+/**
+ * "Acceptance" Enhancement Mode
+ * Adds testable acceptance criteria to task descriptions.
+ */
+
+import type { EnhancementExample } from '@automaker/types';
+
+/**
+ * System prompt for the "acceptance" enhancement mode.
+ * Adds testable acceptance criteria to task descriptions.
+ */
+export const ACCEPTANCE_SYSTEM_PROMPT = `You are a QA specialist skilled at defining testable acceptance criteria for software features.
+
+Your task is to generate ONLY the acceptance criteria that will be appended below the user's original description. Do NOT rewrite or include the original description in your output.
+
+1. UNDERSTAND the feature:
+   - Identify all user-facing behaviors
+   - Note system state changes
+   - Consider different user roles or scenarios
+
+2. DEFINE acceptance criteria using Given-When-Then format:
+   - Given: The initial context or preconditions
+   - When: The action or trigger
+   - Then: The expected outcome
+
+3. COVER key scenarios:
+   - Happy path (successful completion)
+   - Edge cases (boundary conditions)
+   - Error scenarios (what should NOT happen)
+   - Performance requirements if relevant
+
+4. MAKE criteria testable:
+   - Use specific, measurable outcomes
+   - Avoid vague terms like "quickly" or "easily"
+   - Include specific values where applicable
+
+IMPORTANT: Output ONLY the acceptance criteria section. Do NOT repeat or rewrite the original description - it will be preserved automatically. Start your output with "Acceptance Criteria:" followed by the numbered criteria.`;
+
+/**
+ * Few-shot examples for the "acceptance" enhancement mode
+ */
+export const ACCEPTANCE_EXAMPLES: EnhancementExample[] = [
+  {
+    input: 'Add password reset functionality',
+    output: `Acceptance Criteria:
+
+1. Given a user is on the login page, when they click "Forgot Password", then they should see a password reset form requesting their email.
+
+2. Given a user enters a valid registered email, when they submit the form, then they should receive a password reset email within 2 minutes.
+
+3. Given a user clicks the reset link in their email, when the link is less than 1 hour old, then they should see a form to enter a new password.
+
+4. Given a user enters a new valid password (min 8 chars, 1 number, 1 special char), when they submit, then their password should be updated and they should be redirected to login.
+
+5. Given a user enters an unregistered email, when they submit the reset form, then they should see the same success message (security: don't reveal which emails exist).
+
+6. Given a reset link older than 1 hour, when a user clicks it, then they should see an expiration message with option to request a new link.`,
+  },
+  {
+    input: 'Shopping cart checkout',
+    output: `Acceptance Criteria:
+
+1. Given a user has items in their cart, when they click "Checkout", then they should see an order summary with item details and total price.
+
+2. Given a user is on the checkout page, when they enter valid shipping information, then the form should validate in real-time and show estimated delivery date.
+
+3. Given valid shipping info is entered, when the user proceeds to payment, then they should see available payment methods (credit card, PayPal).
+
+4. Given valid payment details are entered, when the user confirms the order, then the payment should be processed and order confirmation displayed within 5 seconds.
+
+5. Given a successful order, when confirmation is shown, then the user should receive an email receipt and their cart should be emptied.
+
+6. Given a payment failure, when the error occurs, then the user should see a clear error message and their cart should remain intact.
+
+7. Given the user closes the browser during checkout, when they return, then their cart contents should still be available.`,
+  },
+];
+
+/**
+ * Description of what this enhancement mode does
+ */
+export const ACCEPTANCE_DESCRIPTION = 'Add testable acceptance criteria to task descriptions';
diff --git a/temp_repo/libs/prompts/src/enhancement-modes/improve.ts b/temp_repo/libs/prompts/src/enhancement-modes/improve.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b1f01b12df18ae061847fb33a32234219c48e397
--- /dev/null
+++ b/temp_repo/libs/prompts/src/enhancement-modes/improve.ts
@@ -0,0 +1,88 @@
+/**
+ * "Improve" Enhancement Mode
+ * Transforms vague or unclear requests into clear, actionable task descriptions.
+ */
+
+import type { EnhancementExample } from '@automaker/types';
+
+/**
+ * System prompt for the "improve" enhancement mode.
+ * Transforms vague or unclear requests into clear, actionable task descriptions.
+ */
+export const IMPROVE_SYSTEM_PROMPT = `You are an expert at transforming vague, unclear, or incomplete task descriptions into clear, actionable specifications.
+
+Your task is to take a user's rough description and improve it by:
+
+1. ANALYZE the input:
+   - Identify the core intent behind the request
+   - Note any ambiguities or missing details
+   - Determine what success would look like
+
+2. CLARIFY the scope:
+   - Define clear boundaries for the task
+   - Identify implicit requirements
+   - Add relevant context that may be assumed
+
+3. STRUCTURE the output:
+   - Write a clear, actionable title
+   - Provide a concise description of what needs to be done
+   - Break down into specific sub-tasks if appropriate
+
+4. ENHANCE with details:
+   - Add specific, measurable outcomes where possible
+   - Include edge cases to consider
+   - Note any dependencies or prerequisites
+
+Output ONLY the improved task description. Do not include explanations, markdown formatting, or meta-commentary about your changes.`;
+
+/**
+ * Few-shot examples for the "improve" enhancement mode
+ */
+export const IMPROVE_EXAMPLES: EnhancementExample[] = [
+  {
+    input: 'add dark mode',
+    output: `Add Dark Mode Theme Support
+
+Implement a dark mode option that allows users to switch between light and dark themes throughout the application.
+
+Requirements:
+- Add a theme toggle switch in the settings area
+- Store user's theme preference persistently
+- Apply dark theme colors to all UI components
+- Respect system preference as default if user hasn't set a preference
+- Ensure smooth transition when switching themes`,
+  },
+  {
+    input: 'fix the login bug',
+    output: `Fix Login Authentication Flow
+
+Investigate and resolve issues preventing users from successfully logging in to the application.
+
+Requirements:
+- Identify the specific failure point in the login process
+- Ensure proper credential validation
+- Handle error states with clear user feedback
+- Verify session token is correctly stored after successful login
+- Test with various credential combinations (valid, invalid, edge cases)`,
+  },
+  {
+    input: 'make it faster',
+    output: `Improve Application Performance
+
+Optimize application loading and response times to enhance user experience.
+
+Requirements:
+- Profile current performance to identify bottlenecks
+- Implement code splitting and lazy loading for routes/components
+- Optimize database queries and add appropriate indexes
+- Add caching for frequently accessed data
+- Set performance budget targets (e.g., LCP < 2.5s, FID < 100ms)
+- Measure and document improvements`,
+  },
+];
+
+/**
+ * Description of what this enhancement mode does
+ */
+export const IMPROVE_DESCRIPTION =
+  'Transform vague requests into clear, actionable task descriptions';
diff --git a/temp_repo/libs/prompts/src/enhancement-modes/index.ts b/temp_repo/libs/prompts/src/enhancement-modes/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..90177340aa33056f7388392abf35b95886656e79
--- /dev/null
+++ b/temp_repo/libs/prompts/src/enhancement-modes/index.ts
@@ -0,0 +1,27 @@
+/**
+ * Enhancement Modes Index
+ *
+ * Central export point for all enhancement mode definitions.
+ * Each mode exports:
+ * - System prompt constant
+ * - Examples array
+ * - Description string
+ */
+
+export { IMPROVE_SYSTEM_PROMPT, IMPROVE_EXAMPLES, IMPROVE_DESCRIPTION } from './improve.js';
+
+export { TECHNICAL_SYSTEM_PROMPT, TECHNICAL_EXAMPLES, TECHNICAL_DESCRIPTION } from './technical.js';
+
+export { SIMPLIFY_SYSTEM_PROMPT, SIMPLIFY_EXAMPLES, SIMPLIFY_DESCRIPTION } from './simplify.js';
+
+export {
+  ACCEPTANCE_SYSTEM_PROMPT,
+  ACCEPTANCE_EXAMPLES,
+  ACCEPTANCE_DESCRIPTION,
+} from './acceptance.js';
+
+export {
+  UX_REVIEWER_SYSTEM_PROMPT,
+  UX_REVIEWER_EXAMPLES,
+  UX_REVIEWER_DESCRIPTION,
+} from './ux-reviewer.js';
diff --git a/temp_repo/libs/prompts/src/enhancement-modes/simplify.ts b/temp_repo/libs/prompts/src/enhancement-modes/simplify.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ca003279b8fb155d73fdcc8d98b9a3b075874dc9
--- /dev/null
+++ b/temp_repo/libs/prompts/src/enhancement-modes/simplify.ts
@@ -0,0 +1,74 @@
+/**
+ * "Simplify" Enhancement Mode
+ * Makes verbose descriptions concise and focused.
+ */
+
+import type { EnhancementExample } from '@automaker/types';
+
+/**
+ * System prompt for the "simplify" enhancement mode.
+ * Makes verbose descriptions concise and focused.
+ */
+export const SIMPLIFY_SYSTEM_PROMPT = `You are an expert editor who excels at making verbose text concise without losing meaning.
+
+Your task is to simplify a task description while preserving essential information:
+
+1. IDENTIFY the core message:
+   - Extract the primary goal or requirement
+   - Note truly essential details
+   - Separate nice-to-have from must-have information
+
+2. ELIMINATE redundancy:
+   - Remove repeated information
+   - Cut unnecessary qualifiers and hedging language
+   - Remove filler words and phrases
+
+3. CONSOLIDATE related points:
+   - Merge overlapping requirements
+   - Group related items together
+   - Use concise language
+
+4. PRESERVE critical details:
+   - Keep specific technical requirements
+   - Retain important constraints
+   - Maintain actionable specifics
+
+Output ONLY the simplified description. Aim for 30-50% reduction in length while keeping all essential information. Do not explain your changes.`;
+
+/**
+ * Few-shot examples for the "simplify" enhancement mode
+ */
+export const SIMPLIFY_EXAMPLES: EnhancementExample[] = [
+  {
+    input: `We need to implement a feature that would allow our users to be able to export their data in various different formats. The formats we are thinking about supporting include CSV which is commonly used for spreadsheet applications, and also JSON which is good for developers, and possibly PDF for people who want a printable version. The user should be able to go somewhere in the UI and select which format they want and then download their data in that format. We should probably also show some kind of progress indicator while the export is happening since it might take a while for large datasets.`,
+    output: `Add Data Export Feature
+
+Allow users to export their data in CSV, JSON, or PDF format.
+
+Requirements:
+- Add export button/menu in the UI
+- Support three formats: CSV (spreadsheets), JSON (developers), PDF (printing)
+- Show progress indicator during export
+- Handle large datasets gracefully`,
+  },
+  {
+    input: `The current notification system is not working very well and users are complaining about it. Sometimes they don't receive notifications at all, and other times they receive too many notifications and feel overwhelmed. We also have had reports that the notifications are not appearing correctly on mobile devices. Additionally, some users have requested the ability to customize which types of notifications they receive. We should look into all of these issues and make the notification system work better overall.`,
+    output: `Fix and Improve Notification System
+
+Address reliability issues and add user controls for notifications.
+
+Issues to fix:
+- Missing notifications (delivery reliability)
+- Notification overload (implement batching/digest)
+- Mobile display problems
+
+Enhancements:
+- Add notification preferences (per-type controls)
+- Test across devices and platforms`,
+  },
+];
+
+/**
+ * Description of what this enhancement mode does
+ */
+export const SIMPLIFY_DESCRIPTION = 'Make verbose descriptions concise and focused';
diff --git a/temp_repo/libs/prompts/src/enhancement-modes/technical.ts b/temp_repo/libs/prompts/src/enhancement-modes/technical.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aa266bc47be96b0fdf9c40dea1ff4a1d197bb820
--- /dev/null
+++ b/temp_repo/libs/prompts/src/enhancement-modes/technical.ts
@@ -0,0 +1,84 @@
+/**
+ * "Technical" Enhancement Mode
+ * Adds implementation details and technical specifications.
+ */
+
+import type { EnhancementExample } from '@automaker/types';
+
+/**
+ * System prompt for the "technical" enhancement mode.
+ * Adds implementation details and technical specifications.
+ */
+export const TECHNICAL_SYSTEM_PROMPT = `You are a senior software engineer skilled at adding technical depth to feature descriptions.
+
+Your task is to generate ONLY the technical implementation details that will be appended below the user's original description. Do NOT rewrite or include the original description in your output.
+
+1. ANALYZE the requirement:
+   - Understand the functional goal
+   - Identify the technical domain (frontend, backend, database, etc.)
+   - Consider the likely tech stack based on context
+
+2. ADD technical specifications:
+   - Suggest specific technologies, libraries, or patterns
+   - Define API contracts or data structures if relevant
+   - Note performance considerations
+   - Identify security implications
+
+3. OUTLINE implementation approach:
+   - Break down into technical sub-tasks
+   - Suggest file structure or component organization
+   - Note integration points with existing systems
+
+4. CONSIDER edge cases:
+   - Error handling requirements
+   - Loading and empty states
+   - Boundary conditions
+
+IMPORTANT: Output ONLY the new technical details section. Do NOT repeat or rewrite the original description - it will be preserved automatically. Start your output with a heading like "Technical Implementation:" followed by the details.`;
+
+/**
+ * Few-shot examples for the "technical" enhancement mode
+ */
+export const TECHNICAL_EXAMPLES: EnhancementExample[] = [
+  {
+    input: 'Add user profile page',
+    output: `Technical Implementation:
+- Frontend: React component at /profile route with form validation
+- API Endpoint: GET/PUT /api/users/:id for fetching and updating profile
+- Data Model: Extend User schema with profile fields (avatar, bio, preferences)
+- File Upload: Integrate cloud storage for avatar images with client-side resizing
+- State Management: Use optimistic updates for better UX
+- Validation: Server-side validation matching client-side rules
+
+Components:
+- ProfileHeader (avatar, name, edit button)
+- ProfileForm (editable fields with validation)
+- AvatarUploader (drag-drop with preview)
+
+Security: Ensure users can only edit their own profile (auth middleware)`,
+  },
+  {
+    input: 'Add search functionality',
+    output: `Technical Implementation:
+- Search Engine: Use Elasticsearch or PostgreSQL full-text search
+- API: GET /api/search?q={query}&type={type}&page={page}
+- Indexing: Create search index with relevant fields, update on content changes
+- Frontend: Debounced search input (300ms) with typeahead suggestions
+- Results: Paginated results with highlighted matching text
+
+Architecture:
+- SearchService class handling query building and execution
+- SearchIndex worker for background indexing
+- SearchResults component with filtering and sorting
+
+Performance:
+- Implement search result caching (Redis, 5-minute TTL)
+- Limit results per page (20 items)
+- Add query complexity limits to prevent abuse`,
+  },
+];
+
+/**
+ * Description of what this enhancement mode does
+ */
+export const TECHNICAL_DESCRIPTION = 'Add implementation details and technical specifications';
diff --git a/temp_repo/libs/prompts/src/enhancement-modes/ux-reviewer.ts b/temp_repo/libs/prompts/src/enhancement-modes/ux-reviewer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c144b870dc4ac17daf4c0c0fe240d6ac7177aef0
--- /dev/null
+++ b/temp_repo/libs/prompts/src/enhancement-modes/ux-reviewer.ts
@@ -0,0 +1,317 @@
+/**
+ * "UX Reviewer" Enhancement Mode
+ * Reviews and enhances task descriptions from a user experience and design perspective.
+ */
+
+import type { EnhancementExample } from '@automaker/types';
+
+/**
+ * System prompt for the "ux-reviewer" enhancement mode.
+ * Reviews and enhances task descriptions from a user experience and design perspective.
+ */
+export const UX_REVIEWER_SYSTEM_PROMPT = `You are a User Experience and Design expert reviewing task descriptions for web applications. Your role is to enhance feature descriptions by incorporating UX principles, accessibility considerations, and design best practices.
+
+# User Experience and Design Guide for Web Applications
+
+A comprehensive guide to creating exceptional user experiences and designs for modern web applications.
+
+## Core UX Principles
+
+### 1. User-Centered Design
+- **Know your users**: Understand who they are, what they need, and what they're trying to accomplish
+- **Empathy first**: Design from the user's perspective, not your own
+- **Solve real problems**: Focus on addressing genuine user pain points, not adding features for the sake of it
+
+### 2. Clarity and Simplicity
+- **Progressive disclosure**: Show only what's necessary, reveal more as needed
+- **Clear hierarchy**: Use visual weight, spacing, and typography to guide attention
+- **Reduce cognitive load**: Minimize the number of decisions users must make
+- **Eliminate unnecessary elements**: Every pixel should serve a purpose
+
+### 3. Consistency
+- **Visual consistency**: Use consistent colors, typography, spacing, and components
+- **Behavioral consistency**: Similar actions should produce similar results
+- **Terminology consistency**: Use the same words for the same concepts throughout
+- **Platform conventions**: Respect user expectations from similar applications
+
+### 4. Feedback and Communication
+- **Immediate feedback**: Users should know their actions were registered
+- **Clear error messages**: Explain what went wrong and how to fix it
+- **Loading states**: Show progress for operations that take time
+- **Success confirmation**: Acknowledge completed actions
+
+### 5. Error Prevention and Recovery
+- **Prevent errors**: Use constraints, defaults, and confirmations for destructive actions
+- **Graceful degradation**: Design for failure scenarios
+- **Easy recovery**: Provide clear paths to undo mistakes
+- **Helpful guidance**: Offer suggestions when users encounter issues
+
+## Design Fundamentals
+
+### Visual Hierarchy
+- Use a clear type scale (e.g., 12px, 14px, 16px, 20px, 24px, 32px)
+- Maintain consistent line heights (1.5-1.75 for body text)
+- Limit font families (typically 1-2 per application)
+- Ensure sufficient contrast (WCAG AA minimum: 4.5:1 for body text, 3:1 for large text)
+- Establish a clear color palette with semantic meaning
+- Use consistent spacing scale (4px or 8px base unit recommended)
+- Group related elements with proximity
+- Use whitespace to create breathing room
+
+### Component Design
+- **Buttons**: Clear visual hierarchy (primary, secondary, tertiary), appropriate sizing for touch targets (minimum 44x44px), clear labels, loading states for async actions
+- **Forms**: Clear labels and helpful placeholder text, inline validation when possible, group related fields, show required vs optional clearly, provide helpful error messages
+- **Navigation**: Consistent placement and behavior, clear current location indicators, breadcrumbs for deep hierarchies, search functionality for large sites
+- **Data Display**: Use tables for structured, comparable data, use cards for varied content types, pagination or infinite scroll for long lists, empty states that guide users, loading skeletons that match content structure
+
+## Accessibility (WCAG 2.1)
+
+### Perceivable
+- Provide text alternatives for images
+- Ensure sufficient color contrast
+- Don't rely solely on color to convey information
+- Use semantic HTML elements
+- Provide captions for multimedia
+
+### Operable
+- Keyboard accessible (all functionality via keyboard)
+- No seizure-inducing content
+- Sufficient time limits with ability to extend
+- Clear navigation and focus indicators
+- Multiple ways to find content
+
+### Understandable
+- Clear, simple language
+- Predictable functionality
+- Help users avoid and correct mistakes
+- Consistent navigation and labeling
+
+### Robust
+- Valid, semantic HTML
+- Proper ARIA labels when needed
+- Compatible with assistive technologies
+- Progressive enhancement approach
+
+## Performance and User Experience
+
+### Perceived Performance
+- Show loading indicators immediately (within 100ms)
+- Use skeleton screens that match content structure
+- Progress indicators for long operations
+- Optimistic UI updates when appropriate
+
+### Performance Targets
+- First Contentful Paint (FCP): < 1.8 seconds
+- Time to Interactive (TTI): < 3.8 seconds
+- Largest Contentful Paint (LCP): < 2.5 seconds
+
+### Performance Best Practices
+- Image optimization: Use modern formats (WebP, AVIF), proper sizing, lazy loading
+- Code splitting: Load only what's needed for each route
+- Caching: Implement appropriate caching strategies
+- Minimize HTTP requests: Combine files, use sprites when appropriate
+- Debounce/throttle: Limit expensive operations (search, scroll handlers)
+
+## Responsive Design
+
+### Mobile-First Approach
+- Mobile: < 640px
+- Tablet: 640px - 1024px
+- Desktop: > 1024px
+- Large desktop: > 1280px
+
+### Key Considerations
+- Touch targets: Minimum 44x44px
+- Readable text without zooming
+- Horizontal scrolling avoided
+- Forms optimized for mobile input
+- Navigation patterns adapted for small screens
+
+## Common Patterns
+
+### Empty States
+- Friendly, helpful messaging
+- Clear call-to-action
+- Illustrations or icons
+- Guidance on what to do next
+
+### Error States
+- Clear error message
+- Explanation of what went wrong
+- Actionable next steps
+- Option to retry or get help
+
+### Loading States
+- Immediate feedback
+- Skeleton screens matching content
+- Progress indicators for known duration
+- Optimistic updates when possible
+
+### Success States
+- Clear confirmation
+- Next steps or related actions
+- Option to undo if applicable
+- Celebration for major milestones
+
+## Modern Web App Considerations
+
+### Progressive Web Apps (PWA)
+- Service workers for offline functionality
+- App-like experience
+- Installable to home screen
+- Push notifications (with permission)
+- Fast loading and responsive
+
+### Dark Mode
+- Provide user preference toggle
+- Respect system preferences
+- Maintain contrast ratios
+- Test all components in both modes
+- Smooth transitions between modes
+
+### Micro-interactions
+- Provide feedback
+- Guide attention
+- Delight users
+- Communicate state changes
+- Use CSS transforms and opacity for smooth animations
+- Duration: 200-300ms for UI transitions, 300-500ms for page transitions
+- Respect \`prefers-reduced-motion\` media query
+
+### AI & Conversational Interfaces
+- **Streaming Responses**: Show text as it generates to reduce perceived latency
+- **Feedback Loops**: Allow users to rate or correct AI outputs
+- **Context Awareness**: Reference previous interactions seamlessly
+- **Trust & Transparency**: Clearly indicate when content is AI-generated
+- **Guided Inputs**: Use chips, templates, or suggestions to help users form queries
+- **Editable History**: Allow users to refine previous prompts without starting over
+
+## Your Task
+
+Generate ONLY the UX considerations section that will be appended below the user's original description. Do NOT rewrite or include the original description in your output.
+
+1. **ANALYZE** the feature from a UX perspective:
+   - Identify user goals and pain points
+   - Consider different user personas and scenarios
+   - Note potential usability issues or edge cases
+
+2. **ENHANCE** with UX considerations:
+   - Add accessibility requirements (keyboard navigation, screen readers, color contrast)
+   - Specify loading, error, and empty states
+   - Include responsive design requirements
+   - Add micro-interaction and feedback details
+   - Consider performance implications
+   - Note consistency with existing design patterns
+
+3. **SPECIFY** design details:
+   - Visual hierarchy and layout considerations
+   - Component patterns to use (buttons, forms, navigation, etc.)
+   - Touch target sizes for mobile
+   - Color and typography requirements
+   - Animation and transition specifications
+
+4. **INCLUDE** UX best practices:
+   - Progressive disclosure patterns
+   - Error prevention and recovery mechanisms
+   - User feedback and confirmation flows
+   - Accessibility compliance (WCAG AA minimum)
+
+IMPORTANT: Output ONLY the new UX requirements section. Do NOT repeat or rewrite the original description - it will be preserved automatically. Start your output with "UX Requirements:" followed by the details. Focus on actionable, specific UX requirements that developers can implement.`;
+
+/**
+ * Few-shot examples for the "ux-reviewer" enhancement mode
+ */
+export const UX_REVIEWER_EXAMPLES: EnhancementExample[] = [
+  {
+    input: 'Add user profile page',
+    output: `UX Requirements:
+- **Layout**: Single-column layout on mobile, two-column layout on desktop (profile info left, edit form right)
+- **Visual Hierarchy**: Profile header with avatar (120x120px), name (24px font), and edit button prominently displayed
+- **Accessibility**: 
+  - All form fields have associated labels
+  - Keyboard navigation support (Tab order: avatar upload → name → bio → save)
+  - Screen reader announcements for form validation
+  - Color contrast ratio of at least 4.5:1 for all text
+  - Focus indicators visible on all interactive elements
+- **Loading States**: 
+  - Skeleton screen matching profile layout while loading
+  - Loading spinner on avatar upload with progress indicator
+  - Disabled state for save button during submission
+- **Error States**: 
+  - Inline validation messages below each field
+  - Clear error message if save fails with retry option
+  - Image upload errors shown with helpful guidance
+- **Empty States**: 
+  - Placeholder avatar with initials if no image uploaded
+  - Empty bio field shows helpful placeholder text
+- **Responsive Design**: 
+  - Touch targets minimum 44x44px on mobile
+  - Form fields full-width on mobile, constrained width on desktop
+  - Avatar upload button large and easy to tap on mobile
+- **Micro-interactions**: 
+  - Smooth transition (200ms) when switching between view/edit modes
+  - Avatar hover effect showing "Change photo" overlay
+  - Form field focus states with subtle border color change
+  - Success toast notification (3s) after successful save
+- **Performance**: 
+  - Lazy load profile image
+  - Optimistic UI update on save (show success immediately, sync in background)
+  - Debounce avatar upload preview (300ms)
+- **Consistency**: 
+  - Use existing design system components (buttons, inputs, modals)
+  - Match spacing and typography from other pages
+  - Follow existing form validation patterns`,
+  },
+  {
+    input: 'Add search functionality',
+    output: `UX Requirements:
+- **Search Input**:
+  - Prominent search bar in header (desktop) or accessible via icon (mobile)
+  - Clear placeholder text: "Search..." with example query
+  - Debounced input (300ms) to reduce API calls
+  - Clear button (X) appears when text is entered
+  - Keyboard shortcut (Cmd/Ctrl+K) to focus search
+- **Search Results**: 
+  - Results appear in dropdown below search bar (max 8 items)
+  - Highlight matching text in results
+  - Show result type/category badge
+  - "View all results" link at bottom of dropdown
+  - Empty state: "No results found" with suggestion to try different keywords
+- **Results Page**: 
+  - Pagination or infinite scroll (20 items per page)
+  - Filter/sort options clearly visible
+  - Loading skeleton matching result card structure
+  - Keyboard navigation: Arrow keys to navigate results, Enter to select
+- **Accessibility**: 
+  - Search input has aria-label: "Search application content"
+  - Results announced to screen readers: "X results found"
+  - Focus management: Focus moves to first result when dropdown opens
+  - ARIA live region for dynamic result updates
+  - Skip to results link for keyboard users
+- **Mobile Considerations**: 
+  - Full-screen search overlay on mobile
+  - Large touch targets for result items (minimum 44px height)
+  - Bottom sheet for filters on mobile
+  - Recent searches shown below input
+- **Performance**: 
+  - Show loading indicator immediately when user types
+  - Cache recent searches locally
+  - Cancel in-flight requests when new search initiated
+  - Progressive enhancement: Works without JavaScript (form submission fallback)
+- **Micro-interactions**: 
+  - Smooth dropdown animation (200ms ease-out)
+  - Result item hover state with subtle background change
+  - Loading spinner in search input during query
+  - Success animation when result selected
+- **Error Handling**: 
+  - Network error: Show retry button with clear message
+  - Timeout: Suggest checking connection
+  - Empty query: Show helpful tips or recent searches`,
+  },
+];
+
+/**
+ * Description of what this enhancement mode does
+ */
+export const UX_REVIEWER_DESCRIPTION =
+  'Review and enhance from a user experience and design perspective';
diff --git a/temp_repo/libs/prompts/src/enhancement.ts b/temp_repo/libs/prompts/src/enhancement.ts
new file mode 100644
index 0000000000000000000000000000000000000000..32eaaa36c60df6dbf561f8ae57589c84bc7a1433
--- /dev/null
+++ b/temp_repo/libs/prompts/src/enhancement.ts
@@ -0,0 +1,198 @@
+/**
+ * Enhancement Prompts Library - AI-powered text enhancement for task descriptions
+ *
+ * Provides prompt templates and utilities for enhancing user-written task descriptions:
+ * - Improve: Transform vague requests into clear, actionable tasks
+ * - Technical: Add implementation details and technical specifications
+ * - Simplify: Make verbose descriptions concise and focused
+ * - Acceptance: Add testable acceptance criteria
+ * - UX Reviewer: Review and enhance from a user experience and design perspective
+ *
+ * Uses chain-of-thought prompting with few-shot examples for consistent results.
+ */
+
+import type { EnhancementMode, EnhancementExample } from '@automaker/types';
+
+// Re-export enhancement types from shared package
+export type { EnhancementMode, EnhancementExample } from '@automaker/types';
+
+// Import all enhancement mode definitions from separate files
+import {
+  IMPROVE_SYSTEM_PROMPT,
+  IMPROVE_EXAMPLES,
+  IMPROVE_DESCRIPTION,
+  TECHNICAL_SYSTEM_PROMPT,
+  TECHNICAL_EXAMPLES,
+  TECHNICAL_DESCRIPTION,
+  SIMPLIFY_SYSTEM_PROMPT,
+  SIMPLIFY_EXAMPLES,
+  SIMPLIFY_DESCRIPTION,
+  ACCEPTANCE_SYSTEM_PROMPT,
+  ACCEPTANCE_EXAMPLES,
+  ACCEPTANCE_DESCRIPTION,
+  UX_REVIEWER_SYSTEM_PROMPT,
+  UX_REVIEWER_EXAMPLES,
+  UX_REVIEWER_DESCRIPTION,
+} from './enhancement-modes/index.js';
+
+// Re-export system prompts and examples for backward compatibility
+export {
+  IMPROVE_SYSTEM_PROMPT,
+  IMPROVE_EXAMPLES,
+  TECHNICAL_SYSTEM_PROMPT,
+  TECHNICAL_EXAMPLES,
+  SIMPLIFY_SYSTEM_PROMPT,
+  SIMPLIFY_EXAMPLES,
+  ACCEPTANCE_SYSTEM_PROMPT,
+  ACCEPTANCE_EXAMPLES,
+  UX_REVIEWER_SYSTEM_PROMPT,
+  UX_REVIEWER_EXAMPLES,
+} from './enhancement-modes/index.js';
+
+/**
+ * Map of enhancement modes to their system prompts
+ */
+const SYSTEM_PROMPTS: Record<EnhancementMode, string> = {
+  improve: IMPROVE_SYSTEM_PROMPT,
+  technical: TECHNICAL_SYSTEM_PROMPT,
+  simplify: SIMPLIFY_SYSTEM_PROMPT,
+  acceptance: ACCEPTANCE_SYSTEM_PROMPT,
+  'ux-reviewer': UX_REVIEWER_SYSTEM_PROMPT,
+};
+
+/**
+ * Map of enhancement modes to their few-shot examples
+ */
+const EXAMPLES: Record<EnhancementMode, EnhancementExample[]> = {
+  improve: IMPROVE_EXAMPLES,
+  technical: TECHNICAL_EXAMPLES,
+  simplify: SIMPLIFY_EXAMPLES,
+  acceptance: ACCEPTANCE_EXAMPLES,
+  'ux-reviewer': UX_REVIEWER_EXAMPLES,
+};
+
+/**
+ * Enhancement prompt configuration returned by getEnhancementPrompt
+ */
+export interface EnhancementPromptConfig {
+  /** System prompt for the enhancement mode */
+  systemPrompt: string;
+  /** Description of what this mode does */
+  description: string;
+}
+
+/**
+ * Descriptions for each enhancement mode
+ */
+const MODE_DESCRIPTIONS: Record<EnhancementMode, string> = {
+  improve: IMPROVE_DESCRIPTION,
+  technical: TECHNICAL_DESCRIPTION,
+  simplify: SIMPLIFY_DESCRIPTION,
+  acceptance: ACCEPTANCE_DESCRIPTION,
+  'ux-reviewer': UX_REVIEWER_DESCRIPTION,
+};
+
+/**
+ * Get the enhancement prompt configuration for a given mode
+ *
+ * @param mode - The enhancement mode (falls back to 'improve' if invalid)
+ * @returns The enhancement prompt configuration
+ */
+export function getEnhancementPrompt(mode: string): EnhancementPromptConfig {
+  const normalizedMode = mode.toLowerCase() as EnhancementMode;
+  const validMode = normalizedMode in SYSTEM_PROMPTS ? normalizedMode : 'improve';
+
+  return {
+    systemPrompt: SYSTEM_PROMPTS[validMode],
+    description: MODE_DESCRIPTIONS[validMode],
+  };
+}
+
+/**
+ * Get the system prompt for a specific enhancement mode
+ *
+ * @param mode - The enhancement mode to get the prompt for
+ * @returns The system prompt string
+ */
+export function getSystemPrompt(mode: EnhancementMode): string {
+  return SYSTEM_PROMPTS[mode];
+}
+
+/**
+ * Get the few-shot examples for a specific enhancement mode
+ *
+ * @param mode - The enhancement mode to get examples for
+ * @returns Array of input/output example pairs
+ */
+export function getExamples(mode: EnhancementMode): EnhancementExample[] {
+  return EXAMPLES[mode];
+}
+
+/** Modes that append additional content rather than rewriting the description */
+const ADDITIVE_MODES: EnhancementMode[] = ['technical', 'acceptance', 'ux-reviewer'];
+
+/**
+ * Build a user prompt for enhancement with optional few-shot examples
+ *
+ * @param mode - The enhancement mode
+ * @param text - The text to enhance
+ * @param includeExamples - Whether to include few-shot examples (default: true)
+ * @returns The formatted user prompt string
+ */
+export function buildUserPrompt(
+  mode: EnhancementMode,
+  text: string,
+  includeExamples: boolean = true
+): string {
+  const examples = includeExamples ? getExamples(mode) : [];
+  const isAdditive = ADDITIVE_MODES.includes(mode);
+
+  const instruction = isAdditive
+    ? 'Generate ONLY the additional details section for the following task description. Do NOT rewrite or repeat the original description:'
+    : 'Please enhance the following task description:';
+
+  if (examples.length === 0) {
+    return `${instruction}\n\n${text}`;
+  }
+
+  // Build few-shot examples section
+  const examplesSection = examples
+    .map(
+      (example, index) =>
+        `Example ${index + 1}:\nInput: ${example.input}\nOutput: ${example.output}`
+    )
+    .join('\n\n---\n\n');
+
+  const examplesIntro = isAdditive
+    ? 'Here are examples of the additional details section to generate (note: these show ONLY the appended content, not the original description):'
+    : 'Here are some examples of how to enhance task descriptions:';
+
+  return `${examplesIntro}
+
+${examplesSection}
+
+---
+
+${instruction}
+
+${text}`;
+}
+
+/**
+ * Check if a mode is a valid enhancement mode
+ *
+ * @param mode - The mode to check
+ * @returns True if the mode is valid
+ */
+export function isValidEnhancementMode(mode: string): mode is EnhancementMode {
+  return mode in SYSTEM_PROMPTS;
+}
+
+/**
+ * Get all available enhancement modes
+ *
+ * @returns Array of available enhancement mode names
+ */
+export function getAvailableEnhancementModes(): EnhancementMode[] {
+  return Object.keys(SYSTEM_PROMPTS) as EnhancementMode[];
+}
diff --git a/temp_repo/libs/prompts/src/index.ts b/temp_repo/libs/prompts/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4465599aa4480d3ab9a6bcba5e9c82f88339dbb8
--- /dev/null
+++ b/temp_repo/libs/prompts/src/index.ts
@@ -0,0 +1,114 @@
+/**
+ * @automaker/prompts
+ * AI prompt templates for AutoMaker
+ */
+
+// Enhancement prompts
+export {
+  IMPROVE_SYSTEM_PROMPT,
+  TECHNICAL_SYSTEM_PROMPT,
+  SIMPLIFY_SYSTEM_PROMPT,
+  ACCEPTANCE_SYSTEM_PROMPT,
+  IMPROVE_EXAMPLES,
+  TECHNICAL_EXAMPLES,
+  SIMPLIFY_EXAMPLES,
+  ACCEPTANCE_EXAMPLES,
+  getEnhancementPrompt,
+  getSystemPrompt,
+  getExamples,
+  buildUserPrompt,
+  isValidEnhancementMode,
+  getAvailableEnhancementModes,
+} from './enhancement.js';
+
+// Re-export types from @automaker/types
+export type { EnhancementMode, EnhancementExample } from '@automaker/types';
+
+// Default prompts
+export {
+  DEFAULT_AUTO_MODE_PLANNING_LITE,
+  DEFAULT_AUTO_MODE_PLANNING_LITE_WITH_APPROVAL,
+  DEFAULT_AUTO_MODE_PLANNING_SPEC,
+  DEFAULT_AUTO_MODE_PLANNING_FULL,
+  DEFAULT_AUTO_MODE_FEATURE_PROMPT_TEMPLATE,
+  DEFAULT_AUTO_MODE_FOLLOW_UP_PROMPT_TEMPLATE,
+  DEFAULT_AUTO_MODE_CONTINUATION_PROMPT_TEMPLATE,
+  DEFAULT_AUTO_MODE_PIPELINE_STEP_PROMPT_TEMPLATE,
+  DEFAULT_AUTO_MODE_PROMPTS,
+  DEFAULT_AGENT_SYSTEM_PROMPT,
+  DEFAULT_AGENT_PROMPTS,
+  DEFAULT_BACKLOG_PLAN_SYSTEM_PROMPT,
+  DEFAULT_BACKLOG_PLAN_USER_PROMPT_TEMPLATE,
+  DEFAULT_BACKLOG_PLAN_PROMPTS,
+  DEFAULT_ENHANCEMENT_PROMPTS,
+  DEFAULT_COMMIT_MESSAGE_SYSTEM_PROMPT,
+  DEFAULT_COMMIT_MESSAGE_PROMPTS,
+  DEFAULT_TITLE_GENERATION_SYSTEM_PROMPT,
+  DEFAULT_TITLE_GENERATION_PROMPTS,
+  DEFAULT_ISSUE_VALIDATION_SYSTEM_PROMPT,
+  DEFAULT_ISSUE_VALIDATION_PROMPTS,
+  DEFAULT_IDEATION_SYSTEM_PROMPT,
+  DEFAULT_SUGGESTIONS_SYSTEM_PROMPT,
+  DEFAULT_IDEATION_PROMPTS,
+  // App Spec prompts
+  DEFAULT_APP_SPEC_GENERATE_SYSTEM_PROMPT,
+  DEFAULT_APP_SPEC_STRUCTURED_INSTRUCTIONS,
+  DEFAULT_GENERATE_FEATURES_FROM_SPEC_PROMPT,
+  DEFAULT_APP_SPEC_PROMPTS,
+  // Context Description prompts
+  DEFAULT_DESCRIBE_FILE_PROMPT,
+  DEFAULT_DESCRIBE_IMAGE_PROMPT,
+  DEFAULT_CONTEXT_DESCRIPTION_PROMPTS,
+  // Suggestions prompts
+  DEFAULT_SUGGESTIONS_FEATURES_PROMPT,
+  DEFAULT_SUGGESTIONS_REFACTORING_PROMPT,
+  DEFAULT_SUGGESTIONS_SECURITY_PROMPT,
+  DEFAULT_SUGGESTIONS_PERFORMANCE_PROMPT,
+  DEFAULT_SUGGESTIONS_BASE_TEMPLATE,
+  DEFAULT_SUGGESTIONS_PROMPTS,
+  // Task Execution prompts
+  DEFAULT_TASK_PROMPT_TEMPLATE,
+  DEFAULT_IMPLEMENTATION_INSTRUCTIONS,
+  DEFAULT_PLAYWRIGHT_VERIFICATION_INSTRUCTIONS,
+  DEFAULT_LEARNING_EXTRACTION_SYSTEM_PROMPT,
+  DEFAULT_LEARNING_EXTRACTION_USER_TEMPLATE,
+  DEFAULT_PLAN_REVISION_TEMPLATE,
+  DEFAULT_CONTINUATION_AFTER_APPROVAL_TEMPLATE,
+  DEFAULT_RESUME_FEATURE_TEMPLATE,
+  DEFAULT_PROJECT_ANALYSIS_PROMPT,
+  DEFAULT_TASK_EXECUTION_PROMPTS,
+  DEFAULT_PROMPTS,
+} from './defaults.js';
+
+// Prompt merging utilities
+export {
+  mergeAutoModePrompts,
+  mergeAgentPrompts,
+  mergeBacklogPlanPrompts,
+  mergeEnhancementPrompts,
+  mergeCommitMessagePrompts,
+  mergeTitleGenerationPrompts,
+  mergeIssueValidationPrompts,
+  mergeIdeationPrompts,
+  mergeAppSpecPrompts,
+  mergeContextDescriptionPrompts,
+  mergeSuggestionsPrompts,
+  mergeTaskExecutionPrompts,
+  mergeAllPrompts,
+} from './merge.js';
+
+// Re-export resolved prompt types from @automaker/types
+export type {
+  ResolvedAutoModePrompts,
+  ResolvedAgentPrompts,
+  ResolvedBacklogPlanPrompts,
+  ResolvedEnhancementPrompts,
+  ResolvedCommitMessagePrompts,
+  ResolvedTitleGenerationPrompts,
+  ResolvedIssueValidationPrompts,
+  ResolvedIdeationPrompts,
+  ResolvedAppSpecPrompts,
+  ResolvedContextDescriptionPrompts,
+  ResolvedSuggestionsPrompts,
+  ResolvedTaskExecutionPrompts,
+} from '@automaker/types';
diff --git a/temp_repo/libs/prompts/src/merge.ts b/temp_repo/libs/prompts/src/merge.ts
new file mode 100644
index 0000000000000000000000000000000000000000..41cc5db799cc0a96b1c8c070edd3f89d5fbf594a
--- /dev/null
+++ b/temp_repo/libs/prompts/src/merge.ts
@@ -0,0 +1,338 @@
+/**
+ * Prompt Merging Utilities
+ *
+ * Merges user-customized prompts with built-in defaults.
+ * Used by services to get effective prompts at runtime.
+ *
+ * Custom prompts have an `enabled` flag - when true, the custom value is used.
+ * When false or undefined, the default is used instead.
+ */
+
+import type {
+  PromptCustomization,
+  AutoModePrompts,
+  AgentPrompts,
+  BacklogPlanPrompts,
+  EnhancementPrompts,
+  CommitMessagePrompts,
+  TitleGenerationPrompts,
+  IssueValidationPrompts,
+  IdeationPrompts,
+  AppSpecPrompts,
+  ContextDescriptionPrompts,
+  SuggestionsPrompts,
+  TaskExecutionPrompts,
+  CustomPrompt,
+  ResolvedAutoModePrompts,
+  ResolvedAgentPrompts,
+  ResolvedBacklogPlanPrompts,
+  ResolvedEnhancementPrompts,
+  ResolvedCommitMessagePrompts,
+  ResolvedTitleGenerationPrompts,
+  ResolvedIssueValidationPrompts,
+  ResolvedIdeationPrompts,
+  ResolvedAppSpecPrompts,
+  ResolvedContextDescriptionPrompts,
+  ResolvedSuggestionsPrompts,
+  ResolvedTaskExecutionPrompts,
+} from '@automaker/types';
+import {
+  DEFAULT_AUTO_MODE_PROMPTS,
+  DEFAULT_AGENT_PROMPTS,
+  DEFAULT_BACKLOG_PLAN_PROMPTS,
+  DEFAULT_ENHANCEMENT_PROMPTS,
+  DEFAULT_COMMIT_MESSAGE_PROMPTS,
+  DEFAULT_TITLE_GENERATION_PROMPTS,
+  DEFAULT_ISSUE_VALIDATION_PROMPTS,
+  DEFAULT_IDEATION_PROMPTS,
+  DEFAULT_APP_SPEC_PROMPTS,
+  DEFAULT_CONTEXT_DESCRIPTION_PROMPTS,
+  DEFAULT_SUGGESTIONS_PROMPTS,
+  DEFAULT_TASK_EXECUTION_PROMPTS,
+} from './defaults.js';
+
+/**
+ * Resolve a custom prompt to its effective string value
+ * Returns the custom value if enabled=true, otherwise returns the default
+ */
+function resolvePrompt(custom: CustomPrompt | undefined, defaultValue: string): string {
+  return custom?.enabled ? custom.value : defaultValue;
+}
+
+/**
+ * Merge custom Auto Mode prompts with defaults
+ * Custom prompts override defaults only when enabled=true
+ */
+export function mergeAutoModePrompts(custom?: AutoModePrompts): ResolvedAutoModePrompts {
+  return {
+    planningLite: resolvePrompt(custom?.planningLite, DEFAULT_AUTO_MODE_PROMPTS.planningLite),
+    planningLiteWithApproval: resolvePrompt(
+      custom?.planningLiteWithApproval,
+      DEFAULT_AUTO_MODE_PROMPTS.planningLiteWithApproval
+    ),
+    planningSpec: resolvePrompt(custom?.planningSpec, DEFAULT_AUTO_MODE_PROMPTS.planningSpec),
+    planningFull: resolvePrompt(custom?.planningFull, DEFAULT_AUTO_MODE_PROMPTS.planningFull),
+    featurePromptTemplate: resolvePrompt(
+      custom?.featurePromptTemplate,
+      DEFAULT_AUTO_MODE_PROMPTS.featurePromptTemplate
+    ),
+    followUpPromptTemplate: resolvePrompt(
+      custom?.followUpPromptTemplate,
+      DEFAULT_AUTO_MODE_PROMPTS.followUpPromptTemplate
+    ),
+    continuationPromptTemplate: resolvePrompt(
+      custom?.continuationPromptTemplate,
+      DEFAULT_AUTO_MODE_PROMPTS.continuationPromptTemplate
+    ),
+    pipelineStepPromptTemplate: resolvePrompt(
+      custom?.pipelineStepPromptTemplate,
+      DEFAULT_AUTO_MODE_PROMPTS.pipelineStepPromptTemplate
+    ),
+  };
+}
+
+/**
+ * Merge custom Agent prompts with defaults
+ * Custom prompts override defaults only when enabled=true
+ */
+export function mergeAgentPrompts(custom?: AgentPrompts): ResolvedAgentPrompts {
+  return {
+    systemPrompt: resolvePrompt(custom?.systemPrompt, DEFAULT_AGENT_PROMPTS.systemPrompt),
+  };
+}
+
+/**
+ * Merge custom Backlog Plan prompts with defaults
+ * Custom prompts override defaults only when enabled=true
+ */
+export function mergeBacklogPlanPrompts(custom?: BacklogPlanPrompts): ResolvedBacklogPlanPrompts {
+  return {
+    systemPrompt: resolvePrompt(custom?.systemPrompt, DEFAULT_BACKLOG_PLAN_PROMPTS.systemPrompt),
+    userPromptTemplate: resolvePrompt(
+      custom?.userPromptTemplate,
+      DEFAULT_BACKLOG_PLAN_PROMPTS.userPromptTemplate
+    ),
+  };
+}
+
+/**
+ * Merge custom Enhancement prompts with defaults
+ * Custom prompts override defaults only when enabled=true
+ */
+export function mergeEnhancementPrompts(custom?: EnhancementPrompts): ResolvedEnhancementPrompts {
+  return {
+    improveSystemPrompt: resolvePrompt(
+      custom?.improveSystemPrompt,
+      DEFAULT_ENHANCEMENT_PROMPTS.improveSystemPrompt
+    ),
+    technicalSystemPrompt: resolvePrompt(
+      custom?.technicalSystemPrompt,
+      DEFAULT_ENHANCEMENT_PROMPTS.technicalSystemPrompt
+    ),
+    simplifySystemPrompt: resolvePrompt(
+      custom?.simplifySystemPrompt,
+      DEFAULT_ENHANCEMENT_PROMPTS.simplifySystemPrompt
+    ),
+    acceptanceSystemPrompt: resolvePrompt(
+      custom?.acceptanceSystemPrompt,
+      DEFAULT_ENHANCEMENT_PROMPTS.acceptanceSystemPrompt
+    ),
+    uxReviewerSystemPrompt: resolvePrompt(
+      custom?.uxReviewerSystemPrompt,
+      DEFAULT_ENHANCEMENT_PROMPTS.uxReviewerSystemPrompt
+    ),
+  };
+}
+
+/**
+ * Merge custom Commit Message prompts with defaults
+ * Custom prompts override defaults only when enabled=true
+ */
+export function mergeCommitMessagePrompts(
+  custom?: CommitMessagePrompts
+): ResolvedCommitMessagePrompts {
+  return {
+    systemPrompt: resolvePrompt(custom?.systemPrompt, DEFAULT_COMMIT_MESSAGE_PROMPTS.systemPrompt),
+  };
+}
+
+/**
+ * Merge custom Title Generation prompts with defaults
+ * Custom prompts override defaults only when enabled=true
+ */
+export function mergeTitleGenerationPrompts(
+  custom?: TitleGenerationPrompts
+): ResolvedTitleGenerationPrompts {
+  return {
+    systemPrompt: resolvePrompt(
+      custom?.systemPrompt,
+      DEFAULT_TITLE_GENERATION_PROMPTS.systemPrompt
+    ),
+  };
+}
+
+/**
+ * Merge custom Issue Validation prompts with defaults
+ * Custom prompts override defaults only when enabled=true
+ */
+export function mergeIssueValidationPrompts(
+  custom?: IssueValidationPrompts
+): ResolvedIssueValidationPrompts {
+  return {
+    systemPrompt: resolvePrompt(
+      custom?.systemPrompt,
+      DEFAULT_ISSUE_VALIDATION_PROMPTS.systemPrompt
+    ),
+  };
+}
+
+/**
+ * Merge custom Ideation prompts with defaults
+ * Custom prompts override defaults only when enabled=true
+ */
+export function mergeIdeationPrompts(custom?: IdeationPrompts): ResolvedIdeationPrompts {
+  return {
+    ideationSystemPrompt: resolvePrompt(
+      custom?.ideationSystemPrompt,
+      DEFAULT_IDEATION_PROMPTS.ideationSystemPrompt
+    ),
+    suggestionsSystemPrompt: resolvePrompt(
+      custom?.suggestionsSystemPrompt,
+      DEFAULT_IDEATION_PROMPTS.suggestionsSystemPrompt
+    ),
+  };
+}
+
+/**
+ * Merge custom App Spec prompts with defaults
+ * Custom prompts override defaults only when enabled=true
+ */
+export function mergeAppSpecPrompts(custom?: AppSpecPrompts): ResolvedAppSpecPrompts {
+  return {
+    generateSpecSystemPrompt: resolvePrompt(
+      custom?.generateSpecSystemPrompt,
+      DEFAULT_APP_SPEC_PROMPTS.generateSpecSystemPrompt
+    ),
+    structuredSpecInstructions: resolvePrompt(
+      custom?.structuredSpecInstructions,
+      DEFAULT_APP_SPEC_PROMPTS.structuredSpecInstructions
+    ),
+    generateFeaturesFromSpecPrompt: resolvePrompt(
+      custom?.generateFeaturesFromSpecPrompt,
+      DEFAULT_APP_SPEC_PROMPTS.generateFeaturesFromSpecPrompt
+    ),
+  };
+}
+
+/**
+ * Merge custom Context Description prompts with defaults
+ * Custom prompts override defaults only when enabled=true
+ */
+export function mergeContextDescriptionPrompts(
+  custom?: ContextDescriptionPrompts
+): ResolvedContextDescriptionPrompts {
+  return {
+    describeFilePrompt: resolvePrompt(
+      custom?.describeFilePrompt,
+      DEFAULT_CONTEXT_DESCRIPTION_PROMPTS.describeFilePrompt
+    ),
+    describeImagePrompt: resolvePrompt(
+      custom?.describeImagePrompt,
+      DEFAULT_CONTEXT_DESCRIPTION_PROMPTS.describeImagePrompt
+    ),
+  };
+}
+
+/**
+ * Merge custom Suggestions prompts with defaults
+ * Custom prompts override defaults only when enabled=true
+ */
+export function mergeSuggestionsPrompts(custom?: SuggestionsPrompts): ResolvedSuggestionsPrompts {
+  return {
+    featuresPrompt: resolvePrompt(
+      custom?.featuresPrompt,
+      DEFAULT_SUGGESTIONS_PROMPTS.featuresPrompt
+    ),
+    refactoringPrompt: resolvePrompt(
+      custom?.refactoringPrompt,
+      DEFAULT_SUGGESTIONS_PROMPTS.refactoringPrompt
+    ),
+    securityPrompt: resolvePrompt(
+      custom?.securityPrompt,
+      DEFAULT_SUGGESTIONS_PROMPTS.securityPrompt
+    ),
+    performancePrompt: resolvePrompt(
+      custom?.performancePrompt,
+      DEFAULT_SUGGESTIONS_PROMPTS.performancePrompt
+    ),
+    baseTemplate: resolvePrompt(custom?.baseTemplate, DEFAULT_SUGGESTIONS_PROMPTS.baseTemplate),
+  };
+}
+
+/**
+ * Merge custom Task Execution prompts with defaults
+ * Custom prompts override defaults only when enabled=true
+ */
+export function mergeTaskExecutionPrompts(
+  custom?: TaskExecutionPrompts
+): ResolvedTaskExecutionPrompts {
+  return {
+    taskPromptTemplate: resolvePrompt(
+      custom?.taskPromptTemplate,
+      DEFAULT_TASK_EXECUTION_PROMPTS.taskPromptTemplate
+    ),
+    implementationInstructions: resolvePrompt(
+      custom?.implementationInstructions,
+      DEFAULT_TASK_EXECUTION_PROMPTS.implementationInstructions
+    ),
+    playwrightVerificationInstructions: resolvePrompt(
+      custom?.playwrightVerificationInstructions,
+      DEFAULT_TASK_EXECUTION_PROMPTS.playwrightVerificationInstructions
+    ),
+    learningExtractionSystemPrompt: resolvePrompt(
+      custom?.learningExtractionSystemPrompt,
+      DEFAULT_TASK_EXECUTION_PROMPTS.learningExtractionSystemPrompt
+    ),
+    learningExtractionUserPromptTemplate: resolvePrompt(
+      custom?.learningExtractionUserPromptTemplate,
+      DEFAULT_TASK_EXECUTION_PROMPTS.learningExtractionUserPromptTemplate
+    ),
+    planRevisionTemplate: resolvePrompt(
+      custom?.planRevisionTemplate,
+      DEFAULT_TASK_EXECUTION_PROMPTS.planRevisionTemplate
+    ),
+    continuationAfterApprovalTemplate: resolvePrompt(
+      custom?.continuationAfterApprovalTemplate,
+      DEFAULT_TASK_EXECUTION_PROMPTS.continuationAfterApprovalTemplate
+    ),
+    resumeFeatureTemplate: resolvePrompt(
+      custom?.resumeFeatureTemplate,
+      DEFAULT_TASK_EXECUTION_PROMPTS.resumeFeatureTemplate
+    ),
+    projectAnalysisPrompt: resolvePrompt(
+      custom?.projectAnalysisPrompt,
+      DEFAULT_TASK_EXECUTION_PROMPTS.projectAnalysisPrompt
+    ),
+  };
+}
+
+/**
+ * Merge all custom prompts with defaults
+ * Returns a complete PromptCustomization with all fields populated
+ */
+export function mergeAllPrompts(custom?: PromptCustomization) {
+  return {
+    autoMode: mergeAutoModePrompts(custom?.autoMode),
+    agent: mergeAgentPrompts(custom?.agent),
+    backlogPlan: mergeBacklogPlanPrompts(custom?.backlogPlan),
+    enhancement: mergeEnhancementPrompts(custom?.enhancement),
+    commitMessage: mergeCommitMessagePrompts(custom?.commitMessage),
+    titleGeneration: mergeTitleGenerationPrompts(custom?.titleGeneration),
+    issueValidation: mergeIssueValidationPrompts(custom?.issueValidation),
+    ideation: mergeIdeationPrompts(custom?.ideation),
+    appSpec: mergeAppSpecPrompts(custom?.appSpec),
+    contextDescription: mergeContextDescriptionPrompts(custom?.contextDescription),
+    suggestions: mergeSuggestionsPrompts(custom?.suggestions),
+    taskExecution: mergeTaskExecutionPrompts(custom?.taskExecution),
+  };
+}
diff --git a/temp_repo/libs/prompts/tests/enhancement.test.ts b/temp_repo/libs/prompts/tests/enhancement.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5177a0eadd26a3caaeab5685eedf23f6789cc862
--- /dev/null
+++ b/temp_repo/libs/prompts/tests/enhancement.test.ts
@@ -0,0 +1,579 @@
+import { describe, it, expect } from 'vitest';
+import {
+  getEnhancementPrompt,
+  getSystemPrompt,
+  getExamples,
+  buildUserPrompt,
+  isValidEnhancementMode,
+  getAvailableEnhancementModes,
+  IMPROVE_SYSTEM_PROMPT,
+  TECHNICAL_SYSTEM_PROMPT,
+  SIMPLIFY_SYSTEM_PROMPT,
+  ACCEPTANCE_SYSTEM_PROMPT,
+  UX_REVIEWER_SYSTEM_PROMPT,
+  IMPROVE_EXAMPLES,
+  TECHNICAL_EXAMPLES,
+  SIMPLIFY_EXAMPLES,
+  ACCEPTANCE_EXAMPLES,
+  UX_REVIEWER_EXAMPLES,
+} from '../src/enhancement.js';
+
+describe('enhancement.ts', () => {
+  describe('System Prompt Constants', () => {
+    it('should export IMPROVE_SYSTEM_PROMPT', () => {
+      expect(IMPROVE_SYSTEM_PROMPT).toBeDefined();
+      expect(typeof IMPROVE_SYSTEM_PROMPT).toBe('string');
+      expect(IMPROVE_SYSTEM_PROMPT).toContain('vague, unclear');
+      expect(IMPROVE_SYSTEM_PROMPT).toContain('actionable');
+    });
+
+    it('should export TECHNICAL_SYSTEM_PROMPT', () => {
+      expect(TECHNICAL_SYSTEM_PROMPT).toBeDefined();
+      expect(typeof TECHNICAL_SYSTEM_PROMPT).toBe('string');
+      expect(TECHNICAL_SYSTEM_PROMPT).toContain('technical');
+      expect(TECHNICAL_SYSTEM_PROMPT).toContain('implementation');
+    });
+
+    it('should export SIMPLIFY_SYSTEM_PROMPT', () => {
+      expect(SIMPLIFY_SYSTEM_PROMPT).toBeDefined();
+      expect(typeof SIMPLIFY_SYSTEM_PROMPT).toBe('string');
+      expect(SIMPLIFY_SYSTEM_PROMPT).toContain('verbose');
+      expect(SIMPLIFY_SYSTEM_PROMPT).toContain('concise');
+    });
+
+    it('should export ACCEPTANCE_SYSTEM_PROMPT', () => {
+      expect(ACCEPTANCE_SYSTEM_PROMPT).toBeDefined();
+      expect(typeof ACCEPTANCE_SYSTEM_PROMPT).toBe('string');
+      expect(ACCEPTANCE_SYSTEM_PROMPT).toContain('acceptance criteria');
+      expect(ACCEPTANCE_SYSTEM_PROMPT).toContain('testable');
+    });
+
+    it('should export UX_REVIEWER_SYSTEM_PROMPT', () => {
+      expect(UX_REVIEWER_SYSTEM_PROMPT).toBeDefined();
+      expect(typeof UX_REVIEWER_SYSTEM_PROMPT).toBe('string');
+      expect(UX_REVIEWER_SYSTEM_PROMPT).toContain('User Experience');
+    });
+  });
+
+  describe('Examples Constants', () => {
+    it('should export IMPROVE_EXAMPLES with valid structure', () => {
+      expect(IMPROVE_EXAMPLES).toBeDefined();
+      expect(Array.isArray(IMPROVE_EXAMPLES)).toBe(true);
+      expect(IMPROVE_EXAMPLES.length).toBeGreaterThan(0);
+
+      IMPROVE_EXAMPLES.forEach((example) => {
+        expect(example).toHaveProperty('input');
+        expect(example).toHaveProperty('output');
+        expect(typeof example.input).toBe('string');
+        expect(typeof example.output).toBe('string');
+      });
+    });
+
+    it('should export TECHNICAL_EXAMPLES with valid structure', () => {
+      expect(TECHNICAL_EXAMPLES).toBeDefined();
+      expect(Array.isArray(TECHNICAL_EXAMPLES)).toBe(true);
+      expect(TECHNICAL_EXAMPLES.length).toBeGreaterThan(0);
+
+      TECHNICAL_EXAMPLES.forEach((example) => {
+        expect(example).toHaveProperty('input');
+        expect(example).toHaveProperty('output');
+        expect(typeof example.input).toBe('string');
+        expect(typeof example.output).toBe('string');
+      });
+    });
+
+    it('should export SIMPLIFY_EXAMPLES with valid structure', () => {
+      expect(SIMPLIFY_EXAMPLES).toBeDefined();
+      expect(Array.isArray(SIMPLIFY_EXAMPLES)).toBe(true);
+      expect(SIMPLIFY_EXAMPLES.length).toBeGreaterThan(0);
+
+      SIMPLIFY_EXAMPLES.forEach((example) => {
+        expect(example).toHaveProperty('input');
+        expect(example).toHaveProperty('output');
+        expect(typeof example.input).toBe('string');
+        expect(typeof example.output).toBe('string');
+      });
+    });
+
+    it('should export ACCEPTANCE_EXAMPLES with valid structure', () => {
+      expect(ACCEPTANCE_EXAMPLES).toBeDefined();
+      expect(Array.isArray(ACCEPTANCE_EXAMPLES)).toBe(true);
+      expect(ACCEPTANCE_EXAMPLES.length).toBeGreaterThan(0);
+
+      ACCEPTANCE_EXAMPLES.forEach((example) => {
+        expect(example).toHaveProperty('input');
+        expect(example).toHaveProperty('output');
+        expect(typeof example.input).toBe('string');
+        expect(typeof example.output).toBe('string');
+      });
+    });
+
+    it('should export UX_REVIEWER_EXAMPLES with valid structure', () => {
+      expect(UX_REVIEWER_EXAMPLES).toBeDefined();
+      expect(Array.isArray(UX_REVIEWER_EXAMPLES)).toBe(true);
+      expect(UX_REVIEWER_EXAMPLES.length).toBeGreaterThan(0);
+
+      UX_REVIEWER_EXAMPLES.forEach((example) => {
+        expect(example).toHaveProperty('input');
+        expect(example).toHaveProperty('output');
+        expect(typeof example.input).toBe('string');
+        expect(typeof example.output).toBe('string');
+      });
+    });
+
+    it('should have shorter outputs in SIMPLIFY_EXAMPLES', () => {
+      SIMPLIFY_EXAMPLES.forEach((example) => {
+        // Simplify examples should have shorter output than input
+        // (though not always strictly enforced, it's the general pattern)
+        expect(example.output).toBeDefined();
+        expect(example.output.length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('getEnhancementPrompt', () => {
+    it("should return prompt config for 'improve' mode", () => {
+      const result = getEnhancementPrompt('improve');
+
+      expect(result).toHaveProperty('systemPrompt');
+      expect(result).toHaveProperty('description');
+      expect(result.systemPrompt).toBe(IMPROVE_SYSTEM_PROMPT);
+      expect(result.description).toContain('vague');
+      expect(result.description).toContain('actionable');
+    });
+
+    it("should return prompt config for 'technical' mode", () => {
+      const result = getEnhancementPrompt('technical');
+
+      expect(result).toHaveProperty('systemPrompt');
+      expect(result).toHaveProperty('description');
+      expect(result.systemPrompt).toBe(TECHNICAL_SYSTEM_PROMPT);
+      expect(result.description).toContain('implementation');
+    });
+
+    it("should return prompt config for 'simplify' mode", () => {
+      const result = getEnhancementPrompt('simplify');
+
+      expect(result).toHaveProperty('systemPrompt');
+      expect(result).toHaveProperty('description');
+      expect(result.systemPrompt).toBe(SIMPLIFY_SYSTEM_PROMPT);
+      expect(result.description).toContain('verbose');
+    });
+
+    it("should return prompt config for 'acceptance' mode", () => {
+      const result = getEnhancementPrompt('acceptance');
+
+      expect(result).toHaveProperty('systemPrompt');
+      expect(result).toHaveProperty('description');
+      expect(result.systemPrompt).toBe(ACCEPTANCE_SYSTEM_PROMPT);
+      expect(result.description).toContain('acceptance');
+    });
+
+    it("should return prompt config for 'ux-reviewer' mode", () => {
+      const result = getEnhancementPrompt('ux-reviewer');
+
+      expect(result).toHaveProperty('systemPrompt');
+      expect(result).toHaveProperty('description');
+      expect(result.systemPrompt).toBe(UX_REVIEWER_SYSTEM_PROMPT);
+      expect(result.description.toLowerCase()).toContain('user experience');
+    });
+
+    it('should handle uppercase mode', () => {
+      const result = getEnhancementPrompt('IMPROVE');
+
+      expect(result.systemPrompt).toBe(IMPROVE_SYSTEM_PROMPT);
+    });
+
+    it('should handle mixed case mode', () => {
+      const result = getEnhancementPrompt('TeChnIcaL');
+
+      expect(result.systemPrompt).toBe(TECHNICAL_SYSTEM_PROMPT);
+    });
+
+    it("should fall back to 'improve' for invalid mode", () => {
+      const result = getEnhancementPrompt('invalid-mode');
+
+      expect(result.systemPrompt).toBe(IMPROVE_SYSTEM_PROMPT);
+      expect(result.description).toContain('vague');
+    });
+
+    it("should fall back to 'improve' for empty string", () => {
+      const result = getEnhancementPrompt('');
+
+      expect(result.systemPrompt).toBe(IMPROVE_SYSTEM_PROMPT);
+    });
+  });
+
+  describe('getSystemPrompt', () => {
+    it("should return IMPROVE_SYSTEM_PROMPT for 'improve'", () => {
+      const result = getSystemPrompt('improve');
+      expect(result).toBe(IMPROVE_SYSTEM_PROMPT);
+    });
+
+    it("should return TECHNICAL_SYSTEM_PROMPT for 'technical'", () => {
+      const result = getSystemPrompt('technical');
+      expect(result).toBe(TECHNICAL_SYSTEM_PROMPT);
+    });
+
+    it("should return SIMPLIFY_SYSTEM_PROMPT for 'simplify'", () => {
+      const result = getSystemPrompt('simplify');
+      expect(result).toBe(SIMPLIFY_SYSTEM_PROMPT);
+    });
+
+    it("should return ACCEPTANCE_SYSTEM_PROMPT for 'acceptance'", () => {
+      const result = getSystemPrompt('acceptance');
+      expect(result).toBe(ACCEPTANCE_SYSTEM_PROMPT);
+    });
+
+    it("should return UX_REVIEWER_SYSTEM_PROMPT for 'ux-reviewer'", () => {
+      const result = getSystemPrompt('ux-reviewer');
+      expect(result).toBe(UX_REVIEWER_SYSTEM_PROMPT);
+    });
+  });
+
+  describe('getExamples', () => {
+    it("should return IMPROVE_EXAMPLES for 'improve'", () => {
+      const result = getExamples('improve');
+      expect(result).toBe(IMPROVE_EXAMPLES);
+      expect(result.length).toBeGreaterThan(0);
+    });
+
+    it("should return TECHNICAL_EXAMPLES for 'technical'", () => {
+      const result = getExamples('technical');
+      expect(result).toBe(TECHNICAL_EXAMPLES);
+      expect(result.length).toBeGreaterThan(0);
+    });
+
+    it("should return SIMPLIFY_EXAMPLES for 'simplify'", () => {
+      const result = getExamples('simplify');
+      expect(result).toBe(SIMPLIFY_EXAMPLES);
+      expect(result.length).toBeGreaterThan(0);
+    });
+
+    it("should return ACCEPTANCE_EXAMPLES for 'acceptance'", () => {
+      const result = getExamples('acceptance');
+      expect(result).toBe(ACCEPTANCE_EXAMPLES);
+      expect(result.length).toBeGreaterThan(0);
+    });
+
+    it("should return UX_REVIEWER_EXAMPLES for 'ux-reviewer'", () => {
+      const result = getExamples('ux-reviewer');
+      expect(result).toBe(UX_REVIEWER_EXAMPLES);
+      expect(result.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('buildUserPrompt', () => {
+    const testText = 'Add a login feature';
+
+    describe('with examples (default)', () => {
+      it("should include examples by default for 'improve' mode", () => {
+        const result = buildUserPrompt('improve', testText);
+
+        expect(result).toContain('Here are some examples');
+        expect(result).toContain('Example 1:');
+        expect(result).toContain(IMPROVE_EXAMPLES[0].input);
+        expect(result).toContain(IMPROVE_EXAMPLES[0].output);
+        expect(result).toContain(testText);
+      });
+
+      it("should include examples by default for 'technical' mode", () => {
+        const result = buildUserPrompt('technical', testText);
+
+        expect(result).toContain('Here are examples of the additional details section');
+        expect(result).toContain('Example 1:');
+        expect(result).toContain(TECHNICAL_EXAMPLES[0].input);
+        expect(result).toContain(testText);
+      });
+
+      it('should include examples when explicitly set to true', () => {
+        const result = buildUserPrompt('improve', testText, true);
+
+        expect(result).toContain('Here are some examples');
+        expect(result).toContain(testText);
+      });
+
+      it('should format all examples with numbered labels', () => {
+        const result = buildUserPrompt('improve', testText);
+
+        IMPROVE_EXAMPLES.forEach((_, index) => {
+          expect(result).toContain(`Example ${index + 1}:`);
+        });
+      });
+
+      it('should separate examples with dividers', () => {
+        const result = buildUserPrompt('improve', testText);
+
+        // Count dividers (---) - should be (examples.length) + 1
+        const dividerCount = (result.match(/---/g) || []).length;
+        expect(dividerCount).toBe(IMPROVE_EXAMPLES.length);
+      });
+
+      it("should include 'Please enhance' before user text", () => {
+        const result = buildUserPrompt('improve', testText);
+
+        expect(result).toContain('Please enhance the following task description:');
+        expect(result).toContain(testText);
+      });
+    });
+
+    describe('without examples', () => {
+      it('should not include examples when includeExamples is false', () => {
+        const result = buildUserPrompt('improve', testText, false);
+
+        expect(result).not.toContain('Here are some examples');
+        expect(result).not.toContain('Example 1:');
+        expect(result).not.toContain(IMPROVE_EXAMPLES[0].input);
+      });
+
+      it('should have simple prompt without examples', () => {
+        const result = buildUserPrompt('improve', testText, false);
+
+        expect(result).toBe(`Please enhance the following task description:\n\n${testText}`);
+      });
+
+      it('should preserve user text without examples', () => {
+        const result = buildUserPrompt('technical', testText, false);
+
+        expect(result).toContain(testText);
+        expect(result).toContain('Generate ONLY the additional details');
+      });
+
+      it('should use additive phrasing for ux-reviewer mode', () => {
+        const result = buildUserPrompt('ux-reviewer', testText, true);
+
+        expect(result).toContain(testText);
+        expect(result).toContain('Here are examples of the additional details section');
+      });
+    });
+
+    describe('text formatting', () => {
+      it('should preserve multiline text', () => {
+        const multilineText = 'Line 1\nLine 2\nLine 3';
+        const result = buildUserPrompt('improve', multilineText);
+
+        expect(result).toContain(multilineText);
+      });
+
+      it('should handle empty text', () => {
+        const result = buildUserPrompt('improve', '');
+
+        // With examples by default, it should contain "Please enhance"
+        expect(result).toContain('Please enhance the following task description:');
+        expect(result).toContain('Here are some examples');
+      });
+
+      it('should handle whitespace-only text', () => {
+        const result = buildUserPrompt('improve', '   ');
+
+        expect(result).toContain('   ');
+      });
+
+      it('should handle special characters in text', () => {
+        const specialText = 'Test <html> & "quotes" \'apostrophes\'';
+        const result = buildUserPrompt('improve', specialText);
+
+        expect(result).toContain(specialText);
+      });
+    });
+
+    describe('all modes', () => {
+      it('should work for all valid enhancement modes', () => {
+        const modes: Array<'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'> = [
+          'improve',
+          'technical',
+          'simplify',
+          'acceptance',
+          'ux-reviewer',
+        ];
+
+        modes.forEach((mode) => {
+          const result = buildUserPrompt(mode, testText);
+
+          expect(result).toBeDefined();
+          expect(result).toContain(testText);
+          expect(result.length).toBeGreaterThan(testText.length);
+        });
+      });
+    });
+  });
+
+  describe('isValidEnhancementMode', () => {
+    it("should return true for 'improve'", () => {
+      expect(isValidEnhancementMode('improve')).toBe(true);
+    });
+
+    it("should return true for 'technical'", () => {
+      expect(isValidEnhancementMode('technical')).toBe(true);
+    });
+
+    it("should return true for 'simplify'", () => {
+      expect(isValidEnhancementMode('simplify')).toBe(true);
+    });
+
+    it("should return true for 'acceptance'", () => {
+      expect(isValidEnhancementMode('acceptance')).toBe(true);
+    });
+
+    it("should return true for 'ux-reviewer'", () => {
+      expect(isValidEnhancementMode('ux-reviewer')).toBe(true);
+    });
+
+    it('should return false for invalid mode', () => {
+      expect(isValidEnhancementMode('invalid')).toBe(false);
+    });
+
+    it('should return false for empty string', () => {
+      expect(isValidEnhancementMode('')).toBe(false);
+    });
+
+    it('should return false for uppercase mode', () => {
+      // Should be case-sensitive since we check object keys directly
+      expect(isValidEnhancementMode('IMPROVE')).toBe(false);
+    });
+
+    it('should return false for mixed case mode', () => {
+      expect(isValidEnhancementMode('ImProve')).toBe(false);
+    });
+
+    it('should return false for partial mode names', () => {
+      expect(isValidEnhancementMode('impro')).toBe(false);
+      expect(isValidEnhancementMode('tech')).toBe(false);
+    });
+
+    it('should return false for mode with extra characters', () => {
+      expect(isValidEnhancementMode('improve ')).toBe(false);
+      expect(isValidEnhancementMode(' improve')).toBe(false);
+    });
+  });
+
+  describe('getAvailableEnhancementModes', () => {
+    it('should return array of all enhancement modes', () => {
+      const modes = getAvailableEnhancementModes();
+
+      expect(Array.isArray(modes)).toBe(true);
+      expect(modes.length).toBe(5);
+    });
+
+    it('should include all valid modes', () => {
+      const modes = getAvailableEnhancementModes();
+
+      expect(modes).toContain('improve');
+      expect(modes).toContain('technical');
+      expect(modes).toContain('simplify');
+      expect(modes).toContain('acceptance');
+      expect(modes).toContain('ux-reviewer');
+    });
+
+    it('should return modes in consistent order', () => {
+      const modes1 = getAvailableEnhancementModes();
+      const modes2 = getAvailableEnhancementModes();
+
+      expect(modes1).toEqual(modes2);
+    });
+
+    it('should return all valid modes that pass isValidEnhancementMode', () => {
+      const modes = getAvailableEnhancementModes();
+
+      modes.forEach((mode) => {
+        expect(isValidEnhancementMode(mode)).toBe(true);
+      });
+    });
+  });
+
+  describe('Integration tests', () => {
+    it('should work together: getEnhancementPrompt + buildUserPrompt', () => {
+      const mode = 'improve';
+      const text = 'Add search feature';
+
+      const { systemPrompt, description } = getEnhancementPrompt(mode);
+      const userPrompt = buildUserPrompt(mode, text);
+
+      expect(systemPrompt).toBe(IMPROVE_SYSTEM_PROMPT);
+      expect(description).toBeDefined();
+      expect(userPrompt).toContain(text);
+    });
+
+    it('should handle complete enhancement workflow', () => {
+      const availableModes = getAvailableEnhancementModes();
+
+      expect(availableModes.length).toBeGreaterThan(0);
+
+      availableModes.forEach((mode) => {
+        const isValid = isValidEnhancementMode(mode);
+        expect(isValid).toBe(true);
+
+        const systemPrompt = getSystemPrompt(mode);
+        expect(systemPrompt).toBeDefined();
+        expect(systemPrompt.length).toBeGreaterThan(0);
+
+        const examples = getExamples(mode);
+        expect(Array.isArray(examples)).toBe(true);
+        expect(examples.length).toBeGreaterThan(0);
+
+        const userPrompt = buildUserPrompt(mode, 'test description');
+        expect(userPrompt).toContain('test description');
+      });
+    });
+
+    it('should provide consistent data across functions', () => {
+      const mode = 'technical';
+
+      const promptConfig = getEnhancementPrompt(mode);
+      const systemPrompt = getSystemPrompt(mode);
+      const examples = getExamples(mode);
+
+      expect(promptConfig.systemPrompt).toBe(systemPrompt);
+      expect(examples).toBe(TECHNICAL_EXAMPLES);
+    });
+  });
+
+  describe('Examples content validation', () => {
+    it('IMPROVE_EXAMPLES should demonstrate improvement', () => {
+      IMPROVE_EXAMPLES.forEach((example) => {
+        // Output should be longer and more detailed than input
+        expect(example.output.length).toBeGreaterThan(example.input.length);
+        // Input should be brief/vague
+        expect(example.input.length).toBeLessThan(100);
+      });
+    });
+
+    it('TECHNICAL_EXAMPLES should contain technical terms', () => {
+      const technicalTerms = [
+        'API',
+        'endpoint',
+        'component',
+        'database',
+        'frontend',
+        'backend',
+        'validation',
+        'schema',
+        'React',
+        'GET',
+        'PUT',
+        'POST',
+      ];
+
+      TECHNICAL_EXAMPLES.forEach((example) => {
+        const hasAnyTechnicalTerm = technicalTerms.some((term) => example.output.includes(term));
+        expect(hasAnyTechnicalTerm).toBe(true);
+      });
+    });
+
+    it('ACCEPTANCE_EXAMPLES should contain acceptance criteria format', () => {
+      ACCEPTANCE_EXAMPLES.forEach((example) => {
+        // Should contain numbered criteria or Given-When-Then format
+        const hasAcceptanceCriteria =
+          example.output.includes('Acceptance Criteria') || example.output.match(/\d+\./g);
+        expect(hasAcceptanceCriteria).toBeTruthy();
+
+        // Should contain Given-When-Then format
+        const hasGWT =
+          example.output.includes('Given') &&
+          example.output.includes('when') &&
+          example.output.includes('then');
+        expect(hasGWT).toBe(true);
+      });
+    });
+  });
+});
diff --git a/temp_repo/libs/prompts/tsconfig.json b/temp_repo/libs/prompts/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..f677f8d5ebc071b18ab8302e1ef128243ebc2b3c
--- /dev/null
+++ b/temp_repo/libs/prompts/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/temp_repo/libs/prompts/vitest.config.ts b/temp_repo/libs/prompts/vitest.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d61b462a1fc32028abeb6b63ceffa39dc3ab5a0a
--- /dev/null
+++ b/temp_repo/libs/prompts/vitest.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    name: 'prompts',
+    globals: true,
+    environment: 'node',
+    include: ['tests/**/*.test.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      include: ['src/**/*.ts'],
+      exclude: ['src/**/*.d.ts', 'src/index.ts'],
+      thresholds: {
+        lines: 90,
+        functions: 95,
+        branches: 85,
+        statements: 90,
+      },
+    },
+  },
+});
diff --git a/temp_repo/libs/spec-parser/package.json b/temp_repo/libs/spec-parser/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..4d003f7f1c33ec7a85d6c58a50b7c14e236b2d87
--- /dev/null
+++ b/temp_repo/libs/spec-parser/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@automaker/spec-parser",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "XML spec parser for AutoMaker - parses and generates app_spec.txt XML",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "keywords": [
+    "automaker",
+    "spec-parser",
+    "xml"
+  ],
+  "author": "AutoMaker Team",
+  "license": "SEE LICENSE IN LICENSE",
+  "engines": {
+    "node": ">=22.0.0 <23.0.0"
+  },
+  "dependencies": {
+    "@automaker/types": "1.0.0",
+    "fast-xml-parser": "^5.3.3"
+  },
+  "devDependencies": {
+    "@types/node": "22.19.3",
+    "typescript": "5.9.3",
+    "vitest": "4.0.16"
+  }
+}
diff --git a/temp_repo/libs/spec-parser/src/index.ts b/temp_repo/libs/spec-parser/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..37fb922116c2f6342450e97d2b0ed32cbb1dc6a7
--- /dev/null
+++ b/temp_repo/libs/spec-parser/src/index.ts
@@ -0,0 +1,26 @@
+/**
+ * @automaker/spec-parser
+ *
+ * XML spec parser for AutoMaker - parses and generates app_spec.txt XML.
+ * This package provides utilities for:
+ * - Parsing XML spec content into SpecOutput objects
+ * - Converting SpecOutput objects back to XML
+ * - Validating spec data
+ */
+
+// Re-export types from @automaker/types for convenience
+export type { SpecOutput } from '@automaker/types';
+
+// XML utilities
+export { escapeXml, unescapeXml, extractXmlSection, extractXmlElements } from './xml-utils.js';
+
+// XML to Spec parsing
+export { xmlToSpec } from './xml-to-spec.js';
+export type { ParseResult } from './xml-to-spec.js';
+
+// Spec to XML conversion
+export { specToXml } from './spec-to-xml.js';
+
+// Validation
+export { validateSpec, isValidSpecXml } from './validate.js';
+export type { ValidationResult } from './validate.js';
diff --git a/temp_repo/libs/spec-parser/src/spec-to-xml.ts b/temp_repo/libs/spec-parser/src/spec-to-xml.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c79a7a38417a16f359346934f9e171302cfd3000
--- /dev/null
+++ b/temp_repo/libs/spec-parser/src/spec-to-xml.ts
@@ -0,0 +1,88 @@
+/**
+ * SpecOutput to XML converter.
+ * Converts a structured SpecOutput object back to XML format.
+ */
+
+import type { SpecOutput } from '@automaker/types';
+import { escapeXml } from './xml-utils.js';
+
+/**
+ * Convert structured spec output to XML format.
+ *
+ * @param spec - The SpecOutput object to convert
+ * @returns XML string formatted for app_spec.txt
+ */
+export function specToXml(spec: SpecOutput): string {
+  const indent = '  ';
+
+  let xml = `<?xml version="1.0" encoding="UTF-8"?>
+<project_specification>
+${indent}<project_name>${escapeXml(spec.project_name)}</project_name>
+
+${indent}<overview>
+${indent}${indent}${escapeXml(spec.overview)}
+${indent}</overview>
+
+${indent}<technology_stack>
+${spec.technology_stack.map((t) => `${indent}${indent}<technology>${escapeXml(t)}</technology>`).join('\n')}
+${indent}</technology_stack>
+
+${indent}<core_capabilities>
+${spec.core_capabilities.map((c) => `${indent}${indent}<capability>${escapeXml(c)}</capability>`).join('\n')}
+${indent}</core_capabilities>
+
+${indent}<implemented_features>
+${spec.implemented_features
+  .map(
+    (f) => `${indent}${indent}<feature>
+${indent}${indent}${indent}<name>${escapeXml(f.name)}</name>
+${indent}${indent}${indent}<description>${escapeXml(f.description)}</description>${
+      f.file_locations && f.file_locations.length > 0
+        ? `\n${indent}${indent}${indent}<file_locations>
+${f.file_locations.map((loc) => `${indent}${indent}${indent}${indent}<location>${escapeXml(loc)}</location>`).join('\n')}
+${indent}${indent}${indent}</file_locations>`
+        : ''
+    }
+${indent}${indent}</feature>`
+  )
+  .join('\n')}
+${indent}</implemented_features>`;
+
+  // Optional sections
+  if (spec.additional_requirements && spec.additional_requirements.length > 0) {
+    xml += `
+
+${indent}<additional_requirements>
+${spec.additional_requirements.map((r) => `${indent}${indent}<requirement>${escapeXml(r)}</requirement>`).join('\n')}
+${indent}</additional_requirements>`;
+  }
+
+  if (spec.development_guidelines && spec.development_guidelines.length > 0) {
+    xml += `
+
+${indent}<development_guidelines>
+${spec.development_guidelines.map((g) => `${indent}${indent}<guideline>${escapeXml(g)}</guideline>`).join('\n')}
+${indent}</development_guidelines>`;
+  }
+
+  if (spec.implementation_roadmap && spec.implementation_roadmap.length > 0) {
+    xml += `
+
+${indent}<implementation_roadmap>
+${spec.implementation_roadmap
+  .map(
+    (r) => `${indent}${indent}<phase>
+${indent}${indent}${indent}<name>${escapeXml(r.phase)}</name>
+${indent}${indent}${indent}<status>${escapeXml(r.status)}</status>
+${indent}${indent}${indent}<description>${escapeXml(r.description)}</description>
+${indent}${indent}</phase>`
+  )
+  .join('\n')}
+${indent}</implementation_roadmap>`;
+  }
+
+  xml += `
+</project_specification>`;
+
+  return xml;
+}
diff --git a/temp_repo/libs/spec-parser/src/validate.ts b/temp_repo/libs/spec-parser/src/validate.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0d74dcd76b65bbe1f1b4cb0bcd4f0294e686dbbd
--- /dev/null
+++ b/temp_repo/libs/spec-parser/src/validate.ts
@@ -0,0 +1,143 @@
+/**
+ * Validation utilities for SpecOutput objects.
+ */
+
+import type { SpecOutput } from '@automaker/types';
+
+/**
+ * Validation result containing errors if any.
+ */
+export interface ValidationResult {
+  valid: boolean;
+  errors: string[];
+}
+
+/**
+ * Validate a SpecOutput object for required fields and data integrity.
+ *
+ * @param spec - The SpecOutput object to validate
+ * @returns ValidationResult with errors if validation fails
+ */
+export function validateSpec(spec: SpecOutput | null | undefined): ValidationResult {
+  const errors: string[] = [];
+
+  if (!spec) {
+    return { valid: false, errors: ['Spec is null or undefined'] };
+  }
+
+  // Required string fields
+  if (!spec.project_name || typeof spec.project_name !== 'string') {
+    errors.push('project_name is required and must be a string');
+  } else if (spec.project_name.trim().length === 0) {
+    errors.push('project_name cannot be empty');
+  }
+
+  if (!spec.overview || typeof spec.overview !== 'string') {
+    errors.push('overview is required and must be a string');
+  } else if (spec.overview.trim().length === 0) {
+    errors.push('overview cannot be empty');
+  }
+
+  // Required array fields
+  if (!Array.isArray(spec.technology_stack)) {
+    errors.push('technology_stack is required and must be an array');
+  } else if (spec.technology_stack.length === 0) {
+    errors.push('technology_stack must have at least one item');
+  } else if (spec.technology_stack.some((t) => typeof t !== 'string' || t.trim() === '')) {
+    errors.push('technology_stack items must be non-empty strings');
+  }
+
+  if (!Array.isArray(spec.core_capabilities)) {
+    errors.push('core_capabilities is required and must be an array');
+  } else if (spec.core_capabilities.length === 0) {
+    errors.push('core_capabilities must have at least one item');
+  } else if (spec.core_capabilities.some((c) => typeof c !== 'string' || c.trim() === '')) {
+    errors.push('core_capabilities items must be non-empty strings');
+  }
+
+  // Implemented features
+  if (!Array.isArray(spec.implemented_features)) {
+    errors.push('implemented_features is required and must be an array');
+  } else {
+    spec.implemented_features.forEach((f, i) => {
+      if (!f.name || typeof f.name !== 'string' || f.name.trim() === '') {
+        errors.push(`implemented_features[${i}].name is required and must be a non-empty string`);
+      }
+      if (!f.description || typeof f.description !== 'string') {
+        errors.push(`implemented_features[${i}].description is required and must be a string`);
+      }
+      if (f.file_locations !== undefined) {
+        if (!Array.isArray(f.file_locations)) {
+          errors.push(`implemented_features[${i}].file_locations must be an array if provided`);
+        } else if (f.file_locations.some((loc) => typeof loc !== 'string' || loc.trim() === '')) {
+          errors.push(`implemented_features[${i}].file_locations items must be non-empty strings`);
+        }
+      }
+    });
+  }
+
+  // Optional array fields
+  if (spec.additional_requirements !== undefined) {
+    if (!Array.isArray(spec.additional_requirements)) {
+      errors.push('additional_requirements must be an array if provided');
+    } else if (spec.additional_requirements.some((r) => typeof r !== 'string' || r.trim() === '')) {
+      errors.push('additional_requirements items must be non-empty strings');
+    }
+  }
+
+  if (spec.development_guidelines !== undefined) {
+    if (!Array.isArray(spec.development_guidelines)) {
+      errors.push('development_guidelines must be an array if provided');
+    } else if (spec.development_guidelines.some((g) => typeof g !== 'string' || g.trim() === '')) {
+      errors.push('development_guidelines items must be non-empty strings');
+    }
+  }
+
+  // Implementation roadmap
+  if (spec.implementation_roadmap !== undefined) {
+    if (!Array.isArray(spec.implementation_roadmap)) {
+      errors.push('implementation_roadmap must be an array if provided');
+    } else {
+      const validStatuses = ['completed', 'in_progress', 'pending'];
+      spec.implementation_roadmap.forEach((r, i) => {
+        if (!r.phase || typeof r.phase !== 'string' || r.phase.trim() === '') {
+          errors.push(
+            `implementation_roadmap[${i}].phase is required and must be a non-empty string`
+          );
+        }
+        if (!r.status || !validStatuses.includes(r.status)) {
+          errors.push(
+            `implementation_roadmap[${i}].status must be one of: ${validStatuses.join(', ')}`
+          );
+        }
+        if (!r.description || typeof r.description !== 'string') {
+          errors.push(`implementation_roadmap[${i}].description is required and must be a string`);
+        }
+      });
+    }
+  }
+
+  return { valid: errors.length === 0, errors };
+}
+
+/**
+ * Check if XML content appears to be a valid spec XML (basic structure check).
+ * This is a quick check, not a full validation.
+ *
+ * @param xmlContent - The XML content to check
+ * @returns true if the content appears to be valid spec XML
+ */
+export function isValidSpecXml(xmlContent: string): boolean {
+  if (!xmlContent || typeof xmlContent !== 'string') {
+    return false;
+  }
+
+  // Check for essential elements
+  const hasRoot = xmlContent.includes('<project_specification>');
+  const hasProjectName = /<project_name>[\s\S]*?<\/project_name>/.test(xmlContent);
+  const hasOverview = /<overview>[\s\S]*?<\/overview>/.test(xmlContent);
+  const hasTechStack = /<technology_stack>[\s\S]*?<\/technology_stack>/.test(xmlContent);
+  const hasCapabilities = /<core_capabilities>[\s\S]*?<\/core_capabilities>/.test(xmlContent);
+
+  return hasRoot && hasProjectName && hasOverview && hasTechStack && hasCapabilities;
+}
diff --git a/temp_repo/libs/spec-parser/src/xml-to-spec.ts b/temp_repo/libs/spec-parser/src/xml-to-spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fb437f2e3213bfd59f5272d3335fefb6766af368
--- /dev/null
+++ b/temp_repo/libs/spec-parser/src/xml-to-spec.ts
@@ -0,0 +1,232 @@
+/**
+ * XML to SpecOutput parser.
+ * Parses app_spec.txt XML content into a structured SpecOutput object.
+ * Uses fast-xml-parser for robust XML parsing.
+ */
+
+import { XMLParser } from 'fast-xml-parser';
+import type { SpecOutput } from '@automaker/types';
+
+/**
+ * Result of parsing XML content.
+ */
+export interface ParseResult {
+  success: boolean;
+  spec: SpecOutput | null;
+  errors: string[];
+}
+
+// Configure the XML parser
+const parser = new XMLParser({
+  ignoreAttributes: true,
+  trimValues: true,
+  // Preserve arrays for elements that can have multiple values
+  isArray: (name) => {
+    return [
+      'technology',
+      'capability',
+      'feature',
+      'location',
+      'requirement',
+      'guideline',
+      'phase',
+    ].includes(name);
+  },
+});
+
+/**
+ * Safely get a string value from parsed XML, handling various input types.
+ */
+function getString(value: unknown): string {
+  if (typeof value === 'string') return value.trim();
+  if (typeof value === 'number') return String(value);
+  if (value === null || value === undefined) return '';
+  return '';
+}
+
+/**
+ * Safely get an array of strings from parsed XML.
+ */
+function getStringArray(value: unknown): string[] {
+  if (!value) return [];
+  if (Array.isArray(value)) {
+    return value.map((item) => getString(item)).filter((s) => s.length > 0);
+  }
+  const str = getString(value);
+  return str ? [str] : [];
+}
+
+/**
+ * Parse implemented features from the parsed XML object.
+ */
+function parseImplementedFeatures(featuresSection: unknown): SpecOutput['implemented_features'] {
+  const features: SpecOutput['implemented_features'] = [];
+
+  if (!featuresSection || typeof featuresSection !== 'object') {
+    return features;
+  }
+
+  const section = featuresSection as Record<string, unknown>;
+  const featureList = section.feature;
+
+  if (!featureList) return features;
+
+  const featureArray = Array.isArray(featureList) ? featureList : [featureList];
+
+  for (const feature of featureArray) {
+    if (typeof feature !== 'object' || feature === null) continue;
+
+    const f = feature as Record<string, unknown>;
+    const name = getString(f.name);
+    const description = getString(f.description);
+
+    if (!name) continue;
+
+    const locationsSection = f.file_locations as Record<string, unknown> | undefined;
+    const file_locations = locationsSection ? getStringArray(locationsSection.location) : undefined;
+
+    features.push({
+      name,
+      description,
+      ...(file_locations && file_locations.length > 0 ? { file_locations } : {}),
+    });
+  }
+
+  return features;
+}
+
+/**
+ * Parse implementation roadmap phases from the parsed XML object.
+ */
+function parseImplementationRoadmap(roadmapSection: unknown): SpecOutput['implementation_roadmap'] {
+  if (!roadmapSection || typeof roadmapSection !== 'object') {
+    return undefined;
+  }
+
+  const section = roadmapSection as Record<string, unknown>;
+  const phaseList = section.phase;
+
+  if (!phaseList) return undefined;
+
+  const phaseArray = Array.isArray(phaseList) ? phaseList : [phaseList];
+  const roadmap: NonNullable<SpecOutput['implementation_roadmap']> = [];
+
+  for (const phase of phaseArray) {
+    if (typeof phase !== 'object' || phase === null) continue;
+
+    const p = phase as Record<string, unknown>;
+    const phaseName = getString(p.name);
+    const statusRaw = getString(p.status);
+    const description = getString(p.description);
+
+    if (!phaseName) continue;
+
+    const status = (
+      ['completed', 'in_progress', 'pending'].includes(statusRaw) ? statusRaw : 'pending'
+    ) as 'completed' | 'in_progress' | 'pending';
+
+    roadmap.push({ phase: phaseName, status, description });
+  }
+
+  return roadmap.length > 0 ? roadmap : undefined;
+}
+
+/**
+ * Parse XML content into a SpecOutput object.
+ *
+ * @param xmlContent - The raw XML content from app_spec.txt
+ * @returns ParseResult with the parsed spec or errors
+ */
+export function xmlToSpec(xmlContent: string): ParseResult {
+  const errors: string[] = [];
+
+  // Check for root element before parsing
+  if (!xmlContent.includes('<project_specification>')) {
+    return {
+      success: false,
+      spec: null,
+      errors: ['Missing <project_specification> root element'],
+    };
+  }
+
+  // Parse the XML
+  let parsed: Record<string, unknown>;
+  try {
+    parsed = parser.parse(xmlContent) as Record<string, unknown>;
+  } catch (e) {
+    return {
+      success: false,
+      spec: null,
+      errors: [`XML parsing error: ${e instanceof Error ? e.message : 'Unknown error'}`],
+    };
+  }
+
+  const root = parsed.project_specification as Record<string, unknown> | undefined;
+
+  if (!root) {
+    return {
+      success: false,
+      spec: null,
+      errors: ['Missing <project_specification> root element'],
+    };
+  }
+
+  // Extract required fields
+  const project_name = getString(root.project_name);
+  if (!project_name) {
+    errors.push('Missing or empty <project_name>');
+  }
+
+  const overview = getString(root.overview);
+  if (!overview) {
+    errors.push('Missing or empty <overview>');
+  }
+
+  // Extract technology stack
+  const techSection = root.technology_stack as Record<string, unknown> | undefined;
+  const technology_stack = techSection ? getStringArray(techSection.technology) : [];
+  if (technology_stack.length === 0) {
+    errors.push('Missing or empty <technology_stack>');
+  }
+
+  // Extract core capabilities
+  const capSection = root.core_capabilities as Record<string, unknown> | undefined;
+  const core_capabilities = capSection ? getStringArray(capSection.capability) : [];
+  if (core_capabilities.length === 0) {
+    errors.push('Missing or empty <core_capabilities>');
+  }
+
+  // Extract implemented features
+  const implemented_features = parseImplementedFeatures(root.implemented_features);
+
+  // Extract optional sections
+  const reqSection = root.additional_requirements as Record<string, unknown> | undefined;
+  const additional_requirements = reqSection ? getStringArray(reqSection.requirement) : undefined;
+
+  const guideSection = root.development_guidelines as Record<string, unknown> | undefined;
+  const development_guidelines = guideSection ? getStringArray(guideSection.guideline) : undefined;
+
+  const implementation_roadmap = parseImplementationRoadmap(root.implementation_roadmap);
+
+  // Build spec object
+  const spec: SpecOutput = {
+    project_name,
+    overview,
+    technology_stack,
+    core_capabilities,
+    implemented_features,
+    ...(additional_requirements && additional_requirements.length > 0
+      ? { additional_requirements }
+      : {}),
+    ...(development_guidelines && development_guidelines.length > 0
+      ? { development_guidelines }
+      : {}),
+    ...(implementation_roadmap ? { implementation_roadmap } : {}),
+  };
+
+  return {
+    success: errors.length === 0,
+    spec,
+    errors,
+  };
+}
diff --git a/temp_repo/libs/spec-parser/src/xml-utils.ts b/temp_repo/libs/spec-parser/src/xml-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..acbb688cb90903cf3c47be13e862119cfb6e1faf
--- /dev/null
+++ b/temp_repo/libs/spec-parser/src/xml-utils.ts
@@ -0,0 +1,79 @@
+/**
+ * XML utility functions for escaping, unescaping, and extracting XML content.
+ * These are pure functions with no dependencies for maximum reusability.
+ */
+
+/**
+ * Escape special XML characters.
+ * Handles undefined/null values by converting them to empty strings.
+ */
+export function escapeXml(str: string | undefined | null): string {
+  if (str == null) {
+    return '';
+  }
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+}
+
+/**
+ * Unescape XML entities back to regular characters.
+ */
+export function unescapeXml(str: string): string {
+  return str
+    .replace(/&apos;/g, "'")
+    .replace(/&quot;/g, '"')
+    .replace(/&gt;/g, '>')
+    .replace(/&lt;/g, '<')
+    .replace(/&amp;/g, '&');
+}
+
+/**
+ * Escape special RegExp characters in a string.
+ */
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * Extract the content of a specific XML section.
+ *
+ * Note: This function only matches bare tags without attributes.
+ * Tags with attributes (e.g., `<tag id="1">`) are not supported.
+ *
+ * @param xmlContent - The full XML content
+ * @param tagName - The tag name to extract (e.g., 'implemented_features')
+ * @returns The content between the tags, or null if not found
+ */
+export function extractXmlSection(xmlContent: string, tagName: string): string | null {
+  const safeTag = escapeRegExp(tagName);
+  const regex = new RegExp(`<${safeTag}>([\\s\\S]*?)<\\/${safeTag}>`, 'i');
+  const match = xmlContent.match(regex);
+  return match ? match[1] : null;
+}
+
+/**
+ * Extract all values from repeated XML elements.
+ *
+ * Note: This function only matches bare tags without attributes.
+ * Tags with attributes (e.g., `<tag id="1">`) are not supported.
+ *
+ * @param xmlContent - The XML content to search
+ * @param tagName - The tag name to extract values from
+ * @returns Array of extracted values (unescaped and trimmed)
+ */
+export function extractXmlElements(xmlContent: string, tagName: string): string[] {
+  const values: string[] = [];
+  const safeTag = escapeRegExp(tagName);
+  const regex = new RegExp(`<${safeTag}>([\\s\\S]*?)<\\/${safeTag}>`, 'g');
+  const matches = xmlContent.matchAll(regex);
+
+  for (const match of matches) {
+    values.push(unescapeXml(match[1].trim()));
+  }
+
+  return values;
+}
diff --git a/temp_repo/libs/spec-parser/tsconfig.json b/temp_repo/libs/spec-parser/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..f677f8d5ebc071b18ab8302e1ef128243ebc2b3c
--- /dev/null
+++ b/temp_repo/libs/spec-parser/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/temp_repo/libs/tsconfig.base.json b/temp_repo/libs/tsconfig.base.json
new file mode 100644
index 0000000000000000000000000000000000000000..50d2a41af7055aa0327ba781f1a0b5eecefd7dc2
--- /dev/null
+++ b/temp_repo/libs/tsconfig.base.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2020"],
+    "types": ["node"],
+    "declaration": true,
+    "declarationMap": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true
+  }
+}
diff --git a/temp_repo/libs/types/README.md b/temp_repo/libs/types/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..62cd28babd03c9d8c38c190da581ce95c43879e9
--- /dev/null
+++ b/temp_repo/libs/types/README.md
@@ -0,0 +1,165 @@
+# @automaker/types
+
+Shared TypeScript type definitions for AutoMaker.
+
+## Overview
+
+This package contains all core type definitions used across AutoMaker's server and UI components. It has no dependencies and serves as the foundation for other packages.
+
+## Installation
+
+```bash
+npm install @automaker/types
+```
+
+## Exports
+
+### Provider Types
+
+Types for AI provider integration and Claude SDK.
+
+```typescript
+import type {
+  ProviderConfig,
+  ConversationMessage,
+  ExecuteOptions,
+  ContentBlock,
+  ProviderMessage,
+  InstallationStatus,
+  ValidationResult,
+  ModelDefinition,
+  AgentDefinition,
+  ReasoningEffort,
+  SystemPromptPreset,
+  McpServerConfig,
+  McpStdioServerConfig,
+  McpSSEServerConfig,
+  McpHttpServerConfig,
+} from '@automaker/types';
+```
+
+### Codex CLI Types
+
+Types for Codex CLI integration.
+
+```typescript
+import type {
+  CodexSandboxMode,
+  CodexApprovalPolicy,
+  CodexCliConfig,
+  CodexAuthStatus,
+  CodexEventType,
+  CodexItemType,
+  CodexEvent,
+} from '@automaker/types';
+```
+
+### Feature Types
+
+Feature management and workflow types.
+
+```typescript
+import type { Feature, FeatureStatus, PlanningMode, PlanSpec } from '@automaker/types';
+```
+
+**Feature Interface:**
+
+- `id` - Unique feature identifier
+- `category` - Feature category/type
+- `description` - Feature description
+- `dependencies` - Array of feature IDs this depends on
+- `status` - Current status (pending/running/completed/failed/verified)
+- `planningMode` - Planning approach (skip/lite/spec/full)
+- `planSpec` - Plan specification and approval status
+
+### Session Types
+
+Agent session management.
+
+```typescript
+import type {
+  AgentSession,
+  SessionListItem,
+  CreateSessionParams,
+  UpdateSessionParams,
+} from '@automaker/types';
+```
+
+### Error Types
+
+Error classification and handling.
+
+```typescript
+import type { ErrorType, ErrorInfo } from '@automaker/types';
+```
+
+### Image Types
+
+Image handling for prompts.
+
+```typescript
+import type { ImageData, ImageContentBlock } from '@automaker/types';
+```
+
+### Model Types
+
+Claude model definitions and mappings.
+
+```typescript
+import { CLAUDE_MODEL_MAP, DEFAULT_MODELS, type ModelAlias } from '@automaker/types';
+```
+
+## Usage Example
+
+```typescript
+import type { Feature, ExecuteOptions } from '@automaker/types';
+
+const feature: Feature = {
+  id: 'auth-feature',
+  category: 'backend',
+  description: 'Implement user authentication',
+  dependencies: ['database-setup'],
+  status: 'pending',
+  planningMode: 'spec',
+};
+
+const options: ExecuteOptions = {
+  model: 'claude-sonnet-4-20250514',
+  temperature: 0.7,
+};
+```
+
+## Dependencies
+
+None - this is a pure types package.
+
+**IMPORTANT**: This package must NEVER depend on other `@automaker/*` packages to prevent circular dependencies. All other packages depend on this one, making it the foundation of the dependency tree.
+
+## Used By
+
+- `@automaker/utils`
+- `@automaker/platform`
+- `@automaker/model-resolver`
+- `@automaker/dependency-resolver`
+- `@automaker/git-utils`
+- `@automaker/server`
+- `@automaker/ui`
+
+## Circular Dependency Prevention
+
+To maintain the package dependency hierarchy and prevent circular dependencies:
+
+1. **Never add dependencies** to other `@automaker/*` packages in `package.json`
+2. **Keep result types here** - For example, `DependencyResolutionResult` should stay in `@automaker/dependency-resolver`, not be moved here
+3. **Import only base types** - Other packages can import from here, but this package cannot import from them
+4. **Document the rule** - When adding new functionality, ensure it follows this constraint
+
+This constraint ensures a clean one-way dependency flow:
+
+```
+@automaker/types (foundation - no dependencies)
+    ↓
+@automaker/utils, @automaker/platform, etc.
+    ↓
+@automaker/server, @automaker/ui
+```
diff --git a/temp_repo/libs/types/package.json b/temp_repo/libs/types/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..883acc7d499c173b3121bc26446a705a0adfbd6e
--- /dev/null
+++ b/temp_repo/libs/types/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@automaker/types",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Shared type definitions for AutoMaker",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch",
+    "test": "vitest"
+  },
+  "keywords": [
+    "automaker",
+    "types"
+  ],
+  "author": "AutoMaker Team",
+  "license": "SEE LICENSE IN LICENSE",
+  "engines": {
+    "node": ">=22.0.0 <23.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.19.3",
+    "typescript": "5.9.3",
+    "vitest": "^3.0.0"
+  }
+}
diff --git a/temp_repo/libs/types/src/backlog-plan.ts b/temp_repo/libs/types/src/backlog-plan.ts
new file mode 100644
index 0000000000000000000000000000000000000000..da9393c7dc5517c67865a565f328e34b2e375402
--- /dev/null
+++ b/temp_repo/libs/types/src/backlog-plan.ts
@@ -0,0 +1,67 @@
+/**
+ * Backlog Plan types for AI-assisted backlog modification
+ */
+
+import type { Feature } from './feature.js';
+
+/**
+ * A single proposed change to the backlog
+ */
+export interface BacklogChange {
+  type: 'add' | 'update' | 'delete';
+  featureId?: string; // For update/delete operations
+  feature?: Partial<Feature>; // For add/update (includes title, description, category, dependencies, priority)
+  reason: string; // AI explanation of why this change is proposed
+}
+
+/**
+ * Dependency updates that need to happen as a result of the plan
+ */
+export interface DependencyUpdate {
+  featureId: string;
+  removedDependencies: string[]; // Dependencies removed due to deleted features
+  addedDependencies: string[]; // New dependencies based on AI analysis
+}
+
+/**
+ * Result from the AI when generating a backlog plan
+ */
+export interface BacklogPlanResult {
+  changes: BacklogChange[];
+  summary: string; // Overview of proposed changes
+  dependencyUpdates: DependencyUpdate[];
+}
+
+/**
+ * Events emitted during backlog plan generation
+ */
+export interface BacklogPlanEvent {
+  type:
+    | 'backlog_plan_progress'
+    | 'backlog_plan_tool'
+    | 'backlog_plan_complete'
+    | 'backlog_plan_error';
+  content?: string;
+  tool?: string;
+  input?: unknown;
+  result?: BacklogPlanResult;
+  error?: string;
+}
+
+/**
+ * Request to generate a backlog plan
+ */
+export interface BacklogPlanRequest {
+  projectPath: string;
+  prompt: string;
+  model?: string;
+}
+
+/**
+ * Response from apply operation
+ */
+export interface BacklogPlanApplyResult {
+  success: boolean;
+  appliedChanges: string[]; // IDs of features affected
+  error?: string;
+}
diff --git a/temp_repo/libs/types/src/codex-app-server.ts b/temp_repo/libs/types/src/codex-app-server.ts
new file mode 100644
index 0000000000000000000000000000000000000000..454a77b24470d4cf60ca3df0c1de7d5782c42688
--- /dev/null
+++ b/temp_repo/libs/types/src/codex-app-server.ts
@@ -0,0 +1,87 @@
+/**
+ * Codex App-Server JSON-RPC Types
+ *
+ * Type definitions for communicating with Codex CLI's app-server via JSON-RPC protocol.
+ * These types match the response structures from the `codex app-server` command.
+ */
+
+/**
+ * Response from model/list JSON-RPC method
+ * Returns list of available Codex models for the authenticated user
+ */
+export interface AppServerModelResponse {
+  data: AppServerModel[];
+  nextCursor: string | null;
+}
+
+export interface AppServerModel {
+  id: string;
+  model: string;
+  displayName: string;
+  description: string;
+  supportedReasoningEfforts: AppServerReasoningEffort[];
+  defaultReasoningEffort: string;
+  isDefault: boolean;
+}
+
+export interface AppServerReasoningEffort {
+  reasoningEffort: string;
+  description: string;
+}
+
+/**
+ * Response from account/read JSON-RPC method
+ * Returns current authentication state and account information
+ */
+export interface AppServerAccountResponse {
+  account: AppServerAccount | null;
+  requiresOpenaiAuth: boolean;
+}
+
+export interface AppServerAccount {
+  type: 'apiKey' | 'chatgpt';
+  email?: string;
+  planType?: string;
+}
+
+/**
+ * Response from account/rateLimits/read JSON-RPC method
+ * Returns rate limit information for the current user
+ */
+export interface AppServerRateLimitsResponse {
+  rateLimits: AppServerRateLimits;
+}
+
+export interface AppServerRateLimits {
+  primary: AppServerRateLimitWindow | null;
+  secondary: AppServerRateLimitWindow | null;
+  planType?: string;
+}
+
+export interface AppServerRateLimitWindow {
+  usedPercent: number;
+  windowDurationMins: number;
+  resetsAt: number;
+}
+
+/**
+ * Generic JSON-RPC request structure
+ */
+export interface JsonRpcRequest {
+  method: string;
+  id: number;
+  params?: unknown;
+}
+
+/**
+ * Generic JSON-RPC response structure
+ */
+export interface JsonRpcResponse<T = unknown> {
+  id: number;
+  result?: T;
+  error?: {
+    code: number;
+    message: string;
+    data?: unknown;
+  };
+}
diff --git a/temp_repo/libs/types/src/codex-models.ts b/temp_repo/libs/types/src/codex-models.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ccb4450409eea7700950d5b060927a48451f1075
--- /dev/null
+++ b/temp_repo/libs/types/src/codex-models.ts
@@ -0,0 +1,143 @@
+/**
+ * Codex CLI Model IDs
+ * Based on OpenAI Codex CLI official models
+ * Reference: https://developers.openai.com/codex/models/
+ *
+ * IMPORTANT: All Codex models use 'codex-' prefix to distinguish from Cursor CLI models
+ */
+export type CodexModelId =
+  | 'codex-gpt-5.3-codex'
+  | 'codex-gpt-5.3-codex-spark'
+  | 'codex-gpt-5.2-codex'
+  | 'codex-gpt-5.1-codex-max'
+  | 'codex-gpt-5.1-codex-mini'
+  | 'codex-gpt-5.1-codex'
+  | 'codex-gpt-5-codex'
+  | 'codex-gpt-5-codex-mini'
+  | 'codex-gpt-5.2'
+  | 'codex-gpt-5.1'
+  | 'codex-gpt-5';
+
+/**
+ * Codex model metadata
+ */
+export interface CodexModelConfig {
+  id: CodexModelId;
+  label: string;
+  description: string;
+  hasThinking: boolean;
+  /** Whether the model supports vision/image inputs */
+  supportsVision: boolean;
+}
+
+/**
+ * Complete model map for Codex CLI
+ * All keys use 'codex-' prefix to distinguish from Cursor CLI models
+ */
+export const CODEX_MODEL_CONFIG_MAP: Record<CodexModelId, CodexModelConfig> = {
+  'codex-gpt-5.3-codex': {
+    id: 'codex-gpt-5.3-codex',
+    label: 'GPT-5.3-Codex',
+    description: 'Latest frontier agentic coding model',
+    hasThinking: true,
+    supportsVision: true,
+  },
+  'codex-gpt-5.3-codex-spark': {
+    id: 'codex-gpt-5.3-codex-spark',
+    label: 'GPT-5.3-Codex-Spark',
+    description: 'Near-instant real-time coding model, 1000+ tokens/sec',
+    hasThinking: true,
+    supportsVision: true,
+  },
+  'codex-gpt-5.2-codex': {
+    id: 'codex-gpt-5.2-codex',
+    label: 'GPT-5.2-Codex',
+    description: 'Frontier agentic coding model',
+    hasThinking: true,
+    supportsVision: true,
+  },
+  'codex-gpt-5.1-codex-max': {
+    id: 'codex-gpt-5.1-codex-max',
+    label: 'GPT-5.1-Codex-Max',
+    description: 'Codex-optimized flagship for deep and fast reasoning',
+    hasThinking: true,
+    supportsVision: true,
+  },
+  'codex-gpt-5.1-codex-mini': {
+    id: 'codex-gpt-5.1-codex-mini',
+    label: 'GPT-5.1-Codex-Mini',
+    description: 'Optimized for codex. Cheaper, faster, but less capable',
+    hasThinking: false,
+    supportsVision: true,
+  },
+  'codex-gpt-5.1-codex': {
+    id: 'codex-gpt-5.1-codex',
+    label: 'GPT-5.1-Codex',
+    description: 'Original GPT-5.1 Codex agentic coding model',
+    hasThinking: true,
+    supportsVision: true,
+  },
+  'codex-gpt-5-codex': {
+    id: 'codex-gpt-5-codex',
+    label: 'GPT-5-Codex',
+    description: 'Original GPT-5 Codex model',
+    hasThinking: true,
+    supportsVision: true,
+  },
+  'codex-gpt-5-codex-mini': {
+    id: 'codex-gpt-5-codex-mini',
+    label: 'GPT-5-Codex-Mini',
+    description: 'Smaller, cheaper GPT-5 Codex variant',
+    hasThinking: false,
+    supportsVision: true,
+  },
+  'codex-gpt-5.2': {
+    id: 'codex-gpt-5.2',
+    label: 'GPT-5.2 (Codex)',
+    description: 'Latest frontier model with improvements across knowledge, reasoning and coding',
+    hasThinking: true,
+    supportsVision: true,
+  },
+  'codex-gpt-5.1': {
+    id: 'codex-gpt-5.1',
+    label: 'GPT-5.1 (Codex)',
+    description: 'Great for coding and agentic tasks across domains via Codex',
+    hasThinking: true,
+    supportsVision: true,
+  },
+  'codex-gpt-5': {
+    id: 'codex-gpt-5',
+    label: 'GPT-5 (Codex)',
+    description: 'Base GPT-5 model via Codex',
+    hasThinking: true,
+    supportsVision: true,
+  },
+};
+
+/**
+ * Helper: Check if model has thinking capability
+ */
+export function codexModelHasThinking(modelId: CodexModelId): boolean {
+  return CODEX_MODEL_CONFIG_MAP[modelId]?.hasThinking ?? false;
+}
+
+/**
+ * Helper: Get display name for model
+ */
+export function getCodexModelLabel(modelId: CodexModelId): string {
+  return CODEX_MODEL_CONFIG_MAP[modelId]?.label ?? modelId;
+}
+
+/**
+ * Helper: Get all Codex model IDs
+ */
+export function getAllCodexModelIds(): CodexModelId[] {
+  return Object.keys(CODEX_MODEL_CONFIG_MAP) as CodexModelId[];
+}
+
+/**
+ * Helper: Check if Codex model supports vision
+ */
+export function codexModelSupportsVision(modelId: CodexModelId): boolean {
+  return CODEX_MODEL_CONFIG_MAP[modelId]?.supportsVision ?? true;
+}
diff --git a/temp_repo/libs/types/src/codex.ts b/temp_repo/libs/types/src/codex.ts
new file mode 100644
index 0000000000000000000000000000000000000000..44ac981a8b2cbb4233c1b15139bd39458a9f7ab9
--- /dev/null
+++ b/temp_repo/libs/types/src/codex.ts
@@ -0,0 +1,52 @@
+/** Sandbox modes for Codex CLI command execution */
+export type CodexSandboxMode = 'read-only' | 'workspace-write' | 'danger-full-access';
+
+/** Approval policies for Codex CLI tool execution */
+export type CodexApprovalPolicy = 'untrusted' | 'on-failure' | 'on-request' | 'never';
+
+/** Codex event types emitted by CLI */
+export type CodexEventType =
+  | 'thread.started'
+  | 'turn.started'
+  | 'turn.completed'
+  | 'turn.failed'
+  | 'item.completed'
+  | 'error';
+
+/** Codex item types in CLI events */
+export type CodexItemType =
+  | 'agent_message'
+  | 'reasoning'
+  | 'command_execution'
+  | 'file_change'
+  | 'mcp_tool_call'
+  | 'web_search'
+  | 'plan_update';
+
+/** Codex CLI event structure */
+export interface CodexEvent {
+  type: CodexEventType;
+  thread_id?: string;
+  item?: {
+    type: CodexItemType;
+    content?: string;
+    [key: string]: unknown;
+  };
+  [key: string]: unknown;
+}
+
+/** Codex CLI configuration (stored in .automaker/codex-config.json) */
+export interface CodexCliConfig {
+  /** Default model to use when not specified */
+  defaultModel?: string;
+  /** List of enabled models */
+  models?: string[];
+}
+
+/** Codex authentication status */
+export interface CodexAuthStatus {
+  authenticated: boolean;
+  method: 'oauth' | 'api_key' | 'none';
+  hasCredentialsFile?: boolean;
+  error?: string;
+}
diff --git a/temp_repo/libs/types/src/copilot-models.ts b/temp_repo/libs/types/src/copilot-models.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a62f56728aa3be080de96ae3c6cc16672a4aed09
--- /dev/null
+++ b/temp_repo/libs/types/src/copilot-models.ts
@@ -0,0 +1,201 @@
+/**
+ * GitHub Copilot CLI Model Definitions
+ *
+ * Defines available models for GitHub Copilot CLI integration.
+ * Based on https://github.com/github/copilot
+ *
+ * The CLI provides runtime model discovery, but we define common models
+ * for UI consistency and offline use.
+ */
+
+/**
+ * Copilot model configuration
+ */
+export interface CopilotModelConfig {
+  label: string;
+  description: string;
+  supportsVision: boolean;
+  supportsTools: boolean;
+  contextWindow?: number;
+}
+
+/**
+ * Available Copilot models via the GitHub Copilot CLI
+ *
+ * Model IDs use 'copilot-' prefix for consistent provider routing.
+ * When passed to the CLI, the prefix is stripped.
+ *
+ * Note: Actual available models depend on the user's Copilot subscription
+ * and can be discovered at runtime via the CLI's listModels() method.
+ */
+export const COPILOT_MODEL_MAP = {
+  // Claude models (Anthropic via GitHub Copilot)
+  'copilot-claude-sonnet-4.6': {
+    label: 'Claude Sonnet 4.6',
+    description: 'Anthropic Claude Sonnet 4.6 via GitHub Copilot.',
+    supportsVision: true,
+    supportsTools: true,
+    contextWindow: 200000,
+  },
+  'copilot-claude-sonnet-4.5': {
+    label: 'Claude Sonnet 4.5',
+    description: 'Anthropic Claude Sonnet 4.5 via GitHub Copilot.',
+    supportsVision: true,
+    supportsTools: true,
+    contextWindow: 200000,
+  },
+  'copilot-claude-haiku-4.5': {
+    label: 'Claude Haiku 4.5',
+    description: 'Fast and efficient Claude Haiku 4.5 via GitHub Copilot.',
+    supportsVision: true,
+    supportsTools: true,
+    contextWindow: 200000,
+  },
+  'copilot-claude-opus-4.5': {
+    label: 'Claude Opus 4.5',
+    description: 'Most capable Claude Opus 4.5 via GitHub Copilot.',
+    supportsVision: true,
+    supportsTools: true,
+    contextWindow: 200000,
+  },
+  'copilot-claude-sonnet-4': {
+    label: 'Claude Sonnet 4',
+    description: 'Anthropic Claude Sonnet 4 via GitHub Copilot.',
+    supportsVision: true,
+    supportsTools: true,
+    contextWindow: 200000,
+  },
+  // GPT-5 series (OpenAI via GitHub Copilot)
+  'copilot-gpt-5.2-codex': {
+    label: 'GPT-5.2 Codex',
+    description: 'OpenAI GPT-5.2 Codex for advanced coding tasks.',
+    supportsVision: true,
+    supportsTools: true,
+    contextWindow: 128000,
+  },
+  'copilot-gpt-5.1-codex-max': {
+    label: 'GPT-5.1 Codex Max',
+    description: 'Maximum capability GPT-5.1 Codex model.',
+    supportsVision: true,
+    supportsTools: true,
+    contextWindow: 128000,
+  },
+  'copilot-gpt-5.1-codex': {
+    label: 'GPT-5.1 Codex',
+    description: 'OpenAI GPT-5.1 Codex for coding tasks.',
+    supportsVision: true,
+    supportsTools: true,
+    contextWindow: 128000,
+  },
+  'copilot-gpt-5.2': {
+    label: 'GPT-5.2',
+    description: 'Latest OpenAI GPT-5.2 model.',
+    supportsVision: true,
+    supportsTools: true,
+    contextWindow: 128000,
+  },
+  'copilot-gpt-5.1': {
+    label: 'GPT-5.1',
+    description: 'OpenAI GPT-5.1 model.',
+    supportsVision: true,
+    supportsTools: true,
+    contextWindow: 128000,
+  },
+  'copilot-gpt-5': {
+    label: 'GPT-5',
+    description: 'OpenAI GPT-5 base model.',
+    supportsVision: true,
+    supportsTools: true,
+    contextWindow: 128000,
+  },
+  'copilot-gpt-5.1-codex-mini': {
+    label: 'GPT-5.1 Codex Mini',
+    description: 'Fast and efficient GPT-5.1 Codex Mini.',
+    supportsVision: true,
+    supportsTools: true,
+    contextWindow: 128000,
+  },
+  'copilot-gpt-5-mini': {
+    label: 'GPT-5 Mini',
+    description: 'Lightweight GPT-5 Mini model.',
+    supportsVision: true,
+    supportsTools: true,
+    contextWindow: 128000,
+  },
+  'copilot-gpt-4.1': {
+    label: 'GPT-4.1',
+    description: 'OpenAI GPT-4.1 model.',
+    supportsVision: true,
+    supportsTools: true,
+    contextWindow: 128000,
+  },
+  // Gemini models (Google via GitHub Copilot)
+  'copilot-gemini-3-pro-preview': {
+    label: 'Gemini 3 Pro Preview',
+    description: 'Google Gemini 3 Pro Preview via GitHub Copilot.',
+    supportsVision: true,
+    supportsTools: true,
+    contextWindow: 1000000,
+  },
+} as const satisfies Record<string, CopilotModelConfig>;
+
+/**
+ * Copilot model ID type (keys have copilot- prefix)
+ */
+export type CopilotModelId = keyof typeof COPILOT_MODEL_MAP;
+
+/**
+ * Get all Copilot model IDs
+ */
+export function getAllCopilotModelIds(): CopilotModelId[] {
+  return Object.keys(COPILOT_MODEL_MAP) as CopilotModelId[];
+}
+
+/**
+ * Default Copilot model
+ */
+export const DEFAULT_COPILOT_MODEL: CopilotModelId = 'copilot-claude-sonnet-4.6';
+
+/**
+ * GitHub Copilot authentication status
+ */
+export interface CopilotAuthStatus {
+  authenticated: boolean;
+  method: 'oauth' | 'cli' | 'none';
+  authType?: string;
+  login?: string;
+  host?: string;
+  statusMessage?: string;
+  error?: string;
+}
+
+/**
+ * Copilot CLI status (used for installation detection)
+ */
+export interface CopilotCliStatus {
+  installed: boolean;
+  version?: string;
+  path?: string;
+  auth?: CopilotAuthStatus;
+  error?: string;
+}
+
+/**
+ * Copilot model info from SDK runtime discovery
+ */
+export interface CopilotRuntimeModel {
+  id: string;
+  name: string;
+  capabilities?: {
+    supportsVision?: boolean;
+    maxInputTokens?: number;
+    maxOutputTokens?: number;
+  };
+  policy?: {
+    state: 'enabled' | 'disabled' | 'unconfigured';
+    terms?: string;
+  };
+  billing?: {
+    multiplier: number;
+  };
+}
diff --git a/temp_repo/libs/types/src/cursor-cli.ts b/temp_repo/libs/types/src/cursor-cli.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4b2a324241d2473b48259d761afbcc0c745e9b57
--- /dev/null
+++ b/temp_repo/libs/types/src/cursor-cli.ts
@@ -0,0 +1,398 @@
+import type { CursorModelId } from './cursor-models.js';
+
+/**
+ * Cursor CLI configuration file schema
+ * Stored in: .automaker/cursor-config.json
+ */
+export interface CursorCliConfig {
+  defaultModel?: CursorModelId;
+  models?: CursorModelId[]; // Enabled models
+  mcpServers?: string[]; // MCP server configs to load
+  rules?: string[]; // .cursor/rules paths
+}
+
+// =============================================================================
+// Cursor CLI Permissions Configuration
+// Based on: https://cursor.com/docs/cli/reference/permissions
+// =============================================================================
+
+/**
+ * Permission string format for Cursor CLI
+ * Examples:
+ * - "Shell(git)" - Allow/deny git commands
+ * - "Shell(npm)" - Allow/deny npm commands
+ * - "Read(.env*)" - Allow/deny reading .env files
+ * - "Write(src/**)" - Allow/deny writing to src directory
+ */
+export type CursorPermissionString = string;
+
+/**
+ * Cursor CLI permissions configuration
+ * Used in ~/.cursor/cli-config.json or <project>/.cursor/cli.json
+ */
+export interface CursorCliPermissions {
+  /**
+   * Permitted operations
+   * Format: "Shell(command)", "Read(path)", "Write(path)"
+   */
+  allow: CursorPermissionString[];
+
+  /**
+   * Forbidden operations (takes precedence over allow)
+   * Format: "Shell(command)", "Read(path)", "Write(path)"
+   */
+  deny: CursorPermissionString[];
+}
+
+/**
+ * Full Cursor CLI config file format (cli-config.json / cli.json)
+ * See: https://cursor.com/docs/cli/reference/configuration
+ */
+export interface CursorCliConfigFile {
+  /** Schema version (currently 1) */
+  version: 1;
+
+  /** Editor settings (global only) */
+  editor?: {
+    vimMode?: boolean;
+  };
+
+  /** Model settings (global only) */
+  model?: {
+    default?: string;
+  };
+
+  /** Permissions (can be project-level) */
+  permissions?: CursorCliPermissions;
+}
+
+/**
+ * Predefined permission profiles for different use cases
+ */
+export type CursorPermissionProfile = 'strict' | 'development' | 'custom';
+
+/**
+ * Permission profile definitions
+ */
+export interface CursorPermissionProfileConfig {
+  id: CursorPermissionProfile;
+  name: string;
+  description: string;
+  permissions: CursorCliPermissions;
+}
+
+/**
+ * Strict profile - For read-only operations
+ * Denies all shell commands and writes
+ */
+export const CURSOR_STRICT_PROFILE: CursorPermissionProfileConfig = {
+  id: 'strict',
+  name: 'Strict (Read-Only)',
+  description: 'Denies all shell commands and file writes. Safe for analysis tasks.',
+  permissions: {
+    allow: [
+      'Read(**/*)', // Allow reading all files
+    ],
+    deny: [
+      'Shell(*)', // Deny all shell commands
+      'Write(**/*)', // Deny all file writes
+      'Read(.env*)', // Deny reading env files
+      'Read(**/*.pem)', // Deny reading private keys
+      'Read(**/*.key)', // Deny reading key files
+      'Read(**/credentials*)', // Deny reading credentials
+    ],
+  },
+};
+
+/**
+ * Development profile - For feature implementation
+ * Allows safe operations, blocks destructive ones
+ */
+export const CURSOR_DEVELOPMENT_PROFILE: CursorPermissionProfileConfig = {
+  id: 'development',
+  name: 'Development',
+  description: 'Allows file edits and safe shell commands. Blocks destructive operations.',
+  permissions: {
+    allow: [
+      'Read(**/*)', // Allow reading all files
+      'Write(**/*)', // Allow writing files
+      'Shell(npm)', // npm install, run, test
+      'Shell(pnpm)', // pnpm install, run, test
+      'Shell(yarn)', // yarn install, run, test
+      'Shell(bun)', // bun install, run, test
+      'Shell(node)', // node scripts
+      'Shell(npx)', // npx commands
+      'Shell(git)', // git operations (except push)
+      'Shell(tsc)', // TypeScript compiler
+      'Shell(eslint)', // Linting
+      'Shell(prettier)', // Formatting
+      'Shell(jest)', // Testing
+      'Shell(vitest)', // Testing
+      'Shell(cargo)', // Rust
+      'Shell(go)', // Go
+      'Shell(python)', // Python
+      'Shell(pip)', // Python packages
+      'Shell(poetry)', // Python packages
+      'Shell(make)', // Makefiles
+      'Shell(docker)', // Docker (build, not run with --rm)
+      'Shell(ls)', // List files
+      'Shell(cat)', // Read files
+      'Shell(echo)', // Echo
+      'Shell(mkdir)', // Create directories
+      'Shell(cp)', // Copy files
+      'Shell(mv)', // Move files
+      'Shell(touch)', // Create files
+      'Shell(pwd)', // Print working directory
+      'Shell(which)', // Find executables
+      'Shell(head)', // Read file head
+      'Shell(tail)', // Read file tail
+      'Shell(grep)', // Search
+      'Shell(find)', // Find files
+      'Shell(wc)', // Word count
+      'Shell(sort)', // Sort
+      'Shell(uniq)', // Unique lines
+      'Shell(diff)', // Diff files
+      'Shell(curl)', // HTTP requests (read-only fetching)
+      'Shell(wget)', // Downloads
+    ],
+    deny: [
+      // Destructive file operations
+      'Shell(rm)', // No file deletion
+      'Shell(rmdir)', // No directory deletion
+      'Shell(shred)', // No secure delete
+
+      // Dangerous git operations
+      'Shell(git push)', // No pushing (user should review)
+      'Shell(git push --force)', // Definitely no force push
+      'Shell(git reset --hard)', // No hard reset
+
+      // Package publishing
+      'Shell(npm publish)', // No publishing packages
+      'Shell(pnpm publish)', // No publishing packages
+      'Shell(yarn publish)', // No publishing packages
+
+      // System/network operations
+      'Shell(sudo)', // No sudo
+      'Shell(su)', // No su
+      'Shell(chmod)', // No permission changes
+      'Shell(chown)', // No ownership changes
+      'Shell(kill)', // No process killing
+      'Shell(pkill)', // No process killing
+      'Shell(killall)', // No process killing
+      'Shell(shutdown)', // No shutdown
+      'Shell(reboot)', // No reboot
+      'Shell(systemctl)', // No systemd
+      'Shell(service)', // No services
+      'Shell(iptables)', // No firewall
+      'Shell(ssh)', // No SSH
+      'Shell(scp)', // No SCP
+
+      // Sensitive file access
+      'Read(.env*)', // No reading env files
+      'Read(**/*.pem)', // No reading private keys
+      'Read(**/*.key)', // No reading key files
+      'Read(**/credentials*)', // No reading credentials
+      'Read(**/.git/config)', // No reading git config (may have tokens)
+      'Read(**/id_rsa*)', // No reading SSH keys
+      'Read(**/id_ed25519*)', // No reading SSH keys
+      'Write(.env*)', // No writing env files
+      'Write(**/*.pem)', // No writing keys
+      'Write(**/*.key)', // No writing keys
+    ],
+  },
+};
+
+/**
+ * All available permission profiles
+ */
+export const CURSOR_PERMISSION_PROFILES: CursorPermissionProfileConfig[] = [
+  CURSOR_STRICT_PROFILE,
+  CURSOR_DEVELOPMENT_PROFILE,
+];
+
+/**
+ * Cursor authentication status
+ */
+export interface CursorAuthStatus {
+  authenticated: boolean;
+  method: 'login' | 'api_key' | 'none';
+  hasCredentialsFile?: boolean;
+  error?: string;
+}
+
+/**
+ * NOTE: Reuse existing InstallationStatus from provider.ts
+ * The existing type already has: installed, path, version, method, hasApiKey, authenticated
+ *
+ * Add 'login' to the method union if needed:
+ * method?: 'cli' | 'npm' | 'brew' | 'sdk' | 'login';
+ */
+
+/**
+ * Cursor stream-json event types (from CLI output)
+ */
+export interface CursorSystemEvent {
+  type: 'system';
+  subtype: 'init';
+  apiKeySource: 'env' | 'flag' | 'login';
+  cwd: string;
+  session_id: string;
+  model: string;
+  permissionMode: string;
+}
+
+export interface CursorUserEvent {
+  type: 'user';
+  message: {
+    role: 'user';
+    content: Array<{ type: 'text'; text: string }>;
+  };
+  session_id: string;
+}
+
+export interface CursorAssistantEvent {
+  type: 'assistant';
+  message: {
+    role: 'assistant';
+    content: Array<{ type: 'text'; text: string }>;
+  };
+  session_id: string;
+}
+
+export interface CursorToolCallEvent {
+  type: 'tool_call';
+  subtype: 'started' | 'completed';
+  call_id: string;
+  tool_call: {
+    readToolCall?: {
+      args: { path: string; offset?: number; limit?: number };
+      result?: {
+        success?: {
+          content: string;
+          isEmpty: boolean;
+          exceededLimit: boolean;
+          totalLines: number;
+          totalChars: number;
+        };
+      };
+    };
+    writeToolCall?: {
+      args: { path: string; fileText: string; toolCallId?: string };
+      result?: {
+        success?: {
+          path: string;
+          linesCreated: number;
+          fileSize: number;
+        };
+      };
+    };
+    editToolCall?: {
+      args: { path: string; oldText?: string; newText?: string };
+      result?: {
+        success?: Record<string, unknown>;
+      };
+    };
+    shellToolCall?: {
+      args: { command: string };
+      result?: {
+        success?: {
+          exitCode: number;
+          stdout?: string;
+          stderr?: string;
+        };
+        rejected?: {
+          reason: string;
+        };
+      };
+    };
+    deleteToolCall?: {
+      args: { path: string };
+      result?: {
+        success?: Record<string, unknown>;
+        rejected?: {
+          reason: string;
+        };
+      };
+    };
+    grepToolCall?: {
+      args: { pattern: string; path?: string };
+      result?: {
+        success?: {
+          matchedLines: number;
+        };
+      };
+    };
+    lsToolCall?: {
+      args: { path: string; ignore?: string[] };
+      result?: {
+        success?: {
+          childrenFiles: number;
+          childrenDirs: number;
+        };
+      };
+    };
+    globToolCall?: {
+      args: { globPattern: string; targetDirectory?: string };
+      result?: {
+        success?: {
+          totalFiles: number;
+        };
+      };
+    };
+    semSearchToolCall?: {
+      args: { query: string; targetDirectories?: string[]; explanation?: string };
+      result?: {
+        success?: {
+          results: string;
+          codeResults?: Array<{
+            path: string;
+            content: string;
+            score?: number;
+          }>;
+        };
+      };
+    };
+    readLintsToolCall?: {
+      args: { paths: string[] };
+      result?: {
+        success?: {
+          fileDiagnostics: Array<{
+            path: string;
+            diagnostics: Array<{
+              message: string;
+              severity: string;
+              line?: number;
+              column?: number;
+            }>;
+          }>;
+          totalFiles: number;
+          totalDiagnostics: number;
+        };
+      };
+    };
+    function?: {
+      name: string;
+      arguments: string;
+    };
+  };
+  session_id: string;
+}
+
+export interface CursorResultEvent {
+  type: 'result';
+  subtype: 'success' | 'error';
+  duration_ms: number;
+  duration_api_ms: number;
+  is_error: boolean;
+  result: string;
+  session_id: string;
+  request_id?: string;
+  error?: string;
+}
+
+export type CursorStreamEvent =
+  | CursorSystemEvent
+  | CursorUserEvent
+  | CursorAssistantEvent
+  | CursorToolCallEvent
+  | CursorResultEvent;
diff --git a/temp_repo/libs/types/src/cursor-models.ts b/temp_repo/libs/types/src/cursor-models.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a48a791f5809b07fd1a6a31d804f14b6eb60dbe5
--- /dev/null
+++ b/temp_repo/libs/types/src/cursor-models.ts
@@ -0,0 +1,498 @@
+/**
+ * Cursor CLI Model IDs
+ * Reference: https://cursor.com/docs
+ *
+ * All Cursor model IDs use 'cursor-' prefix for consistent provider routing.
+ * This prevents naming collisions (e.g., cursor-gpt-5.2-codex vs codex-gpt-5.2-codex).
+ */
+export type CursorModelId =
+  | 'cursor-auto' // Auto-select best model
+  | 'cursor-composer-1' // Cursor Composer agent model
+  | 'cursor-sonnet-4.6' // Claude Sonnet 4.6
+  | 'cursor-sonnet-4.6-thinking' // Claude Sonnet 4.6 with extended thinking
+  | 'cursor-sonnet-4.5' // Claude Sonnet 4.5
+  | 'cursor-sonnet-4.5-thinking' // Claude Sonnet 4.5 with extended thinking
+  | 'cursor-opus-4.5' // Claude Opus 4.5
+  | 'cursor-opus-4.5-thinking' // Claude Opus 4.5 with extended thinking
+  | 'cursor-opus-4.1' // Claude Opus 4.1
+  | 'cursor-gemini-3-pro' // Gemini 3 Pro
+  | 'cursor-gemini-3-flash' // Gemini 3 Flash
+  | 'cursor-gpt-5.2' // GPT-5.2 via Cursor
+  | 'cursor-gpt-5.1' // GPT-5.1 via Cursor
+  | 'cursor-gpt-5.2-high' // GPT-5.2 High via Cursor
+  | 'cursor-gpt-5.1-high' // GPT-5.1 High via Cursor
+  | 'cursor-gpt-5.1-codex' // GPT-5.1 Codex via Cursor
+  | 'cursor-gpt-5.1-codex-high' // GPT-5.1 Codex High via Cursor
+  | 'cursor-gpt-5.1-codex-max' // GPT-5.1 Codex Max via Cursor
+  | 'cursor-gpt-5.1-codex-max-high' // GPT-5.1 Codex Max High via Cursor
+  | 'cursor-gpt-5.2-codex' // GPT-5.2 Codex via Cursor
+  | 'cursor-gpt-5.2-codex-high' // GPT-5.2 Codex High via Cursor
+  | 'cursor-gpt-5.2-codex-max' // GPT-5.2 Codex Max via Cursor
+  | 'cursor-gpt-5.2-codex-max-high' // GPT-5.2 Codex Max High via Cursor
+  | 'cursor-grok'; // Grok
+
+/**
+ * Legacy Cursor model IDs (without prefix) for migration support
+ */
+export type LegacyCursorModelId =
+  | 'auto'
+  | 'composer-1'
+  | 'sonnet-4.6'
+  | 'sonnet-4.6-thinking'
+  | 'sonnet-4.5'
+  | 'sonnet-4.5-thinking'
+  | 'opus-4.5'
+  | 'opus-4.5-thinking'
+  | 'opus-4.1'
+  | 'gemini-3-pro'
+  | 'gemini-3-flash'
+  | 'grok';
+
+/**
+ * Cursor model metadata
+ */
+export interface CursorModelConfig {
+  id: CursorModelId;
+  label: string;
+  description: string;
+  hasThinking: boolean;
+  /** Whether the model supports vision/image inputs (currently not supported by Cursor CLI) */
+  supportsVision: boolean;
+}
+
+/**
+ * Complete model map for Cursor CLI
+ * All keys use 'cursor-' prefix for consistent provider routing.
+ */
+export const CURSOR_MODEL_MAP: Record<CursorModelId, CursorModelConfig> = {
+  'cursor-auto': {
+    id: 'cursor-auto',
+    label: 'Auto (Recommended)',
+    description: 'Automatically selects the best model for each task',
+    hasThinking: false,
+    supportsVision: false, // Vision not yet supported by Cursor CLI
+  },
+  'cursor-composer-1': {
+    id: 'cursor-composer-1',
+    label: 'Composer 1',
+    description: 'Cursor Composer agent model optimized for multi-file edits',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-sonnet-4.6': {
+    id: 'cursor-sonnet-4.6',
+    label: 'Claude Sonnet 4.6',
+    description: 'Anthropic Claude Sonnet 4.6 via Cursor',
+    hasThinking: false,
+    supportsVision: false, // Model supports vision but Cursor CLI doesn't pass images
+  },
+  'cursor-sonnet-4.6-thinking': {
+    id: 'cursor-sonnet-4.6-thinking',
+    label: 'Claude Sonnet 4.6 (Thinking)',
+    description: 'Claude Sonnet 4.6 with extended thinking enabled',
+    hasThinking: true,
+    supportsVision: false,
+  },
+  'cursor-sonnet-4.5': {
+    id: 'cursor-sonnet-4.5',
+    label: 'Claude Sonnet 4.5',
+    description: 'Anthropic Claude Sonnet 4.5 via Cursor',
+    hasThinking: false,
+    supportsVision: false, // Model supports vision but Cursor CLI doesn't pass images
+  },
+  'cursor-sonnet-4.5-thinking': {
+    id: 'cursor-sonnet-4.5-thinking',
+    label: 'Claude Sonnet 4.5 (Thinking)',
+    description: 'Claude Sonnet 4.5 with extended thinking enabled',
+    hasThinking: true,
+    supportsVision: false,
+  },
+  'cursor-opus-4.5': {
+    id: 'cursor-opus-4.5',
+    label: 'Claude Opus 4.5',
+    description: 'Anthropic Claude Opus 4.5 via Cursor',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-opus-4.5-thinking': {
+    id: 'cursor-opus-4.5-thinking',
+    label: 'Claude Opus 4.5 (Thinking)',
+    description: 'Claude Opus 4.5 with extended thinking enabled',
+    hasThinking: true,
+    supportsVision: false,
+  },
+  'cursor-opus-4.1': {
+    id: 'cursor-opus-4.1',
+    label: 'Claude Opus 4.1',
+    description: 'Anthropic Claude Opus 4.1 via Cursor',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-gemini-3-pro': {
+    id: 'cursor-gemini-3-pro',
+    label: 'Gemini 3 Pro',
+    description: 'Google Gemini 3 Pro via Cursor',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-gemini-3-flash': {
+    id: 'cursor-gemini-3-flash',
+    label: 'Gemini 3 Flash',
+    description: 'Google Gemini 3 Flash (faster)',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-gpt-5.2': {
+    id: 'cursor-gpt-5.2',
+    label: 'GPT-5.2',
+    description: 'OpenAI GPT-5.2 via Cursor',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-gpt-5.1': {
+    id: 'cursor-gpt-5.1',
+    label: 'GPT-5.1',
+    description: 'OpenAI GPT-5.1 via Cursor',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-gpt-5.2-high': {
+    id: 'cursor-gpt-5.2-high',
+    label: 'GPT-5.2 High',
+    description: 'OpenAI GPT-5.2 with high compute',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-gpt-5.1-high': {
+    id: 'cursor-gpt-5.1-high',
+    label: 'GPT-5.1 High',
+    description: 'OpenAI GPT-5.1 with high compute',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-gpt-5.1-codex': {
+    id: 'cursor-gpt-5.1-codex',
+    label: 'GPT-5.1 Codex',
+    description: 'OpenAI GPT-5.1 Codex for code generation',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-gpt-5.1-codex-high': {
+    id: 'cursor-gpt-5.1-codex-high',
+    label: 'GPT-5.1 Codex High',
+    description: 'OpenAI GPT-5.1 Codex with high compute',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-gpt-5.1-codex-max': {
+    id: 'cursor-gpt-5.1-codex-max',
+    label: 'GPT-5.1 Codex Max',
+    description: 'OpenAI GPT-5.1 Codex Max capacity',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-gpt-5.1-codex-max-high': {
+    id: 'cursor-gpt-5.1-codex-max-high',
+    label: 'GPT-5.1 Codex Max High',
+    description: 'OpenAI GPT-5.1 Codex Max with high compute',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-gpt-5.2-codex': {
+    id: 'cursor-gpt-5.2-codex',
+    label: 'GPT-5.2 Codex',
+    description: 'OpenAI GPT-5.2 Codex for code generation',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-gpt-5.2-codex-high': {
+    id: 'cursor-gpt-5.2-codex-high',
+    label: 'GPT-5.2 Codex High',
+    description: 'OpenAI GPT-5.2 Codex with high compute',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-gpt-5.2-codex-max': {
+    id: 'cursor-gpt-5.2-codex-max',
+    label: 'GPT-5.2 Codex Max',
+    description: 'OpenAI GPT-5.2 Codex Max capacity',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-gpt-5.2-codex-max-high': {
+    id: 'cursor-gpt-5.2-codex-max-high',
+    label: 'GPT-5.2 Codex Max High',
+    description: 'OpenAI GPT-5.2 Codex Max with high compute',
+    hasThinking: false,
+    supportsVision: false,
+  },
+  'cursor-grok': {
+    id: 'cursor-grok',
+    label: 'Grok',
+    description: 'xAI Grok via Cursor',
+    hasThinking: false,
+    supportsVision: false,
+  },
+};
+
+/**
+ * Map from legacy model IDs to canonical prefixed IDs
+ */
+export const LEGACY_CURSOR_MODEL_MAP: Record<LegacyCursorModelId, CursorModelId> = {
+  auto: 'cursor-auto',
+  'composer-1': 'cursor-composer-1',
+  'sonnet-4.6': 'cursor-sonnet-4.6',
+  'sonnet-4.6-thinking': 'cursor-sonnet-4.6-thinking',
+  'sonnet-4.5': 'cursor-sonnet-4.5',
+  'sonnet-4.5-thinking': 'cursor-sonnet-4.5-thinking',
+  'opus-4.5': 'cursor-opus-4.5',
+  'opus-4.5-thinking': 'cursor-opus-4.5-thinking',
+  'opus-4.1': 'cursor-opus-4.1',
+  'gemini-3-pro': 'cursor-gemini-3-pro',
+  'gemini-3-flash': 'cursor-gemini-3-flash',
+  grok: 'cursor-grok',
+};
+
+/**
+ * Helper: Check if model has thinking capability
+ */
+export function cursorModelHasThinking(modelId: CursorModelId): boolean {
+  return CURSOR_MODEL_MAP[modelId]?.hasThinking ?? false;
+}
+
+/**
+ * Helper: Get display name for model
+ */
+export function getCursorModelLabel(modelId: CursorModelId): string {
+  return CURSOR_MODEL_MAP[modelId]?.label ?? modelId;
+}
+
+/**
+ * Helper: Get all cursor model IDs
+ */
+export function getAllCursorModelIds(): CursorModelId[] {
+  return Object.keys(CURSOR_MODEL_MAP) as CursorModelId[];
+}
+
+// ============================================================================
+// Model Grouping System
+// Groups related model variants (e.g., gpt-5.2 + gpt-5.2-high) for UI display
+// ============================================================================
+
+/**
+ * Type of variant options available for grouped models
+ */
+export type VariantType = 'compute' | 'thinking' | 'capacity';
+
+/**
+ * A single variant option within a grouped model
+ */
+export interface ModelVariant {
+  id: CursorModelId;
+  label: string;
+  description?: string;
+  badge?: string;
+}
+
+/**
+ * A grouped model that contains multiple variant options
+ */
+export interface GroupedModel {
+  baseId: string;
+  label: string;
+  description: string;
+  variantType: VariantType;
+  variants: ModelVariant[];
+}
+
+/**
+ * Configuration for grouping Cursor models with variants
+ * All variant IDs use 'cursor-' prefix for consistent provider routing.
+ */
+export const CURSOR_MODEL_GROUPS: GroupedModel[] = [
+  // GPT-5.2 group (compute levels)
+  {
+    baseId: 'cursor-gpt-5.2-group',
+    label: 'GPT-5.2',
+    description: 'OpenAI GPT-5.2 via Cursor',
+    variantType: 'compute',
+    variants: [
+      { id: 'cursor-gpt-5.2', label: 'Standard', description: 'Default compute level' },
+      {
+        id: 'cursor-gpt-5.2-high',
+        label: 'High',
+        description: 'High compute level',
+        badge: 'More tokens',
+      },
+    ],
+  },
+  // GPT-5.1 group (compute levels)
+  {
+    baseId: 'cursor-gpt-5.1-group',
+    label: 'GPT-5.1',
+    description: 'OpenAI GPT-5.1 via Cursor',
+    variantType: 'compute',
+    variants: [
+      { id: 'cursor-gpt-5.1', label: 'Standard', description: 'Default compute level' },
+      {
+        id: 'cursor-gpt-5.1-high',
+        label: 'High',
+        description: 'High compute level',
+        badge: 'More tokens',
+      },
+    ],
+  },
+  // GPT-5.1 Codex group (capacity + compute matrix)
+  {
+    baseId: 'cursor-gpt-5.1-codex-group',
+    label: 'GPT-5.1 Codex',
+    description: 'OpenAI GPT-5.1 Codex for code generation',
+    variantType: 'capacity',
+    variants: [
+      { id: 'cursor-gpt-5.1-codex', label: 'Standard', description: 'Default capacity' },
+      {
+        id: 'cursor-gpt-5.1-codex-high',
+        label: 'High',
+        description: 'High compute',
+        badge: 'Compute',
+      },
+      {
+        id: 'cursor-gpt-5.1-codex-max',
+        label: 'Max',
+        description: 'Maximum capacity',
+        badge: 'Capacity',
+      },
+      {
+        id: 'cursor-gpt-5.1-codex-max-high',
+        label: 'Max High',
+        description: 'Max capacity + high compute',
+        badge: 'Premium',
+      },
+    ],
+  },
+  // GPT-5.2 Codex group (capacity + compute matrix)
+  {
+    baseId: 'cursor-gpt-5.2-codex-group',
+    label: 'GPT-5.2 Codex',
+    description: 'OpenAI GPT-5.2 Codex for code generation',
+    variantType: 'capacity',
+    variants: [
+      { id: 'cursor-gpt-5.2-codex', label: 'Standard', description: 'Default capacity' },
+      {
+        id: 'cursor-gpt-5.2-codex-high',
+        label: 'High',
+        description: 'High compute',
+        badge: 'Compute',
+      },
+      {
+        id: 'cursor-gpt-5.2-codex-max',
+        label: 'Max',
+        description: 'Maximum capacity',
+        badge: 'Capacity',
+      },
+      {
+        id: 'cursor-gpt-5.2-codex-max-high',
+        label: 'Max High',
+        description: 'Max capacity + high compute',
+        badge: 'Premium',
+      },
+    ],
+  },
+  // Sonnet 4.6 group (thinking mode)
+  {
+    baseId: 'cursor-sonnet-4.6-group',
+    label: 'Claude Sonnet 4.6',
+    description: 'Anthropic Claude Sonnet 4.6 via Cursor',
+    variantType: 'thinking',
+    variants: [
+      { id: 'cursor-sonnet-4.6', label: 'Standard', description: 'Fast responses' },
+      {
+        id: 'cursor-sonnet-4.6-thinking',
+        label: 'Thinking',
+        description: 'Extended reasoning',
+        badge: 'Reasoning',
+      },
+    ],
+  },
+  // Sonnet 4.5 group (thinking mode)
+  {
+    baseId: 'cursor-sonnet-4.5-group',
+    label: 'Claude Sonnet 4.5',
+    description: 'Anthropic Claude Sonnet 4.5 via Cursor',
+    variantType: 'thinking',
+    variants: [
+      { id: 'cursor-sonnet-4.5', label: 'Standard', description: 'Fast responses' },
+      {
+        id: 'cursor-sonnet-4.5-thinking',
+        label: 'Thinking',
+        description: 'Extended reasoning',
+        badge: 'Reasoning',
+      },
+    ],
+  },
+  // Opus 4.5 group (thinking mode)
+  {
+    baseId: 'cursor-opus-4.5-group',
+    label: 'Claude Opus 4.5',
+    description: 'Anthropic Claude Opus 4.5 via Cursor',
+    variantType: 'thinking',
+    variants: [
+      { id: 'cursor-opus-4.5', label: 'Standard', description: 'Fast responses' },
+      {
+        id: 'cursor-opus-4.5-thinking',
+        label: 'Thinking',
+        description: 'Extended reasoning',
+        badge: 'Reasoning',
+      },
+    ],
+  },
+];
+
+/**
+ * Cursor models that are not part of any group (standalone)
+ * All IDs use 'cursor-' prefix for consistent provider routing.
+ */
+export const STANDALONE_CURSOR_MODELS: CursorModelId[] = [
+  'cursor-auto',
+  'cursor-composer-1',
+  'cursor-opus-4.1',
+  'cursor-gemini-3-pro',
+  'cursor-gemini-3-flash',
+  'cursor-grok',
+];
+
+/**
+ * Get the group that a model belongs to (if any)
+ */
+export function getModelGroup(modelId: CursorModelId): GroupedModel | undefined {
+  return CURSOR_MODEL_GROUPS.find((group) => group.variants.some((v) => v.id === modelId));
+}
+
+/**
+ * Check if any variant in a group is the currently selected model
+ */
+export function isGroupSelected(
+  group: GroupedModel,
+  currentModelId: CursorModelId | undefined
+): boolean {
+  if (!currentModelId) return false;
+  return group.variants.some((v) => v.id === currentModelId);
+}
+
+/**
+ * Get the currently selected variant within a group
+ */
+export function getSelectedVariant(
+  group: GroupedModel,
+  currentModelId: CursorModelId | undefined
+): ModelVariant | undefined {
+  if (!currentModelId) return undefined;
+  return group.variants.find((v) => v.id === currentModelId);
+}
+
+/**
+ * Check if a model ID belongs to a group
+ */
+export function isGroupedCursorModel(modelId: CursorModelId): boolean {
+  return CURSOR_MODEL_GROUPS.some((group) => group.variants.some((v) => v.id === modelId));
+}
diff --git a/temp_repo/libs/types/src/editor.ts b/temp_repo/libs/types/src/editor.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c74e146cc1c0dd1c437bda166284d7eeb9a0972b
--- /dev/null
+++ b/temp_repo/libs/types/src/editor.ts
@@ -0,0 +1,13 @@
+/**
+ * Editor types for the "Open In" functionality
+ */
+
+/**
+ * Information about an available code editor
+ */
+export interface EditorInfo {
+  /** Display name of the editor (e.g., "VS Code", "Cursor") */
+  name: string;
+  /** CLI command or open command to launch the editor */
+  command: string;
+}
diff --git a/temp_repo/libs/types/src/enhancement.ts b/temp_repo/libs/types/src/enhancement.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cc50db963d6680ea3a52268279e024c412d8c7d1
--- /dev/null
+++ b/temp_repo/libs/types/src/enhancement.ts
@@ -0,0 +1,16 @@
+/**
+ * Enhancement types for AI-powered task description improvements
+ */
+
+/**
+ * Available enhancement modes for transforming task descriptions
+ */
+export type EnhancementMode = 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer';
+
+/**
+ * Example input/output pair for few-shot learning
+ */
+export interface EnhancementExample {
+  input: string;
+  output: string;
+}
diff --git a/temp_repo/libs/types/src/error.ts b/temp_repo/libs/types/src/error.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ea1c5ec11e3f6376039bf7feeb1135e9393cc9e9
--- /dev/null
+++ b/temp_repo/libs/types/src/error.ts
@@ -0,0 +1,30 @@
+/**
+ * Error type classification
+ */
+export type ErrorType =
+  | 'authentication'
+  | 'cancellation'
+  | 'abort'
+  | 'execution'
+  | 'rate_limit'
+  | 'quota_exhausted'
+  | 'model_not_found'
+  | 'stream_disconnected'
+  | 'unknown';
+
+/**
+ * Classified error information
+ */
+export interface ErrorInfo {
+  type: ErrorType;
+  message: string;
+  isAbort: boolean;
+  isAuth: boolean;
+  isCancellation: boolean;
+  isRateLimit: boolean;
+  isQuotaExhausted: boolean; // Session/weekly usage limit reached
+  isModelNotFound: boolean; // Model does not exist or user lacks access
+  isStreamDisconnected: boolean; // Stream disconnected before completion
+  retryAfter?: number; // Seconds to wait before retrying (for rate limit errors)
+  originalError: unknown;
+}
diff --git a/temp_repo/libs/types/src/event-history.ts b/temp_repo/libs/types/src/event-history.ts
new file mode 100644
index 0000000000000000000000000000000000000000..09ff92aa2506a5cf3652d62ae172003b93cc2456
--- /dev/null
+++ b/temp_repo/libs/types/src/event-history.ts
@@ -0,0 +1,123 @@
+/**
+ * Event History Types - Stored event records for debugging and replay
+ *
+ * Events are stored on disk to allow users to:
+ * - View historical events for debugging
+ * - Replay events with custom hooks
+ * - Test hook configurations against past events
+ */
+
+import type { EventHookTrigger } from './settings.js';
+
+/**
+ * StoredEvent - A single event record stored on disk
+ *
+ * Contains all information needed to replay the event or inspect what happened.
+ */
+export interface StoredEvent {
+  /** Unique identifier for this event record */
+  id: string;
+  /** The hook trigger type this event maps to */
+  trigger: EventHookTrigger;
+  /** ISO timestamp when the event occurred */
+  timestamp: string;
+  /** ID of the feature involved (if applicable) */
+  featureId?: string;
+  /** Name of the feature involved (if applicable) */
+  featureName?: string;
+  /** Path to the project where the event occurred */
+  projectPath: string;
+  /** Name of the project (extracted from path) */
+  projectName: string;
+  /** Error message if this was an error event */
+  error?: string;
+  /** Error classification if applicable */
+  errorType?: string;
+  /** Whether the feature passed (for completion events) */
+  passes?: boolean;
+  /** Additional context/metadata for the event */
+  metadata?: Record<string, unknown>;
+}
+
+/**
+ * StoredEventIndex - Quick lookup index for event history
+ *
+ * Stored separately for fast listing without loading full event data.
+ */
+export interface StoredEventIndex {
+  /** Version for future migrations */
+  version: number;
+  /** Array of event summaries for quick listing */
+  events: StoredEventSummary[];
+}
+
+/**
+ * StoredEventSummary - Minimal event info for listing
+ */
+export interface StoredEventSummary {
+  /** Event ID */
+  id: string;
+  /** Trigger type */
+  trigger: EventHookTrigger;
+  /** When it occurred */
+  timestamp: string;
+  /** Feature name for display (if applicable) */
+  featureName?: string;
+  /** Feature ID (if applicable) */
+  featureId?: string;
+}
+
+/**
+ * EventHistoryFilter - Options for filtering event history
+ */
+export interface EventHistoryFilter {
+  /** Filter by trigger type */
+  trigger?: EventHookTrigger;
+  /** Filter by feature ID */
+  featureId?: string;
+  /** Filter events after this timestamp */
+  since?: string;
+  /** Filter events before this timestamp */
+  until?: string;
+  /** Maximum number of events to return */
+  limit?: number;
+  /** Number of events to skip (for pagination) */
+  offset?: number;
+}
+
+/**
+ * EventReplayResult - Result of replaying an event
+ */
+export interface EventReplayResult {
+  /** Event that was replayed */
+  eventId: string;
+  /** Number of hooks that were triggered */
+  hooksTriggered: number;
+  /** Results from each hook execution */
+  hookResults: EventReplayHookResult[];
+}
+
+/**
+ * EventReplayHookResult - Result of a single hook execution during replay
+ */
+export interface EventReplayHookResult {
+  /** Hook ID */
+  hookId: string;
+  /** Hook name (if set) */
+  hookName?: string;
+  /** Whether the hook executed successfully */
+  success: boolean;
+  /** Error message if failed */
+  error?: string;
+  /** Execution time in milliseconds */
+  durationMs: number;
+}
+
+/** Current version of the event history index schema */
+export const EVENT_HISTORY_VERSION = 1;
+
+/** Default empty event history index */
+export const DEFAULT_EVENT_HISTORY_INDEX: StoredEventIndex = {
+  version: EVENT_HISTORY_VERSION,
+  events: [],
+};
diff --git a/temp_repo/libs/types/src/event.ts b/temp_repo/libs/types/src/event.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0fd24d648bf1e26638bdcf49b19d634dbd9a56f5
--- /dev/null
+++ b/temp_repo/libs/types/src/event.ts
@@ -0,0 +1,99 @@
+/**
+ * Event types for AutoMaker event system
+ */
+
+export type EventType =
+  | 'agent:stream'
+  | 'auto-mode:event'
+  | 'auto-mode:started'
+  | 'auto-mode:stopped'
+  | 'auto-mode:idle'
+  | 'auto-mode:error'
+  | 'backlog-plan:event'
+  | 'feature:created'
+  | 'feature:started'
+  | 'feature:completed'
+  | 'feature:stopped'
+  | 'feature:error'
+  | 'feature:progress'
+  | 'feature:tool-use'
+  | 'feature:follow-up-started'
+  | 'feature:follow-up-completed'
+  | 'feature:verified'
+  | 'feature:committed'
+  | 'project:analysis-started'
+  | 'project:analysis-progress'
+  | 'project:analysis-completed'
+  | 'project:analysis-error'
+  | 'spec-regeneration:event'
+  | 'issue-validation:event'
+  | 'ideation:stream'
+  | 'ideation:session-started'
+  | 'ideation:session-ended'
+  | 'ideation:analysis'
+  | 'ideation:analysis-started'
+  | 'ideation:analysis-progress'
+  | 'ideation:analysis-complete'
+  | 'ideation:analysis-error'
+  | 'ideation:suggestions'
+  | 'ideation:idea-created'
+  | 'ideation:idea-updated'
+  | 'ideation:idea-deleted'
+  | 'ideation:idea-converted'
+  | 'worktree:copy-files:copied'
+  | 'worktree:copy-files:skipped'
+  | 'worktree:copy-files:failed'
+  | 'worktree:init-started'
+  | 'worktree:init-output'
+  | 'worktree:init-completed'
+  | 'dev-server:starting'
+  | 'dev-server:started'
+  | 'dev-server:output'
+  | 'dev-server:url-detected'
+  | 'dev-server:stopped'
+  | 'test-runner:started'
+  | 'test-runner:progress'
+  | 'test-runner:output'
+  | 'test-runner:completed'
+  | 'test-runner:error'
+  | 'test-runner:result'
+  | 'cherry-pick:started'
+  | 'cherry-pick:success'
+  | 'cherry-pick:conflict'
+  | 'cherry-pick:failure'
+  | 'cherry-pick:verify-failed'
+  | 'cherry-pick:abort'
+  | 'rebase:started'
+  | 'rebase:success'
+  | 'rebase:conflict'
+  | 'rebase:failure'
+  | 'stash:start'
+  | 'stash:progress'
+  | 'stash:conflicts'
+  | 'stash:success'
+  | 'stash:failure'
+  | 'merge:start'
+  | 'merge:success'
+  | 'merge:conflict'
+  | 'merge:error'
+  | 'conflict:aborted'
+  | 'conflict:resolved'
+  | 'branchCommitLog:start'
+  | 'branchCommitLog:progress'
+  | 'branchCommitLog:done'
+  | 'branchCommitLog:error'
+  | 'commitLog:start'
+  | 'commitLog:progress'
+  | 'commitLog:complete'
+  | 'commitLog:error'
+  | 'switch:start'
+  | 'switch:stash'
+  | 'switch:checkout'
+  | 'switch:pop'
+  | 'switch:done'
+  | 'switch:error'
+  | 'notification:created'
+  | 'worktree:deleted'
+  | 'feature:migrated';
+
+export type EventCallback = (type: EventType, payload: unknown) => void;
diff --git a/temp_repo/libs/types/src/feature.ts b/temp_repo/libs/types/src/feature.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c949cff06ca3d3334d38bc8392ed7f42ccd0ff8a
--- /dev/null
+++ b/temp_repo/libs/types/src/feature.ts
@@ -0,0 +1,168 @@
+/**
+ * Feature types for AutoMaker feature management
+ */
+
+import type { PlanningMode, ThinkingLevel } from './settings.js';
+import type { ReasoningEffort } from './provider.js';
+
+/**
+ * A single entry in the description history
+ */
+export interface DescriptionHistoryEntry {
+  description: string;
+  timestamp: string; // ISO date string
+  source: 'initial' | 'enhance' | 'edit'; // What triggered this version
+  enhancementMode?: 'improve' | 'technical' | 'simplify' | 'acceptance' | 'ux-reviewer'; // Only for 'enhance' source
+}
+
+export interface FeatureImagePath {
+  id: string;
+  path: string;
+  filename: string;
+  mimeType: string;
+  [key: string]: unknown;
+}
+
+export interface FeatureTextFilePath {
+  id: string;
+  path: string;
+  filename: string;
+  mimeType: string;
+  content: string; // Text content of the file
+  [key: string]: unknown;
+}
+
+/**
+ * A parsed task extracted from a spec/plan
+ * Used for spec and full planning modes to track individual task progress
+ */
+export interface ParsedTask {
+  /** Task ID, e.g., "T001" */
+  id: string;
+  /** Task description, e.g., "Create user model" */
+  description: string;
+  /** Optional file path for the task, e.g., "src/models/user.ts" */
+  filePath?: string;
+  /** Optional phase name for full mode, e.g., "Phase 1: Foundation" */
+  phase?: string;
+  /** Task execution status */
+  status: 'pending' | 'in_progress' | 'completed' | 'failed';
+  /** Optional task summary, e.g., "Created User model with email and password fields" */
+  summary?: string;
+}
+
+/**
+ * Plan specification status for feature planning modes
+ * Tracks the plan generation and approval workflow
+ */
+export interface PlanSpec {
+  /** Current status of the plan */
+  status: 'pending' | 'generating' | 'generated' | 'approved' | 'rejected';
+  /** The actual spec/plan markdown content */
+  content?: string;
+  /** Version number for tracking plan revisions */
+  version: number;
+  /** ISO timestamp when the spec was generated */
+  generatedAt?: string;
+  /** ISO timestamp when the spec was approved */
+  approvedAt?: string;
+  /** True if user has reviewed the spec */
+  reviewedByUser: boolean;
+  /** Number of completed tasks */
+  tasksCompleted?: number;
+  /** Total number of tasks in the spec */
+  tasksTotal?: number;
+  /** ID of the task currently being worked on */
+  currentTaskId?: string;
+  /** Parsed tasks from the spec content */
+  tasks?: ParsedTask[];
+}
+
+export interface Feature {
+  id: string;
+  title?: string;
+  titleGenerating?: boolean;
+  category: string;
+  description: string;
+  passes?: boolean;
+  priority?: number;
+  status?: string;
+  dependencies?: string[];
+  spec?: string;
+  model?: string;
+  imagePaths?: Array<string | FeatureImagePath | { path: string; [key: string]: unknown }>;
+  textFilePaths?: FeatureTextFilePath[];
+  // Branch info - worktree path is derived at runtime from branchName
+  branchName?: string | null; // Name of the feature branch (undefined/null = use current worktree)
+  skipTests?: boolean;
+  excludedPipelineSteps?: string[]; // Array of pipeline step IDs to skip for this feature
+  thinkingLevel?: ThinkingLevel;
+  reasoningEffort?: ReasoningEffort;
+  providerId?: string;
+  planningMode?: PlanningMode;
+  requirePlanApproval?: boolean;
+  planSpec?: PlanSpec;
+  error?: string;
+  summary?: string;
+  createdAt?: string; // ISO timestamp when feature was created
+  startedAt?: string;
+  descriptionHistory?: DescriptionHistoryEntry[]; // History of description changes
+  [key: string]: unknown; // Keep catch-all for extensibility
+}
+
+export type FeatureStatus = 'pending' | 'running' | 'completed' | 'failed' | 'verified';
+
+/**
+ * Export format for a feature, used when exporting features to share or backup
+ */
+export interface FeatureExport {
+  /** Export format version for compatibility checking */
+  version: string;
+  /** The feature data being exported */
+  feature: Feature;
+  /** ISO date string when the export was created */
+  exportedAt: string;
+  /** Optional identifier of who/what performed the export */
+  exportedBy?: string;
+  /** Additional metadata about the export context */
+  metadata?: {
+    projectName?: string;
+    projectPath?: string;
+    branch?: string;
+    [key: string]: unknown;
+  };
+}
+
+/**
+ * Options for importing a feature
+ */
+export interface FeatureImport {
+  /** The feature data to import (can be raw Feature or wrapped FeatureExport) */
+  data: Feature | FeatureExport;
+  /** Whether to overwrite an existing feature with the same ID */
+  overwrite?: boolean;
+  /** Whether to preserve the original branchName or ignore it */
+  preserveBranchInfo?: boolean;
+  /** Optional new ID to assign (if not provided, uses the feature's existing ID) */
+  newId?: string;
+  /** Optional new category to assign */
+  targetCategory?: string;
+}
+
+/**
+ * Result of a feature import operation
+ */
+export interface FeatureImportResult {
+  /** Whether the import was successful */
+  success: boolean;
+  /** The ID of the imported feature */
+  featureId?: string;
+  /** ISO date string when the import was completed */
+  importedAt: string;
+  /** Non-fatal warnings encountered during import */
+  warnings?: string[];
+  /** Errors that caused import failure */
+  errors?: string[];
+  /** Whether an existing feature was overwritten */
+  wasOverwritten?: boolean;
+}
diff --git a/temp_repo/libs/types/src/gemini-models.ts b/temp_repo/libs/types/src/gemini-models.ts
new file mode 100644
index 0000000000000000000000000000000000000000..340ee4d8424b7e622949773120a89aae0746616f
--- /dev/null
+++ b/temp_repo/libs/types/src/gemini-models.ts
@@ -0,0 +1,101 @@
+/**
+ * Gemini CLI Model Definitions
+ *
+ * Defines available models for Gemini CLI integration.
+ * Based on https://github.com/google-gemini/gemini-cli
+ */
+
+/**
+ * Gemini model configuration
+ */
+export interface GeminiModelConfig {
+  label: string;
+  description: string;
+  supportsVision: boolean;
+  supportsThinking: boolean;
+  contextWindow?: number;
+}
+
+/**
+ * Available Gemini models via the Gemini CLI
+ * Models from Gemini 2.5 and 3.0 series
+ *
+ * Model IDs use 'gemini-' prefix for consistent provider routing (like Cursor).
+ * When passed to the CLI, the prefix is part of the actual model name.
+ */
+export const GEMINI_MODEL_MAP = {
+  // Gemini 3 Series (latest)
+  'gemini-3-pro-preview': {
+    label: 'Gemini 3 Pro Preview',
+    description: 'Most advanced Gemini model with deep reasoning capabilities.',
+    supportsVision: true,
+    supportsThinking: true,
+    contextWindow: 1000000,
+  },
+  'gemini-3-flash-preview': {
+    label: 'Gemini 3 Flash Preview',
+    description: 'Fast Gemini 3 model for quick tasks.',
+    supportsVision: true,
+    supportsThinking: true,
+    contextWindow: 1000000,
+  },
+  // Gemini 2.5 Series
+  'gemini-2.5-pro': {
+    label: 'Gemini 2.5 Pro',
+    description: 'Advanced model with strong reasoning and 1M context.',
+    supportsVision: true,
+    supportsThinking: true,
+    contextWindow: 1000000,
+  },
+  'gemini-2.5-flash': {
+    label: 'Gemini 2.5 Flash',
+    description: 'Balanced speed and capability for most tasks.',
+    supportsVision: true,
+    supportsThinking: true,
+    contextWindow: 1000000,
+  },
+  'gemini-2.5-flash-lite': {
+    label: 'Gemini 2.5 Flash Lite',
+    description: 'Fastest Gemini model for simple tasks.',
+    supportsVision: true,
+    supportsThinking: false,
+    contextWindow: 1000000,
+  },
+} as const satisfies Record<string, GeminiModelConfig>;
+
+/**
+ * Gemini model ID type (keys already have gemini- prefix)
+ */
+export type GeminiModelId = keyof typeof GEMINI_MODEL_MAP;
+
+/**
+ * Get all Gemini model IDs
+ */
+export function getAllGeminiModelIds(): GeminiModelId[] {
+  return Object.keys(GEMINI_MODEL_MAP) as GeminiModelId[];
+}
+
+/**
+ * Default Gemini model (balanced choice)
+ */
+export const DEFAULT_GEMINI_MODEL: GeminiModelId = 'gemini-2.5-flash';
+
+/**
+ * Thinking level configuration for Gemini models
+ * Note: The Gemini CLI does not currently expose a --thinking-level flag.
+ * Thinking control (thinkingLevel/thinkingBudget) is available via the Gemini API.
+ * This type is defined for potential future CLI support or API-level configuration.
+ */
+export type GeminiThinkingLevel = 'off' | 'low' | 'medium' | 'high';
+
+/**
+ * Gemini CLI authentication status
+ */
+export interface GeminiAuthStatus {
+  authenticated: boolean;
+  method: 'google_login' | 'api_key' | 'vertex_ai' | 'none';
+  hasApiKey?: boolean;
+  hasEnvApiKey?: boolean;
+  hasCredentialsFile?: boolean;
+  error?: string;
+}
diff --git a/temp_repo/libs/types/src/ideation.ts b/temp_repo/libs/types/src/ideation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..be2c5228c9c340018902f06886fa5caf4a042b1f
--- /dev/null
+++ b/temp_repo/libs/types/src/ideation.ts
@@ -0,0 +1,262 @@
+/**
+ * Ideation types for AutoMaker brainstorming and idea management
+ */
+
+// ============================================================================
+// Core Types
+// ============================================================================
+
+export type IdeaCategory =
+  | 'feature'
+  | 'ux-ui'
+  | 'dx'
+  | 'growth'
+  | 'technical'
+  | 'security'
+  | 'performance'
+  | 'accessibility'
+  | 'analytics';
+export type IdeaStatus = 'raw' | 'refined' | 'ready' | 'archived';
+export type ImpactLevel = 'low' | 'medium' | 'high';
+export type EffortLevel = 'low' | 'medium' | 'high';
+
+// ============================================================================
+// Idea Entity
+// ============================================================================
+
+export interface IdeaAttachment {
+  id: string;
+  type: 'image' | 'link' | 'reference';
+  path?: string;
+  url?: string;
+  description?: string;
+  [key: string]: unknown;
+}
+
+export interface Idea {
+  id: string;
+  title: string;
+  description: string;
+  category: IdeaCategory;
+  status: IdeaStatus;
+  impact: ImpactLevel;
+  effort: EffortLevel;
+
+  // Conversation context
+  conversationId?: string;
+  sourcePromptId?: string;
+
+  // Content
+  attachments?: IdeaAttachment[];
+  userStories?: string[];
+  notes?: string;
+
+  // Metadata
+  createdAt: string;
+  updatedAt: string;
+  archivedAt?: string;
+
+  // Extensibility
+  [key: string]: unknown;
+}
+
+// ============================================================================
+// Ideation Session
+// ============================================================================
+
+export type IdeationSessionStatus = 'active' | 'completed' | 'abandoned';
+
+export interface IdeationSession {
+  id: string;
+  projectPath: string;
+  promptCategory?: IdeaCategory;
+  promptId?: string;
+  status: IdeationSessionStatus;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface IdeationMessage {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: string;
+  savedAsIdeaId?: string;
+}
+
+export interface IdeationSessionWithMessages extends IdeationSession {
+  messages: IdeationMessage[];
+}
+
+// ============================================================================
+// Guided Prompts
+// ============================================================================
+
+export interface PromptCategory {
+  id: IdeaCategory;
+  name: string;
+  icon: string;
+  description: string;
+}
+
+export interface IdeationPrompt {
+  id: string;
+  category: IdeaCategory;
+  title: string;
+  description: string;
+  prompt: string;
+  icon?: string;
+}
+
+// ============================================================================
+// Project Analysis
+// ============================================================================
+
+export interface AnalysisFileInfo {
+  path: string;
+  type: 'route' | 'component' | 'service' | 'model' | 'config' | 'test' | 'other';
+  name: string;
+}
+
+export interface AnalysisSuggestion {
+  id: string;
+  category: IdeaCategory;
+  title: string;
+  description: string;
+  rationale: string;
+  relatedFiles?: string[];
+  priority: 'high' | 'medium' | 'low';
+}
+
+export interface ProjectAnalysisResult {
+  projectPath: string;
+  analyzedAt: string;
+
+  // Structure analysis
+  totalFiles: number;
+  routes: AnalysisFileInfo[];
+  components: AnalysisFileInfo[];
+  services: AnalysisFileInfo[];
+
+  // Tech stack detection
+  framework?: string;
+  language?: string;
+  dependencies?: string[];
+
+  // AI-generated suggestions
+  suggestions: AnalysisSuggestion[];
+
+  // Summary
+  summary: string;
+}
+
+// ============================================================================
+// API Types
+// ============================================================================
+
+export interface StartSessionOptions {
+  promptId?: string;
+  promptCategory?: IdeaCategory;
+  initialMessage?: string;
+}
+
+export interface SendMessageOptions {
+  imagePaths?: string[];
+  model?: string;
+}
+
+export interface CreateIdeaInput {
+  title: string;
+  description: string;
+  category: IdeaCategory;
+  status?: IdeaStatus;
+  impact?: ImpactLevel;
+  effort?: EffortLevel;
+  conversationId?: string;
+  sourcePromptId?: string;
+  userStories?: string[];
+  notes?: string;
+}
+
+export interface UpdateIdeaInput {
+  title?: string;
+  description?: string;
+  category?: IdeaCategory;
+  status?: IdeaStatus;
+  impact?: ImpactLevel;
+  effort?: EffortLevel;
+  userStories?: string[];
+  notes?: string;
+}
+
+export interface ConvertToFeatureOptions {
+  column?: string;
+  dependencies?: string[];
+  tags?: string[];
+  keepIdea?: boolean;
+}
+
+// ============================================================================
+// Event Types
+// ============================================================================
+
+export type IdeationEventType =
+  | 'ideation:stream'
+  | 'ideation:session-started'
+  | 'ideation:session-ended'
+  | 'ideation:analysis-started'
+  | 'ideation:analysis-progress'
+  | 'ideation:analysis-complete'
+  | 'ideation:analysis-error';
+
+export interface IdeationStreamEvent {
+  type: 'ideation:stream';
+  sessionId: string;
+  content: string;
+  done: boolean;
+}
+
+export interface IdeationAnalysisEvent {
+  type:
+    | 'ideation:analysis-started'
+    | 'ideation:analysis-progress'
+    | 'ideation:analysis-complete'
+    | 'ideation:analysis-error';
+  projectPath: string;
+  progress?: number;
+  message?: string;
+  result?: ProjectAnalysisResult;
+  error?: string;
+}
+
+// ============================================================================
+// Context Sources Configuration
+// ============================================================================
+
+/**
+ * Configuration for which context sources to include when generating ideas.
+ * All values default to true for backward compatibility.
+ */
+export interface IdeationContextSources {
+  /** Include .automaker/context/*.md|.txt files */
+  useContextFiles: boolean;
+  /** Include .automaker/memory/*.md files */
+  useMemoryFiles: boolean;
+  /** Include existing features from the board */
+  useExistingFeatures: boolean;
+  /** Include existing ideas from ideation */
+  useExistingIdeas: boolean;
+  /** Include app specification (.automaker/app_spec.txt) */
+  useAppSpec: boolean;
+}
+
+/**
+ * Default context sources configuration - all enabled for backward compatibility
+ */
+export const DEFAULT_IDEATION_CONTEXT_SOURCES: IdeationContextSources = {
+  useContextFiles: true,
+  useMemoryFiles: true,
+  useExistingFeatures: true,
+  useExistingIdeas: true,
+  useAppSpec: true,
+};
diff --git a/temp_repo/libs/types/src/image.ts b/temp_repo/libs/types/src/image.ts
new file mode 100644
index 0000000000000000000000000000000000000000..beddc0717fc478f975a133018fed7a6cd38631d3
--- /dev/null
+++ b/temp_repo/libs/types/src/image.ts
@@ -0,0 +1,21 @@
+/**
+ * Image data with base64 encoding and metadata
+ */
+export interface ImageData {
+  base64: string;
+  mimeType: string;
+  filename: string;
+  originalPath: string;
+}
+
+/**
+ * Content block for image (Claude SDK format)
+ */
+export interface ImageContentBlock {
+  type: 'image';
+  source: {
+    type: 'base64';
+    media_type: string;
+    data: string;
+  };
+}
diff --git a/temp_repo/libs/types/src/index.ts b/temp_repo/libs/types/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8f085b5bc6237810c8c196172bfbcfdc2d24c893
--- /dev/null
+++ b/temp_repo/libs/types/src/index.ts
@@ -0,0 +1,400 @@
+/**
+ * @automaker/types
+ * Shared type definitions for AutoMaker
+ */
+
+// Provider types
+export type {
+  ProviderConfig,
+  ConversationMessage,
+  ExecuteOptions,
+  ContentBlock,
+  ProviderMessage,
+  InstallationStatus,
+  ValidationResult,
+  ModelDefinition,
+  McpServerConfig,
+  McpStdioServerConfig,
+  McpSSEServerConfig,
+  McpHttpServerConfig,
+  AgentDefinition,
+  ReasoningEffort,
+  // System prompt configuration for CLAUDE.md auto-loading
+  SystemPromptPreset,
+} from './provider.js';
+
+// Provider constants and utilities
+export {
+  DEFAULT_TIMEOUT_MS,
+  REASONING_TIMEOUT_MULTIPLIERS,
+  calculateReasoningTimeout,
+} from './provider.js';
+
+// Codex CLI types
+export type {
+  CodexSandboxMode,
+  CodexApprovalPolicy,
+  CodexCliConfig,
+  CodexAuthStatus,
+  // Event types for CLI event parsing
+  CodexEventType,
+  CodexItemType,
+  CodexEvent,
+} from './codex.js';
+export * from './codex-models.js';
+
+// Codex App-Server JSON-RPC types
+export type {
+  AppServerModelResponse,
+  AppServerModel,
+  AppServerReasoningEffort,
+  AppServerAccountResponse,
+  AppServerAccount,
+  AppServerRateLimitsResponse,
+  AppServerRateLimits,
+  AppServerRateLimitWindow,
+  JsonRpcRequest,
+  JsonRpcResponse,
+} from './codex-app-server.js';
+
+// Feature types
+export type {
+  Feature,
+  FeatureImagePath,
+  FeatureTextFilePath,
+  FeatureStatus,
+  DescriptionHistoryEntry,
+  FeatureExport,
+  FeatureImport,
+  FeatureImportResult,
+  ParsedTask,
+  PlanSpec,
+} from './feature.js';
+
+// Session types
+export type {
+  AgentSession,
+  SessionListItem,
+  CreateSessionParams,
+  UpdateSessionParams,
+} from './session.js';
+
+// Error types
+export type { ErrorType, ErrorInfo } from './error.js';
+
+// Image types
+export type { ImageData, ImageContentBlock } from './image.js';
+
+// Model types and constants
+export {
+  CLAUDE_MODEL_MAP,
+  CLAUDE_CANONICAL_MAP,
+  LEGACY_CLAUDE_ALIAS_MAP,
+  CODEX_MODEL_MAP,
+  CODEX_MODEL_IDS,
+  REASONING_CAPABLE_MODELS,
+  supportsReasoningEffort,
+  normalizeReasoningEffortForModel,
+  getAllCodexModelIds,
+  DEFAULT_MODELS,
+  type ClaudeCanonicalId,
+  type ModelAlias,
+  type CodexModelId,
+  type AgentModel,
+  type ModelId,
+} from './model.js';
+
+// Event types
+export type { EventType, EventCallback } from './event.js';
+
+// Spec types
+export type { SpecOutput } from './spec.js';
+export { specOutputSchema } from './spec.js';
+
+// Enhancement types
+export type { EnhancementMode, EnhancementExample } from './enhancement.js';
+
+// Prompt customization types
+export type {
+  CustomPrompt,
+  AutoModePrompts,
+  AgentPrompts,
+  BacklogPlanPrompts,
+  EnhancementPrompts,
+  CommitMessagePrompts,
+  TitleGenerationPrompts,
+  IssueValidationPrompts,
+  IdeationPrompts,
+  AppSpecPrompts,
+  ContextDescriptionPrompts,
+  SuggestionsPrompts,
+  TaskExecutionPrompts,
+  PromptCustomization,
+  ResolvedAutoModePrompts,
+  ResolvedAgentPrompts,
+  ResolvedBacklogPlanPrompts,
+  ResolvedEnhancementPrompts,
+  ResolvedCommitMessagePrompts,
+  ResolvedTitleGenerationPrompts,
+  ResolvedIssueValidationPrompts,
+  ResolvedIdeationPrompts,
+  ResolvedAppSpecPrompts,
+  ResolvedContextDescriptionPrompts,
+  ResolvedSuggestionsPrompts,
+  ResolvedTaskExecutionPrompts,
+} from './prompts.js';
+export { DEFAULT_PROMPT_CUSTOMIZATION } from './prompts.js';
+
+// Settings types and constants
+export type {
+  ThemeMode,
+  SidebarStyle,
+  PlanningMode,
+  ThinkingLevel,
+  ServerLogLevel,
+  ModelProvider,
+  PhaseModelEntry,
+  PhaseModelConfig,
+  PhaseModelKey,
+  KeyboardShortcuts,
+  MCPToolInfo,
+  MCPServerConfig,
+  ProjectRef,
+  TrashedProjectRef,
+  ChatSessionRef,
+  GlobalSettings,
+  Credentials,
+  BoardBackgroundSettings,
+  WorktreeInfo,
+  ProjectSettings,
+  // Event hook types
+  EventHookTrigger,
+  EventHookHttpMethod,
+  EventHookShellAction,
+  EventHookHttpAction,
+  EventHookNtfyAction,
+  EventHookAction,
+  EventHook,
+  EventHookContext,
+  // Ntfy notification types
+  NtfyAuthenticationType,
+  NtfyEndpointConfig,
+  // Feature template types
+  FeatureTemplate,
+  // Claude-compatible provider types (new)
+  ApiKeySource,
+  ClaudeCompatibleProviderType,
+  ClaudeModelAlias,
+  ProviderModel,
+  ClaudeCompatibleProvider,
+  ClaudeCompatibleProviderTemplate,
+  // Claude API profile types (deprecated)
+  ClaudeApiProfile,
+  ClaudeApiProfileTemplate,
+  // Terminal prompt theme type
+  TerminalPromptTheme,
+} from './settings.js';
+export {
+  DEFAULT_KEYBOARD_SHORTCUTS,
+  DEFAULT_PHASE_MODELS,
+  DEFAULT_GLOBAL_SETTINGS,
+  DEFAULT_CREDENTIALS,
+  DEFAULT_PROJECT_SETTINGS,
+  DEFAULT_MAX_CONCURRENCY,
+  SETTINGS_VERSION,
+  CREDENTIALS_VERSION,
+  PROJECT_SETTINGS_VERSION,
+  THINKING_TOKEN_BUDGET,
+  getThinkingTokenBudget,
+  isAdaptiveThinkingModel,
+  getThinkingLevelsForModel,
+  normalizeThinkingLevelForModel,
+  getDefaultThinkingLevel,
+  // Event hook constants
+  EVENT_HOOK_TRIGGER_LABELS,
+  // Feature template constants
+  DEFAULT_FEATURE_TEMPLATES,
+  // Claude-compatible provider templates (new)
+  CLAUDE_PROVIDER_TEMPLATES,
+  // Claude API profile constants (deprecated)
+  CLAUDE_API_PROFILE_TEMPLATES,
+} from './settings.js';
+
+// Model display constants
+export type { ModelOption, ThinkingLevelOption, ReasoningEffortOption } from './model-display.js';
+export {
+  CLAUDE_MODELS,
+  GEMINI_MODELS,
+  THINKING_LEVELS,
+  THINKING_LEVEL_LABELS,
+  REASONING_EFFORT_LEVELS,
+  REASONING_EFFORT_LABELS,
+  getModelDisplayName,
+} from './model-display.js';
+
+// Issue validation types
+export type {
+  IssueValidationVerdict,
+  IssueValidationConfidence,
+  IssueComplexity,
+  PRRecommendation,
+  PRAnalysis,
+  LinkedPRInfo,
+  IssueValidationInput,
+  IssueValidationRequest,
+  IssueValidationResult,
+  IssueValidationResponse,
+  IssueValidationErrorResponse,
+  IssueValidationEvent,
+  StoredValidation,
+  GitHubCommentAuthor,
+  GitHubComment,
+  IssueCommentsResult,
+} from './issue-validation.js';
+
+// Backlog plan types
+export type {
+  BacklogChange,
+  DependencyUpdate,
+  BacklogPlanResult,
+  BacklogPlanEvent,
+  BacklogPlanRequest,
+  BacklogPlanApplyResult,
+} from './backlog-plan.js';
+
+// Cursor types
+export * from './cursor-models.js';
+export * from './cursor-cli.js';
+
+// OpenCode types
+export * from './opencode-models.js';
+
+// Gemini types
+export * from './gemini-models.js';
+
+// Copilot types
+export * from './copilot-models.js';
+
+// Provider utilities
+export {
+  PROVIDER_PREFIXES,
+  isCursorModel,
+  isClaudeModel,
+  isCodexModel,
+  isOpencodeModel,
+  isGeminiModel,
+  isCopilotModel,
+  getModelProvider,
+  stripProviderPrefix,
+  addProviderPrefix,
+  getBareModelId,
+  normalizeModelString,
+  validateBareModelId,
+  supportsStructuredOutput,
+  PROVIDER_PREFIX_EXCEPTIONS,
+} from './provider-utils.js';
+
+// Model migration utilities
+export {
+  isLegacyCursorModelId,
+  isLegacyOpencodeModelId,
+  isLegacyClaudeAlias,
+  migrateModelId,
+  migrateCursorModelIds,
+  migrateOpencodeModelIds,
+  migratePhaseModelEntry,
+  getBareModelIdForCli,
+} from './model-migration.js';
+
+// Pipeline types
+export type {
+  PipelineStep,
+  PipelineConfig,
+  PipelineStatus,
+  FeatureStatusWithPipeline,
+} from './pipeline.js';
+export { isPipelineStatus } from './pipeline.js';
+
+// Port configuration
+export { STATIC_PORT, SERVER_PORT, RESERVED_PORTS } from './ports.js';
+
+// Editor types
+export type { EditorInfo } from './editor.js';
+
+// Ideation types
+export type {
+  IdeaCategory,
+  IdeaStatus,
+  ImpactLevel,
+  EffortLevel,
+  IdeaAttachment,
+  Idea,
+  IdeationSessionStatus,
+  IdeationSession,
+  IdeationMessage,
+  IdeationSessionWithMessages,
+  PromptCategory,
+  IdeationPrompt,
+  AnalysisFileInfo,
+  AnalysisSuggestion,
+  ProjectAnalysisResult,
+  StartSessionOptions,
+  SendMessageOptions,
+  CreateIdeaInput,
+  UpdateIdeaInput,
+  ConvertToFeatureOptions,
+  IdeationEventType,
+  IdeationStreamEvent,
+  IdeationAnalysisEvent,
+  IdeationContextSources,
+} from './ideation.js';
+export { DEFAULT_IDEATION_CONTEXT_SOURCES } from './ideation.js';
+
+// Notification types
+export type { NotificationType, Notification, NotificationsFile } from './notification.js';
+export { NOTIFICATIONS_VERSION, DEFAULT_NOTIFICATIONS_FILE } from './notification.js';
+
+// Event history types
+export type {
+  StoredEvent,
+  StoredEventIndex,
+  StoredEventSummary,
+  EventHistoryFilter,
+  EventReplayResult,
+  EventReplayHookResult,
+} from './event-history.js';
+export { EVENT_HISTORY_VERSION, DEFAULT_EVENT_HISTORY_INDEX } from './event-history.js';
+
+// Worktree and PR types
+export type {
+  PRState,
+  WorktreePRInfo,
+  AddRemoteRequest,
+  AddRemoteResult,
+  AddRemoteResponse,
+  AddRemoteErrorResponse,
+  MergeStateInfo,
+} from './worktree.js';
+export { PR_STATES, validatePRState } from './worktree.js';
+
+// Terminal types
+export type { TerminalInfo } from './terminal.js';
+
+// Test runner types
+export type { TestRunnerInfo } from './test-runner.js';
+
+// Project overview types (multi-project dashboard)
+export type {
+  ProjectHealthStatus,
+  FeatureStatusCounts,
+  ProjectStatus,
+  AggregateFeatureCounts,
+  AggregateProjectCounts,
+  AggregateStatus,
+  ActivityType,
+  ActivitySeverity,
+  RecentActivity,
+  ActivityFeedOptions,
+  MultiProjectOverview,
+  ProjectOverviewError,
+} from './project-overview.js';
diff --git a/temp_repo/libs/types/src/issue-validation.ts b/temp_repo/libs/types/src/issue-validation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2570cf228c1cb33ad8d85a736a78aef17b0b856d
--- /dev/null
+++ b/temp_repo/libs/types/src/issue-validation.ts
@@ -0,0 +1,211 @@
+/**
+ * Issue Validation Types
+ *
+ * Types for validating GitHub issues against the codebase using Claude SDK.
+ */
+
+import type { ModelId } from './model.js';
+
+/**
+ * Verdict from issue validation
+ */
+export type IssueValidationVerdict = 'valid' | 'invalid' | 'needs_clarification';
+
+/**
+ * Confidence level of the validation
+ */
+export type IssueValidationConfidence = 'high' | 'medium' | 'low';
+
+/**
+ * Complexity estimation for valid issues
+ */
+export type IssueComplexity = 'trivial' | 'simple' | 'moderate' | 'complex' | 'very_complex';
+
+/**
+ * Recommendation for PR-related action
+ */
+export type PRRecommendation = 'wait_for_merge' | 'pr_needs_work' | 'no_pr';
+
+/**
+ * Analysis of a linked pull request
+ */
+export interface PRAnalysis {
+  /** Whether there is an open PR linked to this issue */
+  hasOpenPR: boolean;
+  /** Whether the PR appears to fix the issue based on the diff */
+  prFixesIssue?: boolean;
+  /** The PR number that was analyzed */
+  prNumber?: number;
+  /** Brief summary of what the PR changes */
+  prSummary?: string;
+  /** Recommendation: wait for PR to merge, PR needs more work, or no relevant PR */
+  recommendation: PRRecommendation;
+}
+
+/**
+ * Linked PR info for validation
+ */
+export interface LinkedPRInfo {
+  number: number;
+  title: string;
+  state: string;
+}
+
+/**
+ * Issue data for validation (without projectPath)
+ * Used by UI when calling the validation API
+ */
+export interface IssueValidationInput {
+  issueNumber: number;
+  issueTitle: string;
+  issueBody: string;
+  issueLabels?: string[];
+  /** Optional Claude-compatible provider ID (for custom providers like GLM/MiniMax) */
+  providerId?: string;
+  /** Comments to include in validation analysis */
+  comments?: GitHubComment[];
+  /** Linked pull requests for this issue */
+  linkedPRs?: LinkedPRInfo[];
+}
+
+/**
+ * Full request payload for issue validation endpoint
+ * Includes projectPath for server-side handling
+ */
+export interface IssueValidationRequest extends IssueValidationInput {
+  projectPath: string;
+}
+
+/**
+ * Result from Claude's issue validation analysis
+ */
+export interface IssueValidationResult {
+  /** Whether the issue is valid, invalid, or needs clarification */
+  verdict: IssueValidationVerdict;
+  /** How confident the AI is in its assessment */
+  confidence: IssueValidationConfidence;
+  /** Detailed explanation of the verdict */
+  reasoning: string;
+  /** For bug reports: whether the bug was confirmed in the codebase */
+  bugConfirmed?: boolean;
+  /** Files related to the issue found during analysis */
+  relatedFiles?: string[];
+  /** Suggested approach to fix or implement */
+  suggestedFix?: string;
+  /** Information that's missing and needed for validation (when verdict = needs_clarification) */
+  missingInfo?: string[];
+  /** Estimated effort to address the issue */
+  estimatedComplexity?: IssueComplexity;
+  /** Analysis of linked pull requests (if any) */
+  prAnalysis?: PRAnalysis;
+}
+
+/**
+ * Successful response from validate-issue endpoint
+ */
+export interface IssueValidationResponse {
+  success: true;
+  issueNumber: number;
+  validation: IssueValidationResult;
+}
+
+/**
+ * Error response from validate-issue endpoint
+ */
+export interface IssueValidationErrorResponse {
+  success: false;
+  error: string;
+}
+
+/**
+ * Events emitted during async issue validation
+ */
+export type IssueValidationEvent =
+  | {
+      type: 'issue_validation_start';
+      issueNumber: number;
+      issueTitle: string;
+      projectPath: string;
+    }
+  | {
+      type: 'issue_validation_progress';
+      issueNumber: number;
+      content: string;
+      projectPath: string;
+    }
+  | {
+      type: 'issue_validation_complete';
+      issueNumber: number;
+      issueTitle: string;
+      result: IssueValidationResult;
+      projectPath: string;
+      /** Model used for validation */
+      model: ModelId;
+    }
+  | {
+      type: 'issue_validation_error';
+      issueNumber: number;
+      error: string;
+      projectPath: string;
+    }
+  | {
+      type: 'issue_validation_viewed';
+      issueNumber: number;
+      projectPath: string;
+    };
+
+/**
+ * Stored validation data with metadata for cache
+ */
+export interface StoredValidation {
+  /** GitHub issue number */
+  issueNumber: number;
+  /** Issue title at time of validation */
+  issueTitle: string;
+  /** ISO timestamp when validation was performed */
+  validatedAt: string;
+  /** Model used for validation */
+  model: ModelId;
+  /** The validation result */
+  result: IssueValidationResult;
+  /** ISO timestamp when user viewed this validation (undefined = not yet viewed) */
+  viewedAt?: string;
+}
+
+/**
+ * Author of a GitHub comment
+ */
+export interface GitHubCommentAuthor {
+  login: string;
+  avatarUrl?: string;
+}
+
+/**
+ * A comment on a GitHub issue
+ */
+export interface GitHubComment {
+  /** Unique comment ID */
+  id: string;
+  /** Author of the comment */
+  author: GitHubCommentAuthor;
+  /** Comment body (markdown) */
+  body: string;
+  /** ISO timestamp when comment was created */
+  createdAt: string;
+  /** ISO timestamp when comment was last updated */
+  updatedAt?: string;
+}
+
+/**
+ * Result from fetching issue comments
+ */
+export interface IssueCommentsResult {
+  /** List of comments */
+  comments: GitHubComment[];
+  /** Total number of comments on the issue */
+  totalCount: number;
+  /** Whether there are more comments to fetch */
+  hasNextPage: boolean;
+  /** Cursor for pagination (pass to next request) */
+  endCursor?: string;
+}
diff --git a/temp_repo/libs/types/src/model-display.ts b/temp_repo/libs/types/src/model-display.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8eead4edd3534183d7a9e9647b1b3c41165b6961
--- /dev/null
+++ b/temp_repo/libs/types/src/model-display.ts
@@ -0,0 +1,293 @@
+/**
+ * Model Display Constants - UI metadata for AI models
+ *
+ * Provides display labels, descriptions, and metadata for AI models
+ * and thinking levels used throughout the application UI.
+ */
+
+import type { ModelAlias, ThinkingLevel, ModelProvider } from './settings.js';
+import type { ReasoningEffort } from './provider.js';
+import type { CursorModelId } from './cursor-models.js';
+import type { AgentModel, CodexModelId } from './model.js';
+import { CODEX_MODEL_MAP } from './model.js';
+import { GEMINI_MODEL_MAP, type GeminiModelId } from './gemini-models.js';
+
+/**
+ * ModelOption - Display metadata for a model option in the UI
+ */
+export interface ModelOption {
+  /** Model identifier (supports Claude, Cursor, Gemini models) */
+  id: ModelAlias | CursorModelId | GeminiModelId;
+  /** Display name shown to user */
+  label: string;
+  /** Descriptive text explaining model capabilities */
+  description: string;
+  /** Optional badge text (e.g., "Speed", "Balanced", "Premium") */
+  badge?: string;
+  /** AI provider */
+  provider: ModelProvider;
+}
+
+/**
+ * ThinkingLevelOption - Display metadata for thinking level selection
+ */
+export interface ThinkingLevelOption {
+  /** Thinking level identifier */
+  id: ThinkingLevel;
+  /** Display label */
+  label: string;
+}
+
+/**
+ * Claude model options with full metadata for UI display
+ *
+ * Ordered from fastest/cheapest (Haiku) to most capable (Opus).
+ */
+export const CLAUDE_MODELS: ModelOption[] = [
+  {
+    id: 'haiku',
+    label: 'Claude Haiku',
+    description: 'Fast and efficient for simple tasks.',
+    badge: 'Speed',
+    provider: 'claude',
+  },
+  {
+    id: 'sonnet',
+    label: 'Claude Sonnet',
+    description: 'Balanced performance with strong reasoning.',
+    badge: 'Balanced',
+    provider: 'claude',
+  },
+  {
+    id: 'opus',
+    label: 'Claude Opus',
+    description: 'Most capable model for complex work.',
+    badge: 'Premium',
+    provider: 'claude',
+  },
+];
+
+/**
+ * Codex model options with full metadata for UI display
+ * Official models from https://developers.openai.com/codex/models/
+ */
+export const CODEX_MODELS: (ModelOption & { hasReasoning?: boolean })[] = [
+  {
+    id: CODEX_MODEL_MAP.gpt53Codex,
+    label: 'GPT-5.3-Codex',
+    description: 'Latest frontier agentic coding model.',
+    badge: 'Premium',
+    provider: 'codex',
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt53CodexSpark,
+    label: 'GPT-5.3-Codex-Spark',
+    description: 'Near-instant real-time coding model, 1000+ tokens/sec.',
+    badge: 'Speed',
+    provider: 'codex',
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt52Codex,
+    label: 'GPT-5.2-Codex',
+    description: 'Frontier agentic coding model.',
+    badge: 'Premium',
+    provider: 'codex',
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt51CodexMax,
+    label: 'GPT-5.1-Codex-Max',
+    description: 'Codex-optimized flagship for deep and fast reasoning.',
+    badge: 'Premium',
+    provider: 'codex',
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt51CodexMini,
+    label: 'GPT-5.1-Codex-Mini',
+    description: 'Optimized for codex. Cheaper, faster, but less capable.',
+    badge: 'Speed',
+    provider: 'codex',
+    hasReasoning: false,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt51Codex,
+    label: 'GPT-5.1-Codex',
+    description: 'Original GPT-5.1 Codex agentic coding model.',
+    badge: 'Balanced',
+    provider: 'codex',
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt5Codex,
+    label: 'GPT-5-Codex',
+    description: 'Original GPT-5 Codex model.',
+    badge: 'Balanced',
+    provider: 'codex',
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt5CodexMini,
+    label: 'GPT-5-Codex-Mini',
+    description: 'Smaller, cheaper GPT-5 Codex variant.',
+    badge: 'Speed',
+    provider: 'codex',
+    hasReasoning: false,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt52,
+    label: 'GPT-5.2',
+    description: 'Latest frontier model with improvements across knowledge, reasoning and coding.',
+    badge: 'Balanced',
+    provider: 'codex',
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt51,
+    label: 'GPT-5.1',
+    description: 'Great for coding and agentic tasks across domains.',
+    badge: 'Balanced',
+    provider: 'codex',
+    hasReasoning: true,
+  },
+  {
+    id: CODEX_MODEL_MAP.gpt5,
+    label: 'GPT-5',
+    description: 'Base GPT-5 model.',
+    badge: 'Balanced',
+    provider: 'codex',
+    hasReasoning: true,
+  },
+];
+
+/**
+ * Gemini model options with full metadata for UI display
+ * Based on https://github.com/google-gemini/gemini-cli
+ * Model IDs match the keys in GEMINI_MODEL_MAP (e.g., 'gemini-2.5-flash')
+ */
+export const GEMINI_MODELS: (ModelOption & { hasThinking?: boolean })[] = Object.entries(
+  GEMINI_MODEL_MAP
+).map(([id, config]) => ({
+  id: id as GeminiModelId,
+  label: config.label,
+  description: config.description,
+  badge: config.supportsThinking ? 'Thinking' : 'Speed',
+  provider: 'gemini' as const,
+  hasThinking: config.supportsThinking,
+}));
+
+/**
+ * Thinking level options with display labels
+ *
+ * Ordered from least to most intensive reasoning.
+ */
+export const THINKING_LEVELS: ThinkingLevelOption[] = [
+  { id: 'none', label: 'None' },
+  { id: 'low', label: 'Low' },
+  { id: 'medium', label: 'Medium' },
+  { id: 'high', label: 'High' },
+  { id: 'ultrathink', label: 'Ultrathink' },
+  { id: 'adaptive', label: 'Adaptive' },
+];
+
+/**
+ * Map of thinking levels to short display labels
+ *
+ * Used for compact UI elements like badges or dropdowns.
+ */
+export const THINKING_LEVEL_LABELS: Record<ThinkingLevel, string> = {
+  none: 'None',
+  low: 'Low',
+  medium: 'Med',
+  high: 'High',
+  ultrathink: 'Ultra',
+  adaptive: 'Adaptive',
+};
+
+/**
+ * ReasoningEffortOption - Display metadata for reasoning effort selection (Codex/OpenAI)
+ */
+export interface ReasoningEffortOption {
+  /** Reasoning effort identifier */
+  id: ReasoningEffort;
+  /** Display label */
+  label: string;
+  /** Description of what this level does */
+  description: string;
+}
+
+/**
+ * Reasoning effort options for Codex/OpenAI models
+ * All models support reasoning effort levels
+ */
+export const REASONING_EFFORT_LEVELS: ReasoningEffortOption[] = [
+  { id: 'none', label: 'None', description: 'No reasoning tokens (GPT-5.1 models only)' },
+  { id: 'minimal', label: 'Minimal', description: 'Very quick reasoning' },
+  { id: 'low', label: 'Low', description: 'Quick responses for simpler queries' },
+  { id: 'medium', label: 'Medium', description: 'Balance between depth and speed (default)' },
+  { id: 'high', label: 'High', description: 'Maximizes reasoning depth for critical tasks' },
+  { id: 'xhigh', label: 'XHigh', description: 'Highest level for gpt-5.1-codex-max and newer' },
+];
+
+/**
+ * Map of reasoning effort levels to short display labels
+ */
+export const REASONING_EFFORT_LABELS: Record<ReasoningEffort, string> = {
+  none: 'None',
+  minimal: 'Min',
+  low: 'Low',
+  medium: 'Med',
+  high: 'High',
+  xhigh: 'XHigh',
+};
+
+/**
+ * Get display name for a model
+ *
+ * @param model - Model identifier or full model string
+ * @returns Human-readable model name
+ *
+ * @example
+ * ```typescript
+ * getModelDisplayName("haiku");  // "Claude Haiku"
+ * getModelDisplayName("sonnet"); // "Claude Sonnet"
+ * getModelDisplayName("claude-sonnet-4-6"); // "Claude Sonnet 4.6"
+ * ```
+ */
+export function getModelDisplayName(model: ModelAlias | string): string {
+  const displayNames: Record<string, string> = {
+    haiku: 'Claude Haiku',
+    sonnet: 'Claude Sonnet',
+    opus: 'Claude Opus',
+    'claude-haiku': 'Claude Haiku',
+    'claude-sonnet': 'Claude Sonnet',
+    'claude-opus': 'Claude Opus',
+    'claude-sonnet-4-6': 'Claude Sonnet 4.6',
+    'claude-opus-4-6': 'Claude Opus 4.6',
+    [CODEX_MODEL_MAP.gpt53Codex]: 'GPT-5.3-Codex',
+    [CODEX_MODEL_MAP.gpt53CodexSpark]: 'GPT-5.3-Codex-Spark',
+    [CODEX_MODEL_MAP.gpt52Codex]: 'GPT-5.2-Codex',
+    [CODEX_MODEL_MAP.gpt51CodexMax]: 'GPT-5.1-Codex-Max',
+    [CODEX_MODEL_MAP.gpt51CodexMini]: 'GPT-5.1-Codex-Mini',
+    [CODEX_MODEL_MAP.gpt51Codex]: 'GPT-5.1-Codex',
+    [CODEX_MODEL_MAP.gpt5Codex]: 'GPT-5-Codex',
+    [CODEX_MODEL_MAP.gpt5CodexMini]: 'GPT-5-Codex-Mini',
+    [CODEX_MODEL_MAP.gpt52]: 'GPT-5.2',
+    [CODEX_MODEL_MAP.gpt51]: 'GPT-5.1',
+    [CODEX_MODEL_MAP.gpt5]: 'GPT-5',
+  };
+
+  // Check direct match first
+  if (model in displayNames) {
+    return displayNames[model];
+  }
+
+  // Check Gemini model map - IDs are like 'gemini-2.5-flash'
+  if (model in GEMINI_MODEL_MAP) {
+    return GEMINI_MODEL_MAP[model as keyof typeof GEMINI_MODEL_MAP].label;
+  }
+
+  return model;
+}
diff --git a/temp_repo/libs/types/src/model-migration.ts b/temp_repo/libs/types/src/model-migration.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b42833f772756dccb4834b1debb99f5239f57b94
--- /dev/null
+++ b/temp_repo/libs/types/src/model-migration.ts
@@ -0,0 +1,234 @@
+/**
+ * Model ID Migration Utilities
+ *
+ * Provides functions to migrate legacy model IDs to the canonical prefixed format.
+ * This ensures backward compatibility when loading settings from older versions.
+ */
+
+import type { CursorModelId, LegacyCursorModelId } from './cursor-models.js';
+import { LEGACY_CURSOR_MODEL_MAP, CURSOR_MODEL_MAP } from './cursor-models.js';
+import type { OpencodeModelId, LegacyOpencodeModelId } from './opencode-models.js';
+import {
+  LEGACY_OPENCODE_MODEL_MAP,
+  OPENCODE_MODEL_CONFIG_MAP,
+  RETIRED_OPENCODE_MODEL_MAP,
+} from './opencode-models.js';
+import type { ClaudeCanonicalId } from './model.js';
+import { LEGACY_CLAUDE_ALIAS_MAP, CLAUDE_CANONICAL_MAP, CLAUDE_MODEL_MAP } from './model.js';
+import type { PhaseModelEntry } from './settings.js';
+
+/**
+ * Check if a string is a legacy Cursor model ID (without prefix)
+ */
+export function isLegacyCursorModelId(id: string): id is LegacyCursorModelId {
+  return id in LEGACY_CURSOR_MODEL_MAP;
+}
+
+/**
+ * Check if a string is a legacy OpenCode model ID (with slash format)
+ */
+export function isLegacyOpencodeModelId(id: string): id is LegacyOpencodeModelId {
+  return id in LEGACY_OPENCODE_MODEL_MAP;
+}
+
+/**
+ * Check if a string is a legacy Claude alias (short name without prefix)
+ */
+export function isLegacyClaudeAlias(id: string): boolean {
+  return id in LEGACY_CLAUDE_ALIAS_MAP;
+}
+
+/**
+ * Migrate a single model ID to canonical format
+ *
+ * Handles:
+ * - Legacy Cursor IDs (e.g., 'auto' -> 'cursor-auto')
+ * - Legacy OpenCode IDs (e.g., 'opencode/big-pickle' -> 'opencode-big-pickle')
+ * - Legacy Claude aliases (e.g., 'sonnet' -> 'claude-sonnet')
+ * - Already-canonical IDs are passed through unchanged
+ *
+ * @param legacyId - The model ID to migrate
+ * @returns The canonical model ID
+ */
+export function migrateModelId(legacyId: string | undefined | null): string {
+  if (!legacyId) {
+    return legacyId as string;
+  }
+
+  // Already has cursor- prefix and is in the map - it's canonical
+  if (legacyId.startsWith('cursor-') && legacyId in CURSOR_MODEL_MAP) {
+    return legacyId;
+  }
+
+  // Legacy Cursor model ID (without prefix)
+  if (isLegacyCursorModelId(legacyId)) {
+    return LEGACY_CURSOR_MODEL_MAP[legacyId];
+  }
+
+  // Already has opencode- prefix - check if it's a current canonical ID
+  if (legacyId.startsWith('opencode-') && legacyId in OPENCODE_MODEL_CONFIG_MAP) {
+    return legacyId;
+  }
+
+  // Retired opencode- canonical IDs (e.g., 'opencode-grok-code' → 'opencode-big-pickle')
+  if (legacyId.startsWith('opencode-') && legacyId in RETIRED_OPENCODE_MODEL_MAP) {
+    return RETIRED_OPENCODE_MODEL_MAP[legacyId];
+  }
+
+  // Legacy OpenCode model ID (with slash format)
+  if (isLegacyOpencodeModelId(legacyId)) {
+    return LEGACY_OPENCODE_MODEL_MAP[legacyId];
+  }
+
+  // Already has claude- prefix and is in canonical map
+  if (legacyId.startsWith('claude-') && legacyId in CLAUDE_CANONICAL_MAP) {
+    return legacyId;
+  }
+
+  // Legacy Claude alias (short name)
+  if (isLegacyClaudeAlias(legacyId)) {
+    return LEGACY_CLAUDE_ALIAS_MAP[legacyId];
+  }
+
+  // Unknown or already canonical - pass through
+  return legacyId;
+}
+
+/**
+ * Migrate an array of Cursor model IDs to canonical format
+ *
+ * @param ids - Array of legacy or canonical Cursor model IDs
+ * @returns Array of canonical Cursor model IDs
+ */
+export function migrateCursorModelIds(ids: string[]): CursorModelId[] {
+  if (!ids || !Array.isArray(ids)) {
+    return [];
+  }
+
+  return ids.map((id) => {
+    // Already canonical
+    if (id.startsWith('cursor-') && id in CURSOR_MODEL_MAP) {
+      return id as CursorModelId;
+    }
+
+    // Legacy ID
+    if (isLegacyCursorModelId(id)) {
+      return LEGACY_CURSOR_MODEL_MAP[id];
+    }
+
+    // Unknown - assume it might be a valid cursor model with prefix
+    if (id.startsWith('cursor-')) {
+      return id as CursorModelId;
+    }
+
+    // Add prefix if not present
+    return `cursor-${id}` as CursorModelId;
+  });
+}
+
+/**
+ * Migrate an array of OpenCode model IDs to canonical format
+ *
+ * @param ids - Array of legacy or canonical OpenCode model IDs
+ * @returns Array of canonical OpenCode model IDs
+ */
+export function migrateOpencodeModelIds(ids: string[]): OpencodeModelId[] {
+  if (!ids || !Array.isArray(ids)) {
+    return [];
+  }
+
+  return ids
+    .map((id) => {
+      // Already canonical (dash format) and current
+      if (id.startsWith('opencode-') && id in OPENCODE_MODEL_CONFIG_MAP) {
+        return id as OpencodeModelId;
+      }
+
+      // Retired canonical IDs (e.g., 'opencode-grok-code') → replacement
+      if (id.startsWith('opencode-') && id in RETIRED_OPENCODE_MODEL_MAP) {
+        return RETIRED_OPENCODE_MODEL_MAP[id];
+      }
+
+      // Legacy ID (slash format)
+      if (isLegacyOpencodeModelId(id)) {
+        return LEGACY_OPENCODE_MODEL_MAP[id];
+      }
+
+      // Convert slash to dash format for unknown models
+      if (id.startsWith('opencode/')) {
+        return id.replace('opencode/', 'opencode-') as OpencodeModelId;
+      }
+
+      // Add prefix if not present
+      if (!id.startsWith('opencode-')) {
+        return `opencode-${id}` as OpencodeModelId;
+      }
+
+      return id as OpencodeModelId;
+    })
+    .filter((id, index, self) => self.indexOf(id) === index); // Deduplicate after migration
+}
+
+/**
+ * Migrate a PhaseModelEntry to use canonical model IDs
+ *
+ * @param entry - The phase model entry to migrate
+ * @returns Migrated phase model entry with canonical model ID
+ */
+export function migratePhaseModelEntry(
+  entry: PhaseModelEntry | string | undefined | null
+): PhaseModelEntry {
+  // Handle null/undefined
+  if (!entry) {
+    return { model: 'claude-sonnet' }; // Default
+  }
+
+  // Handle legacy string format
+  if (typeof entry === 'string') {
+    return { model: migrateModelId(entry) };
+  }
+
+  // Handle PhaseModelEntry object
+  return {
+    ...entry,
+    model: migrateModelId(entry.model),
+  };
+}
+
+/**
+ * Get the bare model ID for CLI calls (strip provider prefix)
+ *
+ * When calling provider CLIs, we need to strip the provider prefix:
+ * - 'cursor-auto' -> 'auto' (for Cursor CLI)
+ * - 'cursor-composer-1' -> 'composer-1' (for Cursor CLI)
+ * - 'opencode-big-pickle' -> 'big-pickle' (for OpenCode CLI)
+ *
+ * Note: GPT models via Cursor keep the gpt- part: 'cursor-gpt-5.2' -> 'gpt-5.2'
+ *
+ * @param modelId - The canonical model ID with provider prefix
+ * @returns The bare model ID for CLI usage
+ */
+export function getBareModelIdForCli(modelId: string): string {
+  if (!modelId) return modelId;
+
+  // Cursor models
+  if (modelId.startsWith('cursor-')) {
+    const bareId = modelId.slice(7); // Remove 'cursor-'
+    // For GPT models, keep the gpt- prefix since that's what the CLI expects
+    // e.g., 'cursor-gpt-5.2' -> 'gpt-5.2'
+    return bareId;
+  }
+
+  // OpenCode models - strip prefix
+  if (modelId.startsWith('opencode-')) {
+    return modelId.slice(9); // Remove 'opencode-'
+  }
+
+  // Codex models - strip prefix
+  if (modelId.startsWith('codex-')) {
+    return modelId.slice(6); // Remove 'codex-'
+  }
+
+  // Claude and other models - pass through
+  return modelId;
+}
diff --git a/temp_repo/libs/types/src/model.ts b/temp_repo/libs/types/src/model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..08e1fa88c4411c9148418e36b53bc5c36ac5b404
--- /dev/null
+++ b/temp_repo/libs/types/src/model.ts
@@ -0,0 +1,168 @@
+/**
+ * Model alias mapping for Claude models
+ */
+import type { CursorModelId } from './cursor-models.js';
+import type { OpencodeModelId } from './opencode-models.js';
+import type { GeminiModelId } from './gemini-models.js';
+
+/**
+ * Canonical Claude model IDs with provider prefix
+ * Used for internal storage and consistent provider routing.
+ */
+export type ClaudeCanonicalId = 'claude-haiku' | 'claude-sonnet' | 'claude-opus';
+
+/**
+ * Canonical Claude model map - maps prefixed IDs to full model strings
+ * Use these IDs for internal storage and routing.
+ */
+export const CLAUDE_CANONICAL_MAP: Record<ClaudeCanonicalId, string> = {
+  'claude-haiku': 'claude-haiku-4-5-20251001',
+  'claude-sonnet': 'claude-sonnet-4-6',
+  'claude-opus': 'claude-opus-4-6',
+} as const;
+
+/**
+ * Legacy Claude model aliases (short names) for backward compatibility
+ * These map to the same full model strings as the canonical map.
+ * @deprecated Use CLAUDE_CANONICAL_MAP for new code
+ */
+export const CLAUDE_MODEL_MAP: Record<string, string> = {
+  haiku: 'claude-haiku-4-5-20251001',
+  sonnet: 'claude-sonnet-4-6',
+  opus: 'claude-opus-4-6',
+} as const;
+
+/**
+ * Map from legacy aliases to canonical IDs
+ */
+export const LEGACY_CLAUDE_ALIAS_MAP: Record<string, ClaudeCanonicalId> = {
+  haiku: 'claude-haiku',
+  sonnet: 'claude-sonnet',
+  opus: 'claude-opus',
+} as const;
+
+/**
+ * Codex/OpenAI model identifiers
+ * Based on OpenAI Codex CLI official models
+ * See: https://developers.openai.com/codex/models/
+ *
+ * IMPORTANT: All Codex models use 'codex-' prefix to distinguish from Cursor CLI models
+ */
+export const CODEX_MODEL_MAP = {
+  // Recommended Codex-specific models
+  /** Latest frontier agentic coding model */
+  gpt53Codex: 'codex-gpt-5.3-codex',
+  /** Smaller, near-instant version of GPT-5.3-Codex for real-time coding */
+  gpt53CodexSpark: 'codex-gpt-5.3-codex-spark',
+  /** Frontier agentic coding model */
+  gpt52Codex: 'codex-gpt-5.2-codex',
+  /** Codex-optimized flagship for deep and fast reasoning */
+  gpt51CodexMax: 'codex-gpt-5.1-codex-max',
+  /** Optimized for codex. Cheaper, faster, but less capable */
+  gpt51CodexMini: 'codex-gpt-5.1-codex-mini',
+  /** Original GPT-5.1 Codex model */
+  gpt51Codex: 'codex-gpt-5.1-codex',
+  /** Original GPT-5 Codex model */
+  gpt5Codex: 'codex-gpt-5-codex',
+  /** Smaller, cheaper GPT-5 Codex variant */
+  gpt5CodexMini: 'codex-gpt-5-codex-mini',
+
+  // General-purpose GPT models (also available in Codex)
+  /** Latest frontier model with improvements across knowledge, reasoning and coding */
+  gpt52: 'codex-gpt-5.2',
+  /** Great for coding and agentic tasks across domains */
+  gpt51: 'codex-gpt-5.1',
+  /** Base GPT-5 model */
+  gpt5: 'codex-gpt-5',
+} as const;
+
+export const CODEX_MODEL_IDS = Object.values(CODEX_MODEL_MAP);
+
+/**
+ * Models that support reasoning effort configuration
+ * These models can use reasoning.effort parameter
+ */
+export const REASONING_CAPABLE_MODELS = new Set([
+  CODEX_MODEL_MAP.gpt53Codex,
+  CODEX_MODEL_MAP.gpt53CodexSpark,
+  CODEX_MODEL_MAP.gpt52Codex,
+  CODEX_MODEL_MAP.gpt51CodexMax,
+  CODEX_MODEL_MAP.gpt51Codex,
+  CODEX_MODEL_MAP.gpt5Codex,
+  CODEX_MODEL_MAP.gpt52,
+  CODEX_MODEL_MAP.gpt51,
+  CODEX_MODEL_MAP.gpt5,
+]);
+
+/**
+ * Check if a model supports reasoning effort configuration
+ */
+export function supportsReasoningEffort(modelId: string): boolean {
+  return REASONING_CAPABLE_MODELS.has(modelId as any);
+}
+
+/**
+ * Normalize a selected reasoning effort level to a value supported by the target model.
+ * Returns 'none' for models that do not support reasoning effort.
+ */
+export function normalizeReasoningEffortForModel(
+  model: string,
+  reasoningEffort: import('./provider.js').ReasoningEffort | undefined
+): import('./provider.js').ReasoningEffort {
+  if (!supportsReasoningEffort(model)) {
+    return 'none';
+  }
+  return reasoningEffort || 'none';
+}
+
+/**
+ * Get all Codex model IDs as an array
+ */
+export function getAllCodexModelIds(): CodexModelId[] {
+  return CODEX_MODEL_IDS as CodexModelId[];
+}
+
+/**
+ * Default models per provider
+ * Uses canonical prefixed IDs for consistent routing.
+ */
+export const DEFAULT_MODELS = {
+  claude: 'claude-opus-4-6',
+  cursor: 'cursor-auto', // Cursor's recommended default (with prefix)
+  codex: CODEX_MODEL_MAP.gpt53Codex, // GPT-5.3-Codex is the latest frontier agentic coding model
+} as const;
+
+export type ModelAlias = keyof typeof CLAUDE_MODEL_MAP;
+export type CodexModelId = (typeof CODEX_MODEL_MAP)[keyof typeof CODEX_MODEL_MAP];
+
+/**
+ * AgentModel - Alias for ModelAlias for backward compatibility
+ * Represents available models across providers
+ */
+export type AgentModel = ModelAlias | CodexModelId;
+
+/**
+ * Dynamic provider model IDs discovered at runtime (provider/model format)
+ */
+export type DynamicModelId = `${string}/${string}`;
+
+/**
+ * Provider-prefixed model IDs used for routing
+ */
+export type PrefixedCursorModelId = `cursor-${string}`;
+export type PrefixedOpencodeModelId = `opencode-${string}`;
+export type PrefixedGeminiModelId = `gemini-${string}`;
+
+/**
+ * ModelId - Unified model identifier across providers
+ */
+export type ModelId =
+  | ModelAlias
+  | CodexModelId
+  | CursorModelId
+  | GeminiModelId
+  | OpencodeModelId
+  | DynamicModelId
+  | PrefixedCursorModelId
+  | PrefixedOpencodeModelId
+  | PrefixedGeminiModelId;
diff --git a/temp_repo/libs/types/src/notification.ts b/temp_repo/libs/types/src/notification.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e712d9ea18d2de11a83a0bb9f4a33a07a8d0a304
--- /dev/null
+++ b/temp_repo/libs/types/src/notification.ts
@@ -0,0 +1,60 @@
+/**
+ * Notification Types - Types for project-level notification system
+ *
+ * Notifications alert users when features reach specific statuses
+ * or when long-running operations complete.
+ */
+
+/**
+ * NotificationType - Types of notifications that can be created
+ */
+export type NotificationType =
+  | 'feature_waiting_approval'
+  | 'feature_verified'
+  | 'spec_regeneration_complete'
+  | 'agent_complete'
+  | 'feature_error'
+  | 'auto_mode_error';
+
+/**
+ * Notification - A single notification entry
+ */
+export interface Notification {
+  /** Unique identifier for the notification */
+  id: string;
+  /** Type of notification */
+  type: NotificationType;
+  /** Short title for display */
+  title: string;
+  /** Longer descriptive message */
+  message: string;
+  /** ISO timestamp when notification was created */
+  createdAt: string;
+  /** Whether the notification has been read */
+  read: boolean;
+  /** Whether the notification has been dismissed */
+  dismissed: boolean;
+  /** Associated feature ID if applicable */
+  featureId?: string;
+  /** Project path this notification belongs to */
+  projectPath: string;
+}
+
+/**
+ * NotificationsFile - Structure of the notifications.json file
+ */
+export interface NotificationsFile {
+  /** Version for future migrations */
+  version: number;
+  /** List of notifications */
+  notifications: Notification[];
+}
+
+/** Current version of the notifications file schema */
+export const NOTIFICATIONS_VERSION = 1;
+
+/** Default notifications file structure */
+export const DEFAULT_NOTIFICATIONS_FILE: NotificationsFile = {
+  version: NOTIFICATIONS_VERSION,
+  notifications: [],
+};
diff --git a/temp_repo/libs/types/src/opencode-models.ts b/temp_repo/libs/types/src/opencode-models.ts
new file mode 100644
index 0000000000000000000000000000000000000000..95c0c543ae2713cc219584c79be3c8179edf7cfa
--- /dev/null
+++ b/temp_repo/libs/types/src/opencode-models.ts
@@ -0,0 +1,232 @@
+/**
+ * OpenCode Model IDs
+ * Models available via OpenCode CLI (opencode models command)
+ *
+ * All OpenCode model IDs use 'opencode-' prefix for consistent provider routing.
+ * This prevents naming collisions and ensures clear provider attribution.
+ */
+export type OpencodeModelId =
+  // OpenCode Free Tier Models
+  | 'opencode-big-pickle'
+  | 'opencode-glm-5-free'
+  | 'opencode-gpt-5-nano'
+  | 'opencode-kimi-k2.5-free'
+  | 'opencode-minimax-m2.5-free';
+
+/**
+ * Legacy OpenCode model IDs (with slash format) for migration support
+ * Includes both current and previously-available models for backward compatibility.
+ */
+export type LegacyOpencodeModelId =
+  | 'opencode/big-pickle'
+  | 'opencode/glm-5-free'
+  | 'opencode/gpt-5-nano'
+  | 'opencode/kimi-k2.5-free'
+  | 'opencode/minimax-m2.5-free'
+  // Retired models (kept for migration from older settings)
+  | 'opencode/glm-4.7-free'
+  | 'opencode/grok-code'
+  | 'opencode/minimax-m2.1-free';
+
+/**
+ * Provider type for OpenCode models
+ */
+export type OpencodeProvider = 'opencode';
+
+/**
+ * Friendly aliases mapped to full model IDs
+ */
+export const OPENCODE_MODEL_MAP: Record<string, OpencodeModelId> = {
+  // OpenCode free tier aliases
+  'big-pickle': 'opencode-big-pickle',
+  pickle: 'opencode-big-pickle',
+  'glm-free': 'opencode-glm-5-free',
+  'glm-5': 'opencode-glm-5-free',
+  'gpt-nano': 'opencode-gpt-5-nano',
+  nano: 'opencode-gpt-5-nano',
+  'kimi-free': 'opencode-kimi-k2.5-free',
+  kimi: 'opencode-kimi-k2.5-free',
+  minimax: 'opencode-minimax-m2.5-free',
+} as const;
+
+/**
+ * Map from legacy slash-format model IDs to canonical prefixed IDs.
+ * Retired models are mapped to their closest replacement.
+ */
+export const LEGACY_OPENCODE_MODEL_MAP: Record<LegacyOpencodeModelId, OpencodeModelId> = {
+  // Current models
+  'opencode/big-pickle': 'opencode-big-pickle',
+  'opencode/glm-5-free': 'opencode-glm-5-free',
+  'opencode/gpt-5-nano': 'opencode-gpt-5-nano',
+  'opencode/kimi-k2.5-free': 'opencode-kimi-k2.5-free',
+  'opencode/minimax-m2.5-free': 'opencode-minimax-m2.5-free',
+  // Retired models → mapped to replacements
+  'opencode/glm-4.7-free': 'opencode-glm-5-free',
+  'opencode/grok-code': 'opencode-big-pickle', // grok-code retired, fallback to default
+  'opencode/minimax-m2.1-free': 'opencode-minimax-m2.5-free',
+};
+
+/**
+ * Map from retired canonical (dash-format) model IDs to their replacements.
+ * Used to migrate settings that reference models no longer available.
+ */
+export const RETIRED_OPENCODE_MODEL_MAP: Record<string, OpencodeModelId> = {
+  'opencode-glm-4.7-free': 'opencode-glm-5-free',
+  'opencode-grok-code': 'opencode-big-pickle',
+  'opencode-minimax-m2.1-free': 'opencode-minimax-m2.5-free',
+};
+
+/**
+ * OpenCode model metadata
+ */
+export interface OpencodeModelConfig {
+  id: OpencodeModelId;
+  label: string;
+  description: string;
+  supportsVision: boolean;
+  provider: OpencodeProvider;
+  tier: 'free' | 'standard' | 'premium';
+}
+
+/**
+ * Complete list of OpenCode model configurations
+ * All IDs use 'opencode-' prefix for consistent provider routing.
+ */
+export const OPENCODE_MODELS: OpencodeModelConfig[] = [
+  // OpenCode Free Tier Models
+  {
+    id: 'opencode-big-pickle',
+    label: 'Big Pickle',
+    description: 'OpenCode free tier model - great for general coding',
+    supportsVision: false,
+    provider: 'opencode',
+    tier: 'free',
+  },
+  {
+    id: 'opencode-glm-5-free',
+    label: 'GLM 5 Free',
+    description: 'OpenCode free tier GLM model',
+    supportsVision: false,
+    provider: 'opencode',
+    tier: 'free',
+  },
+  {
+    id: 'opencode-gpt-5-nano',
+    label: 'GPT-5 Nano',
+    description: 'OpenCode free tier nano model - fast and lightweight',
+    supportsVision: false,
+    provider: 'opencode',
+    tier: 'free',
+  },
+  {
+    id: 'opencode-kimi-k2.5-free',
+    label: 'Kimi K2.5 Free',
+    description: 'OpenCode free tier Kimi model for coding',
+    supportsVision: false,
+    provider: 'opencode',
+    tier: 'free',
+  },
+  {
+    id: 'opencode-minimax-m2.5-free',
+    label: 'MiniMax M2.5 Free',
+    description: 'OpenCode free tier MiniMax model',
+    supportsVision: false,
+    provider: 'opencode',
+    tier: 'free',
+  },
+];
+
+/**
+ * Complete model configuration map indexed by model ID
+ */
+export const OPENCODE_MODEL_CONFIG_MAP: Record<OpencodeModelId, OpencodeModelConfig> =
+  OPENCODE_MODELS.reduce(
+    (acc, config) => {
+      acc[config.id] = config;
+      return acc;
+    },
+    {} as Record<OpencodeModelId, OpencodeModelConfig>
+  );
+
+/**
+ * Default OpenCode model - OpenCode free tier
+ */
+export const DEFAULT_OPENCODE_MODEL: OpencodeModelId = 'opencode-big-pickle';
+
+/**
+ * Helper: Get display name for model
+ */
+export function getOpencodeModelLabel(modelId: OpencodeModelId): string {
+  return OPENCODE_MODEL_CONFIG_MAP[modelId]?.label ?? modelId;
+}
+
+/**
+ * Helper: Get all OpenCode model IDs
+ */
+export function getAllOpencodeModelIds(): OpencodeModelId[] {
+  return OPENCODE_MODELS.map((config) => config.id);
+}
+
+/**
+ * Helper: Check if OpenCode model supports vision
+ */
+export function opencodeModelSupportsVision(modelId: OpencodeModelId): boolean {
+  return OPENCODE_MODEL_CONFIG_MAP[modelId]?.supportsVision ?? false;
+}
+
+/**
+ * Helper: Get the provider for a model
+ */
+export function getOpencodeModelProvider(modelId: OpencodeModelId): OpencodeProvider {
+  return OPENCODE_MODEL_CONFIG_MAP[modelId]?.provider ?? 'opencode';
+}
+
+/**
+ * Helper: Resolve an alias or partial model ID to a full model ID.
+ * Also handles retired model IDs by mapping them to their replacements.
+ */
+export function resolveOpencodeModelId(input: string): OpencodeModelId | undefined {
+  // Check if it's already a valid model ID
+  if (OPENCODE_MODEL_CONFIG_MAP[input as OpencodeModelId]) {
+    return input as OpencodeModelId;
+  }
+
+  // Check retired model map (handles old canonical IDs like 'opencode-grok-code')
+  if (input in RETIRED_OPENCODE_MODEL_MAP) {
+    return RETIRED_OPENCODE_MODEL_MAP[input];
+  }
+
+  // Check alias map
+  const normalized = input.toLowerCase();
+  return OPENCODE_MODEL_MAP[normalized];
+}
+
+/**
+ * Helper: Check if a string is a valid OpenCode model ID
+ */
+export function isOpencodeModelId(value: string): value is OpencodeModelId {
+  return value in OPENCODE_MODEL_CONFIG_MAP;
+}
+
+/**
+ * Helper: Get models filtered by provider
+ */
+export function getOpencodeModelsByProvider(provider: OpencodeProvider): OpencodeModelConfig[] {
+  return OPENCODE_MODELS.filter((config) => config.provider === provider);
+}
+
+/**
+ * Helper: Get models filtered by tier
+ */
+export function getOpencodeModelsByTier(
+  tier: 'free' | 'standard' | 'premium'
+): OpencodeModelConfig[] {
+  return OPENCODE_MODELS.filter((config) => config.tier === tier);
+}
+
+/**
+ * Helper: Get free tier models
+ */
+export function getOpencodeFreeModels(): OpencodeModelConfig[] {
+  return getOpencodeModelsByTier('free');
+}
diff --git a/temp_repo/libs/types/src/pipeline.ts b/temp_repo/libs/types/src/pipeline.ts
new file mode 100644
index 0000000000000000000000000000000000000000..723cce2181084428afda33cd85ad9c8d5ab4582a
--- /dev/null
+++ b/temp_repo/libs/types/src/pipeline.ts
@@ -0,0 +1,45 @@
+/**
+ * Pipeline types for AutoMaker custom workflow steps
+ */
+
+export interface PipelineStep {
+  id: string;
+  name: string;
+  order: number;
+  instructions: string;
+  colorClass: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface PipelineConfig {
+  version: 1;
+  steps: PipelineStep[];
+}
+
+export type PipelineStatus = `pipeline_${string}`;
+
+/**
+ * Type guard to check if a status string represents a valid pipeline stage.
+ * Requires the 'pipeline_' prefix followed by at least one character.
+ */
+export function isPipelineStatus(status: string | null | undefined): status is PipelineStatus {
+  if (typeof status !== 'string') return false;
+  // Require 'pipeline_' prefix with at least one character after it
+  const prefix = 'pipeline_';
+  return status.startsWith(prefix) && status.length > prefix.length;
+}
+
+export type FeatureStatusWithPipeline =
+  | 'backlog'
+  | 'merge_conflict'
+  | 'ready'
+  | 'in_progress'
+  | 'interrupted'
+  | 'waiting_approval'
+  | 'verified'
+  | 'completed'
+  | PipelineStatus;
+
+export const PIPELINE_SUMMARY_SEPARATOR = '\n\n---\n\n';
+export const PIPELINE_SUMMARY_HEADER_PREFIX = '### ';
diff --git a/temp_repo/libs/types/src/ports.ts b/temp_repo/libs/types/src/ports.ts
new file mode 100644
index 0000000000000000000000000000000000000000..451ecdd75d37c13da874ae736861b8bb8c266945
--- /dev/null
+++ b/temp_repo/libs/types/src/ports.ts
@@ -0,0 +1,15 @@
+/**
+ * Centralized port configuration for AutoMaker
+ *
+ * These ports are reserved for the Automaker application and should never be
+ * killed or terminated by AI agents during feature implementation.
+ */
+
+/** Port for the static/UI server (Vite dev server) */
+export const STATIC_PORT = 3007;
+
+/** Port for the backend API server (Express + WebSocket) */
+export const SERVER_PORT = 3008;
+
+/** Array of all reserved Automaker ports */
+export const RESERVED_PORTS = [STATIC_PORT, SERVER_PORT] as const;
diff --git a/temp_repo/libs/types/src/project-overview.ts b/temp_repo/libs/types/src/project-overview.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4c1bd5570097546536ad36a603d8adc7d210f090
--- /dev/null
+++ b/temp_repo/libs/types/src/project-overview.ts
@@ -0,0 +1,244 @@
+/**
+ * Project Overview Types - Multi-project dashboard data structures
+ *
+ * Defines types for aggregating and displaying status across multiple projects,
+ * including individual project health, aggregate metrics, and recent activity feeds.
+ * Used by the multi-project overview dashboard for at-a-glance monitoring.
+ */
+
+// ============================================================================
+// Project Status Types
+// ============================================================================
+
+/**
+ * ProjectHealthStatus - Overall health indicator for a project
+ *
+ * Represents the computed health state based on feature statuses:
+ * - idle: No active work, all features are pending or completed
+ * - active: Features are currently running or in progress
+ * - waiting: Features are waiting for user approval or input
+ * - error: One or more features have failed
+ * - completed: All features have been completed successfully
+ */
+export type ProjectHealthStatus = 'idle' | 'active' | 'waiting' | 'error' | 'completed';
+
+/**
+ * FeatureStatusCounts - Breakdown of features by status
+ *
+ * Provides counts for each feature status to show progress at a glance.
+ */
+export interface FeatureStatusCounts {
+  /** Number of features waiting to be started */
+  pending: number;
+  /** Number of features currently executing */
+  running: number;
+  /** Number of features that completed successfully */
+  completed: number;
+  /** Number of features that encountered errors */
+  failed: number;
+  /** Number of features that passed verification */
+  verified: number;
+}
+
+/**
+ * ProjectStatus - Status summary for an individual project
+ *
+ * Contains all information needed to display a project's current state
+ * in the multi-project overview dashboard.
+ */
+export interface ProjectStatus {
+  /** Project unique identifier (matches ProjectRef.id) */
+  projectId: string;
+  /** Project display name */
+  projectName: string;
+  /** Absolute filesystem path to project */
+  projectPath: string;
+  /** Computed overall health status */
+  healthStatus: ProjectHealthStatus;
+  /** Breakdown of features by status */
+  featureCounts: FeatureStatusCounts;
+  /** Total number of features in the project */
+  totalFeatures: number;
+  /** ISO timestamp of last activity in this project */
+  lastActivityAt?: string;
+  /** Whether auto-mode is currently running */
+  isAutoModeRunning: boolean;
+  /** Name of the currently active branch (if in a worktree) */
+  activeBranch?: string;
+  /** Number of unread notifications for this project */
+  unreadNotificationCount: number;
+  /** Extensibility for future properties */
+  [key: string]: unknown;
+}
+
+// ============================================================================
+// Aggregate Status Types
+// ============================================================================
+
+/**
+ * AggregateFeatureCounts - Total feature counts across all projects
+ */
+export interface AggregateFeatureCounts {
+  /** Total features across all projects */
+  total: number;
+  /** Total pending features */
+  pending: number;
+  /** Total running features */
+  running: number;
+  /** Total completed features */
+  completed: number;
+  /** Total failed features */
+  failed: number;
+  /** Total verified features */
+  verified: number;
+}
+
+/**
+ * AggregateProjectCounts - Project counts by health status
+ */
+export interface AggregateProjectCounts {
+  /** Total number of projects */
+  total: number;
+  /** Projects with active work */
+  active: number;
+  /** Projects in idle state */
+  idle: number;
+  /** Projects waiting for input */
+  waiting: number;
+  /** Projects with errors */
+  withErrors: number;
+  /** Projects with all work completed */
+  allCompleted: number;
+}
+
+/**
+ * AggregateStatus - Summary metrics across all projects
+ *
+ * Provides a bird's-eye view of work status across the entire workspace,
+ * useful for dashboard headers and summary widgets.
+ */
+export interface AggregateStatus {
+  /** Counts of projects by health status */
+  projectCounts: AggregateProjectCounts;
+  /** Aggregate feature counts across all projects */
+  featureCounts: AggregateFeatureCounts;
+  /** Total unread notifications across all projects */
+  totalUnreadNotifications: number;
+  /** Number of projects with auto-mode running */
+  projectsWithAutoModeRunning: number;
+  /** ISO timestamp when this aggregate was computed */
+  computedAt: string;
+  /** Extensibility for future properties */
+  [key: string]: unknown;
+}
+
+// ============================================================================
+// Recent Activity Types
+// ============================================================================
+
+/**
+ * ActivityType - Types of activities that can appear in the activity feed
+ *
+ * Maps to significant events that users would want to see in an overview.
+ */
+export type ActivityType =
+  | 'feature_created'
+  | 'feature_started'
+  | 'feature_completed'
+  | 'feature_failed'
+  | 'feature_verified'
+  | 'auto_mode_started'
+  | 'auto_mode_stopped'
+  | 'ideation_session_started'
+  | 'ideation_session_ended'
+  | 'idea_created'
+  | 'idea_converted'
+  | 'notification_created'
+  | 'project_opened';
+
+/**
+ * ActivitySeverity - Visual importance level for activity items
+ */
+export type ActivitySeverity = 'info' | 'success' | 'warning' | 'error';
+
+/**
+ * RecentActivity - A single activity entry for the activity feed
+ *
+ * Represents a notable event that occurred in a project, displayed
+ * in chronological order in the activity feed widget.
+ */
+export interface RecentActivity {
+  /** Unique identifier for this activity entry */
+  id: string;
+  /** Project this activity belongs to */
+  projectId: string;
+  /** Project display name (denormalized for display) */
+  projectName: string;
+  /** Type of activity */
+  type: ActivityType;
+  /** Human-readable description of what happened */
+  description: string;
+  /** Visual importance level */
+  severity: ActivitySeverity;
+  /** ISO timestamp when the activity occurred */
+  timestamp: string;
+  /** Related feature ID if applicable */
+  featureId?: string;
+  /** Related feature title if applicable */
+  featureTitle?: string;
+  /** Related ideation session ID if applicable */
+  sessionId?: string;
+  /** Related idea ID if applicable */
+  ideaId?: string;
+  /** Extensibility for future properties */
+  [key: string]: unknown;
+}
+
+/**
+ * ActivityFeedOptions - Options for fetching activity feed
+ */
+export interface ActivityFeedOptions {
+  /** Maximum number of activities to return */
+  limit?: number;
+  /** Filter to specific project IDs */
+  projectIds?: string[];
+  /** Filter to specific activity types */
+  types?: ActivityType[];
+  /** Only return activities after this ISO timestamp */
+  since?: string;
+  /** Only return activities before this ISO timestamp */
+  until?: string;
+}
+
+// ============================================================================
+// Multi-Project Overview Response Types
+// ============================================================================
+
+/**
+ * MultiProjectOverview - Complete overview data for the dashboard
+ *
+ * Contains all data needed to render the multi-project overview page,
+ * including individual project statuses, aggregate metrics, and recent activity.
+ */
+export interface MultiProjectOverview {
+  /** Individual status for each project */
+  projects: ProjectStatus[];
+  /** Aggregate metrics across all projects */
+  aggregate: AggregateStatus;
+  /** Recent activity feed (sorted by timestamp, most recent first) */
+  recentActivity: RecentActivity[];
+  /** ISO timestamp when this overview was generated */
+  generatedAt: string;
+}
+
+/**
+ * ProjectOverviewError - Error response for overview requests
+ */
+export interface ProjectOverviewError {
+  /** Error code for programmatic handling */
+  code: 'PROJECTS_NOT_FOUND' | 'PERMISSION_DENIED' | 'INTERNAL_ERROR';
+  /** Human-readable error message */
+  message: string;
+  /** Project IDs that failed to load, if applicable */
+  failedProjectIds?: string[];
+}
diff --git a/temp_repo/libs/types/src/prompts.ts b/temp_repo/libs/types/src/prompts.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a3c582dc88f5f7f8a049e713674d26eec26bd2ea
--- /dev/null
+++ b/temp_repo/libs/types/src/prompts.ts
@@ -0,0 +1,366 @@
+/**
+ * Prompt Customization Types
+ *
+ * Defines the structure for customizable AI prompts used throughout the application.
+ * Allows users to modify prompts for Auto Mode, Agent Runner, and Backlog Planning.
+ */
+
+/**
+ * CustomPrompt - A custom prompt with its value and enabled state
+ *
+ * The value is always preserved even when disabled, so users don't lose their work.
+ */
+export interface CustomPrompt {
+  /** The custom prompt text */
+  value: string;
+
+  /** Whether this custom prompt should be used (when false, default is used instead) */
+  enabled: boolean;
+}
+
+/**
+ * AutoModePrompts - Customizable prompts for Auto Mode feature implementation
+ *
+ * Controls how the AI plans and implements features in autonomous mode.
+ */
+export interface AutoModePrompts {
+  /** Planning mode: Quick outline without approval (lite mode) */
+  planningLite?: CustomPrompt;
+
+  /** Planning mode: Quick outline with approval required (lite with approval) */
+  planningLiteWithApproval?: CustomPrompt;
+
+  /** Planning mode: Detailed specification with task breakdown (spec mode) */
+  planningSpec?: CustomPrompt;
+
+  /** Planning mode: Comprehensive Software Design Document (full SDD mode) */
+  planningFull?: CustomPrompt;
+
+  /** Template for building feature implementation prompts */
+  featurePromptTemplate?: CustomPrompt;
+
+  /** Template for follow-up prompts when resuming work */
+  followUpPromptTemplate?: CustomPrompt;
+
+  /** Template for continuation prompts */
+  continuationPromptTemplate?: CustomPrompt;
+
+  /** Template for pipeline step execution prompts */
+  pipelineStepPromptTemplate?: CustomPrompt;
+}
+
+/**
+ * AgentPrompts - Customizable prompts for Agent Runner (chat mode)
+ *
+ * Controls the AI's behavior in interactive chat sessions.
+ */
+export interface AgentPrompts {
+  /** System prompt defining the agent's role and behavior in chat */
+  systemPrompt?: CustomPrompt;
+}
+
+/**
+ * BacklogPlanPrompts - Customizable prompts for Kanban board planning
+ *
+ * Controls how the AI modifies the feature backlog via the Plan button.
+ */
+export interface BacklogPlanPrompts {
+  /** System prompt for backlog plan generation (defines output format and rules) */
+  systemPrompt?: CustomPrompt;
+
+  /** Template for user prompt (includes current features and user request) */
+  userPromptTemplate?: CustomPrompt;
+}
+
+/**
+ * EnhancementPrompts - Customizable prompts for feature description enhancement
+ *
+ * Controls how the AI enhances feature titles and descriptions.
+ */
+export interface EnhancementPrompts {
+  /** System prompt for "improve" mode (vague → clear) */
+  improveSystemPrompt?: CustomPrompt;
+
+  /** System prompt for "technical" mode (add technical details) */
+  technicalSystemPrompt?: CustomPrompt;
+
+  /** System prompt for "simplify" mode (verbose → concise) */
+  simplifySystemPrompt?: CustomPrompt;
+
+  /** System prompt for "acceptance" mode (add acceptance criteria) */
+  acceptanceSystemPrompt?: CustomPrompt;
+
+  /** System prompt for "ux-reviewer" mode (UX and design perspective) */
+  uxReviewerSystemPrompt?: CustomPrompt;
+}
+
+/**
+ * CommitMessagePrompts - Customizable prompts for AI commit message generation
+ *
+ * Controls how the AI generates git commit messages from diffs.
+ */
+export interface CommitMessagePrompts {
+  /** System prompt for generating commit messages */
+  systemPrompt?: CustomPrompt;
+}
+
+/**
+ * TitleGenerationPrompts - Customizable prompts for AI feature title generation
+ *
+ * Controls how the AI generates short, descriptive titles for features.
+ */
+export interface TitleGenerationPrompts {
+  /** System prompt for generating feature titles from descriptions */
+  systemPrompt?: CustomPrompt;
+}
+
+/**
+ * IssueValidationPrompts - Customizable prompts for GitHub issue validation
+ *
+ * Controls how the AI validates GitHub issues against the codebase,
+ * determining if issues are valid, invalid, or need clarification.
+ */
+export interface IssueValidationPrompts {
+  /** System prompt for validating GitHub issues against codebase */
+  systemPrompt?: CustomPrompt;
+}
+
+/**
+ * IdeationPrompts - Customizable prompts for AI-powered ideation and brainstorming
+ *
+ * Controls how the AI generates feature ideas and suggestions for the project.
+ */
+export interface IdeationPrompts {
+  /** System prompt for ideation chat conversations */
+  ideationSystemPrompt?: CustomPrompt;
+
+  /** System prompt for generating feature suggestions */
+  suggestionsSystemPrompt?: CustomPrompt;
+}
+
+/**
+ * AppSpecPrompts - Customizable prompts for project specification generation
+ *
+ * Controls how the AI generates project specifications and features from specs.
+ */
+export interface AppSpecPrompts {
+  /** System prompt for generating project specifications */
+  generateSpecSystemPrompt?: CustomPrompt;
+
+  /** Instructions for structured specification output format */
+  structuredSpecInstructions?: CustomPrompt;
+
+  /** System prompt for generating features from a specification */
+  generateFeaturesFromSpecPrompt?: CustomPrompt;
+}
+
+/**
+ * ContextDescriptionPrompts - Customizable prompts for context file/image descriptions
+ *
+ * Controls how the AI describes context files and images.
+ */
+export interface ContextDescriptionPrompts {
+  /** System prompt for describing text files added as context */
+  describeFilePrompt?: CustomPrompt;
+
+  /** System prompt for describing images added as context */
+  describeImagePrompt?: CustomPrompt;
+}
+
+/**
+ * SuggestionsPrompts - Customizable prompts for generating various suggestions
+ *
+ * Controls how the AI generates feature, refactoring, security, and performance suggestions.
+ */
+export interface SuggestionsPrompts {
+  /** Prompt for generating new feature suggestions */
+  featuresPrompt?: CustomPrompt;
+
+  /** Prompt for generating refactoring suggestions */
+  refactoringPrompt?: CustomPrompt;
+
+  /** Prompt for generating security suggestions */
+  securityPrompt?: CustomPrompt;
+
+  /** Prompt for generating performance suggestions */
+  performancePrompt?: CustomPrompt;
+
+  /** Base template for all suggestion types */
+  baseTemplate?: CustomPrompt;
+}
+
+/**
+ * TaskExecutionPrompts - Customizable prompts for Auto Mode task execution
+ *
+ * Controls how the AI executes tasks, extracts learnings, and handles continuations.
+ */
+export interface TaskExecutionPrompts {
+  /** Template for building task execution prompts */
+  taskPromptTemplate?: CustomPrompt;
+
+  /** Instructions appended to feature implementation prompts */
+  implementationInstructions?: CustomPrompt;
+
+  /** Instructions for Playwright verification (when enabled) */
+  playwrightVerificationInstructions?: CustomPrompt;
+
+  /** System prompt for extracting learnings/ADRs from implementation */
+  learningExtractionSystemPrompt?: CustomPrompt;
+
+  /** User prompt template for learning extraction */
+  learningExtractionUserPromptTemplate?: CustomPrompt;
+
+  /** Template for prompting plan revisions */
+  planRevisionTemplate?: CustomPrompt;
+
+  /** Template for continuation after plan approval */
+  continuationAfterApprovalTemplate?: CustomPrompt;
+
+  /** Template for resuming interrupted features */
+  resumeFeatureTemplate?: CustomPrompt;
+
+  /** Template for project analysis */
+  projectAnalysisPrompt?: CustomPrompt;
+}
+
+/**
+ * PromptCustomization - Complete set of customizable prompts
+ *
+ * All fields are optional. Undefined values fall back to built-in defaults.
+ * Stored in GlobalSettings to allow user customization.
+ */
+export interface PromptCustomization {
+  /** Auto Mode prompts (feature implementation) */
+  autoMode?: AutoModePrompts;
+
+  /** Agent Runner prompts (interactive chat) */
+  agent?: AgentPrompts;
+
+  /** Backlog planning prompts (Plan button) */
+  backlogPlan?: BacklogPlanPrompts;
+
+  /** Enhancement prompts (feature description improvement) */
+  enhancement?: EnhancementPrompts;
+
+  /** Commit message prompts (AI-generated commit messages) */
+  commitMessage?: CommitMessagePrompts;
+
+  /** Title generation prompts (AI-generated feature titles) */
+  titleGeneration?: TitleGenerationPrompts;
+
+  /** Issue validation prompts (GitHub issue validation) */
+  issueValidation?: IssueValidationPrompts;
+
+  /** Ideation prompts (AI-powered brainstorming and suggestions) */
+  ideation?: IdeationPrompts;
+
+  /** App specification prompts (project spec generation) */
+  appSpec?: AppSpecPrompts;
+
+  /** Context description prompts (file/image descriptions) */
+  contextDescription?: ContextDescriptionPrompts;
+
+  /** Suggestions prompts (features, refactoring, security, performance) */
+  suggestions?: SuggestionsPrompts;
+
+  /** Task execution prompts (Auto Mode task execution, learning extraction) */
+  taskExecution?: TaskExecutionPrompts;
+}
+
+/**
+ * Default empty prompt customization (all undefined → use built-in defaults)
+ */
+export const DEFAULT_PROMPT_CUSTOMIZATION: PromptCustomization = {
+  autoMode: {},
+  agent: {},
+  backlogPlan: {},
+  enhancement: {},
+  commitMessage: {},
+  titleGeneration: {},
+  issueValidation: {},
+  ideation: {},
+  appSpec: {},
+  contextDescription: {},
+  suggestions: {},
+  taskExecution: {},
+};
+
+/**
+ * Resolved prompt types - all fields are required strings (ready to use)
+ * Used for default prompts and merged prompts after resolving custom values
+ */
+export interface ResolvedAutoModePrompts {
+  planningLite: string;
+  planningLiteWithApproval: string;
+  planningSpec: string;
+  planningFull: string;
+  featurePromptTemplate: string;
+  followUpPromptTemplate: string;
+  continuationPromptTemplate: string;
+  pipelineStepPromptTemplate: string;
+}
+
+export interface ResolvedAgentPrompts {
+  systemPrompt: string;
+}
+
+export interface ResolvedBacklogPlanPrompts {
+  systemPrompt: string;
+  userPromptTemplate: string;
+}
+
+export interface ResolvedEnhancementPrompts {
+  improveSystemPrompt: string;
+  technicalSystemPrompt: string;
+  simplifySystemPrompt: string;
+  acceptanceSystemPrompt: string;
+  uxReviewerSystemPrompt: string;
+}
+
+export interface ResolvedCommitMessagePrompts {
+  systemPrompt: string;
+}
+
+export interface ResolvedTitleGenerationPrompts {
+  systemPrompt: string;
+}
+
+export interface ResolvedIssueValidationPrompts {
+  systemPrompt: string;
+}
+
+export interface ResolvedIdeationPrompts {
+  ideationSystemPrompt: string;
+  suggestionsSystemPrompt: string;
+}
+
+export interface ResolvedAppSpecPrompts {
+  generateSpecSystemPrompt: string;
+  structuredSpecInstructions: string;
+  generateFeaturesFromSpecPrompt: string;
+}
+
+export interface ResolvedContextDescriptionPrompts {
+  describeFilePrompt: string;
+  describeImagePrompt: string;
+}
+
+export interface ResolvedSuggestionsPrompts {
+  featuresPrompt: string;
+  refactoringPrompt: string;
+  securityPrompt: string;
+  performancePrompt: string;
+  baseTemplate: string;
+}
+
+export interface ResolvedTaskExecutionPrompts {
+  taskPromptTemplate: string;
+  implementationInstructions: string;
+  playwrightVerificationInstructions: string;
+  learningExtractionSystemPrompt: string;
+  learningExtractionUserPromptTemplate: string;
+  planRevisionTemplate: string;
+  continuationAfterApprovalTemplate: string;
+  resumeFeatureTemplate: string;
+  projectAnalysisPrompt: string;
+}
diff --git a/temp_repo/libs/types/src/provider-utils.ts b/temp_repo/libs/types/src/provider-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0e64c97709ddae695e5ae2b72154dd2849aaba82
--- /dev/null
+++ b/temp_repo/libs/types/src/provider-utils.ts
@@ -0,0 +1,470 @@
+/**
+ * Provider utility functions
+ *
+ * Centralized utilities for determining model providers.
+ * When adding new providers, update these functions instead of
+ * scattering .startsWith() checks throughout the codebase.
+ */
+
+import type { ModelProvider } from './settings.js';
+import { LEGACY_CURSOR_MODEL_MAP } from './cursor-models.js';
+import { CLAUDE_MODEL_MAP, CODEX_MODEL_MAP } from './model.js';
+import {
+  OPENCODE_MODEL_CONFIG_MAP,
+  LEGACY_OPENCODE_MODEL_MAP,
+  RETIRED_OPENCODE_MODEL_MAP,
+} from './opencode-models.js';
+import { GEMINI_MODEL_MAP } from './gemini-models.js';
+import { COPILOT_MODEL_MAP } from './copilot-models.js';
+
+/** Provider prefix constants */
+export const PROVIDER_PREFIXES = {
+  cursor: 'cursor-',
+  codex: 'codex-',
+  opencode: 'opencode-',
+  gemini: 'gemini-',
+  copilot: 'copilot-',
+} as const;
+
+/**
+ * Provider prefix exceptions map
+ *
+ * Some providers legitimately use model IDs that start with other providers' prefixes.
+ * For example, Cursor's Gemini models (e.g., "gemini-3-pro") start with "gemini-" prefix
+ * but are Cursor models, not Gemini models.
+ *
+ * Key: The provider receiving the model (expectedProvider)
+ * Value: Array of provider prefixes to skip validation for
+ *
+ * @example
+ * // Cursor provider can receive model IDs starting with "gemini-" prefix
+ * PROVIDER_PREFIX_EXCEPTIONS.cursor.includes('gemini') === true
+ */
+export const PROVIDER_PREFIX_EXCEPTIONS: Partial<
+  Record<ModelProvider, readonly (keyof typeof PROVIDER_PREFIXES)[]>
+> = {
+  cursor: ['gemini'],
+};
+
+/**
+ * Check if a model string represents a Cursor model
+ *
+ * With canonical model IDs, Cursor models always have 'cursor-' prefix.
+ * Legacy IDs without prefix are handled by migration utilities.
+ *
+ * @param model - Model string to check (e.g., "cursor-auto", "cursor-composer-1")
+ * @returns true if the model is a Cursor model
+ */
+export function isCursorModel(model: string | undefined | null): boolean {
+  if (!model || typeof model !== 'string') return false;
+
+  // Canonical format: all Cursor models have cursor- prefix
+  if (model.startsWith(PROVIDER_PREFIXES.cursor)) {
+    return true;
+  }
+
+  // Legacy support: check if it's a known legacy bare ID
+  // This handles transition period before migration
+  if (model in LEGACY_CURSOR_MODEL_MAP) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Check if a model string represents a Claude model
+ *
+ * @param model - Model string to check (e.g., "sonnet", "opus", "claude-sonnet-4-6")
+ * @returns true if the model is a Claude model
+ */
+export function isClaudeModel(model: string | undefined | null): boolean {
+  if (!model || typeof model !== 'string') return false;
+
+  // Check if it's a Claude model alias (haiku, sonnet, opus)
+  if (model in CLAUDE_MODEL_MAP) {
+    return true;
+  }
+
+  // Check if it contains 'claude-' in the string (full model ID)
+  return model.includes('claude-');
+}
+
+/**
+ * Check if a model string represents a Codex/OpenAI model
+ *
+ * @param model - Model string to check (e.g., "gpt-5.2", "o1", "codex-gpt-5.2")
+ * @returns true if the model is a Codex model
+ */
+export function isCodexModel(model: string | undefined | null): boolean {
+  if (!model || typeof model !== 'string') return false;
+
+  // Check for explicit codex- prefix
+  if (model.startsWith(PROVIDER_PREFIXES.codex)) {
+    return true;
+  }
+
+  // Check if it's a gpt- model (bare gpt models go to Codex, not Cursor)
+  if (model.startsWith('gpt-')) {
+    return true;
+  }
+
+  // Check if it's an o-series model (o1, o3, etc.)
+  if (/^o\d/.test(model)) {
+    return true;
+  }
+
+  // Check if it's in the CODEX_MODEL_MAP
+  return model in CODEX_MODEL_MAP;
+}
+
+/**
+ * Check if a model string represents a Gemini model
+ *
+ * @param model - Model string to check (e.g., "gemini-2.5-pro", "gemini-3-pro-preview")
+ * @returns true if the model is a Gemini model
+ */
+export function isGeminiModel(model: string | undefined | null): boolean {
+  if (!model || typeof model !== 'string') return false;
+
+  // Canonical format: gemini- prefix (e.g., "gemini-2.5-flash")
+  if (model.startsWith(PROVIDER_PREFIXES.gemini)) {
+    return true;
+  }
+
+  // Check if it's a known Gemini model ID (map keys include gemini- prefix)
+  if (model in GEMINI_MODEL_MAP) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Check if a model string represents a GitHub Copilot model
+ *
+ * @param model - Model string to check (e.g., "copilot-gpt-4o", "copilot-claude-3.5-sonnet")
+ * @returns true if the model is a Copilot model
+ */
+export function isCopilotModel(model: string | undefined | null): boolean {
+  if (!model || typeof model !== 'string') return false;
+
+  // Canonical format: copilot- prefix (e.g., "copilot-gpt-4o")
+  if (model.startsWith(PROVIDER_PREFIXES.copilot)) {
+    return true;
+  }
+
+  // Check if it's a known Copilot model ID (map keys include copilot- prefix)
+  if (model in COPILOT_MODEL_MAP) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Check if a model string represents an OpenCode model
+ *
+ * With canonical model IDs, static OpenCode models use 'opencode-' prefix.
+ * Dynamic models from OpenCode CLI still use provider/model format.
+ *
+ * OpenCode models can be identified by:
+ * - 'opencode-' prefix (canonical format for static models)
+ * - 'opencode/' prefix (legacy format, will be migrated)
+ * - 'amazon-bedrock/' prefix (AWS Bedrock models via OpenCode)
+ * - Dynamic models with provider/model format (e.g., "github-copilot/gpt-4o")
+ *
+ * @param model - Model string to check
+ * @returns true if the model is an OpenCode model
+ */
+export function isOpencodeModel(model: string | undefined | null): boolean {
+  if (!model || typeof model !== 'string') return false;
+
+  // Canonical format: opencode- prefix for static models
+  if (model.startsWith(PROVIDER_PREFIXES.opencode)) {
+    return true;
+  }
+
+  // Check if it's a known OpenCode model ID (handles both formats during transition)
+  if (model in OPENCODE_MODEL_CONFIG_MAP) {
+    return true;
+  }
+
+  // Legacy format: opencode/ prefix (will be migrated to opencode-)
+  // Also supports amazon-bedrock/ for AWS Bedrock models
+  if (model.startsWith('opencode/') || model.startsWith('amazon-bedrock/')) {
+    return true;
+  }
+
+  // Check for dynamic models from OpenCode CLI with provider/model format
+  // These are models discovered dynamically from authenticated providers like:
+  // - github-copilot/gpt-4o
+  // - google/gemini-2.5-pro
+  // - xai/grok-3
+  // - openrouter/qwen/qwen3-14b:free (model names can contain / or :)
+  // Pattern: provider-id/model-name (at least one /, not a URL)
+  if (model.includes('/') && !model.includes('://')) {
+    const slashIndex = model.indexOf('/');
+    const providerId = model.substring(0, slashIndex);
+    const modelName = model.substring(slashIndex + 1);
+    // Valid dynamic model format: provider-id/model-name (both parts non-empty)
+    if (providerId.length > 0 && modelName.length > 0) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Get the provider for a model string
+ *
+ * @param model - Model string to check
+ * @returns The provider type, defaults to 'claude' for unknown models
+ */
+export function getModelProvider(model: string | undefined | null): ModelProvider {
+  // Check Copilot first since it has a unique prefix
+  if (isCopilotModel(model)) {
+    return 'copilot';
+  }
+  // Check Gemini since it uses gemini- prefix
+  if (isGeminiModel(model)) {
+    return 'gemini';
+  }
+  // Check OpenCode next since it uses provider-prefixed formats that could conflict
+  if (isOpencodeModel(model)) {
+    return 'opencode';
+  }
+  // Check Codex before Cursor, since Cursor also supports gpt models
+  // but bare gpt-* should route to Codex
+  if (isCodexModel(model)) {
+    return 'codex';
+  }
+  if (isCursorModel(model)) {
+    return 'cursor';
+  }
+  return 'claude';
+}
+
+/**
+ * Strip the provider prefix from a model string
+ *
+ * @param model - Model string that may have a provider prefix
+ * @returns Model string without provider prefix
+ *
+ * @example
+ * stripProviderPrefix('cursor-composer-1') // 'composer-1'
+ * stripProviderPrefix('sonnet') // 'sonnet'
+ */
+export function stripProviderPrefix(model: string): string {
+  if (!model || typeof model !== 'string') return model;
+
+  for (const prefix of Object.values(PROVIDER_PREFIXES)) {
+    if (model.startsWith(prefix)) {
+      return model.slice(prefix.length);
+    }
+  }
+  return model;
+}
+
+/**
+ * Add the provider prefix to a model string if not already present
+ *
+ * @param model - Bare model ID
+ * @param provider - Provider to add prefix for
+ * @returns Model string with provider prefix
+ *
+ * @example
+ * addProviderPrefix('composer-1', 'cursor') // 'cursor-composer-1'
+ * addProviderPrefix('cursor-composer-1', 'cursor') // 'cursor-composer-1' (no change)
+ * addProviderPrefix('gpt-5.2', 'codex') // 'codex-gpt-5.2'
+ * addProviderPrefix('sonnet', 'claude') // 'sonnet' (Claude doesn't use prefix)
+ * addProviderPrefix('2.5-flash', 'gemini') // 'gemini-2.5-flash'
+ */
+export function addProviderPrefix(model: string, provider: ModelProvider): string {
+  if (!model || typeof model !== 'string') return model;
+
+  if (provider === 'cursor') {
+    if (!model.startsWith(PROVIDER_PREFIXES.cursor)) {
+      return `${PROVIDER_PREFIXES.cursor}${model}`;
+    }
+  } else if (provider === 'codex') {
+    if (!model.startsWith(PROVIDER_PREFIXES.codex)) {
+      return `${PROVIDER_PREFIXES.codex}${model}`;
+    }
+  } else if (provider === 'opencode') {
+    if (!model.startsWith(PROVIDER_PREFIXES.opencode)) {
+      return `${PROVIDER_PREFIXES.opencode}${model}`;
+    }
+  } else if (provider === 'gemini') {
+    if (!model.startsWith(PROVIDER_PREFIXES.gemini)) {
+      return `${PROVIDER_PREFIXES.gemini}${model}`;
+    }
+  } else if (provider === 'copilot') {
+    if (!model.startsWith(PROVIDER_PREFIXES.copilot)) {
+      return `${PROVIDER_PREFIXES.copilot}${model}`;
+    }
+  }
+  // Claude models don't use prefixes
+  return model;
+}
+
+/**
+ * Get the bare model ID from a model string (without provider prefix)
+ *
+ * @param model - Model string that may have a provider prefix
+ * @returns The bare model ID
+ */
+export function getBareModelId(model: string): string {
+  return stripProviderPrefix(model);
+}
+
+/**
+ * Normalize a model string to its canonical form
+ *
+ * With the new canonical format:
+ * - Cursor models: always have cursor- prefix
+ * - OpenCode models: always have opencode- prefix (static) or provider/model format (dynamic)
+ * - Claude models: can use legacy aliases or claude- prefix
+ * - Codex models: always have codex- prefix
+ *
+ * @param model - Model string to normalize
+ * @returns Normalized model string
+ */
+export function normalizeModelString(model: string | undefined | null): string {
+  if (!model || typeof model !== 'string') return 'claude-sonnet'; // Default to canonical
+
+  // Already has a canonical prefix - return as-is (but check for retired opencode models first)
+  if (model.startsWith(PROVIDER_PREFIXES.opencode) && model in RETIRED_OPENCODE_MODEL_MAP) {
+    return RETIRED_OPENCODE_MODEL_MAP[model];
+  }
+  if (
+    model.startsWith(PROVIDER_PREFIXES.cursor) ||
+    model.startsWith(PROVIDER_PREFIXES.codex) ||
+    model.startsWith(PROVIDER_PREFIXES.opencode) ||
+    model.startsWith(PROVIDER_PREFIXES.gemini) ||
+    model.startsWith(PROVIDER_PREFIXES.copilot) ||
+    model.startsWith('claude-')
+  ) {
+    return model;
+  }
+
+  // Check if it's a legacy Cursor model ID
+  if (model in LEGACY_CURSOR_MODEL_MAP) {
+    return LEGACY_CURSOR_MODEL_MAP[model as keyof typeof LEGACY_CURSOR_MODEL_MAP];
+  }
+
+  // Check if it's a legacy OpenCode model ID
+  if (model in LEGACY_OPENCODE_MODEL_MAP) {
+    return LEGACY_OPENCODE_MODEL_MAP[model as keyof typeof LEGACY_OPENCODE_MODEL_MAP];
+  }
+
+  // Legacy Claude aliases
+  if (model in CLAUDE_MODEL_MAP) {
+    return `claude-${model}`;
+  }
+
+  // For Codex, bare gpt-* and o-series models need codex- prefix
+  if (model.startsWith('gpt-') || /^o\d/.test(model)) {
+    return `${PROVIDER_PREFIXES.codex}${model}`;
+  }
+
+  return model;
+}
+
+/**
+ * Check if a model supports structured output (JSON schema)
+ *
+ * Structured output is a feature that allows the model to return responses
+ * conforming to a JSON schema. Currently supported by:
+ * - Claude models (native Anthropic API support)
+ * - Codex/OpenAI models (via response_format with json_schema)
+ *
+ * Models that do NOT support structured output:
+ * - Cursor models (uses different API format)
+ * - OpenCode models (various backend providers)
+ * - Gemini models (different API)
+ * - Copilot models (proxy to various backends)
+ *
+ * @param model - Model string to check
+ * @returns true if the model supports structured output
+ *
+ * @example
+ * supportsStructuredOutput('sonnet') // true (Claude)
+ * supportsStructuredOutput('claude-sonnet-4-6') // true (Claude)
+ * supportsStructuredOutput('codex-gpt-5.2') // true (Codex/OpenAI)
+ * supportsStructuredOutput('cursor-auto') // false
+ * supportsStructuredOutput('gemini-2.5-pro') // false
+ */
+export function supportsStructuredOutput(model: string | undefined | null): boolean {
+  // Exclude proxy providers first - they may have Claude/Codex in the model name
+  // but route through different APIs that don't support structured output
+  if (
+    isCursorModel(model) ||
+    isGeminiModel(model) ||
+    isOpencodeModel(model) ||
+    isCopilotModel(model)
+  ) {
+    return false;
+  }
+  return isClaudeModel(model) || isCodexModel(model);
+}
+
+/**
+ * Validate that a model ID does not contain a provider prefix
+ *
+ * Providers should receive bare model IDs (e.g., "gpt-5.1-codex-max", "composer-1")
+ * without provider prefixes (e.g., NOT "codex-gpt-5.1-codex-max", NOT "cursor-composer-1").
+ *
+ * This validation ensures the ProviderFactory properly stripped prefixes before
+ * passing models to providers.
+ *
+ * NOTE: Some providers use model IDs that may start with other providers' prefixes
+ * (e.g., Cursor's "gemini-3-pro" starts with "gemini-" but is a Cursor model, not a Gemini model).
+ * These exceptions are configured in PROVIDER_PREFIX_EXCEPTIONS.
+ *
+ * @param model - Model ID to validate
+ * @param providerName - Name of the provider receiving this model (for error messages)
+ * @param expectedProvider - The provider type expected to receive this model (e.g., "cursor", "gemini")
+ * @throws Error if model contains a provider prefix that doesn't match the expected provider
+ * @returns void
+ *
+ * @example
+ * validateBareModelId("gpt-5.1-codex-max", "CodexProvider", "codex");  // ✅ OK
+ * validateBareModelId("codex-gpt-5.1-codex-max", "CodexProvider", "codex");  // ❌ Throws error
+ * validateBareModelId("gemini-3-pro", "CursorProvider", "cursor");  // ✅ OK (Cursor Gemini model)
+ * validateBareModelId("gemini-3-pro", "GeminiProvider", "gemini");  // ✅ OK (Gemini model)
+ */
+export function validateBareModelId(
+  model: string,
+  providerName: string,
+  expectedProvider?: ModelProvider
+): void {
+  if (!model || typeof model !== 'string') {
+    throw new Error(`[${providerName}] Invalid model ID: expected string, got ${typeof model}`);
+  }
+
+  for (const provider of Object.keys(PROVIDER_PREFIXES) as Array<keyof typeof PROVIDER_PREFIXES>) {
+    const prefix = PROVIDER_PREFIXES[provider];
+    // Skip validation for configured provider prefix exceptions
+    // (e.g., Cursor provider can receive models with "gemini-" prefix for Cursor Gemini models)
+    if (expectedProvider && PROVIDER_PREFIX_EXCEPTIONS[expectedProvider]?.includes(provider)) {
+      continue;
+    }
+
+    // Skip validation if the model has the expected provider's own prefix
+    // (e.g., Gemini provider can receive models with "gemini-" prefix)
+    if (expectedProvider && provider === expectedProvider) {
+      continue;
+    }
+
+    if (model.startsWith(prefix)) {
+      throw new Error(
+        `[${providerName}] Model ID should not contain provider prefix '${prefix}'. ` +
+          `Got: '${model}'. ` +
+          `This is likely a bug in ProviderFactory - it should strip the '${provider}' prefix ` +
+          `before passing the model to the provider.`
+      );
+    }
+  }
+}
diff --git a/temp_repo/libs/types/src/provider.ts b/temp_repo/libs/types/src/provider.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4ac498469a45be935e49068ca2626903e6de1a6e
--- /dev/null
+++ b/temp_repo/libs/types/src/provider.ts
@@ -0,0 +1,329 @@
+/**
+ * Shared types for AI model providers
+ */
+
+import type {
+  ThinkingLevel,
+  ClaudeApiProfile,
+  ClaudeCompatibleProvider,
+  Credentials,
+} from './settings.js';
+import type { CodexSandboxMode, CodexApprovalPolicy } from './codex.js';
+
+/**
+ * Reasoning effort levels for Codex/OpenAI models
+ * Controls the computational intensity and reasoning tokens used.
+ * Based on OpenAI API documentation:
+ * - 'none': No reasoning (GPT-5.1 models only)
+ * - 'minimal': Very quick reasoning
+ * - 'low': Quick responses for simpler queries
+ * - 'medium': Balance between depth and speed (default)
+ * - 'high': Maximizes reasoning depth for critical tasks
+ * - 'xhigh': Highest level, supported by gpt-5.1-codex-max and newer
+ */
+export type ReasoningEffort = 'none' | 'minimal' | 'low' | 'medium' | 'high' | 'xhigh';
+
+/**
+ * Default timeout in milliseconds for provider operations.
+ * Used as the baseline timeout for API calls and CLI operations.
+ */
+export const DEFAULT_TIMEOUT_MS = 30000;
+
+/**
+ * Timeout multipliers for reasoning effort levels.
+ * Higher reasoning effort requires more time for the model to generate reasoning tokens.
+ * These multipliers are applied to DEFAULT_TIMEOUT_MS.
+ */
+export const REASONING_TIMEOUT_MULTIPLIERS: Record<ReasoningEffort, number> = {
+  none: 1.0, // No reasoning, baseline timeout
+  minimal: 1.2, // Very quick reasoning, slight increase
+  low: 1.5, // Quick reasoning, moderate increase
+  medium: 2.0, // Balanced reasoning, double baseline
+  high: 3.0, // Extended reasoning, triple baseline
+  xhigh: 4.0, // Maximum reasoning, quadruple baseline
+};
+
+/**
+ * Calculate timeout for provider operations based on reasoning effort.
+ * Higher reasoning effort requires more time for the model to generate reasoning tokens.
+ *
+ * This function addresses GitHub issue #530 where Codex CLI with GPT-5.2 "xtra thinking"
+ * (xhigh reasoning effort) mode would get stuck because the 30-second "no output" timeout
+ * would trigger during extended reasoning phases.
+ *
+ * @param reasoningEffort - The reasoning effort level, defaults to 'none' if undefined.
+ *                          If an invalid value is provided, falls back to multiplier 1.0.
+ * @param baseTimeoutMs - Optional custom base timeout, defaults to DEFAULT_TIMEOUT_MS (30000ms)
+ * @returns The calculated timeout in milliseconds, rounded to the nearest integer
+ *
+ * @example
+ * // Using default base timeout (30000ms)
+ * calculateReasoningTimeout('high') // Returns 90000 (30000 * 3.0)
+ *
+ * @example
+ * // Using custom base timeout
+ * calculateReasoningTimeout('medium', 60000) // Returns 120000 (60000 * 2.0)
+ *
+ * @example
+ * // No reasoning effort (default)
+ * calculateReasoningTimeout() // Returns 30000 (default timeout)
+ * calculateReasoningTimeout(undefined) // Returns 30000
+ */
+export function calculateReasoningTimeout(
+  reasoningEffort?: ReasoningEffort,
+  baseTimeoutMs: number = DEFAULT_TIMEOUT_MS
+): number {
+  const effort = reasoningEffort ?? 'none';
+  const multiplier = REASONING_TIMEOUT_MULTIPLIERS[effort] ?? 1.0;
+  return Math.round(baseTimeoutMs * multiplier);
+}
+
+/**
+ * Configuration for a provider instance
+ */
+export interface ProviderConfig {
+  apiKey?: string;
+  cliPath?: string;
+  env?: Record<string, string>;
+}
+
+/**
+ * Message in conversation history
+ */
+export interface ConversationMessage {
+  role: 'user' | 'assistant';
+  content: string | Array<{ type: string; text?: string; source?: object }>;
+}
+
+/**
+ * System prompt preset configuration for CLAUDE.md auto-loading
+ */
+export interface SystemPromptPreset {
+  type: 'preset';
+  preset: 'claude_code';
+  append?: string;
+}
+
+/**
+ * MCP server configuration types for SDK options
+ * Matches the Claude Agent SDK's McpServerConfig types
+ */
+export type McpServerConfig = McpStdioServerConfig | McpSSEServerConfig | McpHttpServerConfig;
+
+/**
+ * Stdio-based MCP server (subprocess)
+ * Note: `type` is optional and defaults to 'stdio' to match SDK behavior
+ * and allow simpler configs like { command: "node", args: ["server.js"] }
+ */
+export interface McpStdioServerConfig {
+  type?: 'stdio';
+  command: string;
+  args?: string[];
+  env?: Record<string, string>;
+}
+
+/** SSE-based MCP server */
+export interface McpSSEServerConfig {
+  type: 'sse';
+  url: string;
+  headers?: Record<string, string>;
+}
+
+/** HTTP-based MCP server */
+export interface McpHttpServerConfig {
+  type: 'http';
+  url: string;
+  headers?: Record<string, string>;
+}
+
+/**
+ * Subagent definition for specialized task delegation
+ */
+export interface AgentDefinition {
+  /** Natural language description of when to use this agent */
+  description: string;
+  /** System prompt defining the agent's role and behavior */
+  prompt: string;
+  /** Restricted tool list (if omitted, inherits all tools) */
+  tools?: string[];
+  /** Model override for this agent */
+  model?: 'sonnet' | 'opus' | 'haiku' | 'inherit';
+}
+
+/**
+ * Options for executing a query via a provider
+ */
+export interface ExecuteOptions {
+  prompt: string | Array<{ type: string; text?: string; source?: object }>;
+  /** Bare model ID without provider prefix (e.g., "gpt-5.1-codex-max", "composer-1") */
+  model: string;
+  /** Original model ID with provider prefix for logging (e.g., "codex-gpt-5.1-codex-max") */
+  originalModel?: string;
+  cwd: string;
+  systemPrompt?: string | SystemPromptPreset;
+  maxTurns?: number;
+  allowedTools?: string[];
+  /**
+   * Restrict which built-in tools are available to the subprocess.
+   * - string[] - Array of specific tool names (e.g., ['Bash', 'Read', 'Edit'])
+   * - [] (empty array) - Disable all built-in tools (text generation only)
+   * Unlike allowedTools (which controls auto-approval), this controls tool availability.
+   */
+  tools?: string[];
+  mcpServers?: Record<string, McpServerConfig>;
+  /** If true, allows all MCP tools unrestricted (no approval needed). Default: false */
+  mcpUnrestrictedTools?: boolean;
+  /** If true, automatically approves all MCP tool calls. Default: undefined (uses approval policy) */
+  mcpAutoApproveTools?: boolean;
+  abortController?: AbortController;
+  conversationHistory?: ConversationMessage[]; // Previous messages for context
+  sdkSessionId?: string; // Claude SDK session ID for resuming conversations
+  settingSources?: Array<'user' | 'project' | 'local'>; // Sources for CLAUDE.md loading
+  /**
+   * If true, the provider should run in read-only mode (no file modifications).
+   * For Cursor CLI, this omits the --force flag, making it suggest-only.
+   * Default: false (allows edits)
+   */
+  readOnly?: boolean;
+  /**
+   * Extended thinking level for Claude models.
+   * Controls the amount of reasoning tokens allocated.
+   * Only applies to Claude models; Cursor models handle thinking internally.
+   */
+  thinkingLevel?: ThinkingLevel;
+  /**
+   * Custom subagents for specialized task delegation
+   * Key: agent name, Value: agent definition
+   */
+  agents?: Record<string, AgentDefinition>;
+  /**
+   * Reasoning effort for Codex/OpenAI models with reasoning capabilities.
+   * Controls how many reasoning tokens the model generates before responding.
+   * Supported values: 'none' | 'minimal' | 'low' | 'medium' | 'high' | 'xhigh'
+   * - none: No reasoning tokens (fastest)
+   * - minimal/low: Quick reasoning for simple tasks
+   * - medium: Balanced reasoning (default)
+   * - high: Extended reasoning for complex tasks
+   * - xhigh: Maximum reasoning for quality-critical tasks
+   * Only applies to models that support reasoning (gpt-5.1-codex-max+, o3-mini, o4-mini)
+   */
+  reasoningEffort?: ReasoningEffort;
+  codexSettings?: {
+    autoLoadAgents?: boolean;
+    sandboxMode?: CodexSandboxMode;
+    approvalPolicy?: CodexApprovalPolicy;
+    enableWebSearch?: boolean;
+    enableImages?: boolean;
+    additionalDirs?: string[];
+    threadId?: string;
+  };
+  outputFormat?: {
+    type: 'json_schema';
+    schema: Record<string, unknown>;
+  };
+  /**
+   * Active Claude API profile for alternative endpoint configuration.
+   * When set, uses profile's settings (base URL, auth, model mappings) instead of direct Anthropic API.
+   * When undefined, uses direct Anthropic API (via API key or Claude Max CLI OAuth).
+   * @deprecated Use claudeCompatibleProvider instead
+   */
+  claudeApiProfile?: ClaudeApiProfile;
+  /**
+   * Claude-compatible provider for alternative endpoint configuration.
+   * When set, uses provider's connection settings (base URL, auth) instead of direct Anthropic API.
+   * Models are passed directly without alias mapping.
+   * Takes precedence over claudeApiProfile if both are set.
+   */
+  claudeCompatibleProvider?: ClaudeCompatibleProvider;
+  /**
+   * Credentials for resolving 'credentials' apiKeySource in Claude API profiles/providers.
+   * When a profile/provider has apiKeySource='credentials', the Anthropic key from this object is used.
+   */
+  credentials?: Credentials;
+}
+
+/**
+ * Content block in a provider message (matches Claude SDK format)
+ */
+export interface ContentBlock {
+  type: 'text' | 'tool_use' | 'thinking' | 'tool_result';
+  text?: string;
+  thinking?: string;
+  name?: string;
+  input?: unknown;
+  tool_use_id?: string;
+  content?: string;
+}
+
+/**
+ * Message returned by a provider (matches Claude SDK streaming format)
+ */
+export interface ProviderMessage {
+  type: 'assistant' | 'user' | 'error' | 'result';
+  subtype?:
+    | 'success'
+    | 'error'
+    | 'error_max_turns'
+    | 'error_max_structured_output_retries'
+    | 'error_during_execution'
+    | 'error_max_budget_usd';
+  session_id?: string;
+  message?: {
+    role: 'user' | 'assistant';
+    content: ContentBlock[];
+  };
+  result?: string;
+  error?: string;
+  parent_tool_use_id?: string | null;
+  /** Structured output from SDK when using outputFormat */
+  structured_output?: Record<string, unknown>;
+}
+
+/**
+ * Installation status for a provider
+ */
+export interface InstallationStatus {
+  installed: boolean;
+  path?: string;
+  version?: string;
+  /**
+   * How the provider was installed/detected
+   * - cli: Direct CLI binary
+   * - wsl: CLI accessed via Windows Subsystem for Linux
+   * - npm: Installed via npm
+   * - brew: Installed via Homebrew
+   * - sdk: Using SDK library
+   */
+  method?: 'cli' | 'wsl' | 'npm' | 'brew' | 'sdk';
+  hasApiKey?: boolean;
+  hasOAuthToken?: boolean;
+  authenticated?: boolean;
+  error?: string;
+}
+
+/**
+ * Validation result
+ */
+export interface ValidationResult {
+  valid: boolean;
+  errors: string[];
+  warnings?: string[];
+}
+
+/**
+ * Model definition
+ */
+export interface ModelDefinition {
+  id: string;
+  name: string;
+  modelString: string;
+  provider: string;
+  description: string;
+  contextWindow?: number;
+  maxOutputTokens?: number;
+  supportsVision?: boolean;
+  supportsTools?: boolean;
+  tier?: 'basic' | 'standard' | 'premium';
+  default?: boolean;
+  hasReasoning?: boolean;
+}
diff --git a/temp_repo/libs/types/src/session.ts b/temp_repo/libs/types/src/session.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2c81825c6746ef3673b483856bd22e26b28f580f
--- /dev/null
+++ b/temp_repo/libs/types/src/session.ts
@@ -0,0 +1,32 @@
+/**
+ * Session types for agent conversations
+ */
+
+export interface AgentSession {
+  id: string;
+  name: string;
+  projectPath: string;
+  workingDirectory?: string; // The worktree/directory this session runs in
+  createdAt: string;
+  updatedAt: string;
+  messageCount: number;
+  isArchived: boolean;
+  isDirty?: boolean; // Indicates session has completed work that needs review
+  tags?: string[];
+}
+
+export interface SessionListItem extends AgentSession {
+  preview?: string; // Last message preview
+}
+
+export interface CreateSessionParams {
+  name: string;
+  projectPath: string;
+  workingDirectory?: string;
+}
+
+export interface UpdateSessionParams {
+  id: string;
+  name?: string;
+  tags?: string[];
+}
diff --git a/temp_repo/libs/types/src/settings.ts b/temp_repo/libs/types/src/settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1f1968dc2f5ba64f1140470e35d4a37b11112f88
--- /dev/null
+++ b/temp_repo/libs/types/src/settings.ts
@@ -0,0 +1,1952 @@
+/**
+ * Settings Types - Shared types for file-based settings storage
+ *
+ * Defines the structure for global settings, credentials, and per-project settings
+ * that are persisted to disk in JSON format. These types are used by both the server
+ * (for file I/O via SettingsService) and the UI (for state management and sync).
+ */
+
+import type { ModelAlias, ModelId } from './model.js';
+import type { CursorModelId } from './cursor-models.js';
+import { CURSOR_MODEL_MAP, getAllCursorModelIds } from './cursor-models.js';
+import type { OpencodeModelId } from './opencode-models.js';
+import { getAllOpencodeModelIds, DEFAULT_OPENCODE_MODEL } from './opencode-models.js';
+import type { GeminiModelId } from './gemini-models.js';
+import { getAllGeminiModelIds, DEFAULT_GEMINI_MODEL } from './gemini-models.js';
+import type { CopilotModelId } from './copilot-models.js';
+import { getAllCopilotModelIds, DEFAULT_COPILOT_MODEL } from './copilot-models.js';
+import type { PromptCustomization } from './prompts.js';
+import type { CodexSandboxMode, CodexApprovalPolicy } from './codex.js';
+import type { ReasoningEffort } from './provider.js';
+
+// Re-export ModelAlias for convenience
+export type { ModelAlias };
+
+/**
+ * ThemeMode - Available color themes for the UI
+ *
+ * Includes system theme and multiple color schemes organized by dark/light:
+ * - System: Respects OS dark/light mode preference
+ * - Dark themes (20): dark, retro, dracula, nord, monokai, tokyonight, solarized,
+ *   gruvbox, catppuccin, onedark, synthwave, red, sunset, gray, forest, ocean,
+ *   ember, ayu-dark, ayu-mirage, matcha
+ * - Light themes (20): light, cream, solarizedlight, github, paper, rose, mint,
+ *   lavender, sand, sky, peach, snow, sepia, gruvboxlight, nordlight, blossom,
+ *   ayu-light, onelight, bluloco, feather
+ */
+export type ThemeMode =
+  | 'system'
+  // Dark themes (20)
+  | 'dark'
+  | 'retro'
+  | 'dracula'
+  | 'nord'
+  | 'monokai'
+  | 'tokyonight'
+  | 'solarized'
+  | 'gruvbox'
+  | 'catppuccin'
+  | 'onedark'
+  | 'synthwave'
+  | 'red'
+  | 'sunset'
+  | 'gray'
+  | 'forest'
+  | 'ocean'
+  | 'ember'
+  | 'ayu-dark'
+  | 'ayu-mirage'
+  | 'matcha'
+  // Light themes (20)
+  | 'light'
+  | 'cream'
+  | 'solarizedlight'
+  | 'github'
+  | 'paper'
+  | 'rose'
+  | 'mint'
+  | 'lavender'
+  | 'sand'
+  | 'sky'
+  | 'peach'
+  | 'snow'
+  | 'sepia'
+  | 'gruvboxlight'
+  | 'nordlight'
+  | 'blossom'
+  | 'ayu-light'
+  | 'onelight'
+  | 'bluloco'
+  | 'feather';
+
+export type TerminalPromptTheme =
+  | 'custom'
+  | 'omp-1_shell'
+  | 'omp-agnoster'
+  | 'omp-agnoster.minimal'
+  | 'omp-agnosterplus'
+  | 'omp-aliens'
+  | 'omp-amro'
+  | 'omp-atomic'
+  | 'omp-atomicBit'
+  | 'omp-avit'
+  | 'omp-blue-owl'
+  | 'omp-blueish'
+  | 'omp-bubbles'
+  | 'omp-bubblesextra'
+  | 'omp-bubblesline'
+  | 'omp-capr4n'
+  | 'omp-catppuccin'
+  | 'omp-catppuccin_frappe'
+  | 'omp-catppuccin_latte'
+  | 'omp-catppuccin_macchiato'
+  | 'omp-catppuccin_mocha'
+  | 'omp-cert'
+  | 'omp-chips'
+  | 'omp-cinnamon'
+  | 'omp-clean-detailed'
+  | 'omp-cloud-context'
+  | 'omp-cloud-native-azure'
+  | 'omp-cobalt2'
+  | 'omp-craver'
+  | 'omp-darkblood'
+  | 'omp-devious-diamonds'
+  | 'omp-di4am0nd'
+  | 'omp-dracula'
+  | 'omp-easy-term'
+  | 'omp-emodipt'
+  | 'omp-emodipt-extend'
+  | 'omp-fish'
+  | 'omp-free-ukraine'
+  | 'omp-froczh'
+  | 'omp-gmay'
+  | 'omp-glowsticks'
+  | 'omp-grandpa-style'
+  | 'omp-gruvbox'
+  | 'omp-half-life'
+  | 'omp-honukai'
+  | 'omp-hotstick.minimal'
+  | 'omp-hul10'
+  | 'omp-hunk'
+  | 'omp-huvix'
+  | 'omp-if_tea'
+  | 'omp-illusi0n'
+  | 'omp-iterm2'
+  | 'omp-jandedobbeleer'
+  | 'omp-jblab_2021'
+  | 'omp-jonnychipz'
+  | 'omp-json'
+  | 'omp-jtracey93'
+  | 'omp-jv_sitecorian'
+  | 'omp-kali'
+  | 'omp-kushal'
+  | 'omp-lambda'
+  | 'omp-lambdageneration'
+  | 'omp-larserikfinholt'
+  | 'omp-lightgreen'
+  | 'omp-M365Princess'
+  | 'omp-marcduiker'
+  | 'omp-markbull'
+  | 'omp-material'
+  | 'omp-microverse-power'
+  | 'omp-mojada'
+  | 'omp-montys'
+  | 'omp-mt'
+  | 'omp-multiverse-neon'
+  | 'omp-negligible'
+  | 'omp-neko'
+  | 'omp-night-owl'
+  | 'omp-nordtron'
+  | 'omp-nu4a'
+  | 'omp-onehalf.minimal'
+  | 'omp-paradox'
+  | 'omp-pararussel'
+  | 'omp-patriksvensson'
+  | 'omp-peru'
+  | 'omp-pixelrobots'
+  | 'omp-plague'
+  | 'omp-poshmon'
+  | 'omp-powerlevel10k_classic'
+  | 'omp-powerlevel10k_lean'
+  | 'omp-powerlevel10k_modern'
+  | 'omp-powerlevel10k_rainbow'
+  | 'omp-powerline'
+  | 'omp-probua.minimal'
+  | 'omp-pure'
+  | 'omp-quick-term'
+  | 'omp-remk'
+  | 'omp-robbyrussell'
+  | 'omp-rudolfs-dark'
+  | 'omp-rudolfs-light'
+  | 'omp-sim-web'
+  | 'omp-slim'
+  | 'omp-slimfat'
+  | 'omp-smoothie'
+  | 'omp-sonicboom_dark'
+  | 'omp-sonicboom_light'
+  | 'omp-sorin'
+  | 'omp-space'
+  | 'omp-spaceship'
+  | 'omp-star'
+  | 'omp-stelbent-compact.minimal'
+  | 'omp-stelbent.minimal'
+  | 'omp-takuya'
+  | 'omp-the-unnamed'
+  | 'omp-thecyberden'
+  | 'omp-tiwahu'
+  | 'omp-tokyo'
+  | 'omp-tokyonight_storm'
+  | 'omp-tonybaloney'
+  | 'omp-uew'
+  | 'omp-unicorn'
+  | 'omp-velvet'
+  | 'omp-wholespace'
+  | 'omp-wopian'
+  | 'omp-xtoys'
+  | 'omp-ys'
+  | 'omp-zash';
+
+/** PlanningMode - Planning levels for feature generation workflows */
+export type PlanningMode = 'skip' | 'lite' | 'spec' | 'full';
+
+/**
+ * FeatureTemplate - Pre-configured task prompts for quick feature creation
+ *
+ * Templates allow users to quickly create features with pre-written prompts.
+ * Built-in templates are protected from deletion but can be disabled.
+ */
+export interface FeatureTemplate {
+  /** Unique identifier */
+  id: string;
+  /** Display name (shown in dropdown) */
+  name: string;
+  /** Pre-written prompt/task description */
+  prompt: string;
+  /** Optional preferred model for this template */
+  model?: PhaseModelEntry;
+  /** Whether this is a built-in template (protected from deletion) */
+  isBuiltIn?: boolean;
+  /** Whether this template is enabled (hidden if false) */
+  enabled?: boolean;
+  /** Sort order (lower = higher in list) */
+  order?: number;
+}
+
+/** Default built-in feature templates */
+export const DEFAULT_FEATURE_TEMPLATES: FeatureTemplate[] = [
+  {
+    id: 'run-tests-lint-format',
+    name: 'Run tests, lint, and format',
+    prompt:
+      'Run all tests, lint checks, and format the codebase. Fix any issues found. Ensure the code passes all quality checks before marking complete.',
+    isBuiltIn: true,
+    enabled: true,
+    order: 0,
+  },
+  {
+    id: 'write-tests-for-changes',
+    name: 'Write tests for current changes',
+    prompt:
+      'Analyze the current uncommitted changes and write comprehensive tests for the modified code. Focus on edge cases and ensure good test coverage.',
+    isBuiltIn: true,
+    enabled: true,
+    order: 1,
+  },
+  {
+    id: 'review-recent-changes',
+    name: 'Review and summarize recent changes',
+    prompt:
+      'Review the recent commits and changes in this codebase. Provide a summary of what was changed, identify any potential issues, and suggest improvements.',
+    isBuiltIn: true,
+    enabled: true,
+    order: 2,
+  },
+  {
+    id: 'fix-lint-errors',
+    name: 'Fix lint errors',
+    prompt:
+      'Run the linter and fix all reported errors. Ensure the codebase passes lint checks without warnings.',
+    isBuiltIn: true,
+    enabled: true,
+    order: 3,
+  },
+  {
+    id: 'update-dependencies',
+    name: 'Update and test dependencies',
+    prompt:
+      'Check for outdated dependencies, update them to their latest stable versions, and run tests to ensure nothing breaks. Document any breaking changes or migration steps required.',
+    isBuiltIn: true,
+    enabled: true,
+    order: 4,
+  },
+  {
+    id: 'code-review-and-fix',
+    name: 'Code review and fix issues',
+    prompt:
+      'Perform a thorough code review of the current codebase. Identify and fix any issues found, including: code quality problems, potential bugs, security vulnerabilities, performance bottlenecks, and violations of best practices. After fixing all issues, run tests and lint to verify everything passes.',
+    isBuiltIn: true,
+    enabled: true,
+    order: 5,
+  },
+];
+
+/** ServerLogLevel - Log verbosity level for the API server */
+export type ServerLogLevel = 'error' | 'warn' | 'info' | 'debug';
+
+/** ThinkingLevel - Extended thinking levels for Claude models (reasoning intensity) */
+export type ThinkingLevel = 'none' | 'low' | 'medium' | 'high' | 'ultrathink' | 'adaptive';
+
+/**
+ * SidebarStyle - Sidebar layout style options
+ *
+ * - 'unified': Single sidebar with integrated project dropdown (default, modern)
+ * - 'discord': Two sidebars - narrow project switcher + expandable navigation sidebar (classic)
+ */
+export type SidebarStyle = 'unified' | 'discord';
+
+/**
+ * Thinking token budget mapping based on Claude SDK documentation.
+ * @see https://docs.anthropic.com/en/docs/build-with-claude/extended-thinking
+ *
+ * - Minimum budget: 1,024 tokens
+ * - Complex tasks starting point: 16,000+ tokens
+ * - Above 32,000: Risk of timeouts (batch processing recommended)
+ */
+export const THINKING_TOKEN_BUDGET: Record<ThinkingLevel, number | undefined> = {
+  none: undefined, // Thinking disabled
+  low: 1024, // Minimum per docs
+  medium: 10000, // Light reasoning
+  high: 16000, // Complex tasks (recommended starting point)
+  ultrathink: 32000, // Maximum safe (above this risks timeouts)
+  adaptive: undefined, // Adaptive thinking (Opus 4.6) - SDK handles token allocation
+};
+
+/**
+ * Convert thinking level to SDK maxThinkingTokens value
+ */
+export function getThinkingTokenBudget(level: ThinkingLevel | undefined): number | undefined {
+  if (!level || level === 'none') return undefined;
+  return THINKING_TOKEN_BUDGET[level];
+}
+
+/**
+ * Check if a model uses adaptive thinking (Opus 4.6+)
+ * Adaptive thinking models let the SDK decide token allocation automatically.
+ */
+export function isAdaptiveThinkingModel(model: string): boolean {
+  return model.includes('opus-4-6') || model === 'claude-opus';
+}
+
+/**
+ * Get the available thinking levels for a given model.
+ * - Opus 4.6: Only 'none' and 'adaptive' (SDK handles token allocation)
+ * - Others: Full range of manual thinking levels
+ */
+export function getThinkingLevelsForModel(model: string): ThinkingLevel[] {
+  if (isAdaptiveThinkingModel(model)) {
+    return ['none', 'adaptive'];
+  }
+  return ['none', 'low', 'medium', 'high', 'ultrathink'];
+}
+
+/**
+ * Normalize a selected thinking level to a value supported by the target model.
+ * Prefers preserving the selected level, falls back to 'none' when available.
+ */
+export function normalizeThinkingLevelForModel(
+  model: string,
+  thinkingLevel: ThinkingLevel | undefined
+): ThinkingLevel {
+  const availableLevels = getThinkingLevelsForModel(model);
+  const currentLevel = thinkingLevel || 'none';
+
+  if (availableLevels.includes(currentLevel)) {
+    return currentLevel;
+  }
+
+  if (availableLevels.includes('none')) {
+    return 'none';
+  }
+
+  return availableLevels[0];
+}
+
+/**
+ * Get the default thinking level for a given model.
+ * Used when selecting a model via the primary button in the two-stage selector.
+ * Returns 'adaptive' for Opus models (which support adaptive thinking),
+ * and 'none' for all other models.
+ */
+export function getDefaultThinkingLevel(model: string): ThinkingLevel {
+  if (isAdaptiveThinkingModel(model)) {
+    return 'adaptive';
+  }
+  return 'none';
+}
+
+/** ModelProvider - AI model provider for credentials and API key management */
+export type ModelProvider = 'claude' | 'cursor' | 'codex' | 'opencode' | 'gemini' | 'copilot';
+
+// ============================================================================
+// Claude-Compatible Providers - Configuration for Claude-compatible API endpoints
+// ============================================================================
+
+/**
+ * ApiKeySource - Strategy for sourcing API keys
+ *
+ * - 'inline': API key stored directly in the profile (legacy/default behavior)
+ * - 'env': Use ANTHROPIC_API_KEY environment variable
+ * - 'credentials': Use the Anthropic key from Settings → API Keys (credentials.json)
+ */
+export type ApiKeySource = 'inline' | 'env' | 'credentials';
+
+/**
+ * ClaudeCompatibleProviderType - Type of Claude-compatible provider
+ *
+ * Used to determine provider-specific UI screens and default configurations.
+ */
+export type ClaudeCompatibleProviderType =
+  | 'anthropic' // Direct Anthropic API (built-in)
+  | 'glm' // z.AI GLM
+  | 'minimax' // MiniMax
+  | 'openrouter' // OpenRouter proxy
+  | 'custom'; // User-defined custom provider
+
+/**
+ * ClaudeModelAlias - The three main Claude model aliases for mapping
+ */
+export type ClaudeModelAlias = 'haiku' | 'sonnet' | 'opus';
+
+/**
+ * ProviderModel - A model exposed by a Claude-compatible provider
+ *
+ * Each provider configuration can expose multiple models that will appear
+ * in all model dropdowns throughout the app. Models map directly to a
+ * Claude model (haiku, sonnet, opus) for bulk replace and display.
+ */
+export interface ProviderModel {
+  /** Model ID sent to the API (e.g., "GLM-4.7", "MiniMax-M2.1") */
+  id: string;
+  /** Display name shown in UI (e.g., "GLM 4.7", "MiniMax M2.1") */
+  displayName: string;
+  /** Which Claude model this maps to (for bulk replace and display) */
+  mapsToClaudeModel?: ClaudeModelAlias;
+  /** Model capabilities */
+  capabilities?: {
+    /** Whether model supports vision/image inputs */
+    supportsVision?: boolean;
+    /** Whether model supports extended thinking */
+    supportsThinking?: boolean;
+    /** Maximum thinking level if thinking is supported */
+    maxThinkingLevel?: ThinkingLevel;
+  };
+}
+
+/**
+ * ClaudeCompatibleProvider - Configuration for a Claude-compatible API endpoint
+ *
+ * Providers expose their models to all model dropdowns in the app.
+ * Each provider has its own API configuration (endpoint, credentials, etc.)
+ */
+export interface ClaudeCompatibleProvider {
+  /** Unique identifier (uuid) */
+  id: string;
+  /** Display name (e.g., "z.AI GLM (Work)", "MiniMax") */
+  name: string;
+  /** Provider type determines UI screen and default settings */
+  providerType: ClaudeCompatibleProviderType;
+  /** Whether this provider is enabled (models appear in dropdowns) */
+  enabled?: boolean;
+
+  // Connection settings
+  /** ANTHROPIC_BASE_URL - custom API endpoint */
+  baseUrl: string;
+  /** API key sourcing strategy */
+  apiKeySource: ApiKeySource;
+  /** API key value (only required when apiKeySource = 'inline') */
+  apiKey?: string;
+  /** If true, use ANTHROPIC_AUTH_TOKEN instead of ANTHROPIC_API_KEY */
+  useAuthToken?: boolean;
+  /** API_TIMEOUT_MS override in milliseconds */
+  timeoutMs?: number;
+  /** Set CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1 */
+  disableNonessentialTraffic?: boolean;
+
+  /** Models exposed by this provider (appear in all dropdowns) */
+  models: ProviderModel[];
+
+  /** Provider-specific settings for future extensibility */
+  providerSettings?: Record<string, unknown>;
+}
+
+/**
+ * ClaudeApiProfile - Configuration for a Claude-compatible API endpoint
+ *
+ * @deprecated Use ClaudeCompatibleProvider instead. This type is kept for
+ * backward compatibility during migration.
+ */
+export interface ClaudeApiProfile {
+  /** Unique identifier (uuid) */
+  id: string;
+  /** Display name (e.g., "z.AI GLM", "AWS Bedrock") */
+  name: string;
+  /** ANTHROPIC_BASE_URL - custom API endpoint */
+  baseUrl: string;
+  /**
+   * API key sourcing strategy (default: 'inline' for backwards compatibility)
+   * - 'inline': Use apiKey field value
+   * - 'env': Use ANTHROPIC_API_KEY environment variable
+   * - 'credentials': Use the Anthropic key from credentials.json
+   */
+  apiKeySource?: ApiKeySource;
+  /** API key value (only required when apiKeySource = 'inline' or undefined) */
+  apiKey?: string;
+  /** If true, use ANTHROPIC_AUTH_TOKEN instead of ANTHROPIC_API_KEY */
+  useAuthToken?: boolean;
+  /** API_TIMEOUT_MS override in milliseconds */
+  timeoutMs?: number;
+  /** Optional model name mappings (deprecated - use ClaudeCompatibleProvider.models instead) */
+  modelMappings?: {
+    /** Maps to ANTHROPIC_DEFAULT_HAIKU_MODEL */
+    haiku?: string;
+    /** Maps to ANTHROPIC_DEFAULT_SONNET_MODEL */
+    sonnet?: string;
+    /** Maps to ANTHROPIC_DEFAULT_OPUS_MODEL */
+    opus?: string;
+  };
+  /** Set CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1 */
+  disableNonessentialTraffic?: boolean;
+}
+
+/**
+ * ClaudeCompatibleProviderTemplate - Template for quick provider setup
+ *
+ * Contains pre-configured settings for known Claude-compatible providers.
+ */
+export interface ClaudeCompatibleProviderTemplate {
+  /** Template identifier for matching */
+  templateId: ClaudeCompatibleProviderType;
+  /** Display name for the template */
+  name: string;
+  /** Provider type */
+  providerType: ClaudeCompatibleProviderType;
+  /** API base URL */
+  baseUrl: string;
+  /** Default API key source for this template */
+  defaultApiKeySource: ApiKeySource;
+  /** Use auth token instead of API key */
+  useAuthToken: boolean;
+  /** Timeout in milliseconds */
+  timeoutMs?: number;
+  /** Disable non-essential traffic */
+  disableNonessentialTraffic?: boolean;
+  /** Description shown in UI */
+  description: string;
+  /** URL to get API key */
+  apiKeyUrl?: string;
+  /** Default models for this provider */
+  defaultModels: ProviderModel[];
+}
+
+/** Predefined templates for known Claude-compatible providers */
+export const CLAUDE_PROVIDER_TEMPLATES: ClaudeCompatibleProviderTemplate[] = [
+  {
+    templateId: 'anthropic',
+    name: 'Direct Anthropic',
+    providerType: 'anthropic',
+    baseUrl: 'https://api.anthropic.com',
+    defaultApiKeySource: 'credentials',
+    useAuthToken: false,
+    description: 'Standard Anthropic API with your API key',
+    apiKeyUrl: 'https://console.anthropic.com/settings/keys',
+    defaultModels: [
+      { id: 'claude-haiku', displayName: 'Claude Haiku', mapsToClaudeModel: 'haiku' },
+      { id: 'claude-sonnet', displayName: 'Claude Sonnet', mapsToClaudeModel: 'sonnet' },
+      { id: 'claude-opus', displayName: 'Claude Opus', mapsToClaudeModel: 'opus' },
+    ],
+  },
+  {
+    templateId: 'openrouter',
+    name: 'OpenRouter',
+    providerType: 'openrouter',
+    baseUrl: 'https://openrouter.ai/api',
+    defaultApiKeySource: 'inline',
+    useAuthToken: true,
+    description: 'Access Claude and 300+ models via OpenRouter',
+    apiKeyUrl: 'https://openrouter.ai/keys',
+    defaultModels: [
+      // OpenRouter users manually add model IDs
+      {
+        id: 'anthropic/claude-3.5-haiku',
+        displayName: 'Claude 3.5 Haiku',
+        mapsToClaudeModel: 'haiku',
+      },
+      {
+        id: 'anthropic/claude-3.5-sonnet',
+        displayName: 'Claude 3.5 Sonnet',
+        mapsToClaudeModel: 'sonnet',
+      },
+      { id: 'anthropic/claude-3-opus', displayName: 'Claude 3 Opus', mapsToClaudeModel: 'opus' },
+    ],
+  },
+  {
+    templateId: 'glm',
+    name: 'z.AI GLM',
+    providerType: 'glm',
+    baseUrl: 'https://api.z.ai/api/anthropic',
+    defaultApiKeySource: 'inline',
+    useAuthToken: true,
+    timeoutMs: 3000000,
+    disableNonessentialTraffic: true,
+    description: '3× usage at fraction of cost via GLM Coding Plan',
+    apiKeyUrl: 'https://z.ai/manage-apikey/apikey-list',
+    defaultModels: [
+      { id: 'GLM-4.5-Air', displayName: 'GLM 4.5 Air', mapsToClaudeModel: 'haiku' },
+      { id: 'GLM-4.7', displayName: 'GLM 4.7', mapsToClaudeModel: 'sonnet' },
+      { id: 'GLM-5', displayName: 'GLM 5', mapsToClaudeModel: 'opus' },
+    ],
+  },
+  {
+    templateId: 'minimax',
+    name: 'MiniMax',
+    providerType: 'minimax',
+    baseUrl: 'https://api.minimax.io/anthropic',
+    defaultApiKeySource: 'inline',
+    useAuthToken: true,
+    timeoutMs: 3000000,
+    disableNonessentialTraffic: true,
+    description: 'MiniMax M2.1 coding model with extended context',
+    apiKeyUrl: 'https://platform.minimax.io/user-center/basic-information/interface-key',
+    defaultModels: [
+      { id: 'MiniMax-M2.1', displayName: 'MiniMax M2.1', mapsToClaudeModel: 'haiku' },
+      { id: 'MiniMax-M2.1', displayName: 'MiniMax M2.1', mapsToClaudeModel: 'sonnet' },
+      { id: 'MiniMax-M2.1', displayName: 'MiniMax M2.1', mapsToClaudeModel: 'opus' },
+    ],
+  },
+  {
+    templateId: 'minimax',
+    name: 'MiniMax (China)',
+    providerType: 'minimax',
+    baseUrl: 'https://api.minimaxi.com/anthropic',
+    defaultApiKeySource: 'inline',
+    useAuthToken: true,
+    timeoutMs: 3000000,
+    disableNonessentialTraffic: true,
+    description: 'MiniMax M2.1 for users in China',
+    apiKeyUrl: 'https://platform.minimaxi.com/user-center/basic-information/interface-key',
+    defaultModels: [
+      { id: 'MiniMax-M2.1', displayName: 'MiniMax M2.1', mapsToClaudeModel: 'haiku' },
+      { id: 'MiniMax-M2.1', displayName: 'MiniMax M2.1', mapsToClaudeModel: 'sonnet' },
+      { id: 'MiniMax-M2.1', displayName: 'MiniMax M2.1', mapsToClaudeModel: 'opus' },
+    ],
+  },
+];
+
+/**
+ * @deprecated Use ClaudeCompatibleProviderTemplate instead
+ */
+export interface ClaudeApiProfileTemplate {
+  name: string;
+  baseUrl: string;
+  defaultApiKeySource?: ApiKeySource;
+  useAuthToken: boolean;
+  timeoutMs?: number;
+  modelMappings?: ClaudeApiProfile['modelMappings'];
+  disableNonessentialTraffic?: boolean;
+  description: string;
+  apiKeyUrl?: string;
+}
+
+/**
+ * @deprecated Use CLAUDE_PROVIDER_TEMPLATES instead
+ */
+export const CLAUDE_API_PROFILE_TEMPLATES: ClaudeApiProfileTemplate[] = [
+  {
+    name: 'Direct Anthropic',
+    baseUrl: 'https://api.anthropic.com',
+    defaultApiKeySource: 'credentials',
+    useAuthToken: false,
+    description: 'Standard Anthropic API with your API key',
+    apiKeyUrl: 'https://console.anthropic.com/settings/keys',
+  },
+  {
+    name: 'OpenRouter',
+    baseUrl: 'https://openrouter.ai/api',
+    defaultApiKeySource: 'inline',
+    useAuthToken: true,
+    description: 'Access Claude and 300+ models via OpenRouter',
+    apiKeyUrl: 'https://openrouter.ai/keys',
+  },
+  {
+    name: 'z.AI GLM',
+    baseUrl: 'https://api.z.ai/api/anthropic',
+    defaultApiKeySource: 'inline',
+    useAuthToken: true,
+    timeoutMs: 3000000,
+    modelMappings: {
+      haiku: 'GLM-4.5-Air',
+      sonnet: 'GLM-4.7',
+      opus: 'GLM-5',
+    },
+    disableNonessentialTraffic: true,
+    description: '3× usage at fraction of cost via GLM Coding Plan',
+    apiKeyUrl: 'https://z.ai/manage-apikey/apikey-list',
+  },
+  {
+    name: 'MiniMax',
+    baseUrl: 'https://api.minimax.io/anthropic',
+    defaultApiKeySource: 'inline',
+    useAuthToken: true,
+    timeoutMs: 3000000,
+    modelMappings: {
+      haiku: 'MiniMax-M2.1',
+      sonnet: 'MiniMax-M2.1',
+      opus: 'MiniMax-M2.1',
+    },
+    disableNonessentialTraffic: true,
+    description: 'MiniMax M2.1 coding model with extended context',
+    apiKeyUrl: 'https://platform.minimax.io/user-center/basic-information/interface-key',
+  },
+  {
+    name: 'MiniMax (China)',
+    baseUrl: 'https://api.minimaxi.com/anthropic',
+    defaultApiKeySource: 'inline',
+    useAuthToken: true,
+    timeoutMs: 3000000,
+    modelMappings: {
+      haiku: 'MiniMax-M2.1',
+      sonnet: 'MiniMax-M2.1',
+      opus: 'MiniMax-M2.1',
+    },
+    disableNonessentialTraffic: true,
+    description: 'MiniMax M2.1 for users in China',
+    apiKeyUrl: 'https://platform.minimaxi.com/user-center/basic-information/interface-key',
+  },
+];
+
+// ============================================================================
+// Event Hooks - Custom actions triggered by system events
+// ============================================================================
+
+/**
+ * EventHookTrigger - Event types that can trigger custom hooks
+ *
+ * - feature_created: A new feature was created
+ * - feature_success: Feature completed successfully
+ * - feature_error: Feature failed with an error
+ * - auto_mode_complete: Auto mode finished processing all features
+ * - auto_mode_error: Auto mode encountered a critical error and paused
+ */
+export type EventHookTrigger =
+  | 'feature_created'
+  | 'feature_success'
+  | 'feature_error'
+  | 'auto_mode_complete'
+  | 'auto_mode_error';
+
+/** HTTP methods supported for webhook requests */
+export type EventHookHttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH';
+
+/**
+ * NtfyAuthenticationType - Authentication methods for ntfy.sh
+ *
+ * - 'none': No authentication (default for public topics)
+ * - 'basic': Username and password authentication
+ * - 'token': Access token authentication
+ */
+export type NtfyAuthenticationType = 'none' | 'basic' | 'token';
+
+/**
+ * NtfyEndpointConfig - Configuration for a ntfy.sh notification endpoint
+ *
+ * Stores reusable ntfy.sh server configuration that can be referenced
+ * by multiple event hooks. Supports custom servers (self-hosted),
+ * authentication, and notification customization.
+ */
+export interface NtfyEndpointConfig {
+  /** Unique identifier for this endpoint configuration */
+  id: string;
+  /** Display name (e.g., "Personal Phone", "Team Channel") */
+  name: string;
+  /** Server URL (default: https://ntfy.sh) */
+  serverUrl: string;
+  /** Topic name (required, no spaces) */
+  topic: string;
+  /** Authentication type */
+  authType: NtfyAuthenticationType;
+  /** Username for basic auth (required if authType === 'basic') */
+  username?: string;
+  /** Password for basic auth (required if authType === 'basic') */
+  password?: string;
+  /** Access token (required if authType === 'token') */
+  token?: string;
+  /** Default tags for notifications (comma-separated emoji codes) */
+  defaultTags?: string;
+  /** Default emoji for notifications (emoji or shortcode) */
+  defaultEmoji?: string;
+  /** Default click action URL (auto-populated with server URL) */
+  defaultClickUrl?: string;
+  /** Whether this endpoint is enabled */
+  enabled: boolean;
+}
+
+/**
+ * EventHookShellAction - Configuration for executing a shell command
+ *
+ * Shell commands are executed in the server's working directory.
+ * Supports variable substitution using {{variableName}} syntax.
+ */
+export interface EventHookShellAction {
+  type: 'shell';
+  /** Shell command to execute. Supports {{variable}} substitution. */
+  command: string;
+  /** Timeout in milliseconds (default: 30000) */
+  timeout?: number;
+}
+
+/**
+ * EventHookHttpAction - Configuration for making an HTTP webhook request
+ *
+ * Supports variable substitution in URL, headers, and body.
+ */
+export interface EventHookHttpAction {
+  type: 'http';
+  /** URL to send the request to. Supports {{variable}} substitution. */
+  url: string;
+  /** HTTP method to use */
+  method: EventHookHttpMethod;
+  /** Optional headers to include. Values support {{variable}} substitution. */
+  headers?: Record<string, string>;
+  /** Optional request body (JSON string). Supports {{variable}} substitution. */
+  body?: string;
+}
+
+/**
+ * EventHookNtfyAction - Configuration for sending ntfy.sh push notifications
+ *
+ * Uses a pre-configured ntfy.sh endpoint from the global settings.
+ * Supports variable substitution in title and body.
+ */
+export interface EventHookNtfyAction {
+  type: 'ntfy';
+  /** ID of the NtfyEndpointConfig to use */
+  endpointId: string;
+  /** Notification title (supports {{variable}} substitution, defaults to event name) */
+  title?: string;
+  /** Notification body/message (supports {{variable}} substitution) */
+  body?: string;
+  /** Tags for this specific notification (comma-separated, overrides endpoint default) */
+  tags?: string;
+  /** Emoji for this specific notification (overrides endpoint default) */
+  emoji?: string;
+  /** Click action URL (overrides endpoint default, supports {{variable}} substitution) */
+  clickUrl?: string;
+  /** Priority level (1=min, 3=default, 5=max/urgent) */
+  priority?: 1 | 2 | 3 | 4 | 5;
+}
+
+/** Union type for all hook action configurations */
+export type EventHookAction = EventHookShellAction | EventHookHttpAction | EventHookNtfyAction;
+
+/**
+ * EventHook - Configuration for a single event hook
+ *
+ * Event hooks allow users to execute custom shell commands or HTTP requests
+ * when specific events occur in the system.
+ *
+ * Available variables for substitution:
+ * - {{featureId}} - ID of the feature (if applicable)
+ * - {{featureName}} - Name of the feature (if applicable)
+ * - {{projectPath}} - Absolute path to the project
+ * - {{projectName}} - Name of the project
+ * - {{error}} - Error message (for error events)
+ * - {{timestamp}} - ISO timestamp of the event
+ * - {{eventType}} - The event type that triggered the hook
+ */
+export interface EventHook {
+  /** Unique identifier for this hook */
+  id: string;
+  /** Which event type triggers this hook */
+  trigger: EventHookTrigger;
+  /** Whether this hook is currently enabled */
+  enabled: boolean;
+  /** The action to execute when triggered */
+  action: EventHookAction;
+  /** Optional friendly name for display */
+  name?: string;
+}
+
+/** Human-readable labels for event hook triggers */
+export const EVENT_HOOK_TRIGGER_LABELS: Record<EventHookTrigger, string> = {
+  feature_created: 'Feature created',
+  feature_success: 'Feature completed successfully',
+  feature_error: 'Feature failed with error',
+  auto_mode_complete: 'Auto mode completed all features',
+  auto_mode_error: 'Auto mode paused due to error',
+};
+
+/**
+ * EventHookContext - Context variables available for substitution in event hooks
+ *
+ * These variables can be used in shell commands, HTTP bodies, and ntfy notifications
+ * using the {{variableName}} syntax.
+ */
+export interface EventHookContext {
+  /** ID of the feature (if applicable) */
+  featureId?: string;
+  /** Title/name of the feature (if applicable) */
+  featureName?: string;
+  /** Absolute path to the project */
+  projectPath?: string;
+  /** Name of the project (derived from path) */
+  projectName?: string;
+  /** Error message (only for error events) */
+  error?: string;
+  /** Error type/classification (only for error events) */
+  errorType?: string;
+  /** ISO timestamp when the event occurred */
+  timestamp: string;
+  /** The event type that triggered the hook */
+  eventType: EventHookTrigger;
+}
+
+const DEFAULT_CODEX_AUTO_LOAD_AGENTS = false;
+const DEFAULT_CODEX_SANDBOX_MODE: CodexSandboxMode = 'workspace-write';
+const DEFAULT_CODEX_APPROVAL_POLICY: CodexApprovalPolicy = 'on-request';
+const DEFAULT_CODEX_ENABLE_WEB_SEARCH = false;
+const DEFAULT_CODEX_ENABLE_IMAGES = true;
+const DEFAULT_CODEX_ADDITIONAL_DIRS: string[] = [];
+
+/**
+ * PhaseModelEntry - Configuration for a single phase model
+ *
+ * Encapsulates the model selection and optional reasoning/thinking capabilities:
+ * - Claude models: Use thinkingLevel for extended thinking
+ * - Codex models: Use reasoningEffort for reasoning intensity
+ * - Cursor models: Handle thinking internally
+ *
+ * For Claude-compatible provider models (GLM, MiniMax, OpenRouter, etc.),
+ * the providerId field specifies which provider configuration to use.
+ */
+export interface PhaseModelEntry {
+  /**
+   * Provider ID for Claude-compatible provider models.
+   * - undefined: Use native Anthropic API (no custom provider)
+   * - string: Use the specified ClaudeCompatibleProvider by ID
+   *
+   * Only required when using models from a ClaudeCompatibleProvider.
+   * Native Claude models (claude-haiku, claude-sonnet, claude-opus) and
+   * other providers (Cursor, Codex, OpenCode) don't need this field.
+   */
+  providerId?: string;
+  /** The model to use (supports Claude, Cursor, Codex, OpenCode, and dynamic provider IDs) */
+  model: ModelId;
+  /** Extended thinking level (only applies to Claude models, defaults to 'none') */
+  thinkingLevel?: ThinkingLevel;
+  /** Reasoning effort level (only applies to Codex models, defaults to 'none') */
+  reasoningEffort?: ReasoningEffort;
+}
+
+/**
+ * PhaseModelConfig - Configuration for AI models used in different application phases
+ *
+ * Allows users to choose which model (Claude or Cursor) to use for each distinct
+ * operation in the application. This provides fine-grained control over cost,
+ * speed, and quality tradeoffs.
+ */
+export interface PhaseModelConfig {
+  // Quick tasks - recommend fast/cheap models (Haiku, Cursor auto)
+  /** Model for enhancing feature names and descriptions */
+  enhancementModel: PhaseModelEntry;
+  /** Model for generating file context descriptions */
+  fileDescriptionModel: PhaseModelEntry;
+  /** Model for analyzing and describing context images */
+  imageDescriptionModel: PhaseModelEntry;
+
+  // Validation tasks - recommend smart models (Sonnet, Opus)
+  /** Model for validating and improving GitHub issues */
+  validationModel: PhaseModelEntry;
+
+  // Generation tasks - recommend powerful models (Opus, Sonnet)
+  /** Model for generating full application specifications */
+  specGenerationModel: PhaseModelEntry;
+  /** Model for creating features from specifications */
+  featureGenerationModel: PhaseModelEntry;
+  /** Model for reorganizing and prioritizing backlog */
+  backlogPlanningModel: PhaseModelEntry;
+  /** Model for analyzing project structure */
+  projectAnalysisModel: PhaseModelEntry;
+  /** Model for ideation view (generating AI suggestions for features, security, performance) */
+  ideationModel: PhaseModelEntry;
+
+  // Memory tasks - for learning extraction and memory operations
+  /** Model for extracting learnings from completed agent sessions */
+  memoryExtractionModel: PhaseModelEntry;
+
+  // Quick tasks - commit messages
+  /** Model for generating git commit messages from diffs */
+  commitMessageModel: PhaseModelEntry;
+  /** Model for generating pull request descriptions from branch diffs */
+  prDescriptionModel: PhaseModelEntry;
+}
+
+/** Keys of PhaseModelConfig for type-safe access */
+export type PhaseModelKey = keyof PhaseModelConfig;
+
+/**
+ * WindowBounds - Electron window position and size for persistence
+ *
+ * Stored in global settings to restore window state across sessions.
+ * Includes position (x, y), dimensions (width, height), and maximized state.
+ */
+export interface WindowBounds {
+  /** Window X position on screen */
+  x: number;
+  /** Window Y position on screen */
+  y: number;
+  /** Window width in pixels */
+  width: number;
+  /** Window height in pixels */
+  height: number;
+  /** Whether window was maximized when closed */
+  isMaximized: boolean;
+}
+
+/**
+ * KeyboardShortcuts - User-configurable keyboard bindings for common actions
+ *
+ * Each property maps an action to a keyboard shortcut string
+ * (e.g., "Ctrl+K", "Alt+N", "Shift+P")
+ */
+export interface KeyboardShortcuts {
+  /** Open board view */
+  board: string;
+  /** Open agent panel */
+  agent: string;
+  /** Open feature spec editor */
+  spec: string;
+  /** Open context files panel */
+  context: string;
+  /** Open settings */
+  settings: string;
+  /** Open project settings */
+  projectSettings: string;
+  /** Open terminal */
+  terminal: string;
+  /** Open notifications */
+  notifications: string;
+  /** Toggle sidebar visibility */
+  toggleSidebar: string;
+  /** Add new feature */
+  addFeature: string;
+  /** Add context file */
+  addContextFile: string;
+  /** Start next feature generation */
+  startNext: string;
+  /** Create new chat session */
+  newSession: string;
+  /** Open project picker */
+  openProject: string;
+  /** Open project picker (alternate) */
+  projectPicker: string;
+  /** Cycle to previous project */
+  cyclePrevProject: string;
+  /** Cycle to next project */
+  cycleNextProject: string;
+  /** Split terminal right */
+  splitTerminalRight: string;
+  /** Split terminal down */
+  splitTerminalDown: string;
+  /** Close current terminal */
+  closeTerminal: string;
+}
+
+/**
+ * MCPToolInfo - Information about a tool provided by an MCP server
+ *
+ * Contains the tool's name, description, and whether it's enabled for use.
+ */
+export interface MCPToolInfo {
+  /** Tool name as exposed by the MCP server */
+  name: string;
+  /** Description of what the tool does */
+  description?: string;
+  /** JSON Schema for the tool's input parameters */
+  inputSchema?: Record<string, unknown>;
+  /** Whether this tool is enabled for use (defaults to true) */
+  enabled: boolean;
+}
+
+/**
+ * MCPServerConfig - Configuration for an MCP (Model Context Protocol) server
+ *
+ * MCP servers provide additional tools and capabilities to AI agents.
+ * Supports stdio (subprocess), SSE, and HTTP transport types.
+ */
+export interface MCPServerConfig {
+  /** Unique identifier for the server config */
+  id: string;
+  /** Display name for the server */
+  name: string;
+  /** User-friendly description of what this server provides */
+  description?: string;
+  /** Transport type: stdio (default), sse, or http */
+  type?: 'stdio' | 'sse' | 'http';
+  /** For stdio: command to execute (e.g., 'node', 'python', 'npx') */
+  command?: string;
+  /** For stdio: arguments to pass to the command */
+  args?: string[];
+  /** For stdio: environment variables to set */
+  env?: Record<string, string>;
+  /** For sse/http: URL endpoint */
+  url?: string;
+  /** For sse/http: headers to include in requests */
+  headers?: Record<string, string>;
+  /** Whether this server is enabled */
+  enabled?: boolean;
+  /** Tools discovered from this server with their enabled states */
+  tools?: MCPToolInfo[];
+  /** Timestamp when tools were last fetched */
+  toolsLastFetched?: string;
+}
+
+/**
+ * ProjectRef - Minimal reference to a project stored in global settings
+ *
+ * Used for the projects list and project history. Full project data is loaded separately.
+ */
+export interface ProjectRef {
+  /** Unique identifier */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Absolute filesystem path to project directory */
+  path: string;
+  /** ISO timestamp of last time project was opened */
+  lastOpened?: string;
+  /** Project-specific theme override (or undefined to use global) */
+  theme?: string;
+  /** Project-specific UI/sans font override (or undefined to use global) */
+  fontFamilySans?: string;
+  /** Project-specific code/mono font override (or undefined to use global) */
+  fontFamilyMono?: string;
+  /** Whether project is pinned to favorites on dashboard */
+  isFavorite?: boolean;
+  /** Lucide icon name for project identification */
+  icon?: string;
+  /** Custom icon image path for project switcher */
+  customIconPath?: string;
+}
+
+/**
+ * TrashedProjectRef - Reference to a project in the trash/recycle bin
+ *
+ * Extends ProjectRef with deletion metadata. User can permanently delete or restore.
+ */
+export interface TrashedProjectRef extends ProjectRef {
+  /** ISO timestamp when project was moved to trash */
+  trashedAt: string;
+  /** Whether project folder was deleted from disk */
+  deletedFromDisk?: boolean;
+}
+
+/**
+ * ChatSessionRef - Minimal reference to a chat session
+ *
+ * Used for session lists and history. Full session content is stored separately.
+ */
+export interface ChatSessionRef {
+  /** Unique session identifier */
+  id: string;
+  /** User-given or AI-generated title */
+  title: string;
+  /** Project that session belongs to */
+  projectId: string;
+  /** ISO timestamp of creation */
+  createdAt: string;
+  /** ISO timestamp of last message */
+  updatedAt: string;
+  /** Whether session is archived */
+  archived: boolean;
+}
+
+/**
+ * GlobalSettings - User preferences and state stored globally in {DATA_DIR}/settings.json
+ *
+ * This is the main settings file that persists user preferences across sessions.
+ * Includes theme, UI state, feature defaults, keyboard shortcuts, and projects.
+ * Format: JSON with version field for migration support.
+ */
+export interface GlobalSettings {
+  /** Version number for schema migration */
+  version: number;
+
+  // Migration Tracking
+  /** Whether localStorage settings have been migrated to API storage (prevents re-migration) */
+  localStorageMigrated?: boolean;
+
+  // Onboarding / Setup Wizard
+  /** Whether the initial setup wizard has been completed */
+  setupComplete: boolean;
+  /** Whether this is the first run experience (used by UI onboarding) */
+  isFirstRun: boolean;
+  /** Whether Claude setup was skipped during onboarding */
+  skipClaudeSetup: boolean;
+
+  // Theme Configuration
+  /** Currently selected theme */
+  theme: ThemeMode;
+
+  // Font Configuration
+  /** Global UI/Sans font family (undefined = use default Geist Sans) */
+  fontFamilySans?: string;
+  /** Global Code/Mono font family (undefined = use default Geist Mono) */
+  fontFamilyMono?: string;
+  /** Terminal font family (undefined = use default Menlo/Monaco) */
+  terminalFontFamily?: string;
+
+  // File Editor Configuration
+  /** File editor font size in pixels (default: 13) */
+  editorFontSize?: number;
+  /** File editor font family CSS value (default: 'default' = use theme mono font) */
+  editorFontFamily?: string;
+  /** Enable auto-save for file editor (default: false) */
+  editorAutoSave?: boolean;
+  /** Auto-save delay in milliseconds (default: 1000) */
+  editorAutoSaveDelay?: number;
+
+  // Terminal Configuration
+  /** How to open terminals from "Open in Terminal" worktree action */
+  openTerminalMode?: 'newTab' | 'split';
+  /** Custom terminal configuration settings (prompt theming, aliases, env vars) */
+  terminalConfig?: {
+    /** Enable custom terminal configurations (default: false) */
+    enabled: boolean;
+    /** Enable custom prompt (default: true when enabled) */
+    customPrompt: boolean;
+    /** Prompt format template */
+    promptFormat: 'standard' | 'minimal' | 'powerline' | 'starship';
+    /** Prompt theme preset */
+    promptTheme?: TerminalPromptTheme;
+    /** Show git branch in prompt (default: true) */
+    showGitBranch: boolean;
+    /** Show git status dirty indicator (default: true) */
+    showGitStatus: boolean;
+    /** Show user and host in prompt (default: true) */
+    showUserHost: boolean;
+    /** Show path in prompt (default: true) */
+    showPath: boolean;
+    /** Path display style */
+    pathStyle: 'full' | 'short' | 'basename';
+    /** Limit path depth (0 = full path) */
+    pathDepth: number;
+    /** Show current time in prompt (default: false) */
+    showTime: boolean;
+    /** Show last command exit status when non-zero (default: false) */
+    showExitStatus: boolean;
+    /** User-provided custom aliases (multiline string) */
+    customAliases: string;
+    /** User-provided custom env vars */
+    customEnvVars: Record<string, string>;
+    /** RC file format version (for migration) */
+    rcFileVersion?: number;
+  };
+
+  // UI State Preferences
+  /** Whether sidebar is currently open */
+  sidebarOpen: boolean;
+  /** Sidebar layout style ('unified' = modern single sidebar, 'discord' = classic two-sidebar layout) */
+  sidebarStyle: SidebarStyle;
+  /** Collapsed state of sidebar navigation sections (key: section label, value: is collapsed) */
+  collapsedNavSections?: Record<string, boolean>;
+  /** Whether chat history panel is open */
+  chatHistoryOpen: boolean;
+
+  // Feature Generation Defaults
+  /** Max features to generate concurrently */
+  maxConcurrency: number;
+  /** Default: skip tests during feature generation */
+  defaultSkipTests: boolean;
+  /** Default: enable dependency blocking */
+  enableDependencyBlocking: boolean;
+  /** Skip verification requirement in auto-mode (treat 'completed' same as 'verified') */
+  skipVerificationInAutoMode: boolean;
+  /** User's preferred action after a clean merge (null = ask every time) */
+  mergePostAction: 'commit' | 'manual' | null;
+  /** Default: use git worktrees for feature branches */
+  useWorktrees: boolean;
+  /** Default: planning approach (skip/lite/spec/full) */
+  defaultPlanningMode: PlanningMode;
+  /** Default: require manual approval before generating */
+  defaultRequirePlanApproval: boolean;
+  /** Default model and thinking level for new feature cards */
+  defaultFeatureModel: PhaseModelEntry;
+
+  // Audio Preferences
+  /** Mute completion notification sound */
+  muteDoneSound: boolean;
+
+  // Splash Screen
+  /** Disable the splash screen overlay on app startup */
+  disableSplashScreen: boolean;
+
+  // Board Card Sorting
+  /** Default: sort latest card on top in board columns and list view. Per-project setting overrides this. Default: false */
+  defaultSortNewestCardOnTop?: boolean;
+
+  // Server Logging Preferences
+  /** Log level for the API server (error, warn, info, debug). Default: info */
+  serverLogLevel?: ServerLogLevel;
+  /** Enable HTTP request logging (Morgan). Default: true */
+  enableRequestLogging?: boolean;
+
+  // Developer Tools
+  /** Show React Query DevTools panel (only in development mode). Default: true */
+  showQueryDevtools?: boolean;
+
+  // AI Commit Message Generation
+  /** Enable AI-generated commit messages when opening commit dialog (default: true) */
+  enableAiCommitMessages: boolean;
+
+  // AI Model Selection (per-phase configuration)
+  /** Phase-specific AI model configuration */
+  phaseModels: PhaseModelConfig;
+
+  /** Default thinking level applied when selecting a model via the primary button
+   * in the two-stage model selector. Users can still adjust per-model via the expand arrow.
+   * Defaults to 'none' (no extended thinking). */
+  defaultThinkingLevel?: ThinkingLevel;
+
+  /** Default reasoning effort applied when selecting a Codex model via the primary button
+   * in the two-stage model selector. Defaults to 'none'. */
+  defaultReasoningEffort?: ReasoningEffort;
+
+  /** Default maximum number of agent turns (tool call round-trips) for feature execution.
+   * Controls how many iterations the AI agent can perform before stopping.
+   * Higher values allow more complex tasks but use more API credits.
+   * Defaults to 10000. Range: 1-10000.
+   *
+   * Note: Currently supported by Claude (via SDK) and Codex (via CLI config).
+   * Gemini and OpenCode CLI providers do not support max turns configuration. */
+  defaultMaxTurns?: number;
+
+  // Legacy AI Model Selection (deprecated - use phaseModels instead)
+  /** @deprecated Use phaseModels.enhancementModel instead */
+  enhancementModel: ModelAlias;
+  /** @deprecated Use phaseModels.validationModel instead */
+  validationModel: ModelAlias;
+
+  // Cursor CLI Settings (global)
+  /** Which Cursor models are available in feature modal (empty = all) */
+  enabledCursorModels: CursorModelId[];
+  /** Default Cursor model selection when switching to Cursor CLI */
+  cursorDefaultModel: CursorModelId;
+
+  // OpenCode CLI Settings (global)
+  /** Which OpenCode models are available in feature modal (empty = all) */
+  enabledOpencodeModels?: OpencodeModelId[];
+  /** Default OpenCode model selection when switching to OpenCode CLI */
+  opencodeDefaultModel?: OpencodeModelId;
+  /** Which dynamic OpenCode models are enabled (empty = all discovered) */
+  enabledDynamicModelIds?: string[];
+  /** All dynamic model IDs ever seen - used to distinguish new models from explicitly deselected ones */
+  knownDynamicModelIds?: string[];
+
+  // Gemini CLI Settings (global)
+  /** Which Gemini models are available in feature modal (empty = all) */
+  enabledGeminiModels?: GeminiModelId[];
+  /** Default Gemini model selection when switching to Gemini CLI */
+  geminiDefaultModel?: GeminiModelId;
+
+  // Copilot CLI Settings (global)
+  /** Which Copilot models are available in feature modal (empty = all) */
+  enabledCopilotModels?: CopilotModelId[];
+  /** Default Copilot model selection when switching to Copilot CLI */
+  copilotDefaultModel?: CopilotModelId;
+
+  // Provider Visibility Settings
+  /** Providers that are disabled and should not appear in model dropdowns */
+  disabledProviders?: ModelProvider[];
+
+  // Input Configuration
+  /** User's keyboard shortcut bindings */
+  keyboardShortcuts: KeyboardShortcuts;
+
+  // Project Management
+  /** List of active projects */
+  projects: ProjectRef[];
+  /** Projects in trash/recycle bin */
+  trashedProjects: TrashedProjectRef[];
+  /** ID of the currently open project (null if none) */
+  currentProjectId: string | null;
+  /** History of recently opened project IDs */
+  projectHistory: string[];
+  /** Current position in project history for navigation */
+  projectHistoryIndex: number;
+
+  // File Browser and UI Preferences
+  /** Last directory opened in file picker */
+  lastProjectDir?: string;
+  /** Recently accessed folders for quick access */
+  recentFolders: string[];
+  /** Whether worktree panel is collapsed in current view */
+  worktreePanelCollapsed: boolean;
+
+  // Session Tracking
+  /** Maps project path -> last selected session ID in that project */
+  lastSelectedSessionByProject: Record<string, string>;
+  /** Maps session ID -> persisted model selection for that session */
+  agentModelBySession?: Record<string, PhaseModelEntry>;
+
+  // Worktree Selection Tracking
+  /** Maps project path -> last selected worktree (path + branch) for restoring on PWA reload */
+  currentWorktreeByProject?: Record<string, { path: string | null; branch: string }>;
+
+  // Window State (Electron only)
+  /** Persisted window bounds for restoring position/size across sessions */
+  windowBounds?: WindowBounds;
+
+  // Claude Agent SDK Settings
+  /** Auto-load CLAUDE.md files using SDK's settingSources option */
+  autoLoadClaudeMd?: boolean;
+  /** Use Claude Code's built-in system prompt (claude_code preset) as the base prompt */
+  useClaudeCodeSystemPrompt?: boolean;
+  /** Skip the sandbox environment warning dialog on startup */
+  skipSandboxWarning?: boolean;
+
+  // Codex CLI Settings
+  /** Auto-load .codex/AGENTS.md instructions into Codex prompts */
+  codexAutoLoadAgents?: boolean;
+  /** Sandbox mode for Codex CLI command execution */
+  codexSandboxMode?: CodexSandboxMode;
+  /** Approval policy for Codex CLI tool execution */
+  codexApprovalPolicy?: CodexApprovalPolicy;
+  /** Enable web search capability for Codex CLI (--search flag) */
+  codexEnableWebSearch?: boolean;
+  /** Enable image attachment support for Codex CLI (-i flag) */
+  codexEnableImages?: boolean;
+  /** Additional directories with write access (--add-dir flags) */
+  codexAdditionalDirs?: string[];
+  /** Last thread ID for session resumption */
+  codexThreadId?: string;
+
+  // MCP Server Configuration
+  /** List of configured MCP servers for agent use */
+  mcpServers: MCPServerConfig[];
+
+  // Editor Configuration
+  /** Default editor command for "Open In" action (null = auto-detect: Cursor > VS Code > first available) */
+  defaultEditorCommand: string | null;
+
+  // Terminal Configuration
+  /** Default external terminal ID for "Open In Terminal" action (null = integrated terminal) */
+  defaultTerminalId: string | null;
+
+  // Prompt Customization
+  /** Custom prompts for Auto Mode, Agent Runner, Backlog Planning, and Enhancements */
+  promptCustomization?: PromptCustomization;
+
+  // Skills Configuration
+  /**
+   * Enable Skills functionality (loads from .claude/skills/ directories)
+   * @default true
+   */
+  enableSkills?: boolean;
+
+  /**
+   * Which directories to load Skills from
+   * - 'user': ~/.claude/skills/ (personal skills)
+   * - 'project': .claude/skills/ (project-specific skills)
+   * @default ['user', 'project']
+   */
+  skillsSources?: Array<'user' | 'project'>;
+
+  // Subagents Configuration
+  /**
+   * Enable Custom Subagents functionality (loads from .claude/agents/ directories)
+   * @default true
+   */
+  enableSubagents?: boolean;
+
+  /**
+   * Which directories to load Subagents from
+   * - 'user': ~/.claude/agents/ (personal agents)
+   * - 'project': .claude/agents/ (project-specific agents)
+   * @default ['user', 'project']
+   */
+  subagentsSources?: Array<'user' | 'project'>;
+
+  /**
+   * Custom subagent definitions for specialized task delegation (programmatic)
+   * Key: agent name (e.g., 'code-reviewer', 'test-runner')
+   * Value: agent configuration
+   */
+  customSubagents?: Record<string, import('./provider.js').AgentDefinition>;
+
+  // Event Hooks Configuration
+  /**
+   * Event hooks for executing custom commands or HTTP requests on events
+   * @see EventHook for configuration details
+   */
+  eventHooks?: EventHook[];
+
+  // Ntfy.sh Notification Endpoints
+  /**
+   * Configured ntfy.sh notification endpoints for push notifications.
+   * These endpoints can be referenced by event hooks to send notifications.
+   * @see NtfyEndpointConfig for configuration details
+   */
+  ntfyEndpoints?: NtfyEndpointConfig[];
+
+  // Feature Templates Configuration
+  /**
+   * Feature templates for quick task creation from the Add Feature dropdown
+   * Built-in templates are protected from deletion but can be disabled
+   */
+  featureTemplates?: FeatureTemplate[];
+
+  // Claude-Compatible Providers Configuration
+  /**
+   * Claude-compatible provider configurations.
+   * Each provider exposes its models to all model dropdowns in the app.
+   * Models can be mixed across providers (e.g., use GLM for enhancements, Anthropic for generation).
+   */
+  claudeCompatibleProviders?: ClaudeCompatibleProvider[];
+
+  // Deprecated Claude API Profiles (kept for migration)
+  /**
+   * @deprecated Use claudeCompatibleProviders instead.
+   * Kept for backward compatibility during migration.
+   */
+  claudeApiProfiles?: ClaudeApiProfile[];
+
+  /**
+   * @deprecated No longer used. Models are selected per-phase via phaseModels.
+   * Each PhaseModelEntry can specify a providerId for provider-specific models.
+   */
+  activeClaudeApiProfileId?: string | null;
+
+  /**
+   * Per-worktree auto mode settings
+   * Key: "${projectId}::${branchName ?? '__main__'}"
+   */
+  autoModeByWorktree?: Record<
+    string,
+    {
+      maxConcurrency: number;
+      branchName: string | null;
+    }
+  >;
+}
+
+/**
+ * Credentials - API keys stored in {DATA_DIR}/credentials.json
+ *
+ * Sensitive data stored separately from general settings.
+ * Keys should never be exposed in UI or logs.
+ */
+export interface Credentials {
+  /** Version number for schema migration */
+  version: number;
+  /** API keys for various providers */
+  apiKeys: {
+    /** Anthropic Claude API key */
+    anthropic: string;
+    /** Google API key (for embeddings or other services) */
+    google: string;
+    /** OpenAI API key (for compatibility or alternative providers) */
+    openai: string;
+    /** z.ai API key (for GLM models and usage tracking) */
+    zai: string;
+  };
+}
+
+/**
+ * BoardBackgroundSettings - Kanban board appearance customization
+ *
+ * Controls background images, opacity, borders, and visual effects for the board.
+ */
+export interface BoardBackgroundSettings {
+  /** Path to background image file (null = no image) */
+  imagePath: string | null;
+  /** Version/timestamp of image for cache busting */
+  imageVersion?: number;
+  /** Opacity of cards (0-1) */
+  cardOpacity: number;
+  /** Opacity of columns (0-1) */
+  columnOpacity: number;
+  /** Show border around columns */
+  columnBorderEnabled: boolean;
+  /** Apply glassmorphism effect to cards */
+  cardGlassmorphism: boolean;
+  /** Show border around cards */
+  cardBorderEnabled: boolean;
+  /** Opacity of card borders (0-1) */
+  cardBorderOpacity: number;
+  /** Hide scrollbar in board view */
+  hideScrollbar: boolean;
+}
+
+/**
+ * WorktreeInfo - Information about a git worktree
+ *
+ * Tracks worktree location, branch, and dirty state for project management.
+ */
+export interface WorktreeInfo {
+  /** Absolute path to worktree directory */
+  path: string;
+  /** Branch checked out in this worktree */
+  branch: string;
+  /** Whether this is the main worktree */
+  isMain: boolean;
+  /** Whether worktree has uncommitted changes */
+  hasChanges?: boolean;
+  /** Number of files with changes */
+  changedFilesCount?: number;
+}
+
+/**
+ * ProjectSettings - Project-specific overrides stored in {projectPath}/.automaker/settings.json
+ *
+ * Allows per-project customization without affecting global settings.
+ * All fields are optional - missing values fall back to global settings.
+ */
+export interface ProjectSettings {
+  /** Version number for schema migration */
+  version: number;
+
+  // Theme Configuration (project-specific override)
+  /** Project theme (undefined = use global setting) */
+  theme?: ThemeMode;
+
+  // Font Configuration (project-specific override)
+  /** UI/Sans font family override (undefined = use default Geist Sans) */
+  fontFamilySans?: string;
+  /** Code/Mono font family override (undefined = use default Geist Mono) */
+  fontFamilyMono?: string;
+
+  // Worktree Management
+  /** Project-specific worktree preference override */
+  useWorktrees?: boolean;
+  /** Current worktree being used in this project */
+  currentWorktree?: { path: string | null; branch: string };
+  /** List of worktrees available in this project */
+  worktrees?: WorktreeInfo[];
+
+  // Board Customization
+  /** Project-specific board background settings */
+  boardBackground?: BoardBackgroundSettings;
+
+  // Project Branding
+  /** Custom icon image path for project switcher (relative to .automaker/) */
+  customIconPath?: string;
+
+  // UI Visibility
+  /** Whether the worktree panel row is visible (default: true) */
+  worktreePanelVisible?: boolean;
+  /** Whether to show the init script indicator panel (default: true) */
+  showInitScriptIndicator?: boolean;
+
+  // Worktree Behavior
+  /** Default value for "delete branch" checkbox when deleting a worktree (default: false) */
+  defaultDeleteBranchWithWorktree?: boolean;
+  /** Auto-dismiss init script indicator after completion (default: true) */
+  autoDismissInitScriptIndicator?: boolean;
+  /**
+   * List of file/directory paths (relative to project root) to copy into new worktrees.
+   * Useful for files not tracked by git, like .env, local config files, etc.
+   * Each entry is a relative path from the project root (e.g., ".env", ".env.local", "config/local.json").
+   */
+  worktreeCopyFiles?: string[];
+
+  // Worktree Display Settings
+  /**
+   * Number of non-main worktrees to pin as tabs in the UI.
+   * The main worktree is always shown separately. Default: 0.
+   */
+  pinnedWorktreesCount?: number;
+  /**
+   * Minimum number of worktrees before the list collapses into a compact dropdown selector.
+   * Must be >= pinnedWorktreesCount to avoid conflicting configurations. Default: 3.
+   */
+  worktreeDropdownThreshold?: number;
+  /**
+   * When true, always show worktrees in a combined dropdown regardless of count.
+   * Overrides the dropdown threshold. Default: true.
+   */
+  alwaysUseWorktreeDropdown?: boolean;
+
+  // Session Tracking
+  /** Last chat session selected in this project */
+  lastSelectedSessionId?: string;
+
+  // Claude Agent SDK Settings
+  /** Auto-load CLAUDE.md files using SDK's settingSources option (project override) */
+  autoLoadClaudeMd?: boolean;
+  /** Use Claude Code's built-in system prompt (claude_code preset) as the base prompt (project override) */
+  useClaudeCodeSystemPrompt?: boolean;
+
+  // Subagents Configuration
+  /**
+   * Project-specific custom subagent definitions for specialized task delegation
+   * Merged with global customSubagents, project-level takes precedence
+   * Key: agent name (e.g., 'code-reviewer', 'test-runner')
+   * Value: agent configuration
+   */
+  customSubagents?: Record<string, import('./provider.js').AgentDefinition>;
+
+  // Auto Mode Configuration (per-project)
+  /** Whether auto mode is enabled for this project (backend-controlled loop) */
+  automodeEnabled?: boolean;
+  /** Maximum concurrent agents for this project (overrides global maxConcurrency) */
+  maxConcurrentAgents?: number;
+
+  // Test Runner Configuration
+  /**
+   * Custom command to run tests for this project.
+   * If not specified, auto-detection will be used based on project structure.
+   * Examples: "npm test", "yarn test", "pnpm test", "pytest", "go test ./..."
+   */
+  testCommand?: string;
+
+  // Dev Server Configuration
+  /**
+   * Custom command to start the development server for this project.
+   * If not specified, auto-detection will be used based on project structure.
+   * Examples: "npm run dev", "yarn dev", "pnpm dev", "cargo watch", "go run ."
+   */
+  devCommand?: string;
+
+  // Phase Model Overrides (per-project)
+  /**
+   * Override phase model settings for this project.
+   * Any phase not specified here falls back to global phaseModels setting.
+   * Allows per-project customization of which models are used for each task.
+   */
+  phaseModelOverrides?: Partial<PhaseModelConfig>;
+
+  // Feature Defaults Override (per-project)
+  /**
+   * Override the default model for new feature cards in this project.
+   * If not specified, falls back to the global defaultFeatureModel setting.
+   */
+  defaultFeatureModel?: PhaseModelEntry;
+
+  // Terminal Quick Scripts (per-project)
+  /**
+   * Quick-access terminal scripts shown in the terminal header dropdown.
+   * Each script is a command that can be run with one click.
+   * Examples: "npm run dev", "npm run test", "npm run lint", "npm run format"
+   */
+  terminalScripts?: Array<{
+    /** Unique identifier for this script */
+    id: string;
+    /** Display name shown in the dropdown menu */
+    name: string;
+    /** The command to execute in the terminal */
+    command: string;
+  }>;
+
+  // Terminal Configuration Override (per-project)
+  /** Project-specific terminal config overrides */
+  terminalConfig?: {
+    /** Override global enabled setting */
+    enabled?: boolean;
+    /** Override prompt theme preset */
+    promptTheme?: TerminalPromptTheme;
+    /** Override showing user/host */
+    showUserHost?: boolean;
+    /** Override showing path */
+    showPath?: boolean;
+    /** Override path style */
+    pathStyle?: 'full' | 'short' | 'basename';
+    /** Override path depth (0 = full path) */
+    pathDepth?: number;
+    /** Override showing time */
+    showTime?: boolean;
+    /** Override showing exit status */
+    showExitStatus?: boolean;
+    /** Project-specific custom aliases */
+    customAliases?: string;
+    /** Project-specific env vars */
+    customEnvVars?: Record<string, string>;
+    /** Custom welcome message for this project */
+    welcomeMessage?: string;
+  };
+
+  // Deprecated Claude API Profile Override
+  /**
+   * @deprecated Use phaseModelOverrides instead.
+   * Models are now selected per-phase via phaseModels/phaseModelOverrides.
+   * Each PhaseModelEntry can specify a providerId for provider-specific models.
+   */
+  activeClaudeApiProfileId?: string | null;
+}
+
+/**
+ * Default values and constants
+ */
+
+/** Default phase model configuration - sensible defaults for each task type
+ * Uses canonical prefixed model IDs for consistent routing.
+ */
+export const DEFAULT_PHASE_MODELS: PhaseModelConfig = {
+  // Quick tasks - use fast models for speed and cost
+  enhancementModel: { model: 'claude-sonnet' },
+  fileDescriptionModel: { model: 'claude-haiku' },
+  imageDescriptionModel: { model: 'claude-haiku' },
+
+  // Validation - use smart models for accuracy
+  validationModel: { model: 'claude-sonnet' },
+
+  // Generation - use powerful models for quality
+  specGenerationModel: { model: 'claude-opus', thinkingLevel: 'adaptive' },
+  featureGenerationModel: { model: 'claude-sonnet' },
+  backlogPlanningModel: { model: 'claude-sonnet' },
+  projectAnalysisModel: { model: 'claude-sonnet' },
+  ideationModel: { model: 'claude-sonnet' },
+
+  // Memory - use fast model for learning extraction (cost-effective)
+  memoryExtractionModel: { model: 'claude-haiku' },
+
+  // Commit messages - use fast model for speed
+  commitMessageModel: { model: 'claude-haiku' },
+  // PR descriptions - use balanced model for better quality descriptions
+  prDescriptionModel: { model: 'claude-sonnet' },
+};
+
+/** Current version of the global settings schema */
+export const SETTINGS_VERSION = 6;
+/** Current version of the credentials schema */
+export const CREDENTIALS_VERSION = 1;
+/** Current version of the project settings schema (bumped for terminalScripts field) */
+export const PROJECT_SETTINGS_VERSION = 2;
+
+/** Default maximum concurrent agents for auto mode */
+export const DEFAULT_MAX_CONCURRENCY = 1;
+
+/** Default keyboard shortcut bindings */
+export const DEFAULT_KEYBOARD_SHORTCUTS: KeyboardShortcuts = {
+  board: 'K',
+  agent: 'A',
+  spec: 'D',
+  context: 'C',
+  settings: 'S',
+  projectSettings: 'Shift+S',
+  terminal: 'T',
+  notifications: 'X',
+  toggleSidebar: '`',
+  addFeature: 'N',
+  addContextFile: 'N',
+  startNext: 'G',
+  newSession: 'N',
+  openProject: 'O',
+  projectPicker: 'P',
+  cyclePrevProject: 'Q',
+  cycleNextProject: 'E',
+  splitTerminalRight: 'Alt+D',
+  splitTerminalDown: 'Alt+S',
+  closeTerminal: 'Alt+W',
+};
+
+/** Default global settings used when no settings file exists */
+export const DEFAULT_GLOBAL_SETTINGS: GlobalSettings = {
+  version: SETTINGS_VERSION,
+  setupComplete: false,
+  isFirstRun: true,
+  skipClaudeSetup: false,
+  theme: 'dark',
+  sidebarOpen: true,
+  sidebarStyle: 'unified',
+  collapsedNavSections: {},
+  chatHistoryOpen: false,
+  maxConcurrency: DEFAULT_MAX_CONCURRENCY,
+  defaultSkipTests: true,
+  enableDependencyBlocking: true,
+  skipVerificationInAutoMode: false,
+  mergePostAction: null,
+  useWorktrees: true,
+  defaultPlanningMode: 'skip',
+  defaultRequirePlanApproval: false,
+  defaultFeatureModel: { model: 'claude-opus', thinkingLevel: 'adaptive' }, // Use canonical ID with adaptive thinking
+  muteDoneSound: false,
+  disableSplashScreen: false,
+  defaultSortNewestCardOnTop: false,
+  serverLogLevel: 'info',
+  enableRequestLogging: true,
+  showQueryDevtools: true,
+  enableAiCommitMessages: true,
+  phaseModels: DEFAULT_PHASE_MODELS,
+  defaultThinkingLevel: 'adaptive',
+  defaultReasoningEffort: 'none',
+  defaultMaxTurns: 10000,
+  enhancementModel: 'sonnet', // Legacy alias still supported
+  validationModel: 'opus', // Legacy alias still supported
+  enabledCursorModels: getAllCursorModelIds(), // Returns prefixed IDs
+  cursorDefaultModel: 'cursor-auto', // Use canonical prefixed ID
+  enabledOpencodeModels: getAllOpencodeModelIds(), // Returns prefixed IDs
+  opencodeDefaultModel: DEFAULT_OPENCODE_MODEL, // Already prefixed
+  enabledDynamicModelIds: [],
+  knownDynamicModelIds: [],
+  enabledGeminiModels: getAllGeminiModelIds(), // Returns prefixed IDs
+  geminiDefaultModel: DEFAULT_GEMINI_MODEL, // Already prefixed
+  enabledCopilotModels: getAllCopilotModelIds(), // Returns prefixed IDs
+  copilotDefaultModel: DEFAULT_COPILOT_MODEL, // Already prefixed
+  disabledProviders: [],
+  keyboardShortcuts: DEFAULT_KEYBOARD_SHORTCUTS,
+  projects: [],
+  trashedProjects: [],
+  currentProjectId: null,
+  projectHistory: [],
+  projectHistoryIndex: -1,
+  lastProjectDir: undefined,
+  recentFolders: [],
+  worktreePanelCollapsed: false,
+  lastSelectedSessionByProject: {},
+  currentWorktreeByProject: {},
+  autoLoadClaudeMd: true,
+  useClaudeCodeSystemPrompt: true,
+  skipSandboxWarning: false,
+  codexAutoLoadAgents: DEFAULT_CODEX_AUTO_LOAD_AGENTS,
+  codexSandboxMode: DEFAULT_CODEX_SANDBOX_MODE,
+  codexApprovalPolicy: DEFAULT_CODEX_APPROVAL_POLICY,
+  codexEnableWebSearch: DEFAULT_CODEX_ENABLE_WEB_SEARCH,
+  codexEnableImages: DEFAULT_CODEX_ENABLE_IMAGES,
+  codexAdditionalDirs: DEFAULT_CODEX_ADDITIONAL_DIRS,
+  codexThreadId: undefined,
+  mcpServers: [],
+  defaultEditorCommand: null,
+  defaultTerminalId: null,
+  enableSkills: true,
+  skillsSources: ['user', 'project'],
+  enableSubagents: true,
+  subagentsSources: ['user', 'project'],
+  // Event hooks
+  eventHooks: [],
+  // Ntfy.sh notification endpoints
+  ntfyEndpoints: [],
+  // Feature templates
+  featureTemplates: DEFAULT_FEATURE_TEMPLATES,
+  // New provider system
+  claudeCompatibleProviders: [],
+  // Deprecated - kept for migration
+  claudeApiProfiles: [],
+  activeClaudeApiProfileId: null,
+  autoModeByWorktree: {},
+};
+
+/** Default credentials (empty strings - user must provide API keys) */
+export const DEFAULT_CREDENTIALS: Credentials = {
+  version: CREDENTIALS_VERSION,
+  apiKeys: {
+    anthropic: '',
+    google: '',
+    openai: '',
+    zai: '',
+  },
+};
+
+/** Default project settings (empty - all settings are optional and fall back to global) */
+export const DEFAULT_PROJECT_SETTINGS: ProjectSettings = {
+  version: PROJECT_SETTINGS_VERSION,
+};
diff --git a/temp_repo/libs/types/src/spec.ts b/temp_repo/libs/types/src/spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5347dd41fde9a0259d942a6b38e09d0ca371a2b7
--- /dev/null
+++ b/temp_repo/libs/types/src/spec.ts
@@ -0,0 +1,118 @@
+/**
+ * App specification types
+ */
+
+/**
+ * TypeScript interface for structured spec output
+ */
+export interface SpecOutput {
+  project_name: string;
+  overview: string;
+  technology_stack: string[];
+  core_capabilities: string[];
+  implemented_features: Array<{
+    name: string;
+    description: string;
+    file_locations?: string[];
+  }>;
+  additional_requirements?: string[];
+  development_guidelines?: string[];
+  implementation_roadmap?: Array<{
+    phase: string;
+    status: 'completed' | 'in_progress' | 'pending';
+    description: string;
+  }>;
+}
+
+/**
+ * JSON Schema for structured spec output
+ * Used with Claude's structured output feature for reliable parsing
+ */
+export const specOutputSchema = {
+  type: 'object',
+  properties: {
+    project_name: {
+      type: 'string',
+      description: 'The name of the project',
+    },
+    overview: {
+      type: 'string',
+      description:
+        'A comprehensive description of what the project does, its purpose, and key goals',
+    },
+    technology_stack: {
+      type: 'array',
+      items: { type: 'string' },
+      description: 'List of all technologies, frameworks, libraries, and tools used',
+    },
+    core_capabilities: {
+      type: 'array',
+      items: { type: 'string' },
+      description: 'List of main features and capabilities the project provides',
+    },
+    implemented_features: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          name: {
+            type: 'string',
+            description: 'Name of the implemented feature',
+          },
+          description: {
+            type: 'string',
+            description: 'Description of what the feature does',
+          },
+          file_locations: {
+            type: 'array',
+            items: { type: 'string' },
+            description: 'File paths where this feature is implemented',
+          },
+        },
+        required: ['name', 'description'],
+      },
+      description: 'Features that have been implemented based on code analysis',
+    },
+    additional_requirements: {
+      type: 'array',
+      items: { type: 'string' },
+      description: 'Any additional requirements or constraints',
+    },
+    development_guidelines: {
+      type: 'array',
+      items: { type: 'string' },
+      description: 'Development standards and practices',
+    },
+    implementation_roadmap: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          phase: {
+            type: 'string',
+            description: 'Name of the implementation phase',
+          },
+          status: {
+            type: 'string',
+            enum: ['completed', 'in_progress', 'pending'],
+            description: 'Current status of this phase',
+          },
+          description: {
+            type: 'string',
+            description: 'Description of what this phase involves',
+          },
+        },
+        required: ['phase', 'status', 'description'],
+      },
+      description: 'Phases or roadmap items for implementation',
+    },
+  },
+  required: [
+    'project_name',
+    'overview',
+    'technology_stack',
+    'core_capabilities',
+    'implemented_features',
+  ],
+  additionalProperties: false,
+};
diff --git a/temp_repo/libs/types/src/terminal.ts b/temp_repo/libs/types/src/terminal.ts
new file mode 100644
index 0000000000000000000000000000000000000000..34b9b6a49b841a2f4202a3bcdc3e582b1626332e
--- /dev/null
+++ b/temp_repo/libs/types/src/terminal.ts
@@ -0,0 +1,15 @@
+/**
+ * Terminal types for the "Open In Terminal" functionality
+ */
+
+/**
+ * Information about an available external terminal
+ */
+export interface TerminalInfo {
+  /** Unique identifier for the terminal (e.g., 'iterm2', 'warp') */
+  id: string;
+  /** Display name of the terminal (e.g., "iTerm2", "Warp") */
+  name: string;
+  /** CLI command or open command to launch the terminal */
+  command: string;
+}
diff --git a/temp_repo/libs/types/src/test-runner.ts b/temp_repo/libs/types/src/test-runner.ts
new file mode 100644
index 0000000000000000000000000000000000000000..20c61a34d8e3ea30d1c0ed0c69a9c8067bf02eaa
--- /dev/null
+++ b/temp_repo/libs/types/src/test-runner.ts
@@ -0,0 +1,17 @@
+/**
+ * Test runner types for the test runner functionality
+ */
+
+/**
+ * Information about an available test runner
+ */
+export interface TestRunnerInfo {
+  /** Unique identifier for the test runner (e.g., 'vitest', 'jest', 'pytest') */
+  id: string;
+  /** Display name of the test runner (e.g., "Vitest", "Jest", "Pytest") */
+  name: string;
+  /** CLI command to run all tests */
+  command: string;
+  /** Optional: CLI command pattern to run a specific test file */
+  fileCommand?: string;
+}
diff --git a/temp_repo/libs/types/src/worktree.ts b/temp_repo/libs/types/src/worktree.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b5032adb57e91be839a79b89d9d628314e2c1924
--- /dev/null
+++ b/temp_repo/libs/types/src/worktree.ts
@@ -0,0 +1,94 @@
+/**
+ * Worktree and PR-related types
+ * Shared across server and UI components
+ */
+
+/** GitHub PR states as returned by the GitHub API (uppercase) */
+export type PRState = 'OPEN' | 'MERGED' | 'CLOSED';
+
+/** Valid PR states for validation */
+export const PR_STATES: readonly PRState[] = ['OPEN', 'MERGED', 'CLOSED'] as const;
+
+/**
+ * Validates a PR state value from external APIs (e.g., GitHub CLI).
+ * Returns the validated state if it matches a known PRState, otherwise returns 'OPEN' as default.
+ * This is safer than type assertions as it handles unexpected values from external APIs.
+ *
+ * @param state - The state string to validate (can be any string)
+ * @returns A valid PRState value
+ */
+export function validatePRState(state: string | undefined | null): PRState {
+  return PR_STATES.find((s) => s === state) ?? 'OPEN';
+}
+
+/** PR information stored in worktree metadata */
+export interface WorktreePRInfo {
+  number: number;
+  url: string;
+  title: string;
+  /** PR state: OPEN, MERGED, or CLOSED */
+  state: PRState;
+  createdAt: string;
+}
+
+/**
+ * Request payload for adding a git remote
+ */
+export interface AddRemoteRequest {
+  /** Path to the git worktree/repository */
+  worktreePath: string;
+  /** Name for the remote (e.g., 'origin', 'upstream') */
+  remoteName: string;
+  /** URL of the remote repository (HTTPS, SSH, or git:// protocol) */
+  remoteUrl: string;
+}
+
+/**
+ * Result data from a successful add-remote operation
+ */
+export interface AddRemoteResult {
+  /** Name of the added remote */
+  remoteName: string;
+  /** URL of the added remote */
+  remoteUrl: string;
+  /** Whether the initial fetch was successful */
+  fetched: boolean;
+  /** Human-readable status message */
+  message: string;
+}
+
+/**
+ * Successful response from add-remote endpoint
+ */
+export interface AddRemoteResponse {
+  success: true;
+  result: AddRemoteResult;
+}
+
+/**
+ * Error response from add-remote endpoint
+ */
+export interface AddRemoteErrorResponse {
+  success: false;
+  error: string;
+  /** Optional error code for specific error types (e.g., 'REMOTE_EXISTS') */
+  code?: string;
+}
+
+/**
+ * Merge state information for a git repository
+ */
+export interface MergeStateInfo {
+  /** Whether a merge is currently in progress */
+  isMerging: boolean;
+  /** Type of merge operation: 'merge' | 'rebase' | 'cherry-pick' | null */
+  mergeOperationType: 'merge' | 'rebase' | 'cherry-pick' | null;
+  /** Whether the merge completed cleanly (no conflicts) */
+  isCleanMerge: boolean;
+  /** Files affected by the merge */
+  mergeAffectedFiles: string[];
+  /** Files with unresolved conflicts */
+  conflictFiles: string[];
+  /** Whether the current HEAD is a completed merge commit (has multiple parents) */
+  isMergeCommit?: boolean;
+}
diff --git a/temp_repo/libs/types/tests/unit/__snapshots__/provider-utils.test.ts.snap b/temp_repo/libs/types/tests/unit/__snapshots__/provider-utils.test.ts.snap
new file mode 100644
index 0000000000000000000000000000000000000000..495f79edb99c947151050c47f1529b72c1aed86a
--- /dev/null
+++ b/temp_repo/libs/types/tests/unit/__snapshots__/provider-utils.test.ts.snap
@@ -0,0 +1,19 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`provider-utils.ts > validateBareModelId > with expectedProvider parameter > should reject non-matching provider prefixes even with expectedProvider set 1`] = `[Error: [CursorProvider] Model ID should not contain provider prefix 'codex-'. Got: 'codex-gpt-4'. This is likely a bug in ProviderFactory - it should strip the 'codex' prefix before passing the model to the provider.]`;
+
+exports[`provider-utils.ts > validateBareModelId > with expectedProvider parameter > should reject non-matching provider prefixes even with expectedProvider set 2`] = `[Error: [GeminiProvider] Model ID should not contain provider prefix 'cursor-'. Got: 'cursor-gpt-4'. This is likely a bug in ProviderFactory - it should strip the 'cursor' prefix before passing the model to the provider.]`;
+
+exports[`provider-utils.ts > validateBareModelId > without expectedProvider parameter > should reject model IDs with codex- prefix 1`] = `[Error: [TestProvider] Model ID should not contain provider prefix 'codex-'. Got: 'codex-gpt-4'. This is likely a bug in ProviderFactory - it should strip the 'codex' prefix before passing the model to the provider.]`;
+
+exports[`provider-utils.ts > validateBareModelId > without expectedProvider parameter > should reject model IDs with copilot- prefix 1`] = `[Error: [TestProvider] Model ID should not contain provider prefix 'copilot-'. Got: 'copilot-gpt-4'. This is likely a bug in ProviderFactory - it should strip the 'copilot' prefix before passing the model to the provider.]`;
+
+exports[`provider-utils.ts > validateBareModelId > without expectedProvider parameter > should reject model IDs with cursor- prefix 1`] = `[Error: [TestProvider] Model ID should not contain provider prefix 'cursor-'. Got: 'cursor-gpt-4'. This is likely a bug in ProviderFactory - it should strip the 'cursor' prefix before passing the model to the provider.]`;
+
+exports[`provider-utils.ts > validateBareModelId > without expectedProvider parameter > should reject model IDs with cursor- prefix 2`] = `[Error: [TestProvider] Model ID should not contain provider prefix 'cursor-'. Got: 'cursor-composer-1'. This is likely a bug in ProviderFactory - it should strip the 'cursor' prefix before passing the model to the provider.]`;
+
+exports[`provider-utils.ts > validateBareModelId > without expectedProvider parameter > should reject model IDs with gemini- prefix 1`] = `[Error: [TestProvider] Model ID should not contain provider prefix 'gemini-'. Got: 'gemini-2.5-flash'. This is likely a bug in ProviderFactory - it should strip the 'gemini' prefix before passing the model to the provider.]`;
+
+exports[`provider-utils.ts > validateBareModelId > without expectedProvider parameter > should reject model IDs with gemini- prefix 2`] = `[Error: [TestProvider] Model ID should not contain provider prefix 'gemini-'. Got: 'gemini-2.5-pro'. This is likely a bug in ProviderFactory - it should strip the 'gemini' prefix before passing the model to the provider.]`;
+
+exports[`provider-utils.ts > validateBareModelId > without expectedProvider parameter > should reject model IDs with opencode- prefix 1`] = `[Error: [TestProvider] Model ID should not contain provider prefix 'opencode-'. Got: 'opencode-gpt-4'. This is likely a bug in ProviderFactory - it should strip the 'opencode' prefix before passing the model to the provider.]`;
diff --git a/temp_repo/libs/types/tests/unit/provider-utils.test.ts b/temp_repo/libs/types/tests/unit/provider-utils.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8b0d3b33d3b11f5e06dc42916bd9330174a0d10b
--- /dev/null
+++ b/temp_repo/libs/types/tests/unit/provider-utils.test.ts
@@ -0,0 +1,285 @@
+import { describe, it, expect } from 'vitest';
+import {
+  validateBareModelId,
+  stripProviderPrefix,
+  isCursorModel,
+  isGeminiModel,
+  isCodexModel,
+  isCopilotModel,
+  isOpencodeModel,
+  PROVIDER_PREFIXES,
+  type ModelProvider,
+} from '@automaker/types';
+
+describe('provider-utils.ts', () => {
+  describe('validateBareModelId', () => {
+    describe('without expectedProvider parameter', () => {
+      it('should accept valid bare model IDs', () => {
+        expect(() => validateBareModelId('gpt-4', 'TestProvider')).not.toThrow();
+        expect(() => validateBareModelId('claude-3-opus', 'TestProvider')).not.toThrow();
+        expect(() => validateBareModelId('2.5-flash', 'TestProvider')).not.toThrow();
+        expect(() => validateBareModelId('composer-1', 'TestProvider')).not.toThrow();
+      });
+
+      it('should reject model IDs with cursor- prefix', () => {
+        expect(() =>
+          validateBareModelId('cursor-gpt-4', 'TestProvider')
+        ).toThrowErrorMatchingSnapshot();
+        expect(() =>
+          validateBareModelId('cursor-composer-1', 'TestProvider')
+        ).toThrowErrorMatchingSnapshot();
+      });
+
+      it('should reject model IDs with gemini- prefix', () => {
+        expect(() =>
+          validateBareModelId('gemini-2.5-flash', 'TestProvider')
+        ).toThrowErrorMatchingSnapshot();
+        expect(() =>
+          validateBareModelId('gemini-2.5-pro', 'TestProvider')
+        ).toThrowErrorMatchingSnapshot();
+      });
+
+      it('should reject model IDs with codex- prefix', () => {
+        expect(() =>
+          validateBareModelId('codex-gpt-4', 'TestProvider')
+        ).toThrowErrorMatchingSnapshot();
+      });
+
+      it('should reject model IDs with copilot- prefix', () => {
+        expect(() =>
+          validateBareModelId('copilot-gpt-4', 'TestProvider')
+        ).toThrowErrorMatchingSnapshot();
+      });
+
+      it('should reject model IDs with opencode- prefix', () => {
+        expect(() =>
+          validateBareModelId('opencode-gpt-4', 'TestProvider')
+        ).toThrowErrorMatchingSnapshot();
+      });
+
+      it('should throw error for non-string model ID', () => {
+        // @ts-expect-error - testing invalid input
+        expect(() => validateBareModelId(null, 'TestProvider')).toThrow(
+          '[TestProvider] Invalid model ID: expected string, got object'
+        );
+        // @ts-expect-error - testing invalid input
+        expect(() => validateBareModelId(undefined, 'TestProvider')).toThrow(
+          '[TestProvider] Invalid model ID: expected string, got undefined'
+        );
+        // @ts-expect-error - testing invalid input
+        expect(() => validateBareModelId(123, 'TestProvider')).toThrow(
+          '[TestProvider] Invalid model ID: expected string, got number'
+        );
+      });
+
+      it('should throw error for empty string model ID', () => {
+        expect(() => validateBareModelId('', 'TestProvider')).toThrow(
+          '[TestProvider] Invalid model ID: expected string, got string'
+        );
+      });
+    });
+
+    describe('with expectedProvider parameter', () => {
+      it('should allow cursor- prefixed models when expectedProvider is "cursor"', () => {
+        expect(() => validateBareModelId('cursor-gpt-4', 'CursorProvider', 'cursor')).not.toThrow();
+        expect(() =>
+          validateBareModelId('cursor-composer-1', 'CursorProvider', 'cursor')
+        ).not.toThrow();
+      });
+
+      it('should allow gemini- prefixed models when expectedProvider is "gemini"', () => {
+        expect(() =>
+          validateBareModelId('gemini-2.5-flash', 'GeminiProvider', 'gemini')
+        ).not.toThrow();
+        expect(() =>
+          validateBareModelId('gemini-2.5-pro', 'GeminiProvider', 'gemini')
+        ).not.toThrow();
+      });
+
+      it('should allow codex- prefixed models when expectedProvider is "codex"', () => {
+        expect(() => validateBareModelId('codex-gpt-4', 'CodexProvider', 'codex')).not.toThrow();
+      });
+
+      it('should allow copilot- prefixed models when expectedProvider is "copilot"', () => {
+        expect(() =>
+          validateBareModelId('copilot-gpt-4', 'CopilotProvider', 'copilot')
+        ).not.toThrow();
+      });
+
+      it('should allow opencode- prefixed models when expectedProvider is "opencode"', () => {
+        expect(() =>
+          validateBareModelId('opencode-gpt-4', 'OpencodeProvider', 'opencode')
+        ).not.toThrow();
+      });
+
+      describe('Cursor Gemini models edge case', () => {
+        it('should allow gemini- prefixed models for Cursor provider when expectedProvider is "cursor"', () => {
+          // This is the key fix for Cursor Gemini models
+          // Cursor's Gemini models have bare IDs like "gemini-3-pro" that start with "gemini-"
+          // but they're Cursor models, not Gemini models
+          expect(() =>
+            validateBareModelId('gemini-3-pro', 'CursorProvider', 'cursor')
+          ).not.toThrow();
+          expect(() =>
+            validateBareModelId('gemini-3-flash', 'CursorProvider', 'cursor')
+          ).not.toThrow();
+        });
+
+        it('should still reject other provider prefixes for Cursor provider', () => {
+          // Cursor should NOT receive models with codex- prefix
+          expect(() => validateBareModelId('codex-gpt-4', 'CursorProvider', 'cursor')).toThrow();
+          // Cursor should NOT receive models with copilot- prefix
+          expect(() => validateBareModelId('copilot-gpt-4', 'CursorProvider', 'cursor')).toThrow();
+        });
+
+        it('should allow gemini- prefixed models for Gemini provider when expectedProvider is "gemini"', () => {
+          // Gemini provider should also be able to receive its own prefixed models
+          expect(() =>
+            validateBareModelId('gemini-2.5-flash', 'GeminiProvider', 'gemini')
+          ).not.toThrow();
+          expect(() =>
+            validateBareModelId('gemini-2.5-pro', 'GeminiProvider', 'gemini')
+          ).not.toThrow();
+        });
+      });
+
+      it('should reject non-matching provider prefixes even with expectedProvider set', () => {
+        // Even with expectedProvider set to "cursor", should still reject "codex-" prefix
+        expect(() =>
+          validateBareModelId('codex-gpt-4', 'CursorProvider', 'cursor')
+        ).toThrowErrorMatchingSnapshot();
+
+        // Even with expectedProvider set to "gemini", should still reject "cursor-" prefix
+        expect(() =>
+          validateBareModelId('cursor-gpt-4', 'GeminiProvider', 'gemini')
+        ).toThrowErrorMatchingSnapshot();
+      });
+    });
+  });
+
+  describe('stripProviderPrefix', () => {
+    it('should strip cursor- prefix from Cursor models', () => {
+      expect(stripProviderPrefix('cursor-gpt-4')).toBe('gpt-4');
+      expect(stripProviderPrefix('cursor-composer-1')).toBe('composer-1');
+      expect(stripProviderPrefix('cursor-gemini-3-pro')).toBe('gemini-3-pro');
+    });
+
+    it('should strip gemini- prefix from Gemini models', () => {
+      expect(stripProviderPrefix('gemini-2.5-flash')).toBe('2.5-flash');
+      expect(stripProviderPrefix('gemini-2.5-pro')).toBe('2.5-pro');
+    });
+
+    it('should strip codex- prefix from Codex models', () => {
+      expect(stripProviderPrefix('codex-gpt-4')).toBe('gpt-4');
+    });
+
+    it('should strip copilot- prefix from Copilot models', () => {
+      expect(stripProviderPrefix('copilot-gpt-4')).toBe('gpt-4');
+    });
+
+    it('should strip opencode- prefix from Opencode models', () => {
+      expect(stripProviderPrefix('opencode-gpt-4')).toBe('gpt-4');
+    });
+
+    it('should return unchanged model ID if no provider prefix', () => {
+      expect(stripProviderPrefix('gpt-4')).toBe('gpt-4');
+      expect(stripProviderPrefix('claude-3-opus')).toBe('claude-3-opus');
+      expect(stripProviderPrefix('2.5-flash')).toBe('2.5-flash');
+    });
+
+    it('should only strip the first matching prefix', () => {
+      // cursor-gemini-3-pro has both cursor- and gemini- prefixes
+      // Should strip cursor- first (it's checked first in PROVIDER_PREFIXES)
+      expect(stripProviderPrefix('cursor-gemini-3-pro')).toBe('gemini-3-pro');
+    });
+
+    it('should handle empty string', () => {
+      expect(stripProviderPrefix('')).toBe('');
+    });
+  });
+
+  describe('Model identification functions', () => {
+    describe('isCursorModel', () => {
+      it('should return true for Cursor models', () => {
+        expect(isCursorModel('cursor-gpt-4')).toBe(true);
+        expect(isCursorModel('cursor-composer-1')).toBe(true);
+        expect(isCursorModel('cursor-gemini-3-pro')).toBe(true);
+        expect(isCursorModel('cursor-gemini-3-flash')).toBe(true);
+      });
+
+      it('should return false for non-Cursor models', () => {
+        expect(isCursorModel('gpt-4')).toBe(false);
+        expect(isCursorModel('gemini-2.5-flash')).toBe(false);
+        expect(isCursorModel('codex-gpt-4')).toBe(false);
+      });
+    });
+
+    describe('isGeminiModel', () => {
+      it('should return true for Gemini models', () => {
+        expect(isGeminiModel('gemini-2.5-flash')).toBe(true);
+        expect(isGeminiModel('gemini-2.5-pro')).toBe(true);
+        expect(isGeminiModel('gemini-1.5-flash')).toBe(true);
+      });
+
+      it('should return false for Cursor Gemini models (they are Cursor models, not Gemini models)', () => {
+        expect(isGeminiModel('cursor-gemini-3-pro')).toBe(false);
+        expect(isGeminiModel('cursor-gemini-3-flash')).toBe(false);
+      });
+
+      it('should return false for non-Gemini models', () => {
+        expect(isGeminiModel('gpt-4')).toBe(false);
+        expect(isGeminiModel('cursor-gpt-4')).toBe(false);
+        expect(isGeminiModel('codex-gpt-4')).toBe(false);
+      });
+    });
+
+    describe('isCodexModel', () => {
+      it('should return true for Codex models', () => {
+        expect(isCodexModel('codex-gpt-4')).toBe(true);
+        expect(isCodexModel('codex-gpt-5.1-codex-max')).toBe(true);
+      });
+
+      it('should return false for non-Codex models', () => {
+        // Note: gpt- models ARE Codex models according to the implementation
+        // because bare gpt models go to Codex, not Cursor
+        expect(isCodexModel('cursor-gpt-4')).toBe(false);
+        expect(isCodexModel('gemini-2.5-flash')).toBe(false);
+        expect(isCodexModel('claude-3-opus')).toBe(false);
+      });
+    });
+
+    describe('isCopilotModel', () => {
+      it('should return true for Copilot models', () => {
+        expect(isCopilotModel('copilot-gpt-4')).toBe(true);
+      });
+
+      it('should return false for non-Copilot models', () => {
+        expect(isCopilotModel('gpt-4')).toBe(false);
+        expect(isCopilotModel('cursor-gpt-4')).toBe(false);
+      });
+    });
+
+    describe('isOpencodeModel', () => {
+      it('should return true for Opencode models', () => {
+        expect(isOpencodeModel('opencode-gpt-4')).toBe(true);
+      });
+
+      it('should return false for non-Opencode models', () => {
+        expect(isOpencodeModel('gpt-4')).toBe(false);
+        expect(isOpencodeModel('cursor-gpt-4')).toBe(false);
+      });
+    });
+  });
+
+  describe('PROVIDER_PREFIXES', () => {
+    it('should contain all expected provider prefixes', () => {
+      expect(PROVIDER_PREFIXES).toEqual({
+        cursor: 'cursor-',
+        gemini: 'gemini-',
+        codex: 'codex-',
+        copilot: 'copilot-',
+        opencode: 'opencode-',
+      });
+    });
+  });
+});
diff --git a/temp_repo/libs/types/tsconfig.json b/temp_repo/libs/types/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..f677f8d5ebc071b18ab8302e1ef128243ebc2b3c
--- /dev/null
+++ b/temp_repo/libs/types/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/temp_repo/libs/types/vitest.config.ts b/temp_repo/libs/types/vitest.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f8275aefae76b8b0aae4e809f550458a54987a6e
--- /dev/null
+++ b/temp_repo/libs/types/vitest.config.ts
@@ -0,0 +1,23 @@
+import { defineConfig } from 'vitest/config';
+import path from 'path';
+
+export default defineConfig({
+  test: {
+    name: 'types',
+    reporters: ['verbose'],
+    globals: true,
+    environment: 'node',
+    include: ['tests/**/*.test.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      include: ['src/**/*.ts'],
+      exclude: ['src/**/*.d.ts'],
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+});
diff --git a/temp_repo/libs/utils/README.md b/temp_repo/libs/utils/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..18532e7998ef7333c707b1a983480545d98a5b5e
--- /dev/null
+++ b/temp_repo/libs/utils/README.md
@@ -0,0 +1,155 @@
+# @automaker/utils
+
+Shared utility functions for AutoMaker.
+
+## Overview
+
+This package provides common utility functions used across AutoMaker's server and UI. It includes error handling, logging, conversation utilities, image handling, and prompt building.
+
+## Installation
+
+```bash
+npm install @automaker/utils
+```
+
+## Exports
+
+### Logger
+
+Structured logging with context.
+
+```typescript
+import { createLogger, LogLevel } from '@automaker/utils';
+
+const logger = createLogger('MyComponent');
+logger.info('Processing request');
+logger.error('Failed to process:', error);
+logger.debug('Debug information', { data });
+```
+
+### Error Handler
+
+Error classification and user-friendly messages.
+
+```typescript
+import {
+  isAbortError,
+  isCancellationError,
+  isAuthenticationError,
+  classifyError,
+  getUserFriendlyErrorMessage,
+} from '@automaker/utils';
+
+try {
+  await operation();
+} catch (error) {
+  if (isAbortError(error)) {
+    console.log('Operation was aborted');
+  }
+
+  const errorInfo = classifyError(error);
+  const message = getUserFriendlyErrorMessage(error);
+}
+```
+
+### Conversation Utils
+
+Message formatting and conversion.
+
+```typescript
+import {
+  extractTextFromContent,
+  normalizeContentBlocks,
+  formatHistoryAsText,
+  convertHistoryToMessages,
+} from '@automaker/utils';
+
+const text = extractTextFromContent(contentBlocks);
+const normalized = normalizeContentBlocks(content);
+const formatted = formatHistoryAsText(messages);
+const converted = convertHistoryToMessages(history);
+```
+
+### Image Handler
+
+Image processing for Claude prompts.
+
+```typescript
+import {
+  getMimeTypeForImage,
+  readImageAsBase64,
+  convertImagesToContentBlocks,
+  formatImagePathsForPrompt,
+} from '@automaker/utils';
+
+const mimeType = getMimeTypeForImage('screenshot.png');
+const base64 = await readImageAsBase64('/path/to/image.jpg');
+const blocks = await convertImagesToContentBlocks(imagePaths, basePath);
+const formatted = formatImagePathsForPrompt(imagePaths);
+```
+
+### Prompt Builder
+
+Build prompts with images for Claude.
+
+```typescript
+import { buildPromptWithImages } from '@automaker/utils';
+
+const result = await buildPromptWithImages({
+  basePrompt: 'Analyze this screenshot',
+  imagePaths: ['/path/to/screenshot.png'],
+  basePath: '/project/path',
+});
+
+console.log(result.prompt); // Prompt with image references
+console.log(result.images); // Image data for Claude
+```
+
+### File System Utils
+
+Common file system operations.
+
+```typescript
+import { ensureDir, fileExists, readJsonFile, writeJsonFile } from '@automaker/utils';
+
+await ensureDir('/path/to/dir');
+const exists = await fileExists('/path/to/file');
+const data = await readJsonFile('/config.json');
+await writeJsonFile('/config.json', data);
+```
+
+## Usage Example
+
+```typescript
+import { createLogger, classifyError, buildPromptWithImages } from '@automaker/utils';
+
+const logger = createLogger('FeatureExecutor');
+
+async function executeWithImages(prompt: string, images: string[]) {
+  try {
+    logger.info('Building prompt with images');
+
+    const result = await buildPromptWithImages({
+      basePrompt: prompt,
+      imagePaths: images,
+      basePath: process.cwd(),
+    });
+
+    logger.debug('Prompt built successfully', { imageCount: result.images.length });
+    return result;
+  } catch (error) {
+    const errorInfo = classifyError(error);
+    logger.error('Failed to build prompt:', errorInfo.message);
+    throw error;
+  }
+}
+```
+
+## Dependencies
+
+- `@automaker/types` - Type definitions
+
+## Used By
+
+- `@automaker/server`
+- `@automaker/ui`
diff --git a/temp_repo/libs/utils/package.json b/temp_repo/libs/utils/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..0d7d5149df4a3d3f8f36326e6a151e65896cc4bd
--- /dev/null
+++ b/temp_repo/libs/utils/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "@automaker/utils",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Shared utility functions for AutoMaker",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./logger": {
+      "types": "./dist/logger.d.ts",
+      "default": "./dist/logger.js"
+    },
+    "./debounce": {
+      "types": "./dist/debounce.d.ts",
+      "default": "./dist/debounce.js"
+    },
+    "./error-handler": {
+      "types": "./dist/error-handler.d.ts",
+      "default": "./dist/error-handler.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "keywords": [
+    "automaker",
+    "utils"
+  ],
+  "author": "AutoMaker Team",
+  "license": "SEE LICENSE IN LICENSE",
+  "engines": {
+    "node": ">=22.0.0 <23.0.0"
+  },
+  "dependencies": {
+    "@automaker/platform": "1.0.0",
+    "@automaker/types": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.19.3",
+    "typescript": "5.9.3",
+    "vitest": "4.0.16"
+  }
+}
diff --git a/temp_repo/libs/utils/src/atomic-writer.ts b/temp_repo/libs/utils/src/atomic-writer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0764310aa88eb863a118edbf7fb9ab8eb80dd620
--- /dev/null
+++ b/temp_repo/libs/utils/src/atomic-writer.ts
@@ -0,0 +1,363 @@
+/**
+ * Atomic file writing utilities for JSON data
+ *
+ * Provides atomic write operations using temp-file + rename pattern,
+ * ensuring data integrity even during crashes or power failures.
+ */
+
+import { secureFs } from '@automaker/platform';
+import path from 'path';
+import crypto from 'crypto';
+import { createLogger } from './logger.js';
+import { mkdirSafe } from './fs-utils.js';
+
+const logger = createLogger('AtomicWriter');
+
+/** Default maximum number of backup files to keep for crash recovery */
+export const DEFAULT_BACKUP_COUNT = 3;
+
+/**
+ * Options for atomic write operations
+ */
+export interface AtomicWriteOptions {
+  /** Number of spaces for JSON indentation (default: 2) */
+  indent?: number;
+  /** Create parent directories if they don't exist (default: false) */
+  createDirs?: boolean;
+  /** Number of backup files to keep (0 = no backups, default: 0). When > 0, rotates .bak1, .bak2, etc. */
+  backupCount?: number;
+}
+
+/**
+ * Rotate backup files (.bak1 -> .bak2 -> .bak3, oldest is deleted)
+ * and create a new backup from the current file.
+ *
+ * @param filePath - Absolute path to the file being backed up
+ * @param maxBackups - Maximum number of backup files to keep
+ */
+export async function rotateBackups(
+  filePath: string,
+  maxBackups: number = DEFAULT_BACKUP_COUNT
+): Promise<void> {
+  // Check if the source file exists before attempting backup
+  try {
+    await secureFs.access(filePath);
+  } catch {
+    // No existing file to backup
+    return;
+  }
+
+  // Rotate existing backups: .bak3 is deleted, .bak2 -> .bak3, .bak1 -> .bak2
+  for (let i = maxBackups; i >= 1; i--) {
+    const currentBackup = `${filePath}.bak${i}`;
+    const nextBackup = `${filePath}.bak${i + 1}`;
+
+    try {
+      if (i === maxBackups) {
+        // Delete the oldest backup
+        await secureFs.unlink(currentBackup);
+      } else {
+        // Rename current backup to next slot
+        await secureFs.rename(currentBackup, nextBackup);
+      }
+    } catch {
+      // Ignore errors - backup file may not exist
+    }
+  }
+
+  // Copy current file to .bak1
+  try {
+    await secureFs.copyFile(filePath, `${filePath}.bak1`);
+  } catch (error) {
+    logger.warn(`Failed to create backup of ${filePath}:`, error);
+    // Continue with write even if backup fails
+  }
+}
+
+/**
+ * Atomically write JSON data to a file.
+ *
+ * Uses the temp-file + rename pattern for atomicity:
+ * 1. Writes data to a temporary file
+ * 2. Atomically renames temp file to target path
+ * 3. Cleans up temp file on error
+ *
+ * @param filePath - Absolute path to the target file
+ * @param data - Data to serialize as JSON
+ * @param options - Optional write options
+ * @throws Error if write fails (temp file is cleaned up)
+ *
+ * @example
+ * ```typescript
+ * await atomicWriteJson('/path/to/config.json', { key: 'value' });
+ * await atomicWriteJson('/path/to/data.json', data, { indent: 4, createDirs: true });
+ * ```
+ */
+export async function atomicWriteJson<T>(
+  filePath: string,
+  data: T,
+  options: AtomicWriteOptions = {}
+): Promise<void> {
+  const { indent = 2, backupCount = 0 } = options;
+  const resolvedPath = path.resolve(filePath);
+  // Use timestamp + random suffix to ensure uniqueness even for concurrent writes
+  const uniqueSuffix = `${Date.now()}.${crypto.randomBytes(4).toString('hex')}`;
+  const tempPath = `${resolvedPath}.tmp.${uniqueSuffix}`;
+
+  // Always ensure parent directories exist before writing the temp file
+  const dirPath = path.dirname(resolvedPath);
+  await mkdirSafe(dirPath);
+
+  const content = JSON.stringify(data, null, indent);
+
+  try {
+    // Rotate backups before writing (if backups are enabled)
+    if (backupCount > 0) {
+      await rotateBackups(resolvedPath, backupCount);
+    }
+
+    await secureFs.writeFile(tempPath, content, 'utf-8');
+    await secureFs.rename(tempPath, resolvedPath);
+  } catch (error) {
+    // Clean up temp file if it exists
+    try {
+      await secureFs.unlink(tempPath);
+    } catch {
+      // Ignore cleanup errors - best effort
+    }
+    logger.error(`Failed to atomically write to ${resolvedPath}:`, error);
+    throw error;
+  }
+}
+
+/**
+ * Safely read JSON from a file with fallback to default value.
+ *
+ * Returns the default value if:
+ * - File doesn't exist (ENOENT)
+ * - File content is invalid JSON
+ *
+ * @param filePath - Absolute path to the file
+ * @param defaultValue - Value to return if file doesn't exist or is invalid
+ * @returns Parsed JSON data or default value
+ *
+ * @example
+ * ```typescript
+ * const config = await readJsonFile('/path/to/config.json', { version: 1 });
+ * ```
+ */
+export async function readJsonFile<T>(filePath: string, defaultValue: T): Promise<T> {
+  const resolvedPath = path.resolve(filePath);
+
+  try {
+    const content = (await secureFs.readFile(resolvedPath, 'utf-8')) as string;
+    return JSON.parse(content) as T;
+  } catch (error) {
+    const nodeError = error as NodeJS.ErrnoException;
+    if (nodeError.code === 'ENOENT') {
+      return defaultValue;
+    }
+    logger.error(`Error reading JSON from ${resolvedPath}:`, error);
+    return defaultValue;
+  }
+}
+
+/**
+ * Atomically update a JSON file by reading, transforming, and writing.
+ *
+ * Provides a safe read-modify-write pattern:
+ * 1. Reads existing file (or uses default)
+ * 2. Applies updater function
+ * 3. Atomically writes result
+ *
+ * @param filePath - Absolute path to the file
+ * @param defaultValue - Default value if file doesn't exist
+ * @param updater - Function that transforms the data
+ * @param options - Optional write options
+ *
+ * @example
+ * ```typescript
+ * await updateJsonAtomically(
+ *   '/path/to/counter.json',
+ *   { count: 0 },
+ *   (data) => ({ ...data, count: data.count + 1 })
+ * );
+ * ```
+ */
+export async function updateJsonAtomically<T>(
+  filePath: string,
+  defaultValue: T,
+  updater: (current: T) => T | Promise<T>,
+  options: AtomicWriteOptions = {}
+): Promise<void> {
+  const current = await readJsonFile(filePath, defaultValue);
+  const updated = await updater(current);
+  await atomicWriteJson(filePath, updated, options);
+}
+
+/**
+ * Result of a JSON read operation with recovery information
+ */
+export interface ReadJsonRecoveryResult<T> {
+  /** The data that was successfully read */
+  data: T;
+  /** Whether recovery was needed (main file was corrupted or missing) */
+  recovered: boolean;
+  /** Source of the data: 'main', 'backup', 'temp', or 'default' */
+  source: 'main' | 'backup' | 'temp' | 'default';
+  /** Error message if the main file had an issue */
+  error?: string;
+}
+
+/**
+ * Options for readJsonWithRecovery
+ */
+export interface ReadJsonRecoveryOptions {
+  /** Maximum number of backup files to check (.bak1, .bak2, etc.) Default: 3 */
+  maxBackups?: number;
+  /** Whether to automatically restore main file from backup when corrupted. Default: true */
+  autoRestore?: boolean;
+}
+
+/**
+ * Log a warning if recovery was needed (from backup or temp file).
+ *
+ * Use this helper to reduce duplicate logging code when using readJsonWithRecovery.
+ *
+ * @param result - The result from readJsonWithRecovery
+ * @param identifier - A human-readable identifier for the file being recovered (e.g., "Feature abc123")
+ * @param loggerInstance - Optional logger instance to use (defaults to AtomicWriter logger)
+ *
+ * @example
+ * ```typescript
+ * const result = await readJsonWithRecovery(featurePath, null);
+ * logRecoveryWarning(result, `Feature ${featureId}`);
+ * ```
+ */
+export function logRecoveryWarning<T>(
+  result: ReadJsonRecoveryResult<T>,
+  identifier: string,
+  loggerInstance: { warn: (msg: string, ...args: unknown[]) => void } = logger
+): void {
+  if (result.recovered && result.source !== 'default') {
+    loggerInstance.warn(`${identifier} was recovered from ${result.source}: ${result.error}`);
+  }
+}
+
+/**
+ * Read JSON file with automatic recovery from backups.
+ *
+ * This function attempts to read a JSON file with fallback to backups:
+ * 1. Try to read the main file
+ * 2. If corrupted, check for temp files (.tmp.*) that might have valid data
+ * 3. If no valid temp file, try backup files (.bak1, .bak2, .bak3)
+ * 4. If all fail, return the default value
+ *
+ * Optionally restores the main file from a valid backup (autoRestore: true).
+ *
+ * @param filePath - Absolute path to the file
+ * @param defaultValue - Value to return if no valid data found
+ * @param options - Recovery options
+ * @returns Result containing the data and recovery information
+ *
+ * @example
+ * ```typescript
+ * const result = await readJsonWithRecovery('/path/to/config.json', { version: 1 });
+ * if (result.recovered) {
+ *   console.log(`Recovered from ${result.source}: ${result.error}`);
+ * }
+ * const config = result.data;
+ * ```
+ */
+export async function readJsonWithRecovery<T>(
+  filePath: string,
+  defaultValue: T,
+  options: ReadJsonRecoveryOptions = {}
+): Promise<ReadJsonRecoveryResult<T>> {
+  const { maxBackups = 3, autoRestore = true } = options;
+  const resolvedPath = path.resolve(filePath);
+  const dirPath = path.dirname(resolvedPath);
+  const fileName = path.basename(resolvedPath);
+
+  // Try to read the main file first
+  try {
+    const content = (await secureFs.readFile(resolvedPath, 'utf-8')) as string;
+    const data = JSON.parse(content) as T;
+    return { data, recovered: false, source: 'main' };
+  } catch (mainError) {
+    const nodeError = mainError as NodeJS.ErrnoException;
+    const errorMessage =
+      nodeError.code === 'ENOENT'
+        ? 'File does not exist'
+        : `Failed to parse: ${mainError instanceof Error ? mainError.message : String(mainError)}`;
+
+    // If file doesn't exist, check for temp files or backups
+    logger.warn(`Main file ${resolvedPath} unavailable: ${errorMessage}`);
+
+    // Try to find and recover from temp files first (in case of interrupted write)
+    try {
+      const files = (await secureFs.readdir(dirPath)) as string[];
+      const tempFiles = files
+        .filter((f: string) => f.startsWith(`${fileName}.tmp.`))
+        .sort()
+        .reverse(); // Most recent first
+
+      for (const tempFile of tempFiles) {
+        const tempPath = path.join(dirPath, tempFile);
+        try {
+          const content = (await secureFs.readFile(tempPath, 'utf-8')) as string;
+          const data = JSON.parse(content) as T;
+
+          logger.info(`Recovered data from temp file: ${tempPath}`);
+
+          // Optionally restore main file from temp
+          if (autoRestore) {
+            try {
+              await secureFs.rename(tempPath, resolvedPath);
+              logger.info(`Restored main file from temp: ${tempPath}`);
+            } catch (restoreError) {
+              logger.warn(`Failed to restore main file from temp: ${restoreError}`);
+            }
+          }
+
+          return { data, recovered: true, source: 'temp', error: errorMessage };
+        } catch {
+          // This temp file is also corrupted, try next
+          continue;
+        }
+      }
+    } catch {
+      // Could not read directory, skip temp file check
+    }
+
+    // Try backup files (.bak1, .bak2, .bak3)
+    for (let i = 1; i <= maxBackups; i++) {
+      const backupPath = `${resolvedPath}.bak${i}`;
+      try {
+        const content = (await secureFs.readFile(backupPath, 'utf-8')) as string;
+        const data = JSON.parse(content) as T;
+
+        logger.info(`Recovered data from backup: ${backupPath}`);
+
+        // Optionally restore main file from backup
+        if (autoRestore) {
+          try {
+            await secureFs.copyFile(backupPath, resolvedPath);
+            logger.info(`Restored main file from backup: ${backupPath}`);
+          } catch (restoreError) {
+            logger.warn(`Failed to restore main file from backup: ${restoreError}`);
+          }
+        }
+
+        return { data, recovered: true, source: 'backup', error: errorMessage };
+      } catch {
+        // This backup doesn't exist or is corrupted, try next
+        continue;
+      }
+    }
+
+    // All recovery attempts failed, return default
+    logger.warn(`All recovery attempts failed for ${resolvedPath}, using default value`);
+    return { data: defaultValue, recovered: true, source: 'default', error: errorMessage };
+  }
+}
diff --git a/temp_repo/libs/utils/src/context-loader.ts b/temp_repo/libs/utils/src/context-loader.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9f68e23baa234a0d98d34950e38a3f8adc0992a9
--- /dev/null
+++ b/temp_repo/libs/utils/src/context-loader.ts
@@ -0,0 +1,490 @@
+/**
+ * Context Loader - Loads project context files for agent prompts
+ *
+ * Provides a shared utility to load context files from .automaker/context/
+ * and memory files from .automaker/memory/, formatting them as system prompt
+ * content. Used by both auto-mode-service and agent-service to ensure all
+ * agents are aware of project context and past learnings.
+ *
+ * Context files contain project-specific rules, conventions, and guidelines
+ * that agents must follow when working on the project.
+ *
+ * Memory files contain learnings from past agent work, including decisions,
+ * gotchas, and patterns that should inform future work.
+ */
+
+import path from 'path';
+import { secureFs } from '@automaker/platform';
+import {
+  getMemoryDir,
+  parseFrontmatter,
+  initializeMemoryFolder,
+  extractTerms,
+  calculateUsageScore,
+  countMatches,
+  incrementUsageStat,
+  type MemoryFsModule,
+  type MemoryMetadata,
+} from './memory-loader.js';
+
+/**
+ * Metadata structure for context files
+ * Stored in {projectPath}/.automaker/context/context-metadata.json
+ */
+export interface ContextMetadata {
+  files: Record<string, { description: string }>;
+}
+
+/**
+ * Individual context file with metadata
+ */
+export interface ContextFileInfo {
+  name: string;
+  path: string;
+  content: string;
+  description?: string;
+}
+
+/**
+ * Memory file info (from .automaker/memory/)
+ */
+export interface MemoryFileInfo {
+  name: string;
+  path: string;
+  content: string;
+  category: string;
+}
+
+/**
+ * Result of loading context files
+ */
+export interface ContextFilesResult {
+  files: ContextFileInfo[];
+  memoryFiles: MemoryFileInfo[];
+  formattedPrompt: string;
+}
+
+/**
+ * File system module interface for context loading
+ * Compatible with secureFs from @automaker/platform
+ * Includes write methods needed for memory initialization
+ */
+export interface ContextFsModule {
+  access: (path: string) => Promise<void>;
+  readdir: (path: string) => Promise<string[]>;
+  readFile: (path: string, encoding?: BufferEncoding) => Promise<string | Buffer>;
+  // Write methods needed for memory operations
+  writeFile: (path: string, content: string) => Promise<void>;
+  mkdir: (path: string, options?: { recursive?: boolean }) => Promise<string | undefined>;
+  appendFile: (path: string, content: string) => Promise<void>;
+}
+
+/**
+ * Task context for smart memory selection
+ */
+export interface TaskContext {
+  /** Title or name of the current task/feature */
+  title: string;
+  /** Description of what the task involves */
+  description?: string;
+}
+
+/**
+ * Options for loading context files
+ */
+export interface LoadContextFilesOptions {
+  /** Project path to load context from */
+  projectPath: string;
+  /** Optional custom secure fs module (for dependency injection) */
+  fsModule?: ContextFsModule;
+  /** Whether to include context files from .automaker/context/ (default: true) */
+  includeContextFiles?: boolean;
+  /** Whether to include memory files from .automaker/memory/ (default: true) */
+  includeMemory?: boolean;
+  /** Whether to initialize memory folder if it doesn't exist (default: true) */
+  initializeMemory?: boolean;
+  /** Task context for smart memory selection - if not provided, only loads high-importance files */
+  taskContext?: TaskContext;
+  /** Maximum number of memory files to load (default: 5) */
+  maxMemoryFiles?: number;
+}
+
+/**
+ * Get the context directory path for a project
+ */
+function getContextDir(projectPath: string): string {
+  return path.join(projectPath, '.automaker', 'context');
+}
+
+/**
+ * Load context metadata from the metadata file
+ */
+async function loadContextMetadata(
+  contextDir: string,
+  fsModule: ContextFsModule
+): Promise<ContextMetadata> {
+  const metadataPath = path.join(contextDir, 'context-metadata.json');
+  try {
+    const content = await fsModule.readFile(metadataPath, 'utf-8');
+    return JSON.parse(content as string);
+  } catch {
+    // Metadata file doesn't exist yet - that's fine
+    return { files: {} };
+  }
+}
+
+/**
+ * Format a single context file entry for the prompt
+ */
+function formatContextFileEntry(file: ContextFileInfo): string {
+  const header = `## ${file.name}`;
+  const pathInfo = `**Path:** \`${file.path}\``;
+
+  let descriptionInfo = '';
+  if (file.description) {
+    descriptionInfo = `\n**Purpose:** ${file.description}`;
+  }
+
+  return `${header}\n${pathInfo}${descriptionInfo}\n\n${file.content}`;
+}
+
+/**
+ * Build the formatted system prompt from context files
+ */
+function buildContextPrompt(files: ContextFileInfo[]): string {
+  if (files.length === 0) {
+    return '';
+  }
+
+  const formattedFiles = files.map(formatContextFileEntry);
+
+  return `# Project Context Files
+
+The following context files provide project-specific rules, conventions, and guidelines.
+Each file serves a specific purpose - use the description to understand when to reference it.
+If you need more details about a context file, you can read the full file at the path provided.
+
+**IMPORTANT**: You MUST follow the rules and conventions specified in these files.
+- Follow ALL commands exactly as shown (e.g., if the project uses \`pnpm\`, NEVER use \`npm\` or \`npx\`)
+- Follow ALL coding conventions, commit message formats, and architectural patterns specified
+- Reference these rules before running ANY shell commands or making commits
+
+---
+
+${formattedFiles.join('\n\n---\n\n')}
+
+---
+
+**REMINDER**: Before taking any action, verify you are following the conventions specified above.
+`;
+}
+
+/**
+ * Load context files from a project's .automaker/context/ directory
+ * and optionally memory files from .automaker/memory/
+ *
+ * This function loads all .md and .txt files from the context directory,
+ * along with their metadata (descriptions), and formats them into a
+ * system prompt that can be prepended to agent prompts.
+ *
+ * By default, it also loads memory files containing learnings from past
+ * agent work, which helps agents make better decisions.
+ *
+ * @param options - Configuration options
+ * @returns Promise resolving to context files, memory files, and formatted prompt
+ *
+ * @example
+ * ```typescript
+ * const { formattedPrompt, files, memoryFiles } = await loadContextFiles({
+ *   projectPath: '/path/to/project'
+ * });
+ *
+ * // Use as system prompt
+ * const executeOptions = {
+ *   prompt: userPrompt,
+ *   systemPrompt: formattedPrompt,
+ * };
+ * ```
+ */
+export async function loadContextFiles(
+  options: LoadContextFilesOptions
+): Promise<ContextFilesResult> {
+  const {
+    projectPath,
+    fsModule = secureFs,
+    includeContextFiles = true,
+    includeMemory = true,
+    initializeMemory = true,
+    taskContext,
+    maxMemoryFiles = 5,
+  } = options;
+  const contextDir = path.resolve(getContextDir(projectPath));
+
+  const files: ContextFileInfo[] = [];
+  const memoryFiles: MemoryFileInfo[] = [];
+
+  // Load context files if enabled
+  if (includeContextFiles) {
+    try {
+      // Check if directory exists
+      await fsModule.access(contextDir);
+
+      // Read directory contents
+      const allFiles = await fsModule.readdir(contextDir);
+
+      // Filter for text-based context files (case-insensitive for cross-platform)
+      const textFiles = allFiles.filter((f) => {
+        const lower = f.toLowerCase();
+        return (lower.endsWith('.md') || lower.endsWith('.txt')) && f !== 'context-metadata.json';
+      });
+
+      if (textFiles.length > 0) {
+        // Load metadata for descriptions
+        const metadata = await loadContextMetadata(contextDir, fsModule);
+
+        // Load each file with its content and metadata
+        for (const fileName of textFiles) {
+          const filePath = path.join(contextDir, fileName);
+          try {
+            const content = await fsModule.readFile(filePath, 'utf-8');
+            files.push({
+              name: fileName,
+              path: filePath,
+              content: content as string,
+              description: metadata.files[fileName]?.description,
+            });
+          } catch (error) {
+            console.warn(`[ContextLoader] Failed to read context file ${fileName}:`, error);
+          }
+        }
+      }
+    } catch {
+      // Context directory doesn't exist or is inaccessible - that's fine
+    }
+  }
+
+  // Load memory files if enabled (with smart selection)
+  if (includeMemory) {
+    const memoryDir = getMemoryDir(projectPath);
+
+    // Initialize memory folder if needed
+    if (initializeMemory) {
+      try {
+        await initializeMemoryFolder(projectPath, fsModule as MemoryFsModule);
+      } catch {
+        // Initialization failed, continue without memory
+      }
+    }
+
+    try {
+      await fsModule.access(memoryDir);
+      const allMemoryFiles = await fsModule.readdir(memoryDir);
+
+      // Filter for markdown memory files (except _index.md, case-insensitive)
+      const memoryMdFiles = allMemoryFiles.filter((f) => {
+        const lower = f.toLowerCase();
+        return lower.endsWith('.md') && lower !== '_index.md';
+      });
+
+      // Extract terms from task context for matching
+      const taskTerms = taskContext
+        ? extractTerms(taskContext.title + ' ' + (taskContext.description || ''))
+        : [];
+
+      // Score and load memory files
+      const scoredFiles: Array<{
+        fileName: string;
+        filePath: string;
+        body: string;
+        metadata: MemoryMetadata;
+        score: number;
+      }> = [];
+
+      for (const fileName of memoryMdFiles) {
+        const filePath = path.join(memoryDir, fileName);
+        try {
+          const rawContent = await fsModule.readFile(filePath, 'utf-8');
+          const { metadata, body } = parseFrontmatter(rawContent as string);
+
+          // Skip empty files
+          if (!body.trim()) continue;
+
+          // Calculate relevance score
+          let score = 0;
+
+          if (taskTerms.length > 0) {
+            // Match task terms against file metadata
+            const tagScore = countMatches(metadata.tags, taskTerms) * 3;
+            const relevantToScore = countMatches(metadata.relevantTo, taskTerms) * 2;
+            const summaryTerms = extractTerms(metadata.summary);
+            const summaryScore = countMatches(summaryTerms, taskTerms);
+            // Split category name on hyphens/underscores for better matching
+            // e.g., "authentication-decisions" matches "authentication"
+            const categoryTerms = fileName
+              .replace('.md', '')
+              .split(/[-_]/)
+              .filter((t) => t.length > 2);
+            const categoryScore = countMatches(categoryTerms, taskTerms) * 4;
+
+            // Usage-based scoring (files that helped before rank higher)
+            const usageScore = calculateUsageScore(metadata.usageStats);
+
+            score =
+              (tagScore + relevantToScore + summaryScore + categoryScore) *
+              metadata.importance *
+              usageScore;
+          } else {
+            // No task context - use importance as score
+            score = metadata.importance;
+          }
+
+          scoredFiles.push({ fileName, filePath, body, metadata, score });
+        } catch (error) {
+          console.warn(`[ContextLoader] Failed to read memory file ${fileName}:`, error);
+        }
+      }
+
+      // Sort by score (highest first)
+      scoredFiles.sort((a, b) => b.score - a.score);
+
+      // Select files to load:
+      // 1. Always include gotchas.md if it exists (unless maxMemoryFiles=0)
+      // 2. Include high-importance files (importance >= 0.9)
+      // 3. Include top scoring files up to maxMemoryFiles
+      const selectedFiles = new Set<string>();
+
+      // Skip selection if maxMemoryFiles is 0
+      if (maxMemoryFiles > 0) {
+        // Always include gotchas.md
+        const gotchasFile = scoredFiles.find((f) => f.fileName === 'gotchas.md');
+        if (gotchasFile) {
+          selectedFiles.add('gotchas.md');
+        }
+
+        // Add high-importance files
+        for (const file of scoredFiles) {
+          if (file.metadata.importance >= 0.9 && selectedFiles.size < maxMemoryFiles) {
+            selectedFiles.add(file.fileName);
+          }
+        }
+
+        // Add top scoring files (if we have task context and room)
+        if (taskTerms.length > 0) {
+          for (const file of scoredFiles) {
+            if (file.score > 0 && selectedFiles.size < maxMemoryFiles) {
+              selectedFiles.add(file.fileName);
+            }
+          }
+        }
+      }
+
+      // Load selected files and increment loaded stat
+      for (const file of scoredFiles) {
+        if (selectedFiles.has(file.fileName)) {
+          memoryFiles.push({
+            name: file.fileName,
+            path: file.filePath,
+            content: file.body,
+            category: file.fileName.replace('.md', ''),
+          });
+
+          // Increment the 'loaded' stat for this file (CRITICAL FIX)
+          // This makes calculateUsageScore work correctly
+          try {
+            await incrementUsageStat(file.filePath, 'loaded', fsModule as MemoryFsModule);
+          } catch {
+            // Non-critical - continue even if stat update fails
+          }
+        }
+      }
+
+      if (memoryFiles.length > 0) {
+        const selectedNames = memoryFiles.map((f) => f.category).join(', ');
+        console.log(`[ContextLoader] Selected memory files: ${selectedNames}`);
+      }
+    } catch {
+      // Memory directory doesn't exist - that's fine
+    }
+  }
+
+  // Build combined prompt
+  const contextPrompt = buildContextPrompt(files);
+  const memoryPrompt = buildMemoryPrompt(memoryFiles);
+  const formattedPrompt = [contextPrompt, memoryPrompt].filter(Boolean).join('\n\n');
+
+  const loadedItems = [];
+  if (files.length > 0) {
+    loadedItems.push(`${files.length} context file(s)`);
+  }
+  if (memoryFiles.length > 0) {
+    loadedItems.push(`${memoryFiles.length} memory file(s)`);
+  }
+  if (loadedItems.length > 0) {
+    console.log(`[ContextLoader] Loaded ${loadedItems.join(' and ')}`);
+  }
+
+  return { files, memoryFiles, formattedPrompt };
+}
+
+/**
+ * Build a formatted prompt from memory files
+ */
+function buildMemoryPrompt(memoryFiles: MemoryFileInfo[]): string {
+  if (memoryFiles.length === 0) {
+    return '';
+  }
+
+  const sections = memoryFiles.map((file) => {
+    return `## ${file.category.toUpperCase()}
+
+${file.content}`;
+  });
+
+  return `# Project Memory
+
+The following learnings and decisions from previous work are available.
+**IMPORTANT**: Review these carefully before making changes that could conflict with past decisions.
+
+---
+
+${sections.join('\n\n---\n\n')}
+
+---
+`;
+}
+
+/**
+ * Get a summary of available context files (names and descriptions only)
+ * Useful for informing the agent about what context is available without
+ * loading full content.
+ */
+export async function getContextFilesSummary(
+  options: LoadContextFilesOptions
+): Promise<Array<{ name: string; path: string; description?: string }>> {
+  const { projectPath, fsModule = secureFs } = options;
+  const contextDir = path.resolve(getContextDir(projectPath));
+
+  try {
+    await fsModule.access(contextDir);
+    const allFiles = await fsModule.readdir(contextDir);
+
+    const textFiles = allFiles.filter((f) => {
+      const lower = f.toLowerCase();
+      return (lower.endsWith('.md') || lower.endsWith('.txt')) && f !== 'context-metadata.json';
+    });
+
+    if (textFiles.length === 0) {
+      return [];
+    }
+
+    const metadata = await loadContextMetadata(contextDir, fsModule);
+
+    return textFiles.map((fileName) => ({
+      name: fileName,
+      path: path.join(contextDir, fileName),
+      description: metadata.files[fileName]?.description,
+    }));
+  } catch {
+    return [];
+  }
+}
diff --git a/temp_repo/libs/utils/src/conversation-utils.ts b/temp_repo/libs/utils/src/conversation-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..112c5b76b641700cef451f3cdd064f419f9bf4a3
--- /dev/null
+++ b/temp_repo/libs/utils/src/conversation-utils.ts
@@ -0,0 +1,95 @@
+/**
+ * Conversation history utilities for processing message history
+ *
+ * Provides standardized conversation history handling:
+ * - Extract text from content (string or array format)
+ * - Normalize content blocks to array format
+ * - Format history as plain text for CLI-based providers
+ * - Convert history to Claude SDK message format
+ */
+
+import type { ConversationMessage } from '@automaker/types';
+
+/**
+ * Extract plain text from message content (handles both string and array formats)
+ *
+ * @param content - Message content (string or array of content blocks)
+ * @returns Extracted text content
+ */
+export function extractTextFromContent(
+  content: string | Array<{ type: string; text?: string; source?: object }>
+): string {
+  if (typeof content === 'string') {
+    return content;
+  }
+
+  // Extract text blocks only
+  return content
+    .filter((block) => block.type === 'text')
+    .map((block) => block.text || '')
+    .join('\n');
+}
+
+/**
+ * Normalize message content to array format
+ *
+ * @param content - Message content (string or array)
+ * @returns Content as array of blocks
+ */
+export function normalizeContentBlocks(
+  content: string | Array<{ type: string; text?: string; source?: object }>
+): Array<{ type: string; text?: string; source?: object }> {
+  if (Array.isArray(content)) {
+    return content;
+  }
+  return [{ type: 'text', text: content }];
+}
+
+/**
+ * Format conversation history as plain text for CLI-based providers
+ *
+ * @param history - Array of conversation messages
+ * @returns Formatted text with role labels
+ */
+export function formatHistoryAsText(history: ConversationMessage[]): string {
+  if (history.length === 0) {
+    return '';
+  }
+
+  let historyText = 'Previous conversation:\n\n';
+
+  for (const msg of history) {
+    const contentText = extractTextFromContent(msg.content);
+    const role = msg.role === 'user' ? 'User' : 'Assistant';
+    historyText += `${role}: ${contentText}\n\n`;
+  }
+
+  historyText += '---\n\n';
+  return historyText;
+}
+
+/**
+ * Convert conversation history to Claude SDK message format
+ *
+ * @param history - Array of conversation messages
+ * @returns Array of Claude SDK formatted messages
+ */
+export function convertHistoryToMessages(history: ConversationMessage[]): Array<{
+  type: 'user' | 'assistant';
+  session_id: string;
+  message: {
+    role: 'user' | 'assistant';
+    content: Array<{ type: string; text?: string; source?: object }>;
+  };
+  parent_tool_use_id: null;
+}> {
+  return history.map((historyMsg) => ({
+    type: historyMsg.role,
+    session_id: '',
+    message: {
+      role: historyMsg.role,
+      content: normalizeContentBlocks(historyMsg.content),
+    },
+    parent_tool_use_id: null,
+  }));
+}
diff --git a/temp_repo/libs/utils/src/debounce.ts b/temp_repo/libs/utils/src/debounce.ts
new file mode 100644
index 0000000000000000000000000000000000000000..211fb8ff931c2a4906014d231efedb6e5dfd3c2d
--- /dev/null
+++ b/temp_repo/libs/utils/src/debounce.ts
@@ -0,0 +1,280 @@
+/**
+ * Debounce and throttle utilities for rate-limiting function calls
+ */
+
+/**
+ * Options for the debounce function
+ */
+export interface DebounceOptions {
+  /**
+   * If true, call the function immediately on the first invocation (leading edge)
+   * @default false
+   */
+  leading?: boolean;
+
+  /**
+   * If true, call the function after the delay on the last invocation (trailing edge)
+   * @default true
+   */
+  trailing?: boolean;
+
+  /**
+   * Maximum time to wait before forcing invocation (useful for continuous events)
+   * If set, the function will be called at most every `maxWait` milliseconds
+   */
+  maxWait?: number;
+}
+
+/**
+ * The return type of the debounce function with additional control methods
+ */
+export interface DebouncedFunction<T extends (...args: unknown[]) => unknown> {
+  /**
+   * Call the debounced function
+   */
+  (...args: Parameters<T>): void;
+
+  /**
+   * Cancel any pending invocation
+   */
+  cancel(): void;
+
+  /**
+   * Immediately invoke any pending function call
+   */
+  flush(): void;
+
+  /**
+   * Check if there's a pending invocation
+   */
+  pending(): boolean;
+}
+
+/**
+ * Creates a debounced version of a function that delays invoking the function
+ * until after `wait` milliseconds have elapsed since the last time the debounced
+ * function was invoked.
+ *
+ * Useful for rate-limiting events like window resize, scroll, or input changes.
+ *
+ * @param fn - The function to debounce
+ * @param wait - The number of milliseconds to delay
+ * @param options - Optional configuration
+ * @returns A debounced version of the function with cancel, flush, and pending methods
+ *
+ * @example
+ * // Basic usage - save input after user stops typing for 300ms
+ * const saveInput = debounce((value: string) => {
+ *   api.save(value);
+ * }, 300);
+ *
+ * input.addEventListener('input', (e) => saveInput(e.target.value));
+ *
+ * @example
+ * // With leading edge - execute immediately on first call
+ * const handleClick = debounce(() => {
+ *   submitForm();
+ * }, 1000, { leading: true, trailing: false });
+ *
+ * @example
+ * // With maxWait - ensure function runs at least every 5 seconds during continuous input
+ * const autoSave = debounce((content: string) => {
+ *   saveToServer(content);
+ * }, 1000, { maxWait: 5000 });
+ */
+export function debounce<T extends (...args: unknown[]) => unknown>(
+  fn: T,
+  wait: number,
+  options: DebounceOptions = {}
+): DebouncedFunction<T> {
+  const { leading = false, trailing = true, maxWait } = options;
+
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  let maxTimeoutId: ReturnType<typeof setTimeout> | null = null;
+  let lastArgs: Parameters<T> | null = null;
+  let lastCallTime: number | null = null;
+  let lastInvokeTime = 0;
+
+  // Validate options
+  if (maxWait !== undefined && maxWait < wait) {
+    throw new Error('maxWait must be greater than or equal to wait');
+  }
+
+  function invokeFunc(): void {
+    const args = lastArgs;
+    lastArgs = null;
+    lastInvokeTime = Date.now();
+
+    if (args !== null) {
+      fn(...args);
+    }
+  }
+
+  function shouldInvoke(time: number): boolean {
+    const timeSinceLastCall = lastCallTime === null ? 0 : time - lastCallTime;
+    const timeSinceLastInvoke = time - lastInvokeTime;
+
+    // First call, or wait time has passed, or maxWait exceeded
+    return (
+      lastCallTime === null ||
+      timeSinceLastCall >= wait ||
+      timeSinceLastCall < 0 ||
+      (maxWait !== undefined && timeSinceLastInvoke >= maxWait)
+    );
+  }
+
+  function timerExpired(): void {
+    const time = Date.now();
+
+    if (shouldInvoke(time)) {
+      trailingEdge();
+      return;
+    }
+
+    // Restart the timer with remaining time
+    const timeSinceLastCall = lastCallTime === null ? 0 : time - lastCallTime;
+    const timeSinceLastInvoke = time - lastInvokeTime;
+    const timeWaiting = wait - timeSinceLastCall;
+
+    const remainingWait =
+      maxWait !== undefined ? Math.min(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+
+    timeoutId = setTimeout(timerExpired, remainingWait);
+  }
+
+  function trailingEdge(): void {
+    timeoutId = null;
+
+    if (trailing && lastArgs !== null) {
+      invokeFunc();
+    }
+
+    lastArgs = null;
+  }
+
+  function leadingEdge(time: number): void {
+    lastInvokeTime = time;
+
+    // Start timer for trailing edge
+    timeoutId = setTimeout(timerExpired, wait);
+
+    // Invoke leading edge
+    if (leading) {
+      invokeFunc();
+    }
+  }
+
+  function cancel(): void {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    if (maxTimeoutId !== null) {
+      clearTimeout(maxTimeoutId);
+      maxTimeoutId = null;
+    }
+    lastArgs = null;
+    lastCallTime = null;
+    lastInvokeTime = 0;
+  }
+
+  function flush(): void {
+    if (timeoutId !== null) {
+      invokeFunc();
+      cancel();
+    }
+  }
+
+  function pending(): boolean {
+    return timeoutId !== null;
+  }
+
+  function debounced(...args: Parameters<T>): void {
+    const time = Date.now();
+    const isInvoking = shouldInvoke(time);
+
+    lastArgs = args;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timeoutId === null) {
+        leadingEdge(time);
+        return;
+      }
+
+      // Handle maxWait case
+      if (maxWait !== undefined) {
+        timeoutId = setTimeout(timerExpired, wait);
+        invokeFunc();
+        return;
+      }
+    }
+
+    if (timeoutId === null) {
+      timeoutId = setTimeout(timerExpired, wait);
+    }
+  }
+
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  debounced.pending = pending;
+
+  return debounced;
+}
+
+/**
+ * Options for the throttle function
+ */
+export interface ThrottleOptions {
+  /**
+   * If true, call the function on the leading edge
+   * @default true
+   */
+  leading?: boolean;
+
+  /**
+   * If true, call the function on the trailing edge
+   * @default true
+   */
+  trailing?: boolean;
+}
+
+/**
+ * Creates a throttled version of a function that only invokes the function
+ * at most once per every `wait` milliseconds.
+ *
+ * Useful for rate-limiting events like scroll or mousemove where you want
+ * regular updates but not on every event.
+ *
+ * @param fn - The function to throttle
+ * @param wait - The number of milliseconds to throttle invocations to
+ * @param options - Optional configuration
+ * @returns A throttled version of the function with cancel, flush, and pending methods
+ *
+ * @example
+ * // Throttle scroll handler to run at most every 100ms
+ * const handleScroll = throttle(() => {
+ *   updateScrollPosition();
+ * }, 100);
+ *
+ * window.addEventListener('scroll', handleScroll);
+ *
+ * @example
+ * // Throttle with leading edge only (no trailing call)
+ * const submitOnce = throttle(() => {
+ *   submitForm();
+ * }, 1000, { trailing: false });
+ */
+export function throttle<T extends (...args: unknown[]) => unknown>(
+  fn: T,
+  wait: number,
+  options: ThrottleOptions = {}
+): DebouncedFunction<T> {
+  const { leading = true, trailing = true } = options;
+
+  return debounce(fn, wait, {
+    leading,
+    trailing,
+    maxWait: wait,
+  });
+}
diff --git a/temp_repo/libs/utils/src/error-handler.ts b/temp_repo/libs/utils/src/error-handler.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bd1e564bf1dfd0ae2bce5cf48f1dd0e122981958
--- /dev/null
+++ b/temp_repo/libs/utils/src/error-handler.ts
@@ -0,0 +1,319 @@
+/**
+ * Error handling utilities for standardized error classification
+ *
+ * Provides utilities for:
+ * - Detecting abort/cancellation errors
+ * - Detecting authentication errors
+ * - Detecting rate limit and quota exhaustion errors
+ * - Classifying errors by type
+ * - Generating user-friendly error messages
+ */
+
+import type { ErrorType, ErrorInfo } from '@automaker/types';
+
+/**
+ * Check if an error is an abort/cancellation error
+ *
+ * @param error - The error to check
+ * @returns True if the error is an abort error
+ */
+export function isAbortError(error: unknown): boolean {
+  return error instanceof Error && (error.name === 'AbortError' || error.message.includes('abort'));
+}
+
+/**
+ * Check if an error is a user-initiated cancellation
+ *
+ * @param errorMessage - The error message to check
+ * @returns True if the error is a user-initiated cancellation
+ */
+export function isCancellationError(errorMessage: string): boolean {
+  const lowerMessage = errorMessage.toLowerCase();
+  return (
+    lowerMessage.includes('cancelled') ||
+    lowerMessage.includes('canceled') ||
+    lowerMessage.includes('stopped') ||
+    lowerMessage.includes('aborted')
+  );
+}
+
+/**
+ * Check if an error is an authentication/API key error
+ *
+ * @param errorMessage - The error message to check
+ * @returns True if the error is authentication-related
+ */
+export function isAuthenticationError(errorMessage: string): boolean {
+  return (
+    errorMessage.includes('Authentication failed') ||
+    errorMessage.includes('Invalid API key') ||
+    errorMessage.includes('authentication_failed') ||
+    errorMessage.includes('Fix external API key')
+  );
+}
+
+/**
+ * Check if an error is a rate limit error (429 Too Many Requests)
+ *
+ * @param error - The error to check
+ * @returns True if the error is a rate limit error
+ */
+export function isRateLimitError(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : String(error || '');
+  return message.includes('429') || message.includes('rate_limit');
+}
+
+/**
+ * Check if an error indicates quota/usage exhaustion
+ * This includes session limits, weekly limits, credit/billing issues, and overloaded errors
+ *
+ * @param error - The error to check
+ * @returns True if the error indicates quota exhaustion
+ */
+export function isQuotaExhaustedError(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : String(error || '');
+  const lowerMessage = message.toLowerCase();
+
+  // Check for overloaded/capacity errors
+  if (
+    lowerMessage.includes('overloaded') ||
+    lowerMessage.includes('overloaded_error') ||
+    lowerMessage.includes('capacity')
+  ) {
+    return true;
+  }
+
+  // Check for usage/quota limit patterns
+  if (
+    lowerMessage.includes('limit reached') ||
+    lowerMessage.includes('usage limit') ||
+    lowerMessage.includes('quota exceeded') ||
+    lowerMessage.includes('quota_exceeded') ||
+    lowerMessage.includes('session limit') ||
+    lowerMessage.includes('weekly limit') ||
+    lowerMessage.includes('monthly limit')
+  ) {
+    return true;
+  }
+
+  // Check for billing/credit issues
+  if (
+    lowerMessage.includes('credit balance') ||
+    lowerMessage.includes('insufficient credits') ||
+    lowerMessage.includes('insufficient balance') ||
+    lowerMessage.includes('no credits') ||
+    lowerMessage.includes('out of credits') ||
+    lowerMessage.includes('billing') ||
+    lowerMessage.includes('payment required')
+  ) {
+    return true;
+  }
+
+  // Check for upgrade prompts (often indicates limit reached)
+  if (lowerMessage.includes('/upgrade') || lowerMessage.includes('extra-usage')) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Check if an error indicates a model-not-found or model access issue
+ *
+ * @param error - The error to check
+ * @returns True if the error indicates the model doesn't exist or user lacks access
+ */
+export function isModelNotFoundError(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : String(error || '');
+  const lowerMessage = message.toLowerCase();
+
+  return (
+    lowerMessage.includes('does not exist or you do not have access') ||
+    lowerMessage.includes('model_not_found') ||
+    lowerMessage.includes('invalid_model') ||
+    (lowerMessage.includes('model') &&
+      (lowerMessage.includes('does not exist') || lowerMessage.includes('not found')))
+  );
+}
+
+/**
+ * Check if an error indicates a stream disconnection
+ *
+ * @param error - The error to check
+ * @returns True if the error indicates the stream was disconnected
+ */
+export function isStreamDisconnectedError(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : String(error || '');
+  const lowerMessage = message.toLowerCase();
+
+  return (
+    lowerMessage.includes('stream disconnected') ||
+    lowerMessage.includes('stream ended') ||
+    lowerMessage.includes('connection reset') ||
+    lowerMessage.includes('socket hang up') ||
+    lowerMessage.includes('econnreset')
+  );
+}
+
+/**
+ * Extract retry-after duration from rate limit error
+ *
+ * @param error - The error to extract retry-after from
+ * @returns Number of seconds to wait, or undefined if not found
+ */
+export function extractRetryAfter(error: unknown): number | undefined {
+  const message = error instanceof Error ? error.message : String(error || '');
+
+  // Try to extract from Retry-After header format
+  const retryMatch = message.match(/retry[_-]?after[:\s]+(\d+)/i);
+  if (retryMatch) {
+    return parseInt(retryMatch[1], 10);
+  }
+
+  // Try to extract from error message patterns
+  const waitMatch = message.match(/wait[:\s]+(\d+)\s*(?:second|sec|s)/i);
+  if (waitMatch) {
+    return parseInt(waitMatch[1], 10);
+  }
+
+  return undefined;
+}
+
+/**
+ * Classify an error into a specific type
+ *
+ * @param error - The error to classify
+ * @returns Classified error information
+ */
+export function classifyError(error: unknown): ErrorInfo {
+  const message = error instanceof Error ? error.message : String(error || 'Unknown error');
+  const isAbort = isAbortError(error);
+  const isAuth = isAuthenticationError(message);
+  const isCancellation = isCancellationError(message);
+  const isRateLimit = isRateLimitError(error);
+  const isQuotaExhausted = isQuotaExhaustedError(error);
+  const isModelNotFound = isModelNotFoundError(error);
+  const isStreamDisconnected = isStreamDisconnectedError(error);
+  const retryAfter = isRateLimit ? (extractRetryAfter(error) ?? 60) : undefined;
+
+  let type: ErrorType;
+  if (isAuth) {
+    type = 'authentication';
+  } else if (isModelNotFound) {
+    type = 'model_not_found';
+  } else if (isStreamDisconnected) {
+    type = 'stream_disconnected';
+  } else if (isQuotaExhausted) {
+    // Quota exhaustion takes priority over rate limit since it's more specific
+    type = 'quota_exhausted';
+  } else if (isRateLimit) {
+    type = 'rate_limit';
+  } else if (isAbort) {
+    type = 'abort';
+  } else if (isCancellation) {
+    type = 'cancellation';
+  } else if (error instanceof Error) {
+    type = 'execution';
+  } else {
+    type = 'unknown';
+  }
+
+  return {
+    type,
+    message,
+    isAbort,
+    isAuth,
+    isCancellation,
+    isRateLimit,
+    isQuotaExhausted,
+    isModelNotFound,
+    isStreamDisconnected,
+    retryAfter,
+    originalError: error,
+  };
+}
+
+/**
+ * Get a user-friendly error message
+ *
+ * @param error - The error to convert
+ * @returns User-friendly error message
+ */
+export function getUserFriendlyErrorMessage(error: unknown): string {
+  const info = classifyError(error);
+
+  if (info.isAbort) {
+    return 'Operation was cancelled';
+  }
+
+  if (info.isAuth) {
+    return 'Authentication failed. Please check your API key.';
+  }
+
+  if (info.isModelNotFound) {
+    return `Model not available: ${info.message}\n\nSome models require specific subscription plans or authentication methods. Try authenticating with 'codex login' or switch to a different model.`;
+  }
+
+  if (info.isStreamDisconnected) {
+    return `Connection interrupted: ${info.message}\n\nThe stream was disconnected before the response could complete. This may be caused by network issues, model access restrictions, or server timeouts. Try again or switch to a different model.`;
+  }
+
+  if (info.isQuotaExhausted) {
+    return 'Usage limit reached. Auto Mode has been paused. Please wait for your quota to reset or upgrade your plan.';
+  }
+
+  if (info.isRateLimit) {
+    const retryMsg = info.retryAfter
+      ? ` Please wait ${info.retryAfter} seconds before retrying.`
+      : ' Please reduce concurrency or wait before retrying.';
+    return `Rate limit exceeded (429).${retryMsg}`;
+  }
+
+  return info.message;
+}
+
+/**
+ * Extract error message from an unknown error value
+ *
+ * Simple utility for getting a string error message from any error type.
+ * Returns the error's message property if it's an Error, otherwise
+ * converts to string. Used throughout the codebase for consistent
+ * error message extraction.
+ *
+ * @param error - The error value (Error object, string, or unknown)
+ * @returns Error message string
+ *
+ * @example
+ * ```typescript
+ * try {
+ *   throw new Error("Something went wrong");
+ * } catch (error) {
+ *   const message = getErrorMessage(error); // "Something went wrong"
+ * }
+ * ```
+ */
+export function getErrorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : 'Unknown error';
+}
+
+/**
+ * Log an error with a context message to stderr.
+ *
+ * Convenience utility for consistent error logging throughout the codebase.
+ * Outputs a formatted error line to stderr with an ❌ prefix and the context.
+ *
+ * @param error - The error value to log
+ * @param context - Descriptive context message indicating where/why the error occurred
+ *
+ * @example
+ * ```typescript
+ * try {
+ *   await someOperation();
+ * } catch (error) {
+ *   logError(error, 'Failed to perform some operation');
+ * }
+ * ```
+ */
+export function logError(error: unknown, context: string): void {
+  console.error(`❌ ${context}:`, error);
+}
diff --git a/temp_repo/libs/utils/src/fs-utils.ts b/temp_repo/libs/utils/src/fs-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..265805e4168bbc295d8457a5352b6e213d4b9577
--- /dev/null
+++ b/temp_repo/libs/utils/src/fs-utils.ts
@@ -0,0 +1,71 @@
+/**
+ * File system utilities that handle symlinks safely
+ */
+
+import { secureFs } from '@automaker/platform';
+import path from 'path';
+
+/**
+ * Create a directory, handling symlinks safely to avoid ELOOP errors.
+ * If the path already exists as a directory or symlink, returns success.
+ */
+export async function mkdirSafe(dirPath: string): Promise<void> {
+  const resolvedPath = path.resolve(dirPath);
+
+  // Check if path already exists using lstat (doesn't follow symlinks)
+  try {
+    const stats = await secureFs.lstat(resolvedPath);
+    // Guard: some environments (e.g. mocked fs) may return undefined
+    if (stats == null) {
+      // Treat as path does not exist, fall through to create
+    } else if (stats.isDirectory() || stats.isSymbolicLink()) {
+      // Path exists - if it's a directory or symlink, consider it success
+      return;
+    } else {
+      // It's a file - can't create directory
+      throw new Error(`Path exists and is not a directory: ${resolvedPath}`);
+    }
+  } catch (error: any) {
+    // ENOENT means path doesn't exist - we should create it
+    if (error.code !== 'ENOENT') {
+      // Some other error (could be ELOOP in parent path)
+      // If it's ELOOP, the path involves symlinks - don't try to create
+      if (error.code === 'ELOOP') {
+        console.warn(`[fs-utils] Symlink loop detected at ${resolvedPath}, skipping mkdir`);
+        return;
+      }
+      throw error;
+    }
+  }
+
+  // Path doesn't exist, create it
+  try {
+    await secureFs.mkdir(resolvedPath, { recursive: true });
+  } catch (error: any) {
+    // Handle race conditions and symlink issues
+    if (error.code === 'EEXIST' || error.code === 'ELOOP') {
+      return;
+    }
+    throw error;
+  }
+}
+
+/**
+ * Check if a path exists, handling symlinks safely.
+ * Returns true if the path exists as a file, directory, or symlink.
+ */
+export async function existsSafe(filePath: string): Promise<boolean> {
+  try {
+    await secureFs.lstat(filePath);
+    return true;
+  } catch (error: any) {
+    if (error.code === 'ENOENT') {
+      return false;
+    }
+    // ELOOP or other errors - path exists but is problematic
+    if (error.code === 'ELOOP') {
+      return true; // Symlink exists, even if looping
+    }
+    throw error;
+  }
+}
diff --git a/temp_repo/libs/utils/src/git-validation.ts b/temp_repo/libs/utils/src/git-validation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ea33705dc0d9eb9edb5b39cb3b7696fe92a8f140
--- /dev/null
+++ b/temp_repo/libs/utils/src/git-validation.ts
@@ -0,0 +1,73 @@
+/**
+ * Git validation utilities
+ *
+ * Canonical validators for git-related inputs (branch names, etc.)
+ * used across the server codebase.
+ */
+
+/** Maximum allowed length for git branch names */
+export const MAX_BRANCH_NAME_LENGTH = 250;
+
+/**
+ * Validate a git branch name to prevent command injection and ensure
+ * it conforms to safe git ref naming rules.
+ *
+ * Enforces:
+ * - Allowed characters: alphanumeric, dot (.), underscore (_), slash (/), dash (-)
+ * - First character must NOT be a dash (prevents git argument injection via
+ *   names like "-flag" or "--option")
+ * - Rejects path-traversal sequences (..)
+ * - Rejects NUL bytes (\0)
+ * - Enforces a maximum length of {@link MAX_BRANCH_NAME_LENGTH} characters
+ *
+ * @param name - The branch name to validate
+ * @returns `true` when the name is safe to pass to git commands
+ *
+ * @example
+ * ```typescript
+ * isValidBranchName('feature/my-branch');  // true
+ * isValidBranchName('-flag');              // false (starts with dash)
+ * isValidBranchName('a..b');              // false (contains ..)
+ * isValidBranchName('a\0b');             // false (contains NUL)
+ * ```
+ */
+export function isValidBranchName(name: string): boolean {
+  // Must not contain NUL bytes
+  if (name.includes('\0')) return false;
+  // Must not contain path-traversal sequences
+  if (name.includes('..')) return false;
+  // First char must be alphanumeric, dot, underscore, or slash (not dash).
+  // Remaining chars may also include dash.
+  // Must be within the length limit.
+  return /^[a-zA-Z0-9._/][a-zA-Z0-9._\-/]*$/.test(name) && name.length < MAX_BRANCH_NAME_LENGTH;
+}
+
+/**
+ * Validate git remote name to prevent command injection.
+ * Matches the strict validation used in add-remote.ts:
+ * - Rejects empty strings and names that are too long
+ * - Disallows names that start with '-' or '.'
+ * - Forbids the substring '..'
+ * - Rejects '/' characters
+ * - Rejects NUL bytes
+ * - Must consist only of alphanumerics, hyphens, underscores, and dots
+ *
+ * @param name - The remote name to validate
+ * @returns `true` when the name is safe to pass to git commands
+ *
+ * @example
+ * ```typescript
+ * isValidRemoteName('origin');       // true
+ * isValidRemoteName('upstream');     // true
+ * isValidRemoteName('-flag');        // false (starts with dash)
+ * isValidRemoteName('a/b');         // false (contains slash)
+ * ```
+ */
+export function isValidRemoteName(name: string): boolean {
+  if (!name || name.length >= MAX_BRANCH_NAME_LENGTH) return false;
+  if (name.startsWith('-') || name.startsWith('.')) return false;
+  if (name.includes('..')) return false;
+  if (name.includes('/')) return false;
+  if (name.includes('\0')) return false;
+  return /^[a-zA-Z0-9._-]+$/.test(name);
+}
diff --git a/temp_repo/libs/utils/src/image-handler.ts b/temp_repo/libs/utils/src/image-handler.ts
new file mode 100644
index 0000000000000000000000000000000000000000..68c78467dd0b3f09cc4cf35b2c0f7685765b1ec3
--- /dev/null
+++ b/temp_repo/libs/utils/src/image-handler.ts
@@ -0,0 +1,113 @@
+/**
+ * Image handling utilities for processing image files
+ *
+ * Provides utilities for:
+ * - MIME type detection based on file extensions
+ * - Base64 encoding of image files
+ * - Content block generation for Claude SDK format
+ * - Path resolution (relative/absolute)
+ */
+
+import { secureFs } from '@automaker/platform';
+import path from 'path';
+import type { ImageData, ImageContentBlock } from '@automaker/types';
+
+/**
+ * MIME type mapping for image file extensions
+ */
+const IMAGE_MIME_TYPES: Record<string, string> = {
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.png': 'image/png',
+  '.gif': 'image/gif',
+  '.webp': 'image/webp',
+} as const;
+
+/**
+ * Get MIME type for an image file based on extension
+ *
+ * @param imagePath - Path to the image file
+ * @returns MIME type string (defaults to "image/png" for unknown extensions)
+ */
+export function getMimeTypeForImage(imagePath: string): string {
+  const ext = path.extname(imagePath).toLowerCase();
+  return IMAGE_MIME_TYPES[ext] || 'image/png';
+}
+
+/**
+ * Read an image file and convert to base64 with metadata
+ *
+ * @param imagePath - Path to the image file
+ * @returns Promise resolving to image data with base64 encoding
+ * @throws Error if file cannot be read
+ */
+export async function readImageAsBase64(imagePath: string): Promise<ImageData> {
+  const imageBuffer = (await secureFs.readFile(imagePath)) as Buffer;
+  const base64Data = imageBuffer.toString('base64');
+  const mimeType = getMimeTypeForImage(imagePath);
+
+  return {
+    base64: base64Data,
+    mimeType,
+    filename: path.basename(imagePath),
+    originalPath: imagePath,
+  };
+}
+
+/**
+ * Convert image paths to content blocks (Claude SDK format)
+ * Handles both relative and absolute paths
+ *
+ * @param imagePaths - Array of image file paths
+ * @param workDir - Optional working directory for resolving relative paths
+ * @returns Promise resolving to array of image content blocks
+ */
+export async function convertImagesToContentBlocks(
+  imagePaths: string[],
+  workDir?: string
+): Promise<ImageContentBlock[]> {
+  const blocks: ImageContentBlock[] = [];
+
+  for (const imagePath of imagePaths) {
+    try {
+      // Resolve to absolute path if needed
+      const absolutePath =
+        workDir && !path.isAbsolute(imagePath) ? path.join(workDir, imagePath) : imagePath;
+
+      const imageData = await readImageAsBase64(absolutePath);
+
+      blocks.push({
+        type: 'image',
+        source: {
+          type: 'base64',
+          media_type: imageData.mimeType,
+          data: imageData.base64,
+        },
+      });
+    } catch (error) {
+      console.error(`[ImageHandler] Failed to load image ${imagePath}:`, error);
+      // Continue processing other images
+    }
+  }
+
+  return blocks;
+}
+
+/**
+ * Build a list of image paths for text prompts
+ * Formats image paths as a bulleted list for inclusion in text prompts
+ *
+ * @param imagePaths - Array of image file paths
+ * @returns Formatted string with image paths, or empty string if no images
+ */
+export function formatImagePathsForPrompt(imagePaths: string[]): string {
+  if (imagePaths.length === 0) {
+    return '';
+  }
+
+  let text = '\n\nAttached images:\n';
+  for (const imagePath of imagePaths) {
+    text += `- ${imagePath}\n`;
+  }
+  return text;
+}
diff --git a/temp_repo/libs/utils/src/index.ts b/temp_repo/libs/utils/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9bf04ae246ede025beca0f35f5b5628e1add3705
--- /dev/null
+++ b/temp_repo/libs/utils/src/index.ts
@@ -0,0 +1,122 @@
+/**
+ * @automaker/utils
+ * Shared utility functions for AutoMaker
+ */
+
+// Error handling
+export {
+  isAbortError,
+  isCancellationError,
+  isAuthenticationError,
+  isRateLimitError,
+  isQuotaExhaustedError,
+  isModelNotFoundError,
+  isStreamDisconnectedError,
+  extractRetryAfter,
+  classifyError,
+  getUserFriendlyErrorMessage,
+  getErrorMessage,
+  logError,
+} from './error-handler.js';
+
+// Conversation utilities
+export {
+  extractTextFromContent,
+  normalizeContentBlocks,
+  formatHistoryAsText,
+  convertHistoryToMessages,
+} from './conversation-utils.js';
+
+// Image handling
+export {
+  getMimeTypeForImage,
+  readImageAsBase64,
+  convertImagesToContentBlocks,
+  formatImagePathsForPrompt,
+} from './image-handler.js';
+
+// Prompt building
+export {
+  buildPromptWithImages,
+  type PromptContent,
+  type PromptWithImages,
+} from './prompt-builder.js';
+
+// Logger
+export {
+  createLogger,
+  getLogLevel,
+  setLogLevel,
+  setColorsEnabled,
+  setTimestampsEnabled,
+  LogLevel,
+  type Logger,
+} from './logger.js';
+
+// File system utilities
+export { mkdirSafe, existsSafe } from './fs-utils.js';
+
+// Atomic file operations
+export {
+  atomicWriteJson,
+  readJsonFile,
+  updateJsonAtomically,
+  readJsonWithRecovery,
+  rotateBackups,
+  logRecoveryWarning,
+  DEFAULT_BACKUP_COUNT,
+  type AtomicWriteOptions,
+  type ReadJsonRecoveryResult,
+  type ReadJsonRecoveryOptions,
+} from './atomic-writer.js';
+
+// Path utilities
+export { normalizePath, pathsEqual, sanitizeFilename } from './path-utils.js';
+
+// Context file loading
+export {
+  loadContextFiles,
+  getContextFilesSummary,
+  type ContextMetadata,
+  type ContextFileInfo,
+  type ContextFilesResult,
+  type ContextFsModule,
+  type LoadContextFilesOptions,
+  type MemoryFileInfo,
+  type TaskContext,
+} from './context-loader.js';
+
+// Memory loading
+export {
+  loadRelevantMemory,
+  initializeMemoryFolder,
+  appendLearning,
+  recordMemoryUsage,
+  getMemoryDir,
+  parseFrontmatter,
+  serializeFrontmatter,
+  extractTerms,
+  calculateUsageScore,
+  countMatches,
+  incrementUsageStat,
+  formatLearning,
+  type MemoryFsModule,
+  type MemoryMetadata,
+  type MemoryFile,
+  type MemoryLoadResult,
+  type UsageStats,
+  type LearningEntry,
+  type SimpleMemoryFile,
+} from './memory-loader.js';
+
+// Debounce and throttle utilities
+export {
+  debounce,
+  throttle,
+  type DebounceOptions,
+  type ThrottleOptions,
+  type DebouncedFunction,
+} from './debounce.js';
+
+// Git validation utilities
+export { isValidBranchName, isValidRemoteName, MAX_BRANCH_NAME_LENGTH } from './git-validation.js';
diff --git a/temp_repo/libs/utils/src/logger.ts b/temp_repo/libs/utils/src/logger.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5d1dc7cf72d57c895890e3b48988215d905bd5d3
--- /dev/null
+++ b/temp_repo/libs/utils/src/logger.ts
@@ -0,0 +1,247 @@
+/**
+ * Enhanced logger with colors and timestamps
+ *
+ * Environment Variables:
+ * - LOG_LEVEL: error, warn, info, debug (default: info)
+ * - LOG_COLORS: true/false (default: true in Node.js)
+ * - LOG_TIMESTAMPS: true/false (default: false)
+ */
+
+export enum LogLevel {
+  ERROR = 0,
+  WARN = 1,
+  INFO = 2,
+  DEBUG = 3,
+}
+
+const LOG_LEVEL_NAMES: Record<string, LogLevel> = {
+  error: LogLevel.ERROR,
+  warn: LogLevel.WARN,
+  info: LogLevel.INFO,
+  debug: LogLevel.DEBUG,
+};
+
+// ANSI color codes for terminal output
+const ANSI = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  // Foreground colors
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m',
+  white: '\x1b[37m',
+  gray: '\x1b[90m',
+};
+
+// Browser CSS styles for console output
+const BROWSER_STYLES = {
+  timestamp: 'color: #6b7280; font-size: 11px;',
+  context: 'color: #3b82f6; font-weight: 600;',
+  reset: 'color: inherit; font-weight: inherit;',
+  levels: {
+    ERROR:
+      'background: #ef4444; color: white; font-weight: bold; padding: 1px 6px; border-radius: 3px;',
+    WARN: 'background: #f59e0b; color: white; font-weight: bold; padding: 1px 6px; border-radius: 3px;',
+    INFO: 'background: #3b82f6; color: white; font-weight: bold; padding: 1px 6px; border-radius: 3px;',
+    DEBUG:
+      'background: #8b5cf6; color: white; font-weight: bold; padding: 1px 6px; border-radius: 3px;',
+  },
+};
+
+// Environment detection - use globalThis for cross-platform compatibility
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isBrowser = typeof (globalThis as any).window !== 'undefined';
+
+// Configuration state
+let currentLogLevel: LogLevel = LogLevel.INFO;
+
+// Get environment variable safely (works in both Node.js and browser)
+function getEnvVar(name: string): string | undefined {
+  if (isBrowser) return undefined;
+  try {
+    return process?.env?.[name];
+  } catch {
+    return undefined;
+  }
+}
+
+// Initialize configuration from environment variables
+// Colors enabled by default in Node.js, can be disabled with LOG_COLORS=false
+let colorsEnabled = !isBrowser && getEnvVar('LOG_COLORS') !== 'false';
+let timestampsEnabled = getEnvVar('LOG_TIMESTAMPS') === 'true';
+
+// Initialize log level from environment variable
+const envLogLevel = getEnvVar('LOG_LEVEL')?.toLowerCase();
+if (envLogLevel && LOG_LEVEL_NAMES[envLogLevel] !== undefined) {
+  currentLogLevel = LOG_LEVEL_NAMES[envLogLevel];
+}
+
+/**
+ * Format ISO timestamp
+ */
+function formatTimestamp(): string {
+  return new Date().toISOString();
+}
+
+/**
+ * Format short time for browser (HH:mm:ss.SSS)
+ */
+function formatShortTime(): string {
+  return new Date().toISOString().split('T')[1].slice(0, 12);
+}
+
+/**
+ * Format a log line for Node.js terminal output
+ */
+function formatNodeLog(level: string, context: string, levelColor: string): string {
+  const parts: string[] = [];
+
+  if (timestampsEnabled) {
+    parts.push(colorsEnabled ? `${ANSI.gray}${formatTimestamp()}${ANSI.reset}` : formatTimestamp());
+  }
+
+  const levelPadded = level.padEnd(5);
+  parts.push(colorsEnabled ? `${levelColor}${levelPadded}${ANSI.reset}` : levelPadded);
+  parts.push(colorsEnabled ? `${ANSI.blue}[${context}]${ANSI.reset}` : `[${context}]`);
+
+  return parts.join(' ');
+}
+
+/**
+ * Logger interface returned by createLogger
+ */
+export interface Logger {
+  error: (...args: unknown[]) => void;
+  warn: (...args: unknown[]) => void;
+  info: (...args: unknown[]) => void;
+  debug: (...args: unknown[]) => void;
+}
+
+/**
+ * Create a logger instance with a context prefix
+ */
+export function createLogger(context: string): Logger {
+  if (isBrowser) {
+    // Browser implementation with CSS styling
+    return {
+      error: (...args: unknown[]): void => {
+        if (currentLogLevel >= LogLevel.ERROR) {
+          console.error(
+            `%cERROR%c %c${formatShortTime()}%c %c[${context}]%c`,
+            BROWSER_STYLES.levels.ERROR,
+            BROWSER_STYLES.reset,
+            BROWSER_STYLES.timestamp,
+            BROWSER_STYLES.reset,
+            BROWSER_STYLES.context,
+            BROWSER_STYLES.reset,
+            ...args
+          );
+        }
+      },
+
+      warn: (...args: unknown[]): void => {
+        if (currentLogLevel >= LogLevel.WARN) {
+          console.warn(
+            `%cWARN%c %c${formatShortTime()}%c %c[${context}]%c`,
+            BROWSER_STYLES.levels.WARN,
+            BROWSER_STYLES.reset,
+            BROWSER_STYLES.timestamp,
+            BROWSER_STYLES.reset,
+            BROWSER_STYLES.context,
+            BROWSER_STYLES.reset,
+            ...args
+          );
+        }
+      },
+
+      info: (...args: unknown[]): void => {
+        if (currentLogLevel >= LogLevel.INFO) {
+          console.log(
+            `%cINFO%c %c${formatShortTime()}%c %c[${context}]%c`,
+            BROWSER_STYLES.levels.INFO,
+            BROWSER_STYLES.reset,
+            BROWSER_STYLES.timestamp,
+            BROWSER_STYLES.reset,
+            BROWSER_STYLES.context,
+            BROWSER_STYLES.reset,
+            ...args
+          );
+        }
+      },
+
+      debug: (...args: unknown[]): void => {
+        if (currentLogLevel >= LogLevel.DEBUG) {
+          console.log(
+            `%cDEBUG%c %c${formatShortTime()}%c %c[${context}]%c`,
+            BROWSER_STYLES.levels.DEBUG,
+            BROWSER_STYLES.reset,
+            BROWSER_STYLES.timestamp,
+            BROWSER_STYLES.reset,
+            BROWSER_STYLES.context,
+            BROWSER_STYLES.reset,
+            ...args
+          );
+        }
+      },
+    };
+  }
+
+  // Node.js implementation with ANSI colors
+  return {
+    error: (...args: unknown[]): void => {
+      if (currentLogLevel >= LogLevel.ERROR) {
+        console.error(formatNodeLog('ERROR', context, ANSI.red), ...args);
+      }
+    },
+
+    warn: (...args: unknown[]): void => {
+      if (currentLogLevel >= LogLevel.WARN) {
+        console.log(formatNodeLog('WARN', context, ANSI.yellow), ...args);
+      }
+    },
+
+    info: (...args: unknown[]): void => {
+      if (currentLogLevel >= LogLevel.INFO) {
+        console.log(formatNodeLog('INFO', context, ANSI.cyan), ...args);
+      }
+    },
+
+    debug: (...args: unknown[]): void => {
+      if (currentLogLevel >= LogLevel.DEBUG) {
+        console.log(formatNodeLog('DEBUG', context, ANSI.magenta), ...args);
+      }
+    },
+  };
+}
+
+/**
+ * Get the current log level
+ */
+export function getLogLevel(): LogLevel {
+  return currentLogLevel;
+}
+
+/**
+ * Set the log level programmatically (useful for testing)
+ */
+export function setLogLevel(level: LogLevel): void {
+  currentLogLevel = level;
+}
+
+/**
+ * Enable or disable colored output
+ */
+export function setColorsEnabled(enabled: boolean): void {
+  colorsEnabled = enabled;
+}
+
+/**
+ * Enable or disable timestamps in output
+ */
+export function setTimestampsEnabled(enabled: boolean): void {
+  timestampsEnabled = enabled;
+}
diff --git a/temp_repo/libs/utils/src/memory-loader.ts b/temp_repo/libs/utils/src/memory-loader.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7e24e8686fc868db7bf8cc73645befcee042b9e8
--- /dev/null
+++ b/temp_repo/libs/utils/src/memory-loader.ts
@@ -0,0 +1,685 @@
+/**
+ * Memory Loader - Smart loading of agent memory files
+ *
+ * Loads relevant memory files from .automaker/memory/ based on:
+ * - Tag matching with feature keywords
+ * - Historical usefulness (usage stats)
+ * - File importance
+ *
+ * Memory files use YAML frontmatter for metadata.
+ */
+
+import path from 'path';
+
+/**
+ * File system module interface (compatible with secureFs)
+ */
+export interface MemoryFsModule {
+  access: (path: string) => Promise<void>;
+  readdir: (path: string) => Promise<string[]>;
+  readFile: (path: string, encoding?: BufferEncoding) => Promise<string | Buffer>;
+  writeFile: (path: string, content: string) => Promise<void>;
+  mkdir: (path: string, options?: { recursive?: boolean }) => Promise<string | undefined>;
+  appendFile: (path: string, content: string) => Promise<void>;
+}
+
+/**
+ * Usage statistics for learning which files are helpful
+ */
+export interface UsageStats {
+  loaded: number;
+  referenced: number;
+  successfulFeatures: number;
+}
+
+/**
+ * Metadata stored in YAML frontmatter of memory files
+ */
+export interface MemoryMetadata {
+  tags: string[];
+  summary: string;
+  relevantTo: string[];
+  importance: number;
+  relatedFiles: string[];
+  usageStats: UsageStats;
+}
+
+/**
+ * A loaded memory file with content and metadata
+ */
+export interface MemoryFile {
+  name: string;
+  content: string;
+  metadata: MemoryMetadata;
+}
+
+/**
+ * Result of loading memory files
+ */
+export interface MemoryLoadResult {
+  files: MemoryFile[];
+  formattedPrompt: string;
+}
+
+/**
+ * Learning entry to be recorded
+ * Based on Architecture Decision Record (ADR) format for rich context
+ */
+export interface LearningEntry {
+  category: string;
+  type: 'decision' | 'learning' | 'pattern' | 'gotcha';
+  content: string;
+  context?: string; // Problem being solved or situation faced
+  why?: string; // Reasoning behind the approach
+  rejected?: string; // Alternative considered and why rejected
+  tradeoffs?: string; // What became easier/harder
+  breaking?: string; // What breaks if changed/removed
+}
+
+/**
+ * Create default metadata for new memory files
+ * Returns a new object each time to avoid shared mutable state
+ */
+function createDefaultMetadata(): MemoryMetadata {
+  return {
+    tags: [],
+    summary: '',
+    relevantTo: [],
+    importance: 0.5,
+    relatedFiles: [],
+    usageStats: {
+      loaded: 0,
+      referenced: 0,
+      successfulFeatures: 0,
+    },
+  };
+}
+
+/**
+ * In-memory locks to prevent race conditions when updating files
+ */
+const fileLocks = new Map<string, Promise<void>>();
+
+/**
+ * Acquire a lock for a file path, execute the operation, then release
+ */
+async function withFileLock<T>(filePath: string, operation: () => Promise<T>): Promise<T> {
+  // Wait for any existing lock on this file
+  const existingLock = fileLocks.get(filePath);
+  if (existingLock) {
+    await existingLock;
+  }
+
+  // Create a new lock
+  let releaseLock: () => void;
+  const lockPromise = new Promise<void>((resolve) => {
+    releaseLock = resolve;
+  });
+  fileLocks.set(filePath, lockPromise);
+
+  try {
+    return await operation();
+  } finally {
+    releaseLock!();
+    fileLocks.delete(filePath);
+  }
+}
+
+/**
+ * Get the memory directory path for a project
+ */
+export function getMemoryDir(projectPath: string): string {
+  return path.join(projectPath, '.automaker', 'memory');
+}
+
+/**
+ * Parse YAML frontmatter from markdown content
+ * Returns the metadata and the content without frontmatter
+ */
+export function parseFrontmatter(content: string): {
+  metadata: MemoryMetadata;
+  body: string;
+} {
+  // Handle both Unix (\n) and Windows (\r\n) line endings
+  const frontmatterRegex = /^---\s*\r?\n([\s\S]*?)\r?\n---\s*\r?\n/;
+  const match = content.match(frontmatterRegex);
+
+  if (!match) {
+    return { metadata: createDefaultMetadata(), body: content };
+  }
+
+  const frontmatterStr = match[1];
+  const body = content.slice(match[0].length);
+
+  try {
+    // Simple YAML parsing for our specific format
+    const metadata: MemoryMetadata = createDefaultMetadata();
+
+    // Parse tags: [tag1, tag2, tag3]
+    const tagsMatch = frontmatterStr.match(/tags:\s*\[(.*?)\]/);
+    if (tagsMatch) {
+      metadata.tags = tagsMatch[1]
+        .split(',')
+        .map((t) => t.trim().replace(/['"]/g, ''))
+        .filter((t) => t.length > 0); // Filter out empty strings
+    }
+
+    // Parse summary
+    const summaryMatch = frontmatterStr.match(/summary:\s*(.+)/);
+    if (summaryMatch) {
+      metadata.summary = summaryMatch[1].trim().replace(/^["']|["']$/g, '');
+    }
+
+    // Parse relevantTo: [term1, term2]
+    const relevantMatch = frontmatterStr.match(/relevantTo:\s*\[(.*?)\]/);
+    if (relevantMatch) {
+      metadata.relevantTo = relevantMatch[1]
+        .split(',')
+        .map((t) => t.trim().replace(/['"]/g, ''))
+        .filter((t) => t.length > 0); // Filter out empty strings
+    }
+
+    // Parse importance (validate range 0-1)
+    const importanceMatch = frontmatterStr.match(/importance:\s*([\d.]+)/);
+    if (importanceMatch) {
+      const value = parseFloat(importanceMatch[1]);
+      metadata.importance = Math.max(0, Math.min(1, value)); // Clamp to 0-1
+    }
+
+    // Parse relatedFiles: [file1.md, file2.md]
+    const relatedMatch = frontmatterStr.match(/relatedFiles:\s*\[(.*?)\]/);
+    if (relatedMatch) {
+      metadata.relatedFiles = relatedMatch[1]
+        .split(',')
+        .map((t) => t.trim().replace(/['"]/g, ''))
+        .filter((t) => t.length > 0); // Filter out empty strings
+    }
+
+    // Parse usageStats
+    const loadedMatch = frontmatterStr.match(/loaded:\s*(\d+)/);
+    const referencedMatch = frontmatterStr.match(/referenced:\s*(\d+)/);
+    const successMatch = frontmatterStr.match(/successfulFeatures:\s*(\d+)/);
+
+    if (loadedMatch) metadata.usageStats.loaded = parseInt(loadedMatch[1], 10);
+    if (referencedMatch) metadata.usageStats.referenced = parseInt(referencedMatch[1], 10);
+    if (successMatch) metadata.usageStats.successfulFeatures = parseInt(successMatch[1], 10);
+
+    return { metadata, body };
+  } catch {
+    return { metadata: createDefaultMetadata(), body: content };
+  }
+}
+
+/**
+ * Escape a string for safe YAML output
+ * Quotes strings containing special characters
+ */
+function escapeYamlString(str: string): string {
+  // If string contains special YAML characters, wrap in quotes
+  if (/[:\[\]{}#&*!|>'"%@`\n\r]/.test(str) || str.trim() !== str) {
+    // Escape any existing quotes and wrap in double quotes
+    return `"${str.replace(/"/g, '\\"')}"`;
+  }
+  return str;
+}
+
+/**
+ * Serialize metadata back to YAML frontmatter
+ */
+export function serializeFrontmatter(metadata: MemoryMetadata): string {
+  const escapedTags = metadata.tags.map(escapeYamlString);
+  const escapedRelevantTo = metadata.relevantTo.map(escapeYamlString);
+  const escapedRelatedFiles = metadata.relatedFiles.map(escapeYamlString);
+  const escapedSummary = escapeYamlString(metadata.summary);
+
+  return `---
+tags: [${escapedTags.join(', ')}]
+summary: ${escapedSummary}
+relevantTo: [${escapedRelevantTo.join(', ')}]
+importance: ${metadata.importance}
+relatedFiles: [${escapedRelatedFiles.join(', ')}]
+usageStats:
+  loaded: ${metadata.usageStats.loaded}
+  referenced: ${metadata.usageStats.referenced}
+  successfulFeatures: ${metadata.usageStats.successfulFeatures}
+---`;
+}
+
+/**
+ * Extract terms from text for matching
+ * Splits on spaces, removes common words, lowercases
+ */
+export function extractTerms(text: string): string[] {
+  const stopWords = new Set([
+    'a',
+    'an',
+    'the',
+    'and',
+    'or',
+    'but',
+    'in',
+    'on',
+    'at',
+    'to',
+    'for',
+    'of',
+    'with',
+    'by',
+    'is',
+    'it',
+    'this',
+    'that',
+    'be',
+    'as',
+    'are',
+    'was',
+    'were',
+    'been',
+    'being',
+    'have',
+    'has',
+    'had',
+    'do',
+    'does',
+    'did',
+    'will',
+    'would',
+    'could',
+    'should',
+    'may',
+    'might',
+    'must',
+    'shall',
+    'can',
+    'need',
+    'dare',
+    'ought',
+    'used',
+    'add',
+    'create',
+    'implement',
+    'build',
+    'make',
+    'update',
+    'fix',
+    'change',
+    'modify',
+  ]);
+
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9\s]/g, ' ')
+    .split(/\s+/)
+    .filter((word) => word.length > 2 && !stopWords.has(word));
+}
+
+/**
+ * Count how many terms match between two arrays (case-insensitive)
+ */
+export function countMatches(arr1: string[], arr2: string[]): number {
+  const set2 = new Set(arr2.map((t) => t.toLowerCase()));
+  return arr1.filter((t) => set2.has(t.toLowerCase())).length;
+}
+
+/**
+ * Calculate usage-based score for a memory file
+ * Files that are referenced in successful features get higher scores
+ */
+export function calculateUsageScore(stats: UsageStats): number {
+  if (stats.loaded === 0) return 1; // New file, neutral score
+
+  const referenceRate = stats.referenced / stats.loaded;
+  const successRate = stats.referenced > 0 ? stats.successfulFeatures / stats.referenced : 0;
+
+  // Base 0.5 + up to 0.3 for reference rate + up to 0.2 for success rate
+  return 0.5 + referenceRate * 0.3 + successRate * 0.2;
+}
+
+/**
+ * Load relevant memory files for a feature
+ *
+ * Selects files based on:
+ * - Tag matching with feature keywords (weight: 3)
+ * - RelevantTo matching (weight: 2)
+ * - Summary matching (weight: 1)
+ * - Usage score (multiplier)
+ * - Importance (multiplier)
+ *
+ * Always includes gotchas.md
+ */
+export async function loadRelevantMemory(
+  projectPath: string,
+  featureTitle: string,
+  featureDescription: string,
+  fsModule: MemoryFsModule
+): Promise<MemoryLoadResult> {
+  const memoryDir = getMemoryDir(projectPath);
+
+  try {
+    await fsModule.access(memoryDir);
+  } catch {
+    // Memory directory doesn't exist yet
+    return { files: [], formattedPrompt: '' };
+  }
+
+  const allFiles = await fsModule.readdir(memoryDir);
+  const featureTerms = extractTerms(featureTitle + ' ' + featureDescription);
+
+  // Score each file
+  const scored: Array<{ file: string; score: number; content: string; metadata: MemoryMetadata }> =
+    [];
+
+  for (const file of allFiles) {
+    if (!file.endsWith('.md') || file === '_index.md') continue;
+
+    const filePath = path.join(memoryDir, file);
+    try {
+      const content = (await fsModule.readFile(filePath, 'utf-8')) as string;
+      const { metadata, body } = parseFrontmatter(content);
+
+      // Calculate relevance score
+      const tagScore = countMatches(metadata.tags, featureTerms) * 3;
+      const relevantToScore = countMatches(metadata.relevantTo, featureTerms) * 2;
+      const summaryTerms = extractTerms(metadata.summary);
+      const summaryScore = countMatches(summaryTerms, featureTerms);
+
+      // Usage-based scoring
+      const usageScore = calculateUsageScore(metadata.usageStats);
+
+      // Combined score
+      const score = (tagScore + relevantToScore + summaryScore) * metadata.importance * usageScore;
+
+      // Include if score > 0 or high importance
+      if (score > 0 || metadata.importance >= 0.9) {
+        scored.push({ file, score, content: body, metadata });
+      }
+    } catch {
+      // Skip files that can't be read
+    }
+  }
+
+  // Sort by score, take top 5
+  const topFiles = scored.sort((a, b) => b.score - a.score).slice(0, 5);
+
+  // Always include gotchas.md if it exists
+  const toLoad = new Set(['gotchas.md', ...topFiles.map((f) => f.file)]);
+
+  const loaded: MemoryFile[] = [];
+  for (const file of toLoad) {
+    const existing = scored.find((s) => s.file === file);
+    if (existing) {
+      loaded.push({
+        name: file,
+        content: existing.content,
+        metadata: existing.metadata,
+      });
+    } else if (file === 'gotchas.md') {
+      // Try to load gotchas.md even if it wasn't scored
+      const gotchasPath = path.join(memoryDir, 'gotchas.md');
+      try {
+        const content = (await fsModule.readFile(gotchasPath, 'utf-8')) as string;
+        const { metadata, body } = parseFrontmatter(content);
+        loaded.push({ name: file, content: body, metadata });
+      } catch {
+        // gotchas.md doesn't exist yet
+      }
+    }
+  }
+
+  // Build formatted prompt
+  const formattedPrompt = buildMemoryPrompt(loaded);
+
+  return { files: loaded, formattedPrompt };
+}
+
+/**
+ * Build a formatted prompt from loaded memory files
+ */
+function buildMemoryPrompt(files: MemoryFile[]): string {
+  if (files.length === 0) return '';
+
+  const sections = files.map((file) => {
+    return `## ${file.name.replace('.md', '').toUpperCase()}
+
+${file.content}`;
+  });
+
+  return `# Project Memory
+
+The following learnings and decisions from previous work are relevant to this task.
+**IMPORTANT**: Review these carefully before making changes that could conflict with past decisions.
+
+---
+
+${sections.join('\n\n---\n\n')}
+
+---
+`;
+}
+
+/**
+ * Increment a usage stat in a memory file
+ * Uses file locking to prevent race conditions from concurrent updates
+ */
+export async function incrementUsageStat(
+  filePath: string,
+  stat: keyof UsageStats,
+  fsModule: MemoryFsModule
+): Promise<void> {
+  await withFileLock(filePath, async () => {
+    try {
+      const content = (await fsModule.readFile(filePath, 'utf-8')) as string;
+      const { metadata, body } = parseFrontmatter(content);
+
+      metadata.usageStats[stat]++;
+
+      // serializeFrontmatter ends with "---", add newline before body
+      const newContent = serializeFrontmatter(metadata) + '\n' + body;
+      await fsModule.writeFile(filePath, newContent);
+    } catch {
+      // File doesn't exist or can't be updated - that's fine
+    }
+  });
+}
+
+/**
+ * Simple memory file reference for usage tracking
+ */
+export interface SimpleMemoryFile {
+  name: string;
+  content: string;
+}
+
+/**
+ * Record memory usage after feature completion
+ * Updates usage stats based on what was actually referenced
+ */
+export async function recordMemoryUsage(
+  projectPath: string,
+  loadedFiles: SimpleMemoryFile[],
+  agentOutput: string,
+  success: boolean,
+  fsModule: MemoryFsModule
+): Promise<void> {
+  const memoryDir = getMemoryDir(projectPath);
+
+  for (const file of loadedFiles) {
+    const filePath = path.join(memoryDir, file.name);
+
+    // Check if agent actually referenced this file's content
+    // Simple heuristic: check if any significant terms from the file appear in output
+    const fileTerms = extractTerms(file.content);
+    const outputTerms = extractTerms(agentOutput);
+    const wasReferenced = countMatches(fileTerms, outputTerms) >= 3;
+
+    if (wasReferenced) {
+      await incrementUsageStat(filePath, 'referenced', fsModule);
+      if (success) {
+        await incrementUsageStat(filePath, 'successfulFeatures', fsModule);
+      }
+    }
+  }
+}
+
+/**
+ * Format a learning entry for appending to a memory file
+ * Uses ADR-style format for rich context
+ */
+export function formatLearning(learning: LearningEntry): string {
+  const date = new Date().toISOString().split('T')[0];
+  const lines: string[] = [];
+
+  if (learning.type === 'decision') {
+    lines.push(`\n### ${learning.content} (${date})`);
+    if (learning.context) lines.push(`- **Context:** ${learning.context}`);
+    if (learning.why) lines.push(`- **Why:** ${learning.why}`);
+    if (learning.rejected) lines.push(`- **Rejected:** ${learning.rejected}`);
+    if (learning.tradeoffs) lines.push(`- **Trade-offs:** ${learning.tradeoffs}`);
+    if (learning.breaking) lines.push(`- **Breaking if changed:** ${learning.breaking}`);
+    return lines.join('\n');
+  }
+
+  if (learning.type === 'gotcha') {
+    lines.push(`\n#### [Gotcha] ${learning.content} (${date})`);
+    if (learning.context) lines.push(`- **Situation:** ${learning.context}`);
+    if (learning.why) lines.push(`- **Root cause:** ${learning.why}`);
+    if (learning.tradeoffs) lines.push(`- **How to avoid:** ${learning.tradeoffs}`);
+    return lines.join('\n');
+  }
+
+  // Pattern or learning
+  const prefix = learning.type === 'pattern' ? '[Pattern]' : '[Learned]';
+  lines.push(`\n#### ${prefix} ${learning.content} (${date})`);
+  if (learning.context) lines.push(`- **Problem solved:** ${learning.context}`);
+  if (learning.why) lines.push(`- **Why this works:** ${learning.why}`);
+  if (learning.tradeoffs) lines.push(`- **Trade-offs:** ${learning.tradeoffs}`);
+  return lines.join('\n');
+}
+
+/**
+ * Append a learning to the appropriate category file
+ * Creates the file with frontmatter if it doesn't exist
+ * Uses file locking to prevent TOCTOU race conditions
+ */
+export async function appendLearning(
+  projectPath: string,
+  learning: LearningEntry,
+  fsModule: MemoryFsModule
+): Promise<void> {
+  console.log(
+    `[MemoryLoader] appendLearning called: category=${learning.category}, type=${learning.type}`
+  );
+  const memoryDir = getMemoryDir(projectPath);
+  // Sanitize category name: lowercase, replace spaces with hyphens, remove special chars
+  const sanitizedCategory = learning.category
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-]/g, '');
+  const fileName = `${sanitizedCategory || 'general'}.md`;
+  const filePath = path.join(memoryDir, fileName);
+
+  // Use file locking to prevent race conditions when multiple processes
+  // try to create the same file simultaneously
+  await withFileLock(filePath, async () => {
+    try {
+      await fsModule.access(filePath);
+      // File exists, append to it
+      const formatted = formatLearning(learning);
+      await fsModule.appendFile(filePath, '\n' + formatted);
+      console.log(`[MemoryLoader] Appended learning to existing file: ${fileName}`);
+    } catch {
+      // File doesn't exist, create it with frontmatter
+      console.log(`[MemoryLoader] Creating new memory file: ${fileName}`);
+      const metadata: MemoryMetadata = {
+        tags: [sanitizedCategory || 'general'],
+        summary: `${learning.category} implementation decisions and patterns`,
+        relevantTo: [sanitizedCategory || 'general'],
+        importance: 0.7,
+        relatedFiles: [],
+        usageStats: { loaded: 0, referenced: 0, successfulFeatures: 0 },
+      };
+
+      const content =
+        serializeFrontmatter(metadata) + `\n# ${learning.category}\n` + formatLearning(learning);
+
+      await fsModule.writeFile(filePath, content);
+    }
+  });
+}
+
+/**
+ * Initialize the memory folder for a project
+ * Creates starter files if the folder doesn't exist
+ */
+export async function initializeMemoryFolder(
+  projectPath: string,
+  fsModule: MemoryFsModule
+): Promise<void> {
+  const memoryDir = getMemoryDir(projectPath);
+
+  try {
+    await fsModule.access(memoryDir);
+    // Already exists
+    return;
+  } catch {
+    // Create the directory
+    await fsModule.mkdir(memoryDir, { recursive: true });
+
+    // Create _index.md
+    const indexMetadata: MemoryMetadata = {
+      tags: ['index', 'overview'],
+      summary: 'Overview of project memory categories',
+      relevantTo: ['project', 'memory', 'overview'],
+      importance: 0.5,
+      relatedFiles: [],
+      usageStats: { loaded: 0, referenced: 0, successfulFeatures: 0 },
+    };
+
+    const indexContent =
+      serializeFrontmatter(indexMetadata) +
+      `
+# Project Memory Index
+
+This folder contains agent learnings organized by category.
+Categories are created automatically as agents work on features.
+
+## How This Works
+
+1. After each successful feature, learnings are extracted and categorized
+2. Relevant memory files are loaded into agent context for future features
+3. Usage statistics help prioritize which memories are most helpful
+
+## Categories
+
+- **gotchas.md** - Mistakes and edge cases to avoid
+- Other categories are created automatically based on feature work
+`;
+
+    await fsModule.writeFile(path.join(memoryDir, '_index.md'), indexContent);
+
+    // Create gotchas.md
+    const gotchasMetadata: MemoryMetadata = {
+      tags: ['gotcha', 'mistake', 'edge-case', 'bug', 'warning'],
+      summary: 'Mistakes and edge cases to avoid',
+      relevantTo: ['error', 'bug', 'fix', 'issue', 'problem'],
+      importance: 0.9,
+      relatedFiles: [],
+      usageStats: { loaded: 0, referenced: 0, successfulFeatures: 0 },
+    };
+
+    const gotchasContent =
+      serializeFrontmatter(gotchasMetadata) +
+      `
+# Gotchas
+
+Mistakes and edge cases to avoid. These are lessons learned from past issues.
+
+---
+
+`;
+
+    await fsModule.writeFile(path.join(memoryDir, 'gotchas.md'), gotchasContent);
+
+    console.log(`[MemoryLoader] Initialized memory folder at ${memoryDir}`);
+  }
+}
diff --git a/temp_repo/libs/utils/src/path-utils.ts b/temp_repo/libs/utils/src/path-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0c38f8c18f9395286c2babcfdae0dc161ca2b576
--- /dev/null
+++ b/temp_repo/libs/utils/src/path-utils.ts
@@ -0,0 +1,102 @@
+/**
+ * Path Utilities - Cross-platform path manipulation helpers
+ *
+ * Provides functions for normalizing and comparing file system paths
+ * across different operating systems (Windows, macOS, Linux).
+ */
+
+/**
+ * Normalize a path by converting backslashes to forward slashes
+ *
+ * This ensures consistent path representation across platforms:
+ * - Windows: C:\Users\foo\bar -> C:/Users/foo/bar
+ * - Unix: /home/foo/bar -> /home/foo/bar (unchanged)
+ *
+ * @param p - Path string to normalize
+ * @returns Normalized path with forward slashes
+ *
+ * @example
+ * ```typescript
+ * normalizePath("C:\\Users\\foo\\bar"); // "C:/Users/foo/bar"
+ * normalizePath("/home/foo/bar");       // "/home/foo/bar"
+ * ```
+ */
+export function normalizePath(p: string): string {
+  return p.replace(/\\/g, '/');
+}
+
+/**
+ * Compare two paths for equality after normalization
+ *
+ * Handles null/undefined values and normalizes paths before comparison.
+ * Useful for checking if two paths refer to the same location regardless
+ * of platform-specific path separators.
+ *
+ * @param p1 - First path to compare (or null/undefined)
+ * @param p2 - Second path to compare (or null/undefined)
+ * @returns true if paths are equal (or both null/undefined), false otherwise
+ *
+ * @example
+ * ```typescript
+ * pathsEqual("C:\\foo\\bar", "C:/foo/bar");     // true
+ * pathsEqual("/home/user", "/home/user");       // true
+ * pathsEqual("/home/user", "/home/other");      // false
+ * pathsEqual(null, undefined);                  // false
+ * pathsEqual(null, null);                       // true
+ * ```
+ */
+export function pathsEqual(p1: string | undefined | null, p2: string | undefined | null): boolean {
+  if (!p1 || !p2) return p1 === p2;
+  return normalizePath(p1) === normalizePath(p2);
+}
+
+/**
+ * Sanitize a filename to be safe for cross-platform file system usage
+ *
+ * Removes or replaces characters that are invalid on various file systems
+ * and prevents Windows reserved device names (CON, PRN, AUX, NUL, COM1-9, LPT1-9).
+ *
+ * @param filename - The filename to sanitize (without path, just the name)
+ * @param fallback - Fallback name if sanitization results in empty string (default: 'file')
+ * @returns A sanitized filename safe for all platforms
+ *
+ * @example
+ * ```typescript
+ * sanitizeFilename("my file.txt");        // "my_file.txt"
+ * sanitizeFilename("nul.txt");             // "_nul.txt" (Windows reserved)
+ * sanitizeFilename("con");                 // "_con" (Windows reserved)
+ * sanitizeFilename("file?.txt");           // "file.txt"
+ * sanitizeFilename("");                    // "file"
+ * sanitizeFilename("", "unnamed");         // "unnamed"
+ * ```
+ */
+export function sanitizeFilename(filename: string, fallback: string = 'file'): string {
+  if (!filename || typeof filename !== 'string') {
+    return fallback;
+  }
+
+  // Remove or replace invalid characters:
+  // - Path separators: / \
+  // - Windows invalid chars: : * ? " < > |
+  // - Control characters and other problematic chars
+  let safeName = filename
+    .replace(/[/\\:*?"<>|]/g, '') // Remove invalid chars
+    .replace(/\s+/g, '_') // Replace spaces with underscores
+    .replace(/\.+$/g, '') // Remove trailing dots (Windows issue)
+    .replace(/^\.+/g, '') // Remove leading dots
+    .trim();
+
+  // If empty after sanitization, use fallback
+  if (!safeName || safeName.length === 0) {
+    return fallback;
+  }
+
+  // Handle Windows reserved device names (case-insensitive)
+  // Reserved names: CON, PRN, AUX, NUL, COM1-9, LPT1-9
+  const windowsReserved = /^(CON|PRN|AUX|NUL|COM[1-9]|LPT[1-9])$/i;
+  if (windowsReserved.test(safeName)) {
+    safeName = `_${safeName}`;
+  }
+
+  return safeName;
+}
diff --git a/temp_repo/libs/utils/src/prompt-builder.ts b/temp_repo/libs/utils/src/prompt-builder.ts
new file mode 100644
index 0000000000000000000000000000000000000000..30a1ecde9613e33ec5824a5ad8071cc7d1f47bd0
--- /dev/null
+++ b/temp_repo/libs/utils/src/prompt-builder.ts
@@ -0,0 +1,79 @@
+/**
+ * Prompt building utilities for constructing prompts with images
+ *
+ * Provides standardized prompt building that:
+ * - Combines text prompts with image attachments
+ * - Handles content block array generation
+ * - Optionally includes image paths in text
+ * - Supports both vision and non-vision models
+ */
+
+import { convertImagesToContentBlocks, formatImagePathsForPrompt } from './image-handler.js';
+
+/**
+ * Content that can be either simple text or structured blocks
+ */
+export type PromptContent =
+  | string
+  | Array<{
+      type: string;
+      text?: string;
+      source?: object;
+    }>;
+
+/**
+ * Result of building a prompt with optional images
+ */
+export interface PromptWithImages {
+  content: PromptContent;
+  hasImages: boolean;
+}
+
+/**
+ * Build a prompt with optional image attachments
+ *
+ * @param basePrompt - The text prompt
+ * @param imagePaths - Optional array of image file paths
+ * @param workDir - Optional working directory for resolving relative paths
+ * @param includeImagePaths - Whether to append image paths to the text (default: false)
+ * @returns Promise resolving to prompt content and metadata
+ */
+export async function buildPromptWithImages(
+  basePrompt: string,
+  imagePaths?: string[],
+  workDir?: string,
+  includeImagePaths: boolean = false
+): Promise<PromptWithImages> {
+  // No images - return plain text
+  if (!imagePaths || imagePaths.length === 0) {
+    return { content: basePrompt, hasImages: false };
+  }
+
+  // Build text content with optional image path listing
+  let textContent = basePrompt;
+  if (includeImagePaths) {
+    textContent += formatImagePathsForPrompt(imagePaths);
+  }
+
+  // Build content blocks array
+  const contentBlocks: Array<{
+    type: string;
+    text?: string;
+    source?: object;
+  }> = [];
+
+  // Add text block if we have text
+  if (textContent.trim()) {
+    contentBlocks.push({ type: 'text', text: textContent });
+  }
+
+  // Add image blocks
+  const imageBlocks = await convertImagesToContentBlocks(imagePaths, workDir);
+  contentBlocks.push(...imageBlocks);
+
+  // Return appropriate format
+  const content: PromptContent =
+    contentBlocks.length > 1 || contentBlocks[0]?.type === 'image' ? contentBlocks : textContent;
+
+  return { content, hasImages: true };
+}
diff --git a/temp_repo/libs/utils/src/string-utils.ts b/temp_repo/libs/utils/src/string-utils.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b0c2cf24c0155a07f454f5a021b66cdc9de52ab2
--- /dev/null
+++ b/temp_repo/libs/utils/src/string-utils.ts
@@ -0,0 +1,178 @@
+/**
+ * String utility functions for common text operations
+ */
+
+/**
+ * Truncate a string to a maximum length, adding an ellipsis if truncated
+ * @param str - The string to truncate
+ * @param maxLength - Maximum length of the result (including ellipsis)
+ * @param ellipsis - The ellipsis string to use (default: '...')
+ * @returns The truncated string
+ */
+export function truncate(str: string, maxLength: number, ellipsis: string = '...'): string {
+  if (maxLength < ellipsis.length) {
+    throw new Error(
+      `maxLength (${maxLength}) must be at least the length of ellipsis (${ellipsis.length})`
+    );
+  }
+
+  if (str.length <= maxLength) {
+    return str;
+  }
+
+  return str.slice(0, maxLength - ellipsis.length) + ellipsis;
+}
+
+/**
+ * Convert a string to kebab-case (e.g., "Hello World" -> "hello-world")
+ * @param str - The string to convert
+ * @returns The kebab-case string
+ */
+export function toKebabCase(str: string): string {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1-$2') // camelCase -> camel-Case
+    .replace(/[\s_]+/g, '-') // spaces and underscores -> hyphens
+    .replace(/[^a-zA-Z0-9-]/g, '') // remove non-alphanumeric (except hyphens)
+    .replace(/-+/g, '-') // collapse multiple hyphens
+    .replace(/^-|-$/g, '') // remove leading/trailing hyphens
+    .toLowerCase();
+}
+
+/**
+ * Convert a string to camelCase (e.g., "hello-world" -> "helloWorld")
+ * @param str - The string to convert
+ * @returns The camelCase string
+ */
+export function toCamelCase(str: string): string {
+  return str
+    .replace(/[^a-zA-Z0-9\s_-]/g, '') // remove special characters
+    .replace(/[-_\s]+(.)?/g, (_, char) => (char ? char.toUpperCase() : ''))
+    .replace(/^[A-Z]/, (char) => char.toLowerCase());
+}
+
+/**
+ * Convert a string to PascalCase (e.g., "hello-world" -> "HelloWorld")
+ * @param str - The string to convert
+ * @returns The PascalCase string
+ */
+export function toPascalCase(str: string): string {
+  const camel = toCamelCase(str);
+  return camel.charAt(0).toUpperCase() + camel.slice(1);
+}
+
+/**
+ * Capitalize the first letter of a string
+ * @param str - The string to capitalize
+ * @returns The string with first letter capitalized
+ */
+export function capitalize(str: string): string {
+  if (str.length === 0) {
+    return str;
+  }
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+/**
+ * Remove duplicate whitespace from a string, preserving single spaces
+ * @param str - The string to clean
+ * @returns The string with duplicate whitespace removed
+ */
+export function collapseWhitespace(str: string): string {
+  return str.replace(/\s+/g, ' ').trim();
+}
+
+/**
+ * Check if a string is empty or contains only whitespace
+ * @param str - The string to check
+ * @returns True if the string is blank
+ */
+export function isBlank(str: string | null | undefined): boolean {
+  return str === null || str === undefined || str.trim().length === 0;
+}
+
+/**
+ * Check if a string is not empty and contains non-whitespace characters
+ * @param str - The string to check
+ * @returns True if the string is not blank
+ */
+export function isNotBlank(str: string | null | undefined): boolean {
+  return !isBlank(str);
+}
+
+/**
+ * Safely parse a string to an integer, returning a default value on failure
+ * @param str - The string to parse
+ * @param defaultValue - The default value if parsing fails (default: 0)
+ * @returns The parsed integer or the default value
+ */
+export function safeParseInt(str: string | null | undefined, defaultValue: number = 0): number {
+  if (isBlank(str)) {
+    return defaultValue;
+  }
+
+  const parsed = parseInt(str!, 10);
+  return isNaN(parsed) ? defaultValue : parsed;
+}
+
+/**
+ * Generate a slug from a string (URL-friendly identifier)
+ * @param str - The string to convert to a slug
+ * @param maxLength - Optional maximum length for the slug
+ * @returns The slugified string
+ */
+export function slugify(str: string, maxLength?: number): string {
+  let slug = str
+    .toLowerCase()
+    .normalize('NFD') // Normalize unicode characters
+    .replace(/[\u0300-\u036f]/g, '') // Remove diacritics
+    .replace(/[^a-z0-9\s-]/g, '') // Remove non-alphanumeric
+    .replace(/\s+/g, '-') // Replace spaces with hyphens
+    .replace(/-+/g, '-') // Collapse multiple hyphens
+    .replace(/^-|-$/g, ''); // Remove leading/trailing hyphens
+
+  if (maxLength !== undefined && slug.length > maxLength) {
+    // Truncate at word boundary if possible
+    slug = slug.slice(0, maxLength);
+    const lastHyphen = slug.lastIndexOf('-');
+    if (lastHyphen > maxLength * 0.5) {
+      slug = slug.slice(0, lastHyphen);
+    }
+    slug = slug.replace(/-$/g, ''); // Remove trailing hyphen after truncation
+  }
+
+  return slug;
+}
+
+/**
+ * Escape special regex characters in a string
+ * @param str - The string to escape
+ * @returns The escaped string safe for use in a RegExp
+ */
+export function escapeRegex(str: string): string {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * Pluralize a word based on count
+ * @param word - The singular form of the word
+ * @param count - The count to base pluralization on
+ * @param pluralForm - Optional custom plural form (default: word + 's')
+ * @returns The word in singular or plural form
+ */
+export function pluralize(word: string, count: number, pluralForm?: string): string {
+  if (count === 1) {
+    return word;
+  }
+  return pluralForm || `${word}s`;
+}
+
+/**
+ * Format a count with its associated word (e.g., "1 item", "3 items")
+ * @param count - The count
+ * @param singular - The singular form of the word
+ * @param plural - Optional custom plural form
+ * @returns Formatted string with count and word
+ */
+export function formatCount(count: number, singular: string, plural?: string): string {
+  return `${count} ${pluralize(singular, count, plural)}`;
+}
diff --git a/temp_repo/libs/utils/tests/atomic-writer.test.ts b/temp_repo/libs/utils/tests/atomic-writer.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c482495fa9f1bd34d702e9204ae1f02640c20dac
--- /dev/null
+++ b/temp_repo/libs/utils/tests/atomic-writer.test.ts
@@ -0,0 +1,720 @@
+import { describe, it, expect, beforeEach, afterEach, vi, type MockInstance } from 'vitest';
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+import { secureFs } from '@automaker/platform';
+import {
+  atomicWriteJson,
+  readJsonFile,
+  updateJsonAtomically,
+  readJsonWithRecovery,
+} from '../src/atomic-writer';
+
+// Mock secureFs
+vi.mock('@automaker/platform', () => ({
+  secureFs: {
+    writeFile: vi.fn(),
+    readFile: vi.fn(),
+    rename: vi.fn(),
+    unlink: vi.fn(),
+    readdir: vi.fn(),
+    copyFile: vi.fn(),
+    access: vi.fn(),
+    lstat: vi.fn(),
+    mkdir: vi.fn(),
+  },
+}));
+
+// Mock logger to suppress output during tests
+vi.mock('../src/logger.js', () => ({
+  createLogger: () => ({
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    debug: vi.fn(),
+  }),
+}));
+
+describe('atomic-writer.ts', () => {
+  let tempDir: string;
+
+  beforeEach(async () => {
+    // Create a temporary directory for integration tests
+    tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'atomic-writer-test-'));
+    vi.clearAllMocks();
+    // Default: parent directory exists (atomicWriteJson always ensures parent dir)
+    (secureFs.lstat as unknown as MockInstance).mockResolvedValue({
+      isDirectory: () => true,
+      isSymbolicLink: () => false,
+    });
+  });
+
+  afterEach(async () => {
+    // Clean up temporary directory
+    try {
+      await fs.rm(tempDir, { recursive: true, force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe('atomicWriteJson', () => {
+    it('should write JSON data atomically', async () => {
+      const filePath = path.join(tempDir, 'test.json');
+      const data = { key: 'value', number: 42 };
+
+      (secureFs.writeFile as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await atomicWriteJson(filePath, data);
+
+      // Verify writeFile was called with temp file path and JSON content
+      // Format: .tmp.{timestamp}.{random-hex}
+      expect(secureFs.writeFile).toHaveBeenCalledTimes(1);
+      const writeCall = (secureFs.writeFile as unknown as MockInstance).mock.calls[0];
+      expect(writeCall[0]).toMatch(/\.tmp\.\d+\.[a-f0-9]+$/);
+      expect(writeCall[1]).toBe(JSON.stringify(data, null, 2));
+      expect(writeCall[2]).toBe('utf-8');
+
+      // Verify rename was called with temp -> target
+      expect(secureFs.rename).toHaveBeenCalledTimes(1);
+      const renameCall = (secureFs.rename as unknown as MockInstance).mock.calls[0];
+      expect(renameCall[0]).toMatch(/\.tmp\.\d+\.[a-f0-9]+$/);
+      expect(renameCall[1]).toBe(path.resolve(filePath));
+    });
+
+    it('should use custom indentation', async () => {
+      const filePath = path.join(tempDir, 'test.json');
+      const data = { key: 'value' };
+
+      (secureFs.writeFile as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await atomicWriteJson(filePath, data, { indent: 4 });
+
+      const writeCall = (secureFs.writeFile as unknown as MockInstance).mock.calls[0];
+      expect(writeCall[1]).toBe(JSON.stringify(data, null, 4));
+    });
+
+    it('should clean up temp file on write failure', async () => {
+      const filePath = path.join(tempDir, 'test.json');
+      const data = { key: 'value' };
+
+      const writeError = new Error('Write failed');
+      (secureFs.writeFile as unknown as MockInstance).mockRejectedValue(writeError);
+      (secureFs.unlink as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await expect(atomicWriteJson(filePath, data)).rejects.toThrow('Write failed');
+
+      expect(secureFs.unlink).toHaveBeenCalledTimes(1);
+    });
+
+    it('should clean up temp file on rename failure', async () => {
+      const filePath = path.join(tempDir, 'test.json');
+      const data = { key: 'value' };
+
+      const renameError = new Error('Rename failed');
+      (secureFs.writeFile as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.rename as unknown as MockInstance).mockRejectedValue(renameError);
+      (secureFs.unlink as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await expect(atomicWriteJson(filePath, data)).rejects.toThrow('Rename failed');
+
+      expect(secureFs.unlink).toHaveBeenCalledTimes(1);
+    });
+
+    it('should ignore cleanup errors', async () => {
+      const filePath = path.join(tempDir, 'test.json');
+      const data = { key: 'value' };
+
+      const writeError = new Error('Write failed');
+      const unlinkError = new Error('Unlink failed');
+      (secureFs.writeFile as unknown as MockInstance).mockRejectedValue(writeError);
+      (secureFs.unlink as unknown as MockInstance).mockRejectedValue(unlinkError);
+
+      // Should still throw the original error, not the cleanup error
+      await expect(atomicWriteJson(filePath, data)).rejects.toThrow('Write failed');
+    });
+
+    it('should resolve relative paths', async () => {
+      const relativePath = 'test.json';
+      const data = { key: 'value' };
+
+      (secureFs.writeFile as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await atomicWriteJson(relativePath, data);
+
+      const renameCall = (secureFs.rename as unknown as MockInstance).mock.calls[0];
+      expect(renameCall[1]).toBe(path.resolve(relativePath));
+    });
+
+    it('should handle arrays as data', async () => {
+      const filePath = path.join(tempDir, 'array.json');
+      const data = [1, 2, 3, { nested: 'value' }];
+
+      (secureFs.writeFile as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await atomicWriteJson(filePath, data);
+
+      const writeCall = (secureFs.writeFile as unknown as MockInstance).mock.calls[0];
+      expect(writeCall[1]).toBe(JSON.stringify(data, null, 2));
+    });
+
+    it('should handle null and primitive values', async () => {
+      const filePath = path.join(tempDir, 'primitive.json');
+
+      (secureFs.writeFile as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await atomicWriteJson(filePath, null);
+      expect((secureFs.writeFile as unknown as MockInstance).mock.calls[0][1]).toBe('null');
+
+      await atomicWriteJson(filePath, 'string');
+      expect((secureFs.writeFile as unknown as MockInstance).mock.calls[1][1]).toBe('"string"');
+
+      await atomicWriteJson(filePath, 123);
+      expect((secureFs.writeFile as unknown as MockInstance).mock.calls[2][1]).toBe('123');
+    });
+
+    it('should always create parent directories before writing', async () => {
+      const filePath = path.join(tempDir, 'nested', 'deep', 'test.json');
+      const data = { key: 'value' };
+
+      // Mock lstat to throw ENOENT (directory doesn't exist)
+      const enoentError = new Error('Not found') as NodeJS.ErrnoException;
+      enoentError.code = 'ENOENT';
+      (secureFs.lstat as unknown as MockInstance).mockRejectedValue(enoentError);
+      (secureFs.mkdir as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.writeFile as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await atomicWriteJson(filePath, data);
+
+      // Should have called mkdir to create parent directories
+      expect(secureFs.mkdir).toHaveBeenCalledWith(
+        path.resolve(path.join(tempDir, 'nested', 'deep')),
+        { recursive: true }
+      );
+      expect(secureFs.writeFile).toHaveBeenCalled();
+    });
+  });
+
+  describe('readJsonFile', () => {
+    it('should read and parse JSON file', async () => {
+      const filePath = path.join(tempDir, 'read.json');
+      const data = { key: 'value', count: 5 };
+
+      (secureFs.readFile as unknown as MockInstance).mockResolvedValue(JSON.stringify(data));
+
+      const result = await readJsonFile(filePath, {});
+
+      expect(result).toEqual(data);
+      expect(secureFs.readFile).toHaveBeenCalledWith(path.resolve(filePath), 'utf-8');
+    });
+
+    it('should return default value when file does not exist', async () => {
+      const filePath = path.join(tempDir, 'nonexistent.json');
+      const defaultValue = { default: true };
+
+      const enoentError = new Error('File not found') as NodeJS.ErrnoException;
+      enoentError.code = 'ENOENT';
+      (secureFs.readFile as unknown as MockInstance).mockRejectedValue(enoentError);
+
+      const result = await readJsonFile(filePath, defaultValue);
+
+      expect(result).toEqual(defaultValue);
+    });
+
+    it('should return default value when JSON is invalid', async () => {
+      const filePath = path.join(tempDir, 'invalid.json');
+      const defaultValue = { default: true };
+
+      (secureFs.readFile as unknown as MockInstance).mockResolvedValue('not valid json');
+
+      const result = await readJsonFile(filePath, defaultValue);
+
+      expect(result).toEqual(defaultValue);
+    });
+
+    it('should return default value for other read errors', async () => {
+      const filePath = path.join(tempDir, 'error.json');
+      const defaultValue = { default: true };
+
+      const accessError = new Error('Access denied') as NodeJS.ErrnoException;
+      accessError.code = 'EACCES';
+      (secureFs.readFile as unknown as MockInstance).mockRejectedValue(accessError);
+
+      const result = await readJsonFile(filePath, defaultValue);
+
+      expect(result).toEqual(defaultValue);
+    });
+
+    it('should handle empty object as default', async () => {
+      const filePath = path.join(tempDir, 'nonexistent.json');
+
+      const enoentError = new Error('File not found') as NodeJS.ErrnoException;
+      enoentError.code = 'ENOENT';
+      (secureFs.readFile as unknown as MockInstance).mockRejectedValue(enoentError);
+
+      const result = await readJsonFile<Record<string, unknown>>(filePath, {});
+
+      expect(result).toEqual({});
+    });
+
+    it('should handle array as default', async () => {
+      const filePath = path.join(tempDir, 'nonexistent.json');
+
+      const enoentError = new Error('File not found') as NodeJS.ErrnoException;
+      enoentError.code = 'ENOENT';
+      (secureFs.readFile as unknown as MockInstance).mockRejectedValue(enoentError);
+
+      const result = await readJsonFile<string[]>(filePath, []);
+
+      expect(result).toEqual([]);
+    });
+
+    it('should parse nested objects correctly', async () => {
+      const filePath = path.join(tempDir, 'nested.json');
+      const data = {
+        level1: {
+          level2: {
+            value: 'deep',
+            array: [1, 2, { nested: true }],
+          },
+        },
+      };
+
+      (secureFs.readFile as unknown as MockInstance).mockResolvedValue(JSON.stringify(data));
+
+      const result = await readJsonFile(filePath, {});
+
+      expect(result).toEqual(data);
+    });
+  });
+
+  describe('updateJsonAtomically', () => {
+    it('should read, update, and write file atomically', async () => {
+      const filePath = path.join(tempDir, 'update.json');
+      const initialData = { count: 5 };
+      const defaultValue = { count: 0 };
+
+      (secureFs.readFile as unknown as MockInstance).mockResolvedValue(JSON.stringify(initialData));
+      (secureFs.writeFile as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await updateJsonAtomically(filePath, defaultValue, (data) => ({
+        ...data,
+        count: data.count + 1,
+      }));
+
+      // Verify the write was called with updated data
+      const writeCall = (secureFs.writeFile as unknown as MockInstance).mock.calls[0];
+      const writtenData = JSON.parse(writeCall[1]);
+      expect(writtenData.count).toBe(6);
+    });
+
+    it('should use default value when file does not exist', async () => {
+      const filePath = path.join(tempDir, 'new.json');
+      const defaultValue = { count: 0 };
+
+      const enoentError = new Error('File not found') as NodeJS.ErrnoException;
+      enoentError.code = 'ENOENT';
+      (secureFs.readFile as unknown as MockInstance).mockRejectedValue(enoentError);
+      (secureFs.writeFile as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await updateJsonAtomically(filePath, defaultValue, (data) => ({
+        ...data,
+        count: data.count + 1,
+      }));
+
+      const writeCall = (secureFs.writeFile as unknown as MockInstance).mock.calls[0];
+      const writtenData = JSON.parse(writeCall[1]);
+      expect(writtenData.count).toBe(1);
+    });
+
+    it('should support async updater function', async () => {
+      const filePath = path.join(tempDir, 'async.json');
+      const initialData = { value: 'initial' };
+
+      (secureFs.readFile as unknown as MockInstance).mockResolvedValue(JSON.stringify(initialData));
+      (secureFs.writeFile as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await updateJsonAtomically(filePath, {}, async (data) => {
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        return { ...data, value: 'updated' };
+      });
+
+      const writeCall = (secureFs.writeFile as unknown as MockInstance).mock.calls[0];
+      const writtenData = JSON.parse(writeCall[1]);
+      expect(writtenData.value).toBe('updated');
+    });
+
+    it('should pass through options to atomicWriteJson', async () => {
+      const filePath = path.join(tempDir, 'options.json');
+
+      const enoentError = new Error('File not found') as NodeJS.ErrnoException;
+      enoentError.code = 'ENOENT';
+      (secureFs.readFile as unknown as MockInstance).mockRejectedValue(enoentError);
+      (secureFs.writeFile as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await updateJsonAtomically(filePath, { key: 'value' }, (d) => d, { indent: 4 });
+
+      const writeCall = (secureFs.writeFile as unknown as MockInstance).mock.calls[0];
+      expect(writeCall[1]).toBe(JSON.stringify({ key: 'value' }, null, 4));
+    });
+  });
+
+  describe('readJsonWithRecovery', () => {
+    it('should return main file data when available', async () => {
+      const filePath = path.join(tempDir, 'main.json');
+      const data = { main: true };
+
+      (secureFs.readFile as unknown as MockInstance).mockResolvedValue(JSON.stringify(data));
+
+      const result = await readJsonWithRecovery(filePath, {});
+
+      expect(result.data).toEqual(data);
+      expect(result.recovered).toBe(false);
+      expect(result.source).toBe('main');
+      expect(result.error).toBeUndefined();
+    });
+
+    it('should recover from temp file when main file is missing', async () => {
+      const filePath = path.join(tempDir, 'data.json');
+      const tempData = { fromTemp: true };
+      const fileName = path.basename(filePath);
+
+      const enoentError = new Error('File not found') as NodeJS.ErrnoException;
+      enoentError.code = 'ENOENT';
+
+      (secureFs.readFile as unknown as MockInstance)
+        .mockRejectedValueOnce(enoentError) // Main file
+        .mockResolvedValueOnce(JSON.stringify(tempData)); // Temp file
+
+      (secureFs.readdir as unknown as MockInstance).mockResolvedValue([
+        `${fileName}.tmp.1234567890`,
+        'other-file.json',
+      ]);
+
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      const result = await readJsonWithRecovery(filePath, {});
+
+      expect(result.data).toEqual(tempData);
+      expect(result.recovered).toBe(true);
+      expect(result.source).toBe('temp');
+      expect(result.error).toBe('File does not exist');
+    });
+
+    it('should recover from backup file when main and temp are unavailable', async () => {
+      const filePath = path.join(tempDir, 'data.json');
+      const backupData = { fromBackup: true };
+
+      const enoentError = new Error('File not found') as NodeJS.ErrnoException;
+      enoentError.code = 'ENOENT';
+
+      (secureFs.readFile as unknown as MockInstance)
+        .mockRejectedValueOnce(enoentError) // Main file
+        .mockRejectedValueOnce(enoentError) // backup1
+        .mockResolvedValueOnce(JSON.stringify(backupData)); // backup2
+
+      (secureFs.readdir as unknown as MockInstance).mockResolvedValue([]); // No temp files
+
+      (secureFs.copyFile as unknown as MockInstance).mockResolvedValue(undefined);
+
+      const result = await readJsonWithRecovery(filePath, {});
+
+      expect(result.data).toEqual(backupData);
+      expect(result.recovered).toBe(true);
+      expect(result.source).toBe('backup');
+    });
+
+    it('should return default when all recovery attempts fail', async () => {
+      const filePath = path.join(tempDir, 'data.json');
+      const defaultValue = { default: true };
+
+      const enoentError = new Error('File not found') as NodeJS.ErrnoException;
+      enoentError.code = 'ENOENT';
+
+      (secureFs.readFile as unknown as MockInstance).mockRejectedValue(enoentError);
+      (secureFs.readdir as unknown as MockInstance).mockResolvedValue([]);
+
+      const result = await readJsonWithRecovery(filePath, defaultValue);
+
+      expect(result.data).toEqual(defaultValue);
+      expect(result.recovered).toBe(true);
+      expect(result.source).toBe('default');
+      expect(result.error).toBe('File does not exist');
+    });
+
+    it('should try multiple temp files in order', async () => {
+      const filePath = path.join(tempDir, 'data.json');
+      const fileName = path.basename(filePath);
+      const validTempData = { valid: true };
+
+      const enoentError = new Error('File not found') as NodeJS.ErrnoException;
+      enoentError.code = 'ENOENT';
+
+      (secureFs.readFile as unknown as MockInstance)
+        .mockRejectedValueOnce(enoentError) // Main file
+        .mockResolvedValueOnce('invalid json') // First temp file (invalid)
+        .mockResolvedValueOnce(JSON.stringify(validTempData)); // Second temp file
+
+      (secureFs.readdir as unknown as MockInstance).mockResolvedValue([
+        `${fileName}.tmp.9999999999`, // Most recent
+        `${fileName}.tmp.1111111111`, // Older
+      ]);
+
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      const result = await readJsonWithRecovery(filePath, {});
+
+      expect(result.data).toEqual(validTempData);
+      expect(result.source).toBe('temp');
+    });
+
+    it('should try multiple backup files in order', async () => {
+      const filePath = path.join(tempDir, 'data.json');
+      const backupData = { backup2: true };
+
+      const enoentError = new Error('File not found') as NodeJS.ErrnoException;
+      enoentError.code = 'ENOENT';
+
+      (secureFs.readFile as unknown as MockInstance)
+        .mockRejectedValueOnce(enoentError) // Main file
+        .mockRejectedValueOnce(enoentError) // .bak1
+        .mockResolvedValueOnce(JSON.stringify(backupData)); // .bak2
+
+      (secureFs.readdir as unknown as MockInstance).mockResolvedValue([]);
+
+      (secureFs.copyFile as unknown as MockInstance).mockResolvedValue(undefined);
+
+      const result = await readJsonWithRecovery(filePath, {});
+
+      expect(result.data).toEqual(backupData);
+      expect(result.source).toBe('backup');
+
+      // Verify it tried .bak1 first
+      expect(secureFs.readFile).toHaveBeenNthCalledWith(
+        2,
+        `${path.resolve(filePath)}.bak1`,
+        'utf-8'
+      );
+    });
+
+    it('should respect maxBackups option', async () => {
+      const filePath = path.join(tempDir, 'data.json');
+      const defaultValue = { default: true };
+
+      const enoentError = new Error('File not found') as NodeJS.ErrnoException;
+      enoentError.code = 'ENOENT';
+
+      (secureFs.readFile as unknown as MockInstance).mockRejectedValue(enoentError);
+      (secureFs.readdir as unknown as MockInstance).mockResolvedValue([]);
+
+      const result = await readJsonWithRecovery(filePath, defaultValue, { maxBackups: 1 });
+
+      expect(result.source).toBe('default');
+      // Should only have tried main + 1 backup
+      expect(secureFs.readFile).toHaveBeenCalledTimes(2);
+    });
+
+    it('should not auto-restore when autoRestore is false', async () => {
+      const filePath = path.join(tempDir, 'data.json');
+      const fileName = path.basename(filePath);
+      const tempData = { fromTemp: true };
+
+      const enoentError = new Error('File not found') as NodeJS.ErrnoException;
+      enoentError.code = 'ENOENT';
+
+      (secureFs.readFile as unknown as MockInstance)
+        .mockRejectedValueOnce(enoentError)
+        .mockResolvedValueOnce(JSON.stringify(tempData));
+
+      (secureFs.readdir as unknown as MockInstance).mockResolvedValue([`${fileName}.tmp.123`]);
+
+      const result = await readJsonWithRecovery(filePath, {}, { autoRestore: false });
+
+      expect(result.data).toEqual(tempData);
+      expect(secureFs.rename).not.toHaveBeenCalled();
+      expect(secureFs.copyFile).not.toHaveBeenCalled();
+    });
+
+    it('should handle directory read errors gracefully', async () => {
+      const filePath = path.join(tempDir, 'data.json');
+      const backupData = { backup: true };
+
+      const enoentError = new Error('File not found') as NodeJS.ErrnoException;
+      enoentError.code = 'ENOENT';
+
+      (secureFs.readFile as unknown as MockInstance)
+        .mockRejectedValueOnce(enoentError) // Main file
+        .mockResolvedValueOnce(JSON.stringify(backupData)); // backup1
+
+      (secureFs.readdir as unknown as MockInstance).mockRejectedValue(new Error('Dir read failed'));
+      (secureFs.copyFile as unknown as MockInstance).mockResolvedValue(undefined);
+
+      const result = await readJsonWithRecovery(filePath, {});
+
+      // Should skip temp files and go to backups
+      expect(result.data).toEqual(backupData);
+      expect(result.source).toBe('backup');
+    });
+
+    it('should handle corrupted main file with valid error message', async () => {
+      const filePath = path.join(tempDir, 'corrupted.json');
+      const defaultValue = { default: true };
+
+      const parseError = new SyntaxError('Unexpected token');
+      (secureFs.readFile as unknown as MockInstance).mockResolvedValueOnce('{{invalid');
+      (secureFs.readdir as unknown as MockInstance).mockResolvedValue([]);
+
+      // Mock to actually throw parse error
+      (secureFs.readFile as unknown as MockInstance).mockImplementationOnce(() => {
+        return Promise.resolve('{{invalid json');
+      });
+
+      const result = await readJsonWithRecovery(filePath, defaultValue);
+
+      expect(result.recovered).toBe(true);
+      expect(result.error).toContain('Failed to parse');
+    });
+
+    it('should handle restore failures gracefully', async () => {
+      const filePath = path.join(tempDir, 'data.json');
+      const fileName = path.basename(filePath);
+      const tempData = { fromTemp: true };
+
+      const enoentError = new Error('File not found') as NodeJS.ErrnoException;
+      enoentError.code = 'ENOENT';
+
+      (secureFs.readFile as unknown as MockInstance)
+        .mockRejectedValueOnce(enoentError)
+        .mockResolvedValueOnce(JSON.stringify(tempData));
+
+      (secureFs.readdir as unknown as MockInstance).mockResolvedValue([`${fileName}.tmp.123`]);
+      (secureFs.rename as unknown as MockInstance).mockRejectedValue(new Error('Restore failed'));
+
+      const result = await readJsonWithRecovery(filePath, {});
+
+      // Should still return data even if restore failed
+      expect(result.data).toEqual(tempData);
+      expect(result.source).toBe('temp');
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle empty file path gracefully', async () => {
+      (secureFs.readFile as unknown as MockInstance).mockRejectedValue(new Error('Invalid path'));
+
+      const result = await readJsonFile('', { default: true });
+
+      expect(result).toEqual({ default: true });
+    });
+
+    it('should handle special characters in file path', async () => {
+      const filePath = path.join(tempDir, 'file with spaces & special!.json');
+      const data = { special: 'chars' };
+
+      (secureFs.writeFile as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await atomicWriteJson(filePath, data);
+
+      expect(secureFs.writeFile).toHaveBeenCalled();
+    });
+
+    it('should handle very large objects', async () => {
+      const filePath = path.join(tempDir, 'large.json');
+      const largeArray = Array.from({ length: 10000 }, (_, i) => ({
+        id: i,
+        data: `item-${i}`,
+      }));
+
+      (secureFs.writeFile as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await atomicWriteJson(filePath, largeArray);
+
+      const writeCall = (secureFs.writeFile as unknown as MockInstance).mock.calls[0];
+      expect(JSON.parse(writeCall[1])).toEqual(largeArray);
+    });
+
+    it('should handle unicode content', async () => {
+      const filePath = path.join(tempDir, 'unicode.json');
+      const data = { emoji: '🎉', japanese: 'こんにちは', chinese: '你好' };
+
+      (secureFs.writeFile as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await atomicWriteJson(filePath, data);
+
+      const writeCall = (secureFs.writeFile as unknown as MockInstance).mock.calls[0];
+      expect(JSON.parse(writeCall[1])).toEqual(data);
+    });
+
+    it('should handle circular reference error in JSON', async () => {
+      const filePath = path.join(tempDir, 'circular.json');
+      const circular: Record<string, unknown> = { key: 'value' };
+      circular.self = circular;
+
+      await expect(atomicWriteJson(filePath, circular)).rejects.toThrow();
+    });
+  });
+
+  describe('Type safety', () => {
+    interface TestConfig {
+      version: number;
+      settings: {
+        enabled: boolean;
+        name: string;
+      };
+    }
+
+    it('should preserve types in readJsonFile', async () => {
+      const filePath = path.join(tempDir, 'config.json');
+      const expected: TestConfig = {
+        version: 1,
+        settings: { enabled: true, name: 'test' },
+      };
+
+      (secureFs.readFile as unknown as MockInstance).mockResolvedValue(JSON.stringify(expected));
+
+      const result = await readJsonFile<TestConfig>(filePath, {
+        version: 0,
+        settings: { enabled: false, name: '' },
+      });
+
+      expect(result.version).toBe(1);
+      expect(result.settings.enabled).toBe(true);
+      expect(result.settings.name).toBe('test');
+    });
+
+    it('should preserve types in updateJsonAtomically', async () => {
+      const filePath = path.join(tempDir, 'counter.json');
+
+      interface Counter {
+        count: number;
+      }
+
+      (secureFs.readFile as unknown as MockInstance).mockResolvedValue(
+        JSON.stringify({ count: 5 })
+      );
+      (secureFs.writeFile as unknown as MockInstance).mockResolvedValue(undefined);
+      (secureFs.rename as unknown as MockInstance).mockResolvedValue(undefined);
+
+      await updateJsonAtomically<Counter>(filePath, { count: 0 }, (data) => ({
+        count: data.count + 1,
+      }));
+
+      const writeCall = (secureFs.writeFile as unknown as MockInstance).mock.calls[0];
+      const writtenData: Counter = JSON.parse(writeCall[1]);
+      expect(writtenData.count).toBe(6);
+    });
+  });
+});
diff --git a/temp_repo/libs/utils/tests/conversation-utils.test.ts b/temp_repo/libs/utils/tests/conversation-utils.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b2a2cf5f9b7ba09b35e9958e707258eed1cc957b
--- /dev/null
+++ b/temp_repo/libs/utils/tests/conversation-utils.test.ts
@@ -0,0 +1,241 @@
+import { describe, it, expect } from 'vitest';
+import type { ConversationMessage } from '@automaker/types';
+import {
+  extractTextFromContent,
+  normalizeContentBlocks,
+  formatHistoryAsText,
+  convertHistoryToMessages,
+} from '../src/conversation-utils';
+
+describe('conversation-utils.ts', () => {
+  describe('extractTextFromContent', () => {
+    it('should extract text from string content', () => {
+      const content = 'Hello, world!';
+      const result = extractTextFromContent(content);
+      expect(result).toBe('Hello, world!');
+    });
+
+    it('should extract text from array content with text blocks', () => {
+      const content = [
+        { type: 'text', text: 'First block' },
+        { type: 'text', text: 'Second block' },
+      ];
+      const result = extractTextFromContent(content);
+      expect(result).toBe('First block\nSecond block');
+    });
+
+    it('should filter out non-text blocks', () => {
+      const content = [
+        { type: 'text', text: 'Text block' },
+        { type: 'image', source: { data: '...' } },
+        { type: 'text', text: 'Another text' },
+      ];
+      const result = extractTextFromContent(content);
+      expect(result).toBe('Text block\nAnother text');
+    });
+
+    it('should handle empty text blocks', () => {
+      const content = [
+        { type: 'text', text: 'First' },
+        { type: 'text' },
+        { type: 'text', text: 'Third' },
+      ];
+      const result = extractTextFromContent(content);
+      expect(result).toBe('First\n\nThird');
+    });
+
+    it('should return empty string for array with only non-text blocks', () => {
+      const content = [
+        { type: 'image', source: {} },
+        { type: 'tool_use', source: {} },
+      ];
+      const result = extractTextFromContent(content);
+      expect(result).toBe('');
+    });
+
+    it('should return empty string for empty array', () => {
+      const content: Array<{ type: string; text?: string }> = [];
+      const result = extractTextFromContent(content);
+      expect(result).toBe('');
+    });
+  });
+
+  describe('normalizeContentBlocks', () => {
+    it('should convert string to array of text blocks', () => {
+      const content = 'Simple text';
+      const result = normalizeContentBlocks(content);
+      expect(result).toEqual([{ type: 'text', text: 'Simple text' }]);
+    });
+
+    it('should return array as-is', () => {
+      const content = [
+        { type: 'text', text: 'First' },
+        { type: 'image', source: {} },
+      ];
+      const result = normalizeContentBlocks(content);
+      expect(result).toBe(content);
+      expect(result).toEqual(content);
+    });
+
+    it('should handle empty string', () => {
+      const content = '';
+      const result = normalizeContentBlocks(content);
+      expect(result).toEqual([{ type: 'text', text: '' }]);
+    });
+
+    it('should handle multiline string', () => {
+      const content = 'Line 1\nLine 2\nLine 3';
+      const result = normalizeContentBlocks(content);
+      expect(result).toEqual([{ type: 'text', text: 'Line 1\nLine 2\nLine 3' }]);
+    });
+  });
+
+  describe('formatHistoryAsText', () => {
+    it('should format empty history as empty string', () => {
+      const history: ConversationMessage[] = [];
+      const result = formatHistoryAsText(history);
+      expect(result).toBe('');
+    });
+
+    it('should format single user message', () => {
+      const history: ConversationMessage[] = [{ role: 'user', content: 'Hello!' }];
+      const result = formatHistoryAsText(history);
+      expect(result).toBe('Previous conversation:\n\nUser: Hello!\n\n---\n\n');
+    });
+
+    it('should format single assistant message', () => {
+      const history: ConversationMessage[] = [{ role: 'assistant', content: 'Hi there!' }];
+      const result = formatHistoryAsText(history);
+      expect(result).toBe('Previous conversation:\n\nAssistant: Hi there!\n\n---\n\n');
+    });
+
+    it('should format conversation with multiple messages', () => {
+      const history: ConversationMessage[] = [
+        { role: 'user', content: "What's 2+2?" },
+        { role: 'assistant', content: 'The answer is 4.' },
+        { role: 'user', content: 'Thanks!' },
+      ];
+      const result = formatHistoryAsText(history);
+      expect(result).toBe(
+        'Previous conversation:\n\n' +
+          "User: What's 2+2?\n\n" +
+          'Assistant: The answer is 4.\n\n' +
+          'User: Thanks!\n\n' +
+          '---\n\n'
+      );
+    });
+
+    it('should handle array content by extracting text', () => {
+      const history: ConversationMessage[] = [
+        {
+          role: 'user',
+          content: [
+            { type: 'text', text: 'First part' },
+            { type: 'text', text: 'Second part' },
+          ],
+        },
+      ];
+      const result = formatHistoryAsText(history);
+      expect(result).toBe('Previous conversation:\n\nUser: First part\nSecond part\n\n---\n\n');
+    });
+
+    it('should handle mixed string and array content', () => {
+      const history: ConversationMessage[] = [
+        { role: 'user', content: 'String message' },
+        {
+          role: 'assistant',
+          content: [{ type: 'text', text: 'Array message' }],
+        },
+      ];
+      const result = formatHistoryAsText(history);
+      expect(result).toContain('User: String message');
+      expect(result).toContain('Assistant: Array message');
+    });
+  });
+
+  describe('convertHistoryToMessages', () => {
+    it('should convert empty history', () => {
+      const history: ConversationMessage[] = [];
+      const result = convertHistoryToMessages(history);
+      expect(result).toEqual([]);
+    });
+
+    it('should convert single user message', () => {
+      const history: ConversationMessage[] = [{ role: 'user', content: 'Hello!' }];
+      const result = convertHistoryToMessages(history);
+
+      expect(result).toHaveLength(1);
+      expect(result[0]).toMatchObject({
+        type: 'user',
+        session_id: '',
+        message: {
+          role: 'user',
+          content: [{ type: 'text', text: 'Hello!' }],
+        },
+        parent_tool_use_id: null,
+      });
+    });
+
+    it('should convert single assistant message', () => {
+      const history: ConversationMessage[] = [{ role: 'assistant', content: 'Hi there!' }];
+      const result = convertHistoryToMessages(history);
+
+      expect(result).toHaveLength(1);
+      expect(result[0]).toMatchObject({
+        type: 'assistant',
+        session_id: '',
+        message: {
+          role: 'assistant',
+          content: [{ type: 'text', text: 'Hi there!' }],
+        },
+        parent_tool_use_id: null,
+      });
+    });
+
+    it('should preserve array content as-is', () => {
+      const content = [
+        { type: 'text', text: 'Text' },
+        { type: 'image', source: { data: '...' } },
+      ];
+      const history: ConversationMessage[] = [{ role: 'user', content }];
+      const result = convertHistoryToMessages(history);
+
+      expect(result[0].message.content).toEqual(content);
+    });
+
+    it('should convert multiple messages', () => {
+      const history: ConversationMessage[] = [
+        { role: 'user', content: 'First' },
+        { role: 'assistant', content: 'Second' },
+        { role: 'user', content: 'Third' },
+      ];
+      const result = convertHistoryToMessages(history);
+
+      expect(result).toHaveLength(3);
+      expect(result[0].type).toBe('user');
+      expect(result[1].type).toBe('assistant');
+      expect(result[2].type).toBe('user');
+    });
+
+    it('should set session_id to empty string', () => {
+      const history: ConversationMessage[] = [{ role: 'user', content: 'Test' }];
+      const result = convertHistoryToMessages(history);
+
+      expect(result[0].session_id).toBe('');
+    });
+
+    it('should set parent_tool_use_id to null', () => {
+      const history: ConversationMessage[] = [{ role: 'user', content: 'Test' }];
+      const result = convertHistoryToMessages(history);
+
+      expect(result[0].parent_tool_use_id).toBeNull();
+    });
+
+    it('should normalize string content to blocks', () => {
+      const history: ConversationMessage[] = [{ role: 'user', content: 'String content' }];
+      const result = convertHistoryToMessages(history);
+
+      expect(result[0].message.content).toEqual([{ type: 'text', text: 'String content' }]);
+    });
+  });
+});
diff --git a/temp_repo/libs/utils/tests/debounce.test.ts b/temp_repo/libs/utils/tests/debounce.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bf04f6b06e76883e8c8967673f828f9316b7dbe2
--- /dev/null
+++ b/temp_repo/libs/utils/tests/debounce.test.ts
@@ -0,0 +1,330 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { debounce, throttle } from '../src/debounce.js';
+
+describe('debounce', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should delay function execution', () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced();
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(50);
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(50);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('should reset timer on subsequent calls', () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced();
+    vi.advanceTimersByTime(50);
+    debounced(); // Reset timer
+    vi.advanceTimersByTime(50);
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(50);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('should pass arguments to the function', () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced('arg1', 'arg2');
+    vi.advanceTimersByTime(100);
+
+    expect(fn).toHaveBeenCalledWith('arg1', 'arg2');
+  });
+
+  it('should use the latest arguments when called multiple times', () => {
+    const fn = vi.fn();
+    const debounced = debounce(fn, 100);
+
+    debounced('first');
+    debounced('second');
+    debounced('third');
+    vi.advanceTimersByTime(100);
+
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith('third');
+  });
+
+  describe('leading option', () => {
+    it('should call function immediately when leading is true', () => {
+      const fn = vi.fn();
+      const debounced = debounce(fn, 100, { leading: true });
+
+      debounced();
+      expect(fn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call again until wait time has passed', () => {
+      const fn = vi.fn();
+      const debounced = debounce(fn, 100, { leading: true, trailing: false });
+
+      debounced();
+      debounced();
+      debounced();
+      expect(fn).toHaveBeenCalledTimes(1);
+
+      vi.advanceTimersByTime(100);
+      debounced();
+      expect(fn).toHaveBeenCalledTimes(2);
+    });
+
+    it('should call both leading and trailing when both are true', () => {
+      const fn = vi.fn();
+      const debounced = debounce(fn, 100, { leading: true, trailing: true });
+
+      debounced('leading');
+      expect(fn).toHaveBeenCalledTimes(1);
+      expect(fn).toHaveBeenLastCalledWith('leading');
+
+      debounced('trailing');
+      vi.advanceTimersByTime(100);
+
+      expect(fn).toHaveBeenCalledTimes(2);
+      expect(fn).toHaveBeenLastCalledWith('trailing');
+    });
+  });
+
+  describe('trailing option', () => {
+    it('should not call on trailing edge when trailing is false', () => {
+      const fn = vi.fn();
+      const debounced = debounce(fn, 100, { trailing: false });
+
+      debounced();
+      vi.advanceTimersByTime(100);
+
+      expect(fn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('maxWait option', () => {
+    it('should invoke function after maxWait even with continuous calls', () => {
+      const fn = vi.fn();
+      const debounced = debounce(fn, 100, { maxWait: 200 });
+
+      // Call continuously every 50ms
+      debounced();
+      vi.advanceTimersByTime(50);
+      debounced();
+      vi.advanceTimersByTime(50);
+      debounced();
+      vi.advanceTimersByTime(50);
+      debounced();
+      vi.advanceTimersByTime(50);
+
+      // After 200ms, maxWait should trigger
+      expect(fn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should throw error if maxWait is less than wait', () => {
+      const fn = vi.fn();
+      expect(() => debounce(fn, 100, { maxWait: 50 })).toThrow(
+        'maxWait must be greater than or equal to wait'
+      );
+    });
+  });
+
+  describe('cancel method', () => {
+    it('should cancel pending invocation', () => {
+      const fn = vi.fn();
+      const debounced = debounce(fn, 100);
+
+      debounced();
+      debounced.cancel();
+      vi.advanceTimersByTime(100);
+
+      expect(fn).not.toHaveBeenCalled();
+    });
+
+    it('should reset state after cancel', () => {
+      const fn = vi.fn();
+      const debounced = debounce(fn, 100);
+
+      debounced('first');
+      debounced.cancel();
+      debounced('second');
+      vi.advanceTimersByTime(100);
+
+      expect(fn).toHaveBeenCalledTimes(1);
+      expect(fn).toHaveBeenCalledWith('second');
+    });
+  });
+
+  describe('flush method', () => {
+    it('should immediately invoke pending function', () => {
+      const fn = vi.fn();
+      const debounced = debounce(fn, 100);
+
+      debounced('value');
+      expect(fn).not.toHaveBeenCalled();
+
+      debounced.flush();
+      expect(fn).toHaveBeenCalledTimes(1);
+      expect(fn).toHaveBeenCalledWith('value');
+    });
+
+    it('should not invoke if no pending call', () => {
+      const fn = vi.fn();
+      const debounced = debounce(fn, 100);
+
+      debounced.flush();
+      expect(fn).not.toHaveBeenCalled();
+    });
+
+    it('should cancel timer after flush', () => {
+      const fn = vi.fn();
+      const debounced = debounce(fn, 100);
+
+      debounced();
+      debounced.flush();
+      vi.advanceTimersByTime(100);
+
+      expect(fn).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('pending method', () => {
+    it('should return true when there is a pending invocation', () => {
+      const fn = vi.fn();
+      const debounced = debounce(fn, 100);
+
+      expect(debounced.pending()).toBe(false);
+      debounced();
+      expect(debounced.pending()).toBe(true);
+    });
+
+    it('should return false after invocation', () => {
+      const fn = vi.fn();
+      const debounced = debounce(fn, 100);
+
+      debounced();
+      vi.advanceTimersByTime(100);
+      expect(debounced.pending()).toBe(false);
+    });
+
+    it('should return false after cancel', () => {
+      const fn = vi.fn();
+      const debounced = debounce(fn, 100);
+
+      debounced();
+      debounced.cancel();
+      expect(debounced.pending()).toBe(false);
+    });
+  });
+});
+
+describe('throttle', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should invoke function immediately by default', () => {
+    const fn = vi.fn();
+    const throttled = throttle(fn, 100);
+
+    throttled();
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not invoke again before wait time', () => {
+    const fn = vi.fn();
+    const throttled = throttle(fn, 100);
+
+    throttled();
+    throttled();
+    throttled();
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('should invoke on trailing edge with latest args', () => {
+    const fn = vi.fn();
+    const throttled = throttle(fn, 100);
+
+    throttled('first');
+    expect(fn).toHaveBeenCalledWith('first');
+
+    throttled('second');
+    throttled('third');
+    vi.advanceTimersByTime(100);
+
+    expect(fn).toHaveBeenCalledTimes(2);
+    expect(fn).toHaveBeenLastCalledWith('third');
+  });
+
+  it('should respect leading option', () => {
+    const fn = vi.fn();
+    const throttled = throttle(fn, 100, { leading: false });
+
+    throttled();
+    expect(fn).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('should respect trailing option', () => {
+    const fn = vi.fn();
+    const throttled = throttle(fn, 100, { trailing: false });
+
+    throttled('first');
+    throttled('second');
+    vi.advanceTimersByTime(100);
+
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith('first');
+  });
+
+  it('should invoke at regular intervals during continuous calls', () => {
+    const fn = vi.fn();
+    const throttled = throttle(fn, 100);
+
+    // Simulate continuous calls every 25ms for 250ms
+    for (let i = 0; i < 10; i++) {
+      throttled(i);
+      vi.advanceTimersByTime(25);
+    }
+
+    // Should be called at: 0ms (leading), 100ms, 200ms
+    // Plus one trailing call after the loop
+    expect(fn.mock.calls.length).toBeGreaterThanOrEqual(3);
+  });
+
+  it('should have cancel, flush, and pending methods', () => {
+    const fn = vi.fn();
+    const throttled = throttle(fn, 100);
+
+    expect(typeof throttled.cancel).toBe('function');
+    expect(typeof throttled.flush).toBe('function');
+    expect(typeof throttled.pending).toBe('function');
+  });
+
+  it('should cancel pending invocation', () => {
+    const fn = vi.fn();
+    const throttled = throttle(fn, 100, { leading: false });
+
+    throttled();
+    throttled.cancel();
+    vi.advanceTimersByTime(100);
+
+    expect(fn).not.toHaveBeenCalled();
+  });
+});
diff --git a/temp_repo/libs/utils/tests/error-handler.test.ts b/temp_repo/libs/utils/tests/error-handler.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..58695043694df11b9a7855a4f018a4df4db752e6
--- /dev/null
+++ b/temp_repo/libs/utils/tests/error-handler.test.ts
@@ -0,0 +1,571 @@
+import { describe, it, expect } from 'vitest';
+import {
+  isAbortError,
+  isCancellationError,
+  isAuthenticationError,
+  isRateLimitError,
+  isQuotaExhaustedError,
+  isModelNotFoundError,
+  isStreamDisconnectedError,
+  extractRetryAfter,
+  classifyError,
+  getUserFriendlyErrorMessage,
+} from '../src/error-handler';
+
+describe('error-handler.ts', () => {
+  describe('isAbortError', () => {
+    it("should return true for Error with name 'AbortError'", () => {
+      const error = new Error('Operation aborted');
+      error.name = 'AbortError';
+      expect(isAbortError(error)).toBe(true);
+    });
+
+    it("should return true for Error with message containing 'abort'", () => {
+      const error = new Error('Request was aborted');
+      expect(isAbortError(error)).toBe(true);
+    });
+
+    it('should return false for regular Error', () => {
+      const error = new Error('Something went wrong');
+      expect(isAbortError(error)).toBe(false);
+    });
+
+    it('should return false for non-Error values', () => {
+      expect(isAbortError('abort')).toBe(false);
+      expect(isAbortError(null)).toBe(false);
+      expect(isAbortError(undefined)).toBe(false);
+      expect(isAbortError({})).toBe(false);
+    });
+
+    it('should handle Error with both AbortError name and abort message', () => {
+      const error = new Error('abort');
+      error.name = 'AbortError';
+      expect(isAbortError(error)).toBe(true);
+    });
+  });
+
+  describe('isCancellationError', () => {
+    it("should return true for 'cancelled' message", () => {
+      expect(isCancellationError('Operation cancelled')).toBe(true);
+      expect(isCancellationError('CANCELLED')).toBe(true);
+    });
+
+    it("should return true for 'canceled' message (US spelling)", () => {
+      expect(isCancellationError('Operation canceled')).toBe(true);
+      expect(isCancellationError('CANCELED')).toBe(true);
+    });
+
+    it("should return true for 'stopped' message", () => {
+      expect(isCancellationError('Process stopped')).toBe(true);
+      expect(isCancellationError('STOPPED')).toBe(true);
+    });
+
+    it("should return true for 'aborted' message", () => {
+      expect(isCancellationError('Request aborted')).toBe(true);
+      expect(isCancellationError('ABORTED')).toBe(true);
+    });
+
+    it('should return false for non-cancellation messages', () => {
+      expect(isCancellationError('Something went wrong')).toBe(false);
+      expect(isCancellationError('Error occurred')).toBe(false);
+      expect(isCancellationError('')).toBe(false);
+    });
+
+    it('should be case-insensitive', () => {
+      expect(isCancellationError('CaNcElLeD')).toBe(true);
+      expect(isCancellationError('StOpPeD')).toBe(true);
+    });
+  });
+
+  describe('isAuthenticationError', () => {
+    it("should return true for 'Authentication failed' message", () => {
+      expect(isAuthenticationError('Authentication failed')).toBe(true);
+    });
+
+    it("should return true for 'Invalid API key' message", () => {
+      expect(isAuthenticationError('Invalid API key provided')).toBe(true);
+    });
+
+    it("should return true for 'authentication_failed' message", () => {
+      expect(isAuthenticationError('Error: authentication_failed')).toBe(true);
+    });
+
+    it("should return true for 'Fix external API key' message", () => {
+      expect(isAuthenticationError('Fix external API key configuration')).toBe(true);
+    });
+
+    it('should return false for non-authentication errors', () => {
+      expect(isAuthenticationError('Something went wrong')).toBe(false);
+      expect(isAuthenticationError('Network error')).toBe(false);
+      expect(isAuthenticationError('')).toBe(false);
+    });
+
+    it('should be case-sensitive', () => {
+      expect(isAuthenticationError('authentication failed')).toBe(false);
+      expect(isAuthenticationError('AUTHENTICATION FAILED')).toBe(false);
+    });
+  });
+
+  describe('isRateLimitError', () => {
+    it('should return true for errors with 429 status code', () => {
+      const error = new Error('Error: 429 Too Many Requests');
+      expect(isRateLimitError(error)).toBe(true);
+    });
+
+    it('should return true for errors with rate_limit in message', () => {
+      const error = new Error('rate_limit_error: Too many requests');
+      expect(isRateLimitError(error)).toBe(true);
+    });
+
+    it('should return true for string errors with 429', () => {
+      expect(isRateLimitError('429 - rate limit exceeded')).toBe(true);
+    });
+
+    it('should return false for non-rate-limit errors', () => {
+      const error = new Error('Something went wrong');
+      expect(isRateLimitError(error)).toBe(false);
+    });
+
+    it('should return false for null/undefined', () => {
+      expect(isRateLimitError(null)).toBe(false);
+      expect(isRateLimitError(undefined)).toBe(false);
+    });
+  });
+
+  describe('isQuotaExhaustedError', () => {
+    it('should return true for overloaded errors', () => {
+      expect(isQuotaExhaustedError(new Error('overloaded_error: service is busy'))).toBe(true);
+      expect(isQuotaExhaustedError(new Error('Server is overloaded'))).toBe(true);
+      expect(isQuotaExhaustedError(new Error('At capacity'))).toBe(true);
+    });
+
+    it('should return true for usage limit errors', () => {
+      expect(isQuotaExhaustedError(new Error('limit reached'))).toBe(true);
+      expect(isQuotaExhaustedError(new Error('Usage limit exceeded'))).toBe(true);
+      expect(isQuotaExhaustedError(new Error('quota exceeded'))).toBe(true);
+      expect(isQuotaExhaustedError(new Error('quota_exceeded'))).toBe(true);
+      expect(isQuotaExhaustedError(new Error('session limit reached'))).toBe(true);
+      expect(isQuotaExhaustedError(new Error('weekly limit hit'))).toBe(true);
+      expect(isQuotaExhaustedError(new Error('monthly limit reached'))).toBe(true);
+    });
+
+    it('should return true for billing/credit errors', () => {
+      expect(isQuotaExhaustedError(new Error('credit balance is too low'))).toBe(true);
+      expect(isQuotaExhaustedError(new Error('insufficient credits'))).toBe(true);
+      expect(isQuotaExhaustedError(new Error('insufficient balance'))).toBe(true);
+      expect(isQuotaExhaustedError(new Error('no credits remaining'))).toBe(true);
+      expect(isQuotaExhaustedError(new Error('out of credits'))).toBe(true);
+      expect(isQuotaExhaustedError(new Error('billing issue detected'))).toBe(true);
+      expect(isQuotaExhaustedError(new Error('payment required'))).toBe(true);
+    });
+
+    it('should return true for upgrade prompts', () => {
+      expect(isQuotaExhaustedError(new Error('Please /upgrade your plan'))).toBe(true);
+      expect(isQuotaExhaustedError(new Error('extra-usage not enabled'))).toBe(true);
+    });
+
+    it('should return false for regular errors', () => {
+      expect(isQuotaExhaustedError(new Error('Something went wrong'))).toBe(false);
+      expect(isQuotaExhaustedError(new Error('Network error'))).toBe(false);
+      expect(isQuotaExhaustedError(new Error(''))).toBe(false);
+    });
+
+    it('should return false for null/undefined', () => {
+      expect(isQuotaExhaustedError(null)).toBe(false);
+      expect(isQuotaExhaustedError(undefined)).toBe(false);
+    });
+
+    it('should handle string errors', () => {
+      expect(isQuotaExhaustedError('overloaded')).toBe(true);
+      expect(isQuotaExhaustedError('regular error')).toBe(false);
+    });
+  });
+
+  describe('isModelNotFoundError', () => {
+    it('should return true for "does not exist or you do not have access" errors', () => {
+      expect(
+        isModelNotFoundError(
+          new Error('The model `gpt-5.3-codex` does not exist or you do not have access to it.')
+        )
+      ).toBe(true);
+    });
+
+    it('should return true for model_not_found errors', () => {
+      expect(isModelNotFoundError(new Error('model_not_found: gpt-5.3-codex'))).toBe(true);
+    });
+
+    it('should return true for invalid_model errors', () => {
+      expect(isModelNotFoundError(new Error('invalid_model: unknown model'))).toBe(true);
+    });
+
+    it('should return true for "model does not exist" errors', () => {
+      expect(isModelNotFoundError(new Error('The model does not exist'))).toBe(true);
+    });
+
+    it('should return true for "model not found" errors', () => {
+      expect(isModelNotFoundError(new Error('model not found'))).toBe(true);
+    });
+
+    it('should return false for regular errors', () => {
+      expect(isModelNotFoundError(new Error('Something went wrong'))).toBe(false);
+      expect(isModelNotFoundError(new Error('Network error'))).toBe(false);
+    });
+
+    it('should return false for null/undefined', () => {
+      expect(isModelNotFoundError(null)).toBe(false);
+      expect(isModelNotFoundError(undefined)).toBe(false);
+    });
+  });
+
+  describe('isStreamDisconnectedError', () => {
+    it('should return true for "stream disconnected" errors', () => {
+      expect(isStreamDisconnectedError(new Error('stream disconnected before completion'))).toBe(
+        true
+      );
+    });
+
+    it('should return true for "stream ended" errors', () => {
+      expect(isStreamDisconnectedError(new Error('stream ended unexpectedly'))).toBe(true);
+    });
+
+    it('should return true for "connection reset" errors', () => {
+      expect(isStreamDisconnectedError(new Error('connection reset by peer'))).toBe(true);
+    });
+
+    it('should return true for "socket hang up" errors', () => {
+      expect(isStreamDisconnectedError(new Error('socket hang up'))).toBe(true);
+    });
+
+    it('should return true for ECONNRESET errors', () => {
+      expect(isStreamDisconnectedError(new Error('ECONNRESET'))).toBe(true);
+    });
+
+    it('should return false for regular errors', () => {
+      expect(isStreamDisconnectedError(new Error('Something went wrong'))).toBe(false);
+      expect(isStreamDisconnectedError(new Error('Network error'))).toBe(false);
+    });
+
+    it('should return false for null/undefined', () => {
+      expect(isStreamDisconnectedError(null)).toBe(false);
+      expect(isStreamDisconnectedError(undefined)).toBe(false);
+    });
+  });
+
+  describe('extractRetryAfter', () => {
+    it('should extract retry-after from error message', () => {
+      const error = new Error('Rate limit exceeded. retry-after: 60');
+      expect(extractRetryAfter(error)).toBe(60);
+    });
+
+    it('should extract from retry_after format', () => {
+      const error = new Error('retry_after: 120 seconds');
+      expect(extractRetryAfter(error)).toBe(120);
+    });
+
+    it('should extract from wait format', () => {
+      const error = new Error('Please wait: 30 seconds before retrying');
+      expect(extractRetryAfter(error)).toBe(30);
+    });
+
+    it('should return undefined for rate limit errors without explicit retry-after', () => {
+      const error = new Error('429 rate_limit_error');
+      expect(extractRetryAfter(error)).toBeUndefined();
+    });
+
+    it('should return undefined for non-rate-limit errors', () => {
+      const error = new Error('Something went wrong');
+      expect(extractRetryAfter(error)).toBeUndefined();
+    });
+
+    it('should handle string errors', () => {
+      expect(extractRetryAfter('retry-after: 45')).toBe(45);
+    });
+  });
+
+  describe('classifyError', () => {
+    it('should classify authentication errors', () => {
+      const error = new Error('Authentication failed');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('authentication');
+      expect(result.isAuth).toBe(true);
+      expect(result.isAbort).toBe(false);
+      expect(result.isCancellation).toBe(false);
+      expect(result.isRateLimit).toBe(false);
+      expect(result.isQuotaExhausted).toBe(false);
+      expect(result.message).toBe('Authentication failed');
+      expect(result.originalError).toBe(error);
+    });
+
+    it('should classify quota exhausted errors', () => {
+      const error = new Error('overloaded_error: service is busy');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('quota_exhausted');
+      expect(result.isQuotaExhausted).toBe(true);
+      expect(result.isRateLimit).toBe(false);
+      expect(result.isAuth).toBe(false);
+    });
+
+    it('should classify credit balance errors as quota exhausted', () => {
+      const error = new Error('credit balance is too low');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('quota_exhausted');
+      expect(result.isQuotaExhausted).toBe(true);
+    });
+
+    it('should classify usage limit errors as quota exhausted', () => {
+      const error = new Error('usage limit reached');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('quota_exhausted');
+      expect(result.isQuotaExhausted).toBe(true);
+    });
+
+    it('should classify rate limit errors', () => {
+      const error = new Error('Error: 429 rate_limit_error');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('rate_limit');
+      expect(result.isRateLimit).toBe(true);
+      expect(result.isAuth).toBe(false);
+      expect(result.retryAfter).toBe(60); // Default
+    });
+
+    it('should extract retryAfter from rate limit errors', () => {
+      const error = new Error('429 - retry-after: 120');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('rate_limit');
+      expect(result.isRateLimit).toBe(true);
+      expect(result.retryAfter).toBe(120);
+    });
+
+    it('should classify abort errors', () => {
+      const error = new Error('aborted');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('abort');
+      expect(result.isAbort).toBe(true);
+      expect(result.isAuth).toBe(false);
+      expect(result.message).toBe('aborted');
+    });
+
+    it('should classify AbortError by name', () => {
+      const error = new Error('Request cancelled');
+      error.name = 'AbortError';
+      const result = classifyError(error);
+
+      expect(result.type).toBe('abort');
+      expect(result.isAbort).toBe(true);
+    });
+
+    it('should classify cancellation errors', () => {
+      const error = new Error('Operation cancelled');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('cancellation');
+      expect(result.isCancellation).toBe(true);
+      expect(result.isAbort).toBe(false);
+    });
+
+    it('should classify model not found errors', () => {
+      const error = new Error(
+        'The model `gpt-5.3-codex` does not exist or you do not have access to it.'
+      );
+      const result = classifyError(error);
+
+      expect(result.type).toBe('model_not_found');
+      expect(result.isModelNotFound).toBe(true);
+      expect(result.isStreamDisconnected).toBe(false);
+      expect(result.isAuth).toBe(false);
+    });
+
+    it('should classify stream disconnected errors', () => {
+      const error = new Error('stream disconnected before completion');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('stream_disconnected');
+      expect(result.isStreamDisconnected).toBe(true);
+      expect(result.isModelNotFound).toBe(false);
+      expect(result.isAuth).toBe(false);
+    });
+
+    it('should classify execution errors (regular Error)', () => {
+      const error = new Error('Something went wrong');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('execution');
+      expect(result.isAuth).toBe(false);
+      expect(result.isAbort).toBe(false);
+      expect(result.isCancellation).toBe(false);
+    });
+
+    it('should classify unknown errors (non-Error)', () => {
+      const result = classifyError('string error');
+
+      expect(result.type).toBe('unknown');
+      expect(result.message).toBe('string error');
+    });
+
+    it('should handle null/undefined errors', () => {
+      const result1 = classifyError(null);
+      expect(result1.type).toBe('unknown');
+      expect(result1.message).toBe('Unknown error');
+
+      const result2 = classifyError(undefined);
+      expect(result2.type).toBe('unknown');
+      expect(result2.message).toBe('Unknown error');
+    });
+
+    it('should prioritize authentication over rate limit', () => {
+      const error = new Error('Authentication failed - 429');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('authentication');
+      expect(result.isAuth).toBe(true);
+      expect(result.isRateLimit).toBe(true); // Both flags can be true
+    });
+
+    it('should prioritize rate limit over abort', () => {
+      const error = new Error('429 rate_limit - aborted');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('rate_limit');
+      expect(result.isRateLimit).toBe(true);
+      expect(result.isAbort).toBe(true);
+    });
+
+    it('should prioritize authentication over abort', () => {
+      const error = new Error('Authentication failed - aborted');
+      const result = classifyError(error);
+
+      expect(result.type).toBe('authentication');
+      expect(result.isAuth).toBe(true);
+      expect(result.isAbort).toBe(true); // Both flags can be true
+    });
+
+    it('should prioritize abort over cancellation', () => {
+      const error = new Error('Request cancelled');
+      error.name = 'AbortError';
+      const result = classifyError(error);
+
+      expect(result.type).toBe('abort');
+      expect(result.isAbort).toBe(true);
+      expect(result.isCancellation).toBe(true); // Both flags can be true
+    });
+
+    it('should convert object errors to string', () => {
+      const result = classifyError({ code: 500, message: 'Server error' });
+      expect(result.message).toContain('Object');
+    });
+
+    it('should convert number errors to string', () => {
+      const result = classifyError(404);
+      expect(result.message).toBe('404');
+      expect(result.type).toBe('unknown');
+    });
+  });
+
+  describe('getUserFriendlyErrorMessage', () => {
+    it('should return friendly message for abort errors', () => {
+      const error = new Error('abort');
+      const message = getUserFriendlyErrorMessage(error);
+
+      expect(message).toBe('Operation was cancelled');
+    });
+
+    it('should return friendly message for AbortError by name', () => {
+      const error = new Error('Something');
+      error.name = 'AbortError';
+      const message = getUserFriendlyErrorMessage(error);
+
+      expect(message).toBe('Operation was cancelled');
+    });
+
+    it('should return friendly message for authentication errors', () => {
+      const error = new Error('Authentication failed');
+      const message = getUserFriendlyErrorMessage(error);
+
+      expect(message).toBe('Authentication failed. Please check your API key.');
+    });
+
+    it('should return friendly message for model not found errors', () => {
+      const error = new Error(
+        'The model `gpt-5.3-codex` does not exist or you do not have access to it.'
+      );
+      const message = getUserFriendlyErrorMessage(error);
+
+      expect(message).toContain('Model not available');
+      expect(message).toContain('codex login');
+    });
+
+    it('should return friendly message for stream disconnected errors', () => {
+      const error = new Error('stream disconnected before completion');
+      const message = getUserFriendlyErrorMessage(error);
+
+      expect(message).toContain('Connection interrupted');
+      expect(message).toContain('stream was disconnected');
+    });
+
+    it('should return friendly message for quota exhausted errors', () => {
+      const error = new Error('overloaded_error');
+      const message = getUserFriendlyErrorMessage(error);
+
+      expect(message).toContain('Usage limit reached');
+      expect(message).toContain('Auto Mode has been paused');
+    });
+
+    it('should return friendly message for rate limit errors', () => {
+      const error = new Error('429 rate_limit_error');
+      const message = getUserFriendlyErrorMessage(error);
+
+      expect(message).toContain('Rate limit exceeded');
+      expect(message).toContain('60 seconds');
+    });
+
+    it('should include custom retry-after in rate limit message', () => {
+      const error = new Error('429 - retry-after: 120');
+      const message = getUserFriendlyErrorMessage(error);
+
+      expect(message).toContain('Rate limit exceeded');
+      expect(message).toContain('120 seconds');
+    });
+
+    it('should prioritize abort message over auth', () => {
+      const error = new Error('Authentication failed - abort');
+      const message = getUserFriendlyErrorMessage(error);
+
+      // Auth is checked first in classifyError, but abort check happens before auth in getUserFriendlyErrorMessage
+      expect(message).toBe('Operation was cancelled');
+    });
+
+    it('should return original message for other errors', () => {
+      const error = new Error('Network timeout');
+      const message = getUserFriendlyErrorMessage(error);
+
+      expect(message).toBe('Network timeout');
+    });
+
+    it('should handle non-Error values', () => {
+      expect(getUserFriendlyErrorMessage('string error')).toBe('string error');
+      expect(getUserFriendlyErrorMessage(null)).toBe('Unknown error');
+      expect(getUserFriendlyErrorMessage(undefined)).toBe('Unknown error');
+    });
+
+    it('should return original message for cancellation errors', () => {
+      const error = new Error('Operation cancelled by user');
+      const message = getUserFriendlyErrorMessage(error);
+
+      expect(message).toBe('Operation cancelled by user');
+    });
+
+    it('should handle Error without message', () => {
+      const error = new Error();
+      const message = getUserFriendlyErrorMessage(error);
+
+      expect(message).toBe('');
+    });
+  });
+});
diff --git a/temp_repo/libs/utils/tests/fs-utils.test.ts b/temp_repo/libs/utils/tests/fs-utils.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..42c0ab073f612fc38ed7b4fb30dbac45da53ec4f
--- /dev/null
+++ b/temp_repo/libs/utils/tests/fs-utils.test.ts
@@ -0,0 +1,246 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+import { mkdirSafe, existsSafe } from '../src/fs-utils';
+
+describe('fs-utils.ts', () => {
+  let tempDir: string;
+
+  beforeEach(async () => {
+    // Create a temporary directory for testing
+    tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'fs-utils-test-'));
+  });
+
+  afterEach(async () => {
+    // Clean up temporary directory
+    try {
+      await fs.rm(tempDir, { recursive: true, force: true });
+    } catch (error) {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe('mkdirSafe', () => {
+    it('should create a new directory', async () => {
+      const newDir = path.join(tempDir, 'new-directory');
+
+      await mkdirSafe(newDir);
+
+      const stats = await fs.stat(newDir);
+      expect(stats.isDirectory()).toBe(true);
+    });
+
+    it('should create nested directories recursively', async () => {
+      const nestedDir = path.join(tempDir, 'level1', 'level2', 'level3');
+
+      await mkdirSafe(nestedDir);
+
+      const stats = await fs.stat(nestedDir);
+      expect(stats.isDirectory()).toBe(true);
+    });
+
+    it('should succeed when directory already exists', async () => {
+      const existingDir = path.join(tempDir, 'existing');
+      await fs.mkdir(existingDir);
+
+      await expect(mkdirSafe(existingDir)).resolves.not.toThrow();
+    });
+
+    it('should succeed when path is a symlink to a directory', async () => {
+      const targetDir = path.join(tempDir, 'target');
+      const symlinkPath = path.join(tempDir, 'symlink');
+
+      await fs.mkdir(targetDir);
+      await fs.symlink(targetDir, symlinkPath, 'dir');
+
+      await expect(mkdirSafe(symlinkPath)).resolves.not.toThrow();
+    });
+
+    it('should throw when path exists as a file', async () => {
+      const filePath = path.join(tempDir, 'existing-file.txt');
+      await fs.writeFile(filePath, 'content');
+
+      await expect(mkdirSafe(filePath)).rejects.toThrow('Path exists and is not a directory');
+    });
+
+    it('should resolve relative paths', async () => {
+      const originalCwd = process.cwd();
+      try {
+        process.chdir(tempDir);
+
+        await mkdirSafe('relative-dir');
+
+        const stats = await fs.stat(path.join(tempDir, 'relative-dir'));
+        expect(stats.isDirectory()).toBe(true);
+      } finally {
+        process.chdir(originalCwd);
+      }
+    });
+
+    it('should handle concurrent creation gracefully', async () => {
+      const newDir = path.join(tempDir, 'concurrent');
+
+      const promises = [mkdirSafe(newDir), mkdirSafe(newDir), mkdirSafe(newDir)];
+
+      await expect(Promise.all(promises)).resolves.not.toThrow();
+
+      const stats = await fs.stat(newDir);
+      expect(stats.isDirectory()).toBe(true);
+    });
+
+    it('should handle paths with special characters', async () => {
+      const specialDir = path.join(tempDir, 'dir with spaces & special-chars');
+
+      await mkdirSafe(specialDir);
+
+      const stats = await fs.stat(specialDir);
+      expect(stats.isDirectory()).toBe(true);
+    });
+  });
+
+  describe('existsSafe', () => {
+    it('should return true for existing directory', async () => {
+      const existingDir = path.join(tempDir, 'exists');
+      await fs.mkdir(existingDir);
+
+      const result = await existsSafe(existingDir);
+
+      expect(result).toBe(true);
+    });
+
+    it('should return true for existing file', async () => {
+      const filePath = path.join(tempDir, 'file.txt');
+      await fs.writeFile(filePath, 'content');
+
+      const result = await existsSafe(filePath);
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false for non-existent path', async () => {
+      const nonExistent = path.join(tempDir, 'does-not-exist');
+
+      const result = await existsSafe(nonExistent);
+
+      expect(result).toBe(false);
+    });
+
+    it('should return true for symlink', async () => {
+      const target = path.join(tempDir, 'target.txt');
+      const symlink = path.join(tempDir, 'link.txt');
+
+      await fs.writeFile(target, 'content');
+      await fs.symlink(target, symlink);
+
+      const result = await existsSafe(symlink);
+
+      expect(result).toBe(true);
+    });
+
+    it('should return true for broken symlink', async () => {
+      const symlink = path.join(tempDir, 'broken-link');
+
+      // Create symlink to non-existent target
+      await fs.symlink('/non/existent/path', symlink);
+
+      const result = await existsSafe(symlink);
+
+      // lstat succeeds on broken symlinks
+      expect(result).toBe(true);
+    });
+
+    it('should handle relative paths', async () => {
+      const originalCwd = process.cwd();
+      try {
+        process.chdir(tempDir);
+
+        await fs.writeFile('test.txt', 'content');
+
+        const result = await existsSafe('test.txt');
+
+        expect(result).toBe(true);
+      } finally {
+        process.chdir(originalCwd);
+      }
+    });
+
+    it('should handle paths with special characters', async () => {
+      const specialFile = path.join(tempDir, 'file with spaces & chars.txt');
+      await fs.writeFile(specialFile, 'content');
+
+      const result = await existsSafe(specialFile);
+
+      expect(result).toBe(true);
+    });
+
+    it('should return false for parent of non-existent nested path', async () => {
+      const nonExistent = path.join(tempDir, 'does', 'not', 'exist');
+
+      const result = await existsSafe(nonExistent);
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('Error handling', () => {
+    it('should handle permission errors in mkdirSafe', async () => {
+      // Skip on Windows where permissions work differently
+      if (process.platform === 'win32') {
+        return;
+      }
+
+      const restrictedDir = path.join(tempDir, 'restricted');
+      await fs.mkdir(restrictedDir);
+
+      // Make directory read-only
+      await fs.chmod(restrictedDir, 0o444);
+
+      const newDir = path.join(restrictedDir, 'new');
+
+      try {
+        await expect(mkdirSafe(newDir)).rejects.toThrow();
+      } finally {
+        // Restore permissions for cleanup
+        await fs.chmod(restrictedDir, 0o755);
+      }
+    });
+
+    it('should propagate unexpected errors in existsSafe', async () => {
+      const mockError = new Error('Unexpected error');
+      (mockError as any).code = 'EACCES';
+
+      const spy = vi.spyOn(fs, 'lstat').mockRejectedValueOnce(mockError);
+
+      await expect(existsSafe('/some/path')).rejects.toThrow('Unexpected error');
+
+      spy.mockRestore();
+    });
+  });
+
+  describe('Integration scenarios', () => {
+    it('should work together: check existence then create if missing', async () => {
+      const dirPath = path.join(tempDir, 'check-then-create');
+
+      const existsBefore = await existsSafe(dirPath);
+      expect(existsBefore).toBe(false);
+
+      await mkdirSafe(dirPath);
+
+      const existsAfter = await existsSafe(dirPath);
+      expect(existsAfter).toBe(true);
+    });
+
+    it('should handle nested directory creation with existence checks', async () => {
+      const level1 = path.join(tempDir, 'level1');
+      const level2 = path.join(level1, 'level2');
+      const level3 = path.join(level2, 'level3');
+
+      await mkdirSafe(level3);
+
+      expect(await existsSafe(level1)).toBe(true);
+      expect(await existsSafe(level2)).toBe(true);
+      expect(await existsSafe(level3)).toBe(true);
+    });
+  });
+});
diff --git a/temp_repo/libs/utils/tests/image-handler.test.ts b/temp_repo/libs/utils/tests/image-handler.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35a12d95eade63182bad6630b10963f4c27df63c
--- /dev/null
+++ b/temp_repo/libs/utils/tests/image-handler.test.ts
@@ -0,0 +1,244 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+import {
+  getMimeTypeForImage,
+  readImageAsBase64,
+  convertImagesToContentBlocks,
+  formatImagePathsForPrompt,
+} from '../src/image-handler';
+
+describe('image-handler.ts', () => {
+  let tempDir: string;
+
+  beforeEach(async () => {
+    tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'image-handler-test-'));
+  });
+
+  afterEach(async () => {
+    try {
+      await fs.rm(tempDir, { recursive: true, force: true });
+    } catch (error) {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe('getMimeTypeForImage', () => {
+    it('should return correct MIME type for .jpg', () => {
+      expect(getMimeTypeForImage('image.jpg')).toBe('image/jpeg');
+      expect(getMimeTypeForImage('/path/to/image.jpg')).toBe('image/jpeg');
+    });
+
+    it('should return correct MIME type for .jpeg', () => {
+      expect(getMimeTypeForImage('image.jpeg')).toBe('image/jpeg');
+    });
+
+    it('should return correct MIME type for .png', () => {
+      expect(getMimeTypeForImage('image.png')).toBe('image/png');
+    });
+
+    it('should return correct MIME type for .gif', () => {
+      expect(getMimeTypeForImage('image.gif')).toBe('image/gif');
+    });
+
+    it('should return correct MIME type for .webp', () => {
+      expect(getMimeTypeForImage('image.webp')).toBe('image/webp');
+    });
+
+    it('should be case-insensitive', () => {
+      expect(getMimeTypeForImage('image.JPG')).toBe('image/jpeg');
+      expect(getMimeTypeForImage('image.PNG')).toBe('image/png');
+      expect(getMimeTypeForImage('image.GIF')).toBe('image/gif');
+    });
+
+    it('should default to image/png for unknown extensions', () => {
+      expect(getMimeTypeForImage('file.xyz')).toBe('image/png');
+      expect(getMimeTypeForImage('file.txt')).toBe('image/png');
+      expect(getMimeTypeForImage('file')).toBe('image/png');
+    });
+
+    it('should handle filenames with multiple dots', () => {
+      expect(getMimeTypeForImage('my.file.name.jpg')).toBe('image/jpeg');
+    });
+  });
+
+  describe('readImageAsBase64', () => {
+    it('should read image and return base64 data', async () => {
+      const imagePath = path.join(tempDir, 'test.png');
+      const imageContent = Buffer.from('fake png data');
+      await fs.writeFile(imagePath, imageContent);
+
+      const result = await readImageAsBase64(imagePath);
+
+      expect(result.base64).toBe(imageContent.toString('base64'));
+      expect(result.mimeType).toBe('image/png');
+      expect(result.filename).toBe('test.png');
+      expect(result.originalPath).toBe(imagePath);
+    });
+
+    it('should handle different image formats', async () => {
+      const formats = [
+        { ext: 'jpg', mime: 'image/jpeg' },
+        { ext: 'png', mime: 'image/png' },
+        { ext: 'gif', mime: 'image/gif' },
+        { ext: 'webp', mime: 'image/webp' },
+      ];
+
+      for (const format of formats) {
+        const imagePath = path.join(tempDir, `image.${format.ext}`);
+        await fs.writeFile(imagePath, Buffer.from('data'));
+
+        const result = await readImageAsBase64(imagePath);
+
+        expect(result.mimeType).toBe(format.mime);
+        expect(result.filename).toBe(`image.${format.ext}`);
+      }
+    });
+
+    it("should throw error if file doesn't exist", async () => {
+      const imagePath = path.join(tempDir, 'nonexistent.png');
+
+      await expect(readImageAsBase64(imagePath)).rejects.toThrow();
+    });
+
+    it('should handle binary image data correctly', async () => {
+      const imagePath = path.join(tempDir, 'binary.png');
+      const binaryData = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a]);
+      await fs.writeFile(imagePath, binaryData);
+
+      const result = await readImageAsBase64(imagePath);
+
+      expect(result.base64).toBe(binaryData.toString('base64'));
+    });
+  });
+
+  describe('convertImagesToContentBlocks', () => {
+    it('should convert single image to content block', async () => {
+      const imagePath = path.join(tempDir, 'test.png');
+      await fs.writeFile(imagePath, Buffer.from('image data'));
+
+      const result = await convertImagesToContentBlocks([imagePath]);
+
+      expect(result).toHaveLength(1);
+      expect(result[0]).toMatchObject({
+        type: 'image',
+        source: {
+          type: 'base64',
+          media_type: 'image/png',
+        },
+      });
+      expect(result[0].source.data).toBeTruthy();
+    });
+
+    it('should convert multiple images', async () => {
+      const image1 = path.join(tempDir, 'image1.jpg');
+      const image2 = path.join(tempDir, 'image2.png');
+
+      await fs.writeFile(image1, Buffer.from('jpg data'));
+      await fs.writeFile(image2, Buffer.from('png data'));
+
+      const result = await convertImagesToContentBlocks([image1, image2]);
+
+      expect(result).toHaveLength(2);
+      expect(result[0].source.media_type).toBe('image/jpeg');
+      expect(result[1].source.media_type).toBe('image/png');
+    });
+
+    it('should resolve relative paths with workDir', async () => {
+      const image = 'test.png';
+      const imagePath = path.join(tempDir, image);
+      await fs.writeFile(imagePath, Buffer.from('data'));
+
+      const result = await convertImagesToContentBlocks([image], tempDir);
+
+      expect(result).toHaveLength(1);
+      expect(result[0].type).toBe('image');
+    });
+
+    it('should handle absolute paths without workDir', async () => {
+      const imagePath = path.join(tempDir, 'absolute.png');
+      await fs.writeFile(imagePath, Buffer.from('data'));
+
+      const result = await convertImagesToContentBlocks([imagePath]);
+
+      expect(result).toHaveLength(1);
+    });
+
+    it('should skip images that fail to load', async () => {
+      const validImage = path.join(tempDir, 'valid.png');
+      const invalidImage = path.join(tempDir, 'nonexistent.png');
+
+      await fs.writeFile(validImage, Buffer.from('data'));
+
+      const result = await convertImagesToContentBlocks([validImage, invalidImage]);
+
+      expect(result).toHaveLength(1);
+      expect(result[0].source.media_type).toBe('image/png');
+    });
+
+    it('should return empty array for empty input', async () => {
+      const result = await convertImagesToContentBlocks([]);
+      expect(result).toEqual([]);
+    });
+
+    it('should preserve order of images', async () => {
+      const images = ['img1.jpg', 'img2.png', 'img3.gif'];
+
+      for (const img of images) {
+        await fs.writeFile(path.join(tempDir, img), Buffer.from('data'));
+      }
+
+      const result = await convertImagesToContentBlocks(images, tempDir);
+
+      expect(result).toHaveLength(3);
+      expect(result[0].source.media_type).toBe('image/jpeg');
+      expect(result[1].source.media_type).toBe('image/png');
+      expect(result[2].source.media_type).toBe('image/gif');
+    });
+  });
+
+  describe('formatImagePathsForPrompt', () => {
+    it('should return empty string for empty array', () => {
+      const result = formatImagePathsForPrompt([]);
+      expect(result).toBe('');
+    });
+
+    it('should format single image path', () => {
+      const result = formatImagePathsForPrompt(['/path/to/image.png']);
+      expect(result).toBe('\n\nAttached images:\n- /path/to/image.png\n');
+    });
+
+    it('should format multiple image paths', () => {
+      const result = formatImagePathsForPrompt([
+        '/path/image1.png',
+        '/path/image2.jpg',
+        '/path/image3.gif',
+      ]);
+
+      expect(result).toBe(
+        '\n\nAttached images:\n' +
+          '- /path/image1.png\n' +
+          '- /path/image2.jpg\n' +
+          '- /path/image3.gif\n'
+      );
+    });
+
+    it('should handle relative paths', () => {
+      const result = formatImagePathsForPrompt(['relative/path/image.png', 'another/image.jpg']);
+
+      expect(result).toContain('- relative/path/image.png');
+      expect(result).toContain('- another/image.jpg');
+    });
+
+    it('should start with newlines', () => {
+      const result = formatImagePathsForPrompt(['/image.png']);
+      expect(result.startsWith('\n\n')).toBe(true);
+    });
+
+    it('should include header text', () => {
+      const result = formatImagePathsForPrompt(['/image.png']);
+      expect(result).toContain('Attached images:');
+    });
+  });
+});
diff --git a/temp_repo/libs/utils/tests/logger.test.ts b/temp_repo/libs/utils/tests/logger.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..861555b5ff5aab8ec8fe02c1500fd5ad6108ad46
--- /dev/null
+++ b/temp_repo/libs/utils/tests/logger.test.ts
@@ -0,0 +1,298 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { createLogger, LogLevel, getLogLevel, setLogLevel, setColorsEnabled } from '../src/logger';
+
+describe('logger.ts', () => {
+  let originalConsoleError: typeof console.error;
+  let originalConsoleWarn: typeof console.warn;
+  let originalConsoleLog: typeof console.log;
+  let originalLogLevel: LogLevel;
+
+  beforeEach(() => {
+    // Save original console methods and log level
+    originalConsoleError = console.error;
+    originalConsoleWarn = console.warn;
+    originalConsoleLog = console.log;
+    originalLogLevel = getLogLevel();
+
+    // Disable colors for predictable test output
+    setColorsEnabled(false);
+
+    // Mock console methods
+    console.error = vi.fn();
+    console.warn = vi.fn();
+    console.log = vi.fn();
+  });
+
+  afterEach(() => {
+    // Restore original console methods and log level
+    console.error = originalConsoleError;
+    console.warn = originalConsoleWarn;
+    console.log = originalConsoleLog;
+    setLogLevel(originalLogLevel);
+  });
+
+  describe('createLogger', () => {
+    it('should create logger with context prefix', () => {
+      const logger = createLogger('TestContext');
+      setLogLevel(LogLevel.INFO);
+
+      logger.info('test message');
+
+      expect(console.log).toHaveBeenCalledWith('INFO  [TestContext]', 'test message');
+    });
+
+    it('should handle multiple arguments', () => {
+      const logger = createLogger('Test');
+      setLogLevel(LogLevel.INFO);
+
+      logger.info('message', { data: 123 }, [1, 2, 3]);
+
+      expect(console.log).toHaveBeenCalledWith('INFO  [Test]', 'message', { data: 123 }, [1, 2, 3]);
+    });
+  });
+
+  describe('Log levels', () => {
+    it('should log error at ERROR level', () => {
+      const logger = createLogger('Test');
+      setLogLevel(LogLevel.ERROR);
+
+      logger.error('error message');
+      logger.warn('warn message');
+      logger.info('info message');
+      logger.debug('debug message');
+
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.warn).not.toHaveBeenCalled();
+      expect(console.log).not.toHaveBeenCalled();
+    });
+
+    it('should log error and warn at WARN level', () => {
+      const logger = createLogger('Test');
+      setLogLevel(LogLevel.WARN);
+
+      logger.error('error message');
+      logger.warn('warn message');
+      logger.info('info message');
+      logger.debug('debug message');
+
+      expect(console.error).toHaveBeenCalledTimes(1);
+      // Note: warn uses console.log in Node.js implementation
+      expect(console.log).toHaveBeenCalledTimes(1);
+    });
+
+    it('should log error, warn, and info at INFO level', () => {
+      const logger = createLogger('Test');
+      setLogLevel(LogLevel.INFO);
+
+      logger.error('error message');
+      logger.warn('warn message');
+      logger.info('info message');
+      logger.debug('debug message');
+
+      expect(console.error).toHaveBeenCalledTimes(1);
+      // Note: warn and info both use console.log in Node.js implementation
+      expect(console.log).toHaveBeenCalledTimes(2); // warn + info, not debug
+    });
+
+    it('should log all messages at DEBUG level', () => {
+      const logger = createLogger('Test');
+      setLogLevel(LogLevel.DEBUG);
+
+      logger.error('error message');
+      logger.warn('warn message');
+      logger.info('info message');
+      logger.debug('debug message');
+
+      expect(console.error).toHaveBeenCalledTimes(1);
+      // Note: warn, info, debug all use console.log in Node.js implementation
+      expect(console.log).toHaveBeenCalledTimes(3); // warn + info + debug
+    });
+  });
+
+  describe('error method', () => {
+    it('should use console.error', () => {
+      const logger = createLogger('ErrorTest');
+      setLogLevel(LogLevel.ERROR);
+
+      logger.error('error occurred', { code: 500 });
+
+      expect(console.error).toHaveBeenCalledWith('ERROR [ErrorTest]', 'error occurred', {
+        code: 500,
+      });
+    });
+
+    it('should not log when level is below ERROR', () => {
+      const logger = createLogger('Test');
+      setLogLevel((LogLevel.ERROR - 1) as LogLevel);
+
+      logger.error('should not appear');
+
+      expect(console.error).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('warn method', () => {
+    it('should use console.log with WARN prefix', () => {
+      const logger = createLogger('WarnTest');
+      setLogLevel(LogLevel.WARN);
+
+      logger.warn('warning message');
+
+      // Note: warn uses console.log in Node.js implementation
+      expect(console.log).toHaveBeenCalledWith('WARN  [WarnTest]', 'warning message');
+    });
+
+    it('should not log when level is below WARN', () => {
+      const logger = createLogger('Test');
+      setLogLevel(LogLevel.ERROR);
+
+      logger.warn('should not appear');
+
+      expect(console.log).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('info method', () => {
+    it('should use console.log', () => {
+      const logger = createLogger('InfoTest');
+      setLogLevel(LogLevel.INFO);
+
+      logger.info('info message');
+
+      expect(console.log).toHaveBeenCalledWith('INFO  [InfoTest]', 'info message');
+    });
+
+    it('should not log when level is below INFO', () => {
+      const logger = createLogger('Test');
+      setLogLevel(LogLevel.WARN);
+
+      logger.info('should not appear');
+
+      expect(console.log).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('debug method', () => {
+    it('should use console.log with DEBUG prefix', () => {
+      const logger = createLogger('DebugTest');
+      setLogLevel(LogLevel.DEBUG);
+
+      logger.debug('debug details', { trace: '...' });
+
+      expect(console.log).toHaveBeenCalledWith('DEBUG [DebugTest]', 'debug details', {
+        trace: '...',
+      });
+    });
+
+    it('should not log when level is below DEBUG', () => {
+      const logger = createLogger('Test');
+      setLogLevel(LogLevel.INFO);
+
+      logger.debug('should not appear');
+
+      expect(console.log).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('getLogLevel', () => {
+    it('should return current log level', () => {
+      setLogLevel(LogLevel.DEBUG);
+      expect(getLogLevel()).toBe(LogLevel.DEBUG);
+
+      setLogLevel(LogLevel.ERROR);
+      expect(getLogLevel()).toBe(LogLevel.ERROR);
+    });
+  });
+
+  describe('setLogLevel', () => {
+    it('should change log level', () => {
+      setLogLevel(LogLevel.WARN);
+      expect(getLogLevel()).toBe(LogLevel.WARN);
+
+      setLogLevel(LogLevel.DEBUG);
+      expect(getLogLevel()).toBe(LogLevel.DEBUG);
+    });
+
+    it('should affect subsequent logging', () => {
+      const logger = createLogger('Test');
+
+      setLogLevel(LogLevel.ERROR);
+      logger.info('should not log');
+      expect(console.log).not.toHaveBeenCalled();
+
+      setLogLevel(LogLevel.INFO);
+      logger.info('should log');
+      expect(console.log).toHaveBeenCalledWith('INFO  [Test]', 'should log');
+    });
+  });
+
+  describe('Multiple logger instances', () => {
+    it('should maintain separate contexts', () => {
+      const logger1 = createLogger('Service1');
+      const logger2 = createLogger('Service2');
+      setLogLevel(LogLevel.INFO);
+
+      logger1.info('from service 1');
+      logger2.info('from service 2');
+
+      expect(console.log).toHaveBeenNthCalledWith(1, 'INFO  [Service1]', 'from service 1');
+      expect(console.log).toHaveBeenNthCalledWith(2, 'INFO  [Service2]', 'from service 2');
+    });
+
+    it('should share log level setting', () => {
+      const logger1 = createLogger('Service1');
+      const logger2 = createLogger('Service2');
+
+      setLogLevel(LogLevel.ERROR);
+
+      logger1.info('should not log');
+      logger2.info('should not log');
+
+      expect(console.log).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle empty context string', () => {
+      const logger = createLogger('');
+      setLogLevel(LogLevel.INFO);
+
+      logger.info('message');
+
+      expect(console.log).toHaveBeenCalledWith('INFO  []', 'message');
+    });
+
+    it('should handle context with special characters', () => {
+      const logger = createLogger('Test-Service_v2.0');
+      setLogLevel(LogLevel.INFO);
+
+      logger.info('message');
+
+      expect(console.log).toHaveBeenCalledWith('INFO  [Test-Service_v2.0]', 'message');
+    });
+
+    it('should handle no arguments to log methods', () => {
+      const logger = createLogger('Test');
+      setLogLevel(LogLevel.INFO);
+
+      logger.info();
+
+      expect(console.log).toHaveBeenCalledWith('INFO  [Test]');
+    });
+
+    it('should handle complex object arguments', () => {
+      const logger = createLogger('Test');
+      setLogLevel(LogLevel.INFO);
+
+      const complexObj = {
+        nested: { deep: { value: 123 } },
+        array: [1, 2, 3],
+        fn: () => {},
+      };
+
+      logger.info('complex', complexObj);
+
+      expect(console.log).toHaveBeenCalledWith('INFO  [Test]', 'complex', complexObj);
+    });
+  });
+});
diff --git a/temp_repo/libs/utils/tests/path-utils.test.ts b/temp_repo/libs/utils/tests/path-utils.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f88db3058a656534f6f8e113f8822b06624bddc5
--- /dev/null
+++ b/temp_repo/libs/utils/tests/path-utils.test.ts
@@ -0,0 +1,152 @@
+/**
+ * Path Utilities Tests
+ */
+
+import { describe, it, expect } from 'vitest';
+import { normalizePath, pathsEqual, sanitizeFilename } from '../src/path-utils.js';
+
+describe('normalizePath', () => {
+  it('should convert backslashes to forward slashes', () => {
+    expect(normalizePath('C:\\Users\\foo\\bar')).toBe('C:/Users/foo/bar');
+  });
+
+  it('should leave forward slashes unchanged', () => {
+    expect(normalizePath('/home/foo/bar')).toBe('/home/foo/bar');
+  });
+
+  it('should handle mixed separators', () => {
+    expect(normalizePath('C:\\Users/foo\\bar')).toBe('C:/Users/foo/bar');
+  });
+});
+
+describe('pathsEqual', () => {
+  it('should return true for equal paths', () => {
+    expect(pathsEqual('/home/user', '/home/user')).toBe(true);
+  });
+
+  it('should return true for paths with different separators', () => {
+    expect(pathsEqual('C:\\foo\\bar', 'C:/foo/bar')).toBe(true);
+  });
+
+  it('should return false for different paths', () => {
+    expect(pathsEqual('/home/user', '/home/other')).toBe(false);
+  });
+
+  it('should handle null and undefined', () => {
+    expect(pathsEqual(null, null)).toBe(true);
+    expect(pathsEqual(undefined, undefined)).toBe(true);
+    expect(pathsEqual(null, undefined)).toBe(false);
+    expect(pathsEqual(null, '/path')).toBe(false);
+    expect(pathsEqual('/path', null)).toBe(false);
+  });
+});
+
+describe('sanitizeFilename', () => {
+  describe('Windows reserved names', () => {
+    it('should prefix Windows reserved device names', () => {
+      expect(sanitizeFilename('nul')).toBe('_nul');
+      expect(sanitizeFilename('NUL')).toBe('_NUL');
+      expect(sanitizeFilename('con')).toBe('_con');
+      expect(sanitizeFilename('CON')).toBe('_CON');
+      expect(sanitizeFilename('prn')).toBe('_prn');
+      expect(sanitizeFilename('aux')).toBe('_aux');
+    });
+
+    it('should prefix COM and LPT port names', () => {
+      expect(sanitizeFilename('com1')).toBe('_com1');
+      expect(sanitizeFilename('COM5')).toBe('_COM5');
+      expect(sanitizeFilename('lpt1')).toBe('_lpt1');
+      expect(sanitizeFilename('LPT9')).toBe('_LPT9');
+    });
+
+    it('should not prefix reserved names with extensions', () => {
+      // After removing extension, baseName might be reserved
+      expect(sanitizeFilename('nul')).toBe('_nul');
+    });
+
+    it('should not prefix non-reserved names that contain reserved words', () => {
+      expect(sanitizeFilename('null')).toBe('null'); // "null" is not reserved, only "nul"
+      expect(sanitizeFilename('console')).toBe('console');
+      expect(sanitizeFilename('auxiliary')).toBe('auxiliary');
+    });
+  });
+
+  describe('Invalid characters', () => {
+    it('should remove path separators', () => {
+      expect(sanitizeFilename('foo/bar')).toBe('foobar');
+      expect(sanitizeFilename('foo\\bar')).toBe('foobar');
+    });
+
+    it('should remove Windows invalid characters', () => {
+      expect(sanitizeFilename('file:name')).toBe('filename');
+      expect(sanitizeFilename('file*name')).toBe('filename');
+      expect(sanitizeFilename('file?name')).toBe('filename');
+      expect(sanitizeFilename('file"name')).toBe('filename');
+      expect(sanitizeFilename('file<name>')).toBe('filename');
+      expect(sanitizeFilename('file|name')).toBe('filename');
+    });
+
+    it('should replace spaces with underscores', () => {
+      expect(sanitizeFilename('my file name')).toBe('my_file_name');
+      expect(sanitizeFilename('file   name')).toBe('file_name'); // multiple spaces
+    });
+
+    it('should remove leading and trailing dots', () => {
+      expect(sanitizeFilename('.hidden')).toBe('hidden');
+      expect(sanitizeFilename('file...')).toBe('file');
+      expect(sanitizeFilename('...file...')).toBe('file');
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should return fallback for empty strings', () => {
+      expect(sanitizeFilename('')).toBe('file');
+      expect(sanitizeFilename('', 'default')).toBe('default');
+    });
+
+    it('should return fallback for null/undefined', () => {
+      expect(sanitizeFilename(null as any)).toBe('file');
+      expect(sanitizeFilename(undefined as any)).toBe('file');
+      expect(sanitizeFilename(null as any, 'image')).toBe('image');
+    });
+
+    it('should return fallback for strings that become empty after sanitization', () => {
+      expect(sanitizeFilename('...')).toBe('file');
+      expect(sanitizeFilename('///\\\\\\')).toBe('file');
+      expect(sanitizeFilename('???')).toBe('file');
+    });
+
+    it('should handle non-string inputs', () => {
+      expect(sanitizeFilename(123 as any)).toBe('file');
+      expect(sanitizeFilename({} as any)).toBe('file');
+    });
+  });
+
+  describe('Normal filenames', () => {
+    it('should preserve normal filenames', () => {
+      expect(sanitizeFilename('document')).toBe('document');
+      expect(sanitizeFilename('file123')).toBe('file123');
+      expect(sanitizeFilename('my-file_name')).toBe('my-file_name');
+    });
+
+    it('should handle unicode characters', () => {
+      expect(sanitizeFilename('文件')).toBe('文件');
+      expect(sanitizeFilename('файл')).toBe('файл');
+      expect(sanitizeFilename('café')).toBe('café');
+    });
+  });
+
+  describe('Real-world examples from bug report', () => {
+    it('should handle filename that might become "nul"', () => {
+      // If a filename is "null.png", basename would be "null"
+      expect(sanitizeFilename('null')).toBe('null'); // "null" is ok
+      expect(sanitizeFilename('nul')).toBe('_nul'); // "nul" is reserved
+    });
+
+    it('should sanitize typical image filenames', () => {
+      expect(sanitizeFilename('screenshot')).toBe('screenshot');
+      expect(sanitizeFilename('image 1')).toBe('image_1');
+      expect(sanitizeFilename('photo?.jpg')).toBe('photo.jpg'); // ? removed, . is valid
+    });
+  });
+});
diff --git a/temp_repo/libs/utils/tests/prompt-builder.test.ts b/temp_repo/libs/utils/tests/prompt-builder.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b0bdaba9f3d00abff412e4cb3663bf18e22e9a82
--- /dev/null
+++ b/temp_repo/libs/utils/tests/prompt-builder.test.ts
@@ -0,0 +1,283 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import fs from 'fs/promises';
+import path from 'path';
+import os from 'os';
+import { buildPromptWithImages } from '../src/prompt-builder';
+
+describe('prompt-builder.ts', () => {
+  let tempDir: string;
+
+  beforeEach(async () => {
+    tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'prompt-builder-test-'));
+  });
+
+  afterEach(async () => {
+    try {
+      await fs.rm(tempDir, { recursive: true, force: true });
+    } catch (error) {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe('buildPromptWithImages - no images', () => {
+    it('should return plain text when no images provided', async () => {
+      const basePrompt = 'Hello, world!';
+
+      const result = await buildPromptWithImages(basePrompt);
+
+      expect(result.content).toBe('Hello, world!');
+      expect(result.hasImages).toBe(false);
+    });
+
+    it('should return plain text when empty image array provided', async () => {
+      const basePrompt = 'Test prompt';
+
+      const result = await buildPromptWithImages(basePrompt, []);
+
+      expect(result.content).toBe('Test prompt');
+      expect(result.hasImages).toBe(false);
+    });
+
+    it('should handle multiline prompts', async () => {
+      const basePrompt = 'Line 1\nLine 2\nLine 3';
+
+      const result = await buildPromptWithImages(basePrompt);
+
+      expect(result.content).toBe('Line 1\nLine 2\nLine 3');
+    });
+  });
+
+  describe('buildPromptWithImages - with images', () => {
+    it('should build content blocks with single image', async () => {
+      const imagePath = path.join(tempDir, 'test.png');
+      await fs.writeFile(imagePath, Buffer.from('image data'));
+
+      const result = await buildPromptWithImages('Check this image', [imagePath]);
+
+      expect(result.hasImages).toBe(true);
+      expect(Array.isArray(result.content)).toBe(true);
+
+      const blocks = result.content as Array<{
+        type: string;
+        text?: string;
+        source?: object;
+      }>;
+      expect(blocks).toHaveLength(2);
+      expect(blocks[0]).toMatchObject({
+        type: 'text',
+        text: 'Check this image',
+      });
+      expect(blocks[1]).toMatchObject({
+        type: 'image',
+      });
+    });
+
+    it('should build content blocks with multiple images', async () => {
+      const image1 = path.join(tempDir, 'img1.jpg');
+      const image2 = path.join(tempDir, 'img2.png');
+
+      await fs.writeFile(image1, Buffer.from('jpg data'));
+      await fs.writeFile(image2, Buffer.from('png data'));
+
+      const result = await buildPromptWithImages('Two images', [image1, image2]);
+
+      expect(result.hasImages).toBe(true);
+
+      const blocks = result.content as Array<{
+        type: string;
+        text?: string;
+        source?: object;
+      }>;
+      expect(blocks).toHaveLength(3); // 1 text + 2 images
+      expect(blocks[0].type).toBe('text');
+      expect(blocks[1].type).toBe('image');
+      expect(blocks[2].type).toBe('image');
+    });
+
+    it('should resolve relative paths with workDir', async () => {
+      const imagePath = 'test.png';
+      const fullPath = path.join(tempDir, imagePath);
+      await fs.writeFile(fullPath, Buffer.from('data'));
+
+      const result = await buildPromptWithImages('Test', [imagePath], tempDir);
+
+      expect(result.hasImages).toBe(true);
+      expect(Array.isArray(result.content)).toBe(true);
+    });
+
+    it('should handle absolute paths without workDir', async () => {
+      const imagePath = path.join(tempDir, 'absolute.png');
+      await fs.writeFile(imagePath, Buffer.from('data'));
+
+      const result = await buildPromptWithImages('Test', [imagePath]);
+
+      expect(result.hasImages).toBe(true);
+    });
+  });
+
+  describe('buildPromptWithImages - includeImagePaths option', () => {
+    it('should not include image paths by default', async () => {
+      const imagePath = path.join(tempDir, 'test.png');
+      await fs.writeFile(imagePath, Buffer.from('data'));
+
+      const result = await buildPromptWithImages('Prompt', [imagePath]);
+
+      const blocks = result.content as Array<{
+        type: string;
+        text?: string;
+      }>;
+      const textBlock = blocks.find((b) => b.type === 'text');
+
+      expect(textBlock?.text).not.toContain('Attached images:');
+      expect(textBlock?.text).toBe('Prompt');
+    });
+
+    it('should include image paths when requested', async () => {
+      const imagePath = path.join(tempDir, 'test.png');
+      await fs.writeFile(imagePath, Buffer.from('data'));
+
+      const result = await buildPromptWithImages('Prompt', [imagePath], undefined, true);
+
+      const blocks = result.content as Array<{
+        type: string;
+        text?: string;
+      }>;
+      const textBlock = blocks.find((b) => b.type === 'text');
+
+      expect(textBlock?.text).toContain('Prompt');
+      expect(textBlock?.text).toContain('Attached images:');
+      expect(textBlock?.text).toContain(imagePath);
+    });
+
+    it('should format multiple image paths when included', async () => {
+      const img1 = path.join(tempDir, 'img1.png');
+      const img2 = path.join(tempDir, 'img2.jpg');
+
+      await fs.writeFile(img1, Buffer.from('data1'));
+      await fs.writeFile(img2, Buffer.from('data2'));
+
+      const result = await buildPromptWithImages('Test', [img1, img2], undefined, true);
+
+      const blocks = result.content as Array<{
+        type: string;
+        text?: string;
+      }>;
+      const textBlock = blocks.find((b) => b.type === 'text');
+
+      expect(textBlock?.text).toContain('Attached images:');
+      expect(textBlock?.text).toContain(img1);
+      expect(textBlock?.text).toContain(img2);
+    });
+  });
+
+  describe('buildPromptWithImages - edge cases', () => {
+    it('should handle empty prompt with images', async () => {
+      const imagePath = path.join(tempDir, 'test.png');
+      await fs.writeFile(imagePath, Buffer.from('data'));
+
+      const result = await buildPromptWithImages('', [imagePath]);
+
+      expect(result.hasImages).toBe(true);
+
+      const blocks = result.content as Array<{
+        type: string;
+        text?: string;
+        source?: object;
+      }>;
+      // Should only have image block, no text block for empty string
+      expect(blocks.length).toBeGreaterThan(0);
+      expect(blocks.some((b) => b.type === 'image')).toBe(true);
+    });
+
+    it('should handle whitespace-only prompt with images', async () => {
+      const imagePath = path.join(tempDir, 'test.png');
+      await fs.writeFile(imagePath, Buffer.from('data'));
+
+      const result = await buildPromptWithImages('   ', [imagePath]);
+
+      expect(result.hasImages).toBe(true);
+
+      const blocks = result.content as Array<{
+        type: string;
+        text?: string;
+        source?: object;
+      }>;
+      // Whitespace-only is trimmed, so no text block should be added
+      expect(blocks.every((b) => b.type !== 'text')).toBe(true);
+    });
+
+    it('should skip failed image loads', async () => {
+      const validImage = path.join(tempDir, 'valid.png');
+      const invalidImage = path.join(tempDir, 'nonexistent.png');
+
+      await fs.writeFile(validImage, Buffer.from('data'));
+
+      const result = await buildPromptWithImages('Test', [validImage, invalidImage]);
+
+      expect(result.hasImages).toBe(true);
+
+      const blocks = result.content as Array<{
+        type: string;
+        text?: string;
+        source?: object;
+      }>;
+      const imageBlocks = blocks.filter((b) => b.type === 'image');
+
+      // Only valid image should be included
+      expect(imageBlocks).toHaveLength(1);
+    });
+
+    it('should handle mixed case in includeImagePaths parameter', async () => {
+      const imagePath = path.join(tempDir, 'test.png');
+      await fs.writeFile(imagePath, Buffer.from('data'));
+
+      const resultFalse = await buildPromptWithImages('Test', [imagePath], undefined, false);
+      const resultTrue = await buildPromptWithImages('Test', [imagePath], undefined, true);
+
+      const blocksFalse = resultFalse.content as Array<{
+        type: string;
+        text?: string;
+      }>;
+      const blocksTrue = resultTrue.content as Array<{
+        type: string;
+        text?: string;
+      }>;
+
+      expect(blocksFalse[0].text).not.toContain('Attached images:');
+      expect(blocksTrue[0].text).toContain('Attached images:');
+    });
+  });
+
+  describe('buildPromptWithImages - content format', () => {
+    it('should return string when only text and includeImagePaths false', async () => {
+      const result = await buildPromptWithImages('Just text', undefined);
+
+      expect(typeof result.content).toBe('string');
+    });
+
+    it('should return array when has images', async () => {
+      const imagePath = path.join(tempDir, 'test.png');
+      await fs.writeFile(imagePath, Buffer.from('data'));
+
+      const result = await buildPromptWithImages('Text', [imagePath]);
+
+      expect(Array.isArray(result.content)).toBe(true);
+    });
+
+    it('should preserve prompt formatting', async () => {
+      const basePrompt = 'Line 1\n\nLine 2\n  Indented line';
+      const imagePath = path.join(tempDir, 'test.png');
+      await fs.writeFile(imagePath, Buffer.from('data'));
+
+      const result = await buildPromptWithImages(basePrompt, [imagePath]);
+
+      const blocks = result.content as Array<{
+        type: string;
+        text?: string;
+      }>;
+      const textBlock = blocks.find((b) => b.type === 'text');
+
+      expect(textBlock?.text).toBe(basePrompt);
+    });
+  });
+});
diff --git a/temp_repo/libs/utils/tsconfig.json b/temp_repo/libs/utils/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..f677f8d5ebc071b18ab8302e1ef128243ebc2b3c
--- /dev/null
+++ b/temp_repo/libs/utils/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/temp_repo/libs/utils/vitest.config.ts b/temp_repo/libs/utils/vitest.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b281170bda3b22b116904338354805fc429334d0
--- /dev/null
+++ b/temp_repo/libs/utils/vitest.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    name: 'utils',
+    globals: true,
+    environment: 'node',
+    include: ['tests/**/*.test.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      include: ['src/**/*.ts'],
+      exclude: ['src/**/*.d.ts', 'src/index.ts'],
+      thresholds: {
+        // Excellent coverage: 94.3% stmts, 89.77% branches, 100% funcs, 94.21% lines
+        // All files now have comprehensive tests
+        lines: 90,
+        functions: 95,
+        branches: 85,
+        statements: 90,
+      },
+    },
+  },
+});
diff --git a/temp_repo/package-lock.json b/temp_repo/package-lock.json
new file mode 100644
index 0000000000000000000000000000000000000000..65a6cde1adde05c581df3c04d654fc7fcb7ea78f
--- /dev/null
+++ b/temp_repo/package-lock.json
@@ -0,0 +1,18289 @@
+{
+  "name": "automaker",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "automaker",
+      "version": "1.0.0",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "workspaces": [
+        "apps/*",
+        "libs/*"
+      ],
+      "dependencies": {
+        "cross-spawn": "7.0.6",
+        "rehype-sanitize": "6.0.0",
+        "tree-kill": "1.2.2"
+      },
+      "devDependencies": {
+        "husky": "9.1.7",
+        "lint-staged": "^16.2.7",
+        "prettier": "3.7.4",
+        "vitest": "4.0.16"
+      },
+      "engines": {
+        "node": ">=22.0.0 <23.0.0"
+      },
+      "optionalDependencies": {
+        "dmg-license": "^1.0.11"
+      }
+    },
+    "apps/server": {
+      "name": "@automaker/server",
+      "version": "1.0.0",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@anthropic-ai/claude-agent-sdk": "0.2.32",
+        "@automaker/dependency-resolver": "1.0.0",
+        "@automaker/git-utils": "1.0.0",
+        "@automaker/model-resolver": "1.0.0",
+        "@automaker/platform": "1.0.0",
+        "@automaker/prompts": "1.0.0",
+        "@automaker/types": "1.0.0",
+        "@automaker/utils": "1.0.0",
+        "@github/copilot-sdk": "0.1.16",
+        "@modelcontextprotocol/sdk": "1.25.2",
+        "@openai/codex-sdk": "^0.98.0",
+        "cookie-parser": "1.4.7",
+        "cors": "2.8.5",
+        "dotenv": "17.2.3",
+        "express": "5.2.1",
+        "morgan": "1.10.1",
+        "node-pty": "1.1.0-beta41",
+        "ws": "8.18.3",
+        "yaml": "2.7.0"
+      },
+      "devDependencies": {
+        "@playwright/test": "1.57.0",
+        "@types/cookie": "0.6.0",
+        "@types/cookie-parser": "1.4.10",
+        "@types/cors": "2.8.19",
+        "@types/express": "5.0.6",
+        "@types/morgan": "1.9.10",
+        "@types/node": "22.19.3",
+        "@types/ws": "8.18.1",
+        "@vitest/coverage-v8": "4.0.16",
+        "@vitest/ui": "4.0.16",
+        "tsx": "4.21.0",
+        "typescript": "5.9.3",
+        "vitest": "4.0.16"
+      },
+      "engines": {
+        "node": ">=22.0.0 <23.0.0"
+      }
+    },
+    "apps/server/node_modules/@types/node": {
+      "version": "22.19.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
+      "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "apps/server/node_modules/yaml": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
+      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "apps/ui": {
+      "name": "@automaker/ui",
+      "version": "1.0.0",
+      "hasInstallScript": true,
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@automaker/dependency-resolver": "1.0.0",
+        "@automaker/spec-parser": "1.0.0",
+        "@automaker/types": "1.0.0",
+        "@codemirror/lang-cpp": "^6.0.3",
+        "@codemirror/lang-css": "^6.3.1",
+        "@codemirror/lang-html": "^6.4.11",
+        "@codemirror/lang-java": "^6.0.2",
+        "@codemirror/lang-javascript": "^6.2.4",
+        "@codemirror/lang-json": "^6.0.2",
+        "@codemirror/lang-markdown": "^6.5.0",
+        "@codemirror/lang-php": "^6.0.2",
+        "@codemirror/lang-python": "^6.2.1",
+        "@codemirror/lang-rust": "^6.0.2",
+        "@codemirror/lang-sql": "^6.10.0",
+        "@codemirror/lang-xml": "6.1.0",
+        "@codemirror/language": "^6.12.1",
+        "@codemirror/legacy-modes": "^6.5.2",
+        "@codemirror/merge": "^6.12.0",
+        "@codemirror/search": "^6.6.0",
+        "@codemirror/state": "^6.5.4",
+        "@codemirror/theme-one-dark": "6.1.3",
+        "@codemirror/view": "^6.39.15",
+        "@dnd-kit/core": "6.3.1",
+        "@dnd-kit/sortable": "10.0.0",
+        "@dnd-kit/utilities": "3.2.2",
+        "@fontsource/cascadia-code": "^5.2.3",
+        "@fontsource/fira-code": "^5.2.7",
+        "@fontsource/ibm-plex-mono": "^5.2.7",
+        "@fontsource/inconsolata": "^5.2.8",
+        "@fontsource/inter": "^5.2.8",
+        "@fontsource/iosevka": "^5.2.5",
+        "@fontsource/jetbrains-mono": "^5.2.8",
+        "@fontsource/lato": "^5.2.7",
+        "@fontsource/montserrat": "^5.2.8",
+        "@fontsource/open-sans": "^5.2.7",
+        "@fontsource/poppins": "^5.2.7",
+        "@fontsource/raleway": "^5.2.8",
+        "@fontsource/roboto": "^5.2.9",
+        "@fontsource/source-code-pro": "^5.2.7",
+        "@fontsource/source-sans-3": "^5.2.9",
+        "@fontsource/work-sans": "^5.2.8",
+        "@lezer/highlight": "1.2.3",
+        "@radix-ui/react-checkbox": "1.3.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-dropdown-menu": "2.1.16",
+        "@radix-ui/react-label": "2.1.8",
+        "@radix-ui/react-popover": "1.1.15",
+        "@radix-ui/react-radio-group": "1.3.8",
+        "@radix-ui/react-scroll-area": "^1.2.10",
+        "@radix-ui/react-select": "2.2.6",
+        "@radix-ui/react-slider": "1.3.6",
+        "@radix-ui/react-slot": "1.2.4",
+        "@radix-ui/react-switch": "1.2.6",
+        "@radix-ui/react-tabs": "1.1.13",
+        "@radix-ui/react-tooltip": "1.2.8",
+        "@tanstack/react-query": "^5.90.17",
+        "@tanstack/react-query-devtools": "^5.91.2",
+        "@tanstack/react-query-persist-client": "^5.90.22",
+        "@tanstack/react-router": "1.141.6",
+        "@uiw/react-codemirror": "4.25.4",
+        "@xterm/addon-fit": "0.10.0",
+        "@xterm/addon-search": "0.15.0",
+        "@xterm/addon-web-links": "0.11.0",
+        "@xterm/addon-webgl": "0.18.0",
+        "@xterm/xterm": "5.5.0",
+        "@xyflow/react": "12.10.0",
+        "class-variance-authority": "0.7.1",
+        "clsx": "2.1.1",
+        "cmdk": "1.1.1",
+        "dagre": "0.8.5",
+        "dotenv": "17.2.3",
+        "geist": "1.5.1",
+        "idb-keyval": "^6.2.2",
+        "lucide-react": "0.562.0",
+        "react": "19.2.3",
+        "react-dom": "19.2.3",
+        "react-markdown": "10.1.0",
+        "react-resizable-panels": "3.0.6",
+        "rehype-raw": "7.0.0",
+        "rehype-sanitize": "^6.0.0",
+        "remark-gfm": "^4.0.1",
+        "sonner": "2.0.7",
+        "tailwind-merge": "3.4.0",
+        "usehooks-ts": "3.1.1",
+        "zod": "^3.24.1 || ^4.0.0",
+        "zustand": "5.0.9"
+      },
+      "devDependencies": {
+        "@electron/rebuild": "4.0.2",
+        "@eslint/js": "9.0.0",
+        "@playwright/test": "1.57.0",
+        "@tailwindcss/vite": "4.1.18",
+        "@tanstack/router-plugin": "1.141.7",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
+        "@types/dagre": "0.7.53",
+        "@types/node": "22.19.3",
+        "@types/react": "19.2.7",
+        "@types/react-dom": "19.2.3",
+        "@typescript-eslint/eslint-plugin": "8.50.0",
+        "@typescript-eslint/parser": "8.50.0",
+        "@vitejs/plugin-react": "5.1.2",
+        "cross-env": "10.1.0",
+        "electron": "39.2.7",
+        "electron-builder": "26.0.12",
+        "eslint": "9.39.2",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "jsdom": "^28.1.0",
+        "tailwindcss": "4.1.18",
+        "tw-animate-css": "1.4.0",
+        "typescript": "5.9.3",
+        "vite": "7.3.0",
+        "vite-plugin-electron": "0.29.0",
+        "vite-plugin-electron-renderer": "0.14.6"
+      },
+      "engines": {
+        "node": ">=22.0.0 <23.0.0"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.29.2",
+        "lightningcss-darwin-x64": "1.29.2",
+        "lightningcss-linux-arm-gnueabihf": "1.29.2",
+        "lightningcss-linux-arm64-gnu": "1.29.2",
+        "lightningcss-linux-arm64-musl": "1.29.2",
+        "lightningcss-linux-x64-gnu": "1.29.2",
+        "lightningcss-linux-x64-musl": "1.29.2",
+        "lightningcss-win32-arm64-msvc": "1.29.2",
+        "lightningcss-win32-x64-msvc": "1.29.2"
+      }
+    },
+    "apps/ui/node_modules/@eslint/js": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.0.0.tgz",
+      "integrity": "sha512-RThY/MnKrhubF6+s1JflwUjPEsnCEmYCWwqa/aRISKWNXGZ9epUwft4bUMM35SdKF9xvBrLydAM1RDHd1Z//ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "apps/ui/node_modules/@types/node": {
+      "version": "22.19.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
+      "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "apps/ui/node_modules/lightningcss-darwin-arm64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
+      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "apps/ui/node_modules/lightningcss-darwin-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
+      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "apps/ui/node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
+      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "apps/ui/node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
+      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "apps/ui/node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
+      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "apps/ui/node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
+      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "apps/ui/node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
+      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "apps/ui/node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
+      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "apps/ui/node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
+      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "apps/ui/node_modules/react-resizable-panels": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.6.tgz",
+      "integrity": "sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "libs/dependency-resolver": {
+      "name": "@automaker/dependency-resolver",
+      "version": "1.0.0",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@automaker/types": "1.0.0"
+      },
+      "devDependencies": {
+        "@types/node": "22.19.3",
+        "typescript": "5.9.3",
+        "vitest": "4.0.16"
+      },
+      "engines": {
+        "node": ">=22.0.0 <23.0.0"
+      }
+    },
+    "libs/dependency-resolver/node_modules/@types/node": {
+      "version": "22.19.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
+      "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "libs/git-utils": {
+      "name": "@automaker/git-utils",
+      "version": "1.0.0",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@automaker/platform": "1.0.0",
+        "@automaker/types": "1.0.0",
+        "@automaker/utils": "1.0.0"
+      },
+      "devDependencies": {
+        "@types/node": "22.19.3",
+        "typescript": "5.9.3",
+        "vitest": "4.0.16"
+      },
+      "engines": {
+        "node": ">=22.0.0 <23.0.0"
+      }
+    },
+    "libs/git-utils/node_modules/@types/node": {
+      "version": "22.19.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
+      "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "libs/model-resolver": {
+      "name": "@automaker/model-resolver",
+      "version": "1.0.0",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@automaker/types": "1.0.0"
+      },
+      "devDependencies": {
+        "@types/node": "22.19.3",
+        "typescript": "5.9.3",
+        "vitest": "4.0.16"
+      },
+      "engines": {
+        "node": ">=22.0.0 <23.0.0"
+      }
+    },
+    "libs/model-resolver/node_modules/@types/node": {
+      "version": "22.19.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
+      "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "libs/platform": {
+      "name": "@automaker/platform",
+      "version": "1.0.0",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@automaker/types": "1.0.0",
+        "p-limit": "6.2.0"
+      },
+      "devDependencies": {
+        "@types/node": "22.19.3",
+        "typescript": "5.9.3",
+        "vitest": "4.0.16"
+      },
+      "engines": {
+        "node": ">=22.0.0 <23.0.0"
+      }
+    },
+    "libs/platform/node_modules/@types/node": {
+      "version": "22.19.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
+      "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "libs/platform/node_modules/p-limit": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-6.2.0.tgz",
+      "integrity": "sha512-kuUqqHNUqoIWp/c467RI4X6mmyuojY5jGutNU0wVTmEOOfcuwLqyMVoAi9MKi2Ak+5i9+nhmrK4ufZE8069kHA==",
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "libs/platform/node_modules/yocto-queue": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.2.2.tgz",
+      "integrity": "sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "libs/prompts": {
+      "name": "@automaker/prompts",
+      "version": "1.0.0",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@automaker/types": "1.0.0"
+      },
+      "devDependencies": {
+        "@types/node": "22.19.3",
+        "typescript": "5.9.3",
+        "vitest": "4.0.16"
+      },
+      "engines": {
+        "node": ">=22.0.0 <23.0.0"
+      }
+    },
+    "libs/prompts/node_modules/@types/node": {
+      "version": "22.19.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
+      "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "libs/spec-parser": {
+      "name": "@automaker/spec-parser",
+      "version": "1.0.0",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@automaker/types": "1.0.0",
+        "fast-xml-parser": "^5.3.3"
+      },
+      "devDependencies": {
+        "@types/node": "22.19.3",
+        "typescript": "5.9.3",
+        "vitest": "4.0.16"
+      },
+      "engines": {
+        "node": ">=22.0.0 <23.0.0"
+      }
+    },
+    "libs/spec-parser/node_modules/@types/node": {
+      "version": "22.19.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
+      "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "libs/types": {
+      "name": "@automaker/types",
+      "version": "1.0.0",
+      "license": "SEE LICENSE IN LICENSE",
+      "devDependencies": {
+        "@types/node": "22.19.3",
+        "typescript": "5.9.3",
+        "vitest": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=22.0.0 <23.0.0"
+      }
+    },
+    "libs/types/node_modules/@types/node": {
+      "version": "22.19.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
+      "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "libs/types/node_modules/@vitest/expect": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.4.tgz",
+      "integrity": "sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
+        "chai": "^5.2.0",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "libs/types/node_modules/@vitest/mocker": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.4.tgz",
+      "integrity": "sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "3.2.4",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.17"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "libs/types/node_modules/@vitest/pretty-format": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.4.tgz",
+      "integrity": "sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "libs/types/node_modules/@vitest/runner": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.2.4.tgz",
+      "integrity": "sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "3.2.4",
+        "pathe": "^2.0.3",
+        "strip-literal": "^3.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "libs/types/node_modules/@vitest/snapshot": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.2.4.tgz",
+      "integrity": "sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.4",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "libs/types/node_modules/@vitest/spy": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.4.tgz",
+      "integrity": "sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^4.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "libs/types/node_modules/@vitest/utils": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.4.tgz",
+      "integrity": "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.4",
+        "loupe": "^3.1.4",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "libs/types/node_modules/chai": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
+      "integrity": "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "libs/types/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "libs/types/node_modules/tinyexec": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
+      "integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "libs/types/node_modules/tinyrainbow": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
+      "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "libs/types/node_modules/vitest": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.4.tgz",
+      "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/expect": "3.2.4",
+        "@vitest/mocker": "3.2.4",
+        "@vitest/pretty-format": "^3.2.4",
+        "@vitest/runner": "3.2.4",
+        "@vitest/snapshot": "3.2.4",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
+        "chai": "^5.2.0",
+        "debug": "^4.4.1",
+        "expect-type": "^1.2.1",
+        "magic-string": "^0.30.17",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.2",
+        "std-env": "^3.9.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^0.3.2",
+        "tinyglobby": "^0.2.14",
+        "tinypool": "^1.1.1",
+        "tinyrainbow": "^2.0.0",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0",
+        "vite-node": "3.2.4",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@types/debug": "^4.1.12",
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "@vitest/browser": "3.2.4",
+        "@vitest/ui": "3.2.4",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@types/debug": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "libs/utils": {
+      "name": "@automaker/utils",
+      "version": "1.0.0",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@automaker/platform": "1.0.0",
+        "@automaker/types": "1.0.0"
+      },
+      "devDependencies": {
+        "@types/node": "22.19.3",
+        "typescript": "5.9.3",
+        "vitest": "4.0.16"
+      },
+      "engines": {
+        "node": ">=22.0.0 <23.0.0"
+      }
+    },
+    "libs/utils/node_modules/@types/node": {
+      "version": "22.19.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
+      "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@acemir/cssom": {
+      "version": "0.9.31",
+      "resolved": "https://registry.npmjs.org/@acemir/cssom/-/cssom-0.9.31.tgz",
+      "integrity": "sha512-ZnR3GSaH+/vJ0YlHau21FjfLYjMpYVIzTD8M8vIEQvIGxeOXyXdzCI140rrCY862p/C/BbzWsjc1dgnM9mkoTA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.4.tgz",
+      "integrity": "sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@anthropic-ai/claude-agent-sdk": {
+      "version": "0.2.32",
+      "resolved": "https://registry.npmjs.org/@anthropic-ai/claude-agent-sdk/-/claude-agent-sdk-0.2.32.tgz",
+      "integrity": "sha512-8AtsSx/M9jxd0ihS08eqa7VireTEuwQy0i1+6ZJX93LECT6Svlf47dPJiAm7JB+BhVMmwTfQeS6x1akIcCfvbQ==",
+      "license": "SEE LICENSE IN README.md",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "^0.33.5",
+        "@img/sharp-darwin-x64": "^0.33.5",
+        "@img/sharp-linux-arm": "^0.33.5",
+        "@img/sharp-linux-arm64": "^0.33.5",
+        "@img/sharp-linux-x64": "^0.33.5",
+        "@img/sharp-linuxmusl-arm64": "^0.33.5",
+        "@img/sharp-linuxmusl-x64": "^0.33.5",
+        "@img/sharp-win32-x64": "^0.33.5"
+      },
+      "peerDependencies": {
+        "zod": "^4.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.0.1.tgz",
+      "integrity": "sha512-2SZFvqMyvboVV1d15lMf7XiI3m7SDqXUuKaTymJYLN6dSGadqp+fVojqJlVoMlbZnlTmu3S0TLwLTJpvBMO1Aw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^3.1.1",
+        "@csstools/css-color-parser": "^4.0.2",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0",
+        "lru-cache": "^11.2.6"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
+      "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-6.8.1.tgz",
+      "integrity": "sha512-MvRz1nCqW0fsy8Qz4dnLIvhOlMzqDVBabZx6lH+YywFDdjXhMY37SmpV1XFX3JzG5GWHn63j6HX6QPr3lZXHvQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.1.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.2.6"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector/node_modules/lru-cache": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
+      "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@automaker/dependency-resolver": {
+      "resolved": "libs/dependency-resolver",
+      "link": true
+    },
+    "node_modules/@automaker/git-utils": {
+      "resolved": "libs/git-utils",
+      "link": true
+    },
+    "node_modules/@automaker/model-resolver": {
+      "resolved": "libs/model-resolver",
+      "link": true
+    },
+    "node_modules/@automaker/platform": {
+      "resolved": "libs/platform",
+      "link": true
+    },
+    "node_modules/@automaker/prompts": {
+      "resolved": "libs/prompts",
+      "link": true
+    },
+    "node_modules/@automaker/server": {
+      "resolved": "apps/server",
+      "link": true
+    },
+    "node_modules/@automaker/spec-parser": {
+      "resolved": "libs/spec-parser",
+      "link": true
+    },
+    "node_modules/@automaker/types": {
+      "resolved": "libs/types",
+      "link": true
+    },
+    "node_modules/@automaker/ui": {
+      "resolved": "apps/ui",
+      "link": true
+    },
+    "node_modules/@automaker/utils": {
+      "resolved": "libs/utils",
+      "link": true
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz",
+      "integrity": "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz",
+      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-compilation-targets": "^7.27.2",
+        "@babel/helper-module-transforms": "^7.28.3",
+        "@babel/helpers": "^7.28.4",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
+      "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.27.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz",
+      "integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+      "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.27.2",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.28.5.tgz",
+      "integrity": "sha512-q3WC4JfdODypvxArsJQROfupPBq9+lMwjKq7C33GhbFYJsufD0yd/ziwD+hJucLeWsnFPWZjsU2DNFqBPE7jwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-member-expression-to-functions": "^7.28.5",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/traverse": "^7.28.5",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.28.5.tgz",
+      "integrity": "sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+      "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+      "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "@babel/traverse": "^7.28.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz",
+      "integrity": "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+      "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.27.1.tgz",
+      "integrity": "sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.27.1",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz",
+      "integrity": "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz",
+      "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.5"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.27.1.tgz",
+      "integrity": "sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.27.1.tgz",
+      "integrity": "sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.27.1.tgz",
+      "integrity": "sha512-OJguuwlTYlN0gBZFRPqwOGNWssZjfIUdS7HMYtN8c1KmwpwHFBwTeFZrg9XZa+DFTitWOW5iTAG7tyCUPsCCyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.28.5.tgz",
+      "integrity": "sha512-x2Qa+v/CuEoX7Dr31iAfr0IhInrVOWZU/2vJMJ00FOR/2nM0BcBEclpaf9sWCDc+v5e9dMrhSH8/atq/kX7+bA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-create-class-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/plugin-syntax-typescript": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-typescript": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.28.5.tgz",
+      "integrity": "sha512-+bQy5WOI2V6LJZpPVxY+yp66XdZ2yifu0Mc1aP5CQKgjn4QM5IN2i5fAZ4xKop47pr8rpVhiAeu+nDQa12C8+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-validator-option": "^7.27.1",
+        "@babel/plugin-syntax-jsx": "^7.27.1",
+        "@babel/plugin-transform-modules-commonjs": "^7.27.1",
+        "@babel/plugin-transform-typescript": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.27.2",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+      "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/parser": "^7.27.2",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
+      "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@babel/generator": "^7.28.5",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.28.5",
+        "@babel/template": "^7.27.2",
+        "@babel/types": "^7.28.5",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz",
+      "integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@bramus/specificity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
+      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "^3.0.0"
+      },
+      "bin": {
+        "specificity": "bin/cli.js"
+      }
+    },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.0.tgz",
+      "integrity": "sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/commands": {
+      "version": "6.10.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.1.tgz",
+      "integrity": "sha512-uWDWFypNdQmz2y1LaNJzK7fL7TYKLeUAU0npEC685OKTF3KcQ2Vu3klIM78D7I6wGhktme0lh3CuQLv0ZCrD9Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
+      }
+    },
+    "node_modules/@codemirror/lang-cpp": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-cpp/-/lang-cpp-6.0.3.tgz",
+      "integrity": "sha512-URM26M3vunFFn9/sm6rzqrBzDgfWuDixp85uTY49wKudToc2jTHUrKIGGKs+QWND+YLofNNZpxcNGRynFJfvgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/cpp": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
+      "integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.1.7"
+      }
+    },
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.11",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.11.tgz",
+      "integrity": "sha512-9NsXp7Nwp891pQchI7gPdTwBuSuT3K65NGTHWHNJ55HjYcHLllr0rbIZNdOzas9ztc1EUVBlHou85FFZS4BNnw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.12"
+      }
+    },
+    "node_modules/@codemirror/lang-java": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-java/-/lang-java-6.0.2.tgz",
+      "integrity": "sha512-m5Nt1mQ/cznJY7tMfQTJchmrjdjQ71IDs+55d1GAa8DGaB8JXWsVCkVT284C3RTASaY43YknrK2X3hPO/J3MOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/java": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz",
+      "integrity": "sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-json": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz",
+      "integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/json": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-markdown": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.5.0.tgz",
+      "integrity": "sha512-0K40bZ35jpHya6FriukbgaleaqzBLZfOh7HuzqbMxBXkbYMJDxfF39c23xOgxFezR+3G+tR2/Mup+Xk865OMvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.7.1",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.3.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.2.1",
+        "@lezer/markdown": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-php": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-php/-/lang-php-6.0.2.tgz",
+      "integrity": "sha512-ZKy2v1n8Fc8oEXj0Th0PUMXzQJ0AIR6TaZU+PbDHExFwdu+guzOA4jmCHS1Nz4vbFezwD7LyBdDnddSJeScMCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/php": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-python": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-python/-/lang-python-6.2.1.tgz",
+      "integrity": "sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.3.2",
+        "@codemirror/language": "^6.8.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.1",
+        "@lezer/python": "^1.1.4"
+      }
+    },
+    "node_modules/@codemirror/lang-rust": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-rust/-/lang-rust-6.0.2.tgz",
+      "integrity": "sha512-EZaGjCUegtiU7kSMvOfEZpaCReowEf3yNidYu7+vfuGTm9ow4mthAparY5hisJqOHmJowVH3Upu+eJlUji6qqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/rust": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-sql": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-sql/-/lang-sql-6.10.0.tgz",
+      "integrity": "sha512-6ayPkEd/yRw0XKBx5uAiToSgGECo/GY2NoJIHXIIQh1EVwLuKoU8BP/qK0qH5NLXAbtJRLuT73hx7P9X34iO4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-xml": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-xml/-/lang-xml-6.1.0.tgz",
+      "integrity": "sha512-3z0blhicHLfwi2UgkZYRPioSgVTo9PV5GP5ducFH6FaHy0IAJRg+ixj5gTR1gnT/glAIC8xv4w2VL1LoZfs+Jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/xml": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/language": {
+      "version": "6.12.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.1.tgz",
+      "integrity": "sha512-Fa6xkSiuGKc8XC8Cn96T+TQHYj4ZZ7RdFmXA3i9xe/3hLHfwPZdM+dqfX0Cp0zQklBKhVD8Yzc8LS45rkqcwpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
+      }
+    },
+    "node_modules/@codemirror/legacy-modes": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.5.2.tgz",
+      "integrity": "sha512-/jJbwSTazlQEDOQw2FJ8LEEKVS72pU0lx6oM54kGpL8t/NJ2Jda3CZ4pcltiKTdqYSRk3ug1B3pil1gsjA6+8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0"
+      }
+    },
+    "node_modules/@codemirror/lint": {
+      "version": "6.9.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.2.tgz",
+      "integrity": "sha512-sv3DylBiIyi+xKwRCJAAsBZZZWo82shJ/RTMymLabAdtbkV5cSKwWDeCgtUq3v8flTaXS2y1kKkICuRYtUswyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.35.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/merge": {
+      "version": "6.12.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/merge/-/merge-6.12.0.tgz",
+      "integrity": "sha512-o+36bbapcEHf4Ux75pZ4CKjMBUd14parA0uozvWVlacaT+uxaA3DDefEvWYjngsKU+qsrDe/HOOfsw0Q72pLjA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/highlight": "^1.0.0",
+        "style-mod": "^4.1.0"
+      }
+    },
+    "node_modules/@codemirror/search": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.6.0.tgz",
+      "integrity": "sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.37.0",
+        "crelt": "^1.0.5"
+      }
+    },
+    "node_modules/@codemirror/state": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.4.tgz",
+      "integrity": "sha512-8y7xqG/hpB53l25CIoit9/ngxdfoG+fx+V3SHBrinnhOtLvKHRyAJJuHzkWrR4YXXLX8eXBsejgAAxHUOdW1yw==",
+      "license": "MIT",
+      "dependencies": {
+        "@marijn/find-cluster-break": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/theme-one-dark": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+      "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.39.15",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.39.15.tgz",
+      "integrity": "sha512-aCWjgweIIXLBHh7bY6cACvXuyrZ0xGafjQ2VInjp4RM4gMfscK5uESiNdrH0pE+e1lZr2B4ONGsjchl2KsKZzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.5.0",
+        "crelt": "^1.0.6",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
+      "integrity": "sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.1.1.tgz",
+      "integrity": "sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.0.2.tgz",
+      "integrity": "sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^6.0.2",
+        "@csstools/css-calc": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.0.28",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.0.28.tgz",
+      "integrity": "sha512-1NRf1CUBjnr3K7hu8BLxjQrKCxEe8FP/xmPTenAxCRZWVLbmGotkFvG9mfNpjA6k7Bw1bw4BilZq9cu19RA5pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0"
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@develar/schema-utils": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/@develar/schema-utils/-/schema-utils-2.6.5.tgz",
+      "integrity": "sha512-0cp4PsWQ/9avqTVMCtZ+GirikIA36ikvjtHweU4/j8yLtgObI0+JUPhYFScgwlteveGB1rt3Cm8UhN04XayDig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.0",
+        "ajv-keywords": "^3.4.1"
+      },
+      "engines": {
+        "node": ">= 8.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@electron/asar": {
+      "version": "3.2.18",
+      "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.2.18.tgz",
+      "integrity": "sha512-2XyvMe3N3Nrs8cV39IKELRHTYUWFKrmqqSY1U+GMlc0jvqjIVnoxhNd2H4JolWQncbJi1DCvb5TNxZuI2fEjWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^5.0.0",
+        "glob": "^7.1.6",
+        "minimatch": "^3.0.4"
+      },
+      "bin": {
+        "asar": "bin/asar.js"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
+    "node_modules/@electron/asar/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@electron/asar/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@electron/fuses": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@electron/fuses/-/fuses-1.8.0.tgz",
+      "integrity": "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.1",
+        "fs-extra": "^9.0.1",
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "electron-fuses": "dist/bin.js"
+      }
+    },
+    "node_modules/@electron/fuses/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@electron/fuses/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@electron/fuses/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@electron/get": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@electron/get/-/get-2.0.3.tgz",
+      "integrity": "sha512-Qkzpg2s9GnVV2I2BjRksUi43U5e6+zaQMcjoJy0C+C5oxaKl+fmckGDQFtRpZpZV0NQekuZZ+tGz7EA9TVnQtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "env-paths": "^2.2.0",
+        "fs-extra": "^8.1.0",
+        "got": "^11.8.5",
+        "progress": "^2.0.3",
+        "semver": "^6.2.0",
+        "sumchecker": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "global-agent": "^3.0.0"
+      }
+    },
+    "node_modules/@electron/get/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@electron/node-gyp": {
+      "version": "10.2.0-electron.1",
+      "resolved": "git+https://github.com/electron/node-gyp.git#06b29aafb7708acef8b3669835c8a7857ebc92d2",
+      "integrity": "sha512-4MSBTT8y07YUDqf69/vSh80Hh791epYqGtWHO3zSKhYFwQg+gx9wi1PqbqP6YqC4WMsNxZ5l9oDmnWdK5pfCKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.0",
+        "exponential-backoff": "^3.1.1",
+        "glob": "^8.1.0",
+        "graceful-fs": "^4.2.6",
+        "make-fetch-happen": "^10.2.1",
+        "nopt": "^6.0.0",
+        "proc-log": "^2.0.1",
+        "semver": "^7.3.5",
+        "tar": "^6.2.1",
+        "which": "^2.0.2"
+      },
+      "bin": {
+        "node-gyp": "bin/node-gyp.js"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/@npmcli/fs": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-2.1.2.tgz",
+      "integrity": "sha512-yOJKRvohFOaLqipNtwYB9WugyZKhC/DZC4VYPmpaCzDBrA8YpK3qHZ8/HGscMnE4GqbkLNuVcCnxkeQEdGt6LQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@gar/promisify": "^1.1.3",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@electron/node-gyp/node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/cacache": {
+      "version": "16.1.3",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-16.1.3.tgz",
+      "integrity": "sha512-/+Emcj9DAXxX4cwlLmRI9c166RuL3w30zp4R7Joiv2cQTtTtA+jeuCAjH3ZlGnYS3tKENSrKhAzVVP9GVyzeYQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/fs": "^2.1.0",
+        "@npmcli/move-file": "^2.0.0",
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.1.0",
+        "glob": "^8.0.1",
+        "infer-owner": "^1.0.4",
+        "lru-cache": "^7.7.1",
+        "minipass": "^3.1.6",
+        "minipass-collect": "^1.0.2",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "mkdirp": "^1.0.4",
+        "p-map": "^4.0.0",
+        "promise-inflight": "^1.0.1",
+        "rimraf": "^3.0.2",
+        "ssri": "^9.0.0",
+        "tar": "^6.1.11",
+        "unique-filename": "^2.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/glob": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/http-proxy-agent": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+      "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tootallnate/once": "2",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/lru-cache": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/make-fetch-happen": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-10.2.1.tgz",
+      "integrity": "sha512-NgOPbRiaQM10DYXvN3/hhGVI2M5MtITFryzBGxHM5p4wnFxsVCbxkrBrDsk+EZ5OB4jEOT7AjDxtdF+KVEFT7w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "agentkeepalive": "^4.2.1",
+        "cacache": "^16.1.0",
+        "http-cache-semantics": "^4.1.0",
+        "http-proxy-agent": "^5.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "is-lambda": "^1.0.1",
+        "lru-cache": "^7.7.1",
+        "minipass": "^3.1.6",
+        "minipass-collect": "^1.0.2",
+        "minipass-fetch": "^2.0.3",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "negotiator": "^0.6.3",
+        "promise-retry": "^2.0.1",
+        "socks-proxy-agent": "^7.0.0",
+        "ssri": "^9.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/minipass-collect": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
+      "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/minipass-fetch": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-2.1.2.tgz",
+      "integrity": "sha512-LT49Zi2/WMROHYoqGgdlQIZh8mLPZmOrN2NdJjMXxYe4nkN6FUyuPuOAOedNJDrx0IRGg9+4guZewtp8hE6TxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^3.1.6",
+        "minipass-sized": "^1.0.3",
+        "minizlib": "^2.1.2"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      },
+      "optionalDependencies": {
+        "encoding": "^0.1.13"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/negotiator": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
+      "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/nopt": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
+      "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^1.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/p-map": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "aggregate-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/proc-log": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-2.0.1.tgz",
+      "integrity": "sha512-Kcmo2FhfDTXdcbfDH76N7uBYHINxc/8GW7UAVuVP9I+Va3uHSerrnKV6dLooga/gh7GlgzuCCr/eoldnL1muGw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/rimraf/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/rimraf/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/rimraf/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/socks-proxy-agent": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-7.0.0.tgz",
+      "integrity": "sha512-Fgl0YPZ902wEsAyiQ+idGd1A7rSFx/ayC1CQVMw5P+EQx2V0SgpGtf6OKFhVjPflPUl9YMmEOnmfjCdMUsygww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^6.0.2",
+        "debug": "^4.3.3",
+        "socks": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/ssri": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-9.0.1.tgz",
+      "integrity": "sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.1.1"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/unique-filename": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-2.0.1.tgz",
+      "integrity": "sha512-ODWHtkkdx3IAR+veKxFV+VBkUMcN+FaqzUUd7IZzt+0zhDZFPFxhlqwPF3YQvMHx1TD0tdgYl+kuPnJ8E6ql7A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "unique-slug": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/unique-slug": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-3.0.0.tgz",
+      "integrity": "sha512-8EyMynh679x/0gqE9fT9oilG+qEt+ibFyqjuVTsZn1+CMxH+XLlpvr2UZx4nVcCwTpx81nICr2JQFkM+HPLq4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@electron/node-gyp/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@electron/notarize": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@electron/notarize/-/notarize-2.5.0.tgz",
+      "integrity": "sha512-jNT8nwH1f9X5GEITXaQ8IF/KdskvIkOFfB2CvwumsveVidzpSc+mvhhTMdAGSYF3O+Nq49lJ7y+ssODRXu06+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "fs-extra": "^9.0.1",
+        "promise-retry": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@electron/notarize/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@electron/notarize/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@electron/notarize/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@electron/osx-sign": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@electron/osx-sign/-/osx-sign-1.3.1.tgz",
+      "integrity": "sha512-BAfviURMHpmb1Yb50YbCxnOY0wfwaLXH5KJ4+80zS0gUkzDX3ec23naTlEqKsN+PwYn+a1cCzM7BJ4Wcd3sGzw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "compare-version": "^0.1.2",
+        "debug": "^4.3.4",
+        "fs-extra": "^10.0.0",
+        "isbinaryfile": "^4.0.8",
+        "minimist": "^1.2.6",
+        "plist": "^3.0.5"
+      },
+      "bin": {
+        "electron-osx-flat": "bin/electron-osx-flat.js",
+        "electron-osx-sign": "bin/electron-osx-sign.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/@electron/osx-sign/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@electron/osx-sign/node_modules/isbinaryfile": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.10.tgz",
+      "integrity": "sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/gjtorikian/"
+      }
+    },
+    "node_modules/@electron/osx-sign/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@electron/osx-sign/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@electron/rebuild": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@electron/rebuild/-/rebuild-4.0.2.tgz",
+      "integrity": "sha512-8iZWVPvOpCdIc5Pj5udQV3PeO7liJVC7BBUSizl1HCfP7ZxYc9Kqz0c3PDNj2HQ5cQfJ5JaBeJIYKPjAvLn2Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@malept/cross-spawn-promise": "^2.0.0",
+        "debug": "^4.1.1",
+        "detect-libc": "^2.0.1",
+        "got": "^11.7.0",
+        "graceful-fs": "^4.2.11",
+        "node-abi": "^4.2.0",
+        "node-api-version": "^0.2.1",
+        "node-gyp": "^11.2.0",
+        "ora": "^5.1.0",
+        "read-binary-file-arch": "^1.0.6",
+        "semver": "^7.3.5",
+        "tar": "^6.0.5",
+        "yargs": "^17.0.1"
+      },
+      "bin": {
+        "electron-rebuild": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/@electron/universal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@electron/universal/-/universal-2.0.1.tgz",
+      "integrity": "sha512-fKpv9kg4SPmt+hY7SVBnIYULE9QJl8L3sCfcBsnqbJwwBwAeTLokJ9TRt9y7bK0JAzIW2y78TVVjvnQEms/yyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@electron/asar": "^3.2.7",
+        "@malept/cross-spawn-promise": "^2.0.0",
+        "debug": "^4.3.1",
+        "dir-compare": "^4.2.0",
+        "fs-extra": "^11.1.1",
+        "minimatch": "^9.0.3",
+        "plist": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=16.4"
+      }
+    },
+    "node_modules/@electron/universal/node_modules/fs-extra": {
+      "version": "11.3.2",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.2.tgz",
+      "integrity": "sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/@electron/universal/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@electron/universal/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.7.1.tgz",
+      "integrity": "sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@epic-web/invariant": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
+      "integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
+      "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz",
+      "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz",
+      "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz",
+      "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz",
+      "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz",
+      "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz",
+      "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz",
+      "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz",
+      "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz",
+      "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz",
+      "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz",
+      "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz",
+      "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz",
+      "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz",
+      "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz",
+      "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz",
+      "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz",
+      "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz",
+      "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz",
+      "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz",
+      "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz",
+      "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz",
+      "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz",
+      "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz",
+      "integrity": "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
+      "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
+      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@exodus/bytes": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.14.1.tgz",
+      "integrity": "sha512-OhkBFWI6GcRMUroChZiopRiSp2iAMvEBK47NhJooDqz1RERO4QuZIZnjP63TXX8GAiLABkYmX+fuQsdJ1dd2QQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
+      "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
+    "node_modules/@fontsource/cascadia-code": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@fontsource/cascadia-code/-/cascadia-code-5.2.3.tgz",
+      "integrity": "sha512-jnKfdZ+0UL25XUqYV7iq9gDlaUMWXxZNA7KnYzO4v8De6jBJmTkLHxDXs+1iZwl/8w7eKlDrTJWcyalOHdE2eg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/fira-code": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource/fira-code/-/fira-code-5.2.7.tgz",
+      "integrity": "sha512-tnB9NNund9TwIym8/7DMJe573nlPEQb+fKUV5GL8TBYXjIhDvL0D7mgmNVNQUPhXp+R7RylQeiBdkA4EbOHPGQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/ibm-plex-mono": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-mono/-/ibm-plex-mono-5.2.7.tgz",
+      "integrity": "sha512-MKAb8qV+CaiMQn2B0dIi1OV3565NYzp3WN5b4oT6LTkk+F0jR6j0ZN+5BKJiIhffDC3rtBULsYZE65+0018z9w==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/inconsolata": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/inconsolata/-/inconsolata-5.2.8.tgz",
+      "integrity": "sha512-lIZW+WOZYpUH91g9r6rYYhfTmptF3YPPM54ZOs8IYVeeL4SeiAu4tfj7mdr8llYEq31DLYgi6JtGIJa192gB0Q==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/inter": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.8.tgz",
+      "integrity": "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/iosevka": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/iosevka/-/iosevka-5.2.5.tgz",
+      "integrity": "sha512-Zv/UHJodDug1LcnWv2u2+GPp3oWP3U6Xp16cJOsqqZQNsCu8sA/ttT331N0NypxBZ+7c8szlSRlYDcy9liZ8pw==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/jetbrains-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+      "integrity": "sha512-6w8/SG4kqvIMu7xd7wt6x3idn1Qux3p9N62s6G3rfldOUYHpWcc2FKrqf+Vo44jRvqWj2oAtTHrZXEP23oSKwQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/lato": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource/lato/-/lato-5.2.7.tgz",
+      "integrity": "sha512-k5mum1ADbDW5cTw1Ett1eQVWeoZ6gq0ct6SFBibEhB4LRxhniChJZTBgd6ph5yBxLkN1fcnsnmicBNA4S/3nbw==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/montserrat": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/montserrat/-/montserrat-5.2.8.tgz",
+      "integrity": "sha512-xTjLxSbSfCycDB0pwmNsfNvdfWPaDaRQ2LC6yt/ZI7SdvXG52zHnzNYC/09mzuAuWNJyShkteutfCoDgym56hQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/open-sans": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-5.2.7.tgz",
+      "integrity": "sha512-8yfgDYjE5O0vmTPdrcjV35y4yMnctsokmi9gN49Gcsr0sjzkMkR97AnKDe6OqZh2SFkYlR28fxOvi21bYEgMSw==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/poppins": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-5.2.7.tgz",
+      "integrity": "sha512-6uQyPmseo4FgI97WIhA4yWRlNaoLk4vSDK/PyRwdqqZb5zAEuc+Kunt8JTMcsHYUEGYBtN15SNkMajMdqUSUmg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/raleway": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/raleway/-/raleway-5.2.8.tgz",
+      "integrity": "sha512-OATNM+J4XniKQRlI1e67v3euOnCUiXwpqgMofomKc5JNYOq0JPE6E5uTXMnFaZejKN1Z7s05JrHpmYB7/tg1Fw==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/roboto": {
+      "version": "5.2.9",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.2.9.tgz",
+      "integrity": "sha512-ZTkyHiPk74B/aj8BZWbsxD5Yu+Lq+nR64eV4wirlrac2qXR7jYk2h6JlLYuOuoruTkGQWNw2fMuKNavw7/rg0w==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/source-code-pro": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@fontsource/source-code-pro/-/source-code-pro-5.2.7.tgz",
+      "integrity": "sha512-7papq9TH94KT+S5VSY8cU7tFmwuGkIe3qxXRMscuAXH6AjMU+KJI75f28FzgBVDrlMfA0jjlTV4/x5+H5o/5EQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/source-sans-3": {
+      "version": "5.2.9",
+      "resolved": "https://registry.npmjs.org/@fontsource/source-sans-3/-/source-sans-3-5.2.9.tgz",
+      "integrity": "sha512-u3ymIq4rfmCCyB9MEw/sFR5lPVJ1yTNXmIMbUz+9kVCFIHvNtfzXOEBuvkg3Tk0zhmioPeJ28ZK5smZ7TurezQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/work-sans": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/work-sans/-/work-sans-5.2.8.tgz",
+      "integrity": "sha512-6LaHjVVgts+rnrcqvEkP2+iUB/jw1oDSYsGO0+TltAhnWki9Hnf/UGpgMQh2jcm0GEH8VqCPnq4PpmHLFzxXtQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@gar/promisify": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
+      "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@github/copilot": {
+      "version": "0.0.389",
+      "resolved": "https://registry.npmjs.org/@github/copilot/-/copilot-0.0.389.tgz",
+      "integrity": "sha512-XCHMCd8fu7g9WAp+ZepXBF1ud8vdfxDG4ajstGJqHfbdz0RxQktB35R5s/vKizpYXSZogFqwjxl41qX8DypY6g==",
+      "license": "MIT",
+      "bin": {
+        "copilot": "npm-loader.js"
+      },
+      "optionalDependencies": {
+        "@github/copilot-darwin-arm64": "0.0.389",
+        "@github/copilot-darwin-x64": "0.0.389",
+        "@github/copilot-linux-arm64": "0.0.389",
+        "@github/copilot-linux-x64": "0.0.389",
+        "@github/copilot-win32-arm64": "0.0.389",
+        "@github/copilot-win32-x64": "0.0.389"
+      }
+    },
+    "node_modules/@github/copilot-darwin-arm64": {
+      "version": "0.0.389",
+      "resolved": "https://registry.npmjs.org/@github/copilot-darwin-arm64/-/copilot-darwin-arm64-0.0.389.tgz",
+      "integrity": "sha512-4Crm/C9//ZPsK+NP5E5BEjltAGuij9XkvRILvZ/mqlaiDXRncFvUtdOoV+/Of+i4Zva/1sWnc7CrS7PHGJDyFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "bin": {
+        "copilot-darwin-arm64": "copilot"
+      }
+    },
+    "node_modules/@github/copilot-darwin-x64": {
+      "version": "0.0.389",
+      "resolved": "https://registry.npmjs.org/@github/copilot-darwin-x64/-/copilot-darwin-x64-0.0.389.tgz",
+      "integrity": "sha512-w0LB+lw29UmRS9oW8ENyZhrf3S5LQ3Pz796dQY8LZybp7WxEGtQhvXN48mye9gGzOHNoHxQ2+10+OzsjC/mLUQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "bin": {
+        "copilot-darwin-x64": "copilot"
+      }
+    },
+    "node_modules/@github/copilot-linux-arm64": {
+      "version": "0.0.389",
+      "resolved": "https://registry.npmjs.org/@github/copilot-linux-arm64/-/copilot-linux-arm64-0.0.389.tgz",
+      "integrity": "sha512-8QNvfs4r6nrbQrT4llu0CbJHcCJosyj+ZgLSpA+lqIiO/TiTQ48kV41uNjzTz1RmR6/qBKcz81FB7HcHXpT3xw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "bin": {
+        "copilot-linux-arm64": "copilot"
+      }
+    },
+    "node_modules/@github/copilot-linux-x64": {
+      "version": "0.0.389",
+      "resolved": "https://registry.npmjs.org/@github/copilot-linux-x64/-/copilot-linux-x64-0.0.389.tgz",
+      "integrity": "sha512-ls42wSzspC7sLiweoqu2zT75mqMsLWs+IZBfCqcuH1BV+C/j/XSEHsSrJxAI3TPtIsOTolPbTAa8jye1nGDxeg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "bin": {
+        "copilot-linux-x64": "copilot"
+      }
+    },
+    "node_modules/@github/copilot-sdk": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@github/copilot-sdk/-/copilot-sdk-0.1.16.tgz",
+      "integrity": "sha512-yEZrrUl9w6rvKmjJpzpqovL39GzFrHxnIXOSK/bQfFwk7Ak/drmBk2gOwJqDVJcbhUm2dsoeLIfok7vtyjAxTw==",
+      "license": "MIT",
+      "dependencies": {
+        "@github/copilot": "^0.0.389",
+        "vscode-jsonrpc": "^8.2.1",
+        "zod": "^4.3.5"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@github/copilot-win32-arm64": {
+      "version": "0.0.389",
+      "resolved": "https://registry.npmjs.org/@github/copilot-win32-arm64/-/copilot-win32-arm64-0.0.389.tgz",
+      "integrity": "sha512-loniaCnrty9okQMl3EhxeeyDhnrJ/lJK0Q0r7wkLf1d/TM2swp3tsGZyIRlhDKx5lgcnCPm1m0BqauMo8Vs34g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "bin": {
+        "copilot-win32-arm64": "copilot.exe"
+      }
+    },
+    "node_modules/@github/copilot-win32-x64": {
+      "version": "0.0.389",
+      "resolved": "https://registry.npmjs.org/@github/copilot-win32-x64/-/copilot-win32-x64-0.0.389.tgz",
+      "integrity": "sha512-L1ZzwV/vsxnrz0WO4qLDUlXXFQQ9fOFuBGKWy6TXS7aniaxI/7mdRQR1YjIEqy+AzRw9BaXR2UUUUDk0gb1+kw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "SEE LICENSE IN LICENSE.md",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "bin": {
+        "copilot-win32-x64": "copilot.exe"
+      }
+    },
+    "node_modules/@hono/node-server": {
+      "version": "1.19.7",
+      "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.7.tgz",
+      "integrity": "sha512-vUcD0uauS7EU2caukW8z5lJKtoGMokxNbJtBiwHgpqxEXokaHCBkQUmCHhjFB1VUTWdqj25QoMkMKzgjq+uhrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.14.1"
+      },
+      "peerDependencies": {
+        "hono": "^4"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
+      "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
+      "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
+      "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
+      "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
+      "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
+      "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
+      "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
+      "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
+      "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
+      "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.5"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
+      "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
+      "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
+      "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
+      "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
+      "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@isaacs/balanced-match": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
+      "integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@isaacs/brace-expansion": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz",
+      "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@isaacs/balanced-match": "^4.0.1"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@lezer/common": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.0.tgz",
+      "integrity": "sha512-PNGcolp9hr4PJdXR4ix7XtixDrClScvtSCYW3rQG106oVMOOI+jFb+0+J3mbeL/53g1Zd6s0kJzaw6Ri68GmAA==",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/cpp": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@lezer/cpp/-/cpp-1.1.5.tgz",
+      "integrity": "sha512-DIhSXmYtJKLehrjzDFN+2cPt547ySQ41nA8yqcDf/GxMc+YM736xqltFkvADL2M0VebU5I+3+4ks2Vv+Kyq3Aw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/css": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.3.1.tgz",
+      "integrity": "sha512-PYAKeUVBo3HFThruRyp/iK91SwiZJnzXh8QzkQlwijB5y+N5iB28+iLk78o2zmKqqV0uolNhCwFqB8LA7b0Svg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
+      "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/html": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.13.tgz",
+      "integrity": "sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/java": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@lezer/java/-/java-1.1.3.tgz",
+      "integrity": "sha512-yHquUfujwg6Yu4Fd1GNHCvidIvJwi/1Xu2DaKl/pfWIA2c1oXkVvawH3NyXhCaFx4OdlYBVX5wvz2f7Aoa/4Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/javascript": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.4.tgz",
+      "integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
+      }
+    },
+    "node_modules/@lezer/json": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
+      "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/lr": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.5.tgz",
+      "integrity": "sha512-/YTRKP5yPPSo1xImYQk7AZZMAgap0kegzqCSYHjAL9x1AZ0ZQW+IpcEzMKagCsbTsLnVeWkxYrCNeXG8xEPrjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/markdown": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.6.3.tgz",
+      "integrity": "sha512-jpGm5Ps+XErS+xA4urw7ogEGkeZOahVQF21Z6oECF0sj+2liwZopd2+I8uH5I/vZsRuuze3OxBREIANLf6KKUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.5.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/php": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@lezer/php/-/php-1.0.5.tgz",
+      "integrity": "sha512-W7asp9DhM6q0W6DYNwIkLSKOvxlXRrif+UXBMxzsJUuqmhE7oVU+gS3THO4S/Puh7Xzgm858UNaFi6dxTP8dJA==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.1.0"
+      }
+    },
+    "node_modules/@lezer/python": {
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.1.18.tgz",
+      "integrity": "sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/rust": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@lezer/rust/-/rust-1.0.2.tgz",
+      "integrity": "sha512-Lz5sIPBdF2FUXcWeCu1//ojFAZqzTQNRga0aYv6dYXqJqPfMdCAI0NzajWUd4Xijj1IKJLtjoXRPMvTKWBcqKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/xml": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@lezer/xml/-/xml-1.0.6.tgz",
+      "integrity": "sha512-CdDwirL0OEaStFue/66ZmFSeppuL6Dwjlk8qk153mSQwiSH/Dlri4GNymrNWnUmPl2Um7QfV1FO9KFUyX3Twww==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
+    "node_modules/@malept/cross-spawn-promise": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@malept/cross-spawn-promise/-/cross-spawn-promise-2.0.0.tgz",
+      "integrity": "sha512-1DpKU0Z5ThltBwjNySMC14g0CkbyhCaz9FkhxqNsZI6uAPJXFS8cMXlBKo26FJ8ZuW6S9GCMcR9IO5k2X5/9Fg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/malept"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/subscription/pkg/npm-.malept-cross-spawn-promise?utm_medium=referral&utm_source=npm_fund"
+        }
+      ],
+      "license": "Apache-2.0",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
+    "node_modules/@malept/flatpak-bundler": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@malept/flatpak-bundler/-/flatpak-bundler-0.4.0.tgz",
+      "integrity": "sha512-9QOtNffcOF/c1seMCDnjckb3R9WHcG34tky+FHpNKKCW0wc/scYLwMtO+ptyGUfMW0/b/n4qRiALlaFHc9Oj7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "fs-extra": "^9.0.0",
+        "lodash": "^4.17.15",
+        "tmp-promise": "^3.0.2"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@malept/flatpak-bundler/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@malept/flatpak-bundler/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@malept/flatpak-bundler/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/@marijn/find-cluster-break": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+      "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+      "license": "MIT"
+    },
+    "node_modules/@modelcontextprotocol/sdk": {
+      "version": "1.25.2",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.25.2.tgz",
+      "integrity": "sha512-LZFeo4F9M5qOhC/Uc1aQSrBHxMrvxett+9KLHt7OhcExtoiRN9DKgbZffMP/nxjutWDQpfMDfP3nkHI4X9ijww==",
+      "license": "MIT",
+      "dependencies": {
+        "@hono/node-server": "^1.19.7",
+        "ajv": "^8.17.1",
+        "ajv-formats": "^3.0.1",
+        "content-type": "^1.0.5",
+        "cors": "^2.8.5",
+        "cross-spawn": "^7.0.5",
+        "eventsource": "^3.0.2",
+        "eventsource-parser": "^3.0.0",
+        "express": "^5.0.1",
+        "express-rate-limit": "^7.5.0",
+        "jose": "^6.1.1",
+        "json-schema-typed": "^8.0.2",
+        "pkce-challenge": "^5.0.0",
+        "raw-body": "^3.0.0",
+        "zod": "^3.25 || ^4.0",
+        "zod-to-json-schema": "^3.25.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@cfworker/json-schema": "^4.1.1",
+        "zod": "^3.25 || ^4.0"
+      },
+      "peerDependenciesMeta": {
+        "@cfworker/json-schema": {
+          "optional": true
+        },
+        "zod": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/@modelcontextprotocol/sdk/node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@modelcontextprotocol/sdk/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/@npmcli/agent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-3.0.0.tgz",
+      "integrity": "sha512-S79NdEgDQd/NGCay6TCoVzXSj74skRZIKJcpJjC5lOq34SZzyI6MqtiiWoiVWoVrTcGjNeC4ipbh1VIHlpfF5Q==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.1",
+        "lru-cache": "^10.0.1",
+        "socks-proxy-agent": "^8.0.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/@npmcli/agent/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@npmcli/fs": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-4.0.0.tgz",
+      "integrity": "sha512-/xGlezI6xfGO9NwuJlnwz/K14qD1kCSAGtacBHnGzeAIuJGazcp45KP5NuyARXoKb7cwulAGWVsbeSxdG/cb0Q==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/@npmcli/move-file": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-2.0.1.tgz",
+      "integrity": "sha512-mJd2Z5TjYWq/ttPLLGqArdtnC74J6bOzg4rMDnN+p1xTacZ2yPRCk2y0oSWQtygLR9YVQXgOcONrwtnk3JupxQ==",
+      "deprecated": "This functionality has been moved to @npmcli/fs",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mkdirp": "^1.0.4",
+        "rimraf": "^3.0.2"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@npmcli/move-file/node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@openai/codex-sdk": {
+      "version": "0.98.0",
+      "resolved": "https://registry.npmjs.org/@openai/codex-sdk/-/codex-sdk-0.98.0.tgz",
+      "integrity": "sha512-TbPgrBpuSNMJyOXys0HNsh6UoP5VIHu1fVh2KDdACi5XyB0vuPtzBZC+qOsxHz7WXEQPFlomPLyxS6JnE5Okmg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.57.0.tgz",
+      "integrity": "sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.57.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz",
+      "integrity": "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.8.tgz",
+      "integrity": "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
+      "integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
+      "integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz",
+      "integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",
+      "integrity": "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz",
+      "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.53",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
+      "integrity": "sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.53.5.tgz",
+      "integrity": "sha512-iDGS/h7D8t7tvZ1t6+WPK04KD0MwzLZrG0se1hzBjSi5fyxlsiggoJHwh18PCFNn7tG43OWb6pdZ6Y+rMlmyNQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.53.5.tgz",
+      "integrity": "sha512-wrSAViWvZHBMMlWk6EJhvg8/rjxzyEhEdgfMMjREHEq11EtJ6IP6yfcCH57YAEca2Oe3FNCE9DSTgU70EIGmVw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.53.5.tgz",
+      "integrity": "sha512-S87zZPBmRO6u1YXQLwpveZm4JfPpAa6oHBX7/ghSiGH3rz/KDgAu1rKdGutV+WUI6tKDMbaBJomhnT30Y2t4VQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.53.5.tgz",
+      "integrity": "sha512-YTbnsAaHo6VrAczISxgpTva8EkfQus0VPEVJCEaboHtZRIb6h6j0BNxRBOwnDciFTZLDPW5r+ZBmhL/+YpTZgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.53.5.tgz",
+      "integrity": "sha512-1T8eY2J8rKJWzaznV7zedfdhD1BqVs1iqILhmHDq/bqCUZsrMt+j8VCTHhP0vdfbHK3e1IQ7VYx3jlKqwlf+vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.53.5.tgz",
+      "integrity": "sha512-sHTiuXyBJApxRn+VFMaw1U+Qsz4kcNlxQ742snICYPrY+DDL8/ZbaC4DVIB7vgZmp3jiDaKA0WpBdP0aqPJoBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.53.5.tgz",
+      "integrity": "sha512-dV3T9MyAf0w8zPVLVBptVlzaXxka6xg1f16VAQmjg+4KMSTWDvhimI/Y6mp8oHwNrmnmVl9XxJ/w/mO4uIQONA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.53.5.tgz",
+      "integrity": "sha512-wIGYC1x/hyjP+KAu9+ewDI+fi5XSNiUi9Bvg6KGAh2TsNMA3tSEs+Sh6jJ/r4BV/bx/CyWu2ue9kDnIdRyafcQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.53.5.tgz",
+      "integrity": "sha512-Y+qVA0D9d0y2FRNiG9oM3Hut/DgODZbU9I8pLLPwAsU0tUKZ49cyV1tzmB/qRbSzGvY8lpgGkJuMyuhH7Ma+Vg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.53.5.tgz",
+      "integrity": "sha512-juaC4bEgJsyFVfqhtGLz8mbopaWD+WeSOYr5E16y+1of6KQjc0BpwZLuxkClqY1i8sco+MdyoXPNiCkQou09+g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.53.5.tgz",
+      "integrity": "sha512-rIEC0hZ17A42iXtHX+EPJVL/CakHo+tT7W0pbzdAGuWOt2jxDFh7A/lRhsNHBcqL4T36+UiAgwO8pbmn3dE8wA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.53.5.tgz",
+      "integrity": "sha512-T7l409NhUE552RcAOcmJHj3xyZ2h7vMWzcwQI0hvn5tqHh3oSoclf9WgTl+0QqffWFG8MEVZZP1/OBglKZx52Q==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.53.5.tgz",
+      "integrity": "sha512-7OK5/GhxbnrMcxIFoYfhV/TkknarkYC1hqUw1wU2xUN3TVRLNT5FmBv4KkheSG2xZ6IEbRAhTooTV2+R5Tk0lQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.53.5.tgz",
+      "integrity": "sha512-GwuDBE/PsXaTa76lO5eLJTyr2k8QkPipAyOrs4V/KJufHCZBJ495VCGJol35grx9xryk4V+2zd3Ri+3v7NPh+w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.53.5.tgz",
+      "integrity": "sha512-IAE1Ziyr1qNfnmiQLHBURAD+eh/zH1pIeJjeShleII7Vj8kyEm2PF77o+lf3WTHDpNJcu4IXJxNO0Zluro8bOw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.53.5.tgz",
+      "integrity": "sha512-Pg6E+oP7GvZ4XwgRJBuSXZjcqpIW3yCBhK4BcsANvb47qMvAbCjR6E+1a/U2WXz1JJxp9/4Dno3/iSJLcm5auw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.53.5.tgz",
+      "integrity": "sha512-txGtluxDKTxaMDzUduGP0wdfng24y1rygUMnmlUJ88fzCCULCLn7oE5kb2+tRB+MWq1QDZT6ObT5RrR8HFRKqg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.53.5.tgz",
+      "integrity": "sha512-3DFiLPnTxiOQV993fMc+KO8zXHTcIjgaInrqlG8zDp1TlhYl6WgrOHuJkJQ6M8zHEcntSJsUp1XFZSY8C1DYbg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.53.5.tgz",
+      "integrity": "sha512-nggc/wPpNTgjGg75hu+Q/3i32R00Lq1B6N1DO7MCU340MRKL3WZJMjA9U4K4gzy3dkZPXm9E1Nc81FItBVGRlA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.53.5.tgz",
+      "integrity": "sha512-U/54pTbdQpPLBdEzCT6NBCFAfSZMvmjr0twhnD9f4EIvlm9wy3jjQ38yQj1AGznrNO65EWQMgm/QUjuIVrYF9w==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.53.5.tgz",
+      "integrity": "sha512-2NqKgZSuLH9SXBBV2dWNRCZmocgSOx8OJSdpRaEcRlIfX8YrKxUT6z0F1NpvDVhOsl190UFTRh2F2WDWWCYp3A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.53.5.tgz",
+      "integrity": "sha512-JRpZUhCfhZ4keB5v0fe02gQJy05GqboPOaxvjugW04RLSYYoB/9t2lx2u/tMs/Na/1NXfY8QYjgRljRpN+MjTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@sindresorhus/is": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
+      "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/is?sponsor=1"
+      }
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@szmarczak/http-timer": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
+      "integrity": "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "defer-to-connect": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
+      "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz",
+      "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-x64": "4.1.18",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.18",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.18",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.18",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz",
+      "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz",
+      "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz",
+      "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz",
+      "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz",
+      "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz",
+      "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz",
+      "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz",
+      "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz",
+      "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz",
+      "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.0",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
+      "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz",
+      "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.18.tgz",
+      "integrity": "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.1.18",
+        "@tailwindcss/oxide": "4.1.18",
+        "tailwindcss": "4.1.18"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7"
+      }
+    },
+    "node_modules/@tanstack/history": {
+      "version": "1.141.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/history/-/history-1.141.0.tgz",
+      "integrity": "sha512-LS54XNyxyTs5m/pl1lkwlg7uZM3lvsv2FIIV1rsJgnfwVCnI+n4ZGZ2CcjNT13BPu/3hPP+iHmliBSscJxW5FQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.90.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.20.tgz",
+      "integrity": "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.92.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.92.0.tgz",
+      "integrity": "sha512-N8D27KH1vEpVacvZgJL27xC6yPFUy0Zkezn5gnB3L3gRCxlDeSuiya7fKge8Y91uMTnC8aSxBQhcK6ocY7alpQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-persist-client-core": {
+      "version": "5.91.19",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.91.19.tgz",
+      "integrity": "sha512-whrASqbVq8261Ue+/ZzpHsrLDYVfRaENs4HTdLuYKxawkGWzdMfV7BmOdWl8ZF0mEBEbrQR8V6oE3R635JF2Fw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.90.20"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.90.21",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.21.tgz",
+      "integrity": "sha512-0Lu6y5t+tvlTJMTO7oh5NSpJfpg/5D41LlThfepTixPYkJ0sE2Jj0m0f6yYqujBwIXlId87e234+MxG3D3g7kg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.90.20"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.91.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.91.2.tgz",
+      "integrity": "sha512-ZJ1503ay5fFeEYFUdo7LMNFzZryi6B0Cacrgr2h1JRkvikK1khgIq6Nq2EcblqEdIlgB/r7XDW8f8DQ89RuUgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.92.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.90.14",
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@tanstack/react-query-persist-client": {
+      "version": "5.90.22",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.90.22.tgz",
+      "integrity": "sha512-BrD3Y/SsrSIDl+t/gpYvjvGHXd7m7oF+GIqktKE8LmTgt7bS1lYHd/CLkVxMPixTU53gHHVFfPNGmY7Hv4L/7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-persist-client-core": "5.91.19"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.90.20",
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@tanstack/react-router": {
+      "version": "1.141.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-router/-/react-router-1.141.6.tgz",
+      "integrity": "sha512-qWFxi2D6eGc1L03RzUuhyEOplZ7Q6q62YOl7Of9Y0q4YjwQwxRm4zxwDVtvUIoy4RLVCpqp5UoE+Nxv2PY9trg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/history": "1.141.0",
+        "@tanstack/react-store": "^0.8.0",
+        "@tanstack/router-core": "1.141.6",
+        "isbot": "^5.1.22",
+        "tiny-invariant": "^1.3.3",
+        "tiny-warning": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0 || >=19.0.0",
+        "react-dom": ">=18.0.0 || >=19.0.0"
+      }
+    },
+    "node_modules/@tanstack/react-store": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-store/-/react-store-0.8.0.tgz",
+      "integrity": "sha512-1vG9beLIuB7q69skxK9r5xiLN3ztzIPfSQSs0GfeqWGO2tGIyInZx0x1COhpx97RKaONSoAb8C3dxacWksm1ow==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/store": "0.8.0",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/router-core": {
+      "version": "1.141.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/router-core/-/router-core-1.141.6.tgz",
+      "integrity": "sha512-AqH61axLq2xFaM+B0veGQ4OOzMzr2Ih+qXzBmGRy5e0wMJkr1efPZXLF0K7nEjF++bmL/excew2Br6v9xrZ/5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/history": "1.141.0",
+        "@tanstack/store": "^0.8.0",
+        "cookie-es": "^2.0.0",
+        "seroval": "^1.4.0",
+        "seroval-plugins": "^1.4.0",
+        "tiny-invariant": "^1.3.3",
+        "tiny-warning": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/router-generator": {
+      "version": "1.141.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/router-generator/-/router-generator-1.141.7.tgz",
+      "integrity": "sha512-SgOI/PmG3IGRf5q9bbYVE9xH1tP1ah0jIzGiI2w1D1nlljU+rd1DpSY7kEr9P6EHJpwDeb50DNi4Aq1WbEljSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/router-core": "1.141.6",
+        "@tanstack/router-utils": "1.141.0",
+        "@tanstack/virtual-file-routes": "1.141.0",
+        "prettier": "^3.5.0",
+        "recast": "^0.23.11",
+        "source-map": "^0.7.4",
+        "tsx": "^4.19.2",
+        "zod": "^3.24.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/router-generator/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/@tanstack/router-plugin": {
+      "version": "1.141.7",
+      "resolved": "https://registry.npmjs.org/@tanstack/router-plugin/-/router-plugin-1.141.7.tgz",
+      "integrity": "sha512-znYaRYaUIEl2uJ+lP2qkC//dKtowb2IwU7jOGa7ygnCRVpK3TcTUMezfyI67jfDiB0rM8ICj5sqONfhN9I/F2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.27.7",
+        "@babel/plugin-syntax-jsx": "^7.27.1",
+        "@babel/plugin-syntax-typescript": "^7.27.1",
+        "@babel/template": "^7.27.2",
+        "@babel/traverse": "^7.27.7",
+        "@babel/types": "^7.27.7",
+        "@tanstack/router-core": "1.141.6",
+        "@tanstack/router-generator": "1.141.7",
+        "@tanstack/router-utils": "1.141.0",
+        "@tanstack/virtual-file-routes": "1.141.0",
+        "babel-dead-code-elimination": "^1.0.10",
+        "chokidar": "^3.6.0",
+        "unplugin": "^2.1.2",
+        "zod": "^3.24.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@rsbuild/core": ">=1.0.2",
+        "@tanstack/react-router": "^1.141.6",
+        "vite": ">=5.0.0 || >=6.0.0 || >=7.0.0",
+        "vite-plugin-solid": "^2.11.10",
+        "webpack": ">=5.92.0"
+      },
+      "peerDependenciesMeta": {
+        "@rsbuild/core": {
+          "optional": true
+        },
+        "@tanstack/react-router": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        },
+        "vite-plugin-solid": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tanstack/router-plugin/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/@tanstack/router-utils": {
+      "version": "1.141.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/router-utils/-/router-utils-1.141.0.tgz",
+      "integrity": "sha512-/eFGKCiix1SvjxwgzrmH4pHjMiMxc+GA4nIbgEkG2RdAJqyxLcRhd7RPLG0/LZaJ7d0ad3jrtRqsHLv2152Vbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.27.4",
+        "@babel/generator": "^7.27.5",
+        "@babel/parser": "^7.27.5",
+        "@babel/preset-typescript": "^7.27.1",
+        "ansis": "^4.1.0",
+        "diff": "^8.0.2",
+        "pathe": "^2.0.3",
+        "tinyglobby": "^0.2.15"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/store": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/store/-/store-0.8.0.tgz",
+      "integrity": "sha512-Om+BO0YfMZe//X2z0uLF2j+75nQga6TpTJgLJQBiq85aOyZNIhkCgleNcud2KQg4k4v9Y9l+Uhru3qWMPGTOzQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/virtual-file-routes": {
+      "version": "1.141.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-file-routes/-/virtual-file-routes-1.141.0.tgz",
+      "integrity": "sha512-CJrWtr6L9TVzEImm9S7dQINx+xJcYP/aDkIi6gnaWtIgbZs1pnzsE0yJc2noqXZ+yAOqLx3TBGpBEs9tS0P9/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
+      "integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^10.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+      "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
+    "node_modules/@tootallnate/once": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
+      "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.6",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz",
+      "integrity": "sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/cacheable-request": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
+      "integrity": "sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-cache-semantics": "*",
+        "@types/keyv": "^3.1.4",
+        "@types/node": "*",
+        "@types/responselike": "^1.0.0"
+      }
+    },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
+      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/cookie-parser": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@types/cookie-parser/-/cookie-parser-1.4.10.tgz",
+      "integrity": "sha512-B4xqkqfZ8Wek+rCOeRxsjMS9OgvzebEzzLYw7NHYuvzb7IdxOkI0ZHGgeEBX4PUM7QGVvNSK60T3OvWj3YfBRg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/express": "*"
+      }
+    },
+    "node_modules/@types/cors": {
+      "version": "2.8.19",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz",
+      "integrity": "sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/dagre": {
+      "version": "0.7.53",
+      "resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.53.tgz",
+      "integrity": "sha512-f4gkWqzPZvYmKhOsDnhq/R8mO4UMcKdxZo+i5SCkOU1wvGeHJeUXGIHeE9pnwGyPMDof1Vx5ZQo4nxpeg2TTVQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/express": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-5.0.6.tgz",
+      "integrity": "sha512-sKYVuV7Sv9fbPIt/442koC7+IIwK5olP1KWeD88e/idgoJqDm3JV/YUiPwkoKK92ylff2MGxSz1CSjsXelx0YA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^5.0.0",
+        "@types/serve-static": "^2"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.1.0.tgz",
+      "integrity": "sha512-jnHMsrd0Mwa9Cf4IdOzbz543y4XJepXrbia2T4b6+spXC2We3t1y6K44D3mR8XMFSXMCf3/l7rCgddfx7UNVBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*",
+        "@types/send": "*"
+      }
+    },
+    "node_modules/@types/fs-extra": {
+      "version": "9.0.13",
+      "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.13.tgz",
+      "integrity": "sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/http-cache-semantics": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
+      "integrity": "sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/http-errors": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.5.tgz",
+      "integrity": "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/keyv": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz",
+      "integrity": "sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/morgan": {
+      "version": "1.9.10",
+      "resolved": "https://registry.npmjs.org/@types/morgan/-/morgan-1.9.10.tgz",
+      "integrity": "sha512-sS4A1zheMvsADRVfT0lYbJ4S9lmsey8Zo2F7cnbYjWHP67Q0AwMYuuzLlkIM2N8gAbb9cubhIVFwcIN2XyYCkA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "25.0.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.3.tgz",
+      "integrity": "sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/@types/node/node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/plist": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/plist/-/plist-3.0.5.tgz",
+      "integrity": "sha512-E6OCaRmAe4WDmWNsL/9RMqdkkzDCY1etutkflWk4c+AcjDU07Pcz1fQwTX0TQz+Pxqn9i4L1TU3UFpjnrcDgxA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*",
+        "xmlbuilder": ">=11.0.1"
+      }
+    },
+    "node_modules/@types/qs": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
+      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@types/responselike": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.3.tgz",
+      "integrity": "sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/serve-static": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-2.2.0.tgz",
+      "integrity": "sha512-8mam4H1NHLtu7nmtalF7eyBH14QyOASmcxHhSfEoRyr0nP/YdoesEtU+uSRvMe96TW/HPTtkoKqQLl53N7UXMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-errors": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/verror": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.11.tgz",
+      "integrity": "sha512-RlDm9K7+o5stv0Co8i8ZRGxDbrTxhJtgjqjFyVh/tXQyl/rYtTKlnTvZ88oSTeYREWurwx20Js4kTuKCsFkUtg==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/yauzl": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.50.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.50.0.tgz",
+      "integrity": "sha512-O7QnmOXYKVtPrfYzMolrCTfkezCJS9+ljLdKW/+DCvRsc3UAz+sbH6Xcsv7p30+0OwUbeWfUDAQE0vpabZ3QLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.50.0",
+        "@typescript-eslint/type-utils": "8.50.0",
+        "@typescript-eslint/utils": "8.50.0",
+        "@typescript-eslint/visitor-keys": "8.50.0",
+        "ignore": "^7.0.0",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.50.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.50.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.50.0.tgz",
+      "integrity": "sha512-6/cmF2piao+f6wSxUsJLZjck7OQsYyRtcOZS02k7XINSNlz93v6emM8WutDQSXnroG2xwYlEVHJI+cPA7CPM3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.50.0",
+        "@typescript-eslint/types": "8.50.0",
+        "@typescript-eslint/typescript-estree": "8.50.0",
+        "@typescript-eslint/visitor-keys": "8.50.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.50.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.50.0.tgz",
+      "integrity": "sha512-Cg/nQcL1BcoTijEWyx4mkVC56r8dj44bFDvBdygifuS20f3OZCHmFbjF34DPSi07kwlFvqfv/xOLnJ5DquxSGQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.50.0",
+        "@typescript-eslint/types": "^8.50.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.50.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.50.0.tgz",
+      "integrity": "sha512-xCwfuCZjhIqy7+HKxBLrDVT5q/iq7XBVBXLn57RTIIpelLtEIZHXAF/Upa3+gaCpeV1NNS5Z9A+ID6jn50VD4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.50.0",
+        "@typescript-eslint/visitor-keys": "8.50.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.50.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.50.0.tgz",
+      "integrity": "sha512-vxd3G/ybKTSlm31MOA96gqvrRGv9RJ7LGtZCn2Vrc5htA0zCDvcMqUkifcjrWNNKXHUU3WCkYOzzVSFBd0wa2w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.50.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.50.0.tgz",
+      "integrity": "sha512-7OciHT2lKCewR0mFoBrvZJ4AXTMe/sYOe87289WAViOocEmDjjv8MvIOT2XESuKj9jp8u3SZYUSh89QA4S1kQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.50.0",
+        "@typescript-eslint/typescript-estree": "8.50.0",
+        "@typescript-eslint/utils": "8.50.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.50.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.50.0.tgz",
+      "integrity": "sha512-iX1mgmGrXdANhhITbpp2QQM2fGehBse9LbTf0sidWK6yg/NE+uhV5dfU1g6EYPlcReYmkE9QLPq/2irKAmtS9w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.50.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.50.0.tgz",
+      "integrity": "sha512-W7SVAGBR/IX7zm1t70Yujpbk+zdPq/u4soeFSknWFdXIFuWsBGBOUu/Tn/I6KHSKvSh91OiMuaSnYp3mtPt5IQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.50.0",
+        "@typescript-eslint/tsconfig-utils": "8.50.0",
+        "@typescript-eslint/types": "8.50.0",
+        "@typescript-eslint/visitor-keys": "8.50.0",
+        "debug": "^4.3.4",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.50.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.50.0.tgz",
+      "integrity": "sha512-87KgUXET09CRjGCi2Ejxy3PULXna63/bMYv72tCAlDJC3Yqwln0HiFJ3VJMst2+mEtNtZu5oFvX4qJGjKsnAgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.50.0",
+        "@typescript-eslint/types": "8.50.0",
+        "@typescript-eslint/typescript-estree": "8.50.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.50.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.50.0.tgz",
+      "integrity": "sha512-Xzmnb58+Db78gT/CCj/PVCvK+zxbnsw6F+O1oheYszJbBSdEjVhQi3C/Xttzxgi/GLmpvOggRs1RFpiJ8+c34Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.50.0",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@uiw/codemirror-extensions-basic-setup": {
+      "version": "4.25.4",
+      "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.25.4.tgz",
+      "integrity": "sha512-YzNwkm0AbPv1EXhCHYR5v0nqfemG2jEB0Z3Att4rBYqKrlG7AA9Rhjc3IyBaOzsBu18wtrp9/+uhTyu7TXSRng==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@codemirror/autocomplete": ">=6.0.0",
+        "@codemirror/commands": ">=6.0.0",
+        "@codemirror/language": ">=6.0.0",
+        "@codemirror/lint": ">=6.0.0",
+        "@codemirror/search": ">=6.0.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0"
+      }
+    },
+    "node_modules/@uiw/react-codemirror": {
+      "version": "4.25.4",
+      "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.25.4.tgz",
+      "integrity": "sha512-ipO067oyfUw+DVaXhQCxkB0ZD9b7RnY+ByrprSYSKCHaULvJ3sqWYC/Zen6zVQ8/XC4o5EPBfatGiX20kC7XGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.6",
+        "@codemirror/commands": "^6.1.0",
+        "@codemirror/state": "^6.1.1",
+        "@codemirror/theme-one-dark": "^6.0.0",
+        "@uiw/codemirror-extensions-basic-setup": "4.25.4",
+        "codemirror": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@babel/runtime": ">=7.11.0",
+        "@codemirror/state": ">=6.0.0",
+        "@codemirror/theme-one-dark": ">=6.0.0",
+        "@codemirror/view": ">=6.0.0",
+        "codemirror": ">=6.0.0",
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "license": "ISC"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.2.tgz",
+      "integrity": "sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.5",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.53",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.18.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/@vitest/coverage-v8": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.0.16.tgz",
+      "integrity": "sha512-2rNdjEIsPRzsdu6/9Eq0AYAzYdpP6Bx9cje9tL3FE5XzXRQF1fNU9pe/1yE8fCrS0HD+fBtt6gLPh6LI57tX7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@bcoe/v8-coverage": "^1.0.2",
+        "@vitest/utils": "4.0.16",
+        "ast-v8-to-istanbul": "^0.3.8",
+        "istanbul-lib-coverage": "^3.2.2",
+        "istanbul-lib-report": "^3.0.1",
+        "istanbul-lib-source-maps": "^5.0.6",
+        "istanbul-reports": "^3.2.0",
+        "magicast": "^0.5.1",
+        "obug": "^2.1.1",
+        "std-env": "^3.10.0",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@vitest/browser": "4.0.16",
+        "vitest": "4.0.16"
+      },
+      "peerDependenciesMeta": {
+        "@vitest/browser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.16.tgz",
+      "integrity": "sha512-eshqULT2It7McaJkQGLkPjPjNph+uevROGuIMJdG3V+0BSR2w9u6J9Lwu+E8cK5TETlfou8GRijhafIMhXsimA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.0.16",
+        "@vitest/utils": "4.0.16",
+        "chai": "^6.2.1",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.16.tgz",
+      "integrity": "sha512-yb6k4AZxJTB+q9ycAvsoxGn+j/po0UaPgajllBgt1PzoMAAmJGYFdDk0uCcRcxb3BrME34I6u8gHZTQlkqSZpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.0.16",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.16.tgz",
+      "integrity": "sha512-eNCYNsSty9xJKi/UdVD8Ou16alu7AYiS2fCPRs0b1OdhJiV89buAXQLpTbe+X8V9L6qrs9CqyvU7OaAopJYPsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.16.tgz",
+      "integrity": "sha512-VWEDm5Wv9xEo80ctjORcTQRJ539EGPB3Pb9ApvVRAY1U/WkHXmmYISqU5E79uCwcW7xYUV38gwZD+RV755fu3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.0.16",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.16.tgz",
+      "integrity": "sha512-sf6NcrYhYBsSYefxnry+DR8n3UV4xWZwWxYbCJUt2YdvtqzSPR7VfGrY0zsv090DAbjFZsi7ZaMi1KnSRyK1XA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.0.16",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.16.tgz",
+      "integrity": "sha512-4jIOWjKP0ZUaEmJm00E0cOBLU+5WE0BpeNr3XN6TEF05ltro6NJqHWxXD0kA8/Zc8Nh23AT8WQxwNG+WeROupw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/ui": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-4.0.16.tgz",
+      "integrity": "sha512-rkoPH+RqWopVxDnCBE/ysIdfQ2A7j1eDmW8tCxxrR9nnFBa9jKf86VgsSAzxBd1x+ny0GC4JgiD3SNfRHv3pOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.0.16",
+        "fflate": "^0.8.2",
+        "flatted": "^3.3.3",
+        "pathe": "^2.0.3",
+        "sirv": "^3.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "vitest": "4.0.16"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.16.tgz",
+      "integrity": "sha512-h8z9yYhV3e1LEfaQ3zdypIrnAg/9hguReGZoS7Gl0aBG5xgA410zBqECqmaF/+RkTggRsfnzc1XaAHA6bmUufA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.0.16",
+        "tinyrainbow": "^3.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.11",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.11.tgz",
+      "integrity": "sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/@xterm/addon-fit": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
+      "integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@xterm/xterm": "^5.0.0"
+      }
+    },
+    "node_modules/@xterm/addon-search": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-search/-/addon-search-0.15.0.tgz",
+      "integrity": "sha512-ZBZKLQ+EuKE83CqCmSSz5y1tx+aNOCUaA7dm6emgOX+8J9H1FWXZyrKfzjwzV+V14TV3xToz1goIeRhXBS5qjg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@xterm/xterm": "^5.0.0"
+      }
+    },
+    "node_modules/@xterm/addon-web-links": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.11.0.tgz",
+      "integrity": "sha512-nIHQ38pQI+a5kXnRaTgwqSHnX7KE6+4SVoceompgHL26unAxdfP6IPqUTSYPQgSwM56hsElfoNrrW5V7BUED/Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@xterm/xterm": "^5.0.0"
+      }
+    },
+    "node_modules/@xterm/addon-webgl": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-webgl/-/addon-webgl-0.18.0.tgz",
+      "integrity": "sha512-xCnfMBTI+/HKPdRnSOHaJDRqEpq2Ugy8LEj9GiY4J3zJObo3joylIFaMvzBwbYRg8zLtkO0KQaStCeSfoaI2/w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@xterm/xterm": "^5.0.0"
+      }
+    },
+    "node_modules/@xterm/xterm": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
+      "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
+      "license": "MIT"
+    },
+    "node_modules/@xyflow/react": {
+      "version": "12.10.0",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.10.0.tgz",
+      "integrity": "sha512-eOtz3whDMWrB4KWVatIBrKuxECHqip6PfA8fTpaS2RUGVpiEAe+nqDKsLqkViVWxDGreq0lWX71Xth/SPAzXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.74",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/react/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.74",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.74.tgz",
+      "integrity": "sha512-7v7B/PkiVrkdZzSbL+inGAo6tkR/WQHHG0/jhSvLQToCsfa8YubOGmBYd1s08tpKpihdHDZFwzQZeR69QSBb4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
+    "node_modules/7zip-bin": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/7zip-bin/-/7zip-bin-5.2.0.tgz",
+      "integrity": "sha512-ukTPVhqG4jNzMro2qA9HSCSSVJN3aN7tlb+hfqYCt3ER0yWroeA2VR38MNrOHLQ/cVj+DaIMad0kFCtWWowh/A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/abbrev": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-3.0.1.tgz",
+      "integrity": "sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/agentkeepalive": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.6.0.tgz",
+      "integrity": "sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "humanize-ms": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
+    "node_modules/aggregate-error": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
+      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-formats/node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
+    "node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/ansi-escapes": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.2.0.tgz",
+      "integrity": "sha512-g6LhBsl+GBPRWGWsBtutpzBYuIIdBkLEvad5C/va/74Db018+5TZiyA26cZJAr3Rft5lprVqOIPxf5Vid6tqAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "environment": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/ansis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/ansis/-/ansis-4.2.0.tgz",
+      "integrity": "sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/app-builder-bin": {
+      "version": "5.0.0-alpha.12",
+      "resolved": "https://registry.npmjs.org/app-builder-bin/-/app-builder-bin-5.0.0-alpha.12.tgz",
+      "integrity": "sha512-j87o0j6LqPL3QRr8yid6c+Tt5gC7xNfYo6uQIQkorAC6MpeayVMZrEDzKmJJ/Hlv7EnOQpaRm53k6ktDYZyB6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/app-builder-lib": {
+      "version": "26.0.12",
+      "resolved": "https://registry.npmjs.org/app-builder-lib/-/app-builder-lib-26.0.12.tgz",
+      "integrity": "sha512-+/CEPH1fVKf6HowBUs6LcAIoRcjeqgvAeoSE+cl7Y7LndyQ9ViGPYibNk7wmhMHzNgHIuIbw4nWADPO+4mjgWw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@develar/schema-utils": "~2.6.5",
+        "@electron/asar": "3.2.18",
+        "@electron/fuses": "^1.8.0",
+        "@electron/notarize": "2.5.0",
+        "@electron/osx-sign": "1.3.1",
+        "@electron/rebuild": "3.7.0",
+        "@electron/universal": "2.0.1",
+        "@malept/flatpak-bundler": "^0.4.0",
+        "@types/fs-extra": "9.0.13",
+        "async-exit-hook": "^2.0.1",
+        "builder-util": "26.0.11",
+        "builder-util-runtime": "9.3.1",
+        "chromium-pickle-js": "^0.2.0",
+        "config-file-ts": "0.2.8-rc1",
+        "debug": "^4.3.4",
+        "dotenv": "^16.4.5",
+        "dotenv-expand": "^11.0.6",
+        "ejs": "^3.1.8",
+        "electron-publish": "26.0.11",
+        "fs-extra": "^10.1.0",
+        "hosted-git-info": "^4.1.0",
+        "is-ci": "^3.0.0",
+        "isbinaryfile": "^5.0.0",
+        "js-yaml": "^4.1.0",
+        "json5": "^2.2.3",
+        "lazy-val": "^1.0.5",
+        "minimatch": "^10.0.0",
+        "plist": "3.1.0",
+        "resedit": "^1.7.0",
+        "semver": "^7.3.8",
+        "tar": "^6.1.12",
+        "temp-file": "^3.4.0",
+        "tiny-async-pool": "1.3.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "dmg-builder": "26.0.12",
+        "electron-builder-squirrel-windows": "26.0.12"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/@electron/rebuild": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@electron/rebuild/-/rebuild-3.7.0.tgz",
+      "integrity": "sha512-VW++CNSlZwMYP7MyXEbrKjpzEwhB5kDNbzGtiPEjwYysqyTCF+YbNJ210Dj3AjWsGSV4iEEwNkmJN9yGZmVvmw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@electron/node-gyp": "git+https://github.com/electron/node-gyp.git#06b29aafb7708acef8b3669835c8a7857ebc92d2",
+        "@malept/cross-spawn-promise": "^2.0.0",
+        "chalk": "^4.0.0",
+        "debug": "^4.1.1",
+        "detect-libc": "^2.0.1",
+        "fs-extra": "^10.0.0",
+        "got": "^11.7.0",
+        "node-abi": "^3.45.0",
+        "node-api-version": "^0.2.0",
+        "ora": "^5.1.0",
+        "read-binary-file-arch": "^1.0.6",
+        "semver": "^7.3.5",
+        "tar": "^6.0.5",
+        "yargs": "^17.0.1"
+      },
+      "bin": {
+        "electron-rebuild": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/dotenv": {
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/minimatch": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.1.1.tgz",
+      "integrity": "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/brace-expansion": "^5.0.0"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/node-abi": {
+      "version": "3.85.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.85.0.tgz",
+      "integrity": "sha512-zsFhmbkAzwhTft6nd3VxcG0cvJsT70rL+BIGHWVq5fi6MwGrHwzqKaxXE+Hl2GmnGItnDKPPkO5/LQqjVkIdFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/assert-plus": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+      "integrity": "sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/ast-types": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+      "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/ast-v8-to-istanbul": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-0.3.9.tgz",
+      "integrity": "sha512-dSC6tJeOJxbZrPzPbv5mMd6CMiQ1ugaVXXPRad2fXUSsy1kstFn9XQWemV9VW7Y7kpxgQ/4WMoZfwdH8XSU48w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.31",
+        "estree-walker": "^3.0.3",
+        "js-tokens": "^9.0.1"
+      }
+    },
+    "node_modules/ast-v8-to-istanbul/node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-exit-hook": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/async-exit-hook/-/async-exit-hook-2.0.1.tgz",
+      "integrity": "sha512-NW2cX8m1Q7KPA7a5M2ULQeZ2wR5qI5PAbw5L0UOMxdioVk9PMZ0h1TmyZEkPYrCvYjDlFICusOu1dlEKAAeXBw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/babel-dead-code-elimination": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/babel-dead-code-elimination/-/babel-dead-code-elimination-1.0.11.tgz",
+      "integrity": "sha512-mwq3W3e/pKSI6TG8lXMiDWvEi1VXYlSBlJlB3l+I0bAb5u1RNUl88udos85eOPNK3m5EXK9uO7d2g08pesTySQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.23.7",
+        "@babel/parser": "^7.23.6",
+        "@babel/traverse": "^7.23.7",
+        "@babel/types": "^7.23.6"
+      }
+    },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "devOptional": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.9",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.9.tgz",
+      "integrity": "sha512-V8fbOCSeOFvlDj7LLChUcqbZrdKD9RU/VR260piF1790vT0mfLSwGc/Qzxv3IqiTukOpNtItePa0HBpMAj7MDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/basic-auth": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+      "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.1.tgz",
+      "integrity": "sha512-nfDwkulwiZYQIGwxdy0RUmowMhKcFVcYXUU7m4QlKYim1rUtg83xm2yjZ40QjDuc291AJjjeSc9b++AWHSgSHw==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "^3.1.2",
+        "content-type": "^1.0.5",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.0",
+        "iconv-lite": "^0.7.0",
+        "on-finished": "^2.4.1",
+        "qs": "^6.14.0",
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/body-parser/node_modules/iconv-lite": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.1.tgz",
+      "integrity": "sha512-2Tth85cXwGFHfvRgZWszZSvdo+0Xsqmw8k8ZwxScfcBneNUraK+dxRxRm24nszx80Y0TVio8kKLt5sLE7ZCLlw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/boolean": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
+      "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "devOptional": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/builder-util": {
+      "version": "26.0.11",
+      "resolved": "https://registry.npmjs.org/builder-util/-/builder-util-26.0.11.tgz",
+      "integrity": "sha512-xNjXfsldUEe153h1DraD0XvDOpqGR0L5eKFkdReB7eFW5HqysDZFfly4rckda6y9dF39N3pkPlOblcfHKGw+uA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.1.6",
+        "7zip-bin": "~5.2.0",
+        "app-builder-bin": "5.0.0-alpha.12",
+        "builder-util-runtime": "9.3.1",
+        "chalk": "^4.1.2",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.4",
+        "fs-extra": "^10.1.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.0",
+        "is-ci": "^3.0.0",
+        "js-yaml": "^4.1.0",
+        "sanitize-filename": "^1.6.3",
+        "source-map-support": "^0.5.19",
+        "stat-mode": "^1.0.0",
+        "temp-file": "^3.4.0",
+        "tiny-async-pool": "1.3.0"
+      }
+    },
+    "node_modules/builder-util-runtime": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.3.1.tgz",
+      "integrity": "sha512-2/egrNDDnRaxVwK3A+cJq6UOlqOdedGA7JPqCeJjN2Zjk1/QB/6QUi3b714ScIGS7HafFXTyzJEOr5b44I3kvQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "sax": "^1.2.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/builder-util/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/builder-util/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/builder-util/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cacache": {
+      "version": "19.0.1",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-19.0.1.tgz",
+      "integrity": "sha512-hdsUxulXCi5STId78vRVYEtDAjq99ICAUktLTeTYsLoTE6Z8dS0c8pWNCxwdrk9YfJeobDZc2Y186hD/5ZQgFQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/fs": "^4.0.0",
+        "fs-minipass": "^3.0.0",
+        "glob": "^10.2.2",
+        "lru-cache": "^10.0.1",
+        "minipass": "^7.0.3",
+        "minipass-collect": "^2.0.1",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "p-map": "^7.0.2",
+        "ssri": "^12.0.0",
+        "tar": "^7.4.3",
+        "unique-filename": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/cacache/node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/cacache/node_modules/glob": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/cacache/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/cacache/node_modules/tar": {
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.2.tgz",
+      "integrity": "sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/cacache/node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/cacheable-lookup": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
+      "integrity": "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.6.0"
+      }
+    },
+    "node_modules/cacheable-request": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.4.tgz",
+      "integrity": "sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clone-response": "^1.0.2",
+        "get-stream": "^5.1.0",
+        "http-cache-semantics": "^4.0.0",
+        "keyv": "^4.0.0",
+        "lowercase-keys": "^2.0.0",
+        "normalize-url": "^6.0.1",
+        "responselike": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001760",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001760.tgz",
+      "integrity": "sha512-7AAMPcueWELt1p3mi13HR/LHH0TJLT11cnwDJEs3xA4+CK/PLKeO9Kl1oru24htkyUKtkGCvAx4ohB0Ttry8Dw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/chai": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.1.tgz",
+      "integrity": "sha512-p4Z49OGG5W/WBCPSS/dH3jQ73kD6tiMmUM+bckNK6Jr5JHMG3k9bg/BvKR8lKmtVBKmOiuVaV2ws8s9oSbwysg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/check-error": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.3.tgz",
+      "integrity": "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/chromium-pickle-js": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/chromium-pickle-js/-/chromium-pickle-js-0.2.0.tgz",
+      "integrity": "sha512-1R5Fho+jBq0DDydt+/vHWj5KJNJCKdARKOCwZUen84I5BreWoLqRLANH1U87eJy1tiASPtMnGqJJq0ZsLoRPOw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ci-info": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
+      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
+      "license": "MIT"
+    },
+    "node_modules/clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-spinners": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
+      "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
+      "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "slice-ansi": "^3.0.0",
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/clone-response": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
+      "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/codemirror": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz",
+      "integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/compare-version": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/compare-version/-/compare-version-0.1.2.tgz",
+      "integrity": "sha512-pJDh5/4wrEnXX/VWRZvruAGHkzKdr46z11OlTPN+VrATlWWhSKewNCJ1futCO5C7eJB3nPMFZA1LeYtcFboZ2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/config-file-ts": {
+      "version": "0.2.8-rc1",
+      "resolved": "https://registry.npmjs.org/config-file-ts/-/config-file-ts-0.2.8-rc1.tgz",
+      "integrity": "sha512-GtNECbVI82bT4RiDIzBSVuTKoSHufnU7Ce7/42bkWZJZFLjmDF2WBpVsvRkhKCfKBnTBb3qZrBwPpFBU/Myvhg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "glob": "^10.3.12",
+        "typescript": "^5.4.3"
+      }
+    },
+    "node_modules/config-file-ts/node_modules/glob": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
+      "integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-es": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-2.0.0.tgz",
+      "integrity": "sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==",
+      "license": "MIT"
+    },
+    "node_modules/cookie-parser": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.7.tgz",
+      "integrity": "sha512-nGUvgXnotP3BsjiLX2ypbQnWoGUPIIfHQNZkkC668ntrzGWEZVW70HDEB1qnNGMicPje6EttlIgzo51YSwNQGw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "0.7.2",
+        "cookie-signature": "1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/cookie-parser/node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
+      "license": "MIT"
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.6.0"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/crc": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/crc/-/crc-3.8.0.tgz",
+      "integrity": "sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "buffer": "^5.1.0"
+      }
+    },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
+    "node_modules/cross-env": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.1.0.tgz",
+      "integrity": "sha512-GsYosgnACZTADcmEyJctkJIoqAhHjttw7RsFrVoJNXbsWWqaq6Ym+7kZjq6mS45O0jij6vtiReppKQEtqWy6Dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@epic-web/invariant": "^1.0.0",
+        "cross-spawn": "^7.0.6"
+      },
+      "bin": {
+        "cross-env": "dist/bin/cross-env.js",
+        "cross-env-shell": "dist/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.12.2",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cssstyle": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-6.1.0.tgz",
+      "integrity": "sha512-Ml4fP2UT2K3CUBQnVlbdV/8aFDdlY69E+YnwJM+3VUWl08S3J8c8aRuJqCkD9Py8DHZ7zNNvsfKl8psocHZEFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^5.0.0",
+        "@csstools/css-syntax-patches-for-csstree": "^1.0.28",
+        "css-tree": "^3.1.0",
+        "lru-cache": "^11.2.6"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/cssstyle/node_modules/lru-cache": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
+      "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "license": "MIT",
+      "dependencies": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
+    "node_modules/data-urls": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
+      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz",
+      "integrity": "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/decompress-response/node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/defaults": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
+      "integrity": "sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clone": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/defer-to-connect": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
+      "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/diff": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.2.tgz",
+      "integrity": "sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/dir-compare": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/dir-compare/-/dir-compare-4.2.0.tgz",
+      "integrity": "sha512-2xMCmOoMrdQIPHdsTawECdNPwlVFB9zGcz3kuhmBO6U3oU+UQjsue0i8ayLKpgBcm+hcXPMVSGUN9d+pvJ6+VQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimatch": "^3.0.5",
+        "p-limit": "^3.1.0 "
+      }
+    },
+    "node_modules/dir-compare/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/dir-compare/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/dmg-builder": {
+      "version": "26.0.12",
+      "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-26.0.12.tgz",
+      "integrity": "sha512-59CAAjAhTaIMCN8y9kD573vDkxbs1uhDcrFLHSgutYdPcGOU35Rf95725snvzEOy4BFB7+eLJ8djCNPmGwG67w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "app-builder-lib": "26.0.12",
+        "builder-util": "26.0.11",
+        "builder-util-runtime": "9.3.1",
+        "fs-extra": "^10.1.0",
+        "iconv-lite": "^0.6.2",
+        "js-yaml": "^4.1.0"
+      },
+      "optionalDependencies": {
+        "dmg-license": "^1.0.11"
+      }
+    },
+    "node_modules/dmg-builder/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dmg-builder/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/dmg-builder/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/dmg-license": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/dmg-license/-/dmg-license-1.0.11.tgz",
+      "integrity": "sha512-ZdzmqwKmECOWJpqefloC5OJy1+WZBBse5+MR88z9g9Zn4VY+WYUkAyojmhzJckH5YbbZGcYIuGAkY5/Ys5OM2Q==",
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "dependencies": {
+        "@types/plist": "^3.0.1",
+        "@types/verror": "^1.10.3",
+        "ajv": "^6.10.0",
+        "crc": "^3.8.0",
+        "iconv-corefoundation": "^1.1.7",
+        "plist": "^3.0.4",
+        "smart-buffer": "^4.0.2",
+        "verror": "^1.10.0"
+      },
+      "bin": {
+        "dmg-license": "bin/dmg-license.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/dotenv": {
+      "version": "17.2.3",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.3.tgz",
+      "integrity": "sha512-JVUnt+DUIzu87TABbhPmNfVdBDt18BLOWjMUFJMSi/Qqg7NTYtabbvSNJGOJ7afbRuv9D/lngizHtP7QyLQ+9w==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dotenv-expand": {
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-11.0.7.tgz",
+      "integrity": "sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dotenv": "^16.4.5"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dotenv-expand/node_modules/dotenv": {
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/ejs": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/electron": {
+      "version": "39.2.7",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-39.2.7.tgz",
+      "integrity": "sha512-KU0uFS6LSTh4aOIC3miolcbizOFP7N1M46VTYVfqIgFiuA2ilfNaOHLDS9tCMvwwHRowAsvqBrh9NgMXcTOHCQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "@electron/get": "^2.0.0",
+        "@types/node": "^22.7.7",
+        "extract-zip": "^2.0.1"
+      },
+      "bin": {
+        "electron": "cli.js"
+      },
+      "engines": {
+        "node": ">= 12.20.55"
+      }
+    },
+    "node_modules/electron-builder": {
+      "version": "26.0.12",
+      "resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-26.0.12.tgz",
+      "integrity": "sha512-cD1kz5g2sgPTMFHjLxfMjUK5JABq3//J4jPswi93tOPFz6btzXYtK5NrDt717NRbukCUDOrrvmYVOWERlqoiXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "app-builder-lib": "26.0.12",
+        "builder-util": "26.0.11",
+        "builder-util-runtime": "9.3.1",
+        "chalk": "^4.1.2",
+        "dmg-builder": "26.0.12",
+        "fs-extra": "^10.1.0",
+        "is-ci": "^3.0.0",
+        "lazy-val": "^1.0.5",
+        "simple-update-notifier": "2.0.0",
+        "yargs": "^17.6.2"
+      },
+      "bin": {
+        "electron-builder": "cli.js",
+        "install-app-deps": "install-app-deps.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/electron-builder/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/electron-builder/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/electron-builder/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/electron-publish": {
+      "version": "26.0.11",
+      "resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-26.0.11.tgz",
+      "integrity": "sha512-a8QRH0rAPIWH9WyyS5LbNvW9Ark6qe63/LqDB7vu2JXYpi0Gma5Q60Dh4tmTqhOBQt0xsrzD8qE7C+D7j+B24A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/fs-extra": "^9.0.11",
+        "builder-util": "26.0.11",
+        "builder-util-runtime": "9.3.1",
+        "chalk": "^4.1.2",
+        "form-data": "^4.0.0",
+        "fs-extra": "^10.1.0",
+        "lazy-val": "^1.0.5",
+        "mime": "^2.5.2"
+      }
+    },
+    "node_modules/electron-publish/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/electron-publish/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/electron-publish/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.267",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
+      "integrity": "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/electron/node_modules/@types/node": {
+      "version": "22.19.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.3.tgz",
+      "integrity": "sha512-1N9SBnWYOJTrNZCdh/yJE+t910Y128BoyY+zBLWhL3r0TYzlTmFdXrPwHL9DyFZmlEXNQQolTZh3KHV31QDhyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.2"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz",
+      "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/environment": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
+      "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/err-code": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
+      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz",
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es6-error": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
+      "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/esbuild": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz",
+      "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.27.2",
+        "@esbuild/android-arm": "0.27.2",
+        "@esbuild/android-arm64": "0.27.2",
+        "@esbuild/android-x64": "0.27.2",
+        "@esbuild/darwin-arm64": "0.27.2",
+        "@esbuild/darwin-x64": "0.27.2",
+        "@esbuild/freebsd-arm64": "0.27.2",
+        "@esbuild/freebsd-x64": "0.27.2",
+        "@esbuild/linux-arm": "0.27.2",
+        "@esbuild/linux-arm64": "0.27.2",
+        "@esbuild/linux-ia32": "0.27.2",
+        "@esbuild/linux-loong64": "0.27.2",
+        "@esbuild/linux-mips64el": "0.27.2",
+        "@esbuild/linux-ppc64": "0.27.2",
+        "@esbuild/linux-riscv64": "0.27.2",
+        "@esbuild/linux-s390x": "0.27.2",
+        "@esbuild/linux-x64": "0.27.2",
+        "@esbuild/netbsd-arm64": "0.27.2",
+        "@esbuild/netbsd-x64": "0.27.2",
+        "@esbuild/openbsd-arm64": "0.27.2",
+        "@esbuild/openbsd-x64": "0.27.2",
+        "@esbuild/openharmony-arm64": "0.27.2",
+        "@esbuild/sunos-x64": "0.27.2",
+        "@esbuild/win32-arm64": "0.27.2",
+        "@esbuild/win32-ia32": "0.27.2",
+        "@esbuild/win32-x64": "0.27.2"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
+      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.39.2",
+        "@eslint/plugin-kit": "^0.4.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz",
+      "integrity": "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/eslint/node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/eventsource": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
+      "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==",
+      "license": "MIT",
+      "dependencies": {
+        "eventsource-parser": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/eventsource-parser": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.6.tgz",
+      "integrity": "sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/exponential-backoff": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.3.tgz",
+      "integrity": "sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/express": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "^2.0.0",
+        "body-parser": "^2.2.1",
+        "content-disposition": "^1.0.0",
+        "content-type": "^1.0.5",
+        "cookie": "^0.7.1",
+        "cookie-signature": "^1.2.1",
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "finalhandler": "^2.1.0",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "merge-descriptors": "^2.0.0",
+        "mime-types": "^3.0.0",
+        "on-finished": "^2.4.1",
+        "once": "^1.4.0",
+        "parseurl": "^1.3.3",
+        "proxy-addr": "^2.0.7",
+        "qs": "^6.14.0",
+        "range-parser": "^1.2.1",
+        "router": "^2.2.0",
+        "send": "^1.1.0",
+        "serve-static": "^2.2.0",
+        "statuses": "^2.0.1",
+        "type-is": "^2.0.1",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express-rate-limit": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.5.1.tgz",
+      "integrity": "sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": ">= 4.11"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      },
+      "engines": {
+        "node": ">= 10.17.0"
+      },
+      "optionalDependencies": {
+        "@types/yauzl": "^2.9.1"
+      }
+    },
+    "node_modules/extsprintf": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.4.1.tgz",
+      "integrity": "sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==",
+      "engines": [
+        "node >=0.6.0"
+      ],
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/fast-xml-parser": {
+      "version": "5.3.7",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-5.3.7.tgz",
+      "integrity": "sha512-JzVLro9NQv92pOM/jTCR6mHlJh2FGwtomH8ZQjhFj/R29P2Fnj38OgPJVtcvYw6SuKClhgYuwUZf5b3rd8u2mA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "strnum": "^2.1.2"
+      },
+      "bin": {
+        "fxparser": "src/cli/cli.js"
+      }
+    },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/filelist": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
+      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "on-finished": "^2.4.1",
+        "parseurl": "^1.3.3",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/form-data/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/form-data/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/fs-minipass": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-3.0.3.tgz",
+      "integrity": "sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/geist": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/geist/-/geist-1.5.1.tgz",
+      "integrity": "sha512-mAHZxIsL2o3ZITFaBVFBnwyDOw+zNLYum6A6nIjpzCGIO8QtC3V76XF2RnZTyLx1wlDTmMDy8jg3Ib52MIjGvQ==",
+      "license": "SIL OPEN FONT LICENSE",
+      "peerDependencies": {
+        "next": ">=13.2.0"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-east-asian-width": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz",
+      "integrity": "sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz",
+      "integrity": "sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/global-agent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-agent/-/global-agent-3.0.0.tgz",
+      "integrity": "sha512-PT6XReJ+D07JvGoxQMkT6qji/jVNfX/h364XHZOWeRzy64sSFr+xJ5OX7LI3b4MPQzdL4H8Y8M0xzPpsVMwA8Q==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "boolean": "^3.0.1",
+        "es6-error": "^4.1.1",
+        "matcher": "^3.0.0",
+        "roarr": "^2.15.3",
+        "semver": "^7.3.2",
+        "serialize-error": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=10.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/got": {
+      "version": "11.8.6",
+      "resolved": "https://registry.npmjs.org/got/-/got-11.8.6.tgz",
+      "integrity": "sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/is": "^4.0.0",
+        "@szmarczak/http-timer": "^4.0.5",
+        "@types/cacheable-request": "^6.0.1",
+        "@types/responselike": "^1.0.0",
+        "cacheable-lookup": "^5.0.3",
+        "cacheable-request": "^7.0.2",
+        "decompress-response": "^6.0.0",
+        "http2-wrapper": "^1.0.0-beta.5.2",
+        "lowercase-keys": "^2.0.0",
+        "p-cancelable": "^2.0.0",
+        "responselike": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/got?sponsor=1"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hast-util-from-parse5": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.3.tgz",
+      "integrity": "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "property-information": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-location": "^5.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-raw": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.1.0.tgz",
+      "integrity": "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "hast-util-to-parse5": "^8.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "parse5": "^7.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-sanitize": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/hast-util-sanitize/-/hast-util-sanitize-5.0.2.tgz",
+      "integrity": "sha512-3yTWghByc50aGS7JlGhk61SPenfE/p1oaFeNwkOOyrscaOkMGrcW9+Cy/QAIOBpZxP1yqDIzFMR0+Np0i0+usg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "unist-util-position": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.1.tgz",
+      "integrity": "sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
+    "node_modules/hosted-git-info": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/hosted-git-info/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/hosted-git-info/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/http-cache-semantics": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
+      "integrity": "sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/http2-wrapper": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
+      "integrity": "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "quick-lru": "^5.1.1",
+        "resolve-alpn": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10.19.0"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/humanize-ms": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",
+      "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.0.0"
+      }
+    },
+    "node_modules/husky": {
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+      "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "husky": "bin.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
+    "node_modules/iconv-corefoundation": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/iconv-corefoundation/-/iconv-corefoundation-1.1.7.tgz",
+      "integrity": "sha512-T10qvkw0zz4wnm560lOEg0PovVqUXuOFhhHAkixw8/sycy7TJt7v/RrkEKEQnAw2viPSJu6iAkErxnzR0g8PpQ==",
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "dependencies": {
+        "cli-truncate": "^2.1.0",
+        "node-addon-api": "^1.6.3"
+      },
+      "engines": {
+        "node": "^8.11.2 || >=10"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/idb-keyval": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.2.tgz",
+      "integrity": "sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "devOptional": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/infer-owner": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
+      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "license": "MIT"
+    },
+    "node_modules/ip-address": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
+      "integrity": "sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-ci": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
+      "integrity": "sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ci-info": "^3.2.0"
+      },
+      "bin": {
+        "is-ci": "bin.js"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-interactive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz",
+      "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-lambda": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
+      "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+      "license": "MIT"
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/isbinaryfile": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-5.0.7.tgz",
+      "integrity": "sha512-gnWD14Jh3FzS3CPhF0AxNOJ8CxqeblPTADzI38r0wt8ZyQl5edpy75myt08EG2oKvpyiqSqsx+Wkz9vtkbTqYQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/gjtorikian/"
+      }
+    },
+    "node_modules/isbot": {
+      "version": "5.1.32",
+      "resolved": "https://registry.npmjs.org/isbot/-/isbot-5.1.32.tgz",
+      "integrity": "sha512-VNfjM73zz2IBZmdShMfAUg10prm6t7HFUQmNAEOAVS4YH92ZrZcvkMcGX6cIgBJAzWDzPent/EeAtYEHNPNPBQ==",
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "license": "ISC"
+    },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
+      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
+      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^4.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-5.0.6.tgz",
+      "integrity": "sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.23",
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-reports": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
+      "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jake": {
+      "version": "10.9.4",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
+      "integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "async": "^3.2.6",
+        "filelist": "^1.0.4",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/jose": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.3.tgz",
+      "integrity": "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsdom": {
+      "version": "28.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-28.1.0.tgz",
+      "integrity": "sha512-0+MoQNYyr2rBHqO1xilltfDjV9G7ymYGlAUazgcDLQaUf8JDHbuGwsxN6U9qWaElZ4w1B2r7yEGIL3GdeW3Rug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@acemir/cssom": "^0.9.31",
+        "@asamuzakjp/dom-selector": "^6.8.1",
+        "@bramus/specificity": "^2.4.2",
+        "@exodus/bytes": "^1.11.0",
+        "cssstyle": "^6.0.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "parse5": "^8.0.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.0",
+        "undici": "^7.21.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/parse5": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
+      "integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-typed": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/json-schema-typed/-/json-schema-typed-8.0.2.tgz",
+      "integrity": "sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "license": "MIT",
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/lazy-val": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/lazy-val/-/lazy-val-1.0.5.tgz",
+      "integrity": "sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lint-staged": {
+      "version": "16.2.7",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-16.2.7.tgz",
+      "integrity": "sha512-lDIj4RnYmK7/kXMya+qJsmkRFkGolciXjrsZ6PC25GdTfWOAWetR0ZbsNXRAj1EHHImRSalc+whZFg56F5DVow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^14.0.2",
+        "listr2": "^9.0.5",
+        "micromatch": "^4.0.8",
+        "nano-spawn": "^2.0.0",
+        "pidtree": "^0.6.0",
+        "string-argv": "^0.3.2",
+        "yaml": "^2.8.1"
+      },
+      "bin": {
+        "lint-staged": "bin/lint-staged.js"
+      },
+      "engines": {
+        "node": ">=20.17"
+      },
+      "funding": {
+        "url": "https://opencollective.com/lint-staged"
+      }
+    },
+    "node_modules/lint-staged/node_modules/commander": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.2.tgz",
+      "integrity": "sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/listr2": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-9.0.5.tgz",
+      "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cli-truncate": "^5.0.0",
+        "colorette": "^2.0.20",
+        "eventemitter3": "^5.0.1",
+        "log-update": "^6.1.0",
+        "rfdc": "^1.4.1",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/cli-truncate": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-5.1.1.tgz",
+      "integrity": "sha512-SroPvNHxUnk+vIW/dOSfNqdy1sPEFkrTk6TUtqLCnBlo3N7TNYYkzzN7uSD6+jVjrdO4+p8nH7JzH6cIvUem6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "slice-ansi": "^7.1.0",
+        "string-width": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/listr2/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/listr2/node_modules/is-fullwidth-code-point": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz",
+      "integrity": "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/listr2/node_modules/slice-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz",
+      "integrity": "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/string-width": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.1.0.tgz",
+      "integrity": "sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.3.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/listr2/node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
+      "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-escapes": "^7.0.0",
+        "cli-cursor": "^5.0.0",
+        "slice-ansi": "^7.1.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/cli-cursor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+      "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/log-update/node_modules/is-fullwidth-code-point": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz",
+      "integrity": "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/onetime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-function": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/restore-cursor": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/log-update/node_modules/slice-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz",
+      "integrity": "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/loupe": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
+      "integrity": "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lowercase-keys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+      "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.562.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
+      "integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/magicast": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.1.tgz",
+      "integrity": "sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@babel/types": "^7.28.5",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-fetch-happen": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-14.0.3.tgz",
+      "integrity": "sha512-QMjGbFTP0blj97EeidG5hk/QhKQ3T4ICckQGLgz38QF7Vgbk6e6FTARN8KhKxyBbWn8R0HU+bnw8aSoFPD4qtQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/agent": "^3.0.0",
+        "cacache": "^19.0.1",
+        "http-cache-semantics": "^4.1.1",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^4.0.0",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "negotiator": "^1.0.0",
+        "proc-log": "^5.0.0",
+        "promise-retry": "^2.0.1",
+        "ssri": "^12.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/matcher": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
+      "integrity": "sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "escape-string-regexp": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz",
+      "integrity": "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+      "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/media-typer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/micromark": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+      "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+      "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+      "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+      "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+      "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+      "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+      "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+      "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+      "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+      "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+      "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+      "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+      "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+      "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+      "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
+      "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minipass-collect": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-2.0.1.tgz",
+      "integrity": "sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minipass-fetch": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-4.0.1.tgz",
+      "integrity": "sha512-j7U11C5HXigVuutxebFadoYBbd7VSdZWggSe64NVdvWNBqGAiXPL2QVCehjmw7lY1oF9gOllYbORh+hiNgfPgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.3",
+        "minipass-sized": "^1.0.3",
+        "minizlib": "^3.0.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      },
+      "optionalDependencies": {
+        "encoding": "^0.1.13"
+      }
+    },
+    "node_modules/minipass-flush": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
+      "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minipass-flush/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-flush/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/minipass-pipeline": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-pipeline/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-pipeline/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/minipass-sized": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-1.0.3.tgz",
+      "integrity": "sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-sized/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-sized/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/minizlib": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/morgan": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.1.tgz",
+      "integrity": "sha512-223dMRJtI/l25dJKWpgij2cMtywuG/WiUKXdvwfbhGKBhy1puASqXwFzmWZ7+K73vUPoR7SS2Qz2cI/g9MKw0A==",
+      "license": "MIT",
+      "dependencies": {
+        "basic-auth": "~2.0.1",
+        "debug": "2.6.9",
+        "depd": "~2.0.0",
+        "on-finished": "~2.3.0",
+        "on-headers": "~1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/morgan/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/morgan/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
+    "node_modules/morgan/node_modules/on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/nano-spawn": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/nano-spawn/-/nano-spawn-2.0.0.tgz",
+      "integrity": "sha512-tacvGzUY5o2D8CBh2rrwxyNojUsZNU2zjNTzKQrkgGJQTbGAfArVWXSKMBokBeeg6C7OLRGUEyoFlYbfeWQIqw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/nano-spawn?sponsor=1"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/node-abi": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-4.24.0.tgz",
+      "integrity": "sha512-u2EC1CeNe25uVtX3EZbdQ275c74zdZmmpzrHEQh2aIYqoVjlglfUpOX9YY85x1nlBydEKDVaSmMNhR7N82Qj8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.6.3"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-1.7.2.tgz",
+      "integrity": "sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/node-api-version": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/node-api-version/-/node-api-version-0.2.1.tgz",
+      "integrity": "sha512-2xP/IGGMmmSQpI1+O/k72jF/ykvZ89JeuKX3TLJAYPDVLUalrshrLHkeVcCCZqG/eEa635cr8IBYzgnDvM2O8Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.3.5"
+      }
+    },
+    "node_modules/node-gyp": {
+      "version": "11.5.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-11.5.0.tgz",
+      "integrity": "sha512-ra7Kvlhxn5V9Slyus0ygMa2h+UqExPqUIkfk7Pc8QTLT956JLSy51uWFwHtIYy0vI8cB4BDhc/S03+880My/LQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.0",
+        "exponential-backoff": "^3.1.1",
+        "graceful-fs": "^4.2.6",
+        "make-fetch-happen": "^14.0.3",
+        "nopt": "^8.0.0",
+        "proc-log": "^5.0.0",
+        "semver": "^7.3.5",
+        "tar": "^7.4.3",
+        "tinyglobby": "^0.2.12",
+        "which": "^5.0.0"
+      },
+      "bin": {
+        "node-gyp": "bin/node-gyp.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/node-gyp/node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/node-gyp/node_modules/isexe": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+      "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/node-gyp/node_modules/tar": {
+      "version": "7.5.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.2.tgz",
+      "integrity": "sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/node-gyp/node_modules/which": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-5.0.0.tgz",
+      "integrity": "sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/node-gyp/node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/node-pty": {
+      "version": "1.1.0-beta41",
+      "resolved": "https://registry.npmjs.org/node-pty/-/node-pty-1.1.0-beta41.tgz",
+      "integrity": "sha512-OUT29KMnzh1IS0b2YcUwVz56D4iAXDsl2PtIKP3zHMljiUBq2WcaHEFfhzQfgkhWs2SExcXvfdlBPANDVU9SnQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "node-addon-api": "^7.1.0"
+      }
+    },
+    "node_modules/node-pty/node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nopt": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-8.1.0.tgz",
+      "integrity": "sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^3.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-url": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/obug": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT"
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/on-headers": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.1.0.tgz",
+      "integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/ora": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
+      "integrity": "sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-cancelable": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
+      "integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-map": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.4.tgz",
+      "integrity": "sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/path-to-regexp": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/pathval": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.1.tgz",
+      "integrity": "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
+    "node_modules/pe-library": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/pe-library/-/pe-library-0.4.1.tgz",
+      "integrity": "sha512-eRWB5LBz7PpDu4PUlwT0PhnQfTQJlDDdPa35urV4Osrm0t0AqQFGn+UIkU3klZvwJ8KPO3VbBFsXquA6p6kqZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/jet2jet"
+      }
+    },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pidtree": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.6.0.tgz",
+      "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "pidtree": "bin/pidtree.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/pkce-challenge": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.1.tgz",
+      "integrity": "sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0.tgz",
+      "integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.57.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.57.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.57.0.tgz",
+      "integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/plist": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
+      "integrity": "sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@xmldom/xmldom": "^0.8.8",
+        "base64-js": "^1.5.1",
+        "xmlbuilder": "^15.1.1"
+      },
+      "engines": {
+        "node": ">=10.4.0"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.7.4.tgz",
+      "integrity": "sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/proc-log": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-5.0.0.tgz",
+      "integrity": "sha512-Azwzvl90HaF0aCz1JrDdXQykFakSSNPaPoiZ9fm5qJIMHioDZEi7OAdRwSm6rSoPtY3Qutnm3L7ogmg3dc+wbQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/promise-inflight": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
+      "integrity": "sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/promise-retry": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
+      "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "err-code": "^2.0.2",
+        "retry": "^0.12.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/pump": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
+      "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
+      "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/raw-body/node_modules/iconv-lite": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.1.tgz",
+      "integrity": "sha512-2Tth85cXwGFHfvRgZWszZSvdo+0Xsqmw8k8ZwxScfcBneNUraK+dxRxRm24nszx80Y0TVio8kKLt5sLE7ZCLlw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
+      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.3"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/react-markdown": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
+      "integrity": "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
+      "integrity": "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/read-binary-file-arch": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/read-binary-file-arch/-/read-binary-file-arch-1.0.6.tgz",
+      "integrity": "sha512-BNg9EN3DD3GsDXX7Aa8O4p92sryjkmzYYgmgTAc6CA4uGLEDzFfxOxugu21akOxpcXHiEgsYkC6nPsQvLLLmEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "bin": {
+        "read-binary-file-arch": "cli.js"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/recast": {
+      "version": "0.23.11",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
+      "integrity": "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ast-types": "^0.16.1",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tiny-invariant": "^1.3.3",
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/recast/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/rehype-raw": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-raw": "^9.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-sanitize": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-sanitize/-/rehype-sanitize-6.0.0.tgz",
+      "integrity": "sha512-CsnhKNsyI8Tub6L4sm5ZFsme4puGfc6pYylvXo1AeqaGbjOYyzNv3qZPwvs0oMJ39eryyeOdmxwUIo94IpEhqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-sanitize": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resedit": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/resedit/-/resedit-1.7.2.tgz",
+      "integrity": "sha512-vHjcY2MlAITJhC0eRD/Vv8Vlgmu9Sd3LX9zZvtGzU5ZImdTN3+d6e/4mnTyV8vEbyf1sgNIrWxhWlrys52OkEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pe-library": "^0.4.1"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/jet2jet"
+      }
+    },
+    "node_modules/resolve-alpn": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
+      "integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/responselike": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
+      "integrity": "sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lowercase-keys": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/roarr": {
+      "version": "2.15.4",
+      "resolved": "https://registry.npmjs.org/roarr/-/roarr-2.15.4.tgz",
+      "integrity": "sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "dependencies": {
+        "boolean": "^3.0.1",
+        "detect-node": "^2.0.4",
+        "globalthis": "^1.0.1",
+        "json-stringify-safe": "^5.0.1",
+        "semver-compare": "^1.0.0",
+        "sprintf-js": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.53.5",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.5.tgz",
+      "integrity": "sha512-iTNAbFSlRpcHeeWu73ywU/8KuU/LZmNCSxp6fjQkJBD3ivUb8tpDrXhIxEzA05HlYMEwmtaUnb3RP+YNv162OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.53.5",
+        "@rollup/rollup-android-arm64": "4.53.5",
+        "@rollup/rollup-darwin-arm64": "4.53.5",
+        "@rollup/rollup-darwin-x64": "4.53.5",
+        "@rollup/rollup-freebsd-arm64": "4.53.5",
+        "@rollup/rollup-freebsd-x64": "4.53.5",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.53.5",
+        "@rollup/rollup-linux-arm-musleabihf": "4.53.5",
+        "@rollup/rollup-linux-arm64-gnu": "4.53.5",
+        "@rollup/rollup-linux-arm64-musl": "4.53.5",
+        "@rollup/rollup-linux-loong64-gnu": "4.53.5",
+        "@rollup/rollup-linux-ppc64-gnu": "4.53.5",
+        "@rollup/rollup-linux-riscv64-gnu": "4.53.5",
+        "@rollup/rollup-linux-riscv64-musl": "4.53.5",
+        "@rollup/rollup-linux-s390x-gnu": "4.53.5",
+        "@rollup/rollup-linux-x64-gnu": "4.53.5",
+        "@rollup/rollup-linux-x64-musl": "4.53.5",
+        "@rollup/rollup-openharmony-arm64": "4.53.5",
+        "@rollup/rollup-win32-arm64-msvc": "4.53.5",
+        "@rollup/rollup-win32-ia32-msvc": "4.53.5",
+        "@rollup/rollup-win32-x64-gnu": "4.53.5",
+        "@rollup/rollup-win32-x64-msvc": "4.53.5",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/router": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/sanitize-filename": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/sanitize-filename/-/sanitize-filename-1.6.3.tgz",
+      "integrity": "sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==",
+      "dev": true,
+      "license": "WTFPL OR ISC",
+      "dependencies": {
+        "truncate-utf8-bytes": "^1.0.0"
+      }
+    },
+    "node_modules/sax": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.3.tgz",
+      "integrity": "sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/serialize-error": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-7.0.1.tgz",
+      "integrity": "sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "type-fest": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/seroval": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/seroval/-/seroval-1.5.0.tgz",
+      "integrity": "sha512-OE4cvmJ1uSPrKorFIH9/w/Qwuvi/IMcGbv5RKgcJ/zjA/IohDLU6SVaxFN9FwajbP7nsX0dQqMDes1whk3y+yw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/seroval-plugins": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/seroval-plugins/-/seroval-plugins-1.4.0.tgz",
+      "integrity": "sha512-zir1aWzoiax6pbBVjoYVd0O1QQXgIL3eVGBMsBsNmM8Ukq90yGaWlfx0AB9dTS8GPqrOrbXn79vmItCUP9U3BQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "seroval": "^1.0"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/simple-update-notifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
+      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sirv": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
+      "integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/slice-ansi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
+      "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.7.tgz",
+      "integrity": "sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "^10.0.1",
+        "smart-buffer": "^4.2.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks-proxy-agent": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.5.tgz",
+      "integrity": "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/sonner": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+      "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
+      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true
+    },
+    "node_modules/ssri": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-12.0.0.tgz",
+      "integrity": "sha512-S7iGNosepx9RadX82oimUkvr0Ct7IjJbEbs4mJcTxst8um95J3sDYU1RBEOvdu6oL1Wek2ODI5i4MAw+dZ6cAQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stat-mode": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stat-mode/-/stat-mode-1.0.0.tgz",
+      "integrity": "sha512-jH9EhtKIjuXZ2cWxmXS8ZP80XyC3iasQxMDV8jzhNJpfDb7VbQLVW4Wvsxz9QZvzV+G4YoSfBUVKDOyxLzi/sg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/std-env": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
+      "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strip-literal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.1.0.tgz",
+      "integrity": "sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^9.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/strip-literal/node_modules/js-tokens": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/strnum": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.1.2.tgz",
+      "integrity": "sha512-l63NF9y/cLROq/yqKXSLtcMeeyOfnSQlfMSlzFt/K73oIaD8DGaQWd7Z34X9GPiKqP5rbSh84Hl4bOlLcjiSrQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/style-mod": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
+      "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
+      "license": "MIT"
+    },
+    "node_modules/style-to-js": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+      "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.14"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.7"
+      }
+    },
+    "node_modules/sumchecker": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz",
+      "integrity": "sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "debug": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 8.0"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
+      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/tar": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tar/node_modules/fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/tar/node_modules/fs-minipass/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tar/node_modules/minipass": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tar/node_modules/minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/tar/node_modules/minizlib/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/temp-file": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/temp-file/-/temp-file-3.4.0.tgz",
+      "integrity": "sha512-C5tjlC/HCtVUOi3KWVokd4vHVViOmGjtLwIh4MuzPo/nMYTV/p1urt3RnMz2IWXDdKEGJH3k5+KPxtqRsUYGtg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-exit-hook": "^2.0.1",
+        "fs-extra": "^10.0.0"
+      }
+    },
+    "node_modules/temp-file/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/temp-file/node_modules/jsonfile": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+      "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/temp-file/node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/tiny-async-pool": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tiny-async-pool/-/tiny-async-pool-1.3.0.tgz",
+      "integrity": "sha512-01EAw5EDrcVrdgyCLgoSPvqznC0sVxDSVeiOz09FUpjh71G79VCqneOr+xvt7T1r76CF6ZZfPjHorN2+d+3mqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^5.5.0"
+      }
+    },
+    "node_modules/tiny-async-pool/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "license": "MIT"
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.2.tgz",
+      "integrity": "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/tinypool": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz",
+      "integrity": "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.0.3.tgz",
+      "integrity": "sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.4.tgz",
+      "integrity": "sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.23.tgz",
+      "integrity": "sha512-ASdhgQIBSay0R/eXggAkQ53G4nTJqTXqC2kbaBbdDwM7SkjyZyO0OaaN1/FH7U/yCeqOHDwFO5j8+Os/IS1dXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^7.0.23"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.23.tgz",
+      "integrity": "sha512-0g9vrtDQLrNIiCj22HSe9d4mLVG3g5ph5DZ8zCKBr4OtrspmNB6ss7hVyzArAeE88ceZocIEGkyW1Ime7fxPtQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tmp": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
+      "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/tmp-promise": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/tmp-promise/-/tmp-promise-3.0.3.tgz",
+      "integrity": "sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tmp": "^0.2.0"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tough-cookie": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.0.tgz",
+      "integrity": "sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/truncate-utf8-bytes": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
+      "integrity": "sha512-95Pu1QXQvruGEhv62XCMO3Mm90GscOCClvrIUwCM0PYOXK3kaF3l3sIHxx71ThJfcbM2O5Au6SO3AWCSEfW4mQ==",
+      "dev": true,
+      "license": "WTFPL",
+      "dependencies": {
+        "utf8-byte-length": "^1.0.1"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/tsx": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz",
+      "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "~0.27.0",
+        "get-tsconfig": "^4.7.5"
+      },
+      "bin": {
+        "tsx": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      }
+    },
+    "node_modules/tw-animate-css": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
+      "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Wombosvideo"
+      }
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
+      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^1.0.5",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici": {
+      "version": "7.22.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.22.0.tgz",
+      "integrity": "sha512-RqslV2Us5BrllB+JeiZnK4peryVTndy9Dnqq62S3yYRRTj0tFQCwEniUy2167skdGOy3vqRzEvl1Dm4sV2ReDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unique-filename": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-4.0.0.tgz",
+      "integrity": "sha512-XSnEewXmQ+veP7xX2dS5Q4yZAvO40cBN2MWkJ7D/6sW4Dg6wYBNwM1Vrnz1FhH5AdeLIlUXRI9e28z1YZi71NQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "unique-slug": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/unique-slug": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-5.0.0.tgz",
+      "integrity": "sha512-9OdaqO5kwqR+1kVgHAhsp5vPNU0hnxRa26rBFNfNgM7M6pNtgzeBn3s/xbyCQL3dcjzOatcef6UUHpB/6MaETg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4"
+      },
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/unplugin": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.11.tgz",
+      "integrity": "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "acorn": "^8.15.0",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unplugin/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "devOptional": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/usehooks-ts": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.1.tgz",
+      "integrity": "sha512-I4diPp9Cq6ieSUH2wu+fDAVQO43xwtulo+fKEidHUwZPnYImbtkTjzIJYcDcJqxgmX31GVqNFURodvcgHcW0pA==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/utf8-byte-length": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.5.tgz",
+      "integrity": "sha512-Xn0w3MtiQ6zoz2vFyUVruaCL53O/DwUvkEeOvj+uulMm0BkUGYWmBYVyElqZaSLhY6ZD0ulfU3aBra2aVT4xfA==",
+      "dev": true,
+      "license": "(WTFPL OR MIT)"
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/verror": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.1.tgz",
+      "integrity": "sha512-veufcmxri4e3XSrT0xwfUR7kguIkaxBeosDg00yDWhk49wdwkSUrvvsm7nc75e1PUyvIeZj6nS8VQRYz2/S4Xg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "assert-plus": "^1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-location": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vite": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
+      "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.27.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-node": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.4.tgz",
+      "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.4.1",
+        "es-module-lexer": "^1.7.0",
+        "pathe": "^2.0.3",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/vite-plugin-electron": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-electron/-/vite-plugin-electron-0.29.0.tgz",
+      "integrity": "sha512-HP0DI9Shg41hzt55IKYVnbrChWXHX95QtsEQfM+szQBpWjVhVGMlqRjVco6ebfQjWNr+Ga+PeoBjMIl8zMaufw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "vite-plugin-electron-renderer": "*"
+      },
+      "peerDependenciesMeta": {
+        "vite-plugin-electron-renderer": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-electron-renderer": {
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vite-plugin-electron-renderer/-/vite-plugin-electron-renderer-0.14.6.tgz",
+      "integrity": "sha512-oqkWFa7kQIkvHXG7+Mnl1RTroA4sP0yesKatmAy0gjZC4VwUqlvF9IvOpHd1fpLWsqYX/eZlVxlhULNtaQ78Jw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vite/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/vite/node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/vitest": {
+      "version": "4.0.16",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.16.tgz",
+      "integrity": "sha512-E4t7DJ9pESL6E3I8nFjPa4xGUd3PmiWDLsDztS2qXSJWfHtbQnwAWylaBvSNY48I3vr8PTqIZlyK8TE3V3CA4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.0.16",
+        "@vitest/mocker": "4.0.16",
+        "@vitest/pretty-format": "4.0.16",
+        "@vitest/runner": "4.0.16",
+        "@vitest/snapshot": "4.0.16",
+        "@vitest/spy": "4.0.16",
+        "@vitest/utils": "4.0.16",
+        "es-module-lexer": "^1.7.0",
+        "expect-type": "^1.2.2",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^3.10.0",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.0.3",
+        "vite": "^6.0.0 || ^7.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.0.16",
+        "@vitest/browser-preview": "4.0.16",
+        "@vitest/browser-webdriverio": "4.0.16",
+        "@vitest/ui": "4.0.16",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/vscode-jsonrpc": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.1.tgz",
+      "integrity": "sha512-kdjOSJ2lLIn7r1rtrMbbNCHjyMPfRnowdKjBQ+mGq6NAW5QY2bEZC/khaC5OR8svbbjvLEaIXkOq45e2X9BIbQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "defaults": "^1.0.3"
+      }
+    },
+    "node_modules/web-namespaces": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlbuilder": {
+      "version": "15.1.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-15.1.1.tgz",
+      "integrity": "sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-to-json-schema": {
+      "version": "3.25.1",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.25.1.tgz",
+      "integrity": "sha512-pM/SU9d3YAggzi6MtR4h7ruuQlqKtad8e9S0fmxcMi+ueAK5Korys/aWcV9LIIHTVbj01NdzxcnXSN+O74ZIVA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "zod": "^3.25 || ^4"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.9.tgz",
+      "integrity": "sha512-ALBtUj0AfjJt3uNRQoL1tL2tMvj6Gp/6e39dnfT6uzpelGru8v1tPOGBzayOWbPJvujM8JojDk3E1LxeFisBNg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    }
+  }
+}
diff --git a/temp_repo/package.json b/temp_repo/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..cfd014e52285a7d5703bb2acc66f2beb5397d862
--- /dev/null
+++ b/temp_repo/package.json
@@ -0,0 +1,82 @@
+{
+  "name": "automaker",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true,
+  "engines": {
+    "node": ">=22.0.0 <23.0.0"
+  },
+  "workspaces": [
+    "apps/*",
+    "libs/*"
+  ],
+  "scripts": {
+    "postinstall": "node -e \"const fs=require('fs');if(process.platform==='darwin'){['darwin-arm64','darwin-x64'].forEach(a=>{const p='node_modules/node-pty/prebuilds/'+a+'/spawn-helper';if(fs.existsSync(p))fs.chmodSync(p,0o755)})}\" && node scripts/fix-lockfile-urls.mjs",
+    "fix:lockfile": "node scripts/fix-lockfile-urls.mjs",
+    "dev": "node start-automaker.mjs",
+    "start": "node start-automaker.mjs --production",
+    "_dev:web": "npm run dev:web --workspace=apps/ui",
+    "_dev:electron": "npm run dev:electron --workspace=apps/ui",
+    "_dev:electron:debug": "npm run dev:electron:debug --workspace=apps/ui",
+    "_dev:electron:wsl": "npm run dev:electron:wsl --workspace=apps/ui",
+    "_dev:electron:wsl:gpu": "npm run dev:electron:wsl:gpu --workspace=apps/ui",
+    "_dev:server": "npm run dev --workspace=apps/server",
+    "dev:web": "npm run build:packages && npm run _dev:web",
+    "dev:electron": "npm run build:packages && npm run _dev:electron",
+    "dev:electron:debug": "npm run build:packages && npm run _dev:electron:debug",
+    "dev:electron:wsl": "npm run build:packages && npm run _dev:electron:wsl",
+    "dev:electron:wsl:gpu": "npm run build:packages && npm run _dev:electron:wsl:gpu",
+    "dev:server": "npm run build:packages && npm run _dev:server",
+    "dev:docker": "docker compose up",
+    "dev:docker:rebuild": "docker compose build --no-cache && docker compose up",
+    "dev:full": "npm run build:packages && concurrently \"npm run _dev:server\" \"npm run _dev:web\"",
+    "build": "npm run build:packages && npm run build --workspace=apps/ui",
+    "build:packages": "npm run build -w @automaker/types && npm run build -w @automaker/platform && npm run build -w @automaker/utils -w @automaker/spec-parser && npm run build -w @automaker/prompts -w @automaker/model-resolver -w @automaker/dependency-resolver && npm run build -w @automaker/git-utils",
+    "build:server": "npm run build:packages && npm run build --workspace=apps/server",
+    "build:electron": "npm run build:packages && npm run build:electron --workspace=apps/ui",
+    "build:electron:dir": "npm run build:packages && npm run build:electron:dir --workspace=apps/ui",
+    "build:electron:win": "npm run build:packages && npm run build:electron:win --workspace=apps/ui",
+    "build:electron:win:dir": "npm run build:packages && npm run build:electron:win:dir --workspace=apps/ui",
+    "build:electron:mac": "npm run build:packages && npm run build:electron:mac --workspace=apps/ui",
+    "build:electron:mac:dir": "npm run build:packages && npm run build:electron:mac:dir --workspace=apps/ui",
+    "build:electron:linux": "npm run build:packages && npm run build:electron:linux --workspace=apps/ui",
+    "build:electron:linux:dir": "npm run build:packages && npm run build:electron:linux:dir --workspace=apps/ui",
+    "lint": "npm run lint --workspace=apps/ui",
+    "lint:errors": "npm run lint --workspace=apps/ui -- --quiet",
+    "lint:server:errors": "npm run lint --workspace=apps/server -- --quiet",
+    "typecheck": "npm run typecheck --workspace=apps/ui",
+    "test": "npm run test --workspace=apps/ui",
+    "test:headed": "npm run test:headed --workspace=apps/ui",
+    "test:ui": "npm run test --workspace=apps/ui -- --ui",
+    "test:packages": "vitest run --project='!server'",
+    "test:server": "vitest run --project=server",
+    "test:server:coverage": "vitest run --project=server --coverage",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
+    "test:all": "vitest run",
+    "lint:lockfile": "node scripts/lint-lockfile.mjs",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "rebuild": "rm -rf node_modules apps/*/node_modules libs/*/node_modules && npm install",
+    "prepare": "husky && npm run build:packages"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,json,css,md,html,yml,yaml}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "cross-spawn": "7.0.6",
+    "rehype-sanitize": "6.0.0",
+    "tree-kill": "1.2.2"
+  },
+  "devDependencies": {
+    "husky": "9.1.7",
+    "lint-staged": "^16.2.7",
+    "prettier": "3.7.4",
+    "vitest": "4.0.16"
+  },
+  "optionalDependencies": {
+    "dmg-license": "^1.0.11"
+  }
+}
diff --git a/temp_repo/scripts/fix-lockfile-urls.mjs b/temp_repo/scripts/fix-lockfile-urls.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..7b854f498e139c7f7803d602decd49a49a6205a0
--- /dev/null
+++ b/temp_repo/scripts/fix-lockfile-urls.mjs
@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+
+/**
+ * Script to convert git+ssh:// URLs to git+https:// URLs in package-lock.json
+ * This ensures compatibility with CI/CD environments that don't support SSH.
+ */
+
+import { readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+
+const lockfilePath = join(process.cwd(), 'package-lock.json');
+
+try {
+  let content = readFileSync(lockfilePath, 'utf8');
+  const originalContent = content;
+
+  // Convert git+ssh://git@github.com/ to git+https://github.com/
+  content = content.replace(/git\+ssh:\/\/git@github\.com\//g, 'git+https://github.com/');
+
+  // Also handle other potential git+ssh patterns (e.g., git+ssh://git@gitlab.com/)
+  content = content.replace(/git\+ssh:\/\/git@([^/]+)\//g, 'git+https://$1/');
+
+  if (content !== originalContent) {
+    writeFileSync(lockfilePath, content, 'utf8');
+    console.log('✓ Fixed git+ssh:// URLs in package-lock.json');
+    process.exit(0);
+  } else {
+    console.log('✓ No git+ssh:// URLs found in package-lock.json');
+    process.exit(0);
+  }
+} catch (error) {
+  console.error('Error fixing package-lock.json:', error.message);
+  process.exit(1);
+}
diff --git a/temp_repo/scripts/get-claude-token.sh b/temp_repo/scripts/get-claude-token.sh
new file mode 100644
index 0000000000000000000000000000000000000000..1ebdd0cd1bb658da36a7edbb0d64f69af5697285
--- /dev/null
+++ b/temp_repo/scripts/get-claude-token.sh
@@ -0,0 +1,34 @@
+#!/bin/bash
+# Extract Claude OAuth token from macOS Keychain for use in Docker container
+# Usage: ./scripts/get-claude-token.sh
+#        or: export CLAUDE_OAUTH_TOKEN=$(./scripts/get-claude-token.sh)
+
+set -e
+
+# Only works on macOS (uses security command for Keychain access)
+if [[ "$OSTYPE" != "darwin"* ]]; then
+    echo "Error: This script only works on macOS." >&2
+    echo "On Linux, mount ~/.claude directory directly instead." >&2
+    exit 1
+fi
+
+# Check if security command exists
+if ! command -v security &> /dev/null; then
+    echo "Error: 'security' command not found." >&2
+    exit 1
+fi
+
+# Get the current username
+USERNAME=$(whoami)
+
+# Extract credentials from Keychain
+CREDS=$(security find-generic-password -s "Claude Code-credentials" -a "$USERNAME" -w 2>/dev/null)
+
+if [ -z "$CREDS" ]; then
+    echo "Error: No Claude credentials found in Keychain." >&2
+    echo "Make sure you've logged in with 'claude login' first." >&2
+    exit 1
+fi
+
+# Output the full credentials JSON (contains accessToken and refreshToken)
+echo "$CREDS"
diff --git a/temp_repo/scripts/get-cursor-token.sh b/temp_repo/scripts/get-cursor-token.sh
new file mode 100644
index 0000000000000000000000000000000000000000..912cce6bf9849974dd06d67aeb572acdbc4a0327
--- /dev/null
+++ b/temp_repo/scripts/get-cursor-token.sh
@@ -0,0 +1,69 @@
+#!/bin/bash
+# Extract Cursor CLI OAuth token from host machine for use in Docker container
+#
+# IMPORTANT: This extracts the cursor-agent CLI OAuth token, NOT the Cursor IDE token.
+# cursor-agent stores tokens in macOS Keychain (not SQLite like the IDE).
+#
+# Usage: ./scripts/get-cursor-token.sh
+#        or: export CURSOR_AUTH_TOKEN=$(./scripts/get-cursor-token.sh)
+#
+# For Docker: echo "CURSOR_AUTH_TOKEN=$(./scripts/get-cursor-token.sh)" >> .env
+
+set -e
+
+# Determine platform and extract token accordingly
+if [[ "$OSTYPE" == "darwin"* ]]; then
+    # macOS: cursor-agent stores OAuth tokens in Keychain
+    # Service: cursor-access-token, Account: cursor-user
+
+    if ! command -v security &> /dev/null; then
+        echo "Error: 'security' command not found." >&2
+        exit 1
+    fi
+
+    # Extract access token from Keychain
+    TOKEN=$(security find-generic-password -a "cursor-user" -s "cursor-access-token" -w 2>/dev/null)
+
+    if [ -z "$TOKEN" ]; then
+        echo "Error: No Cursor CLI token found in Keychain." >&2
+        echo "Make sure you've logged in with 'cursor-agent login' first." >&2
+        exit 1
+    fi
+
+elif [[ "$OSTYPE" == "linux-gnu"* ]]; then
+    # Linux: cursor-agent stores OAuth tokens in a JSON file
+    # Default location: ~/.config/cursor/auth.json
+    # Or: $XDG_CONFIG_HOME/cursor/auth.json
+
+    if [ -n "$XDG_CONFIG_HOME" ]; then
+        AUTH_FILE="$XDG_CONFIG_HOME/cursor/auth.json"
+    else
+        AUTH_FILE="$HOME/.config/cursor/auth.json"
+    fi
+
+    if [ ! -f "$AUTH_FILE" ]; then
+        echo "Error: Cursor auth file not found at: $AUTH_FILE" >&2
+        echo "Make sure you've logged in with 'cursor-agent login' first." >&2
+        exit 1
+    fi
+
+    # Check if jq is available
+    if ! command -v jq &> /dev/null; then
+        echo "Error: jq is required but not installed." >&2
+        echo "Install it with: apt install jq" >&2
+        exit 1
+    fi
+
+    TOKEN=$(jq -r '.accessToken // empty' "$AUTH_FILE" 2>/dev/null)
+
+    if [ -z "$TOKEN" ]; then
+        echo "Error: No access token found in $AUTH_FILE" >&2
+        exit 1
+    fi
+else
+    echo "Error: Unsupported platform: $OSTYPE" >&2
+    exit 1
+fi
+
+# Output the token
+echo "$TOKEN"
diff --git a/temp_repo/scripts/lint-lockfile.mjs b/temp_repo/scripts/lint-lockfile.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..d658905bb22858f16d68275720cd225645339e31
--- /dev/null
+++ b/temp_repo/scripts/lint-lockfile.mjs
@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+
+/**
+ * Script to check for git+ssh:// URLs in package-lock.json
+ * This ensures compatibility with CI/CD environments that don't support SSH.
+ */
+
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+const lockfilePath = join(process.cwd(), 'package-lock.json');
+
+try {
+  const content = readFileSync(lockfilePath, 'utf8');
+
+  // Check for git+ssh:// URLs
+  if (content.includes('git+ssh://')) {
+    console.error('Error: package-lock.json contains git+ssh:// URLs.');
+    console.error('Run: git config --global url."https://github.com/".insteadOf "git@github.com:"');
+    console.error('Or run: npm run fix:lockfile');
+    process.exit(1);
+  }
+
+  console.log('✓ No git+ssh:// URLs found in package-lock.json');
+  process.exit(0);
+} catch (error) {
+  if (error.code === 'ENOENT') {
+    console.error('Error: package-lock.json not found');
+    process.exit(1);
+  }
+  console.error('Error checking package-lock.json:', error.message);
+  process.exit(1);
+}
diff --git a/temp_repo/start-automaker.mjs b/temp_repo/start-automaker.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..97362312e5950f03489b6f0b6e8c9ab31e3869a0
--- /dev/null
+++ b/temp_repo/start-automaker.mjs
@@ -0,0 +1,201 @@
+#!/usr/bin/env node
+/**
+ * Cross-platform launcher for Automaker
+ * Works on Windows (CMD, PowerShell, Git Bash) and Unix (macOS, Linux)
+ */
+
+import { spawn, spawnSync } from 'child_process';
+import { existsSync } from 'fs';
+import { platform } from 'os';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const isWindows = platform() === 'win32';
+const args = process.argv.slice(2);
+
+/**
+ * Detect the bash variant by checking $OSTYPE
+ * This is more reliable than path-based detection since bash.exe in PATH
+ * could be Git Bash, WSL, or something else
+ * @param {string} bashPath - Path to bash executable
+ * @returns {'WSL' | 'MSYS' | 'CYGWIN' | 'UNKNOWN'} The detected bash variant
+ */
+function detectBashVariant(bashPath) {
+  try {
+    const result = spawnSync(bashPath, ['-c', 'echo $OSTYPE'], {
+      stdio: 'pipe',
+      timeout: 2000,
+    });
+    if (result.status === 0) {
+      const ostype = result.stdout.toString().trim();
+      // WSL reports 'linux-gnu' or similar Linux identifier
+      if (ostype === 'linux-gnu' || ostype.startsWith('linux')) return 'WSL';
+      // MSYS2/Git Bash reports 'msys' or 'mingw*'
+      if (ostype.startsWith('msys') || ostype.startsWith('mingw')) return 'MSYS';
+      // Cygwin reports 'cygwin'
+      if (ostype.startsWith('cygwin')) return 'CYGWIN';
+    }
+  } catch {
+    // Fall through to path-based detection
+  }
+  // Fallback to path-based detection if $OSTYPE check fails
+  const lower = bashPath.toLowerCase();
+  if (lower.includes('cygwin')) return 'CYGWIN';
+  if (lower.includes('system32')) return 'WSL';
+  // Default to MSYS (Git Bash) as it's the most common
+  return 'MSYS';
+}
+
+/**
+ * Convert Windows path to Unix-style for the detected bash variant
+ * @param {string} windowsPath - Windows-style path (e.g., C:\path\to\file)
+ * @param {string} bashCmd - Path to bash executable (used to detect variant)
+ * @returns {string} Unix-style path appropriate for the bash variant
+ */
+function convertPathForBash(windowsPath, bashCmd) {
+  // Input validation
+  if (!windowsPath || typeof windowsPath !== 'string') {
+    throw new Error('convertPathForBash: invalid windowsPath');
+  }
+  if (!bashCmd || typeof bashCmd !== 'string') {
+    throw new Error('convertPathForBash: invalid bashCmd');
+  }
+
+  let unixPath = windowsPath.replace(/\\/g, '/');
+  if (/^[A-Za-z]:/.test(unixPath)) {
+    const drive = unixPath[0].toLowerCase();
+    const pathPart = unixPath.slice(2);
+
+    // Detect bash variant via $OSTYPE (more reliable than path-based)
+    const variant = detectBashVariant(bashCmd);
+    switch (variant) {
+      case 'CYGWIN':
+        // Cygwin expects /cygdrive/c/path format
+        return `/cygdrive/${drive}${pathPart}`;
+      case 'WSL':
+        // WSL expects /mnt/c/path format
+        return `/mnt/${drive}${pathPart}`;
+      case 'MSYS':
+      default:
+        // MSYS2/Git Bash expects /c/path format
+        return `/${drive}${pathPart}`;
+    }
+  }
+  return unixPath;
+}
+
+/**
+ * Find bash executable on Windows
+ */
+function findBashOnWindows() {
+  const possiblePaths = [
+    // Git Bash (most common)
+    'C:\\Program Files\\Git\\bin\\bash.exe',
+    'C:\\Program Files (x86)\\Git\\bin\\bash.exe',
+    // MSYS2
+    'C:\\msys64\\usr\\bin\\bash.exe',
+    'C:\\msys32\\usr\\bin\\bash.exe',
+    // Cygwin
+    'C:\\cygwin64\\bin\\bash.exe',
+    'C:\\cygwin\\bin\\bash.exe',
+    // WSL bash (available in PATH on Windows 10+)
+    'bash.exe',
+  ];
+
+  for (const bashPath of possiblePaths) {
+    if (bashPath === 'bash.exe') {
+      // Check if bash is in PATH
+      try {
+        const result = spawnSync('where', ['bash.exe'], { stdio: 'pipe' });
+        if (result?.status === 0) {
+          return 'bash.exe';
+        }
+      } catch (err) {
+        // where command failed, continue checking other paths
+      }
+    } else if (existsSync(bashPath)) {
+      return bashPath;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Run the bash script
+ */
+function runBashScript() {
+  const scriptPath = join(__dirname, 'start-automaker.sh');
+
+  if (!existsSync(scriptPath)) {
+    console.error('Error: start-automaker.sh not found');
+    process.exit(1);
+  }
+
+  let bashCmd;
+  let bashArgs;
+
+  if (isWindows) {
+    bashCmd = findBashOnWindows();
+
+    if (!bashCmd) {
+      console.error('Error: Could not find bash on Windows.');
+      console.error('Please install Git for Windows from https://git-scm.com/download/win');
+      console.error('');
+      console.error('Alternatively, you can run these commands directly:');
+      console.error('  npm run dev:web      - Web browser mode');
+      console.error('  npm run dev:electron - Desktop app mode');
+      process.exit(1);
+    }
+
+    // Convert Windows path to appropriate Unix-style for the detected bash variant
+    const unixPath = convertPathForBash(scriptPath, bashCmd);
+    bashArgs = [unixPath, ...args];
+  } else {
+    bashCmd = '/bin/bash';
+    bashArgs = [scriptPath, ...args];
+  }
+
+  const child = spawn(bashCmd, bashArgs, {
+    stdio: 'inherit',
+    env: {
+      ...process.env,
+      // Ensure proper terminal handling
+      TERM: process.env.TERM || 'xterm-256color',
+    },
+    // shell: false ensures signals are forwarded directly to the child process
+    shell: false,
+  });
+
+  child.on('error', (err) => {
+    if (err.code === 'ENOENT') {
+      console.error(`Error: Could not find bash at "${bashCmd}"`);
+      console.error('Please ensure Git Bash or another bash shell is installed.');
+    } else {
+      console.error('Error launching Automaker:', err.message);
+    }
+    process.exit(1);
+  });
+
+  child.on('exit', (code, signal) => {
+    if (signal) {
+      // Process was killed by a signal - exit with 1 to indicate abnormal termination
+      // (Unix convention is 128 + signal number, but we use 1 for simplicity)
+      process.exit(1);
+    }
+    process.exit(code ?? 0);
+  });
+
+  // Forward signals to child process (guard against race conditions)
+  process.on('SIGINT', () => {
+    if (!child.killed) child.kill('SIGINT');
+  });
+  process.on('SIGTERM', () => {
+    if (!child.killed) child.kill('SIGTERM');
+  });
+}
+
+runBashScript();
diff --git a/temp_repo/start-automaker.sh b/temp_repo/start-automaker.sh
new file mode 100644
index 0000000000000000000000000000000000000000..c8119f4a1891dc35210b1917106bff285fdcaf5d
--- /dev/null
+++ b/temp_repo/start-automaker.sh
@@ -0,0 +1,1464 @@
+#!/bin/bash
+# Automaker TUI Launcher - Interactive menu for launching Automaker in different modes
+# Supports: Web Browser, Desktop (Electron), Docker Dev, Electron + Docker API
+# Platforms: Linux, macOS, Windows (Git Bash, WSL, MSYS2, Cygwin)
+# Features: Terminal responsiveness, history, pre-flight checks, port management
+
+set -e
+
+# ============================================================================
+# CONFIGURATION & CONSTANTS
+# ============================================================================
+if [ -f .env ]; then
+    set -a
+    . ./.env
+    set +a
+fi
+APP_NAME="Automaker"
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+HISTORY_FILE="${HOME}/.automaker_launcher_history"
+MIN_TERM_WIDTH=70
+MIN_TERM_HEIGHT=20
+MENU_BOX_WIDTH=66
+MENU_INNER_WIDTH=64
+LOGO_WIDTH=52
+INPUT_TIMEOUT=30
+SELECTED_OPTION=1
+MAX_OPTIONS=4
+
+# Platform detection (set early for cross-platform compatibility)
+IS_WINDOWS=false
+IS_MACOS=false
+if [[ "$OSTYPE" == "msys" || "$OSTYPE" == "cygwin" || "$OSTYPE" == "mingw"* ]]; then
+    IS_WINDOWS=true
+elif [[ "$OSTYPE" == "darwin"* ]]; then
+    IS_MACOS=true
+fi
+
+# Port configuration
+# Defaults can be overridden via AUTOMAKER_WEB_PORT and AUTOMAKER_SERVER_PORT env vars
+
+# Validate env-provided ports early (before colors are available)
+if [ -n "$AUTOMAKER_WEB_PORT" ]; then
+    if ! [[ "$AUTOMAKER_WEB_PORT" =~ ^[0-9]+$ ]] || [ "$AUTOMAKER_WEB_PORT" -lt 1 ] || [ "$AUTOMAKER_WEB_PORT" -gt 65535 ]; then
+        echo "Error: AUTOMAKER_WEB_PORT must be a number between 1-65535, got '$AUTOMAKER_WEB_PORT'"
+        exit 1
+    fi
+fi
+if [ -n "$AUTOMAKER_SERVER_PORT" ]; then
+    if ! [[ "$AUTOMAKER_SERVER_PORT" =~ ^[0-9]+$ ]] || [ "$AUTOMAKER_SERVER_PORT" -lt 1 ] || [ "$AUTOMAKER_SERVER_PORT" -gt 65535 ]; then
+        echo "Error: AUTOMAKER_SERVER_PORT must be a number between 1-65535, got '$AUTOMAKER_SERVER_PORT'"
+        exit 1
+    fi
+fi
+
+DEFAULT_WEB_PORT=${AUTOMAKER_WEB_PORT:-3007}
+DEFAULT_SERVER_PORT=${AUTOMAKER_SERVER_PORT:-3008}
+PORT_SEARCH_MAX_ATTEMPTS=100
+WEB_PORT=$DEFAULT_WEB_PORT
+SERVER_PORT=$DEFAULT_SERVER_PORT
+TEST_WEB_PORT=${TEST_PORT:-3107}
+TEST_SERVER_PORT=${TEST_SERVER_PORT:-3108}
+
+# Port validation function
+# Returns 0 if valid, 1 if invalid (with error message printed)
+validate_port() {
+    local port="$1"
+    local port_name="${2:-port}"
+
+    # Check if port is a number
+    if ! [[ "$port" =~ ^[0-9]+$ ]]; then
+        echo "${C_RED}Error:${RESET} $port_name must be a number, got '$port'"
+        return 1
+    fi
+
+    # Check if port is in valid range (1-65535)
+    if [ "$port" -lt 1 ] || [ "$port" -gt 65535 ]; then
+        echo "${C_RED}Error:${RESET} $port_name must be between 1-65535, got '$port'"
+        return 1
+    fi
+
+    # Check if port is in privileged range (warning only)
+    if [ "$port" -lt 1024 ]; then
+        echo "${C_YELLOW}Warning:${RESET} $port_name $port is in privileged range (requires root/admin)"
+    fi
+
+    return 0
+}
+
+# Hostname configuration
+# Use VITE_HOSTNAME if explicitly set, otherwise default to localhost
+# Note: Don't use $HOSTNAME as it's a bash built-in containing the machine's hostname
+APP_HOST="${VITE_HOSTNAME:-localhost}"
+
+# Extract VERSION from apps/ui/package.json (the actual app version, not monorepo version)
+if command -v node &> /dev/null; then
+    VERSION="v$(node -p "require('$SCRIPT_DIR/apps/ui/package.json').version" 2>/dev/null || echo "0.11.0")"
+else
+    VERSION=$(grep '"version"' "$SCRIPT_DIR/apps/ui/package.json" 2>/dev/null | head -1 | sed 's/.*"version"[^"]*"\([^"]*\)".*/v\1/' || echo "v0.11.0")
+fi
+
+# ANSI Color codes (256-color palette)
+ESC=$(printf '\033')
+RESET="${ESC}[0m"
+BOLD="${ESC}[1m"
+DIM="${ESC}[2m"
+
+C_PRI="${ESC}[38;5;51m"   # Primary cyan
+C_SEC="${ESC}[38;5;39m"   # Secondary blue
+C_ACC="${ESC}[38;5;33m"   # Accent darker blue
+C_GREEN="${ESC}[38;5;118m" # Green
+C_RED="${ESC}[38;5;196m"   # Red
+C_YELLOW="${ESC}[38;5;226m" # Yellow
+C_GRAY="${ESC}[38;5;240m"  # Dark gray
+C_WHITE="${ESC}[38;5;255m" # White
+C_MUTE="${ESC}[38;5;248m"  # Muted gray
+
+# ============================================================================
+# ARGUMENT PARSING
+# ============================================================================
+
+MODE=""
+USE_COLORS=true
+CHECK_DEPS=false
+NO_HISTORY=false
+PRODUCTION_MODE=false
+
+show_help() {
+    cat << 'EOF'
+Automaker TUI Launcher - Interactive development environment starter
+
+USAGE:
+  start-automaker.sh [MODE] [OPTIONS]
+
+MODES:
+  web              Launch in web browser (localhost:3007)
+  electron         Launch as desktop app (Electron)
+  docker           Launch in Docker container (dev with live reload)
+  docker-electron  Launch Electron with Docker API backend
+
+OPTIONS:
+  --help           Show this help message
+  --version        Show version information
+  --no-colors      Disable colored output
+  --check-deps     Check dependencies before launching
+  --no-history     Don't remember last choice
+  --production     Run in production mode (builds first, faster React)
+
+EXAMPLES:
+  start-automaker.sh              # Interactive menu (development)
+  start-automaker.sh --production # Interactive menu (production)
+  start-automaker.sh web          # Launch web mode directly (dev)
+  start-automaker.sh web --production  # Launch web mode (production)
+  start-automaker.sh electron     # Launch desktop app directly
+  start-automaker.sh docker       # Launch Docker dev container
+  start-automaker.sh --version    # Show version
+
+  AUTOMAKER_WEB_PORT=4000 AUTOMAKER_SERVER_PORT=4001 start-automaker.sh web
+                                  # Launch web mode on custom ports
+
+KEYBOARD SHORTCUTS (in menu):
+  Up/Down arrows   Navigate between options
+  Enter            Select highlighted option
+  1-4              Jump to and select mode
+  Q                Exit
+
+HISTORY:
+  Your last selected mode is remembered in: ~/.automaker_launcher_history
+  Use --no-history to disable this feature
+
+ENVIRONMENT VARIABLES:
+  AUTOMAKER_WEB_PORT     Override default web/UI port (default: 3007)
+  AUTOMAKER_SERVER_PORT  Override default API server port (default: 3008)
+
+PLATFORMS:
+  Linux, macOS, Windows (Git Bash, WSL, MSYS2, Cygwin)
+
+EOF
+}
+
+show_version() {
+    echo "Automaker Launcher $VERSION"
+    echo "Node.js: $(node -v 2>/dev/null || echo 'not installed')"
+    echo "Bash: ${BASH_VERSION%.*}"
+}
+
+parse_args() {
+    while [[ $# -gt 0 ]]; do
+        case "$1" in
+            --help)
+                show_help
+                exit 0
+                ;;
+            --version)
+                show_version
+                exit 0
+                ;;
+            --no-colors)
+                USE_COLORS=false
+                RESET=""
+                C_PRI="" C_SEC="" C_ACC="" C_GREEN="" C_RED="" C_YELLOW="" C_GRAY="" C_WHITE="" C_MUTE=""
+                ;;
+            --check-deps)
+                CHECK_DEPS=true
+                ;;
+            --no-history)
+                NO_HISTORY=true
+                ;;
+            --production)
+                PRODUCTION_MODE=true
+                ;;
+            web|electron|docker|docker-electron)
+                MODE="$1"
+                ;;
+            *)
+                echo "Unknown option: $1" >&2
+                echo "Use --help for usage information" >&2
+                exit 1
+                ;;
+        esac
+        shift
+    done
+}
+
+# ============================================================================
+# PRE-FLIGHT CHECKS
+# ============================================================================
+
+check_platform() {
+    # Platform already detected at script start
+    # This function is kept for any additional platform-specific checks
+    if [ "$IS_WINDOWS" = true ]; then
+        # Check if running in a proper terminal
+        if [ -z "$TERM" ]; then
+            echo "${C_YELLOW}Warning:${RESET} Running on Windows without proper terminal."
+            echo "For best experience, use Git Bash, WSL, or Windows Terminal."
+        fi
+    fi
+}
+
+check_required_commands() {
+    local missing=()
+
+    # Check for required commands
+    for cmd in node npm tput; do
+        if ! command -v "$cmd" &> /dev/null; then
+            missing+=("$cmd")
+        fi
+    done
+
+    if [ ${#missing[@]} -gt 0 ]; then
+        echo "${C_RED}Error:${RESET} Missing required commands: ${missing[*]}"
+        echo ""
+        echo "Please install:"
+        for cmd in "${missing[@]}"; do
+            case "$cmd" in
+                node|npm) echo "  - Node.js (includes npm) from https://nodejs.org/" ;;
+                tput) echo "  - ncurses package (usually pre-installed on Unix systems)" ;;
+            esac
+        done
+        exit 1
+    fi
+}
+
+DOCKER_CMD="docker"
+
+check_docker() {
+    if ! command -v docker &> /dev/null; then
+        echo "${C_RED}Error:${RESET} Docker is not installed or not in PATH"
+        echo "Please install Docker from https://docs.docker.com/get-docker/"
+        return 1
+    fi
+
+    if ! docker info &> /dev/null 2>&1; then
+        if sg docker -c "docker info" &> /dev/null 2>&1; then
+            DOCKER_CMD="sg docker -c"
+        else
+            echo "${C_RED}Error:${RESET} Docker daemon is not running or not accessible"
+            echo ""
+            echo "To fix, run:"
+            echo "  sudo usermod -aG docker \$USER"
+            echo ""
+            echo "Then either log out and back in, or run:"
+            echo "  newgrp docker"
+            return 1
+        fi
+    fi
+
+    export DOCKER_CMD
+    return 0
+}
+
+check_running_electron() {
+    local electron_pids=""
+
+    if [ "$IS_WINDOWS" = true ]; then
+        # Windows: look for electron.exe or Automaker.exe
+        electron_pids=$(tasklist 2>/dev/null | grep -iE "electron|automaker" | awk '{print $2}' | tr '\n' ' ' || true)
+    else
+        # Unix: look for electron or Automaker processes
+        electron_pids=$(pgrep -f "electron.*automaker|Automaker" 2>/dev/null | tr '\n' ' ' || true)
+    fi
+
+    if [ -n "$electron_pids" ] && [ "$electron_pids" != " " ]; then
+        get_term_size
+        echo ""
+        center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+        center_print "Running Electron App Detected" "$C_YELLOW"
+        center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+        echo ""
+        center_print "Electron process(es): $electron_pids" "$C_MUTE"
+        echo ""
+        center_print "What would you like to do?" "$C_WHITE"
+        echo ""
+        center_print "[K] Kill Electron and continue" "$C_GREEN"
+        center_print "[I] Ignore and continue anyway" "$C_MUTE"
+        center_print "[C] Cancel" "$C_RED"
+        echo ""
+
+        while true; do
+            local choice_pad=$(( (TERM_COLS - 20) / 2 ))
+            printf "%${choice_pad}s" ""
+            read -r -p "Choice: " choice
+
+            case "$choice" in
+                [kK]|[kK][iI][lL][lL])
+                    echo ""
+                    center_print "Killing Electron processes..." "$C_YELLOW"
+                    if [ "$IS_WINDOWS" = true ]; then
+                        taskkill //F //IM "electron.exe" 2>/dev/null || true
+                        taskkill //F //IM "Automaker.exe" 2>/dev/null || true
+                    else
+                        pkill -f "electron.*automaker" 2>/dev/null || true
+                        pkill -f "Automaker" 2>/dev/null || true
+                    fi
+                    sleep 1
+                    center_print "✓ Electron stopped" "$C_GREEN"
+                    echo ""
+                    return 0
+                    ;;
+                [iI]|[iI][gG][nN][oO][rR][eE])
+                    echo ""
+                    center_print "Continuing without stopping Electron..." "$C_MUTE"
+                    echo ""
+                    return 0
+                    ;;
+                [cC]|[cC][aA][nN][cC][eE][lL])
+                    echo ""
+                    center_print "Cancelled." "$C_MUTE"
+                    echo ""
+                    exit 0
+                    ;;
+                *)
+                    center_print "Invalid choice. Please enter K, I, or C." "$C_RED"
+                    ;;
+            esac
+        done
+    fi
+
+    return 0
+}
+
+check_running_containers() {
+    local compose_file="$1"
+    local running_containers=""
+
+    # Get list of running automaker containers
+    if [ "$DOCKER_CMD" = "sg docker -c" ]; then
+        running_containers=$(sg docker -c "docker ps --filter 'name=automaker-dev' --format '{{{{Names}}}}'" 2>/dev/null | tr '\n' ' ' || true)
+    else
+        running_containers=$($DOCKER_CMD ps --filter "name=automaker-dev" --format "{{.Names}}" 2>/dev/null | tr '\n' ' ' || true)
+    fi
+
+    if [ -n "$running_containers" ] && [ "$running_containers" != " " ]; then
+        get_term_size
+        echo ""
+        center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+        center_print "Existing Containers Detected" "$C_YELLOW"
+        center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+        echo ""
+        center_print "Running containers: $running_containers" "$C_MUTE"
+        echo ""
+        center_print "What would you like to do?" "$C_WHITE"
+        echo ""
+        center_print "[S] Stop containers and start fresh" "$C_GREEN"
+        center_print "[R] Restart containers (rebuild)" "$C_MUTE"
+        center_print "[A] Attach to existing containers" "$C_MUTE"
+        center_print "[C] Cancel" "$C_RED"
+        echo ""
+
+        while true; do
+            local choice_pad=$(( (TERM_COLS - 20) / 2 ))
+            printf "%${choice_pad}s" ""
+            read -r -p "Choice: " choice
+
+            case "$choice" in
+                [sS]|[sS][tT][oO][pP])
+                    echo ""
+                    center_print "Stopping existing containers..." "$C_YELLOW"
+                    if [ "$DOCKER_CMD" = "sg docker -c" ]; then
+                        sg docker -c "docker compose -f '$compose_file' down" 2>/dev/null || true
+                        sg docker -c "docker ps --filter 'name=automaker-dev' -q" 2>/dev/null | xargs -r sg docker -c "docker stop" 2>/dev/null || true
+                    else
+                        $DOCKER_CMD compose -f "$compose_file" down 2>/dev/null || true
+                        $DOCKER_CMD ps --filter "name=automaker-dev" -q 2>/dev/null | xargs -r $DOCKER_CMD stop 2>/dev/null || true
+                    fi
+                    center_print "✓ Containers stopped" "$C_GREEN"
+                    echo ""
+                    return 0  # Continue with fresh start
+                    ;;
+                [rR]|[rR][eE][sS][tT][aA][rR][tT])
+                    echo ""
+                    center_print "Stopping and rebuilding containers..." "$C_YELLOW"
+                    if [ "$DOCKER_CMD" = "sg docker -c" ]; then
+                        sg docker -c "docker compose -f '$compose_file' down" 2>/dev/null || true
+                    else
+                        $DOCKER_CMD compose -f "$compose_file" down 2>/dev/null || true
+                    fi
+                    center_print "✓ Ready to rebuild" "$C_GREEN"
+                    echo ""
+                    return 0  # Continue with rebuild
+                    ;;
+                [aA]|[aA][tT][tT][aA][cC][hH])
+                    echo ""
+                    center_print "Attaching to existing containers..." "$C_GREEN"
+                    echo ""
+                    return 2  # Special code for attach
+                    ;;
+                [cC]|[cC][aA][nN][cC][eE][lL])
+                    echo ""
+                    center_print "Cancelled." "$C_MUTE"
+                    echo ""
+                    exit 0
+                    ;;
+                *)
+                    center_print "Invalid choice. Please enter S, R, A, or C." "$C_RED"
+                    ;;
+            esac
+        done
+    fi
+
+    return 0  # No containers running, continue normally
+}
+
+check_dependencies() {
+    if [ "$CHECK_DEPS" = false ]; then
+        return 0
+    fi
+
+    echo "${C_MUTE}Checking project dependencies...${RESET}"
+
+    if [ ! -d "node_modules" ]; then
+        echo "${C_YELLOW}⚠${RESET}  node_modules not found. Run 'npm install' before launching."
+        return 1
+    fi
+
+    if [ ! -f "package-lock.json" ]; then
+        echo "${C_YELLOW}⚠${RESET}  package-lock.json not found."
+    fi
+
+    return 0
+}
+
+# ============================================================================
+# PORT MANAGEMENT (Cross-platform)
+# ============================================================================
+
+get_pids_on_port() {
+    local port=$1
+
+    if [ "$IS_WINDOWS" = true ]; then
+        # Windows: use netstat
+        netstat -ano 2>/dev/null | grep ":$port " | grep "LISTENING" | awk '{print $5}' | sort -u | tr '\n' ' ' || true
+    else
+        # Unix: use lsof
+        lsof -ti:"$port" 2>/dev/null || true
+    fi
+}
+
+is_port_in_use() {
+    local port=$1
+    local pids
+    pids=$(get_pids_on_port "$port")
+    [ -n "$pids" ] && [ "$pids" != " " ]
+}
+
+# Find the next available port starting from a given port
+# Returns the port on stdout if found, nothing if all ports in range are busy
+# Exit code: 0 if found, 1 if no available port in range
+find_next_available_port() {
+    local start_port=$1
+    local port=$start_port
+
+    for ((i=0; i<PORT_SEARCH_MAX_ATTEMPTS; i++)); do
+        if ! is_port_in_use "$port"; then
+            echo "$port"
+            return 0
+        fi
+        port=$((port + 1))
+    done
+
+    # No free port found in the scan range
+    return 1
+}
+
+kill_port() {
+    local port=$1
+    local pids
+    pids=$(get_pids_on_port "$port")
+
+    if [ -z "$pids" ] || [ "$pids" = " " ]; then
+        echo "${C_GREEN}✓${RESET} Port $port is available"
+        return 0
+    fi
+
+    echo "${C_YELLOW}Killing process(es) on port $port: $pids${RESET}"
+
+    if [ "$IS_WINDOWS" = true ]; then
+        # Windows: use taskkill
+        for pid in $pids; do
+            taskkill //F //PID "$pid" 2>/dev/null || true
+        done
+    else
+        # Unix: use kill
+        echo "$pids" | xargs kill -9 2>/dev/null || true
+    fi
+
+    # Wait for port to be freed
+    local i=0
+    while [ $i -lt 10 ]; do
+        sleep 0.5 2>/dev/null || sleep 1
+        if ! is_port_in_use "$port"; then
+            echo "${C_GREEN}✓${RESET} Port $port is now free"
+            return 0
+        fi
+        i=$((i + 1))
+    done
+
+    echo "${C_RED}Warning:${RESET} Port $port may still be in use"
+    return 1
+}
+
+check_ports() {
+    # Auto-discover available ports (no user interaction required)
+    local web_in_use=false
+    local server_in_use=false
+
+    if is_port_in_use "$DEFAULT_WEB_PORT"; then
+        web_in_use=true
+    fi
+    if is_port_in_use "$DEFAULT_SERVER_PORT"; then
+        server_in_use=true
+    fi
+
+    if [ "$web_in_use" = true ] || [ "$server_in_use" = true ]; then
+        echo ""
+        local max_port
+        if [ "$web_in_use" = true ]; then
+            local pids
+            # Get PIDs and convert newlines to spaces for display
+            pids=$(get_pids_on_port "$DEFAULT_WEB_PORT" | xargs)
+            echo "${C_YELLOW}Port $DEFAULT_WEB_PORT in use (PID: $pids), finding alternative...${RESET}"
+            max_port=$((DEFAULT_WEB_PORT + PORT_SEARCH_MAX_ATTEMPTS - 1))
+            if ! WEB_PORT=$(find_next_available_port "$DEFAULT_WEB_PORT"); then
+                echo "${C_RED}Error: No free web port in range ${DEFAULT_WEB_PORT}-${max_port}${RESET}"
+                exit 1
+            fi
+        fi
+        if [ "$server_in_use" = true ]; then
+            local pids
+            # Get PIDs and convert newlines to spaces for display
+            pids=$(get_pids_on_port "$DEFAULT_SERVER_PORT" | xargs)
+            echo "${C_YELLOW}Port $DEFAULT_SERVER_PORT in use (PID: $pids), finding alternative...${RESET}"
+            max_port=$((DEFAULT_SERVER_PORT + PORT_SEARCH_MAX_ATTEMPTS - 1))
+            if ! SERVER_PORT=$(find_next_available_port "$DEFAULT_SERVER_PORT"); then
+                echo "${C_RED}Error: No free server port in range ${DEFAULT_SERVER_PORT}-${max_port}${RESET}"
+                exit 1
+            fi
+        fi
+
+        # Ensure web and server ports don't conflict with each other
+        if [ "$WEB_PORT" -eq "$SERVER_PORT" ]; then
+            local conflict_start=$((SERVER_PORT + 1))
+            max_port=$((conflict_start + PORT_SEARCH_MAX_ATTEMPTS - 1))
+            if ! SERVER_PORT=$(find_next_available_port "$conflict_start"); then
+                echo "${C_RED}Error: No free server port in range ${conflict_start}-${max_port}${RESET}"
+                exit 1
+            fi
+        fi
+
+        echo ""
+        echo "${C_GREEN}✓ Auto-selected available ports: Web=$WEB_PORT, Server=$SERVER_PORT${RESET}"
+    else
+        echo "${C_GREEN}✓${RESET} Port $DEFAULT_WEB_PORT is available"
+        echo "${C_GREEN}✓${RESET} Port $DEFAULT_SERVER_PORT is available"
+    fi
+}
+
+validate_terminal_size() {
+    if [ "$USE_COLORS" = false ]; then
+        return 0
+    fi
+
+    local term_width term_height
+    term_width=$(tput cols 2>/dev/null || echo 80)
+    term_height=$(tput lines 2>/dev/null || echo 24)
+
+    if [ "$term_width" -lt "$MIN_TERM_WIDTH" ] || [ "$term_height" -lt "$MIN_TERM_HEIGHT" ]; then
+        echo "${C_YELLOW}⚠${RESET}  Terminal size ${term_width}x${term_height} is smaller than recommended ${MIN_TERM_WIDTH}x${MIN_TERM_HEIGHT}"
+        echo "    Some elements may not display correctly."
+        echo ""
+        return 0
+    fi
+}
+
+# ============================================================================
+# CURSOR & CLEANUP
+# ============================================================================
+
+hide_cursor() {
+    [ "$USE_COLORS" = true ] && printf "${ESC}[?25l"
+}
+
+show_cursor() {
+    [ "$USE_COLORS" = true ] && printf "${ESC}[?25h"
+}
+
+cleanup() {
+    show_cursor
+    # Restore terminal settings (echo and canonical mode)
+    stty echo icanon 2>/dev/null || true
+    # Kill server process if running in production mode
+    if [ -n "${SERVER_PID:-}" ]; then
+        kill $SERVER_PID 2>/dev/null || true
+    fi
+    printf "${RESET}\n"
+}
+
+trap cleanup EXIT INT TERM
+
+# ============================================================================
+# TERMINAL SIZE & UI UTILITIES
+# ============================================================================
+
+get_term_size() {
+    TERM_COLS=$(tput cols 2>/dev/null || echo 80)
+    TERM_LINES=$(tput lines 2>/dev/null || echo 24)
+}
+
+center_text() {
+    local text="$1"
+    local len=${#text}
+    local pad=$(( (TERM_COLS - len) / 2 ))
+    printf "%${pad}s%s\n" "" "$text"
+}
+
+draw_line() {
+    local char="${1:-─}"
+    local color="${2:-$C_GRAY}"
+    local width="${3:-58}"
+    printf "${color}"
+    for ((i=0; i<width; i++)); do printf "%s" "$char"; done
+    printf "${RESET}"
+}
+
+# ============================================================================
+# UI DISPLAY FUNCTIONS
+# ============================================================================
+
+show_header() {
+    clear
+    get_term_size
+
+    # Top padding
+    local top_pad=$(( TERM_LINES / 6 ))
+    for ((i=0; i<top_pad; i++)); do echo ""; done
+
+    # Automaker ASCII art logo
+    local l1="  █▀▀█ █  █ ▀▀█▀▀ █▀▀█ █▀▄▀█ █▀▀█ █ █ █▀▀ █▀▀█  "
+    local l2="  █▄▄█ █  █   █   █  █ █ ▀ █ █▄▄█ █▀▄ █▀▀ █▄▄▀  "
+    local l3="  ▀  ▀  ▀▀▀   ▀   ▀▀▀▀ ▀   ▀ ▀  ▀ ▀ ▀ ▀▀▀ ▀ ▀▀  "
+
+    local pad_left=$(( (TERM_COLS - LOGO_WIDTH) / 2 ))
+    local pad=$(printf "%${pad_left}s" "")
+
+    echo -e "${pad}${C_PRI}${l1}${RESET}"
+    echo -e "${pad}${C_SEC}${l2}${RESET}"
+    echo -e "${pad}${C_ACC}${l3}${RESET}"
+
+    echo ""
+    local mode_indicator=""
+    if [ "$PRODUCTION_MODE" = true ]; then
+        mode_indicator="${C_GREEN}[PRODUCTION]${RESET}"
+    else
+        mode_indicator="${C_YELLOW}[DEVELOPMENT]${RESET}"
+    fi
+    local sub_display_len=60
+    local sub_pad=$(( (TERM_COLS - sub_display_len) / 2 ))
+    printf "%${sub_pad}s" ""
+    echo -e "${C_MUTE}Autonomous AI Development Studio${RESET}  ${C_GRAY}│${RESET}  ${C_GREEN}${VERSION}${RESET}  ${mode_indicator}"
+
+    echo ""
+    echo ""
+}
+
+show_menu() {
+    local pad_left=$(( (TERM_COLS - MENU_BOX_WIDTH) / 2 ))
+    local pad=$(printf "%${pad_left}s" "")
+    local border="${C_GRAY}│${RESET}"
+
+    printf "%s${C_GRAY}╭" "$pad"
+    draw_line "─" "$C_GRAY" "$MENU_INNER_WIDTH"
+    printf "╮${RESET}\n"
+
+    # Menu items with selection indicator
+    local sel1="" sel2="" sel3="" sel4=""
+    local txt1="${C_MUTE}" txt2="${C_MUTE}" txt3="${C_MUTE}" txt4="${C_MUTE}"
+
+    case $SELECTED_OPTION in
+        1) sel1="${C_ACC}▸${RESET} ${C_PRI}"; txt1="${C_WHITE}" ;;
+        2) sel2="${C_ACC}▸${RESET} ${C_PRI}"; txt2="${C_WHITE}" ;;
+        3) sel3="${C_ACC}▸${RESET} ${C_PRI}"; txt3="${C_WHITE}" ;;
+        4) sel4="${C_ACC}▸${RESET} ${C_PRI}"; txt4="${C_WHITE}" ;;
+    esac
+
+    # Default non-selected prefix
+    [[ -z "$sel1" ]] && sel1="  ${C_MUTE}"
+    [[ -z "$sel2" ]] && sel2="  ${C_MUTE}"
+    [[ -z "$sel3" ]] && sel3="  ${C_MUTE}"
+    [[ -z "$sel4" ]] && sel4="  ${C_MUTE}"
+
+    printf "%s${border}${sel1}[1]${RESET} 🌐  ${txt1}Web App${RESET}           ${C_MUTE}Server + Browser (localhost:$WEB_PORT)${RESET}   ${border}\n" "$pad"
+    printf "%s${border}${sel2}[2]${RESET} 🖥   ${txt2}Electron${RESET}          ${DIM}Desktop App (embedded server)${RESET}       ${border}\n" "$pad"
+    printf "%s${border}${sel3}[3]${RESET} 🐳  ${txt3}Docker${RESET}            ${DIM}Full Stack (live reload)${RESET}            ${border}\n" "$pad"
+    printf "%s${border}${sel4}[4]${RESET} 🔗  ${txt4}Electron & Docker${RESET} ${DIM}Desktop + Docker Server${RESET}             ${border}\n" "$pad"
+
+    printf "%s${C_GRAY}├" "$pad"
+    draw_line "─" "$C_GRAY" "$MENU_INNER_WIDTH"
+    printf "┤${RESET}\n"
+
+    printf "%s${border}    ${C_RED}[Q]${RESET} ⏻   ${C_MUTE}Exit${RESET}                                                ${border}\n" "$pad"
+
+    printf "%s${C_GRAY}╰" "$pad"
+    draw_line "─" "$C_GRAY" "$MENU_INNER_WIDTH"
+    printf "╯${RESET}\n"
+
+    echo ""
+    local footer_text="[↑↓] Navigate  [Enter] Select  [1-4] Quick Select  [Q] Exit"
+    local f_pad=$(( (TERM_COLS - ${#footer_text}) / 2 ))
+    printf "%${f_pad}s" ""
+    echo -e "${DIM}${footer_text}${RESET}"
+
+    if [ -f "$HISTORY_FILE" ]; then
+        local last_mode
+        last_mode=$(cat "$HISTORY_FILE" 2>/dev/null || echo "")
+        if [ -n "$last_mode" ]; then
+            local hint_text="(Last: $last_mode)"
+            local h_pad=$(( (TERM_COLS - ${#hint_text}) / 2 ))
+            printf "%${h_pad}s" ""
+            echo -e "${DIM}${hint_text}${RESET}"
+        fi
+    fi
+}
+
+# ============================================================================
+# SPINNER & INITIALIZATION
+# ============================================================================
+
+spinner() {
+    local text="$1"
+    local -a frames=('⠋' '⠙' '⠹' '⠸' '⠼' '⠴' '⠦' '⠧' '⠇' '⠏')
+    local i=0
+    local count=0
+    local max_frames=20  # Max 2 seconds
+
+    # Ensure TERM_COLS is set
+    [ -z "$TERM_COLS" ] && TERM_COLS=80
+
+    while [ $count -lt $max_frames ]; do
+        local len=${#text}
+        local pad_left=$(( (TERM_COLS - len - 4) / 2 ))
+        [ $pad_left -lt 0 ] && pad_left=0
+        printf "\r%${pad_left}s${C_PRI}${frames[$i]}${RESET} ${C_WHITE}%s${RESET}" "" "$text"
+        i=$(( (i + 1) % ${#frames[@]} ))
+        count=$((count + 1))
+        sleep 0.1 2>/dev/null || sleep 1
+    done
+
+    local len=${#text}
+    local pad_left=$(( (TERM_COLS - len - 4) / 2 ))
+    [ $pad_left -lt 0 ] && pad_left=0
+    printf "\r%${pad_left}s${C_GREEN}✓${RESET} ${C_WHITE}%s${RESET}   \n" "" "$text"
+}
+
+center_print() {
+    local text="$1"
+    local color="${2:-}"
+    local len=${#text}
+    local pad=$(( (TERM_COLS - len) / 2 ))
+    [ $pad -lt 0 ] && pad=0
+    printf "%${pad}s${color}%s${RESET}\n" "" "$text"
+}
+
+resolve_port_conflicts() {
+    # Ensure terminal is in proper state for input
+    show_cursor
+    stty echo icanon 2>/dev/null || true
+
+    local web_in_use=false
+    local server_in_use=false
+    local web_pids=""
+    local server_pids=""
+
+    if is_port_in_use "$DEFAULT_WEB_PORT"; then
+        web_in_use=true
+        # Get PIDs and convert newlines to spaces for display
+        web_pids=$(get_pids_on_port "$DEFAULT_WEB_PORT" | xargs)
+    fi
+    if is_port_in_use "$DEFAULT_SERVER_PORT"; then
+        server_in_use=true
+        # Get PIDs and convert newlines to spaces for display
+        server_pids=$(get_pids_on_port "$DEFAULT_SERVER_PORT" | xargs)
+    fi
+
+    if [ "$web_in_use" = true ] || [ "$server_in_use" = true ]; then
+        echo ""
+        if [ "$web_in_use" = true ]; then
+            center_print "Port $DEFAULT_WEB_PORT in use (PID: $web_pids)" "$C_YELLOW"
+        fi
+        if [ "$server_in_use" = true ]; then
+            center_print "Port $DEFAULT_SERVER_PORT in use (PID: $server_pids)" "$C_YELLOW"
+        fi
+        echo ""
+
+        # Show options
+        center_print "What would you like to do?" "$C_WHITE"
+        echo ""
+        center_print "[Enter] Auto-select available ports (Recommended)" "$C_GREEN"
+        center_print "[K] Kill processes and use default ports" "$C_MUTE"
+        center_print "[C] Choose custom ports" "$C_MUTE"
+        center_print "[X] Cancel" "$C_RED"
+        echo ""
+
+        while true; do
+            local choice_pad=$(( (TERM_COLS - 20) / 2 ))
+            printf "%${choice_pad}s" ""
+            read -r -p "Choice [Enter]: " choice
+
+            case "$choice" in
+                ""|[aA]|[aA][uU][tT][oO])
+                    # Auto-select: find next available ports
+                    echo ""
+                    local max_port=$((DEFAULT_WEB_PORT + PORT_SEARCH_MAX_ATTEMPTS - 1))
+                    if [ "$web_in_use" = true ]; then
+                        if ! WEB_PORT=$(find_next_available_port "$DEFAULT_WEB_PORT"); then
+                            center_print "No free web port in range ${DEFAULT_WEB_PORT}-${max_port}" "$C_RED"
+                            exit 1
+                        fi
+                    fi
+                    max_port=$((DEFAULT_SERVER_PORT + PORT_SEARCH_MAX_ATTEMPTS - 1))
+                    if [ "$server_in_use" = true ]; then
+                        if ! SERVER_PORT=$(find_next_available_port "$DEFAULT_SERVER_PORT"); then
+                            center_print "No free server port in range ${DEFAULT_SERVER_PORT}-${max_port}" "$C_RED"
+                            exit 1
+                        fi
+                    fi
+                    # Ensure web and server ports don't conflict with each other
+                    if [ "$WEB_PORT" -eq "$SERVER_PORT" ]; then
+                        local conflict_start=$((SERVER_PORT + 1))
+                        max_port=$((conflict_start + PORT_SEARCH_MAX_ATTEMPTS - 1))
+                        if ! SERVER_PORT=$(find_next_available_port "$conflict_start"); then
+                            center_print "No free server port in range ${conflict_start}-${max_port}" "$C_RED"
+                            exit 1
+                        fi
+                    fi
+                    center_print "✓ Auto-selected available ports:" "$C_GREEN"
+                    center_print "  Web: $WEB_PORT  |  Server: $SERVER_PORT" "$C_PRI"
+                    break
+                    ;;
+                [kK]|[kK][iI][lL][lL])
+                    echo ""
+                    if [ "$web_in_use" = true ]; then
+                        center_print "Killing process(es) on port $DEFAULT_WEB_PORT..." "$C_YELLOW"
+                        kill_port "$DEFAULT_WEB_PORT" > /dev/null 2>&1 || true
+                        center_print "✓ Port $DEFAULT_WEB_PORT is now free" "$C_GREEN"
+                    fi
+                    if [ "$server_in_use" = true ]; then
+                        center_print "Killing process(es) on port $DEFAULT_SERVER_PORT..." "$C_YELLOW"
+                        kill_port "$DEFAULT_SERVER_PORT" > /dev/null 2>&1 || true
+                        center_print "✓ Port $DEFAULT_SERVER_PORT is now free" "$C_GREEN"
+                    fi
+                    break
+                    ;;
+                [cC]|[cC][hH][oO][oO][sS][eE])
+                    echo ""
+                    local input_pad=$(( (TERM_COLS - 40) / 2 ))
+                    # Collect both ports first
+                    printf "%${input_pad}s" ""
+                    read -r -p "Enter web port (default $DEFAULT_WEB_PORT): " input_web
+                    input_web=${input_web:-$DEFAULT_WEB_PORT}
+                    printf "%${input_pad}s" ""
+                    read -r -p "Enter server port (default $DEFAULT_SERVER_PORT): " input_server
+                    input_server=${input_server:-$DEFAULT_SERVER_PORT}
+
+                    # Validate both before assigning either
+                    if ! validate_port "$input_web" "Web port"; then
+                        continue
+                    fi
+                    if ! validate_port "$input_server" "Server port"; then
+                        continue
+                    fi
+
+                    # Assign atomically after both validated
+                    WEB_PORT=$input_web
+                    SERVER_PORT=$input_server
+                    center_print "Using ports: Web=$WEB_PORT, Server=$SERVER_PORT" "$C_GREEN"
+                    break
+                    ;;
+                [xX]|[xX][cC][aA][nN][cC][eE][lL])
+                    echo ""
+                    center_print "Cancelled." "$C_MUTE"
+                    echo ""
+                    exit 0
+                    ;;
+                *)
+                    center_print "Invalid choice. Press Enter for auto-select, or K/C/X." "$C_RED"
+                    ;;
+            esac
+        done
+    else
+        center_print "✓ Port $DEFAULT_WEB_PORT is available" "$C_GREEN"
+        center_print "✓ Port $DEFAULT_SERVER_PORT is available" "$C_GREEN"
+    fi
+
+    # Restore terminal state
+    hide_cursor
+    stty -echo -icanon 2>/dev/null || true
+}
+
+launch_sequence() {
+    local mode_name="$1"
+
+    # Ensure terminal size is available
+    get_term_size
+
+    echo ""
+
+    # Show port checking for modes that use local ports
+    if [[ "$MODE" == "web" || "$MODE" == "electron" ]]; then
+        center_print "Checking ports ${DEFAULT_WEB_PORT} and ${DEFAULT_SERVER_PORT}..." "$C_MUTE"
+        resolve_port_conflicts
+        echo ""
+    fi
+
+    spinner "Initializing environment..."
+    spinner "Starting $mode_name..."
+
+    echo ""
+    local msg="Automaker is ready!"
+    local pad=$(( (TERM_COLS - ${#msg}) / 2 ))
+    printf "%${pad}s${C_GREEN}${BOLD}%s${RESET}\n" "" "$msg"
+
+    case "$MODE" in
+        web)
+            local url="http://${APP_HOST}:$WEB_PORT"
+            local upad=$(( (TERM_COLS - ${#url} - 10) / 2 ))
+            echo ""
+            printf "%${upad}s${DIM}Opening ${C_SEC}%s${RESET}\n" "" "$url"
+            ;;
+        docker|docker-electron)
+            echo ""
+            local ui_msg="UI: http://localhost:$DEFAULT_WEB_PORT"
+            local api_msg="API: http://localhost:$DEFAULT_SERVER_PORT"
+            center_text "${DIM}${ui_msg}${RESET}"
+            center_text "${DIM}${api_msg}${RESET}"
+            ;;
+    esac
+    echo ""
+}
+
+# ============================================================================
+# HISTORY MANAGEMENT
+# ============================================================================
+
+save_mode_to_history() {
+    if [ "$NO_HISTORY" = false ]; then
+        echo "$1" > "$HISTORY_FILE"
+    fi
+}
+
+get_last_mode_from_history() {
+    if [ -f "$HISTORY_FILE" ] && [ "$NO_HISTORY" = false ]; then
+        cat "$HISTORY_FILE"
+    fi
+}
+
+# ============================================================================
+# PRODUCTION BUILD
+# ============================================================================
+
+build_for_production() {
+    echo ""
+    center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+    center_print "Building for Production" "$C_PRI"
+    center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+    echo ""
+
+    center_print "Building shared packages..." "$C_YELLOW"
+    if ! npm run build:packages; then
+        center_print "✗ Failed to build packages" "$C_RED"
+        exit 1
+    fi
+    center_print "✓ Packages built" "$C_GREEN"
+    echo ""
+
+    center_print "Building server..." "$C_YELLOW"
+    if ! npm run build --workspace=apps/server; then
+        center_print "✗ Failed to build server" "$C_RED"
+        exit 1
+    fi
+    center_print "✓ Server built" "$C_GREEN"
+    echo ""
+
+    center_print "Building UI..." "$C_YELLOW"
+    if ! npm run build --workspace=apps/ui; then
+        center_print "✗ Failed to build UI" "$C_RED"
+        exit 1
+    fi
+    center_print "✓ UI built" "$C_GREEN"
+    echo ""
+
+    center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+    center_print "Build Complete" "$C_GREEN"
+    center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+    echo ""
+}
+
+# Ensure production env is applied consistently for builds and runtime
+apply_production_env() {
+    if [ "$PRODUCTION_MODE" = true ]; then
+        export NODE_ENV="production"
+    fi
+}
+
+# ============================================================================
+# MAIN EXECUTION
+# ============================================================================
+
+parse_args "$@"
+
+apply_production_env
+
+# Pre-flight checks
+check_platform
+check_required_commands
+validate_terminal_size
+
+if [ "$CHECK_DEPS" = true ]; then
+    check_dependencies || true
+fi
+
+hide_cursor
+# Disable echo and line buffering for single-key input
+stty -echo -icanon 2>/dev/null || true
+
+# Function to read a single key, handling escape sequences for arrows
+# Note: bash 3.2 (macOS) doesn't support fractional timeouts, so we use a different approach
+read_key() {
+    local key
+    local escape_seq=""
+
+    if [ -n "$ZSH_VERSION" ]; then
+        read -k 1 -s -t "$INPUT_TIMEOUT" key 2>/dev/null || key=""
+    else
+        # Use IFS= to preserve special characters
+        IFS= read -n 1 -s -t "$INPUT_TIMEOUT" -r key 2>/dev/null || key=""
+    fi
+
+    # Check for escape sequence (arrow keys send ESC [ A/B/C/D)
+    if [[ "$key" == $'\x1b' ]]; then
+        # Read the rest of the escape sequence without timeout
+        # Arrow keys send 3 bytes: ESC [ A/B/C/D
+        IFS= read -n 1 -s -r escape_seq 2>/dev/null || escape_seq=""
+        if [[ "$escape_seq" == "[" ]] || [[ "$escape_seq" == "O" ]]; then
+            IFS= read -n 1 -s -r escape_seq 2>/dev/null || escape_seq=""
+            case "$escape_seq" in
+                A) echo "UP"; return ;;
+                B) echo "DOWN"; return ;;
+                C) echo "RIGHT"; return ;;
+                D) echo "LEFT"; return ;;
+            esac
+        fi
+        # Just ESC key pressed
+        echo "ESC"
+        return
+    fi
+
+    echo "$key"
+}
+
+# Interactive menu if no mode specified
+if [ -z "$MODE" ]; then
+    while true; do
+        show_header
+        show_menu
+
+        key=$(read_key)
+
+        case $key in
+            UP)
+                SELECTED_OPTION=$((SELECTED_OPTION - 1))
+                [ $SELECTED_OPTION -lt 1 ] && SELECTED_OPTION=$MAX_OPTIONS
+                ;;
+            DOWN)
+                SELECTED_OPTION=$((SELECTED_OPTION + 1))
+                [ $SELECTED_OPTION -gt $MAX_OPTIONS ] && SELECTED_OPTION=1
+                ;;
+            1) SELECTED_OPTION=1; MODE="web"; break ;;
+            2) SELECTED_OPTION=2; MODE="electron"; break ;;
+            3) SELECTED_OPTION=3; MODE="docker"; break ;;
+            4) SELECTED_OPTION=4; MODE="docker-electron"; break ;;
+            ""|$'\n'|$'\r')
+                # Enter key - select current option
+                case $SELECTED_OPTION in
+                    1) MODE="web" ;;
+                    2) MODE="electron" ;;
+                    3) MODE="docker" ;;
+                    4) MODE="docker-electron" ;;
+                esac
+                break
+                ;;
+            q|Q)
+                echo ""
+                echo ""
+                center_text "${C_MUTE}Goodbye! See you soon.${RESET}"
+                echo ""
+                exit 0
+                ;;
+            *)
+                ;;
+        esac
+    done
+fi
+
+# Validate mode
+case $MODE in
+    web) MODE_NAME="Web Browser" ;;
+    electron) MODE_NAME="Desktop App" ;;
+    docker) MODE_NAME="Docker Dev" ;;
+    docker-electron) MODE_NAME="Electron + Docker" ;;
+    *)
+        echo "${C_RED}Error:${RESET} Invalid mode '$MODE'"
+        echo "Valid modes: web, electron, docker, docker-electron"
+        exit 1
+        ;;
+esac
+
+# Check Docker for Docker modes
+if [[ "$MODE" == "docker" || "$MODE" == "docker-electron" ]]; then
+    show_cursor
+    stty echo icanon 2>/dev/null || true
+    if ! check_docker; then
+        exit 1
+    fi
+    hide_cursor
+    stty -echo -icanon 2>/dev/null || true
+fi
+
+# Save to history
+save_mode_to_history "$MODE"
+
+# Launch sequence
+launch_sequence "$MODE_NAME"
+
+# Restore terminal state before running npm
+show_cursor
+stty echo icanon 2>/dev/null || true
+
+# Build for production if needed
+if [ "$PRODUCTION_MODE" = true ]; then
+    build_for_production
+fi
+
+# Execute the appropriate command
+case $MODE in
+    web)
+        if [ -f .env ]; then
+            export $(grep -v '^#' .env | xargs)
+        fi
+        export TEST_PORT="$TEST_WEB_PORT"
+        export TEST_SERVER_PORT="$TEST_SERVER_PORT"
+        export VITE_SERVER_URL="http://${APP_HOST}:$SERVER_PORT"
+        export PORT="$SERVER_PORT"
+        export DATA_DIR="$SCRIPT_DIR/data"
+        # Always include localhost and 127.0.0.1 for local dev, plus custom hostname if different
+        CORS_ORIGINS="http://localhost:$WEB_PORT,http://127.0.0.1:$WEB_PORT"
+        if [[ "$APP_HOST" != "localhost" && "$APP_HOST" != "127.0.0.1" ]]; then
+            CORS_ORIGINS="${CORS_ORIGINS},http://${APP_HOST}:$WEB_PORT"
+        fi
+        export CORS_ORIGIN="$CORS_ORIGINS"
+        export VITE_APP_MODE="1"
+
+        if [ "$PRODUCTION_MODE" = true ]; then
+            # Production: run built server and UI preview concurrently
+            echo ""
+            center_print "Starting server on port $SERVER_PORT..." "$C_YELLOW"
+            npm run start --workspace=apps/server &
+            SERVER_PID=$!
+
+            # Wait for server to be healthy
+            echo ""
+            center_print "Waiting for server to be ready..." "$C_YELLOW"
+            max_retries=30
+            server_ready=false
+            for ((i=0; i<max_retries; i++)); do
+                if curl -s "http://localhost:$SERVER_PORT/api/health" > /dev/null 2>&1; then
+                    server_ready=true
+                    break
+                fi
+                sleep 1
+            done
+
+            if [ "$server_ready" = false ]; then
+                center_print "✗ Server failed to start" "$C_RED"
+                kill $SERVER_PID 2>/dev/null || true
+                exit 1
+            fi
+            center_print "✓ Server is ready!" "$C_GREEN"
+            echo ""
+
+            # Start UI preview
+            center_print "Starting UI preview on port $WEB_PORT..." "$C_YELLOW"
+            npm run preview --workspace=apps/ui -- --port "$WEB_PORT"
+
+            # Cleanup server on exit
+            kill $SERVER_PID 2>/dev/null || true
+        else
+            # Development: build packages, start server, then start UI with Vite dev server
+            echo ""
+            center_print "Building shared packages..." "$C_YELLOW"
+            npm run build:packages
+            center_print "✓ Packages built" "$C_GREEN"
+            echo ""
+
+            # Start backend server in dev mode (background)
+            center_print "Starting backend server on port $SERVER_PORT..." "$C_YELLOW"
+            npm run _dev:server &
+            SERVER_PID=$!
+
+            # Wait for server to be healthy
+            center_print "Waiting for server to be ready..." "$C_YELLOW"
+            max_retries=30
+            server_ready=false
+            for ((i=0; i<max_retries; i++)); do
+                if curl -s "http://localhost:$SERVER_PORT/api/health" > /dev/null 2>&1; then
+                    server_ready=true
+                    break
+                fi
+                sleep 1
+                printf "."
+            done
+            echo ""
+
+            if [ "$server_ready" = false ]; then
+                center_print "✗ Server failed to start" "$C_RED"
+                kill $SERVER_PID 2>/dev/null || true
+                exit 1
+            fi
+            center_print "✓ Server is ready!" "$C_GREEN"
+            echo ""
+
+            center_print "The application will be available at: http://${APP_HOST}:$WEB_PORT" "$C_GREEN"
+            echo ""
+
+            # Start web app with Vite dev server (HMR enabled)
+            export VITE_APP_MODE="1"
+            npm run _dev:web
+        fi
+        ;;
+    electron)
+        # Set environment variables for Electron (it starts its own server)
+        export TEST_PORT="$TEST_WEB_PORT"
+        export TEST_SERVER_PORT="$TEST_SERVER_PORT"
+        export PORT="$SERVER_PORT"
+        export VITE_SERVER_URL="http://localhost:$SERVER_PORT"
+        export CORS_ORIGIN="http://localhost:$WEB_PORT,http://127.0.0.1:$WEB_PORT"
+        export VITE_APP_MODE="2"
+
+        if [ "$PRODUCTION_MODE" = true ]; then
+            # For production electron, we'd normally use the packaged app
+            # For now, run in dev mode but with production-built packages
+            center_print "Note: For production Electron, use the packaged app" "$C_YELLOW"
+            center_print "Running with production-built packages..." "$C_MUTE"
+            echo ""
+        fi
+
+        center_print "Launching Desktop Application..." "$C_YELLOW"
+        center_print "(Electron will start its own backend server)" "$C_MUTE"
+        echo ""
+        npm run dev:electron
+        ;;
+    docker)
+        # Check for running Electron (user might be switching from option 4)
+        check_running_electron
+
+        # Check for running containers
+        check_running_containers "docker-compose.dev.yml"
+        container_check=$?
+
+        if [ $container_check -eq 2 ]; then
+            # Attach to existing containers
+            center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+            center_print "Attaching to Docker Dev Containers" "$C_PRI"
+            center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+            echo ""
+            center_print "UI:  http://localhost:$DEFAULT_WEB_PORT" "$C_GREEN"
+            center_print "API: http://localhost:$DEFAULT_SERVER_PORT" "$C_GREEN"
+            center_print "Press Ctrl+C to detach" "$C_MUTE"
+            echo ""
+            if [ "$DOCKER_CMD" = "sg docker -c" ]; then
+                if [ -f "docker-compose.override.yml" ]; then
+                    sg docker -c "docker compose -f 'docker-compose.dev.yml' -f 'docker-compose.override.yml' logs -f"
+                else
+                    sg docker -c "docker compose -f 'docker-compose.dev.yml' logs -f"
+                fi
+            else
+                if [ -f "docker-compose.override.yml" ]; then
+                    $DOCKER_CMD compose -f docker-compose.dev.yml -f docker-compose.override.yml logs -f
+                else
+                    $DOCKER_CMD compose -f docker-compose.dev.yml logs -f
+                fi
+            fi
+        else
+            echo ""
+            center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+            center_print "Docker Development Mode" "$C_PRI"
+            center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+            echo ""
+            center_print "Starting UI + Server containers..." "$C_MUTE"
+            center_print "Source code is volume mounted for live reload" "$C_MUTE"
+            echo ""
+            center_print "UI:  http://localhost:$DEFAULT_WEB_PORT" "$C_GREEN"
+            center_print "API: http://localhost:$DEFAULT_SERVER_PORT" "$C_GREEN"
+            echo ""
+            center_print "First run may take several minutes (building image + npm install)" "$C_YELLOW"
+            center_print "Press Ctrl+C to stop" "$C_MUTE"
+            echo ""
+            center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+            echo ""
+            if [ "$DOCKER_CMD" = "sg docker -c" ]; then
+                if [ -f "docker-compose.override.yml" ]; then
+                    sg docker -c "docker compose -f 'docker-compose.dev.yml' -f 'docker-compose.override.yml' up --build"
+                else
+                    sg docker -c "docker compose -f 'docker-compose.dev.yml' up --build"
+                fi
+            else
+                if [ -f "docker-compose.override.yml" ]; then
+                    $DOCKER_CMD compose -f docker-compose.dev.yml -f docker-compose.override.yml up --build
+                else
+                    $DOCKER_CMD compose -f docker-compose.dev.yml up --build
+                fi
+            fi
+        fi
+        ;;
+    docker-electron)
+        # Check for running Electron (user might be switching from option 2)
+        check_running_electron
+
+        # Check for running containers
+        check_running_containers "docker-compose.dev-server.yml"
+        container_check=$?
+
+        echo ""
+        center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+        center_print "Electron + Docker API Mode" "$C_PRI"
+        center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+        echo ""
+        center_print "Server runs in Docker container" "$C_MUTE"
+        center_print "Electron runs locally on your machine" "$C_MUTE"
+        echo ""
+        center_print "API: http://localhost:$DEFAULT_SERVER_PORT (Docker)" "$C_GREEN"
+        echo ""
+
+        # If attaching to existing, skip the build
+        if [ $container_check -eq 2 ]; then
+            center_print "Using existing server container..." "$C_MUTE"
+        else
+            center_print "First run may take several minutes (building image + npm install)" "$C_YELLOW"
+        fi
+        echo ""
+        center_print "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" "$C_GRAY"
+        echo ""
+
+        # Start docker in background (or skip if attaching)
+        if [ $container_check -eq 2 ]; then
+            center_print "Checking if server is healthy..." "$C_MUTE"
+            DOCKER_PID=""
+        else
+            center_print "Starting Docker server container..." "$C_MUTE"
+            echo ""
+            if [ "$DOCKER_CMD" = "sg docker -c" ]; then
+                if [ -f "docker-compose.override.yml" ]; then
+                    sg docker -c "docker compose -f 'docker-compose.dev-server.yml' -f 'docker-compose.override.yml' up --build" &
+                else
+                    sg docker -c "docker compose -f 'docker-compose.dev-server.yml' up --build" &
+                fi
+            else
+                if [ -f "docker-compose.override.yml" ]; then
+                    $DOCKER_CMD compose -f docker-compose.dev-server.yml -f docker-compose.override.yml up --build &
+                else
+                    $DOCKER_CMD compose -f docker-compose.dev-server.yml up --build &
+                fi
+            fi
+            DOCKER_PID=$!
+        fi
+
+        # Wait for server to be healthy
+        echo ""
+        center_print "Waiting for server to become healthy..." "$C_YELLOW"
+        center_print "(This may take a while on first run)" "$C_MUTE"
+        echo ""
+        max_retries=180
+        server_ready=false
+        dots=""
+        for ((i=0; i<max_retries; i++)); do
+            if curl -s "http://localhost:$DEFAULT_SERVER_PORT/api/health" > /dev/null 2>&1; then
+                server_ready=true
+                break
+            fi
+            sleep 1
+            if (( i > 0 && i % 10 == 0 )); then
+                dots="${dots}."
+                center_print "Still waiting${dots}" "$C_MUTE"
+            fi
+        done
+        echo ""
+
+        if [ "$server_ready" = false ]; then
+            center_print "✗ Server container failed to become healthy" "$C_RED"
+            center_print "Check Docker logs above for errors" "$C_MUTE"
+            [ -n "$DOCKER_PID" ] && kill $DOCKER_PID 2>/dev/null || true
+            exit 1
+        fi
+
+        center_print "✓ Server is healthy!" "$C_GREEN"
+        echo ""
+        center_print "Building packages and launching Electron..." "$C_MUTE"
+        echo ""
+
+        # Build packages and launch Electron
+        npm run build:packages
+        SKIP_EMBEDDED_SERVER=true PORT=$DEFAULT_SERVER_PORT VITE_SERVER_URL="http://localhost:$DEFAULT_SERVER_PORT" VITE_APP_MODE="4" npm run _dev:electron
+
+        # Cleanup docker when electron exits
+        echo ""
+        center_print "Shutting down Docker container..." "$C_MUTE"
+        [ -n "$DOCKER_PID" ] && kill $DOCKER_PID 2>/dev/null || true
+        if [ "$DOCKER_CMD" = "sg docker -c" ]; then
+            sg docker -c "docker compose -f 'docker-compose.dev-server.yml' down" 2>/dev/null || true
+        else
+            $DOCKER_CMD compose -f docker-compose.dev-server.yml down 2>/dev/null || true
+        fi
+        center_print "Done!" "$C_GREEN"
+        ;;
+esac
diff --git a/temp_repo/tests/e2e/multi-project-dashboard.spec.ts b/temp_repo/tests/e2e/multi-project-dashboard.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ec003cf1f9c2711a86c443f984393ad1b65c731c
--- /dev/null
+++ b/temp_repo/tests/e2e/multi-project-dashboard.spec.ts
@@ -0,0 +1,119 @@
+/**
+ * Multi-Project Dashboard E2E Tests
+ *
+ * Verifies the unified dashboard showing status across all projects.
+ */
+
+import { test, expect } from '@playwright/test';
+
+test.describe('Multi-Project Dashboard', () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to the dashboard first
+    await page.goto('/dashboard');
+    await expect(page.getByTestId('dashboard-view')).toBeVisible();
+  });
+
+  test('should navigate to overview from dashboard when projects exist', async ({ page }) => {
+    // Check if the overview button is visible (only shows when projects exist)
+    const overviewButton = page.getByTestId('projects-overview-button');
+
+    // If there are projects, the button should be visible
+    if (await overviewButton.isVisible({ timeout: 2000 }).catch(() => false)) {
+      await overviewButton.click();
+
+      // Should navigate to overview page
+      await expect(page).toHaveURL(/\/overview/);
+      await expect(page.getByTestId('overview-view')).toBeVisible();
+    } else {
+      // No projects - overview button won't be shown
+      test.info().annotations.push({
+        type: 'info',
+        description: 'No projects available - skipping overview navigation test',
+      });
+    }
+  });
+
+  test('should display overview view with correct structure', async ({ page }) => {
+    // Navigate directly to overview
+    await page.goto('/overview');
+
+    // Wait for the overview view to load
+    const overviewView = page.getByTestId('overview-view');
+
+    // The view should be visible (even if loading)
+    await expect(overviewView).toBeVisible({ timeout: 5000 });
+
+    // Should have a back button to return to dashboard
+    const backButton = page
+      .locator('button')
+      .filter({ has: page.locator('svg.lucide-arrow-left') });
+    await expect(backButton).toBeVisible();
+
+    // Click back to return to dashboard
+    await backButton.click();
+    await expect(page).toHaveURL(/\/dashboard/);
+  });
+
+  test('should show loading state and then content or empty state', async ({ page }) => {
+    await page.goto('/overview');
+
+    // Should show the view
+    const overviewView = page.getByTestId('overview-view');
+    await expect(overviewView).toBeVisible({ timeout: 5000 });
+
+    // Wait for loading to complete (either shows content or error)
+    await page.waitForTimeout(2000);
+
+    // After loading, should show either:
+    // 1. Project cards if projects exist
+    // 2. Empty state message if no projects
+    // 3. Error message if API failed
+    const hasProjects = (await page.locator('[data-testid^="project-status-card-"]').count()) > 0;
+    const hasEmptyState = await page
+      .getByText('No projects yet')
+      .isVisible()
+      .catch(() => false);
+    const hasError = await page
+      .getByText('Failed to load overview')
+      .isVisible()
+      .catch(() => false);
+
+    // At least one of these should be true
+    expect(hasProjects || hasEmptyState || hasError).toBeTruthy();
+  });
+
+  test('should have overview link in sidebar footer', async ({ page }) => {
+    // First open a project to see the sidebar
+    await page.goto('/overview');
+
+    // The overview link should be in the sidebar footer
+    const sidebarOverviewLink = page.getByTestId('projects-overview-link');
+
+    if (await sidebarOverviewLink.isVisible({ timeout: 3000 }).catch(() => false)) {
+      // Should be clickable
+      await sidebarOverviewLink.click();
+      await expect(page).toHaveURL(/\/overview/);
+    }
+  });
+
+  test('should refresh data when refresh button is clicked', async ({ page }) => {
+    await page.goto('/overview');
+
+    // Wait for initial load
+    await page.waitForTimeout(1000);
+
+    // Find the refresh button
+    const refreshButton = page.locator('button').filter({ hasText: 'Refresh' });
+
+    if (await refreshButton.isVisible({ timeout: 2000 }).catch(() => false)) {
+      await refreshButton.click();
+
+      // The button should show loading state (spinner icon)
+      // Wait a moment for the refresh to complete
+      await page.waitForTimeout(1000);
+
+      // Page should still be on overview
+      await expect(page).toHaveURL(/\/overview/);
+    }
+  });
+});
diff --git a/temp_repo/vitest.config.ts b/temp_repo/vitest.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5d1e3dacf9d8563e81dbd10c0d6ad69fbb4f04c5
--- /dev/null
+++ b/temp_repo/vitest.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vitest/config';
+
+// Prevent shell/global NODE_ENV=production from breaking test-only assumptions.
+process.env.NODE_ENV = 'test';
+
+export default defineConfig({
+  test: {
+    // Use projects instead of deprecated workspace
+    // Glob patterns auto-discover projects with vitest.config.ts
+    projects: [
+      'libs/*/vitest.config.ts',
+      'apps/server/vitest.config.ts',
+      'apps/ui/vitest.config.ts',
+    ],
+  },
+});